/* Inkstream design tokens — één bron van waarheid (threads-brief §9, 26-08-2026).
   Elke nieuwe of gemigreerde pagina laadt dít bestand en verzint geen eigen
   kleuren, maten of fonts. Migratiestatus per pagina staat in DESIGN_SYSTEM.md.
   Fonts zijn self-hosted (latin-subset): geen extern verzoek per paginaweergave. */

@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/ebgaramond-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/ebgaramond-normal-500.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/ebgaramond-normal-600.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/static/fonts/ebgaramond-italic-400.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('/static/fonts/ebgaramond-italic-500.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/instrumentsans-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/instrumentsans-normal-500.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/instrumentsans-normal-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/ibmplexmono-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/ibmplexmono-normal-500.woff2') format('woff2'); }

:root {
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --radius-card: 14px;
  --stroke: 1px;
  --fs-display: 32px;
  --fs-body: 16px;
  --fs-passage: 18px;
  --measure-copy: 65ch;
  /* gronden en oppervlakken */
  --ground: #0b0a09;
  --ground-2: #100e0c;
  --surface: #17140f;
  --surface-2: #1f1b15;
  --line: #2a2520;
  --line-soft: #211d18;

  /* papier (passage-kaarten, lightbox, conclusies) */
  --paper: #f6f0e2;
  --paper-edge: #e7dfcc;
  --ink: #211e17;
  --ink-soft: #5c564a;
  --ink-faint: #736c5b;   /* bijschrift op papier: datum, hoofdstuk, bron — 4.6:1 op --paper */

  /* accent */
  --amber: #d7a343;
  --amber-dim: #a58139;    /* rand, vlak én stille amber tekst op donker: 5.5 op --ground, 4.7 op --surface-2 */
  --amber-ink: #7f6128;    /* amber tekst op papier (notitie-label, bronlink): 5.1 op --paper */
  --marker: rgba(215, 163, 67, .32);
  --marker-ink: rgba(196, 146, 52, .38);
  --amber-wash: rgba(215, 163, 67, .14);   /* accentvlak: chip, knop-achtergrond */
  --amber-line: rgba(215, 163, 67, .35);   /* accentrand: outline, kaartrand */
  /* tweede accent, uitsluitend voor opgezochte woorden — goud betekent
     "dit raakt aan jou", een woordenboek-slip is iets anders. */
  --violet: #a58ac7;

  /* tekst */
  --text: #e8e2d6;
  --text-2: #a49b8d;
  --muted: #8a8274;       /* 4.5:1 op --surface-2, 5.2:1 op --ground */

  /* zes vaste draad-tinten; per draad stabiel voor zijn hele leven */
  --t1: #d7a343;
  --t2: #c0796a;
  --t3: #7f9a86;
  --t4: #7f8cae;
  --t5: #9d8fae;
  --t6: #8a8574;          /* ook als tekst leesbaar: 4.6:1 op --surface-2 */

  --sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* typeschaal, onderkant. Interface-tekst komt hier nooit onder: een label
     (mono-kapitalen: eyebrow, pill, chip, meta-regel) en een bijschrift
     (sans: onderregel, datum, telling). Op de telefoon een stap groter. */
  --fs-label: 11px;
  --fs-caption: 12.5px;

  /* raakvlak: elk klikbaar element is op een aanraakscherm minstens zo hoog.
     Gebruik via @media (pointer: coarse) { … min-height: var(--tap) }. */
  --tap: 44px;
}

/* ── basis ── */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--marker); color: #fff; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

/* ── gedeelde atomen ── */
.lbl {
  font-family: var(--sans); font-weight:600;
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.num { font-variant-numeric: tabular-nums; font-family: var(--mono); }
.grow { flex: 1; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 28px; }
.wrap.wide { max-width: 940px; }
.wrap.xwide { max-width: 1120px; }

.btn {
  font-family: var(--sans);
  font-size: var(--fs-caption);
  font-weight: 500;
  background: var(--amber);
  color: #1a1409;
  border: 0;
  border-radius: 999px;
  padding: 9px 17px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-block;
  text-decoration: none;
}
.btn:hover { background: #e6b355; }
.btn.ghost { background: none; color: var(--text-2); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.ink { background: var(--ink); color: var(--paper); }
.btn.ink:hover { background: #39332a; }

.chip {
  font-size: var(--fs-caption);
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
}
.chip .n { font-family: var(--mono); font-size: var(--fs-label); color: var(--muted); margin-left: 6px; }
.chip.gold { color: var(--amber); border-color: var(--amber-dim); background: var(--surface-2); }
a.chip { text-decoration: none; display: inline-block; }
a.chip:hover { border-color: var(--amber); }
/* Chips en minilinks die iets doen, groeien op een aanraakscherm naar het
   raakvlak; hun tekst blijft even klein. Labels zonder actie (span.chip)
   houden hun maat. */
@media (pointer: coarse) {
  a.chip, button.chip { display: inline-flex; align-items: center; min-height: var(--tap); }
  a.minilink, button.minilink { display: inline-flex; align-items: center; min-height: var(--tap); }
}

/* pill: één feit in kapitalen, nooit een knop. Naast .chip omdat een chip
   een label draagt en een pill een meting. */
.pill {
  font-family: var(--sans); font-weight:600;
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 11px;
  color: var(--muted);
  white-space: nowrap;
}
.pill.gold { color: var(--amber); border-color: var(--amber-dim); }

/* zonekop: een naam, een telling en een lijn die de rest opvult. Eén atoom
   voor élke zonescheiding — dit is wat op de kast de "plaque" was. */
.sess { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 0 0 16px; }
.sess .t { font-family: var(--serif); font-size: 20px; color: var(--text); white-space: nowrap; }
.sess .c { white-space: nowrap; }
.sess .c { font-family: var(--sans); font-weight:600; font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sess .ln { flex: 1; height: 1px; background: var(--line-soft); }

.minilink { font-size: var(--fs-caption); color: var(--muted); text-decoration: none; white-space: nowrap; }
.minilink:hover { color: var(--amber); }

/* go: de deur uit een blok ("Open the index", "Show them on the shelf").
   Een gewone sans-link op 14px in amber, zonder kapitalen, zonder pijl —
   de pijl zat achter élke link en las als sjabloon (design-review 08-09,
   punt 4). Werkt als <a>, als <button> en als <span> binnen een <a>-kaart:
   dan onderstreept de kaart-hover hem. */
.go, button.go {
  font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--amber);
  text-decoration: none; letter-spacing: 0; text-transform: none;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.go:hover, a:hover .go, button:hover .go { text-decoration: underline; text-underline-offset: 3px; }

/* een naam is een deur (BRIEF-web-coherence §2): de byline linkt naar de
   denkerpagina met een dunne amber-lijn, geen blauwe link. Als span (geen
   author_id) is hij onzichtbaar hetzelfde als platte tekst. */
a.author-link { color: inherit; text-decoration: underline; text-decoration-color: var(--amber-dim); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a.author-link:hover, a.author-link:focus-visible { color: var(--text); text-decoration-color: var(--amber); }

/* de markerstreek: een gradient, nooit een vlakke achtergrond */
.mk { background: linear-gradient(transparent 58%, var(--marker) 58%); padding: 0 1px; }

/* sitekop in de nieuwe stijl: merk · bestemmingen (nav.dest) · streep ·
   stille links (nav.side). Altijd .wrap.xwide, zodat de balk niet per
   pagina verspringt. */
.appbar { border-bottom: 1px solid var(--line-soft); background: var(--ground); }
.appbar .wrap { display: flex; align-items: center; gap: 18px; height: 46px; }
.appbar .brand { font-family: var(--serif); font-size: 17px; letter-spacing: .01em; color: var(--text); text-decoration: none; }
.appbar .brand span { color: var(--amber); }
.appbar nav {
  display: flex;
  gap: 18px;
  /* Brede inhoud scrolt in zijn eigen container (§10): op smalle schermen
     schuift de navigatie, de pagina zelf nooit. */
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}
.appbar nav.dest { margin-left: auto; }
.appbar nav::-webkit-scrollbar { display: none; }
.appbar nav a { flex: none; padding: 12px 0; display: inline-flex; align-items: center; gap: 7px; }
/* de vier glyphs van de app-tabbalk, 16px, in de tekstkleur; amber op de
   huidige pagina (BRIEF-web-coherence §5) */
.appbar nav a svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.appbar nav a:hover svg { color: var(--text-2); }
.appbar nav a[aria-current="page"] svg { color: var(--amber); }
.appbar nav a { font-size: var(--fs-caption); color: var(--muted); text-decoration: none; }
.appbar nav a:hover { color: var(--text-2); }
.appbar nav a[aria-current="page"] { color: var(--text); }
/* About en Settings: rechts van een streep, een stap terug */
.appbar .sep { flex: none; width: 1px; height: 16px; background: var(--line); margin: 0 2px; align-self: center; }
.appbar nav a.quiet { font-size: var(--fs-caption); opacity: .8; }

@media (max-width: 600px) {
  :root { --fs-label: 12px; --fs-caption: 13px; }
  .wrap, .wrap.wide, .wrap.xwide { padding: 0 20px; }
  /* Telefoon: twee regels, nooit drie. Het merk en de stille links delen
     de eerste regel (About en Settings rechts, zonder streep); de vier
     bestemmingen staan eronder op volle breedte en wikkelen alleen als het
     scherm smaller is dan 335px. Niets scrolt horizontaal. Raakvlak --tap. */
  .appbar .wrap { flex-wrap: wrap; height: auto; gap: 0 14px; }
  .appbar .brand { padding: 10px 0 2px; }
  .appbar .sep { display: none; }
  .appbar nav.side { margin-left: auto; gap: 0 14px; }
  .appbar nav.dest {
    order: 1;
    flex-basis: 100%;
    flex-wrap: wrap;
    margin-left: 0;
    gap: 0 12px;
  }
  .appbar nav { overflow: visible; }
  .appbar nav a { padding: 10px 0 12px; font-size: 13px; min-height: var(--tap); }
}
/* ── skeleton: laadstaat die de lay-out alvast belooft ──
   Gebruik: <div class="skel" style="height:…"> blokken in de vorm van wat
   er komt. Ademt zacht; staat stil bij prefers-reduced-motion. */
.skel {
  background: var(--surface);
  border-radius: 3px;
  animation: skelbreathe 1.6s ease-in-out infinite;
}
@keyframes skelbreathe {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── cijfertegels ──────────────────────────────────────────────────────
   Eén rij tegels met steeds dezelfde opbouw: een label, één getal, een
   beeld van vaste hoogte, en onderschriften die alleen bestaan als het
   feit bestaat. Gedeeld door de boekpagina, de boekindex, de draad en het
   dradenoverzicht — zie DESIGN_SYSTEM.md.

   Het beeldslot (.fig) staat er ook als een tegel geen beeld heeft: zo
   staan de onderschriften van alle tegels in de rij op dezelfde regel. */
.tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line-soft); border: 1px solid var(--line-soft);
  border-radius: 3px; overflow: hidden;
}
.tiles.three { grid-template-columns: repeat(3, 1fr); }
.tiles.two { grid-template-columns: repeat(2, 1fr); }  /* zolang een boek nog weinig te tellen heeft */
.tiles.one { grid-template-columns: minmax(0, 1fr); max-width: 300px; }
.tile {
  background: var(--ground); padding: 15px 16px 16px;
  display: flex; flex-direction: column;
  border: 0; font: inherit; color: inherit; text-align: left; text-decoration: none;
  transition: background .2s ease;
}
a.tile, button.tile { cursor: pointer; }
a.tile:hover, button.tile:hover { background: var(--ground-2); }
.tile .big { font-size: 27px; line-height: 1; margin: 9px 0 7px; color: var(--text); }
.tile .sub { font-size: var(--fs-caption); line-height: 1.5; color: var(--muted); }
.tile .sub b { color: var(--text-2); font-weight: 500; }
/* de regel die op hover van naam verandert (hoofdstuktitel, sessiedatum) */
.tile .sub.swap { transition: color .15s ease; }
.tile .sub.swap.lit, .tile .sub.swap.lit b { color: var(--amber); }
.tile .go { margin-top: auto; padding-top: 11px; color: transparent; transition: color .2s ease; }
a.tile:hover .go, button.tile:hover .go, .tile:focus-visible .go { color: var(--amber); text-decoration: none; }

.tile .fig { height: 22px; display: flex; align-items: flex-end; margin: 0 0 9px; }
.tile .fig > * { width: 100%; margin: 0; }
.tile .bar { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; flex: none; }
.tile .bar i { display: block; height: 100%; background: var(--amber); }
/* verdeling in plaats van voortgang: meerdere delen naast elkaar */
.tile .bar.split { display: flex; }
.tile .bar.split i { flex-basis: 0; }
.tile .bar i.dim { background: var(--amber-dim); }
.tile .bar i.cool { background: #4a4239; }
/* waar iets in het boek ligt: een streepje per markering, per citaat */
.tile .ticks { position: relative; height: 6px; background: var(--line-soft); border-radius: 2px; overflow: hidden; flex: none; }
.tile .ticks i { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--amber-dim); border-radius: 1px; }
.tile .ticks i.note { background: var(--amber); top: -1px; bottom: -1px; }
/* voortgang per hoofdstuk: elk segment zo breed als het hoofdstuk lang is */
.chbar { display: flex; gap: 2px; height: 6px; align-items: stretch; flex: none; }
.chbar .seg {
  position: relative; height: 100%; background: var(--line); border-radius: 2px; overflow: hidden;
  min-width: 2px; flex-basis: 0; padding: 0; border: 0; cursor: pointer;
  transition: transform .16s ease, background .16s ease, opacity .16s ease;
}
.chbar .seg i { position: absolute; inset: 0 auto 0 0; background: var(--amber); }
.chbar .seg.tail { background: var(--line-soft); }
.chbar .seg.tail i { background: var(--amber-dim); }
.chbar .seg.here { box-shadow: 0 0 0 1px rgba(215, 163, 67, .5); }
.chbar:hover .seg { opacity: .5; }
.chbar .seg:hover, .chbar .seg:focus-visible { opacity: 1; background: #3d352c; transform: scaleY(1.9); }
/* ritme over de tijd: één staafje per zitting, per maand */
.tile .spark { display: flex; align-items: flex-end; gap: 2px; height: 22px; flex: none; }
.tile .spark i { flex: 1; flex-basis: 0; min-width: 2px; background: var(--line); border-radius: 1px; transition: background .16s ease; }
.tile .spark i.on { background: var(--amber-dim); }
.tile .spark i.last { background: var(--amber); }
.tile .spark:hover i { background: var(--line); }
.tile .spark i:hover { background: var(--amber); }

@media (max-width: 900px) { .tiles, .tiles.three { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .chbar .seg { transition: none; } }

/* ── Lege staat (DESIGN_SYSTEM.md → Lege staat) ─────────────────────────
   De turf naar de eerste draad en de voorbeeld-draad. Eén implementatie,
   gebruikt op de boekpagina en de Threads-pagina (InkstreamUI.firstThread). */
.tprog { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 6px 0 26px; }
.tally { display: flex; gap: 5px; align-items: flex-end; height: 26px; }
.tally i { display: block; width: 5px; height: 18px; border-radius: 2px; background: var(--line); }
.tally i:nth-child(5n) { margin-right: 6px; }
.tally i.on { background: var(--marker-ink); height: 24px; animation: ink-in .5s ease-out both; }
.tally i.on:nth-child(2) { animation-delay: .06s; }
.tally i.on:nth-child(3) { animation-delay: .12s; }
@keyframes ink-in { from { height: 6px; opacity: .2; } to { height: 24px; opacity: 1; } }
.tprog p { flex: 1 1 280px; margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.4; color: var(--text-2); }
.tprog p b { color: var(--text); font-weight: 500; }
.example { margin: 0; max-width: 620px; }
.example figcaption { font-size: var(--fs-caption); color: var(--muted); margin: 0 0 10px; }
.ex-card { background: var(--paper-edge); color: var(--ink); border-radius: 3px; padding: 20px 22px 18px;
           outline: 1px dashed var(--paper-edge); outline-offset: 5px; position: relative; }
.ex-card .ex-k { font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--amber-ink); }
.ex-card .ex-t { font-family: var(--serif); font-size: 22px; line-height: 1.25; margin: 6px 0 8px; }
.ex-card .ex-lede { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 14px; }
.ex-card blockquote { margin: 0; padding: 10px 0 10px 14px; border-left: 2px solid var(--marker-ink);
                      font-family: var(--serif); font-size: 16px; line-height: 1.5; }
.ex-card blockquote + blockquote { margin-top: 8px; }
.ex-card blockquote span { display: block; font-family: var(--sans); font-size: var(--fs-caption); color: var(--ink-faint); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .tally i.on { animation: none; } }
/* De indexkaart zolang het boek zelf er nog niet is (InkstreamUI.indexSoon). */
.obs.soon { cursor: default; }
.obs.soon:hover { transform: none; background: var(--surface); }
.soon-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.soon-row span { font-size: var(--fs-caption); color: var(--text-2); border: 1px dashed var(--line); border-radius: 999px; padding: 3px 10px; }