/* app/ui-laag-oefenen.css — Oefenen in de normale weergave volgens de UI-laag (stap 2b).
   Bron: artboard "Voorbeeld 2 · Oefenen" (canvas UI-laag, Oefenen.dc.html, notitie n2) en de vaste
   regels §3 van de overdracht. Opbouw in modules/n-oefenen.js; gedeelde bouwstenen (raster, hand,
   stat-tegel, knoppen) in app/ui-laag.css. Mobile first: één kolom; vanaf 1024 px de indeling van
   het artboard (tafel 520 px links, vraag rechts) in de brede kolom van de UI-laag. */

/* De brede desktopkolom, zoals de gamified Club-schermen (.ch-breed in modules/club/hub.css). */
@media(min-width:1024px){
  body[data-schil="normaal"]:has(.ul-oef-breed){--n-kolom:1180px}
}

/* ── navy kop: vraag, voortgang, reeks, stoppen ── */
.ul-oef-kop{display:flex;flex-direction:column;gap:14px;color:#fff}
.ul-oef-kop-tekst{display:flex;flex-direction:column;gap:4px;min-width:0}
.ul-oef-kop-titel{color:#fff}
/* kleursymbolen op nachtblauw: lichtere varianten van de vier kleuren (contrast ≥ 4,5:1) */
.ul-oef-kop .su-c{color:var(--ul-groen-op)} .ul-oef-kop .su-d{color:#a9c1ff} .ul-oef-kop .su-h{color:#ff9d93} .ul-oef-kop .su-s{color:#fff}
.ul-oef-kop .ul-kopsub{margin:0;color:var(--ul-licht)}
.ul-oef-kop .n-oef-opnieuw{margin-left:4px}
.ul-oef-voortgang{display:flex;flex-direction:column;gap:6px;min-width:0}
.ul-oef-voortgang-tel{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ul-licht);font-variant-numeric:tabular-nums}
.n-oef-balk.ul-oef-balk{display:flex;height:8px;border-radius:999px;background:var(--ul-navy2);overflow:hidden}
.ul-oef-balk-goed{display:block;height:100%;background:var(--ul-groen-op)}
.ul-oef-balk-fout{display:block;height:100%;background:var(--ul-oranje)}
.ul-oef-kop-r{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ul-oef-reeks{display:inline-flex;align-items:center;gap:6px;background:var(--ul-navy2);border-radius:999px;padding:8px 14px;
  font-size:13px;font-weight:700;color:#fff;white-space:nowrap}
.ul-oef-reeks .ul-ic{color:var(--ul-oranje-op)}
.ul-oef-stop{min-height:44px;border:1px solid #5b6a8f;background:transparent;color:#fff;font-family:inherit;font-size:14px;font-weight:600;
  border-radius:10px;padding:10px 14px;cursor:pointer;margin-left:auto}
.ul-oef-stop:hover{background:var(--ul-navy2)}
.ul-oef-stop:focus-visible{outline:3px solid var(--ul-oranje-op);outline-offset:2px}
@media(min-width:1024px){
  /* (de Normaal/Expert-schakelaar is weg: één omgeving) */
  .ul-oef-kop{flex-direction:row;align-items:center;justify-content:space-between;gap:24px;padding:4px 0}
  .ul-oef-voortgang{flex:1 1 auto;max-width:420px}
  .ul-oef-kop-r{flex:none}
  .ul-oef-stop{margin-left:0}
}

/* ── het scherm ── */
.ul-oef-scherm{display:flex;flex-direction:column;gap:20px;color:var(--ul-tekst)}
@media(min-width:1024px){ .ul-oef-scherm{gap:24px;padding-top:8px} }

/* ── oefenvorm-keuze: zes tegels, de actieve navy ── */
.ul-oef-vormen{display:flex;flex-direction:column;gap:8px}
.ul-oef-vormen-kop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px}
.ul-oef-onderwerp{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:44px;padding:0;border:0;background:none;
  font-family:inherit;font-size:13px;color:var(--ul-gedempt);cursor:pointer;text-align:left}
.ul-oef-onderwerp strong{color:var(--ul-tekst);font-weight:600}
.ul-oef-onderwerp-wijzig{color:var(--ul-oranje-tekst);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ul-oef-vormen-rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ul-oef-vormen-hint{margin:8px 2px 0;font-size:13px}
.ul-oef-vorm{background:var(--ul-kaart);color:var(--ul-tekst);border:1px solid var(--ul-rand);font-family:inherit;border-radius:12px;
  padding:10px 12px;min-height:56px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;text-align:left;
  cursor:pointer;min-width:0;box-sizing:border-box}
.ul-oef-vorm:hover{border-color:var(--ul-rand-knop)}
.ul-oef-vorm-naam{font-size:14px;font-weight:700;max-width:100%;overflow-wrap:anywhere}
.ul-oef-vorm-sub{font-size:13px;color:var(--ul-gedempt);line-height:1.3}
.ul-oef-vorm.on{background:var(--ul-navy);color:#fff;border:2px solid var(--ul-navy);cursor:default}
.ul-oef-vorm.on .ul-oef-vorm-sub{color:var(--ul-licht)}
.ul-oef-vorm-meer{border-style:dashed;align-items:center;text-align:center}
.dark .ul-oef-vorm.on{background:var(--ul-navy2);border-color:var(--ul-licht)}
.ul-oef-vorm:focus-visible,.ul-oef-onderwerp:focus-visible,.ul-oef-optie:focus-visible,.ul-oef-knop-licht:focus-visible{outline:3px solid var(--ul-oranje);outline-offset:2px}
@media(max-width:599.98px){ .ul-oef-vorm-sub{display:none} .ul-oef-vorm{min-height:48px;padding:8px 10px} .ul-oef-vorm-naam{font-size:13px} }
@media(min-width:1024px){ .ul-oef-vormen-rij{grid-template-columns:repeat(6,minmax(0,1fr))} }

/* ── tafel (links) en vraag (rechts) ── */
.ul-oef-grid{display:flex;flex-direction:column;gap:16px;min-width:0}
.ul-oef-na .ul-oef-uitleg{order:-1}   /* telefoon: na het antwoord de uitleg direct onder de kop */
.ul-oef-rechts{display:flex;flex-direction:column;gap:12px;min-width:0}
@media(min-width:1024px){
  .ul-oef-grid{display:grid;grid-template-columns:520px minmax(0,1fr);grid-template-rows:auto 1fr;gap:16px 20px;
    grid-template-areas:"tafel vraag" "tafel uitleg";align-items:start}
  .ul-oef-grid-zonder{grid-template-columns:minmax(0,1fr);grid-template-areas:"vraag" "uitleg"}
  .ul-oef-tafel{grid-area:tafel}
  .ul-oef-rechts{grid-area:vraag;gap:16px}
  .ul-oef-uitleg{grid-area:uitleg}
  .ul-oef-na .ul-oef-uitleg{order:0}
}

.ul-oef-tafel{gap:16px}
@media(min-width:1024px){ .ul-oef-tafel{padding:24px} }
.ul-oef-tafel .ul-eyebrow{margin:0}
.ul-oef-rastervlak{background:var(--ul-creme);border-radius:14px;padding:12px}
@media(min-width:1024px){ .ul-oef-rastervlak{padding:16px} }
.ul-oef-rastervlak .ul-raster{gap:8px}
.ul-oef-rastervlak .ul-raster-rij{gap:8px}
.ul-oef-rastervlak .ul-cel{height:44px;border-radius:10px;font-size:17px}
.ul-oef-rastervlak .ul-cel-tp{background:var(--ul-creme);border:1px solid var(--ul-rand);color:var(--ul-gedempt);font-size:15px}
.ul-oef-rastervlak .ul-cel-pas{font-size:14px}
.ul-oef-rastervlak .ul-cel-leeg{border:0}
.ul-oef-rastervlak .ul-cel.n-oef-cel-vraag{color:var(--ul-oranje-tekst);font-size:20px;border-width:2px}
.ul-oef-rastervlak .ul-cel.n-oef-cel-goed{background:var(--ul-groen-tint);border:2px solid var(--ul-groen)}
.ul-oef-rastervlak .ul-cel.n-oef-cel-fout{background:#fbeceb;border:2px solid var(--ul-rood)}
.dark .ul-oef-rastervlak .ul-cel.n-oef-cel-fout{background:#2a1614}
.ul-oef-raster-uitleg{font-size:14px}

/* hand per kleur: kaartjes zoals het artboard (40 × 48) */
.ul-oef-hand{display:flex;flex-direction:column;gap:6px}
.ul-oef-hand .ul-eyebrow{margin:0}
.ul-oef-handvlak{background:var(--ul-creme);border-radius:14px;padding:12px 14px}
.ul-oef-handvlak .ul-hand{gap:6px}
.ul-oef-handvlak .ul-hand-groot .ul-hand-sym{width:30px;font-size:24px}
.ul-oef-handvlak .ul-kaartje{width:36px;height:44px;font-size:18px}
@media(min-width:390px){ .ul-oef-handvlak .ul-kaartje{width:40px;height:48px;font-size:20px} .ul-oef-handvlak .ul-hand-groot .ul-hand-sym{width:36px;font-size:26px} }

/* vraagkaart */
.ul-oef-vraag{gap:12px}
.ul-oef-vraag-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ul-oef-vraag-meta .ul-chip{font-size:13px;padding:4px 10px}
.ul-oef-vraag-soort{font-size:13px;color:var(--ul-gedempt)}
.n-oef-vraag-txt.ul-oef-vraag-txt{margin:0;font-family:var(--ul-kopfont);font-weight:700;font-size:22px;line-height:1.25;color:var(--ul-tekst)}
@media(min-width:1024px){ .n-oef-vraag-txt.ul-oef-vraag-txt{font-size:26px} }

/* drie grote antwoordknoppen */
.ul-oef-opties{display:flex;flex-direction:column;gap:10px}
.ul-oef-optie{border:1px solid var(--ul-rand);background:var(--ul-kaart);color:var(--ul-tekst);border-radius:14px;padding:14px 16px;min-height:64px;
  display:flex;align-items:center;gap:16px;font-family:inherit;text-align:left;cursor:pointer;width:100%;box-sizing:border-box}
@media(min-width:1024px){ .ul-oef-optie{padding:16px 20px} }
.ul-oef-optie:hover:not([disabled]){border-color:var(--ul-navy)}
.ul-oef-optie[disabled]{cursor:default}
.ul-oef-letter{flex:none;width:36px;height:36px;border-radius:999px;background:var(--ul-chip);color:var(--ul-navy);font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.dark .ul-oef-letter{color:var(--ul-tekst)}
.ul-oef-optie-bodtxt{flex:none;font-family:var(--ul-kopfont);font-size:28px;font-weight:700;line-height:1;white-space:nowrap}
.ul-oef-optie-txt{flex:1;min-width:0;font-size:15px;line-height:1.4}
.ul-oef-optie-na{display:flex;flex-direction:column;gap:2px;min-width:0}
.ul-oef-optie-lbl{font-size:14px;font-weight:600;color:var(--ul-gedempt)}
.ul-oef-optie-bet{font-size:14px;color:var(--ul-gedempt);line-height:1.35}
.ul-oef-optie.goed{border:2px solid var(--ul-groen);background:var(--ul-groen-tint)}
.ul-oef-optie.goed .ul-oef-letter{background:var(--ul-groen);color:#fff}
.ul-oef-optie.goed .ul-oef-optie-lbl{color:var(--ul-groen)}
.ul-oef-optie.fout{border:2px solid var(--ul-rood);background:#fbeceb}
.dark .ul-oef-optie.fout{background:#2a1614}
.ul-oef-optie.fout .ul-oef-letter{background:var(--ul-rood);color:#fff}
.ul-oef-optie.fout .ul-oef-optie-lbl{color:var(--ul-rood)}
.ul-oef-optie.dim{opacity:.7}
.ul-oef-voetrij{margin:0}

/* navy uitlegkaart na het antwoord */
.ul-oef-uitleg{background:var(--ul-navy);color:#fff;border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0;box-sizing:border-box}
@media(min-width:1024px){ .ul-oef-uitleg{padding:22px 26px} }
.ul-oef-uitslag{display:flex;align-items:center;gap:12px}
.ul-oef-teken{flex:none;width:40px;height:40px;border-radius:999px;display:grid;place-items:center;color:#fff}
.ul-oef-uitslag.goed .ul-oef-teken{background:var(--ul-groen)}
.ul-oef-uitslag.fout .ul-oef-teken{background:var(--ul-rood)}
.ul-oef-uitslag-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ul-oef-uitslag-kop{font-family:var(--ul-kopfont);font-size:22px;font-weight:700;line-height:1.15}
.ul-oef-uitslag-sub{font-size:14px;color:var(--ul-licht)}
.ul-oef-waarom{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--ul-navy2);padding-top:12px}
.ul-oef-waarom-lbl{margin:0;display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ul-licht);font-weight:600}
.ul-oef-waarom-lbl .ul-ic{color:var(--ul-oranje-op)}
.ul-oef-waarom-txt{margin:0;font-size:15px;line-height:1.5}
.ul-oef-ref{margin:0;font-size:13px;color:var(--ul-licht)}
.ul-oef-uitleg .su-h,.ul-oef-uitleg .su-d,.ul-oef-uitleg .ul-su-h,.ul-oef-uitleg .ul-su-d{color:#ff9d93}
.ul-oef-uitleg .su-d,.ul-oef-uitleg .ul-su-d{color:#a9c1ff}
.ul-oef-uitleg .su-c,.ul-oef-uitleg .ul-su-c{color:var(--ul-groen-op)}
.ul-oef-uitleg .su-s,.ul-oef-uitleg .ul-su-s{color:#fff}
.ul-oef-uitleg-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ul-oef-knop-licht{display:inline-flex;align-items:center;gap:6px;min-height:44px;border:1px solid #5b6a8f;background:transparent;color:#fff;
  font-family:inherit;font-size:13px;font-weight:600;border-radius:10px;padding:10px 14px;cursor:pointer;box-sizing:border-box}
.ul-oef-knop-licht:hover{background:var(--ul-navy2)}
.ul-oef-volgende{margin-left:auto;border:0;font-size:14px;padding:10px 18px}
@media(max-width:599.98px){ .ul-oef-volgende{order:-1;width:100%;margin-left:0} .ul-oef-knop-licht{flex:1 1 auto;justify-content:center} }

/* ── sessie-einde ── */
.ul-oef-einde{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center}
@media(min-width:1024px){ .ul-oef-einde{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;padding:28px 32px} }
.ul-oef-einde-l{display:flex;flex-direction:column;gap:14px;min-width:0}
.ul-oef-einde-titel{margin:0;font-family:var(--ul-kopfont);font-size:26px;font-weight:700;line-height:1.15}
@media(min-width:1024px){ .ul-oef-einde-titel{font-size:34px;line-height:1.1} }
.ul-oef-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:1024px){ .ul-oef-stats{grid-template-columns:repeat(4,minmax(0,1fr))} }
.ul-stat.ul-oef-stat{background:var(--ul-creme);border:0;border-radius:12px;padding:12px 14px;gap:2px}
.ul-oef-stat .ul-stat-lbl{font-size:13px;letter-spacing:0;text-transform:none;font-weight:500}
.ul-oef-stat .ul-stat-num{font-family:inherit;font-size:24px}
.ul-oef-stat-score .ul-stat-num{color:var(--ul-groen)}
.ul-oef-einde-knoppen{display:flex;flex-wrap:wrap;gap:10px}
.ul-oef-einde-knoppen .ul-knop{font-size:15px;padding:12px 18px}
.ul-oef-einde-r{display:flex;flex-direction:column;gap:10px;min-width:0}
.ul-oef-titel{background:var(--ul-oranje-tint);border:1px solid var(--ul-oranje-rand);border-radius:14px;padding:16px 18px;display:flex;align-items:center;gap:14px}
.ul-oef-titel-ic{flex:none;width:48px;height:48px;border-radius:999px;background:var(--ul-kaart);border:2px solid var(--ul-oranje);color:var(--ul-oranje);
  display:grid;place-items:center}
.ul-oef-titel-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ul-oef-titel-kop{font-size:15px;font-weight:700}
.ul-oef-titel-sub{font-size:13px;color:var(--ul-gedempt)}
.ul-oef-werkpunt{background:var(--ul-kaart);border:1px solid var(--ul-rand);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.ul-oef-werkpunt .ul-eyebrow,.ul-oef-werkpunt .ul-sub{margin:0}
.ul-oef-werkpunt .ul-sub{font-size:13px}
.ul-oef-werkpunt-kop{margin:0;font-size:15px;font-weight:600}
.ul-oef-werkpunt-n{font-weight:500;color:var(--ul-gedempt)}
.ul-oef-voet{flex-direction:row;justify-content:space-between;align-items:center}

/* UX-review E1: de oefenvormen achter één chip, zodat de antwoordopties boven de vouw staan. */
.ul-oef-vormen-chip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.ul-oef-vormen-chip .ul-oef-vormen-kop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0}
.ul-oef-vormen-uitklap{flex:1 1 100%}
.ul-oef-vorm-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--ul-rand-knop);background:var(--ul-kaart);color:var(--ul-tekst);font-size:14px;font-weight:600;list-style:none}
.ul-oef-vorm-chip::-webkit-details-marker{display:none}
.ul-oef-vormen-uitklap[open] .ul-oef-vormen-rij{margin-top:8px}
@media(max-width:700px){ .ul-oef-vormen-chip .ul-eyebrow{display:none} }