/* blad.css -- het uiterlijk van de leespagina's.
 *
 * Vier pagina's gaan over dezelfde wedstrijd en horen er hetzelfde uit te zien: het
 * rapport, de kansen, het verschil tussen de helften en de gevaren. Toen het rapport de
 * enige was stond dit in de pagina zelf; met vier zou het vier keer staan, en dan gaat één
 * ervan een andere tint blauw krijgen zonder dat iemand dat besluit.
 *
 * De kleuren zijn dezelfde als in het wedstrijdmodel: --ons is het blauw dat overal
 * "klikbaar of van ons" betekent, --zij het oranje van de tegenstander. Groen is hier geen
 * versiering maar betekent iets (goed, gelukt, doelpunt).
 *
 * Wat een pagina zelf nodig heeft -- een veldje, een staafje, iets eigens -- zet ze in een
 * eigen <style> eronder. Wat op meer dan één pagina staat, hoort hier.
 */

/* HET LETTERTYPE. Segoe UI en Arial deden het prima, maar ze dateren de pagina: op een
   scherm in de kleedkamer leest een moderne sans rustiger en oogt hij verzorgder. Inter is
   getekend voor schermen en heeft cijfers van gelijke breedte, wat in elke tabel hier
   uitmaakt.

   DE PRIJS, EN HOE JE HEM TERUGDRAAIT. Dit is een verzoek naar fonts.googleapis.com, dus
   een derde partij en een extra ronde voordat de letter er is. Met `display=swap` staat de
   tekst er meteen in het reservelettertype en wisselt hij daarna; op een trage verbinding
   zie je die wissel. Wil je dat niet, haal dan deze ene regel weg: de stack hieronder valt
   dan netjes terug op wat Windows en iOS zelf hebben en er breekt niets. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* --let en --fout staan er sinds 7 september 2026, en dat is geen uitbreiding van het
   palet maar een scheiding van twee dingen die door elkaar liepen.

   --zij is het oranje van de tegenstander. Dat is een inhoudelijke betekenis, en zodra
   diezelfde kleur ook "let op" gaat betekenen leest een oranje balkje op een pagina over
   De Graafschap als iets over De Graafschap. Daarom --let, amber, voor het ene geval dat
   we echt hebben: de verwerking loopt achter, er is niets stuk. En --fout, het rood dat
   al op vijf pagina's als #e58a90 was overgetypt, voor het andere: iets is niet
   bereikbaar. Blauw blijft klikbaar of van ons, groen blijft bevestigd of gelukt. */
:root{--vlak:#12151a;--bodem:#0c0e11;--ink:#e6e8eb;--ink2:#c2c8d2;--muted:#8b94a3;
 --rand:rgba(255,255,255,.08);--ons:#3987e5;--zij:#d95926;--goed:#1baf7a;--uit:#3a424d;
 --let:#d6a23d;--fout:#e58a90;
 /* De filterbalk en zijn knoppen (16 september 2026). Een knop had tot die dag exact de
    kleur van de balk waarop hij ligt (allebei --vlak), en was daardoor een omtrek om niets
    heen; dat is de reden dat zo'n balk zo plat oogde. De balk gaat een tint onder --vlak
    zitten en de knop een paar tinten erboven, zodat een knop een knop is. */
 --balkvlak:#101317;--knopvlak:#191d24;--knopvlak2:#1f242c;
 /* HET INSTRUMENT (26 september 2026), zie docs/uiterlijk.md. --ink is zacht wit en geen
    #f3f4f6 meer: bijna wit op bijna zwart zet elke regel even luid. --aan is een filter of
    schakelaar die aanstaat: een lichter vlak, geen blauw. --hoogte is de ene hoogte van
    alles in een balk, --t-micro de kleinste letter (kopjes, eenheden, labels onder een getal). */
 --aan:rgba(255,255,255,.11);--aanrand:rgba(255,255,255,.16);--hoogte:26px;--t-micro:11px}
/* HET LICHTE THEMA (23 september 2026). De zijbalk zet de klasse 'licht' op <html>. Tot
   vandaag had dit blad daar geen antwoord op: de body werd licht, maar elk vlak, elke knop en
   elke tekst hangt hier aan een variabele, en de kleurbrug in zijbalk.js leest geen
   variabelen. Het resultaat was zwarte vakken op een lichte bodem en witte cijfers op wit.
   Zelfde leisteen als het lichte thema van Momenten en de zijbalk. De kleuren met een
   betekenis (--ons, --zij, --goed) blijven staan; --let en --fout gaan donkerder omdat
   amber en zalm op wit niet te lezen zijn. De vaste hexwaarden verderop in dit blad zet de
   kleurbrug zelf om. */
/* EEN TINT DONKERDER EN EEN TIKJE DIEPTE (4 oktober 2026). Frank vroeg wat ik van het lichte
   thema vond. Twee dingen vielen op. Het grijs van --muted (#64748b) haalde op de lichte bodem
   4,3 tegen 1: op een laptop net te doen, op een beamer of de tv in de spelersbespreking valt
   het weg, en precies daar komen kolomkoppen, eenheden en uitlegregels terecht. #55606f haalt
   5,8 en blijft duidelijk lichter dan --ink2, dus de rangorde blijft. En wit op #f2f5f8 is zo
   subtiel dat een kaart nauwelijks een kaart is; een rand van 12 procent alleen draagt dat niet.
   Daarom de filterbalk ook wit, met de knoppen een fractie grijzer erin, en onder dit blok een
   schaduw van een pixel of twee op wat een vlak is. De bodem zelf blijft #f2f5f8, want de
   kleurbrug in zijbalk.js maakt van elke donkere bodem in een pagina datzelfde licht, en een
   tweede tint zou als een naad tussen twee vlakken te zien zijn. */
html.licht{--vlak:#ffffff;--bodem:#f2f5f8;--ink:#1b2430;--ink2:#334155;--muted:#55606f;
 --rand:rgba(15,23,42,.12);--uit:#cbd5e1;--let:#a16207;--fout:#b91c1c;
 --balkvlak:#ffffff;--knopvlak:#f6f8fb;--knopvlak2:#ebf0f6;
 --aan:rgba(15,23,42,.08);--aanrand:rgba(15,23,42,.22);color-scheme:light;
 --diepte:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.05)}
html.licht .kaart,html.licht .tegel,html.licht .filterbalk{box-shadow:var(--diepte)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter','Segoe UI Variable Text',system-ui,'Segoe UI',-apple-system,
 Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--bodem);color:var(--ink);
 padding:20px 24px 60px;font-size:13px;line-height:1.55;-webkit-font-smoothing:antialiased;
 font-variant-numeric:tabular-nums}
/* DE SCHAAL (26 september 2026), zie docs/uiterlijk.md: 11 voor kopjes, eenheden en labels
   onder een getal, 12 voor een kleine zin (.klein), 13 voor tekst, knoppen en tabs, en alleen
   titels en kerngetallen groter. Tabulaire cijfers voor alles, in een regel hierboven: een
   kolom of een teller verspringt dan niet als het getal verandert. */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#242b34;border-radius:6px;border:2px solid var(--bodem)}
a{color:inherit}

header{border-bottom:1px solid var(--rand);padding-bottom:14px;margin-bottom:20px}
h1{font-size:20px;letter-spacing:-.2px;font-weight:600}
.onder{color:var(--muted);font-size:13px;margin-top:5px}
/* KOPPEN IN GEWONE SCHRIJFWIJZE, sinds 27 augustus 2026. Ze stonden in hoofdletters met
   twee pixels letterspatiëring, en dat leest als een telemetriescherm: zwaar en traag te
   scannen, zeker bij een lange kop. Een kop hoort een kop te zijn omdat hij groter en
   donkerder is dan de tekst eromheen, niet omdat hij schreeuwt. */
h2{font-size:13px;letter-spacing:0;color:var(--ink2);
 font-weight:600;margin:28px 0 11px}
p{max-width:78ch;margin:0 0 10px;color:var(--ink2)}
p b{color:var(--ink)}

.kaart{background:var(--vlak);border:1px solid var(--rand);border-radius:8px;padding:12px 14px}
.tegels{display:flex;flex-wrap:wrap;gap:10px}
.tegel{background:var(--vlak);border:1px solid var(--rand);border-radius:8px;
 padding:9px 12px;min-width:120px}
.tegel b{display:block;font-size:22px;font-variant-numeric:tabular-nums;line-height:1.2}
.tegel span{display:block;font-size:var(--t-micro);letter-spacing:.01em;color:var(--muted);
 margin-top:3px}
.tegel i{font-style:normal;color:var(--muted);font-size:var(--t-micro);font-variant-numeric:tabular-nums}

table{border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:13px}
th{text-align:left;font-weight:600;color:var(--muted);font-size:var(--t-micro);letter-spacing:.02em;
 padding:0 14px 7px 0;border-bottom:1px solid var(--rand)}
td{padding:4px 14px 4px 0;border-bottom:1px solid rgba(255,255,255,.05)}
td.n{text-align:right;padding-right:22px}
tr.uit td{color:var(--muted)}

.zijkleur{color:var(--zij);font-weight:600}
.onskleur{color:var(--ons);font-weight:600}
.beurt{display:flex;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.beurt .min{font-variant-numeric:tabular-nums;color:var(--muted);width:52px;flex:0 0 auto}
.beurt .st{font-variant-numeric:tabular-nums;font-weight:600;width:44px;flex:0 0 auto}
.staaf{display:flex;height:8px;border-radius:5px;overflow:hidden;max-width:520px;margin:6px 0 2px}
.staaf i{display:block;height:100%}
.klein{color:var(--muted);font-size:12px}

/* De tabrij. Hij staat op elke pagina van een wedstrijd en is overal dezelfde -- zie
   hoofdstuk.js voor waarom. De pagina waar je bent is geen link maar een gemarkeerde tab:
   een knop die je brengt waar je al bent, leert je dat knoppen niets doen. */
/* DE RIJ MAG BUITEN DE KOLOM UITSTEKEN (6 september 2026). De tabs plus de wedstrijdwissel
   hebben 1345 punten nodig en de kolom is er 1284: de wissel viel daardoor op een tweede
   regel, en dan lees je twee dingen waar er een staat. Deze pagina's staan links en houden
   rechts een strook leeg, dus die ruimte is er gewoon.

   clamp houdt het eerlijk: nooit meer dan 140 punten eroverheen, nooit meer dan er rechts
   werkelijk vrij is (100vw min de kolom min de marges, met een slag om de arm voor de
   schuifbalk), en nooit negatief. Past het niet, dan breekt de rij af zoals hij deed; dat is
   op een smal scherm ook het enige goede antwoord. */
.terug{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;align-items:center;
 margin-right:calc(-1 * clamp(0px, 100vw - 100% - 64px, 140px))}
/* EN HIJ PLAKT AAN DE BOVENKANT (6 september 2026). Zie balkBoven() in hoofdstuk.js voor het
   waarom en voor de verhuizing naar body die hiervoor nodig is: sticky houdt op zodra de ouder
   uit beeld is, en in <header> was dat meteen. De ondergrond en de streep zijn geen versiering:
   zonder die twee schuift de tekst er doorheen. */
/* De opmaak van de vaste balk bovenaan stond hier en staat sinds 6 september 2026 in
   hoofdstuk.js zelf. Reden: niet elke pagina draait op dit blad. speler.html heeft een eigen
   stijlblok, kreeg de klasse wel en de opmaak niet, en stond dus als enige nog midden op de
   pagina met de wedstrijdkiezer op een tweede regel. Wat bij het gedrag hoort staat nu bij
   het gedrag. */
/* TABS ZIJN WOORDEN MET EEN STREEP, GEEN KNOPPEN (24 september 2026). Ze waren pilletjes met
   een randje, precies zoals de filters en de keuzeknoppen eronder, en dan zie je niet wat je
   naar een andere pagina brengt en wat alleen je selectie verandert. Nu: een tab is tekst,
   de pagina waar je bent draagt een blauwe streep eronder. Pilletjes zijn voor filters. */
.tab{border:0;border-bottom:2px solid transparent;border-radius:0;padding:5px 2px 4px;margin:0 6px;
 text-decoration:none;color:var(--ink2);font-size:13px;white-space:nowrap}
a.tab:hover{color:var(--ink);border-bottom-color:var(--rand)}
.tab[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ons);
 font-weight:600;cursor:default}
/* EEN METING IS GEEN FASE (9 september 2026). In de rij van de spelintenties hangt onder een
   fase de meting die erbij hoort. Zonder verschil leest die rij als zeven gelijkwaardige
   onderwerpen, terwijl het er vier zijn met iets eronder. Vandaar kleiner, zonder rand en met
   een pijltje ervoor; hij hoort bij de tab links van hem. */
.tab.onder{border-bottom-color:transparent;font-size:12.5px;padding-left:2px;color:var(--muted)}
.tab.onder::before{content:"\21B3";margin-right:5px;opacity:.6}
a.tab.onder:hover{color:var(--ink2);background:none;border-bottom-color:var(--rand)}
.tab.onder[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ons);background:none}
/* DE TWEEDE REGEL VAN DE FASERIJ (11 september 2026): de helften van de fase waar je in zit.
   Sinds die dag hangen onder een fase geen metingen meer maar helften, drie of vier per fase;
   zestien tabs naast elkaar past niet, dus staan die van de gekozen fase op een eigen regel
   eronder. flex-basis 100% dwingt die regel af binnen dezelfde .terug, zodat hij meeschuift
   en meeplakt aan de bovenkant. Zie hzFasebalk in hoofdstuk.js. */
.terug .tabs2{flex-basis:100%;display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* De weg naar buiten hoort niet tussen de onderwerpen van deze wedstrijd te staan alsof
   het er één van is. Een streep ervoor is genoeg om dat te zeggen. */
a.tab.uit{margin-left:14px;padding-left:14px;color:var(--muted);border-left:1px solid var(--rand)}
a.tab.uit:hover{color:var(--ink2)}
/* De oude vorm, voor pagina's die de rij nog met de hand zetten. */
.terug a:not(.tab){border:1px solid var(--rand);border-radius:7px;padding:5px 11px;
 text-decoration:none;color:var(--ink2);font-size:12.5px}
#fout{color:var(--fout)}

/* Geen zwevend vraagkaartje van de zijbalk op een pagina die over één wedstrijd gaat.
   Dat kaartje ("Vraag het de wedstrijd", groen, rechtsonder) stuurt zijn vraag naar de
   beeldanalyse van Heracles - Heerenveen. Op een pagina over VVV - Heracles krijg je dus
   een keurig antwoord over de verkeerde wedstrijd, en dat is het gevaarlijkste soort fout:
   hij ziet er goed uit. Dezelfde regel staat al op het wedstrijdmodel en de liniespagina.
   De echte vraagmotor -- die van déze wedstrijd -- zit in het wedstrijdmodel, en dat is
   vanaf hier één klik in de tabrij hierboven. */
#hzzweef{display:none !important}

/* ================================================================= DE FILTERBALK
 *
 * WAAROM DIT HIER STAAT, EN NIET IN DE PAGINA
 * Drie pagina's hebben boven hun lijst dezelfde balk met filterknoppen: schoten, aanvallen en
 * gebeurtenissen. Tot 16 september 2026 stond die opmaak drie keer los, met de hand gekopieerd
 * en byte voor byte gelijk. Dat werkt tot de dag dat er iets verandert, en toen dat gebeurde
 * (kleuren, koppen, lichaam in de knoppen) was het meteen drie keer werk waarvan er twee
 * vergeten worden. Deze repo heeft dat patroon al twee keer betaald, bij de klokverschuiving
 * en bij links en rechts.
 *
 * ALLES STAAT BINNEN .filterbalk, EN DAT IS MET OPZET
 * De namen die zo'n balk gebruikt (balk, groep, knoppen, lab) zijn op twintig andere pagina's
 * ook in gebruik voor iets heel anders: de balk onder een videospeler, de groep in een
 * opstelling, de knoppenrij van het archief. Een regel op .balk alleen zou daar allemaal
 * doorheen slaan. Vandaar de eigen naamruimte: raak je die klasse niet aan, dan verandert er
 * op jouw pagina niets. Pagina's met een eigen ontwerp voor hun knoppen (balwinst, balverlies,
 * rustrapport) houden dat dus gewoon.
 *
 * DE KLEUREN BETEKENEN IETS EN ZIJN NIET VERSIERING
 * --ons voor ons en --zij voor de tegenstander, precies zoals een speler op het veld gekleurd
 * is; --goed voor een doelpunt, zoals in de tabellen; oranje voor een strafschop en blauw voor
 * elke andere stilstaande fase, dezelfde regel als de rand van een regel in de schotenlijst.
 * Een kleur die niets betekent hoort hier niet, en een kleur die een oordeel suggereert dat er
 * niet is (groot in het rood) al helemaal niet: elk getal hier is een telling.
 */
/* COMPACTER EN ZONDER BLAUW (26 september 2026), zie docs/uiterlijk.md. Minder lucht in en
   om de balk, elke knop even hoog (--hoogte), en een filter dat aanstaat is een lichter vlak
   met de volle tekstkleur in plaats van blauw. De ploegkleuren hieronder blijven: dat is
   inhoud en geen versiering. De vorm blijft een pil, want pillen zijn hier filters en tabs
   zijn woorden met een streep. */
.filterbalk{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:flex-start;
 background:var(--balkvlak);border:1px solid var(--rand);border-radius:8px;
 padding:10px 12px;margin-bottom:12px}
.filterbalk .groep{display:flex;flex-direction:column;gap:5px}
.filterbalk .groep .kop{font-size:var(--t-micro);letter-spacing:.02em;color:var(--muted);font-weight:600}
.filterbalk .groep .kop::first-letter{text-transform:uppercase}
.filterbalk .knoppen{display:flex;gap:4px;flex-wrap:wrap}

/* Een groep die een eigen regel pakt (de wedstrijden), en de streep tussen wat je erbij pakt
   en waarop je verfijnt. */
.filterbalk .groep.breed{flex-basis:100%}
.filterbalk .scheider{flex-basis:100%;height:0;border-top:1px solid var(--rand);margin:0}
/* De hoofdkeuzes staan boven de streep en mogen twee punten groter. */
.filterbalk .groep.hoofd .lab{height:28px;padding:0 12px;font-weight:500}
.filterbalk .groep.hoofd .kop{color:var(--ink2)}

.filterbalk .lab{display:inline-flex;align-items:center;height:var(--hoogte);
 background:var(--knopvlak);border:1px solid var(--rand);border-radius:999px;
 color:var(--ink2);font-family:inherit;font-size:13px;padding:0 11px;cursor:pointer;
 white-space:nowrap;transition:background-color .1s,border-color .1s,color .1s}
.filterbalk .lab:hover{color:var(--ink);background:var(--knopvlak2)}
.filterbalk .lab.aan{border-color:var(--aanrand);background:var(--aan);color:var(--ink)}
.filterbalk .lab b{color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums;
 margin-left:5px}
.filterbalk .lab.aan b{color:var(--ink2)}
/* Een knop die nul oplevert gaat op slot. Hij blijft leesbaar genoeg om te zien DAT die
   categorie bestaat, want dat is ook informatie. Staat hij AAN, dan blijft hij klikbaar ook op
   nul: anders zit je vast in een selectie die niets oplevert. */
.filterbalk .lab.leeg{opacity:.38;cursor:default}
.filterbalk .lab.leeg:hover{border-color:var(--rand);background:var(--knopvlak);color:var(--ink2)}
/* Een greep uit een lijst is geen keuze uit die lijst; dat mag je zien voor je klikt. */
.filterbalk .knoppen.snel{margin-bottom:2px}
.filterbalk .lab.snelkeus{border-style:dashed}
/* Het kruisje zegt dat er iets uit te zetten valt en vangt zelf geen klik; de hele knop blijft
   het doelwit. Het pakt de kleur van de knop, want die verschilt per soort. */
.filterbalk .kruis{margin-left:7px;color:currentColor;opacity:.6;font-size:12px;line-height:1}
.filterbalk .lab.aan:hover .kruis{opacity:1}

/* De kleuren met een betekenis; zie de kop hierboven. De rgba-waarden horen bij --ons, --zij
   en --goed en staan hier uitgeschreven omdat een variabele geen doorzichtigheid meekrijgt. */
.filterbalk .lab.k-ons{border-color:rgba(57,135,229,.34);color:#8fbdf0}
.filterbalk .lab.k-tegen{border-color:rgba(217,89,38,.38);color:#dc9a5e}
.filterbalk .lab.k-doel{border-color:rgba(27,175,122,.38);color:#4fc79b}
.filterbalk .lab.k-stil{border-color:rgba(57,135,229,.3);color:#79a9e0}
.filterbalk .lab.k-straf{border-color:rgba(217,89,38,.45);color:#e0a35c}
.filterbalk .lab.k-ons:hover,.filterbalk .lab.k-stil:hover{border-color:var(--ons)}
.filterbalk .lab.k-tegen:hover,.filterbalk .lab.k-straf:hover{border-color:var(--zij)}
.filterbalk .lab.k-doel:hover{border-color:var(--goed)}
/* De aan-stand per kleur, anders wint het blauw van 'aan' van de kleur van de knop zelf en
   wordt "Tegen ons" blauw zodra je hem aanzet. */
.filterbalk .lab.k-tegen.aan,.filterbalk .lab.k-straf.aan{border-color:rgba(217,89,38,.6);
 background:var(--aan);color:#e0a35c}
.filterbalk .lab.k-doel.aan{border-color:rgba(27,175,122,.6);background:var(--aan);
 color:#4fc79b}
.filterbalk .lab.k-ons.aan,.filterbalk .lab.k-stil.aan{border-color:rgba(57,135,229,.6)}
.filterbalk .lab.k-tegen.aan b,.filterbalk .lab.k-straf.aan b{color:#e0a35c}
.filterbalk .lab.k-doel.aan b{color:#4fc79b}

/* Wissen staat rechts en apart, want het is geen filter maar het tegendeel ervan. */
.filterbalk .wisgroep{margin-left:auto;align-self:flex-end;display:flex;gap:7px}
/* Wissen is geen waarschuwing, dus geen oranje meer bij aanwijzen: oranje is de tegenstander. */
.filterbalk .wis{background:none;border:1px solid var(--rand);border-radius:6px;color:var(--muted);
 font-family:inherit;font-size:13px;height:var(--hoogte);padding:0 10px;cursor:pointer}
.filterbalk .wis:hover{color:var(--ink);background:var(--knopvlak2)}
.filterbalk .wis[disabled]{opacity:.35;cursor:default}
.filterbalk .wis[disabled]:hover{border-color:var(--rand);color:var(--muted);background:none}
.filterbalk .zoekveld{background:var(--knopvlak);border:1px solid var(--rand);border-radius:999px;
 color:var(--ink);font-family:inherit;font-size:13px;height:var(--hoogte);padding:0 12px;min-width:150px}
.filterbalk .zoekveld:focus{outline:none;border-color:var(--ons)}
.filterbalk .zoekveld::placeholder{color:var(--muted)}