/* Compact financial view: one total, proportional categories, an independent plan. */
.analytics-panel { padding:20px; border-radius:20px; margin-bottom:0; }
.analytics-summary { margin:18px 0 4px; gap:8px 20px; align-items:flex-end; }
.analytics-summary #chart-total { font-size:32px; letter-spacing:-1px; line-height:1.18; }
.analytics-summary #chart-total-label { font-size:12px; }
#chart-refunds { margin:0 0 3px auto; max-width:55%; font-size:11px; text-align:right; line-height:1.5; }
#chart-status { min-height:18px; margin:0; font-size:11px; }
#spending-chart { min-height:260px; }
.analytics-chart { display:flex; flex-direction:column; min-height:260px; }
.analytics-chart[data-type=pie]:has(.chart-legend) { display:grid; grid-template-columns:minmax(170px,.7fr) minmax(0,1.3fr); align-items:center; column-gap:28px; grid-template-rows:minmax(0,1fr) auto auto; }
.analytics-chart[data-type=pie]:has(.chart-legend) > .chart-graphic,.analytics-chart[data-type=pie]:has(.chart-legend) > .chart-legend { grid-row:1; }
.analytics-chart[data-type=pie]:has(.chart-legend) > .chart-note { grid-row:2; }
.analytics-chart[data-type=pie]:has(.chart-legend) > .chart-data { grid-row:3; }
.chart-graphic { min-width:0; }
.chart-graphic svg { touch-action:pan-y; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.chart-scroll { max-height:350px; scrollbar-width:thin; }
.chart-grid { stroke:var(--surface-outline); stroke-dasharray:2 5; }
.chart-zero { stroke:var(--line); }
.chart-center { fill:var(--ink); font-size:30px; font-weight:500; letter-spacing:-1px; }
.chart-center-label { fill:var(--muted); font-size:10px; }
.chart-slice { cursor:pointer; transition:opacity 150ms ease; }
.analytics-chart .chart-legend { display:grid; grid-template-columns:1fr; gap:0; margin:0; padding:0; min-width:0; }
.chart-legend li { padding:0; min-width:0; border:0; display:block; }
.chart-legend-button { position:relative; display:grid; grid-template-columns:7px minmax(0,1fr) auto; align-items:center; gap:9px; width:100%; min-height:42px; padding:10px 0; border:0; border-radius:0; color:var(--ink); background:transparent; font:inherit; text-align:left; }
.chart-legend-button::after { content:""; position:absolute; left:16px; bottom:0; width:calc((100% - 16px) * var(--category-share-number,0)); height:2px; border-radius:2px; background:var(--category-color); opacity:.22; }
.chart-legend-button[aria-pressed=true] { color:var(--on-accent-soft); }
.chart-legend-button[aria-pressed=true]::after { opacity:.85; }
.chart-legend-button:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:6px; }
.chart-swatch { width:6px; height:6px; border-radius:50%; }
.chart-legend-name { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:400; }
.chart-emoji { margin-right:6px; font-size:15px; }
.chart-legend-value { display:flex; flex-direction:row; align-items:baseline; gap:10px; font-size:12px; font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums; }
.chart-legend-value small { min-width:35px; font-size:10px; font-weight:400; color:var(--muted); text-align:right; margin:0; }
.chart-note { grid-column:1/-1; margin:10px 0 0; font-size:11px; line-height:1.5; color:var(--muted); }
.chart-data { grid-column:1/-1; align-self:stretch; margin-top:auto; padding-top:12px; border:0; }
.chart-data summary { min-height:36px; padding:0; font-size:11px; justify-content:space-between; gap:16px; list-style:none; }
.chart-data summary::before,.chart-data summary::-webkit-details-marker { display:none; }
.chart-disclosure-icon { flex:0 0 7px; width:7px; height:7px; margin-right:4px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform 160ms ease; }
.chart-data[open] .chart-disclosure-icon { transform:rotate(225deg); }
.chart-data table { font-size:12px; }
.chart-data th,.chart-data td { padding:8px 2px; }
.chart-cursor { stroke:var(--muted); stroke-width:1; stroke-dasharray:3 4; opacity:.45; pointer-events:none; }
.chart-active-point { pointer-events:none; }
.chart-inspector { min-height:32px; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:0 2px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.chart-inspector strong { color:var(--ink); font-weight:500; }
.chart-graphic svg:focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-radius:8px; }
.chart-empty { min-height:160px; display:grid; place-content:center; margin:0; padding:20px; font-size:13px; }
/* Keep the plan below the chart, with denser comparison rows. */
.plan-section { --plan-row-bg:#f7f7f8; --plan-fill:#e8e8eb; --plan-over-bg:#f1dfe1; --plan-over-ink:#843842; margin-top:24px; padding-top:0; border:0; }
html[data-theme=night] .plan-section { --plan-row-bg:#24262b; --plan-fill:#34363c; --plan-over-bg:#493237; --plan-over-ink:#ffc2ca; }
.plan-section > .plan-header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:20px; margin-bottom:16px; }
.plan-header h2 { margin:0; }
.plan-currencies { min-width:0; }
.plan-currencies .currency-chips { margin:0; gap:4px; }
.plan-currencies .chip { padding:7px 11px; min-height:36px; }
.plan-header #plan-month-picker { min-height:40px; font-size:13px; }
.plan-section h2 { font-size:19px; letter-spacing:-.3px; }
.plan-section .plan-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; grid-column:1/-1; padding:16px 0; border-radius:16px; background:var(--bg); }
.plan-section .plan-overview > div { min-width:0; display:grid; grid-template-rows:16px auto; align-content:start; gap:6px; padding:0 20px; }
.plan-section .plan-overview > div + div { border:0; border-left:1px solid var(--surface-outline); padding-top:0; }
.plan-section .plan-overview p { font-size:11px; line-height:16px; margin:0; }
.plan-section .plan-overview strong { display:block; font-size:20px; line-height:26px; font-weight:500; letter-spacing:-.5px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow-x:auto; scrollbar-width:none; }
.plan-section .plan-remaining { grid-column:auto; }
.plan-remaining.is-over strong { color:var(--danger); }
/* The entire plan row is the progress track. Content stays above the fill. */
.plan-section .plan-list { display:grid; overflow:visible; gap:8px; padding:0; border:0; border-radius:0; background:transparent; }
.plan-section .plan-row { position:relative; overflow:hidden; isolation:isolate; min-width:0; padding:8px 12px; border:0; border-radius:14px; background:var(--plan-row-bg); color:var(--ink); width:100%; text-align:left; font:inherit; cursor:pointer; transition:background-color .25s ease,transform .22s cubic-bezier(.22,1,.36,1); }
.plan-progress-fill { position:absolute; z-index:-1; inset:0 auto 0 0; width:0; background:var(--plan-fill); transition:width 350ms cubic-bezier(.22,1,.36,1),background-color 250ms ease; }
.plan-section .plan-row.is-over,.plan-section .plan-row.is-over .plan-progress-fill { background:var(--plan-over-bg); }
.plan-section .plan-row.is-over .plan-spent { color:var(--plan-over-ink); }
.plan-section .plan-row-top { min-height:40px; gap:10px; position:relative; }
.plan-section .plan-category { min-width:0; font-size:13px; gap:8px; font-weight:400; }
.plan-section .plan-category > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plan-section .category-glyph { width:24px; height:24px; flex:0 0 24px; font-size:19px; background:transparent; }
.plan-section .plan-amount { gap:5px; font-size:13px; flex-shrink:0; }
.plan-section .plan-amount small { font-size:11px; color:var(--ink); opacity:.7; }
.plan-edit { display:grid; place-items:center; width:0; opacity:0; overflow:hidden; transform:translateX(-8px); color:inherit; font-size:14px; }
.plan-section .plan-amount { gap:0; }
.plan-section .plan-amount small { margin-left:5px; }
.plan-section .plan-row:disabled { cursor:default; opacity:1; }
.plan-section .plan-row:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
html[data-input-mode="pointer"] .plan-section .plan-row:focus { outline:none; }
@media(hover:hover) and (pointer:fine){
 .plan-section .plan-row:not(:disabled):hover { transform:scale(1.0125); z-index:1; background:color-mix(in srgb,var(--plan-row-bg),var(--ink) 4%); }
 .plan-section .plan-row.is-over:not(:disabled):hover { background:color-mix(in srgb,var(--plan-over-bg),var(--ink) 4%); }
 .plan-section .plan-row:not(:disabled):hover .plan-progress-fill { filter:brightness(.98); }
 .plan-section .plan-row:not(:disabled):hover .plan-edit { width:28px; opacity:.8; transform:translateX(0); }
}
.plan-section .plan-row:not(:disabled):focus-visible .plan-edit { width:28px; opacity:.8; transform:translateX(0); }
@media(prefers-reduced-motion:no-preference){.plan-edit { transition:width .22s cubic-bezier(.22,1,.36,1),opacity .18s,transform .22s cubic-bezier(.22,1,.36,1); }}
@media(min-width:1100px){.plan-section .plan-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; }}
@media(max-width:800px){
 .analytics-panel { padding:16px; border-radius:18px; }
 .analytics-summary { margin-top:16px; }
 .analytics-summary #chart-total { font-size:30px; }
 #chart-refunds { font-size:10px; }
 .analytics-chart[data-type=pie]:has(.chart-legend) { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto minmax(0,1fr); gap:0; }
 .analytics-chart[data-type=pie]:has(.chart-legend) > .chart-legend { grid-row:2; }
 .analytics-chart[data-type=pie]:has(.chart-legend) > .chart-note { grid-row:3; }
 .analytics-chart[data-type=pie]:has(.chart-legend) > .chart-data { grid-row:4; }
 .chart-graphic { width:100%; }
 .chart-legend-button { min-height:40px; }
 .chart-data { padding-top:10px; }
 .plan-section { margin-top:20px; padding-top:0; }
 .plan-section > .plan-header { grid-template-columns:1fr auto; gap:14px 12px; }
 .plan-header #plan-month-picker { grid-column:2; grid-row:1; }
 .plan-currencies { grid-column:1/-1; grid-row:2; }
 .plan-section .plan-overview { padding:12px 0; gap:0; }
 .plan-section .plan-overview > div { padding:0 12px; gap:4px; }
 .plan-section .plan-overview strong { font-size:clamp(13px,3.8vw,17px); line-height:23px; letter-spacing:-.4px; }
 .plan-section .plan-overview p { font-size:10px; }
 .plan-section .plan-overview .money-currency { display:none; }
}
@media(max-width:359px){
 .analytics-panel { padding:14px 12px; }
 .chart-legend-button { gap:6px; }
 .chart-legend-name { font-size:12px; }
 .chart-legend-value { gap:5px; font-size:11px; }
 .chart-legend-value small { min-width:29px; font-size:9px; }
 .chart-emoji { margin-right:4px; }
 #chart-refunds { max-width:100%; text-align:left; margin-left:0; }
 .plan-section .plan-row { padding:6px 8px; }
 .plan-section .plan-category { font-size:12px; gap:5px; }
 .plan-section .plan-amount { font-size:12px; gap:3px; }
 .plan-section .plan-overview > div { padding:0 9px; }
}
@media(hover:hover){.chart-legend-button:hover { color:var(--on-accent-soft); }.chart-legend-button:hover::after { opacity:.65; }}
@media(prefers-reduced-motion:reduce){.chart-slice,.chart-disclosure-icon{transition:none;}}
/* Initial chart placeholder follows the compact chart proportions. Existing charts keep exact masks. */
body[data-page=plans] .loading-chart { min-height:260px; }
body[data-page=plans] .loading-chart .loading-donut { width:168px; }
body[data-page=plans] .loading-chart .loading-row { min-height:40px; padding:10px 0; }
body[data-page=plans] .loading-chart .loading-avatar { width:6px; height:6px; }
body[data-page=plans] .loading-chart .loading-row > div .short { display:none; }

@media(min-width:1300px){
 .analytics-chart[data-type=pie]:has(.chart-legend) { grid-template-columns:200px minmax(0,1fr); column-gap:32px; }
 .analytics-chart[data-type=pie] .chart-legend { position:relative; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:65px; }
 .analytics-chart[data-type=pie] .chart-legend:has(> li:nth-child(2))::before { content:""; position:absolute; left:50%; top:4px; bottom:4px; width:1px; transform:translateX(-50%); background:var(--surface-outline); pointer-events:none; }
}

html[data-input-mode="pointer"] .chart-graphic svg:focus-visible,html[data-input-mode="pointer"] .chart-legend-button:focus-visible { outline:none; }

@media(prefers-reduced-motion:reduce){.plan-progress-fill,.plan-section .plan-row{transition:none;}}
/* A quiet, full-width comparison above the detailed charts. */
.monthly-spending { --monthly-plot-height:200px; padding:26px 28px 18px; margin:0 0 24px; border:0; border-radius:28px; background:var(--accent); color:var(--on-accent); min-width:0; }
.monthly-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; min-height:78px; }
.monthly-period-controls { display:flex; align-items:center; gap:6px; margin:0 0 9px; }
.monthly-period { min-height:30px; padding:4px 7px; border:0; border-radius:9px; background:transparent; font-size:12px; font-weight:400; color:var(--accent-muted); }
.monthly-period { margin-left:-7px; }
@media(hover:hover){.monthly-period:hover { background:var(--accent-soft); color:var(--on-accent-soft); }}
.monthly-total-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.monthly-total { min-height:44px; display:block; font-size:36px; font-weight:500; line-height:1.2; letter-spacing:-1.1px; font-variant-numeric:tabular-nums; }
.monthly-total .loading-line { width:190px; height:36px; margin:4px 0; }
.monthly-delta { padding:6px 9px; border-radius:12px; background:color-mix(in srgb,var(--on-accent) 8%,transparent); font-size:12px; font-weight:500; font-variant-numeric:tabular-nums; }
.monthly-currencies { margin-left:auto; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:3px; max-width:55%; }
.monthly-currencies .chip { min-height:36px; padding:7px 10px; background:transparent; color:var(--accent-muted); border:0; font-size:12px; border-radius:999px; }
.monthly-currencies .chip.active { background:var(--accent-soft); color:var(--on-accent-soft); }
.monthly-plot { position:relative; height:var(--monthly-plot-height); margin-top:14px; min-width:0; color:var(--on-accent); }
.monthly-svg { display:block; width:100%; height:100%; overflow:visible; touch-action:pan-y; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.monthly-svg:focus-visible { outline:2px solid currentColor; outline-offset:5px; border-radius:12px; }
html[data-input-mode="pointer"] .monthly-svg:focus { outline:none; }
.monthly-grid { stroke:currentColor; stroke-opacity:.12; stroke-width:1; stroke-dasharray:2 5; }
.monthly-current,.monthly-previous { fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.monthly-previous { stroke-width:2.5; stroke-opacity:.32; }
.monthly-end { fill:var(--on-accent); stroke:var(--accent); stroke-width:3; }
.monthly-probe[hidden] { display:none; }
.monthly-probe line { stroke:currentColor; stroke-opacity:.3; stroke-dasharray:3 4; }
.monthly-probe circle { fill:var(--on-accent); stroke:var(--accent); stroke-width:2; }
.monthly-legend { display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px; min-height:28px; margin-top:10px; font-size:11px; color:var(--accent-muted); font-variant-numeric:tabular-nums; }
.monthly-legend > span { display:grid; grid-template-columns:16px auto auto; align-items:center; gap:7px; min-width:0; }
.monthly-legend .loading-line { width:65px; margin:0; }
.monthly-legend strong { color:var(--on-accent); font-size:12px; font-weight:500; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; min-width:0; }
.monthly-legend i { width:16px; height:2.5px; border-radius:2px; background:var(--on-accent); }
.monthly-legend i.previous { opacity:.32; }
.monthly-status { min-height:16px; margin-top:4px; color:var(--accent-muted); font-size:11px; }
.monthly-error { height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; color:var(--on-accent); font-size:13px; }
.monthly-error button { color:inherit; }
.monthly-placeholder { height:100%; overflow:hidden; }
.monthly-placeholder-head { display:flex; justify-content:space-between; gap:24px; padding:12px 0; }
.monthly-placeholder-plot { padding:6px 0; display:grid; gap:calc(var(--monthly-plot-height) * .12); }
.monthly-placeholder-plot .loading-line { height:4px; width:100%; }
@media(hover:hover){.monthly-currencies .chip:not(.active):hover { background:var(--accent-soft); color:var(--on-accent-soft); }.monthly-error button:hover { text-decoration:underline; }}
@media(prefers-reduced-motion:no-preference){.monthly-currencies .chip { transition:background-color .2s,color .2s; }}
@media(max-width:800px){.monthly-spending { --monthly-plot-height:100px; padding:20px 16px 12px; border-radius:22px; margin-bottom:20px; }.monthly-head { gap:12px; flex-direction:column; align-items:stretch; min-height:120px; }.monthly-currencies { order:-1; margin-left:0; max-width:100%; justify-content:flex-start; }.monthly-total { font-size:30px; min-height:36px; }.monthly-total .loading-line { height:30px; margin:3px 0; }.monthly-legend { flex-direction:column; align-items:flex-start; gap:10px; min-height:44px; }.monthly-currencies .chip { min-height:32px; padding:6px 9px; }.monthly-plot { margin-top:10px; }}
/* Values stay below the plot; the cursor follows the lines without an overlay. */
.monthly-probe .probe-previous { fill:var(--accent); stroke:var(--on-accent); opacity:.65; }

@media(prefers-reduced-motion:reduce){.plan-section .plan-row:not(:disabled):hover{transform:none;}}

/* A quiet, current-month preview beside the desktop household balance. */
.household { position:relative; container-type:inline-size; }
.household .household-heading { flex-wrap:nowrap; }
.household-heading h2 { flex:none; }
.household .currency-switch { flex-wrap:nowrap; min-width:0; overflow-x:auto; justify-content:flex-start; margin-left:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 12px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 12px),transparent); padding-right:12px; }
.household .currency-switch::-webkit-scrollbar { display:none; }
.household .currency-switch .chip { flex:none; }
.household .balance-privacy { position:relative; z-index:2; }
.home-monthly-preview { display:grid; grid-template-rows:minmax(0,1fr) auto auto; position:absolute; top:24px; bottom:30px; right:30px; width:40%; color:var(--on-accent); visibility:hidden; opacity:0; pointer-events:none; }
.home-monthly-preview .monthly-head[hidden] { display:none; }
@media(prefers-reduced-motion:no-preference){.home-monthly-preview { transition:opacity 140ms ease,visibility 0s linear 140ms; }}
@container (min-width:960px) {
 .household-heading { width:55%; justify-content:flex-start; gap:20px; }
 .household .currency-switch { margin-left:0; }
 .household-summary .household-balance { max-width:58%; }
 .home-monthly-preview { visibility:visible; opacity:1; pointer-events:auto; transition-delay:0s; }
 .home-monthly-preview .monthly-head[hidden] { display:none; }
 .home-monthly-preview .monthly-plot { margin:0; height:100%; min-height:0; }
 .home-monthly-preview .monthly-svg { cursor:default; }
 .home-monthly-preview .monthly-legend { padding-right:60px; margin-top:8px; gap:6px 18px; font-size:10px; }
 .home-monthly-preview .monthly-legend > span { gap:5px; grid-template-columns:12px auto auto; }
 .home-monthly-preview .monthly-legend i { width:12px; }
 .home-monthly-preview .monthly-legend strong { font-size:11px; }
 .home-monthly-preview .monthly-status { min-height:0; margin:0; font-size:10px; }
 .home-monthly-preview .monthly-current { stroke-width:2.5; }
 .home-monthly-preview .monthly-previous { stroke-width:2; }
}