/* Status page styles. Loaded as a separate file to satisfy strict CSP
   (script-src 'self' / style-src 'self' rules disallow inline). */

.status-main { padding: 56px 0 80px; min-height: 70vh; }

.status-head { text-align: center; margin-bottom: 48px; }
.status-head h1 {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}

.overall {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  background: var(--bg-elev);
  border: 1px solid var(--border);
}
.overall .dot { width: 12px; height: 12px; border-radius: 50%; }
.overall.ok .dot       { background: #1ec76a; box-shadow: 0 0 0 4px rgba(30,199,106,.18); }
.overall.degraded .dot { background: #f7a73c; box-shadow: 0 0 0 4px rgba(247,167,60,.18); }
.overall.down .dot     { background: #e84a5f; box-shadow: 0 0 0 4px rgba(232,74,95,.2); }
.overall.unknown .dot  { background: var(--fg-mute); }

.services {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.service {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.service-name { font-weight: 600; letter-spacing: -0.01em; }
.service-desc { font-size: 13px; color: var(--fg-mute); margin-top: 2px; }

.service-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}
.service-status.ok       { color: #1ea24f; }
.service-status.degraded { color: #c97a18; }
.service-status.down     { color: #c4324f; }
.service-status.unknown  { color: var(--fg-mute); }
.service-status .pip {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.meta {
  text-align: center;
  margin-top: 40px;
  font-size: 13px;
  color: var(--fg-mute);
}
.meta a { color: var(--brand); }

/* Incident / maintenance banner */
.banner {
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  border: 1px solid transparent;
}
.banner-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
  opacity: 0.85;
}
.banner-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}
.banner-message,
.banner-window {
  font-size: 14px;
  opacity: 0.92;
  margin-top: 6px;
}
.banner.sev0 { background: #fce8eb; border-color: #c4324f; color: #6b1a2c; }
.banner.sev1 { background: #fce8eb; border-color: #c4324f; color: #6b1a2c; }
.banner.sev2 { background: #fff4e1; border-color: #c97a18; color: #6b430a; }
.banner.sev3 { background: #f1f3f7; border-color: #9aa3b1; color: #2c3340; }
.banner.maintenance { background: #e8f1ff; border-color: #3a78d8; color: #1d3d77; }