/* OBEINSON FREQUENCY X — the live counters.
 *
 * live-stats.js builds these; hit-count.css still owns the strip they sit in,
 * so this file only adds what is new: the live dot, and the brand line when it
 * is carrying a listener count instead of the tagline.
 *
 * Colour comes from the hue-by-role palette (AGENTS.md): --dial-ok is the
 * "this is working" green, and np-phone.css re-solves it for the light theme,
 * so both themes are covered by the variable rather than by a second rule.
 */

#obnHitCount .obnStat {
  white-space: nowrap;
}

/* Light theme, and pre-existing: the strip's key words inherit the app's --muted
   (#6b7f95), which measures 4.12:1 against the header behind them — under AA for
   text this size. np-phone.css hit exactly this on the station rows and settled
   on #55687e, which measures 5.3:1 here; the same value keeps the two strips
   agreeing. Dark theme is untouched: dial-colors.css paints those keys with
   --dial-label and measures 5.54:1. */
:root[data-theme="light"] #obnHitCount,
:root[data-theme="light"] #obnHitCount span {
  color: #55687e;
}

/* The dot only appears once there is a number to stand for: no listeners, or no
   answer from the server, and the row is just text. */
#obnHitCount .obnStatLive.on::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--dial-ok, #00ff22);
  box-shadow: 0 0 6px var(--dial-ok, #00ff22);
  animation: obnStatPulse 2s ease-in-out infinite;
}

/* The figure beside it is deliberately NOT recoloured. dial-colors.css paints
   every reading in the strip with --dial-value and every key with --dial-label,
   and a listener count is a reading like the hit total beside it. The dot is the
   exception because it is not a reading at all — it is the "this is live" state,
   which is what --dial-ok is for. */

@keyframes obnStatPulse {
  0%, 100% { opacity: 1 }
  50% { opacity: .35 }
}

/* The brand line under OBEINSON FREQUENCY X, in every screen's status strip,
   while it is showing the count. Without .obnMarkLive it is the tagline again
   and nothing here applies. */
html .statStrip .ss-mark > span.obnMarkLive,
html header #logo h1 > span.obnMarkLive {
  /* !important, and the only one in this file. dial-colors.css carries
     `:root[data-theme="dark"] .statStrip span { color: var(--dial-label)
     !important }` — the right colour for a tagline, which is a key. While this
     line is carrying a live count it is not a key any more, so it takes the
     "on air" green instead. Both themes define --dial-ok, so one rule covers
     both; without the class the dial-colors rule applies again untouched.

     The selector is long for a reason, measured not guessed: that rule scores
     (0,3,1) and is !important, so a plain `.ss-mark > span.obnMarkLive` at
     (0,2,1) lost to it and the line stayed purple. This is (0,3,2). */
  color: var(--dial-ok, #00ff22) !important;
  /* `header h1 span { display:block !important }` exists five times over in the
     app's own styles, which is why the dot had nothing to sit beside. */
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
}

/* The banner's h1 is painted with a gradient clipped to the text
   (-webkit-text-fill-color:transparent !important), and a child inherits that
   fill — so the green above was computed, applied, and completely invisible,
   with the brand gradient still drawing the glyphs. Giving the span its own
   opaque fill is what actually colours it. The gradient still runs on the name
   above, untouched. */
html header #logo h1 > span.obnMarkLive {
  -webkit-text-fill-color: var(--dial-ok, #00ff22) !important;
}

html .statStrip .ss-mark > span.obnMarkLive::before,
html header #logo h1 > span.obnMarkLive::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 5px currentColor;
  animation: obnStatPulse 2s ease-in-out infinite;
  flex: none;
}

/* Reduce Motion: the dot stays lit rather than breathing. It is a state
   indicator, so it has to keep reading as "on" when the animation is gone. */
@media (prefers-reduced-motion: reduce) {
  #obnHitCount .obnStatLive.on::before,
  html .statStrip .ss-mark > span.obnMarkLive::before,
  html header #logo h1 > span.obnMarkLive::before {
    animation: none !important;
    opacity: 1 !important;
  }
}