/* Spendbook — dense, numbers-forward financial UI.
   Tokens first; palette chosen for a ledger feel, not a template feel. */

:root {
  --ink: #1A1F28;
  --ink-2: #3D4552;
  --ink-3: #667085;
  --ink-4: #98A2B3;
  --paper: #F7F8FA;
  --card: #FFFFFF;
  --line: #E4E7EC;
  --line-soft: #EEF0F4;
  --accent: #0E7A4D;
  --accent-ink: #FFFFFF;
  --accent-soft: #E7F4EE;
  --neg: #B42318;
  --neg-soft: #FDECEA;
  --warn: #B58105;
  --warn-soft: #FBF3E2;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --font-body: 'Public Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { max-width: 1060px; margin: 0 auto; padding: 1.6rem 1.25rem 3rem; }
h1, h2, h3 { margin: 0; letter-spacing: -.01em; }
h1 { font-size: 1.35rem; font-weight: 600; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
svg { display: block; }
:focus-visible { outline: 2px solid #175CD3; outline-offset: 2px; border-radius: 4px; }

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

/* ---------- Top bar ---------- */
.topbar { background: var(--card); border-bottom: 1px solid var(--line); }
.topbar-in {
  max-width: 1060px; margin: 0 auto; padding: 0 1.25rem;
  display: flex; align-items: center; gap: 1.5rem; min-height: 56px;
}
.brand {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.08rem;
  color: var(--ink); letter-spacing: -.01em;
}
.brand:hover { text-decoration: none; }
.brand svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; }
.nav { display: flex; gap: .25rem; flex: 1; }
.nav a {
  padding: .42rem .7rem; border-radius: var(--radius-sm);
  color: var(--ink-2); font-weight: 500; font-size: .92rem;
}
.nav a:hover { background: var(--line-soft); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.top-actions { display: flex; align-items: center; gap: .75rem; }
.who {
  color: var(--ink-3); font-size: .85rem; max-width: 12ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Buttons, inputs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-weight: 600; font-size: .9rem;
  padding: .48rem .95rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: #0B6B43; }
.btn.ghost { background: var(--card); color: var(--ink-2); border-color: var(--line); }
.btn.ghost:hover { background: var(--line-soft); }
.btn.danger { background: var(--card); color: var(--neg); border-color: #F1C4BF; }
.btn.danger:hover { background: var(--neg-soft); }
.btn.block { width: 100%; }
.btn.icon-btn { padding: .42rem .5rem; }
.btn.icon-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.icon-btn.spacer { visibility: hidden; }
.btn[disabled] { opacity: .55; cursor: default; }

.linklike {
  background: none; border: 0; padding: 0; font: inherit; font-size: .82rem;
  color: var(--ink-3); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.linklike:hover { color: var(--neg); }

label, .label { display: block; font-weight: 600; font-size: .82rem; color: var(--ink-2); margin-bottom: .3rem; }
.opt { font-weight: 400; color: var(--ink-4); }
input, select {
  font: inherit; color: var(--ink); width: 100%;
  padding: .48rem .65rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card);
}
input::placeholder { color: var(--ink-4); }
input:focus, select:focus { outline: none; border-color: #175CD3; box-shadow: 0 0 0 3px rgba(23, 92, 211, .13); }
.hint { color: var(--ink-3); font-size: .8rem; margin: .35rem 0 0; line-height: 1.45; }

.input-wrap { position: relative; }
.input-wrap .prefix {
  position: absolute; left: .65rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); font-size: .9rem; pointer-events: none;
}
.input-wrap input { padding-left: 1.55rem; }

.field { min-width: 0; }
.field.grow { flex: 1 1 160px; }

/* ---------- Flash ---------- */
.flash {
  max-width: 1060px; margin: .8rem auto 0; padding: .55rem .9rem;
  border-radius: var(--radius-sm); font-size: .88rem; font-weight: 500;
  display: flex; gap: .5rem; align-items: flex-start;
}
.flash svg { width: 15px; height: 15px; margin-top: .12rem; fill: none; stroke-width: 2; stroke-linecap: round; }
.flash-ok { background: var(--accent-soft); color: #085C3A; }
.flash-ok svg { stroke: #085C3A; }
.flash-err { background: var(--neg-soft); color: var(--neg); }
.flash-err svg { stroke: var(--neg); }

/* ---------- Page head ---------- */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin: .4rem 0 1.3rem; flex-wrap: wrap;
}
.page-sub { color: var(--ink-3); margin: .25rem 0 0; font-size: .92rem; max-width: 60ch; }

.month-nav { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.month-label {
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  min-width: 9.5ch; text-align: center;
}

/* ---------- Stat grid ---------- */
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: .8rem;
}
.stat, .panel, .add-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.stat { padding: .95rem 1.05rem; }
.stat h2, .panel h2, .add-card h2 {
  font-size: .78rem; font-weight: 600; color: var(--ink-3);
  letter-spacing: .02em; text-transform: none;
}
.stat-num {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.65rem; margin-top: .3rem; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.stat-num.muted { color: var(--ink-4); }
.stat-num.neg { color: var(--neg); }
.stat-foot {
  margin-top: .35rem; font-size: .8rem; color: var(--ink-3);
  display: flex; gap: .35rem; flex-wrap: wrap; align-items: baseline;
}
.stat-foot .accent { color: var(--accent); font-weight: 600; }

.bar {
  height: 7px; background: var(--line-soft); border-radius: 99px;
  margin-top: .55rem; overflow: hidden;
}
.bar-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .4s ease; }
.bar-over .bar-fill { background: var(--neg); }

.callout {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .6rem .9rem; border-radius: var(--radius-sm);
  font-size: .88rem; margin: 0 0 .8rem; border: 1px solid;
}
.callout svg { width: 16px; height: 16px; margin-top: .1rem; fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.callout-warn { background: var(--warn-soft); border-color: #F0DCA8; color: #6B4E00; }
.callout-warn svg { stroke: #6B4E00; }
.callout-err { background: var(--neg-soft); border-color: #F1C4BF; color: var(--neg); }
.callout-err svg { stroke: var(--neg); }
.callout p { margin: 0; }

/* ---------- Add form ---------- */
.add-card { padding: 1rem 1.05rem; margin-bottom: .8rem; }
.add-grid {
  display: grid; grid-template-columns: 130px 1fr 170px 1fr;
  gap: .8rem; margin-top: .7rem;
}
.add-actions { display: flex; gap: .6rem; margin-top: .9rem; }

/* ---------- Panels & columns ---------- */
.dash-cols { display: grid; grid-template-columns: 3fr 2fr; gap: .8rem; margin-bottom: .8rem; }
.panel { padding: 1rem 1.05rem; }
.panel.narrow { max-width: 620px; }
.panel.side { align-self: start; }
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem; margin-bottom: .7rem;
}
.panel-sub { color: var(--ink-4); font-size: .8rem; white-space: nowrap; }
.see-all { font-size: .84rem; font-weight: 600; }

.chart { width: 100%; height: auto; }
.gridline { stroke: var(--line-soft); stroke-width: 1; }
.axis-label {
  font-size: 10px; fill: var(--ink-4); font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}
.bar-g rect { fill: #9DB4C8; transition: fill .15s; }
.bar-g:hover rect { fill: #6E8BA3; }
.bar-g.bar-today rect { fill: var(--accent); }
.bar-g.bar-today:hover rect { fill: #0B6B43; }

/* ---------- Lists & tables ---------- */
.cat-list, .cat-admin { list-style: none; margin: 0; padding: 0; }
.cat-list li, .cat-admin li {
  display: flex; align-items: center; gap: .6rem;
  padding: .42rem 0; border-bottom: 1px solid var(--line-soft);
  font-size: .9rem;
}
.cat-list li:last-child, .cat-admin li:last-child { border-bottom: 0; }
.cat-name { flex: 1; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-n { color: var(--ink-4); font-size: .8rem; white-space: nowrap; }
.cat-amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.cat-pct { color: var(--ink-4); font-size: .8rem; width: 3.2ch; text-align: right; font-variant-numeric: tabular-nums; }

.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot.big { width: 11px; height: 11px; }

.tag {
  display: inline-block; padding: .12rem .5rem; border-radius: 99px;
  font-size: .76rem; font-weight: 600;
  background: color-mix(in srgb, var(--tag, #475467) 12%, white);
  color: color-mix(in srgb, var(--tag, #475467) 80%, black);
  white-space: nowrap;
}
.tag.default { background: var(--line-soft); color: var(--ink-3); }

.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th {
  text-align: left; font-size: .76rem; font-weight: 600; color: var(--ink-3);
  padding: .35rem .55rem; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl td { padding: .5rem .55rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: #FAFBFC; }
.tbl .num, .tbl .amt { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .amt { font-weight: 600; white-space: nowrap; }
.date-cell { color: var(--ink-2); white-space: nowrap; width: 5.5ch; }
.note-cell { max-width: 0; width: 42%; }
.note-cell .none { color: var(--ink-4); }
.actions-col { width: 8rem; }
.row-actions { display: flex; gap: .7rem; align-items: center; }
td.row-actions { opacity: 0; }
tr:hover td.row-actions, tr:focus-within td.row-actions { opacity: 1; }
tr td.row-actions form { display: inline; }
.note-cell .row-actions { margin-top: .15rem; }

/* ---------- Empty / error states ---------- */
.empty {
  padding: 1.4rem 1rem; text-align: center; color: var(--ink-2);
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
}
.empty p { margin: 0 0 .3rem; }
.empty .hint { margin-top: .1rem; }
.empty form { margin-top: .8rem; }

.form-errors {
  background: var(--neg-soft); border: 1px solid #F1C4BF; color: var(--neg);
  border-radius: var(--radius-sm); padding: .55rem .85rem; margin-bottom: .8rem;
  font-size: .88rem;
}
.form-errors p { margin: .15rem 0; }

.err { color: var(--neg); font-size: .8rem; margin: .3rem 0 0; display: none; }
.err.show { display: block; }

/* ---------- Filters ---------- */
.filters {
  display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap;
  padding-bottom: .8rem; border-bottom: 1px solid var(--line-soft); margin-bottom: .6rem;
}
.filters .field { flex: 0 1 180px; }
.filter-actions { display: flex; gap: .5rem; }
.list-meta { color: var(--ink-3); font-size: .84rem; margin-bottom: .5rem; }

/* ---------- Auth pages ---------- */
.auth-wrap { min-height: calc(100vh - 220px); display: flex; align-items: center; justify-content: center; padding: 1.5rem 0; }
.auth-card {
  width: 100%; max-width: 380px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.8rem 1.7rem 1.5rem;
}
.auth-mark {
  display: flex; align-items: center; gap: .5rem; margin-bottom: 1.2rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
}
.auth-mark svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; }
.auth-card h1 { font-family: var(--font-display); font-size: 1.45rem; margin-bottom: .3rem; }
.auth-sub { color: var(--ink-3); font-size: .9rem; margin: 0 0 1.1rem; }
.auth-form label { margin-top: .8rem; }
.auth-form .btn { margin-top: 1.2rem; }
.auth-alt { text-align: center; color: var(--ink-3); font-size: .86rem; margin: 1.1rem 0 0; }

/* ---------- Misc ---------- */
.stack { display: flex; flex-direction: column; }
.stack .field + .field { margin-top: .9rem; }
.inline-form { display: inline; }
.danger-zone { border-top: 1px solid var(--line-soft); margin-top: 1.1rem; padding-top: 1rem; }
.edit-grid { display: grid; grid-template-columns: 150px 1fr 170px; gap: .8rem; }
.edit-grid .field.grow { grid-column: 1 / -1; }

.swatches { display: flex; gap: .5rem; flex-wrap: wrap; }
.swatch { position: relative; cursor: pointer; margin: 0; }
.swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.swatch span {
  display: block; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid transparent; transition: transform .12s;
}
.swatch input:checked + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.swatch:hover span { transform: scale(1.1); }

.glance { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.glance-item h3 { font-size: .8rem; color: var(--ink-3); font-weight: 600; margin-bottom: .25rem; }
.glance-item p { margin: 0; font-weight: 500; display: flex; align-items: center; gap: .45rem; }

.budget-snapshot .snapshot-row {
  display: flex; justify-content: space-between; padding: .4rem 0;
  border-bottom: 1px solid var(--line-soft); font-size: .92rem;
}
.budget-snapshot .snapshot-row strong { font-variant-numeric: tabular-nums; }
.budget-snapshot .snapshot-row.neg strong { color: var(--neg); }
.budget-snapshot .bar { margin-top: .8rem; }

.foot {
  text-align: center; color: var(--ink-4); font-size: .74rem;
  padding: 1.2rem 0 1.6rem; letter-spacing: .02em;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .dash-cols { grid-template-columns: 1fr; }
  .add-grid { grid-template-columns: 1fr 1fr; }
  .edit-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .topbar-in { flex-wrap: wrap; padding: .5rem 1rem .6rem; gap: .5rem .9rem; }
  .nav { order: 3; flex-basis: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .who { display: none; }
  main { padding: 1.1rem .9rem 2.5rem; }
}
@media (max-width: 560px) {
  .stat-grid { grid-template-columns: 1fr; gap: .6rem; }
  .add-grid, .edit-grid { grid-template-columns: 1fr; }
  .filters .field { flex: 1 1 100%; }
  .filter-actions { width: 100%; }
  .filter-actions .btn { flex: 1; }
  .cat-list li, .cat-admin li { flex-wrap: wrap; row-gap: .2rem; }
  .cat-pct { width: auto; }
  .note-cell { width: auto; max-width: none; }
  td.row-actions, .note-cell .row-actions { opacity: 1; }
  .tbl .actions-col { width: auto; }
  .glance { grid-template-columns: 1fr; }
  .stat-num { font-size: 1.45rem; }
}