/* Design foundation derived from the supplied UI guide. Presentation only. */
:root{--ui-space-1:4px;--ui-space-2:8px;--ui-space-3:12px;--ui-space-4:16px;--ui-space-5:20px;--ui-space-6:24px;--ui-space-8:32px;--ui-radius-control:12px;--ui-radius-card:16px;--ui-duration:160ms;--ui-font:Inter,system-ui,-apple-system,Segoe UI,sans-serif}
body{font-family:var(--ui-font);--muted:#586476;--r:#b63846}
body.dark{--muted:#b4becd;--r:#f3a3ab}
body.clean-dashboard-on{--ink:#25322b;--muted:#56635a;--b:#3b6349;--g:#3b6349}
body.dark.clean-dashboard-on{--ink:#eef3ee;--muted:#b9c6bc;--b:#a2c79b;--g:#a2c79b}
.main .btn,.modal .btn,.host-modal .btn{min-height:44px;padding:10px 16px;border-radius:var(--ui-radius-control);font-size:14px;font-weight:600;line-height:1.4}
.main .btn.primary,.modal .btn.primary,.host-modal .btn.primary{background:var(--g);border-color:var(--g);box-shadow:none}
.main .btn:not(.primary):not(.danger),.modal .btn:not(.primary):not(.danger){box-shadow:none;background:var(--p)}
.main .btn:focus-visible,.modal .btn:focus-visible,.host-modal .btn:focus-visible,#defaultDashboard button:focus-visible,.main summary:focus-visible{outline:3px solid var(--b);outline-offset:3px}
.main select,.dialog select,.host-modal select,.main input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),.dialog input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),.dialog textarea{min-height:44px;font-size:16px;line-height:1.5;border-radius:var(--ui-radius-control);padding:10px 12px}
.main input:focus-visible,.main select:focus-visible,.dialog input:focus-visible,.dialog select:focus-visible,.dialog textarea:focus-visible{outline:2px solid var(--b);outline-offset:2px}
.dialog .form{gap:16px}.dialog .form label{gap:8px;font-size:14px;line-height:1.5;color:var(--ink)}.dialog .form label small{font-size:12px;line-height:1.6;color:var(--muted)}.dialog .actions{gap:12px;margin-top:24px}.dialog-content{scroll-padding-block:24px}
#defaultDashboard{gap:24px}.clean-card{padding:24px;border-radius:var(--ui-radius-card)}.clean-grid{gap:24px}.clean-card-head{gap:16px;align-items:baseline;flex-wrap:wrap}.clean-card-head h2{font-size:18px;line-height:1.35;font-weight:650}.clean-card-head>span{font-size:14px}.clean-card-head small{font-size:12px}
.clean-balance-value{font-size:clamp(36px,4vw,48px);line-height:1.15;letter-spacing:-1px;margin:16px 0 8px;font-variant-numeric:tabular-nums}.clean-totals{gap:32px;margin:24px 0}.clean-totals span{font-size:14px}.clean-totals b{font-size:20px;line-height:1.4;font-variant-numeric:tabular-nums}.clean-totals small{font-size:12px}.clean-caption{font-size:14px;line-height:1.6}.clean-insight{padding-top:16px;gap:12px;font-size:14px;line-height:1.6}
.clean-link{font-size:14px;line-height:1.4;min-height:44px;padding:8px 0}.clean-controls select,.clean-card select,.clean-filters select{font-size:16px;min-height:44px;border-radius:var(--ui-radius-control)}.clean-card-head label{margin-left:auto}
.clean-spending{gap:24px;margin:24px 0 16px}.clean-legend{gap:12px}.clean-legend>div{font-size:14px;line-height:1.5}.clean-goal-cadence{font-size:14px;line-height:1.6;margin-top:24px}.clean-goal h3{font-size:24px;line-height:1.35;margin:16px 0}.clean-goal-amount{font-size:18px;line-height:1.6}.clean-goal-amount span{font-size:14px}.clean-track{margin:16px 0 8px}
.clean-activity li{gap:16px;padding:16px 0}.clean-row-copy b{font-size:16px;line-height:1.5}.clean-row-copy small,.clean-row-amount small{font-size:12px;line-height:1.6;margin-top:4px}.clean-row-amount{font-size:16px;line-height:1.5;font-variant-numeric:tabular-nums}.clean-activity time{font-size:12px}.clean-row-icon{width:40px;height:40px;flex-basis:40px;border-radius:12px}
.clean-filters{font-size:14px;line-height:1.6}.clean-filters summary{min-height:44px;padding:12px 0}.clean-filter-content{padding:20px;gap:16px;border-radius:var(--ui-radius-card)}.clean-account-checks{gap:16px}.clean-account-checks label{min-height:44px}.clean-filter-content input[type=checkbox]{width:20px;height:20px}.clean-filters .clean-caption{font-size:12px}
.side #nav svg.ui-nav-icon{width:24px;height:24px;flex:0 0 24px;color:inherit;overflow:visible}#nav button{gap:12px;min-height:48px;border-radius:var(--ui-radius-control)}#nav button span{font-size:14px;line-height:1.4}#nav button:focus-visible{outline:3px solid var(--b);outline-offset:2px}
/* Only interactive surfaces lift. Information cards do not pretend to be buttons. */
body[data-motion="full"] #defaultDashboard .clean-card:hover{transform:none;box-shadow:none}#defaultDashboard button:not(:disabled):active{filter:brightness(.96)}
body[data-motion="full"] .clean-link{transition:color var(--ui-duration) ease,background-color var(--ui-duration) ease}
@media(max-width:1100px){#nav button{min-height:60px}#nav button span{font-size:12px}}
@media(max-width:800px){.clean-grid{grid-template-columns:1fr}}
@media(max-width:600px){body.clean-dashboard-on .main{padding:24px 20px calc(32px + env(safe-area-inset-bottom))}#defaultDashboard{gap:20px}.clean-card{padding:20px}.clean-grid{gap:20px}.clean-card-head{gap:8px}.clean-totals{gap:24px}.clean-link{min-height:44px}.clean-row-copy b{font-size:14px}.clean-row-amount{font-size:14px;min-width:72px;max-width:45%}.clean-activity li{gap:12px}.clean-spending{gap:20px}.main .btn,.modal .btn,.host-modal .btn{min-height:48px;font-size:16px}.dialog .actions{gap:12px;flex-wrap:wrap}.clean-balance select{font-size:16px;min-height:44px}.clean-balance .clean-card-head{font-size:14px}.clean-filter-content{padding:16px}}
@media(max-width:380px){body.clean-dashboard-on .main{padding-inline:16px}#nav button span{font-size:11px}.clean-card{padding:16px}clean-activity li{flex-wrap:wrap}.clean-row-copy{flex-basis:calc(100% - 56px)}.clean-row-amount{margin-left:52px;text-align:left;max-width:100%}.adventure-stop{width:68px}}
@media(prefers-reduced-motion:reduce){body .clean-link{transition:none}}
body.dark .main .btn.primary,body.dark .modal .btn.primary,body.dark .host-modal .btn.primary{color:#1d2220}

/* Shared selected-state treatment: readable on the same panel surface in every theme.
   Keep the accent on borders/underline rather than assuming white text contrasts
   with an arbitrary user-selected accent color. Buttons and handlers stay mounted. */
body .main :is(.report-tab,.settings-tab,.scope-chip,.category-filter-chip,.goal-tabs .btn){color:var(--ink);background:var(--p);white-space:normal;min-width:0;line-height:1.4}
body .main :is(.report-tab,.settings-tab,.scope-chip,.category-filter-chip,.goal-tabs .btn):is(.on,.active,[aria-selected="true"],[aria-pressed="true"]){color:var(--ink);background:var(--p);border-color:var(--b);box-shadow:inset 0 -3px 0 var(--b);font-weight:700}
body .main :is(.report-tab,.settings-tab,.scope-chip,.category-filter-chip,.goal-tabs .btn):focus-visible{outline:3px solid var(--b);outline-offset:3px}