/*
 * Wat de hoofdstukpagina's van de publieke website delen: /site/voorrang en
 * /site/borden. Dit blad heette voorrang.css toen er één zo'n pagina was.
 *
 * WAAROM DIT EEN EIGEN STIJLBLAD IS EN NIET EEN AANVULLING OP site.css.
 * site.css is de verkoopkant van de site en wordt op dit moment door een andere
 * agent verbouwd. Twee bouwers in hetzelfde bestand is precies hoe de vorige
 * rommel is ontstaan. Dit blad leest daarom alleen uit tokens.css — dat is de
 * enige plek waar een kleurwaarde hoort — en verder uit niets.
 *
 * DE STILLE VAL. De server stuurt `style-src 'self'` mee (zie
 * gereedschap/serve.mjs). Een style-attribuut in de html en een stijl die vanuit
 * code op een element wordt gezet, worden STIL geweigerd: de pagina rendert kaal
 * en er komt geen foutmelding. Dat is in dit project al twee keer gebeurd. Alles
 * wat er hieronder uitziet als vormgeving, staat dus hier en nergens anders;
 * hoofdstuk.js zet uitsluitend klassen en attributen.
 *
 * Geen hexwaarde in dit bestand. Staat er toch een kleur die je hier nodig hebt,
 * dan hoort hij in app/tokens.css.
 */

/* ───────────────────────────────────────────────────────────────────────────
 * 1. De schil en de twee kolommen
 *
 * Op een breed scherm staat de inhoudsopgave links en loopt hij mee; op een
 * telefoon wordt hij een strook bovenaan die blijft plakken. Dat is dezelfde
 * inhoudsopgave in dezelfde volgorde — geen tweede menu.
 * ─────────────────────────────────────────────────────────────────────────── */

/*
 * De breedte komt uit maten.css, net als bij de andere drie pagina's. Dit blad
 * was 1160 en de rest 720 of 820; dat gaf vier pagina's die zich naast elkaar
 * niet als één site lezen. Nu is er één getal.
 */
.vr-shell {
  width: min(100% - var(--site-marge), var(--tf-shell-max, var(--site-max)));
  margin: 0 auto;
  padding-bottom: 48px;
}

.vr-layout {
  display: grid;
  gap: 20px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

/* 1024 en niet meer 1040: de tweede sprong uit maten.css. Zie daar waarom er
   maar twee sprongen zijn en waarom dit er een van is. */
@media (min-width: 1024px) {
  .vr-layout {
    gap: var(--site-gat-ruim);
    grid-template-columns: var(--site-zijkolom) minmax(0, 1fr);
  }
}

.vr-main {
  min-width: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 2. De inhoudsopgave die meeloopt
 * ─────────────────────────────────────────────────────────────────────────── */

/*
 * Op een telefoon plakt de strook bovenaan het scherm. Vanaf een tablet plakt de
 * balk met het hoofdmenu daar ook al (maten.css), dus schuift deze strook er
 * precies onder — vandaar dat de hoogte van die balk hier meerekent en niet als
 * los getal is overgetypt.
 */
.vr-toc {
  position: sticky;
  top: 0;
  z-index: 6;
  padding: 8px 0 9px;
  background: var(--tf-canvas);
  border-bottom: var(--tf-border) solid var(--tf-line);
}

@media (min-width: 761px) {
  .vr-toc {
    top: var(--site-balk-hoogte);
  }
}

.vr-toc h2 {
  margin: 0 0 6px;
  font: 400 10px var(--tf-font-mono);
  color: var(--tf-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/*
 * Op een telefoon schuift de lijst zijwaarts binnen zijn eigen vak. Dat mag,
 * zolang de PAGINA niet zijwaarts schuift; daarom staat de overflow op deze lijst
 * en niet op iets eromheen.
 */
.vr-toc ol {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 2px 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.vr-toc li {
  flex: none;
  counter-increment: vr-toc;
}

/* 44 is de aanraakmaat uit tokens.css (`--tf-hit`). Een strook met kleinere
   knopjes leest prima maar mist op een telefoon de helft van de tikken. */
.vr-toc a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tf-hit);
  padding: 7px 13px;
  border: var(--tf-border) solid var(--tf-outline);
  border-radius: var(--tf-radius-pill);
  background: var(--tf-surface);
  color: var(--tf-ink);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}

.vr-toc a[aria-current="true"] {
  border-color: var(--tf-accent);
  background: var(--tf-accent-tint);
  font-weight: 700;
}

@media (min-width: 1024px) {
  /*
   * Vanaf hier is het geen strook meer maar een vaste inhoudsopgave aan de
   * zijkant. Hij begint onder de balk met het hoofdmenu en blijft daar staan
   * terwijl de lezer door het hoofdstuk zakt; welk onderdeel hij leest, zet
   * hoofdstuk.js met `aria-current="true"` — dat is het merkje.
   *
   * `max-height` en `overflow-y` zijn er voor het geval de lijst ooit langer
   * wordt dan het scherm hoog is. Tien onderdelen passen ruim; twintig niet, en
   * dan is een lijst die zelf schuift beter dan een lijst waarvan de onderkant
   * onbereikbaar is.
   */
  .vr-toc {
    top: calc(var(--site-balk-hoogte) + 14px);
    max-height: calc(100vh - var(--site-balk-hoogte) - 28px);
    overflow-y: auto;
    padding: 14px 0 6px;
    background: none;
    border-bottom: 0;
  }

  .vr-toc ol {
    flex-direction: column;
    gap: 1px;
    overflow-x: visible;
  }

  .vr-toc li {
    flex: auto;
  }

  .vr-toc a {
    justify-content: flex-start;
    width: 100%;
    min-height: 36px;
    padding: 7px 11px;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0 var(--tf-radius-small) var(--tf-radius-small) 0;
    background: none;
    white-space: normal;
  }

  .vr-toc a[aria-current="true"] {
    border-left-color: var(--tf-accent-strong);
    background: var(--tf-accent-tint-soft);
  }
}

/* ───────────────────────────────────────────────────────────────────────────
 * 3. Koppen, lopende tekst en het kruimelpad
 * ─────────────────────────────────────────────────────────────────────────── */

.vr-kruimels {
  margin: 14px 0 2px;
  color: var(--tf-muted);
  font-size: 11.5px;
}

.vr-kruimels a {
  color: var(--tf-muted);
}

.vr-kop h1 {
  margin: 6px 0 0;
  font-family: var(--tf-font-display);
  font-size: clamp(28px, 7vw, 42px);
  font-weight: 700;
  line-height: 1.12;
  color: var(--tf-ink);
  text-wrap: balance;
}

.vr-lede {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--tf-ink-soft);
}

.vr-bijgewerkt {
  margin: 14px 0 0;
  color: var(--tf-muted);
  font: 400 11px var(--tf-font-mono);
  letter-spacing: 0.3px;
}

/*
 * Springt de lezer naar een onderdeel, dan moet de kop onder alles uit komen
 * wat er plakt. maten.css houdt met `scroll-padding-top` al rekening met de balk
 * bovenaan; hieronder staat wat er per maat NOG overheen ligt:
 *   telefoon   de strook met de inhoudsopgave (die plakt, de balk niet)
 *   tablet     alleen de strook; de balk zit al in scroll-padding-top
 *   computer   niets meer; daar staat de inhoudsopgave naast de tekst
 */
.vr-sectie {
  scroll-margin-top: 82px;
  padding-top: 30px;
}

@media (min-width: 761px) {
  .vr-sectie {
    scroll-margin-top: 66px;
  }
}

@media (min-width: 1024px) {
  .vr-sectie {
    scroll-margin-top: 8px;
    padding-top: 40px;
  }
}

.vr-sectie > h2 {
  margin: 0 0 4px;
  font-family: var(--tf-font-display);
  font-size: clamp(21px, 4.6vw, 27px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--tf-ink);
  text-wrap: balance;
}

.vr-sectie h3 {
  margin: 26px 0 6px;
  font-family: var(--tf-font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--tf-ink);
}

.vr-sectie h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tf-ink);
}

.vr-sectie p {
  margin: 10px 0 0;
  max-width: 66ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--tf-ink-soft);
}

.vr-sectie ul,
.vr-sectie ol {
  margin: 10px 0 0;
  padding-left: 20px;
  max-width: 66ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--tf-ink-soft);
}

.vr-sectie li + li {
  margin-top: 5px;
}

.vr-sectie strong {
  color: var(--tf-ink);
}

.vr-scheiding {
  height: 0;
  margin: 34px 0 0;
  border: 0;
  border-top: var(--tf-border) solid var(--tf-line);
}

/* ───────────────────────────────────────────────────────────────────────────
 * 4. De wet zelf
 *
 * Mono, met een amber streep ernaast: overal op deze site is dat de stem van de
 * wet. Het is met opzet GEEN <blockquote>: gereedschap/controle-site.mjs
 * behandelt die tag als de vorm van een gebruikersreactie en zou hem buiten het
 * ervaringenblok terecht afkeuren.
 * ─────────────────────────────────────────────────────────────────────────── */

.vr-wet {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--tf-accent);
  border-radius: 0 var(--tf-radius-small) var(--tf-radius-small) 0;
  background: var(--tf-surface-warm);
}

.vr-wet p {
  margin: 0 0 6px;
  max-width: none;
  font: 400 13px/1.6 var(--tf-font-mono);
  color: var(--tf-ink-soft);
}

.vr-wet p + p {
  margin-top: 8px;
}

.vr-wet p:last-child {
  margin-bottom: 0;
}

.vr-wet-bron {
  display: block;
  margin-top: 9px;
  color: var(--tf-muted);
  font: 400 10.5px var(--tf-font-mono);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.vr-lid {
  color: var(--tf-muted);
}

/* ───────────────────────────────────────────────────────────────────────────
 * 5. De uitklappers
 *
 * <details> en <summary> van de browser zelf. Daardoor werkt bediening met
 * alleen een toetsenbord gratis mee en hoeft er geen enkele regel javascript aan
 * te pas te komen: dicht is ook echt dicht voor een schermlezer.
 * ─────────────────────────────────────────────────────────────────────────── */

.vr-meer {
  margin: 14px 0 0;
  border: var(--tf-border) solid var(--tf-outline);
  border-radius: var(--tf-radius-element);
  background: var(--tf-surface);
}

.vr-meer + .vr-meer {
  margin-top: 8px;
}

.vr-meer > summary {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: var(--tf-hit);
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tf-ink);
  cursor: pointer;
  list-style: none;
}

.vr-meer > summary::-webkit-details-marker {
  display: none;
}

/* De chevron draait mee. Een teken dat van vorm verandert is duidelijker dan een
   kleurverschil, ook voor wie kleur slecht onderscheidt. */
.vr-meer > summary::before {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tf-accent-tint);
  color: var(--tf-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  content: "+";
}

.vr-meer[open] > summary::before {
  content: "\2212";
}

.vr-meer > summary:hover {
  background: var(--tf-surface-sunken);
}

.vr-meer-inhoud {
  padding: 2px 14px 14px;
  border-top: var(--tf-border) solid var(--tf-line-soft);
}

.vr-meer-inhoud > *:first-child {
  margin-top: 12px;
}

.vr-meer-inhoud p,
.vr-meer-inhoud ul,
.vr-meer-inhoud ol {
  font-size: 14px;
}

/* Een uitklapper mag zelf ook tussenkopjes hebben. Ze staan een niveau onder de
   kop van het onderdeel; een h4 direct onder een h2 zetten laat een schermlezer
   een niveau overslaan en dat leest als een gat in de tekst. */
.vr-meer-inhoud h3 {
  margin: 16px 0 2px;
  font-size: 15px;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 6. De ladder met de vier treden
 * ─────────────────────────────────────────────────────────────────────────── */

.vr-ladder {
  display: grid;
  gap: 22px;
  margin: 18px 0 0;
  grid-template-columns: minmax(0, 1fr);
}

/* Was 780; nu de eerste sprong uit maten.css. Deze indeling kan niet met een
   minimum per kolom, want de twee kolommen zijn niet gelijkwaardig: links de
   tekening, rechts de vier treden. */
@media (min-width: 761px) {
  .vr-ladder {
    gap: 30px;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    align-items: start;
  }
}

.vr-figuur {
  margin: 0;
  padding: 14px;
  border: var(--tf-border) solid var(--tf-outline);
  border-radius: var(--tf-radius-card);
  background: var(--tf-surface);
}

.vr-figuur svg {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * De bijschriften, kaarten en lijsten hieronder staan binnen `.vr-sectie`, en de
 * algemene regels daar (`.vr-sectie p`, `.vr-sectie ul`) zijn even zwaar of
 * zwaarder. Ze krijgen daarom hun ouder ervoor. Dat is geen sierlijkheid: zonder
 * die ene klasse erbij pakt een denkfoutkaart stil de leesbreedte van een alinea
 * en staat de tekst ineens 66 tekens breed in een vakje van 290.
 */
.vr-figuur .vr-figuur-bij {
  margin: 10px 0 0;
  max-width: none;
  color: var(--tf-muted);
  font-size: 12px;
  line-height: 1.5;
}

.vr-trede {
  padding: 13px 15px;
  border: var(--tf-border) solid var(--tf-outline);
  border-radius: var(--tf-radius-element);
  background: var(--tf-surface);
}

.vr-trede + .vr-trede {
  margin-top: 9px;
}

.vr-trede-kop {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.vr-trede-nr {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tf-accent);
  color: var(--tf-accent-ink);
  font: 700 13px/24px var(--tf-font-ui);
  text-align: center;
}

.vr-trede h3 {
  margin: 0;
  font-size: 16px;
}

.vr-trede p {
  margin: 7px 0 0;
  font-size: 14px;
}

.vr-trede-bron {
  display: inline-block;
  margin-top: 9px;
  padding: 3px 8px;
  border-radius: var(--tf-radius-pill);
  background: var(--tf-surface-sunken);
  color: var(--tf-muted);
  font: 400 10.5px var(--tf-font-mono);
  letter-spacing: 0.3px;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 7. Situatiebeelden
 * ─────────────────────────────────────────────────────────────────────────── */

.vr-beeldrij {
  display: grid;
  gap: 18px;
  margin: 18px 0 0;
  grid-template-columns: minmax(0, 1fr);
}

/* Geen breekpunt en geen aantal kolommen: een minimum per beeld, zoals
   afgesproken in maten.css. Zo springt hij ook goed op de tussenmaten, en
   opnieuw op een computer waar de tekst naast de inhoudsopgave staat en dus
   smaller is dan het venster. */
.vr-beeldrij-2 {
  grid-template-columns: repeat(auto-fit, minmax(var(--kolom-breed), 1fr));
}

.vr-beeld {
  margin: 0;
  overflow: hidden;
  border: var(--tf-border) solid var(--tf-outline);
  border-radius: var(--tf-radius-card);
  background: var(--tf-surface);
}

.vr-beeld img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--tf-surface-sunken);
}

.vr-beeld-tekst {
  padding: 12px 14px 14px;
}

.vr-beeld-tekst p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--tf-ink-soft);
}

.vr-beeld-tekst p + p {
  margin-top: 8px;
}

.vr-beeld .vr-volgorde {
  margin: 10px 0 0;
  padding: 0;
  max-width: none;
  list-style: none;
  font-size: 13px;
}

.vr-volgorde li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 6px 0;
  border-top: var(--tf-border) solid var(--tf-line-soft);
  line-height: 1.45;
  color: var(--tf-ink-soft);
}

.vr-volgorde li + li {
  margin-top: 0;
}

.vr-volgorde-nr {
  display: grid;
  flex: none;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: var(--tf-border) solid var(--tf-outline);
  background: var(--tf-surface-sunken);
  color: var(--tf-ink);
  font-size: 11px;
  font-weight: 700;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 8. Bordtekeningen
 * ─────────────────────────────────────────────────────────────────────────── */

.vr-borden {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

.vr-bord {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 13px;
  border: var(--tf-border) solid var(--tf-outline);
  border-radius: var(--tf-radius-element);
  background: var(--tf-surface);
}

.vr-bord img {
  flex: none;
  width: 62px;
  height: 62px;
  object-fit: contain;
}

.vr-bord p {
  margin: 4px 0 0;
  max-width: none;
  font-size: 13px;
  line-height: 1.5;
}

/* De omschrijving zoals het bord die in bijlage 1 van het RVV zelf draagt. Mono,
   want dat is op deze pagina de stem van de wet — zie .vr-wet. */
.vr-bord .vr-bordwet {
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: var(--tf-border) solid var(--tf-line-soft);
  color: var(--tf-muted);
  font: 400 11px/1.5 var(--tf-font-mono);
}

/* ───────────────────────────────────────────────────────────────────────────
 * 9. De denkfouten
 * ─────────────────────────────────────────────────────────────────────────── */

.vr-fouten {
  display: grid;
  gap: 12px;
  margin: 20px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.vr-fout {
  display: flex;
  flex-direction: column;
  padding: 15px;
  border: var(--tf-border) solid var(--tf-outline);
  border-radius: var(--tf-radius-card);
  background: var(--tf-surface);
}

.vr-fout .vr-fout-vraag {
  margin: 0 0 10px;
  max-width: none;
  color: var(--tf-muted);
  font: 400 10.5px var(--tf-font-mono);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.vr-fout .vr-fout-gedachte {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 0;
  max-width: none;
  padding: 10px 12px;
  border: var(--tf-border) solid var(--tf-bad);
  border-radius: var(--tf-radius-small);
  background: var(--tf-bad-tint);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--tf-ink);
}

.vr-fout .vr-fout-gedachte::before {
  flex: none;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--tf-bad);
  color: var(--tf-bg);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  content: "\2715";
}

.vr-fout .vr-fout-waarom {
  margin: 10px 0 0;
  max-width: none;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tf-ink-soft);
}

.vr-fout .vr-fout-bron {
  margin: 12px 0 0;
  max-width: none;
  padding-top: 9px;
  border-top: var(--tf-border) solid var(--tf-line-soft);
  color: var(--tf-muted);
  font: 400 10.5px/1.5 var(--tf-font-mono);
}

/* ───────────────────────────────────────────────────────────────────────────
 * 10. De oefenvragen
 *
 * De vragen worden bij het openen uit /dist/vragen.json gehaald, zodat deze
 * pagina niet verandert in een tweede voorraad vragen die stil uit de app loopt.
 * Staat de vraag er niet meer in, dan verdwijnt hij hier ook.
 * ─────────────────────────────────────────────────────────────────────────── */

.vr-oefen {
  display: grid;
  gap: 16px;
  margin: 18px 0 0;
  grid-template-columns: minmax(0, 1fr);
}

/* Zie .vr-beeldrij-2 hierboven: een minimum, geen aantal. */
.vr-oefen-2 {
  grid-template-columns: repeat(auto-fit, minmax(var(--kolom-breed), 1fr));
}

.vr-vraag {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--tf-border) solid var(--tf-outline);
  border-radius: var(--tf-radius-card);
  background: var(--tf-surface);
}

.vr-vraag-beeld {
  display: block;
  width: 100%;
  height: auto;
  background: var(--tf-surface-sunken);
}

.vr-vraag-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px;
}

.vr-vraag .vr-vraag-tekst {
  margin: 0 0 10px;
  max-width: none;
  font-family: var(--tf-font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tf-ink);
}

.vr-vraag .vr-keuzes {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  max-width: none;
  list-style: none;
}

.vr-vraag .vr-keuzes li + li {
  margin-top: 0;
}

.vr-keuze {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  min-height: var(--tf-hit);
  padding: 10px 12px;
  border: var(--tf-border) solid var(--tf-outline);
  border-radius: var(--tf-radius-element);
  background: var(--tf-surface);
  font-family: var(--tf-font-ui);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--tf-ink);
  text-align: left;
  cursor: pointer;
}

.vr-keuze::before {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border: 2px solid var(--tf-outline);
  border-radius: 50%;
  background: none;
  content: "";
}

.vr-keuze[aria-pressed="true"] {
  border-color: var(--tf-ink);
  background: var(--tf-surface-sunken);
  font-weight: 600;
}

.vr-keuze[aria-pressed="true"]::before {
  border-color: var(--tf-ink);
  background: var(--tf-ink);
}

.vr-keuze[data-uitslag="goed"] {
  border-color: var(--tf-good);
  background: var(--tf-good-tint);
  font-weight: 600;
}

.vr-keuze[data-uitslag="goed"]::before {
  display: grid;
  place-items: center;
  border-color: var(--tf-good);
  background: var(--tf-good);
  color: var(--tf-bg);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  content: "\2713";
}

.vr-keuze[data-uitslag="fout"] {
  border-color: var(--tf-bad);
  background: var(--tf-bad-tint);
}

.vr-keuze[data-uitslag="fout"]::before {
  display: grid;
  place-items: center;
  border-color: var(--tf-bad);
  background: var(--tf-bad);
  color: var(--tf-bg);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  content: "\2715";
}

.vr-keuze[disabled] {
  cursor: default;
}

.vr-vraag-voet {
  margin-top: 12px;
}

.vr-nakijk {
  width: 100%;
}

.vr-uitslag {
  margin: 12px 0 0;
  padding: 12px 13px;
  border: var(--tf-border) solid var(--tf-outline);
  border-radius: var(--tf-radius-element);
  background: var(--tf-surface-warm);
}

.vr-uitslag h4 {
  margin: 0 0 5px;
  font-size: 13px;
}

.vr-uitslag p {
  margin: 0;
  max-width: none;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tf-ink-soft);
}

.vr-uitslag p + p {
  margin-top: 9px;
}

.vr-oefen .vr-laadmelding {
  margin: 0;
  max-width: none;
  padding: 13px 15px;
  border: var(--tf-border) dashed var(--tf-outline);
  border-radius: var(--tf-radius-element);
  color: var(--tf-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 11. Veelgestelde vragen, bronnen en de slotband
 * ─────────────────────────────────────────────────────────────────────────── */

.vr-sectie .vr-bron-lijst {
  margin: 16px 0 0;
  padding: 0;
  max-width: 66ch;
  list-style: none;
  font-size: 13.5px;
}

.vr-bron-lijst li {
  padding: 9px 0;
  border-top: var(--tf-border) solid var(--tf-line-soft);
  line-height: 1.55;
  color: var(--tf-ink-soft);
}

.vr-bron-lijst li:last-child {
  border-bottom: var(--tf-border) solid var(--tf-line-soft);
}

.vr-sectie .vr-bron-lijst li + li {
  margin-top: 0;
}

.vr-bron-lijst b {
  display: block;
  color: var(--tf-ink);
  font-size: 13.5px;
}

.vr-gat {
  margin: 18px 0 0;
  padding: 14px 15px;
  border: var(--tf-border) dashed var(--tf-outline);
  border-radius: var(--tf-radius-card);
  background: var(--tf-surface);
}

.vr-gat h3 {
  margin: 0 0 2px;
  font-size: 15px;
}

.vr-gat p {
  font-size: 13.5px;
}

.vr-band {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin: 34px 0 0;
  padding: 20px;
  border-radius: var(--tf-radius-card);
  background: var(--tf-surface-sunken);
}

/*
 * Met opzet GEEN <h2>. Deze band staat binnen het onderdeel "Oefen het hele
 * hoofdstuk"; een tweede kop van hetzelfde niveau daarbinnen breekt de
 * koppenstructuur waarop een schermlezer en een zoekmachine navigeren.
 */
.vr-band .vr-band-kop {
  margin: 0 0 4px;
  max-width: none;
  font-family: var(--tf-font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tf-ink);
}

.vr-band p {
  margin: 0;
  max-width: 46ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tf-ink-soft);
}

/* ───────────────────────────────────────────────────────────────────────────
 * 12. De tekeningen die wij zelf maken
 *
 * Alle kleuren komen uit tokens.css, dus de schema's kantelen mee met de donkere
 * stand zonder dat er een tweede tekening hoeft te bestaan.
 * ─────────────────────────────────────────────────────────────────────────── */

.vr-svg-doos {
  fill: var(--tf-surface-sunken);
  stroke: var(--tf-outline);
  stroke-width: 1.5;
}

.vr-svg-vlak {
  fill: var(--tf-surface-sunken);
}

/* De haaientanden. Wit op asfalt, net als op straat; in de donkere stand blijft
   dat wit, want de weg wordt daar niet lichter. */
.vr-svg-tand path {
  fill: var(--tf-marking);
}

/*
 * HIER STOND EEN ZELFGETEKEND VERKEERSBORD, EN DAT IS ERAF.
 *
 * Een bord natekenen in tokenkleuren betekent dat het bord in de donkere stand
 * mee verkleurt: de driehoek die op straat wit is met een rode rand, werd 's
 * avonds een driehoek met een donkere binnenkant. Dat is geen vormgeving meer
 * maar verkeersinhoud die niet klopt. De echte tekening staat op deze pagina als
 * <img> uit app/dist/beelden/, en die komt uit de wet zelf.
 */

.vr-svg-vlak-op {
  fill: var(--tf-accent-tint);
}

.vr-svg-lijn {
  fill: none;
  stroke: var(--tf-outline);
  stroke-width: 1.5;
}

.vr-svg-rand {
  fill: none;
  stroke: var(--tf-accent-strong);
  stroke-width: 2;
}

.vr-svg-pijl {
  fill: none;
  stroke: var(--tf-ink);
  stroke-width: 2;
}

.vr-svg-pijl-zacht {
  fill: none;
  stroke: var(--tf-muted);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.vr-svg-asfalt {
  fill: var(--tf-asphalt);
}

.vr-svg-streep {
  fill: none;
  stroke: var(--tf-marking);
  stroke-width: 2;
  stroke-dasharray: 8 8;
}

.vr-svg-bol {
  fill: var(--tf-accent);
}

.vr-svg-nr {
  fill: var(--tf-accent-ink);
  font: 700 14px var(--tf-font-ui);
  text-anchor: middle;
}

.vr-svg-titel {
  fill: var(--tf-ink);
  font: 700 15px var(--tf-font-display);
}

.vr-svg-sub {
  fill: var(--tf-ink-soft);
  font: 400 12px var(--tf-font-ui);
}

.vr-svg-bron {
  fill: var(--tf-muted);
  font: 400 10.5px var(--tf-font-mono);
}

.vr-svg-klein {
  fill: var(--tf-muted);
  font: 400 10.5px var(--tf-font-ui);
}

.vr-svg-auto {
  fill: var(--tf-ink);
}

.vr-svg-auto-ander {
  fill: var(--tf-muted);
}

/* ───────────────────────────────────────────────────────────────────────────
 * 13. Minder beweging als de bezoeker daarom vraagt
 * ─────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
 * De maat van het beeld boven een oefenvraag, per soort
 *
 * De kruispuntbeelden zijn staande foto's die de hele kaart vullen; dat is de
 * regel hierboven en die blijft. Een BORDTEKENING is iets anders: een vierkant
 * plaatje van een halve kilobyte. Vulde die de kaart, dan stond er een
 * voorrangsbord van een halve telefoon hoog boven een vraag van twee regels — en
 * dat is precies wat er stond tot de bordenpagina er kwam.
 *
 * Vandaar een eigen maat op zijn soort. Het soort komt van de bundelaar mee met
 * het beeld; hoofdstuk.js zet het als attribuut neer en zet zelf geen enkele maat.
 * ─────────────────────────────────────────────────────────────────────────── */

.vr-vraag-beeld[data-soort="bord"] {
  width: auto;
  max-width: 100%;
  height: 168px;
  margin: 18px auto 4px;
  background: none;
}