.kaart {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--schaduw);
  /* Dezelfde reden als bij td en .rapportageregel: één waarde zonder spatie —
     een geplakt adres, een lange bestandsnaam — brak anders niet af, duwde de
     kaart breder dan het scherm en zette een schuifbalk onder de hele pagina.
     Erfelijk, dus alles in de kaart doet mee. */
  overflow-wrap: anywhere;
}
/* Een kaart die een lijst met korte regels draagt heeft minder lucht nodig dan
   een kaart met een formulier erin. Veertien keuzelijsten onder elkaar met de
   volle vulling zijn meters scrollen voor regels van één zin. */
.kaart.dicht { padding: .85rem 1.05rem; }
.kaart + .kaart { margin-top: 1rem; }
.kaart h2 { margin-bottom: .75rem; }

label { display: block; font-weight: 600; margin-bottom: .3rem; }
.veld { margin-bottom: 1rem; }
.veld .uitleg { color: var(--inkt-licht); font-size: .875rem; margin-top: .25rem; }

/* ── Formulierbediening ────────────────────────────────────────────────────
   Een uitklapmenu, een datumveld en een vinkje tekent de browser standaard
   zelf, en dat ziet er op elk besturingssysteem anders uit: een blauw
   Windows-vinkje naast een grijze macOS-pijl in hetzelfde formulier. Ze zijn
   hier met de hand getekend, in dezelfde lijn als js/ui/iconen.js — één
   lijndikte, ronde uiteinden, geen vulling.

   Wat we níet overnemen is de uitklaplijst zelf en de kalender die eruit klapt.
   Die tekent het besturingssysteem, ze zijn niet op te maken, en dat hoeft ook
   niet: `color-scheme` in base.css laat ze het thema volgen. Behalve onderaan
   een lang formulier: daar klapt die lijst naar boven, en dan is het een
   keuzemenu (ui/zoekkeuze.js) met een eigen lijst.

   Één selector voor "wat is een invoerveld", en die staat hier vier keer met
   dezelfde inhoud. Een opsomming per type (text, email, password, …) liep het
   risico dat een nieuw type stilletjes ongestyled bleef; deze vorm sluit uit
   wat géén veld is, en dat lijstje verandert niet meer. */
input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="file"]),
select,
.keuzemenu-knop,
textarea {
  width: 100%;
  min-height: 44px;                   /* klikdoel, briefing §4.8 */
  padding: .55rem .7rem;
  font: inherit;
  color: var(--inkt);
  background-color: var(--vlak);
  border: 1px solid var(--rand-sterk);
  border-radius: var(--radius-klein);
}

/* Aanwijzen en focus. Op een rustig scherm zonder kleuraccenten is het anders
   niet te zien welk veld je te pakken hebt — de focusring alleen verschijnt
   niet bij een muisklik. */
input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="file"]):hover,
select:hover,
.keuzemenu-knop:hover,
textarea:hover { border-color: var(--inkt-licht); }

input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="file"]):focus,
select:focus,
.keuzemenu-knop:focus,
.keuzemenu-knop[aria-expanded="true"],
textarea:focus { border-color: var(--accent); }

/* Uitgeschakeld en alleen-lezen zien er hetzelfde uit: je kunt er niets mee.
   Het verschil is voor de browser, niet voor wie kijkt. */
input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="file"]):disabled,
select:disabled,
textarea:disabled,
input[readonly], textarea[readonly] {
  background-color: var(--vlak-zacht);
  color: var(--inkt-zacht);
  border-color: var(--rand);
  cursor: not-allowed;
}

textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }

::placeholder { color: var(--inkt-licht); opacity: 1; }

/* Uitklapmenu. De eigen pijl moet weg voordat die van ons erin kan, en dat is
   precies wat `appearance: none` doet — inclusief de plek die de browser voor
   zijn pijl vrijhield, dus die ruimte zetten we er zelf bij. Een keuzemenu
   (ui/zoekkeuze.js) is een knop die er precies zo uitziet. */
select,
.keuzemenu-knop {
  appearance: none;
  padding-right: 2.6rem;
  background-image: var(--pijl-omlaag);
  background-repeat: no-repeat;
  background-position: right .65rem center;
  background-size: 20px 20px;
  cursor: pointer;
}
/* Meerdere regels tegelijk: dan is er geen pijl en geen uitklap. */
select[multiple], select[size]:not([size="1"]) {
  appearance: auto; background-image: none; padding-right: .7rem; cursor: auto;
}
select:disabled { cursor: not-allowed; opacity: .75; }

/* Datumveld. Het kalenderknopje van Chromium is een klein grijs pictogram met
   een klikdoel van een pixel of veertien — te klein volgens briefing §4.8, en
   het enige onderdeel van de applicatie dat er nog uitzag als "van de browser".
   Nu hetzelfde kalendericoon als de rest, met vulling eromheen zodat het
   klikdoel de volle hoogte van het veld haalt.

   Dat de kalender zélf openklapt blijft aan het knopje hangen. Een klik in het
   veld opent hem niet: wie snel drie datums achter elkaar intypt wil niet dat
   er telkens een kalender overheen springt. */
/* Geen eigen verticale vulling: die van het kalenderknopje bepaalt de hoogte
   van het veld. Anders tellen ze bij elkaar op en wordt een datumveld 62px
   hoog terwijl een uitklapmenu ernaast op 44 staat. */
input[type="date"] { padding: 0 .3rem 0 .7rem; }
input[type="date"]::-webkit-calendar-picker-indicator {
  width: 20px; height: 20px;
  padding: 11px .5rem;              /* 20 + 2x11 = 42, plus rand = 44px klikdoel */
  box-sizing: content-box;
  margin: 0;
  opacity: 1;
  cursor: pointer;
  border-radius: var(--radius-klein);
  background-image: var(--kalender);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { background-color: var(--vlak-zacht); }
input[type="date"]::-webkit-datetime-edit { padding: 0; }
input[type="date"]::-webkit-datetime-edit-text { color: var(--inkt-licht); padding: 0 .1rem; }
/* Welk deel van de datum je aan het typen bent, moet te zien zijn. De standaard
   is een blauwe systeemselectie die naast dit palet staat. */
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus {
  background: var(--accent-zacht);
  color: var(--accent);
  border-radius: 3px;
  outline: none;
}
input[type="date"]:disabled::-webkit-calendar-picker-indicator { cursor: not-allowed; opacity: .5; }

/* Vinkje. Zelf getekend, met hetzelfde accent als een knop: aangevinkt is een
   gevuld vakje, en dat is dezelfde taal als een ingedrukte signaalknop.
   22px in plaats van de 13px van het systeem — het vakje zelf hoeft geen 44
   te zijn, want het label eromheen is het klikdoel (zie .vinkje). */
input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: var(--vinkje); height: var(--vinkje);
  display: inline-grid; place-content: center;
  border: 1.5px solid var(--rand-sterk);
  border-radius: var(--radius-klein);
  background-color: var(--vlak);
  cursor: pointer;
}
/* Het haakje is een uitgeknipte vorm en geen letter: een teken uit het font
   staat op elk systeem net iets anders in het vakje. */
input[type="checkbox"]::before {
  content: "";
  width: 12px; height: 12px;
  background-color: var(--op-gevuld);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  visibility: hidden;
}
input[type="checkbox"]:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}
input[type="checkbox"]:checked::before { visibility: visible; }
input[type="checkbox"]:hover { border-color: var(--accent); }
input[type="checkbox"]:disabled {
  background-color: var(--vlak-zacht); border-color: var(--rand); cursor: not-allowed;
}
input[type="checkbox"]:disabled:checked { background-color: var(--inkt-licht); border-color: var(--inkt-licht); }

/* Een vinkje met zijn label. Het label is het klikdoel, dus die haalt de 44px
   — niet het vakje. Zonder deze regel erft het label `display: block` en
   `font-weight: 600` van de labelregel hierboven, en dan staat een vraag als
   "Ook het raadplegen tonen" vetgedrukt onder het vakje in plaats van ernaast. */
.vinkje {
  display: flex; align-items: center; gap: .55rem;
  min-height: 44px; margin-bottom: 0;
  font-weight: 400; color: var(--inkt-zacht);
  cursor: pointer;
}
/* Een vinkje dat nog niet kan (reageren zonder in te loggen): rustiger, maar
   in --inkt-licht en niet doorzichtig — ook dan leesbaar, want juist hier moet
   je zien wát er nog niet kan. */
.vinkje:has(input:disabled) { color: var(--inkt-licht); cursor: not-allowed; }

.knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .55rem 1.1rem;
  font: inherit; font-weight: 600;
  border: 1px solid var(--accent); border-radius: var(--radius-klein);
  background: var(--accent); color: var(--op-gevuld);
  cursor: pointer;
}
.knop:hover { background: var(--accent-donker); border-color: var(--accent-donker); }
.knop.stil { background: var(--vlak); color: var(--inkt); border-color: var(--rand-sterk); }
.knop.stil:hover { background: var(--vlak-zacht); }
.knop[disabled] { opacity: .55; cursor: not-allowed; }
/* Een actie als tekst, zonder kader. Drie omrande knoppen naast elkaar wegen
   zwaarder dan waar ze bij horen — in een rapportageregel zwaarder dan de tekst,
   in een tabelrij zwaarder dan de gegevens. Het klikdoel blijft 44px; dat zit in
   de opvulling en niet in een zichtbaar kader. */
.tekstknop {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 .55rem;
  border: 0; background: none; font: inherit;
  font-size: .8rem; color: var(--inkt-licht);
  cursor: pointer; border-radius: var(--radius-klein);
  white-space: nowrap;
}
.tekstknop:last-child { padding-right: 0; }
.tekstknop:hover { color: var(--inkt); text-decoration: underline; }

/* Iets toevoegen of bewerken, rechts in de kop van een kaart. Een omrande knop
   onder elke lijst woog zwaarder dan de lijst zelf; zo staat de handeling waar
   je hem zoekt, naast de naam van wat je aanvult, en blijft de kaart rustig.
   Het icoon staat naast het label, nooit in plaats daarvan. */
.kopknop {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 44px; padding: 0 .6rem; margin-left: auto;
  border: 0; border-radius: var(--radius-klein); background: none;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--accent);
  cursor: pointer; white-space: nowrap;
}
.kopknop:hover { background: var(--vlak-zacht); text-decoration: underline; }
.kopknop .icoon { width: 1.1rem; height: 1.1rem; flex: none; }
.kopknop:last-child { margin-right: -.6rem; }
/* Terug, boven de kop: links uitgelijnd met de titel eronder. */
.kopknop.terug { margin-left: -.6rem; }

/* Alleen voor een bevestiging die iets wegneemt. Spaarzaam gebruiken: als de
   helft van de knoppen rood is, betekent rood niets meer. */
.knop.gevaar { background: var(--stop); border-color: var(--stop); }
.knop.gevaar:hover { background: #7f2723; border-color: #7f2723; }

/* ── Bevestigingsvenster ───────────────────────────────────────────────────
   Het enige pop-upvenster in de applicatie (briefing §4.8: geen pop-ups,
   behalve één bevestiging bij een onomkeerbare actie). Rustig en met ruimte:
   dit is het moment waarop iemand moet lézen in plaats van wegklikken. */
.dialoog {
  /* Expliciet, want de reset in base.css zet `* { margin: 0 }` en haalt daarmee
     de margin:auto weg waarmee een <dialog> zichzelf midden op het scherm zet.
     Zonder deze regel plakt het venster tegen de linkerrand. */
  margin: auto;
  max-width: 30rem; width: calc(100vw - 2rem);
  padding: 1.5rem;
  border: 1px solid var(--rand-sterk); border-radius: var(--radius);
  background: var(--vlak); color: var(--inkt);
  box-shadow: 0 12px 40px rgba(28, 31, 35, .2);
}
:root[data-theme="dark"] .dialoog { box-shadow: 0 12px 40px rgba(0, 0, 0, .6); }
.dialoog::backdrop { background: rgba(28, 31, 35, .45); }

/* ── Kijker ────────────────────────────────────────────────────────────────
   Een document over het hele scherm (ui/kijker.js). Donker in beide thema's,
   zoals een mailprogramma: het document is wat licht geeft, niet de rand. */
.kijker {
  margin: 0; padding: 0; border: 0;
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  /* Het venster zelf is het donkere vlak, niet ::backdrop: een variabele komt
     in ::backdrop niet in elke browser aan, en dan schemerde de pagina erdoor. */
  background: var(--kijker-achter); color: var(--kijker-inkt);
  display: flex; flex-direction: column;
}
.kijker:not([open]) { display: none; }
.kijker::backdrop { background: rgba(16, 18, 20, .6); }
.kijker-balk {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .35rem .75rem .35rem 1.25rem; background: var(--kijker-balk);
}
.kijker-naam { display: grid; min-width: 0; }
.kijker-naam strong, .kijker-naam span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kijker-naam span { color: var(--kijker-inkt-zacht); font-size: .85rem; }
.kijker-knoppen { flex: none; display: flex; gap: .25rem; }
.kijkerknop {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; padding: 0 .8rem; border: 0; border-radius: var(--radius-klein);
  background: none; color: var(--kijker-inkt); font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.kijkerknop:hover, .kijkerknop:focus-visible { background: rgba(255, 255, 255, .12); }
.kijkerknop .icoon { width: 1.2rem; height: 1.2rem; }
.kijker-vlak {
  flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.kijker-pdf { width: min(100%, 72rem); height: 100%; border: 0; background: #fff; }
.kijker-foto { max-width: 100%; max-height: 100%; object-fit: contain; }
.kijker-laden { color: var(--kijker-inkt); }
@media (max-width: 800px) {
  .kijkerknop span { display: none; }   /* alleen het icoon, met aria-label/title */
  .kijker-vlak { padding: 0; }
}
.dialoog h2 { font-size: 1.15rem; margin-bottom: .75rem; }
.dialoog p { color: var(--inkt-zacht); margin-bottom: .6rem; line-height: 1.55; }
.dialoog p:last-of-type { margin-bottom: 0; }
.dialoog-knoppen {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end;
  margin-top: 1.25rem;
}

.melding {
  padding: .8rem 1rem; border-radius: var(--radius-klein);
  border: 1px solid var(--rand-sterk); margin-bottom: 1rem;
}
.melding.fout { background: var(--stop-zacht); border-color: var(--stop); color: var(--stop); }
.melding.goed { background: var(--goed-zacht); border-color: var(--goed); color: var(--goed); }
.melding.let-op { background: var(--aandacht-zacht); border-color: var(--aandacht); color: var(--aandacht); }
.melding.rustig { background: var(--rust-zacht); border-color: var(--rust); color: var(--inkt-zacht); }

/* Een merkje is één woord in een ovaal. Het staat in een tabelcel, en die
   breekt lange woorden af — zo werd "aan" in de kolom 2FA een ovaal met "aa"
   en "n" eronder. */
.merkje {
  white-space: nowrap;
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600;
  background: var(--vlak-zacht); color: var(--inkt-zacht);
  border: 1px solid var(--rand);
}
.merkje.goed { background: var(--goed-zacht); color: var(--goed); border-color: var(--goed); }
.merkje.stop { background: var(--stop-zacht); color: var(--stop); border-color: var(--stop); }
.merkje.aandacht { background: var(--aandacht-zacht); color: var(--aandacht); border-color: var(--aandacht); }

table { width: 100%; border-collapse: collapse; }
/* Eén lang woord mag de tabel niet breder maken dan het scherm — met een
   achternaam van 80 tekens verdwenen de laatste kolommen anders uit beeld.
   Gevonden met ops/nepdata.py. */
td { overflow-wrap: anywhere; }
td.niet-breken, th.niet-breken { white-space: nowrap; }
th, td { text-align: left; padding: .65rem .6rem; border-bottom: 1px solid var(--rand); }
/* Een kolomkop is ons eigen woord en nooit invoer, dus die hoeft niet af te
   breken. Zonder deze regel erft hij het afbreken van .kaart, wordt "DOSSIER"
   in een smalle kolom "DOSSI / ER", en groeit de kopregel naar twee regels —
   waardoor bij audit-inzicht de eerste logregel uit beeld zakt. Precies wat
   ops/doorloop.py meet, en wat hij hier ook ving. */
th {
  font-size: .85rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--inkt-licht);
  overflow-wrap: normal;
}
tbody tr:hover { background: var(--vlak-zacht); }
.tabelomhulsel { overflow-x: auto; }

/* Een tabel met een eigen schuifgebied, voor lijsten die van nature lang zijn.
   De auditlog haalt tweehonderd regels op; die onder elkaar zetten maakt de
   pagina meters lang, waardoor je voor de filterbalk helemaal terug moet
   scrollen en de rest van het scherm uit beeld raakt.

   De kopregel blijft staan: een tabel met zeven kolommen waarvan je de kop niet
   meer ziet is een tabel waarin je gokt wat een kolom betekent. */
.tabelomhulsel.scrollt {
  overflow: auto;
  /* Neemt de hoogte die in .inhoud overblijft, en groeit dus mee met het
     venster. Een vast plafond (het was min(58vh, 34rem)) betekende dat een
     scherm van 1400px hetzelfde kleine vak kreeg als een laptop en de helft
     van de hoogte ongebruikt bleef.

     De ondergrens moet er staan: zonder die 12rem geeft `min-height: auto`
     een flexitem de hoogte van zijn inhoud, en dan wordt het vak weer
     tweehonderd regels lang. Hij is meteen de bodem op een laag venster —
     daaronder is een schuifgebied onwerkbaarder dan een lange pagina. */
  flex: 1 1 12rem;
  min-height: 12rem;
}
.tabelomhulsel.scrollt thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--vlak);
  /* border-bottom schuift mee weg bij een sticky cel; een schaduw blijft. */
  box-shadow: inset 0 -1px 0 var(--rand);
}

.lijst { list-style: none; }
.lijst > li { border-bottom: 1px solid var(--rand); padding: .9rem 0; }
.lijst > li:last-child { border-bottom: 0; }

/* ── Iconen ────────────────────────────────────────────────────────────────
   Vaste maat in plaats van meeschalen met de tekst: iconen staan hier naast
   labels van verschillende grootte, en een icoon dat per plek een andere maat
   heeft leest als slordigheid. De kleur komt van de tekst eromheen, zodat
   dag- en nachtmodus vanzelf goed staan. */
.icoon { width: 20px; height: 20px; flex: none; }
.icoon.klein { width: 16px; height: 16px; }

/* Een knop die alleen uit een icoon bestaat. Altijd met aria-label en title,
   want een pictogram zonder woord is een raadsel — zeker voor deze doelgroep. */
.icoonknop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;          /* klikdoel, briefing §4.8 */
  border: 1px solid transparent; border-radius: var(--radius-klein);
  background: none; color: var(--inkt-zacht); cursor: pointer;
}
.icoonknop:hover { background: var(--vlak-zacht); color: var(--inkt); }
.icoonknop[aria-expanded="true"] {
  background: var(--accent-zacht); border-color: var(--accent); color: var(--accent);
}

/* Kopje boven een groep velden. Het cliëntformulier heeft zestien velden; die
   ongeordend onder elkaar zetten maakt invullen een zoekplaatje. */
.veldgroep {
  font-size: .9rem; margin: 1.25rem 0 .5rem;
  padding-bottom: .3rem; border-bottom: 1px solid var(--rand);
  color: var(--inkt-zacht);
}
.veldgroep:first-child { margin-top: 0; }

.klikbaar { cursor: pointer; }
.leeg { color: var(--inkt-licht); padding: 1.5rem 0; }
.stil { color: var(--inkt-licht); font-size: .875rem; }
.monospatie { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .875rem; }

/* Hulpklassen. Inline style-attributen kunnen niet: de Content-Security-Policy
   staat ze niet toe, en dat is bij een zorgsysteem de goede kant om te
   kiezen. */
.mt-s { margin-top: .6rem; }
.mt-m { margin-top: 1rem; }
.mt-l { margin-top: 1.25rem; }
.mb-s { margin-bottom: .6rem; }
.mb-m { margin-bottom: 1rem; }
.mb-l { margin-bottom: 1.25rem; }
.smal { max-width: 14rem; }
.geen-vulling { padding: 0; }
.klein-vak textarea { min-height: 5rem; }
.rechts { justify-content: flex-end; }

/* In een .rij staan velden naast elkaar; zonder deze regel duwt de
   ondermarge van .veld de labels uit elkaar. */
.rij > .veld { margin-bottom: 0; }

/* ── Paginering ────────────────────────────────────────────────────────────
   Eén balk onder elke lange lijst (ui/paginering.js). Links hoeveel, rechts de
   knoppen; de huidige pagina gevuld. Klikdoel 44px, ook voor een cijfer. */
.paginering {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1rem; padding: .6rem 0 0;
}
.paginatelling { color: var(--inkt-licht); font-size: .875rem; }
.paginaknoppen { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.paginaknop {
  min-width: 44px; min-height: 44px; padding: 0 .7rem;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: var(--vlak); color: var(--inkt); font: inherit; font-size: .9rem; cursor: pointer;
}
.paginaknop:hover:not([disabled]) { background: var(--vlak-zacht); }
.paginaknop.huidig { background: var(--accent); border-color: var(--accent); color: var(--op-gevuld); font-weight: 600; }
.paginaknop[disabled] { color: var(--inkt-licht); cursor: default; background: none; }
.paginagat { min-width: 1.5rem; text-align: center; color: var(--inkt-licht); }

/* Een wachtwoordveld met *Tonen* rechts erin (ui/wachtwoord.js). De knop ligt
   over de rechterkant van het veld; de vulling van het veld maakt er plaats
   voor, zodat een lang wachtwoord er niet onder verdwijnt. Klikdoel 44px. */
.wachtwoordveld { position: relative; }
.wachtwoordveld input { padding-right: 7.5rem; }
.wachtwoordknop {
  position: absolute; top: 50%; right: .25rem; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 44px; min-width: 44px; padding: 0 .6rem;
  border: 0; border-radius: var(--radius-klein); background: none;
  font: inherit; font-size: .875rem; font-weight: 600; color: var(--accent);
  cursor: pointer;
}
.wachtwoordknop:hover { text-decoration: underline; }
.wachtwoordknop .icoon { width: 1.1rem; height: 1.1rem; flex: none; }

/* Het wiskruisje dat Chrome en Safari in een zoekveld tekenen: blauw, klein
   (±12px, geen klikdoel van 44) en op elk systeem anders — dezelfde reden als
   bij het uitklapmenu en het vinkje hierboven. Wissen doe je met de toetsen. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* Kiezen uit een lange lijst (ui/zoekkeuze.js): het zoekveld, en daaronder de
   treffers als knoppen in een vak dat zelf scrolt. Het gekozen item licht op. */
.zoekkeuze { margin-bottom: .75rem; }
.zoekkeuze-veld { width: 100%; }
.zoekkeuze-lijst {
  list-style: none; margin: .35rem 0 0; padding: .25rem;
  max-height: 14rem; overflow-y: auto;
  border: 1px solid var(--rand); border-radius: var(--radius-klein); background: var(--vlak);
}
.zoekkeuze-optie {
  display: flex; align-items: baseline; gap: .5rem; width: 100%;
  min-height: 44px; padding: .4rem .6rem; text-align: left;
  border: 0; border-radius: var(--radius-klein); background: none; cursor: pointer;
  font: inherit; color: var(--inkt);
}
.zoekkeuze-optie:hover { background: var(--vlak-zacht); }
.zoekkeuze-optie[aria-pressed="true"] { background: var(--vlak-zacht); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent); }
.zoekkeuze-leeg { margin: .4rem 0 0; }
/* Met `uitklap`: een vak onder het veld dat over de inhoud valt, zoals het
   zoekpaneel in de balk. Er schuift niets op als het opengaat. */
.zoekkeuze.uitklap { position: relative; }
.uitklap .zoekkeuze-treffers {
  position: absolute; z-index: 10; top: calc(100% + .25rem); left: 0; right: 0;
  max-height: 14rem; overflow-y: auto; padding: .25rem;
  background: var(--vlak); border: 1px solid var(--rand-sterk); border-radius: var(--radius-klein);
  box-shadow: 0 8px 24px rgba(28, 31, 35, .12);
}
:root[data-theme="dark"] .uitklap .zoekkeuze-treffers { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.uitklap .zoekkeuze-lijst { margin: 0; padding: 0; max-height: none; overflow: visible; border: 0; }
.uitklap .zoekkeuze-leeg { margin: 0; padding: .6rem; }
.keuzemenu { margin-bottom: 0; }
/* Een korte lijst helemaal in beeld, zonder te scrollen in het vak. */
.keuzemenu .zoekkeuze-treffers { max-height: 24rem; }
.keuzemenu-knop { display: block; text-align: left; }