/*
 * foundation.css: tokens and base layer for every page.
 * Loaded after the brand partial and theme-boot.js, before components.css and page CSS.
 *
 * Token layers
 *   1. Brand inputs from the brand partial. Only the raw --brand-primary and
 *      --brand-highlight are read; brand names are never redefined and the
 *      legacy --accent alias is never read.
 *   2. Semantic tokens: color --c-*, family --font-*, size --fs-*, line height
 *      --lh-*, weight --fw-*, space --sp-*, radius --r-*, elevation --e-*,
 *      layer --z-*, duration --dur-*, easing --ease-*, width --w-*, plus the
 *      lifecycle tokens --new, --emerging, --worsening, --recurring,
 *      --improving, --stable (each with -ink and -bg; Quiet uses stable).
 *   3. Components read semantic tokens only. Chart-only tokens live in dataviz.css.
 *
 * Themes: light values on :root. Dark values twice, under prefers-color-scheme
 * dark for a root without data-theme="light" and under :root[data-theme="dark"].
 * Both dark sets are screen-only, so print resolves every token here to light.
 *
 * Accent: theme-boot.js writes guarded values on the root as --c-accent-light,
 * --c-accent-dark, --c-on-accent-light, --c-on-accent-dark, --c-accent-ink-light
 * and --c-accent-ink-dark. Accent tokens read them with a no-script fallback.
 *
 * Breakpoints (media queries cannot read custom properties):
 *   phone to 599px; tablet (min-width: 600px); desktop (min-width: 960px);
 *   wide (min-width: 1280px). Coarse pointers: (pointer: coarse).
 */

/* 1. Light theme and theme-independent tokens ----------------------- */

:root {
  color-scheme: light;

  /* Brand inputs, read once with a neutral fallback. */
  --c-brand: var(--brand-primary, oklch(0.45 0.05 245));
  --c-brand-highlight: var(--brand-highlight, oklch(0.72 0.12 85));

  /* Neutrals. Surfaces lean 3 percent toward the brand; text never does. */
  --c-canvas: color-mix(in oklch, oklch(0.975 0.004 250), var(--c-brand) 3%);
  --c-surface: oklch(1 0 0);
  --c-surface-2: color-mix(in oklch, oklch(0.96 0.005 250), var(--c-brand) 3%);
  --c-surface-3: color-mix(in oklch, oklch(0.93 0.007 250), var(--c-brand) 3%);
  --c-ink: oklch(0.22 0.014 260);
  --c-ink-2: oklch(0.38 0.014 260);
  --c-muted: oklch(0.50 0.012 260);
  --c-placeholder: oklch(0.53 0.010 260);
  --c-line: oklch(0.90 0.006 250);
  --c-line-strong: oklch(0.62 0.010 260);
  --c-scrim: oklch(0.22 0.014 260 / 0.4);
  --c-inverse: oklch(0.22 0.014 260);
  --c-on-inverse: oklch(1 0 0);

  /* Accent, derived from the brand and contrast-guarded by theme-boot.js. */
  --c-accent: var(--c-accent-light, var(--c-brand));
  --c-accent-hover: color-mix(in srgb, var(--c-accent), black 12%);
  --c-on-accent: var(--c-on-accent-light, white);
  --c-accent-ink: var(--c-accent-ink-light, color-mix(in srgb, var(--c-brand), black 25%));
  --c-accent-wash: color-mix(in srgb, var(--c-accent) 10%, var(--c-surface));
  --c-accent-line: color-mix(in srgb, var(--c-accent) 45%, var(--c-surface));
  --c-focus: var(--c-accent-ink);
  --c-highlight: var(--c-brand-highlight);
  --c-selection: color-mix(in srgb, var(--c-accent) 24%, var(--c-surface));

  /* Status: -base marks and icons (3:1), -ink text (6:1 on wash and surface),
     -wash fills. The bare family name equals -base. Never themed by the brand. */
  --c-good-base: oklch(0.58 0.15 150); --c-good-ink: oklch(0.45 0.12 150); --c-good-wash: oklch(0.96 0.03 150);
  --c-watch-base: oklch(0.64 0.15 70); --c-watch-ink: oklch(0.47 0.10 65); --c-watch-wash: oklch(0.96 0.04 85);
  --c-critical-base: oklch(0.57 0.19 25); --c-critical-ink: oklch(0.48 0.17 25); --c-critical-wash: oklch(0.96 0.025 20);
  --c-info-base: oklch(0.51 0.09 195); --c-info-ink: oklch(0.43 0.075 195); --c-info-wash: oklch(0.96 0.025 195);
  --c-violet-base: oklch(0.50 0.16 290); --c-violet-ink: oklch(0.45 0.15 290); --c-violet-wash: oklch(0.96 0.025 290);
  --c-neutral-base: oklch(0.58 0.01 260); --c-neutral-ink: oklch(0.42 0.012 260); --c-neutral-wash: oklch(0.95 0.004 260);
  --c-good: var(--c-good-base); --c-watch: var(--c-watch-base); --c-critical: var(--c-critical-base);
  --c-info: var(--c-info-base); --c-violet: var(--c-violet-base); --c-neutral: var(--c-neutral-base);

  /* Lifecycle states; names pair with state slugs. */
  --new: var(--c-info-base); --new-ink: var(--c-info-ink); --new-bg: var(--c-info-wash);
  --emerging: var(--c-watch-base); --emerging-ink: var(--c-watch-ink); --emerging-bg: var(--c-watch-wash);
  --worsening: var(--c-critical-base); --worsening-ink: var(--c-critical-ink); --worsening-bg: var(--c-critical-wash);
  --recurring: var(--c-violet-base); --recurring-ink: var(--c-violet-ink); --recurring-bg: var(--c-violet-wash);
  --improving: var(--c-good-base); --improving-ink: var(--c-good-ink); --improving-bg: var(--c-good-wash);
  --stable: var(--c-neutral-base); --stable-ink: var(--c-neutral-ink); --stable-bg: var(--c-neutral-wash);

  /* Synthetic dataset pill. */
  --c-synth-bg: var(--c-accent-wash); --c-synth-ink: var(--c-ink); --c-synth-mark: var(--c-accent-ink);

  /* Families: system stacks only, no font files. Serif never sets numerals.
     Multiword family names are written as plain identifiers, which CSS allows. */
  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-serif: var(--font-sans);
  --font-mono: ui-monospace, Cascadia Mono, Menlo, Consolas, Liberation Mono, monospace;

  /* Type scale, size then line height. 12px floor: nothing smaller anywhere. */
  --fs-display: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); --lh-display: 1.08;
  --fs-deck: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); --lh-deck: 1.45;
  --fs-h1: clamp(1.5rem, 1.25rem + 1vw, 2rem); --lh-h1: 1.2;
  --fs-h2: 1.125rem; --lh-h2: 1.35;
  --fs-h3: 1rem; --lh-h3: 1.4;
  --fs-body: 1rem; --lh-body: 1.6;
  --fs-ui: 0.875rem; --lh-ui: 1.45;
  --fs-small: 0.8125rem; --lh-small: 1.4;
  --fs-label: 0.75rem; --lh-label: 1.3; --ls-label: 0.06em;
  --fs-fig-xl: clamp(2.5rem, 2rem + 2vw, 3.75rem); --lh-fig-xl: 1;
  --fs-fig-l: 2rem; --lh-fig-l: 1.05;
  --fs-fig-m: 1.5rem; --lh-fig-m: 1.1;
  --fw-regular: 400; --fw-medium: 550; --fw-display: 600; --fw-semibold: 650; --fw-bold: 700;

  /* Spacing (4px base) and radius. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-pill: 999px;

  /* Layout. Container widths exclude gutters; --gutter steps up at 600 and 960. */
  --w-min: 320px; --w-measure: 68ch;
  --w-briefing: 1280px; --w-conversation: 820px; --w-conversation-wide: 1040px;
  --w-hub: 1120px; --w-dashboard: 1440px; --w-admin-rail: 232px; --w-admin-content: 1200px;
  --gutter: 16px; --masthead-h: 56px; --provenance-h: 32px;
  --sticky-offset: var(--sp-3);

  /* Hit targets (32px fine, 44px coarse) and the focus ring (2px, 2px gap). */
  --hit: 32px; --control-h: 36px;
  --focus-width: 2px; --focus-offset: 2px;
  --focus-ring: var(--focus-width) solid var(--c-focus);

  /* Elevation: box-shadow only, paired with a 1px --c-line border.
     --e-ring draws the hairline as a shadow for borderless surfaces. */
  --e-ring: 0 0 0 1px var(--c-line);
  --e-0: none;
  --e-1: 0 1px 2px oklch(0.22 0.014 260 / 0.06);
  --e-2: 0 1px 2px oklch(0.22 0.014 260 / 0.06), 0 4px 12px oklch(0.22 0.014 260 / 0.08);
  --e-3: 0 2px 6px oklch(0.22 0.014 260 / 0.08), 0 16px 40px oklch(0.22 0.014 260 / 0.14);
  --e-4: 0 4px 12px oklch(0.22 0.014 260 / 0.10), 0 24px 64px oklch(0.22 0.014 260 / 0.20);
  /* The inline-end edge of a pinned column over content scrolled beneath it. */
  --e-edge: 6px 0 8px -4px oklch(0.22 0.014 260 / 0.18);

  /* One layer scale. */
  --z-sticky: 10; --z-masthead: 20; --z-menu: 30; --z-overlay: 40; --z-drawer: 50;
  --z-dialog: 60; --z-palette: 65; --z-toast: 70; --z-tour: 80; --z-skip: 90;

  /* Motion. Only the streaming caret and spinners loop. */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 600ms; --dur-stagger: 60ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. Dark theme: operating-system default when nothing is stored ---- */

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-canvas: color-mix(in oklch, oklch(0.165 0.008 260), var(--c-brand) 4%);
    --c-surface: color-mix(in oklch, oklch(0.205 0.010 260), var(--c-brand) 4%);
    --c-surface-2: color-mix(in oklch, oklch(0.245 0.011 260), var(--c-brand) 4%);
    --c-surface-3: color-mix(in oklch, oklch(0.285 0.012 260), var(--c-brand) 4%);
    --c-ink: oklch(0.95 0.004 260);
    --c-ink-2: oklch(0.84 0.008 260);
    --c-muted: oklch(0.72 0.010 260);
    --c-placeholder: oklch(0.66 0.010 260);
    --c-line: oklch(0.32 0.010 260);
    --c-line-strong: oklch(0.56 0.012 260);
    --c-scrim: oklch(0 0 0 / 0.6);
    --c-inverse: oklch(0.90 0.006 260);
    --c-on-inverse: var(--c-surface);
    --c-accent: var(--c-accent-dark, color-mix(in srgb, var(--c-brand), white 30%));
    --c-accent-hover: color-mix(in srgb, var(--c-accent), white 12%);
    --c-on-accent: var(--c-on-accent-dark, white);
    --c-accent-ink: var(--c-accent-ink-dark, color-mix(in srgb, var(--c-brand), white 50%));
    --c-accent-wash: color-mix(in srgb, var(--c-accent) 20%, var(--c-surface));
    --c-accent-line: color-mix(in srgb, var(--c-accent) 55%, var(--c-surface));
    --c-highlight: color-mix(in srgb, var(--c-brand-highlight), white 30%);
    --c-selection: color-mix(in srgb, var(--c-accent) 36%, var(--c-surface));
    --c-good-base: oklch(0.70 0.16 150); --c-good-ink: oklch(0.82 0.13 150); --c-good-wash: oklch(0.30 0.05 150);
    --c-watch-base: oklch(0.78 0.15 80); --c-watch-ink: oklch(0.85 0.12 85); --c-watch-wash: oklch(0.31 0.05 80);
    --c-critical-base: oklch(0.68 0.17 25); --c-critical-ink: oklch(0.80 0.11 25); --c-critical-wash: oklch(0.30 0.06 25);
    --c-info-base: oklch(0.74 0.09 195); --c-info-ink: oklch(0.84 0.07 195); --c-info-wash: oklch(0.30 0.035 195);
    --c-violet-base: oklch(0.68 0.13 290); --c-violet-ink: oklch(0.82 0.09 290); --c-violet-wash: oklch(0.30 0.05 290);
    --c-neutral-base: oklch(0.62 0.01 260); --c-neutral-ink: oklch(0.80 0.008 260); --c-neutral-wash: oklch(0.29 0.008 260);
    --e-1: 0 1px 2px oklch(0 0 0 / 0.24);
    --e-2: 0 1px 2px oklch(0 0 0 / 0.28), 0 4px 12px oklch(0 0 0 / 0.20);
    --e-3: 0 2px 6px oklch(0 0 0 / 0.30), 0 16px 40px oklch(0 0 0 / 0.32);
    --e-4: 0 4px 12px oklch(0 0 0 / 0.32), 0 24px 64px oklch(0 0 0 / 0.40);
    --e-edge: 6px 0 8px -4px oklch(0 0 0 / 0.55);
  }
}

/* 3. Dark theme: explicit choice (keep identical to section 2) ------- */

@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --c-canvas: color-mix(in oklch, oklch(0.165 0.008 260), var(--c-brand) 4%);
    --c-surface: color-mix(in oklch, oklch(0.205 0.010 260), var(--c-brand) 4%);
    --c-surface-2: color-mix(in oklch, oklch(0.245 0.011 260), var(--c-brand) 4%);
    --c-surface-3: color-mix(in oklch, oklch(0.285 0.012 260), var(--c-brand) 4%);
    --c-ink: oklch(0.95 0.004 260);
    --c-ink-2: oklch(0.84 0.008 260);
    --c-muted: oklch(0.72 0.010 260);
    --c-placeholder: oklch(0.66 0.010 260);
    --c-line: oklch(0.32 0.010 260);
    --c-line-strong: oklch(0.56 0.012 260);
    --c-scrim: oklch(0 0 0 / 0.6);
    --c-inverse: oklch(0.90 0.006 260);
    --c-on-inverse: var(--c-surface);
    --c-accent: var(--c-accent-dark, color-mix(in srgb, var(--c-brand), white 30%));
    --c-accent-hover: color-mix(in srgb, var(--c-accent), white 12%);
    --c-on-accent: var(--c-on-accent-dark, white);
    --c-accent-ink: var(--c-accent-ink-dark, color-mix(in srgb, var(--c-brand), white 50%));
    --c-accent-wash: color-mix(in srgb, var(--c-accent) 20%, var(--c-surface));
    --c-accent-line: color-mix(in srgb, var(--c-accent) 55%, var(--c-surface));
    --c-highlight: color-mix(in srgb, var(--c-brand-highlight), white 30%);
    --c-selection: color-mix(in srgb, var(--c-accent) 36%, var(--c-surface));
    --c-good-base: oklch(0.70 0.16 150); --c-good-ink: oklch(0.82 0.13 150); --c-good-wash: oklch(0.30 0.05 150);
    --c-watch-base: oklch(0.78 0.15 80); --c-watch-ink: oklch(0.85 0.12 85); --c-watch-wash: oklch(0.31 0.05 80);
    --c-critical-base: oklch(0.68 0.17 25); --c-critical-ink: oklch(0.80 0.11 25); --c-critical-wash: oklch(0.30 0.06 25);
    --c-info-base: oklch(0.74 0.09 195); --c-info-ink: oklch(0.84 0.07 195); --c-info-wash: oklch(0.30 0.035 195);
    --c-violet-base: oklch(0.68 0.13 290); --c-violet-ink: oklch(0.82 0.09 290); --c-violet-wash: oklch(0.30 0.05 290);
    --c-neutral-base: oklch(0.62 0.01 260); --c-neutral-ink: oklch(0.80 0.008 260); --c-neutral-wash: oklch(0.29 0.008 260);
    --e-1: 0 1px 2px oklch(0 0 0 / 0.24);
    --e-2: 0 1px 2px oklch(0 0 0 / 0.28), 0 4px 12px oklch(0 0 0 / 0.20);
    --e-3: 0 2px 6px oklch(0 0 0 / 0.30), 0 16px 40px oklch(0 0 0 / 0.32);
    --e-4: 0 4px 12px oklch(0 0 0 / 0.32), 0 24px 64px oklch(0 0 0 / 0.40);
    --e-edge: 6px 0 8px -4px oklch(0 0 0 / 0.55);
  }
}

/* 4. Responsive and preference tokens ------------------------------- */

@media (min-width: 600px) {
  /* Masthead and provenance bar are sticky from tablet up. */
  :root {
    --gutter: 24px;
    --sticky-offset: calc(var(--masthead-h) + var(--provenance-h) + var(--sp-3));
  }
}

@media (min-width: 960px) {
  :root { --gutter: 32px; }
}

@media (pointer: coarse) {
  :root { --hit: 44px; --control-h: 44px; }
}

/* Doubled :root outranks both dark sets. */
@media (prefers-contrast: more) {
  :root:root {
    --c-line: var(--c-line-strong);
    --c-muted: var(--c-ink-2);
    --c-placeholder: var(--c-ink-2);
  }
}

/* 5. Reset (zero specificity where possible) ------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
  /* --sticky-start and --sticky-end: page bars marked data-sticky-inset, measured by the
     shell. A page with a fade above its docked bar sets --sticky-end-fade. */
  scroll-padding-block-start: calc(var(--sticky-offset) + var(--sticky-start, 0px));
  scroll-padding-block-end: calc(var(--sticky-end, 0px) + var(--sticky-end-fade, 0px));
  scrollbar-color: var(--c-line-strong) transparent;
}

/* A control inside a docked bar is already in view, so focusing or typing in it
   never scrolls the page to clear the bar's own height. */
html:has([data-sticky-inset="end"]:focus-within) { scroll-padding-block-end: 0px; }

:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, menu, pre, hr) { margin: 0; }
:where(ul, ol) { padding-inline-start: 1.25em; }
:where(ul, ol)[role="list"], :where(menu) { list-style: none; padding: 0; }
:where(img, video) { max-width: 100%; height: auto; }
:where(img, svg, video, canvas) { vertical-align: middle; }
:where(input, button, textarea, select) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(button, [role="button"], summary, label[for], select) { cursor: pointer; }
:where(button, input, select, textarea):disabled, :where([aria-disabled="true"]) { cursor: not-allowed; }
:where(textarea) { resize: vertical; }
:where(fieldset) { min-width: 0; margin: 0; padding: 0; border: 0; }
:where(legend) { padding: 0; }

:where(table) {
  border-collapse: collapse;
  border-spacing: 0;
  font-variant-numeric: lining-nums tabular-nums;
}

:where(th) { text-align: start; font-weight: var(--fw-semibold); }
:where(hr) { height: 0; border: 0; border-block-start: 1px solid var(--c-line); }
:where(abbr[title]) { text-decoration: underline dotted; text-underline-offset: 0.2em; }

::placeholder { color: var(--c-placeholder); opacity: 1; }
::selection { background: var(--c-selection); color: var(--c-ink); }
::backdrop { background: var(--c-scrim, oklch(0.22 0.014 260 / 0.4)); }

/* The hidden attribute always wins over component display rules. */
[hidden]:not([hidden="until-found"]) { display: none !important; }

/* 6. Page base and typography -------------------------------------- */

body {
  min-width: var(--w-min);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  font-variant-numeric: lining-nums;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(h1, h2, h3, h4, h5, h6) { color: var(--c-ink); font-weight: var(--fw-semibold); text-wrap: balance; }
:where(h1) { font-size: var(--fs-h1); line-height: var(--lh-h1); }
:where(h2) { font-size: var(--fs-h2); line-height: var(--lh-h2); }
:where(h3) { font-size: var(--fs-h3); line-height: var(--lh-h3); }
:where(h4, h5, h6) { font-size: var(--fs-ui); line-height: var(--lh-ui); }
:where(p, li, dd, figcaption, blockquote) { text-wrap: pretty; }
:where(small) { font-size: var(--fs-small); line-height: var(--lh-small); }
:where(strong, b) { font-weight: var(--fw-semibold); }
:where(code, kbd, samp, pre) { font-family: var(--font-mono); font-size: 0.9375em; }
:where(pre) { overflow-x: auto; white-space: pre; }

:where(a) {
  color: var(--c-accent-ink);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

:where(a):hover { text-decoration-thickness: 2px; }

/* Type roles as utilities, for markup without a component class. */
.t-display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-display);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.t-deck {
  font-family: var(--font-serif);
  font-size: var(--fs-deck);
  line-height: var(--lh-deck);
  font-weight: var(--fw-regular);
}

.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-semibold); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-ui { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.t-small { font-size: var(--fs-small); line-height: var(--lh-small); }

.t-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* Hero and KPI figures: sans, lining, proportional. */
.t-fig-xl, .t-fig-l, .t-fig-m {
  font-family: var(--font-sans);
  font-variant-numeric: lining-nums proportional-nums;
  letter-spacing: -0.01em;
}

.t-fig-xl { font-size: var(--fs-fig-xl); line-height: var(--lh-fig-xl); font-weight: var(--fw-bold); }
.t-fig-l { font-size: var(--fs-fig-l); line-height: var(--lh-fig-l); font-weight: var(--fw-semibold); }
.t-fig-m { font-size: var(--fs-fig-m); line-height: var(--lh-fig-m); font-weight: var(--fw-semibold); }

/* A number inside a serif sentence: sans and lining, sized to sit with the serif. */
.fig {
  font-family: var(--font-sans);
  font-size: 0.94em;
  font-variant-numeric: lining-nums proportional-nums;
  white-space: nowrap;
}

.serif { font-family: var(--font-serif); }
.mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: lining-nums tabular-nums; }
.muted { color: var(--c-muted); }
.nowrap { white-space: nowrap; }
.measure { max-width: var(--w-measure); }

/* Default sizing for sprite icons; any component rule overrides it. */
:where(svg.icon) {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.25em;
}

/* 7. Layout primitives --------------------------------------------- */

/* Page wrapper from the layout template: shell on top, main fills the rest. */
.app-root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.app-root > main { flex: 1 0 auto; min-width: 0; }
main[tabindex="-1"]:focus { outline: none; }
/* Headings focused from code mark a reading position for screen readers; they are not controls. */
:is(h1, h2, h3, h4)[tabindex="-1"]:focus { outline: none; }

/* Centered column with responsive gutters. */
.container {
  --container: var(--w-briefing);
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--briefing { --container: var(--w-briefing); }
.container--conversation { --container: var(--w-conversation); }
.container--hub { --container: var(--w-hub); }
.container--dashboard { --container: var(--w-dashboard); }
.container--admin { --container: calc(var(--w-admin-rail) + var(--sp-6) + var(--w-admin-content)); }

/* Vertical rhythm by gap; override with --stack-gap. */
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--sp-4)); }
.stack > * { min-width: 0; }
.stack--sm { --stack-gap: var(--sp-2); }
.stack--lg { --stack-gap: var(--sp-6); }

/* Inline group that wraps; override with --cluster-gap. */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--sp-2)); }

/* Two ends of a row, wrapping on narrow widths. */
.spread {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* Equal tracks no narrower than --grid-min (never wider than the row). */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
  gap: var(--grid-gap, var(--sp-4));
}

/* Prose flow: space between siblings, none at the edges. */
.flow > * + * { margin-block-start: var(--flow-space, 0.75em); }

/* 8. Focus, skip link, visually hidden, scrollbars ------------------ */

:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: fixed;
  inset-block-start: var(--sp-2);
  inset-inline-start: var(--sp-2);
  z-index: var(--z-skip);
  display: inline-flex;
  align-items: center;
  min-height: var(--hit);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--c-inverse);
  color: var(--c-on-inverse);
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  box-shadow: var(--e-2);
  transform: translateY(calc(-100% - var(--sp-4)));
  transition: transform var(--dur-2) var(--ease-out);
}

.skip-link:focus, .skip-link:focus-visible {
  transform: none;
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.visually-hidden,
.sr-only,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
  margin: -1px !important; padding: 0 !important; border: 0 !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* Thin themed scrollbars inside the page; the page scrollbar keeps its width. */
body, body * { scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: var(--c-line-strong);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover { background-color: var(--c-muted); }

/* 9. Reduced motion ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0.01ms; --dur-2: 0.01ms; --dur-3: 0.01ms; --dur-4: 0.01ms; --dur-stagger: 0ms; }

  /* No slides, staggers or loops (end events still fire). The root is
     included, so in-page jumps never smooth-scroll either. */
  html, html *, html *::before, html *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* 10. Forced colors ------------------------------------------------- */

@media (forced-colors: active) {
  /* Doubled :root outranks both dark sets. These values reach places the
     browser does not force: chart containers that opt out, SVG paint. */
  :root:root {
    --c-canvas: Canvas; --c-surface: Canvas; --c-surface-2: Canvas; --c-surface-3: Canvas;
    --c-ink: CanvasText; --c-ink-2: CanvasText; --c-muted: CanvasText; --c-placeholder: GrayText;
    --c-line: CanvasText; --c-line-strong: CanvasText; --c-inverse: CanvasText; --c-on-inverse: Canvas;
    --c-accent: Highlight; --c-accent-hover: Highlight; --c-on-accent: HighlightText;
    --c-accent-ink: LinkText; --c-accent-wash: Canvas; --c-accent-line: Highlight;
    --c-focus: Highlight; --c-highlight: CanvasText; --c-selection: Highlight;
    --c-synth-bg: Canvas; --c-synth-ink: CanvasText; --c-synth-mark: CanvasText;
  }

  :focus-visible, .skip-link:focus { outline: var(--focus-width) solid Highlight; outline-offset: var(--focus-offset); }
  .skip-link { border-color: CanvasText; }

  /* Pressed and selected states survive forcing as an inset 2px line.
     Zero specificity, so a component's own forced-colors rule wins. */
  :where([aria-pressed="true"], [aria-current="page"], [aria-current="true"],
    [role="tab"][aria-selected="true"], [role="radio"][aria-checked="true"],
    [role="option"][aria-selected="true"], [role="menuitemradio"][aria-checked="true"]) {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  ::selection { background: Highlight; color: HighlightText; }
}

/* 11. Print base (page stylesheets add their own rules) ------------- */

@media print {
  /* The dark sets are screen-only, so every token here is already light. */
  :root {
    color-scheme: light;
    --c-canvas: oklch(1 0 0);
    --e-1: none; --e-2: none; --e-3: none; --e-4: none; --e-edge: none;
  }

  @page { margin: 14mm 12mm; }

  html, body { background: oklch(1 0 0) !important; color: var(--c-ink); }

  /* Pills, washes and CSS-drawn chart marks are backgrounds; print them. */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .app-root { display: block; min-height: 0; }

  /* Chrome and interactive layers never print. Content buttons (glossary
     terms, sort headers, row labels) stay; page CSS hides more if needed. */
  .skip-link, nav, .btn, .icon-btn, .search, .menu, .popover, .tooltip,
  .drawer, .dialog, .scrim, .palette, .coach, .coach-ring, .toast-region,
  .toast, .progress-line, .banner--session, #paletteButton, #themeToggle,
  #userMenu, #aboutButton, #sessionBanner, #toastRegion, #composer {
    display: none !important;
  }

  /* Refetch dimming never reaches paper; scroll regions expand. */
  [aria-busy="true"] { opacity: 1 !important; }
  .table-wrap, [role="region"][tabindex], pre { max-height: none !important; overflow: visible !important; }
  pre { white-space: pre-wrap; }

  :where(h1, h2, h3, h4) { break-after: avoid; }
  :where(figure, tr, img, svg, canvas, .card, .story, .hero, .kpi, .code-card) { break-inside: avoid; }
  :where(thead) { display: table-header-group; }
  :where(p, li) { orphans: 3; widows: 3; }
  :where(a) { color: var(--c-ink); }
}