/* Stat ticker. Monochrome like the rest of the site: figures in ink on hairline chips, and the
   status green only on the live dot. Override --ticker-number and --ticker-pill to tint the chips. */
.ticker {
  --ticker-number: var(--ink);
  --ticker-pill: var(--surface);
  --ticker-pill-line: var(--line);
  --ticker-live: var(--success);
  --ticker-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ticker-fade: 4rem;
  display: flex; align-items: center; gap: 1rem; padding: 1.25rem 0;
}
@media (min-width: 1024px) { .ticker { gap: 1.5rem; padding: 2rem 0; } }
.ticker-title { flex: none; display: inline-flex; align-items: center; gap: 0.625rem; font: 500 0.9375rem/1.5rem var(--font-sans); color: var(--ink); }
.ticker-live { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ticker-live); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ticker-live) 20%, transparent); }
@media (min-width: 1024px) { .ticker-title { font-size: 1rem; } }
.ticker-rule { flex: none; width: 1px; height: 1.25rem; background: var(--line); }

.ticker-window {
  flex: 1; min-width: 0; overflow: hidden; border-radius: 2px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--ticker-fade), #000 calc(100% - var(--ticker-fade)), transparent);
          mask-image: linear-gradient(to right, transparent, #000 var(--ticker-fade), #000 calc(100% - var(--ticker-fade)), transparent);
}
.ticker-window:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; -webkit-mask-image: none; mask-image: none; }
.ticker-track { display: flex; width: max-content; }
.ticker-set { display: flex; align-items: center; gap: 2rem; padding-right: 2rem; }

.ticker-stat { flex: none; display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.ticker-label { font: 500 0.75rem/1rem var(--font-sans); letter-spacing: 0.02em; color: var(--ink-faint, var(--ink-muted)); }
.ticker-pill {
  display: inline-flex; align-items: center; padding: calc(0.25rem - 1px) calc(0.5rem - 1px); border-radius: 0.375rem;
  border: 1px solid var(--ticker-pill-line);
  font: 500 0.75rem/1rem var(--font-mono); letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  color: var(--ticker-number); background: var(--ticker-pill);
}
.ticker-digits { display: inline-flex; height: 1em; line-height: 1em; }
.ticker-digit { display: inline-block; height: 1em; overflow: hidden; }
.ticker-strip { display: block; width: 1ch; line-height: 1em; white-space: normal; word-break: break-all; text-align: center; }
.ticker-sep { opacity: 0.5; }
.ticker-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Reduced motion: one static row that wraps, no rolling or scrolling. */
.ticker[data-still] .ticker-window { -webkit-mask-image: none; mask-image: none; }
.ticker[data-still] .ticker-track { width: auto; }
.ticker[data-still] .ticker-set { flex-wrap: wrap; row-gap: 0.375rem; padding-right: 0; }