/* ═══════════════════════════════════════════════════════════════════════════
   werkplek.css — de ene stylesheet van /werk.

   Eén hand, één maat: docs/ONTWERP.md (§6 maat en kleur, §4 bouwstenen).
   Alles wat op /werk te zien is staat hier; een scherm draagt geen eigen CSS.
   Klassen beginnen met wk-. Kleuren alleen via de tokens hieronder; de enige
   uitzonderingen zijn het papier (altijd wit) en de gele knop (altijd inkt).

   Inhoud
     1. Letter                8. Ketenstrip            15. Velden
     2. Tokens                9. Tabbladen             16. Knoppen
     3. Basis                10. Tellers               17. Melding, lege regel, i
     4. Zijbalk              11. Filterrij             18. Checklist, document, totalen, historie
     5. (bij 4: zijbalk)     12. Tabel                 19. Dialoog, inklappen
     6. Pagina               13. Standwoord            20. Kleine schermen
     7. Kop                  14. Lijstvak, paneel      21. Schermeigen bediening
                                                       22. Matrix
                                                       23. Bewerken op de plek, Nu, open punten
                                                       24. Gates, colli, afsluiting, meerwerk
                                                       25. Papier, beweging
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Letter ──────────────────────────────────────────────────────────── */

/* Inter, uit onze eigen image; één variabel bestand voor 400 t/m 900. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─── 2. Tokens ──────────────────────────────────────────────────────────── */

:root {
  /* Het palet is CAS — niet meer "nagemeten uit een afdruk" maar letterlijk de
     computed styles uit CAS zelf: overdracht/ontwerp/cas-computed/ (16-09-2026).
     Waar die dumps afwijken van CAS-KLEUREN.md en CAS-SKELET-MATEN.md winnen
     de dumps; die twee documenten zijn van een schermafdruk afgelezen en de
     dumps zijn de waarde die de browser zelf teruggeeft.

     Moreno, 16-09: "het lijkt erop, maar het is niet hetzelfde" — precies dit
     was de oorzaak. Wij hadden CAS' kleuren dichterbij *onze* grijzen gezet
     (#1D1D1D, #6B6B6B, #DADADA) en CAS' geel iets donkerder gemaakt voor
     contrast. Dat leest als een andere tool. Nu staan CAS' eigen waarden er:
     slate-700 als tekst, slate-600 als stille tekst, slate-900 als kop,
     slate-300 als veldrand, slate-200 als hairline, slate-50 als zebra.
     `--geel-inkt` is daarmee lichter dan hij was (2,8:1 op wit): hij draagt
     nergens leestekst, alleen een paginanummer en een tabnaam die zijn
     betekenis óók uit vorm en plaats haalt. */
  /* CAS' pagina is WIT: zijn buitenste omhulsel draagt bg-surface-0 (#FFFFFF), gemeten
     17-09 op elk CAS-scherm. Het grijs dat je meent te zien is de kaartschaduw.
     `--grond` blijft het stille vlak (hover, zebra-achtige vulling); alleen de
     pagina zelf gaat naar wit. */
  --pagina: #FFFFFF;
  --grond: #F8FAFC; --vlak: #FFFFFF; --vlak-2: #F1F5F9; --lijn: #CBD5E1; --lijn-zacht: #E2E8F0;
  --inkt: #334155; --zacht: #475569; --kop: #0F172A;
  /* Stiller dan `--zacht`: CAS' slate-400 voor de zin die zegt dát er niets is
     ("Nog geen acties vastgelegd.", nagemeten in CAS 16-09 op de projectkaart).
     Alleen daarvoor — voor leesbare tekst blijft `--zacht` de ondergrens. */
  --stil: #94A3B8;
  --zebra: #F8FAFC;   /* de even rij van een CAS-tabel; geen hairline erbij, de tint doet het werk */
  --balk: #0F172A; --balk-tekst: #FFFFFF; --balk-zacht: #94A3B8; --balk-vlak: #1E293B; --balk-lijn: #334155;
  --geel: #D8AB0F; --geel-inkt: #B28D0D; --geel-zacht: #FFFCF3;
  --groen: #157C3B; --groen-zacht: #E4FBE9; --rood: #C03639; --rood-zacht: #FFE2E4;
  /* `--amber` was met opzet dezelfde kleur als `--geel-inkt`. Dat kan niet meer:
     `--geel-inkt` staat nu op CAS' eigen #B28D0D en dat haalt op zijn lichtste
     gele vlak 3,05:1. Bij CAS draagt die combinatie alleen een paginanummer en
     een tabnaam — die halen hun betekenis ook uit vorm en plaats. Onze amber
     draagt een standwóórd dat je moet kúnnen lezen, dus die houdt zijn eigen,
     donkerder geel op 4,5:1. */
  --amber: #886B0B; --amber-zacht: #FEFAEF; --grijs: #64748B; --grijs-zacht: #E2E8F0;
  --rij: #F1F5F9; --focus: #0F172A;
  --knoptekst: #474747;   /* CAS zet de tekst van een kaderknop op #474747, niet op zijn slate (dump exportBtn/moduleKoppeling) */
  --tabinkt: #3E3E3E;     /* en de tekst van een niet-gekozen tabblad op #3E3E3E (nameting 17-09, p-tab op de projectkaart) */
  /* De streep van een arcering ("niet na te gaan"), over een vlak heen; volgt
     de lijn, dus geen eigen waarde per thema. Papier zet hem lichter dan de
     lijn, anders wordt de arcering daar een zwart blok (delen/afdruk.ts). */
  --arcering: var(--lijn);
  --pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B6B6B' stroke-width='1.5'/%3E%3C/svg%3E");
  /* De loep ín het zoekveld, zoals CAS (35 px inspringing links, dump
     `searchInput`). Als tekening en niet als los teken, zodat ook de zes
     zoekvelden die buiten de lijst-bouwsteen met de hand zijn getekend hem
     dragen zonder dat elk scherm er markering voor hoeft te schrijven. */
  /* Het vinkteken in een aangevinkt vakje; wit, want het vlak eronder is CAS-geel. */
  --vink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.5l3 3 6-6' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --loep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%236B6B6B' stroke-width='1.5'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5L14 14'/%3E%3C/g%3E%3C/svg%3E");
  /* De schaduw van CAS, letterlijk uit de dump (`card`): twee lagen, zwart met
     10 %, geen eigen tint. De onze was een grijsblauwe wolk van 6 px en dat gaf
     de kaarten een andere hoogte dan die van CAS. */
  --schaduw: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);   --schaduw-zwaar: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
  --schaduw-op: 0 -1px 3px rgba(0, 0, 0, .1), 0 -1px 2px -1px rgba(0, 0, 0, .1);
  --schaduw-veld: 0 1px 2px rgba(18, 18, 23, .05);   /* CAS' veld- en knopschaduw (dump searchInput) */
  --gutter: 28px;           /* CAS' paginamarge rondom (dump: main padding 28px); wordt 16 op kleine schermen */
  --r1: 3.5px; --r2: 7px; --r3: 10.5px; --r4: 14px; --r5: 21px; --r6: 28px;   /* de ruimteschaal van CAS: 0,25 t/m 2 rem op een grondmaat van 14 px (dumps: gap 7, padding 7/10,5, celpadding 10,5/14, paginamarge 28) */
  --straal: 6px; --straal-menu: 7px; --straal-groot: 12px; --straal-zwaar: 12px;   /* knop en veld · menu-item · kaart · wat zweeft */
  --overgang: 160ms ease;   /* alleen bij toestandverandering; uit bij prefers-reduced-motion (§22) */
  --breedte: 1280px; --breedte-breed: 1680px;
  /* De matrix (VOR's × fasen) heeft twee eigen kleuren: een celrand die op wit
     3,4:1 haalt en het vlak van "nog niet aan toe". Overgebracht uit
     delen/kern.ts (D3b-2). */
  --matrix-lijn: #7F8C98; --matrix-later: #F2F5F7;
  /* De twee bronkleuren van de tijdlijn per fase (CAS-blauw voor
     werkvoorbereiding, projectmap-oker voor expeditie); idem D3b-2. */
  --bron-cas: #165F96; --bron-cas-zacht: #E8F3FB;
  --bron-map: #75510C; --bron-map-zacht: #FFF3D6;
  color-scheme: light;
}

/* Donker is een eigen palet, geen omgekeerd licht: geen pure zwarten, vlakken 9 %
   lichter dan de grond, een *gedempt* geel (#C79C2B, met inkt-tekst 6,3:1) en een randlicht
   in plaats van een schaduw. CAS heeft er geen; dit is een afleiding. CAS-KLEUREN.md §4. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --pagina: #17181A; --grond: #17181A; --vlak: #202124; --vlak-2: #2A2C30; --lijn: #35373B; --lijn-zacht: #2C2E32;
    --inkt: #E8E8E8; --zacht: #A6A6A6; --kop: #F5F5F5; --zebra: #1D1E21; --knoptekst: #C9C9C9;
    --stil: #7E7E7E;
    --balk: #101113; --balk-tekst: #E8E8E8; --balk-zacht: #A6A6A6; --balk-vlak: #202124; --balk-lijn: #2E3034;
    --geel: #C79C2B; --geel-inkt: #E0B653; --geel-zacht: #2B2617;
    --groen: #5FC287; --groen-zacht: #16291E; --rood: #F08A8C; --rood-zacht: #33201F;
    --amber: #E0B653; --amber-zacht: #2B2617; --grijs: #A3A9B5; --grijs-zacht: #2A2C31;
    --rij: #26282C; --focus: #E8E8E8;
    --matrix-lijn: #7C8791; --matrix-later: #24262B;
    --bron-cas: #8EC4EE; --bron-cas-zacht: #14253A; --bron-map: #E7BE74; --bron-map-zacht: #2E2410;
    --pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A6A6A6' stroke-width='1.5'/%3E%3C/svg%3E");
    --schaduw: 0 0 0 1px rgba(255, 255, 255, .045), 0 2px 6px rgba(0, 0, 0, .5);
    --schaduw-veld: 0 0 0 1px rgba(255, 255, 255, .04);
    --schaduw-zwaar: 0 0 0 1px rgba(255, 255, 255, .06), 0 16px 40px rgba(0, 0, 0, .6);
    --schaduw-op: 0 0 0 1px rgba(255, 255, 255, .045), 0 -8px 24px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-thema="donker"] {
  --pagina: #17181A; --grond: #17181A; --vlak: #202124; --vlak-2: #2A2C30; --lijn: #35373B; --lijn-zacht: #2C2E32;
  --inkt: #E8E8E8; --zacht: #A6A6A6; --kop: #F5F5F5; --zebra: #1D1E21; --knoptekst: #C9C9C9;
  --stil: #7E7E7E;
  --balk: #101113; --balk-tekst: #E8E8E8; --balk-zacht: #A6A6A6; --balk-vlak: #202124; --balk-lijn: #2E3034;
  --geel: #C79C2B; --geel-inkt: #E0B653; --geel-zacht: #2B2617;
  --groen: #5FC287; --groen-zacht: #16291E; --rood: #F08A8C; --rood-zacht: #33201F;
  --amber: #E0B653; --amber-zacht: #2B2617; --grijs: #A3A9B5; --grijs-zacht: #2A2C31;
  --rij: #26282C; --focus: #E8E8E8;
  --matrix-lijn: #7C8791; --matrix-later: #24262B;
  --bron-cas: #8EC4EE; --bron-cas-zacht: #14253A; --bron-map: #E7BE74; --bron-map-zacht: #2E2410;
  --pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A6A6A6' stroke-width='1.5'/%3E%3C/svg%3E");
  --schaduw: 0 0 0 1px rgba(255, 255, 255, .045), 0 2px 6px rgba(0, 0, 0, .5);
  --schaduw-veld: 0 0 0 1px rgba(255, 255, 255, .04);
  --schaduw-zwaar: 0 0 0 1px rgba(255, 255, 255, .06), 0 16px 40px rgba(0, 0, 0, .6);
  --schaduw-op: 0 0 0 1px rgba(255, 255, 255, .045), 0 -8px 24px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* ─── 3. Basis ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }
body.wk-body {
  margin: 0;
  min-height: 100%;
  background: var(--pagina);
  color: var(--inkt);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* De basisregels staan in :where() en tellen dus niet mee in specificiteit: elke
   bouwsteenklasse (0,1,0) wint ervan. Zonder dat zou `a { underline }` de
   navigatie onderstrepen en `button { color: inherit }` de gele knop lichte tekst
   geven in het donkere thema. */
:where(.wk-body) :where(h1, h2, h3, p) { margin: 0; }
:where(.wk-body) :where(b, strong) { font-weight: 600; }
:where(.wk-body) a { color: inherit; text-decoration: underline; text-decoration-color: var(--lijn); text-underline-offset: 3px; }
:where(.wk-body) a:hover { text-decoration-color: var(--geel-inkt); }
:where(.wk-body) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.wk-body) button { cursor: pointer; }
:where(.wk-body) :where(img, svg) { max-width: 100%; }
.wk-body :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wk-body [aria-busy="true"] { opacity: .6; cursor: progress; }
/* `hidden` moet het altijd winnen. De browser geeft het attribuut alleen
   `display: none` als geen enkele regel een display zet — en de basisregels
   voor de knop (§16) en het veld (§15) doen dat wel. Zonder deze regel stond
   "Stoppen en bewaren" naast Inspreken op de kanskaart terwijl de opname nog
   niet liep. 13-09. */
[hidden] { display: none !important; }

.wk-zacht { color: var(--zacht); }
.wk-klein { font-size: 12.25px; }
.wk-rechts { text-align: right; }
.wk-getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk-nummer { font-weight: 600; }
.wk-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* De basisvorm van elk menu-icoon. Die stond er niet: zonder maat vult een
   <svg class="ico"> zijn hele houder, en zonder stroke-regels vult hij zich
   zwart -- op /werk stond daardoor een zwarte cirkel van 900 px waar één
   informatie-icoontje hoorde te staan (gezien op de doorloop van 10-09). */
.ico {
  flex: none; width: 16px; height: 16px; vertical-align: -2px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.wk-bron { font-size: 12.25px; color: var(--zacht); }          /* "uit CAS · gewijzigd 5 mrt" */
/* Het systeemvlaggetje in een menu ("CAS", "CAS-app"). Heette `.wk-chip` en
   deelde die naam met de gegevenschip van §13: gelijke specificiteit, dus elke
   gegevenschip in de tool kreeg hier hoofdletters, 18 px hoogte tegen 20 px
   regelhoogte en een marge van 6 px links. Twee dingen, twee namen. 13-09. */
.wk-systeem {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; margin-left: 6px;
  border-radius: 999px; background: var(--grijs-zacht); color: var(--zacht);
  font-size: 10.5px; font-weight: 600;
}

/* ─── 4. Zijbalk ─────────────────────────────────────────────────────────── */

/* De zijbalk is een zwevende witte kaart, geen strook met een rand (CAS-GELIJK,
   16-09; dump cas-projectenlijst `sidebar*`/`logo`/`nav*`): aside 300 px met
   28 px marge links, boven en onder, dus een kaart van 272 px met 14 px
   binnenruimte. Eén ondergrond met twee zwevende vlakken, zoals CAS. */
.wk-metzij { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; align-content: start; }
/* CAS' inhoud begint 28 px naast de zijbalkkaart en loopt tot 28 px van de
   rand: de paginamarge is rondom gelijk (dump `main`: padding 28px). En geen
   leesbreedte meer naast de zijbalk — CAS' kaart vult de breedte, de onze
   stopte op 1.680 en liet rechts een grijze baan staan. */
.wk-metzij > .wk-inhoud { max-width: none; margin: 0; padding: var(--r6); }
.wk-zij {
  position: sticky; top: 0; align-self: start; z-index: 30;
  display: flex; flex-direction: column;
  height: 100vh; padding: var(--r6) 0 var(--r6) var(--r6);
  background: none; border-right: 0;
}
.wk-zijhouder { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.wk-zijhouder::details-content { min-height: 0; height: 100%; }
/* Nagemeten in CAS (16-09): 272 x 1125 op 28,28, straal 10,5, CAS' zwaardere
   schaduw; logovak, menulijst en voet sluiten aan met eigen 14 px binnenruimte. */
.wk-zijbinnen { display: flex; flex-direction: column; gap: 0; height: 100%; min-height: 0; padding: 0; background: var(--vlak); border-radius: 10.5px; box-shadow: var(--schaduw-zwaar); }
.wk-zijhuidig { cursor: pointer; min-height: 44px; padding: var(--r2); }
.wk-zijhuidig span { margin-left: var(--r2); font-weight: 600; }
/* Op laptopbreedte geen menuknop: de houder is een `details` die in de HTML
   dicht staat (anders flitst een telefoon eerst 330 px menu), hier open met CSS.
   Ingevouwen (CAS' knop ‹ op de rand, afdruk 05) blijven alleen de tekens. */
.wk-zijinvouw { position: absolute; top: 50%; right: -11px; width: 22px; height: 22px; padding: 0; border: 1px solid var(--lijn); border-radius: 50%; background: var(--vlak); box-shadow: var(--schaduw); color: var(--zacht); font-size: 14px; line-height: 1; cursor: pointer; }
@media (min-width: 681px) {
  .wk-zijhuidig { display: none; }
  .wk-zijhouder::details-content { content-visibility: visible; }
  .wk-zijsmal .wk-metzij { grid-template-columns: 104px minmax(0, 1fr); }
  .wk-zijsmal .wk-zij :is(.wk-merk, .wk-zoek, .wk-zijgroep, .wk-zijpijl, .wk-wienaamrol, .wk-zijdomein > span, .wk-zijlink > span) { display: none; }
  .wk-zijsmal .wk-zijdomein .ico { margin-right: 0; }
  .wk-zijsmal .wk-zijinvouw { transform: rotate(180deg); }
}
/* CAS' woordmerk gecentreerd bovenin de kaart, 185 x 72 (dump `logo`), uit
   assets/huisstijl/htv-woordmerk.png. */
/* Het logovak is 272 x 100: 14 px binnenruimte om een merk van 72 hoog. */
.wk-merk { display: flex; align-items: center; justify-content: center; flex: none; height: 100px; padding: var(--r4); text-decoration: none; }
.wk-merkbeeld { width: 185px; height: 72px; max-width: 100%; border-radius: 0; display: block; object-fit: contain; }

/* Zoeken staat in de balk, niet boven de inhoud: zo kost R12 geen strook. */
.wk-zij .wk-zoek { display: flex; align-items: center; position: relative; flex: none; padding: 0 var(--r4) var(--r2); }
.wk-z { position: absolute; left: 9px; color: var(--zacht); font-size: 12.25px; pointer-events: none; }
.wk-zij .wk-zoek input {
  width: 100%; height: 34px; padding: 7px 10.5px 7px 35px;
  background: var(--vlak) var(--loep) no-repeat left 12px center / 14px 14px;
  border: 1.25px solid var(--lijn); border-radius: var(--straal);
  box-shadow: var(--schaduw-veld);
  color: var(--inkt); font-size: 14px;
}
.wk-zij .wk-zoek input::placeholder { color: var(--zacht); }
.wk-zij .wk-zoek input:focus-visible { outline-offset: 0; }

.wk-zijmenu { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; margin: 0; padding: 0 var(--r4); }
.wk-zijvak { display: block; }
.wk-zijvak > summary { list-style: none; display: flex; align-items: center; cursor: pointer; }
.wk-zijvak > summary::-webkit-details-marker { display: none; }
/* 34 px hoog, straal 7, 7/10,5 binnenruimte, slate-600 (dump `navDashboard`).
   De doorzichtige rand van 1,25 px staat er altijd: zonder die rand verspringt
   het woord een pixel zodra het item actief wordt en zijn rand krijgt. */
.wk-zijdomein {
  display: flex; align-items: center; flex: 1 1 auto; min-width: 0;
  height: 34px; padding: 7px 10.5px; border-radius: var(--straal-menu);
  border: 1.25px solid transparent;
  color: var(--zacht); font-size: 14px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--overgang), background-color var(--overgang);
}
/* CAS zet onder de muis hetzelfde witte kaartje neer als bij "je bent hier",
   maar zonder schaduw en zonder donkerder tekst (nameting 17-09: bg #FFF,
   rand #E2E8F0, tekst blijft slate-600). Ons grijze vlak was een andere beweging. */
.wk-zijdomein:hover { background: var(--vlak); border-color: var(--lijn-zacht); text-decoration: none; }
/* "Je bent hier" is inkt, niet geel (§5-regel van 14-09, nu R50). */
/* "Je bent hier" is bij CAS een wit kaartje in de kaart: wit vlak, rand
   slate-200, dezelfde schaduw, tekst slate-900 op 500 (dump `navProjectenRow`).
   Geen vet en geen geel. */
.wk-zijdomein.wk-aan { color: var(--kop); font-weight: 400; background: var(--vlak); border-color: var(--lijn-zacht); box-shadow: var(--schaduw); }
.wk-zijdomein.wk-aan > span { color: var(--kop); font-weight: 500; }
.wk-zijdomein.wk-leeg { color: var(--zacht); font-weight: 400; cursor: default; }
/* Het domeinteken (R57). De ingangen eronder dragen géén teken: dan zou elke
   regel er één hebben en onderscheidt het niets meer. */
/* CAS' menu-icoon is 14 x 14 in dezelfde kleur als het woord ernaast, met 7 px
   ertussen (nameting 17-09: `i.pi` 14 px, #475569, gap-2). Het onze was 16 px
   en 15 % lichter — een grotere, vagere vlek naast een kleiner woord. */
.wk-zijdomein .ico { width: 14px; height: 14px; margin-right: var(--r2); }
.wk-zijdomein > span { overflow: hidden; text-overflow: ellipsis; }
.wk-zijpijl { flex: none; width: 14px; color: var(--zacht); font-size: 10.5px; text-align: center; transition: transform var(--overgang); }
.wk-zijvak[open] > summary .wk-zijpijl { transform: rotate(180deg); }

/* De ingangen van het open domein. Dit is wat de burenbalk deed, maar zonder
   dat het een strook kost; de streep links houdt de groep bij elkaar. */
/* CAS springt zijn subitems in en zet er een boomteken voor ("↳ Actieve
   projecten", afdruk 16); de rij zelf blijft even hoog en even groot als het
   domein erboven, alleen 5 px smaller (dump `subActiefRow`: 238,8 tegen 244).
   Onze inspringing zonder teken maakte er een tweede, losse lijst van. */
.wk-zijgroep { display: grid; margin: 0 0 var(--r2) 5px; padding-left: 0; border-left: 0; }
/* Subitems staan bij CAS in dezelfde maat als hun domein — 34 px hoog, 14 px
   letter — alleen ingesprongen (dump `subActief`/`subAnder`: padding 7/12,25,
   breedte 238,8 tegen 244 van het domein). Onze 26 px / 12 px maakte er een
   tweede, kleinere navigatie van. */
.wk-zijingang::before { content: "↳"; flex: none; width: 14px; color: var(--zacht); opacity: .55; }
.wk-zijingang.wk-aan::before { opacity: 1; }
.wk-zijingang {
  display: flex; align-items: center; gap: 3.5px; min-height: 34px; padding: 7px 12.25px; line-height: 1.25;
  border-radius: var(--straal-menu); color: var(--inkt); font-size: 14px; text-decoration: none;
  transition: color var(--overgang), background-color var(--overgang);
}
.wk-zijingang:hover { background: var(--vlak); border-color: var(--lijn-zacht); text-decoration: none; }
/* Een actief subitem draagt alleen een vlak, geen zwaardere letter: CAS zet
   hem op 400 en laat de tint het werk doen (dump `subActief`). */
.wk-zijingang.wk-aan { color: var(--kop); font-weight: 400; background: var(--vlak-2); }

.wk-zijvoet { flex: none; display: grid; gap: 0; margin: 0 var(--r4); padding: var(--r2) 0; border-top: 1px solid var(--lijn-zacht); }
/* Onze Melden-knop staat onder HRM; de voet houdt CAS' vier links. */
.wk-zijgroep .nw-melden { margin: 0; }
.wk-zijlink, .wk-zijgroep .nw-melden > summary {
  display: flex; align-items: center; gap: var(--r2); height: 34px; padding: 7px 10.5px;
  border: 1.25px solid transparent; border-radius: var(--straal-menu);
  color: var(--zacht); font-size: 14px; text-decoration: none;
}
.wk-zijlink .ico, .wk-zijgroep .nw-melden > summary .ico { width: 14px; height: 14px; }
.wk-zijlink:hover, .wk-zijgroep .nw-melden > summary:hover { background: var(--vlak); border-color: var(--lijn-zacht); }
.wk-zijgroep .nw-melden > summary { list-style: none; cursor: pointer; text-decoration: none; }
.wk-zijgroep .nw-melden > summary::-webkit-details-marker { display: none; }
.wk-zijgroep .nw-meldform { display: grid; gap: var(--r2); padding: var(--r2); }
.wk-zijgroep .nw-meldform textarea { width: 100%; min-height: 64px; }
.wk-zijlink.wk-aan { color: var(--inkt); font-weight: 600; }
/* Instellingen is in de voet dezelfde sectie als een domein hierboven, en sinds
   17-09 ook in dezelfde maat: CAS maakt zijn voetregels niet kleiner. */
.wk-wie { display: flex; align-items: center; gap: var(--r2); min-width: 0; margin-top: var(--r2); padding: 0 var(--r2); }
.wk-bol {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vlak-2); box-shadow: inset 0 0 0 1px var(--lijn);
  color: var(--inkt); font-size: 10.5px; font-weight: 600;
}   /* De initialen waren een gele bol — een tweede geel dat geen handeling is. 14-09. */
.wk-wienaamrol { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.wk-wienaam { font-size: 12.25px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-wierol { font-size: 12.25px; color: var(--zacht); }
.wk-niemand { font-size: 12.25px; color: var(--zacht); }

/* ─── 6. Pagina ──────────────────────────────────────────────────────────── */

.wk-inhoud { max-width: var(--breedte); margin: 0 auto; padding: var(--r2) var(--gutter) 40px; }
.wk-inhoud-breed { max-width: var(--breedte-breed); }
.wk-stapel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }   /* panelen en lijstvakken onder elkaar */
.wk-tweekolom { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.wk-tweekolom > *, .wk-driekolom > *, .wk-stapel, .wk-stapel > * { min-width: 0; }
/* De kaartopbouw van CAS (afdruk 12/19): drie gelijke kolommen, gegevens · gegevens · Acties. */
.wk-driekolom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; } .wk-driekolom > form { display: contents; }   /* het veldenformulier omsluit twee kolommen en mag zelf geen kolom worden */
.wk-gelijk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* ─── 7. Kop ─────────────────────────────────────────────────────────────── */

/* Lijst en werkscherm: titel links, handelingen rechts, altijd op dezelfde plek. */
/* CAS heeft boven een lijst geen titel; wij houden hem om de i van R48, maar op
   CAS' kopmaat van 14 px in een strook van 36. R58, CAS-SKELET-MATEN §2/§9. */
.wk-kop { display: flex; align-items: center; gap: 12px; min-height: 36px; margin: 8px 0 8px; }
.wk-kop h1 { font-size: 14px; font-weight: 600; line-height: 1.2; display: flex; align-items: center; gap: 8px; }
.wk-kop .wk-knoppen { margin-left: auto; }

/* Kaart: twee regels, nooit een derde. Rechts werkwoorden en ‹ ›. */
.wk-kaartkop { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 2px; margin: 12px 0 10px; }
.wk-kaartkop-titel, .wk-kaartkop-regel { grid-column: 1; }
/* CAS' kaarttitel ("#27211371 - Aanpassing Salm bleiswijk") is 15,75 px/600 en
   de regel eronder 12,25 px in een stillere grijs (nameting 17-09). */
.wk-kaartkop-titel { font-size: 15.75px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.wk-kaartkop-titel .wk-stand { font-size: 14px; font-weight: 600; }   /* 13 px: op 12 verdween het belangrijkste woord van de kaart naast de titel. 14-09. */
.wk-kaartkop-regel { font-size: 12.25px; color: var(--grijs); display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }
.wk-kaartkop-regel > * + *::before { content: "·"; margin: 0 10px; color: var(--zacht); opacity: .4; }   /* Bij zeven feiten gaf `· · · · · ·` een grijze puntenreeks; lichter, meer lucht. 14-09. */
.wk-kaartkop-regel a { color: var(--inkt); }
.wk-kaartkop-regel b { color: var(--inkt); }
.wk-kaartkop-rechts { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; align-items: center; gap: 8px; }
/* Kopje binnen een scherm: boven een tweede tabel of een groepje velden. Elke
   kop had hier zijn eigen h3-regel (`.wgr h3`, `.wkd-gate0 h3`, `.wpt`-secties,
   `.vof-vel h4`); één naam, één maat. D3b-1. */
.wk-tussenkop { margin: 18px 0 6px; font-size: 14px; font-weight: 600; }

.wk-blader { display: inline-flex; gap: 2px; margin-left: 4px; }
.wk-blader .wk-knop { width: 28px; padding: 0; color: var(--zacht); }
.wk-blader .wk-knop:hover { color: var(--inkt); }

/* ─── 8. Ketenstrip ──────────────────────────────────────────────────────── */

/* Eén regel, alle stappen: gedaan groen, nu geel, te laat rood; rechts "Volgende". */
.wk-keten {   /* Acht knopen met een lijn ertussen lezen als een tabelrij; de lijnen zijn weg. 14-09. */
  display: flex; align-items: stretch; height: 34px; margin: 0 0 var(--r3);
  background: var(--vlak); border-radius: var(--straal); box-shadow: var(--schaduw);
  overflow-x: auto; scrollbar-width: none;
}
.wk-keten::-webkit-scrollbar { display: none; }
.wk-knoop {
  position: relative;
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 var(--r2);
  color: var(--zacht); font-size: 12.25px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--overgang), background-color var(--overgang);
}
.wk-knoop-gedaan { color: var(--groen); }
.wk-knoop-nu { background: var(--geel-zacht); color: var(--inkt); font-weight: 600; box-shadow: inset 0 -2px 0 var(--geel); }
.wk-knoop-laat { color: var(--rood); font-weight: 600; }
.wk-knoop-later { color: var(--zacht); }

/* De zijstand van de verkoopketen staat als losse regel onder de strip: een
   kans die niet doorloopt heeft geen knoop om op te zitten. Overgebracht uit
   stijl.ts (D3b-2). */
.wc-keten-zijstand { margin: -6px 0 12px; color: var(--zacht); font-size: 12.25px; font-weight: 600; }

/* ─── 9. Tabbladen ───────────────────────────────────────────────────────── */

/* Eén vorm: tekst, teller erachter, geel eronder. Hoogstens acht, geen pijlen.
   Maat en kleur uit de dump van CAS' projectkaart (`tabRow`, `tabInfo`): een
   rij van 47 px met een onderlijn van 1,25 px in slate-200, en per tab 14 px
   ruimte boven en onder en 15,75 links en rechts. Wij hadden een rij van 36 px
   met 24 px lucht ertussen — smaller, dichter, en daardoor meteen herkenbaar
   als een andere tool. */
.wk-tabs { display: flex; gap: 0; height: 47px; margin: 0 0 16px; border-bottom: 1.25px solid var(--lijn-zacht); overflow-x: auto; scrollbar-width: none; }
.wk-tabs::-webkit-scrollbar { display: none; }
.wk-tab {
  display: inline-flex; align-items: center; gap: 7px; height: 47px; flex: none; padding: 14px 15.75px;
  color: var(--tabinkt); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  border-bottom: 1.25px solid transparent; margin-bottom: -1.25px;
}
.wk-tab { transition: color var(--overgang), border-color var(--overgang); }
.wk-tab:hover { color: var(--inkt); text-decoration: none; }
/* Het tabicoon: 14 px in de kleur van het woord, dus ook goud zodra het tabblad
   het gekozen tabblad is (nameting 17-09: pi-info-circle 14 px in #D8AB0F). */
.wk-tab .ico { width: 14px; height: 14px; }
/* CAS' eigen geel als tekstkleur, met een gele onderlijn eronder (dump
   `tabInfo`: #D8AB0F op 600, border-bottom 1,25px in dezelfde kleur). Dit is
   de enige plek waar we CAS' geel op wit als tekst overnemen; het haalt 2,4:1
   en draagt daarom nooit informatie alléén — het woord staat er vet bij, met
   de streep eronder en `aria-current` erin. Wijzigt R58, dat hier `--geel-inkt`
   voorschreef: dat was zichtbaar een ander geel dan dat van CAS. */
.wk-tab.wk-aan { color: var(--geel); font-weight: 600; border-bottom-color: var(--geel); }
.wk-tabs .wk-knoppen { margin-left: auto; align-self: center; }   /* CAS zet Opslaan rechts in de tabrij, niet onder de velden (R23 wijzigt) */
.wk-aantal { font-size: 12.25px; font-weight: 400; color: var(--zacht); font-variant-numeric: tabular-nums; }
.wk-tab.wk-let .wk-aantal { color: var(--rood); font-weight: 600; }

/* De dossiertabbalk (kern/dossiertabs.ts) tekent chips in plaats van tabs: één
   kaart met acht tabbladen leest als een rij knoppen, niet als een tabrij. De
   chipvorm zelf staat in delen/kern.ts (nw-fchip); dit is de maat binnen de
   tabbalk. Overgebracht uit stijl.ts (D3b-2). */
.wc-tabs .nw-fchip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border-radius: var(--straal-groot); font-size: 12.25px; font-weight: 600; }
.wc-tabs .nw-fchip:hover { border-color: var(--grijs); color: var(--inkt); }
.wc-tabs .nw-fchip b { color: currentColor; font-size: 10.5px; font-weight: 700; opacity: .7; }
.wc-tabs .nw-fchip.nw-aan b { opacity: 1; }

/* ─── 10. Tellers ────────────────────────────────────────────────────────── */

/* Werkscherm: één regel tellers die als filter werken. */
/* Veel tellers blijven op een regel en schuiven zoals de ketenstrip. */
.wk-tellers { display: flex; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; gap: 4px; margin: 0 0 12px; }
.wk-teller {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border-radius: var(--straal); color: var(--zacht); font-size: 14px; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
}
.wk-teller b { color: var(--inkt); font-size: 14px; }
.wk-teller:hover { background: var(--vlak-2); color: var(--inkt); text-decoration: none; }
/* Een aanstaande teller is een filter dat áán staat, geen tabblad: een gevuld
   vlakje, niet het gele streepje van "je bent hier". 13-09. */
.wk-teller { transition: background-color var(--overgang), color var(--overgang); }   /* `--vlak-2` op `--grond` is 3 %: "aan" was nauwelijks te zien. Een echt vlak wel. 14-09. */
.wk-teller.wk-aan { color: var(--inkt); font-weight: 600; background: var(--vlak); box-shadow: var(--schaduw); }
.wk-teller.wk-aan:hover { background: var(--vlak); }
.wk-teller-rood :is(b, .wk-ico) { color: var(--rood); }
.wk-teller-amber :is(b, .wk-ico) { color: var(--amber); }
.wk-teller-groen :is(b, .wk-ico) { color: var(--groen); } .wk-teller-geel :is(b, .wk-ico) { color: var(--geel-inkt); }

/* De cijferstrip van `tegels()` (kern/vorm.ts) was een raster van kaartjes met
   een 20-px getal en een schaduw: de tegels die Moreno op 23-08 afwees en die
   R32 verbiedt. Zelfde getallen, één regel, vorm van de tellerregel. 13-09. */
.nw-tegels { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin: 0 0 12px; }
.nw-tegel { display: inline-flex; align-items: baseline; gap: 6px; height: 30px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.nw-tegel .nw-cijfer { font-size: 14px; font-weight: 600; color: var(--inkt); font-variant-numeric: tabular-nums; }
.nw-tegel .nw-cijfer small { font-size: 12.25px; font-weight: 400; color: var(--zacht); margin-left: 4px; }
.nw-tegel .nw-tegelwat { font-size: 14px; color: var(--zacht); }
.nw-tegel.nw-let .nw-cijfer { color: var(--rood); }   /* niet dood: tegels() bouwt `nw-` + toon, en de verkoopwerklijst zet toon 'let' */
.nw-tegel.nw-goed .nw-cijfer { color: var(--groen); }
.nw-tegel.nw-wacht .nw-cijfer { color: var(--amber); }
a.nw-tegel { text-decoration: none; color: inherit; }
a.nw-tegel:hover .nw-tegelwat { color: var(--inkt); }

/* De kerngetallen (VB-1, 14-09): hooguit vier getallen bovenaan, op de grond.
   Géén tegel: het getal is groot, de rest is stil. De balk is dezelfde
   `.wk-balk` als bij "VOR's klaar", alleen breder en zonder het x/y ernaast. */
/* Eén stille regel boven de kaart, in CAS' letter en kleur en zonder eigen
   vlak (CAS-GELIJK, 16-09). De kerngetallen blijven — Moreno, 15-09: "grote
   getallen houden" — maar het blok met twee cijfers van 21 px duwde de lijst
   zelf een strook omlaag, en dat is precies wat CAS boven een lijst níét doet.
   Het getal is nu 14 px op 600 naast zijn woord, op één regel. */
.wk-kern { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r2) var(--r5); margin: 0 0 var(--r3); }
.wk-kerngetal { display: inline-flex; align-items: baseline; gap: 7px; color: inherit; text-decoration: none; }
.wk-kerngetal > b { font-size: 14px; font-weight: 600; line-height: 18.75px; font-variant-numeric: tabular-nums; }
.wk-kernlabel { font-size: 14px; color: var(--zacht); }
.wk-kerngetal:hover > b { text-decoration: underline; text-decoration-color: var(--geel-inkt); text-underline-offset: 3px; }
/* De vulling van een losse `<progress>` is bij Chrome het systeemblauw; het
   palet is gesloten (§6), dus zet elke browser hier zijn eigen pseudo-element. */
progress.wk-kernbalk { appearance: none; border: 0; vertical-align: middle; width: 56px; height: 6px; margin-top: 0; border-radius: 3px; overflow: hidden; background: var(--grijs-zacht); color: var(--groen); }
progress.wk-kernbalk::-webkit-progress-bar { background: var(--grijs-zacht); }
progress.wk-kernbalk::-webkit-progress-value { background: currentColor; }
progress.wk-kernbalk::-moz-progress-bar { background: currentColor; }
.wk-kernrichting { font-size: 12.25px; color: var(--zacht); font-variant-numeric: tabular-nums; }
/* De grafiek (kern/opmaak/grafiek.ts): één reeks in de inkt, hairline-raster in de lijnkleur; een negatieve kolom is rood én staat onder de nullijn, kleur is nooit het enige teken; tekst draagt nooit de reekskleur. De SVG schaalt mee met de breedte: op een smal scherm (viewBox 720 op ±330 px) worden de aslabels op 21 px gezet, zodat ze na het schalen rond de 10 px uitkomen. */
.wk-grafiek { margin: 0 0 var(--r3); max-width: 720px; } .wk-grafiek svg { display: block; width: 100%; height: auto; }
.wk-grafiek-raster { stroke: var(--lijn-zacht); stroke-width: 1; shape-rendering: crispEdges; } .wk-grafiek-nul { stroke: var(--lijn); }
.wk-grafiek-as { font-size: 10.5px; fill: var(--zacht); font-variant-numeric: tabular-nums; } .wk-grafiek-eind { font-size: 12.25px; font-weight: 600; fill: var(--inkt); font-variant-numeric: tabular-nums; }
.wk-grafiek-lijn { fill: none; stroke: var(--kop); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .wk-grafiek-stip { fill: var(--kop); stroke: var(--vlak); stroke-width: 2; }
.wk-grafiek-kolom { fill: var(--kop); } .wk-grafiek-negatief { fill: var(--rood); } .wk-grafiek-stip:hover, .wk-grafiek-kolom:hover { opacity: .75; }
@media (max-width: 500px) { .wk-grafiek-as, .wk-grafiek-eind { font-size: 21px; } }

/* ─── 11. Werkbalk en filterlade ─────────────────────────────────────────── */

/* CAS' werkbalk boven een lijst: zoekveld links, kaderknoppen rechts, en verder
   niets — geen titel, geen kerngetallen, geen tellerregel, geen open rij
   keuzelijsten (dump cas-projectenlijst). De filters liggen achter "Filters" in
   een lade. Wat hier stond was een ketting van `:has(+ …)`-regels die per
   combinatie van werkbalk, tellers, bulkbalk en voet een andere straal zette;
   `.wk-kaart` uit `kern/lijst.ts` doet dat nu met één regel. */
/* `.nw-kaart` en `.nw-tabelhouder` staan erbij om dezelfde reden als
   `.nw-knopje` bij de knop (§16): de oude namen worden nog op ruim twintig
   schermen getekend (de werklijst, de gates, de mailrapporten, HRM, Logistiek)
   en hadden sinds de opschoning gééń vorm meer — die schermen stonden kaal op
   de grond terwijl elk CAS-scherm zijn inhoud op een witte kaart zet. Eén naam
   erbij is hier goedkoper dan twintig schermen herschrijven; wie zo'n scherm
   toch aanraakt, zet hem over op `.wk-kaart`. */
.wk-kaart, .nw-kaart, .nw-tabelhouder { min-width: 0; background: var(--vlak); border-radius: var(--straal-groot); box-shadow: var(--schaduw); }
/* Een kaart in een kaart bestaat bij CAS niet: staat de tabelhouder al binnen
   een kaart, dan draagt alleen de buitenste de schaduw en de ronding. (17-09) */
:is(.wk-kaart, .nw-kaart, .wk-lijstvak, .wk-paneel) :is(.nw-tabelhouder, .nw-kaart) { background: none; border-radius: 0; box-shadow: none; }
.wk-kaart > .wk-tabelvak { background: none; border-radius: 0; box-shadow: none; }
.wk-kaart > .wk-tellers { margin: 0; padding: var(--r2) var(--r4) 0; }

.wk-werkbalk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r2); padding: var(--r4); }
.wk-werkbalk-rechts { display: flex; align-items: center; gap: var(--r2); margin-left: auto; }
/* De loep zit ín het veld, zoals bij CAS: 35 px inspringing links (dump
   `searchInput`, padding 7px 35px). */
.wk-zoekvak { position: relative; display: inline-flex; align-items: center; }
.wk-zoekvak .wk-z { position: absolute; left: 12px; color: var(--zacht); font-size: 14px; pointer-events: none; }
/* Eén zoekveld voor de hele tool: CAS' 35 px links met de loep erin, en dus
   niet alleen in de werkbalk van de lijst-bouwsteen. De zes handgetekende
   zoekvelden (Kansen, Kennisbank, de buitendienstzoeker, de tijdlijn, de keten,
   de globale zoekpagina) stonden zonder loep en zonder inspringing. */
.wk-vak.wk-zoekveld, .wk-zoekveld {
  padding-left: 35px; padding-right: 35px;
  background-image: var(--loep); background-repeat: no-repeat;
  background-position: left 12px center; background-size: 14px 14px;
}
/* Waar de bouwsteen de loep al als teken naast het veld zet, tekenen we hem niet nóg een keer. */
.wk-zoekvak .wk-zoekveld { background-image: none; }
.wk-werkbalk .wk-zoekveld { width: 265px; max-width: 100%; }
/* CAS zet de knoppen ín de werkbalk groter dan de kaderknoppen op een kaartkop:
   14 px letter, 7/10,5 binnenruimte, 34 px hoog — dezelfde maat als het
   zoekveld ernaast (dump `exportBtn` tegen `moduleKoppeling`). */
.wk-werkbalk .wk-knop { min-height: 34px; padding: 7px 10.5px; font-size: 14px; }
.wk-werkbalk .wk-vak { width: auto; max-width: none; }
.wk-werkbalk select.wk-vak { min-width: 130px; }
/* De lade valt onder de werkbalk en pakt de volle breedte; dicht staat hij er
   niet. Geen animatie: een rij keuzelijsten die openschuift leest als iets dat
   nog laadt. */
.wk-filterlade { display: none; flex-basis: 100%; flex-wrap: wrap; align-items: center; gap: var(--r2); padding-top: var(--r3); border-top: 1px solid var(--lijn-zacht); }
.wk-werkbalk.wk-filters-open .wk-filterlade { display: flex; }
.wk-filterlade .wk-vak { width: auto; max-width: none; }
.wk-filterlade select.wk-vak { min-width: 130px; }
.wk-filterknop b { font-weight: 600; color: var(--geel-inkt); }
/* De naam van een filter dat hem zelf niet kan dragen (een datumvak kent geen
   placeholder). Staat vóór het paar van/tot, niet boven het veld. R14. */
.wk-filternaam { font-size: 12.25px; color: var(--zacht); white-space: nowrap; margin-right: -2px; }

/* Handgebouwde filterrijen buiten de lijst-bouwsteen (Financieel, HRM, het
   planbord, de Kennisbank, de buitendienstzoeker): dezelfde regel gereedschap,
   maar los boven hun eigen vlak in plaats van in de kaart. */
.wk-filterrij { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r2); margin: 0 0 var(--r3); }
.wk-filterrij .wk-vak { width: auto; max-width: none; }
.wk-filterrij select.wk-vak { min-width: 130px; }
.wk-filterrij .wk-zoekveld { width: 265px; max-width: 100%; }
.wk-filterrij-rechts { margin-left: auto; font-size: 12.25px; color: var(--zacht); white-space: nowrap; }

/* ─── 12. Tabel ──────────────────────────────────────────────────────────── */

/* 30 px per regel, kop 11 px in hoofdletters, getallen rechts, één regel per cel. */
.wk-tabelvak {   /* Geen rand: een tint verschil plus een zachte schaduw is genoeg (§14). Staat hij in `.wk-kaart`, dan draagt die de vorm. */
  background: var(--vlak); border-radius: var(--straal-groot); box-shadow: var(--schaduw);
  overflow-x: auto; scrollbar-width: thin;
}
/* 1,34 regelhoogte: 10,5 boven + 18,76 regel + 10,5 onder is CAS' 39,73 px per rij (dump `tr0`). Met onze 1,45 werd elke rij 41 px en liep de hele lijst uit de maat. */
.wk-tabel { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.34; }
/* CAS' kolomkop is géén vette kleine kop: hij staat in dezelfde letter en
   dezelfde kleur als de cellen eronder, 14 px op 400, met 10,5/14 binnenruimte
   en een onderlijn van 1,25 px in slate-200 (dump `th`). Dat wij hem op 12 px
   vet inkt hadden staan, was het duidelijkste verschil in de hele tabel: onze
   lijst had een kop-balk, CAS heeft een doorlopend blad. R58, herzien 16-09. */
.wk-tabel th { padding: 10px 14px; text-align: left; vertical-align: middle; font-size: 14px; font-weight: 400; color: var(--inkt); border-bottom: 1.25px solid var(--lijn-zacht); white-space: nowrap; background: var(--vlak); }
.wk-tabel th a { text-decoration: none; }
/* Kolomuitleg gebruikt de gedeelde i; de sorteerlink blijft apart bedienbaar. */
.wk-tabel th:has(.wk-uitleg) { overflow: visible; }
.wk-tabel th .wk-uitlegtekst { left: auto; right: 0; white-space: normal; text-transform: none; letter-spacing: normal; }
.wk-tabel th a:hover { color: var(--inkt); }
.wk-tabel th.wk-getal, .wk-tabel td.wk-getal, .wk-tabel th.wk-rechts, .wk-tabel td.wk-rechts { text-align: right; }
/* CAS zet achter élke sorteerbare kolomkop een stil dubbelpijltje, en niet
   alleen achter de kolom waarop gesorteerd is (afdruk 16, dump `sortIcon`):
   zo zie je waarop je kúnt sorteren zonder te proberen. */
/* CAS zet in de kolomkop een svg van 12,25 px in slate-500 (nameting 17-09,
   `p-datatable-sort-icon`). Het onze stond op de 14 px van de kop zelf en
   trok daardoor even hard als het woord. */
.wk-tabel th a::after { content: " ⇅"; font-size: 12.25px; color: var(--grijs); }
.wk-tabel .wk-sorteer a::after { content: " ▾"; color: var(--inkt); }
.wk-tabel .wk-sorteer-op a::after { content: " ▴"; color: var(--inkt); }
/* 40 px per regel, 10,5/14 binnenruimte, hairline van 1,25 px én een zebra:
   de even rij staat op slate-50 (dump `tr0`/`tr1`/`tdCode`). De afdruk 05
   waarop CAS-SKELET-MATEN zich baseerde liet die zebra niet zien — de dump
   wel, en de dump wint. Eén vulling voor alle cellen: CAS maakt de buitenste
   niet breder. */
.wk-tabel td { padding: 10px 14px; vertical-align: middle; border-bottom: 1.25px solid var(--lijn-zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
/* Wat in een cel géén tekst is, staat op het midden van de regel. Alleen die
   dingen: zet je ook de gewone tekst op `middle`, dan valt hij van de
   basislijn af en wordt elke rij twee pixels hoger dan die van CAS. */
.wk-tabel :is(td, th) :is(.wk-stand, .wk-voortgang, .wk-uitleg, button, svg, progress, input) { vertical-align: middle; }
.wk-tabel :is(td, th) > .wk-uitleg { display: inline-flex; }
/* Een doos die even hoog is als de regel valt er aan de onderkant nog net uit; een pixel lager past hij erbinnen en blijft de rij op CAS-maat. */
.wk-tabel :is(td, th) :is(.wk-stand, .wk-voortgang) { line-height: 17.5px; }
/* CAS zet een stand in een lijst niet als pil in de cel maar als kleur ván de
   cel: de kolom "Info compleet" heeft een roze celvlak met "Nee" erin, in
   gewone letter (dump `tdLast`, background oklch(0.936 0.032 17.717)). Dus
   draagt het standwoord binnen een tabel geen eigen vlak meer, en kleurt de
   cel. Dat scheelt ook de twee pixels die een inline-block aan de regel
   toevoegt. Buiten een tabel (op een kaart, in een kop) blijft het woord zijn
   eigen vlakje houden. */
/* `display: inline` en niet inline-block: een doos van 18,76 px die op `middle`
   staat steekt onder de regel uit en maakte elke rij met een standwoord 40,9 px
   in plaats van CAS' 39,73 (gemeten 16-09 op tien lijsten). De cel draagt de
   kleur al, dus het woord heeft zelf geen doos nodig. */
.wk-tabel td .wk-standwoord, .wk-tabel td .wk-chip { display: inline; vertical-align: baseline; padding: 0; background: none; font-weight: 400; font-size: 14px; line-height: inherit; }
/* Niet meer alleen een rechtstreeks kind: zodra CAS' pilmaat (3,5 px boven en
   onder) erop kwam, groeide elke rij met een verpakte stand mee naar 45,5 px.
   In een cel kleurt de cel, waar de stand ook in zit. (17-09) */
.wk-tabel td > .wk-chip { display: inline; color: var(--inkt); }   /* geen inline-block: een doos van 18,75 px op de basislijn maakt de rij vijf pixels hoger dan die van CAS */
.wk-tabel td:has(.wk-standwoord) { background: var(--vlak-2); }
.wk-tabel td:has(.wk-stand-groen.wk-standwoord), .wp-plan-tabel td.wp-plan-klaar { background: var(--groen-zacht); }
.wk-tabel td:has(.wk-stand-rood.wk-standwoord), .wp-plan-tabel td.wp-plan-laat { background: var(--rood-zacht); }
.wk-tabel td:has(.wk-stand-amber.wk-standwoord) { background: var(--amber-zacht); }
.wk-tabel td:has(.wk-stand-grijs.wk-standwoord) { background: var(--grijs-zacht); }
.wk-tabel tbody tr { background: var(--vlak); }
.wk-tabel tbody tr:nth-child(even) { background: var(--zebra); }
.wk-tabel tbody:last-of-type tr:last-child td { border-bottom: 0; }   /* de kaart sluit zelf af; een lijn op de rand is een dubbele rand */
.wk-tabel tbody tr:hover { background: var(--rij); }
.wk-tabel tbody tr.wk-gekozen, .wk-tabel tbody tr.wk-gekozen td { background: var(--geel-zacht); }
/* C7: een kans die nog loopt en waarvan de verwachte verkoopdatum voorbij is — de hele regel rood, geen klein icoontje (Esmay).
   De tabelvariant wint ook van standcellen, zebra, selectie en hover; de kale variant dekt de oude werkvoorraadkaart. */
tr.wkl-overdatum, tr.wkl-overdatum td,
.wk-tabel tbody tr.wkl-overdatum, .wk-tabel tbody tr.wkl-overdatum td,
.wk-tabel tbody tr.wkl-overdatum td:has(.wk-standwoord) { background: var(--rood-zacht); color: var(--rood); }
/* De titelkolom neemt de ruimte die overblijft en kapt af; zo past een lijst altijd in de breedte. */
.wk-tabel .wk-kolom-titel { width: 100%; max-width: 0; min-width: 160px; }
.wk-tabel td:empty::before { color: var(--zacht); }
.wk-tabel td:empty::before { content: "—"; }
/* Niet onderstreept: in de kolom "Volgende stap" gaf dat een rafelige grijze streep. */
.wk-tabel td a { text-decoration: none; }
/* CAS markeert precies twee kolommen als link: het recordnummer en de naam,
   allebei in zijn geel met een onderstreping (afdruk 16, elke regel). De
   dump gaf daar slate-700 zonder streep, want die mat de `<a>`; de kleur zit
   bij CAS op een `<span class="hyperlink">` in die link. Nagemeten 16-09:
   #D8AB0F (`--geel`), onderstreept, gewicht 400, 14 px. De rest van de regel
   is gewone tekst, ook waar er een link onder ligt. */
.wk-tabel td a { color: inherit; font-weight: 400; text-decoration: none; }
.wk-tabel td:first-child > a, .wk-tabel td.wk-kolom-titel > a { color: var(--geel); font-weight: 400; text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 2px; }
.wk-tabel td a:hover { color: var(--geel-inkt); text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 2px; }
.wk-tabel tfoot td { font-weight: 600; border-top: 1px solid var(--lijn); background: var(--vlak); }
.wk-tabel tfoot td:empty::before { content: none; }
/* Groepen in een lijst (VB-4): de kop is een regel ín de tabel, de somregel draagt de vorm
   van de voetrij. Geen gekleurde streep langs de kop — de kleur zit in het teken ervoor. */
.wk-tabel tr.wk-groep td, .wp-plan-tabel tr.wk-groep td { font-weight: 600; color: var(--inkt); border-top: 1px solid var(--lijn); background: var(--vlak); }
.wk-tabel tbody:first-of-type tr.wk-groep td { border-top: 0; }
.wk-tabel tr.wk-groepsom td { font-weight: 600; border-top: 1px solid var(--lijn-zacht); }
.wk-tabel tr.wk-groepsom td:empty::before { content: none; }
/* Het pipeline-aanzicht van de kansen (VB-6): kolommen per fase in dezelfde witte
   kaart en maten als de lijst. Geen kleurvlak per kolom; de kleur zit in het teken. */
.wk-pijplijn { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: var(--r4); padding: var(--r3) var(--r4) var(--r4); overflow-x: auto; }
.wk-pijp-kop { display: flex; align-items: center; gap: 6px; height: 36px; font-size: 12.25px; font-weight: 600; color: var(--inkt); border-bottom: 1px solid var(--lijn-zacht); }
.wk-pijp-kop span { margin-left: auto; color: var(--zacht); font-variant-numeric: tabular-nums; }
.wk-pijp-som { height: 30px; display: flex; align-items: center; font-size: 12.25px; color: var(--zacht); font-variant-numeric: tabular-nums; }
.wk-pijp-kaartje { display: block; padding: 6px 0; border-top: 1px solid var(--lijn-zacht); font-size: 14px; text-decoration: none; color: var(--inkt); }
.wk-pijp-kaartje:hover { background: var(--rij); }
.wk-pijp-kaartje em { display: block; font-style: normal; color: var(--geel-inkt); text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 2px; }
.wk-pijp-kaartje span { display: block; color: var(--zacht); font-size: 12.25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-pijp-kaartje b { display: block; font-variant-numeric: tabular-nums; }
.wk-tabel .wk-vink { width: 36px; max-width: 36px; padding: 0 0 0 12px; }
/* `display: block`: een vinkje als inline-block op `middle` steekt buiten de
   regel uit en maakte elke rij met een selectievakje 41 px in plaats van CAS'
   39,73 (WVB, Finance, Collies). Ook het kale vinkje van de bulkselectie staat
   erbij — dat draagt geen `.wk-vink` en stond daardoor nog op de oude maat. */
.wk-tabel .wk-vink input, .wk-tabel td > input[type="checkbox"], .wk-tabel th > input[type="checkbox"] {
  /* Zelfde getekende vakje als op een kaart, en `display: block` zodat het niet
     in de regel meetelt: als inline-block op `middle` werd elke rij 41 px. */
  appearance: none; -webkit-appearance: none;
  display: block; width: 18px; height: 18px; margin: 0;
  background: var(--vlak); border: 1.25px solid var(--lijn); border-radius: 4px;
  box-shadow: var(--schaduw-veld); cursor: pointer;
}
.wk-tabel :is(td, th) > input[type="checkbox"]:checked, .wk-tabel .wk-vink input:checked {
  background: var(--geel) var(--vink) no-repeat center / 11px 9px; border-color: var(--geel);
}
.wk-tabel-dicht th, .wk-tabel-dicht td { padding-block: 7px; }
/* Een brede tabel (meer dan tien kolommen): eerste kolom blijft staan bij het schuiven. */
.wk-tabel-vast th:first-child, .wk-tabel-vast td:first-child { position: sticky; left: 0; z-index: 1; background: var(--vlak); }
.wk-tabel-vast tbody tr:hover td:first-child { background: var(--rij); }
.wk-tabel-vast tbody tr.wk-gekozen td:first-child { background: var(--geel-zacht); }

/* Getalkolommen in een tabel die niet van de bouwsteen komt (de factuurlijst
   en het onderhanden werk op Finance, en het papier van werk/afdruk).
   Overgeerfd uit de oude sitestijl; overgebracht uit stijl.ts (D3b-2). */
th.getal, td.getal { text-align: right; font-variant-numeric: tabular-nums; }

/* De pager van CAS: gecentreerd onder de tabel in dezelfde kaart, ronde knopjes
   van 35 px met 3,5 px ertussen, de huidige bladzijde in CAS' geel op zijn
   lichtste gele vlak, en de keuzelijst met de paginagrootte ernaast (dumps
   `pagerBox`, `pageActive`, `pager15`). Geen lijn erboven en geen eigen vlak:
   de kaart loopt door. */
.wk-voet { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--r4); min-height: 56px; margin: 0; padding: 10.5px var(--r4); font-size: 14px; color: var(--inkt); }
.wk-voet b { color: var(--inkt); font-weight: 600; }
.wk-perblad { width: 72px; min-width: 0; }
.wk-bladen { display: inline-flex; align-items: center; gap: 3.5px; }
.wk-bladen a, .wk-bladen span { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; padding: 0; border-radius: 50%; color: var(--inkt); line-height: 14px; text-decoration: none; }
.wk-bladen a:hover { background: var(--vlak-2); }
.wk-bladen .wk-aan { font-weight: 400; color: var(--geel-inkt); background: var(--geel-zacht); border: 0; }

/* ─── 13. Standwoord ─────────────────────────────────────────────────────── */

/* Stand als tekstkleur, altijd met een woord; een stip erbij waar de kolom smal is. */
/* Het verborgen icoonlabel blijft binnen zijn stand, ook in een scrollende tabel. */
.wk-stand { position: relative; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.wk-stand.wk-stip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--stip, currentColor); flex: none; }
.wk-stand-geel { color: var(--amber); --stip: var(--geel); }      /* lopend — de leesbare amber, niet CAS' pagergeel (zie de tokens in §2) */
.wk-stand-groen { color: var(--groen); }                             /* af, goed */
.wk-stand-rood { color: var(--rood); font-weight: 600; }             /* fout, te laat */
.wk-stand-amber { color: var(--amber); }                             /* wacht, let op */
.wk-stand-grijs { color: var(--zacht); }               /* geparkeerd, concept — het stilste van de vijf */
/* Stand-icoon: 16 px, currentColor, vorm én kleur (aanvulling 12-09). De maat
   staat hier en niet in stijl.ts, zodat hij ook zonder die stylesheet klopt. */
/* R56 (14-09): het standwóórd staat op een licht vlak van zijn eigen kleur.
   Contrast nagerekend met scripts/contrast.mjs — licht 4,5 tot 5,8:1, donker
   6,0 tot 8,1:1. Geen geel vlak: geel is de handeling (R50), dus draagt
   "lopend" de neutrale tint met de gele inkt erop. `standIcoon()` krijgt géén
   vlak: dat is de smalle vorm, en een vlak om een icoon van 16 px is een knop. */
/* CAS' pil is zijn `p-tag`: 12,25 px op **700**, straal 6, 3,5/7 binnenruimte,
   samen 20,7 px hoog (nameting 17-09 op de verkoopkansenlijst: de stand "Open"
   en een te late datum staan daar als p-tag). Ronde 1 concludeerde "CAS heeft
   geen pillen" uit de projectenlijst — die kleurt inderdaad de cel. CAS doet
   allebei; wij nu ook, met CAS' eigen maat voor de pil. */
.wk-standwoord { padding: 3.5px 7px; border-radius: var(--straal); font-size: 12.25px; font-weight: 700; line-height: 13.75px; background: var(--vlak-2); }
.wk-stand-groen.wk-standwoord { background: var(--groen-zacht); }
.wk-stand-rood.wk-standwoord { background: var(--rood-zacht); }
.wk-stand-amber.wk-standwoord { background: var(--amber-zacht); }
.wk-stand-grijs.wk-standwoord { background: var(--grijs-zacht); }
.wk-ico { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wk-stand-grijs .wk-ico { stroke-width: 1.4; }   /* "Nog niet" is het stilste van de vijf: dunner, zodat ✓ ● ▲ opvallen. 14-09. */
.wk-chip { display: inline-block; max-width: 100%; padding: 0 7px; border-radius: var(--straal); font-size: 12.25px; line-height: 18.75px; color: var(--inkt); background: var(--vlak-2); overflow: hidden; text-overflow: ellipsis; }   /* Chip: kort kenmerk, vaste kleur per waarde, zes tinten. Tint 1 was `--geel-zacht`: negen gele blokjes per lijst. 14-09. */
.wk-chip-1 { background: var(--grijs-zacht); } .wk-chip-2 { background: var(--groen-zacht); }
.wk-chip-3 { background: var(--rood-zacht); } .wk-chip-4 { background: var(--amber-zacht); }
.wk-chip-5 { background: var(--vlak-2); } .wk-chip-6 { background: var(--grond); box-shadow: inset 0 0 0 1px var(--lijn); }
/* Voortgang "2/6" met het balkje van de CAS-planningstatus erachter. */
.wk-voortgang { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.wk-voortgang b { font-size: 14px; font-variant-numeric: tabular-nums; }
.wk-voortgang progress.wk-balk { appearance: none; border: 0; flex: none; width: 44px; height: 6px; border-radius: 3px; color: inherit; background: var(--grijs-zacht); overflow: hidden; }
.wk-voortgang progress::-webkit-progress-bar { background: var(--grijs-zacht); } .wk-voortgang progress::-webkit-progress-value { background: currentColor; } .wk-voortgang progress::-moz-progress-bar { background: currentColor; }
.wk-laat { color: var(--rood); font-weight: 600; }                   /* in een tabelcel: te laat */

/* ─── 14. Lijstvak en paneel ─────────────────────────────────────────────── */

/* Lijstvak: kop met teller en één handeling, kleine tabel eronder (rechts op een kaart). */
.wk-lijstvak { background: var(--vlak); border-radius: var(--straal-groot); box-shadow: var(--schaduw); overflow: hidden; min-width: 0; }
.wk-lijstvak-tabel { overflow-x: auto; scrollbar-width: thin; }
.wk-lijstvak-kop { display: flex; align-items: center; gap: var(--r2); min-height: 44px; padding: 7px var(--r4); border-bottom: 1.25px solid var(--lijn-zacht); }
/* 14 px: de kop stond op de maat van zijn inhoud en droeg geen hiërarchie. */
/* CAS' paneelkop: 17,5 px op 600 in zijn eigen geel (dump `panelProject`). */
/* 14 px, niet 17,5 (nameting 17-09 op de CAS-projectkaart: de gouden koppen
   "Project", "Informatie", "Acties" staan op 14 px/600). Op 17,5 riep elk
   paneel harder dan de kaartkop erboven. */
.wk-lijstvak-kop h2 { font-size: 14px; font-weight: 600; color: var(--geel); }
.wk-lijstvak-kop .wk-rechts { margin-left: auto; font-size: 12.25px; }
.wk-lijstvak .wk-tabel { font-size: 12.25px; }
.wk-lijstvak .wk-tabel th, .wk-lijstvak .wk-tabel td { padding: 0 12px; }
.wk-lijstvak .wk-leeg { border: 0; border-radius: 0; height: 36px; }
.wk-lijstvak-voet { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-top: 1px solid var(--lijn); font-size: 12.25px; }

.wk-paneel { background: var(--vlak); border-radius: var(--straal-groot); box-shadow: var(--schaduw); padding: var(--r4); }   /* Paneel: een vlak op de grond. Geen eyebrow, en geen rand (§14). */
.wk-paneel-kop { display: flex; align-items: center; gap: var(--r2); min-height: 24px; margin: 0 0 var(--r3); }
.wk-paneel-kop h2 { font-size: 14px; font-weight: 600; color: var(--geel); }   /* zie .wk-lijstvak-kop h2 */
.wk-paneel-kop .wk-rechts { margin-left: auto; font-size: 12.25px; }
.wk-paneel .wk-paneel { background: none; box-shadow: none; border-radius: 0; padding: var(--r3) 0 0; }   /* Een paneel in een paneel is een groep: op de offerte-rail stonden drie kaders in elkaar. 14-09. */
.wk-paneel .wk-paneel + .wk-paneel { border-top: 1px solid var(--lijn); }
/* Een #-link naar een paneel in de stapel mag niet onder de bovenbalk landen
   (Instellingen › Verkoop springt naar zijn acht onderdelen). */
.wk-stapel > .wk-paneel { scroll-margin-top: 12px; }

/* Label links, waarde rechts, een lijn per rij: de definitielijst van de
   offerterail, de kanstabbladen en de prijsbroninstelling. Overgebracht uit
   stijl.ts (D3b-2). */
.wc-rijen { display: grid; margin: 14px 0 0; }   /* geen lijn per veldregel: CAS heeft er geen (afdruk 12/19) en R51 verbood hem al */
.wc-rijen div { display: grid; grid-template-columns: 125px 1fr; gap: 13px; padding: 7px 0; }
.wc-rijen dt { padding-top: 2px; color: var(--zacht); font-size: 12.25px; font-weight: 400; }
.wc-rijen dd { margin: 0; font-size: 14px; }   /* één soort label, als CAS: 12 px grijs (afdruk 12/19/35) */

/* ─── 15. Velden ─────────────────────────────────────────────────────────── */

/* Kaart: label bóven het veld, twee velden naast elkaar per paneelkolom — zoals
   CAS het op elke kaart en elk instellingenscherm doet (afdruk 12/19/35,
   CAS-SKELET-MATEN §3.5/§4). Geen lijn per veldregel; de 44 px van de veldregel
   en het grijze label van 12 px doen het werk. Op smal één kolom (§20). */
/* Een rijruimte hoort erbij: zonder `row-gap` plakken label en waarde van de volgende regel tegen elkaar zodra een waarde over twee regels loopt. */
.wk-veldraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--r5); row-gap: var(--r4); }
.wk-veldraster > .wk-veld { min-height: 44px; }
.wk-veldraster > .wk-knoppen { grid-column: 1 / -1; border-bottom: 0; margin-top: var(--r3); }
.wk-veld-breed { grid-column: 1 / -1; }
.wk-waarde:empty::before { content: "—"; color: var(--zacht); }

.wk-veld { display: grid; align-content: start; gap: 4px; }             /* label boven het vak (kaart, filters, dialoog) */
/* CAS' veldlabel staat in dezelfde letter en kleur als de waarde eronder: 14 px slate-700 (dump `label`). Onze 12 px grijs maakte er een bijschrift van. */
/* Gewicht 500 en geen marge eronder: nagemeten in CAS 16-09 op de projectkaart.
   De computed-style-dump gaf hier 400, maar die mat een label in een paneel
   zonder invoer; boven een invulveld zet CAS hem een halve trap zwaarder. */
.wk-veld > label, .wk-veld > .wk-label { font-size: 14px; font-weight: 500; color: var(--inkt); margin-bottom: 0; }
.wk-veld > .wk-waarde { display: flex; align-items: center; min-height: 34px; font-size: 14px; }

/* CAS' veld: 34 px hoog, 7/10,5 binnenruimte, rand van 1,25 px in slate-300,
   straal 6 en een schaduw van niks (dumps `searchInput` en `textInput`). Het
   onze was 28 px met een rand van 1 px en zonder schaduw — een vlakker,
   kleiner vakje, en dat zag je op elk scherm naast elkaar. */
.wk-vak {
  width: 100%; max-width: 320px; height: 34px; padding: 7px 10.5px;
  background: var(--vlak); border: 1.25px solid var(--lijn); border-radius: var(--straal);
  box-shadow: var(--schaduw-veld);
  color: var(--inkt); font-size: 14px; line-height: 18.75px;
}
.wk-vak { transition: border-color var(--overgang), background-color var(--overgang); }
.wk-vak:hover { border-color: var(--zacht); }
/* CAS' aandachtstand op een veld is precies dit en niets meer: de rand wordt
   goud, er komt geen outline en geen gloed bij (nameting 17-09, instellingen).
   Voor knoppen en links houdt CAS wel een ring aan: 1 px goud op 2 px afstand
   (`--p-focus-ring-*`). Die twee staan hieronder uit elkaar. */
.wk-vak:focus { border-color: var(--geel); }
.wk-vak:not(:focus-visible):focus { outline: none; }   /* met de muis: alleen de gouden rand, zoals CAS */
.wk-vak:focus-visible { outline-offset: 0; }           /* met het toetsenbord blijft de inktring van R53 staan: goud alleen haalt 2,4:1 */
.wk-vak::placeholder { color: var(--zacht); opacity: 1; }
.wk-vak[readonly], .wk-vak:disabled { background: var(--lijn-zacht); color: var(--grijs); }   /* CAS: bg #E2E8F0, tekst slate-500, rand blijft slate-300 (nameting 17-09) */
.wk-vak[aria-invalid="true"] { border-color: var(--rood); }
.wk-scanregel { display: flex; align-items: center; gap: var(--r2); } .wk-scanregel > .wk-vak { flex: 1; min-width: 0; }   /* W20: werkordervak + camerknop op één regel, beeld eronder (CAS' `#interactive.viewport`) */
.wk-scanbeeld { width: 100%; max-width: 480px; max-height: 50vh; border-radius: var(--straal); background: var(--inkt); }
select.wk-vak {
  padding-right: 26px; appearance: none;
  background-image: var(--pijl); background-repeat: no-repeat; background-position: right 9px center; background-size: 10px 6px;
}
textarea.wk-vak { height: auto; min-height: 84px; padding: 7px 10.5px; font-size: 14px; line-height: 1.45; resize: vertical; max-width: none; }
.wk-vak-kort { max-width: 120px; }
.wk-vak-datum { max-width: 150px; }
/* De eenheid achter het getal ("mm") staat bij CAS in dezelfde letter en kleur
   als het veld zelf: 14 px slate-700 (dump `mmSuffix`). Onze 12,25 px grijs
   maakte er een bijschrift van, terwijl het bij de waarde hoort. */
.wk-vink-regel { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
/* CAS' vinkje is geen vinkje van het besturingssysteem maar een getekend vakje:
   18 x 18, rand 1,25 px slate-300, straal 4, wit, met dezelfde zachte schaduw
   als een invulveld — de echte input staat eronder op `opacity: 0` (nagemeten
   in CAS 16-09, projectkaart 27211371). Wij tekenen hem met `appearance: none`,
   dus blijft het één echte checkbox: toetsenbord, schermlezer en het vinkje van
   de gebruiker blijven werken, en de vorm is toch die van CAS.
   AANNAME voor de aangevinkte stand: CAS-geel vlak met een wit vinkje. Op het
   nagemeten scherm stond geen aangevinkt vakje, dus dit is nog niet gezien. */
.wk-vink-regel input {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 18px; height: 18px; margin: 0;
  background: var(--vlak); border: 1.25px solid var(--lijn); border-radius: 4px;
  box-shadow: var(--schaduw-veld); cursor: pointer;
  transition: background-color var(--overgang), border-color var(--overgang);
}
.wk-vink-regel input:checked {
  background: var(--geel) var(--vink) no-repeat center / 11px 9px;
  border-color: var(--geel);
}
.wk-vink-regel input:disabled { background: var(--grond); cursor: default; }
/* Hetzelfde getekende vakje voor élk vinkje binnen de inhoud, ook zonder klasse.
   Waarom: de controlelijst op de kanskaart, de keurlijsten en de instellingen
   zetten een kaal `input[type=checkbox]` neer, en dat is het blauwe vinkje van
   Windows — op een CAS-scherm het eerste wat je ziet dat er niet hoort. In
   `:where()`, dus elke bouwsteenklasse hierboven wint er nog van. (17-09) */
:where(.wk-inhoud input[type="checkbox"]) {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 18px; height: 18px; margin: 0;
  background: var(--vlak); border: 1.25px solid var(--lijn); border-radius: 4px;
  box-shadow: var(--schaduw-veld); cursor: pointer;
}
:where(.wk-inhoud input[type="checkbox"]:checked) {
  background: var(--geel) var(--vink) no-repeat center / 11px 9px; border-color: var(--geel);
}
:where(.wk-inhoud input[type="checkbox"]:disabled) { background: var(--grond); cursor: default; }
/* Het kalenderknopje van de browser in een datumveld: standaard een donker
   blokje dat niets met CAS te maken heeft. CAS zet er een pi-calendar in
   slate-400 neer. Wij dempen het knopje tot diezelfde stilte; de bediening
   blijft die van de browser, dus de datumkiezer zelf werkt onveranderd. */
.wk-vak::-webkit-calendar-picker-indicator,
:where(.wk-inhoud input[type="date"])::-webkit-calendar-picker-indicator {
  width: 14px; height: 14px; opacity: .45; cursor: pointer;
}
.wk-vak:hover::-webkit-calendar-picker-indicator { opacity: .75; }

/* Een invoervak zonder klasse krijgt tóch de ene vorm.
   Waarom dit bestaat: de schermen tekenen 428 velden zonder klasse tegen 20
   mét, en tot D3b-1 gaf elke kop ze zijn eigen rand, ronding en padding mee —
   zeven varianten van hetzelfde vakje (de reden dat de tool "als meerdere
   designers" voelde). Eén regel hier vervangt die zeven blokken.
   In `:where()`, dus zonder specificiteit: `.wk-vak` en elke schermeigen regel
   van §21 winnen er gewoon van, en een veld met een klasse raakt hij niet aan
   (vandaar `:not([class])`). Vinkjes, radio's en bestandskiezers blijven de
   vorm van de browser houden: daar is een kader misleidend. */
:where(.wk-inhoud :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]), select, textarea):not([class])) {
  box-sizing: border-box; width: 100%; max-width: 320px; min-height: 34px; padding: 7px 10.5px;
  background: var(--vlak); border: 1.25px solid var(--lijn); border-radius: var(--straal);
  box-shadow: var(--schaduw-veld); color: var(--inkt); font: inherit; font-size: 14px;
}
:where(.wk-inhoud :where(input, select, textarea):not([class])):hover { border-color: var(--zacht); }
:where(.wk-inhoud :where(input, select, textarea):not([class])):focus-visible { outline-offset: 0; }
:where(.wk-inhoud :where(input, select, textarea):not([class]))::placeholder { color: var(--zacht); opacity: 1; }
:where(.wk-inhoud :where(textarea):not([class])) { min-height: 84px; max-width: none; padding: 6px 10px; line-height: 1.45; resize: vertical; }
:where(.wk-inhoud :where(select):not([class])) {
  padding-right: 26px; appearance: none;
  background-image: var(--pijl); background-repeat: no-repeat; background-position: right 9px center; background-size: 10px 6px;
}

/* Het zoekveld op de zoekpagina zelf draagt de term al en mag daarom de volle
   breedte hebben; in de balk blijft hij smal. Overgebracht uit stijl.ts (D3b-2). */

/* ─── 16. Knoppen ────────────────────────────────────────────────────────── */

/* Primair geel (één per scherm), gewoon, tekst. 28 px hoog.
   `.nw-knopje`/`.nw-vol` staan erbij omdat de oude knop nog op ruim vijftig
   plekken wordt getekend (Melden, Afdrukken, Excel, elke Opslaan in de
   kennisbank en de instellingen). Zonder deze twee namen erbij houdt de tool
   twee knoppen: een hoge, ronde, vette zwarte en deze. R47, 13-09. */
/* CAS' kaderknop: 12,25 px letter, 5,25/8,75 binnenruimte, rand slate-300,
   straal 6, tekst #474747 (dumps `exportBtn`, `moduleKoppeling`,
   `actieToevoegen`). Wij houden 28 px hoogte in plaats van CAS' 26,7, zodat
   een aanraakdoel niet onder de 28 zakt. */
.wk-knop, .nw-knopje {   /* Drie trappen: geel = de handeling (hoogstens één), kader = nevenhandeling, tekst = wat je zelden doet. 14-09. */
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 28px; padding: 5.25px 8.75px;
  background: var(--vlak); border: 1.25px solid var(--lijn); border-radius: var(--straal);
  color: var(--knoptekst); font-family: inherit; font-size: 12.25px; font-weight: 400; line-height: 1.25; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--overgang), border-color var(--overgang), color var(--overgang);
}
/* Een vulling in plaats van een randkleur; `translateY` liet de tekst verspringen. */
.wk-knop:hover, .nw-knopje:hover { background: var(--vlak-2); border-color: var(--zacht); text-decoration: none; }
.wk-knop:active, .nw-knopje:active { background: var(--rij); }
/* CAS' Opslaan: geel vlak, 12,25 px op 400 (dump `opslaan`). CAS zet er witte
   tekst op en dat haalt 1,9:1 — de enige plek in deze ronde waar we CAS níét
   volgen: een fout van CAS is geen maat. Het vlak is wat je ziet, dus dat
   blijft CAS' geel, met kop-inkt erop (7,9:1). */
.wk-knop-primair, .nw-knopje.nw-vol { background: var(--geel); border-color: var(--geel); color: #0F172A; font-weight: 400; }
/* Naar de inkt mengen werkt in beide thema's; `brightness(.96)` maakte donker grauw. */
.wk-knop-primair:hover, .nw-knopje.nw-vol:hover { background: color-mix(in srgb, var(--geel) 90%, var(--inkt)); border-color: color-mix(in srgb, var(--geel) 90%, var(--inkt)); }
.wk-knop-tekst { background: none; border-color: transparent; color: var(--zacht); }
.wk-knop-tekst:hover { background: var(--vlak-2); border-color: transparent; color: var(--inkt); }
.wk-knop-gevaar { color: var(--rood); }
.wk-knop:disabled, .wk-knop.wk-uit, .nw-knopje:disabled { opacity: .5; pointer-events: none; }
.wk-knoppen { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Een knop zonder klasse krijgt tóch de ene vorm — zelfde reden als bij het
   invoervak in §15: de koppen tekenen 48 knoppen zonder klasse, en elke kop gaf
   ze zijn eigen hoogte, ronding en randkleur. In `:where()`, dus `.wk-knop`,
   `.nw-knopje` en elke schermeigen regel winnen er gewoon van. R47, D3b-1. */
:where(.wk-inhoud :where(button, input[type="submit"]):not([class])) {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 28px; padding: 5.25px 8.75px;
  background: var(--vlak); border: 1.25px solid var(--lijn); border-radius: var(--straal);
  color: var(--knoptekst); font: inherit; font-size: 12.25px; font-weight: 400; white-space: nowrap;
}
:where(.wk-inhoud :where(button):not([class])):hover { border-color: var(--zacht); }
:where(.wk-inhoud :where(button):not([class])):disabled { opacity: .5; pointer-events: none; }

/* Werkscherm: de balk onderaan verschijnt zodra iets is aangevinkt. */
.wk-bulk {
  display: none; align-items: center; gap: 12px;
  position: sticky; bottom: 0; z-index: 10; height: 44px; margin: 12px 0 0; padding: 0 16px;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--straal-groot); box-shadow: var(--schaduw-op);
}
.wk-bulk.wk-aan { display: flex; }
.wk-bulk b { font-size: 14px; }
.wk-bulk .wk-knoppen { margin-left: auto; }

/* De werkwoorden van een lijst staan rechts in de werkbalk van de kaart. Heeft
   die kaart geen werkbalk (een scherm dat zijn eigen filterrij tekent), dan
   staan ze hierboven, rechts uitgelijnd — anders vallen ze van het scherm
   zodra de paginatitel weg is (CAS-GELIJK, 16-09). */
.wk-lijstknoppen { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--r2); margin: 0 0 var(--r3); }

/* ─── 17. Melding, lege regel, i-uitleg ──────────────────────────────────── */

/* Eén regel, alleen na een handeling of bij een fout. Gelukt verdwijnt vanzelf. */
.wk-melding {
  /* CAS' melding is een `p-toast`: een getint vlak met een rand van 1 px in
     dezelfde familie, straal 6, 10,5 px binnenruimte en 7 px tussen icoon en
     tekst (tokens van CAS zelf, 17-09: `--p-toast-*`). Ons streepje van 3 px
     links op een wit vlak was een eigen vorm. De melding blijft wél in de
     stroom staan en zweeft niet: hij komt na een handeling terug van de server,
     en een zwevend vlak dat niemand ziet wegklikken is geen winst. */
  display: flex; align-items: center; gap: var(--r2); min-height: 30px; padding: var(--r3); margin: 0 0 var(--r3);
  background: var(--vlak); border: 1px solid var(--lijn-zacht);
  border-radius: var(--straal); font-size: 14px; font-weight: 500; color: var(--inkt);
}
.wk-melding a { margin-left: auto; font-weight: 600; }
/* Een melding mag één handeling dragen die moet posten (het record-slot overnemen). */
.wk-melding form { margin-left: auto; }
.wk-melding-ok { background: var(--groen-zacht); border-color: color-mix(in srgb, var(--groen) 28%, var(--vlak)); animation: wk-verdwijn .4s ease 6s forwards; }
.wk-melding-fout { background: var(--rood-zacht); border-color: color-mix(in srgb, var(--rood) 28%, var(--vlak)); }
.wk-melding-let { background: var(--amber-zacht); border-color: color-mix(in srgb, var(--amber) 28%, var(--vlak)); }
.wk-melding :where(.wk-ico) { color: var(--zacht); } .wk-melding-ok .wk-ico { color: var(--groen); } .wk-melding-fout .wk-ico { color: var(--rood); } .wk-melding-let .wk-ico { color: var(--amber); }
@keyframes wk-verdwijn { to { opacity: 0; min-height: 0; height: 0; padding: 0; margin: 0; overflow: hidden; visibility: hidden; } }

/* Leeg is één regel, met de handeling erbij. */
/* CAS zet "er is hier niets" als gewone stille zin op de plek van de inhoud,
   zonder kader: 12,25 px, slate-400, gewicht 400, geen cursief, 0/14 px
   binnenruimte (nagemeten in CAS 16-09, projectkaart 27211371, "Nog geen acties
   vastgelegd."). Ons gestreepte kader maakte van de afwezigheid van inhoud een
   ding op het scherm. De handeling ernaast (`.wk-leeg a`) blijft. */
.wk-leeg {
  display: flex; align-items: center; gap: 12px; min-height: 30px; padding: 0 14px;
  border: 0; color: var(--stil); font-size: 12.25px; font-weight: 400;
}
.wk-leeg a { margin-left: auto; color: var(--inkt); white-space: nowrap; }

/* Verantwoording achter de i. */
.wk-i {   /* Zonder kader: de omcirkelde i was een derde rondje naast de stip en het `○`. 14-09. */
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 16px; height: 16px; margin-left: var(--r1); border: 0; border-radius: 50%;
  background: var(--vlak-2); color: var(--zacht); font: 600 11px/1 Inter, "Segoe UI", system-ui, sans-serif; cursor: help; vertical-align: middle; text-decoration: none;
  transition: color var(--overgang), background-color var(--overgang);
}
.wk-i:hover { color: var(--inkt); background: var(--grijs-zacht); }
/* <span class="wk-uitleg"><button class="wk-i">i</button><span class="wk-uitlegtekst">…</span></span>
   Opent op aanwijzen of toetsenbordfocus; geen script nodig. */
.wk-uitleg { display: inline-block; position: relative; vertical-align: middle; }
.wk-uitleg .wk-i { padding: 0; }
.wk-uitlegtekst {
  display: none; position: absolute; z-index: 20; top: 22px; left: -8px; width: 360px; max-width: calc(100vw - 48px);
  padding: var(--r3); background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--straal-groot);
  box-shadow: var(--schaduw-zwaar); font: 400 12px/1.45 Inter, "Segoe UI", system-ui, sans-serif; color: var(--inkt); text-align: left;
}
.wk-uitleg:hover .wk-uitlegtekst, .wk-uitleg:focus-within .wk-uitlegtekst { display: block; }
.wk-kop h1:has(.wk-uitleg) { position: relative; }
.wk-kop h1 > .wk-uitleg { position: static; }
.wk-kop h1 .wk-uitlegtekst { left: 0; top: 100%; }
.wk-uitlegtekst p + p { margin-top: 6px; }

/* ─── 18. Checklist, document, totalenbalk, historie ─────────────────────── */

/* Checklist (Gate 0–4, IBN, afsluiting): een tabel van 28 px; groepen inklapbaar. */
.wk-checklist th, .wk-checklist td { height: 28px; }
.wk-checklist tr.wk-groep td { font-weight: 600; cursor: pointer; border-top: 1px solid var(--lijn); background: var(--vlak); }   /* De groepsrij had een volle vulling: met het zebra van §12 de vierde tint in één kaart. 14-09. */
.wk-checklist tbody:first-of-type tr.wk-groep td { border-top: 0; }
.wk-checklist tr.wk-groep td::before { content: "▾"; display: inline-block; width: 14px; color: var(--zacht); }
.wk-checklist tr.wk-groep.wk-dicht td::before, .wk-checklist tbody.wk-dicht tr.wk-groep td::before { content: "▸"; }
.wk-checklist tbody.wk-dicht tr:not(.wk-groep) { display: none; }   /* één <tbody> per groep */

/* Historie: wanneer · wie · wat, één regel per gebeurtenis. Stond als
   `.wkd-log`, `.vof-log` en `.vca-log` drie keer bijna gelijk in de koppen
   verkoop en projecten; één vorm, één naam. D3b-1. */
.wk-log { display: grid; gap: 6px; font-size: 12.25px; }
.wk-log > div { display: grid; grid-template-columns: 140px 90px minmax(0, 1fr); gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--lijn); }
.wk-log > div:last-child { border-bottom: 0; }
.wk-log span { color: var(--zacht); }
/* In de smalle rail van een documentkaart past die driedeling niet; daar
   stapelen de regels en gaat het onderwerp voorop. */
.wk-rail .wk-log { font-size: 10.5px; }
.wk-rail .wk-log > div { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: baseline; }
.wk-rail .wk-log b { order: -1; grid-column: 1 / -1; font-weight: 600; }

/* Document (offerte, verslag): pagina links, smalle kolom rechts. Het papier is altijd wit. */
.wk-document { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.vof-vel {
  /* Papier houdt in het donkere thema zijn lichte tokens, anders wordt tekst erop onleesbaar. */
  --pagina: #FFFFFF; --grond: #F9FAFC; --vlak: #FFFFFF; --vlak-2: #F1F2F4; --lijn: #DADADA; --lijn-zacht: #EAEAEA; --inkt: #1D1D1D; --zacht: #6B6B6B;
  --geel-inkt: #886B0B; --geel-zacht: #FEFAEF; --groen: #157C3B; --rood: #C03639; --amber: #886B0B; --focus: #1D1D1D;
}
.wk-rail { display: grid; gap: 16px; position: sticky; top: 16px; }

/* Totalenbalk (calculatie): vastgezet onderaan. */

/* ─── 19. Dialoog en inklappen ───────────────────────────────────────────── */

/* Geen venster om te lezen; alleen een korte bevestiging met twee knoppen. */
dialog.wk-dialoog {   /* De ene plek waar méér diepte hoort: grotere straal, zware schaduw, pagina gedempt. 14-09. */
  border: 0; border-radius: var(--straal-zwaar); padding: 0;
  width: min(480px, calc(100vw - 32px)); background: var(--vlak); color: var(--inkt); box-shadow: var(--schaduw-zwaar);
}
dialog.wk-dialoog::backdrop { background: rgba(29, 29, 29, .4); backdrop-filter: blur(2px); }
.wk-dialoog form { display: grid; gap: 12px; padding: 18px 20px 16px; }
.wk-dialoog h3 { font-size: 14px; font-weight: 600; }
.wk-dialoog .wk-knoppen { justify-content: flex-end; margin-top: 4px; }

details.wk-inklap > summary { list-style: none; display: flex; align-items: center; gap: 6px; height: 30px; font-weight: 600; cursor: pointer; }
details.wk-inklap > summary::-webkit-details-marker { display: none; }
details.wk-inklap > summary::before { content: "▸"; color: var(--zacht); width: 12px; }
details.wk-inklap[open] > summary::before { content: "▾"; }

/* ─── 20. Kleine schermen ────────────────────────────────────────────────── */

/* De zijbalk blijft op laptopbreedte links; alleen mobiel krijgt één Menu. */
@media (max-width: 1180px) { :root { --gutter: 16px; } }
@media (max-width: 680px) {
  .wk-metzij { grid-template-columns: minmax(0, 1fr); }
  .wk-uren-raam { grid-template-columns: minmax(0, 1fr); }
  .wk-zij { position: static; height: auto; padding: var(--r1) var(--r2); border-right: 0; border-bottom: 1px solid var(--lijn); }
  .wk-zijhouder, .wk-zijhouder::details-content, .wk-zijbinnen { height: auto; }
  .wk-zijbinnen { padding: var(--r2); }
  .wk-zijmenu { overflow: visible; }
  .wk-zijhuidig { display: flex; align-items: center; list-style: none; font-size: 12.25px; }
  .wk-zijhuidig::-webkit-details-marker { display: none; }
  .wk-zijhuidig::after { content: "⌄"; margin-left: auto; padding-left: var(--r2); }
  .wk-zijhouder[open] > .wk-zijhuidig::after { content: "⌃"; }
  .wk-zij .wk-zoek input, .wk-zijlink, .wk-zijgroep .nw-melden > summary, .wk-zijpijl { min-height: 44px; }
  .wk-zijpijl { min-width: 44px; display: grid; place-items: center; }
  .wk-zijinvouw { display: none; }
  .wk-kop { flex-wrap: wrap; }
  .wk-kop .wk-knoppen { margin-left: 0; width: 100%; }
  .wk-kaartkop { grid-template-columns: minmax(0, 1fr); }
  .wk-kaartkop-rechts { grid-column: 1; grid-row: 3; margin-top: 6px; }
  .wk-bulk { flex-wrap: wrap; height: auto; min-height: 44px; padding: 8px 12px; }
  .wk-bulk .wk-knoppen { margin-left: 0; }
  .wk-knoop { flex: 0 0 auto; min-width: 104px; } .wk-keten, .wk-tabs { scrollbar-width: thin; } .wk-keten::-webkit-scrollbar, .wk-tabs::-webkit-scrollbar { display: block; height: 4px; } /* smal: laten zien dat de rij verder loopt (H3) */
  /* En dat geldt ook voor de tabel zelf: op een telefoon zie je anders drie van
     de elf kolommen en "Totaal" zonder bedrag, zonder enig teken dat er meer
     is. 13-09. */
  .wk-tabelvak::-webkit-scrollbar, .wk-lijstvak-tabel::-webkit-scrollbar { display: block; height: 4px; }
  .wk-tabelvak::-webkit-scrollbar-thumb, .wk-lijstvak-tabel::-webkit-scrollbar-thumb { background: var(--lijn); border-radius: 2px; }
  .wk-tweekolom, .wk-driekolom, .wk-document { grid-template-columns: minmax(0, 1fr); }
  .wk-rail { position: static; }
  .wk-veldraster { grid-template-columns: minmax(0, 1fr); }
  .wk-vak { max-width: none; }
  .wk-totalen { gap: var(--r4); overflow-x: auto; }
  .wk-filterrij { display: grid; grid-template-columns: minmax(0, 1fr); }   /* Eén kolom: `width: auto` gaf drie ragged rijen van verschillende breedte. 14-09. */
  .wk-filterrij .wk-vak, .wk-filterrij select.wk-vak, .wk-filterrij .wk-zoekveld { width: 100%; max-width: none; }
  /* Smal moet de werkbalk wél breken: het zoekveld van 265 px met twee knoppen
     ernaast hield de kaart 480 px breed en liet de hele pagina zijwaarts
     schuiven. De zoekregel pakt de volle breedte, de knoppen vallen eronder. */
  .wk-werkbalk .wk-zoekvak, .wk-werkbalk .wk-zoekveld { width: 100%; }
  .wk-werkbalk-rechts { margin-left: 0; width: 100%; }
  .wk-voet { gap: var(--r2); }
  .wk-knop, .nw-knopje, :where(.wk-inhoud :where(button, input[type="submit"]):not([class])) { min-height: 44px; }   /* 44 px raakvlak: 28 px is met een vinger niet te raken, de bladzijdelinks 24. 14-09. */
  .wk-vak, :where(.wk-inhoud :where(input, select, textarea):not([class])) { height: 44px; min-height: 44px; line-height: 42px; }
  textarea.wk-vak, :where(.wk-inhoud :where(textarea):not([class])) { height: auto; line-height: 1.45; }
  .wk-bladen a, .wk-bladen span { min-width: 44px; height: 44px; }
  .wk-tabs, .wk-tab { height: 44px; } .wk-zijdomein, .wk-zijingang { min-height: 44px; }
  /* De tabrij schuift op een telefoon, en Opslaan staat erin (CS-3): zonder
     deze plakregel schuift de enige knop van de kaart uit het beeld. */
  .wk-tabs .wk-knoppen { position: sticky; right: 0; background: var(--grond); padding-left: var(--r2); }
  .wk-vink-regel input, .wk-tabel .wk-vink input { width: 18px; height: 18px; }
}

/* Smal: wat de verhuisde componenten van stijl.ts nodig hebben (D3b-2). */
@media (max-width: 680px) { .wc-rijen div { grid-template-columns: 1fr; gap: 3px; } .wc-rijen dt, .wc-tabs .nw-fchip b { font-size: 12.25px; } }
@media (max-width: 420px) { .wk-tabs { gap: var(--r4); } }   /* de goot blijft 16: minder plakt de tekst tegen de rand */

/* ─── 21. Schermeigen bediening ────────────────────────────────────────────
   De calculatiekaart (vca-), de SAM-schermen (wc-sam-) en de kansenlijst
   (wkl-). Stond ná de printsectie, dus golden deze regels ook op papier
   terwijl §25 juist balken en knoppen uitzet; nu vóór het papier. Geen
   bouwsteen van ONTWERP §4 — hoort te verdwijnen. 13-09. */

.wc-sam-bewerken { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.wc-sam-bewerken > label { display: block; }
.wc-sam-bewerken input { max-width: 160px; }
.wc-sam-bewerken textarea { display: block; }
[data-sam-bewerken] { max-height: 45vh; overflow-y: auto; }
.wk-bulk:has([data-sam-bewerken]) { height: auto; min-height: 44px; padding: 8px 16px; flex-wrap: wrap; }
.wk-bulk:has([data-sam-bewerken]) > .wk-knoppen { flex: 1; }
[data-sam-bewerken] { flex-basis: 100%; }

.wc-sam-opschoning .wk-tabel th, .wc-sam-opschoning .wk-tabel td { padding-inline: 6px; }

/* Het schuifgebied om de modulekolom van de calculatiekaart. Overgebracht uit
   stijl.ts (D3b-2). */
.wc-schuif { max-width: 100%; max-height: min(72vh, 760px); border: 1px solid var(--lijn); border-radius: var(--straal-groot); background: var(--vlak); overflow: auto; scrollbar-width: thin; }

/* --- De schil en de /new-vormen die nog op een handvol schermen staan ------
   Overgebracht uit delen/kern.ts (D3b-2); wat daar wegviel staat in het
   verslag van die ronde. De losse bladen laden werkplek.css niet: dat is stap 3. */

/* De opmaak van de schil staat in src/kern/opmaak/werkplek.css; die laadt de
   omlijsting als bestand, ná dit blok. Wat hier nog staat zijn de vormen die
   werkplek.css niet kent, van schermen die nog op hun eigen CSS leunen.
   Elke regel hier is werk voor D2. */

/* Het extern-blok: één zin en één knop, in één kaart. */
.wk-extern {
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--straal-groot);
  padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; max-width: 640px;
}
.wk-externzin { margin: 0; font-size: 14px; color: var(--inkt); }

/* Kaarten, rasters en menulijsten: /new-vormen die nog op vier schermen staan. */
.wk-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
/* Binnen `.wk-raster`, en niet los: dit is de tegel van /new en niet de kaart
   van §11. Zonder die inperking overschreef dit blok — het staat later in het
   bestand — élke `.wk-kaart` in de tool met een rand van 1 px die CAS niet
   heeft. De tegel staat alleen nog op het stijlscherm. 16-09. */
.wk-raster .wk-kaart {
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--straal-groot);
  padding: 14px 16px; text-decoration: none; color: var(--inkt); display: block;
  box-shadow: var(--schaduw);
}
.wk-raster .wk-kaart:hover { border-color: var(--geel); }
.wk-kaartnaam { font-size: 14px; font-weight: 600; }
.wk-kaartregels { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.wk-kaartregel { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--inkt); }

/* De grote lege kaders: vervallen (R18), maar nog in gebruik op de 403- en
   404-pagina van de schil en op een paar schermen. */
.wk-leegvlak {
  background: var(--vlak); border: 1px dashed var(--lijn); border-radius: var(--straal-groot);
  padding: 26px 20px; text-align: center;
}
.wk-leegkop { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.wk-leegerbij { font-size: 14px; color: var(--zacht); margin: 0; }
.wk-leegvlak > .wk-knoppen { margin-top: var(--r4); }
.wk-dicht { border-color: var(--amber); }

@media (max-width: 700px) {
  .wk-raster { grid-template-columns: 1fr; }
}

/* De meldknop onderaan elke pagina: "iets melden" als uitklapper. */
.nw-melden { margin: 12px 0 0; }
.nw-melden > summary {
  cursor: pointer; list-style: none; font-size: 12.25px; color: var(--zacht);
  text-decoration: underline; text-underline-offset: 2px; display: inline-block;
}
.nw-melden > summary::-webkit-details-marker { display: none; }
.nw-melden[open] > summary { margin-bottom: 8px; }
.nw-meldform { display: flex; gap: 8px; max-width: 480px; }
/* Eén veldvorm en één knopvorm, ook hier: dit blokje gaf zijn tekstvak en zijn
   knop tot 16-09 een eigen rand, ronding, binnenruimte en lettergrootte mee, en
   omdat de meldknop onder élke zijbalk hangt was dat op elk scherm de enige
   knop die niet op CAS' maat stond (14 px / 8-12 tegen CAS' 12,25 / 5,25-8,75).
   Wat blijft is de plaatsing; de vorm komt van `.wk-vak` en `.wk-knop`. */
.nw-meldform textarea {
  flex: 1; min-height: 54px; resize: vertical; font: inherit; font-size: 14px;
  padding: 7px 10.5px; border: 1.25px solid var(--lijn); border-radius: var(--straal);
  box-shadow: var(--schaduw-veld); background: var(--vlak); color: inherit;
}
.nw-meldform button { align-self: flex-end; }

/* De signaalregel (Logistiek, Meerwerk): een aandachtskop met de open punten
   eronder en één kerngetal rechts. nw-sig-<toon> wordt in de code
   samengesteld, dus staan alle drie de tonen hier. */
.nw-sigregel {
  display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--straal-groot);
  box-shadow: var(--schaduw); padding: 16px 18px; margin: 0 0 18px;
}
.nw-sigregellinks { flex: 1 1 320px; min-width: 0; }
.nw-aandachtkop { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.nw-aandachtdeel { display: inline-flex; align-items: baseline; gap: 5px; }
.nw-aandachteenheid { font-size: 14px; font-weight: 600; color: var(--zacht); }
.nw-aandachtscheiding { color: var(--grijs); }
.nw-aandachtwoord { font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--zacht); }
.nw-aandachtn {
  font-size: 21px; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--rood);
}
.nw-aandachtkop.nw-rustig .nw-aandachtn { color: var(--groen); }
.nw-nulzin { margin: 0 0 10px; font-size: 14px; color: var(--zacht); }
.nw-signalen { display: flex; flex-direction: column; gap: 2px; }
.nw-signaal {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 6px 8px; border-radius: var(--straal-groot); text-decoration: none; color: inherit;
}
.nw-signaal:hover { background: var(--grond); }
.nw-sigwat { font-size: 14px; }
.nw-sign { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nw-sig-let .nw-sign { color: var(--rood); }
.nw-sig-wacht .nw-sign { color: var(--amber); }
.nw-sig-goed .nw-sign { color: var(--groen); }
.nw-signalen-nul .nw-sigwat, .nw-signalen-nul .nw-sign { font-size: 12.25px; color: var(--zacht); font-weight: 500; }
.nw-kerngetal {
  flex: 0 1 210px; border-left: 1px solid var(--lijn); padding-left: 18px;
  display: flex; flex-direction: column; justify-content: center;
}
.nw-kcijfer {
  font-size: 21px; font-weight: 700; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--inkt);
}
.nw-kwat { font-size: 14px; color: var(--zacht); margin-top: 6px; }
.nw-konder { font-size: 10.5px; color: var(--zacht); margin-top: 3px; }
@media (max-width: 680px) {
  .nw-kerngetal { border-left: none; border-top: 1px solid var(--lijn); padding-left: 0; padding-top: 14px; flex-basis: 100%; }
}

/* De actierij onder een dossierkop; de bladerpijlen eromheen bestaan niet
   meer. */
.nw-actierij { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
@media print { .nw-actierij { display: none; } }

/* Het aanbod om de buitendienst-app op het beginscherm te zetten. */
.nw-appinstall[hidden] { display: none; }
.nw-appinstall {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 16px; padding: 10px 12px; border-left: 3px solid var(--geel);
  border-radius: var(--straal-groot); background: var(--geel-zacht); color: var(--inkt);
}
.nw-appinstall span, .nw-appinstall small { display: block; }
.nw-appinstall strong { font-size: 14px; }
.nw-appinstall small { color: var(--zacht); font-size: 12.25px; }
.nw-appinstall button { min-height: 44px; flex: 0 0 auto; }
@media (max-width: 430px) {
  .nw-appinstall { align-items: flex-start; flex-direction: column; }
  .nw-appinstall button { width: 100%; }
}

/* --- Kennisbank ----------------------------------------------------------
   De ronde KENNISBANK ÉÉN VORM (MINDER-2, 14-09) heeft de vijftien schermen op
   de gewone bouwstenen gezet. Weg zijn: de eigen familie `wki-` van het
   startblad, de eigen lijst-, vouw-, kaart-, zoek-, databank- en
   keurdocumentvormen, de drie eigen paginabreedtes (920 / 1.180 / 1.120) en de
   tabrij van het intranet. Wat hier nog staat is de leesmaat van een document
   (§14a hieronder), de aanhangkaart van de SAM en het verslepen van de
   wensenlijst — de enige vorm die geen bouwsteen kan zijn, want een regel die
   je met een vinger optilt heeft een eigen DOM nodig.

   De kennisaanhangkaart bij een SAM en bij een kennisproduct. */

.nw-sk-regel { border-top: 1px solid var(--lijn); padding: 8px 0; font-size: 14px; }
.nw-sk-wie { color: var(--zacht); font-size: 12.25px; }
.nw-sk-soort { font-weight: 600; margin-right: 6px; }
.nw-sk-vormen { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.nw-sk-vorm { flex: 1 1 260px; min-width: 0; border: 1px solid var(--lijn); border-radius: var(--straal-groot); padding: 12px; }
.nw-sk-vorm h3 { margin: 0 0 8px; font-size: 14px; }
.nw-sk-label { display: block; font-size: 12.25px; color: var(--zacht); margin: 8px 0 3px; }
.nw-sk-veld { width: 100%; box-sizing: border-box; font: inherit; font-size: 17.5px; padding: 9px 10px; border: 1px solid var(--lijn); border-radius: var(--straal-groot); background: var(--vlak); color: inherit; }
.nw-sk-vorm input[type="file"] { font-size: 12.25px; color: var(--zacht); max-width: 100%; margin-top: 4px; }
.nw-sk-knop { margin-top: 10px; }
.nw-sk-melding { display: block; margin-top: 8px; font-size: 12.25px; color: var(--zacht); }

/* ─── 14a. Leesmaat ──────────────────────────────────────────────────────
   Een document dat je léést (een leespagina, een kennisstuk, een
   productpagina, een keurdocument) binnen een paneel. Eén vorm voor wat vier
   eigen leesvormen van de Kennisbank waren (de kennispagina, het
   keurdocument, de leespagina en het intranetstuk),
   en de enige plek in de tool waar lopende tekst staat.
   Drie dingen doet hij: de regel op een leesbare lengte houden, de koppen op
   de schaal van §6 zetten (18 en 14, geen 26) en de code-achtergrond uit de
   markdown terugbrengen tot gewone tekst — een pad in backticks mag geen
   vierde lettertype op het scherm zetten (R38). */
.wk-lees { max-width: 76ch; }
.wk-lees > :first-child { margin-top: 0; }
.wk-lees h1 { font-size: 17.5px; margin: 0 0 8px; }
.wk-lees h2 { font-size: 14px; margin: 20px 0 6px; }
.wk-lees h3 { font-size: 14px; margin: 16px 0 4px; }
.wk-lees p { margin: 8px 0; line-height: 1.55; }
.wk-lees ul, .wk-lees ol { margin: 4px 0; padding-left: 22px; }
.wk-lees li { line-height: 1.5; }
.wk-lees blockquote { margin: 8px 0; padding-left: 12px; border-left: 3px solid var(--lijn); color: var(--zacht); }
.wk-lees code, .wk-lees pre { font-family: inherit; font-size: inherit; background: none; padding: 0; }
.wk-lees table { width: 100%; border-collapse: collapse; font-size: 14px; }
.wk-lees th, .wk-lees td { padding: 0 var(--r3); height: 34px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--lijn-zacht); }
.wk-lees th { font-size: 12.25px; font-weight: 600; }

/* De wensenlijst: verslepen tussen parkeren, pakken en af. */
.nw-wens { padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.nw-wens:last-child { border-bottom: none; }
.nw-wens-kop { display: flex; align-items: baseline; gap: 12px; font-size: 14px; }
.nw-wens-tekst { flex: 1; min-width: 0; }
.nw-wens-plek {
  display: inline-block; min-width: 20px; margin-right: 7px; font-size: 10.5px;
  font-weight: 700; color: var(--zacht); font-variant-numeric: tabular-nums;
}
.nw-wens-uit { margin: 6px 0 0 27px; }
.nw-wens-uit summary { cursor: pointer; font-size: 12.25px; color: var(--zacht); }
.nw-wens-uit p { margin: 6px 0 0; font-size: 14px; white-space: pre-wrap; }
.nw-wens-spoor { list-style: none; margin: 6px 0 0; padding: 0; }
.nw-wens-spoor li { font-size: 12.25px; color: var(--zacht); padding: 3px 0; line-height: 1.45; }
.nw-wens-spoor li b { color: var(--inkt); font-weight: 600; }
.nw-wens-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin: 9px 0 0 27px; }
.nw-wens-vorm { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.nw-wens-vorm input, .nw-wens-vorm textarea {
  border: 1px solid var(--lijn); border-radius: var(--straal-groot); padding: 6px 9px;
  font-size: 12.25px; font-family: inherit; background: var(--vlak); color: inherit;
}
.nw-wens-vorm input { min-width: 190px; }
.nw-wens-vorm .wk-knop { height: 26px; padding: 0 10px; font-size: 12.25px; }
.nw-wens-pijl .wk-knop { min-width: 34px; justify-content: center; }
/* De afgeronde en de geparkeerde wensen staan in de gedeelde inklapvorm
   (`details.wk-inklap`, §19); hun eigen vormen zijn weg. */
/* De sleepgreep. Standaard weg — hij verschijnt pas als het script heeft
   vastgesteld dat slepen hier werkelijk kan (zie SLEEPSCRIPT).
   De regel touch-action:none is geen opsmuk maar de kern van het slepen met een
   vinger: zonder die regel pakt de browser de beweging zelf af om te scrollen
   en komt er na de eerste pointermove nooit meer een.
   (Geen accenttekens in dit commentaar: het staat binnen een template-literal,
   en een accentteken sluit die stilzwijgend af. Zie scripts/backticks.mjs.) */
.nw-wens-greep {
  display: none; flex: 0 0 auto; align-self: center; cursor: grab;
  padding: 7px 8px; margin-right: 1px; border-radius: var(--straal); line-height: 1;
  font-size: 14px; color: var(--zacht); user-select: none;
  -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none;
}
.nw-sleepbaar .nw-wens-greep { display: block; }
.nw-sleepbaar .nw-wens-greep:hover { background: var(--grond); color: var(--inkt); }
.nw-sleepbaar .nw-wens-greep:active { cursor: grabbing; }
/* Terwijl er gesleept wordt. De regels schuiven met een overgang opzij zodat je
   het gat ziet ontstaan waar hij landt; de vastgepakte regel juist zónder, want
   die hoort de aanwijzer op de pixel te volgen. Een overgang van 150 ms op de
   regel die je vasthebt is precies het "achterlopende" gevoel dat we hier
   kwijt wilden. */
.nw-wens-bezig { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.nw-wens-bezig .nw-wens { transition: transform 150ms ease; }
.nw-wens-bezig .nw-wens-pak {
  transition: none; position: relative; z-index: 3; cursor: grabbing;
  background: var(--vlak); border-radius: var(--straal-groot); border-bottom-color: transparent;
  box-shadow: var(--schaduw);
}
/* Wie beweging heeft uitgezet, krijgt geen beweging. Twee keer opgeschreven:
   het script zet nw-rustig op de lijst zodra de browser het meldt, en de
   media-regel vangt het geval dat de voorkeur pas tijdens het slepen omgaat. */
.nw-rustig.nw-wens-bezig .nw-wens { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .nw-wens-bezig .nw-wens { transition: none; }
}
/* De pijltjes blijven staan als slepen aanstaat, maar kleiner en stiller.
   Weghalen zou de volgorde onbereikbaar maken voor wie met het toetsenbord
   werkt: een sleepgreep kent geen toetsenbordweg, ook niet op pointer events.
   Ze zijn hier de terugval, niet de hoofdweg — vandaar de maat. */
.nw-sleepbaar .nw-wens-pijl .wk-knop {
  min-width: 26px; height: 24px; padding: 0 6px; font-size: 10.5px; opacity: 0.6;
}
.nw-sleepbaar .nw-wens-pijl .wk-knop:hover,
.nw-sleepbaar .nw-wens-pijl .wk-knop:focus { opacity: 1; }
.nw-wens-sleepvorm { display: none; }

/* Het gebouwde intranetfragment houdt zijn eigen <article>; de leesmaat
   hierboven doet de rest. */
.wk-lees .docinhoud > h1 { display: none; }

/* --- Operatie: de VOR-fotogroepen, de buitendienst-app, de faseplanning en
   de tijdlijn ---------------------------------------------------------------
   Overgebracht uit delen/operatie.ts (D3b-2). De standklassen blijven staan:
   fp-standbadge-<soort>, nw-bd-<soort>, wt-exact-<stand> en wt-f-<fase> worden
   in de code samengesteld en zijn dus niet te vinden met een zoekopdracht. */

/* De VOR-fotogroepen (werk/gedeeld/vorfotos.ts en de buitendienst): een
   uitklapper per VOR met de foto’s als vierkantjes van 132 px. */
.nw-vf-groep { border: 1px solid var(--lijn); border-radius: var(--straal-groot); margin: 10px 0; }
.nw-vf-groep summary { cursor: pointer; padding: 10px 12px; min-height: 44px; box-sizing: border-box; font-size: 14px; }
.nw-vf-groep summary::marker { color: var(--zacht); }
.nw-vf-vornaam { font-weight: 700; }
.nw-vf-bij { color: var(--zacht); font-size: 12.25px; margin-left: 8px; }
.nw-vf-inhoud { padding: 0 12px 10px; }
.nw-vf-fotos { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.nw-vf-blokje { max-width: 132px; font-size: 10.5px; color: var(--zacht); }
.nw-vf-foto { width: 132px; height: 99px; object-fit: cover; image-orientation: from-image; border-radius: var(--straal-groot); border: 1px solid var(--lijn); display: block; }
.nw-vf-fotobestand { width: 132px; height: 99px; box-sizing: border-box; padding: 20px 8px 8px; overflow-wrap: anywhere; text-align: center; border-radius: var(--straal-groot); border: 1px solid var(--lijn); display: block; }
/* C3: de omschrijvingen van een SAM staan als meerdere regels uit CAS; de regelovergangen zijn inhoud. */
.wk-samtekst { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.nw-vf-meer { flex-basis: 100%; margin-top: 2px; }
.nw-vf-meer summary { min-height: 44px; padding: 10px 0; cursor: pointer; color: var(--zacht); font-size: 12.25px; }
.nw-vf-regel { border-top: 1px solid var(--lijn); padding: 8px 0; font-size: 14px; }
.nw-vf-wie { color: var(--zacht); font-size: 12.25px; }
.nw-vf-vormen { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.nw-vf-vorm { flex: 1 1 260px; min-width: 0; border: 1px solid var(--lijn); border-radius: var(--straal-groot); padding: 12px; }
.nw-vf-vorm h3 { margin: 0 0 8px; font-size: 14px; }
.nw-vf-label { display: block; font-size: 12.25px; color: var(--zacht); margin: 8px 0 3px; }
.nw-vf-veld { width: 100%; box-sizing: border-box; font: inherit; font-size: 17.5px; padding: 9px 10px; border: 1px solid var(--lijn); border-radius: var(--straal-groot); background: var(--vlak); color: inherit; }
.nw-vf-vorm input[type="file"] { font-size: 14px; color: var(--zacht); width: 100%; min-height: 44px; max-width: 100%; margin-top: 4px; }
.nw-vf-bestandbij { margin: 4px 0 0; color: var(--zacht); font-size: 12.25px; }
.nw-vf-melding { display: block; margin-top: 8px; font-size: 12.25px; color: var(--zacht); }

/* De werklijstregel onder de fotogroepen: alleen de twee zachte regels zijn
   over, de tabel eromheen is de tabel-bouwsteen geworden. */
.nw-wl-wie { color: var(--zacht); font-size: 12.25px; display: block; margin-top: 2px; }
.nw-wl-melding { display: block; margin: 8px 0 0; font-size: 12.25px; color: var(--zacht); }

/* De buitendienst-app: één rustige werkkolom, taken bovenaan plakkend, elk
   meldsoort met zijn eigen gekleurde vierkantje. Een taak-app, geen dashboard. */
/* De buitendienst is een taak-app, geen dashboard. Eén rustige werkkolom en
   vlakke secties houden op telefoon én tablet steeds dezelfde leesvolgorde. */
.nw-bd-app, .nw-bd-app * { box-sizing: border-box; }
.nw-bd-app { width: 100%; max-width: 900px; padding-bottom: 14px; }
.nw-bd-zoek { margin: 0; }
.nw-bd-onderdeelzoek { display: block; margin: 10px 0 12px; }
.nw-bd-onderdeelacties { border-top: 1px solid var(--lijn); }
.nw-bd-onderdeelactie { border-bottom: 1px solid var(--lijn); }
.nw-bd-onderdeelactie > summary {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  min-height: 54px; padding: 7px 3px; cursor: pointer; list-style: none;
}
.nw-bd-onderdeelactie > summary::-webkit-details-marker { display: none; }
.nw-bd-onderdeelactie > summary::after { content: '›'; color: var(--zacht); font-size: 21px; transform: rotate(90deg); }
.nw-bd-onderdeelactie[open] > summary::after { transform: rotate(-90deg); }
.nw-bd-onderdeelbinnen { padding: 2px 3px 14px 42px; min-width: 0; }
.nw-bd-onderdeelicoon {
  width: 30px; height: 30px; border-radius: var(--straal-groot); display: grid; place-items: center;
  background: var(--grond); color: var(--zacht); font-size: 17.5px; font-weight: 800;
}
.nw-bd-onderdeeltitel { display: block; font-size: 14px; font-weight: 700; }
.nw-bd-onderdeelbij { display: block; margin-top: 1px; color: var(--zacht); font-size: 12.25px; font-weight: 400; }
.nw-bd-onderdeelcodes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.nw-bd-onderdeelcode {
  min-height: 44px; max-width: 100%; padding: 8px 11px; border: 1px solid var(--lijn);
  border-radius: var(--straal-groot); background: var(--vlak); color: inherit; font: inherit; font-size: 14px;
  font-weight: 700; cursor: pointer; overflow-wrap: anywhere; text-align: left;
}
.nw-bd-onderdeelcode:hover, .nw-bd-onderdeelcode:focus-visible {
  border-color: var(--geel); background: var(--grond);   /* Eén focusring (R53): geen `outline: none` — de basisring blijft. 14-09. */
}
.nw-bd-taken {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  max-width: none; width: auto; margin: 0 0 12px; padding: 6px;
  background: color-mix(in srgb, var(--vlak) 94%, transparent);
  border: 1px solid var(--lijn); border-radius: var(--straal-groot);
}
.nw-bd-taak {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px;
  border-radius: var(--straal-groot); color: inherit; text-decoration: none; font-size: 14px; font-weight: 650;
}
.nw-bd-taak:hover, .nw-bd-taak:focus-visible { background: var(--grond); }   /* R53: de basisring blijft staan. */
.nw-bd-taakicoon {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--straal);
  background: var(--grond); color: var(--zacht); font-weight: 800;
}
#nw-bd-melden, #nw-bd-onderdelen, #nw-bd-ibn { scroll-margin-top: 126px; }
.nw-bd-vlakken { border-top: 1px solid var(--lijn); }
.nw-bd-meldactie { border-bottom: 1px solid var(--lijn); scroll-margin-top: 126px; }
.nw-bd-meldactie > summary {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 54px; padding: 7px 3px; cursor: pointer; list-style: none;
}
.nw-bd-meldactie > summary::-webkit-details-marker { display: none; }
.nw-bd-meldactie > summary::after { content: '›'; color: var(--zacht); font-size: 21px; transform: rotate(90deg); }
.nw-bd-meldactie[open] > summary::after { transform: rotate(-90deg); }
.nw-bd-meldtitel { display: block; font-size: 14px; font-weight: 700; }
.nw-bd-meldbij { display: block; margin-top: 1px; color: var(--zacht); font-size: 12.25px; font-weight: 400; }
.nw-bd-ikoon {
  width: 30px; height: 30px; border-radius: var(--straal-groot); display: grid; place-items: center;
  font-size: 14px; font-weight: 800; background: var(--grond); color: var(--zacht);
}
.nw-bd-veiligheid .nw-bd-ikoon, .nw-bd-bevinding .nw-bd-ikoon {
  background: var(--rood-zacht); color: var(--rood);
}
.nw-bd-gereed .nw-bd-ikoon { background: var(--groen-zacht); color: var(--groen); }   /* niet dood: kaarten.ts bouwt `nw-bd-` + soort */
.nw-bd-restpunt .nw-bd-ikoon { background: var(--amber-zacht); color: var(--amber); }
.nw-bd-vlak { margin: 0; padding: 4px 3px 15px 45px; }
.nw-bd-vor { border: 0; border-bottom: 1px solid var(--lijn); border-radius: 0; margin: 0; background: transparent; }
.nw-bd-vor:first-of-type { border-top: 1px solid var(--lijn); }
.nw-bd-vor > summary { cursor: pointer; list-style: none; min-height: 48px; padding: 10px 0; font-size: 14px; }
.nw-bd-vor > summary::-webkit-details-marker { display: none; }
.nw-bd-vornaam { font-weight: 700; }
.nw-bd-vorbij { display: block; margin-top: 3px; font-size: 12.25px; color: var(--zacht); line-height: 1.4; }
@media (max-width: 919px) {
  .nw-bd-app { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .nw-bd-taken { position: sticky; top: 61px; z-index: 12; backdrop-filter: blur(8px); }
}
@media (max-width: 640px) {
  .nw-bd-vlak { padding-left: 0; }
  .nw-bd-onderdeelbinnen { padding-left: 0; }
  .nw-bd-taak { flex-direction: column; gap: 2px; min-height: 50px; font-size: 10.5px; }
  .nw-bd-taakicoon { width: 22px; height: 22px; }
}

/* De faseplanning: op de desktop de dichte tabel, tot en met een kleine laptop
   dezelfde tabel als werkregels — geen tweede dataset en geen tegelstapel. */
.fp-werkvlak { min-width: 0; max-width: 100%; }
.fp-meta { font-size: 12.25px; color: var(--zacht); }
.fp-ontbreekt { font-size: 12.25px; color: var(--amber); font-weight: 600; }

.fp-overname {
  margin: 0 0 14px; padding: 11px 0 12px;
  border-block: 1px solid var(--lijn);
}
/* Dit was een heroblok van 110 px: een icoon in een geel vierkant van 38 px,
   een kop van 18 px en rechts een gele pil. Dat is de nu-balk en het paneel met
   eyebrow die ONTWERP schrapt, plus een pil die R16 verbiedt en een
   letterdikte (750) die §6 niet kent. Nu een gewone paneelkop van 13 px met een
   standwoord rechts. 13-09. */
.fp-standkop { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.fp-standicoon, .fp-projecticoon { display: grid; place-items: center; color: var(--zacht); }
.fp-standicoon { width: 20px; height: 20px; }
.fp-standtekst { min-width: 0; }
.fp-standtekst h2 { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.25; }
.fp-standtekst p { margin: 2px 0 0; color: var(--zacht); font-size: 12.25px; overflow-wrap: anywhere; }
.fp-standbadge { display: inline-flex; align-items: center; font-size: 12.25px; font-weight: 600; white-space: nowrap; }
.fp-standbadge-bron, .fp-standbadge-lezen { color: var(--geel-inkt); }
.fp-standbadge-controle { color: var(--amber); }
.fp-standbadge-schrijven { color: var(--groen); }
.fp-standuitleg { max-width: 90ch; margin: 6px 0 0 28px; color: var(--zacht); font-size: 12.25px; line-height: 1.45; }
.fp-signaal {
  display: flex; gap: 8px; align-items: flex-start; max-width: 94ch; margin: 8px 0 0 28px;
  padding: 8px 10px; border-left: 3px solid var(--amber); background: var(--geel-zacht);
  color: var(--geel-inkt); font-size: 12.25px; line-height: 1.45;
}
.fp-signaal > span { flex: none; margin-top: 1px; }
.fp-signaal p { margin: 0; }
.fp-signaal a { color: inherit; font-weight: 700; }
.fp-overname > form { display: grid; gap: 8px; max-width: 840px; margin: 11px 0 0 48px; }
.fp-beheeracties { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 14px; margin: 11px 0 0 48px; }
.fp-beheeracties form { display: grid; gap: 8px; align-content: start; }
.fp-reden { display: grid; gap: 4px; font-size: 12.25px; color: var(--zacht); }
.fp-reden textarea {
  min-height: 64px; resize: vertical; font: inherit; padding: 7px;
  border: 1px solid var(--lijn); border-radius: var(--straal); background: var(--vlak); color: var(--inkt);
}
.fp-opslaan { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: fit-content; min-height: 38px; box-sizing: border-box; }
.fp-opslaan .ico { width: 16px; height: 16px; }

.fp-project { margin: 0 0 16px; border-block: 1px solid var(--lijn); }
.fp-project summary {
  display: flex; min-height: 58px; align-items: center; gap: 10px; padding: 6px 0;
  color: var(--inkt); cursor: pointer; list-style: none;
}
.fp-project summary::-webkit-details-marker { display: none; }
.fp-project summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }   /* --balk is in donker bijna de grond: onzichtbare ring. */
.fp-projecticoon { width: 34px; height: 34px; border-radius: var(--straal-groot); }
.fp-projectsamenvatting { display: grid; min-width: 0; gap: 2px; }
.fp-projectsamenvatting strong { font-size: 14px; }
.fp-projectsamenvatting small { color: var(--zacht); font-size: 12.25px; line-height: 1.35; }
.fp-project summary > .chev { margin-left: auto; transition: transform .18s ease; }
.fp-project[open] summary > .chev { transform: rotate(180deg); }
.fp-projectinhoud { padding: 12px 0 14px 44px; border-top: 1px solid var(--lijn); }
.fp-projectinhoud > p { max-width: 82ch; margin: 0 0 11px; color: var(--zacht); font-size: 14px; line-height: 1.45; }
.fp-projectkeuze { display: grid; gap: 4px; max-width: 760px; font-size: 12.25px; font-weight: 650; }
.fp-project select {
  width: 100%; min-height: 40px; box-sizing: border-box; font: inherit; padding: 7px 9px;
  border: 1px solid var(--lijn); border-radius: var(--straal); background: var(--vlak); color: var(--inkt);
}
.fp-projectdatums { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 8px; margin: 10px 0; }
.fp-projectdatums label { display: grid; gap: 4px; font-size: 12.25px; color: var(--zacht); }
.fp-projectdatums input {
  width: 100%; min-height: 40px; box-sizing: border-box; font: inherit; padding: 6px 8px;
  border: 1px solid var(--lijn); border-radius: var(--straal); background: var(--vlak); color: var(--inkt);
}

.fp-lijst { min-width: 0; max-width: 100%; }

@media (max-width: 1180px) {
  .fp-projectdatums { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
  .fp-beheeracties { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .fp-standkop { grid-template-columns: 20px minmax(0, 1fr); align-items: start; }
  .fp-standbadge { grid-column: 2; justify-self: start; margin-top: 2px; }
  .fp-standuitleg, .fp-signaal, .fp-overname > form, .fp-beheeracties { margin-left: 0; }
  .fp-signaal { margin-top: 9px; }
  .fp-projectinhoud { padding-left: 0; }
  .fp-projectdatums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  .fp-projectdatums { grid-template-columns: minmax(0, 1fr); }
  .fp-project summary { min-height: 64px; }
  .fp-projectsamenvatting small { max-width: 29ch; }
}

/* De tijdlijn: een raster van weken met de projectkolom plakkend links, een
   balkje per fase en een ruit voor de locatieweek. */
.wt-tabel{border-collapse:separate;border-spacing:0;font-size: 12.25px;color:var(--inkt)}
.wt-tabel th,.wt-tabel td{border-right:1px solid var(--lijn);border-bottom:1px solid var(--lijn);background:var(--vlak);vertical-align:middle}
.wt-tabel thead th{position:sticky;top:0;z-index:4;padding:4px 2px;background:var(--vlak-2);color:var(--zacht);font-size: 10.5px;font-weight:800;text-align:center;white-space:nowrap}
.wt-tabel thead th span{display:block;font-size: 12.25px;color:var(--inkt)}
.wt-vast{position:sticky;left:0;z-index:3;min-width:230px;max-width:290px;padding:5px 9px;text-align:left;border-left:4px solid var(--grijs)}
.wt-tabel thead .wt-vast{z-index:6;border-left-color:transparent}
.wt-vast b{display:block;font-size: 12.25px;font-weight:700}
.wt-vast a{color:var(--inkt);text-decoration:none}
.wt-vast a:hover{text-decoration:underline}
.wt-vast span{display:block;color:var(--zacht);font-size: 12.25px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wt-vast small{display:block;color:var(--zacht);font-size: 10.5px;white-space:nowrap}
.wt-exact-gereed .wt-vast{border-left-color:var(--groen)}
.wt-exact-bezig .wt-vast{border-left-color:var(--amber)}
.wt-exact-open .wt-vast{border-left-color:var(--grijs)}
.wt-exact-onbekend .wt-vast{border-left-style:dotted}
.wt-week{width:34px;min-width:34px;padding:2px 0}
.wt-cel{display:grid;gap:2px;min-height:30px;align-content:center;justify-items:stretch}
.wt-tabel .wt-nu{background:var(--geel-zacht)}
.wt-tabel .wt-jaar{border-left:2px solid var(--grijs)}
.wt-tabel tbody tr:nth-child(even) th,.wt-tabel tbody tr:nth-child(even) td{background:var(--grond)}
.wt-tabel tbody tr:hover th,.wt-tabel tbody tr:hover td{background:var(--rij)}
.wt-tabel tbody tr.wt-gekozen th,.wt-tabel tbody tr.wt-gekozen td{background:var(--geel-zacht)}
.wt-seg{display:flex;align-items:center;justify-content:space-between;height:14px;margin:0 -1px;padding:0 3px;border-top:1px solid;border-bottom:1px solid;border-color:var(--grijs);background:var(--vlak-2);color:var(--inkt);font-size: 10.5px;font-weight:800;line-height:1;text-decoration:none}
.wt-seg i{font-style:normal}
.wt-seg.wt-begin{margin-left:2px;border-left:1px solid;border-radius:var(--straal) 0 0 6px}
.wt-seg.wt-eind{margin-right:2px;border-right:1px solid;border-radius:0 6px 6px 0}
.wt-seg.wt-begin.wt-eind{border-radius:var(--straal)}
.wt-f-werkvoorbereiding{background:var(--bron-cas-zacht);border-color:var(--bron-cas)}
.wt-f-magazijn{background:var(--amber-zacht);border-color:var(--amber)}
.wt-f-productie{background:var(--balk-zacht);border-color:var(--balk);color:var(--balk)}
.wt-f-expeditie{background:var(--bron-map-zacht);border-color:var(--bron-map)}
.wt-s-te_laat{box-shadow:inset 0 -3px 0 var(--rood)}
.wt-s-gereed{border-color:var(--groen)}
.wt-ruit{display:block;text-align:center;color:var(--geel-inkt);font-size: 17.5px;line-height:1;text-decoration:none}
.wt-ruit-conflict{color:var(--rood);font-weight:900}
[data-sleep]{cursor:grab}
.wt-sleept{user-select:none}
.wt-sleept td{cursor:grabbing}
.wt-doel{outline:2px solid var(--geel);outline-offset:-2px}
.wt-legenda .wt-vak{display:inline-block;width:22px;height:12px;border:1px solid;border-radius:var(--straal);vertical-align:middle}
.wt-legenda .wt-rand{display:inline-block;width:10px;height:14px;border-left:4px solid var(--grijs);vertical-align:middle}
.wt-legenda .wt-ruit{display:inline}
@media print{.wt-tabel th,.wt-tabel td{background:transparent!important}
.wt-vast,.wt-tabel thead th{position:static}}

/* --- Instellingen: gates, selectiecodes, zichtbaarheid, personen en de
   kijkpagina ---------------------------------------------------------------
   Overgebracht uit delen/instellingen.ts (D3b-2); dat bestand bestaat niet
   meer. Geen dode klasse: alle 45 worden nog getekend. Het zijn beheerformulieren
   met een veld per regel, smaller dan §15 omdat er meerdere naast elkaar staan. */

/* De gates-instelling: één uitklapper per gate met zijn punten eronder. */
/* Gates en punten was tot 17-09 een scherm met eigen opmaak: veertien
   uitklapkaartjes met een eigen rand en ronding, een eigen veldraster met
   labels van 12,25 px, en invoervakken met 5/8 binnenruimte, een rand van 1 px
   en een grijze vulling — naast een CAS-formulier meteen herkenbaar als iets
   anders. Het scherm draagt nu de lijst, de kaart, het veldraster en het vak
   van de bouwstenen; wat hier overblijft is wat alleen dit scherm heeft. */
.wk-gi-sub{color:var(--zacht);font-size: 12.25px}
.wk-gi-binnen{padding:0 var(--r4) var(--r4)}
.wk-gi-breed{grid-column:1/-1}
.wk-gi-vink{display:flex;align-items:center;gap:6px;font-size: 14px;color:var(--inkt)}
.wk-gi-vink input{width:auto}
.wk-gi-punten td{vertical-align:top}
.wk-gi-punten .wk-vak{max-width:none}
.wk-gi-smal{width:64px}
.wk-gi-nieuw td{background:var(--grond)}
.wk-gi-knop{margin:var(--r3) 0 0}
.wk-gi-meta{color:var(--zacht);font-size: 12.25px;white-space:nowrap}

/* DL-3 §2 (herzien 21-09, na review): vinkje · opmerking · document ·
   "Anders" op één regel. Eigen klassen, niet `wk-gi-vink`/`wkd-vorm` van
   Instellingen: die zetten het vinkje op `width:auto` (2 px) en elk `label`
   op `display:grid` (review punt 8/15). `.wkd-gate0` geeft de laatste regel
   extra specificiteit tegen `.wkd-gate0 summary{min-height:44px}`. */
.wk-gi-batchrij{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;vertical-align:middle;margin-left:6px}
.wk-gi-batchvink{display:inline-flex;align-items:center;gap:4px}
.wk-gi-batchvink input{width:18px;height:18px;margin:0}
.wk-gi-opmerking,.wk-gi-doc select{width:110px;height:20px;padding:1px 4px;font-size:12.25px}
.wk-gi-doc{display:inline-flex;align-items:center;gap:4px;font-size:12.25px;color:var(--zacht)}
.wkd-gate0 .wk-gi-anders>summary{list-style:none;min-height:0;font-size:12.25px;color:var(--zacht);cursor:pointer}
.wk-gi-anders>summary::-webkit-details-marker{display:none}
.wk-gi-anders[open]{flex-basis:100%}
/* Stand-kolom breder: anders knijpt de tabel vinkje+opmerking+document dicht
   (alleen waar er ook een batchrij in staat, reviewer mat ±380 px nodig). */
.wk-checklist:has(.wk-gi-batchrij) td:nth-child(3){min-width:380px;white-space:normal}

/* De selectiecodes: één keuzelijst per code. */
.wk-sc-keuze{font:inherit;font-size: 14px;min-width:164px;padding:5px 8px;border:1px solid var(--lijn);border-radius:var(--straal);background:var(--vlak);color:var(--inkt)}
.wk-sc-meta{color:var(--zacht);font-size: 12.25px;white-space:nowrap}
.wk-sc-knop{margin:14px 0 0}

/* Zichtbaarheid per rol: een vinkjestabel per afdeling. */
.wk-zb-kies{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.wk-zb-kies label{font-size: 12.25px;color:var(--zacht)}
.wk-zb-kies select{font:inherit;font-size: 14px;padding:6px 9px;border:1px solid var(--lijn);border-radius:var(--straal-groot);background:var(--vlak);color:inherit;max-width:100%}
.wk-zb-kop{font-size: 14px;margin:16px 0 6px}
.wk-zb-kop:first-child{margin-top:0}
.wk-zb-sub{color:var(--zacht);font-size: 12.25px;margin-left:6px}
.wk-zb-vink{text-align:center;width:1%}
.wk-zb-knop{margin:14px 0 0}

/* Personen en de overige beheerformulieren. */
.nw-in-melding { font-size: 14px; margin: 8px 0; }
.nw-in-zacht { color: var(--zacht); font-size: 12.25px; }
.nw-in-acties { display: flex; gap: 6px; flex-wrap: wrap; }
.nw-in-actie { display: inline; }
.nw-in-vorm { border-top: 1px solid var(--lijn); margin-top: 14px; padding-top: 12px; max-width: 420px; }
.nw-in-vorm label { display: block; font-size: 12.25px; color: var(--zacht); margin: 8px 0 3px; }
.nw-in-vorm input, .nw-in-vorm select { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 7px 9px; border: 1px solid var(--lijn); border-radius: var(--straal-groot); background: var(--vlak); color: inherit; }
.nw-in-vorm button { margin-top: 10px; }
.nw-in-vinkjes { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 2px; }
.nw-in-vink { display: flex; align-items: center; gap: 5px; font-size: 14px; color: inherit; margin: 0; }
.nw-in-vink input { width: auto; }

/* De kijkpagina van de vormtaal (Instellingen › Vorm en stijl): elk
   component in een eigen proefvak met de naam van zijn functie erbij. */
.vs-thema { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.vs-inleiding { max-width: 62ch; margin: 0 0 22px; font-size: 14px; line-height: 1.55; }
.vs-inleiding p { margin: 0 0 8px; }
.vs-let { color: var(--amber); font-size: 12.25px; }
.vs-kop { font-size: 17.5px; font-weight: 600; margin: 26px 0 12px; }
.vs-vak {
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--straal-groot);
  box-shadow: var(--schaduw); padding: 16px 18px 12px; margin: 0 0 16px;
}
.vs-vakkop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.vs-vakkop h2 { font-size: 14px; margin: 0; }
.vs-functie {
  font-size: 10.5px; color: var(--zacht); background: var(--grond);
  border: 1px solid var(--lijn); border-radius: var(--straal); padding: 2px 8px; white-space: nowrap;
}
.vs-toon { margin: 0 0 10px; }
/* De kijkpagina zet de onderste marge van het voorbeeld weg; van de oude
   componenten is alleen de ketenstrip over (werkplek.css §8). */
.vs-toon > .wk-keten { margin-bottom: 0; }
.vs-plat { margin: 0; font-size: 14px; }
.vs-regel {
  font-size: 12.25px; color: var(--zacht); line-height: 1.5; margin: 0;
  border-top: 1px dashed var(--lijn); padding-top: 9px;
}
.vs-rij { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.vs-rij:last-child { margin-bottom: 0; }
.vs-naast { display: inline-flex; align-items: center; gap: 6px; min-width: 120px; }
.vs-breed .nw-ketenbalk { flex: 1; }
@media (max-width: 700px) {
  .vs-vakkop { flex-direction: column; gap: 4px; }
  .vs-functie { white-space: normal; }
}

/* --- Financieel: Het bedrijf, de bedrijfscijfers en het finance-beeld -----
   Overgebracht uit delen/financieel.ts (D3b-2); dat bestand bestaat niet
   meer. Geen dode regel gevonden: de signaalklassen nw-fb-signaal-<soort>
   worden in werk/gedeeld/financieelblokken.ts samengesteld. */

/* Het bedrijf: de velden van de groependefinitie zijn smaller dan §15, want
   er staan drie op een regel naast een naam. */
.wf-knop { margin: 14px 0 0; }
.wf-groepen input[type="text"], .wf-groepen select { font: inherit; font-size: 14px; padding: 5px 7px; border: 1px solid var(--lijn); border-radius: var(--straal); background: var(--vlak); color: inherit; }
.wf-groepen input.wf-kort { width: 5em; }
.wf-groepen input.wf-naam { width: 16em; }

/* De bedrijfscijfers: een regel per afdeling, met de kerngetallen ernaast en
   een pijl rechts. De knoop-strip zelf komt uit kern/vorm.ts. */
a.nw-knoop { color: inherit; text-decoration: none; display: block; }
a.nw-knoop:hover { background: var(--grond); }
.nw-afdelinglijst { border-top: 1px solid var(--lijn); }
.nw-afdrij { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 54px; padding: 9px 8px; border-bottom: 1px solid var(--lijn); color: inherit; text-decoration: none; }
.nw-afdrij:hover, .nw-afdrij:focus-visible { background: var(--rij); }
.nw-afdnaam { font-weight: 650; font-size: 14px; }
.nw-kern { min-width: 0; font-size: 12.25px; line-height: 1.45; color: var(--zacht); }
.nw-kern b { color: var(--rood); font-weight: 650; }
.nw-kern b.nw-ok { color: var(--groen); }
.nw-afdpijl { color: var(--zacht); font-size: 21px; line-height: 1; }
.nw-kop2 { font-size: 14px; margin: 20px 0 10px; }
.nw-startblok p { margin: 0 0 8px; font-size: 14px; }
.nw-startblok p:last-of-type { margin-bottom: 12px; }
@media (max-width: 560px) {
  .nw-afdrij { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 4px; }
  .nw-kern { grid-column: 1 / -1; padding-right: 22px; }
  .nw-afdpijl { grid-column: 2; grid-row: 1; }
}

/* Het finance-beeld: zes cellen op een regel, twee per rij op een telefoon.
   Staat op Financieel én op de projectkaart (werk/gedeeld). */
.nw-fb { display: grid; gap: 6px 14px; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 0 8px; }
.nw-fb-cel { display: flex; flex-direction: column; min-width: 0; padding: 7px 10px; border-right: 1px solid var(--lijn); color: inherit; text-decoration: none; }
.nw-fb-cel:last-child { border-right: 0; }
.nw-fb-cel:hover .nw-fb-wat { text-decoration: underline; }
@media (max-width: 900px) {
  .nw-fb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nw-fb-cel { border-right: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
  .nw-fb-cel:nth-child(2n) { border-right: 0; }
  .nw-fb-cel:nth-last-child(-n + 2) { border-bottom: 0; }
}
.nw-fb-wat { font-size: 10.5px; color: var(--zacht); }
.nw-fb-getal { text-align: right; font-size: 14px; }
.nw-fb-verdieping { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.25px; color: var(--zacht); margin: 0 0 6px; align-items: center; }
.nw-fb-verdieping a { color: inherit; text-decoration: none; }
.nw-fb-verdieping a:hover { text-decoration: underline; }
.nw-fb-verdieping .nw-bedrag { color: inherit; }
.nw-fb-signalen { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0 0; font-size: 12.25px; }
.nw-fb-signalen a { text-decoration: none; }
.nw-fb-signalen a:hover { text-decoration: underline; }
.nw-fb-signaal-rood { color: var(--rood); }
.nw-fb-signaal-aandacht { color: var(--amber); }
.nw-fb-rustig { color: var(--zacht); font-size: 12.25px; margin: 6px 0 0; }
.nw-fb-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.nw-fb-kop h2 { margin: 0; font-size: 14px; }
.nw-fb-open { font-size: 12.25px; }

/* De voordeur (schil/welkom.ts): één kolom van 46 rem met een kaart erin die
   vertelt wat er van je bekend is. Overgebracht uit delen/schil.ts (D3b-2). */
.nw-wk { max-width: 46rem; }
.nw-wk-kop { font-size: 1.05rem; font-weight: 600; margin: 0 0 6px; }
.nw-wk-tekst { color: var(--zacht); margin: 0 0 14px; line-height: 1.55; }
.nw-wk-kaart { border: 1px solid var(--lijn); border-radius: var(--straal-groot); padding: 14px 16px; margin: 0 0 16px; background: var(--vlak); }
.nw-wk-rij { display: flex; gap: 10px; padding: 5px 0; font-size: 14px; }
.nw-wk-naam { color: var(--zacht); min-width: 8rem; }
.nw-wk-waarde { font-weight: 600; }
.nw-wk-verder { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* De themakiezer op Instellingen › Vorm en stijl: drie knoppen in één vakje,
   de gekozene met een geel streepje. Overgebracht uit stijl.ts (D3b-2). */
.wc-thema { display: inline-flex; gap: 3px; max-width: 100%; padding: 3px; border-radius: var(--straal-groot); background: var(--grond); overflow-x: auto; }
.wc-thema button {
  display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px; border: 0; border-radius: var(--straal);
  background: transparent; color: var(--zacht); font: inherit; font-size: 12.25px; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.wc-thema button:hover { color: var(--inkt); }
.wc-thema button[aria-pressed="true"] {
  background: var(--vlak); color: var(--inkt); font-weight: 800;
  box-shadow: inset 0 -2px 0 var(--geel), var(--schaduw);
}

/* --- de calculatiekaart (vca-, vct-, vcb-, vcm-, vcv-) --------------------
   Overgebracht uit delen/verkoop-calculatie.ts (D3b-1): 22 kolommen op 1440 px,
   modules die je versleept, een vaste voet met de zeven CAS-getallen. Geen
   bouwsteen, en wordt het ook niet; per klasse staat er één regel. */

/* Kop en tabbladen van de kaart. */
.vca-offerteblok h3 { display: flex; align-items: center; gap: 6px; }
.vca-koptekstknop { display: inline-flex; align-items: center; border: 1px solid var(--lijn); border-radius: var(--straal); padding: 5px 12px; font-size: 12.25px; font-weight: 600; background: var(--vlak); color: var(--inkt); cursor: pointer; text-decoration: none; }
.vca-koptekstknop:hover { border-color: var(--zacht); }
.vca-editor, [data-vca-calculatie] { min-width: 0; max-width: 100%; }
.vca-bewaarstand, .vca-previewstatus { font-size: 10.5px; color: var(--zacht); }
.vca-bewaarstand[data-vca-vuil="1"], .vca-tabstatus [data-vca-bewaarstand][data-vca-vuil="1"] { color: var(--rood); font-weight: 600; }
.vca-previewstatus { margin-left: auto; }
[data-vca-calculatie][aria-busy="true"] .vca-previewstatus { color: var(--inkt); }
/* Puur visueel; zonder script blijft dit een knoppenrij en staan de
   tabpanelen (geen eigen regel = altijd zichtbaar) onder elkaar. */
.vca-tablijst { position: sticky; top: 0; z-index: 12; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; padding: 12px 0; border-bottom: 1px solid var(--lijn); background: var(--grond); }
.vca-tabspacer { flex: 1; }
.vca-tabstatus { display: flex; gap: 12px; padding: 2px 8px 10px; font-size: 10.5px; color: var(--zacht); }

/* Instellingen: vier vaste kolommen zoals CAS, die op 1440 px samen in één
   schermbreedte passen (geen auto-fit-gok). */
.vca-instellingen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.vca-kolom h3 { margin: 0 0 10px; color: var(--geel-inkt); font-size: 12.25px; text-transform: none; letter-spacing: 0; }
.vca-uurtarieven { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--lijn); }
.vca-uurtarieven h4 { margin: 0 0 6px; font-size: 10.5px; color: var(--geel-inkt); text-transform: none; letter-spacing: 0; }
.vca-tarievenlijst { list-style: none; margin: 0; padding: 0; font-size: 12.25px; }
.vca-tarievenlijst li { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.vca-tarievenlijst li span:last-child { font-variant-numeric: tabular-nums; }
.vca-containerrij { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--lijn); }
.vca-containerrij h3 { margin: 0 0 8px; color: var(--geel-inkt); text-transform: none; letter-spacing: 0; }
.vca-instelgroep { border-top: 1px solid var(--lijn); margin-top: 16px; padding-top: 6px; }
.vca-instelgroep > summary { cursor: pointer; padding: 14px 2px; }
.vca-instelgroep > summary b { font-size: 14px; }
.vca-instelgroep > summary span { display: block; margin: 5px 0 0 16px; font-size: 12.25px; color: var(--zacht); }
.vca-instelgroep > div { padding: 10px 0 16px; }
.vca-instelgroep .vca-rij, .vca-instellingen-basis .vca-rij { gap: 14px; }
.vca-instellingen-basis .vca-rij, .vca-context-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; margin-bottom: 20px; }
.vca-instellingen-basis .vca-veld { min-width: 0; overflow-wrap: anywhere; }
.vca-instellingen-basis .vca-veld input:not([type="number"]):not([type="date"]) { width: 100%; min-width: 0; }
.vca-context-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.vca-context .vca-lees, .vca-aanvraagtekst { white-space: pre-wrap; overflow-wrap: anywhere; }
.vca-historie { margin: 26px 0; }

/* Eén veld van de kaart: vaste breedtes per soort, zoals het CAS-raster. De
   rand zit op het omhulsel, zodat de eenheid rechts ín het vakje staat. */
.vca-rij { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.vca-veld { display: grid; gap: 3px; font-size: 14px; color: var(--inkt); }
.vca-veld > span:first-child { color: var(--zacht); font-size: 12.25px; }
.vca-veldfout { font-size: 10.5px; color: var(--rood); }
.vca-veld-fout .vca-invoer { border-color: var(--rood); }
.vca-veld input, .vca-veld textarea, .vca-item, .vca-modnaam { border: 1px solid var(--lijn); border-radius: var(--straal); padding: 4px 8px; font-size: 14px; background: var(--vlak); color: inherit; width: 100%; min-height: 28px; transition: border-color var(--overgang); }   /* Een kader om het veld, niet alleen een onderlijn: zo doet CAS elk veld (afdruk 12/19/35) en zo is er één veldvorm. R53 wijzigt hierop, R58. */
.vca-veld input:hover, .vca-veld textarea:hover, .vca-item:hover { border-color: var(--zacht); }
.vca-veld input[type="number"] { width: 84px; }
.vca-veld input[type="date"] { width: 128px; }
.vca-veld input:not([type="number"]):not([type="date"]) { width: 150px; }
/* Het brede veld (Adres) staat ná de :not()-regels hierboven, anders verliest
   het op specificiteit en wordt het 150 px in plaats van de kolombreedte. */
.vca-veld input.vca-breed:not([type="number"]):not([type="date"]) { width: 100%; }
.vca-veld:has(input.vca-breed) .vca-invoer { display: flex; }
.vca-invoer { display: inline-flex; align-items: center; border: 1px solid var(--lijn); border-radius: var(--straal); background: var(--vlak); }
.vca-eenheid { color: var(--zacht); font-size: 10.5px; padding-right: 8px; white-space: nowrap; }
.vca-lees { font-size: 14px; color: var(--inkt); }
.vca-vink { font-size: 12.25px; display: inline-flex; gap: 6px; align-items: center; margin: 4px 10px 4px 0; }
.vca-vinkrij { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; font-size: 12.25px; }
.vca-tarief span:first-child { font-weight: 600; }
.vca-noot { color: var(--zacht); font-size: 10.5px; margin: 6px 0 0; }
.vca-alarm, .vca-verplicht { color: var(--rood); font-weight: 600; }
.vca-smal, .vca-samnaam, .vca-kleuromschrijving { width: 76px; border: 1px solid var(--lijn); border-radius: var(--straal); padding: 4px 6px; font-size: 12.25px; background: var(--vlak); color: inherit; box-sizing: border-box; }
.vca-samnaam, .vca-kleuromschrijving { width: 100%; }
.vca-kleuromschrijving { min-width: 160px; }
.vct-groep { margin: 12px 0 4px; font-size: 12.25px; font-weight: 600; }

/* De regelknoppen in de tabel: krapper dan de gewone knop, want er staan er
   vier in een kolom van 104 px binnen een regel van 36 px. */
.vca-knoppen { display: flex; gap: 6px; margin: 8px 0 0; flex-wrap: wrap; }
.vca-knop { border: 1px solid var(--lijn); border-radius: var(--straal); padding: 4px 10px; font-size: 12.25px; font-weight: 600; background: var(--vlak); color: var(--inkt); cursor: pointer; }
.vca-knop.vca-primair { background: var(--geel); color: #1D1D1D; border-color: var(--geel); }
.vca-knop.vca-gevaar { color: var(--rood); }

/* De calculatietabel. Vaste, smalle kolommen in plaats van horizontaal
   schuiven: alle 17 CAS-kolommen plus S en ! passen zo binnen de leesbreedte.
   De koppen breken in twee regels (een <br> in de th's). */
.vca-tabel { width: 100%; border-collapse: collapse; font-size: 12.25px; }
.vca-tabel th, .vca-tabel td { padding: 6px; border-bottom: 1px solid var(--lijn); text-align: left; vertical-align: top; }
.vca-tabel th { color: var(--zacht); font-size: 12.25px; font-weight: 600; }
.vca-tabel .vca-getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vca-samtabel { table-layout: fixed; width: auto; min-width: 1450px; }
.vca-samtabel th, .vca-samtabel td { padding: 5px; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }
.vca-samtabel th { line-height: 1.25; }
.vca-samtabel tr[data-vca-ri] td { height: 36px; }
.vca-samtabel th:nth-child(1), .vca-samtabel td:nth-child(1) { width: 82px; }
.vca-samtabel th:nth-child(2), .vca-samtabel td:nth-child(2) { width: 34px; }
.vca-samtabel th:nth-child(3), .vca-samtabel td:nth-child(3) { width: 128px; white-space: normal; }
.vca-samtabel th.vca-vinkkolom, .vca-samtabel td.vca-vinkkolom { width: 26px; padding: 5px 2px; text-align: center; }
.vca-samtabel th:nth-child(6), .vca-samtabel td:nth-child(6) { width: 48px; }
.vca-samtabel th:nth-child(7), .vca-samtabel td:nth-child(7) { width: 48px; }
.vca-samtabel th:nth-child(8), .vca-samtabel td:nth-child(8) { width: 54px; }
.vca-samtabel th:nth-child(n+9):nth-child(-n+11), .vca-samtabel td:nth-child(n+9):nth-child(-n+11) { width: 64px; }
.vca-samtabel th:nth-child(n+12):nth-child(-n+13), .vca-samtabel td:nth-child(n+12):nth-child(-n+13) { width: 72px; }
.vca-samtabel th:nth-child(14), .vca-samtabel td:nth-child(14) { width: 58px; }
.vca-samtabel th:nth-child(n+15):nth-child(-n+18), .vca-samtabel td:nth-child(n+15):nth-child(-n+18) { width: 72px; }
.vca-samtabel th:nth-child(19), .vca-samtabel td:nth-child(19) { width: 64px; }
.vca-samtabel th:last-child, .vca-samtabel td:last-child { width: 104px; }
.vca-samtabel tr[data-vca-ri] td:last-child { white-space: nowrap; }
.vca-samtabel tr[data-vca-ri] td:last-child .vca-knop { padding: 2px 5px; }
.vca-samtabel textarea { width: 160px; min-height: 0; border: 1px solid var(--lijn); border-radius: var(--straal); font-size: 12.25px; background: var(--vlak); color: inherit; }
/* De eerste kolom (Nummer) blijft staan bij horizontaal schuiven. */
.vca-samtabel th:first-child, .vca-samtabel td:first-child,
.vca-samtabel thead th:first-child, .vca-samtabel tr[data-vca-ri] > td:first-child { position: sticky; left: 0; z-index: 2; background: var(--vlak); box-shadow: 1px 0 0 var(--lijn); }
.vca-stipje { display: inline-block; margin-left: 3px; color: var(--geel-inkt); font-size: 10.5px; cursor: help; }
/* Moduletotalen op een lichtgrijze rij, zoals CAS. */
.vca-modtotaal, .vca-samtabel tr.vca-modtotaal th:first-child { background: var(--vlak-2); }
.vca-modtotaal th { font-size: 10.5px; font-weight: 600; }
.vca-incompleet td { background: var(--rood-zacht); }
.vca-samtabel tr.vca-incompleet td:first-child { background: var(--rood-zacht); }
/* De rij van de rekenmotor draagt dertien kolommen, niet de 22 van de
   calculatietabel; met auto-layout past ze binnen de leesbreedte (H1). */
.vca-motortabel { table-layout: auto; min-width: 0; }
.vca-motortabel th:first-child, .vca-motortabel td:first-child { width: 84px; }
.vca-motortabel tr.vca-modtotaal th { font-weight: 600; }

/* Een module: een kader met de kop als lijstvakkop (ONTWERP §4) — één regel
   van 36 px, titel 13 px links, teller en calculatieprijs rechts. Ze was een
   gevuld donker of gekleurd vlak met een titel van 18 px; met vier gekleurde
   banden per scherm ook luidruchtig. De modulekleur blijft als vlekje in de
   kiezer en als lijn links (R32). */
.vca-modulesbalk { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 20px 0; }
.vca-modulesbalk h2, section[data-vca-tabpaneel] > h2 { margin: 0 0 6px; font-size: 21px; }
.vca-modulesbalk p { margin: 0; color: var(--zacht); font-size: 14px; }
/* O1: de smalle regel met prijsrakende instellingen bovenaan de tab Modules (alleen tonen). */
.vca-prijsregel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 12px 0 0; padding: 7px 12px; background: var(--vlak-2); border-radius: var(--straal); color: var(--zacht); font-size: 12.25px; }
.vca-prijsregel > span { white-space: nowrap; }
.vca-prijsregel > a { margin-left: auto; white-space: nowrap; }
.vca-module { min-width: 0; max-width: 100%; border: 1px solid var(--lijn); border-radius: var(--straal-groot); margin: 0 0 22px; background: var(--vlak); overflow: visible; }
.vca-module[data-vca-modkleur] { border-left: 3px solid var(--vca-modkleur); }
.vca-module > .vca-modsamenvatting { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 0; border-bottom: 1px solid var(--lijn); background: var(--vlak); cursor: pointer; }
.vca-module > .vca-modsamenvatting .vca-modtitel { min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.vca-module > .vca-modsamenvatting .vca-modtitel b { font-weight: 600; }
.vca-module > .vca-modsamenvatting .vca-modonder { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--zacht); font-size: 12.25px; font-weight: 400; }
.vca-module > .vca-modsamenvatting .vca-sleepgreep { min-width: 28px; min-height: 28px; color: var(--zacht); }
.vca-module > .vca-modsamenvatting .vca-sleepgreep:hover { color: var(--inkt); }
.vca-moduleinhoud { min-width: 0; padding: 20px; border-top: 1px solid var(--lijn); }
.vca-moduleinhoud .wc-schuif { max-width: 100%; overflow: auto; }
.vca-modkop { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; }
.vca-modnr { font-size: 14px; white-space: nowrap; }
/* De modulenaam (bewerken: keuzelijst + naamvak, lezen: de naam) links, met
   nummer ervoor en de handelingen rechts. */
.vca-modmidden { flex: 1 1 200px; display: flex; justify-content: flex-start; align-items: center; gap: 16px; flex-wrap: wrap; text-align: left; min-width: 0; }
.vca-modmidden label { display: grid; gap: 5px; font-size: 12.25px; color: var(--zacht); }
.vca-modmidden input, .vca-modmidden select { min-height: 38px; }
.vca-modknoppen { margin-left: auto; display: flex; gap: 4px; }
.vca-modvoet { margin: 8px 0 0; display: grid; gap: 4px; font-size: 12.25px; }
.vca-moduleprijs { display: flex; justify-content: flex-end; gap: 22px; padding: 18px 4px; font-size: 14px; }
.vca-moduleacties { position: relative; font-size: 12.25px; }
.vca-moduleacties > summary { cursor: pointer; padding: 8px; }
.vca-moduleacties > div { display: flex; gap: 6px; padding: 8px; }
.vca-item { max-width: 320px; }
.vca-modnaam { max-width: 240px; }
.vca-optioneelkop { margin: 22px 0 8px; font-size: 14px; color: var(--zacht); }
.vca-moduleleeg { display: grid; gap: 3px; padding: 18px; margin: 0 0 14px; border: 1px dashed var(--lijn); border-radius: var(--straal-groot); color: var(--zacht); }
.vca-moduleleeg b { color: var(--inkt); }
/* De smalle "+ Module hier"-regel: onopvallend tot je erover wijst, geen eigen
   kader zoals de modules zelf. */
.vca-modulehier { display: flex; justify-content: center; margin: -6px 0 14px; }
.vca-modulehier .vca-knop { border: 1px dashed var(--lijn); background: transparent; color: var(--zacht); font-size: 10.5px; padding: 3px 12px; opacity: .55; }
.vca-modulehier .vca-knop:hover { opacity: 1; color: var(--inkt); border-color: var(--geel); border-style: solid; }
.vca-onderaan { margin: 18px 0 0; display: grid; gap: 10px; }

/* Typen om een SAM of een module-indeling te vinden; de trefferlijst hangt
   onder het veld. */
.vca-samtype { position: relative; max-width: 420px; margin: 10px 0; }
.vca-samtype label { display: grid; gap: 3px; font-size: 12.25px; color: var(--zacht); }
.vca-samtypelijst {
  position: absolute; z-index: 25; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 6px; list-style: none;
  border: 1px solid var(--lijn); border-radius: var(--straal-groot); background: var(--vlak); box-shadow: var(--schaduw);
  max-height: 350px; overflow: auto;
}
.vca-samtypelijst li { padding: 11px 12px; border-bottom: 1px solid var(--lijn); border-radius: var(--straal); cursor: pointer; font-size: 14px; line-height: 1.5; }
.vca-samtypelijst li small { display: block; color: var(--zacht); }
.vca-samtypelijst li.vca-actief, .vca-samtypelijst li:hover { background: var(--vlak-2); }
.vca-samtypelijst li.vca-samtypeleeg, .vca-samtypelijst li.vca-samtypeleeg:hover, .vca-samtypelijst li[aria-disabled="true"] { cursor: default; color: var(--zacht); background: none; }
.vca-samtypelijst li .vca-samminiatuur { float: left; margin-right: 8px; }
/* Het zoekvak onder de tabel, en het brede vak boven de modules. */
.vca-samtoevoegen { margin: 20px 0 14px; padding: 16px; border-radius: var(--straal-groot); background: var(--vlak-2); }
.vca-samtoevoegen .vca-samvoetcel { position: relative; display: flex; align-items: end; gap: 12px; }
.vca-samtoevoegen label { display: grid; gap: 7px; flex: 1; font-size: 14px; font-weight: 600; }
.vca-samtoevoegen input { width: 100%; min-width: 0; padding: 11px 12px; min-height: 0; }
.vca-samvoetcel { position: relative; display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.vca-samvoetcel label { display: grid; gap: 3px; font-size: 12.25px; color: var(--zacht); flex: 1 1 260px; min-width: 200px; }
.vca-samvoetknop { border: 1px solid var(--lijn); border-radius: var(--straal); padding: 6px 10px; font-size: 12.25px; background: transparent; color: var(--zacht); cursor: pointer; }
.vca-samvoetknop:hover { color: var(--inkt); border-color: var(--zacht); }
.vca-samvoetcel .vca-samtypelijst { left: 0; right: auto; width: min(420px, 100%); }
.vca-vorzoek { position: relative; display: block; min-width: 260px; }
.vca-vorzoek .vca-item { max-width: none; width: 100%; border: 1px solid var(--lijn); border-radius: var(--straal); padding: 6px 9px; background: var(--vlak); }
.vca-vorzoek .vca-item:focus { border-color: var(--geel); outline: none; }
.vca-vorzoek .vca-item[aria-invalid="true"] { border-color: var(--rood); }
.vca-vorzoek .vca-item[aria-invalid="true"]:focus { outline: 2px solid var(--rood); outline-offset: 1px; }
.vca-vorzoek .vca-samtypelijst { left: 0; right: auto; width: max(100%, 380px); text-align: left; }

/* Slepen moet merkbaar zijn: wat je optilt iets doorzichtig met een amber
   rand, en de landingsplek duidelijker dan een dunne streep — samen genoeg om
   te zien wát je verplaatst en wáár het landt, ook als de module dicht was. */
.vca-sleepgreep { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--zacht); cursor: grab; border-radius: var(--straal-groot); }
.vca-sleepgreep:hover, .vca-sleepgreep:focus-visible { color: var(--inkt); background: var(--vlak); }
.vca-sleepgreep:active { cursor: grabbing; }
.vca-samtabel tr.vca-sleepdoel-boven { box-shadow: inset 0 2px 0 var(--inkt); }
.vca-samtabel tr.vca-sleepdoel-onder { box-shadow: inset 0 -2px 0 var(--inkt); }
.vca-modblok-sleepdoel-boven { box-shadow: 0 -2px 0 var(--inkt); }
.vca-modblok-sleepdoel-onder { box-shadow: 0 2px 0 var(--inkt); }
.vca-module.vca-slepend { opacity: .55; outline: 2px dashed var(--amber); outline-offset: 2px; }
.vca-samtabel tr.vca-slepend { opacity: .55; outline: 2px dashed var(--amber); outline-offset: -2px; }
.vca-landingsplek { background: var(--amber-zacht) !important; }
.vca-landingsregel { pointer-events: none; margin: 4px 0; padding: 5px 10px; border-radius: var(--straal); background: var(--amber-zacht); border: 1px dashed var(--amber); color: var(--inkt); font-size: 12.25px; }
.vca-sleepmelding { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: var(--balk); color: var(--balk-tekst); padding: 8px 16px; border-radius: 999px; font-size: 14px; box-shadow: var(--schaduw); }

/* Het kleurpalet per regel en per module: acht vakjes plus "geen". In de
   regeltabel staat alleen het gekozen vakje — negen vakjes in elke regel
   maakt de tabel juist onrustiger; de andere acht komen bij wijzen of Tab. */
.vca-kleurkiezer { display: inline-flex; gap: 3px; align-items: center; vertical-align: middle; }
.vca-kleuroptie { display: inline-flex; cursor: pointer; }
.vca-kleuroptie input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vca-kleurvak { display: inline-block; width: 15px; height: 15px; border-radius: var(--straal); background: var(--vca-kleurvak, transparent); border: 1px solid var(--lijn); }
.vca-kleuroptie:has(input[value=""]) .vca-kleurvak { background: repeating-linear-gradient(45deg, var(--vlak), var(--vlak) 3px, var(--lijn) 3px, var(--lijn) 5px); }
.vca-kleuroptie-actief .vca-kleurvak { outline: 2px solid var(--inkt); outline-offset: 1px; } .vca-kleuroptie input:focus-visible + .vca-kleurvak { outline: 2px solid var(--focus); outline-offset: 1px; }   /* R53: aanstaand is inkt, de ring is de ene ring; geen van beide geel. */
.vca-kleurvak-lees { margin-right: 5px; }
.vca-modkleurnaam { font-style: italic; }
.vca-samtabel .vca-kleuroptie:not(.vca-kleuroptie-actief) { display: none; }
.vca-samtabel .vca-kleurkiezer:hover .vca-kleuroptie,
.vca-samtabel .vca-kleurkiezer:focus-within .vca-kleuroptie { display: inline-flex; }

/* De CAS-vierdeling onder de modules, en het SAM-keuzevenster. */
.vca-vierdeling { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 24px; padding: 6px 0 10px; }
.vca-vierdeling h4 { margin: 0 0 6px; font-size: 12.25px; font-weight: 600; color: var(--inkt); }
.vca-vierdeling ul { list-style: none; margin: 0; padding: 0; font-size: 12.25px; }
.vca-vierdeling li { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; border-bottom: 1px solid var(--lijn); }
.vca-vierdeling li.vca-sterk { font-weight: 600; }
.vca-samvenster { width: min(760px, calc(100vw - 32px)); max-width: 760px; padding: 0; border: 1px solid var(--lijn); border-radius: var(--straal-groot); background: var(--vlak); color: var(--inkt); box-shadow: var(--schaduw); }
.vca-samvenster::backdrop { background: rgba(29, 29, 29, .45); }
.vca-samvensterkop, .vca-samvenstervoet { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.vca-samvensterkop { border-bottom: 1px solid var(--lijn); }
.vca-samvenstervoet { border-top: 1px solid var(--lijn); font-size: 12.25px; }
.vca-samzoeken { display: grid; gap: 4px; padding: 12px 14px 8px; font-size: 12.25px; color: var(--zacht); }
.vca-samkeuzes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px 12px; max-height: min(55vh, 520px); overflow: auto; padding: 4px 14px 12px; }
.vca-samoptie { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: start; gap: 8px; padding: 7px 4px; border-bottom: 1px solid var(--lijn); font-size: 12.25px; cursor: pointer; }
.vca-samoptie small { display: block; margin-top: 2px; color: var(--zacht); }
.vca-samminiatuur { width: 40px; height: 40px; object-fit: cover; border-radius: var(--straal); border: 1px solid var(--lijn); }
.vca-samvenster > [data-vca-samleeg] { padding: 0 14px 12px; }
/* "A"-kolom (aangepaste uitvoering) per regel: compact dicht, met vinkje en
   reden in een popover open. */
.vca-afwkolom { white-space: normal; }
.vca-afwreden { display: inline-block; vertical-align: top; }
.vca-afwreden summary { cursor: pointer; list-style: none; }
.vca-afwreden summary::-webkit-details-marker { display: none; }
.vca-afwreden[open] { display: block; min-width: 220px; padding: 8px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--straal-groot); }
.vca-afwreden[open] label { font-size: 12.25px; }

/* De vaste voet met de zeven CAS-getallen. Licht en stil, geen zwarte balk, en
   sinds 14-09 in de maat van `.wk-totalen` (§18): 11 px kapitalen als label en
   13 px tabellair als waarde. Ze stonden op 18 px en waren daarmee het grootste
   type van de calculatiepagina — groter dan de kaarttitel. Eén balk, één maat. */
.vca-balk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 12px; align-items: center; background: var(--vlak); color: var(--inkt); border-top: 1px solid var(--lijn); box-shadow: var(--schaduw-op); padding: 12px 20px; }
.vca-vakken { display: flex; gap: 18px; flex-wrap: wrap; flex: 1; justify-content: space-between; max-width: 1180px; }
.vca-vak { display: grid; line-height: 1.15; }
.vca-vak small { color: var(--zacht); font-size: 12.25px; font-weight: 600; }
.vca-vak b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vca-klep { font-size: 10.5px; color: var(--zacht); text-decoration: underline; white-space: nowrap; }

/* De rekenmotor en de vergelijking: twee tabellen die niet de calculatie zelf
   zijn. De tabel-bouwsteen doet het werk; dit is wat er nog bij hoort. */
.vcm-tabel th, .vcm-tabel td { vertical-align: top; }
.vcm-sterk th, .vcm-sterk td { font-weight: 600; border-top: 2px solid var(--lijn); }
.vcm-bron { color: var(--zacht); font-size: 10.5px; }
.vcm-velden, .vcv-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin: 12px 0; }
.vcv-velden { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.vcm-velden label, .vcv-veld { display: grid; gap: 4px; min-width: 0; }
.vcv-veld i { font-style: normal; color: var(--zacht); }
.vcv-buiten { color: var(--rood); font-weight: 600; }
.vcv-binnen { color: var(--groen); }
.vcv-leeg { color: var(--zacht); }
.vcv-kop { display: flex; gap: 16px; align-items: baseline; margin: 24px 0 8px; }
.vcv-kop h3 { font-size: 14px; margin: 0; }

/* De beoordeling: de stappenstrip links, de vraag met zijn keuzes daaronder. */
.vcb { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
.vcb > .wk-paneel { min-width: 0; }
.vcb-strip { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 16px; }
.vcb-strip button { display: flex; align-items: center; gap: 6px; height: auto; padding: 6px 10px; text-align: left; }
.vcb-strip li[aria-current="step"] button { background: var(--vlak-2); border-color: var(--inkt); color: var(--inkt); font-weight: 600; }   /* "je bent hier" is inkt, niet geel (§5, 14-09) */
.vcb-vraag { display: flex; align-items: center; gap: 8px; font-size: 17.5px; font-weight: 600; margin: 0 0 12px; }
.vcb-keuzes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; margin: 0 0 14px; }
.vcb-keuze { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px; border: 1px solid var(--lijn); border-radius: var(--straal); cursor: pointer; }
.vcb-keuze:has(input:checked) { border-color: var(--inkt); box-shadow: inset 0 0 0 1px var(--inkt); }
.vcb-keuzewoord { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.vcb-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; margin: 14px 0; }
.vcb-veld { display: grid; gap: 5px; min-width: 0; }
.vcb-veld > span { display: flex; align-items: center; gap: 6px; }
.vcb-ladder input { max-width: 84px; }
.vcb-ladder td { white-space: nowrap; text-align: right; }
.vcb-sterk th, .vcb-sterk td { font-weight: 600; }
.vcb-uit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 17.5px; font-weight: 600; }
.vcb-inst { font-size: 12.25px; font-weight: 400; }
.vcb-eenheid { display: block; }
.vcb-bron { color: var(--zacht); font-size: 14px; margin: 0 0 10px; }
.vcb-fout { color: var(--rood); font-weight: 600; }
.vcb-goed { color: var(--groen); font-weight: 600; }
@media (max-width: 1024px) { .vca-instellingen { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .vcb { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .vcb-strip button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* Wat op de calculatiekaart pas later is bijgebouwd: de termijnen, de regels
   zonder SAM en de extra voetregel. Het voorvoegsel `body ` stond hier alleen
   om het stijlblok van de kaart te verslaan; dat blok bestaat niet meer. */
.vca-balkruimte { height: 96px; }
.vca-modvor { font-variant-numeric: tabular-nums; }
.vca-kleppen { display: grid; gap: 4px; padding-right: 14px; border-right: 1px solid var(--lijn); }
.vca-termijnen { margin-top: 14px; }
.vca-termijnlijst { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.vca-termijn { display: flex; align-items: center; gap: 6px; font-size: 12.25px; }
.vca-termijn input[type="text"] { flex: 1; min-width: 0; }
.vca-termijn .vca-termijnpct { width: 62px; flex: none; text-align: right; }
.vca-termijntotaal { margin: 6px 0 0; font-size: 12.25px; font-weight: 600; text-align: right; }
.vca-modknoppen .vca-knop { border: 0; background: transparent; padding: 4px; }

/* B1-1b: de regels zonder SAM (stelpost, leveranciersofferte, uitbesteding),
   de rode stand per regel en de extra regel onder de zeven voetgetallen. */
.vca-soortmerk { display: inline-flex; vertical-align: middle; margin-left: 4px; color: var(--zacht); }
.vca-soortmerk .ico { width: 14px; height: 14px; }
.vca-samtabel .wk-stand { display: inline-flex; vertical-align: middle; margin-left: 3px; }
.vca-samtabel .wk-stand .ico { width: 14px; height: 14px; }
.vca-bijzonderrij td { background: var(--grond); }
.vca-bijzondervelden { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; padding: 2px 0; }
.vca-bijzondervelden .vca-veld { margin: 0; }
.vca-levkeuze { max-width: 260px; }
/* C9 en C10: de twee ingeklapte vakken boven de modules. */
.vca-inklapvak { margin: 12px 0 0; padding: 0 12px 7px; background: var(--vlak); border-radius: var(--straal-groot); box-shadow: var(--schaduw); }
/* De extra regel is een tweede rij in de balk: zonder wikkeling duwt hij de
   zeven vakken op een kolom en wordt de voet 400 px hoog. */
.vca-balk { flex-wrap: wrap; }
.vca-voetextra { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 4px; font-size: 12.25px; color: var(--zacht); }
.vca-voetextra .vca-voetrood { color: var(--rood); font-weight: 600; }
/* De balk wordt een regel hoger; de ruimte eronder schuift mee. */
.vca-balkruimte { height: 122px; }
@media (min-width: 721px) { .wk-metzij .vca-balk { left: 188px; } } /* De vaste prijsvoet mag de menuvoet niet bedekken. */
@media (max-width: 720px) {
  /* Een vaste voet zou op een telefoon de invoervelden bedekken. */
  .vca-moduleinhoud { padding: 12px; }
  .vca-previewstatus { width: 100%; margin-left: 0; }
  .vca-modknoppen { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .vca-samtoevoegen .vca-samvoetcel { flex-wrap: wrap; }
  .vca-samtoevoegen label { flex-basis: 100%; }
  .wk-log > div { grid-template-columns: minmax(0, 1fr); }
  .vca-balk { position: relative; flex-wrap: wrap; padding: 8px; }
  .vca-balkruimte { height: 0; }
  .vca-kleppen { grid-auto-flow: column; padding: 0; border: 0; }
  .vca-vakken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex-basis: 100%; gap: 10px; }
  .vca-vak, .vca-vorzoek { min-width: 0; }   /* de waarde is nu overal 13 px, dus geen eigen maat meer op de telefoon */
  .vca-slotbalk { flex-wrap: wrap; }
  .vca-vorzoek .vca-samtypelijst { width: 100%; }
  .vca-instellingen, .vca-moduleinhoud, .vca-rij { min-width: 0; max-width: 100%; }
  .vca-modmidden label { max-width: 100%; }
  .vca-levkeuze { max-width: 100%; }
  html:has(.vca-balk), main:has(.vca-balk) { overflow-x: clip; }
}

/* Verkoopcontrole op een telefoon: de elf kolommen van de controlelijst zijn
   daar niet te lezen, dus komt er een regel per record in de plaats. Alleen dit
   scherm heeft die tweede vorm; de tabel zelf blijft de bouwsteen. */
.wv-mobielelijst { display: none; }
@media (max-width: 680px) {
  .wv-verkoopcontrole { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
  .wv-verkoopcontrole > .nw-leeg { order: 2; }
  .wv-verkoopcontrole > .wk-tabelvak { display: none; }
  .wv-mobielelijst {
    display: block; order: 2; min-width: 0; margin: 0; padding: 0; list-style: none;
    border-top: 1px solid var(--lijn);
  }
  .wv-verkooprecord { min-width: 0; padding: 11px 0 13px; border-bottom: 1px solid var(--lijn); }
  .wv-recordkop { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 8px; }
  .wv-recordkop a { display: flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--inkt); overflow-wrap: anywhere; }
  .wv-recordkop > span { font-size: 12.25px; color: var(--zacht); overflow-wrap: anywhere; }
  .wv-recordvelden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 10px 8px; }
  .wv-recordvelden div { min-width: 0; }
  .wv-recordvelden dt, .wv-recordaandacht > span, .wv-recordactie > span { display: block; font-size: 10.5px; color: var(--zacht); }
  .wv-recordvelden dd { margin: 2px 0 0; font-size: 12.25px; overflow-wrap: anywhere; }
  .wv-recordbedrag { font-weight: 600; color: var(--inkt); }
  .wv-recordaandacht { min-width: 0; margin: 0 8px 9px; }
  .wv-recordaandacht > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
  .wv-recordactie { min-width: 0; margin: 0 8px; }
  .wv-recordactie a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-weight: 600; overflow-wrap: anywhere; }
}

@media (max-width: 680px) { .wk-filterlade .wk-vak, .wk-filterlade select.wk-vak { width: 100%; max-width: 100%; min-width: 0; } }

/* --- de projectkaart en zijn acht tabbladen -------------------------------
   Overgebracht uit delen/projecten.ts (D3b-1). Drie blokken zijn onderweg
   gesneuveld omdat geen scherm ze meer tekent: de kopkaart van Opstarten
   (.wpo-kop en wat eraan hing), de kopkaart van de doorloop (.wpd-kop, en de
   vijf standkleuren .wpd-gereed/-aandacht/-bezig/-niet_apart_gemeten/
   -onbekend, waaronder een amberarcering) en drie regelblokken in de
   projectkaart die al zonder selector in het bestand stonden — losse
   declaraties met een sluitaccolade, dus CSS die nooit iets deed. */

/* De projectkaart zelf. */
.wpj-waarde { margin: 2px 0 0; max-width: 30ch; overflow-wrap: anywhere; font-size: 14px; line-height: 1.35; font-weight: 600; }
.wpj-sectie h2 { margin-bottom: 8px; }
.wpj-regel { display: flex; justify-content: space-between; gap: 14px; margin: 4px 0; font-size: 14px; }
.wpj-r-wat { color: var(--zacht); }
.wpj-r-waarde { font-weight: 600; white-space: nowrap; }
.wpj-door { margin: 10px 0 0; font-size: 14px; }
.wpj-rustig { font-size: 14px; color: var(--zacht); margin: 4px 0; }
.wpj-let { font-size: 14px; font-weight: 600; border: 1px solid var(--lijn); border-left: 4px solid var(--rood); border-radius: var(--straal-groot); padding: 10px 14px; margin: 0 0 12px; background: var(--vlak); }
@media (max-width: 900px) { .wpj-waarde { display: inline; max-width: none; margin-top: 0; font-size: 12.25px; line-height: 1.3; } }
@media print { .wpj-door { display: none; } }
/* Projectdashboard op de tab Financieel: de standen onder de kerngetallen, en de restregel stiller dan de VOR's. */
.wpd-standen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 4px 0 14px; font-size: 14px; color: var(--zacht); }
.wpd-rest td { color: var(--zacht); }

/* De uitklappers in het dossier: dezelfde kaartvorm, met de samenvatting als
   aanklikbare kop en een +/− in plaats van het driehoekje van de browser. */
/* Elf schermeigen kaarten met acht vullingen en vijf marges, allemaal hetzelfde vlak als `.wk-paneel` (§14). Eén vorm — dit was in één blok de "meerdere designers". 14-09. */
.nw-uitklap, .wk-kick-binnen, .wk-kick-bekend, .nw-gt-voorvul, .nw-op-ronde, .nw-op-vorm, .wk-com-kaart,
.wp-plan-bulk, .wp-plan-tabelwrap, .wk-ri-lijst, .wk-ri-paneel, .wkd-gate0-lijst, .wpd-stroom {
  background: var(--vlak); border: 0; border-radius: var(--straal-groot); box-shadow: var(--schaduw); margin: 0 0 var(--r3);
}
.nw-gt-voorvul, .nw-op-ronde, .nw-op-vorm, .wk-com-kaart, .wk-ri-paneel, .wpd-stroom { padding: var(--r3) var(--r4); }
.nw-uitklap > summary { cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 13px 18px; font-size: 14px; list-style: none; }
.nw-uitklap > summary::-webkit-details-marker { display: none; }
.nw-uitklap > summary::before { content: '+'; color: var(--zacht); font-weight: 600; width: 12px; flex: 0 0 auto; }
.nw-uitklap[open] > summary::before { content: '−'; }
.nw-uitklap > summary .nw-uk-wat { font-weight: 600; }
.nw-uitklap > summary .nw-uk-hint { margin-left: auto; color: var(--zacht); font-size: 12.25px; font-variant-numeric: tabular-nums; text-align: right; }
.nw-uk-binnen { padding: 4px 18px 14px; border-top: 1px solid var(--lijn); }
.nw-uk-uitleg { color: var(--zacht); font-size: 14px; line-height: 1.55; margin: 10px 2px; }
/* De begripsregel boven een lijst: de kop draagt het getal, de zin erachter
   zegt wat het getal betekent. Dít is de plek waar "artikelen tekort" en "nog
   te bestellen" uit elkaar gehouden worden. */
.nw-uk-begrip { font-size: 14px; line-height: 1.55; margin: 14px 2px 6px; color: var(--zacht); }
.nw-uk-begrip b { color: var(--inkt); font-weight: 600; }
/* De notities. Het tekstvak is een blok op zichzelf en de knop staat eronder:
   naast elkaar werd het vak op een telefoon een streepje breed. */
.nw-notitievorm { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin: 14px 0 0; }
.nw-notitievorm textarea { width: 100%; background: var(--grond); }
/* Regeleindes van de schrijver blijven staan: wie drie punten onder elkaar
   zet, krijgt drie punten onder elkaar terug. pre-line en niet pre, zodat een
   lange zin gewoon afbreekt op de schermbreedte. */
.nw-notities .nw-nt-tekst { white-space: pre-line; }
.nw-notities .nw-nt-ouder { margin: 12px 0 0; }

/* De HTV-VOR-indeling en de meerwerk-triage. Zelfde bouw, met opzet: het is
   dezelfde handeling op een ander onderwerp. */
.nw-vorindeling .nw-vi-uitleg, .nw-meerwerk .nw-mw-uitleg { color: var(--zacht); font-size: 12.25px; line-height: 1.55; margin: 0 0 12px; }
.nw-vorindeling .nw-vi-stap { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--lijn); font-size: 14px; }
.nw-vorindeling .nw-vi-stap:last-of-type { border-bottom: 0; }
.nw-vorindeling .nw-vi-wat { flex: 0 0 120px; font-weight: 600; }
.nw-vorindeling .nw-vi-zin { flex: 1 1 220px; min-width: 0; }
.nw-vorindeling .nw-vi-nog .nw-vi-zin { color: var(--zacht); }
/* De stille regel na het vastzetten: rustig, want vastgezet is de gewenste
   toestand. Pas de amberregel eronder is een signaal. */
.nw-vorindeling .nw-vi-slot { border: 1px solid var(--lijn); border-left: 3px solid var(--groen); border-radius: var(--straal-groot); padding: 9px 12px; margin: 12px 0 0; font-size: 14px; line-height: 1.55; }
.nw-vorindeling .nw-vi-afwijking { border: 1px solid var(--lijn); border-left: 3px solid var(--amber); border-radius: var(--straal-groot); padding: 9px 12px; margin: 10px 0 0; font-size: 14px; line-height: 1.55; }
.nw-vorindeling .nw-vi-vorm, .nw-meerwerk .nw-mw-vorm { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.nw-vorindeling .nw-vi-vorm input[type="text"], .nw-meerwerk .nw-mw-vorm input[type="text"] { flex: 1; min-width: 170px; background: var(--grond); }
.nw-meerwerk .nw-mw-order { border-top: 1px solid var(--lijn); padding: 6px 0 12px; }
.nw-meerwerk .nw-mw-antwoord { display: grid; gap: 3px; margin: 8px 0 0 12px; padding: 8px 0 8px 12px; border-left: 3px solid var(--lijn); font-size: 14px; line-height: 1.5; }
/* Rood zolang het antwoord ontbreekt — de wens van Moreno bij de
   factuurafspraak, hier voor alle drie. Een leeg vlak leest als "hier hoort
   niets", en dat is precies wat triage niet mag denken. */
.nw-meerwerk .nw-mw-open { border-left-color: var(--rood); }
.nw-meerwerk .nw-mw-antwoord b { font-weight: 600; }
.nw-meerwerk .nw-mw-tekst { white-space: pre-line; }
.nw-meerwerk .nw-mw-leeg { color: var(--rood); }
@media (max-width: 640px) {
  .nw-vorindeling .nw-vi-vorm, .nw-meerwerk .nw-mw-vorm { flex-direction: column; }
  .nw-vorindeling .nw-vi-wat { flex: 1 1 100%; }
}

/* Opstarten en de doorloop: wat ervan over is, is de stroomstrip en de lijst
   met stromen per project. */
.wpo-stroom { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; list-style: none; padding: 11px 0 0; margin: 10px 0 0; border-top: 1px solid var(--lijn); font-size: 12.25px; }
.wpo-stroomstap, .wpo-pijl { color: var(--zacht); }
.wpo-stroomstap.wpo-af { color: var(--groen); }
.wpo-stroomstap.wpo-nu { color: var(--inkt); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.wpd-uitleg { margin: 4px 0 0; font-size: 14px; color: var(--zacht); }
.wpd-groep { margin: 16px 0 6px; font-size: 12.25px; color: var(--zacht); }
.wpd-stromen { display: grid; gap: 8px; }
.wpd-stroom { display: grid; grid-template-columns: minmax(170px, .8fr) minmax(180px, .8fr) minmax(280px, 2fr); gap: 12px; align-items: start; }
.wpd-stroomnaam { font-weight: 600; }
.wpd-stand { display: inline-block; width: fit-content; border-radius: 999px; padding: 2px 8px; font-size: 10.5px; font-weight: 600; background: var(--grond); }
.wpd-bewijs { font-size: 12.25px; color: var(--zacht); }
.wpd-actie { display: block; margin-top: 3px; color: var(--inkt); }
@media (max-width: 800px) { .wpd-stroom { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* De VOR-matrix: alleen het bronconflict-blok; de matrix zelf komt uit de
   tabel-bouwsteen. */
.wpm-conflict { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--lijn); border-left: 4px solid var(--amber); border-radius: var(--straal-groot); margin: 0 0 8px; }
.wpm-conflict b { font-size: 14px; }
.wpm-conflict p { margin: 0; font-size: 12.25px; color: var(--zacht); }
.wpm-conflict p b, .wpm-conflict .wpm-eigenaar { font-size: 12.25px; color: var(--inkt); }

/* De kick-off als vergaderscherm (B5-1): één stap in beeld, op een beamer
   leesbaar. De stappenstrip is de gewone tabrij; hier alleen de kaart eronder. */
.wk-kick-kop { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 14px; }
.wk-kick-gelezen { margin: 0; font-size: 14px; white-space: pre-wrap; }
.wk-kick-bladeren { display: flex; justify-content: space-between; margin: 16px 0 0; font-size: 14px; }
.wk-kick-bekend > summary, .wk-kick-oud > summary, .wk-kick-punt > summary { cursor: pointer; padding: 9px 12px 0 0; font-size: 14px; font-weight: 600; }
.wk-kick-bekend > .nw-gt-voorvul { border: 0; border-top: 1px solid var(--lijn); border-radius: 0; margin: 0; }
.wk-kick-binnen { padding: var(--r4); }
.wk-kick-veld { margin: 0 0 10px; }
.wk-kick-veld label { display: block; font-size: 12.25px; font-weight: 600; margin: 0 0 4px; }
.wk-kick-meta { font-size: 10.5px; color: var(--zacht); margin: 2px 0 0; }
.wk-kick-punten, .wk-kick-docs { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12.25px; }
.wk-kick-punten li { padding: 4px 0; border-top: 1px solid var(--lijn); }
.wk-kick-docs li { padding: 2px 0; }
/* Het voorvulblok van een gate: wat we al weten, met de bron erbij. */
.nw-gt-voorvul h4 { margin: 0 0 4px; font-size: 14px; }
.nw-gt-bron { color: var(--zacht); font-size: 12.25px; }

/* De meerwerkmeldingen. */
.mwm-blok { margin-top: 14px; }
.mwm-kop { display: flex; align-items: center; gap: 7px; }
.mwm-lijst { border-top: 1px solid var(--lijn); margin-top: 10px; }
.mwm-rij { padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.mwm-regel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.mwm-titel { font-weight: 600; }
.mwm-meta { color: var(--zacht); font-size: 12.25px; margin: 4px 0 0; }
.mwm-vorm { display: grid; gap: 8px; margin-top: 9px; }
.mwm-veld { display: grid; gap: 3px; color: var(--zacht); font-size: 12.25px; }
.mwm-statusvelden { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(170px, 1fr); gap: 8px; }
.mwm-nieuw, .mwm-status { margin-top: 10px; }
.mwm-nieuw summary, .mwm-status summary { cursor: pointer; font-weight: 600; }
@media (max-width: 700px) { .mwm-statusvelden { grid-template-columns: minmax(0, 1fr); } }

/* De offertepunten: één punt per regel met zijn afmeldformulier. */
.nw-punten { list-style: none; margin: 0; padding: 0; }
.nw-punt { padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.nw-punt:last-child { border-bottom: 0; padding-bottom: 2px; }
.nw-punt:first-child { padding-top: 2px; }
.nw-punt-kop { font-size: 14px; font-weight: 600; margin: 0 0 3px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.nw-punt-tekst { margin: 0 0 4px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.nw-punt-klein { font-size: 12.25px; color: var(--zacht); margin: 0 0 4px; line-height: 1.5; }
/* De afmeldknop staat op één regel met zijn opmerkingveld, en breekt op een
   telefoon netjes af in plaats van het veld tot 40 px te knijpen. */
.nw-punt-vorm { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 6px 0 0; }
.nw-punt-vorm input[type="text"] { flex: 1 1 220px; min-width: 0; background: var(--grond); }

/* De oplevering, op de telefoon van de monteur: alles met een duim te
   bedienen, dus knoppen en velden van minstens 44 px en invoer op 18 px —
   onder 16 px zoomt iOS bij het aantikken vanzelf in. */
.nw-op-wie { color: var(--zacht); font-size: 12.25px; }
.nw-op-kop { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.nw-op-titel { font-weight: 600; font-size: 14px; }
.nw-op-vorm h3 { margin: 0 0 8px; font-size: 14px; }
.nw-op-label { display: block; font-size: 12.25px; color: var(--zacht); margin: 10px 0 4px; }
.nw-op-veld { width: 100%; max-width: none; font-size: 17.5px; padding: 11px 12px; min-height: 44px; border: 1px solid var(--lijn); border-radius: var(--straal-groot); background: var(--vlak); color: inherit; box-sizing: border-box; }
.nw-op-knop { min-height: 44px; height: auto; padding: 11px 18px; margin-top: 12px; }
.nw-op-keuze { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.nw-op-keuze label { display: flex; align-items: center; gap: 7px; font-size: 14px; min-height: 44px; }
.nw-op-over { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; border-top: 1px solid var(--lijn); padding: 10px 0; }
.nw-op-over form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nw-op-doek { width: 100%; max-width: 520px; height: 180px; border: 1px dashed var(--lijn); border-radius: var(--straal-groot); background: var(--vlak); touch-action: none; display: block; }
.nw-op-doekvoet { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.nw-op-handtekening { max-width: 320px; border: 1px solid var(--lijn); border-radius: var(--straal-groot); background: var(--vlak); display: block; }
.nw-op-status { display: block; margin-top: 10px; font-size: 14px; color: var(--zacht); }

/* Commissioning: één kaart per punt, met de herkomst erbij. */
.wk-com-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 4px; }
.wk-com-tekst { font-weight: 600; font-size: 14px; }
.wk-com-herkomst { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--lijn); color: var(--zacht); }
.wk-com-toelichting { font-size: 12.25px; color: var(--zacht); margin: 0 0 8px; }
.wk-com-stand { font-size: 12.25px; margin: 0 0 8px; }
.wk-com-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin: 0 0 6px; }
.wk-com-veld label { display: block; font-size: 10.5px; font-weight: 600; margin: 0 0 2px; }
.wk-com-afw { display: flex; align-items: center; gap: 6px; font-size: 12.25px; }
.wk-com-afw label { margin: 0; }
.wk-com-let { color: var(--amber); }
.wk-com-knoppen { display: flex; gap: 8px; }

/* De scope-instellingen van een project. */
.wk-scope-lijst { list-style: none; margin: 0; padding: 0; }
.wk-scope-rij { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--lijn); }
.wk-scope-rij:first-child { border-top: 0; }
.wk-scope-label { flex: 1; font-size: 14px; }
.wk-scope-meta { font-size: 10.5px; color: var(--zacht); }
.wk-scope-voetnoot { font-size: 12.25px; color: var(--zacht); margin: 12px 0 0; }
.wk-scope-historie { margin: 16px 0 0; }
.wk-scope-tekst { font-weight: 600; font-size: 14px; margin: 0 0 4px; }
.wk-scope-kaart { margin: 0 0 12px; }

/* De planningsmatrix. Achttien kolommen per werkorder passen op geen enkel
   scherm, dus schuift deze tabel met opzet; daarom ook een eigen tabel en niet
   de bouwsteen. */
.wp-plan-uitleg { margin: 0 0 12px; color: var(--zacht); font-size: 14px; line-height: 1.45; }
.wp-plan-matrix { margin: 0 0 20px; }
.wp-plan-matrix h2, .wp-plan-stand h2 { margin-top: 0; }
.wp-plan-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.wp-plan-toolbarrechts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wp-plan-selecteer { display: inline-flex; align-items: center; gap: 6px; font-size: 12.25px; font-weight: 600; }
.wp-plan-bulk summary { cursor: pointer; font-weight: 600; font-size: 12.25px; }
.wp-plan-bulkvelden { display: grid; grid-template-columns: repeat(6, minmax(115px, 1fr)); gap: 8px; margin: 10px 0; min-width: min(900px, 80vw); }
.wp-plan-bulkvelden label { display: grid; gap: 3px; font-size: 10.5px; color: var(--zacht); }
.wp-plan-bulkacties { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.wp-plan-feedback { font-size: 12.25px; color: var(--zacht); }
.wp-plan-tabelwrap { overflow-x: auto; }
.wp-plan-tabel { width: 100%; min-width: 1740px; border-collapse: collapse; font-size: 12.25px; }
.wp-plan-tabel.wp-plan-smal { min-width: 760px; }   /* één fase met Locatie ernaast: geen 1.740 px voor zeven kolommen */
.wp-plan-tabel th, .wp-plan-tabel td { padding: 7px 6px; text-align: left; vertical-align: top; border-right: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.wp-plan-tabel th:last-child, .wp-plan-tabel td:last-child { border-right: 0; }
.wp-plan-tabel tbody tr:last-child td { border-bottom: 0; }
.wp-plan-tabel thead th { background: var(--grond); font-size: 10.5px; white-space: nowrap; }
.wp-plan-tabel thead tr:first-child th { font-size: 12.25px; }
.wp-plan-kies { width: 28px; text-align: center !important; }
.wp-plan-order { min-width: 180px; max-width: 230px; white-space: normal; }
.wp-plan-onbekend { display: block; color: var(--rood); font-weight: 600; margin-bottom: 2px; }
.wp-plan-meta { display: block; color: var(--zacht); font-size: 10.5px; white-space: normal; margin-top: 2px; }
.wp-plan-datum { min-width: 150px; }
.wp-plan-toewijzing { min-width: 155px; }
.wp-plan-gereed { width: 62px; text-align: center !important; }
.wp-plan-locatie { min-width: 82px; }
.wp-plan-tabel input[type="date"], .wp-plan-tabel input[type="text"], .wp-plan-tabel input[type="number"], .wp-plan-bulk input { width: 100%; max-width: none; min-height: 0; padding: 6px 7px; }
.wp-plan-minikeuze { display: flex; align-items: center; gap: 4px; margin: 5px 0; font-size: 10.5px; color: var(--zacht); white-space: nowrap; }
.wp-plan-plus { width: 100%; padding: 4px 7px; border: 1px solid var(--lijn); border-radius: var(--straal); background: var(--grond); color: var(--inkt); font-size: 10.5px; cursor: pointer; }
.wp-plan-check { width: 17px; height: 17px; margin-top: 7px; }
.wp-plan-visueel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 900px) { .wp-plan-bulkvelden { grid-template-columns: repeat(2, minmax(125px, 1fr)); min-width: 0; } }

/* De risicolijst. Zes kolommen per risico, elk risico een uitklapper met de
   maatregel en de historie erin; daarom een raster en geen tabel. */
.wk-ri-kopregel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.wk-ri-kopregel h2 { font-size: 14px; margin: 0; flex: 1; }
.wk-ri-lijst { overflow: hidden; }
.wk-ri-koppen, .wk-ri > summary { display: grid; grid-template-columns: minmax(180px, 2fr) 70px 110px minmax(110px, 1fr) 90px minmax(140px, 1fr); gap: 10px; align-items: center; padding: 7px 12px; font-size: 14px; }
.wk-ri-koppen { font-size: 12.25px; font-weight: 600; color: var(--zacht); background: var(--grond); border-bottom: 1px solid var(--lijn); }
.wk-ri-zondergeld .wk-ri-koppen, .wk-ri-zondergeld .wk-ri > summary { grid-template-columns: minmax(180px, 2fr) 70px minmax(110px, 1fr) 90px minmax(140px, 1fr); }
.wk-ri { border-top: 1px solid var(--lijn); }
.wk-ri:first-of-type { border-top: 0; }
.wk-ri > summary { cursor: pointer; list-style: none; }
.wk-ri > summary::-webkit-details-marker { display: none; }
.wk-ri > summary:hover { background: var(--rij); }
.wk-ri[open] > summary { background: var(--geel-zacht); }
.wk-ri-titel { font-weight: 600; }
.wk-ri-bron { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 600; color: var(--zacht); border: 1px solid var(--lijn); border-radius: 999px; padding: 0 6px; vertical-align: middle; }
.wk-ri-meta { font-size: 12.25px; color: var(--zacht); }
.wk-ri-gesloten > summary .wk-ri-titel { color: var(--zacht); text-decoration: line-through; }
.wk-ri-binnen { padding: 4px 12px 12px; border-top: 1px dashed var(--lijn); display: grid; grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr); gap: 12px 24px; }
.wk-ri-binnen p { margin: 6px 0; font-size: 14px; }
.wk-ri-binnen h3 { font-size: 12.25px; color: var(--zacht); margin: 8px 0 4px; }
.wk-ri-form { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 10px; align-items: center; font-size: 14px; }
.wk-ri-form label { color: var(--zacht); font-size: 12.25px; }
.wk-ri-form input, .wk-ri-form select, .wk-ri-form textarea { width: 100%; max-width: none; }
.wk-ri-form .wk-ri-knop { grid-column: 2; }
.wk-ri-statusform { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; }
.wk-ri-statusform input { flex: 1; min-width: 140px; }
.wk-ri-historie { list-style: none; margin: 0; padding: 0; font-size: 12.25px; }
.wk-ri-historie li { padding: 3px 0; border-top: 1px solid var(--lijn); }
.wk-ri-historie li:first-child { border-top: 0; }
.wk-ri-historie .wk-ri-meta { margin-right: 6px; }
.wk-ri-oud { color: var(--zacht); text-decoration: line-through; margin-right: 4px; }
.wk-ri-paneel h2 { font-size: 14px; margin: 0 0 8px; }
.wk-ri-sug { list-style: none; margin: 0; padding: 0; }
.wk-ri-sug li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--lijn); font-size: 14px; }
.wk-ri-sug li:first-child { border-top: 0; }
.wk-ri-sug .wk-ri-titel { min-width: 180px; }
.wk-ri-sug form { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.wk-ri-voet { font-size: 12.25px; color: var(--zacht); margin: 8px 0 0; }
@media (max-width: 900px) {
  .wk-ri-koppen { display: none; }
  .wk-ri > summary, .wk-ri-zondergeld .wk-ri > summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
  .wk-ri-binnen { grid-template-columns: minmax(0, 1fr); }
}

/* Het documententabblad: een bestandslijst met pad, kolomkop en uploadblok. */
.wpd-werkplek { max-width: 1180px; min-width: 0; }
.wpd-padbalk { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; min-height: 44px; padding: 7px 0; border-bottom: 1px solid var(--lijn); }
.wpd-pad { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; color: var(--zacht); font-size: 12.25px; }
.wpd-pad .ico { width: 18px; height: 18px; flex: 0 0 auto; }
.wpd-pad a { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--inkt); font-weight: 600; text-decoration: none; }
.wpd-pad a:hover { text-decoration: underline; }
.wpd-pad strong { color: var(--inkt); font-weight: 600; }
.wpd-padscheiding { color: var(--zacht); }
.wpd-telling { flex: 0 0 auto; color: var(--zacht); font-size: 12.25px; font-variant-numeric: tabular-nums; }
.wpd-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 18px; }
.wpd-hoofd, .wpd-neven { min-width: 0; }
.wpd-actie { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 5px 8px; border: 1px solid transparent; border-radius: var(--straal); color: var(--inkt); font-size: 10.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.wpd-actie:hover { border-color: var(--lijn); background: var(--vlak); }
.wpd-actie span { color: var(--zacht); font-size: 14px; line-height: 1; }
.wpd-neven > .nw-kaart { margin: 0; padding: 15px 0; border: 0; border-top: 1px solid var(--lijn); border-radius: 0; background: transparent; box-shadow: none; }
.wpd-neven > .nw-kaart:first-child { padding-top: 0; border-top: 0; }
.wpd-neven > .nw-kaart h2 { margin-bottom: 9px; font-size: 14px; }
.wpd-neven .nw-lk .nw-regel { align-items: flex-start; padding-block: 8px; }
.wpd-neven .nw-voetnoot { font-size: 10.5px; line-height: 1.45; }
@media (min-width: 1120px) {
  .wpd-raster { grid-template-columns: minmax(0, 1.65fr) minmax(292px, .72fr); }
  .wpd-neven { padding-left: 22px; border-left: 1px solid var(--lijn); }
}
@media (max-width: 700px) {
  .wpd-padbalk { align-items: flex-start; flex-direction: column; gap: 3px; padding-block: 8px; }
  .wpd-raster { gap: 20px; padding-top: 14px; }
  .wpd-actie { min-height: 44px; padding-inline: 11px; border-color: var(--lijn); }
  .wpd-neven { padding-top: 16px; border-top: 1px solid var(--lijn); }
}

/* C1: het bestandenvak (kern/bestandenvak.ts) — CAS' sleepvak "Sleep bestanden hierheen of klik om te selecteren" (afdruk 21) onder de lijst. */
.wk-bv-upload { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r2); margin-top: var(--r3); font-size: 12.25px; }
.wk-bv-zone { position: relative; flex: 1 1 260px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--r3); border: 1px dashed var(--lijn); border-radius: var(--straal-groot); color: var(--zacht); text-align: center; cursor: pointer; }
.wk-bv-zone:hover, .wk-bv-over { border-color: var(--geel); background: var(--geel-zacht); }
.wk-bv-zone b { color: var(--geel-inkt); font-weight: 400; }
.wk-bv-kiezer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wk-bv-zone:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.wk-bv-duim { width: 24px; height: 24px; margin-right: var(--r2); object-fit: cover; border-radius: var(--straal); vertical-align: middle; }
/* k138: de filterknoppen per soort boven de bestanden, en de regels die de filter verbergt. "Je bent hier" is inkt, niet geel (§5). */
.wk-bv-uit { display: none; }
.wk-bv-filter .wk-knop[aria-current="true"] { background: var(--vlak-2); border-color: var(--inkt); color: var(--inkt); font-weight: 600; }
.wk-bv-filter .wk-aantal { margin-left: 4px; color: var(--zacht); font-weight: 400; }

/* C4: projectinfo (werk/gedeeld/projectinfo.ts) — de volle tekst en de bijlagen van een regel klappen uit in de cel. */
.wk-tabel td:has(> .wk-pi-tekst[open]) { white-space: normal; }
.wk-pi-tekst > summary { cursor: pointer; overflow: hidden; text-overflow: ellipsis; }
.wk-pi-tekst > div { margin-top: 6px; overflow-wrap: anywhere; }

/* Het techniektabblad en het transporttabblad. */
.wpt-regel { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px solid var(--lijn); padding: 8px 0; font-size: 14px; }
.wpt-regel:first-child { border-top: 0; }
.wpt-naam { color: var(--zacht); font-size: 12.25px; }
.wpt-nummer { font-variant-numeric: tabular-nums; font-weight: 600; margin-right: 8px; }
.wpt-sectie + .wpt-sectie { margin-top: 12px; }
.wpt-later { color: var(--zacht); font-size: 14px; margin: 4px 0 0; }
.wpt-ibn { color: var(--zacht); font-size: 12.25px; white-space: nowrap; }
.wpt-ibn-gezien { color: var(--groen); }
.wpt-ibn-geen { font-style: italic; }
.wpt-punten { font-variant-numeric: tabular-nums; }
.wpt-vorm { display: grid; gap: 8px; max-width: 620px; margin: 8px 0 0; }
.wpt-vorm label { display: block; font-size: 10.5px; font-weight: 600; margin: 0 0 2px; }
.wpt-uit { display: inline; margin-left: 8px; }
.wpj-transport-inhoud { margin: 7px 0 0; padding-left: 18px; min-width: 290px; }
.wpj-transport-inhoud li + li { margin-top: 6px; }
/* Deze twee stonden op `--ink-muted` en `--t-s`: tokens uit het oude palet van
   stijl.ts, dat in stap 3 verdwijnt. Nu op de tokens van §2. */
.wpj-transport-leeg, .wpj-vor-omschrijving { display: block; color: var(--zacht); font-size: 14px; margin-top: 3px; }

/* De kansenlijst draagt sinds 13-09 de gedeelde filterrij (`wk-filterrij`);
   wat hier overblijft is de regel rechts met de i en "Wis filters". */
.wkl-filterinfo { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12.25px; color: var(--zacht); white-space: nowrap; }
.wkl-filterinfo a { color: inherit; }
.wkl-kansen .wk-tabel td, .wkl-kansen .wk-tabel th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.wkl-kansen .wk-tabel td > span[title]:not(.wk-stand):not(.wk-chip) { display: block; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* De vlag bij een belangrijke kans (index.php:220-221), "GEEN MEDEWERKER" (:266-270) en het record-slot (verkoopcalculaties/index.php:78); de kolom Actie draagt twee regels, dus staan de cellen bovenaan. */
.wkl-slot, .wkl-geenmedewerker { color: var(--zacht); font-size: 12.25px; font-style: normal; }
.wkl-slot { color: var(--rood); }
.wkl-kansen .wk-tabel td { vertical-align: top; }

/* --- de kanskaart en de gate-schermen (wkd-) ------------------------------
   Overgebracht uit delen/verkoop-kansen.ts (D3b-1). Wat daar stond en hier
   niet terugkomt, dekte een bouwsteen al: de melding (§17), de historie (§18),
   de invoervelden (§15) en de knop (§16). */

/* Overzicht van de kans: het gewone veldenraster (§15, label boven het veld),
   met alleen wat deze kaart extra nodig heeft — een lange waarde moet kunnen
   afbreken en het bewerk-op-de-plek-vak mag niet buiten de kolom lopen. */
.wkd-raster .wk-waarde { overflow-wrap: anywhere; }
.wkd-raster .wc-bwp-vorm { margin: 0; }
.wkd-raster .wc-bwp-vorm input, .wkd-raster .wc-bwp-vorm select { max-width: 100%; }
.wkd-lijstvakken { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; }
.wkd-lijstvak + .wkd-lijstvak { margin-top: 16px; }
.wkd-lijstvakken > .wkd-lijstvak + .wkd-lijstvak { margin-top: 0; }
@media (max-width: 980px) { .wkd-lijstvakken { grid-template-columns: minmax(0, 1fr); } }

/* Een formulier onder een lijstvak of in een gate: labels boven de velden. */
.wkd-vorm { display: grid; gap: 8px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--lijn); }
.wkd-vorm label { display: grid; gap: 3px; font-size: 12.25px; color: var(--zacht); }
.wkd-rij { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.wkd-rij > label { flex: 1 1 160px; }
.wkd-klein { display: inline; }
.wkd-extern { color: var(--zacht); font-size: 12.25px; margin: 8px 0 0; }
/* Twee vakken in één rasterrij: leverkwartaal en leverjaar zijn één gegeven. */
/* Eén notitie in het lijstvak, met zijn doorzetregel eronder. */
.wkd-notitieregel { border-top: 1px solid var(--lijn); padding: 6px 12px; }
.wkd-notitieregel:first-child { border-top: 0; }
.wkd-notitieregel p { font-size: 12.25px; margin: 0; overflow-wrap: anywhere; }

/* Gate 0: de vragenlijst per gate, met de voortgang in de kop. */
.wkd-gate0 { display: grid; gap: 18px; min-width: 0; }
.wkd-gate0 h3 { margin: 0 0 8px; font-size: 14px; }
.wkd-gate0 summary { cursor: pointer; min-height: 44px; align-content: center; font-size: 14px; }
.wkd-gate0 summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.wkd-gate0 progress { width: 180px; max-width: 100%; height: 8px; accent-color: var(--groen); }
.wkd-gate0-lijst { min-width: 0; }
.wkd-gate0-lijst > h3, .wkd-gate0-lijst > summary { margin: 0; padding: 12px; }
.wkd-gate0-gatekop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px; border-bottom: 1px solid var(--lijn); }
.wkd-gate0-gatekop > h3 { padding: 0; }
.wkd-gate0-gateinhoud { padding: 12px; }
.wkd-gate0 .wkd-vorm label { min-width: 0; }
.wkd-gate0-voorwaarden { font-size: 12.25px; margin: 8px 0 0; padding-left: 20px; }
.wkd-gate0-extra { border-bottom: 1px solid var(--lijn); padding-bottom: 8px; }

/* De controle van de verkoopadministratie: drie vaste kolommen — het vinkje
   van Esmee, waar het over gaat, en wat de kans er zelf over zegt. Als flexrij
   kregen die drie dezelfde breedte en stond het label midden in het paneel. */
.wkd-controle-stand { display: inline-flex; align-items: center; gap: 8px; }
.wkd-controle-punten { display: grid; gap: 2px; margin: 0 0 8px; }
.wkd-controle-punt { display: grid; grid-template-columns: 20px minmax(0, 1fr) 20px; align-items: center; gap: 8px; min-height: 28px; font-size: 14px; max-width: 520px; }
.wkd-controle-punt input[type="checkbox"] { margin: 0; justify-self: start; }
.wkd-controle-vink { display: inline-flex; justify-self: start; }
.wkd-controle-opmerking { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12.25px; }
.wkd-controle-opmerking span { color: var(--zacht); flex: none; }
.wkd-controle-opmerking input { flex: 1; min-width: 0; }
.wkd-controle-opmerkingtekst { font-size: 12.25px; color: var(--zacht); margin: 0; }
/* Het doorzetformulier bij één notitieregel: één regel, geen blok. */
.wkd-doorzet-vorm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 0; font-size: 12.25px; }
.wkd-doorzet-vorm label { color: var(--zacht); }

/* Het inspreken van een notitie, met de opname en de uitgeschreven tekst. */
.wkd-opname-opnemen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; }
.wkd-opname-opnemen [data-opnemen-tijd] { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--zacht); }
.wkd-opname-opnemen [data-opnemen-melding] { flex-basis: 100%; margin: 0; font-size: 12.25px; color: var(--zacht); }
.wkd-opname-regel { border-top: 1px solid var(--lijn); padding: 8px 0; }
.wkd-opname-regel:first-child { border-top: 0; }
.wkd-opname-kop { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 12.25px; color: var(--zacht); }
.wkd-opname-regel audio { width: 100%; max-width: 420px; height: 32px; }
.wkd-opname-tekst { margin: 6px 0 0; }
.wkd-opname-tekst p { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 6px; }
.wkd-opname-tekst form { display: grid; gap: 6px; justify-items: start; }
.wkd-opname-bestand { margin: 8px 0 0; font-size: 12.25px; }
.wkd-opname-bestand form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; }
@media (max-width: 680px) { .wkd-opname-opnemen button { min-height: 44px; } }

/* De wachtrij van verliesorders: één regel per order, met de twee formulieren
   erin. Geen tabel-bouwsteen, want in een tabelcel hoort geen formulier. */
.nw-vo { padding: 11px 0; border-bottom: 1px solid var(--lijn); }
.nw-vo:last-child { border-bottom: 0; }
.nw-vo-kop { display: flex; align-items: baseline; gap: 12px; font-size: 14px; }
.nw-vo-tekst { flex: 1; min-width: 0; }
.nw-vo-stand { font-size: 12.25px; color: var(--groen); margin-top: 3px; }
.nw-vo-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.nw-vo-vorm { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.nw-vo-vorm input { min-width: 190px; }
.nw-vo-af { margin-top: 14px; }
.nw-vo-af summary { cursor: pointer; font-size: 12.25px; color: var(--zacht); }
.nw-vo-geenmail { font-size: 12.25px; color: var(--zacht); align-self: center; }

/* De drie invulformulieren van verkoop (bezoekverslag, kansinvoer, notitie):
   één kolom labels-boven-velden. De velden zelf komen uit §15. */
.bezoek, .intake, .knt, .vmail { min-width: 0; }
.bezoek { max-width: 1000px; }
.intake { max-width: 980px; margin: 0 auto; }
.knt { max-width: 640px; }
.bezoek label, .intake label, .knt label, .vmail label { display: grid; gap: 6px; margin: 14px 0; min-width: 0; }
.vmail label { gap: 4px; margin: 0; }
.bezoek fieldset, .intake fieldset { border: 0; padding: 0; margin: 20px 0; min-width: 0; }
.bezoek legend { font-weight: 600; }
.bezoek .bv-rij, .intake-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.bezoek p, .bezoek dd, .vmail p, .vmail a { overflow-wrap: anywhere; }
.bezoek nav { display: flex; gap: 8px; flex-wrap: wrap; }
.bezoek article { padding: 14px 0; border-bottom: 1px solid var(--lijn); }
.bezoek details, .knt details { margin-top: 18px; }
.intake .nw-datumvak { display: flex; gap: 8px; }
.intake .nw-datumvak input { width: auto; flex: 1; }
/* Een notitie wordt op een telefoon getypt: 18 px, want onder 16 px zoomt iOS
   bij het aantikken vanzelf in en verspringt het hele scherm. */
.knt input, .knt select, .knt textarea { font-size: 17.5px; }
.knt textarea { min-height: 9em; }
.knt article { padding: 12px 0; border-bottom: 1px solid var(--lijn); overflow-wrap: anywhere; white-space: pre-wrap; }
.knt article p { white-space: normal; }
.knt article p.knt-tekst, .knt details p { white-space: pre-wrap; }
.knt .knt-meta { color: var(--zacht); font-size: 12.25px; white-space: normal; }
.knt-vervolg { white-space: normal; }
.knt-acties { white-space: normal; margin-top: 6px; }
.knt-acties a { margin-right: 12px; }
.vmail form { display: grid; gap: 10px; max-width: 72ch; }
.vmail .vmail-invoer { margin-bottom: 18px; }
.vmail article { border-top: 1px solid var(--lijn); padding: 12px 0; }
.vmail pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }

/* De systeemroute-tekenaar: het raster schaalt mee met de kolom, met de
   44 px-tikmaat als ondergrens voor de gereedschappen. */
#systeemroute { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
#tekening { flex: 1 1 640px; overflow-x: auto; }
#tekening svg { max-width: 100%; height: auto; }
#gereedschap { flex: 0 0 280px; display: flex; flex-direction: column; gap: 12px; }
#palet, #kant, #sturen { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-knop { min-height: 44px; min-width: 44px; padding: 0 12px; font: inherit; font-size: 14px; font-weight: 600; background: var(--vlak); color: inherit; border: 1px solid var(--lijn); border-radius: var(--straal); cursor: pointer; }
.sr-knop[aria-pressed="true"] { border-color: var(--geel); background: var(--geel-zacht); }
#gereedschap label { display: flex; flex-direction: column; gap: 4px; font-size: 12.25px; }
#gereedschap input, #gereedschap select { min-height: 44px; font-size: 14px; box-sizing: border-box; width: 100%; }
#bewaren { min-height: 44px; }

/* --- de offerte: het papier, de maker en de wizard (vof-, vow-) -----------
   Overgebracht uit delen/verkoop-offerte.ts (D3b-1). De melding, de historie,
   de velden en de knoppen komen uit de bouwstenen; wat hier staat is het
   papier zelf en de bewerklaag eromheen. */

/* Het vel. Het volgt de Q-sjabloon van de Informatie-map: gele hoofdstukband,
   lichte modulebalk, Arial op 10pt. Dit is de enige plek in de tool met een
   eigen letter en eigen koppenmaten, want het is een uitdraai naar de klant en
   geen scherm. De lichte tokens erop staan in §18. */
.vof-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; justify-items: center; }
.vof-vel {
  position: relative; background: var(--vlak); color: var(--inkt); width: 794px; max-width: 100%; box-sizing: border-box;
  border: 1px solid var(--lijn); border-radius: 0; padding: 64px 72px 56px; box-shadow: var(--schaduw); font-family: Arial, sans-serif;
}
.vof-vel h1 { font-size: 21px; line-height: 1.25; margin: 10px 0 6px; font-weight: 600; color: var(--geel-inkt); }
/* De drie niveaus volgen de Q-sjabloon: hoofdstuk, module en onderdeel. */
.vof-vel h2 { font-size: 14px; margin: 26px 0 12px; padding: 7px 8px; background: var(--geel); color: #1D1D1D; font-weight: 600; letter-spacing: .02em; }
.vof-vel h3 { font-size: 14px; margin: 16px 0 4px; padding: 2px 6px; background: var(--geel-zacht); font-weight: 600; }
.vof-vel h4 { font-size: 14px; margin: 15px 0 4px; font-weight: 600; }
.vof-vel p { font-size: 14px; line-height: 1.25; margin: 7px 0; }
.vof-vel ul, .vof-vel ol { font-size: 14px; line-height: 1.25; margin: 7px 0; padding-left: 22px; }
.vof-vel img { width: auto; max-width: 100%; height: auto; max-height: 300px; display: block; margin: 10px auto; }
.vof-vel figcaption { font-size: 10.5px; color: var(--zacht); text-align: center; }
.vof-vel table { width: 100%; border-collapse: collapse; font-size: 12.25px; margin: 8px 0; }
.vof-vel td { padding: 6px 4px; border-bottom: 1px solid var(--lijn); }
.vof-vel td.vof-geld { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vof-vel tr.vof-totaal td { border-top: 1.5px solid var(--inkt); border-bottom: 0; font-weight: 600; }
.vof-vel tr.vof-optie td { color: var(--zacht); }
.vof-cover { min-height: 1000px; padding-top: 24px; }
.vof-coverhead { display: flex; justify-content: space-between; align-items: flex-start; height: 180px; }
.vof-coverhead img.vof-logo { width: 380px; height: auto; }
.vof-coverhead img.vof-slogan { width: 66px; height: auto; margin: 2px 0 0; }
.vof-coverline { height: 6px; background: var(--geel); margin: 0 -72px 126px; }
.vof-cover h1 { font-size: 21px; margin: 0 0 20px; }
.vof-covertitle { font-size: 17.5px; line-height: 1.25; font-weight: 600; margin-bottom: 26px; }
.vof-projectslot { width: 100%; height: 302px; box-sizing: border-box; border: 1px dashed var(--lijn); display: flex; align-items: center; justify-content: center; color: var(--zacht); font-size: 14px; }
.vof-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; color: var(--zacht); font-size: 12.25px; margin-top: 132px; }
.vof-briefhead { display: grid; grid-template-columns: 95fr 65fr; gap: 30px; font-size: 14px; margin-bottom: 34px; }
.vof-briefhead img { width: 52px; height: 52px; margin-bottom: 12px; }
.vof-briefmeta { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 3px 8px; }
.vof-briefmeta dt { color: var(--zacht); font-weight: 600; }
.vof-briefmeta dd { margin: 0; }
.vof-docnoot { margin: 0 0 12px; font-size: 12.25px; color: var(--zacht); }
.vof-pdfvoorbeeld { width: 100%; height: min(1100px, 82vh); min-height: 480px; border: 1px solid var(--lijn); border-radius: var(--straal); }
.vof-akkoord { margin-top: 26px; border: 1px solid var(--lijn); border-radius: var(--straal); padding: 14px 16px; }
.vof-akkoord h4 { margin-top: 0; }
.vof-handtekening { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 18px; font-size: 10.5px; color: var(--zacht); }
.vof-handtekening span { display: block; border-bottom: 1px solid var(--zacht); height: 34px; }

/* De bewerklaag over het papier: elk blok is aan te wijzen, te verplaatsen en
   te vervangen. Alleen met JavaScript zichtbaar. */
.vof-blk { position: relative; }
.vof-blk[data-actief="ja"] { outline: 2px solid var(--geel); outline-offset: 6px; border-radius: var(--straal); }
.vof-veld { outline: none; border-radius: var(--straal); }
.vof-veld:focus { box-shadow: 0 0 0 2px var(--geel); }
.vof-veld[data-leeg="ja"]::before { content: attr(data-tip); color: var(--zacht); }
.vof-greep { position: absolute; left: -58px; top: 0; display: none; gap: 2px; }
.vof-blk:hover .vof-greep, .vof-blk[data-actief="ja"] .vof-greep { display: flex; flex-direction: column; }
.vof-greep button { width: 24px; height: 24px; padding: 0; color: var(--zacht); }
.vof-greep button:hover { color: var(--inkt); border-color: var(--zacht); }
.vof-greep button.vof-weg:hover { color: var(--rood); border-color: var(--rood); }
.vof-invoeg { position: relative; height: 12px; }
.vof-invoeg > button { position: absolute; left: -32px; top: -2px; width: 22px; height: 22px; padding: 0; border-radius: 50%; color: var(--zacht); opacity: 0; }
.vof-invoeg:hover > button, .vof-invoeg[data-open="ja"] > button { opacity: 1; }
.vof-invoeg::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; border-top: 1px dashed transparent; }
.vof-invoeg:hover::after { border-top-color: var(--geel); }
.vof-invoegmenu {
  display: none; position: absolute; z-index: 30; left: 0; top: 16px; width: 340px; padding: 8px;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--straal-groot); box-shadow: var(--schaduw);
}
.vof-invoeg[data-open="ja"] .vof-invoegmenu { display: block; }
.vof-invoegmenu .vof-menurij { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.vof-widget { position: relative; }
.vof-widgetknop { position: absolute; right: -50px; top: 0; display: none; }
.vof-widget:hover .vof-widgetknop { display: block; }
.vof-scheiding { margin: 4px 0; border-top: 2px dashed var(--geel); text-align: right; font-size: 10.5px; color: var(--amber); letter-spacing: .06em; text-transform: uppercase; }

/* De zwevende werkbalk boven een geselecteerd blok (alleen met JavaScript). */
.vof-balk { display: none; position: absolute; z-index: 40; background: var(--inkt); border-radius: var(--straal-groot); padding: 4px; gap: 2px; box-shadow: var(--schaduw); }
.vof-balk[data-open="ja"] { display: flex; }
.vof-balk button { border: 0; background: transparent; color: var(--vlak); font-size: 12.25px; font-weight: 600; padding: 6px 9px; border-radius: var(--straal); min-width: 30px; height: auto; }
.vof-balk button:hover { background: var(--vlak-2); color: var(--inkt); }
.vof-balk .vof-scheider { width: 1px; background: var(--zacht); margin: 4px 2px; }
.vof-bronregel { margin: 6px 0 0; display: flex; gap: 12px; flex-wrap: wrap; font-size: 10.5px; }

/* De rail naast het papier. Zonder hoogtegrens werd de rail zelf 2000 px hoog
   en bleef sticky zonder effect — de knoppen bovenin kwamen dan pas onderaan
   het document in beeld (N8). Het documentraster zelf komt uit §18 (R29). */
.vof-rail { max-height: calc(100vh - 32px); overflow-y: auto; }
.vof-vakinhoud { padding: 10px 12px; }
.vof-rail form { display: grid; gap: 8px; }
.vof-railvorm label { display: grid; gap: 3px; font-size: 12.25px; color: var(--zacht); }
.vof-railknoppen { display: flex; flex-wrap: wrap; gap: 6px; }
.vof-stand { font-size: 10.5px; color: var(--zacht); }
.vof-onderkant { margin-top: 24px; }
.vof-onderkant > summary { cursor: pointer; font-size: 12.25px; font-weight: 600; color: var(--zacht); padding: 8px 0; }
/* Invoegen en Meer stonden als twee losse uitklappers boven het papier; ze
   horen bij de werkbalk van het document (§3.4). Open vallen ze als paneel
   over de volle breedte onder de balk. */
.vof-invoegen { position: relative; }
.vof-invoegen > summary { width: max-content; cursor: pointer; list-style: none; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--lijn); border-radius: var(--straal); background: var(--vlak); font-size: 14px; }
.vof-invoegen > summary::-webkit-details-marker { display: none; }
.vof-invoegen[open] { flex: 1 1 100%; }
.vof-invoegen[open] > summary { margin-bottom: 8px; }

/* De offertekaart: de blokkenlijst met de handelingen per blok. */
.vof-gebrek { margin: 0; padding-left: 18px; font-size: 12.25px; }
.vof-gebrek li { margin: 3px 0; }
.vof-rij { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.vof-rij > label { flex: 1 1 150px; display: grid; gap: 3px; font-size: 12.25px; color: var(--zacht); }
.vof-punt { border-bottom: 1px solid var(--lijn); font-size: 12.25px; padding: 4px 0; }
.vof-punt summary, .vof-prijsbron summary { cursor: pointer; }
.vof-punt p { margin: 4px 0 0; color: var(--zacht); }
.vof-prijsbron summary { font-size: 12.25px; color: var(--zacht); }
.vof-blok { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--lijn); }
.vof-blok.vof-open { background: var(--vlak); border-radius: var(--straal-groot); padding: 10px; }
.vof-blok.vof-controleblok { border-left: 3px solid var(--rood); padding-left: 8px; }
.vof-bloknr { flex: 0 0 26px; font-size: 10.5px; color: var(--zacht); padding-top: 3px; font-variant-numeric: tabular-nums; }
.vof-blokwat { flex: 1 1 auto; font-size: 12.25px; min-width: 0; }
.vof-blokwat .vof-soort { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--zacht); margin-right: 6px; }
.vof-blokwat p { margin: 3px 0 0; color: var(--zacht); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vof-blokknoppen { flex: 0 0 auto; display: flex; gap: 4px; }
.vof-blokknoppen form, .vof-werkbalk form { display: inline; }
.vof-blokvorm { display: grid; gap: 8px; margin-top: 8px; }
.vof-blokvorm label { display: grid; gap: 3px; font-size: 12.25px; color: var(--zacht); }
/* Vrij typen in een offerteblok: zonder JavaScript is de textarea met de HTML
   de enige rij, met JavaScript neemt het contenteditable-vak het over. */
.vof-vrij-vak { display: grid; gap: 6px; }
.vof-vrij-editor { display: none; min-height: 110px; border: 1px solid var(--lijn); border-radius: var(--straal); padding: 10px 12px; font-size: 14px; background: var(--vlak); }
.vof-vrij-editor p { margin: 6px 0; }
.vof-vrij-editor ul, .vof-vrij-editor ol { margin: 6px 0; padding-left: 20px; }
.vof-vrij-editor h2 { font-size: 14px; margin: 10px 0 4px; }
.vof-vrij-editor h3 { font-size: 14px; margin: 8px 0 4px; }
.vof-opmaakbalk { display: none; flex-wrap: wrap; gap: 4px; }
.vof-opmaakbalk button { min-width: 44px; min-height: 44px; height: auto; }
.vof-js .vof-vrij-textarea { display: none; }
.vof-js .vof-opmaakbalk { display: flex; }
.vof-js .vof-vrij-editor { display: block; }
.vof-toevoegen { display: grid; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--lijn); }
.vof-toevoegen h4 { margin: 0; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--zacht); }
.vof-werkbalk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.vof-noot { font-size: 10.5px; color: var(--zacht); margin: 6px 0 0; }
/* In de smalle rail moet de regeltekst wijken voor het volledige bedrag. */
#vof-verkocht .wk-kolom-titel { min-width: 0; }
/* De orderbevestiging en de conceptmail staan als platte tekst in de smalle
   rail; zonder afbreken loopt elke regel het vak uit (B1-6). */
.vof-concept {
  white-space: pre-wrap; word-break: break-word; font-size: 10.5px; line-height: 1.4;
  margin: 6px 0 0; max-height: 220px; overflow: auto;
  background: var(--grond); border: 1px solid var(--lijn); padding: 6px;
}
.vof-casbron { font-size: 10.5px; color: var(--inkt); margin-top: 4px; white-space: normal; }
.vof-bieb summary { cursor: pointer; font-size: 12.25px; font-weight: 600; margin: 8px 0 4px; }
.vof-bieb p { font-size: 12.25px; color: var(--zacht); margin: 4px 0 8px; }

/* De offertewizard: de stappen links, het formulier ernaast, de rail rechts. */
.vow-vlak { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.vow-stappen { display: grid; gap: 0; margin: 0 0 16px; padding: 0; list-style: none; border-bottom: 1px solid var(--lijn); }
.vow-stappen li { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; font-size: 14px; color: var(--zacht); }
.vow-stappen li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.vow-stappen li.vow-nu { color: var(--inkt); border-left: 3px solid var(--geel); padding-left: 8px; margin-left: -11px; }
.vow-stappen li.vow-af { color: var(--groen); }
.vow-stappen li a { color: inherit; }
.vow-vorm { display: grid; gap: 12px; max-width: 640px; }
.vow-vorm label { display: grid; gap: 3px; font-size: 12.25px; color: var(--zacht); }
.vow-termijnen { border-collapse: collapse; width: 100%; max-width: 520px; font-size: 14px; }
.vow-termijnen th { text-align: left; font-size: 12.25px; color: var(--zacht); font-weight: 600; padding: 4px 6px; }
.vow-termijnen td { padding: 3px 6px; border-top: 1px solid var(--lijn); }
.vow-termijnen td:last-child { width: 110px; }
.vow-scope { border-collapse: collapse; width: 100%; font-size: 12.25px; margin: 6px 0 10px; }
.vow-scope th { text-align: left; font-size: 12.25px; color: var(--zacht); font-weight: 600; padding: 4px 6px; }
.vow-scope td { padding: 6px; border-top: 1px solid var(--lijn); vertical-align: top; }
.vow-scope td:last-child { display: grid; gap: 4px; max-width: 320px; }
.vow-scope textarea { min-height: 40px; font: inherit; }
.vow-keuze { display: flex; gap: 16px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--lijn); font-size: 14px; }
.vow-keuze span:first-child { flex: 1 1 auto; color: var(--inkt); }
.vow-keuze label { display: inline-flex; gap: 5px; align-items: baseline; font-size: 14px; color: var(--inkt); }
.vow-plek { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--lijn); }
.vow-plek b { font-size: 12.25px; font-weight: 600; }
.vow-plek textarea { min-height: 64px; }
.vow-punttekst { color: var(--zacht); font-size: 10.5px; }
.vow-knoppen { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.vow-terug { font-size: 12.25px; color: var(--zacht); }
.vow-rail dl { display: grid; gap: 6px; margin: 0; font-size: 12.25px; }
.vow-rail dt { font-size: 12.25px; color: var(--zacht); }
.vow-rail dd { margin: 0; }
.vow-noot { font-size: 12.25px; color: var(--zacht); margin: 0; }
@media (max-width: 1180px) {
  .vow-vlak { grid-template-columns: minmax(0, 1fr); }
  .vof-rail { max-height: none; overflow-y: visible; }
}
@media (max-width: 680px) {
  .vof-vel { width: 100%; min-width: 0; padding: 20px; overflow-wrap: anywhere; }
  .vof-coverline { margin-left: -20px; margin-right: -20px; }
  .vof-coverhead img.vof-logo { max-width: calc(100% - 78px); margin-left: 0; }
  .vof-briefhead { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vof-doc .vof-invoegmenu { width: 100%; }
}

/* ─── 22. Matrix ─────────────────────────────────────────────────────────── */

/* De matrix van VOR’s × fasen (kern/opmaak/matrix.ts): rijen die blijven
   staan bij het schuiven, een cel per kruispunt met een teken én een kleur, en
   een legenda eronder. Geen tabel-bouwsteen: die kent geen vaste eerste kolom
   en geen 28-px-cel. Overgebracht uit stijl.ts (D3b-2). */
/* Een kolomwaarde die aandacht vraagt ("Maak de werkorder"): rood, niet als
   melding maar in de cel zelf. */
.wc-let { color: var(--rood); }

.wc-matrix { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--inkt); font-size: 12.25px; }
.wc-matrix th, .wc-matrix td {
  padding: 7px 9px; border-right: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn);
  background: var(--vlak); text-align: left; vertical-align: middle;
}
.wc-matrix th:last-child, .wc-matrix td:last-child { border-right: 0; }
.wc-matrix thead th {
  position: sticky; top: 0; z-index: 4; background: var(--vlak-2); color: var(--zacht);
  font-size: 12.25px; font-weight: 600; white-space: nowrap;
}
.wc-matrix-fase { width: 54px; min-width: 54px; padding-left: 5px !important; padding-right: 5px !important; text-align: center !important; }
.wc-matrix-fase span, .wc-matrix-fase small { display: block; }
.wc-matrix-fase small { max-width: 64px; margin: 2px auto 0; font-size: 10.5px; font-weight: 600; letter-spacing: 0; line-height: 1.15; text-transform: none; white-space: normal; }
.wc-matrix-vast { position: sticky; left: 0; z-index: 3; min-width: 200px; }
.wc-matrix thead .wc-matrix-vast { z-index: 6; }
.wc-matrix tbody .wc-matrix-vast { font-weight: 400; }
.wc-matrix-vast b { display: block; font-size: 12.25px; font-weight: 700; }
.wc-matrix-vast a { color: var(--inkt); text-decoration: none; }
.wc-matrix-vast a:hover { text-decoration: underline; }
.wc-matrix-vast span, .wc-matrix td > small { display: block; color: var(--zacht); font-size: 12.25px; }
.wc-matrix-vast small { display: block; color: var(--zacht); font-size: 10.5px; }
.wc-matrix-breed { min-width: 190px; }
.wc-matrix-zacht { color: var(--zacht); }
.wc-matrix tbody tr:nth-child(even) th, .wc-matrix tbody tr:nth-child(even) td { background: var(--grond); }
.wc-matrix tbody tr:hover th, .wc-matrix tbody tr:hover td { background: var(--rij); }
.wc-matrix tbody tr.wc-gekozen th, .wc-matrix tbody tr.wc-gekozen td { background: var(--geel-zacht); }
.wc-matrix tbody tr.wc-gekozen .wc-matrix-vast { box-shadow: inset 4px 0 0 var(--geel); }
.wc-matrix tbody tr:last-child th, .wc-matrix tbody tr:last-child td { border-bottom: 0; }
.wc-matrix-cel { padding: 5px !important; text-align: center !important; }
.wc-matrix-cel-leeg { background-image: none !important; }
.wc-cel {
  display: inline-grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--matrix-lijn);
  border-radius: var(--straal); background: var(--vlak); color: var(--zacht);
  font-size: 10.5px; font-style: normal; font-weight: 900; line-height: 1;
}
.wc-cel-af { border-color: var(--groen); background: var(--groen); color: var(--grond); }
.wc-cel-hier { border-color: var(--geel); background: var(--geel); color: var(--balk); box-shadow: 0 0 0 3px var(--geel-zacht); }
.wc-cel-later { background: var(--matrix-later); color: var(--zacht); }
.wc-cel-onbekend {
  border-color: var(--amber); color: var(--amber);
  background: repeating-linear-gradient(135deg, var(--amber-zacht), var(--amber-zacht) 4px, var(--lijn) 4px, var(--lijn) 7px);
}
.wc-cel-nvt {
  color: var(--zacht);
  background: repeating-linear-gradient(135deg, var(--grond), var(--grond) 3px, var(--lijn) 3px, var(--lijn) 5px);
}
.wc-cel-aandacht { border-color: var(--rood); background: var(--rood-zacht); color: var(--rood); box-shadow: inset 0 -3px 0 var(--rood); }
.wc-matrix-legenda {
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 0; padding: 8px 11px; list-style: none;
  border-radius: var(--straal-groot); background: var(--grond); color: var(--zacht); font-size: 12.25px;
}
.wc-matrix-legenda li { display: flex; align-items: center; gap: 6px; }
.wc-matrix-legenda .wc-cel { width: 20px; height: 20px; border-radius: var(--straal); font-size: 10.5px; box-shadow: none; }

/* ─── 23. Bewerken op de plek, het blok Nu en open punten ────────────────── */

/* Drie bouwstenen die bij elkaar horen: een waarde die je op de kaart zelf
   openklapt en wijzigt (kern/opmaak/bewerkopdeplek.ts), het blok Nu met de
   eerstvolgende handeling, en de open-puntenregel die rechts in de tabbalk
   hangt (kern/opmaak/openpunten.ts). Overgebracht uit stijl.ts (D3b-2). */
.wc-bwp { display: inline-block; }
.wc-bwp > summary { cursor: pointer; list-style: none; border-bottom: 1px dashed var(--lijn); }
.wc-bwp > summary::-webkit-details-marker { display: none; }
.wc-bwp > summary:hover { background: var(--grond); }
.wc-bwp-label { color: var(--zacht); font-size: 12.25px; }
.wc-bwp-waarde { font-weight: 600; }
.wc-bwp-vast .wc-bwp-waarde { font-weight: 600; }
.wc-bwp-herzien { font-size: 12.25px; }
.wc-bwp-vorm { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.wc-nublok { background: var(--vlak); border: 1px solid var(--lijn); border-left: 3px solid var(--geel);
  border-radius: var(--straal); padding: 12px 16px; margin: 0 0 16px; }
.wc-nublok-kop { display: flex; align-items: center; gap: 12px; }
.wc-nublok-kop h2 { font-size: 14px; margin: 0; }
.wc-nublok-vorm { margin-left: auto; }
.wc-nublok-teller { font-size: 12.25px; color: var(--zacht); }
.wc-nublok-volgende { margin-left: auto; font-size: 12.25px; color: var(--zacht); }
.wc-nublok-leeg { margin: 8px 0 0; color: var(--zacht); font-size: 12.25px; }
/* E4/E6: de tabrij draagt rechts de open-puntenregel, zodat die geen eigen
   regel (28 px) boven de inhoud kost — keurmaat 200 px, ONTWERP §8. */
.wc-kaartrij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
/* De tabrij vult de regel, zodat de Opslaan erin rechts uitkomt (CS-3, CAS 12);
   zonder dit kromp de nav naar zijn tabs en stond de knop er middenin. */
.wc-kaartrij > .wk-tabs, .wc-kaartrij .nw-tabbalk { flex: 1 1 auto; margin-bottom: 0; }
.wc-open { margin: 0 0 8px; font-size: 12.25px; }
.wc-open-leeg { color: var(--zacht); }
.wc-puntlijst { list-style: none; margin: 8px 0 0; padding: 0; }
.wc-punt { padding: 4px 0; border-top: 1px solid var(--lijn); font-size: 12.25px; }
.wc-punt > details > summary { cursor: pointer; }
.wc-punt-vorm { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 4px 16px; }
.wc-punt-elders { color: var(--zacht); }

/* ─── 24. Gates, colli, afsluiting en meerwerk ───────────────────────────── */

/* De vier blokken van het projectdossier die hun eigen vorm dragen: de
   gateladder met zijn sporten en uitklappers (werk/projecten/gates/blok.ts),
   loopt-via-colli, het afsluitblok en de meerwerkstroom. De standklassen
   (nw-gt-<stand>, nw-gt-check-<stand>) worden in de code samengesteld, dus
   staan ze hier alle vijf. Overgebracht uit stijl.ts (D3b-2). De eigen
   knoppen van deze vier blokken (nw-gt-knop/-zacht, nw-mf-knop/-zacht, de
   kale knopjes van colli en de twee tekenknoppen van het afsluitblok) zijn
   in D3b-3 vervallen: ze staan nu op `wk-knop` uit §16, met de gele primaire
   voor de handeling en een kader voor de nevenhandeling (R47). Dat was
   veertig pixels hoge, vette, donkere knoppen tegenover de 28 px van de rest
   van de tool. */
.nw-gt-keten { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 14px; }
.nw-gt-sport { flex: 1 1 120px; min-width: 96px; border-radius: var(--straal-groot); border: 1px solid var(--lijn); background: var(--grond); padding: 8px 11px; font-size: 12.25px; line-height: 1.35; }
.nw-gt-sport b { display: block; font-size: 14px; }
.nw-gt-sport span { color: var(--zacht); }
.nw-gt-open { border-left: 3px solid var(--lijn); }
.nw-gt-bezig { border-left: 3px solid var(--amber); }
.nw-gt-af { border-left: 3px solid var(--groen); }
.nw-gt-vast { border-left: 3px solid var(--groen); background: var(--groen-zacht); }
.nw-gt-onbekend { border-left: 3px dashed var(--lijn); opacity: .55; }
.nw-gt-stap { border-top: 1px solid var(--lijn); }
.nw-gt-stap > summary { cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 12px 2px; font-size: 14px; list-style: none; }
.nw-gt-stap > summary::-webkit-details-marker { display: none; }
.nw-gt-stap > summary::before { content: '+'; color: var(--zacht); font-weight: 700; width: 12px; flex: 0 0 auto; }
.nw-gt-stap[open] > summary::before { content: '−'; }
.nw-gt-naam { font-weight: 650; }
.nw-gt-code { color: var(--zacht); font-weight: 500; margin-right: 6px; font-variant-numeric: tabular-nums; }
.nw-gt-teller { margin-left: auto; color: var(--zacht); font-size: 12.25px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nw-gt-binnen { padding: 0 2px 14px 24px; }
.nw-gt-wie { color: var(--zacht); font-size: 12.25px; line-height: 1.55; margin: 0 0 10px; }
.nw-gt-slot { border: 1px solid var(--lijn); border-left: 3px solid var(--groen); border-radius: var(--straal-groot); padding: 9px 12px; margin: 0 0 12px; font-size: 14px; line-height: 1.55; }
.nw-gt-kickoff { border: 1px solid var(--lijn); border-left: 3px solid var(--amber); border-radius: var(--straal-groot); padding: 10px 12px 12px; margin: 0 0 12px; }
.nw-gt-kickoff h3 { font-size: 14px; margin: 0 0 6px; }
.nw-gt-kaartinhoud { display: grid; gap: 7px; margin: 8px 0 4px; }
.nw-gt-kv { font-size: 14px; line-height: 1.5; }
.nw-gt-kv b { display: block; font-weight: 650; }
.nw-gt-kv span { white-space: pre-wrap; }
.nw-gt-leegveld { color: var(--zacht); font-style: italic; }
.nw-gt-kickdetails > summary { cursor: pointer; font-size: 12.25px; color: var(--zacht); padding: 6px 0 2px; }
.nw-gt-kickvorm { display: grid; gap: 8px; margin-top: 8px; }
.nw-gt-veld { display: grid; gap: 3px; font-size: 12.25px; color: var(--zacht); }
.nw-gt-veld textarea, .nw-gt-veld input { font: inherit; font-size: 14px; color: var(--inkt); border: 1px solid var(--lijn); border-radius: var(--straal); padding: 7px 9px; width: 100%; box-sizing: border-box; }
.nw-gt-punt { border-bottom: 1px solid var(--lijn); padding: 11px 0; }
.nw-gt-punt:last-of-type { border-bottom: none; }
.nw-gt-kop { display: flex; align-items: baseline; gap: 10px; }
.nw-gt-tekst { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.4; }
.nw-gt-toelichting { display: block; font-weight: 400; font-size: 12.25px; color: var(--zacht); margin-top: 2px; }
.nw-gt-meting { display: block; font-weight: 400; font-size: 12.25px; color: var(--zacht); margin-top: 4px; font-style: italic; }
.nw-gt-check { display: block; font-weight: 500; font-size: 12.25px; margin-top: 3px; }
.nw-gt-check-tegenspraak { color: var(--amber); }
.nw-gt-check-geen { color: var(--groen); }
.nw-gt-check-onbekend { color: var(--zacht); }
.nw-gt-stand { margin: 6px 0 0; font-size: 12.25px; color: var(--zacht); line-height: 1.5; }
.nw-gt-stand b { color: var(--inkt); font-weight: 600; }
.nw-gt-vorm { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.nw-gt-vorm input[type="text"] { flex: 1; min-width: 170px; border: 1px solid var(--lijn); border-radius: var(--straal-groot); padding: 9px 11px; font-size: 14px; font-family: inherit; background: var(--vlak); color: inherit; }
.nw-gt-melding { border: 1px solid var(--lijn); border-left-width: 3px; border-radius: var(--straal-groot); padding: 10px 13px; margin: 0 0 12px; font-size: 14px; }
.nw-gt-melding.nw-fout { border-left-color: var(--rood); }
.nw-gt-melding.nw-goed { border-left-color: var(--groen); }
@media (max-width: 640px) {
  /* De vorm wordt een kolom en strekt zijn kinderen uit; een eigen
     width: 100% op de knop is daarmee overbodig (en R47 kent geen knop over
     de volle breedte). */
  .nw-gt-vorm { flex-direction: column; }
  .nw-gt-binnen { padding-left: 4px; }
}
.nw-gt-velduitleg{display:block;margin-top:.25rem;color:var(--zacht);font-size:.8125rem;line-height:1.35}

/* ═══ loopt-via-colli (werk/projecten/gates/colliblok) ═══ */
.nw-vc { border: 1px solid var(--lijn); border-left: 3px solid var(--amber); border-radius: var(--straal-groot); padding: 10px 12px 12px; margin: 0 0 12px; }
.nw-vc > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; }
.nw-vc > summary::-webkit-details-marker { display: none; }
.nw-vc > summary::before { content: '+'; color: var(--zacht); font-weight: 700; width: 12px; flex: 0 0 auto; }
.nw-vc[open] > summary::before { content: '−'; }
.nw-vc-teller { font-size: 12.25px; color: var(--zacht); font-weight: 400; }
.nw-vc h3 { font-size: 14px; margin: 0 0 6px; }
.nw-vc-samen { font-size: 14px; line-height: 1.55; margin: 0 0 10px; }
.nw-vc-samen b { font-weight: 650; }
.nw-vc-rij { border-top: 1px solid var(--lijn); padding: 9px 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; font-size: 14px; }
.nw-vc-naam { font-weight: 650; min-width: 120px; }
.nw-vc-stand { color: var(--zacht); flex: 1 1 200px; }
.nw-vc-ja { color: var(--groen); font-weight: 650; }
.nw-vc-nee { color: var(--zacht); font-weight: 650; }
.nw-vc-open { color: var(--amber); font-weight: 650; }
.nw-vc-vorm { display: flex; gap: 6px; flex: 0 0 auto; }
.nw-vc-uitleg { color: var(--zacht); font-size: 12.25px; line-height: 1.55; margin: 10px 0 0; }
@media (max-width: 640px) {
  .nw-vc-rij { flex-direction: column; align-items: stretch; }
  .nw-vc-vorm .wk-knop { flex: 1; }
}

/* ═══ gates-overzicht (werk/projecten/gates/overzicht) ═══ */
.wk-gw-code{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}.wk-gw-gate{color:var(--zacht);font-size: 12.25px;margin-left:6px}.wk-gw-zacht{color:var(--zacht)}.wk-gw-voet{color:var(--zacht);font-size: 12.25px;margin:12px 0 0}

/* ═══ afsluitblok (werk/projecten/afsluiting/blok) ═══ */
.nw-af-meting { display: flex; flex-wrap: wrap; gap: 18px; margin: 10px 0 4px; }
.nw-af-cijfer { min-width: 150px; }
.nw-af-cijfer b { display: block; font-size: 21px; }
.nw-af-label { color: var(--zacht); font-size: 12.25px; }
.nw-af-reden { color: var(--zacht); font-size: 12.25px; margin: 4px 0 10px; }
.nw-af-eis { border-top: 1px solid var(--lijn); padding: 9px 0; font-size: 14px; }
.nw-af-eis:first-of-type { border-top: 0; }
.nw-af-wie { color: var(--zacht); font-size: 12.25px; }
.nw-af-vorm { border: 1px solid var(--lijn); border-radius: var(--straal-groot); padding: 12px; margin-top: 12px; }
.nw-af-vorm h3 { margin: 0 0 8px; font-size: 14px; }
.nw-af-veld { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--lijn); border-radius: var(--straal-groot); background: var(--vlak); color: inherit; }
.nw-af-labeltekst { display: block; font-size: 12.25px; color: var(--zacht); margin: 8px 0 3px; }
.nw-af-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ═══ meerwerk-flowblok (werk/projecten/meerwerk/blok) ═══ */
.nw-mf-signaal { border: 1px solid var(--lijn); border-left: 3px solid var(--amber); border-radius: var(--straal-groot); padding: 11px 13px; margin: 0 0 14px; font-size: 14px; line-height: 1.55; }
.nw-mf-signaal.nw-mf-rustig { border-left-color: var(--groen); }
.nw-mf-signaal b { font-variant-numeric: tabular-nums; }
.nw-mf-kosten { font-size: 14px; line-height: 1.55; margin: 0 0 14px; }
.nw-mf-aanvraag { border-top: 1px solid var(--lijn); padding: 12px 0; }
.nw-mf-aanvraag:first-of-type { border-top: none; }
.nw-mf-kop { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.nw-mf-titel { flex: 1; min-width: 0; font-size: 14px; font-weight: 650; line-height: 1.4; }
.nw-mf-euro { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.nw-mf-k { color: var(--zacht); font-size: 12.25px; line-height: 1.55; margin: 4px 0 0; }
.nw-mf-keten { display: flex; gap: 6px; flex-wrap: wrap; margin: 9px 0 0; }
.nw-mf-sport { flex: 1 1 130px; min-width: 110px; border: 1px solid var(--lijn); border-radius: var(--straal-groot); background: var(--grond); padding: 7px 10px; font-size: 12.25px; line-height: 1.35; }
.nw-mf-sport b { display: block; font-size: 12.25px; }
.nw-mf-sport span { color: var(--zacht); }
.nw-mf-gezet { border-left: 3px solid var(--groen); }
.nw-mf-open { border-left: 3px solid var(--lijn); }
.nw-mf-nu { border-left: 3px solid var(--amber); }
.nw-mf-poort { border: 1px solid var(--lijn); border-left: 3px solid var(--lijn); border-radius: var(--straal-groot); padding: 9px 12px; margin: 10px 0 0; font-size: 14px; line-height: 1.55; }
.nw-mf-poort.nw-mf-dicht { border-left-color: var(--rood); }
.nw-mf-poort.nw-mf-los { border-left-color: var(--groen); }
.nw-mf-vorm { display: flex; flex-wrap: wrap; gap: 8px; margin: 9px 0 0; }
.nw-mf-vorm input[type="text"], .nw-mf-vorm input[type="number"] { flex: 1; min-width: 150px; border: 1px solid var(--lijn); border-radius: var(--straal-groot); padding: 9px 11px; font-size: 14px; font-family: inherit; background: var(--vlak); color: inherit; }
.nw-mf-nieuw > summary { cursor: pointer; font-size: 14px; color: var(--zacht); padding: 9px 0 2px; }
.nw-mf-veld { display: grid; gap: 3px; font-size: 12.25px; color: var(--zacht); }
.nw-mf-veld input { font: inherit; font-size: 14px; color: var(--inkt); border: 1px solid var(--lijn); border-radius: var(--straal); padding: 7px 9px; width: 100%; box-sizing: border-box; }
.nw-mf-nieuwvorm { display: grid; gap: 8px; margin-top: 8px; }
/* Een raster strekt zijn kinderen uit, en dan wordt de knop 1.200 px breed —
   een knop over de volle breedte bestaat niet (R47). */
.nw-mf-nieuwvorm .wk-knop { justify-self: start; }
.nw-mf-melding { border: 1px solid var(--lijn); border-left-width: 3px; border-radius: var(--straal-groot); padding: 10px 13px; margin: 0 0 12px; font-size: 14px; }
.nw-mf-melding.nw-fout { border-left-color: var(--rood); }
.nw-mf-melding.nw-goed { border-left-color: var(--groen); }
@media (max-width: 640px) {
  .nw-mf-vorm { flex-direction: column; }
}

/* ─── 25. Papier en beweging ─────────────────────────────────────────────── */

@media (max-width: 680px) {
  .wc-matrix-vast small, .wc-matrix-fase small { font-size: 12.25px; }
  .wc-thema { display: flex; }
  .wc-thema button { flex: 1 1 auto; justify-content: center; min-height: 36px; }
}
@media print {
  :root, :root[data-thema="donker"] {
    --grond: #FFFFFF; --vlak: #FFFFFF; --vlak-2: #F2F2F2; --lijn: #999999; --lijn-zacht: #BBBBBB; --inkt: #000000; --zacht: #444444;
    --geel-inkt: #6A5308; --geel-zacht: #FFFFFF; --groen: #10602E; --rood: #97292C; --amber: #6A5308; --rij: #FFFFFF;
    --schaduw: none; --schaduw-op: none; --schaduw-zwaar: none;
  }
  .wk-tabelvak, .wk-paneel, .wk-lijstvak, .wk-keten, .wk-melding { box-shadow: none; border: 1px solid var(--lijn); }
  body.wk-body { background: #fff; color: #000; }
  .wk-zij, .wk-knoppen, .wk-filterrij, .wk-bulk, .wk-tabs, .wk-melding, .wk-i { display: none !important; }
  .wk-metzij { display: block; }
  .wk-inhoud { max-width: none; padding: 0; }
  .wk-tweekolom, .wk-driekolom, .wk-document { grid-template-columns: minmax(0, 1fr); }
  .wk-rail { position: static; }
  .wk-tabelvak, .wk-lijstvak-tabel { overflow: visible; }
  .wk-tabelvak, .wk-paneel, .wk-lijstvak, .wk-keten { break-inside: avoid; }
  .wk-tabel thead { display: table-header-group; }
  .wk-tabel tr { break-inside: avoid; }
  .wk-tabel tbody tr:hover td { background: transparent; }
  .wk-totalen { position: static; margin: 12px 0 0; }
  /* De verhuisde componenten van stijl.ts: vlak weg, rand blijft, niets plakt
     meer vast en de themakiezer hoort niet op papier (D3b-2). */
  .wc-schuif, .wc-matrix-legenda,
  .wc-matrix th, .wc-matrix td, .wc-matrix tbody tr:nth-child(even) th, .wc-matrix tbody tr:nth-child(even) td {
    background: transparent !important; box-shadow: none !important;
  }
  .wc-schuif { break-inside: avoid; overflow: visible; }
  .wc-cel { background: transparent !important; box-shadow: none !important; border: 1px solid var(--lijn); color: var(--inkt); }
  .wc-matrix thead th, .wc-matrix-vast { position: static; }
  .wc-thema { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wk-body *, .wk-body *::before, .wk-body *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition: none !important; }
  .wk-melding-ok { animation: none; }
}

/* ─── 26. Losse bladen buiten de schil ───────────────────────────────────── */

/* Inloggen, het maillink-tussenblad, Meldingen, Voorstellen op de kennisbank en
   de Exact-koppelingspagina dragen geen zijbalk en zetten dus hun eigen `body`.
   Tot D3b-3 deden ze dat met een eigen `<style>`-blok met eigen hexwaarden
   (INLOGBLAD_STIJL, MELDINGENBLAD_STIJL, MAILLINKBLAD_STIJL,
   KENNISBIJDRAGEN_PAGINA_STIJL, OAUTH_KLAAR_STIJL in `delen/`); nu laden ze
   dezelfde stylesheet als /werk en staan hun bladregels hier, gescoopt op
   `body.wk-blad`, zodat de schil (`body.wk-body`) er niets van merkt.
   De maten zijn ongewijzigd overgenomen; alleen de kleuren komen nu uit §2. */

body.wk-blad {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font: 14px/1.55 Inter, "Segoe UI", system-ui, sans-serif;
}

/* Een blad met een kolom tekst: Meldingen en Voorstellen. */
body.wk-blad-kolom { max-width: 900px; margin: 0 auto; padding: 24px; }

/* Een kaart midden op een leeg vel: inloggen en het maillink-tussenblad. */
body.wk-blad-midden { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
body.wk-blad-midden > main {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--straal-groot);
  box-shadow: var(--schaduw);
  padding: 32px 36px;
  max-width: 26rem;
  width: 100%;
  text-align: center;
}
body.wk-blad-midden img { width: 56px; height: 56px; border-radius: var(--straal-groot); margin-bottom: 16px; }
body.wk-blad-midden h1 { font-size: 17.5px; margin: 0 0 8px; }
body.wk-blad-midden p { color: var(--zacht); font-size: 14px; }
body.wk-blad-midden form { margin-top: 16px; }
body.wk-blad-midden input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--lijn);
  border-radius: var(--straal-groot);
  font: inherit;
  margin-bottom: 10px;
}
/* De ene handeling op het blad is geel (§16, R47); dit is dezelfde vorm als
   `.wk-knop-primair`, maar over de volle breedte van de kaart, want er staat
   niets naast. */
body.wk-blad-midden button, body.wk-blad-midden button.knop {
  background: var(--geel); border: 1px solid var(--geel); color: #1D1D1D;
  border-radius: var(--straal); padding: 12px 28px;
  font: inherit; font-weight: 600; cursor: pointer; width: 100%;
}
body.wk-blad-midden button:hover { background: color-mix(in srgb, var(--geel) 90%, var(--inkt)); }
body.wk-blad-midden details { margin-top: 18px; text-align: left; }
body.wk-blad-midden summary { cursor: pointer; color: var(--zacht); font-size: 12.25px; }
body.wk-blad-midden p.melding { color: var(--inkt); font-weight: 600; }
/* De Microsoft-weg is een nevenhandeling: kader, geen vulling. */
body.wk-blad-midden a.msknop {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--vlak); color: var(--inkt); border: 1px solid var(--lijn);
  border-radius: var(--straal); padding: 12px 20px; font-size: 14px; font-weight: 600;
  text-decoration: none; margin-bottom: 6px;
}
body.wk-blad-midden a.msknop:hover { border-color: var(--zacht); background: var(--vlak-2); }
body.wk-blad-midden p.ofwel { color: var(--zacht); font-size: 12.25px; margin: 18px 0 8px; }

/* Voorstellen op de kennisbank: de opmerkingenregel onder een voorstel. */
/* `button.knop` is de knop van het bijdragenblad; hij hangt aan de vorm
   hierboven. Kader en geen vulling: er staat er één per voorstel, en een blad
   met tien gele knoppen heeft geen handeling meer maar tien (R47). */
body.wk-blad-kolom button.knop {
  background: var(--vlak); border: 1px solid var(--lijn); color: var(--inkt);
  border-radius: var(--straal); padding: 8px 16px; font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; align-self: flex-end;
}
body.wk-blad-kolom button.knop:hover { background: var(--vlak-2); border-color: var(--zacht); }

/* De pagina die Exact terugstuurt na het koppelen: één kolom lopende tekst. */
body.wk-blad-tekst { max-width: 34rem; margin: 4rem auto; line-height: 1.6; padding: 0 16px; }
body.wk-blad-tekst code { padding: .1rem .3rem; border-radius: var(--straal); background: var(--vlak-2); }

/* ─── 27. De gedeelde vormen van buiten de schil ─────────────────────────── */

/* Deze vormen stonden tot D3b-3 in `delen/kern.ts` als de string VORMSTIJL:
   een `<style>`-blok dat élke pagina meesleepte, met zijn eigen palet aan
   `--nw-*`-tokens erboven. Dat palet is weg (§2 is de enige waarheid) en de
   regels staan nu hier, met de tokens van §2.

   Waarom achteraan en niet bij hun soort: VORMSTIJL werd geladen ná
   werkplek.css en won dus bij gelijke specificiteit. Aan het eind van dit
   bestand is die volgorde precies zoals hij was — daarom verandert er niets
   aan wat op het scherm staat.

   Het zijn de vormen die de schermen van vóór de bouwstenen nog gebruiken
   (`.nw-kaart` 89×, `.nw-voetnoot` 55×, `.nw-link` 23×, de kale `table`), plus
   de balk-, keten- en sportvormen die `kern/vorm.ts` dynamisch opbouwt
   (`nw-toon-<toon>`, `nw-sport-<stand>`, `nw-k-<kleur>`) en die daarom niet
   als letterlijke klassenaam in de code te vinden zijn. Wat er niet meer bij
   staat: `.nw-wat` en `.nw-info` (nul gebruikers) en de papiertokens die §25
   al zet. */

.nw-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--zacht); margin: 0 0 5px; }
.nw-kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px; box-shadow: var(--schaduw); padding: 16px 18px; margin: 0 0 14px; }
.nw-kaart h2 { font-size: 14px; margin: 0 0 12px; }

/* de knoop-strip van Het bedrijf */
.nw-ketenstrip { display: flex; gap: 0; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; }
.nw-knoop { min-width: 132px; flex: 1; position: relative; padding: 12px 14px 12px 18px; border: 1px solid var(--lijn); background: var(--vlak); box-shadow: var(--schaduw); }
.nw-knoop:first-child { border-radius: 8px 0 0 8px; }
.nw-knoop:last-child { border-radius: 0 8px 8px 0; }
.nw-knoop + .nw-knoop { border-left: none; }
.nw-knoop::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grijs); }
.nw-knoop.nw-g::before { background: var(--groen); }
.nw-knoop.nw-a::before { background: var(--amber); }
.nw-knoop.nw-r::before { background: var(--rood); }
.nw-knoop .nw-stapnr { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--zacht); }
.nw-knoop .nw-cijfer { font-size: 21px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 2px 0 0; }
/* De marge is niet cosmetisch: zonder haar plakt het onderschrift tegen het
   cijfer en leest de tegel als "220van 1.564". Het onderschrift staat in de
   HTML direct achter het getal (geen spatie, want een spatie in de opmaak is
   niet te sturen), dus de ruimte hoort hier. Geldt voor beide vormen. */
.nw-knoop .nw-cijfer small { font-size: 12.25px; font-weight: 600; color: var(--zacht); margin-left: 5px; }
.nw-knoop .nw-knoopwat { font-size: 10.5px; color: var(--zacht); line-height: 1.35; margin-top: 1px; }

/* De cijferstrip staat in werkplek.css §10, bij de tellerregel (R32, 13-09). */

/* lijsten en pillen */
.nw-lk .nw-regel { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--lijn); font-size: 14px; }
.nw-lk .nw-regel:last-child { border-bottom: none; padding-bottom: 2px; }
.nw-lk .nw-regel:first-of-type { padding-top: 2px; }
.nw-lk .nw-hoofd { flex: 1; min-width: 0; }
.nw-lk .nw-hoofd .nw-b { font-weight: 600; }
.nw-lk .nw-hoofd .nw-k { color: var(--zacht); font-size: 12.25px; }
.nw-lk .nw-achter { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--zacht); }
/* Een nummer in een regel is een link, maar leest als tekst: dezelfde inkt,
   geen blauw web-anker, en pas onder de muis (of bij toetsenbordfocus) een
   dunne streep eronder. Zelfde gedrag als de projectnaam op Projecten. Een
   lijst waarin de helft van de woorden blauw oplicht leest niet meer als een
   lijst -- het doel is doorklikken, niet opvallen. */
.nw-link { color: inherit; text-decoration: none; }
.nw-link:hover, .nw-link:focus-visible { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.nw-voetnoot { font-size: 12.25px; color: var(--zacht); margin: 10px 2px 0; line-height: 1.5; }
/* De CAS-stilstandsmelding. Bewust opvallender dan een voetnoot: een scherm vol
   cijfers van vorige week met een klein regeltje eronder is precies het
   stilzwijgen dat hier niet mag. Stond eerst alleen op Logistiek, met een eigen
   klasse; nu één vorm op alle schermen met CAS-cijfers. */
.nw-casstil {
  background: var(--amber-zacht); color: var(--amber);
  border: 1px solid var(--amber); border-radius: 8px;
  padding: 10px 14px; font-size: 14px; line-height: 1.5; margin: 0 0 14px;
}
/* .nw-knopje en .nw-vol staan in werkplek.css §16, bij de knop zelf (R47). */

/* ERP-werkbalk en kolomkoppen */
.nw-werkbalk { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 0 0 10px; }
.nw-fchip { border: 1px solid var(--lijn); background: var(--vlak); border-radius: 8px; padding: 5px 11px; font-size: 12.25px; color: var(--zacht); white-space: nowrap; text-decoration: none; cursor: pointer; }
.nw-fchip b { color: var(--inkt); font-weight: 650; font-variant-numeric: tabular-nums; }
.nw-fchip.nw-aan { border-color: var(--balk); color: var(--inkt); font-weight: 600; box-shadow: inset 0 -2px 0 var(--geel); }

/* tabbladen bovenaan: dezelfde chips als de werkbalk, met een lijn eronder die
   ze aan de inhoud vastzet — anders zweven vier losse chips boven de kaarten
   en leest niemand ze als tabbladen. */
.nw-tabbalk { margin: 0 0 14px; border-bottom: 1px solid var(--lijn); }
.nw-tabbalk .nw-werkbalk { margin: 0 0 8px; }

.nw-kolomkop {
  display: grid; grid-template-columns: minmax(180px, 1.1fr) 1fr 64px 110px; gap: 12px;
  padding: 0 15px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--zacht);
}
.nw-kolomkop .nw-r2 { text-align: right; }
@media (max-width: 680px) { .nw-kolomkop { display: none; } }

/* de dunne voortgangsbalk van een project */
.nw-ketenbalk { display: flex; height: 8px; border-radius: 6px; overflow: hidden; flex: 1; min-width: 110px; background: var(--grond); }
.nw-ketenbalk span { display: block; }
.nw-k-g { background: var(--groen); }
.nw-k-a { background: var(--amber); }
.nw-k-r { background: var(--rood); }
.nw-k-x { background: var(--grijs); opacity: .4; }

/* de ontworpen lege staat */
.nw-leegscherm { text-align: center; padding: 42px 24px; }
.nw-leegscherm .nw-ikoon { width: 50px; height: 50px; border-radius: 8px; background: var(--geel-zacht); color: var(--geel-inkt); display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 800; margin: 0 auto 13px; }
.nw-leegscherm .nw-groot { font-size: 17.5px; font-weight: 650; margin-bottom: 6px; }
.nw-leegscherm p { color: var(--zacht); font-size: 14px; max-width: 44ch; margin: 0 auto; }

/* De tabel van `tabel()` in kern/vorm.ts: een kale <table> zonder klasse, en
   daarmee de grootste eilandopmaak die er nog was. Ruim veertig schermen
   tekenen hun lijst zo — kennisbank, instellingen, HRM, logistiek, financieel —
   en die tabel week op élke maat van CAS af: een vette kopregel in grijs,
   celvulling 9/12 in plaats van 10,5/14, hairlines van 1 px in slate-300 in
   plaats van 1,25 in slate-200, geen zebra, en een rij van 37 px tegen CAS'
   39,73. Naast een `.wk-tabel` op hetzelfde scherm zag je twee tabellen.
   Vanaf 17-09 draagt de kale tabel dezelfde maten als §12; `.wk-tabel` blijft
   de naam voor wie hem expliciet zet. */
.nw-tabelhouder { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th { text-align: left; font-weight: 400; color: var(--inkt); padding: 10.5px 14px; border-bottom: 1.25px solid var(--lijn-zacht); white-space: nowrap; position: sticky; top: 0; background: var(--vlak); }
td { padding: 10.5px 14px; border-bottom: 1.25px solid var(--lijn-zacht); vertical-align: middle; }
tbody tr:nth-child(even) { background: var(--zebra); }
tr:last-child td { border-bottom: 0; }
th.nw-breed { width: 40%; }
/* CAS kleurt een rij onder de muis niet. Wij wel: zie de uitzonderingenlijst —
   onze rijen zijn breder en dan raak je halverwege de regel kwijt. */
tbody tr:hover td { background: var(--rij); }

.nw-bedrag { font-variant-numeric: tabular-nums; }
.nw-bedrag.nw-negatief { color: var(--rood); }
/* Voor bedragen waar mínder juist goed is (onder de calculatie): zie
   bedragOmgekeerd() in src/werk/financieelblokken.ts. */
.nw-bedrag.nw-goed { color: var(--groen); }
.nw-leeg { color: var(--zacht); }
.nw-onvolledig { color: var(--amber); font-weight: 600; margin-left: 2px; cursor: help; }
.nw-datum, td.nw-datum { white-space: nowrap; }

.nw-balk { position: relative; display: inline-block; width: 92px; height: 20px; border-radius: 6px; background: var(--grond); overflow: hidden; vertical-align: middle; }
.nw-balk-vulling { position: absolute; inset: 0 auto 0 0; }
.nw-toon-goed .nw-balk-vulling { background: var(--groen); }
.nw-toon-let .nw-balk-vulling { background: var(--amber); }
.nw-toon-kritiek .nw-balk-vulling { background: var(--rood); }
.nw-balk-tekst { position: relative; display: block; text-align: center; line-height: 20px; font-size: 12.25px; font-variant-numeric: tabular-nums; color: var(--inkt); }
.nw-balk-van { color: var(--zacht); }
.nw-balk.nw-onbekend { background: repeating-linear-gradient(135deg, var(--grond), var(--grond) 4px, var(--arcering) 4px, var(--arcering) 8px); }
.nw-balk-vraag { display: block; text-align: center; line-height: 20px; font-size: 12.25px; color: var(--zacht); font-weight: 700; }

.nw-keten { display: inline-flex; gap: 2px; }
.nw-sport { width: 30px; height: 20px; border-radius: 6px; display: inline-block; position: relative; cursor: help; }
.nw-sport-naam { position: absolute; inset: 0; font-size: 10.5px; line-height: 20px; text-align: center; overflow: hidden; color: var(--vlak); }
.nw-sport-klaar { background: var(--groen); }
.nw-sport-bezig { background: var(--amber); }
.nw-sport-nog-niet { background: var(--grond); }
.nw-sport-nog-niet .nw-sport-naam { color: var(--zacht); }
.nw-sport-onbekend { background: repeating-linear-gradient(135deg, var(--grond), var(--grond) 4px, var(--arcering) 4px, var(--arcering) 8px); }
.nw-sport-onbekend .nw-sport-naam { color: var(--zacht); }
.nw-sport-niet-van-toepassing { background: transparent; border: 1px dashed var(--lijn); }
.nw-sport-niet-van-toepassing .nw-sport-naam { color: var(--zacht); }

.nw-leegte { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px; padding: 40px 22px; text-align: center; }
.nw-leegte-kop { margin: 0; font-size: 17.5px; font-weight: 600; }
.nw-leegte-erbij { margin: 6px 0 0; color: var(--zacht); font-size: 14px; }

.nw-bovengrens { background: var(--amber-zacht); border: 1px solid var(--amber); border-radius: 8px; padding: 10px 14px; font-size: 14px; margin: 0 0 14px; }
.nw-bovengrens-metbladen { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; }
.nw-bovengrens-nav, .nw-bovengrens-kiezer, .nw-bovengrens-kiezer label { display: inline-flex; align-items: center; gap: 7px; }
.nw-bovengrens-nav { flex-wrap: wrap; justify-content: flex-end; }
.nw-bovengrens-kiezer { margin: 0 0 0 6px; }
.nw-bovengrens-kiezer select { font: inherit; color: var(--inkt); background: var(--vlak); border: 1px solid var(--lijn); border-radius: 6px; padding: 4px 6px; }

/* ═══ op papier ═══════════════════════════════════════════════════════════
   Wat hier gebeurt: de bediening eraf, niets halverwege afbreken. De tokens
   gaan in §25 al naar hun lichte papierwaarden — die regel staat er één keer
   en gold ook vóór D3b-3 voor deze vormen, want de oude namen wezen naar
   dezelfde tokens.

   Twee dingen bewust níét: geen logo als afbeelding (Chrome print
   achtergrondplaatjes standaard niet, en een `<img>` die alleen op papier
   nodig is haalt de browser wél bij elke paginaweergave op), en geen
   `print-color-adjust: exact` — dat zou de gekleurde vlakken forceren en een
   uitdraai in zwart-wit onleesbaar maken. De tegels houden hun rand, niet hun
   vulling. */
@media print {
  /* Alles wat op het scherm zijwaarts schuift, loopt op papier van de bladzijde
     af — daar is geen schuifbalk. Dus laten afbreken in plaats van clippen. */
  .nw-ketenstrip { flex-wrap: wrap; overflow: visible; }
  .nw-tabelhouder { overflow: visible; }
  /* Niets halverwege afbreken: een kaart of een rij hoort heel te blijven. */
  .nw-kaart, .nw-tegel, .nw-leegte { break-inside: avoid; box-shadow: none; border: 1px solid #999; }
  tr, li { break-inside: avoid; }
  /* Loopt een tabel door naar de volgende bladzijde, dan gaan de koppen mee. */
  thead { display: table-header-group; }
  h1, h2, h3 { break-after: avoid; }
}
/* Eén papiermarge voor de hele tool. Stond in VORMSTIJL en gold daardoor ook
   voor een Ctrl+P op een /werk-scherm; dat blijft zo. De afdrukpagina's
   (werk/afdruk) herhalen deze regel in AFDRUK_EIGEN, want daar staat hun
   eigen `@page { size … }` ervóór en moet deze marge er ná komen — anders
   verandert de marge van A4, A3 en het label. */
@page { margin: 14mm; }

/* ---------------------------------------------------------------------------
   Buitenplanning (22-09). Wie-waar-wanneer: de TomsPlanner-kopie.

   Waarom hier en niet in een eigen bestand: er is één stylesheet sinds D0, en
   die regel geldt ook voor een scherm dat er nieuw bij komt. Het weekraster
   zelf (`.wt-*`) staat er al en wordt hier niet overgeschreven — deze regels
   gaan alleen over de balk zelf, de randgrepen en de drie beelden.

   De balkkleur is een **gegeven** en geen opmaak: Ivana koos hem, hij komt uit
   de export, en er zijn er achtenzestig. Hij gaat daarom als variabele mee op
   de balk zelf (`style="--kleur:#bcca26;--letter:#111827"`) en wordt hier in
   een regel gebruikt. Zo blijft de vorm hier en de waarde daar, hoeft een
   nieuwe kleur van de planner niet te wachten op een uitrol, en schrijft het
   scherm geen eigen `<style>`-tag - dat laatste is regel 5 van
   docs/ARCHITECTUUR.md en het zou bovendien buiten elke ontwerpmeting vallen.
   --------------------------------------------------------------------------- */
.wt-bp-seg{position:relative;overflow:visible;font-weight:800;cursor:pointer;background:var(--kleur,var(--vlak-2));border-color:var(--kleur,var(--grijs));color:var(--letter,var(--inkt))}
.wt-bp-bord.wt-sleept .wt-bp-seg{cursor:grabbing}
/* De tekst staat in het eerste segment maar is zo breed als de hele balk: een
   weekkolom is 34 px, en "Boek" zegt niets over Boekenstijn. `--weken` komt van
   de server en is precies het aantal kolommen dat deze balk beslaat, dus de
   tekst loopt nooit buiten zijn eigen balk. TomsPlanner doet het net zo.
   `absolute` en niet `relative`: een tekst van achtentwintig weken breed in de
   stroom duwt de weekkolom mee open en dan is het raster geen raster meer. */
.wt-bp-tekst{position:absolute;left:3px;top:0;z-index:1;display:block;max-width:calc(var(--weken,1) * 34px - 8px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;line-height:14px}
/* Een halve dag aan het begin of het eind: een gestippelde kant, zodat wo-vr
   niet oogt als een hele week. Geen schuine snit met `clip-path`, want die
   knipt ook de tekst af die over de balk heen loopt. */
.wt-bp-half-begin{border-left:3px dotted currentColor}
.wt-bp-half-eind{border-right:3px dotted currentColor}
/* De randgreep is 5 px breed en valt binnen de balk: buiten de balk zou hij
   over de buurcel liggen en die onklikbaar maken. */
.wt-bp-rand{position:absolute;top:0;bottom:0;width:5px;cursor:ew-resize;background:rgba(0,0,0,.18)}
.wt-bp-rand-links{left:0}
.wt-bp-rand-rechts{right:0}
/* Bezette tijd zonder project staat gestreept: dan is in één blik te zien
   welke weken wél aan een project hangen. */
.wt-bp-s-nietbeschikbaar,.wt-bp-s-nietingehuurd{background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.12) 0 3px,transparent 3px 6px)}
.wt-bp-voorraad th.wt-vast{border-left-color:var(--geel)}
.wt-bp-voorraad th,.wt-bp-voorraad td{position:sticky;top:26px;z-index:2}
.wt-bp-groep th.wt-vast{background:var(--vlak-2);font-size: 10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--zacht)}
.wt-bp-let{color:var(--rood)}
.wt-bp-legenda{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0 0;font-size: 10.5px;color:var(--zacht)}
.wt-bp-legenda span{display:inline-flex;align-items:center;gap:4px}
.wt-bp-legenda-uitleg{color:var(--zacht)}
.wt-bp-legenda i{display:inline-block;width:18px;height:10px;border:1px solid var(--lijn);border-radius:var(--straal)}
.wt-bp-bladeren,.wt-bp-weekwissel{display:flex;gap:14px;align-items:center;margin:8px 0;font-size: 12.25px}
.wt-bp-weekwissel b{font-size: 14px}
.wt-bp-vlag{display:inline-block;margin:0 4px 4px 0;padding:1px 6px;border-radius:var(--straal);font-size: 10.5px;font-weight:800;text-decoration:none;background:var(--kleur,var(--vlak-2));color:var(--letter,var(--inkt))}
.wt-bp-legenda i{background:var(--kleur,var(--vlak-2))}
.wt-bp-kandidaten{flex-basis:100%;color:var(--zacht);font-size: 10.5px}
.wt-bp-weeklijst{margin:0;padding:0;list-style:none;font-size: 12.25px}
.wt-bp-weeklijst li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--lijn)}
.wt-bp-weeklijst li b{min-width:190px}
.wt-bp-weeklijst li>span{color:var(--zacht);font-size: 10.5px}
.wt-bp-weekvlaggen{flex:1 1 auto;color:var(--inkt)}
.wt-bp-vrij{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none;font-size: 12.25px}
.wt-bp-vrij span{color:var(--zacht)}
.wt-bp-feiten{display:grid;grid-template-columns:110px 1fr;gap:2px 10px;margin:0 0 10px;font-size: 12.25px}
.wt-bp-feiten dt{color:var(--zacht)}
.wt-bp-feiten dd,.wt-bp-vorm{margin:0}
.wt-bp-vorm{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:0 0 8px;font-size: 12.25px}
.wt-bp-vorm label{color:var(--zacht)}
.wt-bp-weg{margin-bottom:0}

/* CAS' modal "Offerte aanmaken" (verkoopcalculatie/index.php:1450-1517): één smalle kolom, vijf velden, twee knoppen onderaan. */
.vow-mo { border: 1px solid var(--lijn); border-radius: 6px; padding: 0; max-width: 460px; width: 92vw; background: var(--vlak); color: inherit; }
.vow-mo-vorm, .vow-mo-veld, .vow-mo-voet { display: flex; flex-direction: column; gap: 10px; padding: 18px; font-size: 12.25px; }
.vow-mo-veld { gap: 3px; padding: 0; }
.vow-mo-voet { flex-direction: row; justify-content: flex-end; gap: 8px; padding: 0; } .vow-mo::backdrop { background: rgb(0 0 0 / .35); }
.wkl-vlag { color: var(--geel-inkt); }

/* W21: de weekkalender van Uren (CAS uren/kalender/index.php r.211-286). Kleur per soort volgt CAS' legenda (afdruk 33) met de dichtstbijzijnde tokens; paars (buitendienst) heeft het palet niet, dat wordt grijs. */
.wk-kal-balk { display: flex; flex-wrap: wrap; gap: var(--r2); align-items: center; margin: 0 0 var(--r2); font-size: 12.25px; }
.wk-kal { display: grid; grid-template-columns: repeat(7, minmax(132px, 1fr)); overflow-x: auto; margin: 0 0 var(--r5); border: 1px solid var(--lijn); border-radius: var(--straal-groot); background: var(--vlak); font-size: 12.25px; }
.wk-kal-dag { display: flex; flex-direction: column; gap: var(--r1); min-height: 180px; padding: var(--r2); border-left: 1px solid var(--lijn-zacht); } .wk-kal-dag:first-child { border-left: 0; }
.wk-kal-vandaag { background: var(--geel-zacht); } .wk-kal-plus { margin-top: auto; display: grid; gap: var(--r1); }
.wk-kal-kop { display: flex; justify-content: space-between; gap: var(--r1); font-weight: 600; color: var(--kop); } .wk-kal-dag small { display: block; color: var(--zacht); font-weight: 400; }
.wk-kal-regel { display: block; padding: var(--r1) var(--r2); border-left: 3px solid var(--k, var(--lijn)); border-radius: var(--straal); background: var(--kz, var(--vlak-2)); color: var(--inkt); }
.wk-kal-fabriek { --k: var(--groen); --kz: var(--groen-zacht); } .wk-kal-buitendienst { --k: var(--grijs); --kz: var(--grijs-zacht); } .wk-kal-kantoor { --k: var(--geel); --kz: var(--geel-zacht); }
.wk-kal-logistiek { --k: var(--bron-map); --kz: var(--bron-map-zacht); } .wk-kal-storing { --k: var(--rood); --kz: var(--rood-zacht); } .wk-kal-verlof { --k: var(--bron-cas); --kz: var(--bron-cas-zacht); }
.wk-uren-raam { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: var(--r3); align-items: start; } .wk-urenpalet { display: grid; gap: var(--r1); font-size: 12.25px; } .wk-urenpalet button, .wk-urensoorten label, .wk-kal-regel[data-bewerk] { width: 100%; font: inherit; text-align: left; cursor: pointer; border-top: 0; border-right: 0; border-bottom: 0; }   /* U1–U3 (23-09): palet "Klik of slepen" links en het urenvenster als zijpaneel rechts, zoals het levende CAS */
.wk-urenpalet [aria-pressed="true"], .wk-urensoorten label:has(input:checked), .wk-kal-voorlopig, .wk-kal-nieuw, .wk-kal-regel[data-bewerk]:hover, .wk-kal-doel { outline: 2px solid var(--k, var(--lijn)); outline-offset: 1px; } dialog.wk-urenvenster { margin: 0 0 0 auto; width: min(460px, 100vw); height: 100vh; max-height: 100vh; border-radius: 0; overflow-y: auto; } dialog.wk-urenvenster::backdrop { background: rgba(29, 29, 29, .12); backdrop-filter: none; }   /* licht scherm zonder vervaging: het voorlopige blokje blijft zichtbaar */
.wk-kal-mobiel { display: none; }   /* U4–U5 (23-09): op de telefoon één dag per scherm met ‹ Vandaag › en vegen, en het urenvenster schermvullend, zoals CAS mobiel (kalender/index.php r.76-92) */
@media (max-width: 680px) { .wk-uren-raam, .wk-kal { grid-template-columns: minmax(0, 1fr); } .wk-kal { overflow-x: visible; } .wk-kal-dag { border-left: 0; border-top: 1px solid var(--lijn-zacht); } .wk-uren-dag .wk-kal-dag:not([data-actief]) { display: none; } .wk-uren-dag .wk-kal-dag { min-height: 50vh; border-top: 0; } .wk-uren-dag .wk-kal-mobiel { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: var(--r2); margin: 0 0 var(--r2); } .wk-urenpalet { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wk-urenpalet small { grid-column: 1 / -1; } .wk-urenpalet button, .wk-urensoorten label, .wk-kal-regel[data-bewerk] { min-height: 44px; } dialog.wk-urenvenster { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; } .wk-urenvenster .wk-knoppen { position: sticky; bottom: 0; padding: var(--r2) 0; background: var(--vlak); } .wk-urenvenster .wk-knoppen .wk-knop { flex: 1; } }