/* ===================== OUDERSCHAPSPLAN-FLOW =====================
   Begeleide samenwerk-flow (design-handoff). Full-bleed
   mobiele schermen op de bestaande app-tokens — de prototype-kleuren mappen 1-op-1:
   --accent→--color-accent, --soft→--color-panel, --purple→--color-coparent,
   --purplesoft→--color-coparent-soft, --amber(soft), --green(soft), --faint, --line,
   --ink→--color-text, --muted→--color-text-muted, --card→--color-surface. */

@keyframes plan-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes plan-pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }

/* Flow-scherm: paginageometrie via de gedeelde .page-regel in application.css
   (480px → de app-brede 520px); hier alleen de eigen fade. */
.plan {
  /* backwards, niet both: na de animatie mag er geen transform op .plan blijven staan —
     die maakt .plan het ankerpunt voor position: fixed, en dan viel een keuzepaneel
     (alimentatie "Geldt", Jerry 2026-09-25) buiten beeld met alleen de scrim zichtbaar. */
  animation: plan-fade 0.35s ease backwards;
}
@media (prefers-reduced-motion: reduce) { .plan { animation: none; } }

/* Terug-link "‹ {label}" in het accent. */

/* Paginatitel (lichte stijl): 30/600, zoals .vnav__pagetitle. */
.plan__title {
  font-size: var(--text-30);
  font-weight: 600;
  line-height: var(--leading-kop);
  letter-spacing: -0.02em;
  color: var(--color-text);
}

/* ── Knoppen: de app-brede .button-primitive (fase 5, audit 2026-08-06) ──
   .plan-btn was een volledige herbouw van .button--block (~52px, kaart-radius);
   de views dragen nu button/button--block/--secondary/--coparent/--green. */
.plan-link {
  display: block;
  width: 100%;
  text-align: center;
  font: inherit;
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-accent);
  background: none;
  border: 0;
  padding: 12px 0 2px;
  cursor: pointer;
  text-decoration: none;
}

/* ── Intro ── */
/* Was een terracotta gradient-kaart ("warme uitleg-kaart", tot 2026-09-12). Een uitleg is
   gewone tekst en staat op het papier, met een haarlijn eronder — conventie: accent alleen
   op tekst-signalen, content direct op het canvas. Het icoon is kaal en gedempt, links. */
.plan-hero {
  margin: 6px 0 10px;
  padding: 6px 2px 14px;
  color: var(--color-text);
}
.plan-hero__icon { display: flex; color: var(--color-text-muted); margin-bottom: 10px; }
.plan-hero__icon svg { width: var(--icon); height: var(--icon); }
.plan-hero__title { font-family: var(--font-display); font-size: var(--text-20); font-weight: 500; line-height: var(--leading-kop); }
.plan-hero__body { font-size: var(--text-sm); line-height: var(--leading); color: var(--color-text-muted); margin-top: 8px; }

.plan-bullets { --stack-gap: var(--space-3); padding: 0 2px; }
.plan-bullet { display: flex; gap: 11px; align-items: flex-start; font-size: var(--text-sm); line-height: var(--leading); color: var(--color-text); }
/* Kaal vinkje in muted op de eerste regel — geen tegeltje, geen accent (2026-09-12). */
.plan-bullet__check { flex: none; display: flex; margin-top: 2px; color: var(--color-text-muted); }
.plan-bullet__check svg { width: var(--icon-sm); height: var(--icon-sm); }

.plan-disclaimer {
  font-size: var(--text-xs);
  color: var(--color-faint);
  line-height: var(--leading);
  margin: 16px 0 14px;
  text-align: center;
}

/* ── Hub ── */
.plan-hub__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* De stand van het plan als kale tekst rechts naast de titel (ontwerp hub 2026-09-26). */
.plan-hub__stand { flex: none; font-size: var(--text-15); font-weight: 500; color: var(--color-text-muted); }
/* De hub-titel is een maat groter dan een gewone paginatitel (ontwerp 2026-09-26: 32/600, -0,7px). */
.plan-hub__head .plan__title { font-size: var(--text-32); letter-spacing: -0.022em; }

/* Avatar-paar (jij + co-ouder). */
.plan-avatars { display: flex; align-items: center; gap: 8px; margin: 12px 0 22px; }
.plan-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--color-on-accent);
  font-weight: 500;
  font-size: var(--text-sm);
}
/* Jij in inkt (ontwerp hub 2026-09-26: initialen nooit terracotta); de ander houdt zijn rolkleur. */
.plan-avatar--me { background: var(--color-btn); color: var(--color-on-btn); }
.plan-avatar--co { background: var(--color-coparent); margin-left: -10px; border: 2px solid var(--color-bg); }
.plan-avatars__label { font-size: var(--text-15); color: var(--color-text-muted); }

/* Lichte stijl (2026-09-26, bron OUDERSCHAPSPLAN — HUB): de voortgang staat in een grijze
   kaart, de onderwerpen in grijze kaarten met een haarlijn tussen de rijen. */
.plan-progress { padding: 18px 20px; margin-bottom: 26px; background: var(--color-card); border-radius: var(--radius-groep); }
.plan-progress__row { display: flex; align-items: baseline; justify-content: space-between; }
.plan-progress__hint { font-size: var(--text-15); color: var(--color-text-muted); }
/* Conceptkaart (solo): grijs vlak met de uitleg en de uitnodiging eronder. */
.plan-hub__concept { padding: 18px 20px; background: var(--color-card); border-radius: var(--radius-groep); }
.plan-hub__concept-tekst { margin: 0 0 13px; font-size: var(--text-17); line-height: var(--leading); color: var(--color-text); }
.plan-progress__count { font-size: var(--text-17); font-weight: 500; line-height: var(--leading-kop); }

/* Sectiekop boven een kaart. */
.plan-section-label {
  font-size: var(--text-15);
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 0 4px 10px;
}

/* Groep rijen (gedeelde regel, §3.5). */
.plan-topics { margin-bottom: 20px; }
.plan-topic {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--color-text);
}
/* Vaste witte cirkel van 36px vóór elke naam, zodat de namen onder elkaar staan; een afgesproken
   onderwerp draagt er een groen vinkje in. */
.plan-topic__dot {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface);
  display: grid;
  place-items: center;
}
/* Een open onderwerp: een stip van 10px in de cirkel, gekleurd naar de fase (ontwerp
   2026-09-26) — grijs niet begonnen, inkt concept, amber wacht, terracotta wacht op jou. */
.plan-topic__dot:empty::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-status-leeg); }
.plan-status--concept .plan-topic__dot::after { background: var(--color-btn); }
.plan-status--wacht .plan-topic__dot::after { background: var(--color-amber); }
.plan-status--review .plan-topic__dot::after { background: var(--color-accent); }
.plan-topic__dot svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--color-green); }
.plan-topic__main { flex: 1; min-width: 0; }
.plan-topic__name { display: block; font-size: var(--text-17); font-weight: 500; line-height: var(--leading-kop); }
.plan-topic__badge { display: block; font-size: var(--text-sm); font-weight: 400; margin-top: 2px; }
.plan-topic__badge--alert { color: var(--color-amber); font-weight: 500; }
.plan-topic__chevron { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--color-faint); }

/* Status-tinten (dot-vlak + badge-tekst). Eén bron voor hub + onderwerp-schermen. */
.plan-status--leeg .plan-topic__badge { color: var(--color-text-muted); }
.plan-status--wacht .plan-topic__badge { color: var(--color-amber); }
.plan-status--review .plan-topic__badge { color: var(--color-accent); }
/* V9.2: "we zijn het eens" is een rustende status — de tekst is gedempt, niet groen.
   De voortgangsstip hierboven houdt wél kleur: die draagt de fase (data), en dat is
   precies waar V9.2 kleur wél toestaat. */
.plan-status--eens .plan-topic__badge { color: var(--color-text-muted); }
/* Concept (solo ingevuld, nog niet gedeeld) — accent-tint, zoals 'review'. */
.plan-status--concept .plan-topic__badge { color: var(--color-accent); }

/* Wat tekenen nog tegenhoudt — de ander is niet langs de plan-poort (spec 2026-09-23) of de
   aanhef is niet compleet (2026-09-24): rustige regel, geen alarm. */
.plan-hub__wacht {
  margin: 8px 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading);
  color: var(--color-text-muted);
}

/* Rustige notitie boven de "deel met de andere ouder"-knop (solo-hub). */
.plan-share-note {
  margin: 18px 0 10px;
  font-size: var(--text-sm);
  line-height: var(--leading);
  color: var(--color-text-muted);
  text-align: center;
}

/* "Opnieuw kiezen" — gedempte tekst-link onderaan de hub (terug naar de begin-keuze). */
.plan-reset-form { margin: 16px 0 4px; text-align: center; }
.plan-reset {
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: underline;
}

/* ===================== ONDERWERP-SCHERMEN ===================== */
.plan-form { margin: 0; }
/* Knop-lucht op de gecentreerde plan-schermen zonder .stack (done/sent/intro). */
.plan-btn--mt { margin-top: var(--space-6); }
.plan--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* De terug-knop blijft links staan op de gecentreerde schermen: de kop zelf beslaat de hele
   breedte (hij is een flex-kind van het gecentreerde scherm en kromp anders tot de knop). */
.plan--center > .vnav { align-self: stretch; }
.plan--center .vnav__back { align-self: flex-start; }
/* Succes-/bevestigingsschermen: ruimte onder het icoon. Drie eigen titelclasses hadden
   hiervoor elk een eigen maat (18/20/22px) met verder identieke typografie. */
.plan--center .plan__title { margin-top: 20px; line-height: var(--leading-kop); }

/* "Waarom dit telt": tekst op het papier onder een haarlijn — geen zandvlak (plat,
   2026-09-12). Een toelichting is geen kaart. */
/* Ruim gezet (feedback 2026-09-12: "alles staat te veel op elkaar"): lucht boven de haarlijn,
   lucht tussen kopje en tekst, en de Start-knop staat los van de toelichting. */
.plan-note { margin-top: 18px; padding: 14px 20px; background: var(--color-card); border-radius: var(--radius-groep); }
.plan-note__head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); }
.plan-note__head svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--color-text); }
.plan-note__body { font-size: var(--text-15); line-height: var(--leading); color: var(--color-text); }

/* Vrij tekstveld. */
/* ── Plan-intake (design planIntake) + bekrachtigd-badge ── */
/* Twee vragen als kop (design 2026-09-29): 17 in inkt, het (?) rechts op de regel. */
.plan-intake__vraag { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin: 0 2px 12px; font-size: var(--text-17); font-weight: 400; line-height: var(--leading-kop); color: var(--color-text); }
.plan-intake__vraag .knowledge-btn { flex: none; margin-block: -2px; }
.plan-form > .plan-intake__vraag:first-of-type { margin-top: 24px; }
.plan-intake__datum { margin-top: 16px; }
.plan-intake__datum .plan-inf__sublabel { font-size: var(--text-15); font-weight: 500; color: var(--color-text); }
.plan-intake__hint { margin: 12px 4px 0; font-size: var(--text-15); color: var(--color-text-muted); }
.plan-intake__routes { margin-top: 32px; }
.plan-ratified { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 2px; font-size: var(--text-xs); color: var(--color-green); background: var(--color-green-soft); padding: 5px 11px; border-radius: var(--radius); }
.plan-ratified svg { width: var(--icon-xs); height: var(--icon-xs); }

/* ── Keuzes (segment, radio, vinkjes) — oorspronkelijk van de hoofdverblijf-editor ── */
.plan-hv__opts { display: flex; gap: 8px; }
.plan-hv__opt { flex: 1; position: relative; }
.plan-hv__opt-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Segment (handout 2026-09-28): pillen van 15/500, gekozen inkt met wit. */
.plan-hv__opt-label { display: block; text-align: center; padding: 11px 6px; border-radius: var(--radius-pill); font-size: var(--text-15); font-weight: 500; cursor: pointer; background: var(--color-card); color: var(--color-text-muted); border: 1px solid transparent; transition: transform .12s ease; }
.plan-hv__opt-label:active { transform: scale(.97); }
.plan-hv__opt-input:checked + .plan-hv__opt-label,
.plan-hv__opt-label[aria-pressed="true"] { background: var(--color-btn); color: var(--color-on-btn); border-color: var(--color-btn); }
/* Als knop (door JS getekend, zoals de overdracht-sheet) i.p.v. label om een radio. */
button.plan-hv__opt-label { width: 100%; font-family: inherit; }
/* Op een witte sheet is een niet-gekozen pil grijs (conventions §3.6). */
.sheet .plan-hv__opt-label { background: var(--color-card); }
.sheet .plan-hv__opt-label[aria-pressed="true"],
.sheet .plan-hv__opt-input:checked + .plan-hv__opt-label { background: var(--color-btn); }

/* Label boven een segment in een rij (handout 2026-09-28): 15 muted, 10px eronder. De rest van
   de oude Informeren-editor is opgegaan in de gedeelde rijen (.setrow in .vset__rows). */
.plan-inf__sublabel { display: block; font-size: var(--text-15); font-weight: 400; color: var(--color-text-muted); margin-bottom: 10px; }

/* Deelt DÉ veldstijl (application.css); hier alleen de hoogte en het regelritme. */
.plan-textarea { margin-top: 14px; line-height: var(--leading); resize: vertical; min-height: 104px; border-radius: var(--radius-textarea); }

/* Gedeeld veld-primitief: zachte input/textarea/select (bg = paginagrond, fijne lijn,
   gedempte placeholder) i.p.v. wit-met-harde-rand. Gebruikt door álle editors voor vrije
   tekst/datum, zodat velden overal hetzelfde ogen (design-getrouw). */
/* Deelt DÉ veldstijl (application.css). Stond tot 2026-09-10 op de paginagrond met een
   lijn, terwijl de datumknop ernaast wit was — twee soorten veld in één kolom. */
.plan-field { line-height: var(--leading); resize: none; }
/* Euro-balk in de kosten-editor deelt dezelfde zachte grond als de andere velden; de
   eigen onder-marge uit kasboek.css (dat ná dit bestand laadt) wordt hier geneutraliseerd
   zodat de kaart-ritmiek klopt. */
/* Chip-randen net zo fijn als in het design (var(--line) i.p.v. de iets donkerdere border). */

.plan-add { display: flex; align-items: center; gap: 9px; padding: 14px 16px; font-size: var(--text-sm); font-weight: 500; color: var(--color-accent); text-decoration: none; }
.plan-add svg { width: var(--icon-sm); height: var(--icon-sm); }

/* Voorstel verstuurd. */
.plan-sent__icon {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin-top: 30px;
  border-radius: 50%;
  background: var(--color-selected);
  color: var(--color-text);
  animation: plan-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.plan-sent__icon svg { width: 36px; height: 36px; }
@media (prefers-reduced-motion: reduce) { .plan-sent__icon { animation: none; } }
.plan-sent__body { font-size: var(--text-base); line-height: var(--leading); color: var(--color-text-muted); margin-top: 10px; padding: 0 8px; }
/* Secties op de plan-subschermen staan op het papier onder een haarlijn — geen witte
   kaart met lift (plat, 2026-09-12). */
.plan-sent__card {
  width: 100%;
  margin-top: 24px;
  padding: 15px 16px;
  text-align: left;
  background: var(--color-card);
  border-radius: var(--radius-groep);
}
.plan-sent__topic { font-size: var(--text-17); font-weight: 500; }
.plan-sent__by { display: flex; align-items: center; gap: 8px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--color-hair); font-size: var(--text-sm); color: var(--color-faint); }
.plan-sent__waiting { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 9px 14px; border-radius: var(--radius-pill); background: var(--color-amber-soft); font-size: var(--text-15); font-weight: 500; color: var(--color-text); }
.plan-sent__waiting-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-amber); }

/* ── Vrije-tekst-veldlabel + keuze-chips (Vakanties/Feestdagen/Counter) ── */

/* Veld-label boven chips. */
.plan-label { font-size: var(--text-xs); font-weight: 500; color: var(--color-faint); margin: 14px 2px 8px; }

.plan-selects { display: flex; gap: 8px; margin-bottom: 18px; }
/* Schooljaar en regio volgen hetzelfde grijze veldmodel als de andere selectvelden. */
.plan-select { flex: 1; min-width: 0; min-height: 52px; -webkit-appearance: none; appearance: none; padding: 12px 40px 12px 18px; font: inherit; font-size: var(--text-17); font-weight: 400; color: var(--color-text); background-color: var(--color-card); background-image: var(--select-chevron); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 12px; border: 1px solid transparent; border-radius: var(--radius-pill); cursor: pointer; }

/* Vakanties en feestdagen staan sinds de planbuilder-handout (2026-09-28) als rijen met een
   sheet per vakantie of feestdag (settings/vakanties/_vakanties_section); wat daarin nog eigen
   opmaak heeft, staat hieronder. */
.plan-vac__feest { margin-top: 10px; padding: 10px 12px; background: var(--color-green-soft); border-radius: var(--radius-groep); }
.plan-vac__feest-label { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); margin-bottom: 6px; }
.plan-vac__feest-line { font-size: var(--text-xs); color: var(--color-text); line-height: var(--leading); }

/* Vervallen: .plan-vseg — de modus-chips zijn op alle schermen vervangen door .vac-keuze
   (consistentie-ronde 2026-08-10; laatste gebruiker was de feestdag-rij). */

.plan-hint-text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading); margin: 2px 2px 0; }

/* ===================== AKKOORD-MECHANISME (fase 3) ===================== */
.plan-link--danger { color: var(--color-error); }
.plan-link--muted { color: var(--color-text-muted); }

/* Review-act: de ander stelt voor. */
.plan-review__by { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: var(--text-base); }
.plan-review__by .plan-avatar { width: 30px; height: 30px; border-radius: var(--radius); font-size: var(--text-xs); }
/* Akkoord (groen) en Ik zie het anders (grijs) naast elkaar, 14px rond (handout). */
.plan-review__actions .button { min-height: 0; padding: 15px; border-radius: var(--radius-pill); }
.plan-review__actions .button--secondary { background: var(--color-card); }
.plan-review__actions { display: flex; gap: 10px; margin-top: 18px; }
.plan-review__action { flex: 1; margin: 0; }
.plan-review__chat { display: block; text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 14px; text-decoration: none; }
.plan-review__chat b { font-weight: 500; color: var(--color-text); }

/* Eens: celebratie. */
.plan-afgewezen { margin: 0; padding: 12px 15px; border-radius: var(--radius-groep); background: var(--color-amber-soft); color: var(--color-amber-deep); font-size: 0.9rem; text-align: left; }

/* Tegenvoorstel. */
.plan-counter__intro { margin-top: 13px; padding: 14px 20px; font-size: var(--text-15); line-height: var(--leading); background: var(--color-card); border-radius: var(--radius-groep); }
.plan-label--co { color: var(--color-text); }
.plan-counter__textarea { min-height: 96px; line-height: var(--leading); resize: none; }
.plan-counter__coach { font-size: var(--text-15); color: var(--color-text-muted); text-align: center; margin-top: 12px; }
.plan-counter__coach b { font-weight: 500; color: var(--color-text); }

/* "Toch wijzigen"-banner. */
.plan-edit-banner { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 18px; padding: 12px 14px; background: var(--color-amber-soft); border-radius: var(--radius-groep); font-size: var(--text-sm); font-weight: 500; color: var(--color-amber); line-height: var(--leading); }
.plan-edit-banner svg { flex: none; width: var(--icon); height: var(--icon); margin-top: 1px; }

/* ===================== AFRONDEN (fase 4) ===================== */
/* Akkoordverklaring. */
.plan-sign__eyebrow { font-size: var(--text-15); font-weight: 500; color: var(--color-green-deep); margin-bottom: 6px; }
/* De onderwerpen die je tekent: een lijst op de pagina, geen kaart — de verklaring en de
   handtekeningen eronder zijn het onderwerp van dit scherm. */
.plan-sign__topics { margin: 16px 0 14px; }
.plan-sign__topic { display: flex; align-items: center; gap: 10px; padding: 12px 20px; }
.plan-sign__check { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--color-green-soft); color: var(--color-green); }
.plan-sign__check svg { width: var(--icon-xs); height: var(--icon-xs); }
.plan-sign__topic-name { font-size: var(--text-15); font-weight: 500; }
.plan-sign__declaration { padding: 14px 20px; background: var(--color-card); border-radius: var(--radius-groep); font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading); font-style: normal; }
.plan-sign__sigs { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
/* Handtekening: per ouder een grijze kaart; wie nog moet tekenen staat omlijnd in inkt (handout). */
.plan-sign__sig { display: flex; align-items: center; gap: 11px; padding: 14px 20px; background: var(--color-card); border-radius: var(--radius-groep); }
.plan-sign__sig--awaiting { outline: 1.5px solid var(--color-text); outline-offset: -1.5px; }
.plan-sign__sig .plan-avatar { width: 30px; height: 30px; border-radius: var(--radius); font-size: var(--text-xs); }
.plan-sign__sig-main { flex: 1; min-width: 0; }
.plan-sign__sig-name { display: block; font-size: var(--text-15); font-weight: 500; }
.plan-sign__sig-status { display: block; font-size: var(--text-15); font-weight: 500; margin-top: 1px; }
.plan-sign__sig-status--signed { color: var(--color-green-deep); }
.plan-sign__sig-status--waiting { color: var(--color-text); }
.plan-sign__sig-check { flex: none; width: 18px; height: 18px; color: var(--color-green); }
.plan-sign__note { font-size: var(--text-15); color: var(--color-faint); text-align: center; margin: 14px 0 10px; }
.plan-sign__you-signed { padding: 12px 14px; background: var(--color-green-soft); border-radius: var(--radius-groep); font-size: var(--text-sm); font-weight: 500; color: var(--color-green); text-align: center; }

/* Klaar. */
.plan-done__icon { display: grid; place-items: center; width: 78px; height: 78px; margin-top: 24px; border-radius: 50%; background: var(--color-selected); color: var(--color-text); animation: plan-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.plan-done__icon svg { width: 38px; height: 38px; }
@media (prefers-reduced-motion: reduce) { .plan-done__icon { animation: none; } }
.plan-done__body { font-size: var(--text-base); color: var(--color-text-muted); line-height: var(--leading); margin-top: 10px; }
.plan-done__card { width: 100%; margin-top: 24px; padding: 15px 16px; text-align: left; background: var(--color-card); border-radius: var(--radius-groep); }
.plan-done__card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.plan-done__card-title { font-size: var(--text-base); font-weight: 500; }
.plan-done__card-meta { font-size: var(--text-sm); color: var(--color-text-muted); }
.plan-done__download { display: flex; align-items: center; justify-content: center; gap: 8px; }
.plan-done__download svg { width: var(--icon-sm); height: var(--icon-sm); }
.plan-done__footer { font-size: var(--text-15); color: var(--color-faint); text-align: center; margin-top: 11px; line-height: var(--leading); }

/* Ondertekende weergave. */
.plan-signed__by { font-size: var(--text-sm); color: var(--color-text-muted); margin: 8px 0 18px; }
/* Het getekende plan is één document (rust-plan ronde 1): één vlak met de artikelen
   erin, gescheiden op een haarlijn. Elk artikel in een eigen kaart las als losse briefjes.
   De artikelnaam staat in de inkt, niet in het accent (conventions: titels in de inkt). */
/* .stack in de view: naam + clausules op 8px van elkaar (container deelt uit). */
/* Plankaart "Zo staat het in het plan" (handout 2026-09-28): wit, 26px rond, bovenregel in
   kapitalen, per artikel de titel (Artikel N. …) en genummerde leden (N.1 …). Eén vorm voor de
   leesweergave, Controleer voorstel en het getekende plan (family/plan_topics/_plankaart). */
.plan-signed__doc { padding: 22px 20px; background: var(--color-surface); border-radius: var(--radius-groep); }
.plan-signed__eyebrow { display: block; font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; color: var(--color-text-muted); }
.plan-signed__topic { margin-top: 18px; }
.plan-signed__eyebrow + .plan-signed__topic { margin-top: 6px; }
.plan-signed__topic-name { margin: 0; font-family: var(--font-body); font-size: var(--text-20); font-weight: 600; line-height: var(--leading-kop); color: var(--color-text); }
.plan-signed__clause { margin: 8px 0 0; font-size: var(--text-base); line-height: var(--leading-lees); color: var(--color-text); text-wrap: pretty; }
.plan-signed__clause--leeg { color: var(--color-text-muted); }
.plan-signed__clause-num { margin-right: 6px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.plan-signed__noot { margin: 0 4px; font-size: var(--text-15); line-height: var(--leading); color: var(--color-text-muted); }
.plan-signed__actions { display: flex; gap: 10px; margin-top: 14px; }
.plan-signed__action { flex: 1; }

/* ── Onboarding-instap (vraag) ── */
.plan-ask__q { font-family: var(--font-display); font-size: var(--text-22); font-weight: 500; line-height: var(--leading-kop); margin: 18px 0 20px; }
.plan-ask__options { display: flex; flex-direction: column; gap: 11px; }
.plan-ask__form { margin: 0; }
.plan-ask__option { display: block; width: 100%; text-align: center; font: inherit; font-size: var(--text-base); font-weight: 500; padding: 16px; border-radius: var(--radius-groep); background: var(--color-card); border: 1px solid var(--color-line); color: var(--color-text); cursor: pointer; text-decoration: none; transition: transform 0.14s ease; }
.plan-ask__option:active { transform: scale(0.99); }
.plan-ask__option--primary { background: var(--color-btn); border-color: var(--color-btn); color: var(--color-on-btn);
  box-shadow: var(--shadow-knop);
}

/* ── Eigen afspraken (herhaalbare vrije velden per onderwerp) ── */
.plan-afspraken__list { display: flex; flex-direction: column; gap: 8px; }
.plan-afspraken__row { display: flex; align-items: flex-start; gap: 8px; }
.plan-afspraken__row .plan-field { flex: 1; min-width: 0; }
.plan-afspraken__remove {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px;
  border: 0; border-radius: 50%; background: none;
  color: var(--color-text-muted); cursor: pointer; transition: transform 0.12s ease;
}
.plan-afspraken__remove:active { transform: scale(0.94); }
.plan-afspraken__remove svg { width: var(--icon-sm); height: var(--icon-sm); }
/* Bij één (enige) afspraak is er niets te verwijderen — verberg de ×; hij verschijnt zodra
   er een tweede veld bij komt. */
.plan-afspraken__list .plan-afspraken__row:only-child .plan-afspraken__remove { display: none; }
.plan-afspraken__add { margin-top: 4px; border: 0; background: none; cursor: pointer; }

/* ── Ouders & kinderen (prototype 28 sep, isTopicOuders) ──
   Een overzicht met per persoon een los grijs vlak (26 rond, 10px ertussen): initiaal in een
   witte cirkel, naam 17/500 met "jij"/"andere ouder" (14 muted), regels 15 muted. Een ouder
   opent zijn velden op de plek van het overzicht (.plan-ouders__paneel, plan-paneel). */
.plan-ouders .plan-subhead { margin: 28px 16px 10px; }
/* De eerste kop volgt de stapelafstand van de editor; daar komt geen 28px bovenop. */
.plan-ouders__overzicht > .plan-subhead:first-child { margin-top: 0; }
.plan-ouders__kaarten { display: flex; flex-direction: column; gap: 10px; }
.plan-ouders__persoon { align-items: center; padding: 16px 18px 16px 16px; }
.plan-ouders__persoon .vset__avatar { width: 40px; height: 40px; font-size: var(--text-base); font-weight: 500; }
.plan-ouders__persoon-kop { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.plan-ouders__persoon-kop > .setrow__title:first-child { flex: 0 1 auto; }
.plan-ouders__tag { flex: none; font-size: var(--text-sm); color: var(--color-text-muted); }
.plan-ouders__persoon .setrow__sub { margin-top: 3px; }
/* "Hoe" alleen als het antwoord "ja" is (besluit Jerry 2026-09-26); de server bewaart het ook alleen dan. */
.plan-ouders__hoe { display: none; }
.plan-ouders__betrokken:has(.plan-hv__opt-input[value="ja_leeftijd"]:checked) .plan-ouders__hoe { display: block; }
.plan-ouders__anders { display: none; }
.plan-ouders__betrokken:has(.plan-hv__opt-input[value="anders"]:checked) .plan-ouders__anders { display: block; margin-top: 8px; }
.plan-ouders .plan-ouders__villa { margin-top: 28px; }
/* De gegevens van een ouder (prototype ouEditing): naam 22/500, "Jij" 15 muted, velden met
   18px ertussen. Zolang die open staan hoort de verstuurknop van het onderwerp er niet bij. */
.plan-ouders__paneel-titel { margin: 0 2px; font-size: var(--text-22); font-weight: 500; line-height: var(--leading-kop); color: var(--color-text); }
.plan-ouders__paneel-sub { margin: 4px 2px 0; font-size: var(--text-15); color: var(--color-text-muted); }
.plan-ouders__velden { display: flex; flex-direction: column; margin-top: 24px; }
.plan-ouders__velden.vset__rows { gap: 3px; }
.plan-editor:has(.plan-ouders__paneel:not([hidden])) > :is(.plan-share-note, button[type="submit"]) { display: none; }

/* ── Ouders & kinderen: één typografische ladder (design-feedback 2026-07-26) ──
   Dit scherm had vijf tekststijlen in drie grijstinten die niets verschillends betekenden
   (.plan-section-label, .plan-inf__sublabel, .plan-hint-text, twee ledes). Nu:
   kop (de vnav-paginatitel) · lede (.plan-q__lede) · sectiekop (.plan-subhead) ·
   veldlabel (de gedeelde .vlabel). Meer niveaus heeft deze pagina niet nodig. */
/* Sectiekop (handout 2026-09-28): 15 muted, 16px ingesprongen, met het (?) direct erachter. */
.plan-subhead {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-size: var(--text-15); font-weight: 400;
  color: var(--color-text-muted); margin: 0 16px;
}
.plan-subhead .knowledge-btn { margin-block: -4px; }
/* De wettelijke plicht als chip náást de kop, i.p.v. als eerste woorden van een tweede
   lede in paginakop-formaat — die las als een concurrerende titel. */
.plan-legal-chip {
  flex: none; font-size: var(--text-xs); font-weight: 500; line-height: 1; white-space: nowrap;
  color: var(--color-text-muted); background: var(--color-surface);
  border-radius: var(--radius-pill); padding: 4px 8px;
}

/* Eén label-stijl voor dit scherm — het veldlabel in de ouder-kaart en het leeftijdsbereik
   in de kennisbank zijn dezelfde typografie; alleen de kleur verschilt (een bereik is een
   kop, een veldlabel is bijschrift). Twee namen voor één stijl is precies de DRY-vlag uit
   conventions §1. */

.plan-band__range {
  display: block; font-size: var(--text-xs); font-weight: 500;
}
.plan-band__range { color: var(--color-text); }

/* Leeftijdsleidraad — leeft in de kennisbank-sheet, niet meer op de pagina zelf. Bereik als
   kopregel bóven de leidraad: naast elkaar gaf op telefoonbreedte een hangende inspring die
   met elke bandbreedte ("Tot 6 jaar" vs. "Vanaf 12 jaar") verschoof. */
.plan-bands { --stack-gap: var(--space-4); }
.plan-band__text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading); margin: 2px 0 0; }

/* Radiorijen en vinkjes (handout 2026-09-28): één .setrow per optie in een .vset__rows-groep;
   links een rondje (radio) of vierkantje (vink) van 22px met een rand in --color-radio-ring,
   gekozen inkt met een stip resp. een wit vinkje. Het label mag over regels doorlopen, met
   een omschrijving (15 muted) eronder. */
.plan-hv__opts--radio, .plan-hv__opts--vink { flex-direction: column; gap: 3px; }
.plan-hv__opts--radio .plan-hv__opt, .plan-hv__opts--vink .plan-hv__opt { gap: 14px; }
.plan-hv__opts--radio .plan-hv__opt-label, .plan-hv__opts--vink .plan-hv__opt-label {
  display: block; flex: 1; min-width: 0; padding: 0; background: none; border: 0; border-radius: 0; text-align: left;
  font-size: var(--text-17); font-weight: 400; color: var(--color-text); line-height: var(--leading);
}
.plan-hv__opt-sub { display: block; margin-top: 2px; font-size: var(--text-15); color: var(--color-text-muted); }
.plan-hv__opts--radio .plan-hv__opt::before, .plan-hv__opts--vink .plan-hv__opt::before {
  content: ""; flex: none; box-sizing: border-box; width: 22px; height: 22px;
  border: 2px solid var(--color-radio-ring); background: var(--color-surface);
}
.plan-hv__opts--radio .plan-hv__opt::before { border-radius: 50%; }
.plan-hv__opts--vink .plan-hv__opt::before { border-radius: var(--radius-binnen); }
.plan-hv__opts--radio .plan-hv__opt:has(.plan-hv__opt-input:checked)::before {
  border-color: var(--color-btn); background: radial-gradient(circle, var(--color-btn) 0 5px, var(--color-surface) 5.5px);
}
.plan-hv__opts--vink .plan-hv__opt:has(.plan-hv__opt-input:checked)::before {
  border-color: var(--color-btn);
  background: var(--color-btn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.plan-hv__opt:has(.plan-hv__opt-input:focus-visible)::before { border-color: var(--color-text); box-shadow: var(--veld-focus-ring); }
/* Het gekozen segment is een inktvlak; bij een radiorij of vinkje draagt het rondje de keuze. */
:is(.plan-hv__opts--radio, .plan-hv__opts--vink) .plan-hv__opt-input:checked + .plan-hv__opt-label { background: none; color: var(--color-text); border-color: transparent; }
/* Keuze binnen een rij (Wie beslist wat: hoe de ander erbij hoort): de rondjes zonder eigen
   vlak, 9px lucht per optie. */
.plan-hv__opts--compact { margin-top: 8px; gap: 0; }
.plan-hv__opts--compact .plan-hv__opt { display: flex; align-items: center; gap: 12px; padding: 9px 0; cursor: pointer; }
/* Keuze als pillen die over regels mogen doorlopen. */
.plan-hv__opts--chips { flex-wrap: wrap; }
.plan-hv__opts--chips .plan-hv__opt { flex: none; }
.plan-hv__opts--chips .plan-hv__opt-label { padding: 10px 16px; border-radius: var(--radius-pill); font-size: var(--text-15); color: var(--color-text); }

/* ═══════════ Onderwerp-editor-ritmiek ═══════════
   De plan-editors gebruiken dé ritmiek-primitive .stack (application.css, conventions §3);
   hier staat alleen nog wat plan-specifiek is: de maat per niveau via --stack-gap, en de
   koppen die hun eigen buur huggen. Was tot 2026-07-27 een tweede, identieke ritmiek onder
   eigen namen — precies de duplicatie die .stack moet voorkomen. */
.plan-editor,
.plan-stack { --stack-gap: var(--space-4); }
/* De flex-declaratie van .stack zou het `hidden`-attribuut overrulen (Stimulus toggelt de
   overleg-/matrix-/datum-blokken via hidden) — dus `hidden` moet blijven winnen. */
.plan-editor [hidden],
.plan-stack [hidden],
.plan-stack[hidden] { display: none !important; }

/* Titel hugt de lede; kleine labels huggen hun control (8px). */
.plan-editor > :is(.plan-label, .plan-section-label, .plan-inf__sublabel) + *,
.plan-stack > :is(.plan-label, .plan-section-label, .plan-inf__sublabel) + * { margin-top: 8px; }

/* Sectiekop zet een nieuwe sectie op: extra lucht bóven, en hij hugt wat eronder komt
   (lede of eerste kaart). De sectie-lede hugt op zijn beurt de leidraad/kaart eronder. */
.plan-editor > .plan-subhead,
.plan-stack > .plan-subhead { margin-top: 28px; }
.plan-editor > .plan-subhead:first-child,
.plan-stack > .plan-subhead:first-child { margin-top: 22px; }
.plan-editor > .plan-subhead + *,
.plan-stack > .plan-subhead + * { margin-top: 10px; }
/* Een geneste sectie (een blok dat als geheel verschijnt en verdwijnt, zoals de verdeling bij
   Gedeeld) draagt zelf geen tussenruimte: de sectiekop erin houdt de 28px van elke sectiekop. */
.plan-stack > .plan-stack { margin-top: 0; }
.plan-stack > .plan-stack > .plan-subhead:first-child { margin-top: 28px; }

/* De verstuur-knop krijgt iets meer lucht dan de blok-ritmiek. */

/* ── Vakanties: per-kind + volg-zorgregeling (vakanties-handoff) ── */

/* Generieke switch (track + knop), gedeeld door de per-kind- en volg-toggle. */
.plan-switch { position: relative; flex: none; display: inline-block; }
/* De native checkbox ligt boven de zichtbare track, zodat de schakelaar de klik ontvangt. */
.plan-switch__input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
/* Uit: --color-schakel-uit (handout 2026-09-28), aan: inkt; de knop zonder schaduw. */
.plan-switch__track { display: block; width: 46px; height: 27px; border-radius: var(--radius-pill); background: var(--color-schakel-uit); padding: 3px; outline: 1px solid var(--color-control-border); outline-offset: -1px; transition: background 0.2s ease; }
.plan-switch__track::after { content: ""; display: block; width: 21px; height: 21px; border-radius: 50%; background: var(--color-surface); transition: transform 0.2s ease; }
.plan-switch__input:checked + .plan-switch__track { background: var(--color-btn); }
.plan-switch__input:checked + .plan-switch__track::after { transform: translateX(19px); }
/* Link-variant (settings-toggle die navigeert i.p.v. een checkbox togglet): geen :checked-
   input, dus de aan-stand komt van .plan-switch--on op de wrapper. */
.plan-switch--on .plan-switch__track { background: var(--color-btn); }
.plan-switch--on .plan-switch__track::after { transform: translateX(19px); }
/* Focus-ring (toetsenbord): kwam van de agenda-variant toen die opging in deze
   canonieke pil (2026-08-31) — nu voor álle schakelaars. */
.plan-switch__input:focus-visible + .plan-switch__track { outline: 2px solid var(--color-text); outline-offset: 2px; }

/* Kind-tabs. */
.vac-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.vac-tab { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 7px 13px 7px 7px; border-radius: var(--radius-pill); border: 1px solid transparent; background: var(--color-card); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
.vac-tab--active { background: var(--color-btn); border-color: var(--color-btn); color: var(--color-on-btn); }
.vac-tab__avatar { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.08); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 500; }
.vac-tab--active .vac-tab__avatar { background: rgba(255,255,255,.22); color: var(--color-on-accent); }

/* Het split-blok krijgt wat lucht boven zich. */
.plan-vac__split { margin-top: 4px; }

/* ── Herontwerp 2026-08-10: één vraag, twee soorten antwoord ──────────────────────────
   Het scherm gebruikte één visuele taal (zacht getint, afgerond) voor twee verschillende
   soorten beslissing: de MODUS van een vakantie en de PERSOON van een periode. Daardoor
   leken de knoppen en de pillen eronder hetzelfde ding. De scheiding loopt nu langs twee
   assen tegelijk, zodat kleur alléén nog "wie" betekent:

     • VORM   — modus = brede keuzerij met stip; persoon = kleine pill met kleurrail.
     • STAAT  — niet gekozen is NEUTRAAL (geen tint). Alleen de gekozen optie draagt kleur.
                Juist het getinte "uit"-vlak maakte de twee groepen inwisselbaar.            */

.vac-vraag { font-size: var(--text-xs); color: var(--color-faint); margin: 12px 2px 8px; }

/* Toewijzen: jij / verdeeld / de ander. Eén rij, gelijke breedte, stip vooraan als anker.
   Het zichtbare vlak is .vac-keuze__box (een buur van de radio), niet het label zelf: de
   gekozen staat komt van `input:checked ~ .box` — hetzelfde patroon als .plan-vseg/.plan-rseg
   hierboven, zodat dit scherm één manier houdt om "gekozen" uit te drukken (en geen :has()
   nodig heeft). */
.vac-keuze { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.vac-keuze__opt { position: relative; margin: 0; min-width: 0; display: block; }
.vac-keuze__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.vac-keuze__box { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 8px 6px; border: 1px solid var(--color-line); border-radius: var(--radius-groep); background: var(--color-surface); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.vac-keuze__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--color-line); transition: background .12s ease; }
.vac-keuze__label { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); text-align: center; line-height: var(--leading-kop); }
/* De kleur van de stip is de kleur van de persoon — óók ongekozen al herkenbaar. */
.vac-keuze__opt--jou   .vac-keuze__dot { background: var(--color-accent); }
.vac-keuze__opt--co    .vac-keuze__dot { background: var(--color-coparent); }
.vac-keuze__opt--split .vac-keuze__dot { background: var(--color-green); }
/* Gekozen: het vlak vult zich mét de persoonskleur; stip en tekst worden wit. */
.vac-keuze__input:checked ~ .vac-keuze__box .vac-keuze__label { color: var(--color-on-accent); }
.vac-keuze__input:checked ~ .vac-keuze__box .vac-keuze__dot { background: var(--color-on-accent); }
.vac-keuze__opt--jou   .vac-keuze__input:checked ~ .vac-keuze__box { background: var(--color-accent); border-color: var(--color-accent); }
.vac-keuze__opt--co    .vac-keuze__input:checked ~ .vac-keuze__box { background: var(--color-coparent); border-color: var(--color-coparent); }
.vac-keuze__opt--split .vac-keuze__input:checked ~ .vac-keuze__box { background: var(--color-green); border-color: var(--color-green); }
.vac-keuze__input:focus-visible ~ .vac-keuze__box { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Overlaten: geen persoon, dus bewust géén persoonskleur — rustig, één regel per optie.
   De uitlegzin (__sub) toont alléén onder de gekózen optie (input:checked ~): ongekozen
   waren de twee uitlegzinnen ×5 kaarten 39% van de kaarthoogte aan herhaalde tekst. */
.vac-defer__opt { position: relative; display: block; margin: 0; }
.vac-defer__opt--mt { margin-top: 10px; }
.vac-defer__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.vac-defer__box { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border: 1px solid var(--color-line); border-radius: var(--radius-groep); background: var(--color-surface); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.vac-defer__box > svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--color-faint); }
.vac-defer__title { font-size: var(--text-base); font-weight: 500; color: var(--color-text); }
.vac-defer__sub { display: none; font-size: var(--text-sm); color: var(--color-text-muted); margin: 4px 4px 0 2px; line-height: var(--leading); }
/* Gekozen: geen persoonskleur (er is immers geen persoon) — een rustig gevuld vlak met een
   donkere rand, zodat het duidelijk "aan" is zonder met de wie-kleuren te concurreren. */
.vac-defer__input:checked ~ .vac-defer__box { background: var(--color-panel); border-color: var(--color-text); }
.vac-defer__input:checked ~ .vac-defer__box > svg { color: var(--color-text); }
.vac-defer__input:checked ~ .vac-defer__sub { display: block; }
.vac-defer__input:focus-visible ~ .vac-defer__box { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ── Afstem-paneel op de kaart (mengvorm) + statuslijst-uitklap ── */
.vac-jp { margin-top: 10px; border: 1px solid var(--color-amber); border-radius: var(--radius-groep); overflow: hidden; }
.vac-jp--done { border-color: var(--color-green); }
.vac-jp__kop { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 14px; border: none; background: var(--color-amber-soft); color: var(--color-amber); font: inherit; font-size: var(--text-sm); font-weight: 500; text-align: left; cursor: pointer; }
.vac-jp--done .vac-jp__kop { background: var(--color-green-soft); color: var(--color-green); }
.vac-jp__kop svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); }
.vac-jp__kop span:first-of-type { flex: 1; min-width: 0; }
/* Chevron als icoon (zelfde als de statuslijst-rij): rechts = dicht, draait omlaag bij open. */
.vac-jp__chev { width: var(--icon-sm); height: var(--icon-sm); transition: transform 0.15s ease; }
.vac-jp__kop[aria-expanded="true"] .vac-jp__chev { transform: rotate(90deg); }
.vac-jp__body { padding: 11px 12px 13px; }
.vac-jp__body[hidden] { display: none; }
.vac-jp__body > .vac-vraag:first-child { margin-top: 0; }

/* Terugweg uit de per-jaar-statuslijst: kale hook — de styling is .button--ghost. */
.vac-terug-vast { margin-top: 12px; }

/* Periodenlijst (eigen ritme binnen één vakantie).
   Was één krappe rij: een 62px-pill naast de datums, waardoor "je co-ouder" verminkte tot
   "je co-o…". Nu twee regels — wie boven (volle naam), datums eronder — met een kleurrail
   links die de persoon draagt. Zo lees je de afwisseling aan de rand af zonder de namen te
   hoeven spellen, en houdt de naam alle ruimte die hij nodig heeft. */
/* De kleurrail is de LINKERRAND van de rij: de gekozen ouder is zo aan de rand af te lezen,
   ook zonder de namen te spellen. De radio's zitten te diep voor een buur-combinator (die
   kan geen voorouder stylen), dus zet de vacation-periods-controller hier een klasse — de
   enige plek in dit scherm waar JS de weergave stuurt. */
.vac-period { display: flex; gap: 0; margin-top: 8px; border: 1px solid var(--color-line); border-left: 4px solid var(--color-line); border-radius: var(--radius-groep); overflow: hidden; background: var(--color-surface); transition: border-left-color .12s ease; }
.vac-period--jou { border-left-color: var(--color-accent); }
.vac-period--co { border-left-color: var(--color-coparent); }
.vac-period__body { flex: 1; min-width: 0; padding: 9px 11px 10px; }
/* Volgnummer: maakt "periode 3 van 4" leesbaar zonder te tellen. */
.vac-period__num { flex: none; width: 19px; height: 19px; border-radius: 50%; background: var(--color-panel); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; display: flex; align-items: center; justify-content: center; }
/* Twee gelijke helften over de VOLLE breedte — grid i.p.v. flex, zodat een lange naam de
   kolom niet kan laten inklappen (flex-shrink deed dat wél, tot 16px met een letterkolom). */
.vac-period__who { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.vac-period__opt { position: relative; min-width: 0; margin: 0; }
.vac-period__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.vac-period__label { display: block; text-align: center; font-size: var(--text-xs); font-weight: 500; padding: 11px 8px; border-radius: var(--radius); color: var(--color-text-muted); background: var(--color-panel); cursor: pointer; line-height: var(--leading-kop); }
.vac-period__opt--jou .vac-period__input:checked ~ .vac-period__label { background: var(--color-accent); color: var(--color-on-accent); }
.vac-period__opt--co .vac-period__input:checked ~ .vac-period__label { background: var(--color-coparent); color: var(--color-on-accent); }
.vac-period__input:focus-visible ~ .vac-period__label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.vac-period__range { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.vac-period__from { flex: none; font-size: var(--text-xs); color: var(--color-text-muted); }
.vac-period__arrow { flex: none; color: var(--color-faint); font-size: var(--text-xs); }
.vac-period__to-fixed { flex: 1; min-width: 0; font-size: var(--text-xs); color: var(--color-text); }
.vac-period__picker { flex: 1; min-width: 0; }
.vac-period__del { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: none; color: var(--color-faint); cursor: pointer; padding: 0; }
.vac-period__del svg { width: var(--icon-xs); height: var(--icon-xs); }
/* .vac-periods__add is een kale hook (tests/JS) — de styling is .button--dashed. */
.vac-periods__add { margin-top: 10px; }
.vac-periods__add svg { width: var(--icon-sm); height: var(--icon-sm); }
.vac-periods__note { margin-top: 9px; font-size: var(--text-xs); color: var(--color-faint); line-height: var(--leading); }

/* Per-jaar-statusrij: tikken klapt de keuze voor dít schooljaar uit. */
.vac-jaarrij__panel { padding: 0 16px 14px; }
.vac-jaarrij__panel[hidden] { display: none; }
.vac-jaarrij__wis { margin-top: 10px; }
/* De rij is tikbaar (klapt de keuze uit) — chevron als affordance, die meedraait. */
.vac-jaarrij__chevron { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--color-faint); transition: transform 0.15s ease; }
.vac-jaarrij [aria-expanded="true"] .vac-jaarrij__chevron { transform: rotate(90deg); }
.vac-jaarrij .vakanties__row--status { cursor: pointer; }
.vac-jaarrij .vakanties__row--status:active { background: var(--color-druk); }

/* ═══════════ Planbuilder-bouwstenen (handout 2026-09-28, ChatGPT-stijl) ═══════════
   Eén scherm per onderwerp, per blok één vraag. De rijen zijn dé lijstrij van de app
   (.setrow in .vset__rows, account.css); hier staat wat de planbuilder daaraan toevoegt. */
/* Een vraag als rijtitel loopt door op een tweede regel — de instellingenrij kapt af, dit niet. */
:is(.plan-editor, .plan-stack) .setrow__title { white-space: normal; overflow: visible; }
/* Rijen in de planbuilder zijn 60px (handout), in Instellingen 64. */
:is(.plan-editor, .plan-stack) .setrow:not(.setrow--vraag) { min-height: 60px; }
/* De groep draagt geen eigen ondermarge: de .stack-ritmiek van de editor regelt de afstand. Hij
   knipt zijn buitenhoeken zelf af (zoals het prototype), zodat de laatste zichtbare rij rond
   blijft als de vervolgvragen eronder verborgen zijn. */
:is(.plan-editor, .plan-stack) .vset__rows { margin-bottom: 0; border-radius: var(--radius-groep); overflow: hidden; }
/* Vervolgvragen (ParentingPlanHelper#plan_toon) en keuzerijen binnen een groep: het omhulsel
   doet niet mee in de opmaak, de rijen staan gewoon in de groep. Ze houden hun binnenhoeken —
   de hoek-regels van .vset__rows zouden ze anders als laatste kind allemaal rond maken. */
.plan-vervolg, .plan-omhulsel, .plan-hv__opts--ingroep { display: contents; }
:is(.plan-editor, .plan-stack) .vset__rows :is(.plan-vervolg, .plan-omhulsel, .plan-hv__opts--ingroep) > .setrow { border-radius: var(--radius-binnen); }
/* Een tekstknop rechts op de kopregel van een blok ("Omwisselen"). */
.plan-link.plan-link--kop { width: auto; margin-left: auto; padding: 0; font-size: var(--text-15); color: var(--color-accent); }
/* Invoer binnen een rij: vlak en transparant, de rij draagt het focusanker. */
.setrow--veld .plan-field { min-height: 50px; padding: 8px 0; border-radius: 0;  background: transparent; border-color: transparent;}
/* Een veld met een fout (Maximaal leeg bij "Dicht bij elkaar blijven wonen", een datum die ontbreekt). */
.plan-getal input.is-fout,
.setrow--kolom button.datecal__display.is-fout { border-color: var(--color-error); }
/* Een korte regel onder een groep ("Voeg eerst jullie kinderen toe…"): 15 muted, dicht op de groep. */
.plan-voetnoot { margin: 0 18px; font-size: var(--text-15); line-height: var(--leading); color: var(--color-text-muted); text-wrap: pretty; }
.stack.stack > .vset__rows + .plan-voetnoot { margin-top: 10px; }
/* Tijd binnen een rij: dezelfde vlakke control, met bestaand tijdformaat. */
.setrow .timewheel { flex: none; }
.setrow button.timewheel__display.timewheel__display--plain {
  width: 130px; min-height: 44px; padding: 8px 0; border: 1px solid transparent; border-radius: 0;
  background: transparent; box-shadow: none; font-size: var(--text-17);
}
/* Getalrij: vlakke invoer, bestaande eenheid ernaast. */
.plan-getal { flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: var(--text-15); color: var(--color-text-muted); }
.plan-getal input {
  width: 72px; min-height: 44px; padding: 8px 0; border: 1px solid transparent; border-radius: 0;
  background: transparent; box-shadow: none; font: inherit; font-size: var(--text-17); color: var(--color-text); text-align: right;
}
.plan-getal input:focus { outline: none; border-color: transparent; box-shadow: var(--veld-focus-ring); }
/* Datum binnen een rij: vlak, label/waarde behouden; leeg in faint. */
.setrow--kolom .datecal { width: 100%; }
.setrow--kolom button.datecal__display.datecal__display--plain {
  width: 100%; min-height: 48px; padding: 8px 0; border: 1px solid transparent; border-radius: 0;
  background: transparent; box-shadow: none; font-size: var(--text-17); text-align: left;
}
.setrow--kolom .datecal__display.is-empty { color: var(--color-faint); }
/* Tekstlink onder een knop: gecentreerd, in accent. */
.plan-link--center { display: block; width: 100%; padding: 14px 0 2px; text-align: center; font-size: var(--text-15); }
.stack.stack > .plan-link--center { margin-top: 0; }
/* "Klopt er iets niet? Toch wijzigen": de aanloop gedempt, de actie in accent. */
.plan-link--zacht { font-size: var(--text-sm); font-weight: 400; color: var(--color-faint); }
.plan-link--zacht strong { font-weight: 500; color: var(--color-accent); }
/* De waarschuwing bij het aanpassen van een afspraak staat bij de knop, in inkt. */
.plan-share-note--nadruk { margin-inline: 18px; font-size: var(--text-15); font-weight: 500; color: var(--color-text); }

.setrow--veld .plan-field:focus { border-color: transparent; }
.setrow--veld .plan-field.is-fout { border-color: var(--color-error); }