/* Teoribogens indhold — det, bin/teoribog-byg.php skriver.
 *
 * Deles af læseren (/teoribog) og modalvinduet fra forklaringerne på
 * resultatsiden. Alt står under .tb-indhold, så intet slipper ud på resten
 * af siden. Farverne er kundens egne (--fs-*), blandet med color-mix, så
 * boksene også passer i mørk tilstand, hvor tokens skifter af sig selv.
 *
 * Roligt og luftigt (Martins ønske, sep. 2026): god linjehøjde, tydelig
 * luft mellem afsnittene og rigelig luft over overskrifterne. Boksene er
 * bløde flader uden streger; tavlerne står på en blød flade i stedet for
 * i en ramme; Kort fortalt har almindelige punkter, ikke ruder.
 *
 * Husets regel: ingen farvet venstrekant på bokse. Boksene skelnes på
 * tonen, ikonet og overskriften.
 */

.tb-indhold {
  --tb-tekst: 1.0625rem;
  --tb-luft: 1.3em;
  --tb-i-accent: var(--fs-navy);
  color: var(--fs-text);
  font-family: var(--fs-font);
  font-size: var(--tb-tekst);
  line-height: 1.75;
  overflow-wrap: break-word;
}
.fs-dark .tb-indhold { --tb-i-accent: color-mix(in srgb, var(--fs-navy) 55%, #ffffff); }
.tb-indhold > :first-child { margin-top: 0; }
.tb-indhold p { margin: 0 0 var(--tb-luft); white-space: normal; }
.tb-indhold h2 {
  font-size: 1.4em;
  line-height: 1.28;
  font-weight: 650;
  letter-spacing: -0.012em;
  margin: 2.4em 0 .65em;
  text-wrap: balance;
  scroll-margin-top: calc(var(--fs-bar-h, 60px) + 32px);
}
.tb-indhold h3 { font-size: 1.1em; line-height: 1.35; font-weight: 650; margin: 1.9em 0 .5em; }
.tb-indhold ul, .tb-indhold ol { margin: 0 0 var(--tb-luft); padding-inline-start: 1.3em; }
.tb-indhold li { margin: .5em 0; padding-inline-start: .15em; }
.tb-indhold li::marker { color: color-mix(in srgb, var(--fs-text-soft) 80%, transparent); }
.tb-indhold strong { font-weight: 650; }
.tb-indhold a.tb-se {
  color: var(--tb-i-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--tb-i-accent) 40%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color .15s;
}
.tb-indhold a.tb-se:hover { text-decoration-color: currentColor; }

/* ---------- Boksene ---------- */

.tb-boks {
  margin: 2em 0;
  padding: 20px 24px 6px;
  border-radius: calc(var(--fs-radius, 12px) + 4px);
  background: color-mix(in srgb, var(--fs-navy) 6%, var(--fs-surface));
}
.tb-boks-titel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 .5em !important;
  font-size: .76em;
  font-weight: 650;
  letter-spacing: .07em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--tb-i-accent);
}
.tb-boks-titel .bi { font-size: 1.15em; }
.tb-boks-krop > :last-child { margin-bottom: 1em; }
.tb-boks-krop p { margin-bottom: .75em; }

/* Et afsnit for nogle af bogens kategorier (Store biler): en hårfin ramme
   og et lille mærke med koderne — ingen farvet kant */
.tb-kun {
  margin: 2em 0;
  padding: 16px 22px 4px;
  border-radius: calc(var(--fs-radius, 12px) + 4px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fs-text) 16%, transparent);
}
.tb-kun-maerke {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 .8em !important;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: .76em;
  font-weight: 650;
  letter-spacing: .04em;
  line-height: 1.4;
  color: var(--tb-i-accent);
  background: color-mix(in srgb, var(--fs-navy) 7%, var(--fs-surface));
}
.tb-kun > :last-child { margin-bottom: 1em; }

/* Reglen: lovkravet — rolig flade med en hårfin ramme i kundens farve */
.tb-boks-regel {
  background: var(--fs-surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fs-navy) 30%, transparent);
}
/* Vidste du: neutral, lys flade */
.tb-boks-vidste { background: color-mix(in srgb, var(--fs-text) 4.5%, var(--fs-surface)); }
.tb-boks-vidste .tb-boks-titel { color: var(--fs-text-soft); }
.tb-boks-vidste .tb-boks-titel .bi { color: var(--tb-i-accent); }
/* Pas på: husets advarselstone */
.tb-boks-faelde { background: color-mix(in srgb, var(--fs-warn, #b07d18) 12%, var(--fs-surface)); }
.tb-boks-faelde .tb-boks-titel { color: color-mix(in srgb, var(--fs-warn, #b07d18) 80%, var(--fs-text)); }
.fs-dark .tb-boks-faelde .tb-boks-titel { color: color-mix(in srgb, var(--fs-warn, #b07d18) 55%, #ffffff); }

/* ---------- Kort fortalt ---------- */

.tb-kort {
  margin: 3em 0 .5em;
  padding: 24px 28px 10px;
  border-radius: calc(var(--fs-radius, 12px) + 6px);
  background: color-mix(in srgb, var(--fs-navy) 6%, var(--fs-surface));
}
.tb-kort-titel {
  margin: 0 0 .6em !important;
  font-size: 1.05em;
  font-weight: 650;
  color: var(--fs-text);
}
/* Ikonet foran titlen er pynt — overskriften siger det samme */
.tb-kort-titel .bi { display: none; }
.tb-kort ul { margin: 0; padding-inline-start: 1.2em; list-style: disc; }
.tb-kort li { margin: 0 0 .8em; padding-inline-start: .2em; }
.tb-kort li::marker { color: color-mix(in srgb, var(--tb-i-accent) 70%, transparent); }

/* ---------- Tavlerne ---------- */

/* Højst tre-fire på en række: hver tavle skal kunne ses, uden at man
   forstørrer den */
.tb-tavler {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 16px;
  margin: 1.8em 0 2em;
}
.tb-tavler-en { grid-template-columns: minmax(196px, 260px); }
/* Fire tavler står to og to. Fire på én række gør hver tavle for lille
   (Martins ønske: sjældent fire ved siden af hinanden), og tre med en enlig
   nedenunder ser ud, som om den sidste er glemt. */
.tb-tavler:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tb-tavle {
  margin: 0;
  padding: 22px 14px 18px;
  border-radius: calc(var(--fs-radius, 12px) + 4px);
  background: color-mix(in srgb, var(--fs-text) 4%, var(--fs-surface));
  text-align: center;
  cursor: zoom-in;
  transition: background .15s;
}
.tb-tavle:hover { background: color-mix(in srgb, var(--fs-text) 7%, var(--fs-surface)); }
.tb-tavle-stak {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 112px;
  justify-content: center;
}
.tb-tavle-hoved { width: auto; height: 104px; max-width: min(150px, 100%); object-fit: contain; }
.tb-tavle-under { width: auto; height: 40px; max-width: min(140px, 100%); object-fit: contain; }
.tb-plade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 84px;
  padding: 3px 9px;
  border: 2px solid #111;
  border-radius: 4px;
  background: #fff;
  color: #111;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}
.tb-plade .tb-pil { width: 24px; height: 24px; }
.tb-roed { color: #c22c2c; }
.tb-tavle figcaption { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.tb-tavle-navn { font-size: 14.5px; line-height: 1.35; font-weight: 600; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal; }
.tb-tavle-kode { font-size: 12.5px; color: var(--fs-text-soft); letter-spacing: .02em; }
.tb-tavle-tekst { font-size: 13.5px; line-height: 1.45; color: var(--fs-text-soft); margin-top: 6px; }
/* Tavlerne er tegnet til en lys baggrund — i mørk tilstand får de en lys plade bag sig */
/* Pladen følger tavlen, så den ikke bliver en stor lys flade i en bred celle */
.fs-dark .tb-tavle-stak { width: fit-content; max-width: 100%; margin-inline: auto; background: #e8ecf0; border-radius: 12px; padding: 10px 14px; }
.fs-dark .tb-t-ramme { background: #e8ecf0; border-radius: 4px; padding: 1px; }

/* Lille tavle i en sætning */
.tb-t-ramme { display: inline-block; vertical-align: -.42em; line-height: 0; margin: 0 .12em; }
.tb-t { height: 1.55em; width: auto; }

/* ---------- Illustrationer og tabeller ---------- */

.tb-figur { margin: 2.4em 0; }
.tb-figur img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--fs-radius, 12px) + 2px);
  cursor: zoom-in;
}
.tb-figur figcaption { margin-top: 12px; font-size: .875em; line-height: 1.55; color: var(--fs-text-soft); }
.tb-figur-halv { max-width: 520px; }
.tb-figur-plads {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--fs-radius, 12px) + 2px);
  background: color-mix(in srgb, var(--fs-text) 4%, var(--fs-surface));
  color: var(--fs-text-soft);
  font-size: .9em;
}

/* ---------- Illustrationer med etiketter (scenerne i stil v3) ----------
   Teksten står ikke i tegningen, men som HTML oven på den: systemets skrift,
   skarp ved zoom og mulig at oversætte. .tb-ill er præcis så stor som
   billedet, så etiketterne kan stå i procent; skriften regnes i lærredets px
   (--tb-ill-str) og omsættes med figurens bredde (100cqw), så den står i
   samme forhold til tegningen på telefon, i spalten og i lysboksen.
   Tegningen er den samme i lys og mørk tilstand, og det er etiketterne også. */
.tb-ill {
  --tb-ill-maxh: min(82vh, 900px);
  --tb-ill-skrift: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --tb-ill-tekst: #17222d;
  --tb-ill-trin: #18232e;
  position: relative;
  container-type: inline-size;
  width: min(100%, calc(var(--tb-ill-maxh) * var(--tb-ill-b) / var(--tb-ill-h)));
  aspect-ratio: var(--tb-ill-b) / var(--tb-ill-h);
  margin-inline: auto;
  border-radius: calc(var(--fs-radius, 12px) + 2px);
  overflow: hidden;
  cursor: zoom-in;
}
/* Klassen tre gange: stærkere end sidernes egne regler for figurbilleder
   (spaltens max-height, opgavekortets 4:3, lysboksens og vinduets auto-bredde),
   som alle har to klasser og står i stilark, der indlæses efter dette */
.tb-ill.tb-ill.tb-ill > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  object-fit: fill;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.tb-ill > img:focus-visible { outline: none; }
.tb-ill:has(> img:focus-visible) { outline: 2px solid var(--tb-i-accent, var(--fs-navy)); outline-offset: 3px; }
.tb-ill-lag { position: absolute; inset: 0; pointer-events: none; }
.tb-e {
  --s: 1;
  position: absolute;
  font-family: var(--tb-ill-skrift);
  font-size: max(calc(11px * var(--s) * var(--tb-e-s, 1)), calc(100cqw / var(--tb-ill-b) * var(--tb-ill-str) * var(--s) * var(--tb-e-s, 1)));
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.005em;
  white-space: pre;
  text-align: center;
  color: var(--tb-ill-tekst);
  translate: -50% -50%;
}
/* ankeret er fysisk som tegningen: venstre = etikettens venstre kant på punktet */
.tb-e[data-anker="venstre"] { translate: 0 -50%; }
.tb-e[data-anker="hoejre"] { translate: -100% -50%; }
/* Over eller under et køretøj står mærket med sin kant på punktet, så det
   aldrig dækker køretøjet, heller ikke på en telefon, hvor skriften holdes
   på mindst 11 px og mærket derfor fylder relativt mere end på lærredet. */
.tb-e[data-kant="over"] { translate: -50% -100%; }
.tb-e[data-kant="under"] { translate: -50% 0; }
/* Et mærke ved et trinnummer (fx »Dig« ved 3) står på nummerets punkt og
   skubbes ud forbi det i em, så de to aldrig glider ind over hinanden.
   2,15em er nummerets bredde med ring og lidt luft i mærkets egen skrift. */
.tb-e[data-efter="venstre"] { translate: calc(-100% - 2.15em) -50%; }
.tb-e[data-efter="hoejre"] { translate: 2.15em -50%; }
.tb-e[data-efter="over"] { translate: -50% calc(-100% - 2.1em); }
.tb-e[data-efter="under"] { translate: -50% 2.1em; }
.tb-e-pill {
  display: inline-flex;
  align-items: center;
  gap: .42em;
  padding: .32em .74em .34em;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 .5px rgba(16, 24, 32, .16), 0 1px 2px rgba(16, 24, 32, .06), 0 .4em 1.2em -.2em rgba(16, 24, 32, .22);
}
/* flere linjer: en afrundet rektangel i stedet for en kapsel */
.tb-e-pill[data-linjer] { border-radius: .8em; text-align: start; }
/* betydning: en lille prik foran teksten, aldrig en farvet pille */
.tb-e-ok { --c: #1e9e5a; }
.tb-e-forbudt { --c: #d93025; }
.tb-e-advarsel { --c: #e59a00; }
.tb-e-info { --c: #1f6feb; }
.tb-e-pill:is(.tb-e-ok, .tb-e-forbudt, .tb-e-advarsel, .tb-e-info)::before {
  content: "";
  flex: none;
  width: .48em;
  height: .48em;
  border-radius: 50%;
  background: var(--c);
}
.tb-e-pill:has(> .tb-e-nr)::before { display: none; }
.tb-e-nr {
  display: grid;
  place-items: center;
  min-width: 1.4em;
  height: 1.4em;
  margin-inline-start: -.36em;
  padding: 0 .28em;
  border-radius: 999px;
  background: var(--c, var(--tb-ill-trin));
  color: #fff;
  font-size: .82em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tb-e-maal { font-variant-numeric: tabular-nums; font-weight: 650; }
/* »Dig«: lille og diskret, i kundens farve */
.tb-e-dig {
  --s: .84;
  font-weight: 650;
  padding: .26em .66em .28em;
  color: var(--fs-navy, #1a4272);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fs-navy, #1a4272) 38%, transparent), 0 .4em 1.2em -.3em rgba(16, 24, 32, .25);
}
/* Pillen er hvid i begge tilstande, men kundens farve lysnes i mørk tilstand;
   den mørknes derfor igen, så »Dig« stadig kan læses på det hvide */
.fs-dark .tb-e-dig { color: color-mix(in srgb, var(--fs-navy, #1a4272) 45%, #0c1a2c); }

/* trinnummeret i et forløb: en lille mørk cirkel med hvid ring */
.tb-e-trin {
  --s: .86;
  display: grid;
  place-items: center;
  min-width: 1.62em;
  height: 1.62em;
  padding: 0 .3em;
  border-radius: 999px;
  background: var(--tb-ill-trin);
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 .14em #fff, 0 .25em .9em rgba(10, 18, 26, .28);
}
/* ren tekst, fx en panelets titel eller en akses tal: ingen pille */
.tb-e-tekst { font-weight: 500; }

/* Billedteksten til et forløb: indledning og de samme små trinnumre */
.tb-indhold .tb-figur-lead { margin: 0; color: var(--fs-text); font-weight: 600; }
.tb-indhold .tb-trin { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.tb-indhold .tb-trin li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin: 0; padding: 0; }
.tb-indhold .tb-trin li::before {
  content: attr(data-nr);
  display: grid;
  place-items: center;
  min-width: 1.55em;
  height: 1.55em;
  margin-top: .17em;
  padding: 0 .25em;
  border-radius: 999px;
  background: #18232e;
  color: #fff;
  font-size: .82em;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fs-dark .tb-indhold .tb-trin li::before { background: #e4e9ee; color: #11171e; }

/* Opgavekortet: scenen fylder feltet (4:3) som object-fit: cover, men
   etiketterne skal følge med, så hele .tb-ill skaleres og skæres til.
   Feltets højde er 75cqw, så dækket er det største af de to mål. */
.tb-indhold .tb-opgave-figur:has(> .tb-ill) {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  container-type: inline-size;
}
.tb-opgave-figur > .tb-ill {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: max(100cqw, calc(75cqw * var(--tb-ill-b) / var(--tb-ill-h)));
  max-width: none;
  border-radius: 0;
}

/* Lysboksen (teoribog.js) og forstørrelsen i vinduet fra forklaringerne
   (teoribog-link.js) kloner hele .tb-ill. Et stående billede må blive
   større end skærmhøjden, ellers ville det ikke blive større end i spalten:
   mindst 600 px bredt, og fladen ruller. */
:is(.tb-lysboks, .fs-tb-zoom) .tb-ill {
  --tb-ill-maxh: calc(100vh - 120px);
  flex: none;
  width: min(96vw, 1440px, max(calc(var(--tb-ill-maxh) * var(--tb-ill-b) / var(--tb-ill-h)), 600px));
  background: #fff;
  cursor: zoom-out;
}
:is(.tb-lysboks, .fs-tb-zoom):has(.tb-ill) {
  align-items: flex-start;
  padding-block: 56px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* margin: auto centrerer uden at skære toppen af, når billedet er højere end skærmen */
:is(.tb-lysboks, .fs-tb-zoom):has(.tb-ill) > :is(.tb-lysboks-indhold, .fs-tb-zoom-flade) { margin: auto; max-height: none; max-width: min(96vw, 1440px); }
:is(.tb-lysboks, .fs-tb-zoom):has(.tb-ill) :is(.tb-lysboks-luk, .fs-tb-zoom-luk) { position: fixed; z-index: 1; }

.tb-tabel-rul { overflow-x: auto; margin: 2em 0; }
.tb-tabel { width: 100%; border-collapse: collapse; font-size: .94em; line-height: 1.55; }
.tb-tabel th, .tb-tabel td {
  padding: 11px 14px;
  text-align: start;
  border-bottom: 1px solid color-mix(in srgb, var(--fs-text) 11%, transparent);
  vertical-align: top;
}
.tb-tabel th {
  font-size: .86em;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--fs-text-soft);
  border-bottom-color: color-mix(in srgb, var(--fs-text) 22%, transparent);
}
.tb-tabel tr:last-child td { border-bottom: 0; }

@media (max-width: 600px) {
  .tb-indhold { --tb-tekst: 1.0625rem; line-height: 1.7; }
  .tb-indhold h2 { margin-top: 2.1em; }
  .tb-tavler,
  .tb-tavler:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tb-tavler-en { grid-template-columns: minmax(0, 240px); }
  .tb-tavle { padding: 18px 8px 14px; }
  .tb-tavle-hoved { height: 84px; max-width: 120px; }
  .tb-tavle-under { height: 34px; }
  .tb-boks { padding-inline: 18px; }
  .tb-kort { padding-inline: 20px; }
}