/* SafeComments — status.css (public system status page) */

.status-page {
  padding-block: 48px 88px;
}

.status-container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}

.status-hero {
  max-width: 42rem;
  margin-bottom: 36px;
}

.status-hero .eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 12px;
  display: block;
}

.status-hero h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
  margin-bottom: 12px;
}

.status-hero p {
  color: var(--text-2);
  font-size: 1.05rem;
  line-height: 1.6;
}

.status-banner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  margin-bottom: 28px;
}

.status-banner-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.status-banner.operational .status-banner-dot {
  background: var(--success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 25%, transparent);
}

.status-banner.degraded .status-banner-dot {
  background: var(--warning);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 25%, transparent);
}

.status-banner.outage .status-banner-dot {
  background: #ef4444;
  box-shadow: 0 0 0 4px color-mix(in srgb, #ef4444 25%, transparent);
}

.status-banner.maintenance .status-banner-dot {
  background: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent);
}

.status-banner h2 {
  font-size: 1.15rem;
  margin-bottom: 4px;
}

.status-banner p {
  color: var(--text-2);
  font-size: 0.92rem;
}

.status-grid {
  display: grid;
  gap: 20px;
}

@media (min-width: 900px) {
  .status-grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }
}

.status-panel {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 20px 22px;
}

.status-panel h3 {
  font-size: 1rem;
  margin-bottom: 16px;
}

.status-component {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.status-component:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.status-component-info strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.status-component-info span {
  color: var(--text-3);
  font-size: 0.85rem;
  line-height: 1.45;
}

.status-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.status-pill.operational {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent);
}

.status-pill.degraded {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
}

.status-pill.outage {
  color: #ef4444;
  background: color-mix(in srgb, #ef4444 12%, transparent);
}

.status-pill.maintenance {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}

.status-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}

.status-metric {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.status-metric .val {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
}

.status-metric .lab {
  color: var(--text-3);
  font-size: 0.78rem;
  margin-top: 4px;
}

.status-issue {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.status-issue:last-child {
  border-bottom: none;
}

.status-issue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.status-issue-head strong {
  font-size: 0.9rem;
}

.status-issue-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

.status-issue p {
  color: var(--text-2);
  font-size: 0.85rem;
  line-height: 1.45;
}

.status-issue.error strong {
  color: #ef4444;
}

.status-issue.warning strong {
  color: var(--warning);
}

.status-history {
  margin-top: 28px;
}

.status-day-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.status-day-row:last-child {
  border-bottom: none;
}

.status-day-date {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-2);
}

.status-day-summary {
  font-size: 0.88rem;
  color: var(--text-2);
}

.status-incident {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.status-incident:last-child {
  border-bottom: none;
}

.status-incident h4 {
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.status-incident p {
  color: var(--text-2);
  font-size: 0.88rem;
  line-height: 1.5;
}

.status-incident-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--text-3);
}

.status-empty {
  color: var(--text-3);
  font-size: 0.9rem;
  padding: 8px 0;
}

.status-updated {
  margin-top: 28px;
  font-size: 0.82rem;
  color: var(--text-3);
}