/* reader-view.css — DE GEDEELDE LEESWEERGAVE.
 *
 * Eén bron van waarheid voor het uiterlijk van de reader op BEIDE plekken:
 *   - de student-reader  (student-frontend/js/shell.js :renderReader, plain-JS)
 *   - de admin-preview   ("Bekijk als student", cockpit ReaderPreview.jsx)
 * Beide frontends produceren dezelfde HTML-structuur met dezelfde `reader-*`-
 * klassen en laden DIT bestand. Een opmaak-/layout-wijziging hier landt dus
 * automatisch op allebei — geen dubbel onderhoud, geen drift.
 *
 * Serveren:
 *   - student: <link href="/shared/reader-view.css"> (StaticFiles-mount /shared)
 *   - cockpit: `import` in ReaderPreview.jsx → Vite bundelt het in de build.
 *
 * SCOPE: alles hangt onder `.reader-view` zodat niets naar de omringende app
 * lekt (de cockpit heeft z'n eigen Tailwind-reset, de student z'n eigen skin).
 * Kleuren zijn hier VAST (het neutrale ink/brand-palet = de gewenste preview-
 * look), niet de tenant-skin — zo zien student en preview er identiek uit.
 * Enige uitzondering: donkermodus — nu een PER-READER leescomfort-keuze
 * (data-theme op het .reader-view-element, gezet door shared-ui/reader-prefs.js)
 * zodat de toggle ook in de cockpit-preview werkt zonder de rest van de app te
 * raken. De oude body[data-theme="dark"]-scope blijft als vangnet bestaan.
 */

/* Toegankelijkheidsfonts — LOKAAL meegeleverd (geen externe CDN). Relatieve url()
   t.o.v. dit bestand: /shared/fonts/* voor de student, door Vite gebundeld voor de
   cockpit-preview. Alleen wanneer de lezer ze kiest laadt de browser ze (swap). */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/atkinson-hyperlegible-400.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/atkinson-hyperlegible-700.woff2") format("woff2");
}
@font-face {
  font-family: "OpenDyslexic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/opendyslexic-400.woff2") format("woff2");
}
@font-face {
  font-family: "OpenDyslexic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/opendyslexic-700.woff2") format("woff2");
}
/* Carlito — gratis, metrisch-identieke Calibri-vervanger (mag herdistribueren;
   echt Calibri niet). Lokaal meegeleverd, net als Atkinson/OpenDyslexic. */
@font-face {
  font-family: "Carlito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/carlito-400.woff2") format("woff2");
}
@font-face {
  font-family: "Carlito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/carlito-700.woff2") format("woff2");
}

.reader-view {
  /* Palet — ink/brand-tokens uit shared-ui/tailwind-tokens.cjs, als literals. */
  --rv-text: #1e293b;            /* ink-800  — lopende tekst            */
  --rv-heading: #0f172a;         /* ink-900  — koppen                   */
  --rv-muted: #64748b;           /* ink-500  — secundair                */
  --rv-faint: #94a3b8;           /* ink-400  — placeholders/ontbrekend  */
  --rv-border: #e2e8f0;          /* ink-200  — tabelranden, scheidingen */
  --rv-border-soft: #f1f5f9;     /* ink-100  — subtiele lijnen          */
  --rv-surface: #f8fafc;         /* ink-50   — TOC-paneel, th-vulling    */
  --rv-bg: #ffffff;              /* leescontent-achtergrond             */
  --rv-accent: #1450d4;          /* brand-600 — titels, actief          */
  --rv-accent-strong: #103fa6;   /* brand-700 — hover                   */
  --rv-accent-tint: rgba(20, 80, 212, 0.08);
  --rv-danger: #b91c1c;          /* status.blocked                      */

  /* Leescomfort-vars (gezet door reader-prefs.js; hier de defaults). Alleen de
     leescontent (.reader-single) consumeert ze — de chrome/TOC blijft ongemoeid. */
  --rv-content-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --rv-font-scale: 1;            /* relatief; geen vaste px/pt          */
  --rv-line-height: 1.6;

  color: var(--rv-text);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
}

/* Donkermodus — PER-READER keuze (localStorage), gescoped op het .reader-view-
   element (data-theme), zodat de toggle ook in de cockpit-preview werkt en de rest
   van de app licht laat. De dubbele klasse verhoogt de specificiteit zodat de
   per-reader keuze wint van een globaal body[data-theme]-thema aan studentkant.
   De body-scope blijft als vangnet voor markup zonder element-thema. */
body[data-theme="dark"] .reader-view,
.reader-view.reader-view[data-theme="dark"] {
  --rv-text: #e6edf3;
  --rv-heading: #f0f6fc;
  --rv-muted: #9da7b3;
  --rv-faint: #6e7681;
  --rv-border: #30363d;
  --rv-border-soft: #21262d;
  --rv-surface: #161b22;
  --rv-bg: #0d1117;
  --rv-accent: #6ea8ff;
  --rv-accent-strong: #8cbcff;
  --rv-accent-tint: rgba(110, 168, 255, 0.14);
}
/* Expliciet-licht wint van een globaal body-donker-thema (hogere specificiteit):
   een op licht gezette reader blijft licht, ook binnen een donkere student-shell. */
.reader-view.reader-view[data-theme="light"] {
  --rv-text: #1e293b;
  --rv-heading: #0f172a;
  --rv-muted: #64748b;
  --rv-faint: #94a3b8;
  --rv-border: #e2e8f0;
  --rv-border-soft: #f1f5f9;
  --rv-surface: #f8fafc;
  --rv-bg: #ffffff;
  --rv-accent: #1450d4;
  --rv-accent-strong: #103fa6;
  --rv-accent-tint: rgba(20, 80, 212, 0.08);
}

/* --- Full-screen leesschil + topbalk (GEDEELD: student-frame ÉN admin-preview) ---
   Beide weergaven zetten dezelfde schil: een vaste-hoogte frame met een topbalk
   (boektitel links, leescomfort-controls + Donker, Sluiten rechts) en daaronder één
   scroll-vlak (.reader-view--embedded). De topbalk deelt de achtergrond/rand van het
   TOC-paneel zodat balk + TOC + content als ÉÉN geheel ogen. De balk staat BUITEN de
   .reader-view-var-scope, dus kleuren als LICHTE literals (= het ink-palet, gelijk aan
   --rv-surface/--rv-border light). De donkermodus raakt alleen het lees-scrollvlak
   (data-theme op .reader-view); de balk blijft neutraal — identiek in student + preview. */
.reader-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000; /* over de webshop-chrome (header/nav/footer + drijvende knoppen) */
  display: flex;
  flex-direction: column;
  background: #ffffff;
}
.reader-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  padding: 0.7rem 1.25rem;
  background: #f8fafc; /* --rv-surface (licht) — zelfde als het TOC-paneel */
  border-bottom: 1px solid #e2e8f0; /* --rv-border */
  flex: 0 0 auto;
}
/* Linkerzijde: (optionele preview-badge +) boektitel. Als flex-child mag hij krimpen
   zodat de titel nette ellipsis krijgt i.p.v. de controls weg te duwen. */
.reader-topbar-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
/* Hamburger — opent de TOC-drawer op smal scherm. Alleen zichtbaar <820px (op breed scherm
   staat de TOC vast links; geen hamburger). Staat in de balk buiten de .reader-view-scope,
   dus kleuren als literals net als de andere balk-knoppen. */
.reader-topbar .reader-toc-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid #cbd5e1; /* ink-300 */
  background: #ffffff;
  color: #334155; /* ink-700 */
  border-radius: 8px;
  padding: 0.34rem 0.62rem;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
}
.reader-topbar .reader-toc-hamburger:hover {
  background: #eef2f7; /* ink-100-ish */
}
@media (max-width: 819px) {
  .reader-topbar .reader-toc-hamburger {
    display: inline-flex;
  }
}
.reader-topbar-title {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a; /* ink-900 */
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}
/* Preview-badge (admin-only "Voorbeeld — student-weergave"); studentkant heeft 'm niet. */
.reader-topbar-badge {
  flex: 0 0 auto;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #1450d4; /* brand-600 */
  background: rgba(20, 80, 212, 0.1);
  white-space: nowrap;
}
/* Badge-tekst: volledige tekst op breed scherm, kort ("Voorbeeld") op smal scherm zodat de
   balk niet opblaast en op één regel blijft (zie het 820px-blok verderop). */
.reader-topbar-badge .reader-badge-short {
  display: none;
}
/* Rechterzijde: leescomfort-controls (+ Donker) en Sluiten, verticaal gecentreerd. */
.reader-topbar-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
}
/* Controls-groep: losse selects + Donker-toggle. Geen eigen kader/marge (de balk levert
   de achtergrond); nette gap + uitlijning zodat het niet gedrongen/plat oogt. */
.reader-topbar .reader-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.reader-topbar .reader-set {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: #64748b; /* ink-500 */
}
.reader-topbar .reader-set select {
  font-size: 0.85rem;
  color: #1e293b; /* ink-800 */
  background: #ffffff;
  border: 1px solid #cbd5e1; /* ink-300 — iets steviger dan de balkrand */
  border-radius: 7px;
  padding: 0.32rem 0.5rem;
  cursor: pointer;
}
.reader-topbar .reader-theme-toggle,
.reader-close {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0;
  border: 1px solid #cbd5e1; /* ink-300 */
  background: #ffffff;
  color: #334155; /* ink-700 */
  border-radius: 8px;
  padding: 0.34rem 0.75rem;
  cursor: pointer;
  font-size: 0.85rem;
  white-space: nowrap;
}
.reader-topbar .reader-theme-toggle:hover,
.reader-close:hover {
  background: #eef2f7; /* ink-100-ish */
}

/* Tandwiel-knop — opent op smal scherm het instellingen-paneel (lettertype/grootte/
   afstand). Alleen zichtbaar <820px; op breed scherm staan de dropdowns gewoon inline
   in de balk (geen tandwiel). Zelfde look als de andere balk-knoppen (literals, want
   buiten de .reader-view-scope). */
.reader-topbar .reader-settings-gear {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid #cbd5e1; /* ink-300 */
  background: #ffffff;
  color: #334155; /* ink-700 */
  border-radius: 8px;
  padding: 0.34rem 0.62rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.reader-topbar .reader-settings-gear:hover {
  background: #eef2f7; /* ink-100-ish */
}
/* Veld-label per instelling: op breed scherm verborgen (de dropdown toont zelf zijn
   titel-optie als kop); op smal scherm zichtbaar boven de select in het paneel. */
.reader-topbar .reader-set-label {
  display: none;
}
/* Sluit-kruisje in het instellingen-paneel: alleen op smal scherm (in het paneel);
   op breed scherm bestaat het paneel niet, dus verborgen. */
.reader-topbar .reader-settings-close {
  display: none;
}

/* --- Smal scherm (<820px): compacte controls + tandwiel-paneel -----------------
   Op smal scherm nemen de drie inline-dropdowns te veel ruimte terwijl je ze zelden
   gebruikt. Ze verdwijnen uit de balk en komen in een klein paneel onder een tandwiel-
   knop; de donker-toggle en Sluiten worden icoon-knoppen. Volgorde rechts: tandwiel →
   zon/maan → kruisje. Op breed scherm (≥820px) geldt niets hiervan — de volledige
   dropdowns blijven in de balk. Gedeeld: student-reader én admin-preview. */
@media (max-width: 819px) {
  /* Balk op ÉÉN regel houden: de iconen rechts mogen niet naar een tweede regel wrappen
     (dan opende het paneel los van het tandwiel). Links (hamburger + titel/badge) krimpt
     en kapt de titel af; de icoon-groep rechts blijft vast. */
  .reader-topbar {
    position: relative; /* anker voor het instellingen-paneel — wrap-bestendig */
    flex-wrap: nowrap;
    gap: 0.5rem 0.6rem;
  }
  .reader-topbar-left {
    flex: 1 1 auto;
    min-width: 0;
  }
  .reader-topbar-tools {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 0.4rem;
  }
  /* Preview-badge compact: kort label i.p.v. de volledige tekst (scheelt breedte). */
  .reader-topbar-badge .reader-badge-full {
    display: none;
  }
  .reader-topbar-badge .reader-badge-short {
    display: inline;
  }
  .reader-topbar .reader-settings-gear {
    display: inline-flex;
  }
  /* De drie dropdowns: verborgen tot het tandwiel ze opent; dan een paneel dat rechts onder
     de HELE balk hangt (anker = .reader-topbar), zodat het altijd correct opent — ook als de
     balk toch zou wrappen (het paneel gaat niet uit van de tandwiel-plek in de flow). De
     instellingen staan ONDER ELKAAR (label boven elke select). */
  .reader-topbar .reader-settings {
    display: none;
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 1.25rem; /* gelijk aan de horizontale balk-padding → rechts onder de iconen */
    z-index: 1102; /* boven de leescontent en de drawer-chrome */
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    min-width: 14rem;
    margin: 0;
    padding: 0.85rem;
    background: #ffffff;
    border: 1px solid #e2e8f0; /* --rv-border (licht) */
    border-radius: 10px;
    box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.18);
  }
  .reader-topbar .reader-settings.open {
    display: flex;
  }
  /* Sluit-kruisje rechtsboven in het paneel, op de hoogte van het eerste label. Absoluut
     t.o.v. het (gepositioneerde) paneel zodat het niet in de flow tussen de velden valt. */
  .reader-topbar .reader-settings-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 1px solid #cbd5e1; /* ink-300 */
    background: #ffffff;
    color: #334155; /* ink-700 */
    border-radius: 7px;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
  }
  .reader-topbar .reader-settings-close:hover {
    background: #eef2f7; /* ink-100-ish */
  }
  .reader-topbar .reader-set {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.28rem;
  }
  .reader-topbar .reader-set-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b; /* ink-500 */
  }
  .reader-topbar .reader-set select {
    width: 100%;
  }
  /* Donker-toggle en Sluiten: alleen het icoon (zon/maan resp. kruisje). */
  .reader-topbar .reader-theme-toggle,
  .reader-close {
    padding: 0.34rem 0.55rem;
  }
  .reader-topbar .reader-tt-label,
  .reader-close-label {
    display: none;
  }
  .reader-topbar .reader-tt-icon,
  .reader-close-icon {
    font-size: 1rem;
    line-height: 1;
  }
}

/* Pane-wrapper (student-full-screen): vaste box die het scroll-vlak (.reader-view--
   embedded) bevat, als positie-anker voor de watermerk-overlay. Geeft de flex-hoogte
   1-op-1 door aan het scroll-vlak erin, zodat de layout ongewijzigd blijft; de overlay
   dekt de ZICHTBARE pane en scrollt/groeit niet mee met de content. Geen z-index →
   vormt geen stacking-context, zodat de mobiele drawer/backdrop (1100/1101) boven de
   overlay blijven. */
.reader-pane {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Watermerk-overlay: getegeld, diagonaal, screenshot-herleidbaar. De token-dragende
   background-image wordt vanuit JS gezet (paintWatermark); hier de statische laag.
   pointer-events:none → lezen/selecteren/TOC-klikken eronder gaan volledig door.
   z-index 4: boven de leescontent, ONDER de mobiele controls/drawer/backdrop (1100+).
   opacity + de tegelmaat (paintWatermark) zijn de tuneknoppen: subtiel genoeg om niet te
   storen bij uren lezen, nog net zichtbaar op een screenshot. */
.reader-pane .reader-watermark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background-repeat: repeat;
  opacity: 0.06;
}

/* Modifier voor een host die de leesweergave in een vaste-hoogte-container plaatst
   (de admin-preview-modal én de student-full-screen-frame): de hele weergave wordt
   één scroll-vlak, de TOC blijft sticky in beeld. */
.reader-view--embedded {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: var(--rv-bg);
  padding: 0 1.5rem 1.25rem;
  /* Persistente leesbuffer onder de sticky topbalk (bug-fix — de tekst-kolom liep achter
     de balk door). Een NIET-meescrollende border bovenaan het scroll-vlak, in de lees-
     achtergrond: de border zit búiten de padding-box, dus de leescontent wordt eronder
     GECLIPT (niet slechts afgedekt zoals een sticky-overlay) — er kan géén tekst tussen de
     balk en deze rand verschijnen, bij handmatig scrollen én bij anker-sprongen. Reference-
     vrij (geen gok-waarde): de rand hangt aan de scroll-vlak-bovenkant = de balk-onderkant.
     De TOC pint op dezelfde lijn (sticky top:0 = padding-box-top, onder de rand), zodat de
     tekst-bovenkant exact met de TOC-bovenkant lijnt (beide schuiven mee met de rand-hoogte).
     In leesachtergrond → ook correct in donkermodus. Gedeeld student + preview. */
  border-top: 2rem solid var(--rv-bg);
}

/* --- Tweekoloms-layout: TOC links, één hoofdstuk rechts ---------------------
   Op breed scherm sticky TOC + inhoud; op smal scherm is de TOC een inklapbare
   drawer (student) en de inhoud full-width. */
.reader-view .reader-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
  /* Anker voor het absoluut-gepositioneerde sleep-handvat (zie .reader-toc-resizer). */
  position: relative;
}
/* Slepen: geen tekstselectie in de leesweergave tijdens het verslepen. */
.reader-view .reader-layout.resizing {
  user-select: none;
}
@media (min-width: 820px) {
  .reader-view .reader-layout {
    /* Breedte via een CSS-var die de sleep-JS zet; geen waarde → default 18rem. */
    grid-template-columns: var(--reader-toc-width, 18rem) 1fr;
    /* Ruime horizontale tussenruimte zoals de oude preview (aside p-3 + sectie
       px-6): de leestekst mag niet tegen de TOC plakken. */
    column-gap: 2.5rem;
  }
}

/* Sleep-handvat voor de TOC-breedte. Twee delen:
   · .reader-toc-resizer-track — een onzichtbare, volle-hoogte baan in de kolom-gap
     op --reader-toc-width vanaf links (absoluut → géén extra grid-track). Vangt zélf
     geen clicks (pointer-events:none) en dient enkel als containing block voor het
     sticky handvat, zodat dat over de hele leeshoogte bovenin kan blijven plakken.
   · .reader-toc-resizer — het KLEINE greep-handvat (korte verticale streepjes),
     bovenaan en STICKY, zodat het bij scrollen bovenin bereikbaar blijft. Géén lange
     lijn meer. Dit is het element dat wireTocResize bedraadt.
   Alleen in de tweekoloms-layout (≥820px); in de drawer-layout verborgen. */
.reader-view .reader-toc-resizer-track {
  display: none;
}
@media (min-width: 820px) {
  .reader-view .reader-toc-resizer-track {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--reader-toc-width, 18rem);
    width: 2.5rem;
    pointer-events: none; /* alleen het handvat is grijpbaar */
    z-index: 5;
  }
  .reader-view .reader-toc-resizer {
    position: sticky;
    top: 0; /* lijnt met de sticky TOC (reader-toc top:0, onder de border-top-buffer) */
    margin: 0 auto; /* gecentreerd in de gap */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem; /* grijpzone iets ruimer dan het streepje */
    height: 1.9rem;
    pointer-events: auto;
    cursor: col-resize;
    touch-action: none; /* touch-slepen i.p.v. pagina-scroll */
    color: var(--rv-border); /* subtiel in rust; licht op bij hover/slepen */
    transition: color 0.12s ease;
  }
  /* Greep-icoon: drie korte verticale streepjes (⋮ zijwaarts). */
  .reader-view .reader-toc-resizer::before {
    content: "";
    width: 0.5rem;
    height: 1.1rem;
    background:
      linear-gradient(currentColor, currentColor) left / 2px 100% no-repeat,
      linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat,
      linear-gradient(currentColor, currentColor) right / 2px 100% no-repeat;
  }
  .reader-view .reader-toc-resizer:hover,
  .reader-view .reader-toc-resizer.dragging {
    color: var(--rv-accent);
  }
}

/* --- Inhoudsopgave (TOC-sidebar) ------------------------------------------- */
.reader-view .reader-toc {
  border: 1px solid var(--rv-border);
  border-radius: 10px;
  background: var(--rv-surface);
  padding: 0.75rem;
  max-height: calc(100vh - 8rem);
  overflow: auto;
  /* Geen browser-scroll-anchoring: bij het in-/uitklappen van een hoofdstuk (auto-collapse
     van het vorige) mag de browser de scrollTop niet zelf bijstellen — dat gaf een instant
     "schok" vlak vóór de 25%-reposition (schok-dan-slide). Wij sturen de scroll zelf. */
  overflow-anchor: none;
}
@media (min-width: 820px) {
  .reader-view .reader-toc {
    position: sticky;
    /* top:0 = pin op de padding-box-top van het scroll-vlak (onder de border-top-buffer),
       dezelfde lijn waar de leescontent wordt geclipt → TOC-bovenkant lijnt met tekst. */
    top: 0;
  }
}
/* --- Mobiele TOC-drawer (<820px) --------------------------------------------
   Op smal scherm verdwijnt de vaste TOC-kolom; de TOC opent als uitschuifpaneel via de
   hamburger in de topbalk (wireTocDrawer zet .open). Zelfde .reader-toc-element/inhoud —
   alleen als fixed overlay-drawer i.p.v. sticky kolom. De backdrop dimt de achtergrond en
   sluit bij tik; het kruisje bovenin sluit ook. De nav scrollt binnen de drawer. Op breed
   scherm (≥820px) is dit alles niet actief — de TOC staat gewoon links. */
@media (max-width: 819px) {
  .reader-view .reader-toc {
    display: none;
  }
  .reader-view .reader-toc.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(85vw, 22rem);
    max-height: none;
    margin: 0;
    border: 0;
    border-right: 1px solid var(--rv-border);
    border-radius: 0;
    z-index: 1101; /* boven de backdrop (1100) en de reader-frame-chrome */
    box-shadow: 0.4rem 0 1.5rem rgba(15, 23, 42, 0.25);
    overflow: hidden; /* de nav scrollt zelf; het kruisje blijft bovenin staan */
  }
  /* De boom scrollt binnen de drawer; het kruisje (flex 0) blijft bovenaan. */
  .reader-view .reader-toc.open > nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
  .reader-view .reader-toc.open .reader-toc-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--rv-border);
    background: var(--rv-surface);
    color: var(--rv-text);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
  }
}
/* Backdrop achter de drawer — alleen smal scherm én alleen wanneer geopend (niet [hidden]).
   Sluiten via een tik hierop (data-toc-close). Desktop/gesloten: nooit zichtbaar. */
.reader-view .reader-toc-backdrop {
  display: none;
}
@media (max-width: 819px) {
  .reader-view .reader-toc-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45); /* ink-900 @ 45% */
    z-index: 1100;
  }
}
/* Het kruisje bestaat in de markup ook op desktop, maar is daar verborgen (de vaste TOC
   heeft geen sluit-knop). */
.reader-view .reader-toc-drawer-close {
  display: none;
}
/* (De boektitel-regel bovenaan de TOC is verwijderd — die stond dubbel met de
   topbalk. .reader-toc-head wordt niet meer gerenderd; geen stijl nodig.) */
.reader-view .reader-toc nav ul,
.reader-view .reader-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Inspringing per niveau: padding op elke geneste children-container, cumulatief.
   Elk dieper niveau komt bovenop de inspringing van zijn ouder, dus de nesting
   loopt vanzelf trapsgewijs op tot elke diepte (4 → 4.1 → 4.1.1 → …). Geen vaste
   klasse per niveau, geen verticale lijn.
   Let op de selector-specificiteit: de reset `.reader-toc nav ul` hierboven is
   (0,2,2); `ul.reader-toc-children` maakt deze regel (0,3,2) zodat de inspringing
   niet door de reset naar 0 wordt platgedrukt (regressie sinds de TOC-boom-render). */
.reader-view .reader-toc nav ul.reader-toc-children {
  margin: 0;
  padding-left: 1.4rem;
}
.reader-view .reader-toc-children[hidden] {
  display: none;
}
/* Rij = vaste-breedte caret + link; verticaal gecentreerd → strakke uitlijning,
   ook als de ene rij wél en de andere geen uitvouw-pijl heeft. */
.reader-view .reader-toc-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.reader-view .reader-toc-list li + li,
.reader-view .reader-toc-children li {
  margin-top: 0.05rem;
}
/* Hoofdstuk-markering (optie 2): ruimte ROND een UITGEKLAPT hoofdstuk, zodat het
   open blok zich van zijn buren afscheidt. Ingeklapt blijft compact (de gelijke
   0.05rem-regelafstand hierboven) → geen "zwevende regels". Gekoppeld aan de open-
   staat: de eigen children-container is dan niet [hidden]. Geen bold (vet blijft
   voor de scroll-spy); inspringing/inklap-gedrag ongemoeid. */
.reader-view
  .reader-toc-list--l1
  > li.reader-toc-node:has(> .reader-toc-children:not([hidden])) {
  margin-top: 0.9rem;
  margin-bottom: 0.9rem;
}
.reader-view .reader-toc-caret {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--rv-faint);
  width: 1rem;
  flex: 0 0 1rem;
  padding: 0;
  font-size: 0.7rem;
  text-align: center;
  line-height: 1.2;
  transition: transform 0.12s ease;
}
.reader-view .reader-toc-caret.open {
  transform: rotate(90deg);
}
.reader-view .reader-toc-caret--empty {
  visibility: hidden;
}
/* Enkelregelige links (truncate met ellipsis) — de nette, strakke preview-look.
   Alleen kleur bij hover/actief; geen achtergrond-pil. */
.reader-view .reader-toc-link {
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--rv-text);
  padding: 0.125rem 0;
  font-size: 0.875rem;
  line-height: 1.4;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reader-view .reader-toc-link:hover {
  color: var(--rv-accent);
}
.reader-view .reader-toc-link.active {
  color: var(--rv-accent);
  font-weight: 600;
}

/* --- Leescontent ------------------------------------------------------------ */
.reader-view .reader-content {
  min-width: 0;
  /* Ruimte boven de leestekst zodat de eerste kop niet tegen de bovenrand plakt.
     Zit op de content, niet op .reader-layout → de resizer-baan/het sticky-handvat
     (op .reader-layout) worden niet weggedrukt en blijven bovenaan bereikbaar. */
  padding-top: 2rem;
}
.reader-view .reader-single {
  /* Begrensde, GECENTREERDE leeskolom (zoals de oude preview: max-w-3xl = 48rem
     met mx-auto) → ruimte links én rechts i.p.v. tekst die links plakt. */
  max-width: 48rem;
  margin-inline: auto;
  /* Leescomfort: font/grootte/regelafstand komen uit de per-reader-vars. De
     grootte schaalt RELATIEF (calc op rem) zodat de eigen zoom gerespecteerd
     blijft; koppen/lijsten/tabellen staan in em en schalen proportioneel mee. */
  font-family: var(--rv-content-font);
  font-size: calc(1rem * var(--rv-font-scale, 1));
  line-height: var(--rv-line-height, 1.6);
}
.reader-view .reader-chapter-title,
.reader-view .reader-single > h1 {
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1.25;
  color: var(--rv-accent);
  margin: 0 0 0.9rem;
}
.reader-view .reader-single h2,
.reader-view .reader-single h3,
.reader-view .reader-single h4,
.reader-view .reader-single h5,
.reader-view .reader-single h6 {
  font-weight: 600;
  color: var(--rv-heading);
  line-height: 1.3;
  margin: 1.4rem 0 0.55rem;
}
.reader-view .reader-single h2 {
  font-size: 1.35em;
}
.reader-view .reader-single h3 {
  font-size: 1.15em;
}
.reader-view .reader-single h4 {
  font-size: 1.02em;
}
.reader-view .reader-single p {
  margin: 0.65rem 0;
}
.reader-view .reader-single ul,
.reader-view .reader-single ol {
  margin: 0.65rem 0;
  /* Duidelijk inspringen zodat een lijst visueel onder zijn inleidende zin hangt;
     geneste lijsten springen cumulatief verder in (padding op elke <ul>/<ol>). */
  padding-left: 3.25rem;
}
.reader-view .reader-single ul {
  list-style: disc;
}
.reader-view .reader-single ol {
  list-style: decimal;
}
.reader-view .reader-single li {
  margin: 0.25rem 0;
}
.reader-view .reader-single a {
  color: var(--rv-accent);
  text-decoration: underline;
}
/* Voorbeeld-blok — de converter-spec markeert voorbeeld-alinea's met .reader-voorbeeld;
   hier alleen de opmaak. Licht ingesprongen, dun kader + lichte achtergrond, binnen-
   padding → valt als apart blok op. Via --rv-*-vars, dus ook correct in donkermodus. */
.reader-view .reader-single .reader-voorbeeld {
  /* Ingesprongen t.o.v. de lopende tekst zodat het als apart blok leest; blijft
     binnen de leeskolom. Dunne rand rondom + lichte achtergrond, geen zware
     accent-linkerrand. */
  margin: 1.1rem 0;
  margin-inline-start: 1.5rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--rv-border);
  border-radius: 8px;
  background: var(--rv-surface);
}
/* Binnenin geen dubbele buitenmarges (eerste/laatste alinea strak tegen de padding). */
.reader-view .reader-single .reader-voorbeeld > :first-child {
  margin-top: 0;
}
.reader-view .reader-single .reader-voorbeeld > :last-child {
  margin-bottom: 0;
}

/* Ingebedde afbeeldingen: responsief, nooit buiten de kolom. */
.reader-view .reader-single img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem 0;
}
.reader-view .reader-img-missing {
  color: var(--rv-faint);
  font-style: italic;
}

/* Getrouwe tabellen: basis-randen + leesbaarheid, brede tabellen scrollen zelf. */
.reader-view .reader-single table,
.reader-view .reader-single .reader-table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.2rem 0;
  display: block;
  overflow-x: auto;
}
.reader-view .reader-single th,
.reader-view .reader-single td {
  border: 1px solid var(--rv-border);
  padding: 0.4rem 0.6rem;
  text-align: left;
  vertical-align: top;
}
.reader-view .reader-single th {
  background: var(--rv-surface);
  font-weight: 600;
}
.reader-view .reader-single td p,
.reader-view .reader-single th p {
  margin: 0.2rem 0;
}
.reader-view .reader-single td p:only-child,
.reader-view .reader-single th p:only-child {
  margin: 0;
}

/* --- Vorige/volgende-navigatie --------------------------------------------- */
.reader-view .reader-prevnext {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  /* Binnen dezelfde leeskolom als .reader-single (48rem, gecentreerd), zodat de
     knoppen onder de tekst uitlijnen i.p.v. over de volle contentbreedte. */
  max-width: 48rem;
  margin: 2rem auto 1rem;
}
.reader-view .reader-pn {
  border: 1px solid var(--rv-border);
  background: var(--rv-surface);
  color: var(--rv-text);
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
}
.reader-view .reader-pn:hover {
  background: var(--rv-accent);
  border-color: var(--rv-accent);
  color: #fff;
}

/* --- "Verder waar je was gebleven"-banner ---------------------------------- */
.reader-view .reader-resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  background: var(--rv-surface);
  border: 1px solid var(--rv-border);
  border-left: 4px solid var(--rv-accent);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  margin-bottom: 1.2rem;
}
.reader-view .reader-resume-text {
  flex: 1 1 auto;
}
.reader-view .reader-resume-btn {
  flex: 0 0 auto;
}

/* --- Lege/fout-toestanden --------------------------------------------------- */
.reader-view .reader-soon {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--rv-muted);
}
.reader-view .reader-soon h2 {
  color: var(--rv-accent);
}
.reader-view .reader-error {
  color: var(--rv-danger);
}

/* De leescomfort-controls-balk (.reader-settings / .reader-set / .reader-theme-toggle)
   staat in de gedeelde topbalk (.reader-topbar) — student én preview — en wordt daar
   gestyled (zie "Full-screen leesschil + topbalk" bovenaan). Hier géén .reader-view-
   gescopede variant meer: die zou toch niet matchen (de balk staat buiten .reader-view)
   en zorgde voor de gedrongen/ongestylede look. */

/* --- Reader-hardening: printverdediging ------------------------------------- */
/* De BETROUWBARE printverdediging (de keydown-interceptie in reader-prefs.js is best-
   effort/cosmetisch). Bij printen valt de complete leesweergave — TOC én leescontent —
   weg; een korte notitie komt i.p.v. blanco papier. Drempel, geen slot: DevTools en
   screenshots blijven mogelijk (herleidbaarheid komt van het watermerk, los spec). */
@media print {
  .reader-view {
    display: none !important;
  }
  .reader-fullscreen::after {
    content: "Printen van deze leesweergave is niet toegestaan.";
    display: block;
    padding: 2rem;
    font-size: 1rem;
    color: #1e293b;
  }
}