/* =============================================================================
   THE WIRE — /explore's ambient attention ticker rolled out site-wide. Same
   recipe as the om-wire family in explore-front.css but self-contained
   (sc-wire-*) so explore's native wire and this one never fight; /explore +
   /about + auth/settings surfaces hide it. site-wire.js fills the tape from
   /api/explore/wire and stamps body.has-wire / body.wire-off.

   Docking: FIXED, not sticky — body{overflow-x:hidden} unsticks sticky (same
   lesson as the old ticker). Sits under the global control bar where that
   shows (body.has-cbar), else flush under the nav. Topic pages go absolute so
   it scrolls away with their non-sticky nav, like the old strip did.
   ============================================================================= */

.sc-wire {
  display: flex; align-items: stretch; height: 37px; overflow: hidden;
  position: fixed;
  top: var(--site-nav-h, 57px);
  left: 0; right: 0;
  z-index: 890;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  transition: background 0.3s, backdrop-filter 0.3s;
}
body.has-cbar .sc-wire { top: calc(var(--site-nav-h, 57px) + 54px); }
body.has-rail .sc-wire { left: var(--rail-w, 76px); }
body.page-topic .sc-wire, body.page-topic-custom .sc-wire { position: absolute; }

/* frosted once the page scrolls — the cbar's exact treatment */
body.nav-scrolled .sc-wire {
  background: rgba(20, 23, 27, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---- page space: reserved statically (the old ticker.css pattern) so the
   common path never layout-shifts; site-wire.js reverts via body.wire-off
   when the feed is empty. Mirrors site-cbar.css's page lists exactly. ---- */
body { padding-top: calc(var(--site-nav-h, 57px) + 91px); }         /* nav + cbar + wire */
body.page-newsroom, body.page-discuss, body.page-content, body.page-play,
body.page-brief, body.page-article, body.page-profile, body.page-notifications,
body.page-topic, body.page-topic-custom {
  padding-top: calc(var(--site-nav-h, 57px) + 37px);                /* nav + wire */
}

/* surfaces without the wire: explore (native om-wire; explore-front.css
   re-pads it), /about (stays clean), auth + settings modes */
body.page-explore .sc-wire, body.page-about .sc-wire,
body.auth-page .sc-wire, body.user-settings-mode .sc-wire,
body.admin-settings-mode .sc-wire, body.topic-settings-mode .sc-wire { display: none; }
body.page-explore, body.page-about,
body.auth-page, body.user-settings-mode,
body.admin-settings-mode, body.topic-settings-mode { padding-top: var(--site-nav-h, 57px); }

/* ---- label + live dot ---- */
.sc-wire-label {
  flex: none; display: inline-flex; align-items: center; gap: 9px;
  padding: 0 18px 0 20px; border-right: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: #fff;
}
.sc-wire-dot { position: relative; width: 7px; height: 7px; flex: none; }
.sc-wire-dot i { position: absolute; inset: 0; border-radius: 50%; background: #fff; }
.sc-wire-dot .sc-wire-ring { inset: -3px; background: transparent; border: 1px solid #fff; animation: sc-wire-ring 2.4s ease-out infinite; }

/* ---- tape ---- */
.sc-wire-viewport { flex: 1; overflow: hidden; display: flex; align-items: center; }
.sc-wire-track { display: flex; align-items: center; width: max-content; animation: sc-wire-ticker 90s linear infinite; }
.sc-wire-viewport:hover .sc-wire-track { animation-play-state: paused; }
.sc-wire-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; white-space: nowrap; text-decoration: none; }
.sc-wire-logo { width: 14px; height: 14px; flex: none; background-size: contain; background-repeat: no-repeat; background-position: center; }
.sc-wire-text { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }
.sc-wire-item:hover .sc-wire-text { color: #fff; }
.sc-wire-delta { font-size: 10px; font-weight: 800; letter-spacing: 0.6px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.45); }
.sc-wire-delta.is-up { color: #47c47d; }
.sc-wire-delta.is-down { color: #e05252; }
.sc-wire-sep { width: 3px; height: 3px; margin-left: 14px; background: rgba(255, 255, 255, 0.35); transform: rotate(45deg); }

@keyframes sc-wire-ring { 0% { transform: scale(0.6); opacity: 0.8; } 70%, 100% { transform: scale(2); opacity: 0; } }
@keyframes sc-wire-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .sc-wire-ring, .sc-wire-track { animation: none !important; }
}

/* ---- light mode (converted pages only — dark pages keep a dark wire) ---- */
html.si-light body.si-themed .sc-wire { border-bottom-color: rgba(16, 20, 24, 0.3); background: transparent; }
html.si-light body.si-themed.nav-scrolled .sc-wire { background: rgba(236, 238, 241, 0.75); }
html.si-light body.si-themed .sc-wire-label { color: #101418; border-right-color: rgba(16, 20, 24, 0.3); }
html.si-light body.si-themed .sc-wire-dot i { background: #101418; }
html.si-light body.si-themed .sc-wire-dot .sc-wire-ring { background: transparent; border-color: #101418; }
html.si-light body.si-themed .sc-wire-text { color: rgba(16, 20, 24, 0.78); }
html.si-light body.si-themed .sc-wire-item:hover .sc-wire-text { color: #101418; }
html.si-light body.si-themed .sc-wire-delta { color: rgba(16, 20, 24, 0.45); }
html.si-light body.si-themed .sc-wire-delta.is-up { color: #16a34a; }
html.si-light body.si-themed .sc-wire-delta.is-down { color: #dc2626; }
html.si-light body.si-themed .sc-wire-sep { background: rgba(16, 20, 24, 0.35); }

/* ---- empty/failed feed: strip gone, space handed back (rare) ---- */
body.wire-off .sc-wire { display: none; }
body.wire-off { padding-top: calc(var(--site-nav-h, 57px) + 54px); }
body.wire-off.page-newsroom, body.wire-off.page-discuss, body.wire-off.page-content,
body.wire-off.page-play, body.wire-off.page-brief, body.wire-off.page-article,
body.wire-off.page-profile, body.wire-off.page-notifications,
body.wire-off.page-topic, body.wire-off.page-topic-custom,
body.wire-off.page-explore, body.wire-off.page-about,
body.wire-off.auth-page, body.wire-off.user-settings-mode,
body.wire-off.admin-settings-mode, body.wire-off.topic-settings-mode { padding-top: var(--site-nav-h, 57px); }