/* The source and trading date stay visible while prices scroll. */
.ticker-source {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  justify-content: center; align-self: stretch; flex: 0 0 auto; padding: 0 12px;
  border-right: 1px solid rgba(255,255,255,.16); background: var(--navy);
  color: #fff; text-decoration: none; font-size: 10px; line-height: 1.35; white-space: nowrap;
}
.ticker-source strong { color: #fff; font-size: 11px; font-weight: 800; }
.ticker-source-detail { color: #4ade80; }
.ticker-source[data-stale="true"] strong { color: #fcd34d; }
.ticker-viewport { flex: 1; min-width: 0; overflow: hidden; }
.ticker-bar .ticker-inner { width: max-content; gap: 0; animation: ticker-scroll var(--ticker-duration, 90s) linear infinite; }
.ticker-group { display: flex; align-items: center; gap: 36px; padding-right: 36px; }
.ticker-quote { display: inline-flex; align-items: center; gap: 8px; }
.ticker-quote .ticker-change { margin-left: 4px; }
.ticker-inner .flat { color: #cbd5e1; }
.ticker-bar[data-paused="true"] .ticker-inner,
.ticker-bar[data-loading="true"] .ticker-inner,
.ticker-bar:focus-within .ticker-inner,
.ticker-bar:hover .ticker-inner { animation-play-state: paused; }
.ticker-message { padding: 0 18px; color: #cbd5e1; white-space: nowrap; }
.ticker-pause {
  display: grid; place-items: center; flex: 0 0 32px; height: 34px; padding: 0;
  border: 0; border-left: 1px solid rgba(255,255,255,.16); background: var(--navy);
  color: #fff; cursor: pointer; font-size: 13px;
}
.ticker-source:focus-visible, .ticker-pause:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
@keyframes ticker-scroll { to { transform: translateX(-50%); } }
@media (max-width: 540px) {
  .ticker-source { padding: 0 8px; font-size: 9px; }
  .ticker-source strong { font-size: 10px; }
  .ticker-group { gap: 26px; padding-right: 26px; }
}