/* ============================================================
   LIVE ORG PULSE STRIP — Harbor Grit
   Roundtable: Website Is the Demo (2026-08-26)
   Owner: creative-director (Delacroix) · requires live-tokens.css
   "We run N production services — all answering right now."
   Status is a WORD, not a gauge. No blink. No glow. One mark max.
   ============================================================ */

.hg-pulse {
  display: flex;
  align-items: center;
  gap: var(--hg-space-2);
  width: 100%;
  padding: var(--hg-space-1) var(--hg-space-2);
  background: var(--hg-paper);
  border-top: 2px solid var(--hg-border);
  border-bottom: 2px solid var(--hg-border);
  font-family: var(--hg-font-body);
  color: var(--hg-ink);
  box-sizing: border-box;
}

/* The single live mark — an 8px square. Color comes from data-state. */
.hg-pulse-mark {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: var(--hg-ok);
}

.hg-pulse[data-state="warn"] .hg-pulse-mark {
  background: var(--hg-warn);
  animation: hg-pulse-warn 1.8s ease-in-out 2;
}

.hg-pulse[data-state="down"] .hg-pulse-mark {
  background: var(--hg-down);
  animation: none;
}

.hg-pulse[data-state="offline"] .hg-pulse-mark {
  background: var(--hg-offline);
  animation: none;
}

@keyframes hg-pulse-warn {
  0%   { opacity: 1; }
  25%  { opacity: 0.45; }
  50%  { opacity: 1; }
  75%  { opacity: 0.45; }
  100% { opacity: 1; }
}

/* The sentence. */
.hg-pulse-line {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
}

.hg-pulse-count {
  font-family: var(--hg-font-mono);
  font-weight: 600;
}

.hg-pulse-verdict {
  font-weight: 600;
}

.hg-pulse[data-state="warn"] .hg-pulse-verdict { color: var(--hg-warn); }
.hg-pulse[data-state="down"] .hg-pulse-verdict { color: var(--hg-down); }
.hg-pulse[data-state="offline"] .hg-pulse-verdict { color: var(--hg-offline); }

/* Service list — inline, hairline separators, no cards. */
.hg-pulse-services {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--hg-space-2);
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  font-family: var(--hg-font-mono);
  font-size: 12px;
  color: var(--hg-muted);
}

.hg-pulse-service {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.hg-pulse-service + .hg-pulse-service::before {
  content: "";
  width: 1px;
  height: 12px;
  background: var(--hg-rule);
  margin-right: var(--hg-space-2);
}

.hg-service-name { font-weight: 400; }
.hg-service-latency { color: var(--hg-ok); font-weight: 600; }

.hg-pulse-service[data-state="warn"] .hg-service-latency {
  color: var(--hg-warn);
}
.hg-pulse-service[data-state="down"] .hg-service-name {
  color: var(--hg-down);
}
.hg-pulse-service[data-state="down"] .hg-service-latency {
  color: var(--hg-down);
}
.hg-pulse-service[data-state="offline"] .hg-service-latency {
  color: var(--hg-offline);
}

/* Loading / static fallback — honest, never a fake green. */
.hg-pulse-loading .hg-pulse-verdict,
.hg-pulse[data-state="offline"] .hg-pulse-verdict {
  color: var(--hg-offline);
}

/* Reduce motion — kill the warn step entirely. */
@media (prefers-reduced-motion: reduce) {
  .hg-pulse[data-state="warn"] .hg-pulse-mark {
    animation: none;
  }
}

/* Mobile: stack, let the sentence breathe, wrap services under it. */
@media (max-width: 820px) {
  .hg-pulse {
    flex-wrap: wrap;
    gap: var(--hg-space-1);
  }
  .hg-pulse-services {
    flex-basis: 100%;
    margin-left: 24px; /* align with sentence after the mark */
    row-gap: var(--hg-space-1);
  }
}