/* ═══════════════════════════════════════════════════════════════════
   NOMAD — VERHOOGD (designlaag C)
   ═══════════════════════════════════════════════════════════════════

   Wat dit is
   ──────────
   Eén laag over de hele stack die drie dingen doet, in deze volgorde:

     1. TOKENS      één waarde per token, in plaats van 7 varianten voor
                    --bg en 5 voor --panel. Werkt vanzelf overal door,
                    omdat elke pagina al via var(--token) tekent.
     2. HYGIENE     tabulaire cijfers, zichtbare focusring, één gloed.
                    Dit hoort onder elke variant; zonder dit valt de rest
                    op een scheve fundering.
     3. VERHOGING   diepte: verlopen in plaats van vlakke vlakken, een
                    blauw getinte schaduw in plaats van zwart, een
                    oplichtende haarlijn boven elk paneel, korrel over
                    het geheel, en beweging die iets betekent.

   Waarom [data-nv] voor bijna alles staat
   ───────────────────────────────────────
   Acht pagina's (index, admin, gate, nomad, blueprint…) hebben nóg een
   <style>-blok ín de body. Dat komt ná deze stylesheet en zou bij gelijke
   specificiteit winnen. De prefix html[data-nv] tilt elke regel hier één
   stap hoger, zodat de laag betrouwbaar wint zonder één !important.
   Het attribuut staat hard in de HTML (niet via JS), dus er is geen flits.

   Waarom [data-nv-vlak] bestaat
   ─────────────────────────────
   De stack noemt hetzelfde ding .panel, .card, .stat, .tile, .kpi, .box,
   .witem, .fb-group, .vp3d-panel … Dat is niet per klasse te targeten.
   nomad-verhoogd.js merkt oppervlakken aan hun vórm (donkere achtergrond,
   ronde hoek, paneelformaat) en zet er data-nv-vlak op. Zonder JS blijft
   de pagina heel — hij mist alleen de diepte.

   Aanpassen? Doe het hier, niet in de pagina's. Dat is het hele punt.
   ═══════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   1. TOKENS — één bron
   ───────────────────────────────────────────────────────────────── */
html[data-nv]{
  /* Grond blijft bijna zwart; de diepte komt van het verschil tussen
     grond en paneel, niet van een lichtere pagina. */
  --bg:#06070D;
  --bg-2:#0A0C15;
  --shell:#08090F;
  --rail:#0A0C14;

  /* Panelen moeten een échte stap boven de grond staan. De eerste poging
     zette dit op #0E1220 — één tint boven de #0D1019 die er al stond, en
     daarmee onzichtbaar: een schaduw heeft niets om zich van af te tekenen
     als paneel en grond dezelfde kleur hebben. Dit is de afstand die de
     diepte draagt (grond #06070D → paneel #111628). */
  --panel:#111628;
  --card:#111628;
  --panel-2:#1A2135;

  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.13);
  --border:rgba(255,255,255,.075);
  --border-soft:rgba(255,255,255,.05);

  --white:#EEF1F8;
  --text:#EEF1F8;
  --gray:#8089A0;
  --muted:#8089A0;
  /* --dim lag op #565E73 en haalt op het nieuwe paneelvlak 2,9:1 — te laag
     voor de mono-labels van 9–11px die er allemaal in staan. Deze waarde
     brengt het op 4,0:1 zonder dat labels naar voren springen; ze horen
     stil te blijven. Volledige AA (4,5:1) vraagt nog één stap lichter
     (#767F99) en verandert dan wél merkbaar het karakter — dat is een
     merkkeuze, geen technische, dus die laat ik aan Julien. */
  --dim:#6F7894;   /* 4,61:1 op de grond. Was #6B7490 = 4,34 en zakte daarmee
                      net onder de leesbaarheidsgrens; gemeten 13-08. */

  --blue:#0052FF;
  --blue-2:#4D7CFF;
  --blue-soft:#4D7CFF;
  --blue-pale:#8FB0FF;
  --cyan:#37E0C8;
  --teal:#37E0C8;
  --green:#3DE08C;
  --red:#FF6B81;
  --amber:#F5A623;

  --glow:rgba(0,82,255,.45);
  --glow-soft:rgba(0,82,255,.14);

  --display:'Archivo',system-ui,sans-serif;
  --body:'DM Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* Schalen die de stack niet had: 25 losse radiuswaarden en 35 fontmaten
     ontstaan doordat er niets is om naar te grijpen. */
  --nv-s1:4px;  --nv-s2:8px;  --nv-s3:12px; --nv-s4:16px;
  --nv-s5:24px; --nv-s6:32px; --nv-s7:48px; --nv-s8:72px;
  --nv-r-sm:8px; --nv-r-md:12px; --nv-r-lg:16px; --nv-r-xl:22px;

  /* ── de verhoging zelf ──
     Het verloop is een TINT, geen vulling: doorzichtige lagen bovenop wat
     het paneel al had. Een groot deel van de stack tekent panelen met
     rgba(255,255,255,.02) in plaats van een volle kleur; een dekkend
     verloop zou die vlak overschilderen en het onderscheid wegnemen.
     Zo werkt dezelfde regel op beide soorten. */
  --nv-vlak:linear-gradient(170deg,
              rgba(255,255,255,.085) 0%,
              rgba(255,255,255,.016) 46%,
              rgba(0,0,0,.095) 100%);
  --nv-vlak-hover:linear-gradient(170deg,
              rgba(255,255,255,.130) 0%,
              rgba(255,255,255,.034) 46%,
              rgba(0,0,0,.070) 100%);
  /* Schaduw is blauw getint, niet zwart. Zwart op bijna-zwart geeft vuil;
     een schaduw in de kleur van de omgeving geeft diepte. Strak onder het
     paneel gehouden — te ver uitgesmeerd leest het als waas, niet als hoogte. */
  --nv-schaduw:0 1px 0 rgba(255,255,255,.07) inset, 0 20px 44px -20px rgba(0,14,60,.90);
  --nv-schaduw-hoog:0 1px 0 rgba(255,255,255,.11) inset, 0 30px 62px -22px rgba(0,18,80,1);
  --nv-knopgloed:0 6px 24px rgba(0,82,255,.32);
  --nv-haarlijn:linear-gradient(90deg,transparent 0%,rgba(120,158,255,.62) 50%,transparent 100%);
  /* ── Beweging ──
     De curve volgt uit de RICHTING van de beweging, de duur uit de GROOTTE
     van het oppervlak. Dat is Emil Kowalski's beslistabel, hier als tokens
     zodat niet elke pagina zijn eigen bezier verzint: er stonden er 17 in
     de stack, waarvan vier met een overshoot boven 1 (bouncy) op UI die
     tientallen keren per dag gezien wordt.

     Regel die de stack niet had: nooit `ease-in` op UI. Die begint traag en
     vertraagt precies het moment waar de gebruiker naar kijkt; een ease-out
     van 200ms VOELT sneller dan een ease-in van 200ms. */
  --nv-duur:.22s;                            /* standaard UI-transitie      */
  --nv-curve:cubic-bezier(.16,1,.3,1);       /* ease-out-expo (bestaand)    */

  --nv-druk:.14s;                            /* knop-indruk      100-160ms  */
  --nv-snel:.16s;                            /* hover, kleur, focus         */
  --nv-menu:.2s;                             /* dropdown, select 150-250ms  */
  --nv-lade:.32s;                            /* lade, modal      200-500ms  */
  --nv-entree:.5s;                           /* binnenkomst, eenmalig       */

  --nv-uit:cubic-bezier(.23,1,.32,1);        /* binnenkomen / verdwijnen    */
  --nv-inuit:cubic-bezier(.77,0,.175,1);     /* verplaatsen op het scherm   */
  --nv-lade-curve:cubic-bezier(.32,.72,0,1); /* iOS-lade                    */

  /* De indruk-diepte. Subtiel houden (.95-.98); scale(0) bestaat niet in
     de echte wereld en mag nergens het startpunt van een animatie zijn. */
  --nv-druk-schaal:.97;

  /* De verduistering achter een uitschuiflade. Stond op vier plekken als een
     harde rgba(2,3,7,.62): in de ledenmenubalk, in het accountpaneel en twee
     keer in het systeemrapport. Op een zwarte pagina klopt dat, maar de
     admin en het dashboard mogen overdag wit worden -- en dan lag er een
     bijna-zwart doek over een wit scherm. Als token volgt hij de stand. */
  --nv-scrim:rgba(2,3,7,.62);
  --nv-lade-schaduw:0 0 60px rgba(0,0,0,.55);
}

/* ─────────────────────────────────────────────────────────────────
   2. HYGIENE
   ───────────────────────────────────────────────────────────────── */

/* Zichtbare focus. Stond op 25 van de 37 bestanden nergens: tabben door
   de admin liet niet zien waar je was. */
html[data-nv] :focus-visible{
  outline:2px solid var(--blue-2);
  outline-offset:2px;
  border-radius:3px;
}
/* Muisklik mag geen ring geven; toetsenbord wel. */
html[data-nv] :focus:not(:focus-visible){outline:none}

/* Tabulaire cijfers. Zonder dit is een 1 smaller dan een 8 en schuiven
   bedragen in kolommen heen en weer bij elke verversing — op een
   handelsplatform het verschil tussen af en niet af.
   De tagger zet data-nv-cijfers op alles wat in mono staat; hier vangen
   we daarnaast de vaste gevallen af. */
html[data-nv] table,
html[data-nv] td,
html[data-nv] th,
html[data-nv] input[type="number"],
html[data-nv] [data-nv-cijfers],
html[data-nv] [class*="stat"],
html[data-nv] [class*="kpi"],
html[data-nv] [class*="cijfer"],
html[data-nv] [class*="metric"],
html[data-nv] [class*="tabel"],
html[data-nv] [class*="waarde"]{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* Eén gloed. Op tien pagina's stonden er twee — linksboven blauw,
   rechtsonder cyaan of amber. Twee lichtbronnen maken het beeld troebel
   in plaats van diep. admin.html houdt zijn body::after: dat is daar geen
   gloed maar de scanline, en die hoort bij het terminalkarakter. */
html[data-nv]:not([data-nv-scanline]) body::after{display:none}

/* GEEN text-wrap:balance hier, hoe verleidelijk ook.
   Het herverdeelt regels in bestaande koppen, en op pagina's waar de
   regelval met de hand is gezet (index.html, gate, gratis) is dat geen
   verbetering maar een verrassing. Het hoort ook niet bij variant C: dit
   is typografische hygiëne, geen diepte. Wie het wil, zet het per pagina
   aan — een globale laag hoort geen tekst te herbreken. */

/* Wat klikbaar is, ziet er klikbaar uit. */
html[data-nv] button:not(:disabled),
html[data-nv] [role="button"]:not([aria-disabled="true"]),
html[data-nv] summary,
html[data-nv] label[for]{cursor:pointer}


/* ─────────────────────────────────────────────────────────────────
   3. VERHOGING — diepte, materiaal, beweging
   ───────────────────────────────────────────────────────────────── */

/* ── Korrel ──
   Een nauwelijks zichtbare ruis over het geheel. Dit is wat het verschil
   maakt tussen "donkere vlakken" en "materiaal": volkomen vlakke kleur
   leest als plastic. html::after is stackbreed ongebruikt, dus de gloed
   op body::before blijft ongemoeid. */
html[data-nv]::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.038;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
/* Print en zeer smalle schermen hebben niets aan korrel. */
@media print{ html[data-nv]::after{display:none} }

/* ── Oppervlakken ──
   Verloop in plaats van vlakke vulling, getinte schaduw in plaats van
   zwart, en een haarlijn bovenlangs die naar de randen uitdooft. */
html[data-nv] [data-nv-vlak]{
  box-shadow:var(--nv-schaduw);
  transition:box-shadow var(--nv-duur) var(--nv-curve),
             background-image var(--nv-duur) var(--nv-curve),
             transform var(--nv-duur) var(--nv-curve);
}
/* De tint alleen op panelen die zélf geen verloop hebben. .card en .step op
   index.html tekenen hun oppervlak met linear-gradient(); background-image
   is één eigenschap, dus onze tint zou dat verloop wissen in plaats van
   aanvullen. Die panelen hebben de valling al — zij krijgen alleen de
   schaduw en de haarlijn. */
html[data-nv] [data-nv-vlak]:not([data-nv-eigen-vlak]){
  background-image:var(--nv-vlak);
}

/* De haarlijn zit in ::before zodat hij de radius van het paneel volgt.
   Dat vraagt een gepositioneerde ouder. Twee gescheiden attributen, omdat
   het twee verschillende dingen zijn:
     data-nv-lijn   → dit paneel mag een haarlijn dragen
     data-nv-anker  → dit paneel is static en mag veilig relative worden

   Ze los houden is niet netjesheid maar noodzaak: de eerste versie zette
   position:relative op álles wat een lijn kreeg, en duwde daarmee de
   zwevende .shot-side op index.html (position:absolute) de flow in — goed
   voor 338px extra paginahoogte. Een designlaag hoort nooit iets te
   verplaatsen. */
html[data-nv] [data-nv-vlak][data-nv-anker]{position:relative}
html[data-nv] [data-nv-vlak][data-nv-lijn]::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:var(--nv-haarlijn);
  pointer-events:none;
  z-index:1;
  border-top-left-radius:inherit;
  border-top-right-radius:inherit;
}
/* Panelen die al een eigen ::before gebruiken (actieve nav-streep,
   sierlijn) krijgen van de tagger géén data-nv-anker, en dus vanzelf ook
   geen haarlijn — de bestaande decoratie blijft heel. */

/* Genest paneel krijgt een lichtere behandeling: twee volle schaduwen
   over elkaar leest als vuil, niet als diepte. */
html[data-nv] [data-nv-vlak="sub"]{
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 20px -16px rgba(0,14,58,.8);
}
html[data-nv] [data-nv-vlak="sub"]:not([data-nv-eigen-vlak]){
  background-image:linear-gradient(170deg,rgba(255,255,255,.042) 0%,rgba(255,255,255,.008) 50%,rgba(0,0,0,.04) 100%);
}
html[data-nv] [data-nv-vlak="sub"][data-nv-lijn]::before{opacity:.5}

/* Interactieve panelen tillen op bij aanwijzen. Alleen waar het paneel
   ook echt iets doet — de tagger merkt dat aan een link, knop of
   klik-handler binnenin. */
@media (hover:hover) and (pointer:fine){
  html[data-nv] [data-nv-vlak][data-nv-klikbaar]:hover{
    box-shadow:var(--nv-schaduw-hoog);
    transform:translateY(-2px);
  }
}
html[data-nv] [data-nv-vlak][data-nv-klikbaar]:not([data-nv-eigen-vlak]):hover{
  background-image:var(--nv-vlak-hover);
}

/* ── Rijen ──
   Een tabel is de plek waar je scant. Oplichten bij aanwijzen scheelt
   meer dan welk siereffect ook. */
html[data-nv] tbody tr{transition:background-color .16s ease}
html[data-nv] tbody tr:hover{background-color:rgba(255,255,255,.028)}

/* ── Knoppen ──
   Primaire knop krijgt de blauwe gloed; hij is het enige verzadigde vlak
   op het scherm en mag dat laten merken. */
html[data-nv] [data-nv-knop="primair"]{
  box-shadow:var(--nv-knopgloed);
  transition:transform var(--nv-duur) var(--nv-curve),
             box-shadow var(--nv-duur) var(--nv-curve),
             background-color var(--nv-duur) var(--nv-curve);
}
@media (hover:hover) and (pointer:fine){
  html[data-nv] [data-nv-knop="primair"]:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 32px rgba(0,82,255,.42);
  }
}
html[data-nv] [data-nv-knop="primair"]:active{transform:translateY(0)}

/* ── Levenstekens ──
   Een stip die pulseert zegt "dit ververst" zonder een woord tekst.
   De tagger vindt ze aan hun klassenaam (live, pulse, blip, status-dot). */
html[data-nv] [data-nv-live]{animation:nv-blip 2.1s ease-in-out infinite}
@keyframes nv-blip{
  0%,100%{opacity:1;   transform:scale(1)}
  50%    {opacity:.32; transform:scale(.82)}
}

/* ── Binnenkomst ──
   Eén georkestreerd moment bij het laden, geen losse effectjes overal.
   Panelen komen in leesvolgorde binnen, met een korte trap ertussen.
   Alleen bij de eerste paint: de tagger zet data-nv-entree en haalt hem
   er daarna af, zodat later bijgeladen data niet opnieuw danst. */
html[data-nv] [data-nv-entree]{
  animation:nv-in .5s var(--nv-curve) backwards;
  animation-delay:calc(var(--nv-i,0) * 45ms);
}
@keyframes nv-in{
  from{opacity:0; transform:translateY(10px)}
  to  {opacity:1; transform:none}
}

/* ── Doek en paneel ──
   Gevonden met de "wat beweegt er NIET"-bril: de lade schuift binnen, maar
   het doek eronder plofte er in één frame in, en modals verschenen zonder
   enige overgang. Een oppervlak dat uit het niets verschijnt leest als een
   haperende pagina, niet als een geopend venster.

   Bewust met keyframes en niet met een transitie: deze schakelen `display`,
   en daar valt niets aan te interpoleren. Een modal wordt ook niet tien keer
   per seconde opnieuw geopend, dus het onderbreekbaarheidsbezwaar tegen
   keyframes speelt hier niet.

   Alleen de binnenkomst. Bij sluiten haalt de pagina het element meteen weg;
   daar een vertrek-animatie op zetten vraagt JavaScript, en dat is een
   grotere ingreep dan de winst rechtvaardigt. */
html[data-nv] .scrim.show,
html[data-nv] .modal.open,
html[data-nv] .imodal.open,
html[data-nv] .overlay.open,
html[data-nv] .emp-modal-ov.open{
  animation:nv-doek var(--nv-menu) var(--nv-uit);
}
@keyframes nv-doek{from{opacity:0} to{opacity:1}}

/* Het paneel zelf komt net iets kleiner binnen. Niet vanuit nul: niets in
   de echte wereld verschijnt uit het niets. */
html[data-nv] .modal.open > *,
html[data-nv] .imodal.open > *{
  animation:nv-paneel var(--nv-lade) var(--nv-uit);
}
@keyframes nv-paneel{
  from{opacity:0; transform:scale(.97)}
  to  {opacity:1; transform:none}
}

/* ── Scrollbalk ──
   Kleine plek waar de meeste donkere dashboards de illusie verliezen. */
html[data-nv] *::-webkit-scrollbar{width:10px;height:10px}
html[data-nv] *::-webkit-scrollbar-track{background:transparent}
html[data-nv] *::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.10);
  border:2px solid transparent;
  background-clip:content-box;
  border-radius:999px;
}
html[data-nv] *::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18);background-clip:content-box}
html[data-nv]{scrollbar-color:rgba(255,255,255,.14) transparent}

html[data-nv] ::selection{background:rgba(0,82,255,.35);color:#fff}


/* ─────────────────────────────────────────────────────────────────
   4. RESPECT
   ───────────────────────────────────────────────────────────────── */

/* Wie beweging heeft uitgezet, krijgt de diepte wél en de beweging niet.
   De laag verliest daarmee niets essentieels. */
@media (prefers-reduced-motion:reduce){
  html[data-nv] [data-nv-entree]{animation:none}
  html[data-nv] [data-nv-live]{animation:none}
  html[data-nv] .modal.open > *,
  html[data-nv] .imodal.open > *{animation:none}
  html[data-nv] *,
  html[data-nv] *::before,
  html[data-nv] *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Op een klein scherm kosten grote schaduwen alleen maar rekentijd;
   de diepte leest daar toch niet. Korrel blijft, die is gratis. */
@media (max-width:640px){
  html[data-nv] [data-nv-vlak]{box-shadow:0 8px 22px -16px rgba(0,16,64,.7)}
  html[data-nv] [data-nv-vlak][data-nv-klikbaar]:hover{transform:none}
}

/* Print: alles vlak en leesbaar. */
@media print{
  html[data-nv] [data-nv-vlak]{box-shadow:none;background-image:none}
  html[data-nv] [data-nv-vlak]::before{display:none}
}

/* ═════════════════════════════════════════════════════════════════
   6. DAGSTAND — het whiteboard
   ═════════════════════════════════════════════════════════════════
   De nachtstand is een cockpit: diep, verzadigd, met gloed. De dagstand is
   het tegenovergestelde en moet dat ook durven zijn — geen omgekeerde
   cockpit maar een wit bord waar je met een stift op schrijft.

   Eén regel bepaalt alles hieronder: ALLES IS GRIJS, BEHALVE WAT AANDACHT
   VRAAGT. Groen, cyaan, amber en rood bestaan niet in de dagstand. Ze halen
   op wit ook geen leesbaar contrast (1,66 tot 2,74 op 1 -- gemeten), maar dat
   is niet de reden dat ze weg zijn; ze zijn weg omdat vijf kleuren die alle
   vijf iets betekenen op een wit vlak lawaai worden.

   Wat "goed" en "fout" onderscheidt, komt daarom uit twee andere bronnen:
     · ZWAARTE   donkerder grijs is belangrijker; --stil is bijzaak.
     · VORM      effen rand = echt · streepjesrand = demo · stippelrand = leeg.
   En precies één ding blijft gekleurd: de blauwe stift. Die staat voor
   "hier moet je kijken" -- actieve pagina, focus, en het cijfer dat afwijkt.

   Waarom drie standen en niet twee: 'systeem' hoort de standaard te zijn,
   zodat het scherm 's avonds vanzelf meegaat met je Mac.

   AFGESCHERMD OP data-nv-dag. Alleen werkschermen mogen licht worden -- de
   admin, het rapport en het dashboard. De verkoop- en landingspagina's niet:
   daar is donker een ontwerpkeuze en geen comfortkwestie, en een bezoeker met
   een lichte Mac zou anders een half ander merk te zien krijgen. Welke
   pagina's het attribuut krijgen staat in scripts/thema-injecteren.mjs.
   ───────────────────────────────────────────────────────────────── */

html[data-nv-dag][data-thema="dag"]{
  /* ── grond: wit, met twee treden grijs eronder ── */
  --bg:#FFFFFF;
  --bg-2:#F7F8FA;
  --shell:#FFFFFF;
  --rail:#F7F8FA;          /* menubalk juist iets grijzer dan de pagina */
  --panel:#FFFFFF;
  --card:#FFFFFF;
  --panel-2:#EEF0F3;       /* verzonken: invoer, balkjes, sporen */

  /* ── lijnen: vaste kleuren, geen doorzichtigheid.
        rgba(255,255,255,…) is op wit onzichtbaar; dat is de enige reden dat
        deze vier hier hard staan en niet als overlay. ── */
  --line:#E2E5E9;
  --line-2:#C7CBD2;
  --border:#E2E5E9;
  --border-soft:#EDEFF2;

  /* ── inkt: vier treden, elk met een eigen taak ── */
  --white:#14171C;         /* de leestekst. Naam klopt niet meer; de plek wel. */
  --text:#14171C;
  --gray:#333944;          /* secundair, nog volwaardig leesbaar (9,8:1) */
  --muted:#333944;
  --dim:#454B57;           /* labels en bijschriften (5,9:1) */
  --zacht:#333944;
  --stil:#565C69;          /* bijzaak (4,6:1) -- de ondergrens */

  /* ── de blauwe stift: het enige wat kleur houdt ── */
  --blue:#0052FF;
  --blue-2:#0040C4;        /* op wit 8,3:1 -- donkerder dan 's nachts, want
                              lichtblauw verdwijnt in een wit vlak */
  --blue-soft:#0040C4;
  --blue-pale:#5B84F0;

  /* ── signaalkleuren bestaan niet meer; ze worden inkt ──
        Bewust NIET verwijderd maar overschreven: er staan 86 verwijzingen in
        de grafiekcode en tientallen in de stack. Ze allemaal opsporen zou
        betekenen dat één gemiste plek een felgroen vlekje op het whiteboard
        achterlaat. Zo kán dat niet gebeuren. */
  --green:#3B4048;
  --cyan:#5A606B;
  --teal:#5A606B;
  --amber:#0040C4;         /* "let op" -> de stift */
  --red:#14171C;           /* "fout" -> het zwaarste grijs, niet rood */

  /* ── geen gloed op een whiteboard ── */
  --glow:rgba(0,82,255,.16);
  --glow-soft:rgba(0,82,255,.05);

  /* ── de verhoging: vlak, want een whiteboard heeft geen diepte ──
        Een spoortje licht bovenaan en een zachte grijze schaduw is genoeg om
        een paneel van de pagina te scheiden. Het verloop van de nachtstand
        (wit naar zwart over 170°) maakt een wit paneel vuilgrijs onderaan. */
  --nv-vlak:linear-gradient(170deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 60%);
  --nv-vlak-hover:linear-gradient(170deg,rgba(255,255,255,1) 0%,rgba(20,23,28,.012) 100%);
  --nv-schaduw:0 1px 2px rgba(20,23,28,.05), 0 10px 24px -14px rgba(20,23,28,.16);
  --nv-schaduw-hoog:0 1px 3px rgba(20,23,28,.07), 0 18px 36px -16px rgba(20,23,28,.22);
  --nv-knopgloed:0 4px 14px rgba(0,82,255,.18);
  --nv-haarlijn:linear-gradient(90deg,transparent 0%,rgba(20,23,28,.10) 50%,transparent 100%);

  /* Overdag hoeft het doek de pagina alleen naar achteren te duwen, niet uit
     te doven: 62% zwart op wit leest als een storing. */
  --nv-scrim:rgba(20,23,28,.34);
  --nv-lade-schaduw:0 0 48px rgba(20,23,28,.20);
}

/* Systeemstand: volg de Mac, tenzij je zelf 'nacht' koos.
   :not() maakt deze regel specifieker dan het blok hierboven, dus een eigen
   keuze wint altijd van de systeeminstelling. */
@media (prefers-color-scheme:light){
  html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]){
    --bg:#FFFFFF;--bg-2:#F7F8FA;--shell:#FFFFFF;--rail:#F7F8FA;
    --panel:#FFFFFF;--card:#FFFFFF;--panel-2:#EEF0F3;
    --line:#E2E5E9;--line-2:#C7CBD2;--border:#E2E5E9;--border-soft:#EDEFF2;
    --white:#14171C;--text:#14171C;--gray:#333944;--muted:#333944;
    --dim:#454B57;--zacht:#333944;--stil:#565C69;
    --blue:#0052FF;--blue-2:#0040C4;--blue-soft:#0040C4;--blue-pale:#5B84F0;
    --green:#3B4048;--cyan:#5A606B;--teal:#5A606B;--amber:#0040C4;--red:#14171C;
    --glow:rgba(0,82,255,.16);--glow-soft:rgba(0,82,255,.05);
    --nv-vlak:linear-gradient(170deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 60%);
    --nv-vlak-hover:linear-gradient(170deg,rgba(255,255,255,1) 0%,rgba(20,23,28,.012) 100%);
    --nv-schaduw:0 1px 2px rgba(20,23,28,.05), 0 10px 24px -14px rgba(20,23,28,.16);
    --nv-schaduw-hoog:0 1px 3px rgba(20,23,28,.07), 0 18px 36px -16px rgba(20,23,28,.22);
    --nv-knopgloed:0 4px 14px rgba(0,82,255,.18);
    --nv-haarlijn:linear-gradient(90deg,transparent 0%,rgba(20,23,28,.10) 50%,transparent 100%);
    --nv-scrim:rgba(20,23,28,.34);
    --nv-lade-schaduw:0 0 48px rgba(20,23,28,.20);
  }
}

/* ── Wat er in de dagstand uit moet ─────────────────────────────
   Sfeerlagen die op zwart diepte geven en op wit vuil worden. Ze staan in
   verschillende bestanden onder verschillende namen; daarom op vorm en niet
   op klassenaam. */
html[data-nv-dag][data-thema="dag"] .scanlines,
html[data-nv-dag][data-thema="dag"] .grain,
html[data-nv-dag][data-thema="dag"] [data-nv-korrel]{display:none!important}
html[data-nv-dag][data-thema="dag"] body::before,
html[data-nv-dag][data-thema="dag"] body::after{opacity:.35}

/* ── Status krijgt vorm in plaats van kleur ─────────────────────
   Op zwart deed de kleur dit werk. Op wit is alles grijs, dus moet de rand
   het zeggen: effen = het is echt · streepjes = demo, verzonnen cijfers ·
   stippels = er is niets. */
html[data-nv-dag][data-thema="dag"] .tag,
html[data-nv-dag][data-thema="dag"] .badge,
html[data-nv-dag][data-thema="dag"] .pill{background:none;color:var(--gray);
  border:1px solid var(--line-2)}
html[data-nv-dag][data-thema="dag"] .tag.live,
html[data-nv-dag][data-thema="dag"] .badge.live,
html[data-nv-dag][data-thema="dag"] .pill.p-green{border-color:var(--ink,#14171C);color:var(--white)}
html[data-nv-dag][data-thema="dag"] .tag.demo,
html[data-nv-dag][data-thema="dag"] .badge:not(.live):not(.deels),
html[data-nv-dag][data-thema="dag"] .pill.p-red{border-style:dashed}
html[data-nv-dag][data-thema="dag"] .tag.geen,
html[data-nv-dag][data-thema="dag"] .pill.p-num{border-style:dotted;color:var(--stil)}
html[data-nv-dag][data-thema="dag"] .tag.deels,
html[data-nv-dag][data-thema="dag"] .badge.deels,
html[data-nv-dag][data-thema="dag"] .pill.p-blue{border-color:var(--blue);color:var(--blue-2)}

/* De actieve pagina in de menubalk: de blauwe stift, en verder niets. */
html[data-nv-dag][data-thema="dag"] .nav-i.on{background:rgba(0,82,255,.055)}

/* ── Vaste donkere vlakken die op wit blijven staan ───────────────
   Een paar plekken in de stack tekenen hun eigen donkere verloop met vaste
   hex-waarden in plaats van tokens. Die halen de dagstand niet, en dat valt
   op: één zwart blok midden op een wit scherm. Ze staan hier bij naam omdat
   het er weinig zijn -- worden het er meer, dan horen die kleuren in tokens
   en niet in deze lijst.

   De vervolgkaart op het dashboard is de opvallendste: een grote tegel met
   een videostill en een voortgangsbalk. */
html[data-nv-dag][data-thema="dag"] .resume-card{
  background:linear-gradient(150deg,#F2F4F8 0%,#E7EAF0 70%);border-color:var(--line-2)}
html[data-nv-dag][data-thema="dag"] .resume-card::before{opacity:.35}
html[data-nv-dag][data-thema="dag"] .resume-card .rc-play{
  background:rgba(20,23,28,.06);border-color:rgba(20,23,28,.18)}
html[data-nv-dag][data-thema="dag"] .resume-card:hover{
  box-shadow:0 18px 44px rgba(20,23,28,.16)}
@media (prefers-color-scheme:light){
  html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .resume-card{
    background:linear-gradient(150deg,#F2F4F8 0%,#E7EAF0 70%);border-color:var(--line-2)}
  html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .resume-card::before{opacity:.35}
  html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .resume-card .rc-play{
    background:rgba(20,23,28,.06);border-color:rgba(20,23,28,.18)}
}

/* De topbalk van de admin staat op rgba(7,9,15,.72) -- een vaste bijna-zwarte
   waas achter de blur. Die bleef in de dagstand als een donkere strook boven
   een wit scherm staan, en juist daar hangt de schakelaar. Zelfde recept, in
   het wit: doorzichtig genoeg om de blur te laten werken.

   #adminSide is de uitschuifbare zijbalk, de iframe-grond is wat je ziet in
   de seconde dat Intelligence nog laadt -- een zwarte flits op een wit
   scherm, elke vijf minuten opnieuw. */
html[data-nv-dag][data-thema="dag"] .top{background:rgba(255,255,255,.78)}
html[data-nv-dag][data-thema="dag"] #adminSide{background:var(--rail)}
html[data-nv-dag][data-thema="dag"] #intelFrame{background:var(--bg)}
@media (prefers-color-scheme:light){
  html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .top{background:rgba(255,255,255,.78)}
  html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) #adminSide{background:var(--rail)}
  html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) #intelFrame{background:var(--bg)}
}

/* ── Letterdikte op wit ───────────────────────────────────────────
   De stack zet -webkit-font-smoothing:antialiased op body. Op een donkere
   grond helpt dat: lichte letters lopen daar optisch dicht, en antialiased
   houdt ze scherp. Op wit werkt het precies tegen -- donkere tekst rendert
   er merkbaar dunner van, en dat is waarom de dagstand "bleek" oogde terwijl
   het contrast op papier ruim voldoende was.

   Terug naar de standaard (subpixel) op de lichte stand. Dit is één regel en
   het scheelt meer dan welke kleuraanpassing ook. */
html[data-nv-dag][data-thema="dag"] body,
html[data-nv-dag][data-thema="dag"]{
  -webkit-font-smoothing:auto;
  -moz-osx-font-smoothing:auto;
}
/* Kleine mono op wit heeft een halve graad meer gewicht nodig. Bij 9,5 en
   10,5 pixels is het verschil tussen 400 en 500 precies het verschil tussen
   "staat er" en "lees je". Alleen de kleine maten; de lopende tekst blijft. */
html[data-nv-dag][data-thema="dag"] .kpi .k,
html[data-nv-dag][data-thema="dag"] .kpi .m,
html[data-nv-dag][data-thema="dag"] .p-head .ph-sub,
html[data-nv-dag][data-thema="dag"] .eyebrow,
html[data-nv-dag][data-thema="dag"] .nav-sec,
html[data-nv-dag][data-thema="dag"] .upd,
html[data-nv-dag][data-thema="dag"] th,
html[data-nv-dag][data-thema="dag"] .wpch,
html[data-nv-dag][data-thema="dag"] .wpsub,
html[data-nv-dag][data-thema="dag"] .dichtkop,
html[data-nv-dag][data-thema="dag"] .tag,
html[data-nv-dag][data-thema="dag"] .badge,
html[data-nv-dag][data-thema="dag"] .dichtrij button,
html[data-nv-dag][data-thema="dag"] .cmd-r,
html[data-nv-dag][data-thema="dag"] .lg{font-weight:500}
html[data-nv-dag][data-thema="dag"] .kwaar{font-weight:600;color:var(--dim)}
/* Tekst in de grafieken: dezelfde redenering, maar SVG heeft geen
   font-smoothing -- daar doet alleen het gewicht het werk. */
html[data-nv-dag][data-thema="dag"] .ss,
html[data-nv-dag][data-thema="dag"] .svd{font-weight:500}

@media (prefers-color-scheme:light){
  /* Zelfde behandeling wanneer de dagstand uit je systeeminstelling komt.
     Losse regels, want :not() maakt ze specifieker en die specificiteit
     moet kloppen met het tokenblok erboven. */

html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) body,
html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]){
  -webkit-font-smoothing:auto;
  -moz-osx-font-smoothing:auto;
}
/* Kleine mono op wit heeft een halve graad meer gewicht nodig. Bij 9,5 en
   10,5 pixels is het verschil tussen 400 en 500 precies het verschil tussen
   "staat er" en "lees je". Alleen de kleine maten; de lopende tekst blijft. */
html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .kpi .k,
html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .kpi .m,
html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .p-head .ph-sub,
html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .eyebrow,
html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .nav-sec,
html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .upd,
html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) th,
html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .wpch,
html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .wpsub,
html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .dichtkop,
html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .tag,
html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .badge,
html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .dichtrij button,
html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .cmd-r,
html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .lg{font-weight:500}
html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .kwaar{font-weight:600;color:var(--dim)}
/* Tekst in de grafieken: dezelfde redenering, maar SVG heeft geen
   font-smoothing -- daar doet alleen het gewicht het werk. */
html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .ss,
html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .svd{font-weight:500}
}

/* ══════════════════════════════════════════════════════════════════
   DE SCHAKELAAR — dag of nacht
   ══════════════════════════════════════════════════════════════════
   Eén tuimelschakelaar: zon links, maan rechts, een knop die schuift.
   Beide pictogrammen blijven staan, zodat je ziet wat de twee standen
   zijn en niet hoeft te raden wat er gebeurt als je klikt.

   'Auto' is als knop verdwenen op verzoek, maar niet als gedrág: zolang
   je nooit geklikt hebt staat er geen data-thema en volgt het scherm je
   Mac. De schakelaar laat dan zien wat je Mac op dát moment doet. Pas je
   eerste klik legt een eigen keuze vast. Je verliest dus niets -- je kunt
   er alleen niet meer met een knop naar terug.

   De markup komt uit nomad-verhoogd.js; die hangt hem in elk element met
   data-nv-thema.
   ══════════════════════════════════════════════════════════════════ */
/* ── één knop, geen twee ──
   De knop zegt waar je NU staat (pictogram + label) en draagt rechts de baan
   met het knopje dat laat zien welke kant het op gaat. Rol = switch: een
   schermlezer leest "Nachtstand, aan/uit", niet twee losse knoppen waarvan er
   altijd één zinloos is. */
html[data-nv] .nv-thema{
  --nv-baan:var(--panel-2);
  --nv-knop:var(--white);
  --nv-knop-rand:var(--line-2);
  --nv-knop-schaduw:0 1px 3px rgba(0,0,0,.45);
  box-sizing:border-box;
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:12px;
  background:transparent;border:1px solid transparent;
  color:var(--gray);font-family:var(--body);font-size:13px;font-weight:500;
  cursor:pointer;text-align:left;
  transition:background .16s,border-color .16s,color .16s,transform .16s cubic-bezier(.16,1,.3,1);
}
@media (hover:hover) and (pointer:fine){
  html[data-nv] .nv-thema:hover{
  background:var(--panel-2);border-color:var(--line);color:var(--white);
  transform:translateY(-1px);
}
}
html[data-nv] .nv-thema:active{transform:translateY(0) scale(.99)}
html[data-nv] .nv-thema:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px}

/* Het pictogram staat in dezelfde tegel als de menu-items eronder, zodat de
   voet van de menubalk één rij knoppen is en geen verzameling losse dingen. */
html[data-nv] .nv-thema-ic{
  flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;
  border-radius:9px;background:var(--panel-2);border:1px solid var(--line);
  color:var(--gray);transition:color .16s,border-color .16s;
}
html[data-nv] .nv-thema:hover .nv-thema-ic{color:var(--blue-2);border-color:var(--line-2)}
html[data-nv] .nv-thema-ic svg{
  width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s var(--nv-curve);
}
@media (hover:hover) and (pointer:fine){
  html[data-nv] .nv-thema:hover .nv-thema-ic svg{transform:rotate(24deg)}
}

html[data-nv] .nv-thema-lb{
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* De baan met het knopje. 34x20, knopje 14 — schuift 14px op, precies de
   breedte binnen de padding. Geen percentages: bij één knopje zou een half
   afgeronde procentbreedte een haartje speling geven die je ziet. */
html[data-nv] .nv-thema-baan{
  flex:0 0 auto;position:relative;width:34px;height:20px;border-radius:999px;
  background:var(--nv-baan);border:1px solid var(--line);
  transition:background .2s,border-color .2s;
}
html[data-nv] .nv-thema-knop{
  position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--nv-knop);border:1px solid var(--nv-knop-rand);
  box-shadow:var(--nv-knop-schaduw);
  transition:transform .32s cubic-bezier(.32,.72,0,1),background .2s,border-color .2s;
}
/* aan = nacht: knopje naar rechts. */
html[data-nv] .nv-thema[aria-checked="true"] .nv-thema-knop{transform:translateX(14px)}
html[data-nv] .nv-thema[aria-checked="true"] .nv-thema-baan{
  background:color-mix(in srgb,var(--blue) 26%,transparent);border-color:rgba(0,82,255,.4);
}

/* Smal (admin-topbalk): alleen het pictogram en de baan. Het label blijft in
   de DOM voor schermlezers. */
html[data-nv] .nv-thema--compact{gap:8px;padding:5px 8px 5px 5px;
  background:var(--panel-2);border-color:var(--line)}
html[data-nv] .nv-thema--compact .nv-thema-ic{width:26px;height:26px;border-radius:8px}
html[data-nv] .nv-thema--compact .nv-thema-ic svg{width:14px;height:14px}
html[data-nv] .nv-thema--compact .nv-thema-lb{
  position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}
/* Breed: onderin een menubalk, tussen je account en Admin. */
html[data-nv] .nv-thema--rail{display:flex;width:100%;margin-bottom:3px;padding:7px 10px 7px 7px}
/* Ingeklapt blijft alleen de tegel over; de baan past niet in 76px. */
html[data-nv] .app.menu-in .nv-thema--rail{justify-content:center;gap:0;padding:6px 0}
html[data-nv] .app.menu-in .nv-thema--rail .nv-thema-lb,
html[data-nv] .app.menu-in .nv-thema--rail .nv-thema-baan{display:none}
@media(max-width:900px){
  /* Mobiel is de menubalk een lade: daar is hij nooit ingeklapt. */
  html[data-nv] .app.menu-in .nv-thema--rail{justify-content:flex-start;gap:10px;padding:9px 10px 9px 7px}
  html[data-nv] .app.menu-in .nv-thema--rail .nv-thema-lb{display:block}
  html[data-nv] .app.menu-in .nv-thema--rail .nv-thema-baan{display:block}
  html[data-nv] .nv-thema--rail{padding-top:9px;padding-bottom:9px}
}

/* Overdag draaien de treden om: grijze baan, wit knopje met een grijze rand. */
html[data-nv-dag][data-thema="dag"] .nv-thema{
  --nv-baan:var(--panel-2);
  --nv-knop:#FFFFFF;
  --nv-knop-rand:var(--line-2);
  --nv-knop-schaduw:0 1px 2px rgba(20,23,28,.16);
}
@media (prefers-color-scheme:light){
  html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .nv-thema{
    --nv-baan:var(--panel-2);
    --nv-knop:#FFFFFF;
    --nv-knop-rand:var(--line-2);
    --nv-knop-schaduw:0 1px 2px rgba(20,23,28,.16);
  }
}

/* ── Wat er op wit vuil wordt ──────────────────────────────────────
   De statkaarten op het dashboard dragen een .glow: een gekleurde cirkel
   van 90px, blur 24, opacity .5, rechtsboven in de kaart. Op zwart is dat
   strooilicht; op wit is het een blauwe of grijze veeg die uit de kaart
   loopt -- goed zichtbaar op een telefoon, waar de kaarten schermbreed
   zijn. Hij staat niet in de opruimregel hierboven omdat hij geen
   sfeerlaag is maar per kaart een eigen kleur meekrijgt.
   Niet weghalen maar dempen: de kleur draagt betekenis (blauw = op koers,
   grijs = neutraal), alleen niet als lichtbron. */
html[data-nv-dag][data-thema="dag"] .stat .glow{opacity:.13;filter:blur(30px)}
@media (prefers-color-scheme:light){
  html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .stat .glow{
    opacity:.13;filter:blur(30px)}
}

/* Het logo. De punt is het enige gekleurde teken in het merk, en droeg een
   vaste oranje gloed (admin) of een blauwe (dashboard). Op wit blijft die
   gloed als een halo om een letter hangen -- vooral de oranje, want de punt
   zelf wordt in de dagstand blauw. Punt houdt zijn kleur via de tokens,
   gloed gaat eruit: op papier gloeit niets. */
html[data-nv-dag][data-thema="dag"] .brand .dot,
html[data-nv-dag][data-thema="dag"] .logo .dot{color:var(--blue);text-shadow:none}
@media (prefers-color-scheme:light){
  html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .brand .dot,
  html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .logo .dot{
    color:var(--blue);text-shadow:none}
}

@media (prefers-reduced-motion:reduce){
  html[data-nv] .nv-thema,
  html[data-nv] .nv-thema-ic,
  html[data-nv] .nv-thema-knop,
  html[data-nv] .nv-thema-baan,
  html[data-nv] .nv-thema svg{transition:none}
  html[data-nv] .nv-thema:hover{transform:none}
}


/* ═══════════════════════════════════════════════════════════════════
   LAAG D — knopanatomie naar GoLive-model
   ───────────────────────────────────────────────────────────────────
   Overgenomen van de GoLive-template (gemeten 18-08-2026), maar in
   NOMAD-kleuren: de knopvorm (12px radius, 12/20 padding, 14px/500) en
   de gekleurde gloed onder de primaire knop.

   De typografie van GoLive is NIET overgenomen. Geist op 400 leest
   bleek op onze bijna-zwarte grond; Archivo, DM Sans en JetBrains Mono
   blijven de lettertypes, met de maten die er al stonden. Alleen de
   knop verandert.

   Drie dingen zijn bewust ANDERS dan het origineel:

   1. De gloed zit in een ::before, niet in een losse <div>. GoLive zet
      een leeg element naast de knop; dat zou hier in 41 bestanden
      moeten worden ingebouwd. Een pseudo-element geeft hetzelfde beeld
      zonder één regel HTML.

   2. De gloed staat ONDER de knop, niet er half achter. Half erachter
      vraagt z-index:-1, en dan verdwijnt hij achter de achtergrond van
      elk paneel waar de knop in staat. Het doorschijn-effect bij hover
      komt daarom uit een verloop op de knop zelf.

   3. De pijl schuift met transform, niet met gap. Bij GoLive groeit de
      knop 4px bij hover en springt de knop ernaast opzij; dat is daar
      een meetbare fout en die nemen we niet over.
   ─────────────────────────────────────────────────────────────────── */

html[data-nv]{
  /* Knoptokens — één plek voor de hele stack */
  --nv-knop-radius:12px;
  --nv-knop-padding:12px 20px;
  --nv-knop-tekst:14px;
  --nv-knop-gewicht:500;
  --nv-knop-gloed:linear-gradient(90deg,var(--blue) 0%,var(--blue-2) 55%,var(--cyan) 100%);
  --nv-knop-hover:linear-gradient(90deg,
    color-mix(in srgb,var(--blue) 0%,transparent) 0%,
    color-mix(in srgb,var(--blue-2) 40%,transparent) 55%,
    color-mix(in srgb,var(--cyan) 30%,transparent) 100%);
}

/* ── Knop: basis ──
   Alle knopklassen in de stack krijgen dezelfde anatomie. */
html[data-nv] .btn,
html[data-nv] .btn-primary,
html[data-nv] .btn-secondary,
html[data-nv] .btn-sec,
html[data-nv] .btn-ghost,
html[data-nv] .btnp,
html[data-nv] [data-nv-knop]{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  gap:4px;
  padding:var(--nv-knop-padding);
  border-radius:var(--nv-knop-radius);
  font-family:var(--body);
  font-size:var(--nv-knop-tekst);
  font-weight:var(--nv-knop-gewicht);
  line-height:1.5;
  letter-spacing:normal;
  text-decoration:none;
  cursor:pointer;
  /* `transform` stond hier niet in, en daardoor had geen enkele knop in de
     stack een indruk. Nu wel, en op de korte duur: de druk is systeem-
     bevestiging, geen animatie om naar te kijken. */
  transition:background-color var(--nv-menu),
             background-image var(--nv-menu),
             border-color var(--nv-menu),
             color var(--nv-menu),
             transform var(--nv-druk) var(--nv-uit);
}

/* ── Knop: de indruk ──
   Wat je indrukt, geeft mee. Dit is de meest gevoelde micro-interactie die
   er was: elke knop op elke pagina reageerde visueel pas NA de navigatie.
   Uitgezonderd: uitgeschakelde knoppen (die mogen juist niets doen). */
html[data-nv] .btn:not(:disabled):active,
html[data-nv] .btn-primary:not(:disabled):active,
html[data-nv] .btn-secondary:not(:disabled):active,
html[data-nv] .btn-sec:not(:disabled):active,
html[data-nv] .btn-ghost:not(:disabled):active,
html[data-nv] .btnp:not(:disabled):active,
html[data-nv] [data-nv-knop]:not(:disabled):not([aria-disabled="true"]):active{
  transform:scale(var(--nv-druk-schaal));
}

/* ── Knop: primair ──
   Eén verzadigd vlak op het scherm, met de gloed eronder. */
html[data-nv] .btn:not(.btn-ghost):not(.btn-secondary):not(.btn-sec):not(.btn-sub):not(.btn-mini),
html[data-nv] .btn-primary,
html[data-nv] .btnp,
html[data-nv] [data-nv-knop="primair"]{
  background:var(--blue);
  background-image:none;
  color:#fff;
  border:1px solid transparent;
  box-shadow:none;
}

/* De gloed. 80% breed en 22px hoog, net als het origineel, maar hij
   begint op de onderrand in plaats van 16px erboven. */
html[data-nv] .btn:not(.btn-ghost):not(.btn-secondary):not(.btn-sec):not(.btn-sub):not(.btn-mini)::before,
html[data-nv] .btn-primary::before,
html[data-nv] .btnp::before,
html[data-nv] [data-nv-knop="primair"]::before{
  content:"";
  position:absolute;left:10%;width:80%;height:22px;
  top:calc(100% - 6px);
  border-radius:139px;
  background:var(--nv-knop-gloed);
  filter:blur(10px);
  opacity:.45;
  pointer-events:none;
  transition:opacity .2s,filter .2s;
}

/* Bij hover haalt de knop zijn kleur uit de gloed: het verloop komt over
   het blauwe vlak heen, zodat de rechterkant naar cyaan trekt. Precies
   wat GoLive doet met dekking, alleen zonder de knop doorzichtig te
   maken — dat kan hier niet, want er staat een paneel achter. */
html[data-nv] .btn:not(.btn-ghost):not(.btn-secondary):not(.btn-sec):not(.btn-sub):not(.btn-mini):hover,
html[data-nv] .btn-primary:hover,
html[data-nv] .btnp:hover,
html[data-nv] [data-nv-knop="primair"]:hover{
  background-image:var(--nv-knop-hover);
}
html[data-nv] .btn:not(.btn-ghost):not(.btn-secondary):not(.btn-sec):not(.btn-sub):not(.btn-mini):hover::before,
html[data-nv] .btn-primary:hover::before,
html[data-nv] .btnp:hover::before,
html[data-nv] [data-nv-knop="primair"]:hover::before{opacity:.7;filter:blur(12px)}

/* ── Knop: secundair ──
   GoLive geeft de secundaire knop een rand van 1,17:1 — op wit vrijwel
   onzichtbaar. Op onze donkere grond gebruiken we --line-2, dat wél
   leest, en een oppervlak dat bij hover echt oplicht. */
html[data-nv] .btn-secondary,
html[data-nv] .btn-sec,
html[data-nv] [data-nv-knop="secundair"]{
  background:var(--panel-2);
  color:var(--white);
  border:1px solid var(--line-2);
}
html[data-nv] .btn-secondary:hover,
html[data-nv] .btn-sec:hover,
html[data-nv] [data-nv-knop="secundair"]:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16);
}

/* ── Knop: ghost ── */
html[data-nv] .btn-ghost,
html[data-nv] [data-nv-knop="ghost"]{
  background:transparent;color:var(--gray);border:1px solid transparent;
}
html[data-nv] .btn-ghost:hover,
html[data-nv] [data-nv-knop="ghost"]:hover{color:var(--white);background:rgba(255,255,255,.05)}

/* ── Maten ── */
html[data-nv] .btn-sm,
html[data-nv] .btn-mini,
html[data-nv] [data-nv-knop-maat="klein"]{padding:8px 14px;font-size:13px}
html[data-nv] [data-nv-knop-maat="groot"]{padding:14px 24px;font-size:15px}
/* Icoonknop: vierkant, zelfde radius. */
html[data-nv] [data-nv-knop-maat="icoon"]{width:46px;height:46px;padding:12px}

/* ── De pijl ──
   Schuift met transform zodat de knop niet groeit en de buurknop niet
   opzij springt. */
html[data-nv] .btn .arrow,
html[data-nv] .btn svg,
html[data-nv] [data-nv-knop] .arrow{transition:transform .2s}
@media (hover:hover) and (pointer:fine){
  html[data-nv] .btn:hover .arrow,
  html[data-nv] .btn:hover svg,
  html[data-nv] [data-nv-knop]:hover .arrow{transform:translateX(4px)}
}

/* ── Focus ──
   GoLive heeft geen ontworpen focusstaat. Wij wel; dit staat al in laag
   B en blijft hier expliciet staan zodat de knopregels hem niet wegdrukken. */
html[data-nv] .btn:focus-visible,
html[data-nv] .btn-primary:focus-visible,
html[data-nv] .btn-secondary:focus-visible,
html[data-nv] .btn-sec:focus-visible,
html[data-nv] .btn-ghost:focus-visible,
html[data-nv] [data-nv-knop]:focus-visible{
  outline:2px solid var(--blue-2);outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  html[data-nv] .btn,
  html[data-nv] .btn::before,
  html[data-nv] [data-nv-knop],
  html[data-nv] [data-nv-knop]::before,
  html[data-nv] .btn .arrow{transition:none}
  html[data-nv] .btn:hover .arrow{transform:none}
}


/* De knopgloed in de dagstand. Op wit werkt een verzadigde balk niet, en
   --cyan is daar bewust grijs — een grijze gloed onder een blauwe knop
   leest als vuil. Zelfde behandeling als .stat .glow: dempen, en het
   verloop terugbrengen tot alleen blauw. */
html[data-nv-dag][data-thema="dag"] .btn:not(.btn-ghost):not(.btn-secondary):not(.btn-sec):not(.btn-sub):not(.btn-mini)::before,
html[data-nv-dag][data-thema="dag"] .btn-primary::before,
html[data-nv-dag][data-thema="dag"] .btnp::before,
html[data-nv-dag][data-thema="dag"] [data-nv-knop="primair"]::before{
  background:linear-gradient(90deg,var(--blue) 0%,var(--blue-2) 100%);
  opacity:.22;filter:blur(14px);
}
@media (prefers-color-scheme:light){
  html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .btn:not(.btn-ghost):not(.btn-secondary):not(.btn-sec):not(.btn-sub):not(.btn-mini)::before,
  html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .btn-primary::before,
  html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) .btnp::before,
  html[data-nv-dag]:not([data-thema="nacht"]):not([data-thema="dag"]) [data-nv-knop="primair"]::before{
    background:linear-gradient(90deg,var(--blue) 0%,var(--blue-2) 100%);
    opacity:.22;filter:blur(14px);
  }
}


/* ── [hidden] wint van de knopvormen ──
   De knopregels hierboven zetten `display:inline-flex` op elke .btn-sec /
   .btn-secondary / [data-nv-knop]. Op een element dat de pagina met het
   `hidden`-attribuut verbergt, is dat een spookknop: de browser-standaard
   `[hidden]{display:none}` heeft specificiteit 0-1-0 en verliest van
   `html[data-nv] .btn-sec` (0-2-1). Gemeten op de journal: de journalkeuze
   staat op hidden zolang je één journal hebt, en stond er als een leeg
   vakje naast "Analyse".

   Één regel, helemaal onderaan, met dezelfde specificiteit als de knopregels
   — gelijke specificiteit, latere positie, dus deze wint. Geen !important
   nodig, en het geldt meteen voor elk toekomstig element dat een knopklasse
   draagt en met `hidden` wordt weggezet. */
html[data-nv] [hidden]{display:none}