/* Authenticated Family day plan. The app shell owns branding and theme selection. */
.family-dayplan {
  --ink: var(--text);
  --green: var(--accent);
  --soft: var(--accent-soft);
  --danger: color-mix(in srgb, #c44343 78%, var(--text));
  color: var(--text);
  font-family: var(--font-body);
  min-width: 0;
}
.family-dayplan * { box-sizing:border-box }
.family-dayplan button,
.family-dayplan input,
.family-dayplan select,
.family-dayplan textarea { font:inherit }
.family-dayplan button,
.family-dayplan a,
.family-dayplan input,
.family-dayplan select,
.family-dayplan textarea,
.family-dayplan summary { -webkit-tap-highlight-color:transparent }
.family-dayplan button,
.family-dayplan a,
.family-dayplan summary { touch-action:manipulation }
.family-dayplan button { cursor:pointer }
.family-dayplan button:disabled { cursor:default;opacity:.55 }
.family-dayplan a { color:var(--green) }
.family-dayplan button:focus-visible,
.family-dayplan a:focus-visible,
.family-dayplan input:focus-visible,
.family-dayplan select:focus-visible,
.family-dayplan textarea:focus-visible,
.family-dayplan summary:focus-visible { outline:3px solid var(--accent);outline-offset:4px }
.family-dayplan h1,
.family-dayplan h2,
.family-dayplan h3,
.family-dayplan p { margin:0 }
.family-dayplan h1 { font-size:clamp(1.8rem,5vw,2.6rem);font-weight:650;letter-spacing:-.055em;line-height:1.15 }
.family-dayplan h2 { font-size:1.3rem;letter-spacing:-.025em }
.family-dayplan h3 { font-size:1.06rem }
.family-dayplan p { line-height:1.55 }
.family-dayplan small { font-size:.8rem }
.family-dayplan .muted { color:var(--muted) }
.family-dayplan .eyebrow { font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted) }
.family-dayplan .sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
.family-dayplan .day-heading { display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:26px }
.family-dayplan .day-heading .eyebrow { margin-bottom:8px }
.family-dayplan .day-switch { display:flex;background:var(--soft);border-radius:99px;padding:4px;margin-bottom:25px;gap:4px }
.family-dayplan .day-switch button { flex:1;border:0;border-radius:99px;min-height:43px;background:transparent;color:var(--muted);font-size:.88rem;font-weight:600 }
.family-dayplan .day-switch button[aria-pressed=true] { background:var(--panel);color:var(--ink);box-shadow:0 2px 6px color-mix(in srgb, var(--text) 6%, transparent) }
.family-dayplan .progress-label { font-size:.8rem;color:var(--muted);white-space:nowrap }
.family-dayplan .day-progress { height:4px;background:var(--line);border-radius:4px;overflow:hidden;margin-bottom:24px }
.family-dayplan .day-progress progress { width:100%;height:4px;border:0;display:block;accent-color:var(--green) }
.family-dayplan progress::-webkit-progress-bar { background:var(--line) }
.family-dayplan progress::-webkit-progress-value { background:var(--green) }
.family-dayplan .timeline { display:flex;flex-direction:column;gap:12px }
.family-dayplan .plan-card { border:1px solid var(--line);border-radius:20px;background:var(--panel);overflow:hidden;box-shadow:var(--shadow) }
.family-dayplan .plan-card.is-current { border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) }
.family-dayplan .plan-card.is-done { background:color-mix(in srgb, var(--panel-strong), var(--accent-soft) 28%) }
.family-dayplan .plan-card>summary { list-style:none;display:flex;gap:15px;align-items:center;cursor:pointer;padding:20px;min-height:96px }
.family-dayplan .plan-card>summary::-webkit-details-marker { display:none }
.family-dayplan .plan-time { width:45px;flex-shrink:0;text-align:center;font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums;align-self:flex-start;padding-top:3px }
.family-dayplan .time-label { display:block;font-size:.61rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-top:6px;color:var(--green) }
.family-dayplan .plan-card-title { min-width:0;flex:1 }
.family-dayplan .plan-card-title h2 { font-size:1.05rem;letter-spacing:-.01em;line-height:1.35;overflow-wrap:anywhere }
.family-dayplan .plan-meta { display:flex;flex-wrap:wrap;gap:5px 10px;margin-top:5px;font-size:.76rem;color:var(--muted);line-height:1.5 }
.family-dayplan .plan-meta span { overflow-wrap:anywhere }
.family-dayplan .plan-card-title .kind-label { display:inline-block;margin-bottom:5px;font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted) }
.family-dayplan .plan-chevron { width:17px;color:var(--muted);flex-shrink:0;transition:transform .15s }
.family-dayplan .plan-card[open] .plan-chevron { transform:rotate(180deg) }
.family-dayplan .done-mark { width:25px;height:25px;border-radius:50%;background:var(--green);color:var(--bg);display:grid;place-items:center;font-size:14px;flex-shrink:0 }
.family-dayplan .card-content { padding:0 20px 20px 80px }
.family-dayplan .checklist { display:flex;flex-direction:column;gap:7px;padding:0;margin:0;list-style:none }
.family-dayplan .check-row { display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;background:var(--bg);min-height:48px;cursor:pointer;font-size:.94rem;line-height:1.45 }
.family-dayplan .check-row input { width:23px;height:23px;flex-shrink:0;accent-color:var(--green);margin:0 }
.family-dayplan .check-row:has(input:checked) { background:var(--soft);color:var(--muted) }
.family-dayplan .check-row:has(input:checked) span { text-decoration:line-through;text-decoration-thickness:1px }
.family-dayplan .check-row span { overflow-wrap:anywhere }
.family-dayplan .check-row:has(input:disabled) { cursor:default }
.family-dayplan .plan-note { font-size:.88rem;color:var(--muted);margin:12px 0;white-space:pre-wrap;overflow-wrap:anywhere }
.family-dayplan .transport-stack { display:grid;gap:8px;margin-top:14px }
.family-dayplan .journey { display:flex;gap:12px;border:1px solid var(--line);border-radius:13px;padding:13px }
.family-dayplan .journey svg { width:21px;height:21px;flex-shrink:0;margin-top:2px;color:var(--green) }
.family-dayplan .journey div { min-width:0 }
.family-dayplan .journey strong { display:block;font-size:.85rem }
.family-dayplan .journey p { font-size:.8rem;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere;margin-top:3px }
.family-dayplan .journey .journey-time { font-variant-numeric:tabular-nums;color:var(--ink) }
.family-dayplan .empty-plan { padding:40px 24px;text-align:center;border:1px dashed var(--line);border-radius:20px }
.family-dayplan .empty-plan h2 { margin-bottom:12px }
.family-dayplan .empty-plan p { color:var(--muted);font-size:.9rem }
.family-dayplan .preview-notice { border:1px solid var(--line);background:var(--accent-soft);color:var(--text);border-radius:12px;padding:12px 16px;font-size:.83rem;margin:0 0 18px }
.family-dayplan .preview-notice button { display:block;margin-top:10px }
.family-dayplan .button { display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--green);border-radius:11px;background:var(--green);color:var(--bg);padding:11px 17px;min-height:44px;font-size:.88rem;font-weight:600;line-height:1.3;text-decoration:none;cursor:pointer }
.family-dayplan .button.secondary { background:var(--panel);color:var(--ink);border-color:var(--line) }
.family-dayplan .button.ghost { background:transparent;border-color:transparent;color:var(--green) }
.family-dayplan .button.danger { background:var(--panel);color:var(--danger);border-color:var(--danger) }
.family-dayplan .icon-button { display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink) }
.family-dayplan .row { display:flex;gap:12px;align-items:center;flex-wrap:wrap }
.family-dayplan .stack { display:flex;flex-direction:column;gap:16px }
.family-dayplan .card { background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px }
.family-dayplan .field { display:flex;flex-direction:column;gap:7px;font-size:.86rem;font-weight:600;min-width:0 }
.family-dayplan .field input,
.family-dayplan .field select,
.family-dayplan .field textarea,
.family-dayplan input[type=date],
.family-dayplan input[type=time] { background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:11px 12px;min-height:44px;min-width:0;max-width:100% }
.family-dayplan .field textarea { resize:vertical;font-weight:400;min-height:76px }
.family-dayplan .field input,
.family-dayplan .field select { font-weight:400 }
.family-dayplan .badge { display:inline-flex;align-items:center;background:var(--soft);color:var(--green);border-radius:99px;padding:5px 10px;font-size:.72rem;font-weight:600 }
.family-dayplan .tabs { display:flex;gap:6px;flex-wrap:wrap }
.family-dayplan .tabs button { border:0;background:transparent;color:var(--muted);padding:10px 14px;border-radius:10px;font-weight:600;font-size:.86rem;min-height:44px }
.family-dayplan .tabs button[aria-selected=true],
.family-dayplan .tabs button.active { background:var(--soft);color:var(--green) }
.family-dayplan .list { display:grid;gap:9px }
.family-dayplan .item-row { display:flex;gap:12px;align-items:center;border:1px solid var(--line);padding:14px;border-radius:12px }
.family-dayplan .item-row>div { min-width:0 }
.family-dayplan .item-row h3,
.family-dayplan .item-row p { overflow-wrap:anywhere }
.family-dayplan dialog { border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:22px;box-shadow:0 30px 100px color-mix(in srgb, var(--bg) 35%, transparent);padding:0;width:min(640px,calc(100% - 28px));max-height:calc(100dvh - 32px);overflow:auto }
.family-dayplan dialog::backdrop { background:color-mix(in srgb, var(--bg) 66%, transparent);backdrop-filter:blur(3px) }
.family-dayplan .dialog-body { padding:28px }
.family-dayplan .dialog-header { display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px }
.family-dayplan .dialog-header h2 { font-size:1.45rem }
.family-dayplan .dialog-section { padding:22px 0;border-top:1px solid var(--line) }
.family-dayplan .dialog-section h3 { margin-bottom:10px }
.family-dayplan .dialog-section p { font-size:.88rem;color:var(--muted);margin-bottom:14px }
.family-dayplan .dialog-section:last-child { padding-bottom:0 }
.family-dayplan .dialog-footer { margin-top:22px;display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap }
@media(max-width:600px) {
  .family-dayplan .day-heading { margin-bottom:22px }
  .family-dayplan .day-heading h1 { font-size:2rem }
  .family-dayplan .plan-card>summary { padding:17px 15px;gap:12px;min-height:88px }
  .family-dayplan .plan-time { width:42px;font-size:.95rem }
  .family-dayplan .card-content { padding:0 15px 17px 15px }
  .family-dayplan .day-progress { margin-bottom:20px }
  .family-dayplan .dialog-body { padding:22px 18px }
  .family-dayplan .card { padding:17px }
  .family-dayplan .plan-card-title h2 { font-size:1.02rem }
}
@media(prefers-reduced-motion:reduce) {
  .family-dayplan * { scroll-behavior:auto!important;transition:none!important;animation:none!important }
}
@media(max-width:600px) {
  .family-dayplan .day-heading { flex-wrap:wrap }
  .family-dayplan .plan-time { width:auto;min-width:42px }
  .family-dayplan .plan-time:not(:empty) { flex-basis:max-content }
  .family-dayplan .day-switch { flex-wrap:wrap }
  .family-dayplan .day-switch button { min-width:0 }
}
@media(pointer:coarse),(max-width:900px) {
  .family-dayplan .field input,
.family-dayplan .field select,
.family-dayplan .field textarea,
.family-dayplan input[type=date],
.family-dayplan input[type=time] { font-size:max(1rem,16px) }
  .family-dayplan .icon-button { min-width:44px;min-height:44px;width:44px;height:44px }
}

/* Parent editor, preserving the tested mobile and short-viewport layout. */
.family-dayplan .parent-dialog>form { display:flex;flex-direction:column;max-height:calc(100dvh - 36px);overflow:hidden }
.family-dayplan .parent-dialog>form>.stack { overflow:auto;min-height:0;padding:8px;margin:-8px;overscroll-behavior:contain }
.family-dayplan .parent-dialog .dialog-header,
.family-dayplan .parent-dialog .dialog-footer,
.family-dayplan .parent-dialog .parent-form-error,
.family-dayplan .parent-dialog [data-storage-feedback] { flex-shrink:0 }
.family-dayplan .parent-dialog .dialog-footer { border-top:1px solid var(--line);padding-top:16px }
.family-dayplan .parent-dialog [data-storage-feedback] { margin:10px 0 0;max-height:100px;overflow:auto }
.family-dayplan .parent-workspace { display:grid;gap:22px }
.family-dayplan .parent-heading { display:flex;align-items:center;justify-content:space-between;gap:20px }
.family-dayplan .parent-heading .eyebrow { margin-bottom:7px }
.family-dayplan .parent-heading p.muted { margin-top:9px;font-size:.9rem }
.family-dayplan .parent-tabs { border-bottom:1px solid var(--line);padding-bottom:12px }
.family-dayplan .parent-tabs button { white-space:nowrap }
.family-dayplan .parent-datebar { display:flex;align-items:center;justify-content:space-between;gap:12px }
.family-dayplan .parent-datebar>p { font-size:.87rem;color:var(--muted);text-align:right }
.family-dayplan .parent-datebar input { max-width:165px }
.family-dayplan .parent-datebar .row { gap:7px }
.family-dayplan .parent-section-heading { display:flex;align-items:center;justify-content:space-between;gap:16px }
.family-dayplan .parent-section-heading p { font-size:.86rem;margin-top:7px }
.family-dayplan .parent-note { background:var(--soft);border-radius:12px;padding:13px 16px;font-size:.83rem;color:var(--muted);line-height:1.55 }
.family-dayplan .parent-day-item { display:flex;align-items:flex-start;gap:18px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px }
.family-dayplan .parent-item-time { font-size:.85rem;font-weight:650;min-width:53px;width:70px;flex-shrink:0;font-variant-numeric:tabular-nums;line-height:1.5 }
.family-dayplan .parent-item-copy { min-width:0;flex:1 }
.family-dayplan .parent-item-copy h3 { overflow-wrap:anywhere;font-size:1rem }
.family-dayplan .parent-item-copy .row { gap:7px 12px }
.family-dayplan .parent-kind { font-size:.7rem;color:var(--muted) }
.family-dayplan .parent-meta,
.family-dayplan .parent-item-copy>.muted { font-size:.8rem;margin-top:5px }
.family-dayplan .parent-item-note { white-space:pre-wrap;overflow-wrap:anywhere;margin-top:8px;font-size:.84rem;color:var(--muted) }
.family-dayplan .parent-item-actions { display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:240px }
.family-dayplan .parent-item-actions .button { padding:8px 11px;min-height:38px;font-size:.79rem }
.family-dayplan .parent-transport-summary { display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.78rem;color:var(--muted);margin:8px 0 }
.family-dayplan .parent-empty { padding:36px 24px;border:1px dashed var(--line);border-radius:16px;text-align:center }
.family-dayplan .parent-empty p { font-size:.86rem;margin-top:9px }
.family-dayplan .parent-more { font-size:.85rem;border-top:1px solid var(--line);padding:16px 0 }
.family-dayplan .parent-more summary { cursor:pointer;font-weight:600 }
.family-dayplan .parent-more p { margin:12px 0 }
.family-dayplan .parent-week-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px }
.family-dayplan .parent-week-card { display:flex;flex-direction:column;gap:11px }
.family-dayplan .parent-week-card ul { list-style:none;padding:0;margin:0;font-size:.81rem;display:grid;gap:8px;flex:1;overflow-wrap:anywhere }
.family-dayplan .parent-week-card li span { font-variant-numeric:tabular-nums;color:var(--muted);margin-right:6px }
.family-dayplan .parent-week-card .button { width:100%;font-size:.81rem }
.family-dayplan .parent-week-card .parent-meta { margin-top:auto;padding-top:4px }
.family-dayplan .parent-template-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px }
.family-dayplan .parent-template-grid h3 { overflow-wrap:anywhere }
.family-dayplan .parent-template-preview { font-size:.84rem;color:var(--muted);overflow-wrap:anywhere }
.family-dayplan .parent-template-grid .row { margin-top:auto }
.family-dayplan .parent-template-grid .button { padding:9px 12px;font-size:.8rem }
.family-dayplan .parent-holiday { display:flex;gap:20px;align-items:center;justify-content:space-between }
.family-dayplan .parent-holiday h3 { overflow-wrap:anywhere }
.family-dayplan .parent-holiday>div { min-width:0 }
.family-dayplan .parent-holiday .muted { font-size:.85rem;margin-top:6px }
.family-dayplan .parent-dialog { width:min(760px,calc(100% - 28px)) }
.family-dayplan .parent-dialog .dialog-header h2 { overflow-wrap:anywhere;line-height:1.25 }
.family-dayplan .parent-dialog .dialog-header .icon-button { flex-shrink:0 }
.family-dayplan .parent-form-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px }
.family-dayplan .parent-span { grid-column:1/-1 }
.family-dayplan .parent-editor-section { border-top:1px solid var(--line);padding-top:20px;display:grid;gap:13px }
.family-dayplan .parent-editor-section .muted { font-size:.83rem }
.family-dayplan .parent-step-list { display:grid;gap:9px }
.family-dayplan .parent-step-row { display:flex;align-items:center;gap:8px }
.family-dayplan .parent-step-row>input { flex:1;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);min-height:44px;font-size:.86rem }
.family-dayplan .parent-step-row>.row { gap:5px;flex-shrink:0 }
.family-dayplan .parent-step-row .icon-button { width:36px;height:40px }
.family-dayplan .parent-trip { border:1px solid var(--line);border-radius:12px }
.family-dayplan .parent-trip summary { padding:14px;cursor:pointer;font-size:.87rem;font-weight:600 }
.family-dayplan .parent-trip summary span { float:right;color:var(--muted);font-size:.8rem;font-weight:400 }
.family-dayplan .parent-trip .parent-form-grid { padding:4px 14px 16px }
.family-dayplan .parent-scope { border:1px solid var(--line);border-radius:12px;margin:0;padding:14px 16px;min-width:0;display:grid;gap:12px }
.family-dayplan .parent-scope legend { font-size:.9rem;font-weight:650;padding:0 5px }
.family-dayplan .parent-scope>label { display:flex;align-items:flex-start;gap:10px;font-size:.86rem;line-height:1.45;cursor:pointer }
.family-dayplan .parent-scope input { width:18px;height:18px;flex-shrink:0;accent-color:var(--green);margin:2px 0 0 }
.family-dayplan .parent-scope p { font-size:.78rem;color:var(--muted) }
.family-dayplan .parent-weekday-picker { display:flex;gap:8px;flex-wrap:wrap }
.family-dayplan .parent-weekday-picker label { display:flex;gap:7px;align-items:center;cursor:pointer;font-size:.83rem;border:1px solid var(--line);border-radius:8px;padding:9px }
.family-dayplan .parent-draft-item { display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:12px }
.family-dayplan .parent-draft-item>div { min-width:0 }
.family-dayplan .parent-draft-item h3 { font-size:.94rem;overflow-wrap:anywhere }
.family-dayplan .parent-draft-item p { font-size:.78rem;margin-top:5px }
.family-dayplan .parent-draft-item .row { gap:5px;justify-content:flex-end }
.family-dayplan .parent-draft-item .button { font-size:.8rem;padding:9px 10px;min-height:38px }
.family-dayplan .parent-form-error { border:1px solid var(--danger);color:var(--danger);padding:12px 14px;border-radius:10px;font-size:.86rem;line-height:1.5;margin-top:16px;overflow-wrap:anywhere }
.family-dayplan .parent-form-error[hidden] { display:none }
@media(max-width:900px) {
  .family-dayplan .parent-day-item { flex-wrap:wrap }
  .family-dayplan .parent-item-actions { margin-left:auto;max-width:none }
  .family-dayplan .parent-week-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .family-dayplan .parent-holiday { align-items:flex-start;flex-direction:column }
  .family-dayplan .parent-draft-item { align-items:flex-start;flex-direction:column }
  .family-dayplan .parent-draft-item>.row { align-self:flex-end }
}
@media(max-width:600px) {
  .family-dayplan .parent-workspace { gap:18px }
  .family-dayplan .parent-heading { align-items:flex-start;gap:14px }
  .family-dayplan .parent-heading h1 { font-size:2rem }
  .family-dayplan .parent-heading>.button { font-size:.78rem;max-width:115px;padding:10px }
  .family-dayplan .parent-tabs { gap:2px;justify-content:space-between }
  .family-dayplan .parent-tabs button { font-size:.76rem;padding:9px 8px }
  .family-dayplan .parent-datebar { align-items:flex-start;flex-direction:column }
  .family-dayplan .parent-datebar>p { font-size:.8rem }
  .family-dayplan .parent-datebar .row { gap:5px }
  .family-dayplan .parent-datebar input { width:145px;padding:10px 8px }
  .family-dayplan .parent-datebar .button { padding:10px 12px }
  .family-dayplan .parent-section-heading { flex-wrap:wrap;gap:13px }
  .family-dayplan .parent-section-heading h2 { font-size:1.2rem }
  .family-dayplan .parent-section-heading .button { font-size:.8rem }
  .family-dayplan .parent-toolbar { gap:8px }
  .family-dayplan .parent-toolbar .button { font-size:.8rem;padding:10px 12px }
  .family-dayplan .parent-day-item { padding:17px 14px;gap:12px }
  .family-dayplan .parent-item-time { width:52px;min-width:52px;font-size:.78rem }
  .family-dayplan .parent-item-actions { flex-basis:100% }
  .family-dayplan .parent-week-grid,
.family-dayplan .parent-template-grid,
.family-dayplan .parent-form-grid { grid-template-columns:1fr }
  .family-dayplan .parent-span { grid-column:auto }
  .family-dayplan .parent-step-row { align-items:flex-start;flex-wrap:wrap }
  .family-dayplan .parent-step-row>input { flex-basis:calc(100% - 1px) }
  .family-dayplan .parent-step-row>.row { margin-left:auto }
  .family-dayplan .parent-trip summary span { float:none;margin-left:15px }
  .family-dayplan .parent-dialog .dialog-footer { justify-content:stretch }
  .family-dayplan .parent-dialog .dialog-footer>.button { flex:1 }
  .family-dayplan .parent-week-card .parent-meta { margin-top:0 }
  .family-dayplan .parent-weekday-picker label { font-size:.8rem }
  .family-dayplan .parent-draft-item .row { flex-wrap:wrap }
}
.family-dayplan .parent-checklist { margin-top:10px;font-size:.82rem }
.family-dayplan .parent-checklist summary { cursor:pointer;color:var(--green);padding:5px 0 }
.family-dayplan .parent-checklist ul { list-style:none;padding:7px 0 0;margin:0;display:grid;gap:6px }
.family-dayplan .parent-checklist li { display:flex;gap:8px;align-items:flex-start;padding:8px;border-radius:8px;background:var(--bg) }
.family-dayplan .parent-checklist li>span:nth-child(2) { flex:1;overflow-wrap:anywhere }
.family-dayplan .parent-checklist li small { font-size:.68rem;color:var(--muted) }
.family-dayplan .parent-checklist li.is-done>span:nth-child(2) { text-decoration:line-through;color:var(--muted) }
@media(max-width:600px) {
  .family-dayplan .parent-datebar>p { display:none }
  .family-dayplan .parent-layout .family-selector { margin-bottom:18px }
  .family-dayplan .parent-workspace .parent-section-heading>div>p { margin-top:0 }
}
.family-dayplan .parent-dialog { max-width:calc(100% - 28px) }
.family-dayplan .parent-heading { flex-wrap:wrap }
.family-dayplan .parent-heading>div { min-width:0 }
.family-dayplan .parent-heading h1 { overflow-wrap:anywhere }
@media(pointer:coarse),(max-width:900px) {
  .family-dayplan .parent-step-row>input { font-size:max(1rem,16px) }
  .family-dayplan .parent-step-row .icon-button { width:44px;height:44px }
  .family-dayplan .parent-item-actions .button,
.family-dayplan .parent-draft-item .button { min-height:44px }
  .family-dayplan .parent-scope>label,
.family-dayplan .parent-weekday-picker label { min-height:44px;align-items:center }
}
@media(max-height:440px) {
  .family-dayplan .parent-dialog { max-height:calc(100dvh - 16px);scroll-padding:12px 0 100px }
  .family-dayplan .parent-dialog>form { display:block;max-height:none;overflow:visible }
  .family-dayplan .parent-dialog>form>.stack { overflow:visible;min-height:0 }
  .family-dayplan .parent-dialog .dialog-footer { position:sticky;bottom:0;background:var(--panel);padding-bottom:12px;z-index:1 }
}
@media(max-width:600px) {
  .family-dayplan .parent-heading>.button { max-width:100% }
  .family-dayplan .parent-datebar .field { max-width:100% }
  .family-dayplan .parent-datebar input { width:9.2em;max-width:100% }
}
.family-dayplan .parent-dialog .parent-form-error { scroll-margin-block:12px 100px }

/* Native dialogs must stay opaque; a translucent shell panel is for cards only. */
.family-dayplan dialog,
.family-dayplan .parent-dialog .dialog-footer { background: var(--panel-strong); }
.family-dayplan .child-dayplan { width: min(100%, 640px); margin-inline: auto; }
.family-dayplan .tomorrow-note { margin: 0 0 18px; }
.family-dayplan .child-save-feedback { margin: 0 0 18px; color: var(--muted); }
.family-dayplan [hidden] { display: none !important; }
.family-dayplan [aria-busy="true"] { cursor: progress; }
.family-dayplan .button,
.family-dayplan .icon-button,
.family-dayplan .day-switch button { min-height: 44px; }
.family-dayplan input[type="checkbox"],
.family-dayplan input[type="radio"] { flex-shrink: 0; }
.family-dayplan .parent-dialog .parent-form-error { max-height: 28vh; overflow: auto; }
.family-dayplan .parent-heading,
.family-dayplan .parent-section-heading,
.family-dayplan .day-heading { min-width: 0; flex-wrap: wrap; }
.family-dayplan .day-heading > div { min-width: 0; }
.family-dayplan .day-heading h1 { overflow-wrap: anywhere; }
.family-dayplan .day-switch { flex-wrap: wrap; }
.family-dayplan .day-switch button { min-width: 0; }
.family-dayplan summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; }
.family-dayplan .parent-dialog .dialog-header { flex-wrap: nowrap; }
@media (max-width: 600px) {
  .family-dayplan .plan-card > summary { padding: 17px 15px; gap: 12px; min-height: 88px; }
  .family-dayplan .plan-time { width: auto; min-width: 42px; flex-basis: max-content; }
  .family-dayplan .card-content { padding: 0 15px 17px; }
}

/* Grid children and date controls must shrink with the Family shell at large text sizes. */
.family-dayplan .parent-workspace { grid-template-columns: minmax(0, 1fr); }
.family-dayplan .parent-workspace > *,
.family-dayplan .parent-datebar > .row { min-width: 0; max-width: 100%; }
.family-dayplan .button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.family-dayplan .parent-item-time { width: 4.5em; min-width: 3.7em; max-width: 100%; overflow-wrap: anywhere; }

/* Authenticated shell controls and the optional copy from existing routines. */
.family-dayplan .dayplan-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: .84rem;
}
.family-dayplan .dayplan-toolbar [data-dayplan-status] { flex: 1 1 12rem; overflow-wrap: anywhere; }
.family-dayplan .dayplan-toolbar button,
.family-dayplan .dayplan-toolbar a { min-height: 44px; display: inline-flex; align-items: center; }
.family-dayplan .dayplan-toolbar a { text-underline-offset: .2em; }
.family-dayplan [data-dayplan-header] { display: grid; gap: 12px; margin-bottom: 20px; }
.family-dayplan [data-dayplan-header]:empty { display: none; }
.family-dayplan [data-import-routines] { justify-self: start; min-height: 44px; max-width: 100%; white-space: normal; }
.family-dayplan .family-selector { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.family-dayplan .family-selector:empty { display: none; }
.family-dayplan .family-selector button {
  min-height: 44px;
  max-width: 100%;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  overflow-wrap: anywhere;
}
.family-dayplan .family-selector button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.family-dayplan .legacy-calendar { display: grid; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.family-dayplan .legacy-calendar .plan-card { padding: 16px 18px; box-shadow: none; }
.family-dayplan .legacy-calendar strong { display: block; overflow-wrap: anywhere; }
.family-dayplan .legacy-calendar p { color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.family-dayplan .legacy-calendar article p { margin-top: 8px; }
.family-dayplan .storage-notice { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--accent-soft); color: var(--text); font-size: .88rem; line-height: 1.5; overflow-wrap: anywhere; }
.family-dayplan .plan-dialog { width: min(640px, calc(100% - 28px)); max-width: calc(100% - 28px); }
.family-dayplan .plan-dialog[open] { display: flex; flex-direction: column; overflow: hidden; max-height: calc(100dvh - 24px); }
.family-dayplan .plan-dialog > form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.family-dayplan .plan-dialog .dialog-body { display: grid; gap: 16px; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 24px; }
.family-dayplan .plan-dialog h2 { overflow-wrap: anywhere; }
.family-dayplan .plan-dialog .dialog-footer { flex-shrink: 0; margin: 0; padding: 16px 24px; border-top: 1px solid var(--line); background: var(--panel-strong); }
.family-dayplan .plan-dialog .dialog-footer button { min-height: 44px; max-width: 100%; white-space: normal; }
.family-dayplan .plan-dialog > [data-storage-feedback] { flex-shrink: 0; max-height: 28dvh; overflow: auto; margin: 12px 16px; }
/* This existing child navigation is outside the day-plan root in the app shell. */
.dayplan-child-links { display: flex; flex-wrap: wrap; gap: 10px; width: min(100%, 640px); margin-inline: auto; padding-block: 18px; }
.dayplan-child-links .ghost { min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .family-dayplan .dayplan-toolbar { font-size: .8rem; }
  .family-dayplan .dayplan-toolbar [data-dayplan-status] { flex-basis: 100%; }
  .family-dayplan .plan-dialog .dialog-body { padding: 20px 18px; }
  .family-dayplan .plan-dialog .dialog-footer { padding: 14px 18px; }
  .family-dayplan .plan-dialog .dialog-footer button { flex: 1; }
}

.family-dayplan .plan-dialog .check-row { overflow-wrap: anywhere; min-width: 0; }

.family-dayplan .plan-dialog .dialog-footer button { padding: 10px 18px; border-radius: 999px; }
.family-dayplan .plan-dialog .dialog-footer button:not(.primary) { border: 1px solid var(--line); background: var(--panel); color: var(--text); }

/* Compact daily stream: retain readable text and touch targets, remove empty space. */
.family-dayplan .child-dayplan .day-heading { align-items: center; gap: 4px 12px; margin-bottom: 8px; }
.family-dayplan .child-dayplan .day-heading h1 { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; }
.family-dayplan .child-dayplan .progress-label { font-size: .8rem; }
.family-dayplan .child-dayplan .day-switch { padding: 3px; margin-bottom: 10px; }
.family-dayplan .child-dayplan .day-switch button { min-height: 44px; font-size: .9rem; }
.family-dayplan .child-dayplan .day-progress { margin-bottom: 10px; }
.family-dayplan .child-dayplan .tomorrow-note,
.family-dayplan .child-dayplan .child-save-feedback { margin-bottom: 10px; font-size: .83rem; }
.family-dayplan .timeline { gap: 8px; }
.family-dayplan .plan-card { border-radius: 13px; box-shadow: none; }
.family-dayplan .plan-card.is-current { box-shadow: 0 0 0 1px var(--accent); }
.family-dayplan .plan-card > summary { min-height: 64px; padding: 10px 12px; gap: 12px; }
.family-dayplan .plan-time { width: 3.1em; min-width: 3.1em; flex-basis: 3.1em; padding-top: 1px; font-size: .9rem; line-height: 1.3; overflow-wrap: anywhere; }
.family-dayplan .time-label { font-size: .68rem; letter-spacing: .02em; margin-top: 3px; }
.family-dayplan .plan-card-title h2 { font-size: 1rem; line-height: 1.35; }
.family-dayplan .plan-meta { margin-top: 3px; gap: 2px 9px; font-size: .78rem; }
.family-dayplan .plan-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.family-dayplan .plan-meta svg { width: 13px; height: 13px; flex-shrink: 0; }
.family-dayplan .card-content { padding: 0 12px 12px 68px; }
.family-dayplan .checklist { gap: 5px; }
.family-dayplan .check-row { min-height: 48px; padding: 9px 10px; border-radius: 9px; gap: 10px; font-size: 1rem; }
.family-dayplan .plan-note { margin: 4px 0 10px; }
.family-dayplan .transport-stack { gap: 6px; margin-top: 10px; }
.family-dayplan .transport-stack:empty { display: none; }
.family-dayplan .journey { padding: 10px; gap: 9px; border-radius: 9px; }
.family-dayplan .calendar-readonly { color: var(--muted); font-size: .8rem; }
.family-dayplan .empty-plan { padding: 22px 16px; border-radius: 13px; }
.family-dayplan .empty-plan h2 { font-size: 1rem; margin-bottom: 6px; }
.family-dayplan .feed-messages { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.family-dayplan .feed-messages > summary,
.family-dayplan .feed-message > summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; min-height: 48px; padding: 10px 12px; font-size: 1rem; }
.family-dayplan .feed-messages > summary::-webkit-details-marker,
.family-dayplan .feed-message > summary::-webkit-details-marker { display: none; }
.family-dayplan .feed-messages > summary > span:first-of-type,
.family-dayplan .feed-message > summary > span:first-of-type { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.family-dayplan .feed-icon { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.family-dayplan .feed-message-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px; }
.family-dayplan .feed-count,
.family-dayplan .message-read-status { font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.family-dayplan .message-list { padding: 0 10px 10px; display: grid; gap: 6px; }
.family-dayplan .feed-message { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.family-dayplan .feed-message.is-unread .message-read-status { color: var(--accent); font-weight: 600; }
.family-dayplan .feed-message > summary { font-size: .94rem; }
.family-dayplan .feed-messages[open] > summary > .plan-chevron,
.family-dayplan .feed-message[open] > summary > .plan-chevron { transform: rotate(180deg); }
.family-dayplan .message-body { padding: 0 12px 12px; }
.family-dayplan .message-body p { font-size: .94rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.family-dayplan .message-body .button { margin-top: 10px; min-width: 76px; min-height: 44px; }
.family-dayplan .feed-day-event { display: flex; align-items: center; min-height: 64px; gap: 12px; padding: 10px 12px; }
.family-dayplan .food-list { list-style: none; margin: 0; padding: 0 12px 12px; display: grid; gap: 8px; }
.family-dayplan .food-list li { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.family-dayplan .food-list li > div { flex: 1 1 10rem; min-width: 0; }
.family-dayplan .food-list strong { font-size: .94rem; overflow-wrap: anywhere; }
.family-dayplan .food-list p { font-size: .88rem; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 3px; }
.family-dayplan [data-dayplan-timer-slot]:not(:empty) { margin-top: 8px; }
.family-dayplan .allowance-check-row:has(input:checked) span { text-decoration: none; }
.family-dayplan .allowance-check-row + .calendar-readonly { margin-top: 8px; }

/* The same compact rhythm in adult planning, with unchanged editor controls. */
.family-dayplan .parent-workspace { gap: 14px; }
.family-dayplan .parent-heading { gap: 12px; }
.family-dayplan .parent-heading h1 { font-size: clamp(1.4rem, 3vw, 1.8rem); letter-spacing: -.03em; }
.family-dayplan .parent-tabs { padding-bottom: 8px; }
.family-dayplan .parent-day-item { padding: 14px; gap: 12px; border-radius: 13px; }
.family-dayplan .parent-item-note { margin-top: 5px; }
.family-dayplan .parent-transport-summary { margin-block: 5px; }
.family-dayplan .parent-more { padding-block: 10px; }
.family-dayplan .parent-more > summary,
.family-dayplan .parent-trip > summary { min-height: 44px; }
.family-dayplan .parent-more > summary { padding-block: 12px; }
.family-dayplan .parent-tabs button { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .family-dayplan .card-content { padding-left: 12px; }
  .family-dayplan .parent-day-item { padding: 12px; gap: 10px; }
  .family-dayplan .parent-heading .button { padding-inline: 12px; }
}