/* ─────────────────────────────────────────────────────────────────────────
   base.css — element defaults + global 2026 interaction hardening.
   var(--token) only, no raw values. Sets the typographic baseline, raw form
   elements, focus-visible rings, tap/touch behavior (no 300ms delay, no grey
   flash, contained overscroll), and honours prefers-reduced-motion.
   ───────────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-sunken);
  font-variant-numeric: tabular-nums lining-nums;   /* aligned figures in tables */
}

h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: .01em; color: var(--text); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-xl); }

a { color: var(--color-accent); }
a:hover { text-decoration: underline; }

/* ── Tap / touch behavior ──────────────────────────────────────────────────
   touch-action: manipulation kills the 300ms double-tap delay; tap-highlight
   is removed because real :active/:focus states (in components/app) carry the
   feedback instead. Assume the viewport is `viewport-fit=cover`. */
button, a, input, select, textarea, [role="button"], summary, label {
  touch-action: manipulation;
}
button, a, [role="button"], summary { -webkit-tap-highlight-color: transparent; }

/* ── Focus: keyboard-only ring, everywhere ─────────────────────────────────*/
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── Raw form elements ─────────────────────────────────────────────────────
   Font-size is pinned to 16px (var(--fs-md)) so iOS never zooms on focus —
   this floor holds even inside the .dense layer. */
input, select, textarea {
  width: 100%;
  min-height: var(--control-min);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-md);            /* ≥16px — iOS zoom guard */
  background: var(--bg-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}
textarea { min-height: 96px; resize: vertical; }

/* Checkboxes & radios are not full-width text fields — reset them app-wide. */
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px; min-width: 0; min-height: 0; flex: none;
  padding: 0; border-radius: 3px; vertical-align: middle;
  accent-color: var(--color-accent); cursor: pointer;
}
input[type="radio"] { border-radius: 50%; }

label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); }

/* ── Scroll containment ────────────────────────────────────────────────────
   Scrollable inner surfaces don't chain their scroll to the page/body
   (no rubber-band bleed on iOS, no accidental page scroll behind dialogs). */
.table-scroll, dialog, .app-search-results, .panel-scroll,
[data-scroll="contain"] { overscroll-behavior: contain; }

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