/* ==========================================================================
   Taka Koi Gelo? — "Taka note" design system
   Paper background, banknote-green ink, coin-gold accents, terracotta for
   money going out. Mobile first; desktop layout from 720px.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  --paper: #f6f1e7;
  --surface: #fffdf8;
  --surface-2: #efe8d9;
  --line: #e2d9c6;
  --ink: #1c2b24;
  --ink-muted: #56645c;

  --note: #0e6b4f;          /* primary: banknote green */
  --note-strong: #0a5640;
  --on-note: #ffffff;
  --coin: #c9952b;          /* decorative gold: shapes only, not text */
  --coin-ink: #7d5810;      /* gold that passes contrast as text */
  --spend: #9a3f17;         /* expenses / money out */
  --on-spend: #ffffff;
  --warn: #8f5b00;
  --warn-bar: #c98a12;
  --danger: #a3261b;
  --danger-soft: #fbe7e4;
  --success-soft: #e3f1ea;

  --font-display: 'Bricolage Grotesque', 'Hind Siliguri', system-ui, sans-serif;
  --font-body: 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-bangla-display: 'Galada', 'Hind Siliguri', serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 1px 0 rgba(28, 43, 36, 0.04), 0 8px 24px -16px rgba(28, 43, 36, 0.25);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast: 150ms;

  --bottom-nav-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --paper: #111d18;
    --surface: #182a22;
    --surface-2: #1f342a;
    --line: #2c4237;
    --ink: #eee8da;
    --ink-muted: #a9b5ad;

    --note: #45c495;
    --note-strong: #6fd6ae;
    --on-note: #0b1a14;
    --coin: #e2b551;
    --coin-ink: #e9c46f;
    --spend: #f0915f;
    --on-spend: #1d0d05;
    --warn: #f2b544;
    --warn-bar: #e0a536;
    --danger: #ff8a7a;
    --danger-soft: #3a1d1a;
    --success-soft: #173328;
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 10px 28px -18px rgba(0, 0, 0, 0.8);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  /* room for the fixed bottom nav on phones */
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
}
body.is-anonymous { padding-bottom: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}
h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); font-weight: 700; }
h2 { font-size: 1.125rem; font-weight: 650; }

p { margin: 0 0 var(--space-3); }

a { color: var(--note); text-underline-offset: 3px; }
a:hover { color: var(--note-strong); }

:focus-visible {
  outline: 3px solid var(--note);
  outline-offset: 2px;
  border-radius: 4px;
}

[lang="bn"] { font-family: var(--font-body); }

.muted { color: var(--ink-muted); }
.small { font-size: 0.875rem; }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -48px; z-index: 50;
  background: var(--note); color: var(--on-note); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: var(--space-2); }

.container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-7);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  /* Solid, not backdrop-filter: a filter would make this header the
     containing block for the position:fixed bottom nav inside it. */
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header-inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  min-height: 56px;
}

.brand {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
}
.brand:hover { color: var(--ink); }
.brand-mark {
  width: 22px; height: 22px; align-self: center; flex: none;
}
.brand-bn {
  font-family: var(--font-bangla-display); font-weight: 400;
  color: var(--coin-ink); font-size: 1.1rem;
}

.brand span, .header-actions a, .link-button { white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.header-user { color: var(--ink-muted); font-size: 0.9rem; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Narrow phones: keep the header to one line. The dashboard already
   greets the user by name, and the Bangla title appears on the landing page. */
@media (max-width: 479px) {
  .brand-bn, .header-user { display: none; }
}
/* Tablet / small laptop: the inline nav (4 links) needs the room. */
@media (min-width: 720px) and (max-width: 1023px) {
  .brand-bn, .header-user { display: none; }
  .main-nav a svg { display: none; }       /* five text links still fit */
  .main-nav a { padding: var(--space-2); }
}

/* Primary nav: bottom tab bar on phones, inline in the header on desktop. */
.main-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.main-nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 44px;
  color: var(--ink-muted); text-decoration: none; font-size: 0.75rem; font-weight: 600;
}
.main-nav a svg { width: 22px; height: 22px; }
.main-nav a[aria-current="page"] { color: var(--note); }
.main-nav a.nav-add { color: var(--spend); }
.main-nav a.nav-desktop-only { display: none; }   /* Budget: reachable from the dashboard card on phones */

@media (min-width: 720px) {
  body { padding-bottom: 0; }
  .main-nav {
    position: static; display: flex; gap: var(--space-1);
    height: auto; padding: 0; background: none; border: 0;
  }
  .main-nav a {
    flex-direction: row; gap: var(--space-2);
    padding: var(--space-2) var(--space-3); border-radius: 999px; font-size: 0.9rem;
  }
  .main-nav a svg { width: 18px; height: 18px; }
  .main-nav a:hover { background: var(--surface-2); color: var(--ink); }
  .main-nav a[aria-current="page"] { background: var(--surface-2); color: var(--ink); }
  .main-nav a.nav-add { display: none; }  /* desktop has the add buttons on the page */
  .main-nav a.nav-desktop-only { display: flex; }
}

/* ---------- Buttons ---------- */
.button, button.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-5);
  border: 1px solid transparent; border-radius: 999px;
  background: var(--note); color: var(--on-note);
  font: 600 1rem/1 var(--font-body);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.button:hover { background: var(--note-strong); color: var(--on-note); }
.button:active { transform: translateY(1px); }
.button.button-expense { background: var(--spend); color: var(--on-spend); }
.button.button-expense:hover { background: color-mix(in srgb, var(--spend) 85%, black); color: var(--on-spend); }
.button.button-danger { background: var(--danger); color: #fff; }
.button.button-quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.button.button-quiet:hover { background: var(--surface-2); }
.button svg { width: 18px; height: 18px; }

.link-button {
  background: none; border: 0; padding: var(--space-2) 0; min-height: 44px;
  font: inherit; font-size: 0.9rem; color: var(--note); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Messages ---------- */
.messages { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.message {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  background: var(--success-soft); border-left: 4px solid var(--note);
}
.message-error { background: var(--danger-soft); border-left-color: var(--danger); }

/* ---------- Cards / panels ---------- */
.panel, .stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow);
}
.panel { margin-bottom: var(--space-4); }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); }
.panel-head h2 { margin: 0; }
.panel-head a { font-size: 0.9rem; min-height: 44px; display: inline-flex; align-items: center; }

.page-head {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  align-items: center; justify-content: space-between;
  margin-bottom: var(--space-4);
}
.page-head h1 { margin: 0; }
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- Dashboard hero ---------- */
.hero {
  display: grid; gap: var(--space-4);
  grid-template-columns: 1fr;
  align-items: stretch;
  margin-bottom: var(--space-4);
}
.balance-card {
  background: var(--note); color: var(--on-note);
  border-radius: var(--radius-lg); padding: var(--space-5);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-4);
  position: relative; overflow: hidden;
}
/* faint guilloche-style rings, like the security pattern on a note */
.balance-card::after {
  content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--on-note) 18%, transparent);
  box-shadow: 0 0 0 18px color-mix(in srgb, var(--on-note) 5%, transparent),
              0 0 0 36px color-mix(in srgb, var(--on-note) 4%, transparent);
  pointer-events: none;
}
.balance-label { font-size: 0.9rem; opacity: 0.9; }
.balance-value { font-family: var(--font-display); font-size: clamp(2.2rem, 1.6rem + 3vw, 3.25rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.balance-card .negative { color: inherit; }
.balance-note { font-size: 0.85rem; opacity: 0.85; margin: 0; }
.balance-split { display: grid; gap: var(--space-3); }
.split-bar { height: 10px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--on-note) 14%, transparent); }
.split-bar span { display: block; height: 100%; background: var(--on-note); border-radius: 999px; }
.split-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.split-pair > div { border-radius: var(--radius-sm); padding: var(--space-3); background: color-mix(in srgb, var(--on-note) 10%, transparent); min-width: 0; }
.split-pair > div:first-child { box-shadow: inset 4px 0 0 var(--on-note); }   /* matches the filled part of the bar */
.split-pair span { display: block; font-size: 0.8rem; opacity: 0.9; }
.split-pair strong { font-family: var(--font-display); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.split-detail { display: block; font-size: 0.78rem; margin-top: 2px; overflow-wrap: anywhere; }
.split-warning {
  margin: 0; padding: var(--space-3); border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600;
  background: var(--danger-soft); color: var(--danger);
}
.split-warning a { color: inherit; }
.month-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.month-pair div {
  background: color-mix(in srgb, var(--on-note) 10%, transparent);
  border-radius: var(--radius-sm); padding: var(--space-3);
}
.month-pair span { display: block; font-size: 0.8rem; opacity: 0.9; }
.month-pair strong { font-family: var(--font-display); font-size: 1.15rem; font-variant-numeric: tabular-nums; }

.wallet-stage {
  position: relative;
  min-height: 240px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--coin) 16%, transparent), transparent 60%),
    var(--surface-2);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  overflow: hidden;
}
.wallet-stage > svg { width: min(70%, 260px); height: auto; transition: opacity 300ms var(--ease); }

/* 3D layer: fades in over the SVG once the first frame is drawn. */
.wallet-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 400ms var(--ease);
  touch-action: pan-y;  /* never block page scrolling on phones */
}
.wallet-stage.is-3d .wallet-canvas { opacity: 1; }
.wallet-stage.is-3d > svg { opacity: 0; }

.wallet-status {
  position: absolute; left: var(--space-4); bottom: var(--space-3); margin: 0;
  font-size: 0.8rem; color: var(--ink-muted);
  display: none;
}
.wallet-stage.is-loading .wallet-status { display: block; }

@media (min-width: 720px) {
  .hero { grid-template-columns: 1.1fr 1fr; }
  .wallet-stage { min-height: 300px; }
}

/* ---------- Budget ---------- */
.budget-figures { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }
.budget-figures strong { font-family: var(--font-display); font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.bar { height: 12px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--note); border-radius: inherit; }
.bar-thin { height: 8px; }
.budget-warning .bar > span { background: var(--warn-bar); }
.budget-over .bar > span { background: var(--danger); }
.budget-remaining { margin: var(--space-2) 0 0; }
.budget-warning .budget-remaining strong { color: var(--warn); }
.budget-over .budget-remaining { color: var(--danger); }
.pill {
  display: inline-block; padding: 2px var(--space-2); border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
  background: var(--surface-2); color: var(--ink-muted);
}
.budget-warning .pill { background: color-mix(in srgb, var(--warn-bar) 20%, transparent); color: var(--warn); }
.budget-over .pill { background: var(--danger-soft); color: var(--danger); }

/* ---------- Insights ---------- */
.insights { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.insights li {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2);
}
.insights li::before {
  content: ''; flex: none; width: 10px; height: 10px; margin-top: 7px;
  border-radius: 50%; background: var(--coin); box-shadow: inset 0 0 0 2px color-mix(in srgb, black 15%, var(--coin));
}

/* ---------- Two columns ---------- */
.two-col { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.two-col .panel { margin-bottom: 0; }
@media (min-width: 720px) { .two-col { grid-template-columns: 1fr 1fr; } }

/* ---------- Category bars ---------- */
.category-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.category-row { display: flex; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); }
.category-row .num { font-weight: 600; }
.category-bars .bar > span { background: var(--spend); }

/* ---------- Transactions ---------- */
.tx-list { list-style: none; padding: 0; margin: 0; }
.tx {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--line);
}
.tx:last-child { border-bottom: 0; }
.tx-icon {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-family: var(--font-display);
}
.tx-income .tx-icon { background: var(--success-soft); color: var(--note); }
.tx-expense .tx-icon { background: color-mix(in srgb, var(--spend) 14%, transparent); color: var(--spend); }
.tx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tx-main strong { font-weight: 600; }
.tx-meta { color: var(--ink-muted); font-size: 0.85rem; }
.tx-note { font-size: 0.875rem; color: var(--ink-muted); overflow-wrap: anywhere; }
.tx-side { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; }
.tx-amount { font-family: var(--font-display); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-income .tx-amount { color: var(--note); }
.tx-expense .tx-amount { color: var(--spend); }
.tx-links { display: flex; gap: var(--space-1); }
.tx-links a { font-size: 0.85rem; padding: var(--space-2); min-height: 36px; display: inline-flex; align-items: center; }

.empty {
  text-align: center; padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--line); border-radius: var(--radius);
}

/* ---------- Filters ---------- */
.filters {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
  align-items: end; margin-bottom: var(--space-4);
}
.filters label { display: flex; flex-direction: column; gap: var(--space-1); font-size: 0.85rem; font-weight: 600; }
/* Let grid cells shrink below a control's built-in minimum width. */
.filters label, .filters input, .filters select { min-width: 0; }
.filter-buttons { display: flex; gap: var(--space-3); align-items: center; grid-column: 1 / -1; }
@media (min-width: 720px) {
  .filters { grid-template-columns: repeat(4, 1fr) auto; }
  .filter-buttons { grid-column: auto; }
}

/* ---------- Forms ---------- */
input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;  /* 16px stops iOS zooming into fields */
}
input:hover, select:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); }
input:focus-visible, select:focus-visible { outline-offset: 0; border-color: var(--note); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); }

.form-card {
  max-width: 460px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow);
}
.form-card h1 { font-size: 1.6rem; }
.form-card .lede { color: var(--ink-muted); }
.form-card form > div:not(.form-buttons) { margin-bottom: var(--space-4); }
.form-card label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.helptext { display: block; color: var(--ink-muted); font-size: 0.85rem; margin-top: var(--space-1); }
.helptext ul { margin: var(--space-1) 0 0; padding-left: 18px; }
.errorlist {
  list-style: none; margin: 0 0 var(--space-1); padding: 0;
  color: var(--danger); font-size: 0.9rem; font-weight: 600;
}
.errorlist.nonfield { background: var(--danger-soft); padding: var(--space-3); border-radius: var(--radius-sm); }
.form-buttons { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: var(--space-5); }
.form-footer { margin: var(--space-4) 0 0; text-align: center; }

.kind-tag {
  display: inline-block; margin-left: var(--space-2);
  font-family: var(--font-bangla-display); font-weight: 400; font-size: 1.1rem;
}
.kind-income { color: var(--note); }
.kind-expense { color: var(--spend); }

.delete-summary {
  background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
}

/* ---------- Landing ---------- */
.landing {
  display: grid; gap: var(--space-6); align-items: center;
  padding: var(--space-5) 0;
}
.landing-kicker { font-family: var(--font-bangla-display); color: var(--coin-ink); font-size: 1.5rem; margin: 0 0 var(--space-2); }
.landing h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem); max-width: 16ch; }
.landing .lede { font-size: 1.1rem; color: var(--ink-muted); max-width: 46ch; }
.landing .actions { margin-top: var(--space-5); }
.feature-list { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; gap: var(--space-3); }
.feature-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.feature-list li::before {
  content: ''; flex: none; width: 12px; height: 12px; margin-top: 6px;
  border-radius: 50%; background: var(--coin);
}
@media (min-width: 720px) { .landing { grid-template-columns: 1.2fr 1fr; min-height: 60vh; } }

/* ---------- Stats page ---------- */
.stats {
  display: grid; gap: var(--space-3); margin-bottom: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.stat { display: flex; flex-direction: column; gap: var(--space-1); }
.stat-label { font-size: 0.9rem; color: var(--ink-muted); font-weight: 600; }
.stat-value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-value.negative { color: var(--danger); }
.chart-legend {
  list-style: none; margin: 0 0 var(--space-3); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  font-size: 0.85rem; color: var(--ink-muted);
}
.chart-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.swatch-income { background: var(--note); }
.swatch-expense { background: var(--spend); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-surplus { background: var(--note); }
.dot-deficit { background: var(--danger); }
.legend-heading { font-weight: 700; color: var(--ink); }
.shape { font-size: 0.8rem; line-height: 1; }
.shape-surplus { color: var(--note); }
.shape-deficit { color: var(--danger); }
.dot-no_income { background: transparent; box-shadow: inset 0 0 0 2px var(--ink-muted); }
.marker-sample { color: var(--danger); font-weight: 800; }

.chart-wrap { width: 100%; }
.chart-swipe-hint { display: none; }
@media (max-width: 719px) {
  /* Keep labels readable on phones: the chart scrolls inside its card
     (never the page). rtl on the wrapper starts the scroll at the newest
     month; ltr on the svg keeps the drawing itself the right way round. */
  .chart-wrap { overflow-x: auto; direction: rtl; -webkit-overflow-scrolling: touch; }
  .bar-chart { min-width: 600px; direction: ltr; }
  .chart-swipe-hint { display: block; }
}
.bar-chart { width: 100%; height: auto; display: block; overflow: visible; }
.bar-chart .grid-line { stroke: var(--line); stroke-width: 1; }
.bar-chart .axis-label { fill: var(--ink-muted); font: 500 17px var(--font-body); }
.bar-chart .month-label { fill: var(--ink); font: 600 18px var(--font-body); }
.bar-chart .year-label { fill: var(--ink-muted); font: 500 15px var(--font-body); }
.bar-chart .bar-income { fill: var(--note); }
.bar-chart .bar-expense { fill: var(--spend); }
.bar-chart .mark-surplus { fill: var(--note); }
.bar-chart .mark-deficit { fill: var(--danger); }
.bar-chart circle.dot-no_income { fill: none; stroke: var(--ink-muted); stroke-width: 2.5; }
.bar-chart circle.dot-even, .bar-chart circle.dot-empty { fill: var(--line); }
.bar-chart circle.dot-future { fill: none; }
.bar-chart .month.is-future .month-label { fill: var(--ink-muted); opacity: 0.6; }
.bar-chart .over-marker { fill: var(--danger); font: 800 20px var(--font-display); }
.bar-chart .month.is-current .bar-income,
.bar-chart .month.is-current .bar-expense { opacity: 0.6; }   /* month still in progress */
.bar-chart .month:hover .hit { fill: color-mix(in srgb, var(--ink) 5%, transparent); }

.table-wrap { overflow-x: auto; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.stats-table th, .stats-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.stats-table thead th { font-size: 0.8rem; color: var(--ink-muted); font-weight: 600; }
.stats-table tbody th { font-weight: 600; }
.stats-table .num-col { text-align: right; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.tag {
  display: inline-block; padding: 1px var(--space-2); border-radius: 999px;
  font: 700 0.72rem/1.6 var(--font-body); letter-spacing: 0.02em; vertical-align: middle;
}
.tag-surplus { background: var(--success-soft); color: var(--note); }
.tag-deficit { background: var(--danger-soft); color: var(--danger); }
.tag-neutral { background: var(--surface-2); color: var(--ink-muted); }

.segmented { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.segmented a {
  min-height: 44px; padding: 0 var(--space-4); display: inline-flex; align-items: center;
  border-radius: 999px; color: var(--ink-muted); font-weight: 600; text-decoration: none;
}
.segmented a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

.period-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; }
.period-form label { display: flex; flex-direction: column; gap: var(--space-1); font-size: 0.85rem; font-weight: 600; min-width: 0; flex: 1 1 140px; }
.period-form .button { flex: 0 0 auto; }
.period-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); margin: var(--space-2) 0 var(--space-4); }
.period-head h2 { margin: 0; text-align: center; font-size: 1.35rem; }
.period-head h2:only-child { grid-column: 1 / -1; text-align: left; }
.period-head .period-step { font-size: 0.9rem; min-height: 44px; display: inline-flex; align-items: center; }
.period-head .period-step:last-child { justify-self: end; }
.stat-value.muted { font-size: 1.15rem; color: var(--ink-muted); }

/* ---------- Dashboard: allowance and pace ---------- */
.dash-row { margin-bottom: var(--space-4); }
.allowance-value { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; margin: var(--space-1) 0; font-variant-numeric: tabular-nums; }
.allowance-value.negative { color: var(--danger); }
.pace-chart polyline, .pace-chart .pace-budget { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.pace-chart .pace-current { stroke: var(--spend); stroke-width: 3.5; }
.pace-chart .pace-previous { stroke: var(--ink-muted); stroke-width: 2; opacity: 0.55; }
.pace-chart .pace-budget { stroke: var(--ink-muted); stroke-width: 2; stroke-dasharray: 8 7; }
.pace-chart .pace-today { stroke: var(--line); stroke-width: 1.5; }
.pace-chart .pace-dot { fill: var(--spend); stroke: var(--surface); stroke-width: 3; }
.line-key { display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--spend); }
.line-key.line-budget { border-top: 2px dashed var(--ink-muted); }
.line-key.line-previous { border-top: 2px solid var(--ink-muted); opacity: 0.55; }
.mini-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }

/* ---------- Year charts: categories and budget ---------- */
/* Fixed colour per expense category. Every colour is at least 3:1 against the card background in both modes. */
:root {
  --cat-food: #2a78d6; --cat-transport: #eb6834; --cat-shopping: #a87400; --cat-education: #14916a;
  --cat-entertainment: #cc4f82; --cat-bills: #6250d6; --cat-health: #e34948; --cat-other: #8f8b80;
}
@media (prefers-color-scheme: dark) {
  :root {
    --cat-food: #3987e5; --cat-transport: #d95926; --cat-shopping: #c98500; --cat-education: #199e70;
    --cat-entertainment: #d55181; --cat-bills: #9085e9; --cat-health: #e66767; --cat-other: #8f8b80;
  }
}
.cat-food { fill: var(--cat-food); background: var(--cat-food); }
.cat-transport { fill: var(--cat-transport); background: var(--cat-transport); }
.cat-shopping { fill: var(--cat-shopping); background: var(--cat-shopping); }
.cat-education { fill: var(--cat-education); background: var(--cat-education); }
.cat-entertainment { fill: var(--cat-entertainment); background: var(--cat-entertainment); }
.cat-bills { fill: var(--cat-bills); background: var(--cat-bills); }
.cat-health { fill: var(--cat-health); background: var(--cat-health); }
.cat-other_expense { fill: var(--cat-other); background: var(--cat-other); }
.category-row .swatch { vertical-align: -1px; }
/* Budget = outlined bar: the outline uses muted ink, which passes 3:1 in both modes. */
.bar-chart .bar-budget { fill: color-mix(in srgb, var(--ink-muted) 18%, transparent); stroke: var(--ink-muted); stroke-width: 1.5; }
.swatch-budget { background: color-mix(in srgb, var(--ink-muted) 18%, transparent); box-shadow: inset 0 0 0 1.5px var(--ink-muted); }
.bar-chart .bar-within, .swatch-within { fill: var(--note); background: var(--note); }
.bar-chart .bar-over, .swatch-over { fill: var(--danger); background: var(--danger); }
.bar-chart .bar-nobudget, .swatch-nobudget { fill: var(--ink-muted); background: var(--ink-muted); }

/* ---------- Month view: daily spending, calendar, payment methods ---------- */
:root {
  /* Calendar shading: none, then four amber steps; text colour picked per step for at least 4.5:1. */
  --lvl-1: #f7e3b5; --lvl-2: #eec46b; --lvl-3: #c9861f; --lvl-4: #8a5a0f;
  --lvl-ink-light: #4a3305; --lvl-ink-dark: #fff6e3; --lvl-3-ink: #2a1d03;
}
@media (prefers-color-scheme: dark) {
  :root { --lvl-1: #3d3418; --lvl-2: #6b5418; --lvl-3: #bf8726; --lvl-4: #e7b04a; --lvl-ink-light: #fff6e3; --lvl-ink-dark: #2a1d03; --lvl-3-ink: #2a1d03; }
}
.segmented-sm a { min-height: 44px; padding: 0 var(--space-3); font-size: 0.9rem; }
.daily-chart .bar-day { fill: color-mix(in srgb, var(--spend) 55%, var(--surface)); }
.daily-chart .bar-day-max { fill: var(--spend); }
.daily-chart .day:hover .hit { fill: color-mix(in srgb, var(--ink) 5%, transparent); }
.calendar { display: grid; gap: 4px; max-width: 620px; }   /* compact on wide screens */
.calendar-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendar-head span { text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--ink-muted); }
.calendar-cell {
  aspect-ratio: 1 / 0.85; min-height: 44px; border-radius: 8px; padding: 4px 6px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--surface-2); color: var(--ink); font-variant-numeric: tabular-nums;
}
.calendar-cell.is-blank { background: transparent; }
.calendar-cell.is-future { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-muted); }
.calendar-day { font-size: 0.8rem; font-weight: 600; }
.calendar-amount { font-size: 0.72rem; align-self: flex-end; }
.calendar-cell.level-1, .swatch.level-1 { background: var(--lvl-1); color: var(--lvl-ink-light); }
.calendar-cell.level-2, .swatch.level-2 { background: var(--lvl-2); color: var(--lvl-ink-light); }
.calendar-cell.level-3, .swatch.level-3 { background: var(--lvl-3); color: var(--lvl-3-ink); }   /* dark text: 5.4:1 light, 5.3:1 dark */
.calendar-cell.level-4, .swatch.level-4 { background: var(--lvl-4); color: var(--lvl-ink-dark); }
.swatch.level-0 { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.calendar-legend { margin-top: var(--space-3); align-items: center; }
a.calendar-cell { text-decoration: none; }
a.calendar-cell:hover { box-shadow: inset 0 0 0 2px var(--note); }
.daily-chart a:hover .bar-day { fill: var(--spend); }
.daily-chart a:focus-visible .hit { stroke: var(--note); stroke-width: 3; }
.bar-pay > span { background: var(--note); }

/* ---------- Day page ---------- */
.day-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.day-head h1 { margin: 0; text-align: center; font-size: clamp(1.25rem, 1rem + 1.5vw, 1.75rem); }
.day-head .button { padding: 0 var(--space-3); white-space: nowrap; }
.day-actions { margin-bottom: var(--space-4); }
/* Totals stay one compact row of three, even on phones, so the transactions stay in view. */
.stats.day-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
@media (max-width: 479px) {
  .day-stats .stat { padding: var(--space-3); }
  .day-stats .stat-value { font-size: 1.05rem; }
  .day-stats .stat-label { font-size: 0.8rem; }
}
@media (max-width: 479px) {
  .day-head { grid-template-columns: 1fr 1fr; }
  .day-head h1 { grid-column: 1 / -1; grid-row: 1; }
  .day-head > :last-child { justify-self: end; }
}

/* ---------- Monthly report ---------- */
.report-groups { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.report-heading { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin: 0 0 var(--space-2); }
.insights li.tone-up::before { background: var(--spend); }
.insights li.tone-down::before { background: var(--note); }
.insights li.tone-same::before, .insights li.tone-neutral::before { background: var(--ink-muted); box-shadow: none; }
.insights li.tone-saving::before { background: var(--coin); }

/* ---------- Savings goals ---------- */
.goal-section { margin-bottom: var(--space-5); }
.section-title { font-size: 1rem; color: var(--ink-muted); margin-bottom: var(--space-3); }
.goal-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.goal-grid .panel { margin-bottom: 0; }
.goal-card h2 { font-size: 1.05rem; }
.goal-card h2 a { color: var(--ink); text-decoration: none; }
.goal-card h2 a:hover { text-decoration: underline; }
.goal-figures { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; margin-bottom: var(--space-2); }
.goal-figures strong { font-size: 1.35rem; font-family: var(--font-display); }
.goal-meta { margin: var(--space-2) 0 0; }
.goal-actions { margin-top: var(--space-4); }
.form-error { background: var(--danger-soft); color: var(--danger); padding: var(--space-3); border-radius: var(--radius-sm); }
/* Added / Taken out choice on the goal form: two pill-style options side by side. */
#id_kind { display: flex; gap: var(--space-2); flex-wrap: wrap; padding: 0; margin: 0; }
#id_kind > div { display: contents; }
#id_kind label {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px;
  padding: var(--space-2) var(--space-4); border: 1px solid var(--line); border-radius: 999px;
  font-weight: 600; cursor: pointer;
}
#id_kind label:has(input:checked) { background: var(--surface-2); border-color: var(--note); }
#id_kind input { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; accent-color: var(--note); }
fieldset:has(#id_kind) { border: 0; padding: 0; margin: 0 0 var(--space-2); min-width: 0; }
fieldset:has(#id_kind) legend { padding: 0; margin-bottom: var(--space-2); font-weight: 600; }
#add { scroll-margin-top: 96px; }   /* clear the sticky header when jumped to */
.goal-card.is-complete .bar > span { background: var(--coin); }
.stacked-form > div:not(.form-buttons) { margin-bottom: var(--space-3); }
.stacked-form label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.on-note-link { color: inherit; text-decoration: underline; }
.on-note-link:hover { color: inherit; }
.back-link { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Pagination ---------- */
.pagination { display: flex; gap: var(--space-4); justify-content: center; align-items: center; margin-top: var(--space-4); }
.pagination a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}