/* The design variables Tally's page used to get from the claude.ai Dashboard type, with the values that type
   computed (read from its stylesheet, 4 Nov 2026). The theme is html[data-mode], which follows html[data-theme]
   (runtime/boot.js). Fonts: the Anthropic fonts only exist inside claude.ai; Instrument Sans for text and Lora for
   titles and big numbers replace them (his pick, 4 Nov 2026), served with the site (fonts/, SIL Open Font License). */
@font-face { font-family: "Instrument Sans"; src: url(../fonts/instrument-sans.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Lora"; src: url(../fonts/lora.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
:root {
  --font-anthropic-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-anthropic-serif: "Lora", ui-serif, Georgia, "Times New Roman", serif;

  --cds-font-size-body: .8125rem;
  --cds-font-size-caption: .6875rem;
  --cds-font-size-heading: .875rem;
  --cds-font-size-title: 1.25rem;
  --cds-font-weight-medium: 500;
  --cds-gap-xs: .375rem;
  --cds-gap-sm: .5rem;
  --cds-gap-md: .75rem;
  --cds-gap-lg: 1.25rem;
  --cds-gap-xl: 2rem;
  --cds-pad-xs: .25rem;
  --cds-pad-sm: .375rem;
  --cds-pad-md: .5rem;
  --cds-pad-lg: .75rem;
  --cds-pad-xl: 1.25rem;
  --cds-radius: .375rem;
  --cds-dur-fast: 60ms;
  --cds-dur-slow: .45s;

  --cds-aqua-200: #7ad7b4;    --cds-aqua-250: #5acba0;
  --cds-blue-200: #9ec5f4;    --cds-blue-250: #86b6ef;
  --cds-green-150: #aee0a9;   --cds-green-300: #55bf50;
  --cds-magenta-200: #f3a8c3; --cds-magenta-250: #ed93b4;
  --cds-orange-150: #f3c5b2;  --cds-orange-200: #f4ae94;  --cds-orange-250: #f09978;  --cds-orange-400: #d95926;
  --cds-red-200: #f4abab;     --cds-red-300: #ec7e7e;
  --cds-violet-200: #bfb9f5;  --cds-violet-250: #b0a7f2;
  --cds-yellow-100: #f9dca4;  --cds-yellow-150: #f9c868;
  --cds-gray-600: #52514e;
}

:root, :root[data-mode=light] {
  color-scheme: light;
  --color-fg: #0b0b0b;
  --color-fg-muted: #898781;
  --color-bg: #f9f9f7;
  --color-panel: #fff;
  --color-border-line: rgb(11 11 11 / 10%);
  --cds-border: rgb(11 11 11 / 10%);
  --cds-chart-grid: rgb(11 11 11 / 10%);
  --cds-chart-axis: #c3c2b7;
  --cds-chart-muted: #c3c2b7;
  --cds-text-secondary: #52514e;
  --cds-surface-popover: #fff;
  --cds-shadow-popover: 0 8px 24px #0000001f, 0 2px 6px #00000014;
}

:root[data-mode=dark] {
  color-scheme: dark;
  --color-fg: #f0efec;
  --color-fg-muted: #898781;
  --color-bg: #0b0b0b;
  --color-panel: #1a1a19;
  --color-border-line: rgb(255 255 255 / 10%);
  --cds-border: rgb(255 255 255 / 10%);
  --cds-chart-grid: rgb(255 255 255 / 10%);
  --cds-chart-axis: #383835;
  --cds-chart-muted: #5f5e5a;
  --cds-text-secondary: #c3c2b7;
  --cds-surface-popover: #20201f;
  --cds-shadow-popover: 0 8px 24px #00000052, 0 2px 6px #0003;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-anthropic-sans);
  font-size: var(--cds-font-size-body);
}
#dash-root { padding-inline: 16px; }
/* The type's stylesheet hid [hidden] elements even where a page rule sets display (Settings rows rely on it) */
[hidden] { display: none !important; }
/* Sign-in (runtime/auth.js) */
.hx-signin { max-width: 20rem; margin: 18vh auto 0; display: grid; gap: var(--cds-gap-md); }
.hx-signin h1 { font-family: 'Fraunces', var(--font-anthropic-serif); font-weight: 600; font-size: 1.75rem; margin: 0 0 var(--cds-gap-sm); color: var(--cds-orange-400); }
.hx-signin label { display: grid; gap: var(--cds-gap-xs); font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.hx-signin input { font: inherit; font-size: var(--cds-font-size-body); color: var(--color-fg); background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-md) var(--cds-pad-lg); }
.hx-signin button { font: inherit; font-weight: 500; border: 0; border-radius: var(--cds-radius); padding: var(--cds-pad-md); background: var(--cds-orange-150); color: #2b1a10; cursor: pointer; }
.hx-signin-msg { min-height: 1.2em; margin: 0; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); text-align: center; }