/* Hallmark · component: ticker tape · genre: atmospheric · theme: custom (obsidian atlas, gold lantern, coin triad)
 * states: default · hover · focus · active · disabled (.is-still, tape stopped) · loading (.tk-empty while data loads) · error (.tk-empty) · success (tape running)
 * contrast: tokens only; every colour sits beside printed text (sign, verdict word, date).
 * Owned by js/modules/ticker.js (injects this link once from init). Re-fed 2026-10-02 from data/ticker.json markets[<key>].chips.
 * Motion: one translateX keyframe on a duplicated track, linear, --tk-dur = measured track width / --ticker-px-s (set by ticker.js);
 * paused on hover, focus-within, .is-offscreen and .is-still. Reduced motion (.is-still or the media query): static scroll-snap row. */

.ticker { position: relative; height: 40px; overflow: hidden; }
.ticker::before, .ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: var(--space-8); z-index: 1; pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--bg-surface), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--bg-surface), transparent); }

.tk-track {
  display: flex; width: max-content; height: 100%;
  animation: tk-scroll var(--tk-dur, 150s) linear infinite;
  will-change: transform;
}
.ticker:hover .tk-track, .ticker:focus-within .tk-track, .ticker.is-offscreen .tk-track { animation-play-state: paused; }
@keyframes tk-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.tk-list { display: flex; margin: 0; padding: 0; list-style: none; height: 100%; }
.tk-chip { display: flex; align-items: center; height: 100%; padding-inline: var(--space-3) 0; margin-right: var(--space-4); }
.tk-chip + .tk-chip { border-left: 1px solid var(--border-subtle); }

/* The link carries the whole figure; the gold tick at the left mirrors the ledger rows. */
.tk-link {
  display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding-inline: var(--space-1);
  color: var(--text-primary); text-decoration: none; white-space: nowrap; font-size: var(--text-sm);
}
.tk-link::before { content: ""; width: 2px; height: 14px; background: var(--color-gold); border-radius: 1px; flex: none; }
.tk-link:hover .tk-name, .tk-link.is-hover .tk-name { text-decoration: underline; text-decoration-color: var(--color-gold-dim); text-underline-offset: 3px; }
.tk-link:active .tk-name, .tk-link.is-active .tk-name { color: var(--color-gold-hover); }
.tk-link:focus-visible, .tk-link.is-focus { outline: 2px solid var(--color-gold); outline-offset: -2px; border-radius: var(--radius-control); }

.tk-name { font-weight: 600; }
.tk-figure { color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-xs); }
.tk-unit { color: var(--text-muted); }
.tk-delta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); }
.tk-link .stamp-v { padding-block: 0; }
.tk-stamp { display: inline-flex; align-items: center; gap: var(--space-1); }
.tk-stamp .stamp, .tk-where { color: var(--text-muted); font-size: var(--text-xs); }
.tk-where { text-transform: capitalize; }
.tk-chip-brief .tk-figure { color: var(--text-muted); font-family: var(--font-body); }

.tk-empty, .tk-note { margin: 0; padding: 0 var(--gutter); line-height: 40px; white-space: nowrap; }
.tk-note { color: var(--text-muted); font-size: var(--text-xs); }

/* Pause / play at the right edge: the tape must be stoppable by hand, and a finger on it stops it (ticker.js) */
.tk-pause {
  position: absolute; right: 0; top: 0; z-index: 2; height: 40px; min-width: var(--tap); padding: 0 var(--space-3);
  border: 0; border-left: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-secondary);
  font: inherit; font-family: var(--font-mono); font-size: var(--text-xs); cursor: pointer;
}
.tk-pause:hover { color: var(--color-gold); }
.tk-pause:focus-visible { outline: 2px solid var(--color-gold); outline-offset: -2px; }
.ticker.is-still .tk-pause { position: sticky; float: right; }

/* Stopped or reduced motion: no animation, one copy, swipe or scroll the row by hand. */
.ticker.is-still { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: thin; }
.ticker.is-still::before, .ticker.is-still::after { display: none; }
.ticker.is-still .tk-track { animation: none; will-change: auto; }
.ticker.is-still .tk-chip { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) {
  .tk-track { animation: none; will-change: auto; }
}