@charset "utf-8";

/* ============================================================
   Idrettslaben

   Den organiserende idéen er LABEN. Ikke laboratoriet fra en
   actionfilm — arbeidsbenken. Målestokk, kalibrering, avlesning.
   Eleven kjører forsøk på sin egen kropp og leser av hva som skjer.

   Energien skal komme fra presisjon og respons: at noe svarer
   nøyaktig og umiddelbart når du drar i det. Ikke fra bevegelse,
   ikke fra farge som roper, aldri fra en feiring.

   Fire farger gjør jobb her. Alt annet er papir og blekk.
   ============================================================ */

/* --- fonter ------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-italic.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

/* --- tokens -------------------------------------------------- */

:root {
  color-scheme: light;

  /* Papir og blekk. Varmt, men ikke gulnet — dette er kalibrert papir,
     ikke gammelt papir. */
  --papir:       #F5F2EC;
  --papir-senk:  #EDE9E1;
  --papir-loft:  #FCFAF6;
  --strek:       #DFD9CD;
  --strek-fast:  #C6BEAE;
  --blekk:       #16191A;   /* 15,8:1 mot papir */
  --blekk-2:     #4E5456;   /*  6,9:1 */
  --blekk-3:     #636A6B;   /*  4,9:1 mot papir, 4,6:1 mot senket papir —
                                den dempede tonen brukes på ingresser og
                                bildetekster i vanlig størrelse, så den må
                                over 4,5 også på den mørkeste flaten den
                                står på. */

  /* Aksent: brent rød. Én farge som betyr «her er handlingen».
     Brukes sparsomt — er alt aksent, er ingenting det. */
  --aksent:      #B23310;
  --aksent-mork: #8C2709;
  --aksent-vask: #F7E7E1;

  /* Figurenes tre systemer, som én termisk rampe: rask og varm
     → treg og kald. Rekkefølgen bærer ekte mening (hastighet),
     derfor en sekvensiell skala og ikke tre tilfeldige farger. */
  --fig-a: #CE3D16;   /* raskest */
  --fig-b: #DFA23A;
  --fig-c: #17636D;   /* tregest */

  --gronn:  #2F6B4F;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --spalte: 34rem;          /* lesebredde — rundt 68 tegn */
  --luft:   clamp(2.5rem, 6vw, 4.5rem);
  --radius: 4px;            /* laben har rette kanter, ikke myke */

  --mykt:  cubic-bezier(.16, .84, .44, 1);
  --begge: cubic-bezier(.62, .02, .28, 1);
}

/* --- grunn ---------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papir);
  color: var(--blekk);
  font: 400 1.0625rem/1.65 var(--serif);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.04;
  text-wrap: balance;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2.5px solid var(--aksent);
  outline-offset: 3px;
  border-radius: 2px;
}

.hopplenke {
  position: fixed; left: 1rem; top: 1rem; z-index: 200;
  transform: translateY(-180%);
  padding: .7rem 1.1rem; border-radius: var(--radius);
  background: var(--blekk); color: var(--papir);
  font: 700 .9rem var(--sans); text-decoration: none;
}
.hopplenke:focus { transform: translateY(0); }

[hidden] { display: none !important; }

/* Målestokken — husets signatur. Den sier «her måles det», og den er
   det eneste dekorative elementet i hele appen. Derfor får den lov. */
.maalestokk {
  height: 13px;
  background-image:
    linear-gradient(to right, var(--strek-fast) 1px, transparent 1px),
    linear-gradient(to right, var(--strek) 1px, transparent 1px);
  background-size: 64px 13px, 8px 7px;
  background-position: 0 0, 0 bottom;
  background-repeat: repeat-x;
  border-bottom: 1px solid var(--strek);
}

/* ============================================================
   Velkomst
   ============================================================ */

.velkomst {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}

.velkomst-ark {
  width: min(46rem, 100%);
  background: var(--papir-loft);
  border: 1px solid var(--strek);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 var(--strek), 0 18px 40px -28px rgba(22, 25, 26, .35);
  overflow: hidden;
}

.velkomst-topp {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  align-items: baseline; justify-content: space-between;
  padding: 1.4rem clamp(1.25rem, 5vw, 2.75rem) 1.1rem;
}

.merkenavn {
  margin: 0;
  font: 800 1.12rem/1 var(--sans);
  font-stretch: 108%;
  letter-spacing: -0.03em;
}
.merkenavn--lenke { text-decoration: none; }

.velkomst-sted {
  margin: 0;
  font: 500 .8rem/1 var(--sans);
  color: var(--blekk-3);
}

.velkomst-tekst,
.velkomst-skjema,
.velkomst-personvern { padding: 0 clamp(1.25rem, 5vw, 2.75rem); }

.velkomst-tekst { padding-top: clamp(1.75rem, 5vw, 2.75rem); }

.velkomst-tekst h1 {
  font-size: clamp(2.5rem, 7.5vw, 4rem);
  font-stretch: 96%;
  margin-bottom: .85rem;
}

.velkomst-tekst p {
  max-width: var(--spalte);
  color: var(--blekk-2);
}

.velkomst-skjema { padding-top: 2rem; padding-bottom: .5rem; }

.fagvalg-gruppe { margin: 0 0 1.5rem; padding: 0; border: 0; }

.fagvalg-gruppe legend {
  padding: 0 0 .6rem;
  font: 600 .82rem/1 var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blekk-3);
}

.fagvalg-rad { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }

.fagvalg {
  display: grid; gap: .3rem; justify-items: start; text-align: left;
  padding: 1rem 1.1rem;
  background: var(--papir);
  border: 1px solid var(--strek-fast);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .16s var(--mykt), background .16s var(--mykt), transform .1s var(--mykt);
}
.fagvalg:hover { border-color: var(--blekk-3); }
.fagvalg:active { transform: translateY(1px); }
.fagvalg.er-valgt {
  border-color: var(--aksent);
  background: var(--aksent-vask);
  box-shadow: inset 0 0 0 1px var(--aksent);
}
.fagvalg-navn { font: 700 1.02rem/1.2 var(--sans); }
.fagvalg-om { font-size: .88rem; color: var(--blekk-3); line-height: 1.4; }

.velkomst-felt { margin-bottom: 1rem; }
.velkomst-felt label {
  display: block; margin-bottom: .35rem;
  font: 600 .82rem/1 var(--sans);
  letter-spacing: .04em; text-transform: uppercase; color: var(--blekk-3);
}
.valgfritt { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .8; }

.velkomst-felt input {
  width: 100%; padding: .75rem .9rem;
  background: var(--papir);
  border: 1px solid var(--strek-fast);
  border-radius: var(--radius);
}

.velkomst-personvern {
  margin: 0;
  padding-top: 1.75rem; padding-bottom: clamp(1.5rem, 5vw, 2.5rem);
  max-width: var(--spalte);
  font-size: .9rem; color: var(--blekk-3);
}

/* ============================================================
   Knapper
   ============================================================ */

.knapp {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.35rem;
  font: 700 .96rem/1 var(--sans);
  background: transparent;
  border: 1px solid var(--strek-fast);
  border-radius: var(--radius);
  color: var(--blekk);
  cursor: pointer;
  transition: background .15s var(--mykt), border-color .15s var(--mykt), transform .09s var(--mykt);
}
.knapp:hover { border-color: var(--blekk-3); background: var(--papir-senk); }
.knapp:active { transform: translateY(1px); }
.knapp:disabled { opacity: .4; cursor: not-allowed; }

.knapp--tung {
  background: var(--blekk); border-color: var(--blekk); color: var(--papir-loft);
  padding: .95rem 1.6rem;
}
.knapp--tung:hover:not(:disabled) { background: #000; border-color: #000; }
.knapp--tung:disabled { background: var(--strek-fast); border-color: var(--strek-fast); color: var(--papir-loft); opacity: 1; }

.knapp--stille { font-weight: 600; color: var(--blekk-2); }

/* ============================================================
   Skall: topplinje, nav
   ============================================================ */

.topplinje {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem) .85rem;
  max-width: 76rem; margin: 0 auto; width: 100%;
}

/* Menyen og lesebryteren hører sammen til høyre; merkenavnet står alene
   til venstre. Uten dette ville space-between skjøvet menyen til midten
   når bryteren kom som et tredje barn. */
.hovednav { display: flex; gap: .35rem; margin-left: auto; }

.navlenke {
  padding: .45rem .8rem;
  font: 600 .93rem/1 var(--sans);
  color: var(--blekk-2);
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: color .15s var(--mykt), background .15s var(--mykt);
}
.navlenke:hover { color: var(--blekk); background: var(--papir-senk); }
.navlenke.er-aktiv {
  color: var(--blekk);
  background: var(--papir-senk);
  border-color: var(--strek);
}
.navlenke--stille { color: var(--blekk-3); }

/* Visningsbryteren: tre faste posisjoner, som en bryter på et instrument.
   Den er stille — en leseinnstilling, ikke en av bokas fem flater — og
   den markerer VALGET, ikke visningen (se app.js). Treffflatene er 34 px
   høye, over WCAG-minimumet, også med finger. */
.tema-velger {
  flex: none;
  display: inline-flex;
  margin-left: .5rem;
  border: 1px solid var(--strek);
  border-radius: var(--radius);
  overflow: hidden;
}
.tema-valg {
  padding: .42rem .6rem;
  min-height: 34px;
  background: none;
  border: none;
  border-left: 1px solid var(--strek);
  font: 600 .78rem/1.1 var(--sans);
  color: var(--blekk-3);
  cursor: pointer;
  transition: color .15s var(--mykt), background .15s var(--mykt);
}
.tema-valg:first-child { border-left: none; }
.tema-valg:hover { color: var(--blekk); background: var(--papir-senk); }
.tema-valg.er-valgt {
  color: var(--blekk);
  background: var(--papir-senk);
}

/* Les opp-knappen: samme stille instrumentspråk som visningsbryteren.
   Fast minstebredde så «Les opp» ↔ «Stopp» ikke flytter topplinja. */
.opplesing-knapp {
  flex: none;
  margin-left: .5rem;
  min-height: 34px;
  min-width: 4.6rem;
  padding: .42rem .6rem;
  background: none;
  border: 1px solid var(--strek);
  border-radius: var(--radius);
  font: 600 .78rem/1.1 var(--sans);
  color: var(--blekk-3);
  cursor: pointer;
  transition: color .15s var(--mykt), background .15s var(--mykt);
}
.opplesing-knapp:hover { color: var(--blekk); background: var(--papir-senk); }
.opplesing-knapp.er-aktiv { color: var(--blekk); background: var(--papir-senk); }

.maalestokk--topp { margin-bottom: var(--luft); }

#innhold {
  display: block;
  width: min(76rem, 100%);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem) 7rem;
}

.bunnnav { display: none; }

@media (max-width: 40rem) {
  .hovednav { display: none; }
  /* Menyen bar høyrejusteringen; når den skjules, tar knappen over.
     Raden strammes samtidig: merkenavn + Les opp + visningsbryter må
     dele 375 px uten at boka får vannrett rulling.
     På de smaleste telefonene (320–360 px) er det likevel for trangt —
     målt: raden trenger 358 px mot 319 tilgjengelige. Da bryter den til
     to linjer i stedet for å gi hele boka vannrett rulling, som er den
     dyreste feilen av de to. Uten `Les opp` fantes ikke problemet. */
  .topplinje { gap: .5rem; flex-wrap: wrap; }
  .opplesing-knapp { margin-left: auto; min-width: 4.2rem; padding: .42rem .5rem; }
  .tema-valg { padding: .42rem .45rem; }
  .bunnnav {
    position: fixed; inset: auto 0 0 0; z-index: 60;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: .25rem;
    padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--papir) 92%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--strek);
  }
  .bunnnav .navlenke { text-align: center; padding: .7rem .4rem; }
  #innhold { padding-bottom: 6rem; }
}

/* ============================================================
   Flatetopper
   ============================================================ */

.flate-topp { margin-bottom: 2.75rem; }

.flate-tittel {
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  font-stretch: 94%;
  margin-bottom: .7rem;
}

.flate-inn {
  max-width: var(--spalte);
  color: var(--blekk-2);
}

.tomt {
  max-width: var(--spalte);
  padding: 2rem 0;
  color: var(--blekk-3);
}

/* ============================================================
   Kapittel
   ============================================================ */

/* Kapittelets rutenett.
   Tre spor med hver sin jobb, ikke tre spor for variasjonens skyld:

     ARGUMENTET   brødteksten, 34rem — lesekomfort er ikke forhandlbar
     SIDENOTATET  nøkkel, myte, ordliste, lærerstemme — det som kommenterer
                  argumentet uten å være det, og som før brøt lesingen ved å
                  ligge midt i spalten
     INSTRUMENTET figurene, som er det eneste innholdet som blir bedre av bredde

   Stoppene (krok, sjekk, overfør) blir i hovedspalten med vilje: der skal
   eleven stanse i flyten, ikke se noe i øyekroken.

   `dense` gjør at et sidenotat faller inn i det ledige margfeltet ved siden
   av teksten det hører til, i stedet for å skyve alt nedover. På smal skjerm
   kollapser alt til én spalte i samme rekkefølge — samme grammatikk, annen
   komposisjon. */
.kapittel {
  display: grid;
  grid-auto-flow: row dense;
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [hoved-start] minmax(0, var(--spalte))
    [hoved-end marg-start] minmax(0, 17rem)
    [marg-end] minmax(0, 1fr) [full-end];
  column-gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

.kapittel > * { grid-column: hoved; }

.kapittel > .blokk--nokkel,
.kapittel > .blokk--myte,
.kapittel > .ordliste { grid-column: marg; }

/* Figurer og tegninger er det eneste innholdet som blir bedre av plass: en bane
   i riktig forhold, og en sekvens der bredden ER informasjonen, taper på å
   presses ned i spaltebredde. */
.kapittel > .blokk--figur,
.kapittel > .blokk--tegning { grid-column: hoved-start / marg-end; }

.kapittel > .kapittel-topp { grid-column: hoved-start / marg-end; }

/* Stoppene sperrer margen.
   Krok, sjekk, overfør og tilbakeblikk er øyeblikk der eleven skal stanse.
   Lot de stå i hovedspalten alene, ville `dense` fylt margfeltet ved siden av
   med et sidenotat — og da har hun noe i øyekroken akkurat når hun ikke skal
   ha det. De opptar derfor begge sporene, men leses fortsatt på spaltebredde. */
.kapittel > .blokk--krok,
.kapittel > .blokk--sjekk,
.kapittel > .blokk--overfor,
.kapittel > .tilbakeblikk {
  grid-column: hoved-start / marg-end;
  max-width: var(--spalte);
}

/* Under bruddpunktet finnes ingen marg å legge noe i. */
@media (max-width: 62rem) {
  .kapittel {
    display: block;
    max-width: var(--spalte);
    margin: 0 auto;
  }
}

/* --- oppslagsmodus -------------------------------------------------------
   Kapittelet som blar. Ett oppslag = én idé + én handling, med rom rundt.
   Samme grammatikk på alle bredder (lov 7): på desktop kan tekst og
   avlesning stå side ved side som et ekte oppslag, på mobil stables de —
   betydningen er den samme, bare layouten flekser. Navigasjonen ligger
   fast nederst, alltid på samme sted, med posisjonssporet som
   linjalstreker: en huskelapp om hvor du er, aldri en fremdriftsmåler. */

.kapittel.kapittel--oppslag {
  display: flex;
  flex-direction: column;
  /* .kapittel har align-items: start for grid-sporene sine. I flex-kolonna
     ville start bety at oppslaget krymper til innholdsbredde og klistres
     til venstre — det var nøyaktig slik feilen så ut på fotografiene. */
  align-items: stretch;
  max-width: none;
  margin: 0;
  min-height: calc(100svh - 9.5rem);
}

.oppslag {
  flex: 1;
  display: grid;
  align-content: safe center;
  justify-items: center;
  padding-block: clamp(1rem, 3vh, 3rem) clamp(2rem, 5vh, 4rem);
}

.oppslag-innhold {
  width: 100%;
  max-width: var(--spalte);
  margin-inline: auto;
}

.oppslag-innhold.har-avlesning {
  display: grid;
  grid-template-columns: minmax(0, var(--spalte)) minmax(0, 1fr);
  column-gap: var(--luft);
  align-items: start;
  max-width: 72rem;
}

.oppslag-innhold.har-avlesning .oppslag-avlesning {
  /* Avlesningen står et hakk ned, som på en arbeidsbenk: teksten begynner
     øverst, instrumentet ligger i synshøyde midt i lesingen. */
  margin-top: 1.5rem;
  min-width: 0;
}

.oppslag-innhold > .kapittel-topp { grid-column: 1 / -1; }

.oppslag-tekst { min-width: 0; max-width: var(--spalte); }

/* Et oppslag som BARE bærer en figur eller tegning skal ikke klemmes ned i
   lesebredden — instrumentet blir smalere uten å bli bedre lesbart. Det er
   samme resonnement som i rullemodusen, der figurer spenner over begge
   sporene. Prosa har fortsatt sin lesebredde; dette gjelder bare oppslag
   uten prosa. */
.oppslag-innhold.bare-visuelt,
.oppslag-innhold.bare-visuelt > .oppslag-tekst { max-width: 60rem; }

.oppslag-knagg {
  margin: 0 0 1.4rem;
  padding-left: 1rem;
  border-left: 3px solid var(--strek-fast);
  font: 500 .98rem/1.55 var(--sans);
  color: var(--blekk-2);
}

/* Bjelken: stedsangivelse på alle oppslag etter det første, så tittel og
   læreplanmerking aldri er betinget av å stå på oppslag 1 (lov 5). */
.oppslag-bjelke {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 2rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--strek);
  font: 600 .8rem/1.3 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blekk-3);
}
.oppslag-bjelke-merke { white-space: nowrap; font-weight: 500; }

/* På oppslag uten avlesning er innholdet klemt til lesebredden (34rem), og
   der manglet bjelken rundt 30 px: «Badminton: banen, serven og slagene» +
   «I læreplanen — vises i hallen» trenger 575 px mot 544 tilgjengelige, så
   68 av 397 oppslag brakk over to linjer. Bjelken spenner derfor litt
   bredere enn spalten — den er en kolofonlinje som rammer inn teksten, ikke
   en del av den. Klemt mot viewporten så den aldri går utenfor. */
.oppslag-innhold:not(.har-avlesning) > .oppslag-bjelke {
  width: min(calc(100% + 8rem), calc(100vw - 2.5rem));
  margin-inline: auto;
  margin-left: max(-4rem, calc((100vw - 2.5rem - 100%) / -2));
  /* Archivo har en breddeakse, og her er den til nytte og ikke til pynt:
     den lengste bjelken i boka («Volleyball: rotasjon, system og rommet bak
     blokken» + «I læreplanen — vises i hallen», 79 tegn) trenger de siste
     prosentene. Smalere skrift på en kolofonlinje er dessuten riktig
     retning — den skal være stille. */
  font-stretch: 94%;
}

/* Universell utforming: tekst som bare skjermleseren skal ha. */
.uu-skjult {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Blokkene arver rullemodusens indre utseende; bare plasseringen er ny.
   Stoppene (krok/sjekk/overfor) skal fortsatt leses på spaltebredde. */
.oppslag-tekst .blokk { margin-bottom: 1.6rem; }
.oppslag-tekst .blokk:last-child { margin-bottom: 0; }
.oppslag-avlesning .blokk { margin-bottom: 1.6rem; }
.oppslag-avlesning .blokk:last-child { margin-bottom: 0; }

.oppslag-til-timen {
  margin-top: 2.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--strek);
  font-style: italic;
  color: var(--blekk-2);
}

.oppslag-innhold .ordliste { margin-top: 2.5rem; }

/* --- navigasjonen --- */

.oppslag-nav {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 0 1rem;
  background: var(--papir);
  border-top: 1px solid var(--strek);
}

.oppslag-forrige,
.oppslag-neste {
  padding: .65rem 1.15rem;
  border-radius: var(--radius);
  font: 700 .95rem/1 var(--sans);
  cursor: pointer;
}

.oppslag-forrige {
  background: var(--papir-loft);
  border: 1px solid var(--strek-fast);
}
.oppslag-forrige:disabled {
  opacity: .45;
  cursor: default;
}

.oppslag-neste {
  background: var(--aksent);
  border: 1px solid var(--aksent);
  color: var(--papir-loft);
}
.oppslag-neste:hover { background: var(--aksent-mork); }

/* Kapittelbunnen (Til kartet / Neste kapittel) er peak-end-omsorgen fra
   rullemodusen. I oppslagsmodus hører den til SLUTTEN — under hvert
   oppslag ville den vært støy og en snarvei forbi porsjonene. */
.kapittel--oppslag + .kapittel-bunn { display: none; }
.kapittel--oppslag.paa-slutten + .kapittel-bunn { display: flex; }

/* Siste oppslags utgang er Neste-knappen selv, omdøpt «Til kartet» og
   dempet — ingen rop, ingen feiring, og ingen knapp som forsvinner og
   får sporet til å hoppe (delta-FELL D1–D3: både [hidden]-fiksen og
   min-height-fiksen var beviselig inerte, så utgangen bor i navet nå). */
.oppslag-neste.er-rolig {
  background: var(--papir-loft);
  border-color: var(--strek-fast);
  color: var(--blekk-2);
}
.oppslag-neste.er-rolig:hover { background: var(--aksent-vask); }

/* Avlesningen skal ha instrumentets nærvær, ikke flyte som en tynn strek
   i en tom spalte: tegninger på oppslagets høyreside står på benkeplate. */
.oppslag-avlesning .blokk--tegning {
  background: var(--papir-loft);
  border: 1px solid var(--strek);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.1rem;
}

/* Posisjonssporet: linjalstreker. Alle streker er like — bare posisjonen
   skiller seg, litt høyere og i aksent. Ingen fylt/ufylt-logikk. */
/* Sporet må tåle et langt kapittel. Med faste treffflater fylte tolv
   streker 288 av 358 px på mobil — ved femten rant det over (FELL-funn
   D9). Nå krymper mellomrommene før strekene: flatene holder 24 px så
   lenge det går, og sporet legger seg midtstilt i den plassen det har. */
.oppslag-spor {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
}

.oppslag-strek {
  padding: 10px 5px 0;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: flex-end;
  height: 30px;
  /* Krymp mellomrommet før streken: padding kan gi etter, tegnet ikke. */
  flex: 0 1 auto;
  min-width: 12px;
}

.oppslag-strek::after {
  content: "";
  display: block;
  width: 2px;
  height: 11px;
  background: var(--strek-fast);
}

.oppslag-strek:hover::after { background: var(--blekk-3); }
.oppslag-strek.er-her::after {
  height: 19px;
  width: 2.5px;
  background: var(--aksent);
}

@media (max-width: 62rem) {
  .kapittel.kapittel--oppslag {
    display: flex;
    max-width: none;
    margin: 0;
    min-height: calc(100svh - 8rem);
  }
  .oppslag { align-content: start; }
  .oppslag-innhold.har-avlesning {
    display: block;
    max-width: var(--spalte);
  }
  .oppslag-innhold.har-avlesning .oppslag-avlesning { margin-top: 1.6rem; }
  .oppslag-bjelke { display: block; }
  .oppslag-bjelke-merke { display: block; margin-top: .15rem; }
  /* Med finger er 12 px-streker et lotteri (WCAG 2.5.8 krever 24×24).
     Sporet får egen rad med fulle treffflater; strekene er fortsatt bare
     streker å se til — det er flatene som vokser, ikke tegnet. */
  .oppslag-nav { flex-wrap: wrap; row-gap: .3rem; padding-inline: 0; }
  /* På smal skjerm er bunnmenyen fixed nederst med z-index 60 — et sticky
     nav på bottom: 0 havner UNDER den, og Neste-knappen forsvinner delvis.
     Navet legger seg derfor rett over menyen. Og et oppslag som er høyere
     enn skjermen må ha plass til å rulle helt fram: uten nok bunnluft
     endte siste tekstlinje bak navet og menyen. */
  @media (max-width: 40rem) {
    .oppslag-nav { bottom: calc(3.45rem + env(safe-area-inset-bottom)); }
    .oppslag { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  }
  .oppslag-spor { order: -1; width: 100%; justify-content: center; }
  .oppslag-strek { padding: 10px 11px 0; height: 34px; }
  .oppslag-forrige, .oppslag-neste { padding: .75rem 1rem; }
}

.kapittel-topp { margin-bottom: 2.5rem; }

.kapittel-sti {
  margin: 0 0 .9rem;
  font: 600 .8rem/1 var(--sans);
  letter-spacing: .045em; text-transform: uppercase;
  color: var(--blekk-3);
}

.kapittel-tittel {
  font-size: clamp(2.15rem, 6vw, 3.1rem);
  font-stretch: 94%;
  margin-bottom: .8rem;
}

.kapittel-ingress {
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--blekk-2);
  margin-bottom: 1.5rem;
}

/* Ærlig forankring: står dette i læreplanen, eller er det bakgrunn?
   Formforskjellen er ekte — derfor får den lov å være synlig. */
.kapittel-forankring {
  padding: .9rem 1.1rem;
  border-left: 2px solid var(--strek-fast);
  background: var(--papir-senk);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .92rem;
}
.kapittel-forankring.er-pensum { border-left-color: var(--gronn); }
.kapittel-forankring.er-bakgrunn { border-left-color: var(--strek-fast); }

.forankring-merke {
  display: block; margin-bottom: .4rem;
  font: 700 .74rem/1 var(--sans);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--blekk-3);
}
.er-pensum .forankring-merke { color: var(--gronn); }

/* «Vises i hallen» er ikke en svakere grad enn «i læreplanen» — det er en
   annen slags kobling. Derfor får den samme vekt, men aksentens farge:
   dette er kunnskapen som skal ut i kroppen, ikke bli stående i boka. */
.kapittel-forankring.vises-i-hallen { border-left-color: var(--aksent); }
.vises-i-hallen .forankring-merke { color: var(--aksent-mork); }
.forankring-om {
  margin: 0 0 .5rem;
  font-size: .92rem;
  color: var(--blekk-2);
}

.forankring-liste { margin: 0; padding-left: 1.1rem; color: var(--blekk-2); }
.forankring-liste li { margin-bottom: .25rem; }
.kapittel-forankring p { margin: 0; color: var(--blekk-2); }

/* --- blokker -------------------------------------------------- */

.blokk { margin: 0 0 2.4rem; }

.blokk--brod h3 {
  margin: 2.2rem 0 .7rem;
  font-size: 1.3rem;
  font-stretch: 100%;
}
.blokk--brod ul, .blokk--brod ol { padding-left: 1.2rem; margin: 0 0 1.05em; }
.blokk--brod li { margin-bottom: .35em; }
.blokk--brod strong { font-weight: 700; }

/* Nøkkelen: det ene som må sitte. Sterkere enn brødtekst, roligere
   enn en figur. Maks tre per kapittel. */
.blokk--nokkel {
  padding: 1.35rem 1.5rem;
  background: var(--papir-loft);
  border: 1px solid var(--strek);
  border-top: 3px solid var(--blekk);
  border-radius: 0 0 var(--radius) var(--radius);
}
.nokkel-tittel {
  font-size: 1.1rem;
  font-stretch: 100%;
  margin-bottom: .5rem;
}
.nokkel-kropp p:last-child { margin-bottom: 0; }

/* Myten: påstanden slik eleven kjenner den, så motsvaret. */
.blokk--myte {
  padding: 1.35rem 1.5rem;
  background: var(--aksent-vask);
  border-radius: var(--radius);
}
.myte-pastand { margin-bottom: .7rem; }
.myte-merke {
  display: block; margin-bottom: .3rem;
  font: 700 .74rem/1 var(--sans);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--aksent-mork);
}
.myte-tekst {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.14rem;
  line-height: 1.45;
  color: var(--blekk-2);
}
.myte-sannhet {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.35;
  margin-bottom: .6rem;
}
.myte-forklaring { margin-bottom: 0; color: var(--blekk-2); font-size: .97rem; }

/* Sidenotatene i margen: mindre boks, mer marginalia. Under bruddpunktet
   står de i spalten igjen og trenger boksen for å skille seg fra brødteksten. */
@media (min-width: 62.0625rem) {
  .kapittel > .blokk--nokkel {
    padding: 0 0 0 .9rem;
    background: none;
    border: 0;
    border-left: 2px solid var(--blekk);
    border-radius: 0;
  }
  .kapittel > .blokk--myte {
    padding: 0 0 0 .9rem;
    background: none;
    border-left: 2px solid var(--aksent);
    border-radius: 0;
  }
  .kapittel > .blokk--nokkel .nokkel-tittel { font-size: 1rem; }
  .kapittel > .blokk--myte .myte-tekst { font-size: 1rem; }
  .kapittel > .blokk--myte .myte-sannhet { font-size: 1rem; }
  .kapittel > .blokk--nokkel,
  .kapittel > .blokk--myte { font-size: .93rem; }
  .kapittel > .ordliste {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    border-left: 2px solid var(--strek-fast);
    padding-left: .9rem;
  }
}

/* --- flervalg -------------------------------------------------- */

.valg { margin: 0; }

.valg-sporsmal {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.14rem;
  line-height: 1.32;
  margin-bottom: 1rem;
}

.valg-liste { display: grid; gap: .5rem; }

.valg-alt {
  display: block; width: 100%; text-align: left;
  padding: .85rem 1rem;
  background: var(--papir-loft);
  border: 1px solid var(--strek-fast);
  border-radius: var(--radius);
  cursor: pointer;
  line-height: 1.45;
  transition: border-color .14s var(--mykt), background .14s var(--mykt), transform .08s var(--mykt);
}
.valg-alt:hover:not(:disabled) { border-color: var(--blekk-3); background: var(--papir); }
.valg-alt:active:not(:disabled) { transform: translateY(1px); }
.valg-alt:disabled { cursor: default; }

.valg-alt.er-riktig {
  border-color: var(--gronn);
  box-shadow: inset 0 0 0 1px var(--gronn);
  background: color-mix(in srgb, var(--gronn) 7%, var(--papir-loft));
}
.valg-alt.var-mitt {
  border-color: var(--aksent);
  background: var(--aksent-vask);
}
.valg-alt:disabled:not(.er-riktig):not(.var-mitt) { opacity: .5; }

.valg-svar { display: none; margin-top: 1rem; }
.valg-svar.vis { display: block; }

.svar-forutsetter {
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  color: var(--aksent-mork);
  margin-bottom: .5rem;
}
.svar-forklaring { margin-bottom: .5rem; }
.svar-utvidelse { font-size: .95rem; color: var(--blekk-3); margin-bottom: 0; }

.valg-hopp {
  margin-top: .75rem; padding: 0;
  background: none; border: 0;
  font: 600 .88rem/1 var(--sans);
  color: var(--blekk-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.valg-hopp:hover { color: var(--blekk); }
.hoppet .valg-svar { opacity: .85; }

/* Kroken: eleven gjetter før hun får vite. Den skal se ut som en
   invitasjon, ikke som en prøve. */
.blokk--krok {
  padding: 1.5rem;
  background: var(--papir-loft);
  border: 1px solid var(--strek-fast);
  border-radius: var(--radius);
}
.krok-merke {
  margin-bottom: .7rem;
  font: 700 .74rem/1 var(--sans);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--aksent-mork);
}
.krok-hvorfor {
  margin-top: 1rem;
  border-top: 1px solid var(--strek);
  padding-top: .8rem;
}
.krok-hvorfor summary {
  font: 600 .88rem/1 var(--sans);
  color: var(--blekk-3);
  cursor: pointer;
}
.krok-hvorfor summary:hover { color: var(--blekk); }
.krok-hvorfor p {
  margin: .7rem 0 0;
  font-size: .93rem;
  color: var(--blekk-2);
}

.blokk--sjekk {
  padding-top: 1.5rem;
  border-top: 1px solid var(--strek);
}

/* Tilbakeblikket: kort, øverst, uten dramatikk. */
.tilbakeblikk {
  margin-bottom: 2.75rem;
  padding: 1.35rem 1.5rem;
  background: var(--papir-senk);
  border-radius: var(--radius);
}
.tilbakeblikk-merke {
  margin-bottom: .35rem;
  font: 700 .74rem/1 var(--sans);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--blekk-3);
}
.tilbakeblikk-inn { font-size: .93rem; color: var(--blekk-2); margin-bottom: 1.1rem; }
.tilbakeblikk .valg + .valg { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--strek); }
.tilbakeblikk .valg-sporsmal { font-size: 1.02rem; }

/* Overfør: elevens egen tekst. Mest hvitt av alt. */
.blokk--overfor {
  padding-top: 1.75rem;
  border-top: 1px solid var(--strek);
}
.overfor-merke {
  margin-bottom: .5rem;
  font: 700 .74rem/1 var(--sans);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--blekk-3);
}
.overfor-sporsmal {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.35;
  margin-bottom: .9rem;
}
.overfor-felt {
  width: 100%;
  padding: .9rem 1rem;
  background: var(--papir-loft);
  border: 1px solid var(--strek-fast);
  border-radius: var(--radius);
  resize: vertical;
  line-height: 1.6;
}
.overfor-lagret {
  margin: .5rem 0 0;
  font: 500 .82rem/1 var(--sans);
  color: var(--blekk-3);
}

/* --- ordliste --------------------------------------------------- */

.ordliste {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--strek);
}
.ordliste-tittel {
  font-size: 1.05rem;
  font-stretch: 100%;
  margin-bottom: 1rem;
}
.ordliste-liste { margin: 0; }
.ordliste-liste dt {
  font: 700 .97rem/1.4 var(--sans);
  margin-top: .9rem;
}
.ordliste-liste dd {
  margin: .15rem 0 0;
  color: var(--blekk-2);
  font-size: .97rem;
}

/* --- kapittelbunn ----------------------------------------------- */

.kapittel-bunn {
  max-width: var(--spalte);
  margin: 3.5rem auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--strek);
  display: flex; flex-wrap: wrap; gap: .75rem;
  align-items: center; justify-content: space-between;
}
.knapp--videre {
  flex-direction: column; align-items: flex-start; gap: .15rem;
  padding: .8rem 1.35rem;
  background: var(--blekk); border-color: var(--blekk); color: var(--papir-loft);
}
.knapp--videre:hover { background: #000; border-color: #000; }
.videre-merke {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  opacity: .72;
}
.videre-tittel { font-size: 1rem; font-weight: 700; }

/* ============================================================
   Kartet
   ============================================================ */

.kart-bolk { margin-bottom: 3.25rem; }

.kart-bolk-topp { margin-bottom: 1.1rem; }
.kart-bolk-tittel { font-size: 1.45rem; font-stretch: 100%; margin-bottom: .3rem; }
.kart-bolk-inn { max-width: var(--spalte); color: var(--blekk-3); font-size: .97rem; margin: 0; }

.kart-liste { list-style: none; margin: 0; padding: 0; }

.kart-node + .kart-node { border-top: 1px solid var(--strek); }

.kart-lenke {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: baseline;
  padding: 1rem .5rem 1rem 0;
  text-decoration: none;
  transition: background .14s var(--mykt);
}
.kart-lenke:hover { background: var(--papir-senk); }

/* Fylt eller tom prikk — ikke en prosent, ikke en fremdriftslinje.
   Bare en huskelapp om hvor du har vært. */
.kart-prikk {
  width: 9px; height: 9px; margin-top: .45rem;
  border: 1.5px solid var(--strek-fast);
  border-radius: 50%;
  justify-self: center;
}
.er-sett .kart-prikk { background: var(--blekk); border-color: var(--blekk); }

.kart-tekst { display: grid; gap: .15rem; }
.kart-tittel { font: 700 1.06rem/1.3 var(--sans); }
.kart-ingress { font-size: .94rem; color: var(--blekk-3); line-height: 1.45; }
.kart-tid { font: 500 .84rem/1 var(--sans); color: var(--blekk-3); white-space: nowrap; }

.er-bakgrunn .kart-tittel::after {
  content: "bakgrunn";
  margin-left: .55rem;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--blekk-3);
  vertical-align: .12em;
}

/* ============================================================
   Nå
   ============================================================ */

.na-topp { margin-bottom: 2rem; }
.na-uker {
  margin: 0 0 .6rem;
  font: 600 .82rem/1 var(--sans);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--aksent-mork);
}

.na-kort {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  background: var(--strek);
  border: 1px solid var(--strek);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 2.75rem;
}
.na-rute { padding: 1.1rem 1.25rem; background: var(--papir-loft); }
.na-rute-merke {
  display: block; margin-bottom: .35rem;
  font: 700 .72rem/1 var(--sans);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--blekk-3);
}
.na-rute-tekst { margin: 0; font-size: .99rem; line-height: 1.5; }

.na-les { margin-bottom: 2.75rem; }
.na-les-tittel, .na-steg-tittel, .na-maal-tittel {
  font-size: 1.15rem; font-stretch: 100%; margin-bottom: .85rem;
}
.na-les-liste { list-style: none; margin: 0; padding: 0; }
.na-les-liste li + li { margin-top: .5rem; }
.na-les-lenke {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .9rem 1.1rem;
  background: var(--papir-loft);
  border: 1px solid var(--strek-fast);
  border-left: 3px solid var(--aksent);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background .14s var(--mykt);
}
.na-les-lenke:hover { background: var(--aksent-vask); }
.na-les-navn { font: 700 1rem/1.3 var(--sans); }
.na-les-tid { font: 500 .84rem/1 var(--sans); color: var(--blekk-3); white-space: nowrap; }

/* Før → underveis → etter er ett tidsforløp og står som tre kolonner der
   det er plass — én smal spalte med halv skjerm tom ved siden av var
   defekten som utløste regelen. På smal skjerm faller de under hverandre
   i samme rekkefølge; betydningen er den samme, bare layouten flekser. */
.na-steg-rad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--luft);
  margin-bottom: 2.25rem;
}
@media (max-width: 760px) {
  .na-steg-rad { grid-template-columns: 1fr; gap: 2.25rem; }
}
.na-steg { margin-bottom: 2.25rem; }
.na-steg-rad .na-steg { margin-bottom: 0; max-width: var(--spalte); }
.na-steg-liste { margin: 0; padding-left: 1.2rem; }
.na-steg-liste li { margin-bottom: .45rem; }

.na-maal { max-width: var(--spalte); margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--strek); }
.na-maal-liste { margin: 0; padding-left: 1.2rem; color: var(--blekk-2); font-size: .96rem; }
.na-maal-liste li { margin-bottom: .3rem; }

/* Lærerens stemme. Bare når han har noe fagligs å si — aldri heiarop. */
.laererstemme {
  max-width: var(--spalte);
  margin: 0 0 2.5rem;
  padding-left: 1.15rem;
  border-left: 2px solid var(--aksent);
}
.laererstemme-navn {
  display: block; margin-bottom: .35rem;
  font: 700 .76rem/1 var(--sans);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--aksent-mork);
}
.laererstemme-tekst {
  margin: 0;
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--blekk-2);
}

/* ============================================================
   Notatboka — stillest av alle flatene
   ============================================================ */

.notat-kort {
  max-width: var(--spalte);
  margin-bottom: 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--strek);
}
.notat-hode { margin-bottom: .5rem; }
.notat-kapittel {
  font: 700 .78rem/1 var(--sans);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--blekk-3);
}
.notat-sporsmal { font-size: .97rem; color: var(--blekk-3); margin-bottom: .6rem; }
.notat-tekst { white-space: pre-wrap; }
.notat-lenke {
  font: 600 .88rem/1 var(--sans);
  color: var(--blekk-2);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ============================================================
   Lærerflaten — bevisst kjedelig
   ============================================================ */

.laerer-fag { margin-bottom: 2.75rem; }
.laerer-fag-tittel { font-size: 1.3rem; font-stretch: 100%; margin-bottom: 1rem; }

.laerer-periode {
  padding: 1.1rem 0;
  border-top: 1px solid var(--strek);
}
.laerer-periode-tittel { font-size: 1rem; font-stretch: 100%; margin-bottom: .7rem; }

.laerer-valgt { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.laerer-ingen { font-size: .9rem; color: var(--blekk-3); }
.laerer-brikke {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .5rem .35rem .7rem;
  background: var(--papir-senk);
  border: 1px solid var(--strek-fast);
  border-radius: var(--radius);
  font: 600 .86rem/1.2 var(--sans);
}
.laerer-fjern {
  padding: 0 .2rem; background: none; border: 0;
  font-size: 1.05rem; line-height: 1; color: var(--blekk-3); cursor: pointer;
}
.laerer-fjern:hover { color: var(--aksent); }

.laerer-velg {
  padding: .55rem .7rem;
  background: var(--papir-loft);
  border: 1px solid var(--strek-fast);
  border-radius: var(--radius);
  max-width: 100%;
}

/* --- lærerflatens perioderedigering ------------------------------------
   Bevisst kjedelig. Dette er arbeidsverktøyet til en lærer som skal endre
   en dato mellom to timer, ikke et sted for overraskelser. */

.laerer-liste { margin-bottom: 1.25rem; }

.laerer-periode-hode {
  display: flex; flex-wrap: wrap; gap: .2rem 1rem;
  align-items: baseline; justify-content: space-between;
}
.laerer-periode-dato {
  font: 500 .84rem/1.4 var(--sans);
  color: var(--blekk-3);
  font-variant-numeric: tabular-nums;
}

.laerer-apne {
  margin-top: .6rem; padding: 0;
  background: none; border: 0;
  font: 600 .88rem/1 var(--sans);
  color: var(--blekk-2);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.laerer-apne:hover { color: var(--blekk); }

.laerer-skjema {
  margin-top: 1rem;
  padding: 1.1rem;
  background: var(--papir-loft);
  border: 1px solid var(--strek);
  border-radius: var(--radius);
  display: grid; gap: 1rem;
}

.laerer-rutenett { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.laerer-rutenett--tre { grid-template-columns: repeat(3, 1fr); }

.laerer-felt { display: grid; gap: .3rem; }

/* Undervisningsnotatet. Merket under feltet er ikke pynt: det er grensen
   mellom et lovlig lærerverktøy og et vurderingsverktøy med
   personopplysninger, og den står der læreren skriver — ikke i en
   dokumentfil. Se app/kjerne/app.js for begrunnelsen. */
.laerer-notat-merk {
  font: 400 .78rem/1.45 var(--sans);
  color: var(--blekk-3);
  margin-top: .1rem;
}
.laerer-etikett {
  font: 600 .76rem/1.3 var(--sans);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--blekk-3);
}
.laerer-felt input,
.laerer-felt textarea {
  width: 100%;
  padding: .55rem .7rem;
  background: var(--papir);
  border: 1px solid var(--strek-fast);
  border-radius: var(--radius);
  font-size: .95rem;
  line-height: 1.5;
  resize: vertical;
}

.laerer-maal { margin: 0; padding: .9rem 1rem; border: 1px solid var(--strek); border-radius: var(--radius); }
.laerer-maal legend { padding: 0 .35rem; }
.laerer-avkryss {
  display: grid; grid-template-columns: auto 1fr; gap: .55rem;
  align-items: start;
  padding: .35rem 0;
  font-size: .93rem;
  line-height: 1.45;
  cursor: pointer;
}
.laerer-avkryss input { margin-top: .3rem; accent-color: var(--aksent); }

.laerer-les { display: grid; gap: .5rem; }
.laerer-brikke.er-borte { border-color: var(--aksent); color: var(--aksent-mork); }

.laerer-verktoy {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding-top: .9rem;
  border-top: 1px solid var(--strek);
}

.knapp--fare {
  color: var(--aksent-mork);
  border-color: color-mix(in srgb, var(--aksent) 35%, transparent);
}
.knapp--fare:hover {
  background: var(--aksent-vask);
  border-color: var(--aksent);
}

/* --- klassebokføringen --------------------------------------------------
   Lærerens egen oversikt. Ingen elevdata passerer her. */

.laerer-klasser { margin-bottom: 2.75rem; }
.laerer-klasser-om { max-width: var(--spalte); color: var(--blekk-2); font-size: .95rem; }

.laerer-klasseliste { display: grid; gap: .9rem; margin-bottom: 1rem; }

.laerer-klasse {
  padding: 1.1rem;
  border: 1px solid var(--strek);
  border-radius: var(--radius);
  background: var(--papir-loft);
}
.laerer-klasse-sist {
  margin: .3rem 0 0;
  font: 500 .88rem/1.4 var(--sans);
  color: var(--blekk-3);
}

.laerer-klasseinnhold { margin-top: 1rem; display: grid; gap: 1.25rem; }
.laerer-bolk-tittel {
  margin: 0 0 .4rem;
  font-size: .95rem; font-stretch: 100%;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--strek);
}
.laerer-avkryss--kapittel {
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: .6rem;
}
.laerer-kaptittel { font-size: .93rem; }
.laerer-dato {
  font: 500 .8rem/1.4 var(--sans);
  color: var(--blekk-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.laerer-nyklasse {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}
.laerer-nyklasse input {
  padding: .55rem .7rem;
  background: var(--papir-loft);
  border: 1px solid var(--strek-fast);
  border-radius: var(--radius);
  min-width: 12rem;
}

.laerer-sammenlikning { margin-top: .5rem; border: 0; padding: 0; }
.laerer-sammenlikning summary {
  font: 600 .93rem/1 var(--sans);
  color: var(--blekk-2);
  cursor: pointer;
  padding: .5rem 0;
}
/* Brede tabeller ruller i sin egen boks — sida skal aldri rulle sidelengs. */
.laerer-tabellboks { overflow-x: auto; margin-top: .5rem; }
.laerer-tabell {
  border-collapse: collapse;
  width: 100%;
  font-size: .88rem;
}
.laerer-tabell th,
.laerer-tabell td {
  text-align: left;
  padding: .45rem .7rem;
  border-bottom: 1px solid var(--strek);
  vertical-align: baseline;
}
.laerer-tabell thead th {
  font: 700 .78rem/1.3 var(--sans);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--blekk-3);
  border-bottom: 1px solid var(--strek-fast);
  position: sticky; top: 0;
  background: var(--papir);
}
.laerer-tabell-bolk th {
  font: 700 .8rem/1.3 var(--sans);
  padding-top: 1rem;
  color: var(--blekk);
  border-bottom-color: var(--strek-fast);
}
.laerer-tabell-navn { font-weight: 400; font-size: .88rem; }
.laerer-tabell td {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.laerer-tabell td.ikke-tatt { color: var(--blekk-3); }
.laerer-tabell td.er-tatt { color: var(--gronn); font-weight: 600; }

.laerer-filrad {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--strek);
}
/* Filvelgeren er stygg i alle nettlesere; knappen er etiketten. */
.laerer-fil { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
label.knapp { cursor: pointer; }

/* ============================================================
   Arbeidet som fil — elevens egen kopi ut og inn (kjerne/arkiv.js)
   ============================================================ */

.arkiv {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--strek);
}
.arkiv-tittel { margin: 0 0 .4rem; font: 700 1.05rem/1.3 var(--sans); }
.arkiv-inn {
  margin: 0 0 1.1rem;
  max-width: 42rem;
  font-size: .95rem;
  color: var(--blekk-2);
}
.arkiv-rad { display: flex; flex-wrap: wrap; gap: .6rem; }
/* Samme skjuling som lærerflatens filfelt: knappen ER etiketten. */
.arkiv-fil { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.arkiv-status {
  margin: .9rem 0 0;
  min-height: 1.3rem;
  font-size: .92rem;
  color: var(--blekk-2);
}
.arkiv-bekreft {
  margin-top: 1.25rem;
  padding: 1.1rem 1.2rem;
  background: var(--papir-senk);
  border: 1px solid var(--strek-fast);
  border-radius: var(--radius);
}
.arkiv-bekreft-tittel { margin: 0 0 .6rem; font: 700 1rem/1.3 var(--sans); }
.arkiv-bekreft-linje { margin: 0 0 .35rem; font-size: .93rem; color: var(--blekk-2); }
/* «Hent inn og erstatt» sletter alt eleven har på enheten. Den skal ikke
   se ut som «Last ned arbeidet», som ikke koster noe. */
.knapp--erstatt {
  border-color: var(--aksent-mork);
  color: var(--aksent-mork);
  font-weight: 700;
}
.knapp--erstatt:hover { background: var(--aksent-vask); border-color: var(--aksent-mork); }

.arkiv-bekreft-advarsel {
  margin: .9rem 0 1.1rem;
  padding: .9rem 1.1rem;
  background: var(--aksent-vask);
  border-radius: var(--radius);
  font-size: .92rem;
  color: var(--aksent-mork);
}

@media (max-width: 40rem) {
  .laerer-rutenett,
  .laerer-rutenett--tre { grid-template-columns: 1fr; }
}

/* ============================================================
   Figurer
   ============================================================ */

.blokk--figur { margin: 2.75rem 0; }

.figur {
  margin: 0;
  padding: 1.25rem;
  background: var(--papir-loft);
  border: 1px solid var(--strek);
  border-radius: var(--radius);
}

.figur-sporsmal {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.35;
  margin-bottom: 1.1rem;
}

.figur-svg {
  display: block; width: 100%; height: auto;
  touch-action: none;
  user-select: none;
}

.figur-bildetekst {
  margin: 1rem 0 0;
  font-size: .89rem;
  color: var(--blekk-3);
  line-height: 1.5;
}

.figur-mangler {
  margin: 0; padding: 1.1rem;
  border: 1px dashed var(--strek-fast);
  border-radius: var(--radius);
  font-size: .92rem;
  color: var(--blekk-3);
}
/* Stilgulv for figurenes avlesning.
   Hver figur har sine egne regler lenger nede, men de skrives etter hvert som
   figurene bygges. Uten et gulv ser en figur uten egne regler ut som et skjema
   fra 1998 — og en halvferdig figur leser eleven som at faget er halvferdig.
   Alle selektorene er pakket i :where() så spesifisiteten er .figur-avlesning
   ALENE (0,1,0). Uten den innpakningen er `.figur-avlesning p` (0,1,1), og
   da slår gulvet enhver ren klasseregel en figur setter — det motsatte av
   hensikten. Den fella kostet fire figurer en runde med opprydding. */
.figur-avlesning { margin-top: 1.1rem; }
.figur-avlesning :where(p) { margin: 0 0 .7rem; }
.figur-avlesning :where(p:last-child) { margin-bottom: 0; }
.figur-avlesning :where(label) {
  display: block;
  margin-bottom: .35rem;
  font: 600 .9rem/1.4 var(--sans);
}
.figur-avlesning :where(select) {
  padding: .5rem .65rem;
  background: var(--papir);
  border: 1px solid var(--strek-fast);
  border-radius: var(--radius);
  max-width: 100%;
}
.figur-avlesning :where(input[type="range"]) { width: 100%; accent-color: var(--aksent); }
.figur-avlesning :where(button) {
  padding: .7rem 1.2rem;
  background: var(--blekk);
  color: var(--papir-loft);
  border: 1px solid var(--blekk);
  border-radius: var(--radius);
  font: 700 .93rem/1 var(--sans);
  cursor: pointer;
}
.figur-avlesning :where(button):hover { background: #000; }
.figur-avlesning :where(dl) { margin: 0; }
.figur-avlesning :where(dt) { font: 700 .85rem/1.4 var(--sans); margin-top: .5rem; }
.figur-avlesning :where(dd) { margin: 0; color: var(--blekk-2); }
/* Stilgulv for SVG-innholdet i figurer.
   Skrevet med :where() så spesifisiteten er null — enhver klasseregel en figur
   selv definerer vinner over dette. Poenget er bare at en figur som ennå ikke
   har fått sine egne regler skal se ut som den hører til, i stedet for å
   rendre som svarte blokker på Times New Roman. */
:where(.figur-svg) :where(text) {
  font: 500 11px var(--sans);
  fill: var(--blekk-3);
}
:where(.figur-svg) :where(line) {
  stroke: var(--blekk-2);
}
/* NB: path, rect og circle er bevisst IKKE med her.
   En CSS-regel slår alltid en presentasjonsattributt i SVG, uansett hvor
   svak regelen er — også med :where(). Figurene setter fill som attributt
   (fill="var(--fig-a)"), så et gulv på path/rect ville slettet fargeflatene
   deres. Det gjorde det også, helt til energikurven ble tegnet i omriss.
   Gulvet gjelder derfor bare det som trygt kan generaliseres. */



/* --- tegninger: stille informasjonsgrafikk ------------------------------
   Ikke figurer — eleven drar ikke i disse. De erstatter prosa som beskriver
   noe romlig, og de er tegnet i riktig forhold, slik at eleven SER at en
   badmintonbane er smal og lang i stedet for å lese at den er det. */

.blokk--tegning { margin: 2.25rem 0; }
.tegning { margin: 0; }

/* Overskriften som innleder en tegning ligger inne i tegningsblokka, ikke i en
   egen brødtekstblokk foran — ellers strander den i hovedspalten mens
   tegningen skyves ned til første rad der margen også er ledig. Den leses på
   spaltebredde selv om tegningen er bredere. */
.tegning-overskrift {
  margin: 0 0 .85rem;
  max-width: var(--spalte);
  font-size: 1.3rem;
  font-stretch: 100%;
}
.tegning-svg { display: block; width: 100%; height: auto; }
.tegning-tekst {
  margin: .9rem 0 0;
  font-size: .89rem;
  line-height: 1.55;
  color: var(--blekk-3);
  max-width: var(--spalte);
}

.tg-baneflate { fill: none; stroke: var(--blekk-2); stroke-width: 1.6; }
.tg-sone { fill: var(--aksent); opacity: .1; }
.tg-linje { stroke: var(--strek-fast); stroke-width: 1.2; }
.tg-linje.er-sterk { stroke: var(--blekk); stroke-width: 2.4; }
.tg-linje.er-stiplet { stroke-dasharray: 4 4; }
.tg-merk { font: 500 10.5px var(--sans); fill: var(--blekk-3); }
.tg-peker { stroke: var(--strek-fast); stroke-width: 1; }
.tg-merk--svak { opacity: .75; }
.tg-maal {
  font: 700 11px var(--sans);
  fill: var(--blekk-2);
  font-variant-numeric: tabular-nums;
}

/* Sekvensen: bredden på hvert steg betyr noe — den viser andelen. */
.tg-steg { fill: var(--strek); }
.tg-steg--0 { fill: var(--fig-c); opacity: .75; }
.tg-steg--1 { fill: var(--fig-b); opacity: .8; }
.tg-steg--2 { fill: var(--fig-a); opacity: .75; }
.tg-stegnavn { font: 700 12px var(--sans); fill: var(--papir-loft); }

.tg-sonefelt { fill: var(--fig-c); }
.tg-sonefelt--0 { fill: var(--fig-c); opacity: .45; }
.tg-sonefelt--1 { fill: var(--fig-c); opacity: .7; }
.tg-sonefelt--2 { fill: var(--fig-b); opacity: .75; }
.tg-sonefelt--3 { fill: var(--fig-a); opacity: .65; }
.tg-sonefelt--4 { fill: var(--fig-a); opacity: .9; }

/* Tidslinja: samme termiske rampe som energikurve-figuren, slik at vinduet
   på oppslaget og feltet i figuren leses som samme farge = samme system. */
.tg-tidsfelt--a { fill: var(--fig-a); }
.tg-tidsfelt--b { fill: var(--fig-b); }
.tg-tidsfelt--c { fill: var(--fig-c); }
/* Etiketten står alltid i blekk — gult (--fig-b) er lesbart som FELT på
   papir, men ikke som TEKST. Fargen bærer systemet; blekket bærer ordene. */
.tg-tidsetikett { font: 700 12.5px var(--sans); fill: var(--blekk); }

/* --- energikurven ----------------------------------------------- */

.ek-flate { opacity: .9; }
.ek-rutelinje { stroke: rgba(252, 250, 246, .38); stroke-width: 1; }
.ek-aksetekst { font: 500 11px var(--sans); fill: var(--blekk-3); }
.ek-krysslinje { stroke: var(--blekk); stroke-width: 2; stroke-dasharray: 5 3; }
.ek-krysstekst { font: 700 12px var(--sans); fill: var(--blekk); }

/* Elevens eget anslag, tegnet inn ved siden av fasiten og stående der.
   Tynnere og lysere enn krysningen — fasiten er svaret, gjettet er sporet
   etter at hun turte å binde seg til et tall først. */
.ek-gjettlinje { stroke: var(--aksent); stroke-width: 1.5; stroke-dasharray: 2 4; }
.ek-gjetttekst { font: 600 11px var(--sans); fill: var(--aksent-mork); }

.ek-markorlinje { stroke: var(--blekk); stroke-width: 2; }
.ek-markorhode { fill: var(--blekk); }
.ek-treff { cursor: ew-resize; }
.ek-merke circle { fill: var(--strek-fast); transition: fill .15s var(--mykt); }
.ek-merke.naer circle { fill: var(--blekk); }

.ek-tid { margin: 1.1rem 0 .8rem; font-family: var(--sans); font-size: .93rem; color: var(--blekk-3); }
.ek-tid-tall {
  font-size: 1.7rem; font-weight: 800; color: var(--blekk);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  margin-right: .3rem;
}

.ek-stolpe {
  display: grid; grid-template-columns: 10.5rem minmax(0, 1fr) 3rem;
  gap: .7rem; align-items: center;
  margin-bottom: .35rem;
  font: 500 .92rem/1.3 var(--sans);
}
.ek-stolpe-spor { height: 9px; background: var(--papir-senk); border-radius: 99px; overflow: hidden; }
.ek-stolpe-fyll { display: block; height: 100%; border-radius: 99px; transition: width .09s linear; }
.ek-stolpe-tall { text-align: right; font-variant-numeric: tabular-nums; color: var(--blekk-2); }
.ek-stolpe.storst .ek-stolpe-navn,
.ek-stolpe.storst .ek-stolpe-tall { font-weight: 800; color: var(--blekk); }

.ek-aktivitet {
  margin: .9rem 0 0;
  font: 500 .9rem var(--sans);
  color: var(--blekk-3);
  opacity: 0; transition: opacity .18s var(--mykt);
}
.ek-aktivitet.vis { opacity: 1; }

.ek-gjett {
  margin-top: 1.2rem; padding: .75rem 1.3rem;
  background: var(--blekk); color: var(--papir-loft);
  border: 1px solid var(--blekk); border-radius: var(--radius);
  font: 700 .93rem/1 var(--sans); cursor: pointer;
}
.ek-gjett:hover { background: #000; }

.ek-svar { display: none; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--strek); }
.ek-svar.vis { display: block; }
.ek-kilde { font-size: .84rem; color: var(--blekk-3); margin-bottom: 0; }

/* Kildeforbeholdet, sammenleggbart (FIG.kilde i figurer/kjerne.js).
   Teksten er den samme som før — dommerpanelet krevde at figurene kan
   forsvare tallene sine på sida. Men den var 130–200 px, og på telefon
   skjøv den figuren over to skjermer. Åpen der det er plass, lukket bak
   «Om tallene» på smal skjerm; eleven ser at forbeholdet finnes uansett. */
.figur-kilde { margin-top: 1.1rem; }
.figur-kilde > summary {
  font: 600 .8rem/1.3 var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blekk-3);
  cursor: pointer;
  padding: .35rem 0;
  min-height: 24px;
}
.figur-kilde > summary:hover { color: var(--blekk-2); }
.figur-kilde > p {
  font-size: .84rem;
  color: var(--blekk-3);
  margin: .2rem 0 0;
}
/* `.2rem` er avstanden fra etiketten ned til FØRSTE avsnitt, og der er den
   riktig. Mellom to avsnitt er den feil: belastningsdosen legger tre
   forbehold i samme boks — modellen, tiprosentregelen, kildene — og med
   3 px mellom dem mot 22 px linjeavstand forsvant avsnittsskillet helt.
   De tre leste som én grå masse. Før boksen ble sammenleggbar sto de med
   11 px, og det er den avstanden som gjelder igjen her. `p + p` treffer
   bare forbehold med flere avsnitt, så figurene med ett avsnitt står urørt. */
.figur-kilde > p + p { margin-top: .7rem; }
/* Der den står åpen (brede skjermer) er etiketten mindre nødvendig — den
   dempes, men blir ikke borte: den er også håndtaket for å lukke igjen. */
@media (min-width: 40.0625rem) {
  .figur-kilde[open] > summary { opacity: .65; }
}

/* --- superkompensasjon ------------------------------------------ */

.sk-grunnlinje { stroke: var(--strek-fast); stroke-width: 1.5; }
.sk-rutelinje { stroke: var(--strek); stroke-width: 1; }
.sk-aksetekst { font: 500 11px var(--sans); fill: var(--blekk-3); }
.sk-kurve { fill: none; stroke: var(--aksent); stroke-width: 2.5; stroke-linejoin: round; }
.sk-omraade { fill: var(--aksent); opacity: .09; }
.sk-oektstrek { stroke: var(--blekk); stroke-width: 3; }
.sk-sluttprikk, .sk-slutttekst { display: none; }

.sk-kontroll { margin-top: 1.2rem; }
.sk-etikett { display: block; margin-bottom: .5rem; font: 700 .95rem/1 var(--sans); }
.sk-skyver { width: 100%; accent-color: var(--aksent); }
.sk-dom { margin: .9rem 0 0; max-width: 34rem; }
.sk-dom[data-dom="for-tett"], .sk-dom[data-dom="for-spredt"] { color: var(--aksent-mork); }

/* --- intensitetsfordeling ---------------------------------------- */

/* Fargen bærer grupperingen, og grupperingen følger tersklene: kald = rolig
   (I-1–I-2, under aerob terskel), gul = midtsjiktet (I-3, mellom tersklene),
   varm = hardt (I-4–I-5, over anaerob terskel). Der en gruppe har to soner er
   den nedre lys og den øvre mett, så metningen stiger med intensiteten hele
   veien. Eleven ser fem soner og tre grupper i samme stolpe. */

.if-uke + .if-uke { margin-top: 1rem; }
.if-uke-navn { margin: 0 0 .4rem; font: 700 .85rem/1.3 var(--sans); }
.if-referanse .if-uke-navn { color: var(--blekk-2); }

.if-bar {
  display: block; width: 100%; height: 30px;
  background: var(--papir-senk);
  border-radius: 2px;
}
.if-seg--i1, .if-seg--i2, .if-seg--rolig { fill: var(--fig-c); }
.if-seg--i3, .if-seg--midt               { fill: var(--fig-b); }
.if-seg--i4, .if-seg--i5, .if-seg--hardt { fill: var(--fig-a); }
.if-seg--i1, .if-seg--i4 { opacity: .5; }

.if-skille { stroke: var(--papir-loft); stroke-width: 2.5; }
.if-skille--svak { stroke-width: 1; opacity: .5; }

.if-grupper {
  display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
  margin-top: .5rem;
  font: 500 .82rem/1.4 var(--sans); color: var(--blekk-2);
}
.if-gruppe { display: inline-flex; align-items: center; gap: .3rem; }
.if-prikk { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.if-prikk--rolig { background: var(--fig-c); }
.if-prikk--midt  { background: var(--fig-b); }
.if-prikk--hardt { background: var(--fig-a); }
.if-gruppe-tall { font-weight: 800; color: var(--blekk); font-variant-numeric: tabular-nums; }

.if-soner { display: grid; row-gap: .55rem; margin-top: 1.3rem; }
.if-sone {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) 4.4rem;
  gap: .5rem; align-items: center;
}
.if-sone + .if-sone { border-top: 1px solid var(--strek); padding-top: .55rem; }
.if-sone-etikett { display: block; line-height: 1.2; }
.if-sone-kode { font: 800 .95rem var(--sans); margin-right: .35rem; }
.if-sone-navn { font: 500 .82rem var(--sans); color: var(--blekk-2); }
.if-sone-puls { display: block; font: 500 .72rem var(--sans); color: var(--blekk-3); }

/* Sporet er høyt nok for en tommel, banen er tynn nok for øyet. */
.if-spor {
  display: flex; align-items: center;
  height: 34px; padding: 0 9px;
  cursor: ew-resize;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.if-bane {
  position: relative; flex: 1; height: 14px;
  background: var(--papir-senk); border-radius: 99px;
}
.if-fyll { position: absolute; left: 0; top: 0; height: 100%; border-radius: 99px; }
.if-fyll--i1, .if-fyll--i2 { background: var(--fig-c); }
.if-fyll--i3               { background: var(--fig-b); }
.if-fyll--i4, .if-fyll--i5 { background: var(--fig-a); }
.if-fyll--i1, .if-fyll--i4 { opacity: .5; }
.if-hode {
  position: absolute; top: 50%; left: 0;
  width: 17px; height: 17px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--blekk);
  box-shadow: 0 0 0 2.5px var(--papir-loft);
}
/* FIG.draLangsX setter «drar» på elementet den MÅLER (banen), ikke på
   treffflaten. Derfor står klassen her, ikke på .if-spor. */
.if-bane.drar .if-hode { background: var(--aksent); }
.if-spor:hover .if-hode { box-shadow: 0 0 0 2.5px var(--papir-loft), 0 0 0 4px var(--strek-fast); }

.if-tall { text-align: right; line-height: 1.2; font-variant-numeric: tabular-nums; }
.if-tall-pst { display: block; font: 800 .95rem var(--sans); }
.if-tall-min { display: block; font: 500 .74rem var(--sans); color: var(--blekk-3); }

/* Stilgulvet i .figur-avlesning treffer p og button med klasse+type-selektor
   (0,1,1) og slår en naken .if-*-klasse (0,1,0). Uten .figur-avlesning foran
   mistet dommen og forbeholdet hele margin-top og lå klistret inntil sonelista
   — nettopp den setningen eleven skal lese. Samme felle som .bd-* måtte løses
   for lenger ned i arket. */
.figur-avlesning .if-dom { margin: 1.5rem 0 0; max-width: 34rem; }
.figur-avlesning .if-dom[data-dom="terskeltung"],
.figur-avlesning .if-dom[data-dom="for-hardt"] { color: var(--aksent-mork); }

/* Forbeholdet er nå FIG.kilde («Om tallene») og arver .figur-kilde. Den gamle
   .if-forbehold-regelen er derfor borte, ikke overstyrt. */

.figur-avlesning .if-gjett {
  margin-top: 1.2rem; padding: .75rem 1.3rem;
  background: var(--blekk); color: var(--papir-loft);
  border: 1px solid var(--blekk); border-radius: var(--radius);
  font: 700 .93rem/1 var(--sans); cursor: pointer;
}
.figur-avlesning .if-gjett:hover { background: #000; }

.if-svar { display: none; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--strek); }
.if-svar.vis { display: block; }

@media (max-width: 40rem) {
  /* Pulsbåndet blir stående også på telefon — uten det er «I-3» bare et
     symbol. Men det trenger ikke en egen linje: koden og pulsbåndet er
     LINJALEN og hører sammen, sonenavnet er hva det KJENNES som og får linja
     under. To linjer i stedet for tre.
     Etikettkolonnen er samtidig bred nok til at Olympiatoppens lengste
     sonenavn («Behagelig anstrengende») står på én linje. Da settes radhøyden
     av dragesporet (34 px), ikke av teksten — de fem radene koster 170 px i
     stedet for 322. Ordbryting står igjen som sikkerhetsnett: teksten brytes
     over linjer, aldri utover, så det ikke oppstår sidescroll.
     Kolonnen koster dragesporet: banen går fra 119 til 89 px. Byttet er verdt
     det — 30 px bane mot 71 px høyde — og 89 px er fortsatt en bane tommelen
     treffer, mens sonene i tillegg kan styres med piltastene. Tallkolonnen må
     bli stående på 3.2rem: «100 %» måler 46 px.

     `minmax` på de to første sporene, ikke faste 8.4rem: med fast etikett var
     dragesporet det ENESTE som kunne gi etter, og da forsvant det. Målt på
     390 px: 8.4rem fast ga 38 px bane ved 125 % tekststørrelse og 0 px ved
     150 % — altså ingen figur å dra i for en elev som har skrudd opp skrifta,
     og 35 px på en 320 px-telefon. Med gulvet under sporet (5rem ⇒ 64 px bane)
     gir etiketten seg i stedet og brekker over to linjer, slik den gjorde før.
     Ved standard skriftstørrelse på 390 px endrer dette ingenting: banen er
     fortsatt 105 px og figuren 689 px, med sonenavnet på én linje. */
  .if-sone {
    grid-template-columns: minmax(0, 8.4rem) minmax(5rem, 1fr) 3.2rem;
    column-gap: .3rem;
  }
  .if-sone-etikett {
    display: flex; flex-wrap: wrap; align-items: baseline;
    column-gap: .3rem; line-height: 1.2; overflow-wrap: break-word;
  }
  .if-sone-kode { display: inline; margin-right: 0; order: 1; }
  .if-sone-puls { display: inline; order: 2; font-size: .68rem; }
  .if-sone-navn { order: 3; flex: 0 0 100%; font-size: .72rem; }
  .if-spor { padding: 0 8px; }

  /* Skillelinja mellom radene blir stående — den er det som gjør lista
     leselig. Bare luften rundt den strammes, og like mye på hver side, så
     linja fortsatt ligger midt i mellomrommet. */
  .if-soner { row-gap: .35rem; margin-top: 1.1rem; }
  .if-sone + .if-sone { padding-top: .35rem; }

  /* Sonespennet er det eneste som tvinger nøkkelen over to linjer på 300 px
     innhold. Kodene står i sonelista rett under, i samme farge, så parentesen
     kan gå her — den forsvinner ikke fra boka, bare fra denne linja. */
  .if-gruppe-spenn { display: none; }
  .if-grupper { column-gap: .65rem; margin-top: .35rem; font-size: .8rem; }
  .if-uke-navn { margin-bottom: .3rem; }

  .figur-avlesning .if-dom { margin-top: .8rem; }
  .figur-avlesning .if-gjett { margin-top: .8rem; padding: .6rem 1.1rem; }
}

/* --- motivasjonshjulet ------------------------------------------ */

/* De tre behovene deler farge med vilje. --fig-a/b/c er en sekvensiell
   rampe som betyr hastighet andre steder i boka; her er behovene
   likeverdige, og tre farger ville antydet en rangering som ikke finnes.
   De skilles på plassering, ikke på kulør. */
.mh-referanse { fill: none; stroke: var(--strek-fast); stroke-width: 1; stroke-dasharray: 3 5; }
.mh-felt { fill: var(--aksent); opacity: .10; }
.mh-rim { fill: none; stroke: var(--aksent); stroke-width: 2.5; stroke-linejoin: round; }
.mh-eike { stroke: var(--strek-fast); stroke-width: 1.5; }
.mh-nav { fill: var(--blekk); }
.mh-svarring { fill: none; stroke: var(--blekk); stroke-width: 2; }

/* Skriftstørrelsene er i viewBox-enheter, ikke skjermpiksler — de krymper
   med figuren. På en telefon der SVG-en er rundt 320 px bred, blir 15
   enheter drøyt 10 px. Derfor er tallene større enn de ser ut her. */
.mh-navn { font: 500 15px var(--sans); fill: var(--blekk-3); }
.mh-verdi { font: 800 19px var(--sans); fill: var(--blekk); font-variant-numeric: tabular-nums; }
.mh-fotnote { font: 500 14px var(--sans); fill: var(--blekk-3); }

/* Knutene finnes ikke før eleven har forpliktet seg til et anslag — et
   håndtak som ser dragbart ut uten å være det, er en løgn i grensesnittet. */
.mh-knuter { display: none; }
.mh-knuter.vis { display: block; }
.mh-hode { fill: var(--papir-loft); stroke: var(--aksent); stroke-width: 2.5; }
.mh-hode--svakest { fill: var(--aksent); }
.mh-grep { fill: transparent; cursor: grab; }
.figur-svg.drar .mh-grep { cursor: grabbing; }
.mh-grep:focus-visible { outline: 2px solid var(--blekk); outline-offset: 2px; }
.mh-knute:focus-within .mh-hode { stroke: var(--blekk); stroke-width: 3.5; }

/* Situasjonsteksten er fasit-side, ikke spørsmål-side: den navngir hvilken av
   de fire situasjonene knappene står på. Før eleven har forpliktet seg finnes
   ikke knappene, og teksten gjentok bare spørsmålet om Marius ord for ord —
   109 px dobbel informasjon rett under det samme. Den kommer fram sammen med
   knappene, som resten av panelet. Teksten er uendret. */
.mh-situasjon {
  display: none;
  margin: 1.1rem 0 0; max-width: 34rem;
  font: 500 .95rem/1.5 var(--sans); color: var(--blekk-2);
}
.mh-situasjon.vis { display: block; }

/* Gjetteboksen fjernes i samme øyeblikk situasjonsteksten kommer fram, så dette
   toppmarget skiller den aldri fra annet enn hjulet over — og der har
   .figur-avlesning sitt eget margin allerede. Derfor smalt, ikke 1.2rem. */
.mh-gjett { margin-top: .3rem; }
.mh-gjett-etikett { display: block; margin-bottom: .5rem; font: 700 .95rem/1.4 var(--sans); }
.mh-skyver { width: 100%; accent-color: var(--aksent); }
.mh-knapp {
  margin-top: .9rem; padding: .75rem 1.3rem;
  background: var(--blekk); color: var(--papir-loft);
  border: 1px solid var(--blekk); border-radius: var(--radius);
  font: 700 .93rem/1 var(--sans); cursor: pointer;
}
.mh-knapp:hover { background: var(--aksent-mork); border-color: var(--aksent-mork); }

.mh-utfall { display: none; margin-top: 1.2rem; }
.mh-utfall.vis { display: block; }
.mh-tall-linje { margin: 0; font: 500 .93rem var(--sans); color: var(--blekk-3); }
.mh-tall-stort {
  font-size: 1.7rem; font-weight: 800; color: var(--blekk);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  margin-right: .3rem;
}
.mh-sum { margin: .3rem 0 0; font: 500 .9rem var(--sans); color: var(--blekk-3); }

.mh-dom { display: none; margin: 1.1rem 0 0; max-width: 34rem; }
.mh-dom.vis { display: block; }
.mh-dom[data-dom="brudd"], .mh-dom[data-dom="skjevt"],
.mh-dom[data-dom="lavt"] { color: var(--aksent-mork); }

.mh-svar { display: none; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--strek); }
.mh-svar.vis { display: block; }

/* Modellens forbehold hører sammen med svaret, ikke med spørsmålet. Selve
   utseendet ligger i .figur-kilde (sammenleggbar details) — dette styrer bare
   NÅR den finnes. `display: block` gjelder et details-element her. */
.mh-kilde { display: none; margin-top: 1.1rem; }
.mh-kilde.vis { display: block; }

.mh-valg { display: none; flex-wrap: wrap; gap: .45rem; margin-top: 1.1rem; }
.mh-valg.vis { display: flex; }
.mh-sit {
  padding: .45rem .8rem;
  background: var(--papir-senk);
  border: 1px solid var(--strek-fast); border-radius: var(--radius);
  font: 600 .88rem/1.2 var(--sans); color: var(--blekk-2); cursor: pointer;
}
.mh-sit:hover { border-color: var(--blekk-3); color: var(--blekk); }
.mh-sit[aria-pressed="true"] {
  background: var(--blekk); border-color: var(--blekk); color: var(--papir-loft);
}

/* På telefon er skalafaktoren minst, så enhetene må opp igjen. Grensen for
   hvor langt de kan gå er «Tilhørighet», den lengste etiketten til venstre. */
@media (max-width: 40rem) {
  .mh-navn { font-size: 17px; }
  .mh-verdi { font-size: 21px; }
  .mh-fotnote { font-size: 15px; }
}

/* --- belastningsdosen ------------------------------------------- */

/* To paneler over hverandre: uka dag for dag, og åtte uker. De skal leses
   som ett oppslag, derfor smal luft mellom dem og felles tittelform. */
.bd-panel + .bd-panel { margin-top: 1.5rem; }

.bd-paneltittel {
  margin: 0 0 .5rem;
  font: 700 .84rem/1.3 var(--sans);
}
.bd-panelnote {
  display: block;
  margin-top: .15rem;
  font-weight: 400;
  font-size: .82rem;
  color: var(--blekk-3);
}

/* Fargen på en økt sier hvor hardt, langs husets termiske rampe:
   kald = rolig, varm = hard. Samme skala som energisystemene. */
.bd-oekt { stroke: var(--papir-loft); stroke-width: 1; }
.bd-int-lav { fill: var(--fig-c); }
.bd-int-mid { fill: var(--fig-b); }
.bd-int-hoy { fill: var(--fig-a); }

.bd-grunnlinje { stroke: var(--strek-fast); stroke-width: 1.5; }
.bd-hardgrense { stroke: var(--strek-fast); stroke-width: 1; stroke-dasharray: 3 3; }
.bd-hardtekst { font: 500 10px var(--sans); fill: var(--blekk-3); }
.bd-dagtekst { font: 600 11px var(--sans); fill: var(--blekk-2); }
.bd-dagtekst.hvile { font-weight: 400; fill: var(--strek-fast); }

.bd-rutelinje { stroke: var(--strek); stroke-width: 1; }
.bd-aksetekst { font: 500 10px var(--sans); fill: var(--blekk-3); }
.bd-uketekst { font: 500 11px var(--sans); fill: var(--blekk-3); }
.bd-uketekst.na { font-weight: 800; fill: var(--blekk); }

.bd-stolpe-for { fill: var(--strek-fast); }
.bd-verditekst { font: 800 11px var(--sans); fill: var(--blekk); }
.bd-brudd { fill: none; stroke: var(--papir-loft); stroke-width: 2.5; }

/* Båndet er en tommelfingerregel, ikke en grense — derfor stiplet og svakt,
   ikke en rød strek som ser ut som en lov. */
.bd-band { fill: var(--blekk-3); opacity: .16; }
.bd-bandlinje { stroke: var(--blekk-3); stroke-width: 1; stroke-dasharray: 4 3; }
.bd-nivalinje { stroke: var(--blekk-2); stroke-width: 1.5; stroke-dasharray: 2 3; }

.bd-tegnforklaring {
  margin: .5rem 0 0;
  font: 400 .8rem/1.45 var(--sans);
  color: var(--blekk-3);
}

/* Stilgulvet i .figur-avlesning treffer label, p og button med type-selektor
   og slår derfor en ren klasse. Reglene som må over gulvet er prefikset;
   gulvet selv står urørt. */
.bd-kontroller { margin-top: 1.3rem; display: grid; gap: .85rem; }
.figur-avlesning .bd-etikett {
  display: flex; flex-wrap: wrap; gap: .15rem .6rem;
  align-items: baseline; justify-content: space-between;
  margin-bottom: .35rem;
}
.bd-etikett-navn { font: 700 .92rem/1.2 var(--sans); }
.bd-etikett-verdi {
  font: 600 .92rem/1.2 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--blekk-2);
}
/* `touch-action: none` hører til egne dra-flater, ikke til en native skyver.
   Tre skyvere i full bredde blir et bredt belte tvers over telefonskjermen, og
   med `none` gjør et loddrett sveip der ingenting — sida lar seg ikke rulle.
   `pan-y` gir rullingen tilbake og lar nettleseren styre skyveren selv. */
.bd-skyver { width: 100%; accent-color: var(--aksent); touch-action: pan-y; }

.bd-tall {
  display: grid; gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1.3rem;
  background: var(--strek);
  border: 1px solid var(--strek);
  border-radius: var(--radius);
  overflow: hidden;
}
.bd-rute { padding: .6rem .7rem; background: var(--papir); }
.bd-rute-verdi {
  display: block;
  font: 800 1.2rem/1.1 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
/* «UKEBELASTNING» er ett ord på 100 px og ruta er 99 på smal telefon — uten
   normal ombrekking deler body-regelen ordet midt i, og ett tegn alene på
   linje to ser ut som en feil, ikke som en etikett. */
.bd-rute-merke {
  display: block; margin-top: .25rem;
  font: 600 .69rem/1.25 var(--sans);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--blekk-3);
  overflow-wrap: normal;
}
.bd-rute[data-retning="hopp"] .bd-rute-verdi,
.bd-rute[data-retning="over"] .bd-rute-verdi { color: var(--aksent-mork); }

/* Med tre brytere må det stå svart på hvitt hva som nettopp skjedde —
   ellers vet ikke eleven hvilken knapp som ga utslaget. */
.figur-avlesning .bd-endring {
  display: none;
  margin: .9rem 0 0;
  padding-left: .7rem;
  border-left: 2px solid var(--strek-fast);
  font: 500 .88rem/1.5 var(--sans);
  color: var(--blekk-2);
  font-variant-numeric: tabular-nums;
}
.figur-avlesning .bd-endring.vis { display: block; }

.figur-avlesning .bd-dom { margin: .9rem 0 0; max-width: 34rem; }
.bd-dom[data-dom="hopp"] { color: var(--aksent-mork); }

.bd-merknader { margin: .6rem 0 0; padding-left: 1.1rem; max-width: 34rem; }
.bd-merknad { margin-bottom: .3rem; font-size: .93rem; color: var(--blekk-2); }

.bd-like { display: none; margin-top: 1.2rem; }
.bd-like.vis { display: block; }
.figur-avlesning .bd-like-tittel { margin: 0 0 .5rem; font: 700 .88rem/1.3 var(--sans); }
.bd-brikkerad { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Brikkene er alternativer, ikke handlingen. De skal se ut som noe man kan
   plukke opp — ikke som den svarte knappen som betyr «gjør dette nå». */
.figur-avlesning .bd-brikke {
  padding: .55rem .8rem;
  background: var(--papir);
  color: var(--blekk);
  border: 1px solid var(--strek-fast);
  border-radius: var(--radius);
  font: 600 .86rem/1.2 var(--sans);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color .14s var(--mykt), background .14s var(--mykt);
}
.figur-avlesning .bd-brikke:hover { border-color: var(--blekk-3); background: var(--papir-senk); }

.figur-avlesning .bd-gjett {
  margin-top: 1.2rem; padding: .75rem 1.3rem;
  background: var(--blekk); color: var(--papir-loft);
  border: 1px solid var(--blekk); border-radius: var(--radius);
  font: 700 .93rem/1 var(--sans); cursor: pointer;
}
.figur-avlesning .bd-gjett:hover { background: #000; }

.bd-svar { display: none; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--strek); }
.bd-svar.vis { display: block; }
/* Kildeforbeholdet har ingen egen bd-regel lenger: det er en `details.figur-kilde`
   (FIG.kilde), og felles­reglene lenger opp styrer den. */

/* Teksten i SVG-et krymper med figuren. På telefon må den opp igjen,
   og fire tallruter på rad blir til to.

   Lufta mellom blokkene strammes i samme slengen: oppslaget skal være ÉN
   skjermfull. Det er bare mellomrom som gir seg — ingen tekststørrelse er
   satt ned (12–13 px i SVG-et er gulvet i en lærebok), og hver blokk har
   fortsatt et tydelig skille til naboen. */
@media (max-width: 40rem) {
  .bd-hardtekst, .bd-aksetekst { font-size: 12px; }
  .bd-dagtekst, .bd-uketekst, .bd-verditekst { font-size: 13px; }
  .bd-tall { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .9rem; }
  .bd-rute { padding: .45rem .55rem; }
  .bd-rute-merke { font-size: .64rem; letter-spacing: .02em; }

  .bd-panel + .bd-panel { margin-top: 1rem; }
  .bd-kontroller { margin-top: .9rem; gap: .7rem; }
  .figur-avlesning .bd-etikett { margin-bottom: .25rem; }
  .figur-avlesning .bd-dom { margin-top: .7rem; }
  .figur-avlesning .bd-gjett { margin-top: .9rem; }
  .bd-like { margin-top: .9rem; }
  .bd-svar { margin-top: .9rem; padding-top: .9rem; }
}

/* --- muskelfibrene ----------------------------------------------- */

/* Mosaikken bruker husets termiske rampe bokstavelig: fig-c på de langsomme,
   fig-a på de raskeste. Fibre som ikke er rekruttert, males som papir og ikke
   som grått — de er der, de har bare ikke fått beskjed. */
.ft-omriss { fill: var(--papir); stroke: var(--strek-fast); stroke-width: 1.5; }
.ft-fiber { stroke: var(--strek-fast); stroke-width: 1; transition: fill .12s var(--mykt); }

.ft-spor-tomt { fill: var(--papir-senk); }
.ft-spor-fylt { fill: var(--blekk); }
.ft-baand-tom { opacity: .17; }
.ft-baandtekst { font: 600 11px var(--sans); fill: var(--blekk-3); }
.ft-aksetekst { font: 500 11px var(--sans); fill: var(--blekk-3); }

.ft-markorlinje { stroke: var(--blekk); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ft-tommel { fill: var(--blekk); stroke: var(--papir-loft); stroke-width: 2; }
.ft-treff { cursor: ew-resize; fill: transparent; }

.ft-kraft { margin: 1.1rem 0 .35rem; font-family: var(--sans); font-size: .93rem; color: var(--blekk-3); }
.ft-kraft-tall {
  font-size: 1.7rem; font-weight: 800; color: var(--blekk);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  margin-right: .3rem;
}
.ft-status { margin: 0 0 1rem; font: 500 .92rem/1.4 var(--sans); color: var(--blekk-2); }

/* Flatens generelle `.figur-avlesning button` maler alle knapper svarte. Brikkene
   er ikke handlingsknapper, de er valg — derfor to klasser i velgeren, som slår
   den generelle regelen. Ikke forenkle bort `.figur-avlesning`. */
.ft-brikker { display: flex; flex-wrap: wrap; gap: .4rem; }
.figur-avlesning .ft-brikke {
  padding: .45rem .75rem;
  background: var(--papir);
  border: 1px solid var(--strek-fast);
  border-radius: var(--radius);
  font: 600 .86rem/1.2 var(--sans);
  color: var(--blekk);
  cursor: pointer;
  transition: border-color .14s var(--mykt), background .14s var(--mykt);
}
.figur-avlesning .ft-brikke:hover { border-color: var(--blekk-3); }
.figur-avlesning .ft-brikke.er-valgt {
  border-color: var(--aksent);
  background: var(--aksent-vask);
  box-shadow: inset 0 0 0 1px var(--aksent);
}

.ft-merknad { display: none; margin: .9rem 0 0; max-width: 34rem; font-size: .95rem; color: var(--blekk-2); }
.ft-merknad.vis { display: block; }

.ft-stolper { margin-top: 1.1rem; }
.ft-stolpe {
  display: grid; grid-template-columns: 6rem minmax(0, 1fr) 3rem;
  gap: .7rem; align-items: center;
  margin-bottom: .35rem;
  font: 500 .92rem/1.3 var(--sans);
}
.ft-stolpe-spor { height: 9px; background: var(--papir-senk); border-radius: 99px; overflow: hidden; }
.ft-stolpe-fyll { display: block; height: 100%; border-radius: 99px; transition: width .09s linear; }
.ft-stolpe-tall { text-align: right; font-variant-numeric: tabular-nums; color: var(--blekk-2); }
.ft-stolpe.hviler .ft-stolpe-navn, .ft-stolpe.hviler .ft-stolpe-tall { color: var(--blekk-3); }

.figur-avlesning .ft-utmatt {
  margin-top: 1.2rem; padding: .7rem 1.15rem;
  background: transparent;
  border: 1px solid var(--strek-fast);
  border-radius: var(--radius);
  font: 700 .9rem/1 var(--sans);
  color: var(--blekk);
  cursor: pointer;
  transition: background .15s var(--mykt), border-color .15s var(--mykt);
}
.figur-avlesning .ft-utmatt:hover { border-color: var(--blekk-3); background: var(--papir-senk); }
.figur-avlesning .ft-utmatt[aria-pressed="true"] {
  background: var(--blekk); border-color: var(--blekk); color: var(--papir-loft);
}

.ft-dom { margin: .9rem 0 0; max-width: 34rem; }

.figur-avlesning .ft-gjett {
  margin-top: 1.2rem; padding: .75rem 1.3rem;
  background: var(--blekk); color: var(--papir-loft);
  border: 1px solid var(--blekk); border-radius: var(--radius);
  font: 700 .93rem/1 var(--sans); cursor: pointer;
}
.figur-avlesning .ft-gjett:hover { background: #000; }

.ft-svar { display: none; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--strek); }
.ft-svar.vis { display: block; }

/* Båndteksten under kraftsporet krymper med figuren. På telefon må den opp
   igjen, ellers er «Type IIa» uleselig. */
@media (max-width: 40rem) {
  .ft-baandtekst, .ft-aksetekst { font-size: 13px; }
  .ft-stolpe { grid-template-columns: 5rem minmax(0, 1fr) 2.8rem; font-size: .86rem; }
  .figur-avlesning .ft-brikke { font-size: .82rem; padding: .4rem .65rem; }
}

/* --- pulssonene -------------------------------------------------- */

/* Fem soner ut av husets tre figurfarger. Den termiske rampen kald → varm
   bærer intensitet, og mellomtrinnene blandes fram av naboene — ingen ny
   farge slippes inn i paletten bare for å få nok trinn. Én kilde til fargen,
   brukt både av flatene i SVG-et og av kulene i avlesningen. */
.ps-vert {
  --ps-i1: var(--fig-c);
  --ps-i2: color-mix(in srgb, var(--fig-c) 52%, var(--fig-b));
  --ps-i3: var(--fig-b);
  --ps-i4: color-mix(in srgb, var(--fig-b) 42%, var(--fig-a));
  --ps-i5: var(--fig-a);
}
.ps-i1 { --ps-farge: var(--ps-i1); }
.ps-i2 { --ps-farge: var(--ps-i2); }
.ps-i3 { --ps-farge: var(--ps-i3); }
.ps-i4 { --ps-farge: var(--ps-i4); }
.ps-i5 { --ps-farge: var(--ps-i5); }
.ps-utenfor { --ps-farge: var(--strek-fast); }

.ps-sone { fill: var(--ps-farge); opacity: .58; transition: opacity .12s var(--mykt); }
.ps-sone.aktiv { opacity: 1; }
.ps-under { fill: var(--papir-senk); }
.ps-spor { fill: none; stroke: var(--strek-fast); stroke-width: 1; stroke-dasharray: 3 4; }

/* Anslått makspuls skal se anslått ut — ellers ser et regnestykke like
   skarpt ut som en måling. */
.ps-band.er-anslag .ps-sone { opacity: .3; }
.ps-band.er-anslag .ps-sone.aktiv { opacity: .62; }
.ps-viss { stroke: var(--aksent); stroke-width: 1.5; }
.ps-visstekst { font: 700 10px var(--sans); fill: var(--aksent-mork); }

.ps-hvem { font: 700 12px var(--sans); fill: var(--blekk-2); }
.ps-sonenavn { font: 700 12px var(--sans); fill: var(--blekk-3); }
.ps-sonenavn.aktiv { fill: var(--blekk); }
.ps-makstikk { stroke: var(--blekk-2); stroke-width: 1.5; }
.ps-makstekst { font: 500 11px var(--sans); fill: var(--blekk-3); }
.ps-tikk { stroke: var(--strek-fast); stroke-width: 1; }
.ps-aksetekst { font: 500 11px var(--sans); fill: var(--blekk-3); }
.ps-markorlinje { stroke: var(--blekk); stroke-width: 2; }
.ps-markorhode { fill: var(--blekk); }
.ps-markortekst { font: 800 13px var(--sans); fill: var(--blekk); }
.ps-treff { cursor: ew-resize; }

.figur-avlesning .ps-puls { margin: 1.1rem 0 .5rem; font-family: var(--sans); font-size: .93rem; color: var(--blekk-3); }
.ps-puls-tall {
  font-size: 1.7rem; font-weight: 800; color: var(--blekk);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  margin-right: .3rem;
}

.ps-rad { padding: .75rem 0; border-top: 1px solid var(--strek); }
.figur-avlesning .ps-rad-hvem {
  margin: 0 0 .3rem;
  font: 700 .74rem/1 var(--sans);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--blekk-3);
}
.figur-avlesning .ps-rad-sone {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem;
  margin: 0 0 .2rem;
  font: 700 1rem/1.3 var(--sans);
}
.ps-merke { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; }
.ps-merke::before {
  content: ''; flex: none;
  width: .72rem; height: .72rem; border-radius: 2px;
  background: var(--ps-farge);
}
.ps-rad-tall { font-weight: 500; color: var(--blekk-3); font-variant-numeric: tabular-nums; }
.figur-avlesning .ps-rad-kjenn { margin: 0; font-size: .95rem; color: var(--blekk-2); }

.figur-avlesning .ps-forskjell { margin: .9rem 0 0; font: 700 1.02rem/1.4 var(--sans); }
.figur-avlesning .ps-bruk { margin: .7rem 0 0; font-size: .95rem; color: var(--blekk-2); }
.figur-avlesning .ps-noyt { margin: 1rem 0 .6rem; font-size: .9rem; color: var(--blekk-3); }

.ps-kontroller { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--strek); }
.ps-modus {
  display: inline-flex; margin-bottom: 1rem;
  border: 1px solid var(--strek-fast); border-radius: var(--radius);
  overflow: hidden;
}
/* Stilgulvet `.figur-avlesning button` maler ALLE knapper svarte, og en ren
   klasse taper mot det: uten prefikset her ble begge modusknappene svarte, og
   da kunne ikke eleven se hvilken av dem som var valgt. Samme grunn til at
   avsnittene og merkelappene i denne seksjonen er prefikset. Ikke forenkle
   bort `.figur-avlesning`. */
.figur-avlesning .ps-modusknapp {
  padding: .5rem .85rem;
  background: transparent; border: 0;
  font: 600 .88rem/1 var(--sans);
  color: var(--blekk-2); cursor: pointer;
  transition: background .14s var(--mykt), color .14s var(--mykt);
}
.figur-avlesning .ps-modusknapp:hover { background: var(--papir-senk); }
.figur-avlesning .ps-modusknapp + .ps-modusknapp { border-left: 1px solid var(--strek-fast); }
.figur-avlesning .ps-modusknapp.er-valgt { background: var(--blekk); color: var(--papir-loft); }

.ps-felt + .ps-felt { margin-top: .9rem; }
.figur-avlesning .ps-merkelapp { display: block; margin-bottom: .45rem; font: 700 .93rem/1.35 var(--sans); }
.ps-skyver { width: 100%; accent-color: var(--aksent); }

.figur-avlesning .ps-advarsel {
  margin: 1.1rem 0 0;
  padding: .9rem 1.1rem;
  background: var(--aksent-vask);
  border-radius: var(--radius);
  font-size: .93rem;
  color: var(--blekk-2);
}
.figur-avlesning .ps-advarsel strong { color: var(--aksent-mork); }

.ps-gjett {
  margin-top: 1.2rem; padding: .75rem 1.3rem;
  background: var(--blekk); color: var(--papir-loft);
  border: 1px solid var(--blekk); border-radius: var(--radius);
  font: 700 .93rem/1 var(--sans); cursor: pointer;
}
.ps-gjett:hover { background: #000; }

.ps-svar { display: none; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--strek); }
.ps-svar.vis { display: block; }

/* SVG-teksten krymper med figuren. På telefon må den opp igjen, og de to
   modusknappene får dele bredden i stedet for å klemme seg sammen.
   Mellomrommene strammes også: figuren skal være ÉN skjermfull på 390 px, og
   luften mellom blokkene er stemt for skrivebordet. Det som skiller blokkene
   fra hverandre — skillelinjene og deres padding-top — står igjen; det er bare
   overskuddet som tas. Fagteksten er urørt. */
@media (max-width: 40rem) {
  .ps-hvem, .ps-sonenavn { font-size: 13px; }
  .ps-makstekst, .ps-aksetekst { font-size: 12px; }
  .ps-markortekst { font-size: 14px; }
  .ps-modus { display: flex; width: 100%; margin-bottom: .75rem; }
  .figur-avlesning .ps-modusknapp { flex: 1; padding: .6rem .5rem; }
  .figur-avlesning .ps-forskjell { font-size: .98rem; }

  .figur-avlesning .ps-puls { margin: .8rem 0 .4rem; }
  .ps-rad { padding: .6rem 0; }
  .ps-kontroller { margin-top: 1.05rem; padding-top: .9rem; }
  .ps-gjett { margin-top: .9rem; }
  .ps-svar { margin-top: .9rem; padding-top: .9rem; }
  .figur-avlesning .ps-noyt { margin: .8rem 0 .5rem; }
  .figur-avlesning .ps-advarsel { margin-top: .9rem; padding: .8rem .9rem; }
}

/* --- natta (søvnsyklus) ------------------------------------------ */

/* SVG-gulvet `:where(.figur-svg) :where(rect, ...)` har null spesifisitet, men
   slår likevel presentasjonsattributter. Treffflatene må derfor gjøres
   gjennomsiktige i CSS — fill="transparent" i JS holder ikke. */
.sv-treff { fill: transparent; cursor: ew-resize; }

.sv-rutelinje { stroke: var(--strek); stroke-width: 1; }
.sv-rutelinje--svak { stroke: var(--strek); opacity: .45; }
.sv-aksetekst { font: 500 13px var(--sans); fill: var(--blekk-3); }
.sv-banenavn { font: 600 13px var(--sans); fill: var(--blekk-3); }
.sv-banenavn.sv-fri { fill: var(--aksent-mork); }

/* Før avsløringen er natta bare en blokk. Etterpå blir den en trapp. */
.sv-blokkflate { fill: var(--strek-fast); opacity: .5; }
.sv-blokktekst { font: 600 14px var(--sans); fill: var(--blekk-2); letter-spacing: .06em; }

.sv-kurve { fill: none; stroke: var(--blekk); stroke-width: 1.6; stroke-linejoin: round; opacity: .5; }
.sv-vente { stroke: var(--blekk-3); stroke-width: 2; stroke-dasharray: 2 3; }
.sv-stage { stroke: none; }
.sv-stage--dyp { fill: var(--fig-c); }
.sv-stage--rem { fill: var(--fig-a); }

/* Bolken vekkerklokka avbrøt. Stiplet, fordi den ikke skjedde. */
.sv-tapt { fill: none; stroke-width: 1.4; stroke-dasharray: 3 2.5; }
.sv-tapt--dyp { stroke: var(--fig-c); }
.sv-tapt--rem { stroke: var(--fig-a); }

.sv-seng { fill: var(--strek); }
.sv-sovn { fill: var(--fig-c); }
.sv-sovn--fri { fill: var(--fig-b); }
.sv-midtprikk { fill: var(--aksent); }
.sv-midtlinje { fill: none; stroke: var(--aksent); stroke-width: 1.4; stroke-dasharray: 4 3; }
.sv-vekker { stroke: var(--blekk); stroke-width: 1.5; stroke-dasharray: 5 3; opacity: .55; }

.sv-stang { stroke: var(--blekk); stroke-width: 1.5; opacity: .35; }
.sv-puck { pointer-events: none; }
.sv-puckboks { fill: var(--blekk); }
.sv-handtak--opp .sv-puckboks { fill: var(--papir-loft); stroke: var(--blekk); stroke-width: 1.5; }
.sv-pucktall { font: 700 15px var(--sans); fill: var(--papir-loft); }
.sv-handtak--opp .sv-pucktall { fill: var(--blekk); }
.sv-pucknavn { font: 500 11px var(--sans); fill: var(--blekk-3); }
.sv-treff:focus-visible ~ .sv-puck .sv-puckboks { stroke: var(--aksent); stroke-width: 2.5; }

/* Stilgulvet i .figur-avlesning treffer p og button med egne selektorer.
   Derfor er alle reglene under prefikset — uten prefiks blir hver knapp svart
   og hvert avsnitt får gulvets marger. Ikke forenkle bort `.figur-avlesning`. */
.figur-avlesning .sv-topp {
  margin: 1.1rem 0 .9rem;
  font-family: var(--sans); font-size: .93rem; color: var(--blekk-3);
}
.sv-tall {
  font-size: 1.7rem; font-weight: 800; color: var(--blekk);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  margin-right: .35rem;
}
.sv-bi { display: block; margin-top: .3rem; font-size: .87rem; }

.sv-fasit { display: none; }
.sv-fasit.vis { display: block; }

.sv-stolpe {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 5rem;
  gap: .7rem; align-items: center;
  margin-bottom: .4rem;
  font: 500 .92rem/1.3 var(--sans);
}
.sv-stolpe-spor { height: 9px; background: var(--papir-senk); border-radius: 99px; overflow: hidden; }
.sv-stolpe-fyll { display: block; height: 100%; border-radius: 99px; transition: width .09s linear; }
.sv-stolpe-tall { text-align: right; font-variant-numeric: tabular-nums; color: var(--blekk-2); }

/* Merket for «en full natt» — målestokken stolpene leses mot. */
.sv-stolpe-spor { position: relative; }
.sv-stolpe-merke {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  margin-left: -1px;
  background: var(--blekk); opacity: .5;
}

/* Mandagsnatta tegnet én gang til nederst, som referanse — dempet, så den
   ikke leses som en åttende natt i regnestykket. */
.sv-sovn--igjen { opacity: .4; }
.sv-banenavn.sv-igjen { opacity: .55; }

.figur-avlesning .sv-mot { margin: .9rem 0 0; font-size: .95rem; color: var(--blekk-2); }
.figur-avlesning .sv-dom { margin: .8rem 0 0; max-width: 34rem; }
.figur-avlesning .sv-dom[data-dom="kort"] { color: var(--aksent-mork); }

.sv-valg { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.sv-valg-navn { font: 600 .9rem/1 var(--sans); color: var(--blekk-3); margin-right: .2rem; }
.figur-avlesning .sv-valg-knapp {
  padding: .45rem .8rem;
  background: var(--papir-loft);
  border: 1px solid var(--strek-fast);
  border-radius: var(--radius);
  font: 600 .88rem/1 var(--sans);
  color: var(--blekk-2);
  cursor: pointer;
}
.figur-avlesning .sv-valg-knapp:hover { border-color: var(--blekk-3); background: var(--papir-senk); }
.figur-avlesning .sv-valg-knapp.er-valgt {
  background: var(--blekk); border-color: var(--blekk); color: var(--papir-loft);
}
.figur-avlesning .sv-valg-note {
  margin: .5rem 0 0; font-size: .84rem; color: var(--blekk-3); max-width: 34rem;
}

.sv-gjett { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--strek); }
.figur-avlesning .sv-gjett-tekst { margin-bottom: .8rem; font: 700 .98rem/1.4 var(--sans); }
.sv-gjett-rad { display: flex; flex-wrap: wrap; gap: .6rem; }
.figur-avlesning .sv-gjett-knapp {
  flex: 1 1 10rem;
  padding: .75rem 1rem;
  background: var(--blekk); color: var(--papir-loft);
  border: 1px solid var(--blekk); border-radius: var(--radius);
  font: 700 .93rem/1.2 var(--sans); cursor: pointer;
}

.sv-svar { display: none; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--strek); }
.sv-svar.vis { display: block; }

.figur-avlesning .sv-ukeknapp {
  display: none;
  margin-top: 1.1rem; padding: .7rem 1.2rem;
  background: var(--papir-loft);
  border: 1px solid var(--strek-fast); border-radius: var(--radius);
  font: 700 .92rem/1 var(--sans); color: var(--blekk);
  cursor: pointer;
}
.figur-avlesning .sv-ukeknapp.vis { display: inline-block; }
.figur-avlesning .sv-ukeknapp:hover { border-color: var(--blekk-3); background: var(--papir-senk); }

/* Kildenotisen ligger nå i FIG.kilde (sammenleggbar). At den holdes skjult til
   gjetningen er gjort — ellers navngir den REM og døgnrytmen rett under knappene
   eleven skal trykke på — styres av `hidden` i sovnsyklus.js. Ingen
   .sv-kilde-regel her lenger: et eget display-oppslag ville slåss med
   .figur-kilde om hvem som eier `display`. */

/* SVG-teksten skalerer med viewBox. På telefon må den løftes for å være
   lesbar — der leser de fleste elevene dette. */
@media (max-width: 40rem) {
  .sv-aksetekst, .sv-banenavn { font-size: 15px; }
  .sv-pucktall { font-size: 17px; }
  .sv-pucknavn { font-size: 13px; }
  .sv-stolpe { grid-template-columns: 5.5rem minmax(0, 1fr) 4.5rem; font-size: .86rem; }

  /* `flex: 1 1 10rem` ber om 160 px per knapp; to knapper + 9,6 px mellomrom
     blir 330, og innholdsbredden i figuren på en 390 px-telefon er 302. Knappene
     brøt derfor til to rader og kostet en hel knapperad i høyde. Med `1 1 0`
     deler de raden likt (~146 px hver), og begge etikettene får plass på én
     linje. Knappene er like store og like trykkbare som før. */
  .figur-avlesning .sv-gjett-knapp { flex: 1 1 0; min-width: 0; padding: .75rem .55rem; }

  /* Luft strammet der oppslaget er trangest. Skillet mellom blokkene bæres av
     border-top, ikke av marginen, så den kan kortes uten at blokkene flyter
     sammen. */
  .sv-gjett { margin-top: .9rem; padding-top: .8rem; }
  .sv-valg { margin-top: .8rem; }
  .figur-avlesning .sv-topp { margin-bottom: .6rem; }
  .figur-avlesning .sv-gjett-tekst { margin-bottom: .6rem; }
}

/* --- øktas anatomi ------------------------------------------------ */

/* Figuren bygger en egen, smalere viewBox under 40rem i stedet for å skalere
   ned én bred. Derfor trenger ikke SVG-teksten et eget mobiloppslag — 12
   enheter lander nær 12 piksler på begge geometrier. */

.os-rutelinje { stroke: var(--strek); stroke-width: 1; }
.os-aksetekst { font: 500 12px var(--sans); fill: var(--blekk-3); }
.os-enhet { font: 500 11px var(--sans); fill: var(--blekk-3); }

/* Stiplet = det kroppen blir bedt om. Heltrukket = det den rekker.
   Avstanden mellom dem er figurens viktigste bilde. */
.os-mal { fill: none; stroke: var(--strek-fast); stroke-width: 1.5; stroke-dasharray: 4 3; }
.os-puls {
  fill: none; stroke: var(--aksent); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round;
}

.os-del { stroke: var(--papir-loft); stroke-width: 1; }
.os-del--andre { opacity: .68; }      /* samme farge, andre halvdel av hoveddelen */
.os-deltekst { font: 600 12px var(--sans); fill: var(--blekk-2); }
.os-brakett { fill: none; stroke: var(--strek-fast); stroke-width: 1; }
.os-brakettekst { font: 700 12px var(--sans); fill: var(--blekk-2); }

.os-hankstrek { stroke: var(--blekk); stroke-width: 2; }
.os-hankgrep { fill: var(--blekk); }
.os-hank:focus-within .os-hankgrep { fill: var(--aksent); }
.os-hank:focus-within .os-hankstrek { stroke: var(--aksent); }
.os-treff { cursor: ew-resize; }

/* Forklaring til de to kurvene. Uten den er den stiplede linja bare støy.
   NB: denne ligger i .figur-scene, rett under SVG-en — ikke i
   .figur-avlesning. Med `.figur-avlesning` foran traff regelen ingenting, og
   forklaringa rendret som 17 px brødtekst over tre linjer. Naken klasse er
   trygt her: `:where(p)`-gulvet gjelder bare inne i avlesningen. */
.os-kurvenokkel {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .25rem 1.1rem; margin: .55rem 0 0;
  font: 500 .82rem/1.4 var(--sans); color: var(--blekk-3);
}
.os-kurvepar { display: inline-flex; align-items: center; white-space: nowrap; }
.os-strek {
  display: inline-block; width: 22px; height: 0;
  margin-right: .4rem; vertical-align: middle;
}
.os-strek--mal { border-top: 2px dashed var(--strek-fast); }
.os-strek--puls { border-top: 2.5px solid var(--aksent); }

.os-kontroller {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem; margin-top: 1.2rem;
}
.figur-avlesning .os-etikett {
  display: block; margin-bottom: .35rem;
  font: 700 .82rem/1.3 var(--sans); color: var(--blekk-2);
}
.os-velg {
  width: 100%; padding: .55rem .6rem;
  background: var(--papir-loft); color: var(--blekk);
  border: 1px solid var(--strek-fast); border-radius: var(--radius);
  font: 500 .92rem/1.2 var(--sans);
}

/* Tegnforklaringa ligger i HTML og ikke i SVG-en: her har navnene ekte
   punktstørrelse uansett hvor smal telefonen er. */
.os-nokkel {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .3rem .9rem;
  margin: 1.1rem 0 0; padding: 0; list-style: none;
}
.os-nokkelrad {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .5rem; align-items: baseline;
  font: 500 .88rem/1.4 var(--sans);
}
.os-prikk { width: 10px; height: 10px; border-radius: 2px; align-self: center; }
.os-prikk--andre { opacity: .68; }
.os-nokkeltid { font-variant-numeric: tabular-nums; color: var(--blekk-3); }

.os-dom { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--strek); }
.figur-avlesning .os-domstempel {
  margin: 0 0 .3rem;
  font: 600 .75rem/1.2 var(--sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--blekk-3);
}
.figur-avlesning .os-domtittel {
  margin: 0 0 .5rem;
  font: 800 1.2rem/1.15 var(--sans); letter-spacing: -.022em;
}
.figur-avlesning .os-domtekst { margin: 0; max-width: 34rem; }

.os-merknader { margin: 1.05rem 0 0; padding: 0; list-style: none; }
.os-merknad {
  margin: 0 0 .55rem; padding-left: .85rem;
  border-left: 2px solid var(--aksent);
  max-width: 34rem; font-size: .95rem; line-height: 1.5;
}
.os-merknad:last-child { margin-bottom: 0; }
.os-merknad--rolig { border-left-color: var(--strek-fast); color: var(--blekk-2); }

.os-tall { display: flex; flex-wrap: wrap; gap: .5rem 1.8rem; margin: 1.2rem 0 .9rem; }
.os-tallverdi {
  display: block;
  font: 800 1.05rem/1.25 var(--sans);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.os-talletikett { display: block; font: 500 .76rem/1.3 var(--sans); color: var(--blekk-3); }

/* Ett oppslag skal være én skjermfull. På 342 px innholdsbredde målte figuren
   1379 px — to skjermer. SVG-en var 222 px av dem; resten lå i
   avlesningspanelet, der hver blokk kollapset til én kolonne. Under her står
   bare oppsettet på nytt: ingen ord er tatt ut, ingen kontroll er skjult. */
@media (max-width: 40rem) {
  /* Én kolonne kostet 135 px for to nedtrekk. To kolonner holder — etikettene
     brekker over to linjer, og nedtrekkene beholder full høyde: det er dem
     eleven skal treffe med tommelen. */
  .os-kontroller {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem; margin-top: .9rem;
  }
  .figur-avlesning .os-etikett { font-size: .78rem; }

  /* Tegnforklaringa er en forklaring, ikke en tabell. Som flyt tar de fire
     delene to linjer i stedet for fire rader. Navnene står fortsatt — på smal
     geometri er søylen for trang til å romme dem, og da er det denne som
     bærer dem. `white-space: nowrap` holder navn og minutter sammen, så
     linjeskiftet aldri havner midt inni en del. */
  .os-nokkel {
    display: flex; flex-wrap: wrap;
    gap: .2rem .85rem; margin-top: .9rem;
  }
  .os-nokkelrad {
    display: inline-flex; gap: .35rem;
    white-space: nowrap; font-size: .84rem;
  }

  .os-kurvenokkel {
    gap: .15rem .8rem; margin-top: .45rem; font-size: .78rem;
  }

  /* Dommen og merknadene er figurens svar til eleven og står uendret. Det som
     strammes er lufta rundt dem — nok igjen til at blokkene fortsatt skiller
     seg fra hverandre. */
  .os-dom { margin-top: 1rem; padding-top: .85rem; }
  .figur-avlesning .os-domtittel { font-size: 1.1rem; }
  .os-merknader { margin-top: .8rem; }
  .os-merknad { margin-bottom: .45rem; }

  /* Tre tall på én rad i stedet for to ombrukne rader: etikettene brekker,
     tallene står like tydelig, og raden koster under halvparten. */
  .os-tall {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem .7rem; margin: .9rem 0 0;
  }
}

/* --- stresskurven ------------------------------------------------ */

.ss-rutelinje { stroke: var(--strek); stroke-width: 1; }
.ss-aksetekst { font: 500 11px var(--sans); fill: var(--blekk-3); }
.ss-baandtekst { text-anchor: start; }

/* Merkelappene inne i plottet ligger over kurven og søylene. En glorie i
   panelfargen holder dem lesbare uten å flytte dem ut i en marg figuren ikke
   har plass til. */
.ss-nulltekst, .ss-hardtekst, .ss-blokktekst, .ss-baandtekst, .ss-venter {
  paint-order: stroke fill;
  stroke: var(--papir-loft);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* Den harde treningsuka ligger fast. Den skal leses som en gitt størrelse,
   ikke som noe eleven har gjort galt — derfor blekk, ikke aksent. */
.ss-hardstrek { stroke: var(--strek-fast); stroke-width: 1.5; }
.ss-hardtekst { font: 600 10.5px var(--sans); fill: var(--blekk-3); letter-spacing: .03em; }

.ss-venter { font: 500 12px var(--sans); fill: var(--blekk-3); }
.stresskurve.avslort .ss-venter { display: none; }

.ss-nullinje { stroke: var(--strek-fast); stroke-width: 1.5; }
.ss-nulltekst { font: 600 10.5px var(--sans); fill: var(--blekk-3); letter-spacing: .03em; }

/* Grønt over, brent rødt under: fortegnet på en størrelse i modellen — ikke en
   karakter på eleven. Derfor vask, ikke full farge. */
.ss-over  { fill: var(--gronn);  stroke: none; opacity: .16; }
.ss-under { fill: var(--aksent); stroke: none; opacity: .13; }
.ss-kurve { fill: none; stroke: var(--blekk); stroke-width: 2.25; stroke-linejoin: round; }

/* Før avsløringen finnes overskuddet ikke ennå — bare belastningen. NB:
   `hidden` virker ikke på SVG-elementer, derfor display i CSS. */
.ss-kurve, .ss-over, .ss-under, .ss-nullinje, .ss-nulltekst { display: none; }
.stresskurve.avslort .ss-kurve,
.stresskurve.avslort .ss-over,
.stresskurve.avslort .ss-under,
.stresskurve.avslort .ss-nullinje,
.stresskurve.avslort .ss-nulltekst { display: inline; }

/* Fargene må stå her, ikke som fill-attributt i JS: presentasjonsattributter
   taper mot enhver regel i forfatterstilarket, også :where()-gulvet over med
   null spesifisitet. Figuren setter derfor selv all fill og stroke den trenger,
   i stedet for å stole på hvor bredt gulvet er formulert. */
.ss-flate { opacity: .92; stroke: none; }
.ss-flate.ss-tren  { fill: var(--fig-a); }
.ss-flate.ss-skole { fill: var(--fig-b); }
.ss-flate.ss-sovn  { fill: var(--fig-c); }
.ss-treff { fill: transparent; stroke: none; cursor: grab; }
.stresskurve.drar .ss-treff { cursor: grabbing; }

.ss-blokkflate { fill: var(--blekk); stroke: none; opacity: .055; }
.ss-blokkkant { stroke: var(--blekk); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ss-blokktekst { font: 700 11px var(--sans); fill: var(--blekk); letter-spacing: .02em; }

.figur-avlesning .ss-hvor { margin: 1.1rem 0 .9rem; font-family: var(--sans); font-size: .93rem; color: var(--blekk-3); }
.ss-hvor-tall {
  font-size: 1.35rem; font-weight: 800; color: var(--blekk);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  margin-right: .35rem;
}

.ss-stolpe {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 3rem;
  gap: .7rem; align-items: center;
  margin-bottom: .35rem;
  font: 500 .92rem/1.3 var(--sans);
}
.ss-stolpe-spor { height: 9px; background: var(--papir-senk); border-radius: 99px; overflow: hidden; }
.ss-stolpe-fyll { display: block; height: 100%; border-radius: 99px; transition: width .09s linear; }
.ss-stolpe-tall { text-align: right; font-variant-numeric: tabular-nums; color: var(--blekk-2); }
.ss-stolpe.tom { opacity: .45; }

.figur-avlesning .ss-dybde,
.figur-avlesning .ss-dom { display: none; }
.ss-avslort .ss-dybde, .ss-avslort .ss-dom { display: block; }
.figur-avlesning .ss-dybde {
  margin: 1rem 0 .5rem;
  font: 500 .95rem/1.4 var(--sans);
  color: var(--blekk-2);
  font-variant-numeric: tabular-nums;
}
.figur-avlesning .ss-dybde strong { color: var(--blekk); font-weight: 800; }
.figur-avlesning .ss-dom { margin: 0; max-width: 34rem; }
.figur-avlesning .ss-dom[data-dom="for-tung"] { color: var(--aksent-mork); }

/* Bryterne er det eleven faktisk rår over. De åpner først etter avsløringen —
   ellers skrur hun på noe hun ikke ser virkningen av. */
.ss-brytere { display: none; margin-top: 1.1rem; }
.ss-avslort .ss-brytere { display: grid; gap: .5rem; max-width: 34rem; }
.figur-avlesning .ss-bryter {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .7rem .85rem;
  background: var(--papir);
  border: 1px solid var(--strek-fast);
  border-radius: var(--radius);
  font: 500 .92rem/1.35 var(--sans);
  cursor: pointer;
  transition: border-color .14s var(--mykt);
}
.figur-avlesning .ss-bryter:hover { border-color: var(--blekk-3); }
.figur-avlesning .ss-bryter input {
  margin: .1rem .15rem 0 0;
  width: 1.05em; height: 1.05em;
  accent-color: var(--aksent); flex: none;
}

.ss-gjett {
  margin-top: 1.2rem; padding: .75rem 1.3rem;
  background: var(--blekk); color: var(--papir-loft);
  border: 1px solid var(--blekk); border-radius: var(--radius);
  font: 700 .93rem/1 var(--sans); cursor: pointer;
}

.ss-svar { display: none; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--strek); }
.ss-svar.vis { display: block; }

/* SVG-teksten skalerer med viewBox — på telefon må den løftes for å være
   lesbar. Der leser de fleste elevene dette. */
@media (max-width: 40rem) {
  .ss-aksetekst { font-size: 15px; }
  .ss-hardtekst, .ss-nulltekst { font-size: 14px; }
  .ss-blokktekst { font-size: 15px; }
  .ss-venter { font-size: 15px; }
  .ss-stolpe { grid-template-columns: 7.5rem minmax(0, 1fr) 2.8rem; font-size: .86rem; }
}

/* --- gruppefasene ------------------------------------------------ */

/* Båndfargen er FRIKSJON, ikke kvalitet: kald = det gnisser lite, varm = det
   gnisser mye. Derfor deler forming og performing hue og skilles bare på dybde.
   Det er ikke en snarvei i paletten — det er figurens tese: utenfra ser en
   gruppe som ikke har begynt, lik en gruppe som er ferdig. Forskjellen ligger
   i avlesningen, ikke i stemningen. */
.gf-band--forming    { fill: var(--fig-c); opacity: .13; }
.gf-band--storming   { fill: var(--fig-a); opacity: .16; }
.gf-band--norming    { fill: var(--fig-b); opacity: .20; }
.gf-band--performing { fill: var(--fig-c); opacity: .34; }

.gf-bandlinje { stroke: var(--papir-loft); stroke-width: 1.5; }
.gf-rutelinje { stroke: var(--strek); stroke-width: 1; }
.gf-aksetekst { font: 500 11px var(--sans); fill: var(--blekk-3); }
/* Litt smalstilt: «Performing» er det lengste ordet i figuren og setter grensa
   for hvor stort navnet kan bli i margen. Archivo har en ekte breddeakse, så
   dette er én tegning av fonten — ikke en strukket bokstav. */
.gf-fasenavn  { font: 700 12px var(--sans); font-stretch: 92%; fill: var(--blekk-2); }
.gf-faseom    { font: 500 10px var(--sans); fill: var(--blekk-3); }

.gf-bane { fill: none; stroke: var(--aksent); stroke-width: 2.5; stroke-linejoin: round; }
.gf-markorlinje { stroke: var(--blekk); stroke-width: 2; }
.gf-markorprikk { fill: var(--blekk); stroke: var(--papir-loft); stroke-width: 2; }
.gf-treff { cursor: ew-resize; }

/* Står øverst og alltid — uten den leses det varme storming-båndet som «fare»,
   og da har figuren lært bort det motsatte av det den skulle. */
.gf-note {
  margin: 1.1rem 0 0;
  font: 500 .84rem/1.5 var(--sans);
  color: var(--blekk-3);
  max-width: 34rem;
}

.gf-gjett { margin-top: 1.2rem; }
.gf-gjett-tekst { margin-bottom: .7rem; font: 700 .98rem/1.4 var(--sans); }
.gf-gjett-rad { display: flex; flex-wrap: wrap; gap: .6rem; }
.gf-gjett-knapp {
  flex: 1 1 8rem;
  padding: .75rem 1rem;
  background: var(--blekk); color: var(--papir-loft);
  border: 1px solid var(--blekk); border-radius: var(--radius);
  font: 700 .93rem/1.2 var(--sans); cursor: pointer;
}
.gf-gjett-knapp:hover {
  background: var(--aksent-mork); border-color: var(--aksent-mork); color: var(--papir-loft);
}

.gf-svar { display: none; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--strek); }
.gf-svar.vis { display: block; }

/* Alt som er avlesning finnes ikke før eleven har forpliktet seg — et tall som
   peker på en kurve hun ikke kan se, er støy. */
.gf-lesing, .gf-kilde { display: none; }
.gf-lesing.vis, .gf-kilde.vis { display: block; }

.gf-lesing { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--strek); }

.gf-uke { margin: 0 0 .8rem; font-family: var(--sans); font-size: .93rem; color: var(--blekk-3); }
.gf-uke-tall {
  font-size: 1.7rem; font-weight: 800; color: var(--blekk);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  margin-right: .3rem;
}
.gf-uke strong { color: var(--blekk); font-weight: 700; }

/* Stolpefargene er ikke pynt: hver av dem er fargen på båndet der den toppes.
   Ærligheten er varm som storming, det gruppa får til er rolig som performing. */
.gf-stolpe {
  display: grid; grid-template-columns: 13rem minmax(0, 1fr) 2.6rem;
  gap: .7rem; align-items: center;
  margin-bottom: .4rem;
  font: 500 .92rem/1.25 var(--sans);
}
.gf-stolpe-spor { height: 9px; background: var(--papir-senk); border-radius: 99px; overflow: hidden; }
.gf-stolpe-fyll { display: block; height: 100%; border-radius: 99px; transition: width .09s linear; }
.gf-stolpe-tall { text-align: right; font-variant-numeric: tabular-nums; color: var(--blekk-2); }

.gf-grep { margin-top: 1.3rem; }
.gf-grep-tittel { margin: 0 0 .55rem; font: 700 .93rem/1.3 var(--sans); }
.gf-grep-rad { display: flex; flex-wrap: wrap; gap: .45rem; }
/* Bare den valgte er fylt. Males alle fire svarte — slik stilgulvet for knapper
   ville gjort uten :where() rundt seg — ser hvert grep ut som det er valgt, og
   grensesnittet lyver om hva lederen faktisk gjør. */
.gf-grepknapp {
  padding: .5rem .85rem;
  background: var(--papir);
  border: 1px solid var(--strek-fast); border-radius: var(--radius);
  font: 600 .88rem/1.2 var(--sans); color: var(--blekk-2); cursor: pointer;
  transition: border-color .14s var(--mykt), background .14s var(--mykt), color .14s var(--mykt);
}
.gf-grepknapp:hover {
  background: var(--papir-senk); border-color: var(--blekk-3); color: var(--blekk);
}
.gf-grepknapp[aria-pressed="true"] {
  background: var(--blekk); border-color: var(--blekk); color: var(--papir-loft);
}

.gf-dom { margin: 1rem 0 0; max-width: 34rem; }
.gf-slutt {
  margin: .8rem 0 0;
  font: 700 .95rem/1.45 var(--sans);
  max-width: 34rem;
}

/* .ek-kilde nullstiller margin-bottom, så to kildeavsnitt ville rent sammen
   til én grå vegg. Her er de to ulike forbehold og skal leses som to. */
.gf-kilde { margin-top: 1.2rem; }
.gf-kilde p + p { margin-top: .7rem; }

/* SVG-teksten krymper med figuren, og fasenavnene står i venstremargen der det
   er trangest. På telefon må de opp igjen — ellers er «Performing» en grå flekk,
   og da er hele y-aksen borte. Grensa for hvor store de kan bli, er margen:
   «Performing» må få plass til venstre for plottet. */
@media (max-width: 40rem) {
  .gf-fasenavn { font-size: 17px; }
  .gf-faseom { font-size: 13px; }
  .gf-aksetekst { font-size: 14px; }
  .gf-stolpe { grid-template-columns: 8.5rem minmax(0, 1fr) 2.2rem; font-size: .84rem; }
  .gf-grepknapp { font-size: .84rem; padding: .45rem .7rem; }
}

/* --- rommet på banen ---------------------------------------------- */

/* Skyggen må være mørkere enn gresset i BEGGE moduser. --blekk snur i mørk
   modus og duger derfor ikke her: skyggen ville blitt lysere enn banen, og
   bildet ville stått på hodet. Derfor to egne tokens, og et lite mørkt oppslag
   i denne seksjonen i stedet for nederst — regelen kan ikke uttrykkes som en
   ren tokenbytte, og da hører unntaket hjemme sammen med det det gjelder. */
.sp-bane-svg {
  --sp-gress:  color-mix(in srgb, var(--blekk) 9%, var(--papir-senk));
  --sp-skygge: rgba(12, 14, 14, .40);
}

/* I mørk modus ligger gresset allerede nær svart, og da er det ikke plass til
   å gå mørkere: samme verdier ga 12 nivåers forskjell mellom lys og skygge
   mot 41 i lys modus — altså et bilde uten skygger. Gresset løftes derfor, og
   skyggen settes tettere, til forskjellen er den samme i begge moduser. */
:root[data-tema="mork"] .sp-bane-svg {
  --sp-gress:  color-mix(in srgb, var(--blekk) 26%, var(--papir-senk));
  --sp-skygge: rgba(0, 0, 0, .90);
}
:root[data-tema="mork"] .sp-nokkelprikk--skygge { background: #3D3B37; }

.sp-gress { fill: var(--sp-gress); }
.sp-rutelinje { stroke: var(--papir-loft); stroke-width: 1; opacity: .45; }
.sp-kant { fill: none; stroke: var(--strek-fast); stroke-width: 1.5; }
.sp-maalstrek { stroke: var(--blekk); stroke-width: 4; stroke-linecap: round; }
.sp-aksetekst { font: 500 14px var(--sans); fill: var(--blekk-3); }
.sp-skalastrek { stroke: var(--blekk-3); stroke-width: 1.5; }

/* Alle skyggeflatene i én gruppe med felles gjennomsiktighet, og full dekkevne
   på hver enkelt: to skygger som overlapper skal ikke bli mørkere enn én.
   Overlappet betyr «stengt av to», ikke «dobbelt så stengt». */
.sp-skygger { opacity: .5; }
.sp-skygge { fill: var(--sp-skygge); stroke: none; }

/* Lenka mellom en motstander og den hun følger er nesten usynlig i utgangs-
   stillingen, og det er meningen: der står de 2,2 m fra hverandre, og nærheten
   er cua. Den trer fram når eleven drar noen langt av gårde og forsvareren
   strekkes ut i enden av sona si — som er akkurat da eleven trenger å se den. */
.sp-lenke { stroke: var(--blekk-2); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .5; }

.sp-linje { stroke-linecap: round; }
.sp-linje--apen { stroke: var(--gronn); stroke-width: 3; }
.sp-linje--stengt { stroke: var(--blekk-3); stroke-width: 1.6; stroke-dasharray: 4 5; opacity: .8; }

/* Sporet etter løsningen. Aksentfarget og tynt: det er ikke en spiller, det er
   et merke etter en bevegelse — samme rolle som gjettelinja i energikurven. */
.sp-sporring { fill: none; stroke: var(--aksent); stroke-width: 1.5; stroke-dasharray: 3 3; }
.sp-sporlinje { stroke: var(--aksent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.sp-sportekst {
  font: 700 15px var(--sans); fill: var(--aksent-mork);
  paint-order: stroke fill;
  stroke: var(--sp-gress); stroke-width: 3px; stroke-linejoin: round;
}

.sp-rute { fill: var(--blekk-2); }
.sp-brikke { fill: var(--fig-c); }
.sp-spiller--ball .sp-brikke { fill: var(--aksent); }
/* Navnene er det eneste som binder brikkene på banen til lista under, og de
   ligger på en bakgrunn som skifter mellom lys og skygge mens eleven drar.
   Derfor en kant i gressets farge under teksten: uten den forsvinner «Ida» i
   det øyeblikket en skygge sveiper over henne. */
.sp-navn {
  font: 700 16px var(--sans); fill: var(--blekk);
  paint-order: stroke fill;
  stroke: var(--sp-gress); stroke-width: 3px; stroke-linejoin: round;
}

/* Treffflaten må gjøres gjennomsiktig i CSS — SVG-gulvet i denne fila slår
   presentasjonsattributter, så fill="transparent" i JS holder ikke. 2,4 m blir
   rundt 26 piksler i radius på en telefon: godt over tommelmålet. */
.sp-treff { fill: transparent; }
.sp-spiller[data-drabar="ja"] .sp-treff { cursor: grab; }
.figur-svg.drar .sp-treff { cursor: grabbing; }

/* Den stiplede ringen er hele affordansen på berøring, der det ikke finnes
   noen musepeker å endre. Uten den vet ikke eleven hvem hun får ta i. */
.sp-grep { fill: none; stroke: var(--blekk-3); stroke-width: 1.4; stroke-dasharray: 3 4; opacity: 0; }
.sp-spiller[data-drabar="ja"] .sp-grep { opacity: .75; }

.sp-fokusring { fill: none; stroke: var(--aksent); stroke-width: 2.5; opacity: 0; }
.sp-spiller { outline: none; }
.sp-spiller:focus .sp-fokusring { opacity: 1; }
.sp-spiller.er-pekt .sp-brikke { stroke: var(--aksent); stroke-width: 2.5; }

.sp-oppdrag { font: 700 1rem/1.45 var(--sans); max-width: 34rem; }

.sp-status { margin: 1.1rem 0 0; padding: 0; list-style: none; }
.sp-status-rad {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .55rem; align-items: baseline;
  padding: .35rem 0;
  font: 500 .93rem/1.4 var(--sans);
  border-top: 1px solid var(--strek);
}
.sp-status-rad .sp-prikk {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--fig-c); align-self: center;
}
.sp-status-dom { text-align: right; color: var(--blekk-3); }
.sp-status-rad.er-apen .sp-status-navn { font-weight: 800; }
.sp-status-rad.er-apen .sp-status-dom { color: var(--gronn); font-weight: 700; }

/* Kort, uthevet regel rett under lista: modellen sagt med ord en trener
   bruker, så figuren kan leses på ti sekunder uten å dra i noe. */
.figur-avlesning .sp-regel {
  margin: .9rem 0 0; padding-left: .85rem;
  border-left: 2px solid var(--aksent);
  max-width: 34rem; font-size: .95rem; line-height: 1.5;
}

.figur-avlesning .sp-rom {
  margin: 1rem 0 0;
  font: 500 .92rem/1.4 var(--sans); color: var(--blekk-3);
}
.sp-rom strong { font-variant-numeric: tabular-nums; color: var(--blekk); }

.sp-svar { display: none; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--strek); }
.sp-svar.vis { display: block; }

.figur-avlesning .sp-nullstill {
  margin-top: 1.1rem; padding: .55rem .95rem;
  background: transparent; color: var(--blekk-2);
  border: 1px solid var(--strek-fast);
  font: 600 .88rem/1 var(--sans);
}
.figur-avlesning .sp-nullstill:hover { background: var(--papir-senk); color: var(--blekk); }

.sp-nokkel {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem .9rem;
  margin: 1.3rem 0 0; padding: 0; list-style: none;
}
.sp-nokkelrad {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: .5rem; align-items: baseline;
  font: 500 .85rem/1.4 var(--sans); color: var(--blekk-2);
}
.sp-nokkelprikk { width: 11px; height: 11px; border-radius: 50%; align-self: center; }
.sp-nokkelprikk--ball { background: var(--aksent); }
.sp-nokkelprikk--lag { background: var(--fig-c); }
.sp-nokkelprikk--mot { background: var(--blekk-2); border-radius: 3px; }
.sp-nokkelprikk--skygge { background: rgba(12, 14, 14, .40); border-radius: 2px; }

/* .sp-kilde er borte: forbeholdet er samme tekst, men pakket i FIG.kilde og
   arver .figur-kilde. Regelen sto igjen og traff ingenting. */

/* SVG-teksten krymper med figuren. Navnene under brikkene er det eneste som
   binder banen til avlesningen, så de må opp igjen på telefon — ellers er
   «Sara» en grå flekk og hele oppdraget blir uleselig.

   Statuslista blir stående i to linjer per rad, og det er et valg: dommen er en
   hel setning («stengt av forsvareren som følger Jonas»). Satt på samme linje
   som navnet må én av dem vike, og målt gjorde navnet det — navnespalta
   kollapset til 37 px mens dommen tok 235. Dommen skifter hver gang eleven drar
   en brikke, så spaltene ville hoppet under fingeren hennes. De 8 px det sparte
   er ikke verdt en liste som flytter seg mens hun jobber. */
@media (max-width: 40rem) {
  .sp-navn { font-size: 22px; }
  .sp-aksetekst { font-size: 19px; }
  .sp-sportekst { font-size: 21px; }
  /* Dommen faller ned på egen linje. Da er avstanden mellom navn og dom en
     LINJEavstand inne i samme rad, ikke et skille mellom to rader — og .55rem
     der leste som om dommen tilhørte raden under. Kolonneavstanden står. */
  .sp-status-rad {
    grid-template-columns: auto minmax(0, 1fr);
    font-size: .88rem;
    padding: .3rem 0;
    row-gap: .1rem;
  }
  .sp-status-dom { grid-column: 2; text-align: left; }

  /* Nøkkelen beholder to spalter der innholdet tåler det. De to korte
     fargeforklaringene deler rad; de to som er hele setninger tar full bredde
     — presset ned i 160 px ble de tre linjer hver, og nøkkelen ble høyere av
     å bli smalere. */
  .sp-nokkel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem .7rem; margin-top: .9rem; }
  .sp-nokkelrad--bred { grid-column: 1 / -1; }

  /* Luft strammes der den bare er luft. Blokkene skiller seg fortsatt fra
     hverandre — statuslista har sine egne skillelinjer, regelen sin
     venstrekant, og svaret sin topplinje. */
  .sp-status { margin-top: .8rem; }
  .figur-avlesning .sp-regel { margin-top: .8rem; }
  .figur-avlesning .sp-rom { margin-top: .7rem; }
}

/* ============================================================
   Treningsperiodene

   Elevens eget arbeid. Skrivefeltene har harde tak, og telleren
   teller NEDOVER — den skal lese som en ramme, ikke som en kvote
   å fylle. Det er hele grepet mot vegger av generert tekst.
   ============================================================ */

.perioder { max-width: var(--spalte); margin: 0 auto; }

.per-blokkort {
  display: grid; gap: .2rem;
  padding: 1.2rem 1.3rem;
  margin-bottom: .8rem;
  background: var(--papir-loft);
  border: 1px solid var(--strek-fast);
  border-left: 3px solid var(--aksent);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background .14s var(--mykt);
}
.per-blokkort:hover { background: var(--aksent-vask); }
.per-blokk-merke {
  font: 700 .74rem/1.3 var(--sans);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--blekk-3);
}
.per-blokk-tittel { font: 800 1.2rem/1.2 var(--sans); }
.per-blokk-om { font-size: .95rem; color: var(--blekk-2); }
.per-blokk-maal {
  margin-top: .4rem;
  font-style: italic;
  font-size: .92rem;
  color: var(--blekk-3);
}

/* Rammen som sier at fire uker ikke endrer formen din. */
.per-ramme {
  margin-bottom: 2.5rem;
  padding: 1.1rem 1.3rem;
  background: var(--papir-senk);
  border-left: 2px solid var(--strek-fast);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.per-ramme p { margin: 0; font-size: .97rem; color: var(--blekk-2); }

.per-del {
  margin-bottom: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--strek);
}
.per-deltittel { font-size: 1.45rem; font-stretch: 100%; margin-bottom: .6rem; }
.per-om { font-size: .97rem; color: var(--blekk-2); margin-bottom: 1.5rem; }

.per-felt { margin-bottom: 1.5rem; }
.per-etikett {
  display: block; margin-bottom: .3rem;
  font: 700 1rem/1.35 var(--sans);
}
.per-hjelp {
  margin: 0 0 .5rem;
  font-size: .9rem;
  color: var(--blekk-3);
  line-height: 1.5;
}
.per-skriv {
  width: 100%;
  padding: .75rem .9rem;
  background: var(--papir-loft);
  border: 1px solid var(--strek-fast);
  border-radius: var(--radius);
  line-height: 1.6;
  resize: vertical;
}
.per-teller {
  margin: .3rem 0 0;
  font: 500 .8rem/1 var(--sans);
  color: var(--blekk-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.per-teller.er-naer { color: var(--aksent-mork); }

.per-okt, .per-loggkort {
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
  background: var(--papir-loft);
  border: 1px solid var(--strek);
  border-radius: var(--radius);
}
.per-okt-hode {
  display: flex; align-items: baseline; gap: .8rem;
  margin-bottom: .9rem;
}
.per-okt-uke {
  font: 700 .78rem/1.3 var(--sans);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--blekk-3);
  margin: 0 0 .9rem;
}
.per-okt-hode .per-okt-uke { margin: 0; }
.per-okt-type {
  padding: .2rem .5rem;
  border: 1px solid var(--strek-fast);
  border-radius: var(--radius);
  font: 600 .8rem/1.3 var(--sans);
}
.per-okt-velg {
  padding: .3rem .5rem;
  background: var(--papir);
  border: 1px solid var(--strek-fast);
  border-radius: var(--radius);
  font: 600 .85rem/1.3 var(--sans);
}

/* Det eleven skrev sist, hentet fram uendret. */
.per-tilbakeblikk {
  margin-bottom: 1.75rem;
  padding: 1.1rem 1.3rem;
  background: var(--papir-senk);
  border-radius: var(--radius);
}
.per-tilbakeblikk-merke {
  margin: 0 0 .3rem;
  font: 700 .74rem/1.3 var(--sans);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--blekk-3);
}
.per-sitat {
  margin: 0 0 1rem;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
}
.per-sitat:last-child { margin-bottom: 0; }

.per-lesing {
  margin-top: -.5rem; margin-bottom: 1.5rem;
  padding: 1rem 1.2rem;
  border: 1px dashed var(--strek-fast);
  border-radius: var(--radius);
}
.per-lesing:empty { display: none; }
.per-lesing-merke {
  margin: 0 0 .5rem;
  font: 700 .74rem/1.3 var(--sans);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--blekk-3);
}
.per-lesing-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.per-lesing-lenke {
  font: 600 .97rem/1.4 var(--sans);
  text-decoration: underline; text-underline-offset: 3px;
}
.per-lesing-om { margin: .6rem 0 0; font-size: .85rem; color: var(--blekk-3); }

/* Dosen — skyvere, ikke tallruter. Eleven skal kjenne at hun skrur på noe. */
.per-dose {
  display: grid; gap: .9rem;
  margin-top: .25rem; padding-top: 1rem;
  border-top: 1px solid var(--strek);
}
.per-skyver-etikett {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: .35rem;
  font: 600 .9rem/1.4 var(--sans);
}
.per-skyver-verdi {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.per-skyver input[type="range"] { width: 100%; accent-color: var(--aksent); }

/* Speilet: elevens egne uker, tegnet av hennes egne tall. */
.per-speilvert { margin-top: 1.5rem; }
.per-speil {
  padding: 1.2rem;
  background: var(--papir-loft);
  border: 1px solid var(--strek);
  border-radius: var(--radius);
}
.per-speil-merke {
  margin: 0 0 .9rem;
  font: 700 .74rem/1.3 var(--sans);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--blekk-3);
}
.per-speil-svg { width: 100%; height: auto; display: block; }
.per-speil-stolpe { fill: var(--aksent); opacity: .85; }
.per-speil-tekst { font: 500 11px var(--sans); fill: var(--blekk-3); }
.per-speil-dom {
  margin: 1rem 0 .6rem;
  font: 600 1rem/1.5 var(--sans);
}
.per-speil-om { margin: 0; font-size: .85rem; color: var(--blekk-3); line-height: 1.55; }

/* Kroppsspørsmålet: fire trinn med ord, ikke tall. Et tall leser som en
   karakter; «ganske sliten» gjør ikke det. */
.per-valgrad { margin: 0 0 1.5rem; padding: 0; border: 0; }
.per-valgrad legend { padding: 0; }
.per-valgrad-knapper { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.per-valg {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .8rem;
  background: var(--papir);
  border: 1px solid var(--strek-fast);
  border-radius: var(--radius);
  font: 500 .9rem/1.3 var(--sans);
  cursor: pointer;
  transition: border-color .14s var(--mykt), background .14s var(--mykt);
}
.per-valg:hover { border-color: var(--blekk-3); }
.per-valg input { accent-color: var(--aksent); }
.per-valg:has(input:checked) {
  border-color: var(--aksent);
  background: var(--aksent-vask);
  font-weight: 700;
}

/* Kurven: hva hun gjorde, og hva hun rapporterte. Aldri hvor god hun er. */
.per-kurvevert:empty { display: none; }
.per-kurve {
  margin-top: 1.5rem;
  padding: 1.2rem;
  background: var(--papir-loft);
  border: 1px solid var(--strek);
  border-radius: var(--radius);
}
.per-kurve-svg { width: 100%; height: auto; display: block; }
.per-kurve-last { fill: var(--strek-fast); }
.per-kurve-linje { fill: none; stroke: var(--aksent); stroke-width: 2.5; stroke-linejoin: round; }
.per-kurve-prikk { fill: var(--aksent); }
.per-kurve-akse { font: 500 11px var(--sans); fill: var(--blekk-3); }
.per-kurve-lesning {
  margin: 1rem 0 .6rem;
  font: 600 1rem/1.5 var(--sans);
}

/* Forrige blokks logg, tilgjengelig mens hun skriver konklusjonen. */
.per-arkiv {
  margin: 0 0 1.75rem;
  border: 1px solid var(--strek);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
}
.per-arkiv summary {
  font: 600 .93rem/1 var(--sans);
  color: var(--blekk-2);
  cursor: pointer;
}
.per-arkiv-rad {
  margin-top: 1rem; padding-top: .8rem;
  border-top: 1px solid var(--strek);
}
.per-arkiv-uke {
  margin: 0 0 .3rem;
  font: 700 .76rem/1.3 var(--sans);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--blekk-3);
}
.per-arkiv-linje { margin: 0 0 .25rem; font-size: .92rem; line-height: 1.5; }
.per-arkiv-merke { font-weight: 700; font-family: var(--sans); font-size: .85rem; }

.per-levering { border-top-width: 2px; border-top-color: var(--strek-fast); }
.per-forhaand {
  max-height: 22rem; overflow: auto;
  padding: 1.1rem;
  background: var(--papir-loft);
  border: 1px solid var(--strek);
  border-radius: var(--radius);
  font: 400 .85rem/1.6 ui-monospace, "SF Mono", Menlo, monospace;
  white-space: pre-wrap;
}
.per-knapperad { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.per-advarsel {
  margin: 1.25rem 0 0;
  padding: .9rem 1.1rem;
  background: var(--aksent-vask);
  border-radius: var(--radius);
  font-size: .92rem;
  color: var(--aksent-mork);
}

/* ============================================================
   Varsel — systemstatus, aldri feiring
   ============================================================ */

.varsel {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 120;
  transform: translate(-50%, .6rem);
  max-width: min(26rem, calc(100% - 2rem));
  padding: .7rem 1.1rem;
  background: var(--blekk); color: var(--papir-loft);
  border-radius: var(--radius);
  font: 500 .92rem/1.4 var(--sans);
  opacity: 0; pointer-events: none;
  transition: opacity .18s var(--mykt), transform .18s var(--mykt);
}
.varsel.vis { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 40rem) {
  .varsel { bottom: 5rem; }
  .ek-stolpe { grid-template-columns: 8.5rem minmax(0, 1fr) 2.8rem; font-size: .86rem; }
  .fagvalg-rad { grid-template-columns: 1fr; }
  .kapittel-bunn { flex-direction: column-reverse; align-items: stretch; }
  .knapp--videre { align-items: center; }
}

/* Ingenting beveger seg av seg selv. Når eleven ber om ro, blir det ro. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Mørk modus

   En 17-åring leser dette i senga klokka elleve. Papirhvitt i
   fullskjerm på en telefon da er ikke omtanke — det er noe vi
   glemte. Derfor starter boka på systeminnstillingen — og lar
   eleven overstyre den, fordi systemet ikke vet om hun sitter i
   senga eller i et lyst klasserom. Valget ligger på hennes egen
   enhet, som alt annet.

   Attributtet `data-tema` settes av et lite skript i `<head>`
   FØR første maling, slik at ingen ser en hvit blits på vei inn
   i mørket. Uten valg speiler det systemet.

   Bare tokenene byttes. Ingen regel under dette punktet vet at
   den finnes i to utgaver, og det er hele poenget med å ha
   tokenene: uttrykket snur, grammatikken står.

   Papiret blir varm kull, ikke blått mørke — samme temperatur
   som papiret, motsatt vei.
   ============================================================ */

:root[data-tema="mork"] {
  color-scheme: dark;

  --papir:       #171614;
  --papir-senk:  #201E1B;
  --papir-loft:  #262421;
  --strek:       rgba(242, 239, 232, .13);
  --strek-fast:  rgba(242, 239, 232, .26);

  --blekk:       #F2EFE8;   /* 15,8:1 mot papiret */
  --blekk-2:     #C3BEB4;   /*  9,8:1 */
  --blekk-3:     #9A948A;   /*  6,0:1 — godt over AA også på løftet papir */

  /* Den brente røde tåler ikke mørk bakgrunn; den blir en flekk.
     Lysnes til brent oransje, og «mork»-varianten snus til den
     LYSESTE — den brukes på tekst, og på mørk flate må tekst opp,
     ikke ned. Navnet lyver litt her, men oppførselen er riktig. */
  --aksent:      #E4703F;
  --aksent-mork: #F2A07A;
  --aksent-vask: #2A1C15;

  /* Den termiske rampa beholder rekkefølgen rask→treg,
     men løftes for å bære på mørk grunn. */
  --fig-a: #E4562A;
  --fig-b: #E8B45A;
  --fig-c: #4FA8B2;

  --gronn: #6FBF8F;
}

/* Målestokken er lys strek på lyst papir; på mørk grunn må den
   snus, ellers forsvinner den helt. */
:root[data-tema="mork"] .maalestokk { opacity: .85; }

/* Rutelinjene inne i energikurven ligger oppå fargeflatene og var
   satt lyse mot lyst papir. På mørk flate skal de dempes. */
:root[data-tema="mork"] .ek-rutelinje { stroke: rgba(23, 22, 20, .3); }

/* Skyggen under velkomstarket gjør ingenting på mørk grunn og
   ender bare som en grumsete kant. */
:root[data-tema="mork"] .velkomst-ark { box-shadow: 0 1px 0 var(--strek); }

/* Bunnmenyens gjennomsiktige lag må blandes mot mørkt papir. */
:root[data-tema="mork"] .bunnnav { background: color-mix(in srgb, var(--papir) 92%, transparent); }


/* ============================================================
   STYRKEKONTINUUMET
   ============================================================
   Sto tidligere som en <style>-blokk figuren injiserte selv. Flyttet hit
   fordi alle andre figurer har CSS-en sin her — og fordi en streng CSP
   (style-src 'self') nekter nettleseren å ta imot stil som lages i
   JavaScript. Den regelen er det som gjør at en innsprøytet reklame ikke kan
   tegne seg selv.

   Fra den opprinnelige blokka, fortsatt gyldig: alt ligger i CSS-variabler
   så lys/mørk følger flaten, og klassereglene under (0,1,0 og mer) vinner
   med vilje over :where()-gulvet lenger oppe i fila. */
.stk-sone { opacity: .55; transition: opacity .15s var(--mykt); }
.stk-sone.aktiv { opacity: .95; }
.stk-sonenavn { font: 700 11px var(--sans); fill: var(--blekk-2);
  paint-order: stroke; stroke: var(--papir-loft); stroke-width: 2.5px; stroke-linejoin: round; }
.stk-sonenavn.aktiv { fill: var(--blekk); }
.stk-akselinje { stroke: var(--strek-fast); stroke-width: 1.5; }
.stk-tikk { stroke: var(--strek-fast); stroke-width: 1; }
.stk-aksetekst { font: 500 10.5px var(--sans); fill: var(--blekk-3); }
.stk-markorlinje { stroke: var(--blekk); stroke-width: 2; }
.stk-markorhode { fill: var(--blekk); }
.stk-markortekst { font: 800 13px var(--sans); fill: var(--blekk); }
.stk-treff { cursor: ew-resize; }
.figur-avlesning .stk-verdi { margin: .1rem 0 .55rem;
  font: 500 .93rem/1.4 var(--sans); color: var(--blekk-3); }
.stk-verdi-tall { font: 800 1.15rem/1 var(--sans); color: var(--blekk);
  font-variant-numeric: tabular-nums; }
.stk-kort { border: 1px solid var(--strek); border-left: 4px solid var(--strek-fast);
  border-radius: var(--radius); background: var(--papir); padding: .7rem .85rem; min-height: 7.4rem; }
.figur-avlesning .stk-kort-navn { margin: 0 0 .45rem; font: 800 .97rem/1.35 var(--sans); }
.stk-kort-omraade { font-weight: 500; color: var(--blekk-3); white-space: nowrap; }
.stk-prikk { display: inline-block; width: .62em; height: .62em; border-radius: 50%;
  background: var(--strek-fast); margin-right: .38rem; }
.stk-prikk + .stk-prikk { margin-left: -.1rem; }
.figur-avlesning .stk-rad { margin: 0 0 .3rem; font-size: .92rem; line-height: 1.45; color: var(--blekk-2); }
.figur-avlesning .stk-rad:last-child { margin-bottom: 0; }
.stk-rad strong { font: 700 .84rem/1.45 var(--sans); color: var(--blekk); }
.stk-delt + .stk-delt { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--strek); }
.figur-avlesning .stk-delt-navn { margin: 0 0 .15rem; font-size: .93rem; }
.stk-delt-navn strong { font-family: var(--sans); }
.figur-avlesning .stk-delt-tekst { margin: 0; font-size: .92rem; line-height: 1.45; color: var(--blekk-2); }
@media (max-width: 40rem) {
  .stk-sonenavn { font-size: 13px; }
  .stk-aksetekst { font-size: 12.5px; }
  .stk-markortekst { font-size: 15px; }
}