/* =====================================================================
   ELIXER FABRIEK — custom.css (stijlfundament, 2026-06-12)

   Afgeleid van .claude/skills/visualize/huisstijl.css — de tokens zijn het
   merk en staan vast. Contract: docs/ontwerp/fabriek-dashboard-huisstijl-ontwerp.md

   Blokken:
     1. FUNDAMENT        — tokens, typografie-ladder, iconen
     2. OBSERVABLE-SCHIL — sidebar, header, footer, page-nav
     3. PALET            — huisstijl-bouwstenen op dashboard-schaal
     4. DASHBOARD-EXTENSIES — dot/segbar/tracker/cijferrij/lijst/logboek/…
     5. COCKPIT          — .ck-* master-detail
     6. LEGACY           — Dossiers/Verdieping-compat. VERBODEN voor de zes
                           herbouw-pagina's (index/lijn/artikelen/runs/
                           machinekamer/kennisbank).
   ===================================================================== */

/* =====================================================================
   1. FUNDAMENT — tokens
   ===================================================================== */
:root {
  /* huisstijl — letterlijk uit huisstijl.css, niet aanpassen */
  --bg: #fdfdfc;  --panel: #f6f5f1;  --panel-2: #efede7;
  --ink: #16161a;  --ink-2: #3a3a40;  --body: #54545c;  --muted: #93939a;
  --line: #eae8e1;  --line-2: #ddd9d0;
  --accent: #2f6df0;  --accent-ink: #1f51c4;  --accent-soft: #eaf1ff;
  --accent-border: #cdddfc;
  --t-amber: #faf3e6;  --b-amber: #e8d6b3;  --amber-ink: #97803f;
  --t-green: #ecf5ee;  --b-green: #c8e2cd;  --green-ink: #4f9a60;
  --t-rose:  #fbeeec;  --b-rose:  #eecdc8;  --rose-ink:  #c2645a;
  --radius: 14px;  --radius-sm: 8px;

  /* fonts: systeem-stack (DM Sans + Google-import vervallen) */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", monospace;

  /* Observable-schil meekleuren (aliassen, geen nieuwe kleuren) */
  --observablehq-max-width: 100%;
  --theme-background: var(--bg);
  --theme-background-alt: var(--panel);
  --theme-foreground: var(--ink);
  --theme-foreground-muted: var(--body);
  --theme-foreground-faint: var(--muted);
  --theme-foreground-alt: var(--ink-2);
  --theme-foreground-focus: var(--accent);
  --theme-border: var(--line-2);
  --theme-border-subtle: var(--line);
  --card-bg: #fff;
  --sans-serif: var(--sans);
  --serif: var(--sans);
  --monospace: var(--mono);
}

html, body { font-family: var(--sans); background: var(--bg); }
body { max-width: none !important; }

#observablehq-main * , #observablehq-main *::before, #observablehq-main *::after {
  box-sizing: border-box;
}

#observablehq-main,
#observablehq-main p,
#observablehq-main li {
  font-family: var(--sans);
  color: var(--body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---- typografie-ladder (vaste px, §1.2 van het contract) ---- */
h1, h2, h3, h4, h5, h6 { font-family: var(--sans); color: var(--ink); }
h1 {
  font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.08;
  margin: 0 0 10px 0;
}
h2, h2.sec {
  font-size: 21px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1;
  margin: 36px 0 14px 0; border: none; padding: 0;
}
.sec-head h2, .sec-head h2.sec { margin: 0; }
h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 20px 0 8px 0; }
h4 { font-size: 14px; font-weight: 650; margin: 14px 0 6px 0; }

.lede { font-size: 16.5px; line-height: 1.5; color: var(--ink-2); max-width: 60ch; margin: 0 0 6px 0; }
.kicker, .microkop {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.kicker { display: block; margin-bottom: 6px; }
.microkop { display: block; margin: 0 0 10px 0; }
.eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 8px; }
.eyebrow .num { color: var(--accent); font-variant-numeric: tabular-nums; }
.eyebrow .lbl { color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.lead-line { font-size: 15px; color: var(--body); margin: 10px 0 18px; max-width: 64ch; }
.kern { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); line-height: 1.35; margin: 0; }
.sup  { font-size: 14px; color: var(--body); margin: 5px 0 0 0; line-height: 1.5; }
.kernzin { margin: 6px 0; }
.meta { font-size: 11.5px; font-family: var(--mono); color: var(--muted); margin-top: 10px; }
.kpi {
  font-size: 30px; font-weight: 650; font-family: var(--mono);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--ink);
  line-height: 1.1; display: block;
}

header.doc { padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
section { margin: 40px 0; }
.sec-head { margin-bottom: 18px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--accent-ink); }
a.observablehq-header-anchor { color: inherit; }

code, pre, .mono, .monospace { font-family: var(--mono); }
code, .mono { font-size: 0.86em; }
:not(pre) > code {
  background: var(--panel-2);
  border: none;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 0.82em;
  color: var(--ink-2);
}

/* ---- Lucide iconen (iconography.md) ---- */
.icon { display: inline-block; vertical-align: -2px; flex-shrink: 0; }
.icon-xs { width: 12px; height: 12px; }
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 16px; height: 16px; }
.icon-lg { width: 20px; height: 20px; }
.icon-xl { width: 24px; height: 24px; }

/* generieke klik-affordance */
.klik { cursor: pointer; }
button.ck-row, button.lr {
  font: inherit; text-align: left; background: none; border: none; color: inherit;
  width: 100%; cursor: pointer;
}

/* =====================================================================
   2. OBSERVABLE-SCHIL
   ===================================================================== */
#observablehq-center, #observablehq-main { background: var(--bg); max-width: none !important; }
#observablehq-main { padding: 28px 36px 64px; }

/* Framework's 640px-leesbreedte opheffen — dashboard gebruikt de volle breedte */
#observablehq-main p,
#observablehq-main table,
#observablehq-main figure,
#observablehq-main figcaption,
#observablehq-main h1,
#observablehq-main h2,
#observablehq-main h3,
#observablehq-main h4,
#observablehq-main h5,
#observablehq-main h6,
#observablehq-main ul,
#observablehq-main ol,
#observablehq-main .ft,
#observablehq-main .matrix-wrap { max-width: none; }

/* ---- sidebar: warm wit, haarlijn, kalme tekst-links ---- */
#observablehq-sidebar {
  background: var(--bg);
  border-right: 1px solid var(--line);
  font-family: var(--sans);
}
#observablehq-sidebar li a, #observablehq-sidebar summary {
  color: var(--body);
  font-size: 13.5px;
  font-weight: 400;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  margin: 1px 8px;
}
#observablehq-sidebar li a:hover {
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
}
#observablehq-sidebar li.observablehq-link-active > a {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}
/* de app-titel bovenaan de sidebar */
#observablehq-sidebar > ol:first-of-type li a,
#observablehq-sidebar > ol:first-of-type li.observablehq-link-active > a {
  background: none;
  color: var(--ink);
  font-weight: 650;
  font-size: 14px;
  letter-spacing: -0.01em;
}
/* groepskoppen (Dossiers / Verdieping) */
#observablehq-sidebar summary {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* header blijft verborgen: de pagina's dragen zelf kop + kicker; een tweede
   topbalk voegt alleen chrome toe (fundament-besluit, zie ontwerp-brief §1.4) */
#observablehq-header { display: none; }
/* ...maar display:none haalt de gereserveerde ruimte niet weg: het framework zet
   `margin-top: calc(header-height + 3.5rem)` ≈ 91px op main via de ~-sibling-selector,
   die niet om display:none geeft. Neutraliseren, anders staat alle content ~119px
   te laag (de kop verdwijnt half onder de vouw). Top-lucht komt uit main's padding. */
#observablehq-header ~ #observablehq-main { margin-top: 0; }

/* Leidende display()-blocks gelijktrekken met statische markdown-headers.
   Framework geeft elk `.observablehq--block` 1rem marge; een statische
   `<header class="doc">` (de andere pagina's) staat direct in main en krijgt die
   niet. De overzicht-pagina rendert zijn kop via display() → die zit wél in een
   block en stond zo 1rem (16px) lager dan de rest. Het eerste zichtbare block
   bovenaan main (ook ná een lege setup-block) krijgt daarom geen top-marge. */
#observablehq-main > .observablehq--block:first-child,
#observablehq-main > .observablehq--block:empty:first-child + .observablehq--block {
  margin-top: 0;
}

#observablehq-footer {
  color: var(--muted);
  font-size: 12px;
  font-family: var(--mono);
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 48px;
}
#observablehq-footer a { color: var(--muted); }
#observablehq-footer a:hover { color: var(--accent-ink); }

/* ---- sticky page-nav: kalme tekst-ankers, geen pill-tabs ---- */
#observablehq-main h2[id] { scroll-margin-top: 4.5rem; }
.page-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin: 0 0 22px 0;
  padding: 10px 0 0 0;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}
.page-nav-link {
  padding: 4px 0 8px 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.1s ease;
}
.page-nav-link:hover { color: var(--ink); text-decoration: none; }
.page-nav-link.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }

.observablehq--inspect { font-family: var(--mono); font-size: 12.5px; }

/* =====================================================================
   3. PALET — huisstijl-bouwstenen op dashboard-schaal
   ===================================================================== */

/* ---- cards: kernzin + ondersteuning; .hart = hét ene getinte anker ---- */
.rows { display: grid; gap: 10px; }
.row-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
}
.row-card .tag {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.row-card.hart {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  padding: 20px;
}
.row-card.hart .tag { color: var(--accent-ink); }
.row-card.hart .kern { font-size: 19px; font-weight: 650; }
.row-card.klik { cursor: pointer; position: relative; transition: background 0.1s ease; }
.row-card.klik:hover { background: var(--panel); }
.row-card.hart.klik:hover { background: var(--accent-soft); border-color: var(--accent); }

/* ---- split (2 kolommen) + pane (do/don't) ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 660px) { .split { grid-template-columns: 1fr; } }
.pane { border-radius: var(--radius); padding: 16px 20px; border: 1px solid var(--line); background: #fff; }
.pane.neg { background: var(--t-rose); border-color: var(--b-rose); }
.pane.pos { background: var(--t-green); border-color: var(--b-green); }
.pane h4 { font-size: 14.5px; font-weight: 650; margin: 0 0 10px 0; color: var(--ink); }
.pane ul { list-style: none; margin: 0; padding: 0; }
.pane li { font-size: 13.5px; padding: 7px 0; color: var(--ink-2); line-height: 1.4; }
.pane li + li { border-top: 1px solid rgba(0, 0, 0, 0.05); }

/* ---- tabel (max 4 kolommen — contract §2.2) ---- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  font-family: var(--sans);
  margin: 8px 0 20px 0;
  background: transparent;
}
thead th, th {
  background: transparent;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: bottom;
}
tbody td, td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-2);
}
tbody tr:last-child td { border-bottom: none; }
td.key { font-weight: 600; color: var(--ink); white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- steps (genummerd, QA-cyclus) ---- */
.steps { counter-reset: s; display: grid; gap: 8px; }
.step {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 16px 12px 48px; position: relative; counter-increment: s;
  font-size: 14px; color: var(--ink-2); line-height: 1.45;
}
.step::before {
  content: counter(s);
  position: absolute; left: 14px; top: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}

/* ---- phases (kolom-kaarten) ---- */
.phases { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 660px) { .phases { grid-template-columns: 1fr; } }
.ph { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: #fff; }
.ph .badge { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.ph .tag { font-size: 12px; color: var(--muted); display: block; margin-bottom: 10px; }
.ph ul { list-style: none; margin: 0; padding: 0; }
.ph li { font-size: 13px; padding: 6px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.ph li:first-of-type { border-top: 0; }

/* ---- callout (amber: haperingen, fouten, verouderde data) ---- */
.callout {
  background: var(--t-amber);
  border: 1px solid var(--b-amber);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 10px 0;
}
.callout h4 { font-size: 14.5px; font-weight: 650; color: var(--ink); margin: 0 0 6px 0; }
.callout p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin: 0; }
.callout p + p { margin-top: 6px; }
.callout .tagline { font-size: 12px; color: var(--amber-ink); margin-top: 8px; }

/* ---- quote (Mo's woorden) ---- */
.quote {
  border-left: 2px solid var(--line-2);
  padding: 4px 0 4px 16px; margin: 12px 0;
  color: var(--ink-2); font-style: italic;
}
.quote cite { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 5px; }

/* ---- codeblock ---- */
.codeblock, pre {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  margin: 12px 0;
  overflow-x: auto;
  line-height: 1.6;
}
.codeblock { white-space: pre; }

/* =====================================================================
   4. DASHBOARD-EXTENSIES — de statuskleur-taal en de nieuwe bouwstenen
   =====================================================================
   Vier betekenisgroepen (contract §1.3):
     wacht  = grijs        (schedule, nog niet op de Werktafel)
     bezig  = accent-blauw (translate + read)
     jou    = amber        (review — "wacht op jou")
     klaar  = groen        (publish + live)
   Geen andere kleurbetekenis bestaat. */

/* ---- pills: kalm grijs; amber alleen voor wacht-op-jou, groen spaarzaam ---- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  background: var(--panel-2); color: var(--ink-2);
  border: 1px solid transparent;
  margin: 1px 2px;
}
.pill--amber { background: var(--t-amber); border-color: var(--b-amber); color: var(--amber-ink); }
.pill--green { background: var(--t-green); border-color: var(--b-green); color: var(--green-ink); }

/* ---- fasestip ---- */
.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  vertical-align: 0;
  background: var(--line-2);
}
.dot.is-wacht { background: var(--muted); }
.dot.is-bezig { background: var(--accent); }
.dot.is-jou   { background: var(--amber-ink); }
.dot.is-klaar { background: var(--green-ink); }

/* ---- segbar: gesegmenteerde betekenis-balk ---- */
.segbar {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  gap: 1px;
}
.segbar .seg { min-width: 3px; }
.seg.is-wacht { background: var(--line-2); }
.seg.is-bezig { background: var(--accent-border); }
.seg.is-jou   { background: var(--b-amber); }
.seg.is-klaar { background: var(--b-green); }

/* ---- legenda: vier stipjes + woorden, één regel ---- */
.legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--muted); margin: 8px 0; }
.legenda-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ---- tracker: 6 fasepunten op een haarlijn ---- */
.tracker { display: flex; align-items: flex-start; margin: 14px 0 4px; }
.tracker-stap {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  position: relative;
}
.tracker-stap::before {
  content: "";
  position: absolute; top: 9px; right: 50%;
  width: 100%; height: 1px;
  background: var(--line-2);
}
.tracker-stap:first-child::before { display: none; }
.tracker-punt {
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  position: relative; z-index: 1;
  background: #fff; border: 1px solid var(--line-2); color: var(--muted);
}
.tracker-stap.is-af .tracker-punt { background: var(--panel-2); border-color: var(--line-2); }
.tracker-stap.is-nu .tracker-punt { background: var(--accent); border-color: var(--accent); color: #fff; }
.tracker-stap.is-nu .tracker-punt::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff;
}
.tracker-lbl {
  margin-top: 7px;
  font-size: 11px; color: var(--muted);
  text-align: center; line-height: 1.25;
  padding: 0 4px;
}
.tracker-stap.is-nu .tracker-lbl { color: var(--ink); font-weight: 600; }
.tracker-versie { font-family: var(--mono); font-weight: 400; color: var(--muted); }
.tracker-note { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }

/* ---- cijferrij: 2–4 grote cijfers met verticale haarlijnen ---- */
.cijferrij { display: flex; flex-wrap: wrap; margin: 14px 0; }
.cijfer { padding: 2px 22px; border-left: 1px solid var(--line); min-width: 0; }
.cijfer:first-child { border-left: none; padding-left: 0; }
.cijfer-num {
  display: block;
  font-size: 24px; font-weight: 600;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--ink); line-height: 1.2;
}
.cijfer-lbl {
  display: block; margin-top: 2px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted);
}

/* ---- lijst: kalme haarlijn-lijst ---- */
.lijst { display: block; }
.lijst .lr {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.lijst .lr:last-child { border-bottom: none; }
.lijst .lr-main { min-width: 0; }
.lijst .lr-kern { display: block; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.lijst .lr-sup { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; line-height: 1.4; }
.lijst .lr-zij {
  flex-shrink: 0;
  font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--muted); text-align: right;
}
.lijst a.lr:hover { background: var(--panel); text-decoration: none; }
.lijst .lr.klik:hover { background: var(--panel); }
.lijst .lr.stil .lr-kern { font-weight: 400; color: var(--body); }

/* ---- logboek: runs-stappenverloop ---- */
.logboek { font-size: 13px; margin: 10px 0; }
.log-groep {
  font-family: var(--mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted);
  padding: 14px 8px 6px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.logboek .log-groep:first-child { border-top: none; margin-top: 0; padding-top: 4px; }
.log-rij {
  display: flex; align-items: baseline; gap: 12px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.log-rij:last-child { border-bottom: none; }
.log-rij.klik:hover { background: var(--panel); }
.log-rij.is-open { background: var(--accent-soft); }
.log-rij.is-onderbroken .log-titel { color: var(--ink); }
.log-nr { font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--muted); flex-shrink: 0; }
.log-titel { font-size: 13px; font-weight: 500; color: var(--ink-2); min-width: 0; flex: 1; }
.log-wie { font-family: var(--mono); font-size: 11.5px; color: var(--muted); flex-shrink: 0; }
.log-zij { font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--muted); flex-shrink: 0; text-align: right; }

/* ---- station-strip: lijn-master (5 kaarten + pijlen) ---- */
.station-strip { display: flex; align-items: stretch; gap: 8px; margin: 18px 0; }
.station-strip .station {
  flex: 1; min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
}
.station-strip .station:hover { background: var(--panel); }
.station-strip .station.active {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.station-pijl { align-self: center; color: var(--muted); flex-shrink: 0; display: flex; }
@media (max-width: 900px) {
  .station-strip { flex-direction: column; }
  .station-pijl { transform: rotate(90deg); align-self: flex-start; margin-left: 22px; }
}

/* ---- stroomregel: erin → eruit ---- */
.stroomregel {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: 13.5px; color: var(--ink-2);
  margin: 14px 0;
}
.stroomregel .pijl { color: var(--accent); display: flex; flex-shrink: 0; }

/* ---- ploeg: doctrine-groepen ---- */
.ploeg { display: grid; gap: 16px; margin: 14px 0; }
.ploeg-groep { border-top: 1px solid var(--line); padding-top: 12px; }
.ploeg-groep:first-child { border-top: none; padding-top: 0; }
.ploeg-kop { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.ploeg-rol { font-size: 13px; color: var(--body); margin-top: 2px; }
/* kalme verwijzing (contract §2.3 + gedeeld patroon 3): @naam mono in ink,
   hover accent. Het ID-prefix wint van de framework-regel `a[href]`
   (specificiteit 0,1,1) die links anders accent-blauw kleurt. */
#observablehq-main .ploeg-lid {
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  text-decoration: none;
  display: inline-block; margin: 6px 14px 0 0;
}
#observablehq-main .ploeg-lid:hover { color: var(--accent-ink); text-decoration: none; }

/* ---- stempel: snapshot-tijd ---- */
.stempel { font-family: var(--mono); font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.stempel.is-oud { color: var(--amber-ink); }

/* ---- lege staat ---- */
.leeg { color: var(--muted); font-size: 14px; font-style: normal; padding: 10px 0; }

/* ---- statCards-grid (cockpit.js statCards) ---- */
.grid { display: grid; gap: 10px; }
.grid-cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 10px; }
.grid-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.grid-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
@media (max-width: 800px) {
  .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-2 { grid-template-columns: 1fr; }
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.card h2, .card h3 {
  margin: 0 0 4px 0;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted);
  border: none; padding: 0;
}
.card .big {
  display: block;
  font-size: 28px; font-weight: 650;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink); line-height: 1.15;
}
.card .sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; display: block; }

/* ---- overzicht-grid (index): 58/42, acties eerst ---- */
.overzicht-grid { display: grid; grid-template-columns: 58fr 42fr; gap: 32px; align-items: start; }
@media (max-width: 900px) { .overzicht-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   5. COCKPIT — master-detail (components/cockpit.js)
   ===================================================================== */
.ck {
  display: flex;
  flex-direction: column;
  height: var(--ck-height, calc(100vh - 9.5rem));
  min-height: 420px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 4px 0 16px 0;
}
.ck-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex-wrap: wrap;
}
.ck-title { font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; color: var(--ink); }
.ck-count { font-size: 12px; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.ck-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.ck-filter { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.ck-filter select, .ck-search {
  font-family: var(--sans);
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
}
.ck-filter select:focus, .ck-search:focus { outline: none; border-color: var(--accent); }
.ck-search-wrap { position: relative; display: inline-flex; align-items: center; }
.ck-search-wrap > .icon { position: absolute; left: 8px; color: var(--muted); pointer-events: none; }
.ck-search-wrap .ck-search { padding-left: 27px; }
.ck-search { width: 165px; }
.ck-navbtns { display: inline-flex; gap: 4px; }
.ck-btn {
  font-family: var(--sans);
  font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--body);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.1s ease;
}
.ck-btn:hover { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-ink); }
.ck-btn.active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-ink); font-weight: 600; }
.ck-body { display: flex; flex: 1; min-height: 0; }
.ck-master {
  width: var(--ck-master-width, 330px);
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: var(--bg);
}
.ck-row {
  display: block;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.45;
}
.ck-row:hover { background: var(--panel); }
.ck-row.active {
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  padding-left: 12px;
}
.ck-row-title {
  display: block;
  font-size: 14px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ck-row-sub {
  display: flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 12.5px;
  margin-top: 1px;
  overflow: hidden; white-space: nowrap;
}
.ck-row-side {
  float: right;
  margin-left: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.ck-row-meta { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
/* groepskop in de master (Vertaalpipeline: GÜLEN / BOEK boven de eerste stap) */
.ck-group {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  margin: 2px 0 8px;
}
.ck-row.active .ck-group { color: var(--accent-ink); }
.ck-detail, .ck-overview { flex: 1; overflow-y: auto; padding: 20px 24px; min-width: 0; }
.ck-empty { color: var(--muted); font-size: 14px; font-style: normal; padding: 16px; }

/* detailpaneel = verhaal: kicker → kop → lede/kernzin → bouwstenen → meta */
.ck-kicker {
  display: block;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px 0;
}
.ck-detail h2:first-child, .ck-detail h1:first-child { margin-top: 0; }
.ck-h {
  font-size: 19px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink);
  margin: 0 0 4px 0;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  line-height: 1.2;
}
.ck-h .ck-h-sub { font-size: 13px; font-weight: 400; color: var(--muted); }
/* detail-titel blijft ink, óók als hij een link is (runs → artikel);
   hover toont de link-affordance. ID-prefix wint van framework `a[href]`. */
#observablehq-main .ck-h a { color: var(--ink); }
#observablehq-main .ck-h a:hover { color: var(--accent-ink); }
.ck-lede { font-size: 15px; color: var(--ink-2); line-height: 1.5; margin: 8px 0 0 0; max-width: 64ch; }
.ck-section {
  margin: 22px 0 10px 0;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
}

/* prose-naslag (werkinstructies, stap-verslagen) — ladder onder de paneelkop */
.ck-prose { font-size: 13.5px; line-height: 1.6; max-width: 72ch; color: var(--body); }
.ck-prose h1, .ck-prose h2, .ck-prose h3, .ck-prose h4 { margin: 16px 0 6px 0; color: var(--ink); }
.ck-prose h1 { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.ck-prose h2 { font-size: 15px; font-weight: 650; }
.ck-prose h3 { font-size: 14px; font-weight: 600; }
.ck-prose h4 { font-size: 13.5px; font-weight: 600; }
.ck-prose pre {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 12px; overflow-x: auto; font-size: 11.5px;
}
.ck-prose table { font-size: 12.5px; }
.ck-prose blockquote {
  border-left: 2px solid var(--line-2);
  margin: 8px 0; padding: 2px 0 2px 14px;
  color: var(--body);
}

/* kv/pillRow: API-compat — de zes herbouw-pagina's gebruiken ze NIET */
.ck-kv { display: grid; grid-template-columns: max-content 1fr; gap: 5px 20px; margin: 12px 0 20px 0; font-size: 13.5px; }
.ck-kv dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding-top: 2px; }
.ck-kv dd { margin: 0; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.ck-pills { display: inline-flex; flex-wrap: wrap; gap: 3px; }

@media (max-width: 800px) {
  .ck { height: auto; }
  .ck-body { flex-direction: column; }
  .ck-master { width: 100%; max-height: 240px; border-right: none; border-bottom: 1px solid var(--line); }
}

/* =====================================================================
   5b. VERTAALPIPELINE — stations-cockpit (src/vertaalpipeline.md)
   Bouwt op de cockpit (blok 5) en de tokens (blok 1). Géén eigen spacing-
   of icoon-schaal: iconen via .icon-* (iconography.md), maten via de tokens.
   ===================================================================== */

/* station-nummer-badge (master + overzicht) */
.vp-nr {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 6px; background: var(--panel-2); color: var(--ink-2);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.ck-row.active .vp-nr { background: #fff; color: var(--accent-ink); }
.ck-row-title { display: flex; align-items: center; gap: 8px; }

/* ---- detail ---- */
.vp-detail { min-width: 0; }
.vp-io { display: flex; flex-wrap: wrap; gap: 22px; margin: 14px 0 4px; }
.vp-iocol { min-width: 0; }
.vp-iolab {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin-bottom: 7px;
}
.vp-iolab .icon { color: var(--muted); }
.vp-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.vp-chip {
  font-size: 12px; line-height: 1.5; padding: 2px 9px;
  border-radius: 100px; border: 1px solid var(--line-2);
  color: var(--ink-2); background: #fff;
}
.vp-chip.in { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-ink); }
.vp-chip.out { border-color: var(--b-green); background: var(--t-green); color: var(--green-ink); }
.vp-chip.mono { font-family: var(--mono); font-size: 11px; }

/* wie doet het — agent-mini-rijen */
.vp-who { margin: 16px 0 4px; display: flex; flex-direction: column; gap: 1px; }
.vp-agent {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg);
}
.vp-agent + .vp-agent { margin-top: 6px; }
.vp-agent-ic {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink);
}
.vp-agent-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.vp-agent-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.vp-agent-rol { font-size: 12px; color: var(--muted); line-height: 1.45; }
.vp-model {
  font-family: var(--mono); font-size: 11px; color: var(--body);
  background: var(--panel-2); padding: 1px 7px; border-radius: 5px;
  white-space: nowrap; flex-shrink: 0;
}
/* kalme verwijzing naar de Machinekamer (zoals @naam daar: ink, hover accent) */
#observablehq-main a.vp-ref { color: var(--ink); }
#observablehq-main a.vp-ref:hover { color: var(--accent-ink); text-decoration: underline; }

/* QA-cyclus mini-lijst (hergebruikt .lijst uit blok 4) */
.vp-qa-stap {
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--accent-ink);
  background: var(--accent-soft); padding: 1px 6px; border-radius: 5px; margin-right: 6px;
}
.vp-qa-wie { font-size: 11.5px; color: var(--muted); }

/* conflict-banner */
.vp-banner {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--t-amber); border: 1px solid var(--b-amber); border-radius: var(--radius-sm);
  padding: 10px 12px; margin: 16px 0 4px; font-size: 13px; color: var(--ink-2); line-height: 1.5;
}
.vp-banner .icon { color: var(--amber-ink); flex-shrink: 0; margin-top: 1px; }

/* Werktafel-CTA + terugkoppel-noot */
.vp-cta {
  display: inline-flex; align-items: center; gap: 7px; margin: 16px 0 2px;
  font-size: 13px; font-weight: 600; color: var(--accent-ink);
  background: var(--accent-soft); border: 1px solid var(--accent-border);
  border-radius: 100px; padding: 7px 14px;
}
#observablehq-main a.vp-cta:hover { text-decoration: none; background: #dfeaff; }
.vp-back {
  display: flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 12.5px; color: var(--accent-ink);
}
.vp-back .icon { color: var(--accent); }

/* ---- tab-strip + paneel (prompt / resultaat) ---- */
.vp-voorbeeld { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.vp-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; }
.vp-tab {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 12px; color: var(--body);
  background: #fff; border: 1px solid var(--line-2); border-radius: 100px;
  padding: 5px 12px; cursor: pointer; transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.vp-tab .icon { color: var(--muted); }
.vp-tab:hover { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-ink); }
.vp-tab.active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-ink); font-weight: 600; }
.vp-tab.active .icon { color: var(--accent-ink); }
.vp-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vp-panel { min-width: 0; }
.vp-artifact { min-width: 0; }
.vp-artifact-path {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--muted); margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.vp-artifact-path .mono { color: var(--accent-ink); }
.vp-prompt-note, .vp-trunc {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--muted); margin: 0 0 12px;
}
.vp-trunc { margin: 12px 0 0; }
.vp-leestekst { max-width: 68ch; }
.vp-leestekst p { margin: 0 0 12px; color: var(--ink-2); }

/* glossarium-tabel */
.vp-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.vp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.vp-table th {
  text-align: left; font-weight: 600; color: var(--muted); background: var(--bg);
  padding: 6px 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0;
  text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.04em;
}
.vp-table td { padding: 5px 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.vp-table tr:last-child td { border-bottom: none; }
.vp-count { font-size: 11.5px; color: var(--muted); margin-top: 8px; }

/* comments / citaten-kaarten */
.vp-thread { border: 1px solid var(--line); border-left: 2px solid var(--accent-border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; background: var(--bg); }
.vp-thread-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.vp-thread-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-ink); }
.vp-thread-status { font-size: 10.5px; color: var(--amber-ink); background: var(--t-amber); padding: 0 7px; border-radius: 100px; }
.vp-thread-anchor { font-size: 12.5px; font-style: italic; color: var(--body); border-left: 2px solid var(--line-2); padding-left: 9px; margin-bottom: 6px; }
.vp-thread-body { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }

/* ---- A/B-keuze: de lijn-schakelaar ---- */
.vp-host { min-width: 0; }
.vp-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 16px; }
@media (max-width: 720px) { .vp-switch { grid-template-columns: 1fr; } }
.vp-switch-opt {
  display: flex; align-items: flex-start; gap: 13px; text-align: left;
  padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--radius);
  background: #fff; cursor: pointer; font: inherit; color: inherit;
  transition: border-color 0.12s, background-color 0.12s, box-shadow 0.12s;
}
.vp-switch-opt:hover { border-color: var(--accent-border); background: var(--accent-soft); }
.vp-switch-opt.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.vp-switch-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vp-switch-k {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; margin-top: 1px;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
  background: var(--panel-2); color: var(--ink-2);
}
.vp-switch-opt.active .vp-switch-k { background: var(--accent); color: #fff; }
.vp-switch-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.vp-switch-naam { font-size: 15.5px; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; }
.vp-switch-sub { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.vp-switch-kern { font-size: 12.5px; color: var(--body); line-height: 1.45; margin-top: 3px; }
.vp-switch-n {
  font-size: 11px; color: var(--muted); white-space: nowrap; flex-shrink: 0;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.vp-switch-opt.active .vp-switch-n { color: var(--accent-ink); }

/* =====================================================================
   5c. RUNS — runs-cockpit (src/runs.md)
   Bouwt, net als 5b, op de cockpit (blok 5) en de tokens (blok 1): de run-
   weergave is een .ck-kaart met .ck-head + .ck-master (links de stappen-index,
   met .vp-nr-badges) + .ck-detail (rechts lezen/overzicht, met .vp-tabs). Hier
   alleen de runs-EIGEN bouwstenen: de home-lijst, de context-balk boven de
   kaart, het plakkende leeshoofd, de bestand-kaarten en de gewicht-lijsten.
   ===================================================================== */

/* scrollbar-gutter reserveert de balk-ruimte → geen horizontale sprong als hij
   verschijnt/verdwijnt (geldt globaal; harmloos op pagina's zonder scroll). */
html { scrollbar-gutter: stable; }

/* ---- home: de runs-lijst (de run-kiezer; analoog aan de A/B-switch) ---- */
.runs2 .rl-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .7rem; padding: 0 1rem; max-width: 60rem; }
.runs2 .rl-count { font-size: .85rem; color: var(--ink-2); }
.runs2 .rl-filter { font-size: .78rem; color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; }
.runs2 .rl-filter select {
  font: inherit; font-size: .82rem; color: var(--ink); background: #fff;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: .22rem .5rem; cursor: pointer;
}
.runs2 .run-list { border-top: 1px solid var(--line); max-width: 60rem; }
.runs2 .rl-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0,1fr) 3.25rem 4.5rem 5.5rem 4.75rem;
  gap: 1rem; align-items: baseline; padding: .72rem 1rem;
}
.runs2 .rl-head { color: var(--muted); border-bottom: 1px solid var(--line); padding-top: 0; padding-bottom: .5rem; }
.runs2 .rl-h {
  display: flex; align-items: center; gap: .12rem; cursor: pointer; user-select: none;
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
}
.runs2 .rl-h.rl-num { justify-content: flex-end; }
.runs2 .rl-h:hover { color: var(--ink-2); }
.runs2 .rl-h.active { color: var(--ink); }
.runs2 .rl-chev { display: inline-flex; flex: none; opacity: 0; transition: opacity .12s ease, transform .12s ease; }
.runs2 .rl-chev.on { opacity: 1; }
.runs2 .rl-chev.asc { transform: rotate(180deg); }
.runs2 .rl-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.runs2 .run-row.sel { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.runs2 .rl-datum { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.runs2 .rl-titel { color: var(--ink); font-weight: 600; line-height: 1.25; }
.runs2 .rl-sub { display: block; font-size: .78rem; color: var(--muted); margin-top: .15rem; }
.runs2 .rl-sub .mono, .runs2 .mono { font-family: var(--mono); }
.runs2 .leeg-cel { color: var(--line-2); }
.runs2 .amber { color: var(--amber-ink); white-space: nowrap; }
.runs2 .sv-ob { color: var(--amber-ink); }

/* ---- run-weergave: kaart vult het scherm, panelen scrollen intern ---- */
/* de exacte hoogte zet JS (fitCockpit) op .runs2 op basis van de gemeten top-
   offset; deze calc is alleen een fallback vóór JS draait. */
.runs2.run-mode { display: flex; flex-direction: column; height: calc(100vh - 15rem); }
.runs2 .ck { height: auto; flex: 1; min-height: 0; margin: 0; }

/* context-balk boven de kaart: terug + run-titel/meta + vorige/volgende run */
.runs2 .rv-bar { display: flex; align-items: flex-start; gap: 1rem; margin: 0 0 .9rem; }
.runs2 .rv-back { flex: none; }
.runs2 .rv-id { flex: 1; min-width: 0; }
.runs2 .rv-title { margin: .1rem 0 .2rem; font-size: 1.4rem; font-weight: 650; letter-spacing: -.01em; color: var(--ink); line-height: 1.2; }
.runs2 .rv-meta { color: var(--muted); font-size: .82rem; }
.runs2 .rv-stats { color: var(--ink-2); }
.runs2 .rv-pager { display: inline-flex; align-items: center; gap: .4rem; flex: none; padding-top: .1rem; }
.runs2 .rv-pos { font-size: .82rem; color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 2.8rem; text-align: center; }

/* ---- links: stappen-index (.ck-master + .ck-row) — runs-eigen extra's ---- */
/* stap-titels mogen wrappen (anders dan de korte stations op Vertaalpipeline) */
.runs2 .ck-row.sr .ck-row-title { white-space: normal; align-items: flex-start; line-height: 1.35; }
.runs2 .ck-row.sr .vp-nr { margin-top: 1px; }
.runs2 .ck-row.geen { cursor: default; }
.runs2 .ck-row.geen:hover { background: none; }
.runs2 .ck-row.geen .ck-row-title { color: var(--muted); }
/* dunne gewicht-balk onder de stap (tokens of duur) */
.runs2 .rl-wbar { display: block; height: 4px; margin-top: 7px; border-radius: 2px; background: var(--line); overflow: hidden; }
.runs2 .rl-wbar > i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.runs2 .rl-wbar.ob > i { background: var(--amber-ink); }

/* ---- rechts: lezen (.ck-detail.ck-read) ---- */
/* in leesmodus levert de plakkende kop de bovenruimte → detail-top-padding weg */
.runs2 .ck-detail.ck-read { padding-top: 0; }
.runs2 .rd-sticky {
  position: sticky; top: 0; z-index: 6; background: #fff;
  padding: 16px 0 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.runs2 .rd-sticky .vp-tabs { margin: 10px 0 2px; }
.runs2 .rd-meta { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.runs2 .rd-body { margin-top: .2rem; }
.runs2 .rd-out { margin-top: .2rem; }

/* leestekst — zelfde proza-schaal als Vertaalpipeline (.ck-prose), bredere maat */
.runs2 .reading-body { max-width: 80ch; color: var(--body); line-height: 1.62; font-size: 13.5px; }
.runs2 .reading-body > :first-child { margin-top: 0; }
.runs2 .reading-body h1, .runs2 .reading-body h2, .runs2 .reading-body h3 { color: var(--ink); line-height: 1.3; margin: 1.4em 0 .5em; scroll-margin-top: 1rem; }
.runs2 .reading-body h1 { font-size: 16px; font-weight: 650; }
.runs2 .reading-body h2 { font-size: 15px; font-weight: 650; }
.runs2 .reading-body h3 { font-size: 14px; font-weight: 600; }
.runs2 .reading-body pre { background: var(--panel); border: 1px solid var(--line); padding: 10px 12px; border-radius: var(--radius-sm); overflow: auto; font-size: 11.5px; }
.runs2 .reading-body code { font-family: var(--mono); font-size: .85em; }
.runs2 .reading-body blockquote { margin: 1em 0; padding-left: 1rem; border-left: 2px solid var(--line-2); color: var(--ink-2); }
.runs2 .reading-empty { color: var(--muted); line-height: 1.6; max-width: 60ch; }

/* bestand-kaarten (Bestanden-tab): kopbalk + ingekaderde verbatim inhoud */
.runs2 .file-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 0 0 1.4rem; background: #fff; }
.runs2 .file-card:last-child { margin-bottom: .5rem; }
.runs2 .file-head { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .55rem .85rem; background: var(--panel); border-bottom: 1px solid var(--line); }
.runs2 .file-head .icon { color: var(--muted); flex: none; }
.runs2 .file-name { font-family: var(--mono); font-size: .85rem; font-weight: 600; color: var(--ink); flex: none; }
.runs2 .file-dir { font-family: var(--mono); font-size: .74rem; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runs2 .file-tag {
  margin-left: auto; flex: none; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-2); background: #fff; border: 1px solid var(--line-2); border-radius: 999px; padding: .12rem .55rem;
}
.runs2 .file-body { padding: 1rem 1.15rem 1.15rem; }
.runs2 .file-body > :first-child { margin-top: 0; }
.runs2 .file-body h1 { font-size: 1.1rem; } .runs2 .file-body h2 { font-size: 1rem; } .runs2 .file-body h3 { font-size: .92rem; }

/* ---- Input-tab: systeem-prompt-blok (opvouwbaar, boven de briefing) ---- */
.runs2 .sysprompt { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); margin: 0 0 1.25rem; overflow: hidden; }
.runs2 .sysprompt[open] { background: #fff; }
.runs2 .sysprompt-sum { display: flex; align-items: center; gap: .5rem; padding: .6rem .85rem; cursor: pointer; list-style: none; user-select: none; }
.runs2 .sysprompt-sum::-webkit-details-marker { display: none; }
.runs2 .sysprompt-sum:hover { background: var(--accent-soft); }
.runs2 .sysprompt-sum .icon { color: var(--muted); flex: none; }
.runs2 .sysprompt-lbl { font-weight: 600; font-size: .82rem; color: var(--ink); flex: none; }
.runs2 .sysprompt-who { font-family: var(--mono); font-size: .74rem; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 999px; padding: .1rem .5rem; flex: none; }
.runs2 .sysprompt-hint { font-size: .76rem; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runs2 .sysprompt-sum > .icon:last-child { margin-left: auto; flex: none; transition: transform .15s ease; }
.runs2 .sysprompt[open] .sysprompt-sum > .icon:last-child { transform: rotate(180deg); }
.runs2 .sysprompt-desc { margin: 0; padding: 0 1.15rem .35rem; border-top: 1px solid var(--line); padding-top: .8rem; color: var(--ink-2); font-size: .82rem; line-height: 1.55; }
.runs2 .sysprompt-body { padding: .4rem 1.15rem .35rem; }
.runs2 .sysprompt-foot { margin: 0; padding: .6rem 1.15rem 1rem; color: var(--muted); font-size: .72rem; line-height: 1.5; border-top: 1px solid var(--line); }
.runs2 .rd-input { max-width: 80ch; }

/* ---- rechts: overzicht (gewicht per fase) ---- */
.runs2 .ov-lead { color: var(--ink-2); font-size: .95rem; line-height: 1.6; margin: .1rem 0 1.5rem; max-width: 52ch; }
.runs2 .ov-list { max-width: 42rem; }
.runs2 .ov-row { display: grid; grid-template-columns: minmax(0,1fr) 11rem 7.5rem; gap: 1.1rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.runs2 .ov-naam { color: var(--ink); font-weight: 500; font-size: .95rem; }
.runs2 .ov-bar { height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.runs2 .ov-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.runs2 .ov-num { text-align: right; color: var(--ink-2); font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 900px) {
  .runs2.run-mode { height: auto !important; display: block; }
  .runs2 .ck { height: auto; }
  .runs2 .ck-body { flex-direction: column; }
  .runs2 .ck-master { width: 100%; max-height: 260px; border-right: none; border-bottom: 1px solid var(--line); }
  .runs2 .ck-detail.ck-read { padding-top: 16px; }
  .runs2 .rd-sticky { position: static; }
  .runs2 .rv-bar { flex-wrap: wrap; }
  .runs2 .rl-row { grid-template-columns: 4rem 1fr auto; }
  .runs2 .rl-row .rl-num:nth-child(n+4), .runs2 .rl-head .rl-h.rl-num:nth-child(n+4) { display: none; }
}

/* =====================================================================
   6. LEGACY — compat voor Dossiers/Verdieping (sefkat, pahl, roadmap,
      docs, activiteit, architectuur, systeem) en de oude zes-pagina-markup
      tot de bouwers klaar zijn.
      VERBODEN voor de zes herbouw-pagina's. Wordt opgeruimd bij de
      latere herbouw van de legacy-pagina's.
   ===================================================================== */
:root {
  /* oude semantische kleurnamen → mechanisch op de nieuwe tokens */
  --primary: var(--accent);
  --primary-weak: var(--accent-soft);
  --success: var(--green-ink);
  --success-weak: var(--t-green);
  --warning: var(--amber-ink);
  --warning-weak: var(--t-amber);
  --danger: var(--rose-ink);
  --danger-weak: var(--t-rose);
}

/* stats-regel */
.stats {
  display: flex; gap: 24px; margin: 8px 0 24px 0;
  color: var(--body); font-size: 13px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.stats strong { color: var(--ink); font-weight: 600; font-size: 1.05em; margin-right: 4px; font-variant-numeric: tabular-nums; }

/* oude card-extras */
.card .stamp { color: var(--muted); font-size: 11.5px; font-family: var(--mono); margin-top: 8px; display: block; }
.card .path { font-family: var(--mono); font-size: 11.5px; color: var(--muted); display: block; margin-top: 6px; background: transparent; border: none; padding: 0; }
td.stamp, .stamp { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* oude pill-varianten — neutraal gemaakt (kleurruis weg) */
.pill.script { background: var(--panel-2); color: var(--ink-2); font-family: var(--mono); font-size: 11.5px; }
.pill.agent  { background: var(--accent-soft); color: var(--accent-ink); font-family: var(--mono); font-size: 11.5px; }
.pill.table  { background: var(--panel-2); color: var(--ink-2); font-family: var(--mono); font-size: 11.5px; }
.pill.more   { background: transparent; color: var(--muted); border: 1px dashed var(--line-2); }

/* oude status-pills — mechanisch op de vier-groepen-tinten */
.status-pill {
  display: inline-block;
  font-size: 11.5px; font-weight: 500;
  padding: 2px 10px; border-radius: 999px;
  background: var(--panel-2); color: var(--body);
}
.status-pill.vertaald   { background: var(--t-green); color: var(--green-ink); }
.status-pill.in_review  { background: var(--accent-soft); color: var(--accent-ink); }
.status-pill.wachtend   { background: var(--panel-2); color: var(--body); }
.status-pill.onvolledig { background: var(--t-amber); color: var(--amber-ink); }
.status-pill.schedule   { background: var(--panel-2); color: var(--body); }
.status-pill.translate  { background: var(--accent-soft); color: var(--accent-ink); }
.status-pill.read       { background: var(--accent-soft); color: var(--accent-ink); }
.status-pill.review     { background: var(--t-amber); color: var(--amber-ink); }
.status-pill.publish    { background: var(--t-green); color: var(--green-ink); }
.status-pill.live       { background: var(--green-ink); color: #fff; }

/* oude funnel-balk — vier-groepen-tinten */
.funnel-bar { display: flex; height: 14px; border-radius: 5px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.funnel-bar > div { height: 100%; min-width: 2px; }
.funnel-seg-schedule  { background: var(--line-2); }
.funnel-seg-translate { background: var(--accent-border); }
.funnel-seg-read      { background: var(--accent-border); }
.funnel-seg-review    { background: var(--b-amber); }
.funnel-seg-publish   { background: var(--b-green); }
.funnel-seg-live      { background: var(--green-ink); }

/* model- en doctrine-chips — kleurloos gemaakt (mono muted) */
.model-chip, .doctrine-chip {
  display: inline-block;
  font-size: 11px; font-weight: 500;
  padding: 1px 7px; border-radius: 999px;
  font-family: var(--mono);
  background: var(--panel-2); color: var(--ink-2);
}
.model-chip.model-opus, .model-chip.model-sonnet, .model-chip.model-haiku, .model-chip.model-fable,
.doctrine-chip.gather, .doctrine-chip.oordeel, .doctrine-chip.produceren,
.doctrine-chip.check, .doctrine-chip.boek-vertaler {
  background: var(--panel-2); color: var(--ink-2);
}

/* bestandsnaam-pills */
.fpill {
  display: inline-block;
  background: var(--panel-2); color: var(--body);
  padding: 0 6px; border-radius: 5px;
  font-size: 11px; margin: 1px 2px;
  font-family: var(--mono);
}

/* matrix (presence dots) */
.matrix-wrap { overflow-x: auto; margin: 8px 0 28px 0; padding-top: 8px; }
.matrix {
  border-collapse: separate; border-spacing: 3px;
  font-size: 12.5px; background: transparent;
  width: auto !important; margin: 0; table-layout: fixed;
}
.matrix colgroup col.label-col { width: 140px; }
.matrix colgroup col.cell-col { width: 28px; }
.matrix thead th {
  padding: 0; border: none; background: transparent;
  font-weight: 500; color: var(--body); font-size: 11.5px;
  text-transform: none; letter-spacing: 0;
  height: 130px; vertical-align: bottom; overflow: visible;
}
.matrix thead th.corner { background: transparent; width: 140px; }
.matrix thead th .rotated-wrap { width: 28px; height: 130px; position: relative; overflow: visible; margin: 0 auto; }
.matrix .rotated {
  display: block; white-space: nowrap; font-family: var(--mono); line-height: 1;
  position: absolute; bottom: 4px; left: 50%;
  transform: rotate(-60deg) translate(0, 0); transform-origin: left bottom;
}
.matrix tbody td { padding: 0; background: transparent; border: none; height: 28px; width: 28px; }
.matrix tbody tr:hover { background: transparent; }
.matrix .row-label {
  text-align: left; white-space: nowrap; font-family: var(--mono);
  color: var(--ink-2); font-size: 12px;
  padding-right: 12px; padding-left: 0; width: 140px;
  overflow: hidden; text-overflow: ellipsis;
}
.matrix .cell {
  width: 28px; height: 28px; padding: 0;
  color: transparent; text-align: center;
  border: 1px solid var(--line); background: #fff; border-radius: 4px;
}
.matrix .cell.yes { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; line-height: 28px; }

/* fabriek-tabel (.ft) — grid-tabel van de oude pagina's */
.ft {
  display: grid;
  grid-template-columns: var(--ft-cols);
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 13.5px;
  margin: 8px 0 24px 0;
}
.ft-row { display: contents; }
.ft-row > div {
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
  min-width: 0; overflow-wrap: anywhere;
  color: var(--ink-2);
  align-self: stretch;
}
.ft-head > div {
  font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted);
  padding: 8px 13px;
  background: transparent;
  border-bottom: 1px solid var(--line);
}
.ft-row:last-child > div { border-bottom: none; }
.ft-row:not(.ft-head):hover > div { background: var(--panel); }
.ft-row.hl-review > div { background: var(--t-amber); }
.ft-row.hl-vertaald > div { background: var(--t-green); }
.ft-row.hl-onvolledig > div { background: var(--t-amber); }
.ft .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ft .stamp { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ft .pills { display: flex; flex-wrap: wrap; gap: 3px; align-items: flex-start; line-height: 1.4; }
.ft .title { color: var(--ink); font-weight: 500; line-height: 1.4; }
.ft .desc { color: var(--body); font-size: 12.5px; line-height: 1.5; margin-top: 2px; }
.ft code { background: transparent; border: none; padding: 0; color: var(--ink); font-size: 0.9em; }

/* utility (oude pagina's) */
.muted { color: var(--muted); }
.empty { color: var(--muted); padding: 12px 0; }
.warn strong { color: var(--amber-ink); }

/* details/summary — alleen in de content, niet in de sidebar */
#observablehq-main details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 8px 0 24px 0;
}
#observablehq-main details summary {
  cursor: pointer;
  font-weight: 500; color: var(--ink-2); font-size: 13.5px;
  list-style: none;
  padding-left: 18px;
  position: relative;
}
#observablehq-main details summary::before {
  content: "›";
  position: absolute; left: 2px;
  color: var(--muted);
  transition: transform 0.15s ease;
}
#observablehq-main details[open] summary::before { transform: rotate(90deg); }
#observablehq-main details[open] summary { margin-bottom: 10px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }

/* progress-balkje */
.bar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--panel-2); }
.bar > div { height: 100%; }
.bar-empty { text-align: center; color: var(--muted); font-size: 11px; line-height: 6px; width: 100%; }