/* 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} }

/* ── 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}
}