/* ============================================================
   Offertekeuring — app-laag
   ------------------------------------------------------------
   De handoff-bundle levert de componenten als React/inline-styles.
   Deze laag hertaalt ze naar server-render-vriendelijke CSS-klassen,
   met exact de waarden uit de token-CSS (ds/*.css). Niets hier
   herdefinieert een token; alles leest var(--…).

   Volgorde: tier-schakelaar · schil · typografie-helpers · knoppen ·
   kaarten/overzicht · eindverdict · notitieblok · inklapbaar ·
   checklist · veld · uploadzone · voortgang · vraagkaart · htmx.
   ============================================================ */

/* ---- Tier-schakelaar -------------------------------------------------
   Eén klasse zet drie custom-props; tierpill, kaartstrip en eindverdict
   lezen ze. Tier-kleuren zijn functioneel gereserveerd (alleen verdicts). */
.t-goed              { --_taccent: var(--tier-goed);   --_tfill: var(--tier-goed-fill);   --_tborder: var(--tier-goed-border);   --_ttext: var(--tier-goed-text); }
.t-let_op            { --_taccent: var(--tier-letop);  --_tfill: var(--tier-letop-fill);  --_tborder: var(--tier-letop-border);  --_ttext: var(--tier-letop-text); }
.t-risico            { --_taccent: var(--tier-risico); --_tfill: var(--tier-risico-fill); --_tborder: var(--tier-risico-border); --_ttext: var(--tier-risico-text); }
.t-onvoldoende_data  { --_taccent: var(--tier-onvol);  --_tfill: var(--tier-onvol-fill);  --_tborder: var(--tier-onvol-border);  --_ttext: var(--tier-onvol-text); }

/* SVG-iconen: blok, krimpt niet (Lucide-geometrie via macro) */
.ok-icon { display: block; flex-shrink: 0; }

/* ---- Skip-link (toetsenbord/a11y): verschijnt op focus ------------- */
.ok-skiplink {
  position: absolute; left: var(--space-3); top: -3rem; z-index: 10;
  background: var(--accent); color: var(--ink-inverse); text-decoration: none;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-1);
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  transition: top var(--dur-fast) var(--ease-standard);
}
.ok-skiplink:focus { top: var(--space-3); color: var(--ink-inverse); }

/* ---- PaginaSchil: header · content · footer ------------------------- */
.ok-page   { min-height: 100%; display: flex; flex-direction: column; background: var(--paper); }
.ok-header { border-bottom: var(--border-w) solid var(--rule); background: var(--paper); }
.ok-header__in,
.ok-footer__in {
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--space-4) var(--page-gutter);
}
.ok-header__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.ok-wordmark {
  font-family: var(--font-sans); font-weight: var(--weight-bold);
  letter-spacing: -0.02em; line-height: 1; color: var(--accent);
  text-decoration: none; white-space: nowrap; font-size: 1.25rem;
}
.ok-wordmark--muted { color: var(--ink); }
.ok-header__anker { font-size: var(--text-label); font-weight: var(--weight-semibold); color: var(--ink-2); text-decoration: none; }

.ok-main {
  flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto;
  padding: 28px 20px 64px; box-sizing: border-box;
}
.ok-footer { border-top: var(--border-w) solid var(--rule); background: var(--paper); margin-top: var(--space-8); }
.ok-footer__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.ok-footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.ok-footer__nav a { font-size: var(--text-meta); color: var(--ink-3); text-decoration: none; }
.ok-footer__nav a:hover { color: var(--accent-hover); }
.ok-footer__verval {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--text-meta);
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}

/* ---- Layout-helpers ------------------------------------------------- */
.ok-stack  { display: grid; gap: var(--space-5); }
.ok-stack--tight { display: grid; gap: var(--space-3); }
.ok-kop    { display: grid; gap: 10px; padding-top: var(--space-2); }
.ok-kicker {
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3);
}
.ok-h1     { margin: 0; font-size: clamp(1.7rem, 7vw, var(--text-h1)); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.ok-lead   { font-size: var(--text-lead); line-height: var(--leading-snug); color: var(--ink-2); margin: 0; text-wrap: pretty; }
.ok-mono   { font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: var(--tracking-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ok-h2     { margin: var(--space-2) 0 0; font-size: var(--text-h2); font-weight: var(--weight-bold); letter-spacing: -0.01em; }

/* ---- Knoppen -------------------------------------------------------- */
.ok-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans); font-size: var(--text-body-sm); font-weight: var(--weight-semibold);
  line-height: 1.1; text-decoration: none; border-radius: var(--radius-1); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.ok-btn--sm { padding: var(--space-2) var(--space-3); font-size: var(--text-label); gap: var(--space-2); }
.ok-btn--lg { padding: var(--space-4) var(--space-6); font-size: var(--text-body); gap: var(--space-3); }
.ok-btn--primary   { background: var(--accent); color: var(--ink-inverse); border: var(--border-w) solid var(--accent); }
.ok-btn--primary:hover   { background: var(--accent-hover); border-color: var(--accent-hover); }
.ok-btn--secondary { background: transparent; color: var(--ink); border: var(--border-w-strong) solid var(--rule-strong); }
.ok-btn--secondary:hover { border-color: var(--ink); }
.ok-btn--ghost     { background: transparent; color: var(--accent); border: var(--border-w-strong) solid transparent; }
.ok-btn--ghost:hover     { background: var(--accent-soft); }
.ok-btn[disabled], .ok-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.ok-btn:disabled:hover { background: var(--accent); border-color: var(--accent); }

.ok-tekstlink {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-3); font-family: var(--font-sans); font-size: var(--text-label);
  text-decoration: underline; text-underline-offset: 0.14em;
}
.ok-tekstlink--accent { color: var(--accent); font-weight: var(--weight-semibold); }

/* ---- TierPill ------------------------------------------------------- */
.ok-tierpill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--_tfill); border: var(--border-w) solid var(--_tborder);
  border-radius: var(--radius-pill); color: var(--ink);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-sans); font-size: var(--text-label); font-weight: var(--weight-semibold);
  line-height: 1; letter-spacing: 0.01em; white-space: nowrap;
}
.ok-tierpill .ok-icon { color: var(--_taccent); }
.ok-tierpill--compact { gap: var(--space-1); padding: 2px var(--space-2); font-size: var(--text-meta); }

/* ---- Eyebrow / herkomstregel-separator ------------------------------ */
.ok-eyebrow {
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3);
}
.herkomst .sep { color: var(--rule-strong); padding: 0 0.5ch; }
.herkomst .nw  { white-space: nowrap; }

/* ---- BevindingKaart ------------------------------------------------- */
.ok-kaart {
  position: relative; background: var(--surface-card);
  border: var(--border-w) solid var(--border-card);
  border-left: var(--border-accent-w) solid var(--_taccent);
  border-radius: var(--radius-2); box-shadow: var(--shadow-paper);
  padding: var(--space-4) var(--space-5);
}
.ok-kaart--compact { padding: var(--space-3) var(--space-4); }
.ok-kaart--hero    { padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-lift); }
.ok-kaart__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.ok-kaart--compact .ok-kaart__head { margin-bottom: var(--space-2); }
.ok-kaart__bewijs { margin: 0; color: var(--ink-2); font-size: var(--text-body); line-height: var(--leading-body); text-wrap: pretty; }
.ok-kaart--compact .ok-kaart__bewijs { font-size: var(--text-body-sm); }
.ok-kaart--hero .ok-kaart__bewijs { font-size: var(--text-lead); font-weight: var(--weight-medium); }
.ok-kaart__voet { margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--border-w) solid var(--rule); }
.ok-kaart--compact .ok-kaart__voet { margin-top: var(--space-2); padding-top: var(--space-2); }

/* Opt-out-notitieregel (vervangt opbrengst+roi-kaarten wanneer verborgen) */
.ok-optout {
  margin: 0; padding: var(--space-3) var(--space-4);
  background: var(--surface-card); border: var(--border-w) solid var(--border-card);
  border-radius: var(--radius-2); font-size: var(--text-body-sm);
  line-height: var(--leading-body); color: var(--ink-2);
}

/* ---- DimensieOverzicht ---------------------------------------------- */
.ok-overzicht {
  background: var(--surface-card); border: var(--border-w) solid var(--border-card);
  border-radius: var(--radius-2); box-shadow: var(--shadow-paper); overflow: hidden;
}
.ok-overzicht__kop {
  padding: var(--space-3) var(--space-4); border-bottom: var(--border-w) solid var(--rule);
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3);
}
.ok-overzicht__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.ok-overzicht__lijst > li { border-bottom: var(--border-w) solid var(--rule); border-right: var(--border-w) solid var(--rule); }
.ok-overzicht__rij {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); text-decoration: none; color: var(--ink);
  transition: background var(--dur-fast) var(--ease-standard);
}
a.ok-overzicht__rij:hover { background: var(--surface-2); }
.ok-overzicht__label { font-size: var(--text-body-sm); font-weight: var(--weight-medium); }

/* ---- EindVerdict ---------------------------------------------------- */
.ok-eindverdict {
  background: var(--surface-card); border: var(--border-w) solid var(--border-card);
  border-left: 6px solid var(--_taccent); border-radius: var(--radius-2);
  box-shadow: var(--shadow-paper); padding: var(--space-6);
}
.ok-eindverdict__eyebrow { margin-bottom: var(--space-3); }
.ok-eindverdict__rij { display: flex; align-items: center; gap: var(--space-3); }
.ok-eindverdict__glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-1);
  background: var(--_tfill); border: var(--border-w) solid var(--_tborder); color: var(--_taccent);
}
.ok-eindverdict__woord { font-size: var(--text-display); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: 1; color: var(--ink); }
.ok-eindverdict__regel { margin: var(--space-4) 0 0; max-width: 38ch; font-size: var(--text-lead); line-height: var(--leading-snug); color: var(--ink-2); text-wrap: pretty; }

/* ---- NotitieBlok ---------------------------------------------------- */
.ok-notitie {
  border-radius: var(--radius-2); padding: var(--space-4) var(--space-5);
  display: flex; gap: var(--space-3);
  border: var(--border-w) solid var(--_nborder); border-left: var(--border-accent-w) solid var(--_nleft);
  background: var(--_nbg);
}
.ok-notitie--buiten_scope { --_nbg: var(--paper-sunk);  --_nborder: var(--rule);          --_nleft: var(--rule-strong);  --_nicon: var(--ink-3); }
.ok-notitie--disclaimer   { --_nbg: var(--accent-soft); --_nborder: var(--accent-border); --_nleft: var(--accent);       --_nicon: var(--accent); }
.ok-notitie--stop         { --_nbg: var(--surface);     --_nborder: var(--tier-risico-border); --_nleft: var(--tier-risico); --_nicon: var(--tier-risico); padding: var(--space-5) var(--space-6); }
.ok-notitie__icon { color: var(--_nicon); margin-top: 2px; flex-shrink: 0; }
.ok-notitie__body { flex: 1; }
.ok-notitie__titel {
  font-size: var(--text-label); font-weight: var(--weight-semibold); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--ink-3); margin-bottom: var(--space-2);
}
.ok-notitie--stop .ok-notitie__titel { font-size: var(--text-h3); text-transform: none; letter-spacing: 0; color: var(--ink); }
.ok-notitie__tekst { margin: 0; font-size: var(--text-body-sm); color: var(--ink-2); line-height: var(--leading-body); }
.ok-notitie__lijst { margin: 0; padding-left: 1.1em; display: grid; gap: var(--space-1); color: var(--ink-2); font-size: var(--text-body-sm); }

/* ---- InklapbareGroep (native <details>) ----------------------------- */
.ok-inklap {
  background: var(--surface-card); border: var(--border-w) solid var(--border-card);
  border-radius: var(--radius-2); box-shadow: var(--shadow-paper); overflow: hidden;
}
.ok-inklap > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); user-select: none;
}
.ok-inklap > summary::-webkit-details-marker { display: none; }
.ok-inklap__chevron { color: var(--ink-3); transition: transform var(--dur-base) var(--ease-standard); }
.ok-inklap[open] > summary .ok-inklap__chevron { transform: rotate(180deg); }
.ok-inklap__titel { font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--ink); }
.ok-inklap__sam { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ok-inklap__body { padding: 0 var(--space-5) var(--space-5); display: grid; gap: var(--space-3); }

/* ---- Checklist ------------------------------------------------------ */
.ok-checklist {
  background: var(--surface-card); border: var(--border-w) solid var(--border-card);
  border-radius: var(--radius-2); box-shadow: var(--shadow-paper); overflow: hidden;
}
.ok-checklist__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: var(--border-w) solid var(--rule); }
.ok-checklist__head h3 { font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--ink); flex: 1; margin: 0; }
.ok-checklist__copy {
  display: inline-flex; align-items: center; gap: var(--space-2); background: transparent;
  border: var(--border-w) solid var(--rule-strong); border-radius: var(--radius-1);
  padding: var(--space-2) var(--space-3); color: var(--accent); cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-label); font-weight: var(--weight-semibold); white-space: nowrap;
}
.ok-checklist__copy[data-gekopieerd="1"] { color: var(--tier-goed-text); }
.ok-checklist__lijst { list-style: none; margin: 0; padding: var(--space-2) 0; }
.ok-checklist__lijst li { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-5); font-size: var(--text-body); color: var(--ink-2); line-height: var(--leading-snug); }
.ok-checklist__bullet { width: 8px; height: 8px; margin-top: 0.55em; flex-shrink: 0; background: var(--accent); }

/* ---- Veld (forms) --------------------------------------------------- */
.ok-veld { display: grid; gap: var(--space-2); }
.ok-veld__label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-label); font-weight: var(--weight-semibold); color: var(--ink); }
.ok-veld__label .ok-icon { color: var(--ink-3); }
.ok-veld__box {
  display: flex; align-items: stretch; background: var(--surface);
  border: var(--border-w-strong) solid var(--rule-strong); border-radius: var(--radius-1); overflow: hidden;
}
.ok-veld__box--locked { background: var(--paper-sunk); }
.ok-veld__box--error  { border-color: var(--tier-risico-border); }
.ok-veld__box input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  padding: var(--space-3); font-family: var(--font-sans); font-size: var(--text-body);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.ok-veld__affix {
  display: inline-flex; align-items: center; padding: 0 var(--space-3); background: var(--surface-2);
  color: var(--ink-3); font-size: var(--text-body-sm); font-variant-numeric: tabular-nums;
}
.ok-veld__affix--prefix { border-right: var(--border-w) solid var(--rule); }
.ok-veld__affix--suffix { border-left: var(--border-w) solid var(--rule); font-family: var(--font-mono); }
.ok-veld__hint  { margin: 0; font-size: var(--text-meta); color: var(--ink-3); line-height: 1.4; }
.ok-veld__error { margin: 0; display: flex; gap: var(--space-2); font-size: var(--text-meta); color: var(--tier-risico-text); line-height: 1.4; }
.ok-veld__error .ok-icon { margin-top: 1px; flex-shrink: 0; }
.ok-veld__reward {
  border: var(--border-w-strong) dashed var(--accent-border); background: var(--accent-soft);
  border-radius: var(--radius-1); padding: var(--space-3) var(--space-4);
  display: flex; align-items: flex-start; gap: var(--space-3);
}
.ok-veld__reward .ok-icon { color: var(--accent); margin-top: 2px; }
.ok-veld__reward span { font-size: var(--text-body-sm); color: var(--ink-2); line-height: var(--leading-snug); }
summary.ok-veld__reward { list-style: none; cursor: pointer; }
summary.ok-veld__reward::-webkit-details-marker { display: none; }

/* ---- Controle: groepen + acties ------------------------------------- */
.ok-scopekaart {
  background: var(--surface-card); border: var(--border-w) solid var(--border-card);
  border-radius: var(--radius-2); box-shadow: var(--shadow-paper);
  padding: 22px 24px 28px; display: grid; gap: 26px;
}
.ok-scopekaart__intro { margin: 0; font-size: var(--text-meta); line-height: 1.5; color: var(--ink-3); }
.ok-veldgroep { display: grid; gap: 14px; }
.ok-veldgroep + .ok-veldgroep { border-top: var(--border-w) solid var(--rule); padding-top: 22px; }
.ok-veldgroep__titel {
  margin: 0; font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3);
}
.ok-veldrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 20px; align-items: start; }
.ok-foutregel { margin: 0; font-size: var(--text-body-sm); line-height: var(--leading-body); color: var(--tier-risico-text); }

/* ---- Visueel verborgen (focusbaar — toetsenbordtoegankelijk) -------- */
.ok-vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- UploadZone ----------------------------------------------------- */
.ok-upload { display: grid; gap: var(--space-4); }
.ok-upload__frame {
  border: var(--border-w-strong) dashed var(--rule-strong); background: var(--surface);
  border-radius: var(--radius-2); padding: var(--space-6);
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.ok-upload__frame--solid { border-style: solid; }
.ok-upload__frame--over { border-color: var(--accent); background: var(--accent-soft); }
/* label-knoppen krijgen de focusring als hun verborgen input focus heeft */
.ok-btn:focus-within { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.ok-upload__fouticon { color: var(--tier-risico); margin-top: 2px; flex-shrink: 0; }
.ok-upload__gekozen { margin: 0; font-size: var(--text-body-sm); color: var(--ink-2); }
.ok-upload__gekozen b { font-weight: var(--weight-semibold); color: var(--ink); }
.ok-upload__leeg { display: grid; justify-items: center; text-align: center; gap: var(--space-4); }
.ok-upload__leeg .ok-icon--groot { color: var(--accent); }
.ok-upload__titel { font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--ink); }
.ok-upload__sub   { font-size: var(--text-body-sm); color: var(--ink-3); }
.ok-upload__acties { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.ok-upload__rij { display: flex; align-items: center; gap: var(--space-3); }
.ok-upload__rij--top { align-items: flex-start; }
.ok-upload__naam { font-weight: var(--weight-semibold); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ok-upload__privacy { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ok-upload__privacy li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-meta); color: var(--ink-3); line-height: 1.45; }
.ok-upload__privacy .ok-icon { color: var(--ink-3); margin-top: 2px; }

/* ---- VoortgangStatus ------------------------------------------------ */
.ok-voortgang {
  background: var(--surface-card); border: var(--border-w) solid var(--border-card);
  border-radius: var(--radius-2); box-shadow: var(--shadow-paper); padding: var(--space-5);
  display: grid; gap: var(--space-4);
}
.ok-voortgang__kop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.ok-voortgang__kop h3 { font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--ink); margin: 0; }
.ok-voortgang__tijd { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--ink-3); white-space: nowrap; }
.ok-voortgang__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.ok-voortgang__lijst li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-body); color: var(--ink); }
.ok-stap--wacht  { color: var(--ink-3); }
.ok-stap--bezig  { font-weight: var(--weight-semibold); }
.ok-stap__mark--klaar { color: var(--tier-goed); }
.ok-stap__mark--bezig { color: var(--accent); }
.ok-stap__mark--wacht { color: var(--rule-strong); }

/* ---- Foutkaart (verwerkingsfout / sobere randstaat) ----------------- */
.ok-foutkaart {
  background: var(--surface-card); border: var(--border-w) solid var(--border-card);
  border-radius: var(--radius-2); box-shadow: var(--shadow-paper);
  padding: var(--space-6); display: grid; gap: var(--space-4);
}
.ok-foutkaart__kop { display: flex; align-items: flex-start; gap: var(--space-3); }
.ok-foutkaart__kop h1 {
  margin: 0; font-size: clamp(1.4rem, 5.5vw, 1.75rem); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight); line-height: 1.14; text-wrap: pretty;
}
.ok-foutkaart__icon { color: var(--ink-3); flex-shrink: 0; margin-top: 5px; }
.ok-foutkaart__icon--petrol { color: var(--accent); }
.ok-foutkaart p { margin: 0; }
.ok-foutkaart__tekst { font-size: var(--text-body); line-height: var(--leading-body); color: var(--ink-2); max-width: 54ch; }

/* ---- VraagKaart + AntwoordChip -------------------------------------- */
.ok-vraag {
  background: var(--surface-card); border: var(--border-w) solid var(--border-card);
  border-radius: var(--radius-2); box-shadow: var(--shadow-paper); padding: var(--space-5);
  display: grid; gap: var(--space-4);
}
.ok-vraag__index {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 2px;
  font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: var(--tracking-meta); color: var(--ink-3);
}
.ok-vraag__kop { display: grid; gap: var(--space-2); }
.ok-vraag__kop h3 { font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--ink); margin: 0; }
.ok-vraag__uitleg { margin: 0; display: flex; gap: var(--space-2); font-size: var(--text-body-sm); color: var(--ink-3); line-height: var(--leading-snug); }
.ok-vraag__uitleg .ok-icon { color: var(--ink-3); margin-top: 2px; flex-shrink: 0; }
.ok-vraag__gelezen {
  display: flex; align-items: center; gap: var(--space-3); background: var(--paper-sunk);
  border: var(--border-w) solid var(--rule); border-radius: var(--radius-1); padding: var(--space-3) var(--space-4);
}
.ok-vraag__gelezen-waarde { font-weight: var(--weight-semibold); color: var(--ink); font-variant-numeric: tabular-nums; }
.ok-vraag__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ok-vraag__gevolg { margin: 0; font-family: var(--font-mono); font-size: var(--text-meta); color: var(--ink-3); }

.ok-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); font-family: var(--font-sans);
  font-size: var(--text-body-sm); font-weight: var(--weight-medium);
  border-radius: var(--radius-1); cursor: pointer; background: var(--surface);
  border: var(--border-w-strong) solid var(--rule-strong); color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
/* :checked-driven selectie zonder JS: het label is de chip, de input ligt verstopt */
.ok-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ok-chip:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hover); }
.ok-chip:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }

/* ---- Validatie-samenvatting ----------------------------------------- */
.ok-foutblok {
  background: var(--tier-risico-fill); border: var(--border-w) solid var(--tier-risico-border);
  border-left: var(--border-accent-w) solid var(--tier-risico); border-radius: var(--radius-2);
  padding: var(--space-4) var(--space-5); color: var(--ink-2);
}

/* ---- htmx / motion -------------------------------------------------- */
.htmx-indicator { opacity: 0; transition: opacity var(--dur-base) var(--ease-standard); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}

/* ---- Print ---------------------------------------------------------- */
@media print {
  .ok-header, .ok-footer, .ok-noprint { display: none !important; }
  .ok-main { padding: 0; max-width: none; }
  .ok-kaart, .ok-overzicht, .ok-eindverdict, .ok-inklap, .ok-checklist, .ok-notitie { box-shadow: none; break-inside: avoid; }
  body { background: #fff; }
}