/* ===================================================================
   scratch.css — Scratch-3-blokken in pure CSS
   Nagebouwde blokvormen: stapelblok (met nokje), hoedblok, C-blok,
   zeshoek-boolean, ovale reporter, invulvelden en dropdowns.
   Officiele Scratch-categoriekleuren.
   =================================================================== */

/* ---------- officiele Scratch-3 categoriekleuren ---------- */
:root{
  --sc-motion:#4C97FF;    --sc-motion-d:#3373CC;
  --sc-looks:#9966FF;     --sc-looks-d:#774DCB;
  --sc-sound:#CF63CF;     --sc-sound-d:#BD42BD;
  --sc-events:#FFBF00;    --sc-events-d:#CC9900;
  --sc-control:#FFAB19;   --sc-control-d:#CF8B17;
  --sc-sensing:#5CB1D6;   --sc-sensing-d:#2E8EB8;
  --sc-operators:#59C059; --sc-operators-d:#389438;
  --sc-variables:#FF8C1A; --sc-variables-d:#DB6E00;
  --sc-list:#FF661A;      --sc-list-d:#E64D00;
  --sc-custom:#FF6680;    --sc-custom-d:#FF3355;
  --sc-font:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --sc-notch-l:16px;     /* afstand nokje vanaf links */
  --sc-notch-w:28px;     /* breedte nokje */
  --sc-notch-h:5px;      /* hoogte nokje */
}

/* ---------- script: verticale stapel blokken ---------- */
.sb{
  display:inline-flex;flex-direction:column;align-items:flex-start;
  font-family:var(--sc-font);font-size:13px;line-height:1.25;
  margin:2px 0;vertical-align:top;text-align:left;
}
/* script op een 'codegebied'-achtergrond */
.sb-canvas{
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb,var(--ink) 12%,transparent) 1px, transparent 0)
    0 0/16px 16px,
    var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-md,14px);
  padding:16px 18px;margin:var(--s-4,16px) 0;overflow-x:auto;
}
.sb-canvas.tight{padding:12px 14px}
/* rij van losse blokken naast elkaar (bv. in een blokkaart) */
.sb-row{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-start}

/* ===================================================================
   BASISBLOK (stapelblok)
   =================================================================== */
.sb-b{
  position:relative;display:inline-flex;align-items:center;flex-wrap:wrap;
  gap:6px;min-height:32px;padding:6px 13px;
  background:var(--c,#4C97FF);color:#fff;font-weight:700;
  border-radius:5px;white-space:nowrap;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.16);
}
/* nokje onderaan: steekt uit en valt over het volgende blok — precies zoals
   twee Scratch-blokken in elkaar klikken (z-index laat het bovenop tekenen) */
.sb-b::after{
  content:"";position:absolute;left:var(--sc-notch-l);top:100%;
  width:var(--sc-notch-w);height:var(--sc-notch-h);
  background:var(--c,#4C97FF);border-radius:0 0 4px 4px;z-index:3;
}
/* blokken in een stapel sluiten naadloos aan */
.sb>.sb-b + .sb-b,
.sb>.sb-c + .sb-b,
.sb>.sb-b + .sb-c,
.sb>.sb-c + .sb-c{margin-top:0}

/* ---------- hoedblok (gebeurtenissen: afgeronde koepel) ---------- */
.sb-b.hat{
  border-radius:18px 18px 5px 5px;padding-top:12px;min-height:40px;
}

/* ---------- eindblok (cap: geen nokje onderaan, bv. "stop alles") ---------- */
.sb-b.cap::after{display:none}
.sb-b.cap{border-radius:5px 5px 5px 5px}

/* ---------- losse reporter (ovaal, geeft een waarde terug) ---------- */
.sb-b.rep{
  border-radius:999px;padding:5px 14px;min-height:26px;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.16);
}
.sb-b.rep::after{display:none}

/* ---------- losse boolean (zeshoek, geeft waar/niet-waar terug) ---------- */
.sb-b.bool{
  border-radius:0;padding:5px 16px;min-height:26px;
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%);
  box-shadow:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));
}
.sb-b.bool::after{display:none}

/* ===================================================================
   C-BLOK (herhaal / als-dan: heeft een 'mond')
   =================================================================== */
.sb-c{display:flex;flex-direction:column;align-items:flex-start;position:relative}
.sb-c-top{
  position:relative;display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;
  min-height:32px;padding:6px 13px;background:var(--c,#FFAB19);color:#fff;font-weight:700;
  border-radius:5px 5px 0 0;white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.16);
}
/* de 'arm': linkerbalk van 16px met de ingesloten blokken ernaast */
.sb-c-mid{
  position:relative;align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;
  border-left:16px solid var(--c,#FFAB19);
  padding:0;min-height:16px;
}
/* nokje binnen in de mond (waar het eerste binnenblok inklikt) */
.sb-c-mid::before{
  content:"";position:absolute;left:0;top:0;
  width:var(--sc-notch-w);height:var(--sc-notch-h);
  background:var(--c,#FFAB19);border-radius:0 0 4px 4px;z-index:3;
}
.sb-c-bot{
  position:relative;min-width:96px;height:16px;background:var(--c,#FFAB19);
  border-radius:0 0 5px 5px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.16);
}
.sb-c-bot::after{
  content:"";position:absolute;left:var(--sc-notch-l);top:100%;
  width:var(--sc-notch-w);height:var(--sc-notch-h);
  background:var(--c,#FFAB19);border-radius:0 0 4px 4px;z-index:3;
}
/* "anders"-tussenbalk voor als/anders */
.sb-c-else{
  position:relative;min-width:96px;padding:6px 13px;background:var(--c,#FFAB19);
  color:#fff;font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.16);
}
/* C-blok zonder onderkant-nokje (bv. "herhaal voortdurend") */
.sb-c.noend .sb-c-bot::after{display:none}

/* ===================================================================
   INVULVELDEN BINNEN BLOKKEN
   =================================================================== */
/* getal/tekst-invulveld: wit ovaal */
.sb-i{
  background:#fff;color:#333;border-radius:999px;padding:2px 10px;
  font-weight:700;font-size:12px;min-width:22px;text-align:center;display:inline-block;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.22);
}
.sb-i.txt{border-radius:6px;text-align:left}
/* dropdown: donkerder vlak met pijltje */
.sb-d{
  background:var(--cd,rgba(0,0,0,.2));color:#fff;border-radius:999px;padding:2px 8px 2px 10px;
  font-weight:700;font-size:12px;display:inline-flex;align-items:center;gap:5px;
}
.sb-d::after{content:"";border:4px solid transparent;border-top-color:#fff;margin-top:3px;opacity:.9}
/* ingebedde reporter (ovaal blok binnen een ander blok) */
.sb-r{
  background:var(--rc,#FF8C1A);color:#fff;border-radius:999px;padding:2px 11px;
  font-weight:700;font-size:12px;display:inline-flex;align-items:center;gap:4px;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.18);
}
/* ingebedde boolean (zeshoek binnen een ander blok) */
.sb-h{
  background:var(--hc,rgba(0,0,0,.15));color:#fff;padding:2px 12px;
  font-weight:700;font-size:12px;display:inline-flex;align-items:center;gap:4px;
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,9px 100%,0 50%);
}
/* leeg zeshoek-gat (nog niets ingevuld) */
.sb-h.leeg{background:rgba(0,0,0,.2);min-width:44px;min-height:20px}
/* kleurvakje (bv. "raakt kleur ...?") */
.sb-swatch{width:20px;height:14px;border-radius:3px;border:1.5px solid rgba(255,255,255,.85);display:inline-block}
/* groene vlag / rode stopknop als icoontje binnen een blok */
.sb-flag,.sb-stop{display:inline-block;width:15px;height:15px;vertical-align:-2px;flex:none}
.sb-flag{background:#4CBF56;clip-path:polygon(0 0,100% 18%,55% 40%,100% 62%,0 84%,0 100%,0 0);
  border-radius:1px}
.sb-stop{background:#EC5A5A;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}

/* ===================================================================
   CATEGORIEKLEUREN — zet --c (blok) en --cd (dropdown)
   =================================================================== */
.motion   {--c:var(--sc-motion);   --cd:var(--sc-motion-d)}
.looks    {--c:var(--sc-looks);    --cd:var(--sc-looks-d)}
.sound    {--c:var(--sc-sound);    --cd:var(--sc-sound-d)}
.events   {--c:var(--sc-events);   --cd:var(--sc-events-d)}
.control  {--c:var(--sc-control);  --cd:var(--sc-control-d)}
.sensing  {--c:var(--sc-sensing);  --cd:var(--sc-sensing-d)}
.operators{--c:var(--sc-operators);--cd:var(--sc-operators-d)}
.variables{--c:var(--sc-variables);--cd:var(--sc-variables-d)}
.listcat  {--c:var(--sc-list);     --cd:var(--sc-list-d)}
.custom   {--c:var(--sc-custom);   --cd:var(--sc-custom-d)}
/* kleur voor ingebedde reporters/booleans */
.r-motion{--rc:var(--sc-motion)}      .r-looks{--rc:var(--sc-looks)}
.r-sound{--rc:var(--sc-sound)}        .r-sensing{--rc:var(--sc-sensing)}
.r-operators{--rc:var(--sc-operators)}.r-variables{--rc:var(--sc-variables)}
.r-list{--rc:var(--sc-list)}
.h-sensing{--hc:var(--sc-sensing)}    .h-operators{--hc:var(--sc-operators)}

/* snelstart-kaarten: titel op eigen regel, dan de omschrijving */
a.card.qa b{display:block;font-family:var(--font-display);font-size:15.5px;margin-bottom:3px}
a.card.qa span{display:block;font-size:13.5px;color:var(--ink-soft);line-height:1.5}

/* ===================================================================
   NAGEBOUWDE SCRATCH-EDITOR (screenshot-mockup)
   =================================================================== */
.ed{
  border:1px solid var(--line);border-radius:var(--r-md,14px);overflow:hidden;
  background:#fff;color:#575E75;font-family:var(--sc-font);font-size:12px;
  box-shadow:var(--e-2);display:grid;
  grid-template-columns:64px 200px 1fr 400px;grid-template-rows:44px 1fr;
}
.ed-menu{
  grid-column:1/-1;background:#4C97FF;color:#fff;display:flex;align-items:center;
  gap:18px;padding:0 16px;font-weight:600;font-size:12.5px;
}
.ed-menu .ed-logo{display:flex;align-items:center;gap:7px;font-weight:800;font-size:14px}
.ed-menu .ed-logo .dot{width:20px;height:20px;border-radius:6px;background:#fff}
.ed-menu .sp{flex:1}
/* categoriekolom */
.ed-cats{background:#fff;border-right:1px solid #E6E8EB;padding:8px 0;display:flex;
  flex-direction:column;align-items:center;gap:9px;overflow:hidden}
.ed-cat{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:8.5px;
  font-weight:600;color:#575E75;text-align:center;line-height:1.1;width:100%}
.ed-cat .cd{width:22px;height:22px;border-radius:50%;background:var(--c)}
/* blokkenpalet */
.ed-palet{background:#F9F9F9;border-right:1px solid #E6E8EB;padding:10px;overflow:hidden;
  display:flex;flex-direction:column;gap:7px}
.ed-palet .ed-pt{font-weight:700;font-size:11px;color:#575E75;margin-bottom:2px}
/* codegebied */
.ed-code{
  background:
    radial-gradient(circle at 1px 1px,#D9D9D9 1px,transparent 0) 0 0/16px 16px,#FCFCFC;
  padding:16px;overflow:hidden;position:relative;
}
/* rechterkolom: speelveld + sprites */
.ed-right{background:#E6F0FF;display:flex;flex-direction:column;border-left:1px solid #E6E8EB}
.ed-stagebar{height:34px;background:#E6F0FF;display:flex;align-items:center;gap:9px;padding:0 12px;
  border-bottom:1px solid #D9E3F2}
.ed-stage{background:#fff;flex:none;aspect-ratio:4/3;margin:8px;border-radius:5px;position:relative;
  overflow:hidden;box-shadow:inset 0 0 0 1px #E6E8EB}
.ed-sprites{flex:1;background:#F9F9F9;border-top:1px solid #E6E8EB;padding:9px;display:flex;
  flex-wrap:wrap;gap:8px;align-content:flex-start}
.ed-sprite{width:62px;height:64px;background:#fff;border:2px solid #E6E8EB;border-radius:7px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:9px;
  font-weight:600;color:#575E75}
.ed-sprite.aan{border-color:#4C97FF;box-shadow:0 0 0 2px rgba(76,151,255,.25)}
.ed-sprite .thumb{font-size:22px;line-height:1}
/* zone-nummer-badges op de mockup */
.ed-badge{
  position:absolute;z-index:9;width:26px;height:26px;border-radius:50%;
  background:#e8455a;color:#fff;font-family:var(--font-display,sans-serif);font-weight:800;font-size:14px;
  display:grid;place-items:center;box-shadow:0 3px 8px rgba(0,0,0,.35);border:2px solid #fff;
}
.ed-wrap{position:relative;margin:var(--s-5,20px) 0}

/* ===================================================================
   BLOKKAART (blokkenboek)
   =================================================================== */
.blokkaart{
  background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--r-lg,22px);
  padding:var(--s-5,20px) var(--s-6,24px);box-shadow:var(--e-1);
  backdrop-filter:blur(var(--glass-blur,16px));-webkit-backdrop-filter:blur(var(--glass-blur,16px));
  transition:transform var(--dur-2,220ms) var(--ease,ease),box-shadow var(--dur-2,220ms);
}
.blokkaart:hover{transform:translateY(-3px);box-shadow:var(--e-2)}
.blokkaart h4{
  margin:0 0 10px;font-size:15.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--font-display);
}
.blokkaart .bk-wat{font-size:14px;margin:10px 0 4px;color:var(--ink)}
.blokkaart .bk-wat b{color:var(--ink)}
.blokkaart .bk-fout,.blokkaart .bk-probeer{
  font-size:13px;border-radius:var(--r-sm,10px);padding:9px 13px;margin:10px 0 0;
  position:relative;padding-left:16px;
}
.blokkaart .bk-fout{background:var(--warn-bg);color:var(--ink)}
.blokkaart .bk-fout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  border-radius:4px 0 0 4px;background:var(--warn)}
.blokkaart .bk-probeer{background:var(--ok-bg);color:var(--ink)}
.blokkaart .bk-probeer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  border-radius:4px 0 0 4px;background:var(--ok)}

/* categorie-kop in het blokkenboek */
.cathead{
  display:flex;align-items:center;gap:12px;margin:var(--s-12,48px) 0 var(--s-4,16px);
  padding:14px 20px;border-radius:var(--r-lg,22px);
  background:linear-gradient(120deg,color-mix(in srgb,var(--c) 20%,transparent),transparent 70%);
  border:1px solid color-mix(in srgb,var(--c) 30%,transparent);
}
.cathead .catdot{
  width:40px;height:40px;border-radius:13px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--c),color-mix(in srgb,var(--c) 68%,#000 8%));
  box-shadow:0 4px 10px color-mix(in srgb,var(--c) 40%,transparent);
}
.cathead .catdot svg.ico{width:21px;height:21px}
.cathead h2{margin:0;font-size:var(--t-xl,24px)}
.cathead .cat-sub{font-size:13px;color:var(--ink-soft);margin-top:2px}

/* ===================================================================
   STAP-VOOR-STAP (opdrachtpagina's)
   =================================================================== */
.stapkaart{
  display:grid;grid-template-columns:52px 1fr;gap:0 var(--s-4,16px);
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:var(--r-lg,22px);padding:var(--s-5,20px) var(--s-6,24px);
  margin:var(--s-4,16px) 0;box-shadow:var(--e-1);position:relative;
  backdrop-filter:blur(var(--glass-blur,16px));-webkit-backdrop-filter:blur(var(--glass-blur,16px));
}
.stapkaart .stap-nr{
  grid-row:1/3;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:18px;color:#fff;
  background:linear-gradient(140deg,var(--brand),var(--brand-2));box-shadow:var(--e-brand);
}
.stapkaart .stap-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:44px}
.stapkaart .stap-kop h4{margin:0;font-size:15.5px;font-family:var(--font-display)}
.stapkaart .stap-body{grid-column:2;padding-top:8px}
.stapkaart .stap-body>p:first-child{margin-top:0}
.stapkaart .stap-uitleg{font-size:14px;color:var(--ink-soft);margin:8px 0}
.stapkaart .stap-uitleg b{color:var(--ink)}
/* mijlpaal-stap (hier moet je testen) */
.stapkaart.test{border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:var(--ok-bg)}
.stapkaart.test .stap-nr{background:linear-gradient(140deg,var(--ok),var(--l4-2))}
.stapkaart.uitdaging{border-color:color-mix(in srgb,var(--xp) 45%,transparent);background:var(--alt-bg)}
.stapkaart.uitdaging .stap-nr{background:linear-gradient(140deg,var(--xp),var(--l5))}
@media (max-width:640px){
  .stapkaart{grid-template-columns:1fr}
  .stapkaart .stap-nr{grid-row:auto;margin-bottom:8px}
  .stapkaart .stap-body{grid-column:1}
}

/* "waar hoort dit blok?" — categoriewijzer bij een stap */
.blokwijzer{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;
  border-radius:var(--r-pill,999px);padding:3px 11px;color:#fff;
  background:var(--c,#4C97FF);box-shadow:0 2px 6px color-mix(in srgb,var(--c) 40%,transparent);
}
.blokwijzer svg.ico{width:1em;height:1em}

/* ===================================================================
   OPDRACHT-TEGELS (overzichtspagina)
   =================================================================== */
.optegels{display:grid;gap:var(--s-5,20px);grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
a.optegel{
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);overflow:hidden;
  background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--r-lg,22px);
  box-shadow:var(--e-1);position:relative;
  transition:transform var(--dur-2,220ms) var(--ease),box-shadow var(--dur-2,220ms),border-color var(--dur-2,220ms);
}
a.optegel:hover{
  transform:translateY(-5px);box-shadow:var(--e-3);text-decoration:none;
  border-color:color-mix(in srgb,var(--c,var(--brand)) 55%,var(--glass-border));
}
.optegel .ot-beeld{
  position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2);
  display:grid;place-items:center;
}
.optegel .ot-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.optegel:hover .ot-beeld img{transform:scale(1.04)}
.optegel .ot-beeld img{transition:transform var(--dur-3,340ms) var(--ease-out)}
/* fallback als er nog geen afbeelding is: gekleurd blokpatroon */
.optegel .ot-fallback{
  position:absolute;inset:0;display:grid;place-items:center;gap:8px;
  background:linear-gradient(140deg,color-mix(in srgb,var(--c) 85%,#000 5%),color-mix(in srgb,var(--c) 45%,#fff));
  color:#fff;font-family:var(--font-display);font-weight:800;font-size:44px;
  text-shadow:0 2px 8px rgba(0,0,0,.25);
}
.optegel .ot-nr{
  position:absolute;top:12px;left:12px;width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:17px;
  color:#fff;background:var(--c,var(--brand));box-shadow:0 4px 12px rgba(0,0,0,.3);z-index:2;
}
.optegel .ot-stars{
  position:absolute;top:14px;right:12px;z-index:2;background:rgba(20,22,40,.72);
  color:var(--gold);border-radius:999px;padding:3px 11px;font-size:12px;letter-spacing:2px;
  backdrop-filter:blur(4px);
}
.optegel .ot-body{padding:var(--s-4,16px) var(--s-5,20px) var(--s-5,20px)}
.optegel .ot-body h3{margin:0 0 5px;font-size:16.5px;font-family:var(--font-display)}
.optegel .ot-body p{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.optegel .ot-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}

/* ===================================================================
   PARSONS-PUZZELS & MEERKEUZE
   =================================================================== */
.parsons{
  background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--r-lg,22px);
  padding:var(--s-5,20px) var(--s-6,24px);box-shadow:var(--e-1);margin:var(--s-4,16px) 0;
  backdrop-filter:blur(var(--glass-blur,16px));-webkit-backdrop-filter:blur(var(--glass-blur,16px));
}
.parsons h4{margin:0 0 6px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--font-display);font-size:16px}
.parsons .p-kolommen{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4,16px);margin:var(--s-3,12px) 0}
@media (max-width:760px){.parsons .p-kolommen{grid-template-columns:1fr}}
.p-pool,.p-target{
  border:1.5px dashed color-mix(in srgb,var(--brand) 35%,var(--line));border-radius:var(--r-md,16px);
  padding:12px;min-height:100px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  background:var(--surface-2);
}
.p-target{border-color:color-mix(in srgb,var(--ok) 55%,transparent);background:var(--ok-bg)}
.p-zonelabel{font-size:11.5px;font-weight:800;color:var(--ink-faint);text-transform:uppercase;
  letter-spacing:.6px;margin-bottom:5px}
.p-item{cursor:grab;user-select:none}
.p-item:active{cursor:grabbing}
.p-item.dragging{opacity:.45}
.p-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
button.btn{
  background:var(--ink);color:var(--surface);border:none;border-radius:var(--r-sm,10px);
  padding:9px 17px;font-family:var(--font-body);font-weight:800;font-size:13px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:transform var(--dur-1,120ms) var(--ease);
}
button.btn:hover{transform:translateY(-1px);filter:brightness(1.12)}
button.btn.groen{background:linear-gradient(135deg,var(--ok),var(--l4-2));color:#fff}
button.btn.grijs{background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line)}
.p-feedback{font-weight:800;font-size:13.5px;display:inline-flex;align-items:center;gap:7px}
.p-feedback.goed{color:var(--ok)}
.p-feedback.fout{color:var(--l5)}
.p-print-fallback{display:none}

.quizmc{
  background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--r-lg,22px);
  padding:var(--s-5,20px) var(--s-6,24px);box-shadow:var(--e-1);margin:var(--s-4,16px) 0;
  backdrop-filter:blur(var(--glass-blur,16px));-webkit-backdrop-filter:blur(var(--glass-blur,16px));
}
.quizmc .q-opties{display:flex;flex-direction:column;gap:7px;margin:12px 0}
.quizmc button.q-opt{
  text-align:left;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-sm,10px);
  padding:10px 15px;font-size:13.5px;cursor:pointer;font-family:var(--font-body);color:var(--ink);
  transition:border-color var(--dur-1,120ms),background var(--dur-1,120ms),transform var(--dur-1,120ms);
}
.quizmc button.q-opt:hover{border-color:var(--brand);transform:translateX(2px)}
.quizmc button.q-opt.goed{border-color:var(--ok);background:var(--ok-bg);font-weight:800}
.quizmc button.q-opt.fout{border-color:var(--l5);background:color-mix(in srgb,var(--l5) 12%,transparent)}
.quizmc .q-uitleg{
  display:none;margin-top:10px;font-size:13.5px;background:var(--ok-bg);
  border-radius:var(--r-sm,10px);padding:11px 14px;color:var(--ink);
  border-left:4px solid var(--ok);
}
.quizmc .q-uitleg.open{display:block}

/* ===================================================================
   PRINT
   =================================================================== */
@media print{
  .sb-canvas{background:#fff;border:1px solid #ccc;break-inside:avoid}
  .blokkaart,.stapkaart,.parsons,.quizmc,a.optegel{
    box-shadow:none;break-inside:avoid;backdrop-filter:none;background:#fff;border:1px solid #ddd;
  }
  .p-print-fallback{display:block;font-size:10.5pt;margin-top:8px}
  .p-controls{display:none}
  .cathead{break-after:avoid;background:#f4f4f8}
  .sb-b,.sb-c-top,.sb-c-mid,.sb-c-bot,.sb-c-else{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}