:root{
  --tile:#15222C; --tile-2:#1B2D38; --tile-3:#1C5566;
  --water:#0E7C8B; --water-2:#10C0DE; --water-deep:#0A5E6B; --water-soft:#DCF2F4;
  --accent:#F2922E; --accent-soft:#FCE7CE; --accent-deep:#D97816;
  --sig:#D8643A; --sig-deep:#B14A28; --sig-soft:#FBE6DC;
  /* Poolwater-tint (1.248, Bens keuze — mockup-variant B): één stap richting teal. Grens uit de
     audit: --mut op --bg stond op 4,56 en mag niet zakken — deze tint houdt exact 4,56 (en --bg-2
     gaat 4,11→4,13). Wijzig je --bg, dan MOETEN manifest.webmanifest én de donkere head-fallback
     in index.html mee (smoke § 1.248 pint die keten). */
  --bg:#E7F0F2; --bg-2:#D8E6EA; --card:#FFFFFF; --card-2:#F5F8FA; --field:#FFFFFF;
  --line:#E4E9EE; --line-2:#CFD8DF;
  --ink:#15222C; --ink-2:#37474F; --mut:#5E6E78; --mut-2:#8A98A2;
  /* Semantische tinten. Elk heeft zijn eigen achtergrond en wordt daar tegen gemeten (test rekent na):
     --ok op --ok-soft · --err op --err-soft · --warn op --accent-soft. Let op de asymmetrie: --warn hoort
     bij --accent-soft, want zijn twee consumers (.swduptag/.agbtn.has) staan op een accent-vlak.
     Er is bewust géén --warn-soft (1.214): dat bestond, had geen enkele consumer en léék de logische
     partner — precies het model dat dit brak. Waarde per thema sinds 1.212: het donkere blok gaf de
     --*-soft ACHTERGRONDEN wel een waarde en de tinten niet → donkerrood-op-donkerrood (2,60–3,02). */
  --ok:#1F7A47; --ok-soft:#E1F2E8; --warn:#8F4E12; --err:#C0271F; --err-soft:#FCEBEA;
  --info-bg:#FCEBD7; --info-ink:#8a4b12; --info-line:#D98A2B;   /* Nota/vakantie-band (2026-07-22): amber, ink≥4,5:1 op bg */
  /* Chrono-tinten (goed·midden·slecht): kále tekst/vulling op --card en --pr-bg — géén chip op een --*-soft
     achtergrond, en dáárom een eigen token i.p.v. --ok/--warn/--err. Die staan altijd óp hun eigen soft-vlak.
     Waarde per thema, want één hex haalt beide niet: de donkere tinten hieronder zijn op wit 2,46–3,08:1
     (te bleek), en élk groen dat op wit 4,5 haalt zakt op de donkere kaart naar ~3:1. Licht = de semantische
     tinten; oranje een haar donkerder dan --warn (#B0641A = 4,48, net onder AA). test/smoke.test.js rekent ze na. */
  --chr-ok:#1e7544; --chr-mid:#AB6017; --chr-bad:#C0271F;
  --en1:#D4EDDA; --en1c:#155724; --en2:#CCE5FF; --en2c:#003F88; --en3:#E2CFFF; --en3c:#4A0080;
  --sp1:#FFE0B2; --sp1c:#7A3800; --sp2:#FFCDD2; --sp2c:#B71C1C; --sp3:#C62828; --sp3c:#fff;
  --hvo:#424242; --hvoc:#fff; --rec:#E2EEE9; --recc:#2E5E4B;
  /* benen·armen·techniek = bewust FEL (teal·violet·amber) zodat de focus-categorieën zich aftekenen tegen de RUSTIGE intensiteit-pastels (EN/SP/HVO/REC) — keuze Ben, v110. Niet terug naar pastel "fixen". */
  --ben:#14B8A6; --benc:#04302B; --arm:#7C3AED; --armc:#FFFFFF; --tech:#F59E0B; --techc:#3B2600;
  /* Trainingstype-palet (planning-matrix): doelbewust onderscheidbare, medium-getinte categorische kleuren — leesbaar op zowel de lichte als de donkere matrix, ontkoppeld van de zone-pastels */
  --t1:#2F7DC0; --t2:#DD7A1F; --t3:#109A8C; --t4:#8A56C9; --t5:#D6423B; --t6:#479B3E; --t7:#CD5594; --t8:#C99417; --t9:#97653F; --t10:#67809A;
  --r:18px; --r-sm:12px; --r-lg:24px; --nav-w:92px;
  --sh-1:0 1px 2px rgba(16,40,55,.04),0 3px 10px rgba(16,40,55,.055);
  --sh-2:0 2px 6px rgba(16,40,55,.06),0 16px 38px rgba(16,40,55,.10);
  --sh-3:0 24px 64px rgba(10,34,54,.32);
  --ring:0 0 0 3px var(--water-soft);
  /* Soft-raised reliëf (1.231): de chrono-look van 1.230 app-breed — drie lagen (inzet-highlight
     boven, "rand" onder, korte slagschaduw) + --press als indruk-staat op :active. Drie sterktes:
     --raise (dichte toolbars/chips) · --raise-2 (primaire/poolside knoppen) · --raise-soft (grote
     tegels, zonder rand). Waarden = de chrono-referentie (chronoCSS, js/07); donker eigen
     zwart-gebaseerde schaduwen. Enkel SCHADUW, nooit inkt of vlak: de teal-fills dragen bewust
     GÉÉN chrono-gradient — --water-deep (donker) en --water (licht) zitten op ±4,7:1 en elke
     overlay-helft duwt de zwakke kant onder AA 4,5 (smoke rekent het na: 4,21 resp. 3,95). */
  --raise:inset 0 1px 0 rgba(255,255,255,.35),0 1px 0 rgba(10,42,58,.18),0 2px 5px rgba(10,42,58,.10);
  --raise-2:inset 0 1px 0 rgba(255,255,255,.25),0 2px 0 rgba(3,42,52,.35),0 4px 10px rgba(10,42,58,.22);
  --raise-soft:inset 0 1px 0 rgba(255,255,255,.30),0 3px 8px rgba(10,42,58,.14);
  --press:inset 0 2px 4px rgba(0,0,0,.25);
  /* inkt op een GEVULD teal vlak. Licht: teals zijn diep -> wit leest (4,9-7,4:1).
     Donker: het thema heldert de teals op zodat ze als vlak leesbaar blijven, en dan zakt wit
     naar 2,5-3,5:1 (onder AA) -> donkere inkt (4,7-6,6:1). Zelfde inkt als .sesschip.filled. */
  --on-water:#fff;
  --ease:cubic-bezier(.4,0,.2,1);
  /* liquid glass (2026): frosted oppervlakken + lichte rand-highlight; data blijft leesbaar (≥4.5:1) */
  --glass-card:#FFFFFF; --glass-bd:var(--line); --glass-hi:0 0 transparent; --glass-blur:none;
  /* presentatie-overlay (licht) — inkt gemeten op de DONKERSTE gradient-stop (#d7ebf5) mét de
     --pr-surface-laag erover (= worst case voor donkere inkt): ink 11,1 > mut 6,0 > mut-2 4,7 >= AA.
     Waren 4,20 / 2,84 / 3,02 — de beamer-tokens waren nooit tegen --pr-bg nagerekend. */
  --pr-bg:radial-gradient(900px 500px at 80% -10%,#d7ebf5,#eef6fb); --pr-ink:#0f2a38; --pr-mut:#3c5360; --pr-mut-2:#4f626e;
  --pr-surface:rgba(10,42,58,.05); --pr-surface-2:rgba(10,42,58,.10); --pr-border:rgba(10,42,58,.14); --pr-accent:#075c6d;
  --pr-split:rgba(196,244,250,.8);   /* split-modus-waas op de chrono-tegel (1.229): licht = LICHTER+teal — donkere inkt wint (chr-ok 3,87→4,6) */
  --pr-card:rgba(255,255,255,.66);   /* chrono tegel/knop-vlak (1.230, "grijs is ouderwets"): wit-op-water zoals de app-kaarten; chr-ok 3,87→5,4 */
  /* sendoff op de beamer. De app toont hem als donkerbruin op een amber chip (#8a4b12 op #FCEBD7);
     present zette de KALE --accent (#F2922E) als tekst op het lichtblauwe vlak = 1,75:1 — onleesbaar,
     net het cijfer waarop de zwemmer vertrekt. Licht = diezelfde app-bruin (5,0); donker houdt amber (7,5). */
  --pr-sendoff:#8a4b12;
}
:root[data-theme="dark"]{
  --bg:#121D22; --bg-2:#0D171C; --card:#1A242A; --card-2:#212D33; --field:#15201F;   /* Poolwater-tint donker (1.248) — head-fallback in index.html moet mee */
  --line:#2A3940; --line-2:#37484F;
  --ink:#EAF1F3; --ink-2:#AFC0C6; --mut:#84959C; --mut-2:#61737A;
  --tile:#0E181C; --tile-2:#162329; --tile-3:#1C5566;
  --water:#2BB3C4; --water-2:#3BC6D6; --water-deep:#1E96A6; --water-soft:rgba(43,198,212,.16);
  --on-water:#04222A;
  /* focus-ring apart van --water-soft: die tint (.16) draagt 13 badge-achtergronden waar --water-deep
     op staat — hem donkerder maken om de ring te redden duwt die labels naar 1,9:1. Solide --water-2
     geeft de ring 8,6:1 op --bg zonder die badges aan te raken. */
  --ring:0 0 0 3px var(--water-2);
  /* De tinten mee per thema (1.212) — zonder deze regel bleven ze op hun lichte waarde staan terwijl de
     soft-vlakken eronder wél donker werden. Tinten hergebruikt uit de al live .swsess/.tprog-pleisters. */
  --ok:#5CC98E; --warn:#E8A951; --err:#F3A79C;
  --ok-soft:#10331f; --err-soft:#3a1816; --accent-soft:#3a2c18;
  --info-bg:#3A2A15; --info-ink:#F2C078; --info-line:#F2922E;   /* Nota-band donker */
  --chr-ok:#29b06e; --chr-mid:#e8912e; --chr-bad:#ff5a4d;   /* de vertrouwde chrono-tinten: op donker al 5,1–7,1:1 */
  --sig:#E07A52; --sig-deep:#C25736; --sig-soft:rgba(216,100,58,.20);
  --sh-1:0 1px 2px rgba(0,0,0,.34),0 2px 8px rgba(0,0,0,.26);
  --sh-2:0 4px 14px rgba(0,0,0,.44),0 10px 28px rgba(0,0,0,.34);
  --sh-3:0 18px 50px rgba(0,0,0,.62);
  /* reliëf-tokens per thema (1.231): zwart-gebaseerd, zoals de chrono-donker-overrides */
  --raise:inset 0 1px 0 rgba(255,255,255,.10),0 1px 0 rgba(0,0,0,.50),0 2px 6px rgba(0,0,0,.32);
  --raise-2:inset 0 1px 0 rgba(255,255,255,.14),0 2px 0 rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.40);
  --raise-soft:inset 0 1px 0 rgba(255,255,255,.08),0 3px 10px rgba(0,0,0,.35);
  --press:inset 0 2px 4px rgba(0,0,0,.45);
  --glass-card:#1A242A; --glass-bd:#2A3940; --glass-hi:0 0 transparent;
  /* presentatie-overlay (donker, Poolside Editorial) */
  --pr-bg:linear-gradient(180deg,#131A1E,#0E1418); --pr-ink:#EAF4F6; --pr-mut:#A9C6CC; --pr-mut-2:#6E949C;
  --pr-surface:rgba(255,255,255,.05); --pr-surface-2:rgba(255,255,255,.12); --pr-border:rgba(255,255,255,.12); --pr-accent:#3BC6D6;
  --pr-split:rgba(2,40,52,.55);   /* split-modus-waas (1.229): donker = DIEPER+teal — lichte inkt wint (chr-bad 4,04→4,6) */
  --pr-card:rgba(255,255,255,.12);   /* chrono tegel/knop-vlak (1.230): donker ongewijzigd — de grijs-klacht is een licht-thema-zaak */
  --pr-sendoff:#F2922E;   /* donker: amber haalt 7,5:1 op --pr-bg — ongewijzigd */
}
:root[data-theme="dark"] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238aa1ae' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
:root[data-theme="dark"] ::placeholder{color:#8FA9B4} /* 6,8:1 op --field (was #5d7682 ≈ 3,2:1) */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Vangnet (1.254): één te breed element (bv. een nowrap-rij) maakte de hele pagina horizontaal
   panbaar op iPhone, en iOS laat een position:fixed-balk dan zweven (Bens screenshots 17/7).
   clip i.p.v. hidden: clipt zonder scroll-container te worden (sticky + fixed blijven ongemoeid). */
html,body{overflow-x:clip}
body{font-family:'Public Sans',system-ui,sans-serif;color:var(--ink);font-size:14px;min-height:100vh;overscroll-behavior-y:none;
  background:linear-gradient(180deg,var(--bg),var(--bg-2));background-attachment:fixed} /* geen pull-to-refresh/rubber-band → de vaste onderbalk blijft staan bij het scrollen (iOS) */
/* ═══ Levend poolwater (1.248, Bens keuze — mockup-variant B) ═══
   Drie VASTE lagen boven de body-gradient maar onder alle inhoud (z-index:-1 schildert boven de
   canvas-achtergrond): body::before = de statische waterlaag — oppervlakte-licht bovenaan, kalme
   golven in twee schalen (diepte zonder beweging), teal-gloed rechtsboven + diepe tegengloed
   linksonder, alles ≤.05-.42 dekking; body::after + html::before = twee tegengesteld driftende
   lichtvlakken (55/90 s, enkel transform = compositor-only, goedkoop op iPad).
   position:fixed-pseudo's en NIET background-attachment:fixed op de body: iOS negeert dat laatste,
   en zo staat het water gegarandeerd stil terwijl de inhoud eroverheen scrolt.
   ⚠ de globale reduced-motion-regel (*{animation:none}) raakt pseudo-elementen niet — vandaar de
   eigen guard onderaan dit blok. Print verstopt alle drie de lagen (in het @media print-blok). */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 240px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='180' viewBox='0 0 360 180'%3E%3Cg fill='none' stroke='%230A5E6B' stroke-linecap='round' stroke-width='1.2'%3E%3Cpath stroke-opacity='.045' d='M-20 40 q 45 -7 90 0 t 90 0 t 90 0 t 90 0 t 90 0'/%3E%3Cpath stroke-opacity='.03' d='M-65 100 q 45 -6 90 0 t 90 0 t 90 0 t 90 0 t 90 0'/%3E%3Cpath stroke-opacity='.038' d='M-35 160 q 45 -7 90 0 t 90 0 t 90 0 t 90 0 t 90 0'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='180' viewBox='0 0 360 180'%3E%3Cg fill='none' stroke='%230A5E6B' stroke-linecap='round' stroke-width='1'%3E%3Cpath stroke-opacity='.022' d='M-20 40 q 45 -7 90 0 t 90 0 t 90 0 t 90 0 t 90 0'/%3E%3Cpath stroke-opacity='.016' d='M-65 100 q 45 -6 90 0 t 90 0 t 90 0 t 90 0 t 90 0'/%3E%3Cpath stroke-opacity='.02' d='M-35 160 q 45 -7 90 0 t 90 0 t 90 0 t 90 0 t 90 0'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1200px 640px at 76% -14%,rgba(16,192,222,.10),transparent 58%),
    radial-gradient(900px 620px at 6% 110%,rgba(10,94,107,.05),transparent 60%);
  background-size:auto,360px 180px,720px 360px,auto,auto}
:root[data-theme="dark"] body::before{
  background:linear-gradient(180deg,rgba(59,198,214,.05),rgba(59,198,214,0) 240px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='180' viewBox='0 0 360 180'%3E%3Cg fill='none' stroke='%233BC6D6' stroke-linecap='round' stroke-width='1.2'%3E%3Cpath stroke-opacity='.05' d='M-20 40 q 45 -7 90 0 t 90 0 t 90 0 t 90 0 t 90 0'/%3E%3Cpath stroke-opacity='.035' d='M-65 100 q 45 -6 90 0 t 90 0 t 90 0 t 90 0 t 90 0'/%3E%3Cpath stroke-opacity='.045' d='M-35 160 q 45 -7 90 0 t 90 0 t 90 0 t 90 0 t 90 0'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='180' viewBox='0 0 360 180'%3E%3Cg fill='none' stroke='%233BC6D6' stroke-linecap='round' stroke-width='1'%3E%3Cpath stroke-opacity='.028' d='M-20 40 q 45 -7 90 0 t 90 0 t 90 0 t 90 0 t 90 0'/%3E%3Cpath stroke-opacity='.02' d='M-65 100 q 45 -6 90 0 t 90 0 t 90 0 t 90 0 t 90 0'/%3E%3Cpath stroke-opacity='.025' d='M-35 160 q 45 -7 90 0 t 90 0 t 90 0 t 90 0 t 90 0'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1200px 640px at 76% -14%,rgba(59,198,214,.07),transparent 58%),
    radial-gradient(900px 620px at 6% 110%,rgba(59,198,214,.04),transparent 60%);
  background-size:auto,360px 180px,720px 360px,auto,auto}
/* de twee lichtvlakken — sterkte 1,5× de eerste mockup (Ben 17/7: "je mag het wat sterker maken") */
body::after{content:"";position:fixed;inset:-45% -35%;z-index:-1;pointer-events:none;
  background:radial-gradient(48% 30% at 63% 24%,rgba(16,192,222,.15),transparent 62%);
  will-change:transform;animation:bgdrift1 55s ease-in-out infinite alternate}
html::before{content:"";position:fixed;inset:-35%;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 26% at 28% 72%,rgba(10,94,107,.08),transparent 64%);
  will-change:transform;animation:bgdrift2 90s ease-in-out infinite alternate-reverse}
:root[data-theme="dark"] body::after{background:radial-gradient(48% 30% at 63% 24%,rgba(59,198,214,.12),transparent 62%)}
:root[data-theme="dark"] html::before{background:radial-gradient(38% 26% at 28% 72%,rgba(59,198,214,.06),transparent 64%)}
@keyframes bgdrift1{from{transform:translate3d(-5%,-3%,0) rotate(-1.2deg) scale(1)}to{transform:translate3d(5%,4%,0) rotate(1.2deg) scale(1.1)}}
@keyframes bgdrift2{from{transform:translate3d(4%,2%,0) scale(1.06)}to{transform:translate3d(-4%,-3%,0) scale(1)}}
@media(prefers-reduced-motion:reduce){body::after,html::before{animation:none}}
/* iOS/touch (1.281): de driftende fixed lichtvlakken zijn duur op WKWebView (elke repaint = compositing → trage tab-wissels + scroll-jank die de vaste balk deed zweven) en hun -35/-45%-overhang is position:fixed → ontsnapt aan overflow-x:clip → kleine horizontale document-scroll op iOS. Op touch: statisch, geen eigen laag, binnen de viewport. De statische waterlaag (body::before, inset:0, geen animatie) blijft. */
@media(pointer:coarse){body::after,html::before{animation:none;will-change:auto;inset:0}}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:13px;color:var(--ink);background:var(--field);border:1.5px solid var(--line-2);border-radius:var(--r-sm);padding:9px 11px;outline:none;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
input:focus,select:focus,textarea:focus{border-color:var(--water);box-shadow:var(--ring)}
input:hover,select:hover,textarea:hover{border-color:var(--water-deep)}
textarea{line-height:1.65;resize:vertical}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235E7482' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;box-shadow:var(--raise)} /* een select is een knop (dropdown) — velden (input/textarea) blijven vlak; select:focus (0,1,1) wint de ring op specificiteit */
/* Een date-input meet zichzelf met de NATIVE control-metriek i.p.v. de gedeelde input-box hierboven:
   in Chromium 38,5 vs 36,5px, op iOS ~42% hoger én BREDER dan zijn kolom — in de gegevenskaart schoof
   het geboortedatum-veld daardoor ónder de GESLACHT-select (Bens iPhone-screenshot 21/7). We pinnen dus
   de hele box: min-width:0 laat hem krimpen tot zijn kolom, de hoogte = één tekstregel (1lh, volgt dus
   de font-size mee) + de chrome van de gedeelde regel (2×9px padding + 2×1,5px border = 21px).
   ⚠️ box-sizing NIET op content-box zetten: .idin doet width:100% en dan telt de padding er nog eens
   bovenop — het veld liep 25px buiten zijn kolom (in de browser gemeten). Verandert de padding/border
   van de gedeelde input-regel, dan moet de 21px hier mee (en de 13px in .attctl). */
input[type=date]{appearance:none;-webkit-appearance:none;min-width:0;height:calc(1lh + 21px)}
::selection{background:var(--water-soft)}
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
h1,h2,h3,.disp{font-family:'Bricolage Grotesque',sans-serif;letter-spacing:.01em}
a{color:var(--water-deep)}
#app{display:flex;min-height:100vh}
nav{width:var(--nav-w);background:linear-gradient(180deg,#15222C,#0D161B);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;align-items:center;padding:18px 0 14px;z-index:50;
  box-shadow:6px 0 30px rgba(8,24,40,.22),inset -1px 0 0 rgba(255,255,255,.05);transform:translateZ(0)} /* translateZ(0): eigen compositing-laag houdt de vaste rail gepind op iOS — de geanimeerde fixed achtergrond-lagen (body::after/html::before) deden hem 'zweven' op de liggende iPad. Best-effort (niet reproduceerbaar buiten iOS), te bevestigen op Bens iPad. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){nav{background:linear-gradient(177deg,var(--tile-2),var(--tile) 46%,#07182a)}}
nav .logo{width:58px;height:58px;display:grid;place-items:center;margin-bottom:8px}
nav .logo img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.28))}
nav .brand{color:#cfe7ef;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:16px}
nav a{position:relative;width:72px;padding:10px 0 8px;border-radius:13px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center; /* label dat over 2 regels breekt (EN "SEASON PLAN") ook gecentreerd */
  color:#A6C0CF;text-decoration:none;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:5px;
  /* Eén woord dat breder is dan de rail stak er links én rechts uit (gemeten: "TRAININGSTIJDEN" 97px,
     "D'ENTRAÎNEMENT" 97px in een rail van 92 — overflow staat op visible). Labels worden hier NOOIT
     ingekort (Bens regel), dus de rail breekt: hyphens:auto geeft een echt koppelteken per taal
     (applyLocale zet documentElement.lang), break-word is het vangnet als een taal geen woordenboek heeft. */
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;
  transition:background .16s var(--ease),color .16s var(--ease),transform .16s var(--ease)}
nav a svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s var(--ease)}
nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
nav a:hover svg{transform:translateY(-2px) scale(1.06)}
nav a.on{background:linear-gradient(135deg,rgba(19,180,209,.34),rgba(19,180,209,.09));color:#fff;box-shadow:inset 0 0 0 1px rgba(127,216,234,.30),0 6px 18px rgba(13,160,190,.26)}
nav a.on::before{content:"";position:absolute;left:-1px;top:16%;bottom:16%;width:3.5px;border-radius:0 4px 4px 0;background:var(--water-2);box-shadow:0 0 14px var(--water-2)}
nav .sp{flex:1}
/* — 'Meer'-overflowknop + popovermenu — */
nav .navx{appearance:none;-webkit-appearance:none;background:none;cursor:pointer;position:relative;width:72px;padding:10px 0 8px;border:0;border-radius:13px;display:flex;flex-direction:column;align-items:center;gap:4px;color:#A6C0CF;font:700 10px/1 'Public Sans',system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;margin-bottom:5px;transition:background .16s var(--ease),color .16s var(--ease)}
nav .navx svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
nav .navx:hover{color:#fff;background:rgba(255,255,255,.07)}
nav .navx.on{color:#fff;background:linear-gradient(135deg,rgba(19,180,209,.34),rgba(19,180,209,.09));box-shadow:inset 0 0 0 1px rgba(127,216,234,.30)}
.navmore{position:fixed;inset:auto;margin:0;left:100px;bottom:16px;width:238px;max-width:calc(100vw - 20px);padding:7px;background:linear-gradient(180deg,#1b2a35,#131e26);border:1px solid rgba(255,255,255,.10);border-radius:15px;box-shadow:0 20px 54px rgba(8,24,40,.5);z-index:60}
.navmore .mi{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;width:100%;box-sizing:border-box;text-align:left;margin:0;padding:11px 12px;border-radius:11px;background:none;border:0;cursor:pointer;text-decoration:none;text-transform:none;letter-spacing:normal;color:#cfe0e8;font:600 13.5px/1.15 'Public Sans',system-ui,sans-serif}
.navmore a.mi::before{display:none}
.navmore .mi svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.navmore .mi:hover{background:rgba(255,255,255,.09);color:#fff}
.navmore .mi.on{color:#fff;background:rgba(19,180,209,.20)}
.navmore .misep{height:1px;background:rgba(255,255,255,.10);margin:6px 9px}
.navmore .mirow{display:flex;gap:6px}
.navmore .mirow .mi{flex:1;justify-content:center;padding:10px 6px}
.navmore .miacct .navacct{margin-top:6px}
@media(max-width:1000px){.navmore{left:auto;right:8px;bottom:80px}}
/* — Ruime pc: stats/agent/instellingen staan gewoon ín de rail; de popover houdt zijn kopie voor krappe schermen —
   Vroeger stond hier een pointer:fine-poort om de iPad uit te sluiten (rail minimaal houden); Ben (18/7) wil
   de volle rail óók op de liggende iPad, dus enkel nog op maat: breed genoeg (≥1001px = geen onderbalk) én hoog genoeg.
   min-height:800px is GEMETEN, niet gegokt: 9 rail-items (Analyse bijgekomen in 1.267) + logo + merk + ••• + sync-strook
   vragen 775px (FR/NL/EN, in de browser gemeten), plus wat lucht. Lager knijpt flex-shrink de items plat (.sp geeft eerst zijn ruimte
   op, daarna overlappen icoon en label). Verhoog je hier iets aan de rail, meet dit getal opnieuw.
   Beide kopieën staan altijd in de DOM — deze query is de enige schakelaar (geen matchMedia in js/04). */
nav>a.navwide{display:none}
@media(min-width:1001px) and (min-height:800px){
  nav>a.navwide{display:flex}
  .navmore .navwide{display:none}
  nav .navx.on{color:#A6C0CF;background:none;box-shadow:none} /* de route licht al op in de rail zelf → ••• niet dubbel oplichten */
}
/* Icoon-onderbalk (Ben 18/7): de labels zijn verborgen op ≤1000px (zie de media-query verderop), dus alle
   tabs passen als icoon — de label-overflow-truc van 1.254 is niet meer nodig. De naam verschijnt bij de tik
   even als popup (navTip → #navtip), zodat de bestemming toch leesbaar is. */
#navtip{position:fixed;z-index:120;transform:translateX(-50%);background:linear-gradient(180deg,#1b2a35,#131e26);
  color:#eaf3f7;font:800 11.5px/1 'Public Sans',system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;
  padding:8px 13px;border-radius:11px;border:1px solid rgba(255,255,255,.10);box-shadow:0 10px 30px rgba(8,24,40,.5);
  white-space:nowrap;pointer-events:none;opacity:0;transform:translateX(-50%) translateY(4px);transition:opacity .16s var(--ease),transform .16s var(--ease)}
#navtip.show{opacity:1;transform:translateX(-50%) translateY(0)}
main{flex:1;min-width:0;margin-left:var(--nav-w);padding:max(26px,env(safe-area-inset-top)) clamp(16px,3vw,40px) 80px;max-width:1360px;animation:fadeUp .34s var(--ease) both} /* padding-top ≥ safe-area: op iOS-standalone (black-translucent + viewport-fit=cover) loopt de content anders onder de statusbalk (titel over de klok) */ /* min-width:0 — algemene overflow-guard: flex/grid-kinderen mogen main niet oprekken */
#app[data-route="plan"] main{max-width:none;min-width:0}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.viewtitle{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.viewtitle h1{position:relative;font-size:clamp(26px,4vw,39px);font-weight:700;line-height:1;letter-spacing:-.018em;color:var(--ink)} /* vloeiend: krimpt mee op tablet/gsm (geen dode zone tussen nav-inklap ≤1000px en content) */
.viewtitle h1::after{content:"";position:absolute;left:2px;bottom:-9px;width:54px;height:4px;border-radius:3px;background:var(--sig)}
.viewtitle .sp{flex:1}
.card{background:var(--glass-card);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-bd);border-radius:var(--r);padding:22px;box-shadow:var(--sh-1),var(--glass-hi);transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.card.hover:hover{box-shadow:var(--sh-2),var(--glass-hi);transform:translateY(-3px)}
.clubrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:var(--card)}
.clubrow.arch{opacity:.65}
.clubfeats{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:7px}
.clubfeat{cursor:pointer;white-space:nowrap;font-size:12px;display:inline-flex;align-items:center;gap:5px;color:var(--ink-2)}
/* ── Instellingen-redesign (2026-07-18): tegel-overzicht + categorie-panes ── */
.settiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.settile{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh-1);cursor:pointer;transition:transform .16s var(--ease),box-shadow .16s var(--ease);width:100%;display:block;color:inherit;font:inherit}
.settile:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.settile .sti{width:44px;height:44px;border-radius:13px;background:var(--water-soft);color:var(--water-deep);display:grid;place-items:center;margin-bottom:14px}
.settile .sti svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.settile h3{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:700;margin-bottom:3px;color:var(--ink)}
.settile p{color:var(--mut);font-size:12.5px;line-height:1.45}
.setback{display:inline-flex;align-items:center;gap:8px;background:none;border:0;color:var(--mut);font-weight:700;font-size:13px;padding:6px 4px;margin-bottom:12px;cursor:pointer}
.setback svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.setback:hover{color:var(--water-deep)}
.setcat-h{font-family:'Bricolage Grotesque',sans-serif;font-size:23px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px}
.setcat-sub{color:var(--mut);font-size:13.5px;margin-bottom:18px;max-width:60ch}
/* read-only menu/feature-status (eigen club — super-admin beheert) */
.mstat{display:flex;align-items:center;gap:13px;padding:13px 2px;border-bottom:1px solid var(--line)}
.mstat:last-child{border-bottom:0}
.mstat .mtx{min-width:0;flex:1}
.mstat .mnm{font-weight:700;font-size:14px}
.mstat .mds{color:var(--mut);font-size:12.5px;margin-top:1px}
.mchip{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:5px 11px;border-radius:8px;flex:none}
.mchip.on{background:var(--ok-soft);color:var(--ok)}
.mchip.off{background:var(--card-2);color:var(--mut);border:1px solid var(--line)}
.msubnote{background:var(--water-soft);border-radius:12px;padding:12px 15px;font-size:12.5px;color:var(--water-deep);margin-bottom:16px}
/* super-admin: volledige clubpagina (B4) + schakelaars */
.ctxbar{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-bottom:18px;box-shadow:var(--sh-1);flex-wrap:wrap}
.ctxbar .cxlogo{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15px;background:linear-gradient(135deg,var(--water-2),var(--water-deep))}
.ctxbar .cxnm{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px}
.ctxbar .cxrole{color:var(--mut);font-size:12px}
.trow{display:flex;align-items:center;gap:13px;padding:13px 2px;border-bottom:1px solid var(--line)}
.trow:last-child{border-bottom:0}
.trow .tic{width:36px;height:36px;flex:none;border-radius:10px;background:var(--card-2);display:grid;place-items:center;color:var(--water-deep)}
.trow .tic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.trow .ttx{min-width:0;flex:1}
.trow .tnm{font-weight:700;font-size:14px}
.trow .tds{color:var(--mut);font-size:12.5px;margin-top:1px}
.swtch{position:relative;display:inline-block;width:46px;height:27px;flex:none}
.swtch input{opacity:0;width:0;height:0;position:absolute}
.swtch .trk{position:absolute;inset:0;background:var(--line-2);border-radius:999px;transition:background .18s var(--ease);cursor:pointer}
.swtch .trk::before{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .18s var(--ease)}
.swtch input:checked + .trk{background:var(--water-deep)}
.swtch input:checked + .trk::before{transform:translateX(19px)}
.swtch input:focus-visible + .trk{box-shadow:var(--ring)}
.trow.core{opacity:.72}
.tgtag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:7px;background:var(--water-soft);color:var(--water-deep);flex:none}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:980px){.grid2{grid-template-columns:1fr}}
.lbl{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);display:block;margin-bottom:6px}
/* Kaarttitel bóven .lbl. Elders is één .lbl per kaart de titel; de weeksamenvatting heeft er vijf,
   dus daar riep elke sectiekop op kaarttitel-volume. Omhoog i.p.v. de subs omlaag: .lbl is al 10,5px
   en 10px is de kleinste tekst in de app (.babt .b .l) — er is geen ruimte naar beneden. .lbl zelf
   blijft ongemoeid: 104 consumers app-breed. Contrast op --card gemeten: 16,2 licht / 13,8 donker. */
.cardh{font-family:'Bricolage Grotesque',sans-serif;font-size:17px;font-weight:700;letter-spacing:.01em;color:var(--ink);display:block;margin-bottom:12px}
/* Sectiekop ONDER .cardh maar bóven de kale .lbl. Ben, 16/7: "de subtitels zijn nog steeds te subtiel."
   Eigen klasse i.p.v. .lbl verbouwen — die heeft 104 consumers. Donkerder (--ink-2 i.p.v. --mut) en
   groter (12,5 i.p.v. 10,5); blijft ruim onder de 17px-kaartkop, dus de hiërarchie houdt. */
.lbl.sec{font-size:12.5px;color:var(--ink-2);letter-spacing:.06em;margin-bottom:8px}
.ab-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0}
.ab-k{font-size:13px;color:var(--ink-2)}
.btn{border:1.5px solid var(--line-2);background:var(--field);border-radius:12px;padding:9px 16px;font-size:13px;font-weight:700;color:var(--ink-2);
  transition:all .14s var(--ease);display:inline-flex;align-items:center;gap:7px;line-height:1;min-height:40px;box-shadow:var(--raise)} /* poolside: tap-target */
.btn:focus-visible,button:focus-visible{outline:2px solid var(--water);outline-offset:2px}
input[type="checkbox"],input[type="radio"]{accent-color:var(--water-deep);width:16px;height:16px}
.btn:hover{border-color:var(--water);color:var(--water-deep);transform:translateY(-1px);box-shadow:var(--raise),var(--sh-1)}
.btn.pri{background:var(--water-deep);border-color:transparent;color:var(--on-water);box-shadow:var(--raise-2)} /* GEEN gradient-overlay op dit vlak: donker --water-deep = 4,7:1 en de −6%-onderstop zakt naar 4,21 */
.btn.pri:hover{filter:brightness(1.1);color:var(--on-water);border-color:transparent}
.btn.aqua{background:var(--water);border-color:transparent;color:var(--on-water);box-shadow:var(--raise-2)}
.btn.aqua:hover{filter:brightness(1.08);color:var(--on-water)}
.btn.sm{padding:6px 11px;font-size:12px;border-radius:9px;min-height:34px}
/* Aanraaktoestel = het bad (iPad/iPhone, natte handen) — PRODUCT.md vraagt daar ruime tap-doelen.
   34/40px haalt de AA-vloer (2.5.8 = 24x24) maar niet de 44x44 van 2.5.5; op een muis-scherm is
   compact net gewenst (dichte toolbars), dus enkel op pointer:coarse verruimen. De kiosk deed dit
   al met de hand (52/48px).
   min-width hoort erbij: enkel de hoogte verruimen liet de icoon-knoppen te SMAL (←/→ 40px, ⚙ op
   Zwemmers 36px — in de browser nagemeten over alle views; élke andere knop is al breder, dus dit
   raakt alleen die drie). Op .btn i.p.v. .btn.sm: .sm draagt beide klassen, dus dit dekt allebei.
   justify-content moet mee: .btn is inline-flex met justify-content:normal, dus de bijgekomen
   breedte valt rechts en zet de glyph scheef (⚙ stond 3,9px links van het midden). No-op zodra een
   knop breder is dan 44px — dan is er geen vrije ruimte. */
/* bassin-kiezer: stond met een inline style in de markup (js/04) -> inline wint van élke regel,
   ook van de media-query hieronder. Sinds 1.244 dekt de gedeelde .pill select-regel dit. */
@media(pointer:coarse){
  .btn{min-height:44px;min-width:44px;justify-content:center}
  .btn.sm{min-height:44px;padding:9px 13px}
  .statseg button{min-height:44px;min-width:44px}
  .pill select{min-height:36px} /* 1.244: de losse 44px maakte het bad-chip hoger dan zijn rij; 36 in een 44-rij blijft ruim boven de AA-vloer 24 */
  .viewtitle .pill,.viewtitle .btn,.viewtitle .statseg button,.viewtitle input[type=search],.weekbar .pill,.weekbar .btn,.weekbar .statseg button{height:44px}
}
.btn.ghost{border-color:transparent;background:transparent;color:var(--mut);box-shadow:none}
.btn.ghost:hover{color:var(--err);background:var(--err-soft);transform:none}
.btn.danger{border-color:var(--err);background:var(--err-soft);color:var(--err);box-shadow:var(--raise)}
.btn.danger:hover{background:var(--err);border-color:var(--err);color:var(--err-soft)} /* keert de rustkaart om; #fff hield hier élke donkere --err tegen (1,94:1) — var(--err-soft) haalt 5,13 licht / 8,18 donker */
.btn:not(.ghost):active{transform:translateY(1px);box-shadow:var(--press)} /* indruk-staat (1.231): specificiteit 0,3,0 wint van elke variant én — als latere bron bij gelijke 0,3,0 — van .btn.danger:hover; ghost blijft vlak */
.btn.block{width:100%;justify-content:center}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
/* 1.244: chips in dezelfde vormfamilie als de knoppen (radius 11) maar VLAK — het 1.231-reliëf is
   het klikbaar-signaal, dus info draagt het niet */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:7px 13px;border-radius:11px;background:var(--card);border:1px solid var(--line);color:var(--mut)}
.pill b{color:var(--ink)}
/* week-samenvatting: hero-pill (gezwommen) = solide signaal-accent (coral) zodat het meteen opvalt */
.weekbar .pill.hero{background:var(--sig-deep);border-color:transparent;color:#fff;box-shadow:none}
.weekbar .pill.hero b{color:#fff}
:root[data-theme="dark"] .weekbar .pill.hero{background:var(--sig);color:var(--on-water);border-color:transparent;box-shadow:none}
.weekbar .pill:not(.hero){background:var(--glass-card);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-color:var(--glass-bd)}
/* terugval voor browsers zonder backdrop-filter: solide oppervlakken (leesbaarheid eerst) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.card,.stat,.sumcard,.daycell,.weekbar .pill:not(.hero){background:var(--card);border-color:var(--line)}}
/* 1.244: ÉÉN rijhoogte per toolbar (Bens klacht: het bad-chip stak boven de rest uit) — alles wat
   in een titel-/weekbalk staat (knop, chip én statseg-knop) meet 40px; coarse verruimt naar 44.
   40 en geen 38: .btn draagt min-height:40 en min-height WINT van height — een lagere pin verliest
   dus stilletjes op de knoppen (zo stonden titelbalk-knoppen al op 40 naast 38px-pills). */
.viewtitle .pill,.viewtitle .btn,.viewtitle .statseg button,.viewtitle input[type=search],.weekbar .pill,.weekbar .btn,.weekbar .statseg button{height:40px;box-sizing:border-box;margin:0}
.viewtitle .pill,.weekbar .pill{padding:0 12px}
.pill select,.pill input{height:28px;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;background:var(--field);color:var(--ink);font-size:12px}
.pill select{padding:2px 24px 2px 8px}
.pill input{padding:2px 8px}
.viewtitle .pill select{min-width:112px;padding-right:4px}
.pill select:not(:focus){box-shadow:none} /* reliëf zit al op de pill zelf (dubbele chrome); een gefocuste select valt buiten deze regel, dus de focus-ring blijft */
/* Bad-kiezer in de weekbalk: die pillen zijn GLAS (translucent), dus een select met eigen --field-vlak + rand
   stond als een losse doos ín de faint glazen pil — "bad" + een zwevend "50 m"-vakje (Ben 18/7: "ziet er kapot uit").
   Laat de select opgaan in de pil zodat "bad 50 m ⌄" één geheel is (geldt licht én donker: bg = de glas-pil eronder). */
.weekbar .poolpill select{border:0;background:transparent;padding-left:0}
.tag{display:inline-block;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:7px;white-space:nowrap;letter-spacing:.02em}
.muted{color:var(--mut)}
.right{text-align:right}
.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,90px);background:var(--tile-2);color:#fff;
  padding:13px 22px;border-radius:13px;font-size:13.5px;font-weight:700;box-shadow:var(--sh-3);transition:transform .3s var(--ease);z-index:200;border:1px solid rgba(255,255,255,.12)}
.toast.show{transform:translate(-50%,0)}
.note{background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-size:12.5px;color:var(--ink-2);line-height:1.6}
.note.accent{border-color:var(--water);background:var(--water-soft)}
.weekbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.weekbar .wk{font-family:'Bricolage Grotesque',sans-serif;font-size:25px;font-weight:700;min-width:132px;text-align:center}
/* ── Compact weekscherm (spec 2026-07-18): schakel-elementen — wide verbergt ze, ≤1024px toont ze.
   19/7: de «meer»-knop (.wkmore) en de wkx/wkw-verstopklassen zijn weg — de samenvatting is altijd zichtbaar. ── */
.wkbrk,.sessc{display:none}
/* Zwemmers-kop (19/7): zoekveld uit de inline maten (de bassin-les), + in twee kopieën — tekst wide, vierkant compact */
#zwsearch{padding:9px 14px;border:1px solid var(--line-2,var(--line));border-radius:11px;background:var(--field);color:var(--ink);font-size:13.5px;min-width:190px}
.zwbrk{display:none}
.zwaddc{display:none}
@media(max-width:1024px){
  .viewtitle .zwbrk{display:block;width:100%;height:0}
  #zwsearch{flex:1 1 auto;min-width:0}
  .zwaddw{display:none}
  .zwaddc{display:inline-flex}
}
@media(max-width:1000px),(pointer:coarse){ .zwwrap.det .zwonly{display:none} } /* open detail = eigen scherm: de lijstkop (zoek/+/tabs) hoort bij de lijst — zelfde voorwaarde als de zsplit-inklap (1.184) */
.daystrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:18px}
.daycell{background:var(--glass-card);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-bd);border-radius:16px;padding:11px 11px 9px;box-shadow:var(--sh-1),var(--glass-hi);transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
.daycell:hover{box-shadow:var(--sh-2),var(--glass-hi);transform:translateY(-2px)}
.daycell .dh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.daycell .dn{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:16px;text-transform:uppercase}
.daycell .dd{font-size:10.5px;color:var(--mut);font-weight:600}
.sesschip{width:100%;min-height:42px;border:1.5px dashed var(--line-2);background:transparent;border-radius:12px;padding:9px 11px;display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:7px;font-size:11.5px;color:var(--mut);transition:all .14s var(--ease)}
.drychip{width:100%;min-height:34px;border:1.5px dashed var(--line-2);background:transparent;border-radius:12px;padding:7px 11px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;color:var(--mut);transition:all .14s var(--ease)}
.drychip:hover{border-color:var(--accent)}
.drychip.filled{border-style:solid;border-color:transparent;background:var(--accent-soft);color:var(--warn);font-weight:600}
.drychip.sel{outline:2px solid var(--sig);outline-offset:1px}
.drychip .dt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swdry{margin-top:5px;font-size:10.5px;font-weight:600;color:var(--warn);background:var(--accent-soft);border-radius:8px;padding:3px 7px;line-height:1.3}
.dryedh{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dryedrow{display:flex;gap:12px;flex-wrap:wrap}
.dryedrow .f{flex:1;min-width:120px}
.sesschip b{font-weight:800}
.sesschip>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sesschip .km{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;white-space:nowrap;flex:none} /* zonder " km"-eenheid + kleiner: het typelabel (AM · AEC1) mag op smalle iPad-kolommen niet afbreken */
.sesschip.filled{border-style:solid;background:var(--water-2);border-color:transparent;color:#04222A;box-shadow:none}
.sesschip.typed{border-style:solid;border-color:transparent;color:#04222A;box-shadow:none} /* type-kleur (jaarplanning-palet) komt inline mee */
.sesschip.sel{outline:2px solid var(--water);outline-offset:2px}
.sesschip:hover{border-color:var(--water);transform:translateY(-1px);box-shadow:var(--sh-1)}
.sback{position:sticky;top:max(8px,env(safe-area-inset-top));z-index:6;margin-bottom:10px}
.sesshead{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.sesshead h2{font-size:20px}
.sesshead .sp{flex:1}
.sgo{width:100%;min-height:52px;font-size:16px;margin-bottom:9px}
/* ⋯-menu op de sessiekaart (19/7): secundaire acties (Analyse/Partager/PDF/effacer) in een native <details>-popover */
.smenu{position:relative;display:inline-block}
.smenu>summary{list-style:none}
.smenu>summary::-webkit-details-marker{display:none}
.smpop{position:absolute;right:0;top:calc(100% + 6px);min-width:210px;background:var(--card);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--sh-2);padding:6px;z-index:30;display:flex;flex-direction:column;gap:2px}
.smi{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 11px;border:0;border-radius:9px;background:none;color:var(--ink);font:600 13.5px/1.2 'Public Sans',system-ui,sans-serif;cursor:pointer}
.smi:hover{background:var(--card-2)}
.smi.danger{color:var(--err)}
@media(pointer:coarse){.smi{min-height:44px}}
/* duur-pil: het cijfer is de boodschap — vet, groter en in volle inkt (Ben 19/7: "duur duidelijker") */
/* seizoen-setup-paneel (19/7): ⚙ naast de seizoenkiezer opent van/tot + Nieuw seizoen.
   Gecentreerd onder de knop + geklemd op de viewport — rechts uitgelijnd zou op iPhone links uit beeld schuiven. */
.seasoncfg .smpop{left:50%;right:auto;transform:translateX(calc(-50% + var(--smshift,0px)));min-width:240px;max-width:calc(100vw - 24px);padding:12px;gap:8px} /* --smshift = viewport-klem, gezet door smenuClamp (js/04) */
.seasoncfg label{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--mut)}
.seasoncfg label input{flex:1}
.durpill{gap:6px}
.durpill b{font-size:15px;color:var(--ink)}
/* vierkante icon-only actieknoppen op de sessiekaart (Ben 19/7 r3) — naam verschijnt als btnTip-popup bij de tik */
.btn.sq{min-width:40px;padding:0 8px;font-size:15px;gap:4px;justify-content:center} /* center hoort hier expliciet: de kale .btn centreert enkel ónder pointer:coarse (1.219) */
@media(pointer:coarse){.btn.sq{min-width:44px}}
/* 19/7 r2 (Ben: «ook op iPhone enkel iconen»): de schil-actierij = icon-only vierkantjes, zoals de wide-kaart.
   flex:1 verdeelt de rij mooi over de schermbreedte; de naampopup (btnTip) + title dragen de betekenis. */
.sgrid{display:flex;gap:8px;margin-bottom:14px}
.sgrid .btn.sq{flex:1;font-size:17px}
.sessmeta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:12.5px;color:var(--mut);margin-bottom:10px}
.sgrid .btn.on{background:var(--water-deep);border-color:transparent;color:var(--on-water);box-shadow:var(--raise-2)}
.sgrid .btn.on:active{box-shadow:var(--press)}
.editor-wrap{display:grid;grid-template-columns:minmax(340px,480px) 1fr;gap:16px;align-items:start}
@media(max-width:1080px){.editor-wrap{grid-template-columns:1fr}}
.srcbox{width:100%;min-height:clamp(380px,62vh,820px);font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.8;padding:14px 15px;background:var(--field);tab-size:2;border-radius:12px}
.metarow{display:flex;flex-wrap:wrap;gap:10px 12px;margin-bottom:12px;align-items:flex-start}
.metarow .f{display:flex;flex-direction:column;min-width:0}
.metarow .f-type{flex:0 0 150px}
.metarow .f-km{flex:0 0 108px}
.metarow .f-start{flex:0 0 104px}
.metarow .f-bad{flex:0 0 168px}
.metarow .f-mat{flex:1 1 240px;min-width:200px}
.metarow .f-droog{flex:1 1 100%}
.metarow .f-km input,.metarow .f-start input,.metarow .f-start select,.metarow .f-type select,.metarow .f-bad select{width:100%}
@media(max-width:620px){.metarow .f-type,.metarow .f-km,.metarow .f-start,.metarow .f-bad{flex:1 1 120px}}
.matwrap{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1.5px solid var(--line-2);border-radius:var(--r-sm);padding:6px 9px;background:var(--field);min-height:38px}
.matchips{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.matextra{flex:1;min-width:96px;border:none!important;box-shadow:none!important;padding:2px 2px!important;font-size:12.5px;background:transparent}
.matextra:focus{box-shadow:none!important;border:none!important}
.hint{font-size:11.5px;color:var(--mut);line-height:1.7;margin-top:9px}
.hint code,code.k{font-family:'JetBrains Mono',monospace;background:var(--bg-2);padding:1.5px 6px;border-radius:5px;font-size:10.5px;color:var(--ink-2)}
.toolbar{display:flex;gap:5px;flex-wrap:wrap;margin:7px 0 9px;padding:9px;background:var(--card-2);border:1px solid var(--line);border-radius:12px}
.toolbar .grp{display:flex;gap:4px;flex-wrap:wrap;align-items:center;padding-right:8px;margin-right:2px;border-right:1px dashed var(--line-2)}
.toolbar .grp:last-child{border-right:none}
.toolbar .gl{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--mut-2);align-self:center;margin-right:2px}
.tbtn{border:1px solid var(--line-2);background:var(--field);border-radius:8px;padding:5px 9px;font-size:11.5px;font-weight:700;color:var(--ink-2);font-family:'JetBrains Mono',monospace;transition:all .12s var(--ease);line-height:1}
.tbtn:hover{border-color:var(--water);color:var(--water-deep);transform:translateY(-1px);box-shadow:var(--sh-1)}
.tbtn.z{color:#fff;border:none}
.setlane{display:grid;grid-template-columns:76px 1fr;border-radius:12px;overflow:hidden;border:1px solid var(--line);margin-bottom:8px;background:var(--field);box-shadow:var(--sh-1);animation:laneIn .28s var(--ease) both}
@keyframes laneIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.setlane .zoneblock{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;letter-spacing:.02em;text-align:center;line-height:1.05;padding:4px 3px;word-break:break-word}
.setlane .body{padding:9px 14px;display:grid;grid-template-columns:minmax(110px,1.1fr) auto auto minmax(140px,1.5fr) auto;gap:6px 14px;align-items:center;background:color-mix(in srgb, var(--z) 13%, var(--field))}
:root[data-theme="dark"] .setlane .body{background:color-mix(in srgb, var(--z) 8%, var(--field))} /* pastel-tinten worden modderig op donker — lager mengen */
@media(max-width:760px){.setlane .body{grid-template-columns:1fr auto}}
.setlane .what{font-weight:800;font-size:15px}
.setlane .what .x{color:var(--mut);font-weight:500}
.setlane .doel{grid-column:1/-1;font-size:12px;color:var(--mut);line-height:1.5}
.setlane .ival{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px}
.setlane .clock{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:14px;color:var(--ink);white-space:nowrap;text-align:right}
.setlane.grp{margin-left:20px}
.grpline{display:flex;align-items:center;gap:9px;margin:10px 0 7px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:15px;text-transform:uppercase;color:var(--mut)}
.grpline::after{content:"";flex:1;height:1.5px;background:linear-gradient(90deg,var(--line-2),transparent)}
.targets{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:5px;font-size:13px}
.targets.dense{font-size:11.5px}
.targets.xdense{font-size:10.5px}
.tchip{background:var(--card-2);border:1px solid var(--line);border-radius:7px;padding:3px 8px;color:var(--mut);display:flex;align-items:center;gap:5px}
.tchip b{font-family:'JetBrains Mono',monospace;color:var(--ink);font-weight:700}
.parse-err{border:1px solid var(--err);background:var(--err-soft);padding:8px 12px;border-radius:9px;font-size:12px;color:var(--err);margin-bottom:7px}
.parse-hint{border:1px solid var(--water);background:var(--water-soft);padding:8px 12px;border-radius:9px;font-size:12px;color:var(--water-deep);margin-bottom:7px} /* hulp, geen fout */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{background:var(--glass-card);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-bd);border-radius:16px;padding:16px 18px;box-shadow:var(--sh-1),var(--glass-hi);position:relative;overflow:hidden;transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
.stat:hover{box-shadow:var(--sh-2),var(--glass-hi);transform:translateY(-2px)}
.stat::after{display:none}
.stat .v{font-family:'JetBrains Mono',monospace;font-size:32px;font-weight:700;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.stat .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:800;margin-top:5px}
/* .bars levert de kolom-template, .bar erft ze via subgrid (zelfde patroon als .racelist in js/10):
   de labelkolom groeit naar het BREEDSTE label en alle rijen blijven uitgelijnd. Was een vaste 54px —
   'TECH' paste, maar 'TECHNIEK' (64px) raakte de balk en 'TECHNIQUE' (74px) liep er 10px ín (1.222).
   Een vaste breedte was sowieso fragiel: een club kan via Abréviations een langere zone-code zetten.
   ELKE kolom naast `1fr` heeft een VASTE ondergrens — Bens eis: "alle balken even lang". Met kale
   `auto` krijgt elk .bars-blok zijn eigen breedte (slagen + niveaus staan bóven elkaar en liepen zo
   1,8px uit de pas aan de start en 41,4px aan het eind). Maten met de echte fonts gemeten, niet gegokt:
   breedste label 'TECHNIQUE' 73,x px → 76 · '100%' 27,6px → 30 · seizoenstotaal '812,50 km' 62,1px → 64.
   De minmax-bovengrens is enkel een vangnet voor een absurd lange custom clubcode/afstand: dan liever
   ongelijke balken dan tekst ín de balk. % en afstand zijn APARTE kolommen (.vp/.vd) — als één cel
   ("28% · 1,40 km") kunnen ze niet uitlijnen, en een blok zónder % (niveaus) schoof zijn afstand weg. */
.bars{display:grid;grid-template-columns:minmax(76px,auto) 1fr 30px minmax(64px,auto);gap:7px 10px}
.bar{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;font-size:12px}
.bars>.muted{grid-column:1/-1}   /* lege staat van barRows: volle regel, geen kolom-1-knijp */
.bar span:first-child{font-weight:800;letter-spacing:.02em}
.bar .tr{height:18px;background:var(--bg-2);border-radius:6px;overflow:hidden}
.bar .fl{height:100%;border-radius:6px;min-width:3px;transition:width .5s var(--ease)}
.bar .vp,.bar .vd{font-family:'JetBrains Mono',monospace;font-size:11.5px;text-align:right;color:var(--mut);white-space:nowrap}
.mixbars{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:15px 26px}
.mxr{display:flex;align-items:center;gap:9px;font-size:12px}
.mxr .mxk{font-weight:800;letter-spacing:.02em;width:44px;flex:none}
.mxr .mxt{width:72px;flex:none;height:15px;background:var(--bg-2);border-radius:6px;overflow:hidden}
.mxr .mxf{display:block;height:100%;border-radius:6px;min-width:4px}
.mxr .mxv{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--mut);white-space:nowrap;flex:none}
.sumgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin-bottom:4px}
.sumcard{border-radius:16px;padding:14px 16px;border:1px solid var(--glass-bd);background:var(--glass-card);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--sh-1),var(--glass-hi)}
.sumcard .sv{font-family:'JetBrains Mono',monospace;font-size:27px;font-weight:700;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.sumcard .sk{font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--mut);margin-top:3px}
.sumcard .sp2{font-size:11px;color:var(--mut);margin-top:2px}
.babt{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.babt .b{border-radius:12px;padding:11px 12px;text-align:center}
.babt .b .n{font-family:'Bricolage Grotesque',sans-serif;font-size:24px;font-weight:700;line-height:1}
.babt .b .l{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-top:3px;opacity:.85}
.gauge{height:9px;background:var(--bg-2);border-radius:5px;overflow:hidden;min-width:70px}
.gauge i{display:block;height:100%;background:linear-gradient(90deg,var(--water-2),var(--water-deep));transition:width .5s var(--ease)}
.navbreak{margin-top:6px;display:flex;flex-direction:column;gap:3px}
.navbreak span{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:11.5px;color:var(--mut-2);font-weight:500}
.navbreak i{font-style:normal}
.navbreak b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
/* Statistieken seizoen-dashboard (v62) */
/* 1.244 (Bens redesign, variant A): de segmented control is geen "lange knop met 2 opties" meer —
   de container verliest zijn vlak/rand, de knoppen erin zijn losse .btn-achtige rechthoeken
   (actief = gevuld teal met --on-water, zoals .btn.pri) */
.statseg{display:inline-flex;gap:8px;flex-wrap:wrap}
.statseg button{border:1.5px solid var(--line-2);background:var(--field);border-radius:11px;padding:8px 14px;font-size:13px;font-weight:700;color:var(--ink-2);cursor:pointer;font-family:inherit;line-height:1;display:inline-flex;align-items:center;box-shadow:var(--raise);transition:all .14s var(--ease)}
.statseg button:not(.on):hover{border-color:var(--water);color:var(--water-deep)}
.statseg button.on{background:var(--water-deep);border-color:transparent;color:var(--on-water);box-shadow:var(--raise-2)}
.statseg button:active{transform:translateY(1px);box-shadow:var(--press)}
/* test-kiezer: tab per test (Lactaattest · 400+200 · Test 30′) + pane */
.testtabs{margin:14px 0 0}
.statseg .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--water-deep);margin-left:7px;vertical-align:middle}
.statseg button.on .dot{background:var(--on-water)}
.tabpane{border:1px solid var(--line);border-radius:12px;background:var(--card-2);padding:16px;margin-top:10px;display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.tabpane .tpmain{flex:1 1 320px;min-width:0}
.tabpane .tpcpl{flex:0 1 300px;margin-left:auto}
.tabpane .gf{display:flex;gap:14px;flex-wrap:wrap}
.tabpane .fld{display:flex;flex-direction:column;gap:5px}
.tabpane .fld small{font-size:11px;color:var(--mut);font-weight:700}
.tabpane .fld input{width:150px;max-width:100%}
.tabpane .panehint{font-size:12.5px;color:var(--ink-2);margin:0 0 12px;line-height:1.55}
.tabpane .adv{margin:14px 0 0;border-top:1px solid var(--line);padding-top:10px}
.tabpane .adv summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--mut);list-style:none;display:flex;align-items:center;gap:6px;user-select:none}
.tabpane .adv summary::-webkit-details-marker{display:none}
.tabpane .adv summary::before{content:"⚙";font-size:12px}
.tabpane .adv[open] summary{margin-bottom:10px}
.tabpane .adv .fld{max-width:280px}
/* instellingen-rework: sectiekopjes, dichtgeklapt Geavanceerd, genummerd Beheer */
.advbox{grid-column:1/-1;background:var(--glass-card);border:1px solid var(--line);border-radius:var(--r)}
.advsum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 20px}
.advsum::-webkit-details-marker{display:none}
.advsum-ic{width:30px;height:30px;border-radius:9px;background:var(--card-2);color:var(--mut);display:flex;align-items:center;justify-content:center;flex:none}
.advsum-ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.advsum-t{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.advsum-s{display:block;font-size:11.5px;color:var(--mut);margin-top:2px}
.advsum-chev{width:20px;height:20px;margin-left:auto;stroke:var(--mut-2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--ease)}
.advbox[open] .advsum-chev{transform:rotate(90deg)}
.advbox[open] .advsum{border-bottom:1px solid var(--line)}
.advbox .grid2{padding:14px 20px 20px}
.stat .ksub{font-size:11.5px;color:var(--mut-2);font-weight:500;margin-top:3px}
.scurve{position:relative;display:flex;align-items:flex-end;gap:3px;height:140px;margin-top:8px;transition:height .25s var(--ease)}
.scurve .col{flex:1;position:relative;height:100%;display:flex;justify-content:center;min-width:5px}
.scurve .pl{position:absolute;bottom:0;width:100%;background:var(--line-2);border-radius:3px 3px 0 0}
.scurve .ac{position:absolute;bottom:0;width:60%;background:var(--water);border-radius:3px 3px 0 0}
/* Gevoel-strook ín de volumecurve-kaart: zelfde flex-cellen als de kolommen, dus ze lijnt uit en zoomt mee.
   Waarde = DEKKING van een volle cel, niet hoogte — een volle staaf hierboven is km, een wash hier is gevoel,
   dus var(--water) blijft ondubbelzinnig ook al staat het tien pixels lager. Tint = die van evoFeelSVG
   (--water = forme, --accent = séance); vaste grid-rijen zodat séance in dezelfde rij blijft als forme ontbreekt.
   Dekking werkt in beide thema's zonder eigen tokens: ze composit tegen --card. */
/* 74 en niet 34: een groepsgemiddelde beweegt ~1,5 punt; zelfs op de gecropte 2,5–4,5-as (sfAxis, 1.305)
   was dat op 34 px nauwelijks beter dan de dekkings-strook die dit verving. */
.scurve.sfeelb{height:74px;margin-top:16px;align-items:stretch}
/* De strook is een EIGEN baan met een eigen as (0–5), pal onder een as in km. Zonder scheiding lezen de
   vier labels in de linkergoot (57,9 km · 28,9 km · 5,0 · 2,5) als één gebroken as — precies de verwarring
   die de oude strook wél vermeed door helemaal geen as te hebben. Stippellijn + een ruimere marge zetten
   de baan apart zónder een gevuld vlak: op --card-2 zakt --accent-deep naar 2,98:1 en dat haalt de 3:1
   voor een betekenisdragende lijn nét niet (nagerekend) — vandaar een lijn en geen tint. */
.scurve.sfeelb .syg{border-top-style:dotted}
/* display:grid én grid-template-columns:1fr zijn allebei DRAGEND — geen van beide is optioneel.
   .scurve .col erft justify-content:center; zonder expliciete kolom belandt de <i> in een impliciete
   auto-track, en een lege <i> heeft geen intrinsieke breedte → track = 0 → de strook is 0 px breed en
   dus ONZICHTBAAR, terwijl kleur, dekking en hoogte allemaal kloppen. Zet je display terug op flex, dan
   zijn de grid-properties inert en is een lege <i> zonder flex-grow wéér 0 px: zelfde symptoom, andere
   oorzaak. 1fr is de robuuste keuze omdat de track dan al bij track-sizing vastligt, vóór er ook maar
   iets uitgelijnd wordt. (Raak .scurve .col zelf niet aan: die center is dragend voor de volumecurve —
   .scurve .ac is position:absolute;width:60% zónder left, dus zijn statische positie centreert hem.)
   jsdom heeft geen layout-engine, dus geen enkele DOM-assertie ziet dit; de wacht staat in smoke.test.js. */
/* De lijn ligt ABSOLUUT over de strook (.scurve is position:relative). Zonder dat wordt de <svg> een
   flex-ITEM tussen de tooltip-kolommen: een SVG zonder intrinsieke maat krijgt dan de CSS-default 300×150
   en duwt de hele strook uit vorm — terwijl viewBox, punten en kleur kloppen. pointer-events:none is
   dragend: de tik moet bij de .col eronder aankomen, anders is statsTip dood op de iPad. */
.sfsvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
/* preserveAspectRatio="none" rekt de viewBox uit tot de (zoombare) breedte — en zou de lijndikte mee
   uitrekken tot een balk bij 8×. vector-effect houdt ze op 2,2 px, ongeacht de schaal. */
.sfsvg polyline,.sfspark polyline{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sfsvg line,.sfspark line{stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sfsvg .g{stroke:var(--water)}
.sfsvg .b{stroke:var(--accent-deep)}
.sfspark .g{stroke:var(--water)}
.sfspark .b{stroke:var(--accent-deep)}
/* — gevoel-kaart (1.304) — */
.sfsec .sfkpis{display:flex;gap:10px;flex-wrap:wrap;margin-top:9px}
/* Sectie ín de weeksamenvatting-kaart (niet meer een eigen kaart) — zelfde 15px-cadans als .attwksec. */
.sfsec{margin-top:15px}
/* --line-2 en niet --line: deze tegels staan sinds ronde 6 óp een kaart i.p.v. een eigen kaart te zíjn,
   en tegen dat vlak viel de lichtste hairline weg (Bens vraag: "de randen mogen iets duidelijker"). */
.sfsec .sfk{flex:1;min-width:168px;border:1px solid var(--line-2);border-radius:12px;padding:10px 12px}
.sfsec .sfkt{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.sfsec .sfkv{display:flex;align-items:center;gap:8px;margin:4px 0 7px}
.sfsec .sfkv b{font-size:26px;font-weight:800;line-height:1;color:var(--ink)}
.sfsec .sfkv em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--mut)}
.sfsec .sfkv svg{flex:none}
.sfspark{display:block;width:100%;height:34px;overflow:visible}
/* --warn hoort op --accent-soft (zie de Conventies-regel: elke semantische tint op zijn EIGEN vlak;
   --warn-soft heeft geen enkele consumer en die verkeerde paring wás de bug van 1.212). */
.sfsec .sfwarn{margin-top:10px;padding:8px 10px;border-radius:9px;background:var(--accent-soft);color:var(--warn);font-size:12px;font-weight:600;line-height:1.45}
/* AI-lezing van de week: eigen kaart (Bens vraag), dus gewone kaart-inkt op --card — geen alarmvlak.
   Proza, dus regelhoogte 1,55 en geen 600-gewicht zoals de compacte waarschuwing hierboven. */
.aicard .aitxt{margin:0 0 11px;font-size:13px;line-height:1.55;color:var(--ink-2);white-space:pre-wrap}
.aicard .aitxt.muted{color:var(--mut)}
.sfsec .sfsub{display:block;margin-top:3px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut-2)}
/* Markering «hier staat de gekozen week» in de seizoens-sparkline. Moet ná `.sfspark line` staan én een
   klasse dragen: die regel zet stroke-width:5 + linecap round voor de losse datapunt-dots. */
.sfspark .sfnow{stroke:var(--mut-2);stroke-width:1.5;stroke-linecap:butt;stroke-dasharray:2 2;vector-effect:non-scaling-stroke}
/* Legende-sleutel: drie stappen vanaf de 0,30-vloer, zelfde primitief (dekking) als de strook zelf. */
.scurve .syg{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--line-2);pointer-events:none;z-index:1}
.scurve .syg i{position:absolute;left:0;top:2px;font-style:normal;font-size:10px;font-weight:600;color:var(--mut);background:var(--card);padding:0 4px;border-radius:4px;line-height:1.5}
.scurve .syg.up i{top:auto;bottom:2px}   /* label bóven de lijn — voor de onderste as-lijn van de vorm/beleving-strook (eronder = de weeknummer-as) */
.swkax{display:flex;gap:3px;margin-top:4px}
.swkax span{flex:1;min-width:5px;text-align:center;font-size:10px;font-weight:600;color:var(--mut);white-space:nowrap}
/* Zoom + tik-tooltip op de stats-grafieken (1.145) */
.szc{overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}  /* pinch komt bij ons, 1-vinger-scroll blijft native */
.szin{min-width:100%}
.scurve .col{cursor:pointer}
.szbtns{margin-left:auto;display:inline-flex;gap:5px}
.szbtns button{width:28px;height:24px;border:1.5px solid var(--line-2);background:var(--card);color:var(--mut);border-radius:7px;font-size:14px;font-weight:700;line-height:1;cursor:pointer;padding:0}
.szbtns button:active{background:var(--field)}
#stattip{position:fixed;z-index:300;display:none;background:var(--card);color:var(--ink);border:1.5px solid var(--line-2);border-radius:9px;padding:7px 11px;font-size:12px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.2);max-width:300px;pointer-events:none}
.sphz{display:flex;gap:3px;margin-top:8px}
.sphz .pseg em{display:block;font-size:10.5px;font-weight:700;color:var(--mut);font-style:normal;text-align:center;padding-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sphz .pseg span{display:block;height:6px;border-radius:3px}
.spol{display:flex;height:26px;border-radius:7px;overflow:hidden;margin:8px 0 6px}
.spol div{height:100%}
.stech{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:4px}
.stech .c{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mut);font-weight:600}
.stech .c b{width:12px;height:12px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(16,40,55,.12)}
.stech .c strong{color:var(--ink);font-family:'JetBrains Mono',monospace;font-weight:700}
.attrow{display:flex;align-items:center;gap:12px;padding:5px 0;font-size:13.5px}
.attrow>span:first-child{flex:0 0 180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attrow .attbar{flex:1;height:6px;border-radius:3px;background:var(--field);overflow:hidden}
.attrow .attbar i{display:block;height:100%;border-radius:3px;background:var(--accent,#0f766e)}
.attrow b.mono{min-width:44px;text-align:right}
.attmo{margin-bottom:14px}
.attrow.mo>span:first-child{flex:0 0 64px}
.attrow.mo.tot{font-weight:700;border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:5px}
/* Subgroepen op het zwemmers-bord (1.149): sectiekopjes per subgroep + ⚙-knop in de kolomkop */
.swsubh{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);padding:9px 2px 3px;border-bottom:1px solid var(--line);margin-bottom:3px}
.swsubh b{color:var(--mut-2);font-weight:700}
.swcolh .swsubbtn{margin-left:auto;float:right}
/* Stats-aanwezigheden: periode-keuze + tikbare maandrijen met per-zwemmer-detail (1.147) */
.attctl{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:8px 0 10px}
.attctl input[type=date]{padding:5px 8px;font-size:12.5px;height:calc(1lh + 13px)} /* eigen chrome (2×5 + 2×1,5) — houdt deze compacte variant compact ondanks de globale date-hoogte */
.attdates{display:inline-flex;gap:6px;align-items:center;color:var(--mut);font-size:12px}
.attper .attrow.mo{cursor:pointer}
.attper .attrow.mo.tot{cursor:default}   /* Totaal-rij houdt .mo voor de opmaak, maar heeft sinds Taak 4 geen tik-handler meer */
.attper .attrow.mo>span:first-child{flex:0 0 96px}
.attper .attcar{font-style:normal;color:var(--mut-2);font-size:10px}
.attper .attdet{margin:2px 0 10px 10px;padding-left:12px;border-left:2px solid var(--line)}
.attper .attthr{display:flex;align-items:center;gap:8px;margin:10px 0 8px}
.attper .attthr label{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--mut)}
.attper .attthr input{width:62px;padding:5px 8px;font-size:13px;font-weight:700}
.attper .attok{padding:12px 2px;font-size:13px;font-weight:600;color:var(--chr-ok)}
.attper .attrest{margin-top:6px}
.attper .attrest summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--mut);padding:7px 2px;list-style:none}
.attper .attrest summary::-webkit-details-marker{display:none}
.attper .attrest summary::before{content:'▸ ';font-size:10px}
.attper .attrest[open] summary::before{content:'▾ '}
.attper .attmonths{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
/* fase 4 — evolutie: twee panelen (prestatie + gevoel) + ruwe-tijd-chips */
.evopanel{margin-bottom:14px}
.evoscope{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:0 0 14px}
.evohd{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:15px;color:var(--ink);margin:2px 0}
.evohd .muted{font-weight:500;font-size:12.5px}
.evolegend{margin-left:auto;font-size:12px;color:var(--ink-2);font-weight:600;white-space:nowrap}
.evodot{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin:0 4px 0 10px}
.evosep{border:0;border-top:1px solid var(--line);margin:16px 0 10px}
.evochart{width:100%;height:auto;margin:4px 0 0;overflow:visible;display:block}
.evochart .evogrid{stroke:var(--line)}
.evochart .evozero{stroke:var(--ink-2);stroke-dasharray:2 3;opacity:.55}
.evochart .evoax{font-family:'JetBrains Mono',monospace;font-size:10.5px;fill:var(--mut)}
.evochart .evoax.b{fill:var(--ink-2);font-weight:700}
.evochart .evoword{font-size:10px;fill:var(--mut);font-weight:700}
.evochart .evotrend{stroke:var(--water);stroke-width:2;stroke-dasharray:6 5;opacity:.6}
.evochart .evo-g,.evochart .evo-s{stroke-width:2.5;opacity:.92}
.evoempty{padding:26px 20px;text-align:center;color:var(--mut)}
.zdetail .evoempty{color:var(--mut)}
.evogroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(188px,1fr));gap:8px 26px;margin-top:6px}
.evogrouphd{font-weight:700;color:var(--ink-2);font-size:13px;padding-bottom:5px;border-bottom:1px solid var(--line);margin-bottom:2px}
.evogrouphd small{font-weight:500;color:var(--mut);margin-left:1px}
.evotrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:3px 0}
.evotdate{color:var(--mut);font-size:12px}
.evotval{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ink);font-weight:600;white-space:nowrap}
.evotval.best{color:var(--sig-deep)}
.evotn{font-style:normal;font-size:10px;color:var(--mut);margin-left:4px}
table.t{width:100%;border-collapse:collapse;font-size:12.5px}
table.t th{background:var(--bg-2);color:var(--mut);font-weight:800;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;padding:8px 11px;border-bottom:1px solid var(--line);text-align:left}
table.t td{padding:8px 11px;border-bottom:1px solid var(--line)}
table.t tr:last-child td{border-bottom:none}
table.t tbody tr:hover td{background:var(--card-2)}
.imptable{width:100%;border-collapse:collapse;font-size:12px}
.imptable th{background:var(--bg-2);color:var(--mut);font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:.04em;padding:7px 9px;text-align:left;border-bottom:1px solid var(--line)}
.imptable td{padding:6px 9px;border-bottom:1px solid var(--line)}
.imptable tr.bad td{background:var(--err-soft)}
.imptable tr.ok td{background:var(--ok-soft)}
.statusdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.statusdot.ok{background:var(--ok)} .statusdot.bad{background:var(--err)}
.scrim{position:fixed;inset:0;background:rgba(8,22,35,.55);backdrop-filter:blur(3px);z-index:150;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s var(--ease)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--card);border-radius:var(--r-lg);max-width:680px;width:100%;max-height:88vh;overflow:auto;box-shadow:var(--sh-3);animation:popIn .26s var(--ease) both}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal .mh{background:var(--tile-2);color:#fff;padding:20px 24px;display:flex;align-items:center;gap:14px;position:sticky;top:0}
.modal .mh .mi{width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:none}
.modal .mh h2{font-size:23px;text-transform:uppercase}
.modal .mh .ms{font-size:12.5px;color:#bcd7e2}
.modal .mb{padding:22px 24px}
.blkrow{display:flex;gap:6px;align-items:center;padding:4px 0}
.blkins{flex:1;text-align:left;display:flex;flex-direction:column;gap:2px;background:none;border:1px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer}
.helpgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 6px}
@media(max-width:620px){.helpgrid{grid-template-columns:1fr}}
.helpitem{border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:var(--card-2)}
.helpitem .ht{font-weight:800;font-size:12.5px;margin-bottom:3px;display:flex;align-items:center;gap:7px}
.helpitem .hd{font-size:11.5px;color:var(--mut);line-height:1.55}
.zlegend{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0}
/* block (geen flex-column): als scroll-container met flex-direction:column zouden de lanes
   flex-items zijn met flex-shrink:1; bij een training langer dan het scherm drukken ze plat
   en kapt .plane's overflow:hidden de inhoud af (lege/afgekapte blokken). Block stapelt
   gewoon en laat de inhoud op natuurlijke hoogte scrollen. */
#present{position:fixed;inset:0;background:var(--pr-bg);color:var(--pr-ink);z-index:100;display:none;padding:max(20px,env(safe-area-inset-top)) 34px 72px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#present.on{display:block}
/* Zwemmer-detail = ingebedde pagina in #main (rail blijft). Breed = lijst + detail; smal = detail schermbreed. */
.zsplit{display:grid;grid-template-columns:minmax(230px,290px) minmax(0,1fr);gap:22px;align-items:start}
.zsplit .zlist{position:sticky;top:8px;max-height:calc(100vh - 40px);overflow:auto;display:flex;flex-direction:column;gap:2px;padding-right:2px}
.zsplit .zlist .zlgrp{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mut-2);margin:14px 2px 5px}
.zsplit .zlist .zlgrp:first-child{margin-top:2px}
.zsplit .zdetail{min-width:0}
/* Breed scherm mét muis (pc) = lijst + detail (B). iPad/iPhone (aanraking) of smal venster = detail schermbreed met « terug » (A). */
@media(max-width:1000px),(pointer:coarse){.zsplit{grid-template-columns:1fr;gap:0}.zsplit .zlist{display:none}}
.zdback{border:0;background:none;color:var(--water-deep);font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;padding:4px 2px;margin-bottom:8px;display:inline-flex;align-items:center;gap:5px;border-radius:8px}
.zdback:hover{color:var(--water)}
:root[data-theme="dark"] .zdback{color:var(--water-2)}
#zwadd,#zwrename{position:fixed;inset:0;background:var(--pr-bg);color:var(--pr-ink);z-index:100;display:none;padding:max(20px,env(safe-area-inset-top)) clamp(14px,4vw,40px) 60px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#zwadd.on,#zwrename.on{display:block}
#onboard{position:fixed;inset:0;background:var(--pr-bg);color:var(--pr-ink);z-index:95;display:none;padding:max(20px,env(safe-area-inset-top)) clamp(14px,4vw,40px) 60px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#onboard.on{display:block}
.obwrap{max-width:660px;margin:0 auto}
.obdots{display:flex;gap:8px;margin:10px 0 22px}
.obdots span{flex:1;height:5px;border-radius:3px;background:var(--line-2,var(--line))}
.obdots span.on{background:var(--water-deep,#0e7c86)}
.obhead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.obx{background:none;border:0;font-size:26px;color:var(--mut);cursor:pointer;padding:4px 10px}
.obbtns{display:flex;gap:10px;justify-content:flex-end;margin-top:26px}
.oblist{margin:12px 0;display:flex;flex-direction:column;gap:8px}
.oblist .obrow{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.zawrap{max-width:640px;margin:0 auto}
.zdwrap{min-width:0}
.zdgrid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start;margin-top:16px}
.zdcol{display:flex;flex-direction:column;gap:16px;min-width:0}
.zdcol>*{margin:0}
.zdhead{display:flex;align-items:center;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.zdhead .swav{width:46px;height:46px;font-size:17px}
.zdid{flex:1;min-width:120px;display:flex;flex-direction:column}
.zdid b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:21px;line-height:1.15;letter-spacing:-.01em}
.zdid span{align-self:flex-start;font-size:12px;font-weight:700;color:var(--water-deep);background:var(--water-soft);border-radius:999px;padding:3px 11px;margin-top:5px;opacity:1}
:root[data-theme="dark"] .zdid span{color:var(--water-2)}
.zdkpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:0}
.zdkpi>div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 15px;box-shadow:var(--sh-1)}
.zdkpi i{display:block;font-size:11px;opacity:1;color:var(--mut);font-style:normal;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.zdkpi b{font-size:19px;font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.zdactions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:6px;min-height:1px}
.zdcoupling{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.zdcplhead{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;opacity:.85}
.zdcplhead b{font-size:15px;opacity:1;color:var(--water-deep)}
.zdcoupling input[type=range]{width:100%;accent-color:var(--water-deep)}
.zdcplhint{font-size:11.5px;color:var(--mut)}
.cplbar{height:8px;border-radius:99px;background:var(--bg-2);overflow:hidden}
.cplbar>i{display:block;height:100%;background:var(--water-deep);border-radius:99px}
/* Identiteitskaart op de Aperçu-tab + (fase 2) de invullijst. VAST 3 kolommen (Ben 21/7):
   met de oude flex-basis vulden de eerste 5 velden één rij en rekte het 6de (eigen stijl) over de
   volle breedte — een grid legt elk veld in zijn kolom, ongeacht hoeveel er op de rij passen.
   Op telefoonbreedte 2 kolommen (= wat die flex-basis van 150px daar al deed).
   ⚠️ .metarow is nog wél flex: een kale grid-template daarop is een no-op. */
.idcard{margin-bottom:14px}
.idgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;align-items:start}
@media(max-width:600px){.idgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.idf{display:flex;flex-direction:column;min-width:0}
.idf small{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin-bottom:5px}
.idin{width:100%}
.idin.idmiss{border-color:var(--accent-deep)}
.idin.idbad{border-color:var(--err)}
.idflag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--warn);background:var(--accent-soft);border-radius:9px;padding:2px 7px;vertical-align:middle}
.idflag.ok{color:var(--ok);background:var(--ok-soft)}
.idhint{font-size:11.5px;color:var(--mut);margin:10px 0 0}
/* Invullijst per groep (fase 2). De TABEL is een pc/iPad-scherm; op een telefoon toont dezelfde tab
   een tiklijst die het detailscherm opent (Bens keuze 20/7: geen tweede invulformulier op iPhone).
   Beide kopieën staan altijd in de DOM en de media-query kiest er één — zelfde patroon als de rail.
   Poort op BREEDTE, niet op pointer: (pointer:coarse) zou een iPad van 1366px degraderen, en dat is
   precies de term die in 1.280 uit de rail is gehaald. */
.idlseg{margin-bottom:12px}
.idlbar{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
.idlbar .cnt{font-size:12px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.idlbar .tr{flex:1;height:7px;border-radius:5px;background:var(--line);overflow:hidden}
.idlbar .tr .fl{height:100%;border-radius:5px;background:var(--water)}
/* scroll op een KAARTBREDE wrapper, niet op de grid — overflow op de grid klipt de laatste kolom (les 1.293) */
.idlwrap{overflow-x:auto}
.idltbl{display:grid;grid-template-columns:minmax(150px,1.4fr) 148px 92px minmax(120px,1fr) minmax(170px,1.3fr)}
.idlhead,.idlrow{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;padding:7px 4px;border-bottom:1px solid var(--line)}
.idlhead{border-bottom:1px solid var(--line-2)}
.idlhead b{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}
.idlrow:last-child{border-bottom:0}
.idlnm{display:flex;align-items:center;gap:7px;min-width:0}
.idlnm .n{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idlrow .idin{width:100%;min-width:0}
.idlfoot{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.idlfoot .dirty{font-size:12px;color:var(--mut)}
.idtap{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;border:0;
  border-bottom:1px solid var(--line);padding:11px 2px;cursor:pointer;min-height:52px;color:var(--ink)}
.idtap:last-child{border-bottom:0}
.idtap .tn{flex:1;min-width:0}
.idtap .tn b{display:block;font-size:13.5px;font-weight:600}
/* --warn op --card haalt hier toevallig ook al AA (6,43 licht/7,69 donker, nagerekend in
   smoke.test.js), maar is de VERKEERDE familie: kale tekst op --card hoort bij --chr-ok/--chr-mid/
   --chr-bad, --warn hoort bij --accent-soft. --chr-mid op --card: 4,75 licht / 6,41 donker — allebei
   ≥4,5:1, dus dat token staat hier. */
.idtap .tn i{display:block;font-style:normal;font-size:11px;color:var(--chr-mid);margin-top:2px}
.idtap .tc{color:var(--mut-2);font-size:17px}
.idtaps{display:none}
@media(max-width:1000px){ .idlonly{display:none} .idtaps{display:block} }
/* Hernoem-scherm (fase 3): zeldzaam en onomkeerbaar, dus in het ⋯-menu, niet op de gegevenskaart. */
.rnbox{max-width:420px;margin:0 auto}
.rnold{font-size:12px;color:var(--mut);margin:10px 0 14px}
.rnold b{color:var(--ink-2)}
.rnwhat{font-size:11.5px;color:var(--mut);background:var(--card-2);border-radius:10px;padding:9px 11px;margin:12px 0 14px;line-height:1.55}
.rnerr{font-size:12px;color:var(--err);background:var(--err-soft);border-radius:9px;padding:7px 10px;margin:10px 0 0}
.rnrow{display:flex;gap:8px;margin-top:14px}
#present .ph{display:flex;align-items:baseline;gap:18px;border-bottom:3px solid var(--pr-accent);padding-bottom:14px;margin-bottom:20px}
#present .ph h2{font-size:clamp(26px,4vw,46px);font-weight:700;text-transform:uppercase}
#present .ph .m{font-size:clamp(13px,1.6vw,18px);color:var(--pr-mut)}
#present .plane{display:grid;grid-template-columns:clamp(94px,10.5vw,136px) 1fr;border-radius:14px;overflow:hidden;margin-bottom:11px;background:var(--pr-surface)} /* breed genoeg voor JAMBES/RÉCUP zonder woordbreuk */
#present .plane.grp{margin-left:clamp(22px,3vw,46px)} /* geneste set: inspringen zoals .setlane.grp in de weekeditor */
#present .plane .pzone{display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(15px,1.9vw,24px);letter-spacing:.02em;text-align:center;line-height:1.05;padding:8px 6px;word-break:break-word}
#present .plane .pb{padding:13px 24px;display:flex;align-items:baseline;gap:10px 26px;flex-wrap:wrap}
#present .plane .pright{margin-left:auto;display:flex;align-items:baseline;gap:14px;flex-wrap:nowrap;flex-shrink:0}
#present .plane .ptot{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:clamp(14px,1.7vw,19px);color:var(--pr-mut);white-space:nowrap}
#present .plane .pclock{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:clamp(14px,1.7vw,19px);color:var(--pr-ink);white-space:nowrap}
#present .pw{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(22px,3vw,38px);font-weight:700;min-width:200px}
#present .pw .x{opacity:.55;font-weight:500}
#present .pi{font-family:'JetBrains Mono',monospace;font-size:clamp(22px,3vw,38px);font-weight:700;color:var(--pr-accent)}
/* techniek-cue op een EIGEN volle regel rond de setlijn (Bens vraag 3/7 — niet ernaast persen) */
#present .pd{font-size:clamp(14px,1.8vw,19px);color:var(--pr-mut);flex-basis:100%;min-width:0}
#present .pgrp{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(18px,2.4vw,29px);font-weight:700;text-transform:uppercase;color:var(--pr-accent);margin:16px 0 9px}
#present .pclose{position:fixed;top:max(14px,env(safe-area-inset-top));right:18px;background:var(--pr-surface-2);border:none;color:var(--pr-ink);border-radius:11px;padding:10px 17px;font-weight:700;font-size:14px;box-shadow:var(--raise);transition:transform .12s ease,box-shadow .12s ease}
#present .pbtns{position:fixed;top:max(14px,env(safe-area-inset-top));right:18px;display:flex;gap:10px;z-index:5} /* Présences + fermer samen rechtsboven (zoals de knoppenrij in het weekscherm), niet meer óp de datum */
#present .pbtns .pclose{position:static}
/* uitgelijnde tabel (1.049): naam · richttijd · sendoff · gezwommen tijd staan netjes ONDER ELKAAR uit —
   elk blok is een 4-koloms grid met max-content-kolommen (cijfers op één lijn; nowrap → nooit afgekapt).
   .ptg is een flex-rij van 1-2 blokken: passen 2 blokken naast elkaar → twee kolommen zwemmers; te smal
   (telefoon) → ze wrappen onder elkaar. Max 2 blokken (~8 rijen elk) zodat de lijst niet superlang wordt.
   dense/xdense (op aantal) verkleint font + kolomgaten. */
#present .ptg{display:flex;flex-wrap:wrap;align-items:start;justify-content:start;column-gap:2.6em;row-gap:.3em;font-size:clamp(16px,2vw,24px);color:var(--pr-mut-2);width:100%;margin-top:8px}
#present .ptgcol{display:grid;grid-template-columns:max-content max-content max-content max-content;column-gap:1.2em;row-gap:.22em}
#present .ptg.dense{font-size:clamp(14px,1.7vw,20px)}
#present .ptg.dense .ptgcol{column-gap:.95em}
#present .ptg.xdense{font-size:clamp(12.5px,1.4vw,17px)}
#present .ptg.xdense .ptgcol{column-gap:.72em}
#present .ptg .pn{white-space:nowrap;align-self:center}
#present .ptg b,#present .ptg .pso{font-family:'JetBrains Mono',monospace;font-size:1.3em;white-space:nowrap;text-align:right;align-self:center}
#present .ptg .pt{color:var(--pr-ink)}
#present .ptg .prec{font-weight:800}
#present .ptg .pso{color:var(--pr-sendoff);font-weight:700}
.spin{width:22px;height:22px;border:2.5px solid var(--line);border-top-color:var(--water);border-radius:50%;animation:sp .8s linear infinite;display:inline-block;vertical-align:middle}
@keyframes sp{to{transform:rotate(360deg)}}
@media(max-width:1000px){
  nav{flex-direction:row;width:100%;height:calc(68px + env(safe-area-inset-bottom));inset:auto 0 0 0;padding:0 4px env(safe-area-inset-bottom);align-items:stretch;justify-content:flex-start;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;box-shadow:0 -6px 24px rgba(10,34,54,.20)} /* padding-bottom = home-indicator; overscroll-behavior stopt de horizontale rubber-band die de vaste balk deed springen */
  nav::-webkit-scrollbar{display:none}
  nav .logo,nav .brand,nav .sp{display:none}
  nav a,nav .navx{margin:3px 0;flex:1 1 0;min-width:0;justify-content:center;padding:7px 5px;font-size:9.5px;border-radius:12px;white-space:nowrap;overflow:hidden} /* overflow:hidden (1.254): een te lang label mag nooit over de buurknop schilderen; a.on::before is hier toch display:none */
  nav>a,nav>.navx{font-size:0;gap:0} /* labels verborgen: icoon-only onderbalk (Ben 18/7) → alle tabs passen als icoon; de naam verschijnt bij de tik als popup (#navtip). Enkel de balk-tabs (>a), niet de popover-labels (.navmore .mi) */
  nav a.on::before{display:none}
  main{margin:0 0 calc(82px + env(safe-area-inset-bottom)) 0}
}
@media(max-width:1024px){ /* t/m iPad-portret (spec 2026-07-18): week = de week, training = eigen scherm */
  .weekbar .wkbrk{display:block;width:100%;height:0}
  .weekbar .pill.hero{flex:1 1 auto;justify-content:center;white-space:nowrap} /* 19/7: hero-pil rekt uit tot een volle regel naast het bad-chip */
  .viewtitle .seasoncfg{order:98} /* 19/7 r3 (Ben): ⚙ als 2e — na de statuspil, weg van de schermrand (paneel-klem = smenuClamp) */
  .daycell.today{outline:2px solid var(--sig);outline-offset:1px}
  .wkempty{display:none}
  .wkwrap.sess .wkonly{display:none}
  .wkwrap.dry .wkonly{display:none}
  .wkwrap.sess .sessc{display:block}
  .wkwrap.sess .sessedcard{display:none}
  .wkwrap.sess.edit .sessedcard{display:block}
  .wkwrap.sess .sessedcard .sedup{display:none}
}
@media(max-width:760px){
  nav a,nav .navx{padding:7px 4px;min-width:0} /* font-size niet meer nodig: de balk-labels zijn verborgen (font-size:0 hierboven) */
  main{padding:max(16px,env(safe-area-inset-top)) 13px 36px}
  .daystrip{grid-template-columns:repeat(2,1fr)}
  .viewtitle .pill,.viewtitle .btn{max-width:100%}
}
/* ── Printbare trainingsfiche (lijkt op het Excel-afdrukvoorbeeld "Fiche") ── */
#printArea{display:none}
/* Fiche — kleuren/opmaak overgenomen uit de Excel-tab Fiche (#233539 donker, #94D6E7 cyan, #D6F0F6 V4-kolom) */
.fiche-sheet{background:#fff;color:#233539;border:1px solid #cfdde4;border-radius:12px;padding:16px 18px;font-variant-numeric:tabular-nums;page:fiche}
.fiche-sheet *{box-sizing:border-box}
.fiche-hd{display:flex;gap:26px;flex-wrap:wrap;font-size:13px;color:#233539;margin-bottom:10px}
.fiche-hd b{font-weight:800}
.fiche-warn{background:#fde7e9;color:#9c0006;border:1px solid #f0b6bc;border-radius:8px;padding:6px 11px;font-size:12px;font-weight:800;margin-bottom:10px}
/* Ontbrekende eigen-slagmeting (1.316): geen fout maar een ontbrekend gegeven → de amber-chip van de
   app (#8a4b12 op #FCEBD7 = 5,82:1), niet het rood van .fiche-warn. Vaste hex zoals de rest van het
   fiche-vel: dat is een printbaar blad met een eigen palet, geen thema-vlak. */
.fiche-nospe{background:#FCEBD7;color:#8a4b12;border:1px solid #f0d6b6;border-radius:8px;padding:6px 11px;font-size:12px;font-weight:800;margin:0 0 10px}
.fiche-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:720px){.fiche-cols{grid-template-columns:1fr}}
.fiche-tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}  /* nowrap-cellen > telefoonkaart; pagina-scroll is dicht (overflow-x:clip) → eigen scroller per tabel */
.fiche-tbl{width:100%;border-collapse:collapse;font-size:12px;font-family:'JetBrains Mono',monospace}
.fiche-tbl th,.fiche-tbl td{border:1px solid #cfdde4;padding:4px 6px;text-align:center;white-space:nowrap;color:#233539}
.fiche-tbl .fsec{background:#233539;color:#fff;font-weight:800;font-size:12.5px;border-color:#233539;letter-spacing:.01em}
.fiche-tbl thead tr:nth-child(2) th{background:#94d6e7;color:#233539;font-weight:800;font-size:11px}
.fiche-tbl td.fl,.fiche-tbl th.fl{text-align:left;background:#eaf3f6;font-weight:700;font-family:inherit}
.fiche-tbl td.v4{background:#d6f0f6;font-weight:800}
.fiche-logo-wrap{text-align:center;margin-top:16px}
.fiche-logo{width:115px;max-width:28%;height:auto}
.fiche-foot{text-align:center;font-size:11px;color:#5a7283;margin-top:6px;letter-spacing:.03em}
@page fiche{size:A4 landscape;margin:11mm}

@media print{
  :root,:root[data-theme="dark"]{--bg:#fff;--bg-2:#fff;--card:#fff;--card-2:#fff;--field:#fff;--ink:#102430;--ink-2:#2B4150;--mut:#5E7482;--line:#DCE7EC;--line-2:#BCCDD6}
  nav,.weekbar .btn,.toolbar,.editor-wrap>div:first-child,.btn{display:none!important}
  main{margin:0;padding:0}
  body{background:var(--field)}
  body::before,body::after,html::before{display:none} /* waterlagen (1.248) niet op papier */
  .card{box-shadow:none;border-color:#ccc;break-inside:avoid}
  .zoneblock,.plane .pzone{border:1px solid rgba(0,0,0,.28);font-weight:800;-webkit-print-color-adjust:exact;print-color-adjust:exact} /* pastel-zones vervagen op papier → randje + vetter */
  #printArea{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .no-print{display:none!important}
  /* fiche-modus: druk enkel de gekozen fiche af (liggend) */
  body.print-fiche #app,body.print-fiche #present{display:none!important}
  body.print-fiche #printArea{display:block!important}
  body.print-fiche .fiche-sheet{border:none;border-radius:0;padding:0}
  .fiche-nospe{display:none!important}   /* trainer-melding, geen fiche-inhoud — #printArea drukt anders álles af */
  .fiche-tblwrap{overflow:visible}   /* een scroll-container klipt op papier */
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.tchip .nm{color:var(--mut);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tchip b.zw{font-family:'JetBrains Mono',monospace;color:var(--ink);font-weight:700}
.tchip .so{margin-left:6px;font-family:'JetBrains Mono',monospace;font-weight:700;color:#8a4b12;background:#FCEBD7;border:1px solid #f0c79a;padding:1px 6px;border-radius:6px;font-size:.85em}
.tlegend{font-size:10.5px;color:var(--mut);margin-right:auto;display:inline-flex;align-items:center;gap:5px}
.tlegend .zw{font-family:'JetBrains Mono',monospace;color:var(--ink);font-weight:700}
.tlegend .so{font-family:'JetBrains Mono',monospace;color:#8a4b12;background:#FCEBD7;border:1px solid #f0c79a;padding:0 5px;border-radius:5px;margin-left:4px}
.droogbox{width:100%;min-height:66px;line-height:1.5}
#present .pmetarow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
#present .pmeta{background:var(--pr-surface);border:1px solid var(--pr-border);border-radius:11px;padding:8px 15px;display:flex;flex-direction:column;gap:2px;min-width:82px}
#present .pmeta b{font-family:'JetBrains Mono',monospace;font-size:clamp(15px,1.9vw,21px);color:var(--pr-ink);font-weight:700}
#present .pmeta i{font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--pr-mut)}
#present .pdroog{background:var(--pr-surface);border:1px solid var(--pr-border);border-radius:11px;padding:13px 17px;margin-bottom:18px;color:var(--pr-ink);font-size:clamp(15px,1.9vw,22px)}
/* titel net zo prominent als een sectie-titel (.pgrp), zodat het droogblok op de beamer duidelijk leest */
#present .pdroog span{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(18px,2.4vw,29px);font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--pr-accent);margin-bottom:6px}
/* Ressenti-knop bovenaan present (naast ✕ fermer) opent het gevoel-formulier als gecentreerde popup (zwemmer, afgewerkte sessie) */
#present .pfbbtn{background:var(--pr-accent);color:var(--on-water);box-shadow:var(--raise-2);transition:transform .12s ease,box-shadow .12s ease}
#present .pfbbtn:active,#present .pclose:active{transform:translateY(1px);box-shadow:var(--press)}
#present .pfbwrap{position:fixed;inset:0;z-index:110;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(6,20,28,.45)}
#present .pfbwrap.on{display:flex}
#present .pfbcard{position:relative;width:100%;max-width:520px;max-height:86vh;overflow-y:auto}
#present .pfbcard .swfb{margin:0}
#present .pfbcard .pfbx{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:9px;background:var(--field);border:1px solid var(--line);color:var(--ink);font-size:15px;font-weight:700;cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center}
/* PRESENT-MODE OP GSM: beamer-maten (grote clamp-mins + min-widths + 34px padding) snijden af op een iPhone;
   de zwemmer opent hier zijn training, dus alles moet passen. Compacter, niks afgesneden. */
@media(max-width:600px){
  #present{padding:max(16px,env(safe-area-inset-top)) 13px 64px}
  #present .pbtns{right:12px}
  #present .ph{gap:10px;padding-bottom:10px;margin-bottom:14px;margin-top:46px} /* titel onder de vaste knoppenrij (Ressenti + fermer) i.p.v. erachter */
  #present .ph h2{font-size:21px}
  #present .pmetarow{gap:7px;margin-bottom:12px}
  #present .pmeta{min-width:0;padding:6px 11px}
  #present .pmeta b{font-size:15px}
  #present .plane{grid-template-columns:62px 1fr;margin-bottom:9px}
  #present .plane.grp{margin-left:14px}
  #present .plane .pzone{font-size:12.5px;padding:6px 3px}
  #present .plane .pb{padding:11px 13px;gap:5px 12px}
  #present .pw{font-size:20px;min-width:0}
  #present .pi{font-size:18px}
  #present .plane .pright{gap:10px}
  #present .plane .ptot,#present .plane .pclock{font-size:12.5px}
  #present .pd{font-size:13px}
  #present .pgrp{font-size:17px;margin:12px 0 7px}
  #present .ptg{font-size:13.5px;column-gap:1.4em;margin-top:6px}
  #present .ptgcol{column-gap:.8em}
  #present .ptg b,#present .ptg .pso{font-size:1.15em}
  #present .pdroog{font-size:14px;padding:11px 13px}
  #present .pdroog span{font-size:16px}
}
.swbar{margin:0 0 14px}
.swwho{display:inline-flex;align-items:center;gap:9px;font-size:15px;color:var(--ink)}
.swwho .swsub{font:800 11.5px/1 'Public Sans',system-ui,sans-serif;letter-spacing:.04em;color:var(--water-deep);background:var(--water-soft);border-radius:999px;padding:4px 9px} /* eigen subgroep-badge (teal, patroon van .swnow) */
.swpick select{font:inherit;padding:8px 30px 8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--field);color:var(--ink);margin-left:8px} /* padding-right = ruimte voor de caret (right 10px, generieke select-regel) — anders loopt de pijl over de laatste letter ("100 m") */
.swhint,.swempty{background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--mut);margin-bottom:14px}
.navro{font-weight:700;color:var(--mut);font-size:13px;padding:0 8px}
.swweek{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;margin-bottom:14px} /* auto-fill → op smalle gsm vanzelf 1 kolom */
.swday{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px}
.swday>b{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:14.5px}
.swsess{font:inherit;font-size:14px;font-weight:600;text-align:left;background:var(--card-2);border:1px solid var(--line-2);border-radius:10px;padding:8px 14px;min-height:46px;display:flex;align-items:center;gap:7px;cursor:pointer;color:var(--ink);line-height:1.2;white-space:nowrap;overflow:hidden;container-type:inline-size} /* ruime tap-doelen (≥46px) + altijd 1 lijn: nowrap, de type-tekst krimpt/ellipst mee (poolside, dikke/natte vingers) */
.swsess .swap{font-weight:800;letter-spacing:.02em;flex:none}
.swsess .swty{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:clamp(11px,9cqi,14px)} /* trainingstype schaalt met de kaartbreedte → past op 1 lijn; ellipsis pas als het écht niet kan */
.swsess.sel{border-color:var(--water-deep);background:var(--water-soft);box-shadow:inset 0 0 0 1px var(--water-deep)}
.swsess.swvac{cursor:default;opacity:.45;color:var(--mut);background:transparent;border-style:dashed} /* leeg dagdeel: gedimde placeholder die niets doet (elke dag toont altijd AM+PM) */
.swsess.swpre{color:var(--ok);border-color:var(--ok);background:var(--ok-soft)}   /* afgewerkt + aanwezig → groen */
.swsess.swabs{color:var(--err);border-color:var(--err);background:var(--err-soft)} /* afgewerkt + afwezig → rood */
.swsess.swexc{color:var(--mut)}                                                    /* afgewerkt + vrijgesteld/onbekend → neutraal grijs */
/* de losse donker-pleisters hier zijn weg sinds 1.212: --ok/--err dragen die tinten nu zelf (zie :root) */
.swday.today{border-color:var(--sig);box-shadow:inset 0 0 0 2px var(--sig)} /* vandaag = dikkere coral rand (kijk-hier-signaal), zelfde box-grootte als de andere dagen */
@media (max-width:600px){ /* iPhone: altijd 2 kolommen + de grid vult tot net boven de onderbalk-rail → grotere kaarten/knoppen, geen verspilde ruimte */
  #main:has(.swweek){padding-left:9px;padding-right:9px}
  .swweek{grid-template-columns:1fr 1fr;grid-auto-rows:1fr;min-height:calc(100dvh - 214px);gap:9px}
  .swweek .swsess{flex:1} /* AM/PM groeien mee in de hogere dagkaart */
  #main:has(.swweek) .swwho{font-size:18px;gap:11px} /* naam mee vergroten met de kaarten (evenwicht op gsm) */
  #main:has(.swweek) .swwho .swsub{font-size:13px;padding:5px 11px}
}
/* "Mijn tijden"-tab (zwemmer): schone, aparte weergave van de eigen gezwommen tijden per set (swimTimesHTML) */
.swtimes{display:flex;flex-direction:column;gap:12px}
.swtday{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.swthead{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:15px;color:var(--ink);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.swtset{padding:9px 0;border-top:1px solid var(--line)}
.swtset:first-of-type{border-top:0;padding-top:2px}
.swtlbl{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:7px}
.swtwhat{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:14px;color:var(--ink)}
.swtstroke{font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;padding:2px 8px;border-radius:6px;background:var(--tile);color:#fff}
.swtlvl{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:11px;padding:2px 8px;border-radius:6px;line-height:1.5}
.swtival{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12.5px;color:var(--mut)}
.swtgoal{font-family:'Public Sans',sans-serif;font-weight:600;font-size:12.5px;color:var(--mut);margin-left:auto;display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}
.swtgoal b{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:16px;color:var(--ink-2)}
.swtcmp{margin-left:6px;border:0;background:var(--card-2);color:var(--water);border-radius:8px;padding:2px 8px;font-size:14px;cursor:pointer}
.swtdl{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12.5px;font-variant-numeric:tabular-nums;background:var(--bg-2);padding:2px 8px;border-radius:6px;line-height:1.5}
.swtreps{display:flex;flex-direction:column;gap:5px}
.swtblks{display:flex;flex-direction:column;gap:9px}
.swtblk{display:flex;flex-direction:column;gap:5px} /* geneste set (2×(2×200)) → herhalingen per blok apart, nummering herstart */
.swtblkn{font-family:'Public Sans',sans-serif;font-weight:800;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.swtrep{align-self:flex-start;background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:5px 11px;display:flex;align-items:center;gap:9px}
.swtnr{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;border-radius:50%;background:var(--bg-2);color:var(--mut);font-size:10.5px;font-weight:700;font-family:'JetBrains Mono',monospace}
.swtt{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;color:var(--ink)}
details.swtrep{cursor:pointer}
details.swtrep>summary{list-style:none;display:flex;align-items:center;gap:9px}
details.swtrep>summary::-webkit-details-marker{display:none}
.swtchev{display:inline-flex;align-items:center;justify-content:center;width:30px;height:24px;margin-left:2px;border-radius:7px;background:var(--bg-2);color:var(--ink-2);font-size:14px;font-weight:700;line-height:1;transition:transform .18s var(--ease)}
details.swtrep[open]{flex-direction:column;align-items:flex-start;gap:6px}
details.swtrep[open] .swtchev{transform:rotate(180deg)}
.swtlaps{display:flex;flex-wrap:wrap;gap:4px 11px;padding-left:28px;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--mut);font-variant-numeric:tabular-nums}
/* trainer-detail: per-sessie inklapbare kaart (all-mode) + Tijden-tab */
details.swtday.swtdayc>summary{cursor:pointer;list-style:none;margin-bottom:0}
details.swtday.swtdayc[open]>summary{margin-bottom:8px}
details.swtday.swtdayc>summary::-webkit-details-marker{display:none}
.swtdchev{margin-left:auto;color:var(--mut);transition:transform .15s var(--ease)}
details.swtday.swtdayc[open]>summary .swtdchev{transform:rotate(180deg)}
.zdtabs{display:flex;justify-content:flex-start;margin:16px 0 14px}
.zdtimes{padding:2px}
/* Besttijden-raster (20/7) — afstand × slag, één bad tegelijk; lege cel = een echt gat, geen fout */
.btg{display:grid;grid-template-columns:56px repeat(5,minmax(0,1fr));gap:0}
.btgh{font-size:11px;color:var(--ink-2);padding:6px 3px;text-align:center;border-bottom:1px solid var(--line)}
.btgl{font-size:12px;color:var(--ink-2);padding:9px 3px;display:flex;align-items:center}
.btgc{padding:8px 3px;text-align:center;border-top:1px solid var(--line);background:none;border-left:0;border-right:0;border-bottom:0;width:100%;cursor:pointer;min-height:44px}
.btgc b{display:block;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.btgc i{display:block;font-size:10.5px;color:var(--mut-2);font-style:normal}
.btgna{font-size:14px;color:var(--mut-2)}
.btganchor{background:var(--water-soft)}
/* Celdetail (taak 12) — datum/wedstrijd/bron of het invoerformulier, onder het raster */
.btgd{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.btgdh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.btgdh span{font-size:11px;color:var(--mut)}
.btgdr{display:grid;grid-template-columns:96px 1fr;gap:8px;align-items:center;padding:5px 0;font-size:12.5px;color:var(--ink-2)}
.btgdr b{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
/* maand-groep: één inklapbare knop per maand (trainer-Tijden-tab) */
details.swtmonth{display:flex;flex-direction:column;gap:10px}
details.swtmonth>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15px;color:var(--ink);padding:7px 4px 9px;border-bottom:1.5px solid var(--line-2);text-transform:capitalize}
details.swtmonth>summary::-webkit-details-marker{display:none}
.swtmcount{margin-left:auto;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:10.5px;color:var(--mut);background:var(--bg-2);border-radius:20px;padding:1px 8px;line-height:1.7;text-transform:none}
details.swtmonth>summary .swtdchev{margin-left:0}
details.swtmonth[open]>summary .swtdchev{transform:rotate(180deg)}
/* zwemmer-"Mijn tijden": laatste training vast bovenaan (coral kader), dan het seizoen per maand */
.swtpinlbl{display:flex;align-items:center;gap:7px;font-family:'Public Sans',sans-serif;font-weight:800;font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--sig-deep);padding:2px 3px;margin-bottom:8px}
.swtpinlbl::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sig)}
.swtpin{margin-bottom:12px}
.swtpin>.swtday{border:1.5px solid var(--sig)}
.swtpin>.swtday .swthead{color:var(--sig-deep)}
.swtsep{display:flex;align-items:center;gap:9px;margin:0 2px 10px;font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--mut-2)}
.swtsep::before,.swtsep::after{content:"";height:1px;background:var(--line-2);flex:1}

/* Wedstrijden-tab (zwemmer): eigen races per meeting (swimRacesHTML) */
.swraces{display:flex;flex-direction:column;gap:12px}
.swrbar{display:flex;align-items:center;gap:8px}
.swrrefseg button{font-size:11.5px;padding:5px 10px}
.swrlbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin:6px 2px 0}
.swrmeet{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.swrhd{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.swrdd{flex:none;text-align:center;background:color-mix(in srgb,var(--ink) 7%,transparent);border-radius:9px;padding:4px 8px;min-width:40px}
.swrdd b{display:block;font-size:18px;line-height:1.05;font-family:'JetBrains Mono',monospace}
.swrdd span{font-size:9px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.swrhd b{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:15px}
.swrmeta{font-size:12px;color:var(--mut)}
.swrrace{border-top:1px solid var(--line);padding:9px 0 4px}
/* kolommen: afstand | slag | tijd — vaste 1e kolom lijnt de slag-badges uit, tijd rechts uitgelijnd (1fr) */
.swrtop{display:grid;grid-template-columns:minmax(46px,auto) auto 1fr;align-items:center;gap:8px 12px}
.swrev{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:14px;color:var(--ink)}
.swrst{justify-self:start;font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;padding:2px 8px;border-radius:6px;background:var(--tile);color:#fff}
.swrtcell{justify-self:end;text-align:right;line-height:1.3} /* 1.254: nowrap weg — tijd+🎯objectief+chip eisten ~477px en maakten de pagina panbaar op iPhone; het objectief wrapt nu onder de tijd */
.swrtime{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:17px;font-variant-numeric:tabular-nums;color:var(--ink)}
.swrdl{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12px;margin-left:5px;font-variant-numeric:tabular-nums}
.swrentry{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;color:var(--water-deep)}
details.swrlaps{margin-top:6px;cursor:pointer}
details.swrlaps>summary{list-style:none;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--ink-2)}
details.swrlaps>summary::-webkit-details-marker{display:none}
.swrchev{display:inline-flex;transition:transform .18s var(--ease)}
details.swrlaps[open] .swrchev{transform:rotate(180deg)}
.swrlapgrid{display:grid;grid-template-columns:auto auto auto;gap:3px 10px;align-items:baseline;margin-top:6px;width:max-content;font-family:'JetBrains Mono',monospace;font-size:12px;font-variant-numeric:tabular-nums}
.swrlap{display:contents}
.swrlap .d{color:var(--mut)}
.swrlapref{color:var(--mut);opacity:.75;margin-left:2px}
.swrwp{margin-top:7px;font-size:12px;background:color-mix(in srgb,var(--water) 8%,transparent);border-radius:8px;padding:5px 9px}
.swrnote{margin-top:6px;font-size:12px;color:var(--mut);font-style:italic}
.swrink{margin-top:6px}
.swrink svg{max-width:100%;height:auto;min-height:56px;border:1px solid var(--line);border-radius:9px;background:var(--field);display:block;color:var(--ink)}
.swrink path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* ===== JAARPLANNING (tijdlijn + verfkwast) ===== */
.brushrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.brushrow .gl{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--mut-2);margin-right:2px;min-width:48px}
.brush{border:1.5px solid var(--line-2);background:var(--field);box-shadow:var(--raise);border-radius:9px;padding:6px 10px;font-size:12px;font-weight:700;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;line-height:1;transition:all .12s var(--ease)}
.brush:hover{border-color:var(--water);transform:translateY(-1px)}
.brush.on{border-color:var(--water);box-shadow:var(--ring),var(--raise);color:var(--water-deep);background:var(--card-2)}
.brush:active{transform:translateY(1px);box-shadow:var(--press)} /* ná .on, zodat de indruk ook op een geselecteerde kwast wint */
.brush .sw{width:13px;height:13px;border-radius:3px;display:inline-block;border:1px solid rgba(0,0,0,.10)}
.brushhint{font-size:11px;color:var(--mut)}
.mxwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);user-select:none;-webkit-user-select:none;-webkit-overflow-scrolling:touch}
.mxwrap.painting{touch-action:pan-y}
.mxtable{border-collapse:separate;border-spacing:0;width:max-content}
.mx-mo{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);text-align:left;padding:5px 6px 4px;border-bottom:1px solid var(--line);white-space:nowrap}
.mx-wh{min-width:var(--mxcol,58px);width:var(--mxcol,58px);padding:7px 0 8px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12px;color:var(--ink-2);cursor:pointer;border-bottom:1px solid var(--line);text-align:center;line-height:1.2}
.mx-wh .dt{display:block;font-size:9px;font-weight:400;color:var(--mut-2)}
.mx-wh.today{color:var(--sig-deep);box-shadow:inset 0 -2px 0 var(--sig)}
.mxlbl{position:sticky;left:0;z-index:2;background:var(--card);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--mut);white-space:nowrap;padding:0 10px 0 8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.mxcnr{position:sticky;left:0;z-index:3;background:var(--card);border-right:1px solid var(--line)}
.mx-cell{cursor:pointer;padding:7px 4px;text-align:center;border-bottom:1px solid var(--line)}
.mzcell{position:relative;height:40px;padding:0 3px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:11px;line-height:1.05;color:#16283a;text-align:center;vertical-align:middle}
/* blok-naam gecentreerd over de span weken: absoluut (telt niet mee voor de kolombreedte) + pointer-events:none zodat elke week klikbaar/verfbaar blijft; breedte volgt --mxcol live */
.mzname{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden;padding:0 4px;box-sizing:border-box}
.mzname>span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}/* past → gecentreerd; te lang → begin blijft + … (i.p.v. beide kanten afkappen) */
/* de naam-cel boven de volgende (lege) blok-cellen tillen, anders dekt hun achtergrond de overlopende naam af (blijft onder de sticky Meso-labelkolom, z-index:2) */
.mzcell.mzhead{z-index:1}
.mx-km b{font-size:13px;font-weight:800;color:var(--ink);font-family:'JetBrains Mono',monospace}
.mx-km .e{color:var(--mut-2)}
.mx-mix{display:flex;height:20px;border-radius:4px;overflow:hidden;background:var(--bg-2)}
.mx-mk{min-height:26px;vertical-align:middle}
.mk-stack{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.mk-stack .stars{color:var(--sig);font-size:12px;letter-spacing:-1px;line-height:1}
.mk-stack .tdot{font-size:12px;line-height:1;display:inline-flex;align-items:center;gap:1px}
.mk-stack .tdot.dt{font-size:11px;font-weight:800;color:var(--ink-2)}
.mx-cell.selcol,.mx-wh.selcol{box-shadow:inset 0 0 0 2px var(--water)}
.mx-wh.selcol.today{box-shadow:inset 0 0 0 2px var(--water)}
.mxchart-cell{padding:0;border-bottom:none;vertical-align:top}
.mxchart-row .mxlbl{vertical-align:top;padding:0 2px 0 4px;border-bottom:none;text-align:right}
/* groot scherm: weeknr, datum en maand in de matrixkop mee vergroten (zoals de grafiek) */
@media (min-width:860px){ .mx-mo{font-size:14px} .mx-wh{font-size:15px} .mx-wh .dt{font-size:11px} .mxlbl{font-size:12px} .mzcell{font-size:13px} }
.plandetail{animation:fadeIn .18s var(--ease)}
.planedit{display:grid;grid-template-columns:1.1fr 1fr;gap:20px 36px;align-items:start}
.pe-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.pe-grid{display:grid;gap:13px 16px}
.pe-grid.c3{grid-template-columns:1.3fr 1fr 1fr}
.pe-grid.c2{grid-template-columns:1fr 1fr}
.pe-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.pe-f>select,.pe-f>input{width:100%}
@media(max-width:980px){.planedit{grid-template-columns:1fr}}
@media(max-width:520px){.pe-grid.c3,.pe-grid.c2{grid-template-columns:1fr}}
.techbox{width:100%;min-height:88px;resize:vertical;font-family:inherit;line-height:1.45}
.typegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:9px;margin-top:2px}
.tcell{display:flex;flex-direction:column;gap:3px}
.tcell span{font-size:11px;font-weight:800;color:var(--mut);letter-spacing:.03em}
.tcell input{width:100%;text-align:center;padding:7px 4px}
.planmsg{font-size:12px;font-weight:700;margin-top:8px}
.planmsg:empty{display:none}
.planmsg.ok{color:var(--ok)}
.planmsg.err{color:var(--err)}
.tprog{display:flex;flex-wrap:wrap;gap:7px;margin:-6px 0 16px}
.tprog .pill.ok{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.tprog .pill.over{background:var(--err-soft);border-color:transparent;color:var(--err)}
.pill.notechip{background:var(--info-bg);border-color:var(--info-line);color:var(--info-ink)}
.pill.notechip b{color:var(--info-ink)}
/* Aanwezigheid = slotsectie ín de weeksamenvatting-kaart (1.213). .tprog's -6px/16px mikte op de rij
   bovenaan, ónder de weekbar; hier draagt .attwksec de ruimte, in de 15px-cadans van de andere
   kaart-secties (.sumgrid/.babt). De kaart-padding (22px) sluit onderaan af.
   Sinds 1.220 een hero + vaste ma–za strook i.p.v. pillen — zie de comment bij attWeekRowHTML (js/05). */
.attwksec{margin-top:15px}
.attwk{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
/* Enige doorgang naar het aanwezigheidsdetail — en meteen het weekcijfer zelf, zodat het zwaarder weegt
   dan de sessies ernaast. cursor:pointer doet niets op een iPad en het randje verschuift maar één tint —
   je moest wéten dat je kon tikken. De chevron is de zichtbare deur; de slots ernaast zijn bewust dood
   (keuze Ben, 1.210) en krijgen er dus géén. min-height:44px = de poolside-tapmaat (1.218).
   Het vlak is --card, niet --card-2: het weekcijfer draagt een chrono-tint en die is tegen --card
   gemeten. Op --card-2 zakt --chr-mid naar 4,46 — ónder AA, in de browser nagemeten — terwijl de
   slots ernaast met net dezelfde tint 4,75 haalden. Dat maakt het een .sumcard-look (wit + rand),
   en dat is precies wat de vier tegels bovenaan de kaart ook doen. */
.attwkhero{position:relative;flex:none;text-align:left;min-height:44px;
  background:var(--card);border:1px solid var(--line-2);border-radius:14px;padding:11px 30px 11px 14px;
  transition:border-color .14s var(--ease)}
.attwkhero:hover{border-color:var(--water-deep)}
.attwkhero::after{content:'›';position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:17px;font-weight:800;color:var(--mut-2);line-height:1}
.attwkhero .ahv{display:block;font-size:29px;font-weight:700;line-height:1;letter-spacing:-.02em}
.attwkhero .ahv i{font-style:normal;font-size:15px;opacity:.7;margin-left:1px}
.attwkhero .ahs{display:block;font-size:11px;color:var(--mut);margin-top:4px;white-space:nowrap}
.attwkhero .ahw{font-family:'Public Sans',system-ui,sans-serif}
/* Strook: een smalle AM/PM-gutter + n dagkolommen, row-major gevuld (koppen, AM-rij, PM-rij).
   --n staat inline: zaterdag valt weg zodra er niets staat, en zondag verschijnt enkel mét training.
   De max-width schaalt mee met --n i.p.v. een vast getal: met kale flex:1 rekt de strook uit tot de
   volle kaartbreedte en worden de slots 148×30 — een cijfer verdronken in een leeg vlak. ~100px per
   dag houdt ze op ±91×34, de maat van de AM/PM-vakjes in de weekkiezer bovenaan dezelfde pagina. */
.awstrip{flex:1;min-width:228px;max-width:calc(var(--n) * 100px);display:grid;grid-template-columns:19px repeat(var(--n),minmax(0,1fr));gap:4px;align-items:center}
.awh{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--mut-2);text-align:center}
.awr{font-size:9px;font-weight:800;letter-spacing:.02em;color:var(--mut-2)}
.aws{height:34px;border-radius:8px;background:var(--bg-2);border:1px dashed var(--line);opacity:.55}   /* geen training — houdt enkel de kolom recht */
.aws.nolist,.aws.has{opacity:1;border:1px solid var(--line-2);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font:700 13.5px/1 'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
.aws.nolist{background:var(--card);color:var(--mut-2)}          /* training, geen telbaar cijfer */
/* De hele chip kleurt mee tot --p (Bens vraag), niet enkel een lijntje. Harde-stop gradient i.p.v. een
   ::before: geen pseudo, geen z-index-gedoe, geen extra element om de tekst bovenop te krijgen.
   --c/--f komen uit attChip = de SEMANTISCHE familie (--ok/--warn/--err op hun eigen soft-vlak), niet de
   chrono-familie: die is tegen --card gemeten en haalt daar 4,60 = nét AA, dus élke tint eronder zakt
   eronder (3,81 op 17%). Omdat de vulling proportioneel is staat het cijfer op TWEE vlakken — de soft-tint
   én --card — en de semantische tinten halen allebei (licht 4,59-6,43 · donker 6,58-8,18, nagemeten). */
.aws.has{background:linear-gradient(to right,var(--f) 0 var(--p),var(--card) var(--p) 100%);color:var(--c)}
.aws.has i{font-style:normal;font-size:8.5px;opacity:.7;margin-left:.5px}
@media(max-width:560px){
  /* Op een gsm wint de strook de volle breedte en gaat de hero erboven: 6 kolommen naast een hero van
     ~110px maakt de slots smaller dan hun eigen cijfer. */
  .attwk{gap:12px}
  .attwkhero{width:100%}
  .attwkhero .ahs{display:inline-block;margin-left:10px}
  .attwkhero .ahv{display:inline-block;vertical-align:-1px}
}
/* donker: de lichte bg's hierboven wisselen niet mee → .pill b (var(--ink)) werd wit-op-lichtgroen = onleesbaar; getinte donkere bg terug */
.techline{font-size:12.5px;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:10px;padding:9px 13px;margin:-6px 0 14px;white-space:pre-wrap;line-height:1.4}
.starbtn{border:1.5px solid var(--line-2);background:var(--field);border-radius:9px;padding:6px 11px;font-size:14px;color:var(--sig);font-weight:700}
.starbtn.on{border-color:var(--sig);box-shadow:0 0 0 3px var(--sig-soft)}
/* — wedstrijden op het weekoverzicht + planning-detail (koppeling planning↔import, 22/7) — */
.wkcmp-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.wkcmp{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;color:var(--ink);background:var(--field);border:1px solid var(--line-2);border-radius:11px;padding:10px 12px;min-height:44px;cursor:pointer}
.wkcmp:hover{background:var(--card-2)}
.wkcmp.plan{cursor:default;opacity:.6}
.wkcmp-n{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wkcmp-m{flex:none;margin-left:auto;color:var(--mut);font-size:12.5px;white-space:nowrap}
.wkcmp-go{flex:none;color:var(--mut);font-size:18px;line-height:1}
.starstxt{flex:none;color:var(--sig);font-size:13px;letter-spacing:-1px}
/* — kiosk: gevoel na de training — */
#kiosk:empty{display:none}
#kiosk{position:fixed;inset:0;z-index:90}
.kioskwrap{position:absolute;inset:0;background:var(--bg);overflow:auto}
.kioskin{max-width:880px;margin:0 auto;padding:max(44px,env(safe-area-inset-top)) 26px 32px} /* padding-top ≥ safe-area: de kiosk was het enige volscherm-overlay zonder — op iPhone landde de kop + teller óp de klok/batterij */
.kioskhead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:30px}
.kioskhead h1{position:relative;font-size:clamp(30px,4.5vw,42px);font-weight:700;line-height:1.04;letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
.kioskhead h1::after{content:"";position:absolute;left:2px;bottom:-11px;width:54px;height:4px;border-radius:3px;background:var(--sig)}
.kiosksub{margin-top:20px;font-size:14px;font-weight:600;color:var(--mut)}
.kioskcount{font-family:'JetBrains Mono',monospace;font-size:34px;font-weight:700;color:var(--ink);line-height:1;white-space:nowrap;padding-top:4px}
.kioskcount i{font-style:normal;font-size:.55em;font-weight:600;color:var(--mut-2)}
/* voortgangsbalk onder de kiosk-kop (v187) */
.kprog{height:6px;border-radius:3px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;margin:-8px 0 26px}
.kprog b{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--water),var(--water-deep));transition:width .6s cubic-bezier(.2,.8,.2,1)}
/* poolside-maten (v187): natte vingers aan de badrand → alles ruim */
.kioskgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:16px}
.kiosktile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:132px;padding:22px 24px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--raise-soft);cursor:pointer;text-align:left;transition:transform .15s var(--ease,ease-out),border-color .15s,box-shadow .15s}
.kiosktile b{font-family:'Bricolage Grotesque',sans-serif;font-size:27px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.1}
.kiosktile span{font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--mut)}
.kiosktile:hover{border-color:var(--water);box-shadow:var(--raise-soft),0 2px 12px rgba(10,34,54,.07)}
.kiosktile:active{transform:scale(.98);box-shadow:var(--press)}
.kiosktile.done{background:var(--water-soft);border-color:var(--water)}
.kioskok{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--water-deep);color:var(--on-water);font-size:16px;font-style:normal;font-weight:700;animation:kioskpop .25s cubic-bezier(.2,.9,.3,1.2)}
@keyframes kioskpop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.kioskfoot{text-align:center;margin-top:28px}
.kioskfoot .btn{min-height:52px;padding:14px 30px;font-size:16px}
.kioskback{min-height:48px;padding:13px 20px;font-size:15px;font-weight:700;border-radius:12px}
.kioskform{max-width:640px;margin:0 auto}
.kioskc{width:100%;margin-top:24px;padding:18px 19px;font-size:17px;border:1px solid var(--line-2,var(--line));border-radius:13px;background:var(--field);color:var(--ink)}
.kiosksend{display:block;width:100%;margin-top:18px;padding:21px 22px;font-size:19px;border-radius:15px}
.kiosksend:disabled{opacity:1;background:color-mix(in srgb, var(--water-deep) 32%, var(--field));cursor:default}
.fbsmilies{display:flex;gap:8px;justify-content:center;margin:22px 0}
.fbsmile{background:none;border:none;cursor:pointer;line-height:1;padding:10px 11px;border-radius:20px;filter:grayscale(.55);opacity:.68;transform:scale(.94);transition:transform .18s cubic-bezier(.2,.9,.3,1.4),opacity .18s,filter .18s}
.fbsmile svg{display:block;width:52px;height:52px}
#kiosk .fbsmile svg{width:76px;height:76px}
.fbsmile:hover{opacity:1;filter:grayscale(.2);transform:scale(1)}
.fbsmile.sel{background:var(--water-soft);box-shadow:inset 0 0 0 2px var(--water-deep);filter:none;opacity:1;transform:scale(1.14);animation:fbpop .35s cubic-bezier(.2,.9,.3,1.5)}
@keyframes fbpop{0%{transform:scale(.7)}60%{transform:scale(1.24)}100%{transform:scale(1.14)}}
.fbq{text-align:center;margin:0 auto 6px}
.fbq .fbqlbl{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin-top:18px}
#kiosk .fbq .fbqlbl{font-size:23px;margin-top:26px}
.fbq .fbsmilies{margin:12px 0 4px}
.fbword{display:block;min-height:20px;font-size:14px;font-weight:700;color:var(--water-deep)}
#kiosk .fbword{min-height:28px;font-size:19px;font-family:'Bricolage Grotesque',sans-serif}
.kioskc::placeholder{color:var(--mut)}
/* merci-tussenscherm + finale (v187) */
.kmerci{min-height:76vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px}
.kmerci h1{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(30px,5vw,44px);font-weight:700;letter-spacing:-.018em;color:var(--ink);margin-top:14px}
.kmerci .kiosksub{margin-top:2px;font-size:16px}
.kmcount{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:700;color:var(--water-deep);margin-top:20px}
.kmcount i{font-style:normal;font-size:.65em;color:var(--mut-2)}
.kfacewrap{position:relative;display:inline-block}
.kfacewrap::before,.kfacewrap::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;border:2px solid var(--water);transform:translate(-50%,-50%);opacity:0;animation:kripple 1.9s ease-out infinite;pointer-events:none}
.kfacewrap::after{animation-delay:.7s}
@keyframes kripple{0%{transform:translate(-50%,-50%) scale(1);opacity:.5}100%{transform:translate(-50%,-50%) scale(26);opacity:0}}
.kfin{min-height:76vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative}
.kfin h1{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(30px,5.5vw,50px);font-weight:700;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.kfin h1 em{font-style:normal;color:var(--water-deep)}
.kfavgs{display:flex;gap:38px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.kfavg{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 34px;box-shadow:var(--sh-1,0 6px 24px rgba(10,34,54,.08))}
.kfavg span{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.kfavg b{font-size:20px;color:var(--water-deep)}
.kfclose{margin-top:40px;min-height:56px;padding:17px 36px;font-size:17px;border-radius:14px}
.kwave{position:fixed;left:-5%;right:-5%;bottom:-10px;width:110%;height:120px;opacity:.55;pointer-events:none}
.kconf{position:fixed;top:-8vh;font-size:26px;animation:kfall 3.4s linear forwards;pointer-events:none}
@keyframes kfall{to{transform:translateY(116vh) rotate(340deg)}}
@media(max-width:520px){
  .kioskin{padding:max(30px,env(safe-area-inset-top)) 16px 24px}
  .kioskhead h1{font-size:27px}
  .kioskcount{font-size:26px}
  .fbsmilies{gap:4px}
  #kiosk .fbsmile svg{width:54px;height:54px}
  .fbsmile{padding:7px 6px}
  .kioskgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .kiosktile{min-height:104px;padding:16px 16px}
  .kiosktile b{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .fbsmile,.fbsmile.sel,.kioskok{animation:none;transition:none}
  .kfacewrap::before,.kfacewrap::after{animation:none;display:none}
  .kconf{display:none}
  .kprog b{transition:none}
}
.fbcard{margin-top:14px}
.fbrow{display:flex;gap:10px;align-items:baseline;padding:4px 0;border-bottom:1px solid var(--line)}
.fbrow:last-child{border-bottom:0}
.fbc{color:var(--mut);font-size:13px}
/* — login / cloud — */
#authgate{position:fixed;inset:0;z-index:300;display:none;flex-direction:row}
.gate-lang-wrap{position:absolute;top:max(14px,env(safe-area-inset-top));right:16px;z-index:5;display:flex;gap:8px}
.gate-lang{display:inline-flex;align-items:center;gap:6px;background:var(--water-deep);color:var(--on-water);border:0;border-radius:20px;padding:8px 14px;font:700 12px/1 'Public Sans',system-ui,sans-serif;letter-spacing:.04em;cursor:pointer;box-shadow:var(--raise-2)} /* 1.306: het app-teal zoals .btn.pri (gevuld teal → --on-water-inkt, conventie 1.211) */
.gate-lang svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}
.gate-lang select{background-color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");border:0;color:inherit;font:inherit;letter-spacing:inherit;padding:0 24px 0 0;cursor:pointer;box-shadow:none} /* één taal-select in de pill (1.305). Longhands + eigen caret: de globale select-regel (appearance:none) tekent de pijl als background-image — een background-shorthand wist hem, en zijn --raise-schaduw leest hier als een streep onder de tekst. Caret = de --on-water-inkt van de teal pill (1.306), per thema hieronder */
:root[data-theme="dark"] .gate-lang select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2304222A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.gate-ver{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));right:16px;z-index:5;font:600 11px/1 'Public Sans',system-ui,sans-serif;letter-spacing:.03em;color:rgba(21,34,44,.5);pointer-events:none}
:root[data-theme="dark"] .gate-ver{color:rgba(234,241,243,.5)} /* donkere login: donker navy op donkere bg was onzichtbaar */
.agstream{white-space:pre-wrap;font:14px/1.65 'Public Sans',system-ui,sans-serif;color:inherit;opacity:.9;background:var(--card);border:1px dashed var(--line);border-radius:14px;padding:16px 18px;max-height:62vh;overflow:auto}
.agcaret{display:inline-block;width:7px;height:1.05em;vertical-align:-2px;margin-left:2px;background:var(--sig);animation:agblink 1s steps(2,start) infinite}
@keyframes agblink{50%{opacity:0}}
.authbrand{flex:0 0 44%;max-width:480px;background:#15222C;color:#EAF1F3;padding:max(48px,env(safe-area-inset-top)) 44px 48px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.abrand-logo{display:inline-block;margin-bottom:18px}
.abrand-logo img{display:block;width:auto;max-width:300px;height:auto}
.abrand-rule{width:54px;height:4px;border-radius:3px;background:var(--sig);margin:12px 0 18px}
.abrand-tag{font-size:15px;line-height:1.6;color:#AFC0C6;max-width:34ch}
.abrand-list{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.abrand-list li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.5;color:#CFE0E4}
.abrand-list li::before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;border-radius:2px;background:var(--water-2)}
.authmain{flex:1;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:32px 24px;overflow:auto}
.authcard{width:100%;max-width:360px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:30px 28px;text-align:center}
.authlogo{display:none}
@media(max-width:820px){
  #authgate{flex-direction:column}
  .authbrand{flex:none;max-width:none;padding:max(28px,env(safe-area-inset-top)) 26px 22px}
  .abrand-list{display:none}
  .abrand-tag{font-size:14px;max-width:none}
  .authmain{padding:22px 18px 34px;align-items:flex-start}
}
.authcard h2{font-family:'Bricolage Grotesque',sans-serif;font-size:25px;color:var(--ink);margin:6px 0 14px}
.authcard label{display:block;text-align:left;font-size:12px;font-weight:600;color:var(--mut);margin:10px 0 0}
.authcard input{width:100%;margin-top:4px;padding:11px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);font-size:15px;font-family:inherit;color:var(--ink)}
.authcard input:focus{outline:none;border-color:var(--water);box-shadow:var(--ring)}
.authcard select{width:100%;margin-top:4px;padding:11px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);font-size:15px;font-family:inherit;color:var(--ink);background:var(--field)}
.authcard select:focus{outline:none;border-color:var(--water);box-shadow:var(--ring)}
.authseg{display:flex;width:100%;margin:2px 0 12px}          /* v187: Trainer|Zwemmer als volle-breedte tabs */
.authseg button{flex:1;font-size:13.5px;padding:9px 10px}
.authbtn{width:100%;margin-top:16px;justify-content:center;font-size:15px;padding:12px}
.authlinks{display:flex;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
.authlinks a{color:var(--water-deep);font-weight:600;text-decoration:none;font-size:13px}
.authhint{font-size:12px;color:var(--mut);margin-top:16px;line-height:1.5}
.authwait{font-size:14px;color:var(--ink-2);margin-top:6px;line-height:1.55;text-align:left}
.autherr{background:var(--err-soft);color:var(--err);border-radius:var(--r-sm);padding:9px 11px;font-size:13px;margin-bottom:6px;text-align:left}
.googlebtn{width:100%;background:var(--card);color:var(--ink);border:1px solid var(--line);justify-content:center;margin-bottom:2px}
.authsep{display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:12px;margin:10px 0}
.authsep::before,.authsep::after{content:"";flex:1;height:1px;background:var(--line)}
.navacct{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12)}
.navgrp{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:14px;background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:4px 8px;max-width:76px}
.navgrp.ro{padding:3px 12px}
.navmail{font-size:9px;color:rgba(255,255,255,.6);word-break:break-all;max-width:82px;text-align:center;line-height:1.25}
.navacct a{color:rgba(255,255,255,.78);text-decoration:none;font-size:17px;line-height:1}
.syncdot{width:9px;height:9px;border-radius:50%;background:var(--ok);display:inline-block}
.syncdot.err{background:var(--accent)}
.syncdot.sync{background:var(--water-2)}
.synclbl{font-size:10px;font-weight:700;color:var(--mut);letter-spacing:.03em;white-space:nowrap} /* woordlabel naast het stipje — de trainer hoeft geen kleurcode te kennen */
.navsync{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 4px 12px}
.navsync .synclbl{color:rgba(255,255,255,.62)} /* op de donkere zijbalk */
@media(max-width:760px){.navsync{display:none}} /* mobiele onderbalk heeft geen plaats; daar blijft hij in PLUS */
@media(min-width:761px){.navmore .navacct .syncdot,.navmore .navacct .synclbl{display:none}} /* spiegel (1.304): rail/balk toont .navsync al — geen dubbele status in PLUS */
.usertbl{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.usertbl th,.usertbl td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.usertbl select{font-size:12px;padding:3px 24px 3px 8px}
.swav{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.02em;flex-shrink:0} /* initialen in groepskleur */
.swnt{width:8px;height:8px;border-radius:50%;background:var(--tech);flex-shrink:0;margin-left:auto} /* amber stip = nog geen testtijden (i.p.v. herhaalde tekst) */
.swnoacct{font-size:12px;line-height:1;flex-shrink:0;margin-left:4px} /* 🔑 = nog geen login-account (actieve login-groep) */
/* Zwemmers-groepsbord (v84): verticale tabel per groep, kolommen naast elkaar voor admin */
.swboard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start;margin-bottom:12px}
.swcol{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 12px 10px;min-width:0;box-shadow:var(--sh-1)}
.swcolh{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);margin:0 0 2px}
.swtable{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.swrow{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;font-size:13.5px;font-weight:600;background:var(--field);border:1px solid var(--line-2);color:var(--ink-2)}
.swnm{min-width:0;overflow-wrap:anywhere}
.swempty{padding:10px 4px;font-size:12.5px}
@media(max-width:900px){.swboard{grid-template-columns:1fr}}
.swrow.tap{cursor:pointer}
.swrow.tap:hover{border-color:var(--water-2)}
.swrow.sel{background:var(--water-soft);border-color:var(--water-deep);box-shadow:inset 0 0 0 1px var(--water-deep)}
.swmovebar{position:sticky;top:0;z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--card);border:1px solid var(--water-deep);border-radius:12px;padding:10px 12px;margin-bottom:12px;box-shadow:var(--sh-2);font-size:13.5px}
/* Duplicaten-opruimen (v89): markering + banner + resolver */
.swrow.dup{border-color:var(--accent)}
.swduptag{font-weight:700;font-size:10px;color:var(--warn);background:var(--accent-soft);border:1px solid var(--accent);border-radius:6px;padding:1px 5px;white-space:nowrap;margin-left:auto}
.swdupbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:12px;padding:10px 12px;margin-bottom:12px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.dupres{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--sh-1)}
.dupresrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.dupresrow .dnm{font-weight:700;min-width:140px;overflow-wrap:anywhere}
.dupresrow .dcur{font-size:12px;color:var(--mut)}
.duppick{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.duppick button{padding:6px 11px;border:1.5px solid var(--line-2);background:var(--field);border-radius:9px;font-weight:700;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.duppick button.on{background:var(--water-soft);border-color:var(--water-deep);color:var(--water-deep);box-shadow:inset 0 0 0 1px var(--water-deep)}
.dupresfoot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
/* — agent: "training plaatsen" dag/AM-PM-kiezer — */
.agnav{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px;font-size:15px}
.agnav .btn{padding:8px 16px;font-size:18px;font-weight:700}
.agdays{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:8px}
.agday{display:flex;flex-direction:column;gap:5px;text-align:center}
.agday-h{font-size:11px;font-weight:800;color:var(--mut);text-transform:uppercase;line-height:1.15}
.agday-h span{display:block;font-size:12px;color:var(--ink-2)}
.agbtn{padding:13px 4px;border:1.5px solid var(--line-2);background:var(--card);border-radius:11px;font-weight:800;font-size:15px;color:var(--ink-2);cursor:pointer;transition:all .12s var(--ease)}
.agbtn:hover{border-color:var(--water);background:var(--card-2);transform:translateY(-1px)}
.agbtn.has{border-color:var(--accent);color:var(--warn);background:var(--accent-soft)}
/* v1.288 — login-beheer als inklapbare tabel (QR + groepslink geschrapt; v186-share-stijlen weg) */
.acctcard{padding:0;overflow:hidden}                                     /* .card-padding uit; summary/body dragen hun eigen inset */
.acctcard>.acctsum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:16px 20px;font-size:13px;font-weight:700;color:var(--ink-2)}
.acctcard>.acctsum::-webkit-details-marker{display:none}
.acctsumt{font-family:'Bricolage Grotesque',sans-serif;font-weight:700}
.acctsum b{color:var(--mut);font-weight:700}
.acctsummiss{color:var(--warn);font-size:12px}                           /* --warn als kale tekst op --card: 8,1 licht / 7,3 donker (nagerekend) */
/* de chevron als reliëf-knopje (zelfde look als .btn) — een kaal ▾ leest niet als klikbaar */
.acctchev{margin-left:auto;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:34px;height:34px;font-size:16px;color:var(--ink-2);background:var(--card-2);border:1px solid var(--line);border-radius:11px;box-shadow:var(--raise);transition:transform .18s var(--ease)}
.acctcard[open]>.acctsum .acctchev{transform:rotate(180deg)}
.acctcard[open]>.acctsum{border-bottom:1px solid var(--line)}
.acctbody{padding:14px 20px 18px}
.accttoolbar{display:flex;align-items:center;gap:12px;margin-bottom:12px;min-height:1px}
.acctgroup{margin-left:auto;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--mut-2)}
/* de tabel: subgrid zodat élke kolom uitlijnt (zelfde patroon als .racelist in js/10 en .bars).
   De scroll zit op de WRAP (kaartbreed) — niet op de grid zelf: anders klipt .acctcard{overflow:hidden}
   de laatste kolom weg op smal scherm (iPhone) zonder scrollmogelijkheid. */
.accttblwrap{overflow-x:auto}
.accttbl{display:grid;grid-template-columns:minmax(150px,1.6fr) minmax(140px,1.1fr) minmax(150px,1.3fr)}
.accthead{display:grid;grid-column:1/-1;grid-template-columns:subgrid;padding:0 4px 7px;border-bottom:1px solid var(--line)}
.accthead span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--mut-2)}
.acctln{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;padding:8px 4px;border-bottom:1px solid var(--line)}
.acctln:last-child{border-bottom:0}
.acctln.noacct .acctnm{color:var(--mut)}
.acctname{display:flex;align-items:center;gap:9px;min-width:0}
.acctnm{font-size:13.5px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acctcell{display:flex;align-items:center;gap:6px;min-width:0}
.acctmini{padding:6px 9px}
.acctmail{display:inline-flex;align-items:center;gap:5px;max-width:100%;border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:12.5px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px 2px}
.acctmail .mic{color:var(--ok);flex-shrink:0}
.acctmail:hover{color:var(--water-deep)}
.acctdash{color:var(--mut-2)}
@media(max-width:640px){.accttbl{min-width:470px}}
@media(pointer:coarse){.acctcard>.acctsum{padding:18px 20px;min-height:56px}}   /* tap-doel ≥44px aan het bad */