/* Status page styles. Editorial direction (docs/DESIGN_EDITORIAL.md): CSS variables only, light and dark,
   9px panels, two line weights, mono tabular numerals, rounded-full chips, 4.5:1 text contrast. */
@font-face {
  font-family: "Inter";
  src: url("/brand/InterVariable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --background: #FAFAF9;
  --card: #FFFFFF;
  --sunk: #F5F5F4;
  --border: #E7E5E4;
  --border-subtle: #F0EFED;
  --foreground: #1C1917;
  --muted-foreground: #57534E;
  --primary: #C2420C;
  --s-operational: #15803D;
  --s-degraded: #A16207;
  --s-partial: #C2410C;
  --s-major: #B91C1C;
  --s-maintenance: #1D4ED8;
  --s-unknown: #57534E;
  --radius: 9px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #1C1917;
    --card: #231F1D;
    --sunk: #171412;
    --border: #3A3532;
    --border-subtle: #2E2A27;
    --foreground: #FAFAF9;
    --muted-foreground: #A8A29E;
    --primary: #E2571C;
    --s-operational: #4ADE80;
    --s-degraded: #FACC15;
    --s-partial: #FB923C;
    --s-major: #F87171;
    --s-maintenance: #60A5FA;
    --s-unknown: #A8A29E;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font: 400 14px/1.55 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--primary); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

.top, main, .foot {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.top {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  padding-bottom: 16px;
}
.brand img { display: block; height: 28px; width: auto; max-width: 100%; }
.nav { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 13px; font-weight: 500; }
.nav a { color: var(--foreground); text-decoration: none; }
.nav a:hover { color: var(--primary); }
.langs { display: inline-flex; gap: 8px; color: var(--muted-foreground); }
.langs .lang[aria-current] { color: var(--foreground); font-weight: 600; }

main { display: grid; gap: 16px; padding-bottom: 24px; }

.panel, .overall {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  min-width: 0;
}
.panel > h2, .detail h2 {
  margin: -16px -16px 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.detail h2 { margin: 16px 0 8px; padding: 0 0 8px; }
h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.018em; line-height: 1.25; }
h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
p { margin: 0 0 6px; }

.overall { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.overall .dot {
  width: 14px; height: 14px; border-radius: 9999px; flex: none;
  background: var(--s-unknown);
}
.overall[data-state="operational"] .dot { background: var(--s-operational); }
.overall[data-state="degraded_performance"] .dot { background: var(--s-degraded); }
.overall[data-state="partial_outage"] .dot { background: var(--s-partial); }
.overall[data-state="major_outage"] .dot { background: var(--s-major); }
.overall[data-state="maintenance"] .dot { background: var(--s-maintenance); }
.overall > div { flex: 1 1 200px; min-width: 0; }

.micro, dt {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.stamps { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
dd { margin: 2px 0 0; font-size: 13px; }

.num, time { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.muted { color: var(--muted-foreground); }
.empty { color: var(--muted-foreground); margin: 0; }
.note {
  margin: 0; padding: 10px 12px; font-size: 12.5px;
  background: var(--sunk); border: 1px solid var(--border); border-radius: var(--radius);
}

.components, .impacts, .history, .timeline { list-style: none; margin: 0; padding: 0; }
.component {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border-subtle);
}
.component:last-child { border-bottom: 0; }
.component > div { min-width: 0; }
.component .name { margin: 0; font-weight: 600; font-size: 13.5px; }
.component .desc { margin: 0; font-size: 12.5px; color: var(--muted-foreground); }

.chip {
  --c: var(--s-unknown);
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 2px 10px; border-radius: 9999px;
  font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--c) 30%, var(--card));
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 9999px; background: var(--c); }
.chip[data-state="operational"] { --c: var(--s-operational); }
.chip[data-state="degraded_performance"] { --c: var(--s-degraded); }
.chip[data-state="partial_outage"] { --c: var(--s-partial); }
.chip[data-state="major_outage"] { --c: var(--s-major); }
.chip[data-state="maintenance"] { --c: var(--s-maintenance); }
.chip-lifecycle { --c: var(--muted-foreground); }
.chip-lifecycle[data-lifecycle="resolved"], .chip-lifecycle[data-lifecycle="completed"] { --c: var(--s-operational); }
.chip-lifecycle[data-lifecycle="in_progress"] { --c: var(--s-maintenance); }

.item { padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.item:last-child { border-bottom: 0; padding-bottom: 0; }
.item:first-of-type { padding-top: 0; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.impacts { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0; }
.impacts li { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.next { font-size: 13px; color: var(--muted-foreground); }
[hidden] { display: none !important; }

.facts { display: grid; gap: 10px; margin: 12px 0; }
.timeline li { padding: 10px 0; border-top: 1px solid var(--border-subtle); }
.crumb { font-size: 13px; color: var(--muted-foreground); margin: 0; }

.years { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 12px 0; font-size: 13px; }
.years [aria-current] { font-weight: 600; }
.history li {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--border-subtle);
}
.panel > h2.num { margin-top: 12px; border-top: 1px solid var(--border); }

.foot { padding-top: 8px; padding-bottom: 32px; font-size: 12.5px; color: var(--muted-foreground); }
.feeds { display: flex; flex-wrap: wrap; gap: 8px 16px; }

@media (max-width: 640px) {
  .component { flex-wrap: wrap; }
  h1 { font-size: 21px; }
}