/* "Dark Green Tropical" palette: navy #13243B, dark green #153D35,
   green #1D8B65, teal #2C9D90, off-white #F3F3F1. Navy carries the chrome
   and text, green is the interactive accent, teal draws the balance line.
   Category colors for the stacked Trends charts are derived from this
   family and validated separately -- see CATEGORY_COLOR_SLOTS in
   services.py. --danger stays a true red: it's a status color. */
:root {
  color-scheme: light;
  --bg: #f3f3f1;
  --surface: #ffffff;
  --border: #dfe1dd;
  --text: #13243b;
  --muted: #5f6873;          /* 5.1:1 on --bg (AA) */
  --secondary: #3d4a5a;
  --navy: #13243b;
  --accent: #1d8b65;
  --accent-button: #177a59;  /* palette green, deepened so white text clears AA (5.3:1) */
  --accent-strong: #153d35;
  --link: #153d35;
  --chart-line: #2c9d90;
  --grid: #eceeea;
  --good: #1d8b65;
  --danger: #c93b3b;
  --expense: #b42f2f;        /* 6.2:1 on white */
  --income: #17795a;         /* 5.4:1 on white */
  --hover: rgba(19, 36, 59, 0.06);
  --banner-bg: #e6f2ee;
  --banner-border: #cfe5dc;
  --banner-text: #153d35;
  --error-bg: #fdf3f3;
  --error-border: rgba(201, 59, 59, 0.45);
  --error-text: #9f2a2a;
  --shadow: 0 4px 16px rgba(19, 36, 59, 0.12);
  /* Category colors for the stacked Trends charts (services.py emits
     var(--cat-N)); validated with the dataviz script on #ffffff. */
  --cat-1: #0d5c91; --cat-2: #2c9d90; --cat-3: #5c39b5; --cat-4: #77b30e;
  --cat-5: #0e78e4; --cat-6: #1d8b65; --cat-7: #9e8bf7; --cat-8: #4a620b;
  --radius: 10px;
  /* Brand + headlines: the platform serif (New York on Apple devices,
     Georgia elsewhere) -- classy without downloading a web font. */
  --font-display: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
}

/* Dark theme: used when the visitor picks it (data-theme="dark"), or when
   their system is dark and they haven't picked light. Same palette family,
   lightened where it sits on dark surfaces; every text pair re-checked
   for AA, and the category colors re-validated on #172231. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1722;
  --surface: #172231;
  --border: #2a3a4f;
  --text: #e7ecf2;
  --muted: #95a3b3;          /* 6.2:1 on --surface */
  --secondary: #c2ccd8;
  --accent: #2a9d74;
  --accent-button: #177a59;
  --accent-strong: #0f5a43;
  --link: #6fd1aa;
  --chart-line: #46c2b2;
  --grid: #223044;
  --good: #5fd0a3;
  --danger: #f28b8b;
  --expense: #f28b8b;        /* 6.8:1 on --surface */
  --income: #5fd0a3;         /* 8.4:1 on --surface */
  --hover: rgba(255, 255, 255, 0.06);
  --banner-bg: #123129;
  --banner-border: #1d4a3d;
  --banner-text: #a8e3cc;
  --error-bg: #3a1d22;
  --error-border: #6b2f37;
  --error-text: #f6b1b1;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  --cat-1: #2777b3; --cat-2: #0fa99a; --cat-3: #8265e4; --cat-4: #6ea60b;
  --cat-5: #0a72da; --cat-6: #1d966d; --cat-7: #9480eb; --cat-8: #5f7a1f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1722;
    --surface: #172231;
    --border: #2a3a4f;
    --text: #e7ecf2;
    --muted: #95a3b3;          /* 6.2:1 on --surface */
    --secondary: #c2ccd8;
    --accent: #2a9d74;
    --accent-button: #177a59;
    --accent-strong: #0f5a43;
    --link: #6fd1aa;
    --chart-line: #46c2b2;
    --grid: #223044;
    --good: #5fd0a3;
    --danger: #f28b8b;
    --expense: #f28b8b;        /* 6.8:1 on --surface */
    --income: #5fd0a3;         /* 8.4:1 on --surface */
    --hover: rgba(255, 255, 255, 0.06);
    --banner-bg: #123129;
    --banner-border: #1d4a3d;
    --banner-text: #a8e3cc;
    --error-bg: #3a1d22;
    --error-border: #6b2f37;
    --error-text: #f6b1b1;
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    --cat-1: #2777b3; --cat-2: #0fa99a; --cat-3: #8265e4; --cat-4: #6ea60b;
    --cat-5: #0a72da; --cat-6: #1d966d; --cat-7: #9480eb; --cat-8: #5f7a1f;
  }
}


* { box-sizing: border-box; }

/* Links follow the theme (default browser blue/purple is unreadable on dark). */
a { color: var(--link); }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; color: #ffffff; }

.topbar nav a {
  margin-left: 18px;
  text-decoration: none;
  color: #b9c3cf;
  font-size: 14px;
}
.topbar nav a:hover, .topbar nav a.active { color: #ffffff; }
.topbar nav a.active { font-weight: 600; }

.container {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.stat-label {
  font-size: 12px;
  line-height: 1.4;
  /* Reserves 2 lines' height always, so a label that wraps (e.g. "6-mo
     avg monthly spend") doesn't push its value out of line with cards
     whose label fits on one line. */
  min-height: 2.8em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 6px;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.stat-value.negative { color: var(--danger); }
.stat-value.positive { color: var(--good); }

.stat-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Section label above a row of stat cards (e.g. "All spending" /
   "Living expenses") -- same visual weight as a table header. */
.row-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 8px; }

h2 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin: 28px 0 12px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); font-size: 14px; }
th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; }

.amount.expense { color: var(--danger); }
.amount.income { color: var(--good); }

/* Single-series magnitude bars (category breakdown): one sequential hue,
   thin track, 4px rounded data-ends, 2px surface gap between rows.
   Direct-labeled (category + amount as text) so no legend/hover is needed --
   values are legible at rest, not just on interaction. */
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.bar-label { width: 110px; flex-shrink: 0; color: var(--secondary); }
.bar-track { flex: 1; background: var(--border); border-radius: 4px; height: 8px; overflow: hidden; }
.bar-fill { background: var(--accent); height: 100%; border-radius: 4px; }
.bar-amount { width: 70px; text-align: right; flex-shrink: 0; color: var(--text); font-variant-numeric: tabular-nums; }

form.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: grid;
  gap: 14px;
  max-width: 480px;
}

label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 4px; }
/* One standard form control: every text box, number, date and dropdown
   is the same height and flat (browsers' native select styling ignores
   padding and adds a gradient, so selects are restyled with a drawn
   chevron). Checkboxes and radios keep their native look. */
input, select, textarea {
  background-color: var(--surface);
  color: var(--text);
  width: 100%;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  line-height: 1.3;
}
input, select { height: 44px; }
textarea { padding: 10px 12px; }
input[type="checkbox"], input[type="radio"] { width: auto; height: auto; padding: 0; }
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f6873' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
/* No up/down spinner on amount boxes -- they misalign the field and nudge values by accident. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--chart-line); outline-offset: 1px; }

button {
  background: var(--accent-button);
  color: #ffffff;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  width: fit-content;
}
button:hover { opacity: 0.9; }

.row { display: flex; flex-wrap: wrap; gap: 12px; }
/* Side by side when there's room, stacked on a phone. */
.row > * { flex: 1 1 180px; }

.empty { color: var(--muted); font-size: 14px; padding: 20px 0; }

.badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
}

.actions-col { text-align: right; }

/* Bank-sync alert card (see _sync_alerts.html). */
.capture-log { margin-bottom: 16px; }
.capture-log.ok { border-color: var(--good); }
.capture-log.mismatch { border-color: var(--danger); }

/* Small inline-table buttons (Edit, Mark received) -- same footprint
   whether it's a <button> or an <a>, so the two read as one family of
   row actions instead of a button next to a bare link. */
.btn-sm {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  width: auto;
  line-height: 1.6;
}
.btn-sm-accent { background: var(--accent-button); color: #ffffff; border: none; }
.btn-sm-accent:hover { opacity: 0.9; }
.btn-sm-outline { background: transparent; color: var(--secondary); border: 1px solid var(--border); }
.btn-sm-outline:hover { border-color: var(--muted); color: var(--text); }
.btn-sm-danger { background: transparent; color: var(--danger); border: 1px solid var(--error-border); }
.btn-sm-danger:hover { background: var(--error-bg); }

/* Toggles (Living/Total, Daily/Weekly/Monthly): CSS-only, no JS -- a
   hidden radio per option, and a `~` general-sibling rule per option
   hiding every panel that isn't its own. Radios and panels must stay
   flat siblings (same parent) for `~` to reach them. */
.toggle-input { display: none; }

/* Full-width segmented control: the hidden radios come first, then a
   .segmented row of their labels, then the panels -- all flat siblings,
   so `#radio:checked ~ ...` reaches both the label row (to highlight the
   chosen option) and the panels (to hide the others). */
.segmented {
  display: flex;
  width: 100%;
  margin: 0 0 12px;
  padding: 3px;
  gap: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.segmented label {
  flex: 1;
  margin: 0;
  padding: 7px 10px;
  text-align: center;
  font-size: 13px;
  color: var(--secondary);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
}
.segmented label:hover { background: var(--bg); }

#dash_living:checked ~ .segmented label[for="dash_living"],
#dash_total:checked ~ .segmented label[for="dash_total"],
#exp_living:checked ~ .segmented label[for="exp_living"],
#exp_total:checked ~ .segmented label[for="exp_total"],
#inc_living:checked ~ .segmented label[for="inc_living"],
#inc_total:checked ~ .segmented label[for="inc_total"],
#bal_day:checked ~ .segmented label[for="bal_day"],
#bal_week:checked ~ .segmented label[for="bal_week"],
#bal_month:checked ~ .segmented label[for="bal_month"] { background: var(--accent-button); color: #ffffff; }

#dash_living:checked ~ [data-for="dash_total"],
#dash_total:checked ~ [data-for="dash_living"],
#exp_living:checked ~ [data-for="exp_total"],
#exp_total:checked ~ [data-for="exp_living"],
#inc_living:checked ~ [data-for="inc_total"],
#inc_total:checked ~ [data-for="inc_living"],
#bal_day:checked ~ [data-for="bal_week"],
#bal_day:checked ~ [data-for="bal_month"],
#bal_week:checked ~ [data-for="bal_day"],
#bal_week:checked ~ [data-for="bal_month"],
#bal_month:checked ~ [data-for="bal_day"],
#bal_month:checked ~ [data-for="bal_week"] { display: none; }

/* Trends */
.filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 8px; }
.filter-row > div { min-width: 160px; flex: 1; }
.filter-row label { margin-bottom: 4px; }

/* Charts drawn by app/static/charts.js. Axes and grid stay recessive;
   text uses ink tokens, never a series color. */
.chart-card { margin-bottom: 8px; }
.chart { position: relative; width: 100%; min-height: 260px; }
.chart-svg { display: block; overflow: visible; }
.chart-svg .grid { stroke: var(--grid); stroke-width: 1; }
.chart-svg .axis-base { stroke: var(--border); stroke-width: 1; }
.chart-svg .axis-label { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-svg .bar-total { fill: var(--secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-svg .line-path { fill: none; stroke: var(--chart-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .line-area { fill: var(--chart-line); opacity: 0.1; }
.chart-svg .line-end { fill: var(--chart-line); stroke: var(--surface); stroke-width: 2; }
.chart-svg .line-dot { fill: var(--surface); stroke: var(--chart-line); stroke-width: 2; }
.chart-svg .crosshair { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }

.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; font-size: 12px; color: var(--secondary); }
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.chart-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

.chart-tip {
  display: none;
  position: absolute;
  z-index: 5;
  pointer-events: none;
  min-width: 170px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: 12px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.chart-tip .tip-head { font-weight: 600; margin-bottom: 4px; }
.chart-tip .tip-row { display: flex; align-items: center; gap: 6px; padding: 1px 0; color: var(--secondary); }
.chart-tip .tip-row b { margin-left: auto; padding-left: 12px; color: var(--text); font-weight: 600; }
.chart-tip .tip-total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }

.chart-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--muted); }

/* Manual page: the add form spans the content width. */
.manual-form .form-card { max-width: none; }


/* ---- Signed-out screens: landing, log in, sign up (_split.html) ----
   Navy brand panel on the left, the action on the right; stacked on
   phones. */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.split-hero {
  position: relative;
  background: var(--navy);
  color: #f3f3f1;
  padding: 40px 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wordmark {
  position: absolute;
  top: 40px;
  left: 56px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-decoration: none;
}
.split-hero-body { max-width: 30rem; text-align: center; }
.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.15;
  margin: 0 0 20px;
  text-wrap: balance;
}
.hero-text { font-size: 17px; line-height: 1.6; color: #c9d2dc; margin: 0 auto 24px; max-width: 34rem; }
.hero-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 15px; color: #e3e8ee; }
.hero-points li { display: flex; align-items: baseline; gap: 10px; }
.hero-points li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--chart-line); flex-shrink: 0; transform: translateY(-2px); }

.split-panel {
  background: var(--bg);
  border-left: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.split-panel-inner { width: 100%; max-width: 340px; }
.panel-title { font-family: var(--font-display); font-weight: 500; font-size: 30px; color: var(--text); text-transform: none; letter-spacing: 0; margin: 0 0 6px; }
.panel-sub { color: var(--muted); font-size: 15px; margin: 0 0 28px; }
.panel-actions { display: grid; gap: 12px; }
.panel-switch { margin: 20px 0 0; font-size: 14px; color: var(--muted); text-align: center; }
.panel-switch a { color: var(--link); font-weight: 600; }

.btn-primary, .btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.btn-primary { background: var(--accent-button); color: #ffffff; border: 1px solid var(--accent-button); }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); opacity: 1; }
.btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--text); }
.btn-secondary:hover { background: var(--hover); }
.btn-primary:focus-visible, .btn-secondary:focus-visible, .auth-form input:focus-visible, .panel-switch a:focus-visible, .wordmark:focus-visible {
  outline: 3px solid var(--chart-line);
  outline-offset: 2px;
}

.auth-form { display: grid; gap: 6px; }
.auth-form label { margin: 8px 0 0; font-size: 13px; color: var(--secondary); }
.auth-form input { height: 44px; background: var(--surface); }
.auth-form .btn-primary { margin-top: 18px; }
.form-notice { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 14px; color: var(--secondary); margin: 0 0 16px; }

@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; min-height: 100vh; }
  .split-hero { padding: 72px 16px 40px; }
  .wordmark { top: 24px; left: 16px; }
  .split-panel { border-left: none; border-top: 1px solid var(--border); padding: 32px 16px 48px; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-secondary { transition: none; }
}

/* Landing: the lines under the heading take turns, fading in and out.
   They share one grid cell so the panel never changes height. */
.hero-rotator { display: grid; margin: 0 0 24px; }
.hero-rotator .hero-text { grid-area: 1 / 1; margin: 0; opacity: 0; transition: opacity 0.7s ease; }
.hero-rotator .hero-text.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-rotator .hero-text { transition: none; }
}
.form-notice.is-error { border-color: var(--error-border); background: var(--error-bg); color: var(--error-text); }

/* Top bar: who's logged in, and Log out. */
.topbar nav { display: flex; align-items: center; }
.topbar-user { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 0 24px; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
.topbar-user span { color: #b9c3cf; font-size: 13px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-user button { background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); color: #ffffff; padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.topbar-user button:hover { border-color: #ffffff; opacity: 1; }
.topbar-user button:focus-visible { outline: 3px solid var(--chart-line); outline-offset: 2px; }
@media (max-width: 760px) { .topbar-user span { display: none; } }

/* Plaid setup: numbered walkthrough above the key fields. */
.setup-steps { margin: 0 0 20px; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--secondary); }
.setup-steps a { color: var(--link); font-weight: 600; }
.setup-steps strong { color: var(--text); font-weight: 600; }
.setup-note { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* Dashboard with no accounts yet. */
.empty-state { text-align: center; padding: 72px 24px; }
.empty-state h2 { font-family: var(--font-display); font-size: 26px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text); margin: 0 0 8px; }
.empty-state p { color: var(--muted); margin: 0 0 24px; }
.empty-state .btn-primary { display: inline-flex; width: auto; padding: 0 28px; }

/* "View a demo" under the landing buttons: quiet, text-style. */
.demo-link { margin: 18px 0 0; text-align: center; }
.demo-link button { background: none; border: none; padding: 4px; width: auto; color: var(--muted); font-size: 14px; cursor: pointer; }
.demo-link button span { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.demo-link button:hover { opacity: 1; }
.demo-link button:hover span { text-decoration-thickness: 2px; }
.demo-link button:focus-visible { outline: 3px solid var(--chart-line); outline-offset: 2px; border-radius: 4px; }

/* Slim banner on every demo page. */
.demo-banner { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 9px 16px; background: var(--banner-bg); border-bottom: 1px solid var(--banner-border); font-size: 14px; color: var(--banner-text); }
.demo-banner-cta { background: var(--accent-button); color: #ffffff; padding: 5px 12px; border-radius: 6px; font-weight: 600; font-size: 13px; text-decoration: none; }
.demo-banner-cta:hover { background: var(--accent-strong); }
.empty-state-alt { margin: 16px 0 0 !important; font-size: 14px; }
.empty-state-alt a { color: var(--link); font-weight: 600; }

/* ---- Dashboard ------------------------------------------------------- */
/* Money colors: spending reads red, earning reads green. Both clear AA on
   white cards (--expense 6.2:1, --income 5.4:1; on the page background
   5.6:1 and 4.8:1). */
.amount-expense { color: var(--expense); }
.amount-income { color: var(--income); }

.balance-hero { margin-bottom: 20px; }
.balance-hero .stat-label { min-height: 0; }
.balance-hero-value { font-size: 34px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

/* Month + account in one fixed row: [<] [month] [>] [account]. Grid
   columns, so nothing resizes when the month or arrow state changes. */
.period-bar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px minmax(0, 1fr); gap: 8px; margin: 0 0 28px; }
.period-month, .period-account { display: contents; }
.period-bar select {
  width: 100%; height: 44px; padding: 0 36px 0 12px;
  font-size: 15px; font-weight: 500; color: var(--text);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f6873' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid var(--border); border-radius: 8px;
  -webkit-appearance: none; appearance: none;
}
.period-step { display: inline-flex; align-items: center; justify-content: center; height: 44px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); text-decoration: none; font-size: 18px; }
.period-step:hover { border-color: var(--muted); }
.period-step.is-disabled { color: var(--border); }
.period-step:focus-visible, .period-bar select:focus-visible { outline: 3px solid var(--chart-line); outline-offset: 2px; }
@media (max-width: 760px) {
  .period-bar { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .period-bar #account_id { grid-column: 1 / -1; }
}

.period-summary { font-size: 17px; line-height: 1.6; color: var(--secondary); margin: 0 0 28px; max-width: 46rem; }
.period-summary strong { color: var(--text); font-variant-numeric: tabular-nums; }
.period-summary .amount-expense { color: var(--expense); }
.period-summary .amount-income { color: var(--income); }

/* Living / Total / Spending by category: real section headings. */
.stat-group, .category-section { margin: 0 0 32px; }
.stat-group-head { margin: 0 0 12px; }
.stat-group-head h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--text); margin: 0 0 2px; }
.stat-group-head p { margin: 0; font-size: 14px; color: var(--muted); }
.stat-group .stat-value { font-variant-numeric: tabular-nums; font-size: 26px; }
.stat-group .stat-label { min-height: 0; }
.stat-basis { color: var(--muted); }

.category-section { margin-top: 40px; }
.segmented-lg { margin: 16px 0 24px; padding: 4px; }
.segmented-lg label { padding: 11px 12px; font-size: 15px; font-weight: 500; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Phones: the top bar wraps instead of pushing links off-screen. */
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px; }
  .topbar nav { flex-wrap: wrap; gap: 6px 16px; }
  .topbar nav a { margin-left: 0; }
  .topbar-user { margin-left: 0; padding-left: 0; border-left: none; }
}

/* Accounts: bank sync status + one small action, on a single line. */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sync-cell { display: flex; align-items: center; gap: 10px; white-space: nowrap; min-height: 30px; }
.sync-cell form { margin: 0; }
.sync-state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.sync-state.is-on { color: var(--text); }
.sync-state.is-on::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--income); }
.btn-sm:disabled { opacity: 0.5; cursor: not-allowed; }
.danger-zone { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); max-width: 480px; }
.danger-zone p { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.plaid-status { font-size: 12px; margin-top: 4px; }
/* Hidden until it has a message -- its margin would nudge the row off-center. */
.plaid-status:empty { display: none; }

/* Dark theme: a hairline under the navy bar so it doesn't melt into the page. */
:root[data-theme="dark"] .topbar { border-bottom: 1px solid var(--border); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .topbar { border-bottom: 1px solid var(--border); } }

/* Theme toggle: a sun/moon button at the very top. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 8px; color: #ffffff; cursor: pointer; }
.theme-toggle:hover { border-color: #ffffff; opacity: 1; }
.theme-toggle:focus-visible { outline: 3px solid var(--chart-line); outline-offset: 2px; }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
/* On the signed-out screens it sits in the panel's top-right corner. */
.split-panel { position: relative; }
.split-panel .theme-toggle { position: absolute; top: 20px; right: 20px; color: var(--text); border-color: var(--border); }

/* Accounts table: roomier cells, everything on one centered line. */
.accounts-table th, .accounts-table td { padding: 16px 14px; vertical-align: middle; }
.accounts-table th { padding-top: 10px; padding-bottom: 10px; }
.accounts-table td:first-child, .accounts-table th:first-child { padding-left: 4px; }
.accounts-table td:last-child, .accounts-table th:last-child { padding-right: 4px; text-align: right; }
.accounts-table .sync-cell { gap: 12px; min-height: 28px; }
.accounts-table .badge { vertical-align: middle; }

/* "Connect a bank" + its status line; text-style button for "log by hand". */
.accounts-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: -4px 0 6px; }
.connect-status { font-size: 13px; color: var(--muted); margin: 8px 0 0; min-height: 1em; }
.connect-status:empty { display: none; }
.connect-status.is-error { color: var(--danger); }
.link-button { background: none; border: none; padding: 0; width: auto; color: var(--link); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.link-button:hover { opacity: 1; text-decoration-thickness: 2px; }
.link-button:focus-visible { outline: 3px solid var(--chart-line); outline-offset: 2px; border-radius: 3px; }