/* Design tokens the dashboard's index.html and ui.js use (the Claude Dashboard type provides them in the artifact). */
:root {
  color-scheme: light dark;
  --font-anthropic-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-anthropic-serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;

  --cds-gap-xs: 4px; --cds-gap-sm: 8px; --cds-gap-md: 12px; --cds-gap-lg: 20px;
  --cds-pad-xs: 4px; --cds-pad-sm: 8px; --cds-pad-md: 12px; --cds-pad-lg: 16px;
  --cds-radius: 10px;
  --cds-font-size-caption: 12px; --cds-font-size-body: 14px; --cds-font-size-heading: 16px; --cds-font-size-title: 28px;
  --cds-font-weight-medium: 600;
  --cds-dur-slow: 240ms; --cds-ease-out: cubic-bezier(.2, .8, .2, 1);

  --color-bg: #f7f7f5;
  --color-panel: #ffffff;
  --color-fg: #1b1b1f;
  --color-fg-muted: #6b6f76;
  --color-border-line: #e3e5e8;
  --color-ok: #1a7f4b;
  --color-bad: #c4352d;
  --color-warn: #a8650a;
  --cds-border: #dcdfe3;
  --cds-text-secondary: #555a61;
  --cds-surface-popover: #ffffff;
  --cds-shadow-popover: 0 8px 24px rgba(20, 22, 26, .12), 0 1px 3px rgba(20, 22, 26, .08);
  --cds-chart-grid: #eceef1;
  --cds-chart-axis: #a0a4aa;
  --cds-chart-muted: #c3c7cc;
  --cds-chart-1: #2a6fdb;
  --cds-chart-4: #8a4fd0;
  --cds-chart-status-critical: #c4352d;
  --skeleton: #eceef1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #161618;
    --color-panel: #1f1f22;
    --color-fg: #ececec;
    --color-fg-muted: #9b9ca1;
    --color-border-line: #303035;
    --color-ok: #4fbf7f;
    --color-bad: #f06a6a;
    --color-warn: #e3a33b;
    --cds-border: #3a3a40;
    --cds-text-secondary: #b0b1b6;
    --cds-surface-popover: #26262a;
    --cds-shadow-popover: 0 8px 24px rgba(0, 0, 0, .45);
    --cds-chart-grid: #2c2c31;
    --cds-chart-axis: #6a6b70;
    --cds-chart-muted: #4a4b50;
    --cds-chart-1: #6aa0ff;
    --cds-chart-4: #b98af0;
    --cds-chart-status-critical: #f06a6a;
    --skeleton: #2a2a2f;
  }
}
:root[data-theme="dark"] {
  --color-bg: #161618; --color-panel: #1f1f22; --color-fg: #ececec; --color-fg-muted: #9b9ca1; --color-border-line: #303035;
  --color-ok: #4fbf7f; --color-bad: #f06a6a; --color-warn: #e3a33b; --cds-border: #3a3a40; --cds-text-secondary: #b0b1b6;
  --cds-surface-popover: #26262a; --cds-shadow-popover: 0 8px 24px rgba(0, 0, 0, .45); --cds-chart-grid: #2c2c31;
  --cds-chart-axis: #6a6b70; --cds-chart-muted: #4a4b50; --cds-chart-1: #6aa0ff; --cds-chart-4: #b98af0;
  --cds-chart-status-critical: #f06a6a; --skeleton: #2a2a2f;
}

* { box-sizing: border-box; }
html { -webkit-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.45;
}
#dash-root { padding: 16px var(--dash-gutter, 16px) 48px; }

/* What the artifact runtime draws for loading values. */
.dash-skeleton { position: relative; }
.dash-skeleton:empty, .dash-skeleton > :empty { min-height: 1em; }
[data-dash-source-state=error] { color: var(--color-bad); }

/* Top bar: live status, user, sign out. */
.vd-bar {
  max-width: 1280px; margin: 0 auto 8px; display: flex; align-items: center; gap: 12px;
  font-size: var(--cds-font-size-caption); color: var(--color-fg-muted);
}
.vd-bar .vd-live { display: inline-flex; align-items: center; gap: 6px; }
.vd-bar .vd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cds-chart-muted); }
.vd-bar .vd-dot.on { background: var(--color-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ok) 20%, transparent); }
.vd-bar .vd-dot.busy { background: var(--color-warn); }
.vd-bar .vd-spacer { flex: 1; }
.vd-bar form { margin: 0; }
.vd-bar button {
  font: inherit; color: inherit; background: none; border: 1px solid var(--color-border-line);
  border-radius: 6px; padding: 3px 10px; cursor: pointer;
}
.vd-bar button:hover { color: var(--color-fg); border-color: var(--cds-border); }