/* ============================================================
   Base — reset, typography, layout primitives, a11y
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh);
  color: var(--text);
  background: var(--bg);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

/* Money & numbers align cleanly in columns */
.num, .money, td.num, th.num { font-variant-numeric: tabular-nums; }
.num, th.num { text-align: right; }

/* Focus — always visible, on-brand */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* Utility */
.hidden { display: none !important; }
.spacer { flex: 1 1 auto; }
.muted { color: var(--text-2); }
.muted-sm { color: var(--text-2); font-size: var(--fs-sm); }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: var(--s3); }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }

/* Icons */
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ic-sm { width: 16px; height: 16px; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px;
  border: 2px solid var(--bg); }

/* Any wide content scrolls inside its own container, never the page */
.table-wrap { overflow-x: auto; }

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