/* ==========================================================================
   Eksamensfokus — stilark
   Mobilførst. Alle farger er variabler, definert i to komplette temaer.
   Ingen farge skal skrives direkte i en regel utenfor :root-blokkene.
   ========================================================================== */

:root {
  /* --- flater og tekst --- */
  --bg:            #eff3f8;
  --surface:       #ffffff;
  --surface-2:     #e8eef6;
  --surface-3:     #dde7f2;
  --border:        #dbe4ee;
  --border-strong: #c5d3e2;
  --ink:           #0f2438;
  --ink-2:         #5b7186;
  --ink-3:         #596d80;

  /* --- merkefarge --- */
  --brand:         #2568a8;
  --brand-strong:  #1b4e80;
  --brand-ink:     #ffffff;
  --brand-soft:    #dfeaf6;
  --brand-soft-ink:#1d5488;

  /* --- svarstatus (aldri brukt til annet) --- */
  --ok:        #1c6437;
  --ok-bg:     #d6ecdc;
  --ok-line:   #8cc79f;
  --err:       #a03038;
  --err-bg:    #f7d5d6;
  --err-line:  #e0989b;

  /* --- varsel --- */
  --warn:      #8a6208;
  --warn-bg:   #fdeec9;
  --warn-line: #eccf87;
  --accent:    #e0a11f;
  --accent-ink:#2a1e02;

  /* Sperren bak et åpent ark. Én verdi for begge temaer — et mørkt slør leser
     riktig i begge, og et lyst ville forsvunnet i lys modus. */
  --sperre: rgba(12, 20, 34, .45);

  /* --- fagfeltfamilier --- */
  --fam-indremedisin: #2E6CA4;
  --fam-kirurgi:      #2F7F86;
  --fam-nevro-psyk:   #6B5CA5;
  --fam-kvinne-barn:  #B5527E;
  --fam-sanser-hud:   #A8752B;
  --fam-akutt:        #B85C38;
  --fam-diagnostikk:  #566878;
  --fam-samfunn:      #667A3F;
  /* UiO-modulene underviser fag NDE ikke har — anatomi, fysiologi,
     cellebiologi, biokjemi. De hører ikke hjemme i noen klinisk familie og
     har fått en niende. Tonen brukes bare på ikon og strek, aldri som flate
     og aldri på et svaralternativ, så den kan ikke leses som «riktig». */
  --fam-preklinisk:   #4A7C59;

  /* --- form --- */

  /* Skriftstørrelse i alle skrivbare felter. Safari på iOS zoomer inn på et
     felt med skrift under 16px, og zoomer ikke ut igjen. Verdien styres derfor
     ett sted, som en variabel: en media query lenger nede løfter den til 16px
     på touch. Det må gjøres slik, og ikke ved å overstyre selektorene, fordi
     `.field input` slår en regel som bare sier `input` uansett rekkefølge. */
  --felt-skrift: 15px;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --shadow: 0 1px 2px rgba(15, 36, 56, .05);
  --shadow-lg: 0 8px 28px rgba(15, 36, 56, .12);
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 74px;
  --tabbar-h: 60px;
  --foot-h: 70px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Poppins", var(--font);

  color-scheme: light;
}

@media (pointer: coarse) {
  :root { --felt-skrift: 16px; }
}

:root[data-theme="dark"] {
  --bg:            #0d151f;
  --surface:       #151f2b;
  --surface-2:     #1b2735;
  --surface-3:     #223040;
  --border:        #263442;
  --border-strong: #33445533;
  --ink:           #e7eef5;
  --ink-2:         #94a7b9;
  --ink-3:         #8497aa;

  --brand:         #5aa2e0;
  --brand-strong:  #7cb8ea;
  --brand-ink:     #08131e;
  --brand-soft:    #1a2c3f;
  --brand-soft-ink:#8cc0ec;

  --ok:        #7fd0a0;
  --ok-bg:     #16311f;
  --ok-line:   #2f6b41;
  --err:       #f3a3a8;
  --err-bg:    #351a1d;
  --err-line:  #6d3239;

  --warn:      #f0cf85;
  --warn-bg:   #33280f;
  --warn-line: #5d4a1c;
  --accent:    #f0b843;
  --accent-ink:#2a1e02;

  --fam-indremedisin: #6BA6DC;
  --fam-kirurgi:      #63BFC6;
  --fam-nevro-psyk:   #A497E0;
  --fam-kvinne-barn:  #E88FB4;
  --fam-sanser-hud:   #DDAE5E;
  --fam-akutt:        #E5906E;
  --fam-diagnostikk:  #9AAEBF;
  --fam-samfunn:      #A9BC79;
  --fam-preklinisk:   #8FBFA1;

  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lg: 0 10px 32px rgba(0, 0, 0, .5);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0d151f;
    --surface:       #151f2b;
    --surface-2:     #1b2735;
    --surface-3:     #223040;
    --border:        #263442;
    --ink:           #e7eef5;
    --ink-2:         #94a7b9;
    --ink-3:         #8497aa;
    --brand:         #5aa2e0;
    --brand-strong:  #7cb8ea;
    --brand-ink:     #08131e;
    --brand-soft:    #1a2c3f;
    --brand-soft-ink:#8cc0ec;
    --ok:        #7fd0a0;  --ok-bg:  #16311f;  --ok-line:  #2f6b41;
    --err:       #f3a3a8;  --err-bg: #351a1d;  --err-line: #6d3239;
    --warn:      #f0cf85;  --warn-bg:#33280f;  --warn-line:#5d4a1c;
    --accent:    #f0b843;
    --fam-indremedisin: #6BA6DC;  --fam-kirurgi:     #63BFC6;
    --fam-nevro-psyk:   #A497E0;  --fam-kvinne-barn: #E88FB4;
    --fam-sanser-hud:   #DDAE5E;  --fam-akutt:       #E5906E;
    --fam-diagnostikk:  #9AAEBF;  --fam-samfunn:     #A9BC79;
    --fam-preklinisk:   #8FBFA1;
    --shadow: 0 1px 2px rgba(0,0,0,.4);
    --shadow-lg: 0 10px 32px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}

/* ==========================================================================
   Tema «signal» — den nye identiteten
   --------------------------------------------------------------------------
   Lagt på en egen akse, `data-skin`, ved siden av `data-theme`. De to er
   uavhengige: du velger utseende og lys/mørkt hver for seg. Det gamle temaet
   står urørt over og gjelder når `data-skin="klassisk"`.

   Identiteten ligger i formen mer enn i fargen: nesten skarpe hjørner,
   hårfine streker i stedet for skygger, og monospace på tall, koder og
   etiketter. Det er et verktøy for å lese eksamensdokumenter, og det skal
   se ut som et instrument, ikke som en brosjyre.

   Semantikken er urørt: grønt betyr fortsatt riktig, rødt feil. Aksenten er
   derfor blå, så den aldri kan forveksles med et svar.
   ========================================================================== */

:root[data-skin="signal"] {
  --bg:            #f4f6f8;
  --surface:       #ffffff;
  --surface-2:     #eceff3;
  --surface-3:     #e2e7ec;
  --border:        #d8dee5;
  --border-strong: #b9c3cd;
  --ink:           #0e1620;
  --ink-2:         #55636f;
  --ink-3:         #6b7885;

  --brand:         #0f5fd8;
  --brand-strong:  #0b4aa8;
  --brand-ink:     #ffffff;
  --brand-soft:    #e4edfc;
  --brand-soft-ink:#0b4aa8;

  --ok:        #10693c;  --ok-bg:  #dff2e6;  --ok-line:  #7cc198;
  --err:       #a52834;  --err-bg: #fbe3e5;  --err-line: #dd9aa1;
  --warn:      #855a06;  --warn-bg:#faeed4;  --warn-line:#d9bb77;
  --accent:    #0f5fd8;
  --accent-ink:#ffffff;

  --r-sm: 2px;
  --r:    3px;
  --r-lg: 4px;
  --r-xl: 6px;

  /* Hårfine streker bærer dybden. Skyggene slås av, ikke tones ned — en svak
     skygge oppå en strek blir grumsete, ikke subtil. */
  --shadow:    0 0 0 1px var(--border);
  --shadow-lg: 0 0 0 1px var(--border-strong);

  --font:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "IBM Plex Sans", var(--font);
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

:root[data-skin="signal"][data-theme="dark"] {
  --bg:            #080b0f;
  --surface:       #0f151c;
  --surface-2:     #151d26;
  --surface-3:     #1c2631;
  --border:        #202b37;
  --border-strong: #33414f;
  --ink:           #e6edf3;
  --ink-2:         #8b9bab;
  --ink-3:         #7a8b9b;
  --brand:         #4d9bff;
  --brand-strong:  #7ab5ff;
  --brand-ink:     #05090e;
  --brand-soft:    #10243d;
  --brand-soft-ink:#8dc0ff;
  --ok:        #5fd08c;  --ok-bg:  #0e2b1a;  --ok-line:  #2b6b45;
  --err:       #ff8b93;  --err-bg: #2e1418;  --err-line: #6d2c34;
  --warn:      #f0c674;  --warn-bg:#2b2210;  --warn-line:#5a4820;
  --accent:    #4d9bff;
  --accent-ink:#05090e;
  --shadow:    0 0 0 1px var(--border);
  --shadow-lg: 0 0 0 1px var(--border-strong);
  color-scheme: dark;
}

/* Systemets mørke modus. Må ligge i media-spørringen, ellers gjelder den
   alltid — og et uttrykkelig lysvalg må fortsatt vinne over systemet. */
@media (prefers-color-scheme: dark) {
  :root[data-skin="signal"]:not([data-theme="light"]) {
    --bg:            #080b0f;
    --surface:       #0f151c;
    --surface-2:     #151d26;
    --surface-3:     #1c2631;
    --border:        #202b37;
    --border-strong: #33414f;
    --ink:           #e6edf3;
    --ink-2:         #8b9bab;
    --ink-3:         #7a8b9b;
    --brand:         #4d9bff;
    --brand-strong:  #7ab5ff;
    --brand-ink:     #05090e;
    --brand-soft:    #10243d;
    --brand-soft-ink:#8dc0ff;
    --ok:        #5fd08c;  --ok-bg:  #0e2b1a;  --ok-line:  #2b6b45;
    --err:       #ff8b93;  --err-bg: #2e1418;  --err-line: #6d2c34;
    --warn:      #f0c674;  --warn-bg:#2b2210;  --warn-line:#5a4820;
    --accent:    #4d9bff;
    --accent-ink:#05090e;
    --shadow:    0 0 0 1px var(--border);
    --shadow-lg: 0 0 0 1px var(--border-strong);
    color-scheme: dark;
  }
}

/* Monospace på det som er data: oppgavenummer, årstall, emnekoder, tellinger.
   Bare i det nye temaet — `--mono` finnes ikke i det gamle, og reglene faller
   da tilbake på arv uten å gjøre skade. */
:root[data-skin="signal"] .badge,
:root[data-skin="signal"] .chip,
:root[data-skin="signal"] .kpi-value,
:root[data-skin="signal"] .tall,
:root[data-skin="signal"] .meta,
:root[data-skin="signal"] .count {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

:root[data-skin="signal"] h1,
:root[data-skin="signal"] h2,
:root[data-skin="signal"] h3 {
  letter-spacing: -0.022em;
}

/* ==========================================================================
   Tema «glass» — flytende glass
   --------------------------------------------------------------------------
   Tredje utseende på `data-skin`-aksen, ved siden av «signal» og «klassisk».
   Der «signal» er et instrument, er dette en app: matte glassflater som
   ligger over en pastellhimmel, store runde hjørner, og lys — ikke streker —
   som skiller flatene fra hverandre.

   To ting er verdt å vite før noe endres her:

   1. **Merkefargen er fiolett, ikke korall.** Kulene i bakgrunnen er korall,
      og det er de som gir temaet ansiktet sitt. Men korall på en valgt knapp
      eller et valgt svaralternativ ville ligget farlig nær `--err`, og et
      svar skal aldri kunne forveksles med et annet. Samme resonnement som i
      «signal». Korallen lever derfor i bakgrunnen, logoen og `--accent` —
      steder der ingenting betyr «feil».

   2. **`--ok-bg`, `--err-bg` og `--warn-bg` er ugjennomsiktige med vilje.**
      `.opt.correct .badge` bruker dem som *skriftfarge* på en farget flate.
      En gjennomsiktig verdi der gjør bokstaven nesten usynlig.

   Selve formen — uskarpheten, lyset langs overkanten, bakgrunnslaget — ligger
   nederst i filen, etter komponentene den overstyrer.
   ========================================================================== */

:root[data-skin="glass"] {
  --bg:            #e6ebf7;
  --bg-topp:       #ccd7ef;
  --bg-midt:       #e9edf7;
  --bg-bunn:       #f3f0f6;

  --surface:       rgba(255, 255, 255, .58);
  --surface-2:     rgba(255, 255, 255, .40);
  --surface-3:     rgba(255, 255, 255, .76);
  --border:        rgba(104, 124, 168, .22);
  --border-strong: rgba(86, 104, 150, .40);
  --ink:           #1d2947;
  --ink-2:         #55618a;
  --ink-3:         #6a7599;

  --brand:         #5450d8;
  --brand-strong:  #423eba;
  --brand-ink:     #ffffff;
  --brand-soft:    rgba(84, 80, 216, .14);
  --brand-soft-ink:#3a36a6;

  --ok:        #10683f;  --ok-bg:  #dcf0e4;  --ok-line:  rgba(30, 140, 85, .55);
  --err:       #ad2b39;  --err-bg: #fadfe1;  --err-line: rgba(190, 60, 75, .50);
  --warn:      #855610;  --warn-bg:#fbecd2;  --warn-line:rgba(200, 145, 40, .50);
  --accent:    #ef5f3c;
  --accent-ink:#ffffff;

  /* Glassets egne størrelser. Uskarpheten er én verdi ett sted, fordi den
     ligger på seks ulike beholdere og skal være den samme på alle. */
  --glass-slor:   saturate(165%) blur(20px);
  --glass-glans:  rgba(255, 255, 255, .72);
  --glass-kant:   rgba(255, 255, 255, .55);
  --glass-loft:   0 10px 24px -14px rgba(30, 41, 82, .45);
  /* Tettere glass til flatene som ligger over innhold som ruller — bunnraden
     i en oppgave og installasjonsarket. Uskarphet alene holder ikke der. */
  --glass-tett:   rgba(255, 255, 255, .84);

  --orb-korall:   rgba(255, 133, 92, .55);
  --orb-himmel:   rgba(142, 186, 255, .52);
  --orb-lilla:    rgba(203, 156, 255, .42);
  --orb-fersken:  rgba(255, 202, 165, .48);

  --r-sm: 12px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --shadow:    0 1px 2px rgba(30, 41, 82, .07);
  --shadow-lg: 0 20px 46px -24px rgba(30, 41, 82, .40);

  --font:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Poppins", var(--font);
}

:root[data-skin="glass"][data-theme="dark"] {
  --bg:            #0a0e1b;
  --bg-topp:       #141c35;
  --bg-midt:       #0c1222;
  --bg-bunn:       #110f20;

  --surface:       rgba(255, 255, 255, .065);
  --surface-2:     rgba(255, 255, 255, .040);
  --surface-3:     rgba(255, 255, 255, .120);
  --border:        rgba(255, 255, 255, .11);
  --border-strong: rgba(255, 255, 255, .24);
  --ink:           #e9edfa;
  --ink-2:         #9aa5c6;
  --ink-3:         #8b96b8;

  --brand:         #918dff;
  --brand-strong:  #aba8ff;
  --brand-ink:     #0a0e1b;
  --brand-soft:    rgba(145, 141, 255, .18);
  --brand-soft-ink:#bbb8ff;

  --ok:        #62d59a;  --ok-bg:  #122f22;  --ok-line:  rgba(70, 190, 130, .50);
  --err:       #ff8f96;  --err-bg: #33161c;  --err-line: rgba(230, 110, 120, .45);
  --warn:      #f2c877;  --warn-bg:#2f2513;  --warn-line:rgba(220, 175, 90, .45);
  --accent:    #ff7d5c;
  --accent-ink:#1a0d08;

  --glass-glans: rgba(255, 255, 255, .12);
  --glass-kant:  rgba(255, 255, 255, .14);
  --glass-loft:  0 10px 26px -16px rgba(0, 0, 0, .85);
  --glass-tett:  rgba(20, 26, 45, .82);

  --orb-korall:   rgba(255, 110, 70, .28);
  --orb-himmel:   rgba(80, 130, 255, .28);
  --orb-lilla:    rgba(170, 100, 255, .24);
  --orb-fersken:  rgba(255, 160, 110, .18);

  --shadow:    0 1px 2px rgba(0, 0, 0, .5);
  --shadow-lg: 0 22px 50px -26px rgba(0, 0, 0, .8);

  color-scheme: dark;
}

/* Systemets mørke modus. Samme begrunnelse som for «signal»: verdiene må stå
   i media-spørringen, ellers gjelder de alltid, og et uttrykkelig lysvalg må
   fortsatt vinne over systemet. */
@media (prefers-color-scheme: dark) {
  :root[data-skin="glass"]:not([data-theme="light"]) {
    --bg:            #0a0e1b;
    --bg-topp:       #141c35;
    --bg-midt:       #0c1222;
    --bg-bunn:       #110f20;
    --surface:       rgba(255, 255, 255, .065);
    --surface-2:     rgba(255, 255, 255, .040);
    --surface-3:     rgba(255, 255, 255, .120);
    --border:        rgba(255, 255, 255, .11);
    --border-strong: rgba(255, 255, 255, .24);
    --ink:           #e9edfa;
    --ink-2:         #9aa5c6;
    --ink-3:         #8b96b8;
    --brand:         #918dff;
    --brand-strong:  #aba8ff;
    --brand-ink:     #0a0e1b;
    --brand-soft:    rgba(145, 141, 255, .18);
    --brand-soft-ink:#bbb8ff;
    --ok:        #62d59a;  --ok-bg:  #122f22;  --ok-line:  rgba(70, 190, 130, .50);
    --err:       #ff8f96;  --err-bg: #33161c;  --err-line: rgba(230, 110, 120, .45);
    --warn:      #f2c877;  --warn-bg:#2f2513;  --warn-line:rgba(220, 175, 90, .45);
    --accent:    #ff7d5c;
    --accent-ink:#1a0d08;
    --glass-glans: rgba(255, 255, 255, .12);
    --glass-kant:  rgba(255, 255, 255, .14);
    --glass-loft:  0 10px 26px -16px rgba(0, 0, 0, .85);
    --glass-tett:  rgba(20, 26, 45, .82);
    --orb-korall:   rgba(255, 110, 70, .28);
    --orb-himmel:   rgba(80, 130, 255, .28);
    --orb-lilla:    rgba(170, 100, 255, .24);
    --orb-fersken:  rgba(255, 160, 110, .18);
    --shadow:    0 1px 2px rgba(0, 0, 0, .5);
    --shadow-lg: 0 22px 50px -26px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}

/* ==========================================================================
   Grunnlag
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
svg { width: 1em; height: 1em; display: block; flex: none; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Skall
   ========================================================================== */

.app { min-height: 100dvh; }

/* Medisinske ord blir lange — «hydroksymetylglutaryl-koenzym-A-reduktase» er
   43 tegn. Uten orddeling tvinger ett slikt ord siden bredere enn skjermen,
   og da starter mobilen lett innzoomet og lar seg dra sidelengs. */
body { overflow-wrap: break-word; }

.main {
  padding: 16px 16px calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom));
  min-width: 0;
}

/* --- sidemeny (skrivebord) --- */
.sidebar { display: none; }

/* --- bunnmeny (mobil) --- */
.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  /* To ting må til for at «Statistikk» ikke skal presse menyen ut over
     skjermbredden: minmax(0,1fr) gir sporet 0 som gulv, og min-width:0 på
     lenkene under fjerner deres egen min-content-bredde. Uten den siste blir
     menyen 380 px på en 375 px skjerm, og hele siden kan rulles sidelengs. */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; height: var(--tabbar-h);
  font-size: 10.5px; font-weight: 600; letter-spacing: .1px;
  color: var(--ink-3);
}
.tabbar a svg { width: 21px; height: 21px; }
.tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar a[aria-current="page"] { color: var(--brand); }

/* --- toppstripe på mobil --- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  /* I App Store-appen ligger WebView-en under statuslinjen og Dynamic Island
     (viewport-fit=cover), så linjen må begynne under dem. På nett og som PWA
     er innrykket 0, og ingenting endres. */
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar .wordmark {
  font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.2px;
  display: inline-flex; align-items: center; min-height: 42px; padding-right: 8px;
}
.topbar .spacer { flex: 1; }

/* ==========================================================================
   Skrivebord: sidemeny i skjermhøyde, sammenleggbar
   ========================================================================== */

@media (min-width: 900px) {
  .app {
    display: flex; align-items: flex-start; gap: 22px;
    padding: 22px; max-width: 1460px; margin: 0 auto;
  }
  .topbar, .tabbar { display: none; }
  .main { padding: 0; flex: 1; }

  .sidebar {
    display: flex; flex-direction: column;
    position: sticky; top: 22px;
    height: calc(100dvh - 44px);
    width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    /* Rullingen skjer i .sidebar-rull, ikke her. Rullet kortet selv, gikk
       rullefeltet fra kant til kant og stakk gjennom de avrundede hjørnene —
       en rett strek oppå en bue. Nå ligger rullefeltet innenfor en luft på
       radiusens størrelse, og hjørnene står i fred. */
    padding: calc(var(--r-xl) - 6px) 0;
    overflow: hidden;
    transition: width .18s ease, flex-basis .18s ease;
  }
  .sidebar-rull {
    display: flex; flex-direction: column;
    flex: 1; min-height: 0;
    padding: 4px 14px 0;
    /* Menyen har blitt lang: elleve punkter pluss konto og temavalg. På en
       lav skjerm ruller den innvendig i stedet for å klippe bunnen, og bare
       da — overflow: auto viser ikke noe rullefelt før det trengs. */
    overflow: hidden auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
  .app[data-sidebar="collapsed"] .sidebar {
    width: var(--sidebar-w-collapsed); flex-basis: var(--sidebar-w-collapsed);
  }
  .app[data-sidebar="collapsed"] .sidebar-rull { padding-left: 10px; padding-right: 10px; }
}

.brand {
  display: flex; align-items: center; gap: 11px;
  padding: 0 8px 20px; min-width: 0;
}
.brand .logo {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  background: linear-gradient(150deg, var(--brand), var(--brand-strong));
  color: var(--brand-ink); display: grid; place-items: center; font-size: 19px;
}
.brand .name {
  font-family: var(--display); font-weight: 700; font-size: 16.5px;
  letter-spacing: -.3px; line-height: 1.1; white-space: nowrap;
}
.brand .name small { display: block; font-family: var(--font); font-weight: 500; font-size: 11px; color: var(--ink-3); letter-spacing: 0; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r);
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  min-height: 42px; white-space: nowrap;
  transition: background .13s, color .13s;
}
.nav a svg { width: 19px; height: 19px; }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-soft-ink); font-weight: 600; }

.sidebar-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); display: flex; gap: 6px; }
.icon-btn {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: var(--r); flex: none;
  color: var(--ink-2); font-size: 18px;
  transition: background .13s, color .13s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
/* Ikon og etikett skal lese som ett par. Med `place-items: center` ble paret
   midtstilt i hver sin like brede knapp, og siden etikettene er ulikt lange
   havnet ikonene i utakt med teksten sin — det så ut som fire løse elementer
   på rad. Innholdet står nå til venstre i sin egen knapp, og knappen har en
   svak flate, så det er tydelig hvor den ene slutter og den neste begynner. */
.icon-btn.grow {
  width: auto; flex: 1; min-width: 0; gap: 9px;
  grid-auto-flow: column; grid-template-columns: auto minmax(0, 1fr);
  justify-content: start; padding: 0 11px;
  /* `place-items: center` fra .icon-btn midtstilte etiketten i sin 1fr-celle */
  justify-items: start;
  font-size: 14px; font-weight: 500;
}
.icon-btn.grow span {
  min-width: 0; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-foot .icon-btn.grow { background: var(--surface-2); }
.sidebar-foot .icon-btn.grow:hover { background: var(--surface-3); }

.valgstabel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
/* `.icon-btn.grow` har `flex: 1`, skrevet for en rad. I en kolonne betyr det
   samme regelen at knappene deler høyden mellom seg, og 42 px ble til 21. */
.valgstabel .icon-btn.grow { flex: none; width: auto; }
.app[data-sidebar="collapsed"] .valgstabel { flex: none; }

/* applyTheme() legger en etikett i hver [data-theme-btn]. I sidemenyen er
   knappen bred (.grow) og etiketten hører hjemme der. I toppstripa på mobil er
   den 42 px, og «System» rant utenfor knappen og ut av skjermen. */
.icon-btn:not(.grow) span { display: none; }

.app[data-sidebar="collapsed"] .nav a span,
.app[data-sidebar="collapsed"] .brand .name,
.app[data-sidebar="collapsed"] .icon-btn.grow span { display: none; }
.app[data-sidebar="collapsed"] .nav a { justify-content: center; padding-left: 0; padding-right: 0; }
.app[data-sidebar="collapsed"] .brand { justify-content: center; padding-left: 0; padding-right: 0; }
.app[data-sidebar="collapsed"] .sidebar-foot { flex-direction: column; }
.app[data-sidebar="collapsed"] .icon-btn.grow { width: 42px; flex: none; padding: 0; justify-content: center; grid-template-columns: auto; }

/* ==========================================================================
   Typografi og småting
   ========================================================================== */

h1, h2, h3 { font-family: var(--display); letter-spacing: -.4px; margin: 0; }
.h-page { font-size: 26px; font-weight: 700; line-height: 1.15; }
.h-sec  { font-size: 17px; font-weight: 700; margin-bottom: 2px; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.tabular { font-variant-numeric: tabular-nums; }

@media (min-width: 900px) { .h-page { font-size: 32px; } }

.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.page-head .h-page { flex: 1; min-width: 0; }

/* ==========================================================================
   Kort, knapper, merker
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.pad { padding: 16px; }
@media (min-width: 900px) { .pad { padding: 20px; } }

.grid-2 { display: grid; gap: 16px; }
@media (min-width: 1100px) { .grid-2 { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; } }

/* Dashbordet. Øverst to handlingskort side om side når det er plass; under
   dem to spalter, 3:2, så funksjonslisten til høyre får bredde nok til at
   forklaringene ikke brekker på hvert ord. Kortene har egen margin-bottom for
   den stablede visningen; i rutenettet er det gapet som skiller. */
.dash-topp { display: grid; gap: 16px; margin-bottom: 16px; }
.dash-topp > .card { margin-bottom: 0 !important; }
.dash-topp:empty { display: none; }
@media (min-width: 720px) { .dash-topp { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
.dash-grid { display: grid; gap: 16px; }
@media (min-width: 1100px) { .dash-grid { grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); align-items: start; } }
.dash-grid > div > .card:last-child { margin-bottom: 0 !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px;
  background: var(--brand); color: var(--brand-ink);
  border-radius: var(--r); font-weight: 600; font-size: 15px;
  transition: background .13s, opacity .13s;
}
.btn:hover { background: var(--brand-strong); }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }
.btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--border); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.quiet { background: var(--surface-2); color: var(--ink); }
.btn.quiet:hover { background: var(--surface-3); }
.btn.accent { background: var(--accent); color: var(--accent-ink); }
.btn.wide { width: 100%; }
.btn.sm { min-height: 38px; padding: 0 13px; font-size: 13.5px; border-radius: var(--r-sm); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
  background: var(--surface-2); color: var(--ink-2);
}
.chip svg { width: 14px; height: 14px; }
.chip.brand { background: var(--brand-soft); color: var(--brand-soft-ink); }
.chip.warn  { background: var(--warn-bg); color: var(--warn); }
.chip.err   { background: var(--err-bg); color: var(--err); }
.chip.ok    { background: var(--ok-bg); color: var(--ok); }
.chip.fam   { background: color-mix(in srgb, var(--fam) 14%, var(--surface)); color: var(--fam); }

/* Maskinlest: en prikk i stedet for en chip. Trykkflaten er større enn
   prikken (padding), så den lar seg treffe på en telefon. `ubekreftet` er
   settene kontrollen ikke fikk bekreftet fasiten til — de får varselfargen,
   de andre en dempet. Boksen forklarer, og legges rett under raden. */
.prikk {
  appearance: none; border: 0; background: none; cursor: pointer;
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  display: inline-grid; place-items: center; flex: none;
}
.prikk::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink-3); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink-3) 25%, transparent);
}
.prikk.ubekreftet::before { background: var(--warn); box-shadow: 0 0 0 2px var(--warn-bg); }
.prikk:hover::before, .prikk[aria-expanded="true"]::before { transform: scale(1.25); }
.prikk:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.maskinlest-boks {
  margin: 0 0 12px; padding: 11px 14px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
}
.maskinlest-boks b { color: var(--ink); }

/* «Kort versjon» øverst i personvernerklæringen: det gode først, i en egen
   rolig flate, så det er det man leser før tabellen. */
.kortversjon {
  margin: 14px 0 22px; padding: 16px 18px 6px; border-radius: var(--r);
  background: var(--brand-soft); color: var(--brand-soft-ink);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
}
.kortversjon .h-sec { color: var(--brand-soft-ink); }
.kortversjon ul { margin: 0; padding-left: 20px; }
.kortversjon li { margin: 0 0 9px; line-height: 1.5; }
.kortversjon a { color: inherit; font-weight: 600; text-decoration: underline; }
/* Prikken som tegn i løpende tekst (forklaringen over settlisten) */
.prikk-eks {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle;
  background: var(--ink-3); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink-3) 25%, transparent);
}
.prikk-eks.ubekreftet { background: var(--warn); box-shadow: 0 0 0 2px var(--warn-bg); }

.banner {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r); margin-bottom: 14px;
  font-size: 14px; line-height: 1.45;
}
.banner svg { width: 17px; height: 17px; margin-top: 2px; }
.banner.warn { background: var(--warn-bg); color: var(--warn); }
.banner.info { background: var(--brand-soft); color: var(--brand-soft-ink); }
.banner.ok { background: var(--ok-bg); color: var(--ok); }
/* Lenker i et banner arver bannerets farge — den er kontrollmålt mot AA i begge
   temaer — og skilles fra teksten med understrek i stedet for egen farge. */
.banner a { color: inherit; font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px; }

.empty { text-align: center; padding: 44px 20px; color: var(--ink-2); }
.loading { padding: 40px; text-align: center; color: var(--ink-3); }

/* ==========================================================================
   Statistikkstripe
   ========================================================================== */

.statbar {
  display: grid; grid-template-columns: repeat(2, 1fr);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: 16px;
}
.statbar .stat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-width: 0; }
.statbar .stat:nth-child(even) { border-left: 1px solid var(--border); }
.statbar .stat:nth-child(n+3) { border-top: 1px solid var(--border); }
.statbar .ico { color: var(--brand); font-size: 22px; }
.statbar .lbl { font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.statbar .val { font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.1; }

@media (min-width: 700px) {
  .statbar { grid-template-columns: repeat(var(--stat-cols, 4), 1fr); }
  .statbar .stat:nth-child(n) { border-top: none; border-left: 1px solid var(--border); }
  .statbar .stat:first-child { border-left: none; }
}

/* ==========================================================================
   Fliser på forsiden
   ========================================================================== */

.tile {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--surface-2); border-radius: var(--r);
  padding: 14px 16px; min-height: 74px;
  transition: background .13s;
}
.tile + .tile { margin-top: 10px; }
/* Flisene på dashbordet: to i bredden når kortet er bredt nok, ellers én. */
.tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.tiles .tile { margin-top: 0; }
/* Seks korte fliser i tre kolonner (to på smalere skjerm, én på telefon), alle
   like høye — navnene er ett ord, så ingen brekker og ingen kolonne får hull.
   Faste kolonner, ikke auto-fill: på en bred skjerm ga auto-fill fem i bredden
   og ett ord som «Eksamenssett» delt på midten. */
.tiles.tre { grid-template-columns: 1fr; }
@media (min-width: 600px) { .tiles.tre { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tiles.tre { grid-template-columns: repeat(3, 1fr); } }
.tiles.tre .tile { min-height: 70px; padding: 12px 14px; gap: 12px; }
.tiles.tre .tile .name { font-size: 16.5px; overflow-wrap: normal; }
.tiles.tre .tile .sub { font-size: 12.5px; }
.tiles.tre .tile .ico { width: 40px; height: 40px; font-size: 19px; }
.tile:hover { background: var(--surface-3); }
.tile .ico {
  width: 44px; height: 44px; flex: none; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border);
  display: grid; place-items: center; font-size: 22px; color: var(--brand);
}
.tile .body { flex: 1; min-width: 0; }
.tile .name { font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.2; }
.tile .sub { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.tile .go { color: var(--ink-3); font-size: 18px; }

@media (min-width: 700px) {
  .tile .name { font-size: 20px; }
  .tile .ico { width: 48px; height: 48px; font-size: 24px; }
}

/* ==========================================================================
   Fagfeltrutenett
   ========================================================================== */

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.cat-card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 18px 12px 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 132px; text-align: center;
  transition: border-color .13s, transform .13s;
}
.cat-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--fam);
}
.cat-card:hover { border-color: var(--fam); transform: translateY(-1px); }
.cat-card .ico { font-size: 40px; color: var(--fam); }
.cat-card .nm { font-size: 13px; font-weight: 650; line-height: 1.25; }
.cat-card .ct { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }

.fam-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

/* ==========================================================================
   Eksamensliste
   ========================================================================== */

.exam-row {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 13px 15px; margin-bottom: 9px;
  min-height: 62px;
  transition: border-color .13s, background .13s;
}
.exam-row:hover { border-color: var(--border-strong); background: var(--surface-2); }
.exam-row .ring {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  color: var(--ink-3); background: var(--surface-2);
  border: 2px solid var(--border);
}
.exam-row.started .ring { border-color: var(--accent); color: var(--accent); }
.exam-row.done .ring { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok); }
/* Inngangen til øving per moduluke står øverst i blokk 2, og er ikke et sett. */
.exam-row.uke-inngang { margin-bottom: 16px; }
.exam-row.uke-inngang .ring { color: var(--accent); border-color: var(--accent); }
.exam-row.uke-inngang .ring svg { width: 16px; height: 16px; }
.exam-row .t { font-family: var(--display); font-weight: 700; font-size: 16px; }
.exam-row .s { font-size: 12.5px; color: var(--ink-2); margin-top: 1px; }
.exam-row .go { color: var(--ink-3); font-size: 17px; }

/* ==========================================================================
   Fremdriftslinjer
   ========================================================================== */

.bar { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brand); border-radius: 4px; transition: width .3s; }
.bar.fam > i { background: var(--fam); }
.bar.thin { height: 5px; }

.progress-top {
  position: sticky; top: 0; z-index: 20;
  height: 3px; background: var(--surface-3);
}
.progress-top > i { display: block; height: 100%; background: var(--brand); transition: width .25s; }

/* ==========================================================================
   Oppgavevisning
   ========================================================================== */

.quiz-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.quiz-head .title {
  flex: 1; min-width: 0; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--brand);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.quiz-head .count { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink-2); }
@media (min-width: 900px) { .quiz-head .title { font-size: 24px; } .quiz-head .count { font-size: 18px; } }

.quiz-meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 10px 0 14px; }
.quiz-meta .term { margin-left: auto; font-weight: 600; font-size: 13px; color: var(--ink-2); }

/* `min-width: 0` er ikke pynt. Uten den får rutenettcellene automatisk
   minstebredde, og en bred tabell i oppgaveteksten dytter hele siden ut over
   skjermkanten i stedet for å rulle inni seg selv — også brødteksten ble
   avkuttet på mobil. */
.quiz-body { display: grid; gap: 18px; }
.quiz-body > * { min-width: 0; }
@media (min-width: 1000px) {
  .quiz-body { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 30px; align-items: start; }
}

.stem { font-size: 16.5px; line-height: 1.55; }
@media (min-width: 900px) { .stem { font-size: 17.5px; } }
.stem-p { margin: 0 0 12px; white-space: pre-wrap; }
.stem-p:last-child { margin-bottom: 0; }

/* Ledetråder: merkene står i teksten hele tiden, men farges bare når de er
   slått på. Gult som en tusj — ikke grønt eller rødt, som betyr riktig og feil. */
.stem mark.ledetrad { background: none; color: inherit; }
.stem[data-ledetrader="på"] mark.ledetrad {
  --tusj: color-mix(in srgb, var(--warn) 24%, transparent);
  background: var(--tusj); box-shadow: 0 0 0 2px var(--tusj);
  border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.stem[data-ledetrader="på"] .ledetrad-celle { background: color-mix(in srgb, var(--warn) 24%, transparent); }
.ledetrad-merknad { display: none; margin: 10px 0 0; align-items: center; gap: 6px; }
.ledetrad-merknad svg { width: 14px; height: 14px; flex: none; }
.stem[data-ledetrader="på"] ~ .ledetrad-merknad { display: flex; }

/* Rammen ligger på boksen rundt, ikke på tabellen. Rullingen må skje i et
   element som ikke er tabellen selv: en `<table>` med `display: block` mister
   tabellayouten, og kolonnene sluttet å stille seg etter hverandre. */
.stem-tabell {
  max-width: 100%; overflow-x: auto; margin: 6px 0 14px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.stem-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.stem-table th, .stem-table td {
  padding: 6px 11px; border-bottom: 1px solid var(--border);
  text-align: left;
}
.stem-table .nb { white-space: nowrap; }
@media (max-width: 420px) {
  .stem-table { font-size: 13.5px; }
  .stem-table th, .stem-table td { padding: 6px 8px; }
}

/* Hintet står bare under de tabellene som faktisk ruller. `data-mer` settes
   av `merkBredeTabeller()` i app.js etter at bredden er målt. */
.stem-tabell-mer { display: none; }
.stem-tabell[data-mer="ja"] + .stem-tabell-mer {
  display: block; margin: -8px 0 14px;
  font-size: 12.5px; color: var(--ink-3);
}
.stem-table thead th { background: var(--surface-2); font-weight: 600; font-size: 13px; color: var(--ink-2); }
.stem-table tbody tr:last-child td { border-bottom: none; }
.stem-table td { font-variant-numeric: tabular-nums; }

.stem-img { margin-top: 14px; }
.stem-img img {
  border-radius: var(--r-sm); border: 1px solid var(--border);
  cursor: zoom-in; display: block;
  /* Bevisst hvit uansett tema: røntgenbilder og figurer fra fasiten har ofte
     gjennomsiktig bakgrunn og blir uleselige på mørk flate. */
  background: #fff;
}

/* --- AFB: kreditering under figurene (CC BY-SA krever navn og lisens) --- */
.stem-img .kreditering { margin: 6px 2px 0; font-size: 12px; color: var(--ink-3); line-height: 1.4; }

/* --- AFB: rutenett, nedtrekk og rekkefølge (sykepleie) --- */
.rad {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 9px;
}
.rad.riktig { border-color: var(--ok-line); background: var(--ok-bg); }
.rad.feil { border-color: var(--err-line); background: var(--err-bg); }
.rad-tekst { font-size: 15.5px; line-height: 1.45; }
.rad-valg { display: flex; flex-wrap: wrap; gap: 6px; }
.rad-valg button {
  min-height: 36px; padding: 6px 12px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--ink-2); text-align: left;
}
.rad-valg button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: var(--brand-ink); }
.rad-valg button:disabled { cursor: default; }
.rad.feil .rad-valg button[aria-pressed="true"] { border-color: var(--err); background: var(--err); color: var(--err-bg); }
.rad.riktig .rad-valg button[aria-pressed="true"] { border-color: var(--ok); background: var(--ok); color: var(--ok-bg); }
.rad-fasit { display: flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 600; color: var(--ok); }
.rad-fasit svg { width: 15px; height: 15px; flex: none; }

select.nedtrekk {
  font: inherit; font-size: 15px; max-width: 100%; margin: 2px 2px; padding: 4px 8px; min-height: 34px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
}
.hull { padding: 1px 6px; border-radius: 6px; font-weight: 600; }
.hull.riktig { background: var(--ok-bg); color: var(--ok); }
.hull.feil { background: var(--err-bg); color: var(--err); }
.hull.feil s { opacity: .7; font-weight: 400; }

ol.rekke { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: rekke; }
ol.rekke li {
  counter-increment: rekke; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px 8px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
}
ol.rekke li::before {
  content: counter(rekke); flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; background: var(--surface-2); color: var(--ink-2);
}
ol.rekke li .txt { flex: 1; font-size: 15px; line-height: 1.4; }
ol.rekke li.fast { background: var(--surface-2); }
ol.rekke li.riktig { border-color: var(--ok-line); background: var(--ok-bg); }
ol.rekke li.feil { border-color: var(--err-line); background: var(--err-bg); }
ol.rekke .flytt { display: flex; gap: 4px; flex: none; }
ol.rekke .flytt button {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2);
}
ol.rekke .flytt svg { width: 18px; height: 18px; }
ol.rekke-fasit { margin: 6px 0 0; padding-left: 20px; }

/* --- svaralternativer --- */
.opts { display: flex; flex-direction: column; gap: 10px; }
.opt {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); transition: border-color .13s, background .13s;
}
.opt::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: transparent; transition: background .13s;
}
.opt-main {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 15px; width: 100%; text-align: left; min-height: 56px;
}
.opt-main .badge {
  width: 26px; height: 26px; flex: none; border-radius: 7px;
  display: grid; place-items: center; margin-top: 1px;
  font-size: 13px; font-weight: 700;
  background: var(--surface-2); color: var(--ink-2);
  transition: background .13s, color .13s;
}
.opt-main .txt { flex: 1; font-size: 15.5px; line-height: 1.45; }
.opt-main .caret { color: var(--ink-3); font-size: 16px; margin-top: 4px; }

.opt:not(.revealed):hover { border-color: var(--border-strong); background: var(--surface-2); }
.opt.picked { border-color: var(--brand); }
.opt.picked::before { background: var(--brand); }
.opt.picked .badge { background: var(--brand); color: var(--brand-ink); }

.opt.correct { border-color: var(--ok-line); background: var(--ok-bg); }
.opt.correct::before { background: var(--ok); }
.opt.correct .badge { background: var(--ok); color: var(--ok-bg); }
.opt.wrong { border-color: var(--err-line); background: var(--err-bg); }
.opt.wrong::before { background: var(--err); }
.opt.wrong .badge { background: var(--err); color: var(--err-bg); }

.expl {
  padding: 0 15px 14px 53px; font-size: 14.5px; line-height: 1.55;
}
.expl .rule { height: 1px; background: currentColor; opacity: .18; margin-bottom: 10px; }
.expl .none { color: var(--ink-3); font-style: italic; }

.note {
  margin-top: 12px; border-radius: var(--r); padding: 13px 15px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.note.ai { border-style: dashed; border-color: var(--brand); background: var(--brand-soft); }
.note .lbl {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--brand-soft-ink); margin-bottom: 7px;
}
.note p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; }
.note p:last-child { margin-bottom: 0; }

/* --- handlingsrad, festet nederst på mobil --- */
.quiz-foot { display: flex; gap: 10px; margin-top: 22px; }
.quiz-foot .btn { flex: 1; min-height: 50px; font-size: 16px; }
.quiz-foot .btn.narrow { flex: 0 0 auto; min-width: 52px; padding: 0 14px; }

@media (max-width: 899px) {
  /* Handlingsraden var `sticky` med bunnen 60-94 px over skjermkanten. Da svevde
     den midt på skjermen i stedet for å sitte fast, og dekket alternativene bak
     seg. Nå er den festet til kanten, og bunnmenyen viker mens du er i en
     oppgave — tilbakeknappen øverst tar deg ut. */
  /* `bottom: 0` er bunnen av *layout*-vindusruten, ikke av det du ser. På iOS
     skiller de to lag når en samtale legger en stripe på toppen, når
     tastaturet er oppe, eller når siden er knipset til. Da tegnes raden midt
     på skjermen, med svaralternativer både over og under seg. --vv-bunn er
     avstanden mellom de to, satt fra visualViewport i app.js, og er 0 når de
     er like — altså i alle nettlesere der dette ikke er et problem. */
  .quiz-foot {
    position: fixed; left: 0; right: 0; bottom: var(--vv-bunn, 0px); z-index: 45;
    margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
  }
  [data-visning="oppgave"] .tabbar { display: none; }
  /* Plassen handlingsraden tar, siden den ikke lenger er med i flyten. */
  [data-visning="oppgave"] .main {
    /* --foot-h settes fra faktisk høyde i renderQuestion; 70px er reserven
       fram til den er målt. */
    padding-bottom: calc(var(--foot-h) + var(--vv-bunn, 0px) + 24px + env(safe-area-inset-bottom));
  }
}

/* --- bildeforstørrelse --- */
.zoom {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(4, 12, 20, .88); padding: 20px;
}
.zoom img { max-width: 100%; max-height: 100%; border-radius: var(--r-sm); background: #fff; }

/* ==========================================================================
   Lister
   ========================================================================== */

.row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.row:last-child { border-bottom: none; }
.row .mk { font-size: 16px; }
.row .mk.ok { color: var(--ok); }
.row .mk.no { color: var(--err); }
.row .tx {
  flex: 1; min-width: 0; font-size: 14px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Etiketten under teksten skal stå på egen linje. .tx er en -webkit-box (for
   linjeklipping), og der er en span inline — «Velg fagfeltØv på ett fag om
   gangen» sto som ett ord til dette kom. */
.row .meta { display: block; font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.row .tag { font-size: 11.5px; color: var(--ink-2); background: var(--surface-2); padding: 3px 8px; border-radius: 6px; }

/* Raden som skal ses først i en liste av like rader. Brukes på «Legg den til
   som app» — den er lett å gå forbi, og er nettopp det folk vil ha. */
.row.fremhevet {
  background: var(--brand-soft); color: var(--brand-soft-ink);
  border-bottom: none; border-radius: var(--r);
  padding: 12px 12px; margin: 8px 0 4px;
}
.row.fremhevet .meta { color: inherit; opacity: .8; }
.row.fremhevet .go { color: inherit; }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
.table th { font-weight: 600; color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .3px; }
.table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr:last-child td { border-bottom: none; }

/* ==========================================================================
   Faner
   ========================================================================== */

.tabs {
  display: flex; gap: 4px; margin-bottom: 16px;
  background: var(--surface-2); padding: 4px; border-radius: var(--r);
}
.tabs button {
  flex: 1; min-height: 38px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  transition: background .13s, color .13s;
}
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

.seg { display: inline-flex; gap: 2px; background: var(--surface-2); padding: 3px;
  border-radius: var(--r-sm); max-width: 100%; overflow-x: auto; }
/* Segmentene er knapper der valget er ren visningstilstand, og lenker der
   det ligger i adressen. De skal se like ut. */
.seg button, .seg a {
  display: inline-flex; align-items: center; white-space: nowrap;
  min-height: 32px; padding: 0 12px; border-radius: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.seg button[aria-selected="true"], .seg a[aria-selected="true"] {
  background: var(--surface); color: var(--ink);
}

/* ==========================================================================
   Temabytte

   Chromium re-resolver ikke var() på allerede tegnede elementer når
   variabelen endres på en forfar, dersom egenskapen har en transition.
   Resultatet er at svaralternativene blir hengende igjen i forrige tema.
   Vi slår derfor av alle overganger i det øyeblikket temaet byttes — det
   fjerner både feilen og en uønsket kryssfade av hele grensesnittet.
   ========================================================================== */

.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after {
  transition: none !important;
}

/* Kildelenkene på Om-siden er mange og korte — de trenger eget trykkareal. */
.src-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 16px; }
.src-links a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px;
  border-radius: var(--r-sm); background: var(--surface-2); color: var(--brand);
  font-size: 13.5px; font-weight: 500;
}
.src-links a:hover { background: var(--surface-3); }

/* ==========================================================================
   Installasjonshint (kun Safari på iOS)
   ========================================================================== */

.install-hint {
  position: fixed; z-index: 45;
  left: 12px; right: 12px;
  bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom));
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 14px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  font-size: 13.5px; line-height: 1.45;
}
.install-hint .ico { color: var(--brand); font-size: 19px; margin-top: 1px; }
.install-hint .icon-btn { margin: -6px -6px 0 0; width: 34px; height: 34px; font-size: 16px; }
.install-hint .hint-tekst {
  flex: 1; min-width: 0; text-align: left; font: inherit; line-height: 1.45;
}
.install-hint .hint-mer {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
  font-weight: 600; color: var(--brand);
}
.install-hint .hint-mer svg { width: 14px; height: 14px; }
/* På pc-en er det ingen fanelinje å holde seg over, og en boble over hele
   bredden ser ut som en feilmelding. */
@media (min-width: 900px) {
  .install-hint { left: auto; right: 24px; bottom: 24px; max-width: 420px; }
}

/* ==========================================================================
   Skjemafelt
   ========================================================================== */

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 46px; padding: 10px 13px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--r);
  font: inherit; font-size: var(--felt-skrift);
}
.field textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
.field small { display: block; margin-top: 5px; font-size: 12.5px; }

/* Sikkerhetsnett for felter uten egen regel — se --felt-skrift i :root. */
input, textarea, select { font-size: var(--felt-skrift); }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--brand); flex: none; }

.sidebar-foot + .sidebar-foot { margin-top: 0; padding-top: 8px; border-top: none; }
.sidebar-foot[data-auth-slot] { margin-top: auto; }
.sidebar-foot[data-auth-slot]:empty { display: none; }

/* Lås på innhold som krever konto */
.lock {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-3);
}
.lock svg { width: 13px; height: 13px; }
.exam-row.is-locked .t, .cat-card.is-locked .nm { color: var(--ink-2); }
.cat-card.is-locked .ico { opacity: .55; }

/* ==========================================================================
   Diskusjon
   ========================================================================== */

.cmt-section {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--border);
}
.cmt-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.cmt-head .h-sec { margin: 0; }

.switch {
  display: inline-flex; align-items: center; gap: 9px;
  margin-left: auto; font-size: 13.5px; color: var(--ink-2);
  cursor: pointer; min-height: 40px;
}
.switch input {
  appearance: none; width: 40px; height: 23px; flex: none;
  border-radius: 999px; background: var(--surface-3);
  position: relative; cursor: pointer; transition: background .15s;
}
.switch input::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow);
  transition: transform .15s;
}
.switch input:checked { background: var(--brand); }
.switch input:checked::after { transform: translateX(17px); }

.cmt {
  padding: 13px 0; border-top: 1px solid var(--border);
}
.cmt.reply {
  margin-left: 16px; padding-left: 14px;
  border-top: none; border-left: 2px solid var(--border);
}
.cmt header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.cmt .who { font-weight: 650; font-size: 14px; }
.cmt .who.anon { color: var(--ink-2); font-style: italic; }
.cmt .mine {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  background: var(--brand-soft); color: var(--brand-soft-ink);
  padding: 2px 6px; border-radius: 5px;
}
.cmt time, .cmt .edited { font-size: 12px; color: var(--ink-3); }
.cmt p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmt footer { display: flex; align-items: center; gap: 14px; }

.cmt .vote {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--ink-2); min-height: 34px;
}
.cmt .vote svg { width: 15px; height: 15px; }
.cmt .vote[aria-pressed="true"] { color: var(--brand); font-weight: 600; }
.cmt .link {
  font-size: 13px; color: var(--ink-2); min-height: 34px;
}
.cmt .link:hover { color: var(--ink); text-decoration: underline; }
.cmt .link[disabled] { color: var(--ink-3); text-decoration: none; cursor: default; }

.composer { margin-top: 14px; }
.composer textarea {
  width: 100%; min-height: 84px; padding: 11px 13px; resize: vertical;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--r);
  font: inherit; font-size: var(--felt-skrift); line-height: 1.5;
}
.composer textarea:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
.composer-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px;
}
.composer-foot .anon-check { font-size: 13.5px; }
.composer-foot .as { margin-left: auto; }
.composer-msg { margin: 8px 0 0; }
.reply-box { margin-top: 4px; }

/* ==========================================================================
   Løpende tekst (juridiske sider og Om)
   ========================================================================== */

.prose { max-width: 68ch; line-height: 1.65; }
.prose p { margin: 0 0 14px; }
.prose ol, .prose ul { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin-bottom: 7px; }
.prose .h-sec { margin-top: 22px; }
.prose .h-sec:first-child { margin-top: 0; }
.prose code {
  font-size: 13.5px; padding: 1px 5px; border-radius: 5px;
  background: var(--surface-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Bunntekst med juridiske lenker */
.footer-links {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--ink-3);
}
.footer-links a { color: var(--ink-2); }
.footer-links a:hover { color: var(--brand); }

/* Egenvurdering av kortsvarsoppgaver, der maskinen ikke kan rette. */
.selfcheck {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-right: auto;
}

/* ==========================================================================
   Settfilter på fagfeltsiden
   ========================================================================== */

.settfilter { margin-bottom: 16px; padding: 0; }
.settfilter-topp {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; text-align: left; color: var(--ink);
}
.settfilter-topp .tx { flex: 1; min-width: 0; display: block; }
.settfilter-topp .meta { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.settfilter-topp svg { width: 18px; height: 18px; color: var(--ink-3); flex: 0 0 auto; }
.settfilter-topp[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }

.settfilter-knapper { display: flex; gap: 8px; padding: 0 16px 12px; }
.settfilter-liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 2px; padding: 0 10px 12px;
}
.settvalg {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 6px; border-radius: var(--r-sm); cursor: pointer;
  font-size: 14px; min-height: 44px;      /* trykkflate på mobil */
}
.settvalg:hover { background: var(--surface-2); }
.settvalg input { width: 18px; height: 18px; accent-color: var(--brand); flex: 0 0 auto; }
.settvalg .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cat-card .ct .av { color: var(--ink-3); }
/* Kopi-knappen ligger utenpå kortet, så den ikke blir en lenke i lenken */
/* Cellen strekkes til radens høyde, kortet må fylle cellen — ellers ble et fag
   med navn over tre linjer («Væske, elektrolytter og syre–base») høyere enn naboene. */
.cat-celle { position: relative; display: flex; }
.cat-celle > .cat-card { flex: 1; min-width: 0; }
.cat-celle .cat-kopi { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; font-size: 15px; opacity: .55; }
.cat-celle .cat-kopi:hover { opacity: 1; }
.cat-card.is-tom { opacity: .45; }

/* --------------------------------------------------------------------------
   Utvalgsfilteret på fagfeltsiden
   Grupper av avkryssinger: ett felt per løp, og ett for årstall.
   -------------------------------------------------------------------------- */

.filtergruppe { margin-top: 14px; }
.filtergruppe:first-of-type { margin-top: 10px; }
/* I filterkortet (som har padding 0) må gruppene selv holde avstand til
   kanten — ellers står «NASJONAL DELEKSAMEN» og årstallsboksene klint inntil
   den. Listen og tittelen får samme venstrekant som avkryssingsboksene. */
.settfilter .filtergruppe { padding: 0 16px; }
.settfilter .filtergruppe:last-child { padding-bottom: 16px; }
.settfilter .filtergruppe .settfilter-liste { padding: 0 0 6px; }
.settfilter .filtergruppe .settfilter-knapper { padding: 0 0 10px; }
.settfilter .filtergruppe-tittel { padding-left: 6px; }

.filtergruppe-tittel {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}

/* Årstall er korte etiketter og skal ligge på rad, ikke i én lang spalte. */
.arvalg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.settvalg.kompakt {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

/* Moduler og årstall hver for seg: to knapper som sier hva som er valgt, og
   hvert sitt panel. Navnene kuttes bare i den lukkede knappen — i panelet
   står de alltid fullt ut, og brikkene brytes over flere linjer. */
.utvalg-topp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 12px 0; }
.utvalg-knapp {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 10px 12px; text-align: left; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
}
.utvalg-knapp:hover { background: var(--surface-2); }
.utvalg-knapp[aria-expanded="true"] { border-color: var(--brand); }
.utvalg-knapp > svg { width: 18px; height: 18px; color: var(--ink-3); flex: 0 0 auto; }
.utvalg-knapp[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.utvalg-knapp .tx { flex: 1; min-width: 0; display: block; }
.utvalg-knapp .tx b {
  display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
}
.utvalg-knapp .tx span { display: block; font-size: 14px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utvalg-sum { margin: 0; padding: 10px 16px 12px; font-size: 13px; color: var(--ink-2); }
.utvalg-sum b { color: var(--ink); font-variant-numeric: tabular-nums; }
.utvalg-panel { padding: 2px 16px 16px; border-top: 1px solid var(--border); }
/* Panelet holder kanten selv; de gamle filterreglene la på egen luft. */
.utvalg-panel .filtergruppe, .settfilter .utvalg-panel .filtergruppe { padding: 0; }
.utvalg-panel .filtergruppe-tittel, .settfilter .utvalg-panel .filtergruppe-tittel { padding-left: 0; }
.utvalg-fot { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-3); }

.modulrad { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 4px 0; }
.modulrad.uten-navn { grid-template-columns: minmax(0, 1fr); }
.modulrad-navn {
  justify-self: start; min-height: 36px; padding: 0; text-align: left;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.modulrad-navn:hover { color: var(--brand); }
.brikker { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.brikke {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; max-width: 100%;
  padding: 5px 12px; font-size: 14px; color: var(--ink); text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
}
.brikke:hover { border-color: var(--border-strong); }
.brikke .ant { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.brikke svg { width: 14px; height: 14px; flex: 0 0 auto; }
.brikke[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-soft-ink); }
.brikke[aria-pressed="true"] .ant { color: var(--brand-soft-ink); opacity: .8; }

.arvalg-rad { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.arvalg-felt { margin: 0; flex: 0 1 140px; }
.eldre-valg { margin-top: 14px; }
/* Apples merke: uendret, minst 40 px høyt, med luft rundt (Apples retningslinjer). */
.appstore-merke { display: inline-flex; align-self: flex-start; line-height: 0; }
.appstore-merke img { height: 40px; width: auto; }
.appstore-merke:hover { opacity: .85; }
.forside-merke { margin-top: 14px; }
/* På forsiden står merket i knapperaden, like høyt som knappene. */
.forside-knapper { align-items: center; }
.forside-knapper .forside-merke { margin-top: 0; align-self: center; }
.forside-knapper .forside-merke img { height: 50px; }
.salgskort .appstore-merke { margin-top: auto; padding-top: 6px; }
.enkeltsett-knapp {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin-top: 14px;
  padding: 0; font-size: 14px; font-weight: 600; color: var(--brand);
}
.enkeltsett-knapp svg { width: 16px; height: 16px; flex: 0 0 auto; }
.enkeltsett-knapp[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.enkeltsett { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border); }
.enkeltsett .modulrad { grid-template-columns: 52px minmax(0, 1fr); }

/* Veiviseren bruker de samme panelene. */
.utvalg-veiviser .filtergruppe:first-child { margin-top: 0; }

@media (max-width: 560px) {
  .utvalg-topp { grid-template-columns: minmax(0, 1fr); }
  .modulrad { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 6px 0; }
  .modulrad-navn { min-height: 28px; }
}

/* --------------------------------------------------------------------------
   Søk
   Ett felt, treffliste med utdrag. Uthevingen bruker --warn-bg, som er den
   ene bakgrunnen i paletten som ikke betyr riktig eller feil.
   -------------------------------------------------------------------------- */

.sokfelt {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 4px 14px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow);
}
.sokfelt:focus-within { border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: 0; }
.sokfelt > svg { width: 18px; height: 18px; color: var(--ink-3); flex: 0 0 auto; }
.sokfelt input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 16px;               /* under 16 px zoomer iOS inn */
  padding: 10px 0; outline: none;
}
.sokfelt input::-webkit-search-cancel-button { display: none; }

.sok-topp {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; font-size: 14px;
}
.sok-knapper { display: flex; gap: 8px; flex-wrap: wrap; }

.sok-liste .row { color: inherit; }
.sok-liste .row .tx { -webkit-line-clamp: 4; color: inherit; }
.sok-liste .row .meta { display: block; margin: 0 0 3px; }
.sok-liste .row .icon-btn { width: 36px; height: 36px; }
.sok-liste .row .icon-btn.er-med { color: var(--ok); }

/* Merket som viser at man er uten nett. Tegnes bare når <html data-nett="av">. */
.nettmerke {
  display: none; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--warn); background: var(--warn-bg);
}
.nettmerke::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
[data-nett="av"] .nettmerke { display: inline-flex; }
.nettmerke.side { margin: 6px 12px; justify-content: center; }

/* «Velg tre alternativer» over alternativene */
.opt-hint { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.opt-hint svg { width: 15px; height: 15px; }

/* AI-hjelpen under en oppgave */
.ai { margin-top: 14px; }
.ai-knapper { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ai-knapper .ai-igjen { margin-left: auto; }
.ai-panel {
  margin-top: 12px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
}
.ai-topp { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 14px; }
.ai-topp .icon-btn { width: 34px; height: 34px; }
.ai-sporsmal { font-size: 14px; color: var(--ink-2); font-style: italic; margin: 0 0 8px; white-space: pre-wrap; }
.ai-svar { font-size: 15px; line-height: 1.55; }
.ai-svar p { margin: 0 0 10px; }
.ai-svar ul, .ai-svar ol { margin: 0 0 10px; padding-left: 22px; }
.ai-svar li { margin: 3px 0; }
.ai-svar code { font-family: ui-monospace, monospace; font-size: 13.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.ai-feil { color: var(--err); margin: 0; }
.md-tabell { overflow-x: auto; margin: 0 0 10px; }
.md-tabell table { border-collapse: collapse; font-size: 14px; }
.md-tabell th, .md-tabell td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.md-tabell th { font-weight: 650; color: var(--ink-2); }
.ai-fot { margin: 8px 0 0; }
.ai-samtykke p { margin: 0 0 8px; }
.ai-samtykke .ai-knapper { margin-top: 12px; }
/* Skjemaet, «Ny samtale» og panelet vises og skjules med `hidden`. Flere av dem
   har egen display-verdi, som ellers ville vunnet over nettleserens [hidden]. */
.ai [hidden] { display: none !important; }
.ai-topp-knapper { display: flex; align-items: center; gap: 4px; }

/* Samtalen: dine meldinger til høyre i en boble, svarene i full bredde. */
.ai-traad { display: flex; flex-direction: column; gap: 10px; }
.ai-tur.bruker {
  align-self: flex-end; max-width: 85%;
  padding: 8px 12px; background: var(--surface-2); border-radius: var(--r-sm);
}
.ai-tur.bruker p { margin: 0; font-size: 14px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-tur.ai { min-width: 0; }
.ai-tur.ai .ai-svar > :last-child { margin-bottom: 0; }
.ai-tur .ai-feil + .btn { margin-top: 8px; }
.ai-vurdering { display: flex; gap: 2px; margin-top: 6px; }
.ai-vurdering .icon-btn { width: 32px; height: 32px; color: var(--ink-3); }
.ai-vurdering .icon-btn svg { width: 16px; height: 16px; }
.ai-vurdering .icon-btn[aria-pressed="true"] { color: var(--brand); }

.ai-skjema { display: flex; gap: 8px; align-items: flex-end; margin: 12px 0 0; }
.ai-skjema textarea {
  flex: 1; min-width: 0; resize: vertical; font: inherit; font-size: var(--felt-skrift); line-height: 1.45;
  padding: 8px 10px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.ai-skjema textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }

/* Fanen «Bruk» i admin: søyler per dag, varmekart per ukedag og time, og
   tabeller som ruller sidelengs på mobil i stedet for å dytte siden ut. */
.bruk-tabell { overflow-x: auto; min-width: 0; }
.bruk-tabell .table th { white-space: nowrap; }
.bruk-soyler { display: flex; align-items: flex-end; gap: 2px; height: 120px; margin: 8px 0 4px; }
.bruk-soyler span { flex: 1 1 0; min-width: 2px; background: var(--brand); border-radius: 2px 2px 0 0; opacity: .85; }
.bruk-akse { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); }
.bruk-varme { border-collapse: separate; border-spacing: 2px; font-size: 11px; }
.bruk-varme td { width: 14px; min-width: 14px; height: 14px; padding: 0; border-radius: 3px; background: var(--brand); }
.bruk-varme th { font-weight: 500; color: var(--ink-3); padding: 0 4px 0 0; text-align: right; }
.bruk-varme thead th { text-align: left; padding: 0; }

/* Modellvelgeren i admin */
.modell-treff { border: 1px solid var(--border); border-radius: var(--r-sm); margin-top: 6px; max-height: 280px; overflow-y: auto; background: var(--surface); }
.modell-rad { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
.modell-rad:last-child { border-bottom: none; }
.modell-rad:hover { background: var(--surface-2); }
.modell-valgt { display: block; margin-top: 5px; }

/* Notatet under en oppgave, og notatlisten */
.notat { margin-top: 18px; }
.notat-topp { padding: 10px 0 !important; }
.notat-topp .meta { font-size: 12.5px; }
.notat textarea {
  width: 100%; min-height: 96px; margin-top: 6px; padding: 10px 12px; resize: vertical;
  font: inherit; font-size: var(--felt-skrift); line-height: 1.5; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
}
.notat textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
.notat-tekst { display: block; white-space: pre-wrap; margin: 2px 0 4px; }

/* Bunken det legges i fra søkesiden, og navnefeltet på bunkesiden */
.bunkelinje { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bunkelinje .mk { color: var(--brand); display: inline-flex; }
.bunkelinje .mk svg { width: 20px; height: 20px; }
.bunkelinje .tx { flex: 1; min-width: 140px; font-size: 14px; }
.bunkelinje .meta { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.bunke-navn { display: flex; gap: 8px; flex: 1; min-width: 0; align-items: center; }
.bunke-navn input {
  flex: 1; min-width: 0; font: inherit; font-size: 20px; font-weight: 700; color: var(--ink);
  background: transparent; border: 0; border-bottom: 2px solid var(--border); padding: 4px 0;
}
.bunke-navn input:focus { outline: none; border-bottom-color: var(--brand); }
.sok-liste .utdrag { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.sok-liste mark { background: var(--warn-bg); color: var(--ink); border-radius: 3px; padding: 0 1px; }
/* Nedlasting for offline: fremdrift og listen over det som ligger lagret */
.offline-bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.offline-bar > i { display: block; height: 100%; background: var(--brand); transition: width .3s; }
.settliste-kompakt { display: flex; flex-wrap: wrap; gap: 6px; }

.sok-kopi {
  width: 100%; min-height: 160px; margin-bottom: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
  color: var(--ink); font: inherit; font-size: var(--felt-skrift); line-height: 1.45; resize: vertical;
}

.settvalg .count {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Forsiden for den som ikke er logget inn
   --------------------------------------------------------------------------
   Dette er det første noen ser. Den som allerede har konto får dashbordet;
   denne siden finnes for å svare på ett spørsmål — hva er dette, og hvorfor
   skal jeg bruke det? — og så komme seg unna.

   Alt er bygget på de samme variablene som resten, så siden ser riktig ut i
   alle tre utseendene. Ingenting her er glass-spesifikt.
   ========================================================================== */

.forside { max-width: 1000px; }

/* Knapt luft på mobil: tegningen, merkelappen, overskriften, ingressen og
   knappen skal ned på én skjermhøyde på en iPhone. */
.forside-topp {
  display: grid; gap: 18px; align-items: center;
  padding: 4px 0 26px;
}
/* Toppen deles i to spalter først ved 1080px. Sidemenyen tar 264px fra og med
   900px, og en overskrift på 48px i det som da blir igjen av venstre spalte
   har ikke plass til et medisinsk ord. */
@media (min-width: 1080px) {
  .forside-topp {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 40px; padding: 18px 0 44px;
  }
}

.merkelapp {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px 6px 9px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.merkelapp::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}

.forside-tittel {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(31px, 7.4vw, 50px); line-height: 1.06; letter-spacing: -.03em;
  margin: 16px 0 0;
  /* `body` bryter lange ord for å hindre at siden kan dras sidelengs. I en
     overskrift på 50px blir det synlig stygt, så her brytes det på mellomrom.
     Prisen er at ingen ord i overskriften kan være lange. */
  overflow-wrap: normal;
}
.forside-ingress {
  font-size: 16.5px; line-height: 1.55; color: var(--ink-2);
  margin: 14px 0 0; max-width: 46ch;
}
@media (min-width: 900px) { .forside-ingress { font-size: 17.5px; } }

.forside-knapper { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.forside-knapper .btn { min-height: 50px; padding: 0 22px; }
.forside-fot { margin: 14px 0 0; }

/* --- kortstabelen i toppen ---------------------------------------------
   En tegning av produktet, ikke et bilde: tre oppgavekort som ligger på
   hverandre, med ett riktig og ett feil svar merket. Bygget av variabler,
   så den følger tema og utseende av seg selv. */

/* Bare det øverste kortet ligger i flyten; de to bak er absolutte og skyves
   ut med transform. Høyden må derfor komme fra kortet selv — en fast høyde her
   ville latt kortet vokse ut av beholderen og legge seg over merkelappen. */
.forside-kort {
  position: relative; min-height: 168px;
  display: grid; place-items: center;
  order: -1;                       /* over teksten når alt ligger i én spalte */
}
@media (min-width: 1080px) { .forside-kort { min-height: 300px; order: 0; } }

.fk {
  position: absolute; width: min(78%, 270px); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.fk-3 { height: 132px; transform: rotate(-7deg) translate(-24px, 16px); opacity: .55; }
.fk-2 { height: 148px; transform: rotate(4deg)  translate(20px, 8px);  opacity: .78; }
.fk-1 {
  position: relative; padding: 16px; display: flex; flex-direction: column; gap: 8px;
  transform: rotate(-1.5deg);
}
@media (min-width: 1080px) {
  .fk-3 { transform: rotate(-8deg) translate(-40px, 22px); }
  .fk-2 { transform: rotate(5deg)  translate(34px, 12px); }
}

.fk-merke {
  align-self: flex-start; padding: 3px 9px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-soft-ink);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}
.fk-linje { height: 8px; border-radius: 4px; background: var(--surface-3); }
.fk-linje.kort { width: 62%; margin-bottom: 4px; }

.fk-svar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
.fk-svar b {
  width: 18px; height: 18px; flex: none; border-radius: 5px;
  background: var(--surface-2); color: var(--ink-3);
  display: grid; place-items: center; font-size: 9.5px;
}
.fk-svar i { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); }
.fk-svar.rett { border-color: var(--ok-line); background: var(--ok-bg); }
.fk-svar.rett b { background: var(--ok); color: var(--ok-bg); }
.fk-svar.feil { border-color: var(--err-line); background: var(--err-bg); }
.fk-svar.feil b { background: var(--err); color: var(--err-bg); }

/* --- salgspunktene ------------------------------------------------------ */

.forside-bolk { margin: 34px 0 14px; }
.forside-bolk .h-sec { font-size: 20px; }
.forside-bolk p { margin: 4px 0 0; }

.salg { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .salg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .salg { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.salgskort {
  display: flex; flex-direction: column; gap: 9px; width: 100%; text-align: left;
  padding: 18px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color .14s, transform .14s;
}
.salgskort .ico {
  width: 40px; height: 40px; border-radius: var(--r); flex: none;
  display: grid; place-items: center; font-size: 20px;
  background: var(--brand-soft); color: var(--brand-soft-ink);
}
.salgskort h3 { font-size: 16px; font-weight: 700; line-height: 1.25; }
.salgskort p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* Bare kortet som faktisk gjør noe når du trykker, oppfører seg som en knapp. */
.salgskort.trykk { cursor: pointer; }
.salgskort.trykk:hover { border-color: var(--brand); transform: translateY(-2px); }
.salgskort .mer {
  margin-top: auto; padding-top: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--brand);
}
.salgskort .mer svg { width: 15px; height: 15px; }

/* «Alt som finnes»: løpene per studium. */
.lop-studium { font-size: 15px; font-weight: 700; color: var(--ink-2); margin: 18px 0 10px; }
.forside-bolk + .lop-studium { margin-top: 4px; }
.lop-kort { color: inherit; text-decoration: none; }
.lop-kort .lop-tall {
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.forside-slutt { margin-top: 26px; text-align: center; }

/* Veiviseren, steg 3: ikonet ved siden av teksten, ikke over. */
.veiviser-ai { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; }
.veiviser-ai svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--brand); }
.forside-slutt .h-sec { font-size: 19px; }
.forside-slutt p { max-width: 52ch; margin: 6px auto 0; }
.forside-slutt .forside-knapper { justify-content: center; }

/* ==========================================================================
   Support-tråd og adminsiden
   ========================================================================== */

.traad { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.traad-melding {
  padding: 11px 13px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--border);
}
/* Våre egne svar står på merkefargen, så en tråd kan leses uten å lese hvem. */
.traad-melding.fra-oss {
  background: var(--brand-soft); border-color: transparent; color: var(--brand-soft-ink);
}
.traad-melding .hvem { font-size: 11.5px; font-weight: 600; opacity: .75; margin-bottom: 4px; }
.traad-melding p { margin: 0; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; }

.admin-rad { margin-bottom: 12px; }
/* Kortene i en fane (gruppene, særlig) gikk over i hverandre uten luft. */
#admin-kropp > .card + .card { margin-top: 12px; }
.admin-topp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-knapper { display: flex; flex-wrap: wrap; gap: 6px; }

/* ==========================================================================
   Veiviseren «Hva øver du til?»
   --------------------------------------------------------------------------
   To spørsmål, ett per skjerm. Den skriver til de samme innstillingene som
   filteret på fagfeltsiden, og gjenbruker derfor .settvalg og .arvalg.
   ========================================================================== */

.veiviser { max-width: 620px; }
.veiviser-steg {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 8px;
}
/* I filteret er navnene korte nok, og en avkortet etikett er akseptabel i en
   sammenslått boks. Her er valget hele poenget med skjermen, så «Modul 5
   samfunnsmedisin» må stå helt. */
.veiviser .settfilter-liste {
  padding: 0; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.veiviser .settvalg { align-items: flex-start; }
.veiviser .settvalg .nm { white-space: normal; overflow: visible; line-height: 1.35; }
.veiviser .settvalg input { margin-top: 1px; }
.veiviser .settvalg .count { align-self: flex-start; white-space: nowrap; }

.veiviser-sum {
  margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r);
  background: var(--brand-soft); color: var(--brand-soft-ink);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.veiviser-knapper { display: flex; gap: 10px; margin-top: 16px; }
.veiviser-knapper .btn { min-height: 50px; flex: 1; }
.veiviser-knapper .btn.ghost { flex: 0 0 auto; }
.veiviser-fot { margin: 16px 0 0; }
.veiviser-fot .link {
  color: var(--brand); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px; font-size: inherit;
}

/* ==========================================================================
   Ark — dialogen som forklarer hvordan siden legges til som app
   --------------------------------------------------------------------------
   Bunnark på mobil, midtstilt boks på skrivebord. `<dialog>` gir oss
   fokusfelle, Escape og bakgrunnssperre uten en linje JavaScript.
   ========================================================================== */

.ark {
  border: none; padding: 0; background: none; color: var(--ink);
  width: 100%; max-width: 100%;
  max-height: 88dvh;
  margin: auto auto 0;
}
.ark::backdrop { background: var(--sperre); }
@media (min-width: 700px) {
  .ark { max-width: 470px; margin: auto; }
}

.ark-inni {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  max-height: 88dvh; overflow-y: auto;
}
@media (min-width: 700px) { .ark-inni { border-radius: var(--r-xl); padding: 22px; } }

.ark[open] { animation: ark-inn .22s ease-out; }
@keyframes ark-inn { from { transform: translateY(18px); opacity: 0; } }

.ark-topp { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.ark-topp .h-sec { flex: 1; font-size: 19px; }
.ark-topp .icon-btn { margin: -8px -6px 0 0; }

.ark-steg { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: steg; }
.ark-steg li {
  position: relative; padding: 0 0 16px 40px; counter-increment: steg;
  font-size: 14.5px; line-height: 1.5;
}
.ark-steg li::before {
  content: counter(steg);
  position: absolute; left: 0; top: -1px;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-soft-ink);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
/* Streken mellom trinnene, så de leses som en rekkefølge og ikke en liste. */
.ark-steg li:not(:last-child)::after {
  content: ''; position: absolute; left: 13px; top: 31px; bottom: 6px;
  width: 1px; background: var(--border);
}
.ark-steg li:last-child { padding-bottom: 0; }
.ark-steg b { font-weight: 700; }

/* Delingsikonet til iOS finnes ikke i icons.js — den filen er generert, og
   ikonet hører til én forklaring, ikke til grensesnittet. */
.ark-ikon {
  display: inline-block; width: 1em; height: 1em;
  vertical-align: -.14em; margin: 0 1px;
}

/* ==========================================================================
   Tema «glass» — formen
   --------------------------------------------------------------------------
   Fargene ligger i :root-blokken øverst. Her ligger bare det som ikke er en
   farge: uskarpheten bak flatene, lyset langs overkanten og bakgrunnslaget.

   Uskarphet koster. Den ligger derfor bare på de store beholderne — kort,
   sidemeny, topp- og bunnstripe — og ikke på hver rad inni dem. To lag
   uskarphet oppå hverandre blir dessuten grumsete, ikke dypere: radene inni
   er gjennomsiktige og låner beholderens.
   ========================================================================== */

/* Grunnflaten. Ligger på et fast lag i stedet for på `body`, slik at himmelen
   står stille mens siden rulles — en bakgrunn som ruller med, avslører at det
   er en nettside og ikke en app. */
:root[data-skin="glass"] body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(168deg, var(--bg-topp) 0%, var(--bg-midt) 48%, var(--bg-bunn) 100%);
}

/* Kulene. Ett lag, fire myke overganger, ingen `filter` — en `blur()` over
   hele skjermen koster mye på mobil, og radialovergangene er myke fra før. */
:root[data-skin="glass"] body::after {
  content: ''; position: fixed; inset: -22%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30% 26% at 21% 24%, var(--orb-himmel)  0%, transparent 68%),
    radial-gradient(26% 23% at 75% 15%, var(--orb-korall)  0%, transparent 66%),
    radial-gradient(34% 30% at 66% 79%, var(--orb-lilla)   0%, transparent 70%),
    radial-gradient(24% 21% at 11% 83%, var(--orb-fersken) 0%, transparent 66%);
  animation: glass-drift 64s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes glass-drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 2.5%, 0) scale(1.07); }
}

/* Den generelle regelen øverst i filen setter bare varigheten til .01ms, og en
   uendelig animasjon ville da løpe rundt uavbrutt. Her må navnet bort. */
@media (prefers-reduced-motion: reduce) {
  :root[data-skin="glass"] body::after { animation: none; }
}

/* De seks beholderne som faktisk er av glass. */
:root[data-skin="glass"] .card,
:root[data-skin="glass"] .statbar,
:root[data-skin="glass"] .sidebar,
:root[data-skin="glass"] .topbar,
:root[data-skin="glass"] .tabbar,
:root[data-skin="glass"] .install-hint,
:root[data-skin="glass"] .ark-inni,
:root[data-skin="glass"] .salgskort,
:root[data-skin="glass"] .fk {
  -webkit-backdrop-filter: var(--glass-slor);
  backdrop-filter: var(--glass-slor);
  border-color: var(--glass-kant);
  box-shadow: inset 0 1px 0 var(--glass-glans), var(--shadow-lg);
}

/* Topp- og bunnstripe skal ligge flatt mot kanten av skjermen, uten løft. */
:root[data-skin="glass"] .topbar,
:root[data-skin="glass"] .tabbar {
  box-shadow: inset 0 1px 0 var(--glass-glans);
  background: var(--surface);
}
:root[data-skin="glass"] .topbar { border-bottom-color: var(--glass-kant); }
:root[data-skin="glass"] .tabbar { border-top-color: var(--glass-kant); }

/* Knappene får litt løft, slik at de leses som noe som ligger *over* glasset. */
:root[data-skin="glass"] .btn { box-shadow: var(--glass-loft); }
:root[data-skin="glass"] .btn.ghost,
:root[data-skin="glass"] .btn.quiet { box-shadow: inset 0 1px 0 var(--glass-glans); }

/* Skrivefelt må se ut som noe man kan skrive i — mer melk enn resten. */
:root[data-skin="glass"] .field input,
:root[data-skin="glass"] .field textarea,
:root[data-skin="glass"] .field select,
:root[data-skin="glass"] .composer textarea {
  background: var(--surface-3);
}

/* Arket ligger over resten av siden og må være tettere enn et kort. På 58 %
   skinner overskriftene bak rett gjennom trinnene, og de er det eneste
   brukeren er der for å lese. */
:root[data-skin="glass"] .ark-inni { background: var(--glass-tett); }

/* Handlingsraden i en oppgave er festet til skjermkanten på mobil, og
   svaralternativene ruller under den. Den har ingen uskarphet fra før — uten
   dette leses teksten bak rett gjennom knapperaden. Regelen må ligge i samme
   media-spørring som raden selv: på skrivebord har den ingen bakgrunn, og en
   `backdrop-filter` der ville gjort siden uskarp bak knappene. */
@media (max-width: 899px) {
  :root[data-skin="glass"] .quiz-foot {
    -webkit-backdrop-filter: var(--glass-slor);
    backdrop-filter: var(--glass-slor);
    background: var(--glass-tett);
    border-top-color: var(--glass-kant);
    box-shadow: inset 0 1px 0 var(--glass-glans);
  }
}

/* Logoen er stedet korallen får være med. */
:root[data-skin="glass"] .brand .logo {
  background: linear-gradient(148deg, var(--accent), var(--brand));
}

:root[data-skin="glass"] h1,
:root[data-skin="glass"] h2,
:root[data-skin="glass"] h3 { letter-spacing: -.028em; }

/* Skjult for øyet, lest av skjermleser. Dashbordet har ingen synlig
   overskrift — topplinjen sier allerede hvor du er — men siden trenger en h1. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}