/* Inter (SIL Open Font License, fonts/Inter-OFL-LICENSE.txt), served from this site so no visitor is sent to a font host. Same face as the Alytics reference. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
/* A light, flat dashboard in the style of the Framer Alytics template (Lucas, Sat 24 Oct 2026): near-white page, white cards with a
   hairline edge, one blue accent. Red marks money out in three places only (the Spent figure, the ring, the donut centre); green marks money in. Expense rows are dark text (Lucas, Sat 24 Oct: soften the red). No glow, glass or gradient. */
:root {
  --page: #FCFCFC;
  --card: #FFFFFF;
  --line: #E8E8E9;
  --line-strong: #D3D5D8;
  --ink: #121212;
  --muted: #575757;
  --acc: #126DFB;
  --acc-dark: #0B55C9;
  --tint: #E1EAF8;
  --tint-soft: #F5F8FD;
  --hover: #F4F5F7;
  --in: #098551;
  --out: #CF202F;
  --focus: #126DFB;
  --shadow: none;
  --r: 12px;
  --r-lg: 16px;
  --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* a slim scrollbar with no arrow buttons */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid var(--page); border-radius: 99px; background: #C9CDD3; }
::-webkit-scrollbar-thumb:hover { background: #AEB3BA; }
::-webkit-scrollbar-button { display: none; }
@supports not selector(::-webkit-scrollbar) { html { scrollbar-width: thin; scrollbar-color: #C9CDD3 transparent; } }
body { margin: 0; min-height: 100vh; background: var(--page); color: var(--ink); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; text-rendering: optimizeLegibility; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

h1, .lede { text-wrap: balance; }
h1 { margin: 0 0 12px; font-size: clamp(28px, 7vw, 36px); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
h2 { margin: 32px 0 10px; font-size: 14px; font-weight: 600; color: var(--muted); }
.muted, .fine { color: var(--muted); }
.lede { margin: 0 0 26px; font-size: 17px; color: var(--muted); }
.fine { margin: 28px 0 0; font-size: 13px; }

/* Layout: one centred column for the first screens; sidebar plus cards for the report */
main { max-width: 600px; margin: 0 auto; padding: 32px 20px 64px; }
body[data-view="report"] .shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); }
body[data-view="report"] main { max-width: 1120px; width: 100%; margin: 0; padding: 28px 32px 72px; }
.side { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; gap: 2px; padding: 30px 14px 20px; background: var(--card); border-right: 1px solid var(--line); }
.side .brand { margin: 0 0 22px 6px; }
.side-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.nav svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav:hover { background: var(--hover); color: var(--ink); }
.nav.on { background: var(--tint); color: var(--acc-dark); }
.only-small { display: none; }
#print { display: inline-flex; align-items: center; gap: 8px; }
#print svg { display: block; width: 18px; height: 18px; }
.l-short { display: none; }
.tabbar { display: none; }

/* Start, reading, quick check */
.brand { display: flex; align-items: center; gap: 10px; margin: 0 0 40px; font-size: 16px; font-weight: 600; }
.mark { width: 28px; height: 28px; flex: none; }
.print-brand { display: none; }
.drop { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 24px; background: var(--card); border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color: var(--acc); background: var(--tint-soft); }
.drop:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.plus { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 6px; border-radius: 16px; background: var(--tint); color: var(--acc); }
.plus svg { width: 28px; height: 28px; }
.drop-title { font-size: 20px; font-weight: 600; }
.drop-hint { max-width: 34ch; font-size: 15px; color: var(--muted); }
.drop-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; margin-top: 10px; padding: 0 28px; border-radius: var(--r); background: var(--acc); color: #fff; font-size: 16px; font-weight: 600; transition: background .15s; }
.drop:hover .drop-btn { background: var(--acc-dark); }
@media (hover: none) { .drop { border-style: solid; border-width: 1px; border-color: var(--line); } }
@media (hover: none) { .drop-hint { display: none; } }
.rowlist { margin: 18px 0 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.rowbtn { display: grid; grid-template-columns: 36px 1fr 10px; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.rowbtn + .rowbtn { border-top: 1px solid var(--line); }
.rowbtn:hover { background: var(--hover); }
.rowbtn b { display: block; font-size: 15px; font-weight: 500; }
.rowbtn small { display: block; font-size: 13px; color: var(--muted); }
.rowbtn .cat-chev { display: block; }
.privacy { display: flex; align-items: flex-start; gap: 10px; margin: 14px 2px 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.privacy svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.tip { margin: 16px 2px 0; font-size: 14px; color: var(--muted); }
.error { margin: 16px 0 0; padding: 12px 14px; background: #FDEFF0; border: 1px solid #F1C3C7; border-radius: var(--r); font-size: 14px; color: #8E1620; }
.aside { margin: 24px 2px 0; font-size: 14px; color: var(--muted); }
.link { padding: 0; border: 0; background: none; color: var(--acc); font: inherit; font-weight: 500; cursor: pointer; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link.danger { color: var(--out); }
#reading { text-align: center; }
.scan { display: grid; justify-items: center; gap: 10px; margin: 4px 0 26px; }
.scan-card { position: relative; width: min(236px, 64%); max-height: 46vh; aspect-ratio: 9 / 17; padding: 8px; overflow: hidden; background: var(--card); border: 1px solid var(--line-strong); border-radius: 32px; box-shadow: 0 10px 30px rgba(18, 18, 18, .1); }
.scan-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 24px; }
.scan-line { position: absolute; inset: 8px; border-radius: 24px; background: linear-gradient(to bottom, transparent 62%, rgba(18, 109, 251, .16) 92%, rgba(18, 109, 251, .5)); border-bottom: 2px solid var(--acc); transform: translateY(-100%); animation: scan 2.2s ease-in-out infinite alternate; }
@keyframes scan { to { transform: translateY(0); } }
.scan-more { margin: 0; font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .scan-line { animation: none; transform: translateY(-40%); } }
.bar { height: 6px; margin: 28px 0 14px; border-radius: 99px; background: var(--line); overflow: hidden; }
.bar::after { content: ""; display: block; width: 40%; height: 100%; border-radius: 99px; background: var(--acc); animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .bar::after { animation: none; width: 100%; } }
.backrow { display: flex; align-items: center; gap: 16px; margin: 0 0 26px; }

/* Buttons */
.btn { min-height: 38px; padding: 0 16px; border: 1px solid var(--acc); border-radius: 10px; background: var(--acc); color: #fff; font: inherit; font-weight: 600; cursor: pointer; transition: background .15s; }
.btn:hover { background: var(--acc-dark); border-color: var(--acc-dark); }
.btn.ghost { border-color: var(--line-strong); background: var(--card); color: var(--ink); font-weight: 500; }
.btn.ghost:hover { background: var(--hover); }
.go { display: block; width: 100%; min-height: 52px; margin-top: 26px; border: 0; border-radius: var(--r); background: var(--acc); color: #fff; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.go:hover { background: var(--acc-dark); }
.ok { min-height: 38px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--acc); color: #fff; font-weight: 600; cursor: pointer; }
.ok:hover { background: var(--acc-dark); }

/* Report header */
.top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 20px; }
.top h1 { margin: 0; font-size: 24px; letter-spacing: -.015em; }
.t-tab { display: none; }
.top-r { display: flex; flex-wrap: wrap; gap: 8px; }
.period { margin: 2px 0 0; font-size: 13px; color: var(--muted); text-wrap: balance; }
.hero { margin: 0 0 20px; }
.hero-line { margin: 0; max-width: 30ch; font-size: 40px; line-height: 1.15; font-weight: 500; letter-spacing: -.03em; text-wrap: balance; }
.hero-line strong { font-weight: 700; }
.hero-export { display: none; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; margin-top: 16px; border: 0; border-radius: var(--r); background: var(--acc); color: #fff; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; transition: background .15s; }
.hero-export:hover { background: var(--acc-dark); }
.hero-export svg { width: 20px; height: 20px; }
.notice { margin: 0 0 14px; padding: 10px 14px; background: var(--tint-soft); border: 1px solid var(--tint); border-radius: var(--r); font-size: 14px; }

/* Cards */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.ph { display: flex; align-items: baseline; justify-content: space-between; margin: 0; padding: 20px 20px 14px; font-size: 15px; font-weight: 600; color: var(--ink); }
.ph small { font-size: 13px; font-weight: 400; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 14px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.stat .k, .stat .v, .stat .s { display: block; }
.krow { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 22px; }
.krow .link { margin: -6px -8px -6px 0; padding: 6px 8px; font-size: 13px; line-height: 1.2; }
.stat .k { font-size: 13px; font-weight: 500; color: var(--muted); }
/* Big figures: proportional digits (Inter), tighter tracking at this size */
.stat .v { margin: 6px 0 4px; font-size: 32px; line-height: 1.1; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: lining-nums proportional-nums; font-feature-settings: "lnum" 1, "pnum" 1; }
/* One figure treatment on the whole page: sign, currency symbol and digits at one size and weight (Inter's $ is clean enough to stand at full size, like the reference). */
.sg, .cur { font-weight: inherit; }
.stat .v.pos { color: var(--in); }
.stat .v.neg { color: var(--out); }
.stat .s { font-size: 13px; color: var(--muted); }
.stat .links { margin-top: 8px; font-size: 13px; }
.stat-left { flex-direction: row; align-items: stretch; justify-content: space-between; gap: 14px; }
.stat-left .grow { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.ringbox { flex: none; position: relative; align-self: center; width: 88px; height: 88px; }
.ringbox svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.ringbox .r-track { fill: none; stroke: var(--line); stroke-width: 9; }
.ringbox .r-fill { fill: none; stroke: var(--rc, var(--acc)); stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray .6s ease-out; }
.ringbox b { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.ringbox b.wide { font-size: 18px; }
.ringbox b small { margin-top: 1px; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .ringbox .r-fill, .drop, .btn, .donut [data-arc], .donut .sweep { transition: none; } }
.bform label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.brow { display: flex; align-items: center; gap: 8px; }
.brow .cur { margin: 0; color: var(--muted); font-size: 18px; line-height: inherit; vertical-align: baseline; }
.brow input { flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; font-size: 17px; font-weight: 600; }
.brow input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.brow button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--acc); color: #fff; font-weight: 600; cursor: pointer; }

.grid2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "cats pie"; gap: 14px; align-items: start; }
.cats-panel { grid-area: cats; padding-bottom: 6px; }
.pie-panel { grid-area: pie; position: sticky; top: 20px; padding-bottom: 18px; }

/* Donut */
.donut { width: min(280px, 84%); margin: 6px auto 0; }
.donut svg { display: block; width: 100%; height: auto; overflow: visible; }
.d-label { fill: var(--muted); font: 500 12px var(--font); }
.d-total { fill: var(--out); font: 500 26px var(--font); font-variant-numeric: lining-nums proportional-nums; letter-spacing: -.02em; }
.donut circle[data-i] { cursor: pointer; }
.donut [data-arc] { pointer-events: none; transition: opacity .2s, transform .2s ease-out; }
.donut .sweep { transition: stroke-dasharray .9s cubic-bezier(.3, .6, .2, 1); }
.pie-legend { display: grid; gap: 2px; margin: 14px 12px 0; font-size: 14px; }
.pie-legend span { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 6px; border-radius: 8px; cursor: pointer; transition: opacity .2s, background .15s; }
.pie-legend span:hover { background: var(--hover); }
.pie-legend i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.pie-legend em { margin-left: auto; font-style: normal; color: var(--muted); }
.minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 18px 0; padding-top: 14px; border-top: 1px solid var(--line); }
.minis div { min-width: 0; }
.minis > div > span { display: block; font-size: 12px; color: var(--muted); }
.minis b { display: -webkit-box; font-size: 14px; font-weight: 600; line-height: 1.3; overflow: hidden; overflow-wrap: anywhere; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }

/* Category rows, with their expenses inside */
.cats { margin: 4px 0 0; border-top: 1px solid var(--line); }
.cats:empty { display: none; }
.cat + .cat { border-top: 1px solid var(--line); }
.cat-head { display: grid; grid-template-columns: 36px 1fr auto 10px; gap: 12px; align-items: center; width: 100%; padding: 14px 20px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.cat-head:hover { background: var(--hover); }
.cat-head:focus-visible { outline-offset: -2px; }
.ico { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: color-mix(in srgb, var(--h, #5A6A85) 58%, #161A22); background: color-mix(in srgb, var(--h, #5A6A85) 15%, #fff); }
.ico svg { width: 20px; height: 20px; }
.cat-main b { display: block; font-size: 15px; font-weight: 500; }
.cat-main small { display: block; font-size: 13px; color: var(--muted); }
.cat-amt { text-align: right; }
.cat-amt strong, .line .amt, .pie-legend em { font-variant-numeric: tabular-nums lining-nums; }
.cat-amt strong { display: block; font-size: 15px; line-height: 1.2; font-weight: 500; color: var(--ink); }
.cat-amt strong.pos { color: var(--in); }
.cat-amt strong.neg { color: var(--ink); }
.cat-chev { width: 7px; height: 7px; border-right: 1.8px solid #7D828A; border-bottom: 1.8px solid #7D828A; transform: rotate(-45deg); transition: transform .2s; }
.cat-head[aria-expanded="true"] .cat-chev { transform: rotate(45deg); }
.cat-body { padding: 0 20px 10px 68px; background: var(--tint-soft); border-top: 1px solid var(--line); }
.line { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 10px 0; font-size: 14px; }
.line + .line, .cat-body > .line:first-child + .line { border-top: 1px solid var(--line); }
.line .what { min-width: 0; }
.line .what b { display: block; font-weight: 500; overflow-wrap: anywhere; }
.line .what small { color: var(--muted); font-size: 12px; }
.line .amt { font-size: 14px; font-weight: 500; }
.line .amt.in { color: var(--in); }
.line .amt.out { color: var(--ink); }
.acts { display: flex; align-items: center; gap: 2px; }
.mv { height: 26px; margin-right: 4px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card); color: var(--muted); font-size: 12px; font-weight: 500; cursor: pointer; }
.mv:hover { color: var(--ink); background: var(--hover); }
.line[draggable="true"] { cursor: grab; }
.line.dragging { opacity: .35; }
.cat.drop-ok { background: var(--tint); box-shadow: inset 0 0 0 2px var(--acc); }
.x { width: 26px; height: 26px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; }
.x:hover { color: var(--ink); background: var(--hover); }
@media (hover: hover) and (min-width: 641px) {
  /* the buttons appear between the name and the amount, so every amount stays lined up at the right edge */
  .line .acts { order: 2; opacity: 0; transition: opacity .15s; }
  .line .amt { order: 3; min-width: 76px; text-align: right; }
  .line:hover .acts, .line:focus-within .acts { opacity: 1; }
}
.add-in { margin-top: 2px; padding: 8px 0; border: 0; background: none; color: var(--acc); font-size: 13px; font-weight: 600; cursor: pointer; }
.add-in:hover { text-decoration: underline; text-underline-offset: 3px; }
.line.editing { grid-template-columns: 1fr 104px; row-gap: 10px; }
.line.editing .acts, .line.editing .formerr, .line.editing select { grid-column: 1 / -1; opacity: 1; }
.line.editing .acts { justify-content: flex-end; gap: 16px; }

/* Forms: add, edit, categories */
.addform { display: grid; gap: 12px; margin: 12px 18px; padding: 14px; background: var(--tint-soft); border: 1px solid var(--tint); border-radius: var(--r); }
.cat-body .addform { margin: 8px 0 0; background: var(--card); }
.addform label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.addform input, .addform select, .line.editing input, .line.editing select, .chipform input { width: 100%; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; font-size: 15px; }
.addform input:focus-visible, .addform select:focus-visible, .line.editing input:focus-visible, .line.editing select:focus-visible, .chipform input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg { display: flex; gap: 6px; }
.seg button { flex: 1; min-height: 38px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--muted); font-weight: 600; cursor: pointer; }
.seg button.on { border-color: var(--acc); background: var(--acc); color: #fff; }
.seg.kinds { flex-wrap: wrap; }
.seg.kinds button { min-height: 44px; min-width: 150px; padding: 0 14px; }
.rcard { margin: 16px 0 0; padding: 4px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.rrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; }
.rrow + .rrow { border-top: 1px solid var(--line); }
.rrow span { color: var(--muted); font-size: 14px; }
.rrow strong { font-size: 19px; font-weight: 600; }
.rrow strong.neg { color: var(--out); }
.rrow strong.pos { color: var(--in); }
.ask { margin-top: 10px; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.stat .ask, .stat .bform { padding: 0; border: 0; box-shadow: none; background: none; }
.ask-edit { display: grid; grid-template-columns: 1fr 96px; gap: 8px; margin-bottom: 8px; }
.ask-edit input, .ask select { min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; }
.ask select { width: 100%; margin-bottom: 8px; }
.ask-edit input:last-child { text-align: right; }
.ask.unsure { border-color: #E0A100; }
.ask .seg button { white-space: nowrap; padding: 0 2px; font-size: 13px; }
.ask-flag { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #9A6B00; }
.ask-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ask-top b { font-weight: 600; overflow-wrap: anywhere; }
.ask-top span { color: var(--muted); white-space: nowrap; }
.leftlist { margin: 0; padding: 0; list-style: none; }
.leftlist li { margin-top: 8px; padding: 12px 14px; background: var(--tint-soft); border: 1px solid var(--line); border-radius: var(--r); font-size: 14px; color: var(--muted); }
.leftlist b { color: var(--ink); font-weight: 600; }
.formrow { display: flex; align-items: center; gap: 16px; }
.formerr { margin: 0; font-size: 13px; color: var(--out); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.chip { display: inline-flex; align-items: center; gap: 2px; min-height: 34px; padding: 0 4px 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); font-size: 14px; }
.chip.add { padding: 0 14px; border-style: dashed; background: none; color: var(--acc); font-size: 14px; font-weight: 600; cursor: pointer; }
.chipform { display: flex; flex-basis: 100%; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; background: var(--tint-soft); border-radius: var(--r); }
.chipform input { flex: 1; min-width: 150px; }
.chipform .formerr { flex-basis: 100%; }
.check { margin: 6px 18px 12px; }
.check summary { padding: 12px 0 6px; font-size: 14px; font-weight: 600; color: var(--acc); cursor: pointer; }
.check > .muted { margin: 0 0 6px; font-size: 13px; }

/* Add menu, trash, toast */
.sheet { position: fixed; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(18, 18, 18, .38); }
.sheet-card { width: 100%; max-width: 420px; max-height: 82vh; overflow-y: auto; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 8px 28px rgba(18, 18, 18, .16); }
.sheet-card:focus { outline: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.sheet-title { margin: 0 4px; font-size: 14px; font-weight: 600; color: var(--muted); }
.sheet-x { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: -6px -4px -6px 0; border: 0; border-radius: 50%; background: var(--hover); color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.sheet-x::after { content: ""; position: absolute; inset: -4px; }
.sheet-x:hover { color: var(--ink); background: var(--tint); }
.opt { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.opt:hover { background: var(--hover); }
.opt b { display: block; font-weight: 600; }
.opt small { color: var(--muted); font-size: 13px; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 9; display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 32px); padding: 10px 18px; transform: translateX(-50%); background: var(--ink); color: #fff; border-radius: 999px; font-size: 14px; white-space: nowrap; }
.toast span { overflow-wrap: anywhere; }
.toast .link { color: #9CC2FF; }
.dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--out); }
.nav .dot { margin-left: auto; }
.nav.drop-ok { background: #FDEFF0; color: var(--out); box-shadow: inset 0 0 0 2px var(--out); }
.trow { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 12px; background: var(--tint-soft); border: 1px solid var(--line); border-radius: var(--r); }
.trow .what { flex: 1; min-width: 0; }
.trow .what b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.trow .what small { color: var(--muted); font-size: 13px; }
.trow .ok { flex: none; }
.pick-note { margin: 0 4px 4px; font-size: 14px; color: var(--muted); }
.pick-foot { display: flex; justify-content: flex-end; margin-top: 16px; padding: 0 4px; }

/* The reveal: a report that was just opened builds itself, about three seconds end to end. Screen only; the body class is removed by app.js. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media screen and (prefers-reduced-motion: no-preference) {
  .reveal .hero { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
  .reveal .hero-export { animation: rise .6s .25s cubic-bezier(.2, .7, .2, 1) both; }
  .reveal .stat { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
  .reveal .stat:nth-child(1) { animation-delay: .3s; }
  .reveal .stat:nth-child(2) { animation-delay: .4s; }
  .reveal .stat:nth-child(3) { animation-delay: .5s; }
  .reveal .pie-panel { animation: rise .6s .7s cubic-bezier(.2, .7, .2, 1) both; }
  .reveal .cats-panel { animation: rise .6s .85s cubic-bezier(.2, .7, .2, 1) both; }
  .reveal .cats > .cat { animation: rise .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.95s + var(--n, 0) * 60ms); }
  .reveal .ringbox .r-fill { transition-duration: 1.1s; transition-delay: .6s; }
  .reveal .donut .sweep { transition-delay: .8s; }
}

/* Narrow screens: no sidebar, cards stack, the chart comes first */
@media (max-width: 900px) {
  body[data-view="report"] .shell { display: block; }
  body[data-view="report"] main { padding: 20px 16px 84px; }
  .side { display: none; }
  .only-small { display: inline-block; }
  .l-long { display: none; }
  .l-short { display: inline; }
  .hero-export { display: flex; }
  .hero-line { font-size: 32px; }
  .grid2 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pie" "cats"; }
  .pie-panel { position: static; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .hero-export { width: auto; padding: 0 32px; }
}
@media (max-width: 640px) {
  .top { flex-direction: column; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat-left { grid-column: 1 / -1; }
  .stat .v { font-size: 22px; }
  .donut { width: min(200px, 60%); }
  .minis { grid-template-columns: 1fr 1.25fr 1fr; }
  .minis > div > span { white-space: nowrap; }
  .top-r { display: grid; grid-template-columns: 1fr 1.7fr 1fr; width: 100%; }
  .top-r .btn { padding: 0 8px; white-space: nowrap; }
  .cat-body { padding-left: 18px; }
  .sheet { align-items: flex-end; padding: 0; }
  .sheet-card { max-width: none; border-radius: var(--r-lg) var(--r-lg) 0 0; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .toast { bottom: 84px; }
}

/* The phone app: a slim top bar, one screen at a time from a bottom tab bar, and thumb-sized targets. Screen only, so the export never sees any of it. */
@media screen {
  body[data-view="report"] main { padding: 0 16px calc(92px + env(safe-area-inset-bottom)); }
  body[data-view="start"] main, body[data-view="reading"] main, body[data-view="review"] main { padding-top: calc(24px + env(safe-area-inset-top)); }
  .top { position: sticky; top: 0; z-index: 5; flex-direction: row; align-items: center; gap: 12px; margin: 0 -16px 14px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--page); border-bottom: 1px solid var(--line); }
  .top h1 { font-size: 20px; }
  .t-brand { display: none; }
  .t-tab { display: inline; }
  .top .period { margin: 0; font-size: 12px; }
  .top-r { display: flex; width: auto; flex-wrap: nowrap; margin-left: auto; }
  .top .pcount { display: none; }
  .top-r #headAdd, .top-r #home { display: none; }
  .top-r #print { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px 0 14px; border-radius: 22px; border-color: var(--line-strong); background: var(--card); color: var(--ink); font-size: 14px; font-weight: 500; }
  body[data-tab="overview"] .top-r #print { display: none; }
  .hero-line { font-size: 28px; }
  .notice { margin: 0 0 12px; padding: 0; background: none; border: 0; font-size: 13px; color: var(--muted); }
  body:not([data-tab="overview"]) .notice, body:not([data-tab="overview"]) .fine { display: none; }

  body[data-view="report"] .tabbar { position: fixed; z-index: 6; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); }
  .tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 11px; font-weight: 500; cursor: pointer; }
  .tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .tab.on { color: var(--acc); }
  .reveal .stat:nth-child(3) { animation-delay: .3s; }
  .reveal .stat:nth-child(1) { animation-delay: .45s; }
  .reveal .stat:nth-child(2) { animation-delay: .55s; }
  .tab .dot { position: absolute; top: 8px; left: calc(50% + 6px); border: 2px solid var(--card); box-sizing: content-box; }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }

  body[data-tab="overview"] .cats-panel,
  body[data-tab="expenses"] .hero, body[data-tab="expenses"] .stats, body[data-tab="expenses"] .pie-panel, body[data-tab="expenses"] #editBox,
  body[data-tab="cats"] .hero, body[data-tab="cats"] .stats, body[data-tab="cats"] .pie-panel, body[data-tab="cats"] .cats-panel > :not(#editBox) { display: none; }
  body[data-tab="cats"] #editBox summary { padding: 18px 0 4px; font-size: 17px; font-weight: 600; color: var(--ink); list-style: none; pointer-events: none; }
  body[data-tab="cats"] #editBox summary::-webkit-details-marker { display: none; }
  body[data-tab="cats"] #editBox { margin: 0; padding: 0 16px 16px; }

  .btn, .go, .ok { min-height: 44px; }
  .seg button { min-height: 46px; padding: 0 4px; font-size: 14px; }
  .krow .link { display: inline-flex; align-items: center; min-height: 44px; margin: -11px -8px -11px 0; padding: 0 8px; }
  .stat-left { order: -1; }
  .stat-left .v { font-size: 36px; }
  .stat .links .link { display: inline-flex; align-items: center; min-height: 44px; }
  .cats-panel .ph { display: none; }
  .cat-head { min-height: 64px; padding: 12px 16px; }
  .cat-body { padding: 0 16px 8px; }
  .line { grid-template-columns: 1fr auto; row-gap: 6px; padding: 12px 0; }
  .line .acts { grid-column: 1 / -1; justify-content: flex-start; gap: 4px; margin: -4px -10px -6px; }
  .acts .mv, .acts .x { width: auto; height: 44px; min-width: 0; margin: 0; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--acc); font-size: 14px; font-weight: 500; }
  .acts .x { font-size: 0; }
  .acts .x::after { content: attr(data-label); font-size: 14px; }
  .acts .x:last-child { margin-left: auto; color: var(--muted); }
  .add-in { min-height: 44px; }
  .chip .x { width: 36px; height: 36px; }
  .addform input, .addform select, .line.editing input, .line.editing select, .chipform input, .brow input { min-height: 48px; font-size: 16px; }
  .addform { margin: 12px; }
  .sheet-card { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .sheet-card::before { content: ""; display: block; width: 36px; height: 4px; margin: -6px auto 12px; border-radius: 2px; background: var(--line-strong); }
  .opt { min-height: 60px; }
  .drop { padding: 36px 20px 28px; }
  .drop-btn { width: 100%; }
      .rowbtn { min-height: 68px; }
}

/* The phone app: a dark balance hero, a feed grouped by day, category bars. Phone only; laptops and the export never see it. */
#phoneUi { display: none; }
@keyframes pop { from { opacity: 0; transform: scale(.82) rotate(-35deg); } to { opacity: 1; transform: none; } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0 round 99px); } to { clip-path: inset(0 0 0 0 round 99px); } }
@media screen, print {
  body[data-view="report"] { --page: #E4E8F0; --card: #F6F7FA; --hover: #ECEFF5; --line: #D9DEE8; background: var(--page); }
  body[data-view="report"] #report { display: flex; flex-direction: column; }
  #report .top { order: -2; }
  #phoneUi { display: block; order: -1; }
  .hero, .stats, .pie-panel { display: none !important; }
  body[data-tab="overview"] .top { display: none; }
  #phHome, #phFeed { display: none; }
  body[data-tab="overview"] #phHome, body[data-tab="expenses"] #phFeed { display: block; }
  body[data-tab="expenses"] #legend { display: none; }
  body[data-tab="expenses"] .grid2 { order: -1; }
  body[data-tab="expenses"] .cats-panel { background: none; border: 0; box-shadow: none; }
  body[data-view="report"] .tabbar { background: rgba(246, 247, 250, .88); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
  .notice { margin-top: 14px; }

  .ph-hero { margin: 0 -16px; padding: calc(12px + env(safe-area-inset-top)) 20px 22px; background: #0F3FA8; color: #fff; border-radius: 0 0 32px 32px; }
  .ph-bar { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
  .ph-brand { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
  .ph-brand .mark { width: 28px; height: 28px; }
  .ph-dates { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .62); }
  .ph-ico { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
  .ph-ico svg { width: 20px; height: 20px; }
  .ph-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
  .ph-main { min-width: 0; }
  .ph-pie { position: relative; flex: none; width: 124px; height: 124px; }
  .ph-pie svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
  .ph-pie b { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
  .ph-pie b small { margin-top: 2px; font-size: 11px; font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, .7); }
  .ph-big.long { font-size: 52px; }
  .ph-k { margin: 14px 0 0; font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, .7); }
  .ph-big { margin: 2px 0 0; font-size: 68px; line-height: 1; font-weight: 600; letter-spacing: -.05em; font-variant-numeric: lining-nums proportional-nums; }
  .ph-sub { margin: 8px 0 0; font-size: 15px; color: rgba(255, 255, 255, .62); }
  .ph-meter { height: 8px; margin: 24px 0 0; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .14); }
  .ph-meter i { display: block; width: var(--w, 0%); height: 100%; border-radius: inherit; background: var(--c, #5B9BFF); transition: width 1.2s cubic-bezier(.2, .7, .2, 1); }
  .ph-note { display: flex; justify-content: space-between; margin: 8px 0 0; font-size: 13px; color: rgba(255, 255, 255, .62); }
  .ph-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
  .ph-pill { padding: 12px 14px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .08); color: #fff; font: inherit; text-align: left; }
  .ph-pill > span { display: block; font-size: 13px; color: rgba(255, 255, 255, .62); }
  .ph-pill b { display: block; margin-top: 2px; font-size: 21px; font-weight: 600; letter-spacing: -.025em; }
  .ph-pill.in b { color: #5BE3A1; }
  .ph-pill.out b { color: #FFB8BF; }
  .ph-story { margin: 22px 2px 0; font-size: 21px; line-height: 1.28; font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }
  .ph-story strong { font-weight: 700; }
  .ph-actions { display: flex; gap: 10px; margin: 18px 0 0; }
  .ph-export { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border: 0; border-radius: 18px; background: var(--acc); color: #fff; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
  .ph-export svg, .ph-add svg { width: 20px; height: 20px; }
  .ph-add { display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 20px; font: inherit; font-size: 16px; font-weight: 600; border: 0; border-radius: 18px; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
  .ph-card { margin: 18px 0 0; padding: 20px 16px 8px; background: var(--card); border-radius: 26px; }
  .ph-card h2 { margin: 0 4px 14px; font-size: 18px; font-weight: 600; }
  .ph-segs { display: none; }
  .ph-segs i { display: block; flex: var(--g, 1) 1 0; min-width: 5px; border-radius: 99px; }
  .ph-cat { display: grid; grid-template-columns: 40px 1fr auto 16px; gap: 12px; align-items: center; width: 100%; min-height: 68px; padding: 8px 4px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .ph-chev { display: grid; place-items: center; color: var(--muted); opacity: .6; }
  .ph-chev svg { width: 16px; height: 16px; }
  .ph-cat + .ph-cat { border-top: 1px solid var(--line); }
  .ph-cat .ico { width: 40px; height: 40px; }
  .ph-cat-main b { display: block; font-weight: 500; }
  .ph-track { display: block; height: 5px; margin-top: 8px; overflow: hidden; border-radius: 99px; background: var(--hover); }
  .ph-track i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--h); }
  .ph-amt { text-align: right; }
  .ph-amt b { display: block; font-weight: 600; }
  .ph-amt small { font-size: 13px; color: var(--muted); }
  .ph-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin: 18px 0 0; }
  .ph-scroll::-webkit-scrollbar, .ph-chips::-webkit-scrollbar { display: none; }
  .ph-tile { min-width: 0; padding: 14px 14px 16px; background: var(--card); border-radius: 22px; }
  .ph-tile > span { font-size: 13px; color: var(--muted); }
  .ph-tile b { display: block; margin-top: 8px; font-size: 21px; font-weight: 600; letter-spacing: -.03em; overflow-wrap: anywhere; }
  .ph-tile small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }

  .ph-chips { display: flex; gap: 8px; margin: 12px -16px 0; padding: 0 40px 0 16px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 76%, transparent); mask-image: linear-gradient(to right, #000 76%, transparent); }
  .ph-chip { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 99px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
  .ph-chip.on { background: var(--ink); box-shadow: none; color: #fff; }
  .ph-sum { margin: 12px 4px 0; font-size: 13px; color: var(--muted); }
  .fday { display: flex; justify-content: space-between; margin: 18px 6px 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
  .fgroup { overflow: hidden; background: var(--card); border-radius: 22px; }
  .fr { display: grid; grid-template-columns: 40px 1fr auto 16px; gap: 12px; align-items: center; width: 100%; min-height: 68px; padding: 10px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .fr + .fr { border-top: 1px solid var(--line); }
  .fr:active, .ph-cat:active { background: var(--hover); }
  .fr .ico { width: 40px; height: 40px; }
  .fr-main b { display: block; font-weight: 500; overflow-wrap: anywhere; }
  .fr-main small { font-size: 13px; color: var(--muted); }
  .fr-amt { font-size: 16px; font-weight: 500; text-align: right; }
  .fr-amt.in { color: var(--in); }
  .fgroup .line.editing { padding: 14px 16px; background: var(--tint-soft); }
}
@media screen and (prefers-reduced-motion: no-preference) {
  .reveal .ph-hero { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .reveal .ph-pie { animation: pop .8s .45s cubic-bezier(.2, .7, .2, 1) both; }
  .reveal .ph-story { animation: rise .6s .5s cubic-bezier(.2, .7, .2, 1) both; }
  .reveal .ph-actions { animation: rise .6s .65s cubic-bezier(.2, .7, .2, 1) both; }
  .reveal .ph-card { animation: rise .6s .8s cubic-bezier(.2, .7, .2, 1) both; }
  .reveal .ph-segs { animation: wipe 1s 1s cubic-bezier(.2, .7, .2, 1) both; }
  .reveal .ph-cat { animation: rise .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(1.1s + var(--n, 0) * 70ms); }
  .reveal .ph-scroll { animation: rise .6s 1.6s cubic-bezier(.2, .7, .2, 1) both; }
  .reveal .ph-meter i { transition-delay: .7s; }
}

/* Phone welcome and reading screens: the same dark as the balance hero, so the first thing seen is the app. */
@media screen {
  body[data-view="start"], body[data-view="reading"] { background: #0F3FA8; color: #fff; }
  body[data-view="start"] h1, body[data-view="reading"] h1 { color: #fff; font-size: 40px; line-height: 1.05; letter-spacing: -.035em; }
  body[data-view="start"] .brand { color: #fff; }
  body[data-view="start"] .lede, body[data-view="reading"] .muted { color: rgba(255, 255, 255, .84); }
  body[data-view="start"] .drop { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .16); color: #fff; }
  body[data-view="start"] .plus { background: rgba(255, 255, 255, .16); color: #fff; }
  body[data-view="start"] .drop-title { color: #fff; }
  body[data-view="start"] .drop-btn { background: #fff; color: #0F3FA8; }
  body[data-view="start"] .drop:hover .drop-btn { background: #EAF1FF; }
  body[data-view="start"] .privacy { color: rgba(255, 255, 255, .82); }
  body[data-view="start"] .rowlist { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
  body[data-view="start"] .rowbtn { color: #fff; }
  body[data-view="start"] .drop:hover, body[data-view="start"] .drop.over { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }
  body[data-view="start"] .rowbtn:hover, body[data-view="start"] .rowbtn:focus-visible { background: rgba(255, 255, 255, .12); }
  body[data-view="start"] .rowbtn + .rowbtn { border-top-color: rgba(255, 255, 255, .12); }
  body[data-view="start"] .rowbtn small { color: rgba(255, 255, 255, .8); }
  body[data-view="start"] .rowbtn .ico { background: rgba(255, 255, 255, .16); color: #fff; }
  body[data-view="start"] .cat-chev { border-color: rgba(255, 255, 255, .5); }
  body[data-view="start"] .link.danger { color: #FF9AA3; }
  body[data-view="reading"] .bar { background: rgba(255, 255, 255, .14); }
  body[data-view="reading"] .scan-card { border-color: rgba(255, 255, 255, .18); box-shadow: 0 16px 48px rgba(0, 0, 0, .45); }
  body[data-view="reading"] .scan-more { color: rgba(255, 255, 255, .6); }
}

/* The app is the main page at every width. On a laptop it sits in one centred column, like a phone app on a desk. The A4 export below is the dashboard. */
@media screen {
  .side { display: none !important; }
  body[data-view="report"] .shell { display: block; }
}
@media screen and (min-width: 641px) {
  body[data-view="report"] { background: #D6DBE6; }
  body[data-view="report"] main { max-width: 520px; margin: 0 auto; padding: 24px 16px 120px; }
  body[data-view="report"] #report { background: var(--page); border-radius: 36px; padding: 0 16px 24px; overflow: hidden; min-height: 80vh; }
  .ph-hero { margin: 0 -16px; padding-top: 24px; }
  body[data-view="report"] .tabbar { left: 50%; right: auto; width: 520px; transform: translateX(-50%); border-radius: 28px 28px 0 0; }
  .toast { bottom: 96px; }
  body[data-view="start"] main, body[data-view="reading"] main { max-width: 480px; padding-top: 64px; }
  .sheet { align-items: center; padding: 16px; }
  .sheet-card::before { display: none; }
  .sheet-card { max-width: 440px; border-radius: 28px; }
}

@media screen {
  body[data-view="report"] .grid2 { display: block; }
  body[data-view="report"] .cats-panel { width: 100%; }
  .ph-bar { position: relative; gap: 8px; }
  .ph-bar .ph-dates { margin-left: auto; }
  .ph-bar .ph-trash { position: relative; display: grid; place-items: center; width: 40px; height: 40px; margin-left: 8px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
  .ph-trash svg { width: 20px; height: 20px; }
  .ph-trash .dot, .ph-sumtrash .dot { position: absolute; top: 5px; right: 5px; border: 2px solid #0F3FA8; box-sizing: content-box; }
  .ph-trash:hover, .ph-edit:hover, .ph-sumtrash:hover, .ph-newcat:hover { filter: brightness(1.12); }
  .ph-cardhead { display: flex; align-items: center; justify-content: space-between; }
  .ph-edit { margin: 0 0 14px; padding: 6px 4px; border: 0; background: none; color: var(--acc); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
  .ph-newcat { display: block; width: 100%; margin: 4px 0 8px; min-height: 48px; border: 1px dashed var(--line-strong, #C7CEDB); border-radius: 14px; background: none; color: var(--acc); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
  .ph-sumrow { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .ph-sumtrash { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
  .ph-sumtrash svg { width: 16px; height: 16px; }
  .ph-sumtrash .dot { position: static; border: 0; }
  .ph-cat:hover, .fr:hover { background: var(--hover); }
  body[data-view="start"] .rows-list button:hover { background: rgba(255, 255, 255, .12); }
}
@media screen {
  .chip-name { min-height: 44px; padding: 0 4px 0 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
  .chip { min-height: 44px; }
  .chip.add { min-height: 44px; }
  .ph-bar .ph-trash { width: 44px; height: 44px; }
  .ph-edit { min-height: 44px; padding: 0 8px; }
  .ph-chip { min-height: 44px; }
  .sheet-x { width: 44px; height: 44px; }
  .chip .x { width: 44px; height: 44px; }
}
@media screen {
  .link { min-height: 44px; padding-inline: 8px; }
  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, .drop:focus-within { outline: 3px solid #FFC83D; outline-offset: 2px; }
  body[data-view="report"] button:focus-visible { outline-color: #126DFB; }
  .drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
}
.start-points { display: none; }
/* Laptops and desktops (a wide screen with a mouse): a real wide layout, not a phone column. Phones and tablets keep the app. */
@media screen and (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body[data-view="start"] main { max-width: 1160px; padding-top: 56px; }
  body[data-view="reading"] main, body[data-view="review"] main { max-width: 760px; padding-top: 64px; }
  #start { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 72px; align-items: center; }
  #start .brand, #start .backrow { grid-column: 1 / -1; }
  #start .brand { margin-bottom: 56px; }
  body[data-view="start"] .start-copy h1 { font-size: 64px; line-height: 1.02; margin-bottom: 20px; }
  body[data-view="start"] .start-copy .lede { font-size: 20px; max-width: 30ch; }
  body[data-view="start"] .start-points { display: grid; gap: 14px; margin: 34px 0 0; padding: 0; list-style: none; color: rgba(255, 255, 255, .86); font-size: 16px; }
  body[data-view="start"] .start-points li { position: relative; padding-left: 30px; }
  body[data-view="start"] .start-points li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.4 2.4 4.6-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
  body[data-view="start"] .start-points b { color: #fff; font-weight: 600; }
  .start-actions .drop { padding: 56px 28px 40px; }

  body[data-view="report"] { background: #E4E8F0; }
  body[data-view="report"] main { max-width: 1240px; padding: 96px 32px 48px; }
  body[data-view="report"] #report { background: none; border-radius: 0; padding: 0; overflow: visible; min-height: 0; }
  body[data-view="report"][data-tab="cats"] #report > :not(#phoneUi) { max-width: 760px; margin-inline: auto; }
  body[data-tab="cats"] #phoneUi { display: none; }
  body:not([data-tab="cats"]) #phoneUi { display: grid; grid-template-columns: minmax(400px, 470px) minmax(0, 1fr); gap: 28px; align-items: start; }
  #phHome, #phFeed { display: block !important; }
  .ph-hero { margin: 0; padding: 22px 26px 26px; border-radius: 32px; }
  #phFeed { position: sticky; top: 96px; max-height: calc(100vh - 112px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 40px; }
  #phFeed .ph-chips { margin: 0 0 4px; padding: 0; -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; overflow: visible; }
  #phFeed::before { content: "All expenses"; display: block; margin: 6px 4px 14px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
  body[data-view="report"] .tabbar { top: 16px; bottom: auto; left: 50%; right: auto; width: 560px; transform: translateX(-50%); border-radius: 999px; grid-template-columns: repeat(4, 1fr); padding: 4px; box-shadow: 0 6px 24px rgba(15, 63, 168, .12); }
  .tab { min-height: 52px; }
  #tabExpenses { display: none; }
  body[data-tab="overview"] .top { display: none; }
  .toast { bottom: 28px; }
}
/* The export: the same dashboard on A4, every expense listed under its category */
@page { size: A4; margin: 12mm; }
@media print {
  :root { --page: #E4E8F0; --shadow: none; }
  body, body[data-view="report"] { background: #E4E8F0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .no-print, .side, .toast, .trash, .sheet, .tabbar { display: none !important; }
  #phoneUi { display: block !important; }
  /* The export is the app: same hero, same where-it-went, then every expense by day. */
  #report > :not(#phoneUi) { display: none !important; }
  #phHome, #phFeed { display: block !important; }
  body[data-view="report"] .shell { display: block; }
  body[data-view="report"] main, main { max-width: none; width: auto; margin: 0; padding: 0; }
  .ph-hero { margin: 0; padding: 18px 22px 22px; border-radius: 28px; }
  .ph-trash, .ph-edit, .ph-newcat, .ph-actions, .ph-chips, .ph-sumtrash, .ph-chev, .ph-sum { display: none !important; }
  .ph-pill, .ph-card, .ph-tile, .fgroup { break-inside: avoid; }
  .fday { break-after: avoid; }
  #phFeed { margin-top: 18px; }
}