/* ══ Puls-schil — het gedeelde tokenblad van route B ══════════════════════════════════════
   Eén bron voor de ontwerptaal van álle schilpagina's (login, zaken, beheer, portaal,
   koppelingen, aanmelden, wizard), overgenomen uit web/nu.html zodat de schil en het
   dashboard als één geheel voelen. De waarden zijn de waarden van nu.html — wie hier
   iets wil wijzigen, kijkt eerst daar. De ontwerpstandaard (docs/ontwerpstandaard.md)
   is bindend: tokens in plaats van losse waarden, kleur is betekenis, 44px-doelen,
   geen onbeargumenteerde beweging.

   Elke pagina houdt een klein eigen <style>-blok voor pagina-specifieke opmaak
   (roosters, logregels, pil-kleuren); alles wat twee pagina's delen, woont hier. */

:root {
  /* Beweging — namen en curves uit nu.html; nooit `ease*`. */
  --duur-snel: 0.12s; --duur-vlot: 0.22s; --duur-entree: 0.38s;
  --soepel: cubic-bezier(0.4, 0, 0.2, 1);
  --uitlopend: cubic-bezier(0.16, 1, 0.3, 1);

  /* Typografie — het systeem, niet een webfont: zelfde letter als het dashboard. */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --type-nano: 0.74rem;
  --spatie-kapitaal: 0.10em;
  --regel: 1.55;

  /* Vorm */
  --kaart-radius: 16px;
  --kaart-pad-y: 20px;
  --kaart-pad-x: 18px;
  --kaart-pad: var(--kaart-pad-y) var(--kaart-pad-x);
  --opening-schaduw: 0 6px 18px var(--schaduw-inkt), 0 1px 3px var(--schaduw-inkt-zacht);

  /* Licht — standaard. */
  color-scheme: light;
  --vlak: #F5F7F9; --kaart: #FFFFFF; --inkt: #0F1419; --subtiel: #55606B;
  --accent: #1B4FD8; --lijn: rgba(15, 20, 25, 0.12);
  --stil: #EBEFF3; --subtiel-op-stil: #4E5963; --op-accent: #FFFFFF;
  --goed: #17693C; --slecht: #B3261E;
  --oranje: #B25E00;
  --rand-bedienbaar: rgba(15, 20, 25, 0.48);
  --schaduw-inkt: rgba(0, 0, 0, .10);
  --schaduw-inkt-zacht: rgba(0, 0, 0, .08);
  --reeks-blauw: #1B4FD8; --reeks-groen: #0E7A46; --reeks-oranje: #B25E00;
  --reeks-rood: #B3261E; --reeks-paars: #6C3483;
  /* Oude naam die de schilpagina's al gebruiken; wijst naar hetzelfde oordeel. */
  --fout: var(--slecht);
}

/* Donker — via systeemvoorkeur, tenzij een pagina een stand afdwingt. */
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="licht"]) {
    color-scheme: dark;
    --vlak: #0E1114; --kaart: #171B1F; --inkt: #E9EDF1; --subtiel: #98A2AC;
    --accent: #8AB4FF; --lijn: rgba(233, 237, 241, 0.14);
    --stil: #20262C; --subtiel-op-stil: #9EA8B2; --op-accent: #0B1220;
    --goed: #7DD79E; --slecht: #FF9B8F;
    --oranje: #F0B37A;
    --rand-bedienbaar: rgba(233, 237, 241, 0.42);
    --schaduw-inkt: rgba(0, 0, 0, .55);
    --schaduw-inkt-zacht: rgba(0, 0, 0, .40);
    --reeks-blauw: #8AB4FF; --reeks-groen: #7BD8A6; --reeks-oranje: #F0B37A;
    --reeks-rood: #F2B8B5; --reeks-paars: #C39BD3;
  }
}

/* Afgedwongen donker — beheer.html is met opzet altijd donker (intern beheerscherm). */
:root[data-modus="donker"] {
  color-scheme: dark;
  --vlak: #0E1114; --kaart: #171B1F; --inkt: #E9EDF1; --subtiel: #98A2AC;
  --accent: #8AB4FF; --lijn: rgba(233, 237, 241, 0.14);
  --stil: #20262C; --subtiel-op-stil: #9EA8B2; --op-accent: #0B1220;
  --goed: #7DD79E; --slecht: #FF9B8F;
  --oranje: #F0B37A;
  --rand-bedienbaar: rgba(233, 237, 241, 0.42);
  --schaduw-inkt: rgba(0, 0, 0, .55);
  --schaduw-inkt-zacht: rgba(0, 0, 0, .40);
  --reeks-blauw: #8AB4FF; --reeks-groen: #7BD8A6; --reeks-oranje: #F0B37A;
  --reeks-rood: #F2B8B5; --reeks-paars: #C39BD3;
}

/* ── Basis ─────────────────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--sans); background: var(--vlak); color: var(--inkt);
  line-height: var(--regel); -webkit-font-smoothing: antialiased;
  transition: background var(--duur-vlot) var(--soepel), color var(--duur-vlot) var(--soepel);
}
a:focus-visible, button:focus-visible, summary:focus-visible,
[tabindex]:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.goed { color: var(--goed); }
.slecht { color: var(--slecht); }
[hidden] { display: none !important; }
code { font-family: var(--mono); font-size: 0.85em; }

/* ── Entree — zelfde beweging als het dashboard, en onder dezelfde rem. ────────────────── */
.anim { animation: op var(--duur-entree) var(--uitlopend) both; animation-delay: var(--anim-delay, 0s); }
@keyframes op { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .anim { animation: none; } }

/* ── Het merk — letterlijk hetzelfde component als in nu.html. ─────────────────────────── */
.merkblok { display: flex; align-items: center; gap: 3px; }
.merkhart { display: block; width: 18px; height: 14px; flex: none; color: var(--inkt); overflow: visible; }
.merkhart path {
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.woordmerk { font-weight: 650; font-size: 0.95rem; letter-spacing: -0.01em; }
.schil-kop { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.schil-kop .merkblok { gap: 4px; }
.schil-kop .merkhart { width: 22px; height: 16px; }
.schil-kop .woordmerk { font-size: 1.05rem; }
.schil-kop .kop-kader {
  font-family: var(--mono); font-size: var(--type-nano); text-transform: uppercase;
  letter-spacing: var(--spatie-kapitaal); color: var(--subtiel);
  margin-left: auto; text-align: right;
}

/* ── Nano-label — mono-kapitaal, het aanwijslabel van het dashboard. ───────────────────── */
.nano {
  font-family: var(--mono); font-size: var(--type-nano); text-transform: uppercase;
  letter-spacing: var(--spatie-kapitaal); color: var(--subtiel);
}

/* ── Kaart ─────────────────────────────────────────────────────────────────────────────── */
.kaart {
  background: var(--kaart); border: 1px solid var(--lijn);
  border-radius: var(--kaart-radius); padding: var(--kaart-pad);
}
.opening { box-shadow: var(--opening-schaduw); }
:root[data-modus="donker"] .opening { background: var(--stil); }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="licht"]) .opening { background: var(--stil); }
}

/* Paginakoppen */
h1 { font-size: 1.35rem; letter-spacing: -0.02em; margin: 0 0 4px; }
.intro { margin: 0 0 20px; color: var(--subtiel); max-width: 60ch; }

/* ── Formuliervelden — 44px-doelen, 12px-radius, zelfde rand als nu.html. ──────────────── */
.kaart label, .veld-label {
  display: block; font-family: var(--mono); font-size: var(--type-nano);
  text-transform: uppercase; letter-spacing: var(--spatie-kapitaal);
  color: var(--subtiel); margin: 16px 0 6px;
}
.kaart label:first-of-type { margin-top: 0; }
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], select, textarea {
  width: 100%; min-height: 44px; padding: 0 12px;
  border-radius: 12px; border: 1px solid var(--rand-bedienbaar); background: var(--kaart);
  color: var(--inkt); font: inherit; font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
textarea { padding: 10px 12px; min-height: 88px; resize: vertical; }
input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--slecht); border-color: var(--slecht); }

/* Aankruisregel ("Blijf ingelogd" en verwanten) — gewone zinsletter, geen kapitaal. */
label.onthoud, label.vink {
  font-family: var(--sans); font-size: 0.85rem; text-transform: none;
  letter-spacing: normal; color: var(--inkt);
  display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0;
}
label.onthoud input, label.vink input { width: auto; min-height: 0; margin-top: 3px; accent-color: var(--accent); }
label.onthoud .hint { display: block; color: var(--subtiel); font-size: 0.8rem; margin-top: 2px; }

/* ── Knoppen — pillen, zoals overal in het dashboard. ──────────────────────────────────── */
button.primair, a.primair, button.koppel, button.verstuur {
  display: block; width: 100%; min-height: 44px; padding: 10px 16px; margin-top: 18px;
  border: 0; border-radius: 999px; background: var(--inkt); color: var(--kaart);
  font: inherit; font-size: 0.92rem; font-weight: 600; text-align: center;
  text-decoration: none; cursor: pointer;
  transition: opacity var(--duur-snel) var(--soepel), transform var(--duur-snel) var(--soepel);
}
button.primair:active, a.primair:active, button.koppel:active, button.verstuur:active {
  transform: scale(0.985);
}
@media (prefers-reduced-motion: reduce) {
  button.primair, a.primair, button.koppel, button.verstuur { transition: none; }
  button.primair:active, a.primair:active, button.koppel:active, button.verstuur:active { transform: none; }
}
button[disabled] { opacity: 0.55; cursor: default; }

/* Randpil — de nevenkeuze: rand in plaats van vulling. */
a.open-knop, button.rand, a.rand {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--rand-bedienbaar); background: transparent; color: var(--inkt);
  font: inherit; font-size: 0.88rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: border-color var(--duur-snel) var(--soepel);
}
@media (hover: hover) {
  a.open-knop:hover, button.rand:hover, a.rand:hover { border-color: var(--accent); color: var(--accent); }
}

/* Stille knop — een tekstuele nevenweg (terug, uitloggen). */
button.stil {
  display: block; width: 100%; min-height: 44px; margin-top: 8px; padding: 0;
  background: none; border: 0; color: var(--subtiel); text-decoration: underline;
  text-underline-offset: 3px; font: inherit; font-size: 0.85rem; cursor: pointer;
}
@media (hover: hover) { button.stil:hover { color: var(--inkt); } }

/* ── Meldingen ─────────────────────────────────────────────────────────────────────────── */
.melding { font-size: 0.85rem; color: var(--slecht); margin: 12px 0 0; }
.melding:empty { display: none; }
.toelichting { font-size: 0.9rem; color: var(--subtiel); margin: 0 0 14px; }
.storing {
  margin: 20px 0 0; padding: 12px 16px; border: 1px solid var(--slecht);
  border-radius: 12px; color: var(--slecht); font-size: 0.9rem; display: none;
}
.hulp { font-size: 0.78rem; color: var(--subtiel); margin: 6px 0 0; }

/* ── Voetregel ─────────────────────────────────────────────────────────────────────────── */
.voet {
  margin-top: 32px; border-top: 1px solid var(--lijn); padding-top: 14px;
  font-size: 0.85rem; color: var(--subtiel);
}