/* ════════════════════════════════════════════════════════════════════════════
   Sectorly v2 — base.css (Phase 8a — aligned to v1)
   ────────────────────────────────────────────────────────────────────────────

   Modern reset + Outfit-first body styling.

   No utility classes here beyond .num and .sr-only. App layout and view
   chrome live in components.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── RESET ────────────────────────────────────────────────────────────────── */

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

html, body {
  height: 100dvh;
  width: 100%;
  overflow-x: hidden;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}


/* ── ROOT TYPOGRAPHY ─────────────────────────────────────────────────────── */

body {
  font-family: var(--font);
  /* No global font-size — components set their own. v1 doesn't establish
     a base size either; this prevents the "everything's 16px until I
     override it" cascade pattern that creates inconsistency. */
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;

  scroll-padding-top: var(--header-h);
}


/* ── UTILITY: TABULAR NUMBERS ─────────────────────────────────────────────── */
/* Apply to lap times, gaps, countdowns. v1 uses font-variant-numeric directly
   per-element; we centralize here so any element can opt in. */
.num,
.tabular {
  font-feature-settings: var(--num-features);
  font-variant-numeric: tabular-nums lining-nums;
}


/* ── ACCESSIBILITY ────────────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  border-radius: var(--radius-pill);
}

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


/* ── APP LAYOUT ───────────────────────────────────────────────────────────── */

#app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Single content column. v1's max-width is 600px. Padding handles safe-area
   insets bottom (home indicator) — top inset is handled inside the header. */
#view-host,
.column {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 12px 14px calc(var(--safe-bot) + 32px);
}