/* Leeshulp op de lange stukken (website-v3, 26 oktober 2026).
   Idee 31: leesvoortgang als inhoudsopgave. Idee 20: bronnen in de kantlijn.
   Alleen geladen door edition-001/002/003.html en teardown-sample.html.
   Alles hangt aan html.rd, dat assets/v3-reading.js zet: zonder JavaScript
   verandert er niets aan de pagina. Niets hier verschuift de tekst zelf; de rail,
   de balk, de noten in de kantlijn en de streepjes staan buiten de stroom
   (fixed of absolute), zodat CLS op 0 blijft. Beweging alleen bij
   prefers-reduced-motion: no-preference. */

/* ---------- gedeeld: segment met vulling ---------- */
.rd-seg{position:relative;display:block;background:var(--rule);border-radius:2px;overflow:hidden}
.rd-seg i{position:absolute;inset:0;background:var(--accent);transform-origin:top;transform:scaleY(0)}
.rd-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- rail aan de rand (edities, vanaf 1180px) ----------
   De kolom van .article is 720px en staat in het midden; de rail staat links
   ervan, 36px los van de tekst. Hij verschijnt pas als "In this edition" uit
   beeld is, zodat de inhoudsopgave nooit twee keer tegelijk te zien is. */
.rd-rail{position:fixed;top:96px;right:calc(50% + 396px);width:min(200px,calc(50% - 416px));max-height:calc(100vh - 112px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;z-index:5;padding:0 2px 6px 0;opacity:0;visibility:hidden}
.rd-rail.is-on{opacity:1;visibility:visible}
.rd-rail .rd-ttl{font:600 13px/1.3 var(--sans);color:var(--brand);border-top:2px solid var(--rule-strong);padding-top:11px;margin:0 0 12px}
.rd-rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;min-height:min(calc(100vh - 250px),560px)}
.rd-rail li{display:flex;flex:0 1 auto;min-height:0}
.rd-rail a{display:grid;grid-template-columns:3px minmax(0,1fr);column-gap:12px;width:100%;text-decoration:none;color:var(--grey);font:400 12.5px/1.35 var(--sans);border-radius:2px}
.rd-rail .rd-t{padding:4px 0 7px;overflow-wrap:anywhere}
.rd-rail a:hover .rd-t{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.rd-rail a.is-done .rd-t{color:var(--soft)}
.rd-rail a[aria-current] .rd-t{color:var(--ink)}
.rd-rail a[aria-current] .rd-seg{background:rgba(168,60,25,.2)}
.rd-left{font:400 12px/1.4 var(--sans);color:var(--grey);font-variant-numeric:tabular-nums;margin:12px 0 0}

/* ---------- compacte balk (telefoon en smal scherm) ----------
   Vast onder de kopbalk van 64px; toont de huidige sectie en opent de lijst. */
.rd-bar{position:fixed;top:64px;left:0;right:0;z-index:55;background:var(--bg);border-bottom:1px solid var(--rule);box-shadow:0 8px 14px -14px rgba(18,63,67,.55);opacity:0;visibility:hidden}
.rd-bar.is-on{opacity:1;visibility:visible}
.rd-bar-in{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,52px)}
.rd-bar button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;margin:0;padding:0;background:none;border:0;border-radius:0;font:500 13.5px/1.3 var(--sans);color:var(--ink);text-align:left;cursor:pointer}
.rd-bar .rd-name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-bar .rd-pct{flex:none;min-width:4.5ch;text-align:right;font-size:12px;font-weight:400;color:var(--grey);font-variant-numeric:tabular-nums}
.rd-bar .rd-chev{flex:none;color:var(--brand)}
.rd-bar button[aria-expanded="true"] .rd-chev{transform:rotate(180deg)}
.rd-line{height:2px;background:var(--rule)}
.rd-line i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.rd-bar ol{list-style:none;margin:0;padding:6px 0 12px;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);overflow-y:auto;overscroll-behavior:contain}
.rd-bar ol[hidden]{display:none}
.rd-bar ol a{display:block;padding:9px 0 9px 12px;border-left:3px solid transparent;font:400 14.5px/1.4 var(--sans);color:var(--soft);text-decoration:none}
.rd-bar ol a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.rd-bar ol a[aria-current]{color:var(--ink);font-weight:600;border-left-color:var(--accent)}
/* kop onder kopbalk en compacte balk bij een sprong */
html.rd-compact main [id]{scroll-margin-top:124px}

/* ---------- de bestaande inhoudsopgaven markeren mee ---------- */
.rd .article-toc li{position:relative}
.rd .article-toc a[aria-current]::before{content:"";position:absolute;left:-12px;top:.25em;bottom:.25em;width:3px;border-radius:2px;background:var(--accent)}
/* teardown-voorbeeld: de plakkende lijst wordt de rail */
.rd .sample-contents li{position:relative}
.rd .sample-contents .rd-seg{position:absolute;left:-32px;top:10px;bottom:10px;width:3px}
.rd .sample-contents a[aria-current]{color:var(--ink);text-decoration-color:var(--accent);text-decoration-thickness:2px}
.rd .sample-contents .rd-left{margin:8px 0 0;font-size:12px;font-weight:400;color:var(--grey)}
@media(max-width:760px){.rd .sample-contents .rd-seg,.rd .sample-contents .rd-left{display:none}}

/* ---------- bronnen in de kantlijn ---------- */
/* het gemarkeerde getal: een stippellijn, verder dezelfde tekst */
.rd .rd-ref{cursor:pointer;text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:rgba(168,60,25,.62);text-decoration-thickness:1.5px;text-underline-offset:4px;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.rd .rd-ref:hover{text-decoration-style:solid;background:rgba(168,60,25,.07)}
.rd .rd-ref[aria-expanded="true"]{text-decoration-style:solid;text-decoration-color:var(--accent);background:rgba(168,60,25,.12)}
.rd .article{position:relative}

/* de noot zelf; onder de alinea, of in de kantlijn op brede schermen */
.rd-note{margin:-4px 0 26px;padding:0 0 2px 16px;border-left:2px solid var(--accent);font-family:var(--sans);color:var(--soft)}
.rd-note[hidden]{display:none}
.article .rd-note p{font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--soft);margin:0}
.rd-note .rd-nk{display:flex;justify-content:space-between;align-items:center;gap:10px}
.article .rd-note .rd-nk p{font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--accent)}
.rd-x{flex:none;display:grid;place-items:center;width:32px;height:32px;margin:-6px -8px -6px 0;padding:0;background:none;border:0;border-radius:2px;font:400 20px/1 var(--sans);color:var(--grey);cursor:pointer}
.rd-x:hover{color:var(--ink)}
.article .rd-note .rd-fig{font-family:var(--disp);font-size:28px;font-weight:500;line-height:1.1;letter-spacing:-.005em;color:var(--ink);margin:6px 0 0}
.rd-note .rd-fig small{display:block;font-family:var(--sans);font-size:12.5px;font-weight:400;letter-spacing:0;line-height:1.4;color:var(--soft);margin-top:5px}
.rd-note dl{margin:8px 0 0}
.rd-note dt{font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--brand);margin-top:10px}
.rd-note dd{font-size:13.5px;line-height:1.55;color:var(--soft);margin:2px 0 0}
.article .rd-note .rd-go{margin-top:10px}
.rd-note .rd-go a{display:flex;align-items:baseline;gap:6px;min-height:28px;padding:3px 0;font-size:13px;font-weight:600;line-height:1.4;color:var(--accent);text-decoration:none}
.rd-note .rd-go a:hover{text-decoration:underline;text-underline-offset:3px}
.rd-note .rd-go a span{flex:none}

/* breed scherm: de noot in de rechterkantlijn, op de hoogte van het getal */
.rd-wide .rd-note{position:absolute;left:calc(100% + 32px);width:min(272px,calc(50vw - 420px));margin:0;padding:0 0 14px;border-left:0;background:var(--bg);z-index:3}
.rd-wide .rd-note .rd-nk{border-top:2px solid var(--accent);padding-top:8px}
.rd-tick,.rd-hint{display:none}
.rd-wide .rd-tick{display:flex;position:absolute;left:calc(100% + 32px);align-items:center;gap:8px;white-space:nowrap;font:500 11px/1 var(--sans);color:var(--grey);font-variant-numeric:tabular-nums;pointer-events:none;z-index:1}
.rd-wide .rd-tick::before{content:"";width:16px;height:1px;background:rgba(168,60,25,.5)}
.rd-wide .rd-tick.is-under{visibility:hidden}
.rd-wide .rd-hint{display:block;position:absolute;left:calc(100% + 32px);width:min(240px,calc(50vw - 420px));border-top:2px solid var(--rule-strong);padding-top:11px}
.rd-wide .rd-hint.is-under{visibility:hidden}
.article .rd-hint p{font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--soft);margin:0}
.article .rd-hint p:first-child{font-size:13px;font-weight:600;color:var(--brand);margin-bottom:4px}

/* ---------- beweging, alleen als die mag ---------- */
@media (prefers-reduced-motion:no-preference){
  .rd-rail{transition:opacity .25s ease,visibility 0s linear .25s}
  .rd-rail.is-on{transition:opacity .25s ease}
  .rd-bar{transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
  .rd-bar.is-on{transform:none;transition:opacity .2s ease,transform .2s ease}
  .rd-bar .rd-chev{transition:transform .2s ease}
  .rd .rd-ref{transition:background-color .15s ease}
  .rd-note:not([hidden]){animation:rdNoteIn .18s ease-out both}
  @keyframes rdNoteIn{from{opacity:0}to{opacity:1}}
}

@media print{
  .rd-rail,.rd-bar,.rd-note,.rd-tick,.rd-hint{display:none!important}
  .rd .rd-ref{text-decoration:none;background:none}
}