/* =====================
   STATUS VIEW — page-level elements
   ===================== */

.status-page {
  min-height: 100vh;
  max-width: var(--status-page-max-width);
  padding-bottom: var(--legend-pb);
}

/* ── State colors (scoped to the page so nothing else picks them up) ── */
.status-page [data-state="up"] { --status-color: var(--success-text-color); }
.status-page [data-state="degraded"] { --status-color: var(--warning-text-color); }
.status-page [data-state="down"] { --status-color: var(--error-text-color); }
.status-page [data-state="unknown"] { --status-color: var(--mute); }

.status-page .status-dot {
  --dot-color: var(--status-color);
}

/* ── Hero ── */
.status-hero {
  margin-bottom: var(--status-hero-mb);
}

.status-title {
  margin-top: var(--hero-title-mt);
}

.status-overall {
  gap: var(--gap-icon);
  border-color: var(--status-color);
}

.status-overall-label {
  font-size: var(--font-size-xs);
}

.status-hero-desc {
  max-width: var(--hero-desc-max-width);
  margin-top: var(--gap-md);
}

/* ── List ── */
.status-list {
  gap: var(--gap-grid);
}

.status-empty {
  padding: var(--padding-card) 0;
  font-size: var(--font-size-md);
}

/* ── Timeline bars ── */
.status-timeline {
  display: flex;
  gap: var(--gap-3xs);
  align-items: stretch;
  height: var(--status-bar-height);
}

.status-bar {
  flex: 1;
  min-width: var(--status-bar-min-width);
  border-radius: var(--status-bar-radius);
  background: var(--status-color);
  opacity: var(--status-dim);
  transition: opacity var(--transition-fast);
}

.status-bar[data-state="unknown"] {
  background: var(--surface-8);
}

.status-bar:hover {
  opacity: 1;
}

/* ── Legend ── */
.status-legend {
  margin-top: var(--space-page);
}

.status-legend-keys {
  flex-wrap: wrap;
  gap: var(--gap-base);
}

.status-legend-key {
  gap: var(--gap-xs);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .status-page { padding: var(--header-offset) var(--space-page-md) var(--legend-pb-md); }

  .status-legend {
    gap: var(--gap-sm);
  }
}

@media (max-width: 560px) {
  .status-page { padding: var(--header-offset) var(--space-page-sm) var(--legend-pb-md); }
  .status-bar:nth-child(-n+46) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .status-bar { transition: none; }
}