/* AI-scan, eigen laag
 *
 * Laadt na tokens.css, componenten.css en site.css. Hier staat uitsluitend wat
 * alleen de scan nodig heeft: het wisselen van schermen, de voortgangsbalk, de
 * antwoordopties en de blokken van de uitslag.
 *
 * Wat de bibliotheek al kan wordt niet overgedaan. De kaart, de knoppen, de
 * WhatsApp-knop, de container en de focusringen komen daarvandaan. De vorige
 * versie had vijfhonderd regels eigen CSS met een eigen kleurenlijst; die
 * lijst is hier weg, want elke kleur loopt nu via een rol uit het thema.
 *
 * Eén ding uit de oude lijst is bewust vervallen. Daar stond een eigen
 * accentkleur #4d6900 met de opmerking dat #5a7a00 op de kaart 4,3:1 haalt en
 * daarmee onder de norm blijft. Dat klopte voor die kaart, die een gedempte
 * achtergrond had. De kaart uit de bibliotheek is wit, en daarop haalt
 * --color-accent-text 4,8:1.
 */

/* ---------- kop van de pagina ---------- */

.scan__kop { padding-block: var(--sp-1); border-block-end: 1px solid var(--color-border); }
.scan__kop .container { display: flex; align-items: baseline; gap: var(--sp-0); }
.scan__tool { font: var(--type-body-sm); color: var(--color-accent-text); }

/* ---------- de kaart en de schermen ---------- */

.scan__kaart { padding: var(--sp-3); }
@media (max-width: 520px) { .scan__kaart { padding: var(--sp-2); } }

.screen { display: none; }
.screen.is-active { display: block; }
.screen:focus { outline: none; }

/* Krijgt de focus bij elke schermwissel, zodat een schermlezer bij de vraag
   zelf begint in plaats van bij een naamloze container. */
.focus-target:focus { outline: none; }
.focus-target:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .screen.is-active { animation: scan-omhoog .4s cubic-bezier(.16, 1, .3, 1); }
}
@keyframes scan-omhoog {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- intro ---------- */

.intro-eyebrow {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-accent-text);
  margin-block-end: var(--sp-0);
}

.intro h1, .intro h2, .intro h3 { font: var(--type-h2); margin-block-end: var(--sp-1); }
.intro p { color: var(--color-text-subtle); max-width: 46ch; }
.intro p + p { margin-block-start: var(--sp-0); }

.intro .meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-0) var(--sp-2);
  margin-block: var(--sp-2);
  padding-block-start: var(--sp-1);
  border-block-start: 1px solid var(--color-border);
}
.intro .meta-item {
  font: var(--type-body-sm);
  color: var(--color-text-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
}
.intro .meta-item::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  flex: none;
}

.fineprint { font: var(--type-caption); color: var(--color-text-subtle); margin-block-start: var(--sp-0); }
.intro .fineprint { max-width: none; }

/* ---------- voortgang ---------- */

.progress { margin-block-end: var(--sp-2); }
.progress-label {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-text-subtle);
  margin-block-end: var(--sp-0);
}
.progress-track { display: flex; gap: 6px; }
.progress-seg {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: var(--color-border);
  transition: background-color .3s;
}
.progress-seg.is-done { background: var(--color-accent); }

/* ---------- de vraag ---------- */

.scan__kaart fieldset { border: none; }

.q-heading { font: var(--type-h3); margin-block-end: var(--sp-2); }

.options { display: flex; flex-direction: column; gap: var(--sp-0); }

/* Een antwoord is een kaart met het keuzerondje erin, en niet een rondje met
   tekst ernaast. Het hele vlak is aanklikbaar, wat op een telefoon het
   verschil maakt tussen een doel van negentien pixels en een van de volle
   breedte. */
.option {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.option:hover { border-color: var(--color-accent); }
.option span { font: var(--type-body); }

.option input[type="radio"] {
  accent-color: var(--color-accent);
  width: 19px;
  height: 19px;
  margin-block-start: 3px;
  flex: none;
}
.option input[type="radio"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.option.is-selected {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg));
}

/* Tweede keuze binnen vraag 4. Verschijnt pas als er een klusje is aangewezen
   en blijft weg bij "niets dat er echt uitspringt". */
.subquestion {
  margin-block-start: var(--sp-2);
  padding-block-start: var(--sp-2);
  border-block-start: 1px solid var(--color-border);
}
.subquestion[hidden] { display: none; }
.subquestion-label { font: var(--type-label); margin-block-end: var(--sp-1); }
.subquestion-label .klusje-echo { color: var(--color-accent-text); }

/* ---------- vorige en volgende ---------- */

.scan__acties {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
  margin-block-start: var(--sp-2);
}

/* Terug is geen tweede knop maar een uitweg. Een knop ernaast zou even zwaar
   wegen als de knop die je verder brengt. */
.scan__terug {
  font: var(--type-body-sm);
  color: var(--color-text-subtle);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-0) 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.scan__terug:hover { color: var(--color-text); }
.scan__terug:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.scan__terug[hidden] { display: none; }

@media (max-width: 400px) {
  .scan__acties { flex-direction: column-reverse; align-items: stretch; }
  .scan__acties .button { width: 100%; }
  .scan__terug { text-align: center; }
}

/* ---------- de uitslag ---------- */

.result-eyebrow {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-accent-text);
  margin-block-end: var(--sp-0);
}

.result h2, .result h3 { font: var(--type-h3); margin-block-end: var(--sp-2); }
/* De twee herkenningszinnen krijgen elk een eigen regel. Ze wegen even zwaar,
   dus de tweede mag niet als bijzin onder de eerste hangen. */
.result h2 span, .result h3 span { display: block; }
.result h2 span + span, .result h3 span + span { margin-block-start: var(--sp-0); }

.result-section-label {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-subtle);
  margin-block-end: var(--sp-0);
}

.actions { display: flex; flex-direction: column; gap: var(--sp-1); margin-block-end: var(--sp-2); }
.action {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: var(--sp-1);
}
.action p { font: var(--type-body); }

/* Het label draagt een rand en geen vlak, net als .tag--accent uit de
   bibliotheek. Met een olijftint als achtergrond zakt olijve tekst naar 4,0:1;
   op de gewone achtergrond haalt hij 4,65:1. Elke tint tussen die twee blijft
   onder de norm, dus een lichtere vulling lost het niet op. */
.ai-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-accent-text);
  border: 1px solid var(--color-accent);
  border-radius: 5px;
  padding: 2px 8px;
  margin-block-end: var(--sp-0);
}

.calc {
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg));
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, var(--color-bg));
  border-radius: 10px;
  padding: var(--sp-1);
  margin-block-end: var(--sp-2);
}
.calc p { font: var(--type-body-sm); color: var(--color-text-subtle); }
.calc[hidden] { display: none; }

/* De onderwerpen die net zo laag scoorden maar buiten de twee acties vallen.
   Zonder deze regel verzwijgt de uitslag een gelijke stand. */
.signalering { font: var(--type-body-sm); color: var(--color-text-subtle); margin-block-end: var(--sp-2); }
.signalering[hidden] { display: none; }

.transition-text {
  font: var(--type-body);
  color: var(--color-text-subtle);
  margin-block-end: var(--sp-2);
  padding-block-start: var(--sp-2);
  border-block-start: 1px solid var(--color-border);
}

.scan__terugnaar { font: var(--type-body-sm); color: var(--color-text-subtle); margin-block-start: var(--sp-2); }

.restart {
  display: block;
  margin-block-start: var(--sp-2);
  font: var(--type-body-sm);
  color: var(--color-text-subtle);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.restart:hover { color: var(--color-text); }
.restart:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .progress-seg, .option { transition: none; }
}