/* Match the separated recent-operation cards, within each existing day group. */
#tx-list .ledger-item { margin:4px 0; border:0; border-radius:12px; }
#tx-list .ledger-front { border-radius:12px; }
#tx-list .ledger-item.actions-open .ledger-front { border-radius:12px 0 0 12px; }
.account-list { display:grid; gap:4px; padding:0; background:transparent; border:0; overflow:visible; }
.account-list > button.account-list-row { border:1px solid var(--surface-outline); border-radius:12px; margin:0; }
.network-state { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:28px; margin:0 0 10px; color:var(--muted); font-size:11px; font-weight:400; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.network-indicator { display:grid; place-items:center; flex:0 0 32px; width:32px; height:28px; min-height:28px; margin-left:auto; padding:0; border:0; border-radius:10px; background:transparent; }
.network-dot { display:block; width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#999ca2; }
.network-state[data-phase="online"] .network-dot { background:#36805c; animation:network-pulse 2.8s ease-in-out infinite; }
.network-state:is([data-phase="syncing"],[data-phase="pending"],[data-phase="error"],[data-phase="storage"]) .network-dot { background:#d5a529; }
@keyframes network-pulse { 0%,100% { box-shadow:0 0 0 0 #36805c00; } 45% { box-shadow:0 0 0 4px #36805c20; } }
.rates-ticker { user-select:none; -webkit-user-select:none; flex:1; min-width:0; overflow:hidden; mask-image:none; -webkit-mask-image:none; }
.rates-track { display:flex; width:max-content; min-width:200%; animation:rates-scroll 40s linear infinite; }
.rates-group { display:flex; align-items:center; justify-content:space-around; flex:1 0 auto; gap:28px; padding-right:28px; }
.ticker-rate { display:inline-flex; align-items:baseline; gap:7px; white-space:nowrap; font-size:11px; }
.ticker-rate strong { font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }
.ticker-saved { color:var(--muted); }
@keyframes rates-scroll { to { transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce) {
 .network-state[data-phase="online"] .network-dot,.rates-track { animation:none; }
 .rates-ticker { overflow-x:auto; scrollbar-width:none; }
 .rates-track { min-width:0; }
 .rates-group { justify-content:flex-start; }
 .rates-group[aria-hidden="true"] { display:none; }
}
.pending-label { display:flex!important; align-items:center; gap:5px; font-size:11px!important; }
.offline-snapshot { color:var(--muted); font-size:11px; margin:0 0 10px; }
.queue-record { padding:16px 0; border-bottom:1px solid var(--line); }
.queue-record strong { font-size:14px; font-weight:500; }
.queue-record p { color:var(--muted); font-size:12px; margin:6px 0; overflow-wrap:anywhere; }
#retry-sync { margin-top:20px; }
.ledger-item[data-readonly="true"] { cursor:default; }
.ledger-item[data-readonly="true"] .swipe-actions { display:none!important; }
.debt-list { gap:4px; }
.debt-list .debt-card { border-radius:12px; }
.archived-accounts .archived-row,.archived-debts .archived-row { padding:14px; margin-top:4px; border:1px solid var(--surface-outline); border-radius:12px; }
.account-list > button.account-list-row[data-person] { border:0; }
body[data-page]:not([data-page="overview"]) .network-state { padding-bottom:10px; border-bottom:1px solid var(--surface-outline); }

/* Filter the visual surfaces separately: a filter on #app would trap the fixed dock. */
#content,.sidebar,.topbar,.floating-actions,.rates-ticker,dialog > *,.choice-popover { filter:grayscale(0); transition:filter .5s ease; }
body[data-offline="true"] :is(#content,.sidebar,.topbar,.floating-actions,.rates-ticker,dialog > *,.choice-popover) { filter:grayscale(1); }
/* Offline is a deliberately readable neutral palette, not just desaturated pastels. */
body[data-offline="true"] {
 --ink:#141414; --muted:#3b3b3b; --subtle:#505050; --line:#b8b8b8; --surface-outline:#c5c5c5; --control-line:#a3a3a3;
 --surface:#e8e8e8; --bg:#f7f7f7; --paper:#fff;
 --accent:#cfcfcf; --accent-soft:#e8e8e8; --on-accent:#141414; --on-accent-soft:#141414; --accent-muted:#303030;
 --action:#303030; --action-hover:#141414; --on-action:#fff; --focus:#292929;
 --positive:#292929; --danger:#292929; --warning:#333; --warning-bg:#ededed; --warning-line:#b8b8b8;
}
body[data-offline="true"] [data-person] {
 --person-row:#e8e8e8!important; --person-row-hover:#dadada!important; --person-text:#141414!important; --person-muted:#333!important; --person-marker:#bdbdbd!important; --person-on:#141414!important;
}
body[data-offline="true"] .person-card .accounts-stage { border-top-color:#9e9e9e; }
@media(prefers-reduced-motion:no-preference) {
 :is(.household,.monthly-spending,.person-card,.person-tab,.ledger-front,.tx-row-preview,.account-list-row,.profile-avatar,.balance-value,.person-balance,.balance-caption,.debt-label,.debt-amount,.tx-value,.tx-note,.personal-account span,.personal-account strong,.ledger-description,.ledger-description > span,.ledger-description p,.ledger-value,.ledger-value small,.account-row-main,.currency-badge,.offline-snapshot,.settings-row,.profile-settings-row,.mobile-navigation button) { transition:color .5s ease,background-color .5s ease,border-color .5s ease; }
 .person-card .accounts-stage { transition:border-color .5s ease; }
 .floating-actions > button { transition:background-color .5s ease,color .5s ease,border-color .5s ease; }
}
.pending-pulse { animation:pending-pulse 2s ease-in-out infinite; }
@keyframes pending-pulse { 0%,100% { opacity:1; } 50% { opacity:.7; } }
.connectivity-notice { position:fixed; z-index:30; top:calc(12px + env(safe-area-inset-top,0px)); left:50%; transform:translate(-50%,-12px); opacity:0; pointer-events:none; max-width:calc(100vw - 32px); padding:11px 17px; border-radius:999px; background:var(--paper); color:var(--ink); box-shadow:0 4px 20px #15151518; border:1px solid var(--surface-outline); font-size:12px; white-space:nowrap; transition:opacity .25s ease,transform .25s ease; }
.connectivity-notice.visible { opacity:1; transform:translate(-50%,0); }
/* Mobile destinations share one white capsule beside the add action. */
.mobile-navigation,.floating-actions .floating-add { display:none; }
@media(max-width:800px) {
 :root { --dock-gap:max(10px,var(--safe-bottom)); }
 .floating-actions { gap:8px; width:calc(100% - 2 * var(--dock-gap)); }
 .floating-actions :is(.floating-expense,.floating-income) { display:none; }
 .mobile-navigation { position:static; inset:auto; z-index:auto; margin:0; gap:0; flex-direction:row; justify-content:flex-start; display:flex; flex:1 1 0; min-width:0; height:56px; padding:4px; border:1px solid var(--surface-outline); border-radius:999px; background:var(--paper); box-shadow:0 3px 12px #15151514; }
 .mobile-navigation button { display:flex; align-items:center; justify-content:center; flex:1 1 0; min-width:44px; min-height:44px; padding:0; border:0; border-radius:999px; background:transparent; color:var(--muted); }
 .mobile-navigation button[aria-current="page"] { background:var(--accent-soft); color:var(--on-accent-soft); }
 .floating-actions .floating-add { display:flex; flex:0 0 56px; 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; }
}
@media(hover:hover) {
 .mobile-navigation button:hover { background:var(--surface); color:var(--ink); }
 .mobile-navigation button[aria-current="page"]:hover { background:var(--accent-soft); color:var(--on-accent-soft); }
 .floating-actions .floating-add:hover { background:var(--action-hover); }
}
@media(prefers-reduced-motion:reduce) {
 #content,.sidebar,.topbar,.floating-actions,.rates-ticker,dialog > *,.choice-popover,.connectivity-notice { transition:none; }
 .pending-pulse { animation:none; }
}

/* The family total is the dark anchor of the high-contrast offline palette. */
body[data-offline="true"] :is(.household,.monthly-spending) { --accent:#1d1d1d; --on-accent:#fff; --accent-muted:#d0d0d0; --accent-soft:#3b3b3b; --on-accent-soft:#fff; }
body[data-offline="true"] .household-balance .debt-summary::before { background:#777; }
@media(prefers-reduced-motion:no-preference) {
 .household h2,.household .chip { transition:color .5s ease,background-color .5s ease; }
 .household-balance .debt-summary::before { transition:background-color .5s ease; }
}

/* An installed shell must be applied explicitly, never by dropping an open form. */
.shell-update { position:fixed; z-index:120; top:52px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:16px; max-width:calc(100% - 32px); padding:10px 14px; border:1px solid var(--surface-outline); border-radius:14px; background:#fff; color:var(--ink); box-shadow:0 4px 20px #17171c14; font-size:13px; }
.shell-update[hidden] { display:none; }
.shell-update button { flex-shrink:0; min-height:36px; padding:6px 12px; border:0; border-radius:9px; background:var(--accent-soft); color:var(--on-accent-soft); font-size:13px; }
@media(hover:hover){.shell-update button:hover{background:color-mix(in srgb,var(--accent-soft) 85%,var(--accent));}}