/* Denkstap basis-UI. Eén leeskolom, rustige kaarten, feedback in vier toestanden.
   Toestanden: goed (groen), nog eens kijken (amber), hint (blauw), fout na tweede poging (rood).
   Rood alleen als het antwoord echt getoond wordt; de eerste fout is amber zodat het kind blijft denken. */
:root{
  --bg:#f4f6f9; --surface:#ffffff; --ink:#1b2233; --muted:#5b6478; --line:#dce1ea;
  --accent:#2f55c7; --accent-ink:#ffffff; --accent-soft:#e8edfb;
  --good:#1f7a4c; --good-soft:#e3f3ea;
  --retry:#9a5a00; --retry-soft:#fdf1dc;
  --hint:#2f55c7; --hint-soft:#e8edfb;
  --bad:#b0352f; --bad-soft:#fbe7e5;
  --focus:#e09a1f;
  --f-body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --f-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r:10px; --gap:16px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#12151d; --surface:#1b1f2a; --ink:#e8ebf2; --muted:#9ca4b8; --line:#2d3343;
  --accent:#8ea6ff; --accent-ink:#10131c; --accent-soft:#232b47;
  --good:#6fd39f; --good-soft:#163024;
  --retry:#f2b65a; --retry-soft:#352812;
  --hint:#8ea6ff; --hint-soft:#232b47;
  --bad:#ff8f87; --bad-soft:#3a1d1c;
  --focus:#f2b65a; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#12151d; --surface:#1b1f2a; --ink:#e8ebf2; --muted:#9ca4b8; --line:#2d3343;
  --accent:#8ea6ff; --accent-ink:#10131c; --accent-soft:#232b47;
  --good:#6fd39f; --good-soft:#163024;
  --retry:#f2b65a; --retry-soft:#352812;
  --hint:#8ea6ff; --hint-soft:#232b47;
  --bad:#ff8f87; --bad-soft:#3a1d1c;
  --focus:#f2b65a; color-scheme:dark}

/* Basis */
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
.ds-wrap{max-width:720px;margin:0 auto;padding-block:20px 72px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));
  display:flex;flex-direction:column;gap:20px}
.ds-wrap > *{min-width:0}
h1,h2,h3{line-height:1.2;text-wrap:balance;margin:0}
h1{font-size:28px;font-weight:700}
h2{font-size:22px;font-weight:700}
h3{font-size:18px;font-weight:700}
p{margin:0}
.ds-muted{color:var(--muted)}
.ds-small{font-size:15px}
.ds-label{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ds-stack{display:flex;flex-direction:column;gap:12px}
.ds-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* Kop met naam, onderdeel en voortgang */
.ds-top{display:flex;flex-direction:column;gap:10px}
.ds-brand{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.ds-brand b{font-size:20px}
.ds-progress{display:flex;flex-direction:column;gap:6px}
.ds-progress-bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.ds-progress-bar > span{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .3s ease}
.ds-progress-text{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}

/* Keuze van onderdeel (Inkomen, Theorie, Oefentoets) */
.ds-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.ds-mode{font:inherit;color:inherit;text-align:left;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);
  padding:14px 16px;cursor:pointer;display:flex;flex-direction:column;gap:4px}
.ds-mode:hover{border-color:var(--accent)}
.ds-mode[aria-current="true"]{border-color:var(--accent);background:var(--accent-soft)}
.ds-mode span{font-size:15px;color:var(--muted)}

/* Vraagkaart */
.ds-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:14px}
.ds-q-head{display:flex;gap:12px;align-items:baseline}
.ds-q-num{flex:none;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;min-width:2ch}
.ds-q-text{min-width:0}
.ds-card.is-good{border-color:var(--good)}
.ds-card.is-retry{border-color:var(--retry)}
.ds-card.is-bad{border-color:var(--bad)}
.ds-figure{max-width:100%;border-radius:8px;border:1px solid var(--line)}

/* Meerkeuze-opties */
.ds-options{display:flex;flex-direction:column;gap:8px}
.ds-option{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--line);border-radius:8px;cursor:pointer;background:var(--surface)}
.ds-option:hover{border-color:var(--accent)}
.ds-option input{margin-top:5px;accent-color:var(--accent);width:18px;height:18px;flex:none}
.ds-option:not(.is-good,.is-retry,.is-bad):has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.ds-option.is-good{border-color:var(--good);background:var(--good-soft)}
.ds-option.is-retry{border-color:var(--retry);background:var(--retry-soft)}
.ds-option.is-bad{border-color:var(--bad);background:var(--bad-soft)}
.ds-option .ds-key{font-weight:700;min-width:1.5ch}

/* Open antwoord */
.ds-field{display:flex;flex-direction:column;gap:6px}
.ds-field label{font-weight:700;font-size:15px}
.ds-input,.ds-textarea{font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:8px;padding:10px 12px;width:100%;box-sizing:border-box}
.ds-textarea{min-height:96px;resize:vertical}
.ds-input:focus,.ds-textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.ds-input.is-good,.ds-textarea.is-good{border-color:var(--good)}
.ds-input.is-retry,.ds-textarea.is-retry{border-color:var(--retry)}
.ds-input.is-bad,.ds-textarea.is-bad{border-color:var(--bad)}
.ds-unit{display:flex;gap:8px;align-items:center}
.ds-unit .ds-input{max-width:180px;font-variant-numeric:tabular-nums}

/* Knoppen */
.ds-btn{font:inherit;font-weight:700;font-size:16px;border-radius:8px;padding:10px 18px;cursor:pointer;border:1.5px solid transparent;min-height:44px}
.ds-btn-primary{background:var(--accent);color:var(--accent-ink)}
.ds-btn-primary:hover{filter:brightness(1.08)}
.ds-btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line)}
.ds-btn-secondary:hover{border-color:var(--accent)}
.ds-btn-ghost{background:transparent;color:var(--accent);padding-inline:8px}
.ds-btn:disabled{opacity:.45;cursor:not-allowed;filter:none}

/* Feedback. Altijd tekst plus kleur plus symbool, nooit alleen kleur. */
.ds-feedback{display:flex;gap:12px;align-items:flex-start;border-radius:8px;padding:12px 14px;border-left:4px solid;font-size:17px}
.ds-feedback .ds-fb-icon{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;line-height:1}
.ds-feedback .ds-fb-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.ds-feedback .ds-fb-title{font-weight:700}
.ds-fb-good{background:var(--good-soft);border-color:var(--good)}
.ds-fb-good .ds-fb-icon{background:var(--good);color:var(--surface)}
.ds-fb-retry{background:var(--retry-soft);border-color:var(--retry)}
.ds-fb-retry .ds-fb-icon{background:var(--retry);color:var(--surface)}
.ds-fb-hint{background:var(--hint-soft);border-color:var(--hint)}
.ds-fb-hint .ds-fb-icon{background:var(--hint);color:var(--surface)}
.ds-fb-bad{background:var(--bad-soft);border-color:var(--bad)}
.ds-fb-bad .ds-fb-icon{background:var(--bad);color:var(--surface)}
.ds-fb-explain{background:var(--bg);border-color:var(--line)}
.ds-fb-explain .ds-fb-icon{background:var(--muted);color:var(--surface)}

/* Overzicht na nakijken: vraagnummers als bolletjes */
.ds-dots{display:flex;flex-wrap:wrap;gap:8px}
.ds-dot{font:inherit;font-weight:700;font-size:15px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
.ds-dot.is-good{background:var(--good-soft);border-color:var(--good);color:var(--good)}
.ds-dot.is-retry{background:var(--retry-soft);border-color:var(--retry);color:var(--retry)}
.ds-dot.is-bad{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.ds-dot[aria-current="true"]{outline:2px solid var(--accent);outline-offset:2px}

/* Score */
.ds-score{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.ds-score b{font-size:36px;line-height:1}
.ds-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:14px;color:var(--muted)}
.ds-legend span{display:inline-flex;align-items:center;gap:6px}
.ds-legend i{width:12px;height:12px;border-radius:50%;display:inline-block;border:1.5px solid}

/* Formule of berekening */
.ds-calc{font-family:var(--f-mono);font-size:16px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;overflow-x:auto;white-space:pre}

/* Rustige verschijning van feedback */
.ds-feedback{animation:ds-in .2s ease-out}
@keyframes ds-in{from{transform:translateY(-4px)}to{transform:none}}
@media (prefers-reduced-motion: reduce){.ds-feedback{animation:none}.ds-progress-bar > span{transition:none}}

@media (max-width:480px){
  body{font-size:17px}
  .ds-card{padding:16px}
  h1{font-size:24px}
}

/* Klikfiguur: svg waarin het kind een punt aanklikt.
   Markup: div.ds-clickfig > svg (viewBox gezet) + circle.ds-marker op de klikplek. */
.ds-clickfig{position:relative;max-width:100%;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
.ds-clickfig svg{display:block;width:100%;height:auto;max-width:100%;cursor:crosshair;touch-action:manipulation}
.ds-clickfig svg *{vector-effect:non-scaling-stroke}
.ds-clickfig .ds-fig-line{stroke:var(--ink);stroke-width:2;fill:none}
.ds-clickfig .ds-fig-help{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:6 5;fill:none}
.ds-clickfig .ds-fig-text{fill:var(--muted);font-family:var(--f-body);font-size:14px}
.ds-marker{fill:var(--accent);stroke:var(--surface);stroke-width:2;pointer-events:none}
.ds-marker.is-good{fill:var(--good)}
.ds-marker.is-retry{fill:var(--retry)}
.ds-marker.is-bad{fill:var(--bad)}
.ds-target{fill:none;stroke:var(--good);stroke-width:2;stroke-dasharray:4 4;pointer-events:none}
.ds-clickfig.is-good{border-color:var(--good)}
.ds-clickfig.is-retry{border-color:var(--retry)}
.ds-clickfig.is-bad{border-color:var(--bad)}
.ds-clickfig-hint{font-size:14px;color:var(--muted)}

/* Startpagina met drie onderdelen.
   Markup: section.ds-home > header.ds-home-head (h1 + p) + div.ds-home-grid > a/button.ds-home-item
   (span.ds-label, h2, p, span.ds-home-meta). */
.ds-home{display:flex;flex-direction:column;gap:20px}
.ds-home-head{display:flex;flex-direction:column;gap:6px}
.ds-home-head p{color:var(--muted);max-width:60ch}
.ds-home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.ds-home-item{font:inherit;color:inherit;text-decoration:none;text-align:left;background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:8px;cursor:pointer;min-width:0}
.ds-home-item:hover{border-color:var(--accent)}
.ds-home-item p{color:var(--muted);font-size:16px}
.ds-home-meta{margin-top:auto;padding-top:6px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.ds-home-item.is-done .ds-home-meta{color:var(--good);font-weight:700}