@font-face{font-family:'Geist';src:url('fonts/Geist-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'Geist';src:url('fonts/Geist-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:'Geist';src:url('fonts/Geist-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:'Geist';src:url('fonts/Geist-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}/* Radius rule: cards 22px, controls 14px, chips/buttons full pill. */
:root{
  --bg:#F2F4F8;--surface:#FFFFFF;--sunk:#EBEEF4;--ink:#0D1017;--muted:#5D6472;--line:#E3E7EE;
  --accent:#2A55F5;--accent-soft:#E6ECFF;--accent-ink:#FFFFFF;--raised:#FFFFFF;
  --gain:#08784F;--gain-soft:#E1F6EE;--loss:#C42A37;--loss-soft:#FDE8EA;--warn:#C27C0E;--rose:#E3337A;--rose-soft:#FDE6EF;
  --hero:#0D1017;--hero-ink:#FFFFFF;--hero-muted:#9AA3B5;
  --seg1:#2A55F5;--seg2:#6E8CFF;--seg3:#A9BBFF;--seg4:#CDD5E4;--seg5:#E1E6EF;
  --shadow:0 1px 2px rgba(22,34,70,.04);
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A0C11;--surface:#141821;--sunk:#1C212C;--ink:#EEF1F7;--muted:#98A1B3;--line:#252B37;
  --accent:#6C8CFF;--accent-soft:#1B2447;--accent-ink:#0A0C11;--raised:#2C3446;
  --gain:#34D399;--gain-soft:#10281F;--loss:#FF6B75;--loss-soft:#33161A;--warn:#F5B547;--rose:#FF6FA8;--rose-soft:#351725;
  --hero:#1A2033;--hero-ink:#FFFFFF;--hero-muted:#A3ACC0;
  --seg1:#6C8CFF;--seg2:#4F6AD0;--seg3:#3A4D94;--seg4:#4A5571;--seg5:#3A4359;
  --shadow:0 1px 2px rgba(0,0,0,.2);color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#0A0C11;--surface:#141821;--sunk:#1C212C;--ink:#EEF1F7;--muted:#98A1B3;--line:#252B37;
  --accent:#6C8CFF;--accent-soft:#1B2447;--accent-ink:#0A0C11;--raised:#2C3446;
  --gain:#34D399;--gain-soft:#10281F;--loss:#FF6B75;--loss-soft:#33161A;--warn:#F5B547;--rose:#FF6FA8;--rose-soft:#351725;
  --hero:#1A2033;--hero-ink:#FFFFFF;--hero-muted:#A3ACC0;
  --seg1:#6C8CFF;--seg2:#4F6AD0;--seg3:#3A4D94;--seg4:#4A5571;--seg5:#3A4359;
  --shadow:0 1px 2px rgba(0,0,0,.3);color-scheme:dark;}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:15px/1.5 "Geist",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
.num,.big{font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:active{transform:scale(.97)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
/* the parts the browser draws still belong to the app */
::selection{background:color-mix(in srgb,var(--accent) 24%,transparent);color:var(--ink)}
input,textarea{caret-color:var(--accent)}
html{scrollbar-color:color-mix(in srgb,var(--muted) 45%,transparent) transparent}
.ms{font-family:"Material Symbols Rounded";font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" 0,"wght" 400,"opsz" 24;display:inline-block;width:1em;overflow:hidden}
main{max-width:560px;margin:0 auto;padding:10px 16px 120px}
main.arrive{animation:in .22s ease-out}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
header.top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0 14px}
header.top h1{font:700 26px/1.15 "Geist",sans-serif;letter-spacing:-.03em;margin:0}
.monthsw{display:flex;align-items:center;gap:2px;background:var(--surface);border-radius:999px;padding:3px;box-shadow:var(--shadow)}
.monthsw button{background:none;border:0;width:34px;height:34px;border-radius:999px;font-size:20px;color:var(--muted)}
.monthsw button:hover{background:var(--sunk)}
.monthsw span{min-width:0;white-space:nowrap;padding:0 4px;text-align:center;font-weight:600;font-size:14.5px}
.sync{font-size:11.5px;color:var(--muted);white-space:nowrap;border:0;background:none;padding:6px 2px;margin:0;font:inherit;font-size:11.5px;cursor:pointer;border-radius:8px}
.sync:not(:empty)::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gain);margin-right:5px;vertical-align:1px}
/* the dot is the whole status on a phone, so every state gets its own colour */
.sync[data-state=local]::before{background:var(--muted)}
.sync[data-state=busy]::before{background:var(--warn);animation:syncpulse 1.2s ease-in-out infinite}
.sync[data-state=off]::before{background:var(--warn)}
.sync[data-state=err]::before{background:var(--loss)}
.sync[data-state=err]{color:var(--loss);font-weight:600}
@keyframes syncpulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.sync[data-state=busy]::before{animation:none}}
.banner.err{background:var(--loss-soft)}
.banner.err b{color:var(--ink)}
.banner.err b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--loss);margin-right:8px;vertical-align:1px}
.banner.err span{color:var(--ink);opacity:.8}
.hr{display:flex;align-items:center;gap:6px}
button.icon{background:var(--surface);border:0;width:38px;height:38px;border-radius:999px;color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
button.icon .ms{font-size:22px}
/* hero: the one bold moment */
.hero{background:var(--hero);color:var(--hero-ink);border-radius:22px;padding:20px 20px 18px;margin:0 0 12px;position:relative;overflow:hidden;
}
.hero .lbl{color:var(--hero-muted);font-size:14px}
.hero .big{font-size:54px;line-height:1.05;font-weight:700;letter-spacing:-.045em;margin:6px 0 4px;color:var(--hero-ink)}
.hero .big small{font-size:26px;font-weight:600;color:var(--hero-muted);margin-right:3px;letter-spacing:0;vertical-align:.55em}
.hero .big.pos{color:var(--gain)}.hero .big.neg{color:var(--loss)}
.hero .sub{color:var(--hero-muted);font-size:13.5px}
.tape{display:flex;height:12px;border-radius:999px;overflow:hidden;margin:18px 0 2px;background:rgba(255,255,255,.1);gap:2px}
.tape i{display:block;height:100%;min-width:3px;border-radius:2px}
.tape i.al{background:var(--rose)!important}
.hero .tape i{opacity:.95}
.legend{list-style:none;margin:0;padding:0}
.legend li{display:grid;grid-template-columns:34px 1fr auto auto;gap:10px;align-items:center;padding:9px 0;font-size:14.5px}
.legend li+li{border-top:1px solid var(--line)}
.legend .sw{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;position:relative;background:var(--sunk)}
.legend .sw::after{content:"";position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;background:var(--c,transparent);border:2px solid var(--surface)}
.legend .amt{font-weight:600}
.delta{font-size:12px;min-width:56px;text-align:right;font-weight:500;border-radius:999px;padding:2px 7px}
.delta.up{background:var(--loss-soft)}.delta.down{background:var(--gain-soft)}
.up{color:var(--loss)}.down{color:var(--gain)}.flat{color:var(--muted)}
/* stat bento */
.strip{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 22px}
.strip div{background:var(--surface);border-radius:22px;padding:14px 16px;box-shadow:var(--shadow)}
.strip div:last-child{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;background:var(--gain-soft);box-shadow:none}
.strip div:last-child:has(.neg){background:var(--loss-soft)}
.strip b{display:block;font:700 22px/1.2 "Geist",sans-serif;letter-spacing:-.02em}
.strip div:last-child b{font-size:28px;order:2}
.strip span{font-size:13px;color:var(--muted)}
section.blk{margin:0 0 24px}
section.blk>h2{font:700 18px/1.3 "Geist",sans-serif;letter-spacing:-.02em;margin:0 0 10px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
section.blk>h2 a,section.blk>h2 button{font:600 13.5px "Geist",sans-serif;color:var(--accent);background:none;border:0;padding:0;text-decoration:none}
.panel{background:var(--surface);border-radius:22px;padding:4px 16px;box-shadow:var(--shadow)}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.row+.row,.row+button.row,button.row+.row,button.row+button.row{border-top:1px solid var(--line)}
.row .l{min-width:0;flex:1}
.row .l b{font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .l span{font-size:12.5px;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal}
.row.caution .l b{color:var(--loss)}
.row .r{text-align:right;white-space:nowrap;font-weight:600}
.row .r span{display:block;font-size:12px;color:var(--muted);font-weight:400}
button.row{width:100%;background:none;border:0;text-align:left;padding:12px 0;border-radius:0}
button.row:active{transform:none;opacity:.7}
.av{flex:0 0 auto;width:40px;height:40px;border-radius:13px;background:var(--sunk);display:flex;align-items:center;justify-content:center;font-size:19px}
.av.al{background:var(--rose-soft)}
.pos{color:var(--gain)}.neg{color:var(--loss)}
.bar{height:8px;background:var(--sunk);border-radius:999px;overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:999px}
.bar i.over{background:var(--loss)}
.note{font-size:13px;color:var(--muted);margin:8px 2px 0}
.empty{padding:26px 8px;color:var(--muted);text-align:center}
.empty button{margin-top:12px}
.trend{background:var(--surface);border-radius:22px;padding:16px;box-shadow:var(--shadow)}
.trend svg{width:100%;height:auto;display:block}
.trend text{fill:var(--muted);font-size:10px;font-family:"Geist",sans-serif}
/* chips */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none;margin:0 -16px;padding-left:16px;padding-right:16px}
.chips::-webkit-scrollbar{display:none}
/* clipped chips mean more to scroll: fade the edges where chips run sideways (the ticker on ethantam.dev does the same) */
@media (max-width:767px){ .chips{mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 18px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 18px),transparent)} }
.chip{flex:0 0 auto;border:0;background:var(--surface);border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:500;white-space:nowrap;box-shadow:var(--shadow)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.chip.rose{color:var(--rose)}
.chip.rose[aria-pressed="true"]{background:var(--rose);color:#fff}
.wrap .chip{box-shadow:none;background:var(--sunk)}
.wrap .chip[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.wrap .chip.rose[aria-pressed="true"]{background:var(--rose);color:#fff}
.search{width:100%;padding:12px 16px;border:0;border-radius:14px;background:var(--surface);margin-bottom:12px;box-shadow:var(--shadow)}
.day{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--muted);padding:16px 4px 8px}
.tag{display:inline-block;font-size:11px;font-weight:600;padding:1px 8px;border-radius:999px;background:var(--rose-soft);color:var(--rose);margin-left:6px;vertical-align:1px}
/* nav: floating pill */
nav.tabs{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:10;max-width:520px;margin:0 auto;
  background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:999px;padding:6px 8px;box-shadow:0 10px 30px rgba(15,25,60,.14)}
nav.tabs .in{display:grid;grid-template-columns:repeat(6,1fr);align-items:center}
nav.tabs button{background:none;border:0;padding:5px 0;font-size:11px;font-weight:500;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:1px;border-radius:999px}
nav.tabs button .ms{font-size:23px}
nav.tabs button[aria-current="page"]{color:var(--accent);font-weight:700}
nav.tabs button[aria-current="page"] .ms{font-variation-settings:"FILL" 1,"wght" 500,"opsz" 24}
nav.tabs .add{justify-self:center;width:52px;height:52px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:30px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 45%,transparent);padding:0}
nav.tabs .add .ms{font-size:30px}
@media (prefers-reduced-transparency:reduce){nav.tabs{background:var(--surface);backdrop-filter:none}}
/* sheet */
dialog.sheet{border:0;padding:0;margin:auto auto 0;width:100%;max-width:560px;max-height:92%;border-radius:26px 26px 0 0;background:var(--bg);color:var(--ink);overflow:auto;animation:up .24s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
dialog.sheet::backdrop{background:rgba(8,12,24,.5);backdrop-filter:blur(2px)}
.sheet .hd{position:sticky;top:0;background:var(--bg);display:flex;justify-content:space-between;align-items:center;padding:12px 18px 8px;z-index:1}
.sheet .hd::before{content:"";position:absolute;top:6px;left:50%;width:38px;height:4px;border-radius:999px;background:var(--line);transform:translateX(-50%)}
.sheet .hd h3{margin:8px 0 0;font:700 20px "Geist",sans-serif;letter-spacing:-.02em}
.sheet .hd button{background:var(--surface);border:0;font-size:14px;font-weight:600;color:var(--muted);padding:7px 14px;border-radius:999px;margin-top:8px}
.sheet .bd{padding:6px 18px calc(24px + env(safe-area-inset-bottom,0px))}
.seg{display:flex;background:var(--sunk);border-radius:999px;padding:4px;margin-bottom:14px}
.seg button{flex:1;border:0;background:none;padding:9px 6px;border-radius:999px;font-size:14px;font-weight:500;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--raised);color:var(--ink);font-weight:700;box-shadow:var(--shadow)}
.amt-in{display:flex;align-items:baseline;gap:6px;background:var(--surface);border-radius:22px;padding:16px 18px;margin:4px 0 14px;box-shadow:var(--shadow)}
.amt-in span{font:600 28px "Geist",sans-serif;color:var(--muted)}
.amt-in input{border:0;background:none;outline:none;font:700 44px/1.05 "Geist",sans-serif;letter-spacing:-.04em;width:100%}
label.f{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:14px 2px 7px}
input.t,select.t,textarea.t{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.wrap{display:flex;flex-wrap:wrap;gap:7px}
.actions{display:flex;gap:10px;margin-top:22px}
.btn{flex:1;border:0;border-radius:999px;padding:15px;font-weight:700;background:var(--accent);color:var(--accent-ink);font-size:15px}
.btn.ghost{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.btn.danger{background:var(--loss-soft);color:var(--loss);flex:0 0 auto;padding:15px 18px}
.btn.sm{flex:0 0 auto;padding:10px 18px;font-size:14px}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-size:14px;font-weight:600;z-index:20;opacity:0;transition:opacity 200ms cubic-bezier(0.23,1,0.32,1),transform 200ms cubic-bezier(0.23,1,0.32,1);pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%) translateY(-4px)}
.kv{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:14px;margin:8px 0}
.kv span:nth-child(odd){color:var(--muted)}
.kv span:nth-child(even){text-align:right;font-weight:600}
.pl-big{font:700 36px/1.1 "Geist",sans-serif;letter-spacing:-.035em;margin:4px 0}
.warn{font-size:12.5px;color:var(--accent);font-weight:500}
.banner{display:flex;flex-direction:column;width:100%;text-align:left;border:0;background:var(--accent-soft);border-radius:18px;padding:12px 16px;margin:0 0 12px}
.banner b{font-weight:700;color:var(--accent)}
.banner span{font-size:13px;color:var(--muted)}
.banner.quiet{background:var(--surface);box-shadow:var(--shadow);margin:0 0 24px}
.banner.quiet b{color:var(--ink)}
/* insights */
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 24px}
.kpis div{background:var(--surface);border-radius:22px;padding:14px 16px;box-shadow:var(--shadow)}
.kpis div:first-child{background:var(--hero);color:var(--hero-ink);box-shadow:none}
.kpis div:first-child span,.kpis div:first-child i{color:var(--hero-muted)}
.kpis div:nth-child(3){background:var(--rose-soft);box-shadow:none}
.kpis span{display:block;font-size:13px;color:var(--muted)}
.kpis b{display:block;font:700 28px/1.15 "Geist",sans-serif;letter-spacing:-.035em;margin:4px 0 2px}
.kpis i{font-style:normal;font-size:12px;color:var(--muted)}
section.blk:has(.cw){background:var(--surface);border-radius:22px;padding:16px;box-shadow:var(--shadow)}
.cw{position:relative;width:100%}
.lg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted);margin:0 0 10px}
.lg span{display:inline-flex;align-items:center;gap:5px}
.lg i{display:inline-block;width:10px;height:10px;border-radius:3px}
.heat{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;background:var(--surface);border-radius:22px;padding:14px;box-shadow:var(--shadow)}
.heat i,.lg i.h0,.lg i.h1,.lg i.h2,.lg i.h3,.lg i.h4{aspect-ratio:1;border-radius:3px;display:block}
.lg span i[class^="h"]{width:11px;height:11px}
.h0{background:var(--sunk)}
.h1{background:color-mix(in srgb,var(--accent) 22%,var(--surface))}.h2{background:color-mix(in srgb,var(--accent) 45%,var(--surface))}
.h3{background:color-mix(in srgb,var(--accent) 72%,var(--surface))}.h4{background:var(--accent)}
.tbl{padding:4px 14px;overflow-x:auto}
.tbl .th,.tbl .tr{display:grid;grid-template-columns:minmax(0,1.6fr) 1fr .6fr 1fr;gap:8px;padding:10px 0;font-size:13.5px;align-items:center}
.tbl .tr{border-top:1px solid var(--line)}
.tbl .th{font-size:12px;color:var(--muted);font-weight:600}
.tbl .tr span:not(:first-child),.tbl .th span:not(:first-child){text-align:right}
.tbl .tr span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl .tr i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:7px}
.row.closed{opacity:.5}
.irow{gap:10px}
.irow.off .l b{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 50%,transparent)}
.ck{flex:0 0 auto;width:26px;height:26px;border-radius:9px;border:1.5px solid var(--line);background:var(--surface);color:var(--accent-ink);font-size:14px;font-weight:700;padding:0}
.ck[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.chip.sm{padding:3px 10px;font-size:11.5px;margin-top:5px}
.match{color:var(--accent)!important}
.csel{margin-top:5px;max-width:100%;font-size:12.5px;padding:4px 8px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.legend-wrap{margin:0 0 12px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.row .l b .tag{display:inline-block;font-size:11px;color:var(--rose)}
details.fold{border-top:1px solid var(--line)}
details.fold summary{list-style:none;cursor:pointer;padding:12px 0;font-size:13.5px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:6px}
details.fold summary::-webkit-details-marker{display:none}
details.fold summary::before{content:"›";display:inline-block;transition:transform .15s;font-size:17px;color:var(--muted)}
details.fold[open] summary::before{transform:rotate(90deg)}
details.fold[open] summary{border-bottom:1px solid var(--line)}
details.fold .row:first-of-type{border-top:0}

/* ---------------------------------------------------------------
   Responsive layer. Mobile first: one column, 44px touch targets.
   768px: two columns. 1024px: three, with hover and active states.
   --------------------------------------------------------------- */

/* Touch targets: every interactive element clears 44px on touch devices */
nav.tabs button{min-height:48px;justify-content:center}
button.icon{width:44px;height:44px}
.monthsw button{width:44px;height:44px}
.monthsw span{min-height:44px;display:flex;align-items:center;justify-content:center}
.chip{min-height:44px;display:inline-flex;align-items:center;padding:0 16px}
.chip.sm{min-height:34px;padding:0 12px}
.row,button.row{min-height:52px}
.seg button{min-height:44px}
.btn{min-height:48px}
.btn.sm{min-height:40px}
input.t,select.t,.search{min-height:48px}
.ck{width:32px;height:32px;position:relative}
.ck::after{content:"";position:absolute;inset:-8px} /* invisible 48px tap area */
.legend li{min-height:52px}
details.fold summary{min-height:48px}
input[type="checkbox"]{width:22px;height:22px}
/* iOS Safari zooms the viewport on focus when a field is under 16px; text entry stays 16px on touch */
@media (pointer:coarse){input,select,textarea{font-size:16px}}

/* Pointer devices: hover and pressed feedback */
@media (hover:hover) and (pointer:fine){
  button.row:hover,.row:hover{background:var(--sunk)}
  button.row,.row{transition:background .15s;border-radius:12px;padding-left:10px;padding-right:10px;margin-left:-10px;margin-right:-10px}
  .row+.row,.row+button.row,button.row+.row,button.row+button.row{border-top:0;background-image:linear-gradient(var(--line),var(--line));background-size:calc(100% - 20px) 1px;background-position:10px 0;background-repeat:no-repeat}
  .chip:hover{background:var(--sunk)}
  .chip[aria-pressed="true"]:hover{background:var(--ink)}
  .btn:hover{background:color-mix(in srgb,var(--accent) 88%,var(--ink))}
  .btn:active{background:color-mix(in srgb,var(--accent) 82%,var(--ink))}
  nav.tabs button:hover{background:var(--sunk)}
  .kpis div,.panel,.strip div{transition:box-shadow .2s,transform .2s}
  .tbl .tr:hover{background:var(--sunk)}
}

/* Tablet: two columns, wider gutters */
@media (min-width:768px){
  main{max-width:900px;padding:16px 24px 130px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;align-content:start}
  header.top,.hero,.strip,.kpis,.chips,.search,.banner,.legend-wrap,section.blk,.trend,.heat,.day,.panel,.note,.seg,p.note,div.note{grid-column:1 / -1}
  section.blk{margin:0}
  .hero .big{font-size:64px}
  .strip{grid-template-columns:repeat(3,1fr)}
  .strip div:last-child{grid-column:auto}
}

/* Desktop: three balanced columns with the summary leading */
@media (min-width:1024px){
  main{max-width:1180px;padding:96px 32px 48px;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 22px;align-items:start}
  header.top{padding-top:0}
  .banner.quiet{grid-column:span 2}
  .hero{grid-column:span 2;padding:26px 28px}
  .legend-wrap{grid-column:span 1;align-self:stretch;overflow:auto}
  section.blk,.trend{grid-column:span 1}
  section.blk:has(.cw),section.blk:has(.heat),section.blk:has(.tbl){grid-column:span 2}
  .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  .chips{margin:0;padding:0 0 4px;flex-wrap:wrap;overflow:visible}
  /* nav moves to the top as a centred pill with an active indicator */
  nav.tabs{position:fixed;top:16px;bottom:auto;left:0;right:0;margin:0 auto;max-width:660px}
  nav.tabs button{flex-direction:row;gap:8px;font-size:13.5px;padding:9px 0;position:relative}
  nav.tabs button[aria-current="page"]{background:var(--accent-soft);border-radius:999px}
  nav.tabs button[aria-current="page"]::after{content:"";position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:18px;height:3px;border-radius:999px;background:var(--accent)}
  nav.tabs .add{width:46px;height:46px;margin-top:0}
  /* sheets become centred dialogs */
  dialog.sheet{margin:auto;border-radius:22px;max-width:560px;max-height:86vh}
  .sheet .hd::before{display:none}
  .sheet .hd h3{margin:0}
}

/* Short laptop windows: the top nav is a guest, not the host — slimmer bar, less dead space above the fold */
@media (min-width:1024px) and (max-height:900px){
  main{padding-top:60px}
  nav.tabs{top:8px}
  nav.tabs button{font-size:12.5px;padding:5px 0}
  nav.tabs .add{width:38px;height:38px;font-size:24px}
  nav.tabs .add .ms{font-size:24px}
}

/* Very large screens: cap the reading width, keep the grid balanced */
@media (min-width:1536px){
  main{max-width:1320px}
  .hero .big{font-size:72px}
}

/* Narrow phones: the header keeps the month picker and the menu; the sync
   wording collapses to its status dot until there is room for words. */
.sync{max-width:1.2em;overflow:hidden;white-space:nowrap;color:transparent}
.sync:not(:empty)::before{margin-right:0}
header.top{gap:6px}
.monthsw{min-width:0}
@media (min-width:480px){ .sync{max-width:none;color:var(--muted)} .sync:not(:empty)::before{margin-right:5px} }
.sync[data-state=err]{max-width:none;color:var(--loss)}
.sync[data-state=err]::before{margin-right:5px}
.av.mv{background:var(--accent-soft);color:var(--accent);font-size:17px}
.row .r.mut{color:var(--muted);font-weight:500}

/* Roomier margins: more air around the edges, between blocks and inside cards. */
main{padding:12px 20px 124px}
section.blk{margin:0 0 28px}
section.blk>h2{margin:0 0 12px}
.panel{padding:6px 18px}
.hero{padding:24px 22px 20px;margin:0 0 14px}
.legend-wrap{padding:6px 18px;margin:0 0 16px}
.strip{gap:12px;margin:4px 0 26px}
.strip div{padding:16px 18px}
.kpis{gap:12px;margin:0 0 26px}
.kpis div{padding:16px 18px}
.chips{gap:9px;margin:0 -20px;padding:2px 20px 14px}
.note{margin:10px 2px 0}
.banner{padding:14px 18px;margin:0 0 16px}
.banner.quiet{margin:0 0 26px}
.day{padding:18px 6px 8px}
.sheet .bd{padding:6px 20px calc(28px + env(safe-area-inset-bottom,0px))}
.sheet .hd{padding:12px 20px 8px}
label.f{margin:16px 2px 8px}
.actions{margin-top:24px}
.heat,.trend{padding:16px 18px}
@media (min-width:768px){ main{padding:18px 28px 132px;gap:22px 24px} .chips{margin:0;padding:2px 0 14px} }
@media (min-width:1024px){ main{padding:100px 36px 56px;gap:24px 26px} .hero{padding:30px 32px} }

/* Activity rows: give each line room and keep the secondary text quiet. */
.panel .row,.panel button.row{padding:14px 0;gap:14px}
.row .l b{font-size:15px;line-height:1.35}
.row .l span{font-size:12.5px;margin-top:2px;color:var(--muted)}
.row .r{font-size:15.5px}
.av{width:38px;height:38px;border-radius:12px;font-size:18px}
.av.mv{background:var(--accent-soft);color:var(--accent);font-size:16px;font-weight:700}
.day{font-size:12.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);padding:20px 6px 8px}
.row .r.mut{color:var(--muted);font-weight:500}
.chip.emo{padding:0;width:44px;justify-content:center;font-size:19px}
.chip.emo[aria-pressed="true"]{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}

/* ---------- polish pass ---------- */
/* pace line in the summary card */
.pace{margin-top:14px;display:grid;gap:7px}
.pace span{font-size:13px;color:var(--hero-muted)}
.pace b{color:var(--hero-ink);font-weight:600}
.pbar{height:4px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.pbar i{display:block;height:100%;background:var(--hero-ink);opacity:.7;border-radius:999px}
/* quick repeat chips */
.quick h2{font-size:15px!important;color:var(--muted)}
.chip.qa{gap:8px;padding:0 14px 0 10px}
.chip.qa span{font-size:16px}
.chip.qa em{font-style:normal;color:var(--muted);font-weight:500;font-size:12.5px}
/* undo in the toast */
.toast.act{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 18px}
.toast .undo{background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;padding:8px 14px;font-weight:700;min-height:44px}
/* health */
.healthy{text-align:center;padding:26px 8px 8px;display:grid;gap:6px;justify-items:center}
.healthy b{font-size:17px}
.healthy span{font-size:13.5px;color:var(--muted);max-width:32ch}
.tick{width:56px;height:56px;border-radius:50%;background:var(--gain-soft);position:relative;margin-bottom:6px;animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
.tick::after{content:"";position:absolute;left:19px;top:14px;width:12px;height:22px;border:solid var(--gain);border-width:0 4px 4px 0;transform:rotate(45deg);animation:draw .35s .2s both}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes draw{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
/* motion: rows arrive in a short cascade, the summary tape grows in */
main.arrive .panel>.row,main.arrive .panel>button.row,main.arrive .legend li{animation:rise .32s cubic-bezier(.2,.8,.2,1) both}
.panel>:nth-child(2){animation-delay:.03s}.panel>:nth-child(3){animation-delay:.06s}.panel>:nth-child(4){animation-delay:.09s}
.panel>:nth-child(5){animation-delay:.12s}.panel>:nth-child(n+6){animation-delay:.15s}
.legend li:nth-child(2){animation-delay:.04s}.legend li:nth-child(3){animation-delay:.08s}.legend li:nth-child(n+4){animation-delay:.12s}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tape{transform-origin:left}
main.arrive .tape{animation:grow .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
.hero .big span{display:inline-block}
@media (prefers-reduced-motion:reduce){.panel>.row,.panel>button.row,.legend li,.tape,.tick,.tick::after{animation:none!important}}

.quick{margin:0 0 14px!important}
.quick h2{margin:0 0 8px!important}
/* desktop: category list sits beside the summary; quick repeats run full width under both */
@media (min-width:1024px){
  main>*{order:3}
  main>header.top,main>.banner:not(.quiet){order:0}
  main>.hero,main>.legend-wrap{order:1}
  main>.quick{order:2;grid-column:span 2} /* under the month card, beside the category list */
  main>.legend-wrap{grid-row:span 2}
  main>.quick .chips{flex-wrap:nowrap;overflow-x:auto;mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 18px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 18px),transparent)}
}
@media (min-width:1024px){ main>.hero{align-self:start} } /* sized to its content, not stretched to the list beside it */

#plsel{flex-wrap:nowrap}
#plsel button{white-space:nowrap;flex:0 0 auto;padding:9px 14px}

/* anything marked hidden stays hidden, whatever its own display rule says */
[hidden]{display:none!important}

/* ---------- amount calculator ---------- */
.calc-in{padding-right:10px}
.calc-in input{min-width:0}
.calcbtn{flex:0 0 auto;align-self:center;width:48px;height:48px;border-radius:14px;border:0;background:var(--sunk);color:var(--muted);font:700 12px/1.1 "Geist",sans-serif;letter-spacing:.04em}
.calcbtn[aria-expanded="true"]{background:var(--accent);color:var(--accent-ink)}
.calcsum{display:flex;gap:10px;align-items:baseline;min-height:0;margin:-6px 4px 10px;font-size:13.5px;color:var(--muted)}
.calcsum:empty{display:none}
.calcsum b{color:var(--ink);font-size:15px}
.calcpad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:var(--surface);border-radius:22px;padding:12px;margin:0 0 14px;box-shadow:var(--shadow)}
.calcpad button{min-height:52px;border:0;border-radius:14px;background:var(--sunk);font:600 20px "Geist",sans-serif;color:var(--ink)}
.calcpad button.op{background:var(--accent-soft);color:var(--accent)}
.calcpad button.fn{color:var(--muted);font-size:17px}
.calcpad button.eq{background:var(--accent);color:var(--accent-ink)}
.calcpad button:active{transform:scale(.96)}
.chip.on{background:var(--accent);color:var(--accent-ink)}
.chip.x{min-width:44px;justify-content:center;padding:0;margin-left:-4px;color:var(--muted)}
.banner.hint{margin:4px 0 14px;border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--line))}
#acctseg{overflow-x:auto;scrollbar-width:none}
#acctseg button{white-space:nowrap;flex:1 0 auto;padding:9px 12px}
#pm .chip.pl{border:1px dashed color-mix(in srgb,var(--muted) 45%,transparent);background:transparent}
#pm .chip.pl[aria-pressed="true"]{background:var(--ink);border-color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:0}
.chip em.cnt{font-style:normal;font-size:12px;color:var(--muted);margin-left:4px}
.chip[aria-pressed="true"] em.cnt{color:inherit;opacity:.75}
.icon.sm{width:40px;height:40px}
.icon.sm .ms{font-size:21px}
.row.hist.undone b,.row.hist.undone span{text-decoration:line-through;opacity:.55}
.row.hist.sys b{color:var(--muted);font-weight:500}
#instn{flex-wrap:wrap}
.btn[disabled]{opacity:.38;pointer-events:none;box-shadow:none}
.row.hist .l span{white-space:normal}

/* ---------- wallet page ---------- */
.wal-hero{display:grid;gap:4px;padding:6px 2px 14px}
.wal-hero span{font-size:13px;color:var(--muted)}
.wal-hero b{font-size:40px;line-height:1.05;letter-spacing:-.02em;font-weight:700}
.wal-hero em{font-style:normal;font-size:13px;color:var(--muted)}
.wal-range{margin-bottom:10px}
.wal-chart{position:relative;height:180px;margin:0 0 12px;background:var(--surface);border-radius:20px;padding:12px 10px 6px;box-shadow:var(--shadow)}
.wal-strip{margin-bottom:6px}
.wal-list .r span{font-weight:500}
dialog.tall{max-height:94vh}
.wal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
.wal-stats>div{background:var(--surface);border-radius:16px;padding:10px 12px;box-shadow:var(--shadow);display:grid;gap:2px}
.wal-stats b{font-size:18px;letter-spacing:-.01em}
.wal-stats span{font-size:12.5px;color:var(--muted)}

/* history icon */
.icon .ico{width:21px;height:21px;display:block}
.icon.sm .ico{width:20px;height:20px}
/* spent / earned switch inside the summary card */
.hero-tog{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.1);margin:0 0 12px}
.hero-tog button{border:0;background:transparent;color:var(--hero-muted);font:600 13px "Geist",sans-serif;padding:7px 14px;border-radius:999px;min-height:34px}
.hero-tog button[aria-selected="true"]{background:var(--hero-ink);color:#0e1116}
.hero.earn{background:#0c1210}
.strip [data-hm]{cursor:pointer}
.actions.wrap-btns{flex-wrap:wrap;justify-content:flex-start}.actions.wrap-btns .btn{flex:0 1 auto}

.wal-chart canvas{touch-action:pan-y}

/* ---------- Insights 2: views, trends, tag lens ---------- */
.ins-tabs{display:flex;gap:4px;padding:4px;background:var(--sunk);border-radius:999px;margin:4px 0 16px}
.ins-tabs button{flex:1;border:0;background:transparent;border-radius:999px;padding:10px 8px;min-height:44px;font:600 14px "Geist",sans-serif;color:var(--muted);white-space:nowrap}
.ins-tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.tr-rail{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scroll-padding-inline:0;scrollbar-width:none}
.tr-rail::-webkit-scrollbar{display:none}
.tr-chip{flex:0 0 auto;gap:7px}
.tr-chip small{opacity:.65;font-size:12.5px;font-weight:500}
.tr-chip[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.tr-main{padding-top:18px}
.tr-crumb{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;border:0;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:6px 12px;min-height:36px;font:600 13.5px "Geist",sans-serif}
.tr-title{font-size:20px;margin:0 0 4px;letter-spacing:-.01em}
.tr-big{margin:0 0 8px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tr-big span{font-size:38px;font-weight:700;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.tr-big small{font-size:15px;color:var(--muted)}
.tr-insight{margin:0 0 12px;color:var(--ink);line-height:1.5;max-width:62ch}
.tr-insight .neg{color:var(--loss);font-weight:600}.tr-insight .pos{color:var(--gain);font-weight:600}
.tr-chart{position:relative;height:210px}
.tr-chart canvas{touch-action:pan-y}
.tr-legend{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 0;color:var(--muted);font-size:12.5px}
.tr-legend b{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--accent);vertical-align:-1px;margin-right:6px}
.tr-legend b.partial{background:repeating-linear-gradient(135deg,var(--accent) 0 2px,transparent 2px 5px);outline:1px solid var(--accent)}
.tr-legend i{display:inline-block;width:18px;border-top:2px dashed var(--muted);vertical-align:middle;margin-right:6px}
.linkbtn{border:0;background:transparent;color:var(--accent);font:600 14px "Geist",sans-serif;padding:8px 0;min-height:40px}
.tr-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:4px}
.tr-table th,.tr-table td{text-align:left;padding:8px 4px;border-bottom:1px solid var(--line)}
.tr-table .r{text-align:right;font-variant-numeric:tabular-nums}
.tr-h{font-size:16px;margin:0 0 8px;letter-spacing:-.005em}
.tr-list{display:grid}
.tr-item{display:grid;grid-template-columns:1fr 84px auto;align-items:center;gap:12px;padding:12px 6px;min-height:58px;border:0;background:transparent;text-align:left;border-top:1px solid var(--line);width:100%;color:var(--ink);font:inherit;border-radius:0}
.tr-item:first-child{border-top:0}
.tr-t b{display:block;font-weight:600}
.tr-t span{font-size:13px;color:var(--muted)}
.tr-v{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.tr-v span{display:block;font-size:12.5px;color:var(--muted);font-weight:500}
.spark{width:84px;height:28px;overflow:visible;color:var(--accent)}
.tr-often div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:14.5px}
.tr-often div:first-child{border-top:0}
.tr-often p{margin:0}.tr-often span{color:var(--muted)}
.ln-stats{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;margin:0 0 14px}
.ln-hero{grid-row:span 2;border-radius:20px;padding:16px;background:var(--accent);color:var(--accent-ink);display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.ln-hero p{margin:0;font-size:13.5px;font-weight:500}
.ln-hero b{font-size:34px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ln-stat{background:var(--surface);border-radius:20px;padding:14px 16px;box-shadow:var(--shadow)}
.ln-stat b{display:block;font-size:21px;font-variant-numeric:tabular-nums}
.ln-stat p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.ln-bars{display:grid;gap:12px}
.ln-bar div{display:flex;justify-content:space-between;gap:10px;font-size:14.5px;margin-bottom:6px}
.ln-bar div span{font-variant-numeric:tabular-nums}.ln-bar small{color:var(--muted)}
.ln-bar i{display:block;height:10px;border-radius:999px;background:var(--accent);width:var(--w);transform-origin:left}
.ln-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end;height:130px;margin-top:4px}
.ln-day{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%}
.ln-day i{display:block;width:100%;border-radius:10px 10px 6px 6px;background:var(--accent);opacity:var(--o);height:var(--h);min-height:4px;transform-origin:bottom}
.ln-day span{font-size:12px;color:var(--muted)}
.ln-day small{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
.ln-m{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 0;border:0;border-top:1px solid var(--line);background:transparent;width:100%;text-align:left;color:var(--ink);font:inherit}
.ln-m:first-child{border-top:0}
.ln-m .l b{display:block;font-weight:600}.ln-m .l span{font-size:13px;color:var(--muted)}
.ln-m .r{font-weight:600;font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  main.arrive .ln-bar i{animation:lnGrow .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k) * 50ms)}
  main.arrive .ln-day i{animation:lnRise .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k) * 45ms)}
  .tr-item,.ins-tabs button,.tr-chip{transition:background-color .18s,color .18s,transform .12s}
  .tr-item:active,.tr-chip:active{transform:scale(.98)}
  @keyframes lnGrow{from{transform:scaleX(0)}to{transform:none}}
  @keyframes lnRise{from{transform:scaleY(0)}to{transform:none}}
}
@media (hover:hover) and (pointer:fine){.tr-item:hover{background:var(--sunk);border-radius:12px}}
@media (min-width:1024px){.ln-stats{grid-template-columns:1.4fr 1fr 1fr}.ln-hero{grid-row:auto}}

/* Phosphor icons: sized by the same font-size rules the icon font used */
.ms{font-family:inherit;overflow:visible;display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em}
.ms .pi{width:1em;height:1em;display:block}
.ms .pi-line + .pi-fill{display:none}
nav.tabs button[aria-current="page"] .ms .pi-line{display:none}
nav.tabs button[aria-current="page"] .ms .pi-line + .pi-fill{display:block}
.icon .ico{display:none}

/* WCAG AA: light-mode status colours darkened to reach 4.5:1 on white, on the page, and on their own tinted badges */
:root{--loss:#CD222F;--gain:#0B7C56;--rose:#CA1C62}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--loss:#FF6B75;--gain:#34D399;--rose:#FF6FA8}}
:root[data-theme="dark"]{--loss:#FF6B75;--gain:#34D399;--rose:#FF6FA8}

/* ---------- Insights layout across screen sizes ----------
   Phone: one column. Tablet (768+): the view spans the page in two columns.
   Desktop (1024+): three columns, charts get two of them. The Overview view
   reuses the page grid so its original layout rules still apply. */
.ins-view > .panel{margin:0 0 14px}
@media (min-width:768px){
  main > .ins-tabs{grid-column:1 / -1;max-width:520px;margin:0}
  main > .ins-view{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;align-items:start}
  .ins-view > *{grid-column:1 / -1;margin:0}
  .ins-view > .panel{margin:0}
  .ins-trends > .tr-subs,.ins-trends > .tr-often-p{grid-column:auto}
  .ins-lens > .ln-cats,.ins-lens > .ln-days,.ins-lens > .ln-mom,.ins-lens > .ln-between{grid-column:auto}
  .ins-ov > .kpis,.ins-ov > .seg{grid-column:1 / -1}
  .ins-ov > section.blk{grid-column:1 / -1}
  .kpis b{font-size:clamp(22px,2.6vw,28px);overflow-wrap:anywhere}
}
@media (min-width:1024px){
  main > .ins-view{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 22px}
  .tr-rail{flex-wrap:wrap;overflow:visible;padding-bottom:0}
  .ins-trends > .tr-main{grid-column:span 2;grid-row:span 2}
  .ins-trends > .tr-subs,.ins-trends > .tr-often-p{grid-column:3}
  .ins-trends > .tr-main .tr-chart{height:300px}
  .ins-lens > .ln-stats{grid-column:1 / -1}
  .ins-lens > .ln-month{grid-column:span 2}
  .ins-lens > .ln-month .tr-chart{height:240px !important}
  .ins-lens > .ln-cats{grid-column:3}
  .ins-ov > section.blk{grid-column:span 1}
  .ins-ov > section.blk:has(.cw),.ins-ov > section.blk:has(.heat),.ins-ov > section.blk:has(.tbl){grid-column:span 2}
  .ins-ov > .seg{max-width:520px}
}
@media (min-width:1024px){
  /* smaller panels fill the column beside wide charts instead of queueing below */
  main > .ins-ov{grid-auto-flow:row dense}
  /* panels in the same row share a height, so rows don't leave ragged gaps */
  main > .ins-lens{align-items:stretch}
  /* the narrower right-hand column: keep names on one line, a smaller sparkline */
  .ins-trends > .tr-subs .tr-item{grid-template-columns:minmax(0,1fr) 56px auto;gap:10px;padding:10px 4px}
  .ins-trends > .tr-subs .tr-t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ins-trends > .tr-subs .spark{width:56px}
}
@media (min-width:1024px){
  /* Overview: headline charts wide, smaller charts one column each, heatmap and table full width */
  .ins-ov > section.blk[data-c="c1"],.ins-ov > section.blk[data-c="c2"]{grid-column:span 2}
  .ins-ov > section.blk[data-c="c3"],.ins-ov > section.blk[data-c="c4"],.ins-ov > section.blk[data-c="c5"],
  .ins-ov > section.blk[data-c="c6"],.ins-ov > section.blk[data-c="c7"]{grid-column:span 1}
  .ins-ov > section.blk:has(.heat),.ins-ov > section.blk:has(.tbl){grid-column:1 / -1}
}
@media (min-width:1024px){ .ins-ov > section.blk[data-c="c7"]{grid-column:span 2} }
@media (min-width:768px){
  .ins-trends > .tr-subs .tr-item{grid-template-columns:minmax(0,1fr) 56px auto;gap:10px;padding:10px 4px}
  .ins-trends > .tr-subs .tr-t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ins-trends > .tr-subs .spark{width:56px}
}
.ul-w{margin-top:8px;gap:6px}.ul-w .chip.sm{min-height:34px;padding:0 12px;font-size:13px}.ul-row{align-items:flex-start}

/* Trends history: every entry behind the chart */
.tr-hist-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.tr-hist-h .tr-h{margin:0}
.tr-month{display:flex;justify-content:space-between;gap:10px;padding:14px 2px 6px;font-size:12.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.tr-month span:last-child{text-transform:none;letter-spacing:0;font-weight:500;font-variant-numeric:tabular-nums}
.tr-hist-list .tr-hrow{width:100%}
.tr-hd{display:block;font-size:12.5px;color:var(--muted);font-weight:500;margin-bottom:1px}
.tr-chart canvas{cursor:pointer}
@media (min-width:768px){ .ins-trends > .tr-hist{grid-column:1 / -1} }
.tr-kind{margin:0 0 12px;max-width:320px}
.tr-legend.inc b{background:var(--gain)}
.tr-legend.inc b.partial{background:repeating-linear-gradient(135deg,var(--gain) 0 2px,transparent 2px 5px);outline-color:var(--gain)}
@media (min-width:768px){ .ins-trends > .tr-kind{grid-column:1 / -1} }
.panel.sug{padding:4px 16px 14px;margin-bottom:12px}.sugmsg{margin:2px 0 10px;font-size:14px;line-height:1.45}
.savewarn{background:var(--accent-soft);color:var(--ink);border-radius:14px;padding:12px 14px;margin:12px 0 0;font-size:14px}.savewarn p{margin:0 0 6px}.savewarn p:last-of-type{margin-bottom:8px}
.aitag{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:1px 6px;margin-right:2px}
.aichat{padding:8px 12px;max-height:46vh;overflow:auto;display:grid;gap:8px}.aimsg{padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.45;white-space:pre-wrap;max-width:88%}.aimsg.user{justify-self:end;background:var(--accent);color:#fff}.aimsg.assistant{justify-self:start;background:var(--sunk)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.actions.sticky{position:sticky;bottom:0;z-index:2;margin:18px -20px calc(-28px - env(safe-area-inset-bottom,0px));padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));background:var(--bg);box-shadow:0 -1px 0 var(--line)}
details.more{margin-top:18px;border-top:1px solid var(--line)}
details.more>summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:14px 2px 4px;font-weight:600;font-size:14.5px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary>span:first-child::after{content:"";display:inline-block;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-left:9px;vertical-align:3px;transition:transform .2s}
details.more[open]>summary>span:first-child::after{transform:rotate(-135deg);vertical-align:-1px}
details.more>summary .note{font-weight:400;margin:0}
.chip.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}

/* ---------- Glass ----------
   Frosted surfaces for the chrome you move through (nav, header controls, sheets) and the
   month card. Rows of amounts stay on solid cards so they read in sunlight. The blur needs
   something to blur, so the page carries a soft wash of the app's own blue and pink. */
:root{
  --glass:color-mix(in srgb,var(--surface) 72%,transparent);
  --glass-sheet:color-mix(in srgb,var(--bg) 82%,transparent);
  --glass-edge:rgba(255,255,255,.7);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.75);
  --glass-blur:blur(16px) saturate(160%);
  --hero-glass:97%;
  --lift:0 1px 2px rgba(22,34,70,.04),0 6px 16px -8px rgba(22,34,70,.12);
  --wash-a:color-mix(in srgb,var(--accent) 17%,transparent);
  --wash-b:color-mix(in srgb,var(--rose) 11%,transparent);
  --wash-c:color-mix(in srgb,var(--accent) 9%,transparent);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --glass:color-mix(in srgb,var(--surface) 68%,transparent);--glass-sheet:color-mix(in srgb,var(--bg) 78%,transparent);
  --glass-edge:rgba(255,255,255,.09);--glass-hi:inset 0 1px 0 rgba(255,255,255,.07);--hero-glass:84%;
  --lift:0 1px 2px rgba(0,0,0,.3),0 6px 16px -8px rgba(0,0,0,.4);
  --wash-a:color-mix(in srgb,var(--accent) 22%,transparent);--wash-b:color-mix(in srgb,var(--rose) 12%,transparent);--wash-c:color-mix(in srgb,var(--accent) 12%,transparent);}}
:root[data-theme="dark"]{
  --glass:color-mix(in srgb,var(--surface) 55%,transparent);--glass-sheet:color-mix(in srgb,var(--bg) 78%,transparent);
  --glass-edge:rgba(255,255,255,.09);--glass-hi:inset 0 1px 0 rgba(255,255,255,.07);--hero-glass:84%;
  --lift:0 1px 2px rgba(0,0,0,.4),0 16px 36px -14px rgba(0,0,0,.7);
  --wash-a:color-mix(in srgb,var(--accent) 22%,transparent);--wash-b:color-mix(in srgb,var(--rose) 12%,transparent);--wash-c:color-mix(in srgb,var(--accent) 12%,transparent);}

body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 30% at 88% -6%,var(--wash-a),transparent 70%),
    radial-gradient(40% 28% at -12% 38%,var(--wash-b),transparent 72%)}

nav.tabs,.monthsw,header.top button.icon,.hr button.icon{
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-hi),var(--lift)}
nav.tabs{box-shadow:var(--glass-hi),0 8px 24px -12px rgba(15,25,60,.25)}

/* the month card: smoked glass, so the wash glows through its edges */
.hero{background-color:color-mix(in srgb,var(--hero) var(--hero-glass),transparent);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.05),0 22px 44px -22px rgba(13,16,40,.55)}

/* solid cards keep the numbers crisp, with a deeper lift */
.panel,.strip>div,.banner.quiet{box-shadow:var(--lift)}

/* sheets: frosted, over a lighter scrim so the glass stays clean */
dialog.sheet{background:var(--glass-sheet);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  box-shadow:var(--glass-hi),0 -12px 40px -12px rgba(8,12,30,.35)}
dialog.sheet::backdrop{background:rgba(8,12,24,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sheet .hd,.actions.sticky{background:var(--glass-sheet);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  nav.tabs,.monthsw,header.top button.icon,.hr button.icon{background:var(--surface)}
  dialog.sheet,.sheet .hd,.actions.sticky{background:var(--bg)}
  .hero{background-color:var(--hero)}}
@media (prefers-reduced-transparency:reduce){
  body::before{display:none}
  nav.tabs,.monthsw,header.top button.icon,.hr button.icon{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
  dialog.sheet,.sheet .hd,.actions.sticky{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
  .hero{background-color:var(--hero);backdrop-filter:none;-webkit-backdrop-filter:none}}
.toast{max-width:calc(100vw - 32px)}
.toast .msg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.toast[popover]{inset:auto;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));margin:0;border:0;overflow:visible;color:var(--bg);background:var(--ink)}
.fielderr{color:var(--loss);font-size:13.5px;font-weight:600;margin:8px 2px 0}
label.f.need{color:var(--loss)}
.need.wrap,.need.amt-in{box-shadow:0 0 0 2px color-mix(in srgb,var(--loss) 55%,transparent);border-radius:18px}
.need.wrap{padding:6px;margin:0 -6px}
@keyframes filled{0%{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 60%,transparent)}100%{box-shadow:0 0 0 2px transparent}}
.filled{animation:filled 1.4s ease-out;border-radius:18px}
@media (prefers-reduced-motion:reduce){.filled{animation:none}}
.legend li.catrow{cursor:pointer;border-radius:12px}
.legend li.catrow .amt::after{content:"\203a";color:var(--muted);font-weight:500;margin-left:8px}
@media (hover:hover) and (pointer:fine){.legend li.catrow{margin:0 -10px;padding-left:10px;padding-right:10px;transition:background .15s}.legend li.catrow:hover{background:var(--sunk)}}
/* header links: a 44px target without changing how they look */
section.blk>h2 a,section.blk>h2 button{padding:13px 10px;margin:-13px -10px;min-height:44px}
@media (min-width:1024px){
  main.tab-activity{max-width:860px}
}
.searchrow{grid-column:1 / -1}
/* anything scrolled into view in a sheet stops clear of the sticky header and Add bar */
dialog.sheet{scroll-padding:72px 0 120px}
.fromlast{font-size:13.5px;color:var(--muted);margin:8px 2px 0}
.fromlast b{color:var(--ink);font-weight:600}
.linkbtn{background:none;border:0;padding:6px 4px;margin:-6px 0;color:var(--accent);font:inherit;font-weight:600;cursor:pointer}
.filterhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;grid-column:1 / -1}
.filterhead h2{margin:0;font:700 22px/1.2 "Geist",sans-serif;letter-spacing:-.02em}
.filterhead h2 span{font-weight:500;color:var(--muted);font-size:16px;letter-spacing:0}
details.morepat{grid-column:1 / -1;margin-top:8px}
details.morepat>summary{font-size:15px;font-weight:600;color:var(--ink);flex-wrap:wrap;padding:16px 0}
details.morepat>summary span{flex-basis:100%;font-size:13px;font-weight:400;color:var(--muted);padding-left:23px}
.morepat-in{display:grid;gap:14px}
@media (min-width:1024px){.morepat-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 22px}}
/* placeholders: the app's muted ink, not the browser's grey (3.9:1 in dark mode) */
::placeholder{color:var(--muted);opacity:1}
/* the month card is always dark, so its gains and losses use the bright shades in both themes */
.hero .big.pos{color:#34D399}.hero .big.neg{color:#FF6B75}

/* ---------- Ask ---------- */
.ask{grid-column:1 / -1;display:grid;gap:18px}
.ask-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin:0 auto 10px}
.ask-mark .ms{font-size:24px}
.ask-off .panel{text-align:center;padding:28px 22px}
.ask-off p{color:var(--muted);margin:8px 0 16px}
.ask-hello{text-align:center;padding:18px 4px 6px}
.ask-hello h2{font:700 24px/1.2 "Geist",sans-serif;letter-spacing:-.02em;margin:4px 0 6px}
.ask-hello p{color:var(--muted);margin:0 auto 18px;max-width:42ch;font-size:14px}
.ask-starters{display:flex;flex-direction:column;gap:8px;align-items:stretch;max-width:460px;margin:0 auto}
.ask-starters .chip{justify-content:flex-start;text-align:left;white-space:normal;height:auto;padding:12px 16px;background:var(--surface);box-shadow:var(--lift)}
.ask-side-hd{display:flex;align-items:center;justify-content:space-between;margin:0 2px 10px}
.ask-side-hd h2{margin:0;font:700 17px "Geist",sans-serif}
.ask-list{display:grid;gap:8px}
.ask-item{display:flex;align-items:stretch;background:var(--surface);border-radius:16px;box-shadow:var(--lift);overflow:hidden}
.ask-item.on{box-shadow:inset 0 0 0 2px var(--accent),var(--lift)}
.ask-open{flex:1;min-width:0;text-align:left;border:0;background:none;padding:12px 14px;cursor:pointer;color:var(--ink)}
.ask-open b{display:block;font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ask-open span{display:block;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.ask-del{border:0;background:none;color:var(--muted);width:44px;cursor:pointer;font-size:14px}
.ask-del:hover{color:var(--loss)}
.ask-chat-hd{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.ask-chat-hd b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ask-back{border:0;background:var(--glass);border:1px solid var(--glass-edge);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);width:36px;height:36px;border-radius:999px;font-size:22px;line-height:1;color:var(--ink);cursor:pointer;flex:none}
.ask-msgs{display:flex;flex-direction:column;gap:14px;padding:6px 0 18px}
.ask-msg{display:flex;flex-direction:column;max-width:88%}
.ask-msg.me{align-self:flex-end;align-items:flex-end}
.ask-msg.ai{flex-direction:row;gap:10px;align-items:flex-start;max-width:94%}
.ask-msg time{font-size:11.5px;color:var(--muted);margin:4px 6px 0}
.ask-msg .bubble{padding:11px 15px;border-radius:20px;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.ask-msg.me .bubble{background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:6px}
.ask-msg.ai .bubble{background:var(--surface);box-shadow:var(--lift);border-top-left-radius:6px;overflow-x:auto}
.ask-msg.ai .bubble p{margin:0 0 8px}.ask-msg.ai .bubble p:last-child{margin:0}
.ask-msg.ai .bubble ul,.ask-msg.ai .bubble ol{margin:4px 0 8px;padding-left:20px}.ask-msg.ai .bubble li{margin:3px 0}
.ask-chg{margin-top:8px;background:var(--surface);box-shadow:var(--lift);border-radius:18px;padding:10px 14px 4px}
.ask-chg-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted)}
.ask-chg-hd .chip.sm{margin-top:0}
.chg{padding:10px 0;border-top:1px solid var(--line)}.ask-chg-hd + .chg{margin-top:8px}
.chg p{margin:0 0 8px;font-size:14px;line-height:1.45}
.chg-why{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.chg-act{display:flex;flex-wrap:wrap;gap:8px}
.chg-st{font-size:13px;color:var(--muted)}.chg-st.ok{color:var(--gain);font-weight:600}
.chg.settled p{color:var(--muted)}
.ask-msg.err .bubble{background:var(--loss-soft);color:var(--ink);font-size:14px}
.mdtbl{width:100%;border-collapse:collapse;margin:4px 0 8px;font-size:14px}
.mdtbl th,.mdtbl td{padding:5px 12px 5px 0;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.mdtbl th{color:var(--muted);font-weight:600}
.mdtbl tbody tr:last-child td{border-bottom:none}
.latex{color:inherit}
.latex.disp{display:block;margin:2px 0 8px;overflow-x:auto}
.ask-msg.ai .bubble math{font-size:1.08em}
.ask-av{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-top:2px}
.ask-av .ms{font-size:17px}
.bubble.typing{display:flex;gap:5px;align-items:center;padding:14px 16px}
.bubble.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:askdot 1.1s infinite ease-in-out}
.bubble.typing i:nth-child(2){animation-delay:.15s}.bubble.typing i:nth-child(3){animation-delay:.3s}
@keyframes askdot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.bubble.typing i{animation:none;opacity:.6}}
.ask-compose{position:sticky;bottom:calc(92px + env(safe-area-inset-bottom,0px));display:flex;align-items:flex-end;gap:8px;padding:8px 8px 8px 16px;border-radius:24px;
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);box-shadow:var(--glass-hi),var(--lift);margin-top:8px}
.ask-compose textarea{flex:1;border:0;background:none;resize:none;font:inherit;font-size:16px;line-height:1.4;padding:8px 0;color:var(--ink);max-height:160px;outline:none}
.ask-send{flex:none;width:40px;height:40px;border-radius:999px;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;cursor:pointer}
.ask-send:disabled{opacity:.45;cursor:default}
.ask-side.in-chat{display:none}
.ask-side{order:2} /* phone: say hello first, past conversations underneath */
.ask-main{order:1}
.ask-main{min-width:0;display:flex;flex-direction:column}
@media (min-width:1024px){
  .ask{grid-template-columns:300px minmax(0,1fr);align-items:start;gap:26px}
  .ask-side,.ask-side.in-chat{display:block;position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;padding:2px}
  .ask-side{order:0}
  .ask-back{display:none}
  .ask-compose{bottom:20px}
  .ask-main{min-height:calc(100vh - 200px)}
  .ask-main .ask-compose{margin-top:auto}
}
small.cur{font-size:11px;font-weight:700;color:var(--muted);margin-left:4px;letter-spacing:.02em}
.coins .row{gap:8px}
.coins .t{min-height:42px;padding:8px 10px}
.coins .sym{width:84px;flex:none;text-transform:uppercase}
.coins .cval{flex:none;min-width:72px;text-align:right;font-weight:600;font-size:13.5px}
.fromusd{display:flex;align-items:center;gap:8px;margin:6px 2px 0;flex-wrap:wrap}
.fromusd .t{width:120px;min-height:40px;padding:8px 10px}
.fromusd .note{margin:0}
.conv-out{padding:6px 16px;margin-top:14px}
.lock{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px 16px calc(24px + env(safe-area-inset-bottom,0px));background:var(--bg)}
.lock-in{width:100%;max-width:320px;text-align:center}
.lock-mark{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;margin:0 auto 14px;background:var(--accent-soft);color:var(--accent)}
.lock h1{font:700 22px "Geist",sans-serif;letter-spacing:-.02em;margin:0 0 6px}
.lock #lockmsg{color:var(--muted);margin:0 0 18px;min-height:1.4em}
.lock #lockmsg.bad{color:var(--loss);font-weight:600}
.pins{display:flex;justify-content:center;gap:14px;margin:0 0 28px}
.pins i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--muted)}
.pins i.on{background:var(--ink);box-shadow:none}
.pins.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;justify-items:center}
.pad button{width:72px;height:72px;border-radius:50%;border:0;background:var(--surface);box-shadow:var(--lift);font:600 26px "Geist",sans-serif;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.pad button:active{background:var(--sunk)}
.pad button[data-lk="del"],.pad button[data-lk="bio"]{background:none;box-shadow:none;color:var(--muted);font-size:22px}
.lock-forgot{margin-top:22px}
.lkpin{font-size:22px;letter-spacing:.4em;text-align:center}
@media (prefers-reduced-motion:reduce){.pins.shake{animation:none}}
.gaph{font:600 16px "Geist",sans-serif;margin:18px 0 8px;display:flex;justify-content:space-between}
.cg-list .row[disabled]{cursor:default;opacity:1}
.cg-list .r span{display:block;font-size:12.5px;font-weight:600}
.gicon{display:inline-flex;flex:none;width:20px;height:20px;color:var(--muted)}
.gicon svg{width:100%;height:100%;display:block}
.tour-ic{width:46px;height:46px;border-radius:14px;background:var(--sunk);color:var(--ink);display:flex;align-items:center;justify-content:center;margin:4px auto 0}
.tour-ic .gicon{width:24px;height:24px;color:inherit}
.tour-dots{display:flex;gap:6px;justify-content:center;margin:16px 0 0}
.tour-dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.tour-dots i.on{background:var(--ink)}
.tour h4{text-align:center;margin:12px 0 6px;font-size:17px}
.tour .note{text-align:center;white-space:normal;margin:0 4px}
.tour .actions{justify-content:center;margin-top:16px}

/* Sign in with Google: Google draws the button; this keeps it centred with an "or use email" rule below. */
.gbtn{display:flex;justify-content:center;min-height:44px;margin-bottom:14px}
.or{display:flex;align-items:center;gap:10px;margin:0 0 14px;color:var(--muted);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}


/* ============================================================
   UI POLISH PASS — mobile-native + Emil Kowalski animation rules
   ============================================================ */

/* Mobile-native baseline: kill tap delay, pull-to-refresh hijack, text selection on controls */
html {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button, a, [role="button"], .chip, .tab, nav.tabs button, .tr-item, .tr-chip, .legend li.catrow {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Custom easing tokens */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Press feedback on all interactive elements that lack it */
.chip, .tr-chip, nav.tabs button, .seg button, .ins-tabs button, .hero-tog button,
.linkbtn, .monthsw button, button.icon, .ck, .ask-open, .ask-del,
.tr-item, .ln-m, .gbtn, .or button {
  transition: transform 120ms var(--ease-out), background-color 120ms var(--ease-out), color 120ms var(--ease-out), opacity 120ms var(--ease-out);
}
.chip:active, .tr-chip:active, nav.tabs button:active, .seg button:active,
.ins-tabs button:active, .hero-tog button:active, .linkbtn:active,
.monthsw button:active, button.icon:active, .ck:active, .ask-open:active,
.tr-item:active, .ln-m:active {
  transform: scale(0.97);
}

/* Buttons get a transition for the global :active rule */
button {
  transition: transform 120ms var(--ease-out), background-color 160ms var(--ease-out), opacity 160ms var(--ease-out);
}

/* Sheet entrance: use ease-out */
dialog.sheet {
  animation: up 240ms var(--ease-out);
}

/* Toast: proper enter/exit timing */
.toast {
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

/* Row press feedback on touch */
button.row:active, .row:active {
  opacity: 0.6;
  transition: opacity 100ms var(--ease-out);
}

/* Card hover lift only on pointer devices — subtle */
@media (hover: hover) and (pointer: fine) {
  .kpis div, .panel, .strip div, .trend, .heat, .ln-stat, .wal-stats > div {
    transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
  }
  .kpis div:hover, .strip div:hover, .ln-stat:hover, .wal-stats > div:hover {
    transform: translateY(-1px);
  }
}

/* Segmented control transitions */
.seg button, .ins-tabs button, .hero-tog button {
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 120ms var(--ease-out);
}

/* Sheet backdrop fade */
dialog.sheet::backdrop {
  animation: fadeIn 200ms var(--ease-out);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Reduced motion: preserve opacity/color transitions, kill movement */
@media (prefers-reduced-motion: reduce) {
  main.arrive, main.arrive .panel > .row, main.arrive .panel > button.row, main.arrive .legend li,
  main.arrive .tape, .tick, .tick::after,
  main.arrive .ln-bar i, main.arrive .ln-day i {
    animation: none !important;
  }
  dialog.sheet {
    animation: fadeIn 150ms ease !important;
  }
  .toast {
    transition: opacity 150ms ease !important;
  }
}

/* Desktop: cards get a subtle border instead of shadow at rest */
@media (min-width: 768px) {
  .panel, .strip > div, .kpis div, .trend, .heat, .ln-stat, .wal-stats > div,
  .banner.quiet, .calcpad, .wal-chart {
    box-shadow: none;
    border: 1px solid var(--line);
  }
  .kpis div:first-child, .strip div:last-child, .kpis div:nth-child(3) {
    border: none;
  }
}

/* Reduce border radius on cards from 22px to 18px for a tighter feel */
.panel, .strip > div, .kpis div, .trend, .heat, .banner.quiet,
.calcpad, .wal-chart, .amt-in, .ln-hero, .ln-stat, .wal-stats > div {
  border-radius: 18px;
}
.hero { border-radius: 20px; }

/* Nav pill: reduce shadow */
nav.tabs {
  box-shadow: 0 4px 16px -8px rgba(15, 25, 60, 0.18), var(--glass-hi);
}

/* Ask chat bubbles: flat at rest */
.ask-msg.ai .bubble {
  box-shadow: none;
  border: 1px solid var(--line);
}
.ask-item, .ask-chg {
  box-shadow: none;
  border: 1px solid var(--line);
}
.ask-item.on {
  border: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}
.ask-starters .chip {
  box-shadow: none;
  border: 1px solid var(--line);
}
.pad button {
  box-shadow: none;
  border: 1px solid var(--line);
}

/* Full-screen splash: shown from the moment Google sign-in starts (tap) through
   auth and data fetch. Covers the whole viewport so the login page is never visible
   during the gap. Lives on <body> as #splash, or inside #app as .splash-static. */
.gbtn{position:relative}
#splash,.splash-static{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:var(--bg);animation:splashIn 200ms var(--ease-out)}
.splash-static{position:fixed}
#splash.splash-hide{animation:splashOut 350ms var(--ease-out) forwards}
.splash-inner{display:grid;place-items:center;gap:0;text-align:center}
.splash-logo{font-size:28px;font-weight:700;letter-spacing:-.03em;color:var(--ink);
  margin-bottom:28px;animation:splashRise 400ms var(--ease-out) both}
.splash-spin{width:32px;height:32px;border:3px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:spin 0.7s linear infinite;margin-bottom:16px}
.splash-text{font-size:14px;font-weight:600;color:var(--muted);
  animation:splashRise 400ms var(--ease-out) 80ms both}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes splashIn{from{opacity:0}to{opacity:1}}
@keyframes splashOut{from{opacity:1}to{opacity:0}}
@keyframes splashRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  #splash,.splash-static{animation:none}
  #splash.splash-hide{animation:splashOut 200ms ease forwards}
  .splash-logo,.splash-text{animation:none}
  .splash-spin{animation:spin 1.4s linear infinite}
}