/* Proeftuin, donkere variant van de huisstijl van uitkomst.ai.
   Karakter van een meetpaneel: dunne randen, mono labels, tabulaire cijfers.
   De kleuren liggen vast in SPEC.md paragraaf 6 en staan hieronder ongewijzigd. */

:root {
  --inkt: #0c0c0f;          /* achtergrond */
  --inkt-op: #14141a;       /* panelen */
  --inkt-hoog: #1b1b23;     /* verhoogd vlak */
  --rand: #26262f;          /* lijnen */
  --papier: #f2f1ee;        /* tekst */
  --papier-zacht: #a6a6b2;  /* bijtekst */
  --papier-vaag: #6d6d79;   /* labels */
  --accent: #c98aa0;        /* opgelichte bordeaux, van de site */
  --accent-diep: #7d2b4a;   /* accent van de site, voor vullingen */
  --goed: #7fbf9a;
  --let-op: #d9a441;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;

  --radius: 6px;
  --kader: clamp(1rem, 3vw, 2.5rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  /* De app is precies zo hoog als het scherm. Wat niet past, scrolt binnen het
     tabblad zelf; een paginascrollbar naast een scrollend paneel leest als twee
     verschillende dingen die hetzelfde doen. */
  overflow: hidden;
  background-color: var(--inkt);
  /* Stippenraster, steek 24px, dekking 4 procent. */
  background-image: radial-gradient(circle at 1px 1px, rgba(242, 241, 238, 0.04) 1px, transparent 0);
  background-size: 24px 24px;
  color: var(--papier);
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

p {
  margin: 0;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- gedeelde bouwstenen ------------------------------------------------ */

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Labels in mono, hoofdletters, ruim gespatieerd. De kleur is bewust
   papier-zacht: papier-vaag haalt op deze achtergrond geen 4.5:1 en blijft
   daarom voorbehouden aan lijnen en uitgeschakelde knoppen. */
.label {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papier-zacht);
}

.klein {
  font-size: 0.8125rem;
  color: var(--papier-zacht);
}

.mt { margin-top: 0.75rem; }
.mb { margin-bottom: 0.4rem; }

.knop {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--inkt-hoog);
  color: var(--papier);
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.knop:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.knop:disabled {
  color: var(--papier-vaag);
  cursor: not-allowed;
}

.knop-vol {
  background: var(--accent-diep);
  border-color: var(--accent-diep);
  color: var(--papier);
}

.knop-vol:hover:not(:disabled) {
  background: #8f3355;
  border-color: var(--accent);
  color: var(--papier);
}

.knop-vol:disabled {
  background: var(--inkt-hoog);
  border-color: var(--rand);
}

.knop-klein {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: none;
  border: 1px solid var(--rand);
  color: var(--papier-zacht);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.knop-klein:hover {
  border-color: var(--accent);
  color: var(--accent);
}

textarea,
select,
input[type="text"] {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--inkt-op);
  color: var(--papier);
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.55;
  resize: vertical;
}

textarea::placeholder {
  color: var(--papier-vaag);
}

textarea:focus,
select:focus,
input:focus {
  outline: none;
  border-color: var(--accent);
}

select {
  resize: none;
  font-family: var(--mono);
  font-size: 0.8125rem;
  padding: 0.5rem 0.6rem;
}

/* Paneel: donker vlak met een dunne lichte lijn erboven, als op apparatuur. */
.paneel {
  position: relative;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--inkt-op);
  animation: binnen 0.28s ease both;
}

.paneel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, transparent, rgba(242, 241, 238, 0.18), transparent);
}

@keyframes binnen {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* --- bovenbalk ---------------------------------------------------------- */

.balk {
  position: sticky;
  top: 0;
  z-index: 10;
  /* Verbergt de scanlijn die aan de rechterkant de balk uit loopt; zonder dit
     krijgt de pagina een horizontale schuifbalk. */
  overflow: hidden;
  border-bottom: 1px solid var(--rand);
  background: rgba(12, 12, 15, 0.94);
}

.balk-binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 1680px;
  margin-inline: auto;
  padding: 0.65rem var(--kader);
}

.merk {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}

.merk-woord {
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.18em;
}

.merk-tak {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.balk-rechts {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tenant {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--papier-zacht);
}

.tenant::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--goed);
}

.wie {
  font-size: 0.8125rem;
  color: var(--papier-zacht);
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* De scanlijn loopt over de kop zolang er een run bezig is. */
.scan {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 16%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
}

body[data-bezig="true"] .scan {
  opacity: 1;
  animation: schuif 1.7s linear infinite;
}

@keyframes schuif {
  from { transform: translateX(-20%); }
  to { transform: translateX(640%); }
}

/* --- aanmeldscherm ------------------------------------------------------ */

.aanmelden {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--kader);
}

.aanmelden-kaart {
  width: min(28rem, 100%);
  padding: 2.25rem;
  text-align: center;
  display: grid;
  gap: 1rem;
  justify-items: center;
}

.aanmelden .merk {
  justify-content: center;
}

.aanmelden p {
  color: var(--papier-zacht);
  text-wrap: pretty;
}

/* --- kop en tabbladen --------------------------------------------------- */

/* --- schermvullende opbouw ---------------------------------------------- */

#app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.blad {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding: 1.5rem var(--kader) 1.25rem;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Het zichtbare tabblad vult wat er over is en scrolt desnoods zelf. */
[role="tabpanel"]:not([hidden]) {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

#paneel-vergelijk:not([hidden]) {
  display: flex;
  flex-direction: column;
}

/* Kop en uitleg naast elkaar in plaats van onder elkaar. Dat scheelt zo'n
   zestig pixels hoogte, en die gaan rechtstreeks naar het leesvlak van de
   modellen. Onder de 900px breedte komt de uitleg gewoon eronder. */
.intro {
  display: grid;
  gap: 0.4rem;
  max-width: 78rem;
  margin-bottom: 1.1rem;
  flex: none;
}

@media (min-width: 900px) {
  .intro {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    column-gap: 2.5rem;
  }

  .intro p {
    max-width: 54ch;
    padding-bottom: 0.15rem;
  }
}

.intro h1 {
  font-size: clamp(1.5rem, 3vw, 2.125rem);
}

.intro p {
  color: var(--papier-zacht);
  text-wrap: pretty;
}

.tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--rand);
  margin-bottom: 1rem;
  flex: none;
  /* Alleen zijwaarts uitwijken op een smal scherm. Zonder de tweede regel zet
     Chrome er ook een verticale scrollbalk naast, en die stond er zichtbaar bij. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs [role="tab"] {
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  padding: 0.6rem 0.9rem;
  margin-bottom: -1px;
  color: var(--papier-zacht);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.tabs [role="tab"]:hover {
  color: var(--papier);
}

.tabs [role="tab"][aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

[role="tabpanel"]:focus {
  outline: none;
}

/* --- tab Vergelijk ------------------------------------------------------ */

.invoer {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
  max-width: 68rem;
  flex: none;
}

/* Vaste hoogte in plaats van het aantal regels uit de HTML: zo weet de rest
   van het scherm hoeveel ruimte er overblijft. */
#prompt {
  height: 5.25rem;
  resize: vertical;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chip {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--inkt-op);
  color: var(--papier-zacht);
  font-family: var(--mono);
  font-size: 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.acties {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.toets {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--papier-zacht);
}

.runstatus {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--inkt-op);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--papier-zacht);
  flex: none;
}

.runstatus b {
  color: var(--papier);
  font-weight: 500;
}

.kolommen {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .kolommen { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* De rij kolommen krijgt alle hoogte die overblijft. */
.kolommen {
  flex: 1;
  min-height: 0;
}

/* Vaste hoogte met eigen scroll, zodat de meetwaarden op hun plek blijven.
   De hoogte schaalt mee met het scherm: op een gewone laptop blijft er zo
   ruimte voor een kop of vijftien tekst, genoeg om de antwoorden echt naast
   elkaar te lezen in plaats van te moeten raden. Op een klein scherm zakt hij
   terug, en boven de 34rem wordt hij niet groter, want dan past de rij niet
   meer op één beeld. */
.kolommen .paneel {
  height: 100%;
  /* Wordt het scherm zo laag dat hier niets meer van te lezen valt, dan houdt
     het paneel deze hoogte en scrolt het tabblad eromheen. */
  min-height: 17rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.paneel-kop {
  padding: 0.75rem 0.85rem 0.6rem;
  border-bottom: 1px solid var(--rand);
  display: grid;
  gap: 0.3rem;
}

.paneel-kop h3 {
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.leverancier {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--papier-zacht);
  text-transform: uppercase;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--papier-zacht);
}

.bol {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid currentColor;
  flex: none;
}

/* Drie standen: vol, half, open bolletje. Naast de vorm staan altijd woorden. */
.badge-regionaal { color: var(--goed); }
.badge-regionaal .bol { background: currentColor; }

.badge-eu-datazone { color: var(--accent); }
.badge-eu-datazone .bol { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }

.badge-wereldwijd { color: var(--let-op); }
.badge-wereldwijd .bol { background: none; }

/* Ondergrens voor het leesvlak. Past het geheel niet meer, dan scrolt het
   tabblad eromheen; wat er niet mag gebeuren is dat er nul regels tekst
   overblijven omdat het scherm laag is. */
.paneel-lijf {
  flex: 1;
  min-height: 9rem;
  overflow: auto;
  padding: 0.75rem 0.85rem;
  scrollbar-width: thin;
  scrollbar-color: var(--rand) transparent;
}

/* Een antwoord dat langer is dan het vak liep halverwege een zin dood en dat
   leest als een fout. Deze vervaging aan de onderrand laat zien dat er meer is.
   Bij een kort antwoord valt hij over de achtergrond en zie je hem niet. */
.paneel-lijf {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.75rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.75rem), transparent);
}

.paneel-lijf::-webkit-scrollbar { width: 8px; }
.paneel-lijf::-webkit-scrollbar-thumb { background: var(--rand); border-radius: 4px; }

.antwoord {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.wacht {
  color: var(--papier-zacht);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.cursor {
  color: var(--accent);
  animation: knipper 1s steps(2, start) infinite;
}

@keyframes knipper {
  to { opacity: 0; }
}

.melding-fout {
  color: var(--let-op);
  font-size: 0.8125rem;
}

.paneel-voet {
  border-top: 1px solid var(--rand);
  padding: 0.55rem 0.85rem 0.65rem;
  display: grid;
  gap: 0.5rem;
}

.spark {
  width: 100%;
  height: 22px;
  display: block;
}

.spark polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.spark line {
  stroke: var(--rand);
  stroke-width: 1;
}

.meting {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.75rem;
  margin: 0;
}

.meting > div { min-width: 0; }

.meting dt {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--papier-zacht);
}

.meting dd {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
}

.verzoek {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.verzoek span {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--papier-zacht);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.merkje {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.merkje-snel { color: var(--goed); }
.merkje-goedkoop { color: var(--accent); }

.kop-merkjes {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.paneel[data-status="fout"] { border-color: var(--let-op); }
.paneel[data-status="fout"]::before { background: linear-gradient(90deg, transparent, var(--let-op), transparent); }

/* --- tabblad Modellen ---------------------------------------------------- */

.modellen-blad {
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

table.stat {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.8125rem;
}

table.stat th {
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--rand);
  background: var(--inkt-op);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--papier-zacht);
  font-weight: 400;
  white-space: nowrap;
}

table.stat td {
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--rand);
  vertical-align: middle;
}

table.stat tr:last-child td {
  border-bottom: 0;
}

table.stat .num {
  text-align: right;
}

table.stat .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stat-naam {
  display: block;
  font-weight: 500;
}

.stat-lev {
  display: block;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--papier-vaag);
}

.stat-goed { color: var(--goed); }
.stat-letop { color: var(--let-op); }

/* De regels die niet met een prompt weg te praten zijn. */
.grenzen {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--inkt-op);
  padding: 0.7rem 0.85rem;
  display: grid;
  gap: 0.45rem;
}

.grenzen ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.25rem;
  color: var(--papier-zacht);
  font-size: 0.8125rem;
}

/* Chrome verschuift de scrollpositie zelf als inhoud groeit. Bij een antwoord
   dat regel voor regel binnenkomt springt de kolom daardoor weg onder je ogen. */
.uitkomst,
.paneel-lijf,
[role="tabpanel"] {
  overflow-anchor: none;
}

/* Op een laag scherm gaat de ruimte naar de antwoorden en niet naar de kop. */
@media (max-height: 900px) {
  .blad {
    padding-top: 1rem;
  }

  .intro {
    margin-bottom: 0.65rem;
  }

  .intro h1 {
    font-size: 1.375rem;
  }

  .tabs {
    margin-bottom: 0.65rem;
  }

  #prompt {
    height: 4rem;
  }

  .invoer {
    margin-bottom: 0.6rem;
  }
}

/* --- tab Eigen stukken -------------------------------------------------- */

.stukken {
  display: grid;
  gap: 1.5rem;
  max-width: 68rem;
}

.blokkop {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0.75rem;
}

.sleepzone {
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  text-align: center;
  padding: 2rem 1rem;
  border: 1px dashed var(--rand);
  border-radius: var(--radius);
  background: var(--inkt-op);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.sleepzone[data-over="true"] {
  border-color: var(--accent);
  background: var(--inkt-hoog);
}

.stappen {
  list-style: none;
  margin: 0;
  padding: 0.85rem;
  display: grid;
  gap: 0.4rem;
}

.stappen li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--papier-vaag);
}

.stappen li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--papier-vaag);
  flex: none;
}

.stappen li[data-staat="bezig"] {
  color: var(--papier);
}

.stappen li[data-staat="bezig"]::before {
  border-color: var(--accent);
  background: var(--accent);
  animation: pols 1.1s ease-in-out infinite;
}

.stappen li[data-staat="klaar"] {
  color: var(--papier-zacht);
}

.stappen li[data-staat="klaar"]::before {
  border-color: var(--goed);
  background: var(--goed);
}

.stappen li[data-staat="fout"] { color: var(--let-op); }
.stappen li[data-staat="fout"]::before { border-color: var(--let-op); background: var(--let-op); }

.stappen li small {
  color: var(--papier-zacht);
  font-size: 0.6875rem;
}

@keyframes pols {
  50% { opacity: 0.35; }
}

.doclijst {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.doclijst th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--papier-zacht);
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--rand);
}

.doclijst td {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--rand);
  vertical-align: middle;
}

.doclijst tbody tr:last-child td { border-bottom: 0; }

.doclijst .getal {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.doclijst .doe { text-align: right; }

.leeg {
  padding: 0.85rem;
  color: var(--papier-zacht);
  font-size: 0.8125rem;
}

.vraagrij {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.vraagrij select { width: auto; min-width: 12rem; }

.uitkomst {
  padding: 0.95rem 1.1rem;
  display: grid;
  gap: 0.75rem;
}

.uitkomst .antwoord { font-size: 0.9375rem; }

.cite {
  appearance: none;
  border: 0;
  background: none;
  padding: 0 0.1em;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.7em;
  vertical-align: super;
  cursor: pointer;
}

.cite:hover { text-decoration: underline; }

.bronnen { display: grid; gap: 0.4rem; }

.bron {
  border: 1px solid var(--rand);
  border-radius: 4px;
  background: var(--inkt-hoog);
  padding: 0.5rem 0.7rem;
}

.bron summary {
  cursor: pointer;
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--papier-zacht);
}

.bron summary b { color: var(--papier); font-weight: 500; }

.bron[open] { border-color: var(--accent); }

.bron p {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--papier-zacht);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --- tab Herkomst ------------------------------------------------------- */

.herkomst {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  max-width: 68rem;
  align-items: start;
}

@media (min-width: 900px) {
  .herkomst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .herkomst .breed { grid-column: 1 / -1; }
}

.vak {
  padding: 0.95rem 1.1rem 1.1rem;
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.vak > h3 {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.rijen {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
  align-items: baseline;
}

.rijen dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--papier-zacht);
}

.rijen dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.rijen dd.code {
  font-family: var(--mono);
  font-size: 0.75rem;
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  flex-wrap: wrap;
}

.niet {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.niet li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  color: var(--papier-zacht);
  font-size: 0.875rem;
}

.niet li::before {
  content: "\00d7";
  color: var(--goed);
  font-family: var(--mono);
}

.filterproef {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

.proefprompt {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--papier-zacht);
  border-left: 1px solid var(--rand);
  padding-left: 0.7rem;
}

.proefuitslag {
  width: 100%;
  border: 1px solid var(--rand);
  border-radius: 4px;
  background: var(--inkt-hoog);
  padding: 0.7rem 0.85rem;
  display: grid;
  gap: 0.5rem;
}

.proefuitslag[data-uitslag="tegengehouden"] { border-color: var(--goed); }
.proefuitslag[data-uitslag="doorgelaten"] { border-color: var(--let-op); }

.categorieen {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.75rem;
}

.categorieen th,
.categorieen td {
  text-align: left;
  padding: 0.3rem 0.6rem 0.3rem 0;
  border-bottom: 1px solid var(--rand);
}

.categorieen th {
  font-weight: 400;
  color: var(--papier-zacht);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.625rem;
}

.categorieen tr:last-child td { border-bottom: 0; }

.idlijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--papier-zacht);
}

.idlijst li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.idlijst b { color: var(--papier); font-weight: 500; }

/* --- foutstrook en meldingen -------------------------------------------- */

.strook {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--let-op);
  border-radius: var(--radius);
  background: rgba(217, 164, 65, 0.08);
  color: var(--papier);
  font-size: 0.875rem;
}

.tostbak {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 30;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--inkt-hoog);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--papier);
}

/* --- terughoudendheid --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}