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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

h1, h2, h3 { line-height: 1.2; margin-block: 0 var(--space-4); }
h1 { font-size: var(--text-h1); font-weight: 700; }
/* h2 is always a section header: generous space above (proximity groups it
   with its own content) and a ruled hairline, ledger-style. */
h2 {
  font-size: var(--text-h2);
  font-weight: 700;
  margin-block-start: var(--space-7);
  border-block-start: 1px solid var(--border);
  padding-block-start: var(--space-4);
}

a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Form-control defaults: every text-like field shares one look; components
   only set layout (width, flex) or density. */
button, input, select, textarea { font: inherit; }
input[type="text"], input[type="date"], input[type="email"],
input[type="password"], input[type="number"], select, textarea {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  background: var(--paper);
  color: var(--ink);
}
/* Prose fields grow with their content; height is never fixed. */
textarea { inline-size: 100%; min-block-size: 3lh; resize: vertical; }

.layout {
  inline-size: 100%;
  padding: var(--space-5) clamp(var(--space-4), 3vw, var(--space-7));
}

.amount {
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}
.amount.positive { color: var(--ok); }

/* The counterpart to .amount for a column of ticks and short states: the
   badge sits under the middle of its label, so a column of them scans as
   one line down the page. */
.status { text-align: center; }

table { border-collapse: collapse; inline-size: 100%; }
th, td { text-align: start; padding: var(--space-2) var(--space-3); border-block-end: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: var(--text-2); }
.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }

/* Secondary voice: hints, explainers, reference lines. */
.meta { color: var(--muted); font-size: var(--text-2); }
/* A button_to that must sit inline among text tokens. */
form.inline-form { display: inline; }

/* A page-bottom note keeps its distance and a readable measure. */
.footnote { margin-block-start: var(--space-5); max-inline-size: 60ch; }

.empty-state { color: var(--muted); }

.future-month { color: var(--muted-faint); }

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hidden { display: none !important;  }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}