@exxatdesignux/ui 0.2.18 → 0.3.0

package/src/globals.css

@@ -10,7 +10,9 @@
 
 @import "tailwindcss";
 @import "tw-animate-css";
-/* Inter is loaded via next/font/google in layout.tsx — no @import needed here */
+/* Inter is loaded via next/font/google in the consuming app's layout — no @import needed here. */
+/* `@source` is declared by the consuming app's globals.css so the path resolves relative to its location
+   (workspace clone vs. npm install). See apps/web/app/globals.css. */
 
 /* RTL layout direction support */
 @custom-variant dark (&:is(.dark *));
@@ -119,14 +121,51 @@
   --radius-xl:  16px;
   --radius-2xl: 20px;
   --radius-3xl: 24px;
+
+  /* ============================================================
+     Exxat L0 — Tailwind utility bridges (additive)
+     ------------------------------------------------------------
+     Short utility forms backed by --exxat-* canonical primitives.
+     They coexist with the shadcn-named bridges above. Prefer
+     these for new code; see apps/web/docs/token-taxonomy.md.
+     ============================================================ */
+  --color-surface-1:           var(--exxat-color-surface-1);
+  --color-surface-2:           var(--exxat-color-surface-2);
+  --color-surface-3:           var(--exxat-color-surface-3);
+  --color-surface-muted:       var(--exxat-color-surface-muted);
+  --color-surface-accent:      var(--exxat-color-surface-accent);
+  --color-surface-sidebar:     var(--exxat-color-surface-sidebar);
+  --color-ink-1:               var(--exxat-color-ink-1);
+  --color-ink-2:               var(--exxat-color-ink-2);
+  --color-ink-on-brand:        var(--exxat-color-ink-on-brand);
+  --color-brand-1:             var(--exxat-color-brand-1);
+  --color-brand-2:             var(--exxat-color-brand-2);
+  --color-brand-3:             var(--exxat-color-brand-3);
+  --color-brand-tint-1:        var(--exxat-color-brand-tint-1);
+  --color-brand-tint-2:        var(--exxat-color-brand-tint-2);
+  --color-brand-tint-3:        var(--exxat-color-brand-tint-3);
+  --color-border-1:            var(--exxat-color-border-1);
+  --color-focus-ring:          var(--exxat-color-focus-ring);
+
+  /* Exxat L0 radius scale → rounded-1 … rounded-6 */
+  --radius-1: var(--exxat-radius-1);
+  --radius-2: var(--exxat-radius-2);
+  --radius-3: var(--exxat-radius-3);
+  --radius-4: var(--exxat-radius-4);
+  --radius-5: var(--exxat-radius-5);
+  --radius-6: var(--exxat-radius-6);
 }
 
 /* --------------------------------------------------------------------------
-   Text size (Settings → Appearance) — see apps/web app copy for rationale.
+   Text size (Settings → Appearance)
+   Pattern: root `font-size` steps like iOS Larger Text / Android font scale /
+   browser zoom-at-root so rem-based components track together. We keep steps
+   modest; `compact` redefines `--text-xs` so minimum UI copy stays 11px (Exxat
+   accessibility rule) when the root is slightly below 16px.
    -------------------------------------------------------------------------- */
 html[data-text-size="compact"] {
   font-size: 94%;
-  --text-xs: 0.7333rem;
+  --text-xs: 0.7333rem; /* ~11px when 1rem ≈ 15px */
 }
 html[data-text-size="large"] {
   font-size: 112.5%;
@@ -145,6 +184,14 @@ html[data-text-size="large"] {
      via a scoped class, not globally on :root. */
   /* Minimum readable UI copy: 11px (`text-xs` / --text-xs). Do not use smaller arbitrary sizes. */
 
+  /* ── Layout ─────────────────────────────────────────────────── */
+  /* SiteHeader / breadcrumb height. Mirrored on the SidebarProvider for
+     descendants; declared here too so JS that reads from documentElement
+     (e.g. DataTable sticky-head offset) can resolve it. Plain px so
+     `parseFloat` can read it as a number. Keep in sync with `headerHeight`
+     in components/sidebar-shell.tsx (currently `calc(var(--spacing) * 12)` = 48px). */
+  --header-height: 48px;
+
   /* ── Typography ─────────────────────────────────────────────── */
   /* Ivy Presto loaded via Adobe Fonts Kit wuk5wqn (use.typekit.net) */
   --font-heading: "ivypresto-text";
@@ -228,8 +275,8 @@ html[data-text-size="large"] {
   --control-border:    var(--border-control-3);  /* default form-field border */
 
   /* ── Input ───────────────────────────────────────────────────── */
-  /* 3:1 on white — WCAG 1.4.11 compliant for interactive element borders */
-  --input:            oklch(0.6694 0.0063 264.52);
+  /* Raised contrast target for control outlines (>= 3.1:1 on white). */
+  --input:            oklch(0.62 0.01 264.52);
   --input-background: oklch(0.97 0.002 270);
 
   /* ── Focus ring ──────────────────────────────────────────────── */
@@ -267,7 +314,7 @@ html[data-text-size="large"] {
   --sidebar-ring:               oklch(0.25 0 0);
   /* Nav section titles — ≥4.5:1 vs --sidebar (not vs page white) */
   --sidebar-section-label-foreground: color-mix(in oklch, var(--sidebar-foreground) 58%, var(--sidebar));
-  /* Nested secondary rail — elevation 1: brand wash, lighter than `--brand-tint` / sidebar. */
+  /* Nested secondary rail — elevation 1: brand wash, lighter than `--sidebar` / `--brand-tint`. */
   --secondary-panel-bg:         color-mix(in oklch, var(--background) 40%, var(--brand-tint-light) 60%);
 
   /* Browser UI (meta theme-color) — aligned with --brand-tint */
@@ -333,7 +380,7 @@ html[data-text-size="large"] {
   --insight-severity-info-bg: color-mix(in oklch, var(--chart-1) 14%, transparent);
   --insight-severity-info-fg: color-mix(in oklch, var(--chart-1) 75%, var(--foreground));
 
-  /* ── Tinted icon discs — soft wash (≈14% tint); contrast from fg tokens */
+  /* ── Tinted icon discs — soft wash (≈14% tint like legacy inline styles); contrast from --chip-* / brand-dark on fg */
   --icon-disc-chart-2-bg: color-mix(in oklch, var(--chart-2) 14%, transparent);
   --icon-disc-chart-2-fg: var(--chip-2);
   --icon-disc-chart-4-bg: color-mix(in oklch, var(--chart-4) 14%, transparent);
@@ -350,6 +397,113 @@ html[data-text-size="large"] {
   --conditional-rule-red: color-mix(in oklch, var(--destructive) 22%, transparent);
   --conditional-rule-purple: color-mix(in oklch, var(--brand-color) 22%, transparent);
   --conditional-rule-orange: color-mix(in oklch, var(--chart-5) 25%, transparent);
+
+  /* ============================================================
+     Exxat L0 — canonical namespace (additive aliases)
+     ------------------------------------------------------------
+     SLDS-style flat namespace. These are the official names the
+     DS scales on — components SHOULD migrate to these over time.
+     Existing shadcn-style names above are L1 aliases that resolve
+     to the same values. The L0 names use var(...) so they inherit
+     every theme override (.dark / .theme-one / .theme-prism /
+     [data-contrast="high"]) automatically — no per-theme block
+     needed.
+     Reference: apps/web/docs/token-taxonomy.md (§ L0 Exxat).
+     ============================================================ */
+
+  /* ── Surfaces (canvas → muted → input) ──────────────────────── */
+  --exxat-color-surface-1:         var(--background);
+  --exxat-color-surface-2:         var(--card);
+  --exxat-color-surface-3:         var(--popover);
+  --exxat-color-surface-muted:     var(--muted);
+  --exxat-color-surface-accent:    var(--accent);
+  --exxat-color-surface-secondary: var(--secondary);
+  --exxat-color-surface-sidebar:   var(--sidebar);
+  --exxat-color-surface-input:     var(--input-background);
+
+  /* ── Ink (foreground / on-surface text) ─────────────────────── */
+  --exxat-color-ink-1:              var(--foreground);
+  --exxat-color-ink-2:              var(--muted-foreground);
+  --exxat-color-ink-on-surface-2:   var(--card-foreground);
+  --exxat-color-ink-on-surface-3:   var(--popover-foreground);
+  --exxat-color-ink-on-brand:       var(--brand-foreground);
+  --exxat-color-ink-on-primary:     var(--primary-foreground);
+  --exxat-color-ink-on-secondary:   var(--secondary-foreground);
+  --exxat-color-ink-on-accent:      var(--accent-foreground);
+  --exxat-color-ink-on-destructive: var(--destructive-foreground);
+
+  /* ── Brand (interactive accent + scale) ─────────────────────── */
+  --exxat-color-brand-1:        var(--brand-color);
+  --exxat-color-brand-2:        var(--brand-color-dark);
+  --exxat-color-brand-3:        var(--brand-color-light);
+  --exxat-color-brand-deep:     var(--brand-color-deep);
+  --exxat-color-brand-tint-1:   var(--brand-tint);
+  --exxat-color-brand-tint-2:   var(--brand-tint-subtle);
+  --exxat-color-brand-tint-3:   var(--brand-tint-light);
+
+  /* ── Wordmark ink (Exxat product logo SVG + HTML prefix) ─────
+     Brand-frozen slate/cool-grey pair used by the "Exxat" SVG
+     letters and the HTML wordmark prefix. Held outside the
+     `--foreground` family because the wordmark stays at brand
+     ink even when the rest of the surface inverts. Replaces
+     the bare `#273441` / `#A8B2BA` literals in
+     `apps/web/components/exxat-product-logo.tsx` and
+     `product-wordmark.tsx`. */
+  --exxat-color-wordmark-ink-light: oklch(0.301 0.022 252);   /* ≈ #273441 */
+  --exxat-color-wordmark-ink-dark:  oklch(0.755 0.012 230);   /* ≈ #A8B2BA */
+
+  /* ── Action surfaces ────────────────────────────────────────── */
+  --exxat-color-action-primary:     var(--primary);
+  --exxat-color-action-secondary:   var(--secondary);
+  --exxat-color-action-destructive: var(--destructive);
+
+  /* ── Borders (decorative + form-field ladder) ──────────────── */
+  --exxat-color-border-1:              var(--border);
+  --exxat-color-border-control-subtle: var(--border-control);
+  --exxat-color-border-control-1:      var(--border-control-3);
+  --exxat-color-border-control-2:      var(--border-control-35);
+
+  /* ── Focus + overlay ────────────────────────────────────────── */
+  --exxat-color-focus-ring:  var(--ring);
+  --exxat-color-overlay:     var(--overlay);
+
+  /* ── Chart slots ────────────────────────────────────────────── */
+  --exxat-color-chart-1: var(--chart-1);
+  --exxat-color-chart-2: var(--chart-2);
+  --exxat-color-chart-3: var(--chart-3);
+  --exxat-color-chart-4: var(--chart-4);
+  --exxat-color-chart-5: var(--chart-5);
+
+  /* ── Chip / badge slots ─────────────────────────────────────── */
+  --exxat-color-chip-1:           var(--chip-1);
+  --exxat-color-chip-2:           var(--chip-2);
+  --exxat-color-chip-3:           var(--chip-3);
+  --exxat-color-chip-4:           var(--chip-4);
+  --exxat-color-chip-5:           var(--chip-5);
+  --exxat-color-chip-destructive: var(--chip-destructive);
+
+  /* ── Radius scale ──────────────────────────────────────────── */
+  --exxat-radius-1: 4px;
+  --exxat-radius-2: 8px;
+  --exxat-radius-3: 12px;
+  --exxat-radius-4: 16px;
+  --exxat-radius-5: 20px;
+  --exxat-radius-6: 24px;
+
+  /* ── Spacing scale ─────────────────────────────────────────── */
+  --exxat-spacing-1:  0.25rem;
+  --exxat-spacing-2:  0.5rem;
+  --exxat-spacing-3:  0.75rem;
+  --exxat-spacing-4:  1rem;
+  --exxat-spacing-5:  1.25rem;
+  --exxat-spacing-6:  1.5rem;
+  --exxat-spacing-8:  2rem;
+  --exxat-spacing-12: 3rem;
+
+  /* ── Control height scale ──────────────────────────────────── */
+  --exxat-control-height-1: var(--control-height-sm);
+  --exxat-control-height-2: var(--control-height);
+  --exxat-control-height-3: var(--control-height-touch);
 }
 
 /* ==========================================================================
@@ -358,12 +512,43 @@ html[data-text-size="large"] {
 .dark {
   --sticky-edge-fade: oklch(0 0 0 / 0.32);
 
-  /* Canvas — charcoal grey (not near-black) */
-  --background:         oklch(0.20 0.008 270);
+  /* Brand-tint scale for dark mode — same hue family as :root but at dark-mode
+     lightness so derived surfaces (`--secondary-panel-bg`, `--sidebar` fallback
+     via `var(--brand-tint)`, etc.) read as dark brand surfaces, not pale
+     pastel washes. Themed `.dark` variants (`.theme-one.dark`,
+     `.theme-prism.dark`, …) override these with their own hue.
+
+     Chroma note: at L≈0.27 the OKLCH hue-discrimination threshold is much
+     higher than at L≈0.97 (Helmholtz–Kohlrausch). The PRIMARY brand surface
+     (`--brand-tint`) needs ~3–4× the chroma of its light-mode counterpart so
+     different products read as visibly different in dark mode. The lighter /
+     subtler scale steps stay low-chroma — they're elevation hints, not the
+     brand carrier. */
+  --brand-tint:         oklch(0.30 0.05 270);
+  --brand-tint-light:   oklch(0.34 0.04 270);
+  --brand-tint-subtle:  oklch(0.26 0.025 270);
+
+  /* Canvas — charcoal grey with a perceptible whisper of brand chroma (still
+     ≥ 12:1 against --foreground). Was 0.008 — below the OKLCH hue-perception
+     threshold at L 0.20, so the canvas read as dead-neutral grey. 0.014 ties
+     the canvas to the theme without compromising readability. */
+  --background:         oklch(0.20 0.014 270);
   --foreground:         oklch(0.985 0 0);
-  --card:               oklch(0.255 0.008 270);
+  /* Dark surface elevation ladder (see commentary at line ~605 for the full
+     stack across themed blocks):
+       --background          L=0.20    canvas
+       --secondary-panel-bg  L=0.22    nested chrome (between sidebar & canvas)
+       --card                L=0.225   subtle inline elevation
+       --sidebar /input-bg   L=0.245   outer chrome
+       --popover             L=0.275   floating menus / dropdowns
+
+     Card stays at +0.025 above canvas so it reads as the same surface family.
+     Popover lifts further (+0.075) so it visibly floats above the canvas it
+     covers — a too-close popover blends into the page and a dropdown loses
+     its boundary. */
+  --card:               oklch(0.225 0.008 270);
   --card-foreground:    oklch(0.985 0 0);
-  --popover:            oklch(0.255 0.008 270);
+  --popover:            oklch(0.275 0.012 270);
   --popover-foreground: oklch(0.985 0 0);
   --primary:            oklch(0.985 0 0);
   --primary-foreground: oklch(0.3457 0.0052 286.13);
@@ -378,6 +563,7 @@ html[data-text-size="large"] {
 
   /* KeyMetrics flat band — no surface; bottom brand glow only (OKLCH). */
   --key-metrics-flat-cell-bg: transparent;
+  --key-metrics-flat-divider: color-mix(in oklch, var(--sidebar-border) 55%, transparent);
   --key-metrics-flat-band-radial: radial-gradient(
     ellipse 120% 68% at 50% 100%,
     color-mix(in oklch, var(--brand-color) 26%, transparent) 0%,
@@ -399,7 +585,7 @@ html[data-text-size="large"] {
   --control-border:    var(--border-control-3);
 
   --input:             oklch(0.72 0.012 270);
-  --input-background:  oklch(0.255 0 0);
+  --input-background:  oklch(0.245 0 0);
 
   /* Focus ring — 3:1+ on dark bg */
   --ring: oklch(0.85 0 0);
@@ -429,18 +615,27 @@ html[data-text-size="large"] {
   --icon-disc-danger-bg: color-mix(in oklch, var(--destructive) 14%, transparent);
   --icon-disc-danger-fg: color-mix(in oklch, var(--foreground) 8%, var(--destructive));
 
-  /* Sidebar */
-  --sidebar:                    oklch(0.245 0.015 270);
+  /* Sidebar — same chroma-bump principle as `--brand-tint`: at L≈0.245 the
+     OKLCH hue-perception threshold is ~0.04, so 0.015 read as dead grey
+     regardless of brand. 0.04 reads as the brand without competing with the
+     content panel. `.theme-*.dark` blocks restate this scale at their hue. */
+  --sidebar:                    oklch(0.245 0.04 270);
   --sidebar-foreground:         oklch(0.985 0 0);
   --sidebar-primary:            oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent:             oklch(0.30 0.012 270);
+  --sidebar-accent:             oklch(0.30 0.035 270);
   --sidebar-accent-foreground:  oklch(0.985 0 0);
-  --sidebar-border:             oklch(0.38 0.010 270);
+  --sidebar-border:             oklch(0.38 0.025 270);
   --sidebar-ring:               oklch(0.85 0 0);
   --sidebar-section-label-foreground: color-mix(in oklch, var(--sidebar-foreground) 48%, var(--sidebar));
-  /* Nested secondary rail — elevation 1: brand stack, lifted toward `--card` / page. */
-  --secondary-panel-bg:         color-mix(in oklch, var(--card) 32%, var(--brand-tint) 68%);
+  /* Nested secondary rail — nested chrome wedged between the outer sidebar
+     (L=0.245) and the page canvas (L=0.20). Previously this resolved to
+     `var(--brand-tint)` at L=0.30, which made the panel *brighter* than the
+     sidebar — it popped out instead of nestling in. Now L=0.22 places it just
+     above canvas with a whisper of brand chroma; each themed dark block below
+     overrides with the brand hue so it still reads as Exxat One vs Prism vs
+     Assessment vs custom. */
+  --secondary-panel-bg:         oklch(0.22 0.020 270);
   --theme-color-chrome:         #2f2d36;
 
   /* Lifted scrim on dark — white-tinted veil, not heavy black */
@@ -486,12 +681,6 @@ html[data-text-size="large"] {
   --secondary:      oklch(0.95 0.012 286.1);
   --accent:         oklch(0.925 0.015 286.1);
   --muted:          oklch(0.945 0.008 286.1);
-  --key-metrics-flat-band-radial: radial-gradient(
-    ellipse 120% 68% at 50% 100%,
-    oklch(0.50 0.14 286.1 / 0.22) 0%,
-    oklch(0.50 0.14 286.1 / 0.09) 42%,
-    transparent 72%
-  );
 }
 
 .theme-one.dark,
@@ -499,20 +688,32 @@ html[data-text-size="large"] {
 .theme-lavender.dark,
 .dark.theme-lavender {
   --ring:             var(--brand-color);
-  --background:       oklch(0.20 0.008 286.1);
-  --sidebar:          oklch(0.245 0.015 286.1);
-  --sidebar-accent:   oklch(0.30 0.012 286.1);
-  --sidebar-border:   oklch(0.38 0.010 286.1);
+  --background:       oklch(0.20 0.014 286.1);
+  --sidebar:          oklch(0.245 0.04 286.1);
+  --sidebar-accent:   oklch(0.30 0.035 286.1);
+  --sidebar-border:   oklch(0.38 0.025 286.1);
   /* Restore dark surfaces (base .dark is overridden by :not(.dark) rules above when both classes apply) */
   --secondary:        oklch(0.31 0.04 286.1);
   --muted:            oklch(0.31 0.04 286.1);
   --accent:           oklch(0.33 0.06 286.1);
-  --key-metrics-flat-band-radial: radial-gradient(
-    ellipse 120% 68% at 50% 100%,
-    oklch(0.50 0.14 286.1 / 0.28) 0%,
-    oklch(0.50 0.14 286.1 / 0.1) 42%,
-    transparent 72%
-  );
+  /* Surface elevation ladder — dark mode.
+     Card / input-background are *inline* elevations (same surface family as
+     canvas, small step). Popover is a *floating* surface — lifts further so a
+     dropdown over canvas reads as clearly above it instead of blending in.
+     Secondary panel is nested chrome — wedged between canvas (L=0.20) and
+     sidebar (L=0.245), so it nestles into the shell rather than popping out.
+     Brand chroma stays gentle on all three; the saturated brand expression
+     lives on --brand-tint / --sidebar. */
+  --secondary-panel-bg: oklch(0.22  0.025 286.1);
+  --card:               oklch(0.225 0.017 286.1);
+  --popover:            oklch(0.275 0.022 286.1);
+  --input-background:   oklch(0.245 0.010 286.1);
+  /* Brand-tint scale — same hue (286.1 — Exxat One lavender), dark lightness.
+     PRIMARY (`--brand-tint`) carries enough chroma to read as visibly lavender
+     against the page canvas; LIGHT / SUBTLE steps are elevation aides only. */
+  --brand-tint:        oklch(0.30 0.05 286.1);
+  --brand-tint-light:  oklch(0.34 0.04 286.1);
+  --brand-tint-subtle: oklch(0.26 0.025 286.1);
 }
 
 /* ==========================================================================
@@ -541,12 +742,6 @@ html[data-text-size="large"] {
   --muted:            oklch(0.945 0.008 343);
   --banner-prism-bg:  oklch(0.97 0.02 343);
   --theme-color-chrome: #fff5f9;
-  --key-metrics-flat-band-radial: radial-gradient(
-    ellipse 120% 68% at 50% 100%,
-    oklch(0.57 0.24 342 / 0.22) 0%,
-    oklch(0.57 0.24 342 / 0.09) 42%,
-    transparent 72%
-  );
 }
 
 .theme-prism.dark,
@@ -554,20 +749,145 @@ html[data-text-size="large"] {
 .theme-rose.dark,
 .dark.theme-rose {
   --ring:             var(--brand-color);
-  --background:       oklch(0.20 0.008 342);
-  --sidebar:          oklch(0.245 0.015 342);
-  --sidebar-accent:   oklch(0.30 0.012 342);
-  --sidebar-border:   oklch(0.38 0.010 342);
+  --background:       oklch(0.20 0.014 342);
+  --sidebar:          oklch(0.245 0.045 342);
+  --sidebar-accent:   oklch(0.30 0.04 342);
+  --sidebar-border:   oklch(0.38 0.028 342);
   --secondary:        oklch(0.31 0.04 342);
   --muted:              oklch(0.31 0.04 342);
   --accent:             oklch(0.33 0.06 342);
   --theme-color-chrome: #2a2428;
-  --key-metrics-flat-band-radial: radial-gradient(
-    ellipse 120% 68% at 50% 100%,
-    oklch(0.57 0.24 342 / 0.28) 0%,
-    oklch(0.57 0.24 342 / 0.1) 42%,
-    transparent 72%
-  );
+  /* Surface elevation ladder — see commentary in .theme-one.dark. Chroma is a
+     touch higher than lavender at every step because rose reads slightly
+     dimmer at equal chroma at these lightnesses. */
+  --secondary-panel-bg: oklch(0.22  0.030 342);
+  --card:               oklch(0.225 0.020 342);
+  --popover:            oklch(0.275 0.026 342);
+  --input-background:   oklch(0.245 0.011 342);
+  /* Brand-tint scale — same hue (342 — Prism rose), dark lightness. Rose can
+     carry slightly higher chroma without warming-shift on dark surfaces. */
+  --brand-tint:        oklch(0.30 0.055 342);
+  --brand-tint-light:  oklch(0.34 0.045 342);
+  --brand-tint-subtle: oklch(0.26 0.028 342);
+}
+
+/* ==========================================================================
+   Theme: Exxat Assessment · Green · hue 159.88
+   Usage: <html class="theme-assessment">
+   ========================================================================== */
+.theme-assessment {
+  --brand-tint:         oklch(0.965 0.018 159.88);
+  --brand-tint-light:   oklch(0.992 0.008 159.88);
+  --brand-tint-subtle:  oklch(0.93 0.028 159.88);
+  --brand-color:        oklch(0.7 0.0913 159.88);
+  --brand-color-light:  oklch(0.82 0.072 159.88);
+  --brand-color-dark:   oklch(0.48 0.0913 159.88);
+  --brand-color-deep:   oklch(0.34 0.075 159.88);
+  --ring:               var(--brand-color-dark);
+}
+
+.theme-assessment:not(.dark) {
+  --sidebar:            var(--brand-tint);
+  --sidebar-accent:     oklch(0.945 0.026 159.88);
+  --sidebar-border:     oklch(0.90 0.026 159.88);
+  --secondary:          oklch(0.95 0.012 159.88);
+  --accent:             oklch(0.925 0.016 159.88);
+  --muted:              oklch(0.945 0.008 159.88);
+  --theme-color-chrome: #f1faf5;
+}
+
+.theme-assessment.dark,
+.dark.theme-assessment {
+  --ring:               var(--brand-color);
+  --background:         oklch(0.20 0.014 159.88);
+  --sidebar:            oklch(0.245 0.04 159.88);
+  --sidebar-accent:     oklch(0.30 0.035 159.88);
+  --sidebar-border:     oklch(0.38 0.025 159.88);
+  --secondary:          oklch(0.31 0.04 159.88);
+  --muted:              oklch(0.31 0.04 159.88);
+  --accent:             oklch(0.33 0.06 159.88);
+  --theme-color-chrome: #242a27;
+  /* Surface elevation ladder — see commentary in .theme-one.dark. */
+  --secondary-panel-bg: oklch(0.22  0.025 159.88);
+  --card:               oklch(0.225 0.017 159.88);
+  --popover:            oklch(0.275 0.022 159.88);
+  --input-background:   oklch(0.245 0.010 159.88);
+  /* Brand-tint scale — same hue (159.88 — Assessment teal-green), dark
+     lightness. Green at this lightness reads cleanly against the dark canvas. */
+  --brand-tint:         oklch(0.30 0.05 159.88);
+  --brand-tint-light:   oklch(0.34 0.04 159.88);
+  --brand-tint-subtle:  oklch(0.26 0.025 159.88);
+}
+
+/* ==========================================================================
+   Theme: Custom product · user-selected hue
+   Usage: <html class="theme-custom" style="--custom-product-brand-color: …">
+   ========================================================================== */
+/*
+ * Tint chroma is **derived from the source's chroma** so neighbouring hues
+ * (e.g. Blue h=252 vs Indigo h=280 vs Purple h=286) read as distinct pale
+ * tints instead of collapsing to the same near-white. The earlier formula
+ * pinned chroma to a fixed `0.018`, which is below the hue-discrimination
+ * threshold at L≈0.96 for closely-spaced hues — that's why Blue / Indigo /
+ * Purple looked identical in the sidebar.
+ *
+ * `max(<floor>, calc(c * <fraction>))` rules:
+ *   - vibrant brand colours (c ≈ 0.10–0.23) get a meaningfully tinted
+ *     sidebar / accent / muted scale → product chrome visibly changes per
+ *     pick
+ *   - low-chroma custom-hex picks (greys) fall back to the floor so they
+ *     don't render as pure white
+ *   - lightness + hue stay pinned to the original mock-up values, so the
+ *     overall "very pale background" feel is unchanged
+ */
+.theme-custom {
+  --brand-tint:         oklch(from var(--custom-product-brand-color) 0.965 max(0.018, calc(c * 0.20)) h);
+  --brand-tint-light:   oklch(from var(--custom-product-brand-color) 0.992 max(0.008, calc(c * 0.08)) h);
+  --brand-tint-subtle:  oklch(from var(--custom-product-brand-color) 0.93  max(0.028, calc(c * 0.30)) h);
+  --brand-color:        var(--custom-product-brand-color);
+  --brand-color-light:  oklch(from var(--custom-product-brand-color) 0.82 c h);
+  --brand-color-dark:   oklch(from var(--custom-product-brand-color) 0.48 c h);
+  --brand-color-deep:   oklch(from var(--custom-product-brand-color) 0.34 c h);
+  --ring:               var(--brand-color-dark);
+}
+
+.theme-custom:not(.dark) {
+  --sidebar:            var(--brand-tint);
+  --sidebar-accent:     oklch(from var(--custom-product-brand-color) 0.945 max(0.026, calc(c * 0.28)) h);
+  --sidebar-border:     oklch(from var(--custom-product-brand-color) 0.90  max(0.026, calc(c * 0.28)) h);
+  --secondary:          oklch(from var(--custom-product-brand-color) 0.95  max(0.012, calc(c * 0.14)) h);
+  --accent:             oklch(from var(--custom-product-brand-color) 0.925 max(0.016, calc(c * 0.18)) h);
+  --muted:              oklch(from var(--custom-product-brand-color) 0.945 max(0.008, calc(c * 0.10)) h);
+  --theme-color-chrome: color-mix(in oklch, var(--custom-product-brand-color) 10%, white);
+}
+
+.theme-custom.dark,
+.dark.theme-custom {
+  --ring:               var(--brand-color);
+  --background:         oklch(from var(--custom-product-brand-color) 0.20  max(0.014, calc(c * 0.12)) h);
+  --sidebar:            oklch(from var(--custom-product-brand-color) 0.245 max(0.035, calc(c * 0.28)) h);
+  --sidebar-accent:     oklch(from var(--custom-product-brand-color) 0.30  max(0.030, calc(c * 0.24)) h);
+  --sidebar-border:     oklch(from var(--custom-product-brand-color) 0.38  max(0.022, calc(c * 0.18)) h);
+  --secondary:          oklch(from var(--custom-product-brand-color) 0.31  max(0.04,  calc(c * 0.40)) h);
+  --muted:              oklch(from var(--custom-product-brand-color) 0.31  max(0.04,  calc(c * 0.40)) h);
+  --accent:             oklch(from var(--custom-product-brand-color) 0.33  max(0.06,  calc(c * 0.50)) h);
+  --theme-color-chrome: color-mix(in oklch, var(--custom-product-brand-color) 12%, black);
+  /* Surface elevation ladder — derived from the custom picked hue. See
+     commentary in .theme-one.dark for the full ladder. Chroma scales with
+     the source colour (~13% for inline cards / 16% for floating popovers /
+     20% for secondary panel) with floors that keep near-grey picks from
+     collapsing back to neutral. */
+  --secondary-panel-bg: oklch(from var(--custom-product-brand-color) 0.22  max(0.020, calc(c * 0.20)) h);
+  --card:               oklch(from var(--custom-product-brand-color) 0.225 max(0.015, calc(c * 0.13)) h);
+  --popover:            oklch(from var(--custom-product-brand-color) 0.275 max(0.018, calc(c * 0.16)) h);
+  --input-background:   oklch(from var(--custom-product-brand-color) 0.245 max(0.008, calc(c * 0.08)) h);
+  /* Brand-tint scale — derived from the picked hue, dark lightness. PRIMARY
+     carries chroma high enough for the secondary panel to read as the brand
+     hue; floor 0.04 prevents low-chroma picks (greys) from collapsing back to
+     a flat surface. */
+  --brand-tint:         oklch(from var(--custom-product-brand-color) 0.30 max(0.04,  calc(c * 0.30)) h);
+  --brand-tint-light:   oklch(from var(--custom-product-brand-color) 0.34 max(0.03,  calc(c * 0.24)) h);
+  --brand-tint-subtle:  oklch(from var(--custom-product-brand-color) 0.26 max(0.022, calc(c * 0.20)) h);
 }
 
 /* ==========================================================================
@@ -595,13 +915,6 @@ html[data-text-size="large"] {
 /* ── Light High Contrast ─────────────────────────────────────────────────── */
 /*    Fluent 2 / Microsoft 6-color strategy.                                 */
 /*    Highlight = saturated bright brand color (follows theme hue).           */
-/*                                                                           */
-/*    Canvas       = white                                                   */
-/*    CanvasText   = near-black                                              */
-/*    Highlight    = saturated dark brand  (selected / active / focus)        */
-/*    HighlightText= white                                                   */
-/*    GrayText     = mid-grey  (disabled)                                    */
-/*    Error        = dark red  (destructive only)                            */
 html[data-contrast="high"]:not(.dark) {
   --hc-highlight: oklch(from var(--brand-color) 0.35 0.30 h);
   --hc-highlight-text: oklch(1 0 0);
@@ -612,33 +925,24 @@ html[data-contrast="high"]:not(.dark) {
   --card-foreground:    oklch(0.14 0 0);
   --popover:            oklch(1 0 0);
   --popover-foreground: oklch(0.14 0 0);
-
   --primary:            oklch(0.14 0 0);
   --primary-foreground: oklch(1 0 0);
-
   --secondary:            oklch(1 0 0);
   --secondary-foreground: oklch(0.14 0 0);
-
   --muted:            oklch(0.94 0 0);
   --muted-foreground: oklch(0.14 0 0);
-
   --accent:            var(--hc-highlight);
   --accent-foreground: var(--hc-highlight-text);
-
   --destructive:            oklch(0.45 0.24 25);
   --destructive-foreground: oklch(1 0 0);
-
   --border:            oklch(0.14 0 0);
   --border-control:    oklch(0.14 0 0);
   --border-control-3:  oklch(0.14 0 0);
   --border-control-35: oklch(0.14 0 0);
   --control-border:    oklch(0.14 0 0);
-
   --input:            oklch(0.14 0 0);
   --input-background: oklch(1 0 0);
-
   --ring: var(--hc-highlight);
-
   --sidebar:                    oklch(1 0 0);
   --sidebar-foreground:         oklch(0.14 0 0);
   --sidebar-primary:            oklch(0.14 0 0);
@@ -648,23 +952,17 @@ html[data-contrast="high"]:not(.dark) {
   --sidebar-border:             oklch(0.14 0 0);
   --sidebar-ring:               var(--hc-highlight);
   --sidebar-section-label-foreground: oklch(0.40 0 0);
-
-  /* Charts — CanvasText (near-black) fill; differentiated by luminance    */
   --chart-1: oklch(0.14 0 0);
   --chart-2: oklch(0.35 0 0);
   --chart-3: oklch(0.55 0 0);
   --chart-4: oklch(0.72 0 0);
   --chart-5: oklch(0.86 0 0);
-
-  /* Chips — uniform foreground; differentiated by label text only         */
   --chip-1:           oklch(0.14 0 0);
   --chip-2:           oklch(0.14 0 0);
   --chip-3:           oklch(0.14 0 0);
   --chip-4:           oklch(0.14 0 0);
   --chip-5:           oklch(0.14 0 0);
   --chip-destructive: oklch(0.45 0.24 25);
-
-  /* Hover — plain grey shift */
   --interactive-hover:            oklch(0.88 0 0);
   --interactive-hover-foreground: oklch(0.14 0 0);
   --interactive-hover-subtle:     oklch(0.92 0 0);
@@ -672,7 +970,6 @@ html[data-contrast="high"]:not(.dark) {
   --interactive-hover-medium:     oklch(0.86 0 0);
   --interactive-hover-strong:     oklch(0.82 0 0);
   --interactive-hover-row:        oklch(0.88 0 0);
-
   --overlay: color-mix(in oklch, var(--foreground) 18%, transparent);
   --dt-row-bg:          oklch(1 0 0);
   --dt-row-hover:       oklch(0.92 0 0);
@@ -697,33 +994,24 @@ html[data-contrast="high"].dark {
   --card-foreground:    oklch(0.96 0 0);
   --popover:            oklch(0.20 0 0);
   --popover-foreground: oklch(0.96 0 0);
-
   --primary:            oklch(0.96 0 0);
   --primary-foreground: oklch(0.10 0 0);
-
   --secondary:            oklch(0.14 0 0);
   --secondary-foreground: oklch(0.96 0 0);
-
   --muted:            oklch(0.22 0 0);
   --muted-foreground: oklch(0.96 0 0);
-
   --accent:            var(--hc-highlight);
   --accent-foreground: var(--hc-highlight-text);
-
   --destructive:            oklch(0.72 0.18 18);
   --destructive-foreground: oklch(0.10 0 0);
-
   --border:            oklch(0.75 0 0);
   --border-control:    oklch(0.75 0 0);
   --border-control-3:  oklch(0.75 0 0);
   --border-control-35: oklch(0.75 0 0);
   --control-border:    oklch(0.75 0 0);
-
   --input:            oklch(0.75 0 0);
   --input-background: oklch(0.14 0 0);
-
   --ring: var(--hc-highlight);
-
   --sidebar:                    oklch(0.14 0 0);
   --sidebar-foreground:         oklch(0.96 0 0);
   --sidebar-primary:            oklch(0.96 0 0);
@@ -733,23 +1021,17 @@ html[data-contrast="high"].dark {
   --sidebar-border:             oklch(0.75 0 0);
   --sidebar-ring:               var(--hc-highlight);
   --sidebar-section-label-foreground: oklch(0.65 0 0);
-
-  /* Charts — CanvasText (white) fill; differentiated by luminance         */
   --chart-1: oklch(0.96 0 0);
   --chart-2: oklch(0.75 0 0);
   --chart-3: oklch(0.55 0 0);
   --chart-4: oklch(0.38 0 0);
   --chart-5: oklch(0.22 0 0);
-
-  /* Chips — uniform foreground; differentiated by label text only         */
   --chip-1:           oklch(0.96 0 0);
   --chip-2:           oklch(0.96 0 0);
   --chip-3:           oklch(0.96 0 0);
   --chip-4:           oklch(0.96 0 0);
   --chip-5:           oklch(0.96 0 0);
   --chip-destructive: oklch(0.72 0.18 18);
-
-  /* Hover — plain grey shift */
   --interactive-hover:            oklch(0.26 0 0);
   --interactive-hover-foreground: oklch(0.96 0 0);
   --interactive-hover-subtle:     oklch(0.22 0 0);
@@ -757,7 +1039,6 @@ html[data-contrast="high"].dark {
   --interactive-hover-medium:     oklch(0.28 0 0);
   --interactive-hover-strong:     oklch(0.32 0 0);
   --interactive-hover-row:        oklch(0.26 0 0);
-
   --overlay: color-mix(in oklch, var(--foreground) 22%, transparent);
   --dt-row-bg:          oklch(0.14 0 0);
   --dt-row-hover:       oklch(0.22 0 0);
@@ -769,13 +1050,7 @@ html[data-contrast="high"].dark {
   --dt-new-row-border:  oklch(0.96 0 0);
 }
 
-
-/* Override brand tokens in HC so text-brand / bg-brand become HC-safe.
-   NOTE: --hc-highlight uses oklch(from var(--brand-color) ...) so we must
-   NOT override --brand-color before that resolves. Instead, override
-   brand-tint/wash tokens to neutral greys and leave --brand-color for
-   the relative-color syntax to consume. Text using text-brand will get
-   the saturated HC highlight, which is correct.                              */
+/* Neutralize brand tint washes in HC so bg-brand-tint doesn't compete     */
 html:is([data-contrast="high"], [data-contrast="windows"]):not(.dark) {
   --brand-tint:        oklch(0.94 0 0);
   --brand-tint-light:  oklch(0.97 0 0);
@@ -824,7 +1099,7 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
     border: 2px solid var(--foreground) !important;
   }
 
-  /* 1f. Badge / chip — border-based; fill only for destructive */
+  /* 1f. Badge / chip — border-based; no decorative fills */
   & [data-slot="badge"] {
     border-width: 2px !important;
     border-color: var(--foreground) !important;
@@ -833,15 +1108,26 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
     box-shadow: none !important;
     outline: none !important;
     color: var(--foreground) !important;
-    color: var(--foreground) !important;
   }
 
   & [data-slot="badge"] * {
     color: var(--foreground) !important;
   }
 
-  /* Sidebar wrapper is positioning-only when it wraps Badge — avoid double border */
-  & [data-slot="sidebar-menu-badge"]:has([data-slot="badge"]) {
+  /* Status chip — same treatment as Badge (border-based, no decorative fill) */
+  & [data-slot="status-badge"] {
+    border-width: 2px !important;
+    border-color: var(--foreground) !important;
+    background-color: var(--background) !important;
+    font-weight: 700 !important;
+    box-shadow: none !important;
+    outline: none !important;
+    color: var(--foreground) !important;
+  }
+
+  /* Sidebar wrapper is positioning-only when it wraps Badge/StatusBadge — avoid double border */
+  & [data-slot="sidebar-menu-badge"]:has([data-slot="badge"]),
+  & [data-slot="sidebar-menu-badge"]:has([data-slot="status-badge"]) {
     border-width: 0 !important;
     background-color: transparent !important;
     box-shadow: none !important;
@@ -858,7 +1144,7 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
     outline: none !important;
   }
 
-  & [data-slot="sidebar-menu-badge"]:not(:has([data-slot="badge"])) {
+  & [data-slot="sidebar-menu-badge"]:not(:has([data-slot="badge"])):not(:has([data-slot="status-badge"])) {
     border-width: 2px !important;
     border-color: currentColor !important;
     background-color: var(--background) !important;
@@ -894,7 +1180,7 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
     color: var(--foreground) !important;
   }
 
-  /* List / menu rows — highlighted row uses Highlight brand color */
+  /* List / menu rows — Highlight brand color for selection */
   & [data-slot="dropdown-menu-item"][data-highlighted],
   & [data-slot="dropdown-menu-checkbox-item"][data-highlighted],
   & [data-slot="dropdown-menu-radio-item"][data-highlighted],
@@ -924,8 +1210,9 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
 
   & [data-slot="view-segmented-item"][aria-pressed="true"],
   & [data-slot="view-segmented-item"][aria-checked="true"] {
-    outline: 2px solid currentColor !important;
-    outline-offset: -2px !important;
+    background-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+    outline: none !important;
   }
 
   /* Floating surfaces — portal menus, popovers, sheets, dialogs */
@@ -963,7 +1250,7 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
     color: var(--dt-row-selected-fg) !important;
   }
 
-  /* Table selected rows — Highlight brand color (like MS Teams selection)  */
+  /* Table selected rows — Highlight brand color (like MS Teams selection) */
   & tr[data-state="selected"] {
     background-color: var(--dt-row-selected) !important;
     color: var(--dt-row-selected-fg) !important;
@@ -971,22 +1258,23 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
   & tr[data-state="selected"] *:not([data-slot="checkbox"] *):not([data-slot="badge"] *):not([data-slot="checkbox"]):not([data-slot="badge"]) {
     color: var(--accent-foreground) !important;
   }
-  & tr[data-state="selected"] [data-slot="checkbox"][data-state="checked"],
-  & tr[data-state="selected"] [data-slot="checkbox"][data-state="indeterminate"] {
+  & tr[data-state="selected"] [data-slot="badge"] {
     background-color: var(--accent-foreground) !important;
-    border-color: var(--accent-foreground) !important;
     color: var(--accent) !important;
+    border-color: var(--accent-foreground) !important;
   }
-  & tr[data-state="selected"] [data-slot="checkbox"][data-state="checked"] *,
-  & tr[data-state="selected"] [data-slot="checkbox"][data-state="indeterminate"] * {
+  & tr[data-state="selected"] [data-slot="badge"] * {
     color: var(--accent) !important;
   }
-  & tr[data-state="selected"] [data-slot="badge"] {
+
+  & tr[data-state="selected"] [data-slot="checkbox"][data-state="checked"],
+  & tr[data-state="selected"] [data-slot="checkbox"][data-state="indeterminate"] {
     background-color: var(--accent-foreground) !important;
-    color: var(--accent) !important;
     border-color: var(--accent-foreground) !important;
+    color: var(--accent) !important;
   }
-  & tr[data-state="selected"] [data-slot="badge"] * {
+  & tr[data-state="selected"] [data-slot="checkbox"][data-state="checked"] *,
+  & tr[data-state="selected"] [data-slot="checkbox"][data-state="indeterminate"] * {
     color: var(--accent) !important;
   }
   & tr[data-state="selected"] [data-slot="checkbox"]:not([data-state="checked"]):not([data-state="indeterminate"]) {
@@ -1009,7 +1297,7 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
     /* Downstream: pair with a ⚠ icon in the component for non-colour signal */
   }
 
-  /* ── Pattern 3: Active nav / toggle items — Highlight brand fill ── */
+  /* ── Pattern 3: Active nav — Highlight brand fill (like MS Teams) ── */
   & [data-slot="sidebar-menu-button"][data-active="true"] {
     background-color: var(--accent) !important;
     color: var(--accent-foreground) !important;
@@ -1080,23 +1368,21 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
     background-color: var(--accent-foreground) !important;
   }
 
-  /* ── Pattern 3f: Select / dropdown item focus — accent is too subtle;
-       force visible inverted selection for keyboard focus (CSS :focus).
-       data-highlighted is already handled above; this catches native focus. ── */
+  /* ── Pattern 3f: Select / dropdown item focus — Highlight brand fill ── */
   & [data-slot="select-item"]:focus,
   & [data-slot="dropdown-menu-item"]:focus,
   & [data-slot="dropdown-menu-checkbox-item"]:focus,
   & [data-slot="dropdown-menu-radio-item"]:focus,
   & [data-slot="dropdown-menu-sub-trigger"]:focus {
-    background-color: var(--foreground) !important;
-    color: var(--background) !important;
+    background-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
   }
   & [data-slot="select-item"]:focus *,
   & [data-slot="dropdown-menu-item"]:focus *,
   & [data-slot="dropdown-menu-checkbox-item"]:focus *,
   & [data-slot="dropdown-menu-radio-item"]:focus *,
   & [data-slot="dropdown-menu-sub-trigger"]:focus * {
-    color: var(--background) !important;
+    color: var(--accent-foreground) !important;
   }
 
   /* ── Pattern 3g: Dropdown check / radio indicator — inherit from parent ── */
@@ -1140,7 +1426,7 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
     color: var(--foreground) !important;
   }
 
-  /* ── Pattern 9: Avatars — border-defined, strip blend modes, force contrast ── */
+  /* ── Pattern 9: Avatars — thicken ring, strip blend modes, force contrast ── */
   & [data-slot="avatar"] {
     border: 2px solid var(--foreground) !important;
   }
@@ -1186,12 +1472,6 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
   }
 
   /* ── Pattern 13: Strip ALL hardcoded Tailwind palette colors ──────────── */
-  /*    Banners, board columns, status pills, placement badges, etc. use     */
-  /*    hardcoded emerald/amber/blue/red/slate/yellow classes. In HC these   */
-  /*    MUST collapse to foreground text + border. Strip bg fills, force     */
-  /*    foreground text. (Microsoft HC: no semantic colors except error.)    */
-
-  /* Banner variants (info/warning/error/success) — border + text only */
   & [data-slot="banner"],
   & [data-slot="local-banner"] {
     background-color: var(--background) !important;
@@ -1204,14 +1484,12 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
     color: var(--foreground) !important;
   }
 
-  /* Chart containers — add border between series, strip vivid fills */
   & .recharts-bar-rectangle,
   & .recharts-funnel-trapezoid {
     stroke: var(--background) !important;
     stroke-width: 2 !important;
   }
 
-  /* Progress bars — container gets border, indicator uses foreground */
   & [role="progressbar"] {
     border: 1px solid var(--foreground) !important;
     background-color: var(--background) !important;
@@ -1220,9 +1498,6 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
     background-color: var(--foreground) !important;
   }
 
-  /* Generic: any element using Tailwind color utility that escapes tokens.
-     Force all text to foreground in the HC subtree except already-handled
-     inverted contexts (selected rows, highlighted items, buttons).        */
   & [class*="text-emerald"],
   & [class*="text-amber"],
   & [class*="text-red-"],
@@ -1236,8 +1511,6 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
     color: var(--foreground) !important;
   }
 
-  /* Brand-colored text/bg — map to HC highlight instead of foreground so
-     brand accent remains visually distinct (Ask Leo icon, product tints)  */
   & [class*="text-brand"] {
     color: var(--accent) !important;
   }
@@ -1275,6 +1548,19 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
   }
 }
 
+/* Coach mark HC override (top-level, outside nesting — bulletproof for portaled content) */
+html:is([data-contrast="high"], [data-contrast="windows"]) [data-slot="coach-mark"] {
+  border: 2px solid var(--foreground) !important;
+  background: var(--background) !important;
+  background-color: var(--background) !important;
+  color: var(--foreground) !important;
+  background-image: none !important;
+  opacity: 1 !important;
+}
+html:is([data-contrast="high"], [data-contrast="windows"]) [data-slot="coach-mark"] *:not(button):not(button *) {
+  color: var(--foreground) !important;
+}
+
 /* ── OS-level "Increase Contrast" — macOS / iOS / Android ───────────────── */
 @media (prefers-contrast: more) {
   :root:not([data-contrast="off"]):not([data-contrast="windows"]) {
@@ -1345,9 +1631,8 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
     box-shadow: none !important;
   }
 
-  /* Positioning shell around <Badge/> or <StatusBadge/> — do not draw a second ring */
-  [data-slot="sidebar-menu-badge"]:has([data-slot="badge"]),
-  [data-slot="sidebar-menu-badge"]:has([data-slot="status-badge"]) {
+  /* Positioning shell around <Badge/> — do not draw a second ring */
+  [data-slot="sidebar-menu-badge"]:has([data-slot="badge"]) {
     border: none !important;
     background: transparent !important;
     outline: none !important;
@@ -1355,7 +1640,6 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
   }
 
   [data-slot="badge"],
-  [data-slot="status-badge"],
   [data-slot="view-toolbar-count"] {
     border: 2px solid CanvasText !important;
     background-color: Canvas !important;
@@ -1365,7 +1649,6 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
   }
 
   [data-slot="badge"] *,
-  [data-slot="status-badge"] *,
   [data-slot="view-toolbar-count"] * {
     color: CanvasText !important;
   }
@@ -1405,8 +1688,7 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
   [data-slot="dropdown-menu-radio-item"][data-highlighted]:not([data-disabled]),
   [data-slot="dropdown-menu-sub-trigger"][data-highlighted]:not([data-disabled]),
   [data-slot="select-item"][data-highlighted]:not([data-disabled]),
-  /* cmdk sets data-selected="false" on every row — [data-selected] matches all; use ="true" only */
-  [data-slot="command-item"][data-selected="true"]:not([data-disabled]),
+  [data-slot="command-item"][data-selected]:not([data-disabled]),
   [data-slot="command-item"][aria-selected="true"]:not([data-disabled]) {
     background-color: Highlight !important;
     color: HighlightText !important;
@@ -1417,7 +1699,7 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
   [data-slot="dropdown-menu-radio-item"][data-highlighted] *,
   [data-slot="dropdown-menu-sub-trigger"][data-highlighted] *,
   [data-slot="select-item"][data-highlighted] *,
-  [data-slot="command-item"][data-selected="true"] *,
+  [data-slot="command-item"][data-selected] *,
   [data-slot="command-item"][aria-selected="true"] * {
     color: HighlightText !important;
   }
@@ -1440,7 +1722,7 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
     outline: none !important;
   }
 
-  /* Sidebar active item — Highlight brand fill (like MS Teams) */
+  /* Sidebar active item — Highlight brand fill */
   [data-slot="sidebar-menu-button"][data-active="true"] {
     background-color: Highlight !important;
     color: HighlightText !important;
@@ -1516,17 +1798,20 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
     background-color: HighlightText !important;
     color: Highlight !important;
   }
+  /* Badge in forced-colors — opaque canvas bg */
   [data-slot="badge"] {
     background-color: Canvas !important;
     border-color: CanvasText !important;
     color: CanvasText !important;
   }
 
+  /* Checked checkboxes — Highlight fill */
   [data-slot="checkbox"][data-state="checked"] *,
   [data-slot="checkbox"][data-state="indeterminate"] * {
     color: HighlightText !important;
   }
 
+  /* Avatar in forced-colors */
   [data-slot="avatar"] {
     border: 2px solid CanvasText !important;
   }
@@ -1538,7 +1823,7 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
     color: CanvasText !important;
   }
 
-  /* Checked checkboxes / radios — Highlight brand fill */
+  /* Checked checkboxes / radios — Highlight fill */
   [data-slot="checkbox"][data-state="checked"],
   [data-slot="checkbox"][data-state="indeterminate"] {
     background-color: Highlight !important;
@@ -1549,9 +1834,6 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
     background-color: Highlight !important;
     border-color: Highlight !important;
   }
-  [data-slot="radio-group-item"][data-state="checked"] [data-slot="radio-group-indicator"] span {
-    background-color: HighlightText !important;
-  }
 
   /* Switch ON — Highlight fill */
   [role="switch"][aria-checked="true"] {
@@ -1723,7 +2005,12 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
        layout (spacing, heights, radii) is unaffected at any zoom level. */
     font-size: 0.875rem;
     line-height: 1.5;
-    /* Font smoothing: see apps/web/app/globals.css body block (macOS-only effect; Windows ClearType unchanged). */
+    /* Font smoothing (Tailwind `antialiased` = -webkit-font-smoothing + -moz-osx):
+       Industry practice per Josh Comeau’s CSS reset and 2024 cross-browser testing
+       (e.g. David Bushell): the -webkit property affects macOS WebKit browsers only —
+       it tones down browser-only subpixel AA (Mojave+ system UI already moved away).
+       Windows/Linux/iOS/Android: no practical effect; OS font rasterizer (ClearType, etc.)
+       owns rendering. Safe to apply on body for Mac parity without changing Windows output. */
   }
 
   html {
@@ -1762,11 +2049,14 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
 
   /* ── Touch targets (WCAG 2.5.5) ─────────────────────────────── */
   /* Applied via utility: min-h-[var(--control-height-touch)]      */
-  /* Global touch-target baseline for interactive elements on mobile */
-  @media (max-width: 767px) {
+  /* Coarse pointer only: browser zoom (200–400%) shrinks the *layout* viewport
+     in CSS px, so max-width: 767px becomes true on desktop — without pointer: coarse,
+     44px min-height hits every button and [role=checkbox], stretching 16px-wide
+     checkboxes into tall pills and blowing up table/toolbar controls. Real phones
+     and tablets report pointer: coarse. */
+  @media (max-width: 767px) and (pointer: coarse) {
     button,
     [role="button"],
-    [role="checkbox"],
     [role="radio"],
     [role="switch"],
     [role="menuitem"],
@@ -1775,6 +2065,7 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
       min-height: var(--control-height-touch, 44px);
     }
   }
+  /* Checkboxes use compact box + pseudo-element hit slop (see ui/checkbox). */
 
   /* ── Heading hierarchy ───────────────────────────────────────── */
   /* Ivy Presto (font-heading) applied ONLY via explicit class/inline style
@@ -1861,6 +2152,58 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
   .banner-prism {
     background-color: var(--banner-prism-bg);
   }
+
+  /* Sidebar nav — little pop when an item becomes active. Key swap on the
+     wrapper remounts the span, so the animation replays on selection. */
+  @keyframes sidebar-icon-pop {
+    0%   { opacity: 0.4; transform: scale(0.7)  rotate(-6deg); }
+    60%  { opacity: 1;   transform: scale(1.15) rotate(2deg); }
+    100% { opacity: 1;   transform: scale(1)    rotate(0); }
+  }
+
+  /* Radix Collapsible / Accordion — slide the children open/closed using the
+     `--radix-collapsible-content-height` CSS var that Radix sets on the
+     content element. Mirrors the shadcn accordion pattern (Tailwind v3
+     "accordion-down" / "accordion-up"); we keep our own name so it can be
+     reused by both Collapsible and Accordion primitives. */
+  @keyframes collapsible-down {
+    from { height: 0; }
+    to   { height: var(--radix-collapsible-content-height); }
+  }
+  @keyframes collapsible-up {
+    from { height: var(--radix-collapsible-content-height); }
+    to   { height: 0; }
+  }
+
+  /* Ask Leo suggestion chips — staggered fade-in + lift on first render. */
+  @keyframes leo-chip-in {
+    0%   { opacity: 0; transform: translateY(8px) scale(0.96); }
+    100% { opacity: 1; transform: translateY(0)   scale(1); }
+  }
+
+  /* Leo typing indicator — 3 dots bouncing opacity/scale, staggered via delay. */
+  @keyframes leo-typing-dot {
+    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
+    40%           { opacity: 1;   transform: scale(1); }
+  }
+
+  /* Whole-panel brand radial glow pulse — runs on the BG layer while Leo thinks. */
+  @keyframes leo-panel-pulse {
+    0%, 100% { opacity: 0.5;  transform: scale(1); }
+    50%      { opacity: 0.75; transform: scale(1.01); }
+  }
+
+  /* Chart “Leo insight” marker — soft breathing halo behind the chip. */
+  @keyframes leo-chart-insight-halo {
+    0%, 100% { opacity: 0.45; transform: scale(1); }
+    50%      { opacity: 0.72; transform: scale(1.12); }
+  }
+
+  /* Accent dot on the insight marker — gentle pulse (respect motion-reduce in markup). */
+  @keyframes leo-chart-insight-dot {
+    0%, 100% { opacity: 0.9; transform: scale(1); }
+    50%      { opacity: 1; transform: scale(1.35); }
+  }
 }
 
 /* After all @layer rules: win over Tailwind preflight / layer merge so real controls show a pointer. */