/*
 * weegwijzer.nl — designsysteem, overgenomen uit de Claude Design-handoff.
 *
 * Bron: docs/ontwerp/uitslagpagina.dc.html. Het prototype werkt met inline stijlen; hier
 * staan dezelfde waarden als klassen, zodat de markup leesbaar blijft en de tests op
 * stabiele haken kunnen grijpen. Waar ik van het prototype afwijk, staat waarom.
 *
 * Eén stap van 4 px. Binnen een blok 8 en 12, tussen blokken 26, tussen secties 34.
 * Secties worden gescheiden door een lijn van 1 px en niet door een kader: kaders zijn
 * voorbehouden aan de toetsen, de matrix en het formulier.
 */

/* --- lettertypen, zelf gehost -------------------------------------------- *
 * Het prototype laadt IBM Plex van fonts.googleapis.com. Dat is een verzoek naar een
 * derde partij met het IP-adres van de bezoeker erin. IBM Plex staat onder de OFL, dus
 * het mag mee — zie scripts/copy-fonts.js.
 *
 * Drie gewichten sans en één mono. Gewicht 500 ontbrak aanvankelijk, en dat is het
 * gevolg van zelf hosten dat niemand voorzag: bij Google Fonts krijg je alle gewichten
 * mee, bij zelf hosten kies je per bestand. Elke tekst die in het ontwerp medium was,
 * werd daardoor 400 of 600 — labels, knoppen, de kentekenplaat en de eis in de matrix.
 */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- palet ---------------------------------------------------------------
 * Zeven kleuren met een taak, uit het paletblok van de systeemweergave. De drie
 * betekeniskleuren mogen uitsluitend een uitkomst aanduiden en nooit decoratie zijn.
 */

:root {
  --inkt: #16181c;
  --papier: #fbfaf8;
  --bureau: #eeece6;
  --grijs: #666c74;

  --tekst-secundair: #4a4f57;
  --tekst-tertiair: #35393f;

  --lijn: #e2e0da;
  --veldrand: #c8c6bf;
  --paginarand: #d7d4cc;
  --vlak: #f4f2ec;

  --link: #1b4d7a;
  --link-hover: #0f2f4c;

  /* Mag — alleen een positieve uitkomst. */
  --ok-fg: #2f6b45;
  --ok-bg: #f0f6f1;
  --ok-rand: #a9c8b4;

  /* Mag niet — alleen een negatieve uitkomst. */
  --nee-fg: #9a2c22;
  --nee-bg: #fbf2f0;
  --nee-rand: #d8aaa3;

  /* Niet vastgesteld — alleen een voorbehoud, altijd met streepjesrand. */
  --onz-fg: #8a6a1e;
  --onz-bg: #fdf8ec;
  --onz-rand: #a8842c;
  --onz-lijn: #e6d9b6;

  --neutraal-fg: #35393f;
  --neutraal-bg: #f4f2ec;
  --neutraal-rand: #c8c6bf;

  --kenteken: #f5cf00;

  /* Het donkere paneel van de betaalde verwijzing. */
  --donker: #16181c;
  --donker-tekst: #fbfaf8;
  --donker-secundair: #b6bbc2;
  --donker-label: #9aa0a8;
  --donker-lijn: #4a4f57;
  --donker-veld: #f2f1ef;
}

/* --- basis ---------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bureau);
}

body {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  color: var(--inkt);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--link-hover);
}

input,
select,
button,
textarea {
  font: inherit;
  /*
   * Expliciet, en niet de browserstandaard. Zonder deze regel is wat iemand typt puur
   * zwart in plaats van de inkt, en het verschilt per browser. Bevinding 2 uit de
   * ontwerpcontrole.
   */
  color: var(--inkt);
}

/*
 * Eén ontworpen focusindicatie voor alles: 2px inkt met 2px offset, en papierkleur op de
 * donkere zones. Bevinding 1 uit de ontwerpcontrole was een WCAG-fout (2.4.7): op de
 * contentpagina had geen van de vijf invoervelden een zichtbare focus.
 */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--inkt);
  outline-offset: 2px;
}

.op-inkt a:focus-visible,
.op-inkt button:focus-visible,
.op-inkt input:focus-visible,
.op-inkt select:focus-visible,
.op-inkt textarea:focus-visible {
  outline: 2px solid var(--donker-tekst);
  outline-offset: 2px;
}

.overslaan {
  position: absolute;
  left: -9999px;
}

.overslaan:focus {
  position: static;
  display: inline-block;
  padding: 8px 16px;
  background: var(--inkt);
  color: var(--papier);
}

/* --- het paginakader ------------------------------------------------------
 * Het ontwerp zet de pagina als een vel op een bureau: een vlak van 1 px rand met een
 * schaduwlijn eronder, gecentreerd op de bureaukleur.
 */

.vel {
  width: 100%;
  max-width: 1240px;
  margin: 22px auto 90px;
  background: var(--papier);
  border: 1px solid var(--paginarand);
  box-shadow: 0 1px 0 #e4e1d9;
}

@media (max-width: 60rem) {
  .vel {
    margin: 0;
    border: 0;
    box-shadow: none;
  }
}

/* --- mono ----------------------------------------------------------------- */

.mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

/* Het terugkerende label: mono 11, hoofdletters, ruime letterafstand, grijs. */
.label {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grijs);
  margin: 0;
}

.label--klein {
  font-size: 10px;
}

/* --- kop en voet ---------------------------------------------------------- */

.kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--lijn);
}

.kop__merk {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--inkt);
  text-decoration: none;
}

.kop__tld {
  color: var(--grijs);
}

.kop__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
}

.kop__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kop__nav a {
  color: var(--tekst-secundair);
  text-decoration: none;
}

.kop__nav a:hover {
  text-decoration: underline;
}

.kop__meta {
  margin-left: auto;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--grijs);
}

.voet {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--lijn);
  background: var(--vlak);
  display: grid;
  gap: 10px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--grijs);
}

.voet__rij {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.voet__merk {
  color: var(--tekst-secundair);
}

.voet p {
  margin: 0;
  max-width: 66ch;
}

.voet__uitgever {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
}

/* --- inhoud --------------------------------------------------------------- */

main {
  display: block;
}

.blad {
  padding: 22px 20px 40px;
}

.blad--uitslag {
  padding-top: 16px;
}

h1 {
  font-size: 27px;
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  max-width: 34ch;
  text-wrap: pretty;
}

h2 {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
  margin: 26px 0 8px;
}

h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

p {
  margin: 0 0 16px;
}

.tekst {
  max-width: 66ch;
}

.tekst p {
  font-size: 16px;
  line-height: 1.62;
  text-wrap: pretty;
}

.tekst ul,
.tekst ol {
  font-size: 16px;
  line-height: 1.62;
  padding-inline-start: 20px;
}

.inleiding {
  font-size: 15px;
  line-height: 1.55;
  color: var(--tekst-secundair);
  max-width: 66ch;
  text-wrap: pretty;
  margin: 0 0 24px;
}

.metaregel {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--grijs);
  margin: 0 0 20px;
}

/* --- sectiekop met bovenlijn ---------------------------------------------- */

.sectie {
  margin-top: 30px;
}

.sectie__kop {
  border-top: 1px solid var(--inkt);
  padding-top: 10px;
  margin-bottom: 14px;
}

.sectie__kop .label {
  margin-bottom: 4px;
}

.sectie__intro {
  font-size: 13px;
  line-height: 1.5;
  color: var(--tekst-secundair);
  margin: 0;
  max-width: 66ch;
}

/* --- kenteken -------------------------------------------------------------
 * De enige verzadigde kleur in het hele palet, en hij staat alleen waar hij hoort.
 */

.plaat {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--inkt);
  background: var(--kenteken);
  height: 46px;
}

.plaat__land {
  display: flex;
  align-items: center;
  padding: 0 8px;
  background: var(--inkt);
  color: var(--kenteken);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
}

.plaat__invoer,
.plaat__waarde {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0 12px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plaat__waarde {
  display: flex;
  align-items: center;
}

.plaat--compact {
  height: 44px;
}

.plaat--compact .plaat__land {
  padding: 0 7px;
  font-size: 10px;
}

.plaat--compact .plaat__invoer {
  font-size: 18px;
  padding: 0 10px;
}

.plaat--merk {
  height: 30px;
  flex: 0 0 auto;
}

.plaat--merk .plaat__land {
  padding: 0 6px;
  font-size: 9px;
}

.plaat--merk .plaat__waarde {
  padding: 0 9px;
  font-size: 15px;
}

/* --- formulier ------------------------------------------------------------ */

.tool {
  border: 1px solid var(--veldrand);
  background: #fff;
}

.tool__velden {
  padding: 18px 18px 4px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px 22px;
}

.tool__blok {
  border: 0;
  margin: 0;
  padding: 14px 18px 0;
  border-top: 1px solid var(--lijn);
}

.tool__blok legend {
  padding: 0;
}

.tool__vinkjes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 22px;
  margin-top: 10px;
}

.tool__afsluiting {
  padding: 16px 18px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.veld > label,
.veld__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}

.veld input[type="text"],
.veld input[type="email"],
.veld input[type="tel"],
.veld select {
  width: 100%;
  height: 46px;
  border: 1px solid var(--veldrand);
  background: #fff;
  padding: 0 10px;
  font-size: 15px;
}

.veld textarea {
  width: 100%;
  border: 1px solid var(--veldrand);
  background: #fff;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}

.hulp {
  font-size: 12px;
  color: var(--grijs);
  margin: 6px 0 0;
  line-height: 1.5;
}

/*
 * De hulptekst bij de tweejaarsvraag loopt op smalle viewports naar twee regels — gemeten,
 * en dat scheelt 15 px. De ruimte wordt gereserveerd zodat de knop eronder niet
 * verspringt op het moment dat de tekst omslaat.
 */
.hulp--twee-regels {
  min-height: 2.5em;
}

.vink {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--tekst-secundair);
  line-height: 1.4;
  font-weight: 400;
}

.vink input {
  margin: 2px 0 0;
  accent-color: var(--inkt);
}

.vink__uitleg {
  display: block;
  color: var(--grijs);
  font-size: 12px;
}

.knop {
  border: 1px solid var(--inkt);
  background: var(--inkt);
  color: var(--papier);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 22px;
  cursor: pointer;
}

.knop--compact {
  height: 44px;
  padding: 0 18px;
  font-size: 14px;
}

/* De compacte variant op een contentpagina. */
.tool--compact {
  padding: 14px 16px;
}

.tool__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.tool__strip-kop {
  font-size: 14px;
  font-weight: 600;
}

.tool__snel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.tool__meer summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Het wijzigformulier op de uitslagpagina. */
.tool--wijzig {
  padding: 12px 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  align-items: start;
}

.tool--wijzig .veld > label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grijs);
  margin-bottom: 5px;
}

.tool--wijzig .veld input,
.tool--wijzig .veld select {
  height: 44px;
  font-size: 14px;
}

.tool--wijzig .knop {
  align-self: end;
  height: 44px;
  width: 100%;
  padding: 0 16px;
  font-size: 14px;
}

.tool__annuleren {
  grid-column: 1 / -1;
  margin: 0;
}

.tool__annuleren a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --- identiteitsregel ----------------------------------------------------- */

.identiteit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  border-bottom: 1px solid var(--lijn);
  padding-bottom: 12px;
}

.identiteit__voertuig {
  flex: 1 1 24ch;
  min-width: 0;
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tekst-secundair);
}

/*
 * `wijzigen` is de enige manier om een verkeerd ingevoerd kenteken te corrigeren, dus dat
 * is niet de link om op een aanraakdoel te bezuinigen. WCAG 2.5.8 vraagt 24 × 24; in de
 * ontwerpexport was hij 46 × 17. Het prototype had dat al opgelost met min-height 44.
 */
.identiteit__wijzig {
  order: -1;
  margin: 0 0 0 auto;
  flex: 0 0 auto;
}

.identiteit__wijzig a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  font-size: 13px;
}

/* --- het antwoord --------------------------------------------------------- */

.antwoord {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 3px solid var(--inkt);
}

.antwoord__merken {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.merk {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid var(--neutraal-rand);
  background: var(--neutraal-bg);
  color: var(--neutraal-fg);
}

.merk--ok {
  border-color: var(--ok-rand);
  background: var(--ok-bg);
  color: var(--ok-fg);
}

.merk--nee {
  border-color: var(--nee-rand);
  background: var(--nee-bg);
  color: var(--nee-fg);
}

.merk--onz {
  border: 1px dashed var(--onz-rand);
  background: var(--onz-bg);
  color: var(--onz-fg);
  font-weight: 500;
}

.antwoord h1 {
  margin: 0 0 12px;
}

/* --- de werkelijke oorzaak ------------------------------------------------ */

.oorzaak {
  margin-top: 22px;
  border: 1px solid var(--nee-rand);
  background: var(--nee-bg);
  padding: 16px;
}

.oorzaak .label {
  color: var(--nee-fg);
  margin-bottom: 8px;
}

.oorzaak__tekst {
  font-size: 18px;
  line-height: 1.45;
  font-weight: 500;
  margin: 0 0 12px;
  max-width: 48ch;
  text-wrap: pretty;
}

.oorzaak__formeel {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  border-top: 1px solid var(--nee-rand);
  padding-top: 10px;
  font-size: 13px;
  color: var(--tekst-secundair);
}

.oorzaak__eis {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
  color: var(--inkt);
}

/* --- matrix --------------------------------------------------------------- */

.matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kolom {
  border: 1px solid var(--neutraal-rand);
  background: var(--neutraal-bg);
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kolom--ok {
  border-color: var(--ok-rand);
  background: var(--ok-bg);
}

.kolom--nee {
  border-color: var(--nee-rand);
  background: var(--nee-bg);
}

.kolom--onz {
  border: 1px dashed var(--onz-rand);
  background: var(--onz-bg);
}

.kolom__wanneer {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tekst-secundair);
}

.kolom__uitkomst {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-height: 24px;
}

.kolom__eis {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}

.kolom__staat {
  font-size: 13px;
  font-weight: 600;
}

.kolom--ok .kolom__eis,
.kolom--ok .kolom__staat {
  color: var(--ok-fg);
}

.kolom--nee .kolom__eis,
.kolom--nee .kolom__staat {
  color: var(--nee-fg);
}

.kolom--onz .kolom__eis,
.kolom--onz .kolom__staat {
  color: var(--onz-fg);
}

.kolom__toelichting {
  font-size: 13px;
  line-height: 1.5;
  color: var(--tekst-tertiair);
  margin: 0;
  text-wrap: pretty;
}

.kolom__grondslag {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.5;
  color: var(--grijs);
  margin-top: auto;
}

/* --- informatieve verwijzing ----------------------------------------------
 * Een blok met een inktrand en geen kleurvlak. Bewust van een andere orde dan het
 * verwijzingenblok onderaan: toen die twee dezelfde vorm hadden, las de enige
 * actionabele volgende stap als een gerelateerde-paginalink. Geen knop — de taak van
 * deze pagina is antwoorden en niet converteren.
 */

.verwijzing {
  margin-top: 30px;
  border: 1px solid var(--inkt);
  background: transparent;
  padding: 15px 16px;
}

.verwijzing .label {
  color: var(--inkt);
  margin-bottom: 9px;
}

.verwijzing__vraag {
  font-size: 19px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--inkt);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  display: inline-block;
  max-width: 32ch;
  text-wrap: pretty;
}

/* --- toetsen: tachograaf --------------------------------------------------- */

.toetsen {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.toets {
  border: 1px solid var(--neutraal-rand);
  background: var(--neutraal-bg);
  padding: 14px 15px;
}

.toets--ok {
  border-color: var(--ok-rand);
  background: var(--ok-bg);
}

.toets--nee {
  border-color: var(--nee-rand);
  background: var(--nee-bg);
}

.toets__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 9px;
}

.toets__staat {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--neutraal-rand);
  color: var(--neutraal-fg);
}

.toets--ok .toets__staat {
  border-color: var(--ok-rand);
  color: var(--ok-fg);
}

.toets--nee .toets__staat {
  border-color: var(--nee-rand);
  color: var(--nee-fg);
}

.toets__tekst {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 10px;
  max-width: 66ch;
  text-wrap: pretty;
}

/* --- grondslag ------------------------------------------------------------- */

.grondslag {
  margin: 0;
  padding: 0;
  list-style: none;
}

.grondslag li {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.6;
  color: var(--grijs);
}

.grondslag--breed {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px 20px;
}

.grondslag--breed li {
  font-size: 11px;
  line-height: 1.75;
  color: var(--tekst-tertiair);
}

/* --- adviezen -------------------------------------------------------------- */

.adviesgroepen {
  display: grid;
  gap: 20px;
}

.adviesgroep h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 2px;
  color: var(--inkt);
}

.adviezen {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.advies {
  border-bottom: 1px solid var(--lijn);
  padding: 13px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px 20px;
  align-items: start;
}

.advies__tekst {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}

.advies__bron {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.6;
  color: var(--grijs);
}

/* --- voorbehoud en onbeoordeeld -------------------------------------------
 * Streepjesrand, warme achtergrond, eigen label, en een eigen plaats op de pagina. Het
 * onderscheid zit in vier dingen tegelijk, en alle vier blijven ze op een telefoon
 * bestaan.
 */

.onzeker {
  margin-top: 30px;
  border: 1px dashed var(--onz-rand);
  background: var(--onz-bg);
  padding: 15px 16px;
}

.onzeker .label {
  color: var(--onz-fg);
  margin-bottom: 6px;
}

.onzeker__uitleg {
  font-size: 13px;
  line-height: 1.5;
  color: var(--tekst-secundair);
  margin: 0 0 12px;
  max-width: 66ch;
}

.onzeker__lijst {
  margin: 0;
  padding: 0;
  list-style: none;
}

.onzeker__lijst li {
  border-top: 1px solid var(--onz-lijn);
  padding: 12px 0 0;
  margin-bottom: 12px;
}

.onzeker__lijst li:last-child {
  margin-bottom: 0;
}

.onzeker__tekst {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 6px;
  max-width: 66ch;
  text-wrap: pretty;
}

.onzeker__bron {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.6;
  color: var(--onz-fg);
}

.onbeoordeeld__tekst {
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 10px;
  max-width: 66ch;
  text-wrap: pretty;
}

.onbeoordeeld__waarde {
  display: inline-block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--onz-fg);
  border: 1px solid #dcc78e;
  padding: 3px 7px;
  margin-right: 6px;
}

/* --- datering -------------------------------------------------------------- */

.datering {
  margin-top: 26px;
  border-top: 1px solid var(--lijn);
  padding-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--grijs);
}

.datering span span {
  color: var(--inkt);
}

/* --- verwijzingenblok ------------------------------------------------------ */

.verwijzingen {
  margin-top: 26px;
}

.verwijzingen__lijst {
  margin: 0;
  padding: 0;
  list-style: none;
}

.verwijzingen__lijst a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--lijn);
  text-decoration: none;
  color: var(--inkt);
}

.verwijzingen__lijst a:hover span:first-child {
  text-decoration: underline;
}

.verwijzingen__titel {
  font-size: 15px;
  font-weight: 500;
}

.verwijzingen__meta {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--grijs);
  text-align: right;
}

/* --- meldingen -------------------------------------------------------------- */

.melding {
  margin-top: 22px;
  border: 1px solid var(--neutraal-rand);
  background: var(--neutraal-bg);
  padding: 16px;
}

.melding--fout {
  border-color: var(--nee-rand);
  background: var(--nee-bg);
}

.melding--fout h1 {
  color: var(--nee-fg);
}

.melding ul {
  margin: 0;
  padding-inline-start: 20px;
  font-size: 15px;
  line-height: 1.55;
}

/* --- betaalde verwijzing ----------------------------------------------------
 * Donker paneel, over de volle breedte van het vel. Bewust níet de vorm van een
 * adviesblok: die vorm draagt het gezag van "hier staat de bepaling bij" en mag niet
 * worden geleend.
 */

.commercieel {
  margin: 34px -20px -40px;
  background: var(--donker);
  padding: 22px 20px 26px;
}

.commercieel .label {
  color: var(--donker-label);
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}

.commercieel__kop {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--donker-tekst);
  margin: 0 0 8px;
  max-width: 30ch;
}

.commercieel__tekst {
  font-size: 13px;
  line-height: 1.6;
  color: var(--donker-secundair);
  margin: 0 0 20px;
  max-width: 66ch;
  text-wrap: pretty;
}

.commercieel__aanbieders {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.commercieel__aanbieders li {
  font-size: 13px;
  color: var(--donker-tekst);
  border: 1px solid var(--donker-lijn);
  padding: 5px 10px;
}

.commercieel__leeg {
  border-top: 1px solid var(--inkt);
  padding-top: 14px;
  max-width: 66ch;
}

.commercieel__leeg p {
  font-size: 16px;
  line-height: 1.62;
  margin: 0;
  text-wrap: pretty;
}

/* --- leadformulier ---------------------------------------------------------- */

.lead {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px 20px;
}

.lead .veld > label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--donker-tekst);
  margin-bottom: 6px;
}

.lead .veld input,
.lead .veld textarea {
  width: 100%;
  background: var(--donker-veld);
  border: 1px solid var(--inkt);
  color: var(--inkt);
  padding: 0 12px;
  font-size: 15px;
}

.lead .veld input {
  height: 44px;
}

.lead .veld textarea {
  padding: 10px 12px;
  line-height: 1.5;
}

.lead__optioneel {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--donker-label);
}

.lead__hulp {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--donker-secundair);
  margin-top: 6px;
}

.lead__breed {
  grid-column: 1 / -1;
}

.lead__afsluiting {
  grid-column: 1 / -1;
  border-top: 1px solid var(--donker-lijn);
  padding-top: 16px;
  display: grid;
  gap: 14px;
}

.lead__afsluiting p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--donker-secundair);
  margin: 0;
  max-width: 66ch;
  text-wrap: pretty;
}

.lead .knop {
  border-color: var(--donker-tekst);
  background: var(--donker-tekst);
  color: var(--inkt);
  justify-self: start;
}

/*
 * Honeypot: buiten het scherm, niet op display:none — dat detecteren bots juist. In de
 * markup staat aria-hidden erbij; zonder die twee samen leest een schermlezer het veld
 * voor en verdwijnt de aanvraag van wie het invult stil als spam.
 */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- ja/nee zonder default ------------------------------------------------
 * Twee radio's en geen voorgeselecteerde waarde. Een onbeantwoorde vraag is geen
 * antwoord, en dat geldt in beide richtingen: "ja" zou de vrijstelling weggeven aan wie
 * de vraag oversloeg, "nee" zou hem afpakken van wie hem wél heeft.
 */

.keuze {
  display: flex;
  gap: 18px;
  align-items: center;
  min-height: 46px;
}

.keuze__optie {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.keuze__optie label {
  font-size: 15px;
  font-weight: 400;
  margin: 0;
}

.keuze input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--inkt);
}

.toets__aanvullen {
  margin: 0 0 10px;
}