:root{
  /* teal — de merk-inkt */
  --teal-900:#00252b; --teal-800:#00343d; --teal-700:#0a4952; --teal-600:#135e69;
  --teal-500:#1f7d8b; --teal-400:#3ea0af; --teal-300:#74c2cd; --teal-200:#aadde4;
  --teal-100:#d8f0f4; --teal-050:#eef9fb;
  /* cyaan — het signatuur-accent */
  --cyan-700:#1a93ad; --cyan-600:#26a8c4; --cyan-500:#39c2dd; --cyan-400:#5fd0e6;
  --cyan-300:#8adeee; --cyan-200:#b6ecf5; --cyan-100:#e0f7fb;
  /* warme neutralen */
  --sand-500:#e7d3ad; --sand-400:#f2e6d0; --linen-500:#efe6da; --linen-400:#f5f0ea;
  /* koele neutralen */
  --ink-900:#071b1f; --grey-800:#33474b; --grey-600:#5c6f73; --grey-500:#7f9296;
  --grey-400:#a9b8bb; --mist-400:#e2e6e7; --mist-200:#eef1f2; --paper-100:#fafafa; --white:#ffffff;
  /* status */
  --success-500:#2f9e6b; --success-100:#dcf3e8; --success-700:#1c6b47;
  --warning-500:#e0a13a; --warning-100:#faeecf; --warning-700:#8a5a00;
  --danger-500:#d1503f;  --danger-100:#f8e0da;  --danger-600:#b23c2e;
  --violet-700:#5b3fb0;  --violet-100:#ede9fe;
  /* semantische aliassen — hiernaar verwijzen, niet naar de schalen hierboven */
  --surface-page:var(--linen-400); --surface-card:var(--white);
  --surface-raised:var(--paper-100); --surface-sand:var(--sand-400);
  --surface-inverse:var(--teal-800); --surface-accent:var(--cyan-500);
  --text-strong:var(--teal-800); --text-body:var(--grey-800); --text-muted:var(--grey-600);
  --text-subtle:var(--grey-500); --text-on-dark:var(--linen-400);
  --text-on-accent:var(--teal-800); --text-link:var(--cyan-700);
  --text-eyebrow:var(--teal-500);
  --border-subtle:var(--mist-400); --border-strong:var(--grey-400);
  --border-accent:var(--cyan-500);
  --brand:var(--teal-800); --brand-accent:var(--cyan-500); --focus-ring:var(--cyan-500);
}
body{background:var(--surface-page);color:var(--text-body);font-family:'Raleway',system-ui,sans-serif;}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:flex;flex-direction:column;overflow:hidden;font-size:13px}
[hidden]{display:none!important}
a{color:var(--text-link)} a:hover{color:var(--text-strong)}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
body.dragging,body.dragging *{cursor:grabbing!important;user-select:none}
body.colresize,body.colresize *{cursor:col-resize!important;user-select:none}

/* Header */
.hdr{position:sticky;top:0;z-index:10;flex:0 0 auto;background:var(--teal-800);border-bottom:1px solid rgba(255,255,255,.12)}
.hdr-in{display:flex;align-items:center;flex-wrap:nowrap;gap:12px;padding:12px 24px}
.hdr-in>*{flex:0 0 auto;white-space:nowrap}
.logo{display:block;height:26px}
.hsep{width:1px;height:24px;background:rgba(255,255,255,.25)}
.hdr-in .ttl{flex:0 1 auto;min-width:0}
.ttl .eb{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--cyan-500)}
.ttl .t{font-size:18px;font-weight:800;color:var(--white);white-space:nowrap;line-height:1.25}
.ttl .s{font-size:12.5px;color:rgba(255,255,255,.7);overflow:hidden;text-overflow:ellipsis}
.hdr-in .spacer{flex:1 1 auto;min-width:6px}
.hdr-in .userbtn{flex:0 1 auto;min-width:0}
.userbtn{display:flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.25);background:none;border-radius:999px;padding:3px 10px 3px 3px;color:rgba(255,255,255,.7);font-size:12px;font-weight:600;cursor:pointer;max-width:220px}
.userbtn:hover{border-color:var(--cyan-500);color:var(--white)}
.userbtn .un{overflow:hidden;text-overflow:ellipsis;min-width:0}
.userbtn svg{width:12px;height:12px;flex:0 0 auto}
.av{width:22px;height:22px;border-radius:50%;background:var(--cyan-500);color:var(--teal-800);font-size:10px;font-weight:800;display:grid;place-items:center;flex:0 0 auto;letter-spacing:0}
.hnav{flex:0 0 auto;display:flex;align-items:center;gap:11px;white-space:nowrap}
.hnav>*{flex:0 0 auto;white-space:nowrap}
.env{border:1px solid var(--cyan-500);color:var(--cyan-300);border-radius:999px;padding:3px 9px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.navb{border:none;background:none;color:var(--white);font-weight:600;font-size:12px;opacity:.92;cursor:pointer;padding:4px 2px;border-bottom:2px solid transparent}
.navb:hover{opacity:1}
.navb.on{opacity:1;border-bottom-color:var(--cyan-500)}

/* Knoppen */
.btn{display:inline-flex;align-items:center;gap:6px;border-radius:999px;border:1px solid transparent;font-weight:800;font-size:12.5px;padding:8px 16px;cursor:pointer;line-height:1.2;white-space:nowrap}
.btn svg{width:14px;height:14px;flex:0 0 auto}
.btn-p{background:var(--cyan-500);color:var(--teal-800);box-shadow:0 4px 14px rgba(57,194,221,.35)}
.btn-p:hover{background:var(--cyan-400)}
.btn-s{background:var(--white);border-color:var(--border-strong);color:var(--text-muted)}
.btn-s:hover{border-color:var(--teal-400);color:var(--text-strong)}
.btn-d{background:var(--danger-600);color:var(--white)}
.btn-d:hover{background:var(--danger-500)}
.btn-sm{padding:6px 13px;font-size:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
/* Tertiaire knop: leest als een link, gedraagt zich als een knop. Voor acties die
   in een tabelcel of een lege stand staan en geen knopvlak verdienen. */
.lnk{border:0;background:none;padding:0;font:inherit;color:var(--text-link);cursor:pointer;text-decoration:underline}
.lnk:hover{color:var(--text-strong)}
.lnk:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:4px}

/* Toolbar */
.page{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.tb{flex:0 0 auto;background:var(--surface-card);border-bottom:1px solid var(--border-subtle);padding:10px 24px;display:flex;flex-direction:column;gap:8px}
.tb-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tb-sp{flex:1 1 auto}
.tb-div{width:1px;height:22px;background:var(--border-subtle);margin:0 4px}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-eyebrow)}
.tsel{padding:7px 30px 7px 12px;border:1px solid var(--border-strong);border-radius:10px;background:var(--white);color:var(--text-body);font-size:12.5px;font-weight:600;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--grey-600) 50%),linear-gradient(135deg,var(--grey-600) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px;background-repeat:no-repeat;max-width:100%}
.tsel:focus,.tinp:focus{outline:2px solid var(--focus-ring);outline-offset:1px}
.tsel.proj{font-weight:800;color:var(--text-strong);max-width:250px;text-overflow:ellipsis}
.tinp{padding:7px 12px;border:1px solid var(--border-strong);border-radius:10px;background:var(--white);color:var(--text-body);font-size:12.5px;min-width:180px}
.seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:999px;padding:2px;background:var(--white)}
.seg button,.seg label span{display:block;border:0;background:none;padding:5px 12px;border-radius:999px;font-weight:700;font-size:12px;color:var(--text-muted);cursor:pointer;white-space:nowrap}
.seg button:hover,.seg label:hover span{color:var(--text-strong)}
.seg button.on,.seg input:checked+span{background:var(--cyan-500);color:var(--teal-800)}
.seg label{position:relative;display:block}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg input:focus-visible+span{outline:2px solid var(--focus-ring);outline-offset:1px}
.rotag{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--sand-400);color:var(--warning-700);font-size:11.5px;font-weight:800}
.rotag svg{width:13px;height:13px}
.fchip{display:inline-flex;align-items:center;gap:4px;padding:4px 4px 4px 11px;border-radius:999px;background:var(--teal-100);color:var(--text-strong);font-size:12px;font-weight:700}
.fchip button{border:0;background:none;width:20px;height:20px;border-radius:50%;cursor:pointer;color:var(--text-strong);display:grid;place-items:center}
.fchip button:hover{background:var(--teal-200)}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px dashed var(--border-strong);border-radius:999px;background:var(--surface-raised);font-size:12px;font-weight:700;color:var(--text-strong);cursor:grab;user-select:none}
.chip:hover{border-color:var(--cyan-500);background:var(--cyan-100)}
.chip.dragsrc{opacity:.5}
.chip-fa{width:20px;height:9px;border-radius:3px;background:var(--violet-100);border:1px solid var(--violet-700);border-left:3px solid var(--violet-700)}
.chip-dia{width:9px;height:9px;background:var(--teal-800);transform:rotate(45deg);border-radius:1px}
.chip-bar{width:18px;height:8px;border-radius:4px;background:var(--cyan-200);border:1px solid var(--cyan-500)}

/* Zwevende balk */
/* Bovenruimte in .main is gereserveerd voor de zwevende balk (standaardpositie). */
.main{position:relative;flex:1 1 auto;min-height:0;display:flex;padding:70px 24px 20px}
.fbar{position:absolute;z-index:8;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;white-space:nowrap;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:14px;padding:8px 12px 8px 6px;box-shadow:0 10px 30px rgba(0,52,60,.18)}
.fbar .grip{width:20px;height:30px;display:grid;place-items:center;cursor:grab;color:var(--grey-500);border-radius:6px;flex:0 0 auto;touch-action:none}
.fbar .grip:hover{background:var(--teal-050);color:var(--text-strong)}
.fbar .grip svg{width:12px;height:18px}
.fgrp{display:flex;align-items:center;gap:7px}
/* ── Zwevende balk, variant 2a: alles op één bedieningshoogte (30px) ───────── */
.fbar{gap:7px;padding:7px 10px 7px 6px}
.fbar .fgrp{gap:5px}
.fbar .eyebrow{font-size:10.5px;letter-spacing:.1em}
.fbar .tb-div{height:24px;margin:0 1px}
.fbar .seg{height:30px;align-items:center}
.fbar .seg button{height:24px;display:flex;align-items:center;padding:0 9px}
.fbar .zstep{height:30px;align-items:center;margin-left:2px}
.fbar .zstep button{height:24px;min-width:24px;padding:0 6px}
.fbar .zstep #zPct{min-width:38px}
.fbar .chip{height:30px;padding:0 9px;gap:6px}
.fbar .btn-sm{height:30px;padding:0 10px}

/* Planning */
.card{flex:1 1 auto;min-width:0;display:flex;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:14px;overflow:hidden}
.scroller{flex:1 1 auto;min-width:0;overflow:auto;position:relative}
/* Kolomsynchronisatie: links en rechts zitten in één scrollcontainer. De linkerkolom is
   sticky (left:0), de tijdas sticky (top:0). Daardoor scrollen ze vanzelf gelijk op,
   zonder scroll-events te hoeven koppelen. --cols/--leftw worden door JS gezet. */
.grid{--leftw:320px;display:grid;grid-template-columns:var(--leftw) auto;grid-template-rows:53px auto;width:max-content;min-width:100%;min-height:100%}
.corner{position:sticky;top:0;left:0;z-index:4;background:var(--surface-card);border-right:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.lhead{display:grid;grid-template-columns:var(--cols);height:100%}
.hc{position:relative;display:flex;align-items:flex-end;min-width:0;padding:0 10px 9px 10px;overflow:hidden;white-space:nowrap;border-right:1px solid var(--border-subtle)}
.hc:last-child{border-right:0}
.hc.r{justify-content:flex-end}
.hl{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-eyebrow);overflow:hidden;text-overflow:ellipsis;cursor:text;border-radius:4px;padding:1px 2px}
.hl[contenteditable="true"]{outline:2px solid var(--focus-ring);background:var(--white);text-overflow:clip;text-transform:none;letter-spacing:0;font-size:12px}
.rz{position:absolute;top:0;right:0;width:7px;height:100%;cursor:col-resize;z-index:2}
.rz::after{content:"";position:absolute;top:8px;bottom:8px;right:2px;width:2px;border-radius:2px;background:transparent}
.rz:hover::after,.rz.on::after{background:var(--cyan-500)}
.axis{position:sticky;top:0;z-index:3;height:53px;background:var(--surface-card);border-bottom:1px solid var(--border-subtle)}
.ax-t,.ax-b{position:absolute;overflow:hidden;white-space:nowrap;border-left:1px solid var(--border-subtle);padding-left:6px}
.ax-t{top:0;height:26px;line-height:26px;font-size:11.5px;font-weight:700;color:var(--text-strong)}
.ax-b{top:26px;height:26px;line-height:26px;font-size:10.5px;font-weight:600;color:var(--text-muted);border-top:1px solid var(--border-subtle)}
.ax-b.we-c{background:var(--linen-500)}
.tlbl{position:absolute;bottom:3px;transform:translateX(-50%);background:var(--danger-600);color:var(--white);font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;z-index:2;pointer-events:none}
.left{position:sticky;left:0;z-index:2;background:var(--surface-card);border-right:1px solid var(--border-subtle)}
.left.measure .c{overflow:visible}
.left.measure .nm{flex-shrink:0;overflow:visible;text-overflow:clip}
.right{position:relative;z-index:0;overflow:hidden}

/* Rijen links — 36px, identiek aan de rijen rechts */
.row{height:36px;border-bottom:1px solid var(--border-subtle);display:grid;grid-template-columns:var(--cols);align-items:stretch;position:relative;cursor:default}
.row.m{background:var(--surface-raised)}
.row:hover{background:var(--teal-050)}
.row.is-sel{background:var(--cyan-100)}
.row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.row.dragsrc{opacity:.45}
.row.drop-before{box-shadow:inset 0 2px 0 var(--cyan-500)}
.row.drop-after{box-shadow:inset 0 -2px 0 var(--cyan-500)}
.row.drop-into{box-shadow:inset 0 0 0 2px var(--cyan-500)}
.c{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden;white-space:nowrap;padding:0 10px;border-right:1px solid var(--border-subtle);font-size:12.5px;color:var(--text-muted)}
.c .wienm{min-width:0;overflow:hidden;text-overflow:ellipsis}   /* hele naam, met … als de kolom te smal staat */
.c:last-child{border-right:0}
.c.r{justify-content:flex-end;font-variant-numeric:tabular-nums}
.c-naam{position:relative;color:var(--text-body);padding-left:6px}
.c b{color:var(--text-strong);font-weight:700}
.c .warn{display:inline-flex;align-items:center;gap:3px;color:var(--warning-700);font-weight:700}
.c .warn svg{width:12px;height:12px}
.nm{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--text-body);border-radius:5px;padding:2px 4px}
.can-edit .nm{cursor:text}
.can-edit .nm:hover{background:var(--white);box-shadow:inset 0 0 0 1px var(--border-subtle)}
.row.m .nm{font-weight:800;color:var(--text-strong)}
.nm[contenteditable="true"]{outline:2px solid var(--focus-ring);outline-offset:0;background:var(--white);text-overflow:clip}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.ics{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;gap:1px;padding:1px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s}
.row:hover .ics,.row:focus-within .ics{opacity:1;pointer-events:auto}
.ic{width:24px;height:24px;border:0;background:none;border-radius:6px;color:var(--text-muted);display:grid;place-items:center;cursor:pointer;padding:0;flex:0 0 auto}
.ic svg{width:14px;height:14px}
.ic:hover{background:var(--teal-100);color:var(--text-strong)}
.ic.del:hover{background:var(--danger-100);color:var(--danger-600)}
.chev svg{transition:transform .15s}
.row.closed .chev svg{transform:rotate(-90deg)}
.cnt{border:0;border-radius:999px;background:var(--violet-100);color:var(--violet-700);font-weight:800;font-size:11px;padding:2px 8px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.cnt:hover{background:var(--violet-700);color:var(--white)}
.cnt svg{width:11px;height:11px}
.empty{padding:18px 14px;color:var(--text-muted);font-style:italic}

/* Rechts: achtergrond, stroken, mijlpalen */
.we{position:absolute;top:0;bottom:0;background:var(--linen-500);opacity:.6}
.gl{position:absolute;top:0;bottom:0;width:1px;background:var(--border-subtle);opacity:.55}
.gl.gl-t{opacity:1}
.msline{position:absolute;top:0;bottom:0;border-left:1px dashed var(--teal-300)}
.rrow{position:absolute;left:0;right:0;height:36px;border-bottom:1px solid var(--border-subtle)}
.rrow.m{background:color-mix(in srgb,var(--teal-050) 65%,transparent)}
.rrow.is-sel{background:color-mix(in srgb,var(--cyan-100) 75%,transparent)}
.bar{position:absolute;height:20px;border-radius:8px;border:1px solid;overflow:hidden;display:flex;align-items:center;z-index:3;touch-action:none;user-select:none}
.can-edit .bar,.can-edit .dia{cursor:grab}
.bar:hover{box-shadow:0 2px 8px rgba(0,52,60,.18)}
.bar.is-sel{outline:2px solid var(--teal-800);outline-offset:1px}
.fill{position:absolute;left:0;top:0;bottom:0;pointer-events:none}
.over{position:absolute;top:0;bottom:0;right:0;pointer-events:none;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--danger-500) 55%,transparent) 0 3px,transparent 3px 7px)}
.lbl{position:relative;z-index:1;padding:0 10px;font-size:11.5px;font-weight:700;color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.olbl{position:absolute;line-height:36px;font-size:11.5px;font-weight:600;color:var(--text-muted);white-space:nowrap;pointer-events:none;z-index:3}
.h{position:absolute;top:0;bottom:0;width:9px;z-index:2}
.can-edit .h{cursor:ew-resize}
.h.l{left:0}.h.r{right:0}
.can-edit .bar:hover .h::after{content:"";position:absolute;top:4px;bottom:4px;left:3px;width:2px;border-radius:2px;background:var(--teal-800);opacity:.55}
.st-niet_gestart{background:var(--mist-400);border-color:var(--grey-400)} .st-niet_gestart .fill{background:var(--grey-400)}
.st-loopt{background:var(--cyan-200);border-color:var(--cyan-500)} .st-loopt .fill{background:var(--cyan-500)}
.st-risico{background:var(--warning-100);border-color:var(--warning-500)} .st-risico .fill{background:var(--warning-500)}
.st-klaar{background:var(--success-100);border-color:var(--success-500)} .st-klaar .fill{background:var(--success-500)}
.st-vertraagd{background:var(--danger-100);border-color:var(--danger-500)} .st-vertraagd .fill{background:var(--danger-500)}
.sum{position:absolute;height:14px;border-radius:7px;border:1px solid var(--teal-300);background:repeating-linear-gradient(135deg,var(--teal-100) 0 5px,var(--teal-050) 5px 10px);z-index:2;pointer-events:none}
.dia{position:absolute;width:14px;height:14px;background:var(--teal-800);transform:rotate(45deg);border-radius:2px;z-index:4;touch-action:none}
.dia:hover{background:var(--teal-600)}
.dia.is-sel{outline:2px solid var(--cyan-500);outline-offset:2px}
.dlbl{position:absolute;line-height:36px;font-size:12px;font-weight:800;color:var(--text-strong);white-space:nowrap;z-index:4;pointer-events:none}
.dlbl span{font-weight:600;color:var(--text-muted);margin-left:4px}
.today{position:absolute;top:0;bottom:0;width:2px;background:var(--danger-500);z-index:5;pointer-events:none}
.ghost{position:absolute;z-index:6;pointer-events:none}
.ghost-bar{height:20px;border-radius:8px;border:1.5px dashed var(--cyan-700);background:color-mix(in srgb,var(--cyan-200) 70%,transparent)}
.ghost-dia{width:14px;height:14px;transform:rotate(45deg);border:1.5px dashed var(--teal-800);background:color-mix(in srgb,var(--teal-200) 70%,transparent)}
.ghost-fa{height:22px;border-radius:7px;border:1.5px dashed var(--violet-700);background:color-mix(in srgb,var(--violet-100) 70%,transparent)}
.ghost-line{position:absolute;top:0;bottom:0;border-left:1.5px dashed var(--cyan-700);z-index:5;pointer-events:none}
.ghost-lbl{position:absolute;z-index:6;pointer-events:none;background:var(--teal-800);color:var(--linen-400);font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap}
.links{position:absolute;left:0;top:0;pointer-events:none;z-index:2;overflow:visible}

/* Pagina's met tabellen */
.pscroll{flex:1 1 auto;min-height:0;overflow:auto;padding:16px 24px 28px;display:flex;flex-direction:column;gap:22px}
.sect{display:flex;flex-direction:column;gap:10px;max-width:1280px}
.sect-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sect-h h2{margin:0;font-size:18px;font-weight:800;color:var(--text-strong)}
.note{font-size:12.5px;color:var(--text-muted);line-height:1.5}
.tcard{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:14px;overflow:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-eyebrow);padding:11px 12px;border-bottom:1px solid var(--border-strong);white-space:nowrap;background:var(--surface-raised)}
.tbl th button{border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:0}
.tbl th button:hover{color:var(--text-strong)}
.tbl th .ar{font-size:10px;color:var(--text-strong)}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--border-subtle);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr.click{cursor:pointer}
.tbl tbody tr.click:hover td{background:var(--teal-050)}
.tbl tbody tr:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.tbl .t-main{font-weight:700;color:var(--text-strong)}
.tbl .sub{font-size:11.5px;color:var(--text-muted);margin-top:2px;display:flex;align-items:center;gap:5px}
.tbl .sub svg{width:12px;height:12px}
.tbl .nr{font-weight:800;color:var(--text-strong);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .mut{color:var(--text-muted);white-space:nowrap}
.tbl td.ctr,.tbl th.ctr{text-align:center}
.tbl input[type=checkbox]{width:16px;height:16px;accent-color:var(--cyan-600);cursor:pointer}
.tbl input[type=checkbox]:disabled{cursor:not-allowed}
/* ===== Kolombreedtes in elke tabel (generiek, wens: kolommen overal verschuifbaar) =====
   Elke tabel met een kop krijgt dezelfde greep als de planning en de testmatrix: een smalle
   strook op de rechterrand van een kolomkop (.rz, zie boven). app.js zet de tabel daarbij op
   table-layout:fixed met een <colgroup>, zodat een kolom precies op de gesleepte breedte
   blijft staan in plaats van mee te rekken met zijn inhoud. De laatste kolom houdt geen
   vaste breedte en vangt de speling op.
   Dit blok staat bewust VOOR de tabelspecifieke regels verderop: .tpresp en .tptaken zetten
   hun koppen op position:sticky, en die moet hier overheen kunnen -- een sticky th is zelf
   al een positiepunt voor de greep, dus relative is daar niet nodig. */
table[data-rz]{table-layout:fixed}
table[data-rz] th{position:relative}
table[data-rz]>thead th{overflow:hidden;text-overflow:ellipsis}
table[data-rz]>tbody td{overflow:hidden}
/* Een tabel mag breder worden dan zijn omhulsel; dat moet dan horizontaal kunnen schuiven.
   app.js hangt dit alleen aan een omhulsel dat nog niet zelf scrollt en aan een tabel zonder
   sticky kop -- anders zou het nieuwe scrollvlak die kop losweken. */
.rz-scroll{overflow-x:auto}
.tag{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}
.t-wens{background:var(--teal-100);color:var(--teal-800)}
.t-bevinding{background:var(--warning-100);color:var(--warning-700)}
.s-nieuw{background:var(--violet-100);color:var(--violet-700)}
.s-in_behandeling{background:var(--cyan-100);color:var(--teal-800)}
.s-opgelost{background:var(--teal-100);color:var(--teal-700)}
.s-getest{background:var(--success-100);color:var(--success-700)}
.s-gesloten{background:var(--mist-400);color:var(--grey-800)}
.s-afgewezen{background:var(--danger-100);color:var(--danger-600)}
.p-must{background:var(--danger-100);color:var(--danger-600)}
.p-should{background:var(--warning-100);color:var(--warning-700)}
.p-could{background:var(--teal-100);color:var(--teal-700)}
.p-wont{background:var(--mist-400);color:var(--grey-800)}
.e-blokkerend{background:var(--danger-600);color:var(--white)}
.e-hoog{background:var(--danger-100);color:var(--danger-600)}
.e-midden{background:var(--warning-100);color:var(--warning-700)}
.e-laag{background:var(--mist-400);color:var(--grey-800)}
.r-admin{background:var(--teal-800);color:var(--linen-400)}
.r-projectleider{background:var(--cyan-100);color:var(--teal-800)}
.r-testmanager{background:var(--violet-100);color:var(--violet-700)}
.r-projectlid{background:var(--mist-400);color:var(--grey-800)}
.ucell{display:flex;align-items:center;gap:10px}
.ucell .av{width:30px;height:30px;font-size:11px}
.ucell.off{opacity:.55}
.sw{width:34px;height:20px;border-radius:999px;background:var(--grey-400);position:relative;border:0;cursor:pointer;flex:0 0 auto;padding:0}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--white);transition:left .15s}
.sw.on{background:var(--success-500)}
.sw.on::after{left:16px}
.sw[disabled]{opacity:.45;cursor:not-allowed}
.swl{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--text-muted)}
.acts-cell{display:flex;gap:2px;justify-content:flex-end}

/* Popover */
.pop{position:fixed;z-index:40;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:14px;box-shadow:0 18px 50px rgba(0,52,60,.28);padding:8px;min-width:230px;max-height:70vh;overflow:auto}
.pop-h{padding:6px 10px 8px}
.pop-i{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:none;border-radius:10px;font-size:13px;text-align:left;cursor:pointer;color:var(--text-body)}
.pop-i:hover{background:var(--teal-050)}
.pop-i[disabled]{opacity:.45;cursor:not-allowed}
.pop-i .pm{margin-left:auto;font-size:11px;color:var(--text-muted)}
.pop-i.cur{background:var(--cyan-100)}
.pop-i input{width:15px;height:15px;accent-color:var(--cyan-600);margin:0}
.pop-sep{height:1px;background:var(--border-subtle);margin:6px 4px}

/* Modal */
.ov{position:fixed;inset:0;z-index:50;background:rgba(0,52,60,.42);display:none;place-items:center;padding:20px}
.ov.open{display:grid}
.mdl{width:100%;max-width:420px;max-height:calc(100vh - 40px);overflow:auto;background:var(--surface-card);border-radius:18px;box-shadow:0 18px 50px rgba(0,52,60,.28);padding:22px 24px}
.mdl.wide{max-width:660px}
.mdl h2{margin:4px 0 16px;font-size:20px;font-weight:800;color:var(--text-strong);line-height:1.25;text-wrap:pretty}
.mdl p{margin:0 0 10px;line-height:1.5;text-wrap:pretty}
.fg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 14px}
.fg.is-wens .only-b{display:none}
.f{display:flex;flex-direction:column;gap:5px;min-width:0}
.f.full{grid-column:1/-1}
.f>label,.f>.flabel{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.inp{width:100%;padding:11px 13px;border:1px solid var(--border-strong);border-radius:10px;font-size:13.5px;color:var(--text-body);background:var(--white)}
.inp:focus{outline:2px solid var(--focus-ring);outline-offset:1px}
.inp:disabled{background:var(--surface-raised);color:var(--text-muted)}
textarea.inp{resize:vertical;min-height:70px;line-height:1.45}
.rng{display:flex;align-items:center;gap:12px}
.rng input{flex:1;accent-color:var(--cyan-600)}
.rng output{font-weight:800;color:var(--text-strong);min-width:40px;text-align:right}
.hint{font-size:11.5px;color:var(--text-muted)}
.cks{display:flex;flex-wrap:wrap;gap:8px 16px}
.cks label{display:inline-flex;align-items:center;gap:7px;font-size:13px;cursor:pointer}
.cks input{width:16px;height:16px;accent-color:var(--cyan-600);margin:0}
.att{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.att img{max-width:240px;max-height:160px;border-radius:10px;border:1px solid var(--border-subtle);display:block}
.att .attm{display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.drop{border:1px dashed var(--border-strong);border-radius:10px;padding:14px;display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:12.5px;cursor:pointer;background:var(--surface-raised)}
.drop:hover,.drop.over{border-color:var(--cyan-500);background:var(--cyan-100)}
.mact{display:flex;align-items:center;gap:8px;margin-top:20px;flex-wrap:wrap}
.mact .sp{flex:1}
.help{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.help li{display:grid;grid-template-columns:130px 1fr;gap:12px;line-height:1.45}
.help b{color:var(--text-strong);font-weight:800}

.k-cyaan{background:var(--cyan-200);border-color:var(--cyan-500)} .k-cyaan .fill{background:var(--cyan-500)}
.k-teal{background:var(--teal-100);border-color:var(--teal-500)} .k-teal .fill{background:var(--teal-500)}
.k-violet{background:var(--violet-100);border-color:var(--violet-700)} .k-violet .fill{background:var(--violet-700)} .k-violet .lbl{color:var(--ink-900)}
.k-zand{background:var(--sand-400);border-color:var(--sand-500)} .k-zand .fill{background:var(--sand-500)}
.k-groen{background:var(--success-100);border-color:var(--success-500)} .k-groen .fill{background:var(--success-500)}
.k-oranje{background:var(--warning-100);border-color:var(--warning-500)} .k-oranje .fill{background:var(--warning-500)}
.k-rood{background:var(--danger-100);border-color:var(--danger-500)} .k-rood .fill{background:var(--danger-500)}
.k-grijs{background:var(--mist-400);border-color:var(--grey-400)} .k-grijs .fill{background:var(--grey-400)}
.sws{display:flex;gap:4px;flex-wrap:wrap;padding:6px 0}
.sws label{position:relative;display:block}
.sws input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.sws span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer}
.sws i{display:block;width:18px;height:18px;border-radius:50%}
.sws i.sw-st{background:conic-gradient(var(--grey-400) 0 25%,var(--cyan-500) 0 50%,var(--warning-500) 0 75%,var(--success-500) 0)}
.sws input:checked+span{border-color:var(--teal-800)}
.sws input:focus-visible+span{outline:2px solid var(--focus-ring);outline-offset:1px}
.sws input:disabled+span{opacity:.5;cursor:not-allowed}
/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);z-index:60;background:var(--teal-800);color:var(--linen-400);border-radius:999px;padding:10px 18px;font-size:12.5px;font-weight:700;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:900px){
  .main{padding:66px 12px 12px}
  .tb{padding:10px 12px}
  .pscroll{padding:12px}
  .hdr-in{padding:12px 14px}
  .fg{grid-template-columns:minmax(0,1fr)}
  .help li{grid-template-columns:1fr;gap:2px}
  .userbtn .un{display:none}
}

/* ================= Aanvullingen app (niet in het prototype) ================= */
img.logo{width:auto}
.noproj{flex:1 1 auto;align-self:flex-start;max-width:560px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:14px;padding:22px 24px}
.noproj h2{margin:4px 0 8px;font-size:20px;font-weight:800;color:var(--text-strong)}
.noproj p{margin:0}

/* Inlogpagina */
body.login{overflow:auto;display:grid;place-items:center;min-height:100%;padding:24px 16px;
  background:radial-gradient(1000px 440px at 80% -10%,rgba(57,194,221,.18),transparent 60%),linear-gradient(160deg,var(--teal-800),var(--teal-900))}
.lg-card{width:100%;max-width:420px;background:var(--surface-card);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.3);overflow:hidden}
.lg-head{display:flex;align-items:center;gap:14px;background:var(--teal-800);padding:20px 26px;border-bottom:1px solid rgba(255,255,255,.12)}
.lg-head .logo{height:26px}
.lg-head .ttl .eb{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--cyan-500)}
.lg-head .ttl .t{font-size:18px;font-weight:800;color:var(--white)}
.lg-body{padding:24px 26px 26px}
.lg-body h1{margin:0 0 6px;font-size:20px;font-weight:800;color:var(--text-strong)}
.lg-form{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.lg-form .flabel{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.lg-btn{justify-content:center;margin-top:12px;padding:11px 16px;font-size:13.5px}
.lg-code{font-family:Menlo,Consolas,monospace;font-size:24px;letter-spacing:10px;text-align:center;font-weight:700}
/* Omgevingsstempel onder de kop: alleen zichtbaar als deze installatie zich NIET
   'productie' noemt (zie pp_app_label). Een strook over de volle breedte, niet een
   klein badge-je — twee omgevingen die er identiek uitzien moet je niet kunnen
   verwarren omdat je net langs een hoekje keek. */
.lg-omg{background:var(--warning-100);color:var(--warning-700);border-bottom:1px solid var(--warning-500);
  padding:7px 26px;font-size:10px;font-weight:800;letter-spacing:.1em;text-align:center}
.lg-alert{border-radius:10px;padding:10px 13px;margin-bottom:14px;font-size:12.5px;line-height:1.45;background:var(--cyan-100);color:var(--teal-800);border-left:4px solid var(--cyan-600)}
.lg-alert.err{background:var(--danger-100);color:var(--danger-600);border-left-color:var(--danger-600)}
.lg-dev{background:var(--teal-800);color:var(--linen-400);border-radius:10px;padding:12px;text-align:center;margin-bottom:14px}
.lg-dev span{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-300)}
.lg-dev b{font-family:Menlo,Consolas,monospace;font-size:24px;letter-spacing:8px;color:var(--cyan-500)}
/* Projectkeuze (laatste loginstap): de radio's als aanklikbare kaartjes. */
.lg-projs{display:flex;flex-direction:column;gap:8px;margin-top:4px;max-height:46vh;overflow:auto}
.lg-projs label{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 10px;
  padding:11px 13px;border:1px solid var(--border-subtle);border-radius:10px;cursor:pointer;background:var(--surface-card)}
.lg-projs label:hover{border-color:var(--cyan-600);background:var(--cyan-100)}
.lg-projs label:has(input:checked){border-color:var(--cyan-600);box-shadow:inset 0 0 0 1px var(--cyan-600);background:var(--cyan-100)}
.lg-projs input{grid-row:1/span 2;margin:0;accent-color:var(--teal-800)}
.lg-projs .n{font-size:13.5px;font-weight:700;color:var(--text-strong)}
.lg-projs .p{font-size:11.5px;color:var(--text-muted)}
.lg-alt{margin-top:16px}
.lg-link{border:0;background:none;padding:0;font:inherit;font-size:12.5px;font-weight:700;color:var(--text-link);cursor:pointer;text-decoration:underline}
.lg-link:hover{color:var(--text-strong)}
/* Traploos zoomen */
.zstep{display:inline-flex;align-items:center;border:1px solid var(--border-strong);border-radius:999px;padding:2px;background:var(--white);margin-left:4px}
.zstep button{border:0;background:none;min-width:26px;height:26px;padding:0 6px;border-radius:999px;font-weight:800;font-size:14px;color:var(--text-muted);cursor:pointer;line-height:1}
.zstep button:hover:not([disabled]){color:var(--text-strong);background:var(--teal-050)}
.zstep button[disabled]{opacity:.35;cursor:not-allowed}
.zstep #zPct{font-size:11px;min-width:44px;font-variant-numeric:tabular-nums}
.zstep #zPct.on{background:var(--cyan-100);color:var(--teal-800)}

/* Subactiviteiten */
.row.a.par .nm{font-weight:700;color:var(--text-strong)}
.subn{flex:0 0 auto;border-radius:999px;background:var(--teal-100);color:var(--teal-700);font-size:10.5px;font-weight:800;padding:1px 7px}
/* Blokken: meerdere perioden van één activiteit op dezelfde regel. De stroken zijn iets
   lager dan een gewone strook en staan op een dunne verbindingslijn over de hele spanne,
   zodat de regel als één geheel leest. Het badge in de naamkolom telt de blokken. */
.subn.blkn{background:var(--cyan-200);color:var(--cyan-700)}
/* Deliverables krijgen de violette tint: onderscheidend van de blokken (cyaan) en de
   taken (teal), zodat drie tellers naast elkaar uit elkaar te houden blijven. */
.subn.dlvn{background:var(--violet-100);color:var(--violet-700)}
.blkline{position:absolute;height:2px;border-radius:1px;background:var(--border-strong);opacity:.55;z-index:2;pointer-events:none}
.bar.blk{border-radius:6px}
.bar.blk .clip{border-radius:5px}
/* Blokkentabel in het activiteitvenster */
.blktab{width:100%;border-collapse:collapse;margin:4px 0 2px;font-size:12.5px}
.blktab th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);padding:0 6px 4px 0}
.blktab th.r,.blktab td.r{text-align:right}
.blktab td{padding:2px 6px 2px 0;vertical-align:middle}
.blktab td:last-child,.blktab th:last-child{padding-right:0;width:32px;text-align:right}
.blktab .inp{padding:4px 7px;font-size:12.5px}
.blkact{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:4px}
.bar.par{height:12px;border-radius:3px;background:var(--teal-200);border-color:var(--teal-700)}
.bar.par .fill{background:var(--teal-700)}
.bar.par::before,.bar.par::after{content:"";position:absolute;bottom:-5px;width:0;height:0;border-top:5px solid var(--teal-700);z-index:2}
.bar.par::before{left:-1px;border-right:5px solid transparent}
.bar.par::after{right:-1px;border-left:5px solid transparent}
.bar.par{overflow:visible}
.bar.par{height:20px;border-radius:6px}
.bar.par .clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.bar .lbl.sm{padding:0 4px}
/* Testplan-matrix en Master data */
.sect-wide{max-width:none}
.cin{padding:6px 9px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--white);color:var(--text-body);font-size:12.5px;font-family:inherit;max-width:100%}
.cin:hover:not([disabled]){border-color:var(--border-strong)}
.cin:focus{outline:2px solid var(--focus-ring);outline-offset:1px}
.cin[disabled]{background:transparent;border-color:transparent;color:var(--text-body);appearance:none;opacity:1}
.cin.wide{width:100%;min-width:180px}
.cin.xwide{width:100%;min-width:320px}
/* Meegroeiend veld (wens #18): tekst die niet op één regel past loopt door op de volgende
   in plaats van afgekapt te worden. De hoogte zet taFit() in app.js; overflow:hidden houdt
   de scrollbalk weg zolang het veld nog kan groeien, en boven TA_MAX mag hij verschijnen.
   Geen resize-greep: de hoogte volgt de inhoud, een handmatig formaat zou daar tegenin gaan. */
textarea.cin.ta{display:block;width:100%;line-height:1.35;resize:none;overflow:auto;min-height:30px}
select.cin.sc-ja{background:var(--success-100);color:var(--success-700);font-weight:700}
select.cin.sc-nee{background:var(--mist-400);color:var(--grey-800);font-weight:700}
select.cin.sc-optioneel{background:var(--warning-100);color:var(--warning-700);font-weight:700}
select.cin.sc-tbd{background:var(--cyan-100);color:var(--teal-800);font-weight:700}
.tag.sc-ja{background:var(--success-100);color:var(--success-700)}
.tag.sc-nee{background:var(--mist-400);color:var(--grey-800)}
.tag.sc-optioneel{background:var(--warning-100);color:var(--warning-700)}
.tag.sc-tbd{background:var(--cyan-100);color:var(--teal-800)}
.tag.sc-nvt{background:var(--mist-400);color:var(--text-muted)}
.tp-card{overflow:auto;max-height:calc(100vh - 210px)}
.tpm{border-collapse:separate;border-spacing:0}
.tpm th{position:sticky;top:0;z-index:2}
.tpm .stick{position:sticky;left:0;z-index:1;background:var(--surface-card);border-right:1px solid var(--border-subtle)}
.tpm th.stick{z-index:3;background:var(--surface-raised)}
.tpm tbody tr:hover td{background:var(--teal-050)}
.tpm tbody tr:hover td.stick{background:var(--teal-050)}
/* Buiten scope = de HELE regel grijs (wens #19). Eerder bleven de testsoortnaam en de
   scope-keuze op volle sterkte staan, waardoor zo'n rij in de lijst nog net zo hard
   binnenkwam als een rij die wél getest wordt. Nu dempt de rij als geheel: naam, velden
   en een rustige achtergrond. De scope-keuze zelf houdt zijn eigen kleur (sc-nee), want
   daaraan lees je af waaróm de rij grijs is, en de tekst blijft leesbaar. */
.tpm tr.off td,.tpm tr.off .cin,.tpm tr.off .t-main,.tpm tr.off .sub{color:var(--text-muted)}
.tpm tr.off td{background:var(--mist-100)}
.tpm tr.off td.stick{background:var(--mist-100)}
.tpm tr.off:hover td,.tpm tr.off:hover td.stick{background:var(--teal-050)}
.tpm .msh{min-width:76px;max-width:108px;white-space:normal;vertical-align:bottom;text-transform:none;letter-spacing:0}
.tpm .msn{display:block;font-size:11px;font-weight:800;color:var(--text-strong);line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tpm .msd{display:block;font-size:9.5px;font-weight:600;color:var(--text-muted);margin-top:1px}
.tpm td.ctr input{width:16px;height:16px}
/* Kolombreedtes van de matrix. Zonder --w-<kolom> gedraagt een kolom zich precies zoals
   hiervoor; zet je er een breedte op door aan de kolomrand te slepen, dan ligt hij vast en
   verdeelt de rest zich over wat overblijft. De fallback in var() ís dus het oude gedrag. */
.tpm [data-c="soort"]{width:var(--w-soort,auto);min-width:var(--w-soort,196px);max-width:var(--w-soort,250px)}
.tpm [data-c="rat"]{width:var(--w-rat,auto);min-width:var(--w-rat,140px);max-width:var(--w-rat,260px)}
.tpm [data-c="inscope"]{width:var(--w-inscope,auto);min-width:var(--w-inscope,0);max-width:var(--w-inscope,none)}
.tpm [data-c="resp"]{width:var(--w-resp,auto);min-width:var(--w-resp,0);max-width:var(--w-resp,none)}
.tpm [data-c="env"]{width:var(--w-env,auto);min-width:var(--w-env,0);max-width:var(--w-env,none)}
/* De greep zelf komt uit de planning (.rz); een th is sticky en dus al een positiepunt. */
.tpm th .rz{height:100%}
.tpm td.rat .cin{width:100%;min-width:0}
.tpm td.rat.leeg .cin{border-color:var(--warning-500)}
#mdBody .sect{max-width:1100px}
#mdBody .sect-h{align-items:center}
#mdBody .sect-h .tb-sp{flex:1 1 auto}
#mdBody .ic[disabled]{opacity:.35;cursor:not-allowed}
#mdBody .ic{font-size:10px}

/* Balktekst: korte omschrijving in de balk; te lang → afgekapt met … (fill zit in .clip) */
.bar .clip{position:absolute;inset:0;border-radius:7px;overflow:hidden;pointer-events:none}
.bar .lbl{position:relative;z-index:2;min-width:0}

/* Testsoorten bij een testactiviteit + signalering in de matrix */
.tsl{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px 14px;padding:6px 0 2px}
.tsopt{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;min-width:0}
.tsopt input{width:16px;height:16px;accent-color:var(--cyan-600);margin:0;flex:0 0 auto}
.tsopt .tsn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tsopt .tag{font-size:10px;padding:1px 7px}
.tsopt.off{opacity:.5;cursor:not-allowed}
.tag.tswarn{background:var(--warning-100);color:var(--warning-700)}
.tpm td.ctr .tact{display:block;margin-top:2px;font-size:10px;font-weight:800;color:var(--teal-700)}
.tpm tbody tr td.tswarn-cell,.tpm tbody tr:hover td.tswarn-cell{background:var(--warning-100)}
.tpm td.tswarn-cell .tact{color:var(--warning-700)}
/* Slepen in de lijst: greep in de hover-knoppen + grijp-cursor */
.can-edit #left .row{cursor:grab}
.can-edit #left .row .nm{cursor:text}
.can-edit #left .row .ic:not(.grip),.can-edit #left .row .cnt{cursor:pointer}
.ic.grip{cursor:grab;font-size:15px;line-height:1;color:var(--grey-500)}
.ic.grip:hover{background:var(--teal-100);color:var(--text-strong)}
/* Compact bewerkvenster (activiteit): breed, 4 kolommen, uitleg als ⓘ */
.mdl.xl{max-width:960px;padding:18px 22px 16px}
.mdl.xl .eyebrow{font-size:10.5px}
.mdl.xl h2{font-size:18px;margin:2px 0 12px}
.fg.g4{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px}
.fg.g4 .s2{grid-column:span 2}
.mdl.xl .f{gap:4px}
.mdl.xl .f>label,.mdl.xl .f>.flabel{font-size:10.5px;display:flex;align-items:center;gap:4px;white-space:nowrap}
.mdl.xl .inp{padding:8px 10px;font-size:13px;border-radius:9px}
.mdl.xl textarea.inp{min-height:44px}
.mdl.xl .sws{padding:2px 0}
/* Het activiteitvenster moet op één scherm passen, ook mét blokken en testsoorten.
   Daarom binnen .xl: krappere rijen, een compacte blokkentabel, een dichter
   testsoorten-raster en feestdagen/netto als hintregel in plaats van twee velden. */
.mdl.xl .fg.g4{gap:8px 12px}
.mdl.xl .f>.hint{font-size:10.5px;line-height:1.2;margin-top:-1px}
.mdl.xl .blktab{margin:2px 0 0;font-size:12px}
.mdl.xl .blktab th{padding:0 6px 2px 0}
.mdl.xl .blktab td{padding:1px 6px 1px 0}
.mdl.xl .blktab .inp{padding:3px 7px;font-size:12px;border-radius:7px}
.mdl.xl .blktab .ic{width:24px;height:24px}
.mdl.xl .blkact{padding-top:2px;gap:10px}
.mdl.xl .blkact .btn{padding:4px 10px;font-size:12px}
.mdl.xl .tsl{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 12px;padding:2px 0 0}
.mdl.xl .tsopt{font-size:12px}
.mdl.xl textarea.inp{min-height:36px}
.mdl.xl .mact{padding-top:10px}
.mdl.xl .crit-row .cin{padding:4px 7px;font-size:12px}
.mdl.xl .sws span{width:26px;height:26px}
.mdl.xl .sws i{width:16px;height:16px}
.mdl.xl .seg label span{padding:5px 11px}
.mdl.xl .mact{margin-top:14px}
.mdl.xl .rng{height:36px}
.info{cursor:help;color:var(--text-subtle);font-size:12px;font-weight:700;text-transform:none;letter-spacing:0;border-radius:50%}
.info:hover,.info:focus{color:var(--text-link);outline:none}
.calc{font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:none;color:var(--teal-700);background:var(--teal-100);border-radius:999px;padding:1px 7px}
@media (max-width:900px){.fg.g4{grid-template-columns:minmax(0,1fr)}.fg.g4 .s2{grid-column:auto}.mdl.xl .f>label{white-space:normal}}

/* Entry- & exit-criteria (activiteitvenster: afvinklijst per soort, 2 kolommen naast elkaar) */
.crit-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px}
/* "Kopieer naar…" staat rechts in de kop van het criteriablok; de kop zelf is uppercase, de knop niet. */
.crit-copy{margin-left:auto;text-transform:none;letter-spacing:normal;font-weight:700}
.critcp-kop{padding:6px 0 0}
/* Een tweede venster bovenop het eerste: het onderste wordt even weggezet, niet weggegooid. */
.mdl.mdl-weg{display:none}

.crit-grp{display:flex;flex-direction:column;gap:4px}
.crit-list{display:flex;flex-direction:column;gap:4px;padding:2px 0}
.crit-row{display:flex;align-items:center;gap:6px}
/* min-width:0: anders groeit een keuzelijst mee met de langste stakeholdernaam en duwt de
   entry-rij over de exit-kolom heen. Verantwoordelijke deelt wél mee in extra ruimte (bevinding
   #39: stond vast op 118px en bleef afgekapt, ook in een breed getrokken lade) — begrensd met
   max-width zodat hij de omschrijving niet kan wegdrukken. De volledige naam staat ook in de tooltip (title). */
.crit-row .cin{flex:1 1 auto;min-width:0}
.crit-row input[data-cf="tekst"]{flex:2 1 auto}
.crit-row select[data-cf="status"]{flex:0 0 84px;width:84px}
.crit-row select[data-cf="wie"]{flex:1 1 130px;min-width:96px;max-width:260px;text-overflow:ellipsis}
/* Verplaatsknopje: even breed als het prullenbakje, zodat de omschrijving niet inlevert. */
.crit-row .ic.mv{flex:0 0 auto}
.crit-row .ic.del{flex:0 0 auto}
/* Stand van een criterium: dezelfde kleurtaal als de scope-kolommen in het testplan. */
.cr-open{background:var(--mist-400);color:var(--grey-800)}
.cr-voldaan{background:var(--success-100);color:var(--success-700);font-weight:700}
.cr-nvt{background:var(--paper-100);color:var(--text-muted)}
select.cin.cr-voldaan{background:var(--success-100);color:var(--success-700);font-weight:700}
select.cin.cr-nvt{background:var(--paper-100);color:var(--text-muted)}
.crit-grp .btn{align-self:flex-start;margin-top:2px}
@media (max-width:900px){.crit-cols{grid-template-columns:minmax(0,1fr)}}

/* Boomlijnen (milestone → activiteit → sub): lijnen via treeStyle() in app.js */
.row.a .c-naam{padding-left:44px}
.row.a.sub .c-naam{padding-left:66px}
/* Hangt de rij onder een fase, dan springt hij 14 px in, zodat je in één oogopslag ziet
   wat waaronder valt. Dezelfde 14 px staat als TREE.FA in app.js, waar de boomlijnen
   mee opschuiven -- die twee horen gelijk te blijven. */
.row.m.infa .c-naam{padding-left:20px}
.row.a.infa .c-naam{padding-left:58px}
.row.a.infa.sub .c-naam{padding-left:80px}
.row.a.par .chev{position:absolute;left:26px;top:50%;transform:translateY(-50%);width:16px;height:16px;border-radius:4px}
.row.a.par .chev svg{width:12px;height:12px}
/* Meerkeuze activiteittype (knop + uitklaplijst met vinkjes) */
.msel{position:relative}
.msel-b{width:100%;text-align:left;cursor:pointer;display:flex;align-items:center;gap:6px;background:var(--surface-card)}
.msel-b::after{content:"";margin-left:auto;border:4px solid transparent;border-top-color:var(--grey-500);transform:translateY(2px)}
.msel-v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msel-l{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);background:var(--surface-card);border:1px solid var(--border-strong);border-radius:9px;padding:4px;box-shadow:0 10px 30px rgba(0,52,60,.18);max-height:260px;overflow:auto}
.msel-l label{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;font-size:13px;cursor:pointer;text-transform:none;letter-spacing:0;font-weight:500;color:var(--text-body)}
.msel-l label:hover{background:var(--teal-100)}
.msel-l input{width:15px;height:15px;accent-color:var(--cyan-600);margin:0}
/* Testmatrix: koppelknop per vakje + koppelvenster */
.tpm td.ctr button.tact{margin:2px auto 0;border:0;background:none;padding:1px 6px;border-radius:999px;cursor:pointer;font:inherit;font-size:10px;font-weight:800;color:var(--teal-700)}
.tpm td.ctr button.tact:hover,.tpm td.ctr button.tact:focus-visible{background:var(--teal-100);outline:none}
.tpm td.ctr button.tact.empty{opacity:0}
.tpm tr:hover td.ctr button.tact.empty,.tpm td.ctr button.tact.empty:focus-visible{opacity:1}
.tsl.tsl-1{grid-template-columns:minmax(0,1fr);max-height:52vh;overflow:auto}
.tsopt.tsub{padding-left:22px}
.tsopt .tag{margin-left:auto}
/* Testplan-onderdelen (out of scope, test items, assumptions, stakeholders, tooling) */
#tpSect{max-width:1280px}
#tpSect .sect-h{align-items:center}
#tpSect .sect-h .tb-sp{flex:1 1 auto}
.tpt td{vertical-align:middle}
.tpt tr.off .cin:not(select){color:var(--text-muted)}
.tpt .tpnr-h{width:64px}
.cin.tpnr{width:52px;text-align:center}
.tpt .tprefs{white-space:nowrap}
.tpt th.tpk{color:var(--teal-700)}
.tpt th.tpk::after{content:' · eigen';font-size:9px;font-weight:700;color:var(--text-muted);letter-spacing:0}
/* Rustige velden: een invoerveld krijgt pas een kader als je de rij aanwijst of erin werkt.
   Zo leest een testplan-tabel als een lijst in plaats van als een formulierraster. De
   gekleurde prioriteitslijsten houden hun eigen vlak en blijven dus buiten schot. */
.tpt td input.cin,.tpt td select.cin:not([class*=pr-]){border-color:transparent;background:transparent}
.tpt tbody tr:hover td input.cin:not([disabled]),.tpt tbody tr:hover td select.cin:not([class*=pr-]):not([disabled]){border-color:var(--border-subtle);background:var(--white)}
.tpt td input.cin:focus,.tpt td select.cin:focus{border-color:var(--border-strong);background:var(--white)}
.tpt td .cin::placeholder{color:var(--text-muted)}
/* Groepskop per organisatie-eenheid — zelfde pattern als de milestone-kop in Test responsibilities. */
.tpt tr.tps-grp td{background:var(--surface-sand);color:var(--text-strong);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px 7px 14px;box-shadow:inset 3px 0 0 var(--border-accent)}
.tpt tr.tps-grp .tps-gn{margin-left:9px;font-size:10.5px;font-weight:700;color:var(--text-body);letter-spacing:0;text-transform:none}
/* Naamkolom van een stakeholder: initialen ervoor, naam als ankerregel van de rij. */
.tpt .ucell.tpsh{gap:9px;min-width:0}
.tpt .ucell.tpsh .av{width:24px;height:24px;font-size:10px}
.tpt .ucell.tpsh .cin{font-weight:700;color:var(--text-strong);min-width:130px}
.tpt .ucell.tpsh .av-tbd{background:var(--mist-400);color:var(--text-body)}
.tpt .tprefs.leeg{border-color:transparent;background:transparent;color:var(--text-muted);font-weight:600}
.tpt tbody tr:hover .tprefs.leeg:not([disabled]){border-color:var(--border-subtle);background:var(--white);color:var(--text-body)}
/* Testplan-lijsten met zelf in te stellen kolombreedtes: de stakeholderlijst (bevinding #33)
   en test items (bevinding #51). table-layout:fixed houdt elke kolom precies op de breedte
   uit de <colgroup>; de tabel krijgt in app.js een min-width gelijk aan de som daarvan,
   zodat .tcard horizontaal gaat schuiven zodra het geheel niet meer past -- in plaats van
   dat de laatste kolommen buiten de kaart vallen. De velden mogen daarom nergens meer een
   eigen min-breedte afdwingen. */
.tpt-w{table-layout:fixed;width:100%}
.tpt-w th{position:relative;overflow:hidden;text-overflow:ellipsis}
.tpt-w td{overflow:hidden}
.tpt-w .cin{width:100%;min-width:0;max-width:100%}
.tpt-w .ucell{min-width:0}
.tpt-w .ucell .av{flex:0 0 auto}
.tpt-w .ucell.tpsh .cin{flex:1 1 auto;min-width:0}
/* Knoppen in een cel (Kiezen…, een meerkeuzewaarde) houden hun eigen vorm; ze worden door
   de cel afgeknipt in plaats van de kolom open te duwen, want die ligt op zijn breedte vast. */
.tpt-w .tprefs,.tpt-w .tpmk{max-width:100%}
/* Bevinding #53: met veel (eigen) kolommen schuift de verwijderknop buiten beeld. De
   actiekolom (omhoog/omlaag/verwijderen) blijft daarom aan de rechterkant van het
   scrollvlak staan, net als het linkerpaneel bij de strokenplanning. */
.tpt-w th.tpt-acts,.tpt-w td.tpt-acts{position:sticky;right:0;overflow:visible;background:var(--surface-card);z-index:1;box-shadow:-6px 0 6px -6px rgba(0,0,0,.18)}

/* Testplan › Entry & exit criteria (alleen-lezen overzicht per activiteit) */
.tpcrit td{vertical-align:top}
.tpcrit .crit-row{gap:7px}
.tpcrit .crit-tx{font-size:12.5px;color:var(--text-body)}
.tpcrit .crit-tx{flex:1 1 auto}
.tpcrit .crit-tx.done{color:var(--text-muted);text-decoration:line-through}
.tpcrit .crit-tx.nvt{color:var(--text-muted);font-style:italic}
.tpcrit .crit-wie{flex:0 0 auto;font-size:11px;color:var(--text-muted)}
/* Het blok waarbij een criterium hoort (wens #15): een klein, rustig label vóór de tekst.
   Staat er niets, dan hoort het criterium bij de hele regel en is er niets te onderscheiden. */
.tpcrit .crit-blk{flex:0 0 auto;padding:0 6px;border-radius:999px;background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--border-subtle);font-size:10px;font-weight:700;line-height:16px;color:var(--text-muted);white-space:nowrap}
/* Verantwoordelijken van een testsoort (wens #19): dezelfde chips als C en I in de
   RACI-matrix, alleen iets krapper omdat de matrix zelf al compact is. */
.rsp-chip.k-ts{background:var(--cyan-100);color:var(--teal-800)}
.tpm .rsp-chips{gap:2px;flex-wrap:nowrap;min-width:0}
.tpm .rsp-chip{min-width:0}
.tpm .rsp-meer{flex:0 0 auto;font-weight:800}
/* Bevinding #22: +N was tot dusver alleen een titel-tooltip (niet te openen op een
   touchscreen). Nu een knop, dus de UA-standaarden voor border/font resetten net als .rsp-x. */
.rsp-meer{border:0;font:inherit;cursor:pointer}
.rsp-meer:hover,.rsp-meer:focus-visible{background:var(--cyan-200)}
.tpm .rsp-add{width:22px;height:18px;line-height:16px}
.tpcrit .tag{flex:0 0 auto;font-size:10px}
/* Testplan › Test responsibilities als RACI-matrix (v1.38). Rijen = (sub)activiteiten per gate,
   kolommen = R · A · C · I. R/A = keuzelijst (één stakeholder), C/I = chips + "+"-keuzelijst.
   Kop en activiteitkolom plakken binnen .tp-card (die scrollt zelf). */
#tpResp .sect-h{align-items:center}
.tpresp{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.tpresp th,.tpresp td{padding:5px 8px}
.tpresp thead th{position:sticky;top:0;z-index:2;vertical-align:middle}
.tpresp .rsp-act{position:sticky;left:0;z-index:1;background:var(--surface-card);width:30%;min-width:240px;border-right:1px solid var(--border-subtle);padding-left:14px}
.tpresp thead th.rsp-act{z-index:3;background:var(--surface-raised)}
.tpresp th.rsp-h{width:15%;min-width:150px;text-align:left;letter-spacing:0;text-transform:none;font-size:11.5px;font-weight:700;color:var(--text-strong);white-space:nowrap}
.tpresp .rsp-hn{margin-left:6px}
.tpresp .rsp-hv{display:block;margin:2px 0 0 26px;font-size:11px;font-weight:600;color:var(--text-muted)}
.tpresp th.rsp-st,.tpresp td.rsp-st{width:104px;white-space:nowrap;text-align:left}
.tpresp tr.rsp-ms td{background:var(--surface-sand);font-weight:800;color:var(--text-strong);padding:7px 12px}
.tpresp tr.rsp-ms td.rsp-act{box-shadow:inset 3px 0 0 var(--border-accent);padding-left:14px;white-space:nowrap;overflow:visible}
.tpresp .rsp-dt{margin-left:10px;font-weight:600;font-size:11.5px;color:var(--text-muted)}
.tpresp tr.rsp-sub td.rsp-act{padding-left:32px}
.tpresp .rsp-open{border:0;background:none;padding:0;font:inherit;color:var(--text-body);cursor:pointer;text-align:left}
.tpresp tr:not(.rsp-sub) .rsp-open{font-weight:700;color:var(--text-strong)}
.tpresp .rsp-open:hover{color:var(--teal-700);text-decoration:underline}
.tpresp .rsp-test{margin-left:8px;font-size:10px;background:var(--cyan-100);color:var(--teal-800)}
.tpresp .rsp-per{display:block;margin-top:1px;font-size:11px;color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.tpresp td.rsp-c{vertical-align:middle}
/* Letterblokje R/A/C/I: kop, legenda en kleur van de gekozen waarde. */
.rsp-kl{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:4px;font-size:11px;font-weight:800;line-height:1;vertical-align:middle}
.rsp-kl.k-r,.rsp-chip.k-r{background:var(--teal-800);color:var(--white)}
.rsp-kl.k-a,.rsp-chip.k-a{background:var(--cyan-500);color:var(--teal-800)}
.rsp-kl.k-c,.rsp-chip.k-c{background:var(--teal-100);color:var(--teal-700)}
.rsp-kl.k-i,.rsp-chip.k-i{background:var(--surface-raised);color:var(--text-body);box-shadow:inset 0 0 0 1px var(--border-subtle)}
.tpresp select.rsp-sel{width:100%;min-width:0;padding:3px 6px;font-size:12px}
.tpresp select.rsp-sel:not(.on){color:var(--text-muted)}
.tpresp select.rsp-sel.on.k-r{box-shadow:inset 3px 0 0 var(--teal-800)}
.tpresp select.rsp-sel.on.k-a{box-shadow:inset 3px 0 0 var(--cyan-500)}
.rsp-chips{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.rsp-chip{display:inline-flex;align-items:center;gap:2px;max-width:100%;padding:1px 3px 1px 7px;border-radius:999px;font-size:11px;font-weight:700;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rsp-x{border:0;background:none;padding:0 3px;font:inherit;font-size:12px;line-height:1;color:inherit;opacity:.6;cursor:pointer}
.rsp-x:hover{opacity:1}
.rsp-add{width:26px;height:20px;padding:0;border:1px dashed var(--border-strong);border-radius:999px;background:var(--surface-card);font-family:inherit;font-size:12px;font-weight:800;color:var(--text-muted);text-align:center;text-align-last:center;cursor:pointer;appearance:none;-webkit-appearance:none}
.rsp-add:hover,.rsp-add:focus{border-color:var(--border-accent);color:var(--text-strong)}
.tpresp .rsp-ok{background:var(--success-100);color:var(--success-700);font-size:10px}
.tpresp .rsp-open-st{background:var(--warning-100);color:var(--warning-700);font-size:10px}
.rsp-bel{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:8px 14px;border-top:1px solid var(--border-subtle);font-size:12px;color:var(--text-body)}
.rsp-bel b{color:var(--text-strong);font-weight:800}
.rsp-bel em{font-style:normal;color:var(--text-muted);font-variant-numeric:tabular-nums}
.rsp-leg{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:10px 14px;border-top:1px solid var(--border-subtle);font-size:12px;color:var(--text-muted)}
.rsp-leg>span{display:inline-flex;align-items:center;gap:6px}
.rsp-hint{padding:10px 14px;background:var(--warning-100);color:var(--text-strong);font-size:12.5px;border-bottom:1px solid var(--border-subtle)}
/* Takenlijst (bevinding #20): alle taken project-breed, gegroepeerd per milestone —
   zelfde tabelopzet als .tpresp, met een kolom per veld in plaats van RACI-cellen. */
.tptaken{width:100%;border-collapse:separate;border-spacing:0}
/* Compacte regels (wens: "regels compacter en leesbaarder"). Twee dingen doen het werk:
   krappere cellen, en invoervelden die pas een rand en een witte achtergrond krijgen als je
   er met de muis op komt of erin staat. Zonder dat tweede is elke regel een rij losse
   hokjes en moet je de tekst eruit vissen; nu lees je een gewone tabel en zie je pas bij
   aanwijzen dat je hem kunt bewerken. Hetzelfde patroon als de testplanlijsten (.tpt). */
.tptaken th,.tptaken td{padding:2px 7px;vertical-align:middle}
.tptaken thead th{position:sticky;top:0;z-index:2;text-align:left;background:var(--surface-raised);padding:7px 7px}
.tptaken tbody tr{height:28px}
.tptaken tbody tr:hover td{background:var(--teal-050)}
.tptaken tr.tt-ms td{background:var(--surface-sand);font-weight:800;color:var(--text-strong);padding:4px 10px}
.tptaken tr.tt-ms:hover td{background:var(--surface-sand)}
.tptaken td.tt-act{white-space:nowrap}
.tptaken .tt-open{border:0;background:none;padding:0;font:inherit;color:var(--text-body);cursor:pointer;
  text-align:left;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tptaken .tt-open:hover{color:var(--teal-700);text-decoration:underline}
.tptaken td.tt-owner,.tptaken td.tt-due{width:140px}
.tptaken td.tt-status{width:110px}
.tptaken td.tt-del{width:30px;text-align:center}
.tptaken .cin{width:100%;height:24px;padding:0 6px;font-size:12px;border-radius:6px}
.tptaken td input.cin,.tptaken td select.cin{border-color:transparent;background:transparent}
.tptaken tbody tr:hover td input.cin:not([disabled]),
.tptaken tbody tr:hover td select.cin:not([disabled]){border-color:var(--border-subtle);background:var(--white)}
.tptaken td input.cin:focus,.tptaken td select.cin:focus{border-color:var(--border-strong);background:var(--white)}
/* De standkolom houdt zijn kleur ook ongehoverd: dat is de snelste manier om een lijst te
   scannen, en zonder achtergrond zou de kleurcodering juist wegvallen. */
.tptaken td select.cin.tk-s,.tptaken td select.cin.dlv-s{background:var(--white);border-color:var(--border-subtle)}
.tptaken td .cin::placeholder{color:var(--text-muted)}
.tptaken tr.st-klaar .tk-s,.tptaken tr.st-opgeleverd .dlv-s{background:var(--success-100);color:var(--success-700)}
.tptaken tr.st-bezig .tk-s,.tptaken tr.st-bezig .dlv-s{background:var(--cyan-100);color:var(--teal-800)}
.tptaken tr.st-risico .tk-s,.tptaken tr.st-risico .dlv-s{background:var(--warning-100);color:var(--warning-700)}
.tptaken tr.st-vervallen .dlv-s{background:var(--mist-400);color:var(--grey-800)}
.tptaken tr.st-vervallen td.dlv-nm .cin{text-decoration:line-through;color:var(--text-muted)}
/* Deliverables-tabel: dezelfde regelhoogte als de acties, maar met een naamkolom die
   mag groeien en een smalle tellerkolom achteraan. */
.tpdlv td.dlv-nm,.tpdlv th.dlv-nm{min-width:180px}
.tpdlv td.dlv-ms{white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.tpdlv td.dlv-cnt-c{width:58px;text-align:center}
.tpdlv td.dlv-blk,.tpdlv th.dlv-blk{width:140px}
.tpdlv td.dlv-blk .mut{font-size:12px}
/* ===== Selecteren + dupliceren op de twee lijsten =====
   Het vinkje staat IN de eerste kolom (naast de naam resp. de activiteit) en niet in een
   eigen kolom: de kolombreedtes van deze tabellen worden per kolom bewaard, en een kolom
   van 20px zou daar een volwaardige kolom worden. Vandaar een flexlaagje in de cel. */
.tptaken .pickw{display:flex;align-items:center;gap:7px;min-width:0}
.tptaken .pickw>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pickb{flex:0 0 auto;width:15px;height:15px;margin:0;accent-color:var(--cyan-600);cursor:pointer}
/* De kopvink staat gedempt zolang hij niets doet, maar nooit voor wie er met het
   toetsenbord op staat -- anders is niet te zien waar de focus is. */
.tptaken thead .pickb{opacity:.7}
.tptaken thead:hover .pickb,.tptaken thead .pickb:focus-visible,
.tptaken thead .pickb:checked,.tptaken thead .pickb:indeterminate{opacity:1}
/* De balk met "n geselecteerd" + de twee knoppen. Op de Deliverables-tab staat hij alleen;
   op de Acties-tab schuift hij links van de filterchip en de weergaveschakelaar. */
.selbar{border-bottom:1px solid var(--border-subtle);padding-bottom:8px}
.selbar-sp{width:6px;flex:0 0 auto}
.sel-n{font-size:11.5px;font-weight:800;color:var(--text-muted);min-width:96px}
.dlv-bar .btn-sm{padding:4px 11px;font-size:11.5px}
/* De twee vinklijsten van een dupliceervenster delen één venster, dus ze krijgen allebei
   een eigen plafond — met tweemaal de standaard 52vh past het geheel niet op het scherm en
   verdwijnen de keuzes eronder (toevoegen/vervangen) onder de rand. */
#dupSList{max-height:20vh}
#dupAList{max-height:34vh}
/* Fasekop in de doellijst van een dupliceervenster: zelfde streep als op de lijst zelf. */
.cp-fa{margin:8px 0 0;padding:3px 0 3px 8px;border-left:4px solid var(--fa,var(--border-subtle));
  font-size:11.5px;font-weight:800;color:var(--text-strong)}
.cp-fa+.critcp-kop{padding-top:2px}
/* Fasekop boven een groep deliverables: dezelfde sandkleur als de milestone-kop, met de
   fasekleur als streep ervoor. Zonder fase blijft de streep weg (geen --fa gezet). */
.tptaken tr.dlv-fa td,.tptaken tr.dlv-gr td{border-left:4px solid var(--fa,transparent)}
.tptaken tr.dlv-gr td{background:var(--mist-200);font-weight:600;color:var(--text-body)}
.tptaken tr.dlv-gr b{color:var(--text-strong)}
.tptaken tr.dlv-los td{background:var(--paper-100)}
.dlv-gcnt{float:right;border-radius:999px;background:var(--white);border:1px solid var(--border-subtle);
  font-size:10.5px;font-weight:800;padding:1px 7px;color:var(--text-muted)}
.tptaken td.tt-dlv{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-dlvb{text-decoration:none}
.tt-dlvb:hover{color:var(--text-strong);text-decoration:underline}
/* Een deadline die voorbij is terwijl er nog geleverd moet worden. */
.dlv-late .cin,.cin.dlv-late{border-color:var(--danger-500);color:var(--danger-600)}
.dlv-late-t{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;color:var(--danger-600)}
/* Teller die doorklikt naar de acties. */
.dlv-cnt{border:1px solid var(--border-subtle);border-radius:999px;background:var(--white);
  font:inherit;font-size:11px;font-weight:800;color:var(--text-muted);padding:1px 8px;cursor:pointer}
.dlv-cnt:hover{border-color:var(--cyan-500);color:var(--text-strong)}
/* Balk boven de actielijst: filterchip links, weergaveschakelaar rechts. */
.dlv-bar{display:flex;align-items:center;gap:10px;padding:8px 14px 0;flex-wrap:wrap}
.dlv-bar .spacer{flex:1 1 auto}
.dlv-chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 4px 0 10px;
  border-radius:999px;background:var(--cyan-100);color:var(--teal-800);font-size:11.5px;font-weight:700}
.dlv-chip .ic svg{width:12px;height:12px}
.seg-sm label span{padding:3px 10px;font-size:11.5px}
/* De twee filters en het zoekveld in de sectiekop. */
.dlv-f{flex:0 0 auto;max-width:170px}
.dlv-q{flex:0 1 200px;min-width:120px}
.tt-newbar{display:flex;align-items:center;gap:8px;margin-top:10px;padding:10px 14px;border-top:1px solid var(--border-subtle);flex-wrap:wrap}
.tt-newbar select{flex:0 1 220px;min-width:0}
.tt-newbar input{flex:1 1 220px;min-width:0}
select.cin.pr-priority,.tag.pr-priority{background:var(--danger-100);color:var(--danger-600);font-weight:700}
select.cin.pr-mvp,.tag.pr-mvp{background:var(--success-100);color:var(--success-700);font-weight:700}
select.cin.pr-nice,.tag.pr-nice{background:var(--cyan-100);color:var(--teal-800);font-weight:700}
select.cin.pr-out,.tag.pr-out{background:var(--mist-400);color:var(--grey-800);font-weight:700}
.tbl td.empty-row{padding:22px 12px;font-style:italic}
/* Zwevende balk: "Sleep in planning" als klein label boven de knoppen */
#palWrap{gap:6px}
/* Testmatrix: kolommen = testactiviteiten, gegroepeerd per milestone */
.tpm .msh .msd+.msd{margin-top:0}
.tpm th[data-act]{cursor:pointer}
.tpm th[data-act]:hover .msn{color:var(--teal-700);text-decoration:underline}
.tpm th.msfirst,.tpm td.msfirst{border-left:1px solid var(--border-subtle)}
.tp-empty{padding:12px 14px;border-bottom:1px solid var(--border-subtle)}

/* Testmatrix: in één beeld, zonder scrollen.
   Basis = compacte rijen; past het dan nog niet, dan zet fitMatrix() in app.js
   stapsgewijs fit1 → fit3 aan (kopdatums weg, omschrijving weg, alles krapper).
   De omschrijving blijft altijd leesbaar als tooltip op de rij. */
.tpm th{padding:7px 8px;line-height:1.2}
.tpm td{padding:6px 8px}
.tpm td.stick .t-main{line-height:1.2}
.tpm td.stick .sub{display:block;margin-top:1px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpm .cin{padding:4px 6px;font-size:12px}
.tpm .msn{line-height:1.2}
.tpm.fit1 td{padding:4px 6px}
.tpm.fit1 .msdate{display:none}
.tpm.fit2 td.stick .sub{display:none}
/* Compacter maken mag een kolom die jij hebt ingesteld niet terugduwen: dezelfde var,
   alleen een krappere fallback voor de kolommen die nog automatisch zijn. */
.tpm.fit2 [data-c="soort"]{min-width:var(--w-soort,170px);max-width:var(--w-soort,220px)}
.tpm.fit2 [data-c="rat"]{min-width:var(--w-rat,110px);max-width:var(--w-rat,180px)}
.tpm.fit3{font-size:12px}
.tpm.fit3 th{padding:5px 5px}
.tpm.fit3 td{padding:2px 5px}
.tpm.fit3 .cin{padding:2px 4px;font-size:11.5px}
.tpm.fit3 td.ctr input{width:15px;height:15px}
.tpm.fit3 .msn{-webkit-line-clamp:1}
.tpm.fit3 .msh{min-width:62px;max-width:92px}
/* Net als bij fit2: een breedte die je zelf hebt gezet wint ook in de krapste stand.
   Zonder de var kapte fit3 een zelf gesleepte kolom terug naar 140/200 px. */
.tpm.fit3 .stick{min-width:var(--w-soort,150px);max-width:var(--w-soort,200px)}
.tpm.fit3 .rat{min-width:var(--w-rat,84px);max-width:var(--w-rat,140px)}
/* fit4 = de laatste stap: de onderbouwing blijft op een regel staan zodat de hele matrix
   in een beeld past. Klik je in het veld, dan klapt het alsnog open over de rij heen -- de
   tekst blijft dus bereikbaar, alleen niet meer allemaal tegelijk. */
/* Heb je de kolom Onderbouwing zelf breder gesleept, dan heb je die ruimte bewust
   gevraagd: dan blijft het veld meegroeien en klemt fit4 hem niet af (zie taFit). */
.tpm.fit4 textarea.ta{min-height:0;height:22px;overflow:hidden}
.tpm.fit4 textarea.ta:focus{min-height:30px;max-height:132px;overflow:auto;position:relative;z-index:3;box-shadow:0 2px 10px rgba(0,0,0,.18)}

/* --- Feestdagen in de lijst: aantal met de namen in de tooltip --- */
.c .feest{cursor:help;font-weight:700;color:var(--warning-700);background:var(--warning-100);border-radius:999px;padding:0 7px}
.c .feest:hover{color:var(--text-strong)}

/* --- Exportvenster: lijst met milestones en activiteiten --- */
#expList{max-height:38vh}
#expN{margin-left:auto;white-space:nowrap}

/* ================= Wensen & bevindingen over de app =================
   Eigen module (#pg-appfb): lijst, scrumboard en het detailvenster met gesprek.
   Alle kleuren komen uit de tokens bovenaan; geen losse hex-waarden. */

/* Status- en prioriteitsmerkjes */
.fbs-nieuw{background:var(--violet-100);color:var(--violet-700)}
.fbs-analyse{background:var(--cyan-100);color:var(--teal-800)}
.fbs-bezig{background:var(--cyan-500);color:var(--teal-900)}
.fbs-wacht{background:var(--warning-100);color:var(--warning-700)}
.fbs-goed{background:var(--success-100);color:var(--success-700)}
.fbs-pauze{background:var(--sand-400);color:var(--grey-800)}
.fbs-jan{background:var(--teal-800);color:var(--linen-400)}
.fbs-klaar{background:var(--success-500);color:var(--white)}
.fbs-afgewezen{background:var(--danger-100);color:var(--danger-600)}
.fbp-hoog{background:var(--danger-100);color:var(--danger-600)}
.fbp-middel{background:var(--warning-100);color:var(--warning-700)}
.fbp-laag{background:var(--mist-400);color:var(--grey-800)}

/* Scrumboard */
.fbboard{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;padding-bottom:8px}
.fbcol{flex:0 0 268px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:14px;display:flex;flex-direction:column;max-height:calc(100vh - 230px)}
.fbcol-h{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--border-subtle);font-size:12.5px;font-weight:800;color:var(--text-strong)}
.fbcol-n{margin-left:auto;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:999px;padding:1px 8px;font-size:11px;color:var(--text-muted)}
.fbcol-b{display:flex;flex-direction:column;gap:8px;padding:10px;overflow-y:auto}
.fbcol-leeg{color:var(--text-subtle);font-size:12px;text-align:center;padding:10px 0}
.fbcard{display:flex;flex-direction:column;gap:7px;text-align:left;width:100%;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:11px;padding:10px 11px;cursor:pointer;font:inherit;color:inherit}
.fbcard:hover{border-color:var(--border-accent);background:var(--cyan-100)}
.fbcard:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.fbcard-top{display:flex;align-items:center;gap:8px}
.fbcard-top .nr{font-size:11px;font-weight:800;color:var(--text-muted);letter-spacing:.2px}
.fbcard-t{font-size:13px;font-weight:700;color:var(--text-strong);line-height:1.35}
.fbcard-b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px}

/* Detailvenster */
.fbmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.fbmeta .mut{font-size:12.5px}

/* ---- FASEBALK (fbPhaseBarHtml in app.js) --------------------------------
   Waarom een eigen CSS-blok en geen inline stijlen zoals de rest van dit scherm:
   de balk heeft verbindingslijnen (::before), een container query en twee
   animaties. Dat kan met een style-attribuut niet.

   Kleur draagt nooit alleen de betekenis (WCAG 1.4.1): afgerond = vinkje,
   actief = punt met ring + "NU", nog niet = cijfer, gestopt = kruis. Cyaan
   (--brand-accent) haalt op wit maar 2,1:1 en wordt hier dus uitsluitend als
   ring, rand of lijn gebruikt, nooit als tekst. */
.fb{container:fb / inline-size;margin:0 0 18px;padding:12px 14px 10px;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:11px;display:flex;flex-direction:column;gap:10px}
/* Tekst die alleen voor schermlezers bestaat; de ziende gebruiker leest de vorm. */
.fb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fb-top{display:flex;align-items:flex-start;gap:8px}
.fb-track{flex:1;min-width:0}
.fb-compact{display:none;margin:0 0 8px;font-size:11.5px;line-height:1.4;color:var(--text-muted)}
.fb-compact b{color:var(--text-strong);font-weight:800}

/* De stepper */
.fb-steps{list-style:none;margin:0;padding:0;display:flex}
.fb-step{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.fb-step + .fb-step::before{content:"";position:absolute;top:10px;left:-50%;right:50%;border-top:2px solid var(--teal-500)}
.fb-step.is-todo::before{border-top-style:dashed;border-top-color:var(--border-strong)}
/* Na een afgebroken traject is er geen lijn meer: er komt niets meer. */
.fb-step.is-void::before{display:none}
.fb-node{position:relative;z-index:1;box-sizing:border-box;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-card);border:1.5px solid var(--text-muted);color:var(--text-muted);font-size:10.5px;font-weight:800;line-height:1}
.fb-node svg{width:12px;height:12px;display:block}
.fb-dot{width:8px;height:8px;border-radius:50%;background:var(--surface-card)}
.is-done .fb-node{background:var(--teal-500);border-color:var(--teal-500);color:var(--surface-card)}
.is-final .fb-node{background:var(--success-500);border-color:var(--success-500);color:var(--surface-card)}
.is-current .fb-node,.is-busy .fb-node{background:var(--teal-700);border-color:var(--teal-700);box-shadow:0 0 0 3px var(--surface-raised),0 0 0 5px var(--brand-accent)}
.is-busy .fb-node{animation:fb-pulse 1.6s ease-out infinite}
.is-paused .fb-node{border:2px solid var(--warning-700);color:var(--warning-700);box-shadow:0 0 0 3px var(--surface-raised),0 0 0 5px var(--warning-500)}
.is-handover .fb-node{background:var(--violet-700);border-color:var(--violet-700);color:var(--surface-card);box-shadow:0 0 0 3px var(--surface-raised),0 0 0 5px var(--violet-100)}
.is-broken .fb-node{background:var(--danger-100);border:2px solid var(--danger-600);color:var(--danger-600)}
.is-void .fb-node{border:1.5px dashed var(--border-strong);background:transparent}
.fb-label{margin-top:7px;padding:0 2px;font-size:11.5px;line-height:1.3;font-weight:600;color:var(--text-muted);text-wrap:balance}
.is-done .fb-label{color:var(--text-body)}
.is-current .fb-label,.is-busy .fb-label,.is-paused .fb-label,.is-handover .fb-label,.is-broken .fb-label,.is-final .fb-label{color:var(--text-strong);font-weight:800}
.fb-sub{margin-top:1px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-eyebrow)}
/* De datum waarop een fase bereikt is (Bugs & changes, wbPhaseBarHtml). Bewust NIET de
   opmaak van .fb-sub: dat is een kopje ("NU") en een datum is een gegeven — in kapitalen
   met letterspatiëring zou hij zwaarder wegen dan de fasenaam erboven. */
.fb-when{margin-top:2px;font-size:10.5px;line-height:1.3;color:var(--text-muted);font-variant-numeric:tabular-nums}
.is-final .fb-sub{color:var(--success-700)}
.is-paused .fb-sub{color:var(--warning-700)}
.is-handover .fb-sub{color:var(--violet-700)}
.is-broken .fb-sub{color:var(--danger-600)}

/* Het uitlegvenster achter het ? */
.fb-help{flex:none;box-sizing:border-box;width:24px;height:24px;padding:0;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface-card);color:var(--teal-800);font:800 12px/1 inherit;cursor:pointer;display:flex;align-items:center;justify-content:center}
.fb-help:hover{border-color:var(--border-accent);background:var(--cyan-100)}
.fb-help[aria-expanded="true"]{border-color:var(--teal-800);background:var(--cyan-100)}
.fb-help:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.fb-helppanel{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.5;color:var(--text-body)}
.fb-helppanel[hidden]{display:none}
.fb-eyebrow{margin:0;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-eyebrow)}
.fb-helplist{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.fb-helplist li{display:flex;gap:8px;align-items:flex-start}
.fb-helpnum{flex:none;box-sizing:border-box;width:18px;height:18px;margin-top:1px;border-radius:50%;border:1.5px solid var(--text-muted);color:var(--text-muted);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
.fb-helplist b{color:var(--text-strong);font-weight:800}
.fb-helpst{color:var(--text-muted);font-size:11.5px}
.fb-helpfoot{margin:8px 0 9px;font-size:11.5px;color:var(--text-muted)}

/* Regel 2: wat is de stand, en wie is aan zet */
.fb-now{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 16px;border-radius:8px}
/* Ben JIJ aan zet, dan wordt de hele regel een vlak met cyaan rand: het sterkste
   signaal op de kaart, zonder alarmkleur — er is niets stuk, er wordt iets gevraagd. */
.fb--you .fb-now{background:var(--cyan-100);padding:9px 10px;box-shadow:inset 0 0 0 1px var(--border-accent)}
/* --text-eyebrow (teal-500) haalt op dit cyan-100-vlak te weinig voor een kop van
   11px; binnen het vlak dus één stap donkerder uit dezelfde teal-familie. */
.fb--you .fb-eyebrow{color:var(--teal-600)}
.fb-msg{flex:1 1 280px;min-width:0;margin:0;font-size:13px;line-height:1.55;color:var(--text-body);text-wrap:pretty}
.fb-status{font-weight:800;color:var(--text-strong)}
.fb-turnbox{flex:none;max-width:100%;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.fb-turn{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;border:1px solid transparent;font-size:12.5px;font-weight:800;line-height:1.35}
.fb-turn svg{width:13px;height:13px;flex:none;display:block}
.fb-turn--you{background:var(--teal-700);color:var(--surface-card);font-size:13px;padding:5px 13px}
.fb-turn--busy{background:var(--surface-card);border-color:var(--border-subtle);color:var(--text-strong)}
.fb-turn--waiting{background:var(--surface-card);border-color:var(--border-strong);color:var(--text-body);font-weight:700}
.fb-turn--human{background:var(--violet-100);color:var(--violet-700)}
.fb-turn--passive,.fb-turn--done,.fb-turn--closed{padding-left:0;padding-right:0}
.fb-turn--passive{color:var(--text-muted);font-weight:600}
.fb-turn--done{color:var(--success-700)}
.fb-turn--closed{color:var(--text-muted);font-weight:700}
.fb-turnmeta{font-size:11.5px;line-height:1.4;color:var(--text-muted);text-align:right}
.fb-spin{box-sizing:border-box;width:11px;height:11px;flex:none;border-radius:50%;border:2px solid var(--cyan-100);border-top-color:var(--teal-800);animation:fb-spin .9s linear infinite}

/* Regel 3: wanneer gemeld, en waar staat de fix */
.fb-env{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding-top:8px;border-top:1px solid var(--border-subtle);font-size:11.5px;line-height:1.5;color:var(--text-muted)}
.fb-envitem{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fb-envval{font-weight:800;color:var(--text-strong)}
/* Open bol = nog niets uitgerold, volle bol = live. Ook zonder kleur te zien. */
.fb-deploy{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--text-body)}
.fb-deploy::before{content:"";box-sizing:border-box;width:9px;height:9px;flex:none;border-radius:50%;border:1.5px solid var(--text-muted)}
.fb-deploy--live{color:var(--success-700);font-weight:800}
.fb-deploy--live::before{border-color:var(--success-500);background:var(--success-500)}

/* Vijf stipjes vóór de titel in de lijst (fbMiniStepper) */
.fbmini{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;margin-right:7px;vertical-align:middle}
.fbmini > span[aria-hidden]{box-sizing:border-box;width:6px;height:6px;border-radius:50%;border:1px solid transparent}

@keyframes fb-pulse{
  0%{box-shadow:0 0 0 3px var(--surface-raised),0 0 0 5px var(--brand-accent)}
  70%{box-shadow:0 0 0 3px var(--surface-raised),0 0 0 10px transparent}
  100%{box-shadow:0 0 0 3px var(--surface-raised),0 0 0 5px var(--brand-accent)}
}
@keyframes fb-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.is-busy .fb-node,.fb-spin{animation:none}}

/* Compacte stand op de KAARTbreedte (container query), niet op de schermbreedte: de
   balk zit in een venster dat zelf al smaller kan zijn dan het scherm. De labels
   vallen weg, er blijft een stippenrij met "Fase 3 van 5 · Afstemming" boven. */
@container fb (max-width:520px){
  .fb-compact{display:block}
  .fb-label,.fb-sub{display:none}
  .fb-node{width:14px;height:14px;font-size:0}
  .fb-node svg{width:9px;height:9px}
  .fb-dot{width:4px;height:4px}
  .fb-step + .fb-step::before{top:6px}
  .is-current .fb-node,.is-busy .fb-node{box-shadow:0 0 0 2px var(--surface-raised),0 0 0 4px var(--brand-accent)}
  .fb-now{flex-direction:column}
  .fb-msg{flex-basis:auto}
  .fb-turnbox{align-items:flex-start}
  .fb-turnmeta{text-align:left}
  .fb-env{flex-direction:column}
}
.fbsec{margin:0 0 20px}
.fbsec h3{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--text-eyebrow)}
.fbbody{white-space:pre-wrap;line-height:1.55;font-size:13.5px;color:var(--text-body);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:11px;padding:13px 14px}
.fbacts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.fbacts .sp{flex:1}
.fbchoices{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.fbrate{display:inline-flex;gap:5px}

/* Blok dat om een reactie van de melder vraagt: opvallend, maar niet alarmerend */
.fbdoen{border:1px solid var(--border-accent);border-radius:14px;padding:15px 16px;background:var(--cyan-100)}
.fbdoen h3{color:var(--teal-700)}
.fbdoen .fbbody{background:var(--white)}
.fbdoen textarea{margin-top:12px}
.fbadmin{border-top:1px solid var(--border-subtle);padding-top:16px}

/* Gesprek & historie */
.fbthread{display:flex;flex-direction:column;gap:9px;max-height:360px;overflow-y:auto;padding-right:4px}
.fbev{border:1px solid var(--border-subtle);border-left:3px solid var(--border-strong);border-radius:10px;padding:9px 12px;background:var(--surface-card)}
.fbev.a-claude{border-left-color:var(--cyan-500);background:var(--teal-050)}
.fbev.a-indiener{border-left-color:var(--teal-500)}
.fbev.a-beheer{border-left-color:var(--violet-700)}
.fbev.a-systeem{border-left-color:var(--grey-400);background:var(--surface-raised)}
.fbev-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12px;margin-bottom:4px}
.fbev-k{background:var(--mist-400);color:var(--grey-800);border-radius:999px;padding:1px 8px;font-size:10.5px;font-weight:800}
.fbev-t{margin-left:auto;font-size:11.5px}
.fbev-b{white-space:pre-wrap;font-size:13px;line-height:1.5;color:var(--text-body)}

/* Beeldvoorbeelden en bijlagen */
.fbshots{display:flex;gap:12px;flex-wrap:wrap}
.fbshots figure{margin:0;max-width:280px}
.fbshots img{max-width:280px;max-height:200px;border-radius:10px;border:1px solid var(--border-subtle);display:block}
.fbshots figcaption{font-size:11.5px;color:var(--text-muted);margin-top:5px;line-height:1.35}

/* Deeltaken */
.fbtasks{display:flex;flex-direction:column;gap:6px}
.fbtask{display:flex;align-items:center;gap:9px;font-size:13px;border:1px solid var(--border-subtle);border-radius:9px;padding:7px 10px;background:var(--surface-card)}
.fbtask .fbtask-t{flex:1}
.fbtask.s-done .fbtask-t{text-decoration:line-through;color:var(--text-muted)}
.fbtask.s-blocked{border-color:var(--danger-500)}
.fbtask .mut{font-size:11.5px}
.fbdot{width:9px;height:9px;border-radius:50%;background:var(--border-strong);flex:0 0 auto}
.fbtask.s-done .fbdot{background:var(--success-500)}
.fbtask.s-in-progress .fbdot{background:var(--cyan-500)}
/* Deeltaken van een bug/change gebruiken de taakstatussen van deze app (TSTAT:
   open/bezig/risico/klaar) en niet de todo/done van #appfb. */
.fbtask.s-klaar .fbtask-t{text-decoration:line-through;color:var(--text-muted)}
.fbtask.s-klaar .fbdot{background:var(--success-500)}
.fbtask.s-bezig .fbdot{background:var(--cyan-500)}
.fbtask.s-risico{border-color:var(--danger-500)}
.fbtask.s-risico .fbdot{background:var(--danger-500)}
.fbtask-add{display:flex;gap:8px;margin-top:4px}
.fbtask-add .inp{flex:1}

/* ================= Testplan › Proces- & systeemdesign =================
   Drie kolommen: platen + vormen links, canvas midden, eigenschappen rechts.
   Alle kleuren komen uit de tokens; het canvas zelf is wit met een rasterpatroon. */
.dsg{display:grid;grid-template-columns:230px minmax(0,1fr) 300px;gap:14px;align-items:start}
/* Rechterkolom ingeklapt (bevinding #67): de kolom krimpt tot een smalle rail, zodat de
   tekening er ~280px breder van wordt maar je blijft zien dat er een paneel achter zit. */
.dsg.props-dicht{grid-template-columns:230px minmax(0,1fr) 34px}
.dsg-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.dsg-box{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.dsg-box .note{margin:0}
.dsg-kop2{margin-top:6px}
.dsg-list{display:flex;flex-direction:column;gap:2px}
.dsg-list .note{padding:2px 2px 4px}
.dsg-item{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:7px 9px;border-radius:8px;font:inherit;font-size:12.5px;font-weight:700;color:var(--text-body);cursor:pointer;text-align:left}
.dsg-item:hover{background:var(--teal-050)}
.dsg-item.on{background:var(--teal-100);color:var(--text-strong);box-shadow:inset 2px 0 0 var(--cyan-500)}
.dsg-item .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsg-item .cov{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--text-muted);font-variant-numeric:tabular-nums}
.dsg-add{border:1px dashed var(--border-strong);background:none;border-radius:8px;padding:6px 8px;font:inherit;font-size:12px;font-weight:800;color:var(--text-muted);cursor:pointer}
.dsg-add:hover{border-color:var(--cyan-500);color:var(--text-strong)}
.dsg-stencils{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dsg-st{display:flex;flex-direction:column;align-items:center;gap:3px;border:1px solid var(--border-subtle);border-radius:10px;padding:8px 4px;background:var(--surface-raised);font-size:11px;font-weight:700;color:var(--text-body);text-align:center;cursor:grab;user-select:none;line-height:1.2}
.dsg-st:hover{border-color:var(--cyan-500);background:var(--teal-050);color:var(--text-strong)}

/* Canvas */
.dsg-main{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:14px;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.dsg-bar{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--border-subtle);flex-wrap:wrap;min-height:44px}
.dsg-bar .nm{font-size:15px;font-weight:800;color:var(--text-strong)}
.dsg-bar .btn.on{background:var(--teal-100);border-color:var(--cyan-500);color:var(--text-strong)}
.dsg-kind{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--teal-100);color:var(--teal-700);border-radius:999px;padding:3px 9px}
/* Stand van de plaat (v42): zelfde vorm als .dsg-kind, maar met een eigen kleur per stand —
   concept is bewust het opvallendste, want dat betekent "hier is nog niets besloten". */
.dsg-status{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:3px 9px}
.dsg-status.s-concept{background:var(--warning-100);color:var(--warning-700);box-shadow:inset 0 0 0 1px var(--warning-500)}
.dsg-status.s-review{background:var(--cyan-100);color:var(--teal-700);box-shadow:inset 0 0 0 1px var(--cyan-600)}
.dsg-status.s-vastgesteld{background:var(--success-100);color:var(--success-700)}
.dsg-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--grey-400)}
.dsg-dot.s-concept{background:var(--warning-500)}
.dsg-dot.s-review{background:var(--cyan-600)}
.dsg-dot.s-vastgesteld{background:var(--success-500)}
/* Tekst en uitleg boven het canvas. max-height + overflow zodat een lange uitleg de
   tekening niet van het scherm duwt; de regeleindes van de alinea's blijven staan. */
/* Tekst en uitleg staat in een venster achter de knop Uitleg; boven de plaat zou het hoogte
   kosten die je op een tekening juist nodig hebt. */
.dsg-note-ta{min-height:220px;resize:vertical;font-family:inherit;line-height:1.55}
.dsg-note-tx{white-space:pre-line;font-size:13px;line-height:1.6;color:var(--text-body)}
.dsg-dot.on{width:7px;height:7px;border-radius:50%;background:var(--cyan-600);margin-left:2px}
.dsg-uitleg{min-height:96px;resize:vertical;line-height:1.5}
.dsg-zoom{display:inline-flex;align-items:center;border:1px solid var(--border-strong);border-radius:999px;background:var(--white);overflow:hidden}
.dsg-zoom button{border:0;background:none;padding:5px 10px;font:inherit;font-weight:800;color:var(--text-muted);cursor:pointer}
.dsg-zoom button:hover{color:var(--text-strong);background:var(--teal-050)}
.dsg-zoom>span{min-width:46px;text-align:center;font-size:11.5px;font-weight:800;color:var(--text-strong);font-variant-numeric:tabular-nums}
/* Rechthoek-selectie | met de hand scrollen (bevinding #61) — twee opties voor een sleep op
   een leeg stuk plaat, zelfde segmented control als elders (shView, dfView). */
.dsg-tool button{display:flex;align-items:center;justify-content:center;padding:5px 9px}
.dsg-tool svg{width:14px;height:14px;display:block}
.dsg-danger{color:var(--danger-600)}
.dsg-danger:hover{border-color:var(--danger-600);color:var(--danger-600)}
.dsg-scroll{overflow:auto;background:var(--linen-500);min-height:420px;max-height:calc(100vh - 280px)}
.dsg-scroll.tool-hand{cursor:grab}
.dsg-scroll.tool-hand:active{cursor:grabbing}
.dsg-sizer{position:relative}
.dsg-canvas{position:absolute;left:0;top:0;transform-origin:0 0;background:var(--white)}
.dsg-canvas.raster{background-image:radial-gradient(var(--mist-400) 1px,transparent 1px);background-size:20px 20px}
/* Draagt de tekening op zijn echte coördinaten, met de marge (bevinding #62) als ruimte
   rondom op #dsg-canvas zelf -- zie dSize()/dMargin() in app.js. */
.dsg-inner{position:absolute}
.dsg-lane{position:absolute;left:0;right:0;border-bottom:1px solid var(--border-subtle)}
.dsg-lane.alt{background:rgba(0,37,43,.025)}
.dsg-lane>.nm{position:absolute;left:0;top:0;bottom:0;width:30px;border-right:1px solid var(--border-subtle);background:var(--surface-raised);display:grid;place-items:center;overflow:hidden}
.dsg-lane>.nm span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.dsg-svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.dsg-svg .dsg-hitp{pointer-events:stroke;cursor:pointer}
.dsg-svg .dsg-ehandle{pointer-events:all;fill:var(--cyan-500);stroke:var(--white);stroke-width:2;cursor:crosshair}
/* Knik van een geselecteerde lijn: een vierkantje dat je in beide richtingen versleept, dus
   beide stukken van de knik bewegen mee. Het vorkpunt van een vertakking staat op zijn kant
   (een ruitje), want dat trekt de hele romp mee in plaats van één lijn. */
/* Greep midden op een lijndeel: je schuift het deel loodrecht op zichzelf op, dus hij ligt in de
   lengterichting van dat deel. */
.dsg-svg .dsg-seghandle{pointer-events:all;fill:var(--white);stroke:var(--cyan-600);stroke-width:2}
.dsg-svg .dsg-seghandle:hover{fill:var(--cyan-100)}
.dsg-svg .dsg-bhandle{pointer-events:all;fill:var(--white);stroke:var(--cyan-600);stroke-width:2;cursor:move}
.dsg-svg .dsg-bhandle.fork{fill:var(--cyan-600);stroke:var(--white);transform-box:fill-box;transform-origin:center;transform:rotate(45deg)}
.dsg-node{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center;border-radius:10px;font-size:12px;font-weight:700;line-height:1.2;color:var(--text-strong);cursor:grab;user-select:none;overflow:hidden}
.dsg-node .lb{overflow:hidden;text-overflow:ellipsis;max-width:100%}
.dsg-node .sub{font-size:10px;font-weight:700;letter-spacing:.02em;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;max-width:100%}
.dsg-node.t-einde{color:var(--white)}
.dsg-node.t-einde .sub{color:rgba(255,255,255,.75)}
.dsg-node.t-tekstvak{font-weight:400}
.dsg-node.t-tekstvak .sub{font-weight:400}
/* Highlight-vak (bevinding #66): label in de hoek i.p.v. gecentreerd, zodat de naam van de
   groep leesbaar blijft ook als andere vormen er middenin overheen liggen. */
.dsg-node.t-highlight{align-items:flex-start;justify-content:flex-start;text-align:left}
.dsg-node.t-highlight .sub{font-weight:400}
.dsg-node.sel{outline:2px solid var(--cyan-500);outline-offset:4px;overflow:visible}
.dsg-node.unc{outline:2px dashed var(--warning-500);outline-offset:4px;background:rgba(224,161,58,.07)}
.dsg-node.ok{outline:2px solid rgba(38,168,196,.35);outline-offset:4px}
.dsg-node.sel.unc,.dsg-node.sel.ok{outline:2px solid var(--cyan-500)}
.dsg-badge{position:absolute;top:-9px;right:-8px;background:var(--teal-700);color:var(--white);border-radius:999px;font-size:9.5px;font-weight:800;padding:2px 6px;white-space:nowrap}
.dsg-node.sel .dsg-badge{top:-10px}
/* Vier verbind-handvatten, een per zijde: welk je pakt, bepaalt uit welke zijde de nieuwe
   pijl vertrekt. Ze liggen buiten de vorm, zodat ze de inhoud niet bedekken. */
.dsg-handle{position:absolute;width:20px;height:20px;border-radius:50%;background:var(--cyan-500);color:var(--teal-800);display:grid;place-items:center;font-size:12px;font-weight:800;cursor:crosshair;box-shadow:0 1px 4px rgba(0,37,43,.3)}
.dsg-handle.h-r{right:-26px;top:50%;margin-top:-10px}
.dsg-handle.h-l{left:-26px;top:50%;margin-top:-10px}
.dsg-handle.h-t{top:-26px;left:50%;margin-left:-10px}
.dsg-handle.h-b{bottom:-26px;left:50%;margin-left:-10px}
/* Knooppunt (het tussenpunt van een gesplitste pijl): het vak eromheen is onzichtbaar, alleen
   de stip uit dShape() telt. Een naam zou er niet in passen en hoort er ook niet. */
.dsg-node.t-knooppunt{background:none;font-size:0;cursor:grab}
.dsg-node.t-knooppunt .lb,.dsg-node.t-knooppunt .sub{display:none}
.dsg-rzhandle{position:absolute;right:-6px;bottom:-6px;width:14px;height:14px;border-radius:3px;background:var(--cyan-500);border:2px solid var(--white);cursor:nwse-resize;box-shadow:0 1px 4px rgba(0,37,43,.3)}
.dsg-ghost{position:fixed;z-index:60;pointer-events:none;display:flex;align-items:center;gap:6px;border:2px dashed var(--cyan-500);background:var(--teal-050);border-radius:10px;padding:6px 12px;font-size:12px;font-weight:800;color:var(--text-strong)}
.dsg-selbox{position:absolute;z-index:5;border:1.5px solid var(--cyan-500);background:color-mix(in srgb,var(--cyan-200) 35%,transparent);border-radius:2px;pointer-events:none}
body.dsg-linking .dsg-node{cursor:crosshair}

/* Eigenschappen rechts */
/* Organogram (Testplan › Stakeholders): kop van 48px, daaronder een regel per stakeholder (rol | naam). */
.dsg-org{justify-content:flex-start;align-items:stretch;gap:0;text-align:left}
.dsg-org .hd{flex:0 0 48px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;padding:0 12px;text-align:center;min-width:0}
.dsg-org .who{display:flex;flex-direction:column;padding:4px 12px 0;min-width:0}
.dsg-org .wr{display:flex;justify-content:space-between;gap:10px;height:18px;line-height:18px;font-size:11.5px;min-width:0}
.dsg-org .wr .r{flex:1 1 auto;font-weight:700;color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dsg-org .wr .n{flex:0 0 auto;max-width:65%;font-weight:600;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* de naam gaat voor de rol */
.dsg-org.t-rol .wr{justify-content:center}
.dsg-org .wr .n.tbd{font-style:italic;opacity:.75}
.dsg-org.t-stuurgroep,.dsg-org.t-eenheid .hd{color:var(--white)}
.dsg-org.t-stuurgroep .sub,.dsg-org.t-eenheid .hd .sub{color:var(--cyan-300)}
.dsg-org.t-stuurgroep .wr .r{color:var(--white)}
.dsg-org.t-stuurgroep .wr .n{color:var(--cyan-200)}
/* Eén regel per stakeholder: niet meer afbreken naar een tweede rij chips. Een lange
   bloknaam krimpt met een beletselteken; wat niet meer past zit in de +N-chip ernaast. */
.tporg{display:flex;flex-wrap:nowrap;gap:4px;align-items:center;min-width:0}
.tporg .dsg-chip{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tporg .chip-n{flex:0 0 auto;font-weight:800}
.dsg-chip{border:1px solid var(--teal-200);background:var(--teal-050);color:var(--teal-700);border-radius:999px;padding:2px 9px;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.dsg-chip:hover{border-color:var(--cyan-500);background:var(--cyan-100);color:var(--text-strong)}
#shView{margin-left:4px}
.dsg-props{gap:10px;position:relative}
.dsg-props .empty{padding:4px 0}
/* Het inklap-chevronnetje staat los in de hoek van het paneel; de eyebrow eronder houdt
   ruimte vrij zodat een lange kop er niet onder doorloopt. */
.dsg-props>.eyebrow,.dsg-props>.empty{padding-right:24px}
.dsg-pfold{position:absolute;right:7px;top:7px;z-index:1;display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;background:none;border-radius:6px;color:var(--text-muted);cursor:pointer}
.dsg-pfold:hover{background:var(--teal-050);color:var(--text-strong)}
.dsg-pfold svg{width:14px;height:14px;display:block;transform:rotate(-90deg)}
/* Ingeklapt: het hele paneel is één smalle knop met een staand opschrift. */
.dsg-props.dicht{padding:10px 3px;align-items:center}
.dsg-prail{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;padding:0;border:0;background:none;font:inherit;color:var(--text-muted);cursor:pointer}
.dsg-prail:hover{color:var(--text-strong)}
.dsg-prail svg{width:14px;height:14px;display:block;transform:rotate(90deg)}
.dsg-prail span{writing-mode:vertical-rl;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.dsg-lbl{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:700;color:var(--text-muted)}
.dsg-props .cin.mono{letter-spacing:.02em}
.dsg-lane-row{display:flex;flex-direction:column;gap:4px;padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid var(--border-subtle)}
.dsg-lane-row:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.dsg-lane-top{display:flex;align-items:center;gap:6px}
.dsg-covrow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:11.5px;font-weight:700;color:var(--text-muted);margin-top:4px}
.dsg-covrow b{color:var(--text-strong)}
.dsg-cov{height:6px;background:var(--mist-400);border-radius:999px;overflow:hidden}
.dsg-cov i{display:block;height:100%;background:var(--cyan-500);border-radius:999px}
.dsg-warn{display:flex;align-items:center;gap:6px;width:100%;border:0;background:var(--warning-100);color:var(--warning-700);border-radius:8px;padding:6px 8px;font:inherit;font-size:12px;font-weight:700;text-align:left;cursor:pointer}
.dsg-warn:hover{background:var(--sand-500)}
.dsg-warn svg{width:13px;height:13px;flex:0 0 auto}
.dsg-test{display:flex;align-items:center;gap:6px;border:1px solid var(--teal-200);background:var(--teal-050);border-radius:8px;padding:6px 8px}
.dsg-test .tx,.dsg-hit .tx,.shp .tx{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.dsg-test .id,.dsg-hit .id,.shp .id{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-700)}
.dsg-test .tx span+span,.dsg-hit .tx span+span,.shp .tx span+span{font-size:12px;font-weight:600;color:var(--text-body);line-height:1.25}
.dsg-results{display:flex;flex-direction:column;gap:2px;max-height:230px;overflow:auto}
.dsg-hit{display:flex;align-items:center;gap:7px;width:100%;border:0;background:none;border-radius:8px;padding:6px 8px;font:inherit;text-align:left;cursor:pointer}
.dsg-hit:hover{background:var(--teal-050)}
.dsg-hit svg{width:13px;height:13px;flex:0 0 auto;color:var(--teal-500)}

/* Smal scherm: de drie kolommen onder elkaar, canvas bovenaan */
@media (max-width:1180px){
  .dsg{grid-template-columns:minmax(0,1fr)}
  .dsg-main{order:-1}
  .dsg-scroll{max-height:60vh}
}

/* ===== Activiteit-zijpaneel =================================================
   Het activiteitvenster is geen modaal venster meer dat moet krimpen om te
   passen, maar een paneel naast de planning: de strook van de gekozen regel
   blijft in beeld en alles wat niet past scrolt gewoon mee. */
.pnl{position:fixed;right:0;bottom:0;z-index:20;width:560px;display:flex;flex-direction:column;background:var(--surface-card);border-left:1px solid var(--border-subtle);overflow:hidden;box-shadow:0 1px 2px rgba(0,37,43,.08),-14px 0 36px rgba(0,37,43,.12)}
body.pnl-open .page{padding-right:var(--pnl-pad,560px)}
/* Met de lade open is er 560px minder ruimte; een werkbalk die daardoor niet meer past
   wordt schuifbaar in plaats van afgekapt. */
body.pnl-open .tb{overflow-x:auto}

/* Kop op merkinkt: kruimelpad, dan titel met status, periode en voortgang op één regel,
   dan de tabbalk. Samen blijft dat onder de 90px, zodat het tabblad eronder past. */
/* ── De lade verplaatsen en van maat veranderen ──────────────────────────────
   Vastgezet (standaard) doen alleen de linker- en de bovenrand iets: breder en lager
   beginnen. Losgemaakt zweeft de lade en werken alle acht grepen. app.js zet de maten
   als inline stijl; wat hieronder staat is de vormgeving en het muisgedrag. */
.pnl-rz{position:absolute;z-index:5;touch-action:none}
.r-n{top:0;left:0;right:0;height:5px;cursor:ns-resize}
.r-s{bottom:0;left:0;right:0;height:5px;cursor:ns-resize}
.r-w{left:0;top:0;bottom:0;width:5px;cursor:ew-resize}
.r-e{right:0;top:0;bottom:0;width:5px;cursor:ew-resize}
.r-nw,.r-ne,.r-sw,.r-se{width:12px;height:12px;z-index:6}
.r-nw{top:0;left:0;cursor:nwse-resize}
.r-se{bottom:0;right:0;cursor:nwse-resize}
.r-ne{top:0;right:0;cursor:nesw-resize}
.r-sw{bottom:0;left:0;cursor:nesw-resize}
/* Vastgezet zijn de onder- en rechterrand tegen het venster aan gepind: daar valt niets
   te slepen, dus die grepen liggen er ook niet (anders vang je de schuifbalk af). */
.pnl:not(.los) .r-s,.pnl:not(.los) .r-e,.pnl:not(.los) .r-nw,
.pnl:not(.los) .r-ne,.pnl:not(.los) .r-sw,.pnl:not(.los) .r-se{display:none}
/* De linkerrand is de greep die je het vaakst pakt; een streepje maakt hem vindbaar. */
.r-w::after{content:"";position:absolute;left:1px;top:50%;width:3px;height:34px;margin-top:-17px;border-radius:2px;background:var(--border-subtle);opacity:0;transition:opacity .12s}
.pnl:not(.los) .r-w:hover::after{opacity:1}
/* De kop is de handgreep: slepen maakt de lade los van de rand. */
.pnl-h{cursor:grab}
.pnl-h button,.pnl-h .pnl-tabs{cursor:auto}
.pnl-h .pnl-x,.pnl-h .pnl-chip{cursor:pointer}
/* Tijdens het slepen houdt de hele pagina de muisaanwijzer van de greep vast, net als
   bij het verslepen van een kolom (body.colresize hierboven). */
body.pnlmove,body.pnlmove *{cursor:grabbing!important;user-select:none}
body.pnlrz-ew,body.pnlrz-ew *{cursor:ew-resize!important;user-select:none}
body.pnlrz-ns,body.pnlrz-ns *{cursor:ns-resize!important;user-select:none}
body.pnlrz-nwse,body.pnlrz-nwse *{cursor:nwse-resize!important;user-select:none}
body.pnlrz-nesw,body.pnlrz-nesw *{cursor:nesw-resize!important;user-select:none}
/* Losgemaakt zweeft de lade vrij: rondom een rand en een diepere schaduw, zodat te
   zien is dat hij niet meer aan het venster vastzit. */
.pnl.los{border:1px solid var(--border-subtle);border-radius:14px;box-shadow:0 18px 48px rgba(0,37,43,.26),0 2px 6px rgba(0,37,43,.12)}
.pnl.los .pnl-h{border-radius:13px 13px 0 0}
.pnl-h{flex:0 0 auto;position:relative;background:var(--teal-900);padding:8px 14px 0}
.pnl-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border:0;border-radius:50%;background:none;color:var(--teal-100);display:grid;place-items:center;cursor:pointer}
.pnl-x svg{width:14px;height:14px}
.pnl-x:hover{background:var(--teal-700);color:var(--white)}
.pnl-crumb{display:flex;align-items:center;gap:4px;height:14px;padding-right:30px;font-size:10.5px;font-weight:600;color:var(--teal-100)}
.crumb-eb{flex:none;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-accent)}
.crumb-v,.crumb-t,.crumb-s{flex:none;white-space:nowrap}
.crumb-s{color:var(--teal-400)}
/* Alleen de naam van de ouder mag inkorten; de milestone blijft heel. */
.crumb-el{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pnl-hr{display:flex;align-items:center;gap:8px;height:26px;margin-top:2px;padding-right:26px;min-width:0}
.pnl-hr h2{flex:0 1 auto;min-width:0;margin:0;font-size:17px;font-weight:800;color:var(--white);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnl-sum{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;font-size:11.5px;color:var(--teal-100)}
.pnl-sum .sp{display:none}
.pnl-sum b{flex:none;width:30px;text-align:right;font-size:11.5px;font-weight:800;color:var(--white)}
.pnl-st{flex:none;display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:999px;background:var(--teal-700);border:0;font-size:10.5px;font-weight:700;color:var(--white);white-space:nowrap}
.pnl-st i{display:block;width:6px;height:6px;border-radius:50%}
.pnl-dt{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.pnl-pb{flex:none;display:block;width:52px;height:4px;border-radius:999px;background:var(--teal-700);overflow:hidden}
.pnl-pb i{display:block;height:100%;background:var(--cyan-500)}

/* Tabbalk: één regel, het actieve tabblad als cyaan pil. De balk ligt op wit en
   loopt van rand tot rand, zodat hij de kop van de inhoud scheidt. */
.pnl-tabs{margin:2px -14px 0;padding:4px 10px;background:var(--white);border-bottom:1px solid var(--border-subtle)}
.pnl-nav{display:flex;justify-content:space-between;align-items:center;height:28px;padding:0 1px;border:1px solid var(--border-subtle);border-radius:999px;background:var(--white)}
.pnl-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 8px;border:0;border-radius:999px;background:none;color:var(--text-body);font-family:inherit;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}
.pnl-chip:hover{color:var(--text-strong)}
.pnl-chip.on{background:var(--cyan-500);color:var(--teal-800)}
.pnl-chip span{height:16px;min-width:16px;padding:0 5px;border-radius:999px;background:var(--mist-200);color:var(--text-strong);font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.pnl-chip.on span{background:var(--white)}

.pnl-b{flex:1 1 auto;min-height:0;overflow:auto;padding:8px 14px 12px}
/* Één tabblad tegelijk. [hidden] gaat hier vóór: een tabblad dat niet van toepassing
   is (Blokken bij een samenvatting) blijft verborgen, ook als het gekozen zou worden. */
.pnl-sec{display:none}
.pnl-sec.on{display:block}

/* Sectiekop: accentstreepje, kop, eventuele teller/knop, en een uitdovende haarlijn. */
.pgrp{display:flex;align-items:center;gap:8px;height:20px;margin:0 0 4px;padding:0;background:none;border:0;border-radius:0}
.pgrp::before{content:"";flex:none;width:10px;height:2px;border-radius:2px;background:var(--brand-accent)}
.pgrp::after{content:"";flex:1 1 auto;height:1px;background:linear-gradient(90deg,var(--border-subtle),transparent)}
.pgrp b{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-strong)}
.pgrp .info{font-size:11px}
/* Tussenkop binnen een tabblad (Wie/RACI): zonder streepje, wel dezelfde haarlijn. */
.pgrp-sub{grid-column:1/-1;height:16px;margin:4px 0 0}
.pgrp-sub::before{display:none}
.pgrp-sub b{font-size:10px}
.raci-sub{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--text-muted);cursor:help}

/* Label links in een vaste kolom: dat scheelt een regel per veld.
   align-items:start: een veld met een hint eronder maakt de rij hoger; zonder deze regel
   zakt het veld ernaast (zonder hint) naar het midden en staan ze niet meer op één lijn. */
.pnl .fg.g2{gap:4px 16px;align-items:start}
.pnl .f{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:3px 8px;min-width:0}
.pnl .f.s2{grid-column:1/-1}
.pnl .f.full{grid-template-columns:minmax(0,1fr)}
.pnl .f>label,.pnl .f>.flabel{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);line-height:1.15}
.pnl .f>.hint{grid-column:2;font-size:10px;line-height:1.2;color:var(--text-muted)}
.pnl .f.full>.hint{grid-column:1}
.pnl input.inp,.pnl select.inp,.pnl .msel-b{height:28px;padding:0 9px;font-size:12.5px;font-weight:600;border-radius:8px;border:1px solid var(--border-subtle);background:var(--surface-raised);color:var(--text-body)}
.pnl select.inp{padding-right:22px}
.pnl textarea.inp{min-height:84px;padding:6px 9px;font-size:12.5px;line-height:1.4;border-radius:8px;border:1px solid var(--border-subtle);background:var(--surface-raised)}
.pnl .inp:focus,.pnl .msel-b:focus{outline:0;border-color:var(--cyan-500);background:var(--white);box-shadow:0 0 0 3px var(--cyan-100)}
.pnl .inp:disabled{background:var(--mist-200);color:var(--text-muted)}
.pnl .info{font-size:11px}
.pnl .note{font-size:11.5px;line-height:1.35}
/* "in de balk" hangt in het veld zelf, zodat het label kort kan blijven. */
.inbal{position:relative;display:flex;min-width:0}
.pnl .inbal .inp{flex:1 1 auto;min-width:0;padding-right:84px}
.inbal-t{position:absolute;right:6px;top:6px;height:16px;padding:0 7px;border-radius:999px;background:var(--mist-400);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-body);display:flex;align-items:center;pointer-events:none}

/* RACI — R en A zijn één stakeholder, C en I zijn lijsten (chips + keuzelijst). */
.raci-k{flex:none;width:16px;height:16px;border-radius:4px;font-size:10px;font-weight:800;font-style:normal;display:grid;place-items:center;color:var(--white)}
/* Scoped op het sleutelblokje: k-r/k-a/k-c/k-i worden ook op de keuzelijsten in
   Testplan > Test responsibilities gezet (daar alleen voor de streep links). Ongescoped
   kleurden ze die keuzelijst helemaal teal of paars, met donkere tekst erop. */
.raci-k.k-r{background:var(--teal-700)}
.raci-k.k-a{background:var(--violet-700)}
.raci-k.k-c{background:var(--warning-500);color:var(--teal-900)}
.raci-k.k-i{background:var(--cyan-500);color:var(--teal-900)}
.racisel{position:relative;display:flex;align-items:center;min-width:0}
.pnl .racisel .inp{width:100%;min-width:0;padding-left:28px;padding-right:22px}
.racisel .raci-k{position:absolute;left:6px;pointer-events:none}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:28px;padding:3px 0;min-width:0}
.chips .raci-k{margin:0 2px 0 6px}
.rchip{display:inline-flex;align-items:center;gap:1px;max-width:100%;height:22px;padding:0 2px 0 8px;border-radius:999px;background:var(--mist-200);font-size:11.5px;font-weight:600;color:var(--text-body);white-space:nowrap}
.rchip .rx{flex:none;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:none;color:var(--text-muted);display:grid;place-items:center;cursor:pointer}
.rchip .rx svg{width:10px;height:10px}
.rchip .rx:hover{background:var(--mist-400);color:var(--danger-500)}
/* De "+" is een gewone keuzelijst: één klik, toetsenbord werkt, geen eigen uitklapcode. */
.radd select{width:24px;height:22px;padding:0;border:1px dashed var(--border-strong);border-radius:999px;background:var(--white);color:var(--teal-700);font-family:inherit;font-size:12px;font-weight:800;text-align:center;appearance:none;cursor:pointer}
.radd select:hover{background:var(--cyan-100);border-color:var(--cyan-500)}
.radd select:focus{outline:2px solid var(--focus-ring);outline-offset:1px}

.pnl .sws{gap:2px;padding:0}
.pnl .sws span{width:28px;height:28px}
.pnl .sws i{width:20px;height:20px}
.pnl .seg{height:28px;align-self:start}
.pnl .seg label span,.pnl .seg button{height:22px;display:flex;align-items:center;padding:0 12px;font-size:12px}
.pnl .rng{gap:10px;height:28px}
.pnl .rng output{min-width:0;width:38px;text-align:right;font-size:12.5px;font-weight:800}

/* Lijsten en tabellen in de lade: regels van 28px met een lichte scheidingslijn.
   De velden staan randloos tot je ze aanwijst, zodat een rij als tekst leest. */
.pnl .tk-list{gap:0;padding:0}
/* Eigenaar (kolom 3) kreeg lang de kleinste vaste breedte van de rij (92px) terwijl juist
   die kolom de langste tekst bevat (stakeholdernaam) — bevinding #39. Hij deelt nu mee in
   extra ruimte (minmax(...,fr)), o.a. als je de lade zelf breder trekt. */
.pnl .tk-row{height:28px;gap:0 6px;border-bottom:1px solid var(--mist-200);grid-template-columns:20px minmax(0,1fr) minmax(90px,0.7fr) 118px 76px 24px}
/* Met blokken op de regel komt er een knopkolom van 24px bij om een taak te verplaatsen.
   Zonder blokken valt die weg en blijft het raster precies zoals het was. */
.pnl .tk-list.has-mv .tk-row{grid-template-columns:20px minmax(0,1fr) minmax(90px,0.7fr) 118px 76px 24px 24px}
.pnl .tk-row.tk-new{border-bottom:0;padding-top:0}
/* Hoort dit bij de hele regel of bij een blok? De balk staat boven de lijst in de
   tabbladen Taken en Criteria; wat je kiest bepaalt ook waar een nieuwe regel komt. */
.pnl .scbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:0 0 8px}
.pnl .sc-l{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);padding-right:4px}
.pnl .sc-b{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border:1px solid var(--border-subtle);border-radius:999px;background:var(--white);font-family:inherit;font-size:11.5px;font-weight:700;color:var(--text-muted);cursor:pointer}
.pnl .sc-b:hover{border-color:var(--cyan-500);color:var(--text-body)}
.pnl .sc-b:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
.pnl .sc-b.on{background:var(--cyan-500);border-color:var(--cyan-500);color:var(--teal-900)}
.pnl .sc-n{min-width:15px;height:15px;padding:0 4px;border-radius:999px;background:var(--mist-200);font-size:10px;font-weight:800;display:grid;place-items:center;color:var(--text-body)}
.pnl .sc-b.on .sc-n{background:var(--white)}
.pnl .sc-note{display:block;padding:0 0 8px}
/* "Alles hierin naar…" hoort niet tussen de scope-knoppen te staan alsof het er ook een is,
   maar mag er ook niet buiten vallen: hij volgt de knoppen en wipt naar de volgende regel
   als de balk vol is (margin-left:auto duwde hem eerder half buiten de lade). */
.pnl .sc-mv{height:24px;max-width:100%;padding:0 8px;border:1px solid var(--border-subtle);
  border-radius:999px;background:var(--white);font-size:11px;font-weight:700;color:var(--text-muted)}
.pnl .sc-mv:hover{border-color:var(--cyan-500);color:var(--text-body)}
/* Het verplaatsknopje in een taak- of criteriumregel; de kop boven het menu erbij. */
.pnl .ic.mv svg{width:14px;height:14px}
.pop-k{padding:6px 10px 4px;font-size:10px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-muted)}
/* Kolomkoppen: zonder taken zag je niet dat een taak een eigenaar en een datum heeft. */
.pnl .tk-row.tk-head{height:16px;border-bottom:1px solid var(--border-subtle)}
.pnl .tk-head span{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);padding-left:7px;align-self:end}
.pnl .tk-head span:first-child{padding-left:0}
.pnl .tk-row .cin,.pnl .crit-row .cin{height:24px;padding:0 7px;font-size:12px;border-color:transparent;background:none}
.pnl .tk-row .cin:hover:not([disabled]),.pnl .crit-row .cin:hover:not([disabled]){border-color:var(--border-subtle);background:var(--white)}
.pnl .tk-row .cin:focus,.pnl .crit-row .cin:focus{background:var(--white)}
.pnl .tk-act{padding-top:4px}
.pnl .blktab{margin:0;font-size:12px}
.pnl .blktab th{padding:0 6px 3px 0}
.pnl .blktab td{height:28px;padding:0 6px 0 0;border-bottom:1px solid var(--mist-200)}
.pnl .blktab .inp{height:24px;padding:0 7px;font-size:12px;border-radius:7px}
.pnl .blkact{padding-top:6px}
.pnl .tsl{gap:0 16px;padding:2px 0}
.pnl .tsopt{height:28px;font-size:12.5px}
.pnl .tsopt input{width:15px;height:15px}
.pnl .crit-row{height:28px;gap:0 8px;border-bottom:1px solid var(--mist-200)}
.pnl .btn-sm{height:28px;padding:0 12px;font-size:11.5px}

/* Voet: verwijderen als tekstknop links, bevestiging in het midden, sluiten rechts. */
.pnl-f{flex:0 0 auto;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-top:1px solid var(--border-subtle);background:var(--surface-raised)}
.pnl-del{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--danger-500);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}
.pnl-del svg{width:14px;height:14px}
.pnl-del:hover{background:var(--danger-100);color:var(--danger-600)}
.pnl-saved{flex:1 1 auto;min-width:0;text-align:center;font-size:11px;font-weight:600;color:var(--text-muted)}
.pnl-close{flex:none;height:28px;padding:0 16px;border-radius:999px;border:1px solid var(--teal-700);background:var(--white);color:var(--teal-700);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}
.pnl-close:hover{background:var(--teal-100)}
.fg.g2{gap:10px 14px}
.fg.g2 .s2{grid-column:1/-1}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* In de lade is 560px te smal voor twee kolommen criteria naast elkaar: entry en exit
   staan onder elkaar, zodat het omschrijvingsveld bruikbaar breed blijft. */
.pnl .crit-cols{grid-template-columns:minmax(0,1fr);gap:14px 0}
.pnl .crit-row select[data-cf="wie"]{flex:1 1 120px;min-width:90px;max-width:220px}
.pnl .crit-row select[data-cf="status"]{flex:0 0 78px;width:78px}
/* Taken: afvinklijst met eigenaar, streefdatum en stand. Eigenaar (kolom 3) deelt mee in
   extra breedte via minmax(...,fr) — zelfde reden als bij Criteria hierboven. */
.tk-list{display:flex;flex-direction:column;gap:3px;padding:3px 0 2px}
.tk-row{display:grid;grid-template-columns:20px minmax(0,1fr) minmax(90px,0.7fr) 124px 88px 26px;gap:6px;align-items:center}
.tk-row input[type=checkbox]{width:15px;height:15px;accent-color:var(--cyan-600);margin:0}
.tk-row .cin{min-width:0;width:100%}
.tk-row.st-klaar .tk-t{color:var(--text-subtle);text-decoration:line-through}
.tk-s{font-weight:700}
.tk-row.st-klaar .tk-s{background:var(--success-100);color:var(--success-700)}
.tk-row.st-bezig .tk-s{background:var(--cyan-100);color:var(--teal-800)}
.tk-row.st-risico .tk-s{background:var(--warning-100);color:var(--warning-700)}
.tk-row.tk-new{grid-template-columns:20px minmax(0,1fr);gap:6px;padding-top:2px}
.tk-plus{text-align:center;color:var(--text-subtle);font-size:14px;font-weight:800}
/* Deliverables in de lade: een regel per deliverable, met de acties eronder in een
   ingesprongen blok. De kolommen volgen die van de taken, met een chevron vooraan en de
   teller vlak voor de prullenbak. */
.dlv-list{display:flex;flex-direction:column;gap:0;padding:3px 0 2px}
.dlv-row{display:grid;grid-template-columns:20px minmax(0,1fr) 92px 118px 84px 40px 24px;gap:0 6px;align-items:center;height:30px}
.dlv-row .cin{min-width:0;width:100%}
.dlv-item{border-bottom:1px solid var(--mist-200)}
.dlv-item.open{background:var(--paper-100)}
.dlv-row.dlv-head{height:16px;border-bottom:1px solid var(--border-subtle)}
.dlv-head span{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-muted);padding-left:7px;align-self:end}
.dlv-head span:first-child{padding-left:0}
.dlv-row.dlv-new{grid-template-columns:20px minmax(0,1fr);gap:6px;padding-top:2px;border-bottom:0}
.dlv-row.st-opgeleverd .dlv-n{color:var(--text-subtle)}
.dlv-row.st-vervallen .dlv-n{color:var(--text-subtle);text-decoration:line-through}
.dlv-row.st-opgeleverd .dlv-s{background:var(--success-100);color:var(--success-700)}
.dlv-row.st-bezig .dlv-s{background:var(--cyan-100);color:var(--teal-800)}
.dlv-row.st-risico .dlv-s{background:var(--warning-100);color:var(--warning-700)}
/* De chevron draait mee met de stand, net als bij een ingeklapte rij in de planning. */
.dlv-tg svg{transition:transform .12s}
.dlv-item.open .dlv-tg svg{transform:rotate(90deg)}
/* Acties onder een deliverable: ingesprongen, met een lijn die laat zien waar ze bij horen. */
.dlv-acts{padding:2px 0 6px 20px;border-left:2px solid var(--cyan-200);margin-left:9px}
.dlv-act-row{display:grid;grid-template-columns:20px minmax(0,1fr) 92px 118px 84px 24px;gap:0 6px;align-items:center;height:28px}
.dlv-act-row input[type=checkbox]{width:15px;height:15px;accent-color:var(--cyan-600);margin:0}
.dlv-act-row .cin{min-width:0;width:100%}
.dlv-act-row.st-klaar .cin[data-df="atitel"]{color:var(--text-subtle);text-decoration:line-through}
.dlv-act-row.st-klaar .tk-s{background:var(--success-100);color:var(--success-700)}
.dlv-act-row.st-bezig .tk-s{background:var(--cyan-100);color:var(--teal-800)}
.dlv-act-row.st-risico .tk-s{background:var(--warning-100);color:var(--warning-700)}
.dlv-act-row.dlv-act-new{grid-template-columns:20px minmax(0,1fr)}
.dlv-desc{padding:2px 0 4px}
.dlv-desc .cin{width:100%;font-style:italic}
/* In de lade staan de velden randloos tot je ze aanwijst — zelfde afspraak als bij taken. */
.pnl .dlv-row .cin,.pnl .dlv-act-row .cin,.pnl .dlv-desc .cin{height:24px;padding:0 7px;font-size:12px;border-color:transparent;background:none}
.pnl .dlv-row .cin:hover:not([disabled]),.pnl .dlv-act-row .cin:hover:not([disabled]),.pnl .dlv-desc .cin:hover:not([disabled]){border-color:var(--border-subtle);background:var(--white)}
.pnl .dlv-row .cin:focus,.pnl .dlv-act-row .cin:focus,.pnl .dlv-desc .cin:focus{background:var(--white)}
.tk-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:4px}
.tk-roll{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--text-body);cursor:pointer}
.tk-roll input{width:15px;height:15px;accent-color:var(--cyan-600);margin:0}
/* "Voortgang volgt de tijd" staat onder de schuif in tabblad Planning — kolom 2 van het
   .f-raster, zodat het vinkje uitlijnt met de schuif en niet met het label ervoor. */
/* Het is een <label> in een .f, dus de veldlabel-stijl (hoofdletters, 10px, gespatieerd)
   pakt hem. Die hier terugzetten: dit leest als het vinkje in Taken, niet als een kop. */
.pnl .f>label.v-tijd{grid-column:2;display:inline-flex;align-items:center;gap:7px;margin-top:4px;
  font-size:12px;font-weight:600;letter-spacing:normal;text-transform:none;line-height:1.3;
  color:var(--text-body);cursor:pointer;white-space:nowrap}
.v-tijd input{width:14px;height:14px;accent-color:var(--cyan-600);margin:0;flex:none}
.v-tijd input:disabled{cursor:not-allowed}
.v-tijd:has(input:disabled){color:var(--text-muted);cursor:not-allowed}
.v-tijd .calc{margin-left:2px}
.subn.tkn{background:var(--success-100);color:var(--success-700)}
/* Smaller scherm: het paneel legt zich over de planning heen in plaats van ernaast. */
/* Smaller scherm: de lade legt zich over het scherm heen in plaats van ernaast. */
@media (max-width:1180px){
  .pnl{width:min(560px,100vw)}
  body.pnl-open .page{padding-right:0}
}

/* ================= Fases (schema v31) =================
   De laag boven de milestones: links een kopregel, rechts een balk over de eigen periode
   van de fase. De kleur komt per fase mee als de variabelen --fa (rand) en --fabg (vlak),
   inline gezet in rightRow/leftRow, zodat er niet voor elke kleur een eigen klasse nodig is.
   --fabg is dezelfde tokentint als de achtergrond van een activiteitstrook in die kleur
   (.k-cyaan e.a. hieronder), zodat fase en activiteit in dezelfde kleur ook gelijk ogen
   (bevinding #40 — voorheen een berekende color-mix die daar niet mee overeenkwam).
   De milestonerijen houden bewust hun eigen inspringing: een project zonder fases moet er
   precies uitzien als voorheen. */
.row.fa{background:var(--mist-200);border-bottom:1px solid var(--border-strong)}
.row.fa:hover{background:var(--mist-400)}
.row.fa .nm{font-weight:800;color:var(--text-strong);letter-spacing:.01em}
.row.fa .c{font-weight:700}
.fasw{flex:0 0 auto;width:10px;height:10px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.fakort{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:600}
.faband{position:absolute;height:22px;border-radius:7px;z-index:2;display:flex;align-items:center;overflow:hidden;
  background:var(--fabg);border:1px solid var(--fa);border-left:4px solid var(--fa);
  user-select:none;touch-action:none}
.can-edit .faband{cursor:grab}
.faband .lbl{position:relative;z-index:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:0 8px;font-size:11.5px;font-weight:800;color:var(--text-strong)}
.faband .lbl.sm{padding:0 4px}
.faband.is-sel{outline:2px solid var(--teal-800);outline-offset:1px}
.can-edit .faband:hover .h::after{content:"";position:absolute;top:4px;bottom:4px;left:3px;width:2px;border-radius:2px;background:var(--teal-800);opacity:.55}

/* Gate = sign-off tussen twee fases. Zelfde ruit als een milestone, maar met een dikke
   rand, zodat je in één oogopslag ziet dat er iets afgetekend moet worden. */
.dia.gate{box-shadow:inset 0 0 0 3px var(--white);outline:1px solid var(--teal-800);outline-offset:0}
.tag.gate{background:var(--teal-800);color:var(--white);padding:1px 7px;font-size:10.5px;flex:0 0 auto}

/* ── Product risico analyse (v38) ───────────────────────────────────────────────
   Eén badge-vorm voor de klasse (A/B/C) en één voor de score ernaast, zodat de klasse
   overal hetzelfde leest: in de risicokolom van Test items, in de PRA-tabel, in het
   overzicht, op een hoofdproces-kop en als chip in het kwadrant. De kleuren zijn de
   bestaande semantische tinten — rood voor hoog, amber voor gemiddeld, groen voor laag. */
.prb{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 7px;border-radius:10px;font-size:11px;font-weight:800;letter-spacing:.02em}
.prb-a{background:var(--danger-100);color:var(--danger-600)}
.prb-b{background:var(--warning-100);color:var(--warning-700)}
.prb-c{background:var(--success-100);color:var(--success-700)}
.prb-leeg{background:var(--mist-200);color:var(--grey-500)}
.prsc{margin-left:6px;font-size:11px;font-weight:700;color:var(--text-muted);font-variant-numeric:tabular-nums}
.prsc:empty{display:none}
/* Cel die als knop werkt (risicokolom, en een groepskolom in het overzicht): kaal, maar
   met dezelfde hover-aanwijzing als de andere aanklikbare cellen. */
.prcell{display:inline-flex;align-items:center;background:none;border:1px solid transparent;border-radius:6px;padding:1px 4px;cursor:pointer;font:inherit}
.prcell:hover{background:var(--white);border-color:var(--border-subtle)}
.prcell:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
/* Hoofdproces-kop: inklapbaar, met de zwaarste klasse rechts. De flex zit in een div
   ín de cel — een <td> met colspan die zelf display:flex krijgt valt uit de tabelopmaak
   en dan loopt de balk niet meer over de volle breedte. */
.tpt tr.tps-hoofd .tps-hrow{display:flex;align-items:center;gap:0;min-width:0}
.tpt tr.tps-hoofd .tps-chev{width:18px;height:18px;margin-right:7px;color:var(--text-muted);flex:0 0 auto}
.tpt tr.tps-hoofd .tps-chev svg{width:12px;height:12px}
.tpt tr.tps-hoofd.dicht .tps-chev svg{transform:rotate(-90deg)}
.tpt tr.tps-hoofd .tps-hg{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--text-muted);letter-spacing:0;text-transform:none;white-space:nowrap}
.tpt tr.tps-hoofd.dicht .tps-hrow{opacity:.85}

/* De tab Test items draagt sinds v38 drie kolommen meer (hoofdproces, eigenaar, risico).
   Om die acht kolommen op een venster van 1280 px binnen de kaart te houden krijgen de
   tekstvelden hier een krappere ondergrens dan elders; de volledige tekst blijft in de
   tooltip staan en het veld groeit bij focus niet weg. */
.tpt-ti .cin.xwide{min-width:190px}
.tpt-ti .cin.tpkort{min-width:120px;width:100%}
.tpt-ti .cin.wide{min-width:150px}
.tpt-ti td select.cin{min-width:104px}
.tpt-ti td .prcell{white-space:nowrap}

/* Welke factoren meetellen: drie vinkjes in de kopregel, direct naast de formule zodat de
   samenhang zichtbaar is. De laatste aangevinkte factor staat vast — zonder factor valt er
   niets te rekenen. */
.prafs{display:inline-flex;align-items:center;gap:14px;margin-left:4px}
.prafv{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-body);cursor:pointer;white-space:nowrap}
.prafv input{accent-color:var(--teal-500);margin:0;cursor:pointer}
.prafv.vast,.prafv input:disabled{cursor:default;color:var(--text-muted)}

/* De PRA-tabellen. Vaste breedtes voor de cijferkolommen, zodat de getallen onder elkaar
   staan en de naam- en toelichtingskolom de rest verdelen. */
.prt .prt-n{min-width:210px}
.prt .prt-f{width:118px;text-align:center}
.prt .prt-s{width:62px;text-align:center;font-variant-numeric:tabular-nums}
.prt .prt-k{width:70px;text-align:center}
.prt .prt-g{width:110px;text-align:center;white-space:nowrap}
.prt .prt-best{border-left:1px solid var(--border-subtle)}
.prt td.prt-f select.cin{text-align:center;min-width:52px}
.prt thead th.prt-f{cursor:help;text-decoration:underline dotted var(--border-strong);text-underline-offset:3px}

/* Risicokwadrant: vijf bij vijf, business impact verticaal en de faalkans horizontaal.
   De dikke lijnen na kolom 2 en rij 3 delen het vlak in vier kwadranten; rechtsboven is
   hoog risico. De achtergrondtint zegt hetzelfde als de kleur van de chips erin. */
.prkw{display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:8px;padding:14px 16px 10px 12px}
.prkw-y{grid-column:1;grid-row:1;writing-mode:vertical-rl;transform:rotate(180deg);justify-self:center;align-self:center;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.prkw-grid{grid-column:2;grid-row:1;display:grid;grid-template-columns:30px repeat(5,minmax(0,1fr))}
.prkw-ylab{display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--text-strong);font-variant-numeric:tabular-nums}
.prkw-xlab{text-align:center;padding-top:5px;font-weight:800;color:var(--text-strong);line-height:1.25;font-variant-numeric:tabular-nums}
.prkw-xlab em{display:block;font-style:normal;font-size:10px;font-weight:600;color:var(--grey-500)}
.prkw-cel{min-height:58px;padding:4px;display:flex;flex-wrap:wrap;gap:3px;align-content:flex-start;border-right:1px solid var(--mist-200);border-bottom:1px solid var(--mist-200)}
.prkw-cel.q0{background:color-mix(in srgb,var(--success-100) 45%,transparent)}
.prkw-cel.q1,.prkw-cel.q2{background:color-mix(in srgb,var(--warning-100) 40%,transparent)}
.prkw-cel.q3{background:color-mix(in srgb,var(--danger-100) 45%,transparent)}
.prkw-cel.xsplit{border-right:2px solid var(--border-strong)}
.prkw-cel.ysplit{border-bottom:2px solid var(--border-strong)}
/* Een chip is een .prb, en die is inline-flex met justify-content:center — daardoor liep een
   te lange naam aan BEIDE kanten uit de chip en deed text-overflow niets (de tekst is in een
   flexbox geen eigen blok). Voor de chip dus inline-block: dan kapt hij netjes rechts af met
   een beletselteken. De korte naam voorkomt dat meestal al; dit is het vangnet. */
.prkw-chip{display:inline-block;max-width:100%;height:20px;line-height:18px;border:1px solid currentColor;padding:0 6px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}
.prkw-chip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
.prkw-x{grid-column:2;grid-row:2;text-align:center;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}

/* Legenda onder alle drie de weergaven, zodat A/B/C nergens uitleg mist. */
.prleg{display:flex;flex-wrap:wrap;gap:16px;padding:9px 14px 2px;font-size:11px;color:var(--text-muted)}
.prleg span{display:inline-flex;align-items:center;gap:6px}
.prleg i{width:12px;height:12px;border-radius:3px;border:1px solid var(--border-subtle)}

/* ── Realtime dialoog met de Claude-runner ──────────────────────────────────────
   Een gespreksvenster in het beheerblok van een wens/bevinding. De beurten komen uit
   api/feedback.php (op=claude_dialog_fetch) en worden met esc() ingevoegd, dus de tekst
   moet hier haar eigen regeleindes houden: white-space:pre-wrap. */
.dlg-log{height:44vh;min-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;
  padding:10px;margin:0 0 8px;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:10px}
.dlg-turn{max-width:88%;border-radius:10px;padding:8px 11px;display:flex;flex-direction:column;gap:3px}
.dlg-who{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.dlg-txt{font-size:13.5px;line-height:1.55;white-space:pre-wrap}
.dlg-me{align-self:flex-end;background:var(--teal-800);color:var(--white)}
.dlg-ai{align-self:flex-start;background:var(--surface-card);border:1px solid var(--border-subtle);color:var(--text-body)}
.dlg-sys{align-self:flex-start;max-width:100%;padding:2px 4px;background:none;color:var(--text-muted)}
.dlg-sys .dlg-txt{font-size:11.5px}
.dlg-status{min-height:20px;margin:0 0 8px;font-size:12px;color:var(--text-muted)}

/* Testplan › Defect process › Resolver groups: de matrix systeem × testfase (oplosgroepen).
   Hergebruikt .tpm (plakkende kop en eerste kolom) en de chips van de RACI-matrix; de kolom van
   de fase die boven in de balk gekozen is, krijgt een rustige markering zodat je ziet waar de
   knoppen rechtsboven op werken. */
.dgm{table-layout:fixed}
.dgm th.stick,.dgm td.stick{width:24%;min-width:190px}
.dgm td.dg-c{padding:4px 6px;vertical-align:top}
.dgm th.dg-cur{background:var(--teal-050)}
.dgm td.dg-cur{box-shadow:inset 0 0 0 1px var(--border-subtle)}
.dgm tr.dg-los td.stick,.dgm tr.dg-los td{background:var(--surface-raised)}
.dg-cb{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-height:34px;
  border:1px solid transparent;border-radius:10px;background:none;padding:5px 7px;font:inherit;text-align:left;color:var(--text-body)}
button.dg-cb{cursor:pointer}
button.dg-cb:hover,button.dg-cb:focus-visible{border-color:var(--cyan-500);background:var(--cyan-100)}
.dg-g{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;max-width:100%}
.dg-gn{font-weight:700;font-size:12px;color:var(--text-strong)}
.dg-leeg{font-size:11.5px;font-weight:700;color:var(--text-muted)}
.dg-tbd{font-size:11px;font-style:italic;color:var(--text-muted)}
.dg-hint{margin:0 0 8px}