:root {
  --app-bg:#E9EEEB; --panel:#fff; --panel-2:#F3F6F4; --sidebar:#17231F; --sidebar-ink:#C8D5CF;
  --ink:#16211E; --ink-soft:#4E5F5A; --ink-faint:#7C8D87; --rule:#D6DEDA; --rule-hard:#B6C2BC;
  --accent:#0F6E5E; --accent-soft:#DDEDE7; --on-accent:#fff;
  --amber:#8E5C0C; --amber-soft:#F7EAD3; --critical:#9C3025; --critical-soft:#F7E2DE;
  --ui:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark) { :root {
  --app-bg:#0D1312; --panel:#141C1A; --panel-2:#1A2422; --sidebar:#0A100F; --sidebar-ink:#9FB2AB;
  --ink:#E3EAE7; --ink-soft:#A6B5B0; --ink-faint:#7C8D87; --rule:#24302D; --rule-hard:#35433F;
  --accent:#57C5AD; --accent-soft:#122C27; --on-accent:#06110F;
  --amber:#DFA742; --amber-soft:#2B2415; --critical:#E37B6B; --critical-soft:#2F1C19;
} }
* { box-sizing:border-box; }
body { margin:0; background:var(--app-bg); color:var(--ink); font:14px/1.55 var(--ui); }
::selection { background:var(--accent-soft); }
a { color:var(--accent); }
.app { display:grid; grid-template-columns:208px minmax(0,1fr); min-height:100vh; }
/* Op een telefoon staat de rail bovenaan. Het menu breekt af in plaats van zijwaarts te
   schuiven — een schuifbalk zonder rand verbergt de helft van de app — en de voet eronder
   wordt één regel, want anders begint elke pagina met honderdvijftig pixels chroom. */
@media (max-width:760px) {
  .app { grid-template-columns:minmax(0,1fr); }
  .rail { gap:.6rem; padding:.6rem 0; position:static; height:auto; max-height:none;
    overflow:visible; }
  .rail nav { flex-direction:row; flex-wrap:wrap; gap:.15rem; padding:0 .6rem; }
  .rail nav a { padding:.35rem .6rem; border-left:0; border-bottom:2px solid transparent; }
  .rail nav a[aria-current=page] { border-left:0; border-bottom-color:var(--accent); }
  .railfoot { margin-top:0; padding:.5rem .9rem 0; display:flex; flex-wrap:wrap;
    align-items:center; gap:.5rem .9rem; }
  .railfoot br { display:none; }
  .railfoot form { margin-left:auto; }
  .railfoot .btn { margin-top:0 !important; }
  .topbar { padding:.6rem .9rem; }
  .zoekveld { flex:1 1 100%; }
  .zoekveld input { width:100%; }
  .screen { padding:1rem .9rem 2rem; }
}
/* De belofte is een zin om trots op te zijn, maar niet ten koste van het zoekveld. */
@media (max-width:520px) { .belofte { display:none; } }
/* Vingers zijn geen muizen: alles wat aangeraakt wordt, krijgt een doel van veertig pixels,
   en velden krijgen zestien punten — kleiner en iOS zoomt in zonder terug te zoomen. */
@media (pointer: coarse) {
  .btn { min-height:40px; padding:.5rem .9rem; display:inline-flex; align-items:center; }
  .kaderknoppen .btn { min-width:44px; justify-content:center; font-size:16px; }
  .veld input, .veld select, .veld textarea,
  .aanmeldkaart input:not([type=checkbox]), .zoekveld input { font-size:16px; }
}
/* De rail blijft staan waar hij staat: op een lange lijst hoorde je naar beneden te
   scrollen om bij Afmelden of Van school wisselen te raken. Wordt het menu zelf te hoog
   voor het scherm, dan schuift alleen de rail mee. */
.rail { background:var(--sidebar); color:var(--sidebar-ink); display:flex; flex-direction:column;
  gap:1.2rem; padding:1rem 0; position:sticky; top:0; align-self:start; height:100vh;
  max-height:100vh; overflow-y:auto; }
.wordmark { font-weight:700; font-size:1.2rem; color:#F2F7F4; padding:0 1rem; display:flex;
  align-items:center; gap:.5rem; text-decoration:none; }
.wordmark:hover { color:#fff; }
.wordmark svg { flex:0 0 auto; }
.rail nav { display:flex; flex-direction:column; }
.rail nav a { color:var(--sidebar-ink); text-decoration:none; padding:.5rem 1rem; border-left:2px solid transparent; white-space:nowrap; }
.rail nav a:hover { background:rgba(255,255,255,.05); color:#fff; }
.rail nav a[aria-current=page] { background:rgba(255,255,255,.07); border-left-color:var(--accent); color:#fff; font-weight:600; }
.railfoot { margin-top:auto; padding:1rem 1rem 0; margin-top:auto; border-top:1px solid rgba(255,255,255,.08);
  font:11px/1.6 var(--mono); color:#8AA096; }
.railfoot a { color:#9FB2AB; }
.work { min-width:0; background:var(--panel); }
.topbar { display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; padding:.7rem 1.1rem; background:var(--panel-2); border-bottom:1px solid var(--rule); }
.topbar .spacer { flex:1 1 auto; }
.belofte { color:var(--ink-faint); font-size:12px; display:flex; align-items:center; gap:.4rem; }
.belofte::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.screen { padding:1.3rem 1.3rem 2.4rem; max-width:1100px; }
h1 { font-size:1.35rem; letter-spacing:-.01em; margin:0 0 .25rem; }
h2 { font-size:1.05rem; margin:1.8rem 0 .5rem; }
.sub { color:var(--ink-soft); margin:0 0 1.3rem; max-width:66ch; }
.chip { font:11px var(--mono); letter-spacing:.06em; padding:.18em .5em; border:1px solid currentColor; white-space:nowrap; display:inline-block; max-width:100%; }
/* Een chip die een foutmelding draagt is een zin, geen etiket: die hoort af te breken in
   plaats van de tabel of het vakje uit te rekken. */
.chip.tekst { white-space:normal; overflow-wrap:anywhere; text-align:left; }
.afbreek { overflow-wrap:anywhere; }
/* Een tabel met lange teksten mag zelf breken in plaats van de pagina te verbreden. */
td { overflow-wrap:anywhere; }
.chip.ok { color:var(--accent); background:var(--accent-soft); }
.chip.warn { color:var(--amber); background:var(--amber-soft); }
.chip.bad { color:var(--critical); background:var(--critical-soft); }
.chip.mute { color:var(--ink-faint); background:var(--panel-2); }
/* Een etiket dat tegelijk de knop is: het toont de toestand en verandert ze. */
button.chip.schakel { cursor:pointer; font:11px var(--mono); letter-spacing:.06em; }
button.chip.schakel:hover { filter:brightness(.96); box-shadow:inset 0 0 0 1px currentColor; }
button.chip.schakel:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.btn { font:500 13px var(--ui); padding:.42rem .85rem; border:1px solid var(--rule-hard); background:var(--panel); color:var(--ink); cursor:pointer; text-decoration:none; display:inline-block; }
.btn:hover { border-color:var(--accent); color:var(--accent); }
.btn:active { transform:translateY(1px); }
@media (prefers-reduced-motion: reduce) { .btn:active { transform:none; } }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.panel { border:1px solid var(--rule); background:var(--panel); margin-bottom:1.3rem; }
.panel > h3 { margin:0; padding:.55rem .9rem; font:600 12px/1.4 var(--ui); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); background:var(--panel-2); border-bottom:1px solid var(--rule); }
.pad { padding:.85rem .9rem; }
/* Formulieren. Elk veld is label boven invoer; rooster zet ze naast elkaar zolang het past. */
.rooster { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.75rem 1rem; }
.rij { display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:flex-end; }
.rij .veld { flex:1 1 210px; }
.veld { display:flex; flex-direction:column; gap:.25rem; min-width:0; }
.veld > span { font:500 11px var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); }
.veld input, .veld select, .veld textarea { width:100%; padding:.45rem .55rem;
  border:1px solid var(--rule-hard); background:var(--panel); color:var(--ink); font:14px var(--ui); }
.veld input::placeholder { color:var(--ink-faint); }
.veld .hint { font-size:12px; color:var(--ink-faint); }
.btn.primair { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn.primair:hover { filter:brightness(1.06); }
.split { display:grid; grid-template-columns:250px minmax(0,1fr); gap:1.1rem; align-items:start; }
@media (max-width:860px) { .split { grid-template-columns:minmax(0,1fr); } }
.scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
/* Bovenaan uitlijnen: een cel die over drie regels loopt mag de korte cel ernaast niet
   naar het midden duwen — dan lijkt de rij scheef. */
th,td { text-align:left; padding:.5rem .8rem .5rem 0; border-bottom:1px solid var(--rule); vertical-align:top; }
th { font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); padding-top:.7rem; }
h1 + .scroll th, h2 + .scroll th, p + .scroll th { padding-top:0; }
tbody tr:last-child td { border-bottom:0; }
td:first-child, th:first-child { padding-left:.9rem; }
td:last-child, th:last-child { padding-right:.9rem; }
td.mono, .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
td.naam { white-space:nowrap; font-weight:500; }
.verborgen { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.voetnoot { color:var(--ink-faint); font-size:12px; padding:.5rem .9rem; border-top:1px solid var(--rule); }
tbody tr:hover { background:var(--panel-2); }
th .sorteer { color:inherit; text-decoration:none; white-space:nowrap; }
th .sorteer:hover { color:var(--accent); }
th .sorteer.aan { color:var(--accent); }
.klaslijst { display:flex; flex-direction:column; }
.klaslijst a { padding:.45rem .8rem; border-bottom:1px solid var(--rule); text-decoration:none; color:var(--ink); display:flex; justify-content:space-between; gap:.5rem; }
.klaslijst a:hover { background:var(--panel-2); }
.klaslijst a[aria-current=page] { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.actionbar { display:flex; flex-wrap:wrap; gap:.6rem .9rem; align-items:center; padding:.7rem .9rem; background:var(--panel-2); border-top:1px solid var(--rule-hard); }
.actionbar .spacer { flex:1 1 auto; }
.actionbar.omrand { border:1px solid var(--rule-hard); }
.meekijkband { display:flex; gap:.9rem; align-items:center; flex-wrap:wrap; padding:.55rem 1.2rem;
  background:var(--amber-soft); color:var(--amber); border-bottom:1px solid var(--rule-hard); font-size:13px; }
.meekijkband b { color:var(--ink); }
.meekijkband form { margin-left:auto; }
.onthoud { display:flex; gap:.55rem; align-items:flex-start; margin:.9rem 0; font-size:13px;
  color:var(--ink-soft); font-weight:400; cursor:pointer; }
.onthoud input { flex:0 0 auto; width:auto; margin:.2rem 0 0; }
.schoolkeuze { width:100%; text-align:left; display:flex; align-items:center; gap:.7rem;
  margin-bottom:.5rem; padding:.55rem .7rem; }
.schoolkeuze .wie { display:flex; flex-direction:column; gap:.05rem; min-width:0; }
.schoolkeuze .wie span { font-size:12px; color:var(--ink-faint); }
.schoolkeuze .wapen { flex:0 0 auto; width:2.2rem; height:2.2rem; display:flex; align-items:center;
  justify-content:center; background:var(--panel-2); border:1px solid var(--rule); overflow:hidden; }
.schoolkeuze .wapen img { max-width:100%; max-height:100%; }
.schoolkeuze .wapen .letter { font:600 1rem var(--ui); color:var(--ink-faint); }
.keuzelijst { max-width:26rem; }
.afdrukblad { border:1px solid var(--rule-hard); background:var(--panel-2); height:70vh; min-height:22rem; }
/* Een telefoon toont een PDF in een frame meestal niet; een leeg vlak van zeventig procent
   van het scherm is erger dan geen vlak. De knop eronder blijft. */
@media (hover: none) and (max-width:760px) { .afdrukblad { display:none; } }
.afdrukblad iframe { width:100%; height:100%; display:block; border:0; }
.persoonsfoto { display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap; }
.persoonsfoto img { border:1px solid var(--rule-hard); background:var(--panel-2); }
.persoonsfoto > div { flex:1 1 260px; min-width:0; }
.logdetails { margin-top:.25rem; }
.logdetails summary { cursor:pointer; color:var(--ink-faint); font-size:12px; }
.logdetails summary:hover { color:var(--accent); }
.logdetails b { display:block; margin-top:.4rem; font-size:12px; }
.logdetails ul { margin:.2rem 0 0; padding-left:1.1rem; color:var(--ink-soft); font-size:12px; }
/* Toast: komt onderaan rechts binnen, gaat vanzelf weg, en blijft staan als iemand geen
   beweging wil of geen JavaScript heeft. */
.toasts { position:fixed; right:1rem; bottom:1rem; z-index:50; display:flex;
  flex-direction:column; gap:.5rem; max-width:min(28rem, 90vw); }
.toast { display:flex; gap:.6rem; align-items:flex-start; background:var(--panel);
  border:1px solid var(--rule-hard); border-left:3px solid var(--accent);
  box-shadow:0 8px 24px rgba(0,0,0,.16); padding:.7rem .8rem; font-size:13px;
  animation:toastin .25s ease-out; }
.toast.fout { border-left-color:var(--critical); }
.toast.let-op { border-left-color:var(--amber); }
.toast.weg { animation:toastuit .3s ease-in forwards; }
.toastweg { border:0; background:none; color:var(--ink-faint); font-size:16px; line-height:1;
  cursor:pointer; padding:0 .1rem; }
.toastweg:hover { color:var(--ink); }
@keyframes toastin { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes toastuit { to { opacity:0; transform:translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .toast { animation:none; }
  .toast.weg { animation:none; }
}
.voet { padding:1rem 1.2rem 1.4rem; color:var(--ink-faint); font-size:12px; text-align:center; }
.voet a { color:var(--ink-faint); text-decoration:underline; }
.voet a:hover { color:var(--accent); }
.work .voet { text-align:left; border-top:1px solid var(--rule); margin-top:auto; }
.zoekveld { position:relative; display:flex; gap:.4rem; align-items:center; }
.zoekveld input { padding:.3rem .5rem; border:1px solid var(--rule-hard); background:var(--panel);
  color:var(--ink); font:13px var(--ui); width:16rem; }
.zoeklijst { position:absolute; top:calc(100% + .25rem); left:0; width:24rem; max-width:80vw;
  margin:0; padding:0; list-style:none; background:var(--panel); border:1px solid var(--rule-hard);
  box-shadow:0 6px 20px rgba(0,0,0,.12); z-index:20; max-height:60vh; overflow-y:auto; }
.zoeklijst li { border-bottom:1px solid var(--rule); }
.zoeklijst li:last-child { border-bottom:0; }
.zoeklijst a { display:flex; gap:.5rem; align-items:baseline; padding:.45rem .6rem;
  text-decoration:none; color:var(--ink); font-size:13px; }
.zoeklijst a small { color:var(--ink-faint); font-family:var(--mono); font-size:11px; }
.zoeklijst a .soort { color:var(--ink-faint); font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; margin-left:auto; }
.zoeklijst li[aria-selected=true] a, .zoeklijst a:hover { background:var(--accent-soft); color:var(--accent); }
.voortgangsbalk { height:10px; background:var(--panel-2); border:1px solid var(--rule); overflow:hidden; }
.voortgangsbalk .vul { height:100%; background:var(--accent); transition:width .3s ease; }
.voortgangstekst { margin:.5rem 0 .7rem; color:var(--ink-soft); }
.voortgangstekst b { color:var(--ink); font-variant-numeric:tabular-nums; }
/* Wat er te doen is: één regel per ding, met de knop ernaast die het doet. */
.takenlijst { list-style:none; margin:0 0 1.1rem; padding:0; display:flex; flex-direction:column;
  gap:.5rem; max-width:70ch; }
.taak { display:flex; gap:1rem; align-items:center; justify-content:space-between;
  border:1px solid var(--rule); border-left:3px solid var(--accent); background:var(--panel);
  padding:.7rem .9rem; }
.taak.let-op { border-left-color:var(--amber); }
.taak b { display:block; font-size:14px; }
.taak span { color:var(--ink-soft); font-size:12.5px; }
.taak .btn { flex:0 0 auto; }
/* Het spoor van een weg met vaste stappen: gedaan, bezig, komt nog. */
.stappen { list-style:none; display:flex; flex-wrap:wrap; gap:.2rem 1.4rem; margin:0 0 1rem;
  padding:0; font-size:12.5px; color:var(--ink-faint); }
.stappen li { display:flex; align-items:center; gap:.4rem; position:relative; }
.stappen li + li::before { content:"→"; position:absolute; left:-1rem; color:var(--rule-hard); }
.stappen .bol { width:1.1rem; height:1.1rem; border:1px solid var(--rule-hard); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:10px; }
.stappen li.done { color:var(--ink-soft); }
.stappen li.done .bol { border-color:var(--accent); color:var(--accent); }
.stappen li.now { color:var(--ink); font-weight:600; }
.stappen li.now .bol { border-color:var(--accent); background:var(--accent); }
/* Beweging alleen waar ze iets zegt: de balk die vult, de regel die bezig is, en een
   nieuwe regel die even oplicht zodat je ziet wat erbij kwam. */
.bezig { position:relative; }
.bezig::after { content:""; display:inline-block; width:.45em; height:.45em; margin-left:.5em;
  border-radius:50%; background:var(--accent); animation:pols 1.4s ease-in-out infinite; }
@keyframes pols { 0%, 100% { opacity:.25; } 50% { opacity:1; } }
tr.vers td { animation:oplichten 1.6s ease-out; }
/* De poging waar je nu naar kijkt, in de rij van alle pogingen. */
table.pogingen tr.hier td { background:var(--accent-soft); }
@keyframes oplichten { from { background:var(--accent-soft); } to { background:transparent; } }
@media (prefers-reduced-motion: reduce) {
  .voortgangsbalk .vul { transition:none; }
  .bezig::after { animation:none; opacity:1; }
  tr.vers td { animation:none; box-shadow:inset 3px 0 0 var(--accent); }
  * { scroll-behavior:auto; }
}
.passkeyblok { margin-top:.2rem; }
.passkeyblok .of { display:flex; align-items:center; gap:.6rem; color:var(--ink-faint);
  font-size:12px; margin:.9rem 0; }
.passkeyblok .of::before, .passkeyblok .of::after { content:""; flex:1 1 auto;
  border-top:1px solid var(--rule); }
.schoolkeuze[disabled] { opacity:.55; cursor:not-allowed; }
.weg-blijft { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.9rem;
  margin-top:.6rem; }
.weg-blijft ul { margin:.3rem 0 0; padding-left:1.1rem; color:var(--ink-soft); }
.weg-blijft li { margin-bottom:.15rem; }
.btn.gevaar { border-color:var(--critical); color:var(--critical); background:var(--critical-soft); }
.onthoud small { color:var(--ink-faint); }
/* Foto's doorlopen: één beeld groot, de keuzes ernaast, en de weg vooruit onderaan. */
.doorloop { max-width:52rem; }
.doorloop header { display:flex; gap:1rem; align-items:flex-start; justify-content:space-between;
  margin-bottom:.7rem; }
.doorloop h1 { margin:0; }
.doorloop header .sub { margin:.1rem 0 0; }
.doorloopbalk { display:flex; gap:.7rem; align-items:center; margin-bottom:.9rem; }
.doorloopbalk .voortgangsbalk { flex:1 1 auto; }
.doorloopbalk span { font-size:12px; color:var(--ink-faint); white-space:nowrap; }
.doorloopvak { display:grid; grid-template-columns:240px minmax(0,1fr); gap:1.4rem;
  border:1px solid var(--rule-hard); background:var(--panel); padding:1.1rem; }
@media (max-width:760px) { .doorloopvak { grid-template-columns:minmax(0,1fr); } }
.doorloopvak figure { margin:0; }
.doorloopvak img { width:100%; height:auto; display:block; border:1px solid var(--rule-hard);
  background:var(--panel-2); }
/* Onder de foto: zeven kleine knoppen die het kader verschuiven. Klein, want ze horen bij
   het beeld, niet bij de keuze wie erop staat. */
.plaatshouders { margin:.4rem 0 .6rem; padding-left:1.1rem; font-size:13px; color:var(--ink-soft); }
.plaatshouders code { font:12.5px var(--mono); background:var(--panel-2); padding:.05rem .3rem;
  border:1px solid var(--rule); }
/* Het voorbeeld: zoals het op papier komt, met de koppen dik en de regels los. */
.uitlegblok { border-left:2px solid var(--rule-hard); padding:.1rem 0 .1rem .8rem; margin:0 0 1.1rem; }
.uitlegblok h4 { margin:0 0 .4rem; font:500 11px var(--mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); }
.uitlegblok b { display:block; margin:.5rem 0 .2rem; }
.uitlegblok p { margin:.1rem 0; font-size:13px; }
.kaderreden { margin:.7rem 0 0; font-size:12.5px; color:var(--ink-soft);
  border-left:2px solid var(--rule-hard); padding-left:.6rem; }
.kaderknoppen { display:flex; flex-direction:column; gap:.3rem; margin-top:.7rem; }
.kaderknoppen > span { font:11px var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); }
.kaderknoppen .knoppen { display:flex; flex-wrap:wrap; gap:.25rem; }
.kaderknoppen .btn { padding:.25rem .5rem; min-width:2rem; font-size:14px; line-height:1.1; }
.doorloopvak figcaption { display:flex; flex-direction:column; gap:.15rem; margin-top:.45rem;
  font-size:11.5px; color:var(--ink-faint); overflow-wrap:anywhere; }
.doorloopvak .keuzes { display:flex; flex-direction:column; }
.doorloopwie { display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; margin-bottom:.35rem; }
.doorloopwie b { font-size:19px; }
.doorloopwie .sub { margin:0; }
.doorloopvak .stand { font-size:15px; margin-bottom:.2rem; display:flex; gap:.35rem; flex-wrap:wrap; }
.doorloopvak .stand .chip { font-size:12.5px; padding:.3em .6em; }
.doorloopvak .keuzes .sub { margin:.35rem 0 .6rem; }
.kandidaten { display:flex; flex-direction:column; gap:.4rem; max-width:22rem; }
.kandidaten .schoolkeuze { margin:0; }
.doorloopvoet { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
  border:1px solid var(--rule-hard); border-top:0; background:var(--panel-2);
  padding:.7rem 1.1rem; }
.doorloopvoet .spacer { flex:1 1 auto; }
.kiesfoto { display:flex; gap:1.1rem; align-items:flex-start; flex-wrap:wrap; margin-bottom:1.1rem; }
.kiesfoto img { width:120px; border:1px solid var(--rule-hard); background:var(--panel-2); }
.kiesfoto > div { flex:1 1 320px; }
/* Cijfers: keuzebalk, tegels met vonklijn, en de verhoudingsbalk in de tabel. */
.balkje { display:flex; gap:.9rem; flex-wrap:wrap; align-items:center; padding:.7rem .9rem;
  background:var(--panel-2); border:1px solid var(--rule); border-bottom:0; }
.balkje .spacer { flex:1 1 auto; }
.knoppen { display:flex; gap:.35rem; flex-wrap:wrap; }
.knop { font:12px var(--ui); padding:.32rem .7rem; border:1px solid var(--rule-hard);
  background:var(--panel); color:var(--ink); text-decoration:none; display:inline-block; }
.knop.aan { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.tegels { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  border:1px solid var(--rule); background:var(--panel); margin-bottom:1.3rem; }
.tegel { padding:.85rem .9rem; border-right:1px solid var(--rule); color:var(--accent); }
.tegel:last-child { border-right:0; }
.tegel .kop { font:11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.tegel .cijfer { font:600 1.6rem/1.2 var(--ui); font-variant-numeric:tabular-nums;
  margin:.15rem 0 .1rem; color:var(--ink); }
.tegel .onder { font-size:12px; color:var(--ink-soft); }
.vonk { display:block; width:100%; height:34px; margin-top:.4rem; }
.balk { display:flex; align-items:center; gap:.5rem; min-width:80px; }
.balk .spoor { flex:1 1 auto; height:6px; background:var(--panel-2); border:1px solid var(--rule); }
.balk .vul { height:100%; background:var(--accent); }
td.getal, th.getal { text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; }
label.keuze { display:flex; align-items:center; gap:.4rem; font-size:13px; color:var(--ink-soft); }
fieldset { border:1px solid var(--rule); margin:0 0 .8rem; padding:.55rem .7rem .65rem; }
legend { font:11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); padding:0 .3rem; }
.tabs { display:flex; flex-wrap:wrap; gap:.3rem; margin:0 0 1.1rem; border-bottom:1px solid var(--rule-hard); }
.tabs .tab { padding:.4rem .8rem; text-decoration:none; color:var(--ink-soft); border:1px solid transparent;
  border-bottom:0; font-size:13px; }
.tabs .tab:hover { color:var(--accent); }
.tabs .tab.aan { background:var(--panel); border-color:var(--rule-hard); color:var(--ink); font-weight:600;
  margin-bottom:-1px; }
.melding { border-left:3px solid var(--accent); background:var(--accent-soft); padding:.75rem 1rem; margin:0 0 1.1rem; max-width:80ch; }
/* Volgt een melding op iets anders, dan hoort er ruimte boven: een inline formulier laat
   zijn eigen ondermarge vallen, en dan plakt de melding er tegenaan. */
form + .melding, .actionbar + .melding, table + .melding, .panel + .melding { margin-top:1.1rem; }
.melding ul { margin:.3rem 0 0; padding-left:1.1rem; }
.melding li { margin-bottom:.2rem; }
.melding.fout { border-left-color:var(--critical); background:var(--critical-soft); }
.melding.let-op { border-left-color:var(--amber); background:var(--amber-soft); }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border:1px solid var(--rule); margin-bottom:1.2rem; }
.tiles > div { padding:.75rem .9rem; border-right:1px solid var(--rule); }
.tiles > div:last-child { border-right:0; }
.tiles dt { font:11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.tiles dd { margin:0; font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums; }
.tiles dd small { display:block; font-size:.8rem; font-weight:400; color:var(--ink-soft); }
form.inline { display:inline; }
details.wie { border:1px solid var(--rule); margin:0 0 1rem; }
details.wie > summary { padding:.5rem .9rem; cursor:pointer; background:var(--panel-2); font-weight:500; }
details.wie > summary:hover { color:var(--accent); }
details.wie[open] > summary { border-bottom:1px solid var(--rule); }
details.wie table { font-size:12.5px; }
.filterbalk, .fotobalk { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.fotogrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.7rem; }
/* Een bestandsnaam van de fotograaf is soms één lang woord van tachtig tekens: die mag het
   vakje niet uitrekken en het raster niet meesleuren. */
.fotogrid > * { min-width:0; }
/* De lijst met afdrukken: per blad één beslissing, de rest eronder in het klein. */
.afdruklijst { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.2rem; }
.afdruk { border:1px solid var(--rule); border-left:3px solid var(--rule); background:var(--panel);
  padding:.7rem .9rem; display:flex; flex-direction:column; gap:.35rem; }
.afdruk.open { border-left-color:var(--amber); }
.afdruk.haast { border-left-color:var(--critical); }
.afdruk.vers { background:var(--accent-soft); border-color:var(--accent); }
.afdruk .kop { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.afdruk .kop b { font-size:15px; overflow-wrap:anywhere; }
.afdruk .regel { margin:0; font-size:12.5px; color:var(--ink-soft); }
.afdruk .voet { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
/* "Meer" is een gewoon menu zonder JavaScript: zeldzaam werk hoort niet in de eerste blik. */
.afdruk .meer { position:relative; }
.afdruk .meer > summary { cursor:pointer; font-size:12.5px; color:var(--ink-soft);
  list-style:none; padding:.2rem .5rem; border:1px solid var(--rule-hard); }
.afdruk .meer > summary::-webkit-details-marker { display:none; }
.afdruk .meer > summary:hover { color:var(--accent); border-color:var(--accent); }
.afdruk .meer[open] > summary { background:var(--panel-2); }
.afdruk .meer .menu { display:flex; flex-wrap:wrap; gap:.4rem; padding:.5rem 0 .1rem; }
.foto { border:1px solid var(--rule); padding:.5rem; display:grid; gap:.35rem; align-content:start;
  min-width:0; }
.foto img { width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--panel-2); border:1px solid var(--rule); }
/* Een foto die nog niemand heeft, staat er niet zomaar bij: rand en balkje in de kleur van
   het werk dat er nog ligt. Twijfel is oranje (er is een voorstel), leeg is rood (er is
   niets). Geen toestemming is rood én gestreept: die gaat nooit naar het platform. */
.foto.gekoppeld { border-color:var(--accent); box-shadow:inset 0 3px 0 var(--accent); }
/* Geplaatst is klaar: dezelfde kleur, maar zonder balkje — er hoeft niets meer te gebeuren. */
.foto.geplaatst { border-color:var(--accent); }
.foto.leeg { border-color:var(--critical); box-shadow:inset 0 3px 0 var(--critical); }
.foto.twijfel { border-color:var(--amber); box-shadow:inset 0 3px 0 var(--amber); }
.foto.geenfoto { border:1px dashed var(--critical); }
.foto.leeg img, .foto.twijfel img { opacity:.92; }
.foto b { font-size:13px; line-height:1.25; overflow-wrap:anywhere; }
.foto .chip { white-space:normal; overflow-wrap:anywhere; }
.foto .file { font:11px var(--mono); color:var(--ink-faint); overflow-wrap:anywhere; }
.foto .pick { display:flex; flex-wrap:wrap; gap:.3rem; }
.foto .btn { font-size:12px; padding:.2rem .45rem; }
input[type=file] { font:13px var(--ui); color:var(--ink); }
.dropzone { border:2px dashed var(--rule-hard); background:var(--panel-2); padding:1.4rem 1rem;
  display:grid; gap:.5rem; justify-items:center; text-align:center; margin-bottom:.8rem; }
.dropzone b { font-size:15px; }
/* Slepen bestaat niet op een aanraakscherm; de kop hoort te zeggen wat er wél kan. */
.dropzone .bijtikken { display:none; }
@media (hover: none) {
  .dropzone .bijslepen { display:none; }
  .dropzone .bijtikken { display:block; }
}
.dropzone span { color:var(--ink-soft); font-size:13px; }
.dropzone .of { font:11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.dropzone.aan { border-color:var(--accent); background:var(--accent-soft); }
.dropzone .gekozen { font:12px var(--mono); color:var(--accent); }
.dropzone label.btn { cursor:pointer; }
/* Een etiket dat filtert is een knop: hij mag oplichten, en de gekozen blijft ingedrukt. */
a.chip { text-decoration:none; }
a.chip:hover { border-color:currentColor; }
a.chip.gekozen { outline:2px solid var(--accent); outline-offset:1px; }
/* Wat er tijdens het inlezen gebeurt, onder de knop: zoeken, versturen, en hoever. */
.leveringstand { margin:.9rem 0 1.1rem; max-width:44rem; }
.leveringstand .voortgangstekst { margin:.4rem 0 0; }
details.wie th, details.wie td { padding-left:.9rem; }
/* Een doodlopend adres: het nummer klein en stil, de weg terug groot. */
.probleem { max-width:34rem; }
.probleem .code { font:500 12px var(--mono); letter-spacing:.18em; color:var(--ink-faint); }
.probleem h1 { margin:.2rem 0 .4rem; }
.probleem .sub { font-size:15px; margin:0 0 1rem; }
.probleem .adres { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem;
  border-left:2px solid var(--rule-hard); padding:.35rem 0 .35rem .7rem; margin:0 0 1rem; }
.probleem .adres span:first-child { font-size:12px; color:var(--ink-faint); }
.probleem .adres .mono { font-size:12.5px; overflow-wrap:anywhere; }
.probleem .redenen { margin:0 0 1.2rem; padding-left:1.1rem; color:var(--ink-soft); font-size:13.5px; }
.probleem .redenen li { margin:.2rem 0; }
.alleenkaart { max-width:34rem; margin:10vh auto; padding:0 1.2rem; }
.aanmeldkaart { max-width:23rem; margin:8vh auto; background:var(--panel); border:1px solid var(--rule-hard); padding:1.6rem; }
.aanmeldkaart h1 { margin-bottom:.35rem; display:flex; align-items:center; gap:.5rem; }
.aanmeldkaart h1 svg { flex:0 0 auto; }
.aanmeldkaart label { display:block; font-size:13px; color:var(--ink-soft); }
.aanmeldkaart input[type=checkbox] { width:auto; flex:0 0 auto; margin:.15rem .1rem 0 0; }
.aanmeldkaart input:not([type=checkbox]) { width:100%; padding:.45rem .55rem; border:1px solid var(--rule-hard); background:var(--panel); color:var(--ink); font:14px var(--ui); margin:.2rem 0 .8rem; }
/* De code is zes cijfers: cijfertoetsenbord, cijferbreedte, en ver genoeg uit elkaar om
   voor te lezen aan de telefoon. */
.aanmeldkaart input.codeveld { font:600 1.5rem/1.2 var(--mono); letter-spacing:.32em;
  text-align:center; padding:.55rem .3rem; text-indent:.32em; }
.aanmeldkaart input.codeveld::placeholder { letter-spacing:.32em; color:var(--ink-faint);
  font-weight:400; }
.aanmeldkaart .checkbox-onthoud { margin-bottom:.4rem; }
input:focus-visible, select:focus-visible, .btn:focus-visible, a:focus-visible, summary:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; }