/* ===================== OUDERSCHAPSPLAN-FLOW =====================
   Begeleide samenwerk-flow (design-handoff docs/design/blinco-ui). Full-bleed
   mobiele schermen op de bestaande app-tokens — de prototype-kleuren mappen 1-op-1:
   --accent→--color-accent, --soft→--color-soft, --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 {
  animation: plan-fade 0.35s ease both;
}
@media (prefers-reduced-motion: reduce) { .plan { animation: none; } }

/* Terug-link "‹ {label}" in het accent. */
.plan__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 0 12px;
  color: var(--color-accent);
  font-weight: 700;
  font-size: var(--text-sm);
  text-decoration: none;
}
.plan__back svg { width: var(--icon); height: var(--icon); }

.plan__eyebrow {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-faint);
  margin: 0 2px 8px;
}

.plan__title {
  font-family: var(--font-display);
  font-size: var(--text-26);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.2px;
  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: 700;
  font-size: var(--text-sm);
  color: var(--color-accent);
  background: none;
  border: 0;
  padding: 12px 0 2px;
  cursor: pointer;
  text-decoration: none;
}

/* ── Intro (warme uitleg-kaart) ── */
.plan-hero {
  margin: 14px 0 16px;
  border-radius: var(--radius-card-lg);
  padding: var(--space-5);
  color: var(--color-on-dark);
  background: var(--gradient-accent);
  box-shadow: 0 10px 24px rgba(140, 55, 30, 0.28);
}
.plan-hero__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-field);
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.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: 600; line-height: 1.2; }
.plan-hero__body { font-size: var(--text-sm); line-height: 1.5; color: rgba(255, 255, 255, 0.92); 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: 1.45; color: var(--color-text); }
.plan-bullet__check {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-control);
  display: grid;
  place-items: center;
  background: var(--color-soft);
  color: var(--color-accent);
}
.plan-bullet__check svg { width: var(--icon-xs); height: var(--icon-xs); }
.plan-bullet--co .plan-bullet__check { background: var(--color-coparent-soft); color: var(--color-coparent); }

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

/* ── Hub ── */
.plan-hub__head { display: flex; align-items: flex-start; justify-content: space-between; }
.plan-badge {
  font-size: var(--text-11);
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius);
  margin-top: 6px;
  white-space: nowrap;
}
.plan-badge--concept { color: var(--color-amber); background: var(--color-amber-soft); }
.plan-badge--signed { color: var(--color-green); background: var(--color-green-soft); }

/* Avatar-paar (jij + co-ouder). */
.plan-avatars { display: flex; align-items: center; gap: 8px; margin: 9px 0 16px; }
.plan-avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-control);
  display: grid;
  place-items: center;
  color: var(--color-on-accent);
  font-weight: 800;
  font-size: var(--text-11);
}
.plan-avatar--me { background: var(--color-accent); }
.plan-avatar--co { background: var(--color-coparent); margin-left: -10px; border: 2px solid var(--color-bg); }
.plan-avatars__label { font-size: var(--text-13); color: var(--color-text-muted); }

/* Voortgangskaart. */
.plan-progress {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-4);
  padding: 14px 16px;
  margin-bottom: 20px;
}
.plan-progress__row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.plan-progress__count { font-size: var(--text-sm); font-weight: 700; }
.plan-progress__note { font-size: var(--text-xs); color: var(--color-faint); }
.plan-progress__track { height: 7px; border-radius: var(--radius-xs); background: var(--color-line); overflow: hidden; }
.plan-progress__fill { height: 100%; background: var(--color-accent); border-radius: var(--radius-xs); transition: width 0.3s ease; }

/* Sectie-label boven een lijst. */
.plan-section-label {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-faint);
  margin: 0 4px 10px;
}

/* Onderwerpen-lijst (kaart met rijen). */
.plan-topics {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-4);
  overflow: hidden;
  margin-bottom: 20px;
}
.plan-topic {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-line);
  text-decoration: none;
  color: var(--color-text);
  transition: background 0.14s ease;
}
.plan-topic:last-child { border-bottom: 0; }
.plan-topic:active { background: var(--color-softer); }
.plan-topic__dot {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
}
.plan-topic__dot span { width: 9px; height: 9px; border-radius: 50%; display: block; }
.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-15); font-weight: 700; line-height: 1.2; }
.plan-topic__badge { display: block; font-size: var(--text-xs); font-weight: 700; margin-top: 3px; }
.plan-topic__badge--alert { color: var(--color-amber); font-weight: 600; }
.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__dot { background: var(--color-line); }
.plan-status--leeg .plan-topic__dot span { background: var(--color-line); }
.plan-status--leeg .plan-topic__badge { color: var(--color-faint); }
.plan-status--wacht .plan-topic__dot { background: var(--color-amber-soft); }
.plan-status--wacht .plan-topic__dot span { background: var(--color-amber); }
.plan-status--wacht .plan-topic__badge { color: var(--color-amber); }
.plan-status--review .plan-topic__dot { background: var(--color-soft); }
.plan-status--review .plan-topic__dot span { background: var(--color-accent); }
.plan-status--review .plan-topic__badge { color: var(--color-accent); }
.plan-status--eens .plan-topic__dot { background: var(--color-green-soft); }
.plan-status--eens .plan-topic__badge { color: var(--color-green); }
/* Concept (solo ingevuld, nog niet gedeeld) — accent-tint, zoals 'review'. */
.plan-status--concept .plan-topic__dot { background: var(--color-soft); }
.plan-status--concept .plan-topic__dot span { background: var(--color-accent); }
.plan-status--concept .plan-topic__badge { color: var(--color-accent); }

/* 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: 1.5;
  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-link ("‹ Overzicht") blijft links staan op de gecentreerde schermen. */
.plan--center .plan__back { align-self: flex-start; }

/* "Waarom dit telt"-kaart (zacht accent). */
.plan-note { border-radius: var(--radius-card); padding: 15px 16px; margin-top: 18px; }
.plan-note--soft { background: var(--color-soft); }
.plan-note__head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: var(--text-13); font-weight: 800; }
.plan-note__head svg { width: var(--icon-sm); height: var(--icon-sm); }
.plan-note__head--accent { color: var(--color-accent); }
.plan-note__body { font-size: var(--text-sm); line-height: 1.5; color: var(--color-text); }

/* Editor-kop. */
.plan-q__title { font-family: var(--font-display); font-size: var(--text-22); font-weight: 500; line-height: 1.22; color: var(--color-text); }

/* Vrij tekstveld. */
/* ── Plan-intake (design planIntake) + bekrachtigd-badge ── */
.plan-intake__vraag { font-size: var(--text-sm); font-weight: 700; margin: 0 2px 4px; }
.plan-intake__datum { margin-top: 16px; }
.plan-intake__hint { display: flex; gap: 10px; align-items: flex-start; background: var(--color-softer); border-radius: var(--radius-field); padding: 12px 14px; margin-top: 14px; font-size: var(--text-13); color: var(--color-text-muted); line-height: 1.45; }
.plan-intake__hint svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); margin-top: 1px; color: var(--color-faint); }
.plan-intake__doc { display: flex; align-items: center; gap: 12px; background: var(--color-surface); border: 1px dashed var(--color-accent); border-radius: var(--radius-card); padding: 13px 15px; }
.plan-intake__doc:active { background: var(--color-softer); }
.plan-intake__doc-icon { flex: none; width: 38px; height: 38px; border-radius: var(--radius-field); background: var(--color-soft); color: var(--color-accent); display: flex; align-items: center; justify-content: center; }
.plan-intake__doc-icon svg { width: var(--icon); height: var(--icon); }
.plan-intake__doc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plan-intake__doc-title { font-size: var(--text-sm); font-weight: 700; color: var(--color-accent); }
.plan-intake__doc-sub { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 1px; }
.plan-intake__voetnoot { font-size: var(--text-xs); color: var(--color-faint); line-height: 1.45; margin: 12px 4px 0; text-align: center; }
.plan-ratified { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 2px; font-size: var(--text-xs); font-weight: 700; 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); }

/* ── Hoofdverblijf-editor (design isTopicHoofdverblijf) ── */
.plan-hv__card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 14px 15px; margin-top: 12px; }
.plan-hv__kid { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.plan-hv__avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--kid-color, var(--color-soft)); color: var(--color-on-accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--text-15); }
.plan-hv__name { font-size: var(--text-15); font-weight: 700; }
.plan-hv__opts { display: flex; gap: 8px; }
/* Lange optie-labels (halen & brengen): rijen onder elkaar i.p.v. smalle kolommen. */
.plan-hv__opts--stack { flex-direction: column; gap: 6px; }
.plan-hv__opts--stack .plan-hv__opt-label { text-align: left; padding: 14px 16px; line-height: 1.35; }
.plan-hv__opt { flex: 1; position: relative; }
.plan-hv__opt-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Zelfde rand als de vac-keuze/vac-defer-vlakken en .chip-radio (1px --color-line, de
   chips-canon) — de .plan-kosten-override die dit per scherm rechttrok is overbodig. */
.plan-hv__opt-label { display: block; text-align: center; padding: 11px; border-radius: var(--radius-field); font-size: var(--text-sm); font-weight: 700; cursor: pointer; background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-line); transition: transform .12s ease; }
.plan-hv__opt-label:active { transform: scale(.97); }
.plan-hv__opt-input:checked + .plan-hv__opt-label { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }

/* ── Informeren & beslissen-editor (design isTopicInformeren) ── */
.plan-inf__ingebouwd, .plan-inf__wet { display: flex; gap: 11px; align-items: flex-start; background: var(--color-soft); border-radius: var(--radius-card); padding: 13px 15px; font-size: var(--text-13); color: var(--color-text); line-height: 1.5; }
.plan-inf__ingebouwd svg, .plan-inf__wet svg { flex: none; width: var(--icon); height: var(--icon); margin-top: 1px; color: var(--color-accent); }
.plan-inf__vraag { font-size: var(--text-13); font-weight: 700; margin: 16px 2px 8px; }
.plan-inf__switchrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: 14px 16px; box-shadow: var(--shadow-sm); cursor: pointer; margin-bottom: 10px; }
.plan-inf__switchtext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plan-inf__switchtitle { font-size: var(--text-sm); font-weight: 700; }
.plan-inf__switchsub { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 1px; line-height: 1.4; }
.plan-inf__switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 46px; height: 27px; border-radius: var(--radius-card); background: var(--color-line); border: none; cursor: pointer; transition: background .2s ease; }
.plan-inf__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: var(--color-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s ease; }
.plan-inf__switch:checked { background: var(--color-accent); }
.plan-inf__switch:checked::after { transform: translateX(19px); }
.plan-inf__overlegblok { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 14px 15px; margin-bottom: 10px; }
.plan-inf__sublabel { display: block; font-size: var(--text-xs); font-weight: 700; color: var(--color-faint); margin-bottom: 8px; }
.plan-inf__datum, .plan-inf__anders { margin-top: 12px; }
.plan-inf__geen { display: flex; gap: 10px; align-items: flex-start; background: var(--color-softer); border-radius: var(--radius-field); padding: 12px 14px; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.45; margin-bottom: 10px; }
.plan-inf__geen svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); margin-top: 1px; color: var(--color-faint); }
.plan-inf__legenda { font-size: var(--text-xs); color: var(--color-text-muted); margin: 4px 2px 14px; line-height: 1.5; }
.plan-inf__legenda b:first-child { color: var(--color-accent); }
.plan-inf__domein { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 12px 14px; margin-bottom: 9px; }
.plan-inf__domein-label { display: block; font-size: var(--text-sm); font-weight: 700; margin-bottom: 9px; }
.plan-inf__seg { display: flex; gap: 4px; background: var(--color-softer); border-radius: var(--radius-field); padding: 3px; }
.plan-inf__seg-opt { flex: 1; position: relative; }
.plan-inf__seg-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.plan-inf__seg-label { display: block; text-align: center; padding: 8px 4px; border-radius: var(--radius); font-size: var(--text-xs); font-weight: 700; cursor: pointer; color: var(--color-text-muted); }
.plan-inf__seg-input:checked + .plan-inf__seg-label { background: var(--color-surface); color: var(--color-accent); box-shadow: 0 1px 3px rgba(60, 33, 18, .12); }
.plan-inf__warn { display: flex; gap: 10px; align-items: flex-start; background: var(--color-amber-soft); border: 1px solid var(--color-amber-border); border-radius: var(--radius-field); padding: 12px 14px; margin-top: 10px; font-size: var(--text-xs); color: var(--color-amber-deep); line-height: 1.5; }
.plan-inf__warn svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); margin-top: 1px; color: var(--color-amber); }
.plan-inf__rechter { display: flex; gap: 10px; align-items: flex-start; background: var(--color-softer); border-radius: var(--radius-field); padding: 11px 13px; margin-top: 12px; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.45; }
.plan-inf__rechter svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); margin-top: 1px; color: var(--color-faint); }

.plan-textarea {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-4);
  resize: vertical;
  min-height: 104px;
}
.plan-textarea:focus-visible { outline: none; border-color: var(--color-accent); }

/* Keuze-rijen (radio). */
.plan-radios { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.plan-radio {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: transform 0.14s ease;
}
.plan-radio:active { transform: scale(0.99); }
.plan-radio__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }
.plan-radio__dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-faint);
}
.plan-radio__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); transform: scale(0); transition: transform 0.12s ease; }
.plan-radio__input:checked ~ .plan-radio__dot { border-color: var(--color-accent); }
.plan-radio__input:checked ~ .plan-radio__dot::after { transform: scale(1); }
.plan-radio__input:focus-visible ~ .plan-radio__dot { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.plan-radio__label { font-size: var(--text-sm); font-weight: 600; }
.plan-radio--desc { align-items: flex-start; }
.plan-radio__text { display: flex; flex-direction: column; gap: 1px; }
.plan-radio__title { font-size: var(--text-sm); font-weight: 700; }
.plan-radio__badge { font-size: var(--text-11); font-weight: 700; color: var(--color-accent); margin-left: 6px; }
.plan-radio__sub { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.4; margin-top: 1px; }

/* 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). */
.plan-field {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-field);
  outline: none;
  resize: none;
}
.plan-field::placeholder { color: var(--color-text-muted); }
.plan-field:focus { border-color: var(--color-accent); }
/* 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. */
.plan-kosten .kasboek-form__amount { background: var(--color-bg); margin: 0; }
/* Chip-randen net zo fijn als in het design (var(--line) i.p.v. de iets donkerdere border). */

/* Personen-rijen (ouders/kinderen). */
.plan-person { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--color-line); color: var(--color-text); text-decoration: none; }
.plan-person:last-child { border-bottom: 0; }
.plan-person__avatar { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-field); color: var(--color-on-accent); font-weight: 800; font-size: var(--text-13); }
.plan-person__main { flex: 1; min-width: 0; }
.plan-person__name { display: block; font-size: var(--text-15); font-weight: 700; }
.plan-person__meta { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.plan-add { display: flex; align-items: center; gap: 9px; padding: 14px 16px; font-size: var(--text-sm); font-weight: 700; 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: 48px;
  border-radius: 50%;
  background: var(--color-soft);
  color: var(--color-accent);
  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__title { font-family: var(--font-display); font-size: var(--text-24); font-weight: 500; margin-top: 22px; }
.plan-sent__body { font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); margin-top: 10px; padding: 0 8px; }
.plan-sent__card {
  width: 100%;
  margin-top: 26px;
  padding: 15px 16px;
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-4);
}
.plan-sent__topic { font-size: var(--text-15); font-weight: 800; }
.plan-sent__summary { font-size: var(--text-13); color: var(--color-text-muted); line-height: 1.5; margin-top: 6px; }
.plan-sent__by { display: flex; align-items: center; gap: 8px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--color-line); font-size: var(--text-xs); color: var(--color-faint); }
.plan-sent__waiting { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 9px 14px; border-radius: var(--radius-field); background: var(--color-amber-soft); font-size: var(--text-13); font-weight: 700; color: var(--color-amber); }
.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-11); font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--color-faint); margin: 14px 2px 8px; }

/* Keuze-chips (plek / dag). */
.plan-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.plan-chip { font: inherit; font-size: var(--text-13); font-weight: 700; padding: 9px 13px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-field); cursor: pointer; transition: transform 0.12s ease; }
.plan-chip:active { transform: scale(0.97); }

/* ── Vakanties & Feestdagen ── */
.plan-source { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding: 9px 12px; background: var(--color-softer); border-radius: var(--radius-field); font-size: var(--text-xs); line-height: 1.35; color: var(--color-text-muted); }
.plan-source svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); }

.plan-selects { display: flex; gap: 8px; margin-bottom: 18px; }
.plan-select { flex: 1; -webkit-appearance: none; appearance: none; padding: 11px 38px 11px 12px; font: inherit; font-size: var(--text-13); font-weight: 600; color: var(--color-text); background-color: var(--color-surface); background-image: var(--select-chevron); background-repeat: no-repeat; background-position: right 13px center; background-size: 12px 12px; border: 1px solid var(--color-line); border-radius: var(--radius-field); box-shadow: var(--shadow-4); cursor: pointer; }

input[type="submit"].plan-chip { -webkit-appearance: none; appearance: none; }

.plan-vac { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-4); padding: 14px; margin-bottom: 11px; }
/* .plan-vseg/.plan-rseg zetten hun eigen display (grid/flex), wat [hidden] anders verliest —
   zelfde val als .picker [hidden] (application.css). Volg-zorgregeling moet who/ritme/split
   écht verbergen, niet alleen het `hidden`-attribuut zetten. */
.plan-vac [hidden] { display: none !important; }
.plan-vac__name { font-size: var(--text-15); font-weight: 700; }
.plan-vac__feest { margin-top: 10px; padding: 10px 12px; background: var(--color-green-soft); border-radius: var(--radius-field); }
.plan-vac__feest-label { font-size: var(--text-11); font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-green); margin-bottom: 6px; }
.plan-vac__feest-line { font-size: var(--text-xs); color: var(--color-text); line-height: 1.55; }

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

/* ritme-keuze (2-weg): neutraal actief. */
.plan-rseg { display: flex; gap: 5px; margin-top: 9px; padding: 3px; background: var(--color-softer); border-radius: var(--radius-field); }
/* position: relative + verankerde radio: zelfde scroll-wegspring-fix als bij .plan-vseg — zonder
   dit resolvet de verborgen absolute radio naar een verre voorouder en scrolt de browser bij een
   klik de container weg. */
.plan-rseg__opt { flex: 1; margin: 0; position: relative; }
.plan-rseg__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }
.plan-rseg__opt span { display: block; text-align: center; font-size: var(--text-xs); font-weight: 700; padding: 12px 7px; border-radius: var(--radius); color: var(--color-text-muted); cursor: pointer; }
.plan-rseg__input:checked ~ span { background: var(--color-text); color: var(--color-on-accent); }
.plan-rseg__input:focus-visible ~ span { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* datum-paren. */
.plan-period-label { display: flex; align-items: center; gap: 7px; margin: 13px 0 5px; font-size: var(--text-xs); font-weight: 700; }
.plan-period-dot { width: 9px; height: 9px; border-radius: var(--radius-xs); }
.plan-dates { display: flex; align-items: flex-end; gap: 8px; margin-top: 11px; }
.plan-date { flex: 1; min-width: 0; }
.plan-date__dow { display: block; font-size: var(--text-10); font-weight: 700; text-transform: uppercase; color: var(--color-faint); margin-bottom: 3px; }
.plan-dates__sep { font-size: var(--text-xs); color: var(--color-faint); padding-bottom: 10px; }
.plan-hint-text { font-size: var(--text-xs); color: var(--color-faint); line-height: 1.4; margin: 2px 2px 0; }

/* feestdag-venster. */
.plan-window { padding: 14px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-4); }
.plan-window__row-label { font-size: var(--text-13); font-weight: 700; margin-bottom: 8px; }
.plan-window__row { display: flex; gap: 8px; margin-bottom: 13px; }
.plan-window__row .plan-rseg { flex: 1; margin-top: 0; }
.plan-window__time { flex: none; width: 96px; padding: 8px 9px; font: inherit; font-size: var(--text-13); font-weight: 600; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-field); }
.plan-window__note { font-size: var(--text-11); color: var(--color-faint); line-height: 1.4; }

/* feestdag-rijen. */
.plan-feest { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-4); padding: 14px; margin-bottom: 11px; }
/* center + naam flex:1 (was baseline + space-between): met de verwijder-knop op eigen
   dagen staan er drie kinderen in de rij — de datum blijft zo netjes rechts naast de knop. */
.plan-feest__head { display: flex; align-items: center; gap: 8px; }
.plan-feest__name { flex: 1; min-width: 0; font-size: var(--text-15); font-weight: 700; }
.plan-feest__date { font-size: var(--text-xs); color: var(--color-faint); }
.plan-feest__window { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 4px; }

/* ===================== AKKOORD-MECHANISME (fase 3) ===================== */
.plan__title--sm { font-size: var(--text-22); }
.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-sm); }
.plan-review__by .plan-avatar { width: 30px; height: 30px; border-radius: var(--radius); font-size: var(--text-xs); }
.plan-review__card { margin-top: 16px; padding: 16px; font-size: var(--text-sm); line-height: 1.55; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-4); }
.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-13); color: var(--color-text-muted); margin-top: 14px; text-decoration: none; }
.plan-review__chat b { color: var(--color-coparent); }

/* Eens: celebratie. */
.plan-agreed__icon { display: grid; place-items: center; width: 74px; height: 74px; margin-top: 14px; border-radius: 50%; background: var(--color-green-soft); color: var(--color-green); animation: plan-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.plan-agreed__icon svg { width: 38px; height: 38px; }
@media (prefers-reduced-motion: reduce) { .plan-agreed__icon { animation: none; } }
.plan-agreed__title { font-family: var(--font-display); font-size: var(--text-24); font-weight: 500; margin-top: 18px; }
.plan-agreed__about { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 6px; }
.plan-agreed__avatars { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 9px 14px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-field); box-shadow: var(--shadow-4); }
.plan-agreed__date { font-size: var(--text-13); color: var(--color-text-muted); }
.plan-agreed__card { width: 100%; margin-top: 22px; padding: 14px 15px; text-align: left; font-size: var(--text-13); color: var(--color-text-muted); line-height: 1.5; background: var(--color-surface); border: 1px solid var(--color-line); border-left: 4px solid var(--color-green); border-radius: var(--radius-card); box-shadow: var(--shadow-4); }
.plan-agreed__topic { display: block; margin-bottom: 6px; font-size: var(--text-15); font-weight: 800; color: var(--color-text); }
.plan-agreed__stale { margin: 12px 0 4px; padding: 10px 14px; border-radius: var(--radius-field); 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: 12px 14px; font-size: var(--text-13); line-height: 1.5; background: var(--color-coparent-soft); border-radius: var(--radius-field); }
.plan-counter__their { padding: 12px 14px; font-size: var(--text-13); color: var(--color-text-muted); line-height: 1.5; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-field); }
.plan-label--co { color: var(--color-coparent); }
.plan-counter__textarea { display: block; width: 100%; min-height: 96px; padding: 12px 14px; font: inherit; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text); background: var(--color-surface); border: 1.5px solid var(--color-coparent); border-radius: var(--radius-field); resize: vertical; }
.plan-counter__textarea:focus-visible { outline: none; }
.plan-counter__coach { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; margin-top: 12px; }
.plan-counter__coach b { color: var(--color-amber); }

/* "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-card); font-size: var(--text-13); font-weight: 700; color: var(--color-amber); line-height: 1.45; }
.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-11); font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-green); margin-bottom: 6px; }
.plan-sign__topics { margin: 16px 0 14px; padding: 6px 16px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-4); }
.plan-sign__topic { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-line); }
.plan-sign__topic:last-child { border-bottom: 0; }
.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-sm); font-weight: 600; }
.plan-sign__declaration { padding: 12px 14px; background: var(--color-softer); border-radius: var(--radius-field); font-size: var(--text-13); color: var(--color-text-muted); line-height: 1.55; font-style: italic; }
.plan-sign__sigs { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.plan-sign__sig { display: flex; align-items: center; gap: 11px; padding: 12px 14px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-field); }
.plan-sign__sig--awaiting { border: 1.5px solid var(--color-accent); }
.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-sm); font-weight: 700; }
.plan-sign__sig-status { display: block; font-size: var(--text-xs); font-weight: 700; margin-top: 1px; }
.plan-sign__sig-status--signed { color: var(--color-green); }
.plan-sign__sig-status--waiting { color: var(--color-amber); }
.plan-sign__sig-check { flex: none; width: 18px; height: 18px; color: var(--color-green); }
.plan-sign__note { font-size: var(--text-11); 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-field); font-size: var(--text-13); font-weight: 700; 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-soft); color: var(--color-accent); 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__title { font-family: var(--font-display); font-size: var(--text-24); font-weight: 500; margin-top: 20px; line-height: 1.18; }
.plan-done__body { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5; margin-top: 10px; }
.plan-done__card { width: 100%; margin-top: 24px; padding: 15px 16px; text-align: left; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-4); }
.plan-done__card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.plan-done__card-title { font-size: var(--text-15); font-weight: 800; }
.plan-done__card-meta { font-size: var(--text-xs); 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-11); color: var(--color-faint); text-align: center; margin-top: 11px; line-height: 1.4; }

/* Ondertekende weergave. */
.plan-signed__by { font-size: var(--text-13); color: var(--color-text-muted); margin: 8px 0 18px; }
.plan-signed__topics { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
/* .stack in de view: naam + clausules op 8px van elkaar (container deelt uit). */
.plan-signed__topic { padding: 14px 16px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-4); --stack-gap: var(--space-2); }
.plan-signed__topic-name { display: block; font-size: var(--text-15); font-weight: 800; color: var(--color-accent); margin-bottom: 10px; }
.plan-signed__clause { display: flex; gap: 10px; font-size: var(--text-sm); color: var(--color-text); line-height: 1.5; }
.plan-signed__clause-num { flex: none; min-width: 26px; font-weight: 700; color: var(--color-faint); font-variant-numeric: tabular-nums; }
.plan-signed__clause-text { flex: 1; min-width: 0; }
.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: 1.25; 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-15); font-weight: 700; padding: 16px; border-radius: var(--radius-card); background: var(--color-surface); 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-accent); border-color: var(--color-accent); color: var(--color-on-accent); }

/* Afspraak-clausules: elke afspraak een eigen alinea (leesbaar plan). Kleur/grootte erft
   van de kaart eromheen; hier alleen de onderlinge ritmiek. Bij meerdere leden krijgt elk
   lid een subtiel bolletje (scanbaarheid); een enkel lid blijft een gewone alinea. */
.plan-clause { position: relative; margin: 0; line-height: 1.55; }
.plan-clause:not(:only-child) { padding-left: 15px; }
.plan-clause:not(:only-child)::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-faint);
}

/* ── 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: 1px solid var(--color-line); border-radius: var(--radius-field); background: var(--color-surface);
  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-editor (preambule-gegevens) ── */
/* .stack in de view: kop + velden op 12px (container deelt uit, geen +-regels). */
.plan-ouders__card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-4); padding: 14px 15px; --stack-gap: var(--space-3); }
.plan-ouders__head { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
.plan-ouders__name { font-size: var(--text-15); font-weight: 700; }
.plan-ouders__tag { margin-left: 6px; font-size: var(--text-11); font-weight: 700; color: var(--color-faint); }
/* Kind bewerken — zelfde icoon-knop-stijl als .kinddetail__action (child-detailpagina),
   hier rechts uitgelijnd in de kaart-kop zodat je de canonieke kind-sheet direct opent
   zonder de plan-builder te verlaten. */
.plan-ouders__kid-edit {
  appearance: none;
  margin-left: auto;
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 0;
  background: var(--color-soft);
  color: var(--color-accent);
  cursor: pointer;
}
.plan-ouders__kid-edit svg { width: var(--icon); height: var(--icon); }
.plan-ouders__kid-edit:active { transform: scale(0.95); }
/* ── 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 (.plan-q__title) · lede (.plan-q__lede) · sectiekop (.plan-subhead) ·
   veldlabel (.plan-ouders__label). Meer niveaus heeft deze pagina niet nodig. */
.plan-subhead {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-family: var(--font-display); font-size: var(--text-15); font-weight: 600;
  color: var(--color-text); margin: 0 2px;
}
/* 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-family: var(--font-sans); font-size: var(--text-11); font-weight: 700;
  color: var(--color-amber-deep); background: var(--color-amber-soft);
  border: 1px solid var(--color-amber-border); border-radius: var(--radius-pill); padding: 3px 9px;
}
.plan-ouders__head + .plan-ouders__field { margin-top: var(--space-3); }
/* 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-ouders__label,
.plan-band__range {
  display: block; font-size: var(--text-11); font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.plan-ouders__label { color: var(--color-text-muted); margin-bottom: 8px; }
.plan-band__range { color: var(--color-text); }
/* Kinderen zijn leesrijen (read-only; bewerken loopt via Gezinsinstellingen), dus één kaart
   met .plan-person-rijen i.p.v. een kaart per kind met een losse grijze alinea eronder. */
.plan-ouders__kids {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-4); overflow: hidden;
}
.plan-ouders__kids .plan-person { padding: var(--space-3) var(--space-4); }
.plan-person__meta--todo { color: var(--color-accent); }

/* 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-13); color: var(--color-text-muted); line-height: 1.45; margin: 2px 0 0; }

/* De enige echte keuze op deze pagina krijgt kaart-gewicht; al het andere is invullen.
   Een ruimere sprong dan de blok-ritmiek: dit is een nieuw onderwerp, geen volgend veld. */
.plan-ouders__betrokken {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-4); padding: var(--space-4);
}
.plan-editor > .plan-ouders__betrokken,
.plan-stack > .plan-ouders__betrokken { margin-top: var(--space-6); }
/* Vraag-kop: de vraag, de wettelijke plicht als chip en het vraagteken dat de uitleg opent.
   De chip en de knop hangen achter de laatste regel aan i.p.v. op een eigen regel. */
.plan-ouders__vraag { margin-bottom: var(--space-3); }
.plan-ouders__vraagtekst { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); line-height: 1.4; }
.plan-ouders__vraag .plan-legal-chip,
.plan-ouders__vraag .knowledge-btn { vertical-align: middle; margin-left: 6px; }
.plan-ouders__anders { display: none; }
.plan-ouders__betrokken:has(.plan-hv__opt-input[value="anders"]:checked) .plan-ouders__anders { display: block; margin-top: 8px; }

/* ═══════════ 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); }
.plan-inf__overlegblok,
.plan-inf__matrix { --stack-gap: var(--space-3); }
.plan-inf__datum,
.plan-inf__anders { --stack-gap: var(--space-2); }
/* 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 > .plan-q__title + *,
.plan-stack > .plan-q__title + * { margin-top: 6px; }
.plan-editor > :is(.plan-label, .plan-section-label, .plan-inf__vraag, .plan-inf__sublabel) + *,
.plan-stack > :is(.plan-label, .plan-section-label, .plan-inf__vraag, .plan-inf__sublabel) + *,
.plan-inf__overlegblok > .plan-inf__sublabel + *,
.plan-inf__datum > .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: 26px; }
.plan-editor > .plan-subhead + *,
.plan-stack > .plan-subhead + * { margin-top: 9px; }

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

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

/* Generieke switch (track + knop), gedeeld door de per-kind- en volg-toggle. */
.plan-switch { position: relative; flex: none; display: inline-block; }
.plan-switch__input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.plan-switch__track { display: block; width: 46px; height: 27px; border-radius: var(--radius-card); background: var(--color-line); padding: 3px; transition: background 0.2s ease; }
.plan-switch__track::after { content: ""; display: block; width: 21px; height: 21px; border-radius: 50%; background: var(--color-surface); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform 0.2s ease; }
.plan-switch__input:checked + .plan-switch__track { background: var(--color-accent); }
.plan-switch__input:checked + .plan-switch__track::after { transform: translateX(19px); }
.plan-switch--sm .plan-switch__track { width: 43px; height: 25px; border-radius: var(--radius-field); }
.plan-switch--sm .plan-switch__track::after { width: 19px; height: 19px; }
.plan-switch--sm .plan-switch__input:checked + .plan-switch__track::after { transform: translateX(18px); }
/* 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-accent); }
.plan-switch--on .plan-switch__track::after { transform: translateX(19px); }

/* "Verschillende vakanties per kind"-kaart. */
.vac-toggle { display: flex; align-items: center; gap: 12px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-4); padding: 14px 16px; margin: 4px 0 14px; cursor: pointer; }
.vac-toggle__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vac-toggle__title { font-size: var(--text-sm); font-weight: 700; }
.vac-toggle__sub { font-size: var(--text-11); color: var(--color-text-muted); margin-top: 2px; line-height: 1.4; }

/* Kind-tabs. */
.vac-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.vac-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 7px; border-radius: var(--radius-pill); border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--text-13); font-weight: 700; text-decoration: none; }
.vac-tab--active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.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-11); font-weight: 800; }
.vac-tab--active .vac-tab__avatar { background: rgba(255,255,255,.22); color: var(--color-on-accent); }

/* Info-note (per-kind). */
.vac-note { display: flex; gap: 9px; align-items: flex-start; background: var(--color-softer); border-radius: var(--radius-field); padding: 12px 14px; margin: 0 0 14px; font-size: var(--text-13); color: var(--color-text-muted); line-height: 1.45; }
.vac-note svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--color-faint); margin-top: 1px; }

/* Enkel bereik / split-blokken krijgen wat lucht boven zich. */
.plan-vac__single, .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-11); font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; 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; }
/* Feestdagen: één dag kent geen "verdeeld" — twee gelijke helften. */
.vac-keuze--2 { grid-template-columns: repeat(2, 1fr); }
.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-field); 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-13); font-weight: 700; color: var(--color-text-muted); text-align: center; line-height: 1.2; }
/* 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; }

/* Scheiding tussen "zelf toewijzen" en "overlaten aan een andere regel" — een hairline met
   een woord erin leest als één vraag met twee soorten antwoord, niet als twee losse blokken. */
/* Zelfde eyebrow-stijl als .vac-vraag — de hairline-variant is vervallen (kop-met-lijn is
   app-breed afgewezen, conventions §3). */
.vac-of { font-size: var(--text-11); font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--color-faint); margin: 12px 2px 8px; }

/* 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 { display: flex; flex-direction: column; gap: 5px; }
.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-field); 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-13); font-weight: 700; color: var(--color-text); }
.vac-defer__sub { display: none; font-size: var(--text-xs); color: var(--color-text-muted); margin: 4px 4px 0 2px; line-height: 1.4; }
/* 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-softer); 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-field); 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-13); font-weight: 700; 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; }

/* ＋ Eigen feestdag (v2): uitklapblok onder de feestdag-kaarten; velden in de app-veldstijl. */
.vac-nieuw { margin-top: 4px; }
.vac-nieuw__panel { margin-top: 8px; padding: 13px 14px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.vac-nieuw__panel[hidden] { display: none; }
/* De korte uitleg hergebruikt .vac-periods__note (guardrail: geen eigen uitleg-klassen);
   binnen dit paneel zit hij bóven de velden i.p.v. onder een lijst. */
.vac-nieuw__panel .vac-periods__note { margin: 0 0 11px; }
.vac-nieuw__submit { margin-top: 13px; }
/* Verwijder-knop op een eigen feestdag-kaart (alleen daar — de standaardset blijft). */
.plan-feest__del { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--color-softer); color: var(--color-faint); cursor: pointer; padding: 0; }
.plan-feest__del svg { width: var(--icon-xs); height: var(--icon-xs); }

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

/* "Om en om per jaar": rekent voor wat het wisselen concreet betekent. */
.vac-omenom { display: flex; gap: 9px; align-items: flex-start; background: var(--color-softer); border-radius: var(--radius-field); padding: 12px 14px; margin-top: 8px; font-size: var(--text-13); color: var(--color-text); line-height: 1.5; }
.vac-omenom svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--color-accent); margin-top: 1px; }

/* Vergrendelde datums (Volg zorgregeling) — tekst + ✎ dat alléén de velden ontgrendelt. */
.vac-dates-lock { display: flex; gap: 9px; align-items: center; background: var(--color-softer); border-radius: var(--radius-field); padding: 12px 14px; margin-top: 10px; font-size: var(--text-13); color: var(--color-text-muted); }
.vac-dates-lock > svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--color-faint); }
.vac-dates-lock__text { flex: 1; min-width: 0; font-weight: 600; color: var(--color-text); }
.vac-dates-lock__edit { display: inline-flex; align-items: center; gap: 5px; flex: none; border: none; background: none; padding: 4px; margin: -4px; font: inherit; font-size: var(--text-xs); font-weight: 700; color: var(--color-accent); cursor: pointer; }
.vac-dates-lock__edit svg { width: var(--icon-xs); height: var(--icon-xs); }

/* 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-field); 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-softer); color: var(--color-faint); font-size: var(--text-11); font-weight: 800; 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: 800; padding: 11px 8px; border-radius: var(--radius); color: var(--color-text-muted); background: var(--color-softer); cursor: pointer; line-height: 1.25; }
.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); font-weight: 700; 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:active { background: var(--color-softer); }
.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: 1.45; }

/* Per-jaar-statusrij: tikken klapt de keuze voor dít schooljaar uit. */
.vac-jaarrij + .vac-jaarrij { border-top: 1px solid var(--color-line); }
.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-softer); }