/* De bouwstenen van het schetsboek (Schetsboek 1/5, dispatch dsp_01M4Y3TP9R6DHGKT98F86ZA7SQ).

   Bron: `design-system/cockpit-bouwstenen.css` uit het ontwerppakket "Cockpit in Schetsboek"
   (14 oktober 2026), sha256 fcdb884b5a2c560550efa18a72295ef2b4a6198e47115483369d7a1b142f17c8
   (zie docs/ontwerp/schetsboek/LEESMIJ.md). Het eerste deel hieronder is die bron, regel voor
   regel, met drie afwijkingen die ter plekke gemarkeerd zijn:
     1. De @import van Google Fonts is weg: `paginas.FONTS` laadt Fraunces, Figtree en Geist Mono
        met een <link> (de CSP staat fonts.googleapis.com al toe).
     2. .jm-row en .jm-grid (de indeling van de voorbeelden in het merkboek) zijn weg.
     3. De vier rgba()-waarden zijn tokens in tokens.css (--sb-scrim, --on-petrol-12,
        --on-petrol-25); dit bestand heeft geen enkele kleurwaarde (test_studio).
   Het tweede deel, na de kop "TOEVOEGINGEN", staat niet in de bron. Elke toevoeging zegt waarom;
   de meeste vervangen een style="…" uit de ontwerpen (de CSP en test_studio verbieden inline
   stijl), de rest is een bouwsteen die de cockpit nodig had en het ontwerp niet had.
   Het derde deel, onderaan onder de kop "V71-C", zijn de nieuwe bouwstenen van ontwerp ronde 4
   (BS1: stipvorm, statuschip, soortteken, balk, werkregel, epic-kaart). Net als TOEVOEGINGEN is
   het achterstand die terug moet naar het design system (V71 punt 4); elk blok zegt waarom
   (bouwers in `webapp/bouwstenen_r4.py`, voorstel in docs/ontwerp/schetsboek/voorstel-bs1.md).

   Geladen ná tokens.css en studio.css: waar een sb-/jm-klasse en een oude klasse hetzelfde
   element raken, wint deze. Elke klasse hier wordt uitgegeven (test_css_gebruikt); de bouwers
   staan in `webapp/schetsboek.py`. */
/* Afwijking 1: hier stond de @import van Google Fonts; de <link> in de kop (paginas.FONTS) laadt ze. */
body { margin: 0; font-family: var(--font-sans); background: var(--paper); color: var(--ink); }
/* Afwijking 2: .jm-row en .jm-grid (de indeling van de voorbeelden in het merkboek) zijn weg; de cockpit gebruikt ze niet. */

/* Button */
.jm-btn { display: inline-flex; align-items: center; gap: var(--space-2); font: inherit; font-size: 16px; font-weight: 600; line-height: 24px; padding: 12px 24px; border-radius: var(--radius-pill); border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: transform .15s ease; }
.jm-btn-sm { font-size: 14px; line-height: 20px; padding: 6px 16px; }
.jm-btn:hover { transform: translateY(-1px); }
.jm-btn:focus-visible, .jm-card-link:focus-visible, .jm-dc-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.jm-btn-primary { background: var(--tomaat-tekst); color: var(--on-tomaat); }
.jm-btn-primary:hover { filter: brightness(.92); }
.jm-btn-secondary { background: var(--petrol); color: var(--on-petrol); }
.jm-btn-quiet { background: transparent; color: inherit; border-color: currentColor; }
.jm-btn-dark { background: var(--on-zon); color: var(--zon); }
.jm-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* Card */
.jm-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-8); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; min-height: 180px; }
.jm-card-paper { background: var(--paper-deep); }
.jm-card-tomaat { background: var(--tomaat-tekst); color: var(--on-tomaat); }
.jm-card-zon { background: var(--zon); color: var(--on-zon); }
.jm-card-petrol { background: var(--petrol); color: var(--on-petrol); }
.jm-card-label { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.jm-card-title { margin: 0; font-family: var(--font-display); font-size: 30px; line-height: 1.2; font-weight: 500; }
.jm-card-body { font-size: 17px; line-height: 27px; }
.jm-card-more { margin-top: auto; padding-top: var(--space-4); font-weight: 600; font-size: 16px; }
.jm-card-link { transition: transform .15s ease; }
.jm-card-link:hover { transform: translateY(-2px) rotate(-.4deg); }

/* Highlight */
.jm-hl { background: var(--zon); color: var(--on-zon); padding: 0 .18em; border-radius: var(--radius-sm); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Status- en domeinlabel */
.jm-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 500; padding: 3px 10px 3px 8px; border-radius: var(--radius-pill); background: var(--paper-deep); color: var(--ink); white-space: nowrap; }
.jm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--ink-muted)); flex: none; }
.jm-pill-concept { --dot: var(--t-concept); }
.jm-pill-wachtrij { --dot: var(--t-wachtrij); }
.jm-pill-ready { --dot: var(--t-ready); }
.jm-pill-loopt { --dot: var(--t-loopt); }
.jm-pill-beslissen { --dot: var(--t-beslissen); color: var(--t-beslissen); font-weight: 600; }
.jm-pill-fout { --dot: var(--t-fout); color: var(--t-fout); font-weight: 600; }
.jm-pill-voorstel { --dot: var(--t-voorstel); }
.jm-dom { background: transparent; padding-left: 0; }
.jm-dom .jm-dot { width: 10px; height: 10px; }
.jm-dom-lmcr { --dot: var(--d-lmcr); }
.jm-dom-denkbot { --dot: var(--d-denkbot); }
.jm-dom-flurre { --dot: var(--d-flurre); }
.jm-dom-persoonlijk { --dot: var(--d-persoonlijk); }

/* Dispatch-kaart (kanban) */
.jm-dc { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; font-size: 15px; line-height: 22px; }
.jm-dc-corner { position: absolute; top: -22px; right: -22px; width: 56px; height: 56px; border-radius: 50%; background: var(--dc, var(--ink-muted)); }
.jm-dc-lmcr { --dc: var(--d-lmcr); } .jm-dc-denkbot { --dc: var(--d-denkbot); } .jm-dc-flurre { --dc: var(--d-flurre); } .jm-dc-persoonlijk { --dc: var(--d-persoonlijk); }
.jm-dc-top { display: flex; align-items: center; gap: var(--space-2); padding-right: 36px; flex-wrap: wrap; }
.jm-dc-id { font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.jm-dc-title { font-family: var(--font-display); font-size: 19px; line-height: 25px; font-weight: 500; }
.jm-dc-body { color: var(--ink-muted); }
.jm-dc-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-top: var(--space-1); }
.jm-dc-link { transition: transform .15s ease, border-color .15s ease; }
.jm-dc-link:hover { transform: translateY(-2px) rotate(-.3deg); border-color: var(--ink-muted); }

/* Beslis-kaart */
.jm-decision { position: relative; overflow: hidden; max-width: 640px; padding: var(--space-8); border-radius: var(--radius-lg); background: var(--zon); color: var(--on-zon); }
.jm-decision-disc { position: absolute; right: -48px; bottom: -48px; width: 160px; height: 160px; border-radius: 50%; background: var(--petrol); }
.jm-decision-head { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.jm-decision-q { position: relative; margin: var(--space-4) 0 var(--space-2); font-family: var(--font-display); font-size: 30px; line-height: 1.2; font-weight: 500; max-width: 30ch; }
.jm-decision-body { position: relative; font-size: 15px; line-height: 22px; max-width: 52ch; }
.jm-decision-opts { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.jm-decision-origin { position: relative; margin-top: var(--space-4); font-size: 13px; line-height: 18px; max-width: 46ch; }
.jm-decision .jm-btn:focus-visible { outline-color: var(--on-zon); }

/* Veld */
.jm-field { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.jm-field-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.jm-input { font: inherit; font-size: 15px; line-height: 22px; padding: 9px 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--ink-muted); border-radius: var(--radius-sm); }
textarea.jm-input { min-height: 88px; resize: vertical; }
.jm-input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.jm-input-err { border-color: var(--t-fout); }
.jm-field-hint { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.jm-field-err { font-size: 13px; line-height: 18px; color: var(--t-fout); font-weight: 600; }

/* =====================================================================
   COCKPIT · bouwstenen (sb-…). Server-HTML: alleen klassen, geen JS nodig.
   Elke pagina is hieruit opgebouwd. Volgorde: elementen, rij, blokken, onderdelen.
   ===================================================================== */
.sb { font-family: var(--font-sans); font-size: 15px; line-height: 22px; color: var(--ink); }
.sb *, .sb *::before, .sb *::after { box-sizing: border-box; }
.sb :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sb-disp { font-family: var(--font-display); }
.sb-mono { font-family: var(--font-mono); font-size: 13px; line-height: 18px; }
.sb-lbl { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.sb-muted { color: var(--ink-muted); }

/* ---------- 1 · elementen ---------- */
/* Knop: .sb-btn + .sb-btn-p (primair, één per scherm) | .sb-btn-q (gewoon, rand) | .sb-btn-st (stil) | .sb-btn-d (donker, op zon) | .sb-btn-s (klein) | .sb-link */
.sb-btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 20px; border-radius: var(--radius-pill); border: 2px solid transparent; background: transparent; color: inherit; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .15s ease; }
.sb-btn:hover { transform: translateY(-1px); }
.sb-btn:disabled, .sb-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.sb-btn-p { background: var(--tomaat-tekst); color: var(--on-tomaat); }
.sb-btn-q { border-color: currentColor; }
.sb-btn-st { background: var(--paper-deep); }
.sb-btn-d { background: var(--on-zon); color: var(--zon); }
.sb-btn-s { min-height: 36px; padding: 0 14px; font-size: 14px; }
.sb-btn-ic { width: 40px; min-height: 40px; padding: 0; justify-content: center; }
.sb-link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* Chip en stip: .sb-chip (+ .sb-chip-ok | -warn | -fout | -acc), .sb-pill met .sb-dot (toestand, zie StatusPill) */
.sb-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--paper-deep); font-size: 13px; font-weight: 500; white-space: nowrap; }
.sb-chip-ok { background: var(--ok-soft); color: var(--ok-ink); }
.sb-chip-warn { background: var(--warn-soft); color: var(--warn-ink); }
.sb-chip-fout { background: var(--fout-soft); color: var(--t-fout); }
.sb-chip-acc { background: var(--tomaat-tekst); color: var(--on-tomaat); }

/* ID-knop: één klik kopieert het hele ID */
.sb-id { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: var(--radius-pill); border: 1.5px dashed var(--line); background: none; color: var(--ink-muted); font-family: var(--font-mono); font-size: 12px; cursor: pointer; }
.sb-id:hover { border-color: var(--ink-muted); color: var(--ink); }

/* Teller: tomaat alleen als iets op jou wacht (.sb-count-jou) */
.sb-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--paper); border: 1.5px solid var(--line); font-size: 12px; font-weight: 700; }
.sb-count-jou { background: var(--tomaat-tekst); border-color: var(--tomaat-tekst); color: var(--on-tomaat); }
.sb-count-zon { background: var(--on-zon); border-color: var(--on-zon); color: var(--zon); }

/* Segment: de ene hoofdindeling van een lijst; ook voor één keuze (choice) */
.sb-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: var(--radius-pill); background: var(--kaart); border: 1.5px solid var(--line); }
.sb-seg button, .sb-seg a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--radius-pill); background: none; color: inherit; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.sb-seg [aria-pressed="true"], .sb-seg [aria-current="page"] { background: var(--ink); color: var(--paper); }
.sb-seg [aria-pressed="true"] .sb-count { background: var(--zon); border-color: var(--zon); color: var(--on-zon); }

/* Avatar: schijf in de domeinkleur met initialen (.sb-av-lmcr | -denkbot | -flurre | -persoonlijk) */
.sb-av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; font-size: 13px; font-weight: 700; background: var(--d-persoonlijk); color: var(--paper); }
.sb-av-lmcr { background: var(--d-lmcr); color: var(--on-petrol); }
.sb-av-denkbot { background: var(--d-denkbot); color: var(--on-zon); }
.sb-av-flurre { background: var(--d-flurre); color: var(--on-zon); }
.sb-av-s { width: 28px; height: 28px; font-size: 11px; }

/* Voortgang: alleen bij iets dat loopt of een doel. .sb-prog > span[style=width:x%]; schijfjes: .sb-discs > i(.af | .nu) */
.sb-prog { display: block; height: 6px; border-radius: 3px; background: var(--paper-deep); overflow: hidden; }
.sb-prog > span { display: block; height: 100%; border-radius: 3px; background: var(--petrol); }
.sb-discs { display: inline-flex; gap: 4px; }
.sb-discs i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ink-muted); }
.sb-discs i.af { background: var(--petrol); border-color: var(--petrol); }
.sb-discs i.nu { background: var(--zon); border-color: var(--zon); }
.sb-discs i.stop { background: var(--t-fout); border-color: var(--t-fout); }

/* Bronlabel: waar een gegeven vandaan komt */
.sb-src { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: var(--radius-pill); background: var(--paper-deep); color: var(--ink-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }

/* ---------- 2 · rij: voorloper, titel, één regel uitleg, rechts één gegeven ---------- */
.sb-rows { display: flex; flex-direction: column; }
.sb-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 60px; padding: 10px 12px; border: 0; border-radius: 16px; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.sb-row + .sb-row { box-shadow: inset 0 1px 0 var(--line); border-radius: 0 0 16px 16px; }
.sb-row:hover { background: var(--paper-deep); }
.sb-row[aria-current="true"], .sb-row.sel { background: var(--petrol); color: var(--on-petrol); box-shadow: none; border-radius: 16px; }
.sb-row[aria-current="true"] .sb-row-s, .sb-row.sel .sb-row-s, .sb-row.sel .sb-row-x { color: inherit; opacity: .85; }
.sb-row-lead { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--dot, var(--ink-muted)); }
.sb-row-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-row-t { font-weight: 600; line-height: 21px; }
.sb-row-s { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sb-row-x { flex: none; font-size: 13px; color: var(--ink-muted); text-align: right; }
.sb-row .sb-prog { margin-top: 6px; }

/* ---------- 3 · blokken: alle inhoud van een detail ---------- */
.sb-blk { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--radius-lg); background: var(--kaart); border: 1.5px solid var(--line); }
.sb-blk-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.sb-blk-h h2, .sb-blk-h h3 { margin: 0; font-family: var(--font-display); font-size: 21px; line-height: 27px; font-weight: 500; }
.sb-blk-petrol { background: var(--petrol); border-color: var(--petrol); color: var(--on-petrol); }
.sb-blk-petrol .sb-muted, .sb-blk-petrol .sb-lbl { color: inherit; opacity: .8; }
.sb-blk-deep { background: var(--paper-deep); border-color: var(--paper-deep); }
.sb-corner { position: absolute; top: -28px; right: -28px; width: 84px; height: 84px; border-radius: 50%; background: var(--zon); pointer-events: none; }
.sb-txt { margin: 0; font-size: 17px; line-height: 27px; max-width: 64ch; }

/* Banner: .sb-banner-jou (zon, wacht op jou) | -letop (er ontbreekt iets) | -gelukt (alleen als het nieuws is) */
.sb-banner { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: 18px 22px; border-radius: var(--radius-lg); }
.sb-banner-m { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 2px; position: relative; }
.sb-banner-m b { font-weight: 700; }
.sb-banner-m span { font-size: 14px; line-height: 20px; }
.sb-banner-ic { flex: none; position: relative; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.sb-banner-jou { background: var(--zon); color: var(--on-zon); }
.sb-banner-jou .sb-banner-ic { background: var(--on-zon); color: var(--zon); }
.sb-banner-jou::after { content: ""; position: absolute; right: -26px; bottom: -40px; width: 96px; height: 96px; border-radius: 50%; background: var(--petrol); }
.sb-banner-jou .sb-btn { position: relative; z-index: 1; margin-right: 60px; }
.sb-banner-letop { background: var(--warn-soft); color: var(--warn-ink); }
.sb-banner-letop .sb-banner-ic { border: 2px dashed currentColor; }
.sb-banner-gelukt { background: var(--ok-soft); color: var(--ok-ink); }
.sb-banner-gelukt .sb-banner-ic { background: var(--petrol); color: var(--on-petrol); }
.sb-banner-fout { background: var(--fout-soft); color: var(--t-fout); }
.sb-banner-fout .sb-banner-ic { background: var(--t-fout); color: var(--paper); }

/* KV: gegevens met bron */
.sb-kv { display: grid; grid-template-columns: minmax(96px, auto) 1fr auto; gap: 10px 18px; align-items: baseline; }
.sb-kv > .k { font-size: 14px; color: var(--ink-muted); }
.sb-kv > .v { font-weight: 600; }
.sb-blk-petrol .sb-kv > .k { color: inherit; opacity: .8; }

/* Tijdlijn */
.sb-tl { display: flex; flex-direction: column; }
.sb-tl-i { display: grid; grid-template-columns: 56px 16px 1fr auto; gap: 8px; align-items: start; padding: 7px 0; }
.sb-tl-i .t { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); padding-top: 2px; }
.sb-tl-i .d { width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; background: var(--dot, var(--ink-muted)); }

/* Stappen: waar staat het */
.sb-steps { display: flex; flex-wrap: wrap; align-items: center; row-gap: 10px; }
.sb-step { display: flex; align-items: center; gap: 10px; }
.sb-step .c { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); background: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.sb-step .n { font-size: 14px; font-weight: 500; color: var(--ink-muted); }
.sb-step .bar { width: 40px; height: 3px; border-radius: 2px; background: var(--line); margin: 0 10px; }
.sb-step.af .c { background: var(--petrol); border-color: var(--petrol); color: var(--on-petrol); }
.sb-step.af .n { color: var(--ink); }
.sb-step.af .bar { background: var(--petrol); }
.sb-step.nu .c { width: 40px; height: 40px; background: var(--zon); border-color: var(--zon); color: var(--on-zon); }
.sb-step.nu .n { color: var(--ink); font-weight: 700; }

/* Nalopen (check) */
.sb-check { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sb-check:first-child { border-top: 0; }
.sb-check .bx { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ink-muted); display: inline-flex; align-items: center; justify-content: center; }
.sb-check[aria-checked="true"] .bx { background: var(--petrol); border-color: var(--petrol); color: var(--on-petrol); }
.sb-check .x { margin-left: auto; font-size: 13px; color: var(--ink-muted); white-space: nowrap; }

/* Getallen (stats): tegels in zon, petrol, tomaat-tekst en zand */
.sb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.sb-stat { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; min-height: 104px; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--paper-deep); }
.sb-stat b { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 600; }
.sb-stat span { font-size: 14px; }
.sb-stat-zon { background: var(--zon); color: var(--on-zon); }
.sb-stat-petrol { background: var(--petrol); color: var(--on-petrol); }
.sb-stat-tomaat { background: var(--tomaat-tekst); color: var(--on-tomaat); }

/* Link: voorbeeld openen */
.sb-linkcard { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--paper-deep); color: inherit; text-decoration: none; }
.sb-linkcard .ic { flex: none; width: 40px; height: 48px; border-radius: 8px 16px 8px 8px; background: var(--zon); color: var(--on-zon); display: inline-flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.sb-linkcard .m { display: flex; flex-direction: column; min-width: 0; }
.sb-linkcard .m b { font-weight: 600; }
.sb-linkcard .m span { font-size: 13px; color: var(--ink-muted); }

/* Acties en technische details */
.sb-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.sb-tech { border-radius: 16px; background: var(--paper-deep); padding: 12px 16px; }
.sb-tech summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.sb-tech .sb-mono { display: block; color: var(--ink-muted); padding-top: 6px; }

/* ---------- 4 · onderdelen ---------- */
/* Menu (zijbalk) en bovenbalk */
.sb-app { display: flex; flex-wrap: wrap; min-height: 100vh; background: var(--paper); }
.sb-side { position: relative; overflow: hidden; flex: 1 1 248px; max-width: 248px; display: flex; flex-direction: column; gap: 18px; padding: 20px 14px; background: var(--paper-deep); }
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; font-weight: 700; font-size: 16px; }
.sb-mark { position: relative; flex: none; width: 30px; height: 30px; }
.sb-mark i { position: absolute; border-radius: 50%; }
.sb-mark i:nth-child(1) { left: 0; top: 4px; width: 22px; height: 22px; background: var(--tomaat); }
.sb-mark i:nth-child(2) { left: 14px; top: 0; width: 14px; height: 14px; background: var(--zon); }
.sb-mark i:nth-child(3) { left: 16px; top: 18px; width: 12px; height: 12px; background: var(--petrol); }
.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-nav a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-pill); color: inherit; text-decoration: none; font-size: 15px; }
.sb-nav a:hover { background: var(--paper); }
.sb-nav a[aria-current="page"] { background: var(--ink); color: var(--paper); font-weight: 600; }
.sb-nav a .sb-count { margin-left: auto; }
.sb-nav-h { padding: 10px 12px 4px; }
.sb-org { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 12px; font-size: 14px; color: var(--ink-muted); }
.sb-org i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.sb-side-blob { position: absolute; left: -70px; bottom: -90px; width: 220px; height: 220px; border-radius: 50%; background: var(--petrol); pointer-events: none; }
.sb-side-blob2 { position: absolute; left: 120px; bottom: 40px; width: 44px; height: 44px; border-radius: 50%; background: var(--zon); pointer-events: none; }
.sb-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
.sb-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 32px; }
.sb-crumb { font-size: 14px; color: var(--ink-muted); }
.sb-crumb b { color: var(--ink); font-weight: 600; }
.sb-top-r { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sb-search { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; min-width: 260px; padding: 0 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--line); background: var(--kaart); color: var(--ink-muted); font: inherit; font-size: 14px; cursor: pointer; }
.sb-search kbd { margin-left: auto; font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.sb-content { width: 100%; max-width: 1180px; margin: 0 auto; padding: 8px 32px 64px; display: flex; flex-direction: column; gap: 24px; }

/* Paginakop: titel + één zin + hooguit één primaire actie; vormen rechts */
.sb-head { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; gap: 24px; min-height: 240px; padding: 36px 40px; border-radius: 28px; background: var(--paper-deep); }
.sb-head-m { position: relative; z-index: 1; flex: 1 1 480px; min-width: 0; max-width: 680px; display: flex; flex-direction: column; gap: 14px; }
.sb-head h1 { margin: 0; font-family: var(--font-display); font-size: 44px; line-height: 1.08; font-weight: 600; letter-spacing: -.015em; }
.sb-head h1 mark, .sb-mark-w { background: var(--zon); color: var(--on-zon); padding: 0 .14em; border-radius: 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.sb-head-sub { color: var(--ink-muted); font-size: 15px; }
.sb-head-art { position: relative; flex: 1 1 260px; min-height: 180px; }
.sb-head-art i { position: absolute; display: block; }
.sb-head-compact { min-height: 0; padding: 28px 32px; }
.sb-head-compact h1 { font-size: 34px; }
.sb-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Filterbalk: zoeken · één segment · Filters · actieve chips */
.sb-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sb-filters .sb-input-s { flex: 0 1 300px; }
.sb-fchip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--line); background: var(--kaart); color: inherit; font: inherit; font-size: 14px; cursor: pointer; }
.sb-fchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sb-fchip i { width: 10px; height: 10px; border-radius: 50%; }
.sb-input-s { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--ink-muted); background: var(--kaart); color: var(--ink-muted); font: inherit; font-size: 14px; }

/* Detailkop: avatar of domeinschijf, titel, chips, ID-knop, acties */
.sb-dhead { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; padding: 28px 32px; border-radius: 28px; background: var(--paper-deep); }
.sb-dhead-m { position: relative; z-index: 1; flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sb-dhead h1 { margin: 0; font-family: var(--font-display); font-size: 36px; line-height: 1.1; font-weight: 600; letter-spacing: -.01em; }
.sb-dhead .sb-av { width: 56px; height: 56px; font-size: 18px; }
.sb-dhead-a { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.sb-dhead::after { content: ""; position: absolute; right: -50px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: var(--dhead, var(--petrol)); opacity: 1; }
.sb-dhead .sb-dhead-a { margin-right: 120px; }

/* Zijpaneel: detailkop + blokken; op telefoon heel scherm */
.sb-scrim { position: fixed; inset: 0; background: var(--sb-scrim); }
.sb-peek { position: relative; display: flex; flex-direction: column; gap: 16px; width: min(480px, 100%); padding: 24px; background: var(--paper); border-left: 1.5px solid var(--line); overflow: hidden; }
.sb-peek-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sb-peek h2 { margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 600; }
.sb-peek::before { content: ""; position: absolute; right: -40px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--zon); pointer-events: none; }
.sb-peek > * { position: relative; }

/* Lege toestand: wat er is, en één knop */
.sb-empty { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 40px; border-radius: 28px; background: var(--paper-deep); min-height: 220px; }
.sb-empty h2 { margin: 0; font-family: var(--font-display); font-size: 30px; line-height: 1.2; font-weight: 500; max-width: 20ch; position: relative; }
.sb-empty p { margin: 0; max-width: 46ch; color: var(--ink-muted); position: relative; }
.sb-empty .sb-btn { position: relative; }
.sb-empty-art { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); width: 200px; height: 160px; pointer-events: none; }
.sb-empty-art i { position: absolute; border-radius: 50%; }

/* Venster: zoeken (⌘K) en vastleggen */
.sb-dlg { position: relative; overflow: hidden; width: min(640px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 28px; background: var(--paper); border: 1.5px solid var(--line); }
.sb-dlg-h { display: flex; justify-content: space-between; align-items: center; }
.sb-dlg h2 { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 600; }
.sb-dlg-in { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; border-radius: var(--radius-pill); border: 2px solid var(--ink); background: var(--kaart); font-size: 16px; }
.sb-dlg-grp { display: flex; flex-direction: column; gap: 2px; }
.sb-dlg-opt { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 14px; }
.sb-dlg-opt.sel { background: var(--zon); color: var(--on-zon); }
.sb-dlg-opt kbd { margin-left: auto; font-family: var(--font-mono); font-size: 11px; border: 1px solid currentColor; border-radius: 6px; padding: 1px 6px; opacity: .7; }
.sb-dlg-ic { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--paper-deep); font-weight: 700; font-size: 13px; }
.sb-dlg-keus { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sb-dlg-k { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 18px; border: 2px solid var(--line); background: var(--kaart); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.sb-dlg-k[aria-pressed="true"] { border-color: var(--ink); background: var(--zon); color: var(--on-zon); }
.sb-dlg-k b { font-weight: 700; }
.sb-dlg-k span { font-size: 13px; }

/* Melding onderin (toast) */
.sb-toast { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 8px 0 20px; border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); font-weight: 500; }
.sb-toast .sb-btn { color: var(--zon); }

@media (max-width: 900px) {
  .sb-side { max-width: none; flex-basis: 100%; }
  .sb-top, .sb-content { padding-left: 16px; padding-right: 16px; }
  .sb-head { padding: 24px; } .sb-head h1 { font-size: 32px; }
  .sb-dhead .sb-dhead-a { margin-right: 0; }
  .sb-kv { grid-template-columns: 1fr auto; } .sb-kv > .v { grid-column: 1; }
  .sb-dlg-keus { grid-template-columns: 1fr; }
  .sb-empty-art { display: none; }
}

/* --- aanvulling ronde 2: gekozen rij, compacte stappen, 'komt nog' --- */
.sb-row[aria-current="true"] .sb-row-x, .sb-row.sel .sb-row-x { color: inherit; opacity: .85; }
.sb-row[aria-current="true"] .sb-prog, .sb-row.sel .sb-prog { background: var(--on-petrol-25); }
.sb-row[aria-current="true"] .sb-prog > span, .sb-row.sel .sb-prog > span { background: var(--zon); }
.sb-row[aria-current="true"] .sb-row-lead, .sb-row.sel .sb-row-lead { box-shadow: 0 0 0 2px var(--on-petrol); }
.sb-row[aria-current="true"] .sb-chip, .sb-row.sel .sb-chip, .sb-row[aria-current="true"] .sb-src, .sb-row.sel .sb-src { background: var(--paper); color: var(--ink); }
.sb-steps-s .sb-step .c { width: 24px; height: 24px; font-size: 12px; }
.sb-steps-s .sb-step.nu .c { width: 32px; height: 32px; }
.sb-steps-s .sb-step .bar { width: 18px; margin: 0 6px; }
.sb-steps-s .sb-step .n { font-size: 13px; }
.sb-chip-later { background: transparent; border: 1.5px dashed var(--ink-muted); color: var(--ink-muted); }

/* --- aanvulling ronde 3: links, ondergronden, sectiekop, zon-blok, soorten, formulieren --- */
a.sb-blk, a.jm-dc, a.sb-stat, a.sb-fchip, a.sb-linkcard, a.jm-card, a.sb-row { color: inherit; text-decoration: none; }
a.jm-dc *, a.sb-blk h2, a.sb-blk h3 { text-decoration: none; }
.jm-dc-title { overflow-wrap: anywhere; hyphens: auto; }
.sb-head .sb-chip, .sb-dhead .sb-chip, .sb-empty .sb-chip, .sb-blk-deep .sb-chip, .sb-head .sb-src, .sb-dhead .sb-src, .sb-blk-deep .sb-src { background: var(--paper); }
.sb-head .sb-chip-ok, .sb-dhead .sb-chip-ok { background: var(--ok-soft); }
.sb-head .sb-chip-warn, .sb-dhead .sb-chip-warn { background: var(--warn-soft); }
.sb-head .sb-chip-acc, .sb-dhead .sb-chip-acc { background: var(--tomaat-tekst); }
/* Sectiekop boven een groep blokken */
.sb-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.sb-sec-h h2 { margin: 0; font-family: var(--font-display); font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.01em; }
/* Blok in zon: lijst of vraag die aandacht vraagt (tekst altijd on-zon) */
.sb-blk-zon { background: var(--zon); border-color: var(--zon); color: var(--on-zon); }
.sb-blk-zon .sb-muted, .sb-blk-zon .sb-lbl, .sb-blk-zon .sb-row-s, .sb-blk-zon .sb-row-x { color: inherit; }
.sb-blk-zon .sb-row { background: var(--kaart); color: var(--ink); border-radius: 16px; box-shadow: none; }
.sb-blk-zon .sb-row + .sb-row { margin-top: 8px; }
.sb-blk-zon .sb-row .sb-row-s, .sb-blk-zon .sb-row .sb-row-x { color: var(--ink-muted); }
.sb-blk-zon .sb-corner { background: var(--petrol); top: auto; bottom: -40px; right: -40px; width: 120px; height: 120px; }
/* Rijen op een petrol blok */
.sb-blk-petrol .sb-row:hover { background: var(--on-petrol-12); }
.sb-blk-petrol .sb-row-s, .sb-blk-petrol .sb-row-x { color: inherit; opacity: .85; }
.sb-blk-petrol .sb-row + .sb-row { box-shadow: inset 0 1px 0 var(--on-petrol-25); }
.sb-blk-petrol .jm-pill, .sb-blk-petrol .sb-chip, .sb-blk-petrol .sb-src { background: var(--paper); color: var(--ink); }
/* Lichte cijfertegel en extra toestanden */
.sb-stat-kaart { background: var(--kaart); border: 1.5px solid var(--line); }
.sb-discs i.jou { background: var(--tomaat-tekst); border-color: var(--tomaat-tekst); }
.jm-pill-gehaald { --dot: var(--t-loopt); }
.jm-pill-controle { --dot: var(--petrol); }
/* Soort van een item: vorm plus woord */
.sb-kind { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.sb-kind::before { content: ""; flex: none; width: 14px; height: 14px; background: var(--ink-muted); border-radius: 50%; }
.sb-kind-idee::before { background: var(--zon); box-shadow: inset 0 0 0 1.5px var(--on-zon); }
.sb-kind-notitie::before { background: var(--petrol); border-radius: 3px; }
.sb-kind-learning::before { background: var(--tomaat); border-radius: 14px 14px 0 0; height: 8px; }
.sb-kind-onderzoek::before { background: none; box-shadow: inset 0 0 0 3px var(--petrol); }
.sb-kind-post::before { background: var(--zon); border-radius: 50% 50% 50% 0; box-shadow: inset 0 0 0 1.5px var(--on-zon); }
/* Formulieren */
.sb-input-s input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--ink); outline: none; }
.sb-input-s:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.sb-select { position: relative; display: block; }
.sb-select select.jm-input { appearance: none; -webkit-appearance: none; width: 100%; padding-right: 40px; }
.sb-select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.sb-fs { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Besliskaart compact en vormen die tekst niet raken */
.jm-decision-s { padding: 24px; }
.jm-decision-s .jm-decision-q { font-size: 22px; line-height: 28px; }
.jm-decision-s .jm-decision-disc { width: 110px; height: 110px; right: -44px; bottom: -54px; }
.jm-decision-opts, .jm-decision-origin { margin-right: 84px; }
.sb-banner-jou .sb-btn { margin-right: 0; }
.sb-banner-jou > .sb-btn:last-child { margin-right: 56px; }
@media (max-width: 600px) {
  .jm-decision-disc { width: 96px; height: 96px; right: -48px; bottom: -56px; }
  .jm-decision-opts, .jm-decision-origin { margin-right: 0; }
  .sb-dhead::after { width: 110px; height: 110px; right: -64px; top: -70px; }
  .sb-dhead-m { padding-right: 36px; }
}

/* =====================================================================
   TOEVOEGINGEN (Schetsboek 1). Niet in de bron; elk blok zegt waarom.
   ===================================================================== */

/* T1 · Kleur via een klasse in plaats van style="--dot:…" of style="background:…". `--dot` lezen
   .jm-dot, .sb-row-lead en .sb-tl-i .d al; de stip van .sb-org en .sb-fchip leest hem nu ook. */
.sb-org i, .sb-fchip i { background: var(--dot, var(--ink-muted)); }
.sb-dot-t-concept { --dot: var(--t-concept); }
.sb-dot-t-wachtrij { --dot: var(--t-wachtrij); }
.sb-dot-t-ready { --dot: var(--t-ready); }
.sb-dot-t-loopt { --dot: var(--t-loopt); }
.sb-dot-t-beslissen { --dot: var(--t-beslissen); }
.sb-dot-t-fout { --dot: var(--t-fout); }
.sb-dot-t-voorstel { --dot: var(--t-voorstel); }
.sb-dot-d-lmcr { --dot: var(--d-lmcr); }
.sb-dot-d-denkbot { --dot: var(--d-denkbot); }
.sb-dot-d-flurre { --dot: var(--d-flurre); }
.sb-dot-d-persoonlijk { --dot: var(--d-persoonlijk); }
.sb-dot-petrol { --dot: var(--petrol); }
.sb-dot-zon { --dot: var(--zon); }
.sb-dot-tomaat { --dot: var(--tomaat); }
.sb-dot-tomaat-tekst { --dot: var(--tomaat-tekst); }
.sb-dot-ink { --dot: var(--ink); }
.sb-dot-ink-muted { --dot: var(--ink-muted); }
.sb-dot-on-petrol { --dot: var(--on-petrol); }
/* De schijf van de detailkop volgt het domein (Detailkop.md: style="--dhead:…"). */
.sb-dhead-lmcr { --dhead: var(--d-lmcr); }
.sb-dhead-denkbot { --dhead: var(--d-denkbot); }
.sb-dhead-flurre { --dhead: var(--d-flurre); }
.sb-dhead-persoonlijk { --dhead: var(--d-persoonlijk); }

/* T2 · Voortgang: de breedte van `.sb-prog > span` in stappen van 5% (was style="width:x%"). */
.sb-prog-0 { width: 0%; } .sb-prog-5 { width: 5%; } .sb-prog-10 { width: 10%; }
.sb-prog-15 { width: 15%; } .sb-prog-20 { width: 20%; } .sb-prog-25 { width: 25%; }
.sb-prog-30 { width: 30%; } .sb-prog-35 { width: 35%; } .sb-prog-40 { width: 40%; }
.sb-prog-45 { width: 45%; } .sb-prog-50 { width: 50%; } .sb-prog-55 { width: 55%; }
.sb-prog-60 { width: 60%; } .sb-prog-65 { width: 65%; } .sb-prog-70 { width: 70%; }
.sb-prog-75 { width: 75%; } .sb-prog-80 { width: 80%; } .sb-prog-85 { width: 85%; }
.sb-prog-90 { width: 90%; } .sb-prog-95 { width: 95%; } .sb-prog-100 { width: 100%; }

/* T3 · Vormen in de paginakop en de lege toestand: vaste sets in plaats van een style per vorm.
   sb-art-1: de grote kop (Bouwstenen6: petrol blok, tomaatschijf, zonblok, twee zonstippen;
   met drie vormen de kop van Nu). sb-art-2: de lege toestand. Een pagina kiest een set; een
   nieuwe set komt hier bij, nooit op de pagina. */
.sb-art-1 > i:nth-child(1) { right: -40px; top: -60px; width: 200px; height: 240px; border-radius: 28px; background: var(--petrol); }
.sb-art-1 > i:nth-child(2) { right: 170px; top: 40px; width: 120px; height: 120px; border-radius: 50%; background: var(--tomaat); }
.sb-art-1 > i:nth-child(3) { right: 110px; bottom: -40px; width: 140px; height: 100px; border-radius: 24px; background: var(--zon); }
.sb-art-1 > i:nth-child(4) { right: 24px; top: 30px; width: 14px; height: 14px; border-radius: 50%; background: var(--zon); }
.sb-art-1 > i:nth-child(5) { right: 50px; top: 30px; width: 14px; height: 14px; border-radius: 50%; background: var(--zon); }
.sb-art-2 > i:nth-child(1) { right: 0; top: 0; width: 120px; height: 120px; background: var(--petrol); }
.sb-art-2 > i:nth-child(2) { right: 90px; top: 70px; width: 80px; height: 80px; background: var(--zon); }
.sb-art-2 > i:nth-child(3) { right: 20px; top: 110px; width: 36px; height: 36px; background: var(--tomaat); }

/* T4 · Kleine bouwstenen die de ontwerpen met een style deden. */
.sb-txt-s { font-size: 15px; line-height: 22px; }      /* tekst in een smal blok (zijpaneel) */
.sb-hint { font-size: 14px; }                           /* één zin uitleg onder een keuze */
.sb-dlg-s { width: min(520px, 100%); }                  /* het smallere venster (vastleggen) */
.sb-dlg-grp > .sb-lbl { padding: 4px 12px; }            /* groepskop in het zoekvenster */
.sb-dlg-in kbd { margin-left: auto; font-size: 11px; }  /* "esc" rechts in het zoekveld */
.jm-field-vol { max-width: none; }                      /* een veld over de hele breedte */
.sb-op-zon { display: inline-flex; padding: 8px; border-radius: var(--radius-pill); background: var(--zon); } /* een knop op zon */

/* T5 · Menu (menu-standaard.html). De groepskop had style="display:block". */
.sb-nav-h { display: block; }
/* Het merk is een link naar Nu. */
a.sb-brand { color: inherit; text-decoration: none; }
/* Een regel zonder scherm: gedimd, geen link en geen chip (P6); "komt nog" staat er voor de
   schermlezer bij (.sb-sr). */
.sb-nav-uit { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-pill); color: var(--ink-muted); font-size: 15px; cursor: default; }
/* Organisaties als filter (het bestaande formulier naar POST /domein): stip = aan, ring = uit. De
   regel zelf blijft de kleine gedempte .sb-org van menu-standaard; geen tellers in het menu. */
.sb-orgs { display: flex; flex-direction: column; margin: 0; }
.sb-org-kies { position: relative; cursor: pointer; border-radius: var(--radius-pill); }
.sb-org-kies:hover { background: var(--paper); }
.sb-org-in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sb-org-kies:not(:has(.sb-org-in:checked)) i { background: transparent; box-shadow: inset 0 0 0 2px var(--ink-muted); }
.sb-org-kies:has(.sb-org-in:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.sb-orgs-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px 0; }
/* De detailkop met een lange naam (klantnamen zijn vaak lang): de titel breekt binnen de kaart af
   in plaats van achter overflow:hidden te verdwijnen, zoals .jm-dc-title in het ontwerp; op de
   telefoon een kleinere letter. */
.sb-dhead h1 { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 600px) {
  .sb-dhead h1 { font-size: 28px; }
}
/* De voet van de zijbalk: Jurre, de stand van de kern en Uitloggen (bestonden al; niet in het ontwerp). */
.sb-side-voet { display: flex; align-items: center; gap: 10px; padding: 0 6px; font-size: 13px; line-height: 18px; }
.sb-side-voet-m { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sb-side-voet-s { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); }
.sb-side-voet form { margin: 0; }
/* De vormen onderin raken geen regel: ruimte onder de laatste regel, en de regels liggen erboven. */
.sb-app > .sb-side { padding-bottom: 150px; }
.sb-side > :not(.sb-side-blob, .sb-side-blob2) { position: relative; z-index: 1; }

/* T6 · Bovenbalk: een lange kruimel kapt af in plaats van de knoppen weg te duwen; op de telefoon
   (T7) worden zoeken en Leg vast iconen met een tikdoel van 44px. */
.sb-crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* T7 · Telefoon (onder 900px, één breekpunt met studio.css). Het ontwerp zet de zijbalk boven de
   inhoud; de cockpit houdt daar de onderbalk en het Menu-venster (beslissing 4), dus de zijbalk
   is weg (display: none, ook uit de tabvolgorde) en de inhoud houdt ruimte voor de onderbalk. */
@media (max-width: 900px) {
  .sb-app > .sb-side { display: none; }
  .sb-app .sb-content { padding-bottom: calc(56px + 40px + env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) {
  .sb-top { gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .sb-crumb-pre, .sb-top-t, .sb-search-t, .sb-search kbd { display: none; }
  .sb-search { min-width: 0; width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .sb-top .sb-btn-s { min-height: 44px; }
  .sb-top .sb-btn-s:has(.sb-top-t) { padding: 0 12px; }
  /* De vormen van de kop staan onder de tekst en mogen er niet overheen (Paginakop.md). */
  .sb-head-art { overflow: hidden; min-height: 150px; }
}

/* T8 · De pagina Bouwstenen (Bouwstenen6): de catalogusindeling uit de <style> van het ontwerp,
   letterlijk, plus de indeling die daar met style="…" stond. Alleen layout, zoals `pg-`. */
.sj-bouwstenen { gap: var(--space-6); } /* de wortel van de catalogus: secties 24px uit elkaar, zoals .sb-content */
.bs-sec{display:flex;flex-direction:column;gap:16px}
.bs-sec-h{display:flex;align-items:center;gap:14px}
.bs-sec-h h2{margin:0;font-family:var(--font-display);font-size:28px;line-height:34px;font-weight:600}
.bs-nr{flex:none;width:44px;height:44px;border-radius:50%;background:var(--zon);color:var(--on-zon);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:22px;font-weight:700}
.bs-card{display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:var(--radius-lg);background:var(--kaart);border:1.5px solid var(--line);min-width:0}
.bs-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.bs-board .bs-col{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:24px;background:var(--paper-deep)}
.bs-board .bs-col>b{font-size:19px;font-weight:500}
.bs-stapel-12 { display: flex; flex-direction: column; gap: 12px; }
.bs-stapel-16 { display: flex; flex-direction: column; gap: 16px; }
.bs-stapel-18 { display: flex; flex-direction: column; gap: 18px; }
.bs-stapel-20 { display: flex; flex-direction: column; gap: 20px; }
.bs-rij-8 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bs-rij-10 { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bs-rij-14 { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.bs-rij-16 { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.bs-rij-24 { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.bs-max-760 { max-width: 760px; }
.bs-w240 { width: 240px; max-width: 100%; }
.bs-blokken { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.bs-paneel-demo { position: relative; display: flex; justify-content: flex-end; min-height: 600px; background: var(--paper-deep); border-radius: 20px; overflow: hidden; }
.bs-paneel-scrim { position: absolute; inset: 0; background: var(--sb-scrim-zacht); }
.bs-venster-demo { display: flex; flex-wrap: wrap; gap: 24px; padding: 24px; align-items: flex-start; background: var(--paper-deep); border-radius: 20px; }
@media (max-width: 900px) {
  .bs-grid2, .bs-blokken { grid-template-columns: minmax(0, 1fr); }
  .bs-venster-demo { padding: 12px; }
}

/* toegevoegd in deel 4: twee blokken naast elkaar (Research "De vraag" en "Waarom nu", Meetings
   "Besluiten" en "Actiepunten"). Letterlijk `.pg-two` uit de <style> van de schermen Research6,
   Kennis6, Meetings6 en Relaties6; alleen layout. Onder 900px één kolom, zoals daar. */
.pg-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) {
  .pg-two { grid-template-columns: minmax(0, 1fr); }
}

/* toegevoegd in deel 4: lange woorden, bronlabel in gegevens, stappen en de domeinschijf in de
   detailkop (visuele review Schetsboek 4). Alleen in de bouwsteen, nooit op een pagina. */
/* Een lang woord (een URL of ID in lopende tekst) breekt af in plaats van het blok uit te lopen. */
.sb-row-t, .sb-row-s { overflow-wrap: anywhere; }
.sb-tl-i { grid-template-columns: 56px 16px minmax(0, 1fr) auto; }
.sb-tl-i > span { min-width: 0; overflow-wrap: anywhere; }
.sb-tl-i > .t { overflow-wrap: normal; }
/* Het bronlabel in gegevens krijgt zijn eigen breedte (een grid-cel rekt hem anders uit). */
.sb-kv > .sb-src { justify-self: end; }
/* De detailkop zonder acties: de titel blijft links van de domeinschijf rechtsboven. */
.sb-dhead-m:last-child { padding-right: 96px; }
@media (max-width: 900px) {
  .sb-dhead-m:last-child { padding-right: 40px; }
}
/* Stappen op een smal scherm: geen verbindingsstreep, die anders aan het eind van een regel hangt. */
@media (max-width: 600px) {
  .sb-steps { column-gap: 14px; }
  .sb-steps .sb-step .bar { display: none; }
}

/* toegevoegd in deel 3: bouwstenen (Schetsboek 3/5, de Plannen-pagina's) */
/* Een gestopte werkregel in de stappen (Epic6: voortgang per werkregel): een kruis op tomaat,
   zoals .sb-discs i.stop. De stappen als lijst (`ul`, de live-morph kent geen `ol`). */
.sb-step.stop .c { background: var(--t-fout); border-color: var(--t-fout); color: var(--paper); }
.sb-step.stop .n { color: var(--ink); }
ul.sb-steps { list-style: none; margin: 0; padding: 0; }
/* Focus op petrol: de ring (studio.css, 2px ink) in de tekstkleur van petrol, want ink valt er
   weg; zoals .jm-decision .jm-btn de kleur op zon zet. Op zon is on-zon gelijk aan ink. */
.sb-blk-petrol :focus-visible { outline-color: var(--on-petrol); }
/* Een inklapbaar blok (`details.sb-blk`): de kop is de summary, zonder het driehoekje. */
details.sb-blk > summary { cursor: pointer; list-style: none; }
details.sb-blk > summary::-webkit-details-marker { display: none; }
details.sb-blk > summary::after { content: "+"; margin-left: auto; font-weight: 700; }
details.sb-blk[open] > summary::after { content: "–"; }
/* De teller in de gekozen keuze van een segment met links (`aria-current`), zoals bij
   `aria-pressed`: anders staat paper op paper en is het getal onzichtbaar. */
.sb-seg [aria-current="page"] .sb-count { background: var(--zon); border-color: var(--zon); color: var(--on-zon); }
/* Vormen die tekst niet raken: ruimte naast de schijf van de detailkop en van het zon-banner. */
.sb-dhead > .sb-dhead-m { padding-right: 110px; }
.sb-banner-jou > .sb-banner-m { padding-right: 56px; }
/* Op de telefoon staat de hoofdknop van een detailpagina in de telefoonbalk eronder; dan niet
   ook nog in de detailkop (zoals de oude detailkop). */
@media (max-width: 900px) {
  .sb-dhead:has(+ .sb-acts.only-m.stick) > .sb-dhead-a { display: none; }
}
@media (max-width: 600px) {
  .sb-dhead > .sb-dhead-m { padding-right: 40px; }
  .sb-banner-jou > .sb-banner-m { padding-right: 40px; }
}

/* toegevoegd in deel 3: indeling Plannen-pagina's (Weekfocus, Weekscan, Projecten, Project, Epic,
   Mappen). Alleen layout (grid, flex, gap, positie), geen kleur; zoals bs- voor Bouwstenen. Eén
   voorvoegsel `pl-` voor het hele deel; de pg-klassen van de ontwerpen verschillen per scherm. */
.pl-voortgang { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.pl-voortgang > .pl-eind { margin-left: auto; }
.pl-score { display: flex; align-items: baseline; gap: 10px; }
.pl-score b { font-size: 28px; line-height: 34px; font-weight: 600; }
.pl-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.pl-legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.pl-doelen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pl-vol { max-width: none; }
.pl-vol .jm-decision-q { margin: 0; max-width: none; }
.pl-doel { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; align-items: start; }
.pl-doel > .jm-card-title, .pl-doel > .jm-decision-q { margin: 0; }
.pl-doel-m { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pl-doel-h { margin: 0; overflow-wrap: anywhere; }
.pl-vol .pl-doel-h { max-width: 24ch; }
.pl-pj { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-right: 40px; }
.pl-voet { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.pl-voet > .sb-acts { margin-left: auto; }
.pl-mini { display: inline-flex; align-items: center; gap: 8px; }
.pl-disc-boven { bottom: auto; top: -84px; right: -64px; }
.pl-vg { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 28px; align-items: center; }
.pl-jou { align-items: stretch; padding: 32px 36px; }
.pl-jou-m { position: relative; z-index: 1; flex: 1 1 100%; display: flex; flex-direction: column; gap: 12px; max-width: calc(100% - 80px); }
.pl-jou .jm-decision-q { margin: 0; max-width: 34ch; }
.pl-lijst { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.pl-lr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: inherit; }
.pl-groep { display: flex; flex-direction: column; gap: 12px; }
.pl-werk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pl-kaart-h { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.pl-kaart-m { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pl-keus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.pl-form { margin: 0; }
.pl-breek { overflow-wrap: anywhere; }
.sj > .sb-seg { align-self: flex-start; } /* het segment Projecten / Mappen is zo breed als zijn keuzes */
@media (max-width: 900px) {
  .pl-vg, .pl-keus { grid-template-columns: minmax(0, 1fr); }
  .pl-werk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-jou { padding: 24px 20px; }
  .pl-jou-m { max-width: none; }
}
@media (max-width: 600px) {
  .pl-werk { grid-template-columns: minmax(0, 1fr); }
  .pl-doel { grid-template-columns: 36px minmax(0, 1fr); }
  .pl-voortgang > .pl-eind { margin-left: 0; }
}

/* toegevoegd in deel 2: Werk (Schetsboek 2/5, dispatch dsp_01M4Y3VVFZ5HPY67E3QA7AD2YY).
   Nu, Voor jou, Dispatches, Dispatch, Items, het zoekvenster, Vastleggen en de melding onderin.
   Eerst de bouwstenen die de cockpit nodig had en het ontwerp niet (een venster als <dialog>,
   het zijpaneel als vast paneel, de melding vast onderin), dan de layout met het voorvoegsel
   `wk-` (alleen layout: geen kleur, geen vorm; zoals `pg-` in de ontwerpen). */

/* De wortel van de pagina's van deel 2 (`.r3 .sj`, zoals elk sjabloon). */
.sj-werk { gap: var(--space-6); }
.sj-werk .sb-txt, .sj-werk .sb-row-t, .sj-werk .sb-banner-m, .sj-werk .jm-decision-q { overflow-wrap: anywhere; }

/* Venster als <dialog>: .sb-dlg is flex, dus een gesloten dialog moet expliciet weg; modaal in de
   top layer (vast, midden), met een scrim als backdrop. Op de telefoon schermvullend. */
dialog.sb-dlg { position: fixed; inset: 0; margin: auto; max-height: calc(100dvh - 32px); overflow: auto; color: var(--ink); }
dialog.sb-dlg:not([open]) { display: none; }
dialog.sb-dlg::backdrop { background: var(--sb-scrim); }
.sb-dlg-in input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--ink); outline: none; }
/* Het zoekveld heeft al een rand in inkt (Zoeken6: één rand); geen tweede focusrand eromheen. */
.sb-dlg-in:focus-within { outline: none; }
.sb-dlg-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: min(60vh, 480px); overflow-y: auto; }
.sb-dlg-lijst[hidden], .sb-dlg-grp[hidden] { display: none; }
.sb-dlg-opt { color: inherit; text-decoration: none; cursor: pointer; }
.sb-dlg-opt:hover { background: var(--paper-deep); }
.sb-dlg-opt[aria-selected="true"] { background: var(--zon); color: var(--on-zon); }
.sb-dlg-opt-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb-dlg-opt-m .sb-row-s { color: inherit; opacity: .8; }
/* De keuze in Vastleggen als echte radio (formulier en pijltjes blijven): het label is de knop. */
label.sb-dlg-k { position: relative; }
.sb-dlg-k-in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
label.sb-dlg-k:has(.sb-dlg-k-in:checked) { border-color: var(--ink); background: var(--zon); color: var(--on-zon); }
label.sb-dlg-k:has(.sb-dlg-k-in:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.sb-chip-in { margin: 0; accent-color: var(--ink); }
.sb-dlg-veld { width: 100%; min-height: 96px; resize: vertical; }
@media (max-width: 600px) {
  dialog.sb-dlg { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; border: 0; }
  .sb-dlg-lijst { max-height: none; }
}

/* Zijpaneel vast rechts (het bord): de scrim is een sluitlink, het paneel scrollt; op de telefoon
   schermvullend. */
.sb-scrim-vast { z-index: 30; }
.sb-peek-vast { position: fixed; top: 0; right: 0; bottom: 0; z-index: 31; overflow-y: auto; overflow-x: hidden; }
@media (max-width: 600px) { .sb-peek-vast { width: 100%; border-left: 0; } }

/* De melding onderin (toast), vast midden onder; ook die `studio.js` zelf maakt. */
.sb-toast-vast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; max-width: calc(100% - 32px); }

/* Een knop op zon: de focusrand in de tekstkleur van zon (zoals .jm-decision .jm-btn). */
.jm-decision .sb-btn:focus-visible, .sb-banner-jou .sb-btn:focus-visible, .sb-blk-zon .sb-btn:focus-visible { outline-color: var(--on-zon); }
/* Een stil knopje op zon heeft een rand in de tekstkleur. */
.jm-decision .sb-btn-q, .sb-banner-jou .sb-btn-q { color: var(--on-zon); }
/* Gesloten details als ingeklapte groep (Later, Klaar, Concept): de teller achter de kop. */
.sb-tech summary .sb-count { margin-left: 8px; }
/* Een ID-knop op petrol (Uitvoering): de on-petrol-variant, zonder nieuwe kleur. */
.sb-blk-petrol .sb-id { color: inherit; border-color: var(--on-petrol-25); }
.sb-blk-petrol .sb-id:hover { color: inherit; border-color: var(--on-petrol); }
.sb-blk-petrol .sb-id:focus-visible { outline-color: var(--on-petrol); }
/* Soort Slack-samenvatting: een petrol omlijnd vierkant, te onderscheiden van Informatie (vol). */
.sb-kind-samenvatting::before { background: none; border-radius: 3px; box-shadow: inset 0 0 0 3px var(--petrol); }

/* Layout (wk-): twee kolommen, stapels en rasters per paginatype. */
.wk-two { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.wk-two-zij { grid-template-columns: minmax(0, 1fr) 320px; }
.wk-two-breed { grid-template-columns: minmax(0, 1fr) 400px; }
.wk-two-half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wk-col { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.wk-col-s { gap: var(--space-4); }
.wk-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.wk-rel { position: relative; }
.wk-vol { max-width: none; }
.wk-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wk-rij-r { margin-left: auto; }
.wk-kv2 { grid-template-columns: minmax(64px, auto) minmax(0, 1fr); gap: 8px 14px; align-items: center; }
/* Nu: de twee getallen in de kop. */
.wk-tallen { position: relative; z-index: 1; flex: 0 1 340px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.wk-tallen .sb-stat { flex: 1 1 140px; text-decoration: none; color: inherit; }
.wk-hoek-onder > .sb-corner { top: auto; bottom: -28px; }
.wk-week .sb-step { gap: 6px; }
.wk-week .sb-step .bar { width: 10px; margin: 0 6px; }
.wk-vj { gap: 16px; padding-bottom: 72px; display: flex; flex-direction: column; }
.wk-vj > .sb-blk { padding: 8px; }
.wk-vj .sb-row { flex-wrap: wrap; }
.wk-vj .sb-row-m { flex: 1 1 200px; }
.wk-doel { align-items: flex-start; }
.wk-doel .sb-row-m { gap: 6px; }
/* Voor jou: soorten, groepen en kaarten. */
.wk-soorten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.wk-soort { gap: 8px; padding: 18px; }
.wk-groepen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; align-items: start; }
.wk-breed { grid-column: 1 / -1; }
.wk-grp { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wk-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.wk-gh { justify-content: flex-start; flex-wrap: wrap; align-items: center; }
.wk-gh .wk-rij-r { margin-left: auto; }
.wk-herk { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; max-width: 640px; }
.wk-herk .sb-blk { padding: 16px; gap: 6px; color: var(--ink); }
.wk-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.wk-nav .sb-acts { margin-left: auto; }
.wk-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.wk-form-rij { display: inline-flex; margin: 0; }
.wk-form .seg { flex-wrap: wrap; max-width: 100%; }
.wk-op-zon { margin-right: 84px; }
/* Dispatches: het bord schuift binnen zichzelf, de pagina niet. */
.wk-bord { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 4px; }
.wk-kol { gap: 12px; padding: 14px; min-width: 0; }
.wk-kolh { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.wk-kolh .sb-count { margin-left: auto; }
.wk-kolban { padding: 14px 70px 14px 16px; gap: 8px; flex-wrap: nowrap; }
.wk-kolban .sb-banner-m { flex: 1 1 auto; }
.wk-bord .jm-dc-title { overflow-wrap: anywhere; hyphens: auto; }
.wk-rx { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
.wk-lijst { padding: 12px; }
/* Onder het bord: Concept en Klaar als rijen over de volle breedte (Dispatches6). */
.wk-fold { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.wk-fold > * { flex: 1 1 320px; min-width: 0; }
/* De stappen in het zijpaneel: compact, elke stap een kolom (schijf boven, naam onder), zonder
   losse verbinders als het niet op één regel past. */
.sb-peek .sb-steps-s { flex-wrap: nowrap; align-items: flex-start; gap: 4px; }
.sb-peek .sb-steps-s .sb-step { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 4px; }
.sb-peek .sb-steps-s .sb-step .bar { display: none; }
.sb-peek .sb-steps-s .sb-step .n { font-size: 12px; text-align: center; overflow-wrap: anywhere; }
.wk-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Items: lijst links, detail rechts; op de telefoon met een keuze alleen het detail. */
.wk-split { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.wk-jou { align-items: stretch; padding: 28px 36px 30px; }
.wk-jou-m { position: relative; z-index: 1; flex: 1 1 100%; display: flex; flex-direction: column; gap: 14px; max-width: calc(100% - 70px); }
.wk-jou .jm-decision-q { margin: 0; }
.wk-terug { display: none; }
@media (max-width: 900px) {
  .wk-two, .wk-groepen, .wk-herk, .wk-fold, .wk-files, .wk-split { grid-template-columns: minmax(0, 1fr); }
  .wk-soorten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-tallen { flex-basis: 100%; }
  .wk-bord { grid-template-columns: repeat(5, minmax(240px, 82%)); }
  .wk-kv2 { grid-template-columns: minmax(64px, auto) minmax(0, 1fr); }
  .wk-kv2 > .v { grid-column: auto; }
  .wk-met-sel > .wk-split > .wk-lijstkol { display: none; }
  .sj-werk:not(.wk-met-sel) > .wk-split > .wk-detailkol { display: none; } /* zonder keuze alleen de lijst */
  .wk-terug { display: inline-flex; }
}
@media (max-width: 600px) {
  .wk-jou { padding: 24px 20px; }
  .wk-jou-m { max-width: none; }
  .wk-vj { padding-bottom: 96px; }
  .wk-op-zon { margin-right: 0; padding-bottom: 72px; }
  .wk-op-zon:has(+ .wk-herk) { padding-bottom: 0; } /* Eén voor één: de blokjes staan eronder */
  .sj-werk .sb-head-art { display: none; } /* de vormen in de kop kosten op de telefoon te veel hoogte */
  .wk-week { flex-wrap: nowrap; }
  .wk-week .sb-step { gap: 4px; }
  .wk-week .sb-step .c { width: 24px; height: 24px; font-size: 11px; }
  .wk-week .sb-step.nu .c { width: 30px; height: 30px; }
  .wk-week .sb-step .n { font-size: 12px; }
  .wk-week .sb-step .bar { width: 6px; margin: 0 3px; }
}

/* toegevoegd in deel 5: filterbalk (Schetsboek 5/5, dispatch dsp_01M4Y3WNYV5CG9QVE6QHW0KJGF).
   Filterbalk.md: zoeken, één segment, Filters en de actieve chips op één regel (`.sb-filters`).
   Het ontwerp toont geen uitklappaneel voor Filters; de cockpit heeft er een (`details`, werkt
   zonder script): op de laptop klapt het onder de balk uit, op de telefoon is het een blad van
   onderen met de scrim van het zijpaneel. Een filter als link is gekozen met `aria-current`
   (`aria-pressed` hoort bij een knop), met dezelfde vorm als `aria-pressed`. Geen nieuwe kleur. */
.lmd-fb { display: flex; flex-direction: column; gap: 10px; }
.lmd-form { display: contents; }
.sb-fchip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sb-fchip[aria-current="true"] .sb-count { background: var(--zon); border-color: var(--zon); color: var(--on-zon); }
.sb-fchip b { font-weight: 700; }
.lmd-actief { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lmd-fdet { position: relative; }
.lmd-fdet > summary { list-style: none; }
.lmd-fdet > summary::-webkit-details-marker { display: none; }
.lmd-fscrim { display: none; }
.lmd-fdet[open] > .lmd-fpanel { position: absolute; left: 0; top: calc(100% + 8px); z-index: 25; width: min(560px, calc(100vw - 32px)); }
.lmd-facet { display: flex; flex-direction: column; gap: 8px; }
.lmd-alleen-m { display: none; }
@media (max-width: 900px) {
  .sb-fchip, .sb-filters .sb-input-s { min-height: 44px; }
  .sb-filters .sb-input-s { flex-basis: 100%; }
  .lmd-fscrim { display: block; z-index: 34; }
  .lmd-fdet[open] > .lmd-fpanel { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 35; width: auto; max-height: 80vh; overflow-y: auto; border-radius: 28px 28px 0 0; }
  .lmd-alleen-m { display: flex; }
  .lmd-alleen-d { display: none; }
}

/* toegevoegd in deel 5: lijst met detail (`sjablonen.lijst_met_detail`). Letterlijk `pg-split`,
   `pg-list`, `pg-grp` en `pg-col` uit de <style> van Agents6, Tools6, Bronnen6, Standaard6 en
   HoeHetWerkt6; alleen layout. Telefoon (zoals de oude `.ld`): met een keuze (`has-sel`, `met-sel`)
   alleen het detail met "Terug naar de lijst", kop en filters weg; zonder keuze alleen de lijst. */
.lmd-split { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
.lmd-lijst { padding: 12px; gap: 6px; }
.lmd-grp { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 4px; }
.lmd-detail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lmd-terug { display: none; align-self: flex-start; }
.lmd-vol { display: flex; flex-direction: column; min-width: 0; }
/* Een blok zonder kaart (`blokken.sectie(kaart=False)`): alleen een stapel. */
.lmd-stapel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* Nalopen met echte vinkjes in een formulier (`blokken.check(naam=…)`): de `.sb-check` van
   Blokken.md, het vinkje zelf onzichtbaar erover; aangevinkt zoals `aria-checked="true"`. */
.lmd-check { position: relative; }
.lmd-check-in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lmd-check:has(.lmd-check-in:checked) .bx { background: var(--petrol); border-color: var(--petrol); color: var(--on-petrol); }
.lmd-check:not(:has(.lmd-check-in:checked)) .bx svg { visibility: hidden; }
.lmd-check:has(.lmd-check-in:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 900px) {
  .lmd-split { grid-template-columns: minmax(0, 1fr); }
  .lmd-split.has-sel > .lmd-lijst { display: none; }
  .lmd-split:not(.has-sel) > .lmd-detail { display: none; }
  .lmd-terug { display: inline-flex; }
  .sj-ld.met-sel > :not(.lmd-split) { display: none; }
}

/* toegevoegd in deel 5: menu op een subpagina. De regel van de ouder (een detail, de tab Skills,
   Weekscan onder Weekfocus) heeft `aria-current="true"` in plaats van "page" (de schermlezer hoort
   niet dat het de pagina zelf is); hij ziet er hetzelfde uit (Menu.md: donkere pil). */
.sb-nav a[aria-current="true"] { background: var(--ink); color: var(--paper); font-weight: 600; }
@media (max-width: 900px) {
  .tab[aria-current="true"] { color: var(--tekst); font-weight: 600; }
}

/* toegevoegd in deel 5: vormsets en de weekkaart (T3 kent per set een klasse; een nieuwe set komt
   hier, nooit op een pagina). sb-art-3: de kop van Weekfocus6, met de petrol weekkaart
   (`.pl-wknum`, letterlijk `pg-wknum`) tussen de vormen. sb-art-4: de achtergrond van Inloggen6
   (`pg-bg`). sb-art-5: de grote lege toestand van Fout6 (Niet gevonden). Kleur alleen via tokens. */
.sb-art-3 > i:nth-child(1) { right: -90px; bottom: -106px; width: 190px; height: 190px; border-radius: 50%; background: var(--tomaat); }
.sb-art-3 > i:nth-child(2) { right: 220px; bottom: -66px; width: 150px; height: 96px; border-radius: 24px; background: var(--zon); }
.sb-art-3 > i:nth-child(3) { right: 302px; top: -6px; width: 46px; height: 46px; border-radius: 50%; background: var(--zon); }
.sb-art-3 > i:nth-child(4) { right: 320px; top: 60px; width: 14px; height: 14px; border-radius: 50%; background: var(--petrol); }
.sb-art-3 > i:nth-child(5) { right: 340px; top: 60px; width: 14px; height: 14px; border-radius: 50%; background: var(--petrol); }
.pl-wknum { position: absolute; z-index: 1; right: 80px; top: -8px; width: 210px; height: 236px; justify-content: center; padding-left: 22px; }
.sb-art-4 > i:nth-child(1) { left: -120px; top: -140px; width: 420px; height: 420px; border-radius: 50%; background: var(--petrol); }
.sb-art-4 > i:nth-child(2) { left: 220px; top: 120px; width: 56px; height: 56px; border-radius: 50%; background: var(--zon); }
.sb-art-4 > i:nth-child(3) { right: -80px; bottom: -120px; width: 360px; height: 300px; border-radius: 64px; background: var(--zon); }
.sb-art-4 > i:nth-child(4) { right: 220px; bottom: 150px; width: 120px; height: 120px; border-radius: 50%; background: var(--tomaat); }
.sb-art-4 > i:nth-child(5) { right: 120px; top: 90px; width: 22px; height: 22px; border-radius: 50%; background: var(--petrol); }
.sb-art-4 > i:nth-child(6) { right: 160px; top: 90px; width: 22px; height: 22px; border-radius: 50%; background: var(--tomaat); }
.sb-art-4 > i:nth-child(7) { left: 140px; bottom: 90px; width: 160px; height: 90px; border-radius: 24px; background: var(--paper-deep); }
.sb-art-5 > i:nth-child(1) { right: 0; top: 0; width: 130px; height: 130px; background: var(--petrol); }
.sb-art-5 > i:nth-child(2) { right: 100px; top: 80px; width: 84px; height: 84px; background: var(--zon); }
.sb-art-5 > i:nth-child(3) { right: 24px; top: 118px; width: 38px; height: 38px; background: var(--tomaat); }
.sb-art-5 > i:nth-child(4) { right: 150px; top: 10px; width: 16px; height: 16px; background: var(--tomaat); }
/* Weekfocus6: Even niet als band (kop, teller en chips op één regel). */
.pl-band { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
@media (max-width: 900px) {
  .pl-wknum { display: none; }
}

/* toegevoegd in deel 5: keuzes in een formulier (`onderdelen.keuzes`, zonder script). De vorm van
   de ontwerpen (Mappen6: `.sb-seg`, `.sb-chips` met `.sb-fchip`, Venster.md: `.sb-dlg-k`), maar met
   een echte radio of checkbox: het label is de keuze, de invoer ligt er onzichtbaar over. Gekozen
   ziet eruit als `aria-pressed="true"` van dezelfde bouwsteen. Bij een segment toont alleen de
   uitleg van de gekozen optie (op volgorde). */
.lmd-kz-o { position: relative; }
.lmd-kz-in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lmd-kz-o:has(.lmd-kz-in:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.sb-seg > label { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; cursor: pointer; }
.sb-seg > label:has(.lmd-kz-in:checked), .sb-fchip:has(.lmd-kz-in:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
label.sb-dlg-k:has(.lmd-kz-in:checked) { border-color: var(--ink); background: var(--zon); color: var(--on-zon); }
.lmd-kz-t { font-weight: inherit; }
.lmd-kz .sb-seg { align-self: flex-start; }
.lmd-kz-uitleg > .lmd-kz-u { display: none; }
.lmd-kz:has(.sb-seg > :nth-child(1) .lmd-kz-in:checked) .lmd-kz-uitleg > :nth-child(1),
.lmd-kz:has(.sb-seg > :nth-child(2) .lmd-kz-in:checked) .lmd-kz-uitleg > :nth-child(2),
.lmd-kz:has(.sb-seg > :nth-child(3) .lmd-kz-in:checked) .lmd-kz-uitleg > :nth-child(3),
.lmd-kz:has(.sb-seg > :nth-child(4) .lmd-kz-in:checked) .lmd-kz-uitleg > :nth-child(4),
.lmd-kz:has(.sb-seg > :nth-child(5) .lmd-kz-in:checked) .lmd-kz-uitleg > :nth-child(5),
.lmd-kz:has(.sb-seg > :nth-child(6) .lmd-kz-in:checked) .lmd-kz-uitleg > :nth-child(6) { display: block; }
@media (max-width: 900px) {
  .sb-seg > label { min-height: 44px; }
}

/* toegevoegd in deel 5: de compacte kop van de Instellingen-pagina's (`sb.kop_compact`): een kleine
   vormset rechts, letterlijk `pg-art` en de vormen van Agents6, Tools6, Bronnen6, Standaard6 en
   HoeHetWerkt6 (sb-art-6). Op de telefoon weg, zoals daar. */
.in-art { flex: 0 1 240px; min-height: 120px; }
.sb-art-6 > i:nth-child(1) { right: -40px; top: -70px; width: 150px; height: 200px; border-radius: 28px; background: var(--petrol); }
.sb-art-6 > i:nth-child(2) { right: 130px; top: 10px; width: 84px; height: 84px; border-radius: 50%; background: var(--tomaat); }
.sb-art-6 > i:nth-child(3) { right: 70px; bottom: -50px; width: 110px; height: 80px; border-radius: 24px; background: var(--zon); }
@media (max-width: 900px) {
  .in-art { display: none; }
}

/* toegevoegd in deel 5: indeling Instellingen (Hoe het werkt). Letterlijk `pg-sec` en `pg-three`
   uit de <style> van HoeHetWerkt6; alleen layout. */
.in-sec { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; }
.in-groepen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 900px) {
  .in-groepen { grid-template-columns: minmax(0, 1fr); }
}

/* toegevoegd in deel 5: Inloggen en Niet gevonden. Letterlijk `pg-login`, `pg-bg`, `pg-center` en
   `pg-card` uit de <style> van Inloggen6 en `pg-big` uit Fout6; alleen layout en plaats. De vormen
   zelf zijn de sets sb-art-4 (achtergrond), sb-art-7 (de kaart) en sb-art-5 (de lege toestand). */
.in-login { position: relative; overflow: hidden; width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 16px; background: var(--paper); }
.in-bg { position: absolute; inset: 0; pointer-events: none; }
.in-bg > i { position: absolute; display: block; }
.in-center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: min(720px, 100%); }
.in-card { width: 100%; }
.in-card .sb-head-m { flex: 1 1 340px; }
.in-card .sb-head-art { flex: 1 1 200px; min-height: 220px; }
.sb-art-7 > i:nth-child(1) { right: -30px; top: -70px; width: 170px; height: 210px; border-radius: 28px; background: var(--petrol); }
.sb-art-7 > i:nth-child(2) { right: 90px; top: 60px; width: 110px; height: 110px; border-radius: 50%; background: var(--tomaat); }
.sb-art-7 > i:nth-child(3) { right: 20px; bottom: -30px; width: 130px; height: 90px; border-radius: 24px; background: var(--zon); }
.sb-art-7 > i:nth-child(4) { right: 40px; top: 40px; width: 14px; height: 14px; border-radius: 50%; background: var(--zon); }
.in-groot { min-height: 380px; justify-content: center; padding-right: 300px; }
@media (max-width: 900px) {
  .in-card .sb-head-art { display: none; }
  .in-groot { padding-right: 24px; min-height: 0; }
}

/* toegevoegd in deel 5: na de review. Alleen layout en plaats; kleur alleen via tokens.
   - Segment op de telefoon: één regel die horizontaal scrolt (zoals vóór deel 5), nooit een
     klodder over meerdere regels.
   - De chip "X · komt nog" is een link naar Hoe het werkt, zonder linkonderstreping (Agents6).
   - Wacht op jou op het bord: de compacte kolomkop van Dispatches6 (`pg-kolban .sb-banner-m`),
     ook als de kolom leeg is.
   - De schijf van de detailkop in de kleur van de stip van de rij (Standaard6: de laag,
     HoeHetWerkt6: de groep): `sb-dhead-dot` met de `sb-dot-<token>` van de rij.
   - Komt nog op Hoe het werkt: een ingeklapte groep is alleen zijn kopregel.
   - sb-art-8: de kop van Meldingen6 (zonschijf en tomaatblok). sb-art-9: de lege toestand van
     Kern onbereikbaar (Fout6: paper, tomaat, petrol). */
@media (max-width: 900px) {
  .sb-seg { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .sb-seg > * { flex: none; white-space: nowrap; }
}
a.sb-chip { text-decoration: none; color: inherit; }
a.sb-chip-later { color: var(--ink-muted); }
a.sb-chip-later:hover { color: var(--ink); border-color: var(--ink); }
.wk-kolban > .sb-banner-m { flex: 1 1 0; padding-right: 0; z-index: 1; }
.wk-kolban .sb-count { position: relative; z-index: 1; }
.sb-dhead-dot { --dhead: var(--dot); }
.in-groepen > details.sb-blk:not([open]) { gap: 0; padding-top: 14px; padding-bottom: 14px; }
.in-groepen > details.sb-blk > summary { cursor: pointer; }
.sb-art-8 > i:nth-child(1) { right: -40px; top: -60px; width: 200px; height: 240px; border-radius: 28px; background: var(--petrol); }
.sb-art-8 > i:nth-child(2) { right: 170px; top: 36px; width: 110px; height: 110px; border-radius: 50%; background: var(--zon); }
.sb-art-8 > i:nth-child(3) { right: 120px; bottom: -40px; width: 130px; height: 96px; border-radius: 24px; background: var(--tomaat); }
.sb-art-8 > i:nth-child(4) { right: 24px; top: 40px; width: 14px; height: 14px; border-radius: 50%; background: var(--zon); }
.sb-art-9 > i:nth-child(1) { right: 20px; top: 10px; width: 120px; height: 120px; background: var(--paper); }
.sb-art-9 > i:nth-child(2) { right: 110px; top: 90px; width: 60px; height: 60px; background: var(--tomaat); }
.sb-art-9 > i:nth-child(3) { right: 0; top: 120px; width: 30px; height: 30px; background: var(--petrol); }
/* Eén h1 per pagina: in een lijst met detail is de titel van de detailkop een h2 met de vorm van de h1. */
.sb-dhead-m > h2 { margin: 0; font-family: var(--font-display); font-size: 36px; line-height: 1.1; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 900px) {
  .sb-dhead-m > h2 { font-size: 28px; }
}
/* Inloggen6: de regel onder de kaart (`pg-foot`). */
.in-foot { position: relative; z-index: 1; margin-top: 16px; }
/* Een actieve filter in de balk (weghalen met ×): de vorm van een gekozen filterchip, zonder
   `aria-current` (het is een actie, geen huidige keuze). */
.sb-fchip.lmd-weg { background: var(--ink); border-color: var(--ink); color: var(--paper); text-decoration: none; }

/* ======================================================================================
   V71-C (BS1, dispatch 173): bouwstenen van ontwerp ronde 4 (bord Statustaal4) die het
   design system nog niet heeft. Tijdelijk hier, zoals TOEVOEGINGEN (V71 punt 4): ze gaan in de
   eerste B/C-ronde naar het design system "Jurre Machielsen" (voorstel:
   docs/ontwerp/schetsboek/voorstel-bs1.md). Alleen bestaande tokens; geen kleurwaarde.
   Wat al bestond, is hergebruikt: sb-chip (+ -ok, -fout), jm-dot, sb-row, sb-blk, sb-prog-<n>,
   sb-fchip (keuzes), sb-select, sb-btn, sb-av.
   ====================================================================================== */

/* V71-C, nog naar het design system: stipvorm — de statustaal heeft elf weergaven en een stip is
   nu alleen een kleur; ring, stippelrand, vierkant en open vierkant bestaan niet. Een vorm zet
   `--dot` (de kleur), `--dot-vlak` (transparant bij een ring) en `--dot-hoek` (vierkant); de stip
   van een chip (.jm-dot) en van een rij (.sb-row-lead) leest die, met dezelfde specificiteit als
   hun eigen regel (zonder vorm-klasse is het resultaat gelijk aan vroeger). De rand is een border (niet box-shadow), zodat de ring
   in een gekozen rij blijft staan. Loopt is half gevuld (een ring met de linkerhelft vol), zodat
   hij ook zonder puls en zonder woord van uitgevoerd (vol, ook groen) te onderscheiden is. */
.jm-dot, .sb-row-lead { background: var(--dot-vlak, var(--dot, var(--ink-muted))); border-radius: var(--dot-hoek, 50%); }
.sb-dot-st-nieuw { --dot: var(--tomaat-tekst); --dot-vlak: transparent; box-sizing: border-box; border: 2px solid var(--tomaat-tekst); }
.sb-dot-st-open { --dot: var(--ink-muted); --dot-vlak: transparent; box-sizing: border-box; border: 1.5px solid var(--ink-muted); }
.sb-dot-st-voorstel { --dot: var(--ink-muted); --dot-vlak: transparent; box-sizing: border-box; border: 1.5px dashed var(--ink-muted); }
.sb-dot-st-gepland { --dot: var(--t-ready); --dot-vlak: transparent; box-sizing: border-box; border: 1.5px solid var(--t-ready); }
.sb-dot-st-klaar-om-te-starten { --dot: var(--t-ready); }
.sb-dot-st-loopt { --dot: var(--t-loopt); --dot-vlak: linear-gradient(90deg, var(--t-loopt) 50%, transparent 50%); box-sizing: border-box; border: 1.5px solid var(--t-loopt); }
.sb-dot-st-wacht-op-jou { --dot: var(--tomaat-tekst); }
.sb-dot-st-geblokkeerd { --dot: var(--t-fout); --dot-hoek: 2px; }
.sb-dot-st-geparkeerd { --dot: var(--ink-muted); --dot-vlak: transparent; --dot-hoek: 2px; box-sizing: border-box; border: 1.5px solid var(--ink-muted); }
.sb-dot-st-uitgevoerd { --dot: var(--ok-ink); }
.sb-dot-st-gestopt { --dot: var(--ink-muted); }
/* De puls van "Loopt" (niet bij een epic, O4-34); prefers-reduced-motion zet hem uit (studio.css). */
@keyframes sb-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.sb-dot-puls { animation: sb-puls 2s ease-in-out infinite; }

/* V71-C, nog naar het design system: statuschip — sb-chip met de stip en één woord. Neutraal,
   ok en fout bestaan; nieuw: het accent als tekst op de neutrale chip (wacht op jou, nieuw; het
   bord wil een zacht accentvlak, dat token is er niet), gedempt (geparkeerd) en doorgestreept
   (gestopt, met een lichte stip; zonder woord, in een rij, blijft de stip ink-muted). */
.sb-stc { padding-left: 8px; }
.sb-stc .jm-dot { width: 9px; height: 9px; }
.sb-stc-acc { color: var(--tomaat-tekst); font-weight: 600; }
.sb-stc-gedempt { color: var(--ink-muted); }
.sb-stc-stop { color: var(--ink-muted); text-decoration: line-through; }
.sb-stc-stop .sb-dot-st-gestopt { --dot: var(--line); }
.sb-stc-d { font-weight: 400; color: var(--ink-muted); }
.sb-chip-ok .sb-stc-d, .sb-chip-fout .sb-stc-d { color: inherit; }

/* V71-C, nog naar het design system: soortteken — D, R, C, I, E en ∑: de soort van werk zie je aan
   het teken, nooit aan de kleur. Ander begrip dan sb-kind (de vorm van een item). C is in het bord
   een zacht infovlak; dat token is er niet, dus een rand en tekst in --t-ready. */
.sb-srt { flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 22px; height: 22px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11px; font-weight: 600; line-height: 1; border: 1px solid var(--line); background: var(--kaart); color: var(--ink-muted); }
.sb-srt-d { border-color: var(--ink); color: var(--ink); }
.sb-srt-r { border-style: dashed; border-color: var(--ink-muted); }
.sb-srt-c { border-color: var(--t-ready); color: var(--t-ready); }
.sb-srt-i { border-color: transparent; background: var(--paper-deep); }
.sb-srt-e { border-color: var(--ink); background: var(--ink); color: var(--paper); }

/* V71-C, nog naar het design system: voortgangsbalk van een epic — sb-prog met vijf segmenten
   naast elkaar (breedte: de bestaande sb-prog-<n>, stappen van 5%). Volgorde en kleur: uitgevoerd
   (ok-ink), wacht op jou (accent), geblokkeerd (fout), loopt of klaar om te starten (t-loopt,
   gedempt zodat hij van uitgevoerd te onderscheiden is), gepland of voorstel (line). */
.sb-prog-epic { display: flex; height: 8px; border-radius: 4px; }
.sb-prog-epic > span { flex: none; border-radius: 0; }
.sb-prog-epic > .sb-epb-u { background: var(--ok-ink); }
.sb-prog-epic > .sb-epb-j { background: var(--tomaat-tekst); }
.sb-prog-epic > .sb-epb-f { background: var(--t-fout); }
.sb-prog-epic > .sb-epb-l { background: var(--t-loopt); opacity: .55; }
.sb-prog-epic > .sb-epb-g { background: var(--line); }
/* Een lijntje van 1px tussen de segmenten, zodat twee buren met een verwante tint (geblokkeerd en
   wacht op jou) ook als twee vlakken lezen. De tekst onder de balk draagt elke telling. */
.sb-prog-epic > span + span { box-shadow: inset 1px 0 0 var(--kaart); }

/* V71-C, nog naar het design system: werkregel — een sb-row als <div> (de titel is de link; een
   formulier mag niet in een <a>) met soortteken, titel, statuschip en ⋯. De ⋯ is een <details>
   met een formulier (zonder script); open beslaat het formulier de hele breedte en blijft de ⋯
   rechtsboven staan. Op de telefoon staat de chip onder de titel (bord: .wr .stc). */
.sb-wr { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 32px; column-gap: var(--space-3); row-gap: var(--space-2); align-items: center; cursor: default; }
.sb-wr:hover { background: none; }
.sb-wr-t { color: inherit; text-decoration: none; }
.sb-wr-t:hover { text-decoration: underline; }
.sb-wr-meer { grid-column: 4; grid-row: 1; }
.sb-wr-meer > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--ink-muted); font-size: 18px; line-height: 1; cursor: pointer; }
.sb-wr-meer > summary::-webkit-details-marker { display: none; }
.sb-wr-meer > summary:hover, .sb-wr-meer[open] > summary { background: var(--paper-deep); color: var(--ink); }
.sb-wr-meer > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sb-wr-meer[open] { grid-column: 1 / -1; grid-row: 2; }
.sb-wr-meer[open] > summary { position: absolute; top: var(--space-3); right: var(--space-3); }
.sb-wr-form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--paper-deep); }
.sb-wr-form .sb-fchip { background: var(--kaart); }
@media (max-width: 600px) {
  .sb-wr { grid-template-columns: 22px minmax(0, 1fr) 40px; }
  .sb-wr-meer > summary { width: 40px; height: 40px; }
  .sb-wr > .sb-stc { grid-column: 2; grid-row: 2; justify-self: start; }
  .sb-wr-meer { grid-column: 3; }
  .sb-wr-meer[open] { grid-row: 3; }
}

/* V71-C, nog naar het design system: epic-kaart — sb-blk met soortteken E, naam, statuschip, de
   doelregel (icoon en "Doel" in het accent), balk, signalen en het werk in een <details>. Nieuw is
   alleen de doelregel en de kopregel met teken en naam. */
.sb-epc-n { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.sb-epc-n a { color: inherit; text-decoration: none; }
.sb-epc-n a:hover { text-decoration: underline; }
.sb-epc-doel { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sb-epc-doel svg { flex: none; margin-top: 3px; color: var(--tomaat-tekst); }
.sb-epc-doel b { font-weight: 600; color: var(--tomaat-tekst); margin-right: 2px; }
.sb-epc-werk > summary { cursor: pointer; width: max-content; }
.sb-epc-werk > .sb-rows { margin-top: var(--space-2); }