/* ============================================================================
     LANGS DE LIJN — stijllaag, T2 ("geen vlakken, alleen regels")

     Herbouwd 30-08-2026 naar het ontwerp uit ontwerpen/U1..U3, V en W.
     De dragende keuzes, elk gemeten (zie WIJZIGINGEN.md):

       - KOPBAND in de clubkleur op elk scherm. Klok en stand op GELIJK gewicht
         (36 px): 40-tegen-26 leest niet als hierarchie maar als twee getallen
         die niet zijn uitgelijnd. Heet .kopband en niet .band, want .band is
         al van de vooruitblik — precies de botsing die alleen in beeld
         zichtbaar wordt en niet in de code.
       - VELD als regels met een groen kleurvlak per linie in plaats van de
         woorden VOOR/MIDDEN/ACHTER. Tinten gekozen op GRIJSWAARDE
         (e2 · c8 · ad · 8c), zodat de linies ook zonder kleurwaarneming te
         onderscheiden zijn.
       - STREEP onder elke naam. Tot 19-09-2026 de speeltijd, gedeeld door de
         hoogste stand van dat moment; sinds die dag de FITHEID van het kind
         (wens Sander): vol en groen bij de start, leeglopend naar zijn
         conditiescore, oranje onder 30 %, rood onder 10 %. Zie .vbaan.
       - BAAN 56 px, overal gelijk. Moet gelijk zijn, anders zijn de lengtes
         tussen linies onvergelijkbaar; de maat volgt uit het smalste geval:
         vier namen op een rij (O12, 4-3-3).
       - Alle tekst >= 4,5 WCAG. Zachter mag nooit onleesbaar worden.
     ========================================================================== */
  :root{
    /* Merk — themebaar; applyTheme() leidt de rest af van --accent */
    --accent:#35709f;
    --accentDeep:#2b5c88;
    --accentSoft:rgba(53,112,159,.10);
    --wisselInk:#2b5c88;       /* naam van wie eruit gaat / erin komt; applyTheme() leidt hem af */
    --accentBorder:rgba(53,112,159,.26);
    --onAccent:#ffffff;
    --opBand:#e6f0f7;          /* labels op de gekleurde kopband (>= 4,5) */
    --tint:#e1ebf3;
    --tintLab:#406b90;
    --barRest:#c3d6e7;

    /* Neutraal */
    --bg:#eef2f6;
    --card:#ffffff;
    --ink:#1b2733;
    --ink2:#5b6c7c;
    --muted:#5b6c7c;
    --mutedL:#5b6c7c;
    --sub:#5b6067;
    --line:#eaeef2;
    --rowline:#eff2f5;

    /* Linies: groen, want een hockeyveld is groen. Donkerder = dieper op het veld. */
    /* Verdiept 30-08-2026: als 4 px regel viel de lichtste tint (#dbe8d7) volledig weg
       tegen het wit van de kaart - gemeten in beeld, de voorste linie had geen kleur meer.
       De vlakken zijn nu klein genoeg om dieper te mogen zijn zonder luid te worden; de
       grijswaarden lopen nog steeds in vier duidelijke stappen (d9 - c2 - a4 - 80). */
    --lane-att:#c2d9bc; --lane-mid:#9fbf99; --lane-def:#79a175; --lane-gk:#587c5d;
    /* Aparte, lichtere set voor de scoretegels. Daar is de linietint een VOLVLAK met tekst
       erop, en dan gelden andere eisen dan voor een regel van 6 px: op de diepste linietint
       haalde het sublabel nog maar 3,35. Dit is dezelfde kleur op 40% dekking - de tegel
       houdt de identiteit van de linie, de tekst haalt overal >= 6,6. */
    --tile-att:#e7f0e4; --tile-mid:#d9e5d6; --tile-def:#c9d9c8;
    --lane-bench:#ccd4db;

    /* Betekenisdragende kleuren */
    /* Ontzadigd op 30-08-2026: het felle terracotta en groen naast het clubblauw en de
       linietinten gaven vijf kleuren op een scherm. Deze twee dragen dezelfde betekenis
       met minder lawaai en halen nog steeds ruim 4,5 op wit. */
    --uitInk:#8c5241; --uitBar:#cdaba0;
    --inInk:#3a6353;  --inBar:#a9c4b8;
    --bar:#c2ccd6;
    --amber:#cf9f4a;
    --w:#256843; --w-bg:#d4e8dc;
    --v:#8f4233; --v-bg:#f2d6cf;
    --g:#54606b; --g-bg:#dde1e6;

    --font:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --r-card:20px; --r-tile:14px; --r-btn:12px; --r-panel:24px;
    --sch:0 1px 2px rgba(20,35,50,.05),0 6px 16px rgba(20,35,50,.05);
    /* Vlakken in plaats van dozen: de dubbele slagschaduw onder elke witte kaart was de
       grootste bron van het 'alles is een bakje'-gevoel. Een haarlijn schaduw is genoeg
       om wit van de paginakleur te scheiden. */
    --kaartsch:0 1px 3px rgba(16,32,48,.05);
  }

  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{font-family:var(--font);background:#10151a;color:var(--ink);-webkit-font-smoothing:antialiased;
    overscroll-behavior:none;touch-action:manipulation}
  .num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
  input,select{font-family:inherit}
  :focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:6px}
  .up{text-transform:uppercase;letter-spacing:.14em}

  #app{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;
    max-width:520px;margin:0 auto;overflow:hidden}
  .screen{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
  .scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}

  /* ===================== Kopband (alle schermen) ===================== */
  /* Vlakke kleur, geen verloop: een verloop over een volle breedte leest als een
     knop uit een oudere generatie. */
  .kopband{background:var(--accent);color:var(--onAccent);
    padding:calc(env(safe-area-inset-top) + 10px) 20px 16px;
    border-radius:0 0 20px 20px;flex:none}
  .kbteams{display:flex;justify-content:space-between;font-size:10.5px;font-weight:600;
    letter-spacing:.16em;color:var(--opBand);text-transform:uppercase}
  .kbteams span{max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .kbpaar{display:flex;gap:16px;margin-top:8px}
  .kbhelft{flex:1 1 0;min-width:0;text-align:left;display:block;color:inherit}
  .kbhelft.r{text-align:right}
  .kbhelft b{display:block;font-size:36px;font-weight:600;letter-spacing:-.025em;line-height:1;white-space:nowrap}
  .kbhelft s{display:block;text-decoration:none;font-size:10px;font-weight:600;letter-spacing:.14em;
    color:var(--opBand);margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    text-transform:uppercase}
  .kbbalk{height:4px;border-radius:2px;background:rgba(255,255,255,.24);margin-top:13px;overflow:hidden}
  /* Was okergeel - de vijfde kleur op het scherm, en de enige die nergens anders
     terugkwam. Wit met dekking hoort bij de band zelf. */
  .kbbalk>i{display:block;height:100%;background:rgba(255,255,255,.92);border-radius:2px}
  .kbplus{display:flex;justify-content:space-between;margin-top:11px}
  /* Rond en iets zachter: twee gevulde rechthoeken op de band lazen als grijze plakken. */
  .plusbtn{width:44px;height:44px;border-radius:22px;background:rgba(255,255,255,.13);
    color:var(--onAccent);font-size:20px;font-weight:400;display:flex;align-items:center;justify-content:center}
  /* Alarm: de enige plek waar het scherm hard wordt — het enige moment dat je iets moet doen. */
  .kopband.alarm{background:#96513c}
  .kopband.alarm .kbbalk>i{background:#f0d7c8}

  /* Kop zonder klok/stand (Spelers, Historie, Instellingen) */
  .kopband h1{font-size:26px;font-weight:600;letter-spacing:-.01em}
  .kopband .sub{font-size:11px;font-weight:500;color:var(--opBand);margin-top:4px}
  .kbrij{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  .addbtn{width:40px;height:40px;border-radius:var(--r-btn);background:rgba(255,255,255,.18);
    display:grid;place-items:center;color:var(--onAccent);flex:none;position:relative}

  /* ===================== Het veld ===================== */
  /* Vaste rijhoogte is hier geen detail maar de dragende regel: de rijen verschilden
     tot 30-08-2026 negen pixels van elkaar omdat de keeper geen streep heeft. Elke rij
     is nu even hoog en de streep krijgt bij de keeper een onzichtbare plaatshouder. */
  .pitchcard{background:var(--card);border-radius:var(--r-card);box-shadow:var(--kaartsch);
    margin:12px 16px 0;padding:0;overflow:hidden}
  .vrij{display:flex;align-items:stretch;min-height:52px}
  /* De linieregel loopt van rand tot rand door, zodat de vier tinten samen een
     doorlopende kleurloop vormen van voor (licht) naar keeper (diep). Losse afgeronde
     blokjes per rij lazen als rommel, niet als linie. */
  .vlijn{flex:none;width:6px;align-self:stretch;background:var(--lane-bench)}
  .ln-voor{background:var(--lane-att)} .ln-mid{background:var(--lane-mid)}
  .ln-achter{background:var(--lane-def)} .ln-keeper{background:var(--lane-gk)}
  .ln-bank{background:var(--lane-bench)}
  .vgroep{flex:1;display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap;row-gap:8px;
    padding:9px 16px;margin-left:14px}
  /* Scheidingslijn ingesprongen tot na de linieregel - een lijn die van rand tot rand
     loopt hakt de kleurloop doormidden. */
  .vrij+.vrij .vgroep{border-top:1px solid var(--rowline)}
  /* Vanaf vijf namen (alleen mogelijk op de bank) drie per regel: op een regel wordt de
     kolom 41 px en past geen baan meer. Gemeten in de O12-stresstest. */
  .vgroep.veel>.vspeler{flex:0 0 calc(33.333% - 8px)}
  .vspeler{flex:1;min-width:0;text-align:center;color:inherit;display:block;padding:0}
  /* Een veldspeler aantikken is de ingang voor handwissel, plekruil en (via de lijst) de shoot-out:
     44 px hoog in plaats van 31 (richtlijn tapdoel, gemeten 04-10-2026). */
  .pitchcard button.vspeler{min-height:44px;padding:6px 0}
  /* display:block op de naam is essentieel — op een inline-element doet text-overflow niets
     en lopen lange namen over hun kolom heen in plaats van af te kappen (gemeten 30-08). */
  .vnaam{display:block;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.005em;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Vaste breedte, en die moet vast blijven: de lengte van de vulling IS de waarde (tot
     19-09-2026 de speeltijd, sindsdien de fitheid), dus een baan die met de kolom meegroeit
     maakt rijen onvergelijkbaar (kort geprobeerd
     op 30-08 en weer teruggedraaid). Het onderstrepings-effect is opgelost door de lege
     baan zichtbaar te maken en de afstand tot de naam te vergroten: een grijze goot met
     een donkere vulling leest als meter, een los streepje als onderstreping. */
  /* Sinds 19-09-2026 is de streep een conditiemeter (wens Sander): de lengte is de fitheid, de
     kleur zegt hoe het ervoor staat - groen, oranje onder 30 %, rood onder 10 %. 5 px hoog in
     plaats van 4, met 1 px minder marge erboven zodat de rijhoogte gelijk blijft. Kleuren gekozen
     op berekend contrast tegen het spoor (#e0e6ec, eis 3:1): groen 3,61 · oranje 3,10 · rood 4,32.
     Een lichter oranje (#d9822b) haalde maar 2,33. De naamkleur draagt 'eruit' en 'erin'; de
     streep kleurt daar niet meer in mee, anders zeggen twee kleuren twee dingen. */
  .vbaan{display:block;width:56px;height:5px;border-radius:2.5px;background:#e0e6ec;margin:7px auto 0;overflow:hidden}
  .vbaan>i{display:block;height:100%;background:var(--bar);transition:width .6s linear}
  .vbaan>i.fit-ok{background:#2c8560} .vbaan>i.fit-oranje{background:#c4691a} .vbaan>i.fit-rood{background:#c0392b}
  /* Plaatshouder voor de keeper: neemt exact evenveel hoogte in als een streep, maar
     toont niets - de keeper rouleert niet en heeft dus geen speeltijd om te vergelijken. */
  .vbaan.leeg{visibility:hidden}
  /* Wie 'eruit' gaat en 'erin' komt draagt de wisselkleur (clubkleur, zie applyTheme) en niet meer
     roodbruin/groen: rood, oranje en groen zijn sinds 19-09-2026 van de fitheidsstreep. */
  /* Vet sinds 04-10-2026: in kleur alleen verschilde 'eruit' maar 2,8 : 1 van de gewone namen (gemeten
     met tools/maak_uxmeting.py; open punt sinds 19-09). */
  .vspeler.uit .vnaam{color:var(--wisselInk);font-weight:800}
  .vspeler.erin .vnaam{color:var(--wisselInk)}
  .vspeler.keep .vnaam{color:#3f5a41}
  .vleeg{flex:1;text-align:center;font-size:11px;color:var(--ink2);padding:6px 0}

  /* ===================== Bank ===================== */
  .bankcard{background:var(--card);border-radius:var(--r-card);box-shadow:var(--kaartsch);
    margin:0 16px;padding:0;overflow:hidden}
  .bankkop{display:flex;justify-content:space-between;align-items:baseline;padding:14px 20px 7px;
    font-size:10.5px;font-weight:600;letter-spacing:.15em;color:var(--ink2);text-transform:uppercase}
  .la-link{font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--accent);
    padding:10px 0 10px 16px;text-transform:none;position:relative}
  .bank-empty{flex:1;text-align:center;font-size:11.5px;color:var(--ink2);padding:8px 0}
  /* Bank + wissel in één knop (05-09-2026): links de bank op kaartwit met de bankstreep,
     rechts de opdracht op accent; één afgeronde vorm, één schaduw. */
  .wissel{margin:12px 16px 0;display:flex;align-items:stretch;border-radius:16px;overflow:hidden;
    box-shadow:0 2px 8px rgba(28,79,120,.14)}
  /* Links is de spiegel van rechts (aanwijzing Sander 05-09-2026): gecentreerd, één vette
     regel van 17 px ('Bank' tegenover 'Wissel nu') en daaronder regels van 12 px met de
     namen (tegenover de paren). De speeltijdstreep staat hier niet meer: rechts heeft ook
     geen meter, en het veld toont hem al voor iedereen. */
  .wbank{flex:0 0 50%;background:var(--card);border-left:6px solid var(--lane-bench);   /* precies half (Sander) */
    padding:14px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;min-width:0;text-align:center}
  .wlabel{font-size:17px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
  .wtiles{display:flex;flex-direction:column;align-items:center;gap:3px;max-width:100%}
  .wtiles .vspeler{flex:none;width:auto;max-width:100%}
  .wtiles .vnaam{font-size:12px;font-weight:500;color:var(--ink2)}
  .wtiles .vspeler.erin .vnaam{color:var(--wisselInk);font-weight:600}
  .wtiles .vbaan{display:none}
  .wcta{flex:1;background:var(--accent);color:var(--onAccent);display:flex;flex-direction:column;cursor:pointer;
    align-items:center;justify-content:center;gap:3px;padding:14px 12px;min-width:0}
  .wcta .ctahead{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;letter-spacing:.02em}
  .wcta em{font-style:normal;display:block;font-size:12px;font-weight:500;color:#c8dcec;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wissel.alarm .wcta{background:#96513c;animation:pulse 1s ease-in-out infinite}
  .wissel.alarm .wcta em{color:#f0d7c8}
  .wla{display:flex;justify-content:flex-end;margin:0 16px}
  /* Opstelling onder het veld (12-09-2026): zelfde rang als 'vooruitblik' — een link, geen
     knop, want je gebruikt hem zelden. Staat wél klaar zodra hij iets te melden heeft: een
     geplande wissel die nog moet ingaan krijgt gewicht mee, anders lees je hem over. */
  .fmrow{display:flex;justify-content:flex-end;margin:2px 16px 0}
  .fmrow .la-link{padding:8px 0 4px 16px}
  .fmrow .la-link.gepland{font-weight:700}

  /* ===================== Knoppen en bediening ===================== */
  /* Vlakke kleur en een enkele zachte schaduw; het verloop plus de dubbele slagschaduw
     maakten van de belangrijkste knop het zwaarste element op het scherm. */
  .cta{margin:12px 16px 0;background:var(--accent);color:var(--onAccent);
    border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:3px;width:calc(100% - 32px);
    box-shadow:0 2px 8px rgba(28,79,120,.14)}
  .cta .ctahead{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:700;letter-spacing:.02em}
  /* Namen op eigen regels: sinds de markerwoorden uit het veld zijn, is deze knop de enige
     TEKSTUELE drager van wie er wisselt. Stapelen i.p.v. afkappen, ook bij vier wissels. */
  .cta em{font-style:normal;display:block;font-size:12px;font-weight:500;color:#c8dcec;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cta.alarm{background:#96513c;
    box-shadow:0 2px 8px rgba(143,70,51,.18);
    animation:pulse 1s ease-in-out infinite}
  .cta.alarm em{color:#f0d7c8}
  .cta:disabled{opacity:.45}
  @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
  /* Een strook in plaats van vier losse bakjes met elk een eigen schaduw. Dat was de
     duidelijkste 'oude knoppenbalk'-vorm op het scherm. */
  .gctrls{display:flex;margin:12px 16px 14px;background:var(--card);border-radius:14px;
    overflow:hidden;box-shadow:var(--kaartsch)}
  .gctrl{flex:1;background:none;border-radius:0;padding:15px 4px;text-align:center;
    font-weight:600;font-size:12.5px;color:#2a3b4a}
  .gctrl+.gctrl{border-left:1px solid var(--rowline)}
  .gctrl small{font-size:12.5px;font-weight:600;margin-left:3px}
  .gctrl:disabled{opacity:.4} .gctrl.warn{color:var(--uitInk)}
  /* Zes knoppen sinds de shoot-outknop (03-10-2026): op 390 px is er per knop ~52 px voor het label,
     en 'Shoot-out' is in 12,5 px 57 px breed (gemeten met tools/maak_shootoutproef.py). */
  .gctrl.smal{font-size:11px}
  .notice{margin:12px 16px 0;background:var(--card);border-radius:var(--r-tile);padding:12px 15px;
    font-size:12.5px;font-weight:500;color:var(--ink2);box-shadow:var(--kaartsch);line-height:1.45}

  /* ===================== Tabbalk ===================== */
  .tabbar{margin-top:auto;display:flex;background:var(--card);padding:8px 0 9px;
    padding-bottom:calc(env(safe-area-inset-bottom) + 9px);border-top:1px solid var(--line);flex:none}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:2px 0;
    font-weight:500;font-size:10.5px;color:var(--ink2)}
  .tab.active{color:var(--accent);font-weight:600}

  /* ===================== Spelers ===================== */
  .presence{padding:12px 20px 0;flex:none}
  .presence-top{display:flex;align-items:center;gap:7px;width:100%}
  .presence-top .pdot{width:7px;height:7px;border-radius:50%;background:var(--inInk);flex:none}
  .presence-top .a{font-weight:600;font-size:12.5px;color:var(--ink)}
  .presence-top .b{font-weight:500;font-size:12.5px;color:var(--ink2)}
  .presence-top .ctx{margin-left:auto;font-weight:500;font-size:11px;color:var(--ink2);text-align:right}
  .keeperrij{display:flex;align-items:center;gap:10px;margin:12px 15px 0}
  .keeperrij .l{font-size:10.5px;font-weight:600;letter-spacing:.15em;color:var(--ink2);text-transform:uppercase}
  .keeperSel{margin-left:auto;min-height:44px;border:none;border-radius:var(--r-btn);padding:0 12px;
    font-size:13px;font-weight:600;background:var(--card);color:var(--ink);box-shadow:var(--kaartsch);max-width:62%}
  .keeperSel.gekozen{background:#e7f0f7;color:var(--accentDeep)}
  .plist{background:var(--card);border-radius:var(--r-card);box-shadow:var(--kaartsch);margin:12px 16px 16px;padding:2px 0}
  .prow{display:flex;align-items:center;gap:11px;padding:0 14px;min-height:56px}
  .prow+.prow{border-top:1px solid var(--rowline)}
  .prow.absent{opacity:.45}
  .pinfo{flex:1;min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
  .pinfo .nm{font-weight:600;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pinfo .ln{font-weight:500;font-size:11px;color:var(--sub);margin-top:2px}
  .posSel{flex:none;width:88px;min-height:44px;border:none;border-radius:var(--r-btn);padding:0 6px;
    font-size:12px;font-weight:600;color:var(--ink2);text-align:center;background:#f2f5f8;
    -webkit-appearance:none;appearance:none}
  .toggle{width:46px;height:28px;border-radius:14px;background:#d3d9df;position:relative;flex:none;overflow:visible}
  .toggle.on{background:#2c8560}
  .toggle .knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .15s}
  .toggle.on .knob{left:21px}

  /* ===================== Speler-detail ===================== */
  .dhead{background:var(--accent);color:var(--onAccent);
    padding:calc(env(safe-area-inset-top) + 10px) 16px 14px;display:flex;align-items:center;gap:12px;
    border-radius:0 0 var(--r-panel) var(--r-panel);flex:none}
  .dback{width:38px;height:38px;border-radius:var(--r-btn);background:rgba(255,255,255,.16);
    display:grid;place-items:center;flex:none;color:var(--onAccent);position:relative}
  .dhead .dt{flex:1;font-weight:600;font-size:17px}
  .dsave{font-weight:600;font-size:13.5px;color:var(--onAccent);padding:10px 4px}
  .detail{padding:14px 15px 0;display:flex;flex-direction:column;gap:16px}
  .profile{display:flex;align-items:center;gap:13px}
  .pav-lg{width:50px;height:50px;border-radius:50%;background:#e3e9ef;display:grid;place-items:center;
    font-weight:600;font-size:17px;color:var(--ink2);flex:none;position:relative}
  .pav-lg .badge{position:absolute;bottom:-1px;right:-1px;width:15px;height:15px;border-radius:50%;
    border:2.5px solid var(--bg);box-shadow:inset 0 0 0 1px rgba(20,35,50,.12)}
  .profile .pn{font-weight:600;font-size:17px;color:var(--ink)}
  .profile .pv{font-weight:500;font-size:10.5px;color:var(--sub);margin-top:4px}
  .rugnr{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none}
  .rugnr .l{font-weight:600;font-size:9.5px;color:var(--sub);letter-spacing:.08em;text-transform:uppercase}
  .rugnr input{width:52px;min-height:44px;text-align:center;border:none;border-radius:var(--r-btn);
    font-weight:600;font-size:16px;color:var(--ink);background:var(--card);box-shadow:var(--kaartsch)}
  .seclabel{font-weight:600;font-size:10.5px;color:var(--ink2);margin:0 2px 8px;
    letter-spacing:.15em;text-transform:uppercase}
  .seclabel .opt2{color:#8b98a5;font-weight:500;letter-spacing:0;text-transform:none}
  .radiocard{background:var(--card);border-radius:var(--r-tile);overflow:hidden;box-shadow:var(--kaartsch)}
  .radiorow{display:flex;align-items:center;gap:11px;padding:0 15px;min-height:48px;width:100%;
    border-bottom:1px solid var(--rowline)}
  .radiorow:last-child{border-bottom:none}
  .radiorow .sq{width:14px;height:14px;border-radius:4px;flex:none;box-shadow:inset 0 0 0 1px rgba(20,35,50,.12)}
  .radiorow .nm{flex:1;text-align:left;font-weight:500;font-size:15px;color:var(--ink)}
  .radio{width:20px;height:20px;border-radius:50%;border:1.5px solid #cfd6dc;flex:none;
    display:grid;place-items:center;background:#fff}
  .radio.on{background:var(--accent);border-color:var(--accent)}
  .radio.on::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--onAccent)}
  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chip{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-btn);padding:0 14px;
    min-height:44px;font-weight:600;font-size:13px;color:var(--ink2);background:var(--card);box-shadow:var(--kaartsch)}
  .chip.on{background:#e7f0f7;color:var(--accentDeep);box-shadow:inset 0 0 0 1.5px #a8c6de}
  .chip .sq{width:12px;height:12px;border-radius:3px;flex:none;box-shadow:inset 0 0 0 1px rgba(20,35,50,.12)}
  .seg{display:flex;background:#e6eaee;border-radius:var(--r-tile);padding:3px;gap:3px;flex-wrap:wrap}
  .seg button{flex:1;min-width:46px;min-height:40px;text-align:center;border-radius:10px;
    font-weight:500;font-size:13px;color:var(--ink2)}
  .seg button.on{background:var(--card);color:var(--accentDeep);font-weight:600;box-shadow:var(--kaartsch)}

  /* ===================== Historie ===================== */
  .statsband{display:flex;margin-top:13px}
  .st{flex:1;text-align:center}
  .st b{display:block;font-size:19px;font-weight:600;color:var(--onAccent)}
  .st s{display:block;text-decoration:none;font-size:9.5px;font-weight:600;letter-spacing:.12em;
    color:var(--opBand);margin-top:2px;text-transform:uppercase}
  .sect{font-size:10.5px;font-weight:600;letter-spacing:.15em;color:var(--ink2);
    padding:13px 20px 6px;text-transform:uppercase}
  .hcard{background:var(--card);border-radius:var(--r-card);box-shadow:var(--kaartsch);margin:0 16px;overflow:hidden}
  .hrow{display:flex;align-items:center;gap:11px;padding:11px 14px;width:100%;text-align:left}
  .hrow+.hrow{border-top:1px solid var(--rowline)}
  .hchip{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
  .hchip.W{background:var(--w-bg);color:var(--w)} .hchip.G{background:var(--g-bg);color:var(--g)}
  .hchip.V{background:var(--v-bg);color:var(--v)}
  .hrow .opp{flex:1;min-width:0}
  .hrow .opp .o1{font-weight:600;font-size:14.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hrow .opp .o2{display:block;font-weight:500;font-size:11px;color:var(--sub);margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hrow .sc{font-weight:700;font-size:16px;color:var(--accentDeep)}
  .pthead{display:flex;gap:9px;padding:9px 14px 2px;font-size:10.5px;color:var(--ink2);font-weight:600}
  .pthead span:first-child{width:48px;flex:none}
  .pthead .b{flex:1} .pthead .m{width:32px;text-align:right;flex:none} .pthead .g{width:26px;text-align:right;flex:none}
  .pthead .k{width:30px;text-align:right;flex:none}   /* keeperminuten, 05-09-2026 */
  .ptrow{display:flex;align-items:center;gap:9px;padding:4px 14px;font-size:12.5px}
  .ptrow span:first-child{width:48px;font-weight:600;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ptbar{flex:1;height:8px;background:#eef1f4;border-radius:4px;overflow:hidden;position:relative}
  .ptbar i{display:block;height:100%;background:var(--bar);border-radius:4px}
  /* Blauwe invulling = minuten op de voorkeurslinie, óver de grijze speeltijdbalk (05-09-2026). */
  .ptbar i.vk{position:absolute;left:0;top:0;background:var(--accent)}
  .vklegenda{display:inline-block;width:10px;height:6px;border-radius:3px;background:var(--accent);vertical-align:middle}
  .ptbar i.gk{background:#5f7f61}
  .ptrow .m{width:32px;text-align:right;font-weight:700;flex:none;color:var(--ink)}
  .ptrow .g{width:26px;text-align:right;font-weight:700;flex:none;color:var(--accentDeep)}
  .ptrow .g.leeg{color:#98a3ad;font-weight:400}
  .ptrow .k{width:30px;text-align:right;font-weight:700;flex:none;color:var(--lane-gk)}
  .ptrow .k.leeg{color:#98a3ad;font-weight:400}
  .ptfoot{font-size:11px;color:var(--ink2);padding:8px 14px 12px;line-height:1.45}
  /* Positie-overzicht (11-10-2026): balk in de linietinten van het veld */
  .posbar{flex:1;display:flex;height:10px;background:#eef1f4;border-radius:5px;overflow:hidden}
  .posbar i{display:block;height:100%}
  .posbar i.att,.poslegenda.att{background:var(--lane-att)} .posbar i.mid,.poslegenda.mid{background:var(--lane-mid)}
  .posbar i.def,.poslegenda.def{background:var(--lane-def)}
  .poslegenda{display:inline-block;width:10px;height:8px;border-radius:2px;margin:0 3px 0 6px;vertical-align:middle}
  .poslegenda:first-child{margin-left:0}
  .ptrow .pospct,.pthead .pospct{width:104px;text-align:right;flex:none;white-space:nowrap}   /* "≈ midden 100%" past (78 px kapte af, gemeten 11-10-2026) */
  .ptrow .pospct{font-weight:600;color:var(--ink)}
  .posprofiel{background:var(--card);border-radius:var(--r-card);padding:12px 14px}
  .posprofiel .posbar{display:flex;height:12px}
  .posregel{margin-top:8px;font-size:13px;font-weight:600;color:var(--ink)}

  /* ===================== Instellingen ===================== */
  .settings{padding:4px 0 28px;display:flex;flex-direction:column;gap:4px}
  .sgroup .gl{font-size:10.5px;color:var(--ink2);font-weight:600;padding:11px 20px 6px;
    letter-spacing:.15em;text-transform:uppercase}
  .scard{background:var(--card);border-radius:var(--r-card);box-shadow:var(--kaartsch);margin:0 16px;overflow:hidden}
  .srow{display:flex;align-items:center;padding:0 14px;min-height:48px;border-bottom:1px solid var(--rowline);gap:11px}
  .srow:last-child{border-bottom:none}
  .srow .sk{flex:1;font-weight:500;font-size:13.5px;color:var(--ink)}
  .srow .sv{font-weight:500;font-size:13px;color:var(--ink2);text-align:right}
  /* Toelichting onder een instellingslabel (19-09-2026): de twee wisselkeuzes leggen zichzelf uit. */
  .srow .sk .shint{display:block;font-size:11.5px;font-weight:500;color:var(--ink2);line-height:1.4;margin-top:2px}
  .srow.metuitleg{padding-top:9px;padding-bottom:9px}
  .srow.col{flex-direction:column;align-items:stretch;gap:9px;padding-top:11px;padding-bottom:12px}
  .teamtile{width:34px;height:34px;border-radius:var(--r-btn);background:var(--accent);display:grid;
    place-items:center;font-weight:700;font-size:14px;color:var(--onAccent);flex:none}
  .teamname{flex:1;min-width:0}
  .teamname .t1{font-weight:600;font-size:13.5px;color:var(--ink)}
  .teamname .t2{font-weight:500;font-size:11px;color:var(--sub);margin-top:2px}
  .colorrow{display:flex;gap:11px;align-items:center;flex-wrap:wrap;padding:2px 0}
  .swatch{width:32px;height:32px;border-radius:50%;flex:none;padding:0;position:relative}
  .swatch.on{box-shadow:0 0 0 2.5px var(--card),0 0 0 4.5px var(--accent)}
  .swatch-custom{width:32px;height:32px;border-radius:50%;background:#e3e9ef;display:grid;place-items:center;
    color:var(--ink2);overflow:hidden;position:relative;font-weight:600}
  .swatch-custom input{position:absolute;inset:-6px;opacity:0;cursor:pointer}
  .field{display:flex;flex-direction:column;gap:5px;width:100%}
  .field label{font-weight:600;font-size:10.5px;color:var(--sub);letter-spacing:.06em;text-transform:uppercase}
  .field input{border:none;border-radius:var(--r-btn);padding:0 12px;min-height:44px;font-size:15px;
    font-weight:600;background:#f2f5f8;width:100%;color:var(--ink)}
  .preset-table{width:100%;border-collapse:collapse;font-size:11px}
  .preset-table th{font-size:11px;color:var(--ink2);font-weight:600;padding:4px 3px;text-align:center}
  .preset-table td{padding:3px 2px;text-align:center}
  .preset-table td:first-child{text-align:left;font-weight:600}
  .preset-table input[type=number]{width:44px;border:none;border-radius:8px;padding:7px 3px;text-align:center;
    font-size:11px;background:#f2f5f8;color:var(--ink)}
  .btn{border-radius:var(--r-tile);padding:0 14px;min-height:48px;font-weight:600;font-size:13.5px;
    display:flex;align-items:center;justify-content:center;gap:7px;width:100%}
  .btn-ink{background:var(--accent);color:var(--onAccent)}
  .btn-soft{background:var(--accentSoft);color:var(--accentDeep)}
  .btn-ghost{background:var(--card);color:var(--ink2);box-shadow:var(--kaartsch)}
  .btn-danger{background:var(--card);color:var(--uitInk);box-shadow:var(--kaartsch)}
  .btn-row{display:flex;gap:8px}.btn-row .btn{flex:1}
  .hint{font-size:11px;color:var(--ink2);line-height:1.5;margin-top:8px;padding:0 4px}
  .ver{text-align:center;font-size:11px;color:var(--ink2);font-weight:500;padding:12px 0 0}

  /* ===================== Lege staten ===================== */
  .empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:0 34px;gap:16px}
  .empty .ic{width:66px;height:66px;border-radius:var(--r-card);background:var(--card);display:grid;
    place-items:center;color:var(--ink2);box-shadow:var(--kaartsch)}
  .empty .et{font-weight:600;font-size:17px;color:var(--ink);line-height:1.2}
  .empty .ed{font-weight:500;font-size:13px;color:var(--ink2);margin-top:8px;line-height:1.55}
  .empty .eb{display:flex;align-items:center;gap:8px;border-radius:var(--r-tile);padding:0 22px;min-height:52px;
    background:var(--accent);color:var(--onAccent);font-weight:700;font-size:15px;
    box-shadow:0 2px 5px rgba(28,79,120,.2),0 9px 20px rgba(28,79,120,.14)}
  .empty .elink{font-weight:600;font-size:11.5px;color:var(--accent)}

  /* ===================== Rust: speeltijdbalans ===================== */
  .card{background:var(--card);border-radius:var(--r-card);box-shadow:var(--kaartsch);padding:12px 14px;margin:12px 16px 0}
  .card-kop{font-weight:600;font-size:10.5px;color:var(--ink2);margin-bottom:10px;
    letter-spacing:.15em;text-transform:uppercase}
  .card-kop-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;gap:10px}
  .card-kop-row .card-kop{margin-bottom:0}
  .brk-next{font-weight:500;font-size:10.5px;color:var(--ink2);letter-spacing:.1em}
  .balance{display:flex;flex-direction:column;gap:5px}
  .bal-row{display:flex;align-items:center;gap:10px}
  .bal-n{flex:none;width:56px;font-weight:600;font-size:12.5px;color:var(--ink);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .bal-bar{flex:1;height:8px;background:#eef1f4;border-radius:4px;overflow:hidden}
  .bal-fill{display:block;height:100%;background:var(--bar);border-radius:4px}
  .bal-fill.low{background:var(--inBar)}
  .bal-min{flex:none;min-width:44px;text-align:right;font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap}
  .bal-sub{margin:-3px 0 2px 66px;font-size:11.5px;color:var(--ink2)}   /* keeper, invaller, niet op eigen plek (10-10-2026) */
  .brk-keeper{margin-top:11px;padding-top:10px;border-top:1px solid var(--line);font-size:13px;color:var(--ink2)}
  .brk-keeper b{color:var(--ink);font-weight:600}

  /* ===================== Vooruitblik ===================== */
  .lookahead-bands{display:flex;flex-direction:column;gap:5px}
  .band{display:flex;align-items:center;background:var(--lane-bench);border-radius:var(--r-btn);
    min-height:34px;overflow:hidden}
  .band.att{background:var(--lane-att)} .band.mid{background:var(--lane-mid)}
  .band.def{background:var(--lane-def)} .band.gk{background:var(--lane-gk)}
  .band-inner{flex:1;display:flex;justify-content:center;flex-wrap:wrap;gap:6px;padding:6px 8px}
  .ppill{background:rgba(255,255,255,.9);border-radius:8px;padding:5px 11px;font-weight:600;font-size:11.5px;
    color:var(--ink);display:inline-flex;align-items:center;gap:6px}
  .ppill.fresh{box-shadow:inset 0 0 0 1.5px var(--inInk);color:var(--inInk)}
  .ppill .pin{font-size:11px}
  .band-empty{font-size:11px;color:var(--ink2);padding:6px}
  .timeline{display:flex;flex-direction:column;gap:7px}
  .tl-break{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);
    text-align:center;padding:5px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
  .tl-row{display:flex;gap:10px;align-items:baseline;font-size:13px}
  .tl-time{flex:none;width:44px;font-weight:700;color:var(--accentDeep)}
  .tl-swap{flex:1;line-height:1.45}
  .tl-out{color:var(--uitInk);font-weight:600} .tl-in{color:var(--inInk);font-weight:600}
  .tl-arrow{color:var(--ink2)} .tl-none{color:var(--ink2)}

  /* Invaller (19-09-2026): één regel onder het veld op het startscherm, in de rustige
     tekstkleur — het is een mededeling, geen waarschuwing. De uitleg in Speler-detail staat
     onder de drieledige schakelaar, want "Invaller" is zonder die regel niet te raden. */
  .invregel{margin:10px 16px 0;font-size:12.5px;font-weight:500;color:var(--ink2);line-height:1.45}
  .roluitleg{margin-top:7px;font-size:12px;font-weight:500;color:var(--ink2);line-height:1.45}

  /* ===================== Wisselschema vooraf (18-09-2026) =====================
     Eén blok per scherm in de gewone veldkaart, met de strip als enige oriëntatiepunt:
     de rust is het gat tussen twee segmenten. De pijlen zijn 44 px; de segmenten zijn
     een snelkoppeling en krijgen hun tapruimte via het ::before-patroon onderaan. */
  .wsmeta{font-size:12.5px;color:var(--ink2);margin-bottom:8px;line-height:1.45}
  .wsmeta b{color:var(--ink);font-weight:600}
  .wswarn{display:block;width:100%;text-align:left;background:var(--accentSoft);
    border:1px solid var(--accentBorder);border-radius:var(--r-tile);padding:11px 13px;
    font-size:12.5px;font-weight:500;color:var(--ink);line-height:1.45;margin-bottom:10px}
  .wswarn b{color:var(--accentDeep);font-weight:700;white-space:nowrap}
  .wsnotice{margin:0 0 10px}
  .wsstrip{display:flex;align-items:center;gap:3px;margin:2px 0 4px}
  .wsseg{flex:1;height:7px;border-radius:4px;background:var(--lane-bench);min-width:6px}
  .wsseg.gap{margin-left:13px}
  .wsseg.on{background:var(--accent)}
  .wsnav{display:flex;align-items:center;gap:6px}
  .wsarrow{flex:none;width:44px;min-height:44px;font-size:24px;line-height:1;color:var(--accent);
    border-radius:var(--r-btn)}
  .wsarrow:disabled{color:var(--line);cursor:default}
  .wskop{flex:1;text-align:center;min-width:0}
  .wskop b{display:block;font-size:15px;font-weight:700;color:var(--ink)}
  .wskop s{display:block;text-decoration:none;font-size:11.5px;font-weight:500;color:var(--ink2);margin-top:1px}
  .wsbody .pitchcard{margin:0}
  .wsbank{font-size:12px;color:var(--ink2);margin:9px 2px 0;line-height:1.45}
  .wsdelta{display:flex;flex-wrap:wrap;gap:0 7px;font-size:12.5px;font-weight:600;margin:5px 2px 0;line-height:1.5}
  /* Zelfde wisselkleur als de namen in de veldkaart erboven (19-09-2026); 'erin:' en 'eruit:'
     staan er als woord bij, dus de kleur hoeft het verschil niet te dragen. */
  .ws-in{color:var(--wisselInk)} .ws-uit{color:var(--wisselInk)} .ws-dot{color:var(--ink2);font-weight:400}

  /* ===================== Sheets ===================== */
  .overlay{position:fixed;inset:0;background:rgba(12,22,32,.44);display:flex;align-items:flex-end;
    justify-content:center;z-index:100}
  .modal{background:var(--card);border-radius:var(--r-panel) var(--r-panel) 0 0;width:100%;max-width:520px;
    max-height:88vh;overflow-y:auto;padding:12px 16px calc(20px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 30px rgba(12,22,32,.18)}
  .modal.center{border-radius:var(--r-card);margin:auto;width:calc(100% - 40px);padding-top:18px}
  .grip{width:38px;height:4px;border-radius:3px;background:#dde2e7;margin:0 auto 13px}
  .modal h3{font-size:19px;font-weight:600;letter-spacing:-.01em}
  .modal .msub{font-size:13px;color:var(--ink2);margin-top:4px;margin-bottom:14px;font-weight:500;line-height:1.45}
  .opt{width:100%;text-align:left;background:#f4f6f9;border-radius:var(--r-tile);padding:0 14px;min-height:52px;
    font-weight:600;font-size:15px;margin-bottom:8px;display:flex;align-items:center;
    justify-content:space-between;gap:8px}
  .opt .ohint{font-size:11px;color:var(--inInk);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
  /* Shoot-outlijst (03-10-2026): het voorstel in de wisselkleur (clubkleur, 'wie erin komt'), niet in
     groen - rood, oranje en groen zijn van de fitheidsstreep. De telling ernaast rustig grijs. */
  .opt.so-aan{box-shadow:inset 0 0 0 2px var(--wisselInk)}
  .opt .so-beurt{font-size:11px;color:var(--wisselInk);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-left:6px}
  .opt .sobits{font-size:12px;color:var(--muted);font-weight:500;text-align:right}
  .modal-close{margin-top:6px}
  /* Tweede kop in de wisselmodal (plekruil, 19-09-2026): los van de bankknoppen erboven. */
  .modal .msub.ruilkop{margin-top:14px;margin-bottom:10px}
  .goalgrid{display:flex;flex-wrap:wrap;gap:8px}
  .goaltile{width:calc(25% - 6px);min-height:62px;border-radius:var(--r-tile);display:flex;flex-direction:column;
    align-items:center;justify-content:center;font-size:13px;font-weight:600;padding:4px 2px;min-width:0;
    background:#f4f6f9;color:var(--ink)}
  /* Eigen, donkerder grijs: de goaltegels dragen de linietint als achtergrond en op de
     donkerste (#9bba96) haalde --sub maar 2,97. Deze waarde haalt 4,61 op de donkerste
     en 7,74 op de lichtste. Gemeten 30-08-2026. */
  .goaltile s{text-decoration:none;font-size:10px;font-weight:500;color:#3f444a;margin-top:2px;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .goaltile.att{background:var(--tile-att)} .goaltile.mid{background:var(--tile-mid)}
  .goaltile.def{background:var(--tile-def)}
  .goaltile.onb{background:#eef1f4;color:var(--ink2)}
  .fixlink{width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;margin-top:9px;
    font-size:13px;font-weight:500;color:var(--ink2)}

  /* ===================== Observaties ===================== */
  /* Het tekstveld is de enige plek in de app waar je echt typt met een handschoen aan;
     16 px is bewust - onder de 16 px zoomt iOS het scherm in bij focus. */
  .notitieveld{width:100%;min-height:88px;border:none;border-radius:var(--r-tile);padding:12px 14px;
    font-family:inherit;font-size:16px;line-height:1.4;color:var(--ink);background:#f2f5f8;
    resize:vertical;-webkit-appearance:none}
  .notitieveld::placeholder{color:var(--sub)}
  .notelijst{display:flex;flex-direction:column;gap:2px}
  .noterij{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
    padding:11px 0;min-width:0}
  .noterij+.noterij{border-top:1px solid var(--rowline)}
  .noterij .nt{font-size:14px;font-weight:500;color:var(--ink);line-height:1.35;
    overflow-wrap:anywhere}
  .noterij .nm2{font-size:11px;font-weight:500;color:var(--sub);margin-top:3px}
  .nweg{flex:none;width:44px;min-height:44px;display:grid;place-items:center;color:var(--uitInk);
    margin:-11px -8px -11px 0}

  /* ===================== Bevestiging na een score ===================== */
  .snack{position:fixed;left:50%;transform:translateX(-50%);width:calc(100% - 30px);max-width:490px;
    bottom:calc(70px + env(safe-area-inset-bottom));z-index:150;background:var(--card);overflow:hidden;
    border-radius:16px;padding:9px 8px 9px 13px;box-shadow:0 8px 26px rgba(12,20,28,.19);display:none}
  .snack.show{display:block}
  .snkrow{display:flex;align-items:center;gap:12px}
  .snkic{width:36px;height:36px;border-radius:var(--r-btn);display:grid;place-items:center;font-size:17px;flex:none}
  .snkic.ons{background:#dbeaf7} .snkic.tegen{background:#e9edf1}
  .snktx{flex:1;min-width:0}
  .snktx b{display:block;font-size:17px;font-weight:700;color:var(--accentDeep)}
  .snktx s{display:block;text-decoration:none;font-size:11px;color:var(--sub);font-weight:500;margin-top:1px}
  .snkundo{flex:none;min-height:44px;padding:0 15px;display:flex;align-items:center;justify-content:center;
    font-size:15px;font-weight:700;color:var(--accent)}
  .snktimer{position:absolute;left:0;right:0;bottom:0;height:2.5px;background:#eef1f4}
  .snktimer i{display:block;height:100%;background:var(--amber);width:100%}
  .snack.show .snktimer i{transition:width 5s linear;width:0}

  .toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);
    background:var(--ink);color:#fff;padding:11px 18px;border-radius:var(--r-btn);font-size:13px;font-weight:600;
    z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.3);max-width:90%;text-align:center;opacity:0;
    transition:opacity .2s;pointer-events:none}
  .toast.show{opacity:1}

  /* Onzichtbare tikzones >= 44 px op kleine bedienelementen (visueel ongewijzigd).
     De host moet position!=static hebben, anders rekt de zone op tot het dichtstbijzijnde
     gepositioneerde element en wordt het halve scherm een knop — les van 27-08-2026.
     Daarom staan host en zone hier bewust in dezelfde regelgroep. */
  .swatch,.dback,.addbtn,.toggle,.plusbtn,.la-link,.wsseg{position:relative}
  .swatch::before,.dback::before,.addbtn::before,.toggle::before{content:"";position:absolute;inset:-8px;border-radius:inherit}
  /* Alleen verticaal vergroten: de segmenten staan 3 px uit elkaar, dus een tapruimte die
     ook zijwaarts uitloopt legt de buur onder je duim (18-09-2026). */
  .wsseg::before{content:"";position:absolute;inset:-13px -1px}

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition:none !important}
    .snack.show .snktimer i{transition:none;width:100%}
  }

  /* ============================================================================
     STRAK (10-10-2026, wens Sander, gekozen op ontwerpen/X11: "huidige opzet goed, alleen strak trekken en
     iets moderner"). Een laag over de bestaande regels: zelfde opbouw, zelfde kleuren-
     betekenis. Wat verandert:
       - Labels in zinskapitaal in plaats van gespatieerde kapitalen (las als oudere stijl).
       - Eén maatsysteem: kaarten 16 px, knoppen en tegels 12 px; haarlijnrand i.p.v. schaduw.
       - Rustiger gewichten: 600 voor koppen en namen, 500 voor labels; geen 700/800 meer
         behalve 'eruit' (dat gewicht draagt betekenis, besluit 04-10-2026).
       - Grotere klok en stand (40 px), iets lichtere achtergrond.
     ========================================================================== */
  :root{ --bg:#f3f5f8; --r-card:16px; --r-tile:12px; --r-btn:12px;
         --kaartsch:0 0 0 1px rgba(16,32,48,.06),0 1px 2px rgba(16,32,48,.04); }
  .up{text-transform:none;letter-spacing:0}

  /* Kopband. Compacter sinds v62 (wens Sander 10-10-2026: de bedieningsrij viel op zijn telefoon net
     onder de vouw). v62 had 725 px nodig voor het hele wedstrijdscherm, v61 705; nu 695 (gemeten op
     390 px breed met JO10 Geel). De winst zit in marges, niet in letter of tapdoel: de plusknoppen
     zijn half zo breed als het scherm, dus 38 px hoog blijft een ruim doel. */
  .kopband{padding:calc(env(safe-area-inset-top) + 10px) 20px 12px;border-radius:0 0 24px 24px}
  .kbteams{font-size:13px;font-weight:500;letter-spacing:0;text-transform:none}
  .kbteams span:first-child{font-weight:600;color:var(--onAccent)}
  .kbpaar{margin-top:6px}
  .kbhelft b{font-size:40px;font-weight:600;letter-spacing:-.035em}
  .kbhelft s{font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;margin-top:4px}
  .kbbalk{height:3px;margin-top:10px;background:rgba(255,255,255,.22)}
  .kbplus{margin-top:10px;gap:10px}
  .plusbtn{width:auto;flex:1;height:38px;border-radius:12px;background:rgba(255,255,255,.14);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font-size:22px}
  .kopband h1{font-size:28px;letter-spacing:-.02em}
  .kopband .sub{font-size:12.5px;margin-top:4px}
  .addbtn{border-radius:12px}
  .st s{font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none}

  /* Veld */
  .pitchcard{border-radius:16px}
  .vrij{min-height:52px}   /* terug naar de v61-maat: 54 kostte 8 px over vier rijen */
  .vlijn{width:5px}
  .vgroep{padding:9px 14px;margin-left:12px}
  .vnaam{font-size:15px;font-weight:600;letter-spacing:-.01em}
  /* De conditiestreep blijft 56 x 5 op spoor #e0e6ec: die maat en dat spoor zijn de basis van de
     contrastmeting van 19-09-2026 en worden bewaakt door tools/maak_fitheidproef.py (die ving de
     48 x 4 uit het concept). */
  .vspeler.uit .vnaam{font-weight:800}

  /* Bank + wissel */
  .wissel{border-radius:16px;box-shadow:0 0 0 1px rgba(16,32,48,.06),0 2px 6px rgba(28,79,120,.10)}
  .wbank{border-left-width:5px;padding:12px}
  .wlabel{font-size:15px;font-weight:600;letter-spacing:0;color:var(--ink2)}
  .wtiles .vnaam{font-size:15px;font-weight:600;color:var(--ink)}
  .wcta .ctahead{font-size:17px;font-weight:600;letter-spacing:0}
  .wcta em{font-size:12.5px}
  .cta{border-radius:16px;box-shadow:0 1px 2px rgba(16,32,48,.08)}
  .cta .ctahead{font-weight:600;letter-spacing:0}
  .la-link{font-size:13px;font-weight:500}

  /* Bediening: zelfde strook, rustiger letter */
  .gctrls{border-radius:12px}
  .gctrl{padding:14px 2px;font-weight:500;font-size:12.5px;color:var(--ink2)}
  .gctrl small{font-weight:500}
  .gctrl.warn{color:var(--uitInk);font-weight:600}
  .gctrl.smal{font-size:11px}   /* 'Shoot-out' past op 390 px alleen in 11 px (maak_shootoutproef) */
  .notice{border-radius:12px}

  /* Tabbalk: actieve tab met een zachte pil achter het icoon */
  .tabbar{padding-top:4px}
  .tab{font-size:11px;gap:3px}
  .tab svg{padding:2px 16px;border-radius:12px;box-sizing:content-box}
  .tab.active svg{background:var(--accentSoft)}

  /* Labels elders in de app: zinskapitaal */
  .bankkop,.keeperrij .l,.seclabel,.sect,.sgroup .gl,.card-kop,.rugnr .l,.field label{
    letter-spacing:0;text-transform:none;font-size:13px;font-weight:600}
  .sgroup .gl,.sect{color:var(--ink);padding-top:16px}
  .tl-break,.opt .ohint,.opt .so-beurt{letter-spacing:0;text-transform:none;font-size:12px}
  .card{border-radius:16px}