/* ============================================================
   LEERKRACHTIG — gedeelde stijl
   ------------------------------------------------------------
   "Stil gereedschap voor een drukke dag."

   Eén werkboek voor de Nederlandse basisschool­leerkracht.
   De metafoor is een goed gemaakt schoolschrift uit 1962:
   papier, inkt, liniaallijntjes, paginanummers in de marge.
   Geen dashboard-tropes — geen gradients, geen drop-shadows
   die zwaaien om aandacht, geen gekleurde knop-pellets,
   geen emoji. Witregels als materiaal.

   Alles erft hieruit. Pas hier aan wanneer iets structureel
   moet veranderen — niet per pagina.
   ============================================================ */

/* ---------- 1. Google Fonts ---------- */
/* Newsreader = de stem; editoriaal, één gewicht, optical-size
   variabel zodat headlines elegant en bodytekst leesbaar blijft.
   JetBrains Mono = de marge; alleen voor cijfers, paginanummers,
   meta-labels (Mon · 08:30 · §3). Twee fonts. Niet meer.        */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- 2. Tokens ---------- */
:root {
  /* === Kleur — papier & inkt ============================== */

  /* De pagina zelf. Warm crème met een lichte gele schuif —
     net iets warmer dan ivoor, net iets koeler dan bot-wit.
     Bij digitaal zonlicht voelt het als ouderwets schriftpapier. */
  --lk-papier:        oklch(0.967 0.014 82);
  /* Eén tikje dieper — voor secties die "iets terugzakken" mogen
     in de pagina, zoals secties op het dashboard.                */
  --lk-papier-diep:   oklch(0.940 0.018 82);
  /* Een wit-wit voor de paar plekken waar echt vrije ruimte
     bedoeld is (formulier-invoer, mascotte-portret).             */
  --lk-papier-licht:  oklch(0.985 0.008 82);

  /* Inkt. Donker maar warm — naar een sepia-zwart toe; niemand
     schrijft met true-black behalve printers.                    */
  --lk-inkt:          oklch(0.220 0.014 65);
  /* Voor secundaire tekst, captions, meta. Genoeg contrast
     voor toegankelijkheid op crème (≥ 4.5:1).                    */
  --lk-inkt-zacht:    oklch(0.460 0.012 65);
  /* Voor labels, dates, marge-tekst. Doelbewust faded.           */
  --lk-inkt-vaag:     oklch(0.620 0.010 65);

  /* Liniaal. De haarlijntjes die alles op de pagina rust geven.
     Nooit dikker dan 1px; gebruikt voor scheidingen, kaders,
     onder-/bovenstroken.                                          */
  --lk-liniaal:       oklch(0.840 0.014 80);
  --lk-liniaal-zacht: oklch(0.900 0.012 82);
  --lk-liniaal-diep:  oklch(0.760 0.018 75); /* alleen voor accenten */

  /* === Kleur — accenten ================================== */

  /* Stempel — diep petrol-teal, rustige merkkleur. Vervangt de oude
     vermiljoen omdat rood een negatieve lading droeg (alarm, fout).
     Mag ALLEEN gebruikt waar het een stempel-moment is: één kop
     per pagina, één knop, één onderstreping. Misbruik = vulgariteit. */
  --lk-stempel:       oklch(0.480 0.105 200);
  --lk-stempel-diep:  oklch(0.380 0.110 205);
  --lk-stempel-vaag:  oklch(0.900 0.035 198); /* voor stempel-vlek achtergrond */

  /* Blos — een aparte warme peach voor mascotte-wangen en één
     enkel decoratief moment per pagina. Doel: zorgen dat het
     petrol-teal niet kil aanvoelt voor kinderen.                  */
  --lk-blush:         oklch(0.780 0.088 25);
  --lk-blush-zacht:   oklch(0.920 0.045 30);

  /* Top-bar achtergrond — mode-bewust. Op papier-modus warm crème
     met alpha voor frosted-effect; op avond-modus diep walnoot.    */
  --lk-top-bg:        oklch(0.967 0.014 82 / 0.72);
  --lk-top-bg-vol:    oklch(0.967 0.014 82 / 0.88);
  --lk-top-border:    oklch(0.84 0.014 80 / 0.85);

  /* Lint. Donker fles-blauw, alleen voor de secundaire accent
     (link-onderstreping, één detail). Zelden gebruikt.           */
  --lk-lint:          oklch(0.400 0.085 240);
  --lk-lint-vaag:     oklch(0.910 0.025 240);

  /* Status — gedempt, geen knaller-rood/groen */
  --lk-goed:          oklch(0.500 0.085 145); /* bos, niet wei */
  --lk-goed-vaag:     oklch(0.920 0.035 145);
  --lk-fout:          oklch(0.500 0.150 25);  /* baksteen, niet alarm */
  --lk-fout-vaag:     oklch(0.920 0.045 25);

  /* === Typografie ======================================== */

  /* Eén serif voor alles van betekenis. Newsreader is een
     editoriaal werkboek-font; het draagt zowel een lopende
     paragraaf als een 80-px display-kop.                          */
  --lk-font:         "Newsreader", "Iowan Old Style", Charter, Cambria, Georgia, serif;
  /* Eén mono voor de cijfers, paginanummers, meta-tekst.
     JetBrains Mono is uitgesproken karaktervol zonder kitsch.    */
  --lk-font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Schaal — modulair op 1.20 vanaf 16. Geen clamps op kleine
     teksten (consistent op alle devices); wel clamps op de
     drie display-niveaus die responsive moeten ademen.           */
  --lk-fs-xs:    12px;            /* paginanummers, marge-labels  */
  --lk-fs-sm:    14px;            /* meta, captions               */
  --lk-fs-base:  17px;            /* lopende tekst, knop-tekst    */
  --lk-fs-md:    19px;            /* leadtekst, grote knop        */
  --lk-fs-lg:    23px;            /* kop §                        */
  --lk-fs-xl:    clamp(27px, 2.6vw, 33px);  /* sectie-kop          */
  --lk-fs-2xl:   clamp(34px, 4.0vw, 52px);  /* pagina-titel        */
  --lk-fs-3xl:   clamp(44px, 6.5vw, 84px);  /* groot display       */
  --lk-fs-display: clamp(54px, 9vw, 124px); /* hero-display        */

  /* Klassikaal — voor digibord-modes; vult de viewport          */
  --lk-fs-board:    clamp(22px, 2.5vw, 44px);
  --lk-fs-board-lg: clamp(32px, 4.5vw, 80px);
  --lk-fs-board-xl: clamp(48px, 8vw, 144px);

  /* Lijnhoogtes — strakker dan moderne web-defaults. De pagina
     hoort licht en geordend te ademen, niet zacht en uitgerekt. */
  --lk-lh-tight:  1.08;
  --lk-lh-snug:   1.22;
  --lk-lh-base:   1.55;
  --lk-lh-loose:  1.75;

  /* Letter-spacing — meta in mono krijgt iets meer lucht; serif
     bij display krijgt iets minder lucht.                         */
  --lk-tracking-display: -0.02em;
  --lk-tracking-meta:    0.14em;

  /* === Maat & ritme ====================================== */

  /* 8-px raster — niet 4. We willen iets ruwere stappen, omdat
     "gewoon iets aanpassen met 4px" tot rommel leidt. Wie kleiner
     wil moet expliciet motiveren waarom.                         */
  --lk-s1: 4px;
  --lk-s2: 8px;
  --lk-s3: 16px;
  --lk-s4: 24px;
  --lk-s5: 32px;
  --lk-s6: 48px;
  --lk-s7: 64px;
  --lk-s8: 96px;
  --lk-s9: 144px;

  /* Hoeken — bijna haaks. Een schoolschrift heeft geen pillen.
     Maximum 4px op interactieve elementen.                       */
  --lk-corner:    0px;
  --lk-corner-sm: 2px;
  --lk-corner-md: 4px;
  /* Eén uitzondering: portret-cirkels voor mascotte/leerlingen  */
  --lk-corner-round: 999px;

  /* === Beweging ========================================== */

  /* Easings met gewicht — niet "ease-out" maar iets dat het
     gevoel van een pen op papier benadert: even haperen,
     dan zacht aanlanden.                                          */
  --lk-ease-pen:    cubic-bezier(0.22, 1, 0.36, 1);  /* pen aanland */
  --lk-ease-papier: cubic-bezier(0.32, 0, 0.18, 1);  /* papier-glij */

  --lk-tijd-snel:  140ms;
  --lk-tijd-mid:   240ms;
  --lk-tijd-traag: 520ms;

  /* === Layout ============================================ */

  /* De pagina-breedte van een Hollands schoolschrift, vertaald.
     Maximaal 72 ch leestekst, maximaal 1180 px pagina-kader.     */
  --lk-page-max:   1180px;
  --lk-text-max:   62ch;
  --lk-pad-page:   clamp(20px, 4vw, 64px);
  --lk-pad-page-y: clamp(28px, 5vw, 72px);

  /* Marge waarin paginanummers en mono-meta hangen.              */
  --lk-marge:      72px;
}

/* ============================================================
   3. Reset & basis
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Geen smooth-scroll — papier scrollt niet smooth. */
  scroll-behavior: auto;
}

body {
  font-family: var(--lk-font);
  font-size: var(--lk-fs-base);
  font-weight: 400;
  line-height: var(--lk-lh-base);
  color: var(--lk-inkt);
  background: var(--lk-papier);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "onum" 1, "ss01" 1;
  font-variant-numeric: oldstyle-nums;
  font-optical-sizing: auto;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 3 3;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 500;
  line-height: var(--lk-lh-snug);
  letter-spacing: var(--lk-tracking-display);
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "ss01" 1, "onum" 1;
  font-optical-sizing: auto;
  text-wrap: balance;
  hyphens: none;
  -webkit-hyphens: none;
}

/* Eigennamen, mono-meta, paginanummers en labels mogen nooit
   afgebroken worden — die houden hun woordvorm. */
.lk-logo, .lk-meta, .lk-etiket, .lk-nieuw, .lk-stempel-vlak,
.live-stip, [class*="mono"], [class*="-meta"], [class*="-mono"],
.lk-toc-row .pag, .lk-toc-row .nr {
  hyphens: none;
  -webkit-hyphens: none;
}
p, blockquote {
  text-wrap: pretty;
}

/* Tekst is normaal selecteerbaar; interactieve elementen niet. */
button, a, summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Inputs: tekst wel selecteerbaar; geen autozoom op iOS. */
input, textarea, select {
  -webkit-user-select: text;
  user-select: text;
  font-size: 16px;
  font-family: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 500;
  line-height: var(--lk-lh-snug);
  letter-spacing: var(--lk-tracking-display);
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1, "onum" 1;
}
p { margin: 0 0 var(--lk-s3); }
strong { font-weight: 600; }
em, i  { font-style: italic; }

a {
  color: inherit;
  text-decoration: none;
  /* Onderstreping met een haarlijntje, zoals een potloodstreek */
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: background-size var(--lk-tijd-mid) var(--lk-ease-pen);
}
a:hover {
  /* Bij hover groeit de streep een fractie dikker — als een tweede haal van de pen. */
  background-size: 100% 2px;
}
/* Voor links die geen streep mogen krijgen (logo, nav-items met eigen stijl) */
a.lk-bare { background-image: none; padding-bottom: 0; }
a.lk-bare:hover { background-image: none; }

button {
  font: inherit; color: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

::selection { background: var(--lk-stempel-vaag); color: var(--lk-stempel-diep); }

/* Focus — geen blauwe ring, maar de stempel-kleur als haarrand. */
:focus-visible {
  outline: 2px solid var(--lk-stempel);
  outline-offset: 3px;
  border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   View Transitions API — page-to-page morph via JS-trigger.
   We declareren GEEN @view-transition { navigation: auto; }
   omdat dat in sommige contexten pagina's blokkeert. In plaats
   daarvan vangen we klik-events en starten de transitie zelf.
   ============================================================ */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 380ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(root)  { animation-name: vt-uit; }
::view-transition-new(root)  { animation-name: vt-in; }
@keyframes vt-uit {
  to { opacity: 0; filter: blur(6px); transform: scale(0.985); }
}
@keyframes vt-in {
  from { opacity: 0; filter: blur(6px); transform: scale(1.015); }
}
.lk-logo .mark { view-transition-name: logo-mark; }
::view-transition-old(logo-mark),
::view-transition-new(logo-mark) {
  animation-duration: 380ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   Custom cursor — een kleine teal-stip met potlood-staart
   die de muis volgt met zachte vertraging.
   ============================================================ */
.lk-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  top: 0; left: 0;
  width: 18px; height: 18px;
  transform: translate(-50%, -50%);
  transition: width 280ms var(--lk-ease-pen),
              height 280ms var(--lk-ease-pen);
  display: none; /* aangezet door JS op pointer-devices */
}
.lk-cursor .punt {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: var(--lk-stempel);
  opacity: 0.85;
  transform: scale(0.5);
  transition: transform 240ms var(--lk-ease-pen),
              opacity 240ms var(--lk-ease-pen);
}
.lk-cursor .ring {
  position: absolute; inset: -6px;
  border-radius: 999px;
  border: 1px solid var(--lk-stempel);
  opacity: 0.45;
  transition: transform 320ms var(--lk-ease-pen),
              opacity 240ms var(--lk-ease-pen);
}
body.cursor-aan { cursor: none; }
body.cursor-aan a, body.cursor-aan button { cursor: none; }
body.cursor-aan .lk-cursor { display: block; }
/* States via JS: data-state="link" | "tekst" | "pluis" */
.lk-cursor[data-state="link"] .punt { transform: scale(1); }
.lk-cursor[data-state="link"] .ring { transform: scale(1.6); opacity: 0.7; }
.lk-cursor[data-state="pluis"] .punt { transform: scale(1.3); background: var(--lk-blush); }
.lk-cursor[data-state="pluis"] .ring { transform: scale(2); border-color: var(--lk-blush); opacity: 0.6; }
.lk-cursor[data-state="tekst"] { width: 2px; height: 22px; }
.lk-cursor[data-state="tekst"] .punt { border-radius: 1px; transform: scale(1); }
.lk-cursor[data-state="tekst"] .ring { display: none; }
@media (prefers-reduced-motion: reduce) {
  .lk-cursor { transition: none; }
  .lk-cursor .punt, .lk-cursor .ring { transition: none; }
}

/* ============================================================
   Intro-overlay — eerste 700ms na page-load.
   Pluis knippert één keer en het papier verschijnt.
   ============================================================ */
.lk-intro {
  position: fixed; inset: 0; z-index: 9998;
  background: var(--lk-papier);
  display: grid; place-items: center;
  pointer-events: none;
  animation: lk-intro-uit 700ms var(--lk-ease-pen) 200ms forwards;
}
.lk-intro .stip {
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--lk-stempel);
  animation: lk-intro-blink 700ms var(--lk-ease-pen) both;
}
@keyframes lk-intro-uit {
  to { opacity: 0; visibility: hidden; }
}
@keyframes lk-intro-blink {
  0%   { transform: scale(0); opacity: 0; }
  30%  { transform: scale(1); opacity: 1; }
  60%  { transform: scale(0.4); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lk-intro { display: none; }
}

/* ============================================================
   Sound-toggle in de voettekst
   ============================================================ */
.lk-mute {
  background: transparent;
  border: 1px solid var(--lk-liniaal);
  width: 28px; height: 28px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--lk-inkt-vaag);
  display: inline-grid; place-items: center;
  transition: border-color 240ms var(--lk-ease-pen), color 240ms var(--lk-ease-pen);
}
.lk-mute:hover { border-color: var(--lk-stempel); color: var(--lk-stempel); }
.lk-mute[aria-pressed="true"] { color: var(--lk-stempel); border-color: var(--lk-stempel); }

/* ============================================================
   Paper-grain canvas onder alles (subtle texture)
   ============================================================ */
.lk-grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  mix-blend-mode: multiply;
}
body > * { position: relative; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   4. Typografie-utilities
   ============================================================ */

/* Italic met meer optical-size — voor display-koppen die
   leunen alsof er met de hand iets is opgeschreven. */
.lk-italic {
  font-style: italic;
  font-variation-settings: "opsz" 60;
  letter-spacing: var(--lk-tracking-display);
}

/* Meta-tekst: mono, kapitaal, sperletter — voor "§ 3", "MAA 08:30",
   "PAG. 14 VAN 31". De rugletters van het schoolschrift. */
.lk-meta {
  font-family: var(--lk-font-mono);
  font-size: var(--lk-fs-xs);
  font-weight: 500;
  letter-spacing: var(--lk-tracking-meta);
  text-transform: uppercase;
  color: var(--lk-inkt-vaag);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* Een paragraaf met een ingespannen breedte (een echte leeskolom) */
.lk-prose { max-width: var(--lk-text-max); }
.lk-prose p { line-height: var(--lk-lh-loose); }
.lk-prose p + p { margin-top: var(--lk-s4); }

/* Kapitalen: traditionele initialen — eerste letter groot */
.lk-drop::first-letter {
  font-size: 3.6em;
  line-height: 0.85;
  float: left;
  padding: 0.08em 0.12em 0 0;
  font-style: italic;
  font-weight: 400;
  color: var(--lk-stempel);
}

/* ============================================================
   5. Pagina-kader (de "schrift-pagina")
   ============================================================ */

.lk-page {
  max-width: var(--lk-page-max);
  margin: 0 auto;
  padding: var(--lk-pad-page-y) var(--lk-pad-page);
  /* Marge links voor paginanummer-meta, op grote viewports.
     Op mobiel verdwijnt de marge en gaat de meta inline.        */
}

/* Een sectie: hairline-streep boven, mono-label links, content rechts. */
.lk-section {
  padding-top: var(--lk-s5);
  margin-top: var(--lk-s6);
  border-top: 1px solid var(--lk-liniaal);
  position: relative;
}
.lk-section > .lk-section-label {
  /* mono-label in de marge boven de streep */
  display: block;
  margin-bottom: var(--lk-s3);
}
.lk-section h2 {
  font-size: var(--lk-fs-xl);
  font-weight: 400;
  font-style: italic;
  letter-spacing: var(--lk-tracking-display);
}

/* Subtiele rule-line achtergrond, optioneel.
   Niet standaard aan — alleen waar "papier-textuur" gewenst is. */
.lk-ruled {
  --rule: oklch(0.84 0.014 80);
  background-image: linear-gradient(to bottom, transparent calc(2em - 1px), var(--rule) calc(2em - 1px), var(--rule) 2em, transparent 2em);
  background-size: 100% 2em;
  background-attachment: local;
}

/* ============================================================
   6. Knoppen
   ============================================================ */

/* Een knop is geen pellet. Het is een kort tekstblok met
   een liniaallijntje eronder, of een ingelijste rechthoek
   met haaks hoeken. Drie varianten — geen meer.               */

.lk-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--lk-s2);
  min-height: 48px;
  padding: 12px 20px;
  font-family: var(--lk-font);
  font-size: var(--lk-fs-base);
  font-weight: 500;
  line-height: 1;
  color: var(--lk-papier);
  background: var(--lk-inkt);
  border: 1px solid var(--lk-inkt);
  border-radius: var(--lk-corner-sm);
  cursor: pointer;
  transition: background var(--lk-tijd-mid) var(--lk-ease-pen),
              transform var(--lk-tijd-snel) var(--lk-ease-pen);
  /* geen schaduw */
}
.lk-btn:hover { background: oklch(from var(--lk-inkt) calc(l + 0.06) c h); }
.lk-btn:active { transform: translateY(1px); }

/* Ghost — voor secundaire actie. Alleen tekst + liniaalkader. */
.lk-btn-ghost {
  color: var(--lk-inkt);
  background: transparent;
  border: 1px solid var(--lk-inkt);
}
.lk-btn-ghost:hover { background: var(--lk-inkt); color: var(--lk-papier); }

/* Stempel — alleen voor het ene moment per pagina waar het mag.  */
.lk-btn-stempel,
a.lk-btn-stempel,
.lk-top-nav a.lk-btn-stempel {
  color: #fff;
  background: var(--lk-stempel);
  border-color: var(--lk-stempel);
}
.lk-btn-stempel:hover,
a.lk-btn-stempel:hover,
.lk-top-nav a.lk-btn-stempel:hover {
  background: var(--lk-stempel-diep);
  border-color: var(--lk-stempel-diep);
  color: #fff;
}

/* Tekst-link-knop — als een onderstreepte zin. Geen rechthoek. */
.lk-btn-tekst {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 0; min-height: 0; border: 0; background: 0;
  color: var(--lk-inkt);
  font-family: var(--lk-font);
  font-size: var(--lk-fs-base);
  font-weight: 500;
  font-style: italic;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size var(--lk-tijd-mid) var(--lk-ease-pen);
}
.lk-btn-tekst:hover { background-size: 100% 2px; }
.lk-btn-tekst::after { content: "→"; font-style: normal; transition: transform var(--lk-tijd-mid) var(--lk-ease-pen); }
.lk-btn-tekst:hover::after { transform: translateX(3px); }

/* Maat-modificaties */
.lk-btn-lg { min-height: 56px; padding: 16px 26px; font-size: var(--lk-fs-md); }
.lk-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ============================================================
   7. Inhoudsopgave-rij (de hoofdcomponent van het dashboard)
   ============================================================ */

/* Een tool, een les, een kroniek-week verschijnt als een
   regel in een inhoudsopgave: nummer / titel / leader-dots /
   pagina-cijfer. Geen kaart. Geen schaduw.                    */

.lk-toc {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--lk-liniaal);
}
.lk-toc-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: baseline;
  gap: var(--lk-s3);
  padding: var(--lk-s3) 0;
  border-bottom: 1px solid var(--lk-liniaal-zacht);
  text-decoration: none;
  color: var(--lk-inkt);
  background-image: none;
  position: relative;
  transition: background var(--lk-tijd-mid) var(--lk-ease-pen);
}
.lk-toc-row:hover {
  background: oklch(from var(--lk-papier) calc(l - 0.015) c h);
}
.lk-toc-row .nr {
  font-family: var(--lk-font-mono);
  font-size: var(--lk-fs-xs);
  color: var(--lk-inkt-vaag);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  padding-top: 2px;
}
.lk-toc-row .titel {
  display: flex;
  align-items: baseline;
  gap: var(--lk-s3);
  flex-wrap: wrap;
  font-size: var(--lk-fs-md);
  font-weight: 400;
}
.lk-toc-row .titel .naam { color: var(--lk-inkt); }
.lk-toc-row .titel .ondertitel {
  color: var(--lk-inkt-zacht);
  font-style: italic;
  font-size: var(--lk-fs-base);
}
.lk-toc-row .pag {
  font-family: var(--lk-font-mono);
  font-size: var(--lk-fs-xs);
  color: var(--lk-inkt-vaag);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  padding-top: 4px;
  white-space: nowrap;
}
.lk-toc-row[data-nieuw="true"] .nr::after {
  content: "•";
  color: var(--lk-stempel);
  margin-left: 4px;
}
@media (max-width: 540px) {
  .lk-toc-row { grid-template-columns: 36px 1fr auto; gap: var(--lk-s2); }
  .lk-toc-row .titel { font-size: var(--lk-fs-base); }
}

/* ============================================================
   8. App-bar / pagina-hoofd
   ============================================================ */

/* Bovenaan elke pagina: links de naam (logo + tekst),
   rechts twee tot drie liens, alles gescheiden door één
   haarlijntje onder. Geen sticky-blur, geen drop-shadow.
   Wanneer je naar onder scrollt verdwijnt de hoofd eenvoudig
   uit zicht — zoals een echte pagina.                        */

.lk-top {
  border-bottom: 1px solid var(--lk-liniaal);
  background: var(--lk-papier);
}
.lk-top-inner {
  max-width: var(--lk-page-max);
  margin: 0 auto;
  padding: var(--lk-s3) var(--lk-pad-page);
  display: flex; align-items: baseline; gap: var(--lk-s4);
}
.lk-top a { background-image: none; padding-bottom: 0; }

/* Logo: woordmerk gezet als titel van een schoolschrift. */
.lk-logo {
  display: inline-flex; align-items: baseline; gap: 10px;
  text-decoration: none; color: var(--lk-inkt);
  background-image: none; padding-bottom: 0;
  font-family: var(--lk-font);
  font-weight: 500;
  font-size: var(--lk-fs-lg);
  letter-spacing: -0.01em;
}
.lk-logo .mark {
  /* mascotte-stempel-glyph; klein vierkant met letter erin */
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  background: var(--lk-stempel);
  color: var(--lk-papier);
  font-family: var(--lk-font);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  border-radius: var(--lk-corner-sm);
  transform: translateY(2px) rotate(-2deg);
  transition: transform var(--lk-tijd-mid) var(--lk-ease-pen);
}
.lk-logo:hover .mark { transform: translateY(2px) rotate(-5deg); }
.lk-logo em { font-style: italic; color: var(--lk-inkt-zacht); }

.lk-top-nav {
  margin-left: auto;
  display: flex; align-items: baseline; gap: var(--lk-s4);
  font-size: var(--lk-fs-sm);
  color: var(--lk-inkt-zacht);
}
.lk-top-nav a {
  color: inherit;
  background-image: none; padding-bottom: 0;
}
.lk-top-nav a:hover { color: var(--lk-inkt); }
@media (max-width: 640px) {
  .lk-top-nav { gap: var(--lk-s3); font-size: var(--lk-fs-xs); }
}

/* ============================================================
   9. Voettekst
   ============================================================ */

.lk-foot {
  border-top: 1px solid var(--lk-liniaal);
  margin-top: var(--lk-s8);
}
.lk-foot-inner {
  max-width: var(--lk-page-max);
  margin: 0 auto;
  padding: var(--lk-s5) var(--lk-pad-page);
  display: flex; gap: var(--lk-s4);
  flex-wrap: wrap; justify-content: space-between;
  align-items: baseline;
  font-size: var(--lk-fs-sm);
  color: var(--lk-inkt-zacht);
}
.lk-foot-inner a { color: inherit; background-image: none; padding-bottom: 0; }
.lk-foot-inner a:hover { color: var(--lk-inkt); }

/* ============================================================
   10. Etiketten, stempels, kleine markers
   ============================================================ */

/* Een klein etiket; geen pellet. */
.lk-etiket {
  display: inline-block;
  font-family: var(--lk-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lk-inkt-vaag);
  padding: 4px 0;
  border-top: 1px solid var(--lk-liniaal);
  border-bottom: 1px solid var(--lk-liniaal);
}

/* "Nieuw" merk — een kleine vermiljoen-bolletje + label */
.lk-nieuw {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--lk-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lk-stempel-diep);
}
.lk-nieuw::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px;
  background: var(--lk-stempel);
  border-radius: 999px;
}

/* Een papier-stempel: roterende rechthoekige vlek met tekst.
   Voor "30 DAGEN GRATIS" of "DEMO".                        */
.lk-stempel-vlak {
  display: inline-block;
  font-family: var(--lk-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lk-stempel-diep);
  padding: 6px 10px;
  border: 1.5px solid var(--lk-stempel);
  transform: rotate(-3deg);
  background: var(--lk-stempel-vaag);
}

/* ============================================================
   11. Print
   ============================================================ */
@media print {
  body { background: white; color: black; }
  .lk-top, .lk-foot, .no-print { display: none !important; }
  a { background-image: none !important; padding-bottom: 0 !important; }
  /* Paginanummers + headers worden door @page-regels van een
     specifieke pagina afgehandeld (Klassenkroniek boekje).    */
}

/* ============================================================
   12. Dark mode — avond-versie
   ------------------------------------------------------------
   Geen kleur-omwissel maar een avond-interpretatie. Papier
   wordt diep walnoot, inkt wordt oud-papier-licht. Stempel
   blijft petrol-teal maar wordt iets helderder voor contrast.
   ============================================================ */
:root[data-mode="avond"],
body[data-mode="avond"] {
  --lk-papier:        oklch(0.20 0.024 60);
  --lk-papier-diep:   oklch(0.16 0.024 60);
  --lk-papier-licht:  oklch(0.26 0.022 60);

  --lk-inkt:          oklch(0.94 0.014 80);
  --lk-inkt-zacht:    oklch(0.78 0.014 80);
  --lk-inkt-vaag:     oklch(0.62 0.014 80);

  --lk-liniaal:       oklch(0.35 0.020 60);
  --lk-liniaal-zacht: oklch(0.28 0.020 60);
  --lk-liniaal-diep:  oklch(0.45 0.022 60);

  --lk-stempel:       oklch(0.66 0.115 200);
  --lk-stempel-diep:  oklch(0.78 0.105 195);
  --lk-stempel-vaag:  oklch(0.30 0.055 198);

  --lk-blush:         oklch(0.72 0.080 30);

  --lk-top-bg:        oklch(0.20 0.024 60 / 0.78);
  --lk-top-bg-vol:    oklch(0.20 0.024 60 / 0.92);
  --lk-top-border:    oklch(0.35 0.020 60 / 0.85);
}

/* Geen automatische prefers-color-scheme switch.
   Papier (licht) is de absolute default. Avond-modus
   wordt alleen actief wanneer de gebruiker daar bewust
   voor kiest via de toggle (zet data-mode="avond"). */

/* ============================================================
   13. Mode-toggle (papier · avond) in de top-bar
   ------------------------------------------------------------
   Twee tekst-knoppen in mono, gescheiden door een midden-punt.
   De actieve modus heeft een stempel-onderstreping.
   ============================================================ */
.lk-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 var(--lk-s4, 24px);
  font-family: var(--lk-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lk-inkt-vaag);
  white-space: nowrap;
}
.lk-mode-toggle > span { padding: 0 2px; opacity: 0.5; }
.lk-mode-toggle button {
  background: transparent;
  border: none;
  padding: 6px 4px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--lk-inkt-vaag);
  cursor: pointer;
  position: relative;
  transition: color 140ms var(--lk-ease-pen, ease-out);
}
.lk-mode-toggle button:hover { color: var(--lk-inkt); }
.lk-mode-toggle button:focus-visible {
  color: var(--lk-inkt);
  outline: 1px dashed var(--lk-inkt-vaag);
  outline-offset: 2px;
}
.lk-mode-toggle button.aan {
  color: var(--lk-inkt);
}
.lk-mode-toggle button.aan::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px;
  bottom: 1px;
  height: 1.5px;
  background: var(--lk-stempel);
}
@media (max-width: 720px) {
  .lk-mode-toggle { margin: 0 var(--lk-s2, 8px); font-size: 10px; letter-spacing: 0.14em; }
}
@media (prefers-reduced-motion: reduce) {
  .lk-mode-toggle button { transition: none; }
}

/* Zwevende variant — voor tools zonder .lk-top */
.lk-mode-toggle-zwevend {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 100;
  margin: 0;
  padding: 6px 10px;
  background: var(--lk-papier-licht);
  border: 1px solid var(--lk-liniaal);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
@media print {
  .lk-mode-toggle-zwevend { display: none; }
}