/* ============================================================
   STATUS PAGE
   Professional, authoritative status page aesthetic.
   Inspired by patterns from Stripe, Linear, Vercel status pages.
   Dark, minimal, information-dense without feeling cluttered.
   ============================================================ */

/* ── Shared layout ───────────────────────────────────────── */

.st-container {
  max-width: 740px;
  margin: 0 auto;
  padding: 0 2rem;
}

.st-section {
  padding: 3rem 0;
}

.st-section--alt {
  background: rgba(255,255,255,0.012);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.st-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.25);
  margin-bottom: 1rem;
}

/* ── Hero / overall status ───────────────────────────────── */

.st-hero {
  padding: 5.5rem 0 2.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Main overall block */
.st-overall {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.75rem 2rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
  margin-bottom: 1.25rem;
  transition: border-color 0.4s, background 0.4s;
}

/* Indicator column */
.st-overall-indicator {
  padding-top: 0.35rem;
  flex-shrink: 0;
}

.st-overall-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #333;
  transition: background 0.4s, box-shadow 0.4s;
}

/* Body */
.st-overall-title {
  font-size: 1.625rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
  line-height: 1.2;
  margin-bottom: 0.3rem;
  transition: color 0.3s;
}

.st-overall-sub {
  font-size: 0.8rem;
  color: #555;
  line-height: 1.5;
}

.st-api-source {
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.75rem;
  color: #555;
}

/* ── Status state colours ────────────────────────────────── */

/* Operational */
.st-overall[data-status="operational"] {
  border-color: rgba(52,211,153,0.18);
  background:   rgba(52,211,153,0.03);
}
.st-overall[data-status="operational"] .st-overall-dot {
  background:   #34d399;
  box-shadow:   0 0 8px rgba(52,211,153,0.45);
  animation:    st-pulse-op 2.5s ease-in-out infinite;
}
.st-overall[data-status="operational"] .st-overall-title { color: #fff; }

/* Degraded */
.st-overall[data-status="degraded"] {
  border-color: rgba(251,191,36,0.2);
  background:   rgba(251,191,36,0.025);
}
.st-overall[data-status="degraded"] .st-overall-dot {
  background:   #fbbf24;
  box-shadow:   0 0 8px rgba(251,191,36,0.45);
  animation:    st-pulse-deg 2s ease-in-out infinite;
}
.st-overall[data-status="degraded"] .st-overall-title { color: #fef3c7; }

/* Offline */
.st-overall[data-status="offline"] {
  border-color: rgba(180,22,22,0.25);
  background:   rgba(180,22,22,0.04);
}
.st-overall[data-status="offline"] .st-overall-dot {
  background:   #ef4444;
  box-shadow:   0 0 8px rgba(239,68,68,0.4);
}
.st-overall[data-status="offline"] .st-overall-title { color: #fee2e2; }

/* Unknown / loading */
.st-overall[data-status="loading"],
.st-overall[data-status="unknown"] {
  border-color: rgba(255,255,255,0.07);
}
.st-overall[data-status="loading"] .st-overall-dot,
.st-overall[data-status="unknown"] .st-overall-dot {
  background: #444;
  animation: st-pulse-unk 1.8s ease-in-out infinite;
}

@keyframes st-pulse-op  { 0%,100%{opacity:1} 50%{opacity:0.45} }
@keyframes st-pulse-deg { 0%,100%{opacity:1} 50%{opacity:0.4}  }
@keyframes st-pulse-unk { 0%,100%{opacity:0.4} 50%{opacity:0.8} }

/* Meta row */
.st-meta-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.st-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: #444;
}

.st-meta-item svg { opacity: 0.6; }

.st-meta-divider {
  color: rgba(255,255,255,0.12);
  font-size: 0.72rem;
  user-select: none;
}

/* ── Service / application panels ────────────────────────── */

.st-panel {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  overflow: hidden;
}

.st-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  gap: 1.5rem;
  min-height: 3.5rem;
}

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

.st-row-left {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
  flex: 1;
}

.st-row-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
  flex-shrink: 0;
}

.st-row-info {
  min-width: 0;
}

.st-row-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #ddd;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.st-row-desc {
  font-size: 0.72rem;
  color: #4a4a4a;
  line-height: 1.4;
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.st-row-right {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-shrink: 0;
}

/* Response time / meta label */
.st-row-latency {
  font-size: 0.7rem;
  color: #3a3a3a;
  font-variant-numeric: tabular-nums;
  min-width: 3.5rem;
  text-align: right;
}

/* Status pill */
.st-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.69rem;
  font-weight: 700;
  padding: 0.22rem 0.55rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}

.st-pill[data-status="operational"] {
  background: rgba(52,211,153,0.07);
  border-color: rgba(52,211,153,0.15);
  color: #34d399;
}
.st-pill[data-status="degraded"] {
  background: rgba(251,191,36,0.07);
  border-color: rgba(251,191,36,0.15);
  color: #fbbf24;
}
.st-pill[data-status="offline"] {
  background: rgba(239,68,68,0.07);
  border-color: rgba(239,68,68,0.15);
  color: #f87171;
}
.st-pill[data-status="unknown"] {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.07);
  color: #444;
}
/* Application open/closed pills */
.st-pill[data-status="open"] {
  background: rgba(52,211,153,0.07);
  border-color: rgba(52,211,153,0.15);
  color: #34d399;
}
.st-pill[data-status="closed"] {
  background: rgba(239,68,68,0.07);
  border-color: rgba(239,68,68,0.15);
  color: #f87171;
}

.st-pill-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Application notice beneath row */
.st-app-notice {
  font-size: 0.72rem;
  color: #444;
  padding: 0.625rem 1.25rem 0.75rem calc(1.25rem + 30px + 0.875rem);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  line-height: 1.5;
}

.st-app-notice:last-child { border-bottom: none; }

.st-app-teams {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.35rem;
}

.st-team-chip {
  font-size: 0.66rem;
  font-weight: 500;
  padding: 0.15rem 0.45rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px;
  color: #666;
  letter-spacing: 0.01em;
}

/* ── Skeleton loading ─────────────────────────────────────── */

.st-skeleton {
  pointer-events: none;
}

.st-skel-block {
  background: rgba(255,255,255,0.04) !important;
  border-color: transparent !important;
  animation: st-shimmer 1.5s ease-in-out infinite;
}

.st-skel-line {
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  display: inline-block;
  animation: st-shimmer 1.5s ease-in-out infinite;
}

@keyframes st-shimmer {
  0%   { opacity: 0.4; }
  50%  { opacity: 0.9; }
  100% { opacity: 0.4; }
}

/* ── Footer note ─────────────────────────────────────────── */

.st-footer-note {
  font-size: 0.78rem;
  color: #444;
  line-height: 1.7;
}

.st-footer-note code {
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.72rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
  color: #666;
}

.st-link {
  color: #666;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.st-link:hover { color: #bbb; }

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 640px) {
  .st-hero { padding: 5rem 0 2.25rem; }

  .st-overall {
    padding: 1.25rem 1.25rem;
    gap: 1rem;
  }

  .st-overall-title { font-size: 1.3rem; }

  .st-meta-row { gap: 0.4rem; }

  .st-row-desc     { display: none; }
  .st-row-latency  { display: none; }

  .st-row { padding: 0.875rem 1rem; }
}

@media (max-width: 420px) {
  .st-overall-title { font-size: 1.15rem; }
  .st-section { padding: 2.25rem 0; }
}