/*
 * Reset + element defaults.
 *
 * The reset layer is deliberately separate so that ANY rule in base or above
 * beats it without needing to out-specify it.
 */

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

  /* Margins come from components, never from the UA. */
  :where(
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      figure,
      blockquote,
      dl,
      dd,
      ol,
      ul
    ) {
    margin: 0;
  }

  :where(ul[role="list"], ol[role="list"]) {
    list-style: none;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: none; /* stop iOS inflating text on rotate */
    text-size-adjust: none;
  }

  /* Media is block-level and never overflows its column. */
  :where(img, picture, svg, video, canvas) {
    display: block;
    max-width: 100%;
  }

  /* Form controls do not inherit type by default; make them. */
  :where(input, button, textarea, select) {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }

  :where(button) {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: inherit;
  }

  :where(a) {
    color: inherit;
    text-decoration: none;
  }

  /* Long track titles and group names must not blow out a flex row. */
  :where(p, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
  }

  :where(dialog) {
    border: 0;
    padding: 0;
    max-width: none;
    max-height: none;
    color: inherit;
    background: none;
  }

  /* Honour the OS setting. Anything that must still move (a reveal that would
     be incomprehensible frozen) opts back in explicitly. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer base {
  html {
    /* dvh tracks the mobile URL bar as it collapses; svh is the safe floor for
       the initial paint. Without this the pinned CTA sits under Safari's bar. */
    block-size: 100%;
  }

  body {
    min-block-size: 100svh;
    margin: 0;
    background: var(--canvas);
    color: var(--paper);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Tabular figures everywhere: scores, countdowns and ranks must not jitter
       as they tick. Proportional figures are opted back in where prose needs. */
    font-variant-numeric: tabular-nums;
    text-rendering: optimizeLegibility;
  }

  /* ── Focus ─────────────────────────────────────────────────────────────────
     Keyboard users get a visible ring on the phase accent; pointer users do
     not. Never remove this without a replacement. */
  :focus-visible {
    outline: 2px solid var(--acc, currentColor);
    outline-offset: 2px;
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  /* ── Typographic primitives ───────────────────────────────────────────────
     The design has exactly three voices, and mixing them is the whole look:
     Inter 800 for display, JetBrains Mono uppercase for every label and datum,
     Instrument Serif for the wordmark and the occasional emphatic aside. */

  .u-display {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: var(--display-xl);
    line-height: 0.9;
    letter-spacing: var(--track-display);
    color: var(--fg);
    text-wrap: balance;
  }

  .u-display--sm {
    font-size: var(--display-lg);
  }

  .u-display--xs {
    font-size: var(--display-md);
    line-height: 0.94;
    letter-spacing: -0.04em;
  }

  /* The workhorse: every uppercase mono label in the app. */
  .u-label {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: var(--track-label-wide);
    text-transform: uppercase;
    color: var(--mut);
  }

  .u-label--fg {
    color: var(--fg);
  }

  .u-label--tight {
    letter-spacing: var(--track-label);
  }

  .u-label--sm {
    font-size: var(--text-3xs);
  }

  /* Numerals: scores, points, countdowns. */
  .u-num {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--score-fg);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }

  .u-serif {
    font-family: var(--font-serif);
    font-weight: 400;
  }

  .u-prose {
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--fg);
    font-variant-numeric: normal;
  }

  .u-prose b,
  .u-prose strong {
    font-weight: 700;
  }

  /* Screen-reader-only, but focusable variants stay reachable. */
  .u-sr-only {
    position: absolute;
    /* Pin it instead of keeping its static flow position. Otherwise hidden
       labels deep inside .screen__body can extend the root scroll area beyond
       the app shell and expose the canvas when a gesture starts on the CTA. */
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Truncate to one line. Needs min-inline-size:0 on the flex parent to bite. */
  .u-truncate {
    min-inline-size: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  ::selection {
    background: var(--acc, var(--drop-mid));
    color: var(--bg, var(--ink));
  }
}