/* ── Ticker ──
   Full-width activity strip that sits above the header. Values come from the
   same /api/* endpoints the metric pages use, so it can't drift out of sync. */

.ticker {
    --ticker-height: 34px;
    --ticker-speed: 55;              /* pixels per second */
    --ticker-flag: #ef4444;

    position: relative;
    height: var(--ticker-height);
    overflow: hidden;
    background-color: #131620;
    border-bottom: 1px solid #2a2d3a;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.01em;
    user-select: none;
}

.ticker__track {
    display: flex;
    align-items: center;
    height: 100%;
    width: max-content;
    will-change: transform;
    animation: ticker-scroll linear infinite;
    animation-duration: var(--ticker-duration, 60s);
}

.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track {
    animation-play-state: paused;
}

@keyframes ticker-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.ticker__item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0 1.1rem;
    white-space: nowrap;
    text-decoration: none;
    color: #e0e0e0;
    border-right: 1px solid #1f2230;
}

.ticker__item:hover .ticker__label,
.ticker__item:focus-visible .ticker__label {
    text-decoration: underline;
}

.ticker__item:focus-visible {
    outline: 1px solid #e0e0e0;
    outline-offset: -3px;
}

/* the feed tag — one color per data source */
.ticker__tag {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    background-color: var(--tag-bg, rgba(107, 114, 128, 0.15));
    color: var(--tag, #9ca3af);
    flex: none;
}

.ticker__label { color: #6b7280; }
.ticker__value { font-weight: 600; }

.ticker__delta { font-size: 0.65rem; }
.ticker__delta[data-dir="up"]   { color: #4ade80; }
.ticker__delta[data-dir="down"] { color: #f87171; }
.ticker__delta[data-dir="flat"] { color: #6b7280; }

/* breaking slot: anything from the last 48h */
.ticker__item.is-new .ticker__tag {
    background-color: var(--ticker-flag);
    color: #ffffff;
}

.ticker__item.is-new .ticker__value { color: #fca5a5; }

.ticker__flag {
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--ticker-flag);
    border: 1px solid var(--ticker-flag);
    border-radius: 3px;
    padding: 0.1rem 0.25rem;
}

/* no animation: becomes a normal swipeable strip */
@media (prefers-reduced-motion: reduce) {
    .ticker { overflow-x: auto; }
    .ticker__track { animation: none; }
    .ticker__item[data-clone] { display: none; }
}

@media (max-width: 600px) {
    .ticker { --ticker-height: 30px; font-size: 0.65rem; }
    .ticker__item { padding: 0 0.8rem; }
}