/* ============================================================================
   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:#5d5d60; --bc-txt3:#7a7a7d; --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:#9aa4ae; --bc-txt3:#78828c; --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:#9aa4ae; --bc-txt3:#78828c; --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:#a9a9a9; --bc-txt3:#838383;
  --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))}
button:disabled{opacity:.45;cursor:default;box-shadow:var(--bc-sh1)}
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:.6;cursor:not-allowed;color:var(--bc-txt3)}
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)}
.vlakproef .pv-l{position:absolute;left:12px;top:6px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bc-txt3)}

/* 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}
@media(max-width:900px){
  .admwrap{flex-direction:column}
  #adm-nav{flex:1 1 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 telefoon ─────────────────────────────────────────────
   De bovenste balk staat op één rij die niet mag afbreken. Op een smal
   scherm past die rij niet meer: het zoekveld (210px) en de naam duwen de
   rest voorbij de rand. Alles wat je op een telefoon niet nodig hebt om te
   weten wáár je bent, valt daarom weg - het logo, de modus, een zoekknop en
   je eigen rondje blijven. */
@media(max-width:640px){
  .tier1{gap:8px;padding:8px 10px}
  .tier1 > .streep,.tier1 .versie{display:none}
  .merk .woord{display:none}
  .merk{padding-right:6px}
  .zoekknop{min-width:0;padding:6px 9px}
  .zoekknop .tekst,.zoekknop kbd{display:none}
  .ikben{padding:3px}
  .ikben .wie{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}

/* ── 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}}
.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}

/* hub: eigen, groter logo (overschrijft de schil-standaard) */
.merk .logo{height:24px;width:auto;max-width:96px;border-radius:var(--bc-r-sm);display:block;flex:0 0 auto}