/* Plain CSS — no Tailwind, so there's no @source scanner to configure. */
:root {
  --bg: #ffffff;
  --fg: #0a0a0a;
  --muted: #6b7280;
  --border: #e5e7eb;
  --panel: #f9fafb;
  --up: #16a34a;
  --down: #dc2626;
  --warn: #d97706;
}
:root.dark {
  --bg: #0a0a0a;
  --fg: #fafafa;
  --muted: #9ca3af;
  --border: #1f2937;
  --panel: #111827;
  --up: #22c55e;
  --down: #f87171;
  --warn: #f59e0b;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  line-height: 1.55;
}
.muted { color: var(--muted); }
.spacer { flex: 1; }
.shell { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.shell header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.brand { font-weight: 700; }
h2 { font-size: 1rem; margin: 2rem 0 0.75rem; }

/* Overall banner */
.banner { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.25rem; border-radius: 12px; border: 1px solid var(--border); }
.banner .dot { width: 0.7rem; height: 0.7rem; border-radius: 999px; background: var(--muted); }
.banner--operational  { background: color-mix(in oklab, var(--up) 12%, transparent); border-color: var(--up); }
.banner--operational .dot { background: var(--up); }
.banner--degraded     { background: color-mix(in oklab, var(--warn) 12%, transparent); border-color: var(--warn); }
.banner--degraded .dot { background: var(--warn); }
.banner--major_outage { background: color-mix(in oklab, var(--down) 12%, transparent); border-color: var(--down); }
.banner--major_outage .dot { background: var(--down); }

/* Uptime grid */
.uptime { display: flex; gap: 2px; flex-wrap: wrap; }
.uptime .day { width: 6px; height: 26px; border-radius: 2px; background: var(--up); }
.uptime .day.down { background: var(--down); }

/* Components */
.components, .incidents, .timeline { list-style: none; padding: 0; margin: 0; }
.components li { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.pill { font-size: 0.78rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.05rem 0.55rem; color: var(--muted); }
.pill--operational { color: var(--up); border-color: var(--up); }
.pill--degraded, .pill--partial_outage { color: var(--warn); border-color: var(--warn); }
.pill--major_outage { color: var(--down); border-color: var(--down); }

/* Incidents */
.incidents { display: flex; flex-direction: column; gap: 0.75rem; }
.incident { border: 1px solid var(--border); border-left-width: 3px; border-radius: 10px; padding: 0.9rem 1.1rem; background: var(--panel); }
.incident.impact--critical { border-left-color: var(--down); }
.incident.impact--major { border-left-color: var(--warn); }
.incident.impact--minor { border-left-color: var(--muted); }
.incident-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.timeline { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.35rem; border-top: 1px dashed var(--border); padding-top: 0.6rem; }
.timeline li { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.9rem; }
.timeline .ts { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }