/* tb-runner.css — aanvullingen voor de examenrunner (layouts/runner.blade.php): oefenexamens,
   de borden-trainer, het proefexamen en de CBR-simulatie. Laadt na theoriebriljant-brand.css.
   Geen kleurwaarden, geen !important. De box-sizing-reset van deze pagina's staat in
   tb-componenten.css, omdat de resultaatpagina's hem ook nodig hebben.

   Een gemarkeerde vraag houdt in het vragenraster haar markering, ook als hij beantwoord is of
   de huidige vraag is: een stip rechtsboven. Tot 5-10-2026 won "beantwoord" en was de markering
   na herladen weg (TbQuizRunnerController::vraag geeft nu 'marked' los mee). */
.tb-runner-progress-dot{position:relative}
.tb-runner-progress-dot.is-marked::after{
  content:""; position:absolute; top:4px; right:4px;
  width:8px; height:8px; border-radius:999px;
  background:var(--tb-warn);
}
/* Op de huidige vraag (oranje vlak) is een stip in waarschuwingskleur niet te zien. */
.tb-runner-progress-dot--current.is-marked::after{background:var(--tb-op-accent)}

/* Invulvraag met een getal (runner/_invul.blade.php): een smal veld, groot cijfer. */
.tb-runner-invul{max-width:260px; margin-top:var(--tb-s2)}
.tb-runner-invul input{font-size:20px; font-weight:600; font-variant-numeric:tabular-nums}

/* Het label boven een vraag in de CBR-simulatie staat op een eigen regel. Inline liep de
   vraagtekst er direct achter verder (mock/vraag.blade.php). */
.tb-mock-label{display:flex; width:fit-content; margin-bottom:10px}

/* Raakvlakken van minstens 44px, zoals in de rest van de leeromgeving (5-10-2026). leeromgeving.mjs
   telde op het vraagscherm: Markeer 33px, de antwoordregels en Volgende/Vorige op de telefoon
   39-40px, "Auto-volgende" 19px en de sluitknop 40px. min-height wint van de padding uit
   theoriebriljant-brand.css, ook waar die !important heeft. */
.tb-mark-btn,
.tb-runner-option label,
.tb-runner-btn-primary,
.tb-runner-btn-secondary,
.tb-runner-auto-toggle{min-height:44px}
.tb-runner-close{width:44px; height:44px}
@media (max-width:540px){ .tb-mark-btn{min-width:44px; justify-content:center} }