/* S6 — public status page (/status). Standalone, no master page. */
:root {
  --st-brand: #b01e1c;
  --st-ok: #1a7f37;
  --st-degraded: #b8860b;
  --st-down: #b01e1c;
  --st-unknown: #6b7280;
  --st-bg: var(--bk-surface-2);
  --st-card: var(--bk-surface);
  --st-ink: var(--bk-text);
  --st-muted: var(--bk-text-muted);
  --st-line: var(--bk-line);
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0;
  font-family: 'Segoe UI', system-ui, Arial, sans-serif;
  background: var(--st-bg); color: var(--st-ink);
}
.st-wrap { max-width: 720px; margin: 0 auto; padding: 32px 20px 48px; }
.st-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 8px; }
.st-logo { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.st-mark { width: 16px; height: 16px; border-radius: 50%; background: var(--st-brand); position: relative; display: inline-block; }
.st-mark::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--st-bg); top: 5px; left: 5px; }
.st-by { color: var(--st-muted); font-weight: 400; font-size: 14px; }
.st-title { font-size: 15px; color: var(--st-muted); }

.st-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; border-radius: 12px; font-weight: 600; font-size: 16px;
  margin-bottom: 22px; border: 1px solid var(--st-line); background: var(--st-card);
}
.st-banner .st-dot { width: 11px; height: 11px; border-radius: 50%; }
.st-banner.st-ok { border-color: rgba(26,127,55,.35); }
.st-banner.st-ok .st-dot { background: var(--st-ok); }
.st-banner.st-degraded { border-color: rgba(184,134,11,.4); }
.st-banner.st-degraded .st-dot { background: var(--st-degraded); }
.st-banner.st-down { border-color: rgba(176,30,28,.4); }
.st-banner.st-down .st-dot { background: var(--st-down); }
.st-banner.st-unknown .st-dot { background: var(--st-unknown); }

.st-card { padding: 20px 22px; margin-bottom: 18px; }
.st-card h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--st-muted); margin: 0 0 14px; }

.st-list { list-style: none; margin: 0; padding: 0; }
.st-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--st-line); }
.st-row:last-child { border-bottom: 0; }
.st-name { font-size: 15px; font-weight: 500; }
.st-state { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.st-state .st-dot { width: 9px; height: 9px; border-radius: 50%; }
.st-state.st-operational { color: var(--st-ok); }
.st-state.st-operational .st-dot { background: var(--st-ok); }
.st-state.st-degraded { color: var(--st-degraded); }
.st-state.st-degraded .st-dot { background: var(--st-degraded); }
.st-state.st-down { color: var(--st-down); }
.st-state.st-down .st-dot { background: var(--st-down); }
.st-state.st-unknown { color: var(--st-unknown); }
.st-state.st-unknown .st-dot { background: var(--st-unknown); }

.st-sla p { font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
.st-muted { color: var(--st-muted); }
.st-sla a { color: var(--st-brand); }

.st-foot { text-align: center; color: var(--st-muted); font-size: 12px; margin-top: 24px; }

@media (prefers-color-scheme: dark) {
  :root { --st-bg: #14151a; --st-card: #1d1f26; --st-ink: #e8e9ee; --st-line: #2a2d36; --st-muted: #9aa0ac; }
  .st-mark::after { background: var(--st-card); }
}

/* ============ Dark theme (Phase 2) — appended, light untouched ============ */
/* App-driven dark mode (data-theme) mapped to the CAST dark palette.
   Redefining the --st-* tokens cascades to every rule that uses them. */
:root[data-theme="dark"] {
  --st-bg: var(--bk-surface-2);      /* ground   */
  --st-card: var(--bk-surface);    /* surface  */
  --st-ink: var(--bk-text);     /* primary text */
  --st-muted: var(--bk-text-muted);   /* muted    */
  --st-line: var(--bk-line);    /* border   */
  --st-ok: #6ee7b7;      /* success  */
  --st-degraded: #fcd34d;/* warning  */
  --st-down: #ff6b68;    /* danger / down (brand accent on dark) */
  --st-unknown: #97a1af; /* unknown  */
  /* --st-brand kept at #b01e1c so the logo mark stays brand-red fill */
}
:root[data-theme="dark"] .st-mark::after { background: var(--st-card); }
:root[data-theme="dark"] .st-card { box-shadow: 0 1px 3px rgba(0,0,0,0.45); }
:root[data-theme="dark"] .st-sla a { color: #ff6b68; } /* brand link → accent on dark */