/* Base (page reset) */
html{-webkit-text-size-adjust:100%}
html{overflow-x:hidden}
body{margin:0;overflow-x:clip;max-width:100%;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: one ledger column; category rows read like envelopes filling left to right; the blue "Ready to fund" block is the single focal point. */
:root{
  /* Morning Manna: Manna's own look (the default). Wheat page, olive for action, honey for accents,
     terracotta for "needs attention", red only for over and errors. */
  --bg:#F7F2E7; --surface:#FFFDF8; --surface-2:#EFE8D8; --line:#E2D8C3; --line-strong:#878169;
  --ink:#1F2419; --muted:#5E6354;
  --accent:#3F5B3A; --accent-ink:#F7F2E7; --accent-soft:#E3EADB; --accent-bar:#3F5B3A;
  --gold:#8A5A12; --gold-bar:#D9A441; --gold-soft:#F6E7C4; --on-honey:#1F2419;
  --warn:#9A4524; --warn-soft:#F6E0D3; --wait:#9A4524;
  --bad:#B42318; --bad-soft:#FBE3DF; --good:#276B43; --good-soft:#DDEEDF;
  --hero:#3F5B3A; --hero-ink:#F7F2E7;
  --scrim:rgba(31,36,25,.45); --shadow:0 12px 32px rgba(31,36,25,.12);
  --r-ctl:12px; --r-card:12px; --r-hero:20px;
  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"Figtree",-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
  --f-num:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#141712; --surface:#1C211A; --surface-2:#252B22; --line:#33402F; --line-strong:#727966;
  --ink:#EFE9DA; --muted:#A8AC9B;
  --accent:#A3C08F; --accent-ink:#141712; --accent-soft:#24331F; --accent-bar:#A3C08F;
  --gold:#E6B95A; --gold-bar:#E6B95A; --gold-soft:#3A2C10; --on-honey:#141712;
  --warn:#E08A5F; --warn-soft:#3A2015; --wait:#E08A5F;
  --bad:#F2836B; --bad-soft:#3B1712; --good:#6BCB8B; --good-soft:#17301F;
  --hero:#2E4429; --hero-ink:#F7F2E7;
  --scrim:rgba(0,0,0,.6); --shadow:0 12px 32px rgba(0,0,0,.5); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#141712; --surface:#1C211A; --surface-2:#252B22; --line:#33402F; --line-strong:#727966;
  --ink:#EFE9DA; --muted:#A8AC9B;
  --accent:#A3C08F; --accent-ink:#141712; --accent-soft:#24331F; --accent-bar:#A3C08F;
  --gold:#E6B95A; --gold-bar:#E6B95A; --gold-soft:#3A2C10; --on-honey:#141712;
  --warn:#E08A5F; --warn-soft:#3A2015; --wait:#E08A5F;
  --bad:#F2836B; --bad-soft:#3B1712; --good:#6BCB8B; --good-soft:#17301F;
  --hero:#2E4429; --hero-ink:#F7F2E7;
  --scrim:rgba(0,0,0,.6); --shadow:0 12px 32px rgba(0,0,0,.5); color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.app{max-width:760px;margin:0 auto;padding-inline:16px;padding-block:8px 170px}
h1,h2,h3{font-family:var(--f-display);font-weight:600;font-optical-sizing:auto;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:1.75rem;line-height:1.15}
h2{font-size:1.25rem}
h3{font-size:1.05rem}
p{margin:0}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:500}
.muted{color:var(--muted)}
button,input,select,textarea{font:inherit;color:inherit}
/* focus: a page-color gap, then a solid olive ring */
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}

/* header + tabs */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px 6px}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{flex:none}
.brand-name{font-family:var(--f-display);font-size:1.5rem;line-height:1}
.brand-sub{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.today{font-size:.85rem;color:var(--muted)}
.tabs{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin-inline:-16px;padding-inline:12px}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;background:none;border:0;padding:12px 10px 10px;font-weight:600;font-size:.92rem;color:var(--muted);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.tab .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold-bar);margin-left:6px;vertical-align:middle}
#view{display:flex;flex-direction:column;gap:18px;padding-top:18px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--r-ctl);border:1px solid var(--line-strong);background:var(--surface);padding:9px 14px;font-weight:600;cursor:pointer;min-height:40px}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:var(--surface)}
.btn.quiet{background:transparent;border-color:transparent;color:var(--muted);padding-inline:8px}
.btn.quiet:hover{color:var(--ink)}
.btn.big{min-height:50px;font-size:1.02rem;padding-inline:22px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:1.2rem;line-height:1;display:inline-grid;place-items:center}
.linkish{background:none;border:0;color:var(--accent);font-weight:600;cursor:pointer;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
/* links on an entry to its category or debt */
.tv-link{text-decoration:none;text-align:right;padding:2px 0;font-size:inherit}
/* a debt opened from an entry glows for a moment so it's easy to spot */
.debt.flash{animation:debtFlash 2s ease-out}
@keyframes debtFlash{0%,35%{box-shadow:0 0 0 3px var(--accent);background-color:var(--accent-soft)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.debt.flash{animation:none;box-shadow:0 0 0 3px var(--accent)}}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* month nav */
.monthnav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.monthnav h1{min-width:0}

/* pool hero */
.pool{background:var(--hero);color:var(--hero-ink);border-radius:var(--r-hero);padding:20px;display:flex;flex-direction:column;gap:8px}
.pool.short{background:var(--bad);color:var(--surface)}
.pool-label{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;opacity:.85}
.pool-amt{font-size:clamp(2.2rem,8vw,3rem);line-height:1.05;font-weight:600;letter-spacing:-.02em}
.pool-sub{opacity:.9;max-width:48ch}
.pool-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.btn.on-accent{background:var(--hero-ink);color:var(--hero);border-color:var(--hero-ink)}
.pool.short .btn.on-accent{background:var(--surface);color:var(--bad);border-color:var(--surface)}
.btn.ghost-on-accent{background:transparent;color:inherit;border-color:currentColor}
.pool-meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin:8px 0 0;padding-top:12px;border-top:1px solid color-mix(in srgb,currentColor 25%,transparent)}
.pool-meta dt{font-size:.75rem;opacity:.8;text-transform:uppercase;letter-spacing:.06em}
.pool-meta dd{margin:0;font-weight:600}
.pastsum{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px}

/* alerts */
.alert{background:var(--bad-soft);border-radius:12px;padding:12px 14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.alert.info{background:var(--accent-soft)}
.alert.gold{background:var(--gold-soft)}
.chip{border:0;border-radius:999px;padding:4px 10px;font-weight:600;font-size:.85rem;cursor:pointer;background:var(--surface)}
.chip.danger{color:var(--bad)}

/* category list */
.list-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:8px;border-radius:2px;margin-right:5px;vertical-align:middle}
.cats{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.cat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:14px 16px;cursor:pointer;width:100%}
.cat:last-child{border-bottom:0}
.cat:hover{background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
.cat-name{font-weight:600;font-size:1rem;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cat-safe{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.cat-safe-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.cat-safe .num{font-size:1.08rem}
.bad{color:var(--bad)}
.bar{grid-column:1 / -1;display:flex;height:9px;border-radius:5px;overflow:hidden;background:var(--surface-2)}
.bar i{display:block;height:100%}
.s-spent{background:color-mix(in srgb,var(--ink) 55%,var(--surface))}
.s-avail{background:var(--accent-bar)}
.s-avail.k-fun{background:var(--gold-bar)}
.s-over{background:var(--bad)}
.s-unf{background:repeating-linear-gradient(135deg,var(--line) 0 4px,transparent 4px 8px)}
.cat-meta{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.8rem;color:var(--muted)}
.cat-meta .num{font-weight:500;font-size:.78rem}
.state{font-weight:700}
.state.bad{color:var(--bad)} .state.wait{color:var(--wait)} .state.good{color:var(--good)}
.kind{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.kind.k-fun{background:var(--gold-soft);color:var(--gold)}
.kind.k-save{background:var(--accent-soft);color:var(--accent)}
.totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.totals div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.totals dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.totals dd{margin:0;font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:500}

/* generic cards + forms */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--accent)}
.lede{color:var(--muted);max-width:62ch}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label,.lbl{font-size:.82rem;font-weight:600;color:var(--muted)}
.input,select.input,textarea.input{width:100%;border:1px solid var(--line-strong);background:var(--bg);border-radius:10px;padding:9px 11px;min-height:42px}
textarea.input{min-height:70px;resize:vertical}
.input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.money{position:relative}
.money::before{content:"$";position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;font-family:var(--f-num)}
.money .input{padding-left:24px;font-family:var(--f-num)}
.money.big .input{font-size:1.6rem;min-height:58px;padding-left:30px}
.money.big::before{font-size:1.4rem;left:12px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.hint{font-size:.85rem;color:var(--muted);display:flex;flex-direction:column;gap:8px}
.warn{background:var(--gold-soft);color:var(--ink);border-radius:10px;padding:10px 12px}
.warn b{color:var(--gold)}
.empty{color:var(--muted);text-align:center;padding:26px 12px;border:1px dashed var(--line);border-radius:14px}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted);cursor:pointer}
.chk input[type=checkbox],.chk input[type=radio]{width:17px;height:17px;accent-color:var(--accent)}

/* setup */
.setup{display:flex;flex-direction:column;gap:18px}
.setup h1{font-size:clamp(1.7rem,6vw,2.3rem)}
.trow{display:grid;grid-template-columns:auto minmax(0,1fr) 130px;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.trow:last-child{border-bottom:0}
.trow.off .input{opacity:.45}
.plan-total{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-weight:600}
.verse{font-family:var(--f-display);font-style:italic;font-weight:400;color:var(--muted);font-size:1rem;max-width:56ch;line-height:1.5}
.verse cite{display:block;font-family:var(--f-body);font-style:normal;font-size:.8rem;margin-top:4px}

/* plan */
.zero-bar{height:10px;border-radius:5px;background:var(--surface-2);overflow:hidden;display:flex}
.zero-bar i{display:block;height:100%;background:var(--accent-bar)}
.zero-bar i.over{background:var(--bad)}
.prow{display:grid;grid-template-columns:auto minmax(0,1fr) 120px;grid-template-areas:"ord name amt" "ord opts opts";gap:8px 10px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}
.prow:last-child{border-bottom:0}
.prow .ord{grid-area:ord;display:flex;flex-direction:column;gap:4px;align-self:start}
.prow .ord button{width:30px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--bg);cursor:pointer;font-size:.8rem}
.prow .ord button:disabled{opacity:.3;cursor:default}
.prow .pname{grid-area:name}
.prow .pamt{grid-area:amt}
.prow .opts{grid-area:opts;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.prow .opts select.input{width:auto;min-height:34px;padding:4px 8px;font-size:.85rem}
.prow .opts .money .input{min-height:34px;width:130px;font-size:.85rem}
.prio{font-family:var(--f-num);font-size:.75rem;color:var(--muted);text-align:center}

/* lists */
/* overflow:clip rounds the corners without making a scroll box, so the sticky day headers stick to the screen, not the list */
.txlist{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:clip}
.txlist>:first-child{border-top-left-radius:calc(var(--r-card) - 1px);border-top-right-radius:calc(var(--r-card) - 1px)}
.txlist>:last-child{border-bottom-left-radius:calc(var(--r-card) - 1px);border-bottom-right-radius:calc(var(--r-card) - 1px)}
.txday{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:10px 16px 4px;background:var(--bg);border-bottom:1px solid var(--line)}
.tx{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:11px 16px;border-bottom:1px solid var(--line);align-items:center}
.tx:last-child{border-bottom:0}
.tx-main{font-weight:600;min-width:0;overflow-wrap:anywhere}
.tx-sub{font-size:.8rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.tx-amt{text-align:right}
.tx-amt.in{color:var(--good)}
.tx-actions{grid-column:1 / -1;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* wishlist */
.wish{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
.wish.ready{border-color:var(--gold-bar)}
.wish-name{font-weight:700;overflow-wrap:anywhere}
.wish-why{grid-column:1 / -1;color:var(--muted);font-size:.9rem;font-style:italic;overflow-wrap:anywhere}
.timer{grid-column:1 / -1;display:flex;flex-direction:column;gap:6px}
.timer-track{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.timer-track i{display:block;height:100%;background:var(--gold-bar)}
.timer-label{font-size:.82rem;font-weight:600;color:var(--wait)}
.wish .row{grid-column:1 / -1}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
.stat .lbl{display:block;margin-bottom:2px}
.stat .num{font-size:1.4rem}
.stat.win{background:var(--accent-soft);border-color:transparent}
.stat.win .num{color:var(--accent)}

/* rebuild */
.streak{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.streak-num{font-family:var(--f-num);font-size:4rem;line-height:1;color:var(--accent)}
.prog{height:10px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.prog i{display:block;height:100%;background:var(--accent-bar)}
.debt{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-bottom:1px solid var(--line)}
.debt:last-child{border-bottom:0}
.debt-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}
.badge{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--accent-soft);color:var(--accent);padding:2px 8px;border-radius:999px}

/* check-in */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.pill.due{background:var(--gold-soft);color:var(--gold)}
.pill.done{background:var(--accent-soft);color:var(--accent)}
.step{display:flex;gap:12px;align-items:baseline}
.step-n{font-family:var(--f-num);font-size:.8rem;color:var(--muted)}
.diff{border-radius:10px;padding:10px 12px;background:var(--surface-2);display:flex;flex-direction:column;gap:8px}
.diff.ok{background:var(--accent-soft)}
.diff.off{background:var(--gold-soft)}
.history{display:flex;flex-direction:column;gap:10px}
.hist{border-left:3px solid var(--line);padding:2px 0 2px 12px;font-size:.9rem}
.hist b{display:inline-block;min-width:4.5em}

/* sheet */
#sheetWrap{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center}
.scrim{position:absolute;inset:0;background:var(--scrim)}
.sheet{position:relative;background:var(--surface);width:100%;max-width:560px;max-height:calc(100% - 24px);overflow:auto;border-radius:20px 20px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
/* pop-ups only scroll up and down: nothing inside can push them sideways, and the page behind stays put */
#sheetWrap{overscroll-behavior:contain}
#sheetWrap .scrim{touch-action:none}
.sheet{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;overflow-wrap:break-word;-webkit-overflow-scrolling:touch}
.sheet>*{min-width:0;max-width:100%}
.sheet img,.sheet svg,.sheet canvas,.sheet video,.sheet table{max-width:100%}
.sheet .table-wrap,.sheet .nw-hist{touch-action:pan-x pan-y pinch-zoom}
@media (pointer:coarse){html.sheet-open,html.sheet-open body{overflow:hidden;overscroll-behavior:none}}
@media (min-width:640px){#sheetWrap{align-items:center}.sheet{border-radius:20px;max-height:calc(100% - 64px)}}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sheet dl{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:0}
.sheet dt{color:var(--muted)}
.sheet dd{margin:0;text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums}
.sheet dl .sum{font-weight:700;border-top:1px solid var(--line);padding-top:6px}
.big-safe{display:flex;flex-direction:column}
.big-safe .num{font-size:2rem}
.result-list{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
.result-list li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding:5px 0}

#fab{position:fixed;right:max(16px,calc((100vw - 760px)/2 + 16px));bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:10;display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--accent-ink);border:0;border-radius:16px;padding:13px 20px 13px 16px;font-weight:700;font-size:1rem;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 35%,transparent),0 2px 4px rgba(0,0,0,.12);cursor:pointer}
#fab{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#fab:active{transform:scale(.97)}
#fab.dragging{transform:scale(1.06);cursor:grabbing;box-shadow:0 14px 30px color-mix(in srgb,var(--accent) 40%,transparent),0 4px 10px rgba(0,0,0,.18);transition:none}
#fab[hidden]{display:none}
@media (display-mode:standalone){#fab:not(.moved){bottom:calc(18px + env(safe-area-inset-bottom,0px))}}
#toast{position:fixed;left:50%;bottom:calc(140px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;max-width:calc(100% - 32px);z-index:30;opacity:0;pointer-events:none;transition:opacity .2s}
#toast.show{opacity:1}
.loading{padding:60px 0;text-align:center;color:var(--muted)}
@media (max-width:520px){
  .trow{grid-template-columns:auto minmax(0,1fr) 104px}
  .prow{grid-template-columns:auto minmax(0,1fr) 104px}
  .totals{grid-template-columns:repeat(3,minmax(0,1fr))}
  .totals div{padding:9px 9px;min-width:0}
  .totals dd{overflow-wrap:anywhere}
  .totals dd{font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* login */
.login{display:flex;flex-direction:column;gap:18px;padding-top:28px}
.login-card{max-width:460px}
.login-card .btn{align-self:flex-start}
.gmark{width:18px;height:18px;flex:none}

/* undo */
.today{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.undo-btn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:5px 12px;font-weight:600;font-size:.82rem;cursor:pointer;max-width:260px}
.undo-btn:hover{border-color:var(--accent)}
.undo-what{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--muted)}
@media (max-width:520px){.undo-what{display:none}}
#toast{display:flex;align-items:center;gap:14px}
#toast.has-action{pointer-events:auto}
.toast-undo{background:none;border:0;color:var(--accent-soft);font-weight:800;cursor:pointer;padding:4px 2px;text-decoration:underline;text-underline-offset:3px}
.pool-help{font-size:.82rem;opacity:.85;max-width:56ch}

/* debt snowball */
.focus{background:var(--gold-soft);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.focus .lbl{color:var(--gold);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}
.focus-name{font-family:var(--f-display);font-size:1.4rem;line-height:1.2}
.debt-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.82rem;color:var(--muted)}
.order{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface-2);color:var(--muted);font-family:var(--f-num);font-size:.75rem;margin-right:8px;vertical-align:1px}
.debt-target .order{background:var(--gold-bar);color:var(--surface)}
.badge.gold{background:var(--gold-soft);color:var(--gold);margin-left:6px}

/* receipts */
.rcpt-pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rcpt-thumb{width:48px;height:64px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.rcpt-full{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:#fff}
.rcpt-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:3px 10px;font-weight:600;font-size:.78rem;cursor:pointer}
.rcpt-file{display:flex;align-items:center;gap:10px;color:var(--ink);min-width:0}
.rcpt-file svg{color:var(--accent);flex:none}
.rcpt-file b{overflow-wrap:anywhere}

/* groups + sub-categories */
.grp{display:flex;flex-direction:column;gap:8px}
.grp-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;background:none;border:0;padding:4px 2px;cursor:pointer;text-align:left;width:100%}
.grp-head .chev{color:var(--muted);width:14px;font-size:.9rem}
.grp-name{font-family:var(--f-display);font-size:1.15rem}
.grp-sum{margin-left:auto;font-size:.8rem;color:var(--muted)}
.grp-sum .num{font-size:.8rem;color:var(--ink)}
.cat.parent{background:var(--surface-2);cursor:default}
.cat.sub{padding-left:34px;position:relative}
.cat.sub::before{content:"";position:absolute;left:18px;top:0;bottom:0;border-left:2px solid var(--line)}
.pgroup{gap:10px}
.pgroup-head{display:flex;align-items:center;gap:10px}
.gname{font-family:var(--f-display);font-size:1.1rem;flex:1;min-width:0}
.gdrag,.drag{cursor:grab;color:var(--muted);font-size:1.2rem;line-height:1;padding:6px 4px;user-select:none;touch-action:none}
.drag-hint{font-size:1rem}
.cat-list{display:flex;flex-direction:column;min-height:8px}
.prow{grid-template-columns:auto minmax(0,1fr) 110px auto;grid-template-areas:"ord name amt more" "opts opts opts opts" "sub sub sub sub";padding:8px 0;row-gap:0}
.prow>.sub-list{margin-top:8px}
.prow>.drag,.prow>span:first-child{grid-area:ord}
.prow .opt-toggle{grid-area:more;border:1px solid var(--line);background:var(--bg);border-radius:8px;width:34px;height:34px;cursor:pointer;color:var(--muted);font-size:1.1rem}
.prow .opts{padding:12px 0 4px 30px}
.prow span.pamt{text-align:right;padding-right:6px}
.sub-list{grid-area:sub;margin-left:26px;border-left:2px solid var(--line);padding-left:8px;display:flex;flex-direction:column}
.sub-list .prow:last-child{border-bottom:0}
.drag-ghost{opacity:.4;background:var(--accent-soft)}
.drag-chosen{background:var(--surface)}
.add-cat{padding-top:4px}
@media (max-width:520px){.prow{grid-template-columns:auto minmax(0,1fr) 96px auto}.prow .opts{padding-left:0}}

/* bills */
.bills{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.bill{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.bill.late b{color:var(--bad)}
.acct-line{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.82rem;opacity:.9}
.acct-line b{font-weight:600}

/* accounts */
.acct-row{display:grid;grid-template-columns:minmax(0,1fr) 120px auto;gap:8px 10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.acct-row .acct-actions{grid-column:1 / -1;gap:6px}
.card-row .acct-actions{display:flex;flex-wrap:wrap;align-items:center}
.card-row .badge{justify-self:start}
.card-note{flex-direction:column;align-items:flex-start;gap:8px}
.ci-acct h3{margin-bottom:4px}

/* split + filters */
.split-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.split-links{display:flex;gap:16px}
/* category descriptions: "What goes here?" on Plan, under the Log picker, on the category page, and the "Not sure?" list */
.prow .opts .about-field{flex-basis:100%;flex-direction:column;align-items:stretch;gap:4px}
.prow .opts .about-field textarea{min-height:0;font-size:.88rem;resize:vertical;line-height:1.35}
.cat-about{margin:0;color:var(--muted);font-size:.9rem;line-height:1.4}
.hint.cat-about{margin-top:6px;font-size:.85rem}
.ch-list{display:flex;flex-direction:column;gap:14px}
.ch-group h3{margin:0 0 6px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-family:var(--f-body)}
.ch-group{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ch-group h3{padding:10px 14px 0}
.ch-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:11px 14px;color:var(--ink);cursor:pointer;font:inherit}
.ch-group h3+.ch-row{border-top:0}
.ch-row:active{background:var(--surface-2)}
.ch-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.ch-main .muted{font-size:.85rem;line-height:1.35}
.ch-row .num{flex:none;font-size:.9rem}
.ch-row[hidden],.ch-group[hidden]{display:none}
.split-row{display:grid;grid-template-columns:minmax(0,1fr) 120px 38px;gap:8px;align-items:center;margin-top:8px}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.due-in{width:76px;min-width:76px;min-height:34px;padding:4px 8px;text-align:center;-moz-appearance:textfield;appearance:textfield}
.due-in::-webkit-outer-spin-button,.due-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.prow .opts input[type=month]{min-height:34px;padding:4px 8px;width:auto}

/* reports */
.plain{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.pv{display:flex;flex-direction:column;gap:10px}
.pv-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name val" "bars bars";gap:4px 10px;align-items:center}
.pv-name{grid-area:name}.pv-bars{grid-area:bars}.pv-val{grid-area:val}
.pv-name{font-weight:600;font-size:.9rem;overflow-wrap:anywhere}
.pv-bars{position:relative;height:14px}
.pv-bars i{position:absolute;left:0;border-radius:4px}
.pv-plan{top:0;height:14px;background:var(--surface-2);border:1px dashed var(--line)}
.pv-spent{top:3px;height:8px;background:var(--accent-bar)}
.pv-spent.over{background:var(--bad)}
.pv-val{font-size:.8rem;text-align:right}
.pv-plan-key{background:var(--surface-2);border:1px dashed var(--muted)}
.legend .s-over{background:var(--bad)}
.trend-wrap{width:100%}
.trend-svg{width:100%;max-width:520px;height:auto;display:block}
.trend-svg .axis{stroke:var(--line);stroke-width:1}
.trend-svg .bar-fill{fill:color-mix(in srgb,var(--accent-bar) 55%,var(--surface))}
.trend-svg .sel .bar-fill{fill:var(--accent-bar)}
.trend-svg .plan-tick{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.trend-svg .tlabel{fill:var(--muted);font-size:12px;font-family:var(--f-body)}
.trend-svg .sel .tlabel{fill:var(--ink);font-weight:700}
.trend-svg .tval{fill:var(--ink);font-size:12px;font-family:var(--f-num);font-weight:600}
.trend-svg .hit{fill:transparent}
.trend-svg .tbar{cursor:pointer;outline:none}
.trend-svg .tbar:hover .bar-fill,.trend-svg .tbar:focus-visible .bar-fill{fill:var(--accent)}
.table-wrap{overflow-x:auto}
.trend-table{width:100%;border-collapse:collapse;font-size:.85rem}
.trend-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.trend-table td{padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
.spark{width:64px;height:24px;display:block}
.spark rect{fill:color-mix(in srgb,var(--accent-bar) 45%,var(--surface))}
.spark rect.now{fill:var(--accent-bar)}
.good-t{color:var(--good)}

/* assign money */
.as-top{position:sticky;top:-20px;z-index:2;background:var(--surface);margin:-20px -18px 0;padding:20px 18px 10px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.as-left{display:flex;align-items:baseline;justify-content:space-between;gap:10px;background:var(--accent-soft);border-radius:12px;padding:10px 14px}
.as-left .num{font-size:1.6rem;font-weight:600;color:var(--accent)}
.as-left.neg{background:var(--bad-soft)}.as-left.neg .num{color:var(--bad)}
.as-group{display:flex;flex-direction:column}
.as-gname{font-family:var(--f-display);font-size:1.05rem;padding:10px 0 2px}
.as-row{display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.as-name{font-weight:600;overflow-wrap:anywhere}
.as-meta{font-size:.8rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:2px 4px;align-items:center}
.as-need{border:0;background:var(--gold-soft);color:var(--gold);font-weight:700;border-radius:999px;padding:2px 8px;font-size:.78rem;cursor:pointer}
.as-foot{position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom,0px));background:var(--surface);margin:0 -18px -20px;padding:12px 18px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}

/* wide screens: use the space */
.app{max-width:1240px}
@media (min-width:1000px){
  .app{max-width:1600px;padding-inline:28px}
  .tabs{margin-inline:-28px;padding-inline:24px;align-items:center}
  #fab:not(.moved){right:max(24px,calc((100vw - 1600px)/2 + 40px));bottom:76px}
  .app{padding-block:8px 60px}
}
@media (min-width:1560px){
  .m-groups,#grpList{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .m-grid{grid-template-columns:minmax(320px,380px) minmax(0,1fr)!important}
}
.m-grid,.a-grid{display:flex;flex-direction:column;gap:18px}
.m-side,.m-main,.a-side,.a-main,.w-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.w-grid{display:flex;flex-direction:column;gap:18px}
.wish-list{display:flex;flex-direction:column;gap:10px}
.m-groups{display:flex;flex-direction:column;gap:18px}
@media (min-width:1000px){
  .m-grid{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:24px;align-items:start}
  .m-side .pool-amt{font-size:2.4rem}
  .a-grid{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);gap:24px;align-items:start}
  .a-side{position:sticky;top:calc(56px + env(safe-area-inset-top,0px))}
  .a-side .filters{grid-template-columns:1fr}
  .w-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
  .wish-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  #grpList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;row-gap:18px;align-items:start}
  #grpList>.pgroup{margin:0;display:flex;width:100%}
  .cat{padding:11px 16px}
}
@media (min-width:1280px){
  .m-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:18px;align-items:start}
  .m-groups .grp{margin:0}
  .w-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.split2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.seg{display:inline-flex;background:var(--surface-2);border-radius:12px;padding:4px;gap:4px;flex-wrap:wrap}
.seg-btn{border:0;background:transparent;border-radius:9px;padding:8px 14px;font-weight:600;cursor:pointer;color:var(--muted)}
.seg-btn[aria-checked="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.log-mode{display:flex;margin:0 0 14px}
.log-mode .seg-btn{flex:1;padding:10px 14px}
.danger-zone{border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.person{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.person-who{min-width:0;overflow-wrap:anywhere}
.person-role{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.person-role select.input{width:auto;min-height:36px;padding:4px 8px}

/* color palettes (Settings > Colors). Default (no attribute) is Morning Manna. Placed last so they win ties. */
/* Older palettes predate these brand colors: derive them from each palette's own colors (custom properties resolve per
   element, so this follows each palette's light and dark values). Clean blue and Morning Manna set their own. */
:root[data-palette]:not([data-palette="blue"]){--line-strong:color-mix(in srgb,var(--ink) 52%,var(--bg));--warn:var(--wait);--warn-soft:var(--gold-soft);--good-soft:color-mix(in srgb,var(--good) 12%,var(--surface));--on-honey:var(--ink)}
:root[data-palette="blue"]{--bg:#F5F7FB; --surface:#FFFFFF; --surface-2:#EEF2F7; --ink:#0F172A; --muted:#566074; --line:#DCE3EC; --line-strong:#788296; --accent:#2563EB; --accent-ink:#FFFFFF; --accent-soft:#E0EAFE; --accent-bar:#3B82F6; --gold:#B45309; --gold-bar:#F59E0B; --gold-soft:#FEF3C7; --bad:#DC2626; --bad-soft:#FEE2E2; --good:#15803D; --good-soft:#DCF2E3; --wait:#B45309; --warn:#B45309; --warn-soft:#FEF3C7; --on-honey:#0F172A; --hero:#2563EB; --hero-ink:#FFFFFF;}
@media (prefers-color-scheme: dark){:root[data-palette="blue"]:not([data-theme="light"]){--bg:#0B1220; --surface:#111A2E; --surface-2:#1A2540; --ink:#E6EBF5; --muted:#97A3BA; --line:#26324D; --line-strong:#5B6782; --accent:#60A5FA; --accent-ink:#0B1220; --accent-soft:#172A4D; --accent-bar:#3B82F6; --gold:#FBBF24; --gold-bar:#F59E0B; --gold-soft:#3A2A0A; --bad:#F87171; --bad-soft:#3B1515; --good:#4ADE80; --good-soft:#12301F; --wait:#FBBF24; --warn:#FBBF24; --warn-soft:#3A2A0A; --on-honey:#0B1220; --hero:#1E40AF; --hero-ink:#F8FAFC; color-scheme:dark;}}
:root[data-palette="blue"][data-theme="dark"]{--bg:#0B1220; --surface:#111A2E; --surface-2:#1A2540; --ink:#E6EBF5; --muted:#97A3BA; --line:#26324D; --line-strong:#5B6782; --accent:#60A5FA; --accent-ink:#0B1220; --accent-soft:#172A4D; --accent-bar:#3B82F6; --gold:#FBBF24; --gold-bar:#F59E0B; --gold-soft:#3A2A0A; --bad:#F87171; --bad-soft:#3B1515; --good:#4ADE80; --good-soft:#12301F; --wait:#FBBF24; --warn:#FBBF24; --warn-soft:#3A2A0A; --on-honey:#0B1220; --hero:#1E40AF; --hero-ink:#F8FAFC; color-scheme:dark;}
:root[data-palette="evergreen"]{--bg:#F2F4F1; --surface:#FFFFFF; --surface-2:#E7EBE6; --ink:#16211D; --muted:#5A6862; --line:#D3DAD4; --accent:#1D6A58; --accent-ink:#FFFFFF; --accent-soft:#D5E9E1; --accent-bar:#2F8A72; --gold:#94600F; --gold-bar:#D69A2D; --gold-soft:#F5E6C6; --bad:#B42318; --bad-soft:#FBE0DC; --good:#23734A; --wait:#8A5A0B; --hero:#1D6A58; --hero-ink:#FFFFFF;}
@media (prefers-color-scheme: dark){:root[data-palette="evergreen"]:not([data-theme="light"]){--bg:#0E1412; --surface:#151D1A; --surface-2:#1E2925; --ink:#E5EDE9; --muted:#97A69F; --line:#2A3631; --accent:#5FC2A2; --accent-ink:#07211A; --accent-soft:#17362D; --accent-bar:#4FB191; --gold:#E8B558; --gold-bar:#D9A441; --gold-soft:#3A2D12; --bad:#F4887C; --bad-soft:#3D1C18; --good:#71CF9A; --wait:#E8B558; --hero:#1F5C4D; --hero-ink:#F4FBF8; color-scheme:dark}}
:root[data-palette="evergreen"][data-theme="dark"]{--bg:#0E1412; --surface:#151D1A; --surface-2:#1E2925; --ink:#E5EDE9; --muted:#97A69F; --line:#2A3631; --accent:#5FC2A2; --accent-ink:#07211A; --accent-soft:#17362D; --accent-bar:#4FB191; --gold:#E8B558; --gold-bar:#D9A441; --gold-soft:#3A2D12; --bad:#F4887C; --bad-soft:#3D1C18; --good:#71CF9A; --wait:#E8B558; --hero:#1F5C4D; --hero-ink:#F4FBF8; color-scheme:dark}
:root[data-palette="navy"]{--bg:#F6F7F9; --surface:#FFFFFF; --surface-2:#ECEFF3; --ink:#111827; --muted:#5B6472; --line:#DDE2E8; --accent:#1E3A5F; --accent-ink:#FFFFFF; --accent-soft:#DDE6F1; --accent-bar:#2F5A8C; --gold:#8A6400; --gold-bar:#C9A227; --gold-soft:#F6EDCC; --bad:#C2410C; --bad-soft:#FDE7DA; --good:#15803D; --wait:#8A6400; --hero:#1E3A5F; --hero-ink:#FFFFFF;}
@media (prefers-color-scheme: dark){:root[data-palette="navy"]:not([data-theme="light"]){--bg:#0A101A; --surface:#111A27; --surface-2:#1A2535; --ink:#E8ECF2; --muted:#9AA4B4; --line:#263244; --accent:#8FB3E0; --accent-ink:#0A101A; --accent-soft:#18263A; --accent-bar:#4C7BB5; --gold:#E3C25A; --gold-bar:#C9A227; --gold-soft:#33290C; --bad:#F59E7A; --bad-soft:#3A1C10; --good:#4ADE80; --wait:#E3C25A; --hero:#1E3A5F; --hero-ink:#F8FAFC; color-scheme:dark}}
:root[data-palette="navy"][data-theme="dark"]{--bg:#0A101A; --surface:#111A27; --surface-2:#1A2535; --ink:#E8ECF2; --muted:#9AA4B4; --line:#263244; --accent:#8FB3E0; --accent-ink:#0A101A; --accent-soft:#18263A; --accent-bar:#4C7BB5; --gold:#E3C25A; --gold-bar:#C9A227; --gold-soft:#33290C; --bad:#F59E7A; --bad-soft:#3A1C10; --good:#4ADE80; --wait:#E3C25A; --hero:#1E3A5F; --hero-ink:#F8FAFC; color-scheme:dark}
:root[data-palette="coral"]{--bg:#F6F6F4; --surface:#FFFFFF; --surface-2:#ECECE8; --ink:#1E293B; --muted:#5E6673; --line:#DEDFDB; --accent:#334155; --accent-ink:#FFFFFF; --accent-soft:#E2E8F0; --accent-bar:#F2735A; --gold:#B4530A; --gold-bar:#F59E0B; --gold-soft:#FEF3C7; --bad:#B91C1C; --bad-soft:#FEE2E2; --good:#15803D; --wait:#B4530A; --hero:#334155; --hero-ink:#FFFFFF;}
@media (prefers-color-scheme: dark){:root[data-palette="coral"]:not([data-theme="light"]){--bg:#0F1115; --surface:#171A21; --surface-2:#20242D; --ink:#E7E9EE; --muted:#9CA3AF; --line:#2B303B; --accent:#CBD5E1; --accent-ink:#0F1115; --accent-soft:#232A36; --accent-bar:#F2735A; --gold:#FBBF24; --gold-bar:#F59E0B; --gold-soft:#3A2A0A; --bad:#F87171; --bad-soft:#3B1515; --good:#4ADE80; --wait:#FBBF24; --hero:#334155; --hero-ink:#F8FAFC; color-scheme:dark}}
:root[data-palette="coral"][data-theme="dark"]{--bg:#0F1115; --surface:#171A21; --surface-2:#20242D; --ink:#E7E9EE; --muted:#9CA3AF; --line:#2B303B; --accent:#CBD5E1; --accent-ink:#0F1115; --accent-soft:#232A36; --accent-bar:#F2735A; --gold:#FBBF24; --gold-bar:#F59E0B; --gold-soft:#3A2A0A; --bad:#F87171; --bad-soft:#3B1515; --good:#4ADE80; --wait:#FBBF24; --hero:#334155; --hero-ink:#F8FAFC; color-scheme:dark}
:root[data-palette="plum"]{--bg:#F7F5F8; --surface:#FFFFFF; --surface-2:#EEEAF0; --ink:#1F1626; --muted:#655A6E; --line:#E0DAE4; --accent:#6B2D6B; --accent-ink:#FFFFFF; --accent-soft:#F1E3F0; --accent-bar:#8E4A8E; --gold:#9A5B00; --gold-bar:#E0A030; --gold-soft:#FBEFD5; --bad:#B42318; --bad-soft:#FBE0DC; --good:#3F7D4E; --wait:#9A5B00; --hero:#5B2A5E; --hero-ink:#FFFFFF;}
@media (prefers-color-scheme: dark){:root[data-palette="plum"]:not([data-theme="light"]){--bg:#120D15; --surface:#1A1420; --surface-2:#241C2B; --ink:#EDE6F1; --muted:#A79BB2; --line:#31283A; --accent:#D6A6D9; --accent-ink:#120D15; --accent-soft:#2C1F33; --accent-bar:#A86BAA; --gold:#E9B95A; --gold-bar:#E0A030; --gold-soft:#33260F; --bad:#F4887C; --bad-soft:#3D1C18; --good:#7BC892; --wait:#E9B95A; --hero:#4A2350; --hero-ink:#F8F4FA; color-scheme:dark}}
:root[data-palette="plum"][data-theme="dark"]{--bg:#120D15; --surface:#1A1420; --surface-2:#241C2B; --ink:#EDE6F1; --muted:#A79BB2; --line:#31283A; --accent:#D6A6D9; --accent-ink:#120D15; --accent-soft:#2C1F33; --accent-bar:#A86BAA; --gold:#E9B95A; --gold-bar:#E0A030; --gold-soft:#33260F; --bad:#F4887C; --bad-soft:#3D1C18; --good:#7BC892; --wait:#E9B95A; --hero:#4A2350; --hero-ink:#F8F4FA; color-scheme:dark}
:root[data-palette="orange"]{--bg:#F7F6F4; --surface:#FFFFFF; --surface-2:#EEECE9; --ink:#111111; --muted:#5F5A55; --line:#E0DCD7; --accent:#B34700; --accent-ink:#FFFFFF; --accent-soft:#FFE8D6; --accent-bar:#FF7300; --gold:#854D0E; --gold-bar:#EAB308; --gold-soft:#FEF9C3; --bad:#DC2626; --bad-soft:#FEE2E2; --good:#15803D; --wait:#854D0E; --hero:#FF7300; --hero-ink:#111111;}
@media (prefers-color-scheme: dark){:root[data-palette="orange"]:not([data-theme="light"]){--bg:#0C0C0C; --surface:#161616; --surface-2:#202020; --ink:#EDEDED; --muted:#A3A3A3; --line:#2E2E2E; --accent:#FF8A33; --accent-ink:#111111; --accent-soft:#3A2210; --accent-bar:#FF7300; --gold:#FDE047; --gold-bar:#FACC15; --gold-soft:#3A3208; --bad:#F87171; --bad-soft:#3B1515; --good:#4ADE80; --wait:#FDE047; --hero:#FF7300; --hero-ink:#111111; color-scheme:dark}}
:root[data-palette="orange"][data-theme="dark"]{--bg:#0C0C0C; --surface:#161616; --surface-2:#202020; --ink:#EDEDED; --muted:#A3A3A3; --line:#2E2E2E; --accent:#FF8A33; --accent-ink:#111111; --accent-soft:#3A2210; --accent-bar:#FF7300; --gold:#FDE047; --gold-bar:#FACC15; --gold-soft:#3A3208; --bad:#F87171; --bad-soft:#3B1515; --good:#4ADE80; --wait:#FDE047; --hero:#FF7300; --hero-ink:#111111; color-scheme:dark}
:root[data-palette="desert"]{--bg:#F4EBDD; --surface:#FFFBF5; --surface-2:#EADFCC; --ink:#1F2A44; --muted:#5B5E6C; --line:#E0D3BE; --accent:#1F2A44; --accent-ink:#FFFFFF; --accent-soft:#DCE1EC; --accent-bar:#C4643A; --gold:#9A4A1F; --gold-bar:#C4643A; --gold-soft:#F7DFCF; --bad:#B42318; --bad-soft:#FBE0DC; --good:#2F6B3A; --wait:#9A4A1F; --hero:#C4643A; --hero-ink:#FFFFFF;}
@media (prefers-color-scheme: dark){:root[data-palette="desert"]:not([data-theme="light"]){--bg:#11141C; --surface:#191D28; --surface-2:#222736; --ink:#F1E9DC; --muted:#A9A69C; --line:#2E3444; --accent:#E9A27E; --accent-ink:#11141C; --accent-soft:#3A2519; --accent-bar:#C4643A; --gold:#F0B08C; --gold-bar:#D9784C; --gold-soft:#3A2416; --bad:#F4887C; --bad-soft:#3D1C18; --good:#8FD19E; --wait:#F0B08C; --hero:#B4572F; --hero-ink:#FFF8F2; color-scheme:dark}}
:root[data-palette="desert"][data-theme="dark"]{--bg:#11141C; --surface:#191D28; --surface-2:#222736; --ink:#F1E9DC; --muted:#A9A69C; --line:#2E3444; --accent:#E9A27E; --accent-ink:#11141C; --accent-soft:#3A2519; --accent-bar:#C4643A; --gold:#F0B08C; --gold-bar:#D9784C; --gold-soft:#3A2416; --bad:#F4887C; --bad-soft:#3D1C18; --good:#8FD19E; --wait:#F0B08C; --hero:#B4572F; --hero-ink:#FFF8F2; color-scheme:dark}
:root[data-palette="ink"]{--bg:#FAFAF7; --surface:#FFFFFF; --surface-2:#F0F0EB; --ink:#141414; --muted:#5C5C57; --line:#E2E2DC; --accent:#141414; --accent-ink:#FFFFFF; --accent-soft:#ECECE6; --accent-bar:#F2A900; --gold:#8A5D00; --gold-bar:#F2A900; --gold-soft:#FDF0C8; --bad:#C0261A; --bad-soft:#FBE3DF; --good:#1E7A3C; --wait:#8A5D00; --hero:#141414; --hero-ink:#FAFAF7;}
@media (prefers-color-scheme: dark){:root[data-palette="ink"]:not([data-theme="light"]){--bg:#0C0C0C; --surface:#161616; --surface-2:#202020; --ink:#F2F2EE; --muted:#A3A39C; --line:#2C2C2A; --accent:#F2A900; --accent-ink:#141414; --accent-soft:#33280A; --accent-bar:#F2A900; --gold:#F5C24A; --gold-bar:#F2A900; --gold-soft:#33280A; --bad:#F4887C; --bad-soft:#3D1C18; --good:#7BD89A; --wait:#F5C24A; --hero:#1E1E1E; --hero-ink:#F2F2EE; color-scheme:dark}}
:root[data-palette="ink"][data-theme="dark"]{--bg:#0C0C0C; --surface:#161616; --surface-2:#202020; --ink:#F2F2EE; --muted:#A3A39C; --line:#2C2C2A; --accent:#F2A900; --accent-ink:#141414; --accent-soft:#33280A; --accent-bar:#F2A900; --gold:#F5C24A; --gold-bar:#F2A900; --gold-soft:#33280A; --bad:#F4887C; --bad-soft:#3D1C18; --good:#7BD89A; --wait:#F5C24A; --hero:#1E1E1E; --hero-ink:#F2F2EE; color-scheme:dark}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.swatch{display:flex;flex-direction:column;gap:6px;align-items:flex-start;border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:10px;cursor:pointer;text-align:left;font-weight:600;color:var(--ink)}
.swatch[aria-checked="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.swatch .chips{display:flex;gap:4px}
.swatch .chips i{width:22px;height:22px;border-radius:6px;display:block;border:1px solid rgba(0,0,0,.08)}
.tx-desc{font-size:.85rem;color:var(--muted);margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere}
textarea.desc-in{min-height:58px}
.nc-opts{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:10px 0 4px;border-top:1px dashed var(--line);margin-top:4px}
.nc-opts select.input{width:auto;min-height:34px;padding:4px 8px;font-size:.85rem}
.nc-opts .money .input{min-height:34px;font-size:.85rem}
.nc-opts input[type=month]{min-height:34px;padding:4px 8px;width:auto}
.add-cat .opt-toggle{border:1px solid var(--line);background:var(--bg);border-radius:8px;width:42px;height:42px;cursor:pointer;color:var(--muted);font-size:1.1rem;flex:none}
.add-cat .opt-toggle[aria-expanded="true"]{color:var(--accent);border-color:var(--accent)}
.grp-list{display:flex;flex-direction:column;gap:14px}
.debt-drop{border-bottom:1px solid var(--line)}
.debt-drop-toggle{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:8px 16px 10px 16px;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--accent);text-align:left}
.debt-drop-toggle .muted{margin-left:auto;font-weight:500}
.debt-drop-list{display:flex;flex-direction:column;margin:0 16px 10px 22px;border-left:2px solid var(--line)}
.dd-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0 8px 12px;border-bottom:1px dashed var(--line)}
.dd-row:last-child{border-bottom:0}
.dd-main{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:.92rem}
.dd-main .muted{font-size:.8rem}
.dd-side{display:flex;align-items:center;gap:8px;flex:none}
.dd-side .btn{min-height:32px;padding:4px 12px}
.dd-loose{display:flex;flex-direction:column;gap:6px;padding:10px 0 4px 12px;font-size:.82rem}
.dd-loose-row{display:flex;justify-content:space-between;gap:10px;background:var(--gold-soft);border:1px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer;color:var(--ink);font-size:.85rem;text-align:left}
.dd-loose-note{font-size:.8rem;color:var(--gold);padding:0 16px 10px 38px}
.debt-top-btn{width:100%;background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.debt-hist-toggle{display:flex;align-items:center;gap:6px;background:none;border:0;padding:2px 0;font-size:.82rem;font-weight:600;color:var(--accent);cursor:pointer;text-align:left}
.debt-hist{display:flex;flex-direction:column;border-left:2px solid var(--line);padding-left:12px;margin:2px 0 4px 4px}
.dh-month{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 0 2px}
.dh-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line)}
.dh-row:last-child{border-bottom:0}
.dh-main{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:.88rem}
.dh-main .muted{font-size:.8rem}
.dh-side{display:flex;align-items:center;gap:6px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.dh-side .btn{min-height:30px;padding:3px 10px;font-size:.82rem}

/* phones: keep everything inside the screen, and stop iPhone from zooming in on inputs */
.opts .chk,.nc-opts .chk{max-width:100%;min-width:0;flex-wrap:wrap}
.opts select.input,.nc-opts select.input{max-width:100%;min-width:0}
@media (pointer:coarse){input.input,select.input,textarea.input{font-size:16px!important}}

/* verse in the header */
.top-verse{flex:1;min-width:0;margin:0;text-align:center;font-family:var(--f-display);font-style:italic;font-weight:400;font-size:.95rem;color:var(--muted);line-height:1.35}
.top-verse cite{font-family:var(--f-body);font-style:normal;font-size:.72rem;letter-spacing:.04em;margin-left:6px;white-space:nowrap}
@media (max-width:640px){
  .top{flex-wrap:wrap;row-gap:4px}
  .top-verse{order:3;flex-basis:100%;text-align:left;font-size:.85rem}
  .top-verse cite{font-size:.68rem}
}

/* what the others logged */
.others{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.others ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:2px;font-size:.9rem}
.setup-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:12px;font-size:.9rem}
.setup-steps li>div{margin-top:6px}
.env-list{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.env-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;background:var(--surface-2);border-radius:10px;padding:6px 8px}
.env-row code{font-family:var(--f-num);font-size:.75rem}
.env-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
@media (max-width:520px){.env-row{grid-template-columns:minmax(0,1fr) auto}.env-row code:first-child{grid-column:1/-1}}
.dbl-note{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.dd-fix{font-size:.78rem;color:var(--gold);padding:0;text-align:left}

/* masonry: groups fill the columns like bricks instead of leaving holes (row spans are set by app.js) */
.m-groups.mz,#grpList.mz{grid-auto-rows:4px;row-gap:0}

/* notifications bell and pop-up */
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;flex:none}
.bell:hover{border-color:var(--accent);color:var(--accent)}
.bell-count{position:absolute;top:-4px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--bad);color:#fff;font-size:.68rem;font-weight:700;line-height:18px;text-align:center;font-family:var(--f-body)}
.inbox{display:flex;flex-direction:column;gap:2px}
.inbox-day{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:12px 0 4px;font-family:var(--f-body)}
.inbox-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 8px;border-radius:12px}
.inbox-item.new{background:var(--accent-soft)}
.inbox-main{min-width:0;font-size:.92rem;overflow-wrap:anywhere}
.inbox-meta{font-size:.78rem;margin-top:2px}
.avatar{width:32px;height:32px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--ink);font-weight:700;font-size:.9rem;flex:none}
.avatar.heart{color:var(--bad);background:var(--bad-soft)}
.avatar.like{color:var(--accent);background:var(--accent-soft)}
.react-row{display:flex;gap:4px}
.react-btn{width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.react-btn.heart.on{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line));background:var(--bad-soft)}
.react-btn.like.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));background:var(--accent-soft)}
.react-btn:active{transform:scale(.92)}

/* celebration note after logging */
.cheer{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translate(-50%,-140%);z-index:40;width:min(440px,calc(100vw - 24px));display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:14px 40px 14px 14px;box-shadow:0 18px 40px rgba(15,23,42,.18);transition:transform .45s cubic-bezier(.2,1.2,.4,1),opacity .3s;opacity:0;cursor:pointer;overflow:hidden}
.cheer.show{transform:translate(-50%,0);opacity:1}
.cheer-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent)}
.cheer.k-giving .cheer-icon,.cheer.k-fun .cheer-icon,.cheer.k-wish .cheer-icon{background:var(--gold-soft);color:var(--gold)}
.cheer.k-debt .cheer-icon,.cheer.k-payoff .cheer-icon,.cheer.k-income .cheer-icon,.cheer.k-save .cheer-icon{background:color-mix(in srgb,var(--good) 16%,var(--surface));color:var(--good)}
.cheer.k-over .cheer-icon{background:var(--surface-2);color:var(--muted)}
.cheer-head{font-family:var(--f-display);font-size:1.15rem;line-height:1.2}
.cheer-line{font-size:.92rem;margin-top:2px}
.cheer-verse{margin:8px 0 0;padding:8px 0 0;border-top:1px solid var(--line);font-family:var(--f-display);font-style:italic;font-weight:400;font-size:.9rem;line-height:1.45;color:var(--ink)}
.cheer-verse cite{display:block;font-family:var(--f-body);font-style:normal;font-size:.72rem;letter-spacing:.04em;color:var(--muted);margin-top:4px}
.cheer-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border:0;background:none;color:var(--muted);font-size:1.2rem;cursor:pointer;border-radius:999px}
.cheer-burst{position:absolute;inset:0;pointer-events:none}
.cheer-burst i{position:absolute;left:34px;top:34px;width:7px;height:7px;border-radius:2px;background:var(--gold-bar);opacity:0}
.cheer.show .cheer-burst i{animation:cheerPop 1.1s ease-out forwards}
.cheer-burst i:nth-child(3n){background:var(--accent)}.cheer-burst i:nth-child(3n+1){background:var(--good)}
.cheer-burst i:nth-child(1){--x:120px;--y:-10px}.cheer-burst i:nth-child(2){--x:200px;--y:30px}.cheer-burst i:nth-child(3){--x:260px;--y:-6px}.cheer-burst i:nth-child(4){--x:90px;--y:50px}
.cheer-burst i:nth-child(5){--x:320px;--y:40px}.cheer-burst i:nth-child(6){--x:160px;--y:70px}.cheer-burst i:nth-child(7){--x:360px;--y:10px}.cheer-burst i:nth-child(8){--x:60px;--y:-20px}
.cheer-burst i:nth-child(9){--x:240px;--y:80px}.cheer-burst i:nth-child(10){--x:300px;--y:-14px}.cheer-burst i:nth-child(11){--x:140px;--y:-24px}.cheer-burst i:nth-child(12){--x:380px;--y:60px}
.cheer-burst i:nth-child(13){--x:20px;--y:60px}.cheer-burst i:nth-child(14){--x:220px;--y:-20px}
@keyframes cheerPop{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(220deg)}}
@media (prefers-reduced-motion:reduce){.cheer{transition:opacity .2s;transform:translate(-50%,0)}.cheer-burst{display:none}}
.cheer{pointer-events:none}.cheer.show{pointer-events:auto}

/* purchases waiting on a final amount */
.kind.k-pend{background:var(--gold-soft);color:var(--gold)}
.tx.pending .tx-amt{opacity:.8;font-style:italic}
.tx-was{font-size:.72rem;color:var(--muted);font-style:normal;text-decoration:line-through}
.pend-chk{font-size:.85rem}
.avatar.pend{background:var(--gold-soft);color:var(--gold)}

/* paychecks */
.pay-card{gap:10px}
.pay-row{display:flex;flex-direction:column;gap:5px;padding:4px 0}
.pay-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:.92rem}
.pay-top .muted{font-size:.8rem}
.pay-meta{font-size:.8rem}
.pay-meta .linkish{font-size:.8rem;padding:0}
.pay-totals{display:flex;flex-wrap:wrap;gap:10px 22px}
.pay-totals>div{display:flex;flex-direction:column;gap:2px}
.pay-totals .num{font-size:1.2rem}
.pp-list{display:flex;flex-direction:column}
.pp-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;padding:9px 0;border-bottom:1px solid var(--line)}
.pp-row:last-child{border-bottom:0}
.pp-name{display:flex;flex-direction:column;min-width:0;font-size:.92rem}
.pp-name .muted{font-size:.78rem}
.pp-seg .seg-btn{padding:6px 10px;font-size:.8rem}

/* bills first, before payday, cover it, timeline */
.alert.heads-up{background:var(--gold-soft);justify-content:space-between;border:1px solid color-mix(in srgb,var(--gold) 35%,transparent)}
.alert.heads-up b.num{color:var(--bad)}
.alert.heads-up .btn{min-height:36px}
.bp-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;background:var(--accent-soft);border-radius:12px;padding:10px 12px}
.bp-sum.short{background:var(--bad-soft)}
.bp-sum div{display:flex;flex-direction:column;gap:2px;min-width:0}
.bp-sum .lbl{font-size:.75rem;color:var(--muted)}
.bp-sum .num{font-weight:600;font-size:1.05rem}
.as-bills{background:var(--surface-2);border-radius:12px;padding:2px 12px 10px;margin-bottom:6px}
.as-bills .as-row{grid-template-columns:minmax(0,1fr) auto}
.as-bills .as-gname .muted{font-family:var(--f-body);font-size:.78rem;font-weight:400}
.as-lock{font-weight:600;text-align:right;white-space:nowrap}
.lock-ic{width:12px;height:12px;margin-right:6px;vertical-align:-1px;opacity:.5}
.cv-pool{display:flex;justify-content:space-between;gap:10px;background:var(--accent-soft);border-radius:10px;padding:10px 12px;font-weight:600}
.tl{display:flex;flex-direction:column}
.tl-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:10px;align-items:start;padding:9px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.tl-row .muted{font-size:.8rem}
.tl-date{color:var(--muted);font-size:.82rem;padding-top:2px}
.tl-run{font-weight:600}
.tl-row.neg{background:var(--bad-soft);margin:0 -10px;padding:9px 10px;border-radius:8px}
.tl-row.neg .tl-run{color:var(--bad)}
.tl-start,.tl-end{font-weight:600}
.tl-end{border-bottom:0}
.setup-box{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.setup-box textarea{width:100%;font-family:var(--f-num);font-size:.8rem;margin:6px 0}

/* usual paycheck amounts on the Plan tab */
.pc-set{display:flex;flex-direction:column;gap:6px;background:var(--surface-2);border-radius:12px;padding:10px 12px}
.pc-row{display:grid;grid-template-columns:minmax(56px,.7fr) minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center;max-width:420px}
.pc-title{font-family:var(--f-display);font-size:1rem}
.pc-head{font-size:.75rem;color:var(--muted);font-weight:600}
.pay-totals .pt-sub{font-size:.8rem}

/* compare with the bank */
.bk-entry{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.bk-help{border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.bk-help summary{cursor:pointer;font-weight:600;font-size:.9rem}
.bk-help[open] summary{margin-bottom:8px}
.bk-help p{margin:0;font-size:.85rem}
#bk_file{padding:8px;font-size:.85rem}
.bk-sum{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:8px;background:var(--surface-2);border-radius:12px;padding:10px 12px}
.bk-sum>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.bk-sum .lbl{font-size:.75rem;color:var(--muted)}
.bk-sum b{font-size:1rem}
.bk-list{display:flex;flex-direction:column}
.bk-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:start;padding:9px 0;border-bottom:1px solid var(--line)}
.bk-row:last-child{border-bottom:0}
.bk-row b{word-break:break-word}
.bk-row .muted{font-size:.8rem}
.bk-row>.num{font-weight:600;white-space:nowrap}
.bk-act{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.bk-row.matched{font-size:.88rem}
.bk-full{font-size:.72rem!important;opacity:.8;word-break:break-word}

/* plan next month from real spending */
.np-entry{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;border-top:1px solid var(--line);padding-top:10px}
.kind.k-over{background:var(--bad-soft);color:var(--bad)}

/* room for extra debt payments */
.extra-room{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.extra-room h3{margin:0}
.xr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.xr{display:flex;flex-direction:column;gap:6px}
.xr .lbl{font-size:.75rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}

/* insights */
.ins-list{display:flex;flex-direction:column;gap:10px}
.ins{display:grid;grid-template-columns:10px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border-radius:12px;background:var(--surface-2)}
.ins p{margin:0;font-size:.92rem}
.ins-dot{width:10px;height:10px;border-radius:50%;margin-top:6px;background:var(--accent)}
.ins.warn{background:var(--gold-soft)}.ins.warn .ins-dot{background:var(--gold)}
.ins.good .ins-dot{background:var(--good)}
.ins-acts{display:flex;gap:14px;margin-top:4px}
.ins-acts .linkish{font-size:.82rem}
.ins-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;border-top:1px solid var(--line);padding-top:10px}
.sum-text{width:100%;font-family:var(--f-num);font-size:.75rem;line-height:1.45;min-height:280px}

/* swiping between tabs */
@keyframes swipeL{from{transform:translateX(36px);opacity:.35}to{transform:none;opacity:1}}
@keyframes swipeR{from{transform:translateX(-36px);opacity:.35}to{transform:none;opacity:1}}
#view.swipe-l{animation:swipeL .22s ease-out}
#view.swipe-r{animation:swipeR .22s ease-out}
.xr-math{display:flex;flex-direction:column;background:var(--surface-2);border-radius:10px;padding:8px 12px}
.xr-math>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0;font-size:.9rem}
.xr-math small{font-size:.75rem}
.xr-total{border-top:1px solid var(--line);margin-top:2px;padding-top:7px!important;font-weight:700}
.xr-total .num{color:var(--good)}.xr-total.neg .num{color:var(--bad)}
.xr-head{font-size:.72rem!important;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.xr-total.zero .num{color:var(--muted)}
.alert.roll-card{background:color-mix(in srgb,var(--good) 14%,var(--surface));flex-direction:column;align-items:stretch}

/* month-end close and year in review */
.ci-modes{max-width:460px}
.mc-banner{justify-content:space-between}
.ci-month{max-width:240px}
.mc-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0;border-bottom:1px dashed var(--line)}
.yr-bar{display:flex;flex-direction:column;gap:4px;padding:4px 0}
.yr-lbl{display:flex;justify-content:space-between;gap:10px;font-size:.9rem}

/* cash flow diagram: reference categorical palette, fixed order by group (validated light and dark) */
.cf-root{--cf1:#2a78d6;--cf2:#eb6834;--cf3:#1baf7a;--cf4:#eda100;--cf5:#e87ba4;--cf6:#008300;--cf7:#6250d6;--cfo:#9b998f;--cfk:#52514e;--cfi:#52514e;--cfh:#b5b3aa}
@media (prefers-color-scheme: dark){:root:where(:not([data-theme="light"])) .cf-root{--cf1:#3987e5;--cf2:#d95926;--cf3:#199e70;--cf4:#c98500;--cf5:#d55181;--cf6:#008300;--cf7:#9085e9;--cfo:#7d7b73;--cfk:#c3c2b7;--cfi:#c3c2b7;--cfh:#6b6a63}}
:root[data-theme="dark"] .cf-root{--cf1:#3987e5;--cf2:#d95926;--cf3:#199e70;--cf4:#c98500;--cf5:#d55181;--cf6:#008300;--cf7:#9085e9;--cfo:#7d7b73;--cfk:#c3c2b7;--cfi:#c3c2b7;--cfh:#6b6a63}
.cf-svg{width:100%;height:auto;display:block;overflow:visible}
.cf-node.cf1,.cf-key.cf1{fill:var(--cf1);background:var(--cf1)}.cf-rib.cf1{fill:var(--cf1)}
.cf-node.cf2,.cf-key.cf2{fill:var(--cf2);background:var(--cf2)}.cf-rib.cf2{fill:var(--cf2)}
.cf-node.cf3,.cf-key.cf3{fill:var(--cf3);background:var(--cf3)}.cf-rib.cf3{fill:var(--cf3)}
.cf-node.cf4,.cf-key.cf4{fill:var(--cf4);background:var(--cf4)}.cf-rib.cf4{fill:var(--cf4)}
.cf-node.cf5,.cf-key.cf5{fill:var(--cf5);background:var(--cf5)}.cf-rib.cf5{fill:var(--cf5)}
.cf-node.cf6,.cf-key.cf6{fill:var(--cf6);background:var(--cf6)}.cf-rib.cf6{fill:var(--cf6)}
.cf-node.cf7,.cf-key.cf7{fill:var(--cf7);background:var(--cf7)}.cf-rib.cf7{fill:var(--cf7)}
.cf-node.cfo,.cf-key.cfo{fill:var(--cfo);background:var(--cfo)}.cf-rib.cfo{fill:var(--cfo)}
.cf-node.cfk,.cf-key.cfk{fill:var(--cfk);background:var(--cfk)}.cf-rib.cfk{fill:var(--cfk)}
.cf-node.cfi,.cf-key.cfi{fill:var(--cfi);background:var(--cfi)}
.cf-node.cfh,.cf-key.cfh{fill:var(--cfh);background:var(--cfh)}
.cf-rib{opacity:.28;transition:opacity .15s}.cf-rib:hover{opacity:.6}
.cf-node{stroke:var(--surface);stroke-width:1}
.cf-lbl{font-size:12px;fill:var(--ink)}.cf-amt{fill:var(--muted);font-family:var(--f-num);font-size:11px}
.cf-left{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.82rem}
.cf-key{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* bill calendar */
.cal-nav{display:flex;align-items:center;justify-content:center;gap:14px}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.cal-h{text-align:center;font-size:.72rem;color:var(--muted);font-weight:700;padding:2px 0}
.cal-cell{min-height:46px;border:1px solid var(--line);border-radius:8px;padding:3px 4px;display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;gap:3px}
.cal-cell.empty{border:0}
.cal-cell.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cal-d{width:100%;font-size:.72rem;color:var(--muted)}
.cal-dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--muted)}
.cal-dot.cd-bill{background:var(--gold)}.cal-dot.cd-debt{background:var(--accent)}.cal-dot.cd-pay{background:var(--good);border-radius:2px}
.cal-dot.cd-paid{background:transparent;border:2px solid var(--good);width:8px;height:8px;box-sizing:border-box}
.cal-dot.cd-late{background:var(--bad)}
.cal-key{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.75rem;color:var(--muted)}.cal-key .cal-dot{margin-right:4px;vertical-align:-1px}
.cal-list{display:flex;flex-direction:column}
.cal-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);font-size:.9rem;align-items:baseline}
.cal-row.paid{color:var(--muted)}.cal-row.paid .cal-name{text-decoration:none}
.cal-date{font-size:.8rem;color:var(--muted)}
/* questions */
.ask-q{background:var(--surface-2);border-radius:10px;padding:10px 12px}
.ask-q.ans{background:var(--accent-soft)}
/* flexible spending */
.flex-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.flex-big .num{font-size:1.6rem;font-weight:600}
.prog{position:relative}
.prog-mark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.45;border-radius:1px}
.prog.warn i{background:var(--gold-bar)}
/* tags */
.tag-sugg{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.tx-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.tag{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:999px;padding:1px 9px;font-size:.75rem;cursor:pointer}
.cat-auto{font-size:.8rem;margin-top:-8px}
.cat-auto:empty{display:none}
/* net worth and goals */
.nw-hist{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.nw-m{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--surface-2);border-radius:8px;padding:6px 8px;min-width:76px;font-size:.75rem}
.nw-m b{font-size:.78rem}
.nw-add{display:grid;grid-template-columns:minmax(0,1fr) 120px auto;gap:6px;align-items:center}
.goal-eta{font-size:.8rem;margin-top:4px}

/* lean months */
.ln-details summary{cursor:pointer;font-weight:600;padding:4px 0}
.ln-head,.ln-row{display:grid;grid-template-columns:minmax(0,1fr) 84px 118px;gap:8px;align-items:center}
.ln-head{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:8px 0 4px}
.ln-head span:nth-child(2),.ln-reg{text-align:right}
.ln-row{padding:4px 0;border-bottom:1px dashed var(--line)}
.ln-name{font-size:.9rem;min-width:0;overflow-wrap:anywhere}
.ln-sug{font-size:.75rem}
.ln-reg{font-size:.85rem}
.alert.lean-sug{background:var(--gold-soft)}
.lean-banner,.lean-sug{display:flex;flex-direction:column;align-items:stretch;gap:10px}
@media (max-width:420px){.ln-head,.ln-row{grid-template-columns:minmax(0,1fr) 70px 104px;gap:6px}}

/* giving */
.gv-months{display:flex;gap:4px;overflow-x:auto;padding-bottom:2px}
.gv-m{flex:1 0 44px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.72rem;color:var(--muted)}
.gv-m b{font-size:.72rem;color:var(--ink);font-weight:600}
.gv-bar{height:64px;width:100%;max-width:28px;display:flex;align-items:flex-end;background:var(--surface-2);border-radius:6px;overflow:hidden}
.gv-bar i{display:block;width:100%;background:var(--gold);border-radius:6px 6px 0 0}
.gv-list{display:flex;flex-direction:column}
.gv-row{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);padding:9px 2px;text-align:left;font:inherit;cursor:pointer}
.gv-row:last-child{border-bottom:0}
.gv-row .muted{font-size:.8rem}
.gv-year{width:auto;max-width:120px;min-height:36px;padding:4px 10px}
.pct-in{display:flex;align-items:center;gap:8px;max-width:160px}
.pct-in span{font-weight:600;color:var(--muted)}

/* in my pocket */
.pocket{background:var(--surface);border:2px solid var(--accent);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.pocket-lbl{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.pocket-amt{font-size:2.1rem;font-weight:600;line-height:1.1}
.pocket-sub{margin:0;font-size:.88rem}
.pocket-math{font-size:.78rem}
.pocket-free{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px;padding-top:8px;border-top:1px dashed var(--line);font-size:.88rem}
.pocket-free>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.pocket-free small{font-size:.76rem}
.pocket-pace{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.bp-toggle{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:4px 0;margin:-4px 0;color:inherit;font:inherit;cursor:pointer;text-align:left}
.bp-toggle h2{margin:0}
.bp-chev{color:var(--muted);transition:transform .2s ease}
.bp-toggle[aria-expanded="false"] .bp-chev{transform:rotate(-90deg)}
.bp-line{display:block;width:100%;border:0;background:none;padding:2px 0;color:var(--muted);font:inherit;font-size:.88rem;text-align:left;cursor:pointer}
.pocket-pill{border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:3px 10px;font-weight:700;font-size:.8rem;font-family:var(--f-num);cursor:pointer;margin-right:4px}
/* lessons */
.lesson{display:flex;flex-direction:column;gap:10px}
.lesson p{margin:0;line-height:1.6}
.lesson-verse{border-left:3px solid var(--gold);background:var(--gold-soft);border-radius:0 10px 10px 0;padding:10px 14px}
.lesson-verse p{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:1.02rem}
.lesson-verse cite{display:block;margin-top:4px;font-style:normal;font-size:.8rem;color:var(--muted)}
.lesson-try{background:var(--accent-soft);border-radius:10px;padding:10px 12px}
.lesson-list{display:flex;flex-direction:column}
.lesson-item{border-bottom:1px solid var(--line);padding:6px 0}
.lesson-item summary{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;cursor:pointer;list-style:none}
.lesson-item summary::-webkit-details-marker{display:none}
.lesson-item[open] summary{margin-bottom:10px}
.lesson-n{width:26px;height:26px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-size:.78rem;font-weight:700}
.lesson-t{font-weight:600}.lesson-t .muted{font-weight:400;font-size:.8rem}
/* what if */
.wi-cmp{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wi-cmp>div{display:flex;flex-direction:column;gap:2px;background:var(--surface-2);border-radius:10px;padding:10px 12px}
.wi-cmp .wi-alt{background:var(--accent-soft)}
.wi-cmp .lbl{font-size:.75rem;color:var(--muted)}
.wi-cmp .muted{font-size:.78rem}
/* projected balance */
.proj-svg{width:100%;height:auto;display:block;overflow:visible}
.proj-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.proj-zero{stroke:var(--bad);stroke-width:1;stroke-dasharray:4 3;opacity:.7}
.proj-low{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.proj-lbl{font-size:11px;fill:var(--ink);font-weight:600}
.proj-ax{font-size:10px;fill:var(--muted)}
.proj-hit{fill:transparent}.proj-hit:hover{fill:var(--accent);opacity:.08}

/* ---------- feels like an app ---------- */
html{-webkit-tap-highlight-color:transparent}
button:not(.drag):not(.gdrag):not(#fab),.btn,.tab,select,label.chk{touch-action:manipulation}
button,.btn,.tab,.seg-btn,.swatch,.pocket-pill,.bell{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.btn,.icon-btn,.seg-btn,.swatch,.tab,.pocket-pill{transition:transform .08s ease}
.btn:active:not(:disabled),.icon-btn:active,.seg-btn:active,.swatch:active,.pocket-pill:active{transform:scale(.97)}
@media (display-mode:standalone){html,body{overscroll-behavior-y:none}}
@media (prefers-reduced-motion:reduce){.btn,.icon-btn,.seg-btn,.swatch,.tab,.pocket-pill{transition:none}.btn:active:not(:disabled),.icon-btn:active,.seg-btn:active,.swatch:active,.pocket-pill:active{transform:none}}

/* splash while the budget opens: the mark settles in, breathes while it waits, then everything fades
   together while the budget eases up underneath */
#splash{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:var(--bg);
  transition:opacity .5s cubic-bezier(.4,0,.2,1),visibility 0s linear .5s}
.splash-mark{display:flex;flex-direction:column;align-items:center;gap:14px;animation:splashIn .7s cubic-bezier(.2,.8,.2,1) both;transition:transform .5s cubic-bezier(.4,0,.2,1)}
#splash svg{border-radius:18px;box-shadow:var(--shadow);animation:splashBreathe 2.4s ease-in-out .8s infinite}
#splash .splash-name{font-family:var(--f-display,var(--f-body));font-size:1.6rem;color:var(--ink);letter-spacing:.01em;opacity:0;transition:opacity .35s ease}
html.fonts-ok #splash .splash-name{opacity:1}
html.app-ready #splash{opacity:0;visibility:hidden;pointer-events:none}
html.app-ready .splash-mark{transform:scale(1.04)}
html:not(.app-ready) .app,html:not(.app-ready) #fab{opacity:0}
/* animate the content, never .app itself: a transform on .app would pin the bottom bar and sidebar to the page instead of the screen */
html.app-ready #view,html.app-ready .top{animation:appIn .55s cubic-bezier(.2,.8,.2,1) .08s backwards}
html.app-ready #fab{transition:opacity .4s ease .25s}
@keyframes splashIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes splashBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes appIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#splash{transition:opacity .2s linear,visibility 0s linear .2s}.splash-mark,#splash svg,html.app-ready #view,html.app-ready .top{animation:none}html.app-ready .splash-mark{transform:none}}

/* passcode */
html.locked .app,html.locked #fab,html.locked #sheetWrap,html.locked #toast{visibility:hidden!important}
html.privacy .app,html.privacy #sheetWrap{filter:blur(18px)}
#lock{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:calc(24px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px));overflow-y:auto;touch-action:manipulation}
#lock[hidden]{display:none}
#lock:not([hidden]){animation:lockIn .25s ease both}
@keyframes lockIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){#lock:not([hidden]){animation:none}}
.lock-in{width:100%;max-width:320px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.lock-in>svg{width:56px;height:56px;margin-bottom:6px}
.lock-title{margin:0;font-size:1.2rem;font-weight:600;color:var(--ink)}
.lock-sub{margin:0;color:var(--muted);font-size:.9rem}
.lock-dots{display:flex;gap:16px;margin:10px 0 2px}
.lock-dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--accent);background:transparent;transition:background .1s}
.lock-dots i.on{background:var(--accent)}
.lock-dots.shake{animation:lockShake .35s}
@keyframes lockShake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.lock-msg{margin:0;min-height:1.4em;font-size:.88rem;color:var(--bad,#c0392b)}
.lock-pad{display:grid;grid-template-columns:repeat(3,72px);gap:14px 22px;justify-content:center;margin-top:6px}
.lock-pad button{width:72px;height:72px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:1.6rem;font-family:var(--f-num);font-weight:500;cursor:pointer;display:grid;place-items:center;-webkit-user-select:none;user-select:none;transition:transform .08s,background .08s}
.lock-pad button:active:not(:disabled){transform:scale(.94);background:var(--accent-soft)}
.lock-pad button:disabled{opacity:.4}
.lock-pad .lock-del{border-color:transparent;background:transparent;color:var(--muted)}
.lock-link{margin-top:8px;border:0;background:none;color:var(--accent);font-weight:600;font-size:.92rem;padding:8px 12px;cursor:pointer}
.lock-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
@media (prefers-reduced-motion:reduce){.lock-dots.shake{animation:none}}

/* ---------- navigation: bottom bar on phones, sidebar on big screens, top tabs in between ---------- */
.side-brand,.tab-ico,.tab-more,.tab-short{display:none}
.tab-lbl{display:inline}
@media (max-width:759px){
  html.has-nav .tabs{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:15;margin:0;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));display:flex;gap:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding-inline:4px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border-bottom:0;border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px)}
  html.has-nav .tab{position:relative;flex:0 0 21.5%;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 4px;border:0;border-radius:12px;font-size:.68rem;font-weight:600;color:var(--muted);min-width:0}
  html.has-nav .tab .tab-ico{display:block}
  html.has-nav .tab .tab-long{display:none}
  html.has-nav .tab .tab-short{display:inline}
  html.has-nav .tab-more .tab-lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html.has-nav .tab-more{display:none}
  html.has-nav .tab[aria-selected="true"]{color:var(--accent);border-bottom-color:transparent}
  html.has-nav .tab[aria-selected="true"] .tab-ico{stroke-width:2.2}
  html.has-nav .tab .dot{position:absolute;top:4px;left:calc(50% + 8px);margin:0}
  html.has-nav #fab:not(.moved){bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  html.has-nav #toast{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:1000px){
  html.has-nav body{padding-left:224px}
  html.has-nav .tabs{position:fixed;top:0;bottom:0;left:0;width:224px;margin:0;padding:calc(18px + env(safe-area-inset-top,0px)) 12px 18px;display:flex;flex-direction:column;align-items:stretch;gap:2px;overflow-y:auto;border-bottom:0;border-right:1px solid var(--line);background:var(--surface)}
  html.has-nav .side-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px;font-family:var(--f-display);font-size:1.35rem;color:var(--ink)}
  html.has-nav .side-brand svg{width:32px;height:32px;flex:none}
  html.has-nav .tab{display:flex;align-items:center;gap:12px;padding:10px 12px;border:0;border-radius:10px;font-size:.95rem;text-align:left}
  html.has-nav .tab .tab-ico{display:block;flex:none}
  html.has-nav .tab:hover{background:var(--surface-2);color:var(--ink)}
  html.has-nav .tab[aria-selected="true"]{background:var(--accent-soft);color:var(--accent);border-bottom-color:transparent}
  html.has-nav .tab .dot{margin-left:auto}
  html.has-nav .tab-more{display:none}
  html.has-nav .top .brand{display:none}
  html.has-nav .a-side{top:16px}
  html.has-nav #fab:not(.moved){right:max(24px,calc((100vw - 224px - 1600px)/2 + 40px))}
}
.more-list{display:flex;flex-direction:column;gap:6px}
.more-item{display:flex;align-items:center;gap:14px;width:100%;padding:14px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font-size:1rem;font-weight:600;text-align:left;cursor:pointer}
.more-item .tab-ico{display:block;color:var(--accent)}
.more-item[aria-current="true"]{border-color:var(--accent);background:var(--accent-soft)}
.more-item .more-chev{margin-left:auto;color:var(--muted)}
.more-item .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold-bar)}

/* Debt category: what the money is waiting on */
.debt-detail{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.dd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.dd-list li{display:grid;grid-template-columns:minmax(0,1fr) 4.2em 6.2em;gap:10px;align-items:baseline;font-size:.92rem}
.dd-list li span:first-child{overflow-wrap:anywhere}
.dd-list li .muted{font-size:.82rem}
.dd-status{margin:0;font-weight:600}
.dd-status.good{color:var(--good)}
.dd-status.bad{color:var(--bad)}
.dd-list li .muted,.dd-list li b{text-align:right}
.dd-note{margin:0;font-size:.85rem}
/* every category inside Move money */
.mv-all{border-top:1px solid var(--line);padding-top:10px}
.mv-all summary{cursor:pointer;font-weight:700;font-size:.92rem;padding:4px 0;list-style-position:inside}
.mv-pick{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:8px 0}
.mv-pick .seg-btn{padding:6px 14px}
.mv-head,.mv-row{display:grid;grid-template-columns:minmax(0,1fr) 7.2em 5.8em;gap:8px;align-items:center}
.mv-head{font-size:.68rem;font-weight:700;letter-spacing:.03em;white-space:nowrap;text-transform:uppercase;color:var(--muted);padding:0 8px 4px}
.mv-head span,.mv-row .num{text-align:right}
.mv-grp{font-size:.78rem;font-weight:700;color:var(--muted);margin:10px 8px 2px}
.mv-row{width:100%;border:0;background:none;color:var(--ink);padding:8px;border-radius:10px;font-size:.9rem;text-align:left;cursor:pointer}
.mv-row:hover{background:var(--surface-2)}
.mv-row.on{background:var(--accent-soft)}
.mv-name{min-width:0;overflow-wrap:anywhere}
.mv-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:.68rem;font-weight:700;vertical-align:1px}
.mv-tag.to{background:var(--good);color:var(--bg)}

/* ===================== native feel ===================== */
/* pop-ups: slide up from the bottom on phones, gentle pop on big screens; a grab handle to pull them closed */
.sheet-grab{display:none}
@media (max-width:639px){
  .sheet-grab{display:block;flex:none;width:38px;height:5px;border-radius:3px;background:var(--line);margin:-10px auto -4px;cursor:grab}
  #sheetWrap.opening .sheet{animation:sheetUp .38s cubic-bezier(.2,.9,.25,1) both}
  #sheetWrap.closing .sheet{animation:sheetDown .26s cubic-bezier(.4,0,1,1) both}
}
@media (min-width:640px){
  #sheetWrap.opening .sheet{animation:sheetPop .28s cubic-bezier(.2,.9,.25,1) both}
  #sheetWrap.closing .sheet{animation:sheetFade .2s ease both}
}
#sheetWrap.opening .scrim{animation:scrimIn .3s ease both}
#sheetWrap.closing .scrim{animation:scrimOut .26s ease both}
#sheetWrap.closing{pointer-events:none}
.sheet{transition:transform .3s cubic-bezier(.2,.9,.25,1)}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheetDown{from{transform:translateY(var(--drag,0))}to{transform:translateY(100%)}}
@keyframes sheetPop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sheetFade{to{opacity:0;transform:translateY(8px) scale(.99)}}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
@keyframes scrimOut{to{opacity:0}}

/* sections slide in from the side you're heading */
#view.slide-l{animation:slideL .32s cubic-bezier(.2,.8,.2,1) backwards}
#view.slide-r{animation:slideR .32s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes slideL{from{opacity:.2;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes slideR{from{opacity:.2;transform:translateX(-28px)}to{opacity:1;transform:none}}

/* slim title bar on phones once the big title scrolls away */
#minibar{position:fixed;top:0;left:0;right:0;z-index:14;padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px;text-align:center;
  background:var(--bg);
  border-bottom:1px solid transparent;opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;transition:opacity .2s ease,transform .2s ease,border-color .2s,visibility 0s linear .2s}
/* solid, with no frosted glass: a see-through bar showed the verse and big title behind it as a blurry smear */
#minibar.show{opacity:1;visibility:visible;transform:none;pointer-events:auto;border-bottom-color:var(--line);transition:opacity .2s ease,transform .2s ease,border-color .2s,visibility 0s}
#minibar .mb-title{font-weight:650;font-size:1rem;color:var(--ink)}
html.locked #minibar,html:not(.app-ready) #minibar{display:none}
@media (min-width:760px){#minibar{display:none}}
@media (max-width:759px){html.has-nav #view h1{font-size:2rem;line-height:1.1}}

/* shapes while loading */
.skeleton{display:flex;flex-direction:column;gap:16px}
.sk-row{display:flex;align-items:center;gap:12px}
.sk-card{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.sk{display:block;border-radius:8px;background:linear-gradient(90deg,var(--surface-2) 0%,color-mix(in srgb,var(--surface-2) 50%,var(--surface)) 50%,var(--surface-2) 100%);background-size:200% 100%;animation:skShine 1.3s linear infinite}
@keyframes skShine{from{background-position:100% 0}to{background-position:-100% 0}}

/* swipe a transaction for Edit and Delete */
.tx[data-tx]{position:relative;overflow:hidden;--sx:0px;-webkit-touch-callout:none}
.tx[data-tx]>*:not(.swipe-acts){transform:translateX(var(--sx));transition:transform .25s cubic-bezier(.2,.9,.25,1)}
.tx[data-tx].sw-drag>*:not(.swipe-acts){transition:none}
.swipe-acts{position:absolute;top:0;right:0;bottom:0;display:flex;width:148px;transform:translateX(calc(148px + var(--sx)));transition:transform .25s cubic-bezier(.2,.9,.25,1)}
.tx.sw-drag .swipe-acts{transition:none}
.swipe-acts button{flex:1;border:0;color:#fff;font-weight:700;font-size:.9rem;cursor:pointer}
.swipe-acts .sw-edit{background:var(--accent);color:var(--accent-ink)}
.swipe-acts .sw-del{background:var(--bad)}
.tx[data-tx]:not(.sw-open):not(.sw-drag) .swipe-acts{visibility:hidden}

/* press and hold menu */
.cat,.tx[data-tx]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
#qmenu{position:fixed;inset:0;z-index:40}
.qm-scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--scrim) 60%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:scrimIn .18s ease both}
.qm{position:fixed;min-width:220px;max-width:min(300px,calc(100vw - 24px));background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;animation:qmIn .18s cubic-bezier(.2,.9,.25,1) both;transform-origin:top center}
.qm-title{padding:10px 16px 8px;font-size:.78rem;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qm-item{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);padding:12px 16px;font-size:1rem;cursor:pointer}
.qm-item:last-child{border-bottom:0}
.qm-item:active,.qm-item:hover{background:var(--surface-2)}
.qm-item.danger{color:var(--bad)}
.qm-src{transform:scale(1.02);transition:transform .15s}
@keyframes qmIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}

/* iPhone-style switches for on/off choices */
label.chk input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;width:44px;height:26px;border-radius:13px;background:var(--line);position:relative;margin:0 4px 0 0;cursor:pointer;transition:background .2s;vertical-align:middle}
label.chk input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.2,.9,.25,1)}
label.chk input[type=checkbox]:checked{background:var(--good)}
label.chk input[type=checkbox]:checked::after{transform:translateX(18px)}
label.chk input[type=checkbox]:disabled{opacity:.45}
label.chk input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
label.chk{display:flex;align-items:center;gap:10px}

/* Settings on phones: grouped lists like the iPhone Settings app */
@media (max-width:759px){
  #view[data-view="settings"] .card{border:0;border-radius:14px;box-shadow:none;padding:6px 16px 14px;gap:0}
  #view[data-view="settings"] .card>h2{font-family:var(--f-body);font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:10px 0 8px}
  #view[data-view="settings"] .card>h3{font-family:var(--f-body);font-size:.95rem;font-weight:650;margin-top:12px}
  #view[data-view="settings"] .card>.field,#view[data-view="settings"] .card>label.chk,#view[data-view="settings"] .card>.row,#view[data-view="settings"] .card>.grid2,#view[data-view="settings"] .card>.seg,#view[data-view="settings"] .card>p{padding:10px 0;border-top:1px solid var(--line)}
  #view[data-view="settings"] .card>h2+*{border-top:0}
  #view[data-view="settings"] label.chk{justify-content:space-between;flex-direction:row-reverse}
}

@media (prefers-reduced-motion:reduce){#sheetWrap.opening .sheet,#sheetWrap.closing .sheet,#view.slide-l,#view.slide-r,.qm,.qm-scrim,.sk{animation:none}.tx[data-tx]>*,.swipe-acts,.sheet{transition:none}}

/* behind the clock and battery (home-screen app): Manna's color in light mode so the white status text stays
   readable, the page background in dark mode so it runs edge to edge */
:root{--sb:var(--hero)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--sb:var(--bg)}}
:root[data-theme="dark"]{--sb:var(--bg)}
body::before{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:var(--sb);z-index:110;pointer-events:none}

/* nothing on any page or pop-up may push the screen sideways: the page itself only pans up and down
   (tables and lists that scroll sideways on purpose still do), and long words, emails and numbers wrap */
body{touch-action:pan-y pinch-zoom}
#view,.card,.w-col,.w-grid,.m-side,.m-main,.a-side,.a-main,.field,.row>*{min-width:0}
.card{overflow-wrap:anywhere}
.card .num,.card dd,.card .money,.card .btn,.card .pill,.card .seg-btn{overflow-wrap:normal}
.input,select.input{min-width:0;max-width:100%}
img,svg,video,canvas{max-width:100%}
.table-wrap svg,.table-wrap canvas,.nw-hist svg{max-width:none}

/* Settings > Recent changes */
.undo-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.undo-list li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:.92rem}
.undo-list li:first-child{border-top:0}
.undo-list li.next span:first-child{font-weight:650}
.undo-list li .muted{flex:none;font-size:.8rem}

/* ===================== more app feel ===================== */
/* pull to refresh */
#ptr{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 4px);z-index:13;display:flex;flex-direction:column;align-items:center;gap:4px;
  transform:translate(-50%,calc(var(--py,0px) - 56px));opacity:0;transition:transform .25s cubic-bezier(.2,.9,.25,1),opacity .2s;pointer-events:none}
#ptr.show{opacity:1}
#ptr .ptr-dot{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--accent);box-shadow:var(--shadow);border:1px solid var(--line)}
#ptr .ptr-dot svg{transform:rotate(var(--rot,0deg));transition:transform .1s}
#ptr.ready .ptr-dot{background:var(--accent);color:var(--accent-ink)}
#ptr.spin .ptr-dot svg{animation:ptrSpin .8s linear infinite}
#ptr .ptr-lbl{font-size:.72rem;font-weight:600;color:var(--muted)}
@keyframes ptrSpin{to{transform:rotate(360deg)}}

/* lists that animate */
.tx.tx-in{animation:txIn .45s cubic-bezier(.2,.9,.25,1) both}
.tx.tx-out{overflow:hidden;transition:height .24s ease,opacity .2s ease,padding .24s ease;height:0!important;opacity:0;padding-top:0;padding-bottom:0}
@keyframes txIn{from{opacity:0;transform:translateY(-8px);background:var(--accent-soft)}60%{background:var(--accent-soft)}to{opacity:1;transform:none}}

/* money keypad */
.sheet:has(.pad-keys){min-height:min(88vh,720px)}
.pad-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pad-amt-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:120px}
.pad-amt{font-size:clamp(2.6rem,13vw,3.6rem);font-weight:600;line-height:1.1;color:var(--ink);letter-spacing:-.02em}
.pad-amt.zero{color:var(--muted)}
.pad-for{font-size:.92rem}
.pad-keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pad-keys button{height:62px;border:0;border-radius:14px;background:transparent;color:var(--ink);font-family:var(--f-num);font-size:1.7rem;font-weight:500;cursor:pointer;display:grid;place-items:center;-webkit-user-select:none;user-select:none}
.pad-keys button:active{background:var(--surface-2)}
.pad-next{width:100%}
.pad-type{align-self:center;font-size:.88rem}

/* search on Activity: tucked away on phones until you pull down or tap Search */
.search-btn{display:none;align-items:center;gap:6px}
@media (max-width:759px){.act-search.collapsed{display:none}.search-btn{display:inline-flex}}

/* empty pages */
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:22px 12px;color:var(--accent)}
.empty-state h3{color:var(--ink);margin-top:4px}
.empty-state p{margin:0;max-width:34ch;font-size:.9rem}
.empty-state>div{margin-top:6px}

/* welcome screens */
#welcome{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);animation:lockIn .3s ease both}
#welcome.out{opacity:0;transition:opacity .25s}
.wl-skip{align-self:flex-end;margin:10px 14px 0;border:0;background:none;color:var(--muted);font-weight:600;font-size:.95rem;padding:8px;cursor:pointer}
.wl-track{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.wl-track::-webkit-scrollbar{display:none}
.wl-slide{flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:0 32px;color:var(--accent)}
.wl-slide h2{color:var(--ink);font-size:1.7rem}
.wl-slide p{margin:0;color:var(--ink);max-width:32ch;font-size:1.02rem;line-height:1.5}
.wl-slide .wl-verse{color:var(--muted);font-family:var(--f-display);font-style:italic;font-weight:400;font-size:.95rem}
.wl-slide .wl-verse cite{display:block;font-family:var(--f-body);font-style:normal;font-size:.8rem;margin-top:4px}
.wl-foot{display:flex;flex-direction:column;align-items:center;gap:16px;padding:12px 24px 24px}
.wl-dots{display:flex;gap:8px}.wl-dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .2s,width .2s}
.wl-dots i.on{background:var(--accent);width:20px;border-radius:4px}
.wl-next{width:100%;max-width:360px}

/* offline and update notes */
#netbar{position:fixed;left:12px;right:12px;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:16;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px 9px 14px;border-radius:12px;font-size:.85rem;font-weight:600;box-shadow:var(--shadow);transform:translateY(-140%);opacity:0;transition:transform .3s cubic-bezier(.2,.9,.25,1),opacity .2s;pointer-events:none;max-width:560px;margin:0 auto}
#netbar.show{transform:none;opacity:1;pointer-events:auto}
#netbar.offline{background:var(--ink);color:var(--bg)}
#netbar.update{background:var(--accent);color:var(--accent-ink)}
#netbar button{border:0;border-radius:999px;padding:6px 12px;font-weight:700;background:var(--accent-ink);color:var(--accent);cursor:pointer;flex:none}

/* Face ID */
.lock-face{display:inline-flex;align-items:center;gap:8px;margin-top:6px}
.face-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.face-row>span{display:inline-flex;align-items:center;gap:8px;font-weight:600}
@media (prefers-reduced-motion:reduce){#ptr,.tx.tx-in,#welcome{animation:none;transition:none}.tx.tx-out{transition:none}}
.pad-head .seg-btn{white-space:nowrap}
.wl-logo svg{width:96px;height:96px;border-radius:22px;box-shadow:var(--shadow)}

/* notifications: tap an item to open the entry; Ask sits with the reactions */
.inbox-main[data-act]{cursor:pointer;border-radius:8px}
.inbox-main[data-act]:active{background:var(--surface-2)}
.react-btn.ask.on{color:var(--accent)}
.tv-ask{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:12px;background:var(--surface-2);font-size:.92rem}
.btn.danger-text,.danger-text{color:var(--bad)}

/* ===================== fixes from the code review ===================== */
/* the offline / new-version note pushes the page down instead of covering the bell */
html.netbar-on .app{padding-top:58px}
/* on a computer, leave room under the last item for the Log Transaction button */
@media (min-width:1000px){html.has-nav .app{padding-bottom:130px}}
/* close buttons stay round */
.sheet-head .icon-btn,.icon-btn{flex:none}
/* small phones: totals shrink instead of overlapping or breaking mid-number */
.bp-sum .num{font-size:clamp(.82rem,3.6vw,1.05rem);white-space:nowrap}
.totals dd{white-space:nowrap;font-size:clamp(.74rem,3.4vw,1rem);overflow-wrap:normal}
@media (max-width:360px){.bp-sum,.totals{grid-template-columns:1fr!important}.bp-sum div,.totals div{flex-direction:row;justify-content:space-between;align-items:baseline}}
/* passcode screen: scrolls instead of cutting off the top on short phones */
#lock{align-items:flex-start}
.lock-in{margin:auto}
/* readable white text on the delete swipe and the bell count in every palette, light or dark (Edit uses the palette's own button colors) */
.swipe-acts .sw-del{background:#B42318}
.bell-count{background:#C62828;color:#fff}

/* ===================== screens that slide in, half-height pop-ups ===================== */
.sheet-back{display:none}
#sheetWrap.push .sheet{max-width:none;width:100%;height:100%;max-height:100%;border-radius:0;box-shadow:none;padding-top:calc(env(safe-area-inset-top,0px) + 6px)}
#sheetWrap.push .scrim{background:transparent}
#sheetWrap.push .sheet-grab{display:none}
#sheetWrap.push .sheet-head{flex-wrap:wrap;row-gap:6px}
#sheetWrap.push .sheet-head>.icon-btn[data-act="closeSheet"]{display:none}
#sheetWrap.push .sheet-back{display:inline-flex;align-items:center;gap:6px;flex-basis:100%;margin:0 0 2px -6px;padding:8px 6px;border:0;background:none;color:var(--accent);font-size:1.02rem;font-weight:500;cursor:pointer;align-self:flex-start}
#sheetWrap.push .sheet-head h2{font-size:1.9rem;line-height:1.1}
#sheetWrap.push.opening .sheet{animation:pushIn .36s cubic-bezier(.2,.9,.25,1) both}
#sheetWrap.push.closing .sheet{animation:pushOut .3s cubic-bezier(.4,0,.6,1) both}
/* pulled down from the top: a full screen page drops away downward instead of sliding right */
#sheetWrap.push.closing.drop .sheet{animation:sheetDown .3s cubic-bezier(.4,0,.6,1) both}
.sheet.pushin{animation:pushIn .34s cubic-bezier(.2,.9,.25,1) both}
.sheet.pushback{animation:pushBack .34s cubic-bezier(.2,.9,.25,1) both}
@keyframes pushIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes pushOut{from{transform:translateX(var(--dragx,0px))}to{transform:translateX(100%)}}
@keyframes pushBack{from{transform:translateX(-28%);opacity:.6}to{transform:none;opacity:1}}
#sheetWrap.half .sheet{transition:max-height .32s cubic-bezier(.2,.9,.25,1),transform .3s cubic-bezier(.2,.9,.25,1)}
#sheetWrap.half:not(.expanded) .sheet{max-height:62%}
#sheetWrap.half .sheet-grab{cursor:pointer;padding:6px 0;margin:-14px auto -8px;background-clip:content-box;height:17px;width:44px}
@media (prefers-reduced-motion:reduce){#sheetWrap.push.opening .sheet,#sheetWrap.push.closing .sheet,.sheet.pushin,.sheet.pushback{animation:none}#sheetWrap.half .sheet{transition:none}}

/* ===================== iPhone-style top bar on phones ===================== */
.month-verse{display:none}
@media (max-width:759px){
  html.has-nav .top{position:relative;justify-content:flex-end;padding-block:6px 0;min-height:44px}
  /* newer iPhones softly blur the band just under the clock in home-screen apps; start the top bar below it */
  @media (display-mode:standalone){html.has-nav .top{padding-top:26px}}
  html.has-nav .top{justify-content:space-between;align-items:center;gap:12px}
  html.has-nav .today>span{display:none}
  /* the Manna mark and name at the top left, the bell at the right, the verse on its own line under them */
  html.has-nav .top{flex-wrap:wrap;row-gap:12px;padding-bottom:6px}
  html.has-nav .top .brand{display:flex;order:0;gap:8px}
  html.has-nav .top .brand svg{width:28px;height:28px}
  html.has-nav .top .brand-name{font-size:1.25rem}
  html.has-nav .top .brand-sub{display:none}
  html.has-nav .today{order:1}
  html.has-nav .top .top-verse{display:block;order:3;flex:1 1 100%;min-width:0;text-align:left;font-size:.86rem;line-height:1.35}
  html.has-nav .top .top-verse cite{display:block;margin:2px 0 0;font-size:.68rem}
  html.has-nav .today{display:flex;align-items:center;gap:8px}
  html.has-nav #view{padding-top:14px}
  /* iOS style glass buttons: month title on the left, both arrows sharing one frosted capsule on the right, the bell in a matching circle */
  html.has-nav .monthnav{gap:8px 0}
  html.has-nav .monthnav h1{order:0;flex:1 1 0}
  html.has-nav .monthnav .icon-btn,html.has-nav .top .bell{background:color-mix(in srgb,var(--surface) 82%,transparent);border:0;box-shadow:0 1px 3px rgba(15,23,42,.10),0 0 0 .5px rgba(15,23,42,.06);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  html.has-nav .top .bell{width:40px;height:40px}
  html.has-nav .monthnav .icon-btn{order:1;width:46px;height:40px;color:var(--accent);font-size:1.5rem}
  html.has-nav .monthnav .icon-btn[data-act="prevMonth"]{border-radius:20px 0 0 20px;margin-left:8px;box-shadow:0 1px 3px rgba(15,23,42,.10),0 0 0 .5px rgba(15,23,42,.06),inset -.5px 0 0 var(--line)}
  html.has-nav .monthnav .icon-btn[data-act="nextMonth"]{border-radius:0 20px 20px 0}
  html.has-nav .monthnav .linkish{order:2;flex-basis:100%;text-align:left}
  html.has-nav .monthnav h1,html.has-nav #view>div>h1:first-child,html.has-nav #view h1{font-size:2.05rem;letter-spacing:-.02em}
  /* shrink a long month name on narrow phones so the arrows stay on its line */
  html.has-nav #view .monthnav h1{font-size:min(2.05rem,calc((100vw - 136px) * .13))}
  html.has-nav .month-verse{display:block;margin:6px 0 0;text-align:center;font-family:var(--f-display);font-style:italic;font-weight:400;font-size:.9rem;color:var(--muted);line-height:1.4}
  html.has-nav .month-verse cite{display:block;font-family:var(--f-body);font-style:normal;font-size:.72rem;letter-spacing:.04em;margin-top:2px}

  /* lists instead of boxes: inset grouped rows with hairlines and chevrons */
  html.has-nav .cats{border:0;border-radius:12px;background:var(--surface)}
  html.has-nav .cats>.cat{border-bottom:0;position:relative;padding-right:32px;background:linear-gradient(var(--line),var(--line)) right bottom/calc(100% - 16px) 1px no-repeat}
  html.has-nav .cats>.cat:last-child{background:none}
  html.has-nav .cats>.cat.parent{background-color:var(--surface-2)}
  html.has-nav .cats>.cat[data-act]::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;border-right:2px solid var(--muted);border-top:2px solid var(--muted);transform:translateY(-50%) rotate(45deg);opacity:.5}
  html.has-nav .txlist{background:var(--surface);border-radius:12px}
  html.has-nav .txday{position:sticky;top:calc(env(safe-area-inset-top,0px) + 44px);z-index:2;background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:0;padding:8px 16px 6px}
  html.has-nav .txlist .tx{border-bottom:0;background:linear-gradient(var(--line),var(--line)) right bottom/calc(100% - 16px) 1px no-repeat}
}

/* ===================== follows the iPhone's text size ===================== */
@supports (font:-apple-system-body){@media (pointer:coarse){
  html{font:-apple-system-body}
  body{font-family:var(--f-body);font-size:.94rem}
}}

/* ===================== icons on buttons ===================== */
.btn[data-act]::before{content:none}
.btn.has-ico::before,.btn[data-act="openLog"]::before,.btn[data-act="payday"]::before,.btn[data-act="openTransfer"]::before,.btn[data-act="editTx"]::before,
.btn[data-key^="tx:"]::before,.btn[data-act="delTx"]::before,.btn[data-act="openAsk"]::before,.btn[data-act="addReceipt"]::before,.btn[data-act="viewReceipt"]::before,
.btn[data-act="openDebtPay"]::before,.btn[data-act="openDebtBal"]::before,.btn[data-act="openPayCard"]::before,.btn[data-act="debtEdit"]::before,.btn[data-act="doMove"]::before,
.btn[data-act="openAssign"]::before,.btn[data-act="openUnfund"]::before,.btn[data-act="openCover"]::before,.btn[data-act="openBank"]::before,.btn[data-act="openCalendar"]::before,.btn[data-act="scanReceipt"]::before{
  content:"";display:inline-block;flex:none;width:1em;height:1em;margin-right:.45em;vertical-align:-.14em;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.tx-actions .btn::before,.btn.quiet[style*="min-height:28px"]::before{content:none!important}
.btn[data-act="openLog"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3.5v13M3.5 10h13' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.btn[data-act="payday"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3v9m-4-4 4 4 4-4M3.5 13.5v2a1.5 1.5 0 0 0 1.5 1.5h10a1.5 1.5 0 0 0 1.5-1.5v-2'/%3E%3C/svg%3E")}
.btn[data-act="openTransfer"],.btn[data-act="doMove"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h12m-3-3 3 3-3 3M16 13H4m3-3-3 3 3 3'/%3E%3C/svg%3E")}
.btn[data-act="editTx"],.btn[data-act="debtEdit"],.btn[data-act="openDebtBal"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='m4 16 .7-3.3L13.3 4a1.6 1.6 0 0 1 2.3 0l.4.4a1.6 1.6 0 0 1 0 2.3L7.3 15.3z'/%3E%3C/svg%3E")}
.btn[data-key^="tx:"],.btn[data-act="delTx"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h12M8 6V4.5h4V6m-6 0 .7 10h6.6L14 6'/%3E%3C/svg%3E")}
.btn[data-act="openAsk"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 4.5h12a1.5 1.5 0 0 1 1.5 1.5v7a1.5 1.5 0 0 1-1.5 1.5H9l-3.5 3v-3H4A1.5 1.5 0 0 1 2.5 13V6A1.5 1.5 0 0 1 4 4.5z'/%3E%3C/svg%3E")}
.btn[data-act="addReceipt"],.btn[data-act="viewReceipt"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 2.5h10v15l-2.5-1.5-2.5 1.5-2.5-1.5L5 17.5z'/%3E%3Cpath d='M7.5 6.5h5M7.5 9.5h5M7.5 12.5h3'/%3E%3C/svg%3E")}
.btn[data-act="openDebtPay"],.btn[data-act="openPayCard"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='15' height='11' rx='2'/%3E%3Cpath d='M2.5 8h15M5.5 12.5h3'/%3E%3C/svg%3E")}
.btn[data-act="openAssign"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='6' height='6' rx='1.5'/%3E%3Crect x='11' y='3' width='6' height='6' rx='1.5'/%3E%3Crect x='3' y='11' width='6' height='6' rx='1.5'/%3E%3Cpath d='M14 11v6M11 14h6' stroke-linecap='round'/%3E%3C/svg%3E")}
.btn[data-act="openUnfund"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 15V5m-4 4 4-4 4 4'/%3E%3C/svg%3E")}
.btn[data-act="openCover"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M10 2.5 16 5v5c0 3.5-2.6 6.3-6 7.5-3.4-1.2-6-4-6-7.5V5z'/%3E%3C/svg%3E")}
.btn[data-act="openBank"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 8h14L10 3.5zM4.5 8v7M8 8v7M12 8v7M15.5 8v7M3 16.5h14'/%3E%3C/svg%3E")}
.btn[data-act="openCalendar"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='14' height='13' rx='2'/%3E%3Cpath d='M3 8h14M7 2.5v3M13 2.5v3' stroke-linecap='round'/%3E%3C/svg%3E")}

.btn[data-act="scanReceipt"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5v-2A1.5 1.5 0 0 1 4.5 3h2M13.5 3h2A1.5 1.5 0 0 1 17 4.5v2M17 13.5v2a1.5 1.5 0 0 1-1.5 1.5h-2M6.5 17h-2A1.5 1.5 0 0 1 3 15.5v-2M6.5 7h7M6.5 10h7M6.5 13h4'/%3E%3C/svg%3E")}

/* receipt scanning */
.scan-note{font-size:.86rem;line-height:1.45;padding:10px 12px;border-radius:12px;background:var(--accent-soft);color:var(--ink);display:flex;flex-direction:column;gap:6px}
.scan-note.busy{flex-direction:row;align-items:center;gap:10px}
.scan-spin{width:16px;height:16px;flex:none;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 30%,transparent);border-top-color:var(--accent);animation:scanspin .8s linear infinite}
@keyframes scanspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.scan-spin{animation-duration:2.4s}}
.pad-links{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px}
.pad-links .pad-type{display:inline-flex;align-items:center;gap:6px}

/* backups (Settings, owners only) */
.bkp-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.bkp-list li+li{border-top:1px solid var(--line)}
.bkp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:0;background:var(--surface);color:var(--ink);font:inherit;text-align:left;padding:10px 14px;cursor:pointer;min-height:48px}
.bkp-row>span{display:flex;flex-direction:column;gap:1px;min-width:0}
.bkp-row .muted{font-size:.8rem}
.bkp-row svg{color:var(--muted);flex:none}
.bkp-sec{border-top:1px solid var(--line);padding:10px 0 4px}
.bkp-sec h3{margin:0 0 4px;font-size:.95rem}
.bkp-k{margin:6px 0 2px;font-size:.85rem;font-weight:600}
.bkp-sec ul{margin:0 0 4px;padding-left:18px;font-size:.85rem;overflow-wrap:anywhere}

/* ===================== debts this month ===================== */
.dmc{display:flex;flex-direction:column;gap:12px}
.dm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.dm-list li+li{border-top:1px solid var(--line)}
.dm-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;width:100%;text-align:left;background:none;border:0;padding:10px 12px;color:var(--ink);font:inherit;cursor:pointer}
.dm-row:active{background:var(--surface-2)}
.dm-main{display:flex;flex-direction:column;min-width:0}
.dm-main b{overflow-wrap:anywhere;font-weight:600}
.dm-main .muted{font-size:.8rem}
.dm-row .num{font-size:.92rem}
.dm-st{font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap;background:var(--surface-2);color:var(--muted)}
.dm-st.good{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
.dm-st.warn{background:var(--gold-soft);color:var(--gold)}
.dm-st.bad{background:var(--bad-soft);color:var(--bad)}
.dm-extra{border-style:dashed}
.dm-sum{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin:0;font-size:.92rem}
.dm-sum dt{color:var(--muted)}.dm-sum dd{margin:0;text-align:right}
.dm-sum dt.bad{color:var(--bad);font-weight:600}
.dm-paid summary{cursor:pointer;color:var(--muted);font-size:.9rem;padding:4px 0}
.dm-paid .dm-list{margin-top:8px}

/* ===================== tour and Show me spotlight ===================== */
#spot{position:fixed;inset:0;z-index:90;pointer-events:none}
#spot.block{pointer-events:auto}
#spot[hidden]{display:none}
.spot-shade{position:fixed;background:rgba(8,12,24,.58);pointer-events:none}
#spot.block .spot-shade{pointer-events:auto}
.spot-ring{position:fixed;border-radius:14px;box-shadow:0 0 0 3px var(--accent),0 0 18px color-mix(in srgb,var(--accent) 45%,transparent);transition:left .28s cubic-bezier(.2,.9,.25,1),top .28s cubic-bezier(.2,.9,.25,1),width .28s,height .28s;pointer-events:none}
.spot-tip{position:fixed;pointer-events:auto;background:var(--surface);color:var(--ink);border-radius:16px;padding:16px;box-shadow:0 12px 40px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:6px;transition:left .28s cubic-bezier(.2,.9,.25,1),top .28s cubic-bezier(.2,.9,.25,1);animation:spotIn .22s ease-out}
.spot-title{margin:0;font-family:var(--f-display);font-size:1.15rem}
.spot-text{margin:0;color:var(--muted);font-size:.92rem;line-height:1.45}
.spot-acts{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.spot-acts .spot-n{color:var(--muted);font-size:.8rem;margin-right:auto}
.spot-acts .btn:last-child{margin-left:auto}
@keyframes spotIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.spot-ring,.spot-tip{transition:none;animation:none}}
.help-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.help-item+.help-item{border-top:1px solid var(--line)}
.help-item summary{cursor:pointer;padding:13px 14px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:10px}
.help-item summary::-webkit-details-marker{display:none}
.help-item summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-top:4px;flex:none;transition:transform .2s}
.help-item[open] summary::after{transform:rotate(-135deg);margin-top:8px}
.help-item ol{margin:0 14px 10px 32px;padding:0;display:flex;flex-direction:column;gap:6px;color:var(--ink);font-size:.93rem;line-height:1.4}
.help-item .btn{margin:0 14px 14px}

/* ===================== Morning Manna details ===================== */
/* "short" needs attention (terracotta); red stays for over and errors */
.dm-st.short{background:var(--warn-soft);color:var(--warn)}
.dm-list,.help-list,.ch-group{border-radius:var(--r-card)}
.dm-st.good{background:var(--good-soft)}
.brand-name,.splash-name{font-family:var(--f-display);font-weight:600}

/* ===================== bills and payments (one card, split at payday) ===================== */
.before-pay{gap:10px}
.bp-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.bp-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;width:100%;text-align:left;background:none;border:0;padding:10px 12px;color:var(--ink);font:inherit;cursor:pointer}
.bp-main:active{background:var(--surface-2)}
.bp-main b{font-weight:600;overflow-wrap:anywhere}
.bp-main .num{text-align:right;font-size:.92rem}
.bp-main .muted{font-size:.8rem}
.bp-main .dm-st{justify-self:end}
.bp-list li .btn.quiet{padding:6px 10px;margin-right:6px;font-size:.8rem}
.bp-list li.late .bp-main b{color:var(--warn)}
.bp-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.8rem;font-weight:600;letter-spacing:.02em;margin:4px 0 -2px}
.bp-divider::before,.bp-divider::after{content:"";flex:1;height:1px;background:var(--line-strong);opacity:.5}