/* ===========================================================================
 * Troph-e base layer
 *
 * The ambient gradient, the type defaults, and one focus ring. Consumes tokens
 * only — every raw value lives in tokens.css and the lint test enforces that.
 * =========================================================================== */

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

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

/* ---------------------------------------------------------------------------
 * The ambient base (§2.1).
 *
 * The gradient is sized to the DOCUMENT, not the viewport — §2.1 measures the
 * 1977px-tall mobile frame as bright top-right at the very top of the page,
 * bright bottom-left at the very bottom, and near-black through the middle.
 * That is only reproduced if the background box is the document: scrolling
 * must carry you through the dark centre of one gradient, the way the mocks
 * show it. `background-attachment: fixed` pins the background to the
 * VIEWPORT instead, so the top-right glow would stay on screen at every
 * scroll offset and the dark centre would never be reached — the opposite of
 * what §2.1 measures. It is also long-standing janky/broken on iOS Safari,
 * which matters here because the player shell is the mobile surface.
 *
 * min-height keeps the gradient covering short pages instead of banding at
 * the fold; 100vh is a fallback for browsers without dvh support (Fix 3).
 * ------------------------------------------------------------------------ */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-ambient);
  background-repeat: no-repeat;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ON A PLAYER PAGE IN THE NATIVE APP THE SHELL OWNS THE CANVAS (D188). Each
   shell draws this same ambient gradient natively, behind the whole screen, so
   it runs on under the glass navigation and tab bars instead of stopping at
   their edges. The page is transparent there: if both painted, the two copies
   would span different heights (the page's stops short of the bars) and leave
   a visible step where the document ends. One owner, no seam.

   NEVER ON AN ADMIN PAGE (D194). The admin's own sticky bars are a wash and a
   blur over the page, and a blur over a transparent page has nothing to blur:
   on Android the bars went see-through and their labels ran into the content
   scrolling under them. An admin page in the app paints its own canvas, as it
   does in a browser. */
.hotwire-native body.shell--player {
  background: transparent;
}

/* ---------------------------------------------------------------------------
 * Type defaults (§3). Two weights only — no light, no black, no italics
 * appear anywhere in 12 frames.
 * ------------------------------------------------------------------------ */
h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

h1 {
  font-size: var(--type-display-size);
  line-height: var(--type-display-leading);
}

h2 {
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-leading);
}

h3 {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-leading);
}

p {
  margin: 0;
  color: var(--text-secondary);
}

small {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  color: var(--text-tertiary);
}

a {
  color: var(--text-gold);
  text-decoration: none;
}

/* Only where something can hover. On a touchscreen `:hover` sticks to the
   last thing tapped, so a card's text stayed underlined after the tap. */
@media (hover: hover) {
  a:hover {
    text-decoration: underline;
  }
}

/* ---------------------------------------------------------------------------
 * Focus, solved once and centrally.
 *
 * §10 warns about exactly two failure modes on this palette: a default browser
 * outline looks broken, and a gold ring will not read against the gold borders
 * that mark selected and active states.
 *
 * The offset is the fix. Pushing the ring 2px clear of the component puts it on
 * the near-black base rather than on the component's own fill, so one white
 * ring reads at full strength against a dark card AND against a gold-filled
 * button. Do not replace this with a gold ring; that is the case §10 rules out.
 *
 * :focus-visible only — a mouse click on a button should not draw a ring.
 * test/lint/... has no rule for this yet; it is a convention until components
 * exist to enforce it against.
 * ------------------------------------------------------------------------ */
:focus {
  outline: none;
}

:focus-visible {
  outline: var(--focus-ring-outline);
  outline-offset: var(--focus-ring-offset);
}

/* ---------------------------------------------------------------------------
 * Media defaults. Trophy renders and photography carry all the visual energy
 * in this product (§8); surrounding chrome stays quiet.
 * ------------------------------------------------------------------------ */
img,
svg,
video {
  display: block;
  max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * The provisional marker (§0.5 of the foundation hand-off, D-refs in
 * docs/decisions.md). Never rendered in production — see ProvisionalHelper.
 * A gold dotted underline, deliberately quiet enough to read the value through
 * and loud enough that nobody ships it by accident.
 * ------------------------------------------------------------------------ */
mark.provisional {
  background: none;
  color: inherit;
  text-decoration: underline dotted var(--gold-300);
  text-underline-offset: var(--space-1);
  cursor: help;
}