/* Design tokens for the self-hosted site. Names match what the claude.ai dashboard runtime
   provides, so the comparisons page renders the same in both places. */
:root {
  --font-anthropic-sans: "Heebo", system-ui, sans-serif;
  --font-anthropic-serif: "Frank Ruhl Libre", "Times New Roman", serif;
  --color-bg: #f6f7f5;
  --color-panel: #ffffff;
  --color-fg: #1f2328;
  --color-fg-muted: #5a6066;
  --color-border-line: #dfe2de;
  --color-ok: #15803d;
  --color-warn: #a16207;
  --color-bad: #b91c1c;
  --cds-radius: 8px;
  --cds-pad-xs: 4px; --cds-pad-sm: 8px; --cds-pad-md: 12px; --cds-pad-lg: 16px; --cds-pad-xl: 24px;
  --cds-gap-xs: 4px; --cds-gap-sm: 8px; --cds-gap-md: 16px; --cds-gap-lg: 24px; --cds-gap-xl: 32px;
  --cds-font-size-caption: 13px; --cds-font-size-body: 15px; --cds-font-size-heading: 17px; --cds-font-size-title: 34px;
  --cds-font-weight-medium: 500;
  --cds-chart-grid: #eef0ed; --cds-chart-axis: #c4c8c3; --cds-chart-reference: #6f747a; --cds-chart-muted: #b6bab5;
  --cds-surface-popover: #ffffff; --cds-border: #dfe2de; --cds-shadow-popover: 0 4px 16px rgba(0, 0, 0, .12);
  --cds-text-secondary: #5a6066; --cds-dur-slow: .3s; --cds-ease-out: cubic-bezier(.2, .8, .2, 1);
  --series-1: #1f5fd1; --series-2: #e8730c; --series-3: #1baf7a; --series-4: #a855f7;
  --series-5: #e0569b; --series-6: #8a5a2b; --series-7: #0f8f8a; --series-8: #8a8d90;
  /* Site identity. Colour belongs to the data; the interface has one marker colour, a
     highlighter, used for the active page, selection and key figures (never for text). */
  --accent: #e8b20c; --accent-soft: #fbefc4; --ink: #15181c;
  --page-max: 1180px; --gutter: clamp(16px, 3vw, 32px);
  /* Components, shared by the home page, the map and the comparisons page: one control height,
     one control border, two radii (controls, cards). */
  --control-h: 38px; --control-line: #b4b9b3; --radius-control: 8px; --radius-card: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #111317; --color-panel: #181b20; --color-fg: #e6e6e6; --color-fg-muted: #9aa3ad; --color-border-line: #2e333a;
    --color-ok: #4ade80; --color-warn: #fbbf24; --color-bad: #f87171;
    --cds-chart-grid: #262a30; --cds-chart-axis: #4a515a; --cds-chart-reference: #7d858f; --cds-chart-muted: #4f565e;
    --cds-surface-popover: #20242a; --cds-border: #2e333a; --cds-shadow-popover: 0 4px 16px rgba(0, 0, 0, .5); --cds-text-secondary: #9aa3ad;
    --series-1: #5b8cf0; --control-line: #4a515a; --accent: #f2c230; --accent-soft: #3b3215; --ink: #f1f2f3; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-bg: #111317; --color-panel: #181b20; --color-fg: #e6e6e6; --color-fg-muted: #9aa3ad; --color-border-line: #2e333a;
  --color-ok: #4ade80; --color-warn: #fbbf24; --color-bad: #f87171;
  --cds-chart-grid: #262a30; --cds-chart-axis: #4a515a; --cds-chart-reference: #7d858f; --cds-chart-muted: #4f565e;
  --cds-surface-popover: #20242a; --cds-border: #2e333a; --cds-shadow-popover: 0 4px 16px rgba(0, 0, 0, .5); --cds-text-secondary: #9aa3ad;
  --series-1: #5b8cf0; --control-line: #4a515a; --accent: #f2c230; --accent-soft: #3b3215; --ink: #f1f2f3; color-scheme: dark;
}
html, body { margin: 0; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-anthropic-sans); font-size: 15px; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
.dash-skeleton { color: transparent !important; background: linear-gradient(90deg, var(--color-border-line), var(--color-panel), var(--color-border-line)); background-size: 200% 100%; border-radius: 4px; min-height: 1em; }
@media (prefers-reduced-motion: no-preference) { .dash-skeleton { animation: sk 1.4s ease-in-out infinite; } }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* Site header, the same on every page: the name, a link to the blog, and the page links on one
   line, aligned to the content width. The active page is underlined with the marker colour. */
.site-nav { direction: rtl; background: var(--color-panel); border-bottom: 1px solid var(--color-border-line); font-size: 15px; position: relative; z-index: 1001; }
.site-nav-in { max-width: var(--page-max); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-right, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px)); display: flex; align-items: stretch; gap: 4px; min-height: 56px; }
.site-nav a { color: var(--color-fg-muted); text-decoration: none; display: flex; align-items: center; padding-inline: 10px; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.site-nav a:hover { color: var(--color-fg); }
.site-nav a[aria-current="page"] { color: var(--color-fg); font-weight: 500; border-bottom-color: var(--accent); }
.site-nav a:focus-visible { outline: 2px solid var(--color-fg); outline-offset: -4px; }
.site-nav .brand { color: var(--color-fg); gap: 10px; padding-inline: 0 6px; border: 0; }
.site-nav .pages { display: flex; margin-inline-start: auto; }
.site-nav .brand .t { font-family: var(--font-anthropic-serif); font-weight: 700; font-size: 22px; letter-spacing: -.01em; }
.site-nav .brand .yr { background: linear-gradient(transparent 60%, var(--accent) 60%, var(--accent) 88%, transparent 88%); padding-inline: 2px; }
.site-nav .by { font-size: 13px; border: 0; padding-inline: 10px 0; }
.site-nav .by span { padding-inline-start: 10px; border-inline-start: 1px solid var(--color-border-line); line-height: 1.6; }
[hidden] { display: none !important; }
@media (max-width: 640px) {
  .site-nav { font-size: 14px; }
  .site-nav-in { min-height: 50px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .site-nav a { padding-inline: 8px; }
  .site-nav .nav-method { display: none; }
  .site-nav .by { padding-inline-start: 6px; }
}
@media (max-width: 420px) {
  .site-nav .by { display: none; }
  .site-nav .brand .t { font-size: 18px; }
}