/* ── Skriftene ───────────────────────────────────────────────────────
   Nunito og Baloo 2 sto i font-family lenge før de fulgte med i appen.
   Uten fila falt nettleseren tilbake på reservelista — og reserven for
   Baloo 2 var «cursive», som iOS løser til Snell Roundhand og Android
   til Dancing Script. Det albanske ordet på HVERT kort ble altså vist i
   en løkkeskrift på hver eneste enhet, og ingen så det her, fordi Linux
   løser cursive til noe helt annet igjen.

   latin-ext, ikke latin: albansk trenger ë og ç, tysk trenger ä ö ü ß.
   Med bare «latin» ville halve ordlista falt tilbake til systemskriften
   midt i et ord. woff2, lokalt, ingen forespørsel ut — Google Fonts-
   lenken ble fjernet med CSP-en, og en barneapp skal ikke ringe en
   tredjepart ved hver kaldstart.

   font-display:swap: teksten vises med reserveskriften først og bytter
   når fila er lest. Bedre enn usynlig tekst i et halvt sekund. */
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/nunito-400.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/nunito-700.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/nunito-800.woff2') format('woff2');}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/baloo2-700.woff2') format('woff2');}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/baloo2-800.woff2') format('woff2');}

/* ══════════════════════════════════════════════════════════════════
   PALETTEN

   Hver farge i appen står HER, én gang, og nås gjennom en variabel.
   Det er ikke ryddighet for ryddighetens skyld: det er forutsetningen
   for at det mørke temaet lenger nede kan være ti linjer med verdier
   i stedet for en kopi av hele arket.

   Tokenene har SEMANTISKE navn, ikke fargenavn: --surface, ikke
   --hvit. Under det mørke temaet er --surface nemlig ikke hvit, og en
   regel som het `background:var(--hvit)` ville løyet.

   Tre lag:
     1. flatene      --bg, --surface, --surface-2/3, --line*
     2. aksentene    --accent1..5 til rammer og fyll,
                     --t1/3/4/5 til TEKST av samme farge
     3. tonene       --gronn-bg + --gronn-tekst osv. — par som alltid
                     brukes sammen, og som derfor må mørkne sammen
   ══════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;
  --bg:#fff8ee; --accent1:#ff6b6b; --accent2:#ffd166; --accent3:#06d6a0;
  --accent4:#118ab2; --accent5:#f77f00; --text:#2d2d2d; --muted:#5f5f5f;
  /* Tekstvarianter av aksentfargene. De lyse fargene over er laget for
     rammer, bakgrunner og STOR tekst. Til liten tekst er de for lyse:
     målt mot hvit gir #ff6b6b 2,78:1 og #f77f00 2,63:1, mot kravet 4,5.
     Variantene under er de samme fargene, mørknet til de klarer kravet. */
  --t1:#d23636; --t3:#058163; --t4:#12708f; --t5:#b35a00;

  /* ── flatene ───────────────────────────────────────────────────
     --surface er kortet, chipen, modalboksen og knappen. Sto som
     #fff 45 steder; nå står den ett sted, og det er derfor et mørkt
     tema i det hele tatt er mulig. */
  --surface:#fff; --surface-2:#f6f6f6; --surface-3:#faf7f2;
  --line:#e8e8e8; --line-varm:#eee5da; --line-sterk:#c9c9c9;
  --spor:#e8e8e8;                    /* tomme framdriftslinjer */
  --slor:rgba(0,0,0,.55);            /* sløret bak en modal */
  /* Blekket på en flate som ER fylt med en aksentfarge. Hvitt i lys
     modus; i mørk modus er aksentene lyse, og da må blekket bli
     mørkt. Uten dette tokenet ville hver «color:#fff» blitt hvit
     tekst på lyseblått. */
  --paa-aksent:#fff;
  --paa-gul:#4a3200;                 /* på --accent2, som blir gul i begge tema */
  --paa-gronn:#04543c;               /* på --accent3, samme sak */

  /* ── tonene ────────────────────────────────────────────────────
     Par som alltid opptrer sammen: en svak flate og et blekk som er
     lesbart PÅ den flaten. De må derfor bytte tema sammen. */
  /* --gronn-tekst er grønn på --surface; --gronn-tekst-sterk er grønn
     PÅ den grønne tonen, som er lysere og derfor krever mørkere blekk.
     Bytter du dem om, får du 3,92:1 og en test som sier fra. */
  --gronn-bg:#d4f5ee; --gronn-bg-svak:#e9fbf5; --gronn-ramme:#b5ecdc;
  --gronn-tekst:#00875a; --gronn-tekst-sterk:#046b52;
  --gul-bg:#fff3cc; --gul-bg-svak:#fff8e1; --gull:#e0a800;
  --gul-tekst:#b5760a; --gul-tekst-sterk:#7a4f00;
  --bla-bg:#eef7ff; --bla-ramme:#bfe0ef; --bla-tekst-sterk:#0b5a75;
  --rod-bg:#ffe0e0; --rod-tekst:#c00;
  --feil-bg:#ffe9e9; --feil-tekst:#c62828;
  --oransje-bg:#fff0e6; --oransje-bg-svak:#fff6e8; --oransje-ramme:#ffd9a8;
  --oransje-tekst:#a34700; --oransje-tekst-sterk:#9c4a00;
  --lilla-bg:#f3ecff; --lilla-tekst:#7b4bd6;
  --varsel-bg:#ffb703;
  --laast-bg:#efeae4; --laast-tekst:#5f5f5f; --laast-ramme:#ddd6cd;
  --ghost-ramme:#c4bdb4; --ghost-fyll:#a49d94;
  --slot-ramme:#d9c58a; --slot-bg:#fffdf6;
  --kos-bg:#fff1f1; --kos-ramme:#ffd9d4; --kos-spor:#f6d6d6;
  --kos-sterk:#e53935; --kos-dyp:#111;

  /* Bakgrunnens tre lyskilder. Egne tokener og ikke --rod-bg, fordi
     de skal kunne tones helt ned i mørk modus uten å dra kortenes
     tonede flater med seg. */
  --glans1:#ffe0e0; --glans2:#d4f5ee; --glans3:#fff3cc;

  /* Lys plate bak strektegningene. Tom i lys modus — se
     kommentaren over .kortbilde-regelen i det mørke temaet. */
  --plate:transparent; --plate-ramme:transparent;

  --shadow:0 8px 32px rgba(0,0,0,.10); --shadow-sm:0 3px 10px rgba(0,0,0,.08);
  --r-lg:24px; --r-md:16px; --r-pill:999px;
}

/* ══════════════════════════════════════════════════════════════════
   DET MØRKE TEMAET

   VALGT, IKKE SNUDD. Å invertere lysheten maskinelt gir grumsete
   flater og blekk som såvidt klarer kravet — det ser billig ut, og
   for et barn som leser dårlig er «såvidt» ikke godt nok. Hvert steg
   under er plukket ut og målt mot flaten det faktisk står på. Den
   laveste målingen i hele blokka er 5,46:1; kravet er 4,5.

   Grunnfargen er varm (#14110e, ikke #000): appen er kremgul i lys
   modus, og identiteten skal overleve at lyset slukkes. Ren svart gir
   dessuten halo rundt lys tekst på OLED, og dette er en app barn
   bruker i senga.

   AKSENTENE SNUR ROLLE. --t1/3/4/5 er «samme farge, mørknet til den
   er lesbar på hvitt». På en mørk flate må de LYSNES i stedet. Derfor
   må alt som skriver blekk oppå en aksentflate bruke --paa-aksent,
   ikke #fff — den blir mørk her.

   ÉN blokk, valgt på attributtet. js/tema.js løser opp systemvalget
   og setter data-tema før første maling, slik at en @media-kopi av
   hele blokka ikke trengs. To kopier av førti verdier ville drevet fra
   hverandre første gang noen justerte én farge. Appen tegnes uansett
   av JavaScript — uten det finnes ingen app å gi et tema. */
html[data-tema="mork"]{
  color-scheme:dark;
  --bg:#14110e; --text:#f4eee6; --muted:#c2b7a8;
  --surface:#241f1a; --surface-2:#2d2721; --surface-3:#1e1a16;
  --line:#3b342c; --line-varm:#3f372e; --line-sterk:#574d42;
  --spor:#38302a; --slor:rgba(0,0,0,.72);
  /* Rammer og fyll. #118ab2 på #241f1a er 2,4:1 — under 3:1-kravet
     for ikke-tekst. Aksentene lysnes derfor akkurat nok til at en
     ramme fortsatt er en ramme. Gulen står; den er lys nok fra før,
     og er dessuten den ene fargen som bærer blekk oppå seg. */
  --accent1:#ff8b8b; --accent2:#ffd166; --accent3:#2ee3b4;
  --accent4:#3aa9d4; --accent5:#ff9f34;
  --t1:#ff9b93; --t3:#4fd8ab; --t4:#6fc7ea; --t5:#f5ab5c;
  --paa-aksent:#17130f;
  --gronn-bg:#17352c; --gronn-bg-svak:#16302a; --gronn-ramme:#2f5f4f;
  --gronn-tekst:#6fe0b8; --gronn-tekst-sterk:#8ee9c8;
  --gul-bg:#3a2f14; --gul-bg-svak:#322913; --gull:#d9a521;
  --gul-tekst:#f2c46a; --gul-tekst-sterk:#f7d590;
  --bla-bg:#16303c; --bla-ramme:#2c5d72; --bla-tekst-sterk:#8fd3ee;
  --rod-bg:#3d1f1f; --rod-tekst:#ff9b93;
  --feil-bg:#3d1c1c; --feil-tekst:#ff9a92;
  --oransje-bg:#3a2617; --oransje-bg-svak:#33220f; --oransje-ramme:#6a4a24;
  --oransje-tekst:#f0a769; --oransje-tekst-sterk:#f6b673;
  --lilla-bg:#2b2440; --lilla-tekst:#c4a9f5;
  --laast-bg:#2a2520; --laast-tekst:#b5aa9c; --laast-ramme:#423a31;
  --ghost-ramme:#574d42; --ghost-fyll:#7a6e60;
  --slot-ramme:#6b5a33; --slot-bg:#221d16;
  --kos-bg:#2e1a1a; --kos-ramme:#5a2f2f; --kos-spor:#3d2222;
  --kos-sterk:#ff6b60; --kos-dyp:#000;
  /* Lyskildene i bakgrunnen tones helt ned. De samme metningene som i
     lys modus ville gitt tre lysende flekker bak teksten. */
  --glans1:#241618; --glans2:#122622; --glans3:#231d10;
  /* Skyggen er ikke lenger nok alene til å skille et kort fra flaten
     — svart på mørkt er usynlig. Den beholdes for dybde, men det er
     rammene og --surface som gjør jobben nå. */
  --shadow:0 8px 32px rgba(0,0,0,.55); --shadow-sm:0 3px 10px rgba(0,0,0,.4);
  /* Plata bak strektegningene. Se .kortbilde lenger nede. */
  --plate:#f7f2ea; --plate-ramme:rgba(0,0,0,.06);
}
/* Før js/tema.js har rukket å svare, skal i det minste nettleserens
   egne flater — rullefelt, tekstmarkør, standardknapper — stemme med
   systemet. Fargene selv kommer et øyeblikk senere. */
@media (prefers-color-scheme:dark){ html:not([data-tema="lys"]){ color-scheme:dark } }

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);font-family:'Nunito',sans-serif;min-height:100vh;color:var(--text);
  display:flex;flex-direction:column;align-items:center;padding:18px 12px 60px;
  background-image:
    radial-gradient(circle at 10% 15%,var(--glans1) 0%,transparent 40%),
    radial-gradient(circle at 90% 85%,var(--glans2) 0%,transparent 40%),
    radial-gradient(circle at 50% 50%,var(--glans3) 0%,transparent 60%);
}
button{font-family:'Nunito',sans-serif;-webkit-tap-highlight-color:transparent}
h1{font-family:'Baloo 2','Nunito',sans-serif;font-size:clamp(2rem,6vw,2.8rem);color:var(--t1);
  letter-spacing:-1px;text-shadow:3px 3px 0 var(--accent2);text-align:center}
.subtitle{font-size:.95rem;color:var(--muted);font-weight:800;text-align:center;margin:2px 0 14px}

/* ── stats chips ─────────────────────────── */
.stats-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.chip{background:var(--surface);border-radius:var(--r-pill);padding:6px 16px;font-weight:900;
  font-size:.82rem;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:6px}
.chip.gold{color:var(--gul-tekst);background:var(--gul-bg)}
.chip.teal{color:var(--gronn-tekst);background:var(--gronn-bg)}

/* ── group nav (segmented) ───────────────── */
/* Fire faner på én rad — men bare så lenge de FÅR plass.
   white-space:nowrap og flex:1 uten min-width gjorde raden ustrekkelig:
   den kunne ikke bli smalere enn den lengste etiketten, og skjøv hele
   dokumentet 95 px bredere enn skjermen. Norsk merket det ikke; med et
   30 % lengre språk fikk barnet vannrett rulling på hver eneste skjerm.
   Funnet med pseudospråket, ?pseudo=1. */
.group-nav{display:flex;flex-wrap:wrap;background:var(--surface);border-radius:var(--r-pill);padding:5px;gap:4px;
  box-shadow:var(--shadow-sm);margin-bottom:20px;max-width:460px;width:100%}
.group-btn{flex:1 1 auto;min-width:0;border:none;background:transparent;border-radius:var(--r-pill);
  padding:10px 6px;font-weight:900;font-size:.82rem;cursor:pointer;color:var(--muted);
  transition:all .18s;overflow-wrap:anywhere}
.group-btn.active{background:var(--t4);color:var(--paa-aksent);box-shadow:0 4px 12px rgba(17,138,178,.35)}
.group-btn:not(.active):hover{color:var(--t4)}

/* ── mode pills ──────────────────────────── */
.mode-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.mode-btn{background:var(--surface);border:3px solid var(--accent4);color:var(--t4);
  border-radius:var(--r-pill);padding:7px 16px;font-weight:900;font-size:.82rem;
  cursor:pointer;transition:all .18s;box-shadow:var(--shadow-sm)}
.mode-btn:hover{transform:translateY(-2px)}
.mode-btn.active{background:var(--t4);color:var(--paa-aksent);transform:translateY(-2px);
  box-shadow:0 5px 14px rgba(17,138,178,.35)}

/* Skjult for øyet, men lest av skjermleseren. Brukt av leveområdene i
   js/tilgjengelighet.js, og av etiketter som bare gir mening i tale.
   clip-path og ikke display:none: det siste ville gjort dem stumme. */
.visuelt-skjult{position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}

/* ── category tabs ───────────────────────── */
.tabs{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:22px;max-width:680px}
/* Selve role=tablist-elementet. display:contents lar fanene være
   flex-barn av .tabs som før, slik at «vis flere» kan stå i samme rad
   uten å ligge inne i fanelista. Rollen overlever display:contents —
   målt i Chromium, og testen i tests/rok-tilgjengelighet.mjs holder
   den målingen ved like. */
.tab-liste{display:contents}
.tab{position:relative;background:var(--surface);border:3px solid transparent;border-radius:var(--r-pill);
  padding:5px 14px;font-weight:800;font-size:.82rem;cursor:pointer;transition:all .18s;
  color:var(--text);box-shadow:var(--shadow-sm)}
.tab:hover:not(.locked){transform:translateY(-2px)}
.tab.active{border-color:var(--t1);background:var(--t1);color:var(--paa-aksent);
  transform:translateY(-2px);box-shadow:0 5px 14px rgba(255,107,107,.35)}
.tab.locked{opacity:1;cursor:help;background:var(--laast-bg);color:var(--laast-tekst);border-color:var(--laast-ramme)}
.tab .medal{font-size:.72rem;position:absolute;top:-8px;right:-4px}

/* ── flash card ──────────────────────────── */
.area{display:none;flex-direction:column;align-items:center;width:100%;max-width:420px}
.area.show{display:flex}
.progress-row{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:18px}
.progress-bar{flex:1;height:12px;background:var(--spor);border-radius:var(--r-pill);overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent3),var(--accent4));
  border-radius:var(--r-pill);transition:width .4s ease}
.progress-text{font-weight:900;font-size:.88rem;color:var(--muted);min-width:52px;text-align:right}
.card-wrap{perspective:1000px;width:300px;height:320px;margin-bottom:22px;cursor:pointer}
.card-wrap.sent{height:270px}
.card{width:100%;height:100%;position:relative;transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.4,2,.6,1);border-radius:28px}
.card.flipped{transform:rotateY(180deg)}
.card-face{position:absolute;inset:0;border-radius:28px;backface-visibility:hidden;
  -webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;
  justify-content:center;box-shadow:var(--shadow);padding:24px;background:var(--surface)}
.card-front{border:4px solid var(--accent2)}
.card-back{border:4px solid var(--accent3);transform:rotateY(180deg)}
.card-emoji{font-size:5.4rem;line-height:1;margin-bottom:14px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.10));animation:pop .4s ease;
  height:5.4rem;display:flex;align-items:center;justify-content:center}
@keyframes pop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}

/* ── bilde i stedet for emoji ─────────────────────────────
   Se js/bilder.js. Bildet skal fylle nøyaktig samme boks som tegnet
   gjorde, ellers hopper kortet når et bilde mangler og appen faller
   tilbake til emojien.

   Derfor er hver bildeboks nå en fast kvadratisk rute på størrelse med
   skriftstørrelsen, med midtstilt innhold. Emoji og bilde får da samme
   boks på alle enheter — noe emojien aldri hadde, siden boksen fulgte
   operativsystemets egen emojiskrift. Bildet skaleres med contain:
   aldri strukket, aldri beskåret. De elleve tallordene som er satt
   sammen av flere sifre (1️⃣1️⃣, 1️⃣0️⃣0️⃣0️⃣) er breiere enn de er høye
   og får luft over og under i stedet for å sprenge kortet, slik de
   gjorde som emoji. */
.kortbilde{height:100%;width:auto;max-width:100%;object-fit:contain;display:block;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.card-word{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.9rem;font-weight:800;
  color:var(--t1);text-align:center;line-height:1.15}
.card-sub{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.4rem;font-weight:700;
  color:var(--t4);text-align:center;margin-top:8px}
.card-hint{font-size:.78rem;color:var(--muted);margin-top:10px;font-weight:800;text-align:center}
.card-label{font-size:.95rem;color:var(--muted);font-weight:800;margin-bottom:8px}
.sent-text{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.4rem;font-weight:800;
  text-align:center;line-height:1.25}
.nav-row{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.nav-btn{background:var(--surface);border:3px solid var(--accent4);color:var(--t4);
  font-weight:900;font-size:1.4rem;width:52px;height:52px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .18s;box-shadow:var(--shadow-sm)}
.nav-btn:hover:not(:disabled){background:var(--t4);color:var(--paa-aksent);transform:scale(1.08)}
.nav-btn:disabled{opacity:.3;cursor:not-allowed}
.counter{font-weight:900;font-size:.95rem;min-width:70px;text-align:center}
.badge-row{display:flex;gap:10px;margin-top:2px}
.badge{font-size:.78rem;font-weight:900;padding:4px 14px;border-radius:var(--r-pill)}
.badge.b-learn{background:var(--gronn-bg);color:var(--gronn-tekst-sterk)}
.badge.b-total{background:var(--gul-bg);color:var(--bla-tekst-sterk)}
.shuffle-btn{background:var(--surface);border:3px solid var(--accent5);color:var(--t5);
  font-weight:900;font-size:.85rem;padding:8px 20px;border-radius:var(--r-pill);
  cursor:pointer;transition:all .18s;margin-top:12px}
.shuffle-btn:hover{background:var(--t5);color:var(--paa-aksent);transform:translateY(-2px)}
.sound-btn{background:var(--accent2);border:none;border-radius:50%;width:48px;height:48px;
  font-size:1.35rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);transition:all .18s}
.sound-btn:hover{transform:scale(1.12)}
.sound-btn:disabled{opacity:.55;cursor:wait}
body:not(.has-audio) .sound-btn{display:none}

/* ── quiz ────────────────────────────────── */
.quiz-prompt{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.2rem;font-weight:800;
  color:var(--muted);margin-bottom:14px;text-align:center}
.quiz-big-emoji{font-size:6.6rem;margin-bottom:12px;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.12));animation:pop .4s ease;
  height:6.6rem;line-height:1;display:flex;align-items:center;justify-content:center}
.quiz-big-text{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.55rem;font-weight:800;
  color:var(--t1);margin-bottom:14px;text-align:center;padding:0 8px;
  line-height:1.25;animation:pop .4s ease}
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-bottom:16px}
.quiz-opts.one-col{grid-template-columns:1fr}
.quiz-opt{background:var(--surface);border:3px solid var(--line);border-radius:18px;padding:13px 10px;
  font-weight:800;font-size:.95rem;cursor:pointer;transition:all .18s;
  box-shadow:var(--shadow-sm);text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:4px}
.quiz-opts.one-col .quiz-opt{text-align:left;align-items:flex-start;padding:12px 16px}
.quiz-opt:hover:not(:disabled){transform:translateY(-2px);border-color:var(--t4)}
/* --gronn-tekst-sterk, ikke --gronn-tekst: blekket står PÅ den grønne
   tonen, ikke på hvitt. Se paletten øverst. Målt 3,92:1 før — og det
   er alternativet barnet nettopp svarte riktig på. */
.quiz-opt.correct{border-color:var(--t3);background:var(--gronn-bg);color:var(--gronn-tekst-sterk);
  animation:pulse .35s ease}
@keyframes pulse{50%{transform:scale(1.04)}}
.quiz-opt.wrong{border-color:var(--t1);background:var(--rod-bg);color:var(--rod-tekst)}
.quiz-opt:disabled{cursor:not-allowed}
.opt-emoji{font-size:2.3rem;height:2.3rem;line-height:1;
  display:flex;align-items:center;justify-content:center}
.quiz-fb{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.25rem;font-weight:800;
  min-height:38px;text-align:center;margin-bottom:6px}
.quiz-fb.ok{color:var(--t3)}
.quiz-fb.fail{color:var(--t1)}
.quiz-score{font-weight:900;font-size:.9rem;color:var(--muted);margin-bottom:10px}
.quiz-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.q-next{background:var(--t4);color:var(--paa-aksent);border:none;border-radius:var(--r-pill);
  font-weight:900;font-size:.95rem;padding:10px 30px;cursor:pointer;transition:all .18s;
  box-shadow:0 4px 12px rgba(17,138,178,.3);display:none}
.q-next:hover{transform:translateY(-2px)}
.q-back{background:var(--surface);border:3px solid var(--muted);color:var(--muted);
  border-radius:var(--r-pill);font-weight:900;font-size:.95rem;padding:10px 20px;
  cursor:pointer;transition:all .18s;display:none}
.q-back:hover{border-color:var(--t4);color:var(--t4);transform:translateY(-2px)}

/* ── «en runde til?» ──────────────────────
   De to knappene har MED VILJE nøyaktig samme regel. Ingen farge, ingen
   ramme, ingen skygge og ingen størrelse skiller «ja» fra «nei». Å slutte
   skal være like lett å trykke på som å fortsette — se merTilbud() i
   js/app.js for hele begrunnelsen. Endrer du den ene, endre den andre.
   Ingen animasjon som drar øyet hit heller: spørsmålet skal kunne
   overses. */
.mer-tilbud{width:100%;max-width:420px;margin:14px auto 0;padding:12px 16px;
  background:var(--surface);border:2px solid var(--accent5);border-radius:18px;text-align:center}
.mer-sp{font-family:'Baloo 2','Nunito',sans-serif;font-size:1rem;font-weight:800;color:var(--t5);
  margin-bottom:10px}
.mer-knapper{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
/* 12px topp/bunn, ikke 10: 18 + 24 + 6 px ramme gir 48 px høyde, over
   kravet på 44 med margin. Kontrasten er 4,80:1 (#b35a00 på hvitt), og
   den er den SAMME på begge knappene — se npm run tilgang. */
.mer-knapp{background:var(--surface);border:3px solid var(--t5);color:var(--t5);
  border-radius:var(--r-pill);font-family:inherit;font-weight:900;font-size:.95rem;
  padding:12px 22px;min-width:44px;cursor:pointer;transition:all .18s;flex:1 1 auto;max-width:200px}
.mer-knapp:hover{background:var(--t5);color:var(--paa-aksent);transform:translateY(-2px)}

/* ── sentence teaser banner ──────────────── */
.teaser{width:100%;max-width:420px;margin-bottom:14px;background:linear-gradient(135deg,var(--gul-bg),var(--rod-bg));
  border:2px solid var(--accent2);border-radius:18px;padding:14px 20px;text-align:center}
.teaser-title{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.05rem;font-weight:800;color:var(--t5)}
.teaser-sub{font-weight:800;color:var(--muted);font-size:.82rem;margin-top:3px}

/* ── search ──────────────────────────────── */
.search-wrap{width:100%;position:relative;margin-bottom:16px}
#searchInput{width:100%;padding:14px 46px 14px 18px;font-family:'Nunito',sans-serif;
  font-size:1rem;font-weight:800;border:3px solid var(--accent2);border-radius:var(--r-md);
  outline:none;box-shadow:var(--shadow-sm);background:var(--surface)}
#searchInput:focus{border-color:var(--t1)}
/* Var en <span> med en click-lytter: usynlig for tastatur og for
   skjermleser. Nå en ekte knapp, og da må den også ha en trykkflate et
   barn treffer — 44×44 med gjennomsiktig bakgrunn, så den ser ut
   nøyaktig som før. */
#searchClear{display:none;position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;align-items:center;justify-content:center;background:none;border:none;
  font-size:1.25rem;cursor:pointer;color:var(--muted);font-weight:900;padding:0}
.result-list{width:100%;display:flex;flex-direction:column;gap:10px}
/* Var et <div> med click. Nå en <button>, og da må skriften,
   tekstretningen og bredden settes tilbake til det korset så ut som. */
.result-card{display:flex;align-items:center;gap:14px;background:var(--surface);border-radius:var(--r-md);
  padding:12px 16px;box-shadow:var(--shadow-sm);cursor:pointer;transition:all .15s;
  border:2px solid transparent;width:100%;text-align:left;
  font-family:'Nunito',sans-serif;font-size:1rem;color:var(--text)}
.result-card:hover{border-color:var(--accent2);transform:translateY(-1px)}
.result-emoji{font-size:2.3rem;flex-shrink:0;width:2.3rem;height:2.3rem;line-height:1;
  display:flex;align-items:center;justify-content:center}
.result-main{flex:1;min-width:0}
.result-alb{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.15rem;font-weight:800;
  color:var(--t1);line-height:1.2}
.result-nor{font-size:.88rem;font-weight:800;color:var(--muted)}
.result-cat{font-size:.78rem;color:var(--muted);font-weight:800;text-align:right;flex-shrink:0}
.search-head{font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;color:var(--muted);
  font-size:.95rem;margin:10px 0 2px;width:100%}
.search-empty{display:none;text-align:center;padding:40px 20px;color:var(--muted);font-weight:800}
.search-empty .big{font-size:3rem;margin-bottom:8px}

/* ── modals & popups ─────────────────────── */
.overlay{display:none;position:fixed;inset:0;z-index:10000;background:var(--slor);
  align-items:center;justify-content:center;padding:20px}
.overlay.show{display:flex}
.modal-box{background:var(--surface);border-radius:32px;padding:34px 34px 28px;text-align:center;
  box-shadow:0 16px 48px rgba(0,0,0,.25);max-width:340px;width:100%;animation:pop .45s ease}
.modal-emoji{font-size:5.2rem;margin-bottom:10px;height:5.2rem;line-height:1;
  display:flex;align-items:center;justify-content:center}
.modal-title{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.9rem;font-weight:800;margin-bottom:4px}
.modal-sub{font-size:.98rem;color:var(--muted);font-weight:800;margin-bottom:8px}
.modal-note{font-size:.9rem;color:var(--t4);font-weight:900;margin-bottom:18px;min-height:1em}
.modal-btn{background:var(--t1);color:var(--paa-aksent);border:none;border-radius:var(--r-pill);
  font-weight:900;font-size:1rem;padding:10px 30px;cursor:pointer;transition:all .18s}
.modal-btn:hover{transform:translateY(-2px)}

/* ── lock screen ─────────────────────────── */
#lockScreen{position:fixed;inset:0;z-index:9999;background:var(--bg);
  background-image:radial-gradient(circle at 10% 20%,var(--glans1) 0%,transparent 40%),
  radial-gradient(circle at 90% 80%,var(--glans2) 0%,transparent 40%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px}
#lockScreen h2{font-family:'Baloo 2','Nunito',sans-serif;font-size:2.3rem;color:var(--t1);
  text-shadow:3px 3px 0 var(--accent2)}
#lockScreen p{color:var(--muted);font-weight:800}
#pwInput{font-size:1.25rem;font-weight:800;padding:12px 24px;border:3px solid var(--accent2);
  border-radius:var(--r-md);outline:none;text-align:center;width:230px;background:var(--surface);
  box-shadow:var(--shadow-sm);letter-spacing:3px;font-family:'Nunito',sans-serif}
#pwInput:focus{border-color:var(--t1)}
#pwBtn{background:var(--t1);color:var(--paa-aksent);border:none;border-radius:var(--r-pill);
  font-weight:900;font-size:1.05rem;padding:12px 36px;cursor:pointer;
  box-shadow:0 5px 14px rgba(255,107,107,.35);transition:all .18s}
#pwBtn:hover{transform:translateY(-2px)}
#pwError{color:var(--t1);font-weight:900;font-size:.92rem;min-height:24px}

/* ── footer ──────────────────────────────── */
.foot{margin-top:44px;text-align:center}
/* Var var(--line-sterk) = 1,57:1. Den skal være diskret, ikke usynlig — et barn
   som leter etter den, må kunne lese den. */
.reset-btn{min-height:44px;background:none;border:none;color:var(--muted);font-weight:800;font-size:.8rem;
  cursor:pointer;text-decoration:underline;padding:10px 14px}
.reset-btn.arm{color:var(--t1)}
#appContent{display:none;width:100%;flex-direction:column;align-items:center}
.confetti{position:fixed;top:0;left:0;pointer-events:none;z-index:11000}
/* ── gamification ─────────────────────── */
.toolbar{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;align-items:center;margin-bottom:16px;max-width:520px}
.chip.prof{cursor:pointer;padding-left:10px}
.chip.prof:hover{transform:translateY(-1px)}
.chip .avmoji{font-size:1.05rem}
.chip.lvl{background:var(--bla-bg);color:var(--t4);flex-direction:column;gap:2px;padding:5px 14px;align-items:center;cursor:pointer}
.lvl-top{display:flex;gap:6px;align-items:center;font-size:.78rem}
.xp-mini{width:74px;height:6px;background:var(--spor);border-radius:99px;overflow:hidden}
.xp-mini>div{height:100%;background:linear-gradient(90deg,var(--accent3),var(--accent4));border-radius:99px;transition:width .5s ease}
.chip.streak{background:var(--oransje-bg);color:var(--oransje-tekst)}
.chip.goal{background:var(--lilla-bg);color:var(--lilla-tekst)}
.chip.goal.done{background:var(--gronn-bg);color:var(--gronn-tekst-sterk)}
.icon-btn{background:var(--surface);border:none;border-radius:50%;width:38px;height:38px;font-size:1.05rem;cursor:pointer;box-shadow:var(--shadow-sm);transition:all .15s;display:flex;align-items:center;justify-content:center}
.icon-btn:hover{transform:scale(1.1)}
.xp-float{position:fixed;z-index:12000;font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;color:var(--t3);font-size:1.15rem;pointer-events:none;animation:floatUp 1.1s ease forwards;text-shadow:0 2px 6px rgba(255,255,255,.9)}
@keyframes floatUp{0%{opacity:0;transform:translateY(6px) scale(.7)}20%{opacity:1;transform:translateY(0) scale(1.1)}100%{opacity:0;transform:translateY(-46px) scale(1)}}
#toast{position:fixed;top:14px;left:50%;transform:translateX(-50%) translateY(-80px);z-index:12500;background:var(--surface);border-radius:var(--r-pill);padding:10px 22px;font-weight:900;font-size:.92rem;box-shadow:0 10px 30px rgba(0,0,0,.18);transition:transform .4s cubic-bezier(.4,1.6,.5,1);border:3px solid var(--accent2)}
#toast.show{transform:translateX(-50%) translateY(0)}
#profileScreen{position:fixed;inset:0;z-index:9998;background:var(--bg);background-image:radial-gradient(circle at 12% 18%,var(--glans1) 0%,transparent 40%),radial-gradient(circle at 88% 82%,var(--glans2) 0%,transparent 40%);display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:22px;overflow:auto}
#profileScreen.show{display:flex}
#profileScreen h2{font-family:'Baloo 2','Nunito',sans-serif;font-size:2rem;color:var(--t1);text-shadow:3px 3px 0 var(--accent2)}
.mascot-line{font-weight:800;color:var(--muted);text-align:center;max-width:320px}
.prof-list{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px}
.prof-card{display:flex;align-items:center;gap:12px;background:var(--surface);border:3px solid transparent;border-radius:18px;padding:12px 16px;cursor:pointer;box-shadow:var(--shadow-sm);transition:all .15s;font-weight:800;width:100%;text-align:left}
.prof-card:hover{transform:translateY(-2px);border-color:var(--accent2)}
.prof-av{font-size:1.9rem}
.prof-meta{font-size:.78rem;color:var(--muted);font-weight:800}
.newprof{background:var(--surface);border-radius:18px;padding:16px;box-shadow:var(--shadow-sm);width:100%;max-width:340px;display:flex;flex-direction:column;gap:10px}
.newprof h3{font-family:'Baloo 2','Nunito',sans-serif;color:var(--t4);font-size:1.05rem}
#npName{padding:10px 14px;border:3px solid var(--accent2);border-radius:12px;font-family:'Nunito',sans-serif;font-weight:800;font-size:1rem;outline:none}
#npName:focus{border-color:var(--t1)}
.av-grid{display:flex;gap:6px;flex-wrap:wrap}
.av-opt{font-size:1.5rem;background:var(--surface-2);border:3px solid transparent;border-radius:12px;width:46px;height:46px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s}
.av-opt.sel{border-color:var(--t1);background:var(--feil-bg);transform:scale(1.08)}
#npCreate{background:var(--t3);color:var(--paa-aksent);border:none;border-radius:var(--r-pill);font-weight:900;font-size:.95rem;padding:10px;cursor:pointer;transition:all .15s}
#npCreate:hover{transform:translateY(-2px)}
.col-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:10px 0 4px}
.col-item{aspect-ratio:1;background:var(--surface-2);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.5rem;position:relative;border:2px solid var(--line)}
.col-item.earned{background:var(--gul-bg-svak);border-color:var(--accent2);box-shadow:0 3px 8px rgba(255,209,102,.35)}
.col-item.dim{filter:grayscale(1);opacity:.4}
.col-item .cm{position:absolute;bottom:2px;right:3px;font-size:.7rem}
.col-head{font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;color:var(--t4);font-size:1rem;text-align:left;margin-top:8px}
.ach-item{display:flex;gap:10px;align-items:center;background:var(--surface-2);border-radius:12px;padding:8px 12px;font-weight:800;font-size:.82rem;text-align:left;border:2px solid var(--line)}
.ach-item.earned{background:var(--gronn-bg-svak);border-color:var(--t3)}
.ach-item .ai{font-size:1.4rem}
/* XP-tallet i tilbakemeldingen. Sto som color:#00875a rett i en
   style-attributt i js/app.js — altså utenfor rekkevidde for enhver
   palett, og 3,59:1 på den mørke flaten. */
.xp-tag{color:var(--gronn-tekst);font-weight:900}
.combo-tag{color:var(--t5);font-weight:900}
/* --accent3 og ikke --t3 sto her, og .q-next skriver --paa-aksent oppå:
   hvitt på #06d6a0 er 1,79:1. Ingen test fanget det, fordi «Neste
   kategori 🚀» først tegnes etter en runde med 70 % eller mer — og dit
   kom revisjonen aldri. Den mørknede varianten gir 4,52:1, og skjermen
   er nå med i tests/rok-tilgjengelighet.mjs. */
.q-alt{background:var(--t3);box-shadow:0 4px 12px rgba(6,214,160,.3)}
.big-mascot{font-size:4.6rem;animation:pop .5s ease}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── fase 1: repetisjon, lytting, staving ───────── */
.srs-banner{width:100%;max-width:460px;margin:-4px auto 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(135deg,var(--gronn-bg),var(--bla-bg));border:3px solid var(--accent3);border-radius:18px;padding:12px 16px;box-shadow:var(--shadow-sm)}
.srs-t{font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;color:var(--gronn-tekst-sterk);font-size:1.02rem}
.srs-s{font-weight:800;color:var(--muted);font-size:.8rem}
#srsStart{background:var(--t3);color:var(--paa-aksent);border:none;border-radius:var(--r-pill);font-weight:900;font-size:.92rem;padding:10px 22px;cursor:pointer;box-shadow:0 4px 12px rgba(6,214,160,.35);transition:all .15s;flex-shrink:0}
#srsStart:hover{transform:translateY(-2px)}
.listen-big{cursor:pointer;animation:pulseBig 1.6s ease infinite}
@keyframes pulseBig{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.sp-head{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:14px}
.sp-slots{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-bottom:16px;min-height:52px}
.sp-slot{width:46px;height:50px;border:3px dashed var(--slot-ramme);border-radius:12px;background:var(--slot-bg);font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;font-size:1.25rem;color:var(--t1);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s}
.sp-slot.filled{border-style:solid;border-color:var(--accent2);background:var(--surface)}
.sp-slot.good{border-color:var(--t3);background:var(--gronn-bg);color:var(--gronn-tekst-sterk)}
.sp-slot.bad{border-color:var(--t1);background:var(--rod-bg);animation:shakeX .4s ease}
@keyframes shakeX{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.sp-tiles{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:14px;min-height:52px}
.sp-tile{min-width:46px;height:50px;padding:0 10px;background:var(--accent2);border:none;border-radius:12px;font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;font-size:1.25rem;color:var(--paa-gul);cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.12);transition:all .12s}
.sp-tile:hover:not(:disabled){transform:translateY(-3px)}
.sp-tile:disabled{opacity:.25;cursor:default;box-shadow:none}

/* ── skysynk, autoknapp og versjon ─────────── */
.chip.sync{padding:6px 12px;font-size:.95rem;cursor:default}
.chip.sync.ok{background:var(--gronn-bg);color:var(--gronn-tekst-sterk)}
.chip.sync.busy{background:var(--bla-bg);color:var(--t4);animation:syncpulse 1.1s ease-in-out infinite}
.chip.sync.err{background:var(--feil-bg);color:var(--feil-tekst)}
@keyframes syncpulse{0%,100%{opacity:1}50%{opacity:.45}}
.icon-btn.off{opacity:.35;filter:grayscale(1)}
.ver-tag{margin-top:14px;font-size:.72rem;font-weight:800;color:var(--muted);text-align:center;letter-spacing:.5px}
/* Navngivelsen Twemoji-lisensen krever. Liten, men synlig — den kan ikke
   gjemmes bak en meny som ingen åpner. */
.kreditt{margin-top:16px;font-size:.7rem;font-weight:700;color:var(--muted);
  text-align:center;line-height:1.5;max-width:340px;margin-left:auto;margin-right:auto}
.kreditt a{color:var(--muted)}

/* ═══ v3: medaljestatus ═══ */
.medal-status{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;
  margin:-6px 0 14px;max-width:680px}
.ms-chip{font-size:.74rem;font-weight:900;padding:4px 12px;border-radius:var(--r-pill);
  background:var(--surface);color:var(--muted);border:2px solid var(--line)}
/* --gronn-tekst er grønn PÅ HVITT (4,55:1). På den grønne tonen er
   den 3,92:1, altså under kravet — og dette er merkelappen som sier at
   barnet har klart en quizretning. Den sterke varianten gir 5,60:1.
   Funnet da «runden ferdig» ble lagt til i npm run tilgang; skjermen
   fantes i to år uten at noen målte den. */
.ms-chip.ok{background:var(--gronn-bg);color:var(--gronn-tekst-sterk);border-color:var(--gronn-ramme)}
.ms-medal{font-size:.8rem;font-weight:900;padding:4px 12px;border-radius:var(--r-pill);
  background:var(--gul-bg);color:var(--gul-tekst)}
.ms-hint{flex-basis:100%;text-align:center;font-size:.8rem;font-weight:800;color:var(--muted);line-height:1.35}

/* ═══ v3: profilskjermens bunnknapper ═══ */
.prof-foot{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.pf-btn{background:var(--surface);border:3px solid var(--accent5);color:var(--t5);
  border-radius:var(--r-pill);padding:9px 20px;font-family:'Nunito',sans-serif;
  font-weight:900;font-size:.9rem;cursor:pointer;transition:.15s}
.pf-btn:hover{background:var(--t5);color:var(--paa-aksent);transform:translateY(-2px)}
.pf-btn.ghost{border-color:var(--ghost-ramme);color:var(--muted)}
.pf-btn.ghost:hover{background:var(--ghost-fyll);border-color:var(--ghost-fyll);color:var(--paa-aksent)}

/* ═══ SPRÅKVELGER ═══
   Står på startskjermen og i steg 1 av førstegangsturen. Språkene med
   sitt eget navn — «Deutsch», ikke «Tysk» — så en forelder gjenkjenner
   sitt eget uansett hva skjermen står på. Er det bare ett språk, tegner
   js/app.js ingenting.

   Trykkflata er 44px høy. Det er ikke pynt: tests/rok-tilgjengelighet.mjs
   måler den, og en voksen tommel på en telefon i en bil trenger den. */
.sprakvelger{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  margin:14px auto 0;max-width:420px}
.sprak-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  background:var(--surface);border:3px solid var(--ghost-ramme);color:var(--muted);
  border-radius:var(--r-pill);padding:6px 14px;font-family:'Nunito',sans-serif;
  font-weight:900;font-size:.85rem;cursor:pointer;transition:.15s;line-height:1.15}
/* --t4 og ikke --accent4. Den lysere blåfargen gir 3,96:1 mot hvitt, og
   språknavnet står i 13,6 px — altså under kravet på 4,5:1. Det så ingen
   før pakka fikk mer enn ett landsspråk, for med ett språk tegnes hele
   velgeren aldri. --t4 er den samme blåfargen gjort mørk nok (5,6:1), og
   brukes allerede til blå tekst ellers i appen.
   Målt av tests/rok-tilgjengelighet.mjs. */
.sprak-btn:hover{border-color:var(--t4);color:var(--t4)}
.sprak-btn.valgt{border-color:var(--t4);background:var(--t4);color:var(--paa-aksent)}
.sprak-flagg{font-size:1.05rem;line-height:1}
/* Navnet får bryte. Tysk og norsk er korte, men et språknavn kan være
   langt, og en avkuttet språkvelger er den ene knappen som MÅ leses. */
.sprak-navn{white-space:normal;text-align:left}
/* I førstegangsturen står velgeren under «Hopp over», litt luftigere. */
.onb-sprak{margin-top:16px;padding-top:14px;border-top:2px dashed var(--line-varm)}

/* ═══ v3: PIN ═══ */
.pin-box{max-width:300px}
.pin-dots{display:flex;gap:14px;justify-content:center;margin:14px 0 4px}
.pin-dot{width:16px;height:16px;border-radius:50%;border:3px solid var(--accent4);background:var(--surface);transition:.12s}
.pin-dot.fill{background:var(--accent4);transform:scale(1.15)}
.pin-msg{min-height:20px;font-weight:900;font-size:.82rem;color:var(--t1);margin-bottom:4px}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 14px}
.pin-key{background:var(--surface);border:3px solid var(--accent4);color:var(--t4);border-radius:18px;
  font-family:'Baloo 2','Nunito',sans-serif;font-size:1.5rem;font-weight:800;padding:12px 0;cursor:pointer;transition:.12s}
.pin-key:hover{background:var(--t4);color:var(--paa-aksent)}
.pin-key:active{transform:scale(.93)}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.modal-box.shake{animation:shake .4s}
.admin-pw{width:100%;padding:12px 16px;font-family:'Nunito',sans-serif;font-weight:800;
  font-size:1rem;border:3px solid var(--line);border-radius:14px;outline:none;text-align:center}
.admin-pw:focus{border-color:var(--t4)}
.modal-btn.alt{background:var(--surface);color:var(--muted);border:3px solid var(--line)}
.modal-btn.alt:hover{border-color:var(--t4);color:var(--t4)}
/* Ser ut som .alt, men BETYR noe annet. Escape og tilbakeknappen på
   Android leter etter den første .modal-btn.alt i boksen når de ikke
   finner en navngitt lukkeknapp — se LUKKEKNAPPER i
   js/tilgjengelighet.js og tilbakeSteg() i js/native.js. En boks med
   flere .alt-knapper har derfor ikke én opplagt vei ut. Sekundære
   handlinger som ikke lukker noe, bruker denne. */
.modal-btn.sekundar{background:var(--surface);color:var(--muted);border:3px solid var(--line)}
.modal-btn.sekundar:hover{border-color:var(--t4);color:var(--t4)}

/* ═══ v3: adminpanel ═══ */
.ap-row{background:var(--surface-3);border:2px solid var(--line-varm);border-radius:16px;padding:10px 12px;margin-top:10px}
.ap-head{display:flex;align-items:center;gap:10px;font-weight:900}
.ap-btns{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.ap-btn{background:var(--surface);border:2px solid var(--accent4);color:var(--t4);border-radius:var(--r-pill);
  padding:6px 12px;font-family:'Nunito',sans-serif;font-weight:900;font-size:.75rem;cursor:pointer;transition:.12s}
.ap-btn:hover{background:var(--t4);color:var(--paa-aksent)}
.ap-btn.warn{border-color:var(--t1);color:var(--t1)}
.ap-btn.warn:hover,.ap-btn.danger{background:var(--t1);border-color:var(--t1);color:var(--paa-aksent)}

/* ═══ v3: scoretavle ═══ */
.board-row{display:flex;align-items:center;gap:10px;background:var(--surface-3);border:2px solid var(--line-varm);
  border-radius:16px;padding:9px 12px;margin-top:8px;font-weight:900}
.board-row.me{border-color:var(--t3);background:var(--gronn-bg-svak)}
.board-rank{min-width:32px;text-align:center;font-size:1.05rem}
.board-mid{flex:1}
.board-xp{font-size:.72rem;color:var(--muted);white-space:nowrap}

/* ═══ v3: innstillingsrad ═══ */
.settings-row{display:flex;align-items:center;gap:8px;justify-content:center;font-weight:900;
  font-size:.82rem;color:var(--muted);margin-bottom:10px;cursor:pointer}
.settings-row input{width:18px;height:18px;accent-color:var(--t3);cursor:pointer}

/* ═══ v3: abeceda ═══ */
.abc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:9px;width:100%;margin-bottom:18px}
.abc-tile{background:var(--surface);border:3px solid var(--accent2);color:var(--gul-tekst-sterk);border-radius:18px;
  font-family:'Baloo 2','Nunito',sans-serif;font-size:1.6rem;font-weight:800;padding:12px 0;cursor:pointer;transition:.13s}
.abc-tile:hover{transform:translateY(-2px) scale(1.04)}
.abc-tile.sel{background:var(--accent2);color:var(--paa-gul);transform:scale(1.06);
  box-shadow:0 6px 16px rgba(255,183,3,.35)}
.abc-card{flex-direction:column;align-items:center;gap:8px;background:var(--surface);border:4px solid var(--accent2);
  border-radius:28px;padding:22px 28px;box-shadow:0 10px 26px rgba(0,0,0,.08);max-width:340px;width:100%}
.abc-big{font-family:'Baloo 2','Nunito',sans-serif;font-size:3.6rem;font-weight:800;color:var(--t4);line-height:1}
.abc-ex{background:var(--gul-bg-svak);border:3px solid var(--accent2);border-radius:18px;padding:10px 18px;
  font-family:'Baloo 2','Nunito',sans-serif;font-size:1.35rem;font-weight:800;color:var(--gul-tekst-sterk);cursor:pointer;transition:.13s}
.abc-ex:hover{transform:translateY(-2px)}
.abc-ex-nor{font-weight:800;font-size:.85rem;color:var(--muted)}
/* Bokstavkortet blander bilde og tekst på samme linje: «🐻 ariu».
   Derfor en liten innebygd rute i stedet for en egen blokk. */
.abc-ex-bilde{display:inline-flex;align-items:center;justify-content:center;
  width:1.6em;height:1.6em;vertical-align:-.45em;margin-right:.15em}

/* ═══ v3: varsel om at appfilene ikke er i takt ═══ */
.mismatch-bar{position:fixed;top:0;left:0;right:0;z-index:9999;background:var(--varsel-bg);color:var(--paa-gul);
  font-family:'Nunito',sans-serif;font-weight:900;font-size:.82rem;text-align:center;
  padding:10px 14px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.18)}

/* ═══ v3: stopp "dra ned for å oppdatere" ═══
   Uten dette laster nettleseren siden på nytt når et barn drar nedover
   øverst på skjermen, og spilleren blir kastet ut til profilvelgeren. */
html{overscroll-behavior:none;height:100%}
body{overscroll-behavior-y:contain}

/* ── Kosovomålet ──────────────────────── */
.chip.kos{background:var(--kos-bg);color:var(--feil-tekst);flex-direction:column;gap:2px;padding:5px 14px;align-items:center;cursor:pointer}
.chip.kos.done{background:var(--gronn-bg);color:var(--gronn-tekst-sterk)}
.kos-chip-top{font-size:.78rem;line-height:1}
.kos-chip-bar{width:74px;height:6px;background:var(--kos-spor);border-radius:99px;overflow:hidden}
.chip.kos.done .kos-chip-bar{background:var(--gronn-ramme)}
.kos-chip-bar>div{height:100%;width:0;background:linear-gradient(90deg,var(--kos-sterk),var(--kos-dyp));border-radius:99px;transition:width .5s ease}
.chip.kos.done .kos-chip-bar>div{background:linear-gradient(90deg,var(--accent3),var(--gronn-tekst))}
.kos-chip-days{font-size:.75rem;font-weight:800;opacity:.75;line-height:1}

#kosPanel{text-align:left;margin-top:12px;background:var(--kos-bg);border:3px solid var(--kos-ramme);
  border-radius:var(--r-md);padding:14px}
.kos-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.kos-title{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.1rem;color:var(--feil-tekst)}
.kos-days{font-size:.72rem;font-weight:900;color:var(--muted);white-space:nowrap}
.kos-total{margin:6px 0 8px}
.kos-num{font-family:'Baloo 2','Nunito',sans-serif;font-size:2rem;color:var(--feil-tekst);line-height:1}
.kos-of{font-size:.78rem;font-weight:800;color:var(--muted)}
.kos-track{position:relative;height:14px;background:var(--kos-spor);border-radius:99px;overflow:hidden}
.kos-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent1),var(--kos-sterk),var(--kos-dyp));
  border-radius:99px;transition:width .7s cubic-bezier(.3,1.3,.5,1)}
.kos-tick{position:absolute;top:0;width:2px;height:100%;background:rgba(255,255,255,.85)}
.kos-week{font-size:.75rem;font-weight:900;color:var(--gronn-tekst);margin-top:7px}

.kos-ladder{margin-top:11px;display:flex;flex-direction:column;gap:5px}
.kos-goal{display:flex;align-items:center;gap:9px;background:var(--surface);border:2px solid var(--line-varm);
  border-radius:12px;padding:6px 10px}
.kos-goal.done{background:var(--gronn-bg-svak);border-color:var(--gronn-ramme)}
.kos-goal.now{border-color:var(--t5);background:var(--oransje-bg-svak)}
.kos-g-emo{font-size:1.1rem;min-width:22px;text-align:center}
.kos-g-mid{flex:1;min-width:0}
.kos-g-t{font-size:.82rem;font-weight:900}
.kos-g-s{font-size:.78rem;font-weight:800;color:var(--muted)}

.kos-players{margin-top:11px;display:flex;flex-direction:column;gap:5px}
.kos-p{display:flex;align-items:center;gap:9px;background:var(--surface);border:2px solid var(--line-varm);
  border-radius:12px;padding:6px 10px}
.kos-p.me{border-color:var(--t3);background:var(--gronn-bg-svak)}
.kos-p-mid{flex:1;min-width:0}
.kos-p-n{font-size:.85rem;font-weight:900}
.kos-p-s{font-size:.76rem;font-weight:800;color:var(--muted)}
.kos-p-r{text-align:right;white-space:nowrap}
.kos-p-pts{font-family:'Baloo 2','Nunito',sans-serif;font-size:1rem;color:var(--feil-tekst)}
.kos-p-fl{font-size:.75rem;font-weight:900;color:var(--muted)}

#kpBox.kos-final{border-color:var(--kos-sterk);background:linear-gradient(180deg,var(--surface),var(--kos-bg))}

/* ── forklaring av opplåsing ───────────── */
.unlock-hint{width:100%;max-width:520px;display:flex;flex-wrap:wrap;gap:4px;
  justify-content:center;text-align:center;background:var(--oransje-bg-svak);border:2px dashed var(--oransje-ramme);
  border-radius:var(--r-md);padding:9px 12px;margin:0 0 12px}
/* Står på tonet bakgrunn, ikke hvit — trenger derfor litt mørkere enn --t5.
   Målt 4,48:1 med --t5, kravet er 4,5. */
.uh-t{flex-basis:100%;font-family:'Baloo 2','Nunito',sans-serif;font-size:.95rem;color:var(--oransje-tekst-sterk)}
.uh-s{flex-basis:100%;font-size:.82rem;font-weight:800;color:var(--muted);line-height:1.4}
.uh-s b{color:var(--t1)}
.tab.locked{opacity:1;cursor:help;background:var(--laast-bg);color:var(--laast-tekst);border-color:var(--laast-ramme)}

/* ── skystatus på profilvelgeren ───────── */
.sync-line{max-width:420px;margin:0 auto 10px;font-size:.74rem;font-weight:800;
  text-align:center;color:var(--muted);padding:7px 14px;border-radius:var(--r-pill);background:var(--surface)}
.sync-line.ok{color:var(--gronn-tekst-sterk);background:var(--gronn-bg)}
.sync-line.busy{color:var(--t4);background:var(--bla-bg)}
.sync-line.err{color:var(--feil-tekst);background:var(--feil-bg)}
.sync-line.off{color:var(--feil-tekst);background:var(--feil-bg)}
.kos-hidden{font-size:.78rem;font-weight:800;color:var(--muted);text-align:center;padding:6px 4px}
.tab.medal{border-color:var(--accent2)}
.tab.maxed{border-color:var(--gull);background:var(--gul-bg-svak)}
.ms-medal.max{background:var(--gul-bg);color:var(--gul-tekst)}
.col-item.maxed{outline:2px solid var(--gull);outline-offset:-2px}

/* Norsk merkelapp på bildealternativer der emojien er delt av flere ord.
   Se utydeligBilde() i js/app.js — uten denne blir spørsmålet en gjettelek
   om hva emojien skal forestille, ikke en språktest. */
.opt-nor{display:block;font-size:.85rem;font-weight:800;color:var(--muted);margin-top:3px;line-height:1.15}

/* ── Si det høyt ─────────────────────────────────────────────
   Produksjonsmodus uten mikrofon. Bildet bærer spørsmålet, så den som
   ikke leser ennå kan bruke den. Se js/app.js, seksjonen SI DET HØYT. */
.spk-card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:26px 20px;text-align:center;max-width:420px;margin:0 auto 16px;
  border:4px solid var(--accent3)}
.spk-emoji{font-size:5rem;line-height:1.1;height:5.5rem;
  display:flex;align-items:center;justify-content:center}
.spk-nor{font-size:1.5rem;font-weight:900;color:var(--text);margin-top:6px}
.spk-fasit{margin-top:14px;padding-top:14px;border-top:3px dashed var(--line)}
.spk-alb{font-family:'Baloo 2','Nunito',sans-serif;font-size:2rem;color:var(--t1);line-height:1.2}
.spk-reveal{display:block;margin:0 auto 14px;padding:14px 26px;border:none;
  border-radius:var(--r-pill);background:var(--accent3);color:var(--paa-gronn);
  font-family:'Nunito',sans-serif;font-weight:900;font-size:1rem;cursor:pointer;
  box-shadow:0 4px 14px rgba(6,214,160,.35)}
.spk-reveal:active{transform:translateY(2px)}
.spk-rate{max-width:460px;margin:0 auto 10px;text-align:center}
.spk-rate-q{font-weight:900;color:var(--text);margin-bottom:8px}
.spk-rate-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.spk-b{border:3px solid var(--line);background:var(--surface);border-radius:var(--r-pill);
  padding:12px 18px;font-family:'Nunito',sans-serif;font-weight:900;font-size:.95rem;
  cursor:pointer;color:var(--text);min-height:48px}
.spk-b.ja{border-color:var(--t3)}
.spk-b.nesten{border-color:var(--accent2)}
.spk-b.nei{border-color:var(--line-sterk)}
.spk-b:active{transform:translateY(2px)}
.spk-fair{font-size:.84rem;color:var(--muted);font-weight:700;margin-top:10px;line-height:1.4}

/* ── Dagens oppdrag ──────────────────────────────────────────
   Det eneste stedet språket forlater skjermen. Se js/oppdrag.js. */
.oppdrag{max-width:520px;width:100%;margin:0 auto 18px;background:var(--surface);
  border:4px solid var(--accent5);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:16px 18px;text-align:center}
.oppdrag.gjort{border-color:var(--t3);background:var(--gronn-bg-svak)}
.opp-topp{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.1rem;color:var(--t5);letter-spacing:.3px}
.oppdrag.gjort .opp-topp{color:var(--paa-gronn)}
.opp-tekst{font-weight:800;font-size:1.05rem;color:var(--text);margin:6px 0 10px;line-height:1.35}
.opp-alb{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.opp-lyd{margin:0}
.opp-nor{font-weight:800;color:var(--muted);font-size:.9rem}
.opp-knapp{border:none;border-radius:var(--r-pill);background:var(--t5);color:var(--paa-aksent);
  font-family:'Nunito',sans-serif;font-weight:900;font-size:1rem;padding:13px 24px;
  cursor:pointer;box-shadow:0 4px 14px rgba(247,127,0,.35);min-height:48px}
.opp-knapp:active{transform:translateY(2px)}
.opp-fot{font-size:.82rem;color:var(--muted);font-weight:700;margin-top:9px;line-height:1.35}


/* ── Tastaturfokus ───────────────────────────────────────────
   Før: outline:none på alle fire tekstfeltene, og ingen markering på
   knapper i det hele tatt. Den som navigerer med tastatur så ikke hvor
   den var. :focus-visible vises bare ved tastaturbruk. */
button:focus-visible,
input:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.quiz-opt:focus-visible,
.tab:focus-visible,
.sp-tile:focus-visible,
.sp-slot:focus-visible,
.pin-key:focus-visible,
.abc-tile:focus-visible,
.spk-b:focus-visible,
.opp-knapp:focus-visible{
  outline:4px solid var(--t4);
  outline-offset:3px;
  border-radius:6px;
}
/* tabindex="-1" er IKKE en kontroll. Dialogboksene får det slik at
   fokus kan flyttes inn i dem når de åpnes — se js/tilgjengelighet.js —
   men de kan ikke trykkes, og et fokusomriss rundt hele boksen sier
   ingenting annet enn «her er du». WCAG 2.4.7 handler om elementer som
   KAN betjenes; ringen skal peke på knappen, ikke på rammen rundt den. */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}

/* Tekstfeltene hadde outline:none. Fokus vises nå både med ramme og omriss. */
#searchInput:focus-visible,#npName:focus-visible,.admin-pw:focus-visible{
  outline:4px solid var(--t4); outline-offset:2px;
}


/* ── Trykkflater ─────────────────────────────────────────────
   Målt i tests/rok-tilgjengelighet.mjs: 55 knapper lå under 36 px høyde,
   de fleste på 35. Et barn med finger på en iPad treffer ikke presist.
   44 px er anbefalingen fra både Apple og WCAG. */
.group-btn,.mode-btn,.tab,.pf-btn,.ap-btn,.q-back,.q-next,.shuffle-btn,
.spk-b,.modal-btn,.abc-tile,.sp-tile,.sp-slot,.pin-key,.quiz-opt,#npCreate,#srsStart{
  min-height:44px;
}
.nav-btn,.sound-btn,.icon-btn{min-width:44px;min-height:44px}

/* Knappen som folder ut de låste kategoriene. 44 faner over åtte rader var
   det første barnet møtte — nå vises de åpne pluss noen å strekke seg etter. */
.tab.vis-mer{background:var(--surface);border-color:var(--t4);color:var(--t4);font-weight:900}
.tab.vis-mer:hover{background:var(--t4);color:var(--paa-aksent)}


/* ══════════════════════════════════════════════════════════════
   FØRSTEGANGSTUREN, FORELDREPORTEN OG FORELDREOMRÅDET
   Samme formspråk som resten: runde hjørner, høy kontrast, store
   trykkflater. Turen har ingen egen palett — den skal se ut som
   appen barnet er på vei inn i, ikke som en reklame foran den.
   ══════════════════════════════════════════════════════════════ */

/* Turen legger seg over startskjermen, men på appens egen bakgrunn i
   stedet for den svarte sløret. Det første et barn ser skal være lyst. */
.overlay.onb{background:var(--bg);
  background-image:
    radial-gradient(circle at 10% 15%,var(--glans1) 0%,transparent 40%),
    radial-gradient(circle at 90% 85%,var(--glans2) 0%,transparent 40%),
    radial-gradient(circle at 50% 50%,var(--glans3) 0%,transparent 60%);
  overflow-y:auto}
.modal-box.onb-box{max-width:380px;padding:26px 26px 22px;
  display:flex;flex-direction:column;align-items:center;gap:8px}
.onb-steg{font-size:.74rem;font-weight:900;color:var(--muted);letter-spacing:1px}
.onb-tittel{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.9rem;font-weight:800;
  color:var(--t1);line-height:1.15}
.onb-lovnad{font-size:1.02rem;font-weight:900;color:var(--text);line-height:1.4}
.onb-grunn{font-size:.95rem;font-weight:800;color:var(--muted);line-height:1.45}
/* --t3 er laget for tekst på HVIT. Målt mot den lyse grønne boksen gir
   den 4,18:1, mot kravet 4,5. Den mørkere varianten gir 5,60:1.
   Se tests/rok-tilgjengelighet.mjs. */
.onb-rolig{font-size:.88rem;font-weight:900;color:var(--gronn-tekst-sterk);line-height:1.4;
  background:var(--gronn-bg);border-radius:var(--r-md);padding:9px 14px}
.onb-hopp{background:none;border:none;color:var(--muted);font-family:'Nunito',sans-serif;
  font-weight:900;font-size:.88rem;text-decoration:underline;cursor:pointer;
  min-height:44px;padding:0 16px}
.onb-hopp:hover{color:var(--t4)}

/* Steg 3 · første seier */
.onb-ord{font-family:'Baloo 2','Nunito',sans-serif;font-size:2.4rem;font-weight:800;color:var(--t4)}
.onb-lyd{background:var(--surface);border:3px solid var(--accent4);color:var(--t4);
  border-radius:var(--r-pill);font-family:'Nunito',sans-serif;font-weight:900;
  font-size:.95rem;padding:9px 22px;cursor:pointer;min-height:44px}
.onb-lyd:hover{background:var(--t4);color:var(--paa-aksent)}
.onb-sporsmal{font-size:1rem;font-weight:900;color:var(--text);margin-top:4px}
.onb-valg{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:4px 0}
.onb-alt{background:var(--surface);border:4px solid var(--accent2);border-radius:24px;
  padding:12px;cursor:pointer;min-width:118px;min-height:118px;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
  box-shadow:var(--shadow-sm)}
.onb-alt:hover{transform:translateY(-3px)}
.onb-alt.riktig{border-color:var(--t3);background:var(--gronn-bg)}
.onb-alt.feil{border-color:var(--t1);background:var(--rod-bg);animation:shakeX .4s ease}
.onb-alt-bilde{font-size:3.4rem;width:76px;height:76px;display:flex;
  align-items:center;justify-content:center}
/* Emojien som står der til tegningen er lastet ned. Se bildeMedReserve()
   i js/velkomst.js: første besøk laster ned 15 MB i bakgrunnen, og da kan
   ett enkelt bilde bli stående i kø. */
.onb-alt-reserve{font-size:3.2rem;line-height:1}
.onb-fasit{font-size:.95rem;font-weight:900;color:var(--t3);min-height:1.2em}
.onb-ferdig-t{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.5rem;font-weight:800;color:var(--t3)}
.onb-ferdig-s{font-size:.92rem;font-weight:800;color:var(--muted);line-height:1.45}

/* Steg 2 · rammen rundt det eksisterende navnefeltet */
.onb-note{background:var(--bla-bg);border:3px solid var(--bla-ramme);border-radius:var(--r-md);
  padding:12px 14px;margin-bottom:14px;text-align:left}
.onb-note-t{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.25rem;font-weight:800;color:var(--t4)}
.onb-note-s{font-size:.86rem;font-weight:800;color:var(--muted);line-height:1.45;margin-top:2px}
.onb-note-p{font-size:.84rem;font-weight:900;color:var(--gronn-tekst-sterk);margin-top:6px}   /* 4,48:1 på var(--bla-bg) var for lite */

/* Slik virker det */
.modal-box.hjelp-box{max-width:420px;max-height:86vh;overflow:auto;text-align:left}
.modal-box.hjelp-box .modal-title{text-align:center}
.hjelp-p{font-size:.92rem;font-weight:800;color:var(--muted);line-height:1.55;margin:12px 0}
.modal-box.hjelp-box .modal-btn{display:block;margin:16px auto 0}

/* Foreldreporten */
.modal-box.port-box{max-width:340px}
.port-oppgave{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.9rem;font-weight:800;
  color:var(--t4);margin:10px 0}
.port-svar{font-size:1.3rem;font-weight:900;padding:12px 18px;border:3px solid var(--accent2);
  border-radius:var(--r-md);text-align:center;width:150px;background:var(--surface);
  font-family:'Nunito',sans-serif;color:var(--text);outline:none}
.port-svar:focus-visible{outline:4px solid var(--t4);outline-offset:2px}
.port-knapper{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}

/* Foreldreområdet */
.modal-box.foreldre-box{max-width:430px;max-height:86vh;overflow:auto;text-align:left}
.modal-box.foreldre-box .modal-title,
.modal-box.foreldre-box .modal-sub{text-align:center}
.fa-bolk-t{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.3rem;font-weight:800;
  color:var(--t4);margin:18px 0 6px}
.fa-liste{list-style:none;display:flex;flex-direction:column;gap:6px}
.fa-liste li{font-size:.9rem;font-weight:800;color:var(--muted);line-height:1.45;
  padding-left:22px;position:relative}
.fa-liste li::before{content:'✓';position:absolute;left:0;color:var(--t3);font-weight:900}
.fa-pris{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.5rem;font-weight:800;color:var(--t1);
  text-align:center;margin:18px 0 2px}
.fa-prove{font-size:.9rem;font-weight:900;color:var(--muted);text-align:center;margin-bottom:14px}
.fa-aktiv{font-size:1rem;font-weight:900;color:var(--gronn-tekst-sterk);background:var(--gronn-bg);
  border-radius:var(--r-md);padding:10px 14px;text-align:center;margin:18px 0 12px}
.modal-box.foreldre-box .modal-btn{display:block;margin:0 auto}
.fa-dev{font-size:.82rem;font-weight:900;color:var(--gul-tekst-sterk);background:var(--gul-bg);
  border-radius:var(--r-md);padding:9px 12px;margin-top:12px;line-height:1.4}
.fa-fremgang{font-size:.86rem;font-weight:800;color:var(--muted);line-height:1.5;
  margin-top:16px;border-top:2px solid var(--line);padding-top:14px}
.fa-rapport{margin:4px auto 6px !important}
/* «Kjøp er ikke slått på ennå». Står der knappen ellers ville stått,
   og skal se ut som en opplysning — ikke som en knapp som er i stykker. */
.fa-vent{font-size:.86rem;font-weight:800;color:var(--bla-tekst-sterk);background:var(--bla-bg);
  border-radius:var(--r-md);padding:10px 12px;margin-top:8px;line-height:1.45;text-align:center}
/* Temavelgeren. Tre knapper, ikke en av/på-bryter — se tegnTema() i
   js/velkomst.js. Formspråket er det samme som barnevelgeren i
   rapporten, slik at foreldreområdet holder seg til én knappeform. */
.fa-tema-s{font-size:.86rem;font-weight:800;color:var(--muted);line-height:1.45;margin-bottom:8px}
.fa-tema{display:flex;flex-wrap:wrap;gap:8px}
.fa-tema-kn{background:var(--surface);border:3px solid var(--accent4);color:var(--t4);
  border-radius:var(--r-pill);padding:9px 16px;min-height:44px;font-weight:900;
  font-family:'Nunito',sans-serif;font-size:.86rem;cursor:pointer;box-shadow:var(--shadow-sm)}
.fa-tema-kn.valgt{background:var(--t4);color:var(--paa-aksent)}

/* ═══════════ FREMGANGSRAPPORTEN ═══════════
   Samme visuelle språk som resten: varmt, rundt, høy kontrast. Ingen
   farge er skrevet ut med tall her — alt går gjennom variablene øverst
   i fila, slik at et mørkt tema arves uten at denne bolken røres. */
.modal-box.rapport-box{max-width:460px;max-height:86vh;overflow:auto;text-align:left}
.modal-box.rapport-box .modal-title,
.modal-box.rapport-box .modal-sub{text-align:center}
.rap-bolk{margin-top:18px;border-top:2px solid rgba(0,0,0,.07);padding-top:12px}
.rap-bolk:first-of-type{border-top:none}
.rap-bolk-t{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.25rem;font-weight:800;
  color:var(--t4);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.rap-bolk-e{font-size:1.1rem}
/* Det store tallet er svaret på «hva kan barnet mitt si». Det er ÉN
   opplysning, og den skal kunne leses på en armlengdes avstand.
   Ukesammendraget er en setning og får derfor sin egen, mindre grad —
   et sammendrag i overskriftsgrad tar plassen fra selve ordene. */
.rap-stor{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.45rem;font-weight:800;
  color:var(--t1);line-height:1.25;margin-bottom:4px}
.rap-sum{font-size:1rem;font-weight:900;color:var(--t1);line-height:1.4;margin-bottom:2px}
.rap-linje{font-size:.94rem;font-weight:800;color:var(--text);line-height:1.5;margin-bottom:4px}
.rap-linje.god{color:var(--t3)}
.rap-linje.varsel{color:var(--t5)}
.rap-periode{font-size:.84rem;font-weight:900;color:var(--muted);margin-bottom:6px}
/* «Ingenting å vise» skal være like lesbar som alt annet. En blek,
   halvgjennomsiktig tomtekst er nettopp den setningen en forelder
   trenger å lese når det ikke går bra. */
.rap-tom{font-size:.94rem;font-weight:800;color:var(--muted);line-height:1.5;
  background:rgba(0,0,0,.04);border-radius:var(--r-md);padding:10px 12px}
.rap-merknad{font-size:.8rem;font-weight:700;color:var(--muted);line-height:1.45;margin-top:8px}
.rap-ord{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
/* Ordkortene sto først på gult (var(--gul-bg)). Målt av npm run tilgang ga
   --t1 på det gule 4,38:1 mot kravet 4,5 — akkurat under, og nettopp på
   de ordene en forelder skal fotografere og sende videre. Rammen bærer
   nå det varme, teksten står på boksens egen bakgrunn, og fargen kommer
   fra variablene i stedet for en fast hex — da følger den et mørkt tema
   uten at denne regelen røres. */
.rap-ord li{background:transparent;border:2px solid var(--accent2);
  border-radius:var(--r-pill);padding:4px 12px;
  font-size:.86rem;font-weight:900;display:flex;gap:6px;align-items:baseline}
.rap-ord-a{color:var(--t1)}
.rap-ord-g{color:var(--muted);font-weight:800}
.rap-barn{margin-top:12px}
.rap-barn-t{font-size:.84rem;font-weight:900;color:var(--muted);margin-bottom:6px}
.rap-barn-rad{display:flex;flex-wrap:wrap;gap:8px}
.rap-barn-kn{background:var(--surface);border:3px solid var(--accent4);color:var(--t4);
  border-radius:var(--r-pill);padding:8px 16px;min-height:44px;font-weight:900;
  font-size:.86rem;cursor:pointer;display:flex;align-items:center;gap:8px;
  box-shadow:var(--shadow-sm)}
.rap-barn-kn.valgt{background:var(--t4);color:var(--paa-aksent)}
.rap-barn-av{font-size:1.1rem}
.uts-velg{width:100%;margin:10px 0 8px;padding:11px 12px;min-height:44px;
  border:3px solid var(--accent4);border-radius:var(--r-md);background:var(--surface);
  color:var(--text);font-family:'Nunito',sans-serif;font-weight:900;font-size:.9rem}
.uts-velg:focus-visible{outline:4px solid var(--t4);outline-offset:2px}
.uts-knapper{display:flex;flex-wrap:wrap;gap:8px}
.uts-kn{background:var(--surface);border:3px solid var(--accent3);color:var(--t3);
  border-radius:var(--r-pill);padding:10px 16px;min-height:44px;font-weight:900;
  font-size:.86rem;cursor:pointer;box-shadow:var(--shadow-sm)}
.uts-kn:hover{background:var(--t3);color:var(--paa-aksent)}

/* ═══════════ DINE DATA ═══════════
   Innsyn, eksport, sletting og de to personverntekstene. Samme
   formspråk som foreldreområdet og rapporten — dette er den samme
   voksne flaten, og en tredje visuell dialekt her ville sett ut som en
   annen app.

   INGEN FARGE SKREVET UT MED TALL. Alt går gjennom tokenene øverst i
   fila, slik at det mørke temaet arves uten at denne bolken røres, og
   slik at npm run tilgang måler noe som faktisk stemmer i begge tema. */
/* overflow-anchor:none: skjermen tegnes på nytt når serveren svarer, og
   Chromes rulleforankring flyttet da posisjonen selv. js/minedata.js tar
   vare på rullingen eksplisitt; de to skal ikke dra i hver sin retning. */
.modal-box.data-box,.modal-box.data-bekreft-box{
  max-width:460px;max-height:calc(86vh - var(--sa-topp) - var(--sa-bunn));
  overflow:auto;overflow-anchor:none;text-align:left}
.modal-box.data-box .modal-title,.modal-box.data-box .modal-sub,
.modal-box.data-bekreft-box .modal-title{text-align:center}
.modal-box.data-box .modal-btn,.modal-box.data-bekreft-box .modal-btn{display:block;margin:10px auto 0}
.modal-box.data-bekreft-box .port-knapper .modal-btn{margin:0}
.md-p{font-size:.92rem;font-weight:800;color:var(--text);line-height:1.55;margin:8px 0}
.md-merknad{font-size:.82rem;font-weight:700;color:var(--muted);line-height:1.45;margin-top:8px}
.md-tom{font-size:.92rem;font-weight:800;color:var(--muted);line-height:1.5;
  background:var(--surface-2);border-radius:var(--r-md);padding:10px 12px}
/* Statusruta er svaret på det forelderen kom hit for: har vi en konto
   eller ikke. Den grønne varianten er «ingen konto, ingenting har
   forlatt enheten» — den eneste tilstanden som fortjener en hake. */
.md-status{background:var(--bla-bg);border:3px solid var(--bla-ramme);
  border-radius:var(--r-md);padding:12px 14px;margin:12px 0}
.md-status.god{background:var(--gronn-bg);border-color:var(--gronn-ramme)}
.md-status-t{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.15rem;font-weight:800;
  color:var(--bla-tekst-sterk);margin-bottom:4px}
.md-status.god .md-status-t{color:var(--gronn-tekst-sterk)}
.md-status-p{font-size:.88rem;font-weight:800;color:var(--bla-tekst-sterk);
  line-height:1.5;margin-top:6px}
.md-status.god .md-status-p{color:var(--gronn-tekst-sterk)}
/* Den destruktive knappen. Rammen bærer betydningen, ikke fyllet: en
   flate i full rødt ser ut som en primærhandling, og «slett alt» skal
   se ut som noe man velger, ikke som noe man følger. */
/* --rod-tekst og --rod-bg er ETT par, og de må brukes sammen: --t1 er
   mørknet for å være lesbar på hvitt og gir bare 3,93:1 på den røde
   tonen. Målt av npm run tilgang, som fant nettopp det. */
.modal-btn.fare{background:var(--rod-bg);color:var(--rod-tekst);border:3px solid var(--accent1)}
.modal-btn.fare:hover{background:var(--t1);color:var(--paa-aksent)}
.modal-btn.fare:disabled{opacity:.5;cursor:not-allowed;transform:none}
.md-advarsel{font-size:.88rem;font-weight:900;color:var(--rod-tekst);background:var(--rod-bg);
  border-radius:var(--r-md);padding:10px 12px;margin:8px 0;line-height:1.45}
.md-ok{font-size:.9rem;font-weight:900;color:var(--gronn-tekst-sterk);background:var(--gronn-bg);
  border-radius:var(--r-md);padding:10px 12px;margin-top:10px;line-height:1.45}
.md-feil{font-size:.9rem;font-weight:900;color:var(--feil-tekst);background:var(--feil-bg);
  border-radius:var(--r-md);padding:10px 12px;margin-top:10px;line-height:1.45}
.md-svar:empty{display:none}
/* Negativ liste: «dette lagrer vi aldri», «dette blir borte». Haken i
   .fa-liste betyr «dette får du», og foran «alle barna på kontoen
   slettes» leser den feil vei. */
.fa-liste.md-kryss li::before{content:'✕';color:var(--rod-tekst)}
.md-liten{font-size:.82rem;padding:9px 16px}
/* Eksportfila på skjermen, for enheter der en nedlasting ikke fører
   noe sted. Den skal kunne MARKERES — hele poenget er at den kan limes
   inn et annet sted — så unntaket fra markeringssperren står her. */
.md-fil{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.72rem;
  line-height:1.45;color:var(--text);background:var(--surface-2);
  border:2px solid var(--line);border-radius:var(--r-md);padding:10px;
  margin-top:10px;max-height:40vh;overflow:auto;white-space:pre-wrap;word-break:break-word;
  -webkit-user-select:text;user-select:text}
.md-ord{width:100%;max-width:260px;display:block;margin:6px auto 0;text-transform:uppercase}
/* Barnas personvernkort: ett om gangen, stor emoji, kort tekst. Samme
   ro som førstegangsturen — det er den samme leseren. */
.modal-box.barnvern-box{max-width:400px;text-align:center}
.md-steg{font-size:.8rem;font-weight:900;color:var(--muted);letter-spacing:.5px;margin-bottom:6px}
.md-kort-e{font-size:3.4rem;line-height:1.1;margin:6px 0}
.md-kort-t{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.5rem;font-weight:800;color:var(--t4);margin-bottom:6px}
.md-kort-p{font-size:1rem;font-weight:800;color:var(--text);line-height:1.6;margin-bottom:10px}
.fa-data{margin:0 auto 6px !important}

/* ══════════════════════════════════════════════════════════════════
   MØRK MODUS · de fem stedene fargene alene ikke holder

   Alt annet arves fra tokenene øverst. Dette er unntakene, og hvert
   av dem er målt eller sett på et skjermbilde — ikke resonnert fram.
   ══════════════════════════════════════════════════════════════════ */

/* 1 · PLATA BAK STREKTEGNINGENE

   Twemoji er flate vektorer tegnet FOR en hvit bakgrunn: ingen kontur,
   ingen skygge, ingen lys kant. Målt mot #241f1a har 23 av de 999
   tegningene ikke én eneste fyllfarge som når 3:1 — edderkoppen,
   mauren, «i zi» (svart), belte, pluss, minus, lik, kryss, pil,
   solbriller. De blir borte. Ytterligere 225 har over 40 % av
   fyllene under kravet og mister formen sin.

   På to av modusene ER tegningen spørsmålet. Et usynlig spørsmål er
   ikke et dårlig spørsmål, det er ingen quiz.

   Plata står bak ALLE kortbilder, ikke bare de 23. Tre grunner:
     · en håndplukket liste ville bli feil den dagen eieren legger
       sin egen tegning i images/egne/ — og det er nettopp det
       formatet inviterer til
     · en app der 23 bilder har hvit ramme og 976 ikke har det, ser
       ut som en feil, ikke som en avgjørelse
     · Twemoji har ett formspråk, og det formspråket har hvit under
   Fargen er kremhvit (#f7f2ea), ikke ren hvit: den tar opp den varme
   grunntonen resten av det mørke temaet har. */
html[data-tema="mork"] .kortbilde{
  background:var(--plate);
  box-shadow:0 0 0 1px var(--plate-ramme);
  border-radius:14px;
  padding:5px;
}

/* 2 · KNAPPER SOM BARE ER EN EMOJI
   🔊 og 🔑 tegnes av systemets egen emojiskrift og følger ingen
   palett. Flaten under dem må derfor holde seg lys nok til at de
   leses — de gjør allerede det (--accent2 står i begge tema), men
   ikonknappene i verktøylinja stod på --surface og forsvant. */
html[data-tema="mork"] .icon-btn{background:var(--surface-2);border:2px solid var(--line)}

/* 3 · KORTETS TO SIDER
   Skyggen bar hele skillet mellom kortet og bakgrunnen. Svart skygge
   på mørk flate er ingenting, så rammen må gjøre jobben alene. */
html[data-tema="mork"] .card-face{border-width:4px}
html[data-tema="mork"] .modal-box{border:2px solid var(--line)}

/* 4 · SAMLINGENS TOMME RUTER
   grayscale(1) + opacity .4 på mørk flate ga ruter som ikke fantes.
   Ruta skal fortsatt se uinnfridd ut, men den skal ses. */
html[data-tema="mork"] .col-item.dim{opacity:.55}

/* 5 · «EN RUNDE TIL?»
   De to knappene må fortsatt være umulige å skille fra hverandre —
   se .mer-knapp lenger opp. Rammen deres er --t5, som lysner her, så
   regelen holder av seg selv. Står her bare for at neste som endrer
   det mørke temaet skal vite at den er sjekket. */

/* ═══════════════════════════════════════════════════════════════════
   INNPAKNINGEN — trygge soner, ingen nettleser­følelse, native flater
   Se docs/HERDING-4.2.md for hvorfor hver enkelt regel står her.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Trygge soner ──────────────────────────────────────────────────
   To kilder, i denne rekkefølgen:
     --safe-area-inset-*   settes av Capacitor på Android (kant-til-kant
                           fra Android 15) — se SystemBars.insetsHandling
     env(safe-area-inset-*) er iOS, og krever viewport-fit=cover i
                           index.html for å være annet enn 0
   På nett er begge fraværende og alle fire blir 0px. Da er hele blokka
   under en nullendring, og nettutgaven ser ut nøyaktig som før. */
:root{
  --sa-topp:  var(--safe-area-inset-top,    env(safe-area-inset-top,    0px));
  --sa-hoyre: var(--safe-area-inset-right,  env(safe-area-inset-right,  0px));
  --sa-bunn:  var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --sa-venstre:var(--safe-area-inset-left,  env(safe-area-inset-left,   0px));
}
body{
  padding-top:calc(18px + var(--sa-topp));
  padding-right:calc(12px + var(--sa-hoyre));
  padding-bottom:calc(60px + var(--sa-bunn));
  padding-left:calc(12px + var(--sa-venstre));
}
/* Profilvelgeren og overleggene ligger position:fixed og arver ikke
   body sin luft. Hakket og hjemindikatoren finnes for dem også. */
#profileScreen{
  padding:calc(22px + var(--sa-topp)) calc(22px + var(--sa-hoyre))
          calc(22px + var(--sa-bunn)) calc(22px + var(--sa-venstre));
}
.overlay{
  padding:calc(20px + var(--sa-topp)) calc(20px + var(--sa-hoyre))
          calc(20px + var(--sa-bunn)) calc(20px + var(--sa-venstre));
}
.mismatch-bar{padding-top:calc(10px + var(--sa-topp))}
/* Toasten ligger fastlåst 14 px fra toppen. På en iPhone er de 14 pikslene
   inne i Dynamic Island. «Dagens bonus! +15 XP» er den aller første
   beskjeden et barn får i en økt, og den skal ikke ligge under et hull i
   skjermen. */
#toast{top:calc(14px + var(--sa-topp))}
/* Profilvelgeren sentrerer innholdet loddrett. Blir innholdet høyere enn
   skjermen — og det blir det på en telefon med hakk og hjemindikator —
   sentrerer flexbox det UT av begge kantene, og da respekteres verken
   padding-top eller padding-bottom. Målt på iPhone 15 Pro havnet
   versjonsmerket 18 px fra bunnen, altså midt i hjemindikatoren.

   Grepet er standardløsningen: sentrer med auto-marger i stedet for med
   justify-content. Er det plass til overs, oppfører de seg som
   sentrering; er det ikke det, faller de til 0 og luften i kantene står.

   Regelen gjelder BARE i innpakningen. Den samme skjevheten finnes på
   nett i dag, på en kort skjerm, men nettutgaven skal ikke endre seg av
   at appen pakkes inn. Se rapporten. */
html.nativ #profileScreen{justify-content:flex-start}
html.nativ #profileScreen>:first-child{margin-top:auto}
html.nativ #profileScreen>:last-child{margin-bottom:auto}
/* Dynamic Island og hakket spiser toppen av en fastlåst boks. 86vh var
   trygt før det fantes et hakk; nå må høyden regne med sonene. */
.modal-box.hjelp-box,.modal-box.foreldre-box{
  max-height:calc(86vh - var(--sa-topp) - var(--sa-bunn));
}

/* ── Ingen nettleserfølelse ────────────────────────────────────────
   Retningslinje 4.2: markeringshåndtak på en etikett, og den blå
   «Kopier / Slå opp»-menyen etter et langt trykk på et bilde, er de to
   tingene som roper Safari høyest.

   SKILLET SOM BETYR NOE: sperren gjelder KROMET — knapper, faner,
   etiketter, kort og maskoten. Den gjelder IKKE innhold en bruker kan
   ha en ærlig grunn til å kopiere: ordene som læres, glosen, setningen,
   hintet og søkefeltet. Et barn som vil lime «molla» inn i en melding
   til bestemor, skal få lov. En blanko user-select:none over hele
   appen ville tatt det fra dem. */
button,.chip,.tab,.mode-btn,.group-btn,.av-btn,.pf-btn,.modal-btn,
.progress-text,.card-label,.ver-tag,.sync-line,.big-mascot,.mascot-line,
.medal,.nativ-offline{
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
/* Bilder: aldri langtrykksmeny, aldri dra-og-slipp. Kortbildet ER
   spørsmålet i to av quizmodusene — «Lagre bilde» hjelper ingen. */
img{-webkit-touch-callout:none;-webkit-user-drag:none;user-drag:none}
/* Ingen blå blinking på trykk noe sted. Knappene hadde det alt. */
html{-webkit-tap-highlight-color:transparent}
/* Innholdet er unntatt med vilje — se over. Navngivelsen av Twemoji er
   et lisensvilkår, ikke krom: den skal kunne markeres og kopieres. */
.card-word,.card-sub,.card-hint,.sent-text,.result-list,#searchInput,
.ord-liste,.fa-liste,.kreditt{
  -webkit-user-select:text;user-select:text;
}

/* Gummistrikk-rulling er det siste som avslører en nettvisning inne i
   en app. html hadde overscroll-behavior fra før; på iOS må også
   dokumentet være det som ruller, ikke body inni det. */
html.nativ,html.nativ body{overscroll-behavior:none}
html.nativ{background:var(--bg)}

/* Skylagringen finnes ikke i innpakningen ennå: alt ligger på enheten.
   Statuslinja ville da stått og fortalt et barn at «skyfunksjonen ikke
   finnes på serveren», som er sant, uforståelig og skremmende. Den
   skjules i appen og blir stående på nett, der den betyr noe. */
html.nativ #syncLine{display:none}

/* ── Native flater ─────────────────────────────────────────────────
   Appens egen offline-beskjed. Den erstatter WKWebViews grå feilside,
   og er derfor med vilje rolig: ingenting er ødelagt, alt ligger
   lokalt, det er bare skylagringen som sover. */
.nativ-offline{
  position:fixed;left:0;right:0;top:0;z-index:9999;
  padding:calc(9px + var(--sa-topp)) 14px 9px;
  background:var(--gul-bg);color:var(--gul-tekst-sterk);
  font-family:'Nunito',sans-serif;font-weight:900;font-size:.8rem;text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
/* Merket er fastlåst. Innholdet skyves ned like mye, slik at maskoten
   på profilvelgeren ikke havner under det. */
html.har-offline body{padding-top:calc(18px + var(--sa-topp) + 40px)}
html.har-offline #profileScreen{padding-top:calc(22px + var(--sa-topp) + 40px)}

/* Dialogen foran en utgående lenke. Adressen står som lesbar tekst og
   er det ENESTE stedet i denne dialogen som kan markeres — en forelder
   skal kunne se hvor det bærer før hun trykker. */
.nativ-lenke-boks{max-width:360px}
.nativ-url{
  font-size:.78rem;font-weight:800;color:var(--t4);background:var(--bla-bg);
  border-radius:var(--r-md);padding:10px 12px;margin:14px 0 4px;
  word-break:break-all;line-height:1.4;
  -webkit-user-select:text;user-select:text;
}

/* ── Feilsiden (feil.html) ─────────────────────────────────────────
   Egen, liten og selvberget. Den skal se ut som appen fra første
   piksel, ikke som en nettleser som har gitt opp. */
body.feilside{justify-content:center;min-height:100vh}
.feil-boks{background:var(--surface);border-radius:32px;padding:34px 28px 28px;text-align:center;
  box-shadow:var(--shadow);max-width:340px;width:100%}
.feil-emoji{font-size:4.4rem;line-height:1;margin-bottom:10px}
.feil-tittel{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.5rem;color:var(--t1);
  letter-spacing:-.5px;text-shadow:none;margin-bottom:8px}
.feil-tekst{font-size:.95rem;font-weight:800;color:var(--muted);line-height:1.5;margin-bottom:20px}

/* ═══════════ PAPIR ═══════════
   Se js/utskrift.js. Tre regler bærer hele oppsettet:

     1. @page gir ekte A4 med 8 mm marg. Innholdsflaten blir 194×281 mm.
     2. Arket er 186 mm bredt og MIDTSTILT. Venstrestilt ville gitt 4 mm
        på én side og 12 på den andre, og da treffer ikke baksidene
        forsidene når arket snus.
     3. Rutenettet står øverst; teksten under er en fot med FAST høyde.
        En fot som vokser med én linje flytter ingenting; en overskrift
        over rutenettet ville flyttet alt.

   Millimeter, ikke piksler: papir har fysisk størrelse, og saksa følger
   ikke skjermoppløsningen. */
@page{size:A4 portrait;margin:8mm}
/* Arkene står UTENFOR skjermen, ikke på display:none.
   Et bilde som får src mens elementet er utegnet, kan bli liggende og
   aldri lastes ned — nøyaktig fella js/velkomst.js beskriver over
   bildeMedReserve(). Med display:none kom kortene ut av skriveren med
   tomme ruter der tegningene skulle vært, og feilen viste seg først på
   papiret. Utenfor skjermen tegner nettleseren dem, og
   MSQ.utskrift.skrivUt() venter i tillegg på at de er ferdige.
   Roten fjernes fra DOM-en igjen når rapporten lukkes. */
#utskrift{position:absolute;left:-200vw;top:0;width:186mm;pointer-events:none}
@media print{
  /* Papir er hvitt. En forelder som skriver ut ordkortene klokka ti om
     kvelden, står i mørk modus — og da ville arket kommet ut med
     kremhvit skrift på hvitt, og hver tegning med en plate rundt seg.
     Paletten settes derfor tilbake til lysutgaven for utskriften.
     Blekket er uansett #000 lenger nede; dette dekker det som arves. */
  html[data-tema="mork"]{
    color-scheme:light;
    --text:#2d2d2d; --muted:#5f5f5f; --surface:#fff; --bg:#fff;
    --plate:transparent; --plate-ramme:transparent;
    --t1:#d23636; --t3:#058163; --t4:#12708f; --t5:#b35a00;
    --line:#e8e8e8; --gul-tekst:#b5760a;
  }
  html[data-tema="mork"] .kortbilde{background:none;box-shadow:none;padding:0}
  /* Alt annet ut. Enklere å bevise enn å skjule ting én for én, og en
     ny modal i index.html kan ikke havne på papiret ved et uhell. */
  body>*{display:none !important}
  body>#utskrift{display:block !important}
  /* Body-en har luft, trygge soner og bakgrunn for en skjerm. På papir
     er alt tre feil: én eneste piksel padding nederst skyver arket over
     kanten og gir en blank ekstraside. Nullstillingen står SIST i fila
     med vilje — reglene for de trygge sonene kommer etter den vanlige
     body-regelen, og en @media print lenger opp ville tapt mot dem. */
  html,body{margin:0 !important;padding:0 !important;height:auto !important;
    min-height:0 !important;background:#fff !important;background-image:none !important;
    display:block !important;overflow:visible !important}
  /* Stiplede klippelinjer og gule felt må faktisk komme ut av skriveren. */
  #utskrift{position:static;left:auto;width:auto;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;color:#000}
}
/* break-inside:avoid gjør at et ark aldri deles over to sider. Uten den
   holder ikke forsiden og baksiden følge, og alt under sklir én side. */
.uts-ark{width:186mm;margin:0 auto;break-inside:avoid;page-break-inside:avoid;
  break-after:page;page-break-after:always}
.uts-ark:last-child{break-after:auto;page-break-after:auto}
.uts-rutenett{display:grid;grid-template-columns:repeat(3,62mm);
  grid-template-rows:repeat(3,86mm);width:186mm;margin:0 auto}
.uts-kort{border:1px dashed #8a8a8a;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3mm;padding:4mm;
  overflow:hidden;text-align:center}
.uts-kort-tom{border-color:#d8d8d8}
.uts-kort-bilde{height:38mm;width:38mm;display:flex;align-items:center;justify-content:center;
  font-size:30mm;line-height:1}
.uts-kort-bilde .kortbilde{height:100%;width:100%;object-fit:contain}
.uts-kort-ord{font-family:'Baloo 2','Nunito',sans-serif;font-size:16pt;font-weight:800;
  line-height:1.15;overflow-wrap:anywhere}
.uts-kort-glose{font-family:'Baloo 2','Nunito',sans-serif;font-size:18pt;font-weight:800;
  line-height:1.2;overflow-wrap:anywhere}
.uts-kort-liten{font-size:9pt;font-weight:800;color:#555;overflow-wrap:anywhere}
.uts-fot{height:10mm;display:flex;align-items:center;justify-content:center;
  font-size:8pt;font-weight:800;color:#555;text-align:center;overflow:hidden}
.uts-ark-tekst{display:flex;flex-direction:column;height:274mm}
/* h1 arver appens skjermstil: rød, midtstilt og med gul skygge. På hvitt
   papir er alt tre feil — skyggen spiser blekk og lesbarhet. Nullstilles
   her, ikke i markeringen, slik at et framtidig mørkt tema ikke drar
   papiret med seg. */
.uts-h1{font-family:'Baloo 2','Nunito',sans-serif;font-size:22pt;font-weight:800;margin-bottom:2mm;
  color:#000;text-align:left;text-shadow:none;letter-spacing:0;line-height:1.15}
.uts-under{font-size:10pt;font-weight:800;color:#555;margin-bottom:5mm}
.uts-liste{list-style:none;flex:1;columns:2;column-gap:10mm;font-size:11pt}
.uts-liste.bred{columns:1}
.uts-liste li{break-inside:avoid;display:flex;justify-content:space-between;gap:4mm;
  padding:1.6mm 0;border-bottom:1px dotted #bbb}
.uts-liste-a{font-weight:900}
.uts-liste-g{color:#444;text-align:right}
/* Diplomet er ett ark, og det henger på et kjøleskap. Innholdet skal
   stå MIDT på arket, ikke i overkant: foten pinnes nederst, og alt annet
   sentreres i det som er igjen. Med margin-top:auto på foten alene ble
   hele diplomet dyttet opp i øverste tredel med en tom underdel. */
.uts-bevis{display:flex;flex-direction:column;height:274mm;
  border:3mm double #b5760a;padding:12mm;text-align:center}
.uts-bevis-inn{flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.uts-bevis-topp{font-family:'Baloo 2','Nunito',sans-serif;font-size:22pt;font-weight:800;
  letter-spacing:3px;color:#b5760a}
.uts-bevis-av{font-size:40mm;line-height:1.1;margin:8mm 0 4mm}
.uts-bevis-navn{font-family:'Baloo 2','Nunito',sans-serif;font-size:46pt;font-weight:800;
  line-height:1.1;color:#000;text-shadow:none}
.uts-bevis-linje{font-size:16pt;font-weight:800;margin-top:8mm;max-width:135mm;line-height:1.45}
.uts-bevis-medalje{font-size:14pt;font-weight:800;margin-top:4mm;color:#b5760a}
.uts-bevis-alb{font-family:'Baloo 2','Nunito',sans-serif;font-size:18pt;font-weight:800;margin-top:12mm}
.uts-bevis-sig{display:flex;gap:20mm;margin-top:20mm;font-size:10pt;font-weight:800;color:#444}
.uts-bevis-strek{border-top:1px solid #666;padding-top:2mm;min-width:60mm}
.uts-bevis-dato{border-top:1px solid #666;padding-top:2mm;min-width:50mm}
.uts-bevis .uts-fot{margin-top:auto}