@exxatdesignux/ui 0.2.18 → 0.3.0

package/template/app/globals.css

@@ -1,1979 +1,20 @@
 /* ==========================================================================
-   EXXAT DESIGN SYSTEM — globals.css
-   Brands: Exxat One (Lavender · hue 270) · Exxat Prism (Rose · hue 343)
+   EXXAT DESIGN SYSTEM — apps/web globals.css
+   ------------------------------------------------------------------
+   Canonical theme tokens, custom variants, and base-layer styles
+   live in `@exxatdesignux/ui/globals.css`. Edits should land there
+   (the package CSS is the source of truth); this file only declares
+   the Tailwind `@source` so the consumer's location is honoured.
+
+   Workspace dev: `@source` points at the package's `src/` directly so
+   the IDE / Turbopack pick up new utility usages without a rebuild.
+   The `sync-template-from-web.mjs` script rewrites this path to
+   `../node_modules/@exxatdesignux/ui/src` for the npm starter.
+
    Standard: WCAG 2.1 Level AA
-     • Text contrast ≥ 4.5 : 1  (SC 1.4.3)
-     • UI control contrast ≥ 3 : 1  (SC 1.4.11)
-     • Focus ring ≥ 3 : 1  (SC 2.4.11)
-     • Touch targets ≥ 44 × 44 px  (SC 2.5.5 / mobile)
    ========================================================================== */
 
-@import "tailwindcss";
-@import "tw-animate-css";
+@import "@exxatdesignux/ui/globals.css";
 
 /* Ensure Tailwind scans the shared UI package for utility classes (repo-relative — stable with pnpm + Turbopack). */
 @source "../node_modules/@exxatdesignux/ui/src";
-
-/* RTL layout direction support */
-@custom-variant dark (&:is(.dark *));
-
-/* High-contrast variant — in-app High or Windows (JSON) contrast */
-@custom-variant hc (&:is([data-contrast="high"] *, [data-contrast="windows"] *));
-
-/* --------------------------------------------------------------------------
-   Tailwind v4 theme bridge — maps CSS custom-props → utility classes
-   -------------------------------------------------------------------------- */
-@theme inline {
-  /* Typography */
-  --font-heading: "ivypresto-text";
-  --font-sans:    "Inter", ui-sans-serif, system-ui, sans-serif;
-  /* Minimum product text: 11px — use `text-xs` or larger; avoid arbitrary classes below 11px */
-  --text-xs: 0.6875rem; /* 11px at 16px root */
-
-  /* Semantic color map */
-  --color-background:              var(--background);
-  --color-foreground:              var(--foreground);
-  --color-card:                    var(--card);
-  --color-card-foreground:         var(--card-foreground);
-  --color-popover:                 var(--popover);
-  --color-popover-foreground:      var(--popover-foreground);
-  --color-primary:                 var(--primary);
-  --color-primary-foreground:      var(--primary-foreground);
-  --color-secondary:               var(--secondary);
-  --color-secondary-foreground:    var(--secondary-foreground);
-  --color-muted:                   var(--muted);
-  --color-muted-foreground:        var(--muted-foreground);
-  --color-accent:                  var(--accent);
-  --color-accent-foreground:       var(--accent-foreground);
-  --color-destructive:             var(--destructive);
-  --color-destructive-foreground:  var(--destructive-foreground);
-  --color-border:                  var(--border);
-  --color-border-control:          var(--border-control);
-  --color-input:                   var(--input);
-  --color-input-background:        var(--input-background);
-  --color-ring:                    var(--ring);
-  /* Modal / sheet / drawer scrim */
-  --color-overlay:                 var(--overlay);
-
-  /* Chart tokens */
-  --color-chart-1:  var(--chart-1);
-  --color-chart-2:  var(--chart-2);
-  --color-chart-3:  var(--chart-3);
-  --color-chart-4:  var(--chart-4);
-  --color-chart-5:  var(--chart-5);
-
-  /* Chip / badge tokens (AA-compliant on light bg: ≥ 4.5:1) */
-  --color-chip-1:            var(--chip-1);
-  --color-chip-2:            var(--chip-2);
-  --color-chip-3:            var(--chip-3);
-  --color-chip-4:            var(--chip-4);
-  --color-chip-5:            var(--chip-5);
-  --color-chip-destructive:  var(--chip-destructive);
-
-  /* Brand accent + Exxat One tint scale (see :root --brand-*) */
-  --color-brand:              var(--brand-color);
-  --color-brand-dark:         var(--brand-color-dark);
-  --color-brand-foreground:   var(--brand-foreground);
-  --color-brand-tint:         var(--brand-tint);
-  --color-brand-tint-light:   var(--brand-tint-light);
-  --color-brand-tint-subtle:  var(--brand-tint-subtle);
-  --color-brand-color-light:  var(--brand-color-light);
-  --color-brand-deep:         var(--brand-color-deep);
-
-  /* Prism banner highlight */
-  --color-banner-prism:  var(--banner-prism-bg);
-
-  /* Sidebar */
-  --color-sidebar:                    var(--sidebar);
-  --color-sidebar-foreground:         var(--sidebar-foreground);
-  --color-sidebar-primary:            var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent:             var(--sidebar-accent);
-  --color-sidebar-accent-foreground:  var(--sidebar-accent-foreground);
-  --color-sidebar-border:             var(--sidebar-border);
-  --color-sidebar-ring:               var(--sidebar-ring);
-  /* WCAG 1.4.3 — always mixed against real --sidebar (lavender / rose / dark) */
-  --color-sidebar-section-label:      var(--sidebar-section-label-foreground);
-
-  /* Interactive hover — single source for ghost controls, lists, table chrome */
-  --color-interactive-hover:                    var(--interactive-hover);
-  --color-interactive-hover-foreground:         var(--interactive-hover-foreground);
-  --color-interactive-hover-subtle:             var(--interactive-hover-subtle);
-  --color-interactive-hover-soft:               var(--interactive-hover-soft);
-  --color-interactive-hover-medium:             var(--interactive-hover-medium);
-  --color-interactive-hover-strong:             var(--interactive-hover-strong);
-  --color-interactive-hover-row:                var(--interactive-hover-row);
-
-  /* DataTable — opaque surfaces for pinned/sticky cells and row states */
-  --color-dt-row-bg:             var(--dt-row-bg);
-  --color-dt-row-hover:          var(--dt-row-hover);
-  --color-dt-row-selected:       var(--dt-row-selected);
-  --color-dt-row-selected-fg:    var(--dt-row-selected-fg);
-  --color-dt-header-bg:          var(--dt-header-bg);
-  --color-dt-group-bg:           var(--dt-group-bg);
-  --color-dt-new-row-bg:         var(--dt-new-row-bg);
-  --color-dt-new-row-border:     var(--dt-new-row-border);
-
-  /* Border-radius scale (4 px base → 8 px default) */
-  --radius-sm:  4px;
-  --radius-md:  8px;
-  --radius-lg:  12px;
-  --radius-xl:  16px;
-  --radius-2xl: 20px;
-  --radius-3xl: 24px;
-}
-
-/* --------------------------------------------------------------------------
-   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; /* ~11px when 1rem ≈ 15px */
-}
-html[data-text-size="large"] {
-  font-size: 112.5%;
-}
-
-/* ==========================================================================
-   :root — Exxat One · Light Mode (brand hue 286.1)
-   All contrast ratios verified against oklch(1 0 0) white background.
-   ========================================================================== */
-:root {
-  /* font-size intentionally NOT overridden here.
-     Shadcn components assume 1rem = 16px (browser default).
-     Overriding to 87.5% / 14px breaks rem-based spacing on all devices,
-     and compounds incorrectly at Windows 150% system zoom.
-     If a compact 14px density is needed, apply it at the component/page level
-     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";
-
-  /* ── Brand — Exxat One (hue 286.1) ─────────────────────────── */
-  /* Primary surface — requested token */
-  --brand-tint:        oklch(0.9676 0.016 286.1);
-  /* Lighter / darker washes (same hue) for nested UI & hovers */
-  --brand-tint-light:  oklch(0.993 0.007 286.1);
-  --brand-tint-subtle: oklch(0.935 0.024 286.1);
-  /* Interactive accent + scale (readable on white; pairs with --brand-tint) */
-  --brand-color:       oklch(0.50 0.14 286.1);
-  --brand-color-light: oklch(0.78 0.09 286.1);
-  --brand-color-dark:  oklch(0.38 0.11 286.1);
-  --brand-color-deep:  oklch(0.28 0.085 286.1);
-  --brand-foreground:  oklch(0.985 0 0);
-  /* Fixed swatches for brand picker (Exxat One vs Prism), independent of active theme */
-  --brand-preview-one:   var(--brand-tint);
-  --brand-preview-prism: oklch(0.57 0.24 342);
-
-  /**
-   * Ask Leo panel tints (same mixes as the vertical wash). Use for blobs, cards, etc.
-   * `--leo-surface-gradient` is the full linear wash on `AskLeoSidebar`.
-   */
-  --leo-surface-tint-a: color-mix(in oklch, var(--brand-color) 4%, var(--background));
-  --leo-surface-tint-b: color-mix(in oklch, var(--brand-color) 8%, var(--background));
-  --leo-surface-gradient: linear-gradient(180deg, var(--leo-surface-tint-a) 0%, var(--leo-surface-tint-b) 100%);
-
-  /* KeyMetrics `variant="flat"` — no band 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) 20%, transparent) 0%,
-    color-mix(in oklch, var(--brand-color) 8%, transparent) 42%,
-    transparent 72%
-  );
-  --key-metrics-flat-band-shadow: none;
-  --key-metrics-card-glow-radial: radial-gradient(
-    ellipse 110% 90% at 50% 100%,
-    color-mix(in oklch, var(--brand-color) 18%, transparent) 0%,
-    transparent 65%
-  );
-
-  /* ── Surfaces ────────────────────────────────────────────────── */
-  --background:         oklch(1 0 0);
-  --foreground:         oklch(0.145 0 0);           /* ≈ #1A1A1A — 17:1 on white ✓ */
-  --card:               oklch(1 0 0);
-  --card-foreground:    oklch(0.145 0 0);
-  --popover:            oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-
-  /* ── Primary ─────────────────────────────────────────────────── */
-  /* Default / ghost / solid primary actions — neutral charcoal (style guide) */
-  --primary:            oklch(0.3457 0.0052 286.13);
-  --primary-foreground: oklch(0.985 0 0);
-
-  /* ── Secondary / Muted / Accent ──────────────────────────────── */
-  --secondary:             oklch(0.95 0.0058 264.53);
-  --secondary-foreground:  oklch(0.082 0 0);
-  --muted:                 oklch(0.945 0.002 270);
-  --muted-foreground:      oklch(0.50 0.012 270);   /* 5.5:1 on white ✓ */
-  --accent:                oklch(0.925 0.005 260);
-  --accent-foreground:     oklch(0.082 0 0);
-
-  /* ── Destructive ─────────────────────────────────────────────── */
-  /* oklch(0.55 0.22 25) ≈ #C0392B — 5.1:1 on white ✓             */
-  --destructive:            oklch(0.55 0.22 25);
-  --destructive-foreground: oklch(1 0 0);
-
-  /* ── Borders ─────────────────────────────────────────────────── */
-  /* Decorative: cards, dividers — no AA contrast requirement        */
-  --border: oklch(0.92 0.002 270);
-
-  /* Form-field boundary — WCAG 1.4.11 requires 3:1 against bg.
-     --border-control-3: L=0.62 ≈ #90929A → borderline; use with care.
-     --border-control-35: L=0.25 → ≥ 3.5:1 — recommended for inputs.   */
-  --border-control:    oklch(0.82 0.004 270);   /* subtle (layout use only) */
-  --border-control-3:  oklch(0.6196 0.0092 270); /* ≈ 3:1 on white (minimum) */
-  --border-control-35: oklch(0.25 0.01 270);    /* ≈ 3.5:1+ (recommended)   */
-  --control-border:    var(--border-control-3);  /* default form-field border */
-
-  /* ── Input ───────────────────────────────────────────────────── */
-  /* 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 ──────────────────────────────────────────────── */
-  /* 3:1+ contrast on both light & dark backgrounds (WCAG 2.4.11)  */
-  --ring: oklch(0.25 0 0);
-
-  /* ── Charts ──────────────────────────────────────────────────── */
-  --chart-1: oklch(0.55 0.22 264.116);
-  --chart-2: oklch(0.48 0.15 184.704);
-  --chart-3: oklch(0.32 0.08 227.392);
-  --chart-4: oklch(0.65 0.18 84.429);
-  --chart-5: oklch(0.58 0.18 70.08);
-
-  /* ── Chip / Badge ────────────────────────────────────────────── */
-  /* AA-compliant on white: all ≥ 4.5:1 (WCAG 1.4.3)              */
-  --chip-1:           oklch(0.38 0.18 264);   /* indigo   */
-  --chip-2:           oklch(0.35 0.14 184);   /* teal     */
-  --chip-3:           oklch(0.32 0.08 227);   /* slate    */
-  --chip-4:           oklch(0.42 0.12 84);    /* amber    */
-  --chip-5:           oklch(0.42 0.14 70);    /* orange   */
-  --chip-destructive: oklch(0.40 0.18 25);    /* red      */
-
-  /* ── Prism promo banner ──────────────────────────────────────── */
-  /* Rose hue 343 — used universally regardless of active theme    */
-  --banner-prism-bg: oklch(0.97 0.02 343);
-
-  /* ── Sidebar — Exxat One brand tint ───────────────────────────── */
-  --sidebar:                    var(--brand-tint);
-  --sidebar-foreground:         oklch(0.145 0 0);
-  --sidebar-primary:            oklch(0.082 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent:             oklch(0.945 0.025 286.1);
-  --sidebar-accent-foreground:  oklch(0.3457 0.0052 286.13);
-  --sidebar-border:             oklch(0.92 0.025 286.1);
-  --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 `--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 */
-  --theme-color-chrome: #f3f2f8;
-
-  /* ── Border radius ───────────────────────────────────────────── */
-  --radius: 0.5rem; /* 8px base */
-
-  /* ── Density / touch targets ─────────────────────────────────── */
-  --scaling:              1;
-  --control-height:       calc(40px * var(--scaling));
-  --control-height-sm:    calc(32px * var(--scaling));
-  /* WCAG 2.5.5 — minimum 44×44 px touch target (mobile only)     */
-  --control-height-touch: 44px;
-  --control-padding-y:    calc(8px  * var(--scaling));
-  --control-padding-x:    calc(12px * var(--scaling));
-  --table-row-height:     calc(48px * var(--scaling));
-
-  /* ── Interactive hover (ties to --muted / --accent — theme overrides apply) ─ */
-  --interactive-hover:            var(--muted);
-  --interactive-hover-foreground: var(--foreground);
-  --interactive-hover-subtle:     color-mix(in oklch, var(--muted) 50%, var(--background));
-  --interactive-hover-soft:       color-mix(in oklch, var(--muted) 40%, var(--background));
-  --interactive-hover-medium:     color-mix(in oklch, var(--muted) 60%, var(--background));
-  --interactive-hover-strong:     color-mix(in oklch, var(--muted) 70%, var(--background));
-  --interactive-hover-row:        color-mix(in oklch, var(--accent) 50%, var(--background));
-
-  /* ── DataTable — opaque row/cell surfaces (pinned cells MUST be opaque) ── */
-  --dt-row-bg:             var(--background);
-  --dt-row-hover:          oklch(0.972 0.001 270);
-  --dt-row-selected:       oklch(0.962 0.003 260);
-  --dt-row-selected-fg:    var(--foreground);
-  --dt-header-bg:          var(--background);
-  --dt-group-bg:           oklch(0.972 0.001 270);
-  --dt-new-row-bg:         oklch(from var(--brand-color) 0.985 0.006 h);
-  --dt-new-row-border:     var(--brand-color);
-
-  /* ── Transitions ─────────────────────────────────────────────── */
-  --transition-fast:   0.15s ease;
-  --transition-normal: 0.25s ease-in-out;
-  --transition-colors: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
-
-  /* ── Shadows ─────────────────────────────────────────────────── */
-  --shadow-sm: oklch(0 0 0 / 0.08) 0px 1px 2px 0px;
-  --shadow-md: oklch(0 0 0 / 0.08) 0px 2px 4px -1px, oklch(0 0 0 / 0.06) 0px 1px 2px;
-  --shadow-lg: oklch(0 0 0 / 0.10) 0px 4px 8px -2px, oklch(0 0 0 / 0.06) 0px 2px 4px;
-
-  /* ── Sticky column edge fade (data tables) ───────────────────── */
-  --sticky-edge-fade: oklch(0 0 0 / 0.08);
-
-  /* ── Overlay scrim (Sheet / Drawer / Dialog) ─────────────────── */
-  /* Softer than raw bg-black/10; follows foreground hue (not pure black) */
-  --overlay: color-mix(in oklch, var(--foreground) 5%, transparent);
-
-  /* ── Avatar initials (table) ───────────────────────────────────── */
-  /* Soft brand wash + brand ink — no black fills; ≥4.5:1 on white rows */
-  --avatar-initials-bg: color-mix(in oklch, var(--brand-color) 14%, oklch(1 0 0));
-  --avatar-initials-fg: var(--brand-color-dark);
-
-  /* ── KPI insight severity (KeyMetrics) ────────────────────────── */
-  --insight-severity-warning-bg: color-mix(in oklch, var(--chart-4) 15%, transparent);
-  --insight-severity-warning-fg: color-mix(in oklch, var(--chart-4) 75%, var(--foreground));
-  --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 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);
-  --icon-disc-chart-4-fg: var(--chip-4);
-  --icon-disc-brand-bg: color-mix(in oklch, var(--brand-color) 12%, transparent);
-  --icon-disc-brand-fg: var(--brand-color-dark);
-  --icon-disc-danger-bg: color-mix(in oklch, var(--destructive) 14%, transparent);
-  --icon-disc-danger-fg: var(--chip-destructive);
-
-  /* ── Conditional formatting rule backgrounds (table drawer) ─── */
-  --conditional-rule-green: color-mix(in oklch, var(--chart-2) 22%, transparent);
-  --conditional-rule-yellow: color-mix(in oklch, var(--chart-4) 30%, transparent);
-  --conditional-rule-blue: color-mix(in oklch, var(--chart-1) 22%, transparent);
-  --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);
-}
-
-/* ==========================================================================
-   Dark Mode — Exxat One base (neutral surfaces; brand uses --brand-*)
-   ========================================================================== */
-.dark {
-  --sticky-edge-fade: oklch(0 0 0 / 0.32);
-
-  /* Canvas — charcoal grey (not near-black) */
-  --background:         oklch(0.20 0.008 270);
-  --foreground:         oklch(0.985 0 0);
-  --card:               oklch(0.255 0.008 270);
-  --card-foreground:    oklch(0.985 0 0);
-  --popover:            oklch(0.255 0.008 270);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary:            oklch(0.985 0 0);
-  --primary-foreground: oklch(0.3457 0.0052 286.13);
-  --secondary:          oklch(0.31 0.04 270);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted:              oklch(0.31 0.04 270);
-  --muted-foreground:   oklch(0.72 0.012 270);   /* ≥ 4.5:1 on dark bg ✓ */
-  --accent:             oklch(0.33 0.06 270);
-  --accent-foreground:  oklch(0.985 0 0);
-  --destructive:        oklch(0.65 0.20 25);      /* brighter for dark bg */
-  --destructive-foreground: oklch(0.10 0 0);
-
-  /* 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%,
-    color-mix(in oklch, var(--brand-color) 10%, transparent) 42%,
-    transparent 72%
-  );
-  --key-metrics-flat-band-shadow: none;
-  --key-metrics-card-glow-radial: radial-gradient(
-    ellipse 110% 90% at 50% 100%,
-    color-mix(in oklch, var(--brand-color) 22%, transparent) 0%,
-    transparent 62%
-  );
-
-  /* Borders — visible but not washed out on dark surfaces */
-  --border:            oklch(0.38 0.008 270);
-  --border-control:    oklch(0.72 0.012 270);
-  --border-control-3:  oklch(0.78 0.012 270);
-  --border-control-35: oklch(0.75 0.012 270);
-  --control-border:    var(--border-control-3);
-
-  --input:             oklch(0.72 0.012 270);
-  --input-background:  oklch(0.255 0 0);
-
-  /* Focus ring — 3:1+ on dark bg */
-  --ring: oklch(0.85 0 0);
-
-  /* Charts — higher lightness for dark surfaces */
-  --chart-1: oklch(0.70 0.22 264.376);
-  --chart-2: oklch(0.75 0.15 162.48);
-  --chart-3: oklch(0.78 0.12 227.392);
-  --chart-4: oklch(0.80 0.18 84.429);
-  --chart-5: oklch(0.75 0.18 70.08);
-
-  /* Chips — AA-compliant on dark bg (L raised) */
-  --chip-1:           oklch(0.72 0.18 264);
-  --chip-2:           oklch(0.72 0.14 184);
-  --chip-3:           oklch(0.78 0.12 227);
-  --chip-4:           oklch(0.78 0.14 84);
-  --chip-5:           oklch(0.78 0.16 70);
-  --chip-destructive: oklch(0.72 0.18 25);
-
-  /* Tinted icon discs — same soft transparency wash; fg stays readable on dark canvas */
-  --icon-disc-chart-2-bg: color-mix(in oklch, var(--chart-2) 14%, transparent);
-  --icon-disc-chart-2-fg: color-mix(in oklch, var(--foreground) 10%, var(--chart-2));
-  --icon-disc-chart-4-bg: color-mix(in oklch, var(--chart-4) 14%, transparent);
-  --icon-disc-chart-4-fg: color-mix(in oklch, var(--foreground) 10%, var(--chart-4));
-  --icon-disc-brand-bg: color-mix(in oklch, var(--brand-color) 12%, transparent);
-  --icon-disc-brand-fg: color-mix(in oklch, var(--foreground) 8%, var(--brand-color));
-  --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-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-foreground:  oklch(0.985 0 0);
-  --sidebar-border:             oklch(0.38 0.010 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%);
-  --theme-color-chrome:         #2f2d36;
-
-  /* Lifted scrim on dark — white-tinted veil, not heavy black */
-  --overlay: color-mix(in oklch, var(--foreground) 10%, transparent);
-
-  /* Mid lavender chip + light text — no black circle; contrasts on dark table rows */
-  --avatar-initials-bg: color-mix(in oklch, var(--brand-color) 38%, oklch(0.40 0.05 286.1));
-  --avatar-initials-fg: oklch(0.99 0.01 286.1);
-
-  /* DataTable — opaque surfaces for dark mode */
-  --dt-row-bg:             var(--background);
-  --dt-row-hover:          oklch(0.24 0.01 270);
-  --dt-row-selected:       oklch(0.27 0.02 270);
-  --dt-row-selected-fg:    var(--foreground);
-  --dt-header-bg:          var(--background);
-  --dt-group-bg:           oklch(0.24 0.01 270);
-  --dt-new-row-bg:         oklch(from var(--brand-color) 0.22 0.02 h);
-  --dt-new-row-border:     var(--brand-color);
-}
-
-/* ==========================================================================
-   Theme: Exxat One · Lavender (explicit — also applied as :root default)
-   Usage: <html class="theme-one"> or <html class="theme-lavender">
-   ========================================================================== */
-.theme-one,
-.theme-lavender {
-  --brand-tint:         oklch(0.9676 0.016 286.1);
-  --brand-tint-light:   oklch(0.993 0.007 286.1);
-  --brand-tint-subtle:  oklch(0.935 0.024 286.1);
-  --brand-color:        oklch(0.50 0.14 286.1);
-  --brand-color-light:  oklch(0.78 0.09 286.1);
-  --brand-color-dark:   oklch(0.38 0.11 286.1);
-  --brand-color-deep:   oklch(0.28 0.085 286.1);
-  --ring:               var(--brand-color-dark);
-}
-
-/* Light surfaces only — must NOT override .dark (otherwise muted/accent stay “paper white” in dark mode) */
-.theme-one:not(.dark),
-.theme-lavender:not(.dark) {
-  --sidebar:        var(--brand-tint);
-  --sidebar-accent: oklch(0.945 0.025 286.1);
-  --sidebar-border: oklch(0.92 0.025 286.1);
-  --secondary:      oklch(0.95 0.012 286.1);
-  --accent:         oklch(0.925 0.015 286.1);
-  --muted:          oklch(0.945 0.008 286.1);
-}
-
-.theme-one.dark,
-.dark.theme-one,
-.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);
-  /* 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);
-  --brand-tint-light: oklch(0.30 0.014 286.1);
-}
-
-/* ==========================================================================
-   Theme: Exxat Prism · Rose · hue 343
-   Usage: <html class="theme-prism"> or <html class="theme-rose">
-   ========================================================================== */
-.theme-prism,
-.theme-rose {
-  --brand-tint:         oklch(0.97 0.02 343);
-  --brand-tint-light:   oklch(0.992 0.01 343);
-  --brand-tint-subtle:  oklch(0.93 0.028 343);
-  --brand-color:        oklch(0.57 0.24 342);   /* Prism rose */
-  --brand-color-light:  oklch(0.78 0.14 342);
-  --brand-color-dark:   oklch(0.42 0.24 342);
-  --brand-color-deep:   oklch(0.32 0.20 342);
-  --ring:               var(--brand-color-dark);
-}
-
-.theme-prism:not(.dark),
-.theme-rose:not(.dark) {
-  --sidebar:          oklch(0.97 0.02 343);
-  --sidebar-accent:   oklch(0.945 0.025 343);
-  --sidebar-border:   oklch(0.92 0.025 343);
-  --secondary:        oklch(0.95 0.012 343);
-  --accent:           oklch(0.925 0.015 343);
-  --muted:            oklch(0.945 0.008 343);
-  --banner-prism-bg:  oklch(0.97 0.02 343);
-  --theme-color-chrome: #fff5f9;
-}
-
-.theme-prism.dark,
-.dark.theme-prism,
-.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);
-  --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;
-  --brand-tint-light: oklch(0.30 0.014 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.008 159.88);
-  --sidebar:            oklch(0.245 0.015 159.88);
-  --sidebar-accent:     oklch(0.30 0.012 159.88);
-  --sidebar-border:     oklch(0.38 0.010 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;
-}
-
-/* ==========================================================================
-   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.008, calc(c * 0.10)) h);
-  --sidebar:            oklch(from var(--custom-product-brand-color) 0.245 max(0.015, calc(c * 0.18)) h);
-  --sidebar-accent:     oklch(from var(--custom-product-brand-color) 0.30  max(0.012, calc(c * 0.14)) h);
-  --sidebar-border:     oklch(from var(--custom-product-brand-color) 0.38  max(0.010, calc(c * 0.12)) 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);
-}
-
-/* ==========================================================================
-   HIGH CONTRAST MODE
-   ──────────────────────────────────────────────────────────────────────────
-   Three guiding principles (WCAG 1.4.6 Enhanced + research-backed UX):
-
-   1. FORCED-COLORS APPROACH
-      Strip gradients, shadows, and background images.
-      Use borders to define shape and elevation — not fills.
-      Limited palette: 4–6 named tokens, nothing decorative.
-
-   2. DON'T RELY ON COLOR ALONE
-      Error/warning states get a thick border AND an icon differentiator.
-      Charts and badges use luminance separation (grayscale steps), not hue.
-      Interactive state (hover / focus / active) is communicated via outline,
-      not background-color change alone.
-
-   3. DARK MODE ≠ HIGH CONTRAST
-      Dark mode  = aesthetic; uses subtle greys.
-      High-contrast dark = functional; uses near-black grey canvas, pure white
-      (#FFF), and a "hot" neon-yellow focus accent for maximum visibility.
-   ========================================================================== */
-
-/* ── Light High Contrast ─────────────────────────────────────────────────── */
-/*    Fluent 2 / Microsoft 6-color strategy.                                 */
-/*    Highlight = saturated bright brand color (follows theme hue).           */
-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);
-
-  --background:         oklch(1 0 0);
-  --foreground:         oklch(0.14 0 0);
-  --card:               oklch(1 0 0);
-  --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);
-  --sidebar-primary-foreground: oklch(1 0 0);
-  --sidebar-accent:             oklch(0.90 0 0);
-  --sidebar-accent-foreground:  oklch(0.14 0 0);
-  --sidebar-border:             oklch(0.14 0 0);
-  --sidebar-ring:               var(--hc-highlight);
-  --sidebar-section-label-foreground: oklch(0.40 0 0);
-  --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);
-  --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);
-  --interactive-hover:            oklch(0.88 0 0);
-  --interactive-hover-foreground: oklch(0.14 0 0);
-  --interactive-hover-subtle:     oklch(0.92 0 0);
-  --interactive-hover-soft:       oklch(0.92 0 0);
-  --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);
-  --dt-row-selected:    var(--accent);
-  --dt-row-selected-fg: var(--accent-foreground);
-  --dt-header-bg:       oklch(1 0 0);
-  --dt-group-bg:        oklch(0.92 0 0);
-  --dt-new-row-bg:      oklch(1 0 0);
-  --dt-new-row-border:  oklch(0.14 0 0);
-}
-
-/* ── Dark High Contrast ──────────────────────────────────────────────────── */
-/*    Same 6-color strategy inverted for dark canvas.                        */
-/*    Highlight = very bright saturated brand (like MS cyan but brand hue).  */
-html[data-contrast="high"].dark {
-  --hc-highlight: oklch(from var(--brand-color) 0.78 0.30 h);
-  --hc-highlight-text: oklch(0.08 0 0);
-
-  --background:         oklch(0.14 0 0);
-  --foreground:         oklch(0.96 0 0);
-  --card:               oklch(0.14 0 0);
-  --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);
-  --sidebar-primary-foreground: oklch(0.10 0 0);
-  --sidebar-accent:             oklch(0.24 0 0);
-  --sidebar-accent-foreground:  oklch(0.96 0 0);
-  --sidebar-border:             oklch(0.75 0 0);
-  --sidebar-ring:               var(--hc-highlight);
-  --sidebar-section-label-foreground: oklch(0.65 0 0);
-  --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);
-  --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);
-  --interactive-hover:            oklch(0.26 0 0);
-  --interactive-hover-foreground: oklch(0.96 0 0);
-  --interactive-hover-subtle:     oklch(0.22 0 0);
-  --interactive-hover-soft:       oklch(0.22 0 0);
-  --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);
-  --dt-row-selected:    var(--accent);
-  --dt-row-selected-fg: var(--accent-foreground);
-  --dt-header-bg:       oklch(0.14 0 0);
-  --dt-group-bg:        oklch(0.22 0 0);
-  --dt-new-row-bg:      oklch(0.14 0 0);
-  --dt-new-row-border:  oklch(0.96 0 0);
-}
-
-/* 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);
-  --brand-tint-subtle: oklch(0.98 0 0);
-}
-html:is([data-contrast="high"], [data-contrast="windows"]).dark {
-  --brand-tint:        oklch(0.22 0 0);
-  --brand-tint-light:  oklch(0.18 0 0);
-  --brand-tint-subtle: oklch(0.16 0 0);
-}
-
-/* ── Structural rules shared by BOTH light and dark HC ──────────────────── */
-/*    Pattern 1: "Borders over Fills" — strip decorative chrome              */
-html:is([data-contrast="high"], [data-contrast="windows"]) {
-
-  /* 1a. Remove ALL box-shadows (elevation via outline, not shadow) */
-  & * {
-    box-shadow: none !important;
-    text-shadow: none !important;
-  }
-
-  /* 1b. Strip gradient fills from cards; use border to define shape */
-  & [data-slot="card"] {
-    background-image: none !important;
-    border: 2px solid var(--foreground) !important;
-  }
-
-  /* 1c. Thicker borders on all form controls (WCAG 1.4.11: 3:1 UI contrast) */
-  & [data-slot="input"],
-  & [data-slot="select-trigger"],
-  & [data-slot="textarea"],
-  & [data-slot="checkbox"],
-  & [data-slot="switch"] {
-    border-width: 2px !important;
-    border-color: var(--foreground) !important;
-  }
-
-  /* 1d. Sidebar defined by its edge border, not background colour */
-  & [data-slot="sidebar"] {
-    border-inline-end: 2px solid var(--sidebar-border) !important;
-  }
-
-  /* 1e. Tab list — border not fill */
-  & [data-slot="tabs-list"] {
-    background-color: transparent !important;
-    border: 2px solid var(--foreground) !important;
-  }
-
-  /* 1f. Badge / chip — border-based; no decorative fills */
-  & [data-slot="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;
-  }
-
-  & [data-slot="badge"] * {
-    color: var(--foreground) !important;
-  }
-
-  /* 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;
-    outline: none !important;
-  }
-
-  & [data-slot="view-toolbar-count"] {
-    border-width: 2px !important;
-    border-color: currentColor !important;
-    background-color: var(--background) !important;
-    font-weight: 700 !important;
-    color: var(--foreground) !important;
-    box-shadow: none !important;
-    outline: none !important;
-  }
-
-  & [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;
-    font-weight: 700 !important;
-    color: var(--foreground) !important;
-  }
-
-  /* Segmented tab buttons: global HC button border + count pill border = double ring */
-  & button[data-slot="view-segmented-item"] {
-    border-width: 0 !important;
-    border-color: transparent !important;
-  }
-
-  /* Radix Tabs — active state must not rely on muted fill / pseudo underline only */
-  & [data-slot="tabs-trigger"] {
-    color: var(--foreground) !important;
-    opacity: 1 !important;
-  }
-
-  & [data-slot="tabs-trigger"][data-state="active"] {
-    background-color: var(--accent) !important;
-    color: var(--accent-foreground) !important;
-    outline: none !important;
-    font-weight: 600 !important;
-  }
-
-  /* KPI strip + chart card mini-metrics — force readable copy (muted grays fail in HC) */
-  & [data-slot="key-metrics"] :where(span, p, button, a, i, label, div) {
-    color: var(--foreground) !important;
-  }
-
-  & [data-slot="key-metrics"] :where(svg) {
-    color: var(--foreground) !important;
-  }
-
-  /* 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],
-  & [data-slot="dropdown-menu-sub-trigger"][data-highlighted],
-  & [data-slot="select-item"][data-highlighted],
-  & [data-slot="command-item"][data-selected],
-  & [data-slot="command-item"][aria-selected="true"] {
-    background-color: var(--accent) !important;
-    color: var(--accent-foreground) !important;
-  }
-
-  & [data-slot="dropdown-menu-item"][data-highlighted] *,
-  & [data-slot="dropdown-menu-checkbox-item"][data-highlighted] *,
-  & [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] *,
-  & [data-slot="command-item"][aria-selected="true"] * {
-    color: var(--accent-foreground) !important;
-  }
-
-  /* List hub views toolbar + segmented radiogroup (not Radix Tabs / tabs-list) */
-  & [data-slot="view-segmented-toolbar"] {
-    background-color: transparent !important;
-    border: 2px solid var(--foreground) !important;
-  }
-
-  & [data-slot="view-segmented-item"][aria-pressed="true"],
-  & [data-slot="view-segmented-item"][aria-checked="true"] {
-    background-color: var(--accent) !important;
-    color: var(--accent-foreground) !important;
-    outline: none !important;
-  }
-
-  /* Floating surfaces — portal menus, popovers, sheets, dialogs */
-  & [data-slot="dropdown-menu-content"],
-  & [data-slot="dropdown-menu-sub-content"],
-  & [data-slot="popover-content"],
-  & [data-slot="select-content"],
-  & [data-slot="dialog-content"],
-  & [data-slot="sheet-content"],
-  & [data-slot="drawer-content"] {
-    border: 2px solid var(--foreground) !important;
-    background-color: var(--background) !important;
-    color: var(--foreground) !important;
-  }
-
-  & [data-slot="command"] {
-    background-color: var(--background) !important;
-    color: var(--foreground) !important;
-  }
-
-  /* Strip conditional-formatting inline bg from table cells in HC */
-  & td[style*="background"] {
-    background: var(--dt-row-bg) !important;
-  }
-  & td.pinned-cell {
-    background-color: var(--dt-row-bg) !important;
-  }
-  & tr:hover td.pinned-cell,
-  & tr:hover td {
-    background-color: var(--dt-row-hover) !important;
-  }
-  & tr[data-state="selected"] td.pinned-cell,
-  & tr[data-state="selected"] td {
-    background-color: var(--dt-row-selected) !important;
-    color: var(--dt-row-selected-fg) !important;
-  }
-
-  /* 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;
-  }
-  & 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="badge"] {
-    background-color: var(--accent-foreground) !important;
-    color: var(--accent) !important;
-    border-color: var(--accent-foreground) !important;
-  }
-  & tr[data-state="selected"] [data-slot="badge"] * {
-    color: var(--accent) !important;
-  }
-
-  & 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;
-    border-color: var(--accent-foreground) !important;
-    color: var(--accent) !important;
-  }
-  & 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"]) {
-    background-color: var(--accent) !important;
-    border-color: var(--accent-foreground) !important;
-    color: var(--accent-foreground) !important;
-  }
-
-  /* ── Pattern 2: Stronger focus ring (WCAG 2.4.11 / 2.4.12) ── */
-  & :focus-visible {
-    outline: 3px solid var(--ring) !important;
-    outline-offset: 3px !important;
-  }
-
-  /* ── Pattern 2: Error state — thick border + no colour-only signal ── */
-  & [aria-invalid="true"],
-  & [data-invalid] {
-    border-width: 3px !important;
-    border-color: var(--destructive) !important;
-    /* Downstream: pair with a ⚠ icon in the component for non-colour signal */
-  }
-
-  /* ── 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;
-    outline: none !important;
-  }
-  & [data-slot="sidebar-menu-button"][data-active="true"] * {
-    color: var(--accent-foreground) !important;
-  }
-  & [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="badge"],
-  & [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="sidebar-menu-badge"] {
-    background-color: var(--accent-foreground) !important;
-    color: var(--accent) !important;
-    border-color: var(--accent-foreground) !important;
-  }
-  & [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="badge"] *,
-  & [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="sidebar-menu-badge"] * {
-    color: var(--accent) !important;
-  }
-  & [data-slot="toggle-group-item"][data-state="on"] {
-    outline: 2px solid var(--accent) !important;
-    outline-offset: -2px !important;
-    background-color: var(--accent) !important;
-    color: var(--accent-foreground) !important;
-  }
-
-  /* ── Pattern 3b: Checked checkboxes — Highlight brand fill ── */
-  & [data-slot="checkbox"][data-state="checked"],
-  & [data-slot="checkbox"][data-state="indeterminate"] {
-    background-color: var(--accent) !important;
-    border-color: var(--accent) !important;
-    color: var(--accent-foreground) !important;
-  }
-  & [data-slot="checkbox"][data-state="checked"] *,
-  & [data-slot="checkbox"][data-state="indeterminate"] * {
-    color: var(--accent-foreground) !important;
-  }
-
-  /* ── Pattern 3c: Checked radio buttons — Highlight brand fill ── */
-  & [data-slot="radio-group-item"][data-state="checked"] {
-    background-color: var(--accent) !important;
-    border-color: var(--accent) !important;
-    color: var(--accent-foreground) !important;
-  }
-  & [data-slot="radio-group-item"][data-state="checked"] [data-slot="radio-group-indicator"] span {
-    background-color: var(--accent-foreground) !important;
-  }
-
-  /* ── Pattern 3d: Toggle on state — Highlight brand fill ── */
-  & [data-slot="toggle"][data-state="on"] {
-    background-color: var(--accent) !important;
-    color: var(--accent-foreground) !important;
-    border: 2px solid var(--accent) !important;
-  }
-
-  /* ── Pattern 3e: Switch (toggle-switch) — visible track + knob ── */
-  & [role="switch"] {
-    border: 2px solid var(--foreground) !important;
-    background-color: var(--background) !important;
-  }
-  & [role="switch"][aria-checked="true"] {
-    background-color: var(--accent) !important;
-    border-color: var(--accent) !important;
-  }
-  & [role="switch"] > span {
-    background-color: var(--foreground) !important;
-  }
-  & [role="switch"][aria-checked="true"] > span {
-    background-color: var(--accent-foreground) !important;
-  }
-
-  /* ── 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(--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(--accent-foreground) !important;
-  }
-
-  /* ── Pattern 3g: Dropdown check / radio indicator — inherit from parent ── */
-  & [data-slot="dropdown-menu-checkbox-item"][data-state="checked"],
-  & [data-slot="dropdown-menu-radio-item"][data-state="checked"] {
-    font-weight: 700 !important;
-  }
-
-  /* ── Pattern 4: Board cards — border-defined, no decorative fills ── */
-  & [data-slot="board-card"] {
-    border: 2px solid var(--foreground) !important;
-    background-image: none !important;
-  }
-
-  /* ── Pattern 6: List hub status badges — border not fill ── */
-  & [data-slot="list-hub-status-badge"] {
-    border: 2px solid var(--foreground) !important;
-    background-color: var(--background) !important;
-    font-weight: 700 !important;
-    color: var(--foreground) !important;
-  }
-
-  /* ── Pattern 7: Insight cards — border-based, strip gradient bg ── */
-  & [aria-label="Insight"],
-  & [data-slot="insight-card"] {
-    border: 2px solid var(--foreground) !important;
-    background-image: none !important;
-    background: var(--background) !important;
-  }
-
-  /* ── Pattern 8: Coach marks — strong border + readable text ── */
-  & [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;
-  }
-  & [data-slot="coach-mark"] *:not(button):not(button *) {
-    color: var(--foreground) !important;
-  }
-
-  /* ── Pattern 9: Avatars — thicken ring, strip blend modes, force contrast ── */
-  & [data-slot="avatar"] {
-    border: 2px solid var(--foreground) !important;
-  }
-  & [data-slot="avatar"]::after {
-    display: none !important;
-  }
-  & [data-slot="avatar-fallback"] {
-    background-color: var(--background) !important;
-    color: var(--foreground) !important;
-  }
-  & tr[data-state="selected"] [data-slot="avatar"] {
-    border-color: var(--accent-foreground) !important;
-  }
-  & tr[data-state="selected"] [data-slot="avatar-fallback"] {
-    background-color: var(--accent-foreground) !important;
-    color: var(--accent) !important;
-  }
-
-  /* ── Pattern 10: Breadcrumbs — ensure separators are visible ── */
-  & [data-slot="breadcrumb-separator"] {
-    color: var(--foreground) !important;
-  }
-  & [data-slot="breadcrumb-link"] {
-    color: var(--foreground) !important;
-    text-decoration: underline !important;
-  }
-  & [data-slot="breadcrumb-page"] {
-    color: var(--foreground) !important;
-    font-weight: 700 !important;
-  }
-
-  /* ── Pattern 11: Tooltip / popover arrow — match border ── */
-  & [data-slot="tooltip-content"] {
-    border: 2px solid var(--foreground) !important;
-    background-color: var(--background) !important;
-    color: var(--foreground) !important;
-  }
-
-  /* ── Pattern 12: Separator — visible in HC ── */
-  & [data-slot="separator"] {
-    background-color: var(--foreground) !important;
-    opacity: 1 !important;
-  }
-
-  /* ── Pattern 13: Strip ALL hardcoded Tailwind palette colors ──────────── */
-  & [data-slot="banner"],
-  & [data-slot="local-banner"] {
-    background-color: var(--background) !important;
-    background-image: none !important;
-    border: 2px solid var(--foreground) !important;
-    color: var(--foreground) !important;
-  }
-  & [data-slot="banner"] *,
-  & [data-slot="local-banner"] * {
-    color: var(--foreground) !important;
-  }
-
-  & .recharts-bar-rectangle,
-  & .recharts-funnel-trapezoid {
-    stroke: var(--background) !important;
-    stroke-width: 2 !important;
-  }
-
-  & [role="progressbar"] {
-    border: 1px solid var(--foreground) !important;
-    background-color: var(--background) !important;
-  }
-  & [role="progressbar"] > * {
-    background-color: var(--foreground) !important;
-  }
-
-  & [class*="text-emerald"],
-  & [class*="text-amber"],
-  & [class*="text-red-"],
-  & [class*="text-blue-"],
-  & [class*="text-green-"],
-  & [class*="text-yellow-"],
-  & [class*="text-slate-"],
-  & [class*="text-orange-"],
-  & [class*="text-pink-"],
-  & [class*="text-purple-"] {
-    color: var(--foreground) !important;
-  }
-
-  & [class*="text-brand"] {
-    color: var(--accent) !important;
-  }
-  & [class*="bg-brand"]:not([data-slot="coach-mark"]) {
-    background-color: var(--background) !important;
-  }
-  & [class*="border-brand"] {
-    border-color: var(--foreground) !important;
-  }
-
-  & [class*="bg-emerald"],
-  & [class*="bg-amber"],
-  & [class*="bg-red-"],
-  & [class*="bg-blue-"],
-  & [class*="bg-green-"],
-  & [class*="bg-yellow-"],
-  & [class*="bg-slate-"],
-  & [class*="bg-orange-"],
-  & [class*="bg-pink-"],
-  & [class*="bg-purple-"] {
-    background-color: var(--background) !important;
-  }
-
-  & [class*="border-emerald"],
-  & [class*="border-amber"],
-  & [class*="border-red-"],
-  & [class*="border-blue-"],
-  & [class*="border-green-"],
-  & [class*="border-yellow-"],
-  & [class*="border-slate-"],
-  & [class*="border-orange-"],
-  & [class*="border-pink-"],
-  & [class*="border-purple-"] {
-    border-color: var(--foreground) !important;
-  }
-}
-
-/* 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"]) {
-    --foreground:        oklch(0.06 0 0);
-    --muted-foreground:  oklch(0.10 0 0);
-    --border:            oklch(0.10 0 0);
-    --border-control:    oklch(0.06 0 0);
-    --border-control-35: oklch(0.06 0 0);
-    --border-control-3:  oklch(0.06 0 0);
-    --ring:              oklch(0.06 0 0);
-  }
-  .dark:not([data-contrast="off"]):not([data-contrast="windows"]) {
-    --foreground:        oklch(1 0 0);
-    --muted-foreground:  oklch(0.88 0 0);
-    --border:            oklch(1 0 0);
-    --border-control:    oklch(0.88 0 0);
-    --border-control-35: oklch(0.88 0 0);
-    --border-control-3:  oklch(0.88 0 0);
-    --ring:              oklch(0.97 0.19 110);  /* neon yellow on dark */
-  }
-}
-
-/* ── Windows Forced Colors (High Contrast Mode in OS) ───────────────────── */
-/*    When `forced-colors: active`, Windows REPLACES our colours entirely.   */
-/*    Our job: map semantic roles to system palette keywords so the OS       */
-/*    colouring makes sense, and ensure borders/outlines remain visible.     */
-@media (forced-colors: active) {
-  :root {
-    --border:            CanvasText;
-    --border-control:    CanvasText;
-    --border-control-35: CanvasText;
-    --border-control-3:  CanvasText;
-    --ring:              Highlight;
-    --destructive:       LinkText;
-  }
-
-  /* Always show a 2px outline so focus is forced-color-safe */
-  :focus-visible {
-    outline: 2px solid Highlight !important;
-    outline-offset: 2px !important;
-  }
-
-  body {
-    background-color: Canvas;
-    color: CanvasText;
-  }
-
-  a          { color: LinkText; }
-  button     { border: 1px solid ButtonText !important; }
-
-  /* Cards: OS strips bg fills — add explicit border so shape is preserved */
-  [data-slot="card"],
-  .card {
-    border: 2px solid CanvasText !important;
-  }
-
-  /* Sidebar edge */
-  [data-slot="sidebar"] {
-    border-inline-end: 2px solid CanvasText !important;
-  }
-
-  /* Wrapper-only sidebar badge (no inner Badge) — rare; keep single ring */
-  [data-slot="sidebar-menu-badge"]:not(:has([data-slot="badge"])) {
-    border: 2px solid CanvasText !important;
-    background-color: Canvas !important;
-    color: CanvasText !important;
-    outline: none !important;
-    box-shadow: none !important;
-  }
-
-  /* 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;
-    box-shadow: none !important;
-  }
-
-  [data-slot="badge"],
-  [data-slot="view-toolbar-count"] {
-    border: 2px solid CanvasText !important;
-    background-color: Canvas !important;
-    color: CanvasText !important;
-    outline: none !important;
-    box-shadow: none !important;
-  }
-
-  [data-slot="badge"] *,
-  [data-slot="view-toolbar-count"] * {
-    color: CanvasText !important;
-  }
-
-  /* Avoid button chrome + inner count pill = double border */
-  button[data-slot="view-segmented-item"] {
-    border: none !important;
-  }
-
-  /* Radix Tabs (ChartCard, library, etc.) — gray inactive + invisible active in OS HC */
-  [data-slot="tabs-list"] {
-    border: 2px solid CanvasText !important;
-    background-color: transparent !important;
-  }
-
-  [data-slot="tabs-trigger"] {
-    color: CanvasText !important;
-    background-color: transparent !important;
-    opacity: 1 !important;
-  }
-
-  [data-slot="tabs-trigger"][data-state="active"] {
-    background-color: Highlight !important;
-    color: HighlightText !important;
-    outline: none !important;
-    font-weight: 600 !important;
-  }
-
-  /* Key metrics strip — labels/values/trend icons must not stay muted */
-  [data-slot="key-metrics"] :where(span, p, button, a, i, label, div) {
-    color: CanvasText !important;
-  }
-
-  /* Menu / select / command palette — accent fill is often low-contrast in forced mode */
-  [data-slot="dropdown-menu-item"][data-highlighted]:not([data-disabled]),
-  [data-slot="dropdown-menu-checkbox-item"][data-highlighted]:not([data-disabled]),
-  [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]),
-  [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;
-  }
-
-  [data-slot="dropdown-menu-item"][data-highlighted] *,
-  [data-slot="dropdown-menu-checkbox-item"][data-highlighted] *,
-  [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] *,
-  [data-slot="command-item"][aria-selected="true"] * {
-    color: HighlightText !important;
-  }
-
-  /* Views toolbar (list hubs) + segmented radiogroup — selection via outline, not fill */
-  [data-slot="view-segmented-toolbar"] {
-    border: 2px solid CanvasText !important;
-    background: transparent !important;
-  }
-
-  [data-slot="view-segmented-item"] {
-    color: CanvasText !important;
-    background: transparent !important;
-  }
-
-  [data-slot="view-segmented-item"][aria-pressed="true"],
-  [data-slot="view-segmented-item"][aria-checked="true"] {
-    background-color: Highlight !important;
-    color: HighlightText !important;
-    outline: none !important;
-  }
-
-  /* Sidebar active item — Highlight brand fill */
-  [data-slot="sidebar-menu-button"][data-active="true"] {
-    background-color: Highlight !important;
-    color: HighlightText !important;
-    outline: none !important;
-  }
-  [data-slot="sidebar-menu-button"][data-active="true"] * {
-    color: HighlightText !important;
-  }
-  [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="badge"],
-  [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="sidebar-menu-badge"] {
-    background-color: HighlightText !important;
-    color: Highlight !important;
-    border-color: HighlightText !important;
-  }
-  [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="badge"] *,
-  [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="sidebar-menu-badge"] * {
-    color: Highlight !important;
-  }
-
-  /* Strip conditional-formatting inline bg in forced-colors */
-  td[style*="background"] {
-    background: Canvas !important;
-  }
-  td.pinned-cell {
-    background-color: Canvas !important;
-  }
-  tr:hover td,
-  tr:hover td.pinned-cell {
-    background-color: Highlight !important;
-    color: HighlightText !important;
-  }
-
-  /* Table selected rows — Highlight brand fill */
-  tr[data-state="selected"] {
-    background-color: Highlight !important;
-    color: HighlightText !important;
-  }
-  tr[data-state="selected"] td {
-    background: Highlight !important;
-    background-color: Highlight !important;
-    color: HighlightText !important;
-  }
-  tr[data-state="selected"] *:not([data-slot="checkbox"] *):not([data-slot="badge"] *):not([data-slot="checkbox"]):not([data-slot="badge"]) {
-    color: HighlightText !important;
-  }
-  tr[data-state="selected"] [data-slot="checkbox"][data-state="checked"],
-  tr[data-state="selected"] [data-slot="checkbox"][data-state="indeterminate"] {
-    background-color: HighlightText !important;
-    border-color: HighlightText !important;
-    color: Highlight !important;
-  }
-  tr[data-state="selected"] [data-slot="checkbox"][data-state="checked"] *,
-  tr[data-state="selected"] [data-slot="checkbox"][data-state="indeterminate"] * {
-    color: Highlight !important;
-  }
-  tr[data-state="selected"] [data-slot="checkbox"]:not([data-state="checked"]):not([data-state="indeterminate"]) {
-    background-color: Highlight !important;
-    border-color: HighlightText !important;
-    color: HighlightText !important;
-  }
-  tr[data-state="selected"] [data-slot="badge"] {
-    background-color: HighlightText !important;
-    color: Highlight !important;
-    border-color: HighlightText !important;
-  }
-  tr[data-state="selected"] [data-slot="badge"] * {
-    color: Highlight !important;
-  }
-  tr[data-state="selected"] [data-slot="avatar"] {
-    border-color: HighlightText !important;
-  }
-  tr[data-state="selected"] [data-slot="avatar-fallback"] {
-    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;
-  }
-  [data-slot="avatar"]::after {
-    display: none !important;
-  }
-  [data-slot="avatar-fallback"] {
-    background-color: Canvas !important;
-    color: CanvasText !important;
-  }
-
-  /* Checked checkboxes / radios — Highlight fill */
-  [data-slot="checkbox"][data-state="checked"],
-  [data-slot="checkbox"][data-state="indeterminate"] {
-    background-color: Highlight !important;
-    border-color: Highlight !important;
-    color: HighlightText !important;
-  }
-  [data-slot="radio-group-item"][data-state="checked"] {
-    background-color: Highlight !important;
-    border-color: Highlight !important;
-  }
-
-  /* Switch ON — Highlight fill */
-  [role="switch"][aria-checked="true"] {
-    background-color: Highlight !important;
-    border-color: Highlight !important;
-  }
-  [role="switch"][aria-checked="true"] > span {
-    background-color: HighlightText !important;
-  }
-
-  /* Toggle ON — Highlight fill */
-  [data-slot="toggle"][data-state="on"],
-  [data-slot="toggle-group-item"][data-state="on"] {
-    background-color: Highlight !important;
-    color: HighlightText !important;
-    border-color: Highlight !important;
-  }
-
-  /* Progress bars — bordered track with CanvasText fill */
-  [role="progressbar"] {
-    border: 1px solid CanvasText !important;
-    background-color: Canvas !important;
-  }
-  [role="progressbar"] > * {
-    background-color: CanvasText !important;
-  }
-
-  /* Portal overlays — explicit Canvas pairing (OS often strips popover fills) */
-  [data-slot="dropdown-menu-content"],
-  [data-slot="dropdown-menu-sub-content"],
-  [data-slot="popover-content"],
-  [data-slot="select-content"],
-  [data-slot="dialog-content"],
-  [data-slot="sheet-content"],
-  [data-slot="drawer-content"] {
-    border: 2px solid CanvasText !important;
-    background-color: Canvas !important;
-    color: CanvasText !important;
-  }
-
-  [data-slot="command"] {
-    background-color: Canvas !important;
-    color: CanvasText !important;
-  }
-
-  /* Board cards — border-defined shape when fills are stripped */
-  [data-slot="board-card"] {
-    border: 2px solid CanvasText !important;
-    background-color: Canvas !important;
-    color: CanvasText !important;
-  }
-
-  /* List hub status badges — border-only, text readable */
-  [data-slot="list-hub-status-badge"] {
-    border: 2px solid CanvasText !important;
-    background-color: Canvas !important;
-    color: CanvasText !important;
-    font-weight: 700 !important;
-  }
-
-  /* Insight cards — strip gradient, add border */
-  [aria-label="Insight"],
-  [data-slot="insight-card"] {
-    border: 2px solid CanvasText !important;
-    background: Canvas !important;
-    color: CanvasText !important;
-  }
-
-  /* Coach marks / guided tours */
-  [data-slot="coach-mark"] {
-    border: 2px solid CanvasText !important;
-    background-color: Canvas !important;
-    color: CanvasText !important;
-  }
-  [data-slot="coach-mark"] * {
-    color: CanvasText !important;
-  }
-
-  /* Avatars — thicken existing ::after ring */
-  [data-slot="avatar"]::after {
-    border-width: 2px !important;
-    border-color: CanvasText !important;
-  }
-
-  /* Breadcrumbs */
-  [data-slot="breadcrumb-separator"] {
-    color: CanvasText !important;
-  }
-  [data-slot="breadcrumb-link"] {
-    color: LinkText !important;
-  }
-  [data-slot="breadcrumb-page"] {
-    color: CanvasText !important;
-    font-weight: 700 !important;
-  }
-
-  /* Tooltip */
-  [data-slot="tooltip-content"] {
-    border: 2px solid CanvasText !important;
-    background-color: Canvas !important;
-    color: CanvasText !important;
-  }
-
-  /* Export drawer */
-  [data-slot="export-drawer"] {
-    border: 2px solid CanvasText !important;
-    background-color: Canvas !important;
-    color: CanvasText !important;
-  }
-
-  /* Separators */
-  [data-slot="separator"] {
-    background-color: CanvasText !important;
-    opacity: 1 !important;
-  }
-
-  /* Charts — forced-colors strips SVG fills; add stroke as fallback */
-  svg path, svg rect, svg circle {
-    forced-color-adjust: none;
-  }
-
-  /* Recharts radial bars, lines, and area — explicit stroke fallbacks */
-  .recharts-radial-bar-sector,
-  .recharts-line-curve,
-  .recharts-area-curve {
-    forced-color-adjust: none;
-    stroke: CanvasText !important;
-  }
-
-  .recharts-radial-bar-background-sector {
-    forced-color-adjust: none;
-    fill: Canvas !important;
-    stroke: GrayText !important;
-  }
-
-  .recharts-cartesian-axis-tick-value {
-    fill: CanvasText !important;
-  }
-
-  .recharts-cartesian-grid line {
-    stroke: GrayText !important;
-  }
-
-  .recharts-legend-item-text {
-    color: CanvasText !important;
-  }
-
-  .recharts-tooltip-wrapper {
-    border: 2px solid CanvasText !important;
-    background-color: Canvas !important;
-  }
-}
-
-/* ==========================================================================
-   Base layer — global element defaults with AA focus management
-   ========================================================================== */
-@layer base {
-  /* Reset + border-color default */
-  *, *::before, *::after {
-    @apply border-border;
-    box-sizing: border-box;
-  }
-
-  /* Body — outer canvas matches sidebar; main column uses bg-background (white in light) */
-  body {
-    @apply bg-sidebar text-foreground antialiased;
-    font-family: var(--font-sans);
-    /* 14px baseline on body. 1rem stays = 16px so all shadcn rem-based
-       layout (spacing, heights, radii) is unaffected at any zoom level. */
-    font-size: 0.875rem;
-    line-height: 1.5;
-    /* 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 {
-    @apply font-sans;
-    color-scheme: light;
-    /* Match sidebar canvas (body) on overscroll */
-    background-color: var(--sidebar);
-  }
-
-  html.dark {
-    color-scheme: dark;
-  }
-
-  /* ── Focus management (WCAG 2.4.11 / 2.4.7) ──────────────────── */
-  /* Visible on keyboard navigation only; hidden for mouse users    */
-  :focus-visible {
-    outline: 2px solid var(--ring);
-    outline-offset: 2px;
-    border-radius: var(--radius-sm, 4px);
-  }
-
-  /* Suppress outline for mouse/touch (Safari workaround) */
-  :focus:not(:focus-visible) {
-    outline: none;
-  }
-
-  /* ── Reduced motion (WCAG 2.3.3) ────────────────────────────── */
-  @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;
-    }
-  }
-
-  /* ── Touch targets (WCAG 2.5.5) ─────────────────────────────── */
-  /* Applied via utility: min-h-[var(--control-height-touch)]      */
-  /* 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="radio"],
-    [role="switch"],
-    [role="menuitem"],
-    [role="tab"],
-    a {
-      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
-     on PageHeader <h1>. All other headings use Inter (font-sans). */
-  h1, h2, h3, h4, h5, h6 {
-    font-family: var(--font-sans);
-    font-weight: 600;
-    line-height: 1.25;
-    color: var(--foreground);
-  }
-
-  /* ── Skip to main content (WCAG 2.4.1) ─────────────────────── */
-  .skip-to-content {
-    position: absolute;
-    left: -9999px;
-    top: auto;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    z-index: 9999;
-  }
-
-  .skip-to-content:focus {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: auto;
-    height: auto;
-    padding: 0.75rem 1.25rem;
-    background: var(--background);
-    color: var(--foreground);
-    border: 2px solid var(--ring);
-    border-radius: var(--radius-md);
-    font-weight: 600;
-    font-size: 1rem;
-    z-index: 9999;
-  }
-}
-
-/* ==========================================================================
-   Utility layer — design-system helpers
-   ========================================================================== */
-@layer utilities {
-  /* Visually hidden but accessible to screen readers (WCAG 1.3.1) */
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-
-  /* AA-safe muted text — use instead of text-muted-foreground on light bg */
-  .text-aa-muted {
-    color: oklch(0.50 0.012 270); /* 5.5:1 on white ✓ */
-  }
-
-  /* Touch-target wrapper for icon buttons (mobile only) */
-  .touch-target {
-    min-height: var(--control-height-touch, 44px);
-    min-width:  var(--control-height-touch, 44px);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  @media (min-width: 768px) {
-    .touch-target {
-      min-height: unset;
-      min-width:  unset;
-    }
-  }
-
-  /* Form field border — use --control-border (3:1 minimum) */
-  .field-border {
-    border-color: var(--control-border);
-  }
-
-  /* Exxat Prism highlight banner */
-  .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. */
-button:not(:disabled):not([disabled]),
-[role="button"]:not([aria-disabled="true"]):not([data-disabled]) {
-  cursor: pointer;
-}