/* The tokens the dashboard page uses (the claude.ai Dashboard type's names), given values for a plain static host.
   Layout: one centred column under a slim title bar, the page's own cards inside it. */
:root {
  --color-bg: #f6f7f8;
  --color-fg: #1d2329;
  --color-fg-muted: #5b6670;
  --color-panel: #ffffff;
  --color-border-line: #dde2e6;
  --color-ok: #1f7a4d;
  --color-warn: #a35f00;
  --color-bad: #b42318;
  --cds-chart-muted: #c9d0d6;
  --cds-chart-grid: #eef1f3;
  --cds-surface-popover: #ffffff;
  --cds-border: #dde2e6;
  --cds-shadow-popover: 0 4px 16px rgb(16 24 32 / 12%);
  --cds-text-secondary: #5b6670;
  --rd-series-0: #1f5fa8;
  --rd-series-1: #d0901f;
  --rd-series-2: #2f8a68;
  --rd-series-3: #b4472c;
  --rd-series-4: #7a4fbf;
  --rd-series-5: #0f766e;
  --rd-series-6: #8a6a12;
  --rd-series-7: #5b6670;

  --font-anthropic-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-anthropic-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --cds-font-size-caption: 0.8125rem;
  --cds-font-size-body: 0.9375rem;
  --cds-font-size-heading: 1.0625rem;
  --cds-font-size-title: 1.75rem;
  --cds-font-weight-medium: 600;
  --cds-gap-xs: 0.25rem;
  --cds-gap-sm: 0.5rem;
  --cds-gap-md: 1rem;
  --cds-gap-lg: 1.5rem;
  --cds-gap-xl: 2.25rem;
  --cds-pad-xs: 0.25rem;
  --cds-pad-sm: 0.5rem;
  --cds-pad-md: 0.875rem;
  --cds-pad-lg: 1.25rem;
  --cds-radius: 8px;
  --cds-dur-slow: 300ms;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #12161a;
    --color-fg: #e6eaee;
    --color-fg-muted: #9aa6b1;
    --color-panel: #1a2026;
    --color-border-line: #2c353d;
    --color-ok: #4cc38a;
    --color-warn: #e0a345;
    --color-bad: #f07167;
    --cds-chart-muted: #3a454f;
    --cds-chart-grid: #222a31;
    --cds-surface-popover: #1f262d;
    --cds-border: #2c353d;
    --cds-shadow-popover: 0 4px 16px rgb(0 0 0 / 40%);
    --cds-text-secondary: #9aa6b1;
    --rd-series-0: #6aa6ea;
    --rd-series-1: #e7b24f;
    --rd-series-2: #5cc59c;
    --rd-series-3: #ec7a5c;
    --rd-series-4: #ad8ce8;
    --rd-series-5: #3cc0b4;
    --rd-series-6: #d1b04a;
    --rd-series-7: #9aa6b1;
    color-scheme: dark;
  }
}

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;
}

.site-bar {
  border-bottom: 1px solid var(--color-border-line);
  background: var(--color-panel);
  padding-block: 0.75rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.site-bar-inner {
  max-width: 72rem;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-gap-xs) var(--cds-gap-md);
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--cds-font-size-caption);
  color: var(--color-fg-muted);
}
.site-bar-inner strong { color: var(--color-fg); font-weight: var(--cds-font-weight-medium); letter-spacing: 0.02em; }

#dash-root {
  padding-block: 2rem 3rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.site-foot {
  max-width: 72rem;
  margin: 0 auto 2.5rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  font-size: var(--cds-font-size-caption);
  color: var(--color-fg-muted);
}

.dash-skeleton {
  color: transparent !important;
  background: var(--cds-chart-grid);
  border-radius: 4px;
}
@media (prefers-reduced-motion: no-preference) {
  .dash-skeleton { animation: site-pulse 1.4s ease-in-out infinite; }
  @keyframes site-pulse { 50% { opacity: 0.55; } }
}
:focus-visible { outline: 2px solid var(--rd-series-0); outline-offset: 2px; }