/* ─────────────────────────────────────────────────────────────────────────
   Componenten: de kleine set onderdelen waar elk stuk uit is opgebouwd.
   Sinds 7 oktober in richting B, "Kaarten": een licht grijs bureau
   (--bg) met witte kaarten (--card) erop. Elke groep is een vak dat je
   ziet; binnen een kaart scheiden haarlijnen en ruimte, geen inktlijnen.
   Geselecteerd is een zachte vulling, niet omgekeerd. Plus de
   bedrijfskleur als merkteken. Graphite, de vorige laag, staat in
   _archief/stijl-graphite-voor-kaarten.

   Gedeeld door alle stukken: een wijziging hier geldt overal.
   Na een wijziging: python3 _basis/verspreid.py (kopieert naar elk stuk).
   Wat maar op één scherm voorkomt hoort in de scherm.css van dat stuk.
   ───────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
svg { display: block; flex: none; }
::selection { background: color-mix(in srgb, var(--ink) 14%, transparent); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

/* ── type: één familie, gewicht doet het werk ─────────────────────────── */
.display { font-family: var(--f-ui); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; }
.h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.006em; }
.h3 { font-size: 13.5px; font-weight: 700; }
.eyebrow { font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.small { font-size: 12.5px; }
.tiny { font-size: 11.5px; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); font-size: 0.92em; font-variant-numeric: tabular-nums; }
.strong { font-weight: 700; }
.nowrap { white-space: nowrap; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.money-in { color: var(--money-in); }
.debt { color: var(--debt); }
.attn-text { color: var(--attn); }
.crit-text { color: var(--crit); }
.accent-text { color: var(--accent-text); }

/* ── iconen ───────────────────────────────────────────────────────────── */
.i { display: inline-block; vertical-align: -3px; width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.i.sm { width: 14px; height: 14px; }
.i.xs { width: 12px; height: 12px; }
.i.lg { width: 18px; height: 18px; }
.i.xl { width: 22px; height: 22px; }

/* ── knoppen ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 11px;
  border: 1px solid var(--btn-line, var(--fill)); border-radius: var(--r-sm);
  background: var(--btn-bg, var(--fill)); color: var(--text);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
  user-select: none;
}
.btn:hover { background: var(--btn-hover, var(--fill-hover)); border-color: var(--btn-line-hover, var(--fill-hover)); }
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary, .btn.accent { background: var(--ink); border-color: var(--ink); color: var(--text-inv); }
.btn.primary:hover, .btn.accent:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--text-inv); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--fill); border-color: transparent; color: var(--text); }
.btn.quiet { background: var(--bg-elev); border-color: var(--card-line); color: var(--text-2); }
.btn.quiet:hover { background: var(--bg-elev); border-color: var(--line-strong); color: var(--text); }
.btn.sm { height: 26px; padding: 0 9px; font-size: 12.5px; border-radius: 7px; }
.btn.xs { height: 22px; padding: 0 7px; font-size: 11.5px; border-radius: 6px; gap: 4px; }
.btn.icon { width: 30px; padding: 0; }
.btn.icon.sm { width: 26px; }
.link { color: var(--ink); font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 24%, transparent); text-underline-offset: 3px; }
.link:hover { text-decoration-color: var(--ink); }
.link.quiet { color: var(--text-2); font-weight: 500; text-decoration: none; }
.link.quiet:hover { color: var(--text); text-decoration: underline; }
.btn-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  font-family: var(--f-ui); font-size: 11px; font-weight: 600; color: var(--text-3);
  background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 4px;
}

/* ── invoer ───────────────────────────────────────────────────────────── */
.input, .select, .textarea {
  width: 100%; height: 32px; padding: 0 10px;
  border: 1px solid var(--card-line); border-radius: var(--r-sm);
  background: var(--bg-elev); color: var(--text); font-size: 13px; outline: none;
  transition: border-color var(--d-fast) var(--ease);
}
.textarea { height: auto; padding: 8px 10px; line-height: 1.55; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--ink); }
.select { appearance: none; -webkit-appearance: none; padding-right: 26px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239d9d9c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center; background-size: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label, .field > .label { font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.search {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px;
  border: 1px solid var(--card-line); border-radius: var(--r-sm); background: var(--bg-elev); color: var(--text-3);
}
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13px; color: var(--text); }
.search:focus-within { border-color: var(--ink); }

.check {
  width: 16px; height: 16px; flex: none; border-radius: 4px; border: 1.5px solid var(--text-3);
  display: inline-flex; align-items: center; justify-content: center; background: var(--bg-elev);
  transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.check.round { border-radius: 50%; }
.check.on { background: var(--ink); border-color: var(--ink); color: var(--text-inv); }
.check svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.2; fill: none; opacity: 0; }
.check.on svg { opacity: 1; }
button.check:hover { border-color: var(--ink); }

.toggle { width: 30px; height: 18px; border-radius: 999px; background: var(--line-strong); position: relative; flex: none; transition: background var(--d-fast) var(--ease); }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform var(--d) var(--ease-out); }
.toggle.on { background: var(--ink); }
.toggle.on::after { transform: translateX(12px); }

/* ── chips en labels ──────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border: 1px solid var(--card-line); border-radius: var(--r-sm); background: var(--bg-elev);
  font-size: 12.5px; font-weight: 500; color: var(--text-2); white-space: nowrap;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.chip:hover { color: var(--text); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--text-inv); }
.chip .n { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.chip.on .n { color: color-mix(in srgb, var(--text-inv) 60%, transparent); }

.tag {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px;
  border-radius: var(--r-full); font-size: 11.5px; font-weight: 600; white-space: nowrap;
  color: var(--text-2); background: var(--fill); border: 1px solid transparent;
}
.tag.outline, .tag.src { background: transparent; border-color: var(--line-strong); }
.tag.src { color: var(--text-3); font-weight: 400; }
.tag.accent, .tag.ok { color: var(--text); background: var(--fill-hover); }
.tag.attn, .tag.crit { background: var(--attn-soft); color: var(--signal); border-color: transparent; }
.tag.debt { color: var(--text-2); }
/* een schatting of afleiding zegt dat altijd: gestippeld is "geen feit" */
.tag.est { background: transparent; border: 1px dashed color-mix(in srgb, var(--ink) 40%, transparent); color: var(--text-3); }
.tag .i { width: 12px; height: 12px; }

/* ── bedrijfskleur als merkteken ──────────────────────────────────────────
   Elk element dat bij een bedrijf hoort draagt het in zijn inline style:
   style="--tone:var(--t-lvdg)". Wat erin zit erft het.
   Drie merktekens, verder niets:
   - de stip:       een klein vierkantje in de bedrijfskleur
   - de streep:     3px links langs een rij of blok (zie de scherm.css)
   - de codetegel:  de code (LV, GD) op een lichte tint van de kleur */
.dot { width: 8px; height: 8px; border-radius: 2px; flex: none; display: inline-block; background: var(--tone, var(--t-all)); }
.dot.sm { width: 7px; height: 7px; }
.dot.attn, .dot.crit { background: var(--signal); }
.dot.accent { background: var(--ink); }
.dot.muted { background: var(--line-strong); }

.ent { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; min-width: 0; }
.ent .dot { background: var(--tone, var(--t-all)); }
.mono-tile {
  width: 20px; height: 20px; flex: none; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--tone, var(--t-all)) 72%, var(--text));
  background: color-mix(in srgb, var(--tone, var(--t-all)) var(--tint-tile), var(--bg-elev));
}
.mono-tile.xs { width: 18px; height: 16px; font-size: 8.5px; border-radius: 3px; }
.mono-tile.lg { width: 34px; height: 34px; border-radius: 6px; font-size: 13px; }
.mono-tile.xl { width: 48px; height: 48px; border-radius: 6px; font-size: 17px; }

.av {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, var(--bg-elev)); border: 1px solid var(--bg-elev);
}
.av.sm { width: 20px; height: 20px; font-size: 9px; }
.av.lg { width: 34px; height: 34px; font-size: 12.5px; }
.av.xl { width: 52px; height: 52px; font-size: 17px; }
.av.ext { background: var(--bg-sunken); color: var(--text-3); }
.av.me { background: var(--ink); color: var(--text-inv); }
.av-stack { display: inline-flex; }
.av-stack .av + .av { margin-left: -6px; }

/* het EC-teken: een cirkel met horizon, overal waar EC spreekt */
.ec-mark { display: inline-block; vertical-align: -2px; width: 14px; height: 14px; flex: none; color: var(--ink); }

/* ── layout ───────────────────────────────────────────────────────────── */
.row-flex { display: flex; align-items: center; gap: 8px; min-width: 0; }
.col { display: flex; flex-direction: column; min-width: 0; }
.grow { flex: 1; min-width: 0; }
.spacer { flex: 1; }
.sep-v { width: 1px; align-self: stretch; background: var(--line); flex: none; }
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }

/* ── een groep is een kaart ────────────────────────────────────────────────
   Op het bureau (een .page) is elke sectie een witte kaart. Binnen een
   kaart, een paneel of een record is een sectie gewoon een kop met ruimte
   erboven: geen lijn, geen tweede doos. */
.section { margin-bottom: 24px; }
.section-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; min-height: 24px; }
.section-head .title { font-size: 15px; font-weight: 700; letter-spacing: -0.006em; color: var(--text); }
.page .section, .card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--card-r); box-shadow: var(--card-shadow); }
.page .section { padding: 14px 18px 12px; margin-bottom: var(--card-gap); }
.page .section .section, .page .card .section, .page .panel .section { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin-bottom: 20px; }
.section-head .count { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.section-head .end { margin-left: auto; display: flex; gap: 6px; align-items: center; }

.list { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 9px 10px;
  border-bottom: 1px solid var(--line-faint); text-align: left; position: relative;
  transition: background var(--d-fast) var(--ease);
}
.row:last-child { border-bottom: 0; }
button.row:hover, a.row:hover, .row.clickable:hover { background: var(--bg-hover); cursor: pointer; }
.row .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.row .t { font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .s { font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.row .end { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.row .amt { font-variant-numeric: tabular-nums; font-size: 13.5px; white-space: nowrap; }
.list.boxed { border: 1px solid var(--card-line); border-radius: var(--card-r); background: var(--card); box-shadow: var(--card-shadow); overflow: hidden; }
.list.boxed .row { padding-left: 14px; padding-right: 14px; }

/* een paneel is een kaart; een vak binnen een kaart is zacht gevuld */
.panel { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--card-r); box-shadow: var(--card-shadow); }
.panel.pad { padding: 16px 18px; }
.panel.tint { background: var(--bg-tint); box-shadow: none; }
.well { background: var(--bg-tint); border: 1px solid var(--line-faint); border-radius: 10px; padding: 12px 14px; }

dl.facts { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 7px 18px; font-size: 13px; }
dl.facts dt { color: var(--text-3); }
dl.facts dd { color: var(--text); min-width: 0; }

/* ── gesegmenteerd en tabs ────────────────────────────────────────────── */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-sm); background: var(--seg-bg); border: 0; }
.seg button { height: 24px; padding: 0 10px; border-radius: 6px; font-size: 12.5px; color: var(--text-2); font-weight: 600; white-space: nowrap; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--bg-elev); color: var(--text); font-weight: 700; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); }
.seg.lg { padding: 3px; border-radius: 9px; }
.seg.lg button { height: 30px; padding: 0 15px; font-size: 13.5px; border-radius: 7px; display: inline-flex; align-items: center; gap: 7px; }
.seg .n { font-size: 11px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.seg .n.attn { color: var(--signal); font-weight: 700; }

/* ── voortgang ────────────────────────────────────────────────────────── */
.bar { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; position: relative; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--ink); }
.bar > i.soft { background: color-mix(in srgb, var(--ink) 30%, transparent); }
.bar > i.attn { background: var(--signal); }
.bar.thin { height: 4px; }

/* ── EC spreekt in een zacht vak: één per record, direct onder de kop ─── */
.sugg { position: relative; padding: 12px 14px 12px; border-radius: 10px; background: var(--bg-tint); border: 1px solid var(--line-faint); }
.sugg-head { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); font-weight: 600; }
.sugg-head .ec-mark { color: var(--ink); }
.sugg-head .conf { margin-left: auto; font-weight: 500; color: var(--text-3); font-size: 11.5px; }
.sugg-title { font-size: 14.5px; font-weight: 700; margin-top: 6px; color: var(--text); line-height: 1.35; }
.sugg-body { font-size: 13px; color: var(--text-2); margin-top: 4px; line-height: 1.55; }
.sugg-fields { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; align-items: center; }
.sugg-fields dt { color: var(--text-3); }
.sugg-fields dd { color: var(--text); display: flex; align-items: center; gap: 6px; min-width: 0; }
.sugg-why { margin-top: 10px; font-size: 12px; color: var(--text-3); line-height: 1.55; }
.sugg-why b { color: var(--text-2); font-weight: 600; }
.sugg-actions { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.sugg.quiet { background: transparent; border-color: var(--line); }
/* een EC-blok dat los op het bureau ligt (boven een lijst, op een pagina) is een witte kaart */
.cw-top > .sugg, .page > .sugg, .stage-scroll > .sugg { background: var(--card); border-color: var(--card-line); border-radius: var(--card-r); box-shadow: var(--card-shadow); padding: 14px 18px; }
/* als EC het niet weet: een paar eerlijke keuzes, elk met wat er dan gebeurt */
.sugg-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.sugg-choices .choice { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 10px; border: 1px solid var(--card-line); background: var(--bg-elev); text-align: left; font-size: 13px; transition: border-color var(--d-fast); }
.sugg-choices .choice:hover { border-color: var(--ink); }
.sugg-choices .choice > span { display: flex; flex-direction: column; gap: 2px; }
.sugg-choices .choice > .i { margin-top: 2px; color: var(--text-2); }
.sugg.done { opacity: 0.6; }
/* in het vak van EC: de hoofdactie gevuld in inkt, de rest wit */
.sugg { --btn-bg: var(--bg-elev); --btn-line: var(--card-line); --btn-hover: var(--bg-elev); --btn-line-hover: var(--line-strong); }

.quote { border-left: 2px solid var(--line-strong); padding: 2px 0 2px 11px; margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.quote .who { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 4px; }

/* ── leeg is een uitspraak ────────────────────────────────────────────── */
.empty { padding: 28px 8px; text-align: center; color: var(--text-3); font-size: 13px; }
.empty .big { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: var(--text); margin-bottom: 4px; }
.calm-line { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 12.5px; }

/* ── popovers en menu's ───────────────────────────────────────────────── */
.pop {
  position: fixed; z-index: 60; min-width: 220px; padding: 6px;
  background: var(--bg-elev); border: 1px solid var(--card-line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
  animation: pop-in var(--d) var(--ease-out);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.985); } to { opacity: 1; transform: none; } }
.pop-label { font-size: 11.5px; font-weight: 700; color: var(--text-3); padding: 8px 10px 4px; }
.pop-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: var(--r-sm); font-size: 13px; color: var(--text); text-align: left; }
.pop-item:hover { background: var(--bg-hover); }
.pop-item .s { font-size: 11.5px; color: var(--text-3); }
.pop-item .end { margin-left: auto; color: var(--text-3); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.pop-item.on .end .i { color: var(--ink); }
.pop-sep { height: 1px; background: var(--line); margin: 5px 4px; }
.pop-note { font-size: 11.5px; color: var(--text-3); padding: 8px 10px 6px; line-height: 1.5; }
.seg-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; border-radius: 6px; font-size: 12.5px; color: var(--text-2); border: 1px solid var(--line); }
.seg-btn.on { background: var(--ink); color: var(--text-inv); border-color: var(--ink); }

/* ── meldingen onderin ────────────────────────────────────────────────── */
.toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: min(620px, 92vw);
  padding: 9px 10px 9px 14px; border-radius: 10px; background: var(--ink); color: var(--text-inv);
  font-size: 13px; box-shadow: var(--shadow-pop); animation: toast-in var(--d-slow) var(--ease-out);
}
.toast .ec-mark { color: var(--text-inv); }
.toast .sub { color: color-mix(in srgb, var(--text-inv) 60%, transparent); }
.toast button { font-size: 12.5px; font-weight: 700; padding: 4px 8px; border-radius: 6px; color: inherit; white-space: nowrap; }
.toast button:hover { background: color-mix(in srgb, var(--text-inv) 14%, transparent); }
.toast.out { animation: toast-out var(--d) var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ── beweging ─────────────────────────────────────────────────────────── */
.fade-in { animation: fade-in var(--d-slow) var(--ease-out); }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.resolve-out { animation: resolve-out 420ms var(--ease) forwards; overflow: hidden; }
@keyframes resolve-out {
  0% { opacity: 1; max-height: 140px; }
  45% { opacity: 0; transform: translateX(10px); max-height: 140px; }
  100% { opacity: 0; transform: translateX(10px); max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; }
}
.flash { animation: flash 1.6s var(--ease); }
@keyframes flash { 0%, 30% { background: color-mix(in srgb, var(--ink) 8%, transparent); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* scrollbalken: aanwezig maar stil */
.scroll { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
.scroll::-webkit-scrollbar-track { background: transparent; }

table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th { text-align: left; font-size: 11.5px; font-weight: 700; color: var(--text-3); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--bg-elev); position: sticky; top: 0; z-index: 1; }
table.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line-faint); vertical-align: middle; }
table.tbl .r { text-align: right; }

/* ─────────────────────────────────────────────────────────────────────────
   Het frame van de app: bovenbalk, de balk van een plek, het werkvlak,
   modals. Elk stuk toont zijn scherm in dit frame, zodat je het in
   context ziet. De navigatie zelf wordt ontworpen in Algemeen/navigatie.
   ───────────────────────────────────────────────────────────────────────── */
#app { height: 100vh; display: flex; flex-direction: column; min-width: 1024px; }

#topbar {
  position: relative; height: var(--topbar-h); flex: none;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 0 12px 0 14px; background: var(--bg-elev); border-bottom: 1px solid var(--card-line);
}
/* een context gekozen: een lijn in de kleur van die context */
#topbar.lensed::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--lens); }
.tb-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 6px 0 2px; border-radius: 6px; flex: none; }
.brand .logo { width: 24px; height: 24px; }
.wordmark { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
@media (max-width: 1320px) { .wordmark { display: none; } }

.lens-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 9px 0 6px; min-width: 0;
  border: 1px solid var(--card-line); border-radius: var(--r-sm); background: var(--bg-elev); color: var(--text);
  font-size: 13px; font-weight: 600;
}
.lens-btn:hover { border-color: color-mix(in srgb, var(--ink) 32%, transparent); }
.lens-btn.on { border-color: var(--lens); }
.lens-btn .lens-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.lens-btn .i { color: var(--text-3); }

/* Variant B, "zelfde plek" (kit.js › renderShell; ontwerp in
   Algemeen/navigatie/bovenbalk-varianten.html). Secties zijn gescheiden.
   Het midden is altijd "waar kan ik heen": op Home de secties, in een
   sectie alleen haar eigen plekken, op precies dezelfde plek. Links wie
   en waar (‹ Home, de context, / Money; de context staat sinds 12 oktober
   linksboven, FD-27), rechts zoeken, tijd en jij.
   De zijkanten houden hun breedte; wordt het krap, dan schuift het midden. */
#topbar.tb-home, #topbar.tb-module, #topbar.tb-ground { grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); }
#topbar.tb-module, #topbar.tb-ground { padding-left: 8px; }
#topbar.tb-module .tb-left, #topbar.tb-ground .tb-left { gap: 4px; }
.tb-back { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 6px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; flex: none; }
.tb-back:hover { background: var(--bg-hover); color: var(--text); }
.tb-slash { color: var(--line-strong); font-size: 18px; font-weight: 300; margin: 0 2px; }
.tb-where { font-size: 16px; font-weight: 750; letter-spacing: -0.02em; white-space: nowrap; padding: 0 4px; }
.mod-lock { gap: 4px; margin-left: 4px; cursor: pointer; border-style: dashed; }
.tb-center { display: flex; align-items: stretch; align-self: stretch; justify-content: center; min-width: 0; }
/* op Home: de secties als deuren */
.tb-doors { display: flex; align-items: center; gap: 2px; }
.tb-door { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 10px; border-radius: 6px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.tb-door .i { color: var(--text-3); }
.tb-door:hover { background: var(--bg-hover); }
.tb-door:hover .i { color: var(--text); }
.tb-door.locked { color: var(--text-3); font-weight: 500; }
/* in een sectie: al haar plekken, geen More (hooguit acht per sectie) */
.tb-places { display: flex; align-items: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tb-places::-webkit-scrollbar { display: none; }
.place { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; font-size: 13.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; flex: none; transition: color var(--d-fast) var(--ease); }
.place:hover { color: var(--text); }
/* vet als hij aan staat, zonder dat de buren verschuiven */
.place .l { display: inline-grid; }
.place .l::after { content: attr(data-l); font-weight: 700; visibility: hidden; height: 0; overflow: hidden; }
.place.on { color: var(--text); font-weight: 700; }
.place.on::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: -1px; height: 2px; background: var(--ink); }
.place-n { font-size: 11px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.place-n.attn { color: var(--signal); }
/* binnenkomen in een sectie: de plekken schuiven zacht in */
#topbar.entering .tb-where, #topbar.entering .place, #topbar.entering .tb-door { animation: tb-in 280ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 22ms); }
@keyframes tb-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
/* in een sectie is minder ruimte: zoeken wordt een knop met ⌘K; wordt het
   krapper, dan gaat eerst de klok en dan de naam van de context */
#topbar.tb-module .cmd-btn, #topbar.tb-ground .cmd-btn { width: auto; gap: 6px; padding: 0 6px 0 9px; }
#topbar.tb-module .cmd-btn .grow, #topbar.tb-ground .cmd-btn .grow { display: none; }
@media (max-width: 1260px) { #topbar.tb-module .clock, #topbar.tb-ground .clock { display: none; } }
@media (max-width: 1140px) { #topbar.tb-module .lens-name, #topbar.tb-ground .lens-name { display: none; } }
@media (max-width: 1240px) { #topbar.tb-module .cmd-btn kbd, #topbar.tb-ground .cmd-btn kbd { display: none; } }

.tb-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.cmd-btn {
  display: flex; align-items: center; gap: 8px; height: 32px; width: 230px; padding: 0 6px 0 10px;
  border: 1px solid var(--card-line); border-radius: var(--r-sm); background: var(--bg-elev); color: var(--text-3); font-size: 13px; font-weight: 500;
}
.cmd-btn:hover { color: var(--text-2); border-color: color-mix(in srgb, var(--ink) 32%, transparent); }
@media (max-width: 1240px) { .cmd-btn { width: 150px; } .cmd-btn kbd { display: none; } }
.clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; padding: 2px 8px; border-radius: 6px; }
.clock:hover { background: var(--bg-hover); }
.clock-day { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.clock-time { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lg-ish { width: 30px; height: 30px; font-size: 11px; }

/* het werkvlak is het bureau: grijs, met de kaarten erop */
.stage { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg); overflow: hidden; }
/* een pagina vult het venster, met dezelfde rand als elke werkruimte (FD-20).
   Lange tekst houdt zelf zijn maat (.page-lede, max 70ch). */
.page { padding: 4px var(--gutter) 72px; }

/* ── de balk van het scherm (FD-20) ──────────────────────────────────────
   Onder de bovenbalk heeft elk scherm deze balk: altijd, altijd even hoog
   (--bar-h), nooit twee regels. Zo begint de inhoud op elk scherm op
   dezelfde hoogte en springt er niets als je van plek wisselt.
   Links wat je bekijkt: terug, de periode, de tabbladen van het scherm,
   zoeken en filters. Rechts hoe je het bekijkt (Dag/Week, Tabel/Bord),
   een stille status, en de hoofdknop. Wat het scherm pas bij het tekenen
   kent (zoeken en filters van een collectie of grootboek) markeert het met
   data-balk; de kit zet het hier neer.
   Sinds FD-22 (9 oktober) is de balk een witte band tegen de bovenbalk,
   met een lijn eronder: een eigen plek voor de knoppen van het scherm
   (New task, New email). Het werk begint een rand (--gutter) lager. */
.ptool {
  flex: none; display: flex; align-items: center; gap: 12px; height: var(--bar-h); padding: 0 var(--gutter); overflow: hidden; white-space: nowrap;
  margin-bottom: var(--gutter); background: var(--card); border-bottom: 1px solid var(--card-line); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 3%, transparent);
}
/* knoppen op het bureau zijn wit met een rand; in een kaart zacht gevuld */
.ptool, .cw-top, .cw-bar, .lg-bar, .rw-rail, .on-desk { --btn-bg: var(--bg-elev); --btn-line: var(--card-line); --btn-hover: var(--bg-elev); --btn-line-hover: var(--line-strong); }
/* wordt het krap, dan wijkt eerst rechts de grijze status (met …), daarna
   wordt zoeken smaller; knoppen krimpen nooit, en er komt nooit een tweede
   regel. Een rij tabbladen (bedrijven) schuift opzij. */
.pt-left { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.pt-end { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 1000 auto; min-width: 0; }
.pt-end > *, .pt-left > * { flex: none; }
.pt-end > .faint, .pt-end > .small, .pt-left > .faint, .pt-left > .small {
  display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-end > .faint > .i, .pt-end > .small > .i, .pt-left > .faint > .i, .pt-left > .small > .i { vertical-align: -2px; margin-right: 5px; }
/* zoeken en filters van een collectie of grootboek, in de balk gezet */
.ptool .cw-bar, .ptool .lg-bar { flex: 1 1 auto; min-height: 0; padding: 0; gap: 8px; }
.ptool .cw-bar.sel { height: 38px; margin: 0; padding: 0 6px 0 10px; }
@media (max-width: 1360px) { .ptool .cw-count, .ptool .cw-k { display: none; } }
@media (max-width: 1240px) { .ptool .cw-search, .ptool .lg-search { width: 170px; } }
@media (max-width: 1100px) { .ptool .cw-search, .ptool .lg-search { width: 132px; } }
/* in de band: knoppen, zoeken en Tabel | Bord zacht gevuld, zoals in een
   kaart; de hoofdknop blijft inkt. Iets gekozen: de selectiebalk is een
   zacht vlak in de band, geen kaart. */
.ptool { --btn-bg: var(--fill); --btn-line: var(--fill); --btn-hover: var(--fill-hover); --btn-line-hover: var(--fill-hover); }
.ptool .search { background: var(--fill); border-color: var(--fill); }
.ptool .seg { background: var(--fill); }
.ptool .cw-bar.sel { background: var(--fill); border-color: transparent; box-shadow: none; --btn-bg: var(--card); --btn-line: var(--card); }
.more-btn { gap: 6px; }
.more-btn .dot { margin-left: 1px; }

/* modals */
.modal-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(20, 20, 20, 0.3); animation: fade var(--d) var(--ease); }
.modal {
  position: fixed; z-index: 71; left: 0; right: 0; top: 8vh; margin: 0 auto; width: min(640px, 94vw); max-height: 84vh;
  display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--card-line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop); animation: modal-in var(--d-slow) var(--ease-out); overflow: hidden;
}
.modal.wide { width: min(900px, 94vw); }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 16px 10px 24px; flex: none; }
.modal-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.modal-sub { font-size: 13px; color: var(--text-2); margin-top: 3px; }
.modal-body { padding: 6px 24px 20px; overflow: auto; flex: 1; min-height: 0; }
.modal-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px 12px 24px; border-top: 1px solid var(--line-faint); flex: none; }
.modal-foot .note { font-size: 12px; color: var(--text-3); margin-right: auto; }

.pop-lens { width: 330px; max-height: calc(100vh - 80px); overflow: auto; }
.pop-me { width: 290px; }
.pop-clock { width: 320px; }
.pop-more { width: 260px; }
.me-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 6px; }
.theme-seg { display: flex; gap: 4px; padding: 4px; }

/* ─────────────────────────────────────────────────────────────────────────
   Prototype-paneel: geen product. Linksonder in elk stuk: terug naar het
   overzicht, tijd, thema, bedrijfskleuren en opnieuw beginnen.
   ───────────────────────────────────────────────────────────────────────── */
#proto { position: fixed; left: 14px; bottom: 14px; z-index: 55; }
.proto-fab {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px 0 11px; border-radius: 8px;
  background: var(--ink); color: var(--text-inv); font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-pop); opacity: 0.94;
}
.proto-fab:hover { opacity: 1; }
.proto-fab .ec-mark { color: var(--text-inv); }
/* naast het prototype: zijn beschrijving (uitleg.html) */
.proto-fabs { display: flex; gap: 6px; align-items: center; }
.proto-fab.proto-why { background: var(--bg-elev); color: var(--text); border: 1px solid var(--line-strong); text-decoration: none; opacity: 1; }
.proto-fab.proto-why:hover { border-color: var(--ink); }
.proto-fab.proto-why .i { color: var(--text-2); }
.proto-panel {
  width: 340px; max-height: calc(100vh - 84px); display: flex; flex-direction: column;
  background: var(--bg-elev); border: 1px solid var(--card-line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
  animation: pop-in var(--d) var(--ease-out); overflow: hidden;
}
.proto-head { display: flex; align-items: flex-start; gap: 8px; padding: 14px 10px 12px 16px; border-bottom: 1px solid var(--line-faint); }
.proto-head .btn { margin-left: auto; }
.proto-where { font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.proto-title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; margin-top: 1px; }
.proto-body { overflow: auto; padding: 4px 16px 14px; }
.proto-sec { padding: 12px 0 2px; }
.proto-k { font-size: 11.5px; font-weight: 700; color: var(--text-3); padding-top: 4px; margin-bottom: 8px; }
.proto-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.proto-row .chip { height: 24px; padding: 0 8px; font-size: 12px; }
.proto-note { font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin-top: 6px; }
.kleur-rij { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; }
.kleur-rij .grow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kleur-rij input[type="color"] { width: 30px; height: 22px; padding: 0; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--bg-elev); cursor: pointer; }
.kleur-rij input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.kleur-rij input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 2px; }
.proto-foot { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line-faint); background: var(--bg); }
.proto-probeer { list-style: decimal; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.proto-probeer kbd { height: 16px; min-width: 16px; font-size: 10.5px; }

/* ─────────────────────────────────────────────────────────────────────────
   Pagina's en objecten. Een object (taak, project, persoon, factuur) opent
   als paneel rechts, of als detail naast een lijst. Dezelfde onderdelen
   in elk stuk.
   ───────────────────────────────────────────────────────────────────────── */
.stage-scroll { flex: 1; min-height: 0; overflow: auto; }
.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.page-head .h1 { flex: 1; min-width: 0; }
.page-lede { font-size: 14px; color: var(--text-2); margin-top: 6px; max-width: 70ch; line-height: 1.55; }
.terug { margin-left: -4px; }

/* ── het werkvlak (FD-25) ────────────────────────────────────────────────
   Onder de balk heeft elk scherm dezelfde bouw. Een overzicht begint met
   de stand (EC.stand): één kaart, een rand onder de balk, op dezelfde
   hoogte als de lijst in een werkruimte. Een scherm herhaalt zijn naam
   niet: geen kop-titels, geen bovenregels, geen eigen voortgangsbalken.
   Lettermaten in het werkvlak, en geen andere:
     30   het getal van de stand (één per scherm)
     20   het ding waar je aan werkt: een vraag van EC, de titel van een record
     15   de kop van een kaart (.section-head, .cw-group-h)
     14   lopende tekst · 13,5 een rij
     12,5 wat erbij staat: aantal, bron, datum
   Zie PATRONEN, "Het werkvlak". Uitgeprobeerd in _studie/werkvlak. */
.stand {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px;
  padding: 16px 20px 18px; margin-bottom: var(--card-gap);
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--card-r); box-shadow: var(--card-shadow);
}
.stand-main { min-width: 0; }
.stand-ctx { display: flex; align-items: center; gap: 8px; min-height: 22px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.stand-ctx .mono-tile { flex: none; }
.stand-fig { margin: 6px 0 0; font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; text-wrap: balance; }
.stand-na { font-weight: 500; color: var(--text-3); }
.stand-zin { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-2); max-width: 70ch; }
.stand-zin b { color: var(--text); font-weight: 700; }
.stand-end { align-self: end; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.stand-meter { grid-column: 1 / -1; margin-top: 16px; }
.stand-bij { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 36px; margin-top: 14px; }
.stand-meter + .stand-bij { margin-top: 10px; }
.sb { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sb-k { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); }
.sb-v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sb-v.attn { color: var(--signal); }
.sb-s { font-size: 12px; color: var(--text-3); }
.stand-voet { grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-faint); font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.stand-voet .ec-mark { flex: none; margin-top: 2px; color: var(--text-3); }
.stand-voet b { color: var(--text-2); font-weight: 600; }
@media (max-width: 760px) {
  .stand { grid-template-columns: minmax(0, 1fr); }
  .stand-end { justify-content: flex-start; margin-top: 12px; }
}

/* één meter (EC.meter): inkt is feit, gearceerd is schatting of schuld,
   licht met een haarlijn is wat nog niet is, signaal alleen voor een oordeel */
.meter { position: relative; display: flex; gap: 2px; height: 8px; }
.meter + .meter { margin-top: 4px; }
.meter.sm { height: 4px; gap: 1px; }
.meter i { flex-basis: 0; flex-shrink: 1; min-width: 0; border-radius: 3px; transition: flex-grow 700ms var(--ease-out); }
.meter.sm i { border-radius: 2px; }
.meter .m-feit, .sw.m-feit { background: var(--ink); }
.meter .m-feit.t1, .sw.m-feit.t1 { background: color-mix(in srgb, var(--ink) 75%, var(--bg-elev)); }
.meter .m-feit.t2, .sw.m-feit.t2 { background: color-mix(in srgb, var(--ink) 55%, var(--bg-elev)); }
.meter .m-feit.t3, .sw.m-feit.t3 { background: color-mix(in srgb, var(--ink) 38%, var(--bg-elev)); }
.meter .m-feit.t4, .sw.m-feit.t4 { background: color-mix(in srgb, var(--ink) 25%, var(--bg-elev)); }
.meter .m-schat, .sw.m-schat { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 50%, transparent) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 40%, transparent); }
.meter .m-schuld, .sw.m-schuld { background: repeating-linear-gradient(135deg, var(--debt) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1px var(--debt); }
.meter .m-rest, .sw.m-rest { background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--card-line); }
.meter .m-signaal, .sw.m-signaal { background: var(--signal); }
.meter .m-doel { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); opacity: 0.45; }
.sw { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .meter i { transition: none; } }

/* een pagina met een linkerkolom (sinds 7 oktober, avond): wat je kiest
   links (weergaven, bedrijven, de onderdelen van een lange pagina), de
   pagina rechts. Dezelfde .rw-rail als Inbox; de pagina scrollt zelf.
   Gebruik: <div class="railed">rail<div class="railed-main scroll">…</div></div> */
.railed { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: var(--card-gap); padding: 0 var(--gutter) var(--gutter); }
.railed > .railed-main { min-width: 0; min-height: 0; overflow: auto; }
.railed > .railed-main > .page { padding-left: 0; padding-right: 0; padding-top: 0; }

/* het paneel: rechts, over de volle hoogte */
#peek { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
#peek.open { pointer-events: auto; }
.peek-scrim { position: absolute; inset: 0; background: rgba(20, 20, 20, 0.1); animation: fade var(--d) var(--ease); }
:root[data-theme="dark"] .peek-scrim { background: rgba(0, 0, 0, 0.35); }
.peek-panel {
  position: absolute; top: 10px; right: 10px; bottom: 10px; width: min(620px, calc(100vw - 40px));
  display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--card-line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop); animation: peek-in var(--d-slow) var(--ease-out); overflow: hidden;
}
.peek-panel.wide { width: min(820px, calc(100vw - 40px)); }
.peek-panel.xwide { width: min(960px, calc(100vw - 40px)); }
#peek.steady .peek-panel, #peek.steady .peek-scrim { animation: none; }
@keyframes peek-in { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
.peek-head { display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--line-faint); flex: none; }
.peek-kind { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.peek-body { flex: 1; min-height: 0; overflow: auto; padding: 20px 24px 40px; }
.peek-body .row { padding-left: 4px; padding-right: 4px; }

/* de kop van een object */
.obj-head { margin-bottom: 18px; }
/* een pagina over één object (een bedrijf, je huishouden, hoe een bedrijf
   werkt) begint met de kop van dat object, als kaart (FD-25) */
.page > .obj-head:first-child { padding: 16px 20px 18px; margin-bottom: var(--card-gap); background: var(--card); border: 1px solid var(--card-line); border-radius: var(--card-r); box-shadow: var(--card-shadow); }
.obj-head.with-tile { display: flex; align-items: flex-start; gap: 16px; }
.obj-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 12.5px; color: var(--text-3); }
.obj-title { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin-top: 8px; }
.obj-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--text-2); }
.obj-facts { margin: 4px 0 18px; padding: 14px 16px; border-radius: 10px; background: var(--bg-tint); border: 1px solid var(--line-faint); }
.obj-facts dd .tag { vertical-align: middle; }
/* EC vat samen: in hetzelfde zachte vak als een voorstel van EC */
.ec-summary { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; padding: 12px 14px; border-radius: 10px; background: var(--bg-tint); border: 1px solid var(--line-faint); font-size: 13.5px; line-height: 1.55; color: var(--text); }
.ec-summary .ec-mark { margin-top: 3px; }
.ec-summary b { font-weight: 700; }
.kv-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.kv { flex: 1 1 130px; min-width: 120px; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--bg-tint); border: 1px solid var(--line-faint); }
.kv .k { font-size: 11.5px; color: var(--text-3); }
.kv .v { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.obj-tabs { display: flex; gap: 2px; margin: 0 0 14px; border-bottom: 1px solid var(--line); }
.obj-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.obj-tab:hover { color: var(--text); }
.obj-tab.on { color: var(--text); font-weight: 700; }
.obj-tab.on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--ink); }
.obj-tab .n { font-size: 11px; color: var(--text-3); }
.row-ic { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); background: var(--fill); color: var(--text-2); }
.row-ic .av { border: 0; }
.row-ic .mono-tile { width: 24px; height: 24px; }
.origin { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--bg-tint); border: 1px solid var(--line-faint); border-radius: 10px; font-size: 13.5px; }
.origin > .i { margin-top: 2px; color: var(--text-3); }
.note-line { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.note-line .i { margin-top: 1px; flex: none; }
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
ul.ticks { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
ul.ticks li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; }
ul.ticks li .i { margin-top: 3px; color: var(--ink); flex: none; }
ul.ticks.no li { color: var(--text-2); }
ul.ticks.no li .i { color: var(--text-3); }

/* herkomst: waar een feit vandaan komt, rustig gezegd */
.prov { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 11.5px; color: var(--text-3); }
.prov span { display: inline-flex; align-items: center; gap: 4px; }
.prov b { font-weight: 600; color: var(--text-2); }

/* een keten: van verzoek tot betaling */
.chain { display: flex; flex-direction: column; position: relative; padding-left: 18px; }
.chain::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--line-strong); }
.chain-step { position: relative; padding: 5px 0 9px; font-size: 13px; }
.chain-step::before { content: ""; position: absolute; left: -17px; top: 10px; width: 9px; height: 9px; border-radius: 2px; background: var(--bg-elev); border: 1.5px solid var(--line-strong); }
.chain-step.on::before { border-color: var(--ink); background: var(--ink); }
.chain-step.now::before { border-color: var(--ink); background: var(--bg-elev); }
.chain-step .k { font-size: 11px; color: var(--text-3); }
.chain-step .v { color: var(--text); }
.bill-tag { color: var(--ink); font-weight: 700; }

/* broodkruimel: terug naar het overzicht van een ruimte */
.crumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; min-width: 0; }
.crumb-up { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px 0 6px; border-radius: 6px; color: var(--text-2); font-weight: 500; }
.crumb-up:hover { background: var(--bg-hover); color: var(--text); }
.crumb-sep { color: var(--line-strong); }
.crumb-cur { font-weight: 700; color: var(--text); white-space: nowrap; }

/* een document als vel: factuur, offerte */
.doc-sheet { padding: 22px 24px; border-radius: 10px; border: 1px solid var(--card-line); background: var(--bg-elev); }
.ds-top { display: flex; justify-content: space-between; gap: 12px; }
.ds-from { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.ds-no { text-align: right; }
.ds-to { margin-top: 16px; }
.ds-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 16px 0 8px; }
.ds-lines th { position: static; background: transparent; }
.ds-ass { margin-top: 14px; }
.ds-ass ul { list-style: disc; padding-left: 18px; margin-top: 6px; font-size: 13px; color: var(--text-2); }
table.tbl tfoot td { border-top: 1px solid var(--line-strong); border-bottom: 0; font-weight: 700; }

/* één ding, herkend op meerdere plekken */
.ident { display: flex; flex-direction: column; border-top: 1px solid var(--line-faint); }
.ident-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; font-size: 13px; border-bottom: 1px solid var(--line-faint); }
.ident-row .i { color: var(--text-3); }
.ident-src { width: 110px; flex: none; color: var(--text-2); font-weight: 600; }

/* klein: een keuzelijst in een regel; een citaat als bewijs; een bijlage */
.sm-select { height: 26px; width: auto; min-width: 96px; font-size: 12.5px; padding: 0 24px 0 8px; }
.small-q { font-size: 14px; margin-top: 8px; }
.done-sugg { background: transparent; border-color: var(--line); }
.done-sugg .sugg-head { color: var(--text-2); }
.attach { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.att-file { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border-radius: var(--r-sm); border: 1px solid var(--card-line); background: var(--bg-elev); font-size: 12.5px; font-weight: 600; }
button.att-file:hover { border-color: color-mix(in srgb, var(--ink) 32%, transparent); }

/* ─────────────────────────────────────────────────────────────────────────
   Patroon 1 · de record-werkruimte (zie PATRONEN.md)
   Weergaven | lijst | het record. Voor werk dat je record voor record
   afhandelt. Komt uit Inbox: daar is het ontstaan, daar is het de maat.
   Mail, facturen, voorstellen en transacties gebruiken dezelfde klassen.
   ───────────────────────────────────────────────────────────────────────── */
.rw { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--rail-w) 384px minmax(0, 1fr); gap: var(--card-gap); padding: 0 var(--gutter) var(--gutter); }
/* zonder weergaven: lijst | record */
.rw.two { grid-template-columns: 384px minmax(0, 1fr); }

/* links: de weergaven, daaronder waar het vandaan komt (mailbox, rekening, klant) */
/* links ligt op het bureau; lijst en record zijn kaarten */
.rw-rail { background: transparent; padding: 0 0 56px; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.rw-views { display: flex; flex-direction: column; gap: 1px; }
.rw-label { display: flex; align-items: baseline; gap: 8px; margin: 18px 8px 6px; font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.rw-label-end { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
/* een linkerkolom die met een kop begint (Companies, Worlds): de kop staat op de hoogte van de eerste regel */
.rw-rail > .rw-label:first-child { margin-top: 6px; }
.rw-view { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 9px; border-radius: var(--r-sm); font-size: 13px; font-weight: 500; color: var(--text-2); min-width: 0; }
.rw-view:hover { background: color-mix(in srgb, var(--bg-elev) 60%, transparent); color: var(--text); }
/* gekozen: een witte kaart op het bureau */
.rw-view.on { background: var(--bg-elev); color: var(--text); font-weight: 600; box-shadow: 0 0 0 1px var(--card-line), var(--card-shadow); }
.rw-view .i { color: var(--text-2); }
.rw-n { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.rw-n.attn { color: var(--signal); font-weight: 700; }
.rw-view-end { font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
/* een bedrag rechts (grootboek): even rustig als een aantal, maar leesbaar */
.rw-amt-v { font-size: 12px; color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rw-view.on .rw-amt-v { color: var(--text); font-weight: 600; }
.rw-view.quiet .rw-amt-v { color: var(--text-3); }
/* ingesprongen onder een weergave: een signaal ("Overdue" onder "Outstanding") */
.rw-view.sub { height: 28px; padding-left: 31px; gap: 7px; font-size: 12px; }
.rw-view.sub .i { color: var(--text-3); }
.rw-view.sub.attn, .rw-view.sub.attn .i, .rw-view.sub.attn .rw-amt-v { color: var(--signal); }
.rw-view.sub.attn { font-weight: 600; }
.rw-view.rw-more { height: 30px; font-size: 12px; color: var(--text-3); }
/* iets om te lezen in de linkerkolom: een doel, hoe klaar iets is */
.rw-block { margin: 6px 0 0; padding: 10px 9px; font-size: 12px; color: var(--text-2); line-height: 1.45; }
.rw-block b, .rw-block strong { color: var(--text); font-weight: 700; }
/* een meter in een blok van de rail: dezelfde EC.meter, klein (FD-25) */
.rw-block .meter { margin: 8px 0 6px; }
.rw-foot { margin-top: auto; display: flex; gap: 8px; align-items: flex-start; padding: 12px 8px 4px; font-size: 11.5px; color: var(--text-3); line-height: 1.45; }
.rw-foot .ec-mark { margin-top: 1px; }
.rw-foot .link { color: var(--text-2); font-weight: 600; font-size: inherit; }
.rw-foot .link:hover { color: var(--text); }
/* een paar getallen in de linkerkolom (facturatie: gewerkt → gefactureerd → ontvangen) */
.rw-figs { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }
.rw-fig { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; font-size: 12px; color: var(--text-2); }
.rw-fig b { margin-left: auto; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* midden: de lijst */
.rw-list, .rw-record { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--card-r); box-shadow: var(--card-shadow); }
.rw-list { overflow: auto; min-height: 0; }
.rw-list-h { display: flex; align-items: baseline; gap: 8px; padding: 14px 16px 10px; position: sticky; top: 0; z-index: 2; background: var(--bg-elev); border-bottom: 1px solid var(--line); }
.rw-list-end { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.rw-row { position: relative; display: block; width: 100%; padding: 11px 16px 12px 18px; border-bottom: 1px solid var(--line-faint); text-align: left; }
/* de streep: van welk bedrijf dit record is */
.rw-row::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 2px 2px 0; background: var(--tone); }
.rw-row:hover { background: var(--bg-hover); }
.rw-row.on { background: var(--sel); box-shadow: inset 0 0 0 1px var(--sel-line); }
.rw-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.rw-who { font-size: 13.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-row.unread .rw-who, .rw-row.strong .rw-who { color: var(--text); font-weight: 700; }
.rw-aside { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.rw-end { margin-left: auto; font-size: 11.5px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rw-end.amt, .rw-end .amt { font-size: 13px; font-weight: 700; color: var(--text); }
.rw-sub { font-size: 13px; color: var(--text); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-row.unread .rw-sub, .rw-row.strong .rw-sub { font-weight: 600; }
.rw-snip { font-size: 12.5px; color: var(--text-3); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
.rw-snip .attn-text { font-weight: 600; }
.rw-tags { margin-top: 7px; display: flex; gap: 6px; flex-wrap: wrap; }
.rw-tags:empty { display: none; }
/* geselecteerd: een zachte vulling; tekst, streep, code en signaal blijven zoals ze zijn */
.rw-row.on .rw-who { color: var(--text); }
.rw-row.on .tag:not(.attn):not(.est):not(.outline) { background: var(--bg-elev); }
/* geselecteerd wint van het oplichten van iets nieuws: anders is de tekst even onleesbaar */
.rw-row.on.flash, .rw-row.on.fresh, .cw-row.on.flash, .cw-row.on.fresh, .cw-card.on.fresh { animation: none; }

/* rechts: het record. Kop (bij welk bedrijf · titel · wie/wanneer en de
   acties · context · levenscyclus), dan één EC-blok, dan de inhoud. */
.rw-record { overflow: auto; min-height: 0; }
.rw-wrap { max-width: 780px; margin: 0 auto; padding: 22px 32px 48px; }
.rw-head { margin-bottom: 20px; }
.rw-ent { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.rw-ent .faint { font-weight: 400; }
/* PDF | Details: rechtsboven in het record, zonder de kop hoger te maken */
.rw-mode { margin: -6px 0 -6px auto; }
.rw-title { font-size: 20px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.25; }
.rw-meta { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.rw-meta .col { min-width: 0; }
.rw-amt { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rw-ctx { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 12px; }
.ctx-item { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 2px; font-size: 12px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
button.ctx-item:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.ctx-item.plain { padding: 0 2px; }
.rw-body { margin-top: 22px; }
.rw-body > .section:first-child { margin-top: 0; }

/* een document-record (factuur, voorstel) in de PDF-stand: het vel zelf */
.rw-sheet { margin-top: 22px; }
.rw-sheet .doc-sheet { padding: 34px 38px 30px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 32px -22px rgba(16, 24, 40, 0.3); }
.rw-sheet-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--text-3); }

/* het bewijs ontbreekt: een bon, een factuur. Duidelijk, en direct op te lossen. */
.dropzone { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 16px 18px; border-radius: 10px; border: 1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent); background: var(--bg-tint); }
.dropzone > .i { width: 22px; height: 22px; color: var(--text-2); }
.dropzone .grow b { display: block; font-size: 13.5px; }
.dropzone .grow span { font-size: 12.5px; color: var(--text-3); }
.dropzone.over { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }

/* een bon of factuur als klein vel, naast de bankregel */
.doc-sheet.mini { padding: 16px 18px; font-size: 12.5px; max-width: 460px; }
.doc-sheet.mini .ds-from { font-size: 14px; }
.doc-sheet.mini table.tbl { font-size: 12.5px; }
.doc-sheet.mini table.tbl td, .doc-sheet.mini table.tbl th { padding: 6px 4px; }

/* ── de levenscyclus: kans → voorstel → geaccepteerd → gefactureerd → betaald ──
   Vijf stappen op één lijn. Elke stap linkt naar het object in zijn
   thuis-stuk; de stap van dit record staat er vet ("hier"). */
.lc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 16px; border-top: 1px solid var(--line-strong); }
.lc-step { position: relative; display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 11px 10px 2px 0; text-align: left; }
.lc-step::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 2px; background: var(--bg-elev); border: 1.5px solid var(--line-strong); }
.lc-step.done::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--ink); }
.lc-step.done::before { background: var(--ink); border-color: var(--ink); }
.lc-step.now::before { border-color: var(--ink); }
.lc-step .k { font-size: 11px; color: var(--text-3); }
.lc-step .v { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-step:not(.done):not(.now) .v { color: var(--text-3); font-weight: 500; }
.lc-step .v.attn { color: var(--signal); font-weight: 700; }
.lc-step.here .k { color: var(--text); font-weight: 700; }
button.lc-step:hover .v { text-decoration: underline; text-underline-offset: 3px; }
.peek-body .lc { margin: 0 0 20px; }
.peek-body .lc-step .v { white-space: normal; line-height: 1.3; }

/* ─────────────────────────────────────────────────────────────────────────
   Patroon 1, huid "grootboek" (zie PATRONEN.md)
   Het gedrag van de record-werkruimte (zoals Inbox), de vorm van geld:
   bovenaan de geldstroom (de weergaven als stappen, met bedragen), links
   het grootboek (één regel, kolommen, subtotalen, totaal), rechts het vel
   op het bureau met de inspector ernaast. Facturatie, Voorstellen,
   Transacties. De kolommen zet elk scherm met --lg-cols; de laatste twee
   zijn altijd bedrag en toestand.
   ───────────────────────────────────────────────────────────────────────── */
/* de werkruimte zelf heet .lg-ws: ".lg" is al de maat "groot" (.av.lg, .i.lg, .seg.lg).
   Links de weergaven (EC.lg.rail, dezelfde .rw-rail als Inbox), rechts
   bovenaan hooguit één regel van EC (.lg-note), daaronder het grootboek
   en het record. Sinds 7 oktober (avond); daarvoor stond de stroom bovenaan. */
.lg-ws { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: var(--card-gap); padding: 0 var(--gutter) var(--gutter); --desk: var(--bg); }
.lg-ws > .rw-rail { grid-column: 1; grid-row: 1 / -1; }
.lg-ws > .lg-note { grid-column: 2; grid-row: 1; }
.lg-ws > .lg-main { grid-column: 2; grid-row: 2; }

/* ── zoeken, klant, groeperen ──────────────────────────────────────────── */
.lg-bar { flex: none; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 12px; }
.lg-bar .btn.quiet .faint { font-weight: 500; }
.lg-bar > .faint { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lg-search { width: 260px; height: 28px; flex: none; }
/* een regel van EC boven het grootboek (een ander kwartaal, wat EC zelf
   boekte): een kaart in dezelfde goot als de rest, nooit tegen de panelen */
.lg-note { flex: none; display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 var(--card-gap); padding: 6px 8px 6px 18px; background: var(--card); border: 1px solid var(--card-line); border-radius: var(--card-r); box-shadow: var(--card-shadow); font-size: 12.5px; color: var(--text-2); }
.lg-note .btn { margin-left: auto; flex: none; }

/* ── links het grootboek, rechts het record ──────────────────────────────
   Bijna even breed (FD-23): het grootboek kreeg de ruimte die de inspector
   had, zodat namen en omschrijvingen niet meer aflopen. */
.lg-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(400px, 47fr) minmax(0, 53fr); gap: var(--card-gap); }
.lg-ledger { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: auto; background: var(--card); border: 1px solid var(--card-line); border-radius: var(--card-r); box-shadow: var(--card-shadow); }
.lg-cols { display: grid; grid-template-columns: var(--lg-cols); align-items: center; gap: 10px; }
.lg-head { position: sticky; top: 0; z-index: 2; min-height: 34px; padding: 0 14px 0 18px; background: var(--bg-elev); border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 700; color: var(--text-3); white-space: nowrap; }
.lg-head button { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; color: var(--text-3); }
.lg-head button:hover, .lg-head button.on { color: var(--text); }
.lg-head .r { justify-self: end; }
/* een groep: de naam en het subtotaal, op een zachte band */
.lg-group { padding: 10px 14px 8px 18px; background: var(--bg-tint); border-top: 1px solid var(--line-faint); border-bottom: 1px solid var(--line-faint); font-size: 12px; }
.lg-head + .lg-group { border-top: 0; }
.lg-gl { grid-column: 1 / -3; display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.lg-gl b { font-size: 12.5px; font-weight: 700; }
.lg-group .lg-amt, .lg-foot .lg-amt { grid-column: -3 / -2; justify-self: end; font-weight: 700; font-variant-numeric: tabular-nums; }
/* een regel: dezelfde streep en selectie als overal, maar één regel en kolommen */
.lg-row { position: relative; width: 100%; min-height: 40px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--line-faint); font-size: 13px; text-align: left; }
.lg-row::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 2px 2px 0; background: var(--tone); }
.lg-row:hover { background: var(--bg-hover); }
.lg-row > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-n { font-variant-numeric: tabular-nums; color: var(--text-2); display: inline-flex; align-items: center; }
.lg-d { font-variant-numeric: tabular-nums; color: var(--text-2); font-size: 12.5px; }
.lg-amt { justify-self: end; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.lg-who { display: flex; align-items: center; gap: 7px; }
.lg-who b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; min-width: 0; }
.lg-who .faint { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; min-width: 0; }
.lg-row.strong .lg-who b { font-weight: 700; }
.lg-st { display: flex; align-items: center; }
/* hoe ver de betaaltermijn is: een korte balk, rood als hij voorbij is */
.lg-term { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.lg-term i { position: relative; width: 30px; height: 4px; flex: none; border-radius: 2px; background: var(--bg-sunken); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.lg-term i b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: color-mix(in srgb, var(--ink) 45%, transparent); }
.lg-term.attn { color: var(--signal); font-weight: 700; }
.lg-term.attn i b { background: var(--signal); }
.lg-term.ok { color: var(--text-2); }
.lg-term .i { color: var(--ink); }
.lg-term.attn .i { color: var(--signal); }
/* geselecteerd: een zachte vulling; streep, code en signaal houden hun kleur */
.lg-row.on { background: var(--sel); box-shadow: inset 0 0 0 1px var(--sel-line); }
.lg-row.on .tag:not(.attn):not(.est):not(.outline) { background: var(--bg-elev); }
.lg-row.on.flash { animation: none; }
/* het totaal: onderaan, altijd zichtbaar */
.lg-foot { position: sticky; bottom: 0; z-index: 2; min-height: 42px; margin-top: auto; padding: 0 14px 0 18px; background: var(--bg-elev); border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); }
.lg-foot .lg-amt { color: var(--text); font-size: 13.5px; }
/* het aantal staat rechts, naast het totaal: links zit in het prototype de knop "Prototype" */
.lg-foot .lg-gl { justify-content: flex-end; }
.lg-empty { padding: 24px 12px; }

/* ── rechts: het record, één kaart (FD-23) ─────────────────────────────
   Hooguit drie vakken naast elkaar: linkerkolom | grootboek | het record.
   Bovenaan de kop, op dezelfde lijn als de kolomkoppen van het grootboek
   (34px): het bedrijf en de bron, rechts Details | het document. Daaronder
   óf de details óf het document, dat op een grijs bureau in de kaart ligt,
   zoals in een pdf-viewer. Zo loopt niets meer af op een laptop. */
.lg-record { min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--card-line); border-radius: var(--card-r); box-shadow: var(--card-shadow); }
/* niets gekozen: dezelfde kaart, de lege toestand erin */
.lg-record:not(.has-kant) > .lg-desk { flex: 1; min-height: 0; overflow: auto; }
.lg-rh { flex: none; display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 4px 0 20px; background: var(--bg-elev); border-bottom: 1px solid var(--line); }
.lg-rh .lg-ient { flex: 1 1 auto; min-width: 0; margin: 0; }
.lg-seg { flex: none; margin-left: auto; padding: 2px; }
.lg-seg button { height: 24px; display: inline-flex; align-items: center; gap: 5px; }
/* EC vraagt iets in de details terwijl je naar het document kijkt */
.lg-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex: none; }
.lg-rbody { flex: 1; min-height: 0; overflow: auto; }
.lg-record.is-doc .lg-rbody { background: var(--desk, var(--bg)); }
.lg-desk { background: transparent; }
.lg-desk-in { max-width: 720px; margin: 0 auto; padding: 12px 20px 40px; }
.lg-paper-bar { display: flex; align-items: center; gap: 6px; min-height: 34px; margin-bottom: 6px; font-size: 12px; color: var(--text-3); }
.lg-paper-bar .btn { color: var(--text-2); }
/* het vel: papier op het bureau. De enige schaduw hier, omdat het een los vel is. */
/* de marge van het vel groeit mee met het bureau: smal 24px, breed 46px */
.lg-paper { position: relative; padding: clamp(28px, 6.5%, 42px) clamp(24px, 7%, 46px) clamp(26px, 6%, 38px); border-radius: 4px; border: 1px solid var(--card-line); background: var(--bg-elev);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 20px 44px -26px rgba(0, 0, 0, 0.3); font-size: 13px; }
.lg-paper .doc-sheet { padding: 0; border: 0; border-radius: 0; background: transparent; }
.lg-paper .ds-from { font-size: 19px; }
.lg-paper-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--text-3); }
/* een stempel op het vel: concept, te laat, betaald */
.lg-stamp { position: absolute; top: 118px; right: clamp(24px, 7%, 46px); z-index: 1; transform: rotate(-5deg); padding: 3px 11px; border: 2px solid currentColor; border-radius: 4px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: var(--ink); opacity: 0.78; pointer-events: none; }
.lg-stamp.attn { color: var(--signal); opacity: 0.9; }
.lg-stamp.est { border-style: dashed; color: var(--text-3); opacity: 1; }

/* de details: wat de inspector was, nu met ruimte */
.lg-insp { max-width: 760px; padding: 18px 24px 56px; }
.lg-ih { margin-bottom: 18px; }
.lg-ient { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin-bottom: 8px; white-space: nowrap; }
.lg-ient .faint { font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.lg-ititle { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.lg-insp .lg-ititle { font-size: 20px; }
.lg-isub { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.lg-iamt { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lg-insp .sugg { margin-bottom: 22px; }
.lg-insp .section { margin-bottom: 22px; }
.lg-insp .row { padding-left: 2px; padding-right: 2px; }
dl.lg-facts { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 7px 10px; font-size: 12.5px; }
dl.lg-facts dt { color: var(--text-3); }
dl.lg-facts dd { min-width: 0; }
.lg-insp dl.lg-facts { grid-template-columns: 120px minmax(0, 1fr); }
.lg-insp dl.facts { grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; font-size: 13px; }
.lg-insp .obj-facts { padding: 10px 12px; }
.lg-insp .sugg-choices { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.lg-insp .sm-select { max-width: 280px; }
/* de levenscyclus staand: naast de gegevens leest dat beter dan vijf naast elkaar */
.lg-insp .lc { display: flex; flex-direction: column; margin: 0; padding-left: 16px; border-top: 0; position: relative; }
.lg-insp .lc::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background: var(--line-strong); }
.lg-insp .lc-step { flex-direction: row; align-items: baseline; gap: 10px; padding: 4px 0; }
.lg-insp .lc-step::before { left: -16px; top: 9px; }
.lg-insp .lc-step.done::after { display: none; }
.lg-insp .lc-step .k { width: 96px; flex: none; }
.lg-insp .lc-step .v { white-space: normal; }

/* smal: grootboek en record half om half. Er schuift niets meer boven
   elkaar, want er staat maar één ding in het record. */
@media (max-width: 1400px) {
  .lg-main, .lg-ws .lg-main { grid-template-columns: minmax(360px, 1fr) minmax(0, 1fr); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Patroon 2 · de collectie-werkruimte (zie PATRONEN.md)
   Een verzameling werk die je overziet en ordent: taken, kansen.
   Rechts in de balk van de plek: Table | Board en de nieuwe-knop.
   Daaronder één balk: zoeken, weergaven, groeperen, sorteren.
   Groeperen = de secties van de tabel én de kolommen van het bord.
   ───────────────────────────────────────────────────────────────────────── */
/* links de weergaven (EC.cw.rail, dezelfde .rw-rail als Inbox), rechts
   (.cw-main) wat erbij hoort en de tabel of het bord. Sinds 7 oktober
   (avond); daarvoor stonden de weergaven in de balk van het scherm. */
.cw { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: var(--card-gap); padding: 0 var(--gutter) var(--gutter); }
.cw-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.cw-top { flex: none; padding: 0 0 var(--card-gap); }
.cw-bar { flex: none; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 8px 16px; }
.cw-bar.sel { margin: 0 var(--gutter); padding: 8px 12px; background: var(--card); border: 1px solid var(--card-line); border-radius: var(--card-r); box-shadow: var(--card-shadow); }
.cw-bar .btn.quiet .faint { font-weight: 500; }
.cw-search { width: 220px; height: 28px; flex: none; }
/* met het paneel ernaast: de balk wordt compacter, niet breder */
.stage.docked .cw-search { width: 150px; }
.stage.docked .cw-count, .stage.docked .cw-k { display: none; }
.stage.docked .cw-bar { gap: 8px; }
.cw-layout button, .cw-bar .seg button { display: inline-flex; align-items: center; gap: 6px; }
.pop-cw-group { width: 300px; }
.pop-cw-sort { width: 220px; }
.cw-body { flex: 1; min-height: 0; overflow: auto; padding-bottom: 72px; }
/* de tabel is één kaart, met de kolomkoppen erin (zoals het grootboek);
   de groepen zijn stukken van die kaart, met dezelfde kop als elke kaart.
   Sinds FD-25; daarvoor was elke groep een losse kaart en stonden de
   kolomkoppen ertussen op het bureau. */
.cw-table { padding: 0 8px 6px; background: var(--card); border: 1px solid var(--card-line); border-radius: var(--card-r); box-shadow: var(--card-shadow); }
.cw-group { margin: 0; padding: 0; }
.cw-group + .cw-group { margin-top: 10px; }
.cw-group-h { display: flex; align-items: baseline; gap: 8px; padding: 14px 6px 9px; border-bottom: 1px solid var(--line-faint); }
.cw-group-h > .strong { font-size: 15px; font-weight: 700; letter-spacing: -0.006em; }
.cw-group-h > .faint.small { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cw-group-h > .mono-tile, .cw-group-h > .ent-dot { align-self: center; }
.cw-group-end { margin-left: auto; font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 8px; }
/* de kolomkoppen: bovenin de kaart, plakkend; elk scherm zet zijn kolommen */
.cw-body .cw-table > .cw-thead { position: sticky; top: 0; z-index: 2; margin: 0 -8px; background: var(--card); border-bottom: 1px solid var(--line); border-radius: var(--card-r) var(--card-r) 0 0; }
/* een rij in de tabel: dezelfde streep en dezelfde selectie als overal */
.cw-row { position: relative; border-bottom: 1px solid var(--line-faint); border-radius: var(--r-sm); }
.cw-row:last-child { border-bottom: 0; }
.cw-row::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 2px 2px 0; background: var(--tone); }
.cw-row:hover { background: var(--bg-hover); }
/* geselecteerd: een zachte vulling, alles blijft leesbaar zoals het was */
.cw-row.on { background: var(--sel); box-shadow: inset 0 0 0 1px var(--sel-line); }
.cw-row.on .tag:not(.attn):not(.est):not(.outline) { background: var(--bg-elev); }
.cw-row.picked { background: var(--bg-tint); }
/* het selectievakje voor bulk: vierkant, verschijnt bij aanwijzen */
.cw-pick { opacity: 0; transition: opacity var(--d-fast) var(--ease); }
.cw-row:hover .cw-pick, .cw-pick.on, .cw.selecting .cw-pick { opacity: 1; }


/* het bord */
.cw-board { flex: 1; min-height: 0; overflow: auto; padding: 0; }
.cw-cols { display: flex; gap: var(--card-gap); align-items: flex-start; min-height: 100%; }
/* een kolom is een bakje op het bureau, de kaarten liggen erin */
.cw-col { flex: 0 0 280px; display: flex; flex-direction: column; min-height: 160px; border-radius: var(--card-r); background: var(--seg-bg); transition: background var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease); }
.cw-col-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px 4px; font-size: 13px; }
.cw-col-end { margin-left: auto; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cw-cards { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.cw-none { padding: 18px 8px; font-size: 12px; color: var(--text-3); text-align: center; }
.cw-board.dragging .cw-col:not(.droppable) { opacity: 0.5; }
.cw-col.over { background: color-mix(in srgb, var(--ink) 8%, var(--seg-bg)); box-shadow: inset 0 0 0 1.5px var(--ink); }
/* een kaart: de streep, de titel, de context, een regel met feiten */
.cw-card { position: relative; display: block; width: 100%; padding: 10px 12px 10px 14px; border-radius: 10px; border: 1px solid var(--card-line); background: var(--bg-elev); box-shadow: var(--card-shadow); text-align: left; cursor: pointer; transition: border-color var(--d-fast) var(--ease); }
.cw-card::before { content: ""; position: absolute; left: -1px; top: 11px; bottom: 11px; width: 3px; border-radius: 0 2px 2px 0; background: var(--tone); }
.cw-card:hover { border-color: color-mix(in srgb, var(--ink) 32%, transparent); }
.cw-card[draggable="true"] { cursor: grab; }
.cw-card.dragging { opacity: 0.35; }
.cw-card.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.cw-card.ro::before, .cw-card.done::before { opacity: 0.4; }
.cw-card.fresh { animation: flash 2.4s var(--ease); }
.cc-top { display: flex; align-items: flex-start; gap: 8px; }
.cc-top > .av, .cc-top > .cc-end { flex: none; margin-left: auto; }
.cc-t { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.35; }
.cw-card.done .cc-t { text-decoration: line-through; color: var(--text-3); }
.cc-s { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 3px; font-size: 11.5px; color: var(--text-3); }
.cc-s > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: 11.5px; color: var(--text-2); }
.cc-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.cc-meta .end { margin-left: auto; }
.cc-amt { font-size: 13.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cw-card .check.round { width: 16px; height: 16px; margin-top: 1px; }

/* het paneel naast een collectie: geen waas, de lijst blijft bruikbaar */
#peek.dock { pointer-events: none; }
/* sinds FD-22 vast aan de rand, net als het zijmenu: van de bovenbalk tot
   onderaan. De kop is even hoog als de balk, zodat de lijn eronder doorloopt. */
#peek.dock .peek-panel { pointer-events: auto; top: var(--topbar-h); right: 0; bottom: 0; width: var(--dock-w); border-width: 0 0 0 1px; border-radius: 0; box-shadow: none; animation: dock-in var(--d) var(--ease-out); }
#peek.dock .peek-head { height: var(--bar-h); border-bottom-color: var(--card-line); }
#peek.dock.steady .peek-panel { animation: none; }
@keyframes dock-in { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.stage.docked { margin-right: var(--dock-w); }

/* ─────────────────────────────────────────────────────────────────────────
   Het kader (FD-19 · palet "Donker kader", gekozen in _studie/licht)
   De bovenbalk en de navigatie links in een werkruimte zijn het kader: in
   licht donker, in donker zoals altijd. Het kader zet zijn eigen tokens
   (--frame-* in tokens.css), zodat alles erin vanzelf meekleurt: knoppen,
   tellers, codetegels, de avatar. Het werk zelf blijft licht op kaarten.
   Niet op .ptool: de balk van het scherm is een witte band die bij het
   werk hoort (FD-22).
   ───────────────────────────────────────────────────────────────────────── */
#topbar, .rw-rail, .m-tabs {
  --bg: var(--frame); --bg-elev: var(--frame-elev); --bg-hover: var(--frame-hover); --bg-active: var(--frame-active);
  --bg-sunken: var(--frame); --bg-tint: var(--frame-elev);
  --line-faint: var(--frame-line); --line: var(--frame-line); --line-strong: var(--frame-line-strong); --card-line: var(--frame-line);
  --text: var(--frame-text); --text-2: var(--frame-text-2); --text-3: var(--frame-text-3);
  --ink: var(--frame-text); --ink-hover: #ffffff; --text-inv: var(--frame-inv);
  --fill: var(--frame-fill); --fill-hover: var(--frame-active); --sel: var(--frame-fill); --sel-line: var(--frame-line-strong);
  --signal: var(--frame-signal); --tint-tile: var(--frame-tint-tile); --card-shadow: none;
  --btn-bg: var(--frame-elev); --btn-line: var(--frame-line); --btn-hover: var(--frame-hover); --btn-line-hover: var(--frame-line-strong);
  color: var(--text);
}
#topbar { background: var(--frame); border-bottom-color: var(--frame-edge); }
/* links in een werkruimte: een donkere kaart op het bureau (in donker: geen vlak, zoals altijd) */
.rw-rail { background: var(--frame-rail); border-radius: var(--card-r); padding: 10px 8px 56px; }
.rw-view.on { box-shadow: none; }

/* ─────────────────────────────────────────────────────────────────────────
   Het zijmenu (FD-22, 9 oktober; gekozen in _studie/zijmenu)
   De linkerkolom van een werkruimte (FD-21) zweeft niet meer als kaart op
   het bureau: hij sluit links, boven en onder aan. In licht is hij met de
   bovenbalk één donkere L; in donker een vlak met een lijn rechts. De balk
   van het scherm begint pas rechts ervan.

   Geldt voor elke werkruimte waarvan de rail het eerste kind is (.cw, .rw,
   .railed, .lg-ws en eigen roosters zoals Tax): de rail blijft in zijn
   kolom (--rail-w) en schuift met negatieve marges over de rand, de balk
   en de goot onder de balk. Zo staat het werk precies waar het stond en
   hoeft geen stuk zijn rooster te veranderen.
   ───────────────────────────────────────────────────────────────────────── */
.stage:has(> * > .rw-rail:first-child) > .ptool { margin-left: calc(var(--gutter) + var(--rail-w)); padding-left: var(--card-gap); }
.stage > * > .rw-rail:first-child {
  margin: calc(-1 * (var(--bar-h) + var(--gutter))) 0 calc(-1 * var(--gutter)) calc(-1 * var(--gutter));
  border-radius: 0; background: var(--frame); border-right: 1px solid var(--frame-edge);
  /* de eerste rij staat op dezelfde regel als de balk */
  padding: calc((var(--bar-h) - 34px) / 2) 8px 64px;
}
/* de tekens in het zijmenu staan recht onder de ‹ van Home in de bovenbalk */
.stage > * > .rw-rail:first-child .rw-view:not(.sub) { padding: 0 8px 0 6px; }
.stage > * > .rw-rail:first-child .rw-view.sub { padding-left: 28px; }
.stage > * > .rw-rail:first-child .rw-label { margin-left: 6px; }
.stage > * > .rw-rail:first-child .rw-block { padding-left: 6px; padding-right: 6px; }
.stage > * > .rw-rail:first-child .rw-figs { padding: 0 6px; }
.stage > * > .rw-rail:first-child .rw-foot { padding-left: 6px; }