/* aigor status page — standalone, no build step. Design language: institutional
   navy + orange-as-signal, light-first, figures in monospace. Tokens are inlined
   here (the page deploys on its own, separate from the webapp token file). */
:root {
  --navy: #0e1b3c;
  --orange: #f47b20;
  --ink: #0e1b3c;
  --ink-soft: #51607e;
  --surface: #f6f8fc;
  --card: #ffffff;
  --border: #e2e8f4;
  --op: #1f9d55; /* operational  */
  --deg: #d97706; /* degraded     */
  --out: #dc2626; /* major outage */
  --unk: #6b7280; /* unknown      */
  --radius: 12px;
  --shadow: 0 1px 2px rgba(14, 27, 60, 0.06), 0 8px 24px rgba(14, 27, 60, 0.05);
  --font: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --display: "Outfit", var(--font);
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--surface);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 32px 20px 64px; }

/* ── Header ─────────────────────────────────────────────────────────────── */
header.site { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
header.site .logo { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
header.site .logo .dot { color: var(--orange); }
header.site .sub { color: var(--ink-soft); font-size: 14px; margin-left: auto; }

/* ── Overall banner ─────────────────────────────────────────────────────── */
.banner {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 22px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--shadow); margin-bottom: 8px;
}
.banner .blob { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.banner h1 { font-family: var(--display); font-size: 20px; font-weight: 600; margin: 0; }
.banner.op { border-left: 4px solid var(--op); }
.banner.deg { border-left: 4px solid var(--deg); }
.banner.out { border-left: 4px solid var(--out); }
.banner.unk { border-left: 4px solid var(--unk); }
.op .blob { background: var(--op); }
.deg .blob { background: var(--deg); }
.out .blob { background: var(--out); }
.unk .blob { background: var(--unk); }

.updated { color: var(--ink-soft); font-size: 12.5px; margin: 10px 2px 26px; }
.updated time { font-family: var(--mono); }

/* ── Section titles ─────────────────────────────────────────────────────── */
h2.section {
  font-family: var(--display); font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft);
  margin: 28px 2px 12px;
}

/* ── Component cards ────────────────────────────────────────────────────── */
.components { display: flex; flex-direction: column; gap: 10px; }
.component {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
}
.component .top { display: flex; align-items: baseline; gap: 10px; }
.component .name { font-weight: 600; font-size: 15.5px; }
.component .desc { color: var(--ink-soft); font-size: 13px; }
.component .pill {
  margin-left: auto; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.component .pill .blob { width: 9px; height: 9px; border-radius: 50%; }
.pill.op { color: var(--op); } .pill.op .blob { background: var(--op); }
.pill.deg { color: var(--deg); } .pill.deg .blob { background: var(--deg); }
.pill.out { color: var(--out); } .pill.out .blob { background: var(--out); }
.pill.unk { color: var(--unk); } .pill.unk .blob { background: var(--unk); }

.uptime { display: flex; gap: 18px; margin-top: 12px; }
.uptime .u { font-size: 12px; color: var(--ink-soft); }
.uptime .u b { display: block; font-family: var(--mono); font-size: 14px; color: var(--ink); font-weight: 500; }

/* ── Incidents / maintenance ────────────────────────────────────────────── */
.feed { display: flex; flex-direction: column; gap: 12px; }
.entry {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
  border-left: 4px solid var(--ink-soft);
}
.entry.active { border-left-color: var(--deg); }
.entry.maint { border-left-color: var(--orange); }
.entry .h { display: flex; align-items: baseline; gap: 10px; }
.entry .title { font-weight: 600; font-size: 15px; }
.entry .status { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.entry .when { color: var(--ink-soft); font-size: 12.5px; font-family: var(--mono); margin-top: 2px; }
.entry .body { font-size: 14px; margin-top: 8px; color: var(--ink); }
.entry .updates { margin: 10px 0 0; padding: 0; list-style: none; }
.entry .updates li { font-size: 13.5px; padding: 6px 0; border-top: 1px solid var(--border); }
.entry .updates time { font-family: var(--mono); color: var(--ink-soft); font-size: 12px; }

.empty { color: var(--ink-soft); font-size: 14px; padding: 4px 2px; }

footer.site { margin-top: 40px; color: var(--ink-soft); font-size: 12.5px; text-align: center; }
footer.site a { color: var(--ink-soft); }

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef2fb; --ink-soft: #9aa7c4; --surface: #0b1325;
    --card: #111c38; --border: #24314f;
  }
}