/* Brains – designsystem v3 «Hjernen er spillet» (oppdatering 03, 8. oktober 2026)

   Kilden er design/oppdatering-03-v3/ (README.md, brains-ds/ og skjermfilene). Tokens er
   brains-ds/tokens.css + tokens-v3.css, med fontene fra public/fonts/. Alle skjermer bruker
   denne ene fila. Endrer du noe her, bytt versjonsnummer i filnavnet (brains.vN.css) og
   CSS_FIL i src/worker.js – fila caches i ett år (se public/_headers).

   Regler fra designet:
   - Brains-fanen og Brains-økta har bare områdefarger (--omr-*). Alle andre skjermer har bare
     fagfarger (--fag-*). De to settene står aldri side om side.
   - Mint (--mint) betyr bare «nå» eller «neste». Feil svar er «Ikke helt.» i gult (--gul), aldri rødt.
   - Mørk er standard. Lys: data-theme="Lys" på <html>. Hjernescenen (--natt) er alltid mørk.
   - Flatt: ingen skygger. box-shadow brukes bare som innvendig kant.
   - Trykkflater minst 44 px: hovedknapp 56, knapp 52, ikonknapp 48, rad 64.
   - Overskrifter i Barlow Condensed (versaler), brødtekst i Atkinson, merker i IBM Plex Mono.
     Tekst barnet skal lese, står aldri i versaler.
*/

@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(/fonts/atkinson-hyperlegible-next.v1.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(/fonts/barlow-condensed-500.latin.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(/fonts/barlow-condensed-600.latin.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(/fonts/barlow-condensed-700.latin.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono-400-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono-400-latin-ext.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono-500-latin.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono-500-latin-ext.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono-600-latin.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono-600-latin-ext.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- tokens (brains-ds/tokens.css + tokens-v3.css) ---------- */
:root, [data-theme="Mørk"] {
  color-scheme: dark;
  --bg: #1f1f1f; --surface: #2b2b2b; --surface-2: #363636; --surface-3: #444444;
  --text: #f6f4ef; --soft: #d9d7d2; --muted: #a9a7a2;
  --line: rgba(255, 255, 255, .14); --line-strong: rgba(255, 255, 255, .34);
  --ink: #1f1f1f; --paper: #f6f4ef;
  --focus: #f6f4ef; --hatch: rgba(255, 255, 255, .24);
  --nav-bg: #121212; --nav-ink: #b4b2ad; --nav-active: var(--mint);
  --fag-edge: none; --logo-filter: none;
  --korall: #f4694f; --lavendel: #8b88f8; --isbla: #a6e4f0; --mint: #c9d8cf; --gul: #f5c94c;
  --omr-read: var(--isbla); --omr-write: var(--korall); --omr-math: var(--gul); --omr-context: var(--lavendel);
  --fag-nor: oklch(0.80 0.075 22); --fag-sam: oklch(0.84 0.08 78); --fag-kro: oklch(0.85 0.08 122); --fag-nat: oklch(0.82 0.07 160);
  --fag-mat: oklch(0.80 0.07 238); --fag-eng: oklch(0.79 0.07 295); --fag-krle: oklch(0.80 0.075 348); --fag-annet: oklch(0.80 0.012 90);
  --fag-x1: oklch(0.72 0.075 5); --fag-x2: oklch(0.74 0.075 50); --fag-x3: oklch(0.76 0.075 100); --fag-x4: oklch(0.74 0.07 140);
  --fag-x5: oklch(0.74 0.06 190); --fag-x6: oklch(0.72 0.07 220); --fag-x7: oklch(0.72 0.07 268); --fag-x8: oklch(0.72 0.075 318);
  --fag-kh: oklch(0.88 0.06 50); --fag-mus: oklch(0.88 0.06 318); --fag-mh: oklch(0.88 0.06 140);
  --fag-spa: oklch(0.88 0.06 5); --fag-fys: oklch(0.88 0.06 190); --fag-liv: oklch(0.88 0.06 268);
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 56px; --s-9: 72px;
  --ease: cubic-bezier(.2, .8, .2, 1); --dur-1: 120ms; --dur-2: 220ms; --dur-3: 420ms;
  --side-pad: clamp(16px, 3vw, 32px);
  --natt: #0e0e0e;
  --hoved-bg: #f6f4ef; --hoved-ink: #1f1f1f; --hoved-pil: #1f1f1f; --hoved-pil-ink: #f6f4ef;
  --hatching: repeating-linear-gradient(135deg, var(--hatch) 0 2px, transparent 2px 7px);
  --text-body: 18px; --leading-body: 1.5; --measure: 65ch;
}
[data-theme="Lys"] {
  color-scheme: light;
  --bg: #f2f0eb; --surface: #fffefb; --surface-2: #e7e4dd; --surface-3: #d8d4cb;
  --text: #1f1f1f; --soft: #3b3a37; --muted: #5e5c57;
  --line: rgba(31, 31, 31, .13); --line-strong: rgba(31, 31, 31, .38);
  --focus: #1f1f1f; --hatch: rgba(31, 31, 31, .22);
  --nav-bg: #1f1f1f; --nav-ink: #bcbab5;
  --fag-edge: inset 0 0 0 1.5px rgba(31, 31, 31, .5); --logo-filter: invert(1);
  --hoved-bg: #1f1f1f; --hoved-ink: #f6f4ef; --hoved-pil: #f6f4ef; --hoved-pil-ink: #1f1f1f;
}
/* Appens gamle navn peker på v3 (tokens-v3.css). På hvert tema-element, så de følger temaet. */
:root, [data-theme] {
  --surface2: var(--surface-2); --onfag: var(--ink); --font-sans: var(--font-body); --gutter: var(--side-pad);
  --c-nor: var(--fag-nor); --c-mat: var(--fag-mat); --c-nat: var(--fag-nat); --c-sam: var(--fag-sam); --c-eng: var(--fag-eng); --c-krle: var(--fag-krle); --c-kro: var(--fag-kro);
  --c-kh: var(--fag-kh); --c-mus: var(--fag-mus); --c-mh: var(--fag-mh); --c-spa: var(--fag-spa); --c-fys: var(--fag-fys); --c-liv: var(--fag-liv); --c-annet: var(--fag-annet);
  --c-e1: var(--fag-x1); --c-e2: var(--fag-x2); --c-e3: var(--fag-x3); --c-e4: var(--fag-x4); --c-e5: var(--fag-x5); --c-e6: var(--fag-x6); --c-e7: var(--fag-x7); --c-e8: var(--fag-x8);
  --c-read: var(--omr-read); --c-write: var(--omr-write); --c-math: var(--omr-math); --c-context: var(--omr-context);
}
@media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; } }
[data-bevegelse="av"] { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }

/* ---------- grunnlag ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: var(--text); text-underline-offset: 3px; }
a:hover { opacity: .85; }
button, input, select, textarea { font: inherit; color: inherit; }
p, h1, h2, li, .meta { text-wrap: pretty; }
/* hidden skal alltid skjule, også når en klasse setter display (.melding, .knapp …). */
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- side ---------- */
.side {
  max-width: 1080px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) var(--gutter) 120px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
/* Tekststørrelse fra Meg (Vanlig/Stor/Størst), satt som --zoom før siden tegnes. */
.side { zoom: var(--zoom, 1); }
.side.smal { max-width: 600px; padding-bottom: 64px; min-height: 100vh; min-height: 100dvh; }
.side.uten-meny { padding-bottom: 64px; }

/* Toppfelt (BrainsToppfelt): logo eller tilbake-lenke, dato i mono, temaknapp (48) og avatar (48, mint). */
.topp { display: flex; align-items: center; gap: 10px; min-height: 60px; }
.topp > :first-child { margin-right: auto; }
.logo { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.logo img { display: block; height: 22px; width: auto; filter: var(--logo-filter); }

.dato { font-family: var(--font-mono); font-size: 13px; color: var(--muted); white-space: nowrap; }
.tilbake {
  display: flex; align-items: center; gap: 6px; min-height: 48px;
  padding: 0 14px 0 8px; margin-left: -8px; border-radius: 999px;
  font-size: 16px; font-weight: 700; text-decoration: none;
}
.tilbake:hover { background: var(--surface); opacity: 1; }

/* Runde ikonknapper, 48 px. */
.ikonknapp {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none; color: var(--text);
  border-radius: 999px; border: 0; box-shadow: inset 0 0 0 1.5px var(--line-strong); background: transparent; cursor: pointer;
}
/* Profilen (Meg) øverst til høyre: initialen i en mint sirkel. */
.avatarknapp { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--mint); color: var(--ink); font-weight: 800; font-size: 18px; text-decoration: none; }
.ikonknapp:hover { background: var(--surface); }
.ikon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tema-mork { display: none; }
[data-theme="Lys"] .tema-lys { display: none; }
[data-theme="Lys"] .tema-mork { display: block; }

/* ---------- typografi ---------- */
.hode { display: flex; flex-direction: column; gap: 6px; }
/* Overskrifter: Barlow Condensed 700, alltid versaler (1–4 ord). */
h1, .h1 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(56px, 15vw, 88px); line-height: .86; margin: 0; overflow-wrap: break-word; hyphens: manual;
}

.ingress { margin: 0; font-size: 18px; line-height: 1.5; color: var(--soft); max-width: var(--measure); }
h2, .h2 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 32px; line-height: .95; margin: 0; }
/* Merker: IBM Plex Mono 600, versaler, 1–3 ord. */
.kicker, .etikett, .mono { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.etikett { font-size: 11px; }
.mono { text-transform: none; letter-spacing: 0; font-weight: 400; }
.meta { font-size: 15px; line-height: 1.4; color: var(--muted); }
.hjelp { font-size: 14px; line-height: 1.4; color: var(--muted); }

/* ---------- oppsett ---------- */
.stabel { display: flex; flex-direction: column; gap: 10px; }
.stabel-stor { display: flex; flex-direction: column; gap: 24px; }
/* To kolonner på iPad/datamaskin, én på telefon. */
.kolonner { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.kolonner > * { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 40px; }

/* ---------- kort og rader ---------- */
.kort { background: var(--surface); border-radius: 32px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.kort-topp { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.kort-topp > :first-child { flex: none; max-width: 100%; }
.rad {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  min-height: 64px; padding: 8px 0; border-bottom: 1px solid var(--line);
}
.rad:last-child { border-bottom: 0; }
a.rad { text-decoration: none; color: var(--text); }
a.rad:hover { opacity: .85; }
.ikon.dempet { width: 16px; height: 16px; stroke: var(--muted); stroke-width: 2.2; }
.rad-tittel { font-weight: 700; font-size: 17px; line-height: 1.3; }

/* ---------- knapper ---------- */
/* Sekundærknapp: 52 px pille, gjennomsiktig, kant 1,5 px. */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: 999px; color: var(--text);
  border: 0; box-shadow: inset 0 0 0 1.5px var(--line-strong); background: transparent;
  font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.knapp:hover { background: var(--surface); opacity: 1; }
.kort .knapp:hover { background: var(--surface-2); }
/* Hovedknapp (BrainsHovedknapp): én per skjerm, 56 px, etiketten til venstre og pila i en sirkel på 44 til høyre. */
.knapp.hoved { background: var(--hoved-bg); color: var(--hoved-ink); box-shadow: none; min-height: 56px; padding: 0 6px 0 22px; justify-content: space-between; font-size: 17px; }
.knapp.hoved:hover { background: var(--hoved-bg); opacity: .9; }
.knapp.hoved > .ikon:last-child { width: 44px; height: 44px; padding: 12px; border-radius: 50%; background: var(--hoved-pil); color: var(--hoved-pil-ink); stroke-width: 2.2; }
.knapp.hoved:not(:has(> .ikon:last-child)) { padding: 0 22px; justify-content: center; }
/* Brede knapper: tekst til venstre, pil til høyre. */
.knapp.bred { display: flex; width: 100%; justify-content: space-between; padding: 0 20px; }
.knapp.hoved.bred { padding: 0 6px 0 22px; }
.knapp.stiplet { box-shadow: none; border: 1.5px dashed var(--line-strong); }
/* Liten knapp (44 px) i en rad. */
.knapp.liten { min-height: 44px; padding: 0 16px; font-size: 15px; }
.knapp.liten .ikon { width: 16px; height: 16px; stroke-width: 2.4; }
.knapp.hoved.liten { min-height: 44px; padding: 0 16px; justify-content: center; }
.knapp.hoved.liten > .ikon:last-child { width: 16px; height: 16px; padding: 0; background: none; color: inherit; }
.knapp:disabled { opacity: .6; cursor: not-allowed; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line); }
.knapp:disabled:hover { background: transparent; opacity: .6; }
.knapp.hoved:disabled:hover { background: var(--hoved-bg); }
.tekstknapp {
  align-self: flex-start; min-height: 44px; padding: 0 4px; border: 0; background: transparent;
  font-size: 16px; font-weight: 700; color: var(--text); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
}

/* Barnevelger og andre valg-piller. */
.piller { display: flex; flex-wrap: wrap; gap: 8px; }
.pille {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px 0 8px; color: var(--text);
  border-radius: 999px; border: 0; box-shadow: inset 0 0 0 1.5px var(--line-strong); background: transparent;
  font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.pille:hover { background: var(--surface); opacity: 1; }
.pille[aria-current="true"] { background: var(--text); color: var(--bg); box-shadow: none; }
.pille .trinn { font-size: 14px; font-weight: 500; opacity: .75; }
.pille.ny { padding: 0 18px; box-shadow: none; border: 1.5px dashed var(--line-strong); }

.avatar {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%;
  background: var(--surface2); color: var(--text); font-size: 15px; font-weight: 700;
}
.pille[aria-current="true"] .avatar { background: var(--bg); }
.avatar.stor { width: 88px; height: 88px; font-family: var(--font-display); font-size: 48px; font-weight: 700; background: var(--mint); color: var(--ink); }

/* ---------- skjema ---------- */
.felt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.felt { gap: 8px; }
.felt > span { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.inndata {
  width: 100%; min-width: 0; min-height: 52px; padding: 0 16px; border-radius: 18px; color: var(--text);
  border: 0; background: var(--surface-2); font-size: 17px;
}
.inndata[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--korall); }
.kort .inndata { background: var(--surface2); }
.side > .inndata, .stabel > .inndata { background: var(--surface-2); }
.inndata::placeholder { color: var(--muted); }
.velger { position: relative; display: block; }
.velger select { min-height: 48px; appearance: none; -webkit-appearance: none; padding-right: 40px; font-weight: 600; cursor: pointer; }
.velger select option { background: var(--surface); color: var(--text); }
.velger .ikon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--muted); pointer-events: none; }
.skjemarad { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.knapperad { display: flex; flex-wrap: wrap; gap: 8px; }

/* Stor kode som skal skrives av. */

.kodeboks { display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); border-radius: 24px; padding: 16px; }
.qr { display: block; flex: none; border-radius: 10px; }
.kode { font-family: var(--font-display); font-size: 48px; font-weight: 700; letter-spacing: 0.16em; line-height: 1; overflow-wrap: anywhere; }

/* Melding med ikon (lagret, sendt …). .ok er mint (lagret, lansert), .feil er korall (koden virker ikke). */
.melding { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 56px; background: var(--surface-2); border-radius: 18px; padding: 12px 16px; font-size: 16px; line-height: 1.45; color: var(--text); }
.melding .ikon { stroke-width: 2.4; }
.melding.ok { background: var(--mint); color: var(--ink); font-weight: 600; }
.melding.feil { background: var(--korall); color: var(--ink); font-weight: 600; }
.melding.ok a, .melding.feil a { color: var(--ink); }

/* ---------- bunnmeny (BrainsBunnmeny) ---------- */
/* Mørk kapsel på 68 px, 12 px fra kantene og 14 px fra bunnen. Aktiv fane er en mint pille. */
.meny {
  position: fixed; left: 12px; right: 12px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 10;
  max-width: 560px; margin: 0 auto;
}
.meny > div {
  height: 68px; border-radius: 999px; background: var(--nav-bg); box-shadow: 0 0 0 1px var(--line);
  display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 2px; padding: 6px;
}
.meny a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 999px; text-decoration: none; color: var(--nav-ink);
  font-size: 12px; font-weight: 600; white-space: nowrap; min-width: 0;
}
.meny a:hover { opacity: 1; color: #f6f4ef; }
.meny a[aria-current="page"] { background: var(--nav-active); color: var(--ink); }
.meny .ikon { width: 22px; height: 22px; }
.meny .ikon[viewBox="0 0 644 688"] { width: 21px; height: 22px; }

/* ---------- legg inn ---------- */
.ikon.stor { width: 32px; height: 32px; }
.slippsone { box-shadow: inset 0 0 0 2px var(--line-strong); background-image: var(--hatching); border-radius: 24px; gap: 16px; }
.filvelger { padding: 12px 16px; min-height: 56px; cursor: pointer; }
.filvelger::file-selector-button {
  margin-right: 12px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line-strong);
  background: transparent; color: var(--text); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.resultat { gap: 10px; }
.resultat.feil { border: 1.5px dashed var(--muted); }
.feilliste { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.5; color: var(--soft); }

/* ---------- oppgaver og frister ---------- */
/* Flerlinjet tekstfelt, som .inndata. */
textarea.inndata { padding: 12px 16px; min-height: 104px; line-height: 1.5; resize: vertical; }
/* Merkelapp for oppgavetype (design: Tag). --c er fagfargen; en prøve er fylt. */
/* Oppgavetype (design: merke). Kant i fagfargen; en prøve er fylt. */
.merke {
  display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  line-height: 1.4; padding: 3px 7px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--c, var(--line-strong)); color: var(--text);
}
.merke.fylt { background: var(--c); color: var(--ink); box-shadow: none; }
.merkelinje { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Frist med datoflis (design: Hjem, «Kommer snart»). */
.frist {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center;
  background: var(--surface); border-radius: 24px; padding: 12px; text-decoration: none; color: var(--text);
}
a.frist:hover { opacity: .85; }
.datoflis {
  display: flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: 18px; background: var(--surface-2); font-variant-numeric: tabular-nums;
}
.datoflis .ukedag { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--muted); line-height: 1.2; }
.datoflis .dag { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1; }
/* «Ferdig» i stedet for knappen når en rad er gjort (design: Hjem, Dagens økter). */

/* Valg som piller, med en radioknapp inni (hurtigvalg for frist). Valgt ser ut som .pille[aria-current]. */
.pille.valg { min-height: 44px; padding: 0 16px; font-size: 16px; position: relative; }
.pille.valg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pille.valg:has(input:checked) { background: var(--text); color: var(--bg); box-shadow: none; }
.pille.valg:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 3px; }
/* Valgfrie felt bak «Mer …» (details), åpnes med en tekstknapp. */
.mer > summary { display: flex; align-items: center; list-style: none; }
.mer > summary::-webkit-details-marker { display: none; }
.mer > div { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
/* Tekst fra læreren og vedlegg på oppgavesiden. */
.brodtekst { margin: 0; font-size: var(--text-body); line-height: var(--leading-body); max-width: var(--measure); white-space: pre-line; overflow-wrap: anywhere; }
.vedleggsbilde { display: block; max-width: 100%; height: auto; border-radius: 14px; background: var(--surface2); }

/* ---------- oversikt og innstillinger ---------- */
/* Segmentkontroll (design: Segmented control). Radioknapper eller lenker i en pille. */
.segment { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); max-width: 100%; overflow-x: auto; }
.segment.fast { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
.segment > a, .segment > label {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px;
  border-radius: 999px; font-size: 15px; font-weight: 700; text-decoration: none; color: var(--text); white-space: nowrap; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.segment.fast > label { min-height: 44px; font-size: 16px; }
.segment > label input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.segment > a[aria-current="true"], .segment > label:has(input:checked) { background: var(--text); color: var(--bg); }
.segment > label:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 3px; }
/* Bryter (design: Switch, 52×32). En avkrysningsboks med role="switch" inni en rad. */
.bryter {
  display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 14px; align-items: center;
  min-height: 64px; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer;
}
.bryter.med-prikk { grid-template-columns: 14px minmax(0, 1fr) 52px; }
.bryter:last-child { border-bottom: 0; }
.bryter input {
  appearance: none; -webkit-appearance: none; margin: 0; width: 52px; height: 32px; border-radius: 999px;
  border: 0; background: var(--surface-3); position: relative; cursor: pointer;
}
.bryter input::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--text); }
.bryter input:checked { background: var(--mint); }
.bryter input:checked::after { left: auto; right: 4px; background: var(--ink); }
.bryter input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* Tre tall i en rute (design: Oversikt, Barna i dag). */
.tall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: 18px; overflow: hidden; }
.tall > div { background: var(--surface-2); padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.tall b { font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tall span { font-size: 13px; line-height: 1.3; color: var(--muted); }
/* Dagens økter som striper: fylt = ferdig. */
.striper { display: flex; gap: 3px; }
.striper > span { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); }
.striper > span.ferdig { background: var(--text); }
/* Brikke med glyf (design: «Trenger repetisjon»-listen). */
.brikker { display: flex; flex-wrap: wrap; gap: 6px; }
.brikke {
  display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; padding: 4px 10px 4px 8px;
  border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line-strong); text-decoration: none; color: var(--text);
}
.brikke svg { width: 14px; height: 14px; flex: none; }
/* Initial i en fylt sirkel, 44 px (design: Barna i dag) og 32 px (Frister fremover). */
.avatar.fylt { width: 44px; height: 44px; font-size: 18px; background: var(--text); color: var(--bg); }
.avatar.liten { width: 32px; height: 32px; font-size: 14px; }
.frist.med-barn { grid-template-columns: 56px minmax(0, 1fr) auto; }

/* ---------- repetisjon ---------- */
/* Svaralternativ i flervalg: bred knapp der teksten kan gå over flere linjer. */
.knapp.valg { justify-content: flex-start; white-space: normal; text-align: left; line-height: 1.35; min-height: 64px; padding: 10px 20px; height: auto; border-radius: 24px; font-size: 17px; }
/* «Vis svar» er en vanlig knapp som åpner svaret under (details). */
.vis-svar > summary { display: inline-flex; }
.vis-svar[open] > summary { display: none; }

/* ---------- kartet og fag ---------- */
/* Hele kartet er 800×520 og ruller sidelengs på smale skjermer; telefonen får nabolaget i stedet. */
.kart { padding: 16px; overflow-x: auto; }
.kart svg { font-family: inherit; }



.kart a:focus-visible { outline: none; }
.kart a:focus-visible circle:first-of-type { stroke: var(--text); stroke-width: 2; }
/* Tegnforklaring: linjer og glyfer med tekst. */
.forklaring { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--muted); padding: 0 6px 4px; }
.forklaring > span { display: flex; align-items: center; gap: 6px; }
/* Søk øverst på Kartet og Fag. */
.sok { display: flex; gap: 8px; }
.sok .inndata { flex: 1; background: var(--surface); }
/* Fagvelger: piller med fagprikk, som ruller sidelengs når de ikke får plass. */
.piller.rull { flex-wrap: nowrap; overflow-x: auto; padding: 2px 0; }
.piller.rull > * { flex: none; }
.pille.fag { min-height: 44px; padding: 0 16px 0 12px; font-size: 15px; gap: 8px; }
/* Framdrift i et fag: sitter · jobbet med · resten. */
.framdrift { display: flex; gap: 3px; height: 12px; }
.framdrift > span:nth-child(1) { background: var(--c); border-radius: 6px 0 0 6px; }
.framdrift > span:nth-child(2) { background: var(--c); opacity: .45; }
.framdrift > span:nth-child(3) { background: var(--surface2); border-radius: 0 6px 6px 0; }

/* ---------- timeplan ---------- */
/* Ukedagene over ukeoversikten (design: Timeplan og Barna). */
.timeplan-dag { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-align: center; color: var(--muted); padding-bottom: 4px; }
.rute {
  display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 6px; border-radius: 8px;
  border: 1.5px solid transparent; border-left: 4px solid var(--c, transparent); background: var(--surface2);
  font-size: 14px; font-weight: 600; text-align: left; overflow: hidden; white-space: nowrap; cursor: pointer;
}
.rute.tom { background: transparent; color: var(--muted); }
/* Timeplanen med egne tider per dag: én rad per time (strek i fagfarge, start–slutt, fag, fjern). */
.time-rad.redigerbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 0; }
.time-rad.redigerbar .fagstrek { align-self: stretch; height: auto; min-height: 44px; }
.tider { display: flex; gap: 6px; align-items: center; }
.tider .inndata { width: 7em; min-height: 44px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.time-rad.redigerbar .velger { flex: 1 1 170px; min-width: 0; }
.time-rad.redigerbar .velger select { min-height: 44px; }
/* Ukeoversikten: fem kolonner, hver time med klokkeslett og fagforkortelse. */
.uke-oversikt { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; font-variant-numeric: tabular-nums; }
.uke-oversikt > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.uke-oversikt .rute { flex-direction: column; align-items: flex-start; justify-content: center; min-height: 44px; padding: 4px 6px; font-size: 13px; line-height: 1.2; cursor: default; }
.uke-oversikt .rute .meta { font-size: 13px; }
button.timeplan-dag { border: 0; background: transparent; cursor: pointer; border-radius: 8px; min-height: 44px; }
button.timeplan-dag[aria-current="true"] { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.segment > button { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font-size: 16px; font-weight: 600; color: var(--text); cursor: pointer; }
.segment > button[aria-current="true"] { background: var(--text); color: var(--bg); }

/* Dagfaner og timene på I dag (design: Hjem, «Timeplan»). */
.dagfaner { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dagfane {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; padding: 6px 0; border-radius: 18px;
  background: var(--surface); text-decoration: none; color: var(--text); font-variant-numeric: tabular-nums;
}
.dagfane > span:first-child { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.dagfane b { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1; }
.dagfane.i-dag { box-shadow: inset 0 0 0 2px var(--line-strong); }
.dagfane[aria-current="true"] { background: var(--text); color: var(--bg); box-shadow: none; }
.merker { display: flex; gap: 3px; height: 8px; align-items: center; }
.merkeprikk { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--c); display: inline-block; }
.merkeprikk.fylt { background: var(--c); }
.forklaring .merkeprikk { width: 10px; height: 10px; }
.time-rad { display: grid; grid-template-columns: 46px 4px minmax(0, 1fr); gap: 12px; align-items: stretch; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.time-rad > .meta:first-child { font-family: var(--font-mono); font-size: 13px; line-height: 1.4; }
.time-rad:last-child { border-bottom: 0; }
.fagstrek { width: 4px; min-height: 32px; height: auto; border-radius: 2px; background: var(--c); }
.time-innhold { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.time-fag { font-weight: 700; font-size: 16px; line-height: 1.3; }
.time-rad.ferdig { opacity: .62; }

/* ---------- meg ---------- */
/* Uka di: sju ringer, fylt med hake de dagene barnet har gjort noe; i dag har tykk ring. */
.uke { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ukedag { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.ukedag > span:first-child {
  width: 100%; max-width: 40px; aspect-ratio: 1 / 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong);
  display: grid; place-items: center; color: var(--ink);
}
.ukedag > span:last-child { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.ukedag > span:first-child .ikon { width: 18px; height: 18px; stroke-width: 3; }
.ukedag.gjort > span:first-child { background: var(--mint); box-shadow: none; }
.ukedag.i-dag > span:last-child { font-weight: 800; color: var(--text); }

/* ---------- statusglyf og fagprikk ---------- */
.prikk { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--c, var(--c-annet)); box-shadow: var(--fag-edge); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- felles varianter (v13: erstatter inline-stil som gikk igjen i worker.js) ---------- */
/* Litt større metatekst for forklaringer i kort (design: 16px / 1.5). */
.meta.lang { font-size: 16px; line-height: 1.5; }
/* Radtittel i en bryter-rad (design: 17px). */
.bryter .rad-tittel { display: block; font-size: 17px; }
/* Mindre H1 for undersider med lange titler (lekse, del, sammenheng). */
.h1-mindre { font-size: clamp(44px, 12vw, 64px); }
/* Smal kolonne for skjemaer og flyt med ett steg om gangen. */
.smal { max-width: 680px; }
/* Større trykkflate uten å endre utseendet: små lenker (glyfer, brikker) får 44 px usynlig flate. */
.trykkflate { position: relative; }
.trykkflate::after { content: ""; position: absolute; inset: -8px; }
.brikke.trykkflate::after { inset: -8px 0; } /* brikkene står tett i bredden */

/* ---------- Hjem ---------- */
/* Fagene dine (design: Hjem, «Fagene dine»): ett kort per fag med framdrift. */
.fagrutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.fagkort {
  display: flex; flex-direction: column; gap: 10px; background: var(--surface); border-radius: 18px; padding: 16px;
  color: var(--text); text-decoration: none; border: 1.5px solid transparent;
}
.fagkort:hover { border-color: var(--line); background: var(--surface2); opacity: 1; }
.fagkort .rad-tittel { font-size: 17px; }
/* Kartet ditt: hele kartet i lite format. */


/* ---------- Brains-fanen ---------- */
/* Områdefargen er en aksent, ikke en flate: ikonet står i farge på en svak tone av den. */


/* Stigen i områdets farge. */
.striper.farget > span.ferdig { background: var(--c); }
/* B-merket på Brains: nøytralt, med de fire områdefargene som en tynn linje under. */




/* ---------- Brains-rommet ----------
   Brains-fanen er et rolig rom: de fire områdene som fliser, mye luft og én ting om gangen. De fire
   områdefargene brukes bare som aksent: ikonet, trappa, fylte ord og B-merket når økta er ferdig. */





@keyframes bx-snu { to { transform: rotate(1turn); } }



/* Brains-siden: stigene som et kart av noder (samme formspråk som Kartet). Hvert område er en sti
   som stiger; nodene fylles når barnet kan steget, og neste steg har en ring som puster. */
/* Mobil: neste økt, stigene, områdene. Bred skjerm: stigene til venstre i hele høyden. */

  


.stigene { display: block; width: 100%; height: auto; max-height: 460px; margin: 0 auto; overflow: visible; }
.stigene a { outline: none; }
.stigene .st-flate { fill: transparent; transition: fill .2s ease; }
.stigene a:hover .st-flate { fill: var(--surface2); }
.stigene a:focus-visible .st-flate { stroke: var(--text); stroke-width: 2; }
.st-navn { font-family: var(--font-sans); font-size: 19px; font-weight: 700; fill: var(--text); }
.st-node { transform-box: fill-box; animation: st-inn .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 110ms + 120ms); }
.st-strek { animation: st-fram .7s ease both; animation-delay: calc(var(--i) * 110ms + 220ms); }
.st-puls { transform-box: fill-box; transform-origin: center; animation: st-puls 2.6s ease-in-out infinite; }
@keyframes st-inn { from { opacity: 0; transform: translateY(12px); } }
@keyframes st-fram { from { opacity: 0; } }
@keyframes st-puls { 0%, 100% { opacity: .35; transform: scale(.86); } 50% { opacity: 1; transform: scale(1.08); } }




/* Økta: fokusmodus. Lukk, fremdrift og ingenting annet øverst; oppgaven stor; handlingen nederst. */































@keyframes bx-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }




/* Områdesiden: stort ikon og navn, stigene som rolige kort, det som kommer samlet nederst. */








@media (prefers-reduced-motion: reduce) {
   .st-node, .st-strek, .st-puls { animation: none; }
  
}

/* =====================================================================
   v3 – felles komponenter (design/oppdatering-03-v3, «Brains v3 Designsystem»)
   ===================================================================== */
.side { gap: 32px; padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 120px; }
.side.uten-meny { padding-bottom: 28px; }
.d2 { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: .9; text-transform: uppercase; margin: 0; }
.d3 { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: .95; text-transform: uppercase; margin: 0; }
.tall-stort { font-family: var(--font-display); font-weight: 700; line-height: .8; font-variant-numeric: tabular-nums; }
.instruks { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.2; text-wrap: pretty; }
.skravert { background-image: var(--hatching); }
.mint-tekst { color: var(--mint); }

/* «Se som»-banneret (68): mint, over toppfeltet på alle barnets skjermer. */
.se-som { display: flex; align-items: center; gap: 10px; padding: 12px 8px 12px 16px; border-radius: 24px; background: var(--mint); color: var(--ink); position: relative; z-index: 3; }
.se-som .ikon { stroke-width: 2.2; }
.se-som span { flex: 1; font-size: 14px; line-height: 1.35; font-weight: 600; }
.se-som a { flex: none; display: grid; place-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 700; text-decoration: none; }

/* «Nå»-merket: mint brikke med --ink-tekst. Mint betyr bare «nå» eller «neste». */
.na-merke { display: inline-block; padding: 3px 8px; border-radius: 8px; background: var(--mint); color: var(--ink); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; }
.mono-linje { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.mono-linje .prikk { width: 10px; height: 10px; }

/* Koblingsglyfen (40 × 16) for de fem typene. */
.kstrek { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* Fremdriftsstreker: én rad tynne streker (6 px, gap 4). Ferdig = fargen (område eller fag),
   nå = --text, resten = --surface-3. */
.streker { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.streker > span { height: 6px; border-radius: 3px; background: var(--surface-3); }
.streker > span.na { background: var(--text); }
.streker > span.ferdig { background: var(--c, var(--text)); }

/* Fokusmodus (økta, dagens løp, kom i gang): Lukk, streker og Les opp øverst, ingen bunnmeny. */
.fokus { gap: 20px; min-height: 100vh; min-height: 100dvh; padding-bottom: 24px; }
.fokus-topp { display: flex; align-items: center; gap: 12px; min-height: 80px; }
.rund { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--text); cursor: pointer; text-decoration: none; }
.rund:hover { background: var(--surface); opacity: 1; }
.rund .ikon { stroke-width: 2.2; }
.rund[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.fokus-innhold { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.fokus-bunn { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.fokus-rad { display: flex; gap: 8px; }
.fokus-rad > .knapp.hoved, .fokus-rad > form:last-child { flex: 1; }
.fokus-rad .knapp:not(.hoved) { min-height: 56px; padding: 0 24px; font-size: 17px; }
.flere > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--soft); cursor: pointer; list-style: none; }
.flere > summary::-webkit-details-marker { display: none; }
.flere > summary::before { content: ""; width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; transition: transform var(--dur-2) var(--ease); }
.flere[open] > summary::before { transform: rotate(90deg); }
.flere > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 4px 0 8px; }

/* Boks i økta: Hint (kant), Derfor (flate), Fra læreren (stiplet). */
.boks { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 24px; background: var(--surface); }
.boks.kant { background: transparent; box-shadow: inset 0 0 0 2px var(--line-strong); }
.boks.stiplet { background: transparent; border: 2px dashed var(--line-strong); }
.boks > .kicker { font-size: 12px; color: var(--text); }
.boks.dempet > .kicker, .boks.stiplet > .kicker { color: var(--muted); }
.boks p, .boks li { margin: 0; font-size: 17px; line-height: 1.5; }
.boks ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }

/* Tittel etter svar: «Riktig.» i mint, «Ikke helt.» i gult. Aldri rødt. */
.svar-tittel { font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: .86; text-transform: uppercase; margin: 0; }
.svar-tittel.riktig { color: var(--mint); }
.svar-tittel.ikke-helt { color: var(--gul); }
[data-theme="Lys"] .svar-tittel.riktig { color: var(--text); }
[data-theme="Lys"] .svar-tittel.ikke-helt { color: var(--text); text-decoration: underline 6px var(--gul); text-underline-offset: 6px; }

/* Svaralternativer etter svar (32): ditt svar gjennomstreket, fasit mint med hake, resten dempet. */
.alt { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: 10px 20px; border-radius: 24px; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 17px; font-weight: 700; color: var(--soft); }
.alt.ditt { box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--text); }
.alt.ditt > span:last-child { text-decoration: line-through; }
.alt.fasit { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; background: var(--mint); color: var(--ink); box-shadow: none; }
.alt.fasit > span { display: flex; flex-direction: column; gap: 2px; }
.alt .kicker { font-size: 11px; color: inherit; }
.alt .ikon { stroke-width: 3; width: 18px; height: 18px; }

/* Valgflis som fylles (31: hovedpunkter, 28: biter av en lekse). --c er fagfargen. */
.flis { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 18px; border-radius: 24px; border: 0; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--text); text-align: left; font-size: 17px; font-weight: 700; line-height: 1.3; cursor: pointer; position: relative; width: 100%; }
.flis input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.flis .boks-hake { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--line-strong); color: transparent; }
.flis .boks-hake .ikon { width: 14px; height: 14px; stroke-width: 3.2; }
.flis:has(input:checked), .flis.fylt { background: var(--c); color: var(--ink); box-shadow: none; }
.flis:has(input:checked) .boks-hake, .flis.fylt .boks-hake { background: var(--ink); color: var(--c); box-shadow: none; }
.flis:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Tom tilstand og «ikke nådd ennå»: skravert flate med tynn kant. */
.tom-kort { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 20px; border-radius: 32px; background-image: var(--hatching); box-shadow: inset 0 0 0 1.5px var(--line); }
.tom-kort h2 { font-weight: 600; font-size: 34px; }
.tom-kort p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--soft); }

/* Rad i et kort med toppstrek (Dagens løp, Neste gang, Henger sammen med). */
.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.liste > li, .liste > a, .liste > div { display: flex; align-items: center; gap: 12px; min-height: 64px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.liste > :first-child { border-top: 0; }
.liste .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.liste .tekst > .etikett { color: var(--muted); }
.liste .navn { font-size: 16px; font-weight: 700; line-height: 1.25; }
.liste .under { font-size: 14px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .flere > summary::before { transition: none; } }
[data-bevegelse="av"] *, [data-bevegelse="av"] *::before { animation: none !important; transition: none !important; }

/* ---------- Inngang (01–06) ---------- */
/* Hjernescenen er alltid mørk (data-theme="Mørk" på .natt), også i lyst tema. */
body:has(.side.natt) { background: var(--natt); }
.side.natt { background: var(--natt); color: #f6f4ef; }
.knapp.hoved.lys-knapp { background: #f6f4ef; color: #1f1f1f; }
.knapp.hoved.lys-knapp > .ikon:last-child { background: #1f1f1f; color: #f6f4ef; }
/* Sider med innhold øverst og handlingen nederst (velkommen, logg inn, koble, feil). */
.side.smal.uten-meny { min-height: 100vh; min-height: 100dvh; gap: 0; }
.inngang { flex: 1; display: flex; flex-direction: column; gap: 20px; padding: 24px 0 28px; }
.inngang > h1 { font-size: clamp(64px, 18vw, 88px); }
.inngang-bunn { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.feilkode { font-family: var(--font-display); font-weight: 700; font-size: 160px; line-height: .8; color: var(--surface-3); }
/* Velkommen (02): to store valgkort. Forelder i mint. */
.valgkort { display: flex; flex-direction: column; gap: 28px; padding: 22px; border-radius: 32px; background: var(--surface); color: var(--text); text-decoration: none; }
.valgkort.mint { background: var(--mint); color: var(--ink); }
.valgkort.mint .kicker { color: var(--ink); }
.valgkort-linje { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 22px; font-weight: 800; line-height: 1.2; }
.valgkort-pil { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--hoved-bg); color: var(--hoved-ink); }
.valgkort.mint .valgkort-pil { background: var(--ink); color: var(--paper); }
.valgkort-pil .ikon { stroke-width: 2.2; }
/* Koble (04): seks ruter for koden. */
.koderuter { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.koderuter input { width: 100%; min-width: 0; height: 68px; border: 0; border-radius: 18px; background: var(--surface-2); color: var(--text); text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 40px; padding: 0; }
.koderuter input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--text); }
.koderuter input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--korall); }
/* Forsiden (01). */
.side.forside { max-width: 600px; padding: 0 0 140px; gap: 0; }
.forside-helt { position: relative; height: 620px; }
.forside-hjerne { position: absolute; inset: 60px 0 60px; }
.forside-logo { position: absolute; top: max(28px, env(safe-area-inset-top)); left: 20px; height: 24px; width: auto; }
.forside-tittel { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.forside-tittel h1 { font-size: 68px; }
.forside-blokker { padding: 8px 20px 0; display: flex; flex-direction: column; gap: 28px; }
.forside-blokker section { display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); }
.forside-blokker .mono { font-size: 13px; font-weight: 600; color: #a9a7a2; }
.forside-blokker p { margin: 0; font-size: 17px; line-height: 1.5; color: #d9d7d2; }
.forside-knapp { position: fixed; left: 16px; right: 16px; bottom: max(20px, env(safe-area-inset-bottom)); max-width: 568px; margin: 0 auto; z-index: 5; }
/* Hei (04b) og andre helsider med hjernen: hjernen øverst, teksten nederst. */
.side.helside { max-width: 600px; padding: 0; min-height: 100vh; min-height: 100dvh; }
.scene-helside { position: relative; flex: 1; min-height: 100vh; min-height: 100dvh; }
.hei-hjerne { position: absolute; left: 0; right: 0; top: 40px; bottom: 300px; }
.scene-tekst { position: absolute; left: 16px; right: 16px; bottom: max(24px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }
.scene-tekst h1 { font-size: clamp(64px, 20vw, 88px); line-height: .86; }
.scene-tekst p { margin: 0; font-size: 18px; line-height: 1.5; color: #d9d7d2; }

/* ---------- Hjem (07) ---------- */
/* Hjernescenen: 640 px, --natt, i full bredde over resten av siden. */
.scene { background: var(--natt); color: #f6f4ef; }
.scene-indre { position: relative; height: 640px; max-width: 1080px; margin: 0 auto; }
.scene-indre > .se-som { position: absolute; top: max(12px, env(safe-area-inset-top)); left: var(--gutter); right: var(--gutter); }
.scene-indre:has(> .se-som) .scene-topp { top: 104px; }
.scene-topp { position: absolute; top: max(16px, env(safe-area-inset-top)); left: var(--gutter); right: var(--gutter); display: flex; align-items: center; gap: 8px; z-index: 2; }
.scene-topp .ikonknapp { margin-left: auto; background: rgba(43, 43, 43, .85); box-shadow: none; color: #f6f4ef; }
.sesongbrikke { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 6px; border-radius: 999px; background: rgba(43, 43, 43, .85); color: #f6f4ef; text-decoration: none; }
.sesongbrikke > span { display: flex; flex-direction: column; line-height: 1.2; }
.sesongbrikke .kicker { font-size: 11px; color: #a9a7a2; }
.sesongbrikke b { font-size: 14px; }
.lysteller { position: absolute; top: 88px; left: calc(var(--gutter) + 4px); display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.scene-indre:has(> .se-som) .lysteller { top: 170px; }
.lysteller .tall-stort { font-size: 72px; }
.lysteller .kicker { display: flex; flex-direction: column; font-size: 12px; font-weight: 500; color: #d9d7d2; }
.hjem-hjerne { position: absolute; left: 0; right: 0; top: 150px; height: 380px; }
.scene-hint { position: absolute; top: 534px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #a9a7a2; pointer-events: none; }
.fagbrikker { position: absolute; top: 560px; left: 0; right: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--gutter); }
.fagbrikker::-webkit-scrollbar { display: none; }
.fagbrikker button { flex: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(14, 14, 14, .6); color: #f6f4ef; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .34); font-size: 15px; font-weight: 600; cursor: pointer; }
.fagbrikker button[aria-pressed="true"] { background: #f6f4ef; color: #1f1f1f; box-shadow: none; }
/* Siden under scenen: samme marg som innholdet i scenen, så kantene står på linje, og ingenting legger seg oppå
   scenen. Én kolonne på telefon og iPad på høykant (820), to kolonner fra 1000 px (iPad på tvers, Mac). */
.side.med-scene { position: relative; padding-top: 24px; }
.kolonner.hjem { gap: 32px; }
.kolonner.hjem > * { gap: 32px; }
.seksjon-topp { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.seksjon-topp .mono { font-size: 13px; color: var(--muted); }
/* Dagens løp-kortet. */
.lopkort { padding: 18px; gap: 16px; }
.lopkort .kort-topp { align-items: center; }
.liste.lop > li { display: block; min-height: 0; }
.lop-rad { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; color: var(--text); text-decoration: none; }
a.lop-rad:hover { opacity: .85; }
.lop-rad > svg { margin-top: 18px; }
.liste.lop .tekst { gap: 4px; }
.lop-hoyre { flex: none; align-self: center; display: flex; align-items: center; gap: 4px; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.lop-hoyre .mono { font-size: 13px; color: var(--text); }
.lop-hoyre .ikon { width: 16px; height: 16px; stroke-width: 2.4; }
.lop-hoyre.ferdig .ikon { stroke: var(--mint); }
.liste.lop > li.gjort .tekst { opacity: .6; }



.na-kort { gap: 12px; padding: 18px; background: transparent; box-shadow: inset 0 0 0 2px var(--mint); }
.ukepiler { display: flex; align-items: center; gap: 4px; }
.ukepiler .mono { font-size: 13px; color: var(--text); padding: 0 4px; }
.rund.liten { width: 44px; height: 44px; }
.rund.liten .ikon { width: 18px; height: 18px; }
.kort.timer { padding: 0 18px; gap: 0; }
.time-rad:first-child { border-top: 0; }
.time-innhold { align-items: center; }
/* Fagene dine: to i bredden. */
.fagrutenett { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fagkort { min-height: 150px; border-radius: 24px; border: 0; padding: 16px; }
.fagkort:hover { background: var(--surface-2); border: 0; }
.fagkort-navn { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: .95; text-transform: uppercase; overflow-wrap: anywhere; }
.fagprikker { display: flex; flex-wrap: wrap; gap: 3px; }
.fagprikker > span { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--c); }
.fagprikker > span.fylt { background: var(--c); }
.fagprikker > span.halv { background: linear-gradient(90deg, transparent 50%, var(--c) 50%); }
.kolonner.hjem > * { flex-basis: 100%; }
@media (min-width: 600px) and (max-width: 999px) { .kolonner.hjem .fagrutenett { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }
@media (min-width: 1000px) { .kolonner.hjem { flex-wrap: nowrap; } .kolonner.hjem > :first-child { flex: 3 1 0; } .kolonner.hjem > :last-child { flex: 2 1 0; } }

/* ---------- Venter på Brains (designsystemet) ---------- */
.brains-venter { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 24px; background: var(--natt); color: #f6f4ef; font-size: 17px; line-height: 1.4; }
.venteprikker { display: flex; gap: 6px; }
.venteprikker > span { width: 10px; height: 10px; border-radius: 50%; background: rgba(246, 244, 239, .25); animation: tenn 1.1s steps(1) infinite; }
.venteprikker > span:nth-child(2) { animation-delay: .22s; } .venteprikker > span:nth-child(3) { animation-delay: .44s; }
.venteprikker > span:nth-child(4) { animation-delay: .66s; } .venteprikker > span:nth-child(5) { animation-delay: .88s; }
@keyframes tenn { 0%, 100% { background: rgba(246, 244, 239, .25); } 20%, 80% { background: var(--c); } }
@media (prefers-reduced-motion: reduce) { .venteprikker > span { animation: none; background: var(--c); } }

/* ---------- Kom i gang (09–12) ---------- */
.na-flate { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 32px; background: var(--c); color: var(--ink); }
.na-flate .mono-linje { color: var(--ink); }
.na-merke.mork { background: var(--ink); color: var(--paper); }
.na-oppgave { font-size: 20px; font-weight: 800; line-height: 1.3; }
.knapp.hoved.mork-knapp { background: var(--ink); color: var(--paper); }
.knapp.hoved.mork-knapp > .ikon:last-child { background: var(--paper); color: var(--ink); }
.noe-annet { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.noe-annet fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.noe-annet legend { padding: 0; margin-bottom: 12px; }
.filknapp { position: relative; cursor: pointer; }
.filknapp input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.filknapp:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.fortsett-rad { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 8px 12px 16px; border-radius: 24px; background: var(--surface); color: var(--text); text-decoration: none; }
.fortsett-rad .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fortsett-rad .navn { font-size: 16px; font-weight: 700; }
.stegliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.stegliste li { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border-radius: 24px; background: var(--surface); }
.stegliste .nr { flex: none; width: 24px; font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1; }
.stegliste .t { flex: 1; font-size: 16px; font-weight: 700; line-height: 1.3; }
.stegliste .mono { flex: none; font-size: 13px; color: var(--muted); }
.klokke { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; border-radius: 32px; background: var(--surface); }
.klokketall { font-size: 120px; line-height: .85; }
.klokkestrek { width: 100%; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.klokkestrek > div { width: 0; height: 100%; }
.klokke .knapp { margin-top: 8px; }
.ferdig-hjerne { position: absolute; left: 0; right: 0; top: 40px; height: 400px; }

/* ---------- Meg (50) ---------- */
.meg-hode { display: flex; align-items: center; gap: 16px; }
.meg-hode h1 { font-size: 64px; }
.meg-hode .meta { font-size: 15px; }
.uke { gap: 4px; }

/* ---------- Brains-fanen (13, 14, sesong, 23) – bare områdefarger ---------- */
.brains-side { gap: 28px; }
.brains-side > .hode h1 { font-size: 80px; }
.neste-okt { gap: 14px; padding: 18px; }
.neste-okt .instruks { font-size: 22px; line-height: 1.25; }
.stigefliser { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.stigeflis { display: flex; flex-direction: column; gap: 10px; padding: 12px 8px; border-radius: 24px; background: var(--surface); color: var(--text); text-decoration: none; min-height: 300px; }
a.stigeflis:hover { background: var(--surface-2); opacity: 1; }
.stigeflis.snart { background: transparent; background-image: var(--hatching); color: var(--muted); }
.stigeflis-navn { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: .95; text-transform: uppercase; text-align: center; }
.stigeflis-steg { flex: 1; display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; }
.stigeflis-steg > span { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-strong); }
.stigeflis-steg > span.kan { background: var(--c); box-shadow: none; }
.stigeflis-steg > span.halv { background: linear-gradient(90deg, transparent 50%, var(--c) 50%); box-shadow: inset 0 0 0 2.5px var(--c); }
.stigeflis-steg > span.neste { box-shadow: inset 0 0 0 2.5px var(--c), 0 0 0 3px var(--mint); animation: puls 2.6s ease-in-out infinite; }
.stigeflis.snart .stigeflis-steg > span { box-shadow: inset 0 0 0 1.5px var(--line); }
.stigeflis-status { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; text-align: center; color: var(--c); }
.stigeflis.snart .stigeflis-status { color: var(--muted); }
@keyframes puls { 0%, 100% { box-shadow: inset 0 0 0 2.5px var(--c), 0 0 0 3px var(--mint); } 50% { box-shadow: inset 0 0 0 2.5px var(--c), 0 0 0 6px color-mix(in oklab, var(--mint) 40%, transparent); } }
.tegnforklaring { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 0 4px; font-size: 14px; color: var(--muted); }
.tegnforklaring > span { display: flex; align-items: center; gap: 6px; }
.tegnforklaring i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.sesonglenke { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 32px; box-shadow: inset 0 0 0 2px var(--mint); color: var(--text); text-decoration: none; }
.sesonglenke .tall-stort { font-size: 56px; }
.sesonglenke .tekst { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sesonglenke .kicker { font-size: 12px; color: var(--mint); }
[data-theme="Lys"] .sesonglenke .kicker, [data-theme="Lys"] .mint-tekst:not([data-theme="Mørk"] *) { color: var(--text); }
/* Område (14): områdefargen som flate i hodet. */
.side.omrade { padding: 0 0 28px; gap: 0; }
.omrade-hode { background: var(--c); color: var(--ink); padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 10px; }
.omrade-hode .tilbake { color: var(--ink); }
.omrade-hode .kicker { color: var(--ink); }
.omrade-hode h1 { font-size: 104px; line-height: .82; }
.omrade-hode p { margin: 0; font-size: 17px; line-height: 1.45; }
.omrade-innhold { padding: 20px 12px 0; display: flex; flex-direction: column; gap: 16px; }
.trapp { display: flex; align-items: flex-end; gap: 3px; height: 44px; }
.trapp > span { flex: 1; border-radius: 3px; background-image: var(--hatching); }
.trapp > span.kan { background: var(--c); }
.trapp > span.neste { background: transparent; box-shadow: inset 0 0 0 2px var(--mint); }
.neste-boks { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 18px; box-shadow: inset 0 0 0 2px var(--mint); }
.neste-boks .kicker { font-size: 12px; color: var(--mint); }
[data-theme="Lys"] .neste-boks .kicker { color: var(--text); }
.neste-boks b { font-size: 17px; font-weight: 800; line-height: 1.3; }
.snart-flis { display: flex; flex-direction: column; padding: 16px; border-radius: 24px; background-image: var(--hatching); box-shadow: inset 0 0 0 1.5px var(--line); }
.alle-steg { border-top: 1px solid var(--line); padding-top: 6px; }
.alle-steg > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-weight: 700; cursor: pointer; list-style: none; }
.alle-steg > summary::-webkit-details-marker { display: none; }
.alle-steg[open] > summary .ikon { transform: rotate(180deg); }
/* Sesongen. */
.lysspor { display: flex; gap: 3px; height: 18px; }
.lysspor > span { flex: 1; border-radius: 3px; background-image: var(--hatching); }
.lysspor > span.fylt { background: var(--text); }
.lysspor > span.na { background: transparent; box-shadow: inset 0 0 0 2px var(--text); }
.trinnliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.trinnliste li { display: flex; align-items: center; gap: 12px; }
.trinnliste .node { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-strong); font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.trinnliste .node.gjort { background: var(--text); color: var(--bg); box-shadow: none; }
.trinnliste .node.na { background: var(--mint); color: var(--ink); box-shadow: none; }
.trinnliste .kortet { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px; border-radius: 24px; background: var(--surface); }
.trinnliste .kortet.gjort { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.trinnliste .kortet.na { background: transparent; box-shadow: inset 0 0 0 2px var(--mint); }
.trinnliste .kortet > span { display: flex; flex-direction: column; }
.trinnliste .kortet b { font-size: 16px; }
.trinnliste .kortet .meta { font-size: 14px; }

/* ---------- Brains-økta (15–26) ---------- */
.okt-etikett .prikk { background: var(--c); box-shadow: none; }
.okt-tittel { font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: .86; text-transform: uppercase; margin: 0; }
.ordbrikker { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.ordbrikke { position: relative; display: flex; align-items: center; gap: 6px; min-height: 60px; padding: 0 20px; border-radius: 18px; box-shadow: inset 0 0 0 1.5px var(--line-strong); font-size: 20px; font-weight: 700; color: var(--text); cursor: pointer; }
.ordbrikke input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ordbrikke:has(input:checked), .ordbrikke.valgt { background: var(--c); color: var(--ink); box-shadow: none; }
.ordbrikke:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.ordbrikke.riktig { background: var(--mint); color: var(--ink); box-shadow: none; padding: 0 18px; }
.ordbrikke.mangler { box-shadow: inset 0 0 0 2px var(--mint); }
.ordbrikke.feil { background: var(--c); color: var(--ink); box-shadow: none; text-decoration: line-through; }
.ordbrikke .ikon { width: 16px; height: 16px; stroke-width: 3; }
.ordbrikker .tegn { font-size: 22px; font-weight: 700; padding-bottom: 12px; }
.ord-gruppe { display: inline-flex; align-items: flex-end; gap: 2px; }
.okt-valg { display: flex; flex-direction: column; gap: 8px; }
.okt-valg .knapp { min-height: 56px; justify-content: flex-start; font-size: 17px; }
.okt-valg .knapp.hoved { padding: 0 20px; }
.okt-merke { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line-strong); font-size: 14px; font-weight: 700; }
.okt-merke i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ferdig-topp { display: flex; align-items: center; justify-content: space-between; min-height: 80px; }
.lop-mot { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 24px; background: var(--surface); }
.lop-mot > div { display: flex; flex-direction: column; gap: 8px; }
.lop-mot .linje { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.lop-mot .linje .tall-stort { font-size: 32px; line-height: 1; color: var(--c); }
.lop-mot .sist .linje, .lop-mot .sist .tall-stort { color: var(--muted); }
.lopstolper { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.lopstolper > span { height: 30px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--line-strong); transform-origin: bottom; }
.lopstolper > span.ja { background: var(--c); box-shadow: none; }
.sist .lopstolper > span.ja { background: var(--hatching); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.foran { display: flex; align-items: flex-end; gap: 12px; }
.foran .tall-stort { font-size: 112px; line-height: .78; color: var(--c); }
.foran .d3 { padding-bottom: 6px; }
@keyframes fyll { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.5); } 70% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
.spill .lopstolper > span.ja { animation: fyll 320ms var(--ease) backwards; }
.spill .foran { animation: pop 600ms var(--ease) 2200ms backwards; }
@media (prefers-reduced-motion: reduce) { .spill .lopstolper > span.ja, .spill .foran, .stigeflis-steg > span.neste { animation: none; } }
/* Kartlegging ferdig (26): den eneste skjermen i økta med områdefarge som flate. */
body:has(.flate-omrade.omr-read) { background: var(--omr-read); } body:has(.flate-omrade.omr-write) { background: var(--omr-write); }
body:has(.flate-omrade.omr-math) { background: var(--omr-math); } body:has(.flate-omrade.omr-context) { background: var(--omr-context); }
.side.flate-omrade { background: var(--c); color: var(--ink); min-height: 100vh; min-height: 100dvh; }
.side.flate-omrade .rund { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(31, 31, 31, .5); }
.side.flate-omrade .kicker { color: var(--ink); }
.side.flate-omrade h1 { font-size: 80px; line-height: .84; }
.brains-rekke { display: flex; flex-direction: column; gap: 28px; }
.brains-rekke > .stigeseksjon { order: 2; } .brains-rekke > .sesonglenke { order: 3; }
@media (min-width: 900px) { .brains-rekke { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .brains-rekke > .stigeseksjon { grid-row: span 2; grid-column: 2; order: 0; } }

/* ---------- Dagens løp (27–36) – fagfarger ---------- */
.liste.lopliste { padding: 8px 16px; border-radius: 32px; background: var(--surface); }
.liste.lopliste > li { min-height: 68px; padding: 14px 0; }
.liste.lopliste .tekst { gap: 4px; }
.liste.lopliste > li.gjort .tekst { opacity: .6; }
.liste.lopliste .mono { flex: none; font-size: 13px; color: var(--muted); }
.lop-sirkel { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 2.5px var(--c); color: var(--ink); }
.gjort > .lop-sirkel { background: var(--c); box-shadow: none; }
.lop-sirkel .ikon { width: 14px; height: 14px; stroke-width: 3.2; }
/* Lekse i boka: biter på to sider (28). Gjort = fagfarge med hake, nå = kant + «Nå», resten skravert. */
.bokbit { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 0 18px; border: 0; border-radius: 24px; background: transparent; color: var(--text); text-align: left; cursor: pointer; width: 100%; }
.bokbit .t { flex: 1; font-size: 18px; font-weight: 700; }
.bokring { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 2.5px var(--c); }
.bokbit.gjort { background: var(--c); color: var(--ink); }
.bokbit.gjort .bokring { background: var(--ink); color: var(--c); box-shadow: none; }
.bokbit.gjort .kicker { color: var(--ink); font-size: 12px; }
.bokring .ikon { width: 14px; height: 14px; stroke-width: 3.2; }
.bokbit.na { box-shadow: inset 0 0 0 2px var(--c); }
.bokbit.senere { background-image: var(--hatching); box-shadow: inset 0 0 0 1.5px var(--line); cursor: default; }
.bokbit.senere .t { color: var(--muted); }
.bokbit.senere .bokring { box-shadow: inset 0 0 0 2px var(--line-strong); }
/* Oppgaver i boka (29): ni små ruter. */
.oppgaveruter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.oppgaveruter button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 64px; border: 0; border-radius: 18px; background: transparent; background-image: var(--hatching); color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line); font-family: var(--font-mono); font-size: 17px; font-weight: 600; cursor: pointer; }
.oppgaveruter button.na { background-image: none; color: var(--text); box-shadow: inset 0 0 0 2px var(--c); }
.oppgaveruter button.gjort { background: var(--c); background-image: none; color: var(--ink); box-shadow: none; }
.oppgaveruter .ikon { width: 14px; height: 14px; stroke-width: 3.2; }
/* Sammenheng (33–34, 42): to temaer med koblingen mellom. */
.par { display: flex; flex-direction: column; }
.par-tema { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 18px; border-radius: 24px; background: var(--surface); font-size: 18px; font-weight: 700; color: var(--text); text-decoration: none; }
.par-tema.fylt { background: var(--c); color: var(--ink); }
.par-midt { display: flex; align-items: center; gap: 14px; min-height: 64px; padding-left: 16px; }
.par-midt.valgt { min-height: 76px; }
.stiplet-strek { width: 0; height: 52px; margin-left: 6px; border-left: 2.5px dashed var(--line-strong); }
.koblingsord { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; text-transform: uppercase; }
.kobvalg { display: flex; flex-wrap: wrap; gap: 8px; }
.kobvalg label { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line-strong); font-size: 16px; font-weight: 700; cursor: pointer; }
.kobvalg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.kobvalg label:has(input:checked) { background: var(--text); color: var(--bg); box-shadow: none; }
.kobvalg label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.meta-hake { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--soft); }
.meta-hake .ikon { stroke: var(--mint); stroke-width: 2.6; width: 18px; height: 18px; }
[data-theme="Lys"] .meta-hake .ikon { stroke: var(--text); }
/* Løpet er ferdig (36). */
.lop-hjerne { position: absolute; left: 0; right: 0; top: 24px; height: 360px; }
.lysbrikke { position: absolute; top: max(24px, env(safe-area-inset-top)); right: 16px; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(43, 43, 43, .85); font-size: 14px; font-weight: 700; }
.lysbrikke i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.neste-gang { display: flex; flex-direction: column; padding: 4px 16px; border-radius: 24px; background: #2b2b2b; }
.neste-gang .kicker { padding-top: 12px; font-size: 12px; color: #a9a7a2; }
.neste-gang > div { display: flex; align-items: center; gap: 10px; min-height: 52px; border-top: 1px solid rgba(255, 255, 255, .14); }
.neste-gang > div:nth-child(2) { border-top: 0; }
.neste-gang b { flex: 1; font-size: 16px; }
.neste-gang .mono { font-size: 13px; color: #a9a7a2; }

/* ---------- Kartet (40–44) ---------- */
.sokefelt { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 18px; border-radius: 18px; background: var(--surface-2); color: var(--muted); font-size: 17px; text-decoration: none; }
.sokefelt.aktiv { padding: 0 6px 0 18px; box-shadow: inset 0 0 0 2px var(--text); color: var(--text); }
.sokefelt input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 17px; outline: none; }
.sokefelt input::-webkit-search-cancel-button { display: none; }
.fagfilter { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
.fagfilter::-webkit-scrollbar { display: none; }
.fagfilter a { flex: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--text); font-size: 15px; font-weight: 600; text-decoration: none; }
.fagfilter a[aria-pressed="true"] { background: var(--text); color: var(--bg); box-shadow: none; }
.kartkort { border-radius: 32px; background: var(--surface); padding: 8px 0 12px; overflow: hidden; margin-top: -12px; }
.kartrull { overflow-x: auto; scrollbar-width: none; }
.kartrull::-webkit-scrollbar { display: none; }
.kart { margin: 0 auto; }
@media (min-width: 840px) { .kart { max-width: 100%; } .kart svg { max-width: 100%; height: auto; } }
.kart svg { display: block; font-family: var(--font-body); overflow: visible; }
.kart .klynge text { font-family: var(--font-display); font-size: 20px; font-weight: 700; text-transform: uppercase; fill: var(--soft); }
.kart .klynge.dempet { opacity: .25; }
.kart.har-valg .klynge { opacity: .5; }
.kart .kant { stroke: var(--line-strong); }
.kart .kant .pil { fill: var(--line-strong); stroke: none; }
.kart .kant .kantord { display: none; font-family: var(--font-mono); font-size: 13px; font-weight: 600; fill: var(--text); stroke: var(--surface); stroke-width: 5px; paint-order: stroke; }
.kart.har-valg .kant { opacity: .22; }
.kart.har-valg .kant.hot { opacity: 1; stroke: var(--text); }
.kart.har-valg .kant.hot .pil { fill: var(--text); }
.kart.har-valg .kant.hot .kantord { display: block; }
.kart .node { outline: none; cursor: pointer; }
.kart .node .halo { stroke: var(--mint); opacity: 0; }
.kart .node .nodenavn { display: none; font-size: 14px; font-weight: 700; fill: var(--text); stroke: var(--surface); stroke-width: 5px; paint-order: stroke; }
.kart .node.valgt .halo { opacity: 1; }
.kart .node.valgt .ring { stroke-width: 3.5; }
.kart .node.valgt .nodenavn { font-size: 17px; }
.kart .node.valgt .nodenavn, .kart .node.nabo .nodenavn { display: block; }
.kart.har-valg .node:not(.valgt):not(.nabo) { opacity: .35; }
.kart.filtrert .node[data-ute] { opacity: .2; }
.kart.filtrert .kant { opacity: .35; }
.kart.filtrert:not(.har-valg) .node:not([data-ute]) .nodenavn { display: block; }
.kart .node:focus-visible .ring { stroke: var(--text); stroke-width: 4; }
.kort-ramme { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 32px; box-shadow: inset 0 0 0 1.5px var(--line); }
.kort-ramme b { font-size: 17px; }
.forklaring-v3 { gap: 14px; }
.statusrutenett { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; font-size: 15px; }
.statusrutenett > span, .strek-rad { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.temapanel { gap: 16px; }
.temapanel .liste > a { min-height: 64px; padding: 8px 0; }
.status-linje { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--soft); }
.sokrad { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 16px; border-radius: 24px; background: var(--surface); color: var(--text); text-decoration: none; }
.sokrad .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sokrad .navn { font-size: 16px; font-weight: 700; line-height: 1.3; }
.tom-kort img { width: 150px; height: auto; display: block; }

/* ---------- Feiringen ved riktig svar ---------- */
/* En liten hjernescene der området lyser opp med en gang. Haken spretter inn straks; teksten står i mint. */
.feiring { position: relative; height: 150px; border-radius: 24px; background: var(--natt); overflow: hidden; flex: none; }
.feiring brains-hjerne { position: absolute; inset: -10px 0 -20px; }
.feiring-hake { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mint); color: var(--ink); animation: pop 450ms var(--ease) backwards; }
.feiring-hake .ikon { width: 22px; height: 22px; stroke-width: 3; }
.feiring-tekst { position: absolute; left: 16px; bottom: 12px; font-size: 12px; color: var(--mint); animation: rise 400ms var(--ease) 200ms backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .feiring-hake, .feiring-tekst { animation: none; } }

/* ---------- Flervalg på Fag ---------- */
.flervalg-rad + .flervalg-rad { border-top: 1px solid var(--line); }
.flervalg-rad button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 0; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.flervalg-rad .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.flervalg-rad .navn { font-size: 16px; font-weight: 700; line-height: 1.3; }
.flervalg-rad .under { font-size: 14px; color: var(--muted); }

/* ---------- Lys og nivå ---------- */
/* «+N lys» stort i feiringen, og «Nytt nivå» når et svar fyller et nivå. */
.feiring-lys { position: absolute; left: 16px; top: 10px; font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 1; color: var(--mint); animation: pop 500ms var(--ease) 80ms backwards; }
.feiring-niva { position: absolute; left: 16px; right: 16px; bottom: 12px; display: flex; flex-direction: column; gap: 2px; animation: rise 400ms var(--ease) 450ms backwards; }
.feiring-niva .kicker { font-size: 12px; color: var(--mint); }
.feiring-niva b { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: .95; text-transform: uppercase; color: #f6f4ef; }
.feiring.nytt-niva { height: 190px; box-shadow: inset 0 0 0 2px var(--mint); }
.niva-hopp { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 24px; box-shadow: inset 0 0 0 2px var(--mint); }
.niva-hopp .kicker { font-size: 12px; color: var(--mint); }
.niva-hopp b { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: .95; text-transform: uppercase; }
.lysrad { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; border-top: 1px solid var(--line); font-size: 16px; }
.lysrad:first-child { border-top: 0; }
.lysrad .mono { flex: none; font-size: 13px; font-weight: 600; color: var(--mint); }
[data-theme="Lys"] .lysrad .mono, [data-theme="Lys"] .niva-hopp .kicker { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .feiring-lys, .feiring-niva { animation: none; } }

/* ---------- Trykk som svarer med en gang ---------- */
/* Ingen forsinkelse på trykk i iOS (dobbelttrykk-zoom av), et lite trykk inn på knapper og rader, og det som ble
   trykket, dempes mens neste side lastes (aria-busy settes i TEMA_ETTER). */
html { touch-action: manipulation; }
.knapp, .valgkort, .lop-rad, .bokbit, .flervalg-rad button, .fagkort, .stigeflis, .pille { transition: transform 120ms var(--ease), opacity 120ms var(--ease); }
.knapp:active, .valgkort:active, .lop-rad:active, .bokbit:active, .flervalg-rad button:active, .fagkort:active, .stigeflis:active, .pille:active { transform: scale(.98); }
[aria-busy="true"] { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .knapp:active, .valgkort:active, .lop-rad:active, .bokbit:active, .flervalg-rad button:active, .fagkort:active, .stigeflis:active, .pille:active { transform: none; } }