/* Status page styles (FR-21). Served from the same origin as index.html, so the
   page's Content-Security-Policy needs only style-src 'self' and no scripts. */
:root {
  color-scheme: light dark;
  --text: #1a1a1a;
  --muted: #555;
  --bg: #fff;
  --rule: #ccc;
  --good: #0b6b2e;
  --fair: #8a5a00;
  --poor: #b00020;
  --good-bg: #e6f4ea;
  --fair-bg: #fff4e0;
  --poor-bg: #fde7ea;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #eee;
    --muted: #bbb;
    --bg: #121212;
    --rule: #444;
    --good: #7fd49b;
    --fair: #f0c36b;
    --poor: #ff8a99;
    --good-bg: #13301e;
    --fair-bg: #3a2c0c;
    --poor-bg: #3d1218;
  }
}
body {
  margin: 0;
  padding: 1rem;
  font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
}
main { max-width: 64rem; margin: 0 auto; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; margin-top: 2rem; }
h3 { font-size: 1rem; margin: 0; }
a { color: inherit; }
.overall { padding: 0.75rem 1rem; border-left: 0.4rem solid; font-size: 1.1rem; }
.overall.state-operational { border-color: var(--good); background: var(--good-bg); }
.overall.state-partial_outage { border-color: var(--fair); background: var(--fair-bg); }
.overall.state-major_outage { border-color: var(--poor); background: var(--poor-bg); }
.notice { padding: 0.5rem 1rem; background: var(--fair-bg); }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
caption { text-align: left; color: var(--muted); padding-bottom: 0.25rem; }
th, td { border-bottom: 1px solid var(--rule); padding: 0.35rem 0.6rem; text-align: left; vertical-align: top; }
td.pct-good, td.pct-fair, td.pct-poor, td.pct-none { white-space: nowrap; font-variant-numeric: tabular-nums; }
.state-operational strong, .pct-good { color: var(--good); }
.state-partial_outage strong, .pct-fair { color: var(--fair); }
.state-outage strong, .pct-poor { color: var(--poor); }
.pct-none, .detail { color: var(--muted); }
.detail { font-size: 0.875rem; }
.incidents { padding-left: 1.25rem; }
.incidents li { margin-bottom: 1rem; }