/* ── Merlijn Leren · stijl: tokens, basis, typografie, beweging en schil ────────────────
   Ontwerpspecificatie §3. Alle tokens staan op .lr-wortel, nooit op :root. In leer.html is dat
   <body class="lr-wortel">, in het ledenportaal later de houder van de tab 'Leren'. Zo raakt
   dit bestand niets van een pagina eromheen.

   De kleurlogica (bindend, §3.2):
     GOUD   = wat Merlijn vond, en waar jij staat (patroon, voortgang, actief, focus)
     NAVY   = structuur en bediening (koppen, golven, zones, knoppen)
     KORAAL = dalen en waar het misloopt (dalende kaarsen, ongeldig, dunne markt)
     GROEN  = stijgen, alleen in grafieken en cijfers
     GRIJS  = context
   Kleur is nooit het enige teken: er staat altijd een woord, een icoon of een lijnstijl bij.
   Goud of koraal als tekst kan alleen via --lr-goud-tekst of --lr-koraal-tekst (of vanaf 24 px).
   --lr-vaag is alleen voor versiering en uitgeschakelde dingen, nooit voor tekst die je leest.

   Elk onderdeel heeft een eigen bestand in css/ (gelinkt in leer.html). Hier staan alleen de
   tokens, de basis, de typografie, de beweging en een paar gedeelde hulpklassen. Elke klasse
   hier begint met lr-: dit bestand mag mee naar het portaal zonder iets van het portaal te raken.
   (De kopband van de twee toegangspagina's staat in css/toegang.css: die laadt alleen daar.)
   scripts/test-leer-contrast.js leest de kleuren uit dit bestand en rekent het contrast na. */

/* ── 1 · Tokens, licht thema ───────────────────────────────────────────────────────────── */
.lr-wortel {
  /* Kleur (§3.1) */
  --lr-navy: #0e2237;          /* koppen, kaart 'In het kort' en 'Onthoud' */
  --lr-navy2: #17334d;         /* actieve segmenten, hoofdknoppen, golflijnen, zones, koers nu */
  --lr-band-van: #0e2237;      /* kopband en begroetingsband: in beide thema's navy */
  --lr-band-tot: #17334d;
  --lr-goud: #d8b058;          /* alleen vlakken: voortgang, zegels, knop 'Ga verder' */
  --lr-goud-lijn: #a07c2c;     /* patroonomtrek, meetregel, randen van gouden vlakken, actieve onderlijn */
  --lr-goud-tekst: #7d5f17;    /* links, woordtips, kleine goudkleurige tekst */
  --lr-goud-zacht: rgba(216, 176, 88, .14);  /* doelband, oplichten van een blok */
  --lr-koraal: #c1664f;        /* dalende kaarsen, ongeldig-lijn (vlak en lijn) */
  --lr-koraal-tekst: #a24a35;  /* dalingscijfers, waarschuwingstekst */
  --lr-koraal-vlak: #a24a35;   /* gevulde pil 'Zo mislukt het', 'MISLUKT' */
  --lr-koraal-zacht: rgba(193, 102, 79, .10);  /* achtergrond van een waarschuwingskaart */
  --lr-groen: #2f6b4d;         /* alleen stijgende kaarsen en stijgingscijfers */
  --lr-grond: #f7f5f1;         /* pagina */
  --lr-papier: #ffffff;        /* kaarten */
  --lr-creme: #faf7f1;         /* vakken in kaarten, 'In mensentaal', leerdoelen */
  --lr-lijn: #e7ddc9;          /* randen van kaarten, scheidingen (versiering) */
  --lr-lijn-zacht: #efe8da;    /* raster van de grafiek, skelet bij het laden */
  --lr-lijn-sterk: #968566;    /* randen van bedieningselementen (tegels, velden, schakelaars) */
  --lr-inkt: #1f2a37;          /* tekst */
  --lr-gedempt: #5f6b7a;       /* bijtekst, mini-labels, aslabels */
  --lr-vaag: #8f99a5;          /* alleen versiering en uitgeschakelde dingen */
  --lr-focus: #a07c2c;         /* focusring */
  --lr-schaduw: 0 1px 2px rgba(14, 34, 55, .06), 0 4px 14px rgba(14, 34, 55, .05);
  --lr-schaduw-dialoog: 0 12px 40px rgba(14, 34, 55, .18);

  /* Kleur, aanvullend: afgeleid uit §3.1, §3.5 en §4 (staan niet als rij in de tabel) */
  --lr-op-navy2: #ffffff;           /* tekst op een vlak in navy2 (hoofdknop, actief segment) */
  --lr-op-goud: #0e2237;            /* tekst op een gouden vlak (7,9:1) */
  --lr-op-koraal-vlak: #ffffff;     /* tekst op --lr-koraal-vlak */
  --lr-navy-vlak: #0e2237;          /* vlak van lr-kaart--navy */
  --lr-navy-vlak-rand: transparent;
  --lr-op-navy-vlak: #f7f5f1;       /* tekst in lr-kaart--navy */
  --lr-op-navy-vlak-gedempt: #b8c6d6;
  --lr-band-tekst: #ffffff;         /* op de kopband (navy in beide thema's) */
  --lr-band-gedempt: #b8c6d6;
  --lr-band-goud: #d8b058;
  --lr-navy2-zacht: rgba(23, 51, 77, .07);   /* vlak van een zone (§3.7) */
  --lr-goud-markeer: rgba(216, 176, 88, .35); /* gevonden zoekwoord (<mark>), selectie */
  --lr-schaduw-hover: 0 2px 4px rgba(14, 34, 55, .07), 0 10px 24px rgba(14, 34, 55, .09);
  --lr-sluier: rgba(14, 34, 55, .40);         /* achter een dialoog of paneel */

  /* Grafiek (§3.7). grafiek.js leest deze namen met getComputedStyle. Een kleur met
     doorzichtigheid staat hier als rgba(), want de grafiek rekent geen color-mix() uit. */
  /* De drie EMA's elk een eigen kleur (voorzitter 21-10-2026): kort = blauw, middel = amber,
     lang = de inktkleur en dikker. Ze staan ook zo in de legende en op de laagknop. */
  --lr-grafiek-ema20: #2563a8;
  --lr-grafiek-ema50: #9a5a0c;
  --lr-grafiek-ema200: var(--lr-inkt);
  /* RSI: boven 70 overkocht (koraal), onder 30 oververkocht (groen); een zacht vlak, met het woord erbij. */
  --lr-grafiek-overkocht: rgba(193, 102, 79, .13);
  --lr-grafiek-oververkocht: rgba(47, 107, 77, .13);
  --lr-grafiek-rsi: var(--lr-navy2);
  --lr-grafiek-macd-signaal: var(--lr-gedempt);
  --lr-grafiek-zone: var(--lr-navy2);         /* steun en weerstand: neutraal, geen koraal */
  --lr-grafiek-nieuws: var(--lr-navy2);       /* nieuwsstippen: niet langer goud */
  /* Fibonacci (voorzitter 22-10-2026: "toon de fib niveau beter met kleuren en %"): elk niveau een eigen
     kleur, op de grafiek (lijn en label) en in de legende. Kleur is nooit het enige teken: het label draagt
     altijd het percentage. Gevalideerd als categorisch palet in de volgorde van de prijs (78,6 · 61,8 · 50 ·
     38,2 · 23,6 · 127,2 · 161,8 · 261,8): kleurenblind ΔE ≥ 8 tussen buren, ≥ 3:1 op papier, licht én donker.
     Het anker (0 % en 100 %) is inkt, de zone 50–61,8 % een zacht vlak in de kleur van 61,8. */
  --lr-fib-anker: var(--lr-inkt);
  --lr-fib-236: #c2427a;
  --lr-fib-382: #008300;
  --lr-fib-500: #2a78d6;
  --lr-fib-618: #d4572a;
  --lr-fib-786: #4a3aa7;
  --lr-fib-1272: #a87200;
  --lr-fib-1618: #13916a;
  --lr-fib-2618: #7a4fd0;
  --lr-fib-zone: rgba(212, 87, 42, .09);

  /* Letters (§3.3): geen extern lettertype */
  --lr-kop-letter: Georgia, "Times New Roman", serif;
  --lr-tekst-letter: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --lr-cijfer-letter: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  /* Typografische rollen als font-shorthand: gewicht grootte/regel letter (desktop) */
  --lr-font-display: 400 40px/48px var(--lr-kop-letter);   /* begroeting, getuigschrift */
  --lr-font-h1: 700 32px/40px var(--lr-kop-letter);        /* paginatitel */
  --lr-font-h1-groot: 700 34px/42px var(--lr-kop-letter);  /* les en patroon */
  --lr-font-h2: 700 22px/30px var(--lr-kop-letter);        /* sectie */
  --lr-font-h3: 600 17px/24px var(--lr-tekst-letter);
  --lr-font-inleiding: italic 400 18px/28px var(--lr-kop-letter);
  --lr-font-kort: 400 18px/28px var(--lr-tekst-letter);    /* KORT-zin */
  --lr-font-lees: 400 17px/28px var(--lr-tekst-letter);    /* les, artikel (op gsm niet kleiner) */
  --lr-font-tekst: 400 15px/24px var(--lr-tekst-letter);   /* gewone tekst */
  --lr-font-klein: 400 13px/20px var(--lr-tekst-letter);
  --lr-font-mini: 700 11px/16px var(--lr-tekst-letter);    /* mini-label, hoofdletters */
  --lr-font-koers: 400 28px/34px var(--lr-cijfer-letter);  /* groot cijfer: koers */
  --lr-font-score: 400 56px/60px var(--lr-kop-letter);     /* groot cijfer: score */
  --lr-font-tabelcijfer: 400 14px/20px var(--lr-cijfer-letter);
  --lr-mini-spatie: .14em;
  --lr-leesbreedte: 66ch;      /* hoogstens 66 tekens per regel */

  /* Ritme (§3.4): raster van 4 */
  --lr-ruimte-1: 4px;
  --lr-ruimte-2: 8px;
  --lr-ruimte-3: 12px;
  --lr-ruimte-4: 16px;
  --lr-ruimte-5: 24px;
  --lr-ruimte-6: 32px;
  --lr-ruimte-7: 48px;
  --lr-ruimte-8: 64px;
  --lr-ruimte-9: 96px;
  --lr-kantlijn: 40px;          /* gsm 16 · tablet 24 · desktop 40 */
  --lr-tussen-secties: 48px;    /* gsm 32 */
  --lr-tussen-kaarten: 20px;    /* gsm 16 */
  --lr-kaart-binnen: 24px;      /* binnenmarge van een kaart, gsm 16 */
  --lr-inhoud-max: 1200px;
  --lr-leeskolom: 680px;
  --lr-bedienkolom: 400px;      /* leeskolom naast de grafiek (Dossier) */
  --lr-zijkolom: 340px;         /* 260 tot 340 */
  --lr-tikdoel: 44px;
  /* De rand links en rechts van de pagina: de kantlijn, of meer zodat de inhoud hoogstens
     --lr-inhoud-max breed is. Gebruik als padding-inline op een element over de volle breedte. */
  --lr-rand-pagina: max(var(--lr-kantlijn), calc((100% - var(--lr-inhoud-max)) / 2));

  /* Rondingen (§3.5) */
  --lr-rond-kaart: 14px;
  --lr-rond-held: 20px;
  --lr-rond-tegel: 12px;
  --lr-rond-vak: 10px;
  --lr-rond-pil: 999px;

  /* Beweging (§3.8). Alleen opacity, transform en stroke-dashoffset bewegen. */
  --lr-duur-kort: 160ms;   /* hover, focus, schakelaar */
  --lr-duur-mid: 280ms;    /* feedbackpaneel, accordeon, onderblad, dialoog */
  --lr-duur-lijn: 600ms;   /* een lijn tekenen, zoomen in de rondleiding */
  --lr-duur-lang: 700ms;   /* zegel tekenen, voortgangsring vullen */
  --lr-uit: cubic-bezier(.2, .7, .2, 1);
  --lr-zoom: cubic-bezier(.45, 0, .2, 1);
}

/* ── 2 · Tokens, donker thema (systeem, tenzij licht gekozen; of donker gekozen) ───────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lr-wortel {
    --lr-navy: #dbe6f2;
    --lr-navy2: #c7d6e6;
    --lr-goud: #e2bf6e;
    --lr-goud-lijn: #d8b058;
    --lr-goud-tekst: #e2bf6e;
    --lr-goud-zacht: rgba(226, 191, 110, .16);
    --lr-koraal: #e28374;
    --lr-koraal-tekst: #e28374;
    --lr-koraal-vlak: #e28374;
    --lr-koraal-zacht: rgba(226, 131, 116, .14);
    --lr-groen: #6fbf93;
    --lr-grond: #10161e;
    --lr-papier: #161d27;
    --lr-creme: #1b2430;
    --lr-lijn: #2a3644;
    --lr-lijn-zacht: #222c38;
    --lr-lijn-sterk: #64748a;
    --lr-inkt: #e7edf4;
    --lr-gedempt: #a3adba;
    --lr-vaag: #77828f;
    --lr-focus: #e2bf6e;
    --lr-schaduw: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
    --lr-schaduw-dialoog: 0 12px 40px rgba(0, 0, 0, .5);
    --lr-op-navy2: #0e2237;
    --lr-op-goud: #0e2237;
    --lr-op-koraal-vlak: #10161e;
    --lr-navy-vlak: #1b2430;
    --lr-navy-vlak-rand: rgba(226, 191, 110, .40);
    --lr-op-navy-vlak: #f7f5f1;
    --lr-op-navy-vlak-gedempt: #b8c6d6;
    --lr-navy2-zacht: rgba(199, 214, 230, .08);
    --lr-goud-markeer: rgba(226, 191, 110, .30);
    --lr-schaduw-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 10px 26px rgba(0, 0, 0, .32);
    --lr-sluier: rgba(4, 8, 14, .60);
    --lr-grafiek-ema20: #7fb2ec;
    --lr-grafiek-ema50: #e9a54a;
    --lr-grafiek-overkocht: rgba(226, 131, 116, .17);
    --lr-grafiek-oververkocht: rgba(111, 191, 147, .16);
    --lr-fib-236: #e05f95;
    --lr-fib-382: #2f9e3f;
    --lr-fib-500: #3f8fe8;
    --lr-fib-618: #e0703f;
    --lr-fib-786: #9085e9;
    --lr-fib-1272: #c98500;
    --lr-fib-1618: #199e70;
    --lr-fib-2618: #9a7ee0;
    --lr-fib-zone: rgba(224, 112, 63, .13);
  }
}
:root[data-theme="dark"] .lr-wortel {
  --lr-navy: #dbe6f2;
  --lr-navy2: #c7d6e6;
  --lr-goud: #e2bf6e;
  --lr-goud-lijn: #d8b058;
  --lr-goud-tekst: #e2bf6e;
  --lr-goud-zacht: rgba(226, 191, 110, .16);
  --lr-koraal: #e28374;
  --lr-koraal-tekst: #e28374;
  --lr-koraal-vlak: #e28374;
  --lr-koraal-zacht: rgba(226, 131, 116, .14);
  --lr-groen: #6fbf93;
  --lr-grond: #10161e;
  --lr-papier: #161d27;
  --lr-creme: #1b2430;
  --lr-lijn: #2a3644;
  --lr-lijn-zacht: #222c38;
  --lr-lijn-sterk: #64748a;
  --lr-inkt: #e7edf4;
  --lr-gedempt: #a3adba;
  --lr-vaag: #77828f;
  --lr-focus: #e2bf6e;
  --lr-schaduw: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
  --lr-schaduw-dialoog: 0 12px 40px rgba(0, 0, 0, .5);
  --lr-op-navy2: #0e2237;
  --lr-op-goud: #0e2237;
  --lr-op-koraal-vlak: #10161e;
  --lr-navy-vlak: #1b2430;
  --lr-navy-vlak-rand: rgba(226, 191, 110, .40);
  --lr-op-navy-vlak: #f7f5f1;
  --lr-op-navy-vlak-gedempt: #b8c6d6;
  --lr-navy2-zacht: rgba(199, 214, 230, .08);
  --lr-goud-markeer: rgba(226, 191, 110, .30);
  --lr-schaduw-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 10px 26px rgba(0, 0, 0, .32);
  --lr-sluier: rgba(4, 8, 14, .60);
  --lr-grafiek-ema20: #7fb2ec;
  --lr-grafiek-ema50: #e9a54a;
  --lr-grafiek-overkocht: rgba(226, 131, 116, .17);
  --lr-grafiek-oververkocht: rgba(111, 191, 147, .16);
  --lr-fib-236: #e05f95;
  --lr-fib-382: #2f9e3f;
  --lr-fib-500: #3f8fe8;
  --lr-fib-618: #e0703f;
  --lr-fib-786: #9085e9;
  --lr-fib-1272: #c98500;
  --lr-fib-1618: #199e70;
  --lr-fib-2618: #9a7ee0;
  --lr-fib-zone: rgba(224, 112, 63, .13);
}

/* ── 3 · Tokens per breedte (§3.4: gsm onder 768 · tablet 768 tot 1199 · desktop vanaf 1200) */
@media (max-width: 1199px) {
  .lr-wortel { --lr-kantlijn: 24px; }
}
@media (max-width: 767px) {
  .lr-wortel {
    --lr-kantlijn: 16px;
    --lr-tussen-secties: 32px;
    --lr-tussen-kaarten: 16px;
    --lr-kaart-binnen: 16px;
    --lr-font-display: 400 30px/36px var(--lr-kop-letter);
    --lr-font-h1: 700 26px/32px var(--lr-kop-letter);
    --lr-font-h1-groot: 700 26px/32px var(--lr-kop-letter);
    --lr-font-h2: 700 20px/28px var(--lr-kop-letter);
    --lr-font-inleiding: italic 400 17px/26px var(--lr-kop-letter);
    --lr-font-kort: 400 17px/26px var(--lr-tekst-letter);
    --lr-font-koers: 400 22px/28px var(--lr-cijfer-letter);
    --lr-font-score: 400 44px/48px var(--lr-kop-letter);
  }
}

/* ── 4 · Beweging uit (§3.8): het toestel vraagt minder beweging, of het lid zette ze uit ──
   Alle duren worden (praktisch) 0: alles staat meteen in zijn eindtoestand, met precies dezelfde
   informatie. Bewust .01ms en niet 0s: dan vuren transitionend en animationend nog, zodat een
   onderdeel dat erop wacht niet blijft hangen. */
@media (prefers-reduced-motion: reduce) {
  .lr-wortel { --lr-duur-kort: .01ms; --lr-duur-mid: .01ms; --lr-duur-lijn: .01ms; --lr-duur-lang: .01ms; }
  .lr-wortel *, .lr-wortel *::before, .lr-wortel *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}
html[data-beweging="uit"] .lr-wortel { --lr-duur-kort: .01ms; --lr-duur-mid: .01ms; --lr-duur-lijn: .01ms; --lr-duur-lang: .01ms; }
html[data-beweging="uit"] .lr-wortel *, html[data-beweging="uit"] .lr-wortel *::before, html[data-beweging="uit"] .lr-wortel *::after {
  animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}

/* ── 5 · Overgang: de oude namen wijzen naar de nieuwe tokens ─────────────────────────────
   Zo blijft de huidige pagina werken terwijl de blokken van app.js naar onderdelen verhuizen.
   Gebruik ze niet in nieuw werk; ze verdwijnen zodra niets ze nog leest. Een var() hier wordt
   op .lr-wortel zelf opgelost, dus de aliassen volgen vanzelf het donkere thema. */
.lr-wortel {
  --navy: var(--lr-navy);
  --navy2: var(--lr-navy2);
  --goud: var(--lr-goud);
  --goud-d: var(--lr-goud-tekst);   /* was #b58f3a (3,0:1): te zwak voor tekst */
  --koraal: var(--lr-koraal);
  --groen: var(--lr-groen);
  --groen-bg: rgba(47, 107, 77, .08);
  --grond: var(--lr-grond);
  --papier: var(--lr-papier);
  --creme: var(--lr-creme);
  --lijn: var(--lr-lijn);
  --lijn-zacht: var(--lr-lijn-zacht);
  --inkt: var(--lr-inkt);
  --gedempt: var(--lr-gedempt);
  --vaag: var(--lr-vaag);
  --waarschuw: var(--lr-koraal-tekst);
  --waarschuw-bg: var(--lr-koraal-zacht);
  --schaduw: var(--lr-schaduw);
  --rond: var(--lr-rond-kaart);
  --kop-letter: var(--lr-kop-letter);
  --tekst-letter: var(--lr-tekst-letter);
  --cijfer-letter: var(--lr-cijfer-letter);
}

/* ── 6 · Basis ───────────────────────────────────────────────────────────────────────────
   Elementregels staan binnen :where(.lr-wortel): ze gelden alleen in de leeromgeving en
   hebben de lage specificiteit van een kale elementregel, zodat elke lr-klasse ze overschrijft. */
.lr-wortel {
  background: var(--lr-grond);
  color: var(--lr-inkt);
  font: var(--lr-font-tekst);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
}
body.lr-wortel { margin: 0; min-height: 100vh; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lr-wortel { color-scheme: dark; } }
:root[data-theme="dark"] .lr-wortel { color-scheme: dark; }
/* De schuifbalken van het venster volgen het thema alleen als html het weet. Aparte regels:
   kent een browser :has() niet, dan valt alleen deze regel weg en niet de regels hierboven. */
:root:has(> body.lr-wortel) { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):has(> body.lr-wortel) { color-scheme: dark; } }
:root[data-theme="dark"]:has(> body.lr-wortel) { color-scheme: dark; }

:where(.lr-wortel), :where(.lr-wortel) *, :where(.lr-wortel) *::before, :where(.lr-wortel) *::after { box-sizing: border-box; }
:where(.lr-wortel) a { color: var(--lr-goud-tekst); text-decoration-thickness: 1px; text-underline-offset: .18em; }
:where(.lr-wortel) a:hover { text-decoration-thickness: 2px; }
:where(.lr-wortel) :is(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.lr-wortel) :focus-visible { outline: 2px solid var(--lr-focus); outline-offset: 2px; }
:where(.lr-wortel) :is(h1, h2, h3, h4) { text-wrap: balance; }
:where(.lr-wortel) ::selection { background: var(--lr-goud-markeer); }
:where(.lr-wortel) [hidden] { display: none !important; }

/* Alleen voor schermlezers (bv. 'Laden…' bij een skelet) */
.lr-alleen-schermlezer {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Een scrollende strook chips (§3.4): snapt per chip en vervaagt aan de rand. De pagina zelf
   scrolt nooit horizontaal. De vervaging valt in de binnenmarge zolang er niets te scrollen is. */
.lr-strook {
  display: flex; gap: var(--lr-ruimte-2); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--lr-kantlijn); scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--lr-ruimte-3), #000 calc(100% - var(--lr-ruimte-5)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--lr-ruimte-3), #000 calc(100% - var(--lr-ruimte-5)), transparent 100%);
}
.lr-strook > * { flex: 0 0 auto; scroll-snap-align: start; }

/* Een lijn tekenen onder de CSP (§3.8): pathLength="1" als attribuut op het pad, deze klasse,
   en .is-aan zodra de lijn er moet staan. Geen style-attributen. */
.lr-teken { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--lr-duur-lijn) var(--lr-uit); }
.lr-teken.is-aan { stroke-dashoffset: 0; }

/* ── 7 · Typografie (§3.3) ──────────────────────────────────────────────────────────────
   `font` zet ook font-variant terug; daarom staat tabular-nums telkens ná de font-regel. */
.lr-display { font: var(--lr-font-display); color: var(--lr-navy); margin: 0; }
.lr-h1 { font: var(--lr-font-h1); color: var(--lr-navy); margin: 0; }
.lr-h1--groot { font: var(--lr-font-h1-groot); }
.lr-h2 { font: var(--lr-font-h2); color: var(--lr-navy); margin: 0; }
.lr-h3 { font: var(--lr-font-h3); color: var(--lr-inkt); margin: 0; }
.lr-inleiding { font: var(--lr-font-inleiding); color: var(--lr-gedempt); max-width: var(--lr-leeskolom); margin: 0; }
.lr-kort-zin { font: var(--lr-font-kort); margin: 0; }
.lr-leestekst { font: var(--lr-font-lees); max-width: var(--lr-leesbreedte); }
.lr-tekst { font: var(--lr-font-tekst); }
.lr-klein { font: var(--lr-font-klein); color: var(--lr-gedempt); }
.lr-mini-label { font: var(--lr-font-mini); letter-spacing: var(--lr-mini-spatie); text-transform: uppercase; color: var(--lr-gedempt); }
.lr-groot-cijfer { font: var(--lr-font-koers); font-variant-numeric: tabular-nums; }
.lr-score { font: var(--lr-font-score); font-variant-numeric: tabular-nums; }
.lr-tabelcijfer { font: var(--lr-font-tabelcijfer); font-variant-numeric: tabular-nums; }
.lr-cijfer { font-family: var(--lr-cijfer-letter); font-variant-numeric: tabular-nums; }
/* Cijfers die stijgen of dalen: groen of koraal-tekst. Zet er altijd een teken of pijl bij. */
.lr-stijg { color: var(--lr-groen); }
.lr-daal { color: var(--lr-koraal-tekst); }

/* Kleine hulpklassen die schermen en onderdelen delen */
.lr-gedempt { color: var(--lr-gedempt); }
.lr-leeg { color: var(--lr-gedempt); font-size: 14px; line-height: 22px; margin: 0; }
.lr-herkomst { font: var(--lr-font-klein); color: var(--lr-gedempt); margin: var(--lr-ruimte-3) 0 0; }
/* Een korte losse link ('uitleg' naast een naam): het tikvlak loopt boven en onder door tot
   minstens 44 hoog (§3.4), zonder dat de regel hoger wordt. Niet voor links in lopende tekst. */
.lr-tiklink { position: relative; }
.lr-tiklink::after { content: ""; position: absolute; inset: -15px -8px; }