/* tokens.css — de fundering van het product.
   Volgens docs/ui-standaard.md §3 is dit de ENIGE plek waar een kleur, een
   afstand, een lettergrootte of een beweging een naam heeft. `site.css` en
   `paneel.css` lezen hem en bevatten niets anders.

   WAAROM DEZE REGEL BESTAAT (docs/ui-standaard.md §1 en §3)
   Tot 28-09 stond alles in één stylesheet van 344 regels: 18 schrijfwijzen voor
   15 maten, 39 verschillende rem-waarden voor ruimte, en 12 hardgekleurde
   hexwaarden buiten elke token. Een waarde die geen naam heeft, is een
   ontwerpbeslissing die iemand per ongeluk maakt. Hier heeft elke waarde een
   naam, en de poort (scripts/css-lagen-toets.mjs, regels U3 en U4) meet of er
   nog een tweede taal bij is gekomen.

   WAT ER IN DIT BESTAND THUISHOORT
   1. De schaal: kleur, tekst, merk, betekenis, lijn, diepte, hoek, ruimte,
      typografie, beweging, stapeling. Allemaal :root.
   2. De donkere modus, als een tweede ontwerp en niet als een omkering: de
      oppervlakken verschuiven naar blauw-grijs en het accent wordt lichter,
      want hetzelfde groen faalt op een donkere achtergrond.
   3. De gedeelde bouwstenen: het documentframe en de primitieven die de site én
      het paneel allebei gebruiken (knop, kaart, tabel, badge, formulierveld).
      Dat is de uitzondering die regel U1 toestaat.

   WAT ER NIET IN THUISHOORT
   Geen enkele klasse die bij één product hoort. `.hero` en `.raster` zijn van de
   site, `.paneel-kolom` en `.cms-*` zijn van het paneel, en als zo'n naam hier
   terechtkomt is de scheiding niet meer echt. De poort meet dat.

   Volgorde van het laden (in apps/mvp/server.mjs, regel 1289):
   tokens.css, dan site.css, dan paneel.css. Alle drie op elke pagina, want het
   document is één document; de scheiding zit in de bestanden, niet in de URL.
*/

:root {
  color-scheme: light;
  /* ── Kleur: oppervlakken van achtergrond naar voorgrond ─────────────────
     Het voorvoegsel is --opp-, niet --s-: --s- is de ruimte (onderaan).
     Twee naamruimtes, geen dubbele naam — docs/ui-standaard.md §3.1. */
  --opp-0: #f6f7fb;   /* de pagina */
  --opp-1: #ffffff;   /* een kaart, een veld */
  --opp-2: #eef1f7;   /* een inset, een hover */
  --opp-3: #dfe3ec;   /* de sterkste lijn */
  /* Het scanvlak van een QR-code. Bewust geen --opp-1: die volgt het thema en
     een scanner leest donkere modules op een licht vlak. Dit blijft daarom
     licht, ook in donkere modus. */
  --qr-vlak: #ffffff;

  /* Tekst. Drie stappen, en --t-3 is de laagste: die leest nog, maar hij
     hoort op een bijschrift en niet op een alinea. */
  --t-1: #16181d;
  --t-2: #5b6270;
  --t-3: #6b7484;
  --t-inverse: #ffffff;

  /* Merk: één accent, drie trappen. Niet vier. */
  --b-1: #0a6b5b;
  --b-2: #0d8571;
  --b-3: #2fbfa4;
  --b-subtiel: #e6f4f1;

  /* Betekenis: elk paar heeft een tekstkleur en een achtergrondkleur, want
     kleur alleen is nooit genoeg (docs/ui-standaard.md §8). */
  --ok: #166534;      --ok-bg: #dcfce7;   --ok-lijn: #b6e6c6;
  --let: #92610a;     --let-bg: #fef3c7;
  --info: #1d4ed8;    --info-bg: #dbeafe;
  --fout: #a32020;    --fout-bg: #fde8e8;  --fout-lijn: #f3c2c2;
  --neutraal: #5b6270; --neutraal-bg: #eef1f7;

  /* Het lab-banner: geen betekenis, maar wel een eigen paar, want anders
     moest de donkere modus er een eigen regel voor krijgen. */
  --lab-t: #6b4e00;   --lab-bg: #fff4d6;   --lab-lijn: #f0dca6;

  /* Lijnen: twee stappen. */
  --lijn: #dfe3ec;
  --lijn-sterk: #c3cad6;

  /* Diepte: vijf trappen. De site gebruikt er twee, het paneel drie; de
     schaduw is geen versiering maar een aanwijzing voor wat boven wat ligt. */
  --e0: none;
  --e1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --e2: 0 1px 3px rgba(16, 24, 40, 0.07), 0 6px 16px rgba(16, 24, 40, 0.06);
  --e3: 0 2px 6px rgba(16, 24, 40, 0.08), 0 16px 32px rgba(16, 24, 40, 0.07);
  --e4: 0 4px 12px rgba(16, 24, 40, 0.1), 0 32px 64px rgba(16, 24, 40, 0.1);

  /* Hoeken: drie, plus de pill. Meer dan dat is een bubbel. */
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;
  --r-v: 999px;

  /* Ruimte: het raster van 8. Twee verwante dingen --s-2, binnen een blok
     --s-4, tussen twee blokken --s-6, tussen twee schermsecties --s-8. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* De dunne maat: 2px. Voor de twee pixels die een taalkiezer of een badge
     nodig hebben om niet te plakken. Eén naam, want 2px is een getal dat
     zonder naam zeven keer per bestand opduikt. */
  --dun: 2px;

  /* Maten die geen ruimte zijn maar een vorm: de smalste kolom van het raster,
     de breedte van het inlogscherm, de kolom van een code. Ook namen, want een
     raster dat 240px in site.css en 250px in paneel.css heeft, is twee
     rasters. */
  --kolom-min: 240px;
  --kolom-min-stat: 150px;
  --max-inlog: 26rem;
  --code-kolom: 9rem;
  --media-mini: 160px;

  /* Typografie: elf stappen. Een scherm gebruikt er maximaal vier
     (docs/ui-standaard.md §4); dat maximum is de regel die ritme maakt. */
  --f-1: 12px;   /* label, kolomkop, badge */
  --f-2: 13px;   /* bijschrift */
  --f-3: 14px;   /* dicht paneelwerk */
  --f-4: 16px;   /* de standaard, ongewijzigd */
  --f-5: 18px;   /* lead, kaarttitel */
  --f-6: 20px;   /* kop 3 */
  --f-7: 24px;   /* kop 2, sectietitel */
  --f-8: 30px;   /* kop 1, schermtitel */
  --f-9: 38px;   /* het grote cijfer op de site */
  --f-10: 48px;  /* het cijfer dat het product vertelt */
  --f-display: clamp(2.75rem, 6vw, 5.5rem);   /* een keer per pagina: de hero */

  /* Regelafstand per rol. Eén regelafstand voor alles is de reden dat grote
     tekst er slap uitziet. */
  --lh-display: 1.02;
  --lh-kop: 1.15;
  --lh-tekst: 1.6;
  --lh-bijschrift: 1.45;

  /* Letterafstand schaalt mee met de grootte: bij 48px is de standaardtracking
     te los, bij 12px te strak. */
  --letter: -0.011em;
  --letter-dicht: -0.022em;
  --letter-verf: -0.033em;

  /* Beweging: drie snelheden, één easen. Geen enkele component kiest zelf een
     getal (docs/ui-standaard.md §9). */
  --d-1: 120ms;
  --d-2: 180ms;
  --d-3: 240ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Stapeling: zes, en niemand verzint er meer bij. */
  /* Breedtes. De site mag breed zijn want hij moet overtuigen; het paneel is
     een werkplek waar een tabel volle breedte hoort. Beide staan hier, want een
     maat hoort bij de schaal en niet bij de laag die hem toevallig gebruikt. */
  --max-site: 1280px;
  --max-paneel: 1440px;
  --max-lees: 65ch;   /* 65 tekens per regel, op de container niet op de alinea */

  --z-basis: 0;
  --z-boven: 10;
  --z-menu: 100;
  --z-zijbalk: 200;
  --z-opdialoog: 300;
  --z-melding: 400;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* De keuze op de HTML-wortel komt vroeg uit theme.js. Zonder JavaScript blijft
   het lichte palet hierboven volledig bruikbaar. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --opp-0: #0f1216;
    --opp-1: #171b21;
    --opp-2: #1f242c;
    --opp-3: #2b323c;

    --t-1: #eef1f5;
    --t-2: #a7b0bd;
    --t-3: #8a94a3;
    --t-inverse: #06231d;

    --b-1: #2fbfa4;
    --b-2: #4ad3b8;
    --b-3: #7fe3ce;
    --b-subtiel: #10231f;

    --ok: #6ee7a8;   --ok-bg: #0f3320;   --ok-lijn: #1d5133;
    --let: #ffe9a8;  --let-bg: #3a2f0a;
    --info: #a8c8ff; --info-bg: #10233f;
    --fout: #f07171;  --fout-bg: #3a1414;  --fout-lijn: #612020;
    --neutraal: #a7b0bd; --neutraal-bg: #1f242c;

    --lab-t: #ffe9a8; --lab-bg: #3a2f0a;  --lab-lijn: #5a4a12;

    --lijn: #2b323c;
    --lijn-sterk: #3a4351;

    --e1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --e2: 0 1px 3px rgba(0, 0, 0, 0.45), 0 6px 16px rgba(0, 0, 0, 0.35);
    --e3: 0 2px 6px rgba(0, 0, 0, 0.5), 0 16px 32px rgba(0, 0, 0, 0.4);
    --e4: 0 4px 12px rgba(0, 0, 0, 0.55), 0 32px 64px rgba(0, 0, 0, 0.45);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DE GEDEELDE BOUWSTENEN
   Hieronder staat alles wat de site en het paneel allebei gebruiken. Dat is
   geen compromis maar de reden dat de twee lagen bestaan: het document is één
   document met één frame, en alleen de inhoud verschilt.
   ═══════════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--f-4);
  line-height: var(--lh-tekst);
  background: var(--opp-0);
  color: var(--t-1);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--b-1); text-decoration: none; }
a:hover { text-decoration: underline; }

/* De focusring is 2px met 2px offset, en die ring is --b-1 op licht, --b-3 op
   donker: het token wisselt mee, dus de regel hoeft niet. */
:focus-visible {
  outline: 3px solid var(--b-1);
  outline-offset: 2px;
  border-radius: var(--r-s);
}

/* De sprong naar de inhoud blijft, en staat in beide lagen als eerste in de
   tabvolgorde (docs/ui-standaard.md §10). */
.overslaan {
  position: absolute; left: -999px; top: 0; background: var(--b-1);
  color: var(--t-inverse); padding: var(--s-2) var(--s-4);
  z-index: var(--z-menu); border-radius: 0 0 var(--r-m) 0;
}
.overslaan:focus { left: 0; }

/* De honeypot van het meldingsformulier: een veld dat eruitziet als een veld,
   maar buiten beeld staat en niet in de tabvolgorde zit. Een mens ziet hem niet
   en een schermlezer slaat hem over (aria-hidden op de omsluitende alinea in
   server.mjs); een bot die het hele formulier invult, vult ook dit. Bewust niet
   `display: none`: sommige bots vullen alleen zichtbare velden, en dit veld
   moet dus zichtbaar zijn voor een bot en onzichtbaar voor een mens. */
.honeypot { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ── het documentframe ────────────────────────────────────────────────────
   De kop, de taalkiezer en de voet staan op élke pagina, site of paneel. Ze
   horen daarom in de fundering en niet in een van de twee lagen: een naam die
   in allebei staat is precies wat regel U1 rood maakt. */
.kop {
  display: flex; align-items: center; gap: var(--s-4);
  flex-wrap: wrap; padding: var(--s-4) var(--s-5);
}
.merk a { color: var(--t-1); font-weight: 700; font-size: var(--f-5); letter-spacing: var(--letter); }
.merk a:hover { text-decoration: none; }
.logo { color: var(--b-1); }
.hoofdnav { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.hoofdnav a {
  color: var(--t-2); padding: var(--s-1) var(--s-2);
  border-radius: var(--r-m); font-weight: 500;
}
.hoofdnav a:hover { background: var(--opp-2); color: var(--t-1); text-decoration: none; }
.hoofdnav a.knop { color: var(--t-inverse); }
.hoofdnav a.knop:hover { background: var(--b-2); color: var(--t-inverse); }
.kop-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.talen {
  display: inline-flex; align-items: center; gap: var(--dun);
  background: var(--opp-1); border: 1px solid var(--lijn);
  padding: var(--s-1); border-radius: var(--r-v); box-shadow: var(--e1);
}
.talen-icoon { width: var(--s-4); height: var(--s-4); margin: 0 var(--s-2); color: var(--t-2); flex: none; }
.talen a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--s-6); padding: var(--s-1) var(--s-2);
  border-radius: var(--r-v); color: var(--t-2);
  font-size: var(--f-2); font-weight: 600;
}
.talen a[aria-current="true"] { background: var(--b-subtiel); color: var(--b-1); }
.talen a:hover { background: var(--opp-2); color: var(--t-1); text-decoration: none; }
.talen a[aria-current="true"]:hover { background: var(--b-subtiel); color: var(--b-1); }
.taal-kort { display: none; }

@media (max-width: 640px) {
  .talen .taal-voluit { display: none; }
  .talen .taal-kort { display: inline; }
  .thema-knop-tekst { display: none; }
}

/* Eén bediening voor de publieke kop en de bovenbalk van het paneel. */
.thema-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  border: 1px solid var(--lijn); border-radius: var(--r-v);
  background: var(--opp-1); color: var(--t-1);
  padding: var(--s-1) var(--s-2); min-height: calc(var(--s-6) + var(--s-2));
  font: inherit; font-size: var(--f-2); font-weight: 600;
  white-space: nowrap; cursor: pointer; box-shadow: var(--e1);
  transition: background var(--d-1) var(--ease), border-color var(--d-1) var(--ease);
}
.thema-knop:hover { background: var(--opp-2); border-color: var(--lijn-sterk); }
.thema-knop[hidden] { display: none; }
.thema-spoor {
  position: relative; display: inline-block; flex: none;
  width: var(--s-7); height: var(--s-6);
  border-radius: var(--r-v); background: var(--opp-2);
}
.thema-duim {
  position: absolute; top: var(--s-1); left: var(--s-1);
  display: grid; place-items: center;
  width: var(--s-5); height: var(--s-5);
  border-radius: var(--r-v); background: var(--opp-1); color: var(--b-1);
  box-shadow: var(--e1); line-height: 1;
  transition: transform var(--d-2) var(--ease);
}
:root[data-theme="dark"] .thema-duim { transform: translateX(var(--s-4)); }
@media (prefers-reduced-motion: reduce) {
  .thema-knop, .thema-duim { transition: none; }
}

main { margin: 0 auto; padding: var(--s-4) var(--s-5) var(--s-8); }

.voet {
  border-top: 1px solid var(--lijn); padding: var(--s-5) var(--s-5) var(--s-7);
  color: var(--t-2); font-size: var(--f-2);
}

/* ── de knop ──────────────────────────────────────────────────────────────
   Drie hoogtes uit de schaal: klein, standaard, groot. De hoogte staat in de
   klasse, want een component die zelf een getal kiest is een tweede taal. */
.knop {
  display: inline-block; background: var(--b-1); color: var(--t-inverse);
  border: 1px solid transparent; padding: var(--s-2) var(--s-4);
  border-radius: var(--r-m); font: inherit; font-weight: 600; cursor: pointer;
  transition: background var(--d-1) var(--ease);
}
.knop:hover { background: var(--b-2); text-decoration: none; }
.knop-klein { padding: var(--s-1) var(--s-3); font-size: var(--f-2); }
.knop-groot { padding: var(--s-4) var(--s-6); }
.knop-zacht { background: transparent; color: var(--t-1); border-color: var(--lijn); }
.knop-zacht:hover { background: var(--opp-2); }
.knop-gevaar { background: transparent; color: var(--fout); border-color: var(--lijn); padding: var(--s-1) var(--s-2); font-size: var(--f-2); }
.knop-gevaar:hover { background: var(--fout); color: var(--t-inverse); }

/* ── de kaart ──────────────────────────────────────────────────────────── */
.kaart {
  background: var(--opp-1); border: 1px solid var(--lijn);
  border-radius: var(--r-l); padding: var(--s-5); box-shadow: var(--e2);
}
.kaart p { margin: 0; color: var(--t-2); }

/* ── de tabel ──────────────────────────────────────────────────────────── */
.tabel {
  width: 100%; border-collapse: collapse; background: var(--opp-1);
  border: 1px solid var(--lijn); border-radius: var(--r-l); overflow: hidden;
}
.tabel th, .tabel td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--lijn); }
.tabel th { background: var(--opp-2); font-size: var(--f-1); text-transform: uppercase; letter-spacing: var(--letter); color: var(--t-2); }
.tabel tr:last-child td { border-bottom: 0; }

/* ── de badge: kleur is nooit de enige betekenis ─────────────────────────
   Elke badge draagt een tekst uit het woordenboek; de kleur is de tweede
   aanwijzing, niet de enige. Zes statussen, zes tokens, en de donkere waarden
   staan in tokens.css in plaats van in een tweede blok hier. */
.badge {
  display: inline-block; padding: var(--dun) var(--s-2); border-radius: var(--r-v);
  font-size: var(--f-1); font-weight: 600;
}
.badge-active, .badge-taak-succeeded, .badge-kennis-geldig { background: var(--ok-bg); color: var(--ok); }
.badge-pending, .badge-taak-queued, .badge-kennis-concept { background: var(--let-bg); color: var(--let); }
.badge-building, .badge-taak-running { background: var(--info-bg); color: var(--info); }
.badge-error, .badge-taak-failed, .badge-kennis-escaleer { background: var(--fout-bg); color: var(--fout); }
.badge-kennis-onbekend { background: var(--neutraal-bg); color: var(--neutraal); }
/* `badge-concept` staat hier naast `badge-active` en niet in paneel.css, want
   het is de andere helft van hetzelfde paar. Tot 05-10 had de concept-badge
   helemaal geen klasse en viel hij terug op de kale `.badge`, dus zijn uiterlijk
   hing aan de basisvorm van elke badge in het hele paneel: een kind die iets
   aan de basisvorm verandert, verandert meteen wat "concept" betekent. Een
   klasse die er niet is, is geen vorm. */
.badge-concept { background: var(--neutraal-bg); color: var(--neutraal); }

/* ── het cms-overzicht: twee toestanden op de rij zelf ──────────────────────
   Het woord in de badge blijft staan — kleur is nooit de enige betekenis. Maar
   de rij draagt de toestand ook, en dat is wat de beheerder ziet terwijl hij de
   lijst scant. Een streep links van de rij scheidt live van concept zonder dat
   hij hoeft te lezen welke kolom hij moet hebben.

   De regels staan op de rij (`data-cms-toestand`) en niet op een lijst van
   domeinen of slugs ernaast: de sabotage voor deze meting is één markt uit de
   lijst halen, en de vorm haalt hem zelf uit de tabel. `scripts/cms-toestand-test.sh`
   volgt de stylesheets die de pagina aanwijst en meet of deze twee regels naar
   ANDERE declaraties wijzen — twee regels die hetzelfde zeggen zijn één regel. */
.tabel tbody tr.cms-rij > td:first-child { border-left: 3px solid transparent; }
.tabel tbody tr.cms-rij[data-cms-toestand="live"] > td:first-child { border-left-color: var(--ok); }
.tabel tbody tr.cms-rij[data-cms-toestand="concept"] > td:first-child { border-left-color: var(--lijn-sterk); }

/* ── het lab-banner ───────────────────────────────────────────────────────
   Deze klasse staat hier en niet in paneel.css, want sinds 2026-09-30 draagt
   ook een publieke pagina de waarschuwing: /docs zegt zonder kennisbank "in deze
   labomgeving", en die zin moet ergens uitgelegd worden (huisstijl §15 laat het
   woord toe omdat het de klant iets vertelt). Zij staat naast `.kruimel`,
   `.leeg`, `.cms-keuze` en `.cms-inhoud`: klassen die op beide oppervlakken
   voorkomen, en dus in de laag die beide laden.

   De kleuren stonden hier al; alleen de vorm stond in paneel.css. De
   donkere modus hoeft daarom niets te herhalen. */
.lab-banner {
  background: var(--lab-bg); color: var(--lab-t);
  border-bottom: 1px solid var(--lab-lijn);
  padding: var(--s-2) var(--s-5); text-align: center; font-size: var(--f-2);
}

/* ── formuliervelden ──────────────────────────────────────────────────── */
.formulier { display: flex; flex-direction: column; gap: var(--s-2); }
.formulier.rij { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.formulier.rij label { flex: 1 1 12rem; }
.formulier label { display: flex; flex-direction: column; gap: var(--s-1); font-weight: 600; font-size: var(--f-2); }

input, select, textarea {
  font: inherit; font-size: var(--f-4); padding: var(--s-2) var(--s-2);
  border: 1px solid var(--lijn); border-radius: var(--r-m);
  background: var(--opp-1); color: var(--t-1);
}
input:focus, select:focus, textarea:focus { border-color: var(--b-1); }

code {
  font-family: var(--mono); background: var(--opp-2);
  padding: var(--dun) var(--s-1); border-radius: var(--r-s); font-size: var(--f-2);
}

/* ── de twee meldingsblokken ───────────────────────────────────────────── */
.fout { background: var(--fout-bg); color: var(--fout); border: 1px solid var(--fout-lijn); padding: var(--s-2) var(--s-3); border-radius: var(--r-m); }
.ok { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-lijn); padding: var(--s-2) var(--s-3); border-radius: var(--r-m); }

/* ── de detailslijst ───────────────────────────────────────────────────── */
.details { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-4); margin: 0; }
.details dt { color: var(--t-2); font-size: var(--f-2); }
.details dd { margin: 0; }

.inline { display: inline; }

/* De noot en de lege toestand staan op het imprint (een publieke pagina) én in
   het paneel. Ze horen daarom in de fundering: een naam die in allebei de
   lagen staat is precies wat regel U1 rood maakt, en de 28-09-meting van de
   UX-toets vond er zo'n naam. */
.noot, .terugvalnoot { color: var(--t-2); font-size: var(--f-2); margin-top: var(--s-2); }

/* ── de broodkruimel en de lege toestand ──────────────────────────────────
   Beide staan op een publieke pagina én in het paneel. Tot 29-09 stonden ze in
   paneel.css, en dat betekende dat de teruglink op elke dienstpagina, elk
   kennisbank-item en elke blogpagina zonder vorm arriveerde: die pagina's
   laden paneel.css niet. Gemeten, niet aangenomen — `scripts/ui-klassen-test.sh`
   regel K3, en de pagina heette toen `site-dienst.html`. */
.kruimel { margin: 0 0 var(--s-1); font-size: var(--f-2); }
.kruimel a { color: var(--t-2); }
.kruimel a:hover { color: var(--b-1); }
.leeg { color: var(--t-2); font-size: var(--f-2); margin-top: var(--s-2); }

/* De rij van twee velden naast elkaar: het zoekveld met zijn knop. Ook gedeeld,
   want de kennisbank en de zoekpagina van de site gebruiken hem en het
   cms-tekenscherm van het paneel ook. */
.cms-keuze { flex-direction: row; align-items: center; gap: var(--s-1); }

/* ── het supportgesprek ───────────────────────────────────────────────────
   De klant leest dit zonder account op /support/ticket/<id> (paginaSupportStatus,
   een SITEpagina) én met account in /panel/support. Daarom staat het hier en
   niet in site.css of paneel.css: van die twee lagen laadt de pagina in kwestie
   er geen. De opdracht van UX wees de supportklassen allemaal naar paneel.css,
   en dat zou de statuspagina zonder account ongestyled laten — gemeten in
   dezelfde poort, arm D2.

   Het verschil tussen een vraag en een antwoord is een kantlijn en geen kleur
   (docs/ui-standaard.md, §17 voorstel 1). Een blauwe bubbel links en een grijze
   rechts is de vorm van WhatsApp en veronderstelt dat je weet waar je moet
   kijken; wie zegt wat staat al als tekst in `support-regel-van`. */
.support-gesprek { list-style: none; margin: var(--s-5) 0; padding: 0; display: grid; gap: var(--s-4); }
.support-regel { border-left: var(--dun) solid var(--lijn-sterk); padding: 0 0 0 var(--s-3); }
.support-regel p { margin: 0 0 var(--s-1); }
.support-regel-klant { border-left-color: var(--b-2); }
.support-regel-support { border-left-color: var(--lijn-sterk); }
.support-regel-van {
  margin: 0 0 var(--s-1); color: var(--t-2); font-size: var(--f-1);
  font-weight: 700; text-transform: uppercase; letter-spacing: var(--letter);
}

/* ── de tekst van een geschreven artikel ─────────────────────────────────
   Een blogbericht, een cms-pagina, de privacyverklaring en het voorbeeld in
   het paneel dragen allemaal `.cms-inhoud`. Dat is chroom om een tekst heen en
   geen naam van één product, dus het hoort in de fundering. */
.cms-inhoud a { text-decoration: underline; }
.cms-inhoud img { max-width: 100%; height: auto; }
.cms-inhoud figure { margin: var(--s-5) 0; }
.cms-inhoud figure img { display: block; }
.cms-inhoud p { margin: 0 0 var(--s-4); }
.cms-inhoud h2 { margin: var(--s-5) 0 var(--s-2); font-size: var(--f-6); }
.cms-inhoud ul { margin: var(--s-2) 0; padding-left: var(--s-4); }

/* Verminderde beweging is een blok, geen gedachte op het einde
   (docs/ui-standaard.md §9). Het staat hier omdat de beweging in de primitieven
   zit; de twee lagen hebben elk hun eigen blok voor hun eigen beweging. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Public identity. These tokens leave the panel's palette and scale intact. */
:root {
  --site-page: #f8faf8;
  --site-surface: #ffffff;
  --site-soft: #edf3ef;
  --site-line: #d9e3dd;
  --site-text: #142c27;
  --site-muted: #52675f;
  --site-accent: #176d54;
  --site-haze: #dbefe1;
  --site-ink: #0d2b25;
  --site-ink-raised: #163a31;
  --site-on-ink: #f0f7f1;
  --site-on-ink-muted: #b7cdc2;
  --site-mint: #b9efb7;
  --site-grid: rgba(66, 124, 97, 0.1);
  --site-shadow: 0 24px 64px rgba(15, 55, 38, 0.12);
  --f-site-hero: clamp(2.75rem, 5.2vw, 4.75rem);
  --f-site-section: clamp(1.875rem, 3vw, 2.625rem);
  --f-site-page: clamp(2.5rem, 4.5vw, 4rem);
  --site-letter: -0.055em;
}
:root[data-theme="dark"] {
  --site-page: #0d1815;
  --site-surface: #14231e;
  --site-soft: #1b3027;
  --site-line: #2c4137;
  --site-text: #edf5ef;
  --site-muted: #a9bdb0;
  --site-accent: #a6e5b3;
  --site-haze: #1d3d2e;
  --site-grid: rgba(143, 199, 165, 0.07);
  --site-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
}