/* ============================================================================
   BLACKOUT CONTROL — bc-shell.css
   De gedeelde schil van alle Control-apps: tokens, drie thema's, dichtheid, de
   tweelaags kopregel, de app-kiezer, de opdrachtbalk, het beheerpatroon en de
   basisonderdelen (knoppen, invoer, tabellen, chips, lades, meldingen).

   Dit bestand is in alle apps IDENTIEK. Wat per app verschilt zijn de schermen;
   die staan in het HTML-bestand van de app zelf. Verander je hier iets, dan
   hoort dit bestand in alle apps tegelijk vervangen te worden - het staat in
   SU_FILES, dus de updater neemt het mee.

   Verwacht: <html class="bc" data-theme="light|dark|studio" data-density="…">
   ========================================================================== */

/* ============================================================================
   Blackout Control — design tokens  (gedeelde laag, gelijk in alle zes apps)
   Twee ontworpen thema's, geen filter, plus een dichtheidsschakelaar.
   <html class="bc" data-theme="light|dark" data-density="dense|comfortable">
   Geen kleur, radius of schaduw elders in dit bestand hardgecodeerd.
   ========================================================================== */
.bc{
  --bc-canvas:#e7e7ea; --bc-bg:#f5f5f8; --bc-surface:#ffffff; --bc-raised:#ffffff;
  --bc-overlay:rgba(255,255,255,.92);
  --bc-sep:rgba(29,31,32,.10); --bc-sep2:rgba(29,31,32,.20);
  --bc-txt:#1d1f20; --bc-txt2:#575766; --bc-txt3:#6e6e81; --bc-paper:#ffffff;
  --bc-accent:#416180; --bc-accent-soft:#dbe9f6; --bc-accent-ink:#2c455d;
  --bc-done:#627d98; --bc-done-soft:#e4ecf4; --bc-done-ink:#314457;
  --bc-alert:#8f3b2e; --bc-alert-soft:#f4ded9; --bc-alert-ink:#6b2b20;
  --bc-wave:rgba(29,31,32,.34); --bc-wave2:rgba(29,31,32,.48);
  --bc-sh1:0 1px 2px rgba(29,31,32,.10);
  --bc-sh2:0 3px 10px rgba(29,31,32,.14);
  --bc-sh3:0 16px 44px rgba(29,31,32,.20);
  --bc-r-pill:999px; --bc-r-sm:7px; --bc-r-md:12px; --bc-r-lg:16px; --bc-r-xl:22px;
  --bc-font:'Figtree',system-ui,-apple-system,sans-serif;
  --bc-ease:cubic-bezier(.32,.72,0,1);
  --bc-t-state:120ms; --bc-t-disclose:180ms; --bc-t-sheet:240ms;
  /* Dichtheid. Alles wat meebeweegt als je van dicht naar ruim gaat staat
     hier; verderop in dit bestand komt geen losse maat meer voor die met
     dichtheid te maken heeft. Zonder dit deed de instelling maar één ding -
     de hoogte van een tabelrij - en dat is geen keuze, dat is ruis. */
  --bc-row:34px; --bc-pad:8px; --bc-fs:13px; --bc-fs2:11px;
  --bc-knop-pad:6px 14px; --bc-knop-fs:12.5px; --bc-knop-icoon:26px;
  --bc-veld-pad:7px 13px; --bc-veld-h:32px; --bc-veld-fs:13.5px;
  --bc-chip-pad:3px 8px; --bc-chip-fs:10.5px;
  --bc-paneel-pad:20px; --bc-etiket-mt:14px; --bc-gap:9px;
}
@media (prefers-color-scheme:dark){
  .bc:not([data-theme="light"]){
    --bc-canvas:#0b0d0f; --bc-bg:#14171a; --bc-surface:#1a1e22; --bc-raised:#202529;
    --bc-overlay:rgba(32,37,41,.86);
    --bc-sep:rgba(190,210,228,.11); --bc-sep2:rgba(190,210,228,.22);
    --bc-txt:#e8eaec; --bc-txt2:#96a3b0; --bc-txt3:#798a9a; --bc-paper:#14171a;
    --bc-accent:#94bce3; --bc-accent-soft:rgba(190,214,236,.13); --bc-accent-ink:#dbecfb;
    --bc-done:#9ebbd8; --bc-done-soft:rgba(190,214,236,.11); --bc-done-ink:#d6ebff;
    --bc-alert:#d98470; --bc-alert-soft:rgba(217,132,112,.15); --bc-alert-ink:#f7d9d1;
    --bc-wave:rgba(232,234,236,.34); --bc-wave2:rgba(232,234,236,.40);
    --bc-sh1:0 0 0 1px rgba(0,0,0,.50);
    --bc-sh2:0 4px 14px rgba(0,0,0,.45);
    --bc-sh3:0 20px 50px rgba(0,0,0,.60);
  }
}
.bc[data-theme="dark"]{
  --bc-canvas:#0b0d0f; --bc-bg:#14171a; --bc-surface:#1a1e22; --bc-raised:#202529;
  --bc-overlay:rgba(32,37,41,.86);
  --bc-sep:rgba(190,210,228,.11); --bc-sep2:rgba(190,210,228,.22);
  --bc-txt:#e8eaec; --bc-txt2:#96a3b0; --bc-txt3:#798a9a; --bc-paper:#14171a;
  --bc-accent:#94bce3; --bc-accent-soft:rgba(190,214,236,.13); --bc-accent-ink:#dbecfb;
  --bc-done:#9ebbd8; --bc-done-soft:rgba(190,214,236,.11); --bc-done-ink:#d6ebff;
  --bc-alert:#d98470; --bc-alert-soft:rgba(217,132,112,.15); --bc-alert-ink:#f7d9d1;
  --bc-wave:rgba(232,234,236,.34); --bc-wave2:rgba(232,234,236,.40);
  --bc-sh1:0 0 0 1px rgba(0,0,0,.50);
  --bc-sh2:0 4px 14px rgba(0,0,0,.45);
  --bc-sh3:0 20px 50px rgba(0,0,0,.60);
}
/* Studio - het derde thema. Voor het scherm dat de hele dag naast een DAW
   staat: neutraal grafiet in plaats van het blauwzwart van donker, oranje in
   plaats van staal, en projectkleuren als het volle blok - een region in een
   track. Dezelfde onderdelen, dezelfde tokennamen, andere waarden. Dat is
   precies waar die tokens voor waren. Het is een voorkeur, geen modus: er
   gedraagt zich niets anders in Studio. */
.bc[data-theme="studio"]{
  --bc-canvas:#171717; --bc-bg:#232323; --bc-surface:#2e2e2e; --bc-raised:#383838;
  --bc-overlay:rgba(46,46,46,.90);
  --bc-sep:rgba(255,255,255,.09); --bc-sep2:rgba(255,255,255,.21);
  --bc-txt:#ededed; --bc-txt2:#a8a8a8; --bc-txt3:#999999;
  --bc-paper:#171717;                       /* tekst OP een volle accentvulling: oranje is fel */
  --bc-accent:#ff8c22; --bc-accent-soft:rgba(255,255,255,.07); --bc-accent-ink:#ffc691;
  --bc-done:#6fbf5f; --bc-done-soft:rgba(255,255,255,.06); --bc-done-ink:#b9e3ae;
  --bc-alert:#e5533d; --bc-alert-soft:rgba(255,255,255,.06); --bc-alert-ink:#ffb9ab;
  --bc-wave:rgba(237,237,237,.34); --bc-wave2:rgba(237,237,237,.40);
  --bc-sh1:0 0 0 1px rgba(0,0,0,.55);
  --bc-sh2:0 4px 14px rgba(0,0,0,.5);
  --bc-sh3:0 20px 50px rgba(0,0,0,.65);
}
/* Over de *-soft velden op donkere gronden: een gekleurde waas over een
   donkere grond wordt modderig - oranje over grafiet leest bruin, rood over
   bijna-zwart leest bruin, en de regel ziet er dan beschadigd uit in plaats
   van geselecteerd. Op béíde donkere thema's is elke *-soft daarom een bijna
   neutrale oplichting, en zit de kleur alleen nog in de tekst, de 2px
   markering en het vakje. Selectie leest zo als "opgetild en gemarkeerd", nooit
   als "bevlekt". Licht houdt echte tinten, want een lichte tint op wit wordt
   niet modderig. */
.bc[data-density="comfortable"]{
  --bc-row:46px; --bc-pad:12px; --bc-fs:14px; --bc-fs2:12px;
  --bc-knop-pad:9px 18px; --bc-knop-fs:13.5px; --bc-knop-icoon:31px;
  --bc-veld-pad:10px 16px; --bc-veld-h:40px; --bc-veld-fs:14.5px;
  --bc-chip-pad:5px 11px; --bc-chip-fs:11.5px;
  --bc-paneel-pad:26px; --bc-etiket-mt:18px; --bc-gap:12px;
}

/* accent-doorschijnendheden: eerder hardgecodeerde #f2a33cXX-waarden */
.bc{
  --acc-05:color-mix(in srgb,var(--bc-accent) 5%,transparent);
  --acc-08:color-mix(in srgb,var(--bc-accent) 8%,transparent);
  --acc-12:color-mix(in srgb,var(--bc-accent) 12%,transparent);
  --acc-20:color-mix(in srgb,var(--bc-accent) 20%,transparent);
  --acc-34:color-mix(in srgb,var(--bc-accent) 34%,transparent);
  --acc-53:color-mix(in srgb,var(--bc-accent) 53%,transparent);
}

/* oude namen blijven bestaan, maar wijzen nu naar de tokens: alles wat nog
   niet met de hand is herzien, erft daardoor meteen het nieuwe thema */
:root{
  --bg:var(--bc-bg); --panel:var(--bc-surface); --panel2:var(--bc-bg); --line:var(--bc-sep);
  --text:var(--bc-txt); --muted:var(--bc-txt2); --accent:var(--bc-accent); --accent-ink:var(--bc-paper);
  --ok:var(--bc-done); --warn:var(--bc-alert);
  --mono:var(--bc-font); --sans:var(--bc-font);
}

*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--bc-bg);color:var(--bc-txt);font:15px/1.55 var(--bc-font);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:0}
h1{font-size:20px} h2{font-size:15px;margin-bottom:12px}
a{color:var(--bc-accent);text-underline-offset:3px}
a:hover{color:var(--bc-accent-ink)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--bc-accent);outline-offset:2px}
::selection{background:var(--bc-accent-soft)}
.mono,.num,td.num,[data-num],.tabular{font-variant-numeric:tabular-nums}
.muted{color:var(--bc-txt2)}
.hidden{display:none!important}
/* een element met hidden hoort weg te zijn, ook als zijn klasse display zet */
[hidden]{display:none!important}

/* ── knoppen ─────────────────────────────────────────────────────────────
   Pil voor alles. Primair = accentvulling met papier erop; let op: in het
   donkere thema is het accent een lichte tint, dus is 'papier' daar donker.  */
button{font:inherit;cursor:pointer;border:0;border-radius:var(--bc-r-pill);
  padding:var(--bc-knop-pad);font-size:var(--bc-knop-fs);font-weight:600;
  background:var(--bc-raised);color:var(--bc-txt);box-shadow:var(--bc-sh1);
  transition:background var(--bc-t-state) var(--bc-ease),box-shadow var(--bc-t-state) var(--bc-ease)}
button:hover{background:color-mix(in srgb,var(--bc-txt) 5%,var(--bc-raised))}
button.primary{background:var(--bc-accent);color:var(--bc-paper);box-shadow:none}
button.primary:hover{background:color-mix(in srgb,var(--bc-txt) 14%,var(--bc-accent))}
button.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--bc-sep)}
button.ghost:hover{background:var(--bc-bg)}
button.quiet{background:transparent;box-shadow:none;color:var(--bc-accent);
  padding:var(--bc-knop-pad);padding-left:8px;padding-right:8px}
button.quiet:hover{background:var(--bc-bg)}
button.gevaar{background:var(--bc-alert-soft);color:var(--bc-alert-ink);box-shadow:none}
button.gevaar:hover{background:color-mix(in srgb,var(--bc-alert) 22%,var(--bc-alert-soft))}
/* Uitgeschakeld was opacity:.45 over de héle knop - tekst én vlak - en dat zette
   een uitgeschakelde primaire knop op ongeveer 1,4:1: onleesbaar, precies in de
   staat waarin een verzendknop staat terwijl er iets draait. Nu een eigen
   uiterlijk met tokens, zodat het gemeten kan worden. */
button:disabled{opacity:1;cursor:default;background:var(--bc-bg);color:var(--bc-txt3);
  box-shadow:inset 0 0 0 1px var(--bc-sep)}
button.icoon{width:var(--bc-knop-icoon);height:var(--bc-knop-icoon);padding:0;border-radius:var(--bc-r-sm);
  display:inline-flex;align-items:center;justify-content:center;font-size:12px}

/* ── invoer ─────────────────────────────────────────────────────────────── */
input,select,textarea{font:inherit;font-size:var(--bc-veld-fs);color:var(--bc-txt);background:var(--bc-bg);
  border:0;box-shadow:inset 0 0 0 1px var(--bc-sep);border-radius:var(--bc-r-pill);
  padding:var(--bc-veld-pad);min-height:var(--bc-veld-h);width:100%;caret-color:var(--bc-accent)}
textarea{resize:vertical;border-radius:var(--bc-r-md);padding:var(--bc-veld-pad)}
select{appearance:none;padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
input:focus,select:focus,textarea:focus{box-shadow:inset 0 0 0 1px var(--bc-accent);outline:none}
input:disabled,select:disabled,textarea:disabled{opacity:1;cursor:not-allowed;
  color:var(--bc-txt3);background:var(--bc-canvas)}
input[type=checkbox],input[type=radio]{width:15px;height:15px;min-height:0;padding:0;flex:0 0 auto;
  background:none;box-shadow:none;border-radius:0;accent-color:var(--bc-accent)}
input[type=checkbox]:focus,input[type=radio]:focus{box-shadow:none;outline:2px solid var(--bc-accent);outline-offset:2px}
label{display:block;font-size:11.5px;color:var(--bc-txt2);margin:var(--bc-etiket-mt) 0 5px}
.veldrij{display:flex;gap:var(--bc-gap);align-items:center}

/* ── segment (week/maand/lijst, dichtheid, thema) ───────────────────────── */
.seg{display:inline-flex;background:var(--bc-surface);border-radius:var(--bc-r-pill);
  padding:3px;box-shadow:inset 0 0 0 1px var(--bc-sep);flex:0 0 auto}
.seg button{background:transparent;box-shadow:none;color:var(--bc-txt2);font-weight:400;
  padding:4px 12px;font-size:11.5px;border-radius:var(--bc-r-pill)}
.seg button:hover{background:transparent;color:var(--bc-txt)}
.seg button.on{background:var(--bc-raised);color:var(--bc-txt);font-weight:600;box-shadow:var(--bc-sh1)}

/* ── kopregel: twee lagen ────────────────────────────────────────────────
   Laag één is suitebreed en verandert nooit; laag twee hoort bij deze app.
   Niets wordt ooit afgekort - een lang Nederlands woord krijgt de ruimte.   */
header{position:sticky;top:0;z-index:15}
.tier1{display:flex;align-items:center;gap:12px;padding:9px 14px;
  background:var(--bc-overlay);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 -1px 0 var(--bc-sep);position:relative;z-index:2}
.tier2{display:flex;align-items:stretch;gap:2px;padding:0 8px;position:relative;z-index:1;
  background:var(--bc-overlay);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 -1px 0 var(--bc-sep)}

.merk{display:flex;align-items:center;gap:8px;padding:3px 9px 3px 4px;border-radius:var(--bc-r-pill);
  cursor:pointer;background:transparent;box-shadow:none;font-weight:400;flex:0 0 auto}
.merk:hover{background:var(--bc-bg)}
.merk.open{background:var(--bc-bg)}
/* Het logo komt doorzichtig van de server: zwart is weggelaten, zodat het merk
   op de donkere thema's vrij op de ondergrond staat. Op licht zou een wit merk
   juist verdwijnen, dus daar krijgt het weer een donker tegeltje - precies
   zoals het er vroeger uitzag. Dezelfde opbouw als de tokens hierboven. */
.merk .logo{height:24px;width:auto;max-width:96px;border-radius:var(--bc-r-sm);display:block;flex:0 0 auto;
  background:var(--bc-txt)}
@media(prefers-color-scheme:dark){ .bc:not([data-theme="light"]) .merk .logo{background:transparent} }
.bc[data-theme="dark"] .merk .logo,
.bc[data-theme="studio"] .merk .logo{background:transparent}
/* Event bouwt zijn eigen kopregel in React; die vraagt hetzelfde met een klasse. */
.logomerk{background:var(--bc-txt)}
@media(prefers-color-scheme:dark){ .bc:not([data-theme="light"]) .logomerk{background:transparent} }
.bc[data-theme="dark"] .logomerk,
.bc[data-theme="studio"] .logomerk{background:transparent}
.merk .valmerk{width:24px;height:24px;border-radius:8px;background:var(--bc-txt);display:none;
  place-items:center;flex:0 0 auto}
.merk .valmerk i{width:9px;height:9px;border-radius:50%;background:var(--bc-accent);display:block}
/* Kapitalen hebben lucht nodig: de negatieve tracking die bij 'Blackout' in
   onderkast hoorde plakt in kapitaal aan elkaar. Vandaar positieve spatiering
   en een iets kleinere maat - kapitalen ogen groter bij dezelfde puntgrootte. */
.merk .woord{font-size:13.5px;font-weight:600;letter-spacing:.085em;text-transform:uppercase;
  color:var(--bc-txt);white-space:nowrap}
.merk .modus{font-size:12px;color:var(--bc-txt2);white-space:nowrap}
.merk .caret{font-size:9px;color:var(--bc-txt3)}
.merk .bel{background:var(--bc-accent);color:var(--bc-paper);font-size:10px;font-weight:700;
  min-width:16px;height:16px;border-radius:var(--bc-r-pill);display:grid;place-items:center;padding:0 4px}
.tier1 .streep{width:1px;height:20px;background:var(--bc-sep);flex:0 0 auto}
.versie{font-size:11px;color:var(--bc-txt3);font-variant-numeric:tabular-nums;white-space:nowrap;
  display:flex;align-items:center;gap:5px;background:transparent;box-shadow:none;padding:2px 6px;font-weight:400}
.versie:hover{background:var(--bc-bg)}
.versie i{width:6px;height:6px;border-radius:50%;background:var(--bc-done);display:block;flex:0 0 auto}
.versie.nieuw{color:var(--bc-accent)} .versie.nieuw i{background:var(--bc-accent)}
.rek{flex:1}

.zoekknop{display:flex;align-items:center;gap:7px;background:var(--bc-surface);
  border-radius:var(--bc-r-pill);padding:5px 10px;box-shadow:inset 0 0 0 1px var(--bc-sep);
  min-width:210px;font-weight:400;color:var(--bc-txt3);font-size:12px}
.zoekknop:hover{background:var(--bc-surface);box-shadow:inset 0 0 0 1px var(--bc-sep2)}
.zoekknop .tekst{flex:1;text-align:left}
.zoekknop kbd{font:inherit;font-size:10px;font-weight:700;color:var(--bc-txt3);
  background:var(--bc-bg);border-radius:5px;padding:2px 5px}

.ikben{display:flex;align-items:center;gap:8px;padding:3px 10px 3px 3px;border-radius:var(--bc-r-pill);
  background:var(--bc-surface);box-shadow:inset 0 0 0 1px var(--bc-sep);font-weight:400;flex:0 0 auto}
.ikben .rond{width:24px;height:24px;border-radius:50%;background:var(--bc-done-soft);color:var(--bc-done-ink);
  display:grid;place-items:center;font-size:10px;font-weight:700;flex:0 0 auto}
.ikben .wie{min-width:0;max-width:150px;text-align:left;display:block;line-height:1.25}
.ikben .wie .e,.ikben .wie .r{display:block}
.ikben .wie .e{font-size:11.5px;color:var(--bc-txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ikben .wie .r{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--bc-txt3)}

nav{display:flex;align-items:stretch;gap:2px;overflow-x:auto;scrollbar-width:none;max-width:100%}
nav::-webkit-scrollbar{display:none}
nav button,.tier2 .meerknop{padding:9px 11px 8px;font-size:12.5px;font-weight:400;white-space:nowrap;
  color:var(--bc-txt2);background:transparent;box-shadow:none;border-radius:0;flex:0 0 auto}
nav button:hover,.tier2 .meerknop:hover{background:transparent;color:var(--bc-txt)}
nav button.on,.tier2 .meerknop.on{font-weight:600;color:var(--bc-txt);box-shadow:inset 0 -2px 0 var(--bc-accent)}
/* tabbladen binnen een paneel (Beheer) zijn pillen, niet de kopregel */
.bar button.tab{background:var(--bc-bg);box-shadow:inset 0 0 0 1px var(--bc-sep);border-radius:var(--bc-r-pill);padding:6px 13px;color:var(--bc-txt2)}
.bar button.tab:hover{color:var(--bc-txt)}
.bar button.tab.on{background:var(--bc-accent);color:var(--bc-paper);box-shadow:none}
.tier2 .meerknop .stip{width:5px;height:5px;border-radius:50%;background:var(--bc-accent);display:inline-block;margin-left:5px;vertical-align:1px}
.tier2 .meerknop .stip.laat{background:var(--bc-alert)}

/* zwevende lagen: popover, lade, blad */
.pop{position:absolute;z-index:40;padding:6px;border-radius:var(--bc-r-lg);
  background:color-mix(in srgb,var(--bc-surface) 97%,transparent);
  backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:var(--bc-sh3),inset 0 0 0 1px var(--bc-sep2)}
.pop .rij{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;
  border-radius:9px;font-size:12px;color:var(--bc-txt);cursor:pointer;background:transparent;
  width:100%;box-shadow:none;font-weight:400;text-align:left}
.pop .rij:hover{background:var(--bc-bg)}
.pop .rij .hint{font-size:10px;color:var(--bc-txt3)}

/* ── de app-kiezer: zes vakjes in een popover ───────────────────────────── */
.kiezer{position:relative;flex:0 0 auto}
.kiezer .lade{position:absolute;left:0;top:calc(100% + 8px);z-index:40;width:340px;padding:10px;
  border-radius:18px;background:color-mix(in srgb,var(--bc-surface) 97%,transparent);
  backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:var(--bc-sh3),inset 0 0 0 1px var(--bc-sep2)}
.kiezer .raster{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.kiezer .lade a{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--bc-r-md);
  text-decoration:none;color:var(--bc-txt);background:transparent}
.kiezer .lade a:hover{background:var(--bc-bg)}
.kiezer .lade a.hier{background:var(--bc-accent-soft)}
.kiezer .lade a.stuk{background:var(--bc-alert-soft)}
.kiezer .lade a.uit{opacity:.66}
.kiezer .lade a .vlak{width:22px;height:22px;border-radius:var(--bc-r-sm);flex:0 0 auto}
.kiezer .lade a .mid{min-width:0;flex:1;display:block;line-height:1.3}
.kiezer .lade a .nm,.kiezer .lade a .st{display:block}
.kiezer .lade a .nm{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kiezer .lade a .st{font-size:10px;color:var(--bc-txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kiezer .lade a .tel{font-size:10.5px;font-weight:700;border-radius:var(--bc-r-pill);padding:1px 6px;
  min-width:18px;text-align:center;background:var(--bc-accent);color:var(--bc-paper);flex:0 0 auto}
.kiezer .lade a .tel.rust{background:var(--bc-bg);color:var(--bc-txt3);box-shadow:inset 0 0 0 1px var(--bc-sep)}
.kiezer .lade a .tel.leeg{background:transparent;color:var(--bc-txt3);font-weight:400}
.kiezer .lade .voet{font-size:10.5px;color:var(--bc-txt3);padding:8px 6px 2px;line-height:1.5}
@media(max-width:760px){.kiezer .lade{left:0;right:auto;width:min(340px,calc(100vw - 20px))}}

/* ── opdrachtbalk (⌘K) ──────────────────────────────────────────────────── */
#pal-scherm{position:fixed;inset:0;z-index:80;background:color-mix(in srgb,var(--bc-canvas) 62%,transparent);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;justify-content:center;
  align-items:flex-start;padding:12vh 16px 16px}
#pal{width:min(620px,100%);border-radius:var(--bc-r-lg);overflow:hidden;
  background:color-mix(in srgb,var(--bc-surface) 97%,transparent);
  backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:var(--bc-sh3),inset 0 0 0 1px var(--bc-sep2);
  animation:palop var(--bc-t-disclose) var(--bc-ease)}
@keyframes palop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
#pal .invoer{display:flex;align-items:center;gap:10px;padding:12px 16px;box-shadow:inset 0 -1px 0 var(--bc-sep)}
#pal .invoer span{color:var(--bc-txt3);font-size:15px}
#pal input{background:transparent;box-shadow:none;padding:0;min-height:0;font-size:16px;border-radius:0}
#pal input:focus{box-shadow:none}
#pal .lijst{max-height:min(52vh,420px);overflow:auto;padding:6px}
#pal .kop{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--bc-txt3);padding:9px 10px 5px}
#pal .rij{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;
  font-size:13px;color:var(--bc-txt)}
#pal .rij.aan{background:var(--bc-accent-soft);color:var(--bc-accent-ink)}
#pal .rij .stip{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--bc-sep2)}
#pal .rij .tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pal .rij .sub{font-size:11px;color:var(--bc-txt3);flex:0 0 auto;margin:0}
#pal .rij.aan .sub{color:var(--bc-accent-ink);opacity:.75}
#pal .voet{display:flex;gap:14px;padding:8px 16px;font-size:10.5px;color:var(--bc-txt3);
  box-shadow:inset 0 1px 0 var(--bc-sep)}
#pal .leeg{padding:22px 16px;font-size:13px;color:var(--bc-txt3);text-align:center}

/* ── romp ───────────────────────────────────────────────────────────────── */
main{max-width:1180px;margin:22px auto;padding:0 22px 24px}
/* In de agenda is die 150px onderaan verspilde hoogte: er hangt geen speler
   onder en de hele dag moet juist in beeld passen. */
body.kal main{max-width:none;margin:14px auto;padding:0 14px 14px}
.panel{background:var(--bc-surface);border-radius:var(--bc-r-lg);padding:var(--bc-paneel-pad);box-shadow:var(--bc-sh1)}
.sub{color:var(--bc-txt2);font-size:13px;margin-bottom:18px}
.kaps{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--bc-txt3)}

/* schuiven voor de grondvlakken */
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;box-shadow:none;
  padding:0;min-height:0;height:20px;width:100%;cursor:pointer}
input[type=range]:focus{box-shadow:none}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:var(--bc-sep2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--bc-raised);box-shadow:var(--bc-sh1),inset 0 0 0 1px var(--bc-sep2);margin-top:-6px}
input[type=range]::-webkit-slider-thumb:hover{box-shadow:var(--bc-sh1),inset 0 0 0 2px var(--bc-accent)}
input[type=range]::-moz-range-track{height:4px;border-radius:99px;background:var(--bc-sep2)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;
  background:var(--bc-raised);box-shadow:var(--bc-sh1),inset 0 0 0 1px var(--bc-sep2)}
.vlakblok{margin-top:22px;padding-top:18px;box-shadow:inset 0 1px 0 var(--bc-sep)}
.vlakrij{display:grid;grid-template-columns:190px minmax(140px,340px) 62px;gap:12px;align-items:center;margin-bottom:8px}
.vlakrij label{margin:0;font-size:12.5px;color:var(--bc-txt)}
.vlakw{font-size:12px;color:var(--bc-txt2);font-variant-numeric:tabular-nums;text-align:right}
@media(max-width:640px){.vlakrij{grid-template-columns:1fr 52px;}.vlakrij label{grid-column:1/-1}}
.vlakproef{margin-top:14px}
.vlakproef .pv-canvas{background:var(--bc-canvas);border-radius:var(--bc-r-lg);padding:22px 12px 12px;position:relative}
.vlakproef .pv-bg{background:var(--bc-bg);border-radius:var(--bc-r-md);padding:22px 12px 12px;position:relative}
.vlakproef .pv-surface{background:var(--bc-surface);border-radius:var(--bc-r-md);padding:22px 12px 12px;position:relative;box-shadow:var(--bc-sh1)}
.vlakproef .pv-raised{background:var(--bc-raised);border-radius:9px;padding:22px 12px 10px;position:relative;box-shadow:var(--bc-sh1)}
/* De etiketten van het voorbeeldblokje liggen op --bc-canvas en --bc-raised, en
   die twee vallen buiten de meting hieronder (die kijkt naar bg en surface).
   Daarom hier --bc-txt2: dat haalt het op alle vier de vlakken. */
.vlakproef .pv-l{position:absolute;left:12px;top:6px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bc-txt2)}

/* Beheer: een kolom met secties links, één sectie tegelijk rechts */
.admwrap{display:flex;gap:0;align-items:stretch;background:var(--bc-surface);
  border-radius:var(--bc-r-lg);overflow:hidden;box-shadow:var(--bc-sh1);min-height:60vh}
#adm-nav{flex:0 0 236px;padding:12px;background:var(--bc-surface);box-shadow:inset -1px 0 0 var(--bc-sep)}
#adm-nav-lijst{display:flex;flex-direction:column;gap:1px}
#adm-nav button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:6px 9px;
  border-radius:9px;background:transparent;box-shadow:none;font-size:12.5px;font-weight:400;color:var(--bc-txt2)}
#adm-nav button:hover{background:var(--bc-bg);color:var(--bc-txt)}
#adm-nav button.on{background:var(--bc-accent-soft);color:var(--bc-accent-ink);font-weight:600}
#adm-nav button .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#adm-nav button .stip{width:6px;height:6px;border-radius:50%;background:var(--bc-accent);flex:0 0 auto}
#adm-body{flex:1;min-width:0;padding:14px;background:var(--bc-bg);overflow:auto}
#adm-body .adm-s{background:var(--bc-surface);border-radius:var(--bc-r-lg);padding:16px 18px;box-shadow:var(--bc-sh1)}
#adm-body .adm-s > h2:first-child{font-size:15px;margin-bottom:12px}
/* Een kopje midden in een beheersectie hoort lucht boven zich te hebben. De
   schil knipt panelen op bij elk kopje, dus meestal is er maar één per sectie -
   maar Promo en Label bouwen hun panelen met JavaScript en zetten er meerdere
   in één blok. Die stonden strak tegen de knop erboven geplakt: een streep en
   een kopje zonder enige ruimte, midden in de vorige alinea. Dit is dezelfde
   kopstijl die de lades al gebruikten, nu gedeeld in plaats van dubbel. */
h2.sec{font-family:var(--bc-font);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bc-txt2);margin:26px 0 10px;
  border-bottom:1px solid var(--bc-sep);padding-bottom:6px}
h2.sec:first-child{margin-top:0}
#adm-body .adm-s h1{font-size:15px;margin-bottom:12px}
/* Apps die hun beheerpanelen met JavaScript opbouwen zetten hun inhoud in een
   eigen omhulsel. Dat hoeft geen tweede kaart te zijn - de sectie is de kaart. */
#adm-body .adm-s .admvak,
#adm-body .adm-s .panel{background:none;box-shadow:none;border-radius:0;padding:0;margin-bottom:0}
#adm-body .adm-s h1 + h2.sec{margin-top:18px}
/* Een knop of veld dat vlak voor een volgend kopje staat mag niet tegen de
   streep aan liggen. */
#adm-body .adm-s > button + h2.sec,
#adm-body .adm-s > .grid2 + h2.sec,
#adm-body .adm-s > div + h2.sec{margin-top:26px}
@media(max-width:900px){
  /* v-mobiel: de pillenrij mag niet meegroeien. Met min-height op de wrap
     kreeg de NAV de restruimte (flex:1) en hing er een groot leeg gat tussen
     de pillen en de sectie eronder. De restruimte hoort bij de inhoud. */
  .admwrap{flex-direction:column;min-height:0}
  #adm-nav{flex:0 0 auto;box-shadow:inset 0 -1px 0 var(--bc-sep)}
  #adm-nav-lijst{flex-direction:row;overflow-x:auto;gap:4px;scrollbar-width:none}
  #adm-nav-lijst::-webkit-scrollbar{display:none}
  #adm-nav button{width:auto;white-space:nowrap;border-radius:var(--bc-r-pill);
    background:var(--bc-bg);box-shadow:inset 0 0 0 1px var(--bc-sep)}
  #adm-nav > .kaps, #adm-nav > p, #adm-nav > div[style*="height:1px"]{display:none}
  /* ── kopbalk op een smal scherm ────────────────────────────────────────
     De bovenste balk staat op één rij die niet mag afbreken. Op een smal
     scherm past die rij niet meer: het zoekveld en de naam duwen de rest
     voorbij de rand. Plan deed dit al bij 900px en de rest pas bij 640px,
     met per app net andere keuzes - dus tussen tablet en telefoon zag elke
     app er anders uit. Nu staat het hier, één keer, in twee stappen: eerst
     inkrimpen, dan weglaten. */
  .tier1 > .streep{display:none}
  /* De versieknop ging hier eerst óók weg, en dat kostte op elk scherm smaller
     dan 900px de weg naar de updater: hij is de enige zichtbare ingang naar
     Beheer > Updates, en wie dat niet weet kan de app dan niet meer bijwerken.
     Nu valt alleen het nummer weg en blijft het bolletje staan - dat kleurt
     toch al mee zodra er een nieuwe versie klaarstaat - met een raakvlak dat
     groot genoeg is om aan te tikken. */
  .tier1 .versie{gap:0;padding:0;min-width:30px;min-height:30px;justify-content:center}
  .tier1 .versie span{display:none}
  /* Het bolletje is hier het enige signaal dat er een update klaarstaat, en de
     kleur alleen is daar te zwak voor: in het donkere thema schelen 'bij' en
     'nieuw' maar vijftien stappen in RGB, en op zes pixels zie je dat niet.
     Daarom wordt het ook groter zodra er iets klaarstaat - dat werkt in elk
     thema, want het is geen kleur. */
  .tier1 .versie.nieuw i{width:9px;height:9px}
  .zoekknop{min-width:0;padding:6px 9px}
  .zoekknop .tekst,.zoekknop kbd{display:none}
  /* Hier bleef op een telefoon alleen een rondje van 30 pixels over: geen naam,
     geen rand, geen enkele aanwijzing dat eronder een menu zit. Dat is te klein
     om te raken en te stil om te vinden - en het is de énige plek waar je kunt
     uitloggen of van thema wisselen. Nu een raakvlak van 44 pixels met een klein
     pijltje ernaast, zodat het leest als iets dat opengaat. */
  .ikben{padding:3px 5px 3px 3px;background:transparent;box-shadow:none;
    min-width:44px;min-height:44px;justify-content:center;gap:3px}
  .ikben .wie{display:none}
  .ikben::after{content:"\2304";font-size:12px;line-height:1;color:var(--bc-txt3);margin-top:-4px}
}
@media(max-width:640px){
  .tier1{gap:8px;padding:8px 10px}
  .merk .woord{display:none}
  .merk{padding-right:6px}
  /* Op een telefoon is het opdrachtenpalet niet te bereiken - er is geen
     Cmd+K - en het knopje duwde de rest van de balk voorbij de rand. Weg
     ermee; alles wat erin zit staat ook gewoon in de tabbladen. */
  .zoekknop{display:none}
}

.gate{min-height:100dvh;display:grid;place-items:center;padding:22px;background:var(--bc-canvas)}
.gate .panel{width:min(430px,100%);box-shadow:var(--bc-sh3);border-radius:var(--bc-r-xl);padding:26px}
.gate .brand{margin-bottom:6px;font-size:18px;font-weight:600;letter-spacing:-.015em;display:flex;align-items:center;gap:9px}
.steps{display:flex;gap:8px;margin:10px 0 6px;font-size:11px;color:var(--bc-txt3);
  letter-spacing:.06em;text-transform:uppercase}
.steps .on{color:var(--bc-accent);font-weight:600}
.err{background:var(--bc-alert-soft);color:var(--bc-alert-ink);border-radius:var(--bc-r-md);
  padding:11px 14px;font-size:13px;margin-top:14px}
.okmsg{background:var(--bc-done-soft);color:var(--bc-done-ink);border-radius:var(--bc-r-md);
  padding:11px 14px;font-size:13px;margin-top:14px}

/* ── tabellen ───────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:var(--bc-fs)}
th{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--bc-txt3);text-align:left;
  font-weight:400;padding:calc(var(--bc-pad) * .62) 14px;box-shadow:inset 0 -1px 0 var(--bc-sep);position:sticky;top:0;
  background:var(--bc-surface);z-index:2}
/* min-height doet niets op een tabelcel - height werkt daar als ondergrens */
td{padding:var(--bc-pad) 14px;box-shadow:inset 0 -1px 0 var(--bc-sep);vertical-align:middle;
  height:var(--bc-row)}
tbody tr:hover td{background:var(--bc-bg)}
td.mono{white-space:nowrap}
.right{text-align:right}
.tag{font-size:var(--bc-fs2);color:var(--bc-txt3)}
.chip{font-size:var(--bc-chip-fs);font-weight:600;color:var(--bc-accent-ink);background:var(--bc-accent-soft);
  border-radius:var(--bc-r-pill);padding:var(--bc-chip-pad);white-space:nowrap;display:inline-block}
.chip.rust{background:var(--bc-bg);color:var(--bc-txt2);box-shadow:inset 0 0 0 1px var(--bc-sep)}
.chip.af{background:var(--bc-done-soft);color:var(--bc-done-ink)}
.chip.laat{background:var(--bc-alert-soft);color:var(--bc-alert-ink)}
.bar{display:flex;gap:var(--bc-gap);align-items:center;margin-bottom:16px;flex-wrap:wrap}
.bar h2{margin-bottom:0}
.bar input[type=search]{flex:1 1 140px;min-width:110px;max-width:none}
.bar select{width:auto}

/* ── statusbanen ────────────────────────────────────────────────────────── */
.strook{display:flex;align-items:center;gap:var(--bc-gap);background:var(--bc-accent-soft);color:var(--bc-accent-ink);
  border-radius:var(--bc-r-md);padding:var(--bc-pad) 13px;margin-bottom:14px;font-size:12.5px}
.strook.laat{background:var(--bc-alert-soft);color:var(--bc-alert-ink)}
.strook .stip{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.strook b{font-weight:700}
.strook .rek{flex:1}
.strook button{background:transparent;box-shadow:none;color:inherit;padding:4px 8px;font-size:12px}
.strook button:hover{background:color-mix(in srgb,currentColor 12%,transparent)}

.leegvak{display:grid;place-items:center;gap:8px;text-align:center;background:var(--bc-bg);
  border-radius:var(--bc-r-md);padding:30px 22px;color:var(--bc-txt2)}
.leegvak .rond{width:34px;height:34px;border-radius:50%;background:var(--bc-done-soft);color:var(--bc-done-ink);
  display:grid;place-items:center;font-size:15px}
.leegvak .t{font-size:13px;font-weight:600;color:var(--bc-txt)}
.leegvak .u{font-size:11.5px;color:var(--bc-txt3)}
@keyframes skelet{0%{background-position:-320px 0}100%{background-position:320px 0}}
.skelet{height:10px;border-radius:var(--bc-r-pill);
  background:linear-gradient(90deg,var(--bc-bg),var(--bc-sep),var(--bc-bg));
  background-size:320px 100%;animation:skelet 1.1s linear infinite;margin:7px 0}

/* ── kaarten ────────────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:20px}
.card{background:var(--bc-surface);border-radius:var(--bc-r-lg);padding:16px 18px;box-shadow:var(--bc-sh1)}
.card .n{font-size:30px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.card .n.acc{color:var(--bc-accent)}
.card .l{font-size:12px;color:var(--bc-txt2);margin-top:2px}
/* v-mobiel - de cijfertegels: op een telefoon drie kleine naast elkaar in
   plaats van drie schermvullende kaarten onder elkaar. */
@media(max-width:640px){
  /* !important omdat een paar pagina's de kolommen inline zetten (210/300px
     minimum) - dat is desktopmaat, en op een telefoon werd elke tegel daardoor
     alsnog schermvullend */
  .cards:not(:has(> .panel)){grid-template-columns:repeat(auto-fit,minmax(130px,1fr))!important;gap:8px;margin-bottom:14px}
  .cards:has(> .panel){grid-template-columns:1fr!important}
  .card{padding:10px 12px}
  .card .n{font-size:20px}
  .card .l{font-size:10.5px}
  /* brede tabellen schuiven binnen hun paneel, in plaats van afgeknipt raken
     of de hele pagina laten meeschuiven */
  .panel:has(> table){overflow-x:auto}
  .panel > table{min-width:max-content;width:100%}
}

/* ── lades en overlays ──────────────────────────────────────────────────── */
/* De lade en de overlay horen boven de kopbalk (header z-index:15): de kop van de lade
   met de sluitknop lag er anders onder en was onzichtbaar en onklikbaar. */
.overlay{position:fixed;inset:0;background:color-mix(in srgb,var(--bc-canvas) 55%,transparent);z-index:16;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.agenda-float{position:fixed!important;left:0;top:0;bottom:0;width:340px;z-index:18;margin:0!important;
  border-radius:0;overflow:auto;box-shadow:var(--bc-sh3);background:var(--bc-surface)}
@media(max-width:1000px){.agenda-float{display:none!important}}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(680px,100%);background:var(--bc-surface);
  box-shadow:var(--bc-sh3),inset 1px 0 0 var(--bc-sep);z-index:17;overflow:auto;padding:22px 26px 40px;
  animation:blad var(--bc-t-sheet) var(--bc-ease)}
@keyframes blad{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.drawer .close{float:right}
.drawer h2{font-size:10px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--bc-txt3);
  margin:24px 0 10px;box-shadow:inset 0 -1px 0 var(--bc-sep);padding-bottom:6px}
.drawer .kop{display:flex;gap:6px;align-items:flex-start;margin-bottom:4px}
.drawer .kop h1{flex:1;min-width:0;font-size:19px;line-height:1.3}
.drawer .kop button{flex:0 0 auto}
.rolgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 12px}
.rolvak{background:var(--bc-bg);border-radius:var(--bc-r-md);padding:10px 12px}
.rolvak.arties{background:var(--bc-accent-soft)}
.rolvak p{font-size:11.5px;color:var(--bc-txt2);margin-top:4px;line-height:1.45}
.rolvak.arties p{color:var(--bc-accent-ink)}
.rolvak.arties .kaps{color:var(--bc-accent-ink);opacity:.8}
@media(max-width:640px){.rolgrid{grid-template-columns:1fr}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}

#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:99;
  background:color-mix(in srgb,var(--bc-surface) 97%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--bc-sh2),inset 0 0 0 1px var(--bc-sep2);border-radius:var(--bc-r-md);
  padding:10px 16px;font-size:13.5px;color:var(--bc-txt)}

/* ── bestanden ──────────────────────────────────────────────────────────── */
.drop{border-radius:var(--bc-r-md);padding:22px 20px;margin-top:10px;text-align:center;color:var(--bc-txt2);
  box-shadow:inset 0 0 0 1.5px var(--bc-sep2);background:var(--bc-bg);cursor:pointer;
  transition:box-shadow var(--bc-t-state) var(--bc-ease),background var(--bc-t-state) var(--bc-ease)}
.drop:hover{box-shadow:inset 0 0 0 1.5px var(--bc-accent)}
.drop.hover{box-shadow:inset 0 0 0 1.5px var(--bc-accent);background:var(--acc-08);color:var(--bc-txt)}
.drop b{color:var(--bc-txt);font-weight:600}
.progress{height:5px;background:var(--bc-bg);border-radius:var(--bc-r-pill);overflow:hidden;margin:12px 0 8px}
.progress i{display:block;height:100%;width:0;background:var(--bc-accent);transition:width .2s var(--bc-ease)}
.opslag{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--bc-txt2);font-variant-numeric:tabular-nums}
.opslag .balk{width:110px;height:5px;background:var(--bc-bg);border-radius:var(--bc-r-pill);overflow:hidden}
.opslag .balk i{display:block;height:100%;background:var(--bc-done)}
.opslag .balk i.vol{background:var(--bc-alert)}

/* geheim staat vast, maar wordt nooit teruggegeven */
.geheim{display:inline-flex;align-items:center;gap:8px;background:var(--bc-bg);border-radius:var(--bc-r-pill);
  box-shadow:inset 0 0 0 1px var(--bc-sep);padding:5px 12px;font-size:12px}
.geheim .stip{width:6px;height:6px;border-radius:50%;background:var(--bc-done)}
.geheim .punt{letter-spacing:.18em;color:var(--bc-txt3)}
.geheim .staart{font-variant-numeric:tabular-nums;color:var(--bc-txt)}
.geheim .toen{font-size:10.5px;color:var(--bc-txt3)}

.click{cursor:pointer}
.kleurstip{flex:0 0 auto;width:9px;height:9px;border-radius:50%;display:inline-block}
.kleurstip.groot{width:13px;height:13px;margin-top:6px}

.rij-taak,.lijstrij{display:flex;gap:10px;align-items:center;padding:var(--bc-pad) 8px;min-height:var(--bc-row);
  box-shadow:inset 0 -1px 0 var(--bc-sep);cursor:pointer;font-size:var(--bc-fs);border-radius:9px}
.rij-taak:hover,.lijstrij:hover{background:var(--bc-bg)}
.rij-taak.af,.lijstrij.af{opacity:.5}
.rij-taak.af .tt,.lijstrij.af .tt{text-decoration:line-through}
.rij-taak .tt,.lijstrij .tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Afvinken is de enige handeling die op een telefoon comfortabel hoort te zijn:
   een echt vakje met ruimte eromheen, niet een tekentje van 12 pixels. */
.rij-taak .vak,.lijstrij .vak{flex:0 0 auto;width:17px;height:17px;border-radius:5px;cursor:pointer;
  box-shadow:inset 0 0 0 1.5px var(--bc-sep2);display:grid;place-items:center;
  font-size:11px;color:transparent;transition:background var(--bc-t-state) var(--bc-ease)}
.rij-taak .vak:hover,.lijstrij .vak:hover{box-shadow:inset 0 0 0 1.5px var(--bc-accent);background:var(--bc-accent-soft)}
.rij-taak .vak.aan,.lijstrij .vak.aan{background:var(--bc-done);color:var(--bc-paper);box-shadow:none}
@media(hover:none){.rij-taak .vak,.lijstrij .vak{width:22px;height:22px;border-radius:6px}.rij-taak,.lijstrij{padding:12px 8px}}
.rij-taak .projchip,.lijstrij .projchip{flex:0 0 auto;font-size:10.5px;font-weight:600;border-radius:var(--bc-r-pill);padding:2px 9px;
  max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rij-taak .teller,.lijstrij .teller{flex:0 0 auto;font-size:10.5px;color:var(--bc-txt3);font-variant-numeric:tabular-nums}
.rij-taak .wanneer,.lijstrij .wanneer{flex:0 0 auto;font-size:11px;color:var(--bc-txt3);font-variant-numeric:tabular-nums;min-width:96px;text-align:right}
/* Te laat is een datum, en verder niets. De kleur gaat op het kleinste
   element dat de betekenis draagt: de datum wordt rood. Geen getinte rij, geen
   gekleurde linkerrand, geen rood vakje, geen kader per regel - rijen worden
   gescheiden door haarlijnen binnen één vlak, net als elke andere lijst in de
   suite. Drie redenen: een band of rand die zich over elke late regel herhaalt
   leest als schade in plaats van als prioriteit; op een donkere grond wordt een
   rode waas modderig bruin; en het verspilt het ene signaal dat één late taak
   tussen tweehonderd regels vindbaar moest maken. */
.rij-taak.aan,.lijstrij.aan{background:var(--bc-accent-soft)}
.rij-taak.aan .tt,.lijstrij.aan .tt{color:var(--bc-accent-ink);font-weight:600}
.rij-taak .mid,.lijstrij .mid{flex:1;min-width:0;display:block;line-height:1.3}
.rij-taak .mid .tt,.lijstrij .mid .tt,.rij-taak .mid .sub2,.lijstrij .mid .sub2{display:block}
.rij-taak .sub2,.lijstrij .sub2{font-size:11px;color:var(--bc-txt3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rij-taak .acts,.lijstrij .acts{flex:0 0 auto;display:flex;gap:3px;opacity:0;transition:opacity var(--bc-t-state) var(--bc-ease)}
.rij-taak:hover .acts,.lijstrij:hover .acts,.rij-taak.aan .acts,.lijstrij.aan .acts{opacity:1}
.rij-taak .acts button,.lijstrij .acts button{width:24px;height:24px;padding:0;border-radius:var(--bc-r-sm);font-size:11px;
  background:var(--bc-surface);box-shadow:var(--bc-sh1);display:grid;place-items:center}
@media(hover:none){.rij-taak .acts,.lijstrij .acts{opacity:1}}

/* ── raakvlakken op een aanraakscherm ───────────────────────────────────────
   Een vinger heeft ongeveer 44 pixels nodig; een muisaanwijzer niet. Deze maten
   staan daarom achter hover:none en niet achter een schermbreedte: een tablet in
   liggende stand is breed én wordt aangeraakt. Alleen de hóógte gaat omhoog, en
   met min-height in plaats van padding, zodat de tekst op zijn plek blijft en er
   niets verspringt ten opzichte van de muisversie.
   Gemeten op 390px: de tabbladen stonden op 36, het merkknopje op 30 en de
   versieknop op 30 - allemaal te klein om zeker te raken, terwijl het juist de
   navigatie is. De header wordt hierdoor 8 pixels hoger; dat is ongeveer één
   procent van het scherm, en het alternatief is dat je twee keer moet mikken.
   De breedte staat erbij omdat een smal venster in de praktijk een telefoon is,
   en omdat het zo ook na te meten valt in een browser zonder aanraakscherm. */
@media(hover:none),(max-width:760px){
  nav button,.tier2 .meerknop{min-height:44px}
  .merk{min-height:44px}
  /* .tier1 .versie zet hierboven zelf min-height:30px en wint op specificiteit,
     dus die moet hier even zwaar staan - anders blijft de knop 30 pixels. */
  .tier1 .versie{min-height:44px;min-width:44px;padding-left:8px;padding-right:8px}
  .pop .rij{min-height:44px}
  #adm-nav button{min-height:44px}
  .seg button{min-height:38px}
}
.rij-taak .wanneer.laat,.lijstrij .wanneer.laat{color:var(--bc-alert);font-weight:600}
/* Mijn taken: lijst links, de gekozen taak rechts. Op één scherm, want het is
   heen-en-weerwerk: lezen, reageren, afvinken, volgende. */
.mijwrap,.duo{display:flex;gap:0;align-items:stretch;background:var(--bc-surface);border-radius:var(--bc-r-lg);
  overflow:hidden;box-shadow:var(--bc-sh1);min-height:420px}
.mijlijst,.duo-lijst{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bc-surface)}
.mijdetail,.duo-detail{flex:0 0 420px;background:var(--bc-bg);box-shadow:inset 1px 0 0 var(--bc-sep);overflow:auto;padding:16px 18px}
.mijkop,.duo-kop{display:flex;align-items:center;gap:10px;padding:14px 18px 10px;flex-wrap:wrap}
.mijkop h1,.duo-kop h1{font-size:21px}
.mijbalk,.duo-balk{display:flex;gap:8px;align-items:center;padding:0 18px 10px;flex-wrap:wrap}
.mijbalk #snel-titel,.duo-balk #snel-titel,.duo-balk .groei{flex:1;min-width:150px}
#mij-lijst,.duo-rijen{flex:1;min-height:0;overflow:auto;padding:0 12px 6px}
.mijvoet,.duo-voet{padding:9px 18px;box-shadow:inset 0 1px 0 var(--bc-sep);margin:0}
.mijvoet button,.duo-voet button{font-size:11px;padding:2px 4px}
@media(max-width:1100px){.mijwrap,.duo{flex-direction:column}.mijdetail,.duo-detail{flex:1 1 auto;box-shadow:inset 0 1px 0 var(--bc-sep)}}
.groepkop{display:flex;align-items:baseline;gap:8px;margin:16px 4px 4px;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bc-txt3)}
.groepkop .wenk{margin-left:auto;letter-spacing:0;text-transform:none;font-size:11px}
/* detailpaneel */
.det-kop{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.det-t{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-bottom:10px}
.det-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.det-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bc-surface);border-radius:var(--bc-r-pill);
  padding:4px 11px;font-size:11.5px;color:var(--bc-txt);box-shadow:inset 0 0 0 1px var(--bc-sep)}
.det-kaps{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--bc-txt3);margin:16px 0 7px}
.det-tekst{font-size:13px;line-height:1.6;color:var(--bc-txt2);white-space:pre-wrap}
.det-best{display:flex;align-items:center;gap:10px;background:var(--bc-surface);border-radius:var(--bc-r-md);
  padding:9px 11px;margin-bottom:6px;box-shadow:var(--bc-sh1)}
.det-best .soortje{flex:0 0 auto;font-size:9px;font-weight:700;background:var(--bc-accent-soft);color:var(--bc-accent-ink);
  border-radius:6px;padding:4px 6px;letter-spacing:.04em}
.det-best .nm{flex:1;min-width:0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.det-best .mt{font-size:10.5px;color:var(--bc-txt3);font-variant-numeric:tabular-nums}
.det-reac{display:flex;gap:9px;margin-bottom:11px}
.det-reac .rond{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--bc-done-soft);
  color:var(--bc-done-ink);display:grid;place-items:center;font-size:9.5px;font-weight:700}
.det-reac .wie{font-size:12px;font-weight:600}
.det-reac .toen{font-size:10.5px;color:var(--bc-txt3);margin-left:5px;font-weight:400}
.det-reac .txt{font-size:12.5px;color:var(--bc-txt2);line-height:1.5;margin-top:2px}
.det-leeg{display:grid;place-items:center;height:100%;text-align:center;color:var(--bc-txt3);font-size:12.5px;padding:30px}
.groepkop .tel{font-size:11px;letter-spacing:0;font-variant-numeric:tabular-nums}
.groepkop.laat{color:var(--bc-alert)}
.laatband{display:flex;align-items:center;gap:9px;padding:8px 18px;margin:0 0 4px;
  box-shadow:inset 0 -1px 0 var(--bc-sep);font-size:12.5px;color:var(--bc-txt2)}
.laatband .stip{width:7px;height:7px;border-radius:50%;background:var(--bc-alert);flex:0 0 auto}
.laatband b{color:var(--bc-alert);font-weight:700;font-variant-numeric:tabular-nums}
.laatband button{color:var(--bc-accent);font-size:12px}
.filters{display:inline-flex;gap:4px;flex-wrap:wrap}
.filters button{background:var(--bc-bg);box-shadow:inset 0 0 0 1px var(--bc-sep);color:var(--bc-txt2);
  font-size:11.5px;padding:5px 11px}
.filters button:hover{color:var(--bc-txt)}
.filters button.on{background:var(--bc-accent);color:var(--bc-paper);box-shadow:none}
.filters button .tel{opacity:.7;font-variant-numeric:tabular-nums;margin-left:3px}
.card .n.laat{color:var(--bc-alert)}
.vink{flex:0 0 auto;width:20px;text-align:center;color:var(--bc-txt3);cursor:pointer;font-size:14px}
.vink:hover{color:var(--bc-accent)}

.pkaart{display:flex;gap:11px;align-items:flex-start;background:var(--bc-surface);border-radius:var(--bc-r-md);
  padding:11px 14px;margin-bottom:6px;cursor:pointer;box-shadow:var(--bc-sh1)}
.pkaart:hover{background:var(--bc-bg)}
.pstreep{flex:0 0 4px;border-radius:3px}
.pstip{flex:0 0 auto;width:11px;height:11px;border-radius:50%;margin-top:4px}
.soort{flex:0 0 auto;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bc-txt3);background:var(--bc-bg);box-shadow:inset 0 0 0 1px var(--bc-sep);
  border-radius:var(--bc-r-pill);padding:1px 7px}