/* Live ticker tape — matches --navy / --gold site palette. */

.ticker-tape-inner {
  display: flex;
  align-items: center;
  background: var(--navy, #1B2A4A);
  border-bottom: 1px solid var(--gold, #C9A84C);
  overflow: hidden;
  height: 34px;
}

.ticker-tape-label {
  flex: 0 0 auto;
  font-family: -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--gold, #C9A84C);
  padding: 0 14px;
  white-space: nowrap;
  border-right: 1px solid rgba(201,168,76,0.3);
}

.ticker-tape-track {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
}

.ticker-tape-items {
  display: flex;
  align-items: center;
}

/* Old ticker feel — 2026-09-08: replaced a continuous CSS marquee (which
   scrolled at a fixed rate independent of the actual data, so it either
   raced ahead of slow ticks or crawled behind fast bursts) with a single
   item stepping onto the tape each time the throttle in ticker-tape.js
   actually appends one. Motion now comes directly from real data arriving,
   the way a physical ticker only advances when a print actually happens. */
.ticker-item {
  flex: 0 0 auto;
  font-family: -apple-system, sans-serif;
  font-size: 12px;
  color: #f0ede4;
  padding: 0 18px;
  white-space: nowrap;
  border-right: 1px solid rgba(201,168,76,0.15);
  opacity: 0;
  transform: translateX(14px);
  animation: ticker-step-in 0.4s ease-out forwards;
}

.ticker-item strong {
  color: var(--gold, #C9A84C);
  margin-right: 4px;
}

.ticker-item em {
  font-style: normal;
  color: rgba(240,237,228,0.55);
  margin-left: 4px;
}

.ticker-trade strong { color: #7ec98f; }

@keyframes ticker-step-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}