.account__avatar {
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-panel);
  color: var(--color-text);
  font-weight: 500;
  font-size: var(--text-22);
}

/* Sectie-label. */
.account__label { display: block; margin: 0 2px 2px; font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); }

/* Lijst-kaart met rijen. */
.account__list {
  margin-bottom: var(--space-5);
}

/* Over-rijen (placeholder-pagina's). */
.account__navrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-hair);
  cursor: default;
}
.account__navrow-label { font-size: var(--text-base); font-weight: 500; }
/* Een rij mag ook een <button> zijn (opent een sheet i.p.v. te navigeren). Zonder reset
   slaan de browser-defaults door: rand,
knop-vulling,
en :last-child wint er nog steeds van. */
button.account__navrow {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-hair);
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
}

.topbar-avatar {
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-btn);
  color: var(--color-on-accent);
  font-weight: 500;
  font-size: var(--text-base);
  text-decoration: none;
}
.topbar-avatar:active { transform: scale(0.95); }
/* In de app-topbar staat 'ie naast het kebab-menu (iets compacter). */
.app__topbar .topbar-avatar { width: 32px; height: 32px; font-size: var(--text-sm); }

/* ── Beveiliging-rijen (back-up-wachtwoord / app-slot): twee-regelig + actie rechts ── */
.account__secrow-text { flex: 1; min-width: 0; }
.account__secrow-sub { display: block; margin-top: 2px; font-size: var(--text-sm); color: var(--color-text-muted); }

/* Segmented control (Uit · Push · E-mail · Beide): vier segmenten in één pill-balk. Elk

/* Meldingen: gemengd-hint onder de hoofdkeuze + per-onderwerp-uitklap. Zelfde

/* ── Back-up-wachtwoord-scherm (instellen + bevestiging) ───────────────── */
/* Zelfde max-width + 18px zij-padding als .gezinhub / .gezin-section (consistente kantlijn). */
/* Paginageometrie via de gedeelde .page-regel; alleen de eigen kolom-layout hier. */
.backup-pw { display: flex; flex-direction: column; }
/* Ronde badge (rustiger dan een afgerond vierkant) — consistent met de groene cirkel op
   het bevestigingsscherm. */
.backup-pw__icon { display: flex; color: var(--color-text-muted); margin-bottom: 18px; }
.backup-pw__icon svg { width: var(--icon-lg); height: var(--icon-lg); }
.backup-pw__icon--success { background: var(--color-green-soft); color: var(--color-green); }
.backup-pw__title { font-family: var(--font-display); font-size: var(--text-26); font-weight: 500; line-height: var(--leading-kop); letter-spacing: -0.01em; margin: 0 0 10px; }
/* Gedeelde note: een getint blokje met icoon voor "let op"-tekst die je écht moet lezen.
   Was .backup-pw__note; gepromoveerd tot primitive toen het passkey-scherm dezelfde
   behoefte had (stijlgids-regel: geen feature-eigen variant van iets dat al bestaat). */
.backup-pw__alert { padding: 12px 14px; border-radius: var(--radius-groep); background: var(--color-error-soft); color: var(--color-error); font-size: var(--text-sm); margin-bottom: 16px; }
.backup-pw__form { display: flex; flex-direction: column; }
.backup-pw__label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); margin: 0 2px 8px; }
.backup-pw__rules { list-style: none; margin: 12px 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.backup-pw__rule { display: flex; align-items: center; gap: 9px; font-size: var(--text-sm); color: var(--color-text-muted); }
.backup-pw__rule-icon { flex: none; width: var(--icon); height: var(--icon); padding: 3px; border-radius: 50%; background: var(--color-line); color: var(--color-on-accent); }
.backup-pw__rule.is-ok { color: var(--color-text); }
.backup-pw__rule.is-ok .backup-pw__rule-icon { background: var(--color-green); }
.backup-pw__match { font-size: var(--text-sm); color: var(--color-text-muted); margin: 8px 2px 0; }
.backup-pw__match.is-ok { color: var(--color-text); }
/* margin-top zorgt voor lucht tussen het herhaal-veld (of de match-melding) en de knop. */
/* Verstuurknop = de gedeelde .button--block-primitive (fase 5); alleen de eigen lucht. */
.backup-pw__form .button--block { margin-top: var(--space-6); }
.backup-pw--done { align-items: center; text-align: center; justify-content: center; min-height: 68vh; }
.backup-pw--done .backup-pw__icon { width: 72px; height: 72px; border-radius: 50%; margin-bottom: 22px; }
.backup-pw--done .backup-pw__icon svg { width: 34px; height: 34px; }
.backup-pw--done .infobox { display: inline-flex; text-align: left; }
/* Op de beveiliging-schermen staat de infobox tussen lede en formulier: iets meer lucht
   eronder dan de gedeelde default, zodat het formulier niet tegen de box aan plakt. */
.backup-pw > .infobox { margin-bottom: 22px; }
.backup-pw__done-cta { margin-top: 26px; }

/* ── Account/instellingen-sub-scherm — paginageometrie via de gedeelde .page-regel ── */
.account-section .form { margin-top: 4px; }
.account-section .button { width: 100%; margin-top: var(--space-6); }
/* Twee handelingen onder één formulier (bijwerken + uitnodigen): ze horen bij elkaar, dus
   ze staan in één stapel die de ruimte uitdeelt — de knop zet zelf geen marge meer
   (conventions §3: X + X-ritmiek hoort op de container). */
.account-section .stack--kaart { margin-top: var(--space-6); gap: var(--space-3); }
.account-section .stack--kaart > .button { margin-top: 0; }

/* Agenda koppelen — tweede blok op de agenda-instellingenpagina, onder de kleurkiezers

/* Profiel bewerken — grote gecentreerde avatar-hero. De cirkel zelf is NIET klikbaar;
   alleen de drie hoek-iconen (camera/shuffle/×). */
.account-edit__avatar-wrap { position: relative; display: inline-block; }
/* Hoek-icoon-formulier: absoluut per hoek. camera = rechtsonder, shuffle = linksonder, × = rechtsboven. */
.account-edit__badge { position: absolute; margin: 0; z-index: 1; }
.account-edit__badge--shuffle { left: -2px;  bottom: -2px; }
.account-edit__badge--delete  { right: -2px; top: -2px; }
/* Het ronde icoon-knopje (label of button) zelf. */
.account-edit__badge-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--color-btn);
  color: var(--color-on-btn); border: 0;
  padding: 0;
  cursor: pointer;
  box-shadow: var(--shadow-knop);
}
.account-edit__badge-btn svg { width: var(--icon-sm); height: var(--icon-sm); }
.account-edit__badge-btn--delete { background: var(--color-error); }
/* Bestand-input onzichtbaar; alleen het camera-icoon (label) is de klikzone. */
.account-edit__file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Gegenereerd figuurtje / geüploade foto vullen de avatar-cirkel. object-fit + block, en de
   avatar-container klipt rond (overflow: hidden). Géén eigen border-radius op de media: dan
   zou de container-achtergrond langs de geronde rand als randje doorschemeren. */
.avatar-figure,
.avatar-img { display: block; width: 100%; height: 100%; }
.avatar-img { object-fit: cover; }
/* Zodra er een foto/figuurtje in een avatar zit, verdwijnt de accent-achtergrond van de
   container (die is alleen voor de initiaal) — anders schemert 'ie als randje langs de rand. */
.topbar-avatar:has(.avatar-figure), .topbar-avatar:has(.avatar-img), .account__avatar:has(.avatar-figure), .account__avatar:has(.avatar-img), .kindf__figuur:has(.avatar-figure), .kindf__figuur:has(.avatar-img) {
  background: transparent;
}

/* Derden-lijst (ontwerp 02). Het avatar-schijfje en de statuschips volgen de bestaande
   rij-opbouw; een ingetrokken profiel blijft leesbaar maar treedt terug — historie, geen
   fout, dus gedempt en niet doorgestreept of rood. */
.account__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-panel);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
}
.account__navrow--historie { opacity: 0.62; }
/* Wachten is geen fout: amber, nooit rood (ontwerp §2). */
/* De grensregel onder de lijst: rustig, niet als waarschuwing. */

/* Effect-chip op het toegangsprofiel: uit door een eigen keuze is gedempt grijs, niet
   amber — wachten op de ander en zelf uitzetten zijn verschillende dingen. */

/* Keuzesheet (ontwerp 06): radio in de accentkleur, de effectregel in groen — dat is
   "wat er nu geldt", dezelfde semantiek als de effect-chip op het profiel. */
/* Keuzelijst per onderdeel (derden): de radiorijen op de paginagrond, met een haarlijn
   ertussen zoals elke lijst; de rijen zelf zijn de gedeelde .radiorow (2026-09-15). */
.derde-keuzes { margin-top: var(--space-3); }
.derde-keuzes .derde-keuze { align-items: flex-start; padding-block: 13px; border-bottom: 1px solid var(--color-line); }
.derde-keuzes .derde-keuze .radiorow__ring { margin-top: 2px; }
/* De effectregel onder de keuze is uitleg, geen status: gedempt zoals elke hint (2026-09-15). */
.account__hint--effect { color: var(--color-text-muted); }

/* Intrekken (ontwerp 16): de knop is ink, niet accent — een toegestane handeling die niet
   hoeft uit te nodigen. De intrek-link op het profiel blijft een kale tekstregel. */
.button--ink { background: var(--color-text); border-color: var(--color-text); }
.derde-intrekken-link { color: var(--color-text-muted); text-decoration: underline; }

/* Foto-raster voor de derde-weergave: eenvoudige duimnagel-tegels. */
.derde-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.derde-fotos__foto { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-groep); }

/* ── V9-instellingen (pilot, V9-handoff 2026-08-18) ──────────────
   De hub in de V9-taal: platte rijen op haarlijnen, direct op het ivoren vlak.
   .vset = pagina-container (geen zijpadding: de haarlijnen lopen door, de rijen
   dragen hun eigen 22px inzet); .setrow = dé instellingenrij (titel links op
   400/500, waarde rechts gedempt, chevron); .vset__group = de rustige eyebrow
   (600, 0.2px spacing — conventions §3 typografie). Vervangt gaandeweg de
   .account__navrow-familie; die blijft staan tot alle schermen om zijn. */
.vset {
  max-width: var(--page-max);
  margin-inline: auto;
  /* GEEN zijpadding (2026-09-03): elk kind hieronder draagt zijn eigen --page-gutter,
     zodat de kop, de vlakken en de tekst app-breed op dezelfde 18px staan. Stond hier
     ook --page-gutter, waardoor alles in deze tak op 34px uitkwam. */
  padding: var(--page-top) 0 var(--page-bottom);
  color: var(--color-text);
}
/* Instellingen en Ons gezin zijn bestemmingen uit de lade (navigatie-opdracht
   2026-09-05): de app-header + titelrij dragen hier hun eigen gutter, en de header
   neemt de safe-area — zelfde regel als :is(.page, …):has(> .app-topbar). */
.vset:has(> .app-topbar) { padding-top: 0; }
.vset > .app-topbar, .vset > .screen-head { padding-inline: var(--page-gutter); }
/* Paginatitel (lichte stijl): 30/600, -0,6px, in inkt. */
.vset__title, .vnav__pagetitle {
  max-width: var(--page-max);
  margin: 0 auto 14px;
  padding-inline: var(--page-gutter);
  font-size: var(--text-30);
  line-height: var(--leading-kop);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.vnav__pagetitle:has(+ .vnav__pagesub) { margin-bottom: 4px; }
.vnav__pagetitle--icon { display: flex; align-items: center; gap: 9px; }
.vnav__pagetitle--icon svg { flex: none; width: var(--icon-lg); height: var(--icon-lg); color: var(--color-text); }
/* Eén regel onder de paginatitel: 17 muted (ChatGPT-stijl, prototype 2026-09-28). */
.vnav__pagesub {
  max-width: var(--page-max);
  margin: 0 auto 16px;
  padding-inline: var(--page-gutter);
  font-size: var(--text-17);
  line-height: var(--leading);
  color: var(--color-text-muted);
}
/* Sectiekop boven een groep (ChatGPT-stijl, prototype 2026-09-28): 15 muted in gewoon
   gewicht, 16px ingesprongen, 28px erboven en 10px eronder — dezelfde maat als .vkop en de
   planbuilder-kop (.plan-subhead). */
.vset__group {
  display: block;
  margin: 28px 16px 10px;
  font-size: var(--text-15);
  font-weight: 400;
  color: var(--color-text-muted);
}
/* Lichte stijl (2026-09-26, bron INSTELLINGEN): een groep rijen is een stapel grijze
   vlakken met 3px ertussen — 26px buitenhoeken (--radius-groep, handout 2026-09-28), 6px binnenhoeken. Een rij in een
   display:contents-formulier telt mee als kind. */
.vset__rows,
.vset__card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 var(--space-4);
}
/* Alleen direct in .vset (die zelf geen zijmarge heeft) dragen ze de gutter; binnen een
   pagina-container telde die anders dubbel. */
.vset > :is(.vset__rows, .vset__card) { margin-inline: var(--page-gutter); }
.vset > .vset__group { margin-inline: calc(var(--page-gutter) + 16px); }
.setrow {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 14px 20px;
  background: var(--color-card);
  border-radius: var(--radius-binnen);
  font: inherit;
  font-size: var(--text-17);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}
:is(.vset__rows, .vset__card, .auth__routes) > :is(.setrow, form, .setrow-form):first-child,
:is(.vset__rows, .vset__card, .auth__routes) > :first-child > .setrow { border-top-left-radius: var(--radius-groep); border-top-right-radius: var(--radius-groep); }
:is(.vset__rows, .vset__card, .auth__routes) > :is(.setrow, form, .setrow-form):last-child,
:is(.vset__rows, .vset__card, .auth__routes) > :last-child > .setrow { border-bottom-left-radius: var(--radius-groep); border-bottom-right-radius: var(--radius-groep); }
/* Een losse rij (buiten een groep) is een hele kaart. */
.setrow:not(:is(.vset__rows, .vset__card, .auth__routes) .setrow) { border-radius: var(--radius-groep); }
a.setrow:active, button.setrow:active, label.setrow:active { background: var(--color-card-pressed); }
/* Een verborgen rij is weg (display: flex hierboven wint anders van het hidden-attribuut). */
.setrow[hidden] { display: none; }
.setrow--static { cursor: default; }
/* Rij met het label bóven de bediening (segment, datumknop — planbuilder-handout 2026-09-28). */
.setrow--kolom { display: block; padding: 12px 16px 14px 20px; cursor: default; }
/* Een rijtitel in zo'n rij (Wie beslist wat: het onderwerp) staat als kop boven de bediening. */
.setrow--kolom > .setrow__title { display: block; margin-bottom: 10px; }
/* De vraag als eerste rij van een groep keuzes: 15/500 in inkt, dicht op de opties. */
/* Vraag-rij (alleen een vervolgvraag in een groep): dezelfde stijl als de sectiekop — 15/400
   muted — zodat er geen aparte tussenstijl bestaat (besluit Jerry 2026-10-01, §3.4/§3.6). */
.setrow--vraag { min-height: 0; padding: 14px 20px 4px; font-size: var(--text-15); font-weight: 400; color: var(--color-text-muted); cursor: default; }
/* Uitklapbare keuze (conventions §3.6 punt 3, shared/_uitklapkeuze): de vraag is de eerste rij met
   een chevron die bij open omdraait. De opties doen mee in de groep (display: contents), dus het
   hidden-attribuut moet hier zelf weg; ze houden hun binnenhoeken en de laatste zichtbare rij is rond. */
.setrow--uitklap { width: 100%; border: 0; text-align: left; }
.setrow--uitklap .setrow__title { white-space: normal; }
.setrow--uitklap[aria-expanded="true"] .setrow__chevron { transform: rotate(180deg); }
.vset__rows--uitklap .plan-hv__opts[hidden] { display: none; }
.vset__rows--uitklap .plan-hv__opts--ingroep > .setrow { border-radius: var(--radius-binnen); }
.vset__rows--uitklap .plan-hv__opts--ingroep > .setrow:last-child,
.vset__rows--uitklap:has(> .plan-hv__opts[hidden]) > .setrow--uitklap { border-bottom-left-radius: var(--radius-groep); border-bottom-right-radius: var(--radius-groep); }
/* Nog niets gekozen: de waarde staat in faint ("Kiezen"). */
.setrow__sub--leeg { color: var(--color-faint); }
/* Een subregel die een waarde draagt, niet een toelichting ("Om en om · dit jaar bij jou"). */
.setrow__sub--waarde { color: var(--color-text); }
/* Tekst binnen een grijze rij blijft vlak; losse velden delen de grijze pil. */
.setrow--veld { padding: 14px 20px 16px; }
.setrow__label { display: block; margin: 0 2px 8px; font-size: var(--text-15); font-weight: 500; color: var(--color-text); }
/* Toevoeging achter een label of vraag ("· optioneel", "· meerdere mag"): gedempt. */
.setrow__opt { margin-left: 4px; font-size: var(--text-15); font-weight: 400; color: var(--color-text-muted); white-space: nowrap; }
/* Ook de klikbare profielkop volgt de grijze rijfamilie. */
.setrow--identity { min-height: 68px; margin-bottom: var(--space-3); background: var(--color-card); }
a.setrow--identity:active { background: var(--color-card-pressed); }
.setrow:has(.setrow__sub) { padding-block: 14px; }
.setrow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.setrow__title { font-weight: 400; overflow-wrap: break-word; }
.setrow__title--name { font-weight: 500; }
/* Een titel die een hele zin is (schakelrij, handout werkafspraak 4) loopt door op een volgende
   regel in plaats van af te kappen. */
.setrow__title.setrow__title--zin { white-space: normal; overflow: visible; }
.setrow__title:only-child { font-weight: 400; }
/* Typografie van een lijstrij (Design-delta 2026-09-02). De app stond overal een tandje
   zwaarder en donkerder dan het prototype: titels ~600 in bijna-zwart, subregels 13px in
   donkergrijs, waarden in inkt. Daardoor vocht elke rij om aandacht. Nu: de titel draagt
   het accent, subregel en waarde delen dezelfde grijswaarde, en de rij leest als één
   geheel. Geldt app-breed voor lijstrijen — daarom hier en niet per pagina. */
.setrow__text .setrow__title { font-size: var(--text-17); color: var(--color-text); font-weight: 400; }
.setrow__title:first-child { flex: 1; min-width: 0; }
/* Titel + waarde in één rij: niets kapt af (conventions §3.4, 2026-10-01). De titel krijgt
   de ruimte, de waarde hooguit de helft; wat niet past loopt door op een volgende regel. */
.setrow__title:has(+ .setrow__value) { flex: 1 1 auto; min-width: 0; }
.setrow__value { flex: 0 1 auto; max-width: 50%; min-width: 0; justify-content: flex-end; display: block; text-align: right; align-content: center; overflow-wrap: break-word; }
/* Staat de waarde náást een titel+subregel-kolom, dan is de kolom de hoofdmoot: de waarde
   krimpt mee i.p.v. de helft op te eisen. Zonder dit kapten "Gezicht of vingerafdruk" en
   "Back-up-wachtwoord" af (feedback 2026-09-02). */
.setrow__text + .setrow__value { flex: none; max-width: 45%; }
/* De subregel loopt door op een tweede regel (2026-09-14): afgekapt ("…de opvang ga…")
   zei hij niets meer. Sinds 2026-10-01 geldt dat ook voor de titel (§3.4). */
.setrow__sub { margin-top: 2px; font-size: var(--text-15); font-weight: 400; color: var(--color-text-muted); line-height: var(--leading); }
.setrow__value { font-size: var(--text-15); font-weight: 400; color: var(--color-text-muted); }
/* "Aan"/"Gekoppeld" in inkt — nergens groene tekst (feedback 2026-09-15); Uit blijft gedempt. */
.setrow__value--ok { color: var(--color-text); }
/* Icoon links op een rij of kaart: kaal en gedempt, standaardmaat. Het wijst aan wélk
   onderwerp dit is en vraagt geen aandacht — dat doet de stand rechts. Géén vlakje
   eronder: dat schoof de tekstkolom zo ver in dat titels niet meer uitlijnden met de
   tegels ernaast (kleurdelta §2 + feedback 2026-09-01). Gedeeld door de hub-kaart en de
   auth-routes, in de rij van .vslot/.vstatus/.vbadge. */
/* Veldlabel in de --text-11-rol: klein, uppercase, gedempt. Voor een label dat een VELD
   benoemt ("6-cijferige code"), niet voor een zin. Gedeeld — stond als .plan-ouders__label
   in de plan-tak en werd op het codescherm opnieuw getekend (2026-09-02). */
.vicon { flex: none; width: var(--icon); height: var(--icon); color: var(--color-text-muted); }
.setrow__chevron { flex: none; width: var(--icon); height: var(--icon); color: var(--color-faint); }
.vset__avatar {
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: var(--avatar);
  height: var(--avatar);
  border-radius: 50%;
  /* Initialen in inkt, nooit terracotta (kleurregel 2). */
  background: var(--color-selected);
  color: var(--color-text);
  font-weight: 500;
  font-size: var(--text-lg);
}
/* In een grijze rij staat het rondje in wit (bron: Co-ouder in Instellingen). */
.setrow .vset__avatar { background: var(--color-surface); }
.vset__avatar--sm { width: var(--avatar); height: var(--avatar); font-size: var(--text-base); }
/* Klein figuurtje in een gewone rij (Ons gezin → Kinderen, 2026-09-14): herkenbaar, maar de
   rij blijft dezelfde maat als elke andere rij op het scherm. */
.vset__avatar--xs { width: var(--avatar-sm); height: var(--avatar-sm); font-size: var(--text-sm); }
.vset__logout-form { display: flex; justify-content: center; margin-top: var(--space-5); }
/* Uitloggen is een tekstlink, geen vlak (Design-correctie 2026-09-02): een gevuld rood
   blok gaf het meer gewicht dan de uitgang verdient — er gaat niets verloren. */
.vset__logout {
  text-decoration: none;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-error);
  background: none;
  border: 0;
  padding: 8px 16px;
  cursor: pointer;
}
.vset__logout:active { opacity: 0.7; }
/* Archiveren/verlaten onder Ons gezin (2026-09-14): dezelfde tekstlinks, onder elkaar,
   gecentreerd; archiveren amber (omkeerbaar), verlaten rood. */
.vset__uitgangen { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: var(--space-6); }
.vset__uitgang-form { margin: 0; }
.vset__version { margin: 2px 0 0; text-align: center; font-size: var(--text-xs); color: var(--color-faint); }

/* V9 fase 2 — subscherm-chrome + meldingen-primitives. .vnav = 48px balk met
   een terug-knop die de bestemming noemt (schermnaam staat eronder in .vnav__pagetitle); .setrow--pick = keuzerij met
   accent-vinkje; .vseg = dé vierstands-kanaalschuif (witte pil op actief — de
   enige legitieme segmented control, conventions "Controls"); .vsubject = één
   onderwerp met kop + sub + schuif; .vpunt = vinkjes-uitlegrij (berichtenfilter). */
.vset--sub { padding-top: 0; }
/* Dit scherm is fullbleed: ook de lege staat en foutmelding volgen de titelgutter. */
.vset--passkeys > :is(.empty-state, .alert) { margin-inline: var(--page-gutter); }
.vset--passkeys > .empty-state { padding-inline: 0; }
.vset--passkeys .empty-state__btn { max-width: 100%; white-space: normal; text-align: left; }
.vset--passkeys .empty-state__btn-icon { flex: none; }
/* Lichte stijl (2026-09-26, bron: elk subscherm): de terug-knop is een witte cirkel van
   48px met een pijl naar links in inkt. Hij staat links bóven de titel, met 14px eronder.
   De bestemming blijft als label voor schermlezers (.vnav__backlabel). */
.vnav {
  display: flex;
  align-items: center;
  padding: 4px var(--page-gutter) 14px;
  max-width: var(--page-max);
  margin-inline: auto;
}
.vnav__back {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-left: -2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;

  box-shadow: var(--shadow-rond);
}
.vnav__back:active { background: var(--color-card); }
.vnav__backlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Sluit-kruis (bron V10 W3): dezelfde cirkel, met een kruis. */
.vnav__back--close { color: var(--color-text); }
/* ── Statusmarkering (fase 2, 2026-08-29) ────────────────────────────────────
   Eén pil voor een STAND, met de drie tones die V9.2 kent en die de hub-statusrijen
   al gebruiken. Verving 34 eigen badge-classes met elk net andere radius, maat en
   kleur. Geen groen-tone: die is voorbehouden aan momentane bevestiging (toast).
   Draagt een markering data (wélke ouder, een aantal), dan hoort daar een eigen
   kleur bij en is dit primitief niet de plek. */
.vbadge {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
}
.vbadge--wacht { background: var(--color-amber-soft); color: var(--color-amber-deep); }
.vbadge--rust  { background: var(--color-panel); color: var(--color-text-muted); }
.vbadge--uit   { background: var(--color-panel); color: var(--color-text-muted); }

/* Statustekst — dezelfde drie tones, maar zonder pil: op een rij hoort de stand als
   gewone tekst rechts (V9.2 — meerdere pillen onder elkaar devalueren elkaar). Verving
   .hubrow__status en .account__secrow-badge, die dit allebei apart deden; die laatste
   stond bovendien standaard op groen, wat V9.2 voor rustende status verbiedt. */
/* Slotje op een vergrendeld onderdeel — staat op de status-plek, waar de rij normaal
   zijn stand toont. Eén bouwsteen voor hub-kaart, instellingen-rij, samen-kaart en de
   overdracht-kaart, zodat vergrendeld overal hetzelfde oogt (2026-09-01). */
/* Sectiekop boven een groep instellingen (ontwerp 2026-09-02): klein en gedempt, geen
   kapitalen — hij groepeert, hij roept niet. Gedeeld door de Gezinhub en de Instellingen. */
/* Genummerde stappen — een uitleg-scherm dat een volgorde beschrijft. Het nummer staat in
   een rond vlak zodat de stap ook zonder de tekst te lezen als stap leest. Gedeeld, in de
   rij van .vkop/.vicon/.vslot (2026-09-02). Ritmiek via de gedeelde .stack. */
.vstappen { --stack-gap: var(--space-5); list-style: none; margin: var(--space-8) 0 0; padding: 0; }
.vstap { display: flex; align-items: flex-start; gap: 13px; }
.vstap__nr {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  /* Neutraal zandvlak, net als een avatar of icoontegel: het cijfer is een markering,
     geen label met een stand. Accent zou er betekenis in leggen die er niet is. */
  background: var(--color-panel);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.vstap > span:last-child { flex: 1; font-size: var(--text-sm); line-height: var(--leading); }
/* Opsomming met een stip — voor losse tips, niet voor een volgorde. */
.vpunten { --stack-gap: var(--space-3); list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.vpunten li { position: relative; padding-left: 16px; font-size: var(--text-sm); line-height: var(--leading); color: var(--color-text-muted); }
.vpunten li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-faint); }
/* Plat (2026-09-13): op de lijn van de rijen, in dezelfde maat als elke groepskop. */
.vkop { display: block; margin: 28px 16px 10px; font-size: var(--text-15); font-weight: 400; color: var(--color-text-muted); }
/* Direct in .vset (de hub, Ons gezin) dragen de rijen hun eigen gutter — de kop dus ook,
   anders stond hij tegen de schermrand terwijl de rijen ingesprongen waren (2026-09-13). */
.vset > .vkop { margin-inline: calc(var(--page-gutter) + 16px); }
/* Kop met een knop rechts (Derden: "Bewerken"): de knop hangt in de kop, dus de kop zelf houdt
   rechts 6px minder marge. */
.vkop--knop { display: flex; align-items: center; justify-content: space-between; }
.vset > .vkop--knop { margin-inline: calc(var(--page-gutter) + 16px) calc(var(--page-gutter) - 6px); }
.vset .vkop + .vset__card { margin-top: 0; }
/* Tekstactie rechts in een rij of kop ("Bewerken", "Aanpassen"): een woord in plaats van
   een chevron, voor iets dat je aanpast in plaats van in gaat. */
.vactie { flex: none; color: var(--color-accent); font-weight: 500; font-size: var(--text-sm); }
/* Als <button> (BSN wissen, 2026-09-16): geen geërfde knopstijl — dezelfde reset als elders. */
button.vactie { border: 0; background: none; padding: 0; font-family: inherit; cursor: pointer; }
/* "Bewerken" op de identiteitsrij: het profiel is één ding dat je aanpast, geen map die
   je in gaat — dus een woord, geen chevron. */
/* Streepjesrand = "nog niet definitief" (ontwerp 2026-09-02), niet "co-ouder": hij hoort
   bij een kaart in AFWACHTENDE staat — een verstuurde uitnodiging die nog geen antwoord
   heeft. Zodra de staat definitief is (gekoppeld, of nog niet uitgenodigd) is het een
   gewone kaart. */
.vset__intrek-form { margin: 0; }
.setrow__sub--ok { color: var(--color-text); }
/* Uitnodigen is geen titel maar een ACTIE — een tekstlink in rij-vorm. Daar hoort het
   accent juist wel (Design-delta: "accent is voor tekstlinks en actieve staten"). */
.setrow--invite .vicon,
.setrow--invite .setrow__title { color: var(--color-accent); }
.vslot { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--color-faint); }
/* Op slot = zichtbaar uitgeschakeld (testronde 2026-09-30, C5): een deel-optie zonder gekoppelde
   andere ouder is gedempt; een tik legt nog uit waarom (slotmelding). */
[data-controller~="slotmelding"] { opacity: .5; }
.vstatus { flex: none; white-space: nowrap; font-size: var(--text-base); color: var(--color-text-muted); }
.vstatus--wacht { color: var(--color-amber); }
.vstatus--uit   { color: var(--color-faint); }

/* ── Lijstrij (fase 3, 2026-08-31) ───────────────────────────────────────────
   Avatar · titel + tijd · fragment · ongelezen-stip. De gesprekkenlijst en het
   postvak hadden hier elk een eigen familie voor (.contact-row / .mail-row) met
   dezelfde anatomie en toevallig verschillende maten (42 vs 40px avatar,
   align center vs flex-start). Eén bouwsteen; wat een lijst extra nodig heeft
   (assistent-tint, ongelezen-gewicht) staat als context bij die lijst.
   Onderscheiden van .setrow: dát is een instellingenrij (titel + waarde +
   chevron), dit is een lijstitem van een gesprek of bericht. */
.listrow {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  /* Rij met avatar in een groep (L4, 2026-10-01, §3.5): 16/18/16/16. */
  padding: 16px 18px 16px 16px;
  color: var(--color-text);
  text-decoration: none;
}
.listrow:active { transform: scale(0.985); }
.listrow__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gezin-color, var(--color-surface));
  color: var(--color-text);
  font-weight: 500;
  font-size: var(--text-base);
}
.listrow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.listrow__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.listrow__title {
  /* Rijtitel 17/400 (§3.4); ongelezen draagt alleen de stip. */
  font-size: var(--text-17);
  font-weight: 400;
  overflow-wrap: break-word;
}
.listrow__time { flex: none; font-size: var(--text-sm); color: var(--color-text-muted); }
/* Drie regels per mailrij (2026-09-10): wie · waarover · hoe het begint. Het onderwerp is
   de leesregel — inkt, zelfde maat als de naam maar zonder het gewicht; de preview eronder
   is gedempt en klein. */
.listrow__subject {
  font-size: var(--text-15);
  color: var(--color-text);
  overflow-wrap: break-word;
}
.listrow__sub {
  font-size: var(--text-15);
  color: var(--color-text-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
/* Ongelezen is alléén de stip: 7px in inkt — geen vet en geen accent (bron V10,
   2026-09-04). Accent concurreerde met de tabstand; gewicht maakte de hele rij druk. */
.listrow__dot { flex: none; width: 9px; height: 9px; margin-top: 8px; border-radius: 50%; background: var(--color-btn); }
/* De assistent-rij in de gesprekkenlijst draagt zijn eigen tint — dat is data
   (wélk gesprek), niet decoratie. */
.listrow__avatar--assistent { background: var(--color-assistant-soft); color: var(--color-assistant); }
.listrow__avatar--assistent .icon { width: var(--icon); height: var(--icon); }

/* ── Lege melding (fase 4, 2026-08-31) ───────────────────────────────────────
   De één-regel "hier is nog niets"-melding. Twaalf schermen hadden er elk een
   eigen class voor, allemaal text-sm + muted, in twee smaken: gecentreerd met
   verticale lucht (een lege lijst) of links in de flow (een leeg detail).
   De volwaardige lege staat mét icoon en titel is shared/_empty_state — dit is
   de lichte variant voor binnen een blok. Plaatsing (marge) blijft bij het
   scherm; de vorm is één ding. */
/* Lege staat: dezelfde maat als .empty-state__text (15), niet kleiner (testronde C1). */
.vleeg { margin: 0; font-size: var(--text-15); line-height: var(--leading); color: var(--color-text-muted); }
.vleeg--center { text-align: center; padding: var(--space-8) 0; }
/* Leeg onder een sectiekop (ChatGPT-stijl): één regel op de inspring van de kop. */
.vkop + .vleeg { margin: 0 18px; font-size: var(--text-15); line-height: var(--leading); }
/* Plaatsing per scherm — de vorm is gedeeld, de marge niet. */
.histlog .vleeg { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.dossier-list .vleeg { margin-top: var(--space-4); }
.invitations .vleeg { margin-top: var(--space-4); }
.chat__stream > .vleeg { margin-block: var(--space-6); }
.meldingen .vleeg { padding-block: 44px; }
/* In een compacte instellingenrij is de statustekst een maat kleiner en zwaarder. */
.setrow .vstatus { font-size: var(--text-sm); font-weight: 500; }

/* Scherm-acties rechts in de balk (+ / kebab / filter); de knopstijl zelf is gedeeld
   met section_head (application.css). */
.vnav__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* Kop-acties naast de terugknop zijn witte cirkels van 48px, net als de terugknop zelf (besluit
   Jerry 2026-10-01, conventions §3.9). In een titelrij naast een grote titel (.screen-head,
   de landingen) blijven ze kaal op 44px. De primaire actie blijft gevuld in inkt. */
.vnav .vnav__action { width: 48px; height: 48px; border-radius: 50%; background: var(--color-surface); }
.vnav .vnav__action:not(.vnav__action--primair) { box-shadow: var(--shadow-rond); }
.vnav .vnav__action:active { background: var(--color-card); }
.vnav .vnav__action--primair,
.vnav .vnav__action--primair:active { background: var(--color-btn); color: var(--color-on-btn); }
.vnav .vnav__action--primair[disabled] { background: var(--color-faint); cursor: not-allowed; }
/* button_to wikkelt zijn knop in een <form>; die mag de rij niet breken. */
.vnav__actions form { display: contents; }
/* Dezelfde terug-knop buiten de vnav-balk: acht schermen hadden er een eigen class voor
   met een identieke declaratie (2026-08-29). Alleen de plaatsing verschilde, en die
   hoort bij het scherm — de knop zelf is één bouwsteen. */
.contact-detail > .vnav__back,
.plan > .vnav__back { margin-bottom: 14px; }
.vnav__back .icon { width: var(--icon-lg); height: var(--icon-lg); }
.vset__intro { margin: 0; padding: 16px var(--page-gutter) 18px; font-size: var(--text-17); line-height: var(--leading); color: var(--color-text-muted); }
/* Dezelfde kantlijn voor de gedeelde .lede: in een .vset staat die anders tegen de rand,
   terwijl de titel erboven wél inspringt (2026-09-16). */
.vset > .lede { margin: 0; padding: 16px var(--page-gutter) 18px; }
/* Kind-koppelcode (DP11): eenmalig getoond, groot en leesbaar — zelfde functie als
   .auth__input--code maar als platte tekst (geen invoerveld). */
.kindcode { font-size: 2rem; text-align: center; font-weight: 500; margin: 18px 0; }
.setrow-form { display: contents; }
/* Rijen die als <button> renderen (keuzerijen, kind-poort, uitnodig-CTA) erven de
   browser-knopstijl — die gaf dikke zwarte randen (feedback 2026-08-19). Eén reset:
   alleen de V9-haarlijn boven blijft. */
.setrow-form .setrow, button.setrow {
  width: 100%;
  border: 0;
  font: inherit;
  /* font: inherit zette de rijmaat terug op die van de ouder (16): een knop-rij hoort op 17. */
  font-size: var(--text-17);
  color: var(--color-text);
  text-align: left;
}
/* Een rij die niet te openen is (rechterlijk slot): gedempt, geen drukstand. */
button.setrow:disabled { cursor: default; opacity: .55; }
button.setrow:disabled:active { background: var(--color-card); }
.setrow--pick { min-height: 60px; }
/* Een keuzerij draagt een uitleg die mag doorlopen: als één afgekapte zin wist je niet
   waar je voor koos (2026-09-15). */
.setrow--pick .setrow__title { white-space: normal; }
.setrow--static { cursor: default; }
/* Een handeling die nog niet kan (derde uitnodigen, 2026-09-14): dezelfde rij, gedempt,
   met de reden als subregel — geen grijze knop met een alinea erboven. */
.setrow--gedempt .setrow__title { color: var(--color-text-muted); }
.setrow--gedempt .setrow__value { color: var(--color-faint); }
/* Een tweede tekstactie naast de accent-actie (Intrekken naast Opnieuw sturen): gedempt. */
.setrow--actie.setrow--gedempt { color: var(--color-text-muted); }
.setrow--static:active { background: var(--color-card); }
.setrow--static:active > * { transform: none; } /* niet tikbaar: ook de schuif uit de druk-taal uit */
.setrow__check { flex: none; width: var(--icon); height: var(--icon); color: var(--color-accent); }
/* Stille uren: Van → Tot als twee kolommen (2026-09-15), op de gutter van de vset-rijen. */
.quiet-hours-uren { margin: 0 var(--page-gutter); }
/* Het label staat boven de tijd in dezelfde kolom, dus beide gecentreerd (2026-09-15). */
.quiet-hours-uren .agenda-form__blokkop { margin-inline: 0; text-align: center; }
.quiet-hours-uren form { margin: 0; }
.vsubject { padding: 14px 22px; border-top: 1px solid var(--color-hair); }
.vsubject__head { display: flex; align-items: baseline; gap: 10px; }
.vsubject__title { flex: 1; min-width: 0; font-size: var(--text-base); }
.vsubject__follow-form { flex: none; }
.vsubject__follow { border: 0; background: none; padding: 0; font: inherit; font-size: var(--text-sm); color: var(--color-accent); cursor: pointer; }
.vsubject__follow:active { opacity: 0.55; }
.vsubject__sub { display: block; margin-top: 3px; font-size: var(--text-sm); line-height: var(--leading); color: var(--color-text-muted); }
.vseg { display: flex; flex-wrap: wrap; gap: 8px; margin: 11px 0 0; padding: 0; border: 0; border-radius: var(--radius-pill); background: none; }
.vseg__form { flex: 0 1 auto; min-width: 0; display: flex; margin: 0; }
.vseg__seg {
  flex: 1;
  min-height: 44px; padding: 10px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-card);
  font: inherit;
  font-size: var(--text-15);
  color: var(--color-text-muted);
  text-align: center;
  cursor: pointer;
}
.vseg__seg--active { background: var(--color-btn); color: var(--color-on-btn); box-shadow: none; }
.vpunt { display: flex; gap: 11px; padding: 11px 22px; border-top: 1px solid var(--color-hair); font-size: var(--text-sm); line-height: var(--leading); color: var(--color-text-muted); }
.vpunt__check { flex: none; width: var(--icon-sm); height: var(--icon-sm); margin-top: 2px; color: var(--color-green); }

/* Form-schermen (profiel, e-mail) houden hun gepadde container; de vnav staat
   erbuiten (full-bleed). De container hoeft dan geen eigen top-padding meer. */
/* Form-schermen onder een vnav-kop: dezelfde 16px-inzet als de kop en de kaarten,
   zodat de terug-link en de inhoud op één lijn staan (feedback 2026-08-20). */
.account-section--vnav { padding-top: var(--space-4); --page-gutter: 16px; }
/* Als sheet (family/_andere_ouder_sheet) draagt de sheet de marge: geen tweede rand erbinnen. */
.sheet__body .account-section { padding: 0; }
.vset .infobox { margin: var(--space-6) var(--page-gutter) 0; }
/* Toevoeg-rij als laatste rij van een groep ("Kind toevoegen", ChatGPT-stijl 2026-09-28): een
   plus van 22px en de titel in inkt — toevoegen is gewoon een rij, geen terracotta actie. */
.setrow--add, .setrow--actie { width: 100%; border: 0; text-align: left; }
.setrow--add { color: var(--color-text); }
.setrow__plus { flex: none; width: 22px; height: 22px; color: var(--color-text); }
/* Een tekstactie als rij (uitnodiging intrekken): wél een bijzondere actie, dus accent. */
.setrow--actie { color: var(--color-accent); }
/* De soort bóven de titel ("Allergieën" boven "Pinda's"; prototype KIND DETAIL 2026-09-28). */
.setrow__boven { font-size: var(--text-15); line-height: var(--leading); color: var(--color-text-muted); }
/* Een toevoeging ín de titel die gedempt meeleest ("Jij · Moeder"). */
.setrow__bij { color: var(--color-text-muted); }
/* Een waarde onder zijn soort loopt door: een afgekapte allergie of medicatie zegt niets. */
.setrow__boven + .setrow__title { white-space: normal; overflow: visible; }
.setrow__title.setrow__title--leeg { color: var(--color-faint); }
/* Bel-knop rechts in een rij: een witte cirkel van 44px (lichte stijl: een icoon in een kaart). */
.setrow__bel { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.setrow__bel svg { width: var(--icon); height: var(--icon); }
/* Kiezer-rij ("Van", "Begintijd"; prototype NIEUWE AFSPRAAK 2026-09-28): de datum- of tijdknop
   vult de rest van de rij en toont de waarde als tekst rechts — leeg in faint. */
/* Veld-rij (shared/_veld_rij, _datum_veld_rij; prototype 29 sep): icoon, label, de waarde
   eronder; een tik opent de veld-sheet of de datumkiezer. */
.setrow--veldknop { width: 100%; text-align: left; cursor: pointer; }
.setrow__icoon { flex: none; width: var(--icon-lg); height: var(--icon-lg); color: var(--color-text); }
.setrow--datum { position: relative; cursor: pointer; }
.setrow--datum button.setrow__datumknop {
  padding: 0; margin-top: 2px; min-height: 0; border: 0; background: none; box-shadow: none; text-align: left;
  font-size: var(--text-15); font-weight: 400; color: var(--color-text-muted);
}
/* De knop dekt de hele rij: een tik op het label opent ook de kiezer. */
.setrow--datum button.setrow__datumknop::after { content: ""; position: absolute; inset: 0; }
/* Leeg: geen tekst en geen hoogte — alleen het label staat er, zoals bij een lege veld-rij. */
.setrow--datum button.setrow__datumknop.is-empty { height: 0; margin-top: 0; overflow: visible; }
.setrow--kiezer { cursor: pointer; }
.setrow--kiezer > :is(.datecal, .timewheel) { flex: 1; min-width: 0; display: flex; justify-content: flex-end; }
.setrow--kiezer button.agenda-form__when-input {
  flex: 1; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-size: var(--text-17); color: var(--color-text); text-align: right;
}
.setrow--kiezer button.agenda-form__when-input.is-empty { color: var(--color-faint); }
.setrow--kiezer button.agenda-form__when-input.is-fout { color: var(--color-error); }
/* Een rij die dicht staat (de tijden bij "Hele dag"). */
.setrow.is-dicht { display: none; }
/* Sheet-rijen: vast kaartgrijs, minimaal 56px, groep 22px; onafhankelijk van de paginakleur. */
.sheet { --radius-groep: var(--radius-groep-sheet); }
.sheet .setrow { min-height: 56px; background: var(--color-card); }
.sheet :is(a, button, label).setrow:active { background: var(--color-card-pressed); }
.setrow__title.setrow__title--gevaar { color: var(--color-error); }
.vset__unlink-form { flex: none; }
.vset__unlink { border: 0; background: none; padding: 8px 0 8px 12px; font: inherit; font-size: var(--text-sm); color: var(--color-error); cursor: pointer; }
.vset__unlink:active { opacity: 0.55; }
.vset__feedblock { padding: 14px 22px; }
.vset__feedacts { display: flex; align-items: center; gap: 22px; margin: 0 var(--page-gutter); }
.vset__feedact { font: inherit; font-size: var(--text-sm); color: var(--color-accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.vset__feedact--muted { color: var(--color-text-muted); }
.vset__feedact:active { opacity: 0.55; }
.vset__feedact-form { display: contents; }
.vset__pickradio { position: absolute; opacity: 0; width: 0; height: 0; }
label.setrow--pick { position: relative; }
/* Destructieve tekstacties onderaan een V9-scherm (gezin archiveren/verlaten). */
/* Co-ouder-scherm (V9 fase 4): header met avatar + naam + gekoppeld-sinds. */
.vset__cohead { display: flex; align-items: center; gap: 14px; padding: 18px var(--page-gutter) 20px; }
.vset__avatar--lg { width: var(--avatar-lg); height: var(--avatar-lg); font-size: var(--text-22); }
.vset__cohead-text { flex: 1; min-width: 0; }
.vset__cohead-name { margin: 0; font-family: var(--font-display); font-size: var(--text-22); font-weight: 500; letter-spacing: -0.01em; }
.vset__cohead-status { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--text-sm); color: var(--color-text-muted); }
.vset__cohead-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-green); }
.vset__footnote { margin: 0; padding: 10px var(--page-gutter) 0; font-size: var(--text-xs); line-height: var(--leading); color: var(--color-faint); }
.setrow__title--accent { color: var(--color-accent); }
.vset__rows--acties { margin-top: var(--space-6); }
/* Pagina's die hun gutter al van de vnav-kop krijgen: het vlak zet die niet nog eens. */
.abo .vset__rows { margin-inline: 0; }

/* Form-subschermen (agenda-kleuren, profiel): de veld-legends in de rustige
   eyebrow-stijl i.p.v. vet zwart — zelfde toon als .vset__group (feedback 2026-08-19). */
.account-section--vnav .field__label {
  font-size: var(--text-15);
  font-weight: 500;
  color: var(--color-text);
}

/* De vset-blokken dragen sinds 2026-09-03 hun eigen --page-gutter (de container heeft er
   geen meer). Binnen .account-section is die padding er wél, dus daar tellen ze niet op. */
.account-section :is(.vset__rows, .vset__card, .vset__group, .vset__feedblock) {
  margin-inline: 0;
}
.account-section :is(.vset__intro, .vset__pad, .vset__footnote, .vset__cohead) { padding-inline: 0; }

/* Profiel-formulier (2026-09-03): de avatar-hero en de rode slotrij komen uit de oude
   rij-hub, waar de container zelf geen zijpadding had. Binnen .account-section is die
   padding er wél — dus hier hun eigen zijmarge terugzetten naar nul in plaats van 'm
   op te tellen. */
/* Veldmodel uit de bron-handoff "Profiel + E-mailadres wijzigen V9.3" (2026-09-03):
   label in inkt (niet gedempt), het veld dráágt de lift in rust, padding 13/15 met
   15px tekst, 7px tussen label en veld en 16px onder elk veld. Schermpadding 18px —
   de app-brede maat sinds 2026-09-02, waar .account-section--vnav nog 16 van maakt.

   VOORLOPIG ALLEEN HIER (besluit Jerry 2026-09-03). Deze waarden horen bij
   .form__label/.form__input zélf, en die renderen elk formulier in de app; de rest is
   nog niet omgezet. Wordt dat wél gedaan, dan verhuist dit blok naar de primitives en
   verdwijnt deze modifier — twee veldmodellen naast elkaar is een tussenstand, geen
   eindstand. */
.account-section--profiel { --page-gutter: 18px; }
.account-section--profiel .hint { color: var(--color-faint); }

/* Onomkeerbare actie onder een formulier: gecentreerde tekst in rood, geen vlak en
   geen lift (bron 2026-09-03). Een kaart eromheen gaf 'm het gewicht van een gewone
   instellingenrij, terwijl dit het enige is op dit scherm dat niet terug te draaien is. */
.vset__verwijderlink-form { margin: 0; }
.vset__verwijderlink {
  display: block;
  width: 100%;
  padding: 20px 0 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-error);
  text-align: center;
  cursor: pointer;
}
.vset__verwijderlink:active { opacity: 0.6; }

/* Avatar-hero op het profiel: gecentreerde cirkel met één tekstactie eronder die de
   foto-sheet opent (design 2026-08-19, gebleven in de handoff van 2026-09-03). */
.vset__avatarhero { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 0 0 24px; }
.vset__avatar--hero { width: 84px; height: 84px; font-size: var(--text-32); }
.vset__avatarhero-link { font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-accent); background: none; border: 0; padding: 0; cursor: pointer; }
.vset__avatarhero-link:active { opacity: 0.55; }
.setrow--input { cursor: text; }
/* Invoerveld BÍNNEN een rij: geen eigen vlak, want de rij is het vlak. De gedeelde
   veldbasis (`:where(input, select, textarea)`) geeft elk veld de lift + radius; hier
   moet die eraf, anders zweeft er een schaduwplaatje midden in de rij dat over de rand
   van de kaart heen valt (gezien op E-mailadres wijzigen, 2026-09-03). */
.setrow__input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  font: inherit;
  font-size: var(--text-17);
  color: var(--color-text);
  text-align: right;
  padding: 14px 0;
}
/* Veldmodel (2026-09-01): op de per-veld-schermen is de rij het veld. Focus =
   accentrand op de rij (inset — het vlak eromheen knipt met overflow:hidden, dus
   een buitenrand zou wegvallen) + de gedeelde ring op het vlak. Dit verving
   `outline: none` zonder vervanging — toetsenbord-focus was hier onzichtbaar. */
.setrow__input:focus { outline: none; }
.setrow--input:focus-within { box-shadow: inset 0 0 0 1.5px var(--color-accent); }
.vset__rows:has(.setrow__input:focus) { box-shadow: var(--veld-focus-ring); }
.setrow__input::placeholder { color: var(--color-faint); }
.vset__pad { padding: var(--space-5) var(--page-gutter) 0; }

/* Kind-home (DP11): de eigen hero-avatar op de kind-landing houdt zijn agenda-kleur
   (V9.2) — zelfde --kid-color-idioom als .kindf__figuur; zonder
   de variabele (elke andere .vset__avatar--hero) blijft het bestaande --color-panel. */
.vset__avatar--hero { background: var(--kid-color, var(--color-panel)); }
/* Profielfoto-sheet: tikbare tekstrijen + de grijze annuleer-knop (design 2026-08-19). */
.avsheet { display: flex; flex-direction: column; }
.avsheet__form { display: contents; }
.avsheet__rij {
  display: block;
  width: 100%;
  padding: 15px 2px;
  border: 0;
  border-bottom: 1px solid var(--color-hair);
  background: none;
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}
.avsheet__rij--danger { color: var(--color-error); }
.avsheet__annuleer {
  margin-top: var(--space-4);
  padding: 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-hover);
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  cursor: pointer;
}
.avsheet__annuleer:active { opacity: 0.7; }

/* V9.1 (design 2026-08-19): de hub groepeert rijen in zachte witte kaarten zonder
   kopjes en zonder chevrons — de rij-waarde is de enige decoratie. De kaart draagt
   zelf geen padding (de rijen houden hun 22px-inzet); haarlijnen alleen tússen rijen. */
/* Plat (2026-09-13): geen kaart meer — de rijen staan op het papier met haarlijnen, de
   groep leest aan zijn kop (.vkop). De eigen gutter blijft (de .vset heeft er geen). */
/* De scheiding zit op de rij zelf (border-bottom, laatste zonder). Deze regel zette
   er een tweede lijn bovenop, wat als één dikke lijn las (2026-09-02). */
.vset__card .setrow--identity { margin-bottom: 0; min-height: 64px; }

/* V9.1: losse blokken die met de kaarten meegaan. */
.vset__feedblock {
  margin: var(--space-4) var(--page-gutter);
  border: 0;
  background: var(--color-card);
  border-radius: var(--radius-groep);
}

/* Gedeelde veldrij: de rij is het focusanker, zonder een tweede vak rond de tekst. */
.setrow:has(:is(input:not([type="radio"], [type="checkbox"], [type="hidden"]), textarea):focus) {
  outline: 1px solid var(--color-text); outline-offset: -1px;
}
.setrow:has(:is(input, textarea).is-fout) { outline: 1px solid var(--color-error); outline-offset: -1px; }
.setrow:has(.vset__avatar) { min-height: 64px; }
.radiolist > .radiorow:first-child { border-top-left-radius: var(--radius-groep); border-top-right-radius: var(--radius-groep); }
.radiolist > .radiorow:last-child { border-bottom-left-radius: var(--radius-groep); border-bottom-right-radius: var(--radius-groep); }

.sheet .setrow:has(.vset__avatar) { min-height: 64px; }
.setrow:has(input:focus, textarea:focus) :is(.setrow__input, .plan-field) { border-color: transparent; }
.setrow :is(.setrow__input, .plan-field).is-fout { border-color: var(--color-error); }