/* =============================================================================
   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);
  /* A working surface of figures: every number lines up by place value. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "cv11";   /* Inter's single-storey a: calmer in dense text */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: var(--leading-tight); text-wrap: balance; }
/* Large text is tightened; small text is left alone, where tracking helps. */
h1, h2 { letter-spacing: var(--tracking-tight); }
p { margin: 0; }

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

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:disabled, button[aria-disabled="true"] { cursor: not-allowed; }

/* 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; }

/* Every field gets the same four states: rest, hover, focus, and wrong. Rails
   wraps an invalid field in .field_with_errors, so that is the error state. */
input:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="hidden"]),
select, textarea {
  background-color: var(--surface);
  border: 1px solid var(--border);
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
input:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"]):hover:not(:disabled),
select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--border-strong); }
input:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"]):focus,
select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--focus-ring);
}
input:disabled, select:disabled, textarea:disabled { background-color: var(--surface-sunk); color: var(--ink-faint); cursor: not-allowed; }
.field_with_errors { display: contents; }
.field_with_errors input, .field_with_errors select, .field_with_errors textarea,
[aria-invalid="true"] { border-color: var(--critical) !important; }
.field_with_errors label { color: var(--critical) !important; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--accent); }
::placeholder { color: var(--ink-faint); opacity: 1; }

/* 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. Inter's tabular
   figures do this in the one font, so `.mono` no longer means a second face —
   it means "this is a figure or a code", and stays tabular wherever it sits. */
.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; }