/* ═══════════════════════════════════════════════════════════════════════
   Oudercommissie-portaal — Dé Plek BSO
   Tokens en componenten uit /huisstijl/huisstijl.css, hier toegespitst op
   één-koloms leeswerk: ouders openen dit een paar keer per jaar, vaak
   's avonds op hun telefoon. Alles staat in één kolom, zodat het smalle
   scherm geen uitgeklede versie is maar hetzelfde ontwerp.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Lettertype ─────────────────────────────────────────────────────── */
@font-face {
  font-family: 'AllRoundGothic';
  src: url('/fonts/AllRoundGothic-Book.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AllRoundGothic';
  src: url('/fonts/AllRoundGothic-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AllRoundGothic';
  src: url('/fonts/AllRoundGothic-Demi.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AllRoundGothic';
  src: url('/fonts/AllRoundGothic-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ─── Tokens ─────────────────────────────────────────────────────────── */
:root {
  --groen: #13342B;
  --groen-50: #EFF7F2;
  --groen-100: #D9ECDF;
  --lichtgroen: #86C79D;
  --oranje: #E37A41;
  /* Donkerder dan de huisstijl-variant (#D06832): deze kleur draagt tekst en
     focusranden en haalt zo 5,5 : 1 op wit en 4,8 : 1 op crème. */
  --oranje-donker: #A94E1E;
  --oranje-hover: #EA8850;
  --oranje-50: #FBEEE4;
  --creme: #F4EFE7;
  --wit: #ffffff;

  --ink: #13342B;
  --ink-2: #4B6158;
  /* Was #6E827A: dat haalde maar 3,6 : 1 op crème, en deze tint draagt datums,
     veldhints en de laadtekst. Nu 5,1 : 1 op crème en 5,8 : 1 op wit. */
  --ink-3: #556A60;
  --rule: rgba(19, 52, 43, .14);
  --rule-strong: rgba(19, 52, 43, .24);

  --rood: #B33518;
  --rood-licht: #FDECE8;
  --geel-licht: #FFF4D6;
  --geel-donker: #7A4E0C;

  --r-sm: 12px;
  --r-md: 18px;
  --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(19, 52, 43, .07);
  --shadow-sm: 0 4px 14px rgba(19, 52, 43, .08);
  --ease: cubic-bezier(.22, .61, .36, 1);

  --blad-breedte: 920px;

  /* Typografieschaal. Zeven stappen, elk met een eigen taak — geen twee
     stappen doen hetzelfde werk. Nieuwe tekst kiest een van deze rollen,
     nooit een losse pixelwaarde.
     micro        badges, cijferbijschriften, kleine labels
     meta         secundaire tekst: veldlabels, hints, metaregels
     control      interactieve chrome: tabs, knoppen, invoervelden
     body         leestekst: paragrafen en rijtitels (= de leesmaat van de pagina)
     heading-sm   kopje van één kaart/onderdeel (een vergadering, het merk)
     heading-md   sectiekop ("Documenten", "Vergaderingen"), en de poort-titel
     heading-lg   het startblok, alleen wanneer er iets op je wacht */
  --fs-micro: 12px;
  --fs-meta: 13px;
  --fs-control: 15px;
  --fs-body: 16px;
  --fs-heading-sm: 18px;
  --fs-heading-md: 22px;
  --fs-heading-lg: 28px;
  --fs-heading-lg-mobiel: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Moet vóór alle componenten staan én !important zijn: onderdelen die verborgen
   horen te blijven (de vestigingkiezer bij één vestiging, het tabblad Leden,
   lege actielijsten) hebben zelf display:flex of display:grid, en dat wint het
   anders van de standaardwaarde van het hidden-attribuut. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'AllRoundGothic', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--creme);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.overslaan {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--wit);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-weight: 600;
  z-index: 900;
}
.overslaan:focus { left: 16px; }

/* ─── Kop ────────────────────────────────────────────────────────────── */
.kop {
  background: var(--groen);
  color: var(--creme);
  position: sticky;
  top: 0;
  z-index: 400;
  box-shadow: 0 2px 10px rgba(19, 52, 43, .18);
}
.kop-binnen {
  max-width: var(--blad-breedte);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.merk {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  margin-right: auto;
  min-width: 0;
}
.merk-teken {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 11px;
  background: rgba(244, 239, 231, .1);
  color: var(--lichtgroen);
  display: flex; align-items: center; justify-content: center;
}
.merk-teken svg { width: 24px; height: 24px; }
.merk-titel { display: block; font-weight: 700; font-size: var(--fs-heading-sm); line-height: 1.15; }
.merk-sub { display: block; font-size: var(--fs-micro); color: var(--lichtgroen); line-height: 1.2; }

.kop-rechts {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.vestiging { display: flex; align-items: center; gap: 8px; }
.vestiging label { font-size: var(--fs-micro); color: rgba(244, 239, 231, .7); font-weight: 600; }
.vestiging select {
  font-family: inherit;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--creme);
  background: rgba(244, 239, 231, .12);
  border: 1px solid rgba(244, 239, 231, .25);
  border-radius: var(--r-pill);
  padding: 8px 12px;
  min-height: 40px;
}
.vestiging select option { color: var(--ink); background: var(--wit); }
/* Geen ellipsis meer: die kapte "beheer@deplek.co (beheerder, secretaris)"
   middenin een woord af. Het adres mag afbreken, de rol staat eronder. */
.gebruiker {
  text-align: right;
  max-width: 240px;
  min-width: 0;
  line-height: 1.25;
}
.wie {
  display: block;
  font-size: var(--fs-meta);
  color: rgba(244, 239, 231, .88);
  overflow-wrap: anywhere;
}
.wie-rol {
  display: block;
  font-size: var(--fs-micro);
  color: var(--lichtgroen);
}
.knop-uitloggen {
  flex: none;
  min-height: 40px;
  padding: 8px 14px;
  font-size: var(--fs-meta);
  color: var(--creme);
  background: rgba(244, 239, 231, .12);
  border-color: rgba(244, 239, 231, .3);
}
.knop-uitloggen:hover { background: rgba(244, 239, 231, .22); border-color: var(--creme); }

/* ─── Blad ───────────────────────────────────────────────────────────── */
.blad {
  max-width: var(--blad-breedte);
  margin: 0 auto;
  padding: 34px 24px 80px;
}
.laden { color: var(--ink-3); padding: 48px 0; }

/* ─── Poort (uitgelogd / geen toegang) ───────────────────────────────── */
.poort {
  background: var(--wit);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 40px 32px;
  max-width: 560px;
  margin: 40px auto;
}
.poort-titel { font-size: var(--fs-heading-md); font-weight: 700; letter-spacing: -.01em; }
.poort-tekst { color: var(--ink-2); margin-top: 8px; max-width: 52ch; }
.poort .knop { margin-top: 22px; }

/* ─── Startblok ──────────────────────────────────────────────────────── */
.start { margin-bottom: 40px; }
.start-titel {
  font-size: var(--fs-heading-lg);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.12;
  max-width: 22ch;
  transition: font-size .15s var(--ease);
}
/* Voor een OC-lid dat één keer per kwartaal komt, is "er wacht niets op je"
   geen moment om de grootste tekst van de pagina te zijn — dat moment is
   voor wat wél om actie vraagt. Zonder actie krimpt de kop naar een gewoon
   kopje, zodat de net-geplaatste stukken (waar deze gebruiker voor kwam) op
   een telefoon niet onder de vouw belanden. */
.start-titel--compact { font-size: var(--fs-heading-sm); max-width: none; }
.start-uitleg {
  color: var(--ink-2);
  margin-top: 8px;
  max-width: 58ch;
}

.actielijst { list-style: none; margin-top: 22px; display: grid; gap: 10px; }
.actie {
  background: var(--wit);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--oranje);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-xs);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.actie-tekst { flex: 1 1 220px; min-width: 0; }
.actie-titel { font-weight: 600; }
.actie-meta { font-size: var(--fs-meta); color: var(--ink-2); }
.actie-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }

.recent { margin-top: 34px; }
.recent-kop {
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: .02em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.recentlijst { list-style: none; }
.recentlijst li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
}
.recentlijst .r-titel {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  flex: 1 1 auto;
  min-width: 0;
}
.recentlijst .r-titel:hover { color: var(--oranje-donker); text-decoration: underline; }
.recentlijst .r-datum { font-size: var(--fs-meta); color: var(--ink-3); flex: none; }

/* ─── Tabbladen ──────────────────────────────────────────────────────── */
.tabstrip { border-bottom: 2px solid var(--rule); margin-bottom: 28px; }
.tabs { display: flex; gap: 4px; }
.tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-family: inherit;
  font-size: var(--fs-control);
  font-weight: 600;
  color: var(--ink-2);
  padding: 12px 18px;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.tab:hover { color: var(--ink); background: rgba(19, 52, 43, .04); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--oranje); }

.lijstkop { margin-bottom: 18px; }
.lijstkop h2 { font-size: var(--fs-heading-md); font-weight: 700; letter-spacing: -.01em; }
.lijstkop-uitleg { color: var(--ink-2); font-size: var(--fs-body); margin-top: 2px; max-width: 62ch; }

/* ─── Beheerpaneel (dichtgeklapt: het beeld voor ouders blijft rustig) ── */
.beheerpaneel {
  background: var(--wit);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  margin-bottom: 22px;
}
.beheerpaneel > summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 18px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: var(--fs-control);
  color: var(--ink);
  border-radius: var(--r-md);
}
.beheerpaneel > summary::-webkit-details-marker { display: none; }
.beheerpaneel > summary::before {
  content: '+';
  width: 24px; height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--oranje-50);
  color: var(--oranje-donker);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.beheerpaneel[open] > summary::before { content: '–'; }
.beheerpaneel[open] > summary { border-bottom: 1px solid var(--rule); border-radius: var(--r-md) var(--r-md) 0 0; }

.beheerform, .versieform { padding: 20px 18px 22px; }
.veld { margin-bottom: 14px; flex: 1 1 180px; min-width: 0; }
.veldrij { display: flex; gap: 14px; flex-wrap: wrap; }
.veld-breed { flex: 2 1 260px; }
.veld-smal { flex: 0 1 140px; }
.veld label {
  display: block;
  font-size: var(--fs-meta);
  font-weight: 600;
  margin-bottom: 5px;
}
.optioneel { font-weight: 400; color: var(--ink-3); }
input, select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-control);
  color: var(--ink);
  background: var(--wit);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  min-height: 44px;
}
textarea { min-height: 66px; resize: vertical; }
input[type="file"] { padding: 9px 12px; background: var(--groen-50); }
/* Alleen de muis-/aanraakfocus krijgt de zachte rand zonder outline. Zonder de
   :not(:focus-visible) zou deze regel (hogere specificiteit) ook bij
   toetsenbordfocus de outline uitzetten, en dan is er geen zichtbare
   focusindicator meer — de vervangende oranje rand haalt zelf maar 2,9 : 1. */
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
  border-color: var(--oranje-donker);
  box-shadow: 0 0 0 3px rgba(169, 78, 30, .18);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--oranje-donker);
}
.veldhint { font-size: var(--fs-meta); color: var(--ink-3); margin: -4px 0 14px; }
.formacties { display: flex; gap: 10px; flex-wrap: wrap; }

.versieform {
  background: var(--wit);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--oranje);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  margin-top: 20px;
}
.versieform-kop { font-weight: 600; margin-bottom: 14px; }

/* ─── Knoppen ────────────────────────────────────────────────────────── */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: var(--fs-control);
  font-weight: 600;
  min-height: 44px;
  padding: 10px 18px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
/* Donkergroen op oranje haalt 4,6 : 1; wit op oranje was 2,9 : 1 en dat is te
   weinig voor de knop die de belangrijkste handeling draagt. De hover wordt
   daarom lichter in plaats van donkerder — dat houdt de tekst leesbaar
   (5,2 : 1) én blijft een zichtbare toestandswissel. */
.knop-hoofd { background: var(--oranje); color: var(--groen); }
.knop-hoofd:hover { background: var(--oranje-hover); }
.knop-tweede { background: var(--wit); color: var(--ink); border-color: var(--rule-strong); }
.knop-tweede:hover { border-color: var(--ink); }
.knop-stil { background: none; color: var(--ink-2); padding: 10px 12px; }
.knop-stil:hover { color: var(--ink); background: rgba(19, 52, 43, .06); }
.knop-gevaar { background: none; color: var(--rood); padding: 10px 12px; }
.knop-gevaar:hover { background: var(--rood-licht); }
.knop:disabled { opacity: .55; cursor: progress; }

/* ─── Documenten ─────────────────────────────────────────────────────── */
.groep { margin-bottom: 26px; }
/* Ondergeschikt aan de rijtitels eronder (16px/600/ink): lichter gewicht,
   een stillere kleur en een dunne, gewone rule in plaats van de
   nadrukkelijke --rule-strong. Een categoriekop mag de plek herkenbaar
   maken, niet met de titels om aandacht concurreren. */
.groep-kop {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: .02em;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--rule);
}
.rijen { list-style: none; }
.rij {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.rij-tekst { flex: 1 1 260px; min-width: 0; }
.rij-titel {
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--ink);
  text-decoration: none;
}
a.rij-titel:hover { color: var(--oranje-donker); text-decoration: underline; }
.rij-meta { font-size: var(--fs-meta); color: var(--ink-2); margin-top: 1px; }
.rij-toelichting { font-size: var(--fs-body); color: var(--ink-2); margin-top: 4px; max-width: 60ch; }
.rij-acties { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* De destructieve actie hangt niet in dezelfde cluster als "Openen" en de
   versieknoppen: een eigen plek aan het einde van de rij, met ruimte
   ervoor, zodat hij niet per ongeluk wordt geraakt in plaats van "Openen". */
.rij-acties .knop-gevaar { margin-left: auto; }

/* De uitgeklapte versiegeschiedenis is een flex-item ín de rij: over de volle
   breedte, onder de titel en de knoppen. */
.versielijst {
  flex: 1 1 100%;
  margin-top: 10px;
  padding-left: 16px;
  border-left: 2px solid var(--rule);
}
.versielijst .rij { padding: 8px 0; border-bottom: 0; }

/* ─── Vergaderingen ──────────────────────────────────────────────────── */
/* Zelfde rij-idioom als Documenten en Leden: een lijst op de achtergrond
   met een onderrand, geen aparte witte kaart. Het datumblok blijft een klein
   gekleurd accent — hetzelfde soort element als de initialen-cirkel bij
   Leden — niet een tweede containertaal naast de rijen. */
.vergadering {
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.datumblok {
  flex: none;
  width: 58px;
  border-radius: var(--r-sm);
  background: var(--groen-50);
  border: 1px solid var(--groen-100);
  text-align: center;
  padding: 8px 4px 7px;
}
.datumblok .dag { display: block; font-size: var(--fs-heading-md); font-weight: 700; line-height: 1.05; }
.datumblok .maand { display: block; font-size: var(--fs-micro); font-weight: 600; color: var(--ink-2); }
.datumblok .jaar { display: block; font-size: var(--fs-micro); color: var(--ink-3); }
.vergadering-body { flex: 1 1 auto; min-width: 0; }
.vergadering-titel { font-size: var(--fs-heading-sm); font-weight: 700; letter-spacing: -.005em; }
.notulenlijst { list-style: none; margin-top: 10px; }
.notulenrij {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 0;
  border-top: 1px solid var(--rule);
}
.notulenrij:first-child { border-top: 0; padding-top: 4px; }
.notulen-tekst { flex: 1 1 200px; min-width: 0; }
.geen-notulen { font-size: var(--fs-body); color: var(--ink-3); margin-top: 8px; }

/* ─── Leden ──────────────────────────────────────────────────────────── */
.lid {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.initialen {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--groen-100);
  color: var(--groen);
  font-weight: 700;
  font-size: var(--fs-control);
  display: flex; align-items: center; justify-content: center;
}
.lid-tekst { flex: 1 1 220px; min-width: 0; }
.lid-naam { font-weight: 600; }
.lid-email { font-size: var(--fs-meta); color: var(--ink-2); overflow-wrap: anywhere; }

/* ─── Status en badges ───────────────────────────────────────────────── */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 4px 11px;
  border-radius: var(--r-pill);
}
.status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.status-concept { background: var(--geel-licht); color: var(--geel-donker); }
.status-definitief { background: var(--groen-100); color: #1B5C39; }
.status-rol { background: var(--groen-50); color: var(--ink-2); }
.status-rol::before { display: none; }
.status-geblokkeerd { background: var(--rood-licht); color: var(--rood); }

.versiechip {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--ink-2);
  background: var(--groen-50);
  border-radius: var(--r-pill);
  padding: 1px 9px;
  margin-right: 8px;
}

/* ─── Lege staat en fouten ───────────────────────────────────────────── */
.leeg {
  background: var(--wit);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-md);
  padding: 34px 24px;
  text-align: center;
  color: var(--ink-2);
}
.leeg strong { display: block; color: var(--ink); margin-bottom: 4px; }
.leeg-acties { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* "Kon niet laden" is nadrukkelijk iets anders dan "er is niets": dezelfde
   plek in de layout, maar rood omrand en met een manier om het opnieuw te
   proberen. Zonder dat verschil leest een storing als een lege lijst. */
.leeg-fout {
  border-style: solid;
  border-color: rgba(179, 53, 24, .35);
  background: var(--rood-licht);
  color: var(--ink);
}
.leeg-fout strong { color: var(--rood); }

.fout {
  background: var(--rood-licht);
  border: 1px solid rgba(179, 53, 24, .25);
  border-radius: var(--r-sm);
  color: var(--rood);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.fout a { color: var(--rood); font-weight: 600; }

/* ─── Meldingen ──────────────────────────────────────────────────────── */
.melding-baan {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 800;
  display: grid;
  gap: 8px;
  width: min(560px, calc(100vw - 32px));
  /* Een melding vangt nooit een klik af: op een telefoon ligt de baan precies
     over de knoppen van de onderste rij, en die moet je kunnen blijven
     gebruiken terwijl de melding nog staat. */
  pointer-events: none;
}
.melding {
  background: var(--ink);
  color: var(--creme);
  padding: 13px 18px;
  border-radius: var(--r-md);
  box-shadow: 0 12px 34px rgba(19, 52, 43, .28);
  font-weight: 500;
  font-size: var(--fs-control);
  animation: opkomen .22s var(--ease);
}
.melding-fout { background: var(--rood); color: var(--wit); }
.melding a { color: inherit; font-weight: 700; }
@keyframes opkomen { from { opacity: 0; transform: translateY(10px); } }
@keyframes neerkomen { from { opacity: 0; transform: translateY(-10px); } }

/* ─── Smal scherm ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .kop-binnen { padding: 10px 16px; gap: 10px; flex-wrap: wrap; }
  /* Uitloggen naast het logo, de rest op een eigen regel eronder. Zo blijft de
     kop op 360 px twee regels in plaats van drie. */
  .knop-uitloggen { order: 2; }
  .kop-rechts { order: 3; width: 100%; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
  .vestiging { flex: 1 1 100%; }
  .vestiging select { width: 100%; }
  .gebruiker { flex: 1 1 100%; text-align: left; max-width: none; }
  .wie { font-size: var(--fs-micro); }

  /* De meldingenbaan verhuist naar boven, net onder de kop: onderaan dekt hij
     op een telefoon precies de knoppen af waar je net op geklikt hebt, en
     bovenaan zou hij achter de vaste kop verdwijnen. --kop-hoogte wordt in
     app.js gemeten, want de kop is één of twee regels hoog. */
  .melding-baan { top: calc(var(--kop-hoogte, 100px) + 8px); bottom: auto; }
  .melding { animation: neerkomen .22s var(--ease); }
  .blad { padding: 24px 16px 72px; }
  .start-titel { font-size: var(--fs-heading-lg-mobiel); }
  .tabstrip { overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  .tabstrip::-webkit-scrollbar { display: none; }
  .veldrij { flex-direction: column; gap: 0; }
  .rij, .actie, .lid { flex-direction: column; align-items: stretch; gap: 10px; }
  /* In een kolom is flex-basis een hóógte: zonder deze reset houdt elke rij
     de 220-260 px uit de desktoplayout als lege ruimte onder de tekst over. */
  .veld, .veld-breed, .veld-smal,
  .rij-tekst, .actie-tekst, .lid-tekst, .notulen-tekst { flex: 0 1 auto; }
  .rij-acties, .actie-knoppen { justify-content: flex-start; }
  /* "Verwijderen" krijgt op smal scherm een eigen regel met een scheidingslijn
     erboven, in plaats van gewoon de volgende knop in de rij te zijn. Zonder
     dit ligt hij, met de gestapelde 6px-tussenruimte, maar één duim onder
     "Openen" — precies het per-ongeluk-tikken dat deze knop juist niet mag
     uitlokken. */
  .rij-acties .knop-gevaar {
    margin-left: 0;
    flex: 1 0 100%;
    justify-content: center;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
  }
  .vergadering { padding: 14px 0; gap: 12px; }
  .datumblok { width: 50px; }
  .lid { flex-direction: row; flex-wrap: wrap; }
  .lid .knop { margin-left: auto; }
  .knop { padding: 11px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}