/* ══════════════════════════════════════════════════════════════════════
   INLOGSCHERM — dezelfde taal als de rest van het platform.

   Waarom hier een eigen tokenblok staat en niet alleen thema.css: thema.css
   draagt de twee PALETTEN (donker en licht) en verder niets. De maten, de
   rasterstappen, de rondingen en de lettertrappen staan in elk scherm in zijn
   eigen <style>, want elk scherm is een bestand dat je los kunt openen. Dit
   scherm doet precies hetzelfde, met dezelfde waarden. thema.css wordt hierna
   geladen en overschrijft de kleuren; de volgorde is het enige wat het werk
   doet, er staat nergens !important.

   Er is geen tweede knopvorm bijgekomen: .knop met --kv/--ki/--kr,
   .knop--primair, .knop--stil, .knop--klein, .veld, .hint en .let-blok komen
   letterlijk uit vinden-lijsten.html.

   Rand óf schaduw, nooit beide: de kaart heeft een rand en de zweefschaduw
   staat er nadrukkelijk niet onder. 11px (--t-2xs) is de ondergrens voor élke
   functionele tekst, ook voor de hint onder een veld.
   ══════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: dark;

  --vlak-diep:#131110; --vlak:#1B1815; --vlak-op:#232019;
  --vlak-hoog:#2C281F; --vlak-put:#100E0D;

  --inkt:#F2EFE8; --inkt-zacht:#ADA79C; --inkt-vaag:#8C867B; --inkt-om:#16120B;
  --rand-zacht:#2A251F; --rand:#362F27; --rand-sterk:#4A4137;

  --accent:#F0A93B; --accent-hoog:#FFC469; --accent-diep:#B87A1C;
  --accent-zacht:#F0A93B26; --accent-inkt:#1A1206;

  --goed:#86BE84; --goed-zacht:#86BE8422;
  --fout:#E2735F; --fout-zacht:#E2735F22;
  --let:#E5B94E;  --let-zacht:#E5B94E1F;
  --koel:#93B8CE; --koel-zacht:#93B8CE22;

  --font-ui:"Segoe UI Variable Text",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-kop:"Segoe UI Variable Display",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",monospace;

  --t-2xs:0.6875rem; --t-xs:0.75rem;  --t-s:0.8125rem; --t-m:0.9375rem;
  --t-l:1.0625rem;   --t-xl:1.375rem; --t-2xl:1.875rem; --t-3xl:2.625rem;
  --spoor-wijd:0.14em; --spoor-kop:-0.015em;

  --r1:.25rem; --r2:.5rem; --r3:.75rem; --r4:1rem; --r5:1.25rem;
  --r6:1.5rem; --r8:2rem; --r10:2.5rem; --r12:3rem; --r16:4rem;

  --rond-xs:3px; --rond-s:5px; --rond-m:8px; --rond-l:12px; --rond-vol:999px;
  --schaduw-op:inset 0 1px 0 rgb(255 255 255 / .05);
  --schaduw-zweef:0 10px 30px -8px rgb(0 0 0 / .6);
  --ring:0 0 0 3px var(--accent-zacht);

  --duur-1:120ms; --duur-2:180ms; --duur-3:260ms;
  --soepel:cubic-bezier(.16,1,.3,1);
  --balk:3.25rem;
}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){ color-scheme: light;
    --vlak-diep:#E4E2DC; --vlak:#EFEDE8; --vlak-op:#F7F5F1;
    --vlak-hoog:#FFFEFB; --vlak-put:#E8E5DE;
    --inkt:#1E1B16; --inkt-zacht:#5A544A; --inkt-vaag:#6B6559; --inkt-om:#FFFDF7;
    --rand-zacht:#DBD7CE; --rand:#CCC7BB; --rand-sterk:#B2AB9C;
    --accent:#875609; --accent-hoog:#74490A; --accent-diep:#C9913A;
    --accent-zacht:#8756091F; --accent-inkt:#FFFCF4;
    --goed:#3E7A41; --fout:#A63B29; --let:#8A6410; --koel:#3D6B87;
    --goed-zacht:#3E7A4118; --fout-zacht:#A63B2918; --let-zacht:#8A641018;
    --koel-zacht:#3D6B8718;
    --schaduw-op:inset 0 1px 0 rgb(255 255 255 / .7);
    --schaduw-zweef:0 10px 30px -8px rgb(52 44 32 / .22);
  }
}
:root[data-theme="light"]{ color-scheme: light;
  --vlak-diep:#E4E2DC; --vlak:#EFEDE8; --vlak-op:#F7F5F1;
  --vlak-hoog:#FFFEFB; --vlak-put:#E8E5DE;
  --inkt:#1E1B16; --inkt-zacht:#5A544A; --inkt-vaag:#6B6559; --inkt-om:#FFFDF7;
  --rand-zacht:#DBD7CE; --rand:#CCC7BB; --rand-sterk:#B2AB9C;
  --accent:#875609; --accent-hoog:#74490A; --accent-diep:#C9913A;
  --accent-zacht:#8756091F; --accent-inkt:#FFFCF4;
  --goed:#3E7A41; --fout:#A63B29; --let:#8A6410; --koel:#3D6B87;
  --goed-zacht:#3E7A4118; --fout-zacht:#A63B2918; --let-zacht:#8A641018;
  --koel-zacht:#3D6B8718;
  --schaduw-op:inset 0 1px 0 rgb(255 255 255 / .7);
  --schaduw-zweef:0 10px 30px -8px rgb(52 44 32 / .22);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--vlak-diep);color:var(--inkt);
  font:var(--t-s)/1.55 var(--font-ui);font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased}
h1,h2{font-family:var(--font-kop);line-height:1.25;
  letter-spacing:var(--spoor-kop);font-weight:600;margin:0}
::selection{background:var(--accent-zacht);color:var(--inkt)}
:root{caret-color:var(--accent);accent-color:var(--accent)}
:where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

/* ── de bovenbalk ───────────────────────────────────────────────────
   Alleen het merk en de themawissel. thema.js zoekt #themaknop en zet
   er zijn eigen opschrift in; staat de knop er niet, dan hangt hij er
   zelf een aan .balk. Hij staat er, zodat hij op zijn plek staat. */
.balk{position:sticky;top:0;z-index:30;height:var(--balk);display:flex;
  align-items:center;gap:var(--r4);padding:0 var(--r5);
  background:color-mix(in srgb,var(--vlak) 90%,transparent);
  backdrop-filter:blur(14px) saturate(1.15);border-bottom:1px solid var(--rand)}
.rek{flex:1}
.merk{display:flex;align-items:center;gap:var(--r2)}
.merk__mal{width:1.4rem;height:1.4rem;flex:none}
.merk__naam{font:650 var(--t-m)/1 var(--font-kop);letter-spacing:.02em}

/* ── het midden ─────────────────────────────────────────────────────
   Eén kaart, gecentreerd, met ruimte eromheen die niet meeschuift. Op
   een telefoon zakt hij naar boven in plaats van te blijven zweven. */
.midden{min-height:calc(100dvh - var(--balk));display:flex;
  align-items:center;justify-content:center;padding:var(--r8) var(--r4) var(--r12)}
@media(max-width:640px){.midden{align-items:flex-start;padding-top:var(--r6)}}

.kaart{width:100%;max-width:24rem;background:var(--vlak-op);
  border:1px solid var(--rand);border-radius:var(--rond-m);
  padding:var(--r6) var(--r6) var(--r5)}

.kop__zone{font:600 var(--t-2xs)/1.2 var(--font-ui);letter-spacing:var(--spoor-wijd);
  text-transform:uppercase;color:var(--accent);margin-bottom:var(--r2)}
.kaart h1{font-size:var(--t-xl)}
.kop__sub{color:var(--inkt-zacht);margin:var(--r1) 0 var(--r6);font-size:var(--t-xs)}

/* ── velden ─────────────────────────────────────────────────────────
   Dezelfde vorm als .veld op de tabelschermen: opschrift in kapitalen
   erboven, hint eronder. */
.veld{display:flex;flex-direction:column;gap:var(--r1);margin-bottom:var(--r4)}
.veld__lab{font:600 var(--t-2xs)/1.2 var(--font-ui);letter-spacing:var(--spoor-wijd);
  text-transform:uppercase;color:var(--inkt-vaag)}
.veld input{width:100%;min-height:2.25rem;padding:var(--r2) var(--r3);
  background:var(--vlak-put);border:1px solid var(--rand);
  border-radius:var(--rond-s);color:var(--inkt);font:var(--t-s)/1.4 var(--font-ui)}
.veld input:hover{border-color:var(--rand-sterk)}
.veld input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.veld input::placeholder{color:var(--inkt-vaag)}
.veld input:disabled{opacity:.5;cursor:not-allowed}
.hint{font:var(--t-2xs)/1.45 var(--font-ui);color:var(--inkt-vaag)}

/* ── knoppen — één vorm, dezelfde als overal ────────────────────────
   --kv is het vlak, --ki de inkt, --kr de rand. Een variant zet die
   drie om en verder niets. */
.knop{--kv:var(--vlak-hoog);--ki:var(--inkt);--kr:var(--rand-sterk);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--r2);
  min-height:2rem;padding:0 var(--r3);background:var(--kv);color:var(--ki);
  border:1px solid var(--kr);border-radius:var(--rond-s);
  font:600 var(--t-s)/1 var(--font-ui);cursor:pointer;position:relative;
  box-shadow:var(--schaduw-op);
  transition:background var(--duur-1) var(--soepel),
             border-color var(--duur-1) var(--soepel),
             transform var(--duur-1) var(--soepel)}
.knop:hover{background:color-mix(in srgb,var(--kv) 82%,var(--inkt))}
.knop:active{transform:translateY(1px)}
.knop:disabled{opacity:.42;filter:saturate(.5);box-shadow:none;cursor:not-allowed}
.knop--primair{--kv:var(--accent);--ki:var(--accent-inkt);--kr:transparent;font-weight:650}
.knop--primair:hover{background:var(--accent-hoog)}
.knop--stil{--kv:transparent;--ki:var(--inkt-zacht);--kr:var(--rand);box-shadow:none}
.knop--stil:hover{background:var(--vlak-op);color:var(--inkt)}
.knop--klein{min-height:1.65rem;padding:0 var(--r2);font-size:var(--t-2xs)}
.knop--breed{width:100%;min-height:2.25rem}
/* Een knop die een link is blijft een knop. De onderstreping van een <a>
   hoort er niet bij; de vorm zegt al genoeg. */
a.knop{text-decoration:none}

/* ── de melding ─────────────────────────────────────────────────────
   Kleur is nooit de enige code: er staat een woord vóór de melding
   ("Mislukt", "Gelukt") en een teken ernaast, dus ook zonder kleur is
   te zien wat er gebeurde. */
.melding{display:none;gap:var(--r2);align-items:flex-start;
  margin:0 0 var(--r4);padding:var(--r2) var(--r3);
  border:1px solid var(--rand);border-radius:var(--rond-s);
  font-size:var(--t-xs);line-height:1.5;color:var(--inkt-zacht)}
.melding[data-soort]{display:flex}
.melding b{color:var(--inkt);font-weight:600;white-space:nowrap}
.melding[data-soort="fout"]{border-color:color-mix(in srgb,var(--fout) 42%,transparent);
  background:var(--fout-zacht)}
.melding[data-soort="fout"] b{color:var(--fout)}
.melding[data-soort="goed"]{border-color:color-mix(in srgb,var(--goed) 42%,transparent);
  background:var(--goed-zacht)}
.melding[data-soort="goed"] b{color:var(--goed)}
.melding[data-soort="let"]{border-color:color-mix(in srgb,var(--let) 42%,transparent);
  background:var(--let-zacht)}
.melding[data-soort="let"] b{color:var(--let)}

.let-blok{margin-top:var(--r5);padding:var(--r3) var(--r4);
  background:var(--vlak);border:1px solid var(--rand);
  border-radius:var(--rond-m);font-size:var(--t-2xs);line-height:1.5;
  color:var(--inkt-zacht)}
.let-blok b{color:var(--inkt);font-weight:600}
.let-blok p{margin:0}
.let-blok p + p{margin-top:var(--r2)}

.voet{max-width:24rem;margin:var(--r4) auto 0;text-align:center;
  font:var(--t-2xs)/1.5 var(--font-ui);color:var(--inkt-vaag)}

[hidden]{display:none !important}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms !important;
    animation-iteration-count:1 !important;transition-duration:1ms !important}
}

/* ── stand Toekomst ───────────────────────────────────────────────────
   thema.js hangt toekomst.css ook hier in (het staat in de <head>, en
   /toekomst.css en de letters staan in de lijst die zonder sessie
   bereikbaar is). De balk, de knoppen als pil en de groene primaire knop
   komen daar al vandaan; dit is wat het inlogscherm zelf anders tekent.
   Alles onder :root[data-stand="toekomst"], de andere standen zien niets. */
:root[data-stand="toekomst"] .kaart{background:var(--glas);border-color:var(--rand);
  border-radius:var(--rond-xl);box-shadow:inset 0 1px 0 var(--vk-lichtlijn),var(--hoog-3)}
:root[data-stand="toekomst"] .let-blok{background:rgb(4 5 17 / .35);border-color:var(--rand-zacht);border-radius:var(--rond-l)}
:root[data-stand="toekomst"] .veld input{background:rgb(4 5 17 / .45);border-radius:var(--rond-m)}
:root[data-stand="toekomst"] .kaart h1{font-weight:600;letter-spacing:-.02em}