/* =============================================================================
   GLOBAL CONTROL BAR — the /explore control bar (frame 28c) rolled out
   site-wide, replacing the old movers ticker strip. Same recipe as the
   xf-cbar family in explore-front.css but self-contained (sc-*) so explore's
   own bar and this one never fight; /explore + /about hide it (explore
   renders its native bar), topic pages let it scroll away like the old strip.

   Zones: MODE (Following | All CFB -> /explore) · SCOPE (conference chips ->
   /explore?conf=) · PULSE (rotating RISING stat, site-cbar.js) · IDENTITY
   (Personalize capsule). Light mode keys off body.si-themed as everywhere.
   ============================================================================= */

.sc-cbar {
  position: fixed;
  top: var(--site-nav-h, 57px);
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 54px;
  padding: 0 20px;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  transition: background 0.3s, backdrop-filter 0.3s;
}
body.has-rail .sc-cbar { left: var(--rail-w, 76px); }
body.nav-scrolled .sc-cbar {
  background: rgba(20, 23, 27, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Page space: nav + 54px bar (replaces ticker.css's nav + 36px strip). */
body { padding-top: calc(var(--site-nav-h, 57px) + 54px); }

/* The bar shows on browse/utility surfaces only. Hidden on: /explore (its
   own native bar), /about, the reading/feed surfaces (/newsroom, /discuss,
   /content, /brief, /articles), auth + settings + user pages, and topic
   pages. Hidden pages sit flush under the fixed nav. */
body.page-explore .sc-cbar,
body.page-about .sc-cbar,
body.page-newsroom .sc-cbar,
body.page-discuss .sc-cbar,
body.page-content .sc-cbar,
body.page-brief .sc-cbar,
body.page-article .sc-cbar,
body.auth-page .sc-cbar,
body.user-settings-mode .sc-cbar,
body.admin-settings-mode .sc-cbar,
body.topic-settings-mode .sc-cbar,
body.page-profile .sc-cbar,
body.page-notifications .sc-cbar,
body.page-topic .sc-cbar,
body.page-topic-custom .sc-cbar { display: none; }
body.page-explore, body.page-about,
body.page-newsroom, body.page-discuss, body.page-content,
body.page-brief, body.page-article,
body.auth-page, body.user-settings-mode, body.admin-settings-mode,
body.topic-settings-mode, body.page-profile, body.page-notifications,
body.page-topic, body.page-topic-custom { padding-top: 56px; }
/* explore-front.css (loads later) re-pads /explore for its native bar */

/* ---- MODE: bare segments, light active fill ---- */
.sc-mode { display: flex; align-items: center; gap: 4px; }
.sc-seg {
  flex: none !important;
  width: auto !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 6px 13px !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 12.5px !important;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.3 !important;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none !important;
}
a.sc-seg:hover { color: #fff !important; }
.sc-seg.is-active {
  background: #e9edf2 !important;
  color: #0b0d10 !important;
  font-weight: 700;
}

/* ---- SCOPE: conference chips ---- */
.sc-scope { display: flex; align-items: center; gap: 2px; }
.sc-conf {
  display: inline-flex !important;
  align-items: center;
  flex: none !important;
  width: auto !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 6px 13px !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 12px !important;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.3 !important;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none !important;
  cursor: pointer;
}
.sc-conf:hover { color: #fff !important; }
.sc-conf.is-active {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  font-weight: 700;
}

/* ---- zone dividers ---- */
.sc-div { width: 1px; align-self: stretch; margin: 10px 0; background: rgba(255, 255, 255, 0.08); flex: none; }
.sc-cbar [hidden] + .sc-div { display: none; }
.sc-cbar [hidden] + .sc-div + .sc-persona { margin-left: auto; }

/* ---- PULSE: one rotating rising stat ---- */
.sc-pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  text-decoration: none;
  min-width: 0;
}
.sc-pulse-label {
  flex: none;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.46);
}
.sc-pulse-logo {
  width: 15px;
  height: 15px;
  object-fit: contain;
  flex: none;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.sc-pulse-name { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; }
.sc-pulse:hover .sc-pulse-name { text-decoration: underline; text-underline-offset: 2px; }
.sc-pulse-val {
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.46);
  white-space: nowrap;
}
.sc-pulse-val.up { color: #35c66b; }
.sc-pulse-val.down { color: #e5595b; }
.sc-pulse-logo, .sc-pulse-name, .sc-pulse-val { transition: opacity 0.22s ease; }
.sc-pulse.is-fading .sc-pulse-logo,
.sc-pulse.is-fading .sc-pulse-name,
.sc-pulse.is-fading .sc-pulse-val { opacity: 0; }
.sc-pulse-dots { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.sc-pulse-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.sc-pulse-dot.is-active { background: rgba(255, 255, 255, 0.7); }

/* ---- IDENTITY: Personalize capsule ---- */
.sc-persona {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  text-decoration: none;
  flex: none;
}
.sc-persona:hover { border-color: rgba(255, 255, 255, 0.16); }
.sc-persona-btn {
  padding: 5px 12px;
  border-radius: 999px;
  background: #e9edf2;
  color: #0b0d10;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.sc-persona:hover .sc-persona-btn { background: #fff; }

/* Under ~1100px the pulse drops first; mode + identity always survive. */
@media (max-width: 1100px) {
  .sc-pulse, .sc-pulse + .sc-div { display: none; }
  .sc-persona { margin-left: auto; }
}
@media (max-width: 900px) {
  .sc-scope, .sc-mode + .sc-div { display: none; }
}

/* ---- light mode (converted pages only — dark pages keep a dark bar) ---- */
html.si-light body.si-themed .sc-cbar { border-bottom-color: rgba(16, 20, 24, 0.3); }
html.si-light body.si-themed.nav-scrolled .sc-cbar { background: rgba(236, 238, 241, 0.75); }
html.si-light body.si-themed .sc-seg { color: rgba(16, 20, 24, 0.72) !important; }
html.si-light body.si-themed a.sc-seg:hover { color: #101418 !important; }
html.si-light body.si-themed .sc-seg.is-active { background: #101418 !important; color: #fff !important; }
html.si-light body.si-themed .sc-conf { color: rgba(16, 20, 24, 0.72) !important; }
html.si-light body.si-themed .sc-conf:hover { color: #101418 !important; }
html.si-light body.si-themed .sc-conf.is-active {
  background: rgba(16, 20, 24, 0.08) !important;
  color: #101418 !important;
}
html.si-light body.si-themed .sc-div { background: rgba(16, 20, 24, 0.2); }
html.si-light body.si-themed .sc-pulse-label { color: rgba(16, 20, 24, 0.65); }
html.si-light body.si-themed .sc-pulse-name { color: #101418; }
html.si-light body.si-themed .sc-pulse-val { color: rgba(16, 20, 24, 0.65); }
html.si-light body.si-themed .sc-pulse-val.up { color: #16a34a; }
html.si-light body.si-themed .sc-pulse-val.down { color: #dc2626; }
html.si-light body.si-themed .sc-pulse-dot { background: rgba(16, 20, 24, 0.25); }
html.si-light body.si-themed .sc-pulse-dot.is-active { background: rgba(16, 20, 24, 0.75); }
html.si-light body.si-themed .sc-persona { border-color: rgba(16, 20, 24, 0.3); }
html.si-light body.si-themed .sc-persona:hover { border-color: rgba(16, 20, 24, 0.5); }
html.si-light body.si-themed .sc-persona-btn { background: #101418; color: #fff; }
html.si-light body.si-themed .sc-persona:hover .sc-persona-btn { background: #000; }