/* Public status page (/status). Uses the shared tokens from app.css. */
.status-page { max-width: 860px; margin: 0 auto; }
.status-page h1 { font-size: var(--fs-2xl); margin: 0 0 var(--space-4); }
.st-h2 { font-size: var(--fs-l); margin: var(--space-6) 0 var(--space-3); }
.st-banner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-l); background: var(--ok-bg); border: 1px solid var(--ok); }
.st-banner.st-degraded, .st-banner.st-maintenance { background: var(--warn-bg); border-color: var(--warn); }
.st-banner.st-partialoutage, .st-banner.st-majoroutage { background: var(--danger-bg); border-color: var(--danger); }
.st-headline { font-size: var(--fs-l); font-weight: 800; margin: 0; }
.st-sub { color: var(--text-3); font-size: var(--fs-s); margin: 4px 0 0; }
.st-note { margin-top: var(--space-4); }
.st-foot { margin-top: var(--space-6); }
.st-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); flex: none; }
.st-banner > .st-dot { width: 18px; height: 18px; }
.st-dot.st-maintenance { background: var(--info); }
.st-dot.st-degraded { background: var(--warn); }
.st-dot.st-partialoutage { background: #D9480F; }
.st-dot.st-majoroutage { background: var(--danger); }
.st-components { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); }
.st-components li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
.st-components li:first-child { border-top: 0; }
.st-name { font-weight: 700; display: block; }
.st-desc { color: var(--text-3); font-size: var(--fs-s); display: block; }
.st-level { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-s); font-weight: 600; white-space: nowrap; }
.st-incident { margin-top: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--warn); border-radius: var(--radius); }
.st-incident.st-partialoutage, .st-incident.st-majoroutage { border-left-color: var(--danger); }
.st-incident.st-maintenance { border-left-color: var(--info); }
.st-incident h2, .st-incident h3 { font-size: var(--fs-l); margin: 0 0 4px; }
.st-meta { color: var(--text-3); font-size: var(--fs-s); margin: 0 0 var(--space-2); }
.st-updates { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.st-time { color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; }
.st-past { padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.st-past summary { cursor: pointer; min-height: var(--tap); }
.st-past .st-updates { margin-top: var(--space-2); }
@media (max-width: 560px) {
  .st-components li { flex-direction: column; align-items: flex-start; }
  .st-banner { padding: var(--space-3) var(--space-4); }
}