/* Sikano: Tidepool's water, Delta's clarity.
   Two modes from the same palette: light (cream) and dark. html[data-theme] picks one (index.html sets it before
   anything draws: the user's choice in Settings, or the phone's setting). Screens use the named colours below
   (var(--ink), var(--surface)...), never fixed ones, so each screen works in both. */

/* ---------- named colours: light ---------- */
:root {
  --bg: #f5f0e6; --page-outer: #e9e3d6; --surface: #fffcf6; --surface-2: #efe8db; --group: #ede6d8;
  --line: #e8e1d3; --line-soft: #efe8db; --pill: #d8d0c0;
  --ink: #14211f; --ink-2: #5a574f; --muted: #66625a; --faint: #a39e93;   /* --faint: decoration only (chevrons, rules) */
  --inverse-bg: #0e1c1f; --inverse-fg: #f5f0e6;          /* primary buttons, selected chips and pills */
  --accent: #2a7a7e; --pos: #1d7f74; --neg: #d9622b;       /* links; money in; money out */
  --on-teal: #0e1c1f;                                       /* text on teal or coral, and on the water */
  --tank: #dcebe7; --tank-line: #b7d6d0; --tank-rim: #a3cbc4; --tank-deep: #bfe3dd;
  --feature-bg: #e3f0ec;                                    /* forecast cards */
  --wave-back: #9ccfc7;                                     /* the water's back wave */
  --warn-bg: #fbe6da; --warn-line: #f3cdb8; --warn-fg: #b4501f; --warn-sub: #7a5440; --warn-body: #5a4336; --warn-row: #fdf2ea;
  --ok-bg: #e3f1ee; --ok-line: #c3e2dc; --ok-fg: #1d5f5a; --ok-body: #3f5c58;
  --amber: #e3a33a; --amber-bg: #f6e7bf; --amber-fg: #9a6a12;
  --bubble: #e6e0d3; --nav-line: #e8e1d3; --nav-off: #a39e93; --add-ring: #f5f0e6;
  --add-shadow: 0 6px 16px rgba(14, 28, 31, .28);
  color-scheme: light;
}
/* ---------- named colours: dark ---------- */
:root[data-theme="dark"] {
  --bg: #0e1c1f; --page-outer: #0a1517; --surface: #172b2f; --surface-2: #122427; --group: #13262a;
  --line: #24393d; --line-soft: #1c3034; --pill: #3c5a5e;
  --ink: #f5f0e6; --ink-2: #b9cac9; --muted: #8ea5a4; --faint: #6f8786;
  --inverse-bg: #f5f0e6; --inverse-fg: #0e1c1f;
  --accent: #5cc4bb; --pos: #5cc4bb; --neg: #ff8a55;
  --tank: #122427; --tank-line: #2f4a4e; --tank-rim: #3c5a5e; --tank-deep: #1f4f53;
  --feature-bg: #172b2f; --wave-back: #1b4a4e;
  --warn-bg: #2b211c; --warn-line: #4a3328; --warn-fg: #ff8a55; --warn-sub: #c9b3a6; --warn-body: #c9b3a6; --warn-row: #1f2622;
  --ok-bg: #143331; --ok-line: #1f4a48; --ok-fg: #5cc4bb; --ok-body: #b9cac9;
  --amber-bg: #33290f; --amber-fg: #e3a33a;
  --bubble: #24393d; --nav-line: #1c3034; --nav-off: #6f8786; --add-ring: #2b5258;
  --add-shadow: 0 8px 20px rgba(0, 0, 0, .55), 0 0 18px rgba(92, 196, 187, .18);
  color-scheme: dark;
}

/* Colours that are the same in both modes, and the fonts. */
:root {
  --teal: #5cc4bb; --teal2: #2a7a7e; --teal3: #1f5f63; --coral: #ff8a55;
  --serif: 'Newsreader', Georgia, serif; --sans: 'Geist', system-ui, -apple-system, sans-serif; --mono: 'Geist Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--sans); font-size: 14px; -webkit-font-smoothing: antialiased; background: var(--page-outer); }
button, input, textarea, select { font-family: inherit; font-size: inherit; }
/* iPhone Safari zooms the page into any box whose text is under 16px when you tap it, which pushes the screen
   sideways. 16px boxes on iPhones only (the big amount inputs are larger anyway). */
@supports (-webkit-touch-callout: none) {
  input:not([type="checkbox"]):not([type="radio"]), textarea, select { font-size: max(16px, 1em) !important; }
}
button { cursor: pointer; transition: transform .12s ease, opacity .15s ease; -webkit-tap-highlight-color: transparent; }
/* Feedback: every button dips when pressed, and shows a spinner while its request is running. */
button:active:not(:disabled) { transform: scale(.97); }
button.is-busy { position: relative; color: transparent !important; pointer-events: none; }
button.is-busy > * { visibility: hidden; }
button.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; border: 2px solid var(--spin, currentColor); border-right-color: transparent; animation: sk-spin .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { button:active:not(:disabled) { transform: none; } }
a { color: var(--accent); }

/* One phone-width column, centred on larger screens. */
#app { max-width: 480px; min-height: 100%; margin: 0 auto; position: relative; transition: background .2s, color .2s; }
#app { background: var(--bg); color: var(--ink); }
main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); min-height: 100vh; }
/* The design sits content 8px below a 52px status bar; on a real phone that bar is the device's own. */
.pad { padding: calc(14px + env(safe-area-inset-top)) 20px 0; display: flex; flex-direction: column; gap: 16px; }
.pad16 { padding: calc(14px + env(safe-area-inset-top)) 16px 0; display: flex; flex-direction: column; gap: 14px; }
.pad-detail { padding: calc(14px + env(safe-area-inset-top)) 16px 0; display: flex; flex-direction: column; gap: 16px; }

/* ---------- type ---------- */
.serif { font-family: var(--serif); font-weight: 500; }
.h1 { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.15; margin: 0; }
.h-big { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.1; }
.money-xl { font-family: var(--serif); font-weight: 500; font-size: 44px; letter-spacing: -.01em; line-height: 1.1; }
.money-l { font-family: var(--serif); font-weight: 500; font-size: 40px; line-height: 1.1; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.xs { font-size: 12px; }
.in-d, .in-l { color: var(--pos); } .out-d, .out-l { color: var(--neg); }
.row { display: flex; align-items: center; gap: 12px; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.col { display: flex; flex-direction: column; }
.gap2 { gap: 2px; } .gap6 { gap: 6px; } .gap10 { gap: 10px; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hidden { display: none !important; }

/* ---------- buttons ---------- */
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 18px; line-height: 1; padding: 0; }
.link-btn { background: none; border: 0; padding: 0; color: var(--ink-2); font-size: 14px; text-align: left; }
.back { align-self: flex-start; }
/* Buttons: three sizes (.btn 52px, .btn-md 44px, .btn-sm 36px with a 44px hit area), one shape (12px corners), and a
   few looks (.btn-teal / -ink / -quiet / -wait / -coral / -ghost). Links styled as buttons behave the same. */
.btn { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 52px; border: 0; border-radius: 12px;
  padding: 0 16px; font-size: 15px; font-weight: 500; width: 100%; text-align: center; text-decoration: none; }
.btn-md { min-height: 44px; font-size: 14px; width: auto; }
.btn-sm { min-height: 36px; font-size: 13px; width: auto; padding: 0 12px; position: relative; }
.btn-sm::after { content: ""; position: absolute; inset: -4px 0; }
.btn-quiet { background: none; color: var(--ink); border: 1px solid var(--line); }
.btn-wait { background: var(--surface-2); color: var(--muted); }
.btn-ink { background: var(--inverse-bg); color: var(--inverse-fg); }
.btn-teal { background: var(--teal); color: var(--on-teal); font-weight: 600; }
.btn-coral { background: var(--coral); color: var(--on-teal); font-weight: 600; }
.btn-ghost { background: var(--surface); border: 1px solid var(--warn-line); color: var(--ink); }
.btn:disabled, .icon-btn:disabled { opacity: .6; cursor: progress; }
.danger-link { background: none; border: 0; padding: 0; color: var(--warn-fg); font-size: 13px; align-self: flex-start; }
.chip { border: 1px solid var(--pill); border-radius: 99px; padding: 6px 11px; background: transparent; color: var(--ink); font-size: 12px; }
.chip.on { background: var(--inverse-bg); color: var(--inverse-fg); border-color: var(--inverse-bg); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* segmented controls */
.seg { display: grid; gap: 4px; padding: 3px; border-radius: 99px; background: var(--surface); }
.seg button { border: 0; border-radius: 99px; padding: 8px 0; background: transparent; color: var(--ink-2); font-size: 13px; font-weight: 500; }
.seg button.on { background: var(--inverse-bg); color: var(--inverse-fg); }
.seg-sq { border-radius: 14px; border: 1px solid var(--line); } .seg-sq button { border-radius: 11px; font-size: 12px; }
.seg-cream { background: var(--surface-2); border-radius: 12px; } .seg-cream button { border-radius: 9px; color: var(--ink); font-size: 12px; padding: 7px 0; }
.seg-cream button.on { background: var(--surface); color: var(--ink); }
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pills button { border: 0; border-radius: 99px; padding: 7px 13px; background: transparent; color: var(--ink-2); font-size: 13px; font-weight: 500; }
.pills button.on { background: var(--inverse-bg); color: var(--inverse-fg); }
/* The Ledger's long pill, for labels of different lengths (Budget · Spending · Income · Subscriptions). */
.seg-fit { display: flex; gap: 2px; }
.seg-fit button { flex: 1 1 auto; padding: 8px 10px; white-space: nowrap; }
@media (max-width: 370px) { .seg-fit button { padding: 8px 6px; font-size: 12px; } }

/* ---------- cards & lists ---------- */
.d-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.c-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }   /* cards: 20px; controls: 12px */
.c-list { padding: 4px 14px; display: flex; flex-direction: column; }
.c-list > * { border-bottom: 1px solid var(--line-soft); }
.c-list > *:last-child { border-bottom: 0; }
.list-btn { display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 13px 0; color: inherit; text-align: left; width: 100%; }
.chev { color: var(--faint); font-size: 18px; }
.tile { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px; flex: none; }
.tile.s36 { width: 36px; height: 36px; border-radius: 10px; font-size: 10px; }
.tile.s34 { width: 34px; height: 34px; border-radius: 10px; font-size: 10px; }
.tile.s46 { width: 46px; height: 46px; border-radius: 14px; font-size: 12px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); flex: none; }
.badge { width: 22px; height: 22px; border-radius: 50%; background: var(--coral); color: var(--on-teal); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.tag { font-size: 12px; font-weight: 600; color: var(--warn-fg); background: var(--warn-bg); border-radius: 99px; padding: 3px 8px; white-space: nowrap; }

/* account buttons on home */
.acct-btn { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; color: var(--ink); text-align: left; width: 100%; }
.issues-btn { display: flex; align-items: center; gap: 12px; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 18px; padding: 14px 16px; color: var(--ink); text-align: left; width: 100%; }

/* ---------- the tank (home) ---------- */
.tank { position: relative; height: 178px; margin-top: 4px; }
.tank-body { position: absolute; inset: 14px 0 0 0; box-sizing: border-box; border: 1.5px solid var(--tank-line); border-top: 0; border-radius: 0 0 36px 36px / 0 0 28px 28px; background: var(--tank); overflow: hidden; }
.tank-rim { position: absolute; left: 0; right: 0; top: 0; height: 28px; border: 1.5px solid var(--tank-rim); border-radius: 50%; }
.tank-label { position: absolute; color: var(--on-teal); }
.liquid { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.liquid span { position: absolute; left: -150%; width: 400%; aspect-ratio: 1; animation: sk-spin linear infinite; }
@keyframes sk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .liquid span { animation: none; } }

/* charts */
.chart-box { background: var(--tank); border: 1.5px solid var(--tank-line); border-radius: 20px; padding: 14px 10px 6px; overflow: hidden; }
.chart-empty { padding: 30px 10px; text-align: center; font-size: 13px; }
svg text { font-family: var(--sans); }

/* split stats */
.split { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.split > div { padding: 14px 0; display: flex; flex-direction: column; gap: 2px; }
.split > div:first-child { border-right: 1px solid var(--line); }
.split > div:last-child { padding-left: 16px; }

/* transaction rows (dark) */
.tx-row-d { display: flex; align-items: center; gap: 12px; background: none; border: 0; border-top: 1px solid var(--line); padding: 12px 0; color: var(--ink); text-align: left; width: 100%; }
.tx-row-d.excluded > * { opacity: .45; }  /* same treatment as the ledger: left out of In / Out and Insights */

/* ---------- the header band and the sheet below it (ledger, budget, insights) ----------
   Dark mode: the band is the page colour and the sheet a step lighter. Light mode: the band is a step darker than
   the cream sheet, so the sheet's rounded top still shows. */
.band { background: var(--bg); color: var(--ink); padding: calc(14px + env(safe-area-inset-top)) 20px 34px; display: flex; flex-direction: column; gap: 14px; }
.sheet { background: var(--bg); border-radius: 24px 24px 0 0; margin-top: -18px; position: relative; }
/* Back to the top of a long list: shows once you've scrolled a way down (app.js sets html.far-down). */
.to-top { position: fixed; z-index: 5; right: max(16px, calc(50% - 224px)); bottom: calc(100px + env(safe-area-inset-bottom));
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 18px; box-shadow: 0 4px 14px rgba(14, 28, 31, .18); opacity: 0; pointer-events: none; transition: opacity .2s; }
html.far-down .to-top { opacity: 1; pointer-events: auto; }
:root[data-theme="dark"] .sheet { background: var(--surface-2); }
.band input { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; color: var(--ink); font-size: 16px; outline: none; }

/* ledger */
.day-head { display: flex; justify-content: space-between; padding: 12px 20px; background: var(--group); font-size: 13px; font-weight: 500; margin-top: 6px; }
.swipe { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.swipe-under { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; font-size: 12px; font-weight: 600; }
.swipe-row { position: relative; background: var(--bg); padding: 12px 20px; display: flex; flex-direction: column; gap: 6px; touch-action: pan-y; user-select: none; cursor: grab;
  transition: transform .35s cubic-bezier(.2,.9,.3,1.2); }
.swipe-row.flagged { background: var(--warn-row); }
:root[data-theme="dark"] .swipe-row { background: var(--surface-2); }
:root[data-theme="dark"] .swipe-row.flagged { background: var(--warn-row); }
.swipe-row.dragging { transition: none; }
/* Fade the contents, not the row: a see-through row would show the swipe labels underneath. */
.swipe-row.excluded > * { opacity: .45; }
.flag-inline { display: flex; align-items: center; gap: 10px; background: var(--warn-bg); border-radius: 12px; padding: 8px 10px; margin-left: 48px; }
.bang { width: 18px; height: 18px; border-radius: 50%; background: var(--coral); color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex: none; }

/* detail */
.paper { background: var(--surface); color: var(--ink); border-radius: 22px; padding: 6px 16px 16px; display: flex; flex-direction: column; }
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.kv > span:first-child { color: var(--muted); flex: none; }
.kv > span:last-child { font-weight: 500; text-align: right; }
.flag-box { background: var(--warn-bg); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.flag-box .title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--warn-fg); }
.toggle { width: 42px; height: 26px; border-radius: 13px; background: var(--pill); position: relative; transition: background .2s; flex: none; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.toggle.on { background: var(--teal2); } .toggle.on::after { transform: translateX(16px); }

/* issues */
.issue { text-align: left; border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 6px; color: var(--ink); width: 100%; }
.issue.warn { background: var(--warn-bg); border: 1px solid var(--warn-line); }
.issue.new { background: var(--ok-bg); border: 1px solid var(--ok-line); }
.issue.plain { background: var(--surface); border: 1px solid var(--line); }
.issue .t { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.issue .g { width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.issue .b { font-size: 13px; color: var(--warn-body); line-height: 1.45; }
.issue .cta { align-self: flex-end; font-size: 13px; font-weight: 500; }
.all-clear { background: var(--ok-bg); border: 1px solid var(--ok-line); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 4px; }

/* gap fix */
.gap-tl { background: var(--feature-bg); color: var(--ink); border-radius: 22px; padding: 18px; display: grid; grid-template-columns: 22px 1fr; column-gap: 14px; }
.radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--pill); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.radio.on { border-color: var(--inverse-bg); } .radio.on::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--inverse-bg); }

/* forms */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.field input, .field select, .field textarea, .c-input, .input { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; color: var(--ink); font-size: 16px; outline: none; width: 100%; }
textarea { resize: none; line-height: 1.45; }
.big-amount { background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); font-family: var(--serif); font-weight: 500; font-size: 56px; padding: 4px 0; outline: none; width: 100%; }
.bubble { align-self: flex-start; max-width: 86%; background: var(--bubble); color: var(--ink); border-radius: 20px 20px 20px 6px; padding: 13px 15px; font-size: 14px; line-height: 1.45; word-break: break-word; }
.paste-box { min-height: 104px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px 20px 20px 6px; padding: 14px 16px; color: var(--ink); font-size: 16px; outline: none; width: 100%; }
.err { background: var(--warn-bg); color: var(--warn-body); border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.mono { font-family: var(--mono); font-size: 12px; word-break: break-all; }
.token { font-family: var(--mono); font-size: 13px; word-break: break-all; user-select: all; background: var(--bg); border-radius: 10px; padding: 10px; }

/* settings glyph */
.glyph { width: 34px; height: 34px; border-radius: 12px; background: #0e1c1f; color: var(--teal); display: flex; align-items: center; justify-content: center; flex: none; }

/* pipeline */
.pipe { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; }
.pipe .rail { display: flex; flex-direction: column; align-items: center; }
.pipe .rail i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 3px; }
.pipe .rail b { flex: 1; width: 2px; background: var(--accent); }
.status-pill { font-size: 12px; font-weight: 600; border-radius: 99px; padding: 2px 8px; }

/* ---------- bottom nav ---------- */
nav.tabs { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; height: calc(80px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(5, 1fr); padding: 10px 12px env(safe-area-inset-bottom); z-index: 6; border-top: 1px solid; }
nav.tabs { background: var(--bg); border-color: var(--nav-line); }
nav.tabs a { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 4px 0; text-decoration: none; }
nav.tabs a { color: var(--nav-off); }
nav.tabs a.on { color: var(--ink); }
.ico { height: 22px; display: flex; align-items: center; justify-content: center; }
/* the raised "+" in the middle of the tab bar; its ring matches the bar so it looks cut out of it */
nav.tabs a.tab-add { justify-self: center; align-self: start; width: 56px; height: 56px; margin-top: -30px; padding: 0; gap: 0;
  border-radius: 50%; background: var(--teal); color: var(--on-teal); border: 4px solid var(--add-ring); justify-content: center;
  font-size: 30px; font-weight: 400; line-height: 1; box-shadow: var(--add-shadow); transition: transform .12s ease; }
/* light: a cream ring with a soft shadow. dark: the same idea in the dark palette, a blue-green ring a step
   lighter than the bar and a deeper shadow (plus a faint teal glow, since a dark shadow barely shows on dark) */
nav.tabs a.tab-add span { margin-top: -2px; }
nav.tabs a.tab-add:active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) { nav.tabs a.tab-add:active { transform: none; } }
/* the profile button (your initial) in the Home and Insights headers */
.avatar { width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal2); color: #f5f0e6; font-size: 14px; font-weight: 600; flex: none; }

/* loading skeleton */
.skel { border-radius: 14px; background: var(--surface-2); animation: skel 1.2s ease-in-out infinite; }
@keyframes skel { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* toast */
#toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(104px + env(safe-area-inset-bottom)); width: calc(100% - 40px); max-width: 440px;
  background: var(--inverse-bg); color: var(--inverse-fg); border: 0; border-radius: 16px; padding: 12px 16px; font-size: 13px; font-weight: 500; text-align: center; z-index: 8; box-shadow: 0 8px 24px rgba(0,0,0,.18); }

#toast .toast-act { background: none; border: 0; color: var(--teal); font-weight: 600; font-size: 14px; margin-left: 12px; min-height: 44px; padding: 0 8px; vertical-align: middle; }

/* bottom sheets (budget, confirmations, account picker) */
.sheet-wrap { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(6,14,16,.55); border: 0; padding: 0; }
.sheet-panel { position: relative; width: 100%; max-width: 480px; background: var(--bg); color: var(--ink); border-radius: 28px 28px 0 0;
  padding: 10px 20px calc(34px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; max-height: 90vh; overflow-y: auto; }
.sheet-handle { align-self: center; width: 38px; height: 5px; border-radius: 3px; background: var(--pill); }
.sheet-wrap.opening .sheet-scrim { animation: sk-fade .2s ease-out; }
.sheet-wrap.opening .sheet-panel { animation: sk-rise .26s cubic-bezier(.2,.9,.3,1); }
@keyframes sk-fade { from { opacity: 0; } }
@keyframes sk-rise { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .sheet-wrap.opening .sheet-scrim, .sheet-wrap.opening .sheet-panel { animation: none; } }
.sheet-panel button:disabled { opacity: .6; }

.loading { padding: 80px 20px; text-align: center; color: var(--muted); }

/* The in/out S (logo 3a): money in (teal half-moon) above money out (coral half-moon). --s = one half-moon's width. */
.logo-mark { --s: 19px; display: grid; grid-template-columns: var(--s) var(--s); grid-template-rows: calc(var(--s) * 2) calc(var(--s) * 2); flex: none; }
.logo-mark i:first-child { background: #5fd8d0; border-radius: calc(var(--s) * 2) 0 0 calc(var(--s) * 2); }
.logo-mark i:last-child { grid-column: 2; grid-row: 2; background: #ff8a6b; border-radius: 0 calc(var(--s) * 2) calc(var(--s) * 2) 0; }
/* Loading: plain CSS, so it moves even while the app's scripts are still on their way from a waking server.
   The two halves breathe in and out (money in, money out) and a thin bar runs underneath. */
.splash { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 0 32px; }
.splash .logo-mark i { animation: sk-breathe 1.6s ease-in-out infinite; }
.splash .logo-mark i:first-child { --dy: 6px; }
.splash .logo-mark i:last-child { --dy: -6px; animation-delay: -.8s; }
@keyframes sk-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--dy)); } }
.splash-bar { position: relative; width: 72px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.splash-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 2px; background: var(--teal);
  animation: sk-run 1.2s ease-in-out infinite; }
@keyframes sk-run { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) {
  .splash .logo-mark i { animation: none; }
  .splash-bar::after { animation: sk-pulse 1.6s ease-in-out infinite; width: 100%; transform: none; }
  @keyframes sk-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
}

/* Tap targets: every control is at least 44 x 44 to the finger, whatever it looks like. Small ones keep their look
   and get an invisible larger hit area around them. */
.chip, .seg button, .link-btn, .back, .toggle, .list-btn, [data-act="pairFor"], [data-act="trendLine"] { position: relative; }
.chip::after, .seg button::after, .link-btn::after, .back::after { content: ""; position: absolute; left: -4px; right: -4px;
  top: 50%; height: 44px; transform: translateY(-50%); }
.seg button { min-height: 36px; }
.chip { min-height: 32px; }

/* The statement (Plans → Make a statement) prints as a plain document: no tabs, buttons or date pickers. */
@media print {
  nav.tabs, .no-print, #toast, .sheet-wrap { display: none !important; }
  html, body, main, .pad16 { background: #fff !important; color: #000 !important; }
  .statement { border: 0 !important; box-shadow: none !important; padding: 0 !important; }
  .statement table { page-break-inside: auto; } .statement tr { page-break-inside: avoid; }
}