/* The browser follows the system unless the reader explicitly selects a theme.
   light-dark() also keeps system mode functional when JavaScript is disabled. */
:root {
  color-scheme: light dark;
  --page: light-dark(#ffffff, #121419);
  --surface: light-dark(#ffffff, #191c22);
  --subtle: light-dark(#f8f9fa, #1e222a);
  --surface-hover: light-dark(#f5f6f8, #272c35);
  --ink: light-dark(#24272c, #e7eaf0);
  --muted: light-dark(#74787f, #a5aebb);
  --faint: light-dark(#969ba2, #919ba9);
  --line: light-dark(#e8e9ec, #323844);
  --border-hover: light-dark(#c2c5cb, #647083);
  --green: light-dark(#279b70, #34ae81);
  --green-text: light-dark(#21835f, #68d4a3);
  --amber: light-dark(#e5ad42, #deb45c);
  --orange: light-dark(#ed8a47, #e69963);
  --red: light-dark(#e16868, #e97d86);
  --blue: light-dark(#769bd4, #8caee4);
  --unknown: light-dark(#dfe2e7, #3b4350);
  --warning-text: light-dark(#ad7c22, #e6bf73);
  --danger-text: light-dark(#ca5656, #f0929c);
  --info-text: light-dark(#678bbb, #a2bff0);
  --success-bg: light-dark(#fcfefd, #17231f);
  --success-accent: light-dark(#eaf5ee, #203c30);
  --success-border: light-dark(#dceae3, #2c483b);
  --warning-bg: light-dark(#fffcf6, #292419);
  --warning-accent: light-dark(#fff1d3, #40331d);
  --warning-border: light-dark(#efdfbc, #55452c);
  --danger-bg: light-dark(#fffafa, #2d1d23);
  --danger-accent: light-dark(#fae9e9, #462b33);
  --danger-border: light-dark(#f1d7d7, #59353f);
  --info-bg: light-dark(#fafcff, #1d2635);
  --info-accent: light-dark(#e8eff9, #293a55);
  --info-border: light-dark(#d4e0f1, #344964);
  --logo-filter: none;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; --logo-filter: invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --logo-filter: invert(1); }
}

body { background: var(--page); }
.brand img, .footer-brand img { filter: var(--logo-filter); }

.button, .component-group, dialog {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.button:hover { background: var(--subtle); border-color: var(--border-hover); }
.button-dark {
  background: light-dark(#282b30, #e7eaf0);
  color: light-dark(#ffffff, #191c22);
  border-color: light-dark(#282b30, #e7eaf0);
}
.button-dark:hover {
  background: light-dark(#41454c, #ffffff);
  border-color: light-dark(#41454c, #ffffff);
}

.component-group summary { background: var(--subtle); }
.component-group summary:hover { background: var(--surface-hover); }
.component-count, .incident-badge, .empty-icon, .feed-icon {
  background: var(--subtle);
  color: var(--muted);
  border-color: var(--line);
}
.group-chevron, .history-axis strong, .text-link,
.history-filters label, .field-label, .timeline-entry>p, .incident-card p,
.incident-card h3 .icon, .dialog-close {
  color: var(--muted);
}
.eyebrow, .refresh-note, .period-label, .group-info p,
.history-axis, .status-legend, .incident-card time, .empty-state p,
.site-footer, .history-filters label span, .history-results-heading>span,
.pagination, .incident-intro>p, .timeline-heading time, .fine-print {
  color: var(--faint);
}
.text-link:hover, .incident-card h3 a:hover, .site-footer nav a:hover { color: var(--ink); }
.status-unknown { color: var(--faint); }
.status-degraded, .incident-investigating, .incident-identified { color: var(--warning-text); }
.status-partial-outage { color: light-dark(#c17637, #efae7e); }
.status-major-outage { color: var(--danger-text); }
.status-maintenance, .incident-monitoring { color: var(--info-text); }

.overview { background: var(--success-bg); border-color: var(--success-border); }
.overview-icon { background: var(--success-accent); }
.overview.status-unknown { background: var(--subtle); color: var(--faint); }
.overview.status-unknown .overview-icon { background: var(--surface-hover); }
.overview.status-degraded, .overview.status-partial-outage, .incident-active {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}
.incident-active h3 { color: var(--ink); }
.overview.status-degraded .overview-icon, .overview.status-partial-outage .overview-icon {
  background: var(--warning-accent);
}
.overview.status-major-outage {
  background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text);
}
.overview.status-major-outage .overview-icon { background: var(--danger-accent); }
.overview.status-maintenance {
  background: var(--info-bg); border-color: var(--info-border); color: var(--info-text);
}
.overview.status-maintenance .overview-icon { background: var(--info-accent); }
.incident-badge.incident-resolved { background: var(--success-accent); color: var(--green-text); }
.incident-badge.incident-investigating, .incident-badge.incident-identified {
  background: var(--warning-accent); color: var(--warning-text);
}
.incident-badge.incident-monitoring { background: var(--info-accent); color: var(--info-text); }
.affected-components>span, .affected-components>a {
  background: var(--subtle); border-color: var(--line); color: var(--muted);
}
.affected-components>a:hover { border-color: var(--border-hover); }
.timeline-dot { border-color: var(--page); }

.history-filters input, .history-filters select, .copy-field input,
.copy-field button, .theme-control select {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
.copy-field { border-color: var(--line); }
.copy-field input { background: var(--subtle); color: var(--muted); }
.copy-field button:hover, .dialog-close:hover { background: var(--surface-hover); }
dialog::backdrop { background: light-dark(#1c24354d, #00000099); }
.history-tooltip { background: light-dark(#272d35, #e7eaf0); color: light-dark(#ffffff, #191c22); }
.demo-banner { background: var(--warning-bg); color: var(--warning-text); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.theme-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 64px;
  height: 38px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
}
.theme-control:hover { border-color: var(--border-hover); }
.theme-control:focus-within { outline: 3px solid #8bb5e5; outline-offset: 4px; }
/* Keep the native picker and its accessible option names, with SVGs as the
   visible control. Its transparent hit area covers both icons and all padding. */
.theme-control select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  font-size: 11px;
  cursor: pointer;
}
.theme-icon {
  display: none;
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
:root:not([data-theme]) .theme-icon-system,
:root[data-theme="system"] .theme-icon-system,
:root[data-theme="light"] .theme-icon-light,
:root[data-theme="dark"] .theme-icon-dark { display: block; }
.theme-chevron {
  position: absolute;
  right: 10px;
  width: 12px;
  height: 12px;
  transform: rotate(90deg);
  pointer-events: none;
}
@media (max-width: 640px) {
  .site-header { flex-wrap: wrap; }
  .subscribe-long-label { display: none; }
  .theme-control { height: 36px; }
}