/* Semantic tokens, light and dark, in the spirit of @tv/design-tokens. */
:root {
  --background: #ffffff;
  --card: #f8fafc;
  --foreground: #0f172a;
  --muted-foreground: #64748b;
  --border: #e2e8f0;
  --success: #16a34a;
  --warning: #d97706;
  --destructive: #dc2626;
  --neutral: #94a3b8;
  --primary: #2563eb;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0b1120;
    --card: #111827;
    --foreground: #e5e7eb;
    --muted-foreground: #9ca3af;
    --border: #1f2937;
    --primary: #60a5fa;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }
.top { border-bottom: 1px solid var(--border); }
.top-row { display: flex; justify-content: space-between; align-items: center; height: 56px; }
.brand { font-weight: 700; color: var(--foreground); }
.lang { font-size: 14px; color: var(--muted-foreground); }
h1 { font-size: 28px; margin: 32px 0 8px; }
h2 { font-size: 18px; margin: 32px 0 12px; }
.intro, .muted { color: var(--muted-foreground); }
.small { font-size: 14px; }
.overall {
  margin: 24px 0; padding: 16px 20px; border-radius: 12px; font-weight: 600;
  border: 1px solid var(--border); background: var(--card); display: flex; gap: 12px; align-items: center;
}
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--neutral); }
.up .dot, .dot.up { background: var(--success); }
.partial .dot, .dot.partial { background: var(--warning); }
.down .dot, .dot.down { background: var(--destructive); }
.group { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.group h2 { margin: 0; padding: 12px 20px; font-size: 16px; background: var(--card); border-bottom: 1px solid var(--border); }
.check { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.check:last-child { border-bottom: 0; }
.check-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.check-name { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.check-state { font-size: 14px; color: var(--muted-foreground); }
.bars { display: flex; gap: 2px; margin-top: 10px; height: 24px; }
.bar { flex: 1; border-radius: 2px; background: var(--neutral); min-width: 2px; }
.bar.up { background: var(--success); }
.bar.down { background: var(--destructive); }
.incident { border: 1px solid var(--border); border-left: 4px solid var(--neutral); border-radius: 8px; padding: 12px 16px; margin-bottom: 12px; background: var(--card); }
.incident.outage { border-left-color: var(--destructive); }
.incident.degraded { border-left-color: var(--warning); }
.incident.maintenance, .incident.information { border-left-color: var(--primary); }
.incident h3 { margin: 0 0 4px; font-size: 16px; }
.incident p { margin: 6px 0 0; white-space: pre-line; }
.footer { display: flex; gap: 24px; flex-wrap: wrap; padding: 32px 16px; margin-top: 32px; border-top: 1px solid var(--border); font-size: 14px; }