@layer theme,legacy,utilities;
@layer legacy{
/* Household overview: actionable inbox, today's progress, then optional detail. */
.overview-dashboard{max-width:840px;margin-inline:auto;color:var(--ink);font-variant-numeric:tabular-nums;min-width:0}
.overview-dashboard button,.overview-dashboard summary{min-height:44px;min-width:44px;white-space:normal;line-height:1.5;overflow-wrap:anywhere}
.overview-dashboard .text-btn{margin:0;padding:8px 0;font-size:0.85rem;text-align:start;background:transparent;color:var(--action)}
.overview-icon{width:1em;height:1em;flex:none;vertical-align:middle}
.overview-toolbar p{font-size:0.8rem;color:var(--muted);margin:0 0 10px;line-height:1.6}
.overview-inbox{margin-bottom:16px}
.overview-inbox>h2{display:flex;align-items:center;gap:8px;font-size:0.85rem;font-weight:700;color:var(--warning);margin:0 0 10px}
.overview-clear{display:flex;align-items:center;gap:8px;font-size:0.85rem;line-height:1.6;color:var(--muted);margin:0}
.overview-clear .overview-icon{color:var(--success)}
.overview-approval{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;margin-block:10px}
.overview-approval-title{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.overview-approval h3{font-size:1.1rem;font-weight:700;line-height:1.5;overflow-wrap:anywhere;margin:0;min-width:0}
.overview-approval-title>span{color:var(--muted);font-size:0.85rem;flex:none}
.overview-approval p{font-size:0.88rem;color:var(--muted);line-height:1.7;margin:6px 0 12px;overflow-wrap:anywhere}
.overview-approval-actions{display:flex;flex-wrap:wrap;gap:8px}
.overview-approval-actions button{font-size:0.88rem;padding:9px 12px;flex:1 1 auto}
.overview-approval-actions .primary{background:var(--action);color:var(--on-action);border-color:var(--action)}
.overview-approval-actions .secondary{background:var(--surface);color:var(--action);border-color:var(--muted);flex:0 1 auto}
.overview-deliveries,.overview-week{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:start;padding:12px 0;background:transparent;border:0;border-radius:0;color:var(--ink);font-size:1rem;font-weight:700}
.overview-deliveries{color:var(--action);border-bottom:1px solid var(--line)}
.overview-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap}
.overview-section-head h2{font-size:1.05rem;line-height:1.5;margin:0;font-weight:700}
.overview-section-head>span{font-size:0.82rem;color:var(--muted)}
.overview-child{padding:10px 0;border-bottom:1px solid var(--line);min-width:0}
.overview-child-name{display:flex;align-items:center;gap:12px;width:100%;min-height:64px!important;padding:0;text-align:start;background:transparent;border:0;border-radius:0;color:var(--ink)}
.overview-avatar{width:40px;height:40px;border-radius:50%;background:var(--raised);color:var(--action);display:grid;place-items:center;flex:none;font-size:1.05rem;font-weight:700;overflow:hidden}
.overview-avatar img{width:100%;height:100%;object-fit:cover}
.overview-child-main{flex:1;min-width:0;display:block}
.overview-child-title{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.overview-child-title strong{font-size:1.05rem;font-weight:700}
.overview-child-title small{font-size:0.85rem;color:var(--muted);font-weight:400}
.overview-child-name>.overview-icon,.overview-week>.overview-icon{color:var(--muted)}
.overview-progress{display:flex;height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin:8px 0}
.overview-progress i{display:block;height:100%;flex:none}
.overview-progress .approved{background:var(--success)}.overview-progress .pending{background:var(--warning)}
.overview-legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:0.8rem;font-weight:600;color:var(--muted);line-height:1.6}
.overview-legend>span{display:inline-flex;align-items:center;gap:4px}
.overview-legend .approved{color:var(--success)}.overview-legend .pending{color:var(--warning)}
.overview-no-tasks{display:block;font-size:0.85rem;color:var(--muted);margin-block:8px}
.overview-child-notes{display:flex;flex-wrap:wrap;gap:0 16px;justify-content:space-between}.overview-child-notes:empty{display:none}
.overview-child-notes .text-btn{font-size:0.8rem;max-width:100%;text-decoration:underline;text-underline-offset:3px}
.overview-context{font-size:0.8rem;line-height:1.6;color:var(--muted);margin:4px 0}
.overview-planning{margin-block:10px 0}
.overview-week small{display:block;font-size:0.82rem;color:var(--muted);font-weight:400;margin-top:3px}
.overview-dashboard .school-day-note{border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;padding:0;margin:0;font-size:0.85rem}
.overview-dashboard .school-day-note summary{padding-block:10px;font-size:0.85rem;line-height:1.7;cursor:pointer}
.overview-dashboard .school-day-note :is(p,small){font-size:0.82rem;line-height:1.6}
.overview-dashboard .school-day-note a{display:inline-flex;align-items:center;min-height:44px}
.overview-more>details{border-top:1px solid var(--line)}
.overview-more>details>summary{display:flex;align-items:center;min-height:56px;padding-block:8px;cursor:pointer;list-style:none}
.overview-more>details>summary>span{min-width:0;display:block}
.overview-more summary strong{font-size:1rem;font-weight:700;line-height:1.5}
.overview-more summary small{display:block;font-size:0.82rem;line-height:1.6;color:var(--muted);font-weight:400;margin-top:3px;overflow-wrap:anywhere}
.overview-detail-body{padding:0 0 6px;min-width:0}
.overview-dashboard .allocation-panel{padding:0 0 18px;margin:0;border:0;background:transparent;border-radius:0}
.overview-events,.overview-balances{list-style:none;padding:0;margin:0}
.overview-events li{border-bottom:1px solid var(--line);padding:12px 0}
.overview-events p{margin:0 0 4px;font-size:0.88rem;line-height:1.65;overflow-wrap:anywhere}
.overview-events time{font-size:0.82rem;color:var(--muted)}
.overview-balances li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:12px 0;border-bottom:1px solid var(--line);font-size:0.88rem}
.overview-balances strong{font-weight:600}
.overview-add{padding-block:12px}
.overview-add button.secondary{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:10px 16px;font-size:1rem;border:1px solid var(--action);background:transparent;color:var(--action)}
.overview-empty{padding:12px 0;line-height:1.6}
.overview-dashboard :is(button,summary,a,h2):focus-visible{outline:3px solid var(--action);outline-offset:3px}
@media(prefers-contrast:more){.overview-approval{border-width:2px}}
@media(max-width:760px){.parent-mode[data-page=dashboard] header{margin-bottom:4px}}
/* The overview's desktop navigation uses the same semantic action pair as its buttons. */
:root[data-palette] .parent-mode[data-page=dashboard] aside nav button.active{background:var(--action);color:var(--on-action)}
/* Compact weekly comparison: paired columns share a zero baseline and scale. */
.overview-week-chart{margin:0;padding:0}
.overview-week-columns{display:grid;grid-template-columns:repeat(var(--day-count),minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0}
.overview-week-columns li{min-width:0;text-align:center;color:var(--muted);font-size:0.8rem}
.overview-week-bars{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:76px;border-bottom:1px solid var(--line)}
.overview-week-bars i{display:block;width:45%;border-radius:3px 3px 0 0}
.overview-week-chart .planned{background:var(--line)}
.overview-week-chart .approved{background:var(--success)}
.overview-week-columns time{display:block;margin-top:6px;line-height:1.5;overflow-wrap:anywhere}
.overview-week-key{display:flex;gap:16px;margin:8px 0 0;font-size:0.8rem;color:var(--muted)}
.overview-week-key span{display:flex;align-items:center;gap:5px}
.overview-week-key i{width:10px;height:10px;border-radius:2px}
.overview-chart-values summary{font-size:0.8rem;color:var(--muted);cursor:pointer}
.overview-chart-values ul{font-size:0.82rem;line-height:1.8;padding-inline-start:20px}
:root[data-palette] .overview-dashboard .overview-add button.secondary{border-color:var(--action);background:transparent}

.overview-chart-footer{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex-wrap:wrap}
.overview-chart-footer>details{flex:1 1 160px;min-width:0}
.overview-chart-footer>button{flex:none}
.overview-chart-footer summary{display:flex;align-items:center;margin:0;padding-block:0;min-height:44px}
.overview-chart-footer ul{margin-block:4px 8px}

}