@font-face {
  font-family: "VaultPlayerFont";
  src: url("assets/vaultplayer-font.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0d0f12;
  --surface: #161a20;
  --border: #2a3140;
  --text: #e8eaed;
  --muted: #9aa0a6;
  --brand: #2f80ff;
  --brand-rgb: 47, 128, 255;
  --brand-soft: #9fc5ff;
  --ok: #3dd68c;
  --warn: #f5c518;
  --down: #ff5d6c;
  --idle: #8b919a;
  --radius: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 640px at 8% -12%, rgba(var(--brand-rgb), 0.2), transparent 52%),
    radial-gradient(900px 520px at 92% 0%, rgba(var(--brand-rgb), 0.1), transparent 48%);
  color: var(--text);
  font-family: "VaultPlayerFont", system-ui, "Segoe UI", Roboto, sans-serif;
  line-height: 1.45;
}

a { color: var(--brand-soft); }
a:hover { color: #fff; }

.site-header,
main,
.site-footer {
  width: min(960px, calc(100% - 2rem));
  margin: 0 auto;
}

.site-header { padding: 1.5rem 0 0.5rem; }

.brand {
  display: inline-block;
  line-height: 0;
}

.brand img {
  width: min(240px, 68vw);
  height: auto;
  filter: drop-shadow(0 12px 32px rgba(var(--brand-rgb), 0.28));
}

h1 {
  margin: 0.35rem 0 0.4rem;
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  letter-spacing: -0.03em;
  font-weight: 650;
}

.lede,
.panel p,
.report-meta,
.overall-note,
.service-summary,
.history-caption,
.empty,
.official em {
  color: var(--muted);
}

.lede { max-width: 42rem; margin: 0 0 1.25rem; }

.summary,
.panel,
.group {
  background: rgba(22, 26, 32, 0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1rem 1.05rem;
  margin: 0 0 1rem;
}

.overall {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.overall::before,
.pill::before,
.bar {
  background: var(--idle);
}

.overall::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 4px rgba(139, 145, 154, 0.16);
}

.overall.is-operational::before,
.pill.is-operational::before,
.bar.is-operational { background: var(--ok); }
.overall.is-operational::before { box-shadow: 0 0 0 4px rgba(61, 214, 140, 0.16); }

.overall.is-partial::before,
.overall.is-degraded::before,
.pill.is-degraded::before,
.bar.is-degraded { background: var(--warn); }
.overall.is-partial::before { box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.16); }

.overall.is-major::before,
.overall.is-outage::before,
.pill.is-outage::before,
.bar.is-outage { background: var(--down); }
.overall.is-major::before { box-shadow: 0 0 0 4px rgba(255, 93, 108, 0.18); }

.overall.is-maintenance::before,
.pill.is-maintenance::before,
.bar.is-maintenance {
  background: repeating-linear-gradient(-45deg, var(--idle), var(--idle) 3px, #6d737c 3px, #6d737c 5px);
}
.overall.is-unknown::before,
.overall.is-incomplete::before,
.overall.is-unavailable::before,
.pill.is-unknown::before,
.bar.is-unknown,
.bar.is-empty { background: var(--idle); }

.overall-note,
.report-meta { margin: 0.55rem 0 0; }

.incident {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}

.incident h2 {
  margin: 0 0 0.3rem;
  font-size: 1.15rem;
}

.incident p,
.past-list p {
  margin: 0.2rem 0;
  white-space: pre-wrap;
}
.incident-status { font-weight: 700; color: var(--warn); }
.incident-times { color: var(--muted); font-size: 0.92rem; }

.group h2 {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-soft);
}

.service {
  display: grid;
  grid-template-columns: minmax(12rem, 1.3fr) auto minmax(9rem, 1fr) minmax(7rem, 0.7fr);
  gap: 0.75rem 1rem;
  align-items: center;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(42, 49, 64, 0.9);
}

.service:first-of-type { border-top: 0; padding-top: 0; }

.service-name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
}

.service-code {
  margin-left: 0.4rem;
  color: var(--muted);
  font-weight: 650;
  font-size: 0.82rem;
}

.service-summary { margin: 0.15rem 0 0; font-size: 0.92rem; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.8rem;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
}

.pill::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
}

.history-label {
  display: block;
  margin-bottom: 0.28rem;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bars {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  min-height: 1.6rem;
}

.bar {
  flex: 1 1 0;
  height: 1.35rem;
  border-radius: 3px;
  min-width: 0;
}

.bar.is-empty {
  height: 0.45rem;
  opacity: 0.45;
}

.history-caption {
  margin: 0.28rem 0 0;
  font-size: 0.78rem;
}

.panel h2 {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
}

.past-list { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.past-list li {
  padding: 0.75rem 0;
  border-top: 1px solid var(--border);
}
.past-list h3 { margin: 0 0 0.2rem; font-size: 1rem; }
.past-list p { margin: 0.15rem 0; }

.official { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.official li {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.4rem 0.8rem;
  padding: 0.4rem 0;
  border-top: 1px solid rgba(42, 49, 64, 0.85);
}
.official a { overflow-wrap: anywhere; }
.official em { font-style: normal; }

.site-footer {
  padding: 0.4rem 0 2rem;
  color: var(--muted);
}

.footer-title {
  margin: 0 0 0.3rem;
  color: var(--text);
  font-weight: 700;
}

.footer-links { margin: 0; }
.footer-links a { margin-right: 1rem; }

@media (max-width: 760px) {
  .service,
  .official li {
    grid-template-columns: 1fr;
  }
  .pill { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}