/* MeerkatSkool · quiz look (Phase 3, Oct 2026)
   Restyles the LIVE quiz engines' own markup to the brand (BRAND.md §6). No engine code changes:
   it only targets the class names the four apps already output.
     Afrikaans apps: #vasvra .v-kop .spoor .vol .vraagkaart .opdrag .stelling .keuse(.reg .fout) .memo .syferbord .tikkas .uitslag-blad
     English apps:   #quiz   .q-head .track .full .qcard .instruction .stem .choice(.right .wrong) .memo .keypad .typebox .score-sheet
   Loaded after the old stylesheet on quiz pages only. */

#vasvra, #quiz {
  --mk-blue:#102641; --mk-yellow:#E5A324; --mk-sky:#EEF2F7; --mk-soft:#F3F6FA; --mk-line:#DCE4EE;
  --mk-ink2:#3D5577; --mk-ink3:#6B7F99; --mk-good:#1E8A4C; --mk-bad:#C8321B; --mk-good-bg:#E7F5EC; --mk-bad-bg:#FBEAE6;
  --mk-body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif; --mk-display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  font-family:var(--mk-body) !important; background:var(--mk-sky) !important; color:var(--mk-blue);
}
#vasvra *, #quiz * { font-family:inherit; letter-spacing:normal; }

/* ── top bar: light, with a round close button, the title and the score pill ── */
#vasvra .v-kop, #quiz .q-head { background:var(--mk-sky) !important; color:var(--mk-blue) !important; box-shadow:none !important; border:0 !important; }
#vasvra #v-naam, #quiz #q-name, #vasvra .v-titel b, #quiz .q-title b { color:var(--mk-blue) !important; font-family:var(--mk-display) !important; font-weight:800 !important; }
#vasvra .v-titel, #quiz .q-title { color:var(--mk-blue) !important; font-family:var(--mk-display) !important; font-weight:800 !important; }
#vasvra .v-titel small, #vasvra .v-titel span, #quiz .q-title small, #quiz .q-title span,
#vasvra #v-area, #quiz #q-area { color:var(--mk-ink2) !important; font-family:var(--mk-body) !important; text-transform:none !important; letter-spacing:normal !important; font-weight:700 !important; }
#vasvra .terug-kn, #quiz .back-btn { background:#fff !important; color:var(--mk-blue) !important; border:2px solid var(--mk-line) !important; border-radius:50% !important; box-shadow:none !important; }
#vasvra .telling, #quiz .tally { background:#fff !important; color:var(--mk-blue) !important; border:2px solid var(--mk-line) !important; border-radius:999px !important; font-family:var(--mk-display) !important; font-weight:800 !important; box-shadow:none !important; }

/* ── progress: the meerkat walks along the track toward the flag ── */
#vasvra .spoor, #quiz .track { position:relative !important; height:10px !important; border-radius:999px !important; background:var(--mk-line) !important; overflow:visible !important;
  width:calc(100% - 76px) !important; max-width:680px !important; margin-left:auto !important; margin-right:auto !important; }   /* centred over the card, room for the flag */
#vasvra .spoor > i, #quiz .track > i, #vasvra .spoor .vol, #quiz .track .full { position:relative !important; height:100% !important; border-radius:999px !important; background:var(--mk-yellow) !important; overflow:visible !important; min-width:6px; }
#vasvra .spoor > i::after, #quiz .track > i::after {
  content:""; position:absolute; right:-17px; top:50%; width:34px; height:34px; transform:translateY(-50%);
  background:#fff url(/assets/img/meerkat-icon-320.webp) center/100% no-repeat; border-radius:50%; box-shadow:0 2px 6px rgba(8,22,46,.25); }
#vasvra .spoor::after, #quiz .track::after { content:"\1F3C1"; position:absolute; right:-32px; top:50%; transform:translateY(-55%); font-size:20px; line-height:1; }
#vasvra .spoor .pip, #quiz .track .pip { background:#fff !important; }

/* ── the question card ── */
#vasvra .vraagkaart, #quiz .qcard { background:#fff !important; border:0 !important; border-left:0 !important; border-radius:28px !important; box-shadow:0 1px 0 var(--mk-line), 0 10px 30px rgba(16,38,65,.06) !important; }
#vasvra .vraagkaart::before, #quiz .qcard::before { display:none !important; }
#vasvra .opdrag, #quiz .instruction { background:var(--mk-soft) !important; border:0 !important; border-left:0 !important; border-radius:12px !important; color:var(--mk-ink2) !important; font-weight:700 !important; }
#vasvra .stelling, #quiz .stem { font-family:var(--mk-display) !important; font-weight:700 !important; color:var(--mk-blue) !important; font-size:clamp(21px,5.2vw,26px) !important; line-height:1.3 !important; }
#vasvra .stelling b, #quiz .stem b, #vasvra .stelling strong, #quiz .stem strong { font-weight:800; text-decoration:underline; text-decoration-color:var(--mk-yellow); text-decoration-thickness:3px; text-underline-offset:4px; }

/* ── answer tiles ── */
#vasvra .keuse, #quiz .choice, #quiz .tf-btn {
  background:#fff !important; border:2px solid var(--mk-line) !important; border-radius:18px !important; box-shadow:none !important;
  color:var(--mk-blue) !important; font-family:var(--mk-body) !important; font-weight:700 !important; font-size:18px !important; min-height:58px !important;
  transition:border-color .15s, background .15s; }
#vasvra .keuse:hover, #quiz .choice:hover, #quiz .tf-btn:hover { border-color:var(--mk-blue) !important; }
#vasvra .keuse:focus-visible, #quiz .choice:focus-visible, #quiz .tf-btn:focus-visible { outline:3px solid #2F5BD3 !important; outline-offset:2px; }
#vasvra .keuse .let, #quiz .choice .let { background:var(--mk-soft) !important; color:var(--mk-blue) !important; border:0 !important; border-radius:50% !important; font-family:var(--mk-display) !important; font-weight:800 !important; text-transform:uppercase; }
#vasvra .keuse.reg, #quiz .choice.right, #quiz .tf-btn.right { background:var(--mk-good-bg) !important; border-color:var(--mk-good) !important; color:#0F5130 !important; }
#vasvra .keuse.reg .let, #quiz .choice.right .let { background:var(--mk-good) !important; color:#fff !important; }
#vasvra .keuse.fout, #quiz .choice.wrong, #quiz .tf-btn.wrong { background:var(--mk-bad-bg) !important; border-color:var(--mk-bad) !important; color:#7A1D0E !important; }
#vasvra .keuse.fout .let, #quiz .choice.wrong .let { background:var(--mk-bad) !important; color:#fff !important; }

/* ── verdict, encouragement and explanation ── */
#vasvra .uitslag, #quiz .verdict { font-family:var(--mk-display) !important; font-weight:800 !important; }
#vasvra .uitslag.ja, #vasvra .uitslag .reg, #quiz .verdict.yes { color:var(--mk-good) !important; }
#vasvra .uitslag.nee, #quiz .verdict.no { color:var(--mk-bad) !important; }
#vasvra .uitslag .bal, #quiz .verdict .bal { border-radius:50% !important; }
#vasvra .memo, #quiz .memo { background:var(--mk-soft) !important; border:0 !important; border-left:0 !important; border-radius:18px !important; color:var(--mk-ink2) !important; font-size:17px !important; line-height:1.55 !important; }
#vasvra .memo b, #quiz .memo b { color:var(--mk-blue) !important; }
#vasvra .praatjie, #quiz .encourage { background:#fff !important; border:2px solid var(--mk-line) !important; border-radius:18px !important; box-shadow:none !important; color:var(--mk-blue) !important; }

/* ── buttons: yellow with blue text (never white on yellow) ── */
#vasvra .v-voet, #quiz .q-foot { background:var(--mk-sky) !important; border-top:0 !important; box-shadow:none !important; }
#vasvra .kn, #quiz .btn, #vasvra .v-voet-in button, #quiz .q-foot-in button {
  background:var(--mk-yellow) !important; color:var(--mk-blue) !important; border:0 !important; border-radius:999px !important;
  min-height:52px !important; font-family:var(--mk-body) !important; font-weight:700 !important; font-size:17px !important; box-shadow:none !important; text-transform:none !important; letter-spacing:normal !important; }
#vasvra .kn:disabled, #quiz .btn:disabled, #vasvra .v-voet-in button:disabled, #quiz .q-foot-in button:disabled { background:#F2D9A3 !important; color:rgba(16,38,65,.55) !important; }
#vasvra .kn *, #quiz .btn * { color:inherit !important; }
#quiz .btn.ghost, #vasvra .kn.spook, #vasvra .uitslag-knoppe .kn + .kn, #quiz .score-btns .btn + .btn { background:#fff !important; border:2px solid var(--mk-line) !important; }
/* uitslag: twee kleiner knoppies langs mekaar (geel + navy), deel-knoppie klein en sag */
#vasvra .uitslag-knoppe, #quiz .score-btns { display:flex !important; flex-wrap:nowrap; gap:10px; margin:18px 0 6px !important; }
#vasvra .uitslag-knoppe .kn, #quiz .score-btns .btn { flex:1 1 auto; min-width:0; width:auto !important; min-height:46px !important; padding:10px 14px !important; font-size:15.5px !important; line-height:1.25 !important; }
#vasvra .uitslag-knoppe .kn + .kn, #quiz .score-btns .btn + .btn { background:var(--mk-blue) !important; color:#fff !important; border:0 !important; }
#vasvra .kn.deel, #quiz .btn.deel { display:flex; width:auto !important; min-height:42px !important; margin:6px auto 0 !important; padding:8px 20px !important; font-size:15px !important; background:#fff !important; color:var(--mk-blue) !important; border:2px solid var(--mk-line) !important; }

/* ── typed answers: the answer box and the big on-screen keypad ── */
#vasvra .tikkas input, #quiz .typebox input { background:#fff !important; border:2px solid var(--mk-line) !important; border-radius:16px !important; font-family:var(--mk-display) !important; font-weight:800 !important; font-size:26px !important; color:var(--mk-blue) !important; text-align:center; min-height:58px; }
#vasvra .syferbord, #quiz .keypad { gap:10px !important; }
#vasvra .syferbord button, #quiz .keypad button { background:#fff !important; border:2px solid var(--mk-line) !important; border-radius:16px !important; min-height:60px !important; font-family:var(--mk-display) !important; font-weight:800 !important; font-size:26px !important; color:var(--mk-blue) !important; box-shadow:none !important; }
#vasvra .syferbord button.hulp, #quiz .keypad button.aux { background:var(--mk-soft) !important; }
#vasvra .syferbord button:active, #quiz .keypad button:active { border-color:var(--mk-yellow) !important; background:#FCF1DE !important; }

/* ── score screen ── */
#vasvra .uitslag-blad, #quiz .score-sheet { background:#fff !important; border-radius:28px !important; padding:22px 16px 20px !important; box-shadow:0 10px 30px rgba(16,38,65,.06) !important; }
#vasvra .uitslag-blad h2, #vasvra #u-titel, #quiz .score-sheet h2, #quiz #s-title, #vasvra .punt, #quiz .score { font-family:var(--mk-display) !important; color:var(--mk-blue) !important; }
#vasvra .ring .v, #quiz .ring .v { stroke:var(--mk-yellow) !important; }
#vasvra .ring .oranje, #quiz .ring .orange, #vasvra svg .oranje, #quiz svg .orange { stroke:var(--mk-yellow) !important; }

/* the meerkat glides smoothly to his new spot after each answer */
#vasvra .spoor > i, #quiz .track > i { transition:width .35s ease-out !important; }

@media (prefers-reduced-motion: reduce) {
  #vasvra .spoor > i, #quiz .track > i { transition:none !important; }
  #vasvra *, #quiz * { transition:none !important; }
}

/* hidden moet altyd wegsteek */
[hidden]{display:none!important}