@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=IBM+Plex+Mono:wght@300;400;500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

/* ─── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --cream:         #F5F0E8;
  --cream-dark:    #EDE8DC;
  --cream-card:    #FEFCF6;
  --ink:           #1A1A1A;
  --ink-muted:     #6B5E4E;
  --ink-faint:     #A89880;
  --border:        #D8CFBF;
  --border-light:  #EAE4D8;

  --green:         #2C5F2E;
  --green-light:   #EDF4EE;
  --red:           #8B2635;
  --red-light:     #F8ECEE;
  --gold:          #8B6914;

  --font-display:  'Cormorant', Georgia, serif;
  --font-body:     'DM Sans', system-ui, sans-serif;
  --font-mono:     'IBM Plex Mono', 'Courier New', monospace;

  --radius:        4px;
  --radius-lg:     8px;
  --shadow-sm:     0 1px 3px rgba(26,20,10,0.07);
  --shadow:        0 2px 8px rgba(26,20,10,0.09);

  --nav-h:         60px;
  --header-h:      56px;
}

/* ─── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  position: relative;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.55;
  min-height: 100dvh;
  padding-bottom: var(--nav-h);
}

/* ─── Ambient background drift ────────────────────────────────────────────
   Barely-there gradient wash behind the content — reads as "the page is
   alive," not as a moving graphic. Fixed + low-opacity so cards (solid
   --cream-card) sit unaffected on top; only shows through page gaps. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(44, 95, 46, 0.05), transparent 42%),
    radial-gradient(circle at 82% 28%, rgba(139, 105, 20, 0.045), transparent 46%),
    radial-gradient(circle at 48% 88%, rgba(139, 38, 53, 0.03), transparent 42%);
  background-size: 160% 160%;
  animation: bgDrift 48s ease-in-out infinite alternate;
}

@keyframes bgDrift {
  0%   { background-position: 0% 10%, 100% 0%, 40% 100%; }
  100% { background-position: 15% 30%, 75% 35%, 55% 75%; }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* ─── Global Button Animations ───────────────────────────────────────────── */
button {
  transition: all 0.35s ease;
}
button:hover:not(:disabled) {
  transform: translateY(-3px);
  filter: brightness(0.92);
}
button:active:not(:disabled) {
  transform: scale(0.96);
  transition: transform 0.12s ease;
}

/* ─── Typography ──────────────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

h2 { font-size: clamp(1.3rem, 3.5vw, 1.8rem); }
h3 { font-size: 1.05rem; }

.positive { color: var(--green); }
.negative { color: var(--red); }
.muted    { color: var(--ink-muted); }

/* ─── Header ──────────────────────────────────────────────────────────────── */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-header__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.app-header__title span {
  font-weight: 300;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-export {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 30px;
  box-sizing: border-box;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 0.8rem;
  cursor: pointer;
  transition: all 0.35s ease;
}

.btn-export:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.btn-export:active {
  opacity: 0.85;
}

.btn-export:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-export:disabled:hover {
  background: transparent;
  color: var(--ink-muted);
  border-color: var(--border);
}

.demo-mode-badge {
  display: inline-flex;
  align-items: center;
  height: 30px;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border: 1px solid var(--green);
  border-radius: var(--radius);
  padding: 0 0.7rem;
  white-space: nowrap;
}

/* This class's own `display` declaration above outranks the browser's
   default [hidden] stylesheet rule (author styles always win over UA
   styles, regardless of selector specificity) -- without this, the badge
   stays visible on the normal app even with the `hidden` attribute set. */
.demo-mode-badge[hidden] {
  display: none;
}

/* Header buttons get tight on narrow phones once four share the row —
   drop the RULES text label, keep the icon + accessible name, and trim
   padding/gap/font further so Sync/Login + Sign Out + Rules + Export never
   overflow even at the narrowest common phone width (~320px). */
@media (max-width: 400px) {
  .app-header {
    padding: 0 0.65rem;
  }
  .header-actions {
    gap: 0.22rem;
  }
  .btn-export {
    padding: 0 0.32rem;
    font-size: 0.58rem;
    letter-spacing: 0.03em;
    gap: 2px;
  }
  .demo-mode-badge {
    padding: 0 0.4rem;
    font-size: 0.58rem;
    letter-spacing: 0.03em;
  }
  .btn-rules-label {
    display: none;
  }
  .app-header__title {
    font-size: 0.82rem;
    letter-spacing: 0.05em;
  }
}

/* ─── Desktop Top Nav ─────────────────────────────────────────────────────── */
.top-nav {
  display: none;
}

/* ─── Mobile Bottom Nav ───────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  background: var(--cream-card);
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 100;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-faint);
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.5rem 0.25rem 0.65rem;
  position: relative;
  transition: all 0.35s ease;
}

.nav-item.active {
  color: var(--ink);
}

.bottom-nav .nav-item.active::before {
  display: none; /* replaced by .nav-indicator */
}

.nav-item svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.5;
  flex-shrink: 0;
}

.nav-indicator {
  position: absolute;
  top: 0;
  height: 2px;
  background: var(--ink);
  border-radius: 0 0 2px 2px;
  transition: left 0.4s ease, width 0.4s ease;
  pointer-events: none;
}

.top-nav-indicator {
  position: absolute;
  bottom: -1px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px 2px 0 0;
  transition: left 0.4s ease, width 0.4s ease;
  pointer-events: none;
}

/* ─── Main ────────────────────────────────────────────────────────────────── */
.app-main {
  max-width: 480px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2rem;
}

/* ─── Sections ────────────────────────────────────────────────────────────── */
.section {
  display: none;
  /* tab transitions handled by JS inline styles */
}

.section.active {
  display: block;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.section-header {
  margin-bottom: 1.5rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--border);
}

.section-header p {
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin-top: 0.3rem;
}

/* ─── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--cream-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: var(--shadow-sm);
}

.card + .card {
  margin-top: 0.75rem;
}

.card__label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.75rem;
}

/* ─── Net Worth Display ───────────────────────────────────────────────────── */
.net-worth-display {
  text-align: center;
  padding: 1.75rem 1rem 1.5rem;
}

.net-worth-display .label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}

.net-worth-display .value {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 9vw, 3.25rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  transition: color 0.3s;
}

.net-worth-display .value.positive { color: var(--green); }
.net-worth-display .value.negative { color: var(--red); }

.net-worth-display .date {
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin-top: 0.5rem;
  font-style: italic;
  font-family: var(--font-display);
}

/* ─── Divider ─────────────────────────────────────────────────────────────── */
.rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 0 1rem;
}

/* ─── Account List ────────────────────────────────────────────────────────── */
.account-row {
  display: flex;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border-light);
  gap: 1rem;
}

.account-row--clickable {
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}
.account-row--clickable:hover {
  background: var(--cream-dark);
}
.account-row--clickable:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}

.note-indicator {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0.85;
}

.account-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.account-row__name {
  font-size: 0.82rem;
  color: var(--ink-muted);
  white-space: nowrap;
}

.account-row__value {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
  margin-left: auto;
}

.account-row__value.negative {
  color: var(--red);
}

/* Read-only rewards line under a credit card's Overview row. The row's own
   bottom border is dropped in favor of the rewards line's (one hairline
   between cards, not two stacked close together) so the small positive gap
   below reads as breathing room, not a doubled-up border. */
.account-row:has(+ .account-row-rewards) {
  border-bottom: none;
}
.account-row-rewards {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  padding: 0 0 0.55rem;
  margin-top: 0.2rem;
  border-bottom: 1px solid var(--border-light);
}
.account-row-rewards:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* ─── Modal / Popup (account & debt notes) ───────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(26, 20, 10, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  animation: fadeUp 0.2s ease;
}

.modal-card {
  background: var(--cream-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  width: 100%;
  max-width: 360px;
  max-height: 85vh;
  overflow-y: auto;
}

.modal-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.modal-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}

.modal-card__close {
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem;
  flex-shrink: 0;
  transition: color 0.15s ease;
}
.modal-card__close:hover {
  color: var(--ink-muted);
}

.modal-card__textarea {
  width: 100%;
}

/* ─── Chart drill-down modal ──────────────────────────────────────────────── */
.modal-card--wide {
  max-width: 900px;
}

.chart-drilldown__body {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.chart-drilldown__chart {
  flex: 1 1 58%;
  min-width: 0;
}
.chart-drilldown__chart svg {
  width: 100%;
  display: block;
}

/* Asset-mix sub-pie filter (item 15) -- two equal-width blocks when both
   Invested and Liquid are checked, reusing .chart-drilldown__body as the
   wrapper for its existing desktop-flex / mobile-column behavior. */
.asset-mix-filters {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.5rem;
}
.asset-mix-filter {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--ink-muted);
  cursor: pointer;
  user-select: none;
}
.asset-mix-filter input[type="checkbox"] {
  accent-color: var(--green);
  cursor: pointer;
}
.asset-mix-subpie {
  flex: 1 1 50%;
  min-width: 0;
}

.chart-drilldown__table-wrap {
  flex: 1 1 42%;
  min-width: 0;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
}

.chart-drilldown__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.chart-drilldown__table th {
  position: sticky;
  top: 0;
  background: var(--cream-dark);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  padding: 0.5rem 0.75rem;
}

.chart-drilldown__table td {
  padding: 0.45rem 0.75rem;
  border-top: 1px solid var(--border-light);
  color: var(--ink-muted);
  white-space: nowrap;
}

.chart-drilldown__amt-col {
  text-align: right;
  font-family: var(--font-mono);
  color: var(--ink);
}

.cat-txn-modal__total {
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-bottom: 0.85rem;
}

/* Descriptions can run long (e.g. raw Amex merchant strings) -- wrap onto a
   second line, same idiom as .ci-import-desc-col, rather than forcing the
   3-column table wider than the modal at narrow widths. */
.cat-txn-modal__desc-col {
  white-space: normal !important;
  min-width: 120px;
}

@media (max-width: 640px) {
  .chart-drilldown__body {
    flex-direction: column;
  }
  .chart-drilldown__table-wrap {
    max-height: 260px;
    width: 100%;
  }
  /* Tighter cell padding at narrow widths -- the 3-column category-txn
     table (Date/Description/Amount) is snugger than the original 2-column
     Date/Amount drilldown this styling was written for. */
  .chart-drilldown__table th,
  .chart-drilldown__table td {
    padding: 0.4rem 0.4rem;
  }
}

.hist-chart-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--ink-faint);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
  transition: color 0.15s ease;
}
.hist-chart-expand-btn:hover {
  color: var(--green);
}

.hist-chart-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: -0.25rem;
}

/* ─── Placeholder ─────────────────────────────────────────────────────────── */
.placeholder {
  text-align: center;
  padding: 3.5rem 1.5rem;
  color: var(--ink-faint);
}

.placeholder__icon {
  font-size: 1.6rem;
  margin-bottom: 0.75rem;
  opacity: 0.35;
  line-height: 1;
}

.placeholder p {
  font-size: 0.8rem;
  font-style: italic;
  font-family: var(--font-display);
}

/* ─── Net Worth Breakdown ─────────────────────────────────────────────────── */
.nw-breakdown {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0.25rem 0 1.25rem;
  border-bottom: 1px solid var(--border);
}

.nw-breakdown__item {
  flex: 1;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
}

.nw-breakdown__label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.nw-breakdown__val {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}

.nw-breakdown__op {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--ink-faint);
  padding: 0 0.25rem;
}

/* ─── KPI Stat Cards ──────────────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-top: 1.5rem;
}

/* Accounts is the first .card in the stack now that KPIs sit above it, so
   it needs its own top gap -- .card + .card only covers card-to-card
   (Accounts -> Debt) adjacency. The + selector matches on DOM adjacency
   regardless of .kpi-grid's own [hidden] state, and when .kpi-grid really
   is display:none it drops out of flow entirely, so this margin simply
   collapses with nw-breakdown's margin-bottom instead -- 1.5rem either way. */
.kpi-grid + .card {
  margin-top: 1.5rem;
}

/* Spacing before Spending by Category matches the rest of Overview's
   section rhythm -- margin lives here (not as a preceding element's
   margin-bottom) so it's robust to whichever section ends up before it,
   hidden or not. */
#category-breakdown {
  margin-top: 1.5rem;
}

.kpi-card {
  background: var(--cream-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 0.85rem 0.5rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.kpi-card__label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.35rem;
}

.kpi-card__value {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.kpi-card__value.positive { color: var(--green); }
.kpi-card__value.negative { color: var(--red); }

/* 4 equal boxes get cramped below 400px -- fall back to a 2x2 grid (natural
   DOM order: Income/Spent top row, Saved/Fico bottom row). Placed after the
   base .kpi-grid rule above so it wins the cascade -- same specificity, and
   an @media wrapper doesn't get priority over an unconditional rule earlier
   in source order. */
@media (max-width: 400px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── Spending by Category (Overview) ────────────────────────────────────── */
.cat-breakdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.cat-breakdown-head .card__label {
  margin-bottom: 0;
}
.cat-breakdown-month-select {
  width: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.3rem 0.55rem;
}
.cat-breakdown-month-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.cat-breakdown-row {
  padding: 0.5rem 0;
  border-top: 1px solid var(--border-light);
}
.cat-breakdown-row:first-of-type {
  border-top: none;
}

.cat-breakdown-row--clickable {
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}
.cat-breakdown-row--clickable:hover {
  background: var(--cream-dark);
}
.cat-breakdown-row--clickable:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}

/* Plain summary line, not a bar -- sits below the category rows using the
   same .cat-breakdown-row rhythm (border-top separator) but visually
   emphasized (bold name, ink-colored mono value) to read as a footer total
   rather than a seventh category. */
.cat-breakdown-total {
  border-top: 1px solid var(--border);
  margin-top: 0.15rem;
}
.cat-breakdown-total .cat-breakdown-row__name {
  font-weight: 600;
}
.cat-breakdown-total .cat-breakdown-row__val {
  font-weight: 600;
  color: var(--ink);
}

.cat-breakdown-row__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

.cat-breakdown-row__name {
  font-size: 0.85rem;
  color: var(--ink);
}

.cat-breakdown-row__val {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.cat-breakdown-row__track {
  height: 6px;
  background: var(--cream-dark);
  border-radius: 3px;
  overflow: hidden;
}

.cat-breakdown-row__bar {
  height: 100%;
  background: var(--red);
  border-radius: 3px;
  transition: width 0.6s ease;
}

/* ─── Account Subgroups ───────────────────────────────────────────────────── */
.account-subhead {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.85rem;
  margin-bottom: 0.15rem;
  padding-bottom: 0.3rem;
}

.account-subhead:first-child {
  margin-top: 0;
}

.account-row--subtotal {
  border-bottom: none;
  border-top: 1px solid var(--border);
  margin-top: 0.15rem;
  padding-top: 0.5rem;
}

.account-row--subtotal .account-row__name {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.account-row--subtotal .account-row__value {
  font-weight: 500;
  color: var(--ink);
}

.account-row--subtotal .account-row__value.negative {
  color: var(--red);
}

.account-row--subtotal .account-row__value.positive {
  color: var(--green);
}

/* ─── Paycheck Planning ───────────────────────────────────────────────────── */
#paycheck-section:not(:empty) {
  margin-top: 1.5rem;
}

.paycheck-card {
  border-left: 3px solid var(--green);
  padding: 20px 24px;
}

.paycheck-setup-msg {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-bottom: 0.75rem;
}

.paycheck-setup-form {
  display: flex;
  flex-direction: column;
}

.paycheck-setup-form input:nth-of-type(1) {
  margin-bottom: 12px;
}

.paycheck-setup-form input:nth-of-type(2) {
  margin-bottom: 16px;
}

.paycheck-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.paycheck-date-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.paycheck-date-wrap,
.paycheck-amount-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.paycheck-amount-wrap {
  justify-content: flex-end;
}

.paycheck-date-value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink);
}

.paycheck-amount-value {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.paycheck-edit-pencil {
  background: none;
  border: none;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  padding: 2px;
  transition: color 0.15s ease;
}
.paycheck-edit-pencil:hover {
  color: var(--ink-muted);
}

.paycheck-countdown-badge {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
}
.paycheck-countdown-badge--green {
  background: var(--green-light);
  color: var(--green);
}
.paycheck-countdown-badge--yellow {
  background: #FEF6E3;
  color: #8B6914;
}
.paycheck-countdown-badge--red {
  background: var(--red-light);
  color: var(--red);
}

.paycheck-table-head {
  display: flex;
  align-items: center;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 0.2rem;
}
.paycheck-table-head__label {
  flex: 1;
  text-align: left;
}
.paycheck-table-head__amount {
  width: 100px;
  flex: 0 0 100px;
  text-align: right;
  font-family: var(--font-mono);
}
.paycheck-table-head__spacer {
  width: 28px;
  flex-shrink: 0;
  margin-left: 12px;
}

.paycheck-alloc-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}
.paycheck-alloc-row .account-row__name,
.paycheck-alloc-row .account-row__value {
  cursor: pointer;
}
.paycheck-alloc-row .paycheck-alloc-label {
  flex: 1;
  text-align: left;
}
.paycheck-alloc-row .paycheck-alloc-amount {
  width: 100px;
  flex: 0 0 100px;
  text-align: right;
  font-family: var(--font-mono);
}
.paycheck-alloc-row .field-trash {
  width: 28px;
  flex-shrink: 0;
  margin-left: 12px;
}

.paycheck-summary .account-row__name {
  flex: 1;
}
.paycheck-summary .account-row__value {
  width: 100px;
  flex: 0 0 100px;
  text-align: right;
  font-family: var(--font-mono);
}

.paycheck-inline-input {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--green);
  border-radius: 4px;
  padding: 3px 6px;
  outline: none;
  max-width: 140px;
}
.paycheck-inline-input--amount {
  text-align: right;
}

.paycheck-summary {
  margin-top: 0.6rem;
}

/* ─── Multi-Paycheck System ───────────────────────────────────────────────── */
/* Paychecks stack as full-width cards (oldest first) — no horizontal scroll. */

.paycheck-add-btn {
  margin: 0.75rem 0;
}

/* Unassigned — a catch-all below the columns, not the headline element.
   Collapses to a slim strip when empty instead of a full bordered card. */
.paycheck-unassigned.card {
  margin-top: 0.75rem;
}
.paycheck-unassigned--empty {
  margin-top: 0.5rem;
}
.paycheck-unassigned--empty .paycheck-chip-list--empty {
  min-height: 0;
  border: none;
  padding: 0.3rem 0.1rem;
  margin-bottom: 0;
}
.paycheck-unassigned-empty-text {
  font-size: 0.75rem;
}

.paycheck-row-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.65rem;
}

.paycheck-row-label {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
}

.paycheck-pc-date {
  width: 52px;
  max-width: 52px;
  text-align: center;
  flex-shrink: 0;
}

.paycheck-row-head .paycheck-inline-input--amount {
  width: 90px;
  max-width: 90px;
  flex-shrink: 0;
}

.paycheck-row-range {
  font-size: 0.72rem;
  margin-bottom: 0.75rem;
}

.paycheck-chip-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.5rem;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.65rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.paycheck-dropzone--active {
  background: var(--green-light);
  border-color: var(--green);
}

.paycheck-chip-list .goals-empty-msg {
  padding: 0.25rem 0;
  text-align: left;
}

.paycheck-chip {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--cream-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 0.55rem 0.65rem;
}

.paycheck-chip__handle {
  opacity: 0.7;
  cursor: grab;
  touch-action: none;
}
.paycheck-chip__handle:hover {
  opacity: 1;
}

.paycheck-chip__name {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.paycheck-chip__day {
  font-size: 0.68rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.paycheck-chip__amount {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink);
  flex-shrink: 0;
  min-width: 64px;
  text-align: right;
  white-space: nowrap;
}

.paycheck-chip--dragging {
  opacity: 0.35;
}

.paycheck-chip--drop-above {
  box-shadow: inset 0 2px 0 0 var(--green);
}
.paycheck-chip--drop-below {
  box-shadow: inset 0 -2px 0 0 var(--green);
}

.paycheck-warning {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--red-light);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.75rem;
}

.paycheck-warning__text {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--red);
  line-height: 1.4;
}

.paycheck-warning__close {
  background: none;
  border: none;
  color: var(--red);
  cursor: pointer;
  font-size: 0.9rem;
  flex-shrink: 0;
  padding: 0.2rem;
}

.card__label--debt {
  color: var(--red);
  opacity: 0.85;
}

.debt-clean {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--green);
  padding: 0.25rem 0;
}

/* ─── Empty State ─────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  max-width: 360px;
  margin: 1.5rem auto 0;
}

.empty-state__icon {
  font-size: 2.2rem;
  color: var(--green);
  opacity: 0.6;
  margin-bottom: 1rem;
  line-height: 1;
}

.empty-state h2 {
  margin-bottom: 0.6rem;
}

.empty-state p {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.empty-state__cta {
  width: auto;
  padding: 0.85rem 1.75rem;
}

/* ─── Check-In Form ───────────────────────────────────────────────────────── */
.ci-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.ci-form[hidden] {
  display: none;
}

.ci-group {
  padding: 1.25rem 1.25rem 1rem;
}

.ci-group__header {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.ci-group__sub {
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  font-style: italic;
  font-family: var(--font-display);
  font-size: 0.82rem;
  opacity: 0.75;
}

.field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-light);
}

.field-row:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.field-label {
  font-size: 0.82rem;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 60px;
  cursor: pointer;
  user-select: none;
}

.field-input {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: right;
  background: transparent;
  border: 1.5px solid #d4cfc8;
  border-radius: 4px;
  padding: 6px 8px;
  flex: 1;
  max-width: 200px;
  min-width: 0;
  outline: none;
  transition: border-color 0.2s ease, color 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.field-input:focus {
  border-color: #2C5F2E;
}

.field-input::placeholder {
  color: var(--ink-faint);
  opacity: 0.45;
}

.field-input.ci-field--error {
  color: var(--red);
  border-color: var(--red);
}

.ci-field--fico {
  flex: 0 0 90px;
  max-width: 90px;
}

/* ─── Save Button ─────────────────────────────────────────────────────────── */
.ci-actions {
  padding-top: 0.25rem;
}

.ci-notes-textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid #d4cfc8;
  border-radius: 4px;
  padding: 8px 10px;
  outline: none;
  resize: vertical;
  line-height: 1.5;
  transition: border-color 0.2s ease;
}
.ci-notes-textarea:focus {
  border-color: #2C5F2E;
}
.ci-notes-textarea::placeholder {
  color: var(--ink-faint);
  opacity: 0.6;
}

.btn-save {
  width: 100%;
  padding: 0.95rem 1.5rem;
  background: var(--ink);
  color: var(--cream);
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.35s ease;
}

.btn-save:active { opacity: 0.75; }

.btn-save:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── Toast ───────────────────────────────────────────────────────────────── */
.ci-toast {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--green);
  min-height: 1.6rem;
  margin-bottom: 0.5rem;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ci-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.ci-toast.error {
  color: var(--red);
}

/* ─── Service Worker Update Prompt ───────────────────────────────────────── */
.sw-update-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + 0.75rem);
  z-index: 400;
  transform: translateX(-50%) translateY(120%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  max-width: calc(100vw - 2rem);
  padding: 0.75rem 1rem;
  background: var(--cream-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform 0.25s ease;
}

.sw-update-toast.visible {
  transform: translateX(-50%) translateY(0);
}

.sw-update-toast__text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink);
}

.sw-update-toast__refresh {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  background: var(--green);
  color: var(--cream);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

.sw-update-toast__refresh:active {
  opacity: 0.75;
}

/* ─── Debt Screen ─────────────────────────────────────────────────────────── */
.debt-section-head {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}

.debt-section-head:not(:first-child) {
  margin-top: 1.5rem;
}

/* Loan card */
.debt-loan-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.debt-loan-card__top {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.debt-loan-card__name {
  font-size: 0.82rem;
  color: var(--ink-muted);
  font-weight: 500;
}

.debt-loan-card__balance {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-left: auto;
}

.debt-loan-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.debt-rate-badge {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  background: var(--cream-dark);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}

.debt-loan-card__payment {
  font-size: 0.73rem;
  color: var(--ink-muted);
}

.debt-loan-card__payoff {
  font-size: 0.73rem;
  color: var(--ink-muted);
}

.debt-loan-card__payoff.warn {
  color: var(--red);
  font-style: italic;
}

/* Progress bar */
.debt-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.1rem;
}

.debt-progress-track {
  height: 5px;
  background: var(--border-light);
  border-radius: 3px;
  overflow: hidden;
}

.debt-progress-fill {
  height: 100%;
  background: var(--green);
  border-radius: 3px;
  min-width: 0;
}

.debt-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.67rem;
  color: var(--ink-muted);
}

.debt-progress-labels span:last-child {
  color: var(--ink-faint);
}

/* Debt summary rows reuse .card + .account-row */
.debt-summary {
  margin-top: 0.6rem;
}

/* CC card */
.debt-cc-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.debt-cc-card__top {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.debt-cc-card__name {
  font-size: 0.82rem;
  color: var(--ink-muted);
  font-weight: 500;
}

.debt-cc-card__balance {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-left: auto;
}

.debt-cc-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  align-items: baseline;
}

.debt-cc-meta-item {
  font-size: 0.73rem;
  color: var(--ink-muted);
}

/* Utilization bar */
.debt-util-track {
  height: 4px;
  background: var(--border-light);
  border-radius: 3px;
  overflow: hidden;
}

.debt-util-fill {
  height: 100%;
  border-radius: 3px;
}

.debt-util-fill.util-green { background: var(--green); }
.debt-util-fill.util-warn  { background: var(--gold); }
.debt-util-fill.util-red   { background: var(--red); }

/* Shared: utilization text tone */
.util-warn { color: var(--gold); }

/* ─── Milestones Screen ───────────────────────────────────────────────────── */
.ms-milestone-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.ms-milestone-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.ms-milestone-card__label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}

.ms-milestone-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.ms-milestone-card__target {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}

.ms-milestone-card__days {
  font-size: 0.73rem;
  color: var(--ink-muted);
}

.ms-milestone-card__days.negative {
  color: var(--red);
}

.ms-progress-track {
  height: 5px;
  background: var(--border-light);
  border-radius: 3px;
  overflow: hidden;
}

.ms-progress-fill {
  height: 100%;
  background: var(--green);
  border-radius: 3px;
  min-width: 0;
}

.ms-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.67rem;
  color: var(--ink-muted);
}

.ms-badge {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ms-badge--ontrack,
.ms-badge--complete {
  background: var(--green-light);
  color: var(--green);
  border: 1px solid rgba(44, 95, 46, 0.18);
}

.ms-badge--behind {
  background: var(--red-light);
  color: var(--red);
  border: 1px solid rgba(139, 38, 53, 0.18);
}

/* Deadline cards */
.ms-deadline-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ms-deadline-card__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
}

.ms-deadline-card__desc {
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-bottom: 0.25rem;
}

.ms-deadline-card__date {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}

.ms-deadline-card__countdown {
  font-family: var(--font-mono);
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1;
  margin-top: 0.25rem;
}

.ms-deadline-card__countdown-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 0.2rem;
}

.ms-deadline-card__countdown-label.negative {
  color: var(--red);
}

/* ─── Goals (Milestones) ──────────────────────────────────────────────────── */
.goals-empty-msg {
  text-align: center;
  font-size: 0.85rem;
  font-style: italic;
  font-family: var(--font-display);
  color: var(--ink-muted);
  padding: 1rem 0 1.5rem;
}

.goal-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.goal-card__head {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Always visible (never hover-gated) so it's discoverable on touch, where
   there's no hover state -- .drag-handle's own opacity:0 default sits later
   in the cascade, so this needs the compound .drag-handle selector to win
   regardless of source order. */
.drag-handle.goal-card__handle {
  opacity: 0.6;
  margin-right: 8px;
  flex-shrink: 0;
}
.drag-handle.goal-card__handle:hover {
  opacity: 1;
}

/* ─── Milestone drag-to-reorder ───────────────────────────────────────────── */
.goal-drag--dragging {
  opacity: 0.35;
}
.goal-drag--drop-above {
  box-shadow: inset 0 2px 0 0 var(--green);
}
.goal-drag--drop-below {
  box-shadow: inset 0 -2px 0 0 var(--green);
}

.goal-card__name {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
}

.goal-card__tracking {
  font-size: 0.78rem;
  color: var(--ink-muted);
}

.goal-card__value {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-top: 0.2rem;
}

.goal-card__pct {
  font-size: 0.72rem;
  color: var(--ink-muted);
}

.goal-card__pct.positive {
  font-weight: 600;
}

.goal-card__daterow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.3rem;
}

.goal-card__date {
  font-size: 0.75rem;
  font-style: italic;
  font-family: var(--font-display);
  color: var(--ink-faint);
}

.goal-card__notes {
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-top: 0.3rem;
}

.goal-add-row {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.goal-add-row .ci-add-trigger {
  flex: 1;
  text-align: center;
}

.goal-inline-form {
  margin-top: 0.4rem;
}

/* ─── History Screen ──────────────────────────────────────────────────────── */
.hist-chart-wrap {
  padding: 1rem 0.75rem 0.6rem;
  overflow: hidden;
}

.hist-chart-wrap svg {
  width: 100%;
  display: block;
}

.nw-chart-wrap {
  position: relative;
  width: 100%;
}

.nw-marker-tooltip {
  position: absolute;
  z-index: 5;
  background: #F5F0E8;
  border: 1px solid var(--green);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  font-family: var(--font-body);
  max-width: 200px;
  overflow-wrap: break-word;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
}

.nw-marker-tooltip__date {
  color: var(--ink-muted);
  font-size: 11px;
  margin-bottom: 2px;
}

.nw-marker-tooltip__nw {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--green);
  margin-bottom: 4px;
}

.nw-marker-tooltip__note {
  color: var(--ink);
  line-height: 1.4;
}

.hist-chart-msg {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-muted);
  padding: 2rem 0;
}

/* ─── History — time range controls ──────────────────────────────────────── */
.hist-range-container {
  margin-bottom: 0.6rem;
}

.hist-range-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.hist-range-btn {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  background: var(--cream-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.hist-range-btn:hover {
  border-color: var(--green);
  color: var(--green);
}
.hist-range-btn--active,
.hist-range-btn--active:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--cream);
}

.hist-range-custom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.hist-range-custom[hidden] {
  display: none;
}
.hist-range-custom input {
  max-width: 150px;
}

/* ─── History — event markers ────────────────────────────────────────────── */
.hist-marker-manager {
  margin-top: 0.75rem;
}

.hist-marker-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border-light);
}
.hist-marker-row:last-of-type {
  border-bottom: none;
}

.hist-marker-row__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hist-marker-row__info {
  flex: 1;
  min-width: 0;
}

.hist-marker-row__date {
  font-size: 0.78rem;
  color: var(--ink);
  font-weight: 500;
}

.hist-marker-row__note {
  font-size: 0.75rem;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hist-marker-color-picker {
  display: flex;
  gap: 0.5rem;
}

.hist-marker-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.hist-marker-swatch--active {
  border-color: var(--ink);
  transform: scale(1.1);
}

.hist-marker-inline-form {
  margin-top: 0.5rem;
}

.hist-acct-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.hist-filter-pill {
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  border: 1.5px solid var(--ink-muted);
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.35s ease;
}

.hist-filter-pill:hover {
  border-color: var(--green);
  color: var(--green);
}

.hist-filter-pill.active {
  border-color: var(--green);
  background: var(--green);
  color: #FEFCF6;
}

.hist-loan-legend {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.6rem;
  padding-left: 0.25rem;
}

.hist-loan-legend__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--ink-muted);
}

.hist-loan-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─── History: Spending by Category (pie) ────────────────────────────────── */
.hist-pie-body {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.hist-pie-svg {
  width: 160px !important;
  max-width: 45vw;
  flex-shrink: 0;
  display: block;
}

.hist-pie-slice {
  stroke: var(--cream-card);
  stroke-width: 1.5;
  transition: opacity 0.15s;
}
.hist-pie-slice:hover {
  opacity: 0.85;
}
.hist-pie-slice--clickable {
  cursor: pointer;
}
.hist-pie-slice--clickable:focus-visible {
  outline: 2px solid var(--green);
}

.hist-pie-legend__row--clickable {
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  margin: -0.15rem -0.3rem;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}
.hist-pie-legend__row--clickable:hover {
  background: var(--cream-dark);
}
.hist-pie-legend__row--clickable:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}

.hist-pie-legend {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
  min-width: 160px;
}

.hist-pie-legend__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.hist-pie-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hist-pie-legend__name {
  flex: 1;
  color: var(--ink);
}

.hist-pie-legend__val {
  font-family: var(--font-mono);
  color: var(--ink-muted);
  white-space: nowrap;
}

.hist-pie-range {
  margin-top: 0.85rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border-light);
  font-size: 0.72rem;
  color: var(--ink-faint);
  font-family: var(--font-mono);
}

/* Account row stagger animation */
.account-row--animated {
  animation: fadeSlideIn 0.5s ease-out both;
}

/* Sync button spinner */
.btn-sync-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}

/* Log rows */
.hist-log-row + .hist-log-row .hist-log-row__main {
  border-top: 1px solid var(--border-light);
}

.hist-log-row__main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 0;
  cursor: pointer;
  gap: 1rem;
  user-select: none;
}

.hist-log-row__left {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.hist-log-row__date {
  font-size: 0.75rem;
  color: var(--ink-muted);
}

.hist-log-row__delta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: -0.01em;
}

.hist-log-row__right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.hist-log-row__nw {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 300;
  letter-spacing: -0.04em;
}

.hist-chevron {
  font-size: 1rem;
  color: var(--ink-faint);
  line-height: 1;
  transition: transform 0.4s ease;
  width: 12px;
  text-align: center;
}

/* Expanded detail */
.hist-log-expand {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0 0.85rem;
  transition: max-height 0.45s ease, opacity 0.35s ease;
}

.hist-log-expand.open {
  max-height: 400px;
  opacity: 1;
  border-top: 1px solid var(--border-light);
}

.hist-log-expand__item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.hist-log-expand__label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.hist-log-expand__val {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* ─── Check-In history log — note ────────────────────────────────────────── */
.hist-log-note {
  grid-column: 1 / -1;
  margin-top: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-light);
}

.hist-log-note__head {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.2rem;
}

.hist-log-note__label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hist-log-note__body {
  font-size: 0.8rem;
  color: var(--ink-muted);
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.hist-log-note__add {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.75rem;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.15s ease;
}
.hist-log-note__add:hover {
  color: var(--green);
}

/* ─── Remove / trash buttons — red ✕ ────────────────────────────────────── */
.field-trash {
  background: none;
  border: none;
  color: #cc0000;
  cursor: pointer;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  transition: color 0.15s ease;
  filter: none !important;
}
.field-trash:hover {
  color: #ff0000;
  transform: scale(1.2) !important;
}

/* ─── Drag handle ─────────────────────────────────────────────────────────── */
/* Visible (not hover-only) by default -- touch has no :hover, so a handle
   that only appears on hover is undiscoverable on the mobile PWA. Hover
   still bumps it up for mouse users. */
.drag-handle {
  width: 16px;
  height: 18px;
  flex-shrink: 0;
  fill: var(--border);
  cursor: grab;
  opacity: 0.45;
  transition: opacity 0.15s, fill 0.15s;
}
.field-row:hover .drag-handle {
  opacity: 0.7;
}
.drag-handle:hover {
  fill: var(--ink-muted);
  opacity: 1;
}
.field-row.is-dragging {
  opacity: 0.4;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  position: relative;
  z-index: 10;
}
.field-row.drop-above {
  box-shadow: inset 0 2px 0 0 var(--green);
}
.field-row.drop-below {
  box-shadow: inset 0 -2px 0 0 var(--green);
}

/* ─── Universal pointer-drag-to-reorder (shared by every draggable list) ──── */
.drag-ghost {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  opacity: 0.92;
  box-shadow: var(--shadow);
  transform: scale(1.02);
}
.drag-item--dragging {
  opacity: 0.4;
}
.drag-item--drop-above {
  box-shadow: inset 0 2px 0 0 var(--green);
}
.drag-item--drop-below {
  box-shadow: inset 0 -2px 0 0 var(--green);
}

/* ─── Recurring payment method select ────────────────────────────────────── */
.rp-pm-select {
  flex: 0 0 76px;
  width: 76px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  color: var(--ink-muted);
  background: transparent;
  border: 1.5px solid #d4cfc8;
  border-radius: 4px;
  padding: 4px 2px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
  -webkit-appearance: auto;
  appearance: auto;
}
.rp-pm-select:focus {
  border-color: #2C5F2E;
}

/* Inline confirmation strip */
.ci-inline-confirm {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border-light);
}
.ci-inline-confirm__text {
  flex: 1;
  font-style: italic;
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.ci-inline-confirm__select {
  width: auto;
}

/* Neutral "nothing here yet" hint -- Check-In's empty account/debt lists,
   Overview's empty account list. Not tied to good/bad news like
   .debt-clean (green, "debt-free"), just informational. */
.ci-empty-hint {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--ink-faint);
  padding: 0.4rem 0 0.75rem;
}

/* Inline add form */
.ci-add-form {
  background: var(--cream-dark);
  border-radius: var(--radius-lg);
  padding: 0.75rem 1rem;
  margin: 0.4rem 0 0.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 0;
  animation: fadeUp 0.3s ease forwards;
}
.ci-add-form__input,
.ci-add-form__select {
  font-family: var(--font-body);
  font-size: 0.82rem;
  background: var(--cream-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 0.65rem;
  color: var(--ink);
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}
.ci-add-form__input:focus,
.ci-add-form__select:focus {
  border-color: var(--ink);
}
.ci-add-form__extras {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ci-add-form__actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Tiny action buttons shared by add-form and confirm */
.ci-add-btn {
  font-family: var(--font-body);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius);
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  transform: none !important;
  filter: none !important;
}
.ci-add-btn--confirm {
  background: var(--ink);
  color: var(--cream);
}
.ci-add-btn--confirm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.paycheck-dup-warning {
  font-size: 0.78rem;
  color: #8B6914;
  background: #FEF6E3;
  border-radius: var(--radius);
  padding: 0.45rem 0.65rem;
}

.paycheck-dup-checkbox {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--ink-muted);
  cursor: pointer;
}
.paycheck-dup-checkbox input[type="checkbox"] {
  accent-color: var(--green);
  cursor: pointer;
}
.ci-add-btn--cancel {
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid var(--border);
}
.ci-add-btn--secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
  margin-right: auto;
}
.ci-confirm-yes {
  background: var(--red);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius);
  cursor: pointer;
  border: none;
  transition: opacity 0.2s;
  transform: none !important;
  filter: none !important;
}
.ci-confirm-no {
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
  transform: none !important;
  filter: none !important;
}

/* CSV import status + preview modal */
.ci-import-status {
  font-size: 0.8rem;
  color: var(--ink-muted);
}
.ci-import-status--error {
  color: var(--red);
}
.ci-import-summary {
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}
.ci-import-table-wrap {
  max-height: 420px;
}
.ci-import-desc-col {
  white-space: normal !important;
  min-width: 160px;
}
.ci-import-cat-select {
  width: auto;
  min-width: 130px;
}
.ci-import-bank-col {
  white-space: nowrap;
  font-size: 0.78rem;
  color: var(--ink-muted);
}

/* + Add trigger link-button */
.ci-add-trigger {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-faint);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0 0.15rem;
  text-align: left;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  transition: color 0.2s;
  transform: none !important;
  filter: none !important;
}
.ci-add-trigger:hover { color: var(--green); }

/* Restore toggle */
.ci-restore-toggle {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-faint);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
  transform: none !important;
  filter: none !important;
}
.ci-restore-toggle:hover { color: var(--ink-muted); }

/* Reset History trigger -- deliberately styled like a quiet, easy-to-miss
   link (same weight as the restore toggle), not a prominent button, so it's
   not easy to hit by accident. Hover tints crimson as the only hint that
   this one is destructive. */
.reset-history-trigger {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-faint);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
  transform: none !important;
  filter: none !important;
}
.reset-history-trigger:hover { color: var(--red); }

.reset-history-warning {
  font-size: 0.85rem;
  color: var(--ink-muted);
  line-height: 1.55;
  margin-bottom: 0.25rem;
}

.ci-restore-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.4rem 0 0.2rem;
}
.ci-restore-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--ink-muted);
}
.ci-restore-btn {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 500;
  padding: 0.2rem 0.55rem;
  background: var(--green-light);
  color: var(--green);
  border: 1px solid rgba(44,95,46,0.2);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
  transform: none !important;
  filter: none !important;
}
.ci-restore-btn:hover {
  background: var(--green);
  color: #fff;
}

/* Shared input style for RP name / day fields (not affected by delegation blur) */
.rp-inp {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid #d4cfc8;
  border-radius: 4px;
  padding: 6px 8px;
  min-width: 0;
  outline: none;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.rp-inp:focus {
  border-color: #2C5F2E;
}
.rp-inp::placeholder {
  color: var(--ink-faint);
  opacity: 0.45;
}

.rp-row {
  gap: 0.35rem;
}
.rp-row .rp-name-inp {
  flex: 1;
  min-width: 0;
  max-width: 127px;
  text-align: left;
}
.rp-row .rp-day-inp {
  width: 56px;
  flex-shrink: 0;
  text-align: center;
}
.rp-row .rp-amt-inp {
  flex: 0 0 84px;
  max-width: none;
}

/* ─── Custom Rules — status dots ─────────────────────────────────────────── */
.rule-dot {
  display: inline-flex;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: 8px;
  flex-shrink: 0;
}
.rule-dot--green  { background: #4ade80; }
.rule-dot--yellow { background: #fbbf24; }
.rule-dot--red    { background: #f87171; }

.account-row__value-wrap {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

/* ─── Custom Rules — back button ─────────────────────────────────────────── */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.4rem 0;
  margin-bottom: 0.75rem;
  transition: color 0.2s ease;
}
.btn-back:hover {
  color: var(--ink);
}

/* ─── Custom Rules — rule cards ──────────────────────────────────────────── */
.rules-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.rules-empty-msg {
  font-size: 0.85rem;
  font-style: italic;
  font-family: var(--font-display);
  color: var(--ink-muted);
  padding: 0.5rem 0 1rem;
}

.rule-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.rule-card--editing {
  border-color: var(--ink-muted);
  box-shadow: 0 0 0 1px var(--ink-muted);
}

.rule-card__label {
  flex: 1;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ink);
}

.rule-card__field {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.3rem;
}

.rule-card__desc {
  font-size: 0.82rem;
  font-style: italic;
  font-family: var(--font-display);
  color: var(--ink-muted);
  margin-bottom: 0.3rem;
}

.rule-card__value {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink);
}

/* ─── Custom Rules — add-rule form ───────────────────────────────────────── */
.rule-add-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.rule-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.rule-form-field__label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.rules-radio-group {
  display: flex;
  gap: 1.25rem;
}

.rules-radio-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
  cursor: pointer;
}

.rules-radio-option input[type="radio"] {
  accent-color: var(--green);
  cursor: pointer;
}

.btn-save--green {
  background: var(--green);
}

/* CI recurring total row */
.ci-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0 0;
  margin-top: 0.3rem;
  border-top: 1px solid var(--border);
}
.ci-total-lbl {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.ci-total-val {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* ─── Desktop ─────────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  body {
    padding-bottom: 0;
  }

  .bottom-nav {
    display: none;
  }

  .top-nav {
    display: flex;
    position: relative;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
    padding: 0 2rem;
    overflow-x: auto;
  }

  .top-nav .nav-item {
    flex-direction: row;
    gap: 6px;
    font-size: 0.7rem;
    padding: 0.85rem 1rem;
    flex: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--ink-faint);
  }

  .top-nav .nav-item.active {
    color: var(--ink);
    border-bottom-color: transparent; /* indicator handles this */
  }

  .top-nav .nav-item.active::before {
    display: none;
  }

  .top-nav .nav-item svg {
    width: 15px;
    height: 15px;
  }

  .app-header {
    height: 60px;
    padding: 0 2rem;
  }

  .app-main {
    max-width: 640px;
    padding: 2rem 2rem 3rem;
  }

  .net-worth-display {
    padding: 2.5rem 1rem 2rem;
  }
}

/* ─── iOS Safari compatibility ────────────────────────────────────────────── */
/* Inputs/selects below 16px trigger unwanted auto-zoom on focus in iOS Safari.
   Placed last so it wins the cascade over earlier same-specificity rules. */
.field-input,
.ci-add-form__input,
.ci-add-form__select,
.rp-inp,
.rp-pm-select,
.paycheck-inline-input {
  font-size: 16px;
}

/* Wider touch targets so labels (not just the tiny native control) are tappable */
.rules-radio-option,
.paycheck-dup-checkbox {
  min-height: 44px;
  padding: 0.4rem;
}

/* ─── Check-In: smaller resting text on mobile ───────────────────────────────
   Desktop keeps the 16px iOS-safe size above. On mobile we shrink resting
   text for a tighter layout, then bump back to 16px only while focused so
   iOS Safari's auto-zoom-on-focus never triggers. */
@media (max-width: 768px) {
  .field-input,
  .ci-add-form__input {
    font-size: 14px;
    padding: 4px 6px;
  }

  .field-label {
    font-size: 13px;
  }

  .rp-inp {
    font-size: 13px;
  }

  .ci-add-form__select,
  .rp-pm-select {
    font-size: 13px;
  }

  .field-input:focus,
  .ci-add-form__input:focus,
  .rp-inp:focus,
  .ci-add-form__select:focus,
  .rp-pm-select:focus {
    font-size: 16px;
  }

  /* Paycheck chips: claw back a little width on narrow phones so full
     names ("Student Loan Payments") still fit without truncating —
     trims padding/gaps/amount-width first, only touches font last. */
  .paycheck-card {
    padding: 20px 16px;
  }
  .paycheck-chip {
    gap: 0.35rem;
    padding: 0.5rem 0.5rem;
  }
  .paycheck-chip__amount {
    min-width: 56px;
  }

  /* Recurring-payment row (Check-In): day/amount/method columns were fixed
     widths sized for desktop and, combined, left the flexible name field
     almost no room on narrow phones (it was shrinking to ~16px — invisible).
     Trim the fixed columns and gap so the name gets a usable minimum. */
  .rp-row {
    gap: 0.25rem;
  }
  .rp-row .rp-name-inp {
    min-width: 64px;
    max-width: none;
  }
  .rp-row .rp-day-inp {
    width: 38px;
  }
  .rp-row .rp-amt-inp {
    flex-basis: 62px;
  }
  .rp-pm-select {
    flex-basis: 58px;
    width: 58px;
  }
}