/* Stijl C · Document en interface — gedeeld door Regels op maat en (straks)
   omgevingsdocumentenregister.nl.

   Eén gedachte draagt de hele stijl: de BEDIENING is sans-serif, compact en
   ligt op een koelgrijze grond; wat BRONTEKST is (documenttitels, artikelen,
   leden) staat op een wit blad in een serif. Wie de pagina ziet, weet zonder
   te lezen wat regel is en wat knop. Serif dus alleen voor brontekst — anders
   valt het onderscheid weg.

   Ontwerp en afwegingen: docs/ontwerp/ (canvas + build.mjs), gekozen 2026-09-16.
   Palet in oklch op hue 262, gedeeld met het register en de OCD-viewer.
   Bewust niet de rijkshuisstijl en niet het DSO-groen. */

:root {
  --grond:   oklch(95.2% 0.010 262);
  --grond-2: oklch(92.5% 0.013 262);
  --blad:    oklch(100% 0.002 90);
  --lijn:    oklch(87.5% 0.014 262);
  --lijn-2:  oklch(93% 0.008 262);
  --inkt:    oklch(21% 0.012 262);
  --inkt-2:  oklch(39% 0.014 262);
  --inkt-3:  oklch(53% 0.020 262);
  --acc:       oklch(50% 0.16 262);
  --acc-hover: oklch(34% 0.12 262);
  --acc-zacht: oklch(92.5% 0.035 262);
  --focus:     oklch(50% 0.16 262);

  /* Status: goed / matig / zwak / niet vastgesteld. Staan los van de
     themakleuren hieronder, zodat een groene chip niet als "goed" leest. */
  --ok-bg: oklch(94% 0.045 150); --ok: oklch(38% 0.11 150);
  --at-bg: oklch(95% 0.050 80);  --at: oklch(42% 0.11 80);
  --no-bg: oklch(94% 0.045 28);  --no: oklch(44% 0.14 28);
  --nv-bg: oklch(91% 0.012 262); --nv: oklch(46% 0.018 262);

  --blad-schaduw: 0 0 0 1px oklch(85% 0.014 262), 0 1px 3px oklch(20% 0.02 262 / .08);
  --paneel-schaduw: 0 0 0 1px oklch(85% 0.014 262), 0 6px 20px oklch(20% 0.02 262 / .10);

  --sans:  "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* De regeltekst-component leest deze door zijn shadow DOM heen. */
  --ocd-link: var(--acc);
  --ocd-term: var(--acc);
  --ocd-border: var(--lijn);
  --ocd-th-bg: var(--grond);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grond: oklch(17% 0.012 262); --grond-2: oklch(21% 0.015 262); --blad: oklch(23% 0.012 262);
    --lijn: oklch(34% 0.016 262); --lijn-2: oklch(28% 0.014 262);
    --inkt: oklch(94% 0.008 262); --inkt-2: oklch(80% 0.012 262); --inkt-3: oklch(64% 0.018 262);
    --acc: oklch(74% 0.12 262); --acc-hover: oklch(86% 0.08 262); --acc-zacht: oklch(30% 0.05 262); --focus: oklch(74% 0.12 262);
    --ok-bg: oklch(27% 0.05 150); --ok: oklch(82% 0.11 150);
    --at-bg: oklch(28% 0.05 80);  --at: oklch(84% 0.10 80);
    --no-bg: oklch(27% 0.06 28);  --no: oklch(82% 0.11 28);
    --nv-bg: oklch(27% 0.012 262); --nv: oklch(70% 0.018 262);
    --blad-schaduw: 0 0 0 1px oklch(34% 0.016 262), 0 1px 3px oklch(0% 0 0 / .3);
    --paneel-schaduw: 0 0 0 1px oklch(34% 0.016 262), 0 6px 20px oklch(0% 0 0 / .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --grond: oklch(17% 0.012 262); --grond-2: oklch(21% 0.015 262); --blad: oklch(23% 0.012 262);
  --lijn: oklch(34% 0.016 262); --lijn-2: oklch(28% 0.014 262);
  --inkt: oklch(94% 0.008 262); --inkt-2: oklch(80% 0.012 262); --inkt-3: oklch(64% 0.018 262);
  --acc: oklch(74% 0.12 262); --acc-hover: oklch(86% 0.08 262); --acc-zacht: oklch(30% 0.05 262); --focus: oklch(74% 0.12 262);
  --ok-bg: oklch(27% 0.05 150); --ok: oklch(82% 0.11 150);
  --at-bg: oklch(28% 0.05 80);  --at: oklch(84% 0.10 80);
  --no-bg: oklch(27% 0.06 28);  --no: oklch(82% 0.11 28);
  --nv-bg: oklch(27% 0.012 262); --nv: oklch(70% 0.018 262);
  --blad-schaduw: 0 0 0 1px oklch(34% 0.016 262), 0 1px 3px oklch(0% 0 0 / .3);
  --paneel-schaduw: 0 0 0 1px oklch(34% 0.016 262), 0 6px 20px oklch(0% 0 0 / .35);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font: 400 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acc); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--acc-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button, input { font: inherit; color: inherit; }

.serif { font-family: var(--serif); }
.mono  { font-family: var(--mono); }

.skiplink { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--inkt); color: var(--blad); padding: 10px 16px; }
.skiplink:focus { left: 0; }

/* ── Merk ─────────────────────────────────────────────── */
.merk { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--inkt); min-width: 0; }
.merk-teken {
  display: grid; gap: 3px; width: 22px; padding: 5px 4px; box-sizing: content-box; flex: none;
  background: var(--blad); box-shadow: var(--blad-schaduw); border-radius: 2px;
}
.merk-teken i { display: block; height: 2.5px; background: var(--inkt); }
.merk-teken i:nth-child(2) { width: 80%; }
.merk-teken i:nth-child(3) { width: 55%; background: var(--acc); }
.merk-tekst { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.merk-tekst strong { font-size: 15.5px; }
.merk-sub { font-size: 12px; color: var(--inkt-3); }

/* ── Kleine bouwstenen ────────────────────────────────── */
.label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--inkt-3); }

.tag {
  display: inline-block; font: 500 10.5px/1 var(--mono); letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 5px; border-radius: 3px; border: 1px solid var(--lijn); color: var(--inkt-3); white-space: nowrap;
}
.tag-ow { color: var(--acc); border-color: color-mix(in oklch, var(--acc) 45%, var(--lijn)); }

.badge { display: inline-flex; gap: 6px; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 3px; }
.badge-goed  { background: var(--ok-bg); color: var(--ok); }
.badge-matig { background: var(--at-bg); color: var(--at); }
.badge-zwak  { background: var(--no-bg); color: var(--no); }
.badge-nvt   { background: var(--nv-bg); color: var(--nv); }

.chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.4;
  padding: 2px 8px 2px 6px; border-radius: 3px; background: var(--grond); color: var(--inkt-2);
  border: 1px solid transparent; white-space: nowrap;
}
.chip i { width: 8px; height: 8px; border-radius: 2px; display: block; flex: none; background: var(--inkt-3); }
.chip b { color: var(--inkt); font-weight: 700; }
button.chip { cursor: pointer; }
button.chip:hover { border-color: var(--lijn); }
button.chip[aria-pressed="true"] { background: var(--inkt); color: var(--blad); }
button.chip[aria-pressed="true"] b { color: var(--blad); }
.chip-leeg { background: none; border: 1px dashed var(--lijn); }

.blad { background: var(--blad); box-shadow: var(--blad-schaduw); border-radius: 2px; }

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px; min-height: 40px; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--inkt); color: var(--blad); font-weight: 700;
}
.knop:hover { background: var(--acc); color: var(--blad); }
.knop-stil { background: var(--blad); color: var(--inkt-2); box-shadow: var(--blad-schaduw); font-weight: 400; }
.knop-stil:hover { background: var(--blad); color: var(--inkt); }

.icoon { width: 1em; height: 1em; flex: none; }

.muted { color: var(--inkt-3); }
.leeg-melding { color: var(--inkt-3); font-style: italic; }