:root{
  --bg:#EDF0F3;--surface:#FFFFFF;--surface2:#F4F6F8;--ink:#14202B;--muted:#5F6C79;--line:#DCE1E6;
  --accent:#2848D8;--accent-ink:#FFFFFF;
  --ok:#1F6B5C;--ok-fill:#3A9A85;--warn:#8A5A00;--warn-fill:#D99A1E;--bad:#B42318;--bad-fill:#D9463B;--track:#E1E6EB;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Figtree","Avenir Next","Segoe UI",system-ui,sans-serif;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0F161D;--surface:#172029;--surface2:#1D2832;--ink:#E8EEF3;--muted:#93A1AE;--line:#263340;
    --accent:#7C97FF;--accent-ink:#0B1220;
    --ok:#5FC4AB;--ok-fill:#3A9A85;--warn:#E6B04A;--warn-fill:#C58A12;--bad:#FF8A7E;--bad-fill:#E0594D;--track:#26323D;
  }
}
:root[data-theme="dark"]{
  --bg:#0F161D;--surface:#172029;--surface2:#1D2832;--ink:#E8EEF3;--muted:#93A1AE;--line:#263340;
  --accent:#7C97FF;--accent-ink:#0B1220;
  --ok:#5FC4AB;--ok-fill:#3A9A85;--warn:#E6B04A;--warn-fill:#C58A12;--bad:#FF8A7E;--bad-fill:#E0594D;--track:#26323D;
}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.45 var(--body);font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;margin:0}
#app{max-width:560px;margin:0 auto;padding:20px 20px 170px}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.top h1{font-size:30px;font-weight:700}
.sub{margin:2px 0 0;color:var(--muted);font-size:14px}
.pill{font-size:12px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:3px 10px;white-space:nowrap}
.hero{padding:28px 0 8px}
.lab{margin:0;color:var(--muted);font-size:15px}
.big{margin:0;font:700 clamp(58px,19vw,88px)/1 var(--display);letter-spacing:-.04em}
.big.neg{color:var(--bad)}
h2{font-size:19px;font-weight:700;margin:32px 0 6px}
.hint{margin:0 0 8px;color:var(--muted);font-size:14px}
.list{background:var(--surface);border-radius:14px;overflow:hidden}
.crow{display:block;width:100%;padding:16px 16px 14px;border-bottom:1px solid var(--line)}
.crow:last-child{border-bottom:0}
.ctop,.cbot{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.cn{font:700 17px var(--display);letter-spacing:-.01em}
.ca{color:var(--muted);font-size:14px}
.bar{position:relative;display:block;height:8px;border-radius:4px;background:var(--track);margin:12px 0 10px}
.fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.fill.ok{background:var(--ok-fill)}.fill.ahead{background:var(--warn-fill)}.fill.over{background:var(--bad-fill)}
.tick{position:absolute;top:-5px;width:2px;height:18px;margin-left:-1px;background:var(--ink);border-radius:1px}
.st{font-size:14px;font-weight:600}
.st.ok{color:var(--ok)}.st.ahead{color:var(--warn)}.st.over{color:var(--bad)}.st.unset{color:var(--muted)}
.rem{font-size:14px;color:var(--muted)}
.ask{background:var(--surface);border-radius:14px;padding:4px 16px 8px;margin-top:26px;border-left:4px solid var(--accent)}
.ask h2{margin:14px 0 4px;font-size:17px}
.askrow{padding:10px 0 6px}
.askhead{display:flex;justify-content:space-between;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{border:1px solid var(--line);background:var(--surface2);border-radius:99px;padding:7px 13px;font-size:14px;font-weight:500;min-height:36px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;margin:14px -20px 0;padding:0 20px 4px;scrollbar-width:none}
.chips.scroll .chip{white-space:nowrap}
.day{margin:22px 0 4px;color:var(--muted);font-size:14px;font-weight:600}
.tx{display:flex;justify-content:space-between;gap:12px;width:100%;padding:13px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.txg{border-radius:14px;overflow:hidden}
.txg .tx:last-child{border-bottom:0}
.tm{font-weight:600}
.tc{font-size:13px;color:var(--muted)}
.tc.review{color:var(--warn);font-weight:600}
.ta{text-align:right;font-weight:600}
.ts{display:block;font-size:12px;color:var(--muted);font-weight:400}
.empty{color:var(--muted);padding:28px 0}
.ins{background:var(--surface);border-radius:14px;padding:16px;margin-top:14px;border-left:4px solid var(--warn-fill)}
.ins.s0{border-left-color:var(--bad-fill)}.ins.s2{border-left-color:var(--accent)}
.ins h3{font-size:18px;font-weight:700}
.ins p{margin:6px 0 0;color:var(--muted);font-size:15px}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.btn{display:inline-block;border:1px solid var(--line);background:var(--surface2);border-radius:10px;padding:10px 14px;font-weight:600;font-size:15px;min-height:44px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.danger{color:var(--bad)}
.logged{background:var(--surface);border-radius:14px;padding:4px 16px}
.logged p{margin:0;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.logged p:last-child{border-bottom:0}
.brow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.brow label{font-weight:600;flex:1}
.money{display:flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:10px;padding:0 10px;background:var(--surface2);width:120px}
.money input{width:100%;border:0;background:none;font:600 16px var(--body);color:var(--ink);padding:10px 0;text-align:right;font-variant-numeric:tabular-nums}
.btotal{display:flex;justify-content:space-between;padding:14px 16px;background:var(--surface);font-weight:700}
.addcat{display:flex;gap:8px;margin-top:12px}
.addcat input,.fld input[type=text],.fld input[type=email],.fld input[type=date],.fld input[type=search]{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--ink);font:400 16px var(--body);padding:11px 12px}
.addcat input.n{max-width:96px;text-align:right}
.seg{display:grid;gap:8px}
.opt{display:block;width:100%;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:13px 14px}
.opt b{display:block;font-weight:600}
.opt span{color:var(--muted);font-size:14px}
.opt[aria-pressed="true"]{border:2px solid var(--accent);padding:12px 13px}
.addr{display:flex;gap:8px;align-items:center;background:var(--surface);border-radius:12px;padding:10px 12px}
.addr code{flex:1;font:500 15px var(--body);word-break:break-all}
.steps{margin:12px 0 0;padding:0;list-style:none}
.gmailmsg{white-space:pre-wrap;overflow-wrap:anywhere;font:400 14px/1.45 var(--body);background:var(--surface);border-radius:12px;padding:12px;margin:8px 0 0;max-height:260px;overflow:auto}
.held{margin-top:14px}
.lead{background:var(--surface);border-radius:12px;padding:4px 12px;margin:8px 0 12px}
.banks{display:flex;flex-wrap:wrap;gap:8px 16px;margin:6px 0 10px}
.check.bank{font-size:16px}
.proposal{background:var(--surface);border-radius:12px;padding:8px 12px;margin-top:10px}
.proposal .fld{margin:8px 0}
.silence{display:flex;gap:10px;align-items:center;justify-content:space-between;background:var(--surface);border-radius:12px;padding:10px 12px;margin:10px 0;font-size:15px}
.silence.compact{font-size:14px}
ol.plain{padding-left:20px;margin:6px 0;font-size:15px}
ol.plain li{margin:4px 0}
.sender small{display:block;color:var(--muted);font-size:13px}
.srow.thr{padding-top:0;color:var(--muted);font-size:14px}
.srow.thr .money{max-width:120px}
.coverage .hint{color:var(--ink)}
.sub3{font-size:17px;font-weight:700;margin:22px 0 4px}
.sender{overflow-wrap:anywhere;min-width:0}
.srow{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;font-size:15px}
.mail{margin:8px 0 0;padding:0;list-style:none}
.mail li{display:flex;gap:10px;justify-content:space-between;padding:7px 0;font-size:14px;border-bottom:1px solid var(--line)}
.mail small{color:var(--muted);white-space:nowrap}
.steps li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:15px}
.dot{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);margin-top:1px;display:grid;place-items:center}
.dot.done{background:var(--ok-fill);border-color:var(--ok-fill);color:#fff}
.steps small{display:block;color:var(--muted);font-size:13px}
.reset{margin-top:28px;color:var(--muted);font-size:14px;text-decoration:underline}
nav{position:fixed;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;display:flex;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;font-size:12px;font-weight:600;color:var(--muted);position:relative}
nav button[aria-current="page"]{color:var(--ink)}
nav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;border-radius:9px;background:var(--bad-fill);color:#fff;font-size:11px;display:grid;place-items:center;padding:0 5px}
.fab{position:fixed;bottom:calc(76px + env(safe-area-inset-bottom,0px));right:calc(max(0px,(100vw - 560px)/2) + 18px);width:58px;height:58px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;box-shadow:0 6px 18px rgba(20,32,43,.28)}
.fab svg{width:26px;height:26px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.scrim{position:fixed;inset:0;background:rgba(10,16,24,.5);opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;max-height:90%;overflow:auto;background:var(--surface);border-radius:20px 20px 0 0;padding:14px 20px calc(24px + env(safe-area-inset-bottom,0px));transform:translateY(105%);transition:transform .25s ease;visibility:hidden}
.sheet.on{transform:none;visibility:visible}
.grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 14px}
.sheet h2{margin:0 0 12px}
.fld{display:block;margin-top:14px}
.fld>span{display:block;font-size:14px;color:var(--muted);margin-bottom:6px;font-weight:600}
.amt{display:flex;align-items:baseline;gap:6px;border-bottom:2px solid var(--line)}
.amt b{font:700 34px var(--display);color:var(--muted)}
.amt input{width:100%;border:0;background:none;color:var(--ink);font:700 44px/1.2 var(--display);letter-spacing:-.02em;padding:0;font-variant-numeric:tabular-nums}
.amt input:focus-visible{outline:none}
.amt:focus-within{border-color:var(--accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.err{color:var(--bad);font-size:14px;min-height:20px;margin:10px 0 0}
.btns{display:flex;gap:10px;margin-top:10px}
.btns .primary{flex:1;text-align:center}
.toast{position:fixed;left:16px;right:16px;max-width:528px;margin:0 auto;bottom:calc(144px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);border-radius:12px;padding:12px 14px;display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:15px;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.on{opacity:1;pointer-events:auto}
.toast button{font-weight:700;color:var(--bg);text-decoration:underline;min-height:32px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Welcome screen */
.welcome{padding-top:12vh}
.welcome h1{font-size:44px;font-weight:700;letter-spacing:-.03em}
.welcome .lede{margin:8px 0 28px;color:var(--muted);font-size:17px}
.welcome .fld input{width:100%}
.welcome ul{margin:28px 0 0;padding:0;list-style:none;color:var(--muted);font-size:15px}
.welcome li{padding:6px 0}
.welcome .btn.primary{width:100%;text-align:center;margin-top:18px}
.loading{color:var(--muted);padding:40vh 0 0;text-align:center}
[hidden]{display:none!important}

/* Setup instructions */
.howto{background:var(--surface);border-radius:12px;padding:10px 14px;margin-top:10px}
.howto summary{font-weight:600;cursor:pointer;min-height:28px}
.howto ol{margin:8px 0 10px;padding-left:20px;color:var(--muted);font-size:15px}
.howto li{padding:3px 0}
.welcome .reset{display:block;margin:16px auto 0}

/* Paste an alert */
.fld textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--ink);font:400 15px/1.4 var(--body);padding:11px 12px;resize:vertical}
.fld textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Recovery code */
.code{display:block;font:700 clamp(17px,5.6vw,26px)/1.2 var(--display);letter-spacing:.04em;white-space:nowrap;overflow-x:auto;text-align:center;padding:18px 12px;background:var(--surface);border-radius:12px;margin:18px 0 10px;user-select:all;word-break:break-all}
.check{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:15px}
.check input{width:20px;height:20px;margin-top:2px}

/* Header gear, Settings and capture setup */
.topr{display:flex;gap:8px;align-items:center}
.gear{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--muted);margin:-6px -8px 0 0}
.gear svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gear[aria-current="page"]{color:var(--ink)}
.which{background:var(--surface);border-radius:12px;padding:10px 14px;margin:12px 0}
.which h3{font-size:16px;margin:2px 0 6px}
.which p{margin:6px 0;font-size:15px}
.which .addr{background:var(--surface2);margin:4px 0}
.step{background:var(--surface);border-radius:14px;margin-top:10px;overflow:hidden}
.stephead{display:flex;gap:10px;align-items:center;width:100%;padding:14px;font-weight:700;min-height:52px}
.stephead small{display:block;color:var(--muted);font-weight:400;font-size:13px}
.stepbody{padding:0 14px 14px}
.stepbody ol{padding-left:20px;margin:6px 0;font-size:15px}
.stepbody ol li{margin:5px 0}
.stepbody .addr{background:var(--surface2)}
.husho{color:var(--muted);font-size:14px;border-top:1px solid var(--line);padding-top:10px;margin:12px 0 0}
.bankrow{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:10px}
.bankrow h4{margin:0;font-size:16px}
.bankrow .meta{color:var(--muted);font-size:14px;margin:2px 0 6px;overflow-wrap:anywhere}
.bankrow details{margin:6px 0}
.bankrow summary{cursor:pointer;font-size:14px;min-height:28px}
.field{margin:10px 0}
.field>span{display:block;font-size:14px;font-weight:600;margin-bottom:4px}
.never{border-left:4px solid var(--warn-fill);padding:6px 10px;background:var(--surface2);border-radius:8px;font-size:14px;margin:8px 0}
.setupcard p{margin:4px 0;font-size:15px}
details.more{margin-top:18px}
details.more summary{cursor:pointer;font-weight:600;min-height:32px}
.waiting{color:var(--muted);font-size:14px;font-style:italic}
.field input.wide{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--ink);font:400 16px var(--body);padding:11px 12px}
.dot.none{border-color:transparent}
.banktext{margin:6px 0 0;font-size:13px}
.linkbtn{margin-top:10px;color:var(--accent);font-size:14px;font-weight:600;text-decoration:underline;min-height:32px}

/* Planned items */
.bname{font-weight:600;flex:1;text-align:left;min-height:32px}
.bhead{background:var(--surface)}
.btot{font-weight:700;text-align:right}
.btot small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.bitem{width:100%;padding-left:32px;font-size:15px;color:var(--ink)}
.bitem label{font-weight:500;color:var(--muted)}
.muted{color:var(--muted)}
.st.muted{color:var(--muted)}
.item{display:block;width:100%;padding:12px 16px;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.itop,.ibot{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.iname{font-weight:600}
.iamt{font-weight:600}
.inote{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.trow{border-bottom:1px solid var(--line)}
.trow:last-child{border-bottom:0}
.trow .item{border-bottom:0;padding-bottom:6px}
.trow .acts{padding:0 16px 12px;margin:0}
.hero .setaside{margin-top:4px}
.grp{margin:14px 4px 6px;color:var(--muted);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.brow.extra{border-radius:14px;margin-top:10px}
.hero.small{padding:16px 0 4px}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mid{margin:0;font:700 24px/1.1 var(--display)}
.mid.neg{color:var(--bad)}
.sel{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--ink);font:400 16px var(--body);padding:11px 12px}
h2 small{font-size:14px;font-weight:500;color:var(--muted)}
.ltbhead .big{font-size:32px}
.hero .ltb{margin-top:4px;font-weight:600}
.hero .ltb.neg{color:var(--bad)}
.brow.income{text-align:left;align-items:flex-start}
.brow.income span:last-child{text-align:right}
.hint.carry{padding:0 16px 10px;margin:0}
.ltbhead.sticky{position:sticky;top:0;z-index:5;background:var(--bg);padding:8px 0;margin:0 0 6px;border-bottom:1px solid var(--line)}
.ltbhead.sticky .big{font-size:22px;font-weight:700}
.gblock{margin:14px 0}
.ghead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.gname{font-weight:700;font-size:16px;text-align:left;padding:4px 0}
.gtot{font-weight:700}
.gsub{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 6px}
.gshare{color:var(--muted);font-size:13px}
.gshare.warn{color:var(--warn,#a15c07)}
.gacts{display:flex;gap:4px}
.mini{font-size:12px;padding:2px 8px;border:1px solid var(--line);border-radius:8px;background:transparent}
.brow.details .dprev{color:var(--muted);max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sheet.full{top:0;height:100%;max-height:100%;border-radius:0}
textarea.details{width:100%;min-height:55vh;font:inherit;padding:10px;border:1px solid var(--line);border-radius:10px;white-space:pre-wrap}
.row2{display:flex;gap:10px}
.row2 .fld{flex:1}
/* Sheets always cover the page, the pinned Budget headline included. */
.scrim{z-index:20}
.sheet{z-index:21}
.mini:disabled{opacity:.35}

/* Budget tab rows: grip, a name of up to two lines, and a fixed amount column, so every field lines up. */
.brow.cr{display:grid;grid-template-columns:28px minmax(0,1fr) 128px;gap:8px;align-items:center;padding:8px 12px 8px 6px}
.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.brow.cr .bname{min-height:40px;display:flex;flex-direction:column;justify-content:center;flex:none}
.brow.cr .bname small{font-size:12px;font-weight:500}
.brow.irow{background:var(--surface2)}
.brow.irow .iname{font-weight:500;font-size:15px}
.amtcell{position:relative;width:128px;display:flex;justify-content:flex-end}
.amtcell .money{width:100%}
.amtcell.lastm{justify-content:flex-end;font-size:14px;padding-right:10px}
.amtcell .st{position:absolute;right:calc(100% + 6px);top:50%;transform:translateY(-50%);font-size:12px;font-weight:600;white-space:nowrap;background:var(--surface);padding:0 4px;border-radius:6px;pointer-events:none}
.amtcell.saved .st{color:var(--ok)}
.amtcell.saving .money{opacity:.6}
.amtcell.error .money{border-color:var(--bad)}
.amtcell.error .st{color:var(--bad)}
.ktot{display:flex;align-items:center;justify-content:flex-end;gap:6px;width:128px;text-align:right;min-height:40px}
.ktot small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.ktot .chev{color:var(--muted);font-size:14px}
.grip{width:28px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--muted);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:8px}
.grip svg{width:12px;height:18px;fill:currentColor}
.ghead{align-items:center}
.ghead .gname{flex:1}
.cat.dragging,.gblock.dragging{opacity:.35}
.ghost{background:var(--surface);box-shadow:0 10px 30px rgba(0,0,0,.25);border-radius:12px;opacity:.95}
.dropline{position:fixed;height:3px;border-radius:2px;background:var(--accent);z-index:31;pointer-events:none}
.dropline.no{background:var(--bad);height:3px;background:repeating-linear-gradient(90deg,var(--bad) 0 8px,transparent 8px 14px)}
html.is-dragging,html.is-dragging *{-webkit-user-select:none;user-select:none;cursor:grabbing}

/* The category drawer */
.seg{display:flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface2)}
.seg button{flex:1;text-align:center;padding:10px 8px;font-weight:600}
.seg button[aria-checked="true"]{background:var(--accent);color:var(--accent-ink)}
.switchnote{color:var(--ink);background:var(--surface2);border-radius:10px;padding:8px 10px}
.drow{display:flex;justify-content:space-between;gap:12px;text-align:left}
.droom label{flex:1}
.linkish{display:block;margin:18px auto 4px;text-align:center;color:var(--muted);font-size:14px;text-decoration:underline;min-height:32px}
.discard{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface2)}
.discard p{margin:0 0 8px}
#sheet .fld input[type=text]{width:100%}

/* Category notes, the item editor's Close */
.catnote{background:var(--surface);border-radius:14px;padding:12px 16px;margin:10px 0}
.catnote p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.catnote .linkbtn{margin-top:6px}
#sheet .fld textarea.catnote-in{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--ink);font:400 15px/1.4 var(--body);padding:11px 12px;resize:vertical;white-space:pre-wrap}
.noteic{width:14px;height:14px;vertical-align:-2px;margin-left:4px;fill:none;stroke:var(--muted);stroke-width:1.4;stroke-linejoin:round}
.sheethead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sheethead h2{margin-bottom:12px}
.sheetclose{flex:none;padding:6px 12px}

/* Still due on Overview: one summary row that opens the list */
.due{margin-top:14px;border-top:1px solid var(--line)}
.duesum{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 0;font-weight:600;min-height:44px}
.duesum .chev{color:var(--muted)}
.duehead{margin:12px 0 2px;color:var(--muted);font-size:13px;font-weight:600}
.duerow{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:10px;width:100%;padding:10px 0;border-top:1px solid var(--line);font-size:15px;text-align:left}
.duerow .when{color:var(--muted)}
.duerow small{color:var(--muted);font-size:12px}
.duerow .amt{font-weight:600}
/* The "+" on an item row: log against this item */
.iwrap{display:flex;align-items:stretch;border-bottom:1px solid var(--line)}
.iwrap .item{flex:1;border-bottom:0}
.trow .iwrap{border-bottom:0}
.list>.iwrap:last-child{border-bottom:0}
.iplus{flex:none;width:44px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600;color:var(--accent);border-left:1px solid var(--line)}

/* One-tap logging: the add sheet's "Log planned amount", "Paid $250" under an Overview row */
.quicklog{width:100%;margin-top:8px;text-align:center}
.crowpaid{border-bottom:1px solid var(--line)}
.crowpaid .crow{border-bottom:0}
.crowpaid .acts{padding:0 16px 12px;margin:0}

.ts.prepaid{background:var(--line);color:var(--muted);border-radius:6px;padding:0 6px;font-weight:600}
.tx.share .tm{font-weight:500;color:var(--muted)}
.ysub{display:block;font-size:12px;color:var(--muted);font-weight:400}
.amtcell .amttag{position:absolute;top:-14px;right:4px;font-size:11px;color:var(--muted)}
/* New purchases card, reasons, the New dot, What Hush has learned */
.newcard{margin-top:16px}
.newcard h3{margin:12px 0 0;font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.newrow + .newrow{border-top:1px solid var(--line)}
.newrow .acts,.newcard>.acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0 4px}
.chip.suggested{border-style:dashed;border-color:var(--accent)}
.chip.suggested[aria-pressed="true"]{border-style:solid}
.chip small{font-size:11px;font-weight:600;opacity:.8;margin-left:4px}
.newdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:middle}
.why{font-size:12px;color:var(--muted)}
.howfiled{margin-top:12px}
.learn{margin-top:8px}
.learn .check{margin:6px 0}
.lrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.lrow[hidden]{display:none}
.lrow{flex-wrap:wrap}
.lmain{display:flex;flex-direction:column;min-width:0;flex:1 1 180px}
.lmain .hint{margin:2px 0 0}
.lacts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.lacts select{max-width:160px;min-height:40px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--ink);font:400 15px var(--body);padding:8px 10px}