/* check.css · De Ai-geletterdheidscheck (ai-geletterdheidscheck.html).
   De check staat in de hero: links het kader, rechts één glaskaart met een
   dashboard van acht domeinen dat zich vult terwijl je antwoordt, en daarna
   de uitslag met wijzerplaat. Daaronder de tijdlijn van de wet.

   Prefix cgc- (Check Geletterdheid) zodat niets botst met .check* uit oudere
   pagina's of met de generieke .law/.section-klassen in pages.css.

   Statuskleuren zijn hier het enige plek waar kleur buiten het merk-accent
   wordt gebruikt: ze staan alléén op statusmarkeringen, nooit als decoratie. */

/* Klasse-selectors met display:flex/grid winnen van het UA-[hidden].
   Deze pagina schakelt stap, uitslag en tijdlijn-marker via hidden, dus dat
   forceren we hard binnen de check-sectie. */
#check [hidden] { display: none !important; }
html.has-js [data-nojs] { display: none; }

/* De drie statuskleuren. "geregeld" is bewust een groen-cyaan zodat hij
   binnen het koele merkbereik valt in plaats van een stoplicht-groen. */
.cgc-hero,
.cgc-card,
.cgc-time,
.cgc-law {
  --st-ja: #5fe3c0;
  --st-deels: #ffc46b;
  --st-nee: #ff8a8a;
}
/* op licht zijn die drie te bleek; iets dieper zodat ze leesbaar blijven */
html:not([data-theme="dark"]) .cgc-hero,
html:not([data-theme="dark"]) .cgc-card,
html:not([data-theme="dark"]) .cgc-time,
html:not([data-theme="dark"]) .cgc-law {
  --st-ja: #10a487;
  --st-deels: #b47708;
  --st-nee: #d95757;
}

/* ============================================================
   HERO: kader links, kaart rechts
   ============================================================ */
.cgc-hero__grid {
  display: grid;
  gap: clamp(2.4rem, 1.5rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 1000px) {
  .cgc-hero__grid { grid-template-columns: 0.92fr 1.08fr; }
}

/* De hero-kop is kleiner dan op de tekstpagina's: hij deelt de breedte met
   de kaart. Specificiteit (0,3,1) om over `.v2 .subhero h1` (0,2,1) te komen. */
.v2 .cgc-hero h1.cgc-hero__title {
  font-size: clamp(2.3rem, 1.1rem + 3.4vw, 4rem);
  max-width: 15ch;
  line-height: 1.03;
}
.cgc-hero .lead.cgc-hero__lead {
  max-width: 42ch;
  font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.3rem);
}

/* Drie regels geruststelling. Hairlines in plaats van pillen of kaartjes:
   het is bijschrift, geen inhoud die om een eigen vlak vraagt. */
.cgc-assure {
  list-style: none;
  margin: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem) 0 0;
  padding: 0;
  max-width: 40ch;
  border-top: 1px solid var(--line);
}
.cgc-assure li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.45;
}
.cgc-assure svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent-deep);
  opacity: 0.9;
}

/* ============================================================
   DE KAART
   ============================================================ */
.cgc-card {
  --cgc-pad: clamp(1.35rem, 1rem + 2vw, 2.6rem);
  padding: var(--cgc-pad);
  border-radius: var(--r-xl);
}

/* ---------- Het dashboard van acht domeinen ---------- */
.cgc-grid {
  display: grid;
  /* auto-fit: vier op een rij als de kaart breed genoeg is, anders netjes
     twee. Zo klemt "Datagrenzen" nooit tegen de kolom ernaast. */
  grid-template-columns: repeat(auto-fit, minmax(5.6rem, 1fr));
  gap: 0.7rem 0.85rem;
  margin-bottom: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
}
/* Geen randen of vlakken: dit is een statusstrip, geen rij invoervelden.
   Alleen het staafje en het label, zodat het niet aanklikbaar oogt. */
.cgc-cell {
  --cell: color-mix(in srgb, var(--ink) 16%, transparent);
  display: grid;
  gap: 0.45rem;
  padding: 0.15rem 0 0;
}
/* Het staafje dat de status draagt. Het blok is altijd 6px hoog; een niet-
   lopend domein tekent daarbinnen een 3px lijn. Zo groeit het lopende
   staafje zonder dat de rij verspringt. */
.cgc-cell i {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(var(--cell), var(--cell)) center / 100% 3px no-repeat;
  transition: background-color var(--dur-2) var(--ease-out);
}
.cgc-cell b {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-faint);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out);
}
.cgc-cell[data-state="2"] { --cell: var(--st-ja); }
.cgc-cell[data-state="1"] { --cell: var(--st-deels); }
.cgc-cell[data-state="0"] { --cell: var(--st-nee); }
.cgc-cell[data-state] b { color: var(--ink-soft); }
/* het lopende domein: het staafje vult de volle 6px in het merk-accent */
.cgc-cell.is-current i {
  background: var(--grad-accent);
  box-shadow: 0 0 14px var(--accent-glow);
}
.cgc-cell.is-current b { color: var(--ink); }

/* ---------- De vraag ---------- */
.cgc-step__q { min-height: 3.4em; }
.cgc-question {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  max-width: 26ch;
  text-wrap: balance;
}
[data-motion="on"] .cgc-question {
  transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out);
}
[data-motion="on"] .cgc-question.is-leaving { opacity: 0; transform: translateY(8px); }

/* ---------- Antwoorden ---------- */
.cgc-answers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-top: clamp(1.3rem, 1rem + 1.4vw, 2rem);
}
.cgc-answer {
  --tone: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.1rem;
  border-radius: var(--r);
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  color: var(--ink);
  font: inherit;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-align: left;
  transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.cgc-answer--ja { --tone: var(--st-ja); }
.cgc-answer--deels { --tone: var(--st-deels); }
.cgc-answer--nee { --tone: var(--st-nee); }
.cgc-answer:hover { border-color: color-mix(in srgb, var(--tone) 65%, transparent); transform: translateY(-2px); }
.cgc-answer:active { transform: translateY(0) scale(0.98); }
.cgc-answer:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cgc-answer__mark {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 16%, transparent);
  color: var(--tone);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.cgc-answer__mark svg { width: 1rem; height: 1rem; }
.cgc-answer[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--tone) 70%, transparent);
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  box-shadow: 0 12px 30px -18px color-mix(in srgb, var(--tone) 80%, transparent);
}
.cgc-answer[aria-pressed="true"] .cgc-answer__mark {
  background: var(--tone);
  color: var(--bg-contrast);
}

.cgc-step__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 1.2rem;
}
.cgc-step__count { margin-left: auto; margin-right: 0.55rem; }
/* De uitgang. Staat er zodra de check loopt, zodat niemand zich opgesloten
   voelt in de focusstand. Zelfde vorm en woord als op keuzehulp.html. */
.cgc-stop {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.8rem 0.5rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-faint);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out), color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out), visibility 0s linear 0.3s;
}
.cgc-card.is-busy .cgc-stop { opacity: 1; visibility: visible; transition-delay: 0s; }
.cgc-stop svg { width: 14px; height: 14px; }
.cgc-stop:hover { color: var(--ink); border-color: var(--line-strong); }
.cgc-stop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cgc-prev {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.85rem 0.5rem 0.55rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.cgc-prev svg { width: 1.05rem; height: 1.05rem; }
.cgc-prev:hover { color: var(--ink); border-color: var(--line-strong); }
.cgc-prev:disabled { opacity: 0.3; cursor: default; }
.cgc-prev:disabled:hover { color: var(--ink-soft); border-color: transparent; }
.cgc-prev:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cgc-step__count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   UITSLAG
   ============================================================ */
.cgc-result { display: block; }
.cgc-verdict {
  display: grid;
  gap: clamp(1.2rem, 0.8rem + 1.6vw, 2rem);
  align-items: center;
}
@media (min-width: 520px) {
  .cgc-verdict { grid-template-columns: auto 1fr; }
}

/* ---------- De wijzerplaat ---------- */
.cgc-dial-wrap {
  position: relative;
  width: clamp(9rem, 7rem + 7vw, 11.5rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-inline: auto;
}
.cgc-dial { width: 100%; height: 100%; overflow: visible; }
.cgc-dial circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.cgc-dial__track { stroke: color-mix(in srgb, var(--ink) 11%, transparent); }
.cgc-dial__arc {
  stroke: var(--band-color, var(--accent-deep));
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--band-color, var(--accent-2)) 55%, transparent));
  transition: stroke-dasharray 1.35s var(--ease-out) 0.12s, stroke 0.6s var(--ease-out);
}
.cgc-dial__tick {
  stroke: color-mix(in srgb, var(--ink) 26%, transparent);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.cgc-dial__value {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  pointer-events: none;
}
.cgc-dial__value b {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 2rem + 2.4vw, 3.6rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cgc-dial__value small {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.cgc-band {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 0.6rem;
  color: var(--ink);
  text-wrap: balance;
}
.cgc-band::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  margin-right: 0.42em;
  vertical-align: 0.1em;
  background: var(--band-color, var(--accent-2));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--band-color, var(--accent-2)) 20%, transparent);
}
.cgc-band__text {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 46ch;
  margin: 0;
}

/* de band kleurt de wijzerplaat en de stip: één kleur per uitslag */
.cgc-result[data-band="1"] { --band-color: var(--st-nee); }
.cgc-result[data-band="2"] { --band-color: var(--st-deels); }
.cgc-result[data-band="3"] { --band-color: var(--st-ja); }

/* ---------- Openstaande punten ---------- */
.cgc-open {
  margin-top: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}
.cgc-open__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.85rem;
}
.cgc-open__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.cgc-open__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.7rem;
  font-size: var(--fs-small);
  color: var(--ink);
  line-height: 1.45;
}
.cgc-tag {
  display: inline-block;
  min-width: 3.6em;
  text-align: center;
  padding: 0.24em 0.55em;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 0.15em;
  color: var(--tone, var(--ink-soft));
  background: color-mix(in srgb, var(--tone, var(--ink)) 14%, transparent);
}
.cgc-tag--nee { --tone: var(--st-nee); }
.cgc-tag--deels { --tone: var(--st-deels); }
.cgc-open__none { margin: 1.3rem 0 0; color: var(--ink-soft); font-size: var(--fs-small); }

.cgc-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
}

.cgc-restart {
  margin-top: 1.2rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cgc-restart:hover { color: var(--ink); }
.cgc-restart:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ============================================================
   HET PODIUM (podium.js, okt 2026)
   Bij het eerste antwoord zwelt de kaart op tot het hele scherm, net als op
   de keuzehulp. Daar is hij .is-staged: het dashboard bovenin, één vraag
   groot in het midden, drie grote antwoorden. Vorige en Stoppen staan als
   ronde knoppen in de hoeken. De uitslag bouwt zich daar op en krimpt pas
   met "Sluiten" (rechtsboven, podium.css) terug in de hero.
   ============================================================ */
[data-motion="on"] .cgc-question { transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out), filter 0.32s var(--ease-out); }

.cgc-card.is-staged { width: min(860px, 100%); text-align: center; }
.cgc-card.is-staged.is-result { width: min(1000px, 100%); }

.cgc-card.is-staged .cgc-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.6rem 0.7rem;
  margin-bottom: clamp(2.4rem, 1.4rem + 4vh, 4rem);
  text-align: left;
}

/* De vraag: groot en gecentreerd, onderaan uitgelijnd op een vaste hoogte
   van drie regels, zodat de antwoorden niet verspringen per vraag. */
.cgc-card.is-staged .cgc-step__q {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem);
  min-height: 3.3em;
}
.cgc-card.is-staged .cgc-question {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.04em;
  max-width: 21ch;
  margin: 0 auto;
}
[data-motion="on"] .cgc-card.is-staged .cgc-question.is-leaving { opacity: 0; transform: translateY(-16px) scale(0.98); filter: blur(8px); }
[data-motion="on"] .cgc-card.is-staged .cgc-question.is-entering { opacity: 0; transform: translateY(22px); filter: blur(8px); transition: none; }

.cgc-card.is-staged .cgc-answers {
  gap: 12px;
  margin: clamp(2rem, 1.2rem + 3vh, 3rem) auto 0;
  max-width: 720px;
}
.cgc-card.is-staged .cgc-answer {
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  min-height: 132px;
  padding: 1.2rem;
  border-radius: 24px;
  border-color: var(--line);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  font-size: 1.3rem;
  text-align: center;
}
.cgc-card.is-staged .cgc-answer:hover {
  transform: none;
  background: color-mix(in srgb, var(--tone) 10%, transparent);
  border-color: color-mix(in srgb, var(--tone) 55%, transparent);
}
.cgc-card.is-staged .cgc-answer__mark { width: 2.6rem; height: 2.6rem; }
.cgc-card.is-staged .cgc-answer__mark svg { width: 1.25rem; height: 1.25rem; }
.cgc-card.is-staged .cgc-answer[aria-pressed="true"] {
  background: color-mix(in srgb, var(--tone) 18%, transparent);
  border-color: var(--tone);
  box-shadow: 0 0 0 1px var(--tone), 0 24px 60px -28px var(--tone);
}

/* Vorige en Stoppen als ronde knoppen in de hoeken, de teller ertussen. */
.cgc-card.is-staged .cgc-step__foot { margin: 0; }
/* .cgc-step staat elders op relative; dan zouden de hoekknoppen aan de vraag
   hangen in plaats van aan het podium. */
.cgc-card.is-staged .cgc-step { position: static; }
.cgc-card.is-staged .cgc-prev,
.cgc-card.is-staged .cgc-stop {
  position: absolute;
  top: 28px;
  width: 44px;
  height: 44px;
  padding: 0;
  gap: 0;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
  font-size: 0;
}
.cgc-card.is-staged .cgc-prev { left: clamp(16px, 3vw, 40px); }
.cgc-card.is-staged .cgc-stop { right: clamp(16px, 3vw, 40px); }
.cgc-card.is-staged .cgc-prev svg,
.cgc-card.is-staged .cgc-stop svg { width: 18px; height: 18px; }
.cgc-card.is-staged .cgc-prev:hover,
.cgc-card.is-staged .cgc-stop:hover { background: color-mix(in srgb, var(--ink) 13%, transparent); border-color: var(--line); }
.cgc-card.is-staged .cgc-prev:disabled { opacity: 0.3; }
.cgc-card.is-staged .cgc-step__count {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-soft);
}
.cgc-card.pd-ghost .cgc-step__foot { visibility: hidden; }

/* De laatste vraag lost op voordat de uitslag komt. */
[data-motion="on"] .cgc-card.is-staged .cgc-step.is-outro .cgc-step__q,
[data-motion="on"] .cgc-card.is-staged .cgc-step.is-outro .cgc-answers {
  animation: cgcOut 0.4s cubic-bezier(0.4, 0, 0.8, 0.4) both;
}
[data-motion="on"] .cgc-card.is-staged .cgc-step.is-outro .cgc-answers { animation-delay: 0.05s; }

/* De uitslag op het podium: de wijzerplaat groot naast het oordeel, dan de
   openstaande punten in een glazen paneel, dan de knoppen. "Check opnieuw
   doen" staat rechtsboven (podium.css). */
.cgc-card.is-staged .cgc-result { text-align: left; }
.cgc-card.is-staged .cgc-verdict {
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.6rem, 1rem + 3vw, 3.6rem);
  max-width: 860px;
  margin: 0 auto;
}
.cgc-card.is-staged .cgc-dial-wrap { width: clamp(11rem, 8rem + 8vw, 15rem); }
.cgc-card.is-staged .cgc-dial__value b { font-size: clamp(3.4rem, 2.4rem + 3vw, 4.8rem); }
.cgc-card.is-staged .cgc-dial__value small {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
}
.cgc-card.is-staged .cgc-band {
  font-size: clamp(2.2rem, 1.3rem + 3vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin-bottom: 0.9rem;
}
.cgc-card.is-staged .cgc-band__text {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.5;
  max-width: 44ch;
}
.cgc-card.is-staged .cgc-open {
  margin-top: clamp(2.6rem, 1.6rem + 4vh, 4.2rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: 30px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.cgc-card.is-staged .cgc-open__label {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 1.2rem;
}
.cgc-card.is-staged .cgc-open__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.4rem; }
.cgc-card.is-staged .cgc-open__list li { font-size: 1rem; line-height: 1.5; }
.cgc-card.is-staged .cgc-open__none { text-align: center; font-size: 1.1rem; margin-top: 2.4rem; }
.cgc-card.is-staged .cgc-result__actions { justify-content: center; margin-top: clamp(2.2rem, 1.4rem + 3vh, 3.4rem); }
.cgc-card.is-staged .cgc-restart { display: none; }

/* Opbouw: het oordeel, de wijzerplaat die vult, dan de punten en de knoppen. */
[data-motion="on"] .cgc-card.is-staged .cgc-result.is-enter > * {
  animation: cgcIn 0.9s var(--ease-out) both;
  animation-delay: var(--t, 0s);
}
.cgc-card.is-staged .cgc-verdict { --t: 0.1s; }
.cgc-card.is-staged .cgc-open,
.cgc-card.is-staged .cgc-open__none { --t: 0.55s; }
.cgc-card.is-staged .cgc-result__actions { --t: 0.75s; }
@keyframes cgcIn {
  from { opacity: 0; transform: translateY(28px) scale(1.02); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes cgcOut {
  from { opacity: 1; transform: none; filter: blur(0); }
  to { opacity: 0; transform: translateY(-20px) scale(0.97); filter: blur(8px); }
}
/* Telefoon en tablet: dezelfde beweging zonder blur, die haperde daar naast
   het opzwellen van het podium (zie podium.css). */
@media (max-width: 760px), (hover: none) {
  [data-motion="on"] .cgc-card.is-staged .cgc-question.is-leaving,
  [data-motion="on"] .cgc-card.is-staged .cgc-question.is-entering { filter: none; }
  @keyframes cgcIn {
    from { opacity: 0; transform: translateY(28px) scale(1.02); }
    to { opacity: 1; transform: none; }
  }
  @keyframes cgcOut {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(-20px) scale(0.97); }
  }
}

@media (max-width: 760px) {
  .cgc-card.is-staged { text-align: left; }
  .cgc-card.is-staged .cgc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1.8rem; }
  .cgc-card.is-staged .cgc-step__q { font-size: 1.8rem; justify-content: flex-start; min-height: 4.4em; }
  .cgc-card.is-staged .cgc-question { margin: 0; }
  .cgc-card.is-staged .cgc-answers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .cgc-card.is-staged .cgc-answer { min-height: 104px; font-size: 1.1rem; border-radius: 20px; padding: 0.9rem 0.5rem; }
  .cgc-card.is-staged .cgc-prev,
  .cgc-card.is-staged .cgc-stop { top: 18px; }
  .cgc-card.is-staged .cgc-step__count { top: 30px; }
  .cgc-card.is-staged .cgc-verdict { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .cgc-card.is-staged .cgc-dial-wrap { margin: 0; width: 11rem; }
  .cgc-card.is-staged .cgc-open { border-radius: 22px; }
  .cgc-card.is-staged .cgc-open__list { grid-template-columns: minmax(0, 1fr); }
  .cgc-card.is-staged .cgc-result__actions { justify-content: stretch; }
}

/* ---------- Zonder JavaScript ---------- */
.cgc-nojs {
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
  border-radius: var(--r-xl);
}
.cgc-nojs__note { color: var(--ink-soft); margin: 0 0 1rem; }
.cgc-nojs__list { padding-left: 1.3rem; display: grid; gap: 0.55rem; line-height: 1.5; }

/* ============================================================
   TIJDLIJN
   De data staan op ware verhouding op de as (--at per item), niet op
   gelijke afstand: de sprong van 2025 naar 2026 is écht groter.
   ============================================================ */
.cgc-time {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.2rem);
  padding: clamp(1.6rem, 1.2rem + 2vw, 3rem) clamp(1.4rem, 1rem + 2vw, 2.6rem) clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem);
  border-radius: var(--r-xl);
}
.cgc-time__track { position: relative; height: 2.6rem; }
.cgc-time__rail,
.cgc-time__done {
  position: absolute;
  top: 50%;
  left: 0;
  height: 2px;
  border-radius: 999px;
  transform: translateY(-50%);
}
.cgc-time__rail { right: 0; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.cgc-time__done { width: 0; background: var(--grad-accent); transition: width 1.4s var(--ease-out) 0.2s; }

/* "vandaag": de enige marker die beweegt, gezet door check.js */
.cgc-time__now {
  position: absolute;
  top: 50%;
  left: var(--now, 70%);
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
}
.cgc-time__now::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent-deep);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 26%, transparent), 0 0 18px var(--accent-glow);
}
.cgc-time__now b {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  white-space: nowrap;
}

.cgc-time__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}
.cgc-time__item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 0.8rem;
}
.cgc-time__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--bg-2);
  align-self: center;
}
.cgc-time__item.is-past .cgc-time__dot { background: var(--accent-deep); border-color: transparent; }
.cgc-time__item.is-key .cgc-time__dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 24%, transparent); }
.cgc-time__date {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cgc-time__item.is-past .cgc-time__date { color: var(--ink-soft); }
.cgc-time__item.is-key .cgc-time__date { color: var(--accent-deep); }
.cgc-time__what { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.45; }
.cgc-time__item.is-key .cgc-time__what { color: var(--ink); font-weight: 600; }

/* Vanaf tablet klapt de lijst uit tot een echte as: elk item hangt op zijn
   eigen datumpositie onder de rail. */
@media (min-width: 860px) {
  .cgc-time__list {
    position: relative;
    display: block;
    height: 11.5rem;
    margin-top: 0.2rem;
  }
  /* De data liggen niet gelijkmatig: 1 aug 2024 en 2 feb 2025 staan dicht op
     elkaar. Daarom hangen de items om en om op twee hoogtes, zodat een
     cluster ruimte houdt en niets over elkaar valt. Even kinderen (waaronder
     artikel 4) hangen het dichtst bij de as. */
  .cgc-time__item {
    position: absolute;
    top: 5rem;
    left: var(--at);
    width: 11.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
    transform: translateX(-50%);
  }
  .cgc-time__item:nth-child(even) { top: 0; }
  /* eerste en laatste niet buiten de kaart laten steken */
  .cgc-time__item:first-child { transform: translateX(0); }
  .cgc-time__item:last-child { transform: translateX(-100%); text-align: right; }
  .cgc-time__dot { display: none; }
  /* het streepje dat het item aan de as hangt; de lager hangende items
     krijgen een langer streepje zodat beide rijen de as raken */
  .cgc-time__item::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 1px;
    height: 6.5rem;
    background: color-mix(in srgb, var(--ink) 18%, transparent);
  }
  .cgc-time__item:nth-child(even)::before { height: 1.5rem; }
  .cgc-time__item:last-child::before { left: auto; right: 0; }
  .cgc-time__item.is-key::before { background: var(--accent-deep); width: 1.5px; }
}

/* ============================================================
   WAT DE WET VRAAGT
   Geen 01/02/03: dit zijn drie facetten, geen volgorde. Het icoon draagt
   het onderscheid, en het derde staat doorgestreept omdat het gaat over
   wat de wet níet vraagt.
   ============================================================ */
.cgc-law {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.8rem, 0.6rem + 0.8vw, 1.2rem);
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.4rem);
}
.cgc-law__card {
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
  border-radius: var(--r-xl);
}
.cgc-law__icon {
  display: block;
  width: 2.9rem;
  height: 2.9rem;
  color: var(--accent-deep);
  margin-bottom: 1.2rem;
}
.cgc-law__icon svg { width: 100%; height: 100%; overflow: visible; }
.cgc-law__card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.7rem;
}
.cgc-law__card p { margin: 0; color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.55; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 999px) {
  /* de kaart mag op tablet niet de volle kolombreedte uitrekken */
  .cgc-card, .cgc-nojs { max-width: 42rem; }
}
@media (max-width: 880px) {
  .cgc-law { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .cgc-grid { grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
  .cgc-answers { grid-template-columns: 1fr; gap: 0.5rem; }
  .cgc-answer { padding: 0.9rem 1rem; }
  .cgc-result__actions .btn { width: 100%; justify-content: center; }
  .cgc-verdict { justify-items: start; }
  .cgc-dial-wrap { margin-inline: 0; }
}

/* ============================================================
   BEWEGING
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cgc-dial__arc, .cgc-question, .cgc-answer, .cgc-answer__mark,
  .cgc-prev, .cgc-cell, .cgc-cell i, .cgc-time__done { transition: none; }
}
[data-motion="off"] .cgc-dial__arc,
[data-motion="off"] .cgc-question,
[data-motion="off"] .cgc-cell i,
[data-motion="off"] .cgc-time__done { transition: none; }