/* Steward — household budget. Light/dark via prefers-color-scheme.
   Every text/background pair below is ≥4.5:1 (WCAG AA) in both themes;
   field borders are ≥3:1 against the surface they sit on. With Increase
   Contrast on, --muted reaches ≥7:1 on page, surface and fill.
   Type is all rem (1rem = 16px on desktop) so it follows the iPhone's
   Text Size — see "Dynamic Type" at the end. Nothing renders under 11px. */
:root {
  color-scheme: light;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --page: #f2f2f7;
  --surface: #ffffff;
  --fill: #e5e5ea;          /* bar tracks, avatars, hover */
  --ink: #1c1c1e;
  --ink-2: #3a3a3c;
  --muted: #636366;         /* 6.0:1 on surface, 5.4:1 on page */
  --separator: #d8d8dd;
  --field-border: #8e8e93;  /* 3.3:1 on surface */
  --border: rgba(0, 0, 0, 0.08);
  --accent: #0a5fc2;        /* text + links: 6.1:1 */
  --accent-fill: #0a5fc2;   /* button fill: white text 6.1:1 */
  --on-accent: #ffffff;
  --critical: #b42318;
  --critical-fill: #b42318;
  --good: #1b7a35;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --grid: #e5e5ea;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.02);
  --radius: 14px;
  --tabbar-h: 58px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #000000;
    --surface: #1c1c1e;
    --fill: #2c2c2e;
    --ink: #f5f5f7;
    --ink-2: #d1d1d6;
    --muted: #a1a1a6;
    --separator: #38383a;
    --field-border: #7c7c80;
    --border: rgba(255, 255, 255, 0.10);
    --accent: #4da3ff;
    --accent-fill: #1f6fd1;   /* white text 4.9:1 */
    --critical: #ff6b6b;
    --critical-fill: #c42b1c;
    --good: #34c759;
    --series-1: #3987e5;
    --series-2: #d95926;
    --grid: #2c2c2e;
    --shadow: none;
  }
}
/* Increase Contrast (Settings → Accessibility → Display & Text Size): the
   quiet inks reach ≥7:1 on page, surface and fill; separators and field
   borders darken so rows and fields stay distinct. */
@media (prefers-contrast: more) {
  :root {
    --muted: #48484a;         /* 9.1:1 on surface, 8.2:1 on page, 7.3:1 on fill */
    --separator: #a1a1a6;
    --field-border: #6c6c70;
    --border: rgba(0, 0, 0, 0.22);
    --grid: #c7c7cc;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --muted: #bcbcc0;         /* 9.0:1 on surface, 11.1:1 on page, 7.4:1 on fill */
    --separator: #636366;
    --field-border: #a1a1a6;
    --border: rgba(255, 255, 255, 0.24);
    --grid: #48484a;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font: 0.9375rem/1.45 var(--font);
  background: var(--page);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 12px; top: -80px; z-index: 100; min-height: 44px; padding: 10px 16px;
  background: var(--accent-fill); color: var(--on-accent); border: none; border-radius: 10px; font-weight: 600;
}
.skip-link:focus { top: calc(12px + env(safe-area-inset-top)); }

.layout { display: flex; min-height: 100vh; }

/* ---- sidebar / tab bar ---- */
.sidebar {
  width: 220px; flex-shrink: 0; padding: 20px 12px;
  border-right: 1px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.1875rem; padding: 4px 10px 18px; }
.nav-link {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 8px 12px; border-radius: 10px; text-decoration: none;
  color: var(--ink-2); font-weight: 500;
}
/* Children never intercept taps: the link itself is the hit target. */
.nav-link > * { pointer-events: none; }
.nav-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-link:hover { background: var(--fill); color: var(--ink); }
.nav-link.active { background: var(--accent-fill); color: var(--on-accent); }
.sidebar .spacer { flex: 1; }
.whoami { padding: 8px 12px; font-size: 0.8125rem; color: var(--muted); }
.whoami .link-btn { color: var(--ink-2); }

.main { flex: 1; padding: 28px 36px 60px; max-width: 1100px; min-width: 0; }
.main:focus { outline: none; }

h1 { font-size: 1.75rem; line-height: 1.15; margin: 0 0 4px; letter-spacing: -0.02em; font-weight: 700; }
h2 { font-size: 1.25rem; margin: 28px 0 10px; letter-spacing: -0.01em; }
.card h2, .card-title { margin: 0 0 12px; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.sub { color: var(--muted); margin: 0 0 18px; font-size: 0.9375rem; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---- cards, tiles ---- */
.card {
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: var(--radius); padding: 14px 16px; }
.tile .label { font-size: 0.875rem; color: var(--muted); font-weight: 500; }
.tile .value { font-size: 1.5rem; font-weight: 700; margin-top: 2px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tile .delta { font-size: 0.875rem; color: var(--muted); margin-top: 2px; }

/* The one number: what's left of this month's spending plan. */
.hero { padding: 18px 20px; }
.hero-label { font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); }
.hero-value { font-size: 2.125rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
.hero-value.over { color: var(--critical); }
.hero-sub { font-size: 0.9375rem; color: var(--muted); }
.hero .budget-bar { margin-top: 12px; height: 8px; border-radius: 4px; }
.hero-empty { margin: 8px 0 0; color: var(--ink-2); }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 0.8125rem; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--separator); }
td { padding: 8px; border-bottom: 1px solid var(--separator); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
td.num, th.num, .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--good); }
.muted { color: var(--muted); }
.small { font-size: 0.8125rem; }
.neg, .over-text { color: var(--critical); }

/* ---- forms ---- */
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="search"],
input[type="number"], input[type="month"], input[type="file"], input:not([type]), select, textarea {
  background: var(--surface); border: 1px solid var(--field-border); border-radius: 10px;
  padding: 8px 11px; width: 100%; min-height: 40px;
  /* Never under 16px: iOS zooms the page on focusing a smaller field. */
  font-size: max(16px, 1rem);
}
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; border-color: transparent; }
/* Date/month fields focus an inner segment, so :focus-visible never matches the field itself. */
input[type="date"]:focus, input[type="month"]:focus, input[type="date"]:focus-within, input[type="month"]:focus-within { outline: 3px solid var(--accent); outline-offset: 0; border-color: transparent; }
label, .field-label { display: block; font-size: 0.875rem; color: var(--ink-2); margin: 12px 0 5px; font-weight: 500; }
.hint { font-size: 0.8125rem; color: var(--muted); margin: 4px 0 0; }
fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--accent-fill); color: var(--on-accent); border: 1px solid transparent; border-radius: 10px;
  min-height: 40px; padding: 8px 16px; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.2;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:hover { filter: brightness(1.08); }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--field-border); }
.btn.secondary:hover { background: var(--fill); filter: none; }
.btn.ghost { background: transparent; color: var(--ink-2); border-color: transparent; padding: 6px 10px; }
.btn.ghost:hover { color: var(--ink); background: var(--fill); filter: none; }
.btn.danger { background: var(--critical-fill); color: #fff; }
.btn.danger-text { background: transparent; color: var(--critical); border-color: var(--field-border); }
.btn.danger-text:hover { background: var(--fill); filter: none; }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: 0.875rem; }
.btn.block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: default; filter: none; }
.link-btn { background: none; border: none; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; }
.btn-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); text-decoration: none; font-weight: 600; }
.btn-link:hover { text-decoration: underline; }

/* A total you can click through to the transactions behind it. */
.amount-link {
  background: none; border: none; padding: 0; font: inherit; color: inherit; text-align: inherit;
  cursor: pointer; border-bottom: 1px dashed transparent; min-height: 32px;
}
.amount-link:hover { border-bottom-color: var(--muted); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row > * { width: auto; }
.right { margin-left: auto; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }

/* Checkbox rows: the whole label is the tap target. */
.check { display: flex; align-items: center; gap: 10px; margin: 0; min-height: 40px; cursor: pointer; color: var(--ink); font-weight: 400; }
.check input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--accent-fill); }

/* Segmented control (Spent | Received): buttons with role="radio", so the
   focusable element is the visible segment itself. */
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--fill); border-radius: 10px; padding: 3px; gap: 3px; width: 100%; margin-top: 12px; }
.seg [role="radio"] { margin: 0; display: flex; align-items: center; justify-content: center; min-height: 40px; border: none; border-radius: 8px; background: transparent; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.seg [role="radio"][aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.seg [role="radio"]:disabled { cursor: default; }

/* ---- auth ---- */
.auth-wrap { display: grid; place-items: center; min-height: 100vh; padding: 20px 16px; padding-top: calc(20px + env(safe-area-inset-top)); }
.auth-card { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 28px 24px; }
.auth-card .brand { justify-content: center; font-size: 1.5rem; padding-bottom: 8px; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 76px; }
.pw-toggle { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
.form-error { color: var(--critical); font-weight: 500; margin: 10px 0 0; }

/* ---- budget ---- */
.month-nav { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.month-nav .title { font-size: 1.25rem; font-weight: 700; min-width: 180px; text-align: center; letter-spacing: -0.01em; }
.icon-btn { min-width: 44px; min-height: 44px; padding: 0; font-size: 1.25rem; }
.group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--separator); }
.group-head .name { font-weight: 700; font-size: 1.0625rem; margin: 0; }
.group-head .stat { color: var(--muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; text-align: right; }
.budget-bar { display: flex; height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; min-width: 80px; }
.budget-bar > div { flex: 0 0 auto; height: 100%; background: var(--series-1); }
.budget-bar > div.over { background: var(--critical); }
.budget-bar > div.pending { background: var(--series-1); opacity: 0.35; }
.b-row {
  display: grid; align-items: center; gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--separator);
  grid-template-columns: minmax(120px, 1.4fr) 128px minmax(110px, 1fr) minmax(90px, 1fr) minmax(130px, 1fr);
  grid-template-areas: "name input spent bar left" "pace pace pace pace pace" "msg msg msg msg msg";
}
.b-row:last-child { border-bottom: none; }
.b-cells { display: contents; }
.b-name { grid-area: name; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.b-input-wrap { grid-area: input; position: relative; }
.b-spent { grid-area: spent; text-align: right; font-variant-numeric: tabular-nums; }
.b-bar { grid-area: bar; }
.b-left { grid-area: left; text-align: right; font-variant-numeric: tabular-nums; }
.b-msg { grid-area: msg; }
.b-msg:empty { display: none; }
/* Pace (2.0.0): ahead or behind the usual pace, under each spending row. */
.b-pace { grid-area: pace; font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.b-pace:empty { display: none; }
/* At risk this month: every category projected over budget, top of Budget. */
.at-risk-list { list-style: none; margin: 0; padding: 0; }
.at-risk-list li + li { border-top: 1px solid var(--separator); }
.at-risk-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px;
  padding: 8px 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; min-width: 0;
}
.at-risk-item .ar-name { font-weight: 600; overflow-wrap: anywhere; }
.at-risk-item .ar-detail { font-size: 0.8125rem; color: var(--critical); font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.b-sub { display: block; font-size: 0.8125rem; color: var(--muted); }
.budget-input {
  width: 100%; text-align: right; font-variant-numeric: tabular-nums;
  padding: 6px 10px; border: 1px solid var(--field-border); border-radius: 10px; background: var(--surface);
}
.b-row.unsaved .budget-input { border: 2px solid var(--critical); }
/* "✓ Saved" sits just left of the field it confirms, then fades out. */
.b-save { position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  font-size: 0.8125rem; font-weight: 600; color: var(--good); white-space: nowrap; background: var(--surface); padding-left: 4px; }
.b-save:empty { display: none; }
.inline-error { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--critical); font-weight: 500; padding: 6px 0 0; }
.inline-error p { margin: 0; flex: 1 1 220px; }
.over-text { font-weight: 600; }
.unused-toggle { margin: 4px 0 16px; }
.tag { display: inline-block; font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); background: var(--fill); border-radius: 99px; padding: 1px 9px; margin-left: 6px; white-space: nowrap; }

/* ---- dashboard ---- */
.sync-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); margin: -8px 0 14px; }
.sync-row time { color: var(--ink-2); }
.cat-lines { display: flex; flex-direction: column; }
.cat-line {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; text-align: left;
  width: 100%; min-height: 56px; padding: 10px 0; background: none; border: none; border-bottom: 1px solid var(--separator); cursor: pointer; color: inherit;
}
.cat-line:last-child { border-bottom: none; }
.cat-line .cl-name { font-weight: 500; }
.cat-line .cl-amt { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cat-line .budget-bar { grid-column: 1 / -1; }
.cat-line .cl-sub { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--muted); margin-top: -2px; }
.txn-mini { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; align-items: center; width: 100%; min-height: 52px;
  padding: 8px 0; background: none; border: none; border-bottom: 1px solid var(--separator); text-align: left; cursor: pointer; color: inherit; }
.txn-mini:last-child { border-bottom: none; }
.txn-mini .tm-date { color: var(--muted); font-size: 0.875rem; min-width: 52px; }
.txn-mini .tm-cat { grid-column: 2; font-size: 0.8125rem; color: var(--muted); }

/* ---- charts ---- */
.chart { position: relative; min-height: 40px; }
.chart svg { display: block; width: 100%; height: auto; }
.legend { display: flex; gap: 16px; font-size: 0.875rem; color: var(--ink-2); margin: 2px 0 10px; }
.legend .key { display: inline-flex; align-items: center; gap: 6px; }
.legend .swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
#tooltip {
  position: fixed; pointer-events: none; z-index: 50; display: none;
  background: var(--ink); color: var(--page); border-radius: 8px;
  padding: 6px 10px; font-size: 0.875rem; max-width: 260px;
}
#tooltip .t-title { font-weight: 600; }
.hbar-row { display: grid; grid-template-columns: minmax(110px, 200px) 1fr auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--separator); }
.hbar-row:last-child { border-bottom: none; }
.hbar-row .share { color: var(--muted); min-width: 40px; text-align: right; }

/* ---- transactions ---- */
.search-row { margin-bottom: 8px; }
.search-row input { min-height: 44px; }
.scope { display: inline-flex; gap: 4px; background: var(--fill); padding: 3px; border-radius: 10px; margin-bottom: 10px; }
.scope button { border: none; background: transparent; border-radius: 8px; padding: 6px 14px; min-height: 38px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.scope button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.filter-panel > summary { display: none; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.filters label:not(.check) { margin: 0; font-size: 0.8125rem; }
.filters label:not(.check) > input, .filters label:not(.check) > select { margin-top: 4px; width: auto; min-width: 150px; }
.txn-table select { padding: 5px 8px; max-width: 200px; min-height: 36px; }
.txn-table .pending-amt { font-style: italic; }
.pill { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: 0.8125rem; border: 1px solid var(--field-border); color: var(--ink-2); white-space: nowrap; font-weight: 500; }
.txn-row { cursor: pointer; }
.txn-row:hover td { background: color-mix(in srgb, var(--fill) 45%, transparent); }
/* Row actions stay visible (no hover-only controls) but recede in color. */
.txn-table .row-act { color: var(--muted); }
.txn-table tr:hover .row-act, .txn-table .row-act:focus-visible { color: var(--ink); }
.c-check { width: 40px; }
/* Day headers in the transaction list: Today, Yesterday, Mon Oct 3. */
.txn-table tr.date-head td { padding: 14px 0 6px; font-size: 0.875rem; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--separator); background: none; }
.txn-table tbody tr.date-head:first-child td { padding-top: 4px; }
.phone-only { display: none; }
.bulk-bar { margin-bottom: 10px; }
.check-hit { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; cursor: pointer; }
.check-hit input { width: 18px; height: 18px; margin: 0; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--fill);
  color: var(--ink-2); display: grid; place-items: center;
  font-size: max(11px, 0.75rem); font-weight: 700; letter-spacing: 0.02em; flex-shrink: 0;
}
.payee-cell { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.payee-btn { background: none; border: none; padding: 0; text-align: left; cursor: pointer; font-weight: 500; color: inherit; min-width: 44px; }
.payee-meta { display: block; font-size: 0.8125rem; color: var(--muted); }
.list-status { padding: 24px 0; text-align: center; color: var(--muted); }
.pager { display: flex; gap: 8px; margin-top: 10px; }

/* ---- splits ---- */
.split-mark { color: var(--accent); font-weight: 700; }
.split-toggle { color: var(--ink-2); border: 1px dashed var(--field-border) !important; }
.txn-table tr.split-lines td { padding-top: 0; }
.split-list { border-left: 2px solid var(--separator); padding: 2px 0 2px 12px; margin-bottom: 4px; }
.split-line { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; gap: 10px; align-items: baseline; padding: 3px 0; font-size: 0.875rem; }
.split-row {
  display: grid; grid-template-columns: minmax(0, 1.3fr) 120px minmax(0, 1.3fr) 44px;
  gap: 8px; align-items: center; margin-bottom: 10px;
}
.split-row select, .split-row input { width: 100%; }
.split-row .s-amt { text-align: right; font-variant-numeric: tabular-nums; }
.split-status { font-weight: 600; }
.trash-btn { min-width: 44px; min-height: 44px; padding: 0; }
.trash-btn svg { width: 18px; height: 18px; }

/* ---- accounts ---- */
.acct-row { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--separator); }
.acct-row:last-child { border-bottom: none; }
.acct-row .a-balance { font-variant-numeric: tabular-nums; font-weight: 600; }
.acct-actions { display: flex; gap: 4px; }
.conn-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px 0; }
details > summary { cursor: pointer; }
details.archived > summary { display: flex; align-items: center; min-height: 44px; color: var(--ink-2); font-weight: 500; }

/* ---- rules / settings ---- */
.rule-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--separator); }
.rule-row:last-child { border-bottom: none; }
.rule-row code { font-size: 0.95em; background: var(--fill); padding: 1px 6px; border-radius: 6px; }
.rule-form { display: grid; grid-template-columns: 2fr 1.3fr 1.6fr 1.6fr auto; gap: 10px; align-items: end; }
.rule-form label { margin: 0 0 5px; }
.cat-row { display: grid; grid-template-columns: 1fr auto auto; grid-auto-flow: column; gap: 4px 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--separator); }
.cat-row:last-child { border-bottom: none; }
.cat-row.is-archived .cat-name { color: var(--muted); }
.cat-actions { display: flex; gap: 4px; }
.member-row { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--separator); }
.member-row:last-child { border-bottom: none; }
details.adder { margin-top: 10px; }
details.adder > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 600; }
.more-list { display: flex; flex-direction: column; padding: 4px 18px; }
.more-list a, .more-list button {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; border: none; background: none;
  border-bottom: 1px solid var(--separator); color: var(--ink); text-decoration: none; font-weight: 500; text-align: left; cursor: pointer; width: 100%;
}
.more-list > :last-child { border-bottom: none; }
.more-list svg { width: 20px; height: 20px; color: var(--accent); }
.more-list .chev { margin-left: auto; color: var(--muted); }

/* ---- feedback ---- */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 60; max-width: min(460px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--page); padding: 8px 8px 8px 16px; border-radius: 12px; min-height: 52px;
  font-size: 0.9375rem; box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.toast span { flex: 1; padding: 6px 0; }
.toast.error { background: var(--critical-fill); color: #fff; }
.toast-action { background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 9px; min-height: 40px; min-width: 64px; padding: 6px 12px; font-weight: 700; cursor: pointer; }
.empty { color: var(--muted); text-align: center; padding: 28px 0; }
.get-started { text-align: center; padding: 26px 20px; }
.get-started p { color: var(--ink-2); margin: 6px 0 16px; }
.error-card { text-align: center; padding: 30px 20px; }
.error-card p { margin: 0 0 14px; color: var(--ink-2); }
.skeleton { display: grid; gap: 12px; }
.skeleton div { height: 92px; border-radius: var(--radius); background: var(--fill); animation: pulse 1.2s ease-in-out infinite alternate; }
.skeleton div:first-child { height: 130px; }
@keyframes pulse { from { opacity: 0.55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .skeleton div { animation: none; } }

dialog {
  background: var(--surface); color: var(--ink); border: 1px solid var(--border);
  border-radius: 18px; padding: 22px; width: 460px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
}
dialog h2 { margin: 0 0 6px; font-size: 1.25rem; }
dialog h2:focus { outline: none; }
dialog::backdrop { background: rgba(0,0,0,0.45); }
.split-dialog { width: 640px; }
.sheet-msg { color: var(--ink-2); margin: 6px 0 18px; }
.sheet-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.sheet-actions.stack { flex-direction: column; }
.sheet-actions.stack .btn { width: 100%; }
.sheet-extra { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--separator); }
.static-field { padding: 8px 0; margin: 0; }
.scroll-box { max-height: 300px; overflow-y: auto; margin: 10px 0; }

/* ---- ask (2.0.0): the conversation, change cards with Undo ---- */
.ask-log { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.ask-log:empty { display: none; }
.ask-turn { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ask-q {
  align-self: flex-end; max-width: 88%; margin: 0; padding: 10px 14px; border-radius: 16px 16px 4px 16px;
  background: var(--accent-fill); color: var(--on-accent); overflow-wrap: anywhere; white-space: pre-wrap;
}
.ask-a { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ask-a p { margin: 0 0 10px; }
.ask-a p:last-child { margin-bottom: 0; }
.ask-thinking { color: var(--muted); }
/* Paused, not set up, unavailable: said calmly, never as an error. */
.ask-notice { background: var(--fill); color: var(--ink); border-radius: 10px; padding: 10px 12px; }
.ask-tags { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ask-tag { font-size: 0.8125rem; color: var(--ink-2); border: 1px solid var(--field-border); border-radius: 10px; padding: 2px 9px; min-width: 0; }
.ask-changes-h { margin: 14px 0 8px; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.ask-changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.change-card { border: 1px solid var(--separator); border-radius: 12px; padding: 12px 14px; background: var(--surface); min-width: 0; }
.change-card p { margin: 0; }
.cc-kind { font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.cc-title { font-weight: 600; margin: 2px 0 6px !important; }
.cc-diff { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.cc-before { color: var(--ink-2); }
.cc-arrow { color: var(--muted); }
.cc-after { color: var(--ink); font-weight: 600; }
.change-card.undone .cc-after { font-weight: 400; color: var(--ink-2); }
.cc-foot { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 10px; }
.cc-foot .undo-btn { min-height: 44px; min-width: 64px; }
.cc-status { font-size: 0.875rem; color: var(--ink-2); flex: 1 1 160px; min-width: 0; }
.cc-status:empty { display: none; }
.cc-status.refused { color: var(--critical); font-weight: 500; }
.cc-status:focus { outline: none; }
.ask-form textarea { min-height: 88px; }
.ask-form .field-label { margin-top: 0; }
#ask-err:empty { display: none; }
.ask-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ask-actions .btn { min-height: 44px; min-width: 64px; }
.ask-actions [hidden] { display: none; }

/* ---- phone: bottom tab bar, 17px type (1rem on iPhone) ---- */
@media (max-width: 800px) {
  /* The tab bar grows with Text Size, so the space kept clear for it does too
     (58px at the default size). */
  :root { --tabbar-h: calc(26px + 2rem); }
  body { font-size: 1rem; }
  .layout { flex-direction: column; }
  .main { padding: calc(16px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); max-width: none; }
  .sidebar {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto; width: auto; height: auto;
    flex-direction: row; justify-content: space-around; gap: 0;
    padding: 4px max(4px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    background: var(--surface); border-top: 1px solid var(--border); border-right: none;
    z-index: 40;
  }
  .sidebar .brand, .whoami, .sidebar .spacer { display: none; }
  /* min-width 0 + wrapping labels: at 320 px and 200% text the five tabs
     share the width instead of pushing the page sideways (1.4.10). */
  .nav-link { flex-direction: column; gap: 2px; padding: 4px 2px; flex: 1 1 0; min-width: 0; align-items: center; justify-content: center; min-height: 50px; border-radius: 8px; }
  .nav-link .nav-label { font-size: max(11px, 0.6471rem); font-weight: 600; line-height: 1.15; text-align: center; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
  .nav-link svg { width: 24px; height: 24px; }
  .nav-link.active { background: transparent; color: var(--accent); }
  .nav-link:hover { background: transparent; }

  h1 { font-size: 1.7647rem; }
  .sub, .hero-sub, .tile .delta, .group-head .stat, .hint, .small, .b-sub, .payee-meta, .cat-line .cl-sub, .tag, .pill, .txn-mini .tm-cat { font-size: 0.8824rem; }
  .tile .label { font-size: 0.8824rem; }
  .grid2 { grid-template-columns: 1fr; }
  /* Two tiles a row, or one when large text makes two too narrow (1.4.10). */
  .tiles, .tiles.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: 10px; }
  .tiles .tile.wide { grid-column: 1 / -1; }
  .tile .value { font-size: 1.2941rem; }
  .card { padding: 14px 16px; }

  .btn, .btn.small, .scope button { font-size: 1rem; }
  label, .field-label { font-size: 0.8824rem; }

  .toast { left: 16px; right: 16px; max-width: none; bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); }

  .month-nav .title { min-width: 0; flex: 1; font-size: 1.1176rem; }
  .actions .btn { flex: 1 1 auto; }

  /* Budget rows: two lines — name + amount field, then progress and status. */
  .b-row {
    grid-template-columns: minmax(0, 1fr) 132px;
    grid-template-areas: "name input" "bar bar" "spent left" "pace pace" "msg msg";
    gap: 6px 12px; padding: 12px 0;
  }
  .b-name { font-size: 1rem; }
  .b-spent { text-align: left; }
  .b-bar:empty { display: none; }
  .b-pace, .at-risk-item .ar-detail { font-size: 0.8824rem; }

  /* Filters fold away behind a disclosure on a phone. */
  .filter-panel > summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--accent); list-style: none; }
  .filter-panel > summary::-webkit-details-marker { display: none; }
  .filters { flex-direction: column; align-items: stretch; }
  .filters label:not(.check) > input, .filters label:not(.check) > select { width: 100%; }
  .filters label:not(.check) { font-size: 0.8824rem; }

  .rule-form { grid-template-columns: 1fr; }
  .split-row { grid-template-columns: minmax(0, 1fr) 112px 44px; }
  .split-row .s-note { grid-column: 1 / -1; grid-row: 2; }
  .split-row .trash-btn { grid-column: 3; grid-row: 1; }

  .acct-row { grid-template-columns: 1fr auto; }
  .acct-actions { grid-column: 1 / -1; flex-wrap: wrap; }
  .cat-row { grid-template-columns: 1fr; }
  .cat-row { grid-auto-flow: row; }
  .cat-actions { flex-wrap: wrap; }
  /* Text-style buttons line up with the text above them. */
  .cat-actions .btn.ghost:first-child, .acct-actions .btn.ghost:first-child { margin-left: -10px; }
  .hbar-row { grid-template-columns: minmax(0, 1fr) auto; }
  .hbar-row .budget-bar { grid-column: 1 / -1; grid-row: 2; }
  .hbar-row .share { display: none; }

  dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 18px 18px 0 0; max-height: 92dvh;
    padding: 20px max(16px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .sheet-actions .btn { flex: 1 1 auto; }
}

@media (max-width: 640px) {
  /* Transactions become stacked rows: payee/amount on top, category/date below. */
  .txn-table thead, .txn-table .c-check, .txn-table .c-account, .txn-table .c-act { display: none; }
  .txn-table tr.date-head { display: block; }
  .txn-table tr.date-head td { display: block; }
  .phone-only { display: flex; justify-content: flex-end; margin: -4px 0 6px; }
  /* Select mode ("Edit"): a checkbox column appears; the bulk bar sticks to the top. */
  .bulk-bar { position: sticky; top: 0; z-index: 5; background: var(--surface); padding: 8px 0; }
  .bulk-bar select { flex: 1 1 160px; }
  .select-mode .txn-table tr.txn-row { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "check payee amount" "check cat cat"; }
  .select-mode .txn-table .c-check { display: block; grid-area: check; align-self: center; }
  .check-hit { width: 44px; height: 44px; }
  .check-hit input { width: 24px; height: 24px; }
  .txn-table tr.txn-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "payee amount" "cat cat";
    gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--separator); align-items: center;
  }
  .txn-table tbody tr.txn-row:last-child { border-bottom: none; }
  .txn-table tr.txn-row td { border: none; padding: 0; }
  .txn-table tr.txn-row:hover td { background: none; }
  .txn-table .c-payee { grid-area: payee; min-width: 0; }
  .txn-table .c-amount { grid-area: amount; font-size: 1rem; }
  .txn-table .c-cat { grid-area: cat; min-width: 0; }
  .txn-table .c-cat select, .txn-table .c-cat .split-toggle { margin-left: 42px; width: calc(100% - 42px); max-width: none; min-height: 44px; }
  .payee-btn { font-size: 1rem; min-height: 44px; overflow-wrap: anywhere; }
  .txn-table tr.split-lines { display: block; }
  .txn-table tr.split-lines td { display: block; padding: 0 0 8px 42px; border: none; }
  .txn-table tr.split-lines td:empty { display: none; }
}

/* ---- touch: 44×44 targets ----
   Pointer-coarse rather than a width query: an iPad or a phone in landscape
   still needs thumb-sized targets, and a narrow desktop window still has a
   mouse, so it keeps the compact sizes above. */
@media (pointer: coarse) {
  .btn, .btn.small, .scope button, .toast-action, .amount-link, .payee-btn,
  input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="search"],
  input[type="number"], input[type="month"], input[type="file"], input:not([type]), select, textarea,
  .budget-input, .txn-table select { min-height: 44px; }
  .btn.small { padding: 10px 14px; }
  .btn.ghost, .scope button { min-width: 44px; }
  .check { min-height: 44px; }
  .check input { width: 24px; height: 24px; }
  .check-hit { width: 44px; height: 44px; }
  .check-hit input { width: 24px; height: 24px; }
  .seg [role="radio"] { min-height: 44px; }
  .link-btn { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---- Dynamic Type ----
   Text follows the iPhone's Settings → Display & Brightness → Text Size:
   -apple-system-body carries that preference into the root (17px at the
   default size), and every size above is rem, so it all scales together.
   iOS only: on a Mac the same keyword is 13px and would shrink the whole
   app (-webkit-touch-callout exists only on iOS). */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
}