/* public/beheer/app.css — de stijl van /beheer (F-037, golf 7 wave A).
 *
 * WAAROM HIER EN NIET IN DE .astro-PAGINA. Twee redenen, allebei dragend:
 *  1. DE SCHIL. Pagina, script en stijl staan bewust samen onder /beheer/,
 *     zodat server.mjs (createBeheerPageRoute) ze als één geheel levert, met
 *     no-store en noindex. Sinds ronde 10 (Sarkie-besluit B2,
 *     .planning/feedback/ronde10/BESLUITEN.md §6) is die lege schil PUBLIEK —
 *     het inlogscherm, dit bestand en app.js (BEHEER_PUBLIC_FILES in
 *     server/admin.mjs); ze dragen geen enkel gegeven. Alle data blijft achter
 *     de API-sessie op /api/admin/*. Een stylesheet in de pagina zou door
 *     Astro naar een gedeelde /_astro/<hash>.css gebundeld worden, met de
 *     cacheklasse van de publieke site en zonder noindex.
 *  2. DE LINT-REGISTEREN. De CSS-linters (tests/lint-css.test.mjs) scannen
 *     src/**; dit is INTERNE TOOLING met een eigen, klein bezet — geen
 *     design-tokens van de publieke site (besluit genoteerd in
 *     .planning/bouw/golf-7/A3.md). Hieronder staat hij buiten de scan, in
 *     dezelfde stijlvorm: één schaal in rem, geen px-breekpunten.
 *
 * RELEASE B (L0-beheer-split): de stijl is opgesplitst zoals het script.
 * Publiek zijn dit bestand en bh-login.css (het inlogscherm); de stijl van
 * een scherm achter de sessie (bh-mail.css en verder) laadt pas na het
 * inloggen via ctx.laadStijl() uit bh-kern.js, nooit via een link in
 * index.astro (die gaf vóór het inloggen een 404).
 */
:root {
  color-scheme: dark;
  --bh-bg: #101216;
  --bh-surface: #191c23;
  --bh-line: #2a2e38;
  --bh-fg: #e7e9ee;
  --bh-muted: #9aa1ad;
  --bh-accent: #f4af2d;
  --bh-accent-ink: #131313;
  /* Ronde 10: was #e5484d — 4,36:1 op --bh-surface, en axe meldde de kleine
     rode knoppen (Verwijderen) als contrastfout. #ec5d5e: 5,11:1 op surface,
     5,62:1 op bg (zelfde tint, gemeten met de WCAG-formule). */
  --bh-danger: #ec5d5e;
  --bh-ok: #46a758;
}
* { box-sizing: border-box; }
/* Ronde 10: `hidden` wint altijd. Zonder deze regel verslaat elke
   `display: flex` hieronder (.bh-toolbar, .bh-acc-acts) het UA-`[hidden]` —
   en een verborgen zoekbalk of bevestiging stond dan gewoon in beeld. */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bh-bg);
  color: var(--bh-fg);
  font: 0.9375rem/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.bh-wrap { max-width: 73.75rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
h1 { font-size: 1.25rem; margin: 0 0 0.25rem; }
h1 span { color: var(--bh-accent); }
.bh-sub { color: var(--bh-muted); margin: 0 0 1.25rem; font-size: 0.8125rem; }
.bh-card { background: var(--bh-surface); border: 1px solid var(--bh-line); border-radius: 0.625rem; padding: 1.125rem; }
/* De lijstkaart zonder binnenpad: de tabel mag de volle breedte. */
.bh-card-flush { padding: 0; overflow-x: auto; }
/* Login: de regels van het inlogscherm staan sinds release B in
   bh-login.css (publiek, net als dit bestand); lane U-auth bouwt daar het
   nieuwe inlogscherm. */
.bh-btn {
  display: inline-block; padding: 0.5625rem 1rem; border-radius: 0.5rem; border: 1px solid var(--bh-line);
  background: var(--bh-surface); color: var(--bh-fg); font-size: 0.875rem; cursor: pointer; text-decoration: none;
}
.bh-btn:hover { border-color: var(--bh-accent); }
.bh-btn-primary { background: var(--bh-accent); border-color: var(--bh-accent); color: var(--bh-accent-ink); font-weight: 600; }
.bh-btn-danger { border-color: var(--bh-danger); color: var(--bh-danger); }
/* overflow-wrap: anywhere (fixronde ronde 10): een uitkomstregel draagt vaak
   een adres ("Uitnodiging verstuurd naar …", "Niet gelukt voor: …"). Gemeten
   zonder: een adres van 54 tekens zonder koppelteken maakte de pagina op 320px
   395px breed. */
.bh-msg { min-height: 1.25rem; font-size: 0.8125rem; margin: 0.625rem 0 0; color: var(--bh-danger); overflow-wrap: anywhere; }
/* App */
#bh-app[hidden] { display: none; }
.bh-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.625rem; }
.bh-toolbar input[type='search'] {
  flex: 1 1 13.75rem; padding: 0.5625rem 0.75rem; border-radius: 0.5rem; border: 1px solid var(--bh-line);
  background: var(--bh-bg); color: var(--bh-fg);
}
.bh-toolbar select { padding: 0.5625rem 0.625rem; border-radius: 0.5rem; border: 1px solid var(--bh-line); background: var(--bh-bg); color: var(--bh-fg); }
.bh-statusline { font-size: 0.78125rem; color: var(--bh-muted); margin: 0 0 0.75rem; }
.bh-statusline b { color: var(--bh-fg); font-weight: 600; }
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th, td { text-align: left; padding: 0.5625rem 0.625rem; border-bottom: 1px solid var(--bh-line); vertical-align: top; }
th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bh-muted); }
tbody tr { cursor: pointer; }
tbody tr:hover, tbody tr:focus-visible { background: rgba(244, 175, 45, 0.07); outline: none; }
td.bh-dim { color: var(--bh-muted); font-size: 0.8125rem; }
.bh-chip { display: inline-block; padding: 0.0625rem 0.5rem; border-radius: 99px; border: 1px solid var(--bh-line); font-size: 0.75rem; }
.bh-chip-ok { border-color: var(--bh-ok); color: var(--bh-ok); }
.bh-chip-bad { border-color: var(--bh-danger); color: var(--bh-danger); }
.bh-chip-wait { color: var(--bh-muted); }
.bh-empty { color: var(--bh-muted); padding: 1.75rem 0.625rem; text-align: center; }
.bh-pager { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; margin-top: 0.75rem; font-size: 0.8125rem; color: var(--bh-muted); }
/* Detailvenster */
dialog { background: var(--bh-surface); color: var(--bh-fg); border: 1px solid var(--bh-line); border-radius: 0.75rem; padding: 1.375rem; max-width: 35rem; width: calc(100vw - 2.5rem); }
dialog::backdrop { background: rgba(8, 9, 12, 0.7); }
.bh-dl { display: grid; grid-template-columns: 8.125rem minmax(0, 1fr); gap: 0.375rem 0.875rem; font-size: 0.875rem; margin: 0.75rem 0; }
.bh-dl dt { color: var(--bh-muted); }
.bh-dl dd { margin: 0; overflow-wrap: anywhere; }
.bh-dl blockquote { margin: 0; white-space: pre-wrap; }
.bh-detail-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
/* Actiesmenu (F-038): Popover API, geen bibliotheek. */
[popover].bh-menu {
  background: var(--bh-surface); color: var(--bh-fg); border: 1px solid var(--bh-line);
  border-radius: 0.625rem; padding: 0.375rem; min-width: 14.375rem; box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.45);
  inset: auto;
}
.bh-menu button {
  display: flex; width: 100%; gap: 0.5rem; text-align: left; padding: 0.5rem 0.625rem; border: 0; border-radius: 0.4375rem;
  background: transparent; color: inherit; font-size: 0.875rem; cursor: pointer;
}
.bh-menu button:hover, .bh-menu button:focus-visible { background: rgba(244, 175, 45, 0.12); outline: none; }
.bh-menu .bh-danger-item { color: var(--bh-danger); }
@starting-style { [popover].bh-menu { opacity: 0; transform: translateY(-0.25rem); } }
.bh-foot { color: var(--bh-muted); font-size: 0.78125rem; margin-top: 1.125rem; }
/* Cijferdashboard (F-046) en rapportage-proef (F-047) — golf 7 wave B. Zelfde
   bezet als de rest van deze pagina: interne tooling, één schaal in rem,
   kleuren uit de :root-variabelen hierboven, geen animatie die moet worden
   afgezwakt. */
#bh-stats h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bh-muted); margin: 1.125rem 0 0.5rem; }
.bh-stats-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; }
.bh-stats-head h3 { margin: 0; font-size: 1.0625rem; }
.bh-stats-head select { padding: 0.375rem 0.5rem; border-radius: 0.5rem; border: 1px solid var(--bh-line); background: var(--bh-bg); color: var(--bh-fg); font-size: 0.8125rem; }
.bh-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.625rem; margin-top: 0.625rem; }
.bh-stat { border: 1px solid var(--bh-line); border-radius: 0.5rem; padding: 0.75rem; background: var(--bh-bg); }
.bh-stat-value { font-size: 1.5rem; font-weight: 600; color: var(--bh-fg); line-height: 1.2; }
.bh-stat-label { font-size: 0.8125rem; color: var(--bh-fg); margin-top: 0.125rem; }
.bh-stat-note { font-size: 0.75rem; color: var(--bh-muted); }
.bh-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.bh-funnel-step { border: 1px solid var(--bh-line); border-radius: 0.5rem; padding: 0.5rem 0.75rem; background: var(--bh-bg); }
.bh-funnel-top { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.875rem; }
.bh-funnel-bar { height: 0.375rem; border-radius: 99px; background: var(--bh-line); margin-top: 0.375rem; overflow: hidden; }
.bh-funnel-bar i { display: block; height: 100%; background: var(--bh-accent); }
.bh-funnel-pct { display: block; font-size: 0.75rem; color: var(--bh-muted); margin-top: 0.25rem; }
.bh-spark { display: flex; align-items: flex-end; gap: 0.125rem; height: 3.5rem; }
.bh-spark-bar { flex: 1 1 auto; min-width: 0.1875rem; background: var(--bh-accent); opacity: 0.75; border-radius: 0.0625rem 0.0625rem 0 0; }
.bh-paths { list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; }
.bh-paths li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.25rem 0; border-bottom: 1px solid var(--bh-line); }
.bh-paths li:last-child { border-bottom: 0; }
.bh-paths .bh-path { overflow-wrap: anywhere; }
#bh-report-month { padding: 0.5rem 0.625rem; border-radius: 0.5rem; border: 1px solid var(--bh-line); background: var(--bh-bg); color: var(--bh-fg); }
.bh-report-pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8125rem; line-height: 1.5; max-height: 60vh; overflow-y: auto; }
/* Accounts van het klantportaal (golf 10, ronde 10) en de koppeldialoog.
   Zelfde bezet: de :root-variabelen hierboven, één schaal in rem, geen
   animatie. Lange e-mailadressen breken met overflow-wrap: anywhere (de
   CLAUDE.md-les: break-word telt niet mee in de min-content-breedte). */
.bh-acc { margin: 1.125rem 0; }
/* De kop van de koppeldialoog draagt het adres van het account of de
   aanvraag: zonder `anywhere` was hij bij een lang adres 446px breed op een
   dialoog van 304px (fixronde ronde 10, weerlegger MEDIUM). */
.bh-acc h2, #bh-link h2 { font-size: 1.0625rem; margin: 0 0 0.375rem; overflow-wrap: anywhere; }
.bh-acc h2:focus { outline: none; }
.bh-acc-form { display: flex; flex-wrap: wrap; gap: 0.625rem 0.75rem; align-items: flex-end; margin: 0.25rem 0 0; }
.bh-field { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 12rem; min-width: 0; }
.bh-field label { font-size: 0.8125rem; color: var(--bh-muted); }
.bh-field input, .bh-field select, #bh-link-q {
  width: 100%; min-width: 0; padding: 0.5625rem 0.75rem; border-radius: 0.5rem; border: 1px solid var(--bh-line);
  background: var(--bh-bg); color: var(--bh-fg); font-size: 0.9375rem;
}
/* De verzendknop mag krimpen en afbreken: zijn tekst is langer dan een
   telefoonkaart breed is (gemeten op 390px liep hij over de kaartrand). */
.bh-acc-submit { margin: 0; flex: 0 1 auto; min-width: 0; }
.bh-acc-submit .bh-btn { max-width: 100%; }
.bh-msg-ok { color: var(--bh-ok); }
/* De meldregel boven de tabel (#bh-lead-msg, fixronde): leeg neemt hij geen
   ruimte in, maar hij blijft in de DOM — een live-regio die pas bij een
   melding verschijnt, wordt niet betrouwbaar voorgelezen. */
#bh-lead-msg { min-height: 0; margin: 0 0 0.75rem; }
#bh-lead-msg:empty { margin: 0; }
.bh-msg-info { color: var(--bh-muted); }
.bh-dim { color: var(--bh-muted); font-size: 0.8125rem; }
/* De accountlijst: per account drie blokken die naast elkaar passen op een
   breed scherm en vanzelf onder elkaar vallen op een smal scherm (flex-wrap,
   geen breekpunt nodig). */
.bh-acc-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--bh-line); border-radius: 0.625rem; background: var(--bh-surface); }
.bh-acc-list:empty { display: none; }
.bh-acc-row { display: flex; flex-wrap: wrap; gap: 0.625rem 1.25rem; align-items: flex-start; padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--bh-line); }
.bh-acc-row:last-child { border-bottom: 0; }
.bh-acc-wie { flex: 1 1 14rem; min-width: 0; }
.bh-acc-wie > div { overflow-wrap: anywhere; }
.bh-acc-email { font-weight: 600; }
.bh-acc-wie .bh-chip { margin-top: 0.25rem; }
.bh-acc-meta { flex: 1 1 15rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.125rem 0.75rem; margin: 0; font-size: 0.8125rem; }
.bh-acc-meta dt { color: var(--bh-muted); }
.bh-acc-meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.bh-acc-acts { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; }
.bh-acc-row > .bh-acc-acts { flex: 1 1 16rem; justify-content: flex-end; }
.bh-btn-sm { padding: 0.375rem 0.625rem; font-size: 0.8125rem; }
.bh-btn[aria-busy='true'] { opacity: 0.65; cursor: progress; }
.bh-acc-tz { margin: 0.5rem 0 0; }
.bh-acc-confirm { border: 1px solid var(--bh-danger); border-radius: 0.5rem; padding: 0.75rem 0.875rem; background: var(--bh-bg); }
.bh-acc-row > .bh-acc-confirm { flex: 1 1 100%; }
.bh-acc-confirm p { margin: 0 0 0.5rem; }
.bh-acc-confirm p:last-child { margin: 0; }
#bh-acc-confirm-who { overflow-wrap: anywhere; }
#bh-link { max-width: 42rem; }
#bh-link .bh-toolbar { margin: 0.5rem 0; }
.bh-link-list { list-style: none; margin: 0.5rem 0; padding: 0; max-height: 50vh; overflow-y: auto; border: 1px solid var(--bh-line); border-radius: 0.5rem; }
.bh-link-list:empty { display: none; }
.bh-link-list li { border-bottom: 1px solid var(--bh-line); }
.bh-link-list li:last-child { border-bottom: 0; }
.bh-link-list label { display: flex; flex-wrap: wrap; gap: 0.25rem 0.625rem; align-items: baseline; padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.875rem; }
.bh-link-list input { margin: 0; flex: 0 0 auto; accent-color: var(--bh-accent); }
.bh-link-tekst { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.bh-link-warn { flex: 1 1 100%; font-size: 0.75rem; color: var(--bh-accent); padding-left: 1.5rem; overflow-wrap: anywhere; }
.bh-link-gone .bh-link-tekst { color: var(--bh-muted); }
/* RONDE 11 (FB-media): het kijkvak voor één feedbackbijlage (#bh-kijk).
   Zelfde bezet: de :root-variabelen, één schaal in rem, geen animatie. Het
   beeld schaalt mee tot de kaartbreedte en hooguit 70vh hoog, zodat een
   staande telefoonopname niet de hele pagina vult; de bestandsnaam (dag plus
   uuid) breekt met `anywhere` (de CLAUDE.md-les: break-word telt niet mee in
   de min-content-breedte). */
#bh-kijk { max-width: 52rem; margin: 4vh auto 0; }
#bh-kijk h2 { font-size: 1.0625rem; margin: 0 0 0.375rem; overflow-wrap: anywhere; }
#bh-kijk h2:focus, #bh-login-t:focus { outline: none; }
.bh-kijk-naam { overflow-wrap: anywhere; font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; color: var(--bh-fg); }
.bh-kijk-media { margin: 0.75rem 0 0; }
.bh-kijk-media:empty { display: none; }
.bh-kijk-media video, .bh-kijk-media img {
  display: block; max-width: 100%; max-height: 70vh; margin: 0 auto;
  border: 1px solid var(--bh-line); border-radius: 0.5rem; background: var(--bh-bg);
}
.bh-kijk-media video { width: 100%; }
.bh-kijk-media img { height: auto; }
.bh-kijk-media audio { display: block; width: 100%; }
/* De twee knoppen van het kijkvak: een <a download> en een <button>. Zonder
   deze regel erft de link de regelhoogte van body (1.5) en de knop die van de
   browser, en stonden ze op 320px bij een 20px-basis 51 tegen 46px hoog naast
   elkaar (gemeten). Een kijklink komt uit een mail en wordt dus vaak op een
   telefoon geopend: beide minstens 2.75rem (44px) hoog, gelijk uitgelijnd. */
.bh-kijk-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; }
.bh-kijk-acts .bh-btn {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-family: inherit; line-height: 1.25; overflow-wrap: anywhere;
}
/* RELEASE B (L0-beheer-split): de live-regio van ctx.meld() is alleen voor
   schermlezers; het scherm van een module (#bh-scherm) krijgt de kopstijl
   van de kaarten en Instellingen een rij tabbladen. Zelfde bezet: de
   :root-variabelen, één schaal in rem, geen animatie. */
.bh-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#bh-scherm { margin: 1.125rem 0 0; }
#bh-scherm h2 { font-size: 1.0625rem; margin: 0 0 0.375rem; overflow-wrap: anywhere; }
#bh-scherm h2:focus { outline: none; }
.bh-tabs ul { display: flex; flex-wrap: wrap; gap: 0.375rem; list-style: none; margin: 0.75rem 0 1rem; padding: 0; }
.bh-tabs a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 0.875rem;
  border: 1px solid var(--bh-line); border-radius: 0.5rem; color: var(--bh-fg); text-decoration: none;
}
.bh-tabs a:hover { border-color: var(--bh-accent); }
.bh-tabs a[aria-current='page'] { border-color: var(--bh-accent); font-weight: 600; }
/* RELEASE B (lane I-beheer, SPEC §4.0, R3 §3a/§3c/§10): de schil na het
   inloggen — skiplink, kop, versiebalk, de navigatie "Beheer" en de drie
   basisschermen. Zelfde bezet: de :root-variabelen, één schaal in rem, geen
   animatie. De breekpunten (hieronder, onderaan dit bestand):
     onder 80rem  één kolom; de navigatie staat achter de knop Menu (een
                  disclosure met aria-expanded) en klapt uit boven de inhoud;
     vanaf 80rem  de navigatie als zijbalk van 13rem naast de inhoud.
   WAAROM 80rem EN NIET 48rem. De schermen van de U-lanes (mail, agenda,
   sequences) delen hun vlakken op VIEWPORTbreedte (bh-mail.css: twee vlakken
   vanaf 48rem, drie vanaf 80rem) en zijn gemeten met de volle breedte voor de
   inhoud. Een zijbalk vanaf 48rem liet op 768px nog ±32rem over voor twee
   mailvlakken; vanaf 80rem houdt de inhoud ±63rem, genoeg voor de drie. */
.bh-skip {
  position: absolute; left: 1rem; top: -10rem; z-index: 10;
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 1rem;
  background: var(--bh-accent); color: var(--bh-accent-ink); font-weight: 600; border-radius: 0.5rem; text-decoration: none;
}
.bh-skip:focus { top: 0.75rem; outline: 2px solid var(--bh-fg); outline-offset: 2px; }
.bh-kop { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; margin: 0.75rem 0 1rem; }
.bh-kop .bh-btn, .bh-versie .bh-btn { min-height: 2.75rem; }
.bh-versie {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.875rem; align-items: center; justify-content: space-between;
  margin: 0 0 1rem; padding: 0.625rem 0.875rem; border: 1px solid var(--bh-accent); border-radius: 0.625rem; background: var(--bh-surface);
}
.bh-versie-tekst { margin: 0; overflow-wrap: anywhere; }
.bh-indeling { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 1.5rem; align-items: start; }
.bh-nav { display: none; }
.bh-nav[data-open] { display: block; }
.bh-nav ul { list-style: none; margin: 0; padding: 0; }
.bh-nav-lijst { border: 1px solid var(--bh-line); border-radius: 0.625rem; background: var(--bh-surface); padding: 0.375rem; }
.bh-nav a, .bh-nav-knop {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 2.75rem; padding: 0.5rem 0.75rem;
  border: 1px solid transparent; border-radius: 0.5rem; background: transparent; color: var(--bh-fg);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer; overflow-wrap: anywhere;
}
.bh-nav a:hover, .bh-nav-knop:hover { border-color: var(--bh-line); }
/* Actief is nooit alleen kleur (R3 §10): een rand links, vet, en aria-current voor hulptechnologie. */
.bh-nav a[aria-current='page'] { border-color: var(--bh-accent); border-left-width: 0.25rem; font-weight: 600; }
.bh-nav-knop::after { content: ''; margin-left: auto; border: solid var(--bh-muted); border-width: 0 0.125rem 0.125rem 0; padding: 0.1875rem; transform: rotate(45deg); }
.bh-nav-knop[aria-expanded='true']::after { transform: rotate(-135deg); }
.bh-nav-sub { padding-left: 0.75rem; }
.bh-nav-regel { padding: 0.375rem 0.75rem; font-size: 0.8125rem; color: var(--bh-muted); overflow-wrap: anywhere; }
.bh-nav-tekst { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.bh-nav-adres { display: block; min-width: 0; overflow-wrap: anywhere; }
.bh-nav-noot { display: block; font-size: 0.75rem; color: var(--bh-muted); }
.bh-nav a .bh-nav-teller { margin-left: auto; flex: 0 0 auto; font-size: 0.75rem; color: var(--bh-fg); }
.bh-nav-kopje { margin-top: 0.375rem; padding-top: 0.375rem; border-top: 1px solid var(--bh-line); }
.bh-nav-kopje a { font-weight: 600; }
.bh-inhoud { min-width: 0; }
.bh-inhoud:focus { outline: none; }
.bh-basisscherm > h2 { font-size: 1.25rem; margin: 0 0 0.75rem; }
.bh-basisscherm > h2:focus { outline: none; }
.bh-basisscherm > .bh-card + .bh-card { margin-top: 1.125rem; }
.bh-rapport h3 { font-size: 1.0625rem; margin: 0 0 0.375rem; }
/* De Mail-tegel (SPEC §4.3): per adres één regel die als geheel een link naar
   dat postvak is, met het aantal ongelezen als tekst (nooit alleen vet). */
.bh-tegel h3 { font-size: 1.0625rem; margin: 0 0 0.5rem; }
.bh-tegel-lijst { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.375rem; }
.bh-tegel-lijst:empty { display: none; }
.bh-tegel-lijst a, .bh-tegel-lijst .bh-tegel-rij {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; min-height: 2.75rem; padding: 0.5rem 0.75rem;
  border: 1px solid var(--bh-line); border-radius: 0.5rem; background: var(--bh-bg); color: var(--bh-fg); text-decoration: none;
}
.bh-tegel-lijst a:hover { border-color: var(--bh-accent); }
.bh-tegel-adres { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.bh-tegel-teller { font-size: 0.8125rem; color: var(--bh-muted); }
/* GEDEELD DOOR ELK SCHERM (release B, lane I-beheer; gemeten met de ingelogde
   pas, tests/e2e/beheer-ingelogd.mjs): een vinkje of keuzerondje van de
   browser is 13-18px, onder de 24px van WCAG 2.5.8 — in de maillijst, de
   afzenderkeuze, de sequences en de instellingen. Hier de ondergrens voor het
   hele beheer; :where() houdt de specificiteit laag, zodat een scherm dat zelf
   een maat kiest (bh-agenda.css) die houdt. */
:where(#bh-app, dialog) input:is([type='checkbox'], [type='radio']) { min-width: 1.5rem; min-height: 1.5rem; }
@media (max-width: 30rem) {
  /* Release B (lane I-beheer, gemeten met de ingelogde pas op 320px bij een
     20px-basis): de kolom met labels ("Gekoppelde aanvragen") nam de hele
     rij, de datum ernaast kreeg 5px en liep 10px buiten het venster. Op een
     smal scherm staat het label daarom boven de waarde. */
  .bh-acc-meta { grid-template-columns: minmax(0, 1fr); }
  .bh-acc-meta dd { margin-bottom: 0.25rem; }
}
@media (max-width: 45rem) {
  th.bh-hide-sm, td.bh-hide-sm { display: none; }
  .bh-dl { grid-template-columns: 6.875rem minmax(0, 1fr); }
}
@media (max-width: 48rem) {
  /* Tapdoelen op een telefoon (R3 §10): elke knop, keuzelijst en zoekveld van
     de basisschermen en hun vensters minstens 2.75rem (44px) hoog. De kop,
     de versiebalk en de navigatie hebben dat al op elke breedte (hierboven);
     de schermen van de U-lanes regelen het in hun eigen stijl. */
  #bh-basis .bh-btn, #bh-detail .bh-btn, #bh-confirm .bh-btn, #bh-report .bh-btn, #bh-link .bh-btn, .bh-menu button,
  #bh-basis .bh-toolbar select, #bh-basis .bh-toolbar input, #bh-basis .bh-stats-head select,
  #bh-basis .bh-field input, #bh-basis .bh-field select, #bh-link-q {
    min-height: 2.75rem;
  }
  #bh-basis .bh-btn, #bh-detail .bh-btn, #bh-confirm .bh-btn, #bh-report .bh-btn, #bh-link .bh-btn { display: inline-flex; align-items: center; }
  /* Een bestandskeuze (het logo bij Handtekeningen) is een knop: ook 44px. */
  :where(#bh-app, dialog) input[type='file'] { min-height: 2.75rem; }
}
@media (min-width: 80rem) {
  .bh-indeling { grid-template-columns: 13rem minmax(0, 1fr); }
  .bh-nav { display: block; }
  .bh-menu-knop { display: none; }
  .bh-kop { justify-content: flex-end; }
}