/* ===================================================================
   Fairwind V2 — basiscomponenten
   Hoort bij tokens.css. Elke kleur komt uit een token; geen letterlijke hex.
   Alle klassen dragen het voorvoegsel fw-.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--vlak-grond);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: var(--tekst-m);
  line-height: var(--regel-normaal);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-variation-settings: var(--serif-as);
  font-weight: var(--serif-gewicht);
  line-height: var(--regel-dicht);
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.005em;
}
h1 { font-size: var(--tekst-3xl); }
h2 { font-size: var(--tekst-2xl); }
h3 { font-size: var(--tekst-xl); }
h4 { font-size: var(--tekst-l); }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 0.2em; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-2);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* cijfers lijnen altijd uit waar ze in kolommen staan */
.fw-cijfer, .fw-tabel td, .fw-tabel th, .fw-tegel-waarde, .fw-as-tick {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   1. Paginaraam
   -------------------------------------------------------------------------- */
.fw-raam { min-height: 100%; background: var(--vlak-grond); }
.fw-breedte {
  width: 100%;
  max-width: var(--kolom-max);
  margin-inline: auto;
  padding-inline: var(--goot);
}
.fw-hoofd {
  border-bottom: var(--lijn-dun) solid var(--lijn-1);
  background: var(--vlak-1);
}
.fw-hoofd-rij {
  display: flex; align-items: center; gap: var(--ruimte-4);
  padding-block: var(--ruimte-3); flex-wrap: wrap;
}
.fw-woordmerk {
  font-family: var(--font-serif);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em;
  color: var(--ink-1); text-decoration: none; display: inline-flex;
  align-items: baseline; gap: 0.4em; white-space: nowrap;
}
.fw-woordmerk b { font-weight: 600; color: var(--accent); }
.fw-woordmerk span {
  font-family: var(--font-sans); font-weight: 400; font-size: var(--tekst-xs);
  color: var(--ink-3); letter-spacing: var(--spatie-label); text-transform: uppercase;
}
.fw-hoofd-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--ruimte-3); }

/* navigatie — de zeven plekken */
.fw-plekken {
  display: flex; gap: var(--ruimte-1); overflow-x: auto; scrollbar-width: thin;
  border-bottom: var(--lijn-dun) solid var(--lijn-1); background: var(--vlak-1);
  margin: 0; padding: 0; list-style: none;
}
.fw-plekken-wrap { background: var(--vlak-1); }
.fw-plek {
  display: inline-block; white-space: nowrap; text-decoration: none;
  color: var(--ink-2); font-size: var(--tekst-s); font-weight: 500;
  padding: var(--ruimte-3) var(--ruimte-3);
  border-bottom: var(--lijn-dik) solid transparent; margin-bottom: -1px;
}
.fw-plek:hover { color: var(--ink-1); background: var(--vlak-2); }
.fw-plek[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.fw-plek-tel {
  margin-left: 0.4em; font-size: var(--tekst-xs); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.fw-kruimel {
  font-size: var(--tekst-xs); color: var(--ink-3); letter-spacing: var(--spatie-label);
  text-transform: uppercase; margin-bottom: var(--ruimte-2);
}
.fw-paginakop { padding-block: var(--ruimte-6) var(--ruimte-4); }
.fw-paginakop p { color: var(--ink-2); max-width: var(--lees-max); margin-top: var(--ruimte-2); }
.fw-sectie { padding-block: var(--ruimte-5); }
.fw-sectiekop {
  display: flex; align-items: baseline; gap: var(--ruimte-3); flex-wrap: wrap;
  padding-bottom: var(--ruimte-3); margin-bottom: var(--ruimte-4);
  border-bottom: var(--lijn-dun) solid var(--lijn-2);
}
.fw-sectiekop .fw-bij { margin-left: auto; font-size: var(--tekst-xs); color: var(--ink-3); }

.fw-raster { display: grid; gap: var(--ruimte-4); }
.fw-raster--2 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.fw-raster--3 { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }
.fw-raster--4 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.fw-stapel { display: flex; flex-direction: column; gap: var(--ruimte-3); }
.fw-rij { display: flex; gap: var(--ruimte-3); flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------------------
   2. Kaart
   -------------------------------------------------------------------------- */
.fw-kaart {
  background: var(--vlak-1);
  border: var(--lijn-dun) solid var(--lijn-1);
  border-radius: var(--radius-2);
  padding: var(--ruimte-4);
}
.fw-kaart--vlak { border: none; border-top: var(--lijn-dik) solid var(--ink-1); border-radius: 0; padding-inline: 0; }
.fw-kaart--aandacht { border-color: var(--sem-aandacht-rand); background: var(--sem-aandacht-was); }
.fw-kaart-kop {
  display: flex; align-items: baseline; gap: var(--ruimte-2); flex-wrap: wrap;
  margin-bottom: var(--ruimte-3);
}
.fw-kaart-kop h3, .fw-kaart-kop h4 { margin-right: auto; }
.fw-label {
  font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: var(--spatie-label);
  color: var(--ink-3); font-weight: 500;
}
.fw-bij { font-size: var(--tekst-xs); color: var(--ink-3); }
.fw-scheiding { border: none; border-top: var(--lijn-dun) solid var(--lijn-1); margin-block: var(--ruimte-4); }

/* --------------------------------------------------------------------------
   3. Stat-tegel — waarde, n-band, vloernotitie
   -------------------------------------------------------------------------- */
.fw-tegel {
  background: var(--vlak-1); border: var(--lijn-dun) solid var(--lijn-1);
  border-radius: var(--radius-2); padding: var(--ruimte-4);
  display: flex; flex-direction: column; gap: var(--ruimte-2);
}
.fw-tegel-naam { font-size: var(--tekst-s); color: var(--ink-2); font-weight: 500; }
.fw-tegel-waarde {
  font-family: var(--font-serif); font-variation-settings: "SOFT" 0, "WONK" 0;
  font-weight: 560; font-size: var(--cijfer-m); line-height: 1.05; color: var(--ink-1);
  display: flex; align-items: baseline; gap: 0.3em;
}
.fw-tegel-waarde--groot { font-size: var(--cijfer-l); }
.fw-tegel-eenheid { font-family: var(--font-sans); font-size: var(--tekst-s); color: var(--ink-3); font-weight: 400; }
.fw-tegel-onder { display: flex; align-items: center; gap: var(--ruimte-2); flex-wrap: wrap; }

/* n-band: het aantal waarop het cijfer rust, altijd zichtbaar */
.fw-nband {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-size: var(--tekst-xs); color: var(--ink-2);
  background: var(--vlak-2); border: var(--lijn-dun) solid var(--lijn-1);
  border-radius: var(--radius-rond); padding: 0.15em 0.6em;
  font-variant-numeric: tabular-nums;
}
.fw-nband b { font-weight: 600; color: var(--ink-1); }

/* vloernotitie: waarom dit cijfer mag bestaan */
.fw-vloernotitie {
  font-size: var(--tekst-xs); color: var(--ink-3); line-height: var(--regel-normaal);
  border-left: var(--lijn-dik) solid var(--lijn-2); padding-left: var(--ruimte-2);
}
.fw-vloernotitie b { color: var(--ink-2); font-weight: 500; }

/* --------------------------------------------------------------------------
   4. Band-badge — richting, kleurloos; de pijl draagt de richting
   -------------------------------------------------------------------------- */
.fw-band {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-size: var(--tekst-xs); font-weight: 500; color: var(--band-ink);
  background: var(--band-vlak); border: var(--lijn-dun) solid var(--band-rand);
  border-radius: var(--radius-rond); padding: 0.15em 0.6em; white-space: nowrap;
}
.fw-band-pijl { font-size: 0.9em; line-height: 1; }
.fw-band--gunstig { color: var(--sem-gunstig); border-color: var(--accent-rand); background: var(--accent-was); }
.fw-band--ongunstig { color: var(--sem-aandacht); border-color: var(--sem-aandacht-rand); background: var(--sem-aandacht-was); }
.fw-band--geen { color: var(--onder-vloer-ink); border-style: dashed; }

/* --------------------------------------------------------------------------
   5. Tabel — tabelcijfers, dunne lijnen
   -------------------------------------------------------------------------- */
.fw-tabelwrap { overflow-x: auto; }
.fw-tabel {
  width: 100%; border-collapse: collapse; font-size: var(--tekst-s);
  min-width: 30rem;
}
.fw-tabel caption {
  text-align: left; font-size: var(--tekst-xs); color: var(--ink-3);
  padding-bottom: var(--ruimte-2);
}
.fw-tabel th {
  text-align: left; font-weight: 500; color: var(--ink-3);
  font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: var(--spatie-label);
  padding: var(--ruimte-2) var(--ruimte-3); border-bottom: var(--lijn-dun) solid var(--lijn-2);
  white-space: nowrap;
}
.fw-tabel td {
  padding: var(--ruimte-3); border-bottom: var(--lijn-dun) solid var(--lijn-1);
  color: var(--ink-1); vertical-align: baseline;
}
.fw-tabel tbody tr:last-child td { border-bottom: none; }
.fw-tabel .fw-num { text-align: right; }
.fw-tabel .fw-num-groot {
  text-align: right; font-family: var(--font-serif);
  font-variation-settings: "SOFT" 0, "WONK" 0; font-weight: 560;
  font-size: var(--cijfer-s); line-height: 1.1;
}
.fw-tabel tfoot td {
  border-top: var(--lijn-dik) solid var(--ink-1); border-bottom: none;
  font-weight: 600; color: var(--ink-1);
}
.fw-tabel tr[data-onder-vloer="ja"] td { color: var(--onder-vloer-ink); }
/* Een tabel met tekst als rijkop (de meetbaarheidskaart, stap 13): de rijkop loopt door */
.fw-tabel--tekst th[scope="row"] {
  white-space: normal; text-transform: none; letter-spacing: normal; min-width: 10rem;
  font-size: var(--tekst-s); color: var(--ink-1); vertical-align: baseline;
}

/* --------------------------------------------------------------------------
   6. Verdeelbalk — schaalvragen, alleen gepubliceerde klassen
   Divergerend: ongunstige pool links, neutrale kern, gunstige pool rechts.
   2px tussenruimte tussen vullingen; elke klasse heeft een zichtbaar label.
   -------------------------------------------------------------------------- */
.fw-verdeling { display: flex; flex-direction: column; gap: var(--ruimte-2); }
.fw-balk {
  display: flex; width: 100%; height: 2.25rem; gap: 2px;
  background: var(--grafiek-tussen); border-radius: var(--radius-1); overflow: hidden;
}
.fw-balk-deel {
  display: flex; align-items: center; justify-content: center;
  font-size: var(--tekst-xs); font-weight: 600; font-variant-numeric: tabular-nums;
  min-width: 0; overflow: hidden; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.fw-balk-deel[data-klasse="1"] { background: var(--data-ongunstig); color: var(--accent-ink); }
.fw-balk-deel[data-klasse="2"] { background: var(--data-ongunstig-licht); color: var(--ink-1); }
.fw-balk-deel[data-klasse="3"] { background: var(--data-neutraal); color: var(--ink-1); }
.fw-balk-deel[data-klasse="4"] { background: var(--data-gunstig-licht); color: var(--ink-1); }
.fw-balk-deel[data-klasse="5"] { background: var(--data-gunstig); color: var(--accent-ink); }
.fw-balk-legenda {
  display: flex; flex-wrap: wrap; gap: var(--ruimte-1) var(--ruimte-4);
  font-size: var(--tekst-xs); color: var(--ink-2);
}
.fw-legenda-item { display: inline-flex; align-items: center; gap: 0.4em; }
.fw-legenda-vlek {
  width: 0.75rem; height: 0.75rem; border-radius: var(--radius-1); flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.fw-legenda-vlek[data-klasse="1"] { background: var(--data-ongunstig); }
.fw-legenda-vlek[data-klasse="2"] { background: var(--data-ongunstig-licht); }
.fw-legenda-vlek[data-klasse="3"] { background: var(--data-neutraal); }
.fw-legenda-vlek[data-klasse="4"] { background: var(--data-gunstig-licht); }
.fw-legenda-vlek[data-klasse="5"] { background: var(--data-gunstig); }
.fw-legenda-vlek[data-serie="1"] { background: var(--serie-1); }
.fw-legenda-vlek[data-serie="2"] { background: var(--serie-2); }
.fw-legenda-vlek[data-serie="3"] { background: var(--serie-3); }

/* bandmeter — toon (signaalsoorten) in banden, nooit in exacte aandelen */
.fw-meter { display: grid; grid-template-columns: minmax(5.5rem, auto) 1fr auto; gap: var(--ruimte-2) var(--ruimte-3); align-items: center; }
.fw-meter-naam { font-size: var(--tekst-s); color: var(--ink-2); }
.fw-meter-stappen { display: flex; gap: 2px; }
.fw-meter-stap {
  width: 1.5rem; height: 0.5rem; border-radius: var(--radius-1);
  background: var(--vlak-3); box-shadow: inset 0 0 0 1px var(--lijn-1);
}
.fw-meter-stap[data-aan="ja"] { background: var(--accent); box-shadow: none; }
.fw-meter-woord { font-size: var(--tekst-xs); color: var(--ink-2); white-space: nowrap; }

/* deelnamebalk — vloerstappen, nooit per één */
.fw-stappenbalk {
  display: flex; gap: 3px; height: 0.75rem; align-items: stretch;
}
.fw-stap {
  flex: 1; background: var(--vlak-3); border-radius: var(--radius-1);
  box-shadow: inset 0 0 0 1px var(--lijn-1);
}
.fw-stap[data-vol="ja"] { background: var(--accent); box-shadow: none; }
.fw-stap[data-vol="prognose"] {
  background: var(--accent-was); box-shadow: inset 0 0 0 1px var(--accent-rand);
}

/* --------------------------------------------------------------------------
   7. Lege staat met redencode
   Een onderdrukte cel lijkt nooit op een kleine waarde: arcering, geen kleur.
   -------------------------------------------------------------------------- */
.fw-leeg {
  border: var(--lijn-dun) dashed var(--onder-vloer-rand);
  border-radius: var(--radius-2);
  background-color: var(--vlak-1); background-image: var(--onder-vloer-vlak);
  padding: var(--ruimte-4);
  display: flex; flex-direction: column; gap: var(--ruimte-2);
}
.fw-leeg-titel { font-size: var(--tekst-s); font-weight: 600; color: var(--ink-2); }
.fw-leeg p { font-size: var(--tekst-s); color: var(--ink-2); max-width: var(--lees-max); }
.fw-leeg-acties { display: flex; gap: var(--ruimte-2); flex-wrap: wrap; margin-top: var(--ruimte-1); }
.fw-redencode {
  font-family: var(--font-mono); font-size: var(--tekst-xs);
  color: var(--ink-2); background: var(--vlak-2);
  border: var(--lijn-dun) solid var(--lijn-1); border-radius: var(--radius-1);
  padding: 0.1em 0.45em; letter-spacing: 0;
}
.fw-cel-leeg {
  display: inline-block; min-width: 3.5rem; height: 1.1rem; border-radius: var(--radius-1);
  background-color: transparent; background-image: var(--onder-vloer-vlak);
  box-shadow: inset 0 0 0 1px var(--onder-vloer-rand); vertical-align: middle;
}

/* --------------------------------------------------------------------------
   8. Waarschuwing / melding
   -------------------------------------------------------------------------- */
.fw-melding {
  display: flex; gap: var(--ruimte-3); align-items: flex-start;
  border: var(--lijn-dun) solid var(--lijn-2); border-left: 3px solid var(--ink-3);
  border-radius: var(--radius-2); background: var(--vlak-1);
  padding: var(--ruimte-3) var(--ruimte-4);
}
.fw-melding--aandacht { border-color: var(--sem-aandacht-rand); border-left-color: var(--sem-aandacht); background: var(--sem-aandacht-was); }
.fw-melding--gunstig { border-color: var(--accent-rand); border-left-color: var(--sem-gunstig); background: var(--accent-was); }
.fw-melding-merk { font-weight: 700; line-height: 1.4; flex: none; }
.fw-melding--aandacht .fw-melding-merk { color: var(--sem-aandacht); }
.fw-melding--gunstig .fw-melding-merk { color: var(--sem-gunstig); }
.fw-melding-tekst { font-size: var(--tekst-s); color: var(--ink-1); }
.fw-melding-tekst p + p { margin-top: var(--ruimte-2); }
.fw-melding-tekst code { overflow-wrap: anywhere; }  /* (M1) een uitnodigingslink zonder breekpunt blijft binnen de melding */

/* --------------------------------------------------------------------------
   9. Knoppen
   Eén primaire knop per oppervlak. Ernst volgt het gevolg.
   -------------------------------------------------------------------------- */
.fw-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: inherit; font-size: var(--tekst-s); font-weight: 500; line-height: 1.2;
  padding: 0.6em 1.1em; min-height: 2.5rem;
  border-radius: var(--radius-2); border: var(--lijn-dun) solid transparent;
  background: var(--vlak-1); color: var(--ink-1); cursor: pointer;
  text-decoration: none; transition: background var(--duur-1) var(--soepel);
}
.fw-knop--primair { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.fw-knop--primair:hover { background: var(--accent-diep); border-color: var(--accent-diep); }
.fw-knop--secundair { border-color: var(--lijn-2); color: var(--ink-1); }
.fw-knop--secundair:hover { background: var(--vlak-2); }
.fw-knop--tertiair { background: transparent; color: var(--accent); padding-inline: 0.25em; min-height: 2rem; }
.fw-knop--tertiair:hover { text-decoration: underline; }
.fw-knop--zwaar { border-color: var(--lijn-3); color: var(--ink-1); background: var(--vlak-2); }
.fw-knop--gevaar { border-color: var(--sem-aandacht-rand); color: var(--sem-aandacht); background: var(--sem-aandacht-was); }
.fw-knop[aria-disabled="true"], .fw-knop:disabled { opacity: 0.5; cursor: not-allowed; }
.fw-knop[data-bezig="ja"] { cursor: progress; }

/* --------------------------------------------------------------------------
   10. Formulier
   -------------------------------------------------------------------------- */
.fw-veld { display: flex; flex-direction: column; gap: var(--ruimte-2); }
.fw-veld > label { font-size: var(--tekst-s); font-weight: 500; color: var(--ink-1); }
.fw-hulp { font-size: var(--tekst-xs); color: var(--ink-3); max-width: var(--lees-max); }
.fw-invoer, .fw-keuze, .fw-tekstveld {
  font-family: inherit; font-size: var(--tekst-m); color: var(--ink-1);
  background: var(--vlak-1); border: var(--lijn-dun) solid var(--lijn-2);
  border-radius: var(--radius-2); padding: 0.55em 0.7em; width: 100%; min-height: 2.5rem;
}
.fw-tekstveld { min-height: 6rem; resize: vertical; line-height: var(--regel-normaal); }
.fw-invoer::placeholder, .fw-tekstveld::placeholder { color: var(--ink-3); }
.fw-veld[data-fout="ja"] .fw-invoer,
.fw-veld[data-fout="ja"] .fw-tekstveld { border-color: var(--sem-aandacht); }
.fw-foutregel { font-size: var(--tekst-xs); color: var(--sem-aandacht); font-weight: 500; }
.fw-vinkrij { display: flex; gap: var(--ruimte-2); align-items: flex-start; }
.fw-vinkrij input { margin-top: 0.25em; width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }

/* ==========================================================================
   DEELNEMERPAD — register "deelnemer"
   ========================================================================== */

/* 11. Vraagkaart — groot, één vraag per scherm */
.fw-vraagkaart {
  background: var(--vlak-1); border: var(--lijn-dun) solid var(--lijn-1);
  border-radius: var(--radius-3); padding: var(--ruimte-5);
  display: flex; flex-direction: column; gap: var(--ruimte-4);
  box-shadow: var(--schaduw-1);
}
.fw-vraag-teller {
  font-size: var(--tekst-s); color: var(--ink-3); letter-spacing: var(--spatie-label);
  text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.fw-vraag-tekst {
  font-family: var(--font-serif); font-variation-settings: var(--serif-as);
  font-weight: var(--serif-gewicht); font-size: var(--tekst-3xl);
  line-height: 1.18; color: var(--ink-1); text-wrap: balance;
}
.fw-vraag-uitleg { font-size: var(--tekst-m); color: var(--ink-2); max-width: 30rem; }

/* 12. Schaalkeuze — grote raakvlakken, label bij elke stap */
.fw-schaal { display: flex; flex-direction: column; gap: var(--ruimte-2); }
.fw-schaal-knoppen { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--ruimte-2); }
.fw-schaalknop {
  appearance: none; font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.35em; min-height: 5.25rem; padding: var(--ruimte-2) 0.25rem;
  background: var(--vlak-2); color: var(--ink-1);
  border: var(--lijn-dik) solid transparent; border-radius: var(--radius-3);
  transition: background var(--duur-1) var(--soepel), border-color var(--duur-1) var(--soepel);
}
.fw-schaalknop:hover { background: var(--vlak-3); }
.fw-schaalknop-cijfer {
  font-family: var(--font-serif); font-variation-settings: var(--serif-as);
  font-size: 1.5rem; font-weight: 560; line-height: 1;
}
.fw-schaalknop-woord { font-size: var(--tekst-xs); color: var(--ink-2); text-align: center; line-height: 1.2; }
.fw-schaalknop[aria-pressed="true"] {
  background: var(--accent-was); border-color: var(--accent); color: var(--ink-1);
}
.fw-schaalknop[aria-pressed="true"] .fw-schaalknop-woord { color: var(--ink-1); font-weight: 600; }
@media (max-width: 26rem) {
  .fw-schaal-knoppen { grid-template-columns: repeat(5, 1fr); gap: 0.35rem; }
  .fw-schaalknop { min-height: 4.5rem; }
  .fw-schaalknop-woord { font-size: 0.6875rem; }
}
.fw-overslaan { align-self: flex-start; }

/* 13. Tekstveld deelnemer */
.fw-open { display: flex; flex-direction: column; gap: var(--ruimte-2); }
.fw-open .fw-tekstveld {
  font-size: var(--tekst-l); min-height: 8rem; border-radius: var(--radius-3);
  border-width: var(--lijn-dik); border-color: var(--lijn-2); background: var(--vlak-2);
}
.fw-open-voet { display: flex; justify-content: space-between; gap: var(--ruimte-3); flex-wrap: wrap; }

/* 14. Ontvangstbewijs */
.fw-bewijs {
  background: var(--vlak-1); border: var(--lijn-dun) solid var(--lijn-1);
  border-radius: var(--radius-3); padding: var(--ruimte-5);
  display: flex; flex-direction: column; align-items: center; gap: var(--ruimte-4);
  text-align: center; box-shadow: var(--schaduw-1);
}
.fw-bewijs h2 { font-size: var(--tekst-2xl); }
.fw-bewijs-regels {
  display: flex; flex-direction: column; gap: var(--ruimte-2);
  font-size: var(--tekst-m); color: var(--ink-2); max-width: 26rem;
}
.fw-bewijs-regels li { list-style: none; }
.fw-bewijs-regels ul { margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ruimte-2); }

/* 15. Afdruk — enig beeld; komt alleen uit het eigen antwoord */
.fw-afdruk {
  width: min(15rem, 62vw); aspect-ratio: 1 / 1; max-width: 100%;
  display: block; margin-inline: auto;
}
.fw-afdruk-bij { font-size: var(--tekst-xs); color: var(--ink-3); max-width: 24rem; }

/* 16. Terugkoppelkaart */
.fw-terugkoppel {
  background: var(--vlak-1); border: var(--lijn-dun) solid var(--lijn-1);
  border-radius: var(--radius-3); padding: var(--ruimte-5);
  display: flex; flex-direction: column; gap: var(--ruimte-3);
}
.fw-terugkoppel-datum {
  font-size: var(--tekst-xs); color: var(--ink-3);
  letter-spacing: var(--spatie-label); text-transform: uppercase;
}
.fw-terugkoppel h3 { font-size: var(--tekst-xl); }
.fw-terugkoppel-tekst { font-size: var(--tekst-m); color: var(--ink-2); }
.fw-terugkoppel-voet {
  display: flex; gap: var(--ruimte-2); align-items: center; flex-wrap: wrap;
  border-top: var(--lijn-dun) solid var(--lijn-1); padding-top: var(--ruimte-3);
  font-size: var(--tekst-xs); color: var(--ink-3);
}

/* 17. Kiosk — zelfde register, grotere maten en een beurt-einde */
.fw-kiosk { min-height: 100%; display: flex; flex-direction: column; justify-content: center; }
.fw-kiosk .fw-vraag-tekst { font-size: clamp(2rem, 1.2rem + 3.4vw, 3rem); }
.fw-kiosk-voet {
  display: flex; justify-content: space-between; gap: var(--ruimte-3);
  font-size: var(--tekst-s); color: var(--ink-3); flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   18. Hulpklassen
   -------------------------------------------------------------------------- */
.fw-verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.fw-mono { font-family: var(--font-mono); font-size: 0.92em; }
.fw-zacht { color: var(--ink-2); }
.fw-stil { color: var(--ink-3); }
.fw-lees { max-width: var(--lees-max); }
.fw-aimerk {
  display: inline-flex; align-items: center; gap: 0.35em; font-size: var(--tekst-xs);
  color: var(--ink-2); background: var(--vlak-2); border: var(--lijn-dun) solid var(--lijn-1);
  border-radius: var(--radius-1); padding: 0.1em 0.45em;
}
/* (9a) het label van modeltekst: de zin, daaronder klein het model en de promptversie */
.fw-aimerk--blok { flex-direction: column; align-items: flex-start; gap: 0.15em; }
.fw-aimerk--blok small { font-size: inherit; color: var(--ink-3); }
/* (S6) de lange modelnaam en promptversie breken af op een smal scherm (485 px) */
.fw-aimerk, .fw-aimerk small { overflow-wrap: anywhere; }
p.fw-aimerk { max-width: 100%; }


/* --------------------------------------------------------------------------
   Fase 2b — app-navigatie
   Eén balk in elk klant-scherm, dezelfde als het hoofdmenu. Alleen kleur uit
   tokens; geen token wordt overschreven.
   -------------------------------------------------------------------------- */
.fwapp-nav { background: var(--vlak-1); }
.fwapp-nav-rij {
  display: flex; align-items: center; gap: var(--ruimte-2) var(--ruimte-4);
  flex-wrap: wrap; padding-block: var(--ruimte-2);
}
.fwapp-terug {
  font-size: var(--tekst-s); font-weight: 500; color: var(--accent);
  text-decoration: none;
}
.fwapp-terug::before { content: "\2190\00a0"; }
.fwapp-terug:hover { text-decoration: underline; }
.fwapp-kring {
  font-size: var(--tekst-xs); color: var(--ink-2);
  letter-spacing: var(--spatie-label); text-transform: uppercase;
  border: var(--lijn-dun) solid var(--lijn-2); border-radius: var(--radius-rond);
  padding: 0.15em 0.7em; white-space: nowrap;
}
.fwapp-nav-bij { font-size: var(--tekst-xs); color: var(--ink-3); margin-left: auto; }
.fw-plek--uit { color: var(--ink-3); }
.fw-plek--uit:hover { background: none; color: var(--ink-3); }
.fwapp-sub {
  display: flex; gap: var(--ruimte-2) var(--ruimte-4); flex-wrap: wrap;
  padding-block: var(--ruimte-2);
}
.fwapp-sub a {
  font-size: var(--tekst-s); color: var(--ink-2); text-decoration: none;
  border-bottom: var(--lijn-dun) solid transparent;
}
.fwapp-sub a:hover { color: var(--ink-1); border-bottom-color: var(--lijn-3); }
.fwapp-sub a[aria-current="page"] { color: var(--ink-1); font-weight: 600; border-bottom-color: var(--accent); }

/* deelnemerpad: kleine uitstap die alleen in dit prototype bestaat */
.fwapp-uitstap {
  width: 100%; max-width: var(--kolom-max); margin-inline: auto;
  padding-block: var(--ruimte-2); padding-inline: var(--goot);
  font-size: var(--tekst-xs); color: var(--ink-3);
}
.fwapp-uitstap a { color: var(--ink-2); }
@media print { .fwapp-nav, .fwapp-uitstap { display: none !important; } }


/* --------------------------------------------------------------------------
   Merkbestanden — verbatim uit gedeeld/, nooit natekenen of inline kopiëren.
   De kleuren van het logo blijven wat ze zijn (donkerblauw + geel); in donkere
   modus staat er een lichte plaat ónder het logo, het logo zelf wijzigt niet.
   -------------------------------------------------------------------------- */
.fw-logo { display: block; width: auto; max-width: 100%; }
.fw-logo--kop { height: 3.25rem; aspect-ratio: 1 / 1; }
.fw-logo--eind { height: 4rem; aspect-ratio: 1 / 1; margin-inline: auto; }
.fw-merk { display: block; width: auto; height: 1.5rem; aspect-ratio: 960 / 1070; flex: none; }
.fw-merk--klein { height: 1.35rem; }
.fw-merkplaat {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-2); padding: 0.1rem 0.25rem; flex: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fw-merkplaat { background: #f2f4ef; }
}
:root[data-theme="dark"] .fw-merkplaat { background: #f2f4ef; }
@media print { .fw-merkplaat { background: none; } }

/* taalschakelaar NL | EN (fase 2e) */
.fwapp-taal { display: inline-flex; align-items: baseline; gap: var(--ruimte-1);
  font-size: var(--tekst-xs); letter-spacing: var(--spatie-label); color: var(--ink-3); }
.fwapp-taal a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--lijn-2); }
.fwapp-taal a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.fwapp-taal [aria-current="true"] { color: var(--ink-1); font-weight: 500; }
@media print { .fwapp-taal { display: none !important; } }

/* --------------------------------------------------------------------------
   Lijn met drie merktekens (Lezen, brief stap 11a; naar het prototype lezen-publiek,
   l2g-lijn). Van 0 tot 100 in procent: elke positie is left in procent, nergens een vaste
   breedte. Gasten zelf en gasten over anderen als cirkel, de leiding als gedraaid vierkant
   iets hoger; een tick draagt zijn label, het streepje is ::before.
   -------------------------------------------------------------------------- */
.fw-lijn { position: relative; height: 3.4rem; margin: var(--ruimte-4) var(--ruimte-4) var(--ruimte-2); }
.fw-lijn-as { position: absolute; left: 0; right: 0; top: 1.6rem; height: 2px; background: var(--grafiek-as); }
.fw-lijn-tick {
  position: absolute; top: 2.2rem; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: var(--tekst-xs); color: var(--ink-3);
}
.fw-lijn-tick::before {
  content: ""; position: absolute; left: 50%; top: -1rem;
  width: 1px; height: 0.8rem; background: var(--grafiek-raster);
}
.fw-lijn-merk {
  position: absolute; top: 1.05rem; width: 1.1rem; height: 1.1rem; transform: translateX(-50%);
  border-radius: var(--radius-rond); border: 2px solid var(--vlak-1); box-shadow: var(--schaduw-1);
}
.fw-lijn-merk[data-wie="leiding"] {
  top: 0.35rem; width: 0.9rem; height: 0.9rem; border-radius: var(--radius-0);
  transform: translateX(-50%) rotate(45deg);
}
.fw-lijn-legenda {
  display: flex; flex-wrap: wrap; gap: var(--ruimte-1) var(--ruimte-4);
  font-size: var(--tekst-xs); color: var(--ink-2);
}
.fw-lijn-legenda > span { display: inline-flex; align-items: center; gap: 0.4em; }
.fw-lijn-legenda [data-wie] { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: var(--radius-rond); }
.fw-lijn-legenda [data-wie="leiding"] { border-radius: var(--radius-0); transform: rotate(45deg); }
.fw-lijn [data-wie="zelf"], .fw-lijn-legenda [data-wie="zelf"] { background: var(--serie-1); }
.fw-lijn [data-wie="anderen"], .fw-lijn-legenda [data-wie="anderen"] { background: var(--serie-2); }
.fw-lijn [data-wie="leiding"], .fw-lijn-legenda [data-wie="leiding"] { background: var(--serie-3); }
/* De zinnen onder de lijn (11a): hoogstens twee, vaste woorden zonder cijfer. */
.fw-zinnen {
  display: flex; flex-direction: column; gap: var(--ruimte-2);
  margin: var(--ruimte-3) 0; max-width: var(--lees-max);
}
.fw-zinnen p {
  margin: 0; font-size: var(--tekst-s); color: var(--ink-1);
  border-left: var(--lijn-dik) solid var(--lijn-3); padding-left: var(--ruimte-3);
}
/* In het kort (11b): de zinnen zoals fw-zinnen, in een lijst zonder nummers; onder elke
   zin klein de verwijzing naar haar cel (fw-cel), een link naar de h2 van die sectie. */
.fw-kort {
  list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--ruimte-2);
  margin: var(--ruimte-3) 0; max-width: var(--lees-max);
}
.fw-kort li { border-left: var(--lijn-dik) solid var(--lijn-3); padding-left: var(--ruimte-3); }
.fw-kort p { margin: 0; font-size: var(--tekst-s); color: var(--ink-1); }
.fw-cel { font-size: var(--tekst-xs); color: var(--ink-3); }
/* Een naam van de tenant kan lang zijn zonder spatie: breken in plaats van scrollen (472 px). */
.fw-naam { overflow-wrap: anywhere; }

/* Richten · Context (V2lite L4): vijf vakken, één waarom-regel, de rest achter het "i" */
.fw-waarom { margin: 0; font-size: var(--tekst-l); font-weight: 600; color: var(--ink-1); line-height: var(--regel-dicht); }
.fw-i > summary { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-rond); border: var(--lijn-dun) solid var(--lijn-2); font-size: var(--tekst-xs); font-style: italic; color: var(--ink-2); cursor: pointer; list-style: none; }
.fw-i > summary::-webkit-details-marker { display: none; }
.fw-i[open] > summary { background: var(--accent-was); border-color: var(--accent-rand); color: var(--accent-diep); }
.fw-vak { display: flex; flex-direction: column; gap: var(--ruimte-3); }
.fw-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); padding-bottom: var(--ruimte-2); border-bottom: var(--lijn-dun) solid var(--lijn-1); }
.fw-label--klaar { color: var(--sem-gunstig); }
.fw-toevoegen > summary { display: inline-block; cursor: pointer; list-style: none; }
.fw-toevoegen[open] > summary { margin-bottom: var(--ruimte-3); }
/* --------------------------------------------------------------------------
   (V2lite L3, L5, L7) De app-eigen n-*-klassen die het ontwerp v10 niet kent. Ze blijven tot
   S2–S5 de schermen herbouwen. n-kern van Na de meting heet n-vastekern (S1).
   -------------------------------------------------------------------------- */
ul.n-chips, ol.n-tijdlijn { list-style: none; margin: 0; padding: 0; }
.n-kort { font-size: var(--tekst-s); color: var(--ink-2); }
.n-raster { display: grid; gap: var(--ruimte-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 52rem) {
  .n-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.n-velden { display: flex; flex-direction: column; gap: var(--ruimte-5); }
.n-wie { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ruimte-3); }
.n-asnaam { max-width: 10rem; }
.n-chip small { color: var(--ink-3); }
.n-chip--voorstel { cursor: pointer; color: var(--accent); }
.n-chip--gekozen, .n-samen .n-chip:hover { border-color: var(--accent); background: var(--accent-was); }
.n-chipknop { border: 0; background: transparent; color: var(--accent); cursor: pointer; padding: 0 0.15rem; font: inherit; }
.n-groot small { font-family: var(--font-sans); font-size: var(--tekst-m); font-weight: 500; color: var(--ink-2); }
.n-waarom > summary { cursor: pointer; font-size: var(--tekst-xs); color: var(--accent); font-weight: 600; }
.n-waarom span { display: block; font-size: var(--tekst-s); color: var(--ink-2); }
.n-details > summary { cursor: pointer; font-weight: 500; }
.n-start { min-height: 3.25rem; font-size: var(--tekst-l); padding-inline: 1.4rem; }
.n-stapel { display: flex; flex-direction: column; gap: var(--ruimte-3); break-inside: avoid; }
.n-printvel { list-style: none; padding: 0; display: grid; gap: var(--ruimte-2); grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
.n-kaartje { background: #ffffff; color: #141815; border: 1px dashed var(--lijn-3); border-radius: var(--radius-1); padding: 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; break-inside: avoid; }
.n-kaartje img { width: 100%; max-width: 7rem; height: auto; }
@media print {
  .fw-kop, .fw-paginakop .fw-knop, .fw-kruimel { display: none !important; }
}
.n-beslis { display: flex; flex-direction: column; gap: var(--ruimte-3); border-top: 4px solid var(--n-goud); padding-top: var(--ruimte-4); }
.n-cijfers { display: flex; flex-wrap: wrap; gap: var(--ruimte-3); align-items: baseline; }
.n-cijfer { font-family: var(--font-serif); font-size: var(--n-groot); line-height: 1; font-weight: 600; }
.n-band { display: inline-flex; gap: 0.35rem; align-items: baseline; padding: 0.15rem 0.6rem; border: 1px solid var(--lijn-2); border-radius: var(--n-radius); background: var(--vlak-1); }
.n-band small { color: var(--ink-2); }
.n-vraag { font-size: var(--tekst-l); font-weight: 600; }
.n-keuzes { display: flex; flex-wrap: wrap; gap: var(--ruimte-3); align-items: start; }
.n-keuze > summary { list-style: none; cursor: pointer; }
.n-keuze[open] { flex-basis: 100%; }
.n-tijd, .n-tijd-lijn { list-style: none; padding: 0; margin: 0; }
.n-tijd { display: flex; flex-direction: column; gap: var(--ruimte-4); }
.n-tijd-naam { font-size: var(--tekst-m); margin-bottom: var(--ruimte-2); }
.n-tijd-lijn { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--ruimte-3); border-top: 3px solid var(--n-goud); }
.n-punt { position: relative; padding-top: var(--ruimte-3); display: flex; flex-direction: column; gap: 0.3rem; }
.n-punt::before { content: ""; position: absolute; top: -0.5rem; left: 0; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--n-goud); border: 2px solid var(--vlak-1); }
.n-punt small { color: var(--ink-2); font-weight: 600; }
.n-geheugen th[scope="row"], .n-geheugen td { vertical-align: top; }
.n-besluit { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); align-items: baseline; padding: 0.5rem 0.6rem; border: 1px solid var(--lijn-1); border-radius: var(--radius-2); }
.n-besluit--laten_vallen .n-soort { color: var(--ink-2); }
.n-vastekern { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); align-items: baseline; }
.n-hulp { font-size: var(--tekst-xs); color: var(--ink-3); }
.n-balk3 > span { display: block; min-width: 3px; }
.n-balk3-l i, .n-drie-l i { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; margin-right: 0.3rem; vertical-align: -0.05rem; }
.n-balk3-l b, .n-drie-l b { color: var(--ink-1); font-variant-numeric: tabular-nums; }
.n-v-ong { background: var(--data-ongunstig); }
.n-v-ongl { background: var(--data-ongunstig-licht); }
.n-v-neu { background: var(--data-neutraal); }
.n-v-gunl { background: var(--data-gunstig-licht); }
.n-v-gun { background: var(--data-gunstig); }
.n-v-leeg { background: var(--vlak-3); }
.n-drie-as { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--lijn-2); border-radius: 2px; }
.n-bol { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.n-bol i, .n-drie-l i { width: var(--n-bol); height: var(--n-bol); border-radius: 50%; border: 3px solid var(--accent); background: var(--vlak-1); display: block; }
.n-drie-l i { display: inline-block; width: 0.8rem; height: 0.8rem; border-width: 2px; }
[data-wie="zelf"] i, i[data-wie="zelf"] { background: var(--accent); }
[data-wie="leiding"] i, i[data-wie="leiding"] { border-radius: 3px; border-color: var(--ink-1); transform: rotate(45deg); }
.n-drie-l { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; font-size: var(--tekst-s); color: var(--ink-2); }
.n-stellingen { display: flex; flex-direction: column; gap: 0; padding-block: 0.4rem; }
.n-stelling { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ruimte-3); padding-block: 0.55rem; border-bottom: 1px solid var(--lijn-1); }
.n-stelling:last-child { border-bottom: 0; }
.n-thema { display: flex; flex-direction: column; gap: 0.3rem; background: var(--vlak-1); border: 1px solid var(--lijn-1); border-radius: var(--n-kaart-radius); padding: 0.8rem 0.9rem; height: 100%; }
.n-thema-naam { font-weight: 600; }
.n-thema-band { font-family: var(--font-serif); font-size: var(--tekst-l); }
.n-ladder .n-kaart { display: flex; flex-direction: column; gap: 0.7rem; }
.n-trede[data-niveau="groep"] { padding-left: var(--ruimte-4); }
.n-trede[data-niveau="subgroep"] { padding-left: calc(2 * var(--ruimte-4)); }
.n-trede-n { font-size: var(--tekst-s); color: var(--ink-2); }
.n-trede-niet { font-size: var(--tekst-s); color: var(--ink-3); background: var(--onder-vloer-vlak); border-radius: var(--radius-1); padding: 0.1rem 0.4rem; justify-self: start; }
.n-laden { font-size: var(--tekst-s); color: var(--ink-3); }
.n-comp-kop form { margin: 0; }
.n-ai { font-family: var(--font-mono); font-size: var(--tekst-xs); font-weight: 600; color: var(--accent); border: 1px solid var(--lijn-2); border-radius: var(--radius-1); padding: 0 0.3rem; background: var(--vlak-2); }
.n-eerste { font-size: var(--tekst-s); color: var(--ink-2); margin-block: 0.4rem 0.8rem; }
details.n-waarom ul { margin: 0.4rem 0 0; padding-left: 1rem; font-size: var(--tekst-xs); color: var(--ink-2); }
details.n-niet, details.n-alles, details.n-uitklap { border-top: 1px solid var(--lijn-1); padding-top: var(--ruimte-3); margin-top: var(--ruimte-3); }
details.n-niet > summary, details.n-alles > summary, details.n-uitklap > summary { cursor: pointer; font-weight: 600; }
.n-arcering { display: inline-block; width: 1.2rem; height: 0.7rem; background: var(--onder-vloer-vlak); border: 1px solid var(--lijn-2); vertical-align: middle; margin-right: 0.4rem; border-radius: 2px; }

/* --------------------------------------------------------------------------
   (V2lite S1) De v10-laag: de regels van ontwerp V2lite v10 (O:455-909), letterlijk overgenomen.
   Bij een botsing met een oudere app-regel geldt deze waarde; die oudere regel is weg. Niet
   overgenomen: de prototype-.n-band (de app-n-band is het aantal-chip van de lus) en de oude
   .n-punt (O:730-739). Prototype-klassen vertaald: .knop → .fw-knop, .invoer → .fw-invoer,
   .ai → .fw-aimerk. Tokens --n-* staan in tokens.css. @container leunt op main.fw-breedte.
   -------------------------------------------------------------------------- */
main.fw-breedte { container-type: inline-size; }
.n-stappen { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; max-width: 90rem; margin-inline: auto; padding-bottom: .7rem; }
.n-stap { flex: none; display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--lijn-2); background: var(--vlak-1); color: var(--ink-2); border-radius: var(--radius-rond); padding: .35rem .85rem; font-size: var(--tekst-s); font-weight: 500; cursor: pointer; }
.n-stap i { font-style: normal; font-family: var(--font-mono); font-size: var(--tekst-xs); width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--vlak-3); display: inline-flex; align-items: center; justify-content: center; }
.n-stap[aria-current="step"] { background: var(--vlak-omkeer); color: var(--ink-omkeer); border-color: var(--vlak-omkeer); }
.n-stap[aria-current="step"] i { background: var(--n-goud); color: #1A1A3E; }
.n-romp { max-width: 66rem; margin-inline: auto; padding: 2rem 1.25rem 3rem; display: flex; flex-direction: column; gap: var(--n-ruimte); }
.n-kop { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.n-kop h1 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); font-variation-settings: "SOFT" 30, "WONK" 0; font-weight: 600; letter-spacing: -.02em; }
.n-sectie { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.n-sectie h2 { font-size: var(--tekst-xl); font-weight: 600; letter-spacing: -.01em; }
.n-sectie .fw-knop--tertiair { margin-left: auto; font-size: var(--tekst-s); }
.n-sectie--in { margin-top: 0; }
.n-sectie--sub h3 { font-size: var(--tekst-l); }  /* (J1) een tussenkop onder een h2, zoals "Eerder gepubliceerd" */
.n-h { font-size: var(--tekst-l); }
.n-kaart { background: var(--vlak-1); border: 1px solid var(--n-rand); border-radius: var(--n-radius); padding: 1.25rem; }
.n-groot { font-family: var(--font-serif); font-size: var(--n-groot); line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; }
.n-mega small { font-family: var(--font-sans); font-size: var(--tekst-m); font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.n-mega { font-family: var(--font-serif); font-size: var(--n-mega); line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.03em; }
.n-accent { color: var(--accent); }
.n-badge { font-size: var(--tekst-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--spatie-label); background: var(--n-goud-zacht); color: var(--ink-1); border-radius: var(--radius-rond); padding: .15rem .6rem; }
.n-status { font-size: var(--tekst-s); color: var(--accent); min-height: 1.2em; margin-top: -.75rem; }
.n-ico { display: inline-flex; width: 1.25rem; height: 1.25rem; color: var(--ink-2); flex: none; }
.n-ico svg, .n-chip svg, .fw-knop svg, .n-toevoegen svg, .n-seg svg, .n-ok svg, .n-label-ico svg { width: 100%; height: 100%; }
.fw-knop svg { width: 1.05rem; height: 1.05rem; }
.n-ok { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--tekst-xs); color: var(--accent); white-space: nowrap; }
.n-ok svg { width: .95rem; height: .95rem; }
details.n-i { position: relative; display: inline-block; }
details.n-i > summary { list-style: none; cursor: pointer; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1px solid var(--lijn-3); color: var(--ink-2); font-family: var(--font-serif); font-style: italic; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; }
details.n-i > summary::-webkit-details-marker { display: none; }
details.n-i[open] > summary { background: var(--vlak-omkeer); color: var(--ink-omkeer); border-color: var(--vlak-omkeer); }
details.n-i > :not(summary) { position: absolute; z-index: 20; top: calc(100% + .4rem); left: -.5rem; width: min(20rem, 80vw); background: var(--vlak-1); border: 1px solid var(--lijn-2); border-radius: 10px; padding: .75rem .85rem; box-shadow: var(--schaduw-2); }
details.n-i--tekst > summary { width: auto; height: auto; border: 0; font-family: var(--font-sans); font-style: normal; font-size: var(--tekst-s); color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
details.n-i--tekst[open] > summary { background: transparent; color: var(--accent); }
details.n-i--tekst > :not(summary) { position: static; width: auto; box-shadow: none; margin-top: .5rem; }
details.n-waarom > summary { list-style: none; cursor: pointer; font-size: var(--tekst-xs); color: var(--accent); font-weight: 600; display: inline-flex; gap: .25rem; align-items: center; }
details.n-waarom > summary::-webkit-details-marker { display: none; }
details.n-waarom > summary::after { content: "▾"; font-size: .7em; }
details.n-waarom[open] > summary::after { content: "▴"; }
details.n-waarom > div { margin-top: .4rem; font-size: var(--tekst-s); color: var(--ink-2); display: flex; flex-direction: column; gap: .3rem; }
details.n-meer-klein > summary { cursor: pointer; font-size: var(--tekst-s); color: var(--ink-2); font-weight: 500; list-style: none; display: inline-flex; gap: .4rem; align-items: center; }
details.n-meer-klein > summary::-webkit-details-marker { display: none; }
details.n-meer-klein > summary::before { content: "+"; font-family: var(--font-mono); color: var(--ink-3); }
details.n-meer-klein[open] > summary::before { content: "−"; }
details.n-meer-klein > :not(summary) { margin-top: .6rem; }
.n-bron { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--tekst-xs); color: var(--ink-2); background: var(--vlak-2); border: 1px solid var(--lijn-1); border-radius: var(--radius-rond); padding: .1rem .55rem; }
.n-bron svg { width: .85rem; height: .85rem; }
.n-twijfel { font-size: var(--tekst-xs); color: var(--ink-1); background: var(--n-goud-zacht); border-radius: 6px; padding: .25rem .5rem; }
.n-q { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--n-goud); color: #1A1A3E; font-size: .7rem; font-weight: 700; }
.n-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.n-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--lijn-2); border-radius: var(--radius-rond); padding: .3rem .75rem; font-size: var(--tekst-s); background: var(--vlak-1); }
.n-chip svg { width: .95rem; height: .95rem; }
.n-chip--vast { background: var(--vlak-2); color: var(--ink-2); }
.n-switch { position: relative; display: inline-flex; width: 2.4rem; height: 1.4rem; flex: none; cursor: pointer; }
.n-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.n-switch span { position: absolute; inset: 0; background: var(--lijn-3); border-radius: var(--radius-rond); transition: background var(--duur-1); }
.n-switch span::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; transition: transform var(--duur-1) var(--soepel); }
.n-switch input:checked + span { background: var(--accent); }
.n-switch input:checked + span::after { transform: translateX(1rem); }
.n-switch input:focus-visible + span { box-shadow: var(--focus-ring); }
.n-lijst { display: flex; flex-direction: column; gap: .4rem; }
.n-rij { display: flex; align-items: center; gap: .75rem; background: var(--vlak-1); border: 1px solid var(--n-rand); border-radius: 12px; padding: .7rem .9rem; flex-wrap: wrap; }
.n-rij-t { flex: 1; min-width: 10rem; font-weight: 500; }
.n-rij .fw-knop { min-height: 2.1rem; padding: .3rem .8rem; font-size: var(--tekst-s); }
.n-toevoegen { align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; border: 1px dashed var(--lijn-3); background: transparent; color: var(--ink-2); border-radius: var(--radius-rond); padding: .4rem .9rem; font-size: var(--tekst-s); cursor: pointer; }
.n-toevoegen svg { width: 1rem; height: 1rem; }
.n-toevoegen:hover { border-color: var(--accent); color: var(--accent); }
.n-pil { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--tekst-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--spatie-label); border-radius: var(--radius-rond); padding: .25rem .7rem; background: var(--vlak-3); color: var(--ink-2); }
.n-pil i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ink-3); }
.n-pil--open { background: var(--accent-was); color: var(--accent-diep); }
.n-pil--open i { background: var(--accent); }
.n-held { display: flex; flex-direction: column; gap: 1.25rem; padding-top: 1rem; }
.n-held h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem); font-weight: 600; letter-spacing: -.03em; font-variation-settings: "SOFT" 50, "WONK" 1; max-width: 16ch; }
.n-van-naar { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.n-van-naar div { display: flex; flex-direction: column; gap: .25rem; }
.n-van-naar span:not(.n-groot) { font-size: var(--tekst-s); color: var(--ink-2); }
.n-van-naar .n-groot { font-size: var(--n-mega); }
.n-pijl { width: 2rem; height: 2rem; color: var(--ink-3); }
.n-flow { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); }
.n-flowkaart { text-align: left; display: flex; flex-direction: column; gap: .5rem; background: var(--vlak-1); border: 1px solid var(--n-rand); border-radius: var(--n-radius); padding: 1rem; cursor: pointer; color: var(--ink-1); position: relative; }
.n-flowkaart:hover { border-color: var(--accent); }
.n-flowkaart .n-ico { width: 1.75rem; height: 1.75rem; color: var(--accent); }
.n-flowkaart b { font-family: var(--font-serif); font-size: var(--tekst-l); font-weight: 600; }
.n-flowkaart span.wie { font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: var(--spatie-label); color: var(--ink-3); font-weight: 600; }
.n-flowkaart small { font-size: var(--tekst-s); color: var(--ink-2); }
.n-flowkaart .nr { position: absolute; top: .8rem; right: .9rem; font-family: var(--font-mono); font-size: var(--tekst-xs); color: var(--ink-3); }
details.n-meer > summary { cursor: pointer; font-weight: 600; list-style: none; display: inline-flex; gap: .5rem; align-items: center; color: var(--ink-2); }
details.n-meer > summary::-webkit-details-marker { display: none; }
details.n-meer > summary::before { content: "+"; font-family: var(--font-mono); }
details.n-meer[open] > summary::before { content: "−"; }
.n-meer-in { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
/* (S7-A) een rij velden met hun knop: het label staat boven het veld, de knop op één lijn met het veld (nooit met
   een hulptekst: die staat als eigen regel onder de hele rij, .n-formrij > .fw-hulp). --een: één veld + knop, ook smal naast elkaar. */
.n-formrij { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); align-items: end; }
.n-formrij > .fw-hulp { grid-column: 1 / -1; margin: 0; }
.n-formrij .fw-invoer, .n-formrij > .fw-knop, .n-veldrij .fw-invoer, .n-veldrij > .fw-knop { min-height: 2.75rem; }
.n-formrij > .fw-knop { width: 100%; }
.n-formrij--een { grid-template-columns: minmax(0, 1fr) auto; }
.n-formrij--een > .fw-knop { width: auto; }
@container (min-width: 46rem) {
  .n-formrij--twee { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .n-formrij--twee > .fw-knop { width: auto; }
}
.n-veldrij { display: flex; gap: .5rem; align-items: stretch; min-width: 0; }
.n-veldrij > .fw-invoer { flex: 1; min-width: 0; }
.n-veldrij > .fw-knop { flex: none; }
.n-tegels4 { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 46rem) {
  .n-tegels4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.n-tegel { position: relative; background: var(--vlak-1); border: 1px solid var(--n-rand); border-radius: var(--n-radius); padding: 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.n-tegel > span:not(.n-groot) { font-size: var(--tekst-s); color: var(--ink-2); }
.n-tegel details.n-i { position: absolute; top: .8rem; right: .8rem; }
.n-tegel details.n-i > :not(summary) { left: auto; right: -.5rem; }
.n-ctx { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 44rem) {
  .n-ctx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-ctx .breed { grid-column: 1 / -1; }
}
.n-vak { background: var(--vlak-1); border: 1px solid var(--n-rand); border-radius: var(--n-radius); padding: 1.1rem; display: flex; flex-direction: column; gap: .75rem; }
.n-vak.breed { border-color: var(--accent-rand); }
.n-vak-kop { display: flex; align-items: center; gap: .6rem; }
.n-vak-kop .n-ico { width: 1.6rem; height: 1.6rem; color: var(--accent); }
.n-vak-kop b { font-weight: 600; flex: 1; }
.n-drop { border: 1.5px dashed var(--lijn-3); border-radius: 12px; padding: 1.1rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; color: var(--ink-2); font-size: var(--tekst-s); }
.n-drop .n-ico { width: 1.8rem; height: 1.8rem; }
.n-bestand { display: flex; align-items: center; gap: .6rem; background: var(--vlak-2); border-radius: 10px; padding: .6rem .75rem; flex-wrap: wrap; }
.n-bestand b { flex: 1; min-width: 8rem; font-weight: 500; word-break: break-word; font-size: var(--tekst-s); }
.n-icoknop { border: 0; background: transparent; color: var(--ink-3); width: 2rem; height: 2rem; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.n-icoknop:hover { background: var(--vlak-3); color: var(--ink-1); }
.n-icoknop svg { width: 1.1rem; height: 1.1rem; }
.n-form { display: flex; flex-direction: column; gap: 1.5rem; }
.n-label { font-family: var(--font-serif); font-size: var(--tekst-l); font-weight: 600; }
.n-label small { font-family: var(--font-sans); font-weight: 400; font-size: var(--tekst-xs); color: var(--ink-3); margin-left: .3rem; }
.n-zin { font-size: var(--tekst-l); border-radius: 12px; padding: .75rem .9rem; }
.n-groepen { display: flex; flex-direction: column; gap: .5rem; }
.n-groep { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem 5rem 2rem; gap: .5rem; align-items: center; background: var(--vlak-1); border: 1px solid var(--n-rand); border-radius: 12px; padding: .5rem .6rem; }
.n-groep.een { grid-template-columns: minmax(0, 1fr) 5.5rem 5rem; }
.n-groep .fw-invoer { min-height: 2.3rem; padding: .35rem .55rem; }
.n-groep .n-naam { font-weight: 500; }
.n-groep .n-eenheid { position: relative; }
.n-groep .n-eenheid::after { content: attr(data-eenheid); position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); font-size: var(--tekst-xs); color: var(--ink-3); pointer-events: none; }
.n-groep .n-eenheid .fw-invoer { padding-right: 1.6rem; }
.n-groep-kop { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem 5rem 2rem; gap: .5rem; font-size: var(--tekst-xs); color: var(--ink-3); padding-inline: .6rem; }
.n-groep-kop.een { grid-template-columns: minmax(0, 1fr) 5.5rem 5rem; }
.n-seg { display: inline-flex; border: 1px solid var(--lijn-2); border-radius: var(--radius-rond); overflow: hidden; align-self: flex-start; }
.n-seg label { cursor: pointer; }
.n-seg input { position: absolute; opacity: 0; }
.n-seg span { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .85rem; font-size: var(--tekst-s); color: var(--ink-2); }
.n-seg svg { width: 1rem; height: 1rem; }
.n-seg input:checked + span { background: var(--vlak-omkeer); color: var(--ink-omkeer); }
.n-seg input:focus-visible + span { box-shadow: var(--focus-ring); }
.n-prognose { display: flex; flex-wrap: wrap; gap: .4rem; }
.n-prog { display: inline-flex; align-items: center; gap: .4rem; border-radius: var(--radius-rond); padding: .3rem .75rem; font-size: var(--tekst-s); background: var(--accent-was); color: var(--accent-diep); }
.n-prog svg { width: .95rem; height: .95rem; }
.n-prog--samen { background: var(--vlak-3); color: var(--ink-2); }
.n-prog--mde { background: var(--n-goud-zacht); color: var(--ink-1); }
.n-schuif { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; }
.n-schuif input { width: 100%; accent-color: var(--accent); }
.n-schuif[data-leeg] input { opacity: .5; }  /* (H5, P2-10) nog niet gekozen */
.n-schuif[data-leeg] output { color: var(--ink-3); }
.n-voorstel { background: var(--vlak-1); border: 1px solid var(--lijn-2); border-radius: var(--n-radius); padding: 1.25rem; display: flex; flex-direction: column; gap: 1.1rem; }
.n-voorstel-kop { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.n-voorstel-kop h2 { font-size: var(--tekst-xl); font-weight: 600; margin-right: .25rem; }
.n-voorstel-kop .fw-knop--tertiair { margin-left: auto; font-size: var(--tekst-s); }
.n-voorstel-kop details.n-i > :not(summary) { left: auto; right: -4rem; }
.n-bronnen { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.n-blok { display: flex; flex-direction: column; gap: .5rem; }
.n-blok h3 { font-family: var(--font-sans); font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: var(--spatie-label); color: var(--ink-3); font-weight: 600; display: flex; gap: .5rem; }
.n-teller { font-family: var(--font-mono); color: var(--ink-2); }
.n-vinken { display: flex; flex-direction: column; gap: .4rem; }
.n-vink { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .7rem; align-items: start; border: 1px solid var(--n-rand); border-radius: 12px; padding: .65rem .75rem; background: var(--vlak-1); }
.n-vink:has(input:checked) { border-color: var(--accent-rand); background: var(--accent-was); }
.n-vink input { margin: .2rem 0 0; width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.n-vink-t { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.n-vink-r { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.n-startbalk { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--lijn-1); padding-top: 1rem; }
.n-ring { display: flex; align-items: center; gap: 1rem; }
.n-ring svg { width: 4.5rem; height: 4.5rem; }
.n-ring span { font-weight: 500; }
.n-inv-midden { justify-content: center; gap: 1.75rem; }
.n-inv-titel { font-size: clamp(2rem, 1.6rem + 2vw, 2.6rem) !important; letter-spacing: -.02em; }
.n-belofte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; font-size: var(--tekst-l); }
.n-belofte li { display: flex; align-items: center; gap: .75rem; }
.n-belofte .n-ico { width: 2.2rem; height: 2.2rem; padding: .45rem; border-radius: 50%; background: var(--accent-was); color: var(--accent); }
.n-inv-voet { border-top: 0; background: transparent; justify-content: space-between; }
.n-inv-boven { display: flex; align-items: center; gap: .75rem; padding: 1rem 1rem 0; }
.n-terug { border: 0; background: transparent; font-size: 1.8rem; line-height: 1; color: var(--ink-2); cursor: pointer; width: 2rem; height: 2rem; border-radius: 50%; }
.n-terug:hover { background: var(--vlak-2); }
.n-dots { display: flex; gap: .3rem; flex: 1; }
.n-dots span { flex: 1; height: .3rem; border-radius: var(--radius-rond); background: var(--vlak-3); }
.n-dots span.aan { background: var(--accent); }
.n-teller-inv { font-size: var(--tekst-s); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.n-inv-vraag { justify-content: center; gap: 1.5rem; }
.n-inv-vraag h1 { font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.1rem) !important; line-height: 1.25; }
.n-woorden { display: flex; flex-direction: column; gap: .45rem; }
.n-klaar { align-items: center; text-align: center; }
.n-kerncijfers { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 48rem) {
  .n-kerncijfers { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .n-kern--breed:last-child { grid-column: 1 / -1; }
}
.n-kern { display: flex; flex-direction: column; gap: .7rem; }
.n-kern-l { font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: var(--spatie-label); color: var(--ink-3); font-weight: 600; }
.n-kern-l small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: .35rem; }
.n-balk3 { display: flex; height: 1rem; border-radius: var(--radius-rond); overflow: hidden; gap: 3px; }
.n-balk3 span { display: block; }
.n-balk3-l { display: flex; gap: 3px; font-size: var(--tekst-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.n-balk3-l span { min-width: 0; }
.n-drie { position: relative; height: 5.2rem; margin: .25rem .6rem 0; }
.n-drie .as { position: absolute; left: 0; right: 0; top: 2.2rem; height: 2px; background: var(--lijn-2); border-radius: 2px; display: block; }
.n-drie .tick { position: absolute; top: 3rem; font-size: var(--tekst-xs); color: var(--ink-3); transform: translateX(-50%); }
.n-drie .bol { position: absolute; top: 2.2rem; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.n-drie .bol i { width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 3px solid var(--accent); background: var(--vlak-1); display: block; }
.n-drie .bol.vol i { background: var(--accent); }
.n-drie .bol.ruit i { border-radius: 4px; transform: rotate(45deg); border-color: var(--ink-1); width: 1.05rem; height: 1.05rem; }
.n-drie .bol b { position: absolute; bottom: 1.1rem; font-family: var(--font-serif); font-size: var(--tekst-xl); white-space: nowrap; font-variant-numeric: tabular-nums; }
.n-drie .bol span { position: absolute; top: 1.1rem; font-size: var(--tekst-xs); color: var(--ink-2); white-space: nowrap; }
.n-uitleg { display: flex; flex-direction: column; gap: .75rem; background: var(--n-goud-zacht); border-radius: calc(var(--n-radius) + 4px); padding: 1.1rem; }
.n-uitleg .n-sectie { margin-top: 0; }
/* (B3) het menu van de groepen: één chip per groep met eigen cijfers, de gekozen met accentrand (aria-current) */
ul.n-uitleg-keuze { list-style: none; margin: 0; padding: 0; }
.n-uitleg-keuze a.n-chip { color: var(--ink-1); text-decoration: none; }
.n-uitleg-keuze a.n-chip:hover { border-color: var(--accent); }
.n-uitleg-keuze a.n-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.n-uitleg-keuze a[aria-current="true"] { font-weight: 600; background: var(--vlak-omkeer); color: var(--ink-omkeer); border-color: var(--vlak-omkeer); }
.n-uitleg-keuze a[aria-current="true"] small { color: inherit; }
.n-uitleg-raster { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 48rem) {
  .n-uitleg-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.n-comp { background: var(--vlak-1); border: 1px solid var(--n-rand); border-radius: var(--n-radius); padding: 1rem; display: flex; flex-direction: column; gap: .6rem; animation: n-in .35s var(--soepel) both; }
.n-comp-kop { display: flex; align-items: flex-start; gap: .5rem; }
.n-comp-kop b { flex: 1; font-family: var(--font-serif); font-size: var(--tekst-l); font-weight: 600; line-height: 1.3; }
.n-comp-soort { font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: var(--spatie-label); color: var(--ink-3); font-weight: 600; display: flex; gap: .4rem; align-items: center; }
@keyframes n-in { from { opacity: .001; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.n-mini-balken { display: flex; flex-direction: column; gap: .45rem; }
.n-mini-balk { display: grid; grid-template-columns: minmax(5rem, 9rem) minmax(0, 1fr) 3rem; gap: .5rem; align-items: center; font-size: var(--tekst-s); }
.n-mini-balk .spoor-b { height: .7rem; background: var(--vlak-3); border-radius: var(--radius-rond); overflow: hidden; }
.n-mini-balk .spoor-b span { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-rond); }
.n-mini-balk b { text-align: right; font-variant-numeric: tabular-nums; }
.n-labels { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.n-labelkaart { position: relative; background: var(--vlak-1); border: 1px solid var(--n-rand); border-radius: var(--n-radius); padding: .9rem; display: flex; flex-direction: column; gap: .45rem; }
.n-label-ico { width: 1.6rem; height: 1.6rem; color: var(--accent); }
.n-labelkaart .n-groot { font-size: 1.9rem; }
.n-labelkaart .naam { font-weight: 500; font-size: var(--tekst-s); }
/* (J2, punt 7) het verloop van een label: een stille chip onder de naam, geen knop en geen oordeel (neutraal vlak) */
.n-labelkaart .n-verloop { align-self: flex-start; max-width: 100%; border: 1px solid var(--lijn-2); border-radius: var(--radius-2); padding: .1rem .55rem; font-size: var(--tekst-xs); line-height: 1.4; color: var(--ink-2); background: var(--vlak-2); overflow-wrap: break-word; }
.n-houding { display: flex; height: .4rem; border-radius: var(--radius-rond); overflow: hidden; gap: 2px; }
.n-houding span { display: block; }
.n-labelkaart .n-hoek { position: absolute; top: .65rem; right: .65rem; display: flex; gap: .2rem; align-items: center; }
.n-labelkaart .n-hoek details.n-i > :not(summary) { left: auto; right: -.4rem; }
.n-themas { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.n-themakaart { background: var(--vlak-1); border: 1px solid var(--n-rand); border-radius: var(--n-radius); padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.n-themakaart .kop { display: flex; gap: .6rem; align-items: center; }
.n-themakaart .kop b { flex: 1; font-weight: 600; line-height: 1.3; }
.n-themakaart .n-label-ico { background: var(--n-goud-zacht); border-radius: 10px; padding: .3rem; width: 2.2rem; height: 2.2rem; }
.n-themakaart .rij2 { display: flex; align-items: center; gap: .75rem; }
.n-themakaart .knoppen { display: flex; gap: .4rem; }
.n-themakaart .knoppen .fw-knop { min-height: 2.1rem; padding: .3rem .8rem; font-size: var(--tekst-s); }
/* (G1) Opnemen of niet nu onder een themakaart: de naam als klein veld, twee knoppen, de staat en de zin na een klik */
.n-opname { display: flex; flex-direction: column; gap: .5rem; border-top: 1px solid var(--n-rand); padding-top: .75rem; margin-top: auto; }
.n-opname-form { display: flex; flex-direction: column; gap: .4rem; }
.n-opname-l { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: var(--tekst-s); color: var(--ink-2); font-weight: 500; }
.n-opname-l .n-ai { font-family: var(--font-sans); font-weight: 400; color: var(--ink-2); padding: .05rem .4rem; white-space: nowrap; }
.n-opname-l .n-ai b { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
.n-opname .fw-invoer { font-size: var(--tekst-s); padding: .35rem .6rem; min-height: 2.1rem; }
.n-opname .knoppen { display: flex; flex-wrap: wrap; gap: .4rem; }
.n-opname .fw-knop { min-height: 2.1rem; padding: .3rem .8rem; font-size: var(--tekst-s); }
.n-opname-staat { display: flex; align-items: flex-start; gap: .4rem; font-size: var(--tekst-s); }
.n-opname-staat .n-ico { width: 1.1rem; height: 1.1rem; color: var(--sem-gunstig); flex: none; margin-top: .1rem; }
.n-opname-zin { font-size: var(--tekst-s); background: var(--accent-was); border-radius: var(--radius-2); padding: .4rem .6rem; }
.n-niet-nu { margin-top: .75rem; }
.n-voorstel-lijst { display: flex; flex-direction: column; gap: .5rem; }
.n-niet-nu > .n-themas { margin-top: .6rem; }
.n-kies .n-eigen-label { font-size: var(--tekst-xs); color: var(--ink-2); font-weight: 500; margin-left: .3rem; }
/* (J-P1-8) een eigen label dat al meemeet: aan en vast, met de meting waarin het voor het eerst meeging */
.n-kies--vast { cursor: default; max-width: 100%; }
.n-kies.n-kies--vast span { white-space: normal; flex-wrap: wrap; row-gap: .1rem; }
.n-kies .n-mee { font-size: var(--tekst-xs); font-weight: 400; margin-left: .3rem; }
.n-leeg { display: flex; align-items: center; gap: .75rem; color: var(--ink-2); background: var(--vlak-1); border: 1px dashed var(--lijn-2); border-radius: var(--n-radius); padding: 1rem; }
.n-leeg .n-ico { width: 1.8rem; height: 1.8rem; }
.n-st { display: grid; grid-template-columns: minmax(0, 1fr) 4rem; gap: .35rem 1rem; align-items: center; padding-block: .6rem; border-bottom: 1px solid var(--lijn-1); }
.n-st:last-child { border-bottom: 0; }
.n-st p { font-size: var(--tekst-m); }
.n-st .n-groot { font-size: 1.6rem; text-align: right; }
.n-st .n-balk3 { grid-column: 1 / -1; height: .6rem; }
.n-groepvgl { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.n-groepvgl .n-kaart { display: flex; flex-direction: column; gap: .4rem; }
.n-groepvgl .n-kaart span { font-size: var(--tekst-s); color: var(--ink-2); }
.n-niet > summary .n-ico { width: 1rem; height: 1rem; }
.n-beslissing { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: center; background: var(--vlak-1); border: 1px solid var(--n-rand); border-radius: 12px; padding: .5rem .6rem; }
@container (max-width: 34rem) {
  .n-beslissing { grid-template-columns: minmax(0, 1fr); }
}
.n-kanban { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 48rem) {
  .n-kanban { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.n-kolom { display: flex; flex-direction: column; gap: .5rem; }
.n-kolom h3 { font-family: var(--font-sans); font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: var(--spatie-label); font-weight: 700; display: flex; align-items: center; gap: .4rem; }
.n-kolom h3 i { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }
.n-tijdlijn { position: relative; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); padding-top: .5rem; }
@container (min-width: 48rem) {
  .n-tijdlijn { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .n-tijdlijn::before { content: ""; position: absolute; left: 1rem; right: 1rem; top: 1.15rem; height: 2px; background: var(--lijn-2); }
}
.n-comp .rij .n-houding, .n-comp .rij2 .n-houding { flex: 1; min-width: 6rem; max-width: 14rem; height: .55rem; }
.n-drie { height: 5.8rem; }
.n-drie .tick { top: 4.4rem; }
.n-balk3-l span { white-space: nowrap; font-size: .7rem; }
.n-lagen { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem .75rem; align-items: center; }
.n-laag { font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: var(--spatie-label); color: var(--ink-3); font-weight: 600; }
.n-kies { cursor: pointer; }
.n-kies input { position: absolute; opacity: 0; }
.n-kies span { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--lijn-2); border-radius: var(--radius-rond); padding: .35rem .85rem; font-size: var(--tekst-s); background: var(--vlak-1); color: var(--ink-2); }
.n-kies span svg { width: 1rem; height: 1rem; }
.n-kies input:checked + span { background: var(--vlak-omkeer); color: var(--ink-omkeer); border-color: var(--vlak-omkeer); }
.n-kies input:focus-visible + span { box-shadow: var(--focus-ring); }
.n-sub { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--tekst-s); }
.n-sub .n-ico { width: 1rem; height: 1rem; }
.n-tikken { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
.n-tik { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 8rem; border: 1px solid var(--lijn-2); border-radius: 18px; background: var(--vlak-1); color: var(--ink-1); font-size: var(--tekst-l); font-family: var(--font-serif); cursor: pointer; }
.n-tik .n-ico { width: 2.6rem; height: 2.6rem; color: var(--accent); }
.n-tik:hover { border-color: var(--accent); }
.n-badge svg { width: .85rem; height: .85rem; vertical-align: -2px; }
.n-wiegroep { display: flex; flex-direction: column; gap: .5rem; }
.n-wiegroep h3 { font-family: var(--font-sans); font-size: var(--tekst-s); font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.n-wiegroep h3 .n-ico { width: 1.1rem; height: 1.1rem; color: var(--accent); }
.n-samen { border-style: dashed; }
.n-ladder { display: flex; flex-direction: column; gap: .15rem; padding: .75rem 1rem; }
.n-trede { display: grid; grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr) 3.2rem; gap: .75rem; align-items: center; padding-block: .45rem; }
.n-trede b { text-align: right; font-variant-numeric: tabular-nums; }
.n-trede .spoor-b { height: .7rem; background: var(--vlak-3); border-radius: var(--radius-rond); overflow: hidden; }
.n-trede .spoor-b span { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-rond); }
.n-trede-naam { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.n-trede-naam .n-ico { width: 1rem; height: 1rem; }
.n-trede--1 { border-bottom: 1px solid var(--lijn-1); font-weight: 600; }
.n-trede--1 .spoor-b span { background: var(--ink-1); }
.n-trede--2 { padding-left: 1rem; font-weight: 500; }
.n-trede--3 { padding-left: 2.2rem; font-size: var(--tekst-s); color: var(--ink-2); position: relative; }
.n-trede--3::before { content: ""; position: absolute; left: 1.4rem; top: 0; bottom: 50%; width: .5rem; border-left: 1px solid var(--lijn-3); border-bottom: 1px solid var(--lijn-3); }
.n-trede--3 .spoor-b span { background: var(--accent-rand); }
.n-trede--weg { color: var(--ink-3); }
.n-trede-weg { grid-column: 2 / -1; display: inline-flex; align-items: center; gap: .35rem; font-size: var(--tekst-xs); color: var(--ink-3); }
.n-trede-weg svg { width: .9rem; height: .9rem; }
/* (evaluatie 27/10) de i bij "Niet apart getoond" staat rechts in de rij: de uitleg opent naar links, binnen het scherm */
.n-trede-weg details.n-i > :not(summary) { left: auto; right: -.5rem; font-size: var(--tekst-s); color: var(--ink-1); }
@container (max-width: 30rem) {
  .n-trede { grid-template-columns: minmax(0, 1fr) 3rem; }
  .n-trede .spoor-b { grid-column: 1 / -1; grid-row: 2; }
  .n-trede .n-trede-weg { grid-column: 1 / -1; grid-row: 2; } /* (evaluatie 27/10, P2-5) slot en zin onder de naam */
}
.n-ww { display: flex; flex-direction: column; gap: .75rem; background: var(--vlak-1); border: 1px solid var(--n-rand); border-radius: var(--n-radius); padding: 1rem; }
.n-ww--kort { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .45rem; padding: .7rem .9rem; }
.n-ww--kort .fw-knop--tertiair { margin-left: auto; }
.n-tekeningen { display: grid; gap: .5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.n-tekening { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-height: 7.5rem; border: 1.5px solid var(--lijn-2); border-radius: 16px; background: var(--vlak-1); color: var(--ink-3); cursor: pointer; padding: .6rem .4rem; text-align: center; }
.n-tekening .n-ico { width: 2.2rem; height: 2.2rem; color: var(--ink-3); }
.n-tekening b { font-weight: 600; font-size: var(--tekst-s); }
.n-tekening .n-groot { font-size: 1.6rem; color: var(--ink-1); }
.n-tekening small { font-size: var(--tekst-xs); color: var(--ink-2); }
.n-tekening[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-was); color: var(--ink-1); }
.n-tekening[aria-pressed="true"] .n-ico { color: var(--accent); }
.n-tekening[aria-pressed="false"] { border-style: dashed; }
.n-tekeningen--wie .n-tekening { min-height: 5rem; }
.n-ww-voet { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; border-top: 1px solid var(--lijn-1); padding-top: .75rem; }
.n-ww-vraag { margin-left: auto; font-family: var(--font-serif); font-size: var(--tekst-l); font-weight: 600; }
.n-knop-ja { border-color: var(--accent); color: var(--accent-diep); }
.n-ww-ai { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
/* (V2lite G5) het voorstel uit het document onder "Voor wie?": een rij per as, "Of:" als stippelkader */
.n-gv-assen { display: flex; flex-direction: column; gap: .5rem; }
.n-gv .n-ww-ai .n-ico, .n-gv .n-alt .n-ico { width: 1.1rem; height: 1.1rem; color: var(--accent); }
.n-gv .n-alt { cursor: default; }
.n-as { display: flex; flex-direction: column; gap: .5rem; border-top: 1px solid var(--lijn-1); padding-top: .75rem; }
.n-as-kop { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.n-as-kop .n-icoknop { margin-left: auto; }
.n-as-naam { border: 0; background: transparent; font-family: var(--font-serif); font-size: var(--tekst-l); font-weight: 600; color: var(--ink-1); cursor: pointer; padding: 0; }
.n-as-naam span { font-size: .75em; color: var(--ink-3); }
.n-as-invoer { max-width: 11rem; min-height: 2.1rem; padding: .25rem .5rem; font-weight: 600; }
.n-alts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; border-top: 1px dashed var(--lijn-2); padding-top: .75rem; }
.n-alt { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; border: 1px dashed var(--lijn-3); background: var(--vlak-1); border-radius: 12px; padding: .45rem .65rem; font-size: var(--tekst-s); color: var(--ink-2); cursor: pointer; text-align: left; }
.n-alt b { color: var(--ink-1); }
.n-alt .n-ico { width: 1rem; height: 1rem; }
.n-alt:hover { border-color: var(--accent); }
.n-alt .n-prog { padding: .1rem .5rem; font-size: var(--tekst-xs); }
.n-cvs { display: flex; flex-wrap: wrap; gap: .45rem; align-items: stretch; }
.n-cv { display: inline-flex; flex-direction: column; gap: .2rem; border: 1.5px solid var(--accent-rand); background: var(--accent-was); border-radius: 14px; padding: .45rem .6rem; min-width: 7rem; cursor: grab; }
.n-cv--samen { border-style: dashed; }
.n-cv--gekozen { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-rand); }
.n-cv[data-cv-samen] { cursor: pointer; }
.n-cv--nieuw { background: var(--vlak-1); border-color: var(--lijn-2); cursor: text; }
.n-cv-boven { display: flex; align-items: center; gap: .35rem; }
.n-cv-boven .n-ico { width: 1.1rem; height: 1.1rem; color: var(--accent); }
.n-cv-boven b { font-weight: 600; font-size: var(--tekst-s); }
.n-cv-n { font-family: var(--font-serif); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: .15rem; }
.n-cv-k { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font-size: .8rem; padding: 0 .15rem; line-height: 1; }
.n-cv-k:hover { color: var(--ink-1); }
.n-cv-prog { font-size: var(--tekst-xs); color: var(--accent-diep); }
.n-cv-prog.klein { color: var(--ink-3); }
.n-cv-invoer { min-height: 1.9rem; padding: .15rem .45rem; font-size: var(--tekst-s); max-width: 9rem; }
.n-cv-plus { display: inline-flex; align-items: center; gap: .3rem; border: 1.5px dashed var(--lijn-3); background: transparent; color: var(--ink-2); border-radius: 14px; padding: .45rem .75rem; font-size: var(--tekst-s); cursor: pointer; }
.n-cv-plus svg { width: .95rem; height: .95rem; }
.n-cv-plus:hover { border-color: var(--accent); color: var(--accent); }
.n-cv-plus--ai { border-color: var(--n-goud); background: var(--n-goud-zacht); color: var(--ink-1); }
.n-cv-voorstel { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: var(--tekst-s); color: var(--ink-2); }
.n-samen-knop[aria-pressed="true"] { background: var(--vlak-omkeer); color: var(--ink-omkeer); }
.n-groot, .n-mega, .n-badge, .n-chip, .n-pil, .fw-aimerk, .n-bron, .n-cv-n, .n-teller, .n-teller-inv, .n-ok, .n-q, .n-trede b, .n-mini-balk b, .n-balk3-l span, .n-stap, .n-tekening b, .n-kern-l, .n-comp-soort, .n-cv-prog, .n-kies span, .n-seg span { white-space: nowrap; }
.n-prog { max-width: 100%; }
.n-themakaart .rij2 { flex-wrap: wrap; row-gap: .45rem; }
.n-themakaart .rij2 > * { flex: none; }
.n-comp .rij, .n-comp .rij2 { flex-wrap: wrap; row-gap: .45rem; }
.n-comp .rij > .n-groot, .n-comp .rij > svg, .n-comp .rij > .n-label-ico { flex: none; }
.n-themakaart .kop b, .n-comp-kop b, .n-rij-t { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.n-cv-boven { flex-wrap: wrap; row-gap: .2rem; }
.n-sectie { row-gap: .4rem; }
.n-kern-l small { white-space: nowrap; }
@media (max-width: 22rem) {
  .n-mini-balk { grid-template-columns: minmax(4rem, 6rem) minmax(0, 1fr) 2.8rem; }
  .n-tekeningen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-held h1 { font-size: 2rem; }
}
.fw-knop { white-space: nowrap; max-width: 100%; }
.n-spark { flex: none; display: block; }
.n-tl { --bol: 1.6rem; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 .75rem; container-type: inline-size; }
.n-tl-punt { display: flex; flex-direction: column; min-width: 0; }
.n-tl-as { position: relative; height: calc(var(--bol) + .6rem); display: flex; align-items: center; justify-content: center; }
.n-tl-as::before, .n-tl-as::after { content: ""; position: absolute; top: 50%; height: 3px; transform: translateY(-50%); background: var(--accent); z-index: 0; }
.n-tl-as::before { left: calc(-.375rem); right: calc(50% + var(--bol) / 2 + .25rem); }
.n-tl-as::after { left: calc(50% + var(--bol) / 2 + .25rem); right: calc(-.375rem); }
.n-tl-punt.eerste .n-tl-as::before, .n-tl-punt.laatste .n-tl-as::after { display: none; }
.n-tl-punt--nu .n-tl-as::after, .n-tl-punt.laatste .n-tl-as::before { background: none; border-top: 3px dashed var(--lijn-3); height: 0; }
.n-tl-bol { position: relative; z-index: 1; width: var(--bol); height: var(--bol); border-radius: 50%; background: var(--accent); border: 4px solid var(--vlak-1); box-shadow: 0 0 0 2px var(--accent); display: block; }
.n-tl-bol--nu { background: var(--n-goud); box-shadow: 0 0 0 2px var(--n-goud), 0 0 0 9px var(--n-goud-zacht); }
.n-tl-bol--spook { background: transparent; border: 3px dashed var(--lijn-3); box-shadow: none; }
.n-tl-inhoud { display: flex; flex-direction: column; gap: .5rem; align-items: center; text-align: center; min-width: 0; padding-top: .35rem; }
.n-tl-datum { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: center; }
.n-tl-datum b { font-family: var(--font-serif); font-size: var(--tekst-l); white-space: nowrap; }
.n-tl-kaart { width: 100%; background: var(--vlak-1); border: 1px solid var(--n-rand); border-radius: var(--n-radius); padding: .9rem; display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.n-tl-punt--nu .n-tl-kaart { border-color: var(--n-goud); }
.n-tl-cijfer { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.n-tl-doel { display: inline-flex; align-items: center; gap: .2rem; font-size: var(--tekst-s); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.n-tl-doel svg { width: 1rem; height: 1rem; color: var(--ink-3); }
.n-tl-chips { display: flex; flex-direction: column; gap: .35rem; align-items: center; width: 100%; }
.n-tl-chip { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; border-radius: var(--radius-rond); padding: .3rem .7rem; font-size: var(--tekst-s); line-height: 1.25; }
.n-tl-chip span { overflow-wrap: anywhere; text-align: left; }
.n-tl-chip svg { width: .95rem; height: .95rem; flex: none; }
.n-tl-chip--actie { background: var(--vlak-omkeer); color: var(--ink-omkeer); }
.n-tl-chip--sinds { background: var(--accent-was); color: var(--accent-diep); cursor: pointer; list-style: none; }
.n-tl-chip--sinds::-webkit-details-marker { display: none; }
.n-tl-chip--sinds b { font-weight: 700; }
.n-tl-sinds p { margin-top: .35rem; font-size: var(--tekst-xs); color: var(--ink-2); }
.n-tl-leeg-baan { display: flex; align-items: center; gap: .5rem; padding: 1.5rem .5rem .5rem; }
.n-tl--leeg { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.n-tl-bol--gloed { width: 2.2rem; height: 2.2rem; background: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 0 0 12px var(--accent-was), 0 0 24px 14px var(--accent-was); }
.n-tl-leeg-baan .n-tl-bol--spook { width: 1.6rem; height: 1.6rem; }
.n-tl-stip { width: 3.5rem; border-top: 3px dashed var(--lijn-3); }
.n-tl-leeg-tekst { font-family: var(--font-serif); font-size: var(--tekst-l); font-weight: 600; }
@container (max-width: 34rem) {
  .n-tl { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; }
  .n-tl-punt { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: .75rem; }
  .n-tl-as { height: auto; align-items: flex-start; padding-top: .15rem; }
  .n-tl-as::before { left: 50%; right: auto; width: 3px; height: auto; top: 0; bottom: auto; height: .15rem; transform: translateX(-50%); }
  .n-tl-as::after { left: 50%; right: auto; width: 3px; height: auto; top: calc(var(--bol) + .4rem); bottom: 0; transform: translateX(-50%); }
  .n-tl-punt.eerste .n-tl-as::before { display: none; }
  .n-tl-punt--nu .n-tl-as::after, .n-tl-punt.laatste .n-tl-as::before { border-top: 0; border-left: 3px dashed var(--lijn-3); width: 0; height: auto; background: none; transform: translateX(-1.5px); }
  .n-tl-punt.laatste .n-tl-as::before { height: .15rem; }
  .n-tl-inhoud { align-items: flex-start; text-align: left; padding: 0 0 1.25rem; }
  .n-tl-datum { justify-content: flex-start; }
  .n-tl-kaart { align-items: flex-start; }
  .n-tl-cijfer, .n-tl-chips { justify-content: flex-start; align-items: flex-start; }
}
.n-tl-chip--actie span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.n-tl-chip--sinds span { white-space: nowrap; overflow-wrap: normal; }

/* --------------------------------------------------------------------------
   (V2lite S1) Gedeelde componenten: kop met woordmerk, menu als pillen, binnenkort, sonar.
   -------------------------------------------------------------------------- */
.fw-woordmerk { align-items: center; }
.fw-woordmerk b { color: var(--ink-1); }
.fw-mark { width: 1.6rem; height: 1.8rem; display: inline-block; flex: none; }
.fw-mark svg { display: block; width: 100%; height: 100%; }
.fw-hoofd-rechts { font-size: var(--tekst-s); color: var(--ink-2); flex-wrap: wrap; gap: var(--ruimte-2) var(--ruimte-3); }
/* (E2, P2-9) Uitloggen in de kop is een knop (POST) maar ziet eruit als de links ernaast: geen vulling, zelfde streep */
.fw-hoofd-rechts .fw-knop--tertiair { padding: 0; border: 0; min-height: 0; font-size: inherit; font-weight: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.fw-org { font-weight: 600; color: var(--ink-1); overflow-wrap: anywhere; }
.fwapp-nav .n-stappen { flex-wrap: wrap; overflow: visible; max-width: none; margin: 0; padding: .7rem 0; list-style: none; border-bottom: 1px solid var(--lijn-1); }
.n-stappen .fw-plek { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--lijn-2); background: var(--vlak-1); color: var(--ink-2); border-radius: var(--radius-rond); padding: .35rem .85rem; margin: 0; font-size: var(--tekst-s); font-weight: 500; }
.n-stappen .fw-plek:hover { border-color: var(--lijn-3); color: var(--ink-1); background: var(--vlak-2); }
.n-stap[aria-current="page"], .n-stappen .fw-plek[aria-current="page"] { background: var(--vlak-omkeer); color: var(--ink-omkeer); border-color: var(--vlak-omkeer); }
.sonar { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--tekst-s); color: var(--ink-2); }
.sonar i { position: relative; width: 1.1rem; height: 1.1rem; }
.sonar i::before, .sonar i::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--accent); border-radius: 50%; animation: ping 1.4s var(--soepel) infinite; }
.sonar i::after { animation-delay: .7s; }
@keyframes ping { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }

/* (V2lite S4) Na de meting */
/* Na de meting en het lusgeheugen (ontwerp v10 O:1634-1687, O:2448-2520). De .n-tl*-, .n-seg-, .n-beslissing- en
   .n-kanban-regels staan in de v10-laag; hier alleen wat de app erbij nodig heeft zonder JavaScript: de kanban als
   één raster (kolomkoppen en kaarten zijn broers, zodat CSS de vinkjes kan tellen), de telling "N/3 stellingen" als
   CSS-teller, en Klaarzetten uit vanaf het vierde vinkje. De velden onder "Details" volgen de segmentknop. */
.n-s4 { display: flex; flex-direction: column; gap: 1.75rem; }
.n-s4-beslis, .n-s4-geheugen { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.n-s4-stand { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.n-s4-form { display: flex; flex-direction: column; gap: .6rem; }
.n-s4-form .n-beslissing .fw-invoer { width: 100%; min-width: 0; }
.n-s4-velden { display: flex; flex-direction: column; gap: .6rem; }
/* (D1) onder Details staan alleen velden voor een actie: bij Bewust niets valt Details weg (de ene zin is de reden) */
.n-s4-form:has(input[name="soort"][value="niets"]:checked) .n-meer-klein { display: none; }
.n-s4-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.n-s4-volgende { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.n-s4-volgende .n-sectie form { margin-left: auto; }
.n-s4-voorstel { display: flex; flex-direction: column; gap: .75rem; }
.n-klaarform { counter-reset: n-aan; }
.n-s4-kanban { grid-auto-flow: row dense; align-items: start; }
.n-s4-kanban > .n-vink > input:checked { counter-increment: n-aan; }
.n-kolomkop { font-family: var(--font-sans); font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: var(--spatie-label); font-weight: 700; display: flex; align-items: center; gap: .4rem; margin-top: .25rem; }
.n-kolomkop i { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }
.n-kolomkop.n-kol-toe i { background: var(--accent); }
.n-kolomkop.n-kol-hou i { background: var(--ink-3); }
.n-kolomkop.n-kol-weg i { background: var(--lijn-3); }
.n-s4-kanban .n-vink .n-zin { overflow-wrap: anywhere; }
.n-s4-kanban .n-vink:has(> input:disabled) { opacity: .75; }
@container (min-width: 48rem) {
  .n-s4-kanban > .n-kol-toe { grid-column: 1; }
  .n-s4-kanban > .n-kol-hou { grid-column: 2; }
  .n-s4-kanban > .n-kol-weg { grid-column: 3; }
  .n-s4-kanban > .n-kolomkop { grid-row: 1; margin-top: 0; }
}
.n-klaar-rij { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .25rem; }
.n-telling { font-size: var(--tekst-s); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.n-telling-n::before { content: counter(n-aan); }
.n-teveel { display: none; color: var(--sem-aandacht); }
.n-s4-kanban > .n-vink:has(> input:checked) ~ .n-vink:has(> input:checked) ~ .n-vink:has(> input:checked) ~ .n-vink:has(> input:checked) ~ .n-klaar-rij .n-klaar { opacity: .45; pointer-events: none; cursor: not-allowed; }
.n-s4-kanban > .n-vink:has(> input:checked) ~ .n-vink:has(> input:checked) ~ .n-vink:has(> input:checked) ~ .n-vink:has(> input:checked) ~ .n-klaar-rij .n-teveel { display: inline; }
.n-s4-details { margin-top: .5rem; }
.n-s4-details .fw-tabelwrap { max-width: 100%; overflow-x: auto; }
.n-tl-datum .n-kort { font-size: var(--tekst-xs); }
.n-tl-cijfer .n-kort { font-size: var(--tekst-xs); color: var(--ink-3); }
ol.n-tl { list-style: none; padding: 0; margin: 0; }
/* geen afgekapte tekst: de zin van de beheerder in de actie-chip breekt af in plaats van "…" */
.n-tl-chip--actie span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* (V2lite S2) Nieuwe meting
   Alleen wat het ontwerp v10 vraagt en de v10-laag nog niet heeft: de dialogen, de grote knop, de lopende
   meting en het codesscherm in twee kolommen. */
.n-dialoog { border: 1px solid var(--lijn-2); border-radius: var(--radius-2, 12px); padding: var(--ruimte-5); max-width: min(28rem, calc(100vw - 2rem)); background: var(--vlak-1); color: var(--tekst-1, inherit); }
.n-dialoog::backdrop { background: rgb(0 0 0 / 0.45); }
.n-dialoog form { display: flex; flex-direction: column; gap: var(--ruimte-3); }
.n-dialoog h2 { margin: 0; }
.n-dialoog-knoppen { display: flex; gap: var(--ruimte-2); justify-content: flex-end; flex-wrap: wrap; }
.n-knop-groot { min-height: 3rem; padding-inline: 1.4rem; font-size: 1.05rem; }
.n-knoppen { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }
.n-lopend { display: flex; flex-direction: column; gap: var(--ruimte-3); margin-bottom: var(--ruimte-5); }
.n-lopend .n-kort svg { width: 1em; height: 1em; vertical-align: -0.15em; }
.n-loopt { display: grid; gap: var(--ruimte-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 64rem) { .n-loopt { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.n-loopt-zij { display: flex; flex-direction: column; gap: var(--ruimte-3); }
.n-codes { display: flex; flex-direction: column; gap: var(--ruimte-4); }
.n-stapel-kop { display: flex; align-items: baseline; gap: var(--ruimte-2); margin: 0; font-size: 1rem; }
@media print { .n-loopt-zij, .n-knoppen, .n-kop .n-pil, details.n-i { display: none !important; } .n-loopt { display: block; } }
.n-form fieldset.n-wie, .n-form fieldset.n-kring { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--ruimte-3); }
.n-ww .n-as { min-width: 0; }
.n-as-naam { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; }
.n-as-naam .n-as-invoer { width: auto; min-width: 0; max-width: 12rem; }
.n-cvs { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); min-width: 0; }
.n-cv { max-width: 100%; }
.n-cv-boven b { overflow-wrap: anywhere; }
.n-cvs .n-cv-invoer { width: 10rem; max-width: 100%; }
.n-sector { padding-top: 0; }
.n-ww--kort[hidden], .n-ww-voet[hidden] { display: none; }
.n-vink--klein { padding: 0.4rem 0.6rem; }
/* (G2) Eigen stellingen per groep op Nieuwe meting: een blok per groep, uitgegrijsd wat al voor iedereen geldt */
.n-eigen-groepen { display: flex; flex-direction: column; gap: .5rem; }
.n-eigen-groep { border: 1px solid var(--n-rand); border-radius: 12px; padding: .5rem .75rem; background: var(--vlak-1); }
.n-eigen-groep > summary { display: flex; flex-wrap: wrap; gap: .4rem; }
.n-eigen-groep .n-vink:has(input:disabled) { opacity: .6; background: transparent; }
.n-eigen-kies { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }  /* (H5, P2-6) de gekozen stellingen en één keuzelijst */
.n-eigen-kies .n-chips:empty { display: none; }
.n-eigen-kies > * { max-width: 100%; }  /* (JU) op 390 duwde een lange stelling als chip de pagina 11 px opzij */
.n-eigen-kies .n-chip { min-width: 0; white-space: normal; text-align: left; }
.n-eigen-kies .n-chip .n-icoknop { flex: none; }
.n-eigen-lijst { max-width: 100%; }
.n-vinken[hidden] { display: none; }
.n-bron-tekst { color: var(--tekst-2, inherit); }
.n-voorstel .n-blok > .n-chips { gap: var(--ruimte-2); }
.n-chip--vast svg { width: 0.9em; height: 0.9em; }
.n-startbalk { display: flex; flex-wrap: wrap; gap: var(--ruimte-3); align-items: stretch; }
.n-startbalk .n-binnenkort { flex: 1 1 12rem; margin: 0; }
.n-startbalk .n-start { flex: 1 1 14rem; }
.n-dialoog .n-chips { margin: 0; padding: 0; list-style: none; }
/* (V2lite B2) Voorbeeld: de kaart op gsm-breedte (390), in de dialoog van Nieuwe meting en op de eigen pagina */
.n-gsm { display: block; width: min(390px, 100%); height: min(760px, calc(100dvh - 9rem)); margin-inline: auto; border: 1px solid var(--lijn-2); border-radius: var(--radius-2, 12px); background: var(--vlak-1); }
.n-voorbeeld-dlg { padding: var(--ruimte-4); width: min(calc(392px + 2 * var(--ruimte-4)), calc(100vw - 1rem)); max-width: none; }
.n-voorbeeld-dlg[open] { display: flex; flex-direction: column; gap: var(--ruimte-3); }
.n-voorbeeld-dlg .n-gsm { height: min(760px, calc(100dvh - 12rem)); }
.n-voorbeeld-kop { display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-3); }
.n-voorbeeld-kop h2 { margin: 0; }
.n-voorbeeld-terug { margin-top: var(--ruimte-4); text-align: center; }
.n-startbalk .n-voorbeeld-knop { flex: 0 0 auto; min-height: 3.25rem; }
[data-max-melding][hidden], [data-eigen-melding][hidden], [data-b-waarschuwing][hidden], [data-verwachting-eerst][hidden], .n-dialoog:not([open]) { display: none; }
.n-codes .n-sectie { position: relative; }
.n-codes .n-sectie details.n-i { position: static; }
.n-codes .n-sectie details.n-i > :not(summary) { left: 0; right: 0; width: auto; max-width: 22rem; }
/* (V2lite S3) Lezen */
.n-meting { margin: 0; overflow-wrap: anywhere; }
.n-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.n-groep { border: 1px solid var(--lijn-1); border-radius: var(--n-radius, var(--radius-2)); background: var(--vlak-1); margin-block: 0.6rem; }
.n-groep > summary { cursor: pointer; padding: 0.8rem 1rem; font-weight: 600; display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; overflow-wrap: anywhere; }
.n-groep-n { font-weight: 400; font-size: var(--tekst-s); color: var(--ink-2); }
.n-groep > .fw-kaart { border: 0; margin: 0; padding-top: 0; min-width: 0; }
.n-kerncijfers--groep { margin-block: 0 var(--ruimte-3); }
.n-stellingen .n-st { grid-template-columns: minmax(0, 1fr) auto; }
.n-st .n-groot { white-space: nowrap; }
.n-labelkaart .naam, .n-themakaart .kop b { overflow-wrap: break-word; } /* (S14) nooit anywhere: dat brak titels midden in woorden */
/* (H5, P2-1) één definitie: wat de tweede van twee definities er (vroeger) van maakte, met de rest van de eerste erbij */
.n-binnenkort { display: flex; flex-direction: column; gap: 0.25rem; background: var(--vlak-2); border: 1px dashed var(--lijn-2); border-radius: var(--n-radius, var(--radius-2)); padding: 0.7rem 0.9rem; color: var(--ink-2); margin-top: 0.6rem; }
.n-binnenkort-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.n-binnenkort-kop b { flex: 1; min-width: 8rem; font-weight: 600; color: var(--ink-1); }
.n-binnenkort .n-ico { color: var(--ink-3); }
.n-binnenkort .n-badge { font-size: var(--tekst-xs); border: 1px solid var(--lijn-2); border-radius: 999px; padding: 0 0.45rem; white-space: nowrap; }
.n-binnenkort p { margin: 0; font-size: var(--tekst-s); }
.n-zacht { display: contents; }
.n-labels .n-binnenkort, .n-themas .n-binnenkort { margin-top: 0; }
.n-acties { display: flex; justify-content: flex-end; margin-block: var(--ruimte-4); }

/* (V2lite S5) */
/* Context, DIEP en Organisatie in de stijl van ontwerp v10 (O:1225-1340, O:1919-1943): de romp binnen fw-breedte
   zonder tweede goot, de i van een vakkop naar links open (geen horizontale scroll), de bestandsrij, de dialoog. */
.fw-ctx, .fw-diep, .fw-org-scherm { padding-inline: 0; padding-top: var(--ruimte-4); }
.fw-ctx-regels { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .4rem; font-size: var(--tekst-s); color: var(--ink-2); }
.n-vak-kop details.n-i > :not(summary), .fw-diep-org details.n-i > :not(summary) { left: auto; right: -.5rem; }
.n-bestand form { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.n-schakel-t { font-size: var(--tekst-xs); color: var(--ink-2); }  /* (H5, P2-4) het label van de schakelaar, zichtbaar */
.n-bestand .n-ico { color: var(--accent); }
.n-drop .fw-knop { cursor: pointer; }
.fw-ctx .fw-toevoegen > summary { list-style: none; align-self: flex-start; }
.fw-ctx .fw-toevoegen > summary::-webkit-details-marker { display: none; }
.fw-ctx-dialoog { max-width: min(26rem, calc(100vw - 2rem)); color: var(--ink-1); }
.fw-ctx-dialoog::backdrop { background: rgb(0 0 0 / .35); }
.fw-ctx-dialoog p { margin: 0 0 var(--ruimte-3); font-size: var(--tekst-l); }
.fw-ctx-dialoog .fw-rij { justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.fw-diep-org { display: flex; flex-direction: column; gap: var(--ruimte-3); }
.fw-diep-org .n-vak-kop .n-ico { width: 1.4rem; height: 1.4rem; color: var(--accent); }
.fw-diep .n-vak-kop a { color: inherit; }
.fw-diep .n-kaart > .fw-sectiekop, .fw-org-scherm .n-kaart > .n-sectie:first-child { margin-top: 0; }
.fw-diep .n-tegel ol, .fw-diep .n-tegel ul { margin: 0; padding-left: 1.1rem; }
/* (V2lite L2) Sectorbibliotheek en concept-editor (diep_sectorbib.html, diep_concept.html, diep_concept_rest.html): een
   eigen, afgebakend blok .sb-*. Een concept met veel inhoud scanbaar: tegels die naar hun sectie springen, onderwerpen als
   kaarten in twee kolommen, elke rij klapt open tot haar eigen formulier, toevoegen onderaan de kaart (stippelrand),
   schrappen als gevaar en nooit primair. Alleen tokens. */
.sb-kop-acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-3); margin-top: var(--ruimte-4); }
.sb-kop-acties > form { margin: 0; }
.sb-naam[open] { flex-basis: 100%; }
.sb-concept > .fw-melding { margin-top: var(--ruimte-4); }
.sb-tegels { margin-top: var(--ruimte-2); }
a.sb-tegel { color: inherit; text-decoration: none; }
a.sb-tegel:hover, a.sb-tegel:focus-visible { border-color: var(--accent); }
.sb-concept .fw-sectie { scroll-margin-top: var(--ruimte-4); padding-block: var(--ruimte-4); display: flex; flex-direction: column; gap: var(--ruimte-4); }
.sb-raster { display: grid; gap: var(--ruimte-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }
.sb-onderwerp { display: flex; flex-direction: column; gap: var(--ruimte-2); min-width: 0; }
.sb-onderwerp h3 { font-size: var(--tekst-l); }
.sb-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sb-lijst > li { border-top: 1px solid var(--lijn-1); min-width: 0; }
.sb-lijst > li:first-child { border-top: 0; }
details.sb-item > summary { list-style: none; cursor: pointer; display: flex; gap: var(--ruimte-3); align-items: baseline; padding-block: var(--ruimte-3); }
details.sb-item > summary::-webkit-details-marker { display: none; }
details.sb-item > summary:hover b { color: var(--accent); }
.sb-item-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--ruimte-1); }
.sb-item-t b { font-weight: 600; }
.sb-item-t .fw-hulp { margin: 0; }
details.sb-item[open] > summary .fw-hulp { display: none; }
.sb-wijzig { flex: none; font-size: var(--tekst-s); color: var(--accent); }
.sb-wijzig .sb-open, details[open] > summary .sb-wijzig .sb-dicht, .sb-wissel > summary .sb-open, .sb-wissel[open] > summary .sb-dicht { display: none; }
details[open] > summary .sb-wijzig .sb-open, .sb-wissel[open] > summary .sb-open { display: inline; }
details.sb-meer > .sb-lijst { margin-top: var(--ruimte-2); border-top: var(--lijn-dun) solid var(--lijn-1); }
.sb-bewerk { display: flex; flex-direction: column; gap: var(--ruimte-3); padding-bottom: var(--ruimte-4); }
.sb-bewerk > form { margin: 0; }
.sb-form { display: flex; flex-direction: column; gap: var(--ruimte-3); }
.sb-form > .fw-knop { align-self: flex-start; }
.sb-voet { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--ruimte-3); border-top: 1px solid var(--lijn-1); padding-top: var(--ruimte-3); }
.sb-voet > details { width: 100%; }
details.sb-plus > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--ruimte-2); border: 1px dashed var(--lijn-3); color: var(--ink-2); border-radius: var(--radius-rond); padding: var(--ruimte-1) var(--ruimte-3); font-size: var(--tekst-s); font-weight: 500; }
details.sb-plus > summary::-webkit-details-marker { display: none; }
details.sb-plus > summary:hover, details.sb-plus[open] > summary { border-color: var(--accent); color: var(--accent); }
details.sb-plus > summary .n-ico { width: 1rem; height: 1rem; color: inherit; }
details.sb-plus > form { margin-top: var(--ruimte-3); }
.fw-knop.sb-klein { min-height: 2.25rem; font-size: var(--tekst-s); }
.sb-rij { display: flex; align-items: center; gap: var(--ruimte-3); padding-block: var(--ruimte-2); }
.sb-rij-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sb-rij > form { margin: 0; flex: none; }
.sb-nr { flex: none; min-width: 1.5rem; font-family: var(--font-mono); font-size: var(--tekst-s); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fw-knop--gevaar.sb-weg { min-height: 2.25rem; width: 2.25rem; padding: 0; background: transparent; border-color: transparent; }
.fw-knop--gevaar.sb-weg:hover, .fw-knop--gevaar.sb-weg:focus-visible { background: var(--sem-aandacht-was); border-color: var(--sem-aandacht-rand); }
.sb-weg .n-ico { color: var(--sem-aandacht); width: 1.1rem; height: 1.1rem; }
.sb-groepen { display: grid; gap: var(--ruimte-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
.sb-smal { max-width: 14rem; }
details.sb-gevaar > summary { color: var(--sem-aandacht); }
details.sb-gevaar > form { margin-top: var(--ruimte-3); }
.sb-inlezen [hidden] { display: none; }
.sb-bestand::file-selector-button { font: inherit; font-size: var(--tekst-s); font-weight: 600; color: var(--ink-1); background: var(--vlak-1); border: 1px solid var(--lijn-2); border-radius: var(--radius-1); padding: var(--ruimte-1) var(--ruimte-3); margin-right: var(--ruimte-3); cursor: pointer; }
.sb-bestand::file-selector-button:hover { background: var(--vlak-2); }
details.sb-meer > summary { margin-block: var(--ruimte-2); }
.sb-tekst { font-family: var(--font-mono); font-size: var(--tekst-xs); min-height: 6rem; }
/* (D5, P1-15) de publiceerdialoog: wat verandert per soort (rijen met ervoor → nu, details achter een uitklap) en een
   chip per taal zonder vertaling (aandacht-vlak) */
.sb-verschil { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sb-verschil > li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ruimte-1) var(--ruimte-3); padding-block: var(--ruimte-2); border-top: var(--lijn-dun) solid var(--lijn-1); }
.sb-verschil > li:first-child { border-top: 0; }
.sb-verschil-rij { display: inline-flex; align-items: baseline; gap: var(--ruimte-2); }
.sb-num { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.sb-verschil details { flex-basis: 100%; }
.sb-verschil details > summary { font-size: var(--tekst-s); }
.sb-verschil details > .fw-ctx-regels { margin-top: var(--ruimte-2); }
/* een stelling of herkomst die openklapt tot haar formulier: nummer, icoon en schrapknop bovenaan de rij */
.sb-rij:has(> details.sb-item) { align-items: flex-start; }
.sb-rij:has(> details.sb-item) > .sb-nr, .sb-rij:has(> details.sb-item) > .n-ico { margin-top: var(--ruimte-3); }
.sb-rij:has(> details.sb-item) > form { margin-top: var(--ruimte-2); }
.n-chip.sb-ontbreekt { background: var(--sem-aandacht-was); border-color: var(--sem-aandacht-rand); color: var(--ink-1); }
.fw-org-scherm .n-kaart { display: flex; flex-direction: column; gap: var(--ruimte-3); }
.fw-ctx-later-vak { display: flex; flex-direction: column; gap: .5rem; }
.fw-ctx .n-kop { position: relative; }
.fw-ctx .n-kop details.n-i { position: static; }
.fw-ctx .n-kop details.n-i > :not(summary) { left: 0; top: 100%; width: min(26rem, 100%); }
.sonar[hidden] { display: none; }
/* (S6) na de nowrap-regel hierboven: de AI-regel met de lange modelnaam breekt af op een smal scherm */
p.fw-aimerk, .fw-aimerk small, .fw-aimerk .fw-versie { white-space: normal; overflow-wrap: anywhere; min-width: 0; }

/* (V2lite S7-C) */
/* Lezen, Na de meting en Lusgeheugen beeld met beeld naar ontwerp v10. Lezen: de groep is een details en geen raster
   (de .n-groep van Nieuwe meting is een raster van vier kolommen en zette de open groep in één smalle kolom: ±5000 px);
   de naam van de meting is de grote kop; uitleg achter de i; Samengevoegd als chip. */
details.n-groep { display: block; padding: 0; }
details.n-groep > summary { list-style: none; }
details.n-groep > summary::-webkit-details-marker { display: none; }
details.n-groep > summary::after { content: "+"; margin-left: auto; font-family: var(--font-mono); color: var(--ink-3); }
details.n-groep[open] > summary::after { content: "−"; }
details.n-groep > .fw-kaart { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: .75rem; }
details.n-groep > .fw-kaart > .n-sectie { margin-top: .5rem; }
.fw-sectie[id^="moment-"] { display: flex; flex-direction: column; gap: 1rem; padding-top: var(--ruimte-6); }
.fw-sectie[id^="moment-"] + .fw-sectie[id^="moment-"] { padding-top: var(--ruimte-5); border-top: var(--lijn-dun) solid var(--lijn-1); }
.fw-sectie[id^="moment-"] > * { margin: 0; }
.fw-sectie[id^="moment-"] .n-meting { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); font-variation-settings: "SOFT" 30, "WONK" 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.fw-sectie[id^="moment-"] .n-meting .fw-bij { font-family: var(--font-sans); font-size: var(--tekst-s); font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.fw-sectie[id^="moment-"] > .n-uitleg > .n-sectie h3, .fw-sectie[id^="moment-"] > .n-groepen > .n-sectie h3 { font-size: var(--tekst-xl); font-weight: 600; letter-spacing: -.01em; }
.n-groepen { display: flex; flex-direction: column; gap: .6rem; }
.n-kern-rij { display: flex; align-items: center; gap: .4rem; }
.n-sectie h3 { margin: 0; }
details.n-samengevoegd { align-self: flex-start; }
details.n-samengevoegd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; border-radius: var(--radius-rond); padding: .3rem .75rem; font-size: var(--tekst-s); background: var(--vlak-3); color: var(--ink-2); }
details.n-samengevoegd > summary::-webkit-details-marker { display: none; }
details.n-samengevoegd .n-ico svg { width: .95rem; height: .95rem; display: block; }
details.n-samengevoegd > ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: var(--tekst-s); color: var(--ink-2); }
details.n-niet > ul { margin: .5rem 0 0; padding-left: 0; list-style: none; font-size: var(--tekst-s); color: var(--ink-2); }
details.n-alles > :not(summary) { margin-top: .6rem; }
.fw-sectie[id^="moment-"] .n-acties { margin-block: var(--ruimte-3) 0; }
@container (min-width: 48rem) {
  .n-kerncijfers.n-kerncijfers--groep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-kerncijfers--groep > .n-kern--breed:last-child { grid-column: auto; }
}
.n-kern .n-kern-l { white-space: normal; overflow-wrap: anywhere; }
.n-trede-n { white-space: nowrap; }
.n-balk3-l { flex-wrap: wrap; gap: .25rem .9rem; }
.n-uitleg-blok .fw-aimerk .n-ai { white-space: nowrap; flex: none; }
.n-sectie .n-ai { font-family: var(--font-sans); font-weight: 400; color: var(--ink-2); padding: .05rem .4rem; }
.n-sectie .n-ai b { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
.fw-sectie[id^="moment-"] .n-acties .fw-knop { padding: .8rem 1.5rem; font-size: var(--tekst-m, 1rem); }
/* Na de meting: de stand als één stille regel; Vastleggen in de rij van het veld; "+ Beslissing" als pil; de kanban
   zonder kader en met kaarten zoals het ontwerp (.n-zin van Nieuwe meting is een grote kaart: hier gewone tekst). */
.n-s4-stand { font-size: var(--tekst-s); color: var(--ink-2); gap: .35rem .5rem; align-items: center; }
.n-s4-stand .fw-momentnaam { color: var(--ink-1); font-weight: 600; }
.n-s4-stand .n-cijfer { font-size: inherit; font-weight: 700; color: var(--ink-1); }
.n-s4-form .n-beslissing { grid-template-columns: auto minmax(0, 1fr) auto; }
.n-s4-form .n-beslissing .fw-knop { white-space: nowrap; }
@container (max-width: 40rem) {
  .n-s4-form .n-beslissing { grid-template-columns: minmax(0, 1fr); }
  .n-s4-form .n-beslissing .fw-knop { justify-self: start; }
}
.n-s4-form > details.n-meer-klein, .n-s4-knoppen { margin: 0; }
.n-s4-form { gap: .4rem; }
.n-s4 .n-vink .n-zin, .n-geheugen .n-zin { font-size: inherit; padding: 0; border-radius: 0; }
.n-s4 .n-vink { padding: .75rem .9rem; }
.n-s4 .n-vink-t { gap: .45rem; }
.n-s4-kanban--leeg > :not(.n-klaar-rij), .n-s4-kanban--leeg .n-telling { display: none; }
.n-s4-volgende .n-sectie .n-ai, .n-s4-volgende .n-chips { flex: none; }
.n-s4-form { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 1.25rem; }
.n-s4-form > .n-beslissing { flex: 1 0 100%; }
.n-s4-form > details.n-meer-klein[open] { flex-basis: 100%; order: 2; }
/* Lusgeheugen: de kruimel boven de kop, ruimte tussen kop en tijdlijn, zoals de tijdlijn op Na de meting */
.n-s7-paginakop .fw-kruimel { margin: 0 0 .25rem; }
.n-s7-paginakop + .n-tl, .n-s7-paginakop + .n-tl--leeg, .n-s4-geheugen .n-tl { margin-top: .75rem; }
.n-uitleg-blok p.fw-aimerk { flex-wrap: wrap; } .n-uitleg-blok p.fw-aimerk small { flex-basis: 100%; }
/* (V2lite S7-B) */
/* Nieuwe meting en Codes zoals het ontwerp, beeld met beeld (ontwerp-shots/meting, ontwerp-shots/codes). */
/* de veldlabels serif zoals het ontwerp: .fw-veld > label maakte ze klein; de datum smal */
.n-velden .fw-veld > .n-label, .n-velden .n-label { font-family: var(--font-serif); font-size: var(--tekst-l); font-weight: 600; color: var(--ink-1); }
.n-velden .n-datum { max-width: 12rem; }
/* Voor wie: de eerste as zonder lege lijn erboven; verborgen delen echt weg */
.n-wie .n-ww > .n-as:first-of-type { border-top: 0; padding-top: 0; }
.n-wie .n-ww[hidden], .n-wie .n-as[hidden], .n-wie [hidden] { display: none !important; }
.n-wie .n-iedereen b { font-weight: 600; }
.n-wie .n-iedereen-knop { align-self: flex-start; }
/* de naam van de as als tekst met ✎, geen kaal invoervak */
.n-wie .n-as-naam .n-as-invoer { border: 0; background: transparent; box-shadow: none; padding: 0 .1rem; min-height: 0; width: auto; field-sizing: content; min-width: 2ch; max-width: 12rem; font-family: var(--font-serif); font-size: var(--tekst-l); font-weight: 600; color: var(--ink-1); border-radius: 4px; }
.n-wie .n-as-naam .n-as-invoer:hover { background: var(--vlak-2); }
.n-wie .n-as-naam .n-as-invoer:focus { outline: none; box-shadow: var(--focus-ring); }
.n-wie .n-as-naam > span { font-size: .85rem; color: var(--ink-3); }
.n-wie .n-as-kop .n-waarom { position: relative; }
.n-wie .n-as-kop .n-waarom > div { position: absolute; z-index: 20; top: calc(100% + .3rem); left: 0; width: min(18rem, 70vw); background: var(--vlak-1); border: 1px solid var(--lijn-2); border-radius: 10px; padding: .6rem .75rem; box-shadow: var(--schaduw-2, 0 6px 20px rgb(0 0 0 / .12)); }
.n-wie .n-as-kop .n-samen-knop { font-size: var(--tekst-s); }
/* (G5) op een smal scherm opent "Waarom?" over de hele breedte van de as, niet buiten het scherm */
@media (max-width: 40rem) { .n-wie .n-as-kop { position: relative; } .n-wie .n-as-kop .n-waarom { position: static; } .n-wie .n-as-kop .n-waarom > div { left: 0; right: 0; width: auto; } }
.n-wie .n-sector { padding-top: 0; }
/* wat nog niet gebouwd is: één regel in de kaart, geen groot vlak eronder */
.n-wie .n-ww .n-binnenkort, .n-voorstel .n-binnenkort { margin: 0; padding: .45rem .7rem; border-radius: 12px; background: transparent; }
.n-wie .n-ww .n-binnenkort b, .n-voorstel .n-binnenkort b { font-size: var(--tekst-s); font-weight: 500; color: var(--ink-2); flex: 0 1 auto; min-width: 0; }
.n-wie .n-ww .n-binnenkort .n-ico, .n-voorstel .n-binnenkort .n-ico { width: 1rem; height: 1rem; }
/* het voorstel: labels zoals de chips van het ontwerp (✓ en accentrand), Overig met stippelrand */
.n-voorstel .n-kies span { border-color: var(--lijn-2); background: var(--vlak-1); color: var(--ink-2); padding: .25rem .7rem; }
.n-voorstel .n-kies input:checked + span { background: var(--accent-was); color: var(--accent-diep); border-color: var(--accent); font-weight: 500; }
.n-voorstel .n-kies input:checked + span::before { content: "✓"; font-size: .8em; }
.n-chip--overig { border-style: dashed; color: var(--ink-2); padding: .25rem .7rem; }
/* Voorbeeld als gewone knop naast de primaire; beide even hoog */
.n-startbalk { align-items: center; justify-content: flex-end; border-top: 1px solid var(--lijn-1); padding-top: 1rem; }
.n-startbalk .n-binnenkort { flex: 0 0 auto; flex-direction: row; min-height: 3.25rem; align-items: center; padding: 0 1rem; border: 1px solid var(--lijn-2); border-radius: var(--radius-2, 10px); background: var(--vlak-1); }
.n-startbalk .n-binnenkort b { color: var(--ink-1); font-size: 1rem; font-weight: 600; }
.n-startbalk .n-start { flex: 1 1 14rem; min-height: 3.25rem; }
/* de open meting: datum links, één knop rechts */
.n-lopend { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ruimte-3); margin-bottom: var(--ruimte-4); }
.n-lopend > .n-knop-groot { flex: 0 1 22rem; }
details.n-meer-klein.n-nieuw-in > summary { font-family: var(--font-serif); font-size: var(--tekst-xl); font-weight: 600; color: var(--ink-1); margin-bottom: var(--ruimte-3); }
@media (max-width: 40rem) { .n-lopend > .n-knop-groot { flex: 1 1 100%; } }
.n-lopend > .n-codes-bij { flex: 0 0 auto; }
/* Zaalcodes: grote QR-kaartjes met een nummer om op een gedeeld scherm te tonen; de QR volgt de hoogte van het scherm, zodat twee rijen op een gewoon scherm passen */
.fw-zaal { list-style: none; margin: 0 0 var(--ruimte-4); padding: 0; display: grid; gap: var(--ruimte-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.fw-zaal-kaart { position: relative; background: #ffffff; color: #141815; border: 1px solid var(--lijn-2); border-radius: var(--radius-1); padding: var(--ruimte-2); display: flex; flex-direction: column; align-items: center; gap: var(--ruimte-2); break-inside: avoid; }
.fw-zaal-nr { position: absolute; top: var(--ruimte-2); left: var(--ruimte-3); font-size: var(--tekst-xl); line-height: 1; font-variant-numeric: tabular-nums; }
.fw-zaal-qr { width: min(100%, 25vh, 18rem); min-width: 9rem; height: auto; aspect-ratio: 1; }
/* (18b, QR voor de authenticator-app) de QR naast de uitleg; op een smal scherm eronder. */
.fw-totp { flex-direction: row; flex-wrap: wrap; gap: var(--ruimte-3); align-items: flex-start; }
.fw-totp-qr { width: 12.25rem; height: 12.25rem; flex: none; background: #ffffff; border: 1px solid var(--lijn-2); border-radius: var(--radius-1); }
.fw-totp-uitleg { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: var(--ruimte-2); }
.fw-totp-uitleg code { overflow-wrap: anywhere; }
.fw-zaal-link { max-width: 100%; font-family: var(--font-mono); font-size: var(--tekst-xs); color: #141815; overflow-wrap: anywhere; text-align: center; }
@media (min-width: 46rem) { .fw-zaal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Codes: één printvel in drie kolommen op een grijs vlak, de plaats onder elk kaartje */
@media (min-width: 46rem) { .n-loopt { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.n-codes { gap: var(--ruimte-3); }
.n-codes .n-printvel { margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--vlak-2); padding: var(--ruimte-3); border-radius: var(--radius-2, 10px); }
.n-codes .n-kaartje { padding: .45rem; gap: .25rem; text-align: center; font-size: .625rem; border-color: #aab1a8; }
.n-codes .n-kaartje img { max-width: 4.2rem; }
.n-codes .n-kaartje code { font-size: .625rem; letter-spacing: .04em; background: none; padding: 0; }
@media print { .n-codes .n-printvel { background: none; padding: 0; } .n-codes .n-kaartje img { max-width: 7rem; } .n-codes .n-kaartje, .n-codes .n-kaartje code { font-size: .8rem; } }
/* (V2lite S7-A) */
/* DIEP, Context en Organisatie beeld met beeld naar ontwerp v10: de organisaties als tabel (naam · sector · Werk als ·
   Meer), het pack als kleine kop boven de tegels, de kaarten van DIEP-beheerders en passkeys; Organisatie in dezelfde
   taal (vakkop met icoon, chips, één rij per kanaal, velden met hun knop op één lijn). */
.fw-diep .n-kop + .n-formrij { margin-top: -.25rem; }
.n-formrij .fw-veld > label { font-size: var(--tekst-m); font-weight: 600; }
.n-formrij--een .fw-veld > label { font-size: var(--tekst-s); }
.n-formrij > .fw-knop--primair { font-size: var(--tekst-m); font-weight: 600; }
.fw-diep-pack { display: flex; flex-direction: column; gap: .6rem; }
.fw-diep-packnaam { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; font-size: var(--tekst-s); font-weight: 600; color: var(--ink-2); text-decoration: none; }
.fw-diep-packnaam:hover { color: var(--accent); text-decoration: underline; }
.fw-diep-packnaam .n-ico { width: 1.1rem; height: 1.1rem; color: var(--accent); }
.fw-orgs { padding: 0; }
.fw-orgrij { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem .75rem; align-items: center; padding: .9rem 1.1rem; border-top: var(--lijn-dun) solid var(--lijn-1); }
.fw-orgrij > .fw-org-naam, .fw-orgrij > .n-veldrij { grid-column: 1 / -1; }
.fw-org-meer { display: contents; }
.fw-org-meer[open] { display: block; grid-column: 1 / -1; }
.fw-orgrij:first-child { border-top: 0; }
.fw-org-naam { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; min-width: 0; }
.fw-org-naam .n-ico { width: 1.3rem; height: 1.3rem; color: var(--accent); }
.fw-org-werk { margin: 0; }
.fw-org-werk .fw-knop { min-height: 2.75rem; }
.fw-org-meer > summary { min-height: 2.75rem; justify-self: end; }
.fw-org-in { display: grid; gap: .9rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); padding-top: .4rem; }
.fw-org-menu { grid-column: 1 / -1; }
.fw-org-menu { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; }
.fw-org-menu .fw-hulp { max-width: none; }
@container (min-width: 46rem) {
  .fw-orgrij { grid-template-columns: minmax(10rem, 1fr) minmax(15rem, 1.2fr) auto 4.5rem; align-items: center; column-gap: 1rem; }
  .fw-orgrij { position: relative; }
  .fw-orgrij > .fw-org-naam, .fw-orgrij > .n-veldrij { grid-column: auto; }

  .fw-org-meer[open] > summary { position: absolute; top: .9rem; right: 1.1rem; }
}
.fw-diep-blok { display: flex; flex-direction: column; gap: var(--ruimte-3); }
.fw-diep-blok .fw-tabel caption { text-align: left; }
.fw-diep-passkeys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.fw-diep-passkeys:empty { display: none; }
.fw-org-scherm .n-kop .fw-org-ctx { margin-left: auto; }
.fw-org-assistent { flex-direction: row !important; align-items: center; flex-wrap: wrap; gap: .75rem 1rem; border-color: var(--accent-rand); }
.fw-org-assistent > .n-ico { width: 1.6rem; height: 1.6rem; color: var(--accent); }
.fw-org-assistent > p { flex: 1 1 18rem; margin: 0; }
.fw-org-tegel { text-decoration: none; color: inherit; }
.fw-org-tegel:hover { border-color: var(--accent-rand); }
.fw-org-scherm .n-vak-kop .fw-bij { font-size: var(--tekst-xs); color: var(--ink-3); }
.fw-org-lijst { display: grid; gap: .5rem .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.fw-org-lijst:has(.fw-org-chip) { display: flex; flex-wrap: wrap; gap: .4rem; }
.fw-org-chip { display: inline-flex; align-items: center; padding: .3rem .8rem; border: 1px solid var(--lijn-2); border-radius: var(--radius-rond); background: var(--vlak-1); font-size: var(--tekst-s); color: var(--ink-1); text-decoration: none; }
a.fw-org-chip:hover { border-color: var(--accent); }
.fw-org-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.fw-org-kanaal { display: grid; gap: .5rem 1rem; grid-template-columns: minmax(0, 1fr); align-items: end; padding-top: .75rem; border-top: var(--lijn-dun) solid var(--lijn-1); }
.fw-org-kanaal > .fw-bij { font-size: var(--tekst-xs); color: var(--ink-3); }
@container (min-width: 46rem) {
  .fw-org-kanaal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fw-org-kanaal > .fw-bij { grid-column: 1; grid-row: 2; }
  .fw-org-kanaal > form:first-child { grid-column: 1; grid-row: 1; }
  .fw-org-kanaal > form + .fw-bij + form { grid-column: 2; grid-row: 1; }
}
.fw-org-nieuw { padding-top: .75rem; border-top: var(--lijn-dun) solid var(--lijn-1); }
.fw-org-nieuw.n-kaart { padding-top: 1.25rem; border-top: 1px solid var(--n-rand); }
.fw-org-sub { grid-column: 1 / -1; margin: 0; font-size: var(--tekst-m); }
.fw-org-moment { display: flex; flex-direction: column; gap: var(--ruimte-3); }
.fw-org-labels { border: 0; margin: 0; padding: 0; min-width: 0; }
.fw-org-labels > legend { padding: 0; margin-bottom: .5rem; font-weight: 600; font-size: var(--tekst-s); }
.fw-org-scherm .n-formrij .fw-veld > label { font-size: var(--tekst-s); }
.fw-org-scherm .n-kaart.n-formrij { display: grid; }
.fw-ctx .n-ctx .n-binnenkort { margin-top: 0; }
.fw-diep .n-binnenkort { margin-top: 0; }
.fw-diep-blok .fw-tabel { min-width: 0; }
.fw-diep-blok .fw-tabel td { overflow-wrap: anywhere; }
.fw-org-ctx { display: inline-flex; gap: .75rem; }
.fw-org-labels .n-formrij { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
/* (V2lite S8) */
.n-kies span svg, .n-chip--overig svg { flex: none; }

/* (V2lite S9) */
/* De bezig-staat van Sluiten en Vastleggen (meting.js, form[data-bezig]): de knop staat uit met "Bezig…". */
.fw-knop[aria-busy="true"] { cursor: progress; opacity: .75; }
/* (V2lite S12) */
.fw-ctx-open { color: inherit; text-decoration: underline; text-decoration-color: var(--lijn-3); text-underline-offset: 3px; }
.fw-ctx-open:hover, .fw-ctx-open:focus-visible { text-decoration-color: currentColor; }
.fw-ctx-terug { align-self: flex-start; font-size: var(--tekst-s); color: var(--ink-2); text-decoration: none; }
.fw-ctx-terug:hover { color: var(--ink-1); text-decoration: underline; }
.fw-ctx-regel { margin: 0; font-size: var(--tekst-m); color: var(--ink-2); }
.fw-ctx-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; font-size: var(--tekst-s); color: var(--ink-3); }
.fw-ctx-meta a { color: inherit; overflow-wrap: anywhere; }
.fw-ctx-tekst { max-height: 32rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--vlak-2); border-radius: 10px; padding: .9rem 1rem; font-size: var(--tekst-m); line-height: 1.6; color: var(--ink-1); }
/* (V2lite S11) uitleg */
/* "In uw context" zoals het ontwerp (O:1597): de chip "AI uitleg" naast de kop (uitleg.js zet hem daar), geen
   zichtbare model- of promptregel, kaarten met een kicker, een korte kop en ✕, één rij inhoud zonder kaart in een
   kaart, twijfel als "?" in de kicker en de zin in "Waarom?". */
.n-uitleg > .n-sectie { gap: .6rem; }
.n-uitleg .n-sectie .n-uitleg-ai { flex: none; font-size: var(--tekst-xs); }
.n-uitleg-blok { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.n-uitleg-blok > .n-uitleg-ai { align-self: flex-start; font-family: var(--font-sans); font-weight: 400; color: var(--ink-2); padding: .05rem .4rem; }
.n-uitleg-blok > .n-uitleg-ai b { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
.n-uitleg-blok .n-eerste { margin: 0; }
.n-comp { min-width: 0; }
/* (W14) weghalen is herstelbaar: melding bovenaan met Ongedaan maken, kleine regel onderaan met Terugzetten */
.n-weg-melding, .n-weg-regel { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; font-size: var(--tekst-s); color: var(--ink-2); }
.n-weg-melding { margin-block: 0 .75rem; padding: .35rem .6rem; border: 1px solid var(--lijn-2); border-radius: 8px; background: var(--vlak-2); color: var(--ink-1); }
.n-weg-regel { margin-block: .75rem 0; }
.n-weg-melding form, .n-weg-regel form { display: inline; margin: 0; }
.n-comp-soort .n-ai { font-weight: 500; padding: .05rem .4rem; }
.n-comp-kop .n-icoknop { margin: -.25rem -.4rem 0 0; flex: none; }
.n-comp-kop .n-icoknop svg { width: 1.1rem; height: 1.1rem; }
.n-comp-rij { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.n-comp-rij .n-label-ico { width: 1.6rem; height: 1.6rem; color: var(--accent); }
.n-comp-rij .n-groot small { font-family: var(--font-sans); font-size: var(--tekst-s); font-weight: 400; letter-spacing: 0; color: var(--ink-2); }
.n-comp-naam { font-size: var(--tekst-s); color: var(--ink-2); min-width: 0; overflow-wrap: break-word; }
.n-comp .n-mini-balk .fw-naam { min-width: 0; overflow-wrap: break-word; }
.n-comp .n-mini-balk .n-trede-weg { font-size: var(--tekst-xs); color: var(--ink-3); }
.n-comp .n-tijdlijn { display: flex; flex-direction: column; gap: .35rem; padding: 0; font-size: var(--tekst-s); color: var(--ink-2); }
.n-comp .n-tijdlijn::before { content: none; }
.n-comp .n-tijdlijn li { position: relative; padding-left: 1rem; overflow-wrap: anywhere; }
.n-comp .n-tijdlijn li::before { content: ""; position: absolute; left: .15rem; top: .55em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent); }
/* (W3) de tijdlijnkaart: per eerdere meting naam · datum · aandeel 9–10 · actie, links uitgelijnd en zonder afkappen */
.n-comp .n-tijdlijn li { display: flex; flex-direction: column; gap: .3rem; }
.n-comp .n-tijdlijn .n-tl-datum, .n-comp .n-tijdlijn .n-tl-cijfer { justify-content: flex-start; }
.n-comp .n-tijdlijn .n-tl-datum b { font-size: var(--tekst-m); color: var(--ink-1); white-space: normal; }
.n-comp .n-tijdlijn .n-tl-chips { align-items: flex-start; }
.n-comp .n-tijdlijn .n-tl-chip--actie span { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.n-comp details.n-waarom > div .n-twijfel { align-self: flex-start; }
.n-comp .n-drie { height: 2.4rem; margin-top: 0; }
/* (V2lite S13) */
/* De kop van "In uw context" zoals het ontwerp: kop, chip en i op één rij uit de template; de groep als kleine regel
   eronder ("over Klant · Tafel"). */
.n-uitleg h3 .fw-momentnaam { font: inherit; color: inherit; } /* (doorloop) "In uw context · Klant · Loge" */
/* (V2lite S14) */
/* Titels van kaarten breken op woordgrenzen, nooit midden in een woord: geen overflow-wrap: anywhere (dat liet de
   titel van een themakaart krimpen tot een kolom van letters, dev 26/10). break-word breekt alleen een woord dat
   alleen al breder is dan de kaart. De regel overschrijft .fw-naam (anywhere) op elke titel. De themakaart zoals het
   ontwerp: icoon en titel bovenaan over de volle breedte, de chip "AI voorlopig" en de "?" klein eronder. */
.n-labelkaart .naam, .n-themakaart .kop b, .n-comp-kop b, .n-comp .n-comp-naam, .n-comp .n-mini-balk .fw-naam, .n-trede-naam .fw-naam { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
.n-themakaart .kop b { min-width: 0; }
.n-themakaart .n-thema-ai { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: -.25rem; }
.n-themakaart .n-thema-ai .n-ai { font-family: var(--font-sans); font-weight: 400; color: var(--ink-2); padding: .05rem .4rem; white-space: nowrap; }
.n-themakaart .n-thema-ai .n-ai b { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
.n-comp-rij .n-comp-naam { flex: 1 1 8rem; }

/* (V2lite) De i-popover: precies één box (.n-i-inhoud) per i; meer alinea's staan erin onder elkaar.
   details.n-i > :not(summary) is absolute: twee kinderen gaven twee boxen op dezelfde plek (Frederik 26/10). */
.n-i-inhoud > * { margin: 0; }
.n-i-inhoud > * + * { margin-top: .5rem; }

/* (V2lite F1) */
/* De i-popover op een smal scherm: altijd binnen het scherm, vlak onder de i, links en rechts de goot (16 px).
   De i zelf is dan niet gepositioneerd, zodat de popover zich niet aan de i maar aan de pagina meet (de initiële
   containing block); top blijft auto: de plek waar hij in de flow zou staan, net onder de i, en hij scrolt mee.
   Een tegel verliest daarom zijn positie en zet de i met flex in de hoek. Waar een kaart zelf de popover draagt
   (.n-codes .n-sectie, .fw-ctx .n-kop, .n-labelkaart .n-hoek) blijft die regel: die valt al binnen het scherm. */
@media (max-width: 34rem) {
  details.n-i:not(.n-i--tekst) { position: static; }
  details.n-i:not(.n-i--tekst) > :not(summary) { top: auto; left: var(--goot); right: var(--goot); width: auto; margin-top: .4rem; }
  .n-tegel { position: static; }
  .n-tegel details.n-i { position: static; order: -1; align-self: flex-end; margin: -.3rem -.3rem calc(-1.35rem - .35rem) 0; }
}
/* "Alle cijfers" op Lezen: een vraag breekt nooit midden in een woord. Op een smal scherm staat de vraag als eigen
   rij boven haar cijfers, elk cijfer met zijn kolomkop erboven (data-kop). */
.fw-tabel .fw-naam { overflow-wrap: break-word; }
@media (max-width: 34rem) {
  .fw-tabel--stapel { min-width: 0; }
  .fw-tabel--stapel thead { display: none; }
  .fw-tabel--stapel tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: .3rem .75rem; padding-block: var(--ruimte-3); border-bottom: var(--lijn-dun) solid var(--lijn-1); }
  .fw-tabel--stapel tbody tr:last-child { border-bottom: none; }
  .fw-tabel--stapel td { display: block; padding: 0; border: 0; }
  .fw-tabel--stapel td:first-child { grid-column: 1 / -1; font-weight: 500; }
  .fw-tabel--stapel td[data-kop="E-mailadres"] { grid-column: 1 / -1; overflow-wrap: break-word; }  /* (W2) een lang adres breekt, nooit over de rol heen */
  .fw-tabel--stapel td[data-kop]::before { content: attr(data-kop); display: block; font-size: var(--tekst-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: var(--spatie-label); }
}
/* (B1) Account: de tabel met rijkoppen (naam, adres, rol, code) valt op een smal scherm niet meer buiten het beeld: kop boven waarde. */
@media (max-width: 34rem) {
  .fw-tabel--rijkop { min-width: 0; }
  .fw-tabel--rijkop th, .fw-tabel--rijkop td { display: block; }
  .fw-tabel--rijkop th { border-bottom: 0; padding-bottom: 0; }
  .fw-tabel--rijkop td { overflow-wrap: break-word; padding-top: var(--ruimte-1); }
  .fw-tabel--rijkop tr { display: block; border-bottom: var(--lijn-dun) solid var(--lijn-1); }
  .fw-tabel--rijkop tbody tr:last-child { border-bottom: none; }
  .fw-tabel--rijkop td { border-bottom: 0; }
}
/* Starten naast een lopende meting: de knop staat uit, één zin eronder (de engine weigert dan altijd). */
.n-startbalk .n-start-uit { flex: 1 1 100%; margin: 0; text-align: right; }
/* (doorloop 27/10) Per groep zonder aandeel: slot en vaste zin; Context: de vier vakken als volle kaart, uitgeschakeld */
.n-trede-weg .n-ico { display: inline-flex; width: .9rem; height: .9rem; }
.n-drop-rij { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; width: 100%; }
.n-drop-rij .fw-invoer { flex: 1 1 8rem; max-width: 12rem; min-width: 0; }
.n-drop--uit .fw-invoer:disabled { cursor: not-allowed; }
.n-drop .n-plus { min-width: 3.2rem; }
.n-drop .n-plus svg { width: 1rem; height: 1rem; display: block; margin-inline: auto; }
.n-vak-kop .n-badge { flex: none; }
.n-drop--uit .fw-knop:disabled { cursor: not-allowed; }
/* (W2) Binnenkort: de hele uploadzone is zichtbaar grijs en dus niet aan te klikken (knoppen niet dubbel dimmen) */
.n-drop--uit { opacity: .55; }
.n-drop--uit .fw-knop:disabled { opacity: 1; }
.n-drop--uit .fw-invoer:disabled { background: transparent; border-style: dashed; }
.n-kern-wat { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.n-kern-wat small { font-size: var(--tekst-s); color: var(--ink-2); }
.n-comp > .n-comp-naam { margin: 0; font-size: var(--tekst-s); color: var(--ink-2); }
.n-geheugen td > small { display: block; } /* (doorloop F6) "Actie" boven de zin, niet ernaast */
.n-geheugen .n-cijfer { white-space: nowrap; } /* (W6) "65,0 %" breekt niet midden in het getal */
/* (W7) een band-chip ("0–6 35 %") breekt nooit intern; de rij chips wrapt als geheel naar een volgende regel */
.n-banden { display: inline-flex; flex-wrap: wrap; gap: .35rem; max-width: 100%; vertical-align: top; }
.n-banden .n-band, .n-geheugen .n-band { white-space: nowrap; }
@media (max-width: 34rem) { .n-geheugen td > .n-banden { flex-direction: column; align-items: flex-start; } } /* op 390: de chips onder elkaar, de tabel blijft smal */
/* (W7) de testorganisaties van /diep: dicht in één uitklap onder de lijst */
.fw-testorgs { margin-top: var(--ruimte-3); }
/* (doorloop F5) "In het kort" op 390: een aandeel breekt niet, een naam breekt als één blok (geen overlap) */
.fw-kort .fw-aandeel { white-space: nowrap; }
.fw-kort .fw-naam { display: inline-block; }
/* (review F) de chip "AI uitleg" in de kop alleen als het stuk een kaart van het model heeft */
.n-uitleg .n-sectie .n-uitleg-ai { display: none; }
.n-uitleg:has(.n-uitleg-blok[data-ai-gegenereerd]) .n-sectie .n-uitleg-ai { display: inline-block; }
.n-comp-soort .n-ai-labels { font-family: var(--font-sans); font-weight: 400; color: var(--ink-2); letter-spacing: 0; text-transform: none; }
.n-comp-soort .n-ai-labels b { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }

/* (V2lite) In de engine (diep_engine.html, alleen DIEP): de tijdlijn van ontwerp v10 (.n-tl) met dunne lijnen en
   kleine bollen; de stappen komen na elkaar binnen en de lijn tekent mee, alleen zonder prefers-reduced-motion. */
.n-tl--engine { --bol: 1.1rem; }
.n-tl--engine .n-tl-as::before, .n-tl--engine .n-tl-as::after { height: 1.5px; }
.n-tl--engine .n-tl-bol { border-width: 3px; box-shadow: 0 0 0 1.5px var(--accent); }
.n-tl--engine .n-tl-datum .n-ico { color: var(--accent); }
.n-tl--engine .n-tl-inhoud, .n-tl--engine .n-tl-kaart { flex: 1; }
.n-tl--engine .n-tl-kaart { gap: .35rem; }
.n-tl--engine .n-tl-punt.laatste .n-tl-as::before { background: var(--accent); border-top: 0; height: 1.5px; }
.n-engine .n-ai { font-family: var(--font-sans); font-weight: 400; color: var(--ink-2); white-space: nowrap; padding: .05rem .4rem; }
.n-engine .n-ai b { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
.n-tl--engine .n-tl-kaart > span:not(.n-groot) { font-size: var(--tekst-s); color: var(--ink-2); }
.n-engine-token { font-family: var(--font-mono); letter-spacing: 0; }
.n-groot.n-engine-token { font-size: var(--tekst-xl); line-height: var(--n-groot); }
.n-engine-lijst { list-style: none; margin: 0; padding: 0; }
.n-engine-lijst li { display: flex; gap: .5rem; align-items: baseline; }
.n-engine-lijst .n-ico { width: 1rem; height: 1rem; color: var(--accent); align-self: center; }
.n-engine-nooit li { color: var(--ink-2); }
.n-engine-nooit .n-ico { color: var(--ink-3); }
.n-engine-lijst [data-telling] { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 1.5ch; }
@container (max-width: 34rem) {
  .n-tl--engine .n-tl-as::before, .n-tl--engine .n-tl-as::after,
  .n-tl--engine .n-tl-punt.laatste .n-tl-as::before { width: 1.5px; height: auto; border-left: 0; background: var(--accent); }
  .n-tl--engine .n-tl-punt.laatste .n-tl-as::before { height: .15rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .n-tl--engine .n-tl-punt { animation: n-in .5s var(--soepel) both; }
  .n-tl--engine .n-tl-as::before, .n-tl--engine .n-tl-as::after { animation: n-lijn .45s var(--soepel) both; }
  .n-tl--engine .n-tl-punt:nth-child(2), .n-tl--engine .n-tl-punt:nth-child(2) .n-tl-as::before { animation-delay: .15s; }
  .n-tl--engine .n-tl-punt:nth-child(3), .n-tl--engine .n-tl-punt:nth-child(3) .n-tl-as::before { animation-delay: .3s; }
  .n-tl--engine .n-tl-punt:nth-child(4), .n-tl--engine .n-tl-punt:nth-child(4) .n-tl-as::before { animation-delay: .45s; }
  .n-tl--engine .n-tl-punt:nth-child(5), .n-tl--engine .n-tl-punt:nth-child(5) .n-tl-as::before { animation-delay: .6s; }
  .n-tl--engine .n-tl-punt:nth-child(1) .n-tl-as::after { animation-delay: .1s; }
  .n-tl--engine .n-tl-punt:nth-child(2) .n-tl-as::after { animation-delay: .25s; }
  .n-tl--engine .n-tl-punt:nth-child(3) .n-tl-as::after { animation-delay: .4s; }
  .n-tl--engine .n-tl-punt:nth-child(4) .n-tl-as::after { animation-delay: .55s; }
}
@keyframes n-lijn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
.n-engine .n-ctx { align-items: start; }
.n-engine .n-chip { max-width: 100%; flex-wrap: wrap; row-gap: .2rem; }
.n-engine-datum { white-space: nowrap; }
/* (L1, 30/10) De opmaak van In de engine, alleen onder .n-engine: de lijst als raster (icoon, meting, datum, pijl);
   per tegel eerst het cijfer met zijn eenheid (even hoog, zodat de scheidingslijnen op één hoogte staan) en de noten
   klein eronder; de vakken als rijen (kop links, inhoud rechts) zodat er geen gaten vallen tussen vakken van ongelijke
   hoogte. Op een smal scherm alles onder elkaar en het cijfer met zijn eenheid op één regel. */
.n-engine .n-engine-meta { font-size: var(--tekst-m); color: var(--ink-2); margin-top: -.25rem; }
.n-engine > .n-kop + .n-kort { font-size: var(--tekst-m); }
.n-engine .n-engine-gesloten, .n-engine .n-engine-voet a { white-space: nowrap; }
.n-engine .n-engine-vak-inhoud .n-chip { border-radius: 1.1rem; }
.n-engine .n-engine-meta b { font-family: var(--font-serif); font-size: var(--tekst-l); font-weight: 600; color: var(--ink-1); }
.n-engine .n-engine-rij { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: .75rem; padding: .85rem 1rem; color: var(--ink-1); text-decoration: none; transition: border-color .15s; }
.n-engine .n-engine-rij .n-ico { color: var(--accent); }
.n-engine .n-engine-rij .n-rij-t { min-width: 0; font-weight: 600; }
.n-engine .n-engine-rij .n-kort { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.n-engine .n-engine-rij .n-engine-pijl { width: 1.1rem; height: 1.1rem; color: var(--ink-3); }
.n-engine .n-engine-rij:hover, .n-engine .n-engine-rij:focus-visible { border-color: var(--accent); }
.n-engine .n-engine-rij:hover .n-rij-t { text-decoration: underline; }
.n-engine .n-engine-rij:hover .n-engine-pijl { color: var(--accent); }
.n-tl--engine .n-engine-cijfer { display: flex; flex-direction: column; align-items: center; gap: .35rem; min-height: calc(var(--n-groot) + 3.9rem); }
.n-tl--engine .n-engine-cijfer > span:not(.n-groot) { font-size: var(--tekst-s); color: var(--ink-2); line-height: 1.45; }
.n-tl--engine .n-engine-noten { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding-top: .6rem; margin-top: .2rem; border-top: var(--lijn-dun) solid var(--lijn-1); }
.n-tl--engine .n-engine-noten .n-kort { font-size: var(--tekst-xs); color: var(--ink-3); line-height: 1.45; }
.n-tl--engine .n-engine-noten .n-kort [data-telling] { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.n-engine .n-engine-stappen { grid-template-columns: minmax(0, 1fr); }
.n-engine .n-engine-vak-inhoud { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.n-engine .n-engine-vak-inhoud > p { margin: 0; }
.n-engine .n-engine-vak-inhoud > .n-hulp { margin-bottom: -.35rem; }
.n-engine .n-engine-lijst li { align-items: flex-start; line-height: 1.5; }
.n-engine .n-engine-lijst .n-ico { align-self: flex-start; margin-top: .25em; }
.n-engine .n-engine-lijst [data-telling] { min-width: 2.5ch; text-align: right; }
.n-engine .n-engine-voet { padding-top: .75rem; border-top: var(--lijn-dun) solid var(--lijn-1); }
@container (min-width: 44rem) {
  .n-engine .n-engine-stappen .n-vak { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: 1.5rem; align-items: start; padding: 1.25rem 1.5rem; }
  .n-engine .n-engine-stappen .n-vak-kop { padding-top: .1rem; }
  .n-engine .n-engine-vak-inhoud { max-width: 48rem; }
}
@container (max-width: 34rem) {
  .n-engine .n-engine-rij { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico t pijl" ". d pijl"; row-gap: .1rem; }
  .n-engine .n-engine-rij > .n-ico:first-child { grid-area: ico; }
  .n-engine .n-engine-rij .n-rij-t { grid-area: t; }
  .n-engine .n-engine-rij .n-kort { grid-area: d; }
  .n-engine .n-engine-rij .n-engine-pijl { grid-area: pijl; }
  .n-tl--engine .n-engine-cijfer { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; min-height: 0; }
  .n-tl--engine .n-engine-noten { align-items: flex-start; }
}
/* (27/10) Meting sluiten wacht op de lezing (meting.js, dialog[data-lezing]): de regels en de keuze tonen alleen als ze aan staan. */
.n-dialoog [hidden] { display: none !important; }
.n-lezing { margin: 0; display: flex; gap: var(--ruimte-2); align-items: center; font-size: var(--tekst-s); color: var(--ink-2); }
.n-lezing svg { width: 1em; height: 1em; flex: none; }
.n-lezing[role="alert"] { color: var(--sem-aandacht); }
/* (V2lite W5) Na de meting: de terugkoppeling aan deelnemers. Per deel een vinkje en het blok zoals deelnemers het
   zien; daarna de stand (gepubliceerd op …) met Intrekken. Geen eigen kleuren: de tokens van S4. */
.n-s4-terug { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.n-terug-voorbeeld { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.n-terug-deel { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem .9rem; border: 1px solid var(--lijn-2); border-radius: var(--n-radius); background: var(--vlak-1); min-width: 0; cursor: pointer; }
.n-terug-deel input { margin-top: .2rem; flex: none; accent-color: var(--accent); }
.n-terug-deel:has(input:not(:checked)) .n-terug-blok { opacity: .85; }  /* (JU) .55 gaf het AI-merk 2,6:1; .85 haalt 4,5:1 in licht en donker */
.n-terug-blok { display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline; min-width: 0; }
.n-terug-blok > b { flex-basis: 100%; font-weight: 600; }
.n-terug-zin { flex-basis: 100%; color: var(--ink-1); }
.n-terug-voet { margin: 0; font-size: var(--tekst-s); color: var(--ink-2); }
.n-terug-rij { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.n-terug-rij form { margin: 0; }
.n-terug-form { display: flex; flex-direction: column; gap: .75rem; }
/* (V2lite E1) Na de meting: de keuze die er ligt met "Wijzig deze keuze" (P1-13), en per eerdere meting met een
   publicatie die deelnemers nog zien een rij met Intrekken (B30-01). Geen eigen kleuren. */
.n-s4-keuze { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: 0; color: var(--ink-1); }
.n-wijzig { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.n-wijzig > summary { list-style: none; align-self: flex-start; }
.n-wijzig > summary::-webkit-details-marker { display: none; }
.n-wijzig[open] > summary { margin-bottom: .75rem; }
.n-terug-eerder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
/* (V2lite G3b) Na de meting: hoogstens drie beslissingen als lijst, elk met Wijzig en Intrekken (bevestiging zoals
   Vastleggen); wie wijzigt, ziet Intrekken van die rij niet. "Beslissing erbij" opent hetzelfde formulier. Geen eigen
   kleuren; de rijen delen de lijnen van de tokens. */
.n-s4-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.n-s4-rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; padding: .6rem 0; border-top: var(--lijn-dun) solid var(--lijn-1); }
.n-s4-rij:last-child { border-bottom: var(--lijn-dun) solid var(--lijn-1); }
.n-s4-rij > .n-s4-keuze { flex: 1 1 16rem; min-width: 0; }
.n-s4-rij > .n-kort { margin: 0; }
.n-s4-knoppen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .4rem; }
.n-s4-knoppen:has(> .n-wijzig[open]) { flex-basis: 100%; }
.n-s4-knoppen > .n-wijzig[open] { flex: 1 1 100%; }
.n-wijzig[open] + .n-intrek { display: none; }
.n-erbij { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.n-erbij > summary { list-style: none; align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; }
.n-erbij > summary::-webkit-details-marker { display: none; }
.n-erbij > summary svg { width: 1rem; height: 1rem; }
.n-beslissing .n-seg:not(:has(label + label)) { justify-self: start; }  /* alleen Actie: geen lege rest van de rij */

/* (V2lite D2) Codes: de waarschuwing "één keer getoond" staat boven de kaartjes met Printvel en CSV ernaast; de lijst van
   Codes bijmaken (was een eigen <style>-blok in codes.html). */
.n-codes-let { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ruimte-3); }
.n-codes-let .fw-melding-tekst { flex: 1 1 16rem; min-width: 0; }
.n-codes-let .n-knoppen { flex: 0 0 auto; }
@media print { .n-codes-let { display: none !important; } }
.fw-uitgifte { list-style: none; padding: 0; display: grid; gap: var(--ruimte-3) var(--ruimte-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.fw-uitgifte li { break-inside: avoid; }
.fw-uitgifte code { font-family: var(--font-mono); font-size: var(--tekst-xl); letter-spacing: 0.04em; white-space: nowrap; }


/* (V2lite D4) Toegang: de herstelcodes (één blok met Kopiëren en Afdrukken), de banner op /account, de acties op Gebruikers.
   Afdrukken laat alleen het blok staan: de knop zet fw-druk-codes op <body>; zonder die klasse verdwijnen alleen de knoppen. */
.fw-codeblok { display: flex; flex-direction: column; gap: var(--ruimte-3); margin-block: var(--ruimte-3); }
.fw-codeblok [data-codes] { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ruimte-2); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.fw-codeblok [data-codes] li { border: 1px solid var(--lijn-1); border-radius: var(--radius-2, 8px); background: var(--vlak-1); padding: var(--ruimte-2) var(--ruimte-3); }
.fw-codeblok [data-codes] code { font-size: 1.05rem; letter-spacing: .04em; white-space: nowrap; }
.fw-banner-links { list-style: none; margin: var(--ruimte-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ruimte-2) var(--ruimte-4); }
.fw-acties { gap: var(--ruimte-2); align-items: center; justify-content: flex-start; }
.fw-acties form { margin: 0; }
.fw-tabel--stapel td:has(> .fw-acties) { grid-column: 1 / -1; }
@media print {
  .fw-geenprint { display: none !important; }
  body.fw-druk-codes .fw-hoofd, body.fw-druk-codes .fwapp-nav, body.fw-druk-codes main > :not(.fw-codeblok) { display: none !important; }
}
/* (V2lite D3) Lezen: de regel "Grovere cijfers" bovenaan het paneel van een groep met een slot (P1-3). Na de meting:
   Vastleggen opent eerst een bevestiging, zonder JS (details, P1-13); de sinds-chip draagt "niet erdoor" en mag over
   twee regels lopen (P1-5). */
.n-grof { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; font-size: var(--tekst-s); color: var(--ink-2); }
.n-grof .n-ico { display: inline-flex; flex: none; }
.n-grof svg { width: 1rem; height: 1rem; }
.n-bevestig { position: relative; }
.n-bevestig > summary { list-style: none; white-space: nowrap; }
.n-bevestig > summary::-webkit-details-marker { display: none; }
.n-bevestig-paneel { position: absolute; z-index: 20; top: calc(100% + .4rem); right: 0; width: min(20rem, 80vw); display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; background: var(--vlak-1); border: 1px solid var(--lijn-2); border-radius: 10px; padding: .75rem .85rem; box-shadow: var(--schaduw-2); }
.n-bevestig-paneel p { margin: 0; font-size: var(--tekst-s); color: var(--ink-2); }
.n-bevestig-paneel b { color: var(--ink-1); }
/* (H5, P2-8) Intrekken in een lijst: het paneel schuift de volgende rij mee en ligt er niet overheen */
.n-intrek .n-bevestig-paneel { position: static; width: auto; margin-top: .5rem; box-shadow: none; }
.n-s4-knoppen:has(> .n-intrek[open]) { flex-basis: 100%; }
.n-intrek[open] > .n-bevestig-paneel { max-width: 36rem; }
@container (max-width: 40rem) {
  .n-s4-form .n-beslissing .n-bevestig { justify-self: start; }
  .n-bevestig-paneel { position: static; width: auto; margin-top: .5rem; box-shadow: none; }
}
.n-tl-chip--sinds { flex-wrap: wrap; justify-content: center; row-gap: .1rem; }
.n-tl-chip--sinds small { font-size: var(--tekst-xs); }

/* (G6) Past niet: een label melden. De knop en "Gemeld" staan onder de labelkaart; de dialoog is een popover (zonder script). */
.n-label-acties { display: flex; align-items: center; gap: var(--ruimte-2); flex-wrap: wrap; margin-top: auto; }
.n-label-acties form { margin: 0; }
.n-label-acties .fw-knop--tertiair { padding-inline: 0; font-size: var(--tekst-s); }
.n-gemeld { font-size: var(--tekst-s); color: var(--ink-3); }
.n-melden { border: 1px solid var(--lijn-2); border-radius: var(--radius-2, 12px); padding: var(--ruimte-5); width: min(28rem, calc(100vw - 2rem)); background: var(--vlak-1); color: var(--ink-1); }
.n-melden::backdrop { background: rgb(0 0 0 / 0.45); }
.n-melden form { display: flex; flex-direction: column; gap: var(--ruimte-3); }
.n-melden h4 { margin: 0; }
.n-melden-keuzes { display: flex; flex-direction: column; gap: var(--ruimte-2); border: 0; margin: 0; padding: 0; }
.n-melden-keuzes label { display: flex; align-items: center; gap: var(--ruimte-2); cursor: pointer; min-height: 2rem; }
.n-melden-keuzes input { accent-color: var(--accent); }
.n-melden .fw-hulp { margin: 0; }
.fw-melding-lijst, .fw-melding-teksten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ruimte-3); }
.fw-melding-teksten { margin-top: var(--ruimte-2); gap: var(--ruimte-1, .25rem); font-size: var(--tekst-s); }
.fw-melding-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ruimte-3); flex-wrap: wrap; }
.fw-meldingen { margin-top: var(--ruimte-4); }
/* (V2lite G4) Antwoorden: per groep een ring, nooit een getal. Open = stippelring in neutraal; vol = accent met vinkje
   (de vorm draagt de stand, niet alleen de kleur). Meer dan vier groepen: een compacte lijst. */
.n-opkomst { display: flex; flex-direction: column; gap: var(--ruimte-3); }
.n-opkomst + details.n-nieuw-in { margin-top: var(--ruimte-5); }
.n-ringen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ruimte-3); }
.n-ringen li { display: flex; align-items: center; gap: var(--ruimte-3); min-width: 0; }
.n-ring-vak { display: inline-flex; flex: none; }
.n-ring-naam { min-width: 0; overflow-wrap: break-word; font-weight: 500; }
.n-ring { width: 1.75rem; height: 1.75rem; flex: none; }
.n-ring circle { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 3 3.1; }
.n-ring--vol circle { fill: var(--accent); stroke: var(--accent); stroke-dasharray: none; }
.n-ring--vol path { fill: none; stroke: var(--accent-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.n-ring-uitleg { margin: 0; display: flex; flex-wrap: wrap; gap: var(--ruimte-2) var(--ruimte-4); font-size: var(--tekst-xs); color: var(--ink-2); }
.n-ring-uitleg span { display: inline-flex; align-items: center; gap: .35rem; }
.n-ring-uitleg .n-ring { width: 1rem; height: 1rem; }
.n-opkomst--lijst .n-ringen { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--ruimte-2) var(--ruimte-4); }
.n-opkomst--lijst .n-ringen li { gap: var(--ruimte-2); font-size: var(--tekst-s); }
.n-opkomst--lijst .n-ring { width: 1.15rem; height: 1.15rem; }

/* (H5, P1-7) het aandeel 9–10 onder de verwachting: een eigen regel, nooit midden in 9–10 afgebroken */
.n-geheugen .n-lus-zelf { display: block; white-space: nowrap; }

/* (J4, J-P1-1a) de kop zonder score: een slot en de zin van de i, neutraal (afgeschermd is geen oordeel) */
.n-kern-weg { margin: 0; display: flex; align-items: center; gap: .4rem; color: var(--ink-2); }
.n-kern-weg .n-ico { color: var(--ink-3); flex: none; }
/* (J4, J-P2-8) wat nog komt: één stille regel bij de kop, geen stippelkaart */
.n-binnenkort-regel { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--tekst-xs); color: var(--ink-3); }
.n-binnenkort-regel .n-badge { border: 1px solid var(--lijn-2); border-radius: 999px; padding: 0 .45rem; font-size: var(--tekst-xs); }
/* (J4, J-P2-1) Iedereen samen: "Aantal codes" op één regel naast de naam */
.n-codes-aantal { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--tekst-s); color: var(--ink-2); }
.n-codes-aantal input { width: 5.5rem; }
/* (J4, J-P2-2) tot de eerste keuze een neutrale duim zonder gevuld spoor: de schuif zegt niets voor u gekozen hebt */
.n-schuif[data-leeg] input[type="range"] { -webkit-appearance: none; appearance: none; height: .35rem; border-radius: 999px; background: var(--lijn-2); opacity: 1; }
.n-schuif[data-leeg] input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--vlak-1); border: 2px solid var(--ink-3); }
.n-schuif[data-leeg] input[type="range"]::-moz-range-thumb { width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--vlak-1); border: 2px solid var(--ink-3); }
.n-schuif[data-leeg] input[type="range"]::-moz-range-progress { background: transparent; }
/* (J4, bij JB3) "Waarom?" in het Voorstel: open neemt de uitleg de volle breedte van de kaart onder de bronchip, nooit
   een smalle kolom naast de chip; het AI-merk blijft een merk in de regel (geen grijze balk) */
.n-voorstel .n-vink-r details.n-waarom[open] { flex-basis: 100%; }
.n-voorstel details.n-waarom > div { max-width: 100%; }
.n-waarom .fw-aimerk { display: inline-block; margin-right: .3rem; }
/* (J4, U11) "Naar de inhoud": buiten beeld tot hij de focus krijgt, dan linksboven over de kop */
.fw-naar-inhoud { position: absolute; left: var(--goot, 1rem); top: -4rem; z-index: 50; padding: .6rem .9rem; border-radius: 10px; background: var(--vlak-omkeer); color: var(--ink-omkeer); font-weight: 600; text-decoration: none; }
.fw-naar-inhoud:focus { top: .5rem; }
main#inhoud:focus { outline: none; }
/* (J4, J-P2-6) Publicatie intrekken: open neemt de bevestiging een eigen regel onder de rij, zoals Beslissing intrekken */
.n-terug-rij > .n-pub-intrek[open] { flex-basis: 100%; }
.n-pub-intrek .n-bevestig-paneel { position: static; width: auto; margin-top: .5rem; box-shadow: none; }
.n-pub-intrek[open] > .n-bevestig-paneel { max-width: 36rem; }

/* ==========================================================================
   (V2lite J5, U8) Tikdoelen op een smal scherm. Op <= 40rem heeft elk klikbaar element een raakvlak van ten minste
   --tik x --tik (44 px, WCAG 2.5.5); op desktop verandert niets. Twee soorten, beide hier gebundeld:
   1. echte maat (het beeld wordt iets hoger): knoppen, menupillen, samenvattingen, chips, velden, links die alleen staan;
   2. onzichtbaar raakvlak (::after, het beeld blijft): de i, icoonknoppen, Waarom?.
   Gemeten door tests/v2/ui/test_ui_laag2.py (tikdoel.js: wat een vinger raakt, ook via ::after).
   ========================================================================== */
@media (max-width: 40rem) {
  /* 1. echte maat */
  .fw-knop, .fw-knop.fw-knop, .n-opname .fw-knop, .n-rij .fw-knop, .n-themakaart .knoppen .fw-knop, .fw-knop.sb-klein, .fw-hoofd-rechts .fw-knop--tertiair, .fw-knop--gevaar.sb-weg { min-height: var(--tik); min-width: var(--tik); }
  .fw-woordmerk, .fw-hoofd-rechts a, .fw-hoofd-rechts .fw-knop--tertiair { display: inline-flex; align-items: center; min-height: var(--tik); }
  .fw-hoofd-rij { padding-block: var(--ruimte-1); row-gap: 0; }  /* de links dragen zelf 44 px: de kop blijft zo laag als kan */
  .fw-plek, .n-stappen .fw-plek, .fw-org-chip, .n-chip, .n-tl-chip--sinds { display: inline-flex; align-items: center; min-height: var(--tik); }
  details.n-meer-klein > summary, details.n-samengevoegd > summary, details.sb-plus > summary, details.n-tl-sinds > summary { min-height: var(--tik); }
  details.n-niet > summary, details.n-alles > summary, details.n-uitklap > summary { display: flex; align-items: center; min-height: var(--tik); }
  .fw-kruimel a, .fw-ctx-open, .fw-ctx-terug, .tk-terug, .fw-diep-packnaam, .fw-org-naam, .n-uitleg > p > a, .n-toevoegen { display: inline-flex; align-items: center; min-height: var(--tik); }
  .fw-kruimel a { min-width: var(--tik); }
  .fw-naar-inhoud { display: inline-flex; align-items: center; min-height: var(--tik); }  /* (J4, U11) zodra hij de focus heeft */
  .fw-invoer, .n-opname .fw-invoer, .n-groep .fw-invoer, .n-as-invoer, .n-wie .n-as-naam .n-as-invoer, .n-cv-invoer, .n-schuif input { min-height: var(--tik); }
  .n-vink, .n-melden-keuzes label { min-height: var(--tik); align-content: center; }
  .n-cv-k { position: relative; z-index: 1; min-width: var(--tik); min-height: var(--tik); margin-block: -.85rem; }
  .tk-kaart .tk-vorige { width: var(--tik); height: var(--tik); }
  /* een kop met een i die op een tweede regel valt (met andere letters gebeurt dat): de 44 px van de i mag niet over de
     knop of link op de regel eronder liggen */
  .n-sectie { row-gap: var(--ruimte-3); }

  /* 2. onzichtbaar raakvlak: het element blijft zoals het is, een ::after maakt het raakvlak 44 x 44 */
  details.n-i > summary, .n-icoknop, .n-cv-plus, details.n-waarom > summary { position: relative; z-index: 1; }
  details.n-i > summary::after, .n-icoknop::after, .n-cv-plus::after, details.n-waarom > summary::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--tik)); height: max(100%, var(--tik)); transform: translate(-50%, -50%);
  }
}