/* ==========================================================================
   SEOS Platform — stylesheet "Leisteen"
   Voor administratie, registratie en regie: dossiers, lijsten, formulieren.

   Gebruik:  <link rel="stylesheet" href="/assets/css/seos.css">
   Lettertypen staan lokaal in /assets/fonts/ (geen Google, geen externe host),
   zodat je met een strikte CSP kunt werken:  style-src 'self'; font-src 'self'

   Aanpassingen voor het seos.nl-platform t.o.v. het origineel (docs/voorbeeld.html):
   - fontpaden ../fonts/ (dit bestand staat in assets/css/, de fonts in assets/fonts/)
   - pijltje van <select> als los bestand (../img/select-pijl.svg) i.p.v. een data:-URL,
     zodat de CSP geen data:-afbeeldingen hoeft toe te staan
   - sectie 16: inlogscherm (.auth, .auth-card, .auth-brand; sinds 3b de badge, sectie 31)
   - sectie 17: bedragen (.bedrag-plus, .bedrag-min)
   - sectie 18: iconen (.icoon, Lucide-sprite assets/icons.svg), actiemenu, .rij-acties,
     .form-actions .spacer
   - select-pijltje is Lucide chevron-down, lijndikte 2 (was 2.5)
   Volledige afspraken: docs/design-system.md
   Licentie lettertypen: fonts/OFL.txt (SIL Open Font License 1.1, © IBM Corp.)

   Inhoud
   1. Lettertypen        6. Knoppen            11. Dossierkop + gegevens
   2. Kleuren (tokens)   7. Kaarten + cijfers  12. Tabs
   3. Basis              8. Tabellen           13. Logboek (tijdlijn)
   4. App-indeling       9. Statuslabels       14. Meldingen, leeg, dialoog
   5. Paginakop         10. Formulieren        15. Hulpklassen
                                               16. Inlogscherm (platform)
                                               17. Bedragen (platform)
                                               18. Iconen + actiemenu (platform)
   ========================================================================== */


/* 1. LETTERTYPEN — IBM Plex (SIL Open Font License) ----------------------- */

@font-face {
  font-family: "Plex Sans";
  src: url("../fonts/plex-sans.woff2?v=e2291e842c") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Sans";
  src: url("../fonts/plex-sans-italic.woff2?v=4363757d26") format("woff2");
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plex-mono-400.woff2?v=08949f728d") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plex-mono-500.woff2?v=01d2854474") format("woff2");
  font-weight: 500;
  font-display: swap;
}


/* 2. KLEUREN EN MATEN — pas hier aan, de rest volgt vanzelf --------------- */

/* Elke kleur is light-dark(licht, donker): het thema volgt color-scheme. Zonder data-theme volgt
   dat het systeem; data-theme="light" of "dark" is de keuze van de gebruiker. Leisteen, lichte
   variant: koel grijs met een blauwe ondertoon, lichte zijbalk. Alle tekstkleuren halen WCAG AA
   (4,5:1) met marge (de test eist 4,6:1), in elk thema (design-system §1). */
:root {
  color-scheme: light dark;

  --bg:            light-dark(#E8EFF5, #0F141A);   /* pagina: getint (ontwerprichting D, 6-11-2026) */
  --surface:       light-dark(#FFFFFF, #171D24);   /* kaarten, tabellen (het vlak) */
  --surface-2:     light-dark(#F7F8FA, #1E232B);   /* tabelkop, rij-hover */
  --line:          light-dark(#E4E7EC, #2A303A);   /* lijnen */
  --line-strong:   light-dark(#D0D5DD, #3A414D);
  --text:          light-dark(#1B2433, #E6EAF0);
  --text-2:        light-dark(#4F5B6C, #A9B4C2);   /* ondersteunende tekst */
  --text-3:        light-dark(#5B6677, #818C9B);   /* labels, metadata: ≥ 4,6:1 ook op de getinte pagina */

  --chrome:        light-dark(#F4F8FB, #141A21);   /* zijbalk */
  --chrome-2:      light-dark(#E6EDF3, #232A35);   /* hover in zijbalk */
  --chrome-text:   light-dark(#475467, #A3ACB9);
  --chrome-strong: light-dark(#101828, #F2F4F7);

  /* Accent: zachter staalblauw (31-10-2026, bewust afgeweken van de AVORA-tint #0089cf: "zachter,
     minder hard"; design-system §1). Tekst en bediening ≥ 4,6:1, ook op --surface-2. */
  --accent:        light-dark(#3B749D, #75ABD1);   /* knoppen, links, focus, schakelaar aan */
  --accent-hover:  light-dark(#2F5F82, #8DBBDB);
  --accent-matglas: color-mix(in srgb, light-dark(#2F5F82, #75ABD1) 45%, var(--text));   /* accent op matglas (sectie 49): 55% naar --text */
  --accent-soft:   light-dark(#F0F6FA, #1A2E3D);   /* hover-achtergrond, pijl-vakje */
  --on-accent:     light-dark(#FFFFFF, #0B1220);
  /* Links in tekst: ≥ 4,6:1 ook op de getinte pagina (het accent zelf haalt daar 4,34:1). Knoppen houden --accent. */
  --link:          light-dark(#2F5F82, #75ABD1);
  /* Kopbalk (ontwerprichting D): blauw met witte tekst en iconen; ook de focusring is daar wit (≥ 3:1).
     Zwart: zwart met een lijn eronder (blok hieronder). */
  --kopbalk:          light-dark(#3B749D, #1B3347);
  --kopbalk-tekst:    light-dark(#FFFFFF, #E6EAF0);
  --kopbalk-hover:    light-dark(#2F5F82, #24425A);   /* hover en de app die open is; tekst erop ≥ 4,6:1 */
  --kopbalk-scheiding: light-dark(#7FA3C2, #33506A);  /* versiering: de lijn vóór de apps in de menubalk */
  --kopbalk-lijn:     light-dark(#3B749D, #1B3347);   /* lijn onder de kopbalk: in licht en donker onzichtbaar */
  --logo-tegel:       light-dark(#FFFFFF, #E6EAF0);   /* het afgeronde tegeltje achter het logo in de kopbalk */
  /* Saldotegel: het saldo in een gekleurd vlak (Kasboek: Totaal saldo; Spaarpot: het totaal) */
  --saldo-tegel:   light-dark(#3B749D, #75ABD1);
  --saldo-tekst:   light-dark(#FFFFFF, #0F141A);
  /* De rand van een vlak (kaart): in licht een schaduw, in donker en zwart een rand */
  --vlak-rand:     light-dark(transparent, #222A33);
  /* Achter een open dialoog */
  --dialoog-achter: light-dark(rgba(13, 18, 25, 0.45), rgba(13, 18, 25, 0.45));
  /* Geselecteerde tekst, ook in invoervelden en in Firefox: ≥ 4,6:1 in licht, donker en zwart (test S) */
  --selectie:      var(--accent);
  --selectie-tekst: var(--on-accent);
  /* Versiering (kader, streepje en stip van het bord): lichter blauw, ≥ 3:1 tegen kaart en pagina.
     Wat niet meetelt: --kader-uit (grijs). */
  --kader:         light-dark(#4A88B4, #33739A);   /* licht: ≥ 3:1 ook op de getinte pagina (ontwerprichting D) */
  --kader-uit:     var(--text-3);

  /* Status */
  --ok:            light-dark(#166534, #6FD3A0);  --ok-soft:      light-dark(#E7F6EC, #12301F);   /* chip "goed" */
  --warn:          light-dark(#8A3F06, #F2B266);  --warn-soft:    light-dark(#FCEFD9, #3A2A12);   /* chip "let op" */
  --danger:        light-dark(#B42318, #F2716F);  --danger-soft:  light-dark(#FCE8E6, #3A1A19);
  --info:          var(--accent);                 --info-soft:    var(--accent-soft);   /* één blauw */
  --neutral:       light-dark(#4F5B6C, #A9B4C2);  --neutral-soft: light-dark(#EDF0F4, #242E3B);
  /* Merk: de ring en de ringtekst van de badge op het inlogscherm (sectie 31); de 7 en de
     binnencirkel gebruiken --accent en --accent-soft. Ringtekst ≥ 4,6:1 op --bg (ook zwart). */
  --merk-ring:     light-dark(#A9C9E2, #33739A);
  --merk-tekst:    light-dark(#344054, #A9B4C2);
  /* Favoriet: de gevulde ster op een app-tegel (stap 3b; AVORA --color-favorite), ≥ 3:1 */
  --favoriet:      light-dark(#B54708, #FDB022);
  /* Lichtbak (design-system §3.30): in elk thema donker; tekst en iconen ≥ 4,6:1 op het vlak en de knop, de rand ≥ 3:1 */
  --lichtbak-vlak:  light-dark(#0D1219, #0D1219);
  --lichtbak-knop:  light-dark(#232B36, #232B36);
  --lichtbak-rand:  light-dark(#8A94A3, #8A94A3);
  --lichtbak-tekst: light-dark(#FFFFFF, #FFFFFF);
  /* Spaarpot: drie zachte tinten voor de cirkel om een plaatje en als spoor van de voortgangsbalk
     (design-system §1 en §3.27). Alleen een achtergrond; het icoon erin is --text, ≥ 4,6:1 in licht,
     donker en zwart. --cirkel-sterk-N is de vulling van de balk: ≥ 3:1 op het spoor en op de kaart (test J). */
  --cirkel-1:      light-dark(#FDEBD8, #3A2A1C);   /* perzik */
  --cirkel-2:      light-dark(#DDF3E6, #16352A);   /* mint */
  --cirkel-3:      light-dark(#EBE6FA, #2B2647);   /* lila */
  --cirkel-sterk-1: light-dark(#B5651D, #E8A468);
  --cirkel-sterk-2: light-dark(#1F8A5B, #5CC796);
  --cirkel-sterk-3: light-dark(#6F5BC4, #A897EC);

  --font:      "Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Lettergroottes: de schaal van AVORA, 11/12/13/14/17/20/24 */
  --fs-xs:    0.6875rem; /* 11: labels, type of rekening, badges, kolomkop */
  --fs-sm:    0.75rem;   /* 12: hints, korte datum, kleine knoppen */
  --fs-tabel: 0.8125rem; /* 13: tabelcellen, regels in een lijst, totalen */
  --fs:       0.875rem;  /* 14: gewone tekst, invoervelden, kerncijfers */
  --fs-md:    1.0625rem; /* 17: titels van kaarten en dialogen, titel in de appbalk */
  --fs-lg:    1.25rem;   /* 20 */
  --fs-xl:    1.5rem;    /* 24: paginatitel */

  /* Maten (vormgeving Klassiek, 31-10-2026: de enige weergave). Op touch (pointer: coarse)
     klikdoelen van 44px (hieronder). */
  --rij-hoogte:    30px;  /* minimale hoogte van een regel (transactie) */
  --klikdoel:      28px;  /* hoogte (en breedte van ⋯) van de knoppen in een regel */
  --greep-breedte: 18px;  /* marge links in een regel of kop, waarin het greepje staat */
  --greep-rust:    1;     /* greepje in rust: 1 = zichtbaar, 0 = alleen bij hover of focus */
  --inhoud-x:      24px;  /* binnenruimte links en rechts van <main class="content"> */
  --inhoud-ruimte: 20px var(--inhoud-x) 40px;  /* binnenruimte van <main class="content"> */
  --inhoud-gat:    16px;            /* ruimte tussen de blokken van de inhoud */
  --bord-kolom:    300px;           /* minimale kolombreedte van een bord */
  --bord-gat:      12px;            /* ruimte tussen de kolommen */
  --streep:        3px;             /* streepje bovenaan een kolombalkje of kaartje (--kader) */
  /* Kop van een kolom of categorie: één regel, totaal en ⋯ rechts */
  --kop-kolommen:  minmax(0, 1fr) auto auto;
  --kop-vlakken:   "titel totaal acties";
  --kop-titel-richting: column;
  --kolomkop-ruimte: 4px 4px 4px var(--greep-breedte);
  --groepkop-ruimte: 6px 4px 6px var(--greep-breedte);
  --kolomkop-fs:   var(--fs-xs);
  --groepkop-fs:   var(--fs-tabel);
  /* Transactieregel: één regel (datum · omschrijving · bedrag · schakelaar · ⋯), de omschrijving
     afgekapt met … */
  --regel-kolommen: 3.4em minmax(0, 1fr) auto auto auto;
  --regel-vlakken:  "datum tekst bedrag vakje acties";
  --regel-ruimte:   0 4px 0 var(--greep-breedte);
  --regel-afbreken: nowrap;         /* nowrap = afkappen met …, normal = afbreken */
  --regel-gewicht:  400;            /* omschrijving */
  --datum-fs:       var(--fs-sm);   /* korte datum */

  --r-sm: 4px;
  --r:    6px;
  --r-lg: 10px;

  --sidebar: 240px;
  --topbar:  44px;   /* platformbalk; de appbalk eronder is --appbalk */
  --appbalk: 48px;
  --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  --shadow: 0 1px 3px light-dark(rgba(16, 24, 40, 0.10), transparent);
  --shadow-pop: 0 12px 32px light-dark(rgba(16, 24, 40, 0.18), rgba(0, 0, 0, 0.5));
}
:root[data-theme="light"] { color-scheme: light; }

/* App-kleur (ontwerprichting D, design-system §1): elke app een eigen zacht vlak, icoonkleur en tekstkleur.
   data-app="<slug>" staat op <body> (de app van de pagina, appBegin) en op elke tegel en app in de zijbalk;
   gedeelde onderdelen gebruiken alleen --app-zacht, --app-icoon en --app-tekst. Zonder data-app: het blauw
   van het Kasboek. --app-icoon alleen voor iconen (≥ 3:1); tekst op een zacht vlak altijd --app-tekst (≥ 4,6:1).
   Donker en zwart gebruiken dezelfde donkere waarden (ook op #000000 ruim boven de norm). */
:root, [data-app="kasboek"] { --app-zacht: light-dark(#DCE9F3, #1A2E3D); --app-icoon: light-dark(#3B749D, #75ABD1); --app-tekst: light-dark(#2F5F82, #75ABD1); }
[data-app="notities"]       { --app-zacht: light-dark(#FCEFD9, #3A2A12); --app-icoon: light-dark(#B45309, #F2B266); --app-tekst: light-dark(#8A3F06, #F2B266); }
[data-app="spaarpot"]       { --app-zacht: light-dark(#DFF2E8, #12301F); --app-icoon: light-dark(#1F7A51, #6FD3A0); --app-tekst: light-dark(#1C7148, #6FD3A0); }
[data-app="gebruikers"], [data-app="uiterlijk"] { --app-zacht: light-dark(#E6E9EE, #232A33); --app-icoon: light-dark(#475467, #C3CCD6); --app-tekst: light-dark(#344054, #C3CCD6); }
[data-app="snelkoppelingen"] { --app-zacht: light-dark(#DDF2F3, #12302F); --app-icoon: light-dark(#0B666E, #6FCFD6); --app-tekst: light-dark(#0B666E, #6FCFD6); }
[data-app="spullenboek"]    { --app-zacht: light-dark(#F6E7DF, #3A2216); --app-icoon: light-dark(#A04A1E, #F0A07A); --app-tekst: light-dark(#8A3B14, #F0A07A); }
/* Dezelfde app-kleuren op matglas (sectie 49): voor 55% naar --text */
:root, [data-app="kasboek"] { --app-icoon-matglas: color-mix(in srgb, light-dark(#3B749D, #75ABD1) 45%, var(--text)); --app-tekst-matglas: color-mix(in srgb, light-dark(#2F5F82, #75ABD1) 45%, var(--text)); }
[data-app="notities"] { --app-icoon-matglas: color-mix(in srgb, light-dark(#B45309, #F2B266) 45%, var(--text)); --app-tekst-matglas: color-mix(in srgb, light-dark(#8A3F06, #F2B266) 45%, var(--text)); }
[data-app="spaarpot"] { --app-icoon-matglas: color-mix(in srgb, light-dark(#1F7A51, #6FD3A0) 45%, var(--text)); --app-tekst-matglas: color-mix(in srgb, light-dark(#1C7148, #6FD3A0) 45%, var(--text)); }
[data-app="gebruikers"], [data-app="uiterlijk"] { --app-icoon-matglas: color-mix(in srgb, light-dark(#475467, #C3CCD6) 45%, var(--text)); --app-tekst-matglas: color-mix(in srgb, light-dark(#344054, #C3CCD6) 45%, var(--text)); }
[data-app="snelkoppelingen"] { --app-icoon-matglas: color-mix(in srgb, light-dark(#0B666E, #6FCFD6) 45%, var(--text)); --app-tekst-matglas: color-mix(in srgb, light-dark(#0B666E, #6FCFD6) 45%, var(--text)); }
[data-app="spullenboek"] { --app-icoon-matglas: color-mix(in srgb, light-dark(#A04A1E, #F0A07A) 45%, var(--text)); --app-tekst-matglas: color-mix(in srgb, light-dark(#8A3B14, #F0A07A) 45%, var(--text)); }
/* Met een muis: het greepje alleen bij hover of focus op de regel. Op touch: ruimer en altijd zichtbaar. */
@media (hover: hover) and (pointer: fine) { :root { --greep-rust: 0; } }
@media (pointer: coarse) { :root { --rij-hoogte: 44px; --klikdoel: 44px; --greep-breedte: 32px; --greep-rust: 1; } }
:root[data-theme="dark"]  { color-scheme: dark; }

/* Zwart thema (OLED): data-dark="oled" maakt in het donkere thema de achtergronden en randen
   zwart(er). De lichte waarden zijn dezelfde als hierboven (de test controleert dat). Een nieuwe
   achtergrond- of randtoken krijgt hier ook zijn zwarte waarde. */
:root[data-dark="oled"] {
  --bg:          light-dark(#E8EFF5, #000000);
  --surface:     light-dark(#FFFFFF, #0B0D10);
  --surface-2:   light-dark(#F7F8FA, #13161B);
  --line:        light-dark(#E4E7EC, #23272E);
  --line-strong: light-dark(#D0D5DD, #343A44);
  --chrome:      light-dark(#F4F8FB, #000000);
  --chrome-2:    light-dark(#E6EDF3, #13161B);
  --kopbalk:     light-dark(#3B749D, #000000);
  --kopbalk-hover: light-dark(#2F5F82, #1B3347);
  --kopbalk-lijn: light-dark(#3B749D, #222A33);
  --cirkel-1:    light-dark(#FDEBD8, #2A1D12);
  --cirkel-2:    light-dark(#DDF3E6, #0E261D);
  --cirkel-3:    light-dark(#EBE6FA, #1E1A36);
}


/* 3. BASIS ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--fs-xl); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
h4 { font-size: var(--fs); }
p  { margin: 0; }
a  { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
code, kbd, .mono { font-family: var(--font-mono); font-size: 0.92em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
::selection,
input::selection,
textarea::selection { background: var(--selectie); color: var(--selectie-tekst); }

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


/* 4. APP-INDELING: topbalk, zijbalk + inhoud ------------------------------ */
/*  <div class="app">
      <header class="topbar"><div class="topbar-links">[knop zijbalk] [.brand]</div> <div class="user">…</div></header>
      <aside class="sidebar">…</aside>
      <div class="app-main"><main class="content">…</main></div>
    </div>
    De topbalk loopt over de volle breedte (zoals AVORA); de zijbalk begint eronder. */

.app {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "top top" "zijbalk inhoud";
  min-height: 100vh;
}
.app > .topbar { grid-area: top; }
.app > .sidebar { grid-area: zijbalk; }
.app-main { grid-area: inhoud; display: flex; flex-direction: column; min-width: 0; }

.sidebar {
  background: var(--chrome);
  color: var(--chrome-text);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 12px 16px;
  position: sticky;
  top: var(--topbar);
  height: calc(100vh - var(--topbar));
  overflow-x: hidden;
  overflow-y: auto;
}
/* Inklapbare zijbalk (design-system §3.9a): de knop .zijbalk-knop (panel-left) links in de topbalk,
   direct vóór het logo (staat dus altijd op dezelfde plek, open of dicht), of sneltoets G. Dicht (.app.zijbalk-dicht, door de server al in de HTML gezet) is de zijbalk
   helemaal weg: geen breedte, en visibility: hidden (dus ook niet met Tab of een schermlezer
   bereikbaar). De breedte beweegt rustig mee; met prefers-reduced-motion niet (sectie 3). */
.app { transition: grid-template-columns .2s ease; }
.app.zijbalk-dicht { grid-template-columns: 0 minmax(0, 1fr); }
.sidebar { transition: visibility 0s; }
.app.zijbalk-dicht .sidebar { visibility: hidden; transition: visibility 0s linear .2s; }
.zijbalk-form { display: flex; }
/* Focusrand alleen bij toetsenbordgebruik: niet na een muisklik of na de sneltoets G (platform.js
   zet dan data-stil; een volgende toets op de knop, of de focus elders, haalt het weg) */
.zijbalk-knop[data-stil]:focus-visible { box-shadow: none; }
.topbar-links { display: flex; align-items: center; gap: 6px; min-width: 0; }
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--topbar);
  padding: 0 6px;
  color: var(--kopbalk-tekst);
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: 0.02em;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 26px; height: 26px;
  border-radius: var(--r);
  background: var(--accent);
  color: var(--on-accent);
  display: grid; place-items: center;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.nav-label {
  margin: 16px 8px 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.nav { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r);
  color: var(--chrome-text);
  font-size: var(--fs-sm);
}
.nav a:hover { background: var(--chrome-2); color: var(--chrome-strong); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--app-zacht); color: var(--app-tekst); font-weight: 500; }
/* Optioneel een icoon (16px, icoon()) vóór de naam; de kleur volgt de tekst */
.nav .count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--chrome-text);
}
.sidebar-foot { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--chrome-2); font-size: var(--fs-xs); }

.topbar {
  height: var(--topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 32px 0 12px;
  background: var(--kopbalk);
  color: var(--kopbalk-tekst);
  border-bottom: 1px solid var(--kopbalk-lijn);
  position: sticky;
  top: 0;
  z-index: 10;
  /* De focusring is in de kopbalk wit (zelfde vorm en dikte); de menu's die eruit openklappen, staan op een vlak
     en krijgen de gewone ring terug */
  --focus: 0 0 0 3px var(--kopbalk-tekst);
}
.topbar .actiemenu-lijst { --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text); }
.search {
  flex: 1;
  max-width: 420px;
  position: relative;
}
/* Zelfde :not()-reeks als de algemene regel voor velden (sectie 7), anders wint die en verdwijnt de
   ruimte voor het icoon (gevonden bij Notities, 1-11-2026) */
.search input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { padding-left: 34px; background: var(--surface-2); }
.search svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-3); pointer-events: none;
}
.user { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: var(--fs-sm); color: var(--text-2); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: 600;
}

.content {
  padding: var(--inhoud-ruimte);
  display: flex;
  flex-direction: column;
  gap: var(--inhoud-gat);
  width: 100%;
  max-width: 1280px;
  /* Op een breed scherm in het midden van de ruimte naast de zijbalk (Platform 1.18.1); een pagina met de volle breedte
     (content-breed, Snelkoppelingen) en een smal scherm merken hier niets van */
  margin-inline: auto;
}

/* Smal scherm: zijbalk wordt een horizontale balk bovenaan */
@media (max-width: 860px) {
  /* Op een telefoon geen knop: de zijbalk is daar een balk bovenaan en blijft altijd staan */
  .app,
  .app.zijbalk-dicht { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "top" "zijbalk" "inhoud"; }
  .app.zijbalk-dicht .sidebar { visibility: visible; }
  .zijbalk-form { display: none; }
  .sidebar {
    position: static; height: auto; top: auto;
    flex-direction: row; align-items: center; flex-wrap: wrap;
    gap: 4px 8px; padding: 8px 16px;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .brand { height: 40px; padding: 0; }
  .nav-label, .sidebar-foot, .nav .count { display: none; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .topbar { height: auto; min-height: var(--topbar); padding: 8px 16px; flex-wrap: wrap; gap: 8px 16px; position: static; }
  :root { --inhoud-x: 16px; }
}
/* Smal scherm met JavaScript (platform.js zet .menu-js, Platform 1.20.1): het appmenu standaard dicht achter de knop in de
   bovenbalk, open als paneel over de inhoud (onder de bovenbalk; --menu-top zet platform.js), met een donker vlak ernaast.
   Zonder JavaScript blijft het de balk hierboven. De keuze open/dicht van de laptop (.zijbalk-dicht) telt hier niet. */
@media (max-width: 860px) {
  .app.menu-js .zijbalk-form { display: flex; }
  .app.menu-js .sidebar { display: none; }
  .app.menu-js.menu-open .sidebar {
    display: flex; position: fixed; z-index: 40; top: var(--menu-top, 0px); left: 0; bottom: 0; width: min(85vw, 320px); height: auto;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; padding: 8px 12px 16px; overflow-y: auto;
    border-right: 1px solid var(--line); border-bottom: 0; box-shadow: var(--shadow-pop); visibility: visible;
  }
  .app.menu-js.menu-open .nav { flex-direction: column; flex-wrap: nowrap; }
  .app.menu-js.menu-open .nav-label { display: block; }
  .app.menu-js .menu-achtergrond { position: fixed; inset: var(--menu-top, 0px) 0 0 0; z-index: 39; background: color-mix(in srgb, var(--text) 35%, transparent); }
  .app.menu-js .menu-achtergrond[hidden] { display: none; }
  html:has(.app.menu-js.menu-open) { overflow: hidden; }
}
@media (min-width: 861px) { .menu-achtergrond { display: none; } }


/* 5. PAGINAKOP ------------------------------------------------------------ */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.page-head > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.page-sub { color: var(--text-2); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); color: var(--text-3); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.crumbs a { color: var(--text-2); }


/* 6. KNOPPEN -------------------------------------------------------------- */
/* <button class="btn">  .btn-primary  .btn-danger  .btn-ghost  .btn-sm  */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); border-color: var(--text-3); text-decoration: none; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); border-color: transparent; color: var(--text); }
.btn-sm { height: 28px; padding: 0 10px; font-size: var(--fs-xs); }
.btn-icon { width: 32px; padding: 0; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }


/* 7. KAARTEN EN KERNCIJFERS ----------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--vlak-rand);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  min-width: 0;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.card-head h2, .card-head h3 { font-size: var(--fs-md); }
.card-body { padding: 18px; }
.card-foot {
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-3);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

.grid-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1020px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.stat-label { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.stat-value { font-size: var(--fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-note  { font-size: var(--fs-xs); color: var(--text-2); }


/* 8. TABELLEN ------------------------------------------------------------- */
/* <div class="table-wrap"><table class="table">…</table></div>            */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-tabel); font-variant-numeric: tabular-nums; }
.table th {
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--surface-2);
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table .num { text-align: right; }
.table .id  { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; }
.table .title { font-weight: 500; color: var(--text); }
.table .sub { display: block; font-size: var(--fs-xs); color: var(--text-3); }
.table a.title:hover { color: var(--accent); }
.table .is-late { color: var(--danger); font-weight: 500; }

.toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--line);
}
.toolbar .spacer { flex: 1; }
.toolbar select, .toolbar input { width: auto; height: 32px; font-size: var(--fs-sm); }

.pager { display: flex; align-items: center; gap: 4px; }


/* 9. STATUSLABELS --------------------------------------------------------- */
/* <span class="badge badge-ok">Afgerond</span>
   Varianten: badge-info (lopend) · badge-warn (wacht) · badge-ok (afgerond)
              badge-danger (urgent/te laat) · badge-neutral (concept/gesloten) */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
  background: var(--neutral-soft);
  color: var(--neutral);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-info    { background: var(--info-soft);    color: var(--info); }
.badge-warn    { background: var(--warn-soft);    color: var(--warn); }
.badge-ok      { background: var(--ok-soft);      color: var(--ok); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger); }
.badge-neutral { background: var(--neutral-soft); color: var(--neutral); }

/* Rustig label zonder bolletje, voor categorieën of tags */
.tag {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: var(--text-2);
}

/* Prioriteit als streepje links in een tabelrij: <tr class="prio-hoog"> */
.table tr.prio-hoog td:first-child   { box-shadow: inset 3px 0 0 var(--danger); }
.table tr.prio-midden td:first-child { box-shadow: inset 3px 0 0 var(--warn); }


/* 10. FORMULIEREN --------------------------------------------------------- */
/* <div class="field"><label for="x">Naam</label><input id="x"><p class="hint">…</p></div> */

.form { display: flex; flex-direction: column; gap: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 20px; }
.form-grid .full { grid-column: 1 / -1; }
.fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.fieldset legend { font-weight: 600; font-size: var(--fs-md); padding: 0; margin-bottom: 4px; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .label { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.field .req { color: var(--danger); margin-left: 2px; }
.hint  { font-size: var(--fs-xs); color: var(--text-3); }
.error { font-size: var(--fs-xs); color: var(--danger); }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea {
  width: 100%;
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs);
  transition: border-color .12s, box-shadow .12s;
}
textarea { height: auto; min-height: 96px; padding: 9px 11px; resize: vertical; line-height: 1.5; }
select {
  appearance: none;
  padding-right: 32px;
  background-image: url("../img/select-pijl.svg?v=e9d0ab7768");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
input:hover, select:hover, textarea:hover { border-color: var(--text-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.check { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); cursor: pointer; }

.form-actions {
  display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  padding-top: 16px; border-top: 1px solid var(--line);
}


/* 11. DOSSIERKOP EN GEGEVENSLIJST ----------------------------------------- */

.dossier-head { display: flex; flex-direction: column; gap: 8px; }
.dossier-no {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0.02em;
}
.dossier-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* <dl class="meta"><div><dt>Eigenaar</dt><dd>…</dd></div>…</dl> */
.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 24px; margin: 0; }
.meta > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.meta dt { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.meta dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* Verticale variant voor een smalle zijkolom */
.meta-list { margin: 0; display: flex; flex-direction: column; }
.meta-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.meta-list > div:last-child { border-bottom: 0; }
.meta-list dt { color: var(--text-2); }
.meta-list dd { margin: 0; font-weight: 500; text-align: right; }

/* Voortgang: <progress class="progress" value="60" max="100">60%</progress>
   (native element, dus geen inline style nodig — werkt met strikte CSP) */
progress.progress {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 6px; border: 0; border-radius: 999px;
  background: var(--neutral-soft); color: var(--accent); overflow: hidden;
}
progress.progress::-webkit-progress-bar   { background: var(--neutral-soft); border-radius: 999px; }
progress.progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
progress.progress::-moz-progress-bar      { background: var(--accent); border-radius: 999px; }

/* Bijlagen */
.files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.files li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.files li:last-child { border-bottom: 0; }
.files .ext {
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500;
  text-transform: uppercase; width: 34px; height: 22px; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--neutral-soft); color: var(--text-2); flex-shrink: 0;
}
.files .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files .size { color: var(--text-3); font-size: var(--fs-xs); }


/* 12. TABS ---------------------------------------------------------------- */
/* <nav class="tabs"><a href="#" aria-current="page">Overzicht</a>…</nav>  */

.tabs {
  display: flex; gap: 4px;
  /* De lijn onder de strook als schaduw binnenin (geen rand): de tabs steken er dan niet onderuit, en een te brede strook
     schuift alleen horizontaal, nooit verticaal (Snelkoppelingen 1.3, 8-11-2026) */
  box-shadow: inset 0 -1px 0 var(--line);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
.tabs a, .tabs button {
  display: inline-flex; align-items: center; flex: none;
  min-height: 40px;
  padding: 8px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.tabs a:hover, .tabs button:hover { color: var(--text); text-decoration: none; }
.tabs [aria-current="page"], .tabs [aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tabs .count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); margin-left: 4px; }


/* 13. LOGBOEK / TIJDLIJN -------------------------------------------------- */
/* <ol class="log"><li><span class="log-dot"></span><div>…</div></li></ol>
   Kleur van het bolletje: .log-ok .log-warn .log-danger .log-info         */

.log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.log li { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; }
.log li:last-child { padding-bottom: 0; }
.log li::before {
  content: ""; position: absolute; left: 9px; top: 18px; bottom: 0;
  width: 1px; background: var(--line);
}
.log li:last-child::before { display: none; }
.log-dot {
  width: 10px; height: 10px; margin: 5px 0 0 5px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line-strong);
}
.log-ok .log-dot     { border-color: var(--ok);     background: var(--ok); }
.log-warn .log-dot   { border-color: var(--warn);   background: var(--warn); }
.log-danger .log-dot { border-color: var(--danger); background: var(--danger); }
.log-info .log-dot   { border-color: var(--accent); background: var(--accent); }
.log-text { font-size: var(--fs-sm); }
.log-text strong { font-weight: 600; }
.log-when { display: block; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; margin-top: 2px; }
.log-note {
  margin-top: 8px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
  font-size: var(--fs-sm); color: var(--text-2);
}


/* 14. MELDINGEN, LEGE STAAT, DIALOOG -------------------------------------- */

.alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: var(--fs-sm);
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-info   { background: var(--info-soft);   border-color: color-mix(in srgb, var(--info) 30%, transparent);   color: var(--text); }
.alert-ok     { background: var(--ok-soft);     border-color: color-mix(in srgb, var(--ok) 30%, transparent);     color: var(--text); }
.alert-warn   { background: var(--warn-soft);   border-color: color-mix(in srgb, var(--warn) 30%, transparent);   color: var(--text); }
.alert-danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--text); }
.alert-info svg { color: var(--info); } .alert-ok svg { color: var(--ok); }
.alert-warn svg { color: var(--warn); } .alert-danger svg { color: var(--danger); }

.empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 40px 20px; text-align: center; color: var(--text-2);
}
.empty h3 { color: var(--text); }
.empty p { max-width: 42ch; font-size: var(--fs-sm); }
.empty .btn { margin-top: 8px; }

/* Gebruik het native <dialog>-element: dialog.showModal() / dialog.close() */
dialog.modal {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-pop);
}
dialog.modal::backdrop { background: var(--dialoog-achter); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }


/* 15. HULPKLASSEN --------------------------------------------------------- */

.stack    { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.row      { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.muted    { color: var(--text-2); }
.faint    { color: var(--text-3); }
.small    { font-size: var(--fs-sm); }
.right    { text-align: right; }
.nowrap   { white-space: nowrap; }
.sr-only  {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media print {
  .sidebar, .topbar, .actions, .toolbar, .btn { display: none !important; }
  .app { display: block; }
  body { background: #fff; color: #000; }
  .card, .stat { box-shadow: none; border-color: #ccc; }
}


/* 16. INLOGSCHERM (toegevoegd voor het platform) ---------------------------- */
/* <main class="auth">
     <div class="auth-brand"><span class="brand-mark">S</span>seos.nl</div>
     <section class="card auth-card">…</section>
   </main>
   Ook voor wachtwoord-vergeten/-reset: zelfde smalle, gecentreerde kaart. */

.auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 32px 16px;
}
.auth-card { width: 100%; max-width: 380px; box-shadow: var(--shadow-pop); }
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: 0.02em;
}
.btn-block { width: 100%; }


/* 17. BEDRAGEN (toegevoegd voor het platform) ------------------------------ */
/* <td class="num bedrag-plus">+ € 1.250,00</td>   <span class="bedrag-min">− € 74,50</span>
   Bedragen zijn neutraal (31-10-2026): de gewone tekstkleur, altijd met een teken (+/−); het teken
   zegt inkomsten of uitgaven, niet de kleur (zie CLAUDE.md, stijlgids). De klassen blijven, zodat
   de betekenis in de HTML staat. Telt een bedrag niet mee (categorie of kolom "Telt niet mee"):
   .bedrag-telt-niet, lichter grijs in --text-3 (≥ 4,6:1), met het teken erbij. */

.bedrag-plus,
.bedrag-min,
.bedrag-telt-niet {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 500;
}
.bedrag-plus,
.bedrag-min  { color: var(--text); }
.bedrag-telt-niet { color: var(--text-3); }


/* 18. ICONEN EN ACTIEMENU (toegevoegd voor het platform) -------------------- */
/* Iconen: <?= icoon('pencil') ?> → <svg class="icoon"><use href="/assets/icons.svg#pencil"></use></svg>
   Eén maat (16px) en één lijndikte (2) overal; de sprite zelf bevat geen lijnstijl. */

.icoon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* .alert svg en .search svg zetten elders een andere maat; iconen blijven 16px */
.alert .icoon, .search .icoon { width: 16px; height: 16px; }
.alert .icoon { margin-top: 2px; }

/* Actiemenu: knop "⋯" met een lijst acties, op basis van <details>/<summary> (werkt zonder JS;
   platform.js voegt Escape, pijltjestoetsen, klik-buiten-sluit en één-tegelijk toe).
   <details class="actiemenu">
     <summary class="btn btn-ghost btn-sm btn-icon" aria-label="Meer acties" title="Meer acties">…ellipsis…</summary>
     <div class="actiemenu-lijst">
       <button type="button">Bewerken</button> … <hr>
       <button type="button" class="actiemenu-gevaar">Verwijderen</button>
     </div>
   </details> */

.actiemenu { position: relative; display: inline-block; }
.actiemenu > summary { list-style: none; }
.actiemenu > summary::-webkit-details-marker { display: none; }
.actiemenu[open] > summary { background: var(--surface-2); color: var(--text); }

.actiemenu-lijst {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-pop);
}
/* Geen ruimte onder de knop: omhoog (platform.js, design-system §3.4) */
.actiemenu-lijst.actiemenu-lijst-boven { top: auto; bottom: calc(100% + 4px); }
.actiemenu-lijst form { display: contents; }
.actiemenu-lijst button,
.actiemenu-lijst a {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.actiemenu-lijst button:hover,
.actiemenu-lijst a:hover,
.actiemenu-lijst button:focus-visible,
.actiemenu-lijst a:focus-visible { background: var(--surface-2); text-decoration: none; }
.actiemenu-lijst .actiemenu-gevaar { color: var(--danger); }
.actiemenu-lijst .actiemenu-gevaar:hover,
.actiemenu-lijst .actiemenu-gevaar:focus-visible { background: var(--danger-soft); }
.actiemenu-lijst hr { margin: 4px 0; }

/* Geen ruimte links (platform.js): links uitgelijnd onder de knop, de lijst loopt naar rechts */
.actiemenu-lijst.actiemenu-lijst-links { left: 0; right: auto; }

/* Een open menu in een (horizontaal scrollende) tabel mag niet worden afgesneden */
.table-wrap:has(.actiemenu[open]) { overflow: visible; }

/* Rijacties in de laatste tabelkolom: rechts uitgelijnd, vaste volgorde (design-system §4.2) */
.rij-acties { display: flex; justify-content: flex-end; align-items: center; gap: 2px; }

/* Verwijderen links, Annuleren/Opslaan rechts in .form-actions (design-system §4.1) */
.form-actions .spacer { flex: 1; }

/* Het hidden-attribuut wint altijd (ook van bv. .alert { display: flex }) */
[hidden] { display: none !important; }

/* Uitgeschakeld item in een actiemenu (reden staat in title) */
.actiemenu-lijst button[disabled] { opacity: .5; cursor: not-allowed; background: none; }


/* 19. BORD — VORMGEVING KLASSIEK (toegevoegd voor het platform; Klassiek sinds 31-10-2026) ------- */
/* Kolommen naast elkaar; elke kolom is een smal kolombalkje met losse kaartjes eronder, zoals het
   oude kasboek (design-system §3.10):
     <div class="bord-rij">
       <div class="bord" data-sorteer …>
         <section class="card" data-sorteer-vlak …>             kolom: alleen een omhulsel
           <div class="card-head">…</div>                       kolombalkje: stip, naam, totaal, ⋯
           <div class="bord-groepen" data-sorteer …>
             <section class="bord-groep">…</section>            categoriekaartje: pijl, naam, totaal, ⋯,
           </div>                                               regels en "+ Transactie toevoegen"
           <button class="bord-plek">+</button>                 categorie toevoegen
         </section>
       </div>
       <button class="bord-plek bord-plek-kolom">+ Kolom</button>
     </div>
   Zoveel kolommen als er naast elkaar passen (minstens --bord-kolom breed), samen over de volle
   breedte (auto-fit); de rest schuift door naar een volgende rij, op een smal scherm onder elkaar.
   Geen horizontaal scrollen: dan zou een open actiemenu worden afgesneden. Een pagina met een bord
   gebruikt <main class="content content-breed"> (appBegin(…, breed: true)).
   Kader en streepje in --kader (versiering, ≥ 3:1), wat niet meetelt (.telt-niet) in --kader-uit;
   inkomsten of uitgaven herken je aan de pijl en het teken, niet aan kleur. */

.content-breed { max-width: none; }
.bord-rij { display: flex; align-items: flex-start; gap: 8px; }
.bord {
  flex: 1; min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--bord-kolom), 100%), 1fr));
  gap: var(--bord-gat);
  align-items: start;
}
/* De kolom zelf is geen kaart meer, alleen een omhulsel. Elke kolom is een container (regels op
   touch in een smalle kolom: twee regels, zie onder) en een eigen laag: de kolom met een open
   actiemenu komt boven de andere. */
.bord > .card {
  container: bordkolom / inline-size;
  display: flex; flex-direction: column; gap: 10px;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.bord > .card:has(.actiemenu[open]) { z-index: 2; }
.bord-groepen { display: flex; flex-direction: column; gap: 10px; }

/* Kolombalkje en categoriekaartje: gesloten kader rondom in --kader, met het streepje bovenaan */
.bord .card-head,
.bord-groep {
  background: var(--surface);
  border: 1px solid var(--kader);
  border-top: var(--streep) solid var(--kader);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.bord .card-head.telt-niet,
.bord-groep.telt-niet { border-color: var(--kader-uit); }
.bord-groep:has(.actiemenu[open]) { position: relative; z-index: 2; }

/* Kop van een kolom of categorie: één regel.
     kolom:     [greepje] • NAAM (telt niet mee) ………… totaal [⋯]
     categorie: [greepje] [↑] Naam / rekening …………… totaal [⋯]
   Markup: <div class="row">[greepje][stip of pijl]<div class="bord-kop-titel"><h2>[naam als
   .bewerk-knop]</h2><p class="bord-kop-type">…</p></div></div><div class="bord-kop-rechts"><span
   class="bord-totaal …">…</span><div class="rij-acties">[⋯]</div></div>. Het totaal staat recht
   boven de bedragen van de regels; het greepje in de marge links (--greep-breedte). */
.bord .card-head,
.bord-groep-kop {
  position: relative;
  display: grid;
  grid-template-columns: var(--kop-kolommen);
  grid-template-areas: var(--kop-vlakken);
  align-items: center;
  gap: 0 8px;
}
.bord .card-head { padding: var(--kolomkop-ruimte); min-height: 38px; }
.bord-groep-kop { padding: var(--groepkop-ruimte); min-height: 48px; border-bottom: 1px solid var(--line); }
.bord .card-head > .row,
.bord-groep-kop > .row { grid-area: titel; flex-wrap: nowrap; min-width: 0; gap: 10px; }
.bord .card-head h2 {
  font-size: var(--kolomkop-fs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
.bord .card-head h2 .bewerk-knop { text-transform: inherit; letter-spacing: inherit; }
.bord-groep-kop h3 { font-size: var(--groepkop-fs); font-weight: 600; }
.bord .card-head h2,
.bord-groep-kop h3 { min-width: 0; overflow-wrap: anywhere; }
.bord-kop-titel { display: flex; flex-direction: var(--kop-titel-richting); flex-wrap: wrap; gap: 0 6px; min-width: 0; }
.bord .card-head .bord-kop-titel { flex-direction: row; align-items: baseline; }
.bord-kop-type { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0; font-size: var(--fs-xs); color: var(--text-3); }
.bord-kop-rechts { display: contents; }
.bord-kop-rechts > .rij-acties { grid-area: acties; }
/* Het totaal recht boven de bedragen: rechts ervan staat in een regel nog de schakelaar */
.bord-totaal {
  grid-area: totaal; justify-self: end; margin-right: calc(var(--klikdoel) + 8px);
  font-size: var(--fs-tabel); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* Stip (kolom) en pijl-vakje (categorie, ↑ inkomsten, ↓ uitgaven) */
.bord-stip { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--kader); }
.telt-niet .bord-stip { background: var(--kader-uit); }
.bord-pijl {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px;
  border-radius: var(--r); background: var(--accent-soft); color: var(--accent);
}
.bord-pijl .icoon { width: 14px; height: 14px; }
.telt-niet .bord-pijl { background: var(--surface-2); color: var(--text-3); }

/* Geen rijen of geen categorieën: één regel tekst */
.bord-groep-leeg,
.bord-kolom-leeg { margin: 0; padding: 8px 6px 8px var(--greep-breedte); font-size: var(--fs-sm); color: var(--text-3); }

/* Regels in een kaartje (transacties): één regel.
     [greepje] datum omschrijving… ………… bedrag [schakelaar] [⋯]
   De omschrijving is een .bewerk-knop-regel (sectie 24): klik ergens op de regel of Enter = de
   bewerkdialoog. Lang: afgekapt met …, de hele tekst in de title en bij toetsenbordfocus. Datum
   kort ('24-10', 'Okt', '2026'; de volledige datum in de title). De tabel blijft een tabel voor
   schermlezers (role="table"/"row"/"cell" in de HTML, want met display: grid vervalt die betekenis
   in sommige browsers). Op touch in een kolom smaller dan 340px: twee regels (onder). */
.bord-groep .table,
.bord-groep .table tbody { display: block; }
.bord-groep .table tbody tr {
  position: relative;
  display: grid;
  grid-template-columns: var(--regel-kolommen);
  grid-template-areas: var(--regel-vlakken);
  align-items: center;
  column-gap: 8px;
  min-height: var(--rij-hoogte);
  padding: var(--regel-ruimte);
  border-bottom: 1px solid var(--line);
}
.bord-groep .table tbody tr:last-child { border-bottom: 0; }
.bord-groep .table tbody td { padding: 0; border: 0; }
.bord-groep .table tbody td.vakje { grid-area: vakje; width: auto; padding: 0; }
.bord-groep .table tbody td.datum { grid-area: datum; font-size: var(--datum-fs); font-weight: 500; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bord-groep .table tbody td.tekst { grid-area: tekst; min-width: 0; }
.bord-groep .table tbody td.num { grid-area: bedrag; width: auto; white-space: nowrap; font-weight: 600; }
.bord-groep .table tbody td.acties { grid-area: acties; justify-self: end; }
.bord-groep .table .title { display: block; font-weight: var(--regel-gewicht); white-space: var(--regel-afbreken); overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; }
/* Rij met een selectievakje of schakelaar (bv. "Gedaan", direct opslaan; design-system §3.7). Een
   rij die klaar is, telt niet meer mee: doorgestreept in --text-3 (kleur is niet de enige drager:
   de schakelaar staat aan en de tekst is doorgestreept). */
.table td.vakje { width: 1%; padding-right: 0; }
.table td.vakje form { display: flex; align-items: center; gap: 6px; }
.table tr.gedaan .title,
.table tr.gedaan .num { color: var(--text-3); text-decoration: line-through; }
/* Op het bord is een gedane regel ook grijs van achtergrond, zoals in het oude kasboek */
.bord-groep .table tbody tr.gedaan { background: var(--surface-2); }
.bord-groep .table tr.gedaan td.datum { color: var(--text-3); }

/* Knoppen in een kop of regel: --klikdoel hoog (op touch 44px), ⋯ even breed */
.bord .rij-acties .btn-icon { width: var(--klikdoel); height: var(--klikdoel); color: var(--text-3); }

/* "+ Transactie toevoegen" onderin elk kaartje (secundair, in --accent), en lege plekken met een
   stippellijn: "+" onder elke kolom (categorie toevoegen) en "+ Kolom" rechts van het bord */
.bord-toevoegen {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 34px; padding: 0 14px;
  border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: none; color: var(--accent); font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer;
}
.bord-toevoegen:hover { background: var(--accent-soft); }
.bord-toevoegen .icoon { width: 14px; height: 14px; }
.bord-plek {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 10px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: none;
  color: var(--text-3); font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.bord-plek:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.bord-plek-kolom { flex: none; flex-direction: column; width: 36px; min-height: 96px; padding: 8px 0; }
.bord-plek-kolom .bord-plek-tekst { writing-mode: vertical-rl; font-size: var(--fs-xs); }

/* Touch: 44px voor alles wat je aantikt. In een smalle kolom (< 340px) twee regels:
     regel 1: omschrijving ……… [schakelaar] [⋯]     regel 2: datum ……… bedrag
     kop:     naam (rekening eronder) ………… [⋯]                           totaal
   (de grens van 340px staat hier en in design-system §3.10; een container query kent geen tokens) */
@media (pointer: coarse) {
  .bord-toevoegen, .bord-plek { min-height: 44px; }
  @container bordkolom (max-width: 339.98px) {
    .bord-groep .table tbody tr {
      --regel-kolommen: auto minmax(0, 1fr) auto auto;
      --regel-vlakken: "tekst tekst vakje acties" "datum bedrag vakje acties";
      padding-bottom: 6px;
    }
    .bord-groep .table tbody td.num { justify-self: end; }
    .bord .card-head,
    .bord-groep-kop {
      --kop-kolommen: minmax(0, 1fr) auto;
      --kop-vlakken: "titel acties" "titel totaal";
    }
    .bord-totaal { margin-right: 0; }
  }
}

/* Telefoon: kolommen onder elkaar, "+ Kolom" als brede plek eronder */
@media (max-width: 720px) {
  .bord-rij { flex-direction: column; align-items: stretch; }
  .bord-plek-kolom { width: auto; min-height: 44px; flex-direction: row; }
  .bord-plek-kolom .bord-plek-tekst { writing-mode: horizontal-tb; }
}

/* Kerncijfers als losse vakken (3.8): minstens 240px breed, op een smal scherm onder elkaar; een
   heel groot getal breekt af in plaats van de pagina te laten scrollen. In de appbalk: sectie 25. */
.stats { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.stat-value { overflow-wrap: anywhere; }


/* 20. DATUMVELD (toegevoegd voor het platform) ------------------------------- */
/* <?= datumVeld('id', 'naam', '2026-11-06') ?> → het native <input type="date"> met daaroverheen
   de datum als 'vr 6 nov 2026' (platform.js zet .is-opgemaakt); met focus het gewone veld, zodat
   typen werkt. Zonder JavaScript: alleen het native veld (design-system §3.7). */

.datumveld { position: relative; display: flex; align-items: center; gap: 4px; }
.datumveld input { flex: 1; min-width: 0; }
.datumveld-tekst { display: none; }
.datumveld.is-opgemaakt .datumveld-tekst {
  display: block;
  position: absolute;
  left: 12px;               /* rand (1px) + binnenruimte (11px) van het invoerveld */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;     /* klikken gaat naar het veld zelf (kalender) */
  color: var(--text);
  font-size: var(--fs);
  white-space: nowrap;
}
.datumveld.is-opgemaakt .datumveld-tekst.is-leeg { color: var(--text-3); }
.datumveld.is-opgemaakt input:not(:focus) { color: transparent; }
.datumveld.is-opgemaakt input:not(:focus)::-webkit-datetime-edit { color: transparent; }
.datumveld.is-opgemaakt:has(input:focus) .datumveld-tekst { visibility: hidden; }


/* 21. MAANDKEUZE (toegevoegd voor het platform; vervangt de periodekiezer, 31-10-2026) ----------- */
/* Keuzelijst met de maanden in een GET-formulier (design-system §3.12): bij kiezen meteen naar die
   maand (platform.js, data-filter); zonder JavaScript met de knop "Tonen".
   <form class="maandkeuze" method="get"><label class="sr-only" for="…">Maand</label>
     <select id="…" name="periode" data-filter>…</select><button class="btn btn-sm" data-filter-knop>Tonen</button></form> */
.maandkeuze { display: flex; align-items: center; gap: 6px; min-width: 0; }
.maandkeuze select {
  width: auto; max-width: 100%; height: 30px; padding-left: 10px;
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); background-color: var(--surface-2);
}


/* 22. STATUSREGEL, VRAAG IN EEN DIALOOG, AANWIJZING (toegevoegd voor het platform) ------- */
/* Statusregel: korte bevestiging van een actie zonder herladen (bv. "Huur is gedaan."), met
   role="status", op een vaste, gereserveerde plek: in de appbalk links van ⋯ (appBalk(); op een
   telefoon een eigen regel onderin de appbalk, sectie 25), anders rechts in de paginakop
   (platform.js). Altijd één regel hoog, ook leeg: er verspringt niets. Te lang: afgekapt met …
   (de hele tekst in de title). platform.js laat de tekst na 4 seconden vervagen (.statusregel-weg). */
.statusregel {
  margin: 0; min-width: 0; height: calc(var(--fs-sm) * 1.5);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .4s;
}
.statusregel-weg { opacity: 0; }
/* In de paginakop: rechts, met een vaste basisbreedte (niet die van de tekst), zodat een lange tekst
   de kop niet laat omslaan; alleen een smal scherm zet hem (altijd) op een eigen regel */
.page-head > .statusregel { flex: 1 1 12rem; text-align: right; }
@media (prefers-reduced-motion: reduce) {
  .statusregel { transition: none; }
}

/* De vraag "Wijzigingen weggooien?" in een dialoog (platform.js) */
.dialoog-vraag { margin: 0 20px 16px; }

/* Aanwijzing in een actiemenu: waarom een actie er niet is (geen knop) */
.actiemenu-hint {
  margin: 0; padding: 7px 10px; max-width: 260px; white-space: normal;
  font-size: var(--fs-xs); color: var(--text-3);
}


/* 23. SLEPEN (toegevoegd voor het platform) ----------------------------------- */
/* Greepje (grip-vertical) aan een item in een lijst met data-sorteer; gedrag in platform.js
   (muis, touch, toetsenbord). touch-action: none zodat slepen op een touchscherm niet scrolt.
   Tijdens het slepen (html.is-slepen) geen tekstselectie (design-system §3.13). */
.sorteer-greep { cursor: grab; touch-action: none; color: var(--text-3); }
.sorteer-greep:hover { color: var(--text); }
/* Op het bord staat het greepje in de marge links van de kop of regel (--greep-breedte), boven de
   klikbare laag van de regel. Met een muis alleen bij hover of focus op die kop of regel (en tijdens
   het slepen); op touch en zonder muis altijd (--greep-rust). */
.bord .sorteer-greep {
  position: absolute; left: 1px; top: 50%; z-index: 1;
  transform: translateY(-50%);
  width: calc(var(--greep-breedte) - 2px); min-width: 0; height: var(--klikdoel); padding: 0;
  opacity: var(--greep-rust);
  transition: opacity .1s;
}
.bord :is(.card-head, .bord-groep-kop, tr):is(:hover, :focus-within) > .row > .sorteer-greep,
.bord tr:is(:hover, :focus-within) .sorteer-greep,
.bord .is-gesleept .sorteer-greep { opacity: 1; }
.is-slepen,
.is-slepen * { -webkit-user-select: none; user-select: none; cursor: grabbing; }
/* Soepel slepen (Platform 1.13.0): het item zelf is de open plek (een stippellijn, de inhoud onzichtbaar); een geest in body
   volgt de wijzer, opgetild (platform.js). De ondiepe kopieën van de ouders in de geest houden alleen hun klassen (voor de
   opmaak van het item) en doen verder niets. */
[data-sorteer-item].is-gesleept { outline: 2px dashed var(--line-strong); outline-offset: -2px; background: var(--surface-2); }
[data-sorteer-item].is-gesleept > * { visibility: hidden; }
.sorteer-geest { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; transform-origin: 0 0; will-change: transform;
  border-radius: var(--r); box-shadow: 0 14px 32px rgba(0, 0, 0, .22), 0 3px 8px rgba(0, 0, 0, .12); }
.sorteer-geest.sorteer-geest-landt { box-shadow: none; }
.sorteer-geest-ouder { display: block !important; position: static !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
  background: none !important; box-shadow: none !important; width: auto !important; min-width: 0 !important; max-width: none !important;
  height: auto !important; min-height: 0 !important; overflow: visible !important; transform: none !important; outline: none !important;
  -webkit-mask-image: none !important; mask-image: none !important; container-type: normal !important; }
.sorteer-geest-item { background: var(--surface); margin: 0 !important; height: 100%; }
/* Hele item vastpakken (data-sorteer-heel, alleen muis of pen): het greepje is met een muis onzichtbaar en neemt geen ruimte,
   behalve met toetsenbordfocus (dan zichtbaar, voor ↑/↓); een stil greepje (aria-hidden, bij een tab) is er met een muis niet.
   Op een aanraakscherm staat het greepje er gewoon. */
@media (pointer: fine) {
  [data-sorteer-heel] > [data-sorteer-item] { cursor: grab; }
  [data-sorteer-heel] .sorteer-greep:not(:focus-visible) { position: absolute; width: 1px; height: 1px; min-width: 0; min-height: 0; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  [data-sorteer-heel] .sorteer-greep[aria-hidden="true"] { display: none; }
}
/* Tijdens het slepen zijn alleen de lijsten van dezelfde groep een plek om neer te zetten
   (.sorteer-doel, platform.js). Een lege lijst krijgt een stippellijn en hoogte (ook een lege tbody,
   die anders geen hoogte heeft; zodra er een rij in staat, weer een gewone tbody). Heeft de lijst
   een lege staat (data-sorteer-leeg), dan staat de stippellijn om die lege staat (.sorteer-leeg-doel),
   want die zie je; staat het item erin, dan is de lege staat weg (.sorteer-leeg-bezet) en neemt de
   lijst zijn hoogte over. */
.is-slepen .sorteer-doel:not(:has(> [data-sorteer-item])) { min-height: 44px; outline: 2px dashed var(--line-strong); outline-offset: -4px; }
.is-slepen tbody.sorteer-doel:not(:has(> [data-sorteer-item])) { display: block; }
.is-slepen .sorteer-doel[data-sorteer-leeg]:not(:has(> [data-sorteer-item])) { min-height: 0; outline: none; }
.is-slepen .sorteer-leeg-doel { outline: 2px dashed var(--line-strong); outline-offset: -4px; }
.sorteer-leeg-bezet { display: none; }


/* 24. KLIKBARE NAAM EN REGEL, MELDING SLUITEN, TELEFOON (toegevoegd voor het platform) ---------- */
/* Bewerkknop (design-system §3.14): een naam of omschrijving die de bewerkdialoog opent. Ziet eruit
   als tekst; bij hover onderstreept, met het toetsenbord een focusrand. Toegankelijke naam
   "Bewerken: {naam}":
   <button type="button" class="bewerk-knop" data-dialoog-open="dlg-…" title="Bewerken">
     <span class="sr-only">Bewerken: </span><span id="…">Huur</span></button>
   .bewerk-knop-regel: de knop ligt over de hele regel (::after), zodat klikken op de regel bewerkt.
   De schakelaar, ⋯ en het greepje liggen erboven (z-index 1) en blijven gewoon werken. De focusrand
   staat dan om de hele regel, en de omschrijving loopt uit. */
:where(.bewerk-knop) {
  padding: 0; margin: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.bewerk-knop:hover { text-decoration: underline; text-underline-offset: 2px; }
.bewerk-knop-regel { display: block; width: 100%; min-width: 0; }
.bewerk-knop-regel::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.bewerk-knop-regel:focus-visible { box-shadow: none; }
tr:has(> td > .bewerk-knop-regel:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.bewerk-knop-regel:focus-visible .title { white-space: normal; overflow-wrap: anywhere; }
/* Wat boven de klikbare laag ligt */
.bord-groep .table td.vakje .schakelaar,
.bord-groep .table .actiemenu > summary { position: relative; z-index: 1; }

/* Zwevende melding (meldingHtml(), meldingenStrook(), platform.js; design-system §4.5, Platform 1.13.0): over de pagina,
   rechtsonder, op de telefoon onderaan over de breedte (12 px marge); niets in de inhoud verspringt. De sluitknop 44 px. De
   kleuren zijn die van .alert (getest op contrast in licht, donker en zwart). */
.meldingen { position: fixed; z-index: 950; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(420px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.meldingen:empty { display: none; }
.meldingen > .melding { pointer-events: auto; margin: 0; align-items: center; box-shadow: var(--shadow-pop);
  animation: melding-in 200ms ease-out; transition: opacity 200ms ease, transform 200ms ease; }
.meldingen > .melding.melding-weg { opacity: 0; transform: translateY(8px); }
/* De eerste 50–100 ms (platform.js zet de tekst dan opnieuw neer voor schermlezers): nog niet te zien */
.meldingen > .melding.melding-wacht { visibility: hidden; animation: none; }
@keyframes melding-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .meldingen > .melding { animation: none; transition: none; } }
@media (max-width: 719px) { .meldingen { left: 12px; right: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } }
.alert[data-melding] > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.melding-sluit { margin: -10px -10px -10px 0; flex-shrink: 0; }
.meldingen .melding-sluit { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }

/* Telefoon (≤ 720px): .niet-telefoon verdwijnt op een telefoon, .alleen-telefoon staat er alleen daar */
@media (max-width: 720px) {
  .niet-telefoon { display: none !important; }
}
@media (min-width: 720.02px) {
  .alleen-telefoon { display: none !important; }
}


/* 25. APPBALK, KERNCIJFERS EN SCHAKELAAR (toegevoegd voor het platform, Klassiek 31-10-2026) ------ */
/* Twee lagen bovenaan: de platformbalk (.topbar: zijbalk, logo, account; --topbar) en daaronder de
   appbalk van de app (--appbalk): titel en maandkeuze links, kerncijfers in het midden, ⋯ rechts.
   Vervangt de paginakop; het bord begint er direct onder. appBalk() in platform/layout.php:
   <div class="appbalk" role="region" aria-label="Kasboek">
     <div class="appbalk-links"><h1>Kasboek</h1>[maandkeuze]</div>
     <div class="appbalk-midden">[kerncijfers]</div>
     <div class="appbalk-rechts"><p class="statusregel" role="status"></p>[⋯]</div>
   </div>
   Blijft bovenaan staan bij scrollen (onder de platformbalk). Rechts, links van ⋯, de vaste plek
   van de statusregel. Op een telefoon drie regels: titel, maand en ⋯; daaronder de kerncijfers
   naast elkaar; onderaan de statusregel. */
.content:has(> .appbalk) { padding-top: 0; }
.appbalk {
  position: sticky; top: var(--topbar); z-index: 9;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px 16px;
  min-height: var(--appbalk); margin: 0; padding: 4px 12px 4px 16px;
  /* Eén inhoudsbreedte (Platform 1.22.0, design-system §2): de kop is even breed als de kaarten eronder, op dezelfde linker- en
     rechterlijn; hij hangt aan de platformbalk (bovenaan geen rand, onderaan de hoeken van een kaart) */
  background: var(--surface); border: 1px solid var(--vlak-rand); border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--shadow);
}
.appbalk-links { display: flex; align-items: center; gap: 12px; min-width: 0; }
.appbalk-links h1 { font-size: var(--fs-md); white-space: nowrap; }
.appbalk-sub { font-size: var(--fs-xs); color: var(--text-3); min-width: 0; overflow-wrap: anywhere; }
.appbalk-midden { display: flex; justify-content: center; min-width: 0; }
.appbalk-rechts { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
/* De statusregel (sectie 22) vult de ruimte links van ⋯, rechts uitgelijnd. De kolom is 1fr: de
   tekst verandert de breedte van niets anders. */
.appbalk-rechts > .statusregel { flex: 1; text-align: right; }

/* Kerncijfers in de appbalk: label (--fs-xs) boven het bedrag (--fs), gescheiden door een lijn. Een
   cijfer dat je kunt wijzigen, is zelf een .bewerk-knop. De toelichting (.stat-note) is er alleen
   voor schermlezers.
   <section class="stats stats-kop" aria-label="Kerncijfers"><div class="stat"><span class="stat-label">
   Startsaldo</span><span class="stat-value">€ 1.105,75</span><span class="stat-note">…</span></div>…</section> */
.stats-kop { display: flex; align-items: center; gap: 0; }
.stats-kop .stat {
  flex-direction: column; align-items: center; gap: 0; padding: 0 18px; line-height: 1.25;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
.stats-kop .stat + .stat { border-left: 1px solid var(--line); }
.stats-kop .stat-label { text-transform: none; letter-spacing: 0; font-weight: 400; }
.stats-kop .stat-value { font-size: var(--fs); white-space: nowrap; overflow-wrap: normal; }
.stats-kop .stat-note {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 860px) {
  .appbalk { top: 0; }
}
@media (max-width: 720px) {
  .appbalk { grid-template-columns: minmax(0, 1fr) auto; padding: 4px 6px 6px 12px; }
  .appbalk-links { gap: 8px; flex-wrap: wrap; }
  .appbalk-midden { grid-column: 1 / -1; grid-row: 2; justify-content: stretch; }
  /* Telefoon: de statusregel krijgt een eigen, altijd gereserveerde regel onderin de appbalk
     (onder de kerncijfers); de appbalk is daardoor altijd even hoog, met of zonder tekst */
  .appbalk { padding-bottom: calc(var(--fs-sm) * 1.5 + 8px); }
  .appbalk-rechts > .statusregel {
    position: absolute; left: 12px; right: 6px; bottom: 4px; text-align: left;
  }
  /* De appbalk is sinds Platform 1.22.0 even breed als de kaarten (32 px smaller dan het scherm): 6 px tussen de cijfers */
  .stats-kop { flex: 1; min-width: 0; }
  .stats-kop .stat { flex: 1 1 auto; min-width: 0; align-items: flex-start; padding: 0 6px; }
  .stats-kop .stat:first-child { padding-left: 0; }
}
/* Telefoon (Platform 1.20.1): een lange titel loopt door over hoogstens drie regels en wordt dan afgekapt (…), nooit over de
   knoppen heen. Staan er rechts tekstknoppen (zoals Spul toevoegen), dan krijgt de titel de hele breedte en de knoppen een eigen
   regel eronder, ⋯ achteraan; met alleen icoonknoppen (het potlood, ⋯) blijven die naast de titel staan. */
@media (max-width: 720px) {
  .appbalk-links h1 {
    flex: 0 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; overflow: hidden;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  }
  .appbalk:has(> .appbalk-rechts > :is(.btn:not(.btn-icon), form)) { grid-template-columns: minmax(0, 1fr); }
  .appbalk:has(> .appbalk-rechts > :is(.btn:not(.btn-icon), form)) > .appbalk-links { grid-column: 1; grid-row: 1; }
  .appbalk:has(> .appbalk-rechts > :is(.btn:not(.btn-icon), form)) > .appbalk-rechts { grid-column: 1; grid-row: 2; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
  .appbalk:has(> .appbalk-rechts > :is(.btn:not(.btn-icon), form)) > .appbalk-midden { grid-row: 3; }
  .appbalk:has(> .appbalk-rechts > :is(.btn:not(.btn-icon), form)) > .appbalk-rechts > .actiemenu { margin-left: auto; }
}

/* Schakelaar (design-system §3.7): een echt selectievakje met role="switch", bv. "Gedaan".
   <label class="schakelaar"><input type="checkbox" role="switch" …><span class="sr-only">Gedaan: Huur</span></label>
   Het label is het klikvlak (--klikdoel; op touch 44px). Uit: rand en knop in --text-3; aan:
   --accent met de knop in --on-accent; alles ≥ 4,6:1. Focusrand zoals elk veld. */
.schakelaar { display: inline-grid; place-items: center; width: var(--klikdoel); height: var(--klikdoel); cursor: pointer; }
.schakelaar input {
  --s-breed: 26px; --s-hoog: 16px;
  appearance: none; position: relative; flex: none;
  width: var(--s-breed); height: var(--s-hoog); margin: 0; cursor: pointer;
  border: 1.5px solid var(--text-3); border-radius: 999px; background: var(--surface);
  transition: background .15s, border-color .15s;
}
.schakelaar input::before {
  content: ""; position: absolute; top: 50%; left: 2px;
  width: calc(var(--s-hoog) - 7px); height: calc(var(--s-hoog) - 7px);
  border-radius: 50%; background: var(--text-3); transform: translateY(-50%);
  transition: left .15s, background .15s;
}
.schakelaar input:checked { background: var(--accent); border-color: var(--accent); }
.schakelaar input:checked::before { left: calc(100% - var(--s-hoog) + 5px); background: var(--on-accent); }
.schakelaar input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--focus); }
@media (pointer: coarse) {
  .schakelaar input { --s-breed: 36px; --s-hoog: 22px; }
}


/* 26. GEBRUIKERSMENU, KEUZEKNOPPEN, TERUG (toegevoegd voor het platform, stap 3b, 1-11-2026) ----- */
/* Gebruikersmenu (design-system §3.15) rechts in de platformbalk: de avatar is de knop van een
   actiemenu (details.actiemenu, dus hetzelfde toetsenbordgedrag), met bovenaan het e-mailadres, dan
   Mijn account, het thema en Uitloggen. Vervangt het e-mailadres en de losse knop Uitloggen.
   <details class="actiemenu gebruikersmenu"><summary class="gebruikersmenu-knop" aria-label="Gebruikersmenu: …">
   [avatar]</summary><div class="actiemenu-lijst gebruikersmenu-lijst">…</div></details> */
.gebruikersmenu { margin-left: auto; }
.gebruikersmenu-knop {
  display: grid; place-items: center; width: max(36px, var(--klikdoel)); height: max(36px, var(--klikdoel));
  border-radius: 50%; cursor: pointer;
}
.gebruikersmenu-knop .avatar { transition: box-shadow .15s; }
.gebruikersmenu-knop:hover .avatar, .gebruikersmenu[open] > .gebruikersmenu-knop .avatar { box-shadow: 0 0 0 2px var(--accent); }
.gebruikersmenu-knop:focus-visible { outline: none; }
.gebruikersmenu-knop:focus-visible .avatar { box-shadow: var(--focus); outline: 2px solid var(--accent); outline-offset: 1px; }
.gebruikersmenu-lijst { width: 290px; max-width: calc(100vw - 16px); padding: 6px; border-radius: var(--r-lg); }
.gebruikersmenu-kop { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; min-width: 0; }
.gebruikersmenu-kop .avatar { flex: none; width: 36px; height: 36px; font-size: var(--fs-sm); }
.gebruikersmenu-kop strong { display: block; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.gebruikersmenu-kop span:not(.avatar) { display: block; font-size: var(--fs-xs); color: var(--text-2); overflow-wrap: anywhere; }
.gebruikersmenu-lijst > a,
.gebruikersmenu-lijst > form > button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.gebruikersmenu-lijst > a .icoon,
.gebruikersmenu-lijst > form > button .icoon { color: var(--text-2); }
.gebruikersmenu-lijst > a[aria-current="page"] { color: var(--accent); font-weight: 500; }
.gebruikersmenu-lijst hr { margin: 6px 0; }
.gebruikersmenu-lijst .thema-keuze { padding: 2px 4px 4px; }

/* Keuzeknoppen (design-system §3.16): twee tot vier wederzijds uitsluitende keuzes naast elkaar, op
   native radioknoppen (fieldset + legend), dus toetsenbord (pijltjes) en schermlezers werken vanzelf.
   <fieldset class="keuzeknoppen"><legend>Thema</legend><div class="keuzeknoppen-rij">
   <label class="keuzeknop"><input type="radio" name="…" value="…">[icoon]<span>Licht</span></label>…</div></fieldset>
   Gekozen: --accent op --surface; de rest --text-2 op --surface-2 (alles ≥ 4,6:1). */
.keuzeknoppen { margin: 0; padding: 0; border: 0; min-width: 0; max-width: 28rem; }
.keuzeknoppen legend { padding: 0; margin: 0 0 6px; font-size: var(--fs-xs); color: var(--text-2); }
.keuzeknoppen-rij {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px;
  padding: 2px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2);
}
.keuzeknop {
  position: relative; display: grid; justify-items: center; gap: 2px; min-height: var(--klikdoel);
  padding: 6px 2px 5px; border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--text-2); cursor: pointer;
}
.keuzeknop:hover { color: var(--text); }
.keuzeknop input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.keuzeknop:has(input:checked) { background: var(--surface); color: var(--accent); font-weight: 500; box-shadow: 0 0 0 1px var(--line); }
.keuzeknop:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Zwart: dezelfde maan als Donker, maar gevuld */
.keuzeknop-zwart .icoon { fill: currentColor; }
/* Meer keuzes (tot zes, Platform 1.20.2, eerste gebruik: de soort van een document): de knoppen lopen op een smal scherm terug
   over meer regels, even breed; op de telefoon en op een aanraakscherm minstens 44 px hoog */
.keuzeknoppen-meer { max-width: 40rem; }
/* In een formulier: het kopje (legend) zoals de andere veldnamen (.field label) */
.form .keuzeknoppen-meer legend { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.keuzeknoppen-meer .keuzeknoppen-rij { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); }
@media (max-width: 600px), (pointer: coarse) { .keuzeknoppen-meer .keuzeknop { min-height: 44px; } }

/* Terug naar de vorige app, boven de paginatitel (Mijn account vanuit een app) */
.terug-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }


/* 27. STARTPAGINA: APP-TEGELS, FAVORIETEN IN DE MENUBALK (toegevoegd voor het platform, stap 3b) -- */
/* Favorieten in de platformbalk, direct na het logo (design-system §3.17). Alle apps staan erin, in
   je eigen volgorde; wat geen favoriet is, is verborgen (.niet-favoriet), zodat de ster op de
   startpagina hem zonder herladen kan tonen of verbergen. Op een smal scherm alleen het icoon. */
.topbar-apps { display: flex; align-items: center; gap: 2px; min-width: 0; margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--kopbalk-scheiding); }
.topbar-apps:not(:has(.topbar-app:not(.niet-favoriet))) { display: none; }
.topbar-app {
  display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--r);
  color: var(--kopbalk-tekst); font-size: var(--fs-sm); white-space: nowrap;
}
.topbar-app:hover { background: var(--kopbalk-hover); color: var(--kopbalk-tekst); text-decoration: none; }
.topbar-app[aria-current="page"] { background: var(--kopbalk-hover); color: var(--kopbalk-tekst); font-weight: 600; }
.topbar-app.niet-favoriet { display: none; }
@media (max-width: 860px) {
  .topbar-app:has(.icoon) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topbar-app:has(.icoon) { width: var(--klikdoel); min-width: 36px; padding: 0; justify-content: center; }
}

/* App-tegels: de hele tegel is de link (een ::after over de tegel), de ster, ⋯ en het greepje liggen
   erboven. Icoon in een zacht vlak (--accent-soft), titel, één regel uitleg, labels.
   <div class="tegels" data-sorteer data-sorteer-richting="horizontaal" …>
     <section class="card tegel" data-sorteer-item="kasboek" …>[greepje] <span class="tegel-icoon">[icoon]</span>
       <h3 class="tegel-titel"><a href="…">Kasboek</a></h3> <p class="tegel-uitleg">…</p> [<p class="tegel-labels">…</p>]
       <div class="tegel-acties">[ster] [⋯]</div></section> … </div> */
.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 16px; }
.tegel {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 4px 14px;
  padding: 16px 12px 16px 18px; transition: border-color .15s;
}
.tegel:has(.tegel-titel a:hover) { border-color: var(--app-icoon); }
.tegel:has(.tegel-titel a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tegel-icoon {
  grid-row: 1 / span 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--app-zacht); color: var(--app-icoon); font-weight: 600;
}
.tegel-icoon .icoon { width: 22px; height: 22px; }
.tegel-titel { margin: 2px 0 0; padding-right: calc(2 * var(--klikdoel) + 8px); font-size: var(--fs-md); }
.tegel-titel a { color: var(--text); }
.tegel-titel a:hover { text-decoration: none; }
.tegel-titel a:focus-visible { outline: none; }
.tegel-titel a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tegel-uitleg { grid-column: 2; margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.tegel-labels { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }
.tegel-acties { position: absolute; top: 8px; right: 8px; z-index: 1; display: flex; align-items: center; gap: 2px; }
.tegel .sorteer-greep { position: absolute; left: -2px; top: 50%; z-index: 1; transform: translateY(-50%); }

/* Ster: een selectievakje (direct opslaan) dat eruitziet als ster; aan = gevuld in --favoriet */
.ster {
  position: relative; display: grid; place-items: center; width: max(32px, var(--klikdoel)); height: max(32px, var(--klikdoel));
  border-radius: var(--r-sm); color: var(--text-2); cursor: pointer;
}
.ster:hover { background: var(--surface-2); color: var(--text); }
.ster input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.ster:has(input:checked) { color: var(--favoriet); }
.ster:has(input:checked) .icoon { fill: currentColor; }
.ster:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }


/* 28. ZIJBALK: START, IN JE MENUBALK, OVERIGE APPS (toegevoegd voor het platform, stap 3b) -------- */
/* zijbalkApps() in platform/layout.php (design-system §3.18). Beide groepen bevatten alle apps; wat
   er niet in hoort, is verborgen, zodat de ster op de startpagina een app zonder herladen van groep
   laat wisselen. Een groep zonder zichtbare apps verdwijnt helemaal; zonder favorieten heet de
   tweede groep "Apps" in plaats van "Overige apps". */
.zijbalk-groep { display: contents; }
.zijbalk-favorieten .niet-favoriet,
.zijbalk-overig .favoriet { display: none; }
.zijbalk-favorieten:not(:has(.zijbalk-app:not(.niet-favoriet))),
.zijbalk-overig:not(:has(.zijbalk-app:not(.favoriet))) { display: none; }
.sidebar:has(.zijbalk-favorieten .zijbalk-app:not(.niet-favoriet)) .label-apps,
.sidebar:not(:has(.zijbalk-favorieten .zijbalk-app:not(.niet-favoriet))) .label-overig { display: none; }
/* Icoon vóór de naam (16px); een app zonder icoon in app.json: de eerste letter in een even groot vlak */
.nav a .icoon { width: 16px; height: 16px; flex: none; }
.nav-letter {
  display: grid; place-items: center; width: 24px; height: 24px; flex: none;
  border-radius: 50%; background: var(--app-zacht); color: var(--app-tekst); font-size: 11px; font-weight: 600; line-height: 1;
}


/* 29. STATUSBALK (toegevoegd voor het platform, stap 3b: Bekijken als gewone gebruiker) ---------- */
/* Een smalle, altijd zichtbare balk bovenaan de inhoud voor een tijdelijke toestand van de hele
   sessie (design-system §3.19). Geen toast en geen melding: hij blijft staan tot de toestand eindigt
   (knop Stoppen, POST + CSRF). Geel (--warn-soft), zodat je het niet vergeet; tekst --text. */
.statusbalk {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px var(--inhoud-x);
  background: var(--warn-soft); border-bottom: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  color: var(--text); font-size: var(--fs-sm);
}
.statusbalk > .icoon { flex: none; color: var(--warn); }
.statusbalk p { flex: 1 1 16rem; margin: 0; min-width: 0; }
.statusbalk form { margin-left: auto; }


/* 30. WAT IS ER NIEUW (toegevoegd voor het platform, stap 3b) ------------------------------------ */
/* De pagina (www/wat-is-er-nieuw.php, design-system §3.20): per versie links de naam, versie, datum
   en eventueel "Nieuw", rechts de punten; op een smal scherm onder elkaar. De link ernaartoe in het
   gebruikersmenu en op de startpagina, met het label "Nieuw" zolang er iets ongelezen is. */
.versie-lijst { list-style: none; margin: 0; padding: 4px 20px; }
.versie-lijst > li {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 6px 20px;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.versie-lijst > li:first-child { border-top: 0; }
.versie-kop { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.versie-kop h2 { margin: 0; font-size: var(--fs); }
.versie-datum { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.versie-lijst ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 720px) {
  .versie-lijst > li { grid-template-columns: minmax(0, 1fr); }
  .versie-kop { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
}
.gebruikersmenu-lijst > a .badge { margin-left: auto; }
.nieuw-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.nieuw-link .badge { margin-left: 2px; }


/* 31. MERK: LOGO IN DE BALK, BADGE OP HET INLOGSCHERM (toegevoegd voor het platform, stap 3b) ---- */
/* Het logo (assets/img/logo.svg, het app-icoon) vóór "seos.nl" in de platformbalk, in plaats van
   .brand-mark. De badge (merkBadge() in platform/layout.php, inline) boven het inlogvak: de kleuren
   uit tokens, dus licht, donker en zwart vanzelf; de ringtekst in het lettertype van de site.
   design-system §3.21. */
.brand-logo { display: block; width: 28px; height: 28px; flex: none; }
.auth-merk { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.auth-merk > span { font-weight: 600; font-size: var(--fs-md); letter-spacing: 0.02em; color: var(--text); }
.badge-merk { display: block; width: 220px; max-width: 70vw; height: auto; aspect-ratio: 1; }
.badge-ring { fill: none; stroke: var(--merk-ring); stroke-width: 1.5; }
.badge-binnen { fill: var(--accent-soft); }
.badge-zeven { fill: none; stroke: var(--accent); stroke-width: 10.75; stroke-linecap: round; stroke-linejoin: round; }
.badge-merk text { font-family: var(--font); font-size: 7.6px; font-weight: 500; fill: var(--merk-tekst); }


/* 32. NOTITIES (toegevoegd voor de app Notities, 1-11-2026; versie 2.0 met mappen, 2-11-2026) ---------- */
/* design-system §3.22. Drie vlakken: de mappenboom (§3.24), de notities van de gekozen map en de
   editor (Tekstopmaak, sectie 33). Op de telefoon één vlak per stap (data-stap op .drie). */
.drie { display: grid; grid-template-columns: minmax(200px, 250px) minmax(240px, 330px) minmax(0, 1fr); gap: 12px; align-items: stretch; min-height: calc(100dvh - var(--topbar) - var(--appbalk) - 60px); }
.vlak { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.vlak-kop { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 46px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); }
.vlak-kop h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.vlak-lijst .vlak-kop h2 { font-size: var(--fs); text-transform: none; letter-spacing: 0; color: var(--text); overflow-wrap: anywhere; }
.vlak-acties { display: flex; align-items: center; gap: 6px; width: 100%; }
.vlak-acties .label-filter { flex: 1; min-width: 0; display: flex; gap: 6px; }
.vlak-acties .label-filter select { height: 28px; font-size: var(--fs-sm); }
.vlak-acties .btn-primary { margin-left: auto; }
.vlak-voet { margin-top: auto; padding: 8px 12px; border-top: 1px solid var(--line); }
.vlak > .empty { margin: auto 0; }
.terug-stap { display: none; align-items: center; gap: 4px; width: 100%; font-size: var(--fs-sm); }
.notities-zoek { width: min(420px, 100%); }
.notities-hint { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.notities-hint .icoon { flex: none; margin-top: 2px; }

/* Notities in het midden: titel, datum, begin van de tekst, map (bij zoeken) en labels */
.nlijst { list-style: none; margin: 0; padding: 4px; overflow-y: auto; }
.nlijst a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 9px 10px; border-radius: var(--r-sm); border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.nlijst li:last-child a { border-bottom: 0; }
.nlijst a:hover { background: var(--surface-2); }
.nlijst a[aria-current="true"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.nlijst .t { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-tabel); font-weight: 600; }
.nlijst .t > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nlijst .t .icoon { width: 13px; height: 13px; flex: none; color: var(--accent); }
.nlijst .d { font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; }
.nlijst .s { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.nlijst .s:empty { display: none; }
.nlijst .m { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: var(--fs-xs); color: var(--text-2); }
.nlijst .m .icoon { width: 12px; height: 12px; }

/* De editor (rechts): titel, map en labels, het opmaakveld zonder eigen kader */
.vlak-editor .editor-kop { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 10px 8px 2px 14px; }
.vlak-editor .editor-kop form { display: contents; }
.editor-kop input.editor-titel:not([type="checkbox"]) { flex: 1; min-width: 0; height: auto; padding: 4px 6px; border-color: transparent; background: transparent; box-shadow: none; font-size: var(--fs-lg); font-weight: 600; }
.editor-kop input.editor-titel:not([type="checkbox"]):hover { border-color: var(--line); }
.editor-kop input.editor-titel:not([type="checkbox"]):focus { border-color: var(--accent); box-shadow: var(--focus); }
.editor-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 0 20px 8px; font-size: var(--fs-sm); color: var(--text-2); }
.editor-meta .mappad { display: inline-flex; align-items: center; gap: 5px; }
.editor-meta .icoon { width: 14px; height: 14px; }
.editor-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.editor-form .opmaakveld { flex: 1; display: flex; flex-direction: column; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.editor-form .opmaakveld .werkbalk { border-radius: 0; position: sticky; top: 0; z-index: 1; }
.editor-form .opmaakveld > .opmaak { flex: 1; padding: 14px 20px 20px; min-height: 16rem; }
.editor-voet { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 20px 12px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-2); }
.editor-voet .rechts { margin-left: auto; color: var(--text-2); }

/* Speld: een selectievakje (direct opslaan) dat eruitziet als speld; aan = gevuld in --accent */
.speld {
  position: relative; display: grid; place-items: center; flex: none;
  width: max(32px, var(--klikdoel)); height: max(32px, var(--klikdoel)); border-radius: var(--r-sm); color: var(--text-2); cursor: pointer;
}
.speld:hover { background: var(--surface-2); color: var(--text); }
.speld input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.speld:has(input:checked) { color: var(--accent); }
.speld:has(input:checked) .icoon { fill: currentColor; }
.speld:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Dialogen: map verwijderen (keuze), verplaatsen (lijst met paden), labels */
.keuze-lijst { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; }
.keuze-lijst label { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs); cursor: pointer; }
.keuze-lijst input { margin-top: 3px; flex: none; }
.keuze-lijst .uitleg { display: block; font-size: var(--fs-sm); color: var(--text-2); }
.gevaar-tekst { color: var(--danger); }
dialog.modal select[size] { height: auto; padding: 4px; background-image: none; }
dialog.modal select[size] option { padding: 5px 8px; border-radius: var(--r-sm); }
.label-keuze { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; border: 0; }
.label-lijst { list-style: none; margin: 0; padding: 4px 20px 12px; }
.label-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.label-lijst li:first-child .label-rij { border-top: 0; }

/* Telefoon en smal scherm: één vlak per stap (map → notities → bewerken), met een terug-link */
@media (max-width: 760px) {
  .drie { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .drie > .vlak { display: none; }
  .drie[data-stap="map"] > .vlak-boom, .drie[data-stap="lijst"] > .vlak-lijst, .drie[data-stap="notitie"] > .vlak-editor { display: flex; }
  .terug-stap { display: inline-flex; }
  .vlak-editor .editor-kop { padding-left: 12px; }
  .editor-meta, .editor-voet { padding-left: 14px; padding-right: 14px; }
  .editor-form .opmaakveld > .opmaak { padding: 12px 14px 16px; }
  .editor-form .opmaakveld .werkbalk { flex-wrap: nowrap; overflow-x: auto; }
}

/* 33. TEKSTOPMAAK: OPGEMAAKTE TEKST EN DE EDITOR (platformonderdeel, design-system §3.23, 2-11-2026) - */
/* Opgemaakte tekst (opmaakHtml() en de editor): zelfde opmaak bij lezen en bewerken */
.opmaak { font-size: var(--fs); line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.opmaak > :first-child { margin-top: 0; }
.opmaak > :last-child { margin-bottom: 0; }
.opmaak p { margin: 0 0 10px; }
.opmaak h3 { margin: 18px 0 6px; font-size: var(--fs-md); font-weight: 600; }
.opmaak h4 { margin: 14px 0 4px; font-size: var(--fs); font-weight: 600; }
.opmaak ul, .opmaak ol { margin: 0 0 10px; padding-left: 22px; }
.opmaak li > p { margin: 0 0 2px; }
.opmaak a { color: var(--accent); text-decoration: underline; }
.opmaak ul.opmaak-taken { list-style: none; padding-left: 2px; }
.opmaak li.opmaak-taak { display: flex; align-items: flex-start; gap: 8px; }
.opmaak li.opmaak-taak > input { margin-top: 4px; flex: none; }
.opmaak li.opmaak-taak > div { flex: 1; min-width: 0; }
.opmaak li.opmaak-taak.gedaan > div > p { color: var(--text-2); text-decoration: line-through; }
.opmaak .opmaak-tabel { overflow-x: auto; margin: 6px 0 12px; }
.opmaak table { border-collapse: collapse; font-size: var(--fs-tabel); }
.opmaak th, .opmaak td { border: 1px solid var(--line-strong); padding: 5px 9px; text-align: left; vertical-align: top; min-width: 4em; }
.opmaak th { background: var(--surface-2); font-weight: 600; }
.opmaak th p, .opmaak td p { margin: 0; }

/* Het veld: werkbalk boven de tekst, één kader */
.opmaakveld { border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); min-width: 0; }
.opmaakveld:focus-within { border-color: var(--accent); box-shadow: var(--focus); }
.werkbalk { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 4px 6px; border-bottom: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r) var(--r) 0 0; }
.werkbalk .btn-icon { width: 30px; height: 30px; color: var(--text-2); }
.werkbalk .btn-icon[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.werkbalk .btn-icon:disabled { opacity: .4; }
.werkbalk .scheider { width: 1px; height: 20px; background: var(--line-strong); margin: 0 4px; }
.werkbalk select.blokkeuze { width: auto; height: 30px; font-size: var(--fs-sm); padding-top: 0; padding-bottom: 0; }
.werkbalk .actiemenu-lijst { min-width: 12rem; }
.opmaakveld > .opmaak { padding: 12px 14px; min-height: 8rem; }
.opmaak-bewerk { outline: none; }
.opmaak-bewerk.opmaak-leeg[data-leeg]::before { content: attr(data-leeg); position: absolute; color: var(--text-3); pointer-events: none; }
.opmaak-bewerk table { width: auto; }

/* ProseMirror (MIT): de vaste regels van prosemirror-view, -gapcursor en -tables */
.ProseMirror { position: relative; word-wrap: break-word; white-space: pre-wrap; white-space: break-spaces; font-variant-ligatures: none; font-feature-settings: "liga" 0; }
.ProseMirror li { position: relative; }
.ProseMirror-hideselection *::selection { background: transparent; color: var(--text); }
.ProseMirror-hideselection { caret-color: transparent; }
.ProseMirror [draggable][contenteditable=false] { user-select: text; }
.ProseMirror-selectednode { outline: 2px solid var(--accent); }
li.ProseMirror-selectednode { outline: none; }
li.ProseMirror-selectednode::after { content: ""; position: absolute; left: -32px; right: -2px; top: -2px; bottom: -2px; border: 2px solid var(--accent); pointer-events: none; }
img.ProseMirror-separator { display: inline !important; border: none !important; margin: 0 !important; }
.ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; }
.ProseMirror-gapcursor::after { content: ""; display: block; position: absolute; top: -2px; width: 20px; border-top: 1px solid var(--text); animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite; }
@keyframes ProseMirror-cursor-blink { to { visibility: hidden; } }
.ProseMirror-focused .ProseMirror-gapcursor { display: block; }
.ProseMirror td, .ProseMirror th { position: relative; box-sizing: border-box; }
.ProseMirror .selectedCell::after { content: ""; position: absolute; inset: 0; z-index: 2; background: color-mix(in srgb, var(--accent) 22%, transparent); pointer-events: none; }
.modal-foot .spacer { flex: 1; }

/* 34. MAPPENBOOM EN NEERZETTEN (platformonderdelen, design-system §3.24 en §3.13, 2-11-2026) ------- */
.boom { list-style: none; margin: 0; padding: 6px; font-size: var(--fs-tabel); overflow-y: auto; }
.boom ul { list-style: none; margin: 0; padding: 0 0 0 16px; }
.boom-rij { display: flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 6px 0 2px; border-radius: var(--r-sm); color: var(--chrome-text); text-decoration: none; }
.boom-rij:hover { background: var(--chrome-2); color: var(--chrome-strong); text-decoration: none; }
.boom-rij[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.boom-rij:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.boom-rij .klap { display: grid; place-items: center; flex: none; width: 22px; height: 22px; color: var(--text-3); border-radius: var(--r-sm); }
.boom-rij .klap:hover { background: var(--line); }
.boom-rij .klap .icoon { width: 14px; height: 14px; transition: transform .12s; }
.boom-rij[aria-expanded="true"] .klap .icoon { transform: rotate(90deg); }
.boom-rij .naam { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.boom-rij .naam > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.boom-rij .naam .icoon { width: 16px; height: 16px; flex: none; }
.boom-rij .aantal { font-size: var(--fs-xs); color: var(--text-2); font-variant-numeric: tabular-nums; }
.boom > li:first-child { padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.boom > li:last-child { padding-top: 6px; margin-top: 6px; border-top: 1px solid var(--line); }
.neerzet-doel, .boom-rij.neerzet-doel { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-soft); }
@media (prefers-reduced-motion: reduce) { .boom-rij .klap .icoon { transition: none; } }

/* 35. DELEN (app Notities 2.1, design-system §3.25, 2-11-2026) ------------------------------------- */
/* Boom: de sectie Gedeeld met mij, de naam van de eigenaar en het icoon bij een map die je deelt */
.boom-sectie { margin: 10px 0 0; padding: 8px 14px 2px; border-top: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); }
.boom-gedeeld > li:first-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.boom-gedeeld > li:last-child { padding-top: 0; margin-top: 0; border-top: 0; }
.boom-rij .naam .eigenaar { flex: none; font-size: var(--fs-xs); color: var(--text-2); }
/* Lijst en notitie: wie deelt, met welk recht */
.vlak-regel { display: flex; align-items: center; gap: 5px; width: 100%; margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.vlak-regel .icoon, .editor-meta .deelregel .icoon { width: 14px; height: 14px; flex: none; }
.editor-meta .deelregel { display: inline-flex; align-items: center; gap: 5px; }
/* Alleen lezen: dezelfde opgemaakte tekst, zonder editor */
.vlak-editor .editor-kop .lees-titel { flex: 1; min-width: 0; margin: 0; padding: 4px 6px; font-size: var(--fs-lg); font-weight: 600; overflow-wrap: anywhere; }
.lees-vlak .opmaak-lezen { flex: 1; padding: 14px 20px 20px; border-top: 1px solid var(--line); overflow-y: auto; }
/* Map delen: de lijst met personen, het recht (keuzeknoppen) en Stoppen */
.delen-lijst { list-style: none; margin: 0; padding: 4px 20px 12px; }
.delen-lijst li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.delen-lijst li:first-child { border-top: 0; }
.delen-naam { flex: 1; min-width: 10rem; font-weight: 500; overflow-wrap: anywhere; }
.delen-rij { display: flex; align-items: center; gap: 8px; }
.delen-rij .keuzeknoppen { margin: 0; }
@media (max-width: 640px) {
  .lees-vlak .opmaak-lezen { padding: 12px 14px 16px; }
  .delen-lijst { padding: 4px 14px 12px; }
}

/* 36. BEELDBANK (app Beeldbank, design-system §3.26, 2-11-2026) --------------------------------- */
/* Deelkeuze in de appbalk: links (GET) met het uiterlijk van keuzeknoppen (§3.16) */
.deelkeuze { display: inline-grid; grid-auto-flow: column; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.deelkeuze a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--klikdoel); padding: 4px 14px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text-2); text-decoration: none; }
.deelkeuze a:hover { color: var(--text); text-decoration: none; }
.deelkeuze a[aria-current="page"] { background: var(--surface); color: var(--accent); font-weight: 500; box-shadow: 0 0 0 1px var(--line); }
.deelkeuze a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.beeldbank-uitleg { margin: 0 0 14px; }
/* Raster van beeldkaarten: het beeld op een licht en een donker vlak, daaronder naam, uitleg en downloads */
.beeld-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
/* De kaart snijdt niets af (dan valt het menu PNG niet weg); alleen de vlakken volgen de ronde hoeken */
.beeldkaart { display: flex; flex-direction: column; }
.beeldkaart .card-body { display: grid; gap: 8px; }
.beeldkaart h2 { font-size: var(--fs-md); }
.beeldkaart .hint { margin: 0; }
.beeldvlakken { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); overflow: hidden;
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; }
.beeldvlak { display: grid; place-items: center; aspect-ratio: 1; padding: 18%; }
.beeldvlak img { display: block; width: 100%; height: 100%; object-fit: contain; }
.beeldvlakken-badge .beeldvlak { padding: 5%; }
.beeldvlak-licht { color-scheme: light; background: var(--surface); }
.beeldvlak-donker { color-scheme: dark; background: var(--bg); }
/* Maskable: de veilige zone (80%, een cirkel) als stippellijn over het volle vierkant */
.beeldvlakken-maskable .beeldvlak { position: relative; }
.beeldvlakken-maskable .beeldvlak::after { content: ""; position: absolute; inset: 18%; margin: 10%; border: 1.5px dashed var(--surface); border-radius: 50%; pointer-events: none; }
.beeld-downloads { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.beeldbank-licentie { display: flex; align-items: flex-start; gap: 6px; margin: 16px 0 0; }
.beeldbank-licentie .icoon { flex: none; margin-top: 2px; }
/* Merk: kleurstalen in de kleur van het token, licht en donker naast elkaar (color-scheme kiest de waarde) */
/* Merk: op een brede laptop twee kolommen (Kleuren en Betekenis over de hele breedte), anders één */
.merk-kolom { display: grid; gap: 16px; max-width: 920px; align-items: start; }
@media (min-width: 1100px) {
  .merk-kolom { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1280px; }
  .merk-kolom .merk-breed { grid-column: 1 / -1; }
}
.staal { display: inline-block; width: 22px; height: 22px; margin-right: 8px; vertical-align: middle; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line-strong); }
.staal-licht { color-scheme: light; }
.staal-donker { color-scheme: dark; }
.staal-accent { background: var(--accent); }
.staal-accent-soft { background: var(--accent-soft); }
.staal-merk-ring { background: var(--merk-ring); }
.staal-merk-tekst { background: var(--merk-tekst); }
.merk-kleuren td { vertical-align: middle; }
.merk-token { display: block; white-space: nowrap; font-size: var(--fs-xs); font-weight: 400; }
.merk-letterproef { margin: 0 0 8px; font-size: var(--fs-xl); font-weight: 500; }
.merk-lijst { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.merk-welniet { list-style: none; padding: 0; }
.merk-welniet li { display: flex; align-items: flex-start; gap: 8px; }
.merk-welniet .badge { flex: none; min-width: 3.4em; justify-content: center; }
.merk-betekenis { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; }
.merk-betekenis .beeldvlak { padding: 8%; border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); }
@media (max-width: 640px) {
  .appbalk .deelkeuze { width: 100%; grid-auto-columns: 1fr; }
  .merk-betekenis { grid-template-columns: 1fr; }
  .merk-betekenis .beeldvlak { max-width: 220px; }
}

/* 37. SPAARPOT (app Spaarpot, design-system §3.27, 3-11-2026) ---------------------------------------- */
.spaarpot-uitleg { margin: 0 0 14px; }
.spaarpot-formulier { max-width: 32rem; }
/* Telefoon: de saldokaart met het totaal groot en de knop; laptop: cijfers en knop staan in de appbalk */
.saldokaart .card-body { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.saldo-bedrag { margin: 0; font-size: var(--fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.saldo-cijfers .hint { margin: 2px 0 0; }
.spaarpot-kop-cijfers, .spaarpot-balk-knop { display: none; }
.saldokaart, .spaarpot-zakgeld { margin-bottom: 16px; }
@media (min-width: 900px) {
  .spaarpot-kop-cijfers { display: flex; }
  .spaarpot-balk-knop { display: inline-flex; margin-right: 4px; white-space: nowrap; }
  .saldokaart { display: none; }
}
.spaarpot-indeling { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1000px) { .spaarpot-indeling { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.spaarpot-doelen { display: grid; gap: 10px; min-width: 0; }
.spaarpot-kop { display: flex; align-items: center; gap: 12px; }
.spaarpot-kop h2 { margin: 0; font-size: var(--fs-lg); }
/* Doelkaart: de plaatjes in een gekleurde cirkel, de naam, een dikke voortgangsbalk */
.doel-raster { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.doelkaart .card-body { display: grid; gap: 8px; }
.doelkaart h3 { margin: 0; font-size: var(--fs-md); overflow-wrap: anywhere; }
.doelkaart h3 a { color: var(--text); }
.doelkaart .hint, .doelkaart p { margin: 0; }
.doelkaart-gehaald { border-color: var(--ok); }
.doel-beelden { display: flex; gap: 8px; }
.beeldcirkel { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--text); }
.beeldcirkel .icoon { width: 24px; height: 24px; }
.beeldcirkel-1 { background: var(--cirkel-1); }
.beeldcirkel-2 { background: var(--cirkel-2); }
.beeldcirkel-3 { background: var(--cirkel-3); }
progress.progress.progress-dik { height: 12px; }
/* De balk in de tint van het doel: de zachte tint als spoor, de sterke als vulling */
progress.progress.progress-tint-1 { background: var(--cirkel-1); }
progress.progress.progress-tint-2 { background: var(--cirkel-2); }
progress.progress.progress-tint-3 { background: var(--cirkel-3); }
progress.progress.progress-tint-1::-webkit-progress-bar { background: var(--cirkel-1); }
progress.progress.progress-tint-2::-webkit-progress-bar { background: var(--cirkel-2); }
progress.progress.progress-tint-3::-webkit-progress-bar { background: var(--cirkel-3); }
progress.progress.progress-tint-1::-webkit-progress-value { background: var(--cirkel-sterk-1); }
progress.progress.progress-tint-2::-webkit-progress-value { background: var(--cirkel-sterk-2); }
progress.progress.progress-tint-3::-webkit-progress-value { background: var(--cirkel-sterk-3); }
progress.progress.progress-tint-1::-moz-progress-bar { background: var(--cirkel-sterk-1); }
progress.progress.progress-tint-2::-moz-progress-bar { background: var(--cirkel-sterk-2); }
progress.progress.progress-tint-3::-moz-progress-bar { background: var(--cirkel-sterk-3); }
/* Een plaatje kiezen: radioknoppen in een raster, het plaatje en de naam zichtbaar (dus toetsenbord en
   schermlezers werken vanzelf). Gekozen: --accent eromheen op --accent-soft. */
.beeldkeuze { margin: 0; padding: 0; border: 0; min-width: 0; }
.beeldkeuze legend { padding: 0; margin: 0 0 6px; font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.beeldkeuze-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 4px; }
.beeldkeuze-optie {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 6px 2px;
  border: 1px solid transparent; border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--text-2); text-align: center; overflow-wrap: anywhere; cursor: pointer;
}
.beeldkeuze-optie:hover { color: var(--text); background: var(--surface-2); }
.beeldkeuze-optie input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.beeldkeuze-optie:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--text); font-weight: 500; }
.beeldkeuze-optie:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.beeldkeuze-optie .beeldcirkel { width: 40px; height: 40px; }
.beeldkeuze-optie .beeldcirkel .icoon { width: 20px; height: 20px; }
.beeldcirkel-leeg { border: 1px dashed var(--line-strong); }
.beeldkeuze-meer > summary { padding: 10px 0; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.beeldkeuze-meer > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.doel-stand { font-variant-numeric: tabular-nums; }
.doel-stand strong { font-size: var(--fs-lg); }
.doel-tekst { overflow-wrap: anywhere; }
.spaarplan { font-weight: 500; }
.boeking-erbij { display: block; font-size: var(--fs-xs); }
.boekingen td { vertical-align: top; overflow-wrap: anywhere; }
.boekingen .num { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.spaarpot-lijst { list-style: none; margin: 0; padding: 4px 20px 12px; }
.spaarpot-lijst li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.spaarpot-lijst li:first-child { border-top: 0; }
.spaarpot-lijst-tekst { flex: 1; min-width: 10rem; overflow-wrap: anywhere; }
.spaarpot-bijnaam { display: flex; align-items: center; gap: 6px; }
.spaarpot-bijnaam input { width: 9rem; }
@media (max-width: 640px) { .spaarpot-lijst { padding: 4px 14px 12px; } }

/* Eigen foto's bij een doel (Spaarpot 1.1.0, design-system §3.27) */
.beeldcirkel-foto { overflow: hidden; background: var(--surface-2); }
.beeldcirkel-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-plek { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; min-width: 0; }
.foto-plek-veld { display: flex; flex: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.foto-voorbeeld img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-sm); }
.foto-plekken { display: grid; gap: 16px; }
@media (min-width: 640px) { .foto-plekken { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.foto-leeg { display: block; flex: none; width: 96px; height: 96px; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2); }
input[type="file"] { width: 100%; max-width: 100%; font: inherit; }

/* 38. LICHTBAK (platformonderdeel, design-system §3.30, 5-11-2026) --------------------------------- */
html:has(dialog.lichtbak[open]) { overflow: hidden; }
dialog.lichtbak {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--lichtbak-vlak);
  color: var(--lichtbak-tekst);
}
dialog.lichtbak[open] { display: grid; place-items: center; }
dialog.lichtbak::backdrop { background: var(--lichtbak-vlak); }
.lichtbak-foto { display: block; width: auto; height: auto; max-width: calc(100vw - 144px); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); }
.lichtbak-foto[hidden] { display: none; }
.lichtbak-knop {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--lichtbak-rand);
  border-radius: 50%;
  background: var(--lichtbak-knop);
  color: var(--lichtbak-tekst);
  cursor: pointer;
}
.lichtbak-knop[hidden] { display: none; }
.lichtbak-knop:focus-visible { outline: 2px solid var(--lichtbak-tekst); outline-offset: 2px; }
.lichtbak-sluit { top: 12px; right: 12px; }
.lichtbak-vorige { top: calc(50% - 24px); left: 12px; }
.lichtbak-volgende { top: calc(50% - 24px); right: 12px; }
.lichtbak-teller, .lichtbak-fout { margin: 0; padding: 4px 12px; border-radius: var(--r-sm); background: var(--lichtbak-knop); color: var(--lichtbak-tekst); }
.lichtbak-teller { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.lichtbak-teller[hidden], .lichtbak-fout[hidden] { display: none; }
@media (max-width: 640px) {
  .lichtbak-foto { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; object-fit: contain; }
  .lichtbak-vorige, .lichtbak-volgende { top: auto; bottom: 12px; }
}

/* 39. BESTAND KIEZEN (platformonderdeel, design-system §3.31, 5-11-2026) --------------------------- */
.bestandkiezer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.bestandkiezer [hidden] { display: none; }
.bestandkiezer-plek { position: relative; display: inline-flex; }
/* Alleen met JavaScript (de knop is dan zichtbaar): het echte veld onzichtbaar precies over de knop */
.bestandkiezer-knop:not([hidden]) + input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.bestandkiezer-plek:hover .bestandkiezer-knop { background: var(--surface-2); border-color: var(--text-3); }
.bestandkiezer-plek:focus-within .bestandkiezer-knop { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--focus); }
.bestandkiezer-naam { min-width: 0; color: var(--text-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
/* Niets gekozen bij het versturen: rode rand om de knop en de melding in de naamregel */
.bestandkiezer.is-fout .bestandkiezer-knop { border-color: var(--danger); }
.bestandkiezer.is-fout .bestandkiezer-naam { color: var(--danger); font-weight: 500; }
@media (max-width: 640px), (pointer: coarse) {
  .bestandkiezer-knop { height: 44px; }
}

/* 40. ONTWERPRICHTING D: KOPBALK, APP-KLEUR, SALDOTEGEL (design-system §1 en §3.32, 6-11-2026) ----- */
/* Kopbalk: het logo op een wit afgerond tegeltje (logo.svg blijft gelijk); de knoppen erin wit */
.topbar .brand-logo { width: 34px; height: 34px; padding: 3px; border-radius: 10px; background: var(--logo-tegel); }
.topbar .zijbalk-knop { color: var(--kopbalk-tekst); }
.topbar .user, .topbar .user a { color: var(--kopbalk-tekst); }
.topbar .user a { text-decoration: underline; }
.topbar .zijbalk-knop:hover { background: var(--kopbalk-hover); color: var(--kopbalk-tekst); }
.topbar .gebruikersmenu-knop:hover .avatar,
.topbar .gebruikersmenu[open] > .gebruikersmenu-knop .avatar { box-shadow: 0 0 0 2px var(--kopbalk-tekst); }
.topbar .gebruikersmenu-knop:focus-visible .avatar { outline-color: var(--kopbalk-tekst); }
/* App-iconen in een gekleurd rondje: in de zijbalk (24px) en vóór de titel in de appbalk (30px) */
.zijbalk-app a > .icoon, .nav a[data-app] > .icoon { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--app-zacht); color: var(--app-icoon); }
.appbalk-icoon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--app-zacht); color: var(--app-icoon); }
.appbalk-icoon .icoon { width: 17px; height: 17px; }
/* Saldotegel: het saldo in een gekleurd vlak; alles erin in --saldo-tekst (≥ 4,6:1), ook de focusring */
.saldo-tegel { background: var(--saldo-tegel); color: var(--saldo-tekst); --focus: 0 0 0 3px var(--saldo-tekst); }
.saldo-tegel .stat-label, .saldo-tegel .stat-value, .saldo-tegel .stat-note, .saldo-tegel .saldo-bedrag, .saldo-tegel .hint, .saldo-tegel .bedrag-plus, .saldo-tegel .bedrag-min, .saldo-tegel .bedrag-telt-niet { color: var(--saldo-tekst); }
.card.saldo-tegel { border-color: transparent; }
/* Een primaire knop in de tegel zou er even blauw zijn als de tegel: omgekeerd, zodat de vorm te zien is */
.saldo-tegel .btn-primary { background: var(--saldo-tekst); border-color: var(--saldo-tekst); color: var(--saldo-tegel); }
.saldo-tegel .btn-primary:hover { background: var(--saldo-tekst); border-color: var(--saldo-tekst); color: var(--saldo-tegel); box-shadow: 0 0 0 2px var(--saldo-tekst); }
.stats-kop .stat.saldo-tegel { background: var(--saldo-tegel); border-radius: var(--r); padding: 3px 14px; }
.stats-kop .stat.saldo-tegel + .stat { border-left: 0; }
@media (max-width: 720px) { .stats-kop .stat.saldo-tegel { padding: 3px 8px; } }


/* 41. SNELKOPPELINGEN EN STARTKAARTEN (app Snelkoppelingen en platformonderdeel, design-system §3.32 en §3.33, 7-11-2026) - */
/* Linktegel: de hele tegel is de link (een ::after over de tegel, zoals de app-tegels); de lettertegel staat ervoor
   (decoratief) en de ster en ⋯ staan ernaast, boven de klikbare laag, nooit in de <a>. De letter in --app-tekst op
   --app-zacht (≥ 4,6:1). Raster naast elkaar; is er geen ruimte voor twee kolommen (container smaller dan 448px),
   dan onder elkaar en heten de acties Omhoog/Omlaag in plaats van Naar links/Naar rechts.
   <ul class="linktegels"><li class="linktegel" id="link-12"><span class="linktegel-letter">R</span>
     <a class="linktegel-link" href="(adres)" target="_blank" rel="noopener noreferrer"><span class="linktegel-titel">…</span>
     <span class="linktegel-domein">…</span></a><div class="linktegel-acties">[ster] [⋯]</div></li> … </ul> */
.snelgroepen { display: flex; flex-direction: column; gap: 16px; }
.snelgroep .card-head h2 { min-width: 0; overflow-wrap: anywhere; }
.snel-formulier { max-width: 640px; }
.linktegels {
  container-type: inline-size; list-style: none; margin: 0; padding: 12px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 8px;
}
.linktegel {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 56px; padding: 8px 6px 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color .15s;
}
.linktegel:has(a.linktegel-link:hover) { border-color: var(--app-icoon); }
.linktegel:has(a.linktegel-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.linktegel-letter {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r);
  background: var(--app-zacht); color: var(--app-tekst); font-weight: 600; font-size: var(--fs-md); line-height: 1;
}
.linktegel-link { display: flex; flex-direction: column; min-width: 0; color: var(--text); }
a.linktegel-link:hover { text-decoration: none; }
a.linktegel-link:focus-visible { outline: none; }
a.linktegel-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.linktegel-titel, .linktegel-domein { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linktegel-titel { font-weight: 500; }
.linktegel-domein { font-size: var(--fs-xs); color: var(--text-2); }
.linktegel-kapot .linktegel-domein { color: var(--danger); }
.linktegel-acties { position: relative; z-index: 1; display: flex; align-items: center; gap: 2px; }
.linktegel-acties form[data-direct-opslaan] { display: flex; align-items: center; gap: 4px; }
.linktegel .tekst-onder { display: none; }
/* Versie 1.1: het website-icoon (32px, van de eigen server) op een licht vlakje (--logo-tegel, ook in donker licht), zodat
   ook een donker icoon te zien is; zonder icoon de letter */
.linktegel-icoon { background: var(--logo-tegel); }
.linktegel-icoon img { display: block; width: 32px; height: 32px; }
@container (max-width: 447.98px) {
  .linktegel .tekst-naast { display: none; }
  .linktegel .tekst-onder { display: inline; }
  /* Onder elkaar: de titel mag over twee regels, zodat er minder wordt afgekapt (de volledige titel staat in title) */
  .linktegel-titel { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
}
/* Telefoon: knoppen, ster, ⋯ en de regels in een actiemenu minstens 44px */
@media (max-width: 600px), (pointer: coarse) {
  body[data-app="snelkoppelingen"] main :is(.btn, .ster, .actiemenu > summary) { min-width: 44px; min-height: 44px; }
  body[data-app="snelkoppelingen"] main .actiemenu-lijst :is(a, button) { min-height: 44px; }
}

/* Startkaart (platform/startkaarten.php): een kaart van een app op de startpagina, onder de app-tegels, met het
   icoon van de app in zijn kleur (data-app op de kaart) en de items als linktegels zonder acties */
.startkaart { margin-top: 24px; }
.startkaart .card-head h2 { display: flex; align-items: center; gap: 8px; }
.startkaart-icoon { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--app-zacht); color: var(--app-icoon); }
.startkaart-icoon .icoon { width: 15px; height: 15px; }
/* Zonder ster en ⋯ (startkaart, /start buiten de bewerkmodus) twee kolommen; met (de bewerkmodus) de drie van de app */
.linktegels-start .linktegel:not(:has(> .linktegel-acties)) { grid-template-columns: auto minmax(0, 1fr); padding-right: 10px; }


/* 42. KALE PAGINA EN DE STARTPAGINA-WEERGAVE (platformonderdeel en Snelkoppelingen 1.2, design-system §3.34, 8-11-2026) ------ */
/* kaalBegin(): de blauwe kopbalk (.topbar) met alleen het logo en één menu ⋯, zonder zijbalk; de inhoud in het midden.
   /start/: een zoekveld (alleen in de pagina, start.js), groepen met compacte linktegels zonder ster en ⋯. */
.kaalkop { padding: 0 8px 0 12px; }
.kaalkop-menu > summary { color: var(--kopbalk-tekst); }
.kaalkop-menu > summary:hover, .kaalkop-menu[open] > summary { background: var(--kopbalk-hover); color: var(--kopbalk-tekst); }
.kaalkop-menu > summary:focus-visible { outline: 2px solid var(--kopbalk-tekst); outline-offset: -2px; }
.kaal-inhoud { width: 100%; max-width: 1180px; margin: 0 auto; padding: 16px var(--inhoud-x) 40px; display: flex; flex-direction: column; gap: 18px; }
/* Het zoekveld is de bestaande component .search (zoals in Notities), hier breder en 44px hoog */
.start-zoek { flex: none; width: 100%; max-width: 640px; }
.start-zoek input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { height: 44px; background: var(--surface); }
.start-geen { margin: 0; color: var(--text-2); }
.start-groep .card-head h3 { min-width: 0; overflow-wrap: anywhere; }
.start-tegels:not(.linklijst) .linktegel { min-height: 52px; }
/* De knop Startpagina in de appbalk van Snelkoppelingen, naast de primaire knop */
.snel-startknop { margin-right: 4px; white-space: nowrap; }
@media (max-width: 600px) {
  .kaalkop .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kaal .actiemenu-lijst :is(a, button) { min-height: 44px; }
}


/* 43. SNELKOPPELINGEN 1.3: PAGINA'S, KOLOMMEN, LIJST EN TABJES (design-system §3.32 en §3.34, 8-11-2026) ------------- */
/* Paginabalk: het menu Pagina's (icoon layers + de naam van de pagina) en de tabbladen (de component .tabs) met dezelfde
   links; vanaf 720px de tabbladen, smaller alleen het menu. In de app rechts het ⋯ van de pagina.
   <div class="snel-paginabalk"><details class="actiemenu snel-paginamenu">…</details><nav class="tabs snel-paginatabs">…</nav>[⋯]</div> */
.snel-paginabalk { display: flex; align-items: center; gap: 8px; min-width: 0; }
.snel-paginatabs { flex: 1 1 auto; min-width: 0; display: none; }
.snel-paginamenu { flex: none; }
.snel-paginamenu > summary { max-width: min(20rem, 70vw); gap: 6px; height: 36px; padding: 0 12px; font-size: var(--fs); }
.snel-paginamenu-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snel-paginamenu .actiemenu-lijst a[aria-current="page"] { font-weight: 600; color: var(--accent); }
.snel-paginabalk > .actiemenu:last-child:not(.snel-paginamenu) { margin-left: auto; }
/* Kolommen: 1 tot 6 naast elkaar vanaf 720px, smaller altijd één kolom; elke kolom een stapel groepen */
.snel-kolommen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.snel-kolom { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.snel-kolom:empty { display: none; }
@media (min-width: 720px) {
  .snel-paginatabs { display: flex; }
  .snel-kolom:empty { display: flex; }
  .snel-kolommen-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .snel-kolommen-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .snel-kolommen-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .snel-kolommen-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .snel-kolommen-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* Lijst (zoals start.me): in de kaart van de groep compacte regels onder elkaar, zonder eigen balkje of rand; alleen ruimte
   ertussen en een lichte achtergrond onder de muis. Een klein icoon, de titel op één regel, het domein alleen voor
   schermlezers en in de tooltip. Regels 34px met een muis (pointer: fine), 44px op een aanraakscherm (pointer: coarse).
   De acties heten altijd Omhoog/Omlaag (onder elkaar). */
.linktegels.linklijst { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 6px 8px 8px; }
.linklijst .linktegel { min-height: 40px; padding: 2px 4px 2px 10px; gap: 10px; border-color: transparent; background: transparent; }
@media (pointer: fine) { .linklijst .linktegel { min-height: 34px; } }
@media (pointer: coarse) { .linklijst .linktegel { min-height: 44px; } }
.linklijst .linktegel:has(a.linktegel-link:hover) { border-color: transparent; background: var(--surface-2); }
.linklijst .linktegel-letter { width: 24px; height: 24px; border-radius: var(--r-sm); font-size: var(--fs-sm); }
.linklijst .linktegel-icoon img { width: 20px; height: 20px; }
/* Het domein alleen visueel weg: de schermlezer noemt het nog ("Titel domein"), net als bij de tegels */
.linklijst .linktegel-domein { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.linklijst .linktegel-titel { white-space: nowrap; display: block; font-weight: 400; }
.linklijst .tekst-naast { display: none; }
.linklijst .tekst-onder { display: inline; }
/* Tabjes in een groep: een veegstrook (.tabs, schuift binnen de strook), één paneel tegelijk (tabjes.js); de naam boven
   een paneel alleen zonder JavaScript zichtbaar, met het ⋯ van het tabje rechts */
/* De strook van de tabjes: de tablijst (.tabs, schuift alleen horizontaal) en rechts het ⋯ van het gekozen tabje (tabjes.js) */
.snel-tabbalk { display: flex; align-items: center; gap: 4px; margin: 0 12px; box-shadow: inset 0 -1px 0 var(--line); }
.snel-tabbalk > .tabs { flex: 1 1 auto; min-width: 0; box-shadow: none; }
.snel-tabmenu { flex: none; display: flex; align-items: center; }
.snel-tabmenu:empty { display: none; }
.snel-tabjesgroep { padding-top: 4px; }
.snel-tabkop { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 0; min-width: 0; }
.snel-tabnaam { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); overflow-wrap: anywhere; }
.tabjes-aan .snel-tabnaam { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tabjes-aan .snel-tabkop { justify-content: flex-end; padding-top: 4px; }
.tabjes-aan .snel-tabkop:not(:has(.actiemenu)) { display: none; }
/* /start: de kale pagina over de hele breedte; de paginanaam alleen bij het zoeken zichtbaar (dan staan de pagina's onder
   elkaar), de plek van een treffer klein onder de titel */
.kaal-inhoud:has(.snel-kolommen) { max-width: none; }
/* Rechts in de kopbalk (kaalBegin, Platform 1.12.0; 1.20.4): het zoekveld (300px), het potlood (bewerkKnop) of in de bewerkmodus
   Link toevoegen en Klaar, en het menu ⋯. Alle drie even hoog (--kaalkop-maat: 36px, op een aanraakscherm of smal scherm 44px),
   verticaal in het midden, 8px ertussen; rechts valt de groep gelijk met de inhoud eronder (padding --inhoud-x).
   Het veld is het vlak (--surface) met gewone tekst; de focusring (in de tekstkleur van de balk, zodat hij op blauw opvalt) is een
   outline tegen de rand: de maat verspringt nooit. Klaar is de hoofdknop: wit op de blauwe balk; Link toevoegen een witte rand.
   Smaller dan 720px: het veld op een eigen regel in de balk, over de hele breedte; de knoppen alleen met icoon (Klaar met tekst). */
.kaalkop { --kaalkop-maat: 36px; gap: 8px; padding-right: var(--inhoud-x); }
@media (pointer: coarse) { .kaalkop { --kaalkop-maat: 44px; } }
.kaalkop-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.kaalkop .start-zoek { width: 300px; max-width: 300px; }
.kaalkop .start-zoek input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { height: var(--kaalkop-maat); color: var(--text); background: var(--surface); border-color: var(--surface); }
.kaalkop .start-zoek input::placeholder { color: var(--text-2); opacity: 1; }
.kaalkop .start-zoek input:focus, .kaalkop .start-zoek input:focus-visible { outline: 2px solid var(--kopbalk-tekst); outline-offset: 0; box-shadow: none; border-color: var(--accent); }
.kaalkop-knop { flex: none; height: var(--kaalkop-maat); }
.kaalkop-knop:focus-visible, .kaalkop .bewerkknop:focus-visible { outline: 2px solid var(--kopbalk-tekst); outline-offset: 2px; box-shadow: none; }
.kaalkop .bewerkknop, .kaalkop-menu > summary { width: var(--kaalkop-maat); height: var(--kaalkop-maat); flex: none; }
.kaalkop .bewerkknop { color: var(--kopbalk-tekst); }
.kaalkop .bewerkknop:hover { background: var(--kopbalk-hover); color: var(--kopbalk-tekst); }
.kaalkop .btn-primary.kaalkop-knop { background: var(--kopbalk-tekst); border-color: var(--kopbalk-tekst); color: var(--kopbalk); font-weight: 600; }
.kaalkop .btn-primary.kaalkop-knop:hover { background: color-mix(in srgb, var(--kopbalk-tekst) 88%, var(--kopbalk)); }
.kaalkop .kaalkop-knop-rand { background: transparent; border-color: color-mix(in srgb, var(--kopbalk-tekst) 70%, transparent); color: var(--kopbalk-tekst); }
.kaalkop .kaalkop-knop-rand:hover { background: var(--kopbalk-hover); }
/* De app: de kopbalk en de kolommen even breed (geen grens van 1280px) */
body[data-app="snelkoppelingen"] .content { max-width: none; }   /* alle pagina's van de app (1.4): de appbalk even breed als de rest */
/* De kerncijfers schuiven nooit onder de knoppen: is de inhoud (zonder zijbalk) smaller dan 900px, dan staan ze op een eigen
   regel onder de titel en de knoppen (zoals op een telefoon). Gemeten aan de inhoud zelf (container query), niet aan het venster. */
body[data-app="snelkoppelingen"] .content:has(> .appbalk) { container: appinhoud / inline-size; }
@container appinhoud (max-width: 900px) {
  .appbalk { grid-template-columns: minmax(0, 1fr) auto; }
  .appbalk-midden { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; padding-bottom: 4px; }
}
/* De + direct achter de laatste paginatab (Pagina toevoegen), alleen waar je kunt bewerken */
.tabs a.snel-paginaplus { padding: 8px 10px; color: var(--text-2); }
.tabs a.snel-paginaplus .icoon { width: 16px; height: 16px; }
@media (max-width: 719.98px) {
  .kaalkop { height: auto; min-height: var(--topbar); flex-wrap: wrap; }
  .kaalkop-rechts { display: contents; }
  .kaalkop { --kaalkop-maat: 44px; padding-left: var(--inhoud-x); }
  .kaalkop .start-zoek { order: 10; flex: 1 0 100%; width: 100%; max-width: none; padding-bottom: 8px; }
  .kaalkop-knop { min-width: 44px; padding: 0 10px; }
  .kaalkop-knoptekst { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
.start-pagina { display: flex; flex-direction: column; gap: 12px; }
.start-paginakop { margin: 0; font-size: var(--fs-md); font-weight: 600; }
body:not(.start-zoeken) .start-paginakop { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.start-plek { font-size: var(--fs-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-leeg { margin: 0; padding: 12px 18px; font-size: var(--fs-sm); }
@media (max-width: 600px), (pointer: coarse) {
  .tabs a, .tabs button, .snel-paginamenu > summary { min-height: 44px; }
}


/* 44. SNELKOPPELINGEN 1.4: SLEPEN (design-system §3.13 en §3.32, 8-11-2026) ------------------------------------------------------ */
/* Het greepje (grip-vertical) in de bewerkmodus: bij een link vóór de ster en ⋯ (op dezelfde regel), bij een groep in de
   kaartkop vóór ⋯, bij een tabje en een paginatab klein achter de naam (alleen muis en aanraak). */
.linktegel-acties .sorteer-greep { color: var(--text-3); }
.snel-groepacties { display: flex; align-items: center; gap: 2px; }
.tabs .snel-tab { display: inline-flex; align-items: center; flex: none; }
.tabs .snel-tab > .sorteer-greep { width: 20px; min-width: 20px; height: 28px; padding: 0; opacity: .55; }
.tabs .snel-tab:hover > .sorteer-greep, .tabs .snel-tab.is-gesleept > .sorteer-greep { opacity: 1; }
.tabs .snel-tab > .sorteer-greep .icoon { width: 14px; height: 14px; }
/* Tijdens het slepen van een groep is ook een lege kolom een plek om neer te zetten */
.is-slepen .snel-kolom.sorteer-doel { min-height: 120px; }
/* De statusregel van een kale pagina staat in de blauwe balk (kaalBegin, Platform 1.13.0) */
.kaalkop-status { flex: 1 1 auto; min-width: 0; margin: 0 8px; text-align: right; color: var(--kopbalk-tekst); font-size: var(--fs-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Op een smal scherm tussen het logo en de knoppen (zoals breed): de knoppen staan rechts, gelijk met de inhoud (1.20.4) */
@media (pointer: coarse) {
  .tabs .snel-tab > .sorteer-greep { width: 44px; min-width: 44px; height: 44px; opacity: 1; }
}

/* 45. SNELKOPPELINGEN 1.4: ARCHIEF, TABJES OP MEER REGELS, PAGINATABS, LANGE GROEPSNAAM (design-system §3.32 en §3.34) ---------- */
/* Tabjes in een smalle groep lopen door op een volgende regel (geen schuifbalk); de lijn onder de strook onder de laatste regel */
.snel-tabbalk > .tabs.snel-tabjes { flex-wrap: wrap; overflow: visible; row-gap: 0; }
/* Paginatabs: één regel zonder zichtbare schuifbalk; een zachte vervaging aan de rand waar nog meer staat (tabjes.js zet
   data-vervaag="links|rechts|beide"; een masker telt alleen de dekking, dus een token); scrollen met het wiel of een vinger; het menu Pagina's toont alles */
.snel-paginatabs { scrollbar-width: none; }
.snel-paginatabs::-webkit-scrollbar { display: none; }
.snel-paginatabs[data-vervaag="rechts"] { -webkit-mask-image: linear-gradient(to right, var(--text) calc(100% - 32px), transparent); mask-image: linear-gradient(to right, var(--text) calc(100% - 32px), transparent); }
.snel-paginatabs[data-vervaag="links"] { -webkit-mask-image: linear-gradient(to right, transparent, var(--text) 32px); mask-image: linear-gradient(to right, transparent, var(--text) 32px); }
.snel-paginatabs[data-vervaag="beide"] { -webkit-mask-image: linear-gradient(to right, transparent, var(--text) 32px, var(--text) calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, var(--text) 32px, var(--text) calc(100% - 32px), transparent); }
/* Een lange groepsnaam: hoogstens twee regels (dan …), de knoppen blijven rechts op de eerste regel; de hele naam in title */
.snelgroep > .card-head { flex-wrap: nowrap; align-items: flex-start; }
.snelgroep > .card-head > :is(h2, h3) { flex: 1 1 auto; min-width: 0; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.snelgroep > .card-head > :is(.actiemenu, .snel-groepacties) { flex: none; }
/* Archief: de melding op een pagina in het archief, de regel bij het zoeken op /start (het archief in het menu: sectie 46) */
.snel-archiefmelding { align-items: center; }
.snel-archiefmelding > .btn { margin-left: auto; }
.start-archief { margin: 0; color: var(--text-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.start-archief[hidden] { display: none; }

/* 46. SNELKOPPELINGEN 1.5: HET MENU PAGINA'S (design-system §3.32, 9-11-2026) --------------------------------------------- */
/* De knop: vanaf 720px (waar de tabbladen staan) de vaste tekst "Pagina's", zodat de tabbalk nooit verspringt; smaller (geen
   tabbladen) de naam van de open pagina. Het menu: bovenin het zoekveld (bij meer dan 8 pagina's), dan de pagina's en het
   archief (een uitklapblok, alleen dit deel schuift), onderaan Pagina toevoegen.
   <div class="actiemenu-lijst snel-paginalijst">[.snel-paginazoek]<div class="snel-paginarol">a… p.snel-paginageen
   details.snel-paginaarchief</div>[hr a.snel-paginatoevoegen]</div> */
.snel-paginamenu-vast { display: none; }
@media (min-width: 720px) {
  .snel-paginamenu-vast { display: inline; }
  .snel-paginamenu-naam { display: none; }
}
.snel-paginalijst { width: max-content; min-width: 14rem; max-width: min(24rem, calc(100vw - 32px)); }
.snel-paginalijst a { overflow: hidden; text-overflow: ellipsis; }
/* Eén schuivende lijst (gewone pagina's en archief samen): geen regel krimpt, ook niet met overflow: hidden (min-height 0).
   Het menu blijft binnen het scherm (--actiemenu-ruimte uit platform.js): alleen .snel-paginarol wordt dan lager. */
.snel-paginalijst { max-height: var(--actiemenu-ruimte, none); }
.snel-paginalijst > :not(.snel-paginarol), .snel-paginarol > *, .snel-paginaarchief > div > * { flex: none; }
.snel-paginarol { flex: 0 1 auto; }
.snel-paginalijst a, .snel-paginaarchief > summary { min-height: 32px; }
.snel-paginarol { display: flex; flex-direction: column; min-height: 0; max-height: min(60vh, 28rem); overflow-y: auto; overscroll-behavior: contain; }
.snel-paginazoek { padding: 2px 2px 6px; }
.snel-paginazoek input[type="search"][data-pagina-zoekveld] { width: 100%; height: 36px; font-size: var(--fs-sm); }
.snel-paginageen { margin: 0; padding: 7px 10px; font-size: var(--fs-sm); color: var(--text-2); }
.snel-paginaarchief > summary { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: var(--r-sm); list-style: none;
  font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; }
.snel-paginaarchief > summary::-webkit-details-marker { display: none; }
.snel-paginaarchief > summary:hover, .snel-paginaarchief > summary:focus-visible { background: var(--surface-2); }
.snel-paginaarchief > summary .icoon { width: 14px; height: 14px; flex: none; }
.snel-paginaarchief[open] > summary .icoon { transform: rotate(90deg); }
.snel-paginaarchief > div { display: flex; flex-direction: column; }
.snel-paginaarchief > div a { padding-left: 30px; }
.snel-paginaarchief[hidden] { display: none; }
.snel-paginalijst a.snel-paginatoevoegen { display: flex; align-items: center; gap: 6px; }
.snel-paginatoevoegen .icoon { width: 16px; height: 16px; flex: none; }
@media (max-width: 719.98px) {
  .snel-paginalijst { width: calc(100vw - 32px); }
}
@media (max-width: 600px), (pointer: coarse) {
  .snel-paginazoek input[type="search"][data-pagina-zoekveld] { height: 44px; }
  .snel-paginalijst a, .snel-paginaarchief > summary { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .snel-paginaarchief > summary .icoon { transition: transform .12s ease; }
}

/* 47. SNELKOPPELINGEN 1.5: DE ACTIEVE PAGINATAB ALS PIL (design-system §3.32, 9-11-2026) --------------------------------- */
/* Alleen de paginatabs (de tabjes in een groep houden hun streep). Geen lijn onder de strook. De open pagina: een pil van
   ±36px met het vlak voor 70% (doorzichtig, met vervaging erachter: blijft leesbaar op een foto als achtergrond), de tekst
   in --text en halfvet, en een rand in --accent: een lichte vulling haalt nooit 3:1 tegen de pagina, de rand wel (licht 4,3:1,
   donker 7,5:1, zwart 8,5:1). Niet-actief zonder achtergrond; onder de muis een lichtere pil zonder rand. Ruimte boven en
   onder de strook, zodat de focusring niet wordt afgesneden. */
.snel-paginatabs { box-shadow: none; align-items: center; padding-block: 4px; }
.snel-paginatabs a[data-pagina-link] { min-height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; }
.snel-paginatabs a[data-pagina-link]:hover { background: color-mix(in srgb, var(--surface) 40%, transparent); color: var(--text); }
.snel-paginatabs a[data-pagina-link][aria-current="page"] { color: var(--text); font-weight: 600; border-color: var(--accent);
  background: color-mix(in srgb, var(--surface) 70%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.snel-paginatabs a[data-pagina-link]:focus-visible { border-radius: 8px; }
@media (max-width: 600px), (pointer: coarse) {
  .snel-paginatabs a[data-pagina-link] { min-height: 44px; }
}


/* 48. ACHTERGROND, BANDEN EN UITERLIJK & HUISSTIJL (Platform 1.15.0, design-system §3.36, 9-11-2026) ----------------------- */
/* De achtergrond van vandaag (platform/uiterlijk.php zet data-achtergrond op <body>): een vast laagje achter alles, met de horizon
   onderaan. Geen background-attachment: fixed (telefoons); 100lvh, zodat er niets verspringt als de adresbalk inklapt. Niets
   beweegt. Licht de -licht.svg, donker de -donker.svg; Zwart nooit een beeld (effen). Zonder data-achtergrond of met "geen": zoals
   vroeger. De versies achter de url()'s zet tools/maak-versies.php. */
body[data-achtergrond]:not([data-achtergrond="geen"])::before {
  content: ""; position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100vh; height: 100lvh; pointer-events: none;
  background-color: var(--bg); background-repeat: no-repeat; background-position: center bottom; background-size: cover;
}
body[data-achtergrond="vallei"]::before { background-image: url("../achtergrond/vallei-licht.svg?v=5db262b940"); }
body[data-achtergrond="kust"]::before { background-image: url("../achtergrond/kust-licht.svg?v=86dcaa10ec"); }
body[data-achtergrond="sinterklaas"]::before { background-image: url("../achtergrond/sinterklaas-licht.svg?v=444c229413"); }
body[data-achtergrond="kerst"]::before { background-image: url("../achtergrond/kerst-licht.svg?v=767420d028"); }
body[data-achtergrond="oudnieuw"]::before { background-image: url("../achtergrond/oudnieuw-licht.svg?v=fe397d9641"); }
:root[data-theme="dark"] body[data-achtergrond="vallei"]::before { background-image: url("../achtergrond/vallei-donker.svg?v=f97f9202d0"); }
:root[data-theme="dark"] body[data-achtergrond="kust"]::before { background-image: url("../achtergrond/kust-donker.svg?v=62d0e8e4bf"); }
:root[data-theme="dark"] body[data-achtergrond="sinterklaas"]::before { background-image: url("../achtergrond/sinterklaas-donker.svg?v=e9d0d8d4b1"); }
:root[data-theme="dark"] body[data-achtergrond="kerst"]::before { background-image: url("../achtergrond/kerst-donker.svg?v=61837b89df"); }
:root[data-theme="dark"] body[data-achtergrond="oudnieuw"]::before { background-image: url("../achtergrond/oudnieuw-donker.svg?v=135fbfd4da"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-achtergrond="vallei"]::before { background-image: url("../achtergrond/vallei-donker.svg?v=f97f9202d0"); }
  :root:not([data-theme="light"]) body[data-achtergrond="kust"]::before { background-image: url("../achtergrond/kust-donker.svg?v=62d0e8e4bf"); }
  :root:not([data-theme="light"]) body[data-achtergrond="sinterklaas"]::before { background-image: url("../achtergrond/sinterklaas-donker.svg?v=e9d0d8d4b1"); }
  :root:not([data-theme="light"]) body[data-achtergrond="kerst"]::before { background-image: url("../achtergrond/kerst-donker.svg?v=61837b89df"); }
  :root:not([data-theme="light"]) body[data-achtergrond="oudnieuw"]::before { background-image: url("../achtergrond/oudnieuw-donker.svg?v=135fbfd4da"); }
}
:root[data-dark="oled"] body::before { content: none; }
/* Band: tekst die anders direct op de achtergrond zou staan, krijgt een dicht vlak (leesbaarheid gaat voor; op het slechtste punt
   haalt tekst direct op een beeld maar 1–2:1). Alleen met een achtergrond; zonder ("geen") blijft alles zoals het was.
   De paginakop, een losse lege staat, het merk op de inlogpagina, de paginabalk van Snelkoppelingen, de regels bij het zoeken
   op /start, een lege pagina (p.muted), de uitleg van de Beeldbank, en sinds Platform 1.18.0 de terug-link. Test Y zoekt op elke pagina tekst zonder vlak erachter: 0. */
body[data-achtergrond]:not([data-achtergrond="geen"]) :is(.content > .page-head, .content > .empty, .content > .beeldbank-uitleg,
  .content > .beeldbank-licentie, .content > p.muted, .start-pagina > p.muted, .auth-merk, .snel-paginabalk, .start-geen, .start-archief,
  .content > .terug-link) {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
body[data-achtergrond]:not([data-achtergrond="geen"]) :is(.content > .page-head, .content > .empty) { padding: 14px 18px; }
body[data-achtergrond]:not([data-achtergrond="geen"]) :is(.content > .beeldbank-uitleg, .content > .beeldbank-licentie, .content > p.muted, .start-pagina > p.muted, .start-geen, .start-archief) { margin: 0; padding: 10px 14px; }
body[data-achtergrond]:not([data-achtergrond="geen"]) .auth-merk { align-self: center; padding: 16px 28px 12px; }
body[data-achtergrond]:not([data-achtergrond="geen"]) .snel-paginabalk { padding: 2px 6px; }
/* De terug-link (Platform 1.18.0): een klein vlak om de link, niet de volle breedte */
body[data-achtergrond]:not([data-achtergrond="geen"]) .content > .terug-link { align-self: flex-start; padding: 4px 10px; }
body.start-zoeken[data-achtergrond]:not([data-achtergrond="geen"]) .start-paginakop {
  align-self: flex-start; padding: 6px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
/* Het vlak "+ Kolom" van het kasboek (stippellijn) is met een achtergrond dicht */
body[data-achtergrond]:not([data-achtergrond="geen"]) .bord-plek { background: var(--surface); }
body[data-achtergrond]:not([data-achtergrond="geen"]) .bord-plek:hover { background: var(--accent-soft); }

/* De app Uiterlijk & huisstijl: de bibliotheek. Per achtergrond een voorbeeld in licht en donker (het beeld met de horizon
   onderaan, een stukje kopbalk met het logo van die achtergrond), de naam, de planning en de acties. */
.uiterlijk-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
/* Geen overflow: hidden op de kaart (dat knipte het menu ⋯ af); alleen de voorbeelden volgen de afgeronde hoeken. Een kaart met
   een open menu ligt boven de kaarten ernaast en eronder. */
.uiterlijk-kaart { display: flex; flex-direction: column; }
.uiterlijk-kaart:has(.actiemenu[open]) { position: relative; z-index: 2; }
.uiterlijk-voorbeelden { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); overflow: hidden;
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; }
.uiterlijk-voorbeeld { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg); }
.uiterlijk-voorbeeld-licht { color-scheme: light; }
.uiterlijk-voorbeeld-donker { color-scheme: dark; }
.uiterlijk-beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.uiterlijk-minibalk { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; height: 22px; padding: 0 6px; background: var(--kopbalk); }
.uiterlijk-minibalk img { display: block; width: 16px; height: 16px; padding: 1px; border-radius: 5px; background: var(--logo-tegel); }
.uiterlijk-kaart-body { display: grid; gap: 8px; }
.uiterlijk-kop { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.uiterlijk-kop h2 { font-size: var(--fs-md); margin-right: auto; }
.uiterlijk-kaart .hint { margin: 0; }
.uiterlijk-acties { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.uiterlijk-acties .actiemenu { margin-left: auto; }
.uiterlijk-periode { grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); }
.beeldbank-keuze { justify-self: start; align-self: flex-start; }
@media (max-width: 600px), (pointer: coarse) {
  .uiterlijk-acties .btn, .uiterlijk-acties summary { min-height: 44px; min-width: 44px; }
}


/* 49. MATGLAS: DEKKING VAN KAARTEN EN BANDEN (Platform 1.16.0, matglas in procenten sinds 1.17.0; design-system §3.36) ------- */
/* data-dekking="100|95|…|50" op <body> (de keuze in Uiterlijk & huisstijl, voor iedereen; 100 = dicht): inhoudskaarten, de banden
   (sectie 48) en de paginabalk van /start worden matglas: het vlak op die dekking, met 28 px vervaging en saturate(1.4). 50 is de gemeten
   ondergrens (platform/uiterlijk.php, KAARTEN_DEKKINGEN). Alleen met een beeld (niet bij Geen), niet bij Zwart, niet als het apparaat om
   minder doorzichtigheid vraagt, en alleen als de browser het kan (@supports); anders dicht zoals altijd. Niet de inlogkaart en niet een
   vlak met een invulveld of de editor (een verborgen veld telt niet, een veld in een menu ook niet: het menu is zelf dicht). Menu's,
   dialogen, meldingen, velden, de appbalk, de zijbalk en de kopbalk blijven dicht.
   Meekleuren: op matglas is grijze tekst (--text-2, --text-3) gelijk aan --text, en de accent- en app-kleuren gaan voor 55% naar --text
   (--accent-matglas, --app-icoon-matglas, --app-tekst-matglas, bij de app-kleuren bovenaan; de app-kleur volgt de data-app van het vlak zelf). (50% gaf in Chrome 4,48:1 op Sinterklaas donker.) Zo haalt alle tekst
   4,5:1 en elk icoon 3:1 op het slechtste punt van elk beeld (test Y1). Een vlak met een open menu ligt boven de andere (de vervaging maakt
   van elk vlak een eigen laag). */
:is(body, .weergave-mini-dekking)[data-dekking="95"] { --dekking: 95%; }
:is(body, .weergave-mini-dekking)[data-dekking="90"] { --dekking: 90%; }
:is(body, .weergave-mini-dekking)[data-dekking="85"] { --dekking: 85%; }
:is(body, .weergave-mini-dekking)[data-dekking="80"] { --dekking: 80%; }
:is(body, .weergave-mini-dekking)[data-dekking="75"] { --dekking: 75%; }
:is(body, .weergave-mini-dekking)[data-dekking="70"] { --dekking: 70%; }
:is(body, .weergave-mini-dekking)[data-dekking="65"] { --dekking: 65%; }
:is(body, .weergave-mini-dekking)[data-dekking="60"] { --dekking: 60%; }
:is(body, .weergave-mini-dekking)[data-dekking="55"] { --dekking: 55%; }
:is(body, .weergave-mini-dekking)[data-dekking="50"] { --dekking: 50%; }
@supports ((backdrop-filter: blur(28px) saturate(1.4)) or (-webkit-backdrop-filter: blur(28px) saturate(1.4))) {
  @media (prefers-reduced-transparency: no-preference) {
    :root:not([data-dark="oled"]) body[data-achtergrond]:not([data-achtergrond="geen"])[data-dekking]:not([data-dekking="100"]) :is(.card:not(.auth-card),
      .content > .page-head, .content > .empty, .content > .beeldbank-uitleg, .content > .beeldbank-licentie, .content > p.muted,
      .start-pagina > p.muted, .auth-merk, .snel-paginabalk, .start-geen, .start-archief, .content > .terug-link):not(:has(input:not([type="hidden"]):not(.actiemenu-lijst *),
      select:not(.actiemenu-lijst *), textarea:not(.actiemenu-lijst *), .editor)),
    :root:not([data-dark="oled"]) body.start-zoeken[data-achtergrond]:not([data-achtergrond="geen"])[data-dekking]:not([data-dekking="100"]) .start-paginakop {
      --text-2: var(--text);
      --text-3: var(--text);
      --accent: var(--accent-matglas);
      --app-icoon: var(--app-icoon-matglas);
      --app-tekst: var(--app-tekst-matglas);
      background: color-mix(in srgb, var(--surface) var(--dekking, 100%), transparent);
      -webkit-backdrop-filter: blur(28px) saturate(1.4); backdrop-filter: blur(28px) saturate(1.4);
    }
    :root:not([data-dark="oled"]) body[data-achtergrond]:not([data-achtergrond="geen"])[data-dekking]:not([data-dekking="100"]) :is(.card, .snel-paginabalk, .content > .page-head):has(.actiemenu[open]) { position: relative; z-index: 3; }
  }
}
/* Het voorbeeld op het tabblad Weergave: twee kleine kaarten op het beeld van vandaag, de ene dicht en de andere met de gekozen dekking
   (de regelaar zet data-dekking op het kaartje, uiterlijk.js) */
.weergave-voorbeeld { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; aspect-ratio: 16 / 7;
  max-width: 32rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); color-scheme: light; background: var(--bg); }
.weergave-mini { position: relative; padding: 14px 18px; border: 1px solid var(--vlak-rand); border-radius: var(--r-lg); background: var(--surface);
  color: var(--text); font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--shadow); }
.weergave-mini-dekking:not([data-dekking="100"]) { background: color-mix(in srgb, var(--surface) var(--dekking, 100%), transparent);
  -webkit-backdrop-filter: blur(28px) saturate(1.4); backdrop-filter: blur(28px) saturate(1.4); }
.dekking-regel { display: flex; align-items: center; gap: 12px; max-width: 28rem; }
.dekking-regel input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); }
.dekking-getal { flex: none; min-width: 7.5em; font-variant-numeric: tabular-nums; font-weight: 600; }
@media (max-width: 600px), (pointer: coarse) {
  .dekking-regel input[type="range"] { min-height: 44px; }
}


/* 50. SPULLENBOEK EN FILTERCHIPS (app Spullenboek 1.0 en platformonderdeel, Platform 1.18.0; design-system §3.37 en §3.38) ----- */
/* Filterchips: een rij links die het overzicht filteren (GET, wijzigt niets), de gekozen met aria-current="page" in de kleur van de
   app (zacht vlak, --app-tekst, rand --app-icoon). Op een telefoon één schuivende rij; op een aanraakscherm 44 px hoog. Altijd in een
   kaart (nooit los op de achtergrond). */
.filterchips { display: flex; flex-wrap: wrap; gap: 8px; }
.filterchip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border: 1px solid var(--line-strong);
  border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; text-decoration: none;
}
.filterchip:hover { border-color: var(--app-icoon); color: var(--text); }
.filterchip[aria-current="page"] { background: var(--app-zacht); border-color: var(--app-icoon); color: var(--app-tekst); font-weight: 600; }
@media (max-width: 720px) {
  .filterchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .filterchips::-webkit-scrollbar { display: none; }
}
@media (pointer: coarse) { .filterchip { min-height: 44px; } }

/* Spullenboek: zoeken en sorteren in één regel; de gele balk met Bekijken rechts */
.spullenboek-zoek { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.spullenboek-zoek input[type="search"] { flex: 1 1 16rem; min-width: 0; width: auto; }
.spullenboek-zoek select { flex: 0 1 15rem; width: auto; }
.spullenboek-archiefknop { margin-left: auto; }
.spullenboek-balk { display: flex; align-items: center; gap: 10px; }
.spullenboek-balk a { margin-left: auto; white-space: nowrap; font-weight: 600; }
/* De kaarten: vier kolommen op een breed scherm, op de telefoon onder elkaar; de hele kaart is klikbaar via de naam */
.spullenboek-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 16px; }
@media (min-width: 1280px) { .spullenboek-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.spullenboek-kaart { position: relative; display: flex; flex-direction: column; }
.spullenboek-kaart:has(a:hover) { border-color: var(--app-icoon); }
.spullenboek-foto {
  display: grid; place-items: center; height: 104px; background: var(--app-zacht); color: var(--app-icoon);
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
}
.spullenboek-foto .icoon { width: 36px; height: 36px; }
/* Telefoon: het fotovlak links naast de tekst */
@media (max-width: 600px) {
  .spullenboek-kaart { flex-direction: row; }
  .spullenboek-kaart > .spullenboek-foto { flex: none; width: 72px; height: auto; border-radius: calc(var(--r-lg) - 1px) 0 0 calc(var(--r-lg) - 1px); }
  .spullenboek-kaart > .spullenboek-foto .icoon { width: 28px; height: 28px; }
  .spullenboek-kaart-body { min-width: 0; }
}
.spullenboek-kaart-body { display: grid; gap: 4px; padding: 12px 14px 14px; }
.spullenboek-kaart-naam { margin: 0; font-size: var(--fs-md); overflow-wrap: anywhere; }
.spullenboek-kaart-naam a { color: var(--text); text-decoration: none; }
.spullenboek-kaart-naam a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.spullenboek-kaart-naam a:focus-visible { outline: none; }
.spullenboek-kaart-naam a:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.spullenboek-kaart-merk, .spullenboek-kaart-regel { margin: 0; color: var(--text-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.spullenboek-kaart-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 0; }
/* Het aantal documenten rechts naast de chip (Spullenboek 1.1) */
.spullenboek-kaart-docs { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--text-2); font-size: var(--fs-sm); }
.spullenboek-kaart-docs .icoon { width: 16px; height: 16px; color: var(--app-icoon); }
/* Het fotovlak met het voorbeeldje van een foto: vult het vlak, bijgesneden */
.spullenboek-foto-beeld { position: relative; overflow: hidden; padding: 0; background: var(--surface-2); }
/* Nooit bijsnijden (contain): een productfoto op wit of een staande telefoonfoto blijft heel, op een rustige tint. Absoluut in het
   vlak: in een grid met een automatische hoogte telt height: 100% niet, en dan liep de foto onder het vlak door (afgeknipt). */
.spullenboek-foto-beeld img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
/* Eén spul: gegevens en garantie naast elkaar, op een smal scherm onder elkaar */
.spullenboek-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; align-items: start; }
/* De middelste kolom: garantie en documenten onder elkaar */
.spullenboek-kolom { display: grid; gap: 16px; align-content: start; min-width: 0; }
/* Bij een spul: het fotovlak over de volle breedte van de kaart in 4:3, met of zonder foto; een klik op de foto opent de lichtbak */
.spullenboek-detail .spullenboek-foto { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--r); }
/* Telefoon zonder foto: een lager vlak (met foto blijft het 4:3) */
@media (max-width: 600px) { .spullenboek-detail .spullenboek-foto:not(.spullenboek-foto-beeld) { aspect-ratio: auto; height: 112px; } }
.spullenboek-gegevens dd { overflow-wrap: anywhere; }
.spullenboek-notitie { margin: 0; overflow-wrap: anywhere; }
.spullenboek-garantiebalk { width: 100%; }
.spullenboek-garantie-labels { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; color: var(--text-2); font-size: var(--fs-sm); }
/* Documenten (Spullenboek 1.1): een lijst in de kaart, per regel het soort (icoon), de titel als link, soort en grootte, en ⋯ */
.spullenboek-doclijst { list-style: none; margin: 0; padding: 0; }
.spullenboek-doc { display: flex; align-items: center; gap: 10px; min-height: var(--rij-hoogte); padding: 8px 12px 8px 16px; border-top: 1px solid var(--line); }
.spullenboek-doc > .icoon { flex: none; width: 18px; height: 18px; color: var(--app-icoon); }
.spullenboek-doc-tekst { display: grid; flex: 1 1 auto; min-width: 0; }
.spullenboek-doc-tekst a { overflow-wrap: anywhere; }
.spullenboek-doc-tekst .muted { font-size: var(--fs-sm); }
/* De aankoopbon: het voorbeeldje (opent in de lichtbak) of een PDF met Downloaden */
.spullenboek-bon { display: block; }
.spullenboek-bon img { display: block; width: 100%; height: auto; max-height: 28rem; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.spullenboek-bon-pdf { display: flex; align-items: flex-start; gap: 8px; margin: 0; overflow-wrap: anywhere; }
.spullenboek-bon-pdf .icoon { flex: none; width: 20px; height: 20px; color: var(--app-icoon); }
.spullenboek-bon + .muted, .spullenboek-bon-pdf + .btn { margin: 0; }
.spullenboek-bon-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
/* Document toevoegen: het voorstel om Foto te kiezen (alleen bij een afbeelding terwijl de soort nog op Aankoopbon staat) */
.spullenboek-soort-voorstel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; }
.spullenboek-soort-voorstel[hidden] { display: none; }
/* Het formulier in drie groepen: Aankoop, Spul, Meer */
.spullenboek-groep { display: grid; gap: 12px; margin: 0 0 12px; padding: 0; border: 0; }
.spullenboek-groep legend { margin-bottom: 8px; padding: 0; font-weight: 600; }
/* Ruimtes: een lijst met greepjes (slepen, §3.13), hernoemen in de regel zelf */
.spullenboek-ruimtelijst { list-style: none; margin: 0; padding: 0; }
.spullenboek-ruimte { display: flex; align-items: center; gap: 8px; min-height: var(--rij-hoogte); padding: 6px 12px 6px 8px; border-bottom: 1px solid var(--line); }
.spullenboek-ruimte-naam { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.spullenboek-ruimte-aantal { font-size: var(--fs-sm); white-space: nowrap; }
.spullenboek-hernoem, .spullenboek-ruimte-nieuw { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 8px; }
.spullenboek-hernoem input, .spullenboek-ruimte-nieuw input { flex: 1 1 12rem; min-width: 0; width: auto; }
/* Een lijst zonder greepjes (Nog niet in de lijst): de namen op de lijn van de kaartkop (18 px) */
.spullenboek-ruimtelijst-los > .spullenboek-ruimte { padding-left: 18px; }
/* Personen (1.3.1): Gekoppeld aan naast de naam, op een breed scherm alles op één regel */
.spullenboek-hernoem select, .spullenboek-ruimte-nieuw select { flex: 0 1 16rem; min-width: 0; width: auto; }
@media (max-width: 600px), (pointer: coarse) {
  .spullenboek-zoek .btn, .spullenboek-zoek input, .spullenboek-zoek select, .spullenboek-ruimte-nieuw .btn, .spullenboek-hernoem .btn { min-height: 44px; }
  /* Ruimtes en Personen (1.3.0): het veld, de keuzelijst en de knoppen in de regels ook 44 px (de greep en ⋯ ook breed) */
  .spullenboek-ruimte-nieuw input, .spullenboek-ruimte-nieuw select, .spullenboek-hernoem input, .spullenboek-hernoem select,
  .spullenboek-ruimte .btn, .spullenboek-ruimte .actiemenu > summary { min-height: 44px; }
  .spullenboek-ruimte .btn-icon, .spullenboek-ruimte .actiemenu > summary { min-width: 44px; }
}

/* Bewerken als icoonknop (design-system §3.40, Platform 1.20.1): de stijl van ⋯ (btn-ghost btn-sm btn-icon). Op een aanraakscherm
   44 px, en dan ook ⋯ ernaast, zodat ze even groot blijven. */
@media (pointer: coarse) {
  .bewerkknop, .bewerkknop ~ .actiemenu > summary.btn-icon, .bewerkknop ~ form .btn-icon { width: 44px; height: 44px; }
}

/* 51. PDF BEKIJKEN (platformonderdeel, design-system §3.39, Platform 1.20.0) -------------------------------------------- */
/* Een venster over de pagina in de donkere tokens van de lichtbak (§3.30); bovenin de titel, Downloaden en ×, onderin bladeren
   en zoomen. De pagina zelf is een canvas op wit. Op de telefoon (tot 640 px) schermvullend, knoppen van minstens 44 px. */
html:has(dialog.pdfvenster[open]) { overflow: hidden; }
dialog.pdfvenster {
  position: fixed;
  inset: 24px;
  width: auto;
  height: auto;
  max-width: 1100px;
  max-height: none;
  margin: 0 auto;
  padding: 0;
  border: 1px solid var(--lichtbak-rand);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--lichtbak-vlak);
  color: var(--lichtbak-tekst);
}
dialog.pdfvenster[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; }
dialog.pdfvenster::backdrop { background: color-mix(in srgb, var(--lichtbak-vlak) 85%, transparent); }
.pdfvenster-kop, .pdfvenster-bediening { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--lichtbak-knop); }
.pdfvenster-kop { border-bottom: 1px solid var(--lichtbak-rand); }
.pdfvenster-bediening { flex-wrap: wrap; justify-content: center; border-top: 1px solid var(--lichtbak-rand); }
.pdfvenster-titel { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--lichtbak-tekst); }
.pdfvenster-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--lichtbak-rand); border-radius: var(--r); background: var(--lichtbak-vlak); color: var(--lichtbak-tekst);
  font: inherit; font-size: var(--fs-sm); text-decoration: none; cursor: pointer;
}
.pdfvenster-knop:hover { text-decoration: none; border-color: var(--lichtbak-tekst); }
.pdfvenster-knop:focus-visible, .pdfvenster-vlak:focus-visible, .pdfvenster-link:focus-visible { outline: 2px solid var(--lichtbak-tekst); outline-offset: 2px; }
.pdfvenster-knop:disabled { opacity: 0.45; cursor: default; border-color: var(--lichtbak-rand); }
.pdfvenster-knop[aria-pressed="true"] { border-color: var(--lichtbak-tekst); }
.pdfvenster-pagina { min-width: 9.5em; text-align: center; font-size: var(--fs-sm); }
.pdfvenster-scheiding { width: 1px; height: 24px; margin: 0 4px; background: var(--lichtbak-rand); }
/* scrollbar-gutter: de ruimte voor de schuifbalk vast gereserveerd, zodat Passend na het tekenen niet alsnog te breed is */
.pdfvenster-vlak { overflow: auto; scrollbar-gutter: stable; display: grid; justify-items: center; align-content: start; padding: 16px; }
.pdfvenster-canvas { display: block; max-width: none; box-shadow: var(--shadow-pop); }
.pdfvenster-canvas[hidden] { display: none; }
.pdfvenster-melding { align-self: center; max-width: 34rem; margin: 48px 0 0; padding: 8px 14px; border-radius: var(--r-sm); background: var(--lichtbak-knop); color: var(--lichtbak-tekst); text-align: center; }
.pdfvenster-melding[hidden] { display: none; }
.pdfvenster-links { max-height: 7.5rem; overflow: auto; padding: 6px 16px 8px; border-top: 1px solid var(--lichtbak-rand); font-size: var(--fs-sm); }
.pdfvenster-links[hidden] { display: none; }
.pdfvenster-links-kop { margin: 0 0 4px; font-weight: 600; }
.pdfvenster-links ul { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; }
.pdfvenster-link { padding: 2px 0; border: 0; background: none; color: var(--lichtbak-tekst); font: inherit; text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; text-align: left; }
.pdfvenster-adres { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  dialog.pdfvenster { inset: 0; max-width: none; border: 0; border-radius: 0; }
  .pdfvenster-vlak { padding: 8px; }
  .pdfvenster-knop span { display: none; }
  .pdfvenster-bediening { gap: 6px; padding: 8px; }
  .pdfvenster-pagina { min-width: 0; }
  .pdfvenster-scheiding { display: none; }
}
@media (max-width: 640px), (pointer: coarse) {
  .pdfvenster-knop { min-width: 44px; height: 44px; }
}

/* 52. ORDENEN OP /START EN ONGEDAAN MAKEN (Snelkoppelingen 1.6.0, Platform 1.21.0; design-system §3.13, §3.34 en §4.5) ------- */
/* De melding met een actie (meldingOngedaan): de knop Ongedaan maken tussen de tekst en ×, 44 px op een aanraakscherm of telefoon */
.meldingen .melding-actie { flex: none; margin: -4px 0; }
@media (max-width: 719px), (pointer: coarse) { .meldingen .melding-actie { height: 44px; min-height: 44px; } }
/* Lang indrukken (data-sorteer-lang): geen tekstselectie en geen menu van de browser (iOS) op de items */
[data-sorteer-lang] > [data-sorteer-item] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* De gewone /start: rechts in de groepskop de + (Link toevoegen; met muis bij hover of focus, met het toetsenbord bij focus)
   of op een aanraakscherm ⋯ met alleen Link toevoegen. Altijd 44 px op een aanraakscherm. */
.snel-groepacties-start { display: flex; align-items: center; gap: 2px; flex: none; }
.snel-groepacties-start .snel-groepmenu { display: none; }
@media (hover: hover) and (pointer: fine) {
  .start-groep .snel-plus { opacity: 0; transition: opacity .12s; }
  .start-groep:is(:hover, :focus-within) .snel-plus, .start-groep .snel-plus:focus-visible { opacity: 1; }
}
@media (hover: none), (pointer: coarse) {
  .snel-groepacties-start .snel-plus { display: none; }
  .snel-groepacties-start .snel-groepmenu { display: block; }
  .snel-groepacties-start .snel-groepmenu > summary { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .start-groep .snel-plus { transition: none; } }
/* Tijdens het zoeken op /start (start.js: .sorteer-pauze) geen + en geen ⋯ in de groepskop */
.start-zoeken .snel-groepacties-start { display: none; }
.snel-toevoegen-fout { margin: 0; }

/* 53. FORMULIERRASTER (platformonderdeel, Platform 1.22.0, design-system §3.41; eerste gebruik: Spullenboek 1.3.1) ------------- */
/* Velden die bij elkaar horen naast elkaar: <div class="formraster formraster-3"> met .field's; .veld-vol over de hele breedte (naam,
   notitie, adres). Het aantal kolommen hangt af van de breedte van het formulier zelf (container query), niet van het venster:
   vanaf 760 px 2–4 kolommen zoals gekozen, 520–760 px hoogstens 2, smaller (de telefoon) één kolom. De volgorde in de HTML is de
   volgorde van lezen en van Tab (links naar rechts, dan de volgende regel). */
.form:has(.formraster) { container: formulier / inline-size; }
.formraster { display: grid; grid-template-columns: repeat(var(--formraster-kolommen, 2), minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
.formraster-2 { --formraster-kolommen: 2; }
.formraster-3 { --formraster-kolommen: 3; }
.formraster-4 { --formraster-kolommen: 4; }
.formraster > .veld-vol { grid-column: 1 / -1; }
@container formulier (max-width: 759.98px) { .formraster-3, .formraster-4 { --formraster-kolommen: 2; } }
@container formulier (max-width: 519.98px) { .formraster { --formraster-kolommen: 1; } }