/* Fonts: Figtree (body) and Gabarito (headings), served from fonts/ in the app so nothing is fetched from Google
   (SIL Open Font License, fonts/OFL.txt). Each is one variable file per character set (latin, latin-ext), the same
   files Google Fonts serves. build-preview.py inlines them as data: URLs for the one-file preview. */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/figtree-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/figtree-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Gabarito'; font-style: normal; font-weight: 600 900; font-display: swap; src: url(../fonts/gabarito-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Gabarito'; font-style: normal; font-weight: 600 900; font-display: swap; src: url(../fonts/gabarito-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Layout: a single phone-width column, map-first, with a fixed bottom tab bar.
   Colour: Tyne Bridge green for actions, a warm "spud" gold for highlights. */
:root {
  --bg: #f1f4f0;
  --surface: #ffffff;
  --surface-2: #e7ece6;
  --ink: #111713;
  --muted: #5b6760;
  --line: #d7ded6;
  --input-line: #7f8a83; /* edges of boxes you type in: at least 3:1 against the page */
  --accent: #1f6b45;
  --accent-ink: #ffffff;
  --accent-soft: #dbeadf;
  --gold: #e2a22c;
  --gold-soft: #fbefd4;
  --gold-line: #b97a10; /* amber for arcs and bars: 3.2:1 on the page */
  --amber-ink: #7f4d00; /* amber text on --gold-soft */
  --danger: #b93b28;
  --danger-soft: #f8e1dc;
  --water: #b9d2d8;
  --land: #e9ede6;
  --park: #cfe2cb;
  --shadow: 0 1px 2px rgba(17, 23, 19, .06), 0 8px 24px rgba(17, 23, 19, .08);
  --road: #ffffff;
  --road-major: #f7e3b0;
  --campus: #e2e2ea;
  --metro-green: #3f9c4d;
  --metro-yellow: #e6b000;
  --spud: #e8ac3c;
  --spud-spot: #b87a1e;
  --cap: #17201b;
  --cap-edge: #17201b;

  --font-display: "Gabarito", "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --tabbar-h: 64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c100e; --surface: #151b18; --surface-2: #1e2621; --ink: #edf2ee; --muted: #94a199;
    --line: #29322d; --input-line: #5d6a63; --accent: #5bbf88; --accent-ink: #07130c; --accent-soft: #183022;
    --gold: #f0b94a; --gold-line: #f0b94a; --amber-ink: #f0b94a; --gold-soft: #33280f; --danger: #ef6b55; --danger-soft: #3a1a14; --danger-ink: #1a0703;
    --water: #182a30; --land: #111714; --park: #16261b;
    --road: #26302b; --road-major: #3d3a2a; --campus: #1d1f26; --metro-green: #4fb85e; --metro-yellow: #e8bd2c;
    --spud: #f0b94a; --spud-spot: #b9832a; --cap: #222d27; --cap-edge: #8fa197;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c100e; --surface: #151b18; --surface-2: #1e2621; --ink: #edf2ee; --muted: #94a199;
  --line: #29322d; --input-line: #5d6a63; --accent: #5bbf88; --accent-ink: #07130c; --accent-soft: #183022;
  --gold: #f0b94a; --gold-line: #f0b94a; --amber-ink: #f0b94a; --gold-soft: #33280f; --danger: #ef6b55; --danger-soft: #3a1a14; --danger-ink: #1a0703;
  --water: #182a30; --land: #111714; --park: #16261b;
    --road: #26302b; --road-major: #3d3a2a; --campus: #1d1f26; --metro-green: #4fb85e; --metro-yellow: #e8bd2c;
    --spud: #f0b94a; --spud-spot: #b9832a; --cap: #222d27; --cap-edge: #8fa197;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
/* In setup, a box you tab or type into is brought into view clear of the sticky Continue footer. */
html:has(.ob-foot) { scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* Read out by screen readers, not shown. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Headings get focus when a new tab opens (for screen readers); no ring for that. */
h1[tabindex="-1"]:focus { outline: none; }

.shell { max-width: 480px; margin: 0 auto; min-height: 100%; position: relative; }
/* The bottom padding leaves room for the tab bar and a toast above it (20px up, about 46px high), so the
   end of a page can always be scrolled clear of a toast. */
/* r2-spend: 96px (was 72px), so on a 360px phone the last plan on My week also clears a toast that wraps to two lines. */
#app { grid-template-columns: minmax(0, 1fr); padding: 20px 16px calc(var(--tabbar-h) + 96px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 20px; }
#app.no-tabs { padding-bottom: 24px; min-height: 100%; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 16px; text-decoration: none; transition: transform .12s, background .2s;
}
.btn:active { transform: scale(.98); }
.btn-block { width: 100%; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-secondary { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--bg); }
.btn-ghost { background: none; border: none; color: var(--accent); min-height: 44px; padding: 0 8px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn svg { width: 20px; height: 20px; flex: none; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  display: inline-grid; place-items: center; flex: none;
}
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Wordmark */
.wordmark { display: inline-flex; align-items: center; gap: 8px; font: 900 22px/1 var(--font-display); letter-spacing: .02em; }

/* Sign in */
.auth { display: grid; gap: 28px; padding-top: 12px; }
.auth-hero { display: grid; gap: 14px; }
.auth-hero h1 { font-size: clamp(38px, 11vw, 52px); font-weight: 800; }
.auth-hero h1 em { font-style: normal; color: var(--accent); }
.ticket {
  display: grid; gap: 10px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow);
}
.ticket-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; }
.ticket-row + .ticket-row { border-top: 1px dashed var(--line); padding-top: 10px; }
.ticket-total { font: 800 28px/1 var(--font-display); }
.auth-buttons { display: grid; gap: 10px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.form { display: grid; gap: 12px; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.input {
  width: 100%; min-height: 52px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid var(--input-line);
  background: var(--surface); font-size: 16px;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.input[aria-invalid="true"]:focus { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.error { color: var(--danger); font-size: 14px; }
.fineprint { font-size: 13px; color: var(--muted); text-align: center; }

/* Onboarding */
.ob { display: grid; grid-template-rows: auto 1fr auto; gap: 24px; min-height: calc(100vh - 44px); min-height: calc(100dvh - 44px); }
.ob-top { display: flex; align-items: center; gap: 12px; }
.progress { flex: 1; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .35s ease; }
.ob-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; }
.ob-body h1 { font-size: clamp(28px, 8vw, 36px); font-weight: 800; }
.ob-body > p { color: var(--muted); max-width: 40ch; }
.money-input {
  display: flex; align-items: baseline; gap: 4px; padding: 16px 20px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--input-line);
}
.money-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.money-input span { font: 800 36px/1 var(--font-display); color: var(--muted); }
.money-input input {
  flex: 1; min-width: 0; width: 100%; border: 0; background: none; outline: none;
  font: 800 44px/1.1 var(--font-display); font-variant-numeric: tabular-nums;
}
.money-input small { color: var(--muted); font-size: 15px; white-space: nowrap; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); }
.segmented button { border: 0; background: none; min-height: 44px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--muted); white-space: nowrap; padding-inline: 4px; }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.hint { font-size: 14px; color: var(--muted); text-wrap: pretty; }

/* Chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); font-size: 15px; font-weight: 500; white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); }
.chips-row .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); box-shadow: none; color: var(--bg); }
.chip.small { min-height: 34px; padding: 0 12px; font-size: 14px; position: relative; }
/* Small chips look 34px tall but take taps 44px tall (5px more above and below the 1px border). */
.chip.small::after { content: ''; position: absolute; inset: -6px -1px; }
.interest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.interest {
  display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 14px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface); font-weight: 600; text-align: left; font-size: 15px;
}
.interest .ic { font-size: 22px; line-height: 1; }
.interest[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.sub-pick { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-md); background: var(--surface-2); }

/* Budget reveal */
.reveal-card { padding: 24px; border-radius: var(--r-lg); background: var(--accent); color: var(--accent-ink); display: grid; gap: 6px; }
.reveal-card .big { font: 900 clamp(56px, 18vw, 76px)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.reveal-card .big small { font-size: .35em; font-weight: 700; letter-spacing: 0; opacity: .8; }
.reveal-card p { opacity: .85; text-wrap: pretty; }
/* Rent and food need all the money: a plain card that leads with the problem, not a celebration. */
.reveal-card.is-short { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.reveal-card.is-short p { opacity: 1; color: var(--muted); }
.reveal-card.is-short p { order: -1; font-weight: 600; color: var(--ink); }
.reveal-card.is-short p::before { content: "⚠ "; color: var(--danger); }
.reveal-card.is-short .big { color: var(--muted); }
.warn { padding: 14px 16px; border-radius: var(--r-md); background: var(--danger-soft); color: var(--danger); font-size: 15px; }

.ledger, .ledger-sum { display: grid; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.ledger-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 15px; font-variant-numeric: tabular-nums; }
.ledger-row + .ledger-row { border-top: 1px solid var(--line); }
.ledger-row.total { font-weight: 700; background: var(--surface-2); }
.ledger-row .neg { color: var(--muted); }
.ledger-row > span:last-child { white-space: nowrap; }
/* With the loan in payments: the figure after each payment, under "Left for fun". */
.ledger-row.later { padding-block: 9px; font-size: 14px; color: var(--muted); }
.ledger-row.total + .ledger-row.later { border-top: 0; }
/* Fine-tune: the end date with "Until my September loan" next to it (below it on a narrow phone). */
.end-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.end-pick .input { flex: 1 1 10rem; min-width: 0; }
details.tune, details.ledger-more { border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
details.tune summary, details.ledger-more summary { padding: 14px 16px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
/* Budget tab: the weekly figure and weeks left on the first line, what opens it on the second. */
.tune-sum { display: grid; gap: 2px; min-width: 0; }
.tune-sum small { font-size: 13px; font-weight: 500; color: var(--muted); }
details.tune summary::after, details.ledger-more summary::after { content: "+"; color: var(--muted); }
details.tune[open] summary::after, details.ledger-more[open] summary::after { content: "–"; }
details.tune .form { padding: 0 16px 16px; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; min-height: 44px; }
.toggle input { width: 44px; height: 26px; accent-color: var(--accent); }

/* Main screens */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.page-head h1 { font-size: clamp(26px, 7.5vw, 32px); font-weight: 800; }
.page-head h1 .amt { color: var(--accent); }
.left-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.left-pill.over { background: var(--danger-soft); color: var(--danger); }

.map-card { position: relative; isolation: isolate; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--land); }
#map { height: clamp(260px, 44vh, 380px); width: 100%; background: var(--land); }
.map-legend {
  position: absolute; left: 10px; bottom: 10px; z-index: 500; display: flex; gap: 10px; padding: 6px 10px;
  border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); font-size: 12px; font-weight: 600;
}
.map-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.chips-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 5px 16px; }
.chips-row::-webkit-scrollbar { display: none; }

.list { display: grid; gap: 10px; }
.row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); text-align: left; width: 100%;
}
.row .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); font-size: 20px; }
.row h3 { font: 600 16px/1.25 var(--font-body); letter-spacing: 0; }
.row p { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price {
  font: 800 15px/1 var(--font-display); font-variant-numeric: tabular-nums; padding: 7px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); white-space: nowrap;
}
.price.free { background: var(--gold-soft); color: var(--ink); }
.price.over { background: var(--surface-2); color: var(--muted); }
.empty { padding: 24px 16px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r-md); }

/* Map pins */
.pin-wrap { background: none; border: 0; }
.pin {
  position: absolute; transform: translate(-50%, -50%); padding: 4px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--accent); color: var(--accent-ink); font: 800 12px/1 var(--font-display); font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25); border: 2px solid var(--surface); cursor: pointer;
}
.pin.free { background: var(--gold); color: #1d1606; }
.pin.over { background: var(--surface-2); color: var(--muted); box-shadow: none; }
.map-label { background: none; border: 0; }
.map-label span {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font: 700 11px/1 var(--font-body);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); opacity: .8; pointer-events: none;
}

/* Week */
.week-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.week-nav h1 { font-size: 26px; font-weight: 800; text-align: center; }
.week-nav p { text-align: center; font-size: 14px; color: var(--muted); }
.meter-card { padding: 18px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); display: grid; gap: 12px; }
.meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.meter-top strong { font: 800 34px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.meter { height: 12px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .4s ease; }
.meter.warn-lvl span { background: var(--gold-line); }
.meter.over span { background: var(--gold-line); }
.meter-over { font: 700 15px/1 var(--font-body); color: var(--danger); }
.days { display: grid; gap: 12px; }
.day { display: grid; gap: 8px; padding: 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.day.past { background: transparent; border-style: dashed; }
.day.past .day-head h3 { color: var(--muted); }
.day-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.day-head h3 { font-size: 17px; }
.today-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 3px 8px; border-radius: 99px; background: var(--gold); color: #1d1606; margin-left: 6px; vertical-align: 2px; }
.plan-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 2px 2px 2px 12px; border-radius: 12px; background: var(--surface-2); }
.plan-item button.name { border: 0; background: none; padding: 0; min-height: 44px; text-align: left; font-weight: 600; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-item .x { border: 0; background: none; width: 44px; height: 44px; border-radius: 50%; color: var(--muted); font-size: 20px; line-height: 1; }
.day-empty { font-size: 14px; color: var(--muted); }

/* Budget tab */
.stack { display: grid; gap: 12px; }
.section-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.section-title h2 { font-size: 20px; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 10px 8px; }
.account { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font: 800 18px/1 var(--font-display); flex: none; }
.account div { min-width: 0; }
.account p { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.danger-link { color: var(--danger); }

/* Tab bar */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 900; width: 100%; max-width: 480px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.tab { display: grid; justify-items: center; gap: 2px; min-height: 52px; padding-top: 6px; border: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 600; }
.tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab[aria-current="page"] { color: var(--accent); }

/* Bottom sheet */
.scrim { position: fixed; inset: 0; z-index: 1000; background: rgba(5, 10, 7, .45); animation: fade .2s ease; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto; z-index: 1001; width: 100%; max-width: 480px;
  max-height: 88vh; max-height: 88dvh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  display: flex; flex-direction: column; padding: 0;
  scroll-padding: 56px 0 96px; /* Tab keeps the focused button clear of the top bar and the footer */
  background: var(--bg); border-radius: var(--r-lg) var(--r-lg) 0 0; animation: sheet-in .28s cubic-bezier(.2, .8, .2, 1);
}
.sheet.snap { transition: transform .2s ease; } /* sliding back after a short drag */
.grabber { width: 40px; height: 5px; border-radius: 99px; background: var(--line); margin: 0 auto 4px; }
/* Top bar: drag it down to close. Stays put while the sheet scrolls. */
.sheet-head { position: sticky; top: 0; z-index: 2; flex: none; height: 48px; background: var(--bg); touch-action: none; cursor: grab; }
.sheet-head .grabber { position: absolute; top: 8px; left: 50%; margin: 0 0 0 -20px; }
/* A 30px circle that takes taps 44px wide. */
.sheet-x {
  position: absolute; top: 2px; right: 6px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 7px solid transparent; border-radius: 50%; background: var(--surface-2); background-clip: padding-box;
  color: var(--muted); font-size: 22px; line-height: 1;
}
.sheet-body { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0 16px 16px; }
.sheet.no-foot .sheet-body { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
/* Footer: the main buttons, always in view. */
.sheet-foot {
  position: sticky; bottom: 0; z-index: 2; flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg); box-shadow: 0 -8px 16px rgba(0, 0, 0, .06), 0 -1px 0 var(--line); /* the line shows in dark mode */
}
.sheet h2 { font-size: 26px; font-weight: 800; }
.sheet-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; }
.sheet-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.sheet-price strong { font: 800 30px/1 var(--font-display); font-variant-numeric: tabular-nums; }
/* Under the price: extras (shoe hire, booking fees), then when it was checked and where from. */
.price-block { display: grid; gap: 8px; }
.sheet-price strong small { font: 600 16px/1 var(--font-body); color: var(--muted); }
.sheet-price { flex-wrap: wrap; row-gap: 10px; }
.price-extras { flex-basis: 100%; font-size: 14px; color: var(--muted); }
.checked-line { font-size: 13px; color: var(--muted); }
.checked-line .stale-note { white-space: nowrap; } /* on a narrow phone it moves down a line as a whole */
.checked-line .ok { color: var(--ink); font-weight: 600; }
.checked-line .ok::before { content: '✓\00a0'; content: '✓\00a0' / ''; color: var(--accent); font-weight: 800; }
/* Text links in sheets ("Source", "Tell us") take taps 44px tall. */
.sheet .link { position: relative; color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sheet .link::after { content: ''; position: absolute; inset: -15px -6px; }
.report { padding-top: 4px; font-size: 14px; color: var(--muted); text-align: center; }
.day-pick { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.day-pick button { min-height: 56px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); display: grid; place-content: center; gap: 2px; font-size: 12px; font-weight: 600; padding: 0; }
.day-pick button b { font: 800 16px/1 var(--font-display); }
.day-pick button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); }
.day-pick button[disabled] { opacity: .35; }
@media (max-width: 374px) { .day-pick { gap: 3px; } } /* keeps each day 44px wide on small phones */
.row-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 1100;
  bottom: calc(var(--tabbar-h) + 20px + var(--toast-lift, 0px) + env(safe-area-inset-bottom, 0px));
  width: max-content; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--bg);
  font-weight: 600; font-size: 15px; box-shadow: var(--shadow); animation: rise .25s ease;
}

@keyframes rise { from { transform: translate(-50%, 24px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } }
/* "Plan my week" flashes the ideas it added, twice. */
.plan-item { --flash-from: var(--surface-2); }
.up-row { --flash-from: var(--surface); }
.flash { animation: flash 1.2s ease-in-out; }
@keyframes flash {
  0%, 50%, 100% { background-color: var(--flash-from, transparent); }
  25%, 75% { background-color: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); }
}
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } }
.screen-in > * { animation: pop .35s ease both; }
.screen-in > *:nth-child(2) { animation-delay: .04s; }
.screen-in > *:nth-child(3) { animation-delay: .08s; }
.screen-in > *:nth-child(4) { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- v2: full-screen explore ---------- */
#app.full { padding: 0; display: block; }
.explore { position: relative; height: calc(100vh - var(--tabbar-h) - env(safe-area-inset-bottom, 0px)); height: calc(100dvh - var(--tabbar-h) - env(safe-area-inset-bottom, 0px)); overflow: hidden; }
.explore #map { position: absolute; inset: 0; height: auto; }
.ex-top { position: absolute; z-index: 800; top: 0; left: 0; right: 0; padding: 12px 16px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; pointer-events: none; }
.ex-top > * { pointer-events: auto; }
.search { display: flex; align-items: center; gap: 8px; padding: 1px 6px 1px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--input-line); box-shadow: var(--shadow); }
.search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 16px; min-height: 44px; }
.search:focus-within { border-color: var(--accent); }
.ex-top .chips-row { margin: 0 -16px; }
.ex-top .chip { box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.map-btns { position: absolute; z-index: 800; right: 12px; top: 124px; display: grid; gap: 8px; }
.map-btns .icon-btn { box-shadow: var(--shadow); }

.panel {
  position: absolute; z-index: 1000; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
  background: var(--bg); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
  transition: height .3s cubic-bezier(.2, .8, .2, 1);
}
.panel[data-state="min"] { height: 96px; }
.panel[data-state="peek"] { height: 42%; }
/* Full: the list starts under the filter chips, which sit on a plain strip (no sliver of map). */
.panel[data-state="full"] { height: calc(100% - 116px); border-radius: 0; box-shadow: none; }
.explore:has(.panel[data-state="full"]) .ex-top { background: var(--bg); padding-bottom: 4px; }
.panel.dragging { transition: none; }
.panel-head { border: 0; background: none; display: grid; gap: 8px; justify-items: center; padding: 10px 16px 12px; cursor: grab; touch-action: none; width: 100%; }
.panel-head .grabber { margin: 0; }
.panel-title { font: 700 18px/1.2 var(--font-display); justify-self: start; text-align: left; }
.panel .list { overflow-y: auto; padding: 0 16px 16px; flex: 1; align-content: start; overscroll-behavior: contain; }

.row { display: flex; align-items: center; gap: 0; padding: 0; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.row-main {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 10px 4px 10px 10px; border-radius: var(--r-md) 0 0 var(--r-md); background: none; border: 0; text-align: left;
}
/* Area · journey · £X over: each part stays whole. When the next part doesn't fit, it moves down a line
   instead of being cut short. Every part starts with its dot, and the line is pulled 1em to the left, so
   the dot of a part that starts a line sits outside .row-text and is hidden. */
.row-text { min-width: 0; overflow: hidden; }
.row-main p { display: flex; flex-wrap: wrap; margin-left: -1em; }
.row-main p > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.row-main p > span::before { content: '·'; display: inline-block; width: 1em; text-align: center; color: var(--muted); font-weight: 400; }
.over-note { color: var(--danger); font-size: 13px; font-weight: 600; }
.row-main .ic { width: 38px; height: 38px; border-radius: 10px; font-size: 18px; }
.row-main h3 { font-size: 15px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.row-main .price { padding: 6px 8px; font-size: 14px; }
.quick-add { flex: none; width: 44px; height: 44px; margin-right: 4px; border-radius: 12px; border: 0; background: none; color: var(--accent); display: grid; place-items: center; }
.quick-add svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.quick-add:active { background: var(--accent-soft); }
.quick-add.on { background: var(--accent-soft); border-color: transparent; }
.empty .btn-ghost { margin-top: 6px; }

.pin { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 4px; }
.pin i { font-style: normal; font-size: 13px; line-height: 1; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); }
.home-pin {
  position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--bg); font: 800 16px/1 var(--font-body); border: 3px solid var(--surface); box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

/* Map labels appear as you zoom in. */
.map-label span { letter-spacing: .02em; text-transform: none; font-weight: 600; opacity: 1; }
.lbl-area span { font: 800 12px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); opacity: .75; }
.lbl-park span { font-size: 11px; color: var(--accent); font-style: italic; }
.lbl-campus span { font-size: 11px; color: var(--muted); }
.lbl-road span { font-size: 10px; color: var(--muted); background: color-mix(in srgb, var(--land) 75%, transparent); padding: 1px 4px; border-radius: 4px; }
.lbl-station span { font-size: 10.5px; color: var(--ink); transform: translate(8px, -50%); }
.lbl-bridge span { font-size: 10px; color: var(--muted); font-style: italic; transform: translate(-50%, 6px); }
#map[data-zoom="11"] .map-label:not(.lbl-area), #map[data-zoom="12"] .map-label:not(.lbl-area),
#map[data-zoom="13"] .lbl-road, #map[data-zoom="13"] .lbl-station, #map[data-zoom="13"] .lbl-bridge, #map[data-zoom="13"] .lbl-campus,
#map[data-zoom="14"] .lbl-bridge { display: none; }

/* ---------- v2: setup ---------- */
.money-form { display: grid; gap: 4px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); padding: 4px 16px; }
.mf-row { display: grid; gap: 10px; padding: 14px 0; }
.mf-row + .mf-row { border-top: 1px solid var(--line); }
.mf-row label { font-weight: 600; display: grid; gap: 2px; }
.mf-row label small { font-weight: 400; font-size: 13px; color: var(--muted); text-wrap: pretty; }
.mf-input { display: flex; align-items: baseline; gap: 4px; padding: 3px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--input-line); }
.mf-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); }
.mf-input span { font: 800 22px/1 var(--font-display); color: var(--muted); }
.mf-input input { flex: 1; min-width: 0; width: 100%; min-height: 44px; border: 0; background: none; outline: none; font: 800 28px/1.3 var(--font-display); font-variant-numeric: tabular-nums; }
.live-result { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 14px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); font-weight: 600; text-align: center; min-height: 56px; }
.live-result strong { font: 900 30px/1 var(--font-display); }
.live-result .lr-note { flex-basis: 100%; margin-top: -2px; font-size: 14px; font-weight: 500; text-wrap: pretty; }
/* A problem or a prompt is not a result: no green panel. */
.live-result:has(> .error) { background: var(--danger-soft); }
.live-result:has(> .muted:only-child) { background: var(--surface); border: 1px solid var(--line); }
.live-result > .muted:only-child { color: var(--ink); font-weight: 500; }

/* The loan in 3 payments (setup): a toggle under "Money for the year", then a panel with a row each for
   the money in the account now and every payment (label, a date you tap, the amount). */
.mf-row .loan-toggle { display: flex; font-weight: 600; min-height: 44px; margin-top: 2px; }
/* The page colour (not surface-2), so the boxes' edges keep 3:1 against it in both themes. */
.loan-box { display: grid; gap: 2px; padding: 4px 12px; border-radius: var(--r-md); background: var(--bg); }
.loan-line { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 6px 8px; padding: 10px 0; }
.loan-line + .loan-line { border-top: 1px solid var(--line); }
.mf-row .loan-now label { font-size: 15px; font-weight: 600; display: grid; gap: 1px; }
.mf-row .loan-now label small { font-size: 12px; font-weight: 500; color: var(--muted); }
/* "Payment 1 · received" over the date and the amount. */
.loan-name { grid-column: 1 / -1; font-size: 14px; font-weight: 600; }
.loan-name small { font-size: 13px; font-weight: 500; color: var(--muted); }
.mf-input.mf-small { padding: 0 10px; border-radius: var(--r-md); background: var(--surface-2); }
.mf-input.mf-small span { font-size: 16px; }
.mf-input.mf-small input { font-size: 19px; line-height: 1.2; }
/* The date reads "21 Sep"; a native date input lies on top (see-through), so a tap opens the phone's own picker. */
.date-pick {
  position: relative; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px;
  border-radius: var(--r-md); border: 1px solid var(--input-line); background: var(--surface-2); font-size: 15px; font-weight: 600; white-space: nowrap;
}
.date-pick svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; flex: none; }
.date-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; cursor: pointer; }
.date-pick:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.loan-total { font-size: 14px; color: var(--muted); padding: 2px 0 8px; }
.loan-total:empty { display: none; }
.loan-total b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rent-plan { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 10px; }
.mf-row .rent-plan label { font-size: 15px; }
.rent-plan .hint { grid-column: 1 / -1; font-size: 13px; }
.mf-select {
  min-height: 44px; min-width: 0; width: 100%; padding: 0 36px 0 12px; border-radius: var(--r-md); border: 1px solid var(--input-line);
  background: var(--surface-2) no-repeat right 12px center / 14px; font-size: 15px; font-weight: 600; color: var(--ink);
  appearance: none; -webkit-appearance: none;
  /* the app's own chevron (the same stroke as the back arrow), in the muted text colour of each theme */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6760' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mf-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a199' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } }
:root[data-theme="dark"] .mf-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a199' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.mf-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.area-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.chip.area { min-height: 52px; justify-content: center; border-radius: var(--r-md); font-weight: 600; }
.ob-foot {
  position: sticky; bottom: 0; z-index: 5; margin: 0 -16px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg);
}
/* Content fades out as it scrolls under the button, instead of being cut off by a hard edge. */
.ob-foot::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }

/* ---------- v2: place card ---------- */
.facts { display: grid; gap: 0; margin: 0; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); gap: 12px; padding: 11px 14px; font-size: 14px; }
.facts div + div { border-top: 1px solid var(--line); }
.facts dt { color: var(--muted); display: flex; gap: 8px; }
.facts dd { margin: 0; font-weight: 600; }
.tip { padding: 12px 14px; border-radius: var(--r-md); background: var(--gold-soft); font-size: 14px; }
.tip b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; }
.day-pick button.not-on { border-style: dashed; color: var(--muted); }
.toast { display: flex; align-items: center; gap: 14px; }
/* With a sheet open, toasts move to the top so they never cover the sheet's buttons. */
.sheet:not([hidden]) ~ .toast { bottom: auto; top: calc(12px + env(safe-area-inset-top, 0px)); }
.toast button { border: 0; background: none; color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding: 0 6px; margin: -12px -6px; }

.explore #map[data-zoom="11"] .pin, #map[data-zoom="12"] .pin { font-size: 0; padding: 0; width: 14px; height: 14px; border-width: 2px; }
#map[data-zoom="11"] .pin i, #map[data-zoom="12"] .pin i { display: none; }

/* ---------- v3: logo ---------- */
.logo { display: block; flex: none; overflow: visible; }
.logo-spud { fill: var(--spud); stroke: var(--spud-spot); stroke-width: 1.2; }
.logo-eye-spot { fill: var(--spud-spot); opacity: .75; }
.logo-face { fill: var(--cap); }
.logo-smile { fill: none; stroke: var(--cap); stroke-width: 2; stroke-linecap: round; }
.logo-cap, .logo-board { fill: var(--cap); stroke: var(--cap-edge); stroke-width: 1; stroke-linejoin: round; }
.logo-button { fill: var(--spud); }
.logo-tassel { fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.logo-tassel-end { fill: var(--gold); }
.wordmark { gap: 10px; }
.auth-logo { width: 88px; height: 88px; }
.auth-logo .logo { animation: bob 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes bob { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-2px); } }

/* ---------- v3: budget home ---------- */
.home-head { display: grid; gap: 14px; }
.home-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-top .wordmark { font-size: 20px; }
.avatar-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--accent-soft); color: var(--accent); font: 800 17px/1 var(--font-display); flex: none; }
.home-hello { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hello { font: 700 20px/1.2 var(--font-display); letter-spacing: -0.01em; min-width: 0; overflow-wrap: anywhere; }
/* The week's dates. A later item adds the term week ("5–11 Oct · Autumn wk 3"). */
.week-chip { flex: none; padding: 5px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The hero: the ring, the pace line, the three stats and the two main buttons. */
.home-hero { display: grid; justify-items: center; gap: 6px; text-align: center; }
.home-hero > .stat-row, .home-hero > .home-actions { justify-self: stretch; text-align: left; }
.home-hero > .stat-row { margin-top: 10px; }
/* "Held at £25 a week until your loan lands on 4 Jan, then about £30.50." */
.held-note {
  display: flex; align-items: flex-start; justify-content: center; gap: 6px; font-size: 15px; color: var(--muted); text-align: left;
}
.held-note b { color: var(--ink); font-variant-numeric: tabular-nums; }
.held-note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
/* One message under the ring (over budget, short, held, or the pace), with "Help with money" right under it. */
.hero-msg { max-width: 36ch; margin-top: -18px; text-wrap: pretty; }
.hero-msg .pace { margin-top: 0; }
.hero-msg .pace-help { margin-top: 4px; }
.home-hero > .home-actions { margin-top: 6px; }
/* The ring is sized so it never takes more than about 40% of a short phone screen. Its figure is sized
   to the ring (cqi: % of the ring's width), so it always fits inside. */
.gauge { position: relative; width: min(268px, 74vw, 31vh); aspect-ratio: 1; max-width: 100%; container-type: inline-size; }
.gauge svg { width: 100%; height: 100%; display: block; }
.gauge circle { fill: none; stroke-width: 20; stroke-linecap: round; }
.gauge-track { stroke: var(--surface-2); }
.gauge-fill, .gauge-planned { stroke: var(--accent); }
.gauge circle.gauge-planned { stroke-opacity: .35; stroke-linecap: butt; } /* butt ends: no dot when there's nothing planned */
.gauge-tail { stroke: var(--danger); }
.gauge-low .gauge-fill, .gauge-low .gauge-planned, .gauge-over .gauge-fill { stroke: var(--gold-line); }
/* After the first draw the ring slides from the figures it showed last to the new ones. A part that
   shrinks to nothing hides once the slide has finished. */
.gauge-fill, .gauge-planned, .gauge-tail { transition: stroke-dasharray .6s ease-out, opacity 0s; }
.gauge circle.empty { opacity: 0; transition: stroke-dasharray .6s ease-out, opacity 0s .6s; }
.gauge-pace { stroke: var(--ink); stroke-width: 2; }
/* Round ends for the planned part where it meets an end of the arc. They show once the slide gets there. */
.gauge-cap { fill: var(--accent); fill-opacity: .35; opacity: 0; transition: opacity 0s; }
.gauge-low .gauge-cap { fill: var(--gold-line); }
.gauge-cap.on { opacity: 1; transition: opacity 0s .6s; }
.gauge-ticks line { stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
/* The grow-in plays once, on the first draw after the app opens or someone signs in. */
.gauge-intro .gauge-fill { animation: gauge-in 1s cubic-bezier(.2, .8, .2, 1) both; }
.gauge-intro .gauge-planned { animation: gauge-in-planned 1s cubic-bezier(.2, .8, .2, 1) both; }
.gauge-intro .gauge-tail { animation: gauge-tail-in .4s ease-out .8s both; }
.gauge-intro .gauge-cap.on { animation: gauge-cap-in 1s step-end both; }
@keyframes gauge-in { from { stroke-dasharray: 0 1000; } }
@keyframes gauge-in-planned { from { stroke-dasharray: 0 0 0 654; } }
@keyframes gauge-cap-in { from { opacity: 0; } }
@keyframes gauge-tail-in { from { stroke-dasharray: 0 654; opacity: 0; } 1% { opacity: 1; } }
.gauge-text { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 4px 16% 0; text-align: center; }
.gauge-text strong { font: 900 clamp(52px, 17vw, 68px)/1 var(--font-display); font-size: 22cqi; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.gauge-text strong small { font-size: .42em; letter-spacing: 0; margin-left: 1px; }
.gauge-text strong.long { font-size: clamp(40px, 13vw, 54px); font-size: 17.5cqi; }
.gauge-text strong.longer { font-size: clamp(30px, 10vw, 40px); font-size: 13cqi; }
.gauge-text strong.longest { font-size: clamp(22px, 7vw, 30px); font-size: 9.5cqi; }
.gauge-text .muted { font-size: 14px; }
.gauge-over-word { font-size: 15px; font-weight: 700; color: var(--danger); }
.pace { font-size: 15px; color: var(--muted); max-width: 34ch; margin-top: -18px; }
.pace b { color: var(--ink); }
.pace .link, .pace-help .link { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; position: relative; }
/* A link in the pace line is one line of text high; this makes it 44px tall to tap. */
.pace .link::after, .pace-help .link::after { content: ''; position: absolute; inset: -11px -4px; }
.pace-help { font-size: 14px; margin-top: 4px; }
.pace-help .link::after { inset: -12px -6px; } /* 14px text: a little more to reach 44px */
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat { display: grid; gap: 2px; padding: 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.stat .eyebrow { font-size: 10.5px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat b { font: 800 22px/1.1 var(--font-display); }
.stat b.stat-long { font-size: 16px; }
.stat b.stat-longer { font-size: 13px; }
.stat .muted { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.home-actions .btn { padding: 0 12px; font-size: 15px; }
.up-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); text-align: left; width: 100%; }
.up-day { display: grid; justify-items: center; font: 800 20px/1 var(--font-display); }
.up-day b { font: 700 11px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.up-row h3 { font: 600 15px/1.25 var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-row p { font-size: 13px; color: var(--muted); }
.settings { display: grid; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.settings button { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 0; background: none; text-align: left; }
.settings button + button { border-top: 1px solid var(--line); }
.settings span { display: grid; gap: 2px; min-width: 0; }
.settings small { color: var(--muted); font-size: 13px; }
.settings i { font-style: normal; color: var(--muted); font-size: 22px; }
.btn-danger { background: var(--danger); color: var(--danger-ink, #fff); }

/* ---------- v3: map and place card ---------- */
.explore #map { background: var(--land); }
.map-loading { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 32px 40%; text-align: center; color: var(--muted); font-weight: 600; }
.maplibregl-ctrl-top-left { top: 104px; }
.maplibregl-ctrl-attrib { font-size: 10px; }
.maplibregl-ctrl-attrib.maplibregl-compact { background: var(--surface); color: var(--muted); margin: 6px 0 0 12px !important; }
.maplibregl-ctrl-attrib a { color: var(--muted); }
/* The compact attribution's 'i' is 24px: an invisible ring makes it a 44px tap target. */
.maplibregl-ctrl-attrib-button { position: relative; }
.maplibregl-ctrl-attrib-button::after { content: ''; position: absolute; inset: -10px; }
.map-btns { transition: opacity .2s; }
.map-btns.hidden-btns { opacity: 0; pointer-events: none; }
.panel[data-state="card"] { height: auto; max-height: 70%; }
.panel[data-state="card"] .panel-title { font: 600 13px/1.2 var(--font-body); }
.place-card { display: grid; gap: 12px; padding: 0 16px 16px; overflow-y: auto; }
.pc-top { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 12px; align-items: center; }
.pc-top .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); font-size: 22px; }
.pc-name { min-width: 0; }
.pc-name h3 { font: 800 20px/1.15 var(--font-display); }
.pc-name p { font-size: 13.5px; color: var(--muted); }
.pc-close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-size: 22px; line-height: 1; color: var(--muted); }
.pc-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.pc-tip { font-size: 14px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.pc-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.price.over-solid { background: var(--danger-soft); color: var(--danger); }
.price.paid { background: var(--surface-2); color: var(--muted); }

/* ---------- bank (demo) ---------- */
.bank-cta, .bank-strip { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: var(--r-md); text-align: left; }
.bank-cta { background: var(--accent-soft); border: 1px solid transparent; }
.bank-strip { background: var(--surface); border: 1px solid var(--line); padding: 10px 14px; }
.bank-cta span:nth-child(2), .bank-strip span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.bank-cta b { font: 700 16px/1.2 var(--font-display); }
.bank-cta small, .bank-strip small { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bank-cta small { white-space: normal; }
.bank-cta i, .bank-strip i { font-style: normal; color: var(--muted); font-size: 22px; }
.bank-cta-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); font-size: 22px; }
.bank-badge { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: var(--bg); font: 800 18px/1 var(--font-display); flex: none; }
.bank-badge.big { width: 64px; height: 64px; border-radius: 18px; font-size: 28px; }
.txn { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); text-align: left; width: 100%; }
.txn-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); font-size: 18px; }
.txn h3 { font: 600 15px/1.25 var(--font-body); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txn p { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txn-amt { font: 700 15px/1 var(--font-display); white-space: nowrap; }
.bank-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bank-points li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; font-size: 14.5px; }
.bank-points li > span:first-child { font-size: 18px; }
.bank-h { font-size: 17px; margin-top: 4px; }
.bank-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bank-grid button { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 15px; text-align: left; min-width: 0; }
.bank-grid .bank-badge { width: 32px; height: 32px; border-radius: 9px; font-size: 15px; }
.bank-approve { display: grid; justify-items: center; gap: 8px; padding: 24px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-align: center; }
.bank-approve b { font: 700 17px/1.3 var(--font-display); max-width: 26ch; }
.bank-approve small { color: var(--muted); font-size: 13.5px; }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--surface-2); border-top-color: var(--accent); animation: spin .8s linear infinite; margin-top: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.bank-done { display: grid; justify-items: center; gap: 8px; text-align: center; }
.bank-tick { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: 800 30px/1 var(--font-display); animation: pop .3s ease both; }
.cat-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cat-pick button { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.cat-pick button span { font-size: 22px; }
.cat-pick button b { font-size: 15px; }
.cat-pick button small { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.cat-pick button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.pay-group { display: grid; gap: 8px; }
.paid-item { display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px dashed var(--line); background: none; font-size: 14px; color: var(--muted); text-align: left; width: 100%; }
.paid-item span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paid-item .num { font-weight: 700; color: var(--ink); }
.meter-note { font-size: 13px; color: var(--muted); }
.stat.stat-over b { color: var(--danger); }

/* ---------- help with money (sheet) ---------- */
.help-group { display: grid; gap: 8px; }
.help-h { font: 600 12px/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.help-item { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.help-item h3 { font: 700 16px/1.25 var(--font-display); }
.help-item p { font-size: 14.5px; color: var(--muted); }
.help-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.help-btn { min-height: 44px; padding: 0 16px; font-size: 15px; }

/* ---------- polish batch 2 ---------- */
/* A payment that had already come in when the budget was set up: no amount box, what's left is in "now". */
.loan-line.got .loan-name { color: var(--muted); }
.loan-in { display: flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 14px; font-weight: 600; color: var(--muted); }
/* The reveal's full working, folded away under the 3 summary lines. */
details.ledger-more { margin-top: 10px; }
details.ledger-more .form { padding: 0 0 0; }
details.ledger-more .ledger { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md); }
/* An ended budget: the ring is all track and one button sets up the next stretch. */
.home-actions.one { grid-template-columns: 1fr; }
/* Small keys in the stat tiles that match the ring: planned is the paler part, spent is the track. */
.stat .eyebrow .key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.key-planned { background: var(--accent); opacity: .45; }
.key-spent { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--input-line); }
.gauge-pace { stroke-linecap: round; }
/* Over budget: one line above the list instead of a note on every row. */
.list-note { font-size: 14px; color: var(--muted); padding: 2px 2px 0; }
.list-note b { color: var(--ink); }
.end-pick .date-pick { flex: 1 1 10rem; min-width: 0; }
/* Dark mode: the reveal card is a dark green surface with the figure in green, not a bright slab. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .reveal-card:not(.is-short) { background: var(--accent-soft); color: var(--ink); } :root:not([data-theme="light"]) .reveal-card:not(.is-short) .big { color: var(--accent); } }
:root[data-theme="dark"] .reveal-card:not(.is-short) { background: var(--accent-soft); color: var(--ink); }
:root[data-theme="dark"] .reveal-card:not(.is-short) .big { color: var(--accent); }
.facts dd.num { text-align: right; }
.day.folded { display: none; }
.days-past { padding: 10px 14px; border-radius: var(--r-md); border: 1px dashed var(--line); color: var(--muted); font-size: 14px; }
.txn-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; }
.approve-ic { font-size: 28px; line-height: 1; margin-top: 6px; }
.spinner.small { width: 16px; height: 16px; border-width: 2px; margin: 0 8px 0 0; vertical-align: -3px; display: inline-block; }
.help-links .help-btn { padding: 0 12px; font-size: 14.5px; }
/* "Try the demo" belongs to the example week, not to the sign-in buttons. */
.ticket-demo {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 8px; width: 100%; min-height: 48px; margin-top: 4px;
  padding: 10px 2px 2px; border: 0; border-top: 1px dashed var(--line); background: none; color: var(--accent); font: 700 15px/1.2 var(--font-body); text-align: left; cursor: pointer;
}
.ticket-demo small { grid-column: 2; font-size: 13px; font-weight: 500; color: var(--muted); }
.ticket-demo i { grid-row: 1 / span 2; grid-column: 3; font-style: normal; font-size: 22px; color: var(--muted); }
.ticket-demo span { grid-row: 1 / span 2; font-size: 13px; }
.ticket + .auth-buttons { margin-top: 8px; }

/* ---------- r1-06: travel and fares ---------- */
/* "Where do you live?": areas, halls and the optional age, each with a small heading. */
.home-group { display: grid; gap: 10px; }
.home-group h2.eyebrow { margin: 0; }
.home-group .opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.segmented.two { grid-template-columns: repeat(2, 1fr); }
.ob-skip { margin-top: 4px; min-height: 44px; }
/* A price with "+£2 travel" under it (My week and Coming up). */
.price-stack { display: grid; justify-items: end; gap: 3px; }
.travel-note { font-size: 12px; color: var(--muted); white-space: nowrap; padding-right: 4px; }
/* "Add return travel · £2" under "You'll spend". */
.check-row { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 400; cursor: pointer; }
.field .check-row { font-weight: 400; }
.check-row input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); flex: none; }
/* The place sheet's Travel row: when fares were checked, and the source. */
.fare-meta { display: block; margin-top: 2px; font-weight: 400; font-size: 13px; color: var(--muted); }
/* Travel and fares sheet: the Metro season check. */
.season { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-md); background: var(--surface-2); }
.season h3 { font: 700 16px/1.3 var(--font-body); }
.stepper-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stepper-row p { font-size: 15px; }
.stepper { display: flex; align-items: center; gap: 4px; flex: none; }
.stepper .icon-btn { width: 44px; height: 44px; font-size: 22px; line-height: 1; background: var(--surface); border: 1px solid var(--line); }
.stepper .icon-btn[aria-disabled="true"] { opacity: .4; }
.stepper output { min-width: 2ch; text-align: center; font: 800 22px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.season-result { font-size: 15px; font-weight: 600; text-wrap: pretty; }
.season .link { justify-self: start; }

/* Tonight in Newcastle (r1-05): the Budget tab's card, the deal box in a place sheet, "Getting home safe". */
.tn-card { display: grid; gap: 0; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.tn-card > * { padding-inline: 14px; }
.tn-card > .tn-list, .tn-card > .tn-quiet .tn-list { padding-inline: 0; }
.tn-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: 0; background: none; text-align: left; min-height: 64px; }
.tn-row + .tn-row { border-top: 1px solid var(--line); }
.tn-row .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); font-size: 19px; }
.tn-text { display: grid; gap: 1px; min-width: 0; }
.tn-text b { font-size: 15px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-text small { font-size: 13px; line-height: 1.35; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tn-text .tn-18 { font-size: 12px; font-weight: 600; }
.tn-price { display: grid; justify-items: end; gap: 3px; }
.tn-price .price { padding: 6px 9px; font-size: 14px; }
.tn-over { font-size: 12px; color: var(--muted); white-space: nowrap; }
.price.fits { background: var(--accent-soft); color: var(--accent); }
.price.stretch { background: var(--gold-soft); color: var(--amber-ink); box-shadow: inset 0 0 0 1px var(--gold-line); }
.price.varies { background: var(--surface-2); color: var(--ink); font-size: 13px; }
.needs { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 2px 7px; border-radius: 99px; border: 1px solid var(--input-line); color: var(--ink); white-space: nowrap; }
.tn-note { padding-top: 12px; font-size: 14px; color: var(--muted); }
.tn-quiet > p { padding: 14px 14px 4px; font-size: 14px; color: var(--muted); }
.tn-more { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--accent); font-weight: 700; text-align: left; padding: 0 14px; }
.tn-gate { border-top: 1px solid var(--line); padding-block: 12px; font-size: 14px; color: var(--muted); }
.tn-gate .link, .list-note .link { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; position: relative; }
.tn-gate .link::after, .list-note .link::after { content: ''; position: absolute; inset: -13px -6px; }
.tn-card > .safe-home { border-top: 1px solid var(--line); padding: 0; }
.safe-home summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; font-weight: 700; cursor: pointer; }
.safe-home summary::-webkit-details-marker { display: none; }
.safe-home summary::after { content: "+"; margin-left: auto; color: var(--muted); font-weight: 600; }
.safe-home[open] summary::after { content: "–"; }
.safe-home ul { list-style: none; margin: 0; padding: 0 14px 6px; display: grid; gap: 10px; }
.safe-home li { display: grid; gap: 1px; font-size: 14px; }
.safe-home li small { font-size: 13px; color: var(--muted); }
.safe-home .link { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; position: relative; }
.safe-home .link::after { content: ''; position: absolute; inset: -15px -6px; }
.safe-home .fineprint { text-align: left; padding: 4px 14px 12px; font-size: 12.5px; }
.sheet .safe-home { border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.deal-box { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-md); background: var(--gold-soft); border: 1px solid var(--gold-line); font-size: 14px; }
.deal-head { font-size: 16px; font-weight: 600; }
.deal-box .checked-line { color: var(--ink); }
.pc-deal { font-size: 14px; padding: 9px 12px; border-radius: var(--r-md); background: var(--gold-soft); border: 1px solid var(--gold-line); }
.row-main p > .row-deal { color: var(--ink); font-weight: 600; }
.settings i.state { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.settings [aria-checked="true"] i.state { background: var(--accent-soft); color: var(--accent); }

/* ---------- Student discounts and Tonight polish (r2-sd) ---------- */
/* On/off settings (.toggle) are switches: a track with a knob, green when on. */
.toggle input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; margin: 0;
  width: 46px; height: 28px; border-radius: 99px; background: var(--surface-2); border: 1.5px solid var(--input-line);
  cursor: pointer; transition: background .2s, border-color .2s;
}
.toggle input[type="checkbox"]::before {
  content: ''; position: absolute; top: 2.5px; left: 2.5px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--muted); transition: transform .2s, background .2s;
}
.toggle input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.toggle input[type="checkbox"]:checked::before { transform: translateX(18px); background: var(--accent-ink); }
.toggle input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .toggle input[type="checkbox"], .toggle input[type="checkbox"]::before { transition: none; } }

/* Tonight's header: the title and "On the map" on one line; a long title pushes the link under it, right-aligned. */
.tonight .section-title { flex-wrap: wrap; column-gap: 8px; row-gap: 0; }
.tonight .section-title h2 { flex: 1 1 auto; min-width: 0; }
.tonight .section-title .btn-ghost { margin-left: auto; padding-inline: 6px; white-space: nowrap; font-size: 15px; }

/* Dark mode: the picked pill in a segmented control (e.g. "Your age") gets the mint fill and green ring. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .segmented button[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
}
:root[data-theme="dark"] .segmented button[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--accent); }

/* Student discount: the box on a place sheet, the button, and the small provider badge on rows and cards. */
.sd-box { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent); font-size: 14px; }
.sd-box p { margin: 0; }
.btn-student { background: var(--accent); color: var(--accent-ink); min-height: 48px; font-size: 15px; width: 100%; margin-top: 4px; }
.btn-student.small { width: auto; min-height: 44px; padding: 0 14px; font-size: 14px; margin: 0; position: relative; background: var(--surface); color: var(--accent); border: 1.5px solid var(--accent); }
.sd-note { font-size: 13px; color: var(--muted); }
.deal-box .sd-note { color: var(--ink); }
.sd-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 1px 7px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); white-space: nowrap; vertical-align: 1px; }
.row-main p > .sd-tag { padding: 0 6px; line-height: 17px; align-self: center; }
.row-main p > .sd-tag::before { content: none; }
.row-main p > .sd-tag { margin-left: 1em; margin-right: 2px; }
.pc-sd { font-size: 14px; padding: 9px 12px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent); }
.tn-sd { padding: 0 14px 10px 66px; margin-top: -6px; }
.tn-sd + .tn-row { border-top: 1px solid var(--line); }

/* ---------- r2-home: folded sections on the Budget tab ----------
   Each section under the hero is one row (title, a one-line summary and a chevron) that opens in place.
   The whole row is the button's tap area (the ::after below). Rows sit 10px apart, the hero 20px above. */
.fold { gap: 0; }
.fold + .fold, .fold + .tune, .bank-cta + .fold, .fold + .bank-cta, .bank-cta + .tune { margin-top: -10px; }
.fold-head {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "t c" "s c";
  align-items: center; column-gap: 6px; row-gap: 2px; min-height: 58px; padding: 8px 6px 8px 16px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
}
.fold-head h2 { grid-area: t; font-size: 17px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fold-sum { grid-area: s; font-size: 13px; line-height: 1.35; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fold-btn { grid-area: c; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.fold-btn::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-md); } /* the whole row is the tap area */
.fold-btn:focus-visible { outline: none; }
.fold-head:has(.fold-btn:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.fold-btn svg { width: 22px; height: 22px; transition: transform .25s ease; }
.fold.open .fold-btn svg { transform: rotate(180deg); }
/* Opening: the body grows from 0 to its height (grid rows 0fr to 1fr). Closed, it's hidden and inert. */
.fold-body { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .25s ease, visibility 0s linear .25s; }
.fold.open .fold-body { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .25s ease, visibility 0s; }
.fold-inner { min-height: 0; overflow: hidden; display: grid; gap: 12px; padding-inline: 2px; margin-inline: -2px; }
/* Closed (and done closing): the content is out of the layout, so nothing hidden has a size or can be scrolled to. */
.fold:not(.open):not(.closing) .fold-inner > * { display: none; }
.fold.open .fold-inner { padding-top: 10px; padding-bottom: 2px; }
.fold-link { display: flex; align-items: center; gap: 4px; justify-content: flex-end; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--accent); font-weight: 700; font-size: 15px; justify-self: end; cursor: pointer; }
.bank-cta { padding-block: 10px; }
/* The budget row uses the same chevron as the folded sections. */
details.tune summary { min-height: 58px; padding: 10px 17px 10px 16px; }
details.tune summary::-webkit-details-marker { display: none; }
details.tune summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: -4px 2px 0 0; border-right: 2.2px solid var(--muted); border-bottom: 2.2px solid var(--muted); transform: rotate(45deg); transition: transform .25s ease; }
details.tune[open] summary::after { content: ""; margin-top: 4px; transform: rotate(-135deg); }

/* ---------- Log a spend, and "Did you go?" (r2-spend) ---------- */
/* The Spent tile is a button (opens this week's spends); the round + in its bottom corner logs a spend.
   The + is 44px to tap, drawn as a 26px circle, and sits beside "so far", clear of the figure. */
.stat-row { position: relative; }
button.stat { font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; }
button.stat:active { transform: scale(.98); }
.log-plus { position: absolute; bottom: 0; left: calc((100% - 16px) / 3 - 44px); width: 44px; height: 44px; border: 0; padding: 0; background: none; display: grid; place-items: center; color: var(--accent-ink); cursor: pointer; border-radius: 50%; }
.log-plus::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--accent); }
.log-plus svg { position: relative; width: 16px; height: 16px; }
.log-plus:active::before { transform: scale(.92); }
.dyg { display: grid; gap: 10px; padding: 12px 14px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.dyg-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dyg-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); font-size: 17px; }
.dyg h2 { flex: 1; min-width: 0; font: 600 16px/1.3 var(--font-body); letter-spacing: 0; text-wrap: pretty; }
.dyg h2:focus { outline: none; }
.dyg-n { flex: none; font-size: 12px; font-weight: 600; color: var(--muted); padding: 2px 8px; border-radius: 999px; background: var(--surface-2); white-space: nowrap; }
.dyg-sub { font-size: 13px; color: var(--muted); margin-top: -4px; }
.dyg-btns { display: flex; gap: 8px; }
.dyg-btns .btn { min-height: 44px; padding: 0 12px; font-size: 14.5px; white-space: nowrap; flex: 1 1 auto; }
.dyg-btns .dyg-no { flex: 0 0 auto; min-width: 56px; }
.field-label { font-size: 14px; font-weight: 600; }
.log-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.log-cats .chip { min-height: 44px; padding: 0 12px; font-size: 14.5px; }
.log-form .day-pick button:not([disabled]) { cursor: pointer; }
.log-form .error:not([hidden]) { margin-top: 2px; }
.mf-input:has(input[aria-invalid="true"]) { border-color: var(--danger); }
.row-actions.one { grid-template-columns: 1fr; }
.row-actions .btn svg { width: 18px; height: 18px; }
.price.skipped { color: var(--muted); text-decoration: line-through; }
.txn-plan { border-style: dashed; }
.txn-logged .txn-tag + .txn-tag { margin-left: 2px; }
p.paid-item { margin: 0; }

/* ---------- Rolling weeks, the Monday recap and the savings pot (r2-recap) ---------- */
/* The recap uses the "Did you go?" card (.dyg). Two buttons share the row; on a narrow phone they wrap. */
/* Two buttons share the row; a long label wraps inside its button rather than stacking the buttons. */
.recap .dyg-btns .btn { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.2; padding: 6px 10px; text-align: center; }
.recap-diff { white-space: nowrap; }
.recap h2 b { font-weight: 700; }
.recap .recap-over { color: var(--danger); }
.dyg-done { justify-self: start; min-height: 44px; padding: 0 2px; font-size: 14px; margin: -6px 0 -10px; }
.gauge-adj { font-size: 11.5px; line-height: 1.25; color: var(--muted); max-width: 50cqi; text-wrap: balance; margin-top: -2px; }
.meter-adj { margin-top: -4px; }
.pot-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 0; }
.pot-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pot-row:last-child { border-bottom: 0; }
.pot-in { font-weight: 700; }
.quick-add.on.went { opacity: .7; }

/* ---------- UNISPUD Wrapped (r2-wrapped) ---------- */
/* "See your week" on the recap card: a small pill sitting on the card's top edge, like a sticker, so the heading keeps
   its full width and the card stays the height it was. The button is 44px tall to tap (most of it over the card's
   padding and the gap above); the pill you see is 28px. */
.recap { position: relative; }
.recap-wrap { position: absolute; top: -20px; right: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(var(--accent), var(--accent)) center / 100% 28px no-repeat; font: 700 12.5px/1 var(--font-body); color: var(--accent-ink); white-space: nowrap; }
.recap-wrap::before { content: '✨'; font-size: 12px; }
/* The slim "Last week, wrapped" row and the term card on the Budget tab. */
.wrap-strip, .wrap-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 56px; text-align: left;
  padding: 8px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
.wrap-strip b, .wrap-card b { display: block; font: 700 15px/1.25 var(--font-body); }
.wrap-strip small, .wrap-card small { display: block; font-size: 13px; color: var(--muted); line-height: 1.3; }
.wrap-strip i, .wrap-card i { font-style: normal; font-size: 22px; color: var(--muted); }
.wrap-card { padding: 12px 14px; color: #fff; border: 0; background: linear-gradient(120deg, #1f6b45, #2f8f5e 60%, #3c9e6a); }
.wrap-card small, .wrap-card i { color: #d6f0df; }
.wrap-card .wrap-card-logo { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); }
.wrap-card .logo-cap, .wrap-card .logo-board { fill: #17201b; stroke: #17201b; }
.wrap-strip .wrap-strip-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); }

/* The story: full screen, one card at a time, with Instagram-style bars at the top. */
body.story-open .toast { z-index: 1200; }
.story { position: fixed; inset: 0; z-index: 1050; background: #06100b; color: #fff; display: grid; place-items: stretch center; animation: fade .2s ease; }
.story-frame { position: relative; width: 100%; max-width: 480px; height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
.story-bars { display: flex; gap: 4px; padding: 0 4px; }
.story-bars span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.story-bars i { display: block; height: 100%; width: 0; background: #fff; border-radius: 2px; }
.story-bars .seen i { width: 100%; }
.story-bars .now i { width: 100%; animation: story-bar .45s ease-out; }
@keyframes story-bar { from { width: 0; } }
.story-top { display: flex; align-items: center; justify-content: space-between; padding-left: 6px; }
.story-top .wordmark { color: #fff; font-size: 19px; }
.story-top .wordmark .logo-cap, .story-top .wordmark .logo-board { stroke: #8fa197; }
.story-x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 26px; line-height: 1; display: grid; place-items: center; }
.story-stage { position: relative; min-height: 0; }
.story-card { --st-a: #1f6b45; --st-b: #2f8f5e; --st-ink: #fff; --st-soft: #d6f0df; --st-accent: #f4c25a; --st-track: rgba(255, 255, 255, .22);
  position: absolute; inset: 0; overflow: hidden; border-radius: 22px; padding: 28px 24px 24px; display: flex; flex-direction: column; justify-content: center; gap: 10px;
  color: var(--st-ink); background: radial-gradient(circle at 92% 8%, rgba(255, 255, 255, .14) 0 28%, transparent 28.5%), radial-gradient(circle at 6% 96%, rgba(255, 255, 255, .1) 0 34%, transparent 34.5%), linear-gradient(160deg, var(--st-a), var(--st-b)); }
.story-card.tone-gold { --st-a: #f0b94a; --st-b: #e2a22c; --st-ink: #1d1505; --st-soft: #4a3508; --st-accent: #1f6b45; --st-track: rgba(29, 21, 5, .16); }
.story-card.tone-mint { --st-a: #e3f0e6; --st-b: #b7dcc3; --st-ink: #0d2618; --st-soft: #2c5a3f; --st-accent: #1f6b45; --st-track: rgba(13, 38, 24, .14); }
.story-card.tone-deep { --st-a: #0f2a1c; --st-b: #1f6b45; --st-ink: #fff; --st-soft: #bfe3cc; --st-accent: #f0b94a; --st-track: rgba(255, 255, 255, .2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .story-card { --st-a: #123d28; --st-b: #1d6142; --st-ink: #edf7f0; --st-soft: #b9e3c8; --st-accent: #f0b94a; --st-track: rgba(255, 255, 255, .18); }
  :root:not([data-theme="light"]) .story-card.tone-gold { --st-a: #3a2a0b; --st-b: #6b4b12; --st-ink: #fff3d6; --st-soft: #f3d79a; --st-accent: #f0b94a; --st-track: rgba(255, 243, 214, .18); }
  :root:not([data-theme="light"]) .story-card.tone-mint { --st-a: #14281c; --st-b: #1f4a32; --st-ink: #e5f5ea; --st-soft: #a9d8b9; --st-accent: #5bbf88; --st-track: rgba(229, 245, 234, .16); }
  :root:not([data-theme="light"]) .story-card.tone-deep { --st-a: #07130c; --st-b: #164a30; --st-ink: #edf7f0; --st-soft: #a9d8b9; --st-accent: #f0b94a; --st-track: rgba(255, 255, 255, .16); }
  :root:not([data-theme="light"]) .wrap-card { background: linear-gradient(120deg, #123d28, #1d6142 60%, #24704c); }
}
:root[data-theme="dark"] .story-card { --st-a: #123d28; --st-b: #1d6142; --st-ink: #edf7f0; --st-soft: #b9e3c8; --st-accent: #f0b94a; --st-track: rgba(255, 255, 255, .18); }
:root[data-theme="dark"] .story-card.tone-gold { --st-a: #3a2a0b; --st-b: #6b4b12; --st-ink: #fff3d6; --st-soft: #f3d79a; --st-accent: #f0b94a; --st-track: rgba(255, 243, 214, .18); }
:root[data-theme="dark"] .story-card.tone-mint { --st-a: #14281c; --st-b: #1f4a32; --st-ink: #e5f5ea; --st-soft: #a9d8b9; --st-accent: #5bbf88; --st-track: rgba(229, 245, 234, .16); }
:root[data-theme="dark"] .story-card.tone-deep { --st-a: #07130c; --st-b: #164a30; --st-ink: #edf7f0; --st-soft: #a9d8b9; --st-accent: #f0b94a; --st-track: rgba(255, 255, 255, .16); }
:root[data-theme="dark"] .wrap-card { background: linear-gradient(120deg, #123d28, #1d6142 60%, #24704c); }
.story-card.in-next { animation: story-in-next .28s cubic-bezier(.2, .8, .2, 1); }
.story-card.in-prev { animation: story-in-prev .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes story-in-next { from { opacity: 0; transform: translateX(24px) scale(.98); } }
@keyframes story-in-prev { from { opacity: 0; transform: translateX(-24px) scale(.98); } }
.st-eyebrow { margin: 0; font: 700 12.5px/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--st-soft); }
.st-title { margin: 0; font: 700 clamp(22px, 6.4vw, 28px)/1.15 var(--font-display); letter-spacing: 0; color: var(--st-ink); text-wrap: balance; }
.st-big { margin: 2px 0 0; font: 800 clamp(56px, 19vw, 84px)/.95 var(--font-display); letter-spacing: -.02em; color: var(--st-accent); overflow-wrap: anywhere; }
.tone-gold .st-big, .tone-mint .st-big { color: var(--st-ink); }
.st-big.words { font-size: clamp(34px, 10.5vw, 46px); line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
.st-sub { margin: 0; font: 600 17px/1.35 var(--font-body); color: var(--st-soft); }
.st-bar { height: 14px; border-radius: 999px; background: var(--st-track); overflow: hidden; margin: 8px 0 2px; }
.st-bar span { display: block; height: 100%; min-width: 14px; border-radius: 999px; background: var(--st-accent); }
.tone-gold .st-bar span, .tone-mint .st-bar span { background: var(--st-ink); }
.st-rows { margin: 8px 0 0; display: grid; }
.st-rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--st-track); }
.st-rows dt { color: var(--st-soft); font-size: 15px; font-weight: 600; min-width: 0; }
.st-rows dd { margin: 0; font-weight: 700; font-size: 16px; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.st-note { margin: 6px 0 0; font: 500 16.5px/1.4 var(--font-body); color: var(--st-ink); max-width: 30ch; }
.st-emoji { position: absolute; right: 18px; bottom: 14px; font-size: 64px; line-height: 1; opacity: .95; pointer-events: none; }
/* Taps on the left third go back, the rest go on (the buttons cover the card and are labelled for screen readers). */
.story-prev, .story-next { position: absolute; top: 0; bottom: 0; border: 0; background: none; padding: 0; margin: 0; border-radius: 22px; -webkit-tap-highlight-color: transparent; }
.story-prev { left: 0; width: 34%; }
.story-next { right: 0; width: 66%; }
.story-prev[aria-disabled="true"], .story-next[aria-disabled="true"] { cursor: default; }
.story-prev:focus-visible, .story-next:focus-visible { outline: 2px solid rgba(255, 255, 255, .75); outline-offset: -4px; }
.story-foot { display: flex; align-items: center; gap: 12px; padding: 2px 4px 0; }
.story-name { flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.25; color: #d6e6dc; cursor: pointer; }
.story-name input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: #5bbf88; }
.story-share { flex: 0 0 auto; margin-left: auto; min-height: 48px; padding: 0 20px; gap: 8px; background: #5bbf88; color: #07130c; }
.story-share svg { width: 19px; height: 19px; }
.story :focus-visible { outline-color: #fff; }

/* ---------- House & splits (r2-split) ---------- */
.bal-list { display: grid; gap: 8px; }
.bal-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 8px 8px 8px 10px; border-radius: var(--r-md); background: var(--surface-2); }
.sheet .bal-row { background: var(--surface); border: 1px solid var(--line); }
.bal-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font: 800 16px/1 var(--font-display); flex: none; }
.bal-text { margin: 0; min-width: 0; font-size: 15px; line-height: 1.3; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.bal-text span { min-width: 0; overflow-wrap: anywhere; }
.bal-amt { font: 800 16px/1.2 var(--font-display); white-space: nowrap; }
.bal-amt.pos, .txn-amt.pos { color: var(--accent); }
.bal-amt.neg { color: var(--amber-ink); }
.bal-btn { min-height: 44px; padding: 0 14px; font-size: 14.5px; white-space: nowrap; }
.bal-remind { grid-column: 2 / -1; justify-self: start; min-height: 44px; margin: -10px 0 -8px; border: 0; background: none; padding: 0; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.house-links { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.house-links .btn { min-height: 44px; padding: 0 16px; font-size: 15px; }
.house-sec { display: grid; gap: 10px; margin-top: 18px; }
.house-sec h3 { font: 700 16px/1.3 var(--font-body); letter-spacing: 0; }
.house-empty { margin: 4px 0 0; }
.hm-list { display: grid; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.hm-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 14px 6px 10px; border: 0; background: none; text-align: left; width: 100%; }
.hm-row + .hm-row { border-top: 1px solid var(--line); }
.hm-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-edit { color: var(--accent); font-weight: 700; font-size: 14.5px; }
.add-name { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.add-name .input { min-height: 48px; }
.add-name .btn { min-height: 48px; padding: 0 18px; }
.txn-pay { border-style: dashed; }
.txn-bill { border-style: dashed; }
/* The split control: "Split it" opens it in Log a spend and a plan's sheet. */
.split-box { display: grid; gap: 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); padding: 4px 12px; }
.split-box.on { padding-bottom: 12px; }
.split-toggle { display: flex; align-items: center; gap: 10px; min-height: 52px; width: 100%; border: 0; background: none; padding: 0; text-align: left; font-weight: 600; font-size: 15px; }
.split-toggle > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.split-toggle small { font-weight: 400; font-size: 13px; color: var(--muted); }
.split-toggle svg { width: 20px; height: 20px; flex: none; color: var(--muted); transition: transform .2s; }
.split-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.split-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); font-size: 17px; flex: none; }
.split-body { display: grid; gap: 10px; }
.split-body[hidden] { display: none; }
.split-box:not(:has(.split-toggle)) { padding-top: 12px; padding-bottom: 12px; }
.chip-me { min-height: 44px; padding: 0 12px; font-size: 14.5px; background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.split-body .add-name-field label { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--surface-2); }
.seg button { flex: 1 1 auto; min-height: 44px; min-width: 64px; padding: 0 12px; border: 0; background: none; border-radius: 12px; font-weight: 600; font-size: 14.5px; color: var(--muted); white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.uneven { display: grid; gap: 8px; }
.uneven-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 9.5em); align-items: center; gap: 10px; }
.uneven-row label { font-size: 15px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.split-sum { font-size: 14px; color: var(--muted); text-wrap: pretty; }
.split-sum:empty { display: none; }
.split-note { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.plan-item button.name:has(.split-note) { padding: 4px 0; line-height: 1.25; }
.dyg-paid { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin-top: -2px; }
.dyg-paid label { font-size: 14px; font-weight: 600; white-space: nowrap; }
.split-who .chip { min-width: 56px; justify-content: center; }

/* ---------- Your data and Privacy (r2-data) ---------- */
.data-sec { display: grid; gap: 8px; }
.data-sec h3 { font: 700 13px/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 4px 4px 0; }
.restore-card { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--line); }
.restore-card b { font-size: 16px; }
.restore-card span { font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.restore-err { font-size: 15px; line-height: 1.45; }
.ex-sum { font-size: 15px; min-height: 1.5em; }
.privacy { display: grid; gap: 18px; }
.privacy section { display: grid; gap: 6px; }
.privacy h3 { font: 700 16px/1.3 var(--font-body); letter-spacing: 0; }
.privacy p { line-height: 1.5; text-wrap: pretty; }
.btn-danger-soft { background: var(--danger-soft); color: var(--danger); border-color: transparent; margin-top: 6px; }

/* r2-accounts: the welcome screen's notes, the sync line, "Save it to an account", "Which budget do you want to keep?" */
.auth-note { padding: 12px 14px; border-radius: var(--r-md); background: var(--gold-soft); color: var(--amber-ink); font-size: 14px; font-weight: 600; line-height: 1.4; text-wrap: pretty; }
.auth-link { display: grid; gap: 6px; padding: 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.auth-link h2 { font-size: 20px; }
.auth-info { color: var(--ink); }
.btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.sync-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 0 4px; }
.sync-state { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); min-height: 24px; }
.sync-state .dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent); }
.sync-state[data-kind="busy"] .dot { background: var(--muted); }
.sync-state[data-kind="offline"] .dot, .sync-state[data-kind="conflict"] .dot { background: var(--gold-line); }
.sync-state[data-kind="error"] { color: var(--danger); }
.sync-state[data-kind="error"] .dot { background: var(--danger); }
.link-card { display: grid; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--line); }
.link-card p { display: grid; gap: 2px; }
.link-card span { font-size: 14px; color: var(--muted); }
.danger-zone { display: grid; justify-items: center; gap: 0; }
.keep-list { display: grid; gap: 10px; }
.keep-opt { display: grid; gap: 4px; padding: 14px 16px; min-height: 64px; text-align: left; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.keep-opt.is-first { border: 2px solid var(--accent); }
.keep-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.keep-title b { font-size: 16px; }
.keep-title em { font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); }
.keep-opt small { font-size: 14px; color: var(--muted); line-height: 1.4; text-wrap: pretty; }