/* Shared pool-status banner, used by the member app and the guard console.
   Status is conveyed three ways at once: a distinct color, an icon, and the
   explicit words in the label. Never color alone. */

.status-banner {
  border-radius: var(--hc-radius);
  padding: 28px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 2px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--hc-shadow);
}

.status-icon {
  font-size: clamp(2.4rem, 9vw, 3.6rem);
  line-height: 1;
}

.status-label {
  font-size: clamp(1.5rem, 6.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.status-detail {
  font-size: 1rem;
  opacity: 0.92;
}

.status-countdown {
  font-family: var(--hc-font-mono);
  font-size: clamp(2.4rem, 14vw, 4.5rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
}

/* OPEN, green */
.status-banner.is-open {
  background: var(--hc-open);
  color: var(--hc-open-ink);
}

/* CLOSED for lightning, deep alarm red, distinct from the brand red accent */
.status-banner.is-closed {
  background: var(--hc-closed);
  color: var(--hc-closed-ink);
  border-color: var(--hc-closed-ink);
  animation: hc-status-pulse 1.3s steps(2, end) infinite;
}

/* CLOSED for an event, deep alarm red without the lightning urgency pulse */
.status-banner.is-event_closed {
  background: var(--hc-closed);
  color: var(--hc-closed-ink);
}

/* Clear, awaiting a guard to confirm reopen, amber */
.status-banner.is-clear {
  background: var(--hc-clear);
  color: var(--hc-clear-ink);
}

/* Monitor degraded, loud black-and-yellow stripes that cannot be ignored */
.status-banner.is-degraded {
  color: var(--hc-degraded-ink);
  background: repeating-linear-gradient(
    45deg,
    var(--hc-degraded-a) 0 22px,
    var(--hc-degraded-b) 22px 44px
  );
  border-color: var(--hc-degraded-ink);
  animation: hc-status-pulse 1.3s steps(2, end) infinite;
}
.status-banner.is-degraded .status-label { text-shadow: 0 1px 2px var(--hc-degraded-b); }

/* Status unavailable, neutral */
.status-banner.is-unknown {
  background: var(--hc-unknown);
  color: var(--hc-unknown-ink);
}

@keyframes hc-status-pulse { 50% { opacity: 0.6; } }

/* A live-connection indicator. When the feed drops, the page must not present a
   stale status as live. */
.conn-bar {
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 6px 10px;
  font-size: 0.9rem;
  border-radius: var(--hc-radius-sm);
}
.conn-bar.is-connected { background: var(--hc-ok-soft); color: var(--hc-ok-ink); }
.conn-bar.is-connecting { background: var(--hc-warn-soft); color: var(--hc-warn-ink); }
.conn-bar.is-disconnected {
  background: var(--hc-closed);
  color: var(--hc-closed-ink);
  animation: hc-status-pulse 1s steps(2, end) infinite;
}

/* When disconnected, visibly de-emphasize the status so it is not trusted. */
.is-stale .status-banner { opacity: 0.55; filter: grayscale(0.35); }