/* Matematikk 1P – nettsiden.
   Tokens øverst, med lys og mørk modus. Tavla (eksempler, video) er mørk i begge moduser
   og bruker de samme fargene som videoene (video/lib/tavle.js). Ingen eksterne fonter. */

/* Forsiden bruker de samme fontene som Vekstkurven (SIL OFL 1.1, lisensene ligger i fonts/):
   Newsreader til overskrifter, Atkinson Hyperlegible til brødtekst, Familjen Grotesk til logo og tall. */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/newsreader-var.woff2) format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/familjen-grotesk-var.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/atkinson-hyperlegible-400.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/atkinson-hyperlegible-700.woff2) format("woff2"); }

:root {
  /* Lilla tema: hovedfargen (--accent) er lilla, og bakgrunnene har et svakt lilla skjær. */
  --bg: #f7f5fa;
  --panel: #ffffff;
  --panel-2: #efebf5;
  --ink: #1d1a24;
  --muted: #5b5766;
  --line: #e3deeb;
  --accent: #6b3fb8;
  --accent-ink: #ffffff;
  --accent-soft: #efe8fb;
  --ok: #1d7a4a;
  --ok-soft: #e3f3ea;
  --gang: #8a5a00;
  --gang-soft: #fdf1d8;
  --varsel: #9a3d12;
  --varsel-soft: #fbe9df;
  --shadow: 0 1px 2px rgba(20, 22, 28, .06), 0 4px 16px rgba(20, 22, 28, .05);
  --radius: 14px;

  /* Modulfarger (bare striper, prikker og stolper, ikke tekst) */
  --m-bla: #3b8fd9;
  --m-gul: #e3b23c;
  --m-gronn: #3fae6a;
  --m-oransje: #e5833b;
  --m-rosa: #d9629e;

  /* Tavla: lik i begge moduser, som i videoene */
  --tavle: #151515;
  --tavle-ink: #f2f0ea;
  --tavle-gul: #ffd75e;
  --tavle-bla: #6cc4ff;
  --tavle-gronn: #7ee08a;
  --tavle-rosa: #ff8fc8;
  --tavle-gra: #9a9a9a;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hand: "Ink Free", "Segoe Print", "Bradley Hand", "Comic Neue", cursive;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131118;
    --panel: #1c1a23;
    --panel-2: #25222e;
    --ink: #eeecf2;
    --muted: #a9a4b5;
    --line: #322e3d;
    --accent: #b99cf6;
    --accent-ink: #1a1030;
    --accent-soft: #2b2244;
    --ok: #6fd39c;
    --ok-soft: #173327;
    --gang: #f1c66a;
    --gang-soft: #3a2d12;
    --varsel: #f3a37f;
    --varsel-soft: #3d2217;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131118; --panel: #1c1a23; --panel-2: #25222e; --ink: #eeecf2; --muted: #a9a4b5; --line: #322e3d;
  --accent: #b99cf6; --accent-ink: #1a1030; --accent-soft: #2b2244; --ok: #6fd39c; --ok-soft: #173327;
  --gang: #f1c66a; --gang-soft: #3a2d12; --varsel: #f3a37f; --varsel-soft: #3d2217;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 var(--font);
}
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -.01em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .8em; }
ul { margin: 0; padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.hopp { position: absolute; left: -999px; }
.hopp:focus { left: 16px; top: 8px; background: var(--panel); padding: 8px 12px; z-index: 10; }
.laster { color: var(--muted); padding: 40px 0; }
.muted { color: var(--muted); }
.liten-tekst { font-size: .9rem; }

/* ---------- Toppen ---------- */
.topp { background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.topp-inner { display: flex; align-items: center; gap: 16px; min-height: 60px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; }
.logo svg { width: 30px; height: 30px; }
.logo-bg { fill: #6b3fb8; }
.logo-strek { fill: none; stroke: var(--tavle-gul); stroke-width: 3; stroke-linecap: round; }
.meny { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.meny a {
  color: var(--muted); text-decoration: none; padding: 8px 12px; border-radius: 10px; font-weight: 500;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.meny a:hover { background: var(--panel-2); color: var(--ink); }
.meny a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.chip {
  display: inline-block; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 99px;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); vertical-align: middle;
}
.chip.liten { font-size: .65rem; padding: 1px 6px; }

main { padding: 28px 16px 48px; outline: none; }
.bunn { border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; padding: 20px 0 32px; }
.bunn p { margin: 0 0 .3em; }

/* ---------- Byggeklosser ---------- */
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
}
.rutenett { display: grid; gap: 16px; }
.to { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.tre { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.seksjon { margin-top: 32px; }
.seksjon-topp { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }

.knapp {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 10px;
  padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  background: var(--accent); color: var(--accent-ink);
}
.knapp:hover { filter: brightness(1.05); }
.knapp.sekundaer { background: var(--panel); color: var(--ink); border-color: var(--line); }
.knapp.sekundaer:hover { background: var(--panel-2); }
.knapp.liten { padding: 6px 12px; font-size: .9rem; }

.merke {
  display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 600;
  padding: 2px 8px; border-radius: 99px; background: var(--panel-2); color: var(--muted); white-space: nowrap;
}
.merke.ok { background: var(--ok-soft); color: var(--ok); }
.merke.gang { background: var(--gang-soft); color: var(--gang); }
.merke.varsel { background: var(--varsel-soft); color: var(--varsel); }
.merke.blaa { background: var(--accent-soft); color: var(--accent); }

.stolpe { height: 8px; background: var(--panel-2); border-radius: 99px; overflow: hidden; }
.stolpe > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); }

.modulfarge-bla { --m: var(--m-bla); }
.modulfarge-gul { --m: var(--m-gul); }
.modulfarge-gronn { --m: var(--m-gronn); }
.modulfarge-oransje { --m: var(--m-oransje); }
.modulfarge-rosa { --m: var(--m-rosa); }

/* ---------- Oversikten ---------- */
.hilsen { margin-bottom: 20px; }
.hilsen p { color: var(--muted); max-width: 60ch; }
.nedtelling { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.nedtelling .tall { font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.skjema { display: grid; gap: 12px; }
.skjema label { font-weight: 600; font-size: .9rem; }
.skjema input[type="date"] {
  font: inherit; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); max-width: 220px;
}
.valg { display: flex; gap: 8px; flex-wrap: wrap; }
.valg label {
  font-weight: 500; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer;
}
.valg input { accent-color: var(--accent); }

.fremdrift { display: flex; align-items: center; gap: 20px; }
.ring { width: 112px; height: 112px; flex: none; }
.ring .bak { stroke: var(--panel-2); }
.ring .fram { stroke: var(--ok); transition: stroke-dashoffset .4s ease; }
.ring text { fill: var(--ink); font-weight: 800; font-size: 22px; }
.tall-liste { display: grid; gap: 4px; }

.ukeplan { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.ukeplan a {
  display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--ink);
  background: var(--panel-2);
}
.ukeplan a:hover { outline: 1px solid var(--line); }
.prikk { width: 10px; height: 10px; border-radius: 50%; background: var(--m, var(--accent)); flex: none; }

.modulkort { display: block; text-decoration: none; color: var(--ink); position: relative; overflow: hidden; padding-top: 24px; }
.modulkort::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--m); }
.modulkort:hover { border-color: var(--m); }
.modulkort .nr { color: var(--muted); font-weight: 600; font-size: .85rem; }
.modulkort p { color: var(--muted); font-size: .92rem; }
.modulkort .stolpe > span { background: var(--m); }

/* ---------- Kurset ---------- */
.filter { display: flex; gap: 6px; flex-wrap: wrap; }
.filter button {
  font: inherit; font-size: .9rem; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); cursor: pointer;
}
.filter button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.modul { margin-top: 20px; padding: 0; overflow: hidden; }
.modul-topp { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-left: 6px solid var(--m); flex-wrap: wrap; }
.modul-topp h2 { margin: 0; }
.modul-topp p { margin: 2px 0 0; color: var(--muted); font-size: .92rem; }
.modul-topp .tekst { flex: 1 1 320px; }
.modul-topp .tall { text-align: right; min-width: 120px; font-size: .9rem; color: var(--muted); }
.modul-topp .stolpe { margin-top: 6px; }
.modul-topp .stolpe > span { background: var(--m); }

.leksjoner { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.leksjon-rad { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--line); }
.leksjon-rad:first-child { border-top: 0; }
.leksjon-rad:hover { background: var(--panel-2); }
.leksjon-rad .id { color: var(--muted); font-variant-numeric: tabular-nums; width: 2.5em; flex: none; font-weight: 600; }
.leksjon-rad .tittel { flex: 1; color: var(--ink); text-decoration: none; font-weight: 500; min-width: 0; }
.leksjon-rad .tittel:hover { text-decoration: underline; }
.leksjon-rad .merker { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.statusknapp {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); background: var(--panel);
  cursor: pointer; flex: none; display: grid; place-items: center; padding: 0; color: var(--accent-ink);
}
.statusknapp svg { width: 16px; height: 16px; }
.statusknapp[data-status="paabegynt"] { border-color: var(--gang); background: conic-gradient(var(--gang) 0 50%, transparent 50% 100%); }
.statusknapp[data-status="fullfort"] { border-color: var(--ok); background: var(--ok); }
.statusknapp:hover { border-color: var(--accent); }

/* ---------- Leksjonen ---------- */
.sti { font-size: .9rem; color: var(--muted); margin-bottom: 8px; }
.sti a { color: var(--muted); }
.leksjon-topp { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px; }
.leksjon-topp .merker { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.segment { display: inline-flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.segment button {
  font: inherit; font-size: .9rem; padding: 8px 14px; border: 0; background: none; color: var(--ink); cursor: pointer;
}
.segment button + button { border-left: 1px solid var(--line); }
.segment button[aria-pressed="true"][data-verdi="paabegynt"] { background: var(--gang-soft); color: var(--gang); font-weight: 600; }
.segment button[aria-pressed="true"][data-verdi="fullfort"] { background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.segment button[aria-pressed="true"][data-verdi=""] { background: var(--panel-2); font-weight: 600; }

.leksjon-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.leksjon-grid > div { display: grid; gap: 20px; min-width: 0; }

/* Plassholderen er lavere enn en ekte video (16 : 9), så eksemplet ikke havner langt nede. */
.video {
  aspect-ratio: 16 / 6; background: var(--tavle); border: 1px solid var(--line); border-radius: var(--radius); color: var(--tavle-ink);
  display: grid; place-items: center; text-align: center; padding: 20px; position: relative; overflow: hidden;
}
.video .hand { font-family: var(--hand); font-size: clamp(1.4rem, 3vw, 2.2rem); color: var(--tavle-gul); }
.video p { color: var(--tavle-gra); margin: 6px 0 0; }
.video svg { position: absolute; right: 6%; bottom: 10%; width: 28%; opacity: .9; }

.tavle { background: var(--tavle); color: var(--tavle-ink); border-radius: var(--radius); padding: 22px 24px; border: 1px solid var(--line); }
.tavle h3 { color: var(--tavle-gra); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.tavle .oppgave { font-size: 1.05rem; margin-bottom: 14px; }
.tavle .linje { font-family: var(--hand); font-size: clamp(1.15rem, 2.6vw, 1.7rem); line-height: 1.9; overflow-wrap: anywhere; }
.tavle .linje:nth-child(3n + 1) { color: var(--tavle-ink); }
.tavle .linje:nth-child(3n + 2) { color: var(--tavle-bla); }
.tavle .linje:nth-child(3n) { color: var(--tavle-ink); }
.tavle .svar { margin-top: 12px; font-family: var(--hand); font-size: clamp(1.25rem, 2.6vw, 1.7rem); color: var(--tavle-gul); }
.tavle .svar > span { border: 2px solid var(--tavle-gul); border-radius: 50%; padding: 2px 16px; display: inline-block; }
/* Case eller drøfting i samfunnskunnskap: hele setninger som stikkord, så mindre skrift og en vanlig ramme rundt svaret */
.tavle.tekst .linje { font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.45; margin: .4em 0; padding-left: 1em; position: relative; }
.tavle.tekst .linje::before { content: "–"; position: absolute; left: 0; }
.tavle.tekst .svar { font-size: clamp(1.1rem, 2.2vw, 1.4rem); }
.tavle.tekst .svar > span { border-radius: 12px; padding: 4px 12px; display: inline; line-height: 1.7; }
.brok { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: .8em; line-height: 1.1; margin: 0 .15em; }
.brok > span:first-child { border-bottom: 2px solid currentColor; padding: 0 .2em; }

.liste-sjekk { list-style: none; padding: 0; display: grid; gap: 8px; }
.liste-sjekk li { display: flex; gap: 10px; }
.liste-sjekk li::before { content: "✓"; color: var(--ok); font-weight: 800; }
.begreper { display: flex; gap: 6px; flex-wrap: wrap; }
.plassholder {
  border: 2px dashed var(--line); border-radius: var(--radius); padding: 18px; color: var(--muted); text-align: center;
}
.maal-tekst { font-size: .92rem; }
.maal-tekst + .maal-tekst { margin-top: 10px; }
.maal-tekst b { display: block; font-size: .8rem; color: var(--muted); }
.navigasjon { display: flex; justify-content: space-between; gap: 12px; margin: 28px 0 40px; flex-wrap: wrap; }
.merknad { background: var(--gang-soft); color: var(--ink); border-radius: 10px; padding: 10px 14px; font-size: .92rem; }

/* ---------- Innhold (team) ---------- */
.fliser { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.flis .stort { font-size: 1.8rem; font-weight: 800; line-height: 1.1; }
.flis .stolpe { margin-top: 8px; }
.tabell-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--panel-2); position: sticky; top: 0; }
tr:last-child td { border-bottom: 0; }
td.tall { font-variant-numeric: tabular-nums; white-space: nowrap; }
.modulrad td { background: var(--panel-2); font-weight: 700; }

/* ---------- Kompetansemål ---------- */
.maalkort { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.maalkort .kode { font-weight: 700; color: var(--muted); font-size: .85rem; padding-top: 2px; }
.maalkort .lenker { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.maalkort .lenker a { font-size: .82rem; }

/* ---------- Kartlegging ---------- */
.fremhevet {
  display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  border-left: 6px solid var(--accent); background: linear-gradient(90deg, var(--accent-soft), var(--panel) 70%);
}
.fremhevet h2 { margin-bottom: .2em; }
.fremhevet p { margin: 0; color: var(--muted); max-width: 60ch; }
.kartlegging { max-width: 760px; margin: 0 auto; }
.sporsmal-tekst { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 650; margin-bottom: 18px; }
.alternativer { display: grid; gap: 10px; }
.alternativ {
  font: inherit; font-size: 1.05rem; text-align: left; padding: 14px 16px; border-radius: 12px; cursor: pointer;
  border: 2px solid var(--line); background: var(--panel); color: var(--ink);
}
.alternativ:hover { border-color: var(--muted); }
/* Valgt svar markeres nøytralt (ikke som riktig eller feil) */
.alternativ[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.alternativ.vet-ikke { color: var(--muted); border-style: dashed; }
.knapp[disabled] { opacity: .45; cursor: not-allowed; filter: none; }
.kode {
  background: var(--tavle); color: var(--tavle-ink); border-radius: 12px; padding: 14px 16px; margin: 0 0 16px;
  font: .95rem/1.55 ui-monospace, "Cascadia Code", Consolas, "SF Mono", monospace; overflow-x: auto; border: 1px solid var(--line);
}
.tavle .kode { border-color: #333; background: #0c0c0c; }
.resultat-rad { padding: 12px 20px; border-top: 1px solid var(--line); }
.resultat-rad:first-child { border-top: 0; }
.resultat-topp { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.resultat-topp .id { color: var(--muted); font-weight: 600; width: 2.5em; }
.resultat-topp .tittel { flex: 1; color: var(--ink); font-weight: 500; text-decoration: none; }
.tilbakemelding { margin: 10px 0 0 calc(2.5em + 12px); padding: 10px 12px; background: var(--panel-2); border-radius: 10px; font-size: .92rem; display: grid; gap: 4px; }

/* ---------- Klar til eksamen ---------- */
.maalprikker { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.maalprikk { text-decoration: none; color: var(--muted); font-size: .78rem; font-weight: 600; display: grid; gap: 4px; }
.maalprikk.klar { color: var(--ok); }
.maalprikk .stolpe > span { background: var(--ok); }
.maal-topp { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.maalkort .lenker a.gjort { color: var(--ok); }
.leksjon-rad.ekstra .tittel { color: var(--muted); }

/* ---------- Forsiden ---------- */
.forside {
  --head: "Newsreader", Georgia, "Times New Roman", serif;
  --display: "Familjen Grotesk", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  font-family: "Atkinson Hyperlegible", var(--font);
}
.forside :is(h1, h2, h3):not(.tavle h3) { font-family: var(--head); font-weight: 500; letter-spacing: -.022em; line-height: 1.12; }
.forside .logo, .forside .tallrad .stort { font-family: var(--display); letter-spacing: -.02em; }
.forside main { padding: 0; }
.knapp.stor { padding: 14px 22px; font-size: 1.05rem; }
.meny .knapp { color: var(--accent-ink); }
.meny .knapp:hover { background: var(--accent); color: var(--accent-ink); }
.midt { text-align: center; }
.overtekst { font-weight: 700; color: var(--accent); font-size: .9rem; letter-spacing: .02em; margin-bottom: 10px; }
.ingress { font-size: 1.15rem; color: var(--muted); max-width: 56ch; }
.midt.ingress, .midt .ingress { margin-left: auto; margin-right: auto; }
.helt { background: linear-gradient(180deg, var(--panel) 0%, var(--bg) 100%); border-bottom: 1px solid var(--line); }
.helt-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.helt h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.08; letter-spacing: -.02em; margin-bottom: 18px; }
.helt .valg { margin: 22px 0 14px; }
.helt-tavle { transform: rotate(-1deg); box-shadow: 0 20px 50px rgba(0, 0, 0, .18); }
.tavle .gul { color: var(--tavle-gul); }
.tavle .bla { color: var(--tavle-bla); }
.tavle .rosa { color: var(--tavle-rosa); }
.tidelstolpe { display: grid; grid-template-columns: repeat(10, 1fr); border: 2px solid var(--tavle-ink); border-radius: 4px; height: 34px; margin: 12px 0 4px; }
.tidelstolpe span { border-right: 1px solid rgba(242, 240, 234, .6); }
.tidelstolpe span:last-child { border-right: 0; }
.tidelstolpe .gul { background: rgba(255, 215, 94, .55); }
.tidelstolpe .bla { background: rgba(108, 196, 255, .55); }
.tidelstolpe .rosa.halv { background: linear-gradient(90deg, rgba(255, 143, 200, .6) 50%, transparent 50%); }

.seksjon-stor { padding-top: 72px; padding-bottom: 8px; }
.seksjon-stor h2, .prisseksjon h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 18px; }
.smal { max-width: 760px; }
.steg { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.steg-nr {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--tavle); color: var(--tavle-gul); font-weight: 800; margin-bottom: 10px;
}
.steg p { color: var(--muted); margin: 0; }
.tallrad { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.tallrad > div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; text-align: center; display: grid; }
.tallrad .stort { font-size: 2.4rem; font-weight: 800; line-height: 1.1; }
.tallrad span:last-child { color: var(--muted); }
.modulrutenett { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; margin-bottom: 14px; }
.modulbrikke { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }

.prisseksjon { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 72px; padding: 64px 0; }
.bryter { display: flex; justify-content: center; gap: 0; margin: 20px auto 28px; width: max-content; border: 1px solid var(--line); border-radius: 99px; padding: 4px; background: var(--bg); }
.bryter button { font: inherit; font-weight: 600; border: 0; background: none; color: var(--muted); padding: 8px 22px; border-radius: 99px; cursor: pointer; }
.bryter button[aria-checked="true"] { background: var(--ink); color: var(--bg); }
.priskort { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pris { display: flex; flex-direction: column; position: relative; }
.pris .liste-sjekk { margin: 14px 0 20px; flex: 1; align-content: start; }
.pris .knapp { justify-content: center; }
.pris .belop .stort { font-size: 2.3rem; font-weight: 800; letter-spacing: -.02em; }
.pris.anbefalt { border: 2px solid var(--accent); box-shadow: 0 10px 30px rgba(107, 63, 184, .15); }
.anbefalt-merke {
  position: absolute; top: -12px; left: 20px; background: var(--accent); color: var(--accent-ink);
  font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 99px;
}
.trygghet { list-style: none; padding: 0; margin: 24px 0 8px; display: flex; gap: 10px 24px; flex-wrap: wrap; justify-content: center; }
.trygghet li::before { content: "✓ "; color: var(--ok); font-weight: 800; }
details.panel { padding: 0; margin-bottom: 10px; }
details summary { cursor: pointer; padding: 16px 20px; font-weight: 600; }
details p { padding: 0 20px 16px; margin: 0; color: var(--muted); }

@media (max-width: 860px) {
  .helt-inner { grid-template-columns: minmax(0, 1fr); padding-top: 36px; padding-bottom: 40px; }
  .priskort { grid-template-columns: minmax(0, 1fr); }
  .pris.anbefalt { order: -1; }
}
@media (max-width: 600px) {
  /* På mobil holder det med prisene og knappen i menyen; resten nås ved å skrolle */
  .forside .meny { width: auto; margin-left: auto; overflow: visible; padding-bottom: 0; }
  .forside .meny a:not(.knapp):not(.meny-logginn) { display: none; }
}

@media (max-width: 860px) {
  .leksjon-grid { grid-template-columns: minmax(0, 1fr); }
  .video { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  .meny { margin-left: 0; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
  .logo .chip { display: none; }
  .leksjon-rad { padding: 10px 14px; flex-wrap: wrap; }
  .leksjon-rad .merker { width: 100%; justify-content: flex-start; padding-left: calc(2.5em + 42px); }
  .fremdrift { flex-direction: column; align-items: flex-start; }
  .modul-topp .tall { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
@media print {
  .topp, .bunn, .navigasjon, .segment { display: none; }
}

/* =====================================================================
   Forslag «Kladd» (forslag/kladd/). Navn, logo og toppen av forsiden.
   Hele mappen kan slettes hvis forslaget ikke brukes; web/ er urørt.
   ===================================================================== */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/caveat-var.ttf) format("truetype"); }

/* Logoen: ikonet og «kladd.» i Familjen Grotesk, med lilla punktum */
.logo svg { width: 32px; height: 32px; }
.logo-navn { font-family: "Familjen Grotesk", var(--font); font-weight: 700; font-size: 1.45rem; letter-spacing: -.03em; line-height: 1; }
.logo-prikk { color: var(--accent); }

/* Knappene er runde piller, som i Skriptr */
.knapp { border-radius: 999px; }

/* Toppen: én flate som fyller første skjermbilde. Teksten står sentrert øverst. Scenen (et skrivebord ved et vindu i
   ettermiddagssol) fyller den nederste delen og toner mykt inn bak teksten (mask-image), som hos Skriptr.
   Bordet med arkene ligger i den nederste delen (--scene-h · 0,6), som holdes fri for tekst. */
.kladd-topp {
  --scene-h: clamp(320px, 56vh, 600px);
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  min-height: calc(100vh - 66px);
  padding: clamp(2.5rem, 8vh, 5.5rem) 0 calc(var(--scene-h) * .6 + 1rem);
  background: #f4effa;
  border-bottom: 1px solid var(--line);
}
.kladd-topp-inner { position: relative; z-index: 1; }
.kladd-topp h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.04; letter-spacing: -.03em; max-width: 15ch; margin: 0 auto 20px; }
.kladd-topp .ingress { margin: 0 auto; color: #4d4858; }
.kladd-topp .valg { justify-content: center; margin: 26px 0 14px; gap: 12px; }
.kladd-scene {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--scene-h); z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 38%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 38%);
}
.kladd-scene svg { display: block; width: 100%; height: 100%; }
.ks-hand { font-family: "Caveat", "Segoe Print", cursive; font-size: 40px; font-weight: 600; fill: #2f2740; }
.ks-liten { font-size: 30px; }
.ks-damp { animation: ks-damp 4s ease-in-out 3; }
@keyframes ks-damp { 50% { transform: translateY(-6px); opacity: .4; } }

/* Eksempelet fra en leksjon, under toppen: tekst til venstre, tavla til høyre */
.eksempel-seksjon { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.eksempel-seksjon h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }

@media (max-width: 860px) {
  .kladd-topp { --scene-h: 300px; min-height: 0; }
  .eksempel-seksjon { grid-template-columns: 1fr; gap: 24px; }
}
/* Mørk modus: samme scene i kveldslys, så den ikke blender. Teksten over får mørk bakgrunn som resten av siden. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kladd-topp { background: var(--bg); }
  :root:not([data-theme="light"]) .kladd-topp .ingress { color: var(--muted); }
  :root:not([data-theme="light"]) .kladd-scene svg { filter: brightness(.55) saturate(.85); }
}
:root[data-theme="dark"] .kladd-topp { background: var(--bg); }
:root[data-theme="dark"] .kladd-topp .ingress { color: var(--muted); }
:root[data-theme="dark"] .kladd-scene svg { filter: brightness(.55) saturate(.85); }
@media (prefers-reduced-motion: reduce) { .ks-damp { animation: none; } }
.meny .knapp, .knapp.liten { border-radius: 999px; }

/* «Finn dine fag» (fag.html): ett spørsmål om gangen i et kort, med store svarknapper */
.fagvelger { padding: clamp(1.5rem, 6vh, 4rem) 16px 3rem; background: #f4effa; min-height: calc(100vh - 66px); }
.fv-kort { max-width: 640px; margin: 0 auto; padding: clamp(20px, 4vw, 36px); border-radius: 24px; }
.fv-topp { display: flex; justify-content: space-between; align-items: center; min-height: 32px; }
.fv-tilbake { border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; padding: 4px 0; }
.fv-steg { margin-left: auto; color: var(--muted); font-size: .9rem; }
.fv-linje { height: 6px; border-radius: 99px; background: var(--panel-2); margin: 10px 0 26px; overflow: hidden; }
.fv-linje span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width .35s ease; }
.fagvelger h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 0 0 20px; outline: none; }
.fv-valg { display: grid; gap: 10px; }
.fv-valg.rad { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.fv-valg.liste { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.fv-knapp {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink); background: var(--panel); border: 2px solid var(--line); border-radius: 16px; padding: 16px 18px;
  transition: border-color .15s, background .15s, transform .15s;
}
.fv-valg.rad .fv-knapp { align-items: center; text-align: center; font-size: 1.15rem; }
.fv-valg.liste .fv-knapp { padding: 12px 14px; }
.fv-knapp b { font-size: 1.08rem; }
.fv-knapp span { color: var(--muted); font-size: .92rem; }
.fv-knapp:hover { border-color: var(--accent); background: var(--accent-soft); }
.fv-knapp:active { transform: scale(.99); }
.fv-knapp.valgt { border-color: var(--accent); background: var(--accent-soft); }
.fv-fag { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 10px; }
.fv-fag li { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.fv-fag li > span { display: grid; }
.fv-fag li.klar { border: 2px solid var(--accent); background: var(--accent-soft); }
.fv-tom { background: var(--panel-2); border-radius: 14px; padding: 14px 16px; margin: 0 0 20px; }
.fv-personvern { margin-top: 18px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fagvelger { background: var(--bg); } }
:root[data-theme="dark"] .fagvelger { background: var(--bg); }
@media (prefers-reduced-motion: reduce) { .fv-linje span, .fv-knapp { transition: none; } }

/* Fagene på resultatsiden er lenker, og fagsiden («under utvikling») */
.fv-gruppe { font-size: 1.15rem; margin: 22px 0 0; }
.fv-gruppe .muted { font-size: .9rem; font-weight: 400; }
.fv-fag li { display: block; border: 0; padding: 0; }
.fv-fag-lenke {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: 16px; color: var(--ink); text-decoration: none; background: var(--panel);
  transition: border-color .15s, background .15s;
}
.fv-fag-lenke > span:first-child { display: grid; }
.fv-fag-lenke:hover { border-color: var(--accent); background: var(--accent-soft); }
.fv-fag-lenke.klar { border: 2px solid var(--accent); background: var(--accent-soft); }
.fv-fag-smal { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fv-fag-smal .fv-fag-lenke { padding: 10px 14px; }
.fv-fag-smal .chip { display: none; }
.chip.fv-klar { background: var(--accent); color: var(--accent-ink); }
.fv-knapp:disabled { cursor: not-allowed; opacity: .55; }
.fv-knapp:disabled:hover { border-color: var(--line); background: var(--panel); }
.fagside { text-align: center; }
.fagside .fv-tilbake { display: inline-block; text-decoration: none; float: left; }
.fs-tegning { display: block; width: min(260px, 70%); margin: 30px auto 10px; }
.fagside h1 { margin: 12px 0 4px; }
.fagside p { max-width: 46ch; margin-left: auto; margin-right: auto; }
.fagside .valg { justify-content: center; margin-top: 22px; }

/* Overgangene i «Finn dine fag»: det valgte svaret blir markert med en hake og glir sist ut, de andre
   alternativene forsvinner raskt etter hverandre (ikke alle på en gang), og neste spørsmål glir inn fra høyre.
   «Tilbake» går motsatt vei. Rekkefølgen styres av --i (settes i fag.js). Av ved redusert bevegelse. */
.fv-knapp { position: relative; }
.fv-knapp.valgt-na::after {
  content: "✓"; position: absolute; right: 14px; top: 50%; width: 28px; height: 28px; margin-top: -14px;
  display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  font-weight: 700; font-size: .95rem; animation: fv-hake .3s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes fv-hake { from { transform: scale(0); opacity: 0; } }

[data-innhold].ut-frem .fv-knapp:not(.valgt-na) { animation: fv-forsvinn .24s ease-in both; animation-delay: calc(var(--i, 0) * 45ms); }
[data-innhold].ut-frem .fv-knapp.valgt-na { animation: fv-valgt .43s ease both; }
[data-innhold].ut-frem h1 { animation: fv-forsvinn .26s ease-in .14s both; }
[data-innhold].ut-tilbake > * { animation: fv-ut-hoyre .2s ease-in both; }
@keyframes fv-forsvinn { to { opacity: 0; transform: translateY(6px) scale(.97); } }
@keyframes fv-valgt {
  0% { transform: scale(1); }
  30% { transform: scale(1.025); }
  65% { transform: scale(1); opacity: 1; }
  100% { transform: translateX(-26px); opacity: 0; }
}
@keyframes fv-ut-hoyre { to { opacity: 0; transform: translateX(24px); } }

[data-innhold].inn-frem h1, [data-innhold].inn-tilbake h1 { animation: fv-inn .38s cubic-bezier(.2, .8, .2, 1) both; }
[data-innhold].inn-frem :is(.fv-knapp, .fv-fag li, .fv-gruppe, .fv-anim),
[data-innhold].inn-tilbake :is(.fv-knapp, .fv-fag li, .fv-gruppe, .fv-anim) {
  animation: fv-inn .42s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(70ms + var(--i, 0) * 45ms);
}
[data-innhold].inn-tilbake h1, [data-innhold].inn-tilbake :is(.fv-knapp, .fv-fag li, .fv-gruppe, .fv-anim) { animation-name: fv-inn-venstre; }
@keyframes fv-inn { from { opacity: 0; transform: translateX(30px); } }
@keyframes fv-inn-venstre { from { opacity: 0; transform: translateX(-30px); } }

@media (prefers-reduced-motion: reduce) {
  [data-innhold] *, .fv-knapp.valgt-na::after { animation: none !important; }
}

/* =====================================================================
   Typografi i appen (alt utenom forsiden): variant B «myk og personlig».
   Fraunces (myk seriff) til overskrifter og fagnavn, Instrument Sans til tekst og knapper, og Caveat til
   status som «klar!» og «kommer», skrevet for hånd i stedet for som piller. Alle SIL OFL 1.1, lisensene i fonts/.
   Forsiden (body.forside) beholder Newsreader og Atkinson. Tavla beholder håndskriften sin.
   ===================================================================== */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/fraunces-var.ttf) format("truetype"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/instrument-sans-var.ttf) format("truetype"); }

body:not(.forside) {
  --app-head: "Fraunces", Georgia, "Times New Roman", serif;
  --app-tekst: "Instrument Sans", var(--font);
  font-family: var(--app-tekst);
}
body:not(.forside) :is(h1, h2, h3, h4):not(.tavle *) {
  font-family: var(--app-head); font-weight: 500; letter-spacing: -.01em;
  font-variation-settings: "SOFT" 100, "opsz" 72;
}
body:not(.forside) h1:not(.tavle *) { font-weight: 500; }
body:not(.forside) :is(.knapp, button, input, select) { font-family: var(--app-tekst); }

/* Status i kurset (felles.js merke(), «Kan allerede», «Øv på denne» …): håndskrevet tekst i fargen, ingen pille */
body:not(.forside) .merke {
  font: 600 1.3rem/1 "Caveat", cursive; background: none !important; padding: 0 2px; border-radius: 0;
  display: inline-block; transform: rotate(-3deg);
}

/* Fagradene i «Dine fag»: ingen kantede kort, bare rolige flater. Fagnavnet i Fraunces, status for hånd. */
.fv-fag { gap: 4px; }
.fv-fag-lenke { border: 0; border-radius: 12px; padding: 14px 16px; background: transparent; }
.fv-fag-lenke:hover { background: #f6f2fb; border: 0; }
.fv-fag-lenke.klar { border: 0; background: #f1ebfb; }
.fv-fag-lenke b {
  font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 1.35rem; line-height: 1.15;
  font-variation-settings: "SOFT" 100, "opsz" 72;
}
.fv-fag-lenke .muted { font-size: .95rem; margin-top: 2px; }
.fv-fag-smal .fv-fag-lenke { padding: 10px 14px; background: transparent; }
.fv-fag-smal .fv-fag-lenke b { font-size: 1.1rem; }
.fv-fag-smal .fv-status { display: none; }
.fv-status { font: 600 1.5rem/1 "Caveat", cursive; color: #9a93a8; transform: rotate(-4deg); white-space: nowrap; display: inline-block; }
.fv-status.klar { color: var(--accent); }
.fagside .fv-status { font-size: 1.7rem; color: var(--accent); }

/* Svaralternativene i spørreskjemaet: overskriften i Fraunces */
.fv-knapp b { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 1.25rem; font-variation-settings: "SOFT" 100, "opsz" 48; }
.fv-valg.rad .fv-knapp b { font-size: 1.35rem; }
.fv-gruppe { font-family: "Fraunces", Georgia, serif; font-weight: 500; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fv-fag-lenke:hover { background: #241f2e; }
  :root:not([data-theme="light"]) .fv-fag-lenke.klar { background: var(--accent-soft); }
}
:root[data-theme="dark"] .fv-fag-lenke:hover { background: #241f2e; }
:root[data-theme="dark"] .fv-fag-lenke.klar { background: var(--accent-soft); }

/* =====================================================================
   «Min side» (min-side.html, skisse): neste steg, dine fag, modulene som en sti, og øv på igjen.
   Mobil først: én kolonne.
   ===================================================================== */
.ms { background: #f4effa; padding: 6px 0 60px; min-height: calc(100vh - 66px); }
.ms-modus { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 8px; }
.ms-modus-tekst { color: var(--muted); font-size: .9rem; margin-right: 6px; }
.ms-modus button { font: inherit; font-size: .88rem; border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 6px 14px; border-radius: 99px; cursor: pointer; }
.ms-modus button[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.ms-topp { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 6px 0 22px; }
.ms-topp h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 0; }
.ms-nedtelling { display: flex; align-items: baseline; gap: 10px; }
.ms-nedtelling b { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 2.6rem; line-height: 1; color: var(--accent); }
.ms-nedtelling span { color: var(--muted); }
.ms-nedtelling.tom { color: var(--accent); font-weight: 600; text-decoration: none; }

.ms-rutenett { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.ms-hoved { display: grid; gap: 28px; min-width: 0; }
.ms-side { display: grid; gap: 16px; position: sticky; top: 16px; }
.ms-h2 { font-size: 1.5rem; margin: 0 0 12px; }
.ms-h2 .muted { font-size: 1.1rem; }

.ms-neste { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: center; padding: 20px; border-radius: 22px; }
.ms-neste h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 6px 0 4px; }
.ms-neste .knapp { margin-top: 14px; }
.ms-video { width: 100%; height: auto; border-radius: 10px; display: block; box-shadow: 0 6px 18px rgba(60, 40, 90, .12); }

.ms-fagrad { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.ms-fag { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--panel); color: var(--ink); text-decoration: none; border: 1px solid transparent; transition: border-color .15s, transform .15s; }
.ms-fag:hover { border-color: var(--accent); transform: translateY(-1px); }
.ms-fag > span:last-child { display: grid; gap: 1px; min-width: 0; }
.ms-fag b { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 1.15rem; font-variation-settings: "SOFT" 100, "opsz" 48; }
.ms-fag .muted { font-size: .85rem; }
.ms-fag.hoved { grid-column: span 2; background: #fff; border: 2px solid var(--accent); }
.ms-fag.hoved b { font-size: 1.45rem; }
.ms-fag-tom { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 2px dashed var(--line); display: grid; place-items: center; color: var(--accent); font-size: 1.4rem; }
.ms-ring { flex: none; }
.ms-ring-bunn { fill: none; stroke: var(--panel-2); stroke-width: 10; }
.ms-ring-fyll { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.ms-ring text { font: 600 20px "Instrument Sans", sans-serif; fill: var(--ink); }

.ms-sti { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ms-modul details { background: var(--panel); border-radius: 16px; border-left: 6px solid var(--farge); overflow: hidden; }
.ms-modul summary { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; }
.ms-modul summary::-webkit-details-marker { display: none; }
.ms-nr { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); font-weight: 700; }
.ms-modul.ferdig .ms-nr { background: var(--farge); color: #fff; }
.ms-modul-tekst { display: grid; gap: 7px; min-width: 0; }
.ms-modul-tekst b { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 1.2rem; font-variation-settings: "SOFT" 100, "opsz" 48; }
.ms-linje { height: 6px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.ms-linje span { display: block; height: 100%; background: var(--farge); border-radius: 99px; transition: width .6s ease; }
.ms-prosent { font-weight: 600; color: var(--muted); min-width: 48px; text-align: right; }
.ms-leksjoner { list-style: none; margin: 0; padding: 0 16px 14px 64px; display: grid; gap: 6px; }
.ms-leksjoner li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ms-leksjoner a { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; padding: 6px; border-radius: 10px; flex: 1; min-width: 0; }
.ms-leksjoner a:hover { background: var(--panel-2); }
.ms-leksjoner .ms-video { width: 84px; flex: none; box-shadow: none; border: 1px solid var(--line); }
.ms-leksjoner a > span { display: grid; }
.ms-leksjoner b { font-weight: 600; }
.ms-leksjoner .muted { font-size: .85rem; }

.ms-boks { padding: 18px 20px; border-radius: 20px; }
.ms-boks h2 { font-size: 1.35rem; margin: 0 0 4px; display: flex; justify-content: space-between; align-items: center; }
.ms-boks .muted { font-size: .9rem; margin: 0 0 10px; }
.ms-ov { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ms-ov a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.ms-ov a:hover { background: var(--panel-2); }
.ms-prikk { width: 10px; height: 10px; border-radius: 50%; flex: none; }

@media (max-width: 960px) {
  .ms-rutenett { grid-template-columns: 1fr; }
  .ms-side { position: static; }
}
@media (max-width: 600px) {
  .ms-neste { grid-template-columns: 1fr; }
  .ms-fag.hoved { grid-column: 1 / -1; }
  .ms-leksjoner { padding-left: 16px; }
  .ms-leksjoner .ms-video { width: 64px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ms { background: var(--bg); }
  :root:not([data-theme="light"]) .ms-fag.hoved { background: var(--panel); }
}
:root[data-theme="dark"] .ms { background: var(--bg); }
:root[data-theme="dark"] .ms-fag.hoved { background: var(--panel); }
@media (prefers-reduced-motion: reduce) { .ms-ring-fyll, .ms-linje span, .ms-fag { transition: none; } }
.ms-fag b { overflow-wrap: anywhere; hyphens: auto; }
.fv-videre { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* ---------- «Min side» v2: full bredde, profilhode og faner ---------- */
.ms .wrap { max-width: 1480px; }
.ms-profil { display: flex; align-items: center; gap: 20px; margin: 8px 0 18px; flex-wrap: wrap; }
.ms-avatar {
  width: 84px; height: 84px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #8a63d2, #6b3fb8); color: #fff; box-shadow: 0 6px 18px rgba(107, 63, 184, .25);
  font: 500 2rem/1 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100;
}
.ms-profil-tekst { flex: 1; min-width: 240px; }
.ms-profil h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0; }
.ms-profil .muted { margin: 4px 0 0; }
.ms-rediger { margin-left: auto; }
.ms-profilskjema { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ms-profilskjema label { font-weight: 600; }
.ms-profilskjema input { font: inherit; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); min-width: 260px; }
.ms-profilskjema p { width: 100%; margin: 0; }

.ms-faner { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 22px; }
.ms-faner button {
  font: 600 1.05rem var(--app-tekst); background: none; border: 0; color: var(--muted); cursor: pointer;
  padding: 12px 22px; margin-bottom: -2px; border-bottom: 3px solid transparent;
}
.ms-faner button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.ms-faner button:hover { color: var(--ink); }

/* Oversikten: tre kolonner på laptop, to på nettbrett, én på mobil */
.ms-oversikt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 340px; gap: 24px; align-items: start; }
.ms-kol-venstre, .ms-kol-midt, .ms-eksamen-hoved { display: grid; gap: 24px; min-width: 0; }
.ms-kol-hoyre { display: grid; gap: 16px; position: sticky; top: 16px; }
@media (min-width: 1281px) { .ms-kol-venstre .ms-neste { grid-template-columns: 1fr; } }
.ms-kol-venstre .ms-fagrad { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* Eksamensfanen */
.ms-eksamen { display: grid; gap: 22px; }
.ms-eksamensinfo { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 22px 26px; border-radius: 22px;
  background: linear-gradient(120deg, #fff 0%, #f1ebfb 100%); }
.ms-eksamensinfo h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 4px 0; }
.ms-eksamensinfo .muted { margin: 0; max-width: 60ch; }
.ms-eks-knapper { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ms-kommer-knapp { display: inline-flex; gap: 8px; align-items: center; padding: 10px 18px; border-radius: 99px; border: 1px dashed var(--line); color: var(--muted); }
.ms-eksamen-rutenett { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.ms-seksjonstopp { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ms-emnekart, .ms-fokus { padding: 22px 24px; border-radius: 22px; }
.ms-emnekart h2, .ms-fokus h2 { font-size: 1.6rem; margin: 0; }
.ms-forklaring { list-style: none; display: flex; gap: 14px; flex-wrap: wrap; margin: 0; padding: 0; font-size: .88rem; color: var(--muted); }
.ms-forklaring li { display: flex; align-items: center; gap: 6px; }
.ms-rute { display: inline-block; width: 16px; height: 16px; border-radius: 5px; flex: none; border: 1px solid transparent; }
.ms-rute.sitter { background: #6b3fb8; }
.ms-rute.pavei { background: #c9b4ee; }
.ms-rute.ovmer { background: #ffd75e; border-color: #e0b12a; }
.ms-rute.ikke { background: var(--panel-2); border-color: var(--line); }
.ms-emnerader { display: grid; gap: 8px; margin-top: 14px; }
.ms-emnerad { display: grid; grid-template-columns: 240px 1fr; gap: 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.ms-emnerad-navn { display: grid; }
.ms-emnerad-navn b { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 1.05rem; }
.ms-emnerad-navn .muted { font-size: .82rem; }
.ms-ruter { display: flex; gap: 6px; flex-wrap: wrap; }
.ms-ruter .ms-rute { width: 46px; height: 36px; border-radius: 9px; cursor: pointer; display: grid; place-items: center; font: 600 .78rem var(--app-tekst); transition: transform .12s; }
.ms-ruter .ms-rute span { color: rgba(0, 0, 0, .55); }
.ms-ruter .ms-rute.sitter span { color: #fff; }
.ms-ruter .ms-rute:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(60, 40, 90, .18); }

.ms-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.ms-chip { font: 600 .92rem var(--app-tekst); padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; border-left: 5px solid var(--farge); }
.ms-chip.valgt { background: var(--accent-soft); border-color: var(--accent); border-left-color: var(--farge); }
.ms-emner { border: 0; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px; }
.ms-emner legend { font-weight: 600; margin-bottom: 6px; }
.ms-emner label { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; }
.ms-emner label:hover { background: var(--panel-2); }
.ms-emner label.tom { color: var(--muted); cursor: default; }
.ms-emner input { width: 18px; height: 18px; accent-color: var(--accent); }
.ms-fokus-start { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 6px; }

.ms-quiz h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 6px 0 16px; line-height: 1.25; }
.ms-quiz-topp { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }
.ms-quiz .fv-linje { margin: 10px 0 18px; }
.ms-alternativer { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ms-alternativer .fv-knapp.riktig { border-color: #2f9e44; background: #e6f6ea; }
.ms-alternativer .fv-knapp.galt { border-color: #e0b12a; background: #fff6d6; }
.ms-alternativer .fv-knapp.dempet { opacity: .5; }
.ms-alternativer .fv-knapp:disabled { cursor: default; }
.ms-tilbakemelding { margin-top: 16px; padding: 16px 18px; border-radius: 14px; background: var(--panel-2); }
.ms-tilbakemelding.riktig { background: #e6f6ea; }
.ms-tilbakemelding.galt { background: #fff6d6; }
.ms-tilbakemelding p { margin: 6px 0 12px; }

.ms-bank { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ms-bank li { display: flex; align-items: center; gap: 10px; }
.ms-bank .muted { margin-left: auto; font-size: .85rem; }
.ms-slipp { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px; border: 2px dashed var(--line); border-radius: 16px; cursor: pointer; text-align: center; }
.ms-slipp:hover { border-color: var(--accent); background: var(--accent-soft); }
.ms-slipp input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ms-slipp:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.ms-slipp > span { display: grid; }

@media (max-width: 1280px) {
  .ms-oversikt { grid-template-columns: minmax(0, 1fr) 320px; }
  .ms-kol-venstre { grid-column: 1; }
  .ms-kol-midt { grid-column: 1; }
  .ms-kol-hoyre { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 960px) {
  .ms-oversikt, .ms-eksamen-rutenett { grid-template-columns: 1fr; }
  .ms-kol-hoyre { grid-column: auto; grid-row: auto; position: static; }
  .ms-emnerad { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 600px) {
  .ms-avatar { width: 64px; height: 64px; font-size: 1.5rem; }
  .ms-rediger { margin-left: 0; }
  .ms-ruter .ms-rute { width: 40px; height: 32px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ms-eksamensinfo { background: var(--panel); }
  :root:not([data-theme="light"]) :is(.ms-tilbakemelding.riktig, .ms-alternativer .fv-knapp.riktig) { background: #173327; }
  :root:not([data-theme="light"]) :is(.ms-tilbakemelding.galt, .ms-alternativer .fv-knapp.galt) { background: #3a2d12; }
}
:root[data-theme="dark"] .ms-eksamensinfo { background: var(--panel); }
@media (prefers-reduced-motion: reduce) { .ms-ruter .ms-rute { transition: none; } }
.min-side .topp .wrap { max-width: 1480px; }
.ms-fag b { overflow-wrap: normal; }
.ms-kol-venstre .ms-fagrad { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ms-fag .ms-fag-tom { width: 38px; height: 38px; }

/* Ferdig video i en leksjon (leksjon.js, VIDEOER) */
.video-ferdig { margin: 0 0 18px; }
.video-ferdig video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; background: #fbfaf6; box-shadow: 0 10px 30px rgba(60, 40, 90, .14); }
.video-ferdig figcaption { margin-top: 8px; }
.ms-profil-linje { margin: 6px 0 0; }

/* Introvideoer: hele faget øverst på kurssiden, og en sammenleggbar intro per modul */
.pakke-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-bottom: 20px; }
.pakke-intro .video-ferdig { margin: 0; }
.pakke-intro h2 { margin: 0 0 8px; }
.modul-intro { margin-top: 10px; }
.modul-intro summary { cursor: pointer; font-weight: 600; color: var(--lilla, #6b3fb8); width: fit-content; }
.modul-intro[open] summary { margin-bottom: 10px; }
.modul-intro .video-ferdig { max-width: 560px; margin: 0; }
@media (max-width: 760px) { .pakke-intro { grid-template-columns: 1fr; } }

/* Kakediagram for fremdrift: hele faget og hver modul. Fyllet glir når en leksjon blir fullført. */
.kake { flex: none; display: block; }
.kake-bunn { fill: none; stroke: var(--muted); opacity: .45; stroke-width: 3; stroke-dasharray: .8 2.9; stroke-linecap: round; }
.kake-fyll { fill: none; stroke: var(--kake, var(--accent)); stroke-width: 7; stroke-linecap: round; transition: stroke-dasharray .9s cubic-bezier(.2, .8, .2, 1); }
.kake text { font: 700 27px "Caveat", "Segoe Print", cursive; fill: var(--ink); }
.kurs-topp { align-items: center; gap: 24px; justify-content: flex-start; }
.kurs-topp > div { flex: 1; }
.modul-topp .tall { display: grid; justify-items: center; gap: 4px; min-width: 110px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .kake-fyll { transition: none; } }
.kake.liten text { font-size: 31px; }
.kake.liten .kake-fyll { stroke-width: 9; }
.kake.liten .kake-bunn { stroke-width: 4; }
.kurs-topp { padding-top: 18px; }
.ms-prosent .kake { margin-left: auto; }

/* Leksjonssiden: fremgangen din i høyre kolonne, synlig mens eleven ser video og ruller */
.visuelt-skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.leksjon-side { position: sticky; top: 84px; }
.fremgang h2 { margin: 0 0 14px; }
.fremgang h3 { margin: 18px 0 8px; font-size: 1rem; }
.fremgang-kaker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fremgang-kaker > div { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 12px 6px; border-radius: 14px; background: var(--panel-2); }
.fremgang-kaker .kake { margin-bottom: 6px; }
.fremgang-kaker span { font-size: .82rem; color: var(--muted); }
.fremgang-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fremgang-liste li { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; font-size: .92rem; }
.fremgang-liste li a { color: var(--ink); text-decoration: none; }
/* Nederst i fremgangen: neste modul i sin egen farge (--m kommer fra modulfarge-*) */
.fg-neste { display: inline-block; margin: 14px 8px 0; font-weight: 700; font-size: .95rem; text-decoration: none; color: color-mix(in srgb, var(--m) 78%, #000); }
.fg-neste span { display: inline-block; transition: transform .15s; }
.fg-neste:hover span { transform: translateX(3px); }
.fremgang-liste li a:hover { text-decoration: underline; }
.fremgang-liste li.ekstra { color: var(--muted); }
.fremgang-liste li.ekstra a { color: var(--muted); }
.fremgang-liste li .merke { margin-left: auto; font-size: .72rem; }
.fremgang-liste li.her { background: var(--accent-soft, #f1ebfb); font-weight: 600; }
.fremgang-liste .fg-prikk { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: #fff; }
.fremgang-liste li.her .fg-prikk { border-color: var(--m, var(--accent)); }
.fremgang-liste li.gjort .fg-prikk { background: var(--ok); border-color: var(--ok); }
.fremgang-liste .fg-prikk svg { width: 12px; height: 12px; }
@media (max-width: 900px) { .leksjon-side { position: static; } }

.fremgang-liste .fg-prikk { background: transparent; }
.fremgang-liste li.gjort .fg-prikk { background: var(--ok); }

/* Sirkelen viser steg, og er ikke en knapp: tom, halv (ett steg) eller full med hake */
span.statusknapp { cursor: default; display: inline-grid; place-items: center; }
.statusknapp[data-steg="1"] { border-color: var(--ok); background: conic-gradient(var(--ok) 0 50%, transparent 50% 100%); }
.statusknapp[data-steg="2"] { border-color: var(--ok); background: var(--ok); color: #fff; }
.fremgang-liste li[data-steg="1"] .fg-prikk { border-color: var(--ok); background: conic-gradient(var(--ok) 0 50%, transparent 50% 100%); }

/* Stegene øverst i leksjonen */
.stegliste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lk-steg { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); font-weight: 600; font-size: .92rem; }
.lk-steg svg { width: 16px; height: 16px; }
.lk-steg.ok { background: var(--ok-soft, #e3f4ea); border-color: transparent; color: var(--ok); }
.lk-steg.kommer { color: var(--muted); font-weight: 500; }
.steg-ring { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); }

/* Oppgavene under videoen */
.ovelse { display: grid; gap: 12px; }
.ov-topp { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ov-topp h2 { margin: 0; }
.ov-prikker { display: flex; gap: 6px; }
.ov-prikker span { flex: 1; height: 6px; border-radius: 99px; background: var(--panel-2); }
.ov-prikker span.gjort { background: var(--accent); }
.ov-prikker span.na { background: var(--accent); opacity: .45; }
.ov-nr { margin: 0; }
.ov-tekst { margin: 0; font-size: 1.1rem; }
.ov-uttrykk { font: 500 2rem/1.2 "Caveat", "Atkinson Hyperlegible", cursive; padding: 6px 0; }
.ov-valg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ov-valg button { padding: 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel); color: var(--ink); font: 600 1.1rem "Instrument Sans", system-ui, sans-serif; cursor: pointer; text-align: center; }
.ov-valg button:hover:not(:disabled) { border-color: var(--accent); }
.ov-valg button[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft, #f1ebfb); }
.ov-valg button.riktig { border-color: var(--ok); background: var(--ok-soft, #e3f4ea); color: var(--ok); }
.ov-valg button.feil { border-color: #d9480f; background: #fde8df; color: #a3330a; }
.ov-valg button:disabled { cursor: default; }
.ov-tall { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.ov-tall input { width: 9em; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel); color: var(--ink); font: 600 1.2rem "Instrument Sans", system-ui, sans-serif; }
.ov-tall input:focus { outline: none; border-color: var(--accent); }
.ov-tilbake { padding: 12px 16px; border-radius: 12px; }
.ov-tilbake p { margin: 6px 0 0; }
.ov-tilbake.riktig { background: var(--ok-soft, #e3f4ea); }
.ov-tilbake.riktig b { color: var(--ok); }
.ov-tilbake.feil { background: #fde8df; }
.ov-tilbake.feil b { color: #a3330a; }
.lenkeknapp { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ov-knapper { display: flex; gap: 10px; }
.ov-slutt { display: grid; justify-items: start; gap: 8px; padding: 8px 0; }
.ov-slutt:focus { outline: none; }
.ov-score { font: 600 2.4rem "Fraunces", Georgia, serif; }
.ov-slutt.ok .ov-score { color: var(--ok); }
.ov-slutt p { margin: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ov-tilbake.feil, :root:not([data-theme="light"]) .ov-valg button.feil { background: #3a2119; color: #ffb59a; }
  :root:not([data-theme="light"]) .ov-tilbake.feil b { color: #ffb59a; }
}

/* Melding når leksjonen blir fullført */
.feiring:empty { display: none; }
.feiring-boks { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-radius: 16px; background: var(--ok-soft, #e3f4ea); }
.feiring-boks b { color: var(--ok); font-size: 1.1rem; }
@media (max-width: 520px) { .ov-valg { grid-template-columns: 1fr; } }

/* Steg-for-steg-tavla: regnestykket rad for rad, med delen som regnes nå markert i videoens farger */
.stegtavle { display: grid; gap: 14px; }
.stegtavle-topp { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.stegtavle-topp h3 { margin: 0; }
.stegtavle-knapp { padding: 6px 14px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: inherit; font: 600 .85rem "Instrument Sans", system-ui, sans-serif; cursor: pointer; }
.stegtavle-knapp:hover { background: rgba(255, 255, 255, .1); }
.stegtavle-rader { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.stegtavle-rader li:first-child { border-top: 0; }
.stegtavle-rader li { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 8px 0; border-top: 1px dashed rgba(255, 255, 255, .18); }
.stegtavle-regel { font: 700 .82rem "Instrument Sans", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; display: grid; }
.stegtavle-regel small { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .8; }
.stegtavle-uttrykk { font: 500 1.9rem/1.2 "Caveat", cursive; }
.stegtavle-uttrykk::before { content: "= "; opacity: .55; }
.stegtavle-rader li:first-child .stegtavle-uttrykk::before, .stegtavle-rader li.ny .stegtavle-uttrykk::before { content: ""; }
.stegtavle-utregning { font: 500 1.5rem/1.2 "Caveat", cursive; opacity: .9; white-space: nowrap; display: grid; justify-items: end; }
.stegtavle mark { color: inherit; padding: 0 .2em; border-radius: 6px; }
.stegtavle .t-gul { color: #ffd75e; } .stegtavle mark.t-gul { background: rgba(255, 215, 94, .22); color: #ffe38a; }
.stegtavle .t-lilla { color: #c9b1ff; } .stegtavle mark.t-lilla { background: rgba(185, 156, 246, .25); color: #ddd0ff; }
.stegtavle .t-blaa { color: #8cc8ff; } .stegtavle mark.t-blaa { background: rgba(116, 192, 252, .22); color: #b5dcff; }
.stegtavle .t-gronn { color: #8ce99a; } .stegtavle mark.t-gronn { background: rgba(140, 233, 154, .2); color: #b2f2bb; }
.stegtavle li:has(.t-gul) .stegtavle-utregning { color: #ffd75e; }
.stegtavle li:has(.t-lilla) .stegtavle-utregning { color: #c9b1ff; }
.stegtavle li:has(.t-blaa) .stegtavle-utregning { color: #8cc8ff; }
.stegtavle li:has(.t-gronn) .stegtavle-utregning { color: #8ce99a; }
.stegtavle .skjult { display: none; }
.stegtavle-navigasjon { display: flex; gap: 10px; align-items: center; }
.stegtavle-navigasjon[hidden] { display: none; }
.stegtavle-rader li:not(.skjult) { animation: rad-inn .35s ease; }
@keyframes rad-inn { from { opacity: 0; transform: translateY(-4px); } }
.ov-hjelp { display: flex; flex-wrap: wrap; gap: 4px 18px; }
@media (max-width: 640px) {
  .stegtavle-rader li { grid-template-columns: 1fr; gap: 2px; }
  .stegtavle-uttrykk { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { .stegtavle-rader li { animation: none !important; } }

/* Partnersiden (partner.html), lenket fra bunnen av forsiden */
.bunn-lenker a { font-weight: 600; }
.partnerside [hidden] { display: none !important; }
/* Toppen på Bli fagpartner: sentrert, liten overtittel, stor serif-overskrift på to linjer, kort tekst og én knapp */
.pa-topp { display: grid; gap: 22px; justify-items: center; text-align: center; padding-block: 104px 72px; }
.pa-topp h1 { font-size: clamp(2.3rem, 5.6vw, 4.1rem); margin: 0; line-height: 1.08; text-wrap: balance; }
.pa-topp .ingress { margin: 0; max-width: 56ch; color: var(--muted); font-size: 1.12rem; line-height: 1.6; }
.pa-topp .knapp { margin-top: 8px; }
.partnerside .overtittel { font: 500 .82rem/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pa-knapper { display: flex; flex-wrap: wrap; gap: 12px; }
.partnerside .seksjon-stor { display: grid; gap: 20px; }
.partnerside h2 { margin: 0; }
.pa-rutenett { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .pa-rutenett { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pa-rutenett { grid-template-columns: 1fr; } }
.pa-rutenett .panel { display: grid; gap: 6px; align-content: start; }
.pa-rutenett h3 { margin: 0; font-size: 1.2rem; }
.pa-rutenett p { margin: 0; color: var(--muted); }
.pa-bakgrunn { background: var(--accent-soft); }
.pa-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px 32px; }
.pa-liste li { display: grid; gap: 4px; padding-left: 18px; border-left: 3px solid var(--accent); }
.pa-liste b { font-size: 1.08rem; }
.pa-liste span { color: var(--muted); }
.pa-steg { list-style: none; counter-reset: steg; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .pa-steg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pa-steg { grid-template-columns: 1fr; } }
.pa-steg li { counter-increment: steg; display: grid; gap: 4px; align-content: start; }
.pa-steg li::before { content: counter(steg); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink, #fff); font-weight: 700; margin-bottom: 6px; }
.pa-steg span { color: var(--muted); }
.pa-skjema { display: grid; gap: 16px; }
.pa-felt { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.pa-felt label, .pa-felt legend { font-weight: 600; padding: 0; }
.pa-felt input:not([type="checkbox"]), .pa-felt textarea { width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; }
.pa-felt input:focus, .pa-felt textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pa-felt [aria-invalid="true"] { border-color: #d9480f; }
.pa-valg { display: flex; align-items: center; gap: 10px; font-weight: 500 !important; }
.pa-valg input { width: 18px; height: 18px; accent-color: var(--accent); }
.pa-feil { margin: 0; color: #c2410c; font-weight: 600; }
.pa-skjema .knapp { justify-self: start; }
.pa-takk { display: grid; gap: 8px; }
.pa-takk h3 { margin: 0; }
.pa-takk:focus { outline: none; }

/* Toppmenyen tar fargen til seksjonen under (js/toppfarge.js). Fargebånd i full bredde gjør skiftet synlig. */
:root { --band-gul: #fbf2d8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --band-gul: #262115; } }
:root[data-theme="dark"] { --band-gul: #262115; }
.topp.toppfarge { border-bottom-color: transparent; transition: background-color .5s ease; }
.band { width: 100%; }
.band-gul { background: var(--band-gul); }
.pa-valgfritt { font-weight: 400; color: var(--muted); font-size: .88rem; margin-left: 6px; }
.pa-fil { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1.5px dashed var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; font-weight: 400 !important; }
.pa-fil:hover { border-color: var(--accent); }
.pa-fil input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pa-fil:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pa-fil-knapp { padding: 6px 14px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.pa-fil-navn { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.pa-fil-navn.feil { color: #c2410c; font-weight: 600; }
.pa-felt .lenkeknapp { justify-self: start; margin-top: 0; }
.band-gul + .prisseksjon { margin-top: 0; border-top: 0; }

/* «Dette får du i Kladd» på forsiden, i samme oppsett som Benford: én lys lilla flate, overskriften sentrert,
   piller til venstre og en stor skisse til høyre. Den valgte pillen folder seg ut med en kort tekst, og skissen
   bytter med en myk overgang (js/produktdemo.js). På mobil ligger skissen rett under den valgte pillen. */
:root { --band-lilla: #f1ebfb; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --band-lilla: #211b31; } }
:root[data-theme="dark"] { --band-lilla: #211b31; }
.produkt { background: var(--band-lilla); padding-bottom: clamp(64px, 9vw, 120px); }
.produkt-intro { text-align: center; padding-block: clamp(64px, 8vw, 104px) clamp(24px, 3vw, 40px); display: grid; gap: 10px; justify-items: center; }
.produkt-intro h2 { margin: 0; font-size: clamp(1.9rem, 3.8vw, 2.8rem); }
.produkt-intro .ingress { margin: 0; color: var(--muted); }
.produkt-vis { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); grid-template-rows: 1fr repeat(4, auto) 1fr;
  column-gap: clamp(32px, 6vw, 88px); row-gap: 12px; align-items: start; }
.produkt-vis > .pille { grid-column: 1; }
.produkt-vis > .pille:nth-child(1) { grid-row: 2; }
.produkt-vis > .pille:nth-child(3) { grid-row: 3; }
.produkt-vis > .pille:nth-child(5) { grid-row: 4; }
.produkt-vis > .pille:nth-child(7) { grid-row: 5; }
.produkt-figur { grid-column: 2; grid-row: 1 / -1; align-self: center; min-width: 0; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.985);
  transition: opacity .45s ease, transform .5s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .45s; }
.produkt-figur.valgt { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.pille { border: 1px solid var(--line); border-radius: 26px; background: color-mix(in srgb, var(--panel) 55%, transparent);
  transition: background-color .3s, border-color .3s, box-shadow .3s, padding .35s ease; }
.pille:hover { background: color-mix(in srgb, var(--panel) 85%, transparent); }
.pille.valgt { background: var(--panel); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); padding-bottom: 18px;
  box-shadow: 0 18px 40px -24px rgba(60, 30, 120, .45); }
.pille-knapp { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 52px; box-sizing: border-box;
  padding: 0 10px 0 22px; border: 0; border-radius: 26px; background: none; color: var(--ink); cursor: pointer; text-align: left;
  font: 600 1.05rem/1.25 "Instrument Sans", "Atkinson Hyperlegible", var(--font); letter-spacing: -.005em; }
.pille-knapp:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* ⊕ tegnet med CSS: en sirkel med to streker. Valgt blir den til × */
.pille-ikon { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--muted) 60%, transparent);
  box-sizing: border-box; color: var(--muted); transition: transform .35s ease, background-color .3s, border-color .3s, color .3s; }
.pille-ikon::before, .pille-ikon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; border-radius: 1px; background: currentColor; translate: -50% -50%; }
.pille-ikon::after { rotate: 90deg; }
.pille.valgt .pille-ikon { transform: rotate(45deg); color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.pille-tekst { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .35s ease, visibility 0s linear .35s; }
.pille.valgt .pille-tekst { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.pille-tekst p { min-height: 0; overflow: hidden; margin: 0; padding: 0 22px; color: var(--muted); font-size: .98rem; line-height: 1.5; }
.pille-tekst .sk-lenke { white-space: nowrap; }

@media (max-width: 819px) {
  .produkt-vis { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 10px; }
  .produkt-vis > .pille, .produkt-vis > .produkt-figur { grid-column: 1; grid-row: auto !important; }
  .produkt-figur:not(.valgt) { display: none; }
  .produkt-figur.valgt { margin: 6px 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .produkt-figur, .pille, .pille-ikon, .pille-tekst { transition: none; }
  .produkt-figur { transform: none; }
}
.merke-kommer { font: 600 .78rem "Atkinson Hyperlegible", var(--font); letter-spacing: .02em; padding: 4px 10px; border-radius: 99px; background: var(--panel); color: var(--accent); border: 1px solid var(--line); }

/* Skissene: en forenklet utgave av de ekte skjermene, bare til visning */
.skjerm { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px -28px rgba(40, 20, 80, .35); overflow: hidden; font-family: "Instrument Sans", "Atkinson Hyperlegible", var(--font); font-size: .9rem; min-width: 0; }
.skjerm-topp { display: flex; gap: 10px; align-items: baseline; padding: 12px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.skjerm-topp b { font-family: "Familjen Grotesk", var(--font); color: var(--ink); font-size: 1rem; }
.sk-liten { font-size: .78rem; color: var(--muted); }
.skjerm-kurs { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.sk-moduler { list-style: none; margin: 0; padding: 14px 10px; display: grid; gap: 4px; align-content: start; border-right: 1px solid var(--line); background: var(--panel-2); }
.sk-moduler li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; }
.sk-moduler li.aktiv { background: var(--panel); font-weight: 700; box-shadow: 0 1px 0 var(--line); }
.sk-moduler li.dempet { color: var(--muted); }
.sk-moduler i { width: 9px; height: 9px; border-radius: 50%; background: var(--f); flex: none; }
.sk-tema { padding: 16px; display: grid; gap: 8px; align-content: start; }
.sk-tema b { font-size: 1.02rem; }
.sk-video { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: #fbf8f3; }
.sk-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-spill { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; width: 52px; height: 52px; border-radius: 50%; background: #6b3fb8; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.sk-spill::after { content: ""; position: absolute; left: 21px; top: 16px; border-left: 15px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.sk-tid { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, .65); color: #fff; font-size: .75rem; }
.sk-temaer { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--muted); }
.sk-temaer li::before, .sk-uke li::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); margin-right: 8px; vertical-align: -2px; }
.sk-temaer li.gjort::before, .sk-uke li.gjort::before { background: var(--ok); border-color: var(--ok); }
.sk-uke li.halv::before { border-color: var(--ok); background: conic-gradient(var(--ok) 0 50%, transparent 50% 100%); }
.skjerm-ov { padding: 18px; display: grid; gap: 12px; }
.skjerm-ov p { margin: 0; }
.sk-uttrykk { font: 500 1.7rem "Caveat", cursive; }
.sk-valg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sk-valg span { padding: 10px; border-radius: 10px; border: 2px solid var(--line); text-align: center; font-weight: 600; }
.sk-valg .feil { border-color: #d9480f; background: #fde8df; color: #a3330a; }
.sk-valg .riktig { border-color: var(--ok); background: var(--ok-soft, #e3f4ea); color: var(--ok); }
.sk-tilbake { padding: 10px 14px; border-radius: 10px; background: #fde8df; color: #4a1d0a; display: grid; gap: 4px; }
.sk-tilbake b { color: #a3330a; }
.sk-lenke { color: #6b3fb8; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sk-tavle { background: #161616; color: #f4f1ea; border-radius: 12px; padding: 10px 14px; display: grid; gap: 2px; }
.sk-tavle > div { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 10px; align-items: center; font: 500 1.25rem "Caveat", cursive; padding: 4px 0; }
.sk-tavle > div + div { border-top: 1px dashed rgba(255, 255, 255, .18); }
.sk-tavle > div > span:first-child { font: 700 .7rem "Instrument Sans", var(--font); text-transform: uppercase; letter-spacing: .04em; }
.sk-tavle mark { color: inherit; border-radius: 5px; padding: 0 .2em; }
.sk-tavle .t-blaa { color: #8cc8ff; } .sk-tavle mark.t-blaa { background: rgba(116, 192, 252, .22); color: #b5dcff; }
.sk-tavle .t-gronn { color: #8ce99a; } .sk-tavle mark.t-gronn { background: rgba(140, 233, 154, .2); color: #b2f2bb; }
.skjerm-frem { padding: 18px; display: grid; gap: 16px; }
.sk-kaker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sk-kaker > div { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 14px 8px; border-radius: 14px; background: var(--panel-2); }
.sk-kaker span { font-size: .8rem; color: var(--muted); }
.sk-uke { display: grid; gap: 8px; }
.sk-uke ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.skjerm-eks { padding: 18px; display: grid; gap: 10px; }
.sk-felt { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: center; }
.sk-felt > span:first-child { color: var(--muted); font-size: .82rem; }
.sk-velg { position: relative; padding: 8px 32px 8px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--panel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-velg::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); translate: 0 -70%; rotate: 45deg; }
.sk-laget { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--line); }
.sk-laget span:last-child { color: var(--muted); }
.sk-prove { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sk-prove span { padding: 6px 12px; border-radius: 99px; background: var(--panel-2); font-weight: 600; font-size: .82rem; }
.sk-prove span:first-child { background: var(--ink); color: var(--panel); }
@media (max-width: 520px) {
  .skjerm-kurs { grid-template-columns: 1fr; }
  .sk-moduler { border-right: 0; border-bottom: 1px solid var(--line); }
  .sk-felt { grid-template-columns: 1fr; gap: 4px; }
  .sk-tavle > div { grid-template-columns: 70px minmax(0, 1fr) auto; font-size: 1.05rem; }
}

/* Logoen «K med blader»: stammen i k og to blader, i samme ånd som Vekstkurven. Lysere farger i mørk modus. */
:root { --logo-1: #6b3fb8; --logo-2: #b99cf6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --logo-1: #c7b0ff; --logo-2: #7d5bc9; } }
:root[data-theme="dark"] { --logo-1: #c7b0ff; --logo-2: #7d5bc9; }
.logo .logo-merke { width: 30px; height: 30px; }
.lm-stamme { fill: none; stroke: var(--logo-1); stroke-width: 3.2; stroke-linecap: round; }
.lm-lys { fill: var(--logo-2); }
.lm-mork { fill: var(--logo-1); }

/* Skissene i «Slik fungerer det» spiller av (js/produktdemo.js). Uten skriptet står sluttbildet. */
.skjerm { position: relative; }
.sk-peker { position: absolute; left: 0; top: 0; width: 24px; height: 24px; z-index: 5; pointer-events: none; opacity: 0;
  transition: transform .7s cubic-bezier(.45, 0, .2, 1), opacity .25s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.sk-peker.vis { opacity: 1; }
.sk-peker svg { width: 100%; height: 100%; display: block; }
.sk-peker::after { content: ""; position: absolute; left: -10px; top: -10px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; transform: scale(.4); }
.sk-peker.klikk::after { animation: klikkring .4s ease-out; }
@keyframes klikkring { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(1.6); } }
.trykket { transform: scale(.97); transition: transform .12s; }

/* Steg 1: fagmenyen legger seg over kurssiden */
.sk-fagmeny { display: none; }
[data-demo="fag"].meny .sk-fagmeny { display: grid; position: absolute; inset: 44px 0 0 0; z-index: 2; background: var(--panel); padding: 16px 18px; gap: 8px; align-content: start; animation: fagmeny-inn .3s ease-out; }
@keyframes fagmeny-inn { from { opacity: 0; transform: translateY(6px); } }
.sk-fag { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 12px; font-weight: 600; transition: background .2s, border-color .2s; }
.sk-fag i { width: 10px; height: 10px; border-radius: 50%; background: var(--f); flex: none; }
.sk-fag small { margin-left: auto; color: var(--muted); font-weight: 500; font-size: .78rem; }
.sk-fag.trykket { background: var(--accent-soft); border-color: var(--accent); }
/* Min side til Sara: fagikonene i stedet for prikker, og en hilsen øverst */
.sk-fag i[data-ikon] { width: 30px; height: 30px; background: none; border-radius: 0; display: grid; place-items: center; }
.sk-fag i[data-ikon] svg { width: 30px; height: 30px; }
.sk-fagmeny .sk-fag { padding: 6px 12px; }
.sk-elev { display: grid; gap: 2px; margin-bottom: 4px; }
.sk-elev b { font-size: 1.05rem; }
.sk-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-video .sk-spill, .sk-video .sk-tid { transition: opacity .3s; }
.sk-video.spiller .sk-spill, .sk-video.spiller .sk-tid { opacity: 0; }

/* Steg 2 og 4: ting som glir inn */
.sk-tilbake, .sk-tavle > div, .sk-laget, .sk-prove { transition: opacity .4s ease, transform .4s ease; }
.demo-skjult { opacity: 0; transform: translateY(6px); }
.sk-valg span { transition: background .25s, border-color .25s, color .25s, transform .12s; }
.sk-velg.tom::before { content: "Velg …"; color: var(--muted); }
.sk-uke li::before { transition: background .3s, border-color .3s; }
.sk-tavle { transition: opacity .4s ease, transform .4s ease; }

/* To måter å få hjelp på etter et galt svar: videoen eller støttearket */
.ov-hjelp { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-top: 10px; }
.ov-hjelp-tittel { grid-column: 1 / -1; font-weight: 600; font-size: .9rem; }
.ov-hjelpknapp { display: grid; gap: 2px; text-align: left; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--accent); background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; }
.ov-hjelpknapp b { color: var(--accent); }
.ov-hjelpknapp span { font-size: .85rem; color: var(--muted); }
.ov-hjelpknapp:hover { background: var(--accent-soft); }
.stegtavle.fremhevet { animation: fremhev 1.6s ease-out; }
@keyframes fremhev { 0%, 35% { box-shadow: 0 0 0 4px var(--accent), 0 0 0 10px var(--accent-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .stegtavle.fremhevet { animation: none; outline: 3px solid var(--accent); } }
.sk-hjelp { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sk-knapp { padding: 4px 10px; border-radius: 99px; border: 1.5px solid #6b3fb8; background: #fff; color: #6b3fb8; font-weight: 700; font-size: .8rem; transition: background .2s, transform .12s; }
.sk-knapp.trykket { background: #efe8fb; }
.ov-tilbake .ov-hjelpknapp b { color: var(--accent); }

/* Ordmerket «kladd.» i Fraunces, myk variant (valgt oktober 2026). Gjelder alle sidene, også forsiden. */
.logo .logo-navn, .forside .logo .logo-navn { font-family: "Fraunces", Georgia, serif; font-weight: 600; letter-spacing: -.02em; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: 1.55rem; }

/* Lenke fra kurssiden tilbake til fagvalget */
.fag-tilbake { display: inline-block; font-weight: 600; font-size: .92rem; color: var(--muted); text-decoration: none; margin-bottom: 4px; }
.fag-tilbake:hover { color: var(--accent); text-decoration: underline; }

/* Min side: «Dine fag» som en egen rad over de tre kolonnene */
.ms-fagene { margin-bottom: 24px; }
.ms-fagene .ms-fagrad { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Min side: eksamensdato og kartleggingskortet */
.ms-datoskjema { margin-top: 12px; max-width: 320px; }
.ms-kartlegg { display: grid; gap: 10px; justify-items: start; margin-bottom: 16px; border: 2px solid var(--accent); }
.ms-kartlegg h2 { margin: 0; }

.ms-boks .lenkeknapp { margin-top: 0; }

/* Min side: oversikten (fagene og neste steg) */
.ms-oversikt.to-kol { grid-template-columns: minmax(0, 1fr) 380px; }
.ms-oversikt.en-kol { display: block; }
.ms-oversikt.to-kol .ms-kol-venstre { display: grid; gap: 24px; align-content: start; }
@media (max-width: 900px) { .ms-oversikt.to-kol { grid-template-columns: 1fr; } }

/* Min side: fagpanelet som åpnes under «Dine fag» */
button.ms-fag { font: inherit; text-align: left; cursor: pointer; width: 100%; }
.ms-fag-pil { margin-left: auto; color: var(--accent); font-size: 1.1rem; }
.ms-fag.hoved[aria-expanded="true"] { box-shadow: 0 0 0 4px var(--accent-soft); }
.ms-fagpanel { margin-top: 16px; display: grid; gap: 18px; }
.ms-fagpanel-topp { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.ms-fagpanel-topp .ms-h2 { margin: 0; }
.ms-fagpanel-knapper { display: flex; gap: 10px; flex-wrap: wrap; }
.ms-fagpanel-rutenett { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .ms-fagpanel-rutenett { grid-template-columns: 1fr; } }
.ms-fag > span.ms-fag-tekst { display: grid; gap: 1px; min-width: 0; }
.ms-oversikt .ms-neste { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
@media (max-width: 700px) { .ms-oversikt .ms-neste { grid-template-columns: 1fr; } }

/* Kurset: kartleggingen som et tydelig kort øverst */
.kurs-kartlegging { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; margin-bottom: 20px; border: 2px solid var(--accent); }
.kurs-kartlegging h2 { margin: 0 0 4px; }
.kurs-kartlegging p { margin: 0; max-width: 62ch; }
.kurs-kartlegging .valg { display: flex; gap: 10px; flex-wrap: wrap; }
.kurs-kartlegging.dempet { border-color: var(--line); }

/* Min side: navnet i håndskrift, som skrevet på forsiden av kladdeboka */
.min-side .ms-profil h1.ms-navn { font: 700 clamp(2.6rem, 5.5vw, 3.8rem)/1 "Caveat", "Segoe Print", cursive; letter-spacing: .5px; }

/* Min side: trinn og skole som små merkelapper under navnet */
.ms-profil-merker { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ms-profil-merker li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); font-size: .9rem; font-weight: 600; color: var(--ink); }
.ms-profil-merker li:first-child { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.ms-profil-merker svg { width: 16px; height: 16px; fill: var(--muted); }

/* Støttearket som et kremhvitt ark på rutepapir (samme papir som i videoene), med steg for steg nederst */
.tavle.stegtavle {
  --ark: #fbfaf6; --ark-ink: #1d1a24; --ark-rute: rgba(107, 63, 184, .07); --ark-strek: rgba(29, 26, 36, .14);
  background-color: var(--ark); color: var(--ark-ink); border: 1px solid #e7e2d6; border-radius: 18px;
  background-image: linear-gradient(var(--ark-rute) 1px, transparent 1px), linear-gradient(90deg, var(--ark-rute) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
  box-shadow: 0 1px 0 #fff inset, 0 14px 34px rgba(29, 26, 36, .08); padding: 24px 28px;
}
.tavle.stegtavle h3 { color: #8a8496; }
.stegtavle .stegtavle-rader li { border-top-color: var(--ark-strek); }
.stegtavle .t-gul { color: #a86f00; } .stegtavle mark.t-gul { background: #ffe9a8; color: #7a5200; }
.stegtavle .t-lilla { color: #6b3fb8; } .stegtavle mark.t-lilla { background: #ebe2fb; color: #4f2c8f; }
.stegtavle .t-blaa { color: #1f6fb2; } .stegtavle mark.t-blaa { background: #dcecfb; color: #17558a; }
.stegtavle .t-gronn { color: #2b8a3e; } .stegtavle mark.t-gronn { background: #d8f3dc; color: #1f6b2f; }
.stegtavle li:has(.t-gul) .stegtavle-utregning { color: #a86f00; }
.stegtavle li:has(.t-lilla) .stegtavle-utregning { color: #6b3fb8; }
.stegtavle li:has(.t-blaa) .stegtavle-utregning { color: #1f6fb2; }
.stegtavle li:has(.t-gronn) .stegtavle-utregning { color: #2b8a3e; }
.tavle.stegtavle .svar { color: var(--ark-ink); }
.tavle.stegtavle .svar > span { border: 0; border-radius: 0; padding: 0 10px; background: linear-gradient(transparent 55%, #ffd75e 55%, #ffd75e 90%, transparent 90%); }

.stegtavle-kontroll { border-top: 1px solid var(--ark-strek); padding-top: 14px; margin-top: 4px; }
.stg-av { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.stg-av[hidden], .stg-pa[hidden] { display: none; }
.stg-start { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 99px; border: 0; background: var(--accent); color: #fff; font: 700 .95rem "Instrument Sans", system-ui, sans-serif; cursor: pointer; }
.stg-start span { font-size: .75rem; }
.stg-start:hover { filter: brightness(1.08); }
.stg-hint { font: 600 1.25rem "Caveat", cursive; color: #8a8496; }
.stg-pa { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.stg-prikker { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.stg-prikker li { width: 26px; height: 6px; border-radius: 99px; background: var(--ark-strek); transition: background .25s; }
.stg-prikker li.gjort { background: #c9b4ee; }
.stg-prikker li.na { background: var(--accent); }
.stg-prikker li:last-child { width: 12px; }
.stg-teller { font: 700 .82rem "Instrument Sans", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: #8a8496; min-width: 9ch; }
.stg-knapper { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.stg-lenke { border: 0; background: none; padding: 6px 8px; color: var(--accent); font: 600 .92rem "Instrument Sans", system-ui, sans-serif; cursor: pointer; border-radius: 8px; }
.stg-lenke:hover { background: var(--accent-soft); }
.stg-lenke:disabled { color: #bdb7c6; cursor: default; background: none; }
.stegtavle .knapp:disabled { opacity: .45; cursor: default; }
@media (max-width: 640px) { .stg-knapper { margin-left: 0; } .tavle.stegtavle { padding: 20px 18px; } }
@media print { .stegtavle-kontroll { display: none; } .tavle.stegtavle { box-shadow: none; } }
.tavle.stegtavle .svar { font: 600 2rem/1.2 "Caveat", cursive; }
.tavle.stegtavle .svar > span { padding: 0 14px; font-weight: 700; }

/* Støttearket: blankt papir med litt struktur og hull til ringpermen (valgt i papirvalg.html) */
.tavle.stegtavle {
  --hull: var(--bg, #f7f5fa);
  background-color: #fcfbf7;
  background-image:
    radial-gradient(circle at 26px 22%, var(--hull) 9px, rgba(29, 26, 36, .12) 10px, transparent 11px),
    radial-gradient(circle at 26px 50%, var(--hull) 9px, rgba(29, 26, 36, .12) 10px, transparent 11px),
    radial-gradient(circle at 26px 78%, var(--hull) 9px, rgba(29, 26, 36, .12) 10px, transparent 11px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .3 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  background-size: auto, auto, auto, 160px 160px; background-position: 0 0; padding-left: 62px;
}
/* «Støtteark» øverst, rolig og uten store bokstaver */
.tavle.stegtavle h3 { font: 600 1.35rem "Fraunces", Georgia, serif; text-transform: none; letter-spacing: 0; color: var(--ark-ink); font-variation-settings: "SOFT" 100, "opsz" 48; }
/* Stegnavnene i håndskrift, nummeret i en ring */
.stegtavle-regel { font: 600 1.45rem/1.1 "Caveat", cursive; text-transform: none; letter-spacing: 0; }
.stegtavle-navn { display: inline-flex; align-items: center; gap: 8px; }
.stegtavle-navn i { font-style: normal; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border: 2px solid currentColor; border-radius: 50% 46% 52% 48%; font-size: .85em; line-height: 1; }
.stegtavle-regel small { font: 500 1.05rem "Caveat", cursive; opacity: .85; padding-left: calc(1.25em * 1.45 / 1.05 + 8px); }
/* Svaret med to sorte streker under, som i en mattebok */
.tavle.stegtavle .svar > span { background: none; padding: 0 4px 2px; border-bottom: 6px double var(--ark-ink); }

/* Stien over en side (valgt i stivalg.html, D): rund tilbake-knapp og hvor du er, i modulfargen */
.sti { --sti: var(--accent); display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 600 .98rem "Instrument Sans", system-ui, sans-serif; color: var(--sti); }
.sti a { color: inherit; text-decoration: none; }
.sti-tilbake { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--panel-2); color: var(--muted); flex: none; transition: background .15s, color .15s; }
.sti-tilbake svg { width: 16px; height: 16px; }
.sti a.sti-tilbake:hover, .sti-knapp:hover .sti-tilbake { background: var(--accent-soft); color: var(--accent); }
.sti-tekst { display: inline-flex; align-items: center; gap: 8px; }
.sti-tekst::before { content: ""; width: 18px; height: 3px; border-radius: 3px; background: currentColor; }
.sti a.sti-tekst:hover { text-decoration: underline; text-underline-offset: 3px; }
.sti-knapp { border: 0; background: none; padding: 0; cursor: pointer; color: var(--accent); }
.sti-knapp[hidden] { display: none; }
.fagside .sti { float: none; }
.sti-tekst { color: color-mix(in srgb, var(--sti) 72%, var(--ink)); }
.sti-tekst::before { background: var(--sti); }

/* Min side: panelet for fag som kommer (kompetansemål fra Udir) */
.ms-kommer .ms-h2 .fv-status { font-size: .8rem; vertical-align: 4px; margin-left: 6px; }
.ms-kommer .ms-fagpanel-topp p { margin: 4px 0 0; max-width: 60ch; }
.ms-km-tittel { font: 600 1.15rem "Fraunces", Georgia, serif; margin: 0 0 10px; }
.ms-km { margin: 0 0 10px; padding-left: 1.4em; display: grid; gap: 10px; line-height: 1.45; }
.ms-km li::marker { color: var(--accent); font-weight: 700; }
.ms-kommer aside h3 { font: 600 1.05rem "Fraunces", Georgia, serif; margin: 0 0 8px; }
.ms-kommer-liste, .ms-kjerne { margin: 0 0 16px; padding-left: 1.1em; display: grid; gap: 6px; }
.ms-kjerne { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ms-kjerne li { padding: 4px 10px; border-radius: 99px; background: var(--panel-2); font-size: .85rem; font-weight: 600; }

/* Min side: navnet midt mot profilbildet, merkelappene på egen linje under bildet */
.ms-profil { row-gap: 14px; }
.ms-profil .ms-profil-tekst { align-self: center; }
.min-side .ms-profil h1.ms-navn { line-height: 1; padding-top: 6px; }
.ms-profil > .ms-profil-merker { flex-basis: 100%; margin: 0; }

/* Kurset: snarveier under tittelen, i samme stil som menyen øverst */
.kurs-snarveier { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.kurs-snarveier a { color: var(--ink); text-decoration: none; padding: 9px 16px; border-radius: 12px; font-weight: 600; background: var(--panel); border: 1px solid var(--line); display: inline-flex; align-items: center; gap: 8px; transition: background .15s, color .15s, border-color .15s; }
.kurs-snarveier a:hover { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.modul[id^="modul-"], section[id^="modul-"] { scroll-margin-top: 84px; }
.stegtavle-navn i { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 1.3em; height: 1.3em; font-size: .8em; line-height: 1; padding: 0 0 .1em .02em; flex: none; }
.stegtavle-navn i { width: 1.6em; height: 1.6em; }
.stegtavle-regel small { padding-left: calc(1.6em * .8 * 1.45 / 1.05 + 8px); }
.stegtavle-rader li { grid-template-columns: 215px minmax(0, 1fr) auto; }
@media (max-width: 640px) { .stegtavle-rader li { grid-template-columns: 1fr; } }
#app > .sti:first-child { margin-top: 26px; margin-bottom: 12px; }

/* Forsiden: toppen med illustrasjonen av en studieplass ved vinduet (bilder/forside.jpg). Bildet fyller hele
   toppen, og en lys toning bak teksten holder overskriften lett å lese. Den kodede scenen brukes ikke lenger. */
.kladd-topp.med-bilde {
  background: #f6efe2 url(bilder/forside.jpg) center 70% / cover no-repeat;
  padding-bottom: clamp(240px, 38vh, 460px);
}
.kladd-topp.med-bilde .kladd-scene { display: none; }
.kladd-topp.med-bilde::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(62% 48% at 50% 30%, rgba(251, 248, 240, .82) 0%, rgba(251, 248, 240, .45) 55%, rgba(251, 248, 240, 0) 82%),
    linear-gradient(rgba(251, 248, 240, .55), rgba(251, 248, 240, 0) 34%);
}
/* Bildet er lyst i begge tema, så teksten i toppen holdes mørk */
.kladd-topp.med-bilde h1, .kladd-topp.med-bilde .ingress { color: #1d1a24; }
:root[data-theme="dark"] .kladd-topp.med-bilde .ingress { color: #3a3546; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kladd-topp.med-bilde { background: #f6efe2 url(bilder/forside.jpg) center 70% / cover no-repeat; } :root:not([data-theme="light"]) .kladd-topp.med-bilde .ingress { color: #3a3546; } }
:root[data-theme="dark"] .kladd-topp.med-bilde { background: #f6efe2 url(bilder/forside.jpg) center 70% / cover no-repeat; }
@media (max-width: 700px) {
  .kladd-topp.med-bilde, :root[data-theme="dark"] .kladd-topp.med-bilde { background-image: url(bilder/forside-mobil.jpg); background-position: center bottom; padding-bottom: 300px; }
}

/* Forsiden: bildet går helt opp under menyen og fyller nøyaktig én skjerm (også laptop med 768 px høyde).
   Menyen er gjennomsiktig oppå bildet og får bakgrunn når man ruller (toppfarge.js setter .over-bilde). */
.forside { --topp-h: 61px; }
.forside .topp.over-bilde { background-color: transparent; border-bottom-color: transparent; }
.forside .topp:not(.over-bilde) { backdrop-filter: blur(8px); }
.kladd-topp.med-bilde {
  margin-top: calc(-1 * var(--topp-h));
  height: 100vh; height: 100svh; min-height: 540px; max-height: 1100px; box-sizing: border-box;
  padding: calc(var(--topp-h) + clamp(1.2rem, 7vh, 4.5rem)) 0 0;
  display: flex; flex-direction: column; align-items: center;
  background-position: center 78%;
}
.kladd-topp.med-bilde h1 { font-size: clamp(2.1rem, min(5.4vw, 7.4vh), 4.6rem); }
.kladd-topp.med-bilde .ingress { font-size: clamp(1rem, 1.9vh, 1.15rem); }
.kladd-topp.med-bilde .valg { margin: clamp(14px, 3vh, 26px) 0 0; }
@media (max-width: 700px) {
  .kladd-topp.med-bilde { height: auto; min-height: 100svh; padding-bottom: 300px; }
}

/* Videobildet på Min side: et bilde fra selve videoen, med avspillingsknapp oppå */
.ms-video.med-bilde { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #fbf8f3; }
.ms-video.med-bilde img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-video.med-bilde i { position: absolute; right: 14px; bottom: 14px; width: 52px; height: 52px; border-radius: 50%; background: #6b3fb8; box-shadow: 0 6px 18px rgba(60, 40, 90, .25); }
.ms-video.med-bilde i::after { content: ""; position: absolute; left: 20px; top: 15px; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.ms-leksjoner .ms-video.med-bilde i { display: none; }
.ms-neste .ms-lengde { font-variant-numeric: tabular-nums; }
.ms-neste-bilde { display: block; border-radius: 10px; }
.ms-neste-bilde .ms-video.med-bilde i { transition: transform .15s; }
.ms-neste-bilde:hover .ms-video.med-bilde i { transform: scale(1.08); }

/* Prøvemodus: prøvene i faget, skjema med temaer og eget materiale, og øveprøven med retting */
.pr-topp { margin: 8px 0 20px; }
.pr-topp h1 { margin: 0 0 6px; }
.pr-topp .ingress { max-width: 68ch; color: var(--muted); }
.pr-liste { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.pr-kort { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 22px; }
.pr-kort h3 { margin: 0 0 4px; font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; }
.pr-kort p { margin: 0; }
.pr-kort-knapper { display: flex; gap: 8px; align-items: center; }
.pr-skjema { padding: 22px; display: grid; gap: 12px; }
.pr-skjema h2 { margin: 0; }
.pr-skjema h3 { margin: 12px 0 0; font-size: 1.05rem; }
.pr-skjema label { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; }
.pr-skjema input[type="text"], .pr-skjema input:not([type]), .pr-skjema input[type="date"], .pr-skjema textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); }
.pr-rad { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
@media (max-width: 600px) { .pr-rad { grid-template-columns: 1fr; } }
.pr-moduler { display: grid; gap: 6px; }
.pr-modul { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; border-left: 4px solid var(--m, var(--accent)); }
.pr-modul summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; }
.pr-modul summary label, .pr-modul li label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.pr-modul ul { list-style: none; padding: 6px 0 2px 26px; margin: 0; display: grid; gap: 4px; }
.pr-modul li label { font-weight: 400; }
.pr-opplast { position: relative; border: 2px dashed var(--line); border-radius: 14px; padding: 20px; text-align: center; cursor: pointer; font-weight: 400 !important; display: block !important; }
.pr-opplast:hover { border-color: var(--accent); }
.pr-opplast input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pr-filer { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.pr-filer li { display: flex; gap: 10px; align-items: center; padding: 6px 10px; background: var(--panel-2); border-radius: 8px; }
.pr-filer li span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-knapper { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.lenkeknapp { background: none; border: 0; padding: 4px; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.lenkeknapp.fare { color: #c0392b; margin-left: auto; }
.pr-materiale { background: var(--panel-2); border-radius: 10px; padding: 8px 12px; display: inline-block; margin: 6px 0 0; }
.pr-oppgaver { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.pr-oppgave { padding: 18px 22px; }
.pr-oppgave.ok { border-left: 4px solid #2f9e44; }
.pr-oppgave.ikke-ok { border-left: 4px solid #e8590c; }
.pr-nr { margin: 0 0 4px; font-weight: 700; font-size: .9rem; }
.pr-tekst { font-size: 1.1rem; margin: 0 0 12px; }
.pr-oppgave .alternativer { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.pr-oppgave .alternativ.riktig { border-color: #2f9e44; background: #e9f7ec; }
.pr-oppgave .alternativ.feil { border-color: #e8590c; background: #fff0e6; }
.pr-riktig { color: #2f9e44; margin: 10px 0 0; }
.pr-feil { margin-top: 10px; padding: 10px 14px; background: var(--panel-2); border-radius: 10px; }
.pr-feil p { margin: 0 0 6px; }
.pr-resultat { padding: 22px; margin-bottom: 18px; text-align: center; }
.pr-score { font: 700 2.6rem "Caveat", cursive; color: var(--accent); }
.pr-svake { list-style: none; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pr-svake a { display: inline-block; padding: 6px 12px; border-radius: 99px; background: var(--panel-2); }

/* Prøvemodus som verksted: stegene til venstre, prøvearket som fylles til høyre */
.pv-tittel { margin: 6px 0 18px; }
.pv-dine { list-style: none; padding: 0; margin: 0 0 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.pv-dine li { display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); }
.pv-dine a { display: flex; gap: 8px; align-items: baseline; color: var(--ink); text-decoration: none; }
.pv-dine a span { font: 600 1.05rem "Caveat", cursive; color: var(--accent); }
.pv-verksted { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 36px; align-items: start; }
@media (max-width: 900px) { .pv-verksted { grid-template-columns: 1fr; } }
.pv-steg { list-style: none; padding: 0; margin: 0; display: grid; }
.pv-steg-ledd { border-top: 1px solid var(--line); }
.pv-steg-ledd:last-child { border-bottom: 1px solid var(--line); }
.pv-steg-topp { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 2px; background: none; border: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.pv-nr { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 1.15rem "Caveat", cursive; border: 1.5px solid var(--muted); color: var(--muted); }
.pv-steg-ledd.aktiv .pv-nr { background: var(--accent); border-color: var(--accent); color: #fff; }
.pv-steg-ledd.ferdig .pv-nr { border-color: var(--accent); color: var(--accent); }
.pv-steg-tittel { font: 600 1.15rem "Fraunces", Georgia, serif; }
.pv-steg-ledd:not(.aktiv) .pv-steg-tittel { color: var(--muted); }
.pv-steg-ledd.ferdig .pv-steg-tittel { color: var(--ink); }
.pv-kort { margin-left: auto; font: 600 1.1rem "Caveat", cursive; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.pv-steg-innhold { padding: 0 2px 22px 44px; display: grid; gap: 16px; justify-items: start; }
.pv-moduler { display: grid; gap: 16px; width: 100%; }
.pv-modul-topp { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.pv-modul-topp b { font-weight: 600; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--m) 35%, transparent) 62%); padding: 0 2px; }
.pv-temaer { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-tema { font: inherit; font-size: .88rem; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; }
.pv-tema:hover { border-color: var(--m); }
.pv-tema[aria-pressed="true"] { background: color-mix(in srgb, var(--m) 16%, var(--panel)); border-color: var(--m); }
.pv-felt { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; width: 100%; }
.pv-felt label, .pv-notat { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; width: 100%; }
.pv-felt input, .pv-notat textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); }
.pv-hint { margin: 0; color: var(--muted); font-size: .92rem; }
.pv-opplast { position: relative; display: inline-block; padding: 10px 18px; border: 1.5px dashed var(--muted); border-radius: 10px; cursor: pointer; font-weight: 600; }
.pv-opplast:hover { border-color: var(--accent); color: var(--accent); }
.pv-opplast input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pv-knapper { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; width: 100%; }

/* Arket: blankt papir med hull, som støttearket */
.pv-ark-ramme { position: sticky; top: 84px; }
.pv-ark { --hull: var(--bg, #f7f5fa); min-height: 520px; padding: 30px 34px 34px 70px; border: 1px solid #e7e2d6; border-radius: 6px; color: #1d1a24;
  background-color: #fcfbf7; box-shadow: 0 18px 40px rgba(29, 26, 36, .09); transform: rotate(.6deg);
  background-image: radial-gradient(circle at 28px 18%, var(--hull) 9px, rgba(29, 26, 36, .12) 10px, transparent 11px),
    radial-gradient(circle at 28px 50%, var(--hull) 9px, rgba(29, 26, 36, .12) 10px, transparent 11px),
    radial-gradient(circle at 28px 82%, var(--hull) 9px, rgba(29, 26, 36, .12) 10px, transparent 11px); }
.pv-hand { font-family: "Caveat", "Segoe Print", cursive; }
.pv-ark-topp { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pv-ark-topp h2 { margin: 0; font-size: 2.6rem; line-height: 1; font-weight: 700; }
.pv-stempel { flex: none; display: grid; justify-items: center; width: 62px; padding: 4px 0 6px; border: 2px solid #c0392b; border-radius: 6px; color: #c0392b; transform: rotate(-6deg); line-height: 1; }
.pv-stempel b { font: 700 1.7rem "Instrument Sans", sans-serif; }
.pv-stempel span { font: 700 .75rem "Instrument Sans", sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.pv-nar { margin: 2px 0 0; font-size: 1.35rem; color: #c0392b; }
.pv-tom { margin-top: 70px; font-size: 1.5rem; color: #a59fb1; text-align: center; }
.pv-pensum { margin-top: 22px; display: grid; gap: 14px; }
.pv-pensum h3 { margin: 0 0 4px; font-size: 1.5rem; font-weight: 700; }
.pv-pensum h3 span { background: linear-gradient(transparent 55%, color-mix(in srgb, var(--m) 40%, transparent) 55%); padding: 0 4px; }
.pv-pensum ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.pv-pensum li { display: flex; align-items: center; gap: 8px; font: 500 1.3rem "Caveat", cursive; }
.pv-pensum svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--m); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pv-pensum li.ny { animation: pv-skriv .5s ease-out; }
.pv-pensum li.ny svg path { stroke-dasharray: 24; animation: pv-hake .5s ease-out; }
@keyframes pv-skriv { from { opacity: 0; transform: translateX(-6px); } }
@keyframes pv-hake { from { stroke-dashoffset: 24; } }
@media (prefers-reduced-motion: reduce) { .pv-pensum li.ny, .pv-pensum li.ny svg path { animation: none; } }
.pv-vedlegg { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.pv-lapp { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: #fff7d1; box-shadow: 0 2px 6px rgba(29, 26, 36, .1); font-size: .85rem; transform: rotate(-1.5deg); }
.pv-lapp:nth-child(even) { transform: rotate(1.2deg); }
.pv-lapp.pv-hand { font-size: 1.15rem; }
.pv-lapp button { border: 0; background: none; cursor: pointer; color: #8a8496; font-size: 1rem; padding: 0 2px; }
.pv-eksempler { margin-top: 24px; padding-top: 14px; border-top: 1.5px dashed rgba(29, 26, 36, .18); }
.pv-eksempler ol { margin: 6px 0 10px; padding-left: 22px; display: grid; gap: 6px; }
.pv-liten { margin: 0; font-size: .8rem; color: #8a8496; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.pv-ark .pv-hand, .forside .pv-ark :is(h2, h3).pv-hand { font-family: "Caveat", "Segoe Print", cursive !important; font-variation-settings: normal; letter-spacing: 0; }

/* Øveprøven som et A4-ark: poeng i margen, små avkrysningsringer, retting med rød penn */
.pa-verktoy { max-width: 820px; margin: 0 auto 30px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pa-ark { --hull: var(--bg, #f7f5fa); --penn: #c8312a; position: relative; max-width: 820px; margin: 0 auto; padding: 46px 64px 54px 92px; color: #1d1a24;
  background-color: #fdfcf8; border: 1px solid #e4dfd2; border-radius: 4px; box-shadow: 0 1px 0 #fff inset, 0 20px 44px rgba(29, 26, 36, .09);
  background-image: radial-gradient(circle at 36px 140px, var(--hull) 10px, rgba(29, 26, 36, .13) 11px, transparent 12px),
    radial-gradient(circle at 36px 50%, var(--hull) 10px, rgba(29, 26, 36, .13) 11px, transparent 12px),
    radial-gradient(circle at 36px calc(100% - 140px), var(--hull) 10px, rgba(29, 26, 36, .13) 11px, transparent 12px);
  font: 400 1rem/1.5 "Instrument Sans", system-ui, sans-serif; }
.pa-hand { font-family: "Caveat", "Segoe Print", cursive; }
.pa-hode { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 12px; border-bottom: 2px solid #1d1a24; }
.pa-skole { margin: 0; font-size: .82rem; color: #6d6878; letter-spacing: .02em; }
.pa-ark h1 { margin: 2px 0 0; font-size: 1.7rem; }
.pa-hode dl { margin: 0; display: grid; gap: 4px; min-width: 230px; }
.pa-hode dl div { display: flex; align-items: baseline; gap: 8px; }
.pa-hode dt { font-size: .82rem; color: #6d6878; width: 40px; }
.pa-hode dd { margin: 0; flex: 1; border-bottom: 1px solid #9a94a6; min-height: 1.5em; font-size: 1.35rem; line-height: 1.1; color: #233a8a; padding-left: 4px; }
.pa-del { margin: 18px 0 8px; padding: 8px 12px; border: 1.5px solid #1d1a24; font-size: .92rem; }
.pa-oppgaver { list-style: none; margin: 0; padding: 0; }
.pa-oppgave { position: relative; padding: 16px 0 14px; border-bottom: 1px dashed rgba(29, 26, 36, .16); }
.pa-oppgave:last-child { border-bottom: 0; }
.pa-marg { position: absolute; right: -48px; top: 16px; display: grid; justify-items: center; gap: 2px; width: 40px; }
.pa-poeng { font-size: .8rem; color: #6d6878; white-space: nowrap; }
.rettet .pa-poeng { color: var(--penn); font: 700 1.1rem "Caveat", cursive; }
.pa-tekst { margin: 0 0 8px; padding-right: 8px; }
.pa-tekst b { display: inline-block; min-width: 26px; }
.pa-valg { display: flex; flex-wrap: wrap; gap: 4px 26px; padding-left: 26px; }
.pa-alt { display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; border-radius: 6px; }
.pa-alt:hover:not(:disabled) .pa-ring { border-color: #1d1a24; }
.pa-alt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pa-alt:disabled { cursor: default; }
.pa-ring { position: relative; flex: none; width: 17px; height: 17px; border: 1.5px solid #8a8496; border-radius: 50%; display: grid; place-items: center; }
.pa-ring svg { position: absolute; width: 22px; height: 22px; fill: none; stroke: #233a8a; stroke-width: 2.6; stroke-linecap: round; }
.pa-alt.fasit { position: relative; }
.pa-alt.fasit::after { content: ""; position: absolute; inset: -5px -10px -4px -7px; border: 1.8px solid var(--penn); border-radius: 50% 46% 52% 44%; transform: rotate(-3deg); pointer-events: none; }
.pa-bokstav { color: #6d6878; }
.pa-linje { padding-left: 26px; display: flex; align-items: baseline; gap: 8px; color: #6d6878; font-size: .92rem; }
.pa-linje input { width: 220px; border: 0; border-bottom: 1.5px solid #8a8496; background: transparent; font: 1.35rem "Caveat", cursive; color: #233a8a; padding: 0 4px; }
.pa-linje input:focus { outline: none; border-bottom-color: var(--accent); }
.pa-merke svg { width: 34px; height: 34px; fill: none; stroke: var(--penn); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.pa-kommentar { margin: 8px 0 0 26px; font: 500 1.25rem/1.3 "Caveat", cursive; color: var(--penn); }
.pa-kommentar p { margin: 0 0 2px; }
.pa-kommentar .pa-losning { color: #8d3a35; }
.pa-kommentar a { font: 600 .85rem "Instrument Sans", sans-serif; color: var(--accent); }
.pa-score { position: absolute; top: -26px; right: -18px; width: 140px; height: 90px; display: grid; place-items: center; transform: rotate(-5deg); color: var(--penn); }
.pa-score svg { position: absolute; inset: 0; fill: none; stroke: var(--penn); stroke-width: 2.4; stroke-linecap: round; }
.pa-score span { font: 700 2.6rem "Caveat", cursive; }
.pa-hilsen { margin: 18px 0 0; font-size: 1.6rem; color: var(--penn); transform: rotate(-1.5deg); }
.pa-lever { max-width: 820px; margin: 18px auto 0; display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.pa-etter { max-width: 820px; margin: 22px auto 0; text-align: center; }
.pa-etter h2 { margin: 0 0 8px; }
@media (max-width: 700px) {
  .pa-ark { padding: 28px 18px 32px 46px; background-image: none; }
  .pa-hode { flex-direction: column; align-items: stretch; }
  .pa-marg { position: static; display: flex; justify-content: flex-end; width: auto; }
  .pa-score { right: 10px; top: 10px; width: 110px; height: 70px; }
  .pa-valg, .pa-linje, .pa-kommentar { padding-left: 0; margin-left: 0; }
}
@media print {
  .kladd-topp, .topp, header.topp, nav, .sti, .pa-verktoy, .pa-lever, .pa-etter, footer { display: none !important; }
  body, main, #app { background: #fff !important; }
  .pa-ark { box-shadow: none; border: 0; background-image: none; padding: 0 40px 0 0; max-width: none; }
}
.pa-etter:focus { outline: none; }
.pa-uttrykk { margin: 0 0 10px 26px; font-size: 1.15rem; }
.pa-verktoy { justify-content: flex-end; }
.pa-oppgave.riktig { --penn: #2b8a3e; }
.pa-etter { margin-top: 36px; padding-bottom: 48px; }
.pa-etter h2 { margin-bottom: 16px; }
.pa-etter .pr-svake { gap: 12px 14px; margin: 0 0 32px; }
.pa-etter .pr-svake a { padding: 8px 16px; }
.pa-logo { margin-bottom: 14px; gap: 7px; color: #1d1a24; }
.pa-logo .logo-merke { width: 24px; height: 24px; }
.pa-ark .pa-logo .logo-navn { font-size: 1.2rem; }
.pv-modul-topp .lenkeknapp { text-decoration: none; padding: 4px 14px; border: 1.5px solid #f3a6c8; border-radius: 99px; font-size: .88rem; font-weight: 600; }
.pv-modul-topp .lenkeknapp:hover { background: #fdeef5; border-color: #e879a9; }

/* Prøvemodus: dra og slipp-felt for filer, og fillisten med ikoner */
.pv-slipp { position: relative; width: 100%; display: grid; justify-items: center; gap: 4px; padding: 26px 16px; border: 2px dashed #cfc9d8; border-radius: 14px; background: var(--panel); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.pv-slipp:hover, .pv-slipp.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.pv-slipp input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pv-slipp svg { width: 30px; height: 30px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pv-slipp u { color: var(--accent); }
.pv-slipp small { color: var(--muted); font-size: .8rem; }
.pv-filliste { list-style: none; padding: 0; margin: 0; width: 100%; display: grid; gap: 6px; }
.pv-filliste li { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.pv-filikon { flex: none; display: block; }
.pv-filnavn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.pv-filstr { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.pv-fjern { border: 0; background: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; padding: 0 6px; border-radius: 6px; }
.pv-fjern:hover { color: #c0392b; background: #fdecea; }
.pv-lapp .pv-filikon { display: inline-block; vertical-align: middle; }

/* Overgangen når øveprøven lages: et ark der oppgavene skrives inn nedover */
.pv-lager { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 22px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s; }
.pv-lager.vis { opacity: 1; }
.pv-lager-ark { width: min(420px, 86vw); padding: 26px 28px 30px 52px; background: #fdfcf8; border: 1px solid #e4dfd2; border-radius: 6px; box-shadow: 0 24px 50px rgba(29, 26, 36, .14); transform: translateY(14px) rotate(-1deg); transition: transform .45s cubic-bezier(.2, .8, .2, 1); color: #1d1a24;
  background-image: radial-gradient(circle at 22px 22%, var(--bg) 6px, rgba(29, 26, 36, .13) 7px, transparent 8px), radial-gradient(circle at 22px 78%, var(--bg) 6px, rgba(29, 26, 36, .13) 7px, transparent 8px); }
.pv-lager.vis .pv-lager-ark { transform: none; }
.pv-lager-topp { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 2px solid #1d1a24; }
.pv-lager-topp b { font-size: 1.6rem; }
.pv-lager-logo { width: 22px; height: 22px; }
.pv-lager-del { height: 18px; margin: 12px 0 6px; border: 1.5px solid #1d1a24; width: 70%; }
.pv-lager-rad { display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; row-gap: 6px; padding: 9px 0; border-bottom: 1px dashed rgba(29, 26, 36, .14); opacity: 0; animation: pv-rad .35s ease-out forwards; animation-delay: calc(.5s + var(--i) * .33s); }
.pv-lager-nr { font: 700 .8rem "Instrument Sans", sans-serif; }
.pv-lager-linje { height: 8px; width: 0; border-radius: 4px; background: #d9d3e3; align-self: center; animation: pv-skrive .4s ease-out forwards; animation-delay: calc(.6s + var(--i) * .33s); }
.pv-lager-valg { grid-column: 2; display: flex; gap: 14px; }
.pv-lager-valg i { width: 9px; height: 9px; border: 1.5px solid #a59fb1; border-radius: 50%; }
.pv-lager-status { position: relative; height: 1.6em; width: 300px; margin: 0; text-align: center; font-size: 1.45rem; color: var(--accent); }
.pv-lager-status span { position: absolute; inset: 0; opacity: 0; animation: pv-status 1.1s ease-in-out forwards; animation-delay: calc(var(--i) * 1s); }
.pv-lager-status span:last-child { animation-name: pv-status-sist; }
@keyframes pv-rad { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes pv-skrive { to { width: var(--b); } }
@keyframes pv-status { 0% { opacity: 0; transform: translateY(6px); } 20%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes pv-status-sist { 0% { opacity: 0; transform: translateY(6px); } 25%, 100% { opacity: 1; transform: none; } }

/* ---------- Fagsiden (fag.html): 1P og 1T, og informasjonen om hvert kurs ---------- */
.fagsiden { padding-top: 32px; padding-bottom: 48px; }
.fagsiden h1 { margin-bottom: 8px; }
.fagsiden .valg { margin-top: 16px; }
/* Fagsiden: ett fag per rad, med navn, omfang og knapper ved siden av hverandre */
.fagrader { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.nivaa-faner { max-width: 460px; margin-top: 18px; }
.fagsiden [hidden] { display: none !important; }
.nivaa-snart { padding: 28px; display: grid; gap: 10px; }
.nivaa-snart h2, .nivaa-snart p { margin: 0; }
.fagrad { display: flex; flex-direction: column; gap: 22px; padding: 26px 28px; }
.fagrad[hidden] { display: none; }
.fagrad-navn { display: flex; align-items: center; gap: 18px; }
.fagrad h2 { margin: 0; font-size: 1.35rem; }
.fagrad-tall { margin: 6px 0 0; color: var(--muted); }
.fagrad-tall b { color: var(--ink); }
.fagrad-tall span { margin: 0 10px; }
.fagrad .valg { margin: auto 0 0; flex-wrap: wrap; }
@media (max-width: 760px) { .fagrader { grid-template-columns: 1fr; } }
/* Trinnvalget under «Videregående»: små piller (Alle, Vg1, Vg2, Vg3). */
.trinn-valg { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.trinn-valg button { font: inherit; font-weight: 600; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; }
.trinn-valg button:hover { color: var(--ink); background: var(--panel-2); }
.trinn-valg button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.trinn-tom { padding: 22px 26px; margin: 0; color: var(--muted); }
.fagkort h2 { margin: 0 0 4px; }
.fagkort .valg { margin-top: 12px; }
.fagsiden .rutenett.tre h3 { margin: 0 0 6px; }
.fagsiden .rutenett.tre p { margin: 0; color: var(--muted); }
.fag-moduler { display: grid; gap: 10px; }
.fag-modul summary { cursor: pointer; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fag-modul p { margin: 10px 0 6px; }
.fag-leksjoner { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 4px; }

/* ---------- Prøveeksamen (9.5, 9.6) og karakteranslaget ---------- */
.proveeksamen { display: grid; gap: 18px; }
.pe-start { display: grid; gap: 14px; justify-items: start; }
.pe-start h2 { margin: 0; }
.pe-deler { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; width: 100%; }
.pe-del-kort { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; background: var(--panel-2); }
.pe-del-kort p { margin: 4px 0 0; }
.pe-klokke { position: sticky; top: 72px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.pe-klokke span { font: 600 1.15rem "Instrument Sans", system-ui, sans-serif; }
.pe-klokke.snart { background: var(--varsel); }
.pe-oppgave { border-top: 1px solid var(--line); padding-top: 16px; display: grid; gap: 8px; }
.pe-oppgave h3 { margin: 0; font-size: 1.1rem; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.pe-oppgave > p { margin: 0; font-size: 1.05rem; }
.pe-tema { font: 600 .8rem system-ui, sans-serif; background: var(--accent-soft); color: var(--accent); padding: 2px 9px; border-radius: 99px; }
.pe-delliste { margin: 0; padding-left: 1.4rem; display: grid; gap: 14px; }
.pe-delliste p { margin: 0 0 6px; }
.pe-tall { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.pe-tall input { width: 9em; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--line); background: var(--panel); color: var(--ink); font: 600 1.1rem "Instrument Sans", system-ui, sans-serif; }
.pe-tall input:focus-visible { outline: none; border-color: var(--accent); }
.pe-valg { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.pe-valg label { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 2px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--panel); }
.pe-valg label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pe-valg label.riktig { border-color: var(--ok); }
.pe-retting { margin-top: 8px; padding: 10px 14px; border-radius: 10px; }
.pe-retting p { margin: 6px 0 0; }
.pe-retting.ok { background: var(--ok-soft); }
.pe-retting.ok b { color: var(--ok); }
.pe-retting.feil { background: var(--varsel-soft); }
.pe-retting.feil b { color: var(--varsel); }
.pe-lever { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 16px; }
.pe-resultat { display: grid; gap: 8px; justify-items: start; }
.pe-resultat:focus { outline: none; }
.pe-score { font: 600 2.4rem "Fraunces", Georgia, serif; }
.pe-svake { margin: 0; padding-left: 1.2rem; display: grid; gap: 4px; }
.pe-gjennomgang { margin: 8px 0 0; }

.leksjon-side.med-anslag { position: static; display: grid; gap: 16px; align-content: start; }
.karakterpanel { display: grid; gap: 12px; }
.kp-topp { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.kp-topp h2 { margin: 2px 0 0; }
.kp-intervalltekst { margin: 2px 0 0; }
.kp-velger { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; }
.kp-velger select { padding: 8px 12px; border-radius: 10px; border: 2px solid var(--line); background: var(--panel); color: var(--ink); font: 600 1rem system-ui, sans-serif; }
.kp-skala { position: relative; height: 54px; margin: 18px 0 4px; }
.kp-band-rad { position: absolute; inset: 14px 0 14px 0; }
.kp-band { position: absolute; top: 0; bottom: 0; background: var(--panel-2); border-right: 2px solid var(--panel); display: grid; place-items: center; font-size: .85rem; color: var(--muted); }
.kp-band:first-child { border-radius: 8px 0 0 8px; }
.kp-band:last-child { border-radius: 0 8px 8px 0; border-right: 0; }
.kp-band.maal { background: var(--accent-soft); color: var(--accent); }
.kp-intervall { position: absolute; top: 22px; height: 10px; border-radius: 99px; background: var(--accent); opacity: .3; }
.kp-punkt { position: absolute; top: 17px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--accent); border: 3px solid var(--panel); box-shadow: var(--shadow); }
.kp-maal { position: absolute; top: 0; bottom: 0; border-left: 2px dashed var(--ink); }
.kp-maal i { position: absolute; top: -16px; left: 4px; font: 600 .75rem system-ui, sans-serif; white-space: nowrap; color: var(--ink); font-style: normal; }
.kp-status { justify-self: start; font-weight: 700; padding: 4px 12px; border-radius: 99px; }
.kp-status.ok { background: var(--ok-soft); color: var(--ok); }
.kp-status.nesten { background: var(--gang-soft); color: var(--gang); }
.kp-status.under { background: var(--varsel-soft); color: var(--varsel); }
.kp-tiltak { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; }
.kp-tiltak li span { display: block; }
.karakterpanel h3 { margin: 4px 0 0; font-size: 1rem; }
.kp-garanti summary { cursor: pointer; font-weight: 700; }
.kp-krav { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.kp-krav li { display: flex; gap: 8px; color: var(--muted); }
.kp-krav li.ok { color: var(--ok); }
.karakterpanel.kompakt h2 { font-size: 1.25rem; }
.eksamensguide .guide-steg { margin: 0; padding-left: 1.3rem; display: grid; gap: 10px; }
.kp-forklaring summary { cursor: pointer; font-weight: 600; font-size: .92rem; } .kp-forklaring ul { margin: 8px 0 0; padding-left: 1.2rem; display: grid; gap: 4px; }

/* Forsiden, steg 4: prøvemodus i liten skala. Temaer velges til venstre, prøvearket fylles til høyre. */
.sk-pm { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; padding: 16px; }
@media (max-width: 560px) { .sk-pm { grid-template-columns: 1fr; } }
.sk-pm-valg { display: grid; gap: 10px; align-content: start; }
.sk-pm-modul { display: flex; flex-wrap: wrap; gap: 5px; }
.sk-pm-modul b { flex-basis: 100%; font-weight: 600; font-size: .82rem; margin-bottom: 2px; }
.sk-pm-modul b span { background: linear-gradient(transparent 60%, color-mix(in srgb, var(--m) 35%, transparent) 60%); padding: 0 2px; }
.sk-pm-tema { font-size: .78rem; padding: 4px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); transition: background .2s, border-color .2s; }
.sk-pm-tema.valgt { background: color-mix(in srgb, var(--m) 18%, var(--panel)); border-color: var(--m); }
.sk-pm-tema.av { opacity: .55; }
.sk-pm-fil { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; padding: 6px 10px; border: 1.5px dashed var(--line); border-radius: 9px; justify-self: start; }
.sk-pm-fil.valgt { border-style: solid; border-color: var(--accent); }
.sk-pm-fil i { font: 700 .62rem var(--font); font-style: normal; color: #fff; background: #e03131; padding: 1px 4px; border-radius: 3px; }
.sk-pm-knapp { justify-self: start; font-weight: 600; font-size: .8rem; color: #fff; background: var(--accent); padding: 7px 14px; border-radius: 99px; }
.sk-pm-ark { position: relative; padding: 12px 12px 14px 26px; border-radius: 4px; background: #fdfcf8; color: #1d1a24; border: 1px solid #e4dfd2; box-shadow: 0 10px 24px -14px rgba(29, 26, 36, .35); transform: rotate(.8deg); display: grid; gap: 6px; align-content: start;
  background-image: radial-gradient(circle at 11px 22%, var(--panel) 4px, rgba(29, 26, 36, .14) 5px, transparent 6px), radial-gradient(circle at 11px 78%, var(--panel) 4px, rgba(29, 26, 36, .14) 5px, transparent 6px); }
.sk-pm-ark-topp { display: flex; justify-content: space-between; align-items: flex-start; }
.sk-pm-hand, .sk-pm-pensum li { font-family: "Caveat", cursive; }
.sk-pm-hand { font-size: 1.45rem; line-height: 1; }
.sk-pm-stempel { display: grid; justify-items: center; line-height: 1; font: 700 .55rem var(--font); text-transform: uppercase; color: #c0392b; border: 1.5px solid #c0392b; border-radius: 4px; padding: 2px 5px; transform: rotate(-6deg); }
.sk-pm-stempel b { font-size: .95rem; }
.sk-pm-pensum { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: 1.05rem; }
.sk-pm-pensum li { color: #1d1a24; }
.sk-pm-lapp { justify-self: start; font-size: .68rem; background: #fff7d1; padding: 3px 7px; box-shadow: 0 2px 5px rgba(29, 26, 36, .12); transform: rotate(-2deg); }
.sk-pm-oppg { margin: 2px 0 0; padding-left: 16px; display: grid; gap: 7px; font-size: .62rem; color: #6d6878; }
.sk-pm-oppg li::marker { font-weight: 700; }
.sk-pm-oppg li { height: 6px; border-radius: 3px; background: #ddd7e6; width: 85%; }
.sk-pm-oppg li:nth-child(2) { width: 65%; } .sk-pm-oppg li:nth-child(3) { width: 75%; } .sk-pm-oppg li:nth-child(4) { width: 55%; }
.sk-pm-antall { font-size: .66rem; font-weight: 700; color: #6d6878; text-transform: uppercase; letter-spacing: .05em; }
.sk-pm [data-pm-vis] { transition: opacity .35s, transform .35s; }
.sk-pm .demo-skjult[data-pm-vis] { opacity: 0; transform: translateY(-3px); }

/* Steg 4: etter «Lag øveprøven» vises et lite prøveark som det i programmet */
.sk-pm { position: relative; }
.sk-pa { position: absolute; inset: 10px; padding: 14px 18px 14px 34px; border-radius: 4px; background: #fdfcf8; color: #1d1a24; border: 1px solid #e4dfd2; box-shadow: 0 14px 30px -16px rgba(29, 26, 36, .4); display: grid; gap: 7px; align-content: start; overflow: hidden; transition: opacity .4s, transform .4s;
  background-image: radial-gradient(circle at 14px 20%, var(--panel) 4px, rgba(29, 26, 36, .14) 5px, transparent 6px), radial-gradient(circle at 14px 80%, var(--panel) 4px, rgba(29, 26, 36, .14) 5px, transparent 6px); }
.sk-pa.demo-skjult { opacity: 0; transform: translateY(8px) scale(.98); pointer-events: none; }
.sk-pm.viser-ark > .sk-pm-valg, .sk-pm.viser-ark > .sk-pm-ark { opacity: .15; transition: opacity .4s; }
.sk-pa-logo { display: inline-flex; align-items: center; gap: 5px; }
.sk-pa-logo .logo-merke { width: 16px; height: 16px; }
.sk-pa-logo b { font: 600 .82rem "Fraunces", Georgia, serif; } .sk-pa-logo b span { color: var(--accent); }
.sk-pa-hode { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding-bottom: 6px; border-bottom: 1.5px solid #1d1a24; align-items: end; }
.sk-pa-hode > b { grid-row: span 2; font: 650 .95rem "Fraunces", Georgia, serif; }
.sk-pa-hode > span { font-size: .6rem; color: #6d6878; display: flex; gap: 6px; }
.sk-pa-hode i { font: 600 .82rem "Caveat", cursive; color: #233a8a; border-bottom: 1px solid #9a94a6; min-width: 60px; font-style: normal; }
.sk-pa-del { font-size: .62rem; border: 1px solid #1d1a24; padding: 3px 7px; }
.sk-pa-oppg { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sk-pa-oppg li { position: relative; padding-bottom: 6px; border-bottom: 1px dashed rgba(29, 26, 36, .15); }
.sk-pa-oppg p { margin: 0 0 3px; font-size: .74rem; } .sk-pa-oppg p b { margin-right: 4px; }
.sk-pa-p { position: absolute; right: -6px; top: 0; font-size: .58rem; color: #6d6878; }
.sk-pa-valg { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: .7rem; padding-left: 12px; }
.sk-pa-valg > span { display: inline-flex; align-items: center; gap: 4px; }
.sk-pa-valg i { position: relative; width: 9px; height: 9px; border: 1.2px solid #8a8496; border-radius: 50%; }
.sk-pa-valg .krysset i::after { content: "✕"; position: absolute; left: -2px; top: -5px; font: 700 .7rem "Caveat", cursive; color: #233a8a; }
.sk-pa-oppg .brok { font-size: .7em; }

/* Logg inn og opprett bruker (bare skjemaene foreløpig; brukere kommer senere) */
.meny .meny-logginn { color: var(--ink); font-weight: 600; }
.konto { max-width: 440px; padding-block: 48px 80px; display: grid; gap: 16px; }
.konto-faner { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--panel-2); border-radius: 12px; }
.konto-faner button { font: inherit; font-weight: 600; padding: 9px; border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; }
.konto-faner button[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.konto-skjema { padding: 24px; display: grid; gap: 14px; }
.konto-skjema h1 { margin: 0; font-size: 1.6rem; }
.konto-skjema label { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; }
.konto-skjema input { font: inherit; font-weight: 400; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); }
.konto-skjema .knapp { justify-self: stretch; }
.konto [hidden] { display: none !important; } /* skjemaene og feltene bruker display: grid */
.konto-valg { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.konto-valg legend { font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.konto-skjema .konto-radio { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.konto-skjema select { font: inherit; font-weight: 400; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); }
.konto-sosial { display: grid; gap: 10px; }
.konto-sosial .knapp { justify-self: stretch; }
.konto-eller { margin: 4px 0 0; text-align: center; color: var(--muted); font-size: .9rem; }
.konto-melding { background: var(--accent-soft); color: var(--ink); border-radius: 12px; padding: 14px 16px; margin: 0; }

/* Steg 1: kurssiden og temasiden slik de ser ut i appen (js/produktdemo.js bytter mellom dem) */
.sk-k { padding: 16px 18px 18px; display: grid; gap: 14px; background: var(--panel-2); }
.sk-k-hode { display: flex; gap: 12px; align-items: center; }
.sk-k-kake { width: 58px; height: 58px; flex: none; display: block; }
.sk-k-kake svg { width: 100%; height: 100%; }
.sk-k-tittel { display: block; font: 500 1.35rem/1.1 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "opsz" 48; }
.sk-k-faner { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.sk-k-faner span { font-size: .76rem; font-weight: 600; padding: 4px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.sk-k-faner .aktiv { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent); }
.sk-k-modul { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.sk-k-modultopp { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-left: 5px solid var(--m); }
.sk-k-modultopp > div { flex: 1; min-width: 0; }
.sk-k-modultopp b { display: block; font: 500 1.02rem/1.2 "Fraunces", Georgia, serif; }
.sk-k-modultopp small { color: var(--muted); font-size: .76rem; }
.sk-k-modultopp .sk-k-kake { width: 46px; height: 46px; }
.sk-k-rader { list-style: none; margin: 0; padding: 0; }
.sk-k-rader li { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: .84rem; font-weight: 500; transition: background .2s; }
.sk-k-rader li i { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--line); flex: none; }
.sk-k-rader li.gjort i { background: var(--ok); border-color: var(--ok); }
.sk-k-rader li span { color: var(--muted); font-weight: 600; width: 2.2em; flex: none; }
.sk-k-rader li em { margin-left: auto; font: 600 1.05rem/1 "Caveat", "Segoe Print", cursive; color: #5a5368; white-space: nowrap; }
.sk-k-rader li.trykket { background: var(--accent-soft); }
.sk-l { display: grid; align-content: start; padding: 14px 18px 18px; gap: 6px; visibility: hidden; opacity: 0; }
/* Begge visningene ligger i samme rute, så skissen holder høyden når den bytter */
[data-demo="fag"] { display: grid; grid-template-rows: auto 1fr; }
[data-demo="fag"] > .sk-k, [data-demo="fag"] > .sk-l { grid-area: 2 / 1; transition: opacity .3s; }
[data-demo="fag"].leksjon .sk-k { visibility: hidden; opacity: 0; }
[data-demo="fag"].leksjon .sk-l { visibility: visible; opacity: 1; }
.sk-l-sti { color: var(--accent); font-size: .78rem; font-weight: 600; }
.sk-l-topp { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.sk-l-topp b { font: 500 1.15rem/1.15 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "opsz" 48; }
.sk-l-krav { display: flex; gap: 5px; flex: none; }
.sk-l-krav span { font-size: .68rem; font-weight: 600; padding: 3px 8px 3px 6px; border: 1px solid var(--line); border-radius: 99px; white-space: nowrap; }
.sk-l-krav span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--line); margin-right: 4px; vertical-align: -1px; }
.sk-l-del { font: 600 1.05rem/1 "Caveat", "Segoe Print", cursive; color: #5a5368; margin-bottom: 4px; }
@media (max-width: 560px) { .sk-l-krav { display: none; } .sk-k-modultopp small { display: none; } }

/* Steg 2: «Se støttearket» bytter oppgaven ut med støttearket, slik det ser ut i appen. Begge ligger i samme rute,
   så skissen holder høyden. */
[data-demo="ov"] { display: grid; grid-template-rows: auto 1fr; }
[data-demo="ov"] > .skjerm-ov, [data-demo="ov"] > .sk-ark { grid-area: 2 / 1; transition: opacity .35s, transform .35s; }
.sk-ark { padding: 14px; background: var(--panel-2); visibility: hidden; opacity: 0; transform: translateY(10px); }
[data-demo="ov"].ark .skjerm-ov { visibility: hidden; opacity: 0; }
[data-demo="ov"].ark .sk-ark { visibility: visible; opacity: 1; transform: none; }
.sk-ark .tavle.stegtavle { padding: 16px 18px 14px 50px; gap: 10px; border-radius: 14px; box-shadow: 0 10px 24px rgba(29, 26, 36, .08); height: 100%; box-sizing: border-box; align-content: start;
  background-image: radial-gradient(circle at 21px 22%, var(--panel-2) 7px, rgba(29, 26, 36, .12) 8px, transparent 9px),
    radial-gradient(circle at 21px 50%, var(--panel-2) 7px, rgba(29, 26, 36, .12) 8px, transparent 9px),
    radial-gradient(circle at 21px 78%, var(--panel-2) 7px, rgba(29, 26, 36, .12) 8px, transparent 9px); }
.sk-ark .tavle.stegtavle h3 { font-size: 1.1rem; margin: 0; }
.sk-ark .stegtavle-rader li { grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 8px 0; transition: opacity .35s, transform .35s; }
.sk-ark .stegtavle-regel { grid-column: 1 / -1; }
.sk-ark .stegtavle-regel { font-size: 1.15rem; }
.sk-ark .stegtavle-uttrykk { font-size: 1.45rem; white-space: nowrap; }
.sk-ark .stegtavle-utregning { font-size: 1.15rem; }
.sk-ark .tavle.stegtavle .svar { font-size: 1.55rem; margin-top: 0; transition: opacity .35s, transform .35s; }
.sk-ark .stegtavle-kontroll { padding-top: 10px; }
.sk-ark .stg-prikker li { width: 20px; }
.sk-ark .stg-teller { font-size: .72rem; min-width: 0; }
.sk-ark .stg-pa { gap: 10px 12px; }
.sk-ark .stg-knapper { gap: 4px; }
.sk-ark .stg-lenke { font-size: .8rem; }
.sk-ark .knapp { padding: 7px 14px; font-size: .82rem; }
.sk-ark [data-rad].demo-skjult { opacity: 0; transform: translateY(6px); }
@media (max-width: 560px) {
  .sk-ark .stegtavle-rader li { grid-template-columns: 1fr; }
  .sk-ark .tavle.stegtavle { padding-left: 40px; background-image: none; }
  .sk-ark .stg-lenke { display: none; }
}

/* Min side: antall fullførte leksjoner på fagkortet, tallet i håndskrift */
.ms-fag-antall { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; font-size: .88rem; color: var(--muted); }
.ms-fag-antall .tall { font: 700 1.5rem/1 "Caveat", "Segoe Print", cursive; color: var(--accent); }

/* Min side: «Legg til fag», et stiplet kort etter fagene, og panelet med fagene som kan legges til og som kommer */
button.ms-legg-til { background: transparent; border: 2px dashed var(--line); }
button.ms-legg-til:hover, button.ms-legg-til[aria-expanded="true"] { border-color: var(--accent); background: var(--panel); }
.ms-legg-til b { color: var(--accent); }
.ms-legg-til .ms-fag-tom { font-weight: 700; }
.ms-legg-til-panel { margin-top: 12px; display: grid; gap: 10px; max-width: 640px; }
.ms-legg-til-panel h3 { margin: 0; font: 500 1.2rem "Fraunces", Georgia, serif; }
.ms-legg-til-panel h4 { margin: 6px 0 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ms-legg-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ms-legg-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.ms-legg-liste li > span:first-child { display: grid; }
.ms-legg-liste li .muted { font-size: .85rem; }
.ms-legg-liste.kommer li { background: transparent; border-style: dashed; color: var(--muted); }
.ms-legg-liste.kommer .fv-status { font-size: 1.2rem; }

/* Få tilgang (tilgang.html): ett fag til 990 kr eller trinnpakken til 1 990 kr, alt inkludert i begge */
.tilgang { max-width: 820px; padding-block: 40px 80px; display: grid; gap: 14px; }
.tilgang h1 { margin: 0; font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1.1; }
.tilgang .ingress { margin: 0 0 8px; }
.tilgang-tilbake { color: var(--accent); font-weight: 600; text-decoration: none; font-size: .95rem; }
.tilgang-tilbake:hover { text-decoration: underline; }
.tilgang-valg { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.tilgang-kort { position: relative; padding: 24px; display: grid; gap: 18px; align-content: space-between; border: 1px solid var(--line); }
.tilgang-kort.tilgang-topp { border: 2px solid var(--accent); }
.tilgang-merke { position: absolute; top: -12px; right: 18px; background: var(--accent); color: #fff; font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; }
.tilgang-pris h2 { margin: 0 0 6px; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-family: inherit; }
.tilgang-pris p { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tilgang-pris b { font: 500 2.6rem/1 "Fraunces", Georgia, serif; white-space: nowrap; }
.tilgang-pris span { color: var(--muted); }
.tilgang-pris .tilgang-hva { margin-top: 10px; display: block; color: var(--ink); }
.tilgang-kort .knapp { justify-self: stretch; text-align: center; }
.tilgang-inkludert { padding: 8px 4px 0; display: grid; gap: 12px; }
.tilgang-inkludert h2 { margin: 0; font: 500 1.25rem "Fraunces", Georgia, serif; }
.tilgang-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tilgang-liste li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.tilgang-liste li::before { content: "✓"; color: var(--ok); font-weight: 700; }
.tilgang-inkludert .liten-tekst { margin: 0; }
.tilgang .konto-melding { display: grid; gap: 10px; justify-items: start; }
.tilgang .konto-melding[hidden] { display: none; }
.tilgang .konto-melding p { margin: 0; }
.ms-trinnpakke { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); text-decoration: none; }
.ms-trinnpakke > span:first-child { display: grid; gap: 2px; }
.ms-trinnpakke b { color: var(--accent); }
.ms-trinnpakke .muted { font-size: .85rem; }
.ms-trinnpakke > span:last-child { color: var(--accent); font-size: 1.4rem; }
.ms-trinnpakke:hover b { text-decoration: underline; }

/* Fagikonene (js/fagikoner.js): blyanttegning i en prikket ring i fagfargen */
.fagikon { flex: none; display: block; }
.fi-ring { fill: none; stroke: var(--fi); stroke-width: 2.6; stroke-dasharray: .1 5.6; stroke-linecap: round; }
.fi-strek { fill: none; stroke: #2f2740; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.fi-fyll { fill: #2f2740; }
.fi-dekk { fill: var(--panel); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fi-strek { stroke: var(--ink); } :root:not([data-theme="light"]) .fi-fyll { fill: var(--ink); } }
:root[data-theme="dark"] .fi-strek { stroke: var(--ink); } :root[data-theme="dark"] .fi-fyll { fill: var(--ink); }
.ms-legg-liste li { justify-content: flex-start; }
.ms-legg-liste li > span:first-of-type { flex: 1; }
.ms-legg-liste.kommer .fagikon { opacity: .75; }

/* Forsiden: fagikonet foran navnet på fagkortene under «Fagene» */
.fagkort-topp { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.fagkort-topp h3 { margin: 0; }
/* Min side: fagikonet ved navnet på hovedkortet (prosentringen står til venstre) */
.ms-fag-navn { display: inline-flex; align-items: center; gap: 8px; }
.ms-fag-navn { white-space: nowrap; }
@media (max-width: 480px) { .ms-fag.hoved b.ms-fag-navn { font-size: 1.2rem; } .ms-fag-navn .fagikon { width: 26px; height: 26px; } }
/* Bildeikonene har hvitt papir rundt tegningen; multiply gjør det hvite usynlig på lyse flater */
.fagikon-bilde { mix-blend-mode: multiply; border-radius: 50%; }
.fagkort-topp h2, .fagkort-topp p { margin: 0; }
/* Kurssiden: fagikonet foran fagnavnet i overskriften */
.kurs-tittel { display: flex; align-items: center; gap: 14px; }
@media (max-width: 480px) { .kurs-tittel .fagikon { width: 40px; height: 40px; } }
/* Støtteark som løser en likning: radene er likninger, ikke fortsettelser av et uttrykk, så de starter ikke med «=» */
.stegtavle.likning .stegtavle-uttrykk::before { content: ""; }
/* Støttearket: uttrykket holdes på én linje på store skjermer, så lange likninger ikke brekkes midt i */
@media (min-width: 900px) { .stegtavle-uttrykk { white-space: nowrap; } }

/* «Er det et tema du vil se nærmere på?»: temaene i videoen som bokser mellom videoen og øvingen. Fargen på nummeret er
   temaets farge i videoene. */
.fokusvalg { margin: 16px 0; }
.fokusvalg h2 { margin: 0 0 16px; }
.fokusvalg > p { margin: 0 0 14px; font-size: .92rem; }
.fokus-bokser { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.fokus-boks { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.fokus-boks:hover { border-color: var(--accent); transform: translateY(-1px); }
.fokus-boks[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.fokus-tekst { display: grid; gap: 2px; flex: 1; min-width: 0; }
.fokus-tekst b { font-weight: 700; font-size: .98rem; }
.fokus-tekst small { color: var(--muted); font-size: .82rem; }
.fokus-merke { font-size: .82rem; color: var(--muted); }
.fokus-spill { color: var(--accent); font-size: .9rem; }
.fokus-nr { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; color: #fff; font-weight: 700; font-size: .95rem; }
.fokus-nr.regel-1 { background: #1c7ed6; } .fokus-nr.regel-2 { background: #2f9e44; } .fokus-nr.regel-3 { background: #7048e8; }
.fokus-nr.regel-4 { background: #e8590c; } .fokus-nr.regel-5 { background: #d6336c; } .fokus-nr.regel-6 { background: #0c8599; }
.fokus-spiller { margin-top: 14px; }
.fokus-spiller[hidden] { display: none; }

/* ---------- Gratis prøve ----------
   Før faget er kjøpt: «Gratis» ved de åpne leksjonene, en liten lås ved resten, en rad øverst på kurssiden, og et
   lyst panel i stedet for videoen i låste leksjoner. Panelet ser ut som et kladdeark (rutepapir i lilla), ikke grått. */
.merke.gratis { background: var(--ok-soft); color: var(--ok); }
.merke.laas { background: var(--accent-soft); color: var(--accent); padding: 3px 7px; }
.merke.laas svg, .laas-ikon svg, .lk-steg.laast svg { width: 12px; height: 12px; }
.laas-ikon { display: inline-flex; color: var(--accent); }
.leksjon-rad.laast .tittel { color: var(--muted); }
.fremgang-liste li .merke.gratis, .fremgang-liste li .merke.laas { margin-left: auto; }
.fremgang-liste li .merke + .merke { margin-left: 4px; }
.lk-steg.laast { background: var(--accent-soft); border-color: transparent; color: var(--accent); }

.gratis-rad {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 10px 12px 10px 16px; border-radius: 12px; font-size: .95rem;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.gratis-rad[hidden] { display: none; }
.gratis-rad a:not(.knapp) { color: var(--accent); font-weight: 600; margin-left: 4px; }
.gratis-rad b { color: var(--accent); }

.laast-panel {
  position: relative; display: grid; gap: 10px; justify-items: start; padding: clamp(22px, 4vw, 40px);
  border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden;
  background:
    linear-gradient(90deg, var(--m, var(--accent)) 0 6px, transparent 6px),
    linear-gradient(color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px) 0 0 / 100% 26px,
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px) 0 0 / 26px 100%,
    var(--panel);
}
.laast-panel > * { margin: 0; position: relative; }
.laast-ikon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; transform: rotate(-4deg);
  background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent);
}
.laast-ikon svg { width: 24px; height: 24px; }
.laast-merke { font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.laast-panel h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.15; }
.laast-tekst { font-family: var(--hand); font-size: clamp(1.15rem, 2.4vw, 1.45rem); color: var(--accent); }
.laast-h3 { font-size: .95rem; margin-top: 8px; }
.laast-liste { list-style: none; padding: 0; display: grid; gap: 8px; }
.laast-liste li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; }
.laast-liste li::before { content: "✓"; color: var(--ok); font-weight: 800; }
.laast-panel .valg { margin-top: 10px; gap: 10px; }

.topp-gratis { margin: 0 auto; font-size: .98rem; color: #4d4858; }
.topp-gratis a { color: #6b3fb8; font-weight: 700; }
.ms-legg-knapper { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ms-chip.laast { color: var(--muted); border-style: dashed; border-left-style: solid; }

/* Menyen: «Min side» og «Logg ut» bare når brukeren er logget inn, «Logg inn» og «Opprett bruker» bare når ikke */
.meny [data-innlogget] { display: none; }
.innlogget .meny [data-innlogget] { display: revert; }
.innlogget .meny [data-utlogget] { display: none; }

/* Forsiden: pris mot EnkelEksamen, som stolper (Benford-stil) */
.pris-sml { display: grid; gap: 22px; justify-items: center; }
.pris-sml h2 { margin: 0; }
.pris-ingress { margin: 0; max-width: 620px; }
.pris-faner { margin: 0; width: 100%; }
.pris-stolper { width: 100%; max-width: 820px; display: grid; gap: 34px; margin-top: 10px; }
.pris-gruppe { display: grid; gap: 10px; }
.pris-topp { display: flex; justify-content: space-between; gap: 12px; font: 500 .78rem/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pris-dom { color: var(--accent); }
.pris-stolpe { position: relative; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; font-size: .92rem; white-space: nowrap; width: var(--b); min-width: max-content; transition: width 1.1s cubic-bezier(.2, .7, .2, 1); }
.pris-stolper:not(.vis) .pris-stolpe { width: 14%; }
.pris-stolpe b { font-weight: 700; }
.pris-stolpe.dem { background: var(--panel-2, #ecebf1); color: var(--muted); }
.pris-stolpe.oss { background: var(--accent); color: #fff; }
.pris-kilde { margin: 0; font: 500 .72rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; color: var(--muted); max-width: 640px; }
@media (prefers-reduced-motion: reduce) { .pris-stolpe { transition: none; } .pris-stolper:not(.vis) .pris-stolpe { width: var(--b); } }

/* ---------- Personvern (personvern.html) ---------- */
.personvern { padding-block: 56px 72px; line-height: 1.65; }
.personvern h1 { margin-bottom: .2em; }
.personvern h2 { margin-top: 1.8em; }
.personvern h3 { margin: 1.3em 0 .3em; font-size: 1.05rem; }
.personvern ul, .personvern ol { padding-left: 1.3em; }
.personvern li { margin-bottom: .35em; }
.personvern-slett { margin-top: 2.4em; scroll-margin-top: 90px; }
.personvern-slett h2 { margin-top: 0; }
.personvern [hidden] { display: none !important; }
/* Selskapsopplysninger som ikke er fylt inn ennå: synlige, så de ikke blir glemt. */
.fyll-inn { background: var(--gang-soft); color: var(--gang); border-radius: 4px; padding: 0 4px; }
.knapp.fare { background: var(--varsel); border-color: var(--varsel); color: #fff; }
.knapp.fare:hover { filter: brightness(1.1); }
.konto-vilkar { margin: 0; }
/* Google og Facebook: teksten til venstre og logoen til høyre i knappen. */
.knapp-sosial { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.knapp-sosial .sosial-ikon { width: 20px; height: 20px; flex: none; }

/* ---------- Samtykke før kjøp (tilgang.html) og selskapsopplysninger i bunnteksten ---------- */
.tilgang-samtykke { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; margin: 18px 4px 0; font-size: .95rem; cursor: pointer; }
.tilgang-samtykke input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.tilgang-samtykke-feil { margin: 6px 4px 0 34px; color: var(--varsel); font-size: .9rem; font-weight: 600; }
.bunn-selskap { font-size: .8rem; }

/* ---------- Midlertidig logo: Sophus (integral og navn i Playfair Display, SIL OFL 1.1, lisens i fonts/) ---------- */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/playfair-display-var.ttf) format("truetype"); }
.logo .logo-navn, .forside .logo .logo-navn { font-family: "Playfair Display", Georgia, serif; font-weight: 500; letter-spacing: 0; font-variation-settings: normal; }
/* Integralet er like høyt som 2,15 ganger versalhøyden og midtstilt mot navnet (variant 2 i logoskissene). */
.logo .logo-merke.logo-integral { width: auto; height: 1.55em; fill: var(--accent); transform: translateY(.04em); }
.logo:has(.logo-integral) { gap: 6px; font-size: 1.55rem; }
.logo:has(.logo-integral) .logo-navn { font-size: 1em; }
.sk-pa-logo .logo-merke.logo-integral { width: auto; height: 20px; fill: var(--accent); }
.sk-pa-logo:has(.logo-integral) b { font-family: "Playfair Display", Georgia, serif; font-weight: 500; }

/* ---------- «Undervisning for» i menyen (js/menyvalg.js) ---------- */
.meny-valg { position: relative; display: flex; }
.meny-valg-knapp {
  font: inherit; font-weight: 500; color: var(--muted); background: none; border: 0; cursor: pointer;
  padding: 8px 12px; border-radius: 10px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.meny-valg-knapp:hover, .meny-valg.apen .meny-valg-knapp, .meny-valg:hover .meny-valg-knapp { background: var(--panel-2); color: var(--ink); }
.meny-pil { width: 12px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.meny-valg:hover .meny-pil, .meny-valg.apen .meny-pil { transform: rotate(180deg); }
/* Panelet henger under knappen. padding-top bygger bro over gapet, så det ikke lukkes når musen flyttes ned. */
.meny-valg-panel { display: none; position: absolute; top: 100%; left: 0; z-index: 30; padding-top: 8px; min-width: 250px; }
.meny-valg:hover .meny-valg-panel, .meny-valg:focus-within .meny-valg-panel, .meny-valg.apen .meny-valg-panel { display: block; }
.meny-valg-panel::before { content: ""; position: absolute; inset: 8px 0 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); z-index: -1; }
.meny .meny-valg-panel a { display: flex; padding: 12px 16px; margin: 6px; color: var(--ink); }
.meny .meny-valg-panel a:hover { background: var(--accent-soft); color: var(--accent); }
/* Smale skjermer: menyen kan rulle sidelengs og ville klippet panelet, så det festes under toppen i stedet. */
@media (max-width: 860px) {
  .meny-valg-panel { position: fixed; top: auto; left: 16px; right: 16px; margin-top: 44px; min-width: 0; }
}
@media (max-width: 600px) { .forside .meny .meny-valg { display: none; } }

/* ---------- Lukkede moduler på kurssiden (js/kurs.js) ---------- */
.modul-topp[data-modul-topp] { cursor: pointer; }
.modul-topp[data-modul-topp]:hover { background: color-mix(in srgb, var(--panel-2) 55%, transparent); }
.modul-knapp { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; display: inline-flex; align-items: center; gap: 12px; }
.modul-pil { width: 16px; height: 11px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.modul.apen .modul-pil { transform: rotate(180deg); }
.modul .leksjoner[hidden] { display: none; }
.modul-topp h2 .modul-knapp { font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; font-variation-settings: inherit; }

/* ---------- Universitet og høyskole på fagsiden: skole, linje og år ---------- */
.uni-steg { margin-bottom: 22px; }
.uni-etikett { margin: 0 0 10px; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-family: inherit; font-weight: 700; }
.uni-piller { margin: 0; }
#nivaa-uni .nivaa-snart { margin-top: 8px; }