.entry-user-pills { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.entry-user-pills[hidden] { display:none; }
.entry-user { display:flex; align-items:center; gap:7px; border-radius:999px; padding:7px 18px 7px 7px; min-height:42px; background:var(--person-row); color:var(--person-text); opacity:.5; border:1px solid transparent; transition:opacity .15s ease,border-color .15s ease; }
.entry-user[aria-pressed=true] { opacity:1; border-color:var(--person-marker); }
.entry-user .profile-avatar { width:26px; height:26px; font-size:13px; }
.entry-plan-preview { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:-4px 0 16px; padding:8px 0; color:var(--muted); font-size:12px; }
.entry-plan-preview[hidden] { display:none; }
.entry-plan-values { text-align:right; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.entry-plan-values strong { font-weight:500; color:var(--ink); }
.entry-plan-preview.over-limit strong { color:var(--danger,#b3293a); }
.ledger-item.neutral-movement[data-person] .ledger-front { background:var(--surface,#f3f3f5); color:var(--ink,#34343a); }
.ledger-item.neutral-movement[data-person] .ledger-description > span,.ledger-item.neutral-movement[data-person] .ledger-description p { color:var(--muted,#73737b); }
.person-column .recent-card .tx-row-preview { display:grid; width:100%; margin:0 0 6px; padding:14px 12px; border:0; border-radius:14px; background:var(--person-row); color:var(--person-text); text-align:left; font:inherit; }
.person-column .recent-card .tx-row-preview:last-child { margin-bottom:0; }
.recent-card .tx-row-preview .tx-note { color:var(--person-muted); }
.recent-card .tx-row-preview .tx-actions { display:none; }
.recent-card .tx-row-preview .tx-value { color:var(--person-text); }
.recent-card .tx-row-preview:focus-visible { outline-offset:2px; }
.account-list .account-list-row { display:flex; gap:0; padding:0; border:0; border-radius:14px; overflow:hidden; background:var(--person-row); color:var(--person-text); position:relative; transition:transform .22s cubic-bezier(.22,1,.36,1),background-color .25s ease; }
.account-list-row .account-open { display:flex; align-items:center; gap:12px; flex:1; min-width:0; padding:14px; border:0; border-radius:0; background:transparent; color:inherit; text-align:left; font:inherit; }
.account-list-row .account-row-main { flex:1; min-width:0; }
.account-list-row .account-drag { display:grid; place-items:center; flex:0 0 44px; align-self:stretch; padding:0; border:0; border-radius:0; background:transparent; color:var(--person-muted); touch-action:none; cursor:grab; }
.account-drag .bi { font-size:22px; }
.account-list { position:relative; }
.account-list.is-reordering .account-list-row { transform:none; }
.account-list .account-list-row.is-dragging { z-index:3; opacity:1; box-shadow:0 8px 24px color-mix(in srgb,var(--person-text) 18%,transparent); }
@media(prefers-reduced-motion:no-preference){.account-list .account-list-row.is-dragging{transform:scale(1.025);}}
.account-list-row.is-dragging .account-drag { cursor:grabbing; }
@media(hover:hover){.entry-user:hover{opacity:1;}.person-column .recent-card .tx-row-preview:hover{background:var(--person-row-hover);}.account-list .account-list-row:hover{background:var(--person-row-hover);}.account-list-row .account-open:hover,.account-list-row .account-drag:hover{background:transparent;}}
@media(prefers-reduced-motion:reduce){.entry-user{transition:none;}}

.ledger-item.neutral-movement[data-person] .ledger-value { color:var(--ink,#34343a); }

.person-column .recent-card .tx-row-preview.neutral-movement { background:var(--surface,#f3f3f5); color:var(--ink,#34343a); }
.person-column .recent-card .tx-row-preview.neutral-movement .tx-value { color:var(--ink,#34343a); }
.person-column .recent-card .tx-row-preview.neutral-movement .tx-note { color:var(--muted,#73737b); }

/* Category and amount share a baseline; account and note occupy their own rows. */
.ledger-item .ledger-front { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:start; gap:12px; min-height:0; padding:14px; }
.ledger-item .ledger-description { min-width:0; }
.ledger-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.ledger-heading > strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; line-height:1.35; }
.ledger-item .ledger-heading .ledger-value { flex:0 0 auto; grid-column:auto; text-align:right; margin:0; padding:0; font-size:14px; line-height:1.35; font-weight:600; white-space:nowrap; max-width:none; }
.ledger-heading .ledger-value small { display:block; font-size:11px; font-weight:400; }
.ledger-item .ledger-description > .transaction-meta { margin-top:5px; font-size:12px; line-height:1.4; }
.ledger-item .ledger-description > p { margin:7px 0 0; font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
.ledger-item .ledger-front > .tx-icon { width:42px; height:42px; }
.ledger-item[role=button] { cursor:pointer; }
#editor .dialog-head h2 { flex:1; min-width:0; }
.transaction-delete { flex:0 0 44px; width:44px; height:44px; color:var(--danger,#b3293a); background:transparent; }
@media(hover:hover){.transaction-delete:not(:disabled):hover{color:var(--danger,#971e2e);background:var(--ui-danger-bg,#fff0f2);}}
#confirm-dialog::backdrop { background:rgb(0 0 0 / .5); }
.transaction-read-amount { display:block; font-size:28px; margin:12px 0; overflow-wrap:anywhere; }
.transaction-read-note { white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:500px){.ledger-item .ledger-heading .ledger-value-long{font-size:12px;}}

/* Keep the transfer route on one line, shortening both long names fairly. */
.transaction-meta-text .account-route { display:flex; align-items:baseline; gap:4px; min-width:0; margin:0; font:inherit; color:inherit; }
.transaction-meta-text .account-route > span { display:block; margin:0; font:inherit; color:inherit; }
.account-route .account-route-name { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-route .account-route-arrow { flex:0 0 auto; white-space:pre; }

/* Compact metadata: account route, divider, then one truncated comment. */
.ledger-description .transaction-meta > .transaction-meta-text,.tx-note > .transaction-meta-text { display:flex; align-items:baseline; flex:1; min-width:0; overflow:hidden; }
.transaction-meta-text .transaction-meta-accounts { display:block; flex:1 1 auto; min-width:0; margin:0; font:inherit; color:inherit; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.transaction-meta-text.has-comment .transaction-meta-accounts { flex:0 1 auto; max-width:60%; }
.transaction-meta-text .transaction-inline-comment { display:block; flex:1 1 0; min-width:0; margin:0 0 0 7px; padding-left:7px; border-left:1px solid color-mix(in srgb,currentColor 30%,transparent); font:inherit; color:inherit; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-input-mode="pointer"] .ledger-item:focus-visible { outline:none; }
/* Family order is edited once in settings; account owners always stack. */
.owners-grid { grid-template-columns:minmax(0,1fr); }
.family-members { gap:0; }
.family-members .family-member-row { display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); }
.family-members .family-member-row:last-child { border-bottom:0; }
.family-member-row .profile-settings-row { flex:1; min-width:0; width:auto; }
.family-person-drag { display:grid; place-items:center; flex:0 0 40px; width:40px; height:44px; padding:0; border:0; border-radius:10px; background:transparent; color:color-mix(in srgb,var(--ink) 45%,transparent); touch-action:none; cursor:grab; }
.family-person-drag .bi { font-size:18px; }
.family-members { position:relative; }
.family-members.is-reordering,.family-members:has(.is-settling) { overflow:visible; }
.family-members :is(.is-dragging,.is-settling) { position:relative; z-index:3; border-radius:14px; background:var(--paper); box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 18%,transparent); }
@media(prefers-reduced-motion:no-preference){.family-member-row.is-dragging{transform:scale(1.025);}}
.family-member-row.is-dragging .family-person-drag { cursor:grabbing; }
.account-drag { color:color-mix(in srgb,var(--person-text) 60%,transparent); }
@media(hover:hover){.family-person-drag:not(:disabled):hover{background:var(--surface);color:var(--ink);}}

/* Compact editor controls retain native form values and a single vertical scroll area. */
#editor { overflow-x:hidden; }
#transaction-form,#transaction-form label,#transaction-form input,#transaction-form .custom-choice { min-width:0; max-width:100%; }
#transaction-form input[type=datetime-local] { width:100%; }
#editor .dialog-head { align-items:center; }
#editor .dialog-head h2 { overflow-wrap:anywhere; }
#transaction-form .amount-field { row-gap:6px; }
.amount-input-row { position:relative; display:block; grid-column:1/-1; width:100%; min-width:0; }
#transaction-form .amount-field > .amount-input-row { grid-column:1/-1; grid-row:auto; }
#transaction-form .amount-input-row input { width:100%; min-width:0; min-height:64px; padding:10px 112px 10px 14px; font-size:30px; }
#transaction-form .amount-input-row input.has-calculation { font-size:24px; }
#transaction-form .amount-input-row .calculation-actions { position:absolute; right:8px; top:50%; transform:translateY(-50%); margin:0; gap:4px; }
#transaction-form .calculation-actions button { width:44px; height:44px; min-width:44px; min-height:44px; border:0; border-radius:10px; }
#transaction-form .amount-calculator { margin-top:0; }
#transaction-form .calculation-result:not([hidden]) { margin-top:5px; }
.category-entry { container-type:inline-size; margin-bottom:8px; }
.category-entry[hidden] { display:none; }
.category-entry > label { margin-bottom:7px; }
.category-controls { display:flex; align-items:center; gap:8px; min-width:0; }
.category-select { flex:1; min-width:0; }
.category-shortcuts { display:flex; gap:4px; flex-shrink:0; }
.category-shortcuts[hidden] { display:none; }
.category-shortcut { display:grid; place-items:center; width:40px; height:44px; min-width:40px; min-height:44px; padding:0; border:1px solid var(--line); border-radius:10px; background:var(--paper); }
.category-shortcut .category-glyph { font-size:21px; }
.category-shortcut[aria-pressed=true] { background:var(--accent-soft); border-color:var(--focus); }
.category-shortcut:nth-child(n+4) { display:none; }
@container (min-width:330px){.category-shortcut:nth-child(4){display:grid;}}
@media(max-width:359px){#editor .dialog-head{gap:6px;}#editor .dialog-head h2{font-size:21px;}#transaction-form .amount-input-row input{font-size:26px;}}

.category-select .choice-trigger { gap:8px; padding-inline:10px; }
.category-select .choice-value { flex:1; gap:6px; overflow:hidden; }
.category-select .choice-label { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.category-select .choice-trigger > .bi { flex-shrink:0; }

/* Quiet type selector, full-width amount and a shared comment/date row. */
#editor .kind-switch { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; padding:8px; margin-bottom:8px; background:var(--surface,#f4f4f5); }
#editor .kind-switch button { display:grid; place-items:center; min-width:0; height:44px; padding:0; color:var(--muted,#61616a); }
#editor .kind-switch button .bi { font-size:18px; }
#editor .kind-switch button.active { background:var(--ui-selected,#dedee2); border-color:transparent; color:var(--ink,#34343c); }
.entry-amount-date { display:flex; align-items:flex-start; gap:8px; margin-bottom:16px; }
.entry-amount-date > .amount-entry { flex:1; min-width:0; margin-bottom:0; }
#transaction-form .entry-amount-date .amount-field { display:block; margin:0; }
#transaction-form .amount-input-row input { background:var(--paper); }
.entry-date-control { position:relative; flex:0 0 48px; padding-top:0; }
#entry-date-button { width:48px; height:48px; border:1px solid var(--control-line); border-radius:14px; background:var(--paper); color:var(--muted); }
#entry-date-button .bi { font-size:21px; }
#entry-date-button[aria-expanded=true] { background:var(--accent-soft); border-color:var(--focus); }
.entry-date-popover { position:absolute; z-index:20; bottom:calc(100% + 8px); right:0; width:280px; max-width:calc(100vw - 40px); padding:12px; border:1px solid var(--line); border-radius:16px; background:var(--paper); box-shadow:0 8px 28px #15151524; display:flex; align-items:flex-end; gap:6px; }
.entry-date-popover[hidden] { display:none; }
#transaction-form .entry-date-popover label { flex:1; min-width:0; margin:0; }
#transaction-form .entry-date-popover input { padding:10px 6px; font-size:16px; }
#entry-date-done { flex:0 0 36px; width:36px; height:44px; color:var(--on-accent-soft); }
.entry-plan-preview { justify-content:flex-start; padding-top:0; }
.entry-plan-values { text-align:left; }
.transaction-comment { display:flex; align-items:center; gap:8px; border-top:1px solid var(--line); padding-top:16px; margin-top:8px; }
@media(hover:hover){#editor .kind-switch button:not(.active):hover{background:var(--ui-hover-strong,#e9e9ec);}#editor .kind-switch button.active:hover{background:var(--ui-selected,#d5d5da);color:var(--ink,#34343c);}#entry-date-button:hover{background:var(--accent-soft);}}
@media(max-width:359px){#transaction-form .entry-amount-date .amount-input-row input{font-size:24px;padding-left:10px;padding-right:104px;}#transaction-form .entry-amount-date .calculation-actions{right:4px;gap:0;}}

#transaction-form .transaction-comment > input { flex:1; min-width:0; height:48px; min-height:48px; margin:0; border:1px solid var(--control-line); border-radius:14px; }
#transaction-form .category-shortcut { height:48px; min-height:48px; border-color:var(--control-line); }
#transaction-form .category-shortcut[aria-pressed=true] { border-color:var(--focus); }
#editor .transaction-delete { border-radius:12px; background:var(--ui-danger-bg,#fbe3e7); color:var(--danger,#b3293a); }
@media(hover:hover){#editor .transaction-delete:not(:disabled):hover{background:var(--ui-danger-hover,#f7cfd6);color:var(--danger,#971e2e);}}

/* Keep the limit's line box while its asynchronous value is being refreshed. */
.entry-plan-preview { min-height:26px; line-height:18px; }
.entry-plan-skeleton { display:block; width:112px; height:10px; margin-block:4px; border-radius:5px; background:var(--control-line); animation:entry-plan-pulse 1.1s ease-in-out infinite; }
@keyframes entry-plan-pulse { 0%,100%{opacity:.4;}50%{opacity:.9;} }
#editor .dialog-actions { border-top:0; margin-top:8px; padding-top:8px; gap:8px; }
#editor .dialog-actions > .secondary { flex:0 0 auto; padding-inline:14px; }
#editor .dialog-actions > .primary { flex:1; min-width:0; }
#editor .dialog-actions > .transaction-delete { flex:0 0 48px; width:48px; height:48px; min-width:48px; padding:0; }
#editor #save-error:empty { display:none; }
@media(prefers-reduced-motion:reduce){.entry-plan-skeleton{animation:none;opacity:.65;}}

/* Neutral transfers still respond to the pointer; emoji sit on a pale personal tint. */
.profile-avatar[data-avatar-kind="emoji"] { background:var(--person-avatar-bg,var(--bg,#fafafa)); color:var(--person-text); }
@media(hover:hover){
 .ledger-item.neutral-movement[data-person]:hover .ledger-front,
 .person-column .recent-card .tx-row-preview.neutral-movement:hover { background:var(--ui-hover-strong,#e7e7eb); color:var(--ink,#34343a); }
}

.plan-overview:has(.plan-remaining) { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:500px){.plan-overview:has(.plan-remaining){grid-template-columns:repeat(2,minmax(0,1fr));}.plan-remaining{grid-column:1/-1;}}

/* Privacy values dissolve into three dots without resizing. */
.household-summary { display:grid; grid-template-columns:minmax(0,1fr) 48px; align-items:end; gap:16px; }
.balance-privacy { display:grid; place-items:center; width:48px; height:48px; padding:0; border:0; border-radius:50%; background:color-mix(in srgb,var(--accent-muted) 12%,transparent); color:var(--on-accent); cursor:pointer; }
.balance-privacy .bi { font-size:25px; line-height:1; }
.balance-privacy[aria-pressed="true"] { background:color-mix(in srgb,var(--accent-muted) 23%,transparent); }
@media(hover:hover){.balance-privacy:hover { background:color-mix(in srgb,var(--accent-muted) 30%,transparent); }}
.balance-privacy:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.private-balance { display:inline-block; position:relative; max-width:100%; vertical-align:baseline; font-variant-numeric:tabular-nums; }
.personal-account strong > .private-balance { color:inherit; font:inherit; margin:0; }
.private-balance > :is(.private-balance-size,.private-balance-content) { display:block; margin:0; color:inherit; font:inherit; font-variant-numeric:tabular-nums; }
.private-balance > .private-balance-size { visibility:hidden; pointer-events:none; user-select:none; }
.private-balance > .private-balance-content { position:absolute; inset:0; }
.private-balance > .privacy-ghost { pointer-events:none; user-select:none; }
.private-balance .balance-dots { display:inline-flex; align-items:center; justify-content:flex-start; gap:.16em; height:1em; vertical-align:-.08em; color:inherit; font:inherit; margin:0; user-select:none; }
.balance-dots i { display:block; width:.13em; height:.13em; min-width:2px; min-height:2px; border-radius:50%; background:currentColor; }
@media(prefers-reduced-motion:no-preference){
 .balance-dots i { animation:privacy-dot-pulse 1.8s ease-in-out infinite; }
 .balance-dots i:nth-child(2) { animation-delay:.6s; }
 .balance-dots i:nth-child(3) { animation-delay:1.2s; }
 @keyframes privacy-dot-pulse { 0%,40%,100%{opacity:1;}20%{opacity:0;} }
}
@media(max-width:800px){
 .household-summary { --summary-amount-size:clamp(28px,8vw,42px); --summary-caption-height:16.8px; grid-template-columns:minmax(0,1fr) 44px; gap:8px; align-items:start; }
 .household-balance { flex-wrap:wrap; row-gap:14px; }
 .household-balance .balance-main { max-width:100%; flex-shrink:0; }
 .household-balance .balance-value { font-size:var(--summary-amount-size); }
 .household-balance .debt-summary { max-width:100%; }
 .balance-privacy { position:relative; justify-self:end; width:44px; height:44px; margin-top:calc(var(--summary-caption-height) + 8px + (var(--summary-amount-size) * 1.12 - 44px) / 2); background:transparent; }
 .balance-privacy::before { content:""; position:absolute; width:36px; height:36px; border-radius:50%; background:color-mix(in srgb,var(--accent-muted) 12%,transparent); }
 .balance-privacy .bi { position:relative; font-size:20px; }
 .balance-privacy[aria-pressed="true"] { background:transparent; }
 .balance-privacy[aria-pressed="true"]::before { background:color-mix(in srgb,var(--accent-muted) 23%,transparent); }
}
@media(max-width:359px){.household-summary{--summary-amount-size:26px;}}
@media(max-width:800px) and (hover:hover){.balance-privacy:hover{background:transparent;}.balance-privacy:hover::before{background:color-mix(in srgb,var(--accent-muted) 30%,transparent);}}

/* Clickable transaction surfaces, including their inner text, use the hand cursor. */
#tx-list .ledger-item[role=button],#tx-list .ledger-item .ledger-front,
#tx-list .ledger-item .ledger-front *,[data-recent-id],[data-recent-id] * { cursor:pointer; }
@media(hover:hover) and (pointer:fine) {
 #tx-list .ledger-item,.person-column .recent-card [data-recent-id] { position:relative; transform:scale(1); transform-origin:center; transition:transform 180ms cubic-bezier(.2,.8,.2,1),background-color 180ms ease,color .5s ease; }
 #tx-list .ledger-item.transaction-hover,.person-column .recent-card [data-recent-id].transaction-hover { transform:scale(1.025); z-index:2; }
 .recent-viewport:not(:has(.home-motion-ghost)) { overflow:visible; }
 #tx-list .ledger-item:not(.transaction-hover) .ledger-front,
 .person-column .recent-card [data-recent-id]:not(.transaction-hover) { background:var(--person-row); }
 #tx-list .ledger-item.transaction-hover .ledger-front,
 .person-column .recent-card [data-recent-id].transaction-hover { background:var(--person-row-hover); }
 #tx-list .ledger-item.neutral-movement:not(.transaction-hover) .ledger-front,
 .person-column .recent-card [data-recent-id].neutral-movement:not(.transaction-hover) { background:var(--surface,#f3f3f5); }
 #tx-list .ledger-item.neutral-movement.transaction-hover .ledger-front,
 .person-column .recent-card [data-recent-id].neutral-movement.transaction-hover { background:var(--ui-hover-strong,#e7e7eb); }
}
@media(prefers-reduced-motion:reduce) {
 #tx-list .ledger-item,.person-column .recent-card [data-recent-id] { transition:none; }
 #tx-list .ledger-item.transaction-hover,.person-column .recent-card [data-recent-id].transaction-hover { transform:none; }
}

/* A single toolbar, with the expanded filter fields spanning its full width. */
.transaction-filter-bar { --search-width:48px; --trash-size:48px; --tools-gap:10px; --tools-width:calc(var(--search-width) + var(--trash-size) + 2 * var(--tools-gap)); position:relative; margin-bottom:14px; }
.transaction-filters.analytics-controls { min-width:0; border:0; padding:0; background:transparent; }
.transaction-filters.analytics-controls > summary { width:calc(100% - var(--tools-width)); min-height:48px; padding:0 14px; border:1px solid var(--surface-outline); border-radius:14px; background:var(--paper); }
.transaction-filters .filter-disclosure-body { width:100%; box-sizing:border-box; }
.transaction-filters .analytics-filters { display:grid; padding:16px; margin:10px 0 0; border:1px solid var(--surface-outline); border-radius:16px; background:var(--paper); }
.transaction-filters .analytics-filters label { min-width:0; }
.transaction-filters .month-control { width:100%; min-width:0; min-height:48px; justify-content:space-between; padding:0 12px; font-size:14px; background:var(--bg); border:1px solid var(--surface-outline); border-radius:12px; }
.transaction-filter-reset { margin:10px 0 0 16px; }
.transaction-filter-bar > .search-line { min-width:0; margin:0; }
.transaction-filter-bar .search-field input { min-height:48px; height:48px; border-radius:14px; }
.transaction-trash { display:grid; place-items:center; width:var(--trash-size); height:var(--trash-size); padding:0; border:1px solid var(--surface-outline); border-radius:14px; background:var(--paper); color:var(--muted,#65656d); cursor:pointer; }
.transaction-trash .bi { font-size:18px; }
.transaction-trash[aria-pressed="true"] { color:var(--ink,#34343a); }
@media(hover:hover){.transaction-trash:hover,.transaction-filters > summary:hover{background:var(--ui-hover,#f6f6f8);color:var(--ink);}}
@media(max-width:440px){
 .transaction-filter-bar{--tools-gap:8px;}
 .transaction-filters .analytics-filter-caption { display:none; }
 .transaction-filters .analytics-filters { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:12px; }
 .transaction-filter-bar .search-field input { padding-left:31px; padding-right:24px; }
 .transaction-filter-bar .search-field > .bi { left:8px; width:16px; font-size:15px; }
 .transaction-filter-bar .search-clear { right:0; width:26px; min-width:26px; }
 .transaction-filters.analytics-controls > summary { gap:7px; padding:0 10px; }
 .transaction-filters.analytics-controls > summary > .bi:last-child { margin-left:auto; }
}
.filter-disclosure-body { min-width:0; display:flow-root; }
.analytics-controls.is-collapsing > summary > .bi:last-child { transform:rotate(0); }
@media(prefers-reduced-motion:no-preference){
 :where(button,input,a,summary) { transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease,box-shadow 180ms ease; }
 .profile-menu:not([hidden]) { animation:profile-menu-enter 180ms cubic-bezier(.22,1,.36,1); }
 @keyframes profile-menu-enter{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}
}
.person-recent-empty { margin:0; padding:0; color:var(--muted); font-size:13px; line-height:1.5; }

/* Search aligns with the filter controls; records begin as a separate group. */
.ledger-controls .search-field input { border:1px solid var(--surface-outline); background:var(--paper); }
.ledger-controls .filter-chips .chip:not(.active) { border-color:var(--surface-outline); }
.ledger-controls + .ledger { padding-top:40px; }
.ledger-controls + .ledger > .ledger-day:first-of-type { margin-top:0; }

/* Keep shell dividers one screen pixel wide even when the desktop UI scales. */
:root { --shell-line:calc(1px / var(--ui-scale,1)); }
/* Compact desktop rail; account details are revealed on demand. */
@media(min-width:801px){
 .rail-brand { position:absolute; top:0; left:0; display:grid; place-items:center; width:80px; height:40px; margin:0; padding:0; border:0; border-block:var(--shell-line) solid var(--surface-outline); border-radius:0; background:var(--paper); color:var(--ink); font-size:13px; font-weight:500; }
 .sidebar { z-index:8; width:80px; padding:24px 16px; border:0; align-items:center; }
 .sidebar::after { content:""; position:absolute; inset:0 0 0 auto; width:var(--shell-line); background:var(--surface-outline); pointer-events:none; }
 .sidebar nav { position:absolute; top:50%; left:16px; right:16px; transform:translateY(-50%); margin:0; gap:8px; }
 .sidebar nav button { width:48px; height:48px; min-height:48px; padding:0; justify-content:center; gap:0; border-radius:14px; }
 .sidebar nav button .bi { font-size:19px; }
 .sidebar nav button span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
 .sidebar-bottom { position:relative; margin-top:auto; padding:0; border:0; width:48px; gap:0; }
 .profile-toggle { display:grid; place-items:center; width:48px; height:48px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; }
 #avatar,#avatar .profile-avatar,#profile-avatar .profile-avatar { width:48px; height:48px; flex:0 0 48px; font-size:24px; }
 .profile-toggle[aria-expanded="true"] { outline:2px solid var(--surface-outline); outline-offset:4px; }
 .profile-menu { position:absolute; left:calc(100% + 24px); bottom:0; width:232px; max-height:calc(100dvh - 48px); overflow:auto; padding:16px; border:1px solid var(--surface-outline); border-radius:20px; background:var(--paper); color:var(--ink); box-shadow:0 8px 28px #16162112; }
 .profile-menu-person { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
 .profile-menu-person > span { display:flex; flex:0 0 48px; }
 .sidebar-bottom #user-name { font-size:16px; line-height:1.3; font-weight:500; margin:0; overflow-wrap:anywhere; min-width:0; }
 .profile-logout { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; padding:10px; font-size:14px; border:1px solid var(--surface-outline); border-radius:12px; background:var(--paper); color:var(--ink); }
 main { margin-left:80px; }
 .floating-actions { left:calc((100% + 80px)/2); }
 .floating-actions::before { width:calc(100vw - 80px); }
}
@media(min-width:801px) and (max-height:520px){
 .sidebar { padding-top:92px; padding-bottom:12px; }
 .sidebar nav { position:static; transform:none; gap:2px; flex-shrink:0; }
 .sidebar nav button { height:44px; min-height:44px; }
}
@media(hover:hover){.profile-toggle:hover{box-shadow:0 0 0 4px var(--accent-soft);}.profile-logout:hover{background:var(--surface,#f3f3f5);}}

/* White page canvas, with quiet grouped settings and explicit interactive surfaces. */
body[data-page],body[data-page] #app,body[data-page] main,body[data-page] #content { background:var(--canvas); }
.settings-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }
.settings-group { min-width:0; }
.settings-group h2 { margin:0 0 10px 16px; font-size:12px; line-height:1.4; font-weight:500; color:var(--muted); }
.settings-list { overflow:hidden; border:1px solid var(--surface-outline); border-radius:18px; background:var(--paper); }
.settings-profile-card { display:flex; align-items:center; gap:16px; width:100%; padding:20px; border:1px solid var(--surface-outline); border-radius:20px; background:var(--paper); color:var(--ink); text-align:left; cursor:pointer; }
.settings-profile-card > .profile-avatar { width:56px; height:56px; flex:0 0 56px; font-size:28px; }
.settings-profile-copy { display:grid; gap:5px; flex:1; min-width:0; }
.settings-profile-copy strong { font-size:20px; line-height:1.25; font-weight:500; overflow-wrap:anywhere; }
.settings-profile-copy small { color:var(--muted); font-size:12px; }
.settings-profile-edit { display:grid; place-items:center; width:36px; height:36px; flex:0 0 36px; border-radius:12px; background:var(--ui-hover,#f6f6f8); color:var(--muted); font-size:16px; }
.settings-layout .settings-row { min-height:60px; padding:12px 16px; gap:12px; border-bottom:1px solid var(--surface-outline); color:var(--ink); background:var(--paper); border-radius:0; cursor:pointer; }
.settings-layout .settings-row:last-child { border-bottom:0; }
.settings-layout .settings-row > span:nth-child(2) { min-width:0; flex:1; }
.settings-layout .settings-row > .bi:last-child { flex:0 0 auto; margin-left:0; font-size:12px; color:var(--muted); }
.settings-item-icon { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; border-radius:10px; background:var(--ui-hover,#f6f6f8); color:var(--muted,#666672); font-size:18px; }
.settings-theme-swatch { width:16px; height:16px; flex:0 0 16px; border-radius:50%; background:var(--accent); border:1px solid color-mix(in srgb,var(--ink) 12%,transparent); }
.settings-layout .family-members { margin:0; }
.settings-layout .family-member-row { gap:0; padding:0 8px 0 0; border-bottom:1px solid var(--surface-outline); }
.settings-layout .family-member-row:last-child { border-bottom:0; }
.settings-layout .profile-settings-row { gap:12px; min-height:64px; padding:12px 8px 12px 16px; border-radius:0; color:var(--ink); background:transparent; }
.settings-layout .profile-settings-row > .profile-avatar { width:36px; height:36px; flex:0 0 36px; font-size:18px; }
.settings-layout .profile-settings-row > .bi { flex:0 0 auto; font-size:11px; color:var(--muted); }
.settings-you { font-size:11px; color:var(--muted); }
.settings-layout .family-person-drag { flex-basis:36px; width:36px; color:var(--subtle,#a0a0aa); }
.settings-layout .settings-row.danger-text,.settings-layout .danger-text .settings-item-icon { color:var(--danger); }
.settings-layout .danger-text .settings-item-icon { background:transparent; }
.settings-history { justify-self:center; display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 14px; margin-top:-10px; border:0; border-radius:12px; color:var(--muted); background:transparent; font-size:12px; cursor:pointer; }
.settings-history .bi:last-child { font-size:10px; }
@media(hover:hover){
 .settings-profile-card:not(:disabled):hover,.settings-layout .settings-row:not(:disabled):hover,.settings-layout .profile-settings-row:not(:disabled):hover,.settings-history:hover { background:var(--ui-hover,#f6f6f8); color:var(--ink); }
 .settings-layout .family-member-row:has(.profile-settings-row:not(:disabled):hover) { background:var(--ui-hover,#f6f6f8); }
 .settings-layout .settings-row.danger-text:not(:disabled):hover { background:var(--ui-danger-bg,#fff3f3); color:var(--danger); }
 .settings-layout .family-person-drag:not(:disabled):hover { background:var(--ui-hover-strong,#ededf0); color:var(--ink); }
}
@media(max-width:440px){.settings-profile-card{padding:16px;gap:12px;}.settings-profile-copy strong{font-size:18px;}.settings-layout{gap:20px;}}

.settings-list :is(.settings-row,.profile-settings-row):focus-visible { outline-offset:-3px; }

/* One desktop add action; the fade is retained only on mobile. */
@media(min-width:801px){
 .floating-actions { left:auto; right:32px; bottom:32px; transform:none; }
 .floating-actions::before { content:none; }
 .floating-actions .floating-add { display:flex; width:56px; min-width:56px; height:56px; padding:0; border-radius:50%; background:var(--action); color:var(--on-action); }
 .floating-actions .floating-add .bi { font-size:24px; }
 body[data-page="annual"] .floating-actions { transform:translateY(calc(100% + 56px)); }
 html[data-compact-rail] .sidebar { padding-top:92px; padding-bottom:12px; }
 html[data-compact-rail] .sidebar nav { position:static; transform:none; gap:2px; flex-shrink:0; }
 html[data-compact-rail] .sidebar nav button { height:44px; min-height:44px; }
}
@media(hover:hover){.floating-actions .floating-add:hover{background:var(--action-hover);}}
/* CSS viewport units do not shrink with zoom; keep viewport-bound surfaces logical. */
.login-shell,.welcome,main,#login.auth-screen { min-height:var(--layout-height,100dvh); }
dialog { max-height:calc(var(--visible-height,100dvh) - 30px); }
.annual-scroll { max-height:calc(var(--layout-height,100dvh) - var(--annual-top,35px) - 74px); }
.profile-menu { max-height:calc(var(--layout-height,100dvh) - 48px); }
.toast,.connectivity-notice,.pull-refresh { max-width:calc(var(--layout-width,100vw) - 32px); }
@media(max-width:800px){dialog{max-height:calc(var(--visible-height,100dvh) - env(safe-area-inset-top,0px) - 12px);}}

body[data-page="transactions"] .topbar { display:none; }
@media(min-width:801px){
 .sidebar-bottom,.profile-toggle,#avatar { flex-shrink:0; min-width:48px; min-height:48px; }
 .profile-toggle { appearance:none; -webkit-appearance:none; display:block; overflow:visible; isolation:isolate; }
 #avatar { display:block; padding:0; overflow:visible; }
 #avatar .profile-avatar { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); min-width:48px; min-height:48px; aspect-ratio:1; transform:translateZ(0); isolation:isolate; }
 #avatar .profile-avatar img { min-width:0; min-height:0; width:48px; height:48px; max-width:100%; object-fit:cover; }
}

/* Search grows within the toolbar and leaves the dated list in place. */
.transaction-filter-bar[data-search-open="true"] { --search-width:clamp(160px,30vw,280px); }
.transaction-filter-bar > .search-line { position:absolute; top:0; right:calc(var(--trash-size) + var(--tools-gap)); width:var(--search-width); height:48px; }
.transaction-filter-bar > .transaction-trash { position:absolute; top:0; right:0; }
.transaction-search-toggle { position:absolute; inset:0; display:grid; place-items:center; width:100%; height:48px; padding:0; border:1px solid var(--surface-outline); border-radius:14px; background:var(--paper); color:var(--muted); font-size:18px; }
.transaction-filter-bar .search-field { width:100%; opacity:0; visibility:hidden; pointer-events:none; }
.transaction-filter-bar[data-search-open="true"] .search-field { opacity:1; visibility:visible; pointer-events:auto; }
.transaction-filter-bar[data-search-open="true"] .transaction-search-toggle { opacity:0; visibility:hidden; pointer-events:none; }
@media(hover:hover){.transaction-search-toggle:hover{background:var(--ui-hover,#f6f6f8);color:var(--ink);}}
@media(max-width:389px){.transaction-filter-bar[data-search-open="true"] #filter-toggle > span{display:none;}.transaction-filter-bar[data-search-open="true"] #filter-toggle{gap:4px;}}
@media(prefers-reduced-motion:no-preference){
 .transaction-filter-bar > .search-line,.transaction-filters.analytics-controls > summary { transition:width 260ms cubic-bezier(.22,1,.36,1),background-color 180ms ease; }
 .transaction-filter-bar .search-field,.transaction-search-toggle { transition:opacity 180ms ease,background-color 180ms ease; }
}

body[data-page="settings"] :is(.topbar,#content) { max-width:760px; margin-left:auto; margin-right:auto; }



.ledger-controls .filter-chips .chip { display:inline-flex; align-items:center; gap:7px; min-height:44px; }
.ledger-controls .filter-chips .profile-avatar { width:24px; height:24px; flex:0 0 24px; font-size:12px; }
@media(min-width:1200px){
 body[data-page="transactions"] #content { display:grid; grid-template-columns:280px minmax(0,1fr); column-gap:32px; align-items:start; }
 body[data-page="transactions"] #content > .loading-page { grid-column:1/-1; }
 .ledger-controls { grid-column:1; grid-row:1/3; position:sticky; top:24px; }
 .ledger-controls + .ledger { grid-column:2; grid-row:1; min-width:0; padding-top:0; }
 body[data-page="transactions"] .pagination { grid-column:2; }
 .transaction-filter-bar { display:grid; grid-template-columns:minmax(0,1fr) 48px; gap:16px 10px; }
 .transaction-filter-bar > .search-line { position:relative; grid-column:1; grid-row:1; inset:auto; width:100%; }
 .transaction-filter-bar > .transaction-trash { position:relative; grid-column:2; grid-row:1; inset:auto; }
 .transaction-filters.analytics-controls { grid-column:1/-1; grid-row:2; width:100%; }
 .transaction-filters.analytics-controls > summary { width:100%; min-height:32px; border:0; padding:0; background:transparent; cursor:default; pointer-events:none; }
 .transaction-filters.analytics-controls > summary > .bi:last-child,.transaction-filters .analytics-filter-caption { display:none; }
 .transaction-filters .analytics-filters { grid-template-columns:minmax(0,1fr); padding:16px; margin-top:8px; gap:14px; }
 .ledger-controls .filter-chips { display:flex; flex-wrap:wrap; gap:8px; }
 .ledger-controls .filter-chips .chip { flex:0 0 auto; padding:8px 12px; }
}

body[data-page="transactions"] .network-state { margin-bottom:28px; }
/* Settings are a self-contained workspace, without ticker, network row or divider. */

body:is([data-page="categories"],[data-page="admin"]) :is(.topbar,#content) { max-width:760px; margin-left:auto; margin-right:auto; }
.category-manager { display:block; }
.category-toolbar { display:flex; flex-wrap:wrap; gap:12px; margin:18px 0; align-items:center; }
.category-kinds { display:flex; padding:4px; border-radius:14px; background:var(--surface,#f4f4f6); }
.category-kinds button { min-height:40px; padding:8px 20px; border:0; border-radius:10px; background:transparent; color:var(--muted); transition:background 180ms,color 180ms; }
.category-kinds button[aria-pressed=true] { color:var(--ink); background:var(--paper); box-shadow:0 1px 3px #0000000d; }
.category-search { display:flex; flex-direction:row; align-items:center; gap:10px; flex:1; min-width:180px; height:48px; border:1px solid var(--surface-outline); border-radius:14px; padding:0 14px; margin:0; }
.category-search .bi { font-size:16px; flex:none; color:var(--muted); }
.category-search input { width:100%; min-width:0; border:0; padding:0; background:transparent; height:44px; box-shadow:none; }
#category-list { border:1px solid var(--surface-outline); border-radius:18px; overflow:hidden; }
#category-list .category-family { border:0; border-radius:0; padding:0; margin:0; border-bottom:1px solid var(--surface-outline); }
#category-list .category-family:last-child { border-bottom:0; }
#category-list .category-parent { display:flex; align-items:center; gap:0; padding:0 10px 0 0; }
.category-edit-row { display:flex; align-items:center; gap:12px; min-width:0; flex:1; padding:13px 16px; min-height:68px; text-align:left; background:transparent; border:0; border-radius:0; }
.category-edit-row > span:not(.category-glyph) { flex:1; min-width:0; }
.category-edit-row strong { font-size:14px; font-weight:500; overflow-wrap:anywhere; }
.category-edit-row small { display:block; font-size:11px; color:var(--muted); margin-top:3px; }
.category-edit-row > .bi,.subcategory-row > .bi { font-size:14px; color:var(--muted); }
#category-list .category-glyph { background:var(--ui-hover,#f6f6f8); border-radius:12px; width:38px; height:38px; flex:0 0 38px; font-size:23px; }
#category-list .category-parent > .icon-button { flex:0 0 40px; width:40px; height:40px; min-height:40px; font-size:12px; }
#category-list .subcategory-row { display:flex; align-items:center; gap:12px; width:100%; margin:0; padding:10px 10px; min-height:52px; border:0; border-radius:12px; background:transparent; text-align:left; }
.subcategory-row > span:not(.category-glyph) { flex:1; font-size:13px; }
#category-list .subcategory-row .category-glyph { width:30px; height:30px; flex:0 0 30px; font-size:20px; }
#category-list .add-subcategory { display:flex; align-items:center; gap:8px; padding:10px; margin:4px 0 0; font-size:12px; }
.category-edit-hint { font-size:12px; color:var(--muted); line-height:1.5; }
#settings-dialog:has(.icon-selector) { width:min(520px,calc(100% - 32px)); }
#settings-dialog .icon-selector { padding:0; border:0; margin:18px 0 0; }
#settings-dialog .icon-selector legend { font-size:13px; margin-bottom:10px; }
#settings-dialog .icon-preview { display:none; }
#budget-context { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; border:1px solid var(--surface-outline); border-radius:14px; margin:0 0 24px; background:var(--bg,#fafafa); }
#budget-context[hidden] { display:none; }
#budget-context > span { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; min-width:0; }
#budget-context strong { font-size:13px; font-weight:500; }
#budget-context small { font-size:11px; color:var(--muted); }
#budget-context button { font-size:12px; white-space:nowrap; }
.admin-intro { display:flex; gap:14px; margin:20px 0; }
.admin-intro h2 { margin:0; font-size:19px; }
.admin-intro p { font-size:13px; color:var(--muted); line-height:1.5; margin:8px 0 0; max-width:440px; }
#admin-budget-list { border:1px solid var(--surface-outline); border-radius:18px; overflow:hidden; }
.admin-budget-row { display:flex; align-items:center; gap:16px; width:100%; min-height:100px; padding:18px; background:var(--paper); border:0; border-bottom:1px solid var(--surface-outline); border-radius:0; text-align:left; transition:background 180ms; }
.admin-budget-row:last-child { border-bottom:0; }
.admin-budget-row > span:nth-child(2) { flex:1; min-width:0; }
.admin-budget-row strong { font-size:15px; font-weight:500; }
.admin-budget-row small { display:block; font-size:12px; color:var(--muted); margin:5px 0 7px; }
.admin-budget-row em,.admin-current { font-size:11px; font-style:normal; color:var(--muted); }
.admin-budget-row em { padding:3px 8px; border-radius:7px; background:var(--surface,#f3f3f6); }
body[data-budget-readonly=true] .floating-add { display:none; }
body[data-budget-readonly=true] :is(.family-person-drag,.account-drag) { display:none; }
@media(hover:hover){.category-edit-row:hover,#category-list .subcategory-row:hover,.admin-budget-row:hover{background:var(--ui-hover,#f7f7f9);color:var(--ink);}.category-kinds button:not([aria-pressed=true]):hover{background:var(--ui-hover-strong,#ebebef);color:var(--ink);}}
@media(max-width:600px){.category-search{flex-basis:100%;}.category-kinds{flex:1;}.category-kinds button{flex:1;}#budget-context{gap:10px;padding:10px 12px;}#budget-context small{flex-basis:100%;}}
@media(max-width:800px){#settings-dialog:has(.icon-selector){width:100%;}}

/* A quiet fixed rate strip shares the rail title's 40px baseline. */
body[data-page] main > #network-state { position:fixed; top:0; left:80px; right:0; width:auto; max-width:none; height:40px; min-height:40px; margin:0; padding:0; border:var(--shell-line) solid var(--surface-outline); border-left:0; background:var(--paper); z-index:7; box-sizing:border-box; }
#network-details { display:none; }
body[data-page] main { padding-top:68px; }
@media(max-width:800px){body[data-page] main > #network-state{left:0;padding:0;border-left:1px solid var(--surface-outline);}}

body[data-page="annual"] .annual-toolbar { padding-right:0; }

.account-list-row[data-person] .account-row-main strong { color:var(--person-text,var(--ink)); }

/* Hide the separator after the last visible row, including conditional sync controls. */
.settings-layout .settings-list > .settings-row:not([hidden]):not(:has(~ .settings-row:not([hidden]))) { border-bottom:0; }
.rates-ticker { mask-image:none; -webkit-mask-image:none; }

@media(min-width:801px){.rates-track{min-width:0;animation-duration:80s;}.rates-group{flex:0 0 auto;justify-content:flex-start;gap:36px;padding-right:36px;}.ticker-cycle{display:contents;}}

/* Two shared baselines: title/debit, then account route/comment and credit/date. */
.transaction-subrow { display:flex; align-items:baseline; justify-content:space-between; gap:10px; min-width:0; margin-top:5px; }
.ledger-item .transaction-subrow .transaction-meta,.tx-row-preview .transaction-subrow .tx-note { flex:1 1 0; min-width:0; margin:0; font-size:12px; line-height:1.4; }
.ledger-item .transaction-subrow .ledger-received,.tx-row-preview .tx-secondary-value { flex:0 0 auto; margin:0; font-size:12px; line-height:1.4; font-weight:400; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--person-muted,var(--muted)); }
.ledger-item.neutral-movement .ledger-received,.tx-row-preview.neutral-movement .tx-secondary-value { color:var(--muted); }
.person-column .recent-card .tx-row-preview { grid-template-columns:42px minmax(0,1fr); align-items:start; gap:12px; }
.tx-description { min-width:0; }
.transaction-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.tx-row-preview .tx-title { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; line-height:1.4; }
.tx-row-preview .tx-value { flex:0 0 auto; line-height:1.4; }
.tx-row-preview .transaction-subrow .tx-note,.tx-row-preview .tx-secondary-value { font-size:11px; }

/* One hover surface includes both the account and its reorder handle. */
.account-list-row .currency-badge { width:40px; height:40px; min-width:40px; border-radius:50%; font-size:10px; line-height:1; }
@media(hover:hover) and (pointer:fine){.account-list:not(.is-reordering) .account-list-row:not(.is-dragging):hover{transform:scale(1.025);z-index:1;}}
@media(prefers-reduced-motion:reduce){.account-list .account-list-row{transition:none;}.account-list .account-list-row:hover{transform:none;}}
.ledger-item .transaction-subrow .transaction-meta { color:var(--person-muted,var(--muted)); }
.ledger-item.neutral-movement .transaction-subrow .transaction-meta { color:var(--muted); }