/* DE BOUWDOOS — één stylesheet, vaste waarden
   ============================================================================

   Hier staan de waarden waarmee elk scherm straks herbouwd wordt. Niets anders:
   geen schermspecifieke regels, geen uitzonderingen, geen "even dit ene geval".

   WAAROM ZO WEINIG WAARDEN. De doorlichting vond in de app 41 bestanden met
   eigen kleuren, lettergroottes en radii — 9,5px naast 10,5px, drie radii die
   elkaar tegenspraken, accenten die per scherm verschilden. Dat is niet erg
   omdat het lelijk is, maar omdat je dan niet meer kúnt zien of twee schermen
   hetzelfde bedoelen. Eén ladder, vier lettergroottes, één accent.

   DE WAARDEN ZIJN GEMETEN, NIET GEKOZEN. Ze komen uit de opdracht en sluiten
   aan op wat de app al had (--gray, --primary, --secondary, de ladder
   6/10/16/24/32 uit tests/knophierarchie.test.js). Waar de skill
   ontwerpprincipes iets anders zegt wint de skill — behalve bij deze getallen,
   die zijn bewust zo vastgelegd.

   NIEUWE SCHERMEN GEBRUIKEN ALLEEN VARIABELEN. tests/bouwdoos-waarden.test.js
   bewaakt dat: een letterlijke kleur, font-size, radius of schaduw in een
   stylesheet die niet op de uitzonderingslijst staat, maakt de test rood. Die
   lijst wordt korter bij elk herbouwd scherm en nooit langer.
*/

:root {
  color-scheme: light;         /* altijd licht: ook op een donkere Mac volgt niets de systeemvoorkeur */
  /* ---- Kleur ------------------------------------------------------------
     Eén accent. Verder grijstinten plus drie semantische paren voor pillen.
     Betekenis nooit alleen met kleur: bij elke pil hoort een woord of icoon
     (ontwerpprincipes §4). */
  --achtergrond: #F8F9FA;      /* de pagina; bestond al als --gray */
  --vlak: #FFFFFF;             /* kaarten, zijbalk, panelen */
  --tekst: #17223A;            /* navy, ALLEEN voor tekst — nooit als vlak (de secundaire knop is #16223A, de merkkleur, als eigen token) */
  --tekst-zacht: #6B7280;      /* labels, bijschriften, tabelkoppen */
  --lijn: #E5E7EB;             /* scheidingen; kaarten hebben geen rand */
  --accent: #2864AE;           /* actief, primaire knop, kaartgetal */
  --accent-licht: #EAF1FA;     /* actieve chip, geselecteerde rij */

  /* ---- Reeksen per werkruimte (muurscherm 04-10-2026) ------------------------
     Een grafiek met meer kanalen kleurt per werkruimte één familie (Ibley blauw, de volgende groen, dan oranje) met
     stappen in helderheid; public/schermen/werkruimte/kanalen.js kiest de stap. Gemeten (WCAG, tests/muurscherm-legenda):
     elke kleur minstens 3:1 tegen wit en --achtergrond, buren in een familie minstens 1,4:1. */
  --reeks-blauw-1: #0A2463;
  --reeks-blauw-2: #1A4A99;
  --reeks-blauw-3: #2A6CC9;
  --reeks-blauw-4: #4F8BDD;
  --reeks-groen-1: #0B3D1F;
  --reeks-groen-2: #1A5A2C;
  --reeks-groen-3: #277A38;
  --reeks-groen-4: #3E9A4C;
  --reeks-oranje-1: #4E2200;
  --reeks-oranje-2: #7E3E06;
  --reeks-oranje-3: #A6560F;
  --reeks-oranje-4: #C96F1A;

  /* ---- Knoppen: drie soorten, voor de hele app (nawerk voorraad 6, 01-10-2026) ----
     Gebruik in elke tak deze drie, met deze tokens; geen eigen knopkleuren.
       primair    .bd-knop--primair    Ibley-blauw vlak, witte tekst. Eén per scherm of per rij: de eerstvolgende stap.
       secundair  .bd-knop--secundair  #16223A vlak (Ibley's secundaire merkkleur), witte tekst. Andere nodige handelingen
                                       naast de primaire. (.bd-knop--licht is een oude naam voor dezelfde knop.)
       tertiair   .bd-knop--tertiair   omlijnd in Ibley-blauw, transparant, tekst Ibley-blauw. Bijzaken (Later, Bekijk).
     Gemeten contrast (WCAG AA vraagt 4,5:1 voor tekst van 14 px):
       primair wit op #2864AE 5,96:1; secundair wit op #16223A 15,86:1;
       tertiair #2864AE op wit 5,96:1 en op --achtergrond 5,65:1. */
  --knop-primair: var(--accent);        /* tekst: var(--vlak), wit */
  --knop-secundair: #16223A;            /* tekst: var(--vlak), wit */
  --knop-tertiair: var(--accent);       /* rand en tekst */
  /* Uitgeschakeld (disabled of aria-disabled="true", 04-10-2026): per soort een licht vlak met de tekstkleur van die soort (tertiair grijs), rand
     gestreept (niet alleen kleur), geen doorzichtigheid (die haalt het contrast onderuit). Gemeten contrast:
       primair    #2864AE op --accent-licht (#EAF1FA) 5,24:1
       secundair  #16223A op --lijn (#E5E7EB) 12,81:1
       tertiair   #4B5563 op wit 7,56:1 en op --achtergrond 7,17:1 (ook een knop zonder soort en .bd-knop--tekst)
     Eén nieuw token; de vlakken zijn bestaande (tests/bouwdoos-waarden.test.js houdt :root onder zestig). */
  --knop-uit-tekst: #4B5563;            /* tertiair: tekst; rand var(--lijn) */

  /* De drie paren: achtergrond-100 + tekst-800, zodat het contrast klopt. */
  --goed-vlak: #DCFCE7;
  --goed-tekst: #166534;
  --letop-vlak: #FEF3C7;
  --letop-tekst: #92400E;
  --fout-vlak: #FEE2E2;
  --fout-tekst: #991B1B;

  /* ---- Tekst ------------------------------------------------------------
     Systeemfont blijft. Vier maten, plus 24 voor het kaartgetal. Nooit kleiner
     dan 11: 9,5 en 10,5 zijn hiermee verdwenen. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --tekst-kop: 20px;
  --tekst-basis: 14px;
  --tekst-tabel: 13px;
  --tekst-bijschrift: 11px;
  --tekst-kaartgetal: 24px;

  /* ---- Afstand ----------------------------------------------------------
     De ladder van de app. Niets ertussen — dat is wat een ladder een ladder
     maakt. */
  --a1: 6px;
  --a2: 10px;
  --a3: 16px;
  --a4: 24px;
  --a5: 32px;

  /* ---- Radius -----------------------------------------------------------
     Twee. De 5, 12 en 14 die er stonden zijn weg. */
  --radius-kaart: 8px;
  --radius-veld: 6px;

  /* ---- Maten ------------------------------------------------------------ */
  --hoogte-veld: 36px;         /* velden, knoppen en chips: één hoogte */
  --rijhoogte: 44px;           /* MINIMUM, geen vaste hoogte: `height` op een
                                  tabelcel werkt als ondergrens. Een artikelregel
                                  met de EAN eronder is gemeten 64px. */
  --zijbalk: 256px;            /* vlak, wit, lijn rechts, niet zwevend */
  --inhoud-max: 1440px;        /* gecentreerd; inhoud rekt niet verder uit */
  --klikdoel: 28px;            /* macOS-maat voor de muis (skill §5b) */

  /* ---- Schaduw ----------------------------------------------------------
     Eén, zacht. Kaarten hebben géén rand: rand én schaduw samen is twee keer
     hetzelfde zeggen. */
  --schaduw: 0 1px 2px rgba(23, 34, 58, 0.04), 0 2px 8px rgba(23, 34, 58, 0.06);
  /* ---- Visuele taal (skill ontwerpprincipes, sectie 9; 26-09-2026) -------
     Urgentie als verloopkaart: Nu het Ibley-donkerblauw (urgentie zit in het grote bedrag in --urgent en in de plek bovenaan), Deze week het lichtere
     Ibley-blauw, Gedaan groen, uit het palet van de app. Donkere tekst op een lichte tint, zachte schaduw, radius 16. Elk scherm gebruikt alleen deze
     variabelen; geen letterlijke kleur in een schermbestand. In donker overschrijft
     donker-bouwdoos.css dezelfde namen. */
  --tekst-klein: 12px;
  --tekst-titel: 17px;
  --tekst-voorstel: 15px;
  --tekst-groot: 28px;
  --radius-laag: 16px;
  --radius-rond: 999px;
  --laag-tekst: var(--tekst);  /* tekst op een laag: de tekstkleur van de huid */
  /* De drie lagen: een doorschijnend verloop van de signaalkleuren van de app (rood en oranje = --danger en
     --warning, blauw = --primary, groen = --goed-tekst), zodat de pagina erdoorheen blijft schijnen. */
  --laag-nu-van: #17223A;                      --laag-nu-tot: #24437A;       /* Nu: het Ibley-donkerblauw (--secondary) naar een diepere tint van het primaire blauw; witte tekst */
  --laag-nu-tekst: #FFFFFF;
  --urgent: #C2410C;                           /* warm accent voor wat geld kost: het bedrag "als je niets doet" */
  --laag-week-van: rgba(40, 100, 174, 0.18);   --laag-week-tot: rgba(40, 100, 174, 0.06);   /* Deze week: het lichtere Ibley-blauw */
  --laag-gedaan-van: rgba(22, 101, 52, 0.18);  --laag-gedaan-tot: rgba(22, 101, 52, 0.07);
  --laag-neutraal-van: rgba(107, 114, 128, 0.16);  --laag-neutraal-tot: rgba(107, 114, 128, 0.05);   /* Overig: grijs, voor wat geen aandacht vraagt */
  --laag-vlak: rgba(255, 255, 255, 0.78);      /* de kaarten binnen een laag: wit, licht doorschijnend */
  --spark: #2864AE;            /* lijn van een sparkline */
  --vn-voor: #C7D2E3;          /* vóór-balk */
  --vn-na: #2864AE;            /* ná-balk (verwachting) */
  --vn-gemeten: #166534;       /* ná-balk als het gemeten is */
  --ring-baan: #E5E7EB;
  --schaduw-laag: 0 2px 6px rgba(23, 34, 58, 0.10), 0 8px 24px rgba(23, 34, 58, 0.10);

}

/* Op een aanraakscherm (kiosk-tv, tablet, telefoon) is 28px te klein om te
   raken. Dan 44, zoals de skill voorschrijft. */
@media (pointer: coarse) {
  :root { --klikdoel: 44px; }
}

/* ===========================================================================
   DE ONDERDELEN
   Alleen wat public/js/bouwdoos.js daadwerkelijk uitzendt. Elke klasse begint
   met bd- zodat hij nooit botst met de bestaande stylesheet.
   =========================================================================== */

.bd-blok { font-family: var(--font); color: var(--tekst); font-size: var(--tekst-basis); }

/* ---- 1. Schermkop ------------------------------------------------------- */
/* `flex-wrap` is hier geen opsmuk. Zonder wrap weigert de rechterkant
   (bijgewerkt-tijd plus twee knoppen) te krimpen en knijpt hij de titelkolom
   tot bijna nul: op 390 px stond de zin één woord per regel en liep de titel
   onder de tijd door. Gezien op de schermafbeelding van 390 px, niet bedacht.
   De 240 px zorgt dat de tekstkolom liever een eigen regel pakt dan smal wordt. */
.bd-schermkop {
  display: flex; align-items: flex-start; gap: var(--a3); flex-wrap: wrap;
  padding: var(--a4) 0 var(--a3); border-bottom: 1px solid var(--lijn);
  max-width: var(--inhoud-max);
}
.bd-schermkop-tekst { flex: 1; min-width: min(240px, 100%); }
.bd-schermkop h1 { font-size: var(--tekst-kop); margin: 0; font-weight: 600; color: var(--tekst); }
.bd-schermkop-zin { font-size: var(--tekst-basis); color: var(--tekst-zacht); margin-top: var(--a1); }
.bd-schermkop-rechts { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; }
.bd-bijgewerkt { font-size: var(--tekst-bijschrift); color: var(--tekst-zacht); }

/* ---- Pillen ------------------------------------------------------------- */
.bd-pil {
  display: inline-flex; align-items: center; gap: var(--a1);
  font-size: var(--tekst-bijschrift); border-radius: var(--radius-veld);
  padding: 0 var(--a1); min-height: var(--klikdoel); line-height: 1;
}
.bd-pil--goed  { background: var(--goed-vlak);  color: var(--goed-tekst); }
.bd-pil--letop { background: var(--letop-vlak); color: var(--letop-tekst); }
.bd-pil--fout  { background: var(--fout-vlak);  color: var(--fout-tekst); }
.bd-pil--stil  { background: var(--achtergrond); color: var(--tekst-zacht); }

/* ---- Knoppen en velden: één hoogte -------------------------------------- */
.bd-knop, .bd-veld, .bd-chip {
  min-height: var(--hoogte-veld); border-radius: var(--radius-veld);
  font-size: var(--tekst-basis); font-family: var(--font);
  padding: 0 var(--a2); border: 1px solid var(--lijn); background: var(--vlak);
  color: var(--tekst);
}
.bd-knop { cursor: pointer; min-width: var(--klikdoel); }
.bd-knop--primair { background: var(--knop-primair); border-color: var(--knop-primair); color: var(--vlak); font-weight: 600; }
.bd-knop--secundair, .bd-knop--licht { background: var(--knop-secundair); border-color: var(--knop-secundair); color: var(--vlak); font-weight: 600; }
.bd-knop--tertiair { background: transparent; border-color: var(--knop-tertiair); color: var(--knop-tertiair); font-weight: 600; }
.bd-knop--tekst { border-color: transparent; background: transparent; color: var(--accent); }
/* Een knop zonder soort is tertiair (nacht 2; BESLISSINGEN 01-10: drie knopsoorten, geen vierde). Was: wit vlak, navy
   tekst, grijze rand (Ververs, het tandwiel, Bewaar, …). */
.bd-knop:not(.bd-knop--primair):not(.bd-knop--secundair):not(.bd-knop--licht):not(.bd-knop--tertiair):not(.bd-knop--tekst) {
  background: transparent; border-color: var(--knop-tertiair); color: var(--knop-tertiair); }
/* Uitgeschakeld, per soort (tokens --knop-uit-*, contrast staat daar). Na de regel hierboven en met minstens dezelfde
   specificiteit, zodat ook een knop zonder soort zijn uitgeschakelde stand krijgt. */
.bd-knop:disabled, .bd-knop[aria-disabled="true"] { cursor: not-allowed; border-style: dashed; }
.bd-knop--primair:disabled, .bd-knop--primair[aria-disabled="true"] {
  background: var(--accent-licht); border-color: var(--knop-primair); color: var(--knop-primair); }
.bd-knop--secundair:disabled, .bd-knop--secundair[aria-disabled="true"], .bd-knop--licht:disabled, .bd-knop--licht[aria-disabled="true"] {
  background: var(--lijn); border-color: var(--knop-secundair); color: var(--knop-secundair); }
.bd-knop:disabled:not(.bd-knop--primair):not(.bd-knop--secundair):not(.bd-knop--licht):not(.bd-knop--tekst),
.bd-knop[aria-disabled="true"]:not(.bd-knop--primair):not(.bd-knop--secundair):not(.bd-knop--licht):not(.bd-knop--tekst) {
  background: transparent; border-color: var(--lijn); color: var(--knop-uit-tekst); }
.bd-knop--tekst:disabled, .bd-knop--tekst[aria-disabled="true"] { color: var(--knop-uit-tekst); }
.bd-chip { background: var(--vlak); }
.bd-chip--actief { background: var(--accent-licht); border-color: var(--accent); color: var(--accent); }
.bd-veld--zoek { width: 280px; max-width: 100%; }

/* Focus is altijd zichtbaar — ook voor wie met het toetsenbord werkt. */
.bd-blok :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- 2. Kaartenrij ------------------------------------------------------ */
.bd-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--a3); margin: var(--a4) 0; max-width: var(--inhoud-max); }
/* Ook als een kaart een KNOP is. Een <button> erft geen lettertype en geen
   kleur van zijn ouder: zonder deze regels valt hij terug op de browserstandaard
   (13,3 px, zwart) en staat er ineens een maat in het scherm die nergens is
   afgesproken. Gemeten op het voorbeeldscherm, niet bedacht. */
.bd-kaart {
  background: var(--vlak); border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw); padding: var(--a3); text-align: left;
  font-family: var(--font); font-size: var(--tekst-basis); color: var(--tekst);
  border: 0; width: 100%; cursor: inherit;
}
button.bd-kaart { cursor: pointer; }
.bd-kaart-label { font-size: var(--tekst-bijschrift); color: var(--tekst-zacht); }
.bd-kaart-getal { font-size: var(--tekst-kaartgetal); font-weight: 600; color: var(--accent);
  display: flex; align-items: center; gap: var(--a1); }
.bd-kaart-eenheid { font-size: var(--tekst-bijschrift); color: var(--tekst-zacht); }

/* ---- 3. Tabel ----------------------------------------------------------- */
.bd-tabelkader { background: var(--vlak); border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw); overflow: hidden; max-width: var(--inhoud-max); }
.bd-tabelscroll { overflow-x: auto; }
.bd-tabel { width: 100%; border-collapse: collapse; font-size: var(--tekst-tabel); }
.bd-tabel th { font-size: var(--tekst-tabel); font-weight: 600; color: var(--tekst-zacht);
  text-align: left; padding: var(--a2) var(--a3); border-bottom: 1px solid var(--lijn); }
.bd-tabel td { font-size: var(--tekst-tabel); color: var(--tekst); padding: var(--a2) var(--a3);
  border-bottom: 1px solid var(--lijn); height: var(--rijhoogte); }
.bd-tabel .bd-num { text-align: right; font-variant-numeric: tabular-nums; }
.bd-artikel { display: flex; align-items: center; gap: var(--a2); }
.bd-artikel img { width: 32px; height: 32px; border-radius: var(--radius-veld); object-fit: cover; }
.bd-artikel-ean { font-size: var(--tekst-bijschrift); color: var(--tekst-zacht); }
.bd-naam-onbekend { color: var(--tekst-zacht); }

/* ---- 4. Filterrij ------------------------------------------------------- */
.bd-filterrij { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap;
  margin: var(--a3) 0; max-width: var(--inhoud-max); }
.bd-filteractie { margin-left: auto; }

/* ---- 5. Detailpaneel ---------------------------------------------------- */
.bd-paneel { position: fixed; top: 0; right: 0; bottom: 0; width: 40%; min-width: 320px;
  background: var(--vlak); box-shadow: var(--schaduw); z-index: 40;
  display: flex; flex-direction: column; }
.bd-paneel-kop { display: flex; align-items: center; gap: var(--a2);
  padding: var(--a3); border-bottom: 1px solid var(--lijn); }
.bd-paneel-kop h2 { font-size: var(--tekst-kop); margin: 0; font-weight: 600; }
.bd-paneel-tabs { display: flex; gap: var(--a1); padding: 0 var(--a3); border-bottom: 1px solid var(--lijn); }
/* De streep onder de actieve tab is een RAND, geen schaduw. Met een schaduw
   zou het scherm twee verschillende schaduwen kennen terwijl er één is
   afgesproken — en dan is "één schaduw" geen regel meer maar een intentie.
   Alle tabs krijgen een doorzichtige rand, zodat de tekst niet verspringt. */
.bd-paneel-tab { min-height: var(--hoogte-veld); border: 0; border-bottom: 2px solid transparent;
  background: transparent; font-family: var(--font);
  font-size: var(--tekst-basis); color: var(--tekst-zacht); cursor: pointer; padding: 0 var(--a2); }
.bd-paneel-tab--actief { color: var(--accent); border-bottom-color: var(--accent); }
.bd-paneel-inhoud { padding: var(--a3); overflow-y: auto; }

/* ---- 11. Tabbalk -------------------------------------------------------- */
/* Zelfde vorm als de tabs in het detailpaneel hierboven: een RAND onder de
   actieve tab, geen schaduw — het scherm kent één schaduw en die is voor
   kaarten. Alle tabs krijgen een doorzichtige rand zodat de tekst niet
   verspringt als je wisselt. */
.bd-tabbalk { display: flex; gap: var(--a1); flex-wrap: wrap;
  border-bottom: 1px solid var(--lijn); max-width: var(--inhoud-max); }
.bd-tab { min-height: var(--hoogte-veld); border: 0; border-bottom: 2px solid transparent;
  background: transparent; font-family: var(--font); font-size: var(--tekst-basis);
  color: var(--tekst-zacht); cursor: pointer; padding: 0 var(--a3);
  display: inline-flex; align-items: center; gap: var(--a1); }
.bd-tab--aan { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.bd-tab-tel { background: var(--accent-licht); color: var(--accent);
  border-radius: var(--radius-kaart); padding: 0 var(--a1); font-size: var(--tekst-bijschrift); }

/* ---- 6. Voorstelregel --------------------------------------------------- */
.bd-voorstel { background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw);
  padding: var(--a3); display: flex; gap: var(--a3); align-items: center; flex-wrap: wrap;
  max-width: var(--inhoud-max); }
.bd-voorstel-zin { flex: 1; min-width: 240px; font-size: var(--tekst-basis); }
.bd-voorstel-getallen { display: flex; gap: var(--a3); flex-wrap: wrap; }
.bd-voorstel-getal { font-size: var(--tekst-basis); font-weight: 600; }
.bd-voorstel-knoppen { display: flex; gap: var(--a1); align-items: center; }

/* ---- 7. Melding --------------------------------------------------------- */
.bd-melding { display: flex; align-items: center; gap: var(--a2); padding: var(--a2) var(--a3);
  border-radius: var(--radius-veld); font-size: var(--tekst-basis); max-width: var(--inhoud-max); }
.bd-melding--goed  { background: var(--goed-vlak);  color: var(--goed-tekst); }
.bd-melding--letop { background: var(--letop-vlak); color: var(--letop-tekst); }
.bd-melding--fout  { background: var(--fout-vlak);  color: var(--fout-tekst); }
.bd-melding-sluit { margin-left: auto; min-width: var(--klikdoel); min-height: var(--klikdoel);
  background: transparent; border: 0; cursor: pointer; color: inherit; font-size: var(--tekst-basis); }

/* ---- 8. Lege staat, foutstaat, skelet ----------------------------------- */
.bd-leeg, .bd-fout { background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw);
  padding: var(--a5) var(--a3); text-align: center; max-width: var(--inhoud-max); }
.bd-leeg-zin, .bd-fout-zin { font-size: var(--tekst-basis); color: var(--tekst-zacht); margin-bottom: var(--a2); }
.bd-skelet { background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw);
  padding: var(--a3); max-width: var(--inhoud-max); }
.bd-skelet-rij { height: var(--a3); border-radius: var(--radius-veld); background: var(--lijn);
  margin-bottom: var(--a2); }

/* ---- 9. Grafiek --------------------------------------------------------- */
.bd-grafiek { background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw);
  padding: var(--a3); max-width: var(--inhoud-max); }
.bd-grafiek-as { font-size: var(--tekst-bijschrift); fill: var(--tekst-zacht); }
.bd-grafiek-lijn { stroke: var(--accent); fill: none; stroke-width: 2; }
.bd-grafiek-grid { stroke: var(--lijn); stroke-width: 1; }
.bd-grafiek-perioden { display: flex; gap: var(--a1); margin-bottom: var(--a2); }

/* Dag uitlichten (dagUitlichting, 01-10): verticale lijn en een kaartje naast de dag; muis, tik en pijltjes. */
.bd-dag-houder { position: relative; }
.bd-dag-houder:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-kaart); }
.bd-dag-lijn { stroke: var(--tekst); stroke-width: 1; stroke-dasharray: 2 3; pointer-events: none; }
.bd-dag-lichter { fill: var(--vlak); opacity: .62; pointer-events: none; }
.bd-dag-stem { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bd-dagkaart { position: absolute; top: var(--a2); z-index: 5; min-width: min(200px, 100%); max-width: min(280px, 100%); background: var(--vlak);
  border-radius: var(--radius-kaart); box-shadow: var(--schaduw-laag); padding: var(--a2) var(--a3); font-size: var(--tekst-tabel);
  pointer-events: none; }

/* Legenda (04-10): één rij chips die doorloopt op de volgende regel, binnen de kaartbreedte; voor elke grafiek met meer reeksen. */
.bd-legenda { display: flex; flex-wrap: wrap; gap: var(--a1); margin: 0 0 var(--a1); padding: 0; list-style: none; min-width: 0; }
.bd-legenda-chip { display: inline-flex; align-items: center; gap: var(--a1); max-width: 100%; padding: 2px var(--a1); border-radius: var(--radius-rond);
  background: var(--achtergrond); font-size: var(--tekst-bijschrift); color: var(--tekst); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-legenda-sw { flex: 0 0 auto; width: 10px; height: 3px; border-radius: var(--radius-rond); }

/* ---- 10. Instellingenpaneel -------------------------------------------- */
.bd-instelling { display: flex; gap: var(--a3); align-items: flex-start; padding: var(--a3) 0;
  border-bottom: 1px solid var(--lijn); }
.bd-instelling-tekst { flex: 1; min-width: 0; }
.bd-instelling-label { font-size: var(--tekst-basis); font-weight: 600; }
.bd-instelling-zin { font-size: var(--tekst-bijschrift); color: var(--tekst-zacht); margin-top: var(--a1); }
.bd-uitleg-knop { min-width: var(--klikdoel); min-height: var(--klikdoel); border-radius: var(--radius-veld);
  border: 1px solid var(--lijn); background: var(--vlak); color: var(--tekst-zacht); cursor: pointer;
  font-family: var(--font); font-size: var(--tekst-basis); }

/* ---- 11. Datakwaliteit -------------------------------------------------- */
.bd-datakwaliteit { display: inline-flex; align-items: center; gap: var(--a1);
  color: var(--letop-tekst); background: var(--letop-vlak);
  border-radius: var(--radius-veld); padding: 0 var(--a1);
  font-size: var(--tekst-klein); min-height: var(--klikdoel); cursor: help; }

/* De container van een bouwdoos-scherm. Zet de basis, zodat een scherm dat
   hierin zit niets van de oude stylesheet meekrijgt wat het niet vroeg. */
.bd-scherm { font-family: var(--font); font-size: var(--tekst-basis); color: var(--tekst); }
.bd-scherm * { font-family: var(--font); }

/* ---- Zijbalk en inhoud -------------------------------------------------- */
.bd-zijbalk { width: var(--zijbalk); background: var(--vlak); border-right: 1px solid var(--lijn);
  min-height: 100%; }
.bd-inhoud { max-width: var(--inhoud-max); margin: 0 auto; padding: 0 var(--a3); }

/* Alleen voor schermlezers: het woord naast de kleur, zonder dat het de
   opmaak verstoort. */
.bd-alleen-voorlezen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Beweging respecteert de systeeminstelling (skill §4). */
@media (prefers-reduced-motion: reduce) {
  .bd-paneel { transition: none; }
}

/* ===========================================================================
   DE WERKVLOER: WAT DE ORDERREGEL MOET ZEGGEN (23-09-2026)
   ===========================================================================
   Deze regels horen bij het WMS en staan hier, niet in style.css, omdat ze
   alleen met variabelen werken. Elke waarde hieronder komt uit :root bovenaan
   dit bestand; er komt geen kleur en geen maat bij.

   Twan, na het zien van het ontwerp: "de x1 x2 enzo moeten ook met kleurcodes
   aangegeven worden zodat je het verschil tussen multi item orders makkelijk
   kan onderscheiden" en "onderscheid tussen de kanalen door een bol of shopify
   logo mis ik volledig".
   =========================================================================== */

/* Eén stuk blijft zoals het was: dat is het normale geval en krijgt geen
   nadruk. Zou alles een kleur krijgen, dan valt niets meer op. */
.verw-qty.qty-twee { background: var(--letop-vlak); color: var(--letop-tekst); }
.verw-qty.qty-meer { background: var(--fout-vlak);  color: var(--fout-tekst); }

/* Een order met meer dan één soort artikel. Het getal hierboven telt stuks;
   dit telt soorten — drie keer dezelfde dop is één locatie, drie verschillende
   artikelen is drie keer lopen. Daarom staat dit er als woorden bij. */
.verw-meer {
  display: inline-flex; align-items: center; gap: var(--a1);
  font-size: var(--tekst-bijschrift); font-weight: 600;
  padding: 2px var(--a2); border-radius: var(--radius-knop);
  background: var(--letop-vlak); color: var(--letop-tekst); white-space: nowrap;
}

/* HOVER OVER DE ARTIKELKOP LICHT DE HELE KAART OP (23-09-2026)
   ---------------------------------------------------------------------------
   Twan: "wanneer ik bij dit over de productinformatie boven de orderregels
   hover moeten alle orderregels ook meegenomen worden want die worden dan
   immers geselecteerd. Zowel bij meerdere orders van die EAN of 1 enkele."

   Een klik op de kop selecteert alles eronder, dus moet je vooraf kunnen zien
   wat dat "alles" is. Twee verschillende tinten, allebei uit een variabele:
   aanwijzen is de pagina-achtergrond, gekozen blijft accent-licht. Zou hover
   dezelfde kleur krijgen als gekozen, dan is niet meer te zien wat er al
   aanstaat. */
.verw-blok:has(.verw-kop.klikbaar:hover) .verw-orij:not(.gekozen) {
  background: var(--achtergrond);
}
.verw-blok:has(.verw-kop.klikbaar:hover) {
  box-shadow: 0 0 0 1px var(--accent), var(--schaduw);
}

/* De knoppenrij in de kop van Verwerken. Eén regel, alles op dezelfde hoogte,
   en de aftelklok mag als enige afwijken omdat het geen knop is. */
.verw-kopknoppen {
  display: flex; gap: var(--a2); align-items: center; flex-wrap: wrap;
}
.verw-kopknoppen > button { min-height: var(--klikdoel); }

/* DE ZES UITKOMSTEN VAN EEN RETOUR (23-09-2026)
   ---------------------------------------------------------------------------
   Twan: "Ook retouren mag je wel verbeteren want dat past momenteel ook niet in
   de verwachte stijl."

   Ze stonden als een flexrij met padding 6px 10px: zes knoppen van elk een
   andere breedte, allemaal even zwaar, en zo laag dat ze eerder als tekst lazen
   dan als keuze. Terwijl dit het zwaarste moment van het scherm is — de uitkomst
   gaat direct naar bol.com en is niet terug te draaien.

   Nu een rooster dat meebuigt met de breedte, dus gelijke knoppen op een rij,
   elk minstens --klikdoel hoog.

   EN DE TWEE DIE GELD KOSTEN ZIJN DE ENIGE MET KLEUR. "Ontvangen" en "Afkeuring
   terugdraaien" betalen de klant terug; de andere vier niet. Die twee dragen in
   de app al de klasse .ok — verwarrend, want ze zijn juist het onomkeerbare
   geval, maar dat hernoemen raakt meer dan dit scherm. Wat telt is dat je ze
   niet per ongeluk raakt. */
.retour-keuzes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--a1);
}
.retour-keuze {
  min-height: var(--klikdoel);
  justify-content: center;
  padding: var(--a1) var(--a2);
}
/* GEEL WAS HIER FOUT, NIET "NIET IN HET PALET" (huid ronde 3, klus 8). Twan: "bij 'afkeuring
   terugdraaien' en 'ontvangen' staan gele vlakken die niet in het palet zitten." Ze gebruikten wél al een
   bouwdoos-token — alleen het VERKEERDE: --letop-vlak/--letop-tekst (geel, "letop/aandacht") in plaats van
   --goed-vlak/--goed-tekst (groen, "ok"). Beide uitkomsten zijn juist de POSITIEVE kant (de klant krijgt
   zijn geld terug) — geel hoort daar niet bij. */
.retour-keuze.ok {
  border-color: var(--goed-vlak);
  background: var(--goed-vlak);
}
.retour-keuze.ok b { color: var(--goed-tekst); }
.retour-keuze.ok:hover { border-color: var(--goed-tekst); }

/* De navigatie door de rij, onder de order die je verwerkt. Stond onderaan de
   rijlijst rechts; die groeit met het aantal orders, dus bij twintig stuks liep
   de knop van het scherm af terwijl je blik bij de order staat. */
.verw-ordernav {
  display: flex; align-items: center; gap: var(--a3);
  margin-top: var(--a3); padding-top: var(--a3); border-top: 1px solid var(--lijn);
}
.verw-ordernav > button { min-height: var(--klikdoel); }
.verw-ordernav > button:last-child { margin-left: auto; }

/* Orders die nog niet zijn afgeteld en daarom geen label krijgen. Geen fout,
   wel een grens — dus letop, niet rood. */
.verw-slot {
  display: inline-flex; align-items: center; gap: var(--a1);
  font-size: var(--tekst-bijschrift); font-weight: 600;
  padding: 2px var(--a2); border-radius: var(--radius-veld);
  background: var(--letop-vlak); color: var(--letop-tekst); white-space: nowrap;
}

/* De labelknoppen als er nog iets moet gebeuren. Ze staan er, grijs, met de
   reden ernaast — zonder die knoppen bleef "Verzonden melden zonder track &
   trace" de enige knop op het scherm. */
.wms-label-knoppen {
  display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap;
}
.wms-rem {
  display: inline-flex; align-items: center; gap: var(--a1);
  font-size: var(--tekst-bijschrift); font-weight: 600;
  padding: 2px var(--a2); border-radius: var(--radius-veld);
  background: var(--letop-vlak); color: var(--letop-tekst); white-space: nowrap;
}

/* Wat er aan de hand is met deze order, bovenaan in één vorm. Stond verspreid:
   het annuleringsrisico en het ontbrekende land bij het adres, een vastgelopen
   zending onderaan bij Verzenden. Alle drie bepalen of je deze order kunt
   afmaken, dus je wilt ze zien vóór je gaat pakken. */
.wms-aandacht {
  display: flex; gap: var(--a2); align-items: flex-start;
  padding: var(--a2) 14px; border-radius: var(--radius-veld);
  font-size: var(--tekst-tabel); margin-bottom: var(--a1);
}
.wms-aandacht i { flex: 0 0 auto; margin-top: 2px; }
.wms-aandacht b { display: block; }
.wms-aandacht.fout { background: var(--fout-vlak); color: var(--fout-tekst); }
.wms-aandacht.letop { background: var(--letop-vlak); color: var(--letop-tekst); }

/* ===========================================================================
   DE CHIPS BOVEN DE ORDERKAART IN HET VERWERKSCHERM (23-09-2026)
   ===========================================================================
   Bol-deelzending, annuleringsverzoek en samen verzenden gaan over deze order
   in DEZE rij; de orderkaart zelf weet niets van een rij. Ze staan er dus
   boven, op één regel, met dezelfde afstand als de rest van de kaart. */
.verw-ovo-chips{ display:flex; flex-wrap:wrap; gap:var(--a1); margin-bottom:var(--a2); }
.verw-ovo-chips:empty{ display:none; }

/* ===========================================================================
   HET KANAAL OP EEN REGEL (23-09-2026)
   ===========================================================================
   Twan: "Ook onderscheid tussen de kanalen door een bol of shopify logo mis ik
   volledig." Er stond een algemeen winkelicoontje uit Tabler op een gekleurd
   rondje; nu staat er het echte logo op een licht vlak, zoals in het ontwerp.

   Licht en niet gekleurd: het bol-logo is zelf blauw en verdwijnt op een blauw
   vlak. De merkkleur zit in het logo, niet in de achtergrond. */
.kanaal-merk,
.kanaal-chip{
  display:inline-flex; align-items:center; gap:var(--a1);
  padding:2px var(--a2) 2px var(--a1); border-radius:var(--radius-kaart);   /* bij deze hoogte al een pil */
  font-size:var(--tekst-bijschrift); line-height:1.3; white-space:nowrap;
}
.kanaal-merk{ padding:2px var(--a1); }
.kanaal-merk img,
.kanaal-chip img{ display:block; }
.kanaal-bol{ background:var(--accent-licht); color:var(--tekst); }
.kanaal-shop{ background:var(--goed-vlak); color:var(--goed-tekst); }

/* Een dag die boven het bereik van de grafiek valt. Het driehoekje op de
   bovenrand zegt "hier lag iets hogers"; deze regel zegt hoeveel dagen en
   waar de rand ligt. Zonder die twee is een afgekapte grafiek een leugen. */
.verz-buiten-uitleg{
  font-size:var(--tekst-bijschrift); line-height:1.4; color:var(--tekst-uitleg);
  margin-top:var(--a1);
}

/* ===========================================================================
   DE VOORSTELREGEL MET ZIJN ONDERBOUWING (opdracht 9, klus 2, 24-09-2026)
   ===========================================================================
   De bovenste regel komt uit bouwdoos.voorstelregel. Dit is wat eromheen staat:
   de uitklap, wat er gaat gebeuren met oud → nieuw, en de uitkomst.

   De onderbouwing begint dicht. Je leest er tien op een dag; de zin is wat je
   scant en de rest is wat je nakijkt bij twijfel. */
.adv-vs{ margin-bottom: var(--a2); }
.adv-voorstel-onder{
  display:flex; align-items:center; gap: var(--a2); flex-wrap:wrap;
  padding: var(--a1) var(--a3); font-size: var(--tekst-bijschrift);
  color: var(--tekst-zacht);
}
.adv-uitklap{
  background:none; border:none; padding:0; cursor:pointer;
  color: var(--accent); font-size: var(--tekst-bijschrift); font-family: var(--font);
}
.adv-bron{ color: var(--tekst-zacht); }
.adv-wacht-ok{ color: var(--goed-tekst); background: var(--goed-vlak);
  padding:1px var(--a1); border-radius: var(--radius-veld); }

.adv-voorstel-uitleg{
  display:grid; gap: var(--a3); padding: 0 var(--a3) var(--a3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.adv-uitleg-kop{ font-size: var(--tekst-bijschrift); color: var(--tekst-zacht);
  margin-bottom: var(--a1); }

.adv-handelingen{ list-style:none; margin:0; padding:0; }
.adv-handeling{ display:flex; align-items:center; gap: var(--a1);
  padding: 2px 0; font-size: var(--tekst-tabel); flex-wrap:wrap; }
/* Uitgevinkt blijft staan en wordt niet verborgen: je moet later kunnen zien
   wat je hebt overgeslagen. */
.adv-handeling.uit{ opacity:0.45; text-decoration: line-through; }
.adv-handeling-wat{ flex:1; min-width:120px; }
.adv-oud{ color: var(--tekst-zacht); }

.adv-zekerheid{ font-size: var(--tekst-bijschrift); color: var(--tekst-zacht); }

.adv-uitkomst{
  padding: var(--a1) var(--a3); font-size: var(--tekst-tabel);
  border-radius: 0 0 var(--radius-kaart) var(--radius-kaart);
}
.adv-uitkomst.goed{ background: var(--goed-vlak); color: var(--goed-tekst); }
.adv-uitkomst.deels{ background: var(--letop-vlak); color: var(--letop-tekst); }
.adv-uitkomst.geweigerd{ background: var(--achtergrond); color: var(--tekst-zacht); }
.adv-fouten{ margin: var(--a1) 0 0; padding-left: var(--a3); }

/* Hoelang geleden de laatste webhook binnenkwam. Oranje boven een uur: een
   aanwijzing, geen storing — bij tien orders per dag is een gat van een uur
   heel normaal, maar het zegt wél iets als je hier kijkt omdat je iets mist. */
.webhook-geleden{ font-weight:500; }
.webhook-geleden.oud{
  background: var(--letop-vlak); color: var(--letop-tekst);
  padding: 1px var(--a1); border-radius: var(--radius-veld);
}

/* ===========================================================================
   DE LIJST VAN VANNACHT EN HET TANDWIEL "REGELS" (opdracht 9, klus B)
   =========================================================================== */
.adv-lijstkop{ display:flex; align-items:center; justify-content:space-between; gap: var(--a2);
  padding: var(--a1) var(--a3) var(--a2); }
.adv-handeling-detail{ flex-basis:100%; font-size: var(--tekst-bijschrift); padding-left: var(--a3); }
.adv-tandwiel{ margin-left: var(--a2); text-transform:none; letter-spacing:0; }
.adv-regels{ background: var(--vlak); border:1px solid var(--border); border-radius: var(--radius-kaart);
  margin-bottom: var(--a3); padding: var(--a2) 0; }
.adv-regel{ padding: var(--a2) var(--a3); border-top:1px solid var(--border); }
.adv-regel:first-of-type{ border-top:none; }
.adv-regel-kop{ display:flex; align-items:center; justify-content:space-between; }
.adv-regel-aan{ font-size: var(--tekst-bijschrift); color: var(--tekst-zacht); display:flex; gap: var(--a1); align-items:center; }
.adv-regel-zin{ font-size: var(--tekst-tabel); margin: 2px 0; }
.adv-regel-velden{ display:grid; gap: var(--a2); margin: var(--a2) 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.adv-regel-drempel label{ display:block; font-size: var(--tekst-bijschrift); color: var(--tekst-zacht); margin-bottom: 2px; }
.adv-regel-drempel input, .adv-regel-drempel select{ width:100%; max-width:180px; }
.adv-regel-onder{ display:flex; align-items:center; gap: var(--a2); }
.adv-regel-fout{ color: var(--fout-tekst); font-size: var(--tekst-bijschrift); }

/* De drie knoppen van een voorstel: keuze, reden en tegenvoorstel staan inline, onder de regel (klus C). */
.adv-inline{ display:flex; align-items:center; flex-wrap:wrap; gap: var(--a2); padding: var(--a2) var(--a3);
  border-top:1px solid var(--border); font-size: var(--tekst-tabel); }
.adv-inline input[type="text"]{ flex:1; min-width:200px; }
.adv-tegen-rij{ display:flex; align-items:center; gap: var(--a1); }
.adv-tegen-rij input{ width:90px; }
.adv-inlineinvoer { font: inherit; height: var(--klikdoel); min-width: 0; width: 88px; padding: 0 var(--a1);
  border: 1px solid var(--lijn); border-radius: var(--radius-veld); }
.adv-inlinefout { flex-basis: 100%; color: var(--fout-tekst); background: var(--fout-vlak); border-radius: var(--radius-veld);
  padding: var(--a1) var(--a2); text-align: left; font-size: var(--tekst-tabel); }
.adv-groeppaneel { padding: var(--a3); margin-bottom: var(--a2); background: var(--accent-licht); border-radius: var(--radius-kaart); }
.adv-groepkop { display: flex; flex-direction: column; margin-bottom: var(--a2); }
.adv-groepregel { display: flex; gap: var(--a2); align-items: center; min-height: var(--klikdoel); }
.adv-groepknoppen { display: flex; gap: var(--a2); justify-content: flex-end; margin-top: var(--a2); }
.adv-setkop { display: flex; justify-content: flex-end; margin-bottom: var(--a2); }
.adv-nwveld { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; margin-top: var(--a2); }
.adv-nwveld > label:first-child { min-width: 96px; }
.adv-nwzoek { font: inherit; height: var(--klikdoel); min-width: 240px; padding: 0 var(--a2); border: 1px solid var(--lijn); border-radius: var(--radius-veld); }
.adv-nwchip { display: inline-flex; gap: var(--a1); align-items: center; padding: 0 var(--a2); min-height: var(--klikdoel);
  background: var(--vlak); border-radius: var(--radius-veld); }
.adv-nwx { font: inherit; border: 0; background: transparent; cursor: pointer; min-width: var(--klikdoel); min-height: var(--klikdoel); }

/* ===========================================================================
   VISUELE TAAL (sectie 9): statkaart, deltapil, sparkline, ring, vóór/ná-balk,
   voorstelkaart, laagkaart, dagstrook, rechterkolom. Alleen variabelen.
   =========================================================================== */
.bd-alleen-voorlezen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bd-delta { display: inline-flex; align-items: center; gap: var(--a1); font-size: var(--tekst-klein); font-weight: 600;
  padding: 0 var(--a1); border-radius: var(--radius-rond); min-height: 20px; white-space: nowrap; position: relative; }
.bd-delta--goed { background: var(--goed-vlak); color: var(--goed-tekst); }
.bd-delta--slecht { background: var(--fout-vlak); color: var(--fout-tekst); }
.bd-delta--stil { background: var(--achtergrond); color: var(--tekst-zacht); font-weight: 400; }

.bd-spark { display: block; width: 100%; height: 32px; }
.bd-spark-lijn { fill: none; stroke: var(--spark); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bd-spark-punt { stroke: var(--spark); stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* Nawerk 7d/7e: het verloop — de maat als kop, waarden aan begin en eind, legenda gemeten · verwacht, hover/tik per dag */
.bd-spark-vak { margin: var(--a1) 0 0; }
.bd-spark-kop { display: flex; flex-wrap: wrap; gap: var(--a1) var(--a2); align-items: baseline; font-size: var(--tekst-klein); color: var(--tekst-uitleg, var(--tekst-zacht)); }
.bd-spark-titel { color: var(--tekst); font-weight: 600; }
.bd-spark-legenda { display: inline-flex; align-items: center; gap: var(--a1); }
.bd-spark-sw { display: inline-block; width: 14px; border-top: 2px solid var(--spark); vertical-align: middle; }
.bd-spark-sw--verwacht { border-top-style: dashed; }
.bd-spark-bron { margin-left: auto; }
.bd-spark-doek { padding: var(--a2) var(--a5); }
.bd-spark-vlak { position: relative; }
.bd-spark--verloop { height: 56px; overflow: visible; }
.bd-spark-verwacht { stroke-dasharray: 4 4; opacity: .8; }
.bd-spark-vandaag { stroke: var(--lijn); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bd-spark-raak { fill: transparent; cursor: crosshair; }
.bd-spark-waarde { position: absolute; transform: translate(-100%, -50%); font-size: var(--tekst-klein); color: var(--tekst); background: var(--vlak); padding: 0 var(--a1); border-radius: var(--radius-veld); white-space: nowrap; pointer-events: none; }
.bd-spark-waarde--midden { transform: translate(-50%, -120%); }
.bd-spark-waarde--eind { transform: translate(0, -50%); }
.bd-spark-tip { position: absolute; top: 0; font-size: var(--tekst-klein); color: var(--vlak); background: var(--tekst); padding: var(--a1) var(--a2); border-radius: var(--radius-veld); white-space: nowrap; pointer-events: none; }
@media (max-width: 600px) { .bd-spark--verloop { height: 40px; } }

.bd-ring { position: relative; display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; }
.bd-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bd-ring-baan { fill: none; stroke: var(--ring-baan); stroke-width: 7; }
.bd-ring-vulling { fill: none; stroke: var(--goed-tekst); stroke-width: 7; stroke-linecap: round; }
.bd-ring--boven .bd-ring-vulling { stroke: var(--fout-tekst); }
.bd-ring-tekst { position: relative; font-size: var(--tekst-basis); font-weight: 700; color: var(--tekst); }
.bd-ring-tekst small { font-size: var(--tekst-klein); font-weight: 400; }

.bd-vn { display: grid; gap: var(--a1); position: relative; }
.bd-vn-rij { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--a2); align-items: center; font-size: var(--tekst-klein); }
.bd-vn-label { color: var(--tekst-zacht); }
.bd-vn-baan { display: block; height: 10px; background: var(--achtergrond); border-radius: var(--radius-rond); overflow: hidden; position: relative; }
.bd-vn-band { position: absolute; top: 0; bottom: 0; background: var(--vn-na); opacity: .35; border-radius: var(--radius-rond); }
.bd-vn-balk { display: block; height: 100%; border-radius: var(--radius-rond); }
.bd-vn-balk--voor { background: var(--vn-voor); }
.bd-vn-balk--na { background: var(--vn-na); }
.bd-vn-balk--gemeten { background: var(--vn-gemeten); }
.bd-vn-waarde { font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }
.bd-vn-zeker { justify-self: end; font-size: var(--tekst-klein); color: var(--tekst-zacht); }
/* Dekkingsbalk (stuklijst, 29-09-2026): voorraad tegen wat hij dekt; het streepje is wat er nodig is. */
.bd-dk { display: grid; gap: var(--a1); }
.bd-dk-rij { display: grid; grid-template-columns: minmax(64px, 30%) 1fr auto; gap: var(--a2); align-items: center; font-size: var(--tekst-klein); }
.bd-dk-label { color: var(--tekst-zacht); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-dk-baan { position: relative; display: block; height: 10px; background: var(--achtergrond); border-radius: var(--radius-rond); }
.bd-dk-balk { display: block; height: 100%; border-radius: var(--radius-rond); background: var(--vn-na); }
.bd-dk-rij--krap .bd-dk-balk { background: var(--letop-tekst); }
.bd-dk-grens { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--tekst-zacht); border-radius: var(--radius-rond); }
.bd-dk-waarde { font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }
.bd-dk-krap { color: var(--letop-tekst); font-weight: 600; }
.bd-melding-actie { margin-left: auto; white-space: nowrap; }

.bd-stat { position: relative; display: grid; gap: var(--a1); padding: var(--a3) var(--a3); background: var(--vlak);
  border-radius: var(--radius-laag); box-shadow: var(--schaduw); min-width: 0; }
.bd-stat-kop { display: flex; gap: var(--a1); align-items: center; }
.bd-stat-label { font-size: var(--tekst-tabel); color: var(--tekst-zacht); }
.bd-stat-getal { font-size: var(--tekst-groot); font-weight: 700; line-height: 1.1; color: var(--tekst); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-stat-onder { display: flex; gap: var(--a2); align-items: center; flex-wrap: wrap; min-height: 22px; }
.bd-stat-sub { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.bd-stat-beeld { margin-top: var(--a1); }
.bd-stat--mini { padding: var(--a2) var(--a3); border-radius: var(--radius-kaart); box-shadow: none; background: var(--achtergrond); }
.bd-stat--mini .bd-stat-getal { font-size: var(--tekst-titel); }

.bd-mini { width: 44px; height: 44px; border-radius: var(--radius-kaart); object-fit: contain; background: var(--achtergrond); flex: none; }
.bd-mini--letter { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--accent); background: var(--accent-licht); }

.bd-vk { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--a2) var(--a3); align-items: center;
  background: var(--laag-vlak); color: var(--tekst); border-radius: var(--radius-kaart); padding: var(--a3); }
.bd-vk-minis { display: flex; gap: var(--a1); align-items: center; }
.bd-vk-meer { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.bd-vk-koprij { display: flex; align-items: baseline; gap: var(--a1); }
.bd-vk-koprij > :not(.bd-vk-kop) { flex-shrink: 0; white-space: nowrap; }
.bd-vk-kop { margin: 0; font-size: var(--tekst-voorstel); font-weight: 600; line-height: 1.3; }
.bd-vk-gevolg, .bd-vk-voorspelling { margin: var(--a1) 0 0; font-size: var(--tekst-tabel); color: var(--tekst-zacht); }
.bd-vk-chips { display: flex; gap: var(--a1); margin-top: var(--a1); }
.bd-vk .bd-pil { font-size: var(--tekst-klein); }
.bd-vk-bedrag { text-align: right; }
.bd-vk-bedrag-getal { font-size: var(--tekst-kaartgetal); font-weight: 700; color: var(--urgent); font-variant-numeric: tabular-nums; }
.bd-vk-bedrag-label { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.bd-vk-beeld, .bd-vk-knoppen { grid-column: 1 / -1; }
.bd-vk-knoppen { display: flex; gap: var(--a2); justify-content: flex-end; align-items: center; flex-wrap: wrap; }

.bd-laag { --laag-fg: var(--laag-tekst); border-radius: var(--radius-laag); box-shadow: var(--schaduw-laag); padding: var(--a4); color: var(--laag-fg); }
.bd-laag--nu { --laag-fg: var(--laag-nu-tekst); --laag-vlak: var(--vlak); }
.bd-laag--nu { background: linear-gradient(120deg, var(--laag-nu-van), var(--laag-nu-tot)); }
.bd-laag--week { background: linear-gradient(120deg, var(--laag-week-van), var(--laag-week-tot)); }
.bd-laag--gedaan { background: linear-gradient(120deg, var(--laag-gedaan-van), var(--laag-gedaan-tot)); }
.bd-laag--neutraal { background: linear-gradient(120deg, var(--laag-neutraal-van), var(--laag-neutraal-tot)); }
.bd-laag-kop { display: flex; align-items: baseline; gap: var(--a2); flex-wrap: wrap; margin-bottom: var(--a3); }
.bd-laag-kop h2 { margin: 0; font-size: var(--tekst-titel); font-weight: 700; color: var(--laag-fg); }
.bd-laag-tel { font-size: var(--tekst-tabel); background: var(--laag-vlak); color: var(--tekst); border-radius: var(--radius-rond); padding: 0 var(--a2); font-weight: 600; }
.bd-laag-som { margin-left: auto; font-size: var(--tekst-tabel); font-weight: 600; color: var(--laag-fg); }
.bd-laag-voor { margin-bottom: var(--a3); }
.bd-laag-inhoud { display: grid; gap: var(--a3); }
.bd-laag-meer { margin-top: var(--a3); }
.bd-laag-meer .bd-knop { background: transparent; color: var(--laag-fg); border-color: var(--laag-fg); }

.bd-dagen { display: grid; grid-template-columns: repeat(var(--dagen, 14), minmax(0, 1fr)); gap: var(--a1); align-items: end; }
.bd-dag { position: relative; display: grid; gap: 2px; justify-items: center; padding: var(--a1); border-radius: var(--radius-veld);
  background: var(--laag-vlak); color: var(--tekst); font-size: var(--tekst-klein); min-width: 0; }
.bd-dag--vandaag { outline: 2px solid var(--accent); outline-offset: -2px; }
.bd-dag-naam { color: var(--tekst-zacht); white-space: nowrap; }
.bd-dag-balk { display: flex; align-items: flex-end; width: 100%; max-width: 14px; height: 28px; background: var(--achtergrond); border-radius: var(--radius-veld); overflow: hidden; }
.bd-dag-balk i { display: block; width: 100%; background: var(--vn-na); min-height: 2px; }
.bd-dag--vooruit .bd-dag-balk i { background: var(--vn-gemeten); }
.bd-dag-aantal { font-size: var(--tekst-tabel); }
.bd-dag-vooruit { font-size: var(--tekst-klein); color: var(--goed-tekst); }
.bd-dag-rest { grid-column: 1 / -1; font-size: var(--tekst-klein); color: var(--laag-fg); }
.bd-dag-merk { font-size: var(--tekst-klein); font-weight: 700; line-height: 1; }
.bd-dag-merk--gevuld { color: var(--goed-tekst); }
.bd-dag-merk--mist { color: var(--fout-tekst); }
.bd-dag-merk--vrij { color: var(--tekst-zacht); }
.bd-dag--mist { background: var(--fout-vlak); }

.bd-kolom { display: grid; gap: var(--a3); align-content: start; width: 300px; max-width: 100%; }
.bd-kolom-kop { margin: 0; font-size: var(--tekst-titel); font-weight: 700; color: var(--tekst); }
.bd-kolom-sectie { background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a3); display: grid; gap: var(--a2); }
.bd-kolom-sectie h3 { margin: 0; font-size: var(--tekst-basis); font-weight: 600; color: var(--tekst); }

@media (max-width: 900px) { .bd-dagen { grid-template-columns: repeat(7, minmax(0, 1fr)); } .bd-vk { grid-template-columns: auto minmax(0, 1fr); } .bd-vk-bedrag { grid-column: 1 / -1; text-align: left; } }
@media (prefers-reduced-motion: no-preference) { .bd-vn-balk, .bd-dag-balk i { transition: width 200ms ease, height 200ms ease; } }

/* Voorbeelden op Instellingen → Bouwdoos (visuele onderdelen). */
.bd-voorbeeld { margin-top: var(--a4); }
.bd-voorbeeld-kop { display: flex; gap: var(--a2); align-items: baseline; margin-bottom: var(--a2); }
.bd-voorbeeld-kop h3 { margin: 0; font-size: var(--tekst-basis); }
.bd-voorbeeld-titel { font-size: var(--tekst-titel); margin: 0 0 var(--a2); }
.bd-voorbeeld-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--a3); }
.bd-voorbeeld-rij--los { display: flex; gap: var(--a3); align-items: center; flex-wrap: wrap; }

/* ===========================================================================
   STUURHUT (restyle, 26-09-2026): statkaarten bovenaan, de lagen Nu, Deze week en Gedaan links,
   de rechterkolom rechts. Alleen bouwdoos-onderdelen en variabelen.
   =========================================================================== */
.sh2 { display: grid; gap: var(--a4); }
.sh2-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a3); }
.sh2-leeg { background: var(--laag-vlak); color: var(--tekst); border-radius: var(--radius-kaart); padding: var(--a3); font-size: var(--tekst-basis); }
.bd-vk-kop { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bd-vk-gevolg, .bd-vk-voorspelling { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sh-kaart2 .bd-vk-beeld:empty { display: none; }
.sh-kaart2 .bd-vk-beeld { display: grid; gap: var(--a2); min-width: 0; }
.sh-kaart2 .sh-onderdelen { margin-top: var(--a1); }
.bd-laag .bd-dagen { margin-bottom: var(--a1); }
@media (max-width: 1100px) { .bd-kolom { width: 100%; } }
@media (max-width: 900px) { .sh2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bd-laag .tag-muted,
.cp-kaart .tag-muted,
.fs-art .tag-muted,
.np-kop .tag-muted,
.np-kaart2 .tag-muted,
.np-kaart .tag-muted,
.as-noot { font-size: var(--tekst-klein); }
.np-kaart .np-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-kaart .btn-xs { white-space: nowrap; }
/* Rapporten (ronde 4): de kleinere kengetallen onder de statkaarten */
.rp-klein { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--a2); margin: var(--a2) 0 var(--a3); }
/* Nawerk ronde 7, klus 5: ROAS, TACoS, CTR, CPC en conversie in witte kaarten, zoals de grote statkaarten erboven. */
.rp-klein .bd-stat--mini { background: var(--vlak); box-shadow: var(--schaduw); }
.cp-kaart { background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a3); display: grid; gap: var(--a2); min-width: 0; }
.cp-naam { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-sub { font-size: var(--tekst-klein); }
/* Nieuwe producten (ronde 4): laagkaarten met artikelkaarten */
.np-intro { margin-bottom: var(--a2); }
.np-kop { display: flex; justify-content: space-between; align-items: center; gap: var(--a3); flex-wrap: wrap; margin-bottom: var(--a2); }
.np-lijst2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--a3); }
.np-kaart2 { background: var(--laag-vlak); color: var(--tekst); border-radius: var(--radius-kaart); padding: var(--a3); display: grid; gap: var(--a2); min-width: 0; }
.np-kaart2-kop { display: flex; gap: var(--a2); align-items: center; min-width: 0; }
.np-kaart2-tekst { min-width: 0; }
.np-kaart2-naam { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-kaart2-cijfers { display: flex; gap: var(--a4); }
.np-kaart2-onder { display: flex; gap: var(--a2); align-items: center; flex-wrap: wrap; }
.np-pil { font-size: var(--tekst-klein); }
.fs-art { background: var(--laag-vlak); color: var(--tekst); border-radius: var(--radius-kaart); padding: var(--a3); display: grid; gap: var(--a2); min-width: 0; }
/* Ronde 5, klus 4: een kale <a> zonder eigen kleur/onderstreping krijgt de standaard blauwe, onderstreepte
   linkstijl van de browser — hier gewoon tekst, met de link pas zichtbaar bij hover/focus (net als de titel op
   een kaart elders in de app, die ook naar het productvenster gaat zonder als "link" te ogen). */
.fs-art-naam { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tekst); text-decoration: none; }
.fs-art-naam:hover, .fs-art-naam:focus-visible { text-decoration: underline; }
.fs-art-reden { font-size: var(--tekst-klein); }
/* Assistent: wat er loopt en waarom */
.as-exp { display: grid; gap: var(--a1); padding: var(--a2) 0; border-bottom: 1px solid var(--lijn); font-size: var(--tekst-basis); }
.as-exp-kop { font-size: var(--tekst-basis); }
.as-regel-uitleg { display: grid; gap: var(--a1); padding: var(--a2) 0 var(--a2) var(--a3); font-size: var(--tekst-tabel); }
.as-regel-uitleg p, .as-regel-uitleg ul { margin: 0; }
.as-noot { margin-top: var(--a2); font-size: var(--tekst-klein); }
/* Families: een rij per familie, geen kaart (ronde 3): naam met miniatuur, vier chips, regime, details. */
.fam-lijst { display: grid; gap: var(--a1); }
.fam-rij { display: grid; grid-template-columns: minmax(170px, 0.8fr) minmax(440px, 2.4fr) auto auto; gap: var(--a3); align-items: center; padding: var(--a2) var(--a3); background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw); min-width: 0; }
.fam-rij--open { box-shadow: var(--schaduw-laag); }
.fam-kop { display: flex; gap: var(--a2); align-items: center; min-width: 0; }
.fam-tekst { min-width: 0; }
.fam-naam { margin: 0; font-size: var(--tekst-basis); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fam-sub { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.fam-chips { display: flex; gap: var(--a1); flex-wrap: wrap; align-items: flex-start; }
.fam-chip { display: inline-block; }
.fam-chips .bd-pil { font-size: var(--tekst-klein); padding: 0 var(--a2); }
.fam-regime .rg-stand { padding-left: var(--a2); padding-right: var(--a2); }
.fam-chip > summary { list-style: none; cursor: pointer; }
.fam-chip > summary::-webkit-details-marker { display: none; }
.fam-menu .adv-setkies { max-width: 200px; }
.fam-menu { display: flex; gap: var(--a1); flex-wrap: wrap; align-items: center; margin-top: var(--a1); padding: var(--a2); background: var(--achtergrond); border-radius: var(--radius-kaart); }
.fam-regime { min-width: 0; }
.fam-details { white-space: nowrap; }
@media (max-width: 900px) { .fam-rij { grid-template-columns: minmax(0, 1fr); } }
.st-uitklap { display: grid; gap: var(--a3); min-width: 0; margin: var(--a1) 0 var(--a3); }
.sp-ontbreekt-rij { display: inline-flex; align-items: center; gap: var(--a1); flex-wrap: wrap; margin-right: var(--a3); }
.kb-land { padding: 0 var(--a1); border-radius: var(--radius-veld); }
.kb-land--goed { background: var(--goed-vlak); color: var(--goed-tekst); }
.kb-land--letop { background: var(--letop-vlak); color: var(--letop-tekst); }
.kb-land--fout { background: var(--fout-vlak); color: var(--fout-tekst); }
.kb-detail { display: inline-block; vertical-align: top; }
.kb-detail > summary { list-style: none; cursor: pointer; }
.kb-detail > summary::-webkit-details-marker { display: none; }
.kb-detail-tekst { font-size: var(--tekst-klein); color: var(--tekst-zacht); margin-top: var(--a1); display: grid; gap: var(--a1); }

.rg-compact .rg-uitleg { display: none; }
.sp-bodbalk { margin-top: var(--a1); max-width: 320px; }
.sp2-stats { margin-bottom: var(--a3); }
.bd-vk .adv-koopblok, .cp-kaart .adv-koopblok { font-size: var(--tekst-klein); margin: 0; }

/* Het tandwielpaneel (nacht 2): één paneel voor de instellingen van elk scherm, in de vorm van Retouren. Breedte
   hoogstens 100 % van het venster, niet 100vw: binnen de zoom van 1,3 (.office-view) is 100vw 1,3 keer het venster en
   stond het paneel op 390 px 117 px links buiten beeld (04-10-2026). */
.bd-tw-dim { position: fixed; inset: 0; background: color-mix(in srgb, var(--tekst) 45%, transparent); z-index: 10000; }
.bd-tw-paneel { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--vlak); z-index: 10001; display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto; box-shadow: var(--schaduw-laag); }
.bd-tw-paneel:focus { outline: none; }
.bd-tw-kop { display: flex; justify-content: space-between; align-items: center; padding: var(--a3) var(--a4); border-bottom: 1px solid var(--lijn); }
.bd-tw-kop h2 { margin: 0; font-size: var(--tekst-titel); }
.bd-tw-inhoud { overflow: auto; padding: var(--a3) var(--a4); display: grid; gap: var(--a4); align-content: start; }
.bd-tw-voet { display: flex; gap: var(--a2); justify-content: flex-end; align-items: center; flex-wrap: wrap; padding: var(--a3) 72px var(--a3) var(--a4); border-top: 1px solid var(--lijn); }
.bd-tw-voet .bd-melding { flex-basis: 100%; }
/* Secties in het tandwielpaneel (nawerk inbox 03-10): kop met titel links en een korte stand rechts; één open tegelijk. */
.bd-tw-inhoud:has(> .bd-tw-sectie) { gap: 0; }
.bd-tw-sectie { border-bottom: 1px solid var(--lijn); }
.bd-tw-sectie-kop { margin: 0; font-size: var(--tekst-basis); }
.bd-tw-sectie-knop { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; min-height: 44px; display: flex; align-items: center; gap: var(--a2); padding: var(--a2) 0; font-weight: 600; color: var(--tekst); }
.bd-tw-sectie-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bd-tw-sectie-titel { flex: 1; }
.bd-tw-sectie-stand { font-weight: 400; font-size: var(--tekst-klein); color: var(--tekst-zacht); text-align: right; }
.bd-tw-sectie-pijl { display: inline-block; color: var(--tekst-zacht); }
.bd-tw-sectie--open .bd-tw-sectie-pijl { transform: rotate(90deg); }
.bd-tw-sectie-inhoud { display: grid; gap: var(--a3); padding: 0 0 var(--a3); }
.bd-tw-sectie-inhoud[hidden] { display: none; }   /* anders wint display: grid van het hidden-attribuut */
@media (prefers-reduced-motion: no-preference) { .bd-tw-sectie-pijl { transition: transform 150ms ease; } }
@media (prefers-reduced-motion: no-preference) { .bd-tw-paneel { animation: bd-tw-in 200ms ease; } .bd-tw-dim { animation: bd-tw-dim 150ms ease-out; }
  @keyframes bd-tw-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes bd-tw-dim { from { opacity: 0; } to { opacity: 1; } } }

/* Op het verloopvlak van een laag (Nu, Deze week, …) haalt het gewone grijs geen 4,5:1 (3,9:1, gemeten met het
   contrastscript, nacht 2): binnen een laag het donkere tekstgrijs voor bijschriften. */
.bd-laag:not(.bd-laag--nu) { --tekst-zacht: color-mix(in srgb, var(--tekst) 75%, var(--vlak)); }
/* In de kop van de donkere laag Nu is een tertiaire knop wit omlijnd (blauw op donkerblauw haalt 2,1:1); de kaarten in de laag zijn wit en houden de gewone knop. */
.bd-laag--nu > .bd-laag-kop .bd-knop:not(.bd-knop--primair):not(.bd-knop--secundair):not(.bd-knop--licht):not(.bd-knop--tertiair):not(.bd-knop--tekst),
.bd-laag--nu > .bd-laag-kop .bd-knop--tertiair { color: var(--laag-nu-tekst); border-color: var(--laag-nu-tekst); }

/* Proef nettomarge (C2, 04-10-2026): de margedoelkaart in de Stuurhut — rekensom, concept en het verzoek aan bol. */
.md-kaart { min-width: 0; max-width: 100%; }
.md-kaart .bd-vk-beeld { gap: var(--a3); min-width: 0; max-width: 100%; }
.md-kaart .bd-vk-beeld > *, .md-concept > *, .md-detail, .md-verzoek { min-width: 0; max-width: 100%; }
.md-zin { margin: 0; line-height: 1.5; }
.md-zacht { color: var(--tekst-zacht); font-size: var(--tekst-tabel); margin: 0; line-height: 1.45; }
.md-tabel-wrap { overflow-x: auto; width: 100%; max-width: 100%; }
.md-rekensom { border-collapse: collapse; width: 100%; font-size: var(--tekst-tabel); }
.md-rekensom caption { text-align: left; color: var(--tekst-zacht); padding-bottom: var(--a1); }
.md-rekensom th, .md-rekensom td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--lijn); vertical-align: top; color: var(--tekst); }
.md-rekensom thead th { color: var(--tekst-zacht); font-weight: 600; }
.md-rekensom tbody th { font-weight: 400; }
.md-rekensom .md-getal { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.md-rekensom .md-bron { display: block; color: var(--tekst-zacht); font-weight: 400; font-size: var(--tekst-klein); line-height: 1.4; margin-top: 2px; }
.md-rekensom .md-som th, .md-rekensom .md-som td.md-getal { font-weight: 600; }
.md-rekensom .md-eind th, .md-rekensom .md-eind td { border-bottom: 0; background: var(--accent-licht); }
.md-omslag { margin: 0; line-height: 1.5; }
.md-voorstel { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; padding: var(--a2) var(--a3); background: var(--accent-licht); border-radius: var(--radius-kaart); }
.md-voorstel p { margin: 0; flex: 1 1 280px; }
.md-concept { border-top: 1px solid var(--lijn); padding-top: var(--a3); display: grid; gap: var(--a2); }
.md-concept h4, .md-tw-sectie h4 { margin: 0; font-size: var(--tekst-basis); color: var(--tekst); }
.md-feiten { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 4px var(--a3); margin: 0; }
.md-feiten dt { color: var(--tekst-zacht); }
.md-feiten dd { margin: 0; color: var(--tekst); min-width: 0; overflow-wrap: anywhere; }
.md-velden ul { margin: 4px 0 0; padding-left: 18px; }
.md-detail summary { cursor: pointer; color: var(--accent); }
.md-verzoek { margin-top: var(--a2); }
.md-verzoek-kop { font-family: ui-monospace, Menlo, monospace; font-size: var(--tekst-klein); color: var(--tekst); overflow-wrap: anywhere; }
.md-verzoek pre { margin: 4px 0 0; padding: var(--a2); background: var(--achtergrond); color: var(--tekst); border-radius: var(--radius-veld); font-size: var(--tekst-klein); overflow-x: auto; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.md-uitkomst { padding: var(--a2) var(--a3); border-radius: var(--radius-kaart); overflow-wrap: anywhere; }
.md-uitkomst--goed { background: var(--goed-vlak); color: var(--goed-tekst); }
.md-uitkomst--fout { background: var(--fout-vlak); color: var(--fout-tekst); }
.md-uitkomst ul { margin: 4px 0 0; padding-left: 18px; font-size: var(--tekst-klein); }
.md-tw-sectie { border-top: 1px solid var(--lijn); padding-top: var(--a3); margin-top: var(--a3); display: grid; gap: var(--a2); }
.md-naamveld { width: min(100%, 420px); }
.md-tw-sectie > * { min-width: 0; }
.md-tw-sectie h4 { overflow-wrap: anywhere; }
.md-tw .bd-instelling { flex-wrap: wrap; }
.md-tw .bd-instelling-tekst { min-width: 0; flex: 1 1 200px; }
@media (max-width: 640px) {
  .md-feiten { grid-template-columns: 1fr; }
  .md-rekensom .md-getal { white-space: normal; }
  .md-rekensom th, .md-rekensom td { padding: 6px 4px; }
}
.md-bronnen { margin-top: var(--a2); font-size: var(--tekst-tabel); }
/* Punt 1 (04-10): de trajectkaart met campagnes erin, het paneel per traject. */
.md-camp { border-top: 1px solid var(--lijn); padding-top: var(--a3); display: grid; gap: var(--a2); min-width: 0; }
.md-camp > * { min-width: 0; max-width: 100%; }
.md-camp-kop { margin: 0; font-size: var(--tekst-basis); color: var(--tekst); display: flex; flex-wrap: wrap; gap: var(--a1) var(--a3); justify-content: space-between; overflow-wrap: anywhere; }
.md-camp-doel { font-weight: 400; color: var(--tekst); }
.md-knoppen { display: flex; flex-wrap: wrap; gap: var(--a2); }
.md-suggestie { display: grid; gap: var(--a2); padding: var(--a2) var(--a3); background: var(--accent-licht); border-radius: var(--radius-kaart); }
.md-waarom textarea { width: min(100%, 420px); font: inherit; }
.md-lijst { margin: 0; padding-left: 18px; display: grid; gap: var(--a1); }
/* Uitgeschakeld op het donkere vlak van Nu (kop en "meer"): wit blijft, de gestreepte rand zegt dat hij uit staat. */
.bd-laag--nu > .bd-laag-kop .bd-knop:disabled:not(.bd-knop--primair):not(.bd-knop--secundair):not(.bd-knop--licht),
.bd-laag--nu .bd-laag-meer .bd-knop:disabled:not(.bd-knop--primair):not(.bd-knop--secundair):not(.bd-knop--licht) { color: var(--laag-nu-tekst); border-color: var(--laag-nu-tekst); }