/* Scores strip at the top of the page (dev look, notes/ticker/look/SPEC.md).
   Loaded after styles.css and uses its tokens (--text-primary, --text-secondary,
   --focus-ring, --font).

   The pill is his Figma node 687:3985 (Undefeated v2, QjnopAyEScNat913C2Qbso),
   "ATL at NO, Mon 5:15 PM", read 2026-10-15: 44 tall, radius 22, smoothing 0,
   a top-to-bottom gradient #454547 to #29292B, a 0.5 inside stroke #070709 that
   Figma counts in the layout (so the content starts 8.5 in), and two 1 px inner
   shadows: #58585A on the top edge, #3A3A3C on the bottom edge. Horizontal auto
   layout, gap 8, centered. At each end a 28 disc holding a 20 logo (FIT, inset 4);
   in 687:3985 the disc's team-color fill is there but hidden, so only the logo
   shows. Between them "Score (one baseline)": gap 8, items centered, scores in
   Score Compact (SF Pro Condensed Bold, wght 760, wdth 60, 17/22, text/primary),
   the clock in Label (SF Pro Condensed Semibold, wght 650, wdth 60, 13/18,
   text/secondary, LNUM and TNUM).

   His file is Display P3, and these greys convert to the same sRGB values to
   8 bits (the bottom edge lands on #3A3A3D), so plain hex is exact here.

   Every class here is pill- or ticker- prefixed, or only used inside a pill:
   the page has its own .logo (the HYP mark), and a bare .logo here once
   shrank it to 20 px. */

:root {
  --pill-top: #454547;
  --pill-bottom: #29292b;
  --pill-stroke: #070709;
  --pill-edge-top: #58585a;
  --pill-edge-bottom: #3a3a3d;
  --ticker-fade: clamp(24px, 5vw, 64px);
  --ticker-inset-l: env(safe-area-inset-left, 0px);
  --ticker-inset-r: env(safe-area-inset-right, 0px);
}

/* Out of flow at the top, like the footer at the bottom, so the centered group
   never moves. The pill row's middle sits 36 from the top edge, as the footer
   row's sits 36 from the bottom. 52 tall: 4 above and below the 44 pills, so a
   focus ring clears them. */
.ticker {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  height: 52px;
  border-radius: 26px;
  transition: opacity 300ms ease-out;
}

.ticker.is-entering {
  opacity: 0;
}

/* Both ends fade with a mask, not a page-colored overlay, so the fade is right
   on any background: pills fade in at the right edge and out at the left.
   Each fade is --ticker-fade wide (the spec: 24 at 390, 64 from 1280 up) and
   the middle stays fully clear. The stops follow a smoothstep (0, 0.16, 0.5,
   0.84, 1) rather than a straight ramp, so neither end of a fade shows a hard
   edge. The safe-area insets keep pills out from under a landscape notch. */
.ticker-viewport {
  --fl: var(--ticker-inset-l);
  --fr: calc(100% - var(--ticker-inset-r));
  height: 52px;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to right,
      rgb(0 0 0 / 0) var(--fl),
      rgb(0 0 0 / 0.16) calc(var(--fl) + var(--ticker-fade) * 0.25),
      rgb(0 0 0 / 0.5) calc(var(--fl) + var(--ticker-fade) * 0.5),
      rgb(0 0 0 / 0.84) calc(var(--fl) + var(--ticker-fade) * 0.75),
      #000 calc(var(--fl) + var(--ticker-fade)),
      #000 calc(var(--fr) - var(--ticker-fade)),
      rgb(0 0 0 / 0.84) calc(var(--fr) - var(--ticker-fade) * 0.75),
      rgb(0 0 0 / 0.5) calc(var(--fr) - var(--ticker-fade) * 0.5),
      rgb(0 0 0 / 0.16) calc(var(--fr) - var(--ticker-fade) * 0.25),
      rgb(0 0 0 / 0) var(--fr));
  mask-image: linear-gradient(to right,
      rgb(0 0 0 / 0) var(--fl),
      rgb(0 0 0 / 0.16) calc(var(--fl) + var(--ticker-fade) * 0.25),
      rgb(0 0 0 / 0.5) calc(var(--fl) + var(--ticker-fade) * 0.5),
      rgb(0 0 0 / 0.84) calc(var(--fl) + var(--ticker-fade) * 0.75),
      #000 calc(var(--fl) + var(--ticker-fade)),
      #000 calc(var(--fr) - var(--ticker-fade)),
      rgb(0 0 0 / 0.84) calc(var(--fr) - var(--ticker-fade) * 0.75),
      rgb(0 0 0 / 0.5) calc(var(--fr) - var(--ticker-fade) * 0.5),
      rgb(0 0 0 / 0.16) calc(var(--fr) - var(--ticker-fade) * 0.25),
      rgb(0 0 0 / 0) var(--fr));
}

.ticker-viewport:focus {
  outline: none;
}

/* The ring goes on the unmasked wrapper; the mask would cut it at the ends. */
.ticker:has(.ticker-viewport:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

/* The rail holds the list and, while it moves, enough copies of it to cover
   at least twice the viewport (ticker.js), so the loop never shows an empty
   end, even with two games. Only its transform animates. */
.ticker-rail {
  display: flex;
  width: max-content;
  height: 52px;
  padding-inline-start: calc(var(--ticker-inset-l) + var(--ticker-fade));
}

.ticker.is-moving .ticker-rail {
  will-change: transform;
}

/* Each copy ends with one more 8 gap, so the copy's first pill lands exactly
   where the first one started. */
.ticker-track {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 8px 0 0;
  list-style: none;
}

/* Reduce Motion only: when the list fits between the fades, it stands still,
   centered. With motion on, it always moves. */
.ticker.is-static .ticker-rail {
  margin-inline: auto;
  padding-inline-start: 0;
}

.ticker.is-static .ticker-track {
  padding: 0;
}

/* ---------- the pill, 687:3985 ---------- */

.pill {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin: 0;
  padding: 0 8.5px;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--pill-top), var(--pill-bottom));
  /* Listed first is drawn on top: the stroke covers the outer half pixel of
     the 1 px edge shadows, as in his render. */
  box-shadow:
    inset 0 0 0 0.5px var(--pill-stroke),
    inset 0 1px 0 0 var(--pill-edge-top),
    inset 0 -1px 0 0 var(--pill-edge-bottom);
  white-space: nowrap;
}

/* The visible parts are hidden from screen readers; one sentence per pill
   (.sr-only) is read instead. */
.pill-shown {
  display: contents;
}

.disc {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  overflow: hidden;
}

.pill-logo {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}

/* Logos off (the showLogos flag in ticker.js, or a logo that fails to load):
   his hidden disc fill turns on, in the team's color. */
.disc.is-color {
  background: var(--team, #58585a);
}

.disc.is-color .pill-logo {
  display: none;
}

.line {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* His "Score (one baseline)" row is a fixed 92 wide in 687:3985 (and in
   687:3994 beside it), which makes that pill 181. For a game in play, 92 is
   the least it can be: the same content gives 181, wider content still fits,
   and the pill keeps its width as scores and clocks change, so the loop
   rarely has to be measured again. The content sits centered, so a short
   middle ("0 HT 1") does not leave a gap on one side. Finals hug their
   content: nothing in them changes. */
.pill[data-kind="score"]:not([data-state="final"]) .line {
  min-width: 92px;
  justify-content: center;
}

/* Tracking. Chrome and Safari draw the system font with Apple's built-in
   tracking for its size: 0.44 px a letter tighter at 17 px, 0.08 px at 13 px
   (measured 2026-10-15 against the SF Pro font file). Figma sets SF Pro with
   none of it, so his tracking 0 is these values here. The text then sets as
   in his file: "31", "Q3 2:11" and "10" measure 15.9, 40.4 and 16.4 against
   Figma's 16, 41 and 17 (Figma rounds text boxes up to whole pixels). */
.score {
  font: 760 17px/22px var(--font);
  font-stretch: 60%;
  letter-spacing: 0.44px;
  color: var(--text-primary);
}

.status {
  font: 650 13px/18px var(--font);
  font-stretch: 60%;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.08px;
  color: var(--text-secondary);
}

/* Before the start the time is the news: text/primary, as in his "Picked
   games, before kickoff" pills (381:3). */
.pill[data-kind="time"] .status {
  color: var(--text-primary);
}

/* Finals: the loser's score steps down to text/secondary, as in his Recap
   card (375:695). A draw keeps both. */
.score.is-loser {
  color: var(--text-secondary);
}

/* ---------- keyboard Pause ---------- */

/* Hidden until a keyboard reaches it, then drawn at the right end of the
   strip in the pill's own look. */
.ticker-pause {
  position: absolute;
  top: 4px;
  right: calc(8px + var(--ticker-inset-r));
  display: flex;
  align-items: center;
  height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--pill-top), var(--pill-bottom));
  box-shadow:
    inset 0 0 0 0.5px var(--pill-stroke),
    inset 0 1px 0 0 var(--pill-edge-top),
    inset 0 -1px 0 0 var(--pill-edge-bottom);
  color: var(--text-primary);
  font: 650 13px/18px var(--font);
  font-stretch: 60%;
  letter-spacing: 0.08px;
  white-space: nowrap;
  cursor: pointer;
}

/* Pressed: the fill steps down to the gradient's bottom color. */
.ticker-pause[aria-pressed="true"] {
  background: var(--pill-bottom);
}

.ticker-pause:not(:focus-visible) {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.ticker-pause:focus {
  outline: none;
}

.ticker-pause:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- Reduce Motion: a still row that scrolls by hand ---------- */

/* No animation at all, the entrance fade included; the edge fades stay (they
   are the mask, not motion). */
@media (prefers-reduced-motion: reduce) {
  .ticker {
    transition: none;
  }

  .ticker-viewport {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline:
      calc(var(--ticker-inset-l) + var(--ticker-fade))
      calc(var(--ticker-inset-r) + var(--ticker-fade));
    scrollbar-width: none;
    touch-action: pan-x pan-y;
  }

  .ticker-viewport::-webkit-scrollbar {
    display: none;
  }

  .ticker-track {
    padding-inline-end: calc(var(--ticker-inset-r) + var(--ticker-fade));
  }

  .ticker-track[aria-hidden="true"],
  .ticker-pause {
    display: none;
  }

  .pill {
    scroll-snap-align: start;
  }
}

/* Phones in landscape: the form and footer already fill the height, and the
   page moves the footer into the flow there. */
@media (max-height: 420px) {
  .ticker {
    display: none;
  }
}

/* Windows contrast themes drop the fills and inset shadows. */
@media (forced-colors: active) {
  .pill,
  .ticker-pause {
    border: 1px solid CanvasText;
  }
}