:root {
  color-scheme: dark;
  --navy: #070b13;
  --blue: #60a5fa;
  --bg: #0b1120;
  --surface: #111827;
  --surface-subtle: #172033;
  --surface-raised: #1d293d;
  --line: #334155;
  --line-strong: #52627a;
  --muted: #a9b6ca;
  --text: #dbe4f0;
  --text-strong: #f8fafc;
  --focus: #93c5fd;
  --green: #34d399;
  --amber: #fbbf24;
  --orange: #fb923c;
  --red: #f87171;
  --neutral: #60a5fa;
  --unknown: #334155;
  --font-display: Georgia, Cambria, "Times New Roman", serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-meta: Consolas, "Courier New", monospace;
}

:root[data-theme="light"] {
  color-scheme: light;
  --navy: #f8fafc;
  --blue: #0968e8;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-subtle: #f1f5f9;
  --surface-raised: #e8eef6;
  --line: #cbd5e1;
  --line-strong: #718096;
  --muted: #526174;
  --text: #243044;
  --text-strong: #0f172a;
  --focus: #075ecf;
  --green: #047857;
  --amber: #a16207;
  --orange: #c2410c;
  --red: #c2413b;
  --neutral: #0968e8;
  --unknown: #cbd5e1;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  min-width: 320px;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
}

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text-strong); }
button, select { font: inherit; }
button, select, a { border-radius: 0; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 8px 10px;
  border: 1px solid var(--focus);
  background: var(--bg);
  transform: translateY(-180%);
}

.skip-link:focus { transform: translateY(0); }

.status-topline {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 26px;
  min-height: 58px;
  padding: 10px max(28px, calc((100% - 1500px) / 2));
  border-bottom: 1px solid var(--line-strong);
  background: var(--navy);
}

.status-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  color: var(--text-strong);
  font-family: var(--font-meta);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.status-topline nav { display: flex; align-items: center; gap: 20px; font-family: var(--font-meta); font-size: 10px; text-transform: uppercase; }

.status-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-strong);
  font-family: var(--font-meta);
  font-size: 10px;
  text-transform: uppercase;
}

.status-theme-toggle:hover { border-color: var(--blue); color: var(--blue); }
.status-theme-toggle b { font: inherit; }

main { width: min(1500px, 100%); margin: 0 auto; padding: 42px 28px 84px; }

.status-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 34px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--line-strong);
}

.status-kicker,
.section-heading p,
.status-legend > div p {
  margin: 0 0 8px;
  color: var(--blue);
  font-family: var(--font-meta);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.status-hero h1 {
  max-width: 980px;
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: clamp(42px, 5.4vw, 70px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .92;
}

.status-hero h2 {
  max-width: 900px;
  margin: 18px 0 0 clamp(18px, 5vw, 78px);
  color: var(--blue);
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1;
}

.status-hero > div > p:last-child { max-width: 760px; margin: 22px 0 0; color: var(--muted); font-size: clamp(14px, 1.3vw, 18px); }

.overall-state {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 170px;
  padding: 11px 0 11px 18px;
  border-left: 1px solid var(--line-strong);
  color: var(--text-strong);
  font-family: var(--font-meta);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.state-key, .legend-key { display: inline-block; width: 9px; height: 18px; background: var(--unknown); }
[data-state="operational"] .state-key, .state-operational { background: var(--green); }
[data-state="no-data"] .state-key, .state-no-data { background: var(--neutral); }
[data-state="degraded"] .state-key, .state-degraded { background: var(--amber); }
[data-state="stale"] .state-key, .state-stale { background: var(--orange); }
[data-state="failed"] .state-key, .state-failed { background: var(--red); }
[data-state="paused"] .state-key, .state-paused { background: var(--muted); }
[data-state="unknown"] .state-key, .state-unknown { background: var(--unknown); }

.summary-strip {
  display: grid;
  grid-template-columns: 1.15fr .9fr .9fr 1fr 1.45fr;
  margin: 0 0 54px;
  border-bottom: 1px solid var(--line-strong);
}

.summary-item { min-width: 0; padding: 20px 22px 22px; border-left: 1px solid var(--line); }
.summary-item:first-child { padding-left: 0; border-left: 0; }
.summary-item span, .summary-item small { display: block; }
.summary-item span { margin-bottom: 12px; color: var(--muted); font-family: var(--font-meta); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.summary-item strong { display: block; overflow-wrap: anywhere; color: var(--text-strong); font-family: var(--font-display); font-size: clamp(28px, 3vw, 44px); font-weight: 400; letter-spacing: -.04em; line-height: .9; }
.summary-item small { margin-top: 12px; color: var(--muted); font-size: 10px; }
.summary-coverage strong { font-size: clamp(22px, 2.2vw, 34px); }

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.section-heading h2,
.status-legend h2 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1;
}

.section-heading time { color: var(--muted); font-family: var(--font-meta); font-size: 10px; text-align: right; }
.source-tools { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 0 0 18px; }
.source-search { display: block; width: min(340px, 100%); }
.source-search > span { display: block; margin-bottom: 5px; color: var(--muted); font-family: var(--font-meta); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.source-search input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-strong); }
.source-search input::placeholder { color: var(--muted); }
.source-filter-buttons { display: flex; align-items: stretch; border: 1px solid var(--line-strong); }
.source-filter-buttons button { min-height: 34px; padding: 7px 10px; border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--muted); font-family: var(--font-meta); font-size: 8px; text-transform: uppercase; }
.source-filter-buttons button:first-child { border-left: 0; }
.source-filter-buttons button:hover { color: var(--blue); }
.source-filter-buttons button[aria-pressed="true"] { background: var(--blue); color: var(--bg); }
.source-filter-buttons button span { margin-left: 4px; font-variant-numeric: tabular-nums; }
.source-results-status { margin: -6px 0 10px; color: var(--muted); font-family: var(--font-meta); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.source-list { border-top: 3px solid var(--line-strong); }

.source-group { border-bottom: 1px solid var(--line-strong); }
.source-group:last-child { border-bottom: 0; }
.source-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.source-group-heading h3 { margin: 0; color: var(--text-strong); font-family: var(--font-meta); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.source-group-heading span { color: var(--muted); font-family: var(--font-meta); font-size: 9px; }

.source-row {
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(190px, 230px) minmax(420px, 1fr);
  gap: clamp(22px, 2.8vw, 44px);
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--line);
}

.source-name-line { display: flex; align-items: flex-start; gap: 10px; }
.source-state-key { flex: 0 0 8px; width: 8px; height: 34px; margin-top: 2px; background: var(--unknown); }
.source-row[data-state="operational"] .source-state-key { background: var(--green); }
.source-row[data-state="no-data"] .source-state-key { background: var(--neutral); }
.source-row[data-state="degraded"] .source-state-key { background: var(--amber); }
.source-row[data-state="stale"] .source-state-key { background: var(--orange); }
.source-row[data-state="failed"] .source-state-key { background: var(--red); }
.source-row[data-state="paused"] .source-state-key { background: var(--muted); }
.source-row h3 { margin: 0; color: var(--text-strong); font-family: var(--font-display); font-size: clamp(21px, 2vw, 30px); font-weight: 400; letter-spacing: -.025em; line-height: 1.02; }
.source-row h3 a { color: inherit; }
.source-row h3 a:hover { color: var(--blue); }
.source-state-label { display: block; margin: 9px 0 0 18px; color: var(--muted); font-family: var(--font-meta); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.source-note { margin: 13px 0 0 18px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.source-method { margin: 8px 0 0 18px; color: var(--text); font-family: var(--font-meta); font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }

.source-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin: 0; }
.source-facts div { min-width: 0; padding-top: 7px; border-top: 1px solid var(--line); }
.source-facts dt { color: var(--muted); font-family: var(--font-meta); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.source-facts dd { margin: 6px 0 0; color: var(--text-strong); font-size: 11px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.source-facts time { white-space: nowrap; }

.completeness { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.completeness meter { width: 100%; height: 7px; border: 0; background: var(--surface-raised); }
.completeness meter::-webkit-meter-bar { border: 0; border-radius: 0; background: var(--surface-raised); }
.completeness meter::-webkit-meter-optimum-value { background: var(--blue); }
.completeness meter::-moz-meter-bar { background: var(--blue); }
.completeness span { font-family: var(--font-meta); font-size: 9px; }

.history-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 10px; }
.history-heading span { color: var(--muted); font-family: var(--font-meta); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.history-heading strong { color: var(--text-strong); font-size: 11px; font-weight: 650; text-align: right; }
.history-bars, .history-axis { display: grid; grid-template-columns: repeat(90, minmax(2px, 1fr)); gap: 2px; }
.history-day { min-width: 0; height: 28px; margin: 0; padding: 0; border: 0; background: var(--unknown); }
.history-day[data-state="operational"] { background: var(--green); }
.history-day[data-state="no-data"] { background: var(--neutral); }
.history-day[data-state="degraded"] { background: var(--amber); }
.history-day[data-state="stale"] { background: var(--orange); }
.history-day[data-state="failed"] { background: var(--red); }
.history-day[data-state="paused"] { background: var(--muted); }
.history-day[data-state="unknown"] { background: var(--unknown); }
.history-day:hover, .history-day:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 1px; }
.history-axis { min-height: 17px; margin-top: 6px; }
.history-axis span { overflow: hidden; color: var(--muted); font-family: var(--font-meta); font-size: 7px; text-transform: uppercase; white-space: nowrap; }
.history-coverage { display: flex; justify-content: space-between; gap: 16px; margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.history-coverage span:last-child { text-align: right; }
.history-touch-inspector { display: none; }

@media (pointer: coarse), (max-width: 1100px) {
  .history-touch-inspector { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: 14px 20px; align-items: end; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
  .history-touch-inspector label > span { display: block; margin-bottom: 5px; color: var(--muted); font-family: var(--font-meta); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
  .history-touch-inspector select { width: 100%; min-height: 44px; padding: 0 34px 0 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-strong); }
  .history-touch-inspector p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
}

.state-panel {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 18px;
  min-height: 156px;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
}

.state-panel .state-rule { display: block; background: var(--blue); }
.state-panel h3 { margin: 0 0 8px; color: var(--text-strong); font-family: var(--font-display); font-size: 28px; font-weight: 400; }
.state-panel p { max-width: 660px; margin: 0; color: var(--muted); }
.state-panel button { margin-top: 18px; padding: 9px 13px; border: 1px solid var(--blue); background: transparent; color: var(--blue); font-family: var(--font-meta); font-size: 10px; text-transform: uppercase; }
.state-panel button:hover { background: var(--blue); color: var(--bg); }
.state-error .state-rule { background: var(--red); }
.state-empty .state-rule { background: var(--unknown); }

.status-legend {
  display: grid;
  grid-template-columns: minmax(190px, .65fr) minmax(0, 2fr);
  gap: 42px;
  margin-top: 48px;
  padding: 30px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.status-legend ul { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.status-legend li { display: grid; grid-template-columns: 9px minmax(0, 1fr); column-gap: 10px; align-content: start; min-width: 0; padding: 0 14px; border-left: 1px solid var(--line); }
.status-legend li:first-child { padding-left: 0; border-left: 0; }
.status-legend .legend-key { grid-row: 1 / 3; }
.status-legend strong { color: var(--text-strong); font-size: 11px; }
.status-legend small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.legend-note { grid-column: 2; margin: -10px 0 0; color: var(--muted); font-size: 10px; }

.incident-region { margin-top: 64px; }
.incident-heading { align-items: end; padding-bottom: 16px; border-bottom: 3px solid var(--line-strong); }
.incident-filters { display: flex; align-items: end; gap: 14px; }
.incident-filters label span { display: block; margin-bottom: 5px; color: var(--muted); font-family: var(--font-meta); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.incident-filters select { min-width: 150px; height: 36px; padding: 0 30px 0 9px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-strong); }
.incident-count { margin: 14px 0 0; color: var(--muted); font-family: var(--font-meta); font-size: 9px; text-transform: uppercase; }
.incident-list { margin: 18px 0 0; padding: 0; list-style: none; }
.incident-item { display: grid; grid-template-columns: 150px 12px minmax(0, 1fr) 95px; gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); }
.incident-item:first-child { border-top: 0; }
.incident-date { color: var(--muted); font-family: var(--font-meta); font-size: 9px; line-height: 1.5; }
.incident-marker { width: 12px; min-height: 42px; background: var(--amber); }
.incident-item[data-severity="failed"] .incident-marker { background: var(--red); }
.incident-item[data-severity="stale"] .incident-marker { background: var(--orange); }
.incident-item[data-severity="paused"] .incident-marker { background: var(--muted); }
.incident-copy h3 { margin: 0; color: var(--text-strong); font-size: 15px; }
.incident-copy p { max-width: 860px; margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.incident-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 9px; color: var(--muted); font-family: var(--font-meta); font-size: 8px; text-transform: uppercase; }
.incident-resolution { align-self: start; padding-top: 2px; color: var(--muted); font-family: var(--font-meta); font-size: 9px; font-weight: 700; text-align: right; text-transform: uppercase; }
.incident-resolution.active { color: var(--amber); }
.incident-empty { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 18px; margin-top: 18px; padding: 26px 0; border-top: 1px solid var(--line); }
.incident-empty::before { content: ""; grid-row: 1 / 3; background: var(--green); }
.incident-empty strong { color: var(--text-strong); }
.incident-empty span { color: var(--muted); font-size: 11px; }

.history-tooltip {
  position: fixed;
  z-index: 80;
  width: min(280px, calc(100vw - 24px));
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--text-strong);
  font-family: var(--font-meta);
  font-size: 9px;
  line-height: 1.45;
  pointer-events: none;
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  width: min(1500px, calc(100% - 56px));
  margin: 0 auto;
  padding: 20px 0 34px;
  border-top: 1px solid var(--line-strong);
  color: var(--muted);
  font-family: var(--font-meta);
  font-size: 9px;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .summary-strip { grid-template-columns: repeat(3, 1fr); }
  .summary-item:first-child { padding-left: 22px; }
  .summary-item:nth-child(1), .summary-item:nth-child(4) { border-left: 0; }
  .summary-item:nth-child(n+4) { border-top: 1px solid var(--line); }
  .source-row { grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); }
  .source-history { grid-column: 1 / -1; }
  .source-tools { align-items: stretch; flex-direction: column; }
  .source-search { width: 100%; }
  .source-filter-buttons { width: 100%; overflow-x: auto; }
  .source-filter-buttons button { flex: 1 0 auto; }
  .status-legend { grid-template-columns: 1fr; }
  .status-legend ul { grid-column: 1; }
  .legend-note { grid-column: 1; margin-top: 0; }
}

@media (max-width: 760px) {
  .status-topline { grid-template-columns: 1fr auto; gap: 14px; padding-inline: 16px; }
  .status-topline nav { grid-column: 1 / -1; grid-row: 2; padding-top: 9px; border-top: 1px solid var(--line); }
  .status-theme-toggle { grid-column: 2; grid-row: 1; }
  main { padding: 30px 16px 64px; }
  .status-hero { grid-template-columns: 1fr; }
  .overall-state { min-width: 0; padding-left: 0; border-left: 0; }
  .summary-strip { grid-template-columns: 1fr 1fr; }
  .summary-item, .summary-item:first-child { padding: 18px 14px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .summary-item:nth-child(odd) { border-left: 0; }
  .summary-item:nth-child(-n+2) { border-top: 0; }
  .summary-item:last-child { grid-column: 1 / -1; border-left: 0; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .section-heading time { text-align: left; }
  .source-row { grid-template-columns: 1fr; }
  .source-history { grid-column: auto; }
  .history-day { height: 24px; }
  .history-bars, .history-axis { gap: 1px; }
  .status-legend ul { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .status-legend li, .status-legend li:first-child { padding: 0 10px; border-left: 1px solid var(--line); }
  .status-legend li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .incident-filters { width: 100%; }
  .incident-filters label { flex: 1; }
  .incident-filters select { width: 100%; min-width: 0; }
  .incident-item { grid-template-columns: 90px 10px minmax(0, 1fr); gap: 12px; }
  .incident-resolution { grid-column: 3; text-align: left; }
  footer { width: calc(100% - 32px); }
}

@media (max-width: 600px) {
  .history-bars, .history-axis { grid-template-columns: repeat(30, minmax(4px, 1fr)); }
  .history-day:nth-child(-n+60) { display: none; }
  .history-axis-wide, .history-window-wide, .coverage-wide { display: none !important; }
  .history-axis-mobile, .history-window-mobile, .coverage-mobile { display: grid !important; }
}

.history-axis-mobile, .history-window-mobile, .coverage-mobile { display: none; }

@media (max-width: 480px) {
  .status-theme-toggle b { display: none; }
  .summary-strip { grid-template-columns: 1fr; }
  .summary-item, .summary-item:first-child, .summary-item:nth-child(n) { grid-column: auto; padding-inline: 0; border-top: 1px solid var(--line); border-left: 0; }
  .summary-item:first-child { border-top: 0; }
  .source-facts { grid-template-columns: 1fr; }
  .history-heading, .history-coverage { align-items: flex-start; flex-direction: column; }
  .history-touch-inspector { grid-template-columns: 1fr; }
  .history-heading strong, .history-coverage span:last-child { text-align: left; }
  .status-legend ul { grid-template-columns: 1fr; }
  .status-legend li, .status-legend li:first-child, .status-legend li:nth-child(odd) { padding: 0; border-left: 0; }
  .incident-filters { align-items: stretch; flex-direction: column; }
  .incident-item { grid-template-columns: 10px minmax(0, 1fr); }
  .incident-date { grid-column: 2; grid-row: 1; }
  .incident-marker { grid-column: 1; grid-row: 1 / 4; }
  .incident-copy, .incident-resolution { grid-column: 2; }
  footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}