/* PEC IN CIJFERS — publieke cijferpagina.
 *
 * ─────────────────────────────────────────────────────────────────────────────────────
 * OMGEZET NAAR DE HUISSTIJL VAN DE SITE (8 sep 2026). LEES DIT VOORDAT JE IETS TERUGZET.
 * ─────────────────────────────────────────────────────────────────────────────────────
 *
 * Hier stond: "LETTERLIJK OVERGENOMEN uit docs/verkenner-publiek-referentie.html (v5.1, per
 * iteratie door Joost gestuurd). Wie hier iets verandert, verandert een goedgekeurd
 * ontwerp." Die regel is INGETROKKEN, en met opzet — niet omdat de mock slecht was, maar
 * omdat hij een andere vraag beantwoordde.
 *
 * De mock is een LOS DOCUMENT: donkerblauw verloop, Playfair + Archivo, eigen scorebord-
 * typografie. Als los document is hij goed. Naast een artikelpagina van vakblauw.nl is hij
 * een ander merk: die pagina staat op canvas #f6f7f9 met Source Serif 4 in de koppen, de
 * systeem-grotesk in de lopende tekst en #0044a9 in de links. Joost keurde de pagina op
 * 8 september af op precies dat punt — hij hoort te renderen als een pagina VAN de site.
 *
 * WAT ER IS GEBEURD: de STRUCTUUR is ongemoeid gebleven (elke selector, elk rooster, elke
 * breekpuntregel staat er nog), en alleen het PALET, de LETTERS en de RADII zijn vervangen
 * door die van het thema. Dat is bewust de kleinst mogelijke ingreep die de klacht oplost:
 * een herbouw zou de gemeten keuzes uit het bouwverslag (labelkolom 118px, verbrede
 * pizza-viewBox, gestapelde tijdlijnlabels) opnieuw op de proef stellen, en die zijn stuk
 * voor stuk op echte data geijkt.
 *
 * DE FIGUREN VOLGEN DE SVG-HUISSTIJL. `pipeline/publiceer/tabelgrafiek.py` tekent onze
 * grafieken met _KLEUREN = (#0044A9, #1D9E75, #D85A30, #5b6675) op ink #14181f en lijn
 * #e4e7ec. Dat is de referentie, dus PEC is #0044A9 en de tegenstander #D85A30 — dezelfde
 * twee die een tweeluik in de kopij ook zou krijgen. Blauw/oranje blijft bovendien
 * onderscheidbaar voor de meest voorkomende kleurenblindheid; blauw/groen zou dat niet zijn.
 *
 * DE LETTERS. Source Serif 4 staat al in het thema en draagt daar dezelfde rol als Playfair
 * hier had (serif-display in de koppen). Playfair en Archivo worden NIET meer geladen —
 * `vbc_fonts_css()` is daarmee overbodig geworden en verdwenen. Twee serif-displays op één
 * site is één te veel, en de woff2's in het thema kostten download zonder dat een andere
 * pagina ze gebruikte.
 *
 * ALLES ZIT NOG STEEDS ONDER .vbc. De pagina draait nu binnen de themaketen (header, nav,
 * footer, theme.css), dus die afscherming is geen luxe meer maar noodzaak: zonder die
 * prefix zou `.kaart` of `.duel` over het thema heen lopen.
 */

.vbc {
  /* ── het thema-palet, één op één ────────────────────────────────────────────────
     Elke waarde hieronder staat in themes/vakblauw/theme.json. Wie hier een kleur
     bijzet die daar niet staat, zet de pagina weer buiten de site. */
  --ink:#14181f;           /* theme.json: ink            */
  --zacht:#3d4653;         /* tussen ink en ink-soft, voor labels op wit */
  --dim:#5b6675;           /* theme.json: ink-soft       */
  --lijn:#e4e7ec;          /* theme.json: line           */
  --kaart:#ffffff;         /* theme.json: surface        */
  --canvas:#f6f7f9;        /* theme.json: canvas         */
  --accent:#0044a9;        /* theme.json: club-primary   */
  --accent-d:#00317a;      /* theme.json: club-primary-dark */
  --pec:#0044A9;           /* eigen ploeg — reeks 1 in tabelgrafiek.py */
  --uit:#D85A30;           /* tegenstander — reeks 3 in tabelgrafiek.py */
  --uitl:#C24A22;          /* dezelfde in badge-sterkte, voor tekst op wit */
  --opbouw:#1D9E75;        /* theme.json: rubriek-data   */
  --mid:#8a94a3;           /* neutraal-mid, afgeleid van ink-soft */
  --geel:#C9A227;          /* gele kaart — donkerder dan #e2c14b, want op wit */
  --rood:#C0392B;          /* rode kaart */
  --vlak:#f2f4f7;          /* zacht vlak binnen een kaart (was rgba(255,255,255,.07)) */
  --radius:3px;            /* --vb-radius uit het thema */
  --serif:"Source Serif 4",Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Helvetica Neue",sans-serif;

  /* GEEN eigen achtergrond en GEEN min-height. Het thema levert de canvas; zou deze
     pagina er zelf een neerleggen, dan zit er een naadje tussen de site-header en de
     inhoud precies daar waar de lezer ziet dat het twee dingen zijn. */
  color:var(--ink);
  font:15px/1.5 var(--sans);
  position:relative;
}
.vbc *, .vbc *::before, .vbc *::after { margin:0; padding:0; box-sizing:border-box; }
/* 720px = contentSize uit theme.json, dus exact de kolom van een artikel. */
.vbc .wrap { max-width:720px; margin:0 auto; position:relative; z-index:1; }
.vbc .num { font-variant-numeric:tabular-nums; }

/* DE CONCENTRISCHE RINGEN ZIJN WEG. Ze waren de radiale gloed van een donker vlak; op
   canvas #f6f7f9 zijn ze óf onzichtbaar óf vuil. De regel blijft staan zodat de bestaande
   markup (`<div class="ringen">`) niets kapotmaakt als hij ergens nog gerenderd wordt. */
.vbc .ringen { display:none; }

/* kop van de pagina */
.vbc .kicker { padding:0 0 2px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.vbc .kicker .punt { width:8px; height:8px; background:var(--accent); border-radius:50%;
  flex:none; align-self:center; }
.vbc .kicker .naam { font-weight:700; letter-spacing:1.6px; font-size:12px;
  text-transform:uppercase; color:var(--accent); }
.vbc .kicker .seizoen { margin-left:auto; font-size:12px; color:var(--dim); }
/* De paginakop in de thema-serif, op de maat van een artikelkop-in-het-klein. Er stond
   hier eerder GEEN h1 — op een pagina die publiek gaat is dat een gat, niet een keuze. */
.vbc h1 { font-family:var(--serif); font-weight:700; font-size:34px; line-height:1.1;
  letter-spacing:-0.015em; color:var(--ink); margin:4px 0 2px; }
.vbc .paginasub { color:var(--dim); font-size:14px; margin-bottom:4px; }

/* scorebord */
.vbc .bord { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px;
  padding:18px 4px 8px; }
.vbc .club { font-weight:700; font-size:16px; }
.vbc .club.l { text-align:right; }
.vbc .club .kleur { display:inline-block; width:10px; height:10px; border-radius:2px;
  margin:0 7px; vertical-align:0; }
.vbc .score { font-family:var(--serif); font-weight:700; font-size:36px; letter-spacing:0;
  color:var(--ink); }
.vbc .meta { text-align:center; color:var(--dim); font-size:12.5px; padding-bottom:4px; }
.vbc .goals { text-align:center; color:var(--zacht); font-size:13px; padding-bottom:12px; }
.vbc .vers { text-align:center; font-size:12px; color:var(--dim); padding-bottom:14px; }

/* filterbalk */
.vbc .balk { position:sticky; top:0; z-index:5; background:rgba(246,247,249,0.94);
  backdrop-filter:blur(6px); border:1px solid var(--lijn); border-radius:var(--radius);
  padding:10px 12px; display:flex; flex-wrap:wrap; gap:8px; }
.vbc .seg { display:flex; border:1px solid var(--lijn); border-radius:var(--radius);
  overflow:hidden; background:var(--kaart); }
.vbc .seg button { background:transparent; border:0; color:var(--zacht); font:inherit;
  font-weight:600; padding:7px 13px; cursor:pointer; }
.vbc .seg button:hover { color:var(--accent); }
.vbc .seg button.aan { background:var(--accent); color:#fff; font-weight:700; }
.vbc select { background:var(--kaart); border:1px solid var(--lijn);
  border-radius:var(--radius); color:var(--ink); font:inherit; font-weight:600; padding:7px 10px; }
.vbc .balk .spacer { flex:1; }

.vbc section { margin-top:16px; }
.vbc .kaart { background:var(--kaart); border:1px solid var(--lijn);
  border-radius:var(--radius); padding:16px; margin-bottom:12px; }
.vbc .kaart h2 { font-family:var(--serif); font-size:21px; font-weight:700;
  letter-spacing:-0.01em; color:var(--ink); margin-bottom:2px; }
.vbc .kaart .sub { color:var(--dim); font-size:12.5px; margin-bottom:12px; }

/* team-vergelijk */
/* 118px in plaats van de 104 uit de mock: die was gemeten op 'passnauwkeurig', en het
   ECHTE label uit de datamart is 'passnauwkeurigheid' — vier tekens langer, en die liepen
   over de rechterbalk heen. Het label bijknippen zou de mock netjes houden en de pagina
   onwaar: er staat wat de stat heet. */
.vbc .verg .rij { display:grid; grid-template-columns:1fr 118px 1fr; align-items:center;
  gap:8px; margin:10px 0; }
.vbc .verg .naam { text-align:center; font-size:12px; color:var(--zacht); }
.vbc .verg .b { position:relative; height:13px; }
.vbc .verg .b i { position:absolute; top:2px; bottom:2px; border-radius:2px; }
.vbc .verg .l i { right:0; }
.vbc .verg .r i { left:0; }
.vbc .verg .b b { position:absolute; top:-2px; font-size:12.5px; font-weight:700;
  color:var(--ink); }
/* HET LINKERLABEL HOORT BINNEN DE KAART (8 sep 2026, na een screenshot van Joost).
   Hier stond `right: calc(100% + 4px)`: dat zet het label 4px links van de HELE cel, dus
   buiten het rooster en daarmee buiten de kaart. Gemeten op de cijferpagina liep élke rij
   van het seizoensblok eroverheen — 4px bij een tweecijferige waarde en 12px bij '240' —
   terwijl de rechterkant 78 tot 125px speling had. De rechterkant zit namelijk BINNEN zijn
   cel, net na het balkeinde (`left: calc(<deel>% + 4px)`); het spiegelbeeld daarvan is
   `right: calc(<deel>% + 4px)`, en dat is wat de renderers nu inline meesturen.

   Deze regel blijft staan als terugval voor markup zonder die inline stijl (een oude,
   gecachete pagina bijvoorbeeld) — dan is het label zichtbaar naast de kaart in plaats van
   verdwenen, en dat is de minst schadelijke van de twee fouten. */
.vbc .verg .l b { right:calc(100% + 4px); }
.vbc .verg .waarde-r { position:absolute; top:-2px; font-size:12.5px; font-weight:700;
  color:var(--ink); }
.vbc .verg .tick { position:absolute; top:-3px; bottom:-3px; width:2px;
  background:var(--ink); opacity:0.55; display:none; }
.vbc .toonlijn .tick { display:block; }

/* WEDSTRIJD-TIJDLIJN (herbouwd 8 sep 2026)
   PEC boven de as, tegenstander eronder — altijd, ook uit. De vorige versie zette thuis
   boven en uit onder, waardoor PEC op drie van de vijf duels onderaan stond; de mock zei
   in zijn eigen ondertitel al "boven PEC, onder Sparta".

   De hoogte volgt het aantal labelregels dat PHP heeft uitgerekend (--tl-boven/--tl-onder),
   zodat een druk duel niet in zijn eigen kaart wordt geperst en een rustig duel geen lege
   ruimte houdt. De maten staan in px en niet in een viewBox: dit is HTML, dus de tekst
   schaalt níét mee met de breedte — precies waarom een tijdlijn hier beter af is dan als
   SVG (zie het tweeluik, dat wél moest krimpen of stapelen). */
/* DE AS HANGT AAN ÉÉN VARIABELE, niet aan `top: 50%`. Die eerste opzet ging ervan uit dat
   de ruimte boven en onder gelijk is; dat is ze niet (boven staan de PEC-labels, onder die
   van de tegenstander plus de minutenschaal). Met 50% zakte de as naar het midden van een
   asymmetrische doos en liep de schaal het onderschrift in. Nu ligt de as precies waar de
   bovenruimte eindigt, en volgt de hoogte daaruit. */
.vbc .tl { --tl-rij:0; --tl-regel:16px;
  --tl-as-y:calc(var(--tl-boven) * var(--tl-regel) + 16px);
  position:relative; margin:16px 2px 4px;
  height:calc(var(--tl-as-y) + var(--tl-onder) * var(--tl-regel) + 40px); }
.vbc .tl-as { position:absolute; left:0; right:0; top:var(--tl-as-y); height:0; }
.vbc .tl-as::before { content:""; position:absolute; left:0; right:0; top:-1px; height:2px;
  background:var(--lijn); }
.vbc .tl-tik { position:absolute; transform:translateX(-50%); }
.vbc .tl-tik i { position:absolute; left:0; top:-4px; width:1px; height:8px;
  background:var(--lijn); }
/* DE MINUTENSCHAAL STAAT ONDER ALLES, en dat is een correctie op de eerste opzet. Daar
   stond hij 6px onder de as — precies waar de labels van de tegenstander beginnen (13px),
   en dan valt '60'' over '63'' heen. De schaal is oriëntatie, geen gebeurtenis; hij hoort
   dus niet in de baan waar de gebeurtenissen staan. `--tl-onder` is het aantal labelregels
   dat PHP heeft geteld, dus hij zakt precies zo ver als dit duel nodig heeft. */
.vbc .tl-tik b { position:absolute; left:0; transform:translateX(-50%);
  top:calc(18px + var(--tl-onder) * var(--tl-regel));
  font-size:10px; font-weight:500; color:var(--dim); white-space:nowrap; }
.vbc .tl-rust i { top:-8px; height:16px; background:#c7ccd4; }

.vbc .tl-ev { position:absolute; top:var(--tl-as-y); transform:translateX(-50%);
  text-align:center; white-space:nowrap; }
.vbc .tl-stip { display:block; width:11px; height:11px; border-radius:50%; margin:0 auto;
  box-shadow:0 0 0 2px #fff; }
.vbc .tl-pec .tl-stip { background:var(--pec); }
.vbc .tl-tegen .tl-stip { background:var(--uit); }
/* Kaarten houden hun eigen kleur — geel is geel, ook in de kolom van de tegenstander. */
.vbc .tl-geel .tl-stip { background:var(--geel); border-radius:1px; width:8px; height:11px; }
.vbc .tl-rood .tl-stip { background:var(--rood); border-radius:1px; width:8px; height:11px; }
/* Een wissel is een streepje zonder label: acht per duel, en de naam is hier de voetnoot. */
.vbc .tl-wissel .tl-stip { width:2px; height:9px; border-radius:0; box-shadow:none; opacity:0.55; }
/* EXPLICIETE line-height, en dat is geen kosmetiek. De labelregels staan `--tl-regel`
   (16px) uit elkaar; zonder deze regel is het vakje van een label 17px hoog en raken twee
   opeenvolgende regels elkaar met precies één pixel. Gemeten op élke breedte — ook op 1440,
   waar ruimte genoeg is: "86'" (regel 0, 1514–1531) en "90+5' Brandt" (regel 1, 1530–1547).
   De opstapeling deed het goed; de regelhoogte niet. */
.vbc .tl-lab { position:absolute; left:50%; transform:translateX(-50%);
  font-size:11px; line-height:14px; font-weight:600; color:var(--ink); }
/* Aan de randen van de as lijnt het label uit op zijn stip in plaats van eromheen — anders
   steekt de halve labelbreedte buiten de kaart. Zie `vbc_tijdlijn`. */
.vbc .tl-randlinks .tl-lab { left:0; transform:none; }
.vbc .tl-randrechts .tl-lab { left:auto; right:0; transform:none; }
/* Boven de as groeit het label omhoog, eronder omlaag — en `--tl-rij` schuift het
   weg van zijn buurman zonder de stip mee te nemen. */
.vbc .tl-b .tl-stip { transform:translateY(-100%); }
.vbc .tl-b .tl-lab { bottom:calc(13px + var(--tl-rij) * var(--tl-regel)); }
.vbc .tl-o .tl-stip { transform:translateY(0); }
.vbc .tl-o .tl-lab { top:calc(13px + var(--tl-rij) * var(--tl-regel)); }

/* spelers */
.vbc .chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.vbc .chip { border:1px solid var(--lijn); background:var(--kaart); color:var(--zacht);
  font:inherit; font-size:13px; font-weight:600; border-radius:999px; padding:5px 12px;
  cursor:pointer; }
.vbc .chip:hover { color:var(--accent); border-color:var(--accent); }
.vbc .chip.aan { background:var(--accent); border-color:var(--accent); color:#fff; }
/* DE KOLOMKOPPEN PASSEN, EN DAT IS GEMETEN IN PLAATS VAN GEKOZEN. Sinds de vierde kolom
   de naam van de gekozen sorteerstat draagt, moet er een langer woord in ('weggewer.',
   'passnauw.', 'wegge./90'). Gemeten met een kloon op één regel: op 11px MET
   letter-spacing en HOOFDLETTERS liep élk van de 66 kop/context-combinaties over zijn
   spoor — dus ook 'MIN TOT' en 'RAPPORT', die daar al die tijd al niet in pasten. Het viel
   niet op omdat de overloop in het gat ernaast viel; de vierde kolom bracht een buur mee
   en toen botste het. Op 10px, kleine letters en met deze sporen is het tekort op alle
   acht de gemeten breedtes 0. */
.vbc .rijkop { display:grid; grid-template-columns:1fr 44px 44px 58px 52px; gap:6px;
  padding:0 10px 6px; font-size:10px; letter-spacing:0.2px;
  color:var(--dim); }
.vbc .rijkop span:not(:first-child) { text-align:right; }
/* DE KOP MAG NIET OVER ZIJN BUUR VALLEN — EN OOK NIET ONLEESBAAR WORDEN. De vierde kolom
   draagt sinds 8 sep de naam van de gekozen sorteerstat, en die is breder dan zijn spoor
   (52px, 44px op smal): 'weggewerkte ballen/90' liep dwars over 'RAPPORT' heen. Een
   grens-check die vraagt of de tekst in de KAART staat ziet dat niet — twee koppen kunnen
   prima binnen de kaart over elkaar heen liggen.
   AFKNIPPEN WAS DE EERSTE FIX EN DIE WAS SLECHTER: gemeten op 390px heeft 'min tot' 49px
   nodig in een spoor van 38 en 'rapport' 54 in 46, dus met ellipsis werd ÉLKE kop 'MIN …',
   'RAPP…'. Die koppen overliepen dus altijd al; het viel niet op omdat de overloop in de
   gaten ernaast viel. WIKKELEN lost beide op: gemeten heeft daarna geen enkele kop meer
   ruimte nodig dan zijn spoor (360 en 390px), en de kop wordt drie regels van 39px hoog.
   Het breekpunt komt uit een <wbr> in cijfers.js, anders breekt 'duels/90' als 'duels/9'. */
.vbc .rijkop span { overflow:hidden; white-space:normal; overflow-wrap:anywhere;
  min-width:0; }
/* En de vangrail hierboven is een VANGRAIL en niet het ontwerp: hij vangt het label dat
   iemand later toevoegt en dat niet meer past. Voor de elf kolommen van vandaag is
   gemeten dat er niets te wikkelen valt. */
.vbc .sp { border-top:1px solid var(--lijn); }
.vbc .sp .kop { display:grid; grid-template-columns:1fr 44px 44px 58px 52px; gap:6px;
  align-items:center; padding:9px 10px; cursor:pointer; width:100%; background:transparent;
  border:0; color:inherit; font:inherit; text-align:left; }
.vbc .sp .wie { font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px;
  min-width:0; }
.vbc .sp .wie .cdot { width:8px; height:8px; border-radius:50%; flex:none; }
.vbc .sp .wie .pos { color:var(--dim); font-weight:500; font-size:11.5px; }
.vbc .sp .v { text-align:right; font-size:13.5px; color:var(--zacht); }
.vbc .sp .rating { text-align:right; }
.vbc .rchip { display:inline-block; min-width:38px; text-align:center; font-weight:700;
  font-size:12.5px; border-radius:2px; padding:3px 6px; background:var(--vlak);
  color:var(--ink); }
.vbc .r8 { background:var(--pec); color:#fff; }
.vbc .r7 { background:#dbe6f6; color:var(--accent-d); }
.vbc .rlaag { background:#f7e2d8; color:var(--uitl); }
.vbc .sp .detail { display:none; padding:2px 10px 14px; }
.vbc .sp.open .detail { display:block; }
.vbc .sp.open .kop { background:#f4f7fc; }
.vbc .detail .toel { font-size:11.5px; color:var(--dim); margin-top:8px; }
.vbc .leeg { padding:18px 10px; color:var(--dim); font-size:13.5px; }

/* De voet draagt nog één regel: de bronbelofte. Het woordmerk dat hier stond is weg —
   de site-footer eronder heeft het al (zie vbc_voet). `.site` is met die ene gebruiker
   meeverdwenen. */
.vbc footer { margin-top:34px; border-top:1px solid var(--lijn); padding-top:16px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; align-items:baseline; }
.vbc .bron { font-size:12px; color:var(--dim); }
.vbc .verborgen { display:none !important; }

/* KPI-strip */
/* minmax(0,1fr) EN NIET 1fr. `1fr` is kortschrift voor `minmax(auto,1fr)`, en die `auto`
   laat een kolom uitdijen tot zijn min-content — dus tot het langste woord in het label.
   Gemeten op 390px: de vier kolommen kwamen uit op 46 / 87 / 73 / 86px, want 'TEAMRAPPORT'
   eist ruimte en 'STAND' niet. Vier tegels die 'gelijk' heten en het niet zijn, lezen als
   een fout in de cijfers. Met minmax(0,1fr) mag een kolom onder zijn min-content zakken en
   is een vierde ook echt een vierde. */
.vbc .kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px;
  margin:2px 0 14px; }
.vbc .kpi { background:var(--kaart); border:1px solid var(--lijn);
  border-radius:var(--radius); padding:12px 8px; text-align:center; }
.vbc .kpi .w { font-weight:700; font-size:22px; font-family:var(--serif); color:var(--ink); }
.vbc .kpi .l { font-size:10.5px; color:var(--dim); text-transform:uppercase;
  letter-spacing:0.5px; margin-top:3px; }
.vbc .vormblok { display:inline-flex; gap:3px; }
.vbc .vormblok i { width:16px; height:16px; border-radius:2px; display:inline-block;
  font-style:normal; font-size:10px; font-weight:700; color:#fff; text-align:center;
  line-height:16px; }
.vbc .wv { background:var(--pec); } .vbc .gv { background:var(--mid); } .vbc .vv { background:var(--uit); }

/* seizoensblok — de tegels staan hierboven, de duelbalken hieronder */
/* DEZE REGELS GELDEN VOOR BEIDE BLOKKEN, en dat is een les uit de meting van 8 sep.
   Het volgend-duel-blok hergebruikt de duelbalken van het seizoensblok, maar de opmaak
   ervan hing aan `.seizoenblok` — dus kreeg de kop van het nieuwe blok GEEN flex, geen
   kleur en op smal geen grid. Gemeten op 360px liepen 'PEC', de uitleg-regel en
   'Feyenoord' 28,5 en 72,5 pixels over elkaar heen. Zelfde markup, andere ouder, en de
   opmaak reisde niet mee — dat is niet te zien aan de HTML en niet aan de CSS, alleen aan
   het scherm. */
.vbc :is(.seizoenblok, .volgendblok) .kpis { margin-top:0; }
.vbc :is(.seizoenblok, .volgendblok) .aggkop { display:flex; justify-content:space-between; align-items:baseline;
  gap:10px; flex-wrap:wrap; border-top:1px solid var(--lijn); padding-top:12px; margin-top:2px; }
.vbc :is(.seizoenblok, .volgendblok) .aggkop .wie { font-size:12px; font-weight:700; letter-spacing:0.4px;
  text-transform:uppercase; }
.vbc :is(.seizoenblok, .volgendblok) .aggkop .voor { color:var(--pec); }
.vbc :is(.seizoenblok, .volgendblok) .aggkop .tegen { color:var(--uitl); }
.vbc :is(.seizoenblok, .volgendblok) .hoe { font-size:11px; color:var(--dim); font-weight:500;
  text-transform:none; letter-spacing:0; }

/* savant-sliders */
.vbc .sliders { margin-top:10px; }
.vbc .sgroep { font-size:10.5px; font-weight:700; letter-spacing:0.9px; text-transform:uppercase;
  color:var(--dim); margin:12px 0 4px; }
/* DE SLIDERLABELS PASSEN, EN OOK DAT IS GEMETEN (9 sep 2026). 'passnauwkeurigheid' had op
   12px 115,5px nodig in een spoor van 112 (94 op smal): 38 van de 102 zichtbare
   sliderrijen liepen over, en omdat `.m` RECHTS is uitgelijnd ging die overloop naar links
   het karton uit — daar werd hij afgeknipt, en op het scherm las dat als 'passnauwkeurighe'.
   Vier labels raakte het: passnauwkeurigheid (115,5), geslaagde dribbels (107,5),
   onderscheppingen (105,5) en tegendoelpunten (96,1).
   EEN DOOSCONTROLE KAN DIT NIET ZIEN, en dat is de les naast de fix: het VAK blijft 112px
   en netjes binnen de kaart; alleen de INKT loopt eruit. `getBoundingClientRect()` geeft
   het vak, dus zowel de kaart-toets als de burentoets meldde nul. Wat het wél ziet is de
   intrinsieke breedte: een kloon van het label op één regel, gelegd naast de ruimte die
   het spoor geeft. Zo is deze reeks ook gemeten, op 11px met deze sporen: tekort 0 op alle
   acht de breedtes, met de baan nog 147px breed op 360px. */
.vbc .srow { display:grid; grid-template-columns:118px 1fr; gap:10px; align-items:center;
  margin:7px 0; }
.vbc .srow .m { font-size:11px; color:var(--zacht); text-align:right; }
.vbc .strack { position:relative; height:14px; background:var(--vlak);
  border-radius:7px; }
.vbc .strack .vul { position:absolute; left:0; top:0; bottom:0; border-radius:7px; opacity:0.35; }
.vbc .strack .bub { position:absolute; top:50%; transform:translate(-50%,-50%); min-width:30px;
  height:20px; border-radius:10px; font-size:11px; font-weight:700; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #fff; }
.vbc .pill2 { display:flex; border:1px solid var(--lijn); border-radius:var(--radius);
  overflow:hidden; width:max-content; margin-top:10px; background:var(--kaart); }
.vbc .pill2 button { background:transparent; border:0; color:var(--zacht); font:inherit;
  font-size:12px; font-weight:600; padding:5px 12px; cursor:pointer; }
.vbc .pill2 button.aan { background:var(--accent); color:#fff; }

/* vraag de cijfers */
.vbc .vragen { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.vbc .antwoord { border-left:4px solid var(--accent); background:#f4f7fc;
  border-radius:0 var(--radius) var(--radius) 0; padding:14px 16px; }
.vbc .antwoord h3 { font-family:var(--serif); font-size:17px; font-weight:700;
  color:var(--ink); margin-bottom:4px; }
.vbc .antwoord p { font-size:14px; color:var(--zacht); line-height:1.5; }
.vbc .ai-label { font-size:11.5px; color:var(--dim); margin-top:8px; }

/* "De verhalen achter de cijfers" — de rubriek onder de pagina.
   Bewust GEEN kaartjes met beeld: dit is een uitleiding naar het archief en geen tweede
   voorpagina. Een lijst met een scheidingslijn per regel leest als een inhoudsopgave, en dat
   is precies wat het is. De kop en de sub erven van `.kaart`, dus dit blok kan niet uit de
   pas lopen met de rest van de pagina. */
.vbc .vbc-verhalen-lijst { list-style:none; margin:0; padding:0; }
.vbc .vbc-verhalen-lijst li { border-top:1px solid var(--lijn); padding:10px 0;
  display:flex; align-items:baseline; gap:10px; justify-content:space-between; }
.vbc .vbc-verhalen-lijst li:first-child { border-top:0; padding-top:2px; }
.vbc .vbc-verhalen-lijst a { color:var(--ink); text-decoration:none; font-weight:600;
  font-size:15px; line-height:1.35; }
.vbc .vbc-verhalen-lijst a:hover { color:var(--accent); text-decoration:underline; }
/* De datum krimpt niet mee en breekt niet af: hij is de kortste kolom en hoort rechts
   uitgelijnd te blijven staan, ook als de kop over twee regels loopt. */
.vbc .vbc-verhalen-datum { color:var(--dim); font-size:12px; white-space:nowrap;
  flex:0 0 auto; }
.vbc .vbc-verhalen-meer { margin-top:12px; font-size:13.5px; }
.vbc .vbc-verhalen-meer a { color:var(--accent); text-decoration:none; font-weight:600; }
.vbc .vbc-verhalen-meer a:hover { text-decoration:underline; }
@media (max-width:520px) {
  /* Op smalle schermen naast elkaar zetten kost de kop zijn leesbaarheid: de datum gaat
     eronder staan in plaats van de titel in een kolom van vier tekens te duwen. */
  .vbc .vbc-verhalen-lijst li { flex-direction:column; gap:2px; }
}

/* duelkiezer */
.vbc .duels { display:flex; gap:8px; overflow-x:auto; padding:10px 2px 12px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.vbc .duels::-webkit-scrollbar { display:none; }
.vbc .duel { flex:none; border:1px solid var(--lijn); border-radius:var(--radius);
  background:var(--kaart); padding:7px 12px; cursor:pointer; text-align:center;
  color:var(--zacht); font:inherit; }
.vbc .duel:hover { border-color:var(--accent); }
.vbc .duel .t { font-size:11px; color:var(--dim); }
.vbc .duel .u { font-weight:700; font-size:13.5px; color:var(--ink); }
.vbc .duel.aan { border-color:var(--accent); background:#eaf0fa;
  box-shadow:inset 0 0 0 1px var(--accent); }
/* HET KAARTJE VAN HET VOLGENDE DUEL draagt geen uitslag maar een tijdstip, en hoort visueel
   niet tussen de gespeelde duels te verdwijnen: gestippelde rand, want er valt nog niets te
   melden. Het staat rechts in de rij — links het verleden, rechts wat komt. */
.vbc .duel-volgend { border-style:dashed; }
.vbc .duel-volgend .u { font-weight:600; font-size:11.5px; color:var(--dim); }
.vbc .duel-volgend.aan { border-style:solid; }
.vbc .volgendblok .kpis { grid-template-columns:repeat(4,minmax(0,1fr)); }

/* pizza */
.vbc .pizzawrap { margin-top:6px; }
.vbc .pizzaleg { display:flex; gap:14px; font-size:11.5px; color:var(--zacht); margin-top:8px;
  flex-wrap:wrap; }
.vbc .pizzaleg i { display:inline-block; width:9px; height:9px; border-radius:2px;
  margin-right:5px; }
.vbc .pizza { display:flex; gap:16px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.vbc .pizza svg { flex:none; width:100%; max-width:360px; }

/* vorm-matrix */
.vbc .matrixwrap { overflow-x:auto; }
.vbc .matrix { display:grid; gap:4px; align-items:center; min-width:330px; }
.vbc .matrix .kopcel { font-size:10.5px; color:var(--dim); text-align:center;
  text-transform:uppercase; letter-spacing:0.4px; }
.vbc .matrix .naamcel { font-size:12.5px; font-weight:700; text-align:right; padding-right:6px; }
.vbc .cel { height:30px; border-radius:2px; display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:700; color:#fff; }
.vbc .cel.n0 { background:var(--vlak); color:var(--dim); font-weight:500; }

/* dumbbell */
.vbc .dumb { display:grid; grid-template-columns:96px 1fr 120px; gap:6px 12px;
  align-items:center; margin:10px 0; }
.vbc .dumb .wie { font-size:13px; font-weight:700; text-align:right; }
.vbc .dumb .as { position:relative; height:20px; }
.vbc .dumb .as .spoor { position:absolute; left:0; right:0; top:9px; height:2px;
  background:var(--lijn); }
.vbc .dumb .as .lijn { position:absolute; top:9px; height:2px; }
.vbc .dumb .as .van { position:absolute; top:5px; width:10px; height:10px; border-radius:50%;
  background:#c7ccd4; transform:translateX(-50%); }
.vbc .dumb .as .nu { position:absolute; top:3px; width:14px; height:14px; border-radius:50%;
  transform:translateX(-50%); box-shadow:0 0 0 2px #fff; }
.vbc .dumb .wat { font-size:11.5px; color:var(--dim); }
.vbc .dumb .wat b { font-size:13px; }
.vbc .op .lijn, .vbc .op .nu { background:var(--pec); } .vbc .op .wat b { color:var(--pec); }
.vbc .af .lijn, .vbc .af .nu { background:var(--uit); } .vbc .af .wat b { color:var(--uitl); }

/* de schaduwbanner — alleen zichtbaar zolang de pagina niet publiek is */
.vbc .schaduw { background:#fdf3e6; border:1px solid #e3c48f;
  border-radius:var(--radius); padding:10px 13px; margin:12px 0 0; font-size:13px;
  color:#7a5410; }

/* noscript-terugval: een PLATTE tabel, bewust geen tweede uitvoering van het ontwerp */
.vbc .zonderjs { margin-top:16px; }
.vbc .zonderjs table { width:100%; border-collapse:collapse; font-size:13.5px; }
.vbc .zonderjs th, .vbc .zonderjs td { border-bottom:1px solid var(--lijn); padding:6px 4px;
  text-align:left; }
.vbc .zonderjs td + td, .vbc .zonderjs th + th { text-align:right; }

/* MOBIEL-EERST betekent hier: de bovenstaande maten zijn de telefoonmaten, en dit is de
   enige plek waar het scherm groter mag worden. Andersom (desktop eerst, dan afknijpen)
   levert een telefoonlayout op die niemand ooit als geheel heeft gezien. */
/* DE KPI-STRIP GAAT NAAR TWEE BREED BENEDEN 560px, en dat is een HERZIENING.

   Hier stond, in het telefoonblok hieronder: 'DE KPI-STRIP BLIJFT VIER BREED, ook op een
   telefoon — zo staat hij in de referentie en zo is hij één oogopslag. Een 2x2-rooster leest
   als twee groepjes van twee.' Drie dingen hebben die afweging omgeduwd.

     * VIER BREED PASTE NIET, en dat stond op het scherm. Op 390px houdt de kaart na zijn
       binnenmarge 300px over; vier tegels worden dan 69px terwijl 'TEAMRAPPORT' er ~68 eist.
       In het vóór-beeld van 8 september loopt de vierde tegel buiten de kaart en staat er
       'TEAMRAPPOR'. De afweging was afgemeten aan de tegellabels van de mock, niet aan de
       onze.
     * ER ZIJN ER NU ACHT. Het seizoensblok zet een tweede rij tegels onder de eerste
       (punten, w–g–v, doelpunten, gespeeld). Acht tegels van 69px is geen oogopslag maar een
       raster; twee kolommen van 145px geeft elk label zijn volle woord.
     * DE GRENS IS GEMETEN EN NIET GEKOZEN, en hij ligt hoger dan de telefoon. De breedste
       tegel is niet een tekstlabel maar de VORM-tegel: vijf badges van 16px met 3px ertussen
       is 92px, plus marge 110px min-content. Vier daarvan naast elkaar vraagt 4×110 + 3×8 =
       464px binnen de kaart, oftewel een viewport van ~560. Op 430px — een telefoon in
       liggende stand is dat niet eens — liep de rij dus nog steeds over (gemeten:
       kpis 332→349). En let op de VIJF: vandaag staan er vier badges omdat er vier duels
       gespeeld zijn. De tegel wordt vanzelf breder zodra het er vijf zijn, en dan zou een
       grens die op de stand van vandaag is geijkt alsnog breken.

   Op desktop blijven het er vier: daar is de ruimte er wél en daar is de rij één oogopslag. */
/* OP EEN SMAL SCHERM ALLEEN DE MINUUT, de naam eronder — precies de uitweg die de
   ontwerpbrief noemt. De namen van de doelpuntenmakers staan een paar centimeter hoger al
   onder de score ("⚽ 45+1' Kostons · 5' Chery · …"), dus de tijdlijn verliest hier geen
   informatie: hij houdt zijn momenten en laat de namen aan de regel die er ruimte voor
   heeft. Gemeten met de namen erbij: 3 elkaar rakende labels op 360px, 2 op 390, 1 op 414. */
@media (max-width:480px) {
  .vbc .tl-naam { display:none; }
}

@media (max-width:560px) {
  .vbc .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* DE KOP BOVEN DE BALKEN WORDT EEN ROOSTER, want een flexrij die WRAPT zet zijn derde
     item links op de volgende regel — en dat derde item is 'TEGENSTANDERS', het label van de
     RECHTER kolom. Op 390px stond het dus onder 'PEC', aan de kant van de andere ploeg.
     Een label dat de verkeerde kant aanwijst is erger dan geen label. Met een rooster
     houden de twee ploegnamen hun eigen zijde en zakt alleen de uitleg een regel. */
  .vbc :is(.seizoenblok, .volgendblok) .aggkop { display:grid; grid-template-columns:1fr auto; gap:2px 10px; }
  .vbc :is(.seizoenblok, .volgendblok) .aggkop .voor  { grid-area:1 / 1; }
  .vbc :is(.seizoenblok, .volgendblok) .aggkop .tegen { grid-area:1 / 2; text-align:right; }
  .vbc :is(.seizoenblok, .volgendblok) .aggkop .hoe   { grid-area:2 / 1 / 3 / 3; }
}

@media (max-width:420px) {
  .vbc h1 { font-size:27px; }
  .vbc .score { font-size:30px; }
  .vbc .kaart { padding:13px; }
  .vbc .kpi { padding:10px 6px; }
  .vbc .kpi .w { font-size:19px; }
  .vbc .kpi .l { font-size:9px; letter-spacing:0.3px; }
  /* Clubnamen: 'NEC Nijmegen' brak op 390px over twee regels en duwde het scorebord scheef.
     Kleiner zetten houdt het bord één regel hoog zonder de naam af te knippen. */
  .vbc .club { font-size:14px; }
  .vbc .club .kleur { margin:0 4px; }
  .vbc .kicker .naam { letter-spacing:1.2px; font-size:11px; }
  .vbc .rijkop, .vbc .sp .kop { grid-template-columns:1fr 40px 44px 56px 46px; }
  .vbc .verg .rij { grid-template-columns:1fr 104px 1fr; }
  .vbc .verg .naam { font-size:11px; }
  .vbc .srow { grid-template-columns:108px 1fr; }
  .vbc .dumb { grid-template-columns:80px 1fr 96px; }
}