/* ==========================================================================
ELT OS — design.css
The mechanics layer of the ELT Global design system, for agents.
--------------------------------------------------------------------------
Companion to design.md (the judgment layer). design.md tells an agent WHAT
to build and WHEN; this file owns exact values, component mechanics, and the
complete elt- vocabulary. Agents use the public component roots documented
in design.md and the existing __part / .is-* structure here. They do not
restyle published components or invent parallel tokens.
Provenance — foundation values and component metrics mirror eltglobal-os:
packages/tokens/src/css/variables.light.css (:root --prim-*, --col-*, --type-*, --pad-*, --shadow-*, --z-*, --motion-*)
packages/tokens/src/css/variables.dark.css (.dark --col-*)
packages/tokens/src/css/brands.light.css / brands.dark.css ([data-brand])
packages/tokens/src/css/corner-radius.css (--cr-*, [data-radius])
vault/reports/report-skill/report.css (Figma-verified doc-block metrics)
packages/web/src/custom/*.tsx (component measurements)
Report composition and chart tokens extend that foundation. Chart tokens
are derived from --prim-* steps and validated for colour-vision separation
and contrast on ELT surfaces (see design.md §8 and §13.3).
Theming — one declaration per token using light-dark(). The active mode is
chosen by `color-scheme` on :
(none) follows the OS preference
data-theme="light" forced light
data-theme="dark"|.dark forced dark
Brand: data-brand="triplei|westmount|black" (default = ELT Global).
Radius: data-radius="rounded|sharp" (default = squircle).
Naming — every published class is prefixed `elt-`; parts use `__`; modifiers
use `.is-*` / `.has-*` / `.cols-*` / `.gap-*`. Primitive --prim-* values
support the implementation; page-authored CSS should consume semantic
--col-* and role tokens instead.
========================================================================== */
/* --------------------------------------------------------------------------
0. TOKENS
-------------------------------------------------------------------------- */
:root {
color-scheme: light dark;
/* ── 0.1 Primitive palette (--prim-*, mode-invariant) ─────────────────── */
--prim-neutral-25: #FDFDFD; --prim-neutral-50: #FBFBFB; --prim-neutral-100: #F3F4F6;
--prim-neutral-150: #EFEFEF; --prim-neutral-200: #E7E7E7; --prim-neutral-300: #D3D3D3;
--prim-neutral-400: #9E9E9E; --prim-neutral-500: #8B8B8B; --prim-neutral-550: #848484;
--prim-neutral-600: #646464; --prim-neutral-650: #515151; --prim-neutral-700: #424242;
--prim-neutral-750: #2C2C2C; --prim-neutral-800: #222222; --prim-neutral-900: #1D1D1F;
--prim-neutral-800-alpha: #22222200;
--prim-blue-solid-25: #F2F9FF; --prim-blue-solid-50: #ECF3FC; --prim-blue-solid-100: #C4DBF6;
--prim-blue-solid-200: #A7C9F2; --prim-blue-solid-300: #7FB1EC; --prim-blue-solid-400: #66A1E8;
--prim-blue-solid-450: #5E99E0; --prim-blue-solid-500: #4597F7; --prim-blue-solid-550: #3486E6;
--prim-blue-solid-600: #3A7ECE; --prim-blue-solid-700: #2D62A0; --prim-blue-solid-750: #234C7C;
--prim-blue-solid-800: #1B3A5F; --prim-blue-solid-850: #0B2A4F; --prim-blue-solid-900: #061A32;
--prim-blue-alpha-90: #2A6AF7E5; --prim-blue-alpha-80: #2A6AF7CC; --prim-blue-alpha-70: #2A6AF7B2;
--prim-blue-alpha-60: #2A6AF799; --prim-blue-alpha-50: #2A6AF780; --prim-blue-alpha-40: #2A6AF766;
--prim-blue-alpha-30: #2A6AF74D; --prim-blue-alpha-20: #2A6AF733; --prim-blue-alpha-10: #2A6AF71A;
--prim-blue-alpha-5: #2A6AF70D; --prim-blue-alpha-3: #2A6AF708;
--prim-white-100: #FFFFFF; --prim-white-90: #FFFFFFE5; --prim-white-80: #FFFFFFCC; --prim-white-70: #FFFFFFB2;
--prim-white-60: #FFFFFF99; --prim-white-50: #FFFFFF80; --prim-white-40: #FFFFFF66; --prim-white-30: #FFFFFF4D;
--prim-white-20: #FFFFFF33; --prim-white-15: #FFFFFF26; --prim-white-10: #FFFFFF1A; --prim-white-5: #FFFFFF0D;
--prim-white-0: #FFFFFF00;
--prim-black-100: #000000; --prim-black-90: #000000E5; --prim-black-80: #000000CC; --prim-black-70: #000000B2;
--prim-black-60: #00000099; --prim-black-50: #00000080; --prim-black-40: #00000066; --prim-black-30: #0000004D;
--prim-black-20: #00000033; --prim-black-15: #00000026; --prim-black-10: #0000001A; --prim-black-5: #0000000D;
--prim-black-3: #00000008;
--prim-orange-solid-25: #FEF6F1; --prim-orange-solid-50: #FEF1E8; --prim-orange-solid-100: #FFDECC;
--prim-orange-solid-200: #FFCDB2; --prim-orange-solid-300: #FFAB80; --prim-orange-solid-400: #FF935A;
--prim-orange-solid-500: #F66616; --prim-orange-solid-600: #CC5514; --prim-orange-solid-700: #B23E00;
--prim-orange-solid-800: #7B1800; --prim-orange-solid-900: #431A02;
--prim-orange-alpha-90: #F35A02E5; --prim-orange-alpha-80: #F35A02CC; --prim-orange-alpha-70: #F35A02B2;
--prim-orange-alpha-60: #F35A0299; --prim-orange-alpha-50: #F35A0280; --prim-orange-alpha-40: #F35A0266;
--prim-orange-alpha-30: #F35A024D; --prim-orange-alpha-20: #F35A0233; --prim-orange-alpha-10: #F35A021A;
--prim-orange-alpha-5: #F35A020D; --prim-orange-alpha-3: #F35A0208;
--prim-sea-turtle-solid-50: #ECF5F5; --prim-sea-turtle-solid-100: #C5DEE0; --prim-sea-turtle-solid-200: #AACFD1;
--prim-sea-turtle-solid-300: #81B9BD; --prim-sea-turtle-solid-400: #69ABB0; --prim-sea-turtle-solid-500: #219FA8;
--prim-sea-turtle-solid-600: #3D898E; --prim-sea-turtle-solid-700: #2F6B6F; --prim-sea-turtle-solid-800: #255356;
--prim-sea-turtle-solid-900: #1A3B3E;
--prim-sea-turtle-alpha-90: #43969CE5; --prim-sea-turtle-alpha-80: #43969CCC; --prim-sea-turtle-alpha-70: #43969CB2;
--prim-sea-turtle-alpha-60: #43969C99; --prim-sea-turtle-alpha-50: #43969C80; --prim-sea-turtle-alpha-40: #43969C66;
--prim-sea-turtle-alpha-30: #43969C4D; --prim-sea-turtle-alpha-20: #43969C33; --prim-sea-turtle-alpha-10: #43969C1A;
--prim-sea-turtle-alpha-5: #43969C0D; --prim-sea-turtle-alpha-3: #43969C08;
--prim-negative-solid-50: #FEEBEB; --prim-negative-solid-100: #FCC0C0; --prim-negative-solid-200: #F9A2A2;
--prim-negative-solid-300: #F87777; --prim-negative-solid-400: #F75D5E; --prim-negative-solid-500: #F63334;
--prim-negative-solid-600: #DF2E2F; --prim-negative-solid-700: #AE2525; --prim-negative-solid-800: #871E1D;
--prim-negative-solid-900: #671616; --prim-negative-solid-950: #500D0D;
--prim-negative-alpha-90: #F63334E5; --prim-negative-alpha-80: #F63334CC; --prim-negative-alpha-70: #F63334B2;
--prim-negative-alpha-60: #F6333499; --prim-negative-alpha-50: #F6333480; --prim-negative-alpha-40: #F6333466;
--prim-negative-alpha-30: #F633344D; --prim-negative-alpha-20: #F6333433; --prim-negative-alpha-10: #F633341A;
--prim-negative-alpha-5: #F633340D;
--prim-positive-solid-50: #E6F4E7; --prim-positive-solid-100: #B0DBB5; --prim-positive-solid-200: #8ACA91;
--prim-positive-solid-300: #54B25E; --prim-positive-solid-400: #34A33F; --prim-positive-solid-500: #008C0E;
--prim-positive-solid-600: #027F0E; --prim-positive-solid-700: #01630C; --prim-positive-solid-800: #024D08;
--prim-positive-solid-900: #013B06;
--prim-positive-alpha-90: #008C0EE5; --prim-positive-alpha-80: #008C0ECC; --prim-positive-alpha-70: #008C0EB2;
--prim-positive-alpha-60: #008C0E99; --prim-positive-alpha-50: #008C0E80; --prim-positive-alpha-40: #008C0E66;
--prim-positive-alpha-30: #008C0E4D; --prim-positive-alpha-20: #008C0E33; --prim-positive-alpha-10: #008C0E1A;
--prim-positive-alpha-5: #008C0E0D;
--prim-yellow-solid-25: #FFF5E5; --prim-yellow-solid-50: #FAECD7; --prim-yellow-solid-100: #EADCC6;
--prim-yellow-solid-200: #D3C4AC; --prim-yellow-solid-300: #CAB08B; --prim-yellow-solid-400: #B18C55;
--prim-yellow-solid-500: #A27635; --prim-yellow-solid-600: #8B5402; --prim-yellow-solid-700: #7E4C02;
--prim-yellow-solid-800: #633C01; --prim-yellow-solid-900: #3A2301;
--prim-yellow-alpha-90: #A27635E5; --prim-yellow-alpha-80: #A27635CC; --prim-yellow-alpha-70: #A27635B2;
--prim-yellow-alpha-60: #A2763599; --prim-yellow-alpha-50: #A2763580; --prim-yellow-alpha-40: #A2763566;
--prim-yellow-alpha-30: #A276354D; --prim-yellow-alpha-20: #A2763533; --prim-yellow-alpha-10: #A276351A;
--prim-yellow-alpha-5: #A276350D;
--prim-purple-solid-25: #F9F4FF; --prim-purple-solid-50: #F5EDFF; --prim-purple-solid-100: #DFC6FF;
--prim-purple-solid-200: #CFAAFF; --prim-purple-solid-300: #B983FF; --prim-purple-solid-400: #AC6BFF;
--prim-purple-solid-500: #9746FF; --prim-purple-solid-600: #8940E8; --prim-purple-solid-700: #6B32B5;
--prim-purple-solid-800: #53278C; --prim-purple-solid-900: #401D6C;
--prim-purple-alpha-90: #9746FFE5; --prim-purple-alpha-80: #9746FFCC; --prim-purple-alpha-70: #9746FFB2;
--prim-purple-alpha-60: #9746FF99; --prim-purple-alpha-50: #9746FF80; --prim-purple-alpha-40: #9746FF66;
--prim-purple-alpha-30: #9746FF4D; --prim-purple-alpha-20: #9746FF33; --prim-purple-alpha-10: #9746FF1A;
--prim-purple-alpha-5: #9746FF0D;
/* ── 0.2 Semantic colour (--col-*) — light-dark(light, dark) ─────────── */
/* Content (text) */
--col-content-primary-default: light-dark(#1D1D1F, #FBFBFB);
--col-content-primary-disabled: light-dark(#9E9E9E, #8B8B8B);
--col-content-primary-inverted: light-dark(#FFFFFF, #1D1D1F);
--col-content-primary-static: #FFFFFF;
--col-content-secondary-default: light-dark(#646464, #8B8B8B);
--col-content-secondary-inverted: light-dark(#9E9E9E, #8B8B8B);
--col-content-secondary-disabled: light-dark(#E7E7E7, #222222);
--col-content-tertiary-default: light-dark(#848484, #9E9E9E);
--col-content-tertiary-inverted: light-dark(#9E9E9E, #848484);
--col-content-success-default: light-dark(#008C0E, #E6F4E7);
--col-content-success-dark: light-dark(#01630C, #E6F4E7);
--col-content-success-inverted: light-dark(#E6F4E7, #008C0E);
--col-content-success-static: light-dark(#34A33F, #54B25E);
--col-content-destructive-default: light-dark(#DF2E2F, #F75D5E);
--col-content-destructive-inverted: light-dark(#F75D5E, #FCC0C0);
--col-content-destructive-static: light-dark(#F75D5E, #F87777);
--col-content-alert-default: light-dark(#8B5402, #CAB08B);
--col-content-alert-inverted: light-dark(#FAECD7, #EADCC6);
--col-content-alert-static: light-dark(#B18C55, #CAB08B);
--col-content-brand-default: light-dark(#3486E6, #7FB1EC);
--col-content-brand-inverted: light-dark(#3A7ECE, #7FB1EC);
--col-content-brand-static: #4597F7;
--col-content-brand-special-case: light-dark(#3486E6, #ECF3FC);
--col-content-purple-default: light-dark(#9746FF, #F5EDFF);
--col-content-purple-hover: light-dark(#AC6BFF, #F5EDFF);
--col-content-purple-inverted: light-dark(#F9F4FF, #53278C);
--col-content-purple-static: light-dark(#AC6BFF, #B983FF);
--col-content-link-default: light-dark(#4597F7, #66A1E8);
/* Background (page planes) */
--col-bg-primary: light-dark(#FFFFFF, #1D1D1F);
--col-bg-brand: light-dark(#FFFFFF, #1B0F07);
--col-bg-primary-alpha: light-dark(#FFFFFF00, #22222200);
--col-bg-secondary: light-dark(#F3F4F6, #2C2C2C);
--col-bg-tertiary: light-dark(#E7E7E7, #424242);
--col-bg-quaternary: light-dark(#FDFDFD, #222222);
--col-bg-inverted: light-dark(#1D1D1F, #FFFFFF);
/* Surface (cards, chips, fills) */
--col-surface-primary-default: light-dark(#FFFFFF, #222222);
--col-surface-primary-inverted: light-dark(#222222, #F3F4F6);
--col-surface-primary-alpha: light-dark(#00000033, #0000004D);
--col-surface-secondary-default: light-dark(#F3F4F6, #2C2C2C);
--col-surface-secondary-hover: light-dark(#F3F4F6, #424242);
--col-surface-secondary-inverted: light-dark(#424242, #D3D3D3);
--col-surface-tertiary-default: light-dark(#E7E7E7, #424242);
--col-surface-tertiary-inverted: light-dark(#424242, #E7E7E7);
--col-surface-quaternary-default: light-dark(#D3D3D3, #8B8B8B);
--col-surface-quaternary-inverted: light-dark(#646464, #424242);
--col-surface-success-default: #008C0E;
--col-surface-success-inverted: light-dark(#E6F4E7, #024D08);
--col-surface-destructive-default: light-dark(#F63334, #DF2E2F);
--col-surface-destructive-inverted:light-dark(#FEEBEB, #500D0D);
--col-surface-alert-default: light-dark(#A27635, #633C01);
--col-surface-alert-inverted: light-dark(#FFF5E5, #633C01);
--col-surface-brand-default: light-dark(#4597F7, #3A7ECE);
--col-surface-brand-hover: light-dark(#3A7ECE, #4597F7);
--col-surface-brand-inverted: light-dark(#ECF3FC, #1B3A5F);
--col-surface-purple-default: light-dark(#F5EDFF, #401D6C);
--col-surface-purple-hover: light-dark(#DFC6FF, #6B32B5);
--col-surface-purple-inverted: #9746FF;
/* Stroke (borders, dividers, rules) */
--col-stroke-primary: light-dark(#F3F4F6, #2C2C2C);
--col-stroke-secondary: light-dark(#E7E7E7, #424242);
--col-stroke-tertiary: light-dark(#D3D3D3, #646464);
--col-stroke-inverted: light-dark(#646464, #E7E7E7);
--col-stroke-alpha: light-dark(#0000000D, #FFFFFF0D);
--col-stroke-brand: light-dark(#4597F7, #66A1E8);
--col-stroke-special-case: light-dark(#3486E6, #ECF3FC);
--col-stroke-destructive: light-dark(#F63334, #F75D5E);
--col-stroke-success: light-dark(#008C0E, #34A33F);
--col-stroke-purple: light-dark(#9746FF, #AC6BFF);
--col-stroke-yellow: light-dark(#A27635, #B18C55);
/* Shadow colours */
--col-shadow-primary: light-dark(#0000001A, #00000066);
--col-shadow-secondary: light-dark(#E7E7E7, #2C2C2C);
--col-shadow-tertiary: light-dark(#F3F4F6, #222222);
--col-shadow-inverted: light-dark(#646464, #D3D3D3);
--col-shadow-brand: light-dark(#C4DBF6, #2D62A0);
--col-shadow-destructive: light-dark(#FCC0C0, #871E1D);
--col-shadow-success: light-dark(#B0DBB5, #024D08);
/* Icon */
--col-icon-primary-default: light-dark(#1D1D1F, #FBFBFB);
--col-icon-primary-inverted: light-dark(#F3F4F6, #1D1D1F);
--col-icon-primary-disabled: light-dark(#CDCDD1, #64646B);
--col-icon-primary-static: #FFFFFF;
--col-icon-secondary-default: light-dark(#9E9E9E, #8B8B8B);
--col-icon-secondary-inverted: light-dark(#FFFFFF, #F3F4F6);
--col-icon-tertiary-default: light-dark(#D3D3D3, #646464);
--col-icon-success-default: light-dark(#008C0E, #34A33F);
--col-icon-success-inverted: #E6F4E7;
--col-icon-destructive-default: light-dark(#DF2E2F, #F75D5E);
--col-icon-destructive-inverted:#FEEBEB;
--col-icon-alert-default: light-dark(#8B5402, #B18C55);
--col-icon-alert-inverted: light-dark(#FAECD7, #EADCC6);
--col-icon-brand-default: light-dark(#3486E6, #66A1E8);
--col-icon-brand-hover: light-dark(#66A1E8, #A7C9F2);
--col-icon-brand-inverted: light-dark(#3A7ECE, #4597F7);
--col-icon-brand-special-case: light-dark(#3486E6, #ECF3FC);
--col-icon-purple-default: light-dark(#9746FF, #AC6BFF);
--col-icon-purple-hover: light-dark(#AC6BFF, #9746FF);
--col-icon-purple-inverted: #F9F4FF;
/* Button */
--col-btn-default-1: light-dark(#4597F7, #3A7ECE);
--col-btn-default-2: #3486E6;
--col-btn-primary-surface-default: light-dark(#4597F7, #3A7ECE);
--col-btn-primary-surface-hover: light-dark(#3486E6, #3A7ECE);
--col-btn-primary-surface-focused: light-dark(#A7C9F2, #66A1E8);
--col-btn-primary-surface-disabled: light-dark(#A7C9F2, #2D62A0);
--col-btn-primary-surface-subtle: light-dark(#F2F9FF, #0B2A4F);
--col-btn-primary-surface-destructive: #F63334;
--col-btn-primary-surface-destructive-hover: #DF2E2F;
--col-btn-primary-surface-destructive-subtle: light-dark(#FEEBEB, #500D0D);
--col-btn-primary-surface-destructive-subtle-hover: light-dark(#F63334, #DF2E2F);
--col-btn-primary-surface-gradient-start: light-dark(#66A1E8, #5E99E0);
--col-btn-primary-surface-gradient-end: #3486E6;
--col-btn-primary-content-default: #FFFFFF;
--col-btn-primary-content-inverted: light-dark(#1D1D1F, #FFFFFF);
--col-btn-primary-content-destructive: light-dark(#DF2E2F, #F75D5E);
--col-btn-primary-content-destructive-hover: light-dark(#DF2E2F, #F63334);
--col-btn-secondary-surface-default: light-dark(#FFFFFF, #2C2C2C);
--col-btn-secondary-surface-hover: light-dark(#F3F4F6, #424242);
--col-btn-secondary-content-default: light-dark(#1D1D1F, #FFFFFF);
--col-btn-tertiary-surface-default: light-dark(#FDFDFD, #2C2C2C);
--col-btn-tertiary-surface-hover: light-dark(#FBFBFB, #424242);
--col-btn-tertiary-content-default: light-dark(#1D1D1F, #FFFFFF);
--col-btn-quaternary-surface-default: light-dark(#FFFFFF00, #00000008);
--col-btn-quaternary-surface-hover: light-dark(#EFEFEF, #2C2C2C);
--col-btn-quaternary-content-default: light-dark(#646464, #8B8B8B);
/* ── 0.3 Typography (--type-*, Figma text styles) ─────────────────────── */
--type-font-family-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--type-font-weight-regular: 400;
--type-font-weight-medium: 500;
--type-font-weight-semibold: 600;
--type-font-weight-bold: 700;
--type-display-2xl: 72px; --type-display-2xl--line-height: 90px; --type-display-2xl--tracking: -0.02em;
--type-display-xl: 60px; --type-display-xl--line-height: 72px; --type-display-xl--tracking: -0.02em;
--type-display-lg: 48px; --type-display-lg--line-height: 56px; --type-display-lg--tracking: -0.02em;
--type-display-md: 36px; --type-display-md--line-height: 44px; --type-display-md--tracking: -0.02em;
--type-display-sm: 30px; --type-display-sm--line-height: 38px; --type-display-sm--tracking: 0;
--type-display-xs: 24px; --type-display-xs--line-height: 32px; --type-display-xs--tracking: 0;
--type-display-xs--tracking-semibold: -0.2px;
--type-text-xl: 20px; --type-text-xl--line-height: 30px; --type-text-xl--tracking: 0;
--type-text-xl--tracking-semibold: -0.21px; --type-text-xl--line-height-semibold: 26px; --type-text-xl--line-height-bold: 26px;
--type-text-lg: 18px; --type-text-lg--line-height: 24px; --type-text-lg--tracking: 0; --type-text-lg--tracking-semibold: -0.21px;
--type-text-md: 16px; --type-text-md--line-height: 24px; --type-text-md--tracking: 0;
--type-text-md--line-height-medium: 22px; --type-text-md--line-height-semibold: 22px; --type-text-md--line-height-bold: 22px;
--type-text-sm: 14px; --type-text-sm--line-height: 20px; --type-text-sm--tracking: 0;
--type-text-xs: 13px; --type-text-xs--line-height: 18px; --type-text-xs--tracking: 0;
--type-text-2xs: 12px; --type-text-2xs--line-height: 16px; --type-text-2xs--tracking: 0; --type-text-2xs--line-height-bold: 18px;
--type-text-3xs: 11px; --type-text-3xs--line-height: 14px; --type-text-3xs--tracking: 0;
--type-caption: 10px; --type-caption--line-height: 13px; --type-caption--tracking: 0;
--type-caption--tracking-medium: 0.3px; --type-caption--tracking-semibold: 0.4px; --type-caption--tracking-bold: 0.35px;
/* Figma-verified doc-block body metric (report.css): Text sm at 21px leading */
--type-body--line-height: 21px;
/* ── 0.4 Spacing (--pad-*) — the only spacing scale ────────────────────── */
--pad-3xs: 2px; --pad-2xs: 4px; --pad-xs: 6px; --pad-sm: 8px;
--pad-md: 10px; --pad-lg: 12px; --pad-xl: 14px; --pad-2xl: 16px;
/* Page-level rhythm (report.css — Figma-verified doc blocks) */
--space-block: 20px; /* .elt-space, divider block height */
--space-figure: 24px; /* margin around tables/charts/callouts */
--space-group: 32px; /* below a section head */
--space-section: 96px; /* between numbered report sections */
--space-section-tight: 56px;
/* ── 0.5 Corner radius (--cr-*, squircle default) ─────────────────────── */
--cr-surface-none: 0px; --cr-surface-3xs: 2px; --cr-surface-2xs: 4px; --cr-surface-xs: 6px;
--cr-surface-sm: 9px; --cr-surface-md: 11px; --cr-surface-lg: 14px; --cr-surface-xlg: 18px;
--cr-surface-2xl: 22px; --cr-surface-3xl: 28px; --cr-surface-4xl: 32px; --cr-surface-full: 1000px;
--cr-btn-xs: 6px; --cr-btn-sm: 9px; --cr-btn-md: 11px; --cr-btn-lg: 11px;
--cr-avatar-micro: 6px; --cr-avatar-xs: 9px; --cr-avatar-sm: 11px; --cr-avatar-md: 16px;
--cr-avatar-lg: 18px; --cr-avatar-2xl: 24px; --cr-avatar-3xl: 32px; --cr-avatar-4xl: 44px;
/* ── 0.6 Component sizes ──────────────────────────────────────────────── */
--comp-btn-size-xs: 24px; --comp-btn-size-sm: 30px; --comp-btn-size-md: 36px; --comp-btn-size-lg: 40px;
--comp-input-height: 38px; /* DS.md §3: text inputs are 38px, never taller */
--comp-actionbar-height: 54px; /* ActionBar.skill.md */
--comp-tabbar-height-sm: 40px; --comp-tabbar-height-md: 48px;
--comp-sidebar-width: 240px; --comp-sidebar-width-collapsed: 72px; --comp-sidebar-brand-height: 56px;
--comp-icon-size-xs: 14px; --comp-icon-size-sm: 16px; --comp-icon-size-md: 18px; --comp-icon-size-lg: 20px; --comp-icon-size-xlg: 24px;
--comp-avatar-micro: 20px; --comp-avatar-xs: 24px; --comp-avatar-sm: 32px; --comp-avatar-md: 40px;
--comp-avatar-lg: 56px; --comp-avatar-xl: 72px; --comp-avatar-2xl: 100px; --comp-avatar-3xl: 140px;
/* ── 0.7 Shadows (foundation/primitives_shadows.json + Figma table block) ─ */
--shadow-xs: 0 2px 4px 0 var(--col-shadow-primary); /* Figma "Table" block: xxs/xs blur, shadow/primary */
--shadow-sm: 0 1px 4px 0 rgba(0,0,0,0.15);
--shadow-md: 0 4px 16px 0 rgba(0,0,0,0.10);
--shadow-lg: 0 4px 20px 0 rgba(0,0,0,0.10);
--shadow-xl: 0 12px 32px 0 rgba(0,0,0,0.10);
--shadow-btn-primary: 0 1px 2px 0 var(--col-shadow-brand);
--shadow-btn-secondary: 0 1px 2px 0 var(--col-shadow-tertiary);
/* ── 0.8 Page / section layout (DS.md §1) ─────────────────────────────── */
--page-padding: var(--pad-xs);
--section-gap: var(--pad-xs);
--section-radius: 6px;
--section-border: none; /* DS.md §1: sections never carry a border */
--report-width: 900px;
--report-width-wide: 1200px;
--report-measure: 68ch;
/* ── 0.9 Z-index ──────────────────────────────────────────────────────── */
--z-base: 0; --z-dropdown: 1000; --z-sticky: 1100; --z-overlay: 1300;
--z-modal: 1400; --z-popover: 1500; --z-toast: 1600; --z-tooltip: 1700;
/* ── 0.10 Motion ──────────────────────────────────────────────────────── */
--motion-duration-instant: 0ms; --motion-duration-fast: 120ms;
--motion-duration-base: 200ms; --motion-duration-slow: 320ms;
--motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
--motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
--motion-ease-decelerate: cubic-bezier(0, 0, 0, 1);
--motion-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
/* ── 0.11 Breakpoints (reference only — cannot be used inside @media) ─── */
--bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px;
/* ── 0.12 Chart tokens (--chart-*) — derived from --prim-*, validated ──── */
/* Categorical: fixed order 1→4, assigned in sequence, never cycled.
Light on #FFFFFF: worst adjacent CVD ΔE 17.3, normal 26.9, all ≥3:1.
Dark on #222222: worst adjacent CVD ΔE 13.8, normal 25.1, all ≥3:1. */
--chart-1: #3486E6; /* blue-550 — brand blue, slot 1 */
--chart-2: #CC5514; /* orange-600 — slot 2 */
--chart-3: #219FA8; /* sea-turtle-500 — slot 3 */
--chart-4: light-dark(#9746FF, #AC6BFF); /* purple-500 / purple-400 — slot 4 */
--chart-other: #8B8B8B; /* neutral-500 — "Other" / folded tail (≥3.4:1 both modes) */
--chart-deemph: light-dark(#D3D3D3, #646464);/* neutral-300 / neutral-600 — context series in an emphasis chart */
/* Tints for area washes and hover lifts */
--chart-1-tint: color-mix(in srgb, var(--chart-1) 12%, transparent);
--chart-2-tint: color-mix(in srgb, var(--chart-2) 12%, transparent);
--chart-3-tint: color-mix(in srgb, var(--chart-3) 12%, transparent);
--chart-4-tint: color-mix(in srgb, var(--chart-4) 12%, transparent);
/* Sequential (continuous magnitude: heatmaps, density). Near-zero recedes toward the surface. */
--chart-seq-1: light-dark(#ECF3FC, #234C7C);
--chart-seq-2: light-dark(#C4DBF6, #2D62A0);
--chart-seq-3: light-dark(#A7C9F2, #3A7ECE);
--chart-seq-4: light-dark(#7FB1EC, #4597F7);
--chart-seq-5: light-dark(#4597F7, #66A1E8);
--chart-seq-6: light-dark(#3A7ECE, #A7C9F2);
--chart-seq-7: light-dark(#2D62A0, #ECF3FC);
/* Ordinal (discrete ordered marks: funnel stages, tiers, bands). Validated --ordinal, both modes. */
--chart-ord-1: light-dark(#7FB1EC, #2D62A0);
--chart-ord-2: light-dark(#4597F7, #3A7ECE);
--chart-ord-3: light-dark(#3A7ECE, #66A1E8);
--chart-ord-4: light-dark(#2D62A0, #A7C9F2);
--chart-ord-5: light-dark(#1B3A5F, #ECF3FC);
/* Diverging (polarity around a baseline): orange ← neutral → blue */
--chart-div-neg: var(--chart-2);
--chart-div-neg-2: color-mix(in oklab, var(--chart-2) 50%, var(--chart-div-mid));
--chart-div-mid: light-dark(#E7E7E7, #424242);
--chart-div-pos-2: color-mix(in oklab, var(--chart-1) 50%, var(--chart-div-mid));
--chart-div-pos: var(--chart-1);
/* Status series — ONLY when the series itself means good / at-risk / bad */
--chart-good: light-dark(#008C0E, #34A33F);
--chart-warn: light-dark(#A27635, #B18C55);
--chart-bad: light-dark(#DF2E2F, #F75D5E);
/* Chart furniture — recessive, never louder than the data */
--chart-surface: var(--col-surface-primary-default);
--chart-grid: var(--col-stroke-secondary);
--chart-axis: var(--col-stroke-tertiary);
--chart-ink: var(--col-content-primary-default);
--chart-ink-2: var(--col-content-secondary-default);
--chart-ink-muted: var(--col-content-tertiary-default);
--chart-bar-max: 24px; /* bars never thicker than this */
--chart-line-w: 2px;
--chart-dot-r: 4px; /* ≥8px marker diameter */
--chart-gap: 2px; /* surface gap between touching fills; surface ring on dots */
}
/* Mode switches — the toggle stamps data-theme on ; `.dark` mirrors the DS class convention */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"], :root.dark { color-scheme: dark; }
/* Local scheme overrides (an inverted band inside a light page, or vice versa) */
.elt-scheme-dark { color-scheme: dark; }
.elt-scheme-light { color-scheme: light; }
/* ── Brand overlays — re-point brand-scoped tokens only ───────────────────── */
[data-brand="triplei"] {
--col-content-brand-default: light-dark(#F66616, #FF935A);
--col-content-brand-inverted: light-dark(#CC5514, #FFAB80);
--col-content-brand-static: #F66616;
--col-content-brand-special-case: light-dark(#F66616, #FEF1E8);
--col-content-link-default: light-dark(#F66616, #FF935A);
--col-bg-brand: light-dark(#F66616, #FF935A);
--col-surface-brand-default: light-dark(#F66616, #CC5514);
--col-surface-brand-hover: light-dark(#F66616, #FFAB80);
--col-surface-brand-inverted: light-dark(#FEF6F1, #431A02);
--col-stroke-brand: light-dark(#F66616, #FFAB80);
--col-stroke-special-case: light-dark(#F66616, #FEF1E8);
--col-shadow-brand: light-dark(#FFCDB2, #B23E00);
--col-icon-brand-default: light-dark(#F66616, #FF935A);
--col-icon-brand-hover: #FF935A;
--col-icon-brand-inverted: light-dark(#CC5514, #F66616);
--col-icon-brand-special-case: light-dark(#F66616, #FEF1E8);
--col-btn-primary-surface-default: #F66616;
--col-btn-primary-surface-hover: #CC5514;
--col-btn-primary-surface-focused: light-dark(#FFCDB2, #FF935A);
--col-btn-primary-surface-disabled: light-dark(#FFAB80, #B23E00);
--col-btn-primary-surface-subtle: light-dark(#FEF1E8, #7B1800);
--col-btn-primary-surface-gradient-start: light-dark(#FF935A, #F66616);
--col-btn-primary-surface-gradient-end: light-dark(#F66616, #CC5514);
}
[data-brand="westmount"] {
--col-content-brand-default: light-dark(#219FA8, #69ABB0);
--col-content-brand-inverted: light-dark(#3D898E, #AACFD1);
--col-content-brand-static: #219FA8;
--col-content-brand-special-case: light-dark(#219FA8, #ECF5F5);
--col-content-link-default: light-dark(#219FA8, #69ABB0);
--col-bg-brand: light-dark(#219FA8, #69ABB0);
--col-surface-brand-default: light-dark(#219FA8, #3D898E);
--col-surface-brand-hover: light-dark(#219FA8, #69ABB0);
--col-surface-brand-inverted: light-dark(#ECF5F5, #1A3B3E);
--col-stroke-brand: light-dark(#219FA8, #81B9BD);
--col-stroke-special-case: light-dark(#219FA8, #ECF5F5);
--col-shadow-brand: light-dark(#AACFD1, #2F6B6F);
--col-icon-brand-default: light-dark(#219FA8, #69ABB0);
--col-icon-brand-hover: #69ABB0;
--col-icon-brand-inverted: light-dark(#3D898E, #219FA8);
--col-icon-brand-special-case: light-dark(#219FA8, #ECF5F5);
--col-btn-primary-surface-default: #219FA8;
--col-btn-primary-surface-hover: #3D898E;
--col-btn-primary-surface-focused: light-dark(#AACFD1, #69ABB0);
--col-btn-primary-surface-disabled: light-dark(#AACFD1, #2F6B6F);
--col-btn-primary-surface-subtle: light-dark(#ECF5F5, #255356);
--col-btn-primary-surface-gradient-start: light-dark(#69ABB0, #219FA8);
--col-btn-primary-surface-gradient-end: light-dark(#219FA8, #3D898E);
}
[data-brand="black"] {
--col-content-brand-default: light-dark(#1D1D1F, #9E9E9E);
--col-content-brand-inverted: light-dark(#424242, #E7E7E7);
--col-content-brand-static: #222222;
--col-content-brand-special-case: light-dark(#222222, #FBFBFB);
--col-content-link-default: light-dark(#1D1D1F, #9E9E9E);
--col-bg-brand: light-dark(#8B8B8B, #9E9E9E);
--col-surface-brand-default: light-dark(#2C2C2C, #424242);
--col-surface-brand-hover: light-dark(#424242, #9E9E9E);
--col-surface-brand-inverted: light-dark(#F3F4F6, #424242);
--col-stroke-brand: light-dark(#8B8B8B, #D3D3D3);
--col-stroke-special-case: light-dark(#8B8B8B, #FBFBFB);
--col-shadow-brand: light-dark(#E7E7E7, #424242);
--col-icon-brand-default: light-dark(#515151, #9E9E9E);
--col-icon-brand-hover: #9E9E9E;
--col-icon-brand-inverted: #515151;
--col-icon-brand-special-case: light-dark(#515151, #FBFBFB);
--col-btn-primary-surface-default: light-dark(#1D1D1F, #FDFDFD);
--col-btn-primary-surface-hover: light-dark(#515151, #646464);
--col-btn-primary-surface-focused: light-dark(#E7E7E7, #9E9E9E);
--col-btn-primary-surface-disabled: light-dark(#E7E7E7, #424242);
--col-btn-primary-surface-subtle: light-dark(#FBFBFB, #2C2C2C);
--col-btn-primary-surface-gradient-start: light-dark(#424242, #9E9E9E);
--col-btn-primary-surface-gradient-end: light-dark(#222222, #8B8B8B);
/* Mirrors the DS source verbatim: the Black brand's dark primary button
surface is #FDFDFD while its content token stays #FFFFFF. Pair the
primary button with `.elt-btn.is-secondary` in Black + dark until the
token source is corrected upstream. */
}
/* ── Radius themes — reshape every --cr-* consumer at once ───────────────── */
[data-radius="rounded"] {
--cr-surface-none: 1000px; --cr-surface-3xs: 1000px; --cr-surface-2xs: 1000px; --cr-surface-xs: 1000px;
--cr-surface-sm: 1000px; --cr-surface-md: 20px; --cr-surface-lg: 24px; --cr-surface-xlg: 1000px;
--cr-surface-2xl: 1000px; --cr-surface-3xl: 1000px; --cr-surface-4xl: 1000px; --cr-surface-full: 1000px;
--cr-btn-xs: 1000px; --cr-btn-sm: 1000px; --cr-btn-md: 1000px; --cr-btn-lg: 1000px;
--cr-avatar-micro: 1000px; --cr-avatar-xs: 1000px; --cr-avatar-sm: 1000px; --cr-avatar-md: 1000px;
--cr-avatar-lg: 1000px; --cr-avatar-2xl: 1000px; --cr-avatar-3xl: 1000px; --cr-avatar-4xl: 1000px;
}
[data-radius="sharp"] {
--cr-surface-none: 0px; --cr-surface-3xs: 0px; --cr-surface-2xs: 0px; --cr-surface-xs: 0px;
--cr-surface-sm: 0px; --cr-surface-md: 0px; --cr-surface-lg: 0px; --cr-surface-xlg: 0px;
--cr-surface-2xl: 0px; --cr-surface-3xl: 0px; --cr-surface-4xl: 0px; --cr-surface-full: 0px;
--cr-btn-xs: 2px; --cr-btn-sm: 4px; --cr-btn-md: 4px; --cr-btn-lg: 4px;
--cr-avatar-micro: 1px; --cr-avatar-xs: 2px; --cr-avatar-sm: 4px; --cr-avatar-md: 4px;
--cr-avatar-lg: 4px; --cr-avatar-2xl: 4px; --cr-avatar-3xl: 4px; --cr-avatar-4xl: 4px;
}
/* --------------------------------------------------------------------------
1. BASE
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 64px;
}
body {
margin: 0;
background: var(--col-bg-secondary);
color: var(--col-content-primary-default);
font-family: var(--type-font-family-sans);
font-size: var(--type-text-sm);
line-height: var(--type-text-sm--line-height);
font-weight: var(--type-font-weight-regular);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
transition: background-color var(--motion-duration-fast) var(--motion-ease-standard),
color var(--motion-duration-fast) var(--motion-ease-standard);
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, video { max-width: 100%; height: auto; }
svg { overflow: visible; }
table { border-collapse: collapse; border-spacing: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--col-content-link-default); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
strong, b { font-weight: var(--type-font-weight-semibold); color: var(--col-content-primary-default); }
small { font-size: var(--type-text-xs); line-height: var(--type-text-xs--line-height); }
hr { border: 0; border-top: 1px solid var(--col-stroke-secondary); margin: var(--pad-md) 0; }
::selection { background: var(--col-surface-brand-inverted); color: var(--col-content-primary-default); }
:focus-visible {
outline: 2px solid var(--col-btn-primary-surface-focused);
outline-offset: 2px;
border-radius: var(--cr-surface-2xs);
}
/* Screen-reader-only text — use for chart summaries and icon-only buttons */
.elt-sr-only {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.elt-hidden { display: none !important; }
/* Reduced motion — mandatory (vault/motion.md) */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* --------------------------------------------------------------------------
2. TYPOGRAPHY — the Figma scale as classes. Default weight: Display = 600,
Text = 400. Weight modifiers apply the per-weight Figma deviations.
-------------------------------------------------------------------------- */
.elt-display-2xl { font-size: var(--type-display-2xl); line-height: var(--type-display-2xl--line-height); letter-spacing: var(--type-display-2xl--tracking); font-weight: var(--type-font-weight-semibold); }
.elt-display-xl { font-size: var(--type-display-xl); line-height: var(--type-display-xl--line-height); letter-spacing: var(--type-display-xl--tracking); font-weight: var(--type-font-weight-semibold); }
.elt-display-lg { font-size: var(--type-display-lg); line-height: var(--type-display-lg--line-height); letter-spacing: var(--type-display-lg--tracking); font-weight: var(--type-font-weight-semibold); }
.elt-display-md { font-size: var(--type-display-md); line-height: var(--type-display-md--line-height); letter-spacing: var(--type-display-md--tracking); font-weight: var(--type-font-weight-semibold); }
.elt-display-sm { font-size: var(--type-display-sm); line-height: var(--type-display-sm--line-height); letter-spacing: var(--type-display-sm--tracking); font-weight: var(--type-font-weight-semibold); }
.elt-display-xs { font-size: var(--type-display-xs); line-height: var(--type-display-xs--line-height); letter-spacing: var(--type-display-xs--tracking-semibold); font-weight: var(--type-font-weight-semibold); }
.elt-display-xs.is-regular, .elt-display-xs.is-medium { letter-spacing: var(--type-display-xs--tracking); }
.elt-text-xl { font-size: var(--type-text-xl); line-height: var(--type-text-xl--line-height); letter-spacing: var(--type-text-xl--tracking); }
.elt-text-lg { font-size: var(--type-text-lg); line-height: var(--type-text-lg--line-height); letter-spacing: var(--type-text-lg--tracking); }
.elt-text-md { font-size: var(--type-text-md); line-height: var(--type-text-md--line-height); letter-spacing: var(--type-text-md--tracking); }
.elt-text-sm { font-size: var(--type-text-sm); line-height: var(--type-text-sm--line-height); letter-spacing: var(--type-text-sm--tracking); }
.elt-text-xs { font-size: var(--type-text-xs); line-height: var(--type-text-xs--line-height); letter-spacing: var(--type-text-xs--tracking); }
.elt-text-2xs { font-size: var(--type-text-2xs); line-height: var(--type-text-2xs--line-height); letter-spacing: var(--type-text-2xs--tracking); }
.elt-text-3xs { font-size: var(--type-text-3xs); line-height: var(--type-text-3xs--line-height); letter-spacing: var(--type-text-3xs--tracking); }
.elt-caption { font-size: var(--type-caption); line-height: var(--type-caption--line-height); letter-spacing: var(--type-caption--tracking); }
.is-regular { font-weight: var(--type-font-weight-regular); }
.is-medium { font-weight: var(--type-font-weight-medium); }
.is-semibold { font-weight: var(--type-font-weight-semibold); }
.is-bold { font-weight: var(--type-font-weight-bold); }
/* Per-weight Figma deviations (text-styles.md) */
.elt-text-xl.is-semibold, .elt-text-xl.is-bold { line-height: var(--type-text-xl--line-height-semibold); letter-spacing: var(--type-text-xl--tracking-semibold); }
.elt-text-lg.is-semibold { letter-spacing: var(--type-text-lg--tracking-semibold); }
.elt-text-md.is-medium, .elt-text-md.is-semibold, .elt-text-md.is-bold { line-height: var(--type-text-md--line-height-medium); }
.elt-text-2xs.is-bold { line-height: var(--type-text-2xs--line-height-bold); }
.elt-caption.is-medium { letter-spacing: var(--type-caption--tracking-medium); }
.elt-caption.is-semibold { letter-spacing: var(--type-caption--tracking-semibold); }
.elt-caption.is-bold { letter-spacing: var(--type-caption--tracking-bold); }
/* Labels in caps — two sizes only */
.elt-kicker {
font-size: var(--type-text-2xs); line-height: var(--type-text-2xs--line-height);
font-weight: var(--type-font-weight-medium); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--col-content-tertiary-default);
}
.elt-eyebrow {
font-size: var(--type-caption); line-height: var(--type-caption--line-height);
font-weight: var(--type-font-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase;
color: var(--col-content-tertiary-default);
}
/* Ink tones — text colour by role. Never colour text with a series colour. */
.tone-primary { color: var(--col-content-primary-default); }
.tone-secondary { color: var(--col-content-secondary-default); }
.tone-tertiary { color: var(--col-content-tertiary-default); }
.tone-brand { color: var(--col-content-brand-default); }
.tone-link { color: var(--col-content-link-default); }
.tone-success { color: var(--col-content-success-default); }
.tone-alert { color: var(--col-content-alert-default); }
.tone-destructive { color: var(--col-content-destructive-default); }
.tone-inverted { color: var(--col-content-primary-inverted); }
/* Figures */
.elt-num { font-variant-numeric: tabular-nums; } /* columns of numbers only */
.elt-num-prop { font-variant-numeric: proportional-nums; } /* large standalone numbers */
/* Overflow control */
.elt-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elt-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.elt-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.elt-measure { max-width: var(--report-measure); }
.elt-measure-wide { max-width: 78ch; }
.elt-nowrap { white-space: nowrap; }
.elt-center { text-align: center; }
.elt-right { text-align: right; }
/* Long-form prose — Figma-verified doc-block metrics (report.css).
Only running text is capped at the 68ch measure; figures, tables, grids, and
blocks that manage their own paragraphs (TL;DR, callouts, cards, KPI tiles,
findings, options, panels, charts, footer) keep the full column. */
.elt-prose { color: var(--col-content-secondary-default); font-size: var(--type-text-sm); line-height: var(--type-body--line-height); }
.elt-prose p:not(.elt-tldr p, .elt-rec p, .elt-panel p, .elt-phase p, .elt-option p, .elt-finding p, .elt-callout p, .elt-card p, .elt-kpi p, .elt-chart p, .elt-details p, .elt-alert p, .elt-report__footer p, .elt-report__dek) { margin: 0 0 18px; max-width: var(--report-measure); }
.elt-prose h1:not([class]) { font-size: var(--type-display-xs); line-height: var(--type-display-xs--line-height); letter-spacing: var(--type-display-xs--tracking-semibold); font-weight: var(--type-font-weight-semibold); color: var(--col-content-primary-default); margin: 0 0 var(--pad-lg); max-width: var(--report-measure); }
.elt-prose h2:not([class]) { font-size: var(--type-text-xl); line-height: var(--type-text-xl--line-height-semibold); letter-spacing: var(--type-text-xl--tracking-semibold); font-weight: var(--type-font-weight-semibold); color: var(--col-content-primary-default); margin: 40px 0 var(--pad-lg); max-width: var(--report-measure); }
.elt-prose h3:not([class]) { font-size: var(--type-text-md); line-height: var(--type-text-md--line-height-semibold); font-weight: var(--type-font-weight-semibold); color: var(--col-content-primary-default); margin: 28px 0 var(--pad-sm); max-width: var(--report-measure); }
.elt-prose h4:not([class]) { font-size: var(--type-text-sm); line-height: var(--type-text-sm--line-height); font-weight: var(--type-font-weight-semibold); color: var(--col-content-primary-default); margin: 20px 0 var(--pad-xs); max-width: var(--report-measure); }
.elt-prose h2:not([class]):first-child, .elt-prose h3:not([class]):first-child, .elt-prose h4:not([class]):first-child { margin-top: 0; }
.elt-prose p.is-lead, .elt-lead { font-size: var(--type-text-md); line-height: var(--type-text-md--line-height); color: var(--col-content-primary-default); }
.elt-prose p.is-small, .elt-small { font-size: var(--type-text-xs); line-height: var(--type-text-xs--line-height); color: var(--col-content-tertiary-default); }
.elt-prose ul:not([class]), .elt-prose ol:not([class]) { padding-left: 22px; margin: 0 0 18px; max-width: var(--report-measure); }
.elt-prose ul:not([class]) > li, .elt-prose ol:not([class]) > li { margin: 0 0 var(--pad-xs); }
.elt-prose ul:not([class]) > li::marker, .elt-prose ol:not([class]) > li::marker { color: var(--col-content-tertiary-default); }
.elt-prose .elt-list, .elt-prose .elt-quote, .elt-prose .elt-h3, .elt-prose .elt-h4, .elt-prose .elt-subhead, .elt-prose .elt-kv { max-width: var(--report-measure); }
.elt-prose strong { color: var(--col-content-primary-default); }
.elt-prose hr:not([class]) { margin: var(--space-block) 0; }
.elt-prose figure:not([class]) { margin: var(--space-figure) 0; }
.elt-prose img { border-radius: var(--cr-surface-2xs); }
/* Inline code chip — Inter, not monospace (the DS ships no mono face) */
.elt-code {
background: var(--col-surface-tertiary-default); color: var(--col-content-primary-default);
border-radius: var(--cr-surface-xs); padding: 1px var(--pad-2xs); font-size: 0.92em; white-space: nowrap;
}
.elt-pre {
background: var(--col-surface-secondary-default); color: var(--col-content-primary-default);
border-radius: var(--cr-surface-sm); padding: var(--pad-lg) var(--pad-2xl); margin: var(--pad-2xl) 0;
font-size: var(--type-text-xs); line-height: var(--type-text-xs--line-height);
white-space: pre; overflow-x: auto; font-variant-numeric: tabular-nums;
}
/* Line-based transcripts and logs wrap instead of scrolling; keep the default
`pre` only where column alignment is itself the evidence (a table dump). */
.elt-pre.is-wrap { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; }
.elt-pre.on-panel { background: var(--col-surface-tertiary-default); }
/* Highlighted phrase — underline + faint amber wash (Figma text-highlight block) */
.elt-mark {
background: color-mix(in srgb, var(--col-surface-alert-inverted) 50%, transparent);
text-decoration: underline; text-decoration-color: var(--col-stroke-yellow);
border-radius: var(--cr-surface-2xs); padding: 0 2px; color: inherit;
}
/* Quote */
.elt-quote {
border-left: 3px solid var(--col-stroke-tertiary); padding: var(--pad-2xs) 0 var(--pad-2xs) 18px;
margin: var(--pad-2xl) 0; font-size: var(--type-text-md); line-height: var(--type-text-md--line-height);
color: var(--col-content-primary-default);
}
.elt-quote cite { display: block; margin-top: var(--pad-sm); font-style: normal; font-size: var(--type-text-xs); color: var(--col-content-tertiary-default); }
/* --------------------------------------------------------------------------
3. LAYOUT
3.1 App shell — DS.md §1 three-layer page. Layer 1 never scrolls; Layer 2
is the ONLY scroller; Layer 3 sections fill, have no border, 6px radius.
-------------------------------------------------------------------------- */
.elt-app { display: flex; flex-direction: column; width: 100%; height: 100dvh; overflow: hidden; background: var(--col-bg-secondary); }
.elt-app__frame { display: flex; flex: 1; min-height: 0; }
.elt-sidebar {
display: flex; flex-direction: column; flex-shrink: 0; width: var(--comp-sidebar-width);
background: var(--col-surface-primary-default); border-right: 1px solid var(--col-stroke-primary);
transition: width var(--motion-duration-base) var(--motion-ease-standard);
}
.elt-sidebar.is-collapsed { width: var(--comp-sidebar-width-collapsed); }
.elt-sidebar__brand { display: flex; align-items: center; gap: var(--pad-sm); height: var(--comp-sidebar-brand-height); padding: 0 var(--pad-2xl); border-bottom: 1px solid var(--col-stroke-primary); flex-shrink: 0; }
.elt-sidebar.is-collapsed .elt-sidebar__brand { justify-content: center; padding: 0; }
.elt-sidebar__footer { padding: var(--pad-sm); border-top: 1px solid var(--col-stroke-primary); flex-shrink: 0; }
.elt-sidenav { display: flex; flex-direction: column; gap: var(--pad-3xs); padding: var(--pad-sm); overflow: auto; flex: 1; min-height: 0; }
.elt-sidenav__group { padding: var(--pad-lg) var(--pad-md) var(--pad-2xs); }
.elt-sidenav__item {
display: flex; align-items: center; gap: var(--pad-md); height: 36px; padding: 0 var(--pad-md);
border-radius: var(--cr-surface-sm); color: var(--col-content-secondary-default);
font-size: var(--type-text-sm); line-height: var(--type-text-sm--line-height); font-weight: var(--type-font-weight-medium);
text-decoration: none; white-space: nowrap; transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard);
}
.elt-sidenav__item:hover { background: var(--col-surface-secondary-default); color: var(--col-content-primary-default); text-decoration: none; }
.elt-sidenav__item.is-active { background: var(--col-surface-brand-inverted); color: var(--col-content-brand-default); }
.elt-sidenav__icon { display: inline-flex; width: var(--comp-icon-size-md); height: var(--comp-icon-size-md); flex-shrink: 0; color: var(--col-icon-secondary-default); }
.elt-sidenav__item.is-active .elt-sidenav__icon { color: var(--col-icon-brand-default); }
.elt-sidenav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.elt-sidebar.is-collapsed .elt-sidenav__label, .elt-sidebar.is-collapsed .elt-sidenav__group, .elt-sidebar.is-collapsed .elt-sidenav__badge { display: none; }
.elt-sidebar.is-collapsed .elt-sidenav__item { justify-content: center; padding: 0; }
/* Below 900px a 240px rail would eat the screen, so the sidebar becomes an
off-canvas drawer: hidden by default, revealed with .is-open, and paired
with an empty .elt-backdrop as the scrim. Collapse is a desktop-only
affordance, so .is-collapsed is neutralised here. The page keeps the full
width because a fixed element is out of the flex flow. */
@media (max-width: 900px) {
.elt-sidebar {
position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--z-modal);
width: var(--comp-sidebar-width); max-width: 86vw;
transform: translateX(-100%); box-shadow: var(--shadow-lg);
transition: transform var(--motion-duration-base) var(--motion-ease-standard);
}
.elt-sidebar.is-open { transform: none; }
.elt-sidebar.is-collapsed { width: var(--comp-sidebar-width); }
.elt-sidebar.is-collapsed .elt-sidenav__label, .elt-sidebar.is-collapsed .elt-sidenav__group { display: block; }
.elt-sidebar.is-collapsed .elt-sidenav__badge { display: inline-flex; }
.elt-sidebar.is-collapsed .elt-sidenav__item { justify-content: flex-start; padding: 0 var(--pad-md); }
.elt-sidebar.is-collapsed .elt-sidebar__brand { justify-content: flex-start; padding: 0 var(--pad-2xl); }
/* A row-mode scroll page (rail + main) has no room to sit side by side, so it
stacks and hands scrolling back to the scroll page, exactly as .is-column does. */
.elt-page__scroll { flex-direction: column; }
.elt-page__scroll > .elt-section { height: auto; flex: 0 0 auto; overflow: visible; }
.elt-page__scroll > .elt-section.is-fill { flex: 1; min-height: 0; overflow: auto; }
.elt-page__scroll > .elt-section.is-rail { flex: 0 0 auto; width: 100%; }
.elt-page__scroll > .elt-section > .elt-section__body.is-scroll { overflow: visible; }
}
.elt-page { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.elt-page__scroll {
display: flex; flex: 1; min-height: 0; overflow: auto;
padding: var(--page-padding); gap: var(--section-gap); background: var(--col-bg-secondary);
}
.elt-page__scroll.is-column { flex-direction: column; }
.elt-section {
display: flex; flex-direction: column; flex: 1; min-width: 0; height: 100%; overflow: auto;
border: var(--section-border); border-radius: var(--section-radius); background: var(--col-surface-primary-default);
}
.elt-section.is-rail { flex: 0 0 var(--rail-width, 72px); }
.elt-section.is-auto { height: auto; flex: 0 0 auto; overflow: visible; }
.elt-page__scroll.is-column > .elt-section { height: auto; flex: 0 0 auto; overflow: visible; }
.elt-page__scroll.is-column > .elt-section.is-fill { flex: 1; min-height: 0; overflow: auto; }
.elt-section__header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pad-lg); padding: var(--pad-lg) var(--pad-2xl); border-bottom: 1px solid var(--col-stroke-primary); flex-shrink: 0; }
.elt-section__title { font-size: var(--type-text-md); line-height: var(--type-text-md--line-height-medium); font-weight: var(--type-font-weight-medium); color: var(--col-content-primary-default); }
.elt-section__sub { font-size: var(--type-text-xs); line-height: var(--type-text-xs--line-height); color: var(--col-content-secondary-default); }
.elt-section__actions { margin-left: auto; display: flex; align-items: center; gap: var(--pad-sm); }
.elt-section__body { flex: 1; min-height: 0; padding: var(--pad-2xl); }
.elt-section__body.is-flush { padding: 0; }
.elt-section__body.is-scroll { overflow: auto; }
.elt-section__footer { display: flex; align-items: center; gap: var(--pad-sm); padding: var(--pad-lg) var(--pad-2xl); border-top: 1px solid var(--col-stroke-primary); flex-shrink: 0; }
/* Layer-3 rows above a table (stats cards): each card bordered on its own — never one shared outer border.
Wraps rather than crushing its cards: 4-up on a desktop, 2-up on a tablet, stacked on a phone. */
.elt-section-row { display: flex; flex-wrap: wrap; gap: var(--section-gap); flex-shrink: 0; }
.elt-section-row > * { flex: 1 1 200px; min-width: 0; }
/* --------------------------------------------------------------------------
3.2 Report shell — one reading column. `.elt-report__paper` is the boxed
page; `body.is-flat` removes the box for a Notion-like flat page.
-------------------------------------------------------------------------- */
.elt-report { max-width: var(--report-width); margin: 0 auto; padding: 72px 24px 110px; }
.elt-report.is-wide { max-width: var(--report-width-wide); }
.elt-report.is-narrow { max-width: 1040px; padding: 96px 48px 160px; }
@media (max-width: 760px) { .elt-report, .elt-report.is-narrow { padding: 40px 16px 96px; } }
.elt-report__paper { background: var(--col-surface-primary-default); border-radius: var(--cr-surface-2xl); padding: clamp(28px, 6vw, 72px); }
body.is-flat { background: var(--col-surface-primary-default); }
body.is-flat .elt-report__paper { background: transparent; border-radius: 0; padding: 0; }
/* Optional aside column for wide reports (sticky TOC / key facts) */
.elt-report__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; }
@media (min-width: 1100px) { .elt-report.is-wide .elt-report__layout { grid-template-columns: minmax(0, 1fr) 220px; } }
.elt-report__aside { position: sticky; top: 24px; }
@media (max-width: 1099px) { .elt-report__aside { position: static; } }
/* Fixed tool cluster (top-right): theme toggle, print, TOC. Required on every report. */
.elt-report__toolbar {
position: fixed; top: 16px; right: 16px; z-index: var(--z-sticky);
display: flex; align-items: center; gap: var(--pad-3xs); padding: var(--pad-2xs);
background: var(--col-surface-primary-default); border: 1px solid var(--col-stroke-secondary);
border-radius: var(--cr-surface-full); box-shadow: var(--shadow-sm);
}
@media (max-width: 480px) { .elt-report__toolbar { top: 10px; right: 10px; } }
/* Reading progress hairline — set --progress from the runtime snippet */
.elt-report__progress { position: fixed; top: 0; left: 0; height: 3px; width: var(--progress, 0%); background: var(--col-surface-brand-default); z-index: var(--z-toast); pointer-events: none; transition: width var(--motion-duration-fast) linear; }
/* Header block */
.elt-report__icon { font-size: var(--type-display-md); line-height: 1; margin-bottom: var(--pad-2xl); }
.elt-report__kicker {
display: flex; align-items: center; gap: var(--pad-lg); margin-bottom: 24px;
font-size: var(--type-text-2xs); line-height: var(--type-text-2xs--line-height); letter-spacing: 0.24em; text-transform: uppercase;
color: var(--col-content-tertiary-default);
}
.elt-report__kicker::after { content: ""; flex: 1; min-width: 48px; height: 1px; background: var(--col-stroke-primary); }
.elt-report__kicker > span { flex: 0 1 auto; }
.elt-report__title {
font-size: var(--type-display-xs); line-height: var(--type-display-xs--line-height); letter-spacing: var(--type-display-xs--tracking-semibold);
font-weight: var(--type-font-weight-semibold); color: var(--col-content-primary-default); max-width: 24ch; text-wrap: balance;
}
.elt-report__title.is-large { font-size: var(--type-display-sm); line-height: var(--type-display-sm--line-height); letter-spacing: var(--type-display-sm--tracking); max-width: 22ch; }
.elt-report__dek { margin-top: 20px; max-width: 62ch; font-size: var(--type-text-lg); line-height: 1.6; color: var(--col-content-secondary-default); text-wrap: pretty; }
.elt-report__meta {
display: flex; flex-wrap: wrap; gap: var(--pad-sm) 28px; margin-top: 28px; padding-top: var(--pad-2xl);
border-top: 1px solid var(--col-stroke-primary); font-size: var(--type-text-2xs); line-height: var(--type-text-2xs--line-height); color: var(--col-content-tertiary-default);
}
.elt-report__meta > div { display: flex; gap: var(--pad-xs); }
.elt-report__meta dt { font-weight: var(--type-font-weight-semibold); color: var(--col-content-primary-default); }
.elt-report__meta dd { margin: 0; }
.elt-report__meta.is-stacked { flex-direction: column; gap: var(--pad-xs); }
/* TL;DR — exactly one, straight after the header */
.elt-tldr { margin-top: 40px; background: var(--col-surface-secondary-default); border-radius: var(--cr-surface-xlg); padding: 28px 30px; }
.elt-tldr__label { font-size: var(--type-text-2xs); letter-spacing: 0.14em; text-transform: uppercase; font-weight: var(--type-font-weight-semibold); color: var(--col-content-tertiary-default); margin-bottom: var(--pad-lg); }
.elt-tldr p { font-size: var(--type-text-md); line-height: 1.65; color: var(--col-content-secondary-default); max-width: 78ch; }
.elt-tldr p + p { margin-top: var(--pad-lg); }
.elt-tldr strong { color: var(--col-content-primary-default); }
.elt-tldr__points { list-style: none; margin: var(--pad-lg) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--pad-sm); }
.elt-tldr__points li { position: relative; padding-left: 18px; font-size: var(--type-text-sm); line-height: var(--type-body--line-height); color: var(--col-content-secondary-default); }
.elt-tldr__points li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--col-surface-brand-default); }
@media (max-width: 480px) { .elt-tldr { padding: 20px; } }
/* Numbered sections */
.elt-sec { margin-top: var(--space-section); }
.elt-sec.is-tight { margin-top: var(--space-section-tight); }
.elt-sec__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pad-md); padding-bottom: 20px; margin-bottom: var(--space-group); border-bottom: 1px solid var(--col-stroke-primary); }
.elt-sec__num { flex-shrink: 0; font-size: var(--type-text-md); font-weight: var(--type-font-weight-regular); color: var(--col-content-tertiary-default); font-variant-numeric: tabular-nums; }
.elt-sec__title { font-size: var(--type-text-xl); line-height: var(--type-text-xl--line-height-semibold); letter-spacing: var(--type-text-xl--tracking-semibold); font-weight: var(--type-font-weight-semibold); color: var(--col-content-primary-default); }
.elt-sec__sub { flex-basis: 100%; font-size: var(--type-text-xs); line-height: var(--type-text-xs--line-height); color: var(--col-content-tertiary-default); }
.elt-sec__aside { margin-left: auto; }
.elt-h3 { font-size: var(--type-text-md); line-height: var(--type-text-md--line-height-semibold); font-weight: var(--type-font-weight-semibold); color: var(--col-content-primary-default); margin: 28px 0 var(--pad-sm); }
.elt-h4 { font-size: var(--type-text-sm); line-height: var(--type-text-sm--line-height); font-weight: var(--type-font-weight-semibold); color: var(--col-content-primary-default); margin: 20px 0 var(--pad-xs); }
.elt-subhead { font-size: var(--type-caption); font-weight: var(--type-font-weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--col-content-tertiary-default); margin: 22px 0 10px; }
.elt-subhead:first-child { margin-top: 0; }
/* Sticky section nav — for reports with ≥4 sections. Runtime snippet sets .is-active */
.elt-report__nav {
position: sticky; top: 0; z-index: var(--z-sticky); display: flex; gap: var(--pad-3xs); overflow-x: auto;
background: var(--col-surface-primary-default); border-bottom: 1px solid var(--col-stroke-primary);
padding: var(--pad-sm) 0; margin: 0 0 var(--pad-sm); scrollbar-width: none;
}
.elt-report__nav::-webkit-scrollbar { display: none; }
.elt-report__nav a {
flex-shrink: 0; font-size: var(--type-text-2xs); font-weight: var(--type-font-weight-medium); color: var(--col-content-tertiary-default);
text-decoration: none; padding: var(--pad-sm) var(--pad-lg); border-radius: var(--cr-surface-xs); white-space: nowrap;
}
.elt-report__nav a:hover, .elt-report__nav a.is-active { color: var(--col-content-brand-default); background: var(--col-surface-brand-inverted); }
/* Side TOC (inside .elt-report__aside) */
.elt-toc { display: flex; flex-direction: column; gap: var(--pad-3xs); }
.elt-toc__label { margin-bottom: var(--pad-xs); }
.elt-toc a { display: block; font-size: var(--type-text-xs); line-height: var(--type-text-xs--line-height); color: var(--col-content-tertiary-default); padding: var(--pad-xs) var(--pad-md); border-left: 2px solid var(--col-stroke-primary); text-decoration: none; }
.elt-toc a:hover { color: var(--col-content-primary-default); }
.elt-toc a.is-active { color: var(--col-content-brand-default); border-left-color: var(--col-stroke-brand); }
/* Footer */
.elt-report__footer { margin-top: 56px; padding-top: var(--pad-2xl); border-top: 1px solid var(--col-stroke-primary); font-size: var(--type-caption); line-height: 1.7; color: var(--col-content-tertiary-default); }
.elt-report__footer .elt-report__disclaimer { margin-top: var(--pad-lg); font-size: var(--type-text-2xs); font-style: italic; max-width: 80ch; }
.elt-report__footer .elt-logo { margin-bottom: var(--pad-lg); }
/* --------------------------------------------------------------------------
3.3 Generic composition — stacks, rows, grids. Gaps come from the scale.
-------------------------------------------------------------------------- */
.elt-stack { display: flex; flex-direction: column; gap: var(--gap, var(--pad-lg)); }
.elt-row { display: flex; align-items: center; gap: var(--gap, var(--pad-sm)); min-width: 0; }
.elt-row.is-between { justify-content: space-between; }
.elt-row.is-end { justify-content: flex-end; }
.elt-row.is-start { align-items: flex-start; }
.elt-row.is-wrap { flex-wrap: wrap; }
.elt-row.is-baseline { align-items: baseline; }
.elt-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--pad-sm)); }
.elt-spacer { flex: 1; }
.elt-grid { display: grid; gap: var(--gap, 16px); grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr)); }
.elt-grid.cols-2 { --cols: 2; } .elt-grid.cols-3 { --cols: 3; } .elt-grid.cols-4 { --cols: 4; }
.elt-grid.cols-5 { --cols: 5; } .elt-grid.cols-6 { --cols: 6; } .elt-grid.cols-12 { --cols: 12; }
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; } .span-8 { grid-column: span 8; } .span-12 { grid-column: 1 / -1; }
@media (max-width: 900px) {
.elt-grid.cols-4, .elt-grid.cols-5 { --cols: 2; } .elt-grid.cols-6 { --cols: 3; } .elt-grid.cols-12 { --cols: 6; }
.span-8 { grid-column: span 6; }
}
@media (max-width: 640px) {
.elt-grid.cols-2, .elt-grid.cols-3, .elt-grid.cols-4, .elt-grid.cols-5 { --cols: 1; }
.elt-grid.cols-6 { --cols: 2; } .elt-grid.cols-12 { --cols: 4; }
.span-2, .span-3, .span-4, .span-6, .span-8 { grid-column: 1 / -1; }
}
.gap-3xs { --gap: var(--pad-3xs); } .gap-2xs { --gap: var(--pad-2xs); } .gap-xs { --gap: var(--pad-xs); }
.gap-sm { --gap: var(--pad-sm); } .gap-md { --gap: var(--pad-md); } .gap-lg { --gap: var(--pad-lg); }
.gap-xl { --gap: var(--pad-xl); } .gap-2xl { --gap: var(--pad-2xl); } .gap-section { --gap: var(--section-gap); }
.gap-figure { --gap: var(--space-figure); }
/* Text beside a figure */
.elt-two-col { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start; margin: var(--space-figure) 0; }
.elt-two-col.is-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* A thumbnail beside its analysis: the media column stays small so the block
still reads as one unit. Collapses with the rest of .elt-two-col at 800px. */
.elt-two-col.is-media { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; }
.elt-two-col.is-media > .elt-figure { margin: 0; }
.elt-two-col.is-reverse > :first-child { order: 2; }
.elt-two-col.is-stretch { align-items: stretch; }
.elt-two-col.is-stretch > * { display: flex; flex-direction: column; min-width: 0; }
.elt-two-col.is-stretch > * > :last-child { flex: 1 1 auto; }
@media (max-width: 800px) { .elt-two-col, .elt-two-col.is-even, .elt-two-col.is-media { grid-template-columns: minmax(0, 1fr); } .elt-two-col.is-reverse > :first-child { order: 0; } }
.elt-sticky { position: sticky; top: var(--sticky-top, 16px); }
.elt-fullbleed { max-width: none; width: 100%; }
.elt-space { height: var(--space-block); }
.elt-space.is-sm { height: var(--pad-lg); }
.elt-space.is-lg { height: 40px; }
.elt-divider { border: 0; border-top: 1px solid var(--col-stroke-secondary); margin: var(--pad-md) 0; }
.elt-divider.is-labeled { display: flex; align-items: center; gap: var(--pad-sm); border: 0; font-size: var(--type-text-2xs); color: var(--col-content-tertiary-default); }
.elt-divider.is-labeled::before, .elt-divider.is-labeled::after { content: ""; flex: 1; border-top: 1px solid var(--col-stroke-secondary); }
.elt-divider.is-vertical { border: 0; border-left: 1px solid var(--col-stroke-secondary); align-self: stretch; margin: 0 var(--pad-sm); width: 0; }
/* --------------------------------------------------------------------------
4. SURFACES — cards, panels, callouts, alerts, findings, options, details
-------------------------------------------------------------------------- */
/* Card (Card.tsx): white surface, secondary stroke, 11px radius */
.elt-card { background: var(--col-surface-primary-default); border: 1px solid var(--col-stroke-secondary); border-radius: var(--cr-surface-md); overflow: hidden; min-width: 0; }
.elt-card.is-panel { background: var(--col-surface-secondary-default); border-color: transparent; }
.elt-card.is-elevated { box-shadow: var(--shadow-xs); }
.elt-card.is-round { border-radius: var(--cr-surface-xlg); }
.elt-card.is-interactive { cursor: pointer; transition: border-color var(--motion-duration-fast) var(--motion-ease-standard), box-shadow var(--motion-duration-fast) var(--motion-ease-standard); }
.elt-card.is-interactive:hover { border-color: var(--col-stroke-tertiary); box-shadow: var(--shadow-xs); }
.elt-card.is-selected { box-shadow: inset 0 0 0 1.5px var(--col-stroke-brand); }
.elt-card__header { display: flex; flex-direction: column; gap: var(--pad-2xs); padding: var(--pad-2xl) var(--pad-2xl) 0; }
.elt-card__header.is-row { flex-direction: row; align-items: center; gap: var(--pad-lg); }
.elt-card__title { font-size: var(--type-text-md); line-height: var(--type-text-md--line-height-medium); font-weight: var(--type-font-weight-medium); color: var(--col-content-primary-default); }
.elt-card__desc { font-size: var(--type-text-xs); line-height: var(--type-text-xs--line-height); color: var(--col-content-secondary-default); }
.elt-card__actions { margin-left: auto; display: flex; align-items: center; gap: var(--pad-sm); }
.elt-card__body { padding: var(--pad-2xl); }
.elt-card__body.is-flush { padding: 0; }
.elt-card__footer { display: flex; align-items: center; gap: var(--pad-sm); padding: 0 var(--pad-2xl) var(--pad-2xl); }
.elt-card__footer.is-bordered { border-top: 1px solid var(--col-stroke-primary); padding-top: var(--pad-lg); }
/* Panel — a quiet tinted block with no border (fact cards, chart frames, asides) */
.elt-panel { background: var(--col-surface-secondary-default); border-radius: var(--cr-surface-lg); padding: 22px 24px; min-width: 0; }
.elt-panel__label { display: block; margin-bottom: 10px; }
.elt-panel p { font-size: var(--type-text-sm); line-height: 1.6; color: var(--col-content-secondary-default); }
.elt-panel p strong { color: var(--col-content-primary-default); }
.elt-panel__source { display: block; margin-top: 10px; font-size: var(--type-text-2xs); color: var(--col-content-tertiary-default); }
/* Callout — one highlighted aside per point; amber by default */
.elt-callout {
display: flex; gap: var(--pad-lg); margin: 22px 0; padding: 18px 22px;
border-left: 3px solid var(--col-stroke-yellow); background: var(--col-surface-alert-inverted);
border-radius: 0 var(--cr-surface-sm) var(--cr-surface-sm) 0;
font-size: var(--type-text-sm); line-height: 1.6; color: var(--col-content-primary-default);
}
.elt-callout b, .elt-callout strong { color: var(--col-content-alert-default); }
.elt-callout__icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: var(--col-icon-alert-default); }
.elt-callout__body { flex: 1; min-width: 0; }
.elt-callout__title { display: block; font-weight: var(--type-font-weight-semibold); color: var(--col-content-primary-default); margin-bottom: var(--pad-3xs); }
.elt-callout.is-brand { border-left-color: var(--col-stroke-brand); background: var(--col-surface-brand-inverted); }
.elt-callout.is-brand b, .elt-callout.is-brand strong { color: var(--col-content-brand-default); }
.elt-callout.is-brand .elt-callout__icon { color: var(--col-icon-brand-default); }
.elt-callout.is-success { border-left-color: var(--col-stroke-success); background: var(--col-surface-success-inverted); }
.elt-callout.is-success b, .elt-callout.is-success strong { color: var(--col-content-success-default); }
.elt-callout.is-success .elt-callout__icon { color: var(--col-icon-success-default); }
.elt-callout.is-destructive { border-left-color: var(--col-stroke-destructive); background: var(--col-surface-destructive-inverted); }
.elt-callout.is-destructive b, .elt-callout.is-destructive strong { color: var(--col-content-destructive-default); }
.elt-callout.is-destructive .elt-callout__icon { color: var(--col-icon-destructive-default); }
.elt-callout.is-neutral { border-left-color: var(--col-stroke-tertiary); background: var(--col-surface-secondary-default); }
.elt-callout.is-neutral b, .elt-callout.is-neutral strong { color: var(--col-content-primary-default); }
.elt-callout.is-neutral .elt-callout__icon { color: var(--col-icon-secondary-default); }
@media (max-width: 480px) { .elt-callout { padding: 14px 16px; gap: var(--pad-sm); } }
/* Alert (Alert.tsx): in-page banner. role="alert" for error/warning, role="status" otherwise */
.elt-alert {
display: flex; align-items: flex-start; gap: var(--pad-md); padding: var(--pad-lg) var(--pad-2xl);
border: 1px solid var(--col-stroke-secondary); border-radius: var(--cr-surface-sm); background: var(--col-bg-primary);
font-size: var(--type-text-xs); line-height: var(--type-text-xs--line-height);
}
.elt-alert__icon { flex-shrink: 0; width: 18px; height: 18px; color: var(--col-icon-secondary-default); }
.elt-alert__content { flex: 1; min-width: 0; color: var(--col-content-secondary-default); }
.elt-alert__title { display: block; font-size: var(--type-text-sm); line-height: var(--type-text-sm--line-height); font-weight: var(--type-font-weight-semibold); color: var(--col-content-primary-default); }
.elt-alert__close { margin-left: auto; flex-shrink: 0; }
.elt-alert.is-success { background: var(--col-surface-success-inverted); }
.elt-alert.is-success .elt-alert__icon { color: var(--col-icon-success-default); }
.elt-alert.is-error { background: var(--col-surface-destructive-inverted); }
.elt-alert.is-error .elt-alert__icon { color: var(--col-icon-destructive-default); }
.elt-alert.is-warning { background: var(--col-surface-alert-inverted); }
.elt-alert.is-warning .elt-alert__icon { color: var(--col-icon-alert-default); }
.elt-alert.is-info { background: var(--col-surface-brand-inverted); }
.elt-alert.is-info .elt-alert__icon { color: var(--col-icon-brand-default); }
/* Finding card — one reported item (bug, risk, insight) with an optional resolution line */
.elt-finding { background: var(--col-surface-secondary-default); border-radius: var(--cr-surface-lg); padding: 24px 26px; margin: 20px 0; }
.elt-finding__tag { display: inline-block; font-size: var(--type-caption); line-height: var(--type-caption--line-height); font-weight: var(--type-font-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--col-content-destructive-default); margin-bottom: var(--pad-sm); }
.elt-finding__tag.is-warn { color: var(--col-content-alert-default); }
.elt-finding__tag.is-info { color: var(--col-content-brand-default); }
.elt-finding__tag.is-good { color: var(--col-content-success-default); }
.elt-finding__tag.is-dim { color: var(--col-content-tertiary-default); }
.elt-finding__title { font-size: var(--type-text-lg); line-height: var(--type-text-lg--line-height); font-weight: var(--type-font-weight-semibold); letter-spacing: var(--type-text-lg--tracking-semibold); color: var(--col-content-primary-default); }
.elt-finding__divider { border: 0; border-top: 1px solid var(--col-stroke-secondary); margin: 18px 0; }
.elt-finding__body { font-size: var(--type-text-sm); line-height: 1.65; color: var(--col-content-secondary-default); }
.elt-finding__body strong { color: var(--col-content-primary-default); }
.elt-finding__fix { display: block; margin-top: var(--pad-lg); font-size: var(--type-text-sm); line-height: 1.65; color: var(--col-content-success-default); }
.elt-finding__fix b { color: inherit; }
.elt-finding__meta { display: flex; flex-wrap: wrap; gap: var(--pad-xs); margin-top: var(--pad-lg); }
@media (max-width: 480px) { .elt-finding { padding: 18px; } }
/* Recommendation — exactly one, in the final section */
.elt-rec { margin-top: var(--pad-lg); background: var(--col-surface-success-inverted); border-radius: var(--cr-surface-lg); padding: 26px 28px; }
.elt-rec__title { font-size: var(--type-text-xl); line-height: var(--type-text-xl--line-height-semibold); letter-spacing: var(--type-text-xl--tracking-semibold); font-weight: var(--type-font-weight-semibold); color: var(--col-content-success-default); margin-bottom: 10px; }
.elt-rec p { font-size: var(--type-text-md); line-height: 1.6; color: var(--col-content-primary-default); }
.elt-rec p + p { margin-top: var(--pad-md); }
.elt-rec.is-brand { background: var(--col-surface-brand-inverted); }
.elt-rec.is-brand .elt-rec__title { color: var(--col-content-brand-default); }
.elt-rec.is-alert { background: var(--col-surface-alert-inverted); }
.elt-rec.is-alert .elt-rec__title { color: var(--col-content-alert-default); }
.elt-rec__actions { display: flex; flex-wrap: wrap; gap: var(--pad-sm); margin-top: var(--pad-2xl); }
@media (max-width: 480px) { .elt-rec { padding: 20px; } }
/* Option card — one candidate approach: letter, title, chip, stat strip, body */
.elt-option { border-radius: var(--cr-surface-xlg); background: var(--col-surface-secondary-default); margin: 24px 0; overflow: hidden; }
.elt-option.is-recommended { box-shadow: inset 0 0 0 1.5px var(--col-stroke-brand); }
.elt-option__head { padding: 24px 26px 18px; border-bottom: 1px solid var(--col-stroke-primary); }
.elt-option__row { display: flex; align-items: center; gap: var(--pad-lg); flex-wrap: wrap; margin-bottom: 10px; }
.elt-option__letter { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: var(--type-text-sm); font-weight: var(--type-font-weight-bold); background: var(--col-surface-tertiary-default); border-radius: var(--cr-surface-sm); color: var(--col-content-primary-default); }
.elt-option.is-recommended .elt-option__letter { background: var(--col-surface-brand-default); color: var(--col-content-primary-static); }
.elt-option__title { flex: 1; min-width: 200px; font-size: var(--type-text-xl); line-height: var(--type-text-xl--line-height-bold); letter-spacing: -0.01em; font-weight: var(--type-font-weight-bold); color: var(--col-content-primary-default); }
.elt-option__summary { font-size: var(--type-text-sm); line-height: var(--type-body--line-height); color: var(--col-content-secondary-default); max-width: 74ch; }
.elt-stat-strip, .elt-option__stats { display: flex; flex-wrap: wrap; gap: 1px; background: var(--col-stroke-primary); border-bottom: 1px solid var(--col-stroke-primary); }
.elt-stat-strip__cell, .elt-option__stat { flex: 1 1 140px; background: var(--col-surface-primary-default); padding: var(--pad-md) var(--pad-lg); }
.elt-stat-strip__cell .k, .elt-option__stat .k { display: block; font-size: var(--type-caption); letter-spacing: var(--type-caption--tracking-medium); text-transform: uppercase; font-weight: var(--type-font-weight-medium); color: var(--col-content-tertiary-default); margin-bottom: var(--pad-3xs); }
.elt-stat-strip__cell .v, .elt-option__stat .v { display: block; font-size: var(--type-text-sm); font-weight: var(--type-font-weight-semibold); color: var(--col-content-primary-default); }
/* Stand-alone strip: framed on all sides. `.is-lg` when the values are the point
of the block rather than a footnote to it; every cell gets the same size, so
hierarchy comes from label against value, never from one number over another. */
.elt-stat-strip { border: 1px solid var(--col-stroke-primary); border-radius: var(--cr-surface-xs); overflow: hidden; margin: var(--space-figure) 0; }
/* Cells are columns with the value pinned to the bottom, so a label that wraps
to two lines never pushes its value off the row's shared baseline. */
.elt-stat-strip__cell { display: flex; flex-direction: column; }
.elt-stat-strip__cell .v { margin-top: auto; }
.elt-stat-strip.is-lg .elt-stat-strip__cell { flex-basis: 110px; }
.elt-stat-strip.is-lg .elt-stat-strip__cell .v { font-size: var(--type-text-xl); line-height: var(--type-text-xl--line-height); font-variant-numeric: tabular-nums; }
.elt-stat-strip.is-lg .elt-stat-strip__cell .v small { font-size: var(--type-text-sm); font-weight: var(--type-font-weight-regular); color: var(--col-content-secondary-default); }
.elt-stat-strip .elt-tag { vertical-align: middle; }
.elt-option__body { padding: 22px 24px; }
@media (max-width: 480px) { .elt-option__head, .elt-option__body { padding: 18px; } }
/* Collapsible block — …
…
*/
.elt-cols__bar.is-stack { display: flex; flex-direction: column-reverse; gap: var(--chart-gap); background: transparent; border-radius: 0; overflow: hidden; }
.elt-cols__bar.is-stack > i { display: block; flex: var(--v, 1) 1 0; background: var(--series, var(--chart-1)); min-height: 1px; }
.elt-cols__bar.is-stack > i:last-child { border-radius: var(--cr-surface-2xs) var(--cr-surface-2xs) 0 0; }
/* Group: */
.elt-cols__group { display: flex; align-items: flex-end; justify-content: center; gap: var(--chart-gap); width: 100%; height: 100%; }
.elt-cols__group .elt-cols__bar { flex: 1; max-width: 18px; }
.elt-cols__value { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: var(--type-text-2xs); font-weight: var(--type-font-weight-semibold); color: var(--col-content-primary-default); font-variant-numeric: tabular-nums; white-space: nowrap; }
.elt-cols__col .elt-cols__value { bottom: auto; top: calc(100% - var(--v, 0%) - 20px); }
.elt-cols__label { position: absolute; top: calc(100% + 6px); left: 0; right: 0; text-align: center; font-size: var(--type-text-3xs); line-height: var(--type-text-3xs--line-height); color: var(--col-content-tertiary-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elt-cols__yaxis { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; padding-bottom: 24px; margin-right: var(--pad-2xs); font-size: var(--type-text-3xs); color: var(--col-content-tertiary-default); font-variant-numeric: tabular-nums; text-align: right; flex: 0 0 auto; }
/* Heatmap — CSS grid; each cell sets --v in [0,1] (or [-1,1] for .is-diverging) */
.elt-heatmap { display: grid; grid-template-columns: max-content repeat(var(--cols, 7), minmax(0, 1fr)); gap: var(--chart-gap); align-items: stretch; margin: var(--space-figure) 0; font-size: var(--type-text-3xs); line-height: var(--type-text-3xs--line-height); }
.elt-heatmap__corner { min-width: 0; }
.elt-heatmap__colhead { text-align: center; color: var(--col-content-tertiary-default); padding-bottom: var(--pad-2xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elt-heatmap__rowhead { display: flex; align-items: center; color: var(--col-content-secondary-default); padding-right: var(--pad-sm); white-space: nowrap; }
.elt-heatmap__cell { position: relative; min-height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--cr-surface-2xs); color: var(--chart-ink); font-variant-numeric: tabular-nums; background: color-mix(in oklab, var(--chart-seq-7) calc(var(--v, 0) * 100%), var(--chart-seq-1)); cursor: default; }
.elt-heatmap__cell.is-hi { color: light-dark(#FFFFFF, #1D1D1F); }
.elt-heatmap__cell.is-empty { background: transparent; box-shadow: inset 0 0 0 1px var(--col-stroke-primary); color: var(--col-content-tertiary-default); }
.elt-heatmap__cell:hover { box-shadow: inset 0 0 0 2px var(--chart-ink); }
.elt-heatmap.is-square .elt-heatmap__cell { aspect-ratio: 1; min-height: 0; }
.elt-heatmap.is-diverging .elt-heatmap__cell { background: color-mix(in oklab, var(--chart-div-pos) calc(max(var(--v, 0), 0) * 100%), color-mix(in oklab, var(--chart-div-neg) calc(max(calc(-1 * var(--v, 0)), 0) * 100%), var(--chart-div-mid))); }
.elt-heatmap.is-diverging .elt-heatmap__cell.is-hi { color: var(--col-content-primary-static); }
.elt-heatmap.is-mute-labels .elt-heatmap__cell { font-size: 0; }
/* Sparkline — 12-point trend inside a KPI tile or table cell */
.elt-sparkline { display: block; width: 100%; height: 32px; }
.elt-sparkline svg { width: 100%; height: 100%; display: block; overflow: visible; }
.elt-sparkline .is-line { fill: none; stroke: var(--series, var(--chart-1)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.elt-sparkline .is-area { fill: var(--series, var(--chart-1)); fill-opacity: 0.10; stroke: none; }
.elt-sparkline .is-deemph { stroke: var(--chart-deemph); }
.elt-sparkline circle { fill: var(--series, var(--chart-1)); stroke: var(--chart-surface); stroke-width: 2; }
.elt-sparkline.is-cell { height: 20px; width: 80px; }
/* Dumbbell — before → after per item (one hue, two shades) */
.elt-dumbbell { display: grid; grid-template-columns: minmax(80px, max-content) minmax(0, 1fr) max-content; gap: var(--pad-sm) var(--pad-lg); align-items: center; margin: var(--space-figure) 0; font-size: var(--type-text-xs); line-height: var(--type-text-xs--line-height); }
.elt-dumbbell__row { display: contents; }
.elt-dumbbell__label { color: var(--col-content-secondary-default); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elt-dumbbell__track { position: relative; height: 20px; }
.elt-dumbbell__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--chart-grid); }
.elt-dumbbell__link { position: absolute; top: 50%; left: min(var(--a, 0%), var(--b, 0%)); width: max(calc(var(--b, 0%) - var(--a, 0%)), calc(var(--a, 0%) - var(--b, 0%))); height: 2px; transform: translateY(-50%); background: var(--chart-deemph); }
.elt-dumbbell__pt { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--series, var(--chart-1)); box-shadow: 0 0 0 2px var(--chart-surface); }
.elt-dumbbell__pt.is-a { left: var(--a, 0%); --series: var(--chart-seq-4); }
.elt-dumbbell__pt.is-b { left: var(--b, 0%); --series: var(--chart-1); }
.elt-dumbbell__value { color: var(--col-content-primary-default); font-weight: var(--type-font-weight-medium); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.elt-dumbbell__value small { color: var(--col-content-tertiary-default); font-weight: var(--type-font-weight-regular); }
/* Donut — part-to-whole at a glance ONLY (≤4 segments, no close values). --stops is a conic-gradient stop list. */
.elt-donut { position: relative; width: var(--size, 120px); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--stops, var(--chart-1) 0 100%)); -webkit-mask: radial-gradient(circle, transparent 58%, #000 calc(58% + 1px)); mask: radial-gradient(circle, transparent 58%, #000 calc(58% + 1px)); flex-shrink: 0; }
.elt-donut-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--size, 120px); }
.elt-donut-wrap .elt-donut { --size: 100%; width: 100%; }
.elt-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.elt-donut__center b { font-size: var(--type-text-xl); line-height: 1.1; font-weight: var(--type-font-weight-semibold); color: var(--col-content-primary-default); font-variant-numeric: proportional-nums; }
.elt-donut__center small { font-size: var(--type-text-3xs); color: var(--col-content-tertiary-default); }
.elt-donut-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: var(--space-figure) 0; }
/* Waffle — 10×10 unit grid for one or two percentages ("3 in 10 students") */
.elt-waffle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; width: min(100%, 160px); aspect-ratio: 1; }
.elt-waffle i { display: block; border-radius: 2px; background: var(--chart-deemph); aspect-ratio: 1; }
.elt-waffle i.is-on { background: var(--series, var(--chart-1)); }
.elt-waffle i.is-b { background: var(--chart-2); }
/* --------------------------------------------------------------------------
7. BUTTONS (Button.tsx) — 4 variants × 4 sizes, destructive mode, icon slots.
Base `.elt-btn` is primary md (36px). One primary action per view.
-------------------------------------------------------------------------- */
.elt-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0;
height: var(--comp-btn-size-md); padding: 0 12px; border-radius: var(--cr-btn-md); border: 1px solid transparent;
font-size: var(--type-text-sm); line-height: var(--type-text-sm--line-height); font-weight: var(--type-font-weight-medium);
white-space: nowrap; user-select: none; cursor: pointer; text-decoration: none;
background: var(--col-btn-primary-surface-default); color: var(--col-btn-primary-content-default); box-shadow: var(--shadow-btn-primary);
transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard), box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}
.elt-btn:hover { background: var(--col-btn-primary-surface-hover); text-decoration: none; }
.elt-btn:active { background: var(--col-btn-primary-surface-hover); }
.elt-btn:focus-visible { outline: 2px solid var(--col-btn-primary-surface-focused); outline-offset: 2px; }
.elt-btn:disabled, .elt-btn.is-disabled { background: var(--col-btn-primary-surface-disabled); box-shadow: none; cursor: not-allowed; }
.elt-btn.is-secondary { background: var(--col-btn-secondary-surface-default); color: var(--col-btn-secondary-content-default); border-color: var(--col-stroke-secondary); box-shadow: var(--shadow-btn-secondary); }
.elt-btn.is-secondary:hover { background: var(--col-btn-secondary-surface-hover); }
.elt-btn.is-secondary:disabled, .elt-btn.is-secondary.is-disabled { background: var(--col-btn-secondary-surface-default); opacity: 0.5; box-shadow: none; }
.elt-btn.is-tertiary { background: transparent; color: var(--col-icon-brand-default); box-shadow: none; }
.elt-btn.is-tertiary:hover { background: var(--col-btn-tertiary-surface-hover); }
.elt-btn.is-tertiary:disabled, .elt-btn.is-tertiary.is-disabled { background: transparent; opacity: 0.5; }
.elt-btn.is-quaternary { background: var(--col-btn-quaternary-surface-default); color: var(--col-btn-quaternary-content-default); box-shadow: none; }
.elt-btn.is-quaternary:hover { background: var(--col-btn-quaternary-surface-hover); }
.elt-btn.is-quaternary:disabled, .elt-btn.is-quaternary.is-disabled { background: transparent; opacity: 0.5; }
/* Destructive mode per variant */
.elt-btn.is-destructive { background: var(--col-btn-primary-surface-destructive); color: var(--col-btn-primary-content-default); box-shadow: none; }
.elt-btn.is-destructive:hover { background: var(--col-btn-primary-surface-destructive-hover); }
.elt-btn.is-destructive:disabled, .elt-btn.is-destructive.is-disabled { background: var(--col-btn-primary-surface-destructive-subtle); }
.elt-btn.is-secondary.is-destructive { background: var(--col-btn-secondary-surface-default); color: var(--col-btn-primary-content-destructive); border-color: var(--col-stroke-secondary); box-shadow: var(--shadow-btn-secondary); }
.elt-btn.is-secondary.is-destructive:hover { background: var(--col-btn-primary-surface-destructive-subtle); }
.elt-btn.is-tertiary.is-destructive, .elt-btn.is-quaternary.is-destructive { background: transparent; color: var(--col-btn-primary-content-destructive); }
.elt-btn.is-tertiary.is-destructive:hover, .elt-btn.is-quaternary.is-destructive:hover { background: var(--col-btn-primary-surface-destructive-subtle); }
/* Sizes */
.elt-btn.is-xs { height: var(--comp-btn-size-xs); padding: 0 8px; border-radius: var(--cr-btn-xs); font-size: var(--type-text-3xs); line-height: var(--type-text-3xs--line-height); }
.elt-btn.is-sm { height: var(--comp-btn-size-sm); padding: 0 10px; border-radius: var(--cr-btn-sm); font-size: var(--type-text-xs); line-height: var(--type-text-xs--line-height); }
.elt-btn.is-lg { height: var(--comp-btn-size-lg); padding: 0 14px; border-radius: var(--cr-btn-lg); }
.elt-btn__icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; }
.elt-btn.is-xs .elt-btn__icon { width: 14px; height: 14px; }
.elt-btn.is-lg .elt-btn__icon { width: 18px; height: 18px; }
.elt-btn__icon svg { width: 100%; height: 100%; }
.elt-btn.is-icon { width: var(--comp-btn-size-md); padding: 0; }
.elt-btn.is-icon.is-xs { width: var(--comp-btn-size-xs); }
.elt-btn.is-icon.is-sm { width: var(--comp-btn-size-sm); }
.elt-btn.is-icon.is-lg { width: var(--comp-btn-size-lg); }
.elt-btn.is-block { width: 100%; }
.elt-btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.elt-btn.is-loading::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--col-btn-primary-content-default); border-top-color: transparent; border-radius: 50%; animation: elt-spin 0.8s linear infinite; }
.elt-btn.is-secondary.is-loading::after, .elt-btn.is-tertiary.is-loading::after, .elt-btn.is-quaternary.is-loading::after { border-color: var(--col-content-secondary-default); border-top-color: transparent; }
.elt-btn-group { display: inline-flex; align-items: center; gap: var(--pad-sm); }
.elt-btn-group.is-attached { gap: 0; }
.elt-btn-group.is-attached > .elt-btn { border-radius: 0; }
.elt-btn-group.is-attached > .elt-btn:first-child { border-top-left-radius: var(--cr-btn-md); border-bottom-left-radius: var(--cr-btn-md); }
.elt-btn-group.is-attached > .elt-btn:last-child { border-top-right-radius: var(--cr-btn-md); border-bottom-right-radius: var(--cr-btn-md); }
.elt-btn-group.is-attached > .elt-btn + .elt-btn { margin-left: -1px; }
/* Icon button — 32px ghost square (toolbars, table row actions, close) */
.elt-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--cr-btn-sm); color: var(--col-icon-secondary-default); background: transparent; cursor: pointer; transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard); }
.elt-iconbtn:hover { background: var(--col-btn-quaternary-surface-hover); color: var(--col-icon-primary-default); }
.elt-iconbtn.is-active, .elt-iconbtn[aria-pressed="true"] { background: var(--col-surface-brand-inverted); color: var(--col-icon-brand-default); }
.elt-iconbtn.is-sm { width: 26px; height: 26px; border-radius: var(--cr-btn-xs); }
.elt-iconbtn svg { width: 16px; height: 16px; }
.elt-iconbtn.is-round { border-radius: 50%; }
/* Theme toggle — shows the mode you would switch TO (moon on light, sun on dark) */
.elt-theme-toggle .elt-theme-toggle__sun { display: none; }
.elt-theme-toggle .elt-theme-toggle__moon { display: inline-flex; }
:root[data-theme="dark"] .elt-theme-toggle__sun, :root.dark .elt-theme-toggle__sun { display: inline-flex; }
:root[data-theme="dark"] .elt-theme-toggle__moon, :root.dark .elt-theme-toggle__moon { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .elt-theme-toggle__sun { display: inline-flex; }
:root:not([data-theme="light"]) .elt-theme-toggle__moon { display: none; }
}
.elt-theme-toggle__label { font-size: var(--type-text-2xs); font-weight: var(--type-font-weight-medium); }
/* --------------------------------------------------------------------------
8. FORMS — 38px fields, 9px radius (DS.md §3). Label → control → hint/error.
-------------------------------------------------------------------------- */
.elt-field { display: flex; flex-direction: column; gap: var(--pad-xs); min-width: 0; }
.elt-field__label { display: flex; align-items: center; gap: var(--pad-2xs); font-size: var(--type-text-xs); line-height: var(--type-text-xs--line-height); font-weight: var(--type-font-weight-medium); color: var(--col-content-primary-default); }
.elt-field__req { color: var(--col-content-destructive-default); }
.elt-field__hint { display: flex; align-items: center; gap: var(--pad-2xs); font-size: var(--type-text-2xs); line-height: var(--type-text-2xs--line-height); color: var(--col-content-tertiary-default); }
.elt-field__error { display: flex; align-items: center; gap: var(--pad-2xs); font-size: var(--type-text-2xs); line-height: var(--type-text-2xs--line-height); color: var(--col-content-destructive-default); }
.elt-field.is-inline { flex-direction: row; align-items: center; gap: var(--pad-lg); }
.elt-field.is-inline .elt-field__label { flex: 0 0 140px; }
.elt-input, .elt-select, .elt-textarea {
width: 100%; height: var(--comp-input-height); padding: 0 var(--pad-lg); min-width: 0;
background: var(--col-surface-primary-default); border: 1px solid var(--col-stroke-secondary); border-radius: var(--cr-surface-sm);
color: var(--col-content-primary-default); font-size: var(--type-text-xs); line-height: var(--type-text-xs--line-height); outline: none;
transition: border-color var(--motion-duration-fast) var(--motion-ease-standard), box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}
.elt-input::placeholder, .elt-textarea::placeholder { color: var(--col-content-primary-disabled); }
.elt-input:hover, .elt-select:hover, .elt-textarea:hover { border-color: var(--col-stroke-tertiary); }
.elt-input:focus, .elt-select:focus, .elt-textarea:focus { border-color: var(--col-stroke-brand); box-shadow: 0 0 0 2px var(--col-btn-primary-surface-focused); }
.elt-input:disabled, .elt-select:disabled, .elt-textarea:disabled { background: var(--col-surface-secondary-default); color: var(--col-content-primary-disabled); cursor: not-allowed; }
.elt-field.has-error .elt-input, .elt-field.has-error .elt-select, .elt-field.has-error .elt-textarea, .elt-input.is-error { border-color: var(--col-stroke-destructive); }
.elt-input.is-sm { height: var(--comp-btn-size-sm); padding: 0 var(--pad-md); font-size: var(--type-text-2xs); }
.elt-input.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.elt-textarea { height: auto; min-height: 96px; padding: var(--pad-md) var(--pad-lg); resize: vertical; }
/* Icon-in-field wrapper */
.elt-input-wrap { position: relative; display: flex; align-items: center; min-width: 0; }
.elt-input-wrap__icon { position: absolute; left: 10px; display: inline-flex; width: 16px; height: 16px; color: var(--col-icon-secondary-default); pointer-events: none; }
.elt-input-wrap__icon.is-trailing { left: auto; right: 10px; }
.elt-input-wrap .elt-input { padding-left: 34px; }
.elt-input-wrap.has-trailing .elt-input { padding-right: 34px; }
.elt-input-wrap .elt-iconbtn.is-trailing { position: absolute; right: 4px; }
/* Select — native