/* Scope Compass — stylesheet voor de werkbank van Delivery (ontwerp "Delivery werkbank v3",
   bordkaart DW3): de Backlog, straks het sprintboard en het overzicht van stories en epics.
   Laadt ná src/styles.css, zodat de tokens daaruit gelden. Alles hier hangt onder .wb of een
   wb-klasse; de oude bordregels (del-*) blijven tot DW3c in styles.css staan.

   De kleuren van een epic komen uit dezelfde zachte tokens als de tags (violet, blue, green,
   amber, red), zodat een epic op de rail, in de lijst en als tag op een kaart dezelfde kleur
   draagt — en dat in donkere modus ook blijft doen. */

/* ---- kleuren van een epic ------------------------------------------------------------- */
.wb-kleur-violet { --wb-band: var(--violet-soft); --wb-dot: var(--violet-text); }
.wb-kleur-blue   { --wb-band: var(--blue-soft);   --wb-dot: var(--blue-text); }
.wb-kleur-green  { --wb-band: var(--green-soft);  --wb-dot: var(--green-strong); }
.wb-kleur-amber  { --wb-band: var(--amber-soft);  --wb-dot: var(--amber-strong); }
.wb-kleur-red    { --wb-band: var(--red-soft);    --wb-dot: var(--red-strong); }

/* ---- kop -------------------------------------------------------------------------------- */
.wb-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.wb-h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.wb-sub { color: var(--text-3); font-size: 13.5px; margin-top: 4px; max-width: 72ch; }
.wb-kop-knoppen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-flex { flex: 1; }

/* ---- de sprintrail ---------------------------------------------------------------------- */
/* Hij schuift horizontaal zodra er meer sprints zijn dan er passen; de kaarten houden hun maat,
   want een samengedrukte vulbalk zegt niets meer. */
.wb-rail { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; margin-bottom: 14px; }
.wb-rail-kaart {
  flex: 1 1 200px; min-width: 196px; display: flex; flex-direction: column; gap: 8px;
  padding: 12px 13px; border-radius: var(--r-lg); border: 1px solid var(--border);
  background: var(--surface); font: inherit; text-align: left; color: inherit;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
}
.wb-rail-kaart.is-actief { border-color: color-mix(in srgb, var(--pri) 35%, var(--border)); }
.wb-rail-archief { flex: 0 0 172px; min-width: 172px; border-style: dashed; border-color: var(--border-3); background: var(--surface-2); cursor: pointer; }
.wb-rail-archief:hover { border-color: var(--pri); }
.wb-rail-archief.is-aan { border-color: var(--pri); background: var(--pri-soft); }
.wb-rail-archief:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.wb-rail-kop { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.wb-rail-kop .ic { color: var(--text-2); }
.wb-rail-naam { font-size: 14px; font-weight: 600; color: var(--text); }
.wb-rail-sub { font-size: 12px; color: var(--text-3); }
.wb-rail-voet { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-2); margin-top: auto; }
/* "25 van 34 pt" en "dag 4 van 10" zijn elk één gegeven; afbreken midden in zo'n regel leest als twee. */
.wb-rail-voet > span { white-space: nowrap; }

/* ---- werkbalk ---------------------------------------------------------------------------- */
.wb-toolbar .toolbar-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* ---- lijst en paneel naast elkaar --------------------------------------------------------- */
/* Het paneel staat alleen NAAST de lijst als daar ruimte voor is (vanaf 1280px). Smaller viel het
   onder de hele lijst, waar niemand het vindt; daar opent een story zijn eigen pagina
   (DZ.werkbank.paneelNaast, dezelfde grens). */
.wb-werk { display: flex; gap: 16px; align-items: flex-start; }
.wb-lijst { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.wb-aside { flex: 0 0 360px; min-width: 0; display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--topbar-h) + 12px); }
@media (min-width: 1600px) { .wb-aside { flex-basis: 420px; } }
@media (max-width: 1279px) { .wb-aside { display: none; } }

/* Het blad: het paneel over de lijst als er naast de lijst geen ruimte is. Boven de mobiele
   onderbalk (50), onder de meldingen (60), zodat een melding na een wijziging zichtbaar blijft. */
.wb-blad, .wb-blad-achter { display: none; }
@media (max-width: 1279px) {
  .wb-blad-achter { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(16, 24, 40, .32); }
  .wb-blad {
    display: flex; flex-direction: column; gap: 10px; position: fixed; top: 0; right: 0; bottom: 0; z-index: 56;
    width: min(480px, 100%); overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg); box-shadow: var(--sh-2); padding: 12px 12px calc(16px + var(--safe-b, 0px));
  }
  .wb-blad .wb-aside { display: flex; position: static; flex: none; }
  .wb-blad-kop { display: flex; }
}

/* ---- een groep (epic of sprint) ------------------------------------------------------- */
.wb-groep { overflow: hidden; border-color: color-mix(in srgb, var(--wb-dot, var(--text-3)) 22%, var(--border)); transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.wb-groep-kop {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; padding: 11px 14px;
  background: var(--wb-band, var(--surface-2));
  border-bottom: 1px solid color-mix(in srgb, var(--wb-dot, var(--text-3)) 18%, var(--border));
}
.wb-groep.is-actief { --wb-band: var(--pri-soft); --wb-dot: var(--pri); }
.wb-groep.is-grijs { --wb-band: var(--sunken); --wb-dot: var(--text-3); }
.wb-groep.is-grijs .wb-rij { opacity: .75; }
.wb-groep-tekst { flex: 1 1 240px; min-width: 0; }
.wb-groep-regel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-dot { width: 12px; height: 12px; border-radius: 4px; background: var(--wb-dot, var(--text-3)); flex: none; }
.wb-soort { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--wb-dot, var(--text-3)); }
.wb-groep-naam { font-size: 14.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.wb-groep-doel { font-size: 12.5px; color: var(--text-2); margin-top: 4px; line-height: 1.45; }
.wb-groep-bar { margin-top: 8px; max-width: 320px; }
.wb-groep-rechts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-groep-meta { font-size: 12px; color: var(--text-2); }
.wb-klap { padding: 2px 5px; }
.wb-vink { width: auto; padding: 0; background: transparent; margin-top: 3px; }
.wb-vink:hover { background: transparent; }
.wb-vink:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: 5px; }
.wb-vink-plek { width: 18px; flex: none; }
.wb-leeg { padding: 16px; font-size: 12.5px; color: var(--text-3); text-align: center; }
.wb-meer { padding: 8px 14px 12px; }

/* Slepen: het doel licht op, wat je sleept wordt half doorzichtig. */
.wb-drop-over { border-color: var(--pri) !important; box-shadow: 0 0 0 3px var(--ring) !important; }
.wb-rail-kaart.wb-drop-over { background: var(--pri-soft); }
.wb-sleept { opacity: .45; }

/* ---- de tabel in een groep ------------------------------------------------------------- */
/* Smallere celmarges dan een gewone tabel: zeven kolommen naast een paneel van 360px passen
   anders niet in de lijst, en dan schuift de kolom Wie stil buiten beeld. */
.wb-tabel { table-layout: auto; }
.wb-tabel th, .wb-tabel td { padding-left: 8px; padding-right: 8px; }
.wb-tabel th:first-child, .wb-tabel td:first-child { padding-left: 12px; }
.wb-tabel th:last-child, .wb-tabel td:last-child { padding-right: 12px; }
/* Alleen de smalle kolommen hebben een vaste maat; de rest verdeelt de browser, zodat de tabel
   ook in een smallere lijst past (tags breken dan af in plaats van de tabel te laten schuiven). */
.wb-th-greep { width: 58px; }
.wb-th-pt { width: 34px; }
.wb-th-wie { width: 44px; }
.wb-greep-cel { white-space: nowrap; }
.wb-greep-cel .wb-vink { display: inline-flex; margin: 0 0 0 4px; vertical-align: middle; }
.wb-greep { display: inline-flex; color: var(--text-faint); width: 16px; vertical-align: middle; }
.wb-rij[draggable="true"] .wb-greep { cursor: grab; }
.wb-titel-cel { cursor: pointer; min-width: 180px; }
.wb-rij-titel { font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.wb-rij-meta { display: flex; gap: 7px; align-items: center; margin-top: 3px; flex-wrap: wrap; font-size: 11.5px; }
/* Het proces staat op de desktop als tooltip op de titel; op een telefoon (kaart) als regel. */
.wb-rij-proces { display: none; overflow-wrap: anywhere; }
.dz-table tbody tr.wb-rij.is-active > td { background: var(--pri-soft); }
.dz-table tbody tr.wb-rij.is-gekozen > td { background: color-mix(in srgb, var(--pri-soft) 55%, var(--surface)); }

/* ---- formulieren bovenaan de lijst ----------------------------------------------------- */
.wb-form-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.wb-veld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wb-veld > .label { margin: 0; }
.wb-veld .filter-select { width: 100%; max-width: 100%; }
.wb-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.wb-kleuren { display: flex; gap: 8px; flex-wrap: wrap; }
.wb-kleur {
  width: 30px; height: 30px; border-radius: 8px; padding: 0; cursor: pointer;
  background: var(--wb-band); border: 2px solid color-mix(in srgb, var(--wb-dot) 25%, var(--wb-band));
  display: inline-flex; align-items: center; justify-content: center;
}
.wb-kleur > span { width: 10px; height: 10px; border-radius: 3px; background: var(--wb-dot); display: block; }
.wb-kleur.is-aan { border-color: var(--wb-dot); box-shadow: 0 0 0 3px var(--ring); }
.wb-kleur:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.wb-hint {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px;
  border: 1px dashed var(--border-3); border-radius: var(--r-lg); background: var(--surface-2);
  font-size: 13px; color: var(--text-2);
}
.wb-hint > div { flex: 1 1 260px; min-width: 0; }
.wb-hint > .ic { color: var(--text-3); }

/* ---- de selectiebalk -------------------------------------------------------------------- */
/* Blijft onderaan in beeld: bij een lange backlog scrol je anders weg van de knop die je nodig hebt. */
.wb-selbalk {
  position: sticky; bottom: 16px; margin-top: 14px; z-index: 4;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--pri); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); padding: 11px 14px;
}
.wb-selbalk-n { font-size: 13px; font-weight: 600; }
.wb-selbalk-hint { font-size: 12px; color: var(--text-3); }

/* ---- het paneel rechts ------------------------------------------------------------------ */
.wb-paneel-kop { flex-wrap: wrap; gap: 8px; height: auto; min-height: 46px; padding-top: 8px; padding-bottom: 8px; }
.wb-paneel-kop .panel-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.wb-paneel-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.wb-titel { font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.wb-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wb-keuze { width: 100%; }
/* Bouwvolgorde (0374): positie in de sprint met Omhoog en Omlaag. */
.wb-volgorde { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.wb-volgorde-pos { font-weight: 600; color: var(--text); }
.wb-volgorde-knoppen { display: flex; gap: 6px; margin-left: auto; }
.wb-melding { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); background: var(--amber-soft); border-radius: var(--r); padding: 8px 10px; }
/* TK3: vragen van de bouwer op een story (het antwoordblok, ook in Mijn acties). */
.sv-sectie { display: flex; flex-direction: column; gap: 8px; }
.sv-blok { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.sv-blok.is-beantwoord { border-left-color: var(--border-3); }
.sv-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sv-kop .label { margin: 0; }
.sv-door { margin-left: auto; font-size: 12px; }
.sv-vraag { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sv-opties { display: flex; flex-direction: column; gap: 6px; }
.sv-optie { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 12px; text-align: left; font: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 8px; cursor: pointer; }
.sv-optie:disabled { cursor: default; opacity: .85; }
.sv-optie.is-gekozen { border-color: var(--amber-strong); box-shadow: 0 0 0 1px var(--amber-strong) inset; background: var(--amber-soft); }
.sv-optie-tekst { flex: 1; overflow-wrap: anywhere; }
.sv-tekst { display: flex; flex-direction: column; gap: 4px; }
.sv-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.sv-acts .btn { min-height: 44px; }
.sv-antwoord p, .sv-wie { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.vera-advies-regel { font-size: 12px; color: var(--text-2); }
/* TK4a: wat er na een antwoord gebeurt (vóór en na het versturen), de vergrendeling en het impactblok. */
.sv-melding { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; background: var(--blue-soft); border-radius: 8px; padding: 8px 10px; }
.sv-melding.is-wacht { background: var(--amber-soft); }
.sv-melding > .ic { margin-top: 2px; color: var(--text-2); }
.sv-melding p { margin: 4px 0 0; }
.wb-vast { display: flex; gap: 8px; align-items: flex-start; background: var(--slate-soft); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.wb-vast > .ic { margin-top: 2px; color: var(--text-2); }
.wb-vast strong { display: block; }
/* TK4c: de beoordeling van de story (Goedkeuren voor de key user, "wacht op vrijgave"). */
.wb-beoordeling { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.wb-beoordeling .label { margin: 0; }
.wb-vast .muted { display: block; font-size: 12.5px; margin-top: 2px; }
.wb-paneel .textarea:disabled { background: var(--surface-2); color: var(--text-2); resize: none; }
/* TK4b: Vera loopt het antwoord na (onder het beantwoorde antwoordblok) en Toch vrijgeven. */
.vn-blok { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border-3); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.vn-blok.is-bezig { border-left-color: var(--blue-text); }
.vn-blok.is-voorstel { border-left-color: var(--amber-strong); }
.vn-blok.is-klaar { border-left-color: var(--green); }
.vn-blok.is-fout { border-left-color: var(--red); }
.vn-blok p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.vn-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vn-kop .label { margin: 0; }
.vn-groep { display: flex; flex-direction: column; gap: 2px; }
.vn-groep ul { margin: 2px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.vn-groep li { overflow-wrap: anywhere; }
.vn-via, .vn-reden { display: block; font-size: 12px; }
.vn-toch { align-items: flex-start; }
.vn-toch > div { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
/* 19-10: Vera stelt een antwoord voor (boven het tekstvak van een open vraag). Een voorstel, geen antwoord:
   blauwe rand en het label "voorstel"; op de telefoon de knoppen over de volle breedte. */
.vc-blok { background: var(--surface); border: 1px dashed var(--border-2); border-left: 3px solid var(--blue-text); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.vc-blok.is-leeg { border: 0; padding: 0; background: none; }
.vc-blok.is-onvoldoende { border-left-color: var(--amber-strong); }
.vc-blok.is-fout { border-left-color: var(--red); }
.vc-blok p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.vc-blok .vn-groep li .muted { font-size: 12.5px; }
.vc-optie .label { display: inline; margin: 0 4px 0 0; }
.vc-antwoord { background: var(--blue-soft); border-radius: 6px; padding: 6px 8px; }
.vc-uitleg, .vc-stand { font-size: 12.5px; }
.vc-vraag { min-height: 44px; align-self: flex-start; }
@media (max-width: 640px) { .vc-vraag, .vc-acts .btn { width: 100%; justify-content: center; } }

.wb-impact { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 9px; }
.wb-impact-tel { font-size: 12.5px; }
.wb-impact-groep { display: flex; flex-direction: column; gap: 5px; }
.wb-impact-groep .label { margin: 0; }
.wb-impact-item { display: block; font-size: 13px; overflow-wrap: anywhere; color: inherit; }
.wb-impact-item p { margin: 2px 0 0; font-size: 12.5px; white-space: pre-wrap; }
a.wb-impact-stap { text-decoration: none; padding: 4px 0; min-height: 32px; }
a.wb-impact-stap:hover { text-decoration: underline; }
@media (max-width: 640px) { .wb-impact-tel { display: block; } .wb-impact .wb-poort-kop { flex-wrap: wrap; min-height: 44px; } a.wb-impact-stap { min-height: 44px; } }
/* TK5: het resultaat van de bouwer, onder de vragen (groene rand: er is gebouwd). */
.sr-blok { border-left-color: var(--green); }
.sr-tekst { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sr-objecten { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.sr-obj, .sr-link { overflow-wrap: anywhere; }
.sr-blok .sv-acts { align-items: center; }
/* De begeleide test (0378): per scenario geslaagd of mislukt; op een telefoon één scenario per scherm. */
.bt-blok { border-left-color: var(--pri); }
.bt-blok:has(.bt-lijst) { border-left-color: var(--red); }
.bt-uitleg { margin: 0; }
.bt-knop { min-height: 44px; }
.bt-scenario { border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.bt-scenario.is-geslaagd .bt-nr { background: var(--green-soft); color: var(--green-strong); }
.bt-scenario.is-mislukt .bt-nr { background: var(--red-soft); color: var(--red-strong); }
.bt-sc-kop { display: flex; gap: 10px; align-items: flex-start; }
.bt-nr { flex: 0 0 auto; min-width: 26px; height: 26px; border-radius: 13px; background: var(--slate-soft); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; }
.bt-tekst { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bt-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.bt-oordeel { min-height: 44px; flex: 1 1 140px; justify-content: center; }
.bt-oordeel.bt-groen.is-aan { background: var(--green-soft); color: var(--green-strong); border-color: var(--green); }
.bt-oordeel.bt-rood.is-aan { background: var(--red-soft); color: var(--red-strong); border-color: var(--red); }
.bt-notitie { display: flex; flex-direction: column; gap: 4px; }
.bt-notitie .textarea { font-size: 16px; }
.bt-notitie-acts, .bt-opgeslagen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bt-voet { border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.bt-voet-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.bt-hint { flex-basis: 100%; }
.bt-voortgang { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.bt-balk { display: block; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.bt-balk > span { display: block; height: 100%; background: var(--pri); }
.bt-nav { display: flex; gap: 8px; }
.bt-nav .btn { flex: 1 1 0; justify-content: center; }
.bt-lijst { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.bt-bev-tekst { overflow-wrap: anywhere; }
.bt-bev-notitie { margin-top: 2px; padding-left: 8px; border-left: 2px solid var(--red); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .bt-vast { position: sticky; bottom: 0; z-index: 2; background: var(--surface-2); padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .bt-voet-knoppen, .bt-voet-knoppen .btn { width: 100%; justify-content: center; }
}
.wb-poort { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 7px; }
.wb-poort-kop { display: flex; align-items: center; gap: 8px; background: transparent; border: none; padding: 0; cursor: pointer; width: 100%; text-align: left; font: inherit; color: inherit; }
.wb-poort-kop .label { margin: 0; }
.wb-poort-kop .ic { color: var(--text-3); }
.wb-poort-kop:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: 6px; }
.wb-poort-regel { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.wb-context { font-size: 13px; line-height: 1.55; }
.wb-omschrijving { font-size: 12.5px; color: var(--text-2); line-height: 1.5; display: flex; flex-direction: column; gap: 4px; }
.wb-omschrijving .label { margin: 0; }
.wb-crit { display: flex; flex-direction: column; gap: 8px; }
.wb-crit-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-crit-kop .label { margin: 0; }
.wb-ac { border: 1px solid var(--border-2); border-radius: 10px; padding: 10px 11px; display: flex; flex-direction: column; gap: 7px; }
.wb-ac-kop { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.wb-ac-kop .btn { padding: 3px 6px; }
.wb-ac-nr { font-size: 12px; font-weight: 600; color: var(--pri-text); background: var(--pri-soft); border-radius: 6px; padding: 2px 7px; }
.wb-gwt { display: flex; gap: 8px; align-items: flex-start; }
.wb-gwt-l { font-size: 12px; font-weight: 600; width: 40px; flex: none; padding-top: 7px; }
.wb-gwt-l.is-given { color: var(--violet-text); }
.wb-gwt-l.is-when { color: var(--blue-text); }
.wb-gwt-l.is-then { color: var(--green-strong); }
.wb-gwt-in { font-size: 12.5px; min-height: 34px; }

/* ---- het sprintboard (DW3c) -------------------------------------------------------------- */
.wb-samen { display: flex; flex-wrap: wrap; gap: 22px; padding: 14px 16px; margin-bottom: 16px; }
.wb-samen-links { flex: 2 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.wb-samen-rechts { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 6px; border-left: 1px solid var(--sunken); padding-left: 20px; }
.wb-samen-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-samen-kop .label { margin: 0; }
.wb-samen-naam { font-size: 14px; font-weight: 600; }
.wb-samen-periode { font-size: 12.5px; color: var(--text-3); }
.wb-samen-doel { font-size: 13px; line-height: 1.45; }
/* De balk: punten per status, en een streep op de plek waar je nu zou moeten staan. */
.wb-stroom { position: relative; margin-top: 6px; }
.wb-stroom-balk { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--sunken); }
.wb-stroom-deel { display: block; height: 100%; }
.wb-stroom-streep { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; }
.wb-legenda-rij { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.wb-legenda { display: inline-flex; align-items: center; gap: 6px; }
.wb-legenda-dot { width: 9px; height: 9px; border-radius: 3px; display: block; }
.wb-tempo { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.wb-aandacht { display: flex; align-items: flex-start; gap: 9px; background: transparent; border: none; padding: 4px 0; cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit; }
.wb-aandacht:hover .wb-aandacht-code { color: var(--pri-text); }
.wb-aandacht:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: 6px; }
.wb-aandacht-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; color: var(--text-2); line-height: 1.4; }
.wb-aandacht-code { font-size: 12.5px; color: var(--text); font-weight: 500; }
.wb-aandacht-meer, .wb-leeg-tekst { font-size: 12.5px; color: var(--text-3); }

.wb-bord-kop { flex-wrap: wrap; gap: 8px; height: auto; min-height: 46px; padding-top: 8px; padding-bottom: 8px; }
.wb-bord-kop .panel-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-bord-hint { font-size: 12.5px; color: var(--text-3); }
.wb-bord-scroll { padding: 12px; overflow-x: auto; }
/* Vier kolommen van minstens 158px passen naast het paneel op 1440 (de lijst is daar ~790px).
   Met 190px schoof de kolom Afgerond stil buiten beeld: het bord scrolt binnen zijn eigen vak, en
   dat ziet de afkapcontrole van het harnas niet. */
.wb-bord-binnen { min-width: 690px; display: flex; flex-direction: column; gap: 14px; }
.wb-raster { display: grid; grid-template-columns: repeat(4, minmax(158px, 1fr)); gap: 10px; align-items: start; }
/* 0378: vijf kolommen als de sprint een story op Herstel nodig heeft. */
.wb-bord-binnen.wb-vijf { min-width: 860px; }
.wb-raster.wb-raster-5 { grid-template-columns: repeat(5, minmax(158px, 1fr)); }
.wb-cel-herstel .wb-cel-kop { color: var(--red-strong); }
.wb-kolomkop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-kolomnaam { font-size: 13px; font-weight: 600; }
.wb-kolompt { font-size: 11.5px; color: var(--text-3); margin-left: auto; }
.wb-baan { display: flex; flex-direction: column; gap: 8px; }
.wb-baan-kop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; background: var(--wb-band, var(--surface-2)); border-radius: 8px; padding: 7px 10px; }
.wb-baan-naam { font-size: 13px; font-weight: 600; }
.wb-baan-meta { font-size: 12px; color: var(--text-2); }
.wb-cel {
  min-height: 80px; display: flex; flex-direction: column; gap: 8px; padding: 8px;
  border: 1px solid transparent; border-radius: var(--r-lg); background: var(--surface-2);
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.wb-cel.wb-drop-over { background: var(--pri-soft); }
.wb-cel-kop { display: none; }   /* op een telefoon, waar de kolommen onder elkaar staan */
.wb-cel-leeg { font-size: 12.5px; color: var(--text-3); padding: 8px 4px; }
.wb-kaart {
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; padding: 10px 11px;
  cursor: pointer; display: flex; flex-direction: column; gap: 7px; box-shadow: var(--sh);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.wb-kaart[draggable="true"] { cursor: grab; }
.wb-kaart:hover { border-color: var(--border-3); }
.wb-kaart.is-active { border-color: var(--pri); box-shadow: 0 0 0 3px var(--ring); }
.wb-kaart.is-signaal { border-color: color-mix(in srgb, var(--red-strong) 40%, var(--border-2)); }
.wb-kaart-kop { display: flex; align-items: center; gap: 6px; }
.wb-kaart-pt { margin-left: auto; }
.wb-kaart-nr { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb-kaart-titel { font-size: 12.5px; font-weight: 550; line-height: 1.35; overflow-wrap: anywhere; }
.wb-kaart-tags, .wb-kaart-voet { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wb-volgende { margin-top: 0; }
.wb-volgende-voet { padding: 11px 16px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-3); }

/* ---- Stories en epics (DW3d) ------------------------------------------------------------- */
/* Het epicpaneel staat altijd naast de tabel zolang dat past; het is geen paneel van één story
   maar een eigen werkvlak, dus het blijft zichtbaar onder 1280px en schuift pas op een smal scherm
   onder de tabel. */
.wb-ov-werk { flex-wrap: wrap; }
.wb-ov-werk > .wb-lijst { flex: 1 1 560px; }
/* Vast op 340px: breder liet de tabel van acht kolommen er niet meer naast passen (op 1440 schoof
   Gereed stil buiten beeld; de tabel scrolt in zijn eigen vak en dat ziet het harnas niet). */
.wb-ep-paneel { flex: 0 0 340px; min-width: 0; position: sticky; top: calc(var(--topbar-h) + 12px); }
.wb-ov-tabel th, .wb-ov-tabel td { padding-left: 6px; padding-right: 6px; }
.wb-ov-tabel .tag { white-space: normal; }
.wb-ov-gereed { white-space: nowrap; }
.wb-ov-ac { display: block; font-size: 11.5px; margin-top: 3px; }
.wb-toolbar .search { flex: 1 1 260px; min-width: 200px; }
/* Past het paneel niet meer naast de tabel, dan staat het eronder over de volle breedte. Sinds de
   tabel vaste kolommen heeft (DZ.tabelUI, minstens 702px) is dat onder 1360: op 1280 bleef er naast
   het paneel 635px over en vielen Pt en Wie uit beeld. */
@media (max-width: 1359px) { .wb-ep-paneel { flex: 1 1 100%; position: static; } }
.wb-ov-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 30px; }
.wb-ov-titelkop { font-size: 15px; font-weight: 600; }
.wb-ov-resultaat { font-size: 13px; color: var(--text-2); }
.wb-chip { display: inline-flex; align-items: center; gap: 4px; }
.wb-chip-weg { border: 0; background: transparent; padding: 0 2px; color: inherit; cursor: pointer; display: inline-flex; }
.wb-chip-weg:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); border-radius: 4px; }
.wb-ov-titel { display: flex; gap: 6px; align-items: flex-start; min-width: 0; }
.wb-ov-titel .wb-greep { padding-top: 2px; flex: none; }
.dz-table tbody tr.wb-rij.is-archief > td { opacity: .7; }
.wb-ov-leeg { padding: 28px 16px; }

.wb-ep-lijst { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.wb-ep-zoek { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wb-ep-zoek .search { flex: 1 1 160px; min-width: 0; }
.wb-ep-telrij { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); flex-wrap: wrap; }
.wb-ep-telrij .wb-vink { margin: 0; }
.wb-ep-form { border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.wb-ep-form-titel { font-size: 13px; font-weight: 600; }
.wb-ep-selbalk { border: 1px solid var(--pri); border-radius: 10px; padding: 9px 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--pri-soft); }
.wb-ep-sel-n { font-size: 12.5px; font-weight: 600; flex: 1 1 auto; }
.wb-ep-bevestig { border: 1px solid color-mix(in srgb, var(--red-strong) 30%, var(--red-soft)); background: var(--red-soft); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--red-strong); line-height: 1.45; }
.wb-voorstellen { display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--sunken); }
.wb-voorstel { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.wb-voorstel-tekst { display: flex; flex-direction: column; gap: 2px; color: var(--text-2); }

.wb-ep { border: 1px solid color-mix(in srgb, var(--wb-dot, var(--text-3)) 22%, var(--border)); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.wb-ep.is-gekozen { border-color: var(--wb-dot, var(--pri)); box-shadow: 0 0 0 3px var(--ring); }
.wb-ep.is-archief { opacity: .7; }
.wb-ep-kop { background: var(--wb-band, var(--surface-2)); padding: 9px 10px 9px 12px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid color-mix(in srgb, var(--wb-dot, var(--text-3)) 18%, var(--border)); }
.wb-ep-kop .wb-vink { margin: 0; flex: none; }
.wb-ep-kop .btn { padding: 5px 6px; }
.wb-ep-naamvak { flex: 1; min-width: 0; }
.wb-ep-naam { font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.is-bewerkbaar { cursor: text; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; }
.is-bewerkbaar:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.wb-ep-naam-in { font-size: 14px; font-weight: 600; padding: 5px 8px; width: 100%; }
.wb-ep-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 9px; }
.wb-ep-doel, .wb-ep-toel { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.wb-ep-doel.is-bewerkbaar:hover, .wb-ep-toel.is-bewerkbaar:hover { background: var(--surface-2); }
.wb-ep-in { font-size: 12.5px; }
.wb-ep-kleurrij { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-ep-kleurrij .label { margin: 0; }
.wb-ep-kleurrij .wb-kleur { width: 24px; height: 24px; border-radius: 7px; }
.wb-ep-balk { height: 8px; border-radius: 4px; }
.wb-ep-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; font-size: 12px; color: var(--text-2); }
.wb-ep-sprints { display: flex; gap: 6px; flex-wrap: wrap; }
.wb-ep-klap { align-self: flex-start; padding-left: 4px; }
.wb-ep-meer { display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--sunken); padding-top: 10px; }
.wb-ep-waarde { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }

/* ---- telefoon --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .wb-h1 { font-size: 22px; }
  .wb-sub { font-size: 14px; }
  .wb-kop-knoppen { width: 100%; }
  .wb-kop-knoppen .btn { flex: 1 1 auto; justify-content: center; min-height: var(--touch); }
  .wb-rail-kaart { flex-basis: 220px; min-width: 220px; }
  .wb-rail-archief { flex-basis: 196px; min-width: 196px; }
  .wb-rail-sub, .wb-rail-voet { font-size: 13px; }
  .wb-toolbar .toolbar-r { margin-left: 0; width: 100%; }
  .wb-toolbar .del-seg { flex: 1 1 auto; }
  .wb-toolbar .del-seg-btn { flex: 1 1 0; justify-content: center; min-height: var(--touch); }
  .wb-groep-kop { padding: 12px; gap: 8px; }
  .wb-groep-doel, .wb-groep-meta { font-size: 14px; }
  .wb-groep-rechts { flex: 1 0 100%; }
  .wb-epic-sprint { width: 100%; min-height: var(--touch); }
  .wb-klap { min-width: var(--touch); min-height: var(--touch); justify-content: center; }
  .wb-groep-kop > .wb-vink, .wb-groep-kop > .wb-vink-plek { display: none; }
  .wb-groep .tbl-wrap { overflow: visible; }
  /* De rijen worden kaarten (mobielTabel.js). Eén kaart: de titel met code en gereedheid, en
     eronder status, uitvoering, punten en sprint of epic als één regel chips. */
  .wb-tabel.dz-cards { padding: 10px 10px 2px; }
  .wb-tabel.dz-cards tr.wb-rij { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 14px; box-shadow: none; }
  .wb-tabel.dz-cards tr.wb-rij > td { padding: 0; }
  .wb-tabel.dz-cards tr.wb-rij > td::before { display: none; }
  .wb-tabel.dz-cards td.wb-titel-cel { flex: 1 0 100%; min-width: 0; border-bottom: 0; margin-bottom: 4px; padding: 0; }
  .wb-tabel.dz-cards td.wb-titel-cel > div { display: flex; }
  .wb-tabel.dz-cards td.wb-titel-cel > .wb-rij-titel { display: block; font-size: 16px; }
  .wb-tabel.dz-cards td.wb-titel-cel .wb-rij-meta { font-size: 13px; font-weight: 400; }
  .wb-tabel.dz-cards .wb-rij-proces { display: inline; }
  /* De hele kaart is het tikdoel; hij opent de story. */
  .wb-tabel.dz-cards td.wb-titel-cel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .wb-tabel.dz-cards td.ta-right::after { content: " pt"; }
  .wb-tabel.dz-cards td.wb-wie-cel { margin-left: auto; }
  .wb-tabel.dz-cards .wb-greep { display: none; }   /* slepen bestaat op touch niet */
  .wb-meer .btn { width: 100%; justify-content: center; min-height: var(--touch); }
  .wb-selbalk { bottom: calc(var(--bottomnav-h) + var(--safe-b) + 8px); }
  .wb-selbalk-hint { display: none; }
  .wb-selbalk .btn, .wb-selbalk .filter-select { flex: 1 1 auto; min-height: var(--touch); }
  .wb-form .input, .wb-form .textarea, .wb-form .filter-select { font-size: 16px; min-height: var(--touch); }
  .wb-form .btn { min-height: var(--touch); flex: 1 1 auto; justify-content: center; }
  .wb-kleur { width: var(--touch); height: var(--touch); }
  .wb-hint .btn { min-height: var(--touch); width: 100%; justify-content: center; }
  /* Het bord: de kolommen onder elkaar, elk met zijn eigen kop; geen zijwaarts schuiven. */
  .wb-samen-rechts { border-left: 0; padding-left: 0; border-top: 1px solid var(--sunken); padding-top: 12px; }
  .wb-legenda-rij, .wb-tempo, .wb-samen-periode, .wb-aandacht-tekst, .wb-aandacht-meer, .wb-leeg-tekst { font-size: 14px; }
  .wb-aandacht { min-height: var(--touch); }
  .wb-bord-hint { display: none; }
  .wb-bord-scroll { overflow: visible; padding: 10px; }
  .wb-bord-binnen { min-width: 0; }
  .wb-raster { grid-template-columns: minmax(0, 1fr); }
  .wb-bord-binnen.wb-vijf { min-width: 0; }
  .wb-raster.wb-raster-5 { grid-template-columns: minmax(0, 1fr); }
  .wb-raster-kop { display: none; }
  .wb-cel-kop { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
  .wb-kaart-titel { font-size: 15px; }
  .wb-banen { width: 100%; }
  .wb-banen .del-seg-btn { flex: 1 1 0; justify-content: center; min-height: var(--touch); }
  .wb-kop-knoppen > .filter-select { flex: 1 1 auto; min-height: var(--touch); }
  .wb-volgende-voet { font-size: 14px; }
  /* Stories en epics: het epicpaneel onder de tabel, in volle breedte, met duimmaat. */
  .wb-ov-resultaat, .wb-ep-telrij, .wb-ep-doel, .wb-ep-toel, .wb-ep-stats, .wb-ep-waarde, .wb-voorstel { font-size: 14px; }
  .wb-ep-kop .btn, .wb-ep-klap, .wb-ep-selbalk .btn, .wb-ep-bevestig .btn, .wb-voorstel .btn { min-height: var(--touch); min-width: var(--touch); justify-content: center; }
  .wb-ov-kop .filter-select { flex: 1 1 100%; min-height: var(--touch); }
  .wb-ep-form .input, .wb-ep-form .textarea, .wb-ep-in { font-size: 16px; }
  /* In het blad: duimmaat, en 16px zodat iOS niet inzoomt op een veld. */
  .wb-blad .filter-select, .wb-blad .textarea { min-height: var(--touch); font-size: 16px; }
  .wb-blad .btn { min-height: var(--touch); }
  .wb-blad .wb-grid2 { grid-template-columns: minmax(0, 1fr); }
  /* Bouwvolgorde: op de telefoon de enige manier om te ordenen, dus volle duimmaat en volle breedte. */
  .wb-volgorde { font-size: 14px; }
  .wb-volgorde-knoppen { width: 100%; margin-left: 0; }
  .wb-volgorde-knop { flex: 1 1 0; justify-content: center; min-height: var(--touch); }
}
@media (prefers-reduced-motion: reduce) {
  .wb-rail-kaart, .wb-groep { transition: none; }
}
/* Bouwvolgorde PR B: wat de server zegt over "Bouw volgt de sprint" (banner op het bord, regel in het paneel). */
.wb-bouwstand { display: flex; gap: 8px; align-items: flex-start; background: var(--amber-soft); color: var(--amber-strong); border-radius: 10px; padding: 9px 12px; font-size: 13px; margin: 0 0 12px; }
.wb-bouwstand.is-stop { background: var(--red-soft); color: var(--red-strong); }
.wb-bouwstand > .ic { margin-top: 2px; flex: none; }
.wb-wacht { display: flex; gap: 6px; align-items: center; color: var(--amber-strong); font-size: 13px; margin-top: 8px; }
/* 0378: het sprintbalkje voor Herstel nodig (Sprints-pagina). */
.sp-bar-fill.b-herstel { background: var(--red); }