/* ============================================================================
   gen-ui.css  |  generative UI voor companion-canvas en chat-rail
   ----------------------------------------------------------------------------
   Sessies schrijven lichte HTML met tags en korte classes. Deze stylesheet
   maakt er de presentatie van. Nooit inline styles in de output.

   WRAPPER
     .gen            canvas-inhoud (in een .card of los op het canvas)
     .gen.gen-rail   rail-bericht (kleinere schaal, minder marge, platter)

   ELEMENTEN (geen class nodig)
     h1 h2 h3 h4  p  p.lead  a  strong  em  mark  small  hr  br
     ul ol (ook genest)   ul.check > li.done/.todo   (afvinklijst)
     blockquote (+ <cite> of <footer>)   .quote (grote pull-quote, + <footer>)
     table thead tbody th td   td.num (rechts, tabular)   table.sticky (kop plakt)
     .table (wrapper: horizontaal scrollbaar, cellen wikkelen niet)
     code   pre   pre[data-lang="bash"]   pre[data-file="pad/naam.py"]
     kbd   figure > img + figcaption   img   details > summary
     dl dt dd (plain)   time (mono)

   COMPONENTEN
     .callout .info|.ok|.warn|.err       eerste <b> of <strong> = titel
     .block                              rustig paneel (vlak met rand)
     .tldr                               samenvatting bovenaan, label "In het kort"
     .stats > .stat > .num .lbl .delta.up|.down
     .kv (dl) dt dd                      sleutel-waarde rijen
     .steps (ol) > li.done|.now|.todo    genummerd stappenplan
     .timeline (ul) > li.done|.now > time + tekst
     .grid .g2|.g3                       responsive kolommen (rail: altijd 1)
     .compare > div > h4 + inhoud        voor/na, twee kolommen
     .diff (pre) > del|ins|span          regels: weg, nieuw, context
     .badge .ok|.warn|.err|.info         kleine status-tag (11px)
     .progress > span + <progress>       voortgang zonder inline style
        <progress value="62" max="100" class="ok">
     .file                               pad-chip (inline)
     .meta                               mono meta-regel (datum, id, pad)
     .choices > .actie / .actie.stil     rij keuzeknoppen met data-action

   ACTIVITEIT (buiten .gen; de host bouwt de DOM, zie template applyCards)
     section.gen-log[data-tab] (.dicht = lijst ingeklapt, [hidden] = leeg)
       > button.gen-log-kop[aria-expanded] > .gen-log-titel + .gen-log-n
       > .gen-log-lijst > details.gen-log-rij[data-id][data-ts]
           > summary > .gen-log-vink + .gen-log-naam + .gen-log-zin + time
           > .gen-log-kaart > .card (de originele kaart, knoppen uit)

   Kleur komt uit --g-* en valt terug op de host-tokens van beide families
   (werkbank-master --text-1/--bg-1/--line, companion-template --text/--card/
   --hairline). Geen globale selectors buiten .gen.
   ========================================================================== */

.gen {
  /* -- tokens: kleur ----------------------------------------------------- */
  --g-text:    var(--text-1, var(--text, #eef4fb));
  --g-text-2:  var(--text-2, var(--text-soft, #aebfd3));
  /* meta-niveau 15% naar tekst-1 getrokken: claude-dark's --text-mute haalt op zichzelf
     geen 4,5:1 (3,95 op de kaart), zo wel; onder navy blijft het rustig (5,9:1). */
  --g-text-3:  color-mix(in srgb, var(--text-3, var(--text-mute, #8aa0b8)) 85%, var(--g-text));
  --g-bg:      var(--bg-1, var(--card, #092640));
  --g-bg-2:    var(--bg-2, var(--card-2, #0d3050));
  --g-bg-3:    var(--bg-3, var(--rail-card, #123a5e));
  --g-bg-code: var(--bg-0, var(--rail, #061a2e));
  --g-line-soft:   var(--line-soft, var(--hairline, rgba(255,255,255,.08)));
  --g-line:        var(--line, var(--hairline, rgba(255,255,255,.14)));
  --g-line-strong: var(--line-strong, rgba(255,255,255,.34));
  --g-accent:      var(--accent-soft, var(--accent, #2bb3f0));
  --g-accent-fill: var(--accent-fill, var(--clay, var(--accent, #1670ad)));
  --g-on-fill:     var(--on-fill, var(--accent-contrast, #1f1e1d));
  --g-accent-bg:   var(--accent-bg, color-mix(in srgb, var(--g-accent) 14%, transparent));
  --g-ok:   var(--ok, #45c98a);
  --g-warn: var(--warn, #f2b23c);
  --g-err:  var(--err, var(--open, #f08a7a));
  --g-ok-bg:   var(--ok-soft,   color-mix(in srgb, var(--g-ok) 14%, transparent));
  --g-warn-bg: var(--warn-soft, color-mix(in srgb, var(--g-warn) 14%, transparent));
  --g-err-bg:  var(--err-soft,  color-mix(in srgb, var(--g-err) 14%, transparent));

  /* -- tokens: vorm en type ---------------------------------------------- */
  --g-r:     var(--r-panel, var(--r-card, 8px));
  --g-r-btn: var(--r-btn, 6px);
  --g-r-tag: var(--r-tag, 4px);
  --g-sans:    var(--sans, 'Author', ui-sans-serif, system-ui, sans-serif);
  --g-display: var(--display, var(--g-sans));
  --g-mono:    var(--mono, "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace);
  --g-w-strong: var(--w-max, 500);
  --g-ease: var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));

  /* -- schaal: canvas ---------------------------------------------------- */
  --g-fs: 16px;        --g-lh: 1.65;
  --g-fs-lead: 18px;
  --g-fs-h1: 28px;     --g-fs-h2: 22px;   --g-fs-h3: 17px;   --g-fs-h4: 15px;
  --g-fs-ui: 14px;     --g-fs-meta: 12px; --g-fs-micro: 11px;
  --g-fs-code: 13.5px; --g-fs-table: 14px; --g-fs-quote: 22px; --g-fs-num: 28px;
  --g-flow: 16px;      --g-flow-s: 10px;
  --g-gap-h1: 40px;    --g-gap-h2: 36px;  --g-gap-h3: 28px;  --g-gap-h4: 20px;
  --g-pad-y: 16px;     --g-pad-x: 18px;   --g-pad: var(--g-pad-y) var(--g-pad-x);
  --g-pad-s: 12px 14px;
  --g-gap: 16px;       --g-knop-h: 36px;
  --g-measure: 72ch;

  container-type: inline-size;
  font-family: var(--g-sans);
  font-size: var(--g-fs);
  line-height: var(--g-lh);
  color: var(--g-text-2);
  font-kerning: normal;
  overflow-wrap: break-word;
  min-width: 0;
}

/* ============================================================================
   RAIL: lichte variant. Alleen de schaal en een paar structuren veranderen.
   ========================================================================== */
.gen.gen-rail {
  --g-fs: 15px;        --g-lh: 1.6;
  --g-fs-lead: 17px;
  /* Trap tussen de niveaus, niet vier maten die op elkaar lijken. In de oude
     schaal was h3 even groot als de lopende tekst (15px) en h2 maar één pixel
     groter; daardoor las een lang bericht als één lap. Nu 24 / 19 / 16 / 14
     tegen 15px body, dus elk niveau is op afstand herkenbaar zonder dat een
     kop de kolom van 480px opeet (Nico, 15 sep 2026). */
  --g-fs-h1: 24px;     --g-fs-h2: 19px;   --g-fs-h3: 16px;   --g-fs-h4: 14px;
  --g-fs-code: 12.5px; --g-fs-table: 13px; --g-fs-quote: 18px; --g-fs-num: 24px;
  /* Contrast omhoog: de zachte tekstkleuren worden 45% naar de hoofdtekst
     getrokken. Hue blijft, alleen het verschil met de achtergrond groeit, want
     meta-regels en tabelcellen vielen weg tegen de rail-achtergrond. */
  --g-text-2: color-mix(in srgb, var(--text-2, var(--text-soft, #aebfd3)) 55%, var(--g-text));
  --g-text-3: color-mix(in srgb, var(--text-3, var(--text-mute, #8aa0b8)) 55%, var(--g-text));
  --g-line: color-mix(in srgb, var(--line, var(--hairline, #ffffff29)) 70%, var(--g-text));
  /* Meer lucht tussen blokken: bij 10px liepen twee alinea's optisch in elkaar
     over en las een bericht als één lap, ook met de nieuwe koppenschaal
     (Nico, 16 sep 2026). De witruimte doet hier evenveel werk als de maat. */
  --g-flow: 14px;      --g-flow-s: 8px;
  --g-gap-h1: 24px;    --g-gap-h2: 22px;  --g-gap-h3: 18px;  --g-gap-h4: 14px;
  --g-pad-y: 10px;     --g-pad-x: 12px;   --g-pad-s: 8px 10px;
  --g-gap: 8px;        --g-knop-h: 32px;
  --g-measure: none;
}

/* ============================================================================
   KOPPEN EN TEKST
   ========================================================================== */
.gen :where(h1, h2, h3, h4) {
  color: var(--g-text);
  font-weight: var(--g-w-strong);
  text-wrap: balance;
  margin: 0;
}
.gen :where(h1, h2, h3) { font-family: var(--g-display); }
.gen :where(h1) { font-size: var(--g-fs-h1); line-height: 1.2;  letter-spacing: -0.015em; }
.gen :where(h2) { font-size: var(--g-fs-h2); line-height: 1.25; letter-spacing: -0.01em; }
.gen :where(h3) { font-size: var(--g-fs-h3); line-height: 1.35; }
.gen :where(h4) { font-size: var(--g-fs-h4); line-height: 1.4; color: var(--g-text-2); }

.gen :where(p) { margin: 0; }
.gen :where(p.lead) { font-size: var(--g-fs-lead); line-height: 1.55; color: var(--g-text); }
.gen :where(strong, b) { font-weight: var(--g-w-strong); color: var(--g-text); }
.gen :where(em, i) { font-style: italic; }
.gen :where(small) { font-size: var(--g-fs-ui); color: var(--g-text-3); }
.gen :where(mark) {
  background: var(--g-accent-bg); color: var(--g-text);
  padding: 0 3px; border-radius: 2px;
}
.gen :where(a) {
  color: var(--g-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--g-accent) 40%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 120ms ease;
}
.gen :where(a):hover { text-decoration-color: var(--g-accent); }
.gen :where(hr) {
  border: 0; height: 1px; background: var(--g-line);
  margin-block: calc(var(--g-flow) * 1.5);
}
.gen :where(time) { font-family: var(--g-mono); font-size: var(--g-fs-meta); color: var(--g-text-3); }
.gen :where(.meta) {
  font-family: var(--g-mono); font-size: var(--g-fs-meta); line-height: 1.5;
  color: var(--g-text-3);
}

/* ============================================================================
   LIJSTEN
   ========================================================================== */
.gen :where(ul, ol) { margin: 0; padding-left: 1.4em; }
.gen :where(li) { margin: 0; }
.gen :where(li + li) { margin-top: 5px; }
.gen :where(li > ul, li > ol) { margin-top: 5px; }
.gen :where(ul) { list-style: none; }
.gen :where(ul > li) { position: relative; }
.gen :where(ul > li)::before {
  content: ""; position: absolute; left: -1.05em; top: calc(0.5em * var(--g-lh) - 2.5px);
  width: 5px; height: 5px; border-radius: 50%; background: var(--g-text-3);
}
.gen :where(ul ul > li)::before { width: 6px; height: 6px; box-sizing: border-box; top: calc(0.5em * var(--g-lh) - 3px); background: transparent; border: 1px solid var(--g-text-3); left: -1.1em; }
.gen :where(ol) { list-style: decimal; }
.gen :where(ol > li)::marker { color: var(--g-text-3); font-variant-numeric: tabular-nums; }

/* afvinklijst */
.gen :where(ul.check) { padding-left: 0; }
.gen :where(ul.check > li) { padding-left: 28px; }
.gen :where(ul.check > li)::before {
  content: ""; left: 0; top: calc(0.5em * var(--g-lh) - 8px);
  width: 16px; height: 16px; border-radius: var(--g-r-tag);
  border: 1px solid var(--g-line-strong); background: transparent;
}
.gen :where(ul.check > li.done) { color: var(--g-text-3); text-decoration: line-through; text-decoration-color: var(--g-line-strong); }
.gen :where(ul.check > li.done)::before {
  border-color: var(--g-ok); background: var(--g-ok-bg);
  content: "\2713"; color: var(--g-ok); font-size: 11px; line-height: 14px; text-align: center; font-weight: 700;
}

/* ============================================================================
   CITATEN
   ========================================================================== */
.gen :where(blockquote) {
  margin: 0; padding: 2px 0 2px 18px;
  border-left: 1px solid var(--g-line-strong);
  color: var(--g-text-2);
}
.gen :where(blockquote cite, blockquote footer, .quote cite, .quote footer) {
  display: block; font-style: normal;
  font-family: var(--g-mono); font-size: var(--g-fs-meta); color: var(--g-text-3);
  margin-top: 6px;
}
.gen :where(.quote) {
  margin: 0; padding: 14px 0; border-left: 0;
  border-top: 1px solid var(--g-line); border-bottom: 1px solid var(--g-line);
  font-family: var(--g-display); font-size: var(--g-fs-quote); line-height: 1.4;
  color: var(--g-text); letter-spacing: -0.01em; text-wrap: balance;
}
.gen :where(.quote em) { font-style: normal; color: var(--g-accent); }

/* ============================================================================
   TABELLEN
   ========================================================================== */
.gen :where(table) {
  width: 100%; border-collapse: collapse;
  font-size: var(--g-fs-table); line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.gen :where(th, td) {
  text-align: left; vertical-align: top;
  padding: 9px 12px;
  border-bottom: 1px solid var(--g-line-soft);
}
.gen :where(th:first-child, td:first-child) { padding-left: 0; }
.gen :where(th:last-child, td:last-child)   { padding-right: 0; }
.gen :where(th) {
  color: var(--g-text-3); font-weight: var(--g-w-strong); font-size: var(--g-fs-ui);
  border-bottom: 1px solid var(--g-line);
  white-space: nowrap;
}
.gen :where(td) { color: var(--g-text-2); }
.gen :where(td strong, td b) { color: var(--g-text); }
.gen :where(td.num, th.num) { text-align: right; font-family: var(--g-mono); font-size: calc(var(--g-fs-table) - 1px); }
.gen :where(tbody tr:last-child td) { border-bottom: 0; }
.gen :where(tbody tr) { transition: background-color 120ms ease; }
@media (hover: hover) { .gen :where(tbody tr):hover { background: var(--g-bg-2); } }
.gen :where(table.sticky thead th) { position: sticky; top: 0; background: var(--g-bg); z-index: 1; }
.gen :where(.table) { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.gen :where(.table th, .table td) { white-space: nowrap; }
.gen :where(.table table) { min-width: 100%; width: max-content; }

/* ============================================================================
   CODE
   ========================================================================== */
.gen :where(code, kbd, samp) { font-family: var(--g-mono); font-size: 0.875em; }
.gen :where(:not(pre) > code) {
  background: var(--g-bg-2); color: var(--g-text);
  border: 1px solid var(--g-line-soft); border-radius: var(--g-r-tag);
  padding: 1px 6px;
}
.gen :where(pre) {
  margin: 0; position: relative;
  background: var(--g-bg-code); color: var(--g-text-2);
  border: 1px solid var(--g-line-soft); border-radius: var(--g-r);
  padding: var(--g-pad);
  font-family: var(--g-mono); font-size: var(--g-fs-code); line-height: 1.55;
  overflow-x: auto; tab-size: 2; max-width: 100%;
}
.gen :where(pre code) { font-size: inherit; background: none; border: 0; padding: 0; color: inherit; }
.gen :where(pre[data-lang]) { padding-right: 4.5em; }
.gen :where(pre[data-lang])::after {
  content: attr(data-lang); position: absolute; top: 8px; right: 12px;
  font-size: var(--g-fs-micro); letter-spacing: .04em; text-transform: uppercase;
  color: var(--g-text-3); line-height: 1;
}
.gen :where(pre[data-file]) { padding-top: calc(var(--g-fs-meta) * 1.5 + 22px); }
.gen :where(pre[data-file])::before {
  content: attr(data-file); position: absolute; left: 0; right: 0; top: 0;
  padding: 7px 14px; border-bottom: 1px solid var(--g-line-soft);
  font-size: var(--g-fs-meta); line-height: 1.5; color: var(--g-text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gen :where(kbd) {
  display: inline-block; font-size: var(--g-fs-meta); line-height: 1.3;
  padding: 1px 6px; color: var(--g-text);
  background: var(--g-bg-2); border: 1px solid var(--g-line-strong); border-bottom-width: 2px;
  border-radius: var(--g-r-tag);
}
.gen :where(.file) {
  display: inline-block; vertical-align: baseline;
  font-family: var(--g-mono); font-size: var(--g-fs-meta); line-height: 1.5;
  color: var(--g-text-2); background: var(--g-bg-2);
  border: 1px solid var(--g-line-soft); border-radius: var(--g-r-tag);
  padding: 1px 7px; overflow-wrap: anywhere;
}

/* ============================================================================
   BEELD, DETAILS, DEFINITIES
   ========================================================================== */
.gen :where(img, video) { display: block; max-width: 100%; height: auto; border-radius: var(--g-r); border: 1px solid var(--g-line-soft); }
.gen :where(figure) { margin: 0; }
.gen :where(figcaption) { margin-top: 8px; font-size: var(--g-fs-ui); color: var(--g-text-3); }
.gen :where(details) { border: 1px solid var(--g-line); border-radius: var(--g-r); padding: 0 16px; }
.gen :where(details > *) { max-width: var(--g-measure); }
.gen :where(summary) {
  list-style: none; cursor: pointer; margin: 0 -16px; padding: 11px 16px 11px 38px; position: relative;
  color: var(--g-text); font-weight: var(--g-w-strong); user-select: none;
}
.gen :where(summary)::-webkit-details-marker { display: none; }
.gen :where(summary)::before {
  content: ""; position: absolute; left: 16px; top: calc(50% - 4px);
  width: 6px; height: 6px; border-right: 1.5px solid var(--g-text-3); border-bottom: 1.5px solid var(--g-text-3);
  transform: rotate(-45deg); transition: transform 120ms var(--g-ease);
}
.gen :where(details[open] > summary)::before { transform: rotate(45deg); top: calc(50% - 6px); }
.gen :where(details[open] > summary) { border-bottom: 1px solid var(--g-line-soft); }
.gen :where(details[open] > summary + *) { margin-top: 12px; }
.gen :where(details > :last-child:not(summary)) { margin-bottom: 14px; }
.gen :where(summary):focus-visible { outline: 2px solid var(--g-accent); outline-offset: -2px; border-radius: var(--g-r); }

.gen :where(dl) { margin: 0; }
.gen :where(dt) { color: var(--g-text); font-weight: var(--g-w-strong); }
.gen :where(dd) { margin: 2px 0 0; }
.gen :where(dd + dt) { margin-top: 10px; }

/* sleutel-waarde rijen */
.gen :where(.kv) { display: grid; grid-template-columns: minmax(96px, max-content) 1fr; column-gap: 20px; }
.gen :where(.kv dt, .kv dd) { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--g-line-soft); }
.gen :where(.kv dt) { color: var(--g-text-3); font-weight: 400; font-size: var(--g-fs-ui); line-height: calc(var(--g-fs) * var(--g-lh)); }
.gen :where(.kv dd) { color: var(--g-text); overflow-wrap: anywhere; }
.gen :where(.kv dt:nth-last-of-type(1), .kv dd:last-child) { border-bottom: 0; }

/* ============================================================================
   VLAKKEN: block, callout, tldr
   ========================================================================== */
.gen :where(.block) {
  background: var(--g-bg-2); border: 1px solid var(--g-line);
  border-radius: var(--g-r); padding: var(--g-pad);
}
.gen :where(.callout) {
  --c: var(--g-accent); --c-bg: var(--g-accent-bg);
  background: var(--c-bg);
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-radius: var(--g-r); padding: var(--g-pad);
  color: var(--g-text-2);
}
.gen :where(.callout.ok)   { --c: var(--g-ok);   --c-bg: var(--g-ok-bg); }
.gen :where(.callout.warn) { --c: var(--g-warn); --c-bg: var(--g-warn-bg); }
.gen :where(.callout.err)  { --c: var(--g-err);  --c-bg: var(--g-err-bg); }
.gen :where(.callout > b:first-child, .callout > strong:first-child, .callout > p:first-child > b:first-child, .callout > p:first-child > strong:first-child) {
  display: block; color: var(--c); margin-bottom: 2px;
}
.gen :where(.tldr) {
  background: var(--g-bg-2); border: 1px solid var(--g-line);
  border-radius: var(--g-r); padding: var(--g-pad);
  color: var(--g-text);
}
.gen :where(.tldr)::before {
  content: "In het kort"; display: block; margin-bottom: 6px;
  font-size: var(--g-fs-micro); letter-spacing: .04em; text-transform: uppercase; line-height: 1.4;
  color: var(--g-text-3); font-weight: var(--g-w-strong);
}

/* ============================================================================
   CIJFERS: stats, progress, badge
   ========================================================================== */
.gen :where(.stats) {
  display: grid; gap: var(--g-gap);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.gen :where(.stat) {
  border: 1px solid var(--g-line-soft); border-radius: var(--g-r);
  padding: var(--g-pad-s); min-width: 0;
}
.gen :where(.stat .num) {
  display: block; font-size: var(--g-fs-num); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--g-text); font-weight: var(--g-w-strong); font-variant-numeric: tabular-nums;
}
.gen :where(.stat .lbl) { display: block; margin-top: 4px; font-size: var(--g-fs-ui); color: var(--g-text-3); line-height: 1.3; }
.gen :where(.stat .delta) { display: inline-block; margin-top: 6px; font-family: var(--g-mono); font-size: var(--g-fs-meta); color: var(--g-text-3); }
.gen :where(.delta.up)   { color: var(--g-ok); }
.gen :where(.delta.down) { color: var(--g-err); }

.gen :where(progress) {
  appearance: none; -webkit-appearance: none;
  display: block; width: 100%; height: 6px; border: 0; border-radius: 3px;
  background: var(--g-bg-3); color: var(--g-accent); overflow: hidden;
}
.gen :where(progress)::-webkit-progress-bar { background: var(--g-bg-3); border-radius: 3px; }
.gen :where(progress)::-webkit-progress-value { background: var(--g-accent); border-radius: 3px; }
.gen :where(progress)::-moz-progress-bar { background: var(--g-accent); border-radius: 3px; }
.gen :where(progress.ok)::-webkit-progress-value, .gen :where(progress.ok)::-moz-progress-bar { background: var(--g-ok); }
.gen :where(progress.warn)::-webkit-progress-value, .gen :where(progress.warn)::-moz-progress-bar { background: var(--g-warn); }
.gen :where(.progress) { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; }
.gen :where(.progress > span) { font-size: var(--g-fs-ui); color: var(--g-text-2); }
.gen :where(.progress > span + span, .progress > .num) { font-family: var(--g-mono); font-size: var(--g-fs-meta); color: var(--g-text-3); }
.gen :where(.progress > progress) { grid-column: 1 / -1; }
.gen :where(.progress + .progress) { margin-top: var(--g-flow-s); }

.gen :where(.badge) {
  display: inline-block; vertical-align: 1px;
  font-size: var(--g-fs-micro); line-height: 16px; font-weight: var(--g-w-strong);
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  padding: 1px 7px; border-radius: var(--g-r-tag);
  background: var(--g-bg-3); color: var(--g-text-2);
  box-shadow: inset 0 0 0 1px var(--g-line-soft);
}
.gen :where(.badge.info, .badge.ok, .badge.warn, .badge.err) { box-shadow: none; }
.gen :where(.badge.info) { background: var(--g-accent-bg); color: var(--g-accent); }
.gen :where(.badge.ok)   { background: var(--g-ok-bg);   color: var(--g-ok); }
.gen :where(.badge.warn) { background: var(--g-warn-bg); color: var(--g-warn); }
.gen :where(.badge.err)  { background: var(--g-err-bg);  color: var(--g-err); }
.gen :where(h1, h2, h3) > .badge { margin-left: 8px; vertical-align: middle; }

/* ============================================================================
   VOLGORDE: steps, timeline
   ========================================================================== */
.gen :where(ol.steps) { list-style: none; padding: 0; counter-reset: gstep; }
.gen :where(.steps > li) {
  counter-increment: gstep; position: relative; padding-left: 40px;
  padding-block: 8px; max-width: none;
}
.gen :where(.steps > li + li) { margin-top: 0; }
.gen :where(.steps > li)::before {
  content: counter(gstep); position: absolute; left: 0; top: calc(8px + 0.5em * var(--g-lh) - 12px);
  width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box;
  display: grid; place-items: center;
  font-family: var(--g-mono); font-size: var(--g-fs-meta); line-height: 1;
  color: var(--g-text-3); border: 1px solid var(--g-line-strong); background: transparent;
}
.gen :where(.steps > li)::after {
  content: ""; position: absolute; left: 11.5px; width: 1px;
  top: calc(8px + 0.5em * var(--g-lh) + 14px); bottom: calc(-0.5em * var(--g-lh) + 0px);
  background: var(--g-line-soft);
}
.gen :where(.steps > li:last-child)::after { display: none; }
.gen :where(.steps > li.done)::before { content: "\2713"; color: var(--g-ok); border-color: var(--g-ok); background: var(--g-ok-bg); font-weight: 700; }
.gen :where(.steps > li.now)::before  { color: var(--g-accent); border-color: var(--g-accent); background: var(--g-accent-bg); }
.gen :where(.steps > li.done) { color: var(--g-text-3); }
.gen :where(.steps > li.done strong) { color: var(--g-text-2); }
.gen :where(.steps > li.todo) { color: var(--g-text-3); }
.gen :where(.steps > li > strong:first-child, .steps > li > b:first-child) { display: block; }
.gen :where(.steps > li.now > strong:first-child) { color: var(--g-text); }

.gen :where(ul.timeline) { list-style: none; padding-left: 24px; }
.gen :where(.timeline > li) { position: relative; padding-block: 2px; max-width: none; }
.gen :where(.timeline > li + li) { margin-top: 12px; }
.gen :where(.timeline > li)::before {
  content: ""; position: absolute; left: -24px; top: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--g-bg); border: 1px solid var(--g-line-strong); box-sizing: border-box;
}
.gen :where(.timeline > li)::after {
  content: ""; position: absolute; left: -20.5px; top: 18px; bottom: -14px; width: 1px;
  background: var(--g-line);
}
.gen :where(.timeline > li:last-child)::after { display: none; }
.gen :where(.timeline > li.done)::before { background: var(--g-ok); border-color: var(--g-ok); }
.gen :where(.timeline > li.now)::before  { background: var(--g-accent); border-color: var(--g-accent); }
.gen :where(.timeline > li > time) { display: block; margin-bottom: 2px; }

/* ============================================================================
   INDELING: grid, compare, diff
   ========================================================================== */
.gen :where(.grid) { display: grid; gap: var(--g-gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gen :where(.grid > *) { min-width: 0; margin-top: 0; }
.gen :where(.grid.g2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gen :where(.grid.g3) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gen :where(.grid > * > :first-child) { margin-top: 0; }

.gen :where(.compare) { display: grid; gap: var(--g-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gen :where(.compare > *) {
  min-width: 0; margin-top: 0;
  border: 1px solid var(--g-line); border-radius: var(--g-r); padding: var(--g-pad);
}
.gen :where(.compare > * > h4:first-child) {
  margin: calc(-1 * var(--g-pad-y)) calc(-1 * var(--g-pad-x)) 0;
  padding: 8px var(--g-pad-x); border-bottom: 1px solid var(--g-line-soft);
  font-size: var(--g-fs-micro); letter-spacing: .04em; text-transform: uppercase; color: var(--g-text-3);
}
.gen :where(.compare > * > h4:first-child + *) { margin-top: 12px; }
.gen :where(.compare > .ok > h4:first-child, .compare > .na > h4:first-child) { color: var(--g-ok); }
.gen :where(.compare > .err > h4:first-child, .compare > .voor > h4:first-child) { color: var(--g-text-3); }

@container (max-width: 560px) {
  .gen :where(.grid.g2, .grid.g3, .compare) { grid-template-columns: minmax(0, 1fr); }
  .gen :where(.kv) { grid-template-columns: minmax(0, 1fr); }
  .gen :where(.kv dt) { padding-bottom: 0; border-bottom: 0; }
  .gen :where(.kv dd) { padding-top: 2px; }
}

.gen :where(pre.diff) { padding-inline: 0; }
.gen :where(.diff > del, .diff > ins, .diff > span) {
  display: block; text-decoration: none; padding: 1px 14px 1px 34px; position: relative; white-space: pre-wrap;
}
.gen :where(.diff > del, .diff > ins, .diff > span)::before {
  position: absolute; left: 14px; color: var(--g-text-3);
}
.gen :where(.diff > del) { background: var(--g-err-bg); color: var(--g-text); }
.gen :where(.diff > del)::before { content: "-"; color: var(--g-err); }
.gen :where(.diff > ins) { background: var(--g-ok-bg); color: var(--g-text); }
.gen :where(.diff > ins)::before { content: "+"; color: var(--g-ok); }
.gen :where(.diff > span) { color: var(--g-text-3); }

/* ============================================================================
   KEUZES: sluit aan op de bestaande .actie / data-action mechaniek
   ========================================================================== */
.gen :where(.choices) { display: flex; flex-wrap: wrap; gap: 8px; }
.gen :where(.choices > *) { margin: 0; }
.gen .choices .actie {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--g-knop-h); padding: 0 14px;
  font-family: var(--g-sans); font-size: var(--g-fs-ui); font-weight: var(--g-w-strong); line-height: 1.2;
  background: var(--g-accent-fill); color: var(--g-on-fill);
  border: 1px solid var(--g-accent-fill); border-radius: var(--g-r-btn);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease, transform 120ms var(--g-ease), opacity 120ms ease;
}
.gen .choices .actie:hover:not(:disabled) { filter: brightness(1.08); }
.gen .choices .actie:active:not(:disabled) { transform: scale(.97); }
.gen .choices .actie.stil { background: transparent; color: var(--g-text-2); border-color: var(--g-line-strong); }
.gen .choices .actie.stil:hover:not(:disabled) { color: var(--g-accent); border-color: var(--g-accent); filter: none; }
.gen .choices .actie:disabled { opacity: .5; cursor: default; transform: none; }
.gen .choices .actie.gekozen, .gen .choices .actie.gekozen:disabled {
  opacity: 1; background: var(--g-ok-bg); color: var(--g-ok); border-color: color-mix(in srgb, var(--g-ok) 45%, transparent);
}
.gen .choices .actie:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 2px; }

/* ============================================================================
   RITME (staat na de element-resets, anders wint p { margin: 0 })
   ========================================================================== */
.gen > * + * { margin-top: var(--g-flow); }
.gen :where(.block, .callout, .tldr, .compare > *, .grid > *, details, blockquote) > * + * { margin-top: var(--g-flow-s); }
.gen :where(li) > * + * { margin-top: 4px; }
.gen :where(p, li, blockquote, dd, figcaption, summary, .callout, .tldr, .quote) { max-width: var(--g-measure); }
.gen :where(p) { text-wrap: pretty; }
.gen * + :where(h1) { margin-top: var(--g-gap-h1); }
.gen * + :where(h2) { margin-top: var(--g-gap-h2); }
.gen * + :where(h3) { margin-top: var(--g-gap-h3); }
.gen * + :where(h4) { margin-top: var(--g-gap-h4); }
.gen :where(h1, h2) + * { margin-top: calc(var(--g-flow-s) + 2px); }
.gen :where(h3, h4) + * { margin-top: var(--g-flow-s); }

/* ============================================================================
   RAIL: structurele afwijkingen (rest komt uit het variabelenblok bovenin)
   ========================================================================== */
.gen.gen-rail :where(h1, h2, h3) { font-family: var(--g-sans); letter-spacing: 0; }
.gen.gen-rail :where(.grid, .grid.g2, .grid.g3, .compare) { grid-template-columns: minmax(0, 1fr); }
.gen.gen-rail :where(.stats) { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.gen.gen-rail :where(.stat) { padding: 8px 10px; }
.gen.gen-rail :where(th, td) { padding: 6px 10px; }
.gen.gen-rail :where(.kv dt, .kv dd) { padding: 5px 0; }
.gen.gen-rail :where(.steps > li) { padding-left: 32px; padding-block: 5px; }
.gen.gen-rail :where(.steps > li)::before { width: 20px; height: 20px; font-size: 11px; top: calc(5px + 0.5em * var(--g-lh) - 10px); }
.gen.gen-rail :where(.steps > li)::after { left: 9.5px; top: calc(5px + 0.5em * var(--g-lh) + 12px); }
.gen.gen-rail :where(.timeline > li + li) { margin-top: 8px; }
.gen.gen-rail :where(.timeline > li)::after { bottom: -10px; }
.gen.gen-rail :where(.quote) { padding: 8px 0; }
.gen.gen-rail :where(.compare > * > h4:first-child) { padding-block: 6px; }
.gen.gen-rail :where(pre[data-file]) { padding-top: calc(var(--g-fs-meta) * 1.5 + 18px); }
.gen.gen-rail :where(pre[data-file])::before { padding: 5px 12px; }
.gen.gen-rail :where(.diff > del, .diff > ins, .diff > span) { padding: 1px 10px 1px 26px; }
.gen.gen-rail :where(.diff > del, .diff > ins, .diff > span)::before { left: 10px; }
.gen.gen-rail :where(details) { padding: 0 12px; }
.gen.gen-rail :where(summary) { margin: 0 -12px; padding: 8px 12px 8px 30px; }
.gen.gen-rail :where(summary)::before { left: 12px; }
.gen.gen-rail :where(.choices) { gap: 6px; }
.gen.gen-rail .choices .actie { padding: 0 12px; }

/* ============================================================================
   MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .gen *, .gen *::before, .gen *::after { transition-duration: 0ms !important; }
}

/* ============================================================================
   ACTIVITEIT (.gen-log, 15 sep 2026): afgeronde kaarten als dunne rijen
   bovenaan een tab, chronologisch (oudste boven, nieuwste onder, vlak boven de
   open kaarten): de tab leest als een chat en de pagina landt onderaan. Een
   kaart met staat "afgerond" verlaat het grid en wordt een rij van 40px:
   vinkje, titel, de log-zin, tijd (vandaag HH:MM, eerder de datum). Klik of
   Enter klapt de originele kaart eronder uit. De host (companion, werkbank)
   bouwt de DOM en onthoudt de open-stand; hier staat alleen de presentatie.
   De sectie staat buiten .gen, dus de tokens staan hier nog een keer met
   dezelfde fallbacks.
   ========================================================================== */
.gen-log {
  --g-text:   var(--text-1, var(--text, #eef4fb));
  --g-text-2: var(--text-2, var(--text-soft, #aebfd3));
  --g-text-3: color-mix(in srgb, var(--text-3, var(--text-mute, #8aa0b8)) 85%, var(--g-text));
  --g-bg-2:   var(--bg-2, var(--card-2, #0d3050));
  --g-line-soft: var(--line-soft, var(--hairline, rgba(255,255,255,.08)));
  --g-line:      var(--line, var(--hairline, rgba(255,255,255,.14)));
  --g-line-strong: var(--line-strong, rgba(255,255,255,.34));
  --g-accent: var(--accent-soft, var(--accent, #2bb3f0));
  --g-ok:     var(--ok, #45c98a);
  --g-ok-bg:  var(--ok-soft, color-mix(in srgb, var(--g-ok) 14%, transparent));
  --g-sans:   var(--sans, 'Author', ui-sans-serif, system-ui, sans-serif);
  --g-mono:   var(--mono, "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace);
  --g-r:      var(--r-panel, var(--r-card, 8px));
  --g-r-tag:  var(--r-tag, 4px);
  --g-w-strong: var(--w-max, 500);
  --g-ease:   var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));

  /* De log staat boven het grid: de ruimte zit eronder, naar de open kaarten toe. */
  margin: 0 0 var(--sectie-gap, 24px); min-width: 0;
  font-family: var(--g-sans); font-size: 14px; line-height: 1.4; color: var(--g-text-2);
}
.gen-log[hidden] { display: none; }
.gen-log-kop {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 4px;
  background: none; border: 0; border-bottom: 1px solid var(--g-line); border-radius: 0;
  color: var(--g-text-3); font-family: var(--g-sans); font-size: 12px; font-weight: var(--g-w-strong);
  letter-spacing: .04em; text-transform: uppercase; line-height: 1; text-align: left; cursor: pointer;
}
.gen-log-kop::before {
  content: ""; width: 6px; height: 6px; flex: none; margin: 0 4px 2px 2px;
  border-right: 1.5px solid var(--g-text-3); border-bottom: 1.5px solid var(--g-text-3);
  transform: rotate(45deg); transition: transform 120ms var(--g-ease);
}
.gen-log.dicht .gen-log-kop::before { transform: rotate(-45deg); margin-bottom: 0; }
.gen-log-kop:focus-visible { outline: 2px solid var(--g-accent); outline-offset: -2px; border-radius: var(--g-r-tag); }
.gen-log-n {
  font-family: var(--g-mono); font-size: 11px; line-height: 18px; padding: 0 6px;
  color: var(--g-text-3); background: var(--g-bg-2); border-radius: var(--g-r-tag);
  letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.gen-log.dicht .gen-log-lijst { display: none; }

.gen-log-rij { border-bottom: 1px solid var(--g-line-soft); min-width: 0; }
.gen-log-rij > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: grid; grid-template-columns: 16px minmax(0, max-content) minmax(0, 1fr) auto 10px;
  gap: 0 10px; align-items: center; min-height: 40px; padding: 4px 4px;
  color: var(--g-text-2); transition: background-color 120ms ease;
}
.gen-log-rij > summary::-webkit-details-marker { display: none; }
.gen-log-vink {
  width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;
  border: 1px solid var(--g-ok); background: var(--g-ok-bg); color: var(--g-ok);
  display: grid; place-items: center; font-size: 10px; line-height: 1; font-weight: 700;
}
.gen-log-vink::after { content: "\2713"; }
.gen-log-naam {
  color: var(--g-text); font-weight: var(--g-w-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 36ch;
}
.gen-log-zin { color: var(--g-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gen-log-zin:empty { display: none; }
.gen-log-rij > summary > time { font-family: var(--g-mono); font-size: 12px; color: var(--g-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gen-log-rij > summary::after {
  content: ""; width: 6px; height: 6px; justify-self: center;
  border-right: 1.5px solid var(--g-text-3); border-bottom: 1.5px solid var(--g-text-3);
  transform: translateY(-2px) rotate(45deg); transition: transform 120ms var(--g-ease);
}
.gen-log-rij[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.gen-log-rij > summary:focus-visible { outline: 2px solid var(--g-accent); outline-offset: -2px; border-radius: var(--g-r-tag); }
@media (hover: hover) { .gen-log-rij > summary:hover { background: var(--g-bg-2); } }

.gen-log-kaart {
  padding: 4px 0 16px 26px; min-width: 0;
  opacity: 1; transition: opacity 150ms var(--g-ease);
  @starting-style { opacity: 0; }
}
.gen-log-kaart > .card { animation: none; margin: 0; }
/* Afgerond is afgerond: de knoppen blijven zichtbaar als geschiedenis, maar doen niets meer. */
.gen-log-kaart [data-action] { pointer-events: none; opacity: .5; }

@media (max-width: 600px) {
  .gen-log-rij > summary { grid-template-columns: 16px minmax(0, 1fr) auto 10px; }
  .gen-log-naam { max-width: none; }
  .gen-log-zin { grid-column: 2 / 4; grid-row: 2; }
  .gen-log-kaart { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gen-log-kaart, .gen-log-rij > summary::after, .gen-log-kop::before { transition: none; }
}