/* Results ticker - see includes/results-ticker.php.
   Reads the design-system tokens when they are there and falls back to the
   legacy dark palette when they are not, so it works on both renderings. */

.cp-ticker {
    --tk-bg:      var(--cp-surface, #141f19);
    --tk-chip:    var(--cp-bg, #0e1a14);
    --tk-line:    var(--cp-line, #1e3028);
    --tk-muted:   var(--cp-muted, #7a9a85);
    --tk-ok:      var(--cp-ok, #2dba6e);
    --tk-warn:    var(--cp-warn, #e8a020);
    --tk-hover:   var(--cp-accent-line, #c9a84c);
    --tk-gap:     0.5rem;

    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    margin-bottom: 1.25rem;
    background: var(--tk-bg);
    border: 1px solid var(--tk-line);
    border-radius: 0.5rem;
    max-width: 1470px;
    min-width: 0;
}

.cp-ticker__label {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tk-muted);
    white-space: nowrap;
}

.cp-ticker__viewport {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.cp-ticker__track {
    display: flex;
    width: max-content;
}

/* Margin, not flex gap: the track holds two identical copies once it is
   running, and -50% is only seamless if each chip owns its own spacing. */
.cp-ticker__chip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: var(--tk-gap);
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--tk-line);
    border-radius: 2rem;
    background: var(--tk-chip);
    color: inherit;
    font-size: 0.8rem;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s;
}

.cp-ticker__chip:hover,
.cp-ticker__chip:focus-visible {
    border-color: var(--tk-hover);
    background: var(--tk-bg);
    color: inherit;
}

.cp-ticker__chip.tone-won    { border-color: var(--tk-ok); }
.cp-ticker__chip.tone-placed { border-color: var(--tk-warn); }
.cp-ticker__chip.tone-lost,
.cp-ticker__chip.tone-void   { opacity: 0.75; }

.cp-ticker__time   { color: var(--tk-muted); font-size: 0.75rem; }
.cp-ticker__course { font-weight: 600; }
.cp-ticker__note   { color: var(--tk-muted); font-size: 0.7rem; }
.cp-ticker__badge  { display: flex; align-items: center; gap: 0.25rem; }
.cp-ticker__badge small { color: var(--tk-muted); font-size: 0.7rem; }

/* Running: the script found more chips than fit, duplicated them and set
   --ticker-duration from the track width so the speed is the same however
   many results there are. */
.cp-ticker.is-running .cp-ticker__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
            mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
}

.cp-ticker.is-running .cp-ticker__track {
    animation: cp-ticker-scroll var(--ticker-duration, 40s) linear infinite;
}

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

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

@media (prefers-reduced-motion: reduce) {
    .cp-ticker.is-running .cp-ticker__track { animation: none; }
    .cp-ticker.is-running .cp-ticker__viewport {
        overflow-x: auto;
        -webkit-mask-image: none;
                mask-image: none;
    }
}

@media (max-width: 575px) {
    .cp-ticker__label { display: none; }
}