/* ================================================================
   grundstof.css · den fælles stil

   Fra 24. september 2026, efter ADR-032. Det, der er ens på alle sider,
   står her og ikke i hver side: skrifterne, grundstørrelsen, menuen,
   mærkerne, fremdriften og fokusringen. Hver side sætter selv sine farver
   på :root (--bg, --bg2, --bg3, --line, --ink, --ink2, --ink3, --accent,
   --ok) og har kun sine egne regler i sin <style>.

   En side henter filen med
     <link rel="stylesheet" href="grundstof.css">
   FØR sin egen <style>, så siden altid kan rette en regel her.

   Sider, der endnu ikke er lagt om, henter den ikke. De har stadig deres
   egen kopi af menuen fra isen.html og html{font-size:18px}.

   Skrifterne ligger i fonts/ og hentes ikke udefra. Alle tre er under
   SIL Open Font License 1.1. Licenserne ligger i mappen, og kilden står
   i om.html:
     Space Grotesk   overskrifter    Florian Karsten
     Inter           brødtekst       Rasmus Andersson
     JetBrains Mono  tal og mærker   JetBrains

   Intet, eleven skal læse, må være under 15 px. Grundstørrelsen er 19 px,
   og alle mål er i rem, altså i forhold til den.
   ================================================================ */
*{box-sizing:border-box;margin:0;padding:0}
@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk.woff2") format("woff2");
  font-weight:300 700;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter.woff2") format("woff2");
  font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono.woff2") format("woff2");
  font-weight:100 800;font-display:swap}
:root{
  --display:"Space Grotesk",system-ui,"Segoe UI",Roboto,sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,Menlo,monospace;
  --laerer:#c4a5f7;
}
html{font-size:19px}
html,body{font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--ink)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
p{color:var(--ink2)}
b,strong{font-weight:600;color:var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px}

/* lille overskrift over et afsnit, og brødkrummen øverst */
.kicker,.kruemme{font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3)}
.kruemme a{color:var(--ink3);text-decoration:none}
.kruemme a:hover{color:var(--ink)}
.kruemme b{color:var(--accent);font-weight:500}

/* mærker: trin, fag, "kan laves i virkeligheden" */
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.78rem;
  line-height:1.35;padding:.18rem .5rem;border-radius:6px;color:var(--ink2);
  background:color-mix(in srgb,var(--ink) 7%,transparent)}
/* kun det første mærke står i skrivemaskineskrift, resten i brødskriften,
   som er smallere, så mærkerne ikke knækker over to linjer */
.chip.tekst{font-family:var(--sans);font-size:.8rem}
.chip.farve{color:var(--c,var(--accent));background:color-mix(in srgb,var(--c,var(--accent)) 14%,transparent)}
.chip.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.chip.rund{border-radius:99px;padding:.22rem .7rem}

/* fremdrift: etiket og tal på én linje, en tynd bjælke under */
.prog{font-family:var(--mono);font-size:.8rem;color:var(--ink3);font-variant-numeric:tabular-nums}
.prog .proglinje{display:flex;justify-content:space-between;gap:.6rem;margin-bottom:.4rem}
.prog .proglinje span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prog .proglinje b{color:var(--ink);font-weight:500;white-space:nowrap}
.prog .bar{height:4px;border-radius:99px;background:color-mix(in srgb,var(--ink) 9%,transparent);overflow:hidden}
.prog .bar span{display:block;height:100%;background:var(--c,var(--accent));width:0;transition:width .6s}

@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ---------- fælles navigation (ens på alle sider) ---------- */
.sitenav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.navinner{max-width:1220px;margin:0 auto;padding:.45rem clamp(.7rem,3vw,2rem);
  display:flex;align-items:center;gap:clamp(.6rem,2vw,1.6rem)}
.navbrand{display:flex;align-items:center;gap:.5rem;flex:0 0 auto;text-decoration:none;
  color:var(--ink);font-size:.95rem;letter-spacing:.06em}
.navbrand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 9px var(--accent)}
.navbrand:hover{color:var(--accent)}
.navlinks{display:flex;gap:.15rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{display:flex;align-items:center;gap:.42rem;white-space:nowrap;text-decoration:none;
  color:var(--ink3);font-size:.88rem;padding:.45rem .7rem;border-radius:99px;
  border:1px solid transparent;transition:.15s}
.navlinks a svg{width:15px;height:15px;fill:currentColor;flex:none;opacity:.85}
.navlinks a:hover{color:var(--ink2);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.navlinks a[aria-current="page"]{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 11%,transparent)}

/* Boksen er ikke et emne, den er stedet hvor sagerne ligger. Derfor står den
   UDEN FOR den rullende liste, længst til højre, så den aldrig kan glide ud
   af skærmen, når der bliver flere emner. */
.navlinks{flex:1 1 auto;min-width:0}
.navboks{flex:0 0 auto;display:flex;align-items:center;gap:.42rem;white-space:nowrap;
  text-decoration:none;color:var(--ink3);font-size:.88rem;padding:.45rem .7rem;
  border-radius:99px;border:1px solid var(--line);transition:.15s;margin-left:.5rem}
.navboks svg{width:15px;height:15px;fill:currentColor;flex:none;opacity:.85}
.navboks:hover{color:var(--ink);border-color:var(--ink3)}
.navboks[aria-current="page"]{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
@media(max-width:640px){
  .navboks span{display:none}
  .navboks{padding:.5rem .62rem;margin-left:.35rem}
  .navboks svg{width:17px;height:17px}
}
@media(max-width:640px){
  .navbrand span,.navbrand{font-size:0}
  .navbrand .dot{font-size:0}
  .navlinks a span{display:none}
  .navlinks a{padding:.5rem .62rem}
  .navlinks a svg{width:17px;height:17px}
}

/* menuen i den nye stil. Blokken ovenfor er den samme som i isen.html,
   og det her retter kun skrift, farve og bredde. */
.navlinks a,.navboks{color:var(--ink3);font-size:.9rem}
.navlinks a:hover,.navboks:hover{color:var(--ink)}
.navbrand{font-family:var(--display);font-weight:700;letter-spacing:-.01em}
/* Kun på en bred skærm. På en telefon står der bare en prik, som før. */
@media(min-width:641px){.navbrand{font-size:1.05rem}}
.navinner{max-width:var(--bredde,1220px)}
.sitenav{background:color-mix(in srgb,var(--bg) 82%,transparent)}

/* ================================================================
   MØNSTRENE FRA ADR-030, i den nye stil (ADR-032 runde 1b)

   De faste dele af et forløb. Klassenavnene er de samme som i
   slaegten.html og isen.html, så markup'en i et forløb ikke skal
   skrives om, når siden lægges om. Kun udseendet er nyt.
   En side, der vil have en del til at se anderledes ud, retter det
   i sin egen <style>, som kommer efter den her fil.
   ================================================================ */
:root{--no:#e07a6a;--advar:#e5b454}

/* ---------- toppen af et forløb ----------
   Kun toppe med en brødkrumme, så forsidens top ikke rammes. */
header.hero:has(.kruemme){padding:clamp(2rem,5vw,3.2rem) 0 .6rem;max-width:none}
header.hero .kruemme{margin-bottom:1rem}
header.hero .kruemme~h1{font-size:clamp(2.5rem,6vw,4rem);font-weight:700;letter-spacing:-.035em;line-height:1.05}
header.hero .kruemme~h1 em{display:block;font-style:italic;font-weight:600;color:var(--accent);font-size:.72em;
  letter-spacing:-.02em;margin-top:.1em}
header.hero .kruemme~p{color:var(--ink2);font-size:clamp(1.1rem,1.9vw,1.22rem);line-height:1.6;max-width:52ch;margin-top:1rem}
header.hero .kruemme~.chips{margin-top:1.2rem}

/* ---------- brødtekst i et kapitel ---------- */
.sektion h2,.kap h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:600;line-height:1.2;margin-bottom:.7rem}
.sektion h3,.kap h3{font-size:1.15rem;font-weight:600;margin:1.5rem 0 .5rem}
.sektion p,.kap p{font-size:1.05rem;line-height:1.62;color:var(--ink2);max-width:72ch}
.sektion p+p,.kap p+p{margin-top:.7rem}
.und{color:var(--ink3);font-size:.9rem;line-height:1.55}
/* .sektion p er mere specifik end .und, så en forklaring inde i et kapitel
   fik brødtekstens størrelse. Det her retter det. */
.sektion .und,.kap .und{color:var(--ink3);font-size:.9rem;line-height:1.55}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:.5rem}

/* ---------- trinene: et gitter af små kort, fem i bredden ---------- */
.trin{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem;margin:1.8rem 0}
@media(max-width:1000px){.trin{grid-template-columns:repeat(3,minmax(0,1fr))}}
.trin button{display:flex;align-items:center;gap:.6rem;text-align:left;font:inherit;font-size:.95rem;
  line-height:1.25;padding:.65rem .75rem;border-radius:11px;background:var(--bg2);cursor:pointer;
  border:1px solid transparent;color:var(--ink2);white-space:normal;transition:background .15s}
.trin button:hover:not(:disabled){background:var(--bg3,var(--bg2));color:var(--ink)}
.trin button:disabled{opacity:.4;cursor:not-allowed}
.trin .nr{flex:none;display:grid;place-items:center;width:1.8rem;height:1.8rem;margin:0;
  border-radius:50%;border:1px solid var(--line);font-family:var(--mono);font-size:.8rem;
  font-weight:500;color:var(--ink2)}
.trin button[aria-current="true"]{background:color-mix(in srgb,var(--accent) 15%,var(--bg2));
  border-color:color-mix(in srgb,var(--accent) 60%,transparent);color:var(--ink);font-weight:600}
.trin button[aria-current="true"] .nr{background:var(--accent);border-color:var(--accent);color:#0b1410}
.trin button.klar .nr{background:var(--ok);border-color:var(--ok);color:#0b1410}
/* På en telefon bliver trinene en række, man kan skubbe sidelæns. */
@media(max-width:560px){.trin{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  margin-left:calc(-1*clamp(1rem,3vw,2rem));margin-right:calc(-1*clamp(1rem,3vw,2rem));
  padding:0 clamp(1rem,3vw,2rem) .2rem}
  .trin::-webkit-scrollbar{display:none}
  .trin button{flex:none;white-space:nowrap}}

/* ---------- kapitlet: et stort kort uden kant, med en streg i toppen ---------- */
.sektion{position:relative;background:var(--bg2);border:none;border-radius:18px;
  padding:clamp(1.3rem,3vw,2.2rem);margin-bottom:1.3rem;
  box-shadow:0 20px 44px -26px rgba(0,0,0,.85);overflow:hidden}
.sektion::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--ok));opacity:.7}
/* kasser inde i et kapitel ligger en tone dybere end kapitlet */
.inde,.fakta,.sim,.quiz,.info,.hyp{background:color-mix(in srgb,var(--bg) 55%,var(--bg2))}

/* ---------- krogen: citatet eller spørgsmålet, der åbner et kapitel ---------- */
.krog{border-left:3px solid var(--accent);padding:.2rem 0 .2rem 1.1rem;margin:1.3rem 0}
.krog p{font-family:var(--display);font-size:1.25rem;line-height:1.45;color:var(--ink)}

/* ---------- knapper ---------- */
.knap{font:inherit;font-size:.98rem;font-weight:600;padding:.6rem 1.15rem;border-radius:10px;cursor:pointer;
  border:1px solid var(--accent);background:var(--accent);color:#0b1410}
.knap:hover{filter:brightness(1.08)}
.knap:disabled{opacity:.45;cursor:default}
.knap.sek{background:none;color:var(--ink2);border-color:var(--line);font-weight:500}
.knap.sek:hover{border-color:var(--ink3);color:var(--ink)}
.bund{display:flex;justify-content:space-between;gap:.8rem;margin-top:1.6rem;
  padding-top:1.2rem;border-top:1px solid var(--line);flex-wrap:wrap}
.blok{display:flex;gap:.45rem;flex-wrap:wrap;margin:.9rem 0;align-items:center}
.blok button{font:inherit;font-size:.9rem;padding:.5rem .9rem;border-radius:9px;cursor:pointer;
  background:var(--bg3,var(--bg2));border:1px solid transparent;color:var(--ink2)}
.blok button:hover{color:var(--ink)}
.blok button[aria-pressed="true"]{border-color:var(--accent);color:var(--ink);
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
.blok button:disabled{opacity:.4;cursor:default}

/* ---------- gættet, før man må røre simuleringen ---------- */
.hyp{border:1px solid color-mix(in srgb,var(--advar) 70%,transparent);border-radius:12px;
  padding:1.05rem 1.15rem;margin:1.1rem 0}
.hyp .lb4{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--advar);margin-bottom:.5rem}
.hyp .sp{font-family:var(--display);font-size:1.15rem;color:var(--ink);line-height:1.45;margin-bottom:.8rem}
.hyp .valg{display:flex;gap:.5rem;flex-wrap:wrap}
.hyp .valg button{font:inherit;font-size:.95rem;padding:.6rem 1rem;border-radius:10px;cursor:pointer;
  background:var(--bg3,var(--bg2));border:1px solid transparent;color:var(--ink2);text-align:left;max-width:28rem}
.hyp .valg button:hover{border-color:var(--advar);color:var(--ink)}
.hyp .valg button[aria-pressed="true"]{border-color:var(--advar);color:var(--ink);
  background:color-mix(in srgb,var(--advar) 14%,transparent)}
.hyp .efter{margin-top:.85rem;font-size:1rem;line-height:1.6}

/* ---------- svar: rigtigt og hint ---------- */
.dom{border-radius:10px;padding:.85rem 1rem;margin-top:.9rem;font-size:1rem;line-height:1.6}
.dom.ja{border:1px solid color-mix(in srgb,var(--ok) 55%,transparent);
  background:color-mix(in srgb,var(--ok) 10%,transparent);color:var(--ink)}
.dom.hint{border:1px solid color-mix(in srgb,var(--advar) 55%,transparent);
  background:color-mix(in srgb,var(--advar) 9%,transparent);color:var(--ink)}
.dom.nej{border:1px solid color-mix(in srgb,var(--no) 55%,transparent);
  background:color-mix(in srgb,var(--no) 9%,transparent);color:var(--ink)}

/* ---------- simuleringen og de regnede tal under den ---------- */
.sim{border-radius:14px;padding:.9rem;margin:1.2rem 0}
.sim svg{width:100%;height:auto;display:block;border-radius:8px}
.fakta{border-radius:12px;padding:1rem 1.15rem;margin:1.2rem 0}
.fakta .tal{display:flex;gap:1.6rem;flex-wrap:wrap}
.fakta .tal>div{min-width:6.4rem}
.fakta .tal>div>b{display:block;font-family:var(--mono);font-size:1.5rem;color:var(--accent);font-weight:500;line-height:1.1}
.fakta .tal>div>span{font-size:.85rem;color:var(--ink3);line-height:1.4;display:block;margin-top:.2rem}

/* ---------- opgaven, der laves i virkeligheden bagefter ---------- */
.ude{border:1px dashed color-mix(in srgb,var(--advar) 45%,transparent);border-radius:12px;
  padding:1rem 1.15rem;margin:1.3rem 0;background:color-mix(in srgb,var(--advar) 6%,transparent)}
.ude .lb{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--advar);margin-bottom:.5rem}
.ude p,.ude ul{font-size:1rem}

/* ---------- Hvad opdagede du: elevens egne ord ---------- */
label.lb{display:block;font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:.35rem;margin-top:1.2rem}
.felt{background:color-mix(in srgb,var(--bg) 70%,var(--bg2));color:var(--ink);border:1px solid var(--line);
  border-radius:10px;padding:.65rem .8rem;font:inherit;font-size:1rem;width:100%;line-height:1.55;resize:vertical}
.felt:focus{outline:none;border-color:var(--accent)}

/* ---------- tabeller med data ---------- */
table.data{border-collapse:collapse;width:100%;font-size:.95rem;margin-top:.6rem}
table.data th,table.data td{border-bottom:1px solid var(--line);padding:.5rem .55rem;text-align:left;
  vertical-align:middle;color:var(--ink2)}
table.data th{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
table.data td.t{font-family:var(--mono);white-space:nowrap}

/* ---------- Tjek det, foldet sammen ---------- */
.quiz{border:none;border-radius:12px;padding:0;margin:.5rem 0;overflow:hidden}
.quizhoved{display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;font:inherit;
  background:none;border:0;color:var(--ink);padding:.9rem 1rem;cursor:pointer;line-height:1.45}
.quizhoved:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.quizhoved .mk{width:28px;height:28px;flex:none;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-family:var(--mono);font-size:.8rem;color:var(--ink3)}
.quizhoved .mk.ok{border-color:var(--ok);color:var(--ok)}
.quizhoved .mk.prov{border-color:var(--advar);color:var(--advar)}
.quizhoved .sp{flex:1;font-size:1.02rem}
.quizhoved .pil{font-family:var(--mono);color:var(--ink3);font-size:1.1rem}
.quizkrop{padding:0 1rem 1rem 1rem}
.quiz.lukket .quizsag{display:none}
.quizsag{font-size:1.05rem;color:var(--ink);line-height:1.5;margin-bottom:.6rem}
.quizvalg{display:flex;gap:.5rem;flex-wrap:wrap}
.quizvalg button{font:inherit;font-size:.95rem;padding:.6rem 1rem;border-radius:10px;cursor:pointer;
  background:var(--bg3,var(--bg2));border:1px solid transparent;color:var(--ink2);text-align:left;max-width:28rem}
.quizvalg button:hover{border-color:var(--ink3);color:var(--ink)}

/* ---------- infomærke: et lille "i", der folder en forklaring ud ----------
   Et <details>, så det virker uden JavaScript, kan foldes ud med tastatur og
   kan trykkes på en touchskærm. Se ADR-030 afsnit 2. */
.info{border:none;border-radius:12px;margin:1.2rem 0}
.info>summary{list-style:none;cursor:pointer;display:flex;gap:.65rem;align-items:center;
  padding:.75rem .95rem;font-size:.95rem;color:var(--ink2)}
.info>summary::-webkit-details-marker{display:none}
.info>summary:hover{color:var(--ink)}
.info>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:12px}
.info>summary .i{width:22px;height:22px;flex:none;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-size:.78rem;line-height:1;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
.info>summary::after{content:"+";margin-left:auto;color:var(--ink3);font-family:var(--mono);font-size:1rem;line-height:1}
.info[open]>summary::after{content:"\2212"}
.info[open]>summary{border-bottom:1px solid var(--line)}
.info .krop{padding:.8rem 1rem .95rem 2.3rem;max-width:72ch}
.info .krop p,.info .krop ul,.info .krop ol{font-size:.98rem;color:var(--ink2);margin:.55rem 0}
.info .krop ol,.info .krop ul{padding-left:1.15rem}
.info .krop li{margin:.3rem 0}
@media print{.info{break-inside:avoid}.info .krop{display:block}}

/* ---------- sidefoden i et forløb ---------- */
.omsiden{margin-top:2.6rem;padding-top:1.3rem;border-top:1px solid var(--line);
  font-size:.92rem;color:var(--ink3);line-height:1.7;max-width:72ch}
.omsiden b{color:var(--ink2);font-weight:500}
.omsiden a{color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--line);margin-left:.35rem}
.omsiden a:hover{color:var(--ink);border-bottom-color:var(--ink3)}

/* ================================================================
   OPGAVEBOKSEN. En opgave til en simulering eller et datasæt ser ens
   ud på hele siden: grøn ramme, nummererede trin, og eleven sætter
   selv flueben. Det første trin uden flueben lyser op. Orange (.hyp)
   betyder gæt, grøn (.opgave) betyder gør.
   Markup: <div class="opgave" data-opg="id"><div class="lb4">…</div>
   <h3>…</h3><ol><li><label><input type="checkbox"><span class="n">1</span>
   <span class="t">tekst<span class="hj">hjælp</span></span></label></li></ol></div>
   ================================================================ */
.opgave{border:1px solid color-mix(in srgb,var(--accent) 65%,transparent);border-radius:12px;
  padding:1.1rem 1.3rem 1.2rem;margin:1.3rem 0;background:color-mix(in srgb,var(--accent) 6%,var(--bg))}
.opgave .lb4{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.opgave h3{margin:.3rem 0 .85rem;font-size:1.15rem}
.opgave ol{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.opgave label{display:flex;gap:.75rem;align-items:flex-start;cursor:pointer;color:var(--ink2);line-height:1.45;position:relative}
.opgave input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.opgave .n{flex:none;width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:.8rem;border:1px solid var(--line);color:var(--ink3);position:relative}
.opgave label:hover .n{border-color:var(--accent)}
.opgave input:focus-visible+.n{outline:3px solid var(--accent);outline-offset:2px}
.opgave input:checked+.n{background:var(--ok);border-color:var(--ok);color:transparent}
.opgave input:checked+.n::after{content:"\2713";position:absolute;inset:0;display:grid;place-items:center;color:#06110c;font-size:.95rem}
.opgave li.gjort .t{color:var(--ink3)}
.opgave li.nu .n{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.opgave li.nu .t{color:var(--ink)}
.opgave .hj{display:block;font-size:.9rem;color:var(--ink3);margin-top:.15rem}
/* et spørgsmål med svar undervejs i en opgave: samme form som .hyp, men grøn */
.hyp.spm{border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.hyp.spm .lb4{color:var(--accent)}
.hyp.spm .valg button:hover,.hyp.spm .valg button[aria-pressed="true"]{border-color:var(--accent)}

/* EKSTRAOPGAVEN i bunden af et forløb: foldet sammen, til den hurtige elev,
   eller når læreren vil bruge den. Træner at tale og skrive naturfag. */
details.ekstra{border:1px dashed color-mix(in srgb,var(--laerer,#c4a5f7) 60%,transparent);border-radius:12px;margin:1.6rem 0;
  background:color-mix(in srgb,var(--laerer,#c4a5f7) 5%,var(--bg))}
details.ekstra>summary{list-style:none;cursor:pointer;padding:1rem 1.3rem;display:flex;gap:.8rem;align-items:baseline;flex-wrap:wrap}
details.ekstra>summary::-webkit-details-marker{display:none}
details.ekstra>summary .lb4{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--laerer,#c4a5f7)}
details.ekstra>summary b{font-family:var(--display);font-size:1.1rem;color:var(--ink);font-weight:600}
details.ekstra>summary::after{content:"+";margin-left:auto;color:var(--ink3);font-size:1.2rem}
details.ekstra[open]>summary::after{content:"\2212"}
details.ekstra .krop{padding:0 1.3rem 1.3rem}
details.ekstra .begreber{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0 1rem}
details.ekstra .begreber button{font:inherit;font-size:.9rem;padding:.3rem .75rem;border-radius:99px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--ink2)}
details.ekstra .begreber button[aria-pressed="true"]{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ink)}
details.ekstra .begreber button[aria-pressed="true"]::before{content:"\2713  "}