/*
  FSA tracker styles. Mobile-first; two columns from 52rem. All sizes in rem so text zoom reflows cleanly.

  Contrast (WCAG 2.2 AA) — measured pairs, text ≥ 4.5:1, UI components ≥ 3:1:
                              light                         dark
  text / surface, bg          #16191d on #fff 17.6, #f2f4f7 16.0   #e8ebef on #1a1e23 14.0, #0f1215 15.7
  muted / surface, bg         #545c66  6.8, 6.2              #a2abb6  7.2, 8.1
  field border / surface, bg  #767f8a  4.1, 3.7 (UI)         #7c8592  4.5, 5.0 (UI)
  accent link / surface       #0b5c8c  7.2                   #86c5ff  9.1
  button text / accent        #fff on #0b5c8c 7.2            #0b1a26 on #86c5ff 9.6
  focus ring / bg             #0b5c8c  6.5                   #86c5ff 10.2
  deposit green / surface     #0b6b3a  6.6                   #6fd69b  9.4
  danger, errors / surface    #b42318  6.6                   #ff9d92  8.4
  danger button text          #fff on #b42318 6.6            #2a0905 on #ff9d92 9.2
  pending badge text / bg     #6b4500 on #fff1cc 7.6         #ffd977 on #3a2d06 9.9
  pending badge border        #9a6700  4.9 (UI)              #c9a227  6.9 (UI)
  success banner              #0b5a32 on #e3f5ea 7.3         #a6efc4 on #123222 10.5
  error banner                #9a1c12 on #fde8e6 7.0         #ffc2bb on #3d1512 10.4
*/

:root {
  color-scheme: light;
  --bg: #f2f4f7;
  --surface: #ffffff;
  --text: #16191d;
  --muted: #545c66;
  --line: #e1e4e8;
  --field-border: #767f8a;
  --accent: #0b5c8c;
  --on-accent: #ffffff;
  --pos: #0b6b3a;
  --neg: #b42318;
  --on-neg: #ffffff;
  --pend-bg: #fff1cc;
  --pend-fg: #6b4500;
  --pend-border: #9a6700;
  --ok-bg: #e3f5ea;
  --ok-fg: #0b5a32;
  --bad-bg: #fde8e6;
  --bad-fg: #9a1c12;
}

/* Dark values appear twice: once for "auto" following the OS, once for the manual "dark" choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1215;
    --surface: #1a1e23;
    --text: #e8ebef;
    --muted: #a2abb6;
    --line: #2c323a;
    --field-border: #7c8592;
    --accent: #86c5ff;
    --on-accent: #0b1a26;
    --pos: #6fd69b;
    --neg: #ff9d92;
    --on-neg: #2a0905;
    --pend-bg: #3a2d06;
    --pend-fg: #ffd977;
    --pend-border: #c9a227;
    --ok-bg: #123222;
    --ok-fg: #a6efc4;
    --bad-bg: #3d1512;
    --bad-fg: #ffc2bb;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1215;
  --surface: #1a1e23;
  --text: #e8ebef;
  --muted: #a2abb6;
  --line: #2c323a;
  --field-border: #7c8592;
  --accent: #86c5ff;
  --on-accent: #0b1a26;
  --pos: #6fd69b;
  --neg: #ff9d92;
  --on-neg: #2a0905;
  --pend-bg: #3a2d06;
  --pend-fg: #ffd977;
  --pend-border: #c9a227;
  --ok-bg: #123222;
  --ok-fg: #a6efc4;
  --bad-bg: #3d1512;
  --bad-fg: #ffc2bb;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  accent-color: var(--accent);
}
h1, h2, h3, p { margin: 0; }
h1 { font-size: 1.375rem; }
h2 { font-size: 1.0625rem; }
a { color: var(--accent); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
main:focus { outline: none; }

.wrap {
  max-width: 68rem;
  margin: 0 auto;
  padding-left: max(.75rem, env(safe-area-inset-left));
  padding-right: max(.75rem, env(safe-area-inset-right));
}

.skip {
  position: absolute;
  left: .5rem;
  top: -10rem;
  z-index: 10;
  padding: .75rem 1rem;
  background: var(--surface);
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: .5rem;
}
.skip:focus { top: max(.5rem, env(safe-area-inset-top)); }

/* Header */
.top { padding-top: env(safe-area-inset-top); }
.top-in {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 3rem;
}
.brand {
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
}
.top nav ul {
  display: flex;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.top nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 .75rem;
  border-radius: .5rem;
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}
.top nav a[aria-current="page"] {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .375rem;
}

main { padding-bottom: 1rem; }

/* Layout */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .75rem;
  padding: .875rem;
  margin-bottom: .75rem;
}
.card > h2 { margin-bottom: .5rem; }
.narrow { max-width: 32rem; margin: 0 auto; }
.narrow > h1, .page-h { margin: .25rem 0 .75rem; }

@media (min-width: 52rem) {
  .layout {
    display: grid;
    grid-template-columns: minmax(19rem, 23rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }
  .cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 26rem);
    gap: 0 1rem;
    align-items: start;
  }
  .cols > .list-card { grid-row: span 2; }
}
/* Keep balance + form in view while scrolling history, but only when they fit (not at high zoom / short windows). */
@media (min-width: 52rem) and (min-height: 48rem) {
  .side { position: sticky; top: 1rem; }
}

/* Balance */
.bal-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bal-amt {
  font-size: 2.75rem;
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin: .125rem 0 .25rem;
}
.bal-sub {
  font-size: .875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Status banner (also the aria-live region); collapses when empty but stays in the accessibility tree. */
.status {
  border-radius: .5rem;
  font-size: .9375rem;
  margin-bottom: .75rem;
}
.status:empty { margin: 0; }
.status.ok:not(:empty) { padding: .5rem .75rem; background: var(--ok-bg); color: var(--ok-fg); }
.status.bad:not(:empty) { padding: .5rem .75rem; background: var(--bad-bg); color: var(--bad-fg); }
.status a { color: inherit; }

/* Forms */
.fgrid {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .625rem;
}
.field { display: flex; flex-direction: column; min-width: 0; }
.f-amt { flex: 1 1 6.5rem; }
.f-desc { flex: 999 1 12rem; }
.f-when { flex: 1 1 13rem; }
.f-day { flex: 1 1 8rem; }
.f-full { flex: 1 1 100%; }
label, legend {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: .1875rem;
}
input[type="text"], input[type="password"], input[type="date"], input[type="datetime-local"], select, textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: .5rem .625rem;
  font: inherit;
  font-size: max(1rem, 16px); /* ≥16px stops iOS Safari zooming on focus */
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--field-border);
  border-radius: .5rem;
}
input::placeholder { color: var(--muted); opacity: 1; }
input[type="date"], input[type="datetime-local"] { -webkit-appearance: none; appearance: none; }
textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875rem; word-break: break-all; }
[aria-invalid="true"] { border: 2px solid var(--neg); }
fieldset[aria-invalid="true"] { border: 0; }
.err {
  color: var(--neg);
  font-size: .875rem;
  font-weight: 600;
  margin-top: .25rem;
}
.err::before { content: "\26A0\FE0E  "; }
.hint {
  font-size: .8125rem;
  color: var(--muted);
  margin-top: .25rem;
}
.card > .hint { margin: -.25rem 0 .5rem; }
.list-card > .hint { margin: .5rem 0 0; }

/* Checkbox/radio inside its label, so the whole ≥44px-tall label is the touch target. */
.f-check, .radio {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}
.f-check { flex: 0 0 auto; align-self: flex-end; padding: 0 .25rem; }
.radio { padding: 0 1rem 0 0; }
.f-check input, .radio input {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  flex: none;
}
fieldset.kind { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.kind legend { padding: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .5rem 1rem;
  font: inherit;
  font-weight: 650;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--field-border);
  border-radius: .5rem;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-danger { background: var(--neg); border-color: var(--neg); color: var(--on-neg); }
.btn-block { width: 100%; margin-top: .75rem; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.danger-zone {
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
}
.danger-zone .f-check { display: flex; margin-bottom: .5rem; }
.steps { padding-left: 1.25rem; margin: .75rem 0 0; }
.steps li { margin-bottom: .375rem; }

/* Ledger */
.list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .25rem;
}
.chip {
  min-height: 2.75rem;
  padding: 0 .875rem;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--field-border);
  border-radius: 999px;
  cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip[aria-pressed="true"]::before { content: "\2713  "; }

.day-h {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  padding: .5rem 0 .25rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--line);
}
.rows { list-style: none; margin: 0; padding: 0; }
.tx {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main amt" "main act";
  column-gap: .75rem;
  align-items: center;
  padding: .375rem 0;
  border-bottom: 1px solid var(--line);
}
/* Extra room so the last badge's enlarged hit area doesn't run under the next sticky day heading. */
.tx:last-child { border-bottom: 0; padding-bottom: .75rem; }
.tx-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}
.tx-desc {
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tx-main:hover .tx-desc { text-decoration: underline; }
.tx-meta { font-size: .8125rem; color: var(--muted); }
.tx-meta:empty { display: none; }
.tx-amt {
  grid-area: amt;
  text-align: right;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.amt-in { color: var(--pos); }
.tx > .badge, .tx-act { grid-area: act; justify-self: end; }
.is-paused .tx-desc, .is-paused .tx-amt { color: var(--muted); }

.badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: .0625rem .5rem;
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.35;
  border: 1px solid var(--field-border);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
}
button.badge { cursor: pointer; }
/* Compact look, but a ≥44×44px touch target: the invisible ::after extends the hit area into the row padding. */
button.badge::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 2.75rem);
  height: 2.75rem;
  transform: translate(-50%, -50%);
}
.b-pend { background: var(--pend-bg); color: var(--pend-fg); border-color: var(--pend-border); }
.b-pend::before { content: "\25F7\FE0E  "; }
.b-info { border-color: var(--line); }

.more { text-align: center; margin-top: .75rem; }
.more .btn { width: 100%; }
.empty { color: var(--muted); padding: 1rem 0; }

/* Footer */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1.25rem;
  padding-top: .5rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  font-size: .875rem;
  color: var(--muted);
}
.foot a, .linkish {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--accent);
}
.linkish {
  padding: 0;
  font: inherit;
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.theme-pick { display: flex; align-items: center; gap: .5rem; }
.theme-pick label { margin: 0; }
.theme-pick select { width: auto; min-height: 2.75rem; padding: .25rem .5rem; }

@media (min-width: 52rem) {
  .bal-amt { font-size: 3.25rem; }
  .card { padding: 1rem 1.125rem; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}