/* Design tokens of the hosted cockpit: the variables the cockpit's page.css uses, which claude.ai provides inside
   claude.ai. Light by default, dark with data-mode="dark" on <html> or, without data-mode, from the system setting. */
:root {
  color-scheme: light;
  --font-anthropic-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-anthropic-serif: Georgia, Cambria, "Times New Roman", serif;
  --cds-font-size-caption: 12px; --cds-font-size-body: 14px; --cds-font-size-heading: 16px; --cds-font-size-title: 22px;
  --cds-font-weight-medium: 560;
  --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: 14px; --cds-pad-lg: 20px;
  --cds-radius: 8px; --cds-dur-slow: 240ms;
  --color-bg: #ffffff; --color-panel: #f6f5f2; --color-fg: #161615; --color-fg-muted: #6a6964;
  --color-border-line: #e3e1db; --color-border-strong: #c8c5bd; --cds-border: var(--color-border-line);
  --color-good: #2c7a4b; --color-ok: #2c7a4b; --color-bad: #b23f29; --color-warn: #a4650c;
  --cds-text-secondary: var(--color-fg-muted);
  --cds-chart-1: #3a6ea8; --cds-chart-2: #c46b36; --cds-chart-axis: #8a8883; --cds-chart-grid: #ebe9e4; --cds-chart-reference: #9b9892;
  --cds-surface-popover: #ffffff; --cds-shadow-popover: 0 8px 24px rgba(0, 0, 0, .14);
}
html[data-mode="dark"] {
  color-scheme: dark;
  --color-bg: #1a1a19; --color-panel: #232321; --color-fg: #f0efec; --color-fg-muted: #a4a29c;
  --color-border-line: #33322f; --color-border-strong: #4a4843;
  --color-good: #5db27b; --color-ok: #5db27b; --color-bad: #e2785e; --color-warn: #d8a043;
  --cds-chart-1: #78a6dc; --cds-chart-2: #e3955d; --cds-chart-axis: #8f8d87; --cds-chart-grid: #2c2b28; --cds-chart-reference: #77756f;
  --cds-surface-popover: #262624; --cds-shadow-popover: 0 8px 24px rgba(0, 0, 0, .5);
}
@media (prefers-color-scheme: dark) {
  html:not([data-mode]), html[data-mode="system"] {
    color-scheme: dark;
    --color-bg: #1a1a19; --color-panel: #232321; --color-fg: #f0efec; --color-fg-muted: #a4a29c;
    --color-border-line: #33322f; --color-border-strong: #4a4843;
    --color-good: #5db27b; --color-ok: #5db27b; --color-bad: #e2785e; --color-warn: #d8a043;
    --cds-chart-1: #78a6dc; --cds-chart-2: #e3955d; --cds-chart-axis: #8f8d87; --cds-chart-grid: #2c2b28; --cds-chart-reference: #77756f;
    --cds-surface-popover: #262624; --cds-shadow-popover: 0 8px 24px rgba(0, 0, 0, .5);
  }
}
/* base, as the claude.ai page frame gives it */
html, body { background: var(--color-bg); color: var(--color-fg); }
body { margin: 0; padding: 20px clamp(12px, 3vw, 32px) 40px; font-family: var(--font-anthropic-sans); font-size: var(--cds-font-size-body); line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: 6px; padding: 5px 8px;
}
a { color: inherit; }
dialog { color: var(--color-fg); background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: var(--cds-radius); }
dialog::backdrop { background: rgba(0, 0, 0, .35); }
.dash-skeleton { position: relative; }
.dash-skeleton::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: var(--cds-radius);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-fg) 6%, transparent), transparent); background-size: 200% 100%; animation: smi-shimmer 1.3s linear infinite; }
@keyframes smi-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }