/* ═══════════════════════════════════════════════════════════════════════
   base.css — reset, typography defaults, and the primitives every view
   reuses (micro-labels, direction colours, buttons, fields).
   ═══════════════════════════════════════════════════════════════════════ */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.44;
  letter-spacing: -0.002em;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { margin: 0; font-weight: 600; }

/* ── the uppercase micro-label, used everywhere instead of icons ────── */
.label {
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}

/* ── direction: the only semantic colour in the interface ───────────── */
.up   { color: var(--green); }
.down { color: var(--red); }
.flat { color: var(--ink-3); }
.spec { color: var(--grade-spec); }   /* speculative grade */

/* ── figures ────────────────────────────────────────────────────────── */
.fig {
  font-family: var(--black);
  letter-spacing: -0.03em;
  line-height: 1;
}

/* ── controls ───────────────────────────────────────────────────────── */
.btn {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 1px solid var(--ink);
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn[disabled] { opacity: 0.4; cursor: default; }
.btn[disabled]:hover { background: none; color: var(--ink); }

.field {
  font-family: var(--sans);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0.42rem 0.6rem;
  min-width: 0;
}
.field:focus-visible { outline: 2px solid var(--red); outline-offset: -1px; border-color: var(--red); }
.field::placeholder { color: var(--ink-3); }

select.field { appearance: none; padding-right: 1.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0l4.5 5.5L9 0z' fill='%23555f6d'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.55rem center; }

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ── tables that must scroll rather than widen the page ─────────────── */
/* position:relative matters: an absolutely-positioned descendant (the
   .sr-only header cell) otherwise resolves its containing block OUTSIDE the
   clip and drags the document 350px wide on phones */
.tscroll { overflow-x: auto; overscroll-behavior-x: contain; position: relative; }

/* ── entrance: one orchestrated reveal, transform/opacity only ──────── */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(12px); animation: rise var(--slow) var(--ease) forwards; }
  .rise-1 { animation-delay: 0.05s; }
  .rise-2 { animation-delay: 0.12s; }
  .rise-3 { animation-delay: 0.20s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* ── screen-reader only ─────────────────────────────────────────────── */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* Links carry the ink of their surroundings; the underline on hover is the
   affordance, not a colour the palette never agreed to. */
a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 0.15em; }
a:hover { text-decoration-color: currentColor; }
.wl a, .reg a, .rail a, .foot a { text-decoration: none; }
.wl a:hover, .reg a:hover, .foot a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }