/* ════════════════════════════════════════════════════════════════════════
   brand.css - de merklaag van de Canal Motorboats-app
   ────────────────────────────────────────────────────────────────────────
   Dit bestand wordt als LAATSTE stylesheet in elke pagina geladen en zet de
   --bb-*-tokens en een reeks structurele regels om naar het merkpaspoort van
   Canal Motorboats. De basisbestanden (styles/shared-prototype.css,
   src/tour/tour.css, src/live/live-tour.css, styles/bb-sheet.css en de
   inline <style>-blokken in pages/*.html) blijven de generieke laag.

   WAAROM ELKE SELECTOR MET `html:root:root` BEGINT
   -----------------------------------------------
   Dit bestand stamt uit de white-label-fase, waarin elke regel onder een
   attribuutselector op <html> hing (`html:root[data-...]`): specificiteit
   (0,2,1).
   Dat was geen toeval. `:root[data-theme="dark"]` en
   `:root[data-theme="light"]` in de basisbestanden zijn (0,2,0), en
   meerdere pagina's (index.html, live.html, status.html) dragen hun tokens
   INLINE in een <style>-blok dat NA de stylesheet-links staat. Bij gelijke
   specificiteit wint dan de pagina, niet dit bestand. Een kale `:root`
   (0,1,0) of `:root .x` (0,2,0) zou dus in donkere modus verliezen van elke
   `:root[data-theme="dark"] .x` (0,3,0) in de basis - gemeten op 40 van de
   185 descendant-selectors hieronder (2026-09-07).

   `html:root:root` telt per de Selectors-spec elke herhaalde pseudo-klasse
   mee en komt daarmee exact op dezelfde (0,2,1) als die oude selector.
   Het cascade-gedrag van de gemeten white-label-bouw blijft zo byte-gelijk.
   Vereenvoudig dit NIET naar `:root`.

   BRON VAN DE KLEUREN
   -------------------
   Het merkpaspoort is op 2026-08-06 met getComputedStyle van de LIVE site
   canalmotorboats.com gemeten, niet geschat. Letterlijk overgenomen:
     --bs-primary        #00498E  merknavy, draagt bijna alles (276 elementen)
     --bs-secondary      #FF9D00  oranje, UITSLUITEND de primaire actie (8)
     --bs-secondary-dark #07335D  diepnavy, donkere vlakken
     --bs-primary-light  #ECF0F5  lichte tint
     --bs-light          #D9E2EC  rail, verdiept vlak
     --bs-highlight      #F9F1EA  warme tint
     --bs-midlight       #E6E0D9
     --bs-middark        #D6D6D6
     --bs-success        #95C22B
     --bs-warning        #FECD58
     --bs-dark           #333333
     paginavlak          #FFFFFF  echt wit (95 elementen)
   Typografie: koppen en knoppen Baloo Bhaijaan 2 700 (h1 32 px, h2 24 px in
   #00498E), lopende tekst Open Sans 400 16 px in #00498E - hun body-kleur IS
   de merknavy. Knoppen: pill, border-radius 30 px, padding 10px 15px.

   WAT WEL AFGELEID IS, EN WAAROM
   De merksite kent geen TINT-schaal en geen donkere modus. Vier waarden zijn
   daarom afgeleid en hieronder per stuk gemeten:
     #EFF6DE  groene tint (uit #95C22B)
     #FFF4D9  amber tint  (uit #FECD58)
     #04203A  donker paginavlak (een stap onder #07335D, zelfde tint 209 graden)
     #B3C4D6  tweede accentniveau in donker (een stap onder #D9E2EC)
   plus drie inkten voor die tinten: #3F5410, #5E4400, #7A4300.

   HET CONTRASTBESLUIT OVER HET ORANJE - DIT IS EEN BESLUIT, GEEN SUGGESTIE
   -----------------------------------------------------------------------
   #FF9D00 heeft een RELATIEVE LUMINANTIE van 45,4% (HSL-lichtheid 50,0%).
   De huisregel in CLAUDE.md staat wit alleen toe op vlakken onder 25%
   lichtheid, en de meting bevestigt waarom:
     wit     op #FF9D00 =  2,08:1  FAIL
     #07335D op #FF9D00 =  6,14:1  AA   <- DIT is de inkt op oranje
     #00498E op #FF9D00 =  4,30:1  FAIL voor normale tekst (alleen AA-large)
     #333333 op #FF9D00 =  6,06:1  AA
   De merksite zelf zet WEL wit op zijn oranje knoppen. Wij wijken daar
   BEWUST van af en zetten het diepnavy #07335D als inkt: dat is dezelfde
   merkfamilie, het haalt AA, en het is de enige lezing die met de huisregel
   te verenigen is. Zie --bb-action-on hieronder.
   Wit MAG wel op de twee navy's: 8,96:1 op #00498E en 12,80:1 op #07335D.
   Op het merkgroen #95C22B mag het niet (2,09:1); daar is #07335D de inkt
   (6,11:1).

   ALLE METINGEN (WCAG 2.1 relatieve luminantie, uitgerekend 2026-08-06)
     LICHT
       #00498E op #FFFFFF =  8,96:1   lopende tekst en koppen
       #07335D op #FFFFFF = 12,80:1   structurele inkt
       #00498E op #ECF0F5 =  7,83:1   merknavy op de lichte tint
       #07335D op #ECF0F5 = 11,18:1   diepnavy op de lichte tint
       #00498E op #D9E2EC =  6,84:1   merknavy op de rail
       #07335D op #D9E2EC =  9,78:1   diepnavy op de rail
       #7A4300 op #F9F1EA =  7,15:1   actie-inkt op de warme tint
       #3F5410 op #EFF6DE =  7,60:1   groene inkt op de groene tint
       #5E4400 op #FFF4D9 =  8,34:1   amber-inkt op de amber-tint
       #3F5410 op #FFFFFF =  8,44:1   success-inkt op wit
       #5E4400 op #FFFFFF =  9,12:1   warning-inkt op wit
       #7A4300 op #FFFFFF =  7,98:1   actie-inkt op wit
       rgba(7,51,93,0.68) op #FFFFFF = 4,88:1   gedempte tekst
     DONKER
       #ECF0F5 op #04203A = 14,42:1   lopende tekst
       #ECF0F5 op #07335D = 11,18:1   lopende tekst op het kaartvlak
       #D9E2EC op #04203A = 12,60:1   accent
       #D9E2EC op #07335D =  9,78:1   accent op het kaartvlak
       #B3C4D6 op #04203A =  9,26:1   accent tweede niveau
       #B3C4D6 op #07335D =  7,18:1   accent tweede niveau op het kaartvlak
       #FF9D00 op #04203A =  7,92:1   de actiekleur zelf
       #FFC46B op #04203A = 10,50:1   lichte actie-inkt
       #B7DE4E op #04203A = 10,66:1   licht merkgroen
       #FECD58 op #04203A = 11,07:1   merkgeel
       #FFFFFF op #0C4275 = 10,23:1   wit op het verhoogde vlak
       rgba(236,240,245,0.72) op #04203A = 8,01:1   gedempte tekst
     DE OMGEKEERDE KANT VAN DE CHROOM-AS IN DONKER
       wit     op #D9E2EC =  1,31:1   onleesbaar - vandaar de uitzondering
       #07335D op #D9E2EC =  9,78:1
       #07335D op #B3C4D6 =  7,18:1

   DONKERE MODUS: GEEN TWEEDE HUISSTIJL
   Canal Motorboats heeft geen eigen donkere identiteit. Deze modus klapt de
   NAVY-as van het merk om in plaats van er een nieuwe as bij te verzinnen:
   het diepste vlak zit in de #07335D-familie, de vlakken erboven zijn navy-
   tinten, en het oranje blijft ongewijzigd omdat het daardoor de enige
   verzadigde kleur op het scherm is - precies de actiegrammatica die de
   lichte modus ook hanteert. Het KAARTCANVAS blijft er bewust buiten:
   kaart-hertinting staat op het won't-do-register.

   WAT DIT NIET DEKT
   De basislaag bevat nog hardcoded hex-literals BUITEN de --bb-*-tokens
   (het oude blauw #3366FF, navy #091C35 en cyaan #69FEFF). Tel ze zelf:
       grep -rEoh "#(3366FF|091C35|69FEFF|3367FF)" src pages styles | wc -l
   Die plekken worden hieronder per geval overschreven; de rest wacht op de
   tokenisatiefase.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Self-hosted merkfonts ────────────────────────────────────────────────
   Baloo Bhaijaan 2 (koppen en knoppen, gewicht 700) en Open Sans (lopende
   tekst, 400 en 600) zijn de fonts die de merksite zelf gebruikt. Ze zijn
   allebei vrij beschikbaar, dus er is geen substitutie nodig.
   Zelfde aanpak als styles/fonts.css: ZELF GEHOST, GEEN round-trip naar
   fonts.googleapis.com. Dat scheelt een render-blokkade, werkt offline in de
   PWA en houdt de CSP dicht. Latin-subset; de unicode-range is dezelfde als
   die van Libre Franklin in styles/fonts.css.

   De woff2-bestanden staan in /assets/fonts/ en worden door service-worker.js
   (SHELL_ASSETS) geprecachet.                                              */
@font-face{
  font-family:'Baloo Bhaijaan 2';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/baloo-bhaijaan-2-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/open-sans-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/open-sans-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── LICHT ────────────────────────────────────────────────────────────── */
html:root:root,
html:root:root[data-theme="light"]{
  /* Merkkleuren. De app kent historisch de rollen navy/blue/cyan/red. Dit
     merk kent geen cyaan en geen rood, dus die twee sleuven krijgen de lichte
     navy-tint respectievelijk de actiekleur - dezelfde
     zelfde rolwissel als bij de andere merkfamilies hieronder. */
  --bb-navy:  #07335D;   /* structureel donker: koppen op glas, outlines     */
  --bb-blue:  #00498E;   /* merknavy: secundair / navigeren, draagt bijna alles */
  --bb-cyan:  #D9E2EC;   /* licht accent, UITSLUITEND op donkere vlakken     */
  --bb-red:   #FF9D00;   /* het merk kent geen rood; de actiekleur vult deze rol */

  /* ACTIEGRAMMATICA. Oranje = doen, exact een primaire CTA per view; de
     merksite gebruikt het op precies 8 van de 379 zichtbare elementen. Alles
     wat navigeert of nuanceert zit in de navy-familie. Nooit omdraaien. */
  --bb-action:      #FF9D00;
  --bb-action-ink:  #7A4300;   /* donkere zelfde-tint tekst OP de warme tint, 7,15:1 */
  --bb-action-tint: #F9F1EA;   /* --bs-highlight, de warme merktint                  */
  --bb-action-on:   #07335D;   /* 6,14:1 - NIET wit, dat haalt 2,08. Zie de kop.     */

  /* Merkfamilies die de app niet als rol kent, maar dit bestand wel nodig
     heeft. Een-op-een de gemeten --bs-*-tokens. */
  --bb-brand-navy:    #00498E;
  --bb-brand-deep:    #07335D;
  --bb-brand-orange:  #FF9D00;
  --bb-primary-light: #ECF0F5;
  --bb-light:         #D9E2EC;
  --bb-highlight:     #F9F1EA;
  --bb-midlight:      #E6E0D9;
  --bb-middark:       #D6D6D6;
  --bb-green:         #95C22B;
  --bb-yellow:        #FECD58;
  --bb-dark:          #333333;

  /* Vlakken en inkt. Het paginavlak is ECHT wit - dat is het merk, gemeten op
     95 zichtbare elementen. Kaarten zijn daarom ook wit en krijgen hun
     scheiding van de haarlijn plus de zachte schaduw, niet van een vulling.
     Dat is precies hoe de merksite het doet. */
  --bb-bg-page:    #FFFFFF;
  --bb-bg-card:    #FFFFFF;
  --bb-bg-tinted:  #ECF0F5;
  --bb-bg-elevated:#ECF0F5;
  --bb-bg-shadow:  rgba(7, 51, 93, 0.10);
  --bb-card-bg:    #FFFFFF;
  --bb-elev-bg:    #ECF0F5;
  --bb-offwhite:   #FFFFFF;

  /* Lopende tekst IS de merknavy (gemeten body-kleur #00498E, 8,96:1 op wit).
     Gedempte tekst zakt naar het diepnavy met alpha, zodat hij binnen dezelfde
     tint blijft in plaats van naar grijs te lopen. */
  --bb-fg-default: #00498E;
  --bb-fg-muted:   rgba(7, 51, 93, 0.68);
  --bb-fg-subtle:  rgba(7, 51, 93, 0.50);
  --bb-fg-faint:   rgba(7, 51, 93, 0.38);
  --bb-text:       #00498E;
  --bb-muted:      rgba(7, 51, 93, 0.68);

  --bb-border:        rgba(7, 51, 93, 0.14);
  --bb-border-subtle: #D9E2EC;
  --bb-shadow:        0 4px 16px rgba(7, 51, 93, 0.08);

  /* Tinten - zacht, nooit verzadigd als blokachtergrond (huisregel). Het merk
     levert er twee kant en klaar (#ECF0F5 en #F9F1EA); de groene en de amber
     tint zijn afgeleid uit #95C22B en #FECD58 en hieronder gemeten. Paars
     bestaat niet in dit merk en leent de lichte navy-tint. */
  --bb-accent-green-tint: #EFF6DE;
  --bb-accent-red-tint:   #F9F1EA;
  --bb-accent-amber-tint: #FFF4D9;
  --bb-accent-blue-tint:  #ECF0F5;
  --bb-accent-purple-tint:#ECF0F5;
  --bb-light-blue:        #ECF0F5;
  --bb-red-tint:          #F9F1EA;
  --bb-warning-tint:      #FFF4D9;

  /* Inkt-op-tint paren, allemaal donkere zelfde-tint tekst (huisregel). */
  --bb-ink-green:  #3F5410;   /* 7,60:1 op #EFF6DE */
  --bb-ink-red:    #7A4300;   /* 7,15:1 op #F9F1EA */
  --bb-ink-amber:  #5E4400;   /* 8,34:1 op #FFF4D9 */
  --bb-ink-blue:   #07335D;   /* 11,18:1 op #ECF0F5 */
  --bb-ink-purple: #07335D;
  --bb-red-text:   #7A4300;
  --bb-warning-text: #5E4400;

  /* Accentdots en badges - de enige plek waar verzadigd merk mag staan. */
  --bb-acc-green:  #3F5410;
  --bb-acc-red:    #FF9D00;
  --bb-acc-amber:  #5E4400;
  --bb-acc-blue:   #00498E;
  --bb-acc-purple: #07335D;
  --bb-success:    #3F5410;   /* 8,44:1 op wit; het merkgroen zelf haalt 2,09 */
  --bb-warning:    #5E4400;   /* 9,12:1 op wit; het merkgeel zelf haalt 1,53  */
  --bb-warning-accent: #5E4400;
  --bb-blue-active:#07335D;

  /* Verbindingsstatus-balk */
  --bb-conn-navy:  #07335D;
  --bb-conn-cyan:  #D9E2EC;
  --bb-conn-green: #95C22B;

  /* Focusring - de merknavy in plaats van het oude basisblauw */
  --bb-focus-ring:         0 0 0 3px rgba(0, 73, 142, 0.24);
  --bb-focus-ring-on-navy: 0 0 0 3px rgba(217, 226, 236, 0.34);

  /* Glas (licht = frosted wit met diepnavy inkt, 12,80:1) */
  --bb-glass-shadow:    0 8px 30px rgba(7, 51, 93, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.60);
  --bb-glass-ink:       #07335D;
  --bb-glass-ink-muted: rgba(7, 51, 93, 0.66);
  --bb-glass-ink-faint: rgba(7, 51, 93, 0.46);
  --bb-glass-hairline:  rgba(7, 51, 93, 0.12);

  /* Altijd-donker glas (kaartlegenda's, live-tour-paneel). THEMA-ONAFHANKELIJK:
     dit blok draagt met opzet geen thema-selector, want de kaartlegenda en het
     live-tour-paneel zijn in beide thema's donker. Het diepnavy op 0,86 met
     #D9E2EC als accent (9,78:1 op het dekkende equivalent). */
  --bb-glass-dark-bg:     rgba(4, 32, 58, 0.86);
  --bb-glass-dark-border: rgba(255, 255, 255, 0.16);
  --bb-glass-dark-accent: #D9E2EC;

  /* Typografie. Open Sans voor tekst en UI, Baloo Bhaijaan 2 voor koppen. */
  --bb-font:      'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bb-font-head: 'Baloo Bhaijaan 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Knoppen zijn pillen: gemeten border-radius 30 px (de basis gebruikt 0). */
  --bb-btn-radius: 30px;
}

/* ── DONKER - DE NAVY-AS OMGEKLAPT ───────────────────────────────────────
   Canal Motorboats heeft geen eigen donkere identiteit: de merksite tekent
   alleen licht. In plaats van er een tweede huisstijl bij te verzinnen klapt
   deze modus de as om die het merk WEL heeft: wit #FFFFFF naar diepnavy
   #07335D. Daardoor leest donker als dezelfde app, en wordt het oranje
   sterker omdat het de enige verzadigde kleur op het scherm is - exact de
   actiegrammatica die de lichte modus ook hanteert.
     pagina    #04203A   een stap onder het diepnavy, zelfde tint (209 graden)
     kaart     #07335D   het merk-diepnavy, het vlak erboven
     verhoogd  #0C4275   een stap boven het merknavy
     accent    #D9E2EC   --bs-light, 33% verzadiging
     actie     #FF9D00   ongewijzigd, met #07335D erop (6,14:1)
   Het kaartcanvas blijft ongemoeid (won't-do-register).

   TOKENS DIE HIER OPNIEUW STAAN, EN WAAROM DAT MOET
   Een token dat alleen in het basisblok hierboven staat, HOUDT zijn lichte
   waarde in donker. Dat is precies de fout die een eerdere merkbouw een
   hele herstelronde kostte ("ik zie nog steeds veel groen in dark mode"). Elk
   token dat in donker een andere waarde nodig heeft staat daarom hieronder
   opnieuw. Wat bewust NIET terugkomt, en waarom:
     --bb-cyan            is in beide thema's #D9E2EC. Het is de rol "licht
                          accent op een DONKER vlak" en wordt uitsluitend op
                          altijd-donkere oppervlakken geconsumeerd (het
                          live-tour-paneel, .iw-detail, en regels die zelf al
                          onder [data-theme="dark"] hangen). Op wit zou het
                          1,31:1 halen; daar staat het dus ook nooit.
     --bb-action*         het oranje is in beide thema's gelijk; alleen de
                          INKT-op-tint en de tint zelf klappen om, en die twee
                          staan hieronder.
     --bb-navy            structureel donker, in beide thema's #07335D.
     --bb-glass-dark-*    thema-onafhankelijk, zie het basisblok.
     --bb-btn-radius,
     --bb-font*           vorm en typografie zijn thema-onafhankelijk.       */
html:root:root[data-theme="dark"]{
  --bb-bg-page:    #04203A;
  --bb-bg-card:    #07335D;
  --bb-bg-tinted:  rgba(217, 226, 236, 0.16);
  --bb-bg-elevated:#0C4275;
  --bb-bg-shadow:  rgba(0, 0, 0, 0.32);
  --bb-card-bg:    #07335D;
  --bb-elev-bg:    #0C4275;
  --bb-offwhite:   #07335D;

  --bb-fg-default: #ECF0F5;
  --bb-fg-muted:   rgba(236, 240, 245, 0.72);
  --bb-fg-subtle:  rgba(236, 240, 245, 0.50);
  --bb-fg-faint:   rgba(236, 240, 245, 0.40);
  --bb-text:       #ECF0F5;
  --bb-muted:      rgba(236, 240, 245, 0.68);

  --bb-border:        rgba(236, 240, 245, 0.16);
  --bb-border-subtle: rgba(236, 240, 245, 0.10);
  --bb-shadow:        0 4px 16px rgba(0, 0, 0, 0.40);

  /* De tinten worden doorschijnend zodat ze over pagina en kaartvlak
     composeren. Gemeten met hun eigen inkt erop, op het paginavlak EN op het
     kaartvlak (de laagste van de twee staat erbij):
       blauw  8,32 / 6,51    groen 7,32 / 5,79
       amber  7,36 / 5,84    actie 7,50 / 6,07                              */
  --bb-accent-green-tint: rgba(149, 194, 43, 0.20);
  --bb-accent-red-tint:   rgba(255, 157, 0, 0.20);
  --bb-accent-amber-tint: rgba(254, 205, 88, 0.18);
  --bb-accent-blue-tint:  rgba(217, 226, 236, 0.16);
  --bb-accent-purple-tint:rgba(217, 226, 236, 0.16);
  --bb-light-blue:        rgba(217, 226, 236, 0.16);
  --bb-red-tint:          rgba(255, 157, 0, 0.20);
  --bb-warning-tint:      rgba(254, 205, 88, 0.18);

  /* Op donker draaien de inkt-op-tint paren om naar de LICHTE zelfde-tint. */
  --bb-ink-green:  #B7DE4E;
  --bb-ink-red:    #FFC46B;
  --bb-ink-amber:  #FECD58;
  --bb-ink-blue:   #D9E2EC;
  --bb-ink-purple: #D9E2EC;
  --bb-red-text:   #FFC46B;
  --bb-warning-text: #FECD58;

  --bb-action-ink: #FFC46B;
  --bb-action-tint:rgba(255, 157, 0, 0.20);

  --bb-focus-ring: 0 0 0 3px rgba(217, 226, 236, 0.30);
  /* Stond in het basisblok al op de lichte as, maar met een andere dekking;
     hier expliciet, zodat de ring op een donker vlak dezelfde zwaarte heeft
     als elders in deze modus. */
  --bb-focus-ring-on-navy: 0 0 0 3px rgba(217, 226, 236, 0.32);

  --bb-glass-bg:        rgba(7, 51, 93, 0.78);
  --bb-glass-border:    rgba(217, 226, 236, 0.28);
  --bb-glass-shadow:    0 6px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --bb-glass-ink:       rgba(236, 240, 245, 0.94);
  --bb-glass-ink-muted: rgba(236, 240, 245, 0.66);
  --bb-glass-ink-faint: rgba(236, 240, 245, 0.46);
  --bb-glass-hairline:  rgba(255, 255, 255, 0.12);
  --bb-glass-accent:    #D9E2EC;

  --bb-glass-dark-ink:       rgba(236, 240, 245, 0.94);
  --bb-glass-dark-ink-muted: rgba(236, 240, 245, 0.66);
  --bb-glass-dark-ink-faint: rgba(236, 240, 245, 0.46);

  /* CHROOM naar de LICHTE navy-as. Deze rollen kleuren knoppen, iconen, dots
     en focusringen - geen informatie. Zonder deze regels houden ze hun lichte
     waarde (#00498E, #07335D) en die verdwijnen op een donker vlak: #00498E
     haalt op #04203A maar 1,84:1.
       #D9E2EC eerste niveau   12,60:1 op de pagina, 9,78:1 op het kaartvlak
       #B3C4D6 tweede niveau    9,26:1 op de pagina, 7,18:1 op het kaartvlak */
  --bb-blue:        #D9E2EC;   /* secundair / navigeren                      */
  --bb-blue-active: #B3C4D6;   /* ingedrukte staat, een niveau dieper        */
  --bb-acc-blue:    #D9E2EC;   /* accentdot / badge-rand                     */
  --bb-acc-purple:  #D9E2EC;
  --bb-conn-navy:   #04203A;   /* het vangnet achter de statusbalk           */
  --bb-conn-cyan:   #D9E2EC;
  --bb-conn-green:  #B7DE4E;

  /* SEMANTISCHE kleuren blijven semantisch, maar leesbaar: de lichte inkten
     in plaats van de donkere. #3F5410 haalt op #04203A maar 1,54:1.
       #B7DE4E op #04203A = 10,66:1
       #FECD58 op #04203A = 11,07:1                                          */
  --bb-success:        #B7DE4E;
  --bb-warning:        #FECD58;
  --bb-warning-accent: #FECD58;
  --bb-acc-green:      #B7DE4E;
  --bb-acc-amber:      #FECD58;
  /* DATA-kleuren: het merkgroen en het merkgeel zelf, voor routelijnen en
     statusinformatie. Expliciet gelijk gehouden aan het basisblok zodat een
     toekomstige consument het echte merk krijgt en niet de inkt-variant.    */
  --bb-green:  #95C22B;   /*  7,88:1 op #04203A */
  --bb-yellow: #FECD58;   /* 11,07:1 op #04203A */
}

/* ── Witte tekst op de lichte chroom-as kan niet ─────────────────────────
   --bb-blue en --bb-blue-active zijn hierboven licht geworden, maar vijf
   gedeelde regels zetten hardcoded color:#fff OP dat token als knopvlak
   (src/live/live-tour.css:1169, :1227, :1640, src/live/live-polish.css:134,
   pages/feedback.html:229-230). Wit op #D9E2EC is 1,31:1 - onleesbaar, en de
   huisregel zegt: wit alleen op vlakken onder 25% lichtheid (#D9E2EC zit op
   88,8%). De gedeelde bestanden blijven generiek, dus hier de donkere
   inkt: #07335D op #D9E2EC is 9,78:1, op
   #B3C4D6 7,18:1.                                                           */
html:root:root[data-theme="dark"] .lt-sim-btn,
html:root:root[data-theme="dark"] .lt-pickup-share,
html:root:root[data-theme="dark"] body.lt-proto .lt-startbar-primary,
html:root:root[data-theme="dark"] .lt-gps-card-cta,
html:root:root[data-theme="dark"] .fb-submit{
  color:#07335D;
}
/* De ingedrukte staat van twee van die knoppen is een hardcoded basisblauw
   #2855e0 (live-tour.css:1171, :1230); met de donkere inkt hierboven zou dat
   onleesbaar flitsen. Zelfde tweede niveau als --bb-blue-active.            */
html:root:root[data-theme="dark"] .lt-sim-btn:active,
html:root:root[data-theme="dark"] .lt-pickup-share:active{
  background:#B3C4D6;
}
/* De start-CTA draagt een blauwe basisgloed als box-shadow-literal
   (live-tour.css:1642, rgba(51,102,255,0.42)); onder een lichte knop leest
   dat als defect.                                                           */
html:root:root[data-theme="dark"] body.lt-proto .lt-startbar-primary{
  box-shadow:0 4px 14px rgba(0, 0, 0, 0.35);
}
/* Het pictogram in die knop is hard op stroke:#fff gezet (live-tour.css:1648)
   en zou als enige wit overblijven op een lichte pil.                       */
html:root:root[data-theme="dark"] body.lt-proto .lt-startbar-primary svg{
  stroke:#07335D;
}

/* ── De LEGACY-aliassen, want die dragen de body ──────────────────────────
   src/tour/tour.css:43 zet
       body{ font-family:var(--font); color:var(--text); background:var(--white) }
   uit de LEGACY-aliasset in `:root` (tour.css:15-37), NIET uit de --bb-*
   tokens. Zonder deze drie regels blijft elke pagina in Libre Franklin op een
   basiswit vlak staan en is de hele merktypografie onzichtbaar. Ze horen
   in dit bestand en niet in tour.css, want het zijn merkwaarden.
   `:root` is (0,1,0), `html:root:root` is (0,2,1),
   dus deze winnen ongeacht de laadvolgorde.

   --white is in LICHT toevallig hetzelfde als de basiswaarde
   (#FFFFFF): het merkpaginavlak IS wit. De alias staat er toch, omdat --text
   en --font het wel nodig hebben en omdat de donkere variant hem hoe dan ook
   moet omklappen.                                                           */
html:root:root{
  --font:  var(--bb-font);
  --text:  #00498E;
  --white: #FFFFFF;
}
html:root:root[data-theme="dark"]{
  --text:  #ECF0F5;
  --white: #04203A;
}
/* En de pagina's die hun body-font NIET uit een token halen maar uit een
   hardcoded literal: pages/meer.html zet
   `font-family:'Libre Franklin', system-ui, sans-serif` rechtstreeks op body,
   pages/quiz.html doet iets vergelijkbaars. Die bestanden zijn niet van dit
   bestand om te wijzigen, maar `html:root:root body`
   is (0,2,2) tegen hun (0,0,1) en haalt het dus alsnog.

   BEWUST alleen font-family: geen background en geen color. Sommige pagina's
   (quiz) zetten hun body-canvas met opzet, en die mag deze regel niet
   omverduwen.                                                               */
html:root:root body{
  font-family:var(--bb-font);
}
/* Het navy vangnet van de basis achter de statusbalk op de vaarinfokaart.
   pages/vaarinfo.html:69-71 zet body
   `background:#091C35` hard, als "navy safety net ... visible behind the
   status bar". Het is NIET het kaartcanvas (dat blijft met rust,
   won't-do-register) maar de strook die de passagier boven en onder de kaart
   ziet, en dus basiskleur in een Canal Motorboats-app.

   Een rolwissel, geen ontwerpwijziging: dezelfde structurele donkere kleur uit
   het eigen paspoort (#07335D) in beide thema's. `.vi-stage` bestaat op
   precies een pagina en is daarmee de enige haak zonder een ander bestand
   aan te raken.

   Geen tekst op dit vlak - het is de strook achter de statusbalk en onder de
   home-indicator. #07335D haalt HSL-lichtheid 19,6% en relatieve luminantie
   3,2%, dus als er ooit wel tekst op landt mag die wit zijn (12,80:1).       */
html:root:root:has(.vi-stage),
html:root:root body:has(.vi-stage){
  background:#07335D;
}

/* ── Info & weetjes (/fun-facts) ──────────────────────────────────────────
   Die pagina draait op een EIGEN tokenset (--iw-*) in plaats van op --bb-*,
   dus de tokenlaag hierboven bereikt hem niet: src/fun-facts/fun-facts.css:18
   zet --iw-bg-soft op #F4F5F8 en :9 --iw-navy op het basisnavy #091C35. De
   tokens staan netjes op `:root` (0,1,0) respectievelijk
   `[data-theme="dark"]` in pages/fun-facts.html:250 (0,1,0), dus dit blok
   (0,2,1) en (0,3,1) wint van allebei.

   GEMETEN op de nieuwe vlakken:
     #00498E op #FFFFFF = 8,96:1   (tekst)
     #07335D op #FFFFFF = 12,80:1  (koppen)
     wit     op #00498E = 8,96:1   (de actieve filterchip, tekst hardcoded #fff)
     #ECF0F5 op #04203A = 14,42:1
     #ECF0F5 op #07335D = 11,18:1
     wit     op #0C4275 = 10,23:1  (de actieve filterchip in donker)          */
html:root:root{
  /* --iw-navy is de actieve filterchip (fun-facts.css:174-176, met een
     HARDCODED color:#fff) en de vetgedrukte woorden in een detailtekst. De
     vulling moet dus donker genoeg blijven voor wit: #00498E haalt 8,96:1 en
     zit met HSL-lichtheid 27,8% net boven de 25%-grens, maar met relatieve
     luminantie 6,7% ruim eronder - en de meting beslist, net als bij het
     oranje hierboven. */
  --iw-navy:        #00498E;
  --iw-bg-soft:     #FFFFFF;
  --iw-bg:          #FFFFFF;
  --iw-ink:         #00498E;
  --iw-muted:       rgba(7, 51, 93, 0.68);
  --iw-border:      rgba(7, 51, 93, 0.14);
  --iw-accent:      #00498E;
  --iw-accent-tint: #ECF0F5;
  --iw-shadow:      0 1px 3px rgba(7, 51, 93, 0.06);
  --iw-shadow-lg:   0 8px 32px rgba(7, 51, 93, 0.16);

  /* GETIJDENBANDEN op deze pagina. Bewust GEEN parallel bandsysteem: deze
     vier tokens leunen op de --cmb-band-*-waarden onderaan dit bestand, zodat
     /fun-facts dezelfde drie vlakken draait als /app/routes. Welk element
     welke band krijgt staat in het GETIJDENBANDEN-blok.
       band 1  de zoekrij      = het paginavlak (body draagt --iw-bg-soft)
       band 2  de chipsrij
       band 3  de resultatenlijst
     De chipsrij is 50 px hoog; met de golfrand erboven wordt dat 70. Die
     hoogte zit in de height-calc van .iw-main (fun-facts.css:190), dus hij
     MOET via dit token lopen en niet als losse regel. */
  --iw-chips-h:     70px;
  --iw-band-2:      var(--cmb-band-2);
  --iw-band-3:      var(--cmb-band-3);
  --iw-band-card:   var(--cmb-onband-card);
  --iw-band-shadow: var(--cmb-onband-shadow);
}
html:root:root[data-theme="dark"]{
  /* Op donker is #07335D al de INACTIEVE chip (--iw-bg), dus de actieve mag
     die kleur niet ook dragen. #0C4275 ligt er een stap boven en houdt wit
     op 10,23:1; #D9E2EC zou wit op 1,31:1 zetten en is dus onbruikbaar zolang
     fun-facts.css:175 de chiptekst hard op #fff zet. */
  --iw-navy:        #0C4275;
  --iw-bg-soft:     #04203A;
  --iw-bg:          #07335D;
  --iw-ink:         #ECF0F5;
  --iw-muted:       rgba(236, 240, 245, 0.68);
  --iw-border:      rgba(236, 240, 245, 0.16);
  --iw-accent:      #D9E2EC;
  --iw-accent-tint: rgba(217, 226, 236, 0.16);
  --iw-shadow:      0 4px 16px rgba(0, 0, 0, 0.45);
  --iw-shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.55);

  /* De banden klappen mee met --cmb-band-* hieronder; deze aliassen hoeven
     dus geen eigen donkere waarde. Ze staan hier toch NIET opnieuw, want een
     var()-alias wordt bij GEBRUIK opgelost, niet bij declaratie - de lichte
     declaratie hierboven pakt in donker vanzelf de donkere --cmb-waarde. Dat
     is precies andersom dan bij een LETTERLIJKE hex, en daarom staan de
     letterlijke waarden verderop wel dubbel. */
}
/* Het detailpaneel van /fun-facts is een ALTIJD-donker glaspaneel, in beide
   thema's - src/fun-facts/fun-facts.css:385-388 zet er letterlijk
   `rgba(9,28,53,0.72)` op, oftewel het basisnavy, met een basiscyaan
   linkerrand rgba(105,254,255,0.30). Dat is geen token, dus de --iw-*-laag
   hierboven bereikt het niet.

   Zelfde vorm, eigen merk: het diepe paginavlak op 0,78 met de accent-haarlijn
   ernaast. GEMETEN op de gecomposeerde paneelkleur: over de witte pagina wordt
   het #3B5165 (#D9E2EC = 6,29:1, #ECF0F5 = 7,19:1), over de donkere pagina
   #04203A (12,60:1 respectievelijk 14,42:1).                                 */
html:root:root .iw-detail{
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(4, 32, 58, 0) 30%),
    rgba(4, 32, 58, 0.78);
  border-left-color:rgba(217, 226, 236, 0.30);
  color:rgba(236, 240, 245, 0.94);
}
/* pages/fun-facts.html:239-243 zet de "Lees meer"-link op var(--bb-blue) in
   LICHT en var(--bb-cyan) in DONKER - maar de link staat in beide gevallen op
   dat altijd-donkere paneel. In licht zou --bb-blue (#00498E) daar 1,09:1
   halen. Vandaar in beide thema's de lichte accentkleur.                     */
html:root:root .iw-detail .iw-detail-link{
  color:#D9E2EC;
}

/* ── Typografie toepassen ────────────────────────────────────────────────
   Het paspoort schrijft koppen in Baloo Bhaijaan 2 700 voor, in het merknavy
   #00498E (h1 32 px, h2 24 px). GEEN uppercase:
   zetten deze koppen hun eigen kapitalisatie. Baloo Bhaijaan 2 is hier alleen
   in gewicht 700 gehost, dus dat is ook het enige gewicht dat gevraagd wordt.
   Line-height 1,2 - Baloo heeft ruime onderlengtes, 1,12 zou stapelen.       */
html:root:root h1,
html:root:root h2,
html:root:root h3,
html:root:root h4{
  font-family:var(--bb-font-head);
  font-weight:700;
  text-transform:none;
  letter-spacing:normal;
  line-height:1.2;
  color:var(--bb-brand-navy, #00498E);
}
html:root:root[data-theme="dark"] h1,
html:root:root[data-theme="dark"] h2,
html:root:root[data-theme="dark"] h3,
html:root:root[data-theme="dark"] h4{
  color:var(--bb-fg-default);
}
/* Koppen OP de systeemchroom (topbalk, tabbalk) erven hun kleur bewust van de
   ouder; de regel hierboven mag daar niet overheen. */
html:root:root .bb-header h1,
html:root:root .bb-header h2,
html:root:root .bb-header h3,
html:root:root .bb-mobile-nav h3{
  color:inherit;
}
html:root:root h5,
html:root:root h6{
  font-family:var(--bb-font-head);
  font-weight:700;
  text-transform:none;
}

/* ════════════════════════════════════════════════════════════════════════
   1. ACTIEGRAMMATICA
   ────────────────────────────────────────────────────────────────────────
   Oranje #FF9D00 = doen. Exact EEN primaire CTA per view; alles wat navigeert
   of nuanceert zit in de navy-familie. Identiek gedrag in licht en donker -
   de knop is in beide thema's dezelfde oranje pil, want het merk kent geen
   donkere variant van zijn actiekleur.

   Maten uit het gemeten paspoort: pill radius 30, gewicht 700 in de kopfamilie
   (de merksite zet knoptekst in Baloo Bhaijaan 2), padding 10/15 opgerekt naar
   15/22 voor de app-CTA, die vingergroot moet zijn.

   DE INKT IS #07335D EN NIET WIT. Zie het kopcommentaar: wit haalt 2,08:1 op
   dit oranje en zakt daarmee ver onder AA. Dit is de enige plek in het bestand
   waar wij bewust van de merksite afwijken.                                  */
html:root:root .bb-cta{
  background:var(--bb-action);
  color:var(--bb-action-on);
  border-radius:var(--bb-btn-radius);
  font-family:var(--bb-font-head);
  font-weight:700;
  font-size:15px;
  line-height:1.15;
  letter-spacing:0.01em;
  text-transform:none;
  padding:15px 22px;
  box-shadow:
    0 10px 26px rgba(255, 157, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition:box-shadow 160ms var(--bb-ease, ease), transform 160ms var(--bb-spring, cubic-bezier(.2,.7,.3,1.4));
}
html:root:root .bb-cta:hover{
  box-shadow:
    0 12px 30px rgba(255, 157, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
html:root:root .bb-cta:active{
  transform:scale(0.96);
  box-shadow:
    0 6px 16px rgba(255, 157, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* De route-detail-CTA leeft in de bb-sheet, en die schaalt hem met
   !important terug naar radius 14 / 700 14px Libre Franklin
   (src/tour/tour.css:1428-1434). Alleen daarom staat hier !important; de rest
   heeft genoeg aan specificiteit (0,4,1 tegen 0,2,0).                        */
html:root:root .bbs .rd-cta{
  border-radius:var(--bb-btn-radius) !important;
  font:700 15px/1.15 var(--bb-font-head) !important;
  letter-spacing:0.01em;
  text-transform:none;
  padding:15px 22px;
  background:var(--bb-action);
  color:var(--bb-action-on);
  box-shadow:
    0 10px 26px rgba(255, 157, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
html:root:root .bbs .rd-cta:active{
  transform:scale(0.96);
  box-shadow:
    0 6px 16px rgba(255, 157, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* Secundair: 1 px outline in de merknavy op een transparant vlak, zelfde
   pilvorm. Geen tweede oranje op het scherm - dat is de hele regel. */
html:root:root .bb-cta-secondary{
  background:transparent;
  color:var(--bb-brand-navy, #00498E);
  border:1px solid var(--bb-brand-navy, #00498E);
  border-radius:var(--bb-btn-radius);
  font-family:var(--bb-font-head);
  font-weight:700;
  font-size:13.5px;
  letter-spacing:0.01em;
  text-transform:none;
  padding:10px 20px;
  box-shadow:none;
}
html:root:root[data-theme="dark"] .bb-cta-secondary{
  color:var(--bb-ink-blue);
  border-color:var(--bb-ink-blue);
}
html:root:root .bb-cta-secondary:hover{
  background:var(--bb-accent-blue-tint);
  box-shadow:none;
}
html:root:root[data-theme="dark"] .bb-cta-secondary:hover{
  background:var(--bb-bg-tinted);
}

/* ════════════════════════════════════════════════════════════════════════
   2. CHROME - topbalk en tabbalk
   ────────────────────────────────────────────────────────────────────────
   De basis draait beide balken als donker rooknavy met cyaan gloedringen. Het
   Canal Motorboats-paspoort kent geen cyaan, geen basisblauw #3366FF en
   geen basisnavy #091C35. Licht wordt wit glas op het witte paginavlak met
   diepnavy inkt en haarlijnen; donker is geen omkering maar dezelfde
   geometrie in #07335D-glas met een lichte haarlijn.

   Let op: de iOS 26 Liquid Glass TABBALK van de native app krijgt bewust GEEN
   merktint (src/shared/native-tabbar.js). Dit hier is de WEB-tabbalk.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Topbalk ──────────────────────────────────────────────────────────────
   Hoogte expliciet 60 px MET border-box: zonder dat meet de balk 62, omdat
   .bb-header-inner 60 hoog is en Chrome de 0,5 px rand aan beide kanten naar
   boven afrondt.                                                            */
html:root:root .bb-header{
  box-sizing:border-box;
  height:60px;
  border-radius:22px;
}
html:root:root .bb-header-inner{
  height:100%;
  gap:12px;
  padding:0 12px;
}
html:root:root[data-theme="light"] .bb-header{
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 58%),
    rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter:blur(36px) saturate(180%);
  backdrop-filter:blur(36px) saturate(180%);
  border:0.5px solid rgba(7, 51, 93, 0.12);
  box-shadow:
    0 8px 30px rgba(7, 51, 93, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.60);
  color:#07335D;
}
html:root:root[data-theme="dark"] .bb-header{
  background:rgba(7, 51, 93, 0.78);
  -webkit-backdrop-filter:blur(36px) saturate(180%);
  backdrop-filter:blur(36px) saturate(180%);
  border:0.5px solid rgba(217, 226, 236, 0.28);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color:#ECF0F5;
}
/* Zonder backdrop-filter is half doorschijnend onleesbaar; dan een vrijwel
   dekkende plaat in dezelfde kleurfamilie in plaats van het basisnavy.     */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html:root:root[data-theme="light"] .bb-header{
    background:rgba(255, 255, 255, 0.96);
  }
  html:root:root[data-theme="dark"] .bb-header{
    background:rgba(7, 51, 93, 0.96);
  }
}
/* Paginatitel: de kopfamilie, kleine graad, geen uppercase.                 */
html:root:root .bb-header-title{
  font-family:var(--bb-font-head);
  font-weight:700;
  font-size:15px;
  letter-spacing:0.01em;
  text-transform:none;
  color:inherit;
}
html:root:root[data-theme="light"] .bb-header-divider{
  background:rgba(7, 51, 93, 0.18);
}
html:root:root[data-theme="dark"] .bb-header-divider{
  background:rgba(217, 226, 236, 0.28);
}

/* ── Terugknop ────────────────────────────────────────────────────────────
   34 px cirkel, wit glas met een navy haarlijn en een diepnavy chevron. De
   cyaan familie verdwijnt volledig.                                         */
html:root:root .bb-back,
html:root:root .bb-rd-back{
  background:rgba(255, 255, 255, 0.60);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  backdrop-filter:blur(12px) saturate(160%);
  border:0.5px solid rgba(7, 51, 93, 0.16);
  box-shadow:0 2px 8px rgba(7, 51, 93, 0.14);
  color:#07335D;
}
html:root:root .bb-back svg,
html:root:root .bb-rd-back svg{
  stroke:currentColor;
}
html:root:root .bb-back:hover,
html:root:root .bb-rd-back:hover{
  border-color:rgba(7, 51, 93, 0.30);
  box-shadow:0 4px 12px rgba(7, 51, 93, 0.20);
}
html:root:root .bb-back:focus-visible,
html:root:root .bb-rd-back:focus-visible{
  outline:2px solid var(--bb-brand-navy, #00498E);
}
html:root:root[data-theme="dark"] .bb-back,
html:root:root[data-theme="dark"] .bb-rd-back{
  background:rgba(255, 255, 255, 0.08);
  border-color:rgba(217, 226, 236, 0.45);
  box-shadow:none;
  color:#ECF0F5;
}
html:root:root[data-theme="dark"] .bb-back:hover,
html:root:root[data-theme="dark"] .bb-rd-back:hover{
  border-color:rgba(217, 226, 236, 0.75);
  box-shadow:none;
}
html:root:root[data-theme="dark"] .bb-back:focus-visible,
html:root:root[data-theme="dark"] .bb-rd-back:focus-visible{
  outline-color:var(--bb-cyan);
}

/* De KAART-variant van diezelfde chip (.bb-mapback in de live tour) staat NIET
   op de header maar los op willekeurige kaartbeelden. Wit glas op 60% met een
   fijne haarlijn is daar vrijwel onzichtbaar (bevinding van 2026-08-02 op
   een eerdere merkbouw). Daarom pakt deze chip exact dezelfde
   --bb-mapfab-tokens als de andere kaartknoppen, zodat hij even zwaar leest
   als de knoppenstack rechts.

   GEEN donkere-modus-variant, en dat is opzet: de --bb-mapfab-tokens zijn in
   BEIDE thema's licht (wit 92% met donkere inhoud), want deze knoppen staan op
   de kaart en die is altijd licht. Een dark-regel die de chevron licht maakt
   levert wit op wit op. Dezelfde klasse, twee ondergronden - de header-chip
   houdt zijn glasrecept, deze regel is op .bb-mapback gescoped.             */
html:root:root .bb-mapback.bb-mapback{
  background:var(--bb-mapfab-bg);
  border:1px solid var(--bb-mapfab-border);
  box-shadow:var(--bb-mapfab-shadow);
  color:#07335D;
}

/* De OPEN-staat van de kaartknoppen is letterlijk het basisblauw:
   styles/shared-overlays.css zet `--bb-mapfab-bg-active:#E5EBFF`, een tint van
   #3366FF, als achtergrond van elke knop met aria-expanded="true" (tandwiel,
   taal) plus - via de spiegel op body.lt-proto in pages/live.html - van de
   navigatie- en taalknop in de live tour. Hier de lichte merktint met de
   diepnavy inhoud erop (11,18:1). Geen verzadigde vulling, conform de
   kleurregel.

   BEIDE tokens, met opzet. --lt-fab-bg-active is op body.lt-proto afgeleid van
   --bb-mapfab-bg-active, dus de eerste dekt de live tour al; de tweede staat er
   voor elke plek die het lt-token gebruikt zonder die body-klasse. Net als
   hierboven GEEN donkere variant: de kaart is in beide thema's licht.        */
html:root:root{
  --bb-mapfab-bg-active: #ECF0F5;
  --lt-fab-bg-active:    #ECF0F5;
  --bb-mapfab-border:    rgba(7, 51, 93, 0.14);
  --bb-mapfab-shadow:    0 4px 12px rgba(7, 51, 93, 0.22);
}

/* ── Taalpil ──────────────────────────────────────────────────────────────
   De schuivende duim droeg een cyaan gloed (shared-prototype.css:595-608).
   Op wit glas wordt dat een witte lens met een zachte schaduw - dezelfde
   gloedloze glasfamilie als de actieve tab.                                 */
html:root:root .bb-lang-pill{
  background:rgba(255, 255, 255, 0.60);
  border:0.5px solid rgba(7, 51, 93, 0.14);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
html:root:root .bb-lang-pill::before{
  background:rgba(255, 255, 255, 0.90);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    0 1px 6px rgba(7, 51, 93, 0.12);
}
html:root:root .bb-lang-btn{
  color:rgba(7, 51, 93, 0.60);
  /* pages/quiz.html:322 zet een NAAKTE `button{...}`-regel met
     `box-shadow: ... 0 6px 16px rgba(51,102,255,0.32)` - basisblauw. Die
     raakt elke knop op die pagina, dus ook de twee vlaggetjes in de taalpil.
     De taalknop hoort helemaal geen CTA-schaduw te dragen; de pil eromheen
     levert het relief al.                                                    */
  box-shadow:none;
}
html:root:root .bb-lang-btn.active,
html:root:root .bb-lang-btn:hover{
  color:#07335D;
}
html:root:root .bb-lang-btn:focus-visible{
  outline:2px solid var(--bb-brand-navy, #00498E);
}
html:root:root[data-theme="dark"] .bb-lang-pill{
  background:rgba(255, 255, 255, 0.08);
  border-color:rgba(217, 226, 236, 0.28);
}
html:root:root[data-theme="dark"] .bb-lang-pill::before{
  background:rgba(255, 255, 255, 0.14);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
html:root:root[data-theme="dark"] .bb-lang-btn{
  color:rgba(236, 240, 245, 0.55);
}
html:root:root[data-theme="dark"] .bb-lang-btn.active,
html:root:root[data-theme="dark"] .bb-lang-btn:hover{
  color:#ECF0F5;
}
html:root:root[data-theme="dark"] .bb-lang-btn:focus-visible{
  outline-color:var(--bb-cyan);
}

/* ── Tabbalk ──────────────────────────────────────────────────────────── */
html:root:root .bb-mobile-nav{
  border-radius:26px;
  padding:6px 8px;
}
html:root:root[data-theme="light"] .bb-mobile-nav{
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0) 42%),
    rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter:blur(36px) saturate(180%);
  backdrop-filter:blur(36px) saturate(180%);
  border:0.5px solid rgba(7, 51, 93, 0.12);
  box-shadow:
    0 8px 30px rgba(7, 51, 93, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.60);
}
html:root:root[data-theme="dark"] .bb-mobile-nav{
  background:rgba(7, 51, 93, 0.78);
  -webkit-backdrop-filter:blur(36px) saturate(180%);
  backdrop-filter:blur(36px) saturate(180%);
  border:0.5px solid rgba(217, 226, 236, 0.28);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Boven de ALTIJD-lichte vaarinfokaart wast de doorschijnende balk weg; daar
   dekkender, in dezelfde kleurfamilie.                                      */
html:root:root[data-theme="light"] .bb-mobile-nav:has(.bb-mobile-tab[href="/vaarinfo"][aria-current="page"]){
  background:rgba(255, 255, 255, 0.90) !important;
}
html:root:root[data-theme="dark"] .bb-mobile-nav:has(.bb-mobile-tab[href="/vaarinfo"][aria-current="page"]){
  background:rgba(7, 51, 93, 0.92) !important;
}
html:root:root .bb-mobile-tab{
  border-radius:16px;
  padding:7px 4px;
  gap:3px;
  font-size:10px;
  font-weight:600;
  letter-spacing:-0.012em;
  line-height:1.1;
}
html:root:root[data-theme="light"] .bb-mobile-tab{
  color:rgba(7, 51, 93, 0.58);
}
html:root:root[data-theme="dark"] .bb-mobile-tab{
  color:rgba(236, 240, 245, 0.50);
}
/* De actieve tab staat in het merknavy (8,96:1 op wit).                     */
html:root:root[data-theme="light"] .bb-mobile-tab[aria-current="page"],
html:root:root[data-theme="light"] .bb-mobile-tab.is-active-group{
  color:var(--bb-brand-navy, #00498E);
}
html:root:root[data-theme="dark"] .bb-mobile-tab[aria-current="page"],
html:root:root[data-theme="dark"] .bb-mobile-tab.is-active-group{
  color:#D9E2EC;
}
/* Het actieve icoon kreeg van de basis een cyaan gloedfilter; hier erft het
   gewoon de inkt van de tab.                                                */
html:root:root .bb-mobile-tab[aria-current="page"] svg,
html:root:root .bb-mobile-tab.is-active-group svg{
  color:inherit;
  filter:none;
}
/* De actieve LENS: wit glas met een navy haarlijn - geen cyaan gloed.       */
html:root:root[data-theme="light"] .bb-mobile-tab::before{
  background:rgba(255, 255, 255, 0.60);
  -webkit-backdrop-filter:blur(6px) saturate(150%);
  backdrop-filter:blur(6px) saturate(150%);
  border:0.5px solid rgba(0, 73, 142, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.80),
    0 1px 6px rgba(7, 51, 93, 0.12);
}
html:root:root[data-theme="dark"] .bb-mobile-tab::before{
  background:rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter:blur(6px) saturate(150%);
  backdrop-filter:blur(6px) saturate(150%);
  border:0.5px solid rgba(217, 226, 236, 0.30);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* Intrede van de lens: 380 ms, schaal 0,7 naar 1. Prefix bbCmb zodat de naam
   nooit met de basis botst.                                                 */
@keyframes bbCmbLensIn{
  from{ transform:scale(0.7); opacity:0; }
  to  { transform:scale(1);   opacity:1; }
}
html:root:root .bb-mobile-tab[aria-current="page"]::before,
html:root:root .bb-mobile-tab.is-active-group::before{
  animation:bbCmbLensIn 380ms cubic-bezier(.2, .7, .3, 1.4) both;
}
@media (hover:hover){
  html:root:root[data-theme="light"] .bb-mobile-tab:hover{
    color:var(--bb-brand-navy, #00498E);
  }
  html:root:root[data-theme="dark"] .bb-mobile-tab:hover{
    color:#D9E2EC;
  }
  html:root:root .bb-mobile-tab:hover svg{
    color:inherit;
    filter:none;
    transform:scale(1.08);
  }
  html:root:root .bb-mobile-tab[aria-current="page"]:hover::before,
  html:root:root .bb-mobile-tab.is-active-group:hover::before{
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.80),
      0 1px 6px rgba(7, 51, 93, 0.12);
  }
  html:root:root[data-theme="dark"] .bb-mobile-tab[aria-current="page"]:hover::before,
  html:root:root[data-theme="dark"] .bb-mobile-tab.is-active-group:hover::before{
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}
html:root:root .bb-mobile-tab.is-drag-hover svg{
  color:inherit;
  filter:none;
}
html:root:root .bb-mobile-tab[aria-current="page"].is-drag-hover::before,
html:root:root .bb-mobile-tab.is-active-group.is-drag-hover::before{
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.80),
    0 1px 6px rgba(7, 51, 93, 0.12);
}
html:root:root[data-theme="dark"] .bb-mobile-tab[aria-current="page"].is-drag-hover::before,
html:root:root[data-theme="dark"] .bb-mobile-tab.is-active-group.is-drag-hover::before{
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* Focusring: het merk kent geen cyaan.                                      */
html:root:root .bb-mobile-tab:focus-visible,
html:root:root .bb-header-brand:focus-visible,
html:root:root .bb-cta:focus-visible{
  outline:2px solid var(--bb-brand-navy, #00498E);
}
html:root:root[data-theme="dark"] .bb-mobile-tab:focus-visible,
html:root:root[data-theme="dark"] .bb-header-brand:focus-visible,
html:root:root[data-theme="dark"] .bb-cta:focus-visible{
  outline-color:var(--bb-cyan);
}
/* Identiteitssheet (src/live/lt-identity-gate.js): live-tour.css zet
   outline:none op de velden en laat de focus over aan een ring van 24%
   dekking, 1,53:1 op wit (audit 2026-09-07). Hier een echte ring in het
   merknavy, in donker het lichte accent, dezelfde ring als de CTA erboven.
   (0,5,1) wint van de (0,3,0) in live-tour.css.                             */
html:root:root .bbs .lt-gate-input:focus-visible{
  outline:2px solid var(--bb-brand-navy, #00498E);
  outline-offset:2px;
}
html:root:root[data-theme="dark"] .bbs .lt-gate-input:focus-visible{
  outline-color:var(--bb-cyan);
}
/* Desktopnav: dezelfde gloedloze glasfamilie als de tabbalk.                */
html:root:root .bb-nav-link{
  color:inherit;
  opacity:0.72;
}
html:root:root .bb-nav-link[aria-current="page"]{
  opacity:1;
  background:rgba(255, 255, 255, 0.60);
}
html:root:root[data-theme="dark"] .bb-nav-link[aria-current="page"]{
  background:rgba(255, 255, 255, 0.10);
}
html:root:root .bb-nav-link[aria-current="page"]::after{
  background:var(--bb-brand-navy, #00498E);
}
html:root:root[data-theme="dark"] .bb-nav-link[aria-current="page"]::after{
  background:#D9E2EC;
}
html:root:root .bb-nav-link:hover{
  opacity:1;
  background:rgba(255, 255, 255, 0.50);
  border-color:rgba(7, 51, 93, 0.14);
  box-shadow:0 1px 6px rgba(7, 51, 93, 0.12);
}
html:root:root[data-theme="dark"] .bb-nav-link:hover{
  background:rgba(255, 255, 255, 0.10);
  border-color:rgba(217, 226, 236, 0.28);
  box-shadow:none;
}
html:root:root .bb-nav-link:focus-visible{
  outline:2px solid var(--bb-brand-navy, #00498E);
}
/* Op donker zou die ring #00498E blijven en dat haalt op het paginavlak
   #04203A maar 1,84:1 - een focusring die je niet ziet is geen focusring. */
html:root:root[data-theme="dark"] .bb-nav-link:focus-visible{
  outline-color:var(--bb-cyan);
}

/* ════════════════════════════════════════════════════════════════════════
   3. WOORDMERK PLUS SPLASH-PAAR
   ────────────────────────────────────────────────────────────────────────
   Het zichtbare merk in de header is GEEN <img> maar de background-image van
   .bb-header-brand::before (styles/shared-prototype.css:469-475); het
   .bb-wordmark-SVG ernaast staat sinds 2026-06-15 op display:none. Vandaar
   dat de wissel hier gebeurt en niet in JS. De toegankelijke naam (aria-label)
   staat in de pagina-HTML.

   BREEDTE - NU WEL GEMETEN AAN HET EINDBESTAND (2026-08-07). De lockup
   bestaat inmiddels; de viewBox van assets/brand/logo.svg
   is `0 0 935.667 290.665`, dus de verhouding is 3,2192:1. Een pseudo-element
   leidt geen intrinsieke verhouding af uit een background-image, dus de
   breedte staat er als `hoogte * 3,2192`. Verander je de hoogte, dan volgt de
   breedte vanzelf. HERMEET de factor als de generator een andere viewBox
   oplevert:
       grep -o 'viewBox="[^"]*"' assets/brand/logo.svg

   HOOGTE - besluit 2 (2026-08-06): de topbalk draagt de VOLLEDIGE
   lockup, op elk scherm. De vierkante merkteken-val onder 480 px is daarmee
   vervallen; het woordmerk mag nooit verdwijnen. Wat er wel gebeurt op een
   smal scherm is SCHALEN, via clamp() op de hoogte:
       34 px vanaf 375 px viewport (9,07vw x 375 = 34,0)
       29 px op 320 px          (9,07vw x 320 = 29,0 -> lockup 93,4 breed)
   Zie het GETIJDENBANDEN-blok onderaan dit bestand voor --cmb-lockup-h en de
   gemeten passom op 320 px.                                                  */
html:root:root .bb-header-brand::before{
  width:calc(var(--cmb-lockup-h) * 3.2192);
  height:var(--cmb-lockup-h);
  border-radius:0;
  background:url("/assets/brand/logo.svg") left center / contain no-repeat;
}
html:root:root[data-theme="dark"] .bb-header-brand::before{
  background-image:url("/assets/brand/logo-dark.svg");
}
/* Waar het woordmerk als TEKST staat in plaats van als afbeelding. */
html:root:root .bb-wordmark,
html:root:root .wordmark{
  font-family:var(--bb-font-head);
  font-weight:700;
  text-transform:none;
  letter-spacing:0.01em;
}

/* ════════════════════════════════════════════════════════════════════════
   4. DONKERE MODUS SWEEP
   ────────────────────────────────────────────────────────────────────────
   De tokens hierboven beschrijven het merk al; wat er donker nog basis uitziet
   komt van hardcoded effecten die eroverheen winnen. Weg gaan: de
   gloed-filterketens en de #69FEFF/#091C35-familie. Terug komt: vlakke lijnen
   in de merknavy-as.

   HET KAARTCANVAS BLIJFT MET RUST - kaart-hertinting staat op het
   won't-do-register.
   ════════════════════════════════════════════════════════════════════════ */

/* Routekaart-covers in donkere modus. pages/index.html draagt zijn eigen
   dark-regels voor de aquarel-cover met het basiscyaan #69FEFF hard in de CSS
   (rond regel 494-540). Dat is geen token, dus de tokenlaag bereikt het niet.
   Dit merk kent geen cyaan en geen neon: de lijn wordt een VLAKKE 2,5 px
   #D9E2EC zonder gloed (12,60:1 op het donkere paginavlak). Specificiteit
   (0,3,1) tegen :root[data-theme] (0,2,0), dus dit wint ongeacht de volgorde
   van de <link>.                                                             */
html:root:root[data-theme="dark"] .bb-route-card-cover{
  background:
    radial-gradient(ellipse at 50% 50%, rgba(217, 226, 236, 0.16), transparent 70%),
    linear-gradient(135deg, #04203A 0%, #0C4275 100%);
}
html:root:root[data-theme="dark"] .bb-route-card-cover svg polyline{
  stroke:#D9E2EC;
  stroke-width:2.5;
  filter:none;
}
/* De hover-gloed uit pages/index.html:604-609 zou de bloom alsnog terugzetten
   zodra de muis over een kaart gaat. Op aanraakschermen bestaat hover niet,
   op desktop wel - en het rapport wordt op desktop bekeken.                  */
html:root:root[data-theme="dark"] .bb-route-card:hover .bb-route-card-cover svg polyline.aq-line{
  filter:none;
}
/* Vangnet voor de rest van de cover-SVG. Bewust NIET uitgebreid naar de hele
   chrome: .bb-lang-btn svg gebruikt filter om de inactieve vlag te dempen, en
   dat is geen gloed maar een statusaanduiding.                               */
html:root:root[data-theme="dark"] .bb-route-card-cover *{
  filter:none;
}
/* De cover-SVG tekent zijn boot en pins hard in het basisnavy #091C35. Op een
   donker merkvlak valt dat weg; hier de lichte accentkleur.                  */
html:root:root[data-theme="dark"] .bb-route-card-cover svg circle[fill="#091C35"][stroke="#FFFFFF"]{
  fill:#D9E2EC;
}
html:root:root[data-theme="dark"] .bb-route-card-cover svg g[stroke="#091C35"],
html:root:root[data-theme="dark"] .bb-route-card-cover svg g path[stroke="#091C35"],
html:root:root[data-theme="dark"] .bb-route-card-cover svg g circle[stroke="#091C35"],
html:root:root[data-theme="dark"] .bb-route-card-cover svg g rect[stroke="#091C35"]{
  stroke:#D9E2EC;
}
html:root:root[data-theme="dark"] .bb-route-card-cover svg g circle[fill="#091C35"],
html:root:root[data-theme="dark"] .bb-route-card-cover svg g rect[fill="#091C35"],
html:root:root[data-theme="dark"] .bb-route-card-cover svg g path[fill="#091C35"]{
  fill:#D9E2EC;
}

/* ════════════════════════════════════════════════════════════════════════
   5. STATCHIPS, SHEETS, BADGES
   ════════════════════════════════════════════════════════════════════════ */

/* styles/bb-sheet.css draagt zijn eigen --bbs-*-tokens met het basisblauw
   #3366FF (licht) en het basiscyaan #69FEFF (donker) als accent. Dat accent
   kleurt de subtitel van de routekop, de preview-link en de actieve
   filterchip - de "navigeren"-rol. Hier gaan die tokens naar de navy-familie,
   dan volgt de hele sheet vanzelf.

   LET OP DE VOLGORDE. In styles/bb-sheet.css is het NAAKTE `:root`-blok de
   DONKERE set en `:root[data-theme="light"]` de lichte. Een ongekwalificeerd
   merkblok is (0,2,1) en wint dus van dat lichte blok (0,2,0). Daarom staan
   hieronder de DONKERE waarden in het ongekwalificeerde blok en de lichte in
   een eigen [data-theme="light"]-blok (0,3,1). Andersom zou de sheet in lichte
   modus donker worden.                                                        */
html:root:root{
  /* DONKERE default van de sheet. Dit blok draagt met opzet GEEN
     thema-selector; zie de uitleg hierboven. Gemeten op de gecomposeerde
     sheetkleur rgba(7,51,93,0.90) over #04203A = #07315A:
       #ECF0F5 = 11,50:1     #D9E2EC = 10,05:1                              */
  --bbs-accent:        #D9E2EC;
  --bbs-chip-cyan-bg:  rgba(217, 226, 236, 0.16);
  --bbs-chip-cyan-fg:  #D9E2EC;
  --bbs-bg:            rgba(7, 51, 93, 0.90);
  --bbs-sticky:        rgb(9, 44, 78);
  --bbs-fg:            #ECF0F5;
  --bbs-fg-dim:        rgba(236, 240, 245, 0.62);
  --bbs-fg-body:       rgba(236, 240, 245, 0.90);
  --bbs-border:        rgba(236, 240, 245, 0.16);
  --bbs-hairline:      rgba(236, 240, 245, 0.16);
  --bbs-grab:          rgba(236, 240, 245, 0.34);
  --bbs-shadow:        0 18px 48px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --bbs-chip-bg:       rgba(255, 255, 255, 0.10);
  --bbs-chip-fg:       #ECF0F5;
  --bbs-chip-warn-bg:  rgba(254, 205, 88, 0.18);
  --bbs-chip-warn-fg:  #FECD58;
  --bbs-ctrl-bg:       rgba(255, 255, 255, 0.10);
  --bbs-ctrl-border:   rgba(255, 255, 255, 0.16);
  --bbs-font:          var(--bb-font);

  /* De VERZADIGDE actie-rol van de sheet (tokens in styles/bb-sheet.css:47-54,
     daarvoor hardcoded #3366FF): de play-schijf in de transport-rij, het
     schijfje in de Luister-pil, de primaire knop in de body en de tegel achter
     een hoogtepunt.

     ORANJE, NIET HET ACCENT. Dit zijn ACTIES (afspelen, primaire actie) en de
     actiegrammatica van deze editie zegt oranje = doen. Het accent #D9E2EC is
     hier expres NIET de vulling: dat haalt met witte inhoud 1,31:1 en zou
     volgens de kleurregel donkere inhoud vragen - een lichtblauwe play-knop
     leest bovendien niet als actie.

     --bbs-on-accent is #07335D en NIET wit: wit op #FF9D00 is 2,08:1, het
     diepnavy 6,14:1. Zelfde besluit als bij .bb-cta hierboven. Het oranje is
     in beide thema's gelijk, dus deze vijf tokens staan alleen hier en niet in
     het lichte blok.

     De gloed hoort mee: zonder dit token blijft de BLAUWE basisgloed onder
     een oranje knop hangen. 0,32 is exact de dekking van de .bb-cta-gloed.

     De tint is bewust EEN doorschijnende waarde voor beide thema's: hij
     composeert over de donkere en de lichte sheet en landt in dezelfde
     familie als --bb-action-tint (#F9F1EA in licht).                        */
  --bbs-accent-strong:  #FF9D00;
  --bbs-on-accent:      #07335D;
  --bbs-accent-tint:    rgba(255, 157, 0, 0.20);
  --bbs-accent-glow:    0 4px 12px rgba(255, 157, 0, 0.32);
  --bbs-accent-glow-sm: 0 3px 10px rgba(255, 157, 0, 0.32);
  /* De fototegel + het stopnummer-schijfje. Gradient #07335D -> #00498E,
     allebei uit het paspoort. GEMETEN met witte cijfers erop: 12,80:1 op het
     donkere uiteinde en 8,96:1 op het lichte, dus overal ruim boven AA.
     Via het token blijft de cascade van bb-sheet.css intact: .bbs--boot
     .bbs-thumb (0,2,0) wint nog steeds van .bbs-thumb (0,1,0), precies zoals
     in de basis.                                                            */
  --bbs-thumb-grad:     linear-gradient(135deg, #07335D, #00498E);
}
html:root:root[data-theme="light"]{
  --bbs-accent:        #00498E;
  --bbs-chip-cyan-bg:  #ECF0F5;
  --bbs-chip-cyan-fg:  #07335D;
  --bbs-bg:            rgba(255, 255, 255, 0.92);
  --bbs-sticky:        rgb(236, 240, 245);
  --bbs-fg:            #07335D;
  --bbs-fg-dim:        rgba(7, 51, 93, 0.68);
  --bbs-fg-body:       rgba(7, 51, 93, 0.90);
  --bbs-border:        rgba(7, 51, 93, 0.14);
  --bbs-hairline:      rgba(7, 51, 93, 0.14);
  --bbs-grab:          rgba(7, 51, 93, 0.26);
  --bbs-shadow:        0 18px 48px rgba(7, 51, 93, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.50);
  --bbs-chip-bg:       rgba(7, 51, 93, 0.06);
  --bbs-chip-fg:       #07335D;
  --bbs-chip-warn-bg:  #FFF4D9;
  --bbs-chip-warn-fg:  #5E4400;
  --bbs-ctrl-bg:       rgba(7, 51, 93, 0.06);
  --bbs-ctrl-border:   rgba(7, 51, 93, 0.12);
}

/* ── Meer-rij-iconen ──────────────────────────────────────────────────────
   pages/meer.html:184 zet `background: var(--mr-tint-strong, rgba(105,254,255,
   0.18))` en :192 `stroke: var(--mr-ink, var(--bb-blue))`. Geen van beide
   tokens wordt ergens gezet - `grep -n "mr-tint-strong\|--mr-ink"
   pages/meer.html` geeft alleen die twee regels - dus de fallback geldt altijd
   en dat is het basiscyaan #69FEFF op 18%. Omdat de tokens nergens per rij
   verschillen wordt hier niets afgeplat: dit vult precies de waarde in die het
   ontwerp bedoelde.                                                          */
html:root:root{
  --mr-tint-strong: #ECF0F5;
  --mr-ink:         #00498E;
}
html:root:root[data-theme="dark"]{
  --mr-tint-strong: rgba(217, 226, 236, 0.16);
  --mr-ink:         #D9E2EC;
}
/* Statchips in de routekop (5,0 km - 1 uur - 24 hoogtepunten): lichte
   merktint met de diepnavy inkt (11,18:1), geen verzadigd vlak, en de pilvorm
   uit het paspoort. Tabulaire cijfers zodat de drie chips niet gaan dansen
   tijdens het tellen.                                                        */
html:root:root .bbs .bbs-chip{
  font-family:var(--bb-font);
  font-weight:600;
  font-size:12px;
  letter-spacing:0.01em;
  border-radius:var(--bb-btn-radius);
  padding:7px 13px;
  font-variant-numeric:tabular-nums;
}
html:root:root[data-theme="light"] .bbs .bbs-chip{
  background:#ECF0F5;
  border:1px solid rgba(7, 51, 93, 0.14);
  color:#07335D;
}
html:root:root[data-theme="dark"] .bbs .bbs-chip{
  background:rgba(217, 226, 236, 0.16);
  border:1px solid rgba(236, 240, 245, 0.16);
  color:#D9E2EC;
}

/* ── Opstap-chip in de topbalk ────────────────────────────────────────────
   Gebouwd door src/tour/route-catalog.js op de Routes-pagina. Toont vanaf
   welke steiger je vaart; het oranje pin-icoon en de statusdot zijn de enige
   verzadigde accenten in de balk. Pilvorm 30 px conform het paspoort.        */
html:root:root .bb-dock-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  height:34px;
  padding:0 12px 0 9px;
  border-radius:var(--bb-btn-radius);
  background:rgba(255, 255, 255, 0.60);
  border:0.5px solid rgba(7, 51, 93, 0.16);
  box-shadow:0 2px 8px rgba(7, 51, 93, 0.14);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  backdrop-filter:blur(12px) saturate(160%);
  font-family:var(--bb-font);
  font-weight:600;
  font-size:12px;
  line-height:1;
  color:var(--bb-brand-navy, #00498E);
  cursor:pointer;
  white-space:nowrap;
  transition:transform 160ms var(--bb-spring, cubic-bezier(.2,.7,.3,1.4));
}
html:root:root .bb-dock-chip:active{ transform:scale(0.95); }
html:root:root .bb-dock-chip:focus-visible{
  outline:2px solid var(--bb-brand-navy, #00498E);
  outline-offset:2px;
}
/* Zelfde reden als bij .bb-nav-link: de chip zit in donker op het
   #07335D-glas, waar #00498E 1,43:1 haalt.                                  */
html:root:root[data-theme="dark"] .bb-dock-chip:focus-visible{
  outline-color:var(--bb-cyan);
}
html:root:root .bb-dock-chip svg{ color:var(--bb-action); }
html:root:root .bb-dock-chip-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(7, 51, 93, 0.22);
  flex:0 0 auto;
}
html:root:root .bb-dock-chip.is-set .bb-dock-chip-dot{
  background:var(--bb-action);
}
html:root:root[data-theme="dark"] .bb-dock-chip{
  background:rgba(255, 255, 255, 0.08);
  border-color:rgba(217, 226, 236, 0.28);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color:#D9E2EC;
}
html:root:root[data-theme="dark"] .bb-dock-chip-dot{
  background:rgba(236, 240, 245, 0.25);
}
html:root:root[data-theme="dark"] .bb-dock-chip.is-set .bb-dock-chip-dot{
  background:var(--bb-action);
}

/* ── Actiechip op de routekaart "Vrije navigatie" ─────────────────────────
   pages/index.html:468-479 geeft hem in donkere modus het basiscyaan als
   vlak. Dit is de enige plek op de routepagina waar "doen" staat, dus hij
   hoort in de actiekleur - zachte tint met dezelfde-tint donkere inkt, nooit
   verzadigd als vlak (de verzadigde oranje pil is voorbehouden aan de ene
   primaire CTA per view).                                                    */
html:root:root .bb-route-card-start{
  background:var(--bb-accent-red-tint);
  color:var(--bb-ink-red);
}

/* ── Sectielabels ─────────────────────────────────────────────────────────
   11 px, vet, uppercase, 0,12em, in de merknavy. Een label, geen kop - dus de
   tekstfamilie, niet de kopfamilie. Op donker naar de lichte zelfde-tint.    */
html:root:root .bb-section-label,
html:root:root .mr-seclbl{
  font-family:var(--bb-font);
  font-weight:600;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--bb-brand-navy, #00498E);
}
html:root:root[data-theme="dark"] .bb-section-label,
html:root:root[data-theme="dark"] .mr-seclbl{
  color:#D9E2EC;
}

/* ── Opstap-kiezer ───────────────────────────────────────────────────────
   Gebouwd door src/tour/route-catalog.js boven het routekaarten-grid. Zachte
   tint als vlak, dezelfde-tint donkere tekst, en een statusdot in de
   actiekleur voor de gekozen steiger. Bewust GEEN gekleurde linkerrand en geen
   verzadigd vlak als achtergrond.                                           */
/* ── Steigerkiezer: een dropdown, geen raster ─────────────────────────────
   TOT 2026-09-09 stonden hier vijf kaarten naast elkaar in een auto-fit-grid.
   GEMETEN op 375x812: 276 px hoog, 298 px met marge, oftewel 34% van het
   scherm voordat er ook maar een routekaart in beeld kwam. Nu is het een knop
   met de gekozen steiger en een paneel dat eroverheen klapt: 92 px ingeklapt,
   label inbegrepen. Voorstel A uit docs/reports/pier-chooser-2026-09-09.

   Het paneel is ABSOLUUT gepositioneerd, niet in de flow. Dat is het hele
   punt: uitklappen mag de routekaarten niet naar beneden duwen, anders is de
   winst weg zodra je hem opent.                                             */
html:root:root .bb-dock-chooser{
  margin:0 0 18px;
}
html:root:root .bb-dock-chooser-label{
  display:block;
  font-family:var(--bb-font);
  font-weight:600;
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--bb-brand-navy, #00498E);
  margin:0 0 6px;
}
html:root:root[data-theme="dark"] .bb-dock-chooser-label{
  color:#D9E2EC;
}
/* De anker voor het paneel. `position:relative` hoort HIER en niet op
   .bb-dock-chooser, zodat het label buiten het anker valt en het paneel dus
   strak onder de KNOP hangt en niet onder het label. */
html:root:root .bb-dock-field{
  position:relative;
}
html:root:root .bb-dock-trigger{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:11px 14px;
  border-radius:18px;
  border:1px solid var(--bb-border);
  background:var(--bb-bg-card);
  color:var(--bb-fg-default);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color 160ms var(--bb-ease, ease), background 160ms var(--bb-ease, ease);
}
html:root:root .bb-dock-trigger:hover{
  border-color:var(--bb-acc-blue);
}
html:root:root .bb-dock-trigger[aria-expanded="true"]{
  border-color:var(--bb-acc-blue);
  background:var(--bb-accent-blue-tint);
  color:var(--bb-ink-blue);
}
html:root:root .bb-dock-trigger-txt{
  flex:1 1 auto;
  min-width:0;
}
html:root:root .bb-dock-chev{
  flex:none;
  opacity:0.7;
  transition:transform 160ms var(--bb-ease, ease);
}
html:root:root .bb-dock-trigger[aria-expanded="true"] .bb-dock-chev{
  transform:rotate(180deg);
}
/* Het paneel. z-index boven de routekaarten; die dragen geen eigen stapel,
   dus 20 is ruim genoeg en blijft onder de app-balken (die zitten hoger). */
html:root:root .bb-dock-list{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:20;
  margin:0;
  padding:6px;
  list-style:none;
  border-radius:18px;
  border:1px solid var(--bb-border);
  background:var(--bb-bg-card);
  box-shadow:0 2px 6px rgba(7,51,93,.10), 0 18px 40px rgba(7,51,93,.18);
}
html:root:root[data-theme="dark"] .bb-dock-list{
  box-shadow:0 2px 6px rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.45);
}
html:root:root .bb-dock-list[hidden]{
  display:none;
}
html:root:root .bb-dock-list li{
  margin:0;
}
html:root:root .bb-dock-btn{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:9px 11px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:var(--bb-fg-default);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background 120ms var(--bb-ease, ease);
}
html:root:root .bb-dock-btn:hover{
  background:var(--bb-accent-blue-tint);
  color:var(--bb-ink-blue);
}
html:root:root .bb-dock-btn.is-active{
  background:var(--bb-accent-blue-tint);
  color:var(--bb-ink-blue);
}
html:root:root .bb-dock-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--bb-border);
  display:block;
  flex:none;
}
html:root:root .bb-dock-btn.is-active .bb-dock-dot,
html:root:root .bb-dock-trigger .bb-dock-dot{
  background:var(--bb-action);
}
html:root:root .bb-dock-name{
  display:block;
  font-family:var(--bb-font-head);
  font-weight:700;
  font-size:14px;
  line-height:1.2;
  text-transform:none;
  letter-spacing:0.01em;
}
/* Sub-tekst erft de kleur van de knop en zakt in opacity, zodat hij nooit wit
   blijft binnen een licht tintvlak (huisregel sub-tekst). */
html:root:root .bb-dock-addr{
  display:block;
  font-size:12.5px;
  line-height:1.2;
  color:inherit;
  opacity:0.75;
}


/* ── Sheet-knoppen ────────────────────────────────────────────────────────
   De drie knoppen die styles/bb-sheet.css eerder hardcoded op #3366FF zette
   (.bbs-pbtn, .bbs-hl-audio-ico, .bbs-act--primary) lopen sinds 2026-08-06 via
   --bbs-accent-strong / --bbs-on-accent / --bbs-accent-glow* hierboven, gloed
   inbegrepen. Er is dus geen selectorblok meer voor nodig.

   De afvink-indicator aan het eind van een tour is GEEN actie maar een
   bevestiging, dus die volgt het accent en niet het oranje. .lt-finish-check
   leest var(--bbs-accent-strong), dus dit blok moet blijven bestaan.         */
html:root:root .lt-finish-check{
  color:#00498E;
}
html:root:root[data-theme="dark"] .lt-finish-check{
  color:#D9E2EC;
}

/* ── Routekaart-covers in LICHTE modus ────────────────────────────────────
   De aquarel-covers worden gegenereerd door src/shared/route-cover.js, en dat
   bestand tekent lijn, boot en pins HARD in het basisnavy #091C35 met een
   basiscyaan gloed rgba(105,254,255,...). De donkere modus hierboven is al
   omgezet; deze regels doen hetzelfde met de LICHTE inktwaarden. De merknavy
   #00498E leest op het lichte cover-vlak (7,83:1 op #ECF0F5), waar het
   #D9E2EC van de donkere variant juist zou wegvallen (1,31:1 op wit).        */
html:root:root[data-theme="light"] .bb-route-card-cover{
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 73, 142, 0.10), transparent 70%),
    linear-gradient(135deg, #FFFFFF 0%, #D9E2EC 100%);
}
/* De cover-SVG tekent zelf een dekkend papiervlak: een rect met de blauwe
   basisgradient, hard in src/shared/route-cover.js. Die ligt OVER de
   achtergrond hierboven, dus het lichtblauwe merkvlak was in de lichte stand
   nooit te zien. Zie de gelijke regel in een eerdere merkbouw voor de
   volledige toelichting; de donkere stand deed dit al.                        */
html:root:root[data-theme="light"] .bb-route-card-cover svg > rect[fill^="url(#aq-bg-"],
html:root:root[data-theme="light"] .bb-route-card-cover svg > rect[fill^="url(#aqi-bg-"]{
  fill:transparent;
}
html:root:root[data-theme="light"] .bb-route-card-cover svg polyline{
  stroke:#00498E;
  stroke-width:2.5;
  filter:none;
}
html:root:root[data-theme="light"] .bb-route-card:hover .bb-route-card-cover svg polyline.aq-line,
html:root:root[data-theme="light"] .bb-route-card-cover *{
  filter:none;
}
html:root:root[data-theme="light"] .bb-route-card-cover svg circle[fill="#091C35"][stroke="#FFFFFF"]{
  fill:#00498E;
}
html:root:root[data-theme="light"] .bb-route-card-cover svg g[stroke="#091C35"],
html:root:root[data-theme="light"] .bb-route-card-cover svg g path[stroke="#091C35"],
html:root:root[data-theme="light"] .bb-route-card-cover svg g circle[stroke="#091C35"],
html:root:root[data-theme="light"] .bb-route-card-cover svg g rect[stroke="#091C35"]{
  stroke:#00498E;
}
html:root:root[data-theme="light"] .bb-route-card-cover svg g circle[fill="#091C35"],
html:root:root[data-theme="light"] .bb-route-card-cover svg g rect[fill="#091C35"],
html:root:root[data-theme="light"] .bb-route-card-cover svg g path[fill="#091C35"]{
  fill:#00498E;
}

/* Vangnet voor de achtergrondbollen. De ECHTE uitschakeling zit in
   src/shared/route-cover.js (skipBlobs), want de Routes-pagina draait in de
   app-shell-iframe en de stylesheet-link daarin lost op naar
   /app/styles/brand.css, wat door de netlify.toml-rewrite
   /app/* -> /pages/app.html HTML oplevert in plaats van CSS. Gemeten:
   /styles/... 81329 bytes CSS tegen /app/styles/... 106686 bytes HTML. Deze
   regel dekt dus alleen de contexten waar de CSS wel aankomt, zoals de losse
   route-detailpagina en oude covers die nog uit een cache komen.

   De selector mikt op een circle die een DIRECT kind van de svg is en geen
   klasse draagt: precies de bollen. De start- en eindstip dragen aq-dot-start
   en aq-dot-end, en de boot en de pijl zitten in een g, dus die blijven
   staan.                                                                     */
html:root:root .bb-route-card-cover svg > circle:not([class]),
html:root:root .lt-splash-route-cover svg > circle:not([class]){
  display:none;
}

/* ════════════════════════════════════════════════════════════════════════
   8. GETIJDENBANDEN - het sectieritme van de merksite in de app
   ────────────────────────────────────────────────────────────────────────
   Voorstel 1 uit de designreview van 2026-08-06 (frames
   "Voorstel 1 - licht" en "- donker", regels 260-345). De pagina wisselt,
   net als de homepage van het merk, zachte banden af, gescheiden door een
   golvende rand. (Het oranje squiggle onder de paginatitel dat hier eerst
   bij hoorde is geschrapt; zie 8.1.)

   VIER PAGINA'S, NIET MEER (besluit 7): /app/routes, /app/meer,
   /app/quiz en /fun-facts. Het kaartcanvas, de sheets en de live tour
   blijven bandloos. Daarom hangt ELKE regel hieronder OOK onder een
   pagina-poort:
     body.bb-cards-mode .bb-route-cards   de routekiezer (index.html)
     body:has(> .mr-wrap)                 /app/meer
     body.quiz-proto                      /app/quiz
     body:has(.iw-main)                   /fun-facts
   `:has()` is hier al in gebruik (zie `body:has(.vi-stage)` hierboven) en
   is de enige manier om meer.html en fun-facts.html te herkennen: die twee
   dragen geen klasse op <body> en de pagina-HTML is voor deze bouw
   read-only.

   HOE EEN BAND WORDT GETEKEND ZONDER EEN ENKELE WRAPPER IN DE HTML
   ----------------------------------------------------------------
   De banden lopen over RIJEN van broertjes-elementen (label + grid + label +
   grid ...). Een achtergrond per element geeft naden op elke marge ertussen.
   Daarom worden de banden als GORDIJNEN geschilderd, van onder naar boven:

     1. De pagina (of de sectiecontainer) draagt de kleur van de LAATSTE band.
        Die vult dus alles.
     2. Het EERSTE element van band 3 krijgt een ::before dat van zijn eigen
        bovenkant tot ver daarboven de kleur van band 2 legt (z-index -2).
     3. Het EERSTE element van band 2 doet hetzelfde met de kleur van band 1
        (z-index -1) en dekt daarmee het gordijn van stap 2 in het bovenste
        deel weer af.

   Twee dingen maken dat veilig:
   - De container krijgt `isolation:isolate`. Zonder eigen stacking context
     zou zijn ACHTERGROND na de negatieve-z-gordijnen geschilderd worden (de
     schildervolgorde van de wortelcontext zet blok-achtergronden na
     negatieve z-index) en zou je de gordijnen nooit zien.
   - De gordijnen steken alleen naar BOVEN en naar LINKS/RECHTS uit. Overloop
     naar boven en naar links is per definitie niet scrollbaar, dus er komt
     geen horizontale of verticale scrollbalk bij. Naar beneden uitsteken zou
     dat wel doen; dat gebeurt hier nergens.

   De zijwaartse bleed is exact `-24px`: dat is de padding van de canonieke
   .bb-page-kolom (styles/shared-prototype.css:358-367), dus op een mobiel
   scherm loopt de band precies van rand tot rand. Boven 1352 px viewport is
   de kolom afgetopt op 1304 en is de band even breed als die kolom - een
   100vw-bleed zou daar juist een horizontale scrollbalk kosten zodra het
   besturingssysteem een zichtbare scrollbalk tekent.

   DE GOLFRAND
   Letterlijk de curve uit de mockup (regel 272/280 van het review-document):
   viewBox 0 0 340 20, preserveAspectRatio none, pad
   `M0 12 Q 42 2 85 12 T 170 12 T 255 12 T 340 12`. In de mockup wordt de
   ruimte ONDER de curve gevuld met de kleur van de volgende band; hier wordt
   de ruimte ERBOVEN gevuld met de kleur van de vorige band (`V0 H0 Z` in
   plaats van `V20 H0 Z`), omdat de volgende band hier al als vlak achter de
   rand ligt. Zelfde curve, zelfde beeld, een laag minder.

   De rand is puur decoratief: het is een background-image op een pseudo-
   element met pointer-events:none, dus hij zit niet in de
   toegankelijkheidsboom en vangt geen tikken. Er landt nooit tekst op: het
   eerste element van een band krijgt --cmb-wave-h extra padding-top, en de
   rand wordt precies in die padding getekend.

   ALLE KLEUREN KOMEN UIT DE REVIEW, GEMETEN, NIET HERREKEND
     band 1  licht #FFFFFF  donker #04203A   inkt  #00498E 8,96:1 / #ECF0F5 14,42:1
     band 2  licht #ECF0F5  donker #07335D   inkt  #00498E 7,83:1 / #ECF0F5 11,18:1
                                             kicker #00498E      / #D9E2EC
     band 3  licht #F9F1EA  donker #0A2B4C   kicker #7A4300 7,15:1 / #FFC46B 9,13:1
     kaart   licht #FFFFFF + 0 4px 14px rgba(7,51,93,0.10), GEEN haarlijn
             donker #0C4275 + 0 4px 14px rgba(0,0,0,0.30); wit erop is
             10,23:1 en de lopende inkt #ECF0F5 is 8,94:1
   ════════════════════════════════════════════════════════════════════════ */

html:root:root{
  --cmb-band-1:#FFFFFF;
  --cmb-band-2:#ECF0F5;
  --cmb-band-3:#F9F1EA;
  --cmb-band-2-kicker:#00498E;
  --cmb-band-3-kicker:#7A4300;

  /* Kaart OP een band. De haarlijn vervalt: de band levert de scheiding al,
     en de review vraagt expliciet om schaduw zonder rand. */
  --cmb-onband-card:#FFFFFF;
  --cmb-onband-shadow:0 4px 14px rgba(7, 51, 93, 0.10);
  --cmb-onband-ring:#00498E;   /* alleen als ring op een GEKOZEN kaart */

  --cmb-wave-h:20px;
  /* Hoever een band buiten de inhoudskolom doorloopt. Dit is een BEREKENING
     en geen vast getal, want de kolom is niet altijd even breed als het
     scherm. De banden zijn absoluut gepositioneerd binnen die kolom, dus een
     percentage rekent tegen de KOLOM en 50vw tegen het SCHERM; het verschil
     is precies de afstand tot de schermrand.
       mobiel 375: kolom 327 -> 163,5 - 187,5 = -24 px (de paginamarge)
       desktop 1440: kolom 1304 -> 652 - 720 = -68 px
     Met de oude vaste -24px bleef er op 1440 px aan elke kant 44 px kolom
     ONGEVERFD naast de band staan; op de schermafdruk hield het bandvlak
     halverwege op. */
  --cmb-bleed:calc(50% - 50vw);

  /* Hoogte van de merk-lockup in de topbalk (zie blok 3 hierboven).
     34 px is de maat uit het voorstel; hij blijft staan zolang de rij past.
     De passom staat bij de smalle-schermregels onderaan dit blok. */
  --cmb-lockup-h:34px;

  --cmb-wave-1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 20' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q 42 2 85 12 T 170 12 T 255 12 T 340 12 V0 H0 Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  --cmb-wave-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 20' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q 42 2 85 12 T 170 12 T 255 12 T 340 12 V0 H0 Z' fill='%23ECF0F5'/%3E%3C/svg%3E");

}
html:root:root[data-theme="dark"]{
  --cmb-band-1:#04203A;
  --cmb-band-2:#07335D;
  --cmb-band-3:#0A2B4C;
  --cmb-band-2-kicker:#D9E2EC;
  --cmb-band-3-kicker:#FFC46B;

  --cmb-onband-card:#0C4275;
  --cmb-onband-shadow:0 4px 14px rgba(0, 0, 0, 0.30);
  --cmb-onband-ring:#D9E2EC;

  --cmb-wave-1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 20' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q 42 2 85 12 T 170 12 T 255 12 T 340 12 V0 H0 Z' fill='%2304203A'/%3E%3C/svg%3E");
  --cmb-wave-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 20' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q 42 2 85 12 T 170 12 T 255 12 T 340 12 V0 H0 Z' fill='%2307335D'/%3E%3C/svg%3E");
}

/* ── 8.1 GEEN squiggle ───────────────────────────────────────────────────
   Voorstel 1 tekende een oranje golflijntje onder elke paginatitel, en dat
   is gebouwd geweest. Het is op 2026-08-07 geschrapt, in
   licht en in donker. Het bandenritme en de golfranden blijven; die dragen
   het merk al.
   Zet hem dus NIET terug omdat de designreview of de bouwbrief hem noemt -
   dit besluit is later.                                                    */

/* ── 8.2 /app/routes ──────────────────────────────────────────────────────
   Volgorde van de kinderen van #bbRouteCards, zoals
   src/tour/route-catalog.js ze neerzet:
     h1                                        band 1
     .bb-dock-chooser                          band 2  "Vertrek vanaf"
     .bb-section-label + .bb-route-cards-grid  band 3  "Onze lussen met audio"
     [.bb-section-label + grid per extra sectie]  band 3
   Exact het ritme van de mockup.                                          */
html:root:root body.bb-cards-mode .bb-route-cards{
  isolation:isolate;
  /* GEEN overflow-x hier. Dat is geprobeerd om een eventuele scrollbalk-
     overshoot van 50vw af te vangen, en het knipt precies de banden af die
     buiten deze kolom horen te lopen: gemeten kleurde de rand daarna weer
     body-blauw in plaats van de bandkleur. De overshoot is hoogstens een halve
     scrollbalkbreedte en wordt door de pagina zelf opgevangen; gemeten over
     375 tot 1920 px met een ZICHTBARE scrollbalk is er geen horizontale
     scroll. Zie audit/meet_banden_desktop.mjs. */
  background:var(--cmb-band-3);
  /* Band 3 is de laatste band en moet tot de onderrand van het scherm lopen,
     ook als er maar een handvol kaarten staat. */
  min-height:100dvh;
}
/* Band 2 begint bij de opstapkiezer. De kiezer is display:grid; een absoluut
   gepositioneerd pseudo-element is per spec GEEN grid-item, dus dit verstoort
   de kolomindeling niet. */
html:root:root body.bb-cards-mode .bb-route-cards > .bb-dock-chooser{
  position:relative;
  padding-top:var(--cmb-wave-h);
}
html:root:root body.bb-cards-mode .bb-route-cards > .bb-dock-chooser::before{
  content:"";
  position:absolute;
  left:var(--cmb-bleed);
  right:var(--cmb-bleed);
  top:-100vmax;
  bottom:100%;
  background:var(--cmb-band-1);
  z-index:-1;
  pointer-events:none;
}
html:root:root body.bb-cards-mode .bb-route-cards > .bb-dock-chooser::after{
  content:"";
  position:absolute;
  left:var(--cmb-bleed);
  right:var(--cmb-bleed);
  top:0;
  height:var(--cmb-wave-h);
  background:var(--cmb-wave-1) 0 0 / 100% 100% no-repeat;
  z-index:-1;
  pointer-events:none;
}
/* Band 3 begint bij het eerste sectielabel (dat is het label dat de PAGINA
   zelf levert; de labels van ingevoegde secties dragen data-catalog-section). */
html:root:root body.bb-cards-mode .bb-route-cards > .bb-section-label:not([data-catalog-section]){
  position:relative;
  padding-top:var(--cmb-wave-h);
}
html:root:root body.bb-cards-mode .bb-route-cards > .bb-section-label:not([data-catalog-section])::before{
  content:"";
  position:absolute;
  left:var(--cmb-bleed);
  right:var(--cmb-bleed);
  top:-100vmax;
  bottom:100%;
  background:var(--cmb-band-2);
  z-index:-2;
  pointer-events:none;
}
html:root:root body.bb-cards-mode .bb-route-cards > .bb-section-label:not([data-catalog-section])::after{
  content:"";
  position:absolute;
  left:var(--cmb-bleed);
  right:var(--cmb-bleed);
  top:0;
  height:var(--cmb-wave-h);
  background:var(--cmb-wave-2) 0 0 / 100% 100% no-repeat;
  z-index:-2;
  pointer-events:none;
}
/* Alle sectielabels op de routepagina staan op band 3 en krijgen dus de
   warme kicker-inkt (7,15:1 licht, 9,13:1 donker). De kicker van de
   opstapkiezer staat op band 2 en houdt de navy-inkt uit blok 6.          */
html:root:root body.bb-cards-mode .bb-route-cards .bb-section-label{
  color:var(--cmb-band-3-kicker);
}
html:root:root body.bb-cards-mode .bb-dock-chooser-label{
  color:var(--cmb-band-2-kicker);
}

/* ── 8.3 /app/meer ───────────────────────────────────────────────────────
   Zichtbare secties: Verkennen, Meer informatie, Weergave, Systeem,
   Contact. De
   verdeling houdt het ritme van de mockup zonder zebra:
     band 1  paginakop + Verkennen
     band 2  Meer informatie
     band 3  Weergave, Systeem, Contact - tot de onderrand
   De body draagt band 3, want .mr-wrap eindigt boven de tabbalk-ruimte en
   daaronder zou anders het paginavlak terugkomen.                          */
html:root:root body:has(> .mr-wrap){
  background:var(--cmb-band-3);
}
html:root:root body:has(> .mr-wrap) .mr-wrap{
  isolation:isolate;
}
html:root:root body:has(> .mr-wrap) .mr-seclbl.mr-more-info{
  position:relative;
  padding-top:var(--cmb-wave-h);
  color:var(--cmb-band-2-kicker);
}
html:root:root body:has(> .mr-wrap) .mr-seclbl.mr-more-info::before{
  content:"";
  position:absolute;
  left:var(--cmb-bleed);
  right:var(--cmb-bleed);
  top:-100vmax;
  bottom:100%;
  background:var(--cmb-band-1);
  z-index:-1;
  pointer-events:none;
}
html:root:root body:has(> .mr-wrap) .mr-seclbl.mr-more-info::after{
  content:"";
  position:absolute;
  left:var(--cmb-bleed);
  right:var(--cmb-bleed);
  top:0;
  height:var(--cmb-wave-h);
  background:var(--cmb-wave-1) 0 0 / 100% 100% no-repeat;
  z-index:-1;
  pointer-events:none;
}
/* Band 3 begint bij het eerstvolgende gewone sectielabel na .mr-more-info.
   De keten label -> lijstkaart -> label is de enige manier om "Weergave" te
   raken: alle drie de onderste labels dragen dezelfde klasse en CSS kan geen
   voorganger selecteren.                                                    */
html:root:root body:has(> .mr-wrap) .mr-seclbl.mr-more-info + .mr-listcard + .mr-seclbl{
  position:relative;
  padding-top:var(--cmb-wave-h);
  color:var(--cmb-band-3-kicker);
}
html:root:root body:has(> .mr-wrap) .mr-seclbl.mr-more-info + .mr-listcard + .mr-seclbl::before{
  content:"";
  position:absolute;
  left:var(--cmb-bleed);
  right:var(--cmb-bleed);
  top:-100vmax;
  bottom:100%;
  background:var(--cmb-band-2);
  z-index:-2;
  pointer-events:none;
}
html:root:root body:has(> .mr-wrap) .mr-seclbl.mr-more-info + .mr-listcard + .mr-seclbl::after{
  content:"";
  position:absolute;
  left:var(--cmb-bleed);
  right:var(--cmb-bleed);
  top:0;
  height:var(--cmb-wave-h);
  background:var(--cmb-wave-2) 0 0 / 100% 100% no-repeat;
  z-index:-2;
  pointer-events:none;
}
/* De twee labels die daarna nog komen (Systeem, Contact) staan ook op band 3. */
html:root:root body:has(> .mr-wrap) .mr-seclbl.mr-more-info + .mr-listcard + .mr-seclbl ~ .mr-seclbl{
  color:var(--cmb-band-3-kicker);
}

/* ── 8.4 /app/quiz ───────────────────────────────────────────────────────
   De quiz kent maar EEN inhoudsblok tegelijk (intro, vraag of uitslag), dus
   hier past geen drieslag: twee banden, een golfrand. Band 1 is de strook
   onder de topbalk, band 2 draagt de kaart - precies het "wit-op-band in
   plaats van wit-op-wit" waar het voorstel om vraagt.

   Het paginavlak was de basis: in donker een cyaan/blauwe verlooplaag
   (pages/quiz.html:153-159). Die kent dit merk niet; het wordt het vlakke
   bandvlak.                                                                */
html:root:root body.quiz-proto{
  background:var(--cmb-band-2);
}
html:root:root[data-theme="dark"] body.quiz-proto{
  background:var(--cmb-band-2);
}
html:root:root body.quiz-proto .wrap{
  isolation:isolate;
}
html:root:root body.quiz-proto #app{
  position:relative;
  padding-top:var(--cmb-wave-h);
}
html:root:root body.quiz-proto #app::before{
  content:"";
  position:absolute;
  left:var(--cmb-bleed);
  right:var(--cmb-bleed);
  top:-100vmax;
  bottom:100%;
  background:var(--cmb-band-1);
  z-index:-1;
  pointer-events:none;
}
html:root:root body.quiz-proto #app::after{
  content:"";
  position:absolute;
  left:var(--cmb-bleed);
  right:var(--cmb-bleed);
  top:0;
  height:var(--cmb-wave-h);
  background:var(--cmb-wave-1) 0 0 / 100% 100% no-repeat;
  z-index:-1;
  pointer-events:none;
}

/* ── 8.5 /fun-facts ──────────────────────────────────────────────────────
   Deze pagina scrollt niet met de body: de zoekrij en de chipsrij plakken en
   .iw-list is een eigen scrollvlak met een berekende hoogte. Gordijnen zijn
   hier dus overbodig - elk van de drie stroken IS al een eigen vlak over de
   volle breedte, dus die krijgen hun bandkleur rechtstreeks:
     band 1  .iw-search-row   (transparant; body draagt --iw-bg-soft)
     band 2  .iw-chips
     band 3  .iw-list
   De golfrand van band 2 zit in de extra padding-top van de chipsrij (en
   daarom staat --iw-chips-h in het --iw-blok op 70 in plaats van 50: die
   hoogte zit in de height-calc van .iw-main). De golfrand van band 3 is een
   background-image op .iw-list; met de standaard background-attachment blijft
   die aan de rand van het scrollvlak staan en scrollt hij niet mee.        */
html:root:root body:has(.iw-main) .iw-search-row{
  border-bottom:0;
}
html:root:root body:has(.iw-main) .iw-chips{
  position:sticky;
  background:var(--iw-band-2);
  border-bottom:0;
  padding-top:var(--cmb-wave-h);
  background-image:var(--cmb-wave-1);
  background-repeat:no-repeat;
  background-position:0 0;
  background-size:100% var(--cmb-wave-h);
}
html:root:root body:has(.iw-main) .iw-list{
  background:var(--iw-band-3) var(--cmb-wave-2) 0 0 / 100% var(--cmb-wave-h) no-repeat;
  padding-top:calc(16px + var(--cmb-wave-h));
}

/* ── 8.6 Kaarten OP een band ─────────────────────────────────────────────
   Licht: wit met een zachte schaduw en GEEN haarlijn - de band levert de
   scheiding al. Donker: #0C4275 met schaduw (wit 10,23:1, #ECF0F5 8,94:1).
   Sub-tekst in een
   kaart erft de kleur en zakt in opacity; nergens een vaste rgba(255,255,255)
   die op een licht vlak onzichtbaar wordt.                                  */
html:root:root body.bb-cards-mode .bb-route-card,
html:root:root body.bb-cards-mode .bb-dock-btn,
html:root:root body:has(> .mr-wrap) .mr-listcard,
html:root:root body.quiz-proto #app > .intro,
html:root:root body.quiz-proto #app > .question,
html:root:root body:has(.iw-main) .iw-card{
  background:var(--cmb-onband-card);
  border-color:transparent;
  box-shadow:var(--cmb-onband-shadow);
}
/* De gekozen steiger mag niet in de bandkleur vallen (de actieve tint IS
   #ECF0F5, precies band 2). Hij houdt dus het kaartvlak en krijgt een ring
   plus de oranje statusdot die blok 6 al zet.                               */
html:root:root body.bb-cards-mode .bb-dock-btn.is-active{
  background:var(--cmb-onband-card);
  border-color:transparent;
  box-shadow:var(--cmb-onband-shadow), inset 0 0 0 1.5px var(--cmb-onband-ring);
}
/* De intro-kaart van de quiz droeg een eigen verloop plus een zware schaduw;
   op een band is dat dubbelop. */
html:root:root body.quiz-proto #app > .intro{
  background-image:none;
}

/* ── 8.7 De topbalk op een smal scherm ───────────────────────────────────
   GEMETEN op localhost, /app/routes (de drukste balk: lockup + opstapchip +
   taalpil). De rij is een flexbox met gap 12 en een .bb-header-spacer
   ertussen, dus tussen lockup en knoppencluster valt 2 x 12 = 24 px.

     375 px  balk-inner 349, inhoudsbreedte 325
             lockup 109,4 + 24 + opstapchip 99,3 + 6 + taalpil 90 = 328,7
             -> 3,7 px OVER de inhoudsbreedte (de pil at de binnenmarge op)
     320 px  balk-inner 294, inhoudsbreedte 270
             93,4 + 24 + 99,3 + 6 + 90 = 312,7
             -> 42,7 px OVER: de Britse vlag werd zichtbaar afgekapt

   Het woordmerk verbergen mag niet (besluit 2), dus de compactie
   zit in de rest van de rij.

   WAT BEWUST NIET WORDT INGELEVERD: de taalpil. Zijn NL/EN-tekst staat al
   site-breed op display:none (shared-prototype.css:645) - de pil is 90 px
   omdat elke vlagknop `min-width:44px` draagt, en dat is de tikdoel-vloer
   die de audit van 2026-07-13 als HIGH heeft afgedwongen. De ::after die
   het doel vergroot rekt alleen VERTICAAL (anders overlappen de twee
   vlaggen elkaar), dus de breedte krimpen betekent het tikdoel krimpen.
   Dat wordt hier niet gedaan.

   Onder 390 px: krappere rij-gap en een krappere opstapchip.
   Onder 340 px komt daar de balk zelf bij (inzet 12 -> 8, binnenmarge
   12 -> 8) plus een lockup van 26 px in plaats van 34.

   GEMETEN NA DEZE REGELS (metingen.json in dezelfde map):
     375 px  balk-inner x=13 w=349, inhoudsrand 350,0
             lockup 109,4 + opstapchip 93,3 + taalpil 90 -> eindigt op 350,0
     320 px  balk-inner x=9  w=302, inhoudsrand 303,0
             lockup  83,7 + opstapchip 85,1 + taalpil 90 -> eindigt op 303,0
   In beide gevallen dus precies binnen de rand, en op geen enkele van de vier
   pagina's een horizontale overloop (document.scrollWidth == clientWidth).  */
@media (max-width:389.98px){
  html:root:root .bb-header-inner{
    gap:8px;
  }
  html:root:root .bb-dock-chip{
    padding:0 9px 0 7px;
    gap:5px;
  }
}
@media (max-width:339.98px){
  html:root:root{
    --cmb-lockup-h:26px;
  }
  html:root:root .bb-header{
    left:8px;
    right:8px;
  }
  html:root:root .bb-header-inner{
    padding:0 8px;
    gap:6px;
  }
  html:root:root .bb-dock-chip{
    padding:0 8px 0 6px;
    gap:4px;
    font-size:11px;
  }
}

/* ── 8.8 Het basisraster op de quizpagina ────────────────────────────────
   pages/quiz.html:162-168 legt in donker een vast 80 px-raster van
   rgba(255,255,255,0.025) over de HELE viewport (position:fixed, z-index 0).
   Dat is de textuur van de basislaag; over een vlakke getijdenband leest
   het als vuil op het glas. Dit merk kent geen raster.                     */
html:root:root[data-theme="dark"] body.quiz-proto::before{
  display:none;
}

/* ── 9. De legacy-tokens van de quizpagina ───────────────────────────────
   pages/quiz.html draagt in zijn eigen <head> een blok dat daar letterlijk
   "Legacy token aliases retained so unmigrated rules below keep working"
   heet. Het zet --navy, --navy-deep, --blue, --cyan en --gold, en tientallen
   regels op die pagina hangen er nog aan. Die waarden zijn de oude
   basishuisstijl, geen rol: --blue is #3366FF en --cyan is #69FEFF.

   GEMETEN, niet vermoed. Op de quizpagina in donker telde
   ik in de gerenderde schermafdruk 2781 pixels exact #69FEFF (het kompas-
   embleem en de focusring van het naamveld). Reproduceer met:

     python3 - <<'PY'
     from PIL import Image
     im = Image.open('<schermafdruk>').convert('RGB')
     print(sum(1 for c in im.getdata() if c == (105, 254, 255)))
     PY

   Dit blok vertaalt die aliassen naar de rollen die dit merk al heeft. Het
   is geen nieuwe kleurenset: elke waarde hieronder staat al in blok 1 van
   dit bestand, met zijn meting.

   WAAROM DIT WERKT ZONDER pages/quiz.html AAN TE RAKEN
   Het blok in die pagina is een kaal `:root`, specificiteit (0,1,0). De
   selector hieronder is (0,2,1) en wint dus ongeacht de documentvolgorde -
   precies het verhaal uit de kop van dit bestand.                          */
html:root:root{
  --navy:      #07335D;   /* 12,80:1 op wit                                 */
  --navy-deep: #04203A;   /* het donkere paginavlak van dit merk            */
  --blue:      #00498E;   /* 8,96:1 op wit, wit erop is 8,96:1              */
  --cyan:      #D9E2EC;   /* zelfde rol als --bb-cyan: licht accent, en het
                             staat op deze pagina UITSLUITEND op donkere
                             vlakken (9,78:1 op #07335D, 12,60:1 op #04203A) */
}

/* De literals die NIET door een var lopen. Elk van deze regels zet het
   basiscyaan of het basisblauw rechtstreeks in een rgba(), dus een
   token-override raakt ze niet. Ze staan hier een voor een, met het
   regelnummer in pages/quiz.html waar het origineel staat - grep het na,
   vertrouw dit commentaar niet.                                            */

/* quiz.html: het embleem boven de introtitel. Licht een schaduw in
   basisblauw, donker een vlak in basiscyaan.                               */
html:root:root .intro .q-emblem{
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), 0 6px 18px rgba(7,51,93,0.16);
}
html:root:root[data-theme="dark"] .intro .q-emblem{
  background:rgba(217,226,236,0.12);
  /* De regel hierboven is (0,3,1) en zou de donkere schaduw van quiz.html
     (0,3,0) overschrijven met de LICHTE inset. Daarom hier expliciet terug;
     zie het kopje "de themaval" onderaan dit blok.                         */
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 18px rgba(0,0,0,0.30);
}

/* quiz.html: de focushalo van het naamveld. LET OP: er is een aparte
   donkere nodig. Zonder die tweede regel wint de lichte halo (0,3,1) van
   de donkere regel in quiz.html (0,3,0), en dan staat er in donker een
   ring van rgba(0,73,142,.22) op een navy veld - dat is geen zichtbare
   focus meer. Gemeten voordat dit erin stond.                              */
html:root:root .name-field:focus,
html:root:root .name-field:focus-visible{
  box-shadow:0 0 0 3px rgba(0,73,142,0.22);
}
html:root:root[data-theme="dark"] .name-field:focus,
html:root:root[data-theme="dark"] .name-field:focus-visible{
  box-shadow:var(--bb-focus-ring-on-navy);
}

/* quiz.html: de gloed op de voortgangsbalk.
   De `.result::before`-gloed staat hier NIET meer bij. quiz.html:849 zet
   `body.quiz-proto .result::before { display:none }` - specificiteit (0,3,1),
   gelijk aan de mijne, en dat blok staat LATER in de documentvolgorde, dus
   het wint. Die regels waren dood; ze zijn weg in plaats van dat ze de
   volgende lezer op het verkeerde been zetten.                              */
html:root:root .progress .bar > div{
  box-shadow:0 0 12px rgba(0,73,142,0.28);
}

/* DE UITSLAGKAART IS GEEN BANDKAART - EEN GEMETEN FOUT, HIER GECORRIGEERD
   quiz.html:836-870 geeft `.result` een FOTO met een navy scrim eroverheen
   en zet daarop alle tekst hard op wit: de begroeting, de noemer /10, de
   rangpil en de uitlegzin. Blok 8.6 hierboven trok die kaart aanvankelijk
   het bandkaart-recept in, dus het vlak werd #FFFFFF in licht - en toen
   stond al die witte tekst op wit. Gemeten in de gerenderde pagina:
   begroeting, "Jouw score", /10, de uitlegzin en de secundaire knop op
   1:1, de rangpil op 1,13:1. Zie
   docs/reports/cmb-getijdenbanden-2026-08-07/audit/quiz-result-canalmotorboats-light.png

   De uitslagkaart staat daarom NIET meer in de selectorlijst van 8.6. Zijn
   fotoscrim blijft, in beide thema's, en de inkten hieronder zijn dus altijd
   inkten-op-donker. Dat is meteen de reden dat er geen lichte variant is.

   Deze regels dragen `body.quiz-proto` mee, want de pagina-eigen regels doen
   dat ook; zonder die extra klasse verliezen ze op documentvolgorde.        */
html:root:root body.quiz-proto .result .score{
  background:none;
  -webkit-text-fill-color:currentColor;
  color:#ECF0F5;              /* op de navy scrim                           */
}
html:root:root body.quiz-proto .result .rank{
  background:rgba(217,226,236,0.16);
  color:#ECF0F5;
  border-color:rgba(217,226,236,0.55);
  box-shadow:0 4px 14px rgba(4,32,58,0.40);
}

/* quiz.html:540 zet het periwinkle #E5EBFF van de basis als vlak van het gekozen
   antwoord.                                                                */
html:root:root .opt.selected{
  background:#ECF0F5;         /* inkt #07335D erop is 11,18:1               */
}

/* quiz.html:921 zet de rangpil in donker op #EAFEFF, een cyaan-getint wit.
   Zelfde familie als het basiscyaan; hier de gewone lichte inkt van dit
   merk (14,42:1 op #04203A).                                               */

/* DE THEMAVAL IN DIT BLOK, EEN KEER OPGESCHREVEN
   quiz.html schrijft zijn donkere varianten als `[data-theme="dark"] .x`,
   specificiteit (0,3,0). Elke regel hierboven die met
   `html:root:root .x` begint is (0,3,1) en wint
   dus OOK in donker, ook als hij als lichte regel bedoeld was. Wie hier een
   regel bij zet, controleert of quiz.html een donkere variant van diezelfde
   eigenschap heeft, en zet die dan expliciet terug. Grep:

     grep -n 'data-theme="dark"' pages/quiz.html                            */

/* ── 10. De routedetail-balk: een knop meer dan de metingen van blok 8.7 ──
   Blok 8.7 mat de topbalk op /app/routes en kreeg hem op 375 en 320 px
   precies binnen de rand. Die balk heeft drie dingen: lockup, opstapchip,
   taalpil. De ROUTEDETAIL-balk (/route/<id>) heeft er vier - er staat een
   terugknop `.bb-rd-back` voor de lockup - en die is nooit gemeten.

   GEMETEN op 375 px, /route/cmb-1u-zandhoek, voor deze regels:
     .bb-rd-back        eindigt op  59
     .bb-header-brand   109 breed,  eindigt op 176
     .bb-header-controls 207 breed, eindigt op 399
     inhoudsrand van .bb-header-inner                    363
     -> 36 px OVERLOOP, en document.scrollWidth bleef 375, dus er kwam geen
        scrollbalk: de rechterkant van de taalpil werd stilzwijgend afgekapt.
        Op de schermafdruk is de Britse vlag half weg.

   Reproduceer:
     open /route/cmb-off-royal-zandhoek op 375 px en meet
     .bb-header-controls.getBoundingClientRect().right tegen
     .bb-header-inner.getBoundingClientRect().right


   De oplossing verkleint de lockup op DEZE balk en haalt de gaps aan, in
   plaats van de taalpil te versmallen: die zit op de tikdoel-vloer van 44 px
   per vlagknop uit de HIGH-audit van 2026-07-13.
   `:has()` is hier de enige poort - de routedetailpagina deelt zijn
   body-klasse met de kaartpagina's.                                        */
html:root:root .bb-header-inner:has(.bb-rd-back){
  gap:8px;
}
html:root:root .bb-header-inner:has(.bb-rd-back) .bb-header-brand::before{
  height:26px;
  width:calc(26px * 3.2192);
}
html:root:root .bb-header-inner:has(.bb-rd-back) .bb-dock-chip{
  padding:0 9px 0 7px;
  gap:5px;
}
/* En de ECHTE variabele: de steigernaam in de chip. Gemeten op de
   routedetail-balk, 375 px: `.bb-dock-chip` is 112 px breed met
   "Borneosteiger" erin (naam alleen al 82), tegen ongeveer 80 px met
   "Zandhoek". De overloop hing dus af van WELKE steiger de passagier had
   gekozen - "Westerdoksdijk" en "Borneosteiger" duwden de taalpil eruit,
   "Zandhoek" niet. Een lockup die klein genoeg is voor de langste naam zou
   het woordmerk op elke andere pagina onnodig verkleinen.
   Daarom hier een harde bovengrens op de naam, met ellips. De chip blijft
   aanwijsbaar, de taalpil blijft heel, en de gekozen steiger staat sowieso
   groot op de pagina zelf.                                                 */
/* WAAROM HIER GEEN VASTE BREEDTE EN GEEN FORMULE STAAT
   Twee eerdere versies faalden, allebei omdat ze op losse breedtes waren
   getuned in plaats van op het mechanisme:

   1. Een vaste 64 px plus een breekpunt op 359,98. Werkte op 375 en 320 - de
      twee breedtes die gemeten waren - en liet er precies tussenin een gat:
      +11 px overloop op 360, +6 op 365, +1 op 370. 360 px is de gangbare
      Android-breedte.
   2. Een formule `min(64px, calc(100vw - 303px))`. Nog steeds gokwerk: de
      constante klopte niet (break-even ligt op 371, niet op 367) en er zijn
      DRIE bereiken met verschillende inzetten - onder 340 px staat
      .bb-header namelijk op left/right 8px in plaats van 12px, dus daar is
      er 8 px meer ruimte. Gemeten faalde hij op 340, 360, 362, 365 en 370.

   De balk is een flexbox. Het mechanisme dat hier hoort is dus KRIMP, niet
   een getal: de steigernaam is het enige dat mag inleveren, en hij levert
   precies zoveel in als er tekortkomt, op elke breedte, zonder dat iemand
   een constante hoeft bij te houden.

     .bb-header-controls  mag krimpen, en geeft dat door
     .bb-dock-chip        mag krimpen; min-width:0 want anders houdt de
                          flexbox de intrinsieke minimumbreedte aan en
                          krimpt hij niet
     .bb-dock-chip-name   krimpt en kapt af met een ellips
     .bb-lang-pill        krimpt NIET: 44 px per vlagknop is de tikdoel-vloer
                          uit de HIGH-audit van 2026-07-13
     .bb-header-brand     krimpt niet; het woordmerk mag niet weg
                          (besluit 2)

   Geverifieerd over vijftien breedtes van 320 tot 430 en in beide
   chip-toestanden (gekozen steiger en "Alle routes") met
   docs/reports/cmb-getijdenbanden-2026-08-07/audit/meet_balk_breedtes.mjs   */
html:root:root .bb-header-inner:has(.bb-rd-back) .bb-header-controls{
  flex:0 1 auto;
  min-width:0;
}
html:root:root .bb-header-inner:has(.bb-rd-back) .bb-dock-chip{
  flex:0 1 auto;
  min-width:0;
}
html:root:root .bb-header-inner:has(.bb-rd-back) .bb-dock-chip-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
html:root:root .bb-header-inner:has(.bb-rd-back) .bb-lang-pill{
  flex:0 0 auto;
}
html:root:root .bb-header-inner:has(.bb-rd-back) .bb-header-brand{
  flex:0 0 auto;
}
/* Onder 360 px krimpt de lockup mee, zodat de steigernaam niet als eerste
   tot een enkele letter wordt teruggebracht.                                */
@media (max-width:359.98px){
  html:root:root .bb-header-inner:has(.bb-rd-back) .bb-header-brand::before{
    height:22px;
    width:calc(22px * 3.2192);
  }
  html:root:root .bb-header-inner:has(.bb-rd-back){
    gap:6px;
  }
}

/* DE UITSLAGKAART IS GEEN BANDKAART - EEN GEMETEN FOUT, HIER GECORRIGEERD
   quiz.html:836-870 geeft `.result` een FOTO met een navy scrim eroverheen
   en zet daarop alle tekst hard op wit: de begroeting, de noemer /10, de
   rangpil en de uitlegzin. Blok 8.6 hierboven trok die kaart aanvankelijk
   het bandkaart-recept in, dus het vlak werd #FFFFFF in licht - en toen
   stond al die witte tekst op wit. Gemeten in de gerenderde pagina:
   begroeting, "Jouw score", /10, de uitlegzin en de secundaire knop op
   1:1, de rangpil op 1,13:1. Zie
   docs/reports/cmb-getijdenbanden-2026-08-07/audit/quiz-result-canalmotorboats-light.png

   De uitslagkaart staat daarom NIET meer in de selectorlijst van 8.6. Zijn
   fotoscrim blijft, in beide thema's, en de inkten hieronder zijn dus altijd
   inkten-op-donker. Dat is meteen de reden dat er geen lichte variant is.

   Deze regels dragen `body.quiz-proto` mee, want de pagina-eigen regels doen
   dat ook; zonder die extra klasse verliezen ze op documentvolgorde.        */
html:root:root body.quiz-proto .result .score{
  background:none;
  -webkit-text-fill-color:currentColor;
  color:#ECF0F5;              /* op de navy scrim                           */
}
html:root:root body.quiz-proto .result .rank{
  background:rgba(217,226,236,0.16);
  color:#ECF0F5;
  border-color:rgba(217,226,236,0.55);
  box-shadow:0 4px 14px rgba(4,32,58,0.40);
}

/* quiz.html:540 zet het periwinkle #E5EBFF van de basis als vlak van het gekozen
   antwoord.                                                                */
html:root:root .opt.selected{
  background:#ECF0F5;         /* inkt #07335D erop is 11,18:1               */
}

/* quiz.html:921 zet de rangpil in donker op #EAFEFF, een cyaan-getint wit.
   Zelfde familie als het basiscyaan; hier de gewone lichte inkt van dit
   merk (14,42:1 op #04203A).                                               */

/* DE THEMAVAL IN DIT BLOK, EEN KEER OPGESCHREVEN
   quiz.html schrijft zijn donkere varianten als `[data-theme="dark"] .x`,
   specificiteit (0,3,0). Elke regel hierboven die met
   `html:root:root .x` begint is (0,3,1) en wint
   dus OOK in donker, ook als hij als lichte regel bedoeld was. Wie hier een
   regel bij zet, controleert of quiz.html een donkere variant van diezelfde
   eigenschap heeft, en zet die dan expliciet terug. Grep:

     grep -n 'data-theme="dark"' pages/quiz.html                            */

/* ── 10. De routedetail-balk: een knop meer dan de metingen van blok 8.7 ──
   Blok 8.7 mat de topbalk op /app/routes en kreeg hem op 375 en 320 px
   precies binnen de rand. Die balk heeft drie dingen: lockup, opstapchip,
   taalpil. De ROUTEDETAIL-balk (/route/<id>) heeft er vier - er staat een
   terugknop `.bb-rd-back` voor de lockup - en die is nooit gemeten.

   GEMETEN op 375 px, /route/cmb-1u-zandhoek, voor deze regels:
     .bb-rd-back        eindigt op  59
     .bb-header-brand   109 breed,  eindigt op 176
     .bb-header-controls 207 breed, eindigt op 399
     inhoudsrand van .bb-header-inner                    363
     -> 36 px OVERLOOP, en document.scrollWidth bleef 375, dus er kwam geen
        scrollbalk: de rechterkant van de taalpil werd stilzwijgend afgekapt.
        Op de schermafdruk is de Britse vlag half weg.

   Reproduceer:
     open /route/cmb-off-royal-zandhoek op 375 px en meet
     .bb-header-controls.getBoundingClientRect().right tegen
     .bb-header-inner.getBoundingClientRect().right


   De oplossing verkleint de lockup op DEZE balk en haalt de gaps aan, in
   plaats van de taalpil te versmallen: die zit op de tikdoel-vloer van 44 px
   per vlagknop uit de HIGH-audit van 2026-07-13.
   `:has()` is hier de enige poort - de routedetailpagina deelt zijn
   body-klasse met de kaartpagina's.                                        */
html:root:root .bb-header-inner:has(.bb-rd-back){
  gap:8px;
}
html:root:root .bb-header-inner:has(.bb-rd-back) .bb-header-brand::before{
  height:26px;
  width:calc(26px * 3.2192);
}
html:root:root .bb-header-inner:has(.bb-rd-back) .bb-dock-chip{
  padding:0 9px 0 7px;
  gap:5px;
}
/* En de ECHTE variabele: de steigernaam in de chip. Gemeten op de
   routedetail-balk, 375 px: `.bb-dock-chip` is 112 px breed met
   "Borneosteiger" erin (naam alleen al 82), tegen ongeveer 80 px met
   "Zandhoek". De overloop hing dus af van WELKE steiger de passagier had
   gekozen - "Westerdoksdijk" en "Borneosteiger" duwden de taalpil eruit,
   "Zandhoek" niet. Een lockup die klein genoeg is voor de langste naam zou
   het woordmerk op elke andere pagina onnodig verkleinen.
   Daarom hier een harde bovengrens op de naam, met ellips. De chip blijft
   aanwijsbaar, de taalpil blijft heel, en de gekozen steiger staat sowieso
   groot op de pagina zelf.                                                 */
/* WAAROM DIT EEN FORMULE IS EN GEEN VAST GETAL
   De eerste versie zette hier 64 px en liet de rest aan een breekpunt op
   359,98 over. Dat werkte op 375 en op 320 - de twee breedtes die gemeten
   waren - en liet er precies tussenin een gat: op 360 px liep de balk weer
   11 px over, op 365 nog 6, op 370 nog 1. 360 px is de gangbare
   Android-breedte, dus dat gat is niet theoretisch.

   De naam schaalt daarom mee met de viewport. Op 375 blijft hij 64 px (de
   balk heeft daar 8 px speling, dus de speling raakt op bij 367); onder die
   breedte krimpt hij een-op-een mee.

   Meet het na op elke breedte, niet alleen op de ronde getallen:
     .bb-header-controls.getBoundingClientRect().right
     tegen .bb-header-inner.getBoundingClientRect().right                    */
html:root:root .bb-header-inner:has(.bb-rd-back) .bb-dock-chip-name{
  max-width:min(64px, calc(100vw - 303px));
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* Onder 360 px komt er ruimte bij doordat de lockup en de gaps krimpen, dus
   daar hoort een eigen, ruimere formule. Die dekt in een keer tot 320 px; het
   aparte breekpunt op 340 dat hier eerst stond is daarmee overbodig.        */
@media (max-width:359.98px){
  html:root:root .bb-header-inner:has(.bb-rd-back) .bb-header-brand::before{
    height:22px;
    width:calc(22px * 3.2192);
  }
  html:root:root .bb-header-inner:has(.bb-rd-back){
    gap:6px;
  }
  html:root:root .bb-header-inner:has(.bb-rd-back) .bb-dock-chip-name{
    max-width:min(56px, calc(100vw - 276px));
  }
}

/* ── 11. Geen paginascrim over een KAART ─────────────────────────────────
   styles/safe-area-polish.css zet een vaste `body::after` bovenaan het
   scherm: een strook in --bb-bg-page die naar transparant vervaagt, zodat
   paginainhoud niet onder de statusbalk doorloopt. Op een gewone pagina is
   dat precies goed.

   Op de twee KAARTpagina's is het dat niet. Daar loopt de kaart tot de
   bovenrand door en is er geen tekst om af te dekken, dus het enige wat de
   scrim doet is een navy verloop over een lichte kaart leggen. Dat is op
   een toestel bekeken en lelijk bevonden (2026-08-07); weg dus.

   De statusbalk blijft leesbaar: die staat op deze pagina's al op zijn eigen
   ondoorzichtige vlak (zie het blok over .vi-stage hierboven,
   dat het paspoortnavy in beide thema's zet).

   De gedeelde regel zelf blijft in de basis staan; dit bestand schakelt
   hem alleen uit.                                                          */
html:root:root body:has(.vi-stage)::after{
  display:none;
}

/* Settings switches (captain 2026-09-07): an enabled switch is GREEN, not
   navy. The brand green on the white knob reads as "on" at a glance; the
   base rule in styles/shared-prototype.css uses --bb-blue. */
html:root:root .glass-switch input:checked + .glass-track{
  background:#95C22B;
  border-color:rgba(149,194,43,0.7);
}
