/* Live ticker in the header, every page (parity/ux/motion_v3_design.md,
   "Balik B — zivy ticker v hlavicce"). Own file per that doc's "Pravidla
   pro vsechny baliky" ("Nove CSS/JS do vlastnich souboru... kvuli
   paralelnim agentum") — never merge this into style.css.

   Layout: one row directly under <header class="site">, above <main>.
     [pulsing dot] LIVE NOW  |  scrolling marquee of calls  |  today/last300 tally + CTA
   The right (summary) block hides under 640px so the row stays one line on
   mobile (design doc point 4). */

.ticker {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
  font-size: 0.8rem;
  line-height: 1.2;
  overflow: hidden;
}

/* --- LIVE NOW ------------------------------------------------------- */

.ticker-live {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--live);
  white-space: nowrap;
}

.ticker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  flex: 0 0 auto;
  animation: ticker-pulse 1.6s ease-in-out infinite;
}

@keyframes ticker-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

/* --- Scrolling marquee of live calls --------------------------------- */

.ticker-marquee {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

/* Manual scroll affordance while the animation is paused/disabled
   (reduced motion, or hover/focus pause below) — "list still readable". */
.ticker-marquee:not(.is-animated) {
  overflow-x: auto;
}

.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  white-space: nowrap;
}

.ticker-track.is-animated {
  animation: ticker-scroll 34s linear infinite;
}

/* Pause on hover/focus so a reader can actually read a call before it
   scrolls away — "pauza na hover" (design doc point 2). */
.ticker-marquee:hover .ticker-track.is-animated,
.ticker-marquee:focus-within .ticker-track.is-animated {
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  /* Track content is duplicated once by ticker.js when animated, so -50%
     is exactly one full loop of the original (non-duplicated) list. */
  to { transform: translateX(-50%); }
}

.ticker-item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-mono);
}

.ticker-item + .ticker-item::before {
  content: "\00b7";
  margin-inline-end: 26px;
  color: var(--text-dim);
}

.ticker-item-market {
  font-weight: 700;
  color: var(--text);
}

.ticker-item-dir {
  font-weight: 700;
}
.ticker-item-dir.up { color: var(--instrument-up); }
.ticker-item-dir.down { color: var(--instrument-dn); }

.ticker-item-pct {
  color: var(--text-dim);
}

.ticker-item-loading,
.ticker-item-empty {
  color: var(--text-dim);
  font-family: inherit;
}
.ticker-item-empty a {
  color: var(--live);
}

/* --- Right-hand tally + CTA -------------------------------------------- */

.ticker-summary {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  color: var(--text-dim);
}

.ticker-cta {
  color: var(--cta);
  font-weight: 600;
}
.ticker-cta:hover {
  color: var(--cta-hover);
}

@media (max-width: 640px) {
  .ticker-summary {
    display: none;
  }
}

/* Newly-changed items flash using style.css's own flash-highlight-anim
   keyframes (parity/ux/motion_v3_design.md: "Pouzivej tokeny... existing
   flash-highlight-anim keyframes... can be reused by class name" — reused
   here by class name only, no duplicate @keyframes definition). */
.ticker-item.flash-highlight {
  border-radius: 4px;
  padding: 1px 4px;
  margin: -1px -4px;
}

@media (prefers-reduced-motion: reduce) {
  .ticker-dot {
    animation: none;
  }
  .ticker-track.is-animated {
    animation: none;
  }
}