/* Shared family appearance, accessible controls, compact personal detail. */
.toast { color:#fff; }
.primary,.quick-expense,.quick-income { background:var(--action); color:var(--on-action); border-color:transparent; }
.primary:hover,.quick-expense:hover,.quick-income:hover { background:var(--action-hover); color:var(--on-action); }
.secondary { background:var(--accent-soft); color:var(--on-accent-soft); border-color:transparent; }
.secondary:hover { background:var(--accent); color:var(--on-accent); }
.quick-income .action-sign,.quick-expense .action-sign { background:color-mix(in srgb,var(--on-action) 12%,transparent); color:inherit; }
.household { color:var(--on-accent); }
.household .balance-value,.household h2 { color:var(--on-accent); }
.household .balance-caption,.household .debt-label,.household .current-rate,.household .debt-amount { color:var(--accent-muted); }
.household .chip.active { color:var(--on-accent-soft); background:var(--accent-soft); }
#nav button.active,.filter-chips .chip.active,.filter-toggle[aria-expanded=true],.kind-switch button.active { color:var(--on-accent-soft); }
.profile-avatar { display:inline-grid; place-items:center; width:32px; height:32px; flex:0 0 32px; border-radius:50%; overflow:hidden; background:var(--person-marker,var(--accent)); color:var(--person-on,var(--on-accent)); font-size:15px; font-weight:500; line-height:1; vertical-align:middle; }
.profile-avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.avatar-mini { width:14px; height:14px; flex-basis:14px; font-size:9px; margin-right:5px; }
.tx-note .avatar-mini { vertical-align:-2px; }
.transaction-meta .avatar-mini { vertical-align:-2px; }
#avatar { background:transparent; }
.ledger-item[data-person] .ledger-front,.tx-row-preview[data-person],.account-list-row[data-person],.person-card[data-person] { background:var(--person-row); color:var(--person-text); }
.ledger-item[data-person] .ledger-description > span,.ledger-item[data-person] .ledger-description p,.tx-row-preview[data-person] .tx-note,.tx-row-preview[data-person] small,.person-card[data-person] .balance-caption,.person-card[data-person] .personal-account span,.account-list-row[data-person] .currency-badge { color:var(--person-muted); }
.ledger-item[data-person] .ledger-value,.tx-row-preview[data-person] .tx-value,.person-card[data-person] .person-balance,.account-list-row[data-person] .account-row-main { color:var(--person-text); }
.account-list-row[data-person] .currency-badge { background:color-mix(in srgb,var(--person-row) 40%,var(--paper)); }
@media(hover:hover){.account-list-row[data-person]:hover,.ledger-item[data-person] .ledger-front:hover,.tx-row-preview[data-person]:hover{background:var(--person-row-hover);}}
.person-card .accounts-stage { border-top:1px solid color-mix(in srgb,var(--person-muted) 18%,transparent); margin-top:20px; }

.profile-settings-row { display:flex; width:100%; align-items:center; gap:12px; border:0; background:transparent; color:var(--ink); padding:14px 0; text-align:left; }
.profile-settings-row strong { flex:1; font-size:15px; font-weight:500; }
.profile-settings-row > .bi { color:var(--muted); }
.family-members { display:block; }
.color-field > div { display:flex; align-items:center; gap:10px; }
.color-field input[type=color] { width:56px; padding:4px; flex-shrink:0; }
.color-field input[type=text],#profile-hex { min-width:0; }
.profile-avatar-editor { display:flex; align-items:center; gap:18px; margin:16px 0 24px; }
.profile-avatar-editor > div:last-child { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
#profile-preview { width:72px; height:72px; flex:0 0 72px; border-radius:50%; display:grid; place-items:center; overflow:hidden; font-size:32px; }
#profile-preview img,#profile-preview canvas { width:100%; height:100%; object-fit:cover; }
.photo-button { display:inline-flex; align-items:center; cursor:pointer; margin:0; }
.theme-preview { display:grid; gap:10px; padding:22px; border-radius:18px; margin:20px 0; }
.theme-preview > span { font-size:12px; }
.theme-preview strong { font-size:30px; font-weight:500; }
.theme-preview button { border:0; border-radius:12px; padding:12px; width:max-content; pointer-events:none; }
/* A factual compact line: category at left, spent / limit at right. */
.plan-list { background:var(--paper); border:1px solid var(--surface-outline); border-radius:18px; overflow:hidden; padding:0 16px; }
.plan-row { padding:16px 0; border-bottom:1px solid var(--line); }
.plan-row:last-child { border-bottom:0; }
.plan-row-top { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; }
.plan-category { display:flex; align-items:center; gap:9px; min-width:0; font-size:14px; font-weight:500; }
.plan-category > span:last-child { overflow-wrap:anywhere; }
.plan-amount { display:flex; align-items:center; gap:7px; white-space:nowrap; font-size:14px; font-weight:500; font-variant-numeric:tabular-nums; }
.plan-amount small { color:var(--muted); font-size:12px; font-weight:400; }
.plan-amount button { width:32px; height:36px; min-height:36px; min-width:32px; }
.plan-row .bar { margin-top:10px; height:4px; }
.plan-row .bar-fill { background:var(--focus); }
.plan-row .bar-fill.over { background:var(--danger); }
.plan-overview { background:transparent; padding:0 0 18px; }
.plan-overview strong { font-size:19px; }
.plan-row.is-over .plan-spent { color:var(--danger); }
@media(max-width:359px){.plan-list{padding:0 10px;}.plan-row-top{gap:6px;}.plan-category{font-size:12px;gap:5px;}.plan-amount{font-size:12px;gap:3px;}.plan-amount small{font-size:11px;}.plan-category .category-glyph{width:22px;height:22px;font-size:17px;}}
/* Two-step authentication: one calm surface, six paste-friendly digits. */
#login.auth-screen { min-height:100dvh; display:grid; grid-template-columns:1fr; place-items:center; padding:32px 20px; background:var(--bg); }
#login[hidden] { display:none; }
.auth-shell { width:min(100%,380px); }
.auth-brand { display:inline-block; color:var(--ink); font-size:26px; font-weight:400; letter-spacing:-.7px; line-height:1.12; text-decoration:none; margin-bottom:36px; }
.auth-card { background:var(--paper); padding:28px; border:1px solid var(--surface-outline); border-radius:24px; }
.auth-card h1 { font-size:24px; font-weight:500; margin-bottom:24px; letter-spacing:-.6px; }
.auth-card .primary { width:100%; }
.auth-caption { color:var(--muted); font-size:13px; margin-bottom:18px; line-height:1.5; }
.otp-cells { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; margin:0 0 20px; }
.otp-cells input { min-width:0; width:100%; min-height:52px; padding:8px 0; text-align:center; font-size:23px; border-radius:10px; }
#login-back { display:block; margin:18px auto 0; }
#login-back[hidden] { display:none; }
#login-error:empty { display:none; }
@media(max-width:359px){.auth-card{padding:20px;}.otp-cells{gap:4px;}.otp-cells input{font-size:21px;}}
/* Only pointer-opened heading focus is visually quiet; keyboard focus is retained. */
dialog [tabindex="-1"]:focus { outline:none; }
html[data-input-mode="pointer"] button:focus-visible { outline:none; }
/* Theme text on pale controls always uses its dark companion. */
.footer-link { color:var(--focus); }
.choice-option[aria-selected=true],.month-grid button[aria-pressed=true],.month-grid button.active,.emoji-groups .chip[aria-pressed=true],#kind-dialog .kind-option[aria-pressed=true] { color:var(--on-accent-soft); }
.household .quick-action { background:var(--accent-soft); color:var(--on-accent-soft); }
.household .quick-action:hover { background:color-mix(in srgb,var(--accent-soft) 88%,var(--on-accent-soft)); }
.household .quick-action .action-sign { background:color-mix(in srgb,var(--on-accent-soft) 10%,transparent); }
.household-summary [data-debt-direction] .debt-amount { color:var(--accent-muted); }
.toast-action { color:var(--toast-action); }
.filter-toggle span { color:var(--on-accent); }

/* Keep the avatar beside its caption; generic ledger span rules must not enlarge it. */
.ledger-description .transaction-meta,.tx-note { display:flex; align-items:flex-start; gap:5px; }
.ledger-description .transaction-meta > .avatar-mini,.tx-note > .avatar-mini { display:inline-grid; width:14px; height:14px; flex:0 0 14px; font-size:9px; line-height:1; margin:2px 0 0; color:var(--person-on,var(--on-accent)); }
.ledger-description .transaction-meta > .transaction-meta-text,.tx-note > .transaction-meta-text { display:block; min-width:0; margin:0; color:inherit; font:inherit; }
.tx-note > .transaction-meta-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Compact arithmetic beside the amount, with a live exact result. */
.amount-entry { margin-bottom:16px; }
.amount-entry > label { margin-bottom:0; }
.amount-calculator { display:flex; align-items:center; gap:12px; min-width:0; margin-top:5px; }
.calculation-actions { display:flex; gap:5px; margin-left:auto; flex-shrink:0; }
.calculation-actions button { display:grid; place-items:center; width:44px; height:44px; min-height:44px; padding:0; border:1px solid var(--line); border-radius:12px; background:var(--accent-soft); color:var(--on-accent-soft); font-size:18px; }
.calculation-actions button:hover { background:var(--accent); color:var(--on-accent); }
.calculation-result { min-width:0; font-size:18px; font-variant-numeric:tabular-nums; color:var(--focus); overflow-wrap:anywhere; }
.calculation-result.invalid-result { color:var(--danger); }
.amount-field input.has-calculation { font-size:clamp(21px,5.7vw,28px); letter-spacing:-.5px; }

/* Home: independent desktop cards, folder tabs on narrow screens. */
.people-grid { align-items:start; }
.current-recent { margin-top:18px; }
.person-card[data-person],.household { border:0; }
.person-tabs { display:none; }
.amount-stage,.accounts-stage,.person-viewport { position:relative; overflow:hidden; }
.amount-stage > span { display:block; }
.home-motion-ghost { position:absolute!important; inset:0 0 auto; width:100%; pointer-events:none; }
.person-card .person-accounts { display:flow-root; border:0; margin:0; }
@media(min-width:801px) {
 main { max-width:none; }
 main > #content,main > .topbar,main > .notice,main > .network-state { max-width:1280px; margin-left:auto; margin-right:auto; }
}
.home-people .people-grid { grid-template-columns:repeat(var(--people-columns,2),minmax(0,1fr)); gap:18px; margin-top:18px; }
 .home-people[data-layout="tabs"] .person-tabs { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); align-items:end; gap:5px; margin-top:18px; overflow-x:auto; scrollbar-width:none; }
 .home-people[data-layout="tabs"] .person-tabs::-webkit-scrollbar { display:none; }
 .home-people[data-layout="tabs"] .person-tab { min-width:0; width:100%; display:flex; align-items:center; gap:8px; min-height:48px; padding:10px 18px 13px; border:0; border-radius:17px 17px 0 0; background:color-mix(in srgb,var(--person-row) 50%,var(--bg)); color:var(--person-muted); font-size:14px; font-weight:500; }
 .home-people[data-layout="tabs"] .person-tab > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .home-people[data-layout="tabs"] .person-tab .profile-avatar { width:24px; height:24px; font-size:11px; flex:0 0 24px; aspect-ratio:1; border-radius:50%; }
 .home-people[data-layout="tabs"] .person-tab[aria-pressed="true"] { background:var(--person-row); color:var(--person-text); }
 .home-people[data-layout="tabs"] .person-tab:focus-visible { outline-offset:-4px; }
 .home-people[data-layout="tabs"] .people-grid { display:block; margin-top:0; border:0; background:transparent; overflow:visible; }
 .home-people[data-layout="tabs"] .people-grid .person-card { padding:20px; border:0; border-radius:0 0 20px 20px; }
 .home-people[data-layout="tabs"] .people-grid .person-card[data-selected="false"] { display:none; }
 .home-people[data-layout="tabs"] .people-grid .person-heading { display:none; }
 .home-people[data-layout="tabs"] .people-grid .person-balance { font-size:32px; letter-spacing:-1px; }
 .home-people[data-layout="tabs"] .people-grid .accounts-stage { margin-top:18px; }
 .home-people[data-layout="tabs"] .people-grid .personal-account { display:flex; gap:16px; }
 .home-people[data-layout="tabs"] .people-grid .personal-account strong { margin-top:0; text-align:right; font-size:14px; }

/* Always-reachable entry actions and compact mobile navigation. */
.household-summary { display:block; padding-bottom:0; }
.floating-actions { position:fixed; z-index:6; bottom:var(--dock-gap); left:calc((100% + 235px)/2); transform:translateX(-50%); width:max-content; display:flex; gap:10px; isolation:isolate; }
.floating-actions > button { display:flex; align-items:center; justify-content:center; gap:0; width:76px; min-width:76px; height:56px; min-height:56px; padding:16px 26px; border:0; border-radius:999px; font-size:14px; font-weight:500; box-shadow:0 3px 12px #15151514; background:var(--action); color:var(--on-action); }
.floating-actions .bi { font-size:21px; line-height:1; }
.floating-actions::before { content:""; position:absolute; z-index:-1; pointer-events:none; bottom:calc(-1 * var(--dock-gap)); left:50%; transform:translateX(-50%); width:calc(100vw - 235px); height:calc(200px + var(--dock-gap)); background:linear-gradient(to bottom,transparent,var(--canvas) 76%); }
@media(min-width:801px) and (max-width:1150px) { .floating-actions::before { width:calc(100vw - 195px); } }
@media(max-width:800px) { .floating-actions::before { width:100vw; } }
.floating-actions .floating-income { background:var(--accent-soft); color:var(--on-accent-soft); }
.floating-actions ~ main { padding-bottom:calc(var(--dock-height) + var(--dock-gap) + 24px); }
.toast { bottom:calc(var(--dock-height) + var(--dock-gap) + 12px); }
@media(hover:hover) {
 .floating-expense:hover { background:var(--action-hover); }
 .floating-income:hover { background:color-mix(in srgb,var(--accent-soft) 88%,var(--accent)); }
}
@media(min-width:801px) and (max-width:1150px) { .floating-actions { left:calc((100% + 195px)/2); } }
@media(max-width:800px) {
 .sidebar { display:none; }
 .floating-actions { left:50%; }
 .household-summary { padding-bottom:0; }
}


/* Compact separated account rows; actions remain in the account sheet. */
.owner-section .account-list { display:grid; grid-template-columns:1fr; gap:6px; }
.account-list > button.account-list-row { min-height:68px; padding:12px 14px; gap:12px; border-radius:14px; }
.account-list-row .currency-badge { width:40px; height:36px; min-width:40px; border-radius:10px; font-size:11px; }
.account-list-row .account-row-main { gap:4px; }
.account-list-row .account-row-main strong { font-size:14px; }
.account-list-row .account-row-main span { font-size:15px; }
.account-list-row > .bi { font-size:12px; }

/* One quiet chart surface, with secondary controls tucked into its toolbar. */
.analytics-panel { padding:24px; background:var(--paper); border:1px solid var(--surface-outline); border-radius:24px; }
.analytics-controls { border-bottom:1px solid var(--surface-outline); }
.analytics-controls > summary { display:flex; align-items:center; gap:9px; min-height:44px; padding:0 0 16px; list-style:none; cursor:pointer; color:var(--ink); font-size:13px; }
.analytics-controls > summary::-webkit-details-marker { display:none; }
.analytics-controls > summary > .bi:first-child { font-size:17px; color:var(--focus); }
.analytics-controls > summary > .bi:last-child { font-size:11px; transition:transform 180ms; }
.analytics-controls[open] > summary > .bi:last-child { transform:rotate(180deg); }
.analytics-filter-caption { margin-left:auto; text-align:right; font-size:12px; color:var(--muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.analytics-filters { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; padding:4px 0 20px; margin:0; }
.analytics-filters label,.analytics-view-filter > span { color:var(--muted); font-size:11px; font-weight:400; }
.analytics-filters .choice-trigger { background:var(--bg); border:1px solid var(--surface-outline); border-radius:12px; }
.analytics-view-filter .analytics-types { padding:3px; gap:3px; background:var(--bg); border-radius:14px; }
.analytics-view-filter .analytics-types button { min-height:40px; min-width:44px; padding:8px 13px; }
.analytics-types button[aria-pressed=true] { background:var(--accent-soft); color:var(--on-accent-soft); border-color:transparent; }
.analytics-summary { margin:26px 0 14px; }
.analytics-summary #chart-total { font-size:36px; letter-spacing:-1.2px; }
.chart-grid { stroke:var(--surface-outline); stroke-dasharray:3 5; }
.chart-zero { stroke:var(--line); }
.chart-tick { fill:var(--muted); font-size:10px; }
.chart-category,.chart-bar-value { fill:var(--ink); font-size:12px; font-variant-numeric:tabular-nums; }
.chart-bar-value { font-weight:500; }
.chart-legend { gap:0 24px; margin:8px 0 24px; }
.chart-legend li { padding:13px 0; border-bottom:0; gap:10px; }
.chart-swatch { width:8px; height:8px; border-radius:50%; }
.chart-legend-name { font-size:13px; }
.chart-legend-value { display:flex; flex-direction:column; gap:3px; font-weight:500; }
.chart-legend-value small { margin:0; font-weight:400; }
.chart-note[hidden] { display:none; }
.chart-data { margin-top:14px; border-color:var(--surface-outline); }
.chart-data summary { color:var(--muted); font-size:12px; padding-top:8px; }
@media(min-width:1000px) { .analytics-chart:has(.chart-legend) { grid-template-columns:minmax(240px,.85fr) minmax(0,1.15fr); gap:0 40px; } }
@media(max-width:1000px) { .analytics-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:800px) { .analytics-panel { padding:18px 16px 12px; border-radius:22px; } .analytics-summary #chart-total { font-size:32px; } .analytics-filter-caption { max-width:60%; } }
@media(prefers-reduced-motion:reduce) { .analytics-controls > summary > .bi:last-child { transition:none; } }

/* Each person's recent entries continue their own column, not a shared grid row. */
body[data-page="overview"],body[data-page="overview"] main,body[data-page="overview"] #content { background:var(--paper); }
.person-column { min-width:0; display:grid; gap:18px; align-content:start; }
.person-column .current-recent { margin:0; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; min-width:0; }
.person-column .recent-card .section-heading { margin:0; }
.person-column .recent-card .section-heading h3 { font-size:16px; font-weight:500; }
.recent-viewport { position:relative; overflow:hidden; }
.person-recent-rows { display:flow-root; }
.person-column .recent-card .tx-row-preview { margin:0 0 4px; padding:14px 12px; }
.person-column .recent-card .tx-row-preview:last-child { margin-bottom:0; }
.person-column .recent-card .tx-note { max-width:none; }
.person-column .recent-card .empty { padding:20px 0; text-align:left; }
.home-people[data-layout="tabs"] .person-column[data-selected="false"] { display:none; }

/* Neutral settings surfaces keep neutral text even with a dark family accent. */
@media(hover:hover) {
 .settings-row:not(:disabled):hover,.profile-settings-row:not(:disabled):hover { background:var(--surface); color:var(--ink); }
 .settings-row.danger-text:not(:disabled):hover { color:var(--danger); }
}