/* ==========================================================================
   opmaak.css : de opmaaklaag van Nivomix
   ==========================================================================
   Vervangt `typemachine.css` op 28.09.2026. Robin: *zorg voor een kwalitatieve totale make over
   waar nodig.* De gids waar dit uit komt staat in `claude/NIVOMIX-opmaakgids.md`.

   WAAROM DE NAAM VERANDERT
   ------------------------
   Het blad heette typemachine omdat er één typemachineletter over het hele platform lag. Dat is
   niet meer zo, dus de naam loog. Wat er wél over het hele platform ligt, is de opmaak.

   WAT ER BLIJFT, EN DAT IS HET GEZICHT VAN HET PLATFORM
   -----------------------------------------------------
     ┌─ TITEL ──────────┐   een kader met de titel in de rand
     [ Bewaren ]            knoppen als vakjes met een rand
     ┏━ BEWAREN ━┓          de volle knop met de limoen als schaduw eronder
     LOCATIE                labels klein, in hoofdletters, gespatieerd

   De vier kleuren van de huisstijl blijven zoals ze in `style.css` staan, en de limoen blijft
   markeren zonder ooit tekst te dragen.

   WAT ER VERANDERT, EN WAAROM
   ---------------------------
   **1. Twee letters in plaats van één.** IBM Plex Sans voor de woorden, IBM Plex Mono voor de
   cijfers, de VOR-nummers, de bonnummers, de uren en de bedragen. De enige reden waarom er in
   september één typemachineletter kwam, was dat de cijfers dan onder elkaar staan, en dat doet
   `font-variant-numeric: tabular-nums` even goed met een gewone letter. Wat een typemachineletter
   wél overal kost: elke letter is even breed, dus woorden lezen trager. Zelfde familie, dus het
   blijft één huis.

   **2. De letters komen van onze eigen server.** Ze stonden bij Google. Dat platform moet zonder
   verbinding opengaan (`sw.js`), en zonder verbinding was de letter dus weg. Nu staan ze in
   `public/letters/` en worden ze door de service worker meegenomen. 204 kB, één keer.

   **3. Alles is groter.** De tekst stond op 13,5 px, de labels en kolomkoppen op 10,5. Een ploeg
   die met handschoenen aan op een laadkade staat, leest dat niet. Tekst 15 px op kantoor, 16 px op
   een klein scherm, labels minstens 12.

   **4. Knoppen zijn raakbaar.** Een gewone knop was ongeveer 34 px hoog en een kleine 21. De norm
   WCAG 2.5.5 zet 44 bij 44 px, en 2.5.8 zet 24 als absolute ondergrens. Nu: 44 op kantoor, 48 op
   een tablet, 56 voor de grote knop van de ploeg.

   **5. Een derde soort knop: de gevaarknop.** Rood, en alleen voor wat niet terug te draaien is.
   Ze staat nooit naast de volle knop.

   **6. De afdelingen staan links** op een breed scherm, in plaats van acht knoppen naast elkaar in
   een balk die in twee stukken valt. Dat is enkel opmaak: de kop blijft dezelfde kop, hij gaat
   rechtop staan. Onder 1000 px blijft alles zoals het was.

   Dit blad komt ná `style.css` en wint dus van gelijke regels daar.
   ========================================================================== */

/* ---------- de letters staan in tokens.css ---------- */

:root{
  /* De kaderlijn: de inktkleur, verdund, zodat ze in het donker mee kantelt. */
  --rand:color-mix(in srgb,var(--ink) 30%,transparent);
  --rand-zwaar:color-mix(in srgb,var(--ink) 62%,transparent);
  /* Eén maat voor wat een vinger moet kunnen raken. */
  --raak:44px;
  --rij:40px;
}

/* ---------- de grondmaat ---------- */
body{font:400 var(--nx-tekst)/1.5 var(--font-sans);
  /* Cijfers staan overal onder elkaar, ook buiten een tabel. Dit is de regel die de
     typemachineletter overbodig maakt. */
  font-variant-numeric:tabular-nums}
/* Op een klein scherm, dus de tablet van de ploeg en de telefoon van de chauffeur, een tik groter.
   NN/g meet op vluchtig lezen dat groter werkelijk sneller juist gelezen wordt. */
@media(max-width:900px){body{font-size:var(--nx-tekst)}:root{--raak:48px;--rij:48px}}

/* ---------- koppen ---------- */
h1{font:700 21px/1.2 var(--font-sans);letter-spacing:-.01em}
/* De blokkop: klein, hoofdletters, gespatieerd, zoals ┌─ BINNENGEKOMEN ──. Ze stond op 11 px en
   was daarmee kleiner dan de tekst eronder; een titel die kleiner is dan zijn inhoud is geen
   titel meer. */
h2{font:700 var(--nx-tekst)/1.2 var(--font-sans);letter-spacing:.1em}
h3{font:600 var(--nx-tekst)/1.3 var(--font-sans);letter-spacing:0}
h4{font:600 var(--nx-tekst)/1.3 var(--font-sans)}
.sub{font-size:var(--nx-tekst)}
.hint{font-size:var(--nx-tekst);color:var(--muted)}

/* ---------- het kader met de titel in de rand ---------- */
.card{border:1.5px solid var(--rand);border-radius:6px;padding:16px 18px;position:relative;
  box-shadow:none}
.card:has(>h2:first-child){padding-top:22px;margin-top:10px}
.card>h2:first-child{position:absolute;top:-9px;left:12px;margin:0;padding:0 6px;line-height:1;
  background:var(--surface-1);color:var(--ink)}
.card>h2:first-child::before{content:"\2500\2500\00a0";color:var(--rand);font-weight:400}
.card>h2:first-child::after{content:"\00a0\2500\2500";color:var(--rand);font-weight:400}
.card .card{border-width:1px;border-color:var(--grid)}
/* De uitklapbare blokken dragen hun titel in de kop zelf; die kop leest als de rand. */
.bkop{letter-spacing:.1em;text-transform:uppercase;font-size:var(--nx-tekst);font-weight:700}
.bkop .bbij{letter-spacing:0;text-transform:none;font-size:var(--nx-tekst);font-weight:400}

/* ==========================================================================
   knoppen
   ==========================================================================
   Drie soorten en geen vierde: de volle knop (één per scherm), de stille knop met enkel een rand,
   en de gevaarknop. Elke knop is minstens 44 px hoog, want dat is de maat van een vinger.
   ========================================================================== */
.btn{border:1.5px solid var(--rand);border-radius:5px;padding:10px 16px;font-weight:500;
  background:var(--surface-1);line-height:1.2;min-height:var(--raak);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--font-sans);font-size:var(--nx-tekst)}
.btn:hover{border-color:var(--rand-zwaar);background:var(--vlak2)}
/* De volle knop: het dikke kader ┏━━━┓, met de limoen als schaduw eronder. Dat is het enige vlak
   op de bladzijde dat echt om een klik vraagt. */
.btn.primary{background:var(--knop);color:var(--knop-ink);border-color:var(--knop);
  box-shadow:3px 3px 0 var(--limoen);font-weight:600}
.btn.primary:hover{filter:none;transform:translate(1px,1px);box-shadow:2px 2px 0 var(--limoen)}
.btn.primary:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--limoen)}
/* De gevaarknop. Alleen voor wat niet terug te draaien is, en GOV.UK zegt erbij: nooit alleen op
   de kleur vertrouwen, het woord moet het ook zeggen. Daarom staat er geen vulling op: ze mag
   opvallen, ze mag niet uitnodigen. */
.btn.gevaar{border-color:var(--crit);color:var(--crit);background:var(--surface-1);font-weight:600;
  box-shadow:none}
.btn.gevaar:hover{background:var(--foutbg);border-color:var(--crit)}
.btn.gevaar.primary{background:var(--crit);color:#fff;border-color:var(--crit);box-shadow:none}
/* De grote knop: voor de ploeg en de chauffeur, één tegelijk in beeld. */
.btn.big,.btn.groot{border-width:2px;border-radius:7px;padding:16px 20px;font-size:17px;
  font-weight:700;letter-spacing:.02em;min-height:56px}
.btn.big.primary,.btn.groot.primary{box-shadow:4px 4px 0 var(--limoen)}
.btn.big.primary:hover,.btn.groot.primary:hover{box-shadow:3px 3px 0 var(--limoen)}
@media(max-width:900px){.btn.big,.btn.groot{min-height:64px;font-size:18px}}
/* De kleine knop stond op 21 px hoog. Dat is onder elke norm. Ze mag klein blijven lezen, maar ze
   moet raakbaar blijven: 32 px, en op een klein scherm de volle 44. */
.btn.klein{padding:6px 11px;font-size:var(--nx-tekst);min-height:32px}
@media(max-width:900px){.btn.klein{min-height:44px;padding:9px 13px;font-size:var(--nx-tekst)}}
.btn.aan{border-color:var(--s1);color:var(--s1);font-weight:600;background:var(--vlak2)}
header .btn{border-color:rgba(255,255,255,.35);box-shadow:none;min-height:36px;padding:7px 12px;
  font-size:var(--nx-tekst)}
header .btn:hover{border-color:#fff}
/* Een knop die uit staat zegt niet waarom. Atlassian en GOV.UK raden hem allebei af, en het is ook
   de eigen regel: eerst tonen, dan doen. Waar er toch één staat, is ze zichtbaar uit en niet
   half zichtbaar. */
.btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}

/* ---------- velden ---------- */
input,select,textarea{border:1.5px solid var(--rand);border-radius:5px;background:var(--surface-1);
  padding:10px 12px;font-family:var(--font-sans);font-size:var(--nx-tekst)}
input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:var(--raak)}
textarea{min-height:80px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--limoen);outline-offset:1px;
  border-color:var(--rand-zwaar)}
/* Het vinkje mag niet kleiner zijn dan wat een vinger raakt. */
input[type=checkbox],input[type=radio]{width:20px;height:20px;accent-color:var(--s1)}
@media(max-width:900px){input[type=checkbox],input[type=radio]{width:24px;height:24px}}
/* Een datum, een uur en een getal zijn cijfers, dus die staan in de typemachineletter. */
input[type=date],input[type=time],input[type=number],input[type=datetime-local],input[type=month]{
  font-family:var(--font-mono);font-size:var(--nx-tekst)}
/* Het label: klein, in hoofdletters, gespatieerd. Dat blijft, want NN/g meet dat hoofdletters op
   één of twee losse woorden 26 procent sneller juist gelezen worden. Wat verandert is de maat:
   10,5 px was de kleinste tekst op het scherm. */
label{font-size:var(--nx-tekst);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);
  font-weight:600}
/* Wat ín het label staat (het veld, een vinkje met zijn tekst) hoort gewoon te lezen. */
label>input,label>select,label>textarea,label>span,label>b,label>div{text-transform:none;
  letter-spacing:0;font-size:var(--nx-tekst);color:var(--ink);font-weight:400}
/* Een label dat als knop dienstdoet (een bestandkiezer zit altijd in een label) leest als een
   knop. Zonder deze regel stond er MAILBESTANDEN KIEZEN in hoofdletters naast een gewone knop. */
label.btn{text-transform:none;letter-spacing:0;font-size:var(--nx-tekst);font-weight:500;color:var(--ink)}
label.btn.primary{color:var(--knop-ink);font-weight:600}
label.vink,label.kvink,label.kkitem,label.kkklant,.vink label{text-transform:none;letter-spacing:0;
  font-size:var(--nx-tekst);color:var(--ink);font-weight:400;min-height:var(--raak);display:flex;
  align-items:center;gap:8px}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.85}
.step button{border:2px solid var(--rand);border-radius:6px;background:var(--surface-1);
  min-height:var(--raak);min-width:var(--raak)}
.step input{border:2px solid var(--rand-zwaar);border-radius:6px;font-weight:700;
  font-family:var(--font-mono)}

/* ==========================================================================
   tabellen
   ==========================================================================
   Geen hoofdletters op de koppen: `innerText` neemt `text-transform` over, en de toetsen lezen
   koppen op hun tekst (travelreporttoets zoekt 'Naam', niet 'NAAM'). Klein, gespatieerd en gedempt
   geeft dezelfde rust zonder de toetsen te breken.
   ========================================================================== */
table{font-variant-numeric:tabular-nums}
th{font:600 var(--nx-tekst)/1.2 var(--font-mono);letter-spacing:.04em;color:var(--ink-2);
  border-bottom:1.5px solid var(--rand);padding-top:9px;padding-bottom:9px}
td{border-top:1px solid var(--grid);height:var(--rij)}
tbody tr:first-child td{border-top:0}
tbody tr:hover>td{background:color-mix(in srgb,var(--s1) 4%,transparent)}
/* Cijfers rechts en in de typemachineletter. Dat is de enige uitlijning waarbij je een kolom
   bedragen met je oog kan optellen. */
td.r,th.r,td.num,th.num,.oplijst .r{text-align:right}
td.r,td.num{font-family:var(--font-mono);font-size:var(--nx-tekst)}
.oplijst.kop{letter-spacing:.04em;font-size:var(--nx-tekst);font-family:var(--font-mono);font-weight:600;
  text-transform:none}
.oplijst{min-height:var(--rij)}

/* ---------- pillen, cijfers, tabbladen ---------- */
.pill{border-radius:3px;font:600 var(--nx-tekst)/1.35 var(--font-mono);letter-spacing:0;padding:1px 6px;
  border-color:var(--rand)}
.pill.on{border-color:var(--s1)}
.kpi .v{font:700 28px/1.05 var(--font-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .l{font:600 var(--nx-tekst)/1.2 var(--font-sans);text-transform:uppercase;letter-spacing:.07em}
.tabs{border-radius:5px;border-color:var(--rand)}
.tabs button{border-radius:4px;font:600 var(--nx-tekst)/1.2 var(--font-sans);letter-spacing:0;
  min-height:38px;padding:8px 14px}
header .tabs{border-color:rgba(255,255,255,.28)}
.chtabs button{border-radius:7px;border-width:1.5px;letter-spacing:0;font-size:var(--nx-tekst);
  min-height:var(--raak);font-weight:600}
.notitie{border-radius:0 5px 5px 0;border-left-width:4px}
.ref,.ref.groot,.dchip{border-radius:3px;font-family:var(--font-mono)}
.plijst,.vkaart,.azlijst,.tabelrol{border-radius:5px;border-color:var(--rand)}
.taakbanner,.taakstrook{border-radius:6px}
/* De toast is vluchtig lezen bij uitstek: één regel, en je kijkt er één keer naar. Groter dus. */
.toast{border-radius:5px;font:500 var(--nx-tekst)/1.4 var(--font-sans);border:1.5px solid var(--limoen);
  padding:12px 18px}
.versie{font-family:var(--font-mono);font-size:var(--nx-tekst)}

/* ---------- vensters: een dik kader met de limoen erachter ---------- */
.mkaart{border:2px solid var(--rand-zwaar);border-radius:6px;
  box-shadow:8px 8px 0 color-mix(in srgb,var(--limoen) 75%,transparent)}
.modaal{background:rgba(23,53,59,.45)}

/* ==========================================================================
   de kop, en de afdelingen naar links
   ==========================================================================
   Acht afdelingen naast elkaar in één balk valt op een kleinere laptop in twee stukken en loopt bij
   de negende vast. NN/g meet dat een lijst onder elkaar sneller te doorzoeken is dan dezelfde lijst
   naast elkaar, en dat mensen 80 procent van de tijd naar de linkerhelft van het scherm kijken.

   Dit is enkel opmaak. De kop blijft precies dezelfde kop met dezelfde knoppen in dezelfde orde;
   hij gaat rechtop staan zodra er afdelingen in zitten en het scherm breed genoeg is. Voor de
   chauffeur, de ploeg en de klant staat er geen afdelingenrij in de kop, dus voor hen verandert er
   niets. Onder 1000 px ook niet.
   ========================================================================== */
header{border-bottom:3px solid var(--limoen)}
.merkwoord{font-family:var(--font-sans);letter-spacing:.06em;text-transform:uppercase;font-size:var(--nx-tekst)}
header .live{font-size:var(--nx-tekst);letter-spacing:0}
header b{font-family:Syncopate,var(--font-sans),sans-serif}

@media(min-width:1000px){
  /* De rij is 212 px breed. Dat draagt de langste afdelingsnaam (Depot en materiaal) op één regel
     bij 14 px. */
  body:has(header .takkies){padding-left:212px}
  header:has(.takkies){
    position:fixed;left:0;top:0;bottom:0;width:212px;
    flex-direction:column;align-items:stretch;flex-wrap:nowrap;
    padding:16px 12px;gap:10px;row-gap:10px;
    border-bottom:0;border-right:3px solid var(--limoen);
    overflow-y:auto;overflow-x:hidden;z-index:6}
  /* Het woordmerk bovenaan, met het woord Platform eronder in plaats van ernaast. */
  header:has(.takkies)>b{font-size:var(--nx-tekst);margin-left:2px}
  header:has(.takkies)>.merkwoord{margin:-8px 0 4px 2px}
  /* De afdelingen: een lijst, elk over de volle breedte, met de limoen als merk op de open
     afdeling. Geen omkaderde groep meer, want een kader om een volle kolom is ruis. */
  header .takkies{display:flex;flex-direction:column;gap:2px;background:none;border:0;padding:0}
  header .takkies button{width:100%;text-align:left;padding:9px 10px;border-radius:5px;
    min-height:40px;font:500 var(--nx-tekst)/1.2 var(--font-sans);
    border-left:3px solid transparent;display:flex;align-items:center;gap:7px}
  header .takkies button.aan{background:rgba(255,255,255,.12);color:#fff;font-weight:700;
    border-left-color:var(--limoen)}
  header .takkies button:hover{background:rgba(255,255,255,.08)}
  /* De werkplaatsen en de tabbladen van de open afdeling: eronder, ingesprongen, zodat te zien is
     dat ze bij die afdeling horen. */
  header .tabs{display:flex;flex-direction:column;gap:2px;background:none;border:0;padding:0;
    margin-left:10px;padding-left:8px;border-left:1px solid rgba(255,255,255,.18)}
  header .tabs button{width:100%;text-align:left;padding:7px 9px;min-height:34px;
    font:500 var(--nx-tekst)/1.2 var(--font-sans);border-radius:4px}
  header .tabs button.aan{background:#fff;color:var(--merk);font-weight:700}
  /* De spacer duwt de stand van de verbinding, de versie en de knoppen naar de onderkant. */
  header:has(.takkies)>.sp{flex:1 0 8px}
  header:has(.takkies)>#live{order:90;font-size:var(--nx-tekst)}
  header:has(.takkies)>.versie{order:91;font-size:var(--nx-tekst)}
  header:has(.takkies) .kopmenu,header:has(.takkies)>.kopicoon{order:92}
  header:has(.takkies) .kopmenu{display:block;position:relative}
  header:has(.takkies) .kopmenu>.kopicoon{width:100%;text-align:left;justify-content:flex-start}
  /* Het uitklapmenu opende naar rechtsonder vanuit de kop. In een rij links hoort het naar rechts
     open te gaan, anders staat het buiten het scherm. */
  /* Robin, 29.09.2026: *het menu als ik op de gebruikersnaam klik is niet zichtbaar, dit verdwijnt achter
     de rest van het scherm.* De rij links scrolt zelf (`overflow`), en een menu dat daarbuiten openklapt,
     werd door die rij afgeknipt. Het staat nu vast op het scherm, naast de rij, onderaan, boven de
     bladzijde. Een vast element binnen een vaste rij wordt niet afgeknipt door haar scroll. */
  header:has(.takkies) .alglijst{position:fixed;left:222px;right:auto;top:auto;bottom:12px;margin:0;
    z-index:70;max-height:calc(100vh - 24px);overflow:auto;box-shadow:0 8px 28px rgba(0,0,0,.28)}
  header:has(.takkies)>.kopicoon{width:100%;justify-content:flex-start;min-height:40px}
  /* De bladzijde eronder heeft de volle hoogte, dus de kop is niet meer sticky nodig. */
  body:has(header .takkies) .wrap{padding-top:18px}
}
/* Een scherm tussen 1000 en 1240 px: de rij mag wat smaller, anders blijft er te weinig over voor
   een tabel met tien kolommen. */
@media(min-width:1000px) and (max-width:1240px){
  body:has(header .takkies){padding-left:188px}
  header:has(.takkies){width:188px}
  header .takkies button{font-size:var(--nx-tekst);padding:8px 9px;min-height:38px}
  header:has(.takkies) .alglijst{left:198px}
}

/* ==========================================================================
   de takken met een eigen stijlblok
   ==========================================================================
   Kostprijs en Afrekening zetten hun eigen letter op hun eigen vak. Sterkere selector, zelfde
   letters, zodat er nergens twee families naast elkaar staan.
   ========================================================================== */
html body #kostScherm,html body #kvenster,html body #afrScherm,html body #avenster{
  font-family:var(--font-sans);font-size:var(--nx-tekst);font-variant-numeric:tabular-nums}
html body #kostScherm .kkaart,html body #kvenster .kvin,html body #afrScherm .akaart,
html body #avenster .avin{border:1.5px solid var(--rand);border-radius:6px}
html body #kostScherm h3,html body #kvenster h3{font:700 var(--nx-tekst)/1.2 var(--font-sans);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
html body #kostScherm h4{font:700 var(--nx-tekst)/1.2 var(--font-sans);letter-spacing:.08em;
  text-transform:uppercase}
html body #kostScherm .kbtn,html body #kvenster .kbtn{border-radius:5px;font-weight:600;
  min-height:var(--raak);font-size:var(--nx-tekst);font-family:var(--font-sans);
  display:inline-flex;align-items:center;justify-content:center}
html body #kostScherm .kbtn:not(.sec):not(.mini),html body #kvenster .kbtn:not(.sec):not(.mini){
  box-shadow:3px 3px 0 var(--limoen)}
html body #kostScherm .kbtn.sec,html body #kvenster .kbtn.sec{border:1.5px solid var(--rand)}
html body #kostScherm .kbtn.mini,html body #kvenster .kbtn.mini{border:1.5px solid var(--rand);
  min-height:32px;font-size:var(--nx-tekst)}
html body #kostScherm input,html body #kostScherm select,html body #kvenster input,
html body #kvenster select{border:1.5px solid var(--rand);border-radius:5px;min-height:var(--raak);
  font-size:var(--nx-tekst)}
html body #kostScherm .kkies label,html body #kostScherm label,html body #kvenster label{
  font-size:var(--nx-tekst);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
html body #kostScherm .ktegel{border:1.5px solid var(--rand);border-radius:6px}
html body #kostScherm .ktegel .v{font-weight:700;font-variant-numeric:tabular-nums}
html body #kostScherm .kstand button,html body #kostScherm .ksnel button,
html body #kostScherm .kblokken button,html body #kostScherm .kmaten button{
  border-radius:5px;border-color:var(--rand);font:600 var(--nx-tekst)/1.2 var(--font-sans);letter-spacing:0;
  min-height:38px}
html body #kostScherm .kpil,html body #kvenster .kpil{border-radius:3px;
  font:600 var(--nx-tekst)/1.35 var(--font-mono);letter-spacing:0}
html body #kostScherm thead th,html body #kvenster thead th{letter-spacing:.04em;font-size:var(--nx-tekst);
  font-family:var(--font-mono)}
html body #kostScherm td.r,html body #kvenster td.r,html body #afrScherm td.r,
html body #avenster td.r{font-family:var(--font-mono);font-size:var(--nx-tekst)}

/* ---------- wie te veel beweging niet verdraagt ---------- */
@media(prefers-reduced-motion:reduce){
  .btn.primary:hover,.btn.primary:active{transform:none}
}

/* ---------- onder 1000 px blijft de kop een balk, maar ze mag afbreken ----------
   Op een telefoon liep de rij met acht afdelingen 306 px buiten het scherm, en dan schuift de hele
   bladzijde zijdelings mee. Een bladzijde hoort nooit zijdelings te schuiven. */
@media(max-width:999px){
  header .takkies{flex-wrap:wrap;max-width:100%}
  header .tabs{flex-wrap:wrap;max-width:100%}
  header{overflow-x:hidden}
  /* Een afdelingsknop is een knop, dus ze is raakbaar. Ze stond op 29 px zodra de rij afbrak. */
  header .takkies button,header .tabs button{min-height:38px}
}
@media(max-width:900px){
  header .takkies button,header .tabs button{min-height:44px;font-size:var(--nx-tekst)}
  /* Ook de knoppen in de kop van de chauffeur en de klant zijn knoppen voor een vinger. */
  header .btn{min-height:44px;font-size:var(--nx-tekst);padding:9px 14px}
  /* De weekstrook van de chauffeur zet zeven dagen naast elkaar op een scherm van 390 px. Zonder
     deze twee regels wordt die strook breder dan het scherm en schuift de hele bladzijde mee.
     Een bladzijde hoort nooit zijdelings te schuiven; een strook mag dat, op zichzelf. */
  .rij>.g{min-width:0;max-width:100%;overflow-x:auto}
  .rij>.g>.btn{min-width:0}
}
/* Het woord naast het teken op de knoppen rechtsboven. In de balk bovenaan is er geen plaats voor,
   daar blijft het teken alleen; in de rij links staat het woord erbij, want een teken alleen zegt
   niet wat het doet. */
.kopwoord{display:none}
@media(min-width:1000px){
  header:has(.takkies) .kopwoord{display:inline;margin-left:8px;font-size:var(--nx-tekst);font-weight:500}
  header:has(.takkies) .kopicoon{gap:0}
}

/* WRK (.305): de tabbladen van de open afdeling staan in de rij links **meteen onder die afdeling** en niet
   onderaan de lijst. De afdelingen en hun tabbladen worden daarvoor gewone items van de kop (display:contents),
   en `--o` (gezet in app.js) zegt de plaats: afdeling i krijgt 10+2i, haar tabbladen 11+2i. */
@media(min-width:1000px){
  header:has(.takkies){row-gap:2px}
  header:has(.takkies)>*{order:85}
  header:has(.takkies)>b{order:1}
  header:has(.takkies)>.merkwoord{order:2;margin-bottom:12px}
  header:has(.takkies)>.takkies{display:contents}
  header:has(.takkies)>.takkies>button{order:var(--o,20)}
  header:has(.takkies)>.tabs{order:var(--o,21);margin:2px 0 8px 10px}
  header:has(.takkies)>.sp{order:80}
  header:has(.takkies)>#live{order:90;margin-top:10px}
}

/* NKL (.313): de voorstellen voor nieuwe klanten en locaties op Vandaag */
.nklkaart{border:1.5px solid var(--grid);border-radius:6px;padding:10px 12px;margin-bottom:8px;min-width:0}
.nklvelden{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:6px 10px;margin-bottom:8px}
.nklvelden input{width:100%;box-sizing:border-box}

/* een tik in het menu laat het huidige scherm meteen gedimd zien tot het nieuwe getekend is (zie navBezig in app.js) */
body.nav-bezig #app > :not(header){opacity:.5;transition:opacity .15s ease .1s;cursor:progress}