@exxatdesignux/ui 0.2.17 → 0.2.18

package/template/app/globals.css

@@ -187,10 +187,21 @@ html[data-text-size="large"] {
   --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"` — soft KPI band (lavender wash → canvas) */
-  --key-metrics-flat-grad-top: color-mix(in oklch, var(--brand-tint-light) 90%, var(--background));
-  --key-metrics-flat-grad-mid: color-mix(in oklch, var(--brand-tint) 34%, var(--background));
-  --key-metrics-flat-cell-bg: color-mix(in oklch, var(--background) 80%, var(--brand-tint-light));
+  /* 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);
@@ -270,8 +281,8 @@ 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 — soft brand wash on canvas (not pure `--background`, not full `--sidebar`). */
-  --secondary-panel-bg:         color-mix(in oklch, var(--brand-tint) 34%, var(--background));
+  /* 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;
@@ -379,9 +390,21 @@ html[data-text-size="large"] {
   --destructive:        oklch(0.65 0.20 25);      /* brighter for dark bg */
   --destructive-foreground: oklch(0.10 0 0);
 
-  --key-metrics-flat-grad-top: color-mix(in oklch, var(--brand-color) 14%, var(--background));
-  --key-metrics-flat-grad-mid: color-mix(in oklch, var(--muted) 42%, var(--background));
-  --key-metrics-flat-cell-bg: color-mix(in oklch, var(--background) 88%, var(--brand-color));
+  /* 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);
@@ -431,8 +454,8 @@ html[data-text-size="large"] {
   --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 — dark: subtle brand lift on canvas (not flat `--background` only). */
-  --secondary-panel-bg:         color-mix(in oklch, var(--background) 82%, var(--brand-color) 18%);
+  /* 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 */
@@ -493,6 +516,7 @@ html[data-text-size="large"] {
   --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);
 }
 
 /* ==========================================================================
@@ -501,9 +525,14 @@ html[data-text-size="large"] {
    ========================================================================== */
 .theme-prism,
 .theme-rose {
-  --brand-color:      oklch(0.57 0.24 342);   /* Prism rose */
-  --brand-color-dark: oklch(0.42 0.24 342);
-  --ring:             var(--brand-color-dark);
+  --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),
@@ -531,6 +560,7 @@ html[data-text-size="large"] {
   --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);
 }
 
 /* ==========================================================================

package/template/app/layout.tsx

@@ -6,6 +6,7 @@ import "./globals.css"
 import { ThemeProvider } from "@/components/theme-provider"
 import { TooltipProvider } from "@/components/ui/tooltip"
 import { ProductProvider } from "@/contexts/product-context"
+import { DevChunkLoadRecovery } from "@/components/dev-chunk-load-recovery"
 import { ThemeColorSync } from "@/components/theme-color-sync"
 import { cn } from "@/lib/utils"
 
@@ -90,6 +91,7 @@ export default function RootLayout({
         />
       </head>
       <body className="bg-sidebar text-foreground font-sans">
+        <DevChunkLoadRecovery />
         {/*
          * Font Awesome Pro Kit — subset via fontawesome-subset.manifest.json +
          * fontawesome.com/kits (Icon Selection).

package/template/components/app-sidebar.tsx

@@ -844,10 +844,10 @@ function ProductLogoButton() {
               suppressHydrationWarning
             >
               {iconRail ? (
-                // Match the school selector footprint in the icon rail; the
-                // inner mark cutout uses the rail surface instead of a white fill.
+                // Match the school selector footprint in the icon rail (32px frame,
+                // 28px mark — same visual weight as the avatar with inset padding).
                 <span className="flex size-8 shrink-0 items-center justify-center">
-                  <ExxatProductMark product={current.id} className="size-8" cutoutColor="var(--sidebar)" />
+                  <ExxatProductMark product={current.id} className="size-7" />
                 </span>
               ) : (
                 <span className="flex min-h-0 min-w-0 flex-1 items-stretch gap-2">
@@ -1004,6 +1004,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
             <SidebarGroupLabel
               id="sidebar-documents-heading"
               className="text-xs font-medium uppercase tracking-wide px-2 text-sidebar-section-label"
+              suppressHydrationWarning
             >
               {NAV_DOCUMENTS_LABEL}
             </SidebarGroupLabel>

package/template/components/compliance-table.tsx

@@ -30,7 +30,6 @@ import type { DataListViewType } from "@/lib/data-list-view"
 import type { OpenTablePropertiesHandle } from "@/lib/list-page-table-properties"
 import type { ColumnDef } from "@/components/data-table/types"
 import { useTableState } from "@/components/data-table/use-table-state"
-import { useTableStateLifecycle } from "@/lib/table-state-lifecycle"
 import { TablePropertiesDrawerButton } from "@/components/table-properties"
 import type { ConditionalRule, FilterFieldDef, FilterOperator } from "@/components/table-properties/types"
 import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
@@ -264,25 +263,6 @@ export const ComplianceTable = React.forwardRef<
 
   const tableState = useTableState(items, columns, { key: "dueDate", dir: "asc" })
 
-  // Persist this hub's table lifecycle (sort / search / filters / column
-  // visibility / etc.) to localStorage. See `lib/table-state-lifecycle`.
-  const lifecycleColumnKeys = React.useMemo(
-    () => new Set(columns.map(c => c.key)),
-    [columns],
-  )
-  useTableStateLifecycle({
-    namespace: "compliance",
-    tabId: "main",
-    tableState,
-    columnKeys: lifecycleColumnKeys,
-    extras: { conditionalRules },
-    onLoadExtras: e => {
-      if (e && Array.isArray(e.conditionalRules)) {
-        setConditionalRules(e.conditionalRules as ConditionalRule[])
-      }
-    },
-  })
-
   const dashboardKpi = React.useMemo(
     () => ({
       metrics: complianceKpiMetrics(tableState.rows as ComplianceItem[]),

package/template/components/data-table/index.tsx

@@ -56,7 +56,8 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip"
 import { OPERATOR_LABELS } from "@/components/table-properties/types"
-import type { ActiveFilter, FilterTextMask } from "@/components/table-properties/types"
+import type { ActiveFilter } from "@/components/table-properties/types"
+import { getConditionalCellBackground } from "@/lib/conditional-rule-match"
 import { formatYmdForDisplay } from "@/lib/date-filter"
 import { FilterDateCalendar } from "@/components/data-table/filter-date-calendar"
 import { FilterTextValueInput } from "@/components/data-table/filter-text-value-input"
@@ -81,26 +82,6 @@ function resolvedColumnLabel<TData>(col: ColumnDef<TData>): string {
   return defaultColumnHeaderLabel(col.key) ?? col.key
 }
 
-function conditionalTextMatches(
-  cellVal: string,
-  needle: string,
-  op: "contains" | "not_contains",
-  textMask: FilterTextMask | undefined,
-) {
-  const v = cellVal.trim()
-  const n = needle.trim()
-  if (!n) return op === "not_contains"
-  if (textMask === "phone" || textMask === "zip") {
-    const nd = n.replace(/\D/g, "")
-    const hay = v.replace(/\D/g, "")
-    if (!nd) return op === "not_contains"
-    const hit = hay.includes(nd)
-    return op === "contains" ? hit : !hit
-  }
-  const hit = v.toLowerCase().includes(n.toLowerCase())
-  return op === "contains" ? hit : !hit
-}
-
 // ─────────────────────────────────────────────────────────────────────────────
 // Internal sub-components
 // ─────────────────────────────────────────────────────────────────────────────
@@ -802,12 +783,19 @@ function DataTableInner<TData extends Record<string, unknown>>({
     setSheetOpen,
   } = state
 
-  // Mount overflow check
+  // Mount overflow check + scrollport width for sticky group headers on horizontal scroll.
   React.useEffect(() => {
-    checkOverflow()
+    const syncScrollport = () => {
+      const el = scrollRef.current
+      if (el) {
+        el.style.setProperty("--dt-scrollport-width", `${el.clientWidth}px`)
+      }
+      checkOverflow()
+    }
+    syncScrollport()
     const el = scrollRef.current
     if (!el) return
-    const ro = new ResizeObserver(checkOverflow)
+    const ro = new ResizeObserver(syncScrollport)
     ro.observe(el)
     return () => ro.disconnect()
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1351,18 +1339,19 @@ function DataTableInner<TData extends Record<string, unknown>>({
               <React.Fragment key={groupKey ?? "__all__"}>
                 {groupLabel && (
                   <tr>
-                    <td
-                      colSpan={displayCols.length}
-                      className={cn(
-                        "px-4 py-1.5 text-xs font-semibold text-muted-foreground tracking-wide bg-dt-group-bg select-none",
-                        !isReflowViewport && "sticky left-0",
-                        "border-b border-border",
-                      )}
-                    >
-                      {groupLabel}
-                      <span className="ml-2 font-normal normal-case opacity-60 tracking-normal">
-                        {groupRows.length} record{groupRows.length !== 1 ? "s" : ""}
-                      </span>
+                    <td colSpan={displayCols.length} className="p-0 border-b border-border bg-dt-group-bg">
+                      <div
+                        className={cn(
+                          "sticky left-0 z-[25] px-4 py-1.5 text-xs font-semibold text-muted-foreground tracking-wide bg-dt-group-bg select-none",
+                          !isReflowViewport && "shadow-[4px_0_8px_-4px_var(--sticky-edge-fade)]",
+                        )}
+                        style={{ width: "var(--dt-scrollport-width, 100%)" }}
+                      >
+                        {groupLabel}
+                        <span className="ml-2 font-normal normal-case opacity-60 tracking-normal">
+                          {groupRows.length} record{groupRows.length !== 1 ? "s" : ""}
+                        </span>
+                      </div>
                     </td>
                   </tr>
                 )}
@@ -1419,37 +1408,12 @@ function DataTableInner<TData extends Record<string, unknown>>({
                           ]
                         )
 
-                        // Conditional rule background for this cell
-                        const conditionalBg = conditionalRules?.find(rule => {
-                          if (rule.fieldKey !== col.key) return false
-                          const cellVal = String(row[rule.fieldKey as keyof TData] ?? "")
-                          const v = cellVal.trim()
-                          const ruleCol = columns.find(c => c.key === rule.fieldKey)
-                          const textMask =
-                            ruleCol?.filter?.type === "text" ? ruleCol.filter.textMask : undefined
-                          switch (rule.operator) {
-                            case "is":
-                              return rule.values.length > 0 && rule.values.includes(v)
-                            case "is_not":
-                              return rule.values.length > 0 && !rule.values.includes(v)
-                            case "contains":
-                              return (
-                                rule.values.length > 0 &&
-                                rule.values.some(val =>
-                                  conditionalTextMatches(v, val, "contains", textMask),
-                                )
-                              )
-                            case "not_contains":
-                              return (
-                                rule.values.length > 0 &&
-                                !rule.values.some(val =>
-                                  conditionalTextMatches(v, val, "contains", textMask),
-                                )
-                              )
-                            default:
-                              return false
-                          }
-                        })?.bgColor
+                        const conditionalBg = getConditionalCellBackground(
+                          row,
+                          col.key,
+                          conditionalRules,
+                          columns,
+                        )
 
                         const tdStyle = conditionalBg
                           ? { ...cs, background: conditionalBg }

package/template/components/data-table/use-table-state.ts

@@ -112,7 +112,8 @@ export function useTableState<TData extends Record<string, unknown>>(
   const addSortRule = React.useCallback((fieldKey: string) => {
     setSortRules(prev => {
       if (prev.some(r => r.fieldKey === fieldKey)) return prev
-      return [...prev, { id: `sort-${Date.now()}`, fieldKey, direction: "asc" }]
+      // New drawer sorts are primary (same as column-header sort), not trailing.
+      return [{ id: `sort-${Date.now()}`, fieldKey, direction: "asc" }, ...prev]
     })
   }, [setSortRules])
 
@@ -178,9 +179,12 @@ export function useTableState<TData extends Record<string, unknown>>(
       }
       return f.operators?.[0] ?? "contains"
     })()
-    setActiveFilters(prev => [...prev, { id, fieldKey, operator: firstOperator, values: [] }])
+    const newFilter: ActiveFilter = { id, fieldKey, operator: firstOperator, values: [] }
+    setActiveFilters(prev => [...prev, newFilter])
     if (fromDrawer) {
-      setDrawerExpandedFilters(new Set([id]))
+      setDrawerExpandedFilters(() => new Set([id]))
+      // Keep toolbar pills hidden until a value is chosen — avoids mounting every
+      // FilterPill (heavy) on each drawer "Add filter" click.
     } else {
       setOpenFilterId(id)
       setFilterBarVisible(true)
@@ -188,8 +192,24 @@ export function useTableState<TData extends Record<string, unknown>>(
   }, [columns, setActiveFilters, setDrawerExpandedFilters, setOpenFilterId, setFilterBarVisible])
 
   const updateFilter = React.useCallback((id: string, patch: Partial<ActiveFilter>) => {
-    setActiveFilters(prev => prev.map(f => f.id === id ? { ...f, ...patch } : f))
-  }, [setActiveFilters])
+    let shouldShowFilterBar = false
+    setActiveFilters(prev => {
+      const next = prev.map(f => {
+        if (f.id !== id) return f
+        const merged = { ...f, ...patch }
+        const col = columns.find(c => c.key === merged.fieldKey)
+        if (merged.values.length > 0) {
+          shouldShowFilterBar =
+            col?.filter?.type === "text"
+              ? (merged.values[0] ?? "").trim().length > 0
+              : true
+        }
+        return merged
+      })
+      return next
+    })
+    if (shouldShowFilterBar) setFilterBarVisible(true)
+  }, [columns, setActiveFilters, setFilterBarVisible])
 
   const removeFilter = React.useCallback((id: string) => {
     // Use functional updates only — no stale-closure risk on activeFilters.
@@ -342,7 +362,14 @@ export function useTableState<TData extends Record<string, unknown>>(
       result = result.filter(r => getSearchableText(r).includes(q))
     }
 
-    const activeWithValues = activeFilters.filter(f => f.values.length > 0)
+    const activeWithValues = activeFilters.filter(f => {
+      if (f.values.length === 0) return false
+      const col = columnsByKey.get(f.fieldKey)
+      if (col?.filter?.type === "text") {
+        return (f.values[0] ?? "").trim().length > 0
+      }
+      return true
+    })
     if (activeWithValues.length > 0) {
       // Pre-resolve column, operator, normalised needle, and select-value Set
       // for each active filter ONCE (instead of per row).

package/template/components/dev-chunk-load-recovery.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import * as React from "react"
+
+import { isChunkLoadError } from "@/lib/chunk-load-error"
+
+const RELOAD_FLAG = "exxat-ds:chunk-reload-attempted"
+
+/**
+ * Dev-only: auto-reload once when Turbopack serves a stale chunk hash so users
+ * are not stuck on a blank shell before the route error boundary mounts.
+ */
+export function DevChunkLoadRecovery() {
+  React.useEffect(() => {
+    if (process.env.NODE_ENV !== "development") return
+
+    function maybeReload(error: unknown) {
+      if (!isChunkLoadError(error)) return
+      if (typeof window === "undefined") return
+      if (window.sessionStorage.getItem(RELOAD_FLAG) === "1") return
+      window.sessionStorage.setItem(RELOAD_FLAG, "1")
+      window.location.reload()
+    }
+
+    const onError = (event: ErrorEvent) => {
+      maybeReload(event.error ?? event.message)
+    }
+    const onRejection = (event: PromiseRejectionEvent) => {
+      maybeReload(event.reason)
+    }
+
+    window.addEventListener("error", onError)
+    window.addEventListener("unhandledrejection", onRejection)
+    return () => {
+      window.removeEventListener("error", onError)
+      window.removeEventListener("unhandledrejection", onRejection)
+    }
+  }, [])
+
+  return null
+}

package/template/components/exxat-product-logo.tsx

@@ -38,7 +38,7 @@ export type ExxatProductLogoVariant = "default" | "mutedSuffix"
 export interface ExxatProductLogoProps {
   product: Product
   className?: string
-  /** Sidebar / switcher: muted wordmark in dark mode only; light keeps brand color. */
+  /** Reserved for switcher chrome; suffix stays Exxat pink in all modes. */
   variant?: ExxatProductLogoVariant
 }
 
@@ -191,7 +191,6 @@ export function ExxatProductLogo({
   const customProductBrand = useAppStore(s => s.customProductBrand)
   const productBrandColors = useAppStore(s => s.productBrandColors)
   const config = brandForProduct(product, customProductBrand, productBrandColors)
-  const muted = variant === "mutedSuffix"
   const suffixColor = config.wordmarkColor ?? config.brandColor
 
   return (
@@ -213,10 +212,7 @@ export function ExxatProductLogo({
       {/* HTML suffix — IvyPresto Text SemiBold per Figma brand spec. */}
       <span
         data-product-wordmark-suffix
-        className={cn(
-          "ms-[0.18em] text-[1.55em] font-semibold tracking-[-0.03em] -translate-y-[3px]",
-          muted && "dark:!text-[var(--muted-foreground)]",
-        )}
+        className="ms-[0.18em] text-[1.55em] font-semibold tracking-[-0.03em] -translate-y-[3px]"
         style={{
           fontFamily: "var(--font-heading), 'ivypresto-text', Georgia, serif",
           color: suffixColor,

package/template/components/key-metrics.tsx

@@ -216,6 +216,41 @@ export interface KeyMetricsProps {
  * (3fr / 2fr split). Tighter breakpoints because available width is ~60%
  * of the section.
  */
+/**
+ * Flat KPI hairlines — cell borders only (no grid gap fill / no surface).
+ * Four tiles: default 4-across verticals; 2×2 hairlines only when @container is narrow.
+ */
+function flatMetricsHairlineClass(
+  itemCount: number,
+  metricsHalfWidthLayout: boolean,
+): string {
+  if (itemCount <= 1) return "gap-0"
+
+  const childBorder = "[&>*]:border-[color:var(--key-metrics-flat-divider)]"
+
+  if (itemCount === 2) {
+    return cn("gap-0", childBorder, "[&>*:first-child]:border-r")
+  }
+
+  if (itemCount === 4) {
+    const narrow2x2 = metricsHalfWidthLayout
+      ? "@[max-width:25.99rem]"
+      : "@[max-width:29.99rem]"
+    return cn(
+      "gap-0",
+      childBorder,
+      /* Wide strip (matches `@[30rem]:grid-cols-4`) — verticals between all tiles, no horizontal */
+      "[&>*:not(:last-child)]:border-r",
+      /* Narrow strip (`@[18rem]`–`@[30rem]` 2×2) */
+      `${narrow2x2}:[&>*:not(:last-child)]:border-r-0`,
+      `${narrow2x2}:[&>*:nth-child(odd)]:border-r`,
+      `${narrow2x2}:[&>*:not(:nth-last-child(-n+2))]:border-b`,
+    )
+  }
+
+  return cn("gap-0", childBorder, "[&>*:not(:last-child)]:border-r")
+}
+
 function metricsRowColumnsClass(rowLength: number, metricsHalfWidthLayout: boolean): string {
   const half = metricsHalfWidthLayout
   switch (rowLength) {
@@ -538,7 +573,7 @@ function KeyMetricsInner({
 }: InnerProps) {
   const isFlatBand = surfaceVariant === "flat"
   const metricsGridClassName = isFlatBand
-    ? "gap-0 bg-transparent [&>*:not(:last-child)]:border-r [&>*:not(:last-child)]:border-foreground/[0.055]"
+    ? flatMetricsHairlineClass(metrics.length, metricsHalfWidthLayout)
     : "gap-px bg-border"
   /** Side-by-side KPI + insight rail (md+). Disabled for half-width dashboard cards — insight stacks below. */
   const insightSideBySide = insight && !insightFullWidth && !metricsHalfWidthLayout
@@ -642,17 +677,16 @@ function KeyMetricsInner({
           <div className="@container/metrics-strip hidden lg:block">
             {rows.map((row, rowIdx) => (
               <React.Fragment key={rowIdx}>
-                {rowIdx > 0 && (
-                  <Separator
-                    aria-hidden="true"
-                    className={cn("my-1", isFlatBand && "bg-foreground/[0.055]")}
-                  />
+                {rowIdx > 0 && !isFlatBand && (
+                  <Separator aria-hidden="true" className="my-1" />
                 )}
                 <div
                   className={cn(
                     "grid",
                     metricsRowColumnsClass(row.length, metricsHalfWidthLayout),
-                    metricsGridClassName,
+                    isFlatBand
+                      ? flatMetricsHairlineClass(row.length, metricsHalfWidthLayout)
+                      : metricsGridClassName,
                   )}
                 >
                   {row.map((m) => (
@@ -693,8 +727,9 @@ function KeyMetricsInner({
                 insightSideBySide &&
                   !insightFullWidth &&
                   cn(
-                    "lg:h-full lg:border-l lg:pl-6",
-                    isFlatBand ? "lg:border-border/40" : "lg:border-border",
+                    "lg:h-full lg:pl-6",
+                    /* Flat band: insight card ring is the divider — skip `border-l` (double line). */
+                    !isFlatBand && "lg:border-l lg:border-border",
                   )
               )}
             >
@@ -856,7 +891,9 @@ export function KeyMetrics({
       })()
 
   const metricsCellSurfaceClassName =
-    variant === "flat" ? "bg-transparent" : "bg-card"
+    variant === "flat"
+      ? "bg-transparent"
+      : "bg-card dark:bg-transparent"
 
   const innerProps: InnerProps = {
     title,
@@ -900,18 +937,13 @@ export function KeyMetrics({
    * ─────────────────────────────────────────────────────────────────────────
    */
   const glowStyle: React.CSSProperties = {
-    /* oklch relative color: inherit brand hue/chroma/lightness, set alpha only */
-    background:
-      "radial-gradient(ellipse 110% 90% at 50% 100%, oklch(from var(--brand-color) l c h / 0.13) 0%, transparent 65%)",
+    background: "var(--key-metrics-card-glow-radial)",
   }
 
-  /** List-page KPI band: soft tint → page bg + gentle lift (avoids a hard line into the toolbar). */
+  /** List-page KPI band — transparent; only `--key-metrics-flat-band-radial` glow. */
   const flatBandStyle: React.CSSProperties = {
-    background: [
-      "radial-gradient(ellipse 118% 70% at 50% 100%, oklch(from var(--brand-color) l c h / 0.11) 0%, transparent 60%)",
-      "linear-gradient(180deg, var(--key-metrics-flat-grad-top) 0%, var(--key-metrics-flat-grad-mid) 48%, var(--background) 100%)",
-    ].join(", "),
-    boxShadow: "0 18px 42px -26px color-mix(in oklch, var(--brand-color) 10%, transparent)",
+    background: "var(--key-metrics-flat-band-radial)",
+    boxShadow: "var(--key-metrics-flat-band-shadow)",
   }
 
   /* ── Card variant — ChartCard-style chrome ───────────────────────────── */
@@ -982,11 +1014,11 @@ export function KeyMetrics({
     )
   }
 
-  /* ── Flat variant — soft tint band + bottom glow (no sharp cut to content below) ── */
+  /* ── Flat variant — no surface; bottom brand glow only ── */
   return (
     <section
       aria-label={title}
-      className={cn("relative w-full overflow-hidden pt-5 pb-6", className)}
+      className={cn("relative w-full overflow-hidden pt-5 pb-8", className)}
       style={flatBandStyle}
     >
       <KeyMetricsInner
@@ -1025,7 +1057,7 @@ export function KeyMetricsContent({
       showHeader={false}
       insightCompact={insightCompact}
       insightFullWidth={insightFullWidth}
-      metricsCellSurfaceClassName="bg-card"
+      metricsCellSurfaceClassName="bg-card dark:bg-transparent"
     />
   )
 }

package/template/components/placement-board-card.tsx

@@ -173,7 +173,7 @@ export function BoardPlacementCard({
   onOpen: (id: number) => void
 }) {
   const lc = lineClampClass(lineCount)
-  const ruleBg = getConditionalRowBackground(row, conditionalRules)
+  const ruleBg = getConditionalRowBackground(row, conditionalRules, boardColumns)
 
   const visibleCols = boardColumns.filter(c => !hiddenColKeys.has(c.key))
   const showStudent = visibleCols.some(c => c.key === "student")

package/template/components/placements-list-view.tsx

@@ -62,7 +62,7 @@ function PlacementListRowContent({
   conditionalRules: ConditionalRule[] | undefined
   onOpen: (id: number) => void
 }) {
-  const ruleBg = getConditionalRowBackground(row, conditionalRules)
+  const ruleBg = getConditionalRowBackground(row, conditionalRules, boardColumns)
   const showStudent = isBoardFieldActive("student", tab, hiddenColKeys, boardColumns)
   const showStatus = isBoardFieldActive("status", tab, hiddenColKeys, boardColumns)
   const showSite = isBoardFieldActive("site", tab, hiddenColKeys, boardColumns)