/*
 * The element layer: what a bare tag looks like once the tokens are loaded.
 *
 * Shared by the public site and the style guide, and deliberately **not**
 * shared with the app — `ui/src/styles.css` is the app's own element layer and
 * belongs to whoever is editing the screens. Two surfaces, one vocabulary, two
 * element layers. That is DESIGN_SYSTEM.md §12.4: the public site shares these
 * tokens and no screens.
 *
 * Nothing here is a component. Anything that needs a class name lives in
 * `public.css` or `guide.css`.
 */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: var(--step-body-public);
  line-height: 1.55;
  /* **Non-negotiable in a product whose content is columns of numbers**, and
     set at the root rather than per-table so a number added later inherits it
     instead of being the one column that does not line up. */
  font-variant-numeric: var(--numeric);
  -webkit-font-smoothing: antialiased;
}

/* Display type is Archivo at the expanded width. `font-stretch` on the element
   rather than `font-variation-settings`, because the former is what the
   `font-stretch: 62% 125%` descriptor in the @font-face matches against — set
   the variation axis directly and the browser picks the instance twice. */
h1,
h2,
h3,
.display {
  font-family: var(--font-body);
  font-stretch: 125%;
  font-weight: 600;
  line-height: 1.04;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-display-public);
  letter-spacing: var(--track-64);
}

h2 {
  font-size: var(--step-display);
  letter-spacing: var(--track-32);
}

h3 {
  font-size: var(--step-display-3);
  letter-spacing: var(--track-20);
}

p {
  margin: 0;
  max-width: 62ch; /* measure, not width — prose stops before the column does */
}

a {
  color: var(--ink);
  text-decoration-color: var(--who-me);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--who-me);
}

/* **Everything interactive is keyboard-operable with a visible focus ring**
   (§11). `:focus-visible` rather than `:focus` so a mouse click does not leave
   a ring behind, and an outline rather than a box-shadow because the system
   has no shadows and an offset outline survives on any ground. */
:where(a, button, summary, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-ui);
  outline-offset: 2px;
}

/* A <details> summary is a control, so it answers to the 44px touch floor
   like every other one (§9). It is easy to miss because a summary has no
   padding of its own and sizes to its text — the counted disclosures on the
   style guide came out 23px tall, which is a target you have to aim at. The
   floor applies at every width: a 44px disclosure costs nothing on a desktop
   and a 23px one is a miss on a phone. */
summary {
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
}

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}

/* **Mono for every label, stat, verdict, timestamp and button.** Set
   uppercase and open here so no call site has to remember all four
   properties — forgetting `letter-spacing` is what makes mono look like code
   rather than an instrument. */
.mono {
  font-family: var(--font-mono);
  font-size: var(--step-mono-3);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-help);
}

.mono--tight { font-size: var(--step-mono); letter-spacing: var(--track-mono-tight); }
.mono--wide  { font-size: var(--step-mono-4); letter-spacing: var(--track-mono-wide); }

/* Wide content scrolls inside its own container so the page body never
   scrolls sideways (§6). A table that widens the document is the bug this
   prevents, and on a phone it is the difference between a usable page and an
   unusable one. */
.scroller {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* Buttons darken on hover by roughly calc(l - .06). **No lift, no shadow, no
   transform** (§8) — the whole hover vocabulary is one step of lightness. */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 14px 22px;
  min-height: var(--touch-min);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--step-mono-2);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-ui) linear,
    color var(--motion-ui) linear;
}

.button:hover {
  background: color-mix(in oklab, var(--ink) 88%, var(--paper));
  border-color: color-mix(in oklab, var(--ink) 88%, var(--paper));
  color: var(--paper);
}

.button--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline);
}

.button--secondary:hover {
  background: color-mix(in oklab, var(--ink) 6%, transparent);
  border-color: var(--ink);
  color: var(--ink);
}