/* app/ui-v59-oefenen.css — Oefenen (normale weergave) volgens de v59-artboards Oefenen-375 en Oefenen-1280.
   Opbouw: modules/n-oefenen.js (kop via kopV59 variant C, .oef59-* markup). Alleen de tokens van de overdracht
   (--v59-* uit app/ui-v59.css). Laden NA ui-laag-oefenen.css, ui-laag-review.css en ui-v59.css. */

.oef59-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Korte spelreacties: een nieuwe vraag komt binnen, ingevulde definities krijgen
   een warme rand. Geen timers, wachttijd of beweging tijdens het lezen. */
#view-oefenen .compose-choice{position:relative;padding:4px 0;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-sizing:border-box}
#view-oefenen .compose-choice[data-selected="true"]{border-color:var(--brand);background:var(--brand-tint)}
#view-oefenen .compose-choice:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 18%,transparent)}
#view-oefenen .compose-choice select{border-radius:8px;background-color:var(--panel);color:var(--txt);font-weight:400;padding:9px 18px 9px 4px;background-position:right 4px center}
#view-oefenen .compose-definition[data-status="correct"] .compose-rule{box-shadow:0 0 0 2px var(--good)}
#view-oefenen .compose-definition[data-status="incorrect"] .compose-rule{box-shadow:0 0 0 1px var(--bad)}
#view-oefenen .compose-definition:not([data-status="editing"]) .compose-choice{background:var(--panel)}
#view-oefenen .compose-definition #checkBtn:disabled{background:var(--panel2);border-color:var(--line);color:var(--muted);box-shadow:none;cursor:default;opacity:1}
#view-oefenen .compose-expected{padding:10px 12px;border-left:3px solid var(--brand);border-radius:0 10px 10px 0;background:var(--brand-tint)}
#view-oefenen .okbadge{width:28px;height:28px;font-size:16px}
#view-oefenen .spark:nth-child(3n+2){background:var(--brand);border-radius:2px}
#view-oefenen .spark:nth-child(3n){background:var(--v59-navy,var(--good));width:4px;height:8px;border-radius:2px}

@media(prefers-reduced-motion:no-preference){
  #view-oefenen .oef-nieuw :is(.oef-links,.oef-rechts,.oef-deal-l,.oef-deal-r,.oef-free-l,.oef-free-r){animation:oefVraagBinnen .3s cubic-bezier(.2,.75,.3,1) both}
  #view-oefenen .oef-nieuw :is(.oef-rechts,.oef-deal-r,.oef-free-r){animation-delay:35ms}
  #view-oefenen .oef-nieuw .handbox{animation:oefKaartenBinnen .28s ease-out both}
  #view-oefenen .oef-nieuw .cardrow:nth-child(2){animation:oefKaartenBinnen .28s 25ms ease-out both}
  #view-oefenen .oef-nieuw .cardrow:nth-child(3){animation:oefKaartenBinnen .28s 45ms ease-out both}
  #view-oefenen .oef-nieuw .cardrow:nth-child(4){animation:oefKaartenBinnen .28s 65ms ease-out both}
  #view-oefenen :is(.compose-choice,.compose-choice select){transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}
  #view-oefenen .compose-definition[data-status="correct"]:has(+.celebrate) .compose-rule{animation:oefDefinitieKlaar .35s ease-out}
  #view-oefenen .celebrate{animation-duration:.38s;transform-origin:center}
  #view-oefenen .oef-scherm :is(.opt:not(.lock),.bbx:not(:disabled),.btn-acc:not(:disabled),.btn-ghost:not(:disabled)){transition:transform .12s ease,border-color .15s ease,background-color .15s ease}
  #view-oefenen .oef-scherm :is(.opt:not(.lock),.bbx:not(:disabled),.btn-acc:not(:disabled),.btn-ghost:not(:disabled)):active{transform:translateY(1px) scale(.99)}
}
@keyframes oefVraagBinnen{from{opacity:.85;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes oefKaartenBinnen{from{opacity:.8;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes oefDefinitieKlaar{0%{transform:scale(.995)}55%{transform:scale(1.006)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){
  #view-oefenen .oef-scherm :is(.celebrate,.okbadge.anim,.okhead.anim>span:last-child,.compose-choice,.compose-rule,.compose-choice select){animation:none!important;transition:none!important}
  #view-oefenen .oef-scherm :is(.opt,.bbx,.btn-acc,.btn-ghost){transition:none!important}
  #view-oefenen :is(.sparks,.confetti){display:none}
}

/* ── kop: compacter op de telefoon, de ×-knop rechtsboven (artboard) ── */
@media(max-width:1023.98px){
  body[data-schil="normaal"][data-nactief="oefen"] .n-kop{padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:18px}
  .oef59-kop .v59-h1{font-size:26px;line-height:1.15}
}
.oef59-kop .v59-ico-sluit{align-self:flex-start}
@media(min-width:1024px){
  .oef59-kop .v59-eyebrow{max-width:46%}
  .oef59-kop .v59-sub{display:none}
}

/* ── het scherm ── */
.oef59.ul-oef-scherm{gap:12px;padding-top:16px;color:var(--v59-tekst)}
.oef59 .ul-kaart{background:var(--v59-kaart);border:1px solid var(--v59-lijn);border-radius:16px;padding:16px;box-shadow:none;box-sizing:border-box}
.oef59 .ul-eyebrow{margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--v59-gedempt)}
.oef59-link{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--v59-oranje);text-decoration:underline;cursor:pointer;min-height:44px}
.oef59-link:hover{color:var(--v59-oranje-hover)}
.oef59-link:focus-visible,.oef59-tab:focus-visible,.oef59 .ul-oef-optie:focus-visible{outline:3px solid var(--v59-oranje);outline-offset:2px}

/* tabs (desktop) en chip (telefoon): één van de twee is zichtbaar */
.oef59-tabsrij{display:none}
@media(min-width:1024px){
  .oef59-tabsrij{display:flex;align-items:center;gap:16px}
  .oef59-chip{display:none}
}
.oef59-tabs{display:flex;gap:4px;padding:4px;background:var(--v59-kaart);border:1px solid var(--v59-lijn);border-radius:12px;white-space:nowrap}
.oef59-tab{min-height:44px;display:flex;align-items:center;padding:0 16px;border:0;border-radius:9px;background:none;cursor:pointer;
  font:700 15px 'DM Sans',system-ui,sans-serif;color:var(--v59-navy);flex:none}
.oef59-tab:hover{background:var(--v59-creme)}
.oef59-tab.on{background:var(--v59-navy);color:#fff;cursor:default}
.oef59-tab-meer{border:1px dashed var(--v59-lijn)}
.oef59-onderwerp{margin:0 0 0 auto;font-size:14px;color:var(--v59-gedempt);white-space:nowrap}
.oef59-onderwerp b{color:var(--v59-tekst)}
.oef59-onderwerp .oef59-link{font-weight:400}
.oef59-chip{margin-top:4px}

/* ── raster: twee kolommen op desktop ── */
.oef59 .ul-oef-grid{gap:12px}
@media(min-width:1024px){
  .oef59.ul-oef-scherm{gap:14px;padding-top:14px}
  .oef59 .ul-oef-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 24px;grid-template-areas:"tafel vraag" "tafel uitleg";align-items:start}
  .oef59 .ul-oef-grid-zonder{grid-template-columns:minmax(0,1fr)}
  .oef59 .ul-oef-tafel{padding:18px 20px}
  .oef59 .ul-oef-na .ul-oef-uitleg,.oef59.ul-oef-na .ul-oef-uitleg{order:0}
}
.oef59.ul-oef-na .ul-oef-uitleg{order:0}

/* biedverloop-kaart: raster rechtstreeks op de kaart (artboard), 40 px cellen */
.oef59 .ul-oef-tafel{gap:8px}
.oef59 .ul-oef-rastervlak{background:none;padding:0;border-radius:0}
.oef59 .ul-oef-rastervlak .ul-raster{gap:6px}
.oef59 .ul-oef-rastervlak .ul-raster-rij{gap:6px}
.oef59 .ul-raster-kopcel{font-size:13px;font-weight:700;color:var(--v59-gedempt);text-transform:none;letter-spacing:0;white-space:nowrap}
.oef59 .ul-oef-rastervlak .ul-cel{height:40px;border-radius:10px;font-size:16px;font-weight:700}
.oef59 .ul-oef-rastervlak .ul-cel-tp{background:var(--v59-kaart);border:1px solid var(--v59-lijn);color:var(--v59-tekst)}
.oef59 .ul-oef-rastervlak .ul-cel-pas{background:none;border:1px dashed var(--v59-lijn);color:var(--v59-gedempt);font-weight:400;font-size:16px}
.oef59 .ul-oef-rastervlak .ul-cel-leeg{border:0}
.oef59 .ul-oef-rastervlak .ul-cel.n-oef-cel-vraag{border:2px solid var(--v59-oranje);color:var(--v59-oranje);background:#FBEFE7;font-size:16px}
.oef59 .ul-oef-rastervlak .ul-cel.n-oef-cel-goed{background:#EEF6F0;border:2px solid var(--v59-groen)}
.oef59 .ul-oef-rastervlak .ul-cel.n-oef-cel-fout{background:#FBEFEE;border:2px solid var(--v59-rood)}
.oef59 .ul-oef-raster-uitleg{display:none;font-size:14px;color:var(--v59-gedempt);margin:4px 0 0}
@media(min-width:1024px){ .oef59 .ul-oef-raster-uitleg{display:block} }
.oef59 .ul-oef-handvlak{background:var(--v59-creme)}

/* vraag: alleen op desktop (op een telefoon staat de vraag in de kop) */
.oef59-vraag{display:none}
@media(min-width:1024px){
  .oef59-vraag{display:block;padding:16px 20px}
  .oef59-vraag-soort{margin:0;font-size:13px;color:var(--v59-gedempt)}
  .oef59 .n-oef-vraag-txt.ul-oef-vraag-txt{margin:4px 0 0;font-size:22px;line-height:1.25}
}
.oef59 .ul-oef-rechts{gap:10px}

/* antwoordopties als kaarten: letter · tekst · label */
.oef59-opties{display:flex;flex-direction:column;gap:8px}
.oef59 .ul-oef-optie{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-height:56px;padding:10px 14px;border:2px solid var(--v59-lijn);border-radius:12px;
  background:var(--v59-kaart);color:var(--v59-tekst);font-family:inherit;font-size:16px;line-height:1.4;text-align:left;width:100%;box-sizing:border-box;cursor:pointer}
.oef59 .ul-oef-optie:hover:not([disabled]){border-color:var(--v59-navy)}
.oef59 .ul-oef-letter{width:32px;height:32px;background:var(--v59-navy-tint);color:var(--v59-navy);font-size:16px;font-weight:700;flex:none}
.oef59 .ul-oef-optie-txt{flex:1 1 90px;min-width:0;font-size:16px;line-height:1.4}
.oef59 .ul-oef-optie-bodtxt{flex:none;font-size:24px}
@media(min-width:1024px){ .oef59 .ul-oef-optie{font-size:17px} .oef59 .ul-oef-optie-txt{font-size:17px} }
.oef59 .ul-oef-optie.goed{border-color:var(--v59-groen);background:#EEF6F0}
.oef59 .ul-oef-optie.goed .ul-oef-letter{background:var(--v59-groen);color:#fff}
.oef59 .ul-oef-optie.fout{border-color:var(--v59-rood);background:#FBEFEE}
.oef59 .ul-oef-optie.fout .ul-oef-letter{background:var(--v59-rood);color:#fff}
.oef59 .ul-oef-optie.dim{opacity:1}
.oef59-tag{margin-left:auto;max-width:42%;font-size:14px;font-weight:700;line-height:1.3;text-align:right}
.oef59 .ul-oef-optie.goed .oef59-tag{color:var(--v59-groen)}
.oef59 .ul-oef-optie.fout .oef59-tag{color:var(--v59-rood)}
.oef59-bet{flex:1 1 100%;padding-left:44px;font-size:14px;color:var(--v59-gedempt);line-height:1.35}
.oef59-voet{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0;font-size:14px;color:var(--v59-gedempt)}
.oef59-voet .oef59-link{font-weight:400}

/* ── na het antwoord: "Goed om te weten" + één primaire knop ── */
.oef59 .ul-oef-uitleg.oef59-na{background:none;border-radius:0;padding:0;color:var(--v59-tekst);gap:12px}
.oef59-weten{background:var(--v59-kaart);border:2px solid var(--v59-navy);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:6px}
.oef59-eyebrow{margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--v59-navy)}
.oef59-weten-txt{margin:0;font-size:16px;line-height:1.45;color:var(--v59-tekst)}
.oef59-ref{margin:0;font-size:14px;color:var(--v59-gedempt)}
.oef59-status{margin:0;font-size:14px;font-weight:700}
.oef59-status.goed{color:var(--v59-groen)}
.oef59-status.fout{color:var(--v59-rood)}
.oef59-zoek{align-self:flex-start;display:inline-flex;align-items:center;font-size:16px}
.oef59-acties{display:flex;flex-direction:column;gap:12px}
.oef59-acties .v59-knop{width:100%}
@media(min-width:1024px){
  .oef59-acties{flex-direction:row}
  .oef59-acties .v59-knop{width:auto;flex:1 1 0}
}
.oef59 .su-c,.oef59 .su-s{color:inherit}
.oef59 .oef59-bet .su-s,.oef59 .oef59-weten-txt .su-s{color:var(--v59-navy)}
.oef59 .su-h,.oef59 .su-d{color:var(--v59-rood)}
.oef59 .su-c{color:var(--v59-groen)}

/* hulpschakelaar als tekstlink (artboard: "Hulp aan/uit" is een link) */
.oef59-hulp{display:flex}
.oef59-hulp .th-hulp-wissel{background:none;border:0;padding:0 4px;min-height:44px;color:var(--v59-oranje);font:600 15px 'DM Sans',system-ui,sans-serif;text-decoration:underline;cursor:pointer}
.oef59-hulp .th-hw{display:none}
.oef59-hulp .th-hulp-wissel:focus-visible{outline:3px solid var(--v59-oranje);outline-offset:2px}
.oef59 .ul-oef-rastervlak .ul-raster-rij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.oef59 .ul-oef-rastervlak .ul-cel{width:auto;min-width:0}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   SR20 (20-10-2026) — Oefenen heeft één weergave: de oefentab (#view-oefenen) in de huisstijl van de
   schil. O1 geen horizontaal scrollen · O2 v59-stijl · O3 oefening + knoppen in beeld, keuzes in de lade
   achter "Wijzig" · O4 loader · O6/O7 vraag bij de biedbox. Alles onder body[data-nactief="oefen"].
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
@media(min-width:1024px){ body[data-schil="normaal"]:has(#view-oefenen .oef-scherm){--n-kolom:1120px} }

/* de oude expert-tokens van de tab (--panel, --line, --brand …) krijgen hier de v59-waarden */
body[data-nactief="oefen"] #view-oefenen{
  --panel:var(--v59-kaart);--panel2:var(--v59-creme);--soft:var(--v59-navy-tint);--line:var(--v59-lijn);--line2:var(--v59-lijn2);
  --brand:var(--v59-oranje);--brand-tint:color-mix(in srgb,var(--v59-oranje) 10%,var(--v59-kaart));--brand-soft:color-mix(in srgb,var(--v59-oranje) 10%,var(--v59-kaart));
  --txt:var(--v59-tekst);--txt2:var(--v59-tekst);--muted:var(--v59-gedempt);--hint:var(--v59-gedempt);
  --good:var(--v59-groen);--bad:var(--v59-rood);--good-soft:color-mix(in srgb,var(--v59-groen) 11%,var(--v59-kaart));--bad-soft:color-mix(in srgb,var(--v59-rood) 9%,var(--v59-kaart));
  --shadow:none;--shadow2:none;
  display:block;box-sizing:border-box;width:100%;max-width:100%;min-width:0;color:var(--v59-tekst);font-family:'DM Sans',system-ui,sans-serif}
/* O1: niets mag breder worden dan de kolom */
body[data-nactief="oefen"] #view-oefenen,
body[data-nactief="oefen"] #view-oefenen .oef-scherm{overflow-x:clip}
body[data-nactief="oefen"] #view-oefenen :is(.protocard-lg,.oef-kaartbinnen,.oef-kolommen,.oef-links,.oef-rechts,.oef-deal,.oef-deal-l,.oef-deal-r,.oef-free,.oef-free-l,.oef-free-r,.deal-cross,.deal-ask,.bidbox,.auction,.handbox,.opt){min-width:0;max-width:100%;box-sizing:border-box}
body[data-nactief="oefen"] #view-oefenen :is(img,svg,table,pre){max-width:100%}
body[data-nactief="oefen"] #view-oefenen :is(p,span,div,button,summary){overflow-wrap:break-word}
body[data-nactief="oefen"] #view-oefenen .oef-kolommen>*,
body[data-nactief="oefen"] #view-oefenen .oef-kaartbinnen [style*="min-width:240px"],
body[data-nactief="oefen"] #view-oefenen .oef-kaartbinnen [style*="min-width:260px"]{min-width:0!important}
body[data-nactief="oefen"] #view-oefenen .oef-scherm{display:flex;flex-direction:column;min-width:0}

/* kaarten: v59 (wit, 1 px lijn, 16 px radius) */
body[data-nactief="oefen"] #view-oefenen .protocard-lg,
body[data-nactief="oefen"] #view-oefenen .oef-scherm>div[style*="border-radius:16px"]{border:1px solid var(--v59-lijn);border-radius:16px;background:var(--v59-kaart);box-shadow:none}
body[data-nactief="oefen"] #view-oefenen .oef-kaartbinnen{padding:16px clamp(14px,2.4vw,22px) 18px!important}
body[data-nactief="oefen"] #view-oefenen .oef-chips{margin-bottom:12px!important}
body[data-nactief="oefen"] #view-oefenen .oef-scherm>div[style*="border-radius:16px"]>div[style*="padding:20px 22px 24px"]{padding:16px clamp(14px,2.4vw,22px) 18px!important}

/* knoppen: v59 */
body[data-nactief="oefen"] #view-oefenen :is(.btn-acc,.btn-good){min-height:48px;padding:0 20px;border-radius:12px;font:700 16px 'DM Sans',system-ui,sans-serif}
body[data-nactief="oefen"] #view-oefenen .btn-acc{background:var(--v59-oranje);border-color:var(--v59-oranje);color:#fff}
body[data-nactief="oefen"] #view-oefenen .btn-acc:hover{background:var(--v59-oranje-hover);filter:none}
body[data-nactief="oefen"] #view-oefenen .btn-ghost{min-height:44px;padding:0 16px;border-radius:12px;background:var(--v59-kaart);border:1px solid var(--v59-lijn);color:var(--v59-navy);font:600 15px 'DM Sans',system-ui,sans-serif}
.dark body[data-nactief="oefen"] #view-oefenen .btn-ghost{color:var(--v59-tekst)}
body[data-nactief="oefen"] #view-oefenen .btn-ghost:hover{border-color:var(--v59-navy);background:var(--v59-navy-tint)}
body[data-nactief="oefen"] #view-oefenen :is(button,summary,select,input):focus-visible{outline:3px solid var(--v59-oranje);outline-offset:2px}
/* antwoordopties: kaarten met letter */
body[data-nactief="oefen"] #view-oefenen .opt{min-height:56px;border:2px solid var(--v59-lijn);border-radius:12px;padding:10px 14px;font-size:16px;line-height:1.4;gap:12px;background:var(--v59-kaart)}
body[data-nactief="oefen"] #view-oefenen .opt:hover:not(.lock){border-color:var(--v59-navy)}
body[data-nactief="oefen"] #view-oefenen .opt.correct{border-color:var(--v59-groen)}
body[data-nactief="oefen"] #view-oefenen .opt.wrong{border-color:var(--v59-rood)}
body[data-nactief="oefen"] #view-oefenen .optkey{width:32px;height:32px;border-radius:10px;background:var(--v59-navy-tint);color:var(--v59-navy);font-size:16px}
.dark body[data-nactief="oefen"] #view-oefenen .optkey{color:var(--v59-tekst)}
body[data-nactief="oefen"] #view-oefenen .whybox{border-radius:12px}

/* ── de compacte balk (O3) ── */
.oefbar{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 8px 6px 14px;margin:0 0 10px;background:var(--v59-kaart);border:1px solid var(--v59-lijn);border-radius:14px;box-sizing:border-box}
.oefbar-nu{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.oefbar-vorm{font:700 16px/1.25 'DM Sans',system-ui,sans-serif;color:var(--v59-navy)}
.dark .oefbar-vorm{color:var(--v59-tekst)}
.oefbar-wat{font-size:13px;line-height:1.3;color:var(--v59-gedempt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oefbar-reeks{position:relative;flex:none;display:inline-flex;align-items:center;gap:4px;font-size:15px;color:var(--v59-tekst);white-space:nowrap}
.oefbar-reeks b{color:var(--v59-oranje)}
.oefbar-vlam.uit{filter:grayscale(1);opacity:.55}
.oefbar-klein{font-size:12px;color:var(--v59-gedempt)}
.oefbar-knop{position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:12px;
  background:var(--v59-navy);color:#fff;font:700 15px 'DM Sans',system-ui,sans-serif;cursor:pointer}
.oefbar-knop:hover{background:var(--v59-navy2)}
.oefbar-knop:focus-visible{outline:3px solid var(--v59-oranje);outline-offset:2px}
.oefbar-stip{position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:50%;background:var(--v59-oranje);border:2px solid var(--v59-navy)}
@media(max-width:520px){ .oefbar{gap:8px;padding-left:12px} .oefbar-klein{display:none} .oefbar-knop{padding:0 12px} }
/* 27-10-2026 (wens Dafydd): oefenvormen als tabs in de balk; "Wijzig" weg — het onderwerp eronder opent de filterlade */
.oefbar[data-tabs]{align-items:center;padding-top:8px;padding-bottom:8px}
.oefbar[data-tabs] .oefbar-nu{gap:4px}
.oefbar-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-left:-6px;padding:2px}
.oefbar-tabs::-webkit-scrollbar{display:none}
.oefbar-tab{flex:none;min-height:40px;padding:0 14px;border:0;border-radius:9px;background:none;cursor:pointer;white-space:nowrap;
  font:700 14.5px 'DM Sans',system-ui,sans-serif;color:var(--v59-navy)}
.dark .oefbar-tab{color:var(--v59-tekst)}
.oefbar-tab:hover{background:var(--v59-creme)}
.oefbar-tab.on{background:var(--v59-navy);color:#fff;cursor:default}
.oefbar-tab-meer{border:1px dashed var(--v59-lijn)}
.oefbar-tab:focus-visible,.oefbar-filter:focus-visible{outline:3px solid var(--v59-oranje);outline-offset:2px}
.oefbar-filter{position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:5px;max-width:100%;min-height:28px;padding:0 14px 0 2px;
  border:0;background:none;cursor:pointer;font:inherit;font-size:13px;color:var(--v59-gedempt);text-align:left}
.oefbar-filter:hover .oefbar-filtertekst{text-decoration:underline}
.oefbar-filtertekst{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.oefbar-pijl{flex:none;font-size:11px}
.oefbar-filter .oefbar-stip{top:2px;right:-2px;border-color:var(--v59-kaart)}
@media(max-width:520px){ .oefbar-tab{min-height:36px;padding:0 11px;font-size:13.5px}
  .oefbar-tabs{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)} }

/* ── de lade (de keuzes achter "Wijzig") ── */
body[data-nactief="oefen"] #view-oefenen .oeflayer{z-index:120}
body[data-nactief="oefen"] #view-oefenen .oeflayer-panel{background:var(--v59-kaart);color:var(--v59-tekst);border-color:var(--v59-lijn);overscroll-behavior:contain;
  width:min(440px,100vw);box-sizing:border-box}
@media(max-width:767.98px){ body[data-nactief="oefen"] #view-oefenen .oeflayer-panel{width:100%;max-height:90dvh;padding-bottom:calc(20px + env(safe-area-inset-bottom))} }
body[data-nactief="oefen"] #view-oefenen .oeflayer-panel .oef-subtabs{width:auto!important}
body[data-nactief="oefen"] #view-oefenen .oeflayer-panel .oef-vormen{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))!important}

/* ── O6/O7: de vraag bij de biedbox ── */
.oef-prompt{margin:0 0 6px;font-size:17px;font-weight:400;line-height:1.45;letter-spacing:0;color:var(--v59-tekst)}
.oef-prompt .oef-key{font-weight:700}
.oef-vraag{margin:0 0 12px;padding:12px 14px;border:1px solid var(--v59-lijn);border-radius:12px;background:var(--v59-creme)}
.oef-vraag-kop{margin:0 0 4px;font:700 12px/1.2 'DM Sans',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--v59-gedempt)}
.oef-vraag .oef-prompt{margin:0}
.oef-vraag .oef-sub{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--v59-gedempt)}
.oef-rechts>.oef-vraag{margin-bottom:14px}
/* de biedbox vult de kolom */
body[data-nactief="oefen"] #view-oefenen .oef-rechts .bidbox{max-width:100%}

/* ── O3: tafel links, vraag + biedbox (of uitleg) rechts op een breed scherm ── */
.oef-deal,.oef-free{display:block}
@media(min-width:900px){
  .oef-deal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 28px;align-items:start}
  .oef-free{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:8px 28px;align-items:start}
  .oef-free .deal-cross{margin-bottom:8px}
  .oef-free .deal-ask{max-width:none;margin:0}
  .oef-free-r{position:sticky;top:12px}
}
/* compacter, zodat de hele oefening boven de vouw past (1440×800) */
@media(min-width:1024px) and (max-height:900px){
  body[data-nactief="oefen"] #view-oefenen .oef-kaartbinnen{padding-top:12px!important;padding-bottom:12px!important}
  body[data-nactief="oefen"] #view-oefenen .oef-veiling{margin-bottom:10px!important}
  body[data-nactief="oefen"] #view-oefenen .oef-sub{margin-bottom:8px!important}
  body[data-nactief="oefen"] #view-oefenen .opt{min-height:52px;padding-top:8px;padding-bottom:8px}
}
/* telefoon (390×844): alleen wat nodig is om te antwoorden en door te gaan */
@media(max-width:700px){
  body[data-nactief="oefen"] #view-oefenen .kbdhint,
  body[data-nactief="oefen"] #view-oefenen .oef-sub,
  body[data-nactief="oefen"] #view-oefenen .whybox{display:none}
  body[data-nactief="oefen"] #view-oefenen .oef-kolommen{gap:12px}
  body[data-nactief="oefen"] #view-oefenen .oef-veiling{margin-bottom:6px!important}
  body[data-nactief="oefen"] #view-oefenen .oef-prompt{font-size:16px}
  body[data-nactief="oefen"] #view-oefenen .oef-chips{gap:6px!important;margin-bottom:8px!important}
  body[data-nactief="oefen"] #view-oefenen .oef-chips .typechip,
  body[data-nactief="oefen"] #view-oefenen .oef-chips .convpill{display:none}
  body[data-nactief="oefen"] #view-oefenen .opt{min-height:52px}
}
@media(hover:none){ body[data-nactief="oefen"] #view-oefenen .kbdhint{display:none} }

/* ── de kop van Oefenen: één compacte regel ── */
body[data-nactief="oefen"] .v59-kop.oef-kop .v59-h1{font-size:22px}
@media(max-width:1023.98px){
  body[data-nactief="oefen"] .n-kop{padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:8px}
  body[data-nactief="oefen"] .n-kop .v59-kop.oef-kop{min-height:0}
  body[data-nactief="oefen"] .n-kop .v59-help-plek{top:calc(6px + env(safe-area-inset-top))}
}
body[data-nactief="oefen"] .n-uitg{padding-left:12px;padding-right:12px;box-sizing:border-box;max-width:100%}
@media(max-width:1023.98px){ body[data-nactief="oefen"] .n-main{padding-top:10px} }

/* ── O4: de loader "volgende vraag" ── */
.oef-an{position:relative;flex:1 1 100%;display:flex;flex-direction:column;gap:6px;width:100%;padding:8px 12px;margin:0 0 4px;border:1px solid var(--v59-lijn);border-radius:12px;
  background:var(--v59-kaart);color:var(--v59-tekst);font:600 14px/1.3 'DM Sans',system-ui,sans-serif;text-align:left;cursor:pointer;min-height:44px;box-sizing:border-box}
.oef-an:hover{border-color:var(--v59-navy)}
.oef-an:focus-visible{outline:3px solid var(--v59-oranje);outline-offset:2px}
.oef-an-spoor{display:block;height:8px;border-radius:4px;background:var(--v59-navy-tint);overflow:hidden}
.oef-an-balk{display:block;height:100%;width:100%;border-radius:4px;background:var(--v59-oranje);transform-origin:left center;
  animation-name:oefAnLoop;animation-timing-function:linear;animation-fill-mode:forwards;animation-iteration-count:1}
.oef-an.is-pauze .oef-an-balk{animation-play-state:paused;background:var(--v59-gedempt)}
.oef-an-txt{color:var(--v59-gedempt)}
@keyframes oefAnLoop{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){ .oef-an-balk{animation-timing-function:steps(10,end)} }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   SR21 A1/A2 (21-10-2026) — Oefenen op de telefoon (390×844): de hele oefening, inclusief biedbox of
   antwoordopties, staat zonder scrollen boven de tabbalk. Compacter biedverloop en hand, compactere
   biedbox, kortere kop. Na het antwoord blijft het biedverloop staan (compact) en blijft "Volgende vraag"
   (met de loader) in een eigen balk boven de tabbalk hangen terwijl de uitleg scrolt (oefVolgPlaats).
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  body[data-nactief="oefen"] .n-main{padding-top:8px}
  body[data-nactief="oefen"] #view-oefenen .oefbar{min-height:48px;padding-top:2px;padding-bottom:2px;margin-bottom:8px}
  body[data-nactief="oefen"] #view-oefenen .oefbar-wat{font-size:12px}
  /* kaartranden */
  body[data-nactief="oefen"] #view-oefenen .oef-kaartbinnen,
  body[data-nactief="oefen"] #view-oefenen .oef-scherm>div[style*="border-radius:16px"]>div[style*="padding:20px 22px 24px"]{padding:10px 12px 12px!important}
  /* chips: de vorm staat al in de balk erboven, de bron (beslisboom) is hier ruis */
  body[data-nactief="oefen"] #view-oefenen .oef-chips{gap:6px!important;margin-bottom:6px!important}
  body[data-nactief="oefen"] #view-oefenen .oef-chips :is(.oef-chip-bron,.oef-chip-vorm){display:none!important}
  body[data-nactief="oefen"] #view-oefenen .oef-chips .condchip{font-size:12px;padding:2px 9px}
  body[data-nactief="oefen"] #view-oefenen .oef-chips .seatpill{font-size:11.5px!important;padding:2px 8px!important;gap:4px!important}
  body[data-nactief="oefen"] #view-oefenen .oef-chips>span[style*="margin-left:auto"] span{font-size:12px!important}
  body[data-nactief="oefen"] #view-oefenen .oef-kolommen{gap:8px!important}
  /* biedverloop: kleinere cellen; het kopje "Biedverloop" weg (de tabel spreekt voor zich) */
  body[data-nactief="oefen"] #view-oefenen .oef-veiling{margin-bottom:6px!important}
  body[data-nactief="oefen"] #view-oefenen .oef-veiling>div:first-child{display:none}
  /* de leesregel "Volgorde: tegenstander · partner …" staat al in de kolomkoppen; alleen de link Afkortingen blijft */
  body[data-nactief="oefen"] #view-oefenen .oef-veiling>div:last-child{margin-top:4px!important;font-size:0!important;line-height:1.2}
  body[data-nactief="oefen"] #view-oefenen .oef-veiling>div:last-child button{font-size:12.5px!important;min-height:24px}
  body[data-nactief="oefen"] #view-oefenen .auction .hc{min-height:24px;font-size:10.5px}
  body[data-nactief="oefen"] #view-oefenen .auction .hc .vr{min-width:18px;height:18px}
  body[data-nactief="oefen"] #view-oefenen .auction .bc{min-height:34px;font-size:16px}
  body[data-nactief="oefen"] #view-oefenen .auction .bc.pass{font-size:13px}
  body[data-nactief="oefen"] #view-oefenen .oef-prompt{margin-bottom:4px}
  /* de vraag bij de biedbox */
  body[data-nactief="oefen"] #view-oefenen .oef-vraag{padding:8px 12px;margin-bottom:8px}
  body[data-nactief="oefen"] #view-oefenen .oef-vraag-kop{font-size:11px;margin-bottom:2px}
  body[data-nactief="oefen"] #view-oefenen .oef-vraag .oef-prompt{font-size:15.5px;line-height:1.4}
  /* biedbox: 46 px raakvlak (boven de 44-pt-richtlijn) */
  body[data-nactief="oefen"] #view-oefenen .bidbox{--bh:46px;gap:5px}
  body[data-nactief="oefen"] #view-oefenen .bidbox :is(.bbxlvls,.bbxrow,.bbxtop){gap:5px}
  body[data-nactief="oefen"] #view-oefenen .bidbox .bbx{height:46px}
  body[data-nactief="oefen"] #view-oefenen .bbxstep{font-size:12px;line-height:1.2}
  /* meerkeuze */
  body[data-nactief="oefen"] #view-oefenen .opt{min-height:48px;padding:6px 12px;gap:10px;line-height:1.3}
  body[data-nactief="oefen"] #view-oefenen .optkey{width:28px;height:28px;font-size:15px}
  /* Bied het spel: tafel zonder stoelkaartjes (het biedverloop toont wie waar zit), compacte hand */
  body[data-nactief="oefen"] #view-oefenen .oef-deal-kop{margin-bottom:6px!important;justify-content:flex-end!important}
  body[data-nactief="oefen"] #view-oefenen .oef-deal-kop-l{display:none!important}
  body[data-nactief="oefen"] #view-oefenen .deal-cross{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"m" "s"!important;gap:8px!important}
  body[data-nactief="oefen"] #view-oefenen .deal-cross>:is(.dc-n,.dc-w,.dc-e),
  body[data-nactief="oefen"] #view-oefenen .deal-cross .dc-noot{display:none}
  body[data-nactief="oefen"] #view-oefenen .deal-cross>.dc-m{max-width:none}
  body[data-nactief="oefen"] #view-oefenen .handbox.mine{padding:8px 12px;border-radius:12px}
  body[data-nactief="oefen"] #view-oefenen .handbox .hb-kop{margin-bottom:2px!important;gap:6px!important}
  body[data-nactief="oefen"] #view-oefenen .handbox .hb-echt{display:none}
  body[data-nactief="oefen"] #view-oefenen .handbox .hb-chips{margin-top:6px!important;gap:6px!important}
  body[data-nactief="oefen"] #view-oefenen .cardrow{margin:3px 0;gap:4px}
  body[data-nactief="oefen"] #view-oefenen .cardrow>.csym{width:20px;font-size:17px}
  body[data-nactief="oefen"] #view-oefenen .cardrow>.ccard{flex:0 1 36px;height:34px;font-size:17px;border-radius:7px}
  body[data-nactief="oefen"] #view-oefenen .deal-ask .fh{font-size:15px!important;margin-bottom:6px!important}
  body[data-nactief="oefen"] #view-oefenen .oef-free .deal-cross{margin-bottom:8px}
  /* na het antwoord: "Volgende vraag" + loader blijven boven de tabbalk */
  body[data-nactief="oefen"] #view-oefenen .oef-volg{position:sticky;bottom:calc(var(--n-tabbar-h,72px) + env(safe-area-inset-bottom) + 8px);z-index:6;
    display:flex;flex-direction:column;gap:6px;margin:8px 0 0;padding:8px;border-radius:14px;
    background:color-mix(in srgb,var(--v59-creme) 92%,transparent);box-shadow:0 -2px 12px rgba(16,24,40,.10)}
  body[data-nactief="oefen"] #view-oefenen .oef-volg :is(#nextBtn,#dealNext){width:100%}
  body[data-nactief="oefen"] #view-oefenen .oef-volg .oef-an{margin:0}
}

/* ── leesbaarheid 55+ en WCAG AA-contrast, vraag- en antwoordscherm (26-10-2026) ──
   Gemeten met tools/oefenen-leren-zoom-proef.mjs op 390 px en bij 200% zoom, licht en donker.
   Licht: oranje tekstlinks (#C4501B op crème = 4,2:1) naar de donkere oranjetint (5,6:1); kleine regels
   (onderwerp 13 px, eyebrow 12 px) naar 15/14 px. Donker: de beantwoorde opties en rastercellen hadden een
   vaste lichte achtergrond onder lichte tekst (1,1:1), de letterbolletjes en "Goed om te weten" navy op
   donker — nu donkere tinten en de lichte kleurvarianten van ui-laag.css. */
.oef59-link,.oef59-hulp .th-hulp-wissel{color:var(--v59-oranje-hover)}
.oef59 .ul-oef-rastervlak .ul-cel.n-oef-cel-vraag{color:var(--v59-oranje-hover)}
.oef59-eyebrow{font-size:14px}
.oef59 .ul-oef-onderwerp{font-size:15px}
.dark .oef59-link,.dark .oef59-hulp .th-hulp-wissel{color:var(--ul-oranje-op,#f3b27a)}
.dark .oef59-link:hover{color:#f8c79c}
.dark .oef59 .ul-oef-rastervlak .ul-cel.n-oef-cel-vraag{background:var(--ul-oranje-tint);color:var(--ul-oranje-op,#f3b27a)}
.dark .oef59 .ul-oef-optie.goed,.dark .oef59 .ul-oef-rastervlak .ul-cel.n-oef-cel-goed{background:var(--ul-groen-tint)}
.dark .oef59 .ul-oef-optie.fout,.dark .oef59 .ul-oef-rastervlak .ul-cel.n-oef-cel-fout{background:#2a1614}
.dark .oef59 .ul-oef-letter{color:var(--v59-tekst)}
.dark .oef59-eyebrow{color:var(--v59-tekst)}
.dark .oef59-weten{border-color:var(--ul-licht,#c9d0e0)}
.dark .oef59-status.goed,.dark .oef59 .ul-oef-optie.goed .oef59-tag{color:var(--ul-groen)}
.dark .oef59-status.fout,.dark .oef59 .ul-oef-optie.fout .oef59-tag{color:var(--ul-rood)}
.dark .oef59 .su-h,.dark .oef59 .su-d{color:var(--ul-su-h)}
.dark .oef59 .su-c{color:var(--ul-su-c)}
.dark .oef59 .oef59-bet .su-s,.dark .oef59 .oef59-weten-txt .su-s{color:var(--v59-tekst)}

/* Oefenen compact op de telefoon (wens Dafydd 30-10-2026): de oefenvorm als keuzelijst op één regel met het
   onderwerp en de reeks — geen schuivende tabrij; de hulp/statistieken onderaan kleiner. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.oefbar-vormkies{display:none}
.oefbar-vormkies select{appearance:none;-webkit-appearance:none;font:700 15px/1.2 'DM Sans',system-ui,sans-serif;color:var(--v59-navy);background:var(--v59-vlak,#F3EFE8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23B5461F'/%3E%3C/svg%3E") no-repeat right 10px center;border:1px solid var(--v59-lijn);border-radius:10px;min-height:40px;padding:0 28px 0 12px;max-width:100%}
.dark .oefbar-vormkies select{color:var(--v59-tekst);background-color:var(--v59-kaart)}
@media(max-width:600px){
  .oefbar[data-tabs]{min-height:0;padding:6px 8px 6px 8px;gap:8px;margin-bottom:8px}
  .oefbar[data-tabs] .oefbar-nu{flex-direction:row;align-items:center;gap:8px;min-width:0}
  .oefbar[data-tabs] .oefbar-tabs{display:none}
  .oefbar-vormkies{display:block;flex:0 1 auto;min-width:0}
  .oefbar-vormkies select{width:100%}
  .oefbar[data-tabs] .oefbar-filter{flex:1 1 auto;min-width:0;align-self:center}
  .oefbar[data-tabs] .oefbar-klein{display:none}
  .oef-helper .n-helper-ingang{padding:10px 14px;margin-top:8px}
  .oef-helper .n-helper-ingang > summary{font-size:15px}
}

/* Groepstabs bovenaan Systeem (Opzoeken · Oefen je systeem) en Leren (Lessen · Speelfiguren · Startquiz), menu 30-10-2026 */
.n-groep{padding-top:12px;padding-bottom:4px}
.n-groep-tabs{width:100%;max-width:100%;overflow:visible}
.n-groep-tabs .bs-beta{margin-left:6px}