/* =============================================================================
   BASE — elements only. No component classes here, and no literal values:
   everything comes from tokens.css.
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: var(--leading-tight); text-wrap: balance; }
p { margin: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:disabled { cursor: default; }

/* Rails' button_to wraps every button in a form. Left alone, those forms become
   stray block-level boxes inside flex rows — so they're transparent by default
   and the button does the laying out. */
form.button_to { display: contents; }

input, select, textarea { font: inherit; color: inherit; }

/* Visible, consistent keyboard focus everywhere. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Numbers that sit in columns must not jitter as they change. */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Uppercase micro-labels — the desk uses these a lot. */
.label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Available to screen readers, invisible on screen. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.scroll-x { overflow-x: auto; }

/* Native disclosure, used for progressive disclosure throughout. */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }