/* ════════════════════════════════════════════════════════════════
   PHrello UI language — "Operatiebord"
   (chosen from doc/design/, option A + activity/release grafts of C)

   Principles:
   - Full-bleed: width is spent on a permanent project rail (left)
     and table-aligned lane rows, never on empty margins.
   - Status colours are the backbone; one hue per intrinsic status.
   - Derived state (ter test) is dashed + italic — never solid,
     mirroring the domain rule that it is computed, not stored.
   - Branch names, commits and counts are always mono with ⎇.
   ════════════════════════════════════════════════════════════════ */

/* ── Fonts (self-hosted, assets/fonts) ─────────────────────────── */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-400-dCzU-sz.woff2") format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-400-italic-eMjXh-T.woff2") format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-500-mSIWrNY.woff2") format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-600-pA5FLX3.woff2") format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-700-zdWo2v5.woff2") format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400-78NWkmx.woff2") format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500-QJNNIVc.woff2") format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500-italic-gocPoBR.woff2") format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-mono-600-uhfYm1a.woff2") format('woff2'); }

/* ── Tokens ────────────────────────────────────────────────────── */
:root {
    --bg: #eef1f4;
    --surface: #ffffff;
    --surface-dim: #f7f9fa;
    --line: #d7dee4;
    --line-soft: #e8edf1;
    --ink: #16232e;
    --ink-soft: #5b6b78;
    --ink-faint: #90a0ad;

    /* house style (pharma-intelligence.nl): slate-teal chrome, mint highlight */
    --accent: #4a7777;
    --accent-dark: #40585a;
    --accent-dim: #eaf4f2;
    --mint: #64d0b4;

    /* one hue per intrinsic status; ter test is the derived exception */
    --c-tertest: #b45309;   --c-tertest-bg: #fef3e2;   --c-tertest-line: #f3ce9a;
    --c-afgekeurd: #b91c1c; --c-afgekeurd-bg: #fdecec; --c-afgekeurd-line: #f0b4b4;
    --c-geslaagd: #15803d;  --c-geslaagd-bg: #e8f6ed;  --c-geslaagd-line: #a7dcb8;
    --c-gebouwd: #0369a1;   --c-gebouwd-bg: #e7f3fa;   --c-gebouwd-line: #a9d3ea;
    --c-neutraal: #5b6b78;  --c-neutraal-bg: #eef1f4;  --c-neutraal-line: #d7dee4;

    --sans: 'IBM Plex Sans', system-ui, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* wins over explicit display on toggled panels (.groove-picker, .titleedit) */

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-dark); }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--ink-faint); }
.mono { font-family: var(--mono); }

/* branch names always mono, always ⎇ */
.branchname { font-family: var(--mono); font-weight: 600; }
.branchname::before { content: "⎇ "; color: var(--accent); }
/* mono = identifier: entity ids in metas (branch page titlerow) */
.id { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); }
/* copyable dev-id chip (the UI↔CLI bridge): tool, not information —
   same quiet ink as .id until you reach for it */
.idchip { font: 500 11.5px var(--mono); color: var(--ink-faint); background: none; border: 0; padding: 0 2px; cursor: pointer; }
.idchip:hover { color: var(--accent-dark); }
.idchip--done { color: var(--accent-dark); }

/* ── Shell: rail + main ────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.shell__main { min-width: 0; }

/* ── Project rail ──────────────────────────────────────────────── */
.rail {
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    /* no overflow here — the bell popover in the foot overhangs the rail;
       scrolling lives on .rail__scroll. z-index lifts the whole rail (and
       thus the popover) above main-column content — sticky alone makes a
       stacking context but at z auto loses to later-in-DOM positioned
       elements (timeline markers painted through the bell panel). The
       lightbox is a showModal() dialog (top layer), so it stays above. */
    z-index: 30;
}
.rail__scroll { flex: 1; min-height: 0; overflow-y: auto; }
.rail__brand { display: flex; align-items: center; gap: 9px; padding: 14px 16px 12px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.rail__brand:hover { color: var(--ink); }

/* P-monogram mark (doc/design/logo/mark-p-lanes.svg, also the favicon) */
.mark { display: block; width: 26px; height: 26px; flex: none; }

.rail__label {
    padding: 12px 16px 4px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-faint);
}
.rail__proj {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px 7px 16px;
    border-left: 3px solid transparent;
    font-weight: 500;
    color: var(--ink-soft);
}
.rail__proj:hover { background: var(--surface-dim); color: var(--ink); }
.rail__proj--on { border-left-color: var(--accent); background: var(--accent-dim); color: var(--ink); font-weight: 600; }
.rail__proj--on:hover { background: var(--accent-dim); }
.rail__proj .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot {
    min-width: 20px; height: 18px; padding: 0 5px;
    border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    font: 600 11px var(--mono);
}
.dot--tertest { background: var(--c-tertest-bg); color: var(--c-tertest); }
.dot--afgekeurd { background: var(--c-afgekeurd-bg); color: var(--c-afgekeurd); }

.rail__others { border: 0; margin: 0; padding: 0; }
.rail__others summary { padding: 8px 16px; font-size: 12px; color: var(--ink-faint); cursor: pointer; list-style: none; }
.rail__others summary::before { content: "▸ "; }
.rail__others[open] summary::before { content: "▾ "; }
.rail__others summary:hover { color: var(--ink-soft); }

.rail__item { display: flex; gap: 8px; align-items: baseline; padding: 4px 16px; font-size: 12.5px; color: var(--ink-soft); text-decoration: none; }
a.rail__item:hover .n { text-decoration: underline; }
.rail__item .flag { flex: none; }
/* workitem rows carry a claim verb, so the row is a div and the title the link */
.rail__item a.n { color: inherit; text-decoration: none; }
.rail__item a.n:hover { text-decoration: underline; }
.rail__item .claimbtn, .rail__item .avatar { margin-left: auto; flex: none; }
.rail__item .avatar { align-self: center; }

.rail__foot {
    padding: 10px 16px 12px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 12.5px;
    color: var(--ink-soft);
}
.rail__footrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rail__footrow .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail__footrow--links a { color: var(--ink-faint); flex: none; }
.rail__footrow--links a:hover { color: var(--accent-dark); }
.rail__footrow--links a:last-child { margin-left: auto; }
.rail__me { display: inline-flex; flex: none; }
.userrow--inactive .n, .userrow--inactive .muted { color: var(--ink-faint); text-decoration: line-through; }
.rail__mename { color: inherit; text-decoration: none; }
.rail__mename:hover { color: var(--accent-dark); }

/* ── Me page ───────────────────────────────────────────────────── */
.mepage { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.mepage .sidebox { flex: 0 1 420px; }
.mephoto { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.mephoto__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mefield { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 12.5px; color: var(--ink-soft); }
.mefield input, .mefield select {
    font: inherit; color: var(--ink);
    border: 1px solid var(--line); border-radius: 6px;
    padding: 5px 8px; background: var(--surface);
    max-width: 320px;
}
.mefield--row { flex-direction: row; align-items: center; }
.tokennew {
    margin: 0 0 10px;
    padding: 10px 12px;
    background: var(--accent-dim);
    border: 1px solid var(--accent);
    border-radius: 7px;
    font-size: 12.5px;
}
.tokennew p { margin: 0 0 6px; }
.tokennew code { font-family: var(--mono); word-break: break-all; user-select: all; }

.rail__bell { position: relative; flex: none; }
.rail__bell summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.rail__bell summary::-webkit-details-marker { display: none; }
.rail__bellcount {
    min-width: 17px; height: 15px; padding: 0 4px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font: 600 10px var(--mono);
    background: var(--c-afgekeurd); color: #fff;
}
.rail__bell .droppanel {
    top: auto; bottom: calc(100% + 8px);
    left: 0; right: auto;
    width: 320px;
    padding: 0;
    gap: 0;
}
.bellhead {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line-soft);
    font-weight: 600; color: var(--ink);
}
.belllist { max-height: 340px; overflow-y: auto; }
.belllist > .bellrow__meta { display: block; padding: 8px 10px; }
.bellrow { padding: 7px 10px; border-bottom: 1px solid var(--line-soft); }
.bellrow:last-child { border-bottom: 0; }
.bellrow--unread { background: var(--accent-dim); }
.bellrow__meta { font-size: 11.5px; color: var(--ink-faint); }
.bellrow a { display: block; padding: 1px 0; color: var(--accent-dark); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bellrow a:hover { text-decoration: underline; }

.rail__locale { display: inline-flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; flex: none; }
.rail__loc {
    border: 0;
    background: transparent;
    padding: 2px 6px;
    font: 600 10px var(--mono);
    letter-spacing: .05em;
    color: var(--ink-faint);
    cursor: pointer;
}
.rail__loc:hover { color: var(--ink); }
.rail__loc--on { background: var(--accent); color: #fff; }
.rail__loc--on:hover { color: #fff; }

/* ── Pagehead: crumbs → titlerow → tabs (doc/design/option-b.html) ──
   The one page anatomy: breadcrumb, then title + status + ONE primary
   action + ⋯ overflow, then the tab bar. Sticky at the top. */
.pagehead {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 10px 22px 0;
    position: sticky;
    top: 0;
    z-index: 10;
}
.pagehead--plain { padding-bottom: 10px; } /* pages without a tab bar */
.crumbs { font-size: 12px; color: var(--ink-faint); margin-bottom: 2px; }
.crumbs a:hover { color: var(--accent-dark); }
.crumbs .sep { margin: 0 5px; }
.titlerow { display: flex; align-items: center; gap: 12px; min-height: 34px; }
.titlerow h1 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.titlerow h1.branchname { font-size: 16px; }
.titlerow .meta { font-size: 12.5px; color: var(--ink-faint); }
.titlerow .meta a { color: var(--accent-dark); font-weight: 500; }
.titlerow .meta a:hover { text-decoration: underline; }
/* meta area holding chips (groove ✉, related devs, released stamp — dev page) */
.titlerow .meta--chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.titlerow .meta--chips a.flag:hover { color: var(--accent-dark); text-decoration: none; }
/* related-dev chips: link + unlink button share one chip (assignee-flag anatomy) */
.flag--rel { display: inline-flex; align-items: center; gap: 6px; }
.flag--rel a { color: inherit; text-decoration: none; }
.flag--rel a:hover { color: var(--accent-dark); }
.droppanel__results { display: flex; flex-direction: column; gap: 2px; }
.droppanel__results .droppanel__item { white-space: normal; }
.spacer { flex: 1; }
/* titlerow dropdowns: plain <details> anchoring a .droppanel (same
   mechanics as .rowmenu/.stagemenu, without their summary styling so
   .btn--primary/.more render untouched) */
.titlerow details { position: relative; }
.titlerow details > summary { list-style: none; cursor: pointer; }
.titlerow details > summary::-webkit-details-marker { display: none; }
.tabs { display: flex; gap: 2px; margin-top: 6px; }
.tabs a { padding: 7px 13px; font-size: 13px; font-weight: 500; color: var(--ink-soft); border-bottom: 2px solid transparent; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.tabs .k { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); margin-left: 4px; }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}
.btn:hover { border-color: var(--ink-faint); color: var(--ink); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn--danger { background: var(--c-afgekeurd); border-color: var(--c-afgekeurd); color: #fff; }
.btn--danger:hover { filter: brightness(.9); color: #fff; }
.btn--ghost { border-color: transparent; background: none; color: var(--ink-soft); }
.btn--ghost:hover { color: var(--ink); border-color: transparent; background: var(--line-soft); }
.btn--sm { padding: 3px 10px; font-size: 12px; border-radius: 5px; }
/* the ⋯ overflow / quiet icon button of the titlerow */
.more { display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent; background: none; border-radius: 7px; padding: 4px 9px; color: var(--ink-soft); font-size: 16px; line-height: 1; cursor: pointer; }
.more:hover { border-color: var(--line); color: var(--ink); }

/* ── Main content area ─────────────────────────────────────────── */
.content { padding: 18px 22px 60px; min-width: 0; }

/* ── Stage bar: one quiet line, "what runs where" (option-b) ─────
   Equal-width slots on vertical hairlines; an empty stage is nearly
   no ink. Deploy dropdown + add-stage keep their mechanics, restyled
   as small ghost buttons. */
.stagebar {
    display: flex;
    align-items: center;
    padding: 8px 0;
    margin-bottom: 16px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    font-size: 12.5px;
}
.stagebar__slot { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; padding: 0 18px; }
.stagebar__slot + .stagebar__slot { border-left: 1px solid var(--line); }
.stagebar__name { flex: none; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }
/* branch name yields last: the meta ("sinds … door …") truncates first */
.stagebar__slot .branchname { flex: none; max-width: 50%; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stagebar__meta { flex: 0 1 auto; min-width: 0; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stagebar__slot--empty { color: var(--ink-faint); }
.stagebar .btn--ghost { padding: 1px 7px; font-size: 12px; white-space: nowrap; }
.stagebar .stagemenu { margin-left: auto; }
.stagebar .addform--stage { margin: 0 10px 0 8px; }
.stagebar .addform--stage form { left: auto; right: 0; }

/* ── Lane ──────────────────────────────────────────────────────── */
.lane {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 9px;
    margin-bottom: 14px;
    /* no overflow:hidden — dropdown panels must escape short lanes;
       the rounded corners are honored per child instead */
}
.lane__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 8px 8px 0 0;
}
/* slim head: the branch name is the only emphasis (mono semibold, 13.5px) */
.lane__head .branchname { font-size: 13.5px; line-height: 1.3; }
.lane > :last-child > .row:last-child, .lane > :last-child.row--empty { border-radius: 0 0 8px 8px; }
/* branch node: every lane hangs off the (implied) graph */
.lane__node { width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid var(--ink-faint); background: var(--surface); flex: none; }
.lane--ontest .lane__node { border-color: var(--c-tertest); }
.lane--ready .lane__node { border-color: var(--c-geslaagd); background: var(--c-geslaagd); }
.lane__count { font-size: 12px; color: var(--ink-faint); }
.lane__spacer { flex: 1; }
/* lane header branch name links to the branch page; the → is the invite */
.lane__branch:hover { color: var(--accent-dark); }
.lane__branch .goto { font-family: var(--sans); font-weight: 400; color: var(--ink-faint); margin-left: 5px; }
/* lane arrangement: grip = drag handle, fold = per-browser collapse toggle */
.lane__grip { color: var(--ink-faint); cursor: grab; user-select: none; flex: none; font-size: 13px; }
.lane__grip:active { cursor: grabbing; }
.lane__fold {
    border: 0;
    background: none;
    padding: 0;
    width: 28px;
    height: 28px;
    line-height: 1;
    color: var(--ink-faint);
    font-size: 17px;
    cursor: pointer;
    flex: none;
    transition: transform 0.15s;
}
.lane__fold:hover { color: var(--accent); }
/* the a-z/z-a lens toggle (lane_sort_controller) — view state, like the fold */
.lane__sort {
    border: 0;
    background: none;
    padding: 0 2px;
    height: 28px;
    line-height: 1;
    color: var(--ink-faint);
    font-size: 12px;
    cursor: pointer;
    flex: none;
}
.lane__sort:hover { color: var(--accent); }
.lane__sort[aria-pressed='true'] { color: var(--accent-dark); font-weight: 600; }
.lane--collapsed .lane__fold { transform: rotate(-90deg); }
.lane--collapsed .lane__rows, .lane--collapsed .chips { display: none; }
.lane--collapsed .lane__head { border-bottom: 0; }
.sortable-ghost.lane { opacity: 0.4; }
.lane__more {
    padding: 7px 14px;
    border-top: 1px solid var(--line-soft);
    font-size: 12.5px;
    color: var(--ink-faint);
    background: var(--surface-dim);
    border-radius: 0 0 8px 8px;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid;
}
.tag--ontest { color: var(--c-tertest); background: var(--c-tertest-bg); border-color: var(--c-tertest-line); }
.tag--ready { color: var(--c-geslaagd); background: var(--c-geslaagd-bg); border-color: var(--c-geslaagd-line); }
/* branch-page state tags: open lifecycle vs. the frozen release fact */
.tag--open { color: var(--c-gebouwd); background: var(--c-gebouwd-bg); border-color: var(--c-gebouwd-line); }
.tag--released { color: var(--c-geslaagd); background: var(--c-geslaagd-bg); border-color: var(--c-geslaagd-line); }
/* Stored fact, not derived — solid + muted (dashed/italic is reserved for derived states) */
.tag--archived { color: var(--ink-faint); background: transparent; border-color: var(--line-soft); }

/* Spec-session chips (doc/specs/spec-sessions.md): stored lifecycle, so
   solid. "Waiting on you" gets the action blue; "Claude denkt na" stays
   quiet — nothing to do there but wait. */
.tag--session-draft { color: var(--ink-faint); background: var(--surface-dim); border-color: var(--line-soft); }
.tag--session-analyzing { color: var(--c-neutraal); background: var(--c-neutraal-bg); border-color: var(--c-neutraal-line); }
.tag--session-awaiting_input { color: var(--c-gebouwd); background: var(--c-gebouwd-bg); border-color: var(--c-gebouwd-line); }
.tag--session-minted { color: var(--c-geslaagd); background: var(--c-geslaagd-bg); border-color: var(--c-geslaagd-line); }
.tag--session-resolved { color: var(--c-geslaagd); background: var(--c-geslaagd-bg); border-color: var(--c-geslaagd-line); }
.tag--session-abandoned { color: var(--ink-faint); background: transparent; border-color: var(--line-soft); }
.tag--hoewerkt { color: var(--c-neutraal); background: var(--c-neutraal-bg); border-color: var(--c-neutraal-line); }
.tag--kbdraft { color: var(--c-neutraal); background: var(--c-neutraal-bg); border-color: var(--c-neutraal-line); }
/* spend: amber once past the soft cap, red when the hard cap stopped the relay */
.tag--spend { color: var(--c-tertest); background: var(--c-tertest-bg); border-color: var(--c-tertest-line); }
.tag--capped { color: var(--c-afgekeurd); background: var(--c-afgekeurd-bg); border-color: var(--c-afgekeurd-line); }

/* session titlerow verbs: mint select + button, abandon, lift-cap */
.sessionacts { display: inline-flex; align-items: center; gap: 8px; }
.sessionacts select { font: inherit; font-size: 12.5px; border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; background: var(--surface); }

/* Sessions page (doc/specs/spec-sessions.md — UI): the question is the
   whole form — one conversational textarea, branch + start on the foot
   row. Wide-reading boxes, not full-bleed lanes. */
.sidebox--newsession, .sidebox--sessions { max-width: 960px; }
.sidebox--sessions { margin-top: 18px; }
/* The list is one grid so status/flags/cost/wie/datum line up as columns
   across rows (each li subgrids into the ul's tracks); only the title
   cell may wrap. */
.sidebox--sessions ul { display: grid; grid-template-columns: 1fr repeat(5, max-content); }
.sidebox--sessions li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: 14px; }
.sidebox--sessions li > :not(a) { white-space: nowrap; }
.sessionrow__flags { display: inline-flex; align-items: baseline; gap: 8px; }
.sidebox--newsession .sidebox__pad { padding: 12px 14px; }
.sidebox--newsession label { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; }
.sidebox--newsession select { font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); max-width: 220px; }

/* Lock-audit chip (doc/specs/lock-audit.md): a derived verdict — dashed +
   italic like every derived state. Only rendered when there is news
   (advisories or a failed run); clean is silence. */
.lockchip { padding: 3px 11px; border-radius: 999px; border: 1px dashed var(--line-soft); font-size: 12px; font-style: italic; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.lockchip--warn { color: var(--c-afgekeurd); background: var(--c-afgekeurd-bg); border-color: var(--c-afgekeurd-line); }
.lockchip--warn:hover { filter: brightness(.95); }
.lockchip--error:hover { color: var(--ink); }
.lockchip--ok { color: var(--c-geslaagd); background: var(--c-geslaagd-bg); border-color: var(--c-geslaagd-line); }
.lockchip--ok:hover { filter: brightness(.95); }
.lockchip--major { color: var(--c-tertest); background: var(--c-tertest-bg); border-color: var(--c-tertest-line); margin-left: 4px; }
.lockchip--major:hover { filter: brightness(.95); }

/* Lock-audit dossier (doc/specs/lock-audit.md): the verdict panel — the
   derived verdict writ large (dashed + italic stays the semantic at any
   size) beside a small ledger of audit facts. One statement, quiet facts. */
.lockaudit { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 22px 26px; margin-bottom: 18px; }
.lockaudit__verdict { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 240px; }
.lockaudit__state { align-self: flex-start; font-size: 21px; font-weight: 600; font-style: italic; padding: 6px 20px; border-radius: 999px; border: 1.5px dashed var(--line); color: var(--ink-soft); white-space: nowrap; }
.lockaudit--clean .lockaudit__state { color: var(--c-geslaagd); background: var(--c-geslaagd-bg); border-color: var(--c-geslaagd-line); }
.lockaudit--advisories .lockaudit__state { color: var(--c-afgekeurd); background: var(--c-afgekeurd-bg); border-color: var(--c-afgekeurd-line); }
.lockaudit--error .lockaudit__state { background: var(--surface-dim); }
.lockaudit__sub { color: var(--ink-faint); font-size: 13px; }
.lockaudit__sevrow { display: flex; flex-wrap: wrap; gap: 6px; }
.sev { font-size: 12px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line-soft); color: var(--ink-soft); background: var(--surface); white-space: nowrap; }
.sev--critical, .sev--high { color: var(--c-afgekeurd); background: var(--c-afgekeurd-bg); border-color: var(--c-afgekeurd-line); }
.sev--medium { color: var(--c-tertest); background: var(--c-tertest-bg); border-color: var(--c-tertest-line); }
.lockaudit__facts { display: flex; gap: 8px 36px; flex-wrap: wrap; margin: 0; }
.lockaudit__facts div { display: flex; flex-direction: column; gap: 3px; }
.lockaudit__facts dt { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.lockaudit__facts dd { margin: 0; font-size: 15px; color: var(--ink); }
.lockaudit__facts dd.mono { font-size: 13.5px; letter-spacing: .04em; padding-top: 2px; }
.lockaudit__fresh dd { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
/* Freshness jump chips (§Freshness): major = the amber tier that signals, minor/patch = hygiene, unknown = not seen by packagist. */
.jump { font-size: 12px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line-soft); color: var(--ink-soft); background: var(--surface); white-space: nowrap; }
.jump--major { color: var(--c-tertest); background: var(--c-tertest-bg); border-color: var(--c-tertest-line); }
.jump--none { color: var(--c-geslaagd); background: var(--c-geslaagd-bg); border-color: var(--c-geslaagd-line); }
.jump--unknown { color: var(--ink-faint); border-style: dashed; }
.lockfile__latest { white-space: nowrap; }
.lockaudit__error { flex-basis: 100%; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.lockaudit__error p { margin: 0 0 4px; }
.titlerow .meta--derived { font-style: italic; }

/* per-lane filter chips */
.chips { display: flex; gap: 4px; margin-left: auto; }
.chipf { padding: 3px 11px; border-radius: 999px; border: 1px solid transparent; background: transparent; font-size: 12px; color: var(--ink-soft); }
.chipf:hover { background: var(--line-soft); color: var(--ink); }
.chipf--on, .chipf--on:hover { background: var(--ink); color: #fff; font-weight: 600; }
.chipf .k { font-family: var(--mono); font-size: 11px; opacity: .75; margin-left: 3px; }

/* ── Lane rows: aligned columns so long lanes scan like a table ──
   columns: title | flags | claim | iteration | status */
.row {
    display: grid;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    grid-template-columns: minmax(0, 1fr) auto 90px 44px 168px;
    border-top: 1px solid var(--line-soft);
    font-size: 13px;
}
.row:first-of-type { border-top: 0; }
.row[hidden] { display: none; } /* author display:grid would otherwise beat the UA [hidden] rule */
.row:hover { background: var(--surface-dim); }
.row--empty { grid-template-columns: 1fr; color: var(--ink-faint); }
.row--simple { grid-template-columns: minmax(0, 1fr) auto; }
.row__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__title small { font-weight: 400; font-size: 12px; color: var(--ink-faint); margin-left: 8px; }
.row__flags { display: flex; gap: 5px; justify-content: flex-end; }
.row__claim { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.row__iter { font: 500 11.5px var(--mono); color: var(--ink-faint); text-align: right; }
/* Claude-written "wat was dit ook alweer — waar staat het" line: last child
   in the DOM so grid auto-placement drops it onto its own full-width row.
   Never clamped — muted + small, wraps in full (option-b decision). */
.row__summary {
    grid-column: 1 / -1;
    margin-top: -3px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink-faint);
}

.flag {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1px 6px;
    color: var(--ink-soft);
    background: var(--surface);
    white-space: nowrap;
}
.flag--mail { font-family: var(--mono); }
/* Pulled-from-branch marker: a stored fact — muted but upright (dashed/italic is reserved for derived states) */
.flag--pulled { font-weight: 500; color: var(--ink-faint); }

/* ── Status chips ──────────────────────────────────────────────── */
.st {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid;
    white-space: nowrap;
}
/* derived, never stored — dashed + italic across the whole app */
.st--ter_test { color: var(--c-tertest); background: var(--c-tertest-bg); border-color: var(--c-tertest-line); border-style: dashed; font-style: italic; }
.st--test_afgekeurd { color: var(--c-afgekeurd); background: var(--c-afgekeurd-bg); border-color: var(--c-afgekeurd-line); }
.st--test_geslaagd { color: var(--c-geslaagd); background: var(--c-geslaagd-bg); border-color: var(--c-geslaagd-line); }
.st--gebouwd { color: var(--c-gebouwd); background: var(--c-gebouwd-bg); border-color: var(--c-gebouwd-line); }
.st--backlog, .st--bespreken, .st--idee_voor_later { color: var(--c-neutraal); background: var(--c-neutraal-bg); border-color: var(--c-neutraal-line); }
.st--released { color: var(--ink-faint); background: var(--surface-dim); border-color: var(--line-soft); }

.avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #cfdce5;
    color: #33505f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 700;
    flex: none;
}
.avatar--lg { width: 26px; height: 26px; font-size: 10.5px; }
.avatar--xl { width: 64px; height: 64px; font-size: 22px; }
img.avatar { object-fit: cover; }

/* claim/release — small verbs in the claim column */
.claimbtn {
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px dashed var(--line);
    background: transparent;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    white-space: nowrap;
}
.claimbtn:hover { border-style: solid; border-color: var(--accent); color: var(--accent); }
.claimbtn--release {
    padding: 0;
    width: 16px; height: 16px;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    color: var(--ink-faint);
}
.claimbtn--release:hover { background: var(--line-soft); color: var(--ink); border: 0; }

/* Quiet copy affordance — raw markdown to clipboard (kb-draft, newsflash) */
.copybtn {
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px dashed var(--line);
    background: transparent;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-faint);
    cursor: pointer;
    white-space: nowrap;
}
.copybtn:hover { border-style: solid; border-color: var(--accent); color: var(--accent); }
.copybtn--done { border-style: solid; border-color: var(--accent); color: var(--accent-dark); }

/* ── Testplan check-off ────────────────────────────────────────── */
.testplan-notes { border-bottom: 1px solid var(--line-soft); }
.titem {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
    padding: 7px 14px;
    border-top: 1px solid var(--line-soft);
    font-size: 13px;
}
.titem:first-of-type { border-top: 0; }
.titem__controls { display: inline-flex; gap: 4px; align-self: start; }
.titem__btn {
    width: 22px; height: 22px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface);
    color: var(--ink-faint);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}
.titem__btn:hover { border-color: var(--ink-soft); color: var(--ink); }
.titem[data-state="passed"] .titem__btn--pass { background: var(--c-geslaagd); border-color: var(--c-geslaagd); color: #fff; }
.titem[data-state="failed"] .titem__btn--fail { background: var(--c-afgekeurd); border-color: var(--c-afgekeurd); color: #fff; }
.titem[data-state="passed"] .titem__label { color: var(--ink-faint); }
.titem[data-state="failed"] .titem__label { color: var(--c-afgekeurd); }
.titem__mark { width: 22px; display: inline-block; text-align: center; }
.titem[data-state="passed"] .titem__mark::before { content: '✓'; color: var(--c-geslaagd); }
.titem[data-state="failed"] .titem__mark::before { content: '✗'; color: var(--c-afgekeurd); }
.titem__meta { font-size: 11px; white-space: nowrap; }
.titem__bug { grid-column: 2 / -1; }
.titem__buginput, .verdictbox__form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 8px;
    font: 12px var(--mono);
    color: var(--ink);
    background: var(--surface);
    resize: vertical;
}
.titem[data-state="failed"] .titem__buginput { border-color: var(--c-afgekeurd-line); background: var(--c-afgekeurd-bg); }
/* bug-vision slot (vision.md flow A): error red, busy muted */
.titem__error { margin: 4px 0 0; font-size: 12.5px; color: var(--c-afgekeurd); }
.titem__error--busy { color: var(--ink-faint); }
.titem__bugread {
    font-size: 11.5px;
    background: var(--surface-dim);
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    padding: 6px 8px;
    white-space: pre-wrap;
    margin: 0;
}
.verdictbox__current { padding: 10px 14px 0; display: flex; align-items: center; gap: 10px; margin: 0; }
.verdictbox__form { padding: 12px 14px; display: grid; gap: 6px; }
.verdictbox__form textarea { font-family: inherit; font-size: 13px; }
.verdictbox__label { font-size: 11.5px; font-weight: 600; letter-spacing: .03em; color: var(--ink-soft); margin-top: 4px; }
.verdictbox__error { margin: 0; font-size: 12.5px; color: var(--c-afgekeurd); }
.verdictbox__actions { display: flex; gap: 8px; margin-top: 6px; }

/* ── Tabs + filterbar (unassigned work) ────────────────────────── */
.tabsbar { display: flex; align-items: center; border-bottom: 1px solid var(--line-soft); background: var(--surface-dim); border-radius: 8px 8px 0 0; }
.tab {
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    border: 0; /* <button> tabs would inherit the UA border */
    background: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.tab--muted { color: var(--ink-faint); } /* pane is empty — barely-there label */
.tab:hover { color: var(--ink); }
.tab--on { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); background: var(--surface); }
.tab .k { font: 500 11.5px var(--mono); color: var(--ink-faint); margin-left: 4px; }
.tab__dot { color: var(--accent); font-weight: 700; margin-left: 4px; } /* pane has content */
/* A row hovering over a tab-button drop zone must not blow up the bar —
   the cursor clone is the drag feedback, the button is the target. */
.tab .row { display: none; }
.tabsbar__note { margin-left: auto; padding: 0 14px; font-size: 12px; color: var(--ink-faint); }

/* ── Dashboard (home) ──────────────────────────────────────────── */
.dash { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.dash__side { display: flex; flex-direction: column; gap: 14px; }

.ptable { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; font-size: 13px; }
.ptable th {
    text-align: left;
    padding: 8px 12px;
    background: var(--surface-dim);
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-soft);
}
.ptable th .th-hint { color: var(--ink-faint); text-decoration: none; font-size: 12px; }
.ptable th .th-hint:hover { color: var(--accent); }
.ptable td { padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
.ptable tr:last-child td { border-bottom: 0; }
.ptable tbody tr:hover { background: var(--surface-dim); }
.ptable .num { text-align: center; font-family: var(--mono); font-size: 12.5px; }
.ptable .num strong { font-weight: 600; }

.sidebox { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.sidebox h3 {
    padding: 8px 14px;
    background: var(--surface-dim);
    border-bottom: 1px solid var(--line-soft);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-soft);
}
.sidebox h3 .lockfile__dev { font-weight: 400; letter-spacing: 0; color: var(--ink-faint); }
.sidebox ul { list-style: none; margin: 0; padding: 4px 0; }
.sidebox li { display: flex; align-items: baseline; gap: 8px; padding: 7px 14px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.sidebox li:last-child { border-bottom: 0; }

/* ── Activity feed (the stream, made visible) ──────────────────── */
/* ul.feed outranks `.sidebox ul`, which would otherwise zero the padding */
ul.feed { list-style: none; margin: 0; padding: 10px 16px 10px 26px; }
.feed li { position: relative; padding: 4px 0 10px 18px; font-size: 12px; color: var(--ink-soft); border: 0; display: block; }
.feed li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--ink-faint);
}
.feed li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 4.5px;
    top: 20px;
    bottom: -2px;
    width: 2px;
    background: var(--line-soft);
}
.feed b { color: var(--ink); font-weight: 600; }
.feed .t { display: block; font: 400 10.5px var(--mono); color: var(--ink-faint); }

.sidebox--stack { margin-top: 18px; }
.sidebox--feed { max-width: 560px; margin-top: 18px; }

/* Activity feed + project files side by side below the board */
.sideboxes { display: flex; gap: 18px; align-items: flex-start; }
.sideboxes .sidebox--feed { flex: 0 1 560px; max-width: none; }
.sidebox--files { flex: 0 1 420px; margin-top: 18px; }
.sidebox__pad { padding: 10px 14px; }
.sidebox__pad > .muted:first-child { margin: 0 0 8px; font-size: 12px; }

/* Workitems page: open + done history side by side (doc/spec_1.md —
   workitem-visibility decisions). */
.workitems { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.workitems .sidebox { flex: 1 1 380px; max-width: 620px; }
.workitems .claimbtn { margin-left: auto; flex: none; }
.workitems .files__editbtn { flex: none; }
/* open workitem rows (workitems page + home dashboard): assignee/claim +
   note buttons + done as one right-pushed cluster */
.wi__actions { display: flex; align-items: baseline; gap: 8px; margin-left: auto; flex: none; }
.wi__actions .claimbtn { margin-left: 0; }
.wi__actions .avatar { align-self: center; }
.wi__desc { overflow-wrap: anywhere; }
.wi__editform { flex: 1; }
.wi__editform input {
    width: 100%; box-sizing: border-box; font-size: 12px; padding: 2px 6px;
    border: 1px solid var(--line-soft); border-radius: 4px;
    background: var(--surface); color: var(--ink);
}
.workitems .addform select {
    font: inherit; font-size: 12.5px; padding: 4px 6px;
    border: 1px solid var(--line-soft); border-radius: 6px;
    background: var(--surface); color: var(--ink); max-width: 180px;
}

.timeline__newsflash { margin-top: 8px; }
.timeline__newsflash summary { list-style: none; cursor: pointer; display: inline-block; }
.timeline__newsflash summary::-webkit-details-marker { display: none; }
.timeline__newsflash .mdbox { margin-top: 6px; max-width: 640px; }

/* ── Branch page (doc/design/option-b.html): two columns of panels ──
   panel = titled card on hairlines; kv = key/value dossier lines;
   check = deploy-checklist row; act = compact activity line;
   blockrow = release blocker line. */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; margin-bottom: 14px; overflow: hidden; }
.panel__head { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); }
.panel__head .k { font-family: var(--mono); color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.panel__body { padding: 4px 14px 12px; }
.panel--warn { border-color: var(--c-afgekeurd-line); }
.panel--warn .panel__head { color: var(--c-afgekeurd); }
/* dev rows inside a panel: no drag/claim columns — title | flags | iter | status */
.panel .row { padding-left: 14px; grid-template-columns: minmax(0, 1fr) auto 44px 150px; }
.panel__actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; padding-top: 8px; }
.hint { font-size: 12px; color: var(--ink-faint); }
.kv { display: grid; grid-template-columns: 110px 1fr; row-gap: 5px; font-size: 12.5px; padding: 2px 0 4px; margin: 0; }
.kv dt { color: var(--ink-faint); }
.kv dd { margin: 0; }
.checklist { list-style: none; margin: 0; padding: 0; }
.check { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.check:first-child { border-top: none; }
.check input[type=checkbox] { position: relative; top: 2px; accent-color: var(--accent); flex: none; }
.check .who { margin-left: auto; font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.check .files__editbtn { flex: none; }
.check--done { color: var(--ink-faint); }
.check--done .wi__desc { text-decoration: line-through; }
.addnote { display: flex; gap: 6px; padding-top: 8px; }
.addnote input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; font: inherit; font-size: 12.5px; background: var(--surface); color: var(--ink); }
.addnote input:focus { outline: none; border-color: var(--accent); }
textarea.newsflash { width: 100%; box-sizing: border-box; min-height: 160px; border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px; font: inherit; font-size: 13px; line-height: 1.5; resize: vertical; background: var(--surface); color: var(--ink); }
textarea.newsflash:focus { outline: none; border-color: var(--accent); }
/* the released newsflash: frozen fact, dimmed paper (double class outranks
   the later .mdbox surface/padding rules) */
.mdbox.newsflash--frozen { background: var(--surface-dim); border: 1px solid var(--line-soft); border-radius: 7px; padding: 11px 13px; font-size: 13px; }
.act { display: flex; gap: 9px; padding: 6px 0; border-top: 1px solid var(--line-soft); font-size: 12.5px; }
.act:first-child { border-top: none; }
.act .t { color: var(--ink-faint); font-family: var(--mono); font-size: 11px; white-space: nowrap; padding-top: 2px; }
.act .sys { color: var(--ink-faint); }
.blockrow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.blockrow:first-child { border-top: none; }
.blockrow b { font-weight: 600; }
.blockrow .st { flex: none; }
@media (max-width: 1150px) { .cols { grid-template-columns: 1fr; } }

/* ── Attachments (file list + upload, _attachments.html.twig) ───── */
.files { display: flex; flex-direction: column; gap: 3px; }
.feed__link { color: inherit; text-decoration: none; }
.feed__link:hover { color: var(--accent); text-decoration: underline; }
/* pasted screenshots in rendered markdown — boxed, click opens the lightbox */
.mdbox img, .comment__body img {
    max-width: 100%;
    max-height: 320px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid var(--line-soft);
    cursor: zoom-in;
}
/* thumbnail strip under paste-enabled textareas — the only preview a
   still-editable field gets (testplan feedback stays a textarea while
   the iteration is actionable) */
.pastepreview { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pastepreview img {
    display: block;
    max-height: 72px;
    max-width: 160px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    cursor: zoom-in;
}
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 94vh; }
dialog.lightbox::backdrop { background: rgba(16, 34, 33, 0.65); }
dialog.lightbox img {
    display: block;
    max-width: 92vw;
    max-height: 90vh;
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    cursor: zoom-out;
}
/* Caption under the image (description, else Claude's summary — vision.md).
   The min-width keeps it readable under a narrow portrait image: without it
   the dialog shrinks to the image and the text squeezes into a tall column. */
dialog.lightbox .lightbox__summary {
    margin: 10px auto 0;
    box-sizing: border-box;
    min-width: min(88vw, 520px);
    max-width: min(92vw, 640px);
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--surface);
    background: rgba(16, 34, 33, 0.82);
    border-radius: 8px;
}
/* Document lightbox: a small .md attachment rendered through the markdown
   pipeline. A solid, scrollable panel (the image variant is transparent);
   clicks on the document stay live, so no zoom-out cursor. */
dialog.lightbox.lightbox--doc {
    background: var(--surface);
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    width: min(90vw, 760px);
    max-height: 90vh;
    overflow: auto;
    cursor: default;
}
.lightbox__doc .lightbox__dl { display: block; text-align: right; padding: 10px 14px 0; font-size: 12px; }
.lightbox__doc .mdbox { background: transparent; }
.files__row { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; min-width: 0; }
.files__name { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.files__name:hover { text-decoration: underline; }
.files__row .mono { font-size: 10.5px; color: var(--ink-faint); }
.files__desc { margin: 1px 0 4px 20px; font-size: 11.5px; color: var(--ink-faint); overflow-wrap: anywhere; }
.files__editbtn { border: 0; background: none; color: var(--ink-faint); cursor: pointer; font-size: 12px; padding: 0 2px; flex: none; }
.files__editbtn:hover { color: var(--accent); }
/* raw-download escape hatch next to lightbox-viewable images */
.files__dl { color: var(--ink-faint); text-decoration: none; font-size: 12px; flex: none; }
.files__dl:hover { color: var(--accent); }
.files__descform { margin: 1px 0 4px 20px; }
.files__descform input { width: 100%; box-sizing: border-box; font-size: 11.5px; padding: 2px 6px; border: 1px solid var(--line-soft); border-radius: 4px; background: var(--surface); color: var(--ink); }
.files__add { margin-top: 6px; }
.files > .muted { margin: 0; font-size: 12.5px; }
.lane__pad { padding: 10px 16px; }

/* ── Development detail ────────────────────────────────────────── */
.dev-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.assignee { display: inline-flex; align-items: center; gap: 8px; }
.assignee .flag { display: inline-flex; align-items: center; gap: 6px; }

/* ── Board mechanics: dropdown panels, inline create, drag & drop ── */
.droppanel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;
    min-width: 200px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(22, 35, 46, .12);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.droppanel__item {
    text-align: left;
    padding: 4px 8px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    font-size: 12.5px;
    color: var(--ink-soft);
    cursor: pointer;
    white-space: nowrap;
}
.droppanel__item:hover { background: var(--surface-dim); color: var(--ink); }
.droppanel__item--warn:hover { color: var(--c-afgekeurd); }
.droppanel--form { padding: 10px; gap: 6px; }
.droppanel--form .btn { align-self: flex-end; margin-top: 4px; }
/* inline create form inside a titlerow droppanel (＋ development / project) */
.droppanel--form form { display: flex; flex-direction: column; gap: 6px; }
.droppanel--form form .btn { align-self: flex-end; margin-top: 4px; }
.droppanel--form input {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 5px 10px;
    font: inherit;
    font-size: 12.5px;
    background: var(--surface);
    min-width: 240px;
}
.droppanel--form input:focus { outline: none; border-color: var(--accent); }
/* controller-wiring wrapper (data-controller span) — invisible to the flex column */
.droppanel__group { display: contents; }
.droppanel__check {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--ink-soft);
    cursor: pointer;
    white-space: nowrap;
}
.droppanel__check:hover { color: var(--ink); }
.droppanel__check input { accent-color: var(--accent); }
.droppanel__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 12.5px;
    color: var(--ink-soft);
    white-space: nowrap;
}
.droppanel__row select { font: inherit; color: var(--ink); border: 1px solid var(--line); border-radius: 5px; padding: 1px 4px; background: var(--surface); }

.stagemenu { position: relative; margin-left: auto; }
.stagemenu summary, .rowmenu summary { list-style: none; cursor: pointer; }
.stagemenu summary::-webkit-details-marker, .rowmenu summary::-webkit-details-marker { display: none; }
.rowmenu { position: relative; display: inline-flex; }
.rowmenu summary {
    padding: 0 6px;
    border-radius: 4px;
    color: var(--ink-faint);
    font-weight: 700;
}
.rowmenu summary:hover { background: var(--surface-dim); color: var(--ink); }

.addform { margin: 6px 0; }
.addform summary { list-style: none; cursor: pointer; display: inline-block; }
.addform summary::-webkit-details-marker { display: none; }
.addform form { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.addform input {
    padding: 5px 9px;
    border: 1px solid var(--line);
    border-radius: 5px;
    font: inherit;
    font-size: 13px;
    min-width: 280px;
}
.addform input:focus { outline: none; border-color: var(--accent); }
.addform--dev { margin: 0 0 0 auto; }
.addform--dev form { margin: 0; }
.addform--dev input { min-width: 220px; }
/* Appbar/stage-strip variants open as a floating panel instead of pushing layout */
.addform--project, .addform--stage { position: relative; margin: 0; }
.addform--project form, .addform--stage form {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;
    margin: 0;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(22, 35, 46, .12);
}
.addform--project input, .addform--stage input { min-width: 220px; }
.addform--stage form { left: 0; right: auto; }

/* KB-draft tab: stacked drafts, column create form (filename + markdown) */
.kbdraft + .kbdraft { border-top: 1px solid var(--line-soft); margin-top: 16px; padding-top: 16px; }
.kbdraft .flag { display: flex; align-items: center; gap: 8px; }
.addform--kbdraft { margin-top: 14px; }
.addform--kbdraft form { flex-direction: column; align-items: stretch; }
.addform--kbdraft input { align-self: flex-start; }

.lane--unassigned .lane__head .branchname { color: var(--ink-faint); font-style: italic; }
.lane--unassigned { border-style: dashed; }
/* empty zonder-branch: one quiet dashed line — still the drop zone itself */
.nolane {
    border: 1px dashed var(--line);
    border-radius: 9px;
    padding: 8px 14px;
    margin-bottom: 14px;
    font-size: 12.5px;
    color: var(--ink-faint);
    font-style: italic;
}

.sortable-ghost { opacity: .4; }
.sortable-drag { box-shadow: 0 8px 24px rgba(22, 35, 46, .18); }
.row[data-dev-id] { cursor: grab; }
.row[data-dev-id]:active { cursor: grabbing; }

.claimbtn--edit { margin-left: 8px; }
.titleedit { display: inline-flex; gap: 6px; align-items: center; }
.titleedit input {
    font: inherit;
    padding: 3px 8px;
    border: 1px solid var(--line);
    border-radius: 5px;
    min-width: 380px;
}
.mdedit {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font: 13px/1.55 var(--mono);
    resize: vertical;
}
.mdedit:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(74, 119, 119, .15); }

/* groove tab: one fold per conversation, thread fetched live on open */
.gconvo { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; }
.gconvo__summary { cursor: pointer; padding: 8px 12px; font: 600 13px var(--mono); color: var(--ink-soft); }
.gconvo[open] .gconvo__summary { border-bottom: 1px solid var(--line); }
.gconvo__body { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.gconvo__title { margin: 0; font-weight: 600; }
.gconvo__title a.claimbtn { text-decoration: none; display: inline-block; margin-left: 6px; }
.gmsg { border-left: 3px solid var(--line); padding: 2px 0 2px 10px; }
.gmsg--note { border-left-color: var(--accent); }
.gmsg__head { font: 500 11.5px var(--mono); }
.gmsg__body { white-space: pre-wrap; font-size: 13px; }

/* dismissal: dev's rebuttal at the top of the copied iteration's testplan */
.dismissnote { margin-bottom: 14px; background: var(--surface); border: 1px solid var(--line); }
.dismissnote .mdbox { margin-top: 6px; }

/* groove conversation linking (picker + fetch-by-number) */
.groove-links { position: relative; display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.groove-links .flag--mail { display: inline-flex; align-items: center; gap: 4px; }
.groove-picker {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    min-width: 320px;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(22, 35, 46, .12);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.groove-picker__list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.groove-picker__item {
    text-align: left;
    padding: 4px 8px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    font-size: 12.5px;
    color: var(--ink-soft);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.groove-picker__item:hover { background: var(--surface-dim); color: var(--ink); }
.groove-picker__byid { display: flex; gap: 6px; }
.groove-picker__byid input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 5px;
    font: inherit;
    font-size: 12.5px;
}
.groove-picker__byid input:focus { outline: none; border-color: var(--accent); }
.groove-picker__error { font-size: 12px; }

/* sprint proposal (button + review panel) */
.sprint { position: relative; display: inline-flex; align-items: center; }
.sprint-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    min-width: 420px;
    max-width: 560px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(22, 35, 46, .12);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sprint-panel input[type=text],
.sprint-panel input[type=number] {
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 5px;
    font: inherit;
    font-size: 12.5px;
}
.sprint-panel input:focus { outline: none; border-color: var(--accent); }
.sprint-panel__steer { display: flex; gap: 6px; }
.sprint-panel__steer input[type=text] { flex: 1; }
.sprint-panel__steer input[type=number] { width: 64px; }
.sprint-panel__review { display: flex; flex-direction: column; gap: 8px; }
.sprint-panel__name { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.sprint-panel__name input { flex: 1; font-family: var(--mono, monospace); }
.sprint-panel__rationale { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.sprint-panel__items { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.sprint-item { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; cursor: pointer; }
.sprint-item input { flex-shrink: 0; }
.sprint-item__why { color: var(--ink-soft); }
.sprint-panel__actions { display: flex; gap: 6px; }
.sprint-panel__error { font-size: 12px; }
.dev-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.dev-side__hint { font-size: 12px; }

.mdbox { padding: 14px 16px; background: var(--surface); font-size: 13.5px; }
.mdbox > :first-child { margin-top: 0; }
.mdbox > :last-child { margin-bottom: 0; }
.mdbox h1, .mdbox h2, .mdbox h3 { margin: 14px 0 6px; font-size: 14.5px; }
.mdbox p, .mdbox ul, .mdbox ol { margin: 6px 0; }
.mdbox code { font-family: var(--mono); font-size: 12px; background: var(--surface-dim); border: 1px solid var(--line-soft); border-radius: 4px; padding: 0 4px; }
.mdbox pre { background: var(--surface-dim); border: 1px solid var(--line-soft); border-radius: 7px; padding: 10px 12px; overflow-x: auto; }
.mdbox pre code { border: 0; background: none; padding: 0; }

/* Advisory description check (dev #781): dismissible verdict under the
   description after a save. Dashed = derived/advisory, the house semantic. */
.descheck { margin-top: 10px; padding: 9px 12px; border: 1px dashed var(--line); border-radius: 7px; background: var(--surface-dim); display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-soft); }
.descheck__body { flex: 1; }
.descheck__verdict { margin: 0; }
.descheck__tips { margin: 6px 0 0; padding-left: 18px; }
.descheck__tips:empty { display: none; }
.mdbox table { border-collapse: collapse; margin: 8px 0; }
.mdbox th, .mdbox td, .comment__body th, .comment__body td { border: 1px solid var(--line-soft); padding: 4px 9px; font-size: 12.5px; }
.mdbox th, .comment__body th { background: var(--surface-dim); text-align: left; }
.comment__body table { border-collapse: collapse; margin: 6px 0; }
/* inside a panel the panel sets the rhythm; mdbox only brings typography */
.panel__body.mdbox { padding: 4px 14px 12px; }

.comment { border-top: 1px solid var(--line-soft); padding: 10px 2px; }
.comment__meta { font-size: 12.5px; margin-bottom: 2px; }
.comment__body { font-size: 13px; }
.comment__body p { margin: 4px 0; }
/* Agent turns in a spec-session thread: honestly attributed to the bot
   user AND visually distinct — house-mint wash, no impersonating a human. */
.comment--bot { background: var(--accent-dim); border-left: 3px solid var(--mint); border-radius: 4px; padding-left: 10px; padding-right: 8px; }
/* Claude has the turn: a pending row, dashed + italic like every derived/
   transient state — the page polls and flips on its own. */
.comment--pending { margin: 0; border-top: 1px dashed var(--line); padding: 10px 2px; font-style: italic; font-size: 12.5px; color: var(--ink-faint); }

/* The live peek under the pending row: mid-turn agent activity, dashed +
   faint like every derived state — it mirrors the remote, phrello owns none of it. */
.peek { margin: 0 2px 6px; border-left: 2px dashed var(--line); padding: 2px 0 2px 10px; }
.peek__head { margin: 0 0 4px; font-style: italic; font-size: 12px; color: var(--ink-faint); }
.peek__line { margin: 2px 0; font-size: 12px; color: var(--ink-faint); overflow-wrap: anywhere; }
.peek__line--tool { font-family: var(--mono); font-size: 11.5px; }
.peek--fold > summary { cursor: pointer; }
.peek--fold > summary::-webkit-details-marker { display: none; }
.peek--fold > summary::before { content: '▸ '; }
.peek--fold[open] > summary::before { content: '▾ '; }

.comment-form { margin-top: 12px; }
.comment-form textarea,
.sidebox--newsession textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 8px 12px;
    font: inherit;
    font-size: 13px;
    resize: vertical;
    background: var(--surface);
}
.comment-form textarea:focus,
.sidebox--newsession textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(74, 119, 119, .15); }
.comment-form__foot { display: flex; align-items: center; gap: 12px; justify-content: flex-end; margin-top: 8px; }
.comment-form__error { color: var(--c-afgekeurd); }

.iter { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; margin-bottom: 10px; overflow: hidden; }
.iter--past { opacity: .65; }
.iter__head { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--surface-dim); border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.iter__body { padding: 8px 12px; font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.iter__body code { font-family: var(--mono); font-size: 11.5px; }
/* dev-page rail: iterations sit flush inside their .panel — hairlines, not
   boxes-in-boxes. Older iterations fold to a one-line <details> summary. */
.panel > .iter { border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; margin: 0; }
.iter--fold summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 12px; color: var(--ink-soft); }
.iter--fold summary::-webkit-details-marker { display: none; }
.iter--fold summary:hover { background: var(--surface-dim); }
.iter--fold[open] summary { background: var(--surface-dim); border-bottom: 1px solid var(--line-soft); }
.iter--fold summary .mono { font-size: 11.5px; }
.iter--fold summary .sep { color: var(--ink-faint); }
.iter--fold summary .avatar { margin-left: auto; }
.st--verdict-open { color: var(--c-gebouwd); background: var(--c-gebouwd-bg); border-color: var(--c-gebouwd-line); }
.st--verdict-afgekeurd { color: var(--c-afgekeurd); background: var(--c-afgekeurd-bg); border-color: var(--c-afgekeurd-line); }
.st--verdict-geslaagd { color: var(--c-geslaagd); background: var(--c-geslaagd-bg); border-color: var(--c-geslaagd-line); }

/* ── Evidence (NEN 7510) ───────────────────────────────────────── */
/* Freshness is derived (mirrors ter test) — dashed + italic is the house
   semantic for derived state. Run outcomes are stored facts: solid. */
.st--ev-geverifieerd { color: var(--c-geslaagd); background: var(--c-geslaagd-bg); border-color: var(--c-geslaagd-line); border-style: dashed; font-style: italic; }
.st--ev-verouderd { color: var(--c-afgekeurd); background: var(--c-afgekeurd-bg); border-color: var(--c-afgekeurd-line); border-style: dashed; font-style: italic; }
.st--ev-ongeverifieerd { color: var(--c-neutraal); background: var(--c-neutraal-bg); border-color: var(--c-neutraal-line); border-style: dashed; font-style: italic; }
.st--outcome-geverifieerd { color: var(--c-geslaagd); background: var(--c-geslaagd-bg); border-color: var(--c-geslaagd-line); }
.st--outcome-gefaald { color: var(--c-afgekeurd); background: var(--c-afgekeurd-bg); border-color: var(--c-afgekeurd-line); }
.lane--stale { border-color: var(--c-afgekeurd-line); }
.lane > .verdictbox__error { padding: 8px 16px 0; }
/* Padded body for prose/mixed content inside a lane; .row/.titem children
   stay full-width with their own padding. */
.lane__body { padding: 6px 16px 14px; }
.lane__body .mdbox { padding: 10px 0; }
.evplan__section { margin: 16px 0 6px; font-size: 13.5px; }
.evplan__section:first-child { margin-top: 8px; }
.evplan__items { margin: 4px 0 10px; padding-left: 24px; font-size: 13px; }
.evplan__items li { margin: 3px 0; }
.evcard__meta { margin: 4px 0; font-size: 12.5px; }
.evcard__stale { margin: 8px 0; font-size: 12.5px; color: var(--c-afgekeurd); }
.evcard__dev { grid-template-columns: minmax(0, 1fr) auto auto; }
.evcard__iters { grid-column: 1 / -1; font-size: 11.5px; }

@media (max-width: 1200px) {
    .dev-body { grid-template-columns: 1fr; }
}

/* ── Search (rail box, /search page) ───────────────────────────── */
.rail__search { padding: 0 12px 6px; }
.rail__searchinput {
    width: 100%;
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-dim);
    font: 12.5px var(--sans);
    color: var(--ink);
}
.rail__searchinput::placeholder { color: var(--ink-faint); }
.rail__searchinput:focus { background: var(--surface); border-color: var(--accent); outline: none; }

.searchbar { display: flex; gap: 8px; max-width: 640px; margin-bottom: 12px; }
.searchbar__input {
    flex: 1;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    font: 14px var(--sans);
    color: var(--ink);
}
.searchbar__input:focus { border-color: var(--accent); outline: none; }

.searchfilters { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.searchfilters .chips { margin-left: 0; flex-wrap: wrap; }

.hits { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.hit {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    color: var(--ink);
}
.hit:hover { border-color: var(--accent); color: var(--ink); }
.hit__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.hit__project { font-weight: 600; color: var(--accent-dark); }
.hit__title { font-size: 14.5px; font-weight: 600; }
.hit__snippet { font-size: 12.5px; color: var(--ink-soft); }
.hit mark { background: var(--mint); color: var(--ink); border-radius: 2px; padding: 0 1px; }

.tabfilter { display: flex; align-items: center; gap: 8px; margin-left: auto; padding: 0 12px; }
.tabfilter__input {
    width: 180px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    font: 12.5px var(--sans);
    color: var(--ink);
}
.tabfilter__input::placeholder { color: var(--ink-faint); }
.tabfilter__input:focus { border-color: var(--accent); outline: none; }
.tabfilter__count { font-size: 11.5px; color: var(--ink-faint); }
/* released tab: the filter only sees the rendered page — this carries the query to /search */
.tabfilter__all { font-size: 11.5px; color: var(--accent-dark); text-decoration: none; white-space: nowrap; }
.tabfilter__all:hover { text-decoration: underline; }

.notice { padding: 10px 16px; border-radius: 8px; font-size: 13px; max-width: 760px; }
.notice--warn { background: var(--c-tertest-bg); border: 1px solid var(--c-tertest-line); color: var(--c-tertest); }

.pager { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 12.5px; }
/* the released tab's pager sits inside the lane box */
.pager--tab { margin: 6px 12px 10px; }

/* ── Release log (vertical timeline: branch names are the markers) ─ */
.timeline { list-style: none; margin: 8px 0 0 6px; padding: 0; max-width: 760px; }
.timeline__entry {
    position: relative;
    padding: 0 0 26px 28px;
    border-left: 2px solid var(--line);
}
.timeline__entry:last-child { border-left-color: transparent; }
.timeline__entry::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg);
}
.timeline__marker { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.timeline__marker .branchname { font-size: 14.5px; }
.timeline__date { font-size: 12px; color: var(--ink-faint); }
.timeline__devs { list-style: none; margin: 0; padding: 0; }
.timeline__devs li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; }

/* ── Flash messages ────────────────────────────────────────────── */
.flash { padding: 10px 22px; font-size: 13px; }
.flash--error { background: var(--c-afgekeurd-bg); border-bottom: 1px solid var(--c-afgekeurd-line); color: var(--c-afgekeurd); }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .dash { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
    .shell { grid-template-columns: 1fr; }
    .rail { position: static; height: auto; }
    .rail__foot { margin-top: 0; }
    .row { grid-template-columns: minmax(0, 1fr) 44px 168px; }
    /* Simple rows keep their flags: that's where the deleted-page restore
       button and the tab-row ⋯ menu live — hiding them kills the gesture. */
    .row:not(.row--simple) .row__flags, .row__claim { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
    .row, .btn, .rail__proj, .tab { transition: background .1s, border-color .1s, color .1s; }
}