/* ── /status page styles ──────────────────────────────────────────────
   Lives in an external file (NOT an inline <style> block) because the
   production CSP is `style-src 'self'` — inline <style> blocks and
   style="" attributes are silently blocked, which left this page
   rendering unstyled. Keep every rule here; never inline. */

.status-shell { max-width: 720px; margin: 64px auto; padding: 0 24px; }
.status-eyebrow {
  color:#B14CFF; font-size:11px; letter-spacing:0.42em;
  font-weight:700; text-transform:uppercase; margin:0 0 18px;
}
.status-h1 { margin:0 0 18px; }
.status-pill {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:999px; font-size:13px;
  letter-spacing:0.06em; text-transform:uppercase; font-weight:700;
}
.status-pill.ok       { background:rgba(34,197,94,0.14);  color:#86efac; }
.status-pill.degraded { background:rgba(234,179,8,0.16); color:#fde68a; }
.status-pill.down     { background:rgba(239,68,68,0.16); color:#fca5a5; }
.surface-list { margin-top:28px; }
.surface-row {
  display:grid; grid-template-columns: 1.2fr auto auto auto;
  gap:16px; padding:14px 16px; align-items:center;
  border:1px solid rgba(177,76,255,0.14);
  border-radius:12px; margin-top:10px;
  background:rgba(255,255,255,0.02);
}
.surface-row .name { font-weight:600; }
.surface-row .meta { font-size:12px; color:rgba(241,245,249,0.55); }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot.ok   { background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,0.6); }
.dot.down { background:#ef4444; box-shadow:0 0 8px rgba(239,68,68,0.6); }
.ts { font-size:12px; color:rgba(241,245,249,0.45); margin-top:18px; }
.status-contact { margin-top:36px; font-size:13px; color:rgba(241,245,249,0.55); }
.status-contact a { color:#C07BFF; }

/* P27: component list + incident history. Logical properties only (RTL). */
.status-section { margin-block-start: 32px; }
.status-h2 { font-size: 15px; letter-spacing: 0.04em; margin: 0 0 8px; }
.surface-list, .incident-list, .incident-updates { list-style: none; padding: 0; margin: 0; }
.surface-list .surface-row { grid-template-columns: 1fr auto; }
.dot.warn { background:rgb(234,179,8); box-shadow:0 0 8px rgba(234,179,8,0.6); }
.dot.idle { background:rgba(241,245,249,0.25); }
.incident {
  border:1px solid rgba(177,76,255,0.14); border-radius:12px;
  padding:14px 16px; margin-block-start:10px; background:rgba(255,255,255,0.02);
}
.incident[data-impact="major"], .incident[data-impact="critical"] { border-color:rgba(239,68,68,0.4); }
.incident-head { display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; }
.incident-badge, .incident-impact {
  font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  padding:2px 8px; border-radius:999px; background:rgba(177,76,255,0.14);
}
.incident-when, .incident-update-meta { font-size:12px; color:rgba(241,245,249,0.55); margin:6px 0 0; }
.incident-update { border-inline-start:2px solid rgba(177,76,255,0.25); padding-inline-start:10px; margin-block-start:10px; }
.incident-update-body { margin:4px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.incident-empty { font-size:13px; color:rgba(241,245,249,0.55); padding:10px 0; }
.status-refresh {
  margin-inline-start:10px; font:inherit; font-size:12px; cursor:pointer;
  background:transparent; color:#C07BFF; border:1px solid rgba(177,76,255,0.3);
  border-radius:999px; padding:2px 10px;
}
.status-refresh:disabled { opacity:0.5; cursor:progress; }
.status-error { font-size:13px; color:#fca5a5; margin-block-start:12px; }
@media (max-width: 480px) { .status-shell { margin: 32px auto; padding: 0 16px; } }