/* ===================== 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: één kolom, schermpadding 18px, ruimte onderaan voor de bottom-nav. */
.plan {
  max-width: 480px;
  margin-inline: auto;
  padding: 4px 18px calc(24px + 3.5rem);
  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: 18px; height: 18px; }

.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);
}
.plan__lede { font-size: var(--text-13); color: var(--color-text-muted); margin-top: 8px; }

/* ── Knoppen ── */
.plan-btn {
  display: block;
  width: 100%;
  text-align: center;
  font: inherit;
  font-weight: 700;
  font-size: var(--text-15);
  padding: 15px;
  border: 0;
  border-radius: 15px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.14s ease, background 0.14s ease;
}
.plan-btn:active { transform: scale(0.98); }
.plan-btn:hover { background: var(--color-accent-hover); }
.plan-btn--ghost {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  color: var(--color-text);
  font-size: var(--text-sm);
  padding: 13px;
  border-radius: 14px;
}
.plan-btn--ghost:hover { background: var(--color-softer); }
.plan-btn--purple { background: var(--color-coparent); }
.plan-btn--purple:hover { background: var(--color-coparent); opacity: 0.92; }
.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: 22px;
  padding: 20px;
  color: var(--color-on-accent);
  background: var(--gradient-accent);
  box-shadow: 0 10px 24px rgba(140, 55, 30, 0.28);
}
.plan-hero__icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.plan-hero__icon svg { width: 20px; height: 20px; }
.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 { display: flex; flex-direction: column; gap: 13px; 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: 7px;
  display: grid;
  place-items: center;
  background: var(--color-soft);
  color: var(--color-accent);
}
.plan-bullet__check svg { width: 14px; height: 14px; }
.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: 8px;
  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: 7px;
  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: 16px;
  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: 4px; background: var(--color-line); overflow: hidden; }
.plan-progress__fill { height: 100%; background: var(--color-accent); border-radius: 4px; 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: 18px;
  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: 9px;
  display: grid;
  place-items: center;
}
.plan-topic__dot span { width: 9px; height: 9px; border-radius: 50%; display: block; }
.plan-topic__dot svg { width: 15px; height: 15px; 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: 17px; height: 17px; 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; }
.plan-btn--mt { margin-top: 22px; }
.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: 16px; 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: 17px; height: 17px; }
.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); }
.plan-q__lede { font-size: var(--text-13); color: var(--color-text-muted); margin-top: 7px; }

/* 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__uitleg { font-size: var(--text-13); color: var(--color-text-muted); margin: 0 2px 12px; line-height: 1.45; }
.plan-intake__datum { margin-top: 16px; }
.plan-intake__hint { display: flex; gap: 10px; align-items: flex-start; background: var(--color-softer); border-radius: 13px; 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: 17px; height: 17px; 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: 14px; padding: 13px 15px; }
.plan-intake__doc:active { background: var(--color-softer); }
.plan-intake__doc-icon { flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--color-soft); color: var(--color-accent); display: flex; align-items: center; justify-content: center; }
.plan-intake__doc-icon svg { width: 18px; height: 18px; }
.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: 9px; }
.plan-ratified svg { width: 13px; height: 13px; }

/* ── Hoofdverblijf-editor (design isTopicHoofdverblijf) ── */
.plan-hv__card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 16px; 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: 9px 14px; }
.plan-hv__opt { flex: 1; position: relative; }
.plan-hv__opt-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.plan-hv__opt-label { display: block; text-align: center; padding: 11px; border-radius: 11px; font-size: var(--text-sm); font-weight: 700; cursor: pointer; background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border); 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: 14px; 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: 18px; height: 18px; 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: 14px; padding: 13px 15px; 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: 14px; 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: 16px; 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: 13px; padding: 11px 13px; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.45; margin-bottom: 10px; }
.plan-inf__geen svg { flex: none; width: 16px; height: 16px; 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: 14px; 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: 11px; 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: 9px; 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: 13px; 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: 17px; height: 17px; margin-top: 1px; color: var(--color-amber); }
.plan-inf__rechter { display: flex; gap: 10px; align-items: flex-start; background: var(--color-softer); border-radius: 13px; 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: 16px; height: 16px; 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: 14px;
  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: 14px;
  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: 12px;
  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). */
.plan-kosten .plan-hv__opt-label { border-color: var(--color-line); }

/* Personen-rijen (ouders/kinderen). */
.plan-person { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--color-line); color: var(--color-text); text-decoration: none; }
.plan-person:last-child { border-bottom: 0; }
.plan-person--link:active { background: var(--color-softer); }
.plan-person__avatar { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; 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-person__chevron { flex: none; width: 17px; height: 17px; color: var(--color-faint); }
.plan-add { display: flex; align-items: center; gap: 9px; padding: 13px 15px; font-size: var(--text-sm); font-weight: 700; color: var(--color-accent); text-decoration: none; }
.plan-add svg { width: 17px; height: 17px; }

/* 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: 16px;
  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: 11px; 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: 11px; cursor: pointer; transition: transform 0.12s ease; }
.plan-chip:active { transform: scale(0.97); }
.plan-chip--active { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }

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

.plan-selects { display: flex; gap: 8px; }
.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: 11px; 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: 16px; box-shadow: var(--shadow-4); padding: 14px; margin-bottom: 11px; }
.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: 11px; }
.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; }

/* modus-keuze (3/4-weg): Jij / (Verdeeld) / co / Volg zorgverdeling / Volg vakantie. */
/* Button-group in een 2-koloms grid (twee rijen) i.p.v. één cramped segmented-rij: de langere
   keuzes ("Volg zorgverdeling", "Volg vakantie", "Verdeeld") kregen in vier smalle kolommen te
   weinig ruimte en liepen over elkaar. Uniforme pills op halve breedte: labels passen (op één
   of twee regels), alle knoppen even groot. Geen omhullende track (dan zou een oneven aantal
   opties een spook-lege cel tonen); elke pill heeft zelf een rustige achtergrond, geselecteerd
   krijgt de ouder-/neutraal-kleur (regels hieronder). Bij een oneven aantal (bv. 3 keuzes:
   Jij/co/Volg zorgverdeling) staat de laatste pill links; de lege cel rechts is onzichtbaar. */
/* Drie gelijke kolommen (Jij / Verdeeld / co-naam) — design_handoff_vakanties. De vierde
   optie ("volg zorgregeling") is naar de toggle bovenaan de kaart verhuisd. */
.plan-vseg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 11px; }
/* position: relative maakt het label de containing block van de visueel-verborgen radio
   hieronder. Zonder dat resolvet die `position: absolute`-radio naar een verre voorouder, en
   scrollt de browser bij focus (een klik) de hele scroll-container naar dat verre punt — de
   "div springt opeens heel hoog"-bug. top/left: 0 ankert 'm expliciet in de labelhoek. */
.plan-vseg__opt { position: relative; margin: 0; min-width: 0; }
.plan-vseg__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }
/* Smallere zijpadding + afbreken binnen het woord: ook een lange voornaam past zo in de
   knop (wrapt naar een tweede regel i.p.v. uit te lopen). Nooit afkappen — een naam
   half tonen is erger dan twee regels. */
.plan-vseg__label { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 40px; text-align: center; font-size: var(--text-13); font-weight: 700; line-height: 1.2; padding: 8px 6px; border-radius: 11px; color: var(--color-text-muted); background: var(--color-softer); cursor: pointer; transition: background 0.12s ease; overflow-wrap: anywhere; hyphens: auto; }
.plan-vseg__opt--jou .plan-vseg__input:checked ~ .plan-vseg__label { background: var(--color-accent); color: var(--color-on-accent); }
.plan-vseg__opt--split .plan-vseg__input:checked ~ .plan-vseg__label { background: var(--color-green); color: var(--color-on-accent); }
.plan-vseg__opt--co .plan-vseg__input:checked ~ .plan-vseg__label { background: var(--color-coparent); color: var(--color-on-accent); }
/* "Volg zorgverdeling"/"Volg vakantie" (spoor D): neutraal, geen ouder-kleur — het zijn geen
   ouder-toewijzingen maar een verwijzing naar een ander rooster/de vakantieverdeling. */
.plan-vseg__opt--neutral .plan-vseg__input:checked ~ .plan-vseg__label { background: var(--color-text); color: var(--color-on-accent); }
.plan-vseg__input:focus-visible ~ .plan-vseg__label { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ritme-keuze (2-weg): neutraal actief. */
.plan-rseg { display: flex; gap: 5px; margin-top: 9px; padding: 3px; background: var(--color-softer); border-radius: 10px; }
/* 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: 7px; border-radius: 8px; 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: 3px; }
.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-date__input { width: 100%; padding: 9px 10px; font: inherit; font-size: var(--text-13); color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 10px; }
.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: 16px; 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: 10px; }
.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: 16px; box-shadow: var(--shadow-4); padding: 14px; margin-bottom: 11px; }
.plan-feest__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.plan-feest__name { 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-btn--green { background: var(--color-green); }
.plan-btn--green:hover { background: var(--color-green); opacity: 0.92; }
.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: 8px; 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: 18px; 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: 12px; 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: 14px; 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: 12px; 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: 13px; }
.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: 13px; }
.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: 13px; 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: 13px 15px; background: var(--color-amber-soft); border-radius: 14px; font-size: var(--text-13); font-weight: 700; color: var(--color-amber); line-height: 1.45; }
.plan-edit-banner svg { flex: none; width: 18px; height: 18px; 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: 16px; 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: 12px; height: 12px; }
.plan-sign__topic-name { font-size: var(--text-sm); font-weight: 600; }
.plan-sign__declaration { padding: 13px 15px; background: var(--color-softer); border-radius: 13px; 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: 13px; }
.plan-sign__sig--awaiting { border: 1.5px solid var(--color-accent); }
.plan-sign__sig .plan-avatar { width: 30px; height: 30px; border-radius: 8px; 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: 13px; 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: 16px; 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: 17px; height: 17px; }
.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; }
.plan-signed__topic { padding: 15px 16px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 16px; box-shadow: var(--shadow-4); }
.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 + .plan-signed__clause { margin-top: 7px; }
.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: 14px; 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 + .plan-clause { margin-top: 8px; }
.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: 11px; 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: 16px; height: 16px; }
/* 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) ── */
.plan-ouders__card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 16px; box-shadow: var(--shadow-4); padding: 14px 15px; }
.plan-ouders__card + .plan-ouders__card { margin-top: 10px; }
.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: 18px; height: 18px; }
.plan-ouders__kid-edit:active { transform: scale(0.95); }
/* Binnen de kaart: label→veld strak, veld→volgend label met lucht (zelfde ritme als kosten). */
.plan-ouders__card .plan-inf__sublabel { margin: 12px 0 0; }
.plan-ouders__card .plan-inf__sublabel + .plan-field { margin-top: 8px; }
/* "Anders"-toelichting alleen tonen wanneer de anders-chip gekozen is (CSS :has, geen JS). */
.plan-ouders__anders { display: none; }
.plan-ouders__betrokken:has(.plan-hv__opt-input[value="anders"]:checked) .plan-ouders__anders { display: block; margin-top: 8px; }

/* ═══════════ Gedeelde onderwerp-editor-ritmiek ═══════════
   Eén verticale ritmiek voor álle plan-editors i.p.v. per-editor marges. Elke editor-
   container is een "stack": de editor-form (.plan-editor), de wrapper-div van informeren/
   kosten (.plan-stack) en de kaarten (overlegblok/datum/anders/matrix). Blokken staan een
   vaste afstand uit elkaar; een klein label koppelt strak (8px) aan de control eronder en
   de titel hugt z'n lede. Dit blok staat bewust áchteraan het bestand zodat het de losse
   per-element-marges overschrijft bij gelijke specificiteit → één bron van waarheid.
   (De zorg-editor houdt z'n eigen .plan-zorg.stack — die form krijgt géén .plan-editor.) */
.plan-editor,
.plan-stack,
.plan-inf__overlegblok,
.plan-inf__datum,
.plan-inf__anders,
.plan-inf__matrix { display: flex; flex-direction: column; }
/* De flex-declaratie hierboven 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; }

.plan-editor > *,
.plan-stack > *,
.plan-inf__overlegblok > *,
.plan-inf__datum > *,
.plan-inf__anders > *,
.plan-inf__matrix > * { margin-top: 0; margin-bottom: 0; }

/* Ritmiek tussen blokken: editor-niveau ruim, kaart-niveau iets compacter. */
.plan-editor > * + *,
.plan-stack > * + * { margin-top: 16px; }
.plan-inf__overlegblok > * + *,
.plan-inf__matrix > * + * { margin-top: 12px; }
.plan-inf__datum > * + *,
.plan-inf__anders > * + * { margin-top: 8px; }

/* 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; }

/* De verstuur-knop krijgt iets meer lucht dan de blok-ritmiek. */
.plan-editor > .plan-btn { margin-top: 22px; }

/* ── 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: 14px; 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: 13px; }
.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: 16px; 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: 999px; 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: 12px; padding: 10px 12px; margin: 0 0 14px; font-size: var(--text-13); color: var(--color-text-muted); line-height: 1.45; }
.vac-note svg { flex: none; width: 16px; height: 16px; color: var(--color-faint); margin-top: 1px; }

/* Volg-zorgregeling: toggle-rij + note binnen de vakantiekaart. */
.vac-follow { display: flex; align-items: center; gap: 12px; background: var(--color-softer); border-radius: 12px; padding: 10px 12px; margin: 11px 0; cursor: pointer; }
.vac-follow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vac-follow__title { font-size: var(--text-13); font-weight: 700; }
.vac-follow__sub { font-size: var(--text-11); color: var(--color-text-muted); margin-top: 1px; line-height: 1.4; }
.vac-follow__note { display: flex; gap: 9px; align-items: flex-start; background: var(--color-soft); border-radius: 11px; padding: 10px 12px; margin-bottom: 4px; font-size: var(--text-13); color: var(--color-text); line-height: 1.5; }
.vac-follow__note svg { flex: none; width: 16px; height: 16px; color: var(--color-accent); margin-top: 1px; }

/* Enkel bereik / split-blokken krijgen wat lucht boven zich. */
.plan-vac__single, .plan-vac__split { margin-top: 4px; }