/* De stijlwaarden van het factuurdashboard, en de omhulling die eraan hangt.
 *
 * Elke waarde hieronder komt uit `design-handoff/Stijlwaarden.dc.html`. Dat
 * bestand is de enige bron voor kleur, letter en maat; §8 van de
 * ontwerpopdracht is daarvoor achterhaald. Achter elke variabele staat waar in
 * dat bestand hij vandaan komt, zodat een volgende lezer het kan nakijken
 * zonder het hele artboard door te spitten.
 *
 * De vorm van de zijbalk zelf — breedte, marges, hoogtes — komt uit
 * `design-handoff/Facturen en Beheer.dc.html`. Die getallen staan verderop bij
 * de regels waar ze horen, met een verwijzing erbij; ze zijn bewust géén
 * variabele, want ze gelden op één plek en zeggen niets over de rest van het
 * systeem.
 *
 * Wat hier NIET in staat: de acht `<style>`-blokken van de losse schermen. Die
 * blijven waar ze zijn tot het scherm zelf aan de beurt is.
 */

/* ===================================================================== */
/* De letter, van onze eigen server                                      */
/* ===================================================================== */

/* Besluit 09-09-2026 (pakket 102). Tot vandaag haalde `base.html` Instrument
 * Sans bij Google Fonts: een extern verzoek bij elke paginalading, en op een
 * trage of afgesloten verbinding stond het scherm er even in Helvetica.
 *
 * Eén variabel bestand dekt 400, 500 én 600 — de drie gewichten die
 * Stijlwaarden gebruikt. Drie losse gewichten zouden samen 51 kB zijn; dit is
 * 30 kB. De bestanden komen uit `@fontsource-variable/instrument-sans` 5.3.0,
 * Google Fonts' eigen bestand opnieuw verpakt: dezelfde letter, niet een
 * gelijkende. De licentie (SIL OFL 1.1) staat ernaast in
 * `static/fonts/LICENSE-instrument-sans.txt` en moet daar blijven staan.
 *
 * De naam is "Instrument Sans" en niet de naam die fontsource gebruikt, zodat
 * `--letter` in `:root` ongewijzigd blijft.
 *
 * De twee `unicode-range`-regels zijn die van Google Fonts, letterlijk. Zonder
 * die regels haalt de browser bij elke é allebei de bestanden op. */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;   /* het bereik van het variabele bestand */
  font-display: swap;
  src: url("/static/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  /* latin */
  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: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2");
  /* latin-ext */
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  /* ---- Vlakken ------------------------------------------------------- */
  /* Stijlwaarden › Interface, de vier vlakken met hun onderschrift. */
  --bureaublad:      #eae7e1;  /* "bureaublad, achter de factuur" */
  --vlak:            #f6f5f2;  /* "invoerkolom, balk"             */
  --zijbalk:         #f0eee8;  /* "zijbalk"                       */
  --papier:          #ffffff;  /* "papier, velden, actief menu-item" */

  /* ---- Tekst en lijnen ----------------------------------------------- */
  /* Stijlwaarden › Interface, de zes stalen met hun onderschrift. De grijzen
   * zijn warm getint; de afwijking van §8 staat in het ontwerp zelf uitgelegd. */
  --tekst:           #1c1c19;  /* "tekst"                  */
  --bijzaak:         #5c5b54;  /* "bijzaak · 7,0:1"        */
  /* "labels · 4,7:1". Die 4,7 is gemeten tegen #f6f5f2, niet tegen wit — op wit
   * haalt deze kleur 5,14:1. Dat maakt uit: op de zijbalk (#f0eee8) komt hij op
   * 4,43:1 en op het bureaublad (#eae7e1) op 4,16:1, en dan zakt hij door de
   * norm. `--label` mag dus alleen op --papier en op --vlak. Staat er een
   * lichter grijs op een warmer vlak nodig, neem dan --bijzaak. */
  --label:           #6f6e63;
  --veldrand:        #cec9be;  /* "veldranden"             */
  --lijn:            #dcd9d1;  /* "lijnen"                 */
  --breuk:           #b9b3a6;  /* "breuk tussen delen"     */

  /* ---- Groen --------------------------------------------------------- */
  /* Stijlwaarden › Kleur van het merk (Trust) en de contrasttabel eronder. */
  --accent:          #9ACD32;  /* merkgroen; vlak en markering, nooit letter  */
  --accent-licht:    #E8F4C4;  /* lichte variant, alleen Trust heeft er een   */
  /* De donkere tekst op de groene knop. De contrasttabel van Stijlwaarden zet
   * er 11,1:1 bij; nagerekend is dat de waarde van ZWART op #9ACD32 (11,15:1),
   * niet van dit staal — #22300a haalt 7,46:1. Ruim boven de 3:1 die een knop
   * nodig heeft, dus de conclusie van het ontwerp klopt, alleen het getal niet. */
  --op-accent:       #22300a;
  /* "dit is het knopgroen". Het ontwerp zegt 5,4:1 voor wit erop; nagerekend
   * 4,70:1 — nog steeds boven de 4,5 die gewone tekst nodig heeft. */
  --knop:            #45821E;
  --knop-rand:       #376A18;  /* rand van de knop, en zijn hover             */
  --link:            #4F6B14;  /* tekst en link op wit · 6,1:1                */
  --link-hover:      #2C3D08;  /* Stijlwaarden › helmet, a:hover              */
  --knop-tweede-hover: #efeee9;/* Stijlwaarden › Ruimte, "Markeer als verstuurd" */
  --rand-uit:        #ded9cd;  /* Stijlwaarden › Ruimte, de dode knop         */

  /* ---- Meldingen ------------------------------------------------------ */
  /* Stijlwaarden › Drie soorten meldingen. */
  --fout:            #B3261E;  /* het teken, en de rand van een leeg verplicht veld */
  --fout-tekst:      #7d1a15;
  --fout-vlak:       #fdf5f4;
  --fout-rand:       #f0d4d1;
  --letop:           #E0A200;  /* de streep links van een let-op-melding */

  /* ---- De andere twee huisstijlen ------------------------------------- */
  /* Stijlwaarden › Kleur van het merk. Credo en Hero Hive hebben geen lichte
   * variant; op hun facturen blijft de strook grijs. */
  --merk-credo:      #901925;
  --merk-herohive:   #F5B733;

  /* ---- Letters -------------------------------------------------------- */
  /* Stijlwaarden › Letters — Instrument Sans, gewicht 400 · 500 · 600. */
  --letter: "Instrument Sans", -apple-system, Helvetica, Arial, sans-serif;

  --maat-titel:      22px;  /* paginatitel, en het bedrag           */
  --maat-waarde:     15px;  /* waarde in de invoerkolom             */
  --maat-tekst:      14px;  /* gewone tekst, menu, knoppen          */
  --maat-bijzaak:    13px;  /* bestandsnaam, merk en termijn        */
  --maat-label:      12px;  /* label in de gutter, kolomkop, herkomst */
  --maat-teken:      11px;  /* het ✕ in een melding, en het woordmerk */
  --maat-pijl:       10px;  /* het ▼ in een keuzelijst              */

  --gewicht-gewoon:  400;
  --gewicht-kop:     500;   /* paginatitel, knoplabel               */
  --gewicht-nadruk:  600;   /* factuurnummer en bedrag — zie de notitie onder */

  --regel-strak:     1;     /* knoppen en velden op vaste hoogte    */
  --regel-kop:       1.3;   /* 22px-koppen                          */
  --regel-compact:   1.5;
  --regel-tekst:     1.6;
  --regel-label:     1.7;   /* het gespatieerde kapitaal            */
  --regel-ruim:      1.8;

  /* Kapitaal met spatiëring is er precies twee: het label in de gutter en de
   * kolomkop op de factuur. Alle andere labels staan in zinsvorm. */
  --letterafstand-label: .08em;

  /* ---- Ruimte --------------------------------------------------------- */
  /* Stijlwaarden › Ruimte, randen, velden — de zeven blokjes: 4 8 12 16 24 36 56.
   * De namen komen uit §8 ("tussen secties 24, binnen een blok 12, tussen label
   * en veld 8"); alleen de waarden zijn door Stijlwaarden herzien. */
  --ruimte-kier:        4px;
  --ruimte-veld:        8px;
  --ruimte-blok:       12px;
  --ruimte-groep:      16px;
  --ruimte-sectie:     24px;
  --ruimte-marge:      36px;
  --ruimte-marge-ruim: 56px;

  /* ---- Randen --------------------------------------------------------- */
  /* "2px afronding · 1px randen · geen schaduw, behalve onder het papier" */
  --rand-dikte:  1px;
  --afronding:   2px;
  /* De streep links van een melding: `box-shadow:inset 3px 0 0 #E0A200`.
   * Het actieve menu-item gebruikt dezelfde dikte, in accentgroen. */
  --streep:      3px;
  --veldhoogte: 38px;  /* Stijlwaarden › Ruimte, de vier veldtoestanden */

  /* De enige schaduw in het systeem, onder het papier van de factuur.
   * Stijlwaarden noemt hem ("geen schaduw, behalve onder het papier ... die
   * maakt van de factuur een voorwerp op een bureaublad") maar geeft geen
   * waarde; die komt daarom uit `Werkruimte v2.dc.html` r. 2047. Dezelfde
   * afspraak als bij de focusring hieronder: waar Stijlwaarden de vorm noemt
   * en het getal niet, levert de handoff het getal. */
  --papier-schaduw: 0 1px 1px rgba(40, 38, 30, .10),
                    0 14px 34px rgba(40, 38, 30, .10);

  /* De sluier onder een venster dat eerst beantwoord moet worden. Stijlwaarden
   * kent geen venster en dus geen sluier; de waarde komt daarom uit
   * `Werkruimte v2.dc.html` r. 762, waar alle vier de vensters dezelfde
   * gebruiken. Zelfde afspraak als bij `--papier-schaduw` hierboven: noemt
   * Stijlwaarden de vorm wel en het getal niet, dan levert de handoff het
   * getal. Dezelfde warme zwart-tint als die schaduw. */
  --sluier: rgba(40, 38, 30, .34);

  /* ---- Focus ---------------------------------------------------------- */
  /* De kleur komt uit Stijlwaarden (#4F6B14, 6,1:1 op wit). De vorm — 2px,
   * 1px eromheen — komt uit `Facturen en Beheer.dc.html`, waar elk bedienbaar
   * element `style-focus="outline:2px solid #4F6B14;outline-offset:1px"`
   * draagt (25×; over de hele handoff 70×). Stijlwaarden zelf kent geen
   * focustoestand.
   *
   * LET OP: de helmet van de prototypes zet `input:focus{outline:none}`. Dat is
   * een prototype-reset en gaat lijnrecht in tegen de vormregel "focusring op
   * elk veld en elke knop". Niet overnemen. */
  --focus-dikte:   2px;
  --focus-afstand: 1px;
  --focus-kleur:   var(--link);
}

/* ===================================================================== */
/* Grondslag                                                             */
/* ===================================================================== */

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

body {
  margin: 0;
  background: var(--bureaublad);
  font-family: var(--letter);
  font-size: var(--maat-tekst);
  line-height: var(--regel-tekst);
  color: var(--tekst);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

input, button, textarea, select { font-family: inherit; }

/* Eén focusring voor het hele systeem, op alles wat je met het toetsenbord
 * kunt bereiken. `:focus-visible` zodat een muisklik geen ring achterlaat;
 * `:focus` erbij voor browsers die het nog niet kennen. */
:focus-visible {
  outline: var(--focus-dikte) solid var(--focus-kleur);
  outline-offset: var(--focus-afstand);
}

/* Bedragen: rechts uitgelijnd, tabelcijfers zodat de komma's onder elkaar
 * staan. Stijlwaarden toont dat naast elkaar — mét en zonder. */
.bedrag {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Het factuurnummer en het bedrag zijn de enige twee plekken waar Stijlwaarden
 * gewicht 600 gebruikt: één keer op "2026105 · € 20.500,43" (22px) en één keer
 * op het totaal "€ 20.500,43" (14px). Beide keren op cijfers met tabelcijfers.
 * 600 is dus geen vergissing en ook geen tweede kopgewicht — het is het
 * gewicht waarmee een getal zich losmaakt van de tekst eromheen. */
.getal-nadruk {
  font-weight: var(--gewicht-nadruk);
  font-variant-numeric: tabular-nums;
}

/* Het gespatieerde kapitaal. Er zijn er precies twee in het hele systeem: dit
 * label, en de kolomkop op de factuur. */
.gutterlabel {
  font-weight: var(--gewicht-gewoon);
  font-size: var(--maat-label);
  line-height: var(--regel-label);
  letter-spacing: var(--letterafstand-label);
  text-transform: uppercase;
  color: var(--label);
}

/* ===================================================================== */
/* De omhulling: zijbalk links, werkvlak rechts                          */
/* Vorm uit `Facturen en Beheer.dc.html` r. 23-40.                       */
/* ===================================================================== */

/* De acht schermen zetten in hun eigen `<style>`-blok nog `body { max-width:
 * 980px }` of `body { max-width: 1240px; margin: 0 auto; padding: 24px }` —
 * bedoeld voor een pagina zonder zijbalk. Die blokken blijven ongewijzigd tot
 * het scherm zelf herstyled wordt; zolang zou de omhulling in hun kolom
 * geperst worden. Een klasse erbij is genoeg om er overheen te gaan
 * (specificiteit 0,1,1 tegen 0,0,1), ook vanuit hun media queries.
 *
 * Alléén de maatvoering wordt teruggezet. Hun kleur laten we staan: `.omhulling`
 * dekt het hele venster af, dus wat eronder ligt is toch niet te zien. */
body.met-omhulling {
  max-width: none;
  margin: 0;
  padding: 0;
}

.omhulling {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
  background: var(--bureaublad);
}

.zijbalk {
  width: 212px;          /* Facturen en Beheer.dc.html r. 25 */
  flex: none;
  background: var(--zijbalk);
  border-right: var(--rand-dikte) solid var(--lijn);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.zijbalk__merk {
  display: grid;
  gap: var(--ruimte-groep);
  padding: 22px 20px 26px;   /* Facturen en Beheer.dc.html r. 26 */
}

.zijbalk__logo {
  height: 44px;              /* Facturen en Beheer.dc.html r. 27 */
  width: auto;
  display: block;
}

/* Het woordmerk onder het logo. In het prototype staat het op 11px met .05em;
 * die spatiëring komt in Stijlwaarden nergens voor, dus hier staat de enige
 * spatiëring die er wél in staat (.08em). De afwijking is gemeld. */
.zijbalk__woordmerk {
  font-weight: var(--gewicht-kop);
  font-size: var(--maat-teken);
  line-height: var(--regel-strak);
  letter-spacing: var(--letterafstand-label);
  text-transform: uppercase;
  color: var(--link);
  white-space: nowrap;
}

.zijbalk__menu {
  display: flex;
  flex-direction: column;
}

/* Een menu-item is een link, geen span — anders is het niet met het toetsenbord
 * te bereiken en heeft de focusring niets om op te staan. */
.menu-item {
  padding: 9px 20px;         /* Facturen en Beheer.dc.html r. 852 */
  font-weight: var(--gewicht-gewoon);
  font-size: var(--maat-tekst);
  line-height: var(--regel-compact);
  color: var(--bijzaak);
  background: transparent;
  border-left: var(--streep) solid transparent;
  text-decoration: none;
  cursor: pointer;
}

.menu-item:hover {
  color: var(--tekst);
  text-decoration: none;
}

.menu-item--actief {
  font-weight: var(--gewicht-nadruk);
  color: var(--tekst);
  background: var(--papier);
  border-left-color: var(--accent);
}

/* De focusring moet binnen de zijbalk blijven staan, anders valt hij half weg
 * achter de rand van het werkvlak. */
.menu-item:focus-visible {
  outline-offset: calc(var(--focus-afstand) * -2);
}

.zijbalk__wie {
  margin-top: auto;
  padding: 20px;             /* Facturen en Beheer.dc.html r. 35 */
  border-top: var(--rand-dikte) solid var(--lijn);
}

.zijbalk__naam {
  font-weight: var(--gewicht-gewoon);
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-compact);
  color: var(--tekst);
}

/* Wie je bent en met welke rol je bent ingelogd — dat is de plek waar een
 * collega begrijpt waarom hij iets niet in het menu ziet.
 *
 * Het prototype zet hier --label (#6f6e63). Op de zijbalk haalt dat 4,43:1 en
 * dat is onder de norm van 4,5; --bijzaak haalt er 5,88:1. Het ontwerp zegt
 * zelf dat de grijzen boven 4,5:1 blijven, dus dit is die regel volgen, niet
 * ervan afwijken. */
.zijbalk__rol {
  font-weight: var(--gewicht-gewoon);
  font-size: var(--maat-label);
  line-height: var(--regel-compact);
  letter-spacing: var(--letterafstand-label);
  text-transform: uppercase;
  color: var(--bijzaak);
}

.zijbalk__uitloggen {
  margin-top: var(--ruimte-blok);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-compact);
  color: var(--link);
  cursor: pointer;
}

.zijbalk__uitloggen:hover { color: var(--link-hover); text-decoration: underline; }

/* De schermen kregen hun buitenmarge tot nu toe van `body`. Die is hierboven
 * weggehaald, dus staat hij nu hier — op de maten van de ruimteschaal. */
.werkvlak {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--ruimte-sectie) var(--ruimte-marge) var(--ruimte-marge-ruim);
}

/* ===================================================================== */
/* Drie soorten meldingen                                                */
/* Vorm uit `Stijlwaarden.dc.html` r. 160-173.                           */
/* ===================================================================== */

/* Het onderschrift van Stijlwaarden zegt waarom ze zo verschillen:
 * "Blokkerend heeft een teken én een kleur, let op alleen een streep, ter
 * informatie geen van beide. Aan de vorm te zien zonder te lezen, ook zonder
 * kleurzicht."
 *
 * Die drie staan hier los van het scherm waar ze vandaag op komen (inloggen en
 * wachtwoord wijzigen), want ze horen op elk volgend scherm terug te komen. De
 * naam zegt de soort, niet de plek. */

.melding {
  font-weight: var(--gewicht-gewoon);
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-compact);
}

/* Blokkerend: een teken, een kleur, een rand, een vlak. */
.melding--blokkerend {
  display: flex;
  align-items: flex-start;
  gap: var(--ruimte-veld);
  padding: var(--ruimte-blok) 14px;   /* Stijlwaarden r. 161 */
  background: var(--fout-vlak);
  border: var(--rand-dikte) solid var(--fout-rand);
  border-radius: var(--afronding);
  color: var(--fout-tekst);
}

/* Het ✕ is een blokje, geen los tekentje: 16px wit op --fout. Daardoor is het
 * ook zonder kleurzicht een teken en niet alleen een andere kleur letter.
 * `line-height` gelijk aan de hoogte centreert het kruis in het vierkant. */
.melding__teken {
  flex: none;
  width: 16px;                       /* Stijlwaarden r. 162 */
  height: 16px;
  background: var(--fout);
  color: var(--papier);
  font-size: var(--maat-teken);
  line-height: 16px;
  text-align: center;
  border-radius: var(--afronding);
}

/* Let op: de factuur kan door, er wordt alleen iets uitgelegd. Alleen een
 * streep links — geen teken, geen gekleurd vlak. Zelfde dikte als het actieve
 * menu-item in de zijbalk. */
.melding--letop {
  padding: var(--ruimte-blok) 14px;   /* Stijlwaarden r. 166 */
  background: var(--papier);
  border: var(--rand-dikte) solid var(--lijn);
  border-radius: var(--afronding);
  box-shadow: inset var(--streep) 0 0 var(--letop);
  color: var(--tekst);
}

/* Ter informatie: geen teken, geen streep, geen vlak. Alleen kleiner en
 * grijzer dan de tekst eromheen. */
.melding--informatie {
  padding: 0 2px;                     /* Stijlwaarden r. 170 */
  font-size: var(--maat-label);
  line-height: var(--regel-tekst);
  color: var(--label);
}

/* ===================================================================== */
/* Losstaande schermen: inloggen en wachtwoord wijzigen                  */
/* Vorm uit `Inloggen.dc.html`; alle waarden uit `Stijlwaarden.dc.html`. */
/* ===================================================================== */

/* Deze twee schermen hangen niet in de omhulling: `OMHULLING_VRIJE_PADEN` in
 * `trust_dashboard/omhulling.py` is `{"/login", "/change-password"}`. Ze staan
 * los en gecentreerd op het bureaublad, zonder menu. Alles onder `.losstaand`
 * raakt dus precies die twee en verder niets.
 *
 * Waar dit zichtbaar afwijkt van `Inloggen.dc.html`, en waarom:
 *
 * - Het prototype tekent `border-radius` 6px op de velden en de knop en 8px op
 *   de kaart. Stijlwaarden zegt "2px afronding · 1px randen", met de uitleg dat
 *   het scherm uit vlakken en lijnen bestaat en niet uit kaartjes. Overal
 *   --afronding.
 * - Het prototype zet een schaduw onder de kaart en een groene gloed om het
 *   veld in focus. Diezelfde regel van Stijlwaarden zegt "geen schaduw, behalve
 *   onder het papier" — en dat papier is de factuur, niet deze kaart. Beide
 *   schaduwen zijn weg; de focus is te zien aan de rand (--knop) plus de
 *   focusring van de grondslag.
 * - Het palet van het prototype wijkt een paar tinten af (#f5f5f4, #e4e2dc,
 *   #d3d1c9, #fdf1f1, #e6c3c3, #8a2020). Stijlwaarden is de enige bron voor
 *   kleur, dus dat zijn hier --bureaublad, --lijn, --veldrand, --fout-vlak,
 *   --fout-rand en --fout-tekst.
 *
 * De maten die het prototype geeft en die níet in Stijlwaarden staan, zijn vorm
 * en geen stijlwaarde. Die staan hieronder met hun regelnummer erbij — net
 * zoals de zijbalkmaten van pakket 101. */

body.losstaand {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-marge);
  padding: var(--ruimte-marge-ruim) var(--ruimte-sectie);
  background: var(--bureaublad);
}

/* Het logo met het woordmerk eronder, boven de kaart. */
.aanmelden__merk {
  display: grid;
  justify-items: center;
  gap: var(--ruimte-blok);
}

.aanmelden__logo {
  height: 52px;              /* Inloggen.dc.html r. 27 */
  width: auto;
  display: block;
}

/* Hetzelfde woordmerk als in de zijbalk, een maat groter. Het prototype zet
 * .12em spatiëring; die komt in Stijlwaarden nergens voor, dus hier staat de
 * enige spatiëring die er wél in staat (.08em) — dezelfde afweging als bij
 * `.zijbalk__woordmerk` in pakket 101.
 *
 * --bijzaak en niet --label: dit staat op het bureaublad, en daar haalt --label
 * maar 4,16:1. */
.aanmelden__woordmerk {
  font-weight: var(--gewicht-kop);
  font-size: var(--maat-label);
  line-height: var(--regel-strak);
  letter-spacing: var(--letterafstand-label);
  text-transform: uppercase;
  color: var(--bijzaak);
}

.aanmelden__kaart {
  width: 100%;
  max-width: 432px;          /* Inloggen.dc.html r. 32 */
  display: grid;
  gap: var(--ruimte-groep);
  padding: var(--ruimte-marge) var(--ruimte-sectie);
  background: var(--papier);
  border: var(--rand-dikte) solid var(--lijn);
  border-radius: var(--afronding);
}

/* Een paginatitel. Stijlwaarden zet die op 22/500; het prototype op 22/600,
 * maar 600 is in Stijlwaarden het gewicht van een getal dat zich losmaakt van
 * de tekst (factuurnummer, bedrag) en niet van een kop. Dus 500. */
.aanmelden__titel {
  margin: 0;
  font-weight: var(--gewicht-kop);
  font-size: var(--maat-titel);
  line-height: var(--regel-kop);
  text-align: center;
}

.aanmelden__formulier {
  display: grid;
  gap: var(--ruimte-groep);
}

/* "Wachtwoord kwijt? Vraag een beheerder." Geen link: er is geen reset-route.
 * Staat op --papier, dus --label mag hier. */
.aanmelden__voet {
  margin: 0;
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-compact);
  color: var(--label);
  text-align: center;
}

/* De weg terug, onderaan wachtwoord wijzigen. Het prototype zet hier één link
 * (*Terug naar inloggen*); in het echte systeem staat er Uitloggen als de
 * wachtwoordgate je hier vasthoudt en Terug naar home als je vrijwillig komt.
 * Zie het eindrapport van pakket 102. */
.aanmelden__weg {
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-compact);
  text-align: center;
}

/* ---- Een veld: naam erboven, icoon ernaast ------------------------------ */

.veld {
  display: grid;
  gap: var(--ruimte-veld);   /* §8: tussen label en veld 8 */
}

.veld__naam {
  font-weight: var(--gewicht-kop);
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-compact);
}

/* De eis staat vóór het veld, niet als hint erachter: je leest hem voordat je
 * typt. Ontwerpopdracht r. 822 noemt dit met zoveel woorden de ene uitzondering
 * op "geen uitleg onder koppen" — het is een eis die de kop niet noemt. */
.veld__eis {
  font-size: var(--maat-label);
  line-height: var(--regel-tekst);
  color: var(--label);
}

/* Het vak draagt de rand; de `input` erin is kaal. Zo staat het icoon binnen de
 * rand in plaats van ernaast. */
.veld__vak {
  display: flex;
  align-items: center;
  gap: var(--ruimte-veld);
  height: 46px;              /* Inloggen.dc.html r. 44 */
  padding: 0 var(--ruimte-blok);
  background: var(--papier);
  border: var(--rand-dikte) solid var(--veldrand);
  border-radius: var(--afronding);
}

/* In focus loopt de rand groen. Dat is de enige focusaanwijzing die het vak
 * zelf geeft — de focusring van de grondslag staat los en blijft staan, want
 * een rand van 1px is geen indicator die 3:1 haalt tegen zijn omgeving. */
.veld__vak:focus-within {
  border-color: var(--knop);
}

.veld__icoon {
  flex: none;
  color: var(--label);
}

.veld input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: var(--maat-tekst);
  line-height: var(--regel-compact);
  color: var(--tekst);
}

.veld input::placeholder { color: var(--label); }

/* De ring hoort binnen het vak te blijven staan, anders valt hij samen met de
 * rand eromheen. Dezelfde ingreep als bij `.menu-item`.
 *
 * Let op wat hier NIET staat: `outline: none`. De helmet van de prototypes zet
 * dat op elke input; dat is een prototype-reset en gaat lijnrecht in tegen de
 * vormregel "focusring op elk veld en elke knop". */
.veld input:focus-visible {
  outline-offset: calc(var(--focus-afstand) * -2);
}

/* ---- Knoppen ----------------------------------------------------------- */

/* Stijlwaarden › Ruimte, randen, velden: de drie knoppen. De primaire en —
 * sinds pakket 145, waar Berichten er een nodig had — de tweede. De dode knop
 * komt op het scherm waar hij nodig is. */
.knop {
  font-weight: var(--gewicht-kop);
  font-size: var(--maat-tekst);
  line-height: var(--regel-strak);
  padding: var(--ruimte-blok) var(--ruimte-groep);
  border: var(--rand-dikte) solid transparent;
  border-radius: var(--afronding);
  cursor: pointer;
}

/* Het knopgroen, niet het accentgroen. Wit op --knop haalt 4,70:1; wit op
 * --accent (#9ACD32) haalt 1,88:1 en is onbruikbaar. Die twee niet verwarren:
 * de regel "donkere tekst op groen" gaat over --accent. */
.knop--primair {
  background: var(--knop);
  border-color: var(--knop-rand);
  color: var(--papier);
}

.knop--primair:hover { background: var(--knop-rand); }

/* De tweede knop uit Stijlwaarden ("Markeer als verstuurd"): wit vlak, grijze
 * rand, gewone letter. Geen tweede groen — de vormregel "één groen voor
 * knoppen" betekent dat álle andere knoppen kleurloos zijn, niet dat ze een
 * lichtere tint van hetzelfde groen krijgen. */
.knop--tweede {
  font-weight: var(--gewicht-gewoon);
  background: var(--papier);
  border-color: var(--veldrand);
  color: var(--tekst);
}

.knop--tweede:hover { background: var(--knop-tweede-hover); }

.knop--breed {
  width: 100%;
  height: 48px;              /* Inloggen.dc.html r. 64 */
  padding: 0;
}

/* Een `<a>` die een knop is: '+ Nieuwe factuur' op het facturenoverzicht
 * (pakket 154). De vorm komt van `.knop`; een link brengt zijn eigen
 * onderstreping en regelmodel mee, en die twee moeten weg. Verder niets — een
 * knop die navigeert ziet er hetzelfde uit als een knop die iets doet. */
a.knop {
  display: inline-block;
  text-decoration: none;
}

/* Uitloggen is een `<button>` in een `<form method="post">` en geen link — een
 * GET mag geen sessie beëindigen. Hij hoort er wel uit te zien als de link
 * ernaast. Zelfde ingreep als `.zijbalk__uitloggen`. */
.linkknop {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--link);
  cursor: pointer;
}

.linkknop:hover { color: var(--link-hover); text-decoration: underline; }

/* ===================================================================== */
/* De werkruimte: het formulier waarmee een factuur gemaakt wordt        */
/* Was het eigen `<style>`-blok van `templates/facturen/nieuw.html`      */
/* (r. 5-68); pakket 103. Vorm ongewijzigd, waarden uit Stijlwaarden.    */
/* ===================================================================== */

/* Alles hieronder hangt aan `.werkruimte`, de klasse die in dat sjabloon om
 * `{% block content %}` staat. Die klasse staat NERGENS anders: `.hint`, `.row`
 * en `fieldset` zijn te algemeen om los te laten lopen — `facturen/list.html`
 * en `facturen/detail.html` hebben hun eigen `<style>`-blok met dezelfde namen
 * en een andere bedoeling.
 *
 * Wat hier NIET staat, en waarom:
 *
 * - `display`. Zichtbaarheid op dit scherm is inline `style.display`: 46
 *   elementen staan zo in de HTML en acht JS-functies zetten het aan en uit.
 *   De JS-testrunner leest zichtbaarheid af als `el.style.display !== 'none'`
 *   (`tests/js/run_form_dispatch.js` r. 129). Een klasse-gebaseerde oplossing
 *   maakt die suite blind: hij blijft groen en meet niets meer. De
 *   `display`-regels die hier wél staan (`.row`, `.lw-velden`, `.lw-knop`,
 *   `.lw-aftrek`, `.lot-plan-row`, `.werkregel`) zijn flexcontainers. De
 *   eerste vijf worden door de JS niet aan- of uitgezet — die zet de wrapper
 *   eromheen. `.lw-aftrek` is sinds pakket 126 de uitzondering: dát is de
 *   wrapper die de schakelaar aan- en uitzet, en dat gebeurt INLINE
 *   (`style.display = 'none'` / `''`). Inline wint, en bij '' valt hij terug op
 *   de `flex` hieronder — de JS-suite blijft dus meten wat ze meette. Zie het
 *   eindrapport van pakket 103 voor de meting.
 *
 * - `body { max-width: 720px }`. Die regel stond in het oude blok en is sinds
 *   pakket 101 dood: `body.met-omhulling` zet `max-width: none` en wint op
 *   specificiteit. In de browser gemeten op `main`: `max-width` is `none`. Hem
 *   hier terugzetten zou de kolom opnieuw aanzetten, en dat is een besluit over
 *   de vorm van het scherm — geen verhuizing. Staat als open punt in het
 *   rapport.
 *
 * Het scherm staat op --bureaublad: `.werkvlak` en `fieldset` hebben geen eigen
 * vlak, dus de tekst ligt op #eae7e1. Daar haalt --label maar 4,16:1 en dat is
 * onder de norm (`test_label_grijs_mag_niet_op_de_zijbalk_of_het_bureaublad`).
 * Waar het oude blok #555 of #888 zette staat hier daarom --bijzaak (5,53:1),
 * niet --label. Dezelfde afweging als bij `.zijbalk__rol` in pakket 101. */

/* PAKKET 144 — GEEN KADERS om de invoervelden (§4.1, V — Annelie 22-08, na
 * acht varianten naast elkaar): "Links geen kaders om de invoervelden.
 * Sectiekoppen dragen de structuur, niet randen."
 *
 * De rand en de afronding zijn hier dus weg. Wat ervoor in de plaats komt is
 * ruimte en een kop, niet een lichtere rand: een half kader is nog steeds een
 * kader. De secties worden van elkaar gescheiden door `--ruimte-sectie`, en de
 * `legend` draagt sinds dit pakket de vorm die Stijlwaarden "label in de
 * gutter" noemt (12 / 400 / .08em, kapitaal) — precies wat het ontwerp in de
 * linkerkolom doet.
 *
 * `.lot-week-row` HOUDT zijn kader. Dat is geen inconsequentie: pakket 126
 * heeft dat kader er bewust neergezet omdat op één doorlopende strook niet te
 * zien was welke aftrek bij welke week hoorde, en op 16-09-2026 bleven die
 * velden daardoor leeg. Het blok declareert zijn eigen `border`, `padding` en
 * `margin` en is dus niet van de regel hieronder afhankelijk.
 *
 * Voor de duidelijkheid: de linkerkolom staat op `--vlak` (#f6f5f2) en niet op
 * `--papier`. Zo tekent het ontwerp het (r. 2036-2037: links #f6f5f2, rechts
 * #eae7e1), en de bedoeling van §4.1 — "het grijze vlak rechts maakt van de
 * factuur een voorwerp dat je oog scheidt van de invoer" — komt uit dat
 * verschil, niet uit absoluut wit. */
/* PAKKET 149: er zijn in de invoerkolom geen SECTIE-fieldsets meer. Deze regel
 * bedient sindsdien nog twee dingen — het weekblok hieronder, dat zijn kader
 * zelf declareert, en de `.veldgroep` om een groep radio's. De regel blijft
 * staan omdat een `<fieldset>` zonder rand precies is wat de toegankelijkheid
 * hier nodig heeft; wat weg moest was het KADER, niet het element. */
.werkruimte fieldset {
  border: 0;
  margin: 0 0 var(--ruimte-sectie);
  padding: 0;
}

/* De sectiekop. §8 van de ontwerpopdracht stelde 16px voor, maar dat was een
 * [?]; Stijlwaarden kent die sport niet en wint (zie de notitie bij het
 * bevestigingsvenster). Dit is de sport die er wél is.
 *
 * `--label` (#6f6e63) mag hier: de invoerkolom staat op `--vlak`, en dáár is
 * de 4,7:1 van Stijlwaarden tegen gemeten. Op `--bureaublad` zou hij 4,16:1
 * halen en dan moet het `--bijzaak` zijn — dat is de grens die
 * `test_label_grijs_mag_niet_op_de_zijbalk_of_het_bureaublad` vastlegt. */
.werkruimte legend {
  padding: 0;
  color: var(--label);
  font-size: var(--maat-label);
  line-height: var(--regel-label);
  letter-spacing: var(--letterafstand-label);
  text-transform: uppercase;
}

/* ===================================================================== */
/* PAKKET 149 — DE INVOERKOLOM IS ÉÉN KOLOM VAN RIJEN                    */
/* ===================================================================== */

/* Pakket 144 haalde de RANDEN om de invoervelden weg; de vorm eromheen bleef.
 * Vier `<fieldset>`-blokken met een `<legend>` erboven, en daarbinnen velden
 * die over de volle kolombreedte uitliepen — sinds pakket 101, toen
 * `body { max-width: 720px }` doodviel.
 *
 * Het ontwerp (`design-handoff/Werkruimte v2.dc.html` r. 83-583) kent die
 * blokken niet. Elke rij heeft daar dezelfde vorm:
 *
 *     grid-template-columns: minmax(96px,124px) 1fr;  gap: 0 20px;
 *     padding: 24px 0 14px;  border-top: 1px solid <breuk>;
 *     label: 12 / 400 / .08em, kapitaal, <label>
 *     veld:  max-width: min(400px, 100%)
 *
 * WAAROM HIER GEEN `display: grid` STAAT. De rijklasse zit op de blokken die
 * de JS zélf aan- en uitzet (`#arm_uploads`, `#lot_blok`, `#donateur_blok`, …),
 * en op dit scherm is inline `style.display` de enige eigenaar van
 * zichtbaarheid (WERKRUIMTE_RAAKVLAKKEN §3). Een `display` in de CSS op zo'n
 * blok gaat met die eigenaar vechten zodra iemand er een media-query bij zet,
 * en `tests/js/run_form_dispatch.js` — die zichtbaarheid afleest als
 * `style.display !== 'none'` — is er niet tegen beveiligd.
 *
 * De goot komt daarom uit `padding-left` met een absoluut geplaatst label. Dat
 * levert dezelfde twee kolommen op zonder één `display`-declaratie, en het
 * label zoekt zijn eigen hoogte op: `top` blijft `auto`, dus het staat waar het
 * in de normale stroom ook gestaan had — vanzelf goed in een rij zonder
 * bovenmarge.
 *
 * DE HAARLIJN HOORT BIJ DE RIJ. Hij staat erbóven, op de rij zelf. Valt een rij
 * weg omdat deze klant dat blok niet heeft, dan gaat zijn lijn mee en blijft er
 * geen streep boven een leegte staan. Twee lijnen op elkaar kan niet: elke rij
 * tekent er precies één, aan zijn eigen bovenkant.
 *
 * AFWIJKINGEN VAN DE HANDOFF, en waarom (Stijlwaarden wint van het prototype,
 * `design-handoff/README.md`):
 *
 *  - de goot is vast 124px in plaats van `minmax(96px,124px)`. De invoerkolom
 *    is `minmax(620px, 1fr)` breed; binnen dat raster lost de minmax altijd op
 *    124px op, dus de ondergrens is er een die nooit aangaat.
 *  - `padding-bottom` is 12px (`--ruimte-blok`) waar de handoff 14 tekent, en
 *    de eerste rij houdt 12 waar de handoff 20 tekent. 14 en 20 staan niet op
 *    de ruimteschaal van Stijlwaarden (4 · 8 · 12 · 16 · 24 · 36 · 56).
 */
.werkruimte .invoerrij {
  position: relative;
  /* 124px goot + 20px tussenruimte. De veldkolom die overblijft is daarmee
   * `min(400px, 100%)` — precies wat het ontwerp op de inhoud van elke rij
   * zet, alleen gerekend vanaf de buitenkant in plaats van vanaf het raster. */
  max-width: calc(144px + 400px);
  min-height: calc(var(--maat-label) * var(--regel-label));
  padding: var(--ruimte-sectie) 0 var(--ruimte-blok) 144px;
  border-top: var(--rand-dikte) solid var(--breuk);
}

/* De kop van de kolom — de klantkiezer en de stille regel eronder. Het ontwerp
 * zet daar geen lijn boven: er is nog niets om van te scheiden. */
.werkruimte .invoerrij--open {
  border-top: 0;
  padding-top: 0;
}

/* Het label in de goot. De VORM komt van `.gutterlabel` (de grondslag van dit
 * bestand: het gespatieerde kapitaal, er zijn er precies twee in het systeem);
 * deze klasse zet alleen waar het staat. Zo is er één kapitaal en niet twee.
 *
 * `top` blijft met opzet ongezet: een absoluut geplaatst element zonder `top`
 * blijft op zijn statische plek staan, en dat is de bovenkant van de inhoud —
 * ook in een rij die zijn bovenpadding niet heeft. */
.werkruimte .invoerrij__label {
  position: absolute;
  left: 0;
  width: 124px;
}

/* Een groep radio's houdt zijn `<fieldset>`, want dat is wat een schermlezer
 * vertelt dat de twee bij elkaar horen — maar zonder rand en met een visueel
 * verborgen `<legend>` (`.alleen-voorlezen`), want het woord staat al in de
 * goot. De rand is al weg via `.werkruimte fieldset`; wat hier weg moet is de
 * ondermarge van 24px die daar voor SECTIES stond en binnen een rij een gat
 * trekt. */
.werkruimte .veldgroep { margin: 0; }

/* De tweede helft van de kiezerrij: het merkveld en de bankmelding. Die horen
 * ONDER de kiezer en niet ernaast.
 *
 * `.werkruimte .row > div { flex: 1 }` gaf dat blokje de halve rij, en in een
 * veldkolom van 400px hield de kiezer er 192px van over — bij LaaS-Happy Kids
 * stond er dan 'Klant LAA…'. Zichtbaar of niet, dit blok begint nu altijd op
 * een eigen regel; de kiezer houdt de volle 400px.
 *
 * Er verschuift niets in de DOM: het blok stond al ná de kiezer en staat er
 * nog steeds. Alleen de regelval verandert. */
.werkruimte .invoerrij--open .row { flex-wrap: wrap; }
.werkruimte .row > .invoerrij__naast { flex: 1 0 100%; min-width: 0; }

.werkruimte .row { display: flex; gap: 1em; }

/* Laat deze selector staan zoals hij is. Er hangen twee contracten onder: op
 * twee plekken in de HTML staat de flexwaarde op een omhullende `div`, maar in
 * `bouwRegels` en in de correctierij staan ze INLINE op de inputs zelf, en die
 * zijn daar directe kinderen van `.row`. */
.werkruimte .row > div { flex: 1; }

/* `box-sizing: border-box` stond in het oude blok en staat sinds pakket 101 in
 * de grondslag bovenaan dit bestand, op `*`. Niet nog een keer. */
.werkruimte input[type="text"],
.werkruimte input[type="number"],
.werkruimte input[type="date"],
.werkruimte select,
.werkruimte textarea {
  width: 100%;
  padding: 0.5em;
  border: var(--rand-dikte) solid var(--veldrand);
  border-radius: var(--afronding);
  margin-top: 0.2em;
  font-size: var(--maat-tekst);
}

.werkruimte textarea { min-height: 4em; font-family: inherit; }

.werkruimte .hint {
  font-size: var(--maat-label);
  color: var(--bijzaak);
  margin-top: 0.2em;
}

/* Weekregels (per_lot_weken): sinds pakket 126 één OMKADERD BLOK per week in
 * plaats van een strook velden. Het blok is een <fieldset> met het weeknummer
 * in zijn <legend>, 'regel weg' rechtsboven, de gewone velden eronder en — bij
 * een klant met aftrekstromen — een eigen kadertje 'Hiervan gaat af'.
 *
 * Waarom een kader en niet nog een rij velden: de aftrek verschilt per week
 * (week 35: 104 en 103; week 36: 171 en 83). Op één doorlopende strook was niet
 * te zien welk getal bij welke week hoorde, en op 16-09-2026 bleven de velden
 * daardoor leeg — met een factuur op de volle bruto 620 loten tot gevolg.
 *
 * De indeling komt uit `loh-formulier-voorstel.html` (goedgekeurd 16-09-2026);
 * de KLEUREN komen uit Stijlwaarden en niet uit dat voorbeeld — daar staat het
 * aftrekkadertje in credo-rood op roze, en die merkkleur hoort op een factuur,
 * niet in een invoerveld. Hier: --papier voor het weekblok (het ligt op
 * --bureaublad en moet zich daarvan losmaken) en --vlak voor het kadertje
 * erbinnen. Op allebei mag --label; de labels blijven niettemin --bijzaak,
 * zoals in de rest van dit scherm. */
.werkruimte .lot-week-row {
  background: var(--papier);
  border: var(--rand-dikte) solid var(--lijn);
  border-radius: var(--afronding);
  margin: 0 0 var(--ruimte-blok);
  padding: 0 var(--ruimte-groep) var(--ruimte-groep);
}
/* De legend draagt het weeknummer en is de kop van het blok: donkerder en
 * zwaarder dan de legends van de grote secties.
 *
 * `text-transform` en `letter-spacing` worden hier UITDRUKKELIJK teruggezet.
 * Sinds pakket 144 is `.werkruimte legend` het gespatieerde kapitaal van
 * Stijlwaarden, en dat is de vorm voor een sectiekop — niet voor een blokkop
 * die een LABEL en een INVOERVELD bevat ('Verkoopweek' + het weeknummer). Zou
 * deze regel ontbreken, dan stond daar 'VERKOOPWEEK' en werd ook het getal in
 * het veld in kapitalen getekend. Kapitaal moet iets blijven betekenen (§8). */
.werkruimte .lot-week-row legend {
  color: var(--tekst);
  font-size: var(--maat-tekst);
  font-weight: var(--gewicht-kop);
  padding: 0 var(--ruimte-veld);
  text-transform: none;
  letter-spacing: normal;
}
.werkruimte .lot-week-row legend label {
  display: inline;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  margin-right: var(--ruimte-veld);
}
.werkruimte .lot-week-row legend input { width: 72px; display: inline-block; margin-top: 0; }

/* 'regel weg' hoort bij het blok, dus rechtsboven erin. */
.werkruimte .lot-week-row .lw-knop { display: flex; justify-content: flex-end; }

/* De gewone velden: vaste kolombreedtes, labels op één regel. Met .row
 * (flex:1 per veld) werd elk veld ~110px en braken de labels over drie regels. */
.werkruimte .lot-week-row .lw-velden {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-blok);
  align-items: flex-end;
}
.werkruimte .lot-week-row .lw-velden > div { flex: 0 0 auto; }
.werkruimte .lot-week-row label {
  display: block;
  white-space: nowrap;
  font-size: var(--maat-label);
  color: var(--bijzaak);
}
.werkruimte .lot-week-row input { min-width: 0; }
.werkruimte .lot-week-row .lw-datum { width: 132px; }
.werkruimte .lot-week-row .lw-aantal { width: 104px; }
.werkruimte .lot-week-row .lw-bedrag { width: 152px; }

/* 'Hiervan gaat af' (pakket 115/126): per aftrekstroom uit de matrix één regel
 * — de naam, en daarachter één invoerveld. Verder niets: geen eenheid, geen
 * uitleg. De naam staat in gewone inkt (het is een doel, geen veldlabel) en
 * het veld rechts uitgelijnd, zodat twee aantallen onder elkaar te vergelijken
 * zijn. */
.werkruimte .lot-week-row .lw-afblok {
  background: var(--vlak);
  border: var(--rand-dikte) solid var(--lijn);
  border-radius: var(--afronding);
  margin-top: var(--ruimte-groep);
  padding: var(--ruimte-blok) var(--ruimte-groep);
  max-width: 420px;
}
.werkruimte .lot-week-row .lw-afkop {
  margin: 0 0 var(--ruimte-veld);
  font-size: var(--maat-bijzaak);
  font-weight: var(--gewicht-kop);
  color: var(--tekst);
}
.werkruimte .lot-week-row .lw-aftrek {
  display: flex;
  align-items: center;
  gap: var(--ruimte-blok);
  margin-bottom: var(--ruimte-veld);
}
.werkruimte .lot-week-row .lw-aftrek:last-child { margin-bottom: 0; }
.werkruimte .lot-week-row .lw-aftrek label {
  flex: 1 1 auto;
  white-space: normal;
  font-size: var(--maat-bijzaak);
  color: var(--tekst);
}
.werkruimte .lot-week-row .lw-aftrek input {
  flex: 0 0 auto;
  width: 96px;
  text-align: right;
  margin-top: 0;
}

/* Blijft leeg zolang er niets mis is: sinds pakket 126 staat hier alleen nog
 * een weigering van /facturen/lot-weekregel, niet meer de regel die op de PDF
 * komt. */
.werkruimte .lot-week-row .lot-week-preview { margin: var(--ruimte-veld) 0 0; }

/* Factuurplan (pakket 53): één kader per factuur, met de regels als raster. */
/* Gewicht 500 en niet 600: in Stijlwaarden is 600 het gewicht van een GETAL dat
 * zich losmaakt van de tekst (factuurnummer, bedrag), niet van een kop. Dit
 * zijn koppen. Dezelfde afweging als bij `.aanmelden__titel` in pakket 102. */
.werkruimte .lot-plan-kop { font-weight: var(--gewicht-kop); margin: 0.8em 0 0.4em; }
.werkruimte .lot-plan-factuur {
  border: var(--rand-dikte) solid var(--lijn);
  border-radius: var(--afronding);
  padding: 0.5em 0.8em 0.8em;
  margin-bottom: 0.8em;
}
.werkruimte .lot-plan-titel {
  font-weight: var(--gewicht-kop);
  font-size: var(--maat-bijzaak);
  margin: 0 0 0.1em;
}
.werkruimte .lot-plan-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  align-items: flex-end;
  margin-top: 0.5em;
}
.werkruimte .lot-plan-row > div { flex: 0 0 auto; }
.werkruimte .lot-plan-row label {
  display: block;
  white-space: nowrap;
  font-size: var(--maat-label);
  color: var(--bijzaak);
}
.werkruimte .lot-plan-row .lp-regel { flex: 1 1 200px; min-width: 160px; }
.werkruimte .lot-plan-row .lp-aantal { width: 96px; }
.werkruimte .lot-plan-row .lp-tarief { width: 104px; }
.werkruimte .lot-plan-row .lp-week { width: 76px; }
.werkruimte .lot-plan-row .lp-herkomst { flex: 1 0 100%; margin: 0.1em 0 0; }

/* De klasse ÍS de foutstatus: de JS wisselt `el.className` tussen 'hint' en
 * 'lot-plan-fout'. Geen tweede klasse eraan hangen — die wordt bij de eerste
 * herberekening overschreven. */
.werkruimte .lot-plan-fout {
  color: var(--fout-tekst);
  font-size: var(--maat-label);
  margin: 0.4em 0 0;
}

/* ---- De stille regel en het paneel (pakket 148) ------------------------- */

/* Dit vervangt de vier samengevouwen velden van pakket 59 (`.veld-compact`).
 * Die deden hetzelfde werk — een waarde tonen met 'wijzigen' erachter — maar
 * vier keer onder elkaar, en dát is de ruis die Annelie na de eerste live ronde
 * zag: "super rommelig niet het design".
 *
 * Vorm uit `Werkruimte v2.dc.html` r. 111-136: onder de klantkiezer één stille
 * regel met twee links, en achter de tweede een paneel.
 *
 * TWEE AFWIJKINGEN VAN DE HANDOFF, allebei met opzet:
 *
 *  1. GEEN SCHADUW. Het prototype zet `box-shadow:0 10px 30px rgba(40,38,30,.16)`
 *     op het paneel; Stijlwaarden zegt "geen schaduw, behalve onder het papier",
 *     en dat papier is de factuur. Dezelfde afweging als bij `.kiezer__paneel`
 *     en `.bevestig__venster`. De rand doet het werk.
 *  2. HET PANEEL ZWEEFT NIET. De handoff zet hem `position:absolute` over het
 *     formulier heen. Hier staat hij in de kolom: het paneel klapt vanzelf open
 *     zodra er een verplicht veld leeg is (WERKRUIMTE_RAAKVLAKKEN §4), en een
 *     zwevend blok zou dan de velden eronder afdekken in precies het geval
 *     waarin je ze nodig hebt.
 *
 * WAT HIER NIET STAAT is `display` op `#detail_paneel` of `#merk_veld`. Die
 * twee schakelen met inline `style.display`, en dat is op dit scherm de enige
 * eigenaar van zichtbaarheid (WERKRUIMTE_RAAKVLAKKEN §3): zet er hier een
 * `display` bij en `tests/js/run_form_dispatch.js` meet niets meer. */
.werkruimte .werkregel {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--ruimte-veld);
  margin: var(--ruimte-veld) 0 0;
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-label);
  color: var(--bijzaak);
}

/* Een `<button>` en geen `<a>`: er valt niets te navigeren. `type="button"`
 * staat in de template — zonder dat verstuurt hij het formulier. */
.werkruimte .werkregel__link {
  background: none;
  border: none;
  padding: 0;
  width: auto;
  font-family: inherit;
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-label);
  color: var(--link);
  text-decoration: underline;
  cursor: pointer;
}

.werkruimte .werkregel__link:hover { color: var(--link-hover); }

.werkruimte .werkpaneel {
  max-width: 400px;
  margin: var(--ruimte-veld) 0 var(--ruimte-groep);
  padding: var(--ruimte-groep);
  background: var(--papier);
  border: var(--rand-dikte) solid var(--veldrand);
  border-radius: var(--afronding);
}

/* Zes velden onder elkaar in één paneel. Labels zijn op dit scherm verder
 * nergens gestyled (ze staan default `inline`), en dan plakt het volgende label
 * tegen het vorige veld aan. Binnen het paneel dus wél: een blok met ruimte
 * erboven, precies de sport die Stijlwaarden "tussen label en veld" noemt.
 *
 * Dit is GEEN `display` op iets wat de JS bedient (WERKRUIMTE_RAAKVLAKKEN §3):
 * geen van de acht zichtbaarheidsfuncties raakt een `<label>` aan. Het paneel
 * zelf en `#btw_nummer_blok` houden hun inline `style.display`. */
.werkruimte .werkpaneel label:not(.werkpaneel__vink) {
  display: block;
  margin-top: var(--ruimte-groep);
}

.werkruimte .werkpaneel > label:first-child { margin-top: 0; }

/* Het vinkje 'BTW verlegd' staat op één regel met zijn tekst; als blok zou het
 * vakje boven zijn eigen tekst springen. */
.werkruimte .werkpaneel__vink {
  display: flex;
  align-items: baseline;
  gap: var(--ruimte-veld);
  margin-top: var(--ruimte-groep);
  font-weight: var(--gewicht-gewoon);
  text-transform: none;
  letter-spacing: normal;
}

.werkruimte .werkpaneel__vink input { width: auto; }

/* 'Klaar' is de tweede knop van Stijlwaarden: rand en papier, geen groen vlak.
 * Het paneel dichtdoen is geen handeling die iets vastlegt. */
.werkruimte .werkpaneel__klaar {
  width: auto;
  font-weight: var(--gewicht-gewoon);
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-strak);
  padding: 9px 14px;
  background: var(--papier);
  border: var(--rand-dikte) solid var(--veldrand);
  border-radius: var(--afronding);
  color: var(--tekst);
  cursor: pointer;
}

.werkruimte .werkpaneel__klaar:hover { background: var(--knop-tweede-hover); }
.werkruimte .veld-waarschuwing {
  font-size: var(--maat-label);
  color: var(--fout-tekst);
  margin-top: 0.2em;
}

/* ---- De klantkiezer (pakket 144) --------------------------------------- */

/* Model: de projectkiezer van Backstage (§4.2, V — Annelie 21-08). Vorm uit
 * `Werkruimte v2.dc.html` r. 84-107 en de berekende stijlen op r. 2119 en
 * 2131-2138; de waarden komen uit Stijlwaarden.
 *
 * `.combobox` blijft de positie-anker, want `#klant_paneel` hangt eraan. De
 * klasse staat nog op hetzelfde element als voorheen.
 *
 * Wat hier NIET staat is `display` op iets wat de JS aan- of uitzet. Het
 * paneel schakelt met het `hidden`-attribuut en niet met inline
 * `style.display`: het is een NIEUW element, geen van de acht
 * zichtbaarheidsfuncties van `nieuw.html` kent het, en het staat niet in de
 * `WATCH`-lijst van `run_form_dispatch.js`. Zelfde afweging als bij het vel en
 * het bevestigingsvenster. `#klant_opties` houdt wél zijn inline
 * `style.display`, want dat element bestond al. */
.werkruimte .combobox { position: relative; max-width: 400px; }

/* De dichtgeklapte kiezer: de gekozen klant en een pijltje. Een `<button>` en
 * geen `<div onclick>`, zodat Tab, Enter en spatie vanzelf werken en een
 * schermlezer hem als knop aankondigt. `type="button"` staat in de template —
 * zonder dat verstuurt hij het formulier. */
.werkruimte .kiezer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-blok);
  width: 100%;
  height: var(--veldhoogte);
  margin-top: 0.2em;
  padding: 0 var(--ruimte-blok);
  background: var(--papier);
  border: var(--rand-dikte) solid var(--veldrand);
  border-radius: var(--afronding);
  font-family: inherit;
  font-size: var(--maat-waarde);
  font-weight: var(--gewicht-gewoon);
  line-height: var(--regel-strak);
  color: var(--tekst);
  text-align: left;
  cursor: pointer;
}
.werkruimte .kiezer:hover { border-color: var(--link); }
.werkruimte .kiezer[aria-expanded="true"] { border-color: var(--link); }

/* De naam voluit, de code er klein achter. `baseline` en niet `center`: de
 * twee maten horen op één schrijflijn te staan, anders zweeft de code. */
.werkruimte .kiezer__gekozen {
  display: flex;
  align-items: baseline;
  gap: var(--ruimte-veld);
  min-width: 0;
}

.werkruimte .kiezer__naam {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* `--label` mag: sinds pakket 148 staat deze code nog op ÉÉN plek, en dat is
 * de dichtgeklapte knop — dus altijd op `--papier` (5,14:1). De regels in de
 * lijst tonen alleen nog de volledige naam. */
.werkruimte .kiezer__code {
  flex: 0 0 auto;
  font-size: var(--maat-label);
  line-height: var(--regel-strak);
  color: var(--label);
  font-variant-numeric: tabular-nums;
}

.werkruimte .kiezer__pijl {
  flex: 0 0 auto;
  font-size: var(--maat-pijl);
  color: var(--label);
}

/* Het paneel. GEEN schaduw, en dat wijkt bewust af van het prototype (r. 91
 * zet `box-shadow:0 10px 30px rgba(40,38,30,.16)`): Stijlwaarden zegt "geen
 * schaduw, behalve onder het papier", en dat papier is de factuur. Dezelfde
 * afweging als bij `.bevestig__venster` in pakket 140. De rand doet het werk.
 *
 * `z-index: 30` komt uit het ontwerp en ligt onder de 60 van het
 * bevestigingsvenster — dat venster hoort over de kiezer heen. */
.werkruimte .kiezer__paneel {
  position: absolute;
  top: calc(var(--veldhoogte) + 0.2em);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--papier);
  border: var(--rand-dikte) solid var(--veldrand);
  border-radius: var(--afronding);
  overflow: hidden;
}
/* `hidden` verliest het van `display:block` op een gepositioneerd blok niet,
 * maar wél zodra er ergens een `display` op komt te staan. Die ene regel maakt
 * het onafhankelijk van de volgorde. */
.werkruimte .kiezer__paneel[hidden] { display: none; }

/* De zoekregel bovenaan het paneel. De maten van `.werkruimte input` worden
 * hier bijgesteld: een veld dat tot de rand van het paneel doorloopt raakt zijn
 * eigen rand kwijt tegen die van het paneel. */
.werkruimte .kiezer__zoek {
  width: calc(100% - 2 * var(--ruimte-veld));
  margin: var(--ruimte-veld);
  padding: 0 var(--ruimte-blok);
  height: 32px;
  font-size: var(--maat-tekst);
  line-height: var(--regel-strak);
}

/* De lijst. Was een zwevende uitklaplijst met een eigen rand; nu de onderste
 * helft van het paneel, met een haarlijn tussen de zoekregel en de namen. */
.werkruimte .combobox-opts {
  max-height: 252px;                 /* ontwerp r. 96 */
  overflow-y: auto;
  border-top: var(--rand-dikte) solid var(--lijn);
}

/* De regels zijn DIRECTE `div`-kinderen van de lijst: `teken()` bouwt ze met
 * `createElement`. Maak er geen `button` of `li` van — dan zijn padding, hover
 * en cursor weg.
 *
 * DRIE KOLOMMEN SINDS PAKKET 152: de naam, het merk en het vinkje. Pakket 148
 * had er twee — de derde droeg toen de CODE, en die komt niet terug. Wat er nu
 * in staat is het merk, en dat is een stuk van de klantnaam zelf.
 *
 * De maatvoering ís de oplossing van pakket 152, dus lees hem als één geheel:
 *
 *   `minmax(0, auto)`  de naam. `auto` zodat hij niet breder wordt dan zijn
 *                      tekst, `min` op 0 zodat hij WÉL smaller mag worden dan
 *                      zijn tekst — zonder die nul weigert een rasterkolom te
 *                      krimpen en loopt de regel over in plaats van af te
 *                      kappen. Dit is de enige kolom die iets inlevert.
 *   `auto`             het merk. Geen `minmax`, dus de ondergrens blijft de
 *                      min-content-breedte van een `nowrap`-tekst: het merk
 *                      staat er altijd voluit. Dát is de gate.
 *   `1fr`              de rest van de regel, met het vinkje rechts erin
 *                      gehangen. Was de tweede kolom; staat nu achter het merk.
 *
 * DE KOLOMRUIMTE IS NUL, en dat is geen vergetelheid. Tussen de naam en de
 * streep van het merk hoort precies één SPATIE te staan — de spatie die in de
 * matrixnaam zelf staat — en niet de 8 of 12 pixels van de ruimteschaal. Die
 * spatie zit daarom in de tekst van `.kiezer__merk` (een vaste spatie, want een
 * gewone valt aan het begin van een rastercel weg), zodat de regel op het
 * scherm LETTERLIJK de matrixnaam is: 'UNHCR — Credo', niet 'UNHCR  — Credo'.
 *
 * Het vinkje lijdt er niet onder: dat hangt met `justify-self: end` aan de
 * rechterkant van de derde kolom en staat dus even ver weg als altijd. */
.werkruimte .kiezer__regel {
  display: grid;
  grid-template-columns: minmax(0, auto) auto 1fr;
  gap: 0;
  align-items: baseline;
  padding: var(--ruimte-veld) var(--ruimte-groep);
  font-size: var(--maat-tekst);
  line-height: var(--regel-compact);
  cursor: pointer;
}

/* Het merk achter de naam (pakket 152). GEEN eigen maat en GEEN eigen kleur:
 * dit is geen bijschrift bij de naam, het is het laatste stuk van diezelfde
 * naam. Zou hij hier `--label` krijgen — zoals de code in de dichtgeklapte
 * kiezer — dan stond dat grijs ook op de aangewezen regel, en die heeft
 * `--accent-licht` als ondergrond; `--label` is alleen op wit en op `--papier`
 * gemeten.
 *
 * `white-space: nowrap` is het slot: samen met de `auto`-kolom hierboven maakt
 * het de merkkolom onkrimpbaar. Haal er één van weg en de afkapping van pakket
 * 150 is terug. */
.werkruimte .kiezer__merk { white-space: nowrap; }

/* "De actieve regel gevuld met de accentkleur" (§4.2). Dat is de LICHTE
 * variant: `--accent` zelf is een vlak waar alleen donkere tekst op mag, en
 * een hele regel in #9ACD32 zou de lijst tot een verkeerslicht maken. */
.werkruimte .kiezer__regel--actief { background: var(--accent-licht); }

/* Het vinkje bij de gekozen klant. Kleur alléén is geen signaal (§8), dus het
 * is een teken en geen gekleurde regel.
 *
 * `justify-self: end` sinds pakket 152: het vinkje staat nu in de `1fr`-kolom
 * die de rest van de regel opvult, en zonder dit zou het aan de LINKERkant van
 * die kolom gaan hangen — vlak achter het merk, op een andere plek per regel. */
.werkruimte .kiezer__vink {
  width: 1em;
  justify-self: end;
  color: var(--link);
  text-align: right;
}

/* Geen resultaat. Eén regel, geen tweede die zegt dat je de spelling moet
 * nakijken (§0b). Geen `cursor: pointer`: er valt niets te kiezen. */
.werkruimte .kiezer__leeg {
  padding: var(--ruimte-blok) var(--ruimte-groep);
  font-size: var(--maat-tekst);
  line-height: var(--regel-compact);
  color: var(--label);
}

/* Wat er uit de klantkeuze volgt: entiteit · betaaltermijn · btw. Bijzaak, dus
 * de bijzaakmaat; en `--bijzaak` als kleur omdat deze regel iets zegt dat je
 * moet kunnen lezen, niet een label boven een veld. */
.werkruimte .kiezer__gevolg {
  margin: var(--ruimte-veld) 0 0;
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-tekst);
  color: var(--bijzaak);
}

/* ---- De melding boven het formulier ------------------------------------ */

/* Tot pakket 103 was `<p class="{{ flash.level }}">` op dit scherm ONGESTYLED:
 * `.error`, `.success` en `.info` bestonden nergens in dit bestand, dus de
 * melding viel terug op kale browser-opmaak.
 *
 * De vorm is die van de drie meldingsoorten hierboven, maar de klassenamen
 * komen uit de server (`flash.level`) en de HTML mag niet veranderen: drie
 * tests zoeken die regel met een regex op de letterlijke HTML en eisen een `<p>`
 * met UITSLUITEND `class="{{ flash.level }}"`. Daarom wordt hier op de
 * server-klasse gestyled en niet op `.melding--…`.
 *
 * `success` krijgt dezelfde vorm als `info`: Stijlwaarden kent drie soorten en
 * geen vierde, en geen groen vinkje. */

/* Blokkerend: een teken, een kleur, een rand, een vlak. */
.werkruimte .error {
  display: flex;
  align-items: flex-start;
  gap: var(--ruimte-veld);
  padding: var(--ruimte-blok) 14px;
  background: var(--fout-vlak);
  border: var(--rand-dikte) solid var(--fout-rand);
  border-radius: var(--afronding);
  color: var(--fout-tekst);
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-compact);
}

/* Het ✕ komt uit CSS en niet uit de HTML, want die regel ligt vast in drie
 * tests. Zelfde blokje als `.melding__teken`: 16px wit op --fout, zodat het ook
 * zonder kleurzicht een teken is en niet alleen een andere kleur letter. */
.werkruimte .error::before {
  content: "\2715";
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--fout);
  color: var(--papier);
  font-size: var(--maat-teken);
  line-height: 16px;
  text-align: center;
  border-radius: var(--afronding);
}

/* Ter informatie: geen teken, geen streep, geen vlak. Alleen kleiner en
 * grijzer dan de tekst eromheen — zoals `.melding--informatie`, maar met
 * --bijzaak: dit staat op --bureaublad. */
.werkruimte .info,
.werkruimte .success {
  padding: 0 2px;
  font-size: var(--maat-label);
  line-height: var(--regel-tekst);
  color: var(--bijzaak);
}

/* ===================================================================== */
/* Het vel: de factuur rechts, terwijl je links invult (pakket 105)       */
/* Vorm uit `design-handoff/Werkruimte v2.dc.html` r. 72 (het raster),    */
/* 588-760 (het vel) en 2036-2047 / 2226 (de berekende stijlen).          */
/* ===================================================================== */

/* De werkruimte werd in pakket 103 één `div`; hier wordt hij een raster van
 * twee kolommen. Het formulier zit sinds dit pakket in `.werkruimte__invoer`,
 * zodat het raster de KOLOMMEN kan zetten zonder dat er in het formulier zelf
 * iets verschuift — daar hangen drie plekken aan de DOM-VOLGORDE (zie
 * WERKRUIMTE_RAAKVLAKKEN.md §5).
 *
 * `620px` als minimum en `700px` vast voor het vel, met een schuifbalk als het
 * venster smaller is. Dat is wat het ontwerp doet en het is met opzet: een
 * factuur die halveert is erger dan een schuifbalk.
 *
 * Dit sluit meteen het gat dat na pakket 103 zichtbaar werd — sinds pakket 101
 * is `body { max-width: 720px }` dood en liepen de invoervelden over de volle
 * breedte uit. De begrenzing komt nu uit dit raster en niet uit een herstelde
 * `max-width`; welke kolombreedte het scherm heeft is een vormbesluit en geen
 * regel die je terugzet. */
.werkruimte {
  display: grid;
  grid-template-columns: minmax(620px, 1fr) 700px;
  align-items: stretch;
  overflow-x: auto;
  /* De marge die `.werkvlak` om elk scherm zet, wordt hier ongedaan gemaakt:
   * de twee kolommen dragen hun eigen ruimte en moeten tot aan de rand lopen,
   * anders zweeft het bureaublad in een kader. */
  margin: calc(var(--ruimte-sectie) * -1) calc(var(--ruimte-marge) * -1)
          calc(var(--ruimte-marge-ruim) * -1);
}

/* De invoerkolom. `--vlak` is in Stijlwaarden letterlijk "invoerkolom, balk". */
.werkruimte__invoer {
  min-width: 0;
  padding: var(--ruimte-sectie) var(--ruimte-marge) var(--ruimte-marge-ruim);
  background: var(--vlak);
  border-right: var(--rand-dikte) solid var(--lijn);
}

/* De vellenkolom staat op het bureaublad, zodat het witte papier eruit springt
 * in plaats van op te gaan in het scherm. Let op: `--label` (#6f6e63) haalt op
 * dit vlak maar 4,16:1 en mag hier dus niet staan — alles wat hier grijs is
 * gebruikt `--bijzaak`. Op het papier zelf (wit) mag `--label` weer wél. */
.vel {
  min-width: 0;
  padding: var(--ruimte-sectie) var(--ruimte-marge-ruim) var(--ruimte-marge-ruim);
  background: var(--bureaublad);
}

.vel__leeg {
  border: var(--rand-dikte) dashed var(--breuk);
  padding: var(--ruimte-marge-ruim) var(--ruimte-sectie);
  text-align: center;
  font-size: var(--maat-label);
  line-height: var(--regel-label);
  letter-spacing: var(--letterafstand-label);
  text-transform: uppercase;
  color: var(--bijzaak);
}

.vel__melding { margin-bottom: var(--ruimte-groep); }
.vel__melding > * + * { margin-top: var(--ruimte-blok); }

/* De knop die de doorrekening opnieuw start, en de uitleg waarom hij er staat.
 * Ze horen bij de let-op-melding en krijgen daarom geen eigen vlak. */
.vel__verouderd { margin-bottom: var(--ruimte-veld); }
.vel__knop-uitleg {
  margin: var(--ruimte-veld) 0 0;
  font-size: var(--maat-label);
  line-height: var(--regel-tekst);
  color: var(--bijzaak);
}
.vel__foutkop { font-weight: var(--gewicht-kop); }
.vel__fouttekst { margin-top: 2px; }

/* De weg naar de plek waar het opgelost wordt (pakket 140). Een blokkerende
 * melding zegt wat er moet gebeuren; staat die plek elders in het dashboard,
 * dan hoort de link erbij en niet de naam van een pagina om zelf te zoeken.
 * `--link` haalt 6,1:1 op wit en staat hier op `--fout-vlak` (#fdf5f4), dus
 * ruim boven de norm; de onderstreping draagt het ook zonder kleur. */
.vel__foutlink {
  display: inline-block;
  margin-top: var(--ruimte-veld);
  color: var(--link);
}
.vel__foutlink:hover { color: var(--link-hover); }

/* ===================================================================== */
/* Het bevestigingsvenster bij een klantwissel (pakket 140)              */
/* Vorm uit `Werkruimte v2.dc.html` r. 761-773; waarden uit Stijlwaarden. */
/* ===================================================================== */

/* "Waarschuwen voordat het weg is" [V — Annelie 22-08]. Het venster ligt over
 * de hele werkruimte: dit is geen melding naast de invoer maar een vraag die
 * eerst beantwoord moet worden, en die keuze is nergens anders te maken.
 *
 * Zichtbaarheid loopt via het `hidden`-attribuut en niet via inline
 * `style.display`. Dat mag hier — en alleen hier en bij het vel — omdat dit
 * blok buiten het formulier staat en geen van de acht zichtbaarheidsfuncties
 * van `nieuw.html` het kent. Binnen het formulier blijft `style.display` de
 * enige eigenaar; `tests/js/run_form_dispatch.js` leest zichtbaarheid daar af
 * als `el.style.display !== 'none'` en zou van een klasse blind worden. */
.bevestig {
  position: fixed;
  inset: 0;
  z-index: 60;                      /* ontwerp r. 762 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ruimte-sectie);
  background: var(--sluier);
}

/* `hidden` verliest het normaal van `display:flex`; die ene regel zet dat
 * recht. Zonder haar staat het venster altijd open. */
.bevestig[hidden] { display: none; }

/* GEEN schaduw, en dat wijkt bewust af van het prototype.
 *
 * `Werkruimte v2.dc.html` r. 763 zet `box-shadow:0 20px 60px rgba(40,38,30,.28)`
 * onder dit venster. Stijlwaarden zegt "geen schaduw, behalve onder het
 * papier", en dat papier is de factuur — niet een venster. Stijlwaarden wint
 * van het prototype; de afwijking staat in het rapport. Het venster komt ook
 * zonder schaduw los van de pagina: de sluier eronder en de rand eromheen doen
 * dat werk al. */
.bevestig__venster {
  width: min(460px, 100%);          /* ontwerp r. 763 */
  padding: var(--ruimte-sectie) var(--ruimte-sectie) var(--ruimte-groep);
  background: var(--papier);
  border: var(--rand-dikte) solid var(--veldrand);
  border-radius: var(--afronding);
  text-align: center;
}

/* Het prototype zet 19px; Stijlwaarden kent die maat niet. Stijlwaarden wint
 * (zie de notitie bij de losstaande schermen), dus dit is de paginatitelmaat
 * met de bijbehorende regelhoogte. */
.bevestig__kop {
  margin: 0 0 var(--ruimte-blok);
  font-weight: var(--gewicht-kop);
  font-size: var(--maat-titel);
  line-height: var(--regel-kop);
  color: var(--tekst);
}

.bevestig__tekst {
  margin: 0;
  font-size: var(--maat-tekst);
  line-height: var(--regel-tekst);
  color: var(--bijzaak);
  text-wrap: pretty;
}

/* De knop die NIETS weggooit is de nadrukkelijke, en staat rechts — zo staat
 * het in het ontwerp, en zo is de gewoonte: de veilige keuze is de
 * vanzelfsprekende. */
.bevestig__knoppen {
  display: flex;
  gap: var(--ruimte-blok);
  justify-content: center;
  margin-top: var(--ruimte-sectie);
}

/* De tweede knop van het venster: dezelfde vorm als de primaire, maar in de
 * tinten van een gewone knop. Zelfde staal als 'Markeer als verstuurd'. */
.bevestig__knoppen .knop:not(.knop--primair) {
  background: var(--vlak);
  border-color: var(--veldrand);
  color: var(--tekst);
}
.bevestig__knoppen .knop:not(.knop--primair):hover {
  background: var(--knop-tweede-hover);
}

/* De stapel. Eén papier per factuur die deze invoer oplevert: bij FSH, LAAS-HK
 * en het VL/NPL-factuurplan zijn dat er twee. Sinds pakket 144 staan die twee
 * niet meer onder elkaar maar achter TABBLADEN (§4.1, V — Annelie 25-08). */
.vel__stapel {
  max-width: 600px;      /* ontwerp r. 2046 — de breedte van het papier */
  margin: 0 auto;
}
.vel__stapel > * + * { margin-top: var(--ruimte-sectie); }

/* ---- De tabbladen (pakket 144) ----------------------------------------- */

/* Vorm uit `Werkruimte v2.dc.html` r. 593-599 en 2212-2218: de tabs staan op
 * de rand van het papier, het actieve tabblad sluit erop aan.
 *
 * Er zit geen ruimte tussen de balk en het blad eronder — daarom de negatieve
 * marge hieronder, die de `--ruimte-sectie` van `.vel__stapel > * + *`
 * opheft. Een tabblad dat los boven zijn papier zweeft ziet er niet uit als
 * een tabblad. */
.vel__tabs {
  display: flex;
  gap: var(--ruimte-kier);
  align-items: flex-end;
}
.vel__tabs + * { margin-top: 0; }

.vel__tab {
  padding: var(--ruimte-veld) var(--ruimte-groep);
  background: var(--rand-uit);
  border: var(--rand-dikte) solid var(--rand-uit);
  border-bottom: 0;
  /* Eén waarde, op alle vier de hoeken. Het prototype geeft de tabs helemaal
   * geen afronding (r. 2216-2217) en mijn eerste versie rondde alleen bovenaan
   * af — allebei sneuvelen ze op de regel van Stijlwaarden: "2px afronding",
   * overal dezelfde. `test_de_afronding_is_overal_die_van_stijlwaarden` telt
   * dat na. Op 2px is het verschil met een rechte onderkant niet te zien, en
   * de onderrand van het actieve tabblad valt sowieso weg tegen het papier. */
  border-radius: var(--afronding);
  font-family: inherit;
  font-size: var(--maat-label);
  font-weight: var(--gewicht-gewoon);
  line-height: var(--regel-label);
  /* Op `--rand-uit` (#ded9cd) haalt `--label` 3,86:1 en zakt door de norm;
   * `--bijzaak` haalt er 5,3:1. Dezelfde afweging als bij de vellenkolom. */
  color: var(--bijzaak);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
}

/* Het actieve tabblad is wit, net als het papier eronder, en het zwaardere
 * gewicht draagt het verschil ook zonder kleur. */
.vel__tab--actief {
  background: var(--papier);
  border-color: var(--rand-uit);
  color: var(--tekst);
  font-weight: var(--gewicht-kop);
}

/* Het blad zelf draagt geen opmaak: het is er alleen om één papier met zijn
 * eventuele deelkop te kunnen verbergen. Geen `display` — het schakelt met
 * `hidden`, en de browserstandaard doet de rest. */

.vel__deelkop {
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-tekst);
  color: var(--bijzaak);
}

/* Tijdens het rekenen blijft het vel staan zoals het is, gedempt. Niet
 * leegmaken: een leeg vel dat weer volloopt leest als een fout, en bij elf
 * seconden is dat het verschil tussen wachten en denken dat het stuk is. */
.vel__stapel--rekent,
.vel__stapel--verouderd { opacity: .55; }

/* ---- Het papier -------------------------------------------------------- */

/* De ENIGE schaduw in het hele systeem. Stijlwaarden zegt letterlijk "geen
 * schaduw, behalve onder het papier", en dit ís dat papier; pakket 102 en 103
 * hebben elders schaduwen wéggehaald op precies dezelfde regel. De waarde komt
 * uit `Werkruimte v2.dc.html` r. 2047, want Stijlwaarden noemt de schaduw wel
 * maar geeft er geen getal bij — dezelfde afspraak als bij de focusring.
 *
 * De binnenmarge is 36px en niet de 44/40 van het prototype: Stijlwaarden zegt
 * "de ruimteschaal loopt door naar 36 en 56 voor de marges van het vel", en 44
 * en 40 staan niet op die schaal. 56 is de marge eromheen (`.vel` hierboven),
 * 36 die erbinnen. */
.vel__papier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 660px;     /* ontwerp r. 2047 — het papier houdt zijn vorm */
  padding: var(--ruimte-marge);
  background: var(--papier);
  border: var(--rand-dikte) solid var(--rand-uit);
  box-shadow: var(--papier-schaduw);
}

.vel__kop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ruimte-sectie);
}

.vel__logo { display: block; width: auto; }

.vel__titel {
  margin-top: var(--ruimte-blok);
  font-weight: var(--gewicht-kop);
  font-size: var(--maat-waarde);
  line-height: var(--regel-kop);
}

.vel__afzender { text-align: right; }

.vel__entiteit {
  font-weight: var(--gewicht-kop);
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-compact);
}

.vel__afzender-regel {
  font-size: var(--maat-label);
  line-height: var(--regel-label);
  color: var(--bijzaak);
}

/* De twee identificatieregels (KvK nr / UST-IDNr, BTW nr) en de web/mailregels.
 * Op wit haalt --label 5,14:1. */
.vel__afzender-nr {
  font-size: var(--maat-label);
  line-height: var(--regel-label);
  color: var(--label);
}
.vel__afzender-nr:first-of-type { margin-top: var(--ruimte-kier); }

/* ---- Aan-blok en nummerblok -------------------------------------------- */
.vel__adressering {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--ruimte-sectie);
  margin-top: var(--ruimte-marge);
}

.vel__aan { min-width: 0; }

/* 'Aan' / 'An' / 'A' staat in ZINSVORM en niet in gespatieerd kapitaal. Het
 * prototype zet er `text-transform:uppercase` op, maar Stijlwaarden zegt:
 * "Kapitaal met spatiëring is er precies twee: het label in de gutter en de
 * kolomkop op de factuur. Alle andere labels staan in gewone zinsvorm, zodat
 * kapitaal iets blijft betekenen." Dit is geen van beide. */
.vel__aanlabel {
  font-size: var(--maat-label);
  line-height: var(--regel-label);
  color: var(--label);
}

.vel__klantnaam {
  font-weight: var(--gewicht-kop);
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-compact);
}

.vel__adresregel,
.vel__klantbtw,
.vel__ref {
  font-size: var(--maat-label);
  line-height: var(--regel-label);
  color: var(--bijzaak);
}
.vel__klantbtw, .vel__ref { margin-top: var(--ruimte-kier); }

.vel__nummerblok {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vel__nummerlabel {
  font-size: var(--maat-label);
  line-height: var(--regel-tekst);
  color: var(--label);
}

/* Het factuurnummer staat op dezelfde sport als het totaalbedrag: 22 / 600.
 * Stijlwaarden zet die sport neer met precies dit voorbeeld erbij — "2026105 ·
 * € 20.500,43" (r. 89) — dus nummer en bedrag horen er samen op. Het prototype
 * zet het nummer op 15px; 15 staat in Stijlwaarden alleen op gewicht 400 ("de
 * waarde in de invoerkolom"), en 15/600 is dus geen sport maar een mengsel.
 * Stijlwaarden wint, de regel sinds pakket 101. */
.vel__nummer {
  font-weight: var(--gewicht-nadruk);
  font-size: var(--maat-titel);
  line-height: var(--regel-kop);
}

.vel__datum,
.vel__verval {
  font-size: var(--maat-label);
  line-height: var(--regel-label);
  color: var(--bijzaak);
}

/* ---- De periodestrook --------------------------------------------------- */
/* Zonder periode staat de strook er wel, maar gedempt en met 'nog geen
 * periode' erin: er hoort iets te komen, en dat moet je zien. */
.vel__strook {
  margin: var(--ruimte-sectie) 0 var(--ruimte-groep);
  padding: var(--ruimte-veld) var(--ruimte-blok);
  background: var(--accent-licht);
  color: var(--op-accent);
  font-size: var(--maat-label);
  line-height: var(--regel-tekst);
}
.vel__strook--leeg { opacity: .4; }

/* ---- De tabel ----------------------------------------------------------- */
/* Vier kolommen: omschrijving, aantal, stuksprijs, subtotaal. De drie vaste
 * breedtes komen uit het ontwerp (r. 691) en gelden op één plek; ze zeggen
 * niets over de rest van het systeem en zijn daarom geen variabele. */
.vel__tabelkop,
.vel__regel {
  display: grid;
  grid-template-columns: 1fr 62px 82px 100px;
  gap: 0 10px;
}

/* De tweede — en laatste — gespatieerde kapitaal van het systeem. */
.vel__tabelkop {
  padding-bottom: var(--ruimte-kier);
  border-bottom: var(--rand-dikte) solid var(--tekst);
  font-size: var(--maat-label);
  line-height: var(--regel-tekst);
  letter-spacing: var(--letterafstand-label);
  text-transform: uppercase;
  color: var(--label);
}

.vel__regel {
  padding: var(--ruimte-kier) 0;
  border-bottom: var(--rand-dikte) solid var(--lijn);
  font-size: var(--maat-label);
  line-height: var(--regel-ruim);
  font-variant-numeric: tabular-nums;
}

.vel__regel-oms { min-width: 0; overflow-wrap: anywhere; }
.vel__rechts { text-align: right; }

.vel__geen-regels {
  padding: var(--ruimte-groep) 0;
  font-size: var(--maat-label);
  line-height: var(--regel-label);
  color: var(--label);
}

/* ---- Totalen ------------------------------------------------------------ */
.vel__totaalhoek {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--ruimte-sectie);
}

.vel__totalen { min-width: 250px; }   /* ontwerp r. 741 */

.vel__totaalraster {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--ruimte-kier) var(--ruimte-sectie);
  font-size: var(--maat-label);
  line-height: var(--regel-tekst);
  font-variant-numeric: tabular-nums;
}

.vel__totaallabel { color: var(--bijzaak); }

.vel__eindregel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ruimte-sectie);
  margin-top: var(--ruimte-blok);
  padding-top: var(--ruimte-blok);
  border-top: 2px solid var(--tekst);
  font-variant-numeric: tabular-nums;
}

.vel__eindlabel {
  font-size: var(--maat-label);
  line-height: var(--regel-kop);
}

/* Het bedrag waar alles om draait. Stijlwaarden zet het factuurnummer mét
 * bedrag op 22px/600; het prototype gebruikt hier 19px, en die maat staat niet
 * op de ladder (22 · 15 · 14 · 13 · 12). Stijlwaarden wint. */
.vel__eindbedrag {
  font-weight: var(--gewicht-nadruk);
  font-size: var(--maat-titel);
  line-height: var(--regel-kop);
}

/* ---- De voet ------------------------------------------------------------ */
/* `margin-top: auto` duwt de voet naar onderen; daarvoor staat het papier op
 * flex-column. Zo staat de betaalzin altijd onderaan het vel, ook bij een
 * factuur met twee regels. */
.vel__voet {
  margin-top: auto;
  padding-top: var(--ruimte-marge);
}

.vel__betaalzin {
  max-width: 52ch;
  margin: 0 0 var(--ruimte-blok);
  font-size: var(--maat-label);
  line-height: var(--regel-tekst);
  color: var(--bijzaak);
}

.vel__betaalblok {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--ruimte-groep);
  padding-top: var(--ruimte-blok);
  border-top: var(--rand-dikte) solid var(--lijn);
  font-size: var(--maat-label);
  line-height: var(--regel-label);
  color: var(--bijzaak);
}

.vel__betaallabel { color: var(--label); }
.vel__afwijkend { color: var(--link); }

/* ---- De bewerkbare velden ----------------------------------------------- */
/* Zes velden op het vel zijn een SPIEGEL van een veld dat links al bestaat:
 * klantnaam, eerste adresregel, referentie, factuurnummer, factuurdatum en het
 * btw-percentage. Bewerken schrijft de waarde in dát veld en vraagt een nieuwe
 * doorrekening aan — het formulier links blijft de enige bron.
 *
 * In rust een stippelonderstreping, bij aanwijzen het lichte accent, na een
 * klik een invoerveld met een groene onderlijn. De focusring komt van
 * `:focus-visible` in de grondslag en geldt hier dus vanzelf; het element is
 * met het toetsenbord te bereiken (`tabindex="0"`) en met Enter of spatie te
 * openen. */
.vel__bewerk { display: inline; }

.vel__bewerk-rust {
  border-bottom: var(--rand-dikte) dotted var(--label);
  cursor: text;
}
.vel__bewerk-rust:hover { background: var(--accent-licht); }
.vel__bewerk-rust--leeg { color: var(--bijzaak); }

.vel__bewerk-veld {
  padding: 0;
  border: none;
  border-bottom: var(--rand-dikte) solid var(--link);
  background: transparent;
  color: var(--tekst);
  font: inherit;
  text-align: inherit;
  width: 110px;
}
.vel__bewerk-veld--breed { width: 100%; }

/* De vel-onderdelen die de JS aan- en uitzet. Dit is nieuwe opmaak op nieuwe
 * elementen; het `display`-verbod uit pakket 103 gaat over de blokken die de
 * FORMULIER-JS bedient, en die staan links. */
.vel [hidden] { display: none; }

/* ===================================================================== */
/* Het Backstage-blok: het voorstel, de kalender, de twee meldingen      */
/* (pakket 141)                                                          */
/* Vorm uit `Werkruimte v2.dc.html` r. 279-338 en                        */
/* `ontwerp-bron1-definitief.html`; alle waarden uit Stijlwaarden.       */
/* ===================================================================== */

/* STAP 1 — het voorstel.
 *
 * Eén regel: "Week 21 + 22 · 18 t/m 31 mei 2026", met de knoppen eronder. De
 * datums op een eigen regel zetten zou de tweede regel onder een kop zijn die
 * §0b van de ontwerpopdracht eruit haalt — "de fout die in dit project het
 * vaakst terugkomt". */
.werkruimte .periode-voorstel__regel {
  margin: 0;
  font-size: var(--maat-waarde);
  line-height: var(--regel-compact);
  color: var(--tekst);
}

.werkruimte .periode-voorstel__periode { font-weight: var(--gewicht-kop); }

/* De datums zijn bijzaak naast het weeknummer: dit product denkt in weken, de
 * datums zeggen welke dagen erin vallen. `--bijzaak` en niet `--label`, want
 * dit staat op de invoerkolom (#f6f5f2) én in een let-op-melding op wit, en
 * `--label` haalt zijn 4,7:1 alleen op die twee vlakken. */
.werkruimte .periode-voorstel__datums {
  color: var(--bijzaak);
  font-size: var(--maat-bijzaak);
}

/* Het scheidingsteken hoort bij de opmaak en niet bij de tekst: zo kan een
 * test de twee stukken los teruglezen zoals de server ze levert. */
.werkruimte .periode-voorstel__datums::before {
  content: "\00b7";
  margin: 0 .45em;
  color: var(--breuk);
}

/* HERKOMST, en dat is het enige wat hier onder een kop mag staan: "waar een
 * getal vandaan komt" (§0b, §4.4). Zonder deze regel is het voorstel niet na
 * te rekenen — en op een omgeving met testconcepten in de tabel is dat het
 * verschil tussen een voorstel dat je vertrouwt en een dat je nakijkt.
 *
 * PAKKET 148 maakt hem STIL: geen marge erboven meer, dus hij hangt onder de
 * voorstelregel in plaats van ernaast te concurreren. Annelie: "Periode
 * voorstel van de weken moet cleaner." De kleine grijze maat van Stijlwaarden
 * had hij al. Zodra de werving is opgehaald verdwijnt hij met het hele
 * voorstelblok — dan neemt '355 maandelijks · 132 eenmalig' het over, en twee
 * regels over hetzelfde is precies de ruis die weg moest. */
.werkruimte .periode-voorstel__herkomst {
  margin: 0;
  font-size: var(--maat-label);
  line-height: var(--regel-tekst);
  color: var(--label);
}

.werkruimte .periode-knoppen {
  display: flex;
  /* Pakket 154: sinds de reden bij de knop staat kan de regel langer zijn dan
   * wat er naast past ("Kies eerst een klant; zonder klant valt er niets door
   * te rekenen."). Zonder dit zou die regel de KNOP samenknijpen; nu valt hij
   * eronder, en dat is nog steeds bij de knop. */
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-veld);
  margin: var(--ruimte-blok) 0 0;
}

/* De groene knop van Stijlwaarden. `.knop--primair` bestaat al, maar die hoort
 * bij de omhulling en niet bij dit formulier — `.werkruimte` heeft zijn eigen
 * knopopmaak in het `<style>`-blok van `nieuw.html`, en twee regelsets op één
 * element vechten om dezelfde eigenschappen. Daarom een eigen naam met
 * dezelfde waarden. */
.werkruimte .periode-knop--primair {
  font-weight: var(--gewicht-kop);
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-strak);
  padding: 9px 14px;
  border: var(--rand-dikte) solid var(--knop-rand);
  border-radius: var(--afronding);
  background: var(--knop);
  color: var(--papier);
  cursor: pointer;
}

.werkruimte .periode-knop--primair:hover { background: var(--knop-rand); }

.werkruimte .periode-knop--primair:focus-visible,
.werkruimte .periode-knop:focus-visible {
  outline: var(--focus-dikte) solid var(--focus-kleur);
  outline-offset: var(--focus-afstand);
}

/* De tweede knop: wit met een rand, zoals 'Markeer als verstuurd' in
 * Stijlwaarden › Ruimte. Een EIGEN naam en niet de bestaande `.secondary` van
 * dit formulier: die klasse hangt onder acht andere knoppen op dit scherm
 * (+ verkoopweek, regel weg, het kruisje van een correctieregel) en die
 * meeverven is een herstyling van het hele formulier — dat is werk voor het
 * pakket dat daarover gaat, niet bijvangst hier. */
.werkruimte .periode-knop {
  font-weight: var(--gewicht-gewoon);
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-strak);
  padding: 9px 14px;
  border: var(--rand-dikte) solid var(--veldrand);
  border-radius: var(--afronding);
  background: var(--papier);
  color: var(--tekst);
  cursor: pointer;
}

.werkruimte .periode-knop:hover { background: var(--knop-tweede-hover); }

/* ---- PAKKET 154: de dode stand, en de knoppen die er nog geen vorm hadden -- */

/* Zolang de POORT van het vel dicht staat doet 'Ophalen' niets — hij roept
 * `Vel.instantie.vraagOp(true)` aan, en die keert bij een ontbrekend
 * factuurnummer meteen terug. Annelie, 23-09: "Ik klik op de knop ophalen maar
 * er gebeurt niets."
 *
 * Dit is de dode knop van Stijlwaarden › Ruimte, randen, velden ("Aanmaken"):
 * geen vlak, een lichtere rand, grijze letter, geen wijzende cursor. Dezelfde
 * waarden als `.knop--uit` onderaan dit bestand; een eigen regelset omdat
 * `.periode-knop` en `.knop` twee losse families zijn en er dan twee regelsets
 * om dezelfde eigenschappen zouden vechten. */
.werkruimte .periode-knop--primair:disabled,
.werkruimte .periode-knop:disabled {
  background: transparent;
  border-color: var(--rand-uit);
  color: var(--bijzaak);
  cursor: default;
}

.werkruimte .periode-knop--primair:disabled:hover,
.werkruimte .periode-knop:disabled:hover { background: transparent; }

/* De reden staat ERNAAST, niet elders. De melding bij het vel blijft staan waar
 * hij staat; dit is een toevoeging aan de knop, geen verhuizing. De vorm is
 * 'ter informatie' uit Stijlwaarden — geen teken, geen streep, geen vlak — want
 * de blokkerende vorm heeft het vel al. De klassen `melding melding--informatie`
 * staan op het element zelf; hier staat alleen waar hij hangt.
 *
 * `--label` (#6f6e63) mag hier: de invoerkolom staat op --vlak (#f6f5f2), en
 * daar haalt dat grijs zijn contrast. Op het bureaublad ernaast zou het niet
 * mogen — zie `.vel`. */
.werkruimte .periode-knoppen__reden {
  min-width: 0;
  margin-left: var(--ruimte-blok);
}

/* De acht knoppen van dit formulier die nog een kale browserknop waren:
 * 'Haal aantallen op uit Metabase', 'Bestand inlezen', 'Ophalen uit Backstage',
 * 'Week toevoegen', 'Nakomertje toevoegen', '+ Regel toevoegen', 'regel weg' en
 * het kruisje van een correctieregel. Ze dragen allemaal `class="secondary"`.
 *
 * Die klasse werd tot nu toe nergens gestyled — `dashboard.css` liet haar
 * bewust met rust ("meeverven is een herstyling van het hele formulier, werk
 * voor het pakket dat daarover gaat"). Dit ÍS dat pakket, en verder dan de
 * knopvorm gaat het niet.
 *
 * `.secondary` blijft de klassenaam: op één van die knoppen staat er
 * `.correctie-del` naast, en dát is een eventhaak die met `querySelector`
 * teruggezocht wordt (WERKRUIMTE_RAAKVLAKKEN §7). Hier verandert alleen de
 * opmaak, geen naam en geen element. */
.werkruimte .secondary {
  font-weight: var(--gewicht-gewoon);
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-strak);
  padding: 9px 14px;
  border: var(--rand-dikte) solid var(--veldrand);
  border-radius: var(--afronding);
  background: var(--papier);
  color: var(--tekst);
  cursor: pointer;
}

.werkruimte .secondary:hover { background: var(--knop-tweede-hover); }

.werkruimte .secondary:focus-visible {
  outline: var(--focus-dikte) solid var(--focus-kleur);
  outline-offset: var(--focus-afstand);
}

/* STAP 2 — de kalender.
 *
 * "Dezelfde woorden en dezelfde prikker als Backstage, want daar zitten de
 * collega's dagelijks in" [V — Annelie 22-08]. De breedte (274px) en het
 * raster (30px voor de weekkolom, daarna zeven gelijke dagen) komen uit
 * `Werkruimte v2.dc.html` r. 303-316.
 *
 * GEEN schaduw en GEEN ronding voorbij 2px: Stijlwaarden zegt "2px afronding ·
 * 1px randen · geen schaduw, behalve onder het papier", en dat papier is de
 * factuur. Het prototype van augustus (`ontwerp-bron1-definitief.html`) tekent
 * 8px ronding; Stijlwaarden wint van het prototype. */
.werkruimte .kalender {
  width: 274px;
  max-width: 100%;
  margin-top: var(--ruimte-blok);
  padding: var(--ruimte-blok);
  background: var(--papier);
  border: var(--rand-dikte) solid var(--veldrand);
  border-radius: var(--afronding);
}

.werkruimte .kalender__maand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ruimte-veld);
  font-weight: var(--gewicht-kop);
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-compact);
}

.werkruimte .kalender__pijl {
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--label);
  font: inherit;
  cursor: pointer;
}

.werkruimte .kalender__pijl:hover { color: var(--tekst); }

.werkruimte .kalender__pijl:focus-visible,
.werkruimte .kalender__dag:focus-visible {
  outline: var(--focus-dikte) solid var(--focus-kleur);
  outline-offset: var(--focus-afstand);
}

.werkruimte .kalender__rij {
  display: grid;
  grid-template-columns: 30px repeat(7, 1fr);
  gap: 0 2px;
  align-items: center;
}

.werkruimte .kalender__rij--kop { padding-bottom: 6px; }

/* De weeknummers, links, met een haarlijn ertussen. Niet decoratief: alle
 * factuurperioden in dit systeem lopen op weken — 'WERVING WEEK 21 + 22' komt
 * straks letterlijk op de factuur — en in de kalender zie je zo of je een
 * hele week pakt. `tabular-nums` houdt de kolom recht. */
.werkruimte .kalender__wk,
.werkruimte .kalender__dagkop {
  font-size: var(--maat-teken);
  line-height: 1.4;
  color: var(--label);
}

.werkruimte .kalender__wk {
  text-align: right;
  padding-right: 7px;
  border-right: var(--rand-dikte) solid var(--lijn);
  font-variant-numeric: tabular-nums;
}

.werkruimte .kalender__dagkop { text-align: center; }

.werkruimte .kalender__dag {
  padding: 5px 0;
  border: 0;
  border-radius: var(--afronding);
  background: none;
  color: var(--tekst);
  font: var(--gewicht-gewoon) var(--maat-bijzaak)/1.4 var(--letter);
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
}

.werkruimte .kalender__dag:hover { background: var(--vlak); }

/* Een dag uit de vorige of volgende maand. Blijft klikbaar — een periode die
 * over een maandgrens loopt is de normale zaak hier, niet de uitzondering. */
.werkruimte .kalender__dag--buiten { color: var(--breuk); }

/* "De gekozen periode kleurt door." De twee uiteinden vol, alles ertussen
 * licht; zo zie je in één oogopslag of je hele weken pakt. */
.werkruimte .kalender__dag--reeks {
  background: var(--accent-licht);
  color: var(--op-accent);
}

.werkruimte .kalender__dag--rand {
  background: var(--knop);
  color: var(--papier);
  font-weight: var(--gewicht-kop);
}

.werkruimte .kalender__dag--rand:hover { background: var(--knop-rand); }

/* De twee let-op-meldingen van dit blok: 'deze periode staat al op een
 * factuur' en 'dit is er gevonden'. Vorm uit `.melding--letop` hierboven —
 * alleen een streep links, geen teken en geen gekleurd vlak, want de factuur
 * kan gewoon door. */
.werkruimte .periode-melding {
  display: flex;
  align-items: center;
  gap: var(--ruimte-blok);
  margin: var(--ruimte-blok) 0 0;
}

.werkruimte .periode-melding__tekst { flex: 1; }

/* PAKKET 153 — DE AGENDA-KNOP IS VAN ONS.
 *
 * Annelie, 23-09-2026: "Ik heb nu een mooie tabel met wk nummers daaronder. Die
 * wil ik ook als ik op het agenda icoontje druk op het invoerveld van periode
 * start en periode eind." Tot dit pakket klapte de kalender van Chrome — blauw,
 * M-D-W-D-V-Z-Z, geen weeknummers — over de onze heen.
 *
 * Het icoontje van de browser is een pseudo-element van het veld zelf
 * (`::-webkit-calendar-picker-indicator`). Het gaat hier weg met `appearance`,
 * breedte en `pointer-events` en NIET met een `display`-regel — niet uit
 * schroom, maar omdat `display` in dit bestand een afspraak is: zichtbaarheid
 * op dit scherm loopt via inline `style.display` met precies één eigenaar per
 * element (WERKRUIMTE_RAAKVLAKKEN §3), en `test_de_css_zet_geen_display_op_een_
 * blok_dat_de_js_bedient` bewaakt dat de CSS er niet tussen gaat zitten. Het
 * effect is hetzelfde: geen glyph, geen breedte, niet aan te klikken.
 *
 * Dit geldt ALLEEN voor de twee velden van dit blok. `#factuurdatum` (in het
 * paneel 'datum en termijn wijzigen') en `#peildatum` in Beheer houden hun
 * browserkalender; die omzetten vraagt om een tekstveld met een verborgen
 * ISO-waarde ernaast, en dat is een structuurwijziging met een eigen pakket
 * (`periode.js` r. 111-122). De selector hangt daarom aan de omhulling van dít
 * blok (`.periode-veld`) en niet aan `input[type="date"]` in het
 * algemeen — één klasse, en je ziet aan de selector welke velden het raakt. */
.werkruimte .periode-veld {
  position: relative;
  display: flex;
  margin-top: 0.2em;
}

/* De marge van 0.2em verhuist naar de omhulling hierboven; stond hij op het
 * veld, dan was de omhulling hoger dan het veld en hing de knop die zich aan
 * haar randen vastzet 0.2em te hoog. De ruimte voor het icoontje rechts komt
 * uit `padding-right`: zo loopt een ingetikte datum er niet onderdoor. */
.werkruimte .periode-veld input[type="date"] {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  padding-right: 34px;
}

.werkruimte .periode-veld input[type="date"]::-webkit-calendar-picker-indicator {
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
  width: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  pointer-events: none;
}

/* De knop zet zich vast aan de drie randen van het veld — binnen de rand, zodat
 * de focusring van de knop de rand van het veld niet overtekent.
 *
 * `--bijzaak` en niet `--label`: dit scherm zet geen eigen achtergrond, dus het
 * icoontje ligt op --bureaublad (#eae7e1) en daar haalt --label maar 4,16:1.
 * Zelfde grijs als de hints van deze kolom. */
.werkruimte .periode-agenda {
  position: absolute;
  top: var(--rand-dikte);
  right: var(--rand-dikte);
  bottom: var(--rand-dikte);
  display: flex;
  align-items: center;
  padding: 0 9px;
  border: 0;
  border-radius: var(--afronding);
  background: none;
  color: var(--bijzaak);
  cursor: pointer;
}

.werkruimte .periode-agenda:hover { color: var(--tekst); }

.werkruimte .periode-agenda:focus-visible {
  outline: var(--focus-dikte) solid var(--focus-kleur);
  outline-offset: var(--focus-afstand);
}

/* Staat de kalender open, dan is dat aan de knop te zien en niet alleen aan de
 * kalender: één knop met twee standen. Donkerder, zoals hover — geen tweede
 * kleur erbij, want de vorm zegt het al (het raster staat eronder). */
.werkruimte .periode-agenda[aria-expanded="true"] { color: var(--tekst); }

/* ===================================================================== */
/* Het uploadvak (pakket 142)                                            */
/* Vorm uit `Werkruimte v2.dc.html` r. 165-187; alle kleuren, maten en    */
/* afstanden uit `Stijlwaarden.dc.html`.                                 */
/* ===================================================================== */

/* "Uploadvak met 'Sleep het bestand hierheen', geen bestandsnaam in de
 * instructie. Na het inlezen krimpt het vak tot één regel met de bestandsnaam
 * en een knop Vervang." (§4.4, V — Annelie 22-08)
 *
 * Vier toestanden, en ze zijn aan hun VORM te onderscheiden en niet alleen aan
 * hun kleur — dezelfde eis als bij de drie meldingsoorten:
 *
 *   leeg     een gestippeld vak met ruimte eromheen        (uitnodiging)
 *   bezig    een gesloten vak met een draaiend rondje      (het duurt even)
 *   gelukt   één lage regel met een streep links           (het staat er)
 *   mislukt  hetzelfde vak, rood, met een ✕-melding eronder (er moet iets)
 *
 * Waar de handoff en Stijlwaarden elkaar tegenspreken wint Stijlwaarden. Het
 * verschil zit in twee dingen: de handoff schrijft `#cbc6ba` voor de stippellijn
 * (Stijlwaarden kent die kleur niet; de veldrand --veldrand #cec9be is de
 * dichtstbijzijnde en die staat er dus) en `#fdf6f5` voor het foutvlak
 * (Stijlwaarden zegt #fdf5f4, --fout-vlak). De gestippelde rand zelf komt uit de
 * handoff: Stijlwaarden kent geen uploadvak en noemt alleen "1px randen". */

/* De verborgen `<input type="file">`. NIET met `display`, `visibility` of
 * `hidden`: een verplicht veld dat geen doos meer heeft is voor de browser niet
 * te focussen, en dan blokkeert het formulier zwijgend en zonder melding
 * (WERKRUIMTE_RAAKVLAKKEN §4). Een doos van 1px is er wel een. En `display`
 * blijft daarmee onaangeroerd, zodat `run_form_dispatch.js` — die zichtbaarheid
 * afleest als `style.display !== 'none'` — blijft meten wat hij altijd mat. */
.werkruimte .uploadvak__invoer {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
}

.werkruimte .uploadvak {
  max-width: min(400px, 100%);
  margin-top: var(--ruimte-veld);
}

/* PAKKET 149 — DE DRIE TOESTANDEN STONDEN ALLE DRIE TEGELIJK OP HET SCHERM.
 *
 * Gevonden met de schermafdruk van gate 2, en niet eerder: dit scherm was nog
 * nooit in een echte browser gefotografeerd, en `tests/js/run_form_dispatch.js`
 * draait tegen een regex-DOM die geen CSS kent.
 *
 * `uploadvak.js` schakelt zone/bezig/klaar/melding met het `hidden`-attribuut
 * (r. 338-340) — met opzet, want het zijn nieuwe elementen en `display` is op
 * dit scherm van de form-JS. Maar `[hidden] { display: none }` uit de
 * browserstijl weegt bijna niets, en de drie regels hierboven zetten er
 * `display: flex` overheen. Het sleepvak, het draaiende rondje en de
 * klaar-regel stonden dus alle drie onder elkaar.
 *
 * Dezelfde grendel als `.werkruimte .kiezer__paneel[hidden]`, `.bevestig[hidden]`
 * en `.vel [hidden]` verderop in dit bestand: wie `hidden` gebruikt, zet die
 * regel erbij. Geen `!important` nodig — drie klassen wegen zwaarder dan twee.
 *
 * Dit raakt de form-JS niet: `#uitval_doorlopend` en zijn acht broers houden
 * hun eigen `style.display`, en het verplichte veld zelf is geen `[hidden]`
 * maar de doos van 1px hierboven (WERKRUIMTE_RAAKVLAKKEN §3, §4). */
.werkruimte .uploadvak [hidden] { display: none; }

/* LEEG — het sleepvak. */
.werkruimte .uploadvak__zone {
  padding: 22px;                                   /* Werkruimte v2 r. 2148 */
  text-align: center;
  background: var(--vlak);
  border: var(--rand-dikte) dashed var(--veldrand);
  border-radius: var(--afronding);
  transition: background .12s;
}

.werkruimte .uploadvak__sleep {
  margin: 0 0 var(--ruimte-blok);
  font-size: var(--maat-tekst);
  line-height: var(--regel-compact);
  color: var(--bijzaak);
}

/* De tweede knop van Stijlwaarden › Ruimte ('Markeer als verstuurd'). Eigen
 * naam en niet de bestaande `.secondary` van dit formulier, om dezelfde reden
 * als bij `.periode-knop`: die klasse hangt onder acht andere knoppen en
 * meeverven is een herstyling van het hele formulier. */
.werkruimte .uploadvak__kies {
  font-weight: var(--gewicht-gewoon);
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-strak);
  padding: 9px 14px;
  border: var(--rand-dikte) solid var(--veldrand);
  border-radius: var(--afronding);
  background: var(--papier);
  color: var(--tekst);
  cursor: pointer;
}

.werkruimte .uploadvak__kies:hover { background: var(--knop-tweede-hover); }

.werkruimte .uploadvak__kies:focus-visible,
.werkruimte .uploadvak__vervang:focus-visible,
.werkruimte .uploadvak__maand:focus-visible {
  outline: var(--focus-dikte) solid var(--focus-kleur);
  outline-offset: var(--focus-afstand);
}

/* Het weggezette invoerveld zit nog wél in de tab-volgorde, en dat hoort ook:
 * het is het echte veld, en de browser moet erheen kunnen springen om te
 * zeggen dat het leeg is. Zonder deze regel zou daar een focusstop zitten
 * zonder zichtbare ring. `uploadvak.js` zet het vak als DIRECTE voorganger van
 * de input neer, dus de combinator klopt. */
.werkruimte .uploadvak:has(+ .uploadvak__invoer:focus-visible) .uploadvak__zone,
.werkruimte .uploadvak:has(+ .uploadvak__invoer:focus-visible) .uploadvak__klaar {
  outline: var(--focus-dikte) solid var(--focus-kleur);
  outline-offset: var(--focus-afstand);
}

/* SLEPEN — "Laat hier los". Het accentgroen is hier een VLAK en geen letter,
 * precies waar Stijlwaarden het voor bedoelt. */
.werkruimte .uploadvak--sleep .uploadvak__zone {
  background: var(--accent-licht);
  border-color: var(--link);
}

/* MISLUKT — rood. De rand is dezelfde stippellijn, alleen in --fout; het vlak
 * is --fout-vlak. */
.werkruimte .uploadvak--fout .uploadvak__zone {
  background: var(--fout-vlak);
  border-color: var(--fout);
}

/* BEZIG — alleen bij het loterij-bronbestand, want dat is het enige veld dat
 * een leesronde langs de server doet. */
.werkruimte .uploadvak__bezig {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px var(--ruimte-blok);
  background: var(--vlak);
  border: var(--rand-dikte) solid var(--rand-uit);
  border-radius: var(--afronding);
}

/* HET DRAAIENDE RONDJE VAN DE HANDOFF STAAT HIER NIET.
 *
 * `Werkruimte v2.dc.html` r. 177 tekent een cirkel (`border-radius:50%`) die
 * ronddraait. Stijlwaarden zegt "2px afronding · 1px randen", met de uitleg dat
 * dit scherm uit vlakken en lijnen bestaat en niet uit kaartjes — en een
 * suite-brede test houdt dat vast over het hele bestand. Stijlwaarden wint van
 * het prototype, ook hier.
 *
 * In plaats daarvan een streep die heen en weer loopt: dezelfde boodschap
 * ('er gebeurt iets, wacht even'), dezelfde 2px, geen cirkel. */
.werkruimte .uploadvak__draaier {
  flex: none;
  width: 24px;
  height: 3px;
  border-radius: var(--afronding);
  background: var(--accent);
  animation: uploadvak-loopt 1.1s ease-in-out infinite alternate;
}

/* Wie beweging heeft uitgezet krijgt een stilstaande streep. Het vak ziet er
 * dan nog steeds anders uit dan het sleepvak — gesloten in plaats van
 * gestippeld — dus de toestand blijft afleesbaar zonder beweging. */
@media (prefers-reduced-motion: reduce) {
  .werkruimte .uploadvak__draaier { animation: none; }
}

@keyframes uploadvak-loopt { to { transform: translateX(10px); } }

.werkruimte .uploadvak__bezigtekst {
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-compact);
  color: var(--bijzaak);
}

/* GELUKT — de krimp. Eén lage regel met de bestandsnaam en 'Vervang', en verder
 * niets: wat er in het bestand zat staat rechts op de factuur (§4.4). De streep
 * links is dezelfde 3px als bij een let-op-melding en het actieve menu-item,
 * hier in accentgroen. */
.werkruimte .uploadvak__klaar {
  display: flex;
  align-items: center;
  gap: var(--ruimte-blok);
  padding: 9px var(--ruimte-blok);
  background: var(--papier);
  border: var(--rand-dikte) solid var(--veldrand);
  border-radius: var(--afronding);
  box-shadow: inset var(--streep) 0 0 var(--accent);
}

/* MISLUKT mét het bestand er nog in: de doorrekening leverde nul regels op.
 * Het bestand is er wel, dus de regel blijft staan — maar de streep gaat van
 * accentgroen naar de let-op-kleur, want 'gelukt' is dit niet. */
.werkruimte .uploadvak--fout .uploadvak__klaar {
  box-shadow: inset var(--streep) 0 0 var(--letop);
}

.werkruimte .uploadvak__naam {
  flex: 1;
  min-width: 0;
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-compact);
  color: var(--tekst);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.werkruimte .uploadvak__vervang {
  flex: none;
  font-weight: var(--gewicht-gewoon);
  font-size: var(--maat-label);
  line-height: var(--regel-strak);
  padding: 6px 10px;
  border: var(--rand-dikte) solid var(--veldrand);
  border-radius: var(--afronding);
  background: transparent;
  color: var(--tekst);
  cursor: pointer;
}

.werkruimte .uploadvak__vervang:hover { background: var(--knop-tweede-hover); }

/* De melding onder het vak. De VORM komt van `.melding--blokkerend` /
 * `.melding--letop` hierboven; hier staat alleen waar hij hangt. */
.werkruimte .uploadvak__melding {
  display: flex;
  align-items: flex-start;
  gap: var(--ruimte-veld);
  margin: var(--ruimte-veld) 0 0;
}

.werkruimte .uploadvak__meldtekst { flex: 1; }

/* De maandkeuze bij een jaarbestand (PBS). Verschijnt pas ná het inlezen, want
 * zonder bestand valt er geen tabblad te kiezen. */
.werkruimte .uploadvak__keuze { margin-top: var(--ruimte-blok); }

.werkruimte .uploadvak__keuzebij {
  margin: var(--ruimte-veld) 0 0;
  font-size: var(--maat-label);
  line-height: var(--regel-tekst);
  color: var(--label);
}

/* ===================================================================== */
/* Het groepenblok (pakket 143)                                          */
/* Vorm uit `ontwerp-bron4-definitief.html` en `Werkruimte v2.dc.html`   */
/* r. 418-450; alle waarden uit Stijlwaarden.                            */
/* ===================================================================== */

/* Groepsregels (vast_per_donateur, DVDW): één REGEL per groep in plaats van
 * een omkaderd blokje per groep. De taalgroep links, aantal en tarief rechts,
 * met de kolomkoppen één keer bovenaan — §4.4 van de ontwerpopdracht.
 *
 * Waarom dit meer is dan opmaak: tot dit pakket zette de JS vier inline
 * stijlregels op elk kader, en was de groepskop alleen terug te vinden met
 * `kop.closest('div[style]')`. Dat was het fragielste punt van `nieuw.html`
 * (WERKRUIMTE_RAAKVLAKKEN §6): één omhullende div mét stijl ertussen en de kop
 * werd bij een tariefwissel niet meer bijgewerkt. De vorm staat nu hier, de
 * koppen in een register in de JS, en die selector bestaat niet meer.
 *
 * WAT ER NIET VERANDERT: de volgorde van de velden. De server koppelt
 * `donateur_groep_key[i]`, `donateur_werving_aantal[i]` en
 * `donateur_werving_tarief[i]` op INDEX — zie §5 van de raakvlakken. De
 * `grid`-regels hieronder verplaatsen niets in de DOM; ze tekenen alleen de
 * drie kolommen waarin diezelfde volgorde landt.
 *
 * Afwijkingen van de handoff, en waarom (Stijlwaarden wint van het prototype):
 *   - de haarlijn is --lijn, niet de eigen grijstint uit het prototype;
 *   - de kolomkop staat in --bijzaak en niet in --label. De invoerkolom ligt
 *     sinds pakket 105 op --vlak, en dáár haalt --label wél de norm (4,7:1) —
 *     maar de rest van dit scherm zet zijn labels in --bijzaak, en twee
 *     grijzen naast elkaar in één kolom is geen keuze maar slordigheid;
 *   - gaten en padding komen van de ruimteschaal (4 · 8 · 12). */
.werkruimte .donateur-groepen { max-width: 400px; }

.werkruimte .donateur-kolomkop,
.werkruimte .donateur-regel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 84px;
  gap: var(--ruimte-veld) var(--ruimte-blok);
  align-items: center;
}

.werkruimte .donateur-kolomkop {
  font-size: var(--maat-label);
  line-height: var(--regel-label);
  letter-spacing: var(--letterafstand-label);
  text-transform: uppercase;
  color: var(--bijzaak);
  padding-bottom: var(--ruimte-kier);
}
.werkruimte .donateur-kolomkop span + span { text-align: right; }

/* Een haarlijn tussen de regels, geen tabel met randen (§4.4). */
.werkruimte .donateur-regel {
  border-top: var(--rand-dikte) solid var(--lijn);
  padding: var(--ruimte-veld) 0;
}

.werkruimte .donateur-naam { font-size: var(--maat-waarde); }

/* De twee invoercellen. Ze krijgen hun kolom uit de VOLGORDE, net als de
 * server — een `grid-area` per veld zou een tweede waarheid zijn die stil uit
 * de pas kan lopen met de arrays die gepost worden. `min-width: 0` houdt een
 * input binnen zijn kolom in plaats van hem op te rekken. */
.werkruimte .donateur-veld { min-width: 0; }

/* 'NIEUW tarief (vanaf 2026-W25)' — bijzaak naast de naam, niet even hard
 * geschreeuwd als de groep zelf. */
.werkruimte .donateur-fase {
  color: var(--bijzaak);
  font-size: var(--maat-bijzaak);
}

.werkruimte .donateur-regel input {
  margin-top: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* De afwijkingsmelding hoort onder de héle regel, niet in de tariefkolom van
 * 84px: het is een zin, geen getal. */
.werkruimte .donateur-afwijking {
  grid-column: 1 / -1;
  margin: 0;
}

/* Alleen voor een schermlezer. De kolomkop staat er al, dus het label bij elk
 * veld is visueel overbodig — maar het hoort wél aan het veld te blijven
 * hangen, anders blijft er een kaal invoervak zonder naam over. */
.werkruimte .alleen-voorlezen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* ===================================================================== */
/* Het Berichten-scherm (pakket 145)                                     */
/* Vorm uit `Berichten.dc.html`; waarden uit `Stijlwaarden.dc.html`.     */
/* ===================================================================== */

/* Alles hieronder hangt aan `.berichten`, de klasse om `{% block content %}`
 * in `templates/berichten.html`. Dat sjabloon heeft geen eigen `<style>`-blok
 * meer — zelfde afspraak als bij de werkruimte in pakket 103.
 *
 * Waar dit afwijkt van het prototype, en waarom. Het prototype is getekend met
 * eigen maten; Stijlwaarden is de enige bron en wint (design-handoff/README).
 * Vier keer:
 *
 *   prototype              hier                  reden
 *   titel 29px / 600       22px / 500            Stijlwaarden › paginatitel
 *   velden en knop 48px    38px (--veldhoogte)   Stijlwaarden › vier toestanden
 *   afronding 3px          2px (--afronding)     "2px afronding · 1px randen"
 *   voorbeeld 13,5px       13px (--maat-bijzaak) 12px is de kleinste maat;
 *                                                13,5 staat niet op de schaal
 *
 * En één afwijking die over gedrag gaat, niet over een getal: het prototype
 * legt een `max-height: 440px` met een scrollbalk op het voorbeeldvlak, plus
 * een "Volledig bekijken"-knop eronder. Dat vlak past dan niet op het
 * dagbericht maar op ongeveer twintig regels — minder dan de tussenstand.
 * De opdracht zegt het omgekeerde: "Het voorbeeldvlak past op het dagbericht
 * van 48 regels, niet op de tussenstand" (afvinklijst §3). Daarom staat er
 * hier geen hoogtegrens: het vlak groeit met het bericht mee, elk bericht past
 * er dus per definitie op, en de uitklapknop is daarmee overbodig geworden. */

.berichten {
  max-width: 660px;                      /* ontwerp r. 45 */
  display: grid;
  gap: var(--ruimte-sectie);
}

.berichten__titel {
  margin: 0;
  font-weight: var(--gewicht-kop);
  font-size: var(--maat-titel);
  line-height: var(--regel-kop);
}

/* ---- De twee keuzelijsten en de knop ----------------------------------- */

/* `align-items: end` zet de knop op de onderlijn van de velden, niet op die
 * van de labels erboven. */
.berichten__kiezer {
  display: flex;
  align-items: end;
  gap: var(--ruimte-blok);
  flex-wrap: wrap;
}

.berichten__kiezer .berichten__veld { flex: 1 1 190px; min-width: 0; }

.berichten__veld {
  display: grid;
  gap: var(--ruimte-veld);               /* §8: tussen label en veld 8 */
}

/* Het label staat in zinsvorm en niet in gespatieerd kapitaal: dat laatste is
 * er precies twee in het hele systeem en dit is er geen van beide.
 *
 * --bijzaak en niet --label. Het werkvlak heeft geen eigen vlak, dus dit label
 * ligt op --bureaublad (#eae7e1), en daar haalt --label maar 4,16:1 — onder de
 * norm. Zelfde afweging als in de werkruimte (pakket 103). */
.berichten__label {
  font-weight: var(--gewicht-kop);
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-compact);
  color: var(--bijzaak);
}

.berichten select,
.berichten textarea {
  width: 100%;
  border: var(--rand-dikte) solid var(--veldrand);
  border-radius: var(--afronding);
  background: var(--papier);
  color: var(--tekst);
  font-size: var(--maat-waarde);
}

.berichten select {
  height: var(--veldhoogte);
  padding: 0 var(--ruimte-veld) 0 var(--ruimte-blok);
  line-height: var(--regel-strak);
  cursor: pointer;
}

.berichten select:hover { border-color: var(--breuk); }

.berichten__openen { flex: none; height: var(--veldhoogte); padding: 0 var(--ruimte-groep); }

/* ---- Het geopende bericht ---------------------------------------------- */

/* De streep boven het bericht scheidt de keuze van het resultaat. `--breuk` en
 * niet `--lijn`: dit is de breuk tussen twee delen van het scherm. */
.berichten__bericht {
  display: grid;
  gap: var(--ruimte-sectie);
  padding-top: var(--ruimte-sectie);
  border-top: var(--rand-dikte) solid var(--breuk);
}

/* Geen uitlegregel eronder: de kop zegt al welk bericht dit is. */
.berichten__kop {
  margin: 0;
  font-weight: var(--gewicht-kop);
  font-size: var(--maat-waarde);
  line-height: var(--regel-compact);
}

.berichten__intro {
  display: grid;
  gap: var(--ruimte-blok);
  justify-items: start;
}

.berichten__intro .berichten__veld { width: 100%; }

/* `resize: vertical` en geen `none`: de JS laat het veld met de tekst
 * meegroeien zodat je ziet waar de intro ophoudt, maar wie de JS niet heeft
 * moet er zelf bij kunnen.
 *
 * En `overflow-y: auto`, niet het `overflow: hidden` van het prototype. Daar
 * mag dat, want daar groeit het veld altijd mee. Hier niet: staat de JS uit,
 * dan kapt `hidden` een lange intro af zonder schuifbalk, en dan is de tekst
 * niet alleen onzichtbaar maar ook onbereikbaar. Met `auto` verschijnt er een
 * schuifbalk als het moet — en met de JS aan is de hoogte gelijk aan de
 * inhoud, dus dan is hij er nooit. */
.berichten textarea {
  min-height: calc(var(--veldhoogte) * 2);
  padding: var(--ruimte-blok);
  line-height: var(--regel-tekst);
  resize: vertical;
  overflow-y: auto;
}

/* ---- Het volledige bericht --------------------------------------------- */

/* Geen hoogtegrens — zie de notitie bovenaan deze sectie. `pre-wrap` houdt de
 * regelovergangen en de spaties van WhatsApp intact; `overflow-wrap` vangt de
 * enkele regel die breder is dan de kolom op zonder hem af te kappen. */
.berichten__voorbeeld {
  padding: var(--ruimte-groep) 18px;
  background: var(--vlak);
  border: var(--rand-dikte) solid var(--lijn);
  border-radius: var(--afronding);
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-tekst);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Waar de intro ophoudt. Het lichte accent betekent in dit systeem al
 * "dit is het stuk dat je zelf mag typen" — `.vel__bewerk-rust:hover`
 * gebruikt dezelfde kleur voor precies die betekenis. Het is een markering
 * op de tekst en geen extra teken, dus er komt geen letter bij die
 * meegekopieerd wordt.
 *
 * De markering is niet het enige verschil: de intro staat óók, letterlijk,
 * in het bewerkbare veld erboven. Wie geen kleur ziet, ziet de grens daar. */
.berichten__intro-deel { background: var(--accent-licht); }

/* ---- Kopiëren ----------------------------------------------------------- */

.berichten__kopieerbalk {
  display: flex;
  align-items: center;
  gap: var(--ruimte-blok);
  flex-wrap: wrap;
}

/* Het WhatsApp-teken is het enige pictogram op dit scherm, en het enige in het
 * hele systeem. Het blijft staan omdat het zegt waar het bericht heen gaat, en
 * dat staat nergens in de tekst [V — ONTWERP_BERICHTEN.md, stap 1]. De 💾 📋
 * ✅ ↩️ die hier ook stonden zijn weg. */
.berichten__kopieer {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-veld);
  height: var(--veldhoogte);
  padding: 0 var(--ruimte-groep);
}

.berichten__whatsapp { flex: none; }

/* De bevestiging na het kopiëren. Leeg tot de JS hem vult; hij staat er al
 * wel, zodat `aria-live` hem oppikt. */
.berichten__bevestiging {
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-compact);
  color: var(--link);
}

.berichten__bevestiging--fout { color: var(--fout-tekst); }


/* ===================================================================== */
/* Beheer: één pagina in drie groepen (pakket 146)                       */
/* Vorm uit `Facturen en Beheer.dc.html` r. 282-497; waarden uit         */
/* `Stijlwaarden.dc.html`.                                               */
/* ===================================================================== */

/* Alles hieronder hangt aan `.beheer`, de klasse om de inhoud van
 * `templates/admin/beheer.html`. Dat sjabloon heeft geen eigen `<style>`-blok
 * meer; de vijf sjablonen die het vervangt hadden dat deels wel
 * (`admin/_layout.html` deelde er een, `admin/startnummers.html` had een eigen).
 *
 * Waar dit zichtbaar afwijkt van het prototype, en waarom:
 *
 * - Het prototype zet een eigen kalender onder het datumveld. Die bestaat in
 *   de applicatie nergens: de werkruimte gebruikt `<input type="date">`. De
 *   vormregel is "één datumkiezer"; een eigen kalender die alleen hier staat
 *   maakt precies het verschil dat die regel verbiedt.
 * - Het prototype kleurt de rijscheiding #f0eee8 en de kolomkop #8a8880.
 *   Geen van beide staat in Stijlwaarden; dat worden --lijn en --label.
 * - Het prototype zet de kolomkop op 11px. Stijlwaarden kent 11px alleen als
 *   `--maat-teken` (het ✕ in een melding, het woordmerk), niet als kolomkop;
 *   die staat daar op 12px. Dus --maat-label.
 * - Deactiveren is in het prototype #8a2020 op #fff met rand #c39a9a. Die drie
 *   staan niet in Stijlwaarden; het worden --fout-tekst, --papier en
 *   --fout-rand. Dezelfde afweging als bij het inlogscherm (pakket 102).
 */

.beheer {
  max-width: 820px;                 /* Facturen en Beheer.dc.html r. 284 */
  display: grid;
  gap: var(--ruimte-sectie);
}

.beheer__titel {
  margin: 0;
  font-weight: var(--gewicht-kop);
  font-size: var(--maat-titel);
  line-height: var(--regel-kop);
}

/* Toegang · Berichten · Facturatie. De enige drie koppen op dit niveau; de
 * kaarten eronder dragen hun eigen gutterlabel. */
.beheer__groep {
  margin: var(--ruimte-veld) 0 calc(var(--ruimte-blok) * -1);
  font-weight: var(--gewicht-kop);
  font-size: var(--maat-waarde);
  line-height: var(--regel-compact);
}

/* De kaart stapelt met `gap` en niet met marges op de kinderen: een `<p>` of
 * een `<h4>` brengt zijn eigen browsermarge mee, en die telt bij een marge op
 * — bij een gap niet. De reset eronder haalt die browsermarges weg. */
.beheer__kaart {
  display: grid;
  gap: var(--ruimte-groep);
  align-content: start;
  padding: var(--ruimte-sectie);
  background: var(--papier);
  border: var(--rand-dikte) solid var(--lijn);
  border-radius: var(--afronding);
}

.beheer__kaart > * { margin: 0; }

/* Een formulier met meer dan één blok erin stapelt met dezelfde ruimte als de
 * kaart eromheen. Als klasse en niet als `.beheer__kaart form`, want twee van
 * de formulieren op deze pagina zijn juist een rij (`.beheer__peiling`,
 * `.beheer__bevestig`) en zouden door zo'n regel overruled worden. */
.beheer__stapel {
  display: grid;
  gap: var(--ruimte-groep);
  justify-items: stretch;
}

.beheer__kaartkop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-groep);
  flex-wrap: wrap;
}

.beheer__subkop {
  margin: 0;
  font-weight: var(--gewicht-kop);
  font-size: var(--maat-tekst);
  line-height: var(--regel-compact);
}

.beheer__melding { margin: 0; }

/* Alleen voor wie voorleest: de kolom met de handelingen draagt geen kop op
 * het scherm, maar een tabel zonder kop in die kolom leest slecht voor. */
.beheer__voorlezer {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Tabellen ---------------------------------------------------------- */

.beheer__tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--maat-tekst);
  line-height: var(--regel-compact);
}

.beheer__tabel th {
  padding: 0 0 9px;                 /* Facturen en Beheer.dc.html r. 296 */
  text-align: left;
  font-weight: var(--gewicht-gewoon);
  font-size: var(--maat-label);
  line-height: var(--regel-compact);
  letter-spacing: var(--letterafstand-label);
  text-transform: uppercase;
  color: var(--label);
  border-bottom: var(--rand-dikte) solid var(--lijn);
  white-space: nowrap;
}

.beheer__tabel td {
  padding: var(--ruimte-blok) 0;
  border-bottom: var(--rand-dikte) solid var(--lijn);
  vertical-align: middle;
}

.beheer__tabel td + td,
.beheer__tabel th + th { padding-left: 14px; }  /* ontwerp r. 295 */

/* De kolomkop hoort boven de kolom te staan waar hij bij hoort: `.bedrag`
 * lijnt rechts uit, en `.beheer__tabel th` hierboven zou dat met zijn extra
 * element-punt overrulen. */
.beheer__tabel th.bedrag { text-align: right; }

.beheer__tabel tbody tr:last-child td { border-bottom: 0; }

.beheer__tabelkop {
  padding: 0 0 var(--ruimte-veld);
  text-align: left;
  font-weight: var(--gewicht-kop);
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-compact);
}

/* ---- De gebruikers ----------------------------------------------------- */

.beheer__email,
.beheer__naam,
.beheer__merknaam,
.beheer__juridisch { display: block; }

.beheer__email { overflow-wrap: anywhere; }

.beheer__naam,
.beheer__juridisch {
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-compact);
  color: var(--label);
}

.beheer__login {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Een gedeactiveerde rij is aan meer te zien dan aan kleur: de statuskolom
 * zegt het met zoveel woorden, en de knop 'Deactiveer' is er weg. */
.beheer__rij--uit td { color: var(--bijzaak); }

/* De e-mailkolom krijgt de ruimte die overblijft, en de handelingen ernaast
 * een vaste breedte. Zonder die twee duwen de knoppen een adres als
 * 'administratie@…' in twee stukken — het ontwerp geeft die kolom
 * `minmax(180px,1fr)` en de handelingen 160px. */
.beheer__tabel--gebruikers th:first-child,
.beheer__tabel--gebruikers td:first-child { width: 36%; }

/* `width: 1%` plus een inhoud die niet afbreekt: de tabel geeft deze kolom
 * precies de breedte van de twee knoppen naast elkaar, en de rest gaat naar
 * het adres. */
.beheer__tabel--gebruikers th:last-child,
.beheer__tabel--gebruikers td:last-child { width: 1%; }

.beheer__handelingen {
  display: grid;
  gap: var(--ruimte-veld);
  justify-items: start;
}

.beheer__knoppen {
  display: flex;
  gap: var(--ruimte-veld);
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Een handeling in een tabelrij is kleiner dan een knop onder een formulier:
 * het ontwerp zet ze op 32px hoog met 10px binnenmarge (r. 305-308). Zonder
 * die maat passen Reset en Deactiveer niet naast elkaar en wordt elke rij twee
 * regels hoog. */
.beheer__handelingen .knop {
  height: 32px;                     /* Facturen en Beheer.dc.html r. 305 */
  padding: 0 10px;
  font-size: var(--maat-bijzaak);
}

/* Altijd op een eigen regel, ook op de rij waar 'Deactiveer' ontbreekt: anders
 * springt de link per rij van plaats. Het ontwerp kent hem niet — zie het
 * rapport van pakket 146 — maar de route wel, en het is de enige manier om een
 * rol of een naam te wijzigen. */
.beheer__bewerk {
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-compact);
}

/* ---- Velden en knoprijen ----------------------------------------------- */

.beheer__getalveld,
.beheer input[type="date"],
.beheer input[type="email"],
.beheer input[type="text"],
.beheer select {
  height: var(--veldhoogte);
  padding: 0 var(--ruimte-blok);
  font-size: var(--maat-tekst);
  line-height: var(--regel-strak);
  color: var(--tekst);
  background: var(--papier);
  border: var(--rand-dikte) solid var(--veldrand);
  border-radius: var(--afronding);
}

/* De ring van de grondslag staat om het veld heen, niet erin: deze velden
 * dragen zelf hun rand, anders dan de vakken op het inlogscherm waar `.veld
 * input` hem naar binnen trekt. */
.beheer .veld input:focus-visible { outline-offset: var(--focus-afstand); }

/* Een `<p>` binnen een veld of een kaart krijgt zijn ruimte van de grid
 * eromheen, niet van de browsermarge. */
.beheer .veld__eis,
.beheer .bevestig__tekst { margin: 0; }

.beheer input:disabled,
.beheer select:disabled {
  background: var(--vlak);
  color: var(--bijzaak);
}

.beheer__getalveld {
  width: 116px;                     /* Facturen en Beheer.dc.html r. 323 */
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.beheer__getalveld--breed { width: 148px; }   /* ontwerp r. 430 */

.beheer__smiley { font-size: var(--maat-waarde); }

.beheer__bereik {
  color: var(--bijzaak);
  font-variant-numeric: tabular-nums;
}

.beheer__knoprij {
  display: flex;
  align-items: center;
  gap: var(--ruimte-blok);
  flex-wrap: wrap;
}

/* ---- Concepten opruimen ------------------------------------------------ */

/* De datum staat boven de knop en niet ernaast: onder het veld staat een
 * regel met wat de grensdatum betekent, en een knop die daar rechts van
 * uitlijnt hangt dan halverwege die zin. */
.beheer__peiling {
  display: grid;
  gap: var(--ruimte-groep);
  justify-items: start;
}

.beheer__telling {
  display: grid;
  gap: var(--ruimte-kier);
  padding: var(--ruimte-blok) 14px;            /* ontwerp r. 404 */
  background: var(--vlak);
  border: var(--rand-dikte) solid var(--lijn);
  border-radius: var(--afronding);
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-tekst);
}

.beheer__telling p { margin: 0; }

.beheer__bewaardlijst { margin: var(--ruimte-kier) 0 0; }

.beheer__bevestigingen {
  display: flex;
  gap: var(--ruimte-sectie);
  flex-wrap: wrap;
}

/* Hier wél naast elkaar: in dit blok staat onder het veld niets, dus de
 * onderkant van het veld en die van de knop vallen samen. */
.beheer__bevestig {
  display: flex;
  align-items: flex-end;
  gap: var(--ruimte-blok);
}

.beheer__bevestig input { width: 110px; }      /* ontwerp r. 399 */

/* ---- De twee vensters -------------------------------------------------- */

/* Het venster zelf is `.bevestig` uit pakket 140 — dezelfde sluier, dezelfde
 * rand, dezelfde breedte. Een formulier leest alleen niet gecentreerd. */
/* Het bevestigingsvenster van pakket 140 draagt één kop en één zin, en die
 * houden elkaar met hun eigen marges op afstand. Hier staan vier of vijf
 * blokken onder elkaar; die krijgen hun ruimte van de grid, zoals de kaarten
 * op de pagina eronder. Het ontwerp zet er 18px tussen (r. 456, 483). */
.bevestig__venster--formulier {
  display: grid;
  gap: var(--ruimte-groep);
  align-content: start;
  text-align: left;
}

.bevestig__venster--formulier > * { margin: 0; }

/* Het bevestigingsvenster van pakket 140 stelt één vraag en zet zijn twee
 * knoppen daarom in het midden. Een formulier leest van links naar rechts;
 * de knoppen eronder horen onder het eerste veld te beginnen. */
.bevestig__venster--formulier .bevestig__knoppen { justify-content: flex-start; }

.beheer__formulier { display: grid; gap: var(--ruimte-groep); }

/* Het wachtwoord zelf. Geen invoerveld: er valt niets te typen, en een veld
 * zou de indruk wekken dat het opgeslagen wordt. Wel selecteerbaar in één
 * streek, want dat is wat er met dit vak moet gebeuren. */
.beheer__wachtwoord {
  margin: 0;
  padding: var(--ruimte-groep);
  background: var(--vlak);
  border: var(--rand-dikte) dashed var(--breuk);
  border-radius: var(--afronding);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--maat-waarde);
  line-height: var(--regel-kop);
  text-align: center;
  color: var(--tekst);
  overflow-wrap: anywhere;
  user-select: all;
}

.beheer__gekopieerd {
  font-size: var(--maat-bijzaak);
  line-height: var(--regel-compact);
  color: var(--link);
}

.beheer__gekopieerd[hidden] { display: none; }

.beheer__venstervoet {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--ruimte-blok);
  border-top: var(--rand-dikte) solid var(--lijn);
}

/* ---- Twee knopsoorten erbij -------------------------------------------- */

/* Onomkeerbaar. Het ontwerp geeft die knoppen een eigen vorm: geen groen vlak
 * maar een rand en een letter in de foutkleur. Dat is de vormregel
 * "onomkeerbare knoppen zien er anders uit dan gewone" — Deactiveer en de twee
 * opruimknoppen, en verder niets. */
.knop--onomkeerbaar {
  background: var(--papier);
  border-color: var(--fout-rand);
  color: var(--fout-tekst);
}

.knop--onomkeerbaar:hover { background: var(--fout-vlak); }

.knop--onomkeerbaar:focus-visible { outline-color: var(--fout); }

/* Uit: er valt niets te verwijderen, of het aantal klopt nog niet. Dit is de
 * dode knop van Stijlwaarden › Ruimte, randen, velden. */
.knop--onomkeerbaar:disabled,
.knop--uit,
.beheer__bevestig:has(input:invalid) .knop--onomkeerbaar {
  background: transparent;
  border-color: var(--rand-uit);
  color: var(--bijzaak);
  cursor: default;
}

.knop--onomkeerbaar:disabled:hover,
.knop--uit:hover,
.beheer__bevestig:has(input:invalid) .knop--onomkeerbaar:hover {
  background: transparent;
}

/* ===================================================================== */
/* De regel die je zelf toevoegt (pakket 158)                            */
/* ===================================================================== */

/* Pakket 148 haalde dit blok van het scherm; pakket 158 zet het terug, nu met
 * de rijen achter één knop. De vorm was er al en blijft: het blok is een
 * `.invoerrij` met zijn label in de goot (pakket 149), en de rij zelf is de
 * `.row` die hij altijd was — met de flexwaarden INLINE op de inputs, zie de
 * notitie bij `.werkruimte .row > div`. Het kruisje aan het eind draagt
 * `.secondary` en heeft zijn knopvorm daar al vandaan (pakket 154).
 *
 * Wat hier bij komt is dus alleen RUIMTE: tussen twee rijen, en tussen een rij
 * en de let-op eronder. Geen `display` — dat is en blijft van de JS
 * (WERKRUIMTE_RAAKVLAKKEN §3) — en geen kleur of rand, want de let-op heeft
 * zijn vorm al van `.melding--letop`. */
.werkruimte .correctie-rij { margin-bottom: var(--ruimte-veld); }

/* De let-op staat als eigen regel ONDER de vier velden en niet ernaast: naast
 * een rij van vier past geen hele zin. `<p>` draagt in de browser een eigen
 * boven- en ondermarge; die wordt hier vervangen door de veldruimte. */
.werkruimte .correctie-rij .melding--letop { margin: var(--ruimte-veld) 0 0; }