:root {
  color-scheme: light dark;

  --font-anthropic-sans:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-anthropic-serif:
    ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

  --cds-gap-xs: 4px;
  --cds-gap-sm: 8px;
  --cds-gap-md: 16px;
  --cds-gap-lg: 24px;
  --cds-pad-xs: 6px;
  --cds-pad-sm: 8px;
  --cds-pad-md: 12px;
  --cds-pad-lg: 16px;
  --cds-radius: 8px;
  --cds-font-size-title: 1.75rem;
  --cds-font-size-heading: 1.25rem;
  --cds-font-size-body: 1rem;
  --cds-font-size-caption: 0.875rem;
  --cds-font-weight-medium: 600;
  --cds-dur-slow: 300ms;

  --cds-chart-1: #2b6cb0;
  --cds-chart-2: #c2410c;
  --cds-chart-3: #2f855a;
  --cds-chart-4: #8e44ad;
  --cds-chart-5: #0f766e;
  --cds-chart-6: #a16207;
  --cds-chart-7: #c2255c;
  --cds-chart-8: #5b6b8c;
  --cds-chart-muted: #6b7280;

  --color-bg: #f6f6f4;
  --color-panel: #ffffff;
  --color-fg: #1a1a1a;
  --color-fg-muted: #565656;
  --color-border-line: #d6d6d1;
  --color-border: #767676;
  --color-link: #0b57d0;
  --color-focus: #0b57d0;
  --color-ok: #1b6e3a;
  --color-bad: #b3261e;
  --color-warn: #8a4b00;

  --cds-chart-axis: #767676;
  --cds-chart-grid: rgba(0, 0, 0, 0.12);
  --cds-chart-reference: #767676;
  --cds-chart-status-critical: #c62828;
  --cds-surface-popover: var(--color-panel);
  --cds-border: var(--color-border);
  --cds-text-secondary: var(--color-fg-muted);
  --cds-shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #101010;
    --color-panel: #181818;
    --color-fg: #ededed;
    --color-fg-muted: #adadad;
    --color-border-line: #333333;
    --color-border: #8a8a8a;
    --color-link: #8ab4ff;
    --color-focus: #8ab4ff;
    --color-ok: #6fd08c;
    --color-bad: #ff8f85;
    --color-warn: #f0b35a;

    --cds-chart-axis: #8a8a8a;
    --cds-chart-grid: rgba(255, 255, 255, 0.14);
    --cds-chart-reference: #8a8a8a;
    --cds-chart-status-critical: #ef5350;
    --cds-shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --color-bg: #101010;
  --color-panel: #181818;
  --color-fg: #ededed;
  --color-fg-muted: #adadad;
  --color-border-line: #333333;
  --color-border: #8a8a8a;
  --color-link: #8ab4ff;
  --color-focus: #8ab4ff;
  --color-ok: #6fd08c;
  --color-bad: #ff8f85;
  --color-warn: #f0b35a;

  --cds-chart-axis: #8a8a8a;
  --cds-chart-grid: rgba(255, 255, 255, 0.14);
  --cds-chart-reference: #8a8a8a;
  --cds-chart-status-critical: #ef5350;
  --cds-shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cds-dur-slow: 0ms;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-anthropic-sans);
  font-size: var(--cds-font-size-body);
  line-height: 1.5;
}

a {
  color: var(--color-link);
}

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

.dash-root {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 16px 48px;
}

@media (min-width: 800px) {
  .dash-root {
    padding: 32px 24px 64px;
  }
}

.dash-status {
  margin: 0 0 var(--cds-gap-md);
  padding: var(--cds-pad-sm) var(--cds-pad-lg);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--cds-radius);
  color: var(--color-fg);
  font-size: var(--cds-font-size-caption);
}

.dash-status[hidden] {
  display: none;
}

.dash-status button,
.mf .zoombar button {
  min-height: 24px;
}

.dash-status button {
  font: inherit;
  margin-left: var(--cds-gap-sm);
  padding: 2px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-fg);
  cursor: pointer;
}

.mf summary {
  min-height: 24px;
}

.mf tr[style*="opacity"] {
  opacity: 1 !important;
}

.mf tr[style*="opacity"] td {
  color: var(--color-fg-muted);
}

.tablebox[tabindex] {
  border-radius: var(--cds-radius);
}