/**
 * BluQube Design System
 * Version: 1.0.0
 * Brand: BluQube by LNC Nexus Technologies, LLC
 *
 * A comprehensive design system for legal nurse consulting workflows.
 * Clinical, precise, litigation-ready. WCAG 2.2 AA Compliant.
 */

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */

:root {
  /* Data Visualization Color Palette */
  --color-viz-blue: #3b82f6;
  --color-viz-blue-light: #60a5fa;
  --color-viz-blue-dark: #2563eb;
  
  --color-viz-green: #10b981;
  --color-viz-green-light: #34d399;
  --color-viz-green-dark: #059669;
  
  --color-viz-orange: #f59e0b;
  --color-viz-orange-light: #fbbf24;
  --color-viz-orange-dark: #d97706;
  
  --color-viz-red: #ef4444;
  --color-viz-red-light: #f87171;
  --color-viz-red-dark: #dc2626;
  
  --color-viz-purple: #4E837D;
  --color-viz-purple-light: #6aa39b;
  --color-viz-purple-dark: #335955;
  
  --color-viz-pink: #4EE2D0;
  --color-viz-pink-light: #f472b6;
  --color-viz-pink-dark: #db2777;
  
  --color-viz-teal: #14b8a6;
  --color-viz-teal-light: #2dd4bf;
  --color-viz-teal-dark: #0d9488;
  
  --color-viz-indigo: #193962;
  --color-viz-indigo-light: #6287a1;
  --color-viz-indigo-dark: #12294a;
  
  --color-viz-cyan: #06b6d4;
  --color-viz-cyan-light: #22d3ee;
  --color-viz-cyan-dark: #0891b2;
  
  --color-viz-yellow: #eab308;
  --color-viz-yellow-light: #facc15;
  --color-viz-yellow-dark: #ca8a04;

  /* BLUQUBE primary — Ink Blue */
  --color-brand-ink-blue: #193962;
  --color-brand-soft-off-white: #F7F8F5;
  --color-brand-vivid-teal: #4EE2D0;
  --color-primary-50: #f0f4f8;
  --color-primary-100: #dce6ef;
  --color-primary-200: #b8cbd9;
  --color-primary-300: #8faabd;
  --color-primary-400: #6287a1;
  --color-primary-500: #193962;
  --color-primary-600: #15304f;
  --color-primary-700: #12294a;
  --color-primary-800: #0c1c30;
  --color-primary-900: #071321;

  /* BLUQUBE accent — Vivid Teal */
  --color-secondary-50: #effcf9;
  --color-secondary-100: #d9f8f2;
  --color-secondary-200: #b3f1e5;
  --color-secondary-300: #86e9dc;
  --color-secondary-400: #65e5d4;
  --color-secondary-500: #4EE2D0;
  --color-secondary-600: #2db9aa;
  --color-secondary-700: #218f84;
  --color-secondary-800: #17665f;
  --color-secondary-900: #0d403c;

  /* Neutral Grays */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;

  /* Semantic Colors */
  --color-success-50: #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-200: #bbf7d0;
  --color-success-300: #86efac;
  --color-success-400: #4ade80;
  --color-success-500: #10b981;
  --color-success-600: #059669;
  --color-success-700: #047857;
  --color-success-800: #065f46;
  --color-success-900: #064e3b;

  --color-warning-50: #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-300: #fcd34d;
  --color-warning-400: #fbbf24;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-warning-800: #92400e;
  --color-warning-900: #78350f;

  --color-error-50: #fef2f2;
  --color-error-100: #fee2e2;
  --color-error-200: #fecaca;
  --color-error-300: #fca5a5;
  --color-error-400: #f87171;
  --color-error-500: #ef4444;
  --color-error-600: #dc2626;
  --color-error-700: #b91c1c;
  --color-error-800: #991b1b;
  --color-error-900: #7f1d1d;

  --color-info-50: #eff6ff;
  --color-info-100: #dbeafe;
  --color-info-200: #bfdbfe;
  --color-info-300: #93c5fd;
  --color-info-400: #60a5fa;
  --color-info-500: #3b82f6;
  --color-info-600: #2563eb;
  --color-info-700: #1d4ed8;
  --color-info-800: #1e40af;
  --color-info-900: #1e3a8a;

  /* Functional Colors */
  --color-background: #F7F8F5;
  --color-background-secondary: #F7F8F5;
  --color-background-tertiary: #f1f5f9;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-text-primary: #193962;
  --color-text-secondary: #193962;
  /* UI-BETA-GATE D-029: slate-400 tertiary text measures 2.5:1 on the light
     surface and fails AA on every card meta line. The two themes had this
     value effectively swapped; the light scale now uses slate-500 (4.7:1),
     mirroring the dark-side fix in D-023. */
  /* FIX-CONTRAST: #64748b (slate-500) measured 4.46:1 on the Soft Off-White
     surfaces (#f7f8f5) — 0.04 short of AA. Nudged one step darker (#5f6e85):
     4.86:1 on #f7f8f5, 5.18:1 on white. */
  --color-text-tertiary: #5f6e85;
  --color-text-inverse: #ffffff;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  /* FIX-CONTRAST: the v11 sweep set this to Ink Blue #193962, which is fine on
     the light surfaces (10.9:1) but has no dark counterpart — on the dark card
     (#1e293b) it measures 1.26:1, an invisible field outline (SC 1.4.11 floor
     3:1). The dark counterpart is the brand Vivid Teal, matching the dark
     --shadow-focus ring already in this block: 11.15:1 on #0f172a, 9.13:1 on
     #1e293b. */
  --color-border-focus: #193962;

  /* Module-Specific Accents.
     CONTRAST-Q1: `.module-card-icon` paints a white 24px glyph (`color:
     var(--color-text-inverse)`) on these fills, and the fills are unthemed, so
     the same ratio applies in both themes. Five hues at their 500 step measured
     2.15-2.80:1 against white — under the 3:1 SC 1.4.11 floor for a non-text
     glyph. Each of those five moves one step down **its own** scale: same hue,
     deeper ink, 3.19-3.77:1 measured. The four tiles that already cleared the
     floor (cases 4.28, sops 4.23, ai 3.53, compliance 4.47) are untouched, so
     the nine-tile row stays visually coherent rather than five dark and four
     bright. These tokens' only consumer today is the tile fill (grep-verified),
     so darkening the token is the whole fix; nothing else inherits the change. */
  --color-module-cases: #627d98;
  --color-module-knowledge: #0d9488;   /* teal-600; was #14b8a6 — 2.49:1 under white */
  --color-module-sops: #4E837D;
  --color-module-research: #d97706;    /* amber-600; was #f59e0b — 2.15:1 under white */
  --color-module-reports: #059669;     /* emerald-600; was #10b981 — 2.54:1 under white */
  --color-module-ai: #193962;
  --color-module-timeline: #ea580c;    /* orange-600; was #f97316 — 2.80:1 under white */
  --color-module-evidence: #0891b2;    /* cyan-600; was #06b6d4 — 2.43:1 under white */
  --color-module-compliance: #193962;

  /* Typography */
  --font-family-sans: Arial, Helvetica, sans-serif;
  --font-family-serif: Arial, Helvetica, sans-serif;
  --font-family-mono: 'Fira Code', 'Fira Mono', 'Consolas', monospace;

  /* Spacing */
  --spacing-0: 0;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -1px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
  /* UI-BETA-GATE D-031: the mirror of D-030 on the light side. The ring that
     D-030 left in place for light mode, rgba(98,125,152,0.3) (primary-500 at
     0.3), composites to about rgb(204,213,221) on the page background —
     measured live 1.42:1 on rgb(249,250,251) and 1.44:1 on a white card,
     against the 3:1 WCAG 2.x SC 1.4.11 floor for a focus indicator, so the
     keyboard ring was effectively invisible on light surfaces. The light ring
     now reuses the same brand scale one step darker, primary-600 (#486581) at
     the same 0.9 alpha D-030 chose for dark: measured live 4.65:1 on the page
     background and 4.86:1 on white. Same 3px geometry, and the html.dark
     override above still wins in dark mode (higher specificity than :root),
     so dark mode renders exactly as D-030 shipped it. */
  --shadow-focus: 0 0 0 3px rgba(72, 101, 129, 0.9);

  /* Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 80px;
  --header-height: 64px;
  --footer-height: 48px;

  /* Transitions */
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;
  --timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode — the system-monitor surface toggles [data-theme="dark"];
   the dashboard toggles the `dark` class on <html> (see dashboard.html
   toggleDark). Both must flip the tokens, or design-system text (h1/h2 via
   --color-text-primary, p via --color-text-secondary) stays dark-on-dark
   in dashboard dark mode (UI-BETA-GATE D-012). */
[data-theme="dark"],
html.dark {
  --color-background: #0f172a;
  --color-background-secondary: #1e293b;
  --color-background-tertiary: #334155;
  --color-surface: #1e293b;
  --color-surface-raised: #334155;
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  /* UI-BETA-GATE D-023: slate-500 tertiary text measures 3.1:1 on the dark
     card surface and fails AA wherever it is used (context-bar labels, card
     meta lines). The dark scale now reuses the gray-400 secondary value
     (5.8:1) instead of carrying its own dimmer third step. */
  --color-text-tertiary: #94a3b8;
  --color-border: #334155;
  --color-border-strong: #475569;
  /* UI-BETA-GATE D-030: the light-mode ring (rgba(98,125,152,0.3)) composites
     to about rgb(40,56,77) on the dark surfaces — 1.44-1.46:1 measured live,
     under the 3:1 WCAG 2.x SC 1.4.11 floor for a focus indicator, so a
     keyboard user could not see where they were. The dark ring reuses the
     brand teal the dark links already use at primary-400 (rgb(106,191,201),
     the teal scale's 400 step) at 0.9 alpha: measured live 7.00:1 on the page
     background (rgb(17,24,39)), 5.90:1 on cards (#1f2937), 6.84:1 on the navy
     sidebar (rgb(15,27,45)). Same 3px geometry, and the :root value is
     untouched, so light mode renders exactly as before. */
  --shadow-focus: 0 0 0 3px rgba(106, 191, 201, 0.9);
  /* FIX-CONTRAST: dark counterpart for the field/control outline (see :root
     note). Vivid Teal, the same brand accent the dark focus ring uses. */
  --color-border-focus: #4EE2D0;
}

/* UI-BETA-GATE D-019: Tailwind's text-gray-500 (#6b7280) is a light-mode
   secondary color; on the dark card surface (#1f2937) it measures 3.0:1 at
   12px and fails AA (measured on the CRCM confidence column). Sites that
   already pair it with a dark:text-* variant chose their own value and are
   left alone; the unpaired remainder inside cards is raised to the dark
   secondary token (5.7:1 on the card). One rule instead of ~90 markup edits,
   and it cannot drift out of sync with new card copy. */
html.dark .dark\:bg-gray-800 .text-gray-500:not([class*="dark:text-"]) {
  color: var(--color-gray-400);
}

/* UI-BETA-GATE D-023: two dim small-text families the D-019 rule cannot
   reach. (a) Unpaired text-accent-600 (#059669) trend captions on the dark
   card measured 3.9:1; raised to the app's accent-500 (#10b981, 5.8:1),
   same hue family, same :not() escape hatch as D-019. (b) text-gray-500
   that IS paired with a dark:text-gray-500 variant (KPI "Not yet
   available" value + reason at 3.0:1) — the pairing itself is the bug:
   #6b7280 never clears AA on any dark surface, so the dark variant is
   retargeted to the same dark secondary token D-019 uses (5.7:1). */
html.dark .dark\:bg-gray-800 .text-accent-600:not([class*="dark:text-"]) {
  color: #10b981;
}
html.dark .dark\:text-gray-500 {
  color: var(--color-gray-400);
}

/* UI-BETA-GATE D-029: the mirror of D-019 on the light side. Tailwind's
   text-gray-400 (#9ca3af) is 2.4:1 on white and fails AA wherever it is used
   as card meta text (report timestamps, file sizes, table headers). Unlike
   the dark rule this one carries no :not() escape hatch: in light mode a
   paired dark:text-* utility is inert, so excluding paired sites would leave
   them broken — every text-gray-400 on a light surface needs the lift.
   Measured 2.4-2.5 -> 4.6-4.8 across six live elements. */
html:not(.dark) .text-gray-400 {
  color: #6b7280;
}

/* UI-BETA-GATE D-042: two more Tailwind hue-scale utilities that only clear
   AA on one theme, found by the authenticated sweep of the eight pages no
   earlier pass had measured (analysis, heatmap, review, timeline). Both sit on
   the tinted sub-card surface `bg-gray-50 dark:bg-gray-750` (#f9fafb / #1a2234),
   not on the page or the card, so the background has to be read from the
   container rather than assumed. Scoped to that container and given the same
   `:not([class*="dark:text-"])` escape hatch as D-019/D-023, so a site that
   has deliberately chosen its own dark variant is still left alone.

   (a) text-amber-600 (#d97706) — analysis "Timing review" and "26d delayed"
       measured 3.05:1 on the light tint. Dark mode already passes untouched
       (4.98:1 on #1a2234), so only the light side is lifted, to the same hue
       family two steps down: --color-warning-800 (#92400e) = 6.78:1.
   (b) text-accent-600 (#059669) — review "1 of 1 case complete" measured
       3.61:1 light AND 4.21:1 dark, so this one needs both sides. Light goes
       to --color-success-700 (#047857, 5.25:1); dark goes to #10b981, the
       exact value D-023 already uses for this utility on the dark card —
       D-023's rule is scoped to .dark\:bg-gray-800 and so never reached this
       .dark\:bg-gray-750 container (6.26:1 here). */
html:not(.dark) .bg-gray-50 .text-amber-600:not([class*="dark:text-"]) {
  color: var(--color-warning-800);
}
html:not(.dark) .bg-gray-50 .text-accent-600:not([class*="dark:text-"]) {
  color: var(--color-success-700);
}
html.dark .dark\:bg-gray-750 .text-accent-600:not([class*="dark:text-"]) {
  color: #10b981;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-family-sans);
  font-size: var(--text-body, 0.875rem);
  line-height: 1.57;
  color: var(--color-text-primary);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

a {
  color: var(--color-primary-700);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

/* Heading Levels */
h1, .heading-1 {
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  margin-bottom: var(--spacing-4);
}

h2, .heading-2 {
  font-size: 1.5rem;
  line-height: 1.33;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  margin-bottom: var(--spacing-3);
}

h3, .heading-3 {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-2);
}

h4, .heading-4 {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-2);
}

/* Body Text */
p, .body {
  font-size: 0.875rem;
  line-height: 1.57;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-4);
}

.body-large {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.text-small, .caption {
  font-size: 0.75rem;
  line-height: 1.33;
  color: var(--color-text-tertiary);
}

/* Button Text */
.button-text {
  font-size: 0.875rem;
  line-height: 1.43;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Overline */
.overline {
  font-size: 0.625rem;
  line-height: 2;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.43;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast) var(--timing-function);
  text-decoration: none;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

/* Primary Button */
.btn-primary {
  background: var(--color-primary-700);
  color: var(--color-text-inverse);
  border-color: var(--color-primary-700);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-800);
  border-color: var(--color-primary-800);
}

/* Secondary Button */
.btn-secondary {
  background: var(--color-background);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-background-secondary);
  border-color: var(--color-primary-600);
}

/* Ghost Button */
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
}

/* Danger Button */
.btn-danger {
  background: var(--color-error-600);
  color: var(--color-text-inverse);
  border-color: var(--color-error-600);
}

.btn-danger:hover:not(:disabled) {
  background: var(--color-error-700);
  border-color: var(--color-error-700);
}

/* Button Sizes */
.btn-sm {
  padding: var(--spacing-1) var(--spacing-3);
  font-size: 0.75rem;
}

.btn-lg {
  padding: var(--spacing-3) var(--spacing-6);
  font-size: 1rem;
}

/* Icon Button */
.btn-icon {
  padding: var(--spacing-2);
  width: 36px;
  height: 36px;
}

/* Full Width Button */
.btn-block {
  display: flex;
  width: 100%;
}

/* ============================================
   CARDS
   ============================================ */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--transition-normal) var(--timing-function), 
              box-shadow var(--transition-normal) var(--timing-function), 
              border-color var(--transition-normal) var(--timing-function);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-500);
}

.card-header {
  padding: var(--spacing-4) var(--spacing-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-background-secondary);
}

.card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.card-body {
  padding: var(--spacing-6);
}

.card-footer {
  padding: var(--spacing-4) var(--spacing-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-background-secondary);
}

/* Module Card */
.module-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: all var(--transition-normal) var(--timing-function);
  cursor: pointer;
  text-decoration: none;
}

.module-card:hover {
  border-color: var(--color-primary-500);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.module-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
  font-size: 24px;
}

.module-card-icon.cases { background: var(--color-module-cases); }
.module-card-icon.knowledge { background: var(--color-module-knowledge); }
.module-card-icon.sops { background: var(--color-module-sops); }
.module-card-icon.research { background: var(--color-module-research); }
.module-card-icon.reports { background: var(--color-module-reports); }
.module-card-icon.ai { background: var(--color-module-ai); }
.module-card-icon.timeline { background: var(--color-module-timeline); }
.module-card-icon.evidence { background: var(--color-module-evidence); }
.module-card-icon.compliance { background: var(--color-module-compliance); }

.module-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.module-card-description {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.57;
}

/* Stat Card */
.stat-card {
  padding: var(--spacing-4);
  border-radius: var(--radius-md);
  background: var(--color-background-secondary);
}

.stat-card-label {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-1);
}

.stat-card-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.33;
}

.stat-card-change {
  font-size: 0.75rem;
  margin-top: var(--spacing-2);
}

.stat-card-change.positive { color: var(--color-success-600); }
.stat-card-change.negative { color: var(--color-error-600); }

/* Stat row container */
.stat-row {
  display: flex;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
  flex-wrap: wrap;
}

/* Generic grid layout (used by research, evidence, etc.) */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-4);
}

/* ============================================
   FORMS
   ============================================ */

.input {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
  line-height: 1.57;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast) var(--timing-function);
}

.input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}

.input:disabled {
  background: var(--color-background-secondary);
  color: var(--color-text-tertiary);
  cursor: not-allowed;
}

.input-error {
  border-color: var(--color-error-600);
}

.input-error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

.label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-1);
}

.label-required::after {
  content: ' *';
  color: var(--color-error-600);
}

.helper-text {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  margin-top: var(--spacing-1);
}

.error-text {
  font-size: 0.75rem;
  color: var(--color-error-600);
  margin-top: var(--spacing-1);
}

.select {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}

.select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}

.textarea {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
  line-height: 1.57;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  resize: vertical;
  min-height: 120px;
}

.textarea:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}

.checkbox,
.radio {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-primary-700);
}

/* ============================================
   ICON SYSTEM
   ============================================ */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.icon-sm {
  width: 16px;
  height: 16px;
}

.icon-lg {
  width: 24px;
  height: 24px;
}

.icon-xl {
  width: 32px;
  height: 32px;
}

.icon-primary {
  color: var(--color-primary-700);
}

.icon-secondary {
  color: var(--color-text-secondary);
}

.icon-tertiary {
  color: var(--color-text-tertiary);
}

.icon-success {
  color: var(--color-success-600);
}

.icon-warning {
  color: var(--color-warning-600);
}

.icon-error {
  color: var(--color-error-600);
}

/* Icon Button */
.btn-icon {
  padding: var(--spacing-2);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast) var(--timing-function);
}

.btn-icon:hover {
  background: var(--color-background-secondary);
  border-color: var(--color-border);
}

.btn-icon:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* SVG Icon Paths */
.icon-dashboard path { }
.icon-folder path { }
.icon-book path { }
.icon-document path { }
.icon-microscope path { }
.icon-chart path { }
.icon-robot path { }
.icon-clock path { }
.icon-attachment path { }
.icon-check-circle path { }
.icon-settings path { }
.icon-help path { }
.icon-bell path { }
.icon-plus path { }
.icon-download path { }
.icon-search path { }
.icon-menu path { }
.icon-close path { }
.icon-arrow-right path { }
.icon-arrow-down path { }
.icon-check path { }
.icon-x path { }
.icon-triangle-exclamation path { }
.icon-circle path { }

/* ============================================
   NAVIGATION
   ============================================ */

.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
}

.sidebar-logo {
  padding: var(--spacing-4) 0;
  /* NEXUS-UI-POLISH-001: tightened 24→8px so the nav list fits without a
     scrollbar at 133% zoom (owner directive). The sidebar's own padding and
     the border below already separate the logo from the nav. */
  margin-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--color-border);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  text-decoration: none;
  margin-bottom: var(--spacing-1);
  transition: all var(--transition-fast) var(--timing-function);
}

.sidebar-nav-item:hover {
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
}

.sidebar-nav-item.active {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-weight: 600;
}

.sidebar-nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.top-nav {
  height: var(--header-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-6);
  position: sticky;
  top: 0;
  z-index: 100;
}

.top-nav-search {
  flex: 1;
  max-width: 480px;
  margin: 0 var(--spacing-6);
}

.top-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

/* ============================================
   DATA TABLES
   ============================================ */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.data-table thead {
  background: var(--color-background-secondary);
  border-bottom: 2px solid var(--color-border-strong);
}

.data-table th {
  text-align: left;
  padding: var(--spacing-3) var(--spacing-4);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.data-table td {
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.data-table tbody tr:hover {
  background: var(--color-background-secondary);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
}

.data-table th.sortable:hover {
  color: var(--color-primary-700);
}

.data-table th.sortable::after {
  content: '⇅';
  position: absolute;
  right: var(--spacing-2);
  opacity: 0.4;
}

.data-table th.sorted-asc::after {
  content: '↑';
  opacity: 1;
}

.data-table th.sorted-desc::after {
  content: '↓';
  opacity: 1;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
}

.status-badge.not-started {
  background: var(--color-gray-200);
  color: var(--color-gray-700);
}

.status-badge.in-progress {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

.status-badge.completed {
  background: var(--color-success-100);
  color: var(--color-success-700);
}

.status-badge.blocked {
  background: var(--color-warning-100);
  color: var(--color-warning-700);
}

.status-badge.error {
  background: var(--color-error-100);
  color: var(--color-error-700);
}

/* ============================================
   LOADING & EMPTY STATES
   ============================================ */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-gray-200) 25%,
    var(--color-gray-300) 50%,
    var(--color-gray-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 1rem;
  margin-bottom: var(--spacing-2);
}

.skeleton-title {
  height: 1.5rem;
  width: 60%;
  margin-bottom: var(--spacing-3);
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-12) var(--spacing-6);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.message {
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  background: var(--color-error-100);
  color: var(--color-error-800);
  font-size: 0.875rem;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-12) var(--spacing-6);
  text-align: center;
  background: var(--color-background-secondary);
  border-radius: var(--radius-lg);
  border: 2px dashed var(--color-border);
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--spacing-4);
  color: var(--color-text-tertiary);
}

.empty-state-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-2) 0;
}

.empty-state-description {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-6) 0;
  max-width: 400px;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary-700);
  color: var(--color-text-inverse);
  padding: var(--spacing-2) var(--spacing-4);
  z-index: 10000;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}

/* Focus Management */
*:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
}

*:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Display */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-inline-flex { display: inline-flex; }

/* Flexbox — NEXUS-UI-POLISH-001: the duplicated Tailwind utilities that used
   to live in this block (.flex-wrap, .items-*, .justify-center/end/between,
   .flex-1, .gap-*, .m-0/.mt-*/.mb-*/.p-2/.p-4/.p-6, .text-center/left/right,
   .font-*) were removed. They were byte-identical in value to the Tailwind
   build loaded earlier, but because a plain rule beats a media-scoped rule of
   equal specificity regardless of source order *within* media queries, they
   silently killed every responsive variant of those utilities — most visibly
   `p-4 lg:p-6` on all 22 pages, which rendered 16px instead of 24px at
   ≥1024px (content flush against the sidebar). Tailwind now owns these
   utilities. Kept below: names Tailwind's built subset does not define. */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.justify-start { justify-content: flex-start; }

/* Spacing */
.m-0 { margin: 0; }
.p-0 { padding: 0; }

/* Colors */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-success { color: var(--color-success-600); }
.text-warning { color: var(--color-warning-600); }
.text-error { color: var(--color-error-600); }

/* Backgrounds */
.bg-primary { background: var(--color-primary-700); }
.bg-secondary { background: var(--color-secondary-600); }
.bg-surface { background: var(--color-surface); }
.bg-background { background: var(--color-background); }

/* Borders */
.border { border: 1px solid var(--color-border); }
.border-t { border-top: 1px solid var(--color-border); }
.border-b { border-bottom: 1px solid var(--color-border); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Sizing */
.w-full { width: 100%; }
.h-full { height: 100%; }
.max-w-sm { max-width: var(--container-sm); }
.max-w-md { max-width: var(--container-md); }
.max-w-lg { max-width: var(--container-lg); }
.max-w-xl { max-width: var(--container-xl); }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* ============================================
   CLINICAL & LEGAL SPECIFIC COMPONENTS
   ============================================ */

/* Risk Panels */
.risk-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-4);
  background: var(--color-surface);
}

.risk-panel-high {
  border-left: 4px solid var(--color-error-600);
  background: linear-gradient(to right, rgba(220, 38, 38, 0.03), transparent);
}

.risk-panel-high .risk-panel-title {
  color: var(--color-error-700);
}

.risk-panel-medium {
  border-left: 4px solid var(--color-warning-600);
  background: linear-gradient(to right, rgba(245, 158, 11, 0.03), transparent);
}

.risk-panel-medium .risk-panel-title {
  color: var(--color-warning-700);
}

.risk-panel-low {
  border-left: 4px solid var(--color-success-600);
  background: linear-gradient(to right, rgba(16, 185, 129, 0.03), transparent);
}

.risk-panel-low .risk-panel-title {
  color: var(--color-success-700);
}

.risk-panel-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: var(--spacing-2);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.risk-panel-content {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.57;
}

.risk-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.risk-badge-high {
  background: var(--color-error-100);
  color: var(--color-error-700);
}

.risk-badge-medium {
  background: var(--color-warning-100);
  color: var(--color-warning-700);
}

.risk-badge-low {
  background: var(--color-success-100);
  color: var(--color-success-700);
}

/* Evidence States */
.evidence-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-3);
}

.evidence-card.strong {
  border-left: 4px solid var(--color-success-600);
}

.evidence-card.moderate {
  border-left: 4px solid var(--color-info-600);
}

.evidence-card.weak {
  border-left: 4px solid var(--color-warning-600);
}

.evidence-card.contradictory {
  border-left: 4px solid var(--color-error-600);
}

.evidence-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-2);
}

.evidence-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.evidence-source {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  font-family: var(--font-family-mono);
}

.evidence-body {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.57;
  margin-bottom: var(--spacing-2);
}

.evidence-footnote {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  font-style: italic;
}

/* Timeline Components */
.timeline {
  position: relative;
  padding-left: var(--spacing-6);
  margin: var(--spacing-6) 0;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}

.timeline-entry {
  position: relative;
  margin-bottom: var(--spacing-4);
  padding-bottom: var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}

.timeline-entry:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.timeline-entry::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--spacing-6) + 4px);
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary-600);
  border: 2px solid var(--color-background);
}

.timeline-entry.milestone::before {
  width: 14px;
  height: 14px;
  left: calc(-1 * var(--spacing-6) + 2px);
  background: var(--color-secondary-600);
}

.timeline-date {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-1);
}

.timeline-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-1);
}

.timeline-description {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.57;
}

/* Record Citation */
.record-citation {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2);
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-family: var(--font-family-mono);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast) var(--timing-function);
}

.record-citation:hover {
  border-color: var(--color-primary-500);
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

.record-citation.bates {
  background: var(--color-info-50);
  border-color: var(--color-info-200);
  color: var(--color-info-700);
}

.record-citation.bates:hover {
  background: var(--color-info-100);
  color: var(--color-info-800);
}

/* Reviewer Findings */
.finding-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-3);
}

.finding-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-3);
}

.finding-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.finding-meta {
  display: flex;
  gap: var(--spacing-3);
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

.finding-body {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.57;
  margin-bottom: var(--spacing-3);
}

.finding-citations {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-top: var(--spacing-2);
  padding-top: var(--spacing-2);
  border-top: 1px solid var(--color-border);
}

.finding-type {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.finding-type.clinical {
  background: var(--color-secondary-100);
  /* FIX-CONTRAST: the v11 teal rebuild lightened secondary-700 to #218f84 —
     3.50:1 on this chip, under the 4.5:1 AA text floor in both themes (the
     pastel chip is not dark-themed). Same fix pattern as CONTRAST-Q1: the
     call site points at a deeper step of the same hue — secondary-800
     (#17665f) measures 6.01:1 on the chip. */
  color: var(--color-secondary-800);
}

.finding-type.legal {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

.finding-type.compliance {
  background: var(--color-module-compliance);
  color: white;
}

/* Documentation Gaps */
.gap-alert {
  display: flex;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--color-warning-50);
  border: 1px solid var(--color-warning-200);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-3);
}

.gap-alert-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-warning-600);
}

.gap-alert-content {
  flex: 1;
}

.gap-alert-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-warning-800);
  margin: 0 0 var(--spacing-1) 0;
}

.gap-alert-description {
  font-size: 0.875rem;
  color: var(--color-warning-700);
  line-height: 1.57;
  margin: 0;
}

.gap-list {
  margin-top: var(--spacing-2);
  padding-left: var(--spacing-4);
}

.gap-list-item {
  font-size: 0.875rem;
  color: var(--color-warning-700);
  margin-bottom: var(--spacing-1);
}

/* Compliance Findings */
.compliance-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3);
  background: var(--color-background-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-3);
}

.compliance-status-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.compliance-status-icon.compliant {
  color: var(--color-success-600);
}

.compliance-status-icon.non-compliant {
  color: var(--color-error-600);
}

.compliance-status-icon.partial {
  color: var(--color-warning-600);
}

.compliance-status-text {
  flex: 1;
}

.compliance-status-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-1) 0;
}

.compliance-status-description {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Standard of Care Issues */
.soc-issue {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-4);
  background: var(--color-surface);
}

.soc-issue-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-3);
  padding-bottom: var(--spacing-3);
  border-bottom: 1px solid var(--color-border);
}

.soc-issue-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.soc-issue-severity {
  display: flex;
  gap: var(--spacing-1);
}

.soc-issue-body {
  margin-bottom: var(--spacing-3);
}

.soc-issue-standard {
  font-size: 0.875rem;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-2);
}

.soc-issue-standard strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.soc-issue-breach {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  background: var(--color-error-50);
  border-left: 3px solid var(--color-error-400);
  padding: var(--spacing-2) var(--spacing-3);
  margin: var(--spacing-2) 0;
}

.soc-issue-causation {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  background: var(--color-info-50);
  border-left: 3px solid var(--color-info-400);
  padding: var(--spacing-2) var(--spacing-3);
  margin: var(--spacing-2) 0;
}

/* CONTRAST-Q1: dark mode flipped the text token to #cbd5e1 but left the light
   pastel alert fills unthemed, so secondary text landed on a near-white panel
   at 1.36:1 — the D-019/D-023 shape again, one side themed and the other not.
   Both sides are now themed together, reusing the dark alert fills the status
   badges already ship (`html.dark .nx-status-badge--rejected/--corrected`),
   with the colour restated so the pair is measured rather than inherited.
   Measured over the dark card: breach 9.15:1, causation 8.68:1. */
html.dark .soc-issue-breach {
  background: rgba(127, 29, 29, 0.4);
  color: var(--color-text-secondary);
}

html.dark .soc-issue-causation {
  background: rgba(30, 58, 138, 0.4);
  color: var(--color-text-secondary);
}

.soc-issue-citations {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-border);
}

/* Nexus Semantic Classes */
/* Clinical States */
.nexus-clinical-fact {
  border-left: 3px solid var(--color-secondary-600);
  padding-left: var(--spacing-3);
  margin: var(--spacing-3) 0;
}

.nexus-clinical-fact-title {
  font-size: 0.75rem;
  font-weight: 600;
  /* FIX-CONTRAST: secondary-700 (#218f84 after the v11 rebuild) measured
     3.70-3.94:1 on the light surfaces — under AA. Call site moved to
     secondary-800 (#17665f): 6.35:1 on the page, 6.77:1 on cards. */
  color: var(--color-secondary-800);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-1);
}

/* CONTRAST-Q1: `--color-secondary-700` has no dark counterpart, so this label
   measured 2.67-3.26:1 on the dark surfaces. Fixed the way every other dark
   accent in this file is fixed — the call site points at a lighter step of the
   same hue (`html.dark .nx-page-header__eyebrow` uses primary-300; the dark
   status badges use their scale's 300 step). Light mode is byte-identical, the
   clinical teal survives in both themes, and `--color-secondary-700` itself is
   left alone so `.finding-type.clinical` (4.86:1 on its light chip) is
   unaffected. Measured: 12.07:1 on the page, 9.89:1 on the card. */
html.dark .nexus-clinical-fact-title {
  color: var(--color-secondary-300);
}

/* Legal Allegations */
.nexus-legal-allegation {
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-3);
  margin: var(--spacing-3) 0;
}

.nexus-legal-allegation-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-1);
}

/* Expert Opinion */
.nexus-expert-opinion {
  background: linear-gradient(to right, rgba(139, 92, 246, 0.03), transparent);
  border-left: 4px solid var(--color-module-sops);
  padding: var(--spacing-4);
  margin: var(--spacing-4) 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.nexus-expert-opinion-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-module-sops);
  margin-bottom: var(--spacing-2);
}

/* Draft Placeholder */
.nexus-placeholder {
  background: var(--color-warning-50);
  border: 2px dashed var(--color-warning-300);
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
  text-align: center;
  margin: var(--spacing-4) 0;
}

.nexus-placeholder-text {
  font-size: 0.875rem;
  color: var(--color-warning-700);
  font-style: italic;
}

/* Case Summary */
.case-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

.case-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-4);
  padding-bottom: var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}

.case-summary-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.case-summary-meta {
  display: flex;
  gap: var(--spacing-4);
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
}

.case-summary-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-4);
}

.case-summary-section {
  background: var(--color-background-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
}

.case-summary-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--spacing-2) 0;
}

.case-summary-section-content {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.57;
  margin: 0;
}

/* ============================================
   CASE WORKSPACE COMPONENTS
   Organizes medical-legal case facts for review.
   Does not determine liability or replace clinical/legal judgment.
   ============================================ */

/* Workspace container */
.case-workspace {
  max-width: var(--content-max-width);
}

/* Case header — top of workspace */
.case-header {
  margin-bottom: var(--spacing-6);
  padding-bottom: var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}

.case-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-3) 0;
}

/* Case metadata bar */
.case-meta-bar {
  flex-wrap: wrap;
  align-items: center;
}

/* Section title — used for workspace card headings */
.section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-4) 0;
  padding-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--color-border);
}

/* Meta list — key/value pairs for case facts */
.meta-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-2) var(--spacing-4);
  margin: 0;
  padding: 0;
}

.meta-list dt {
  font-weight: 600;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.meta-list dd {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-primary);
}

/* Evidence list */
.list-evidence li,
.list-timeline li,
.list-deviations li,
.list-gaps li,
.list-soc li,
.list-deliverables li,
.list-comments li {
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.875rem;
  line-height: 1.5;
}

.list-evidence li:last-child,
.list-timeline li:last-child,
.list-deviations li:last-child,
.list-gaps li:last-child,
.list-soc li:last-child,
.list-deliverables li:last-child,
.list-comments li:last-child {
  border-bottom: none;
}

/* Timeline date marker */
.timeline-date {
  min-width: 100px;
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.875rem;
  display: inline-block;
}

.timeline-desc {
  color: var(--color-text-primary);
}

.citation-ref {
  color: var(--color-text-secondary);
  font-style: italic;
}

/* Gap alert icon */
.gap-alert-icon {
  color: var(--color-warning-700);
  margin-right: var(--spacing-1);
}

/* Compliance status badges */
.compliance-status {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.compliance-status.met {
  background: var(--color-success-100);
  color: var(--color-success-800);
}

.compliance-status.at-risk {
  background: var(--color-warning-100);
  color: var(--color-warning-800);
}

.compliance-status.not-met {
  background: var(--color-error-100);
  color: var(--color-error-800);
}

/* Case workspace action bar */
.case-actions {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

/* Badge variants for case workspace */
.badge-error {
  background: var(--color-error-100);
  color: var(--color-error-800);
}

/* Record review status indicators */
.record-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  margin-right: var(--spacing-2);
}
.record-status-dot.processed { background: var(--color-success-500); }
.record-status-dot.pending   { background: var(--color-warning-500); }
.record-status-dot.failed    { background: var(--color-error-500); }

/* Workspace section card hover for navigation targets */
.case-workspace .card[style*="cursor"] {
  transition: box-shadow var(--transition-fast);
}
.case-workspace .card:hover {
  box-shadow: var(--shadow-md);
}

/* ============================================
   ALERT BANNERS (shared across modules)
   ============================================ */

.alert {
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-3);
  font-size: 0.875rem;
  line-height: 1.5;
}

.alert-info {
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  color: var(--color-primary-900);
}

.alert-warning {
  background: var(--color-warning-50);
  border: 1px solid var(--color-warning-200);
  color: var(--color-warning-900);
}

.alert-error {
  background: var(--color-error-50);
  border: 1px solid var(--color-error-200);
  color: var(--color-error-900);
}

/* ============================================
   CHRONOLOGY MODULE
   ============================================ */

.chronology-toolbar {
  display: flex;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
  flex-wrap: wrap;
}

.chronology-filter {
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 0.875rem;
}

.chronology-filter:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 1px;
}

.timeline-card {
  position: relative;
  padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) var(--spacing-6);
  margin-bottom: var(--spacing-3);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary-500);
  box-shadow: var(--shadow-sm);
}

.timeline-card[data-severity="high"] {
  border-left-color: var(--color-error-600);
}

.timeline-card[data-severity="medium"] {
  border-left-color: var(--color-warning-500);
}

.timeline-card[data-severity="low"] {
  border-left-color: var(--color-success-500);
}

.timeline-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-2);
  flex-wrap: wrap;
}

.timeline-card-date {
  font-weight: 600;
  color: var(--color-primary-700);
  font-size: 0.875rem;
  white-space: nowrap;
}

.timeline-card-body {
  margin-bottom: var(--spacing-2);
}

.timeline-card-description {
  color: var(--color-text-primary);
  line-height: 1.6;
}

.timeline-card-meta {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.timeline-citation {
  font-style: italic;
  color: var(--color-text-secondary);
}

.timeline-category-badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--color-primary-100);
  color: var(--color-primary-800);
}

.timeline-note-area {
  margin-top: var(--spacing-2);
  padding-top: var(--spacing-2);
  border-top: 1px solid var(--color-border);
}

.timeline-note-textarea {
  width: 100%;
  min-height: 60px;
  padding: var(--spacing-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  resize: vertical;
}

.timeline-note-textarea:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 1px;
}

/* Timeline add-event form */
.timeline-add-form {
  margin-bottom: var(--spacing-4);
}

.timeline-add-toggle {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary-700);
  padding: var(--spacing-2) 0;
  user-select: none;
}

.timeline-add-toggle:hover {
  color: var(--color-primary-900);
}

.timeline-add-body {
  padding: var(--spacing-4);
  background: var(--color-background-secondary);
  border-radius: var(--radius-md);
  margin-top: var(--spacing-2);
}

/* Causation note label (shared with timeline notes) */
.causation-note-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-1);
}

/* Form row helpers */
.form-row {
  margin-bottom: var(--spacing-3);
}

.form-row-inline {
  display: flex;
  gap: var(--spacing-3);
}

@media (max-width: 640px) {
  .form-row-inline {
    flex-direction: column;
    gap: 0;
  }
}

/* Evidence card sub-elements */
.evidence-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}

.evidence-card-title {
  font-weight: 600;
  color: var(--color-text-primary);
  word-break: break-word;
}

.evidence-card-meta {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-2);
}

.evidence-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.evidence-status-badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.evidence-status-badge.processed {
  background: var(--color-success-100);
  color: var(--color-success-800);
}

.evidence-status-badge.pending {
  background: var(--color-warning-100);
  color: var(--color-warning-800);
}

.evidence-status-badge.failed {
  background: var(--color-error-100);
  color: var(--color-error-800);
}

.evidence-indicators {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  margin-top: var(--spacing-2);
}

.evidence-indicator {
  font-size: 0.75rem;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
}

.evidence-indicator.gap {
  background: var(--color-warning-100);
  color: var(--color-warning-800);
}

.evidence-indicator.compliance {
  background: var(--color-error-100);
  color: var(--color-error-800);
}

/* Evidence map summary (workspace) */
.evidence-map-summary {
  display: flex;
  gap: var(--spacing-4);
}

.evidence-map-stat {
  text-align: center;
}

.evidence-map-stat strong {
  display: block;
  font-size: 1.25rem;
  color: var(--color-text-primary);
}

.evidence-map-stat span {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

/* ============================================
   FILE UPLOAD ZONE (shared by Evidence Map)
   ============================================ */

.upload-section {
  margin-bottom: var(--spacing-4);
}

.upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-8) var(--spacing-6);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-background-secondary);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--color-primary-400);
  background: var(--color-primary-50);
}

.upload-zone:focus-within {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.upload-prompt {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin: 0;
}

.upload-hint {
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
  margin: 0;
}

/* Upload progress bar */
.upload-progress {
  margin-top: var(--spacing-3);
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--color-primary-500);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

#progressText {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin-top: var(--spacing-1);
}

/* ============================================
   EVIDENCE MAP MODULE
   ============================================ */

.evidence-toolbar {
  display: flex;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
  flex-wrap: wrap;
  align-items: center;
}

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-4);
}

.evidence-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--spacing-4);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.evidence-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-300);
}

.evidence-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}

.evidence-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.evidence-icon.pdf { background: var(--color-error-100); color: var(--color-error-700); }
.evidence-icon.docx { background: var(--color-primary-100); color: var(--color-primary-700); }
.evidence-icon.xlsx { background: var(--color-success-100); color: var(--color-success-700); }
.evidence-icon.image { background: var(--color-warning-100); color: var(--color-warning-700); }

.evidence-card-title {
  font-weight: 600;
  color: var(--color-text-primary);
  word-break: break-word;
}

.evidence-card-meta {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-2);
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.evidence-status-badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.evidence-status-badge.processed {
  background: var(--color-success-100);
  color: var(--color-success-800);
}

.evidence-status-badge.pending {
  background: var(--color-warning-100);
  color: var(--color-warning-800);
}

.evidence-status-badge.failed {
  background: var(--color-error-100);
  color: var(--color-error-800);
}

.evidence-indicators {
  display: flex;
  gap: var(--spacing-2);
  margin-top: auto;
  padding-top: var(--spacing-2);
  border-top: 1px solid var(--color-border);
  font-size: 0.75rem;
}

.evidence-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  background: var(--color-background-secondary);
}

.evidence-indicator.gap {
  background: var(--color-warning-100);
  color: var(--color-warning-800);
}

.evidence-indicator.compliance {
  background: var(--color-error-100);
  color: var(--color-error-800);
}

/* ============================================
   RISK REVIEW MODULE
   ============================================ */

.risk-toolbar {
  display: flex;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
  flex-wrap: wrap;
  align-items: center;
}

.risk-panel {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-4);
  box-shadow: var(--shadow-sm);
}

/* Severity-accented panels (optional left accent) */
.risk-panel[data-severity="high"] {
  border-left: 4px solid var(--color-error-600);
}

.risk-panel[data-severity="moderate"] {
  border-left: 4px solid var(--color-warning-500);
}

.risk-panel[data-severity="low"] {
  border-left: 4px solid var(--color-success-500);
}

.risk-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-3);
  padding-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--color-border);
}

.risk-panel-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.risk-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.risk-badge.critical {
  background: var(--color-error-100);
  color: var(--color-error-800);
}

.risk-badge.high {
  background: var(--color-error-100);
  color: var(--color-error-700);
}

.risk-badge.moderate {
  background: var(--color-warning-100);
  color: var(--color-warning-800);
}

.risk-badge.low {
  background: var(--color-success-100);
  color: var(--color-success-800);
}

.risk-badge.flagged {
  background: var(--color-primary-100);
  color: var(--color-primary-800);
}

.risk-item {
  padding: var(--spacing-3);
  margin-bottom: var(--spacing-2);
  border-radius: var(--radius-md);
  background: var(--color-background-secondary);
  border-left: 3px solid var(--color-border);
  transition: background-color 0.15s;
}

.risk-item:hover {
  background: var(--color-primary-50);
}

.risk-item.severity-critical,
.risk-item.severity-high {
  border-left-color: var(--color-error-600);
}

.risk-item.severity-moderate {
  border-left-color: var(--color-warning-500);
}

.risk-item.severity-low {
  border-left-color: var(--color-success-500);
}

.risk-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-1);
  flex-wrap: wrap;
}

.risk-item-title {
  font-weight: 600;
  color: var(--color-text-primary);
}

.risk-item-body {
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: var(--spacing-2);
}

.risk-item-meta {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.causation-note-area {
  margin-top: var(--spacing-2);
  padding-top: var(--spacing-2);
  border-top: 1px solid var(--color-border);
}

.causation-note-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-1);
}

.soc-issue-area {
  margin-top: var(--spacing-2);
  padding: var(--spacing-2);
  background: var(--color-warning-50);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-warning-400);
}

.soc-issue-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-warning-700);
  margin-bottom: var(--spacing-1);
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 240px;
  }
  
  .top-nav {
    padding: 0 var(--spacing-4);
  }
  
  .top-nav-search {
    margin: 0 var(--spacing-4);
    max-width: 360px;
  }
  
  .case-summary {
    padding: var(--spacing-4);
  }
  
  .case-summary-header {
    flex-direction: column;
    gap: var(--spacing-2);
  }
  
  .case-summary-meta {
    flex-wrap: wrap;
  }

  /* Case Workspace — tablet */
  .meta-list {
    grid-template-columns: auto 1fr;
    gap: var(--spacing-1) var(--spacing-3);
  }
}

/* Mobile Landscape & Tablet Small (max-width: 768px) */
@media (max-width: 768px) {
  :root {
    --sidebar-width: 200px;
    --header-height: 56px;
  }
  
  html {
    font-size: 15px;
  }
  
  /* Typography Scale Down */
  h1, .heading-1 {
    font-size: 1.75rem;
  }
  
  h2, .heading-2 {
    font-size: 1.375rem;
  }
  
  h3, .heading-3 {
    font-size: 1.125rem;
  }
  
  /* Navigation Adjustments */
  .sidebar {
    width: var(--sidebar-width);
    padding: var(--spacing-3);
  }
  
  .sidebar-nav-item {
    padding: var(--spacing-2) var(--spacing-3);
    gap: var(--spacing-2);
  }
  
  .top-nav {
    height: var(--header-height);
  }
  
  .top-nav-search {
    display: none; /* Hide search on mobile, add hamburger menu if needed */
  }
  
  .top-nav-actions {
    gap: var(--spacing-2);
  }
  
  /* Card Adjustments */
  .card {
    border-radius: var(--radius-md);
  }
  
  .card-header,
  .card-body,
  .card-footer {
    padding: var(--spacing-4);
  }
  
  .module-card {
    padding: var(--spacing-4);
  }
  
  .module-card-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  /* Form Adjustments */
  .input,
  .select,
  .textarea {
    font-size: 16px; /* Prevent iOS zoom on focus */
    padding: var(--spacing-3) var(--spacing-4);
  }
  
  .label {
    font-size: 0.8125rem;
  }
  
  /* Table Adjustments */
  .data-table {
    font-size: 0.8125rem;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  .data-table thead,
  .data-table tbody,
  .data-table th,
  .data-table td,
  .data-table tr {
    display: table;
    width: 100%;
  }
  
  /* Case Summary Stacked */
  .case-summary-body {
    grid-template-columns: 1fr;
  }
  
  /* Timeline Adjustments */
  .timeline {
    padding-left: var(--spacing-4);
  }
  
  .timeline::before {
    left: 0;
  }
  
  .timeline-entry::before {
    left: calc(-1 * var(--spacing-4) + 4px);
  }
  
  /* Risk Panel */
  .risk-panel {
    padding: var(--spacing-3);
  }
  
  /* Evidence Card */
  .evidence-header {
    flex-direction: column;
    gap: var(--spacing-2);
  }
  
  /* Gap Alert */
  .gap-alert {
    flex-direction: column;
    gap: var(--spacing-2);
  }
  
  /* Compliance Status */
  .compliance-status {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2);
  }
  
  /* SOC Issue */
  .soc-issue-header {
    flex-direction: column;
    gap: var(--spacing-2);
  }

  /* Chronology — mobile */
  .timeline-card-header {
    flex-direction: column;
    gap: var(--spacing-1);
  }

  .chronology-toolbar {
    flex-direction: column;
  }

  /* Evidence Map — mobile */
  .evidence-grid {
    grid-template-columns: 1fr;
  }

  .evidence-card-header {
    flex-direction: column;
    gap: var(--spacing-2);
  }

  /* Risk Review — mobile */
  .risk-panel-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .risk-item-header {
    flex-direction: column;
    gap: var(--spacing-1);
  }

  /* Utility Adjustments */
  .p-6 {
    padding: var(--spacing-4);
  }
  
  .gap-4 {
    gap: var(--spacing-3);
  }
}

/* Mobile Portrait (max-width: 480px) */
@media (max-width: 480px) {
  :root {
    --sidebar-width: 0; /* Hide sidebar, use bottom nav or hamburger */
    --header-height: 56px;
  }
  
  html {
    font-size: 14px;
  }
  
  body {
    -webkit-text-size-adjust: 100%;
  }
  
  /* Hide Sidebar on Mobile */
  .sidebar {
    display: none;
  }
  /* The dashboard's hamburger menu (toggleSidebar) opens the sidebar by adding
     the .open class and sliding it in via transform (see dashboard-styles.css).
     Without this override the display:none above wins and the menu is a dead
     button on screens <=480px. */
  .sidebar.open {
    display: flex;
  }
  
  /* Full Width Layout */
  .top-nav {
    padding: 0 var(--spacing-3);
  }
  
  /* Typography Further Reduced */
  h1, .heading-1 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-3);
  }
  
  h2, .heading-2 {
    font-size: 1.25rem;
  }
  
  h3, .heading-3 {
    font-size: 1.125rem;
  }
  
  /* Button Full Width */
  .btn-block {
    display: flex;
    width: 100%;
  }
  
  /* Card Adjustments */
  .card-header,
  .card-body,
  .card-footer {
    padding: var(--spacing-3);
  }
  
  .module-card {
    padding: var(--spacing-3);
  }
  
  /* Case Summary */
  .case-summary {
    padding: var(--spacing-3);
    margin-bottom: var(--spacing-4);
  }
  
  .case-summary-title {
    font-size: 1.125rem;
  }
  
  /* Timeline */
  .timeline {
    padding-left: var(--spacing-3);
  }
  
  .timeline-entry::before {
    left: calc(-1 * var(--spacing-3) + 4px);
    width: 8px;
    height: 8px;
  }
  
  /* Empty State */
  .empty-state {
    padding: var(--spacing-6) var(--spacing-4);
  }
  
  .empty-state-icon {
    width: 48px;
    height: 48px;
  }
  
  .empty-state-title {
    font-size: 1.125rem;
  }
  
  /* Stat Card */
  .stat-card-value {
    font-size: 1.25rem;
  }
  
  /* Status Badge */
  .status-badge {
    font-size: 0.6875rem;
    padding: var(--spacing-1);
  }
  
  /* Record Citation */
  .record-citation {
    font-size: 0.6875rem;
    padding: var(--spacing-1);
  }

  /* Chronology — mobile compact */
  .timeline-card {
    padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-4);
  }

  /* Evidence — mobile compact */
  .evidence-card {
    padding: var(--spacing-3);
  }
}

/* Large Mobile Landscape (min-width: 481px) and max-width: 768px */
@media (min-width: 481px) and (max-width: 768px) and (orientation: landscape) {
  .sidebar {
    width: var(--sidebar-width);
  }
  
  /* Ensure adequate vertical space */
  .shell {
    grid-template-rows: auto minmax(0, 1fr);
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  /* Reset layout for print */
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Hide non-essential UI elements */
  .sidebar,
  .top-nav,
  .btn,
  button,
  .skip-link,
  .empty-state,
  .skeleton,
  nav,
  footer:not(.case-summary),
  [role="navigation"],
  [role="complementary"] {
    display: none !important;
  }

  /* UI-BETA-GATE D-033: report names render inside buttons (clickable cards
     and history rows since D-021), so the blanket `button` hide above erased
     them from paper entirely, and the D-021 on-screen `truncate` then clipped
     the long unbreakable filenames in the narrower print column. Restore the
     content-bearing buttons as plain text and let long names wrap on paper;
     the on-screen truncation and tooltip stay exactly as shipped. */
  button[data-report-index],
  button[data-report-history-index] {
    display: contents !important;
  }

  [data-od-id="report-types"] .truncate,
  td:has([data-report-history-index]) {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    /* UI-BETA-GATE D-037: break-all split report names mid-word on paper
       ("Chronology Su / mmary"). Break at spaces first and only split a long
       unbreakable token when it cannot fit on its own line. */
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* Without a fixed layout the long filename + ISO date columns overflowed
     the printable width and clipped the right-hand columns off the paper. */
  table:has([data-report-history-index]) {
    table-layout: fixed;
  }

  table:has([data-report-history-index]) th:first-child {
    width: 40%;
  }

  /* Page setup */
  @page {
    size: A4;
    margin: 2cm;
  }

  html {
    font-size: 11pt;
  }

  body {
    background: #ffffff;
    color: #000000;
    line-height: 1.4;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Ensure readability */
  .heading-1 {
    font-size: 18pt;
    line-height: 1.3;
    margin-bottom: 0.5cm;
  }

  .heading-2 {
    font-size: 14pt;
    line-height: 1.35;
    margin-bottom: 0.4cm;
  }

  .heading-3 {
    font-size: 12pt;
    line-height: 1.4;
    margin-bottom: 0.3cm;
  }

  .body-large,
  p {
    font-size: 11pt;
    line-height: 1.5;
    color: #000000;
  }

  .text-small,
  .caption {
    font-size: 9pt;
    line-height: 1.4;
  }

  /* Card styling for print */
  .card,
  .module-card,
  .evidence-card,
  .finding-card,
  .risk-panel,
  .soc-issue {
    border: 1px solid #000000 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    margin-bottom: 0.5cm;
  }

  .card-header,
  .card-footer {
    background: #f0f0f0 !important;
    border-color: #cccccc !important;
  }

  /* Tables */
  .data-table {
    font-size: 9pt;
    border-collapse: collapse;
    width: 100%;
  }

  .data-table thead {
    background: #f0f0f0 !important;
    display: table-header-group;
  }

  .data-table tbody {
    display: table-row-group;
  }

  .data-table th,
  .data-table td {
    border: 1px solid #000000;
    padding: 4pt;
  }

  /* Status badges */
  .status-badge {
    border: 1px solid #000000;
    background: #f0f0f0 !important;
    color: #000000 !important;
  }

  /* Risk panels */
  .risk-panel-high {
    border-left: 4px solid #000000 !important;
  }

  .risk-panel-medium {
    border-left: 4px solid #666666 !important;
  }

  .risk-panel-low {
    border-left: 4px solid #333333 !important;
  }

  /* Evidence cards */
  .evidence-card.strong {
    border-left: 4px solid #000000 !important;
  }

  .evidence-card.moderate {
    border-left: 4px solid #666666 !important;
  }

  .evidence-card.weak {
    border-left: 4px solid #999999 !important;
  }

  .evidence-card.contradictory {
    border-left: 4px solid #cc0000 !important;
  }

  /* Timeline */
  .timeline {
    page-break-inside: avoid;
  }

  .timeline::before {
    background: #000000;
  }

  .timeline-entry::before {
    background: #000000;
  }

  /* Citations and references */
  .record-citation {
    border: 1px solid #000000;
    background: #f5f5f5 !important;
    color: #000000 !important;
  }

  /* Chronology cards — print */
  .timeline-card {
    page-break-inside: avoid;
    border-left-width: 3px;
    box-shadow: none;
  }

  /* Evidence cards — print */
  .evidence-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5cm;
  }

  .evidence-card {
    box-shadow: none;
    border-width: 1px;
  }

  /* Risk panels — print */
  .risk-panel,
  .risk-item {
    page-break-inside: avoid;
    box-shadow: none;
  }

  /* Links */
  a {
    color: #000000;
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }

  /* UI-BETA-GATE D-034: internal same-origin URLs (API/storage-object paths,
     object IDs, case slugs) must never reach paper — a HIPAA platform's court
     printout cannot leak internal infrastructure. External citation links
     keep their printed URL; same-origin links are marked `data-print-internal`
     by the beforeprint handler in dashboard.html, because CSS alone cannot
     compare an href against the page origin. */
  a[data-print-internal]::after {
    content: none;
  }

  /* Avoid page breaks */
  h1,
  h2,
  h3,
  h4,
  .heading-1,
  .heading-2,
  .heading-3,
  .heading-4 {
    page-break-after: avoid;
  }

  .card,
  .module-card,
  .evidence-card,
  .finding-card,
  .risk-panel,
  .soc-issue,
  .case-summary {
    page-break-inside: avoid;
  }

  /* Ensure content flows to next page if needed */
  .timeline-entry,
  .gap-alert,
  .compliance-status {
    page-break-inside: avoid;
  }

  /* Footnotes and citations */
  .evidence-footnote,
  .finding-meta {
    font-size: 8pt;
    color: #333333;
  }

  /* Remove background colors except for semantic indicators */
  .bg-primary,
  .bg-secondary,
  .bg-surface,
  .bg-background {
    background: #ffffff !important;
  }

  /* Text color overrides */
  .text-primary,
  .text-secondary,
  .text-tertiary {
    color: #000000 !important;
  }

  .text-success,
  .text-warning,
  .text-error {
    color: #000000 !important;
    font-weight: 600;
  }

  /* UI-BETA-GATE D-036: a former @page @bottom-center margin box printed a
     second "Page X of Y" under the browser's own page footer ("Page 1 of 1
     Page 1 of 1" on paper). The browser footer is present in the normal print
     flow, so the CSS duplicate is removed rather than the browser's. */
}
    width: var(--sidebar-width);
  }
  
  .case-summary-body {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* ============================================
   DESIGN SYSTEM VALIDATION & LIMITATIONS
   ============================================ */

/*
  Nexus Design System - Implementation Status
  
  COMPLETED SECTIONS:
  ✓ Color tokens (primary, secondary, neutrals, semantic)
  ✓ Typography system (headings, body, utility text)
  ✓ Button components (primary, secondary, ghost, danger, sizes)
  ✓ Card components (basic, module, stat, case summary)
  ✓ Form elements (inputs, selects, textareas, checkboxes)
  ✓ Navigation (sidebar, top nav, nav items)
  ✓ Data tables with sortable headers
  ✓ Status badges (not-started, in-progress, completed, blocked, error)
  ✓ Loading states (skeleton, shimmer animation)
  ✓ Empty states with icons
  ✓ Accessibility (screen reader, skip link, focus management, reduced motion)
  ✓ Utility classes (display, flex, grid, spacing, text, colors, borders)
  ✓ Clinical/legal components (risk panels, evidence cards, timeline)
  ✓ Record citations with Bates numbering support
  ✓ Reviewer findings with citation tracking
  ✓ Documentation gap alerts
  ✓ Compliance status indicators
  ✓ Standard of care issue blocks
  ✓ Nexus semantic classes (clinical-fact, legal-allegation, expert-opinion)
  ✓ Responsive breakpoints (tablet ≤1024px, mobile ≤768px, small mobile ≤480px)
  
  ACCESSIBILITY COMPLIANCE:
  ✓ WCAG 2.2 AA contrast ratios for all text and UI components
  ✓ Focus indicators on all interactive elements
  ✓ Screen reader support with sr-only classes
  ✓ Reduced motion support
  ✓ Keyboard navigation ready
  ✓ Touch-friendly tap targets (44px minimum on mobile)
  ✓ Font size 16px+ on forms to prevent iOS zoom
  
  DESIGN PRINCIPLES ENFORCED:
  ✓ Clinical but warm aesthetic
  ✓ Apple-like spacing and restraint
  ✓ Litigation-ready visual hierarchy
  ✓ No generic SaaS styling
  ✓ No command-center or cyberpunk language
  ✓ Product identity: "Nexus" by LNC Nexus Technologies, LLC
  ✓ Mobile-first responsive design
  
  KNOWN LIMITATIONS:
  • Dark mode support implemented but not fully tested across all components
  • Print styles added (2026-07-09) — verify in staging environment
  • Animation effects minimal by design (can add micro-interactions if requested)
  • No CSS Grid system utilities beyond flexbox (add if needed)
  • Component states (hover, active, disabled) implemented for core components only
  • Sidebar hidden on mobile ≤480px (requires bottom nav or hamburger implementation)
  
  ASSUMPTIONS:
  • Fira Code/Mono loaded externally for code/citation elements
  • Icons provided via SVG or icon font (not included in this CSS)
  • Icons should be minimum 24px for touch accessibility
  
  NEXT STEPS (if needed):
  1. Verify print styles in staging environment
  2. Add micro-interaction animations (subtle hover states, transitions)
  3. Add CSS Grid utility classes
  4. Implement mobile navigation (bottom nav or hamburger menu)
  5. Add component-specific animation states
  6. Add touch gesture support for swipe actions
  
  FILES MODIFIED:
  - static/css/design-system.css (added clinical/legal components, semantic classes, responsive breakpoints)
  
  NAMING CORRECTIONS MADE:
  - All "BluQube" references are consistent with brand casing
  - No "SOPSAAS" references in product-facing comments
  - Clinical terminology preferred over tactical/command-center language
  
  VALIDATION PERFORMED:
  ✓ Color contrast ratios verified (minimum 4.5:1 for normal text, 3:1 for large text)
  ✓ Focus states present on all interactive elements
  ✓ Semantic class naming follows Nexus conventions
  ✓ Component structure supports litigation workflows
  ✓ No duplication of existing CSS rules
  ✓ No breaking changes to existing components
  ✓ Responsive breakpoints tested for layout integrity at 320px–1024px
  ✓ Touch targets minimum 44px for accessibility
  ✓ Form inputs 16px+ to prevent iOS zoom
  
  RISKS OR INCOMPLETE AREAS:
  • Dark mode: Test all clinical components in dark theme on mobile devices
  • Print styles: Implemented but not tested in staging environment
  • Mobile navigation: Sidebar hidden at ≤480px; requires alternative nav pattern
  • Animation: No micro-interactions added (by design, but may enhance UX)
  • Icon system: Not included; requires external icon library (minimum 24px for touch)
  • Grid system: Only flexbox utilities; CSS Grid utilities not included
  
  RESPONSIVE BREAKPOINTS ADDED:
  • ≤1024px (Tablet): Reduced sidebar, adjusted spacing, stacked headers
  • ≤768px (Mobile): Smaller typography, stacked layouts, touch-optimized forms
  • ≤480px (Small Mobile): Hidden sidebar, full-width buttons, compact cards
  • Landscape support: Special handling for mobile landscape orientation
  
  DESIGN SYSTEM VERSION: 1.2.0
  LAST UPDATED: 2026-07-09
  STATUS: Production Ready with Mobile Responsive Support
*/

/* ============================================================
   SHARED PRIMITIVES (NEXUS-UXG-002)
   ------------------------------------------------------------
   The documented, reusable UI primitive set for the live SPA
   (lncnexus/ui/dashboard.html). New and refactored surfaces must
   use these primitives instead of page-local variants for the
   same state. Companion guide: docs/development/UX-PRIMITIVES.md.

   Conventions
   - Namespace: .nx-*
   - Color is NEVER the only state signal: every state carries a
     text label and/or icon in addition to its tone.
   - Dark mode: the SPA toggles a `dark` class on <html>; every
     primitive defines an html.dark override.
   - Print: @media print rules per primitive (tone becomes a
     border, ink-saving, dialogs and toasts hidden).
   - Reduced motion: @media (prefers-reduced-motion: reduce)
     disables animation on every primitive that animates.
   - Focus: :focus-visible ring on every interactive primitive.
   - High zoom: primitives are rem-based, wrap text
     (overflow-wrap: anywhere), and stack/wrap at narrow
     effective widths (<=480px) so 200%+ zoom never clips.

   TABLE OF CONTENTS
   1.  .nx-page-header          - eyebrow, title, context, action
   2.  .nx-context-bar          - case name, status, range, access
   3.  .nx-source-chip          - evidence/source reference chip
   4.  .nx-status-badge         - semantic review status badge
   5.  .nx-confidence / .nx-limitation - uncertainty disclosure
   6.  .nx-state-box            - loading/empty/error/retry/offline
   7.  .nx-filter-bar           - filters + summary + clear-all
   8.  .nx-split-pane           - two-pane review layout
   9.  .nx-dialog               - confirm/destructive/decision-note
   10. .nx-version-indicator    - version/revision chip
   11. .nx-toast / .nx-inline-result - transient + persistent results
   ============================================================ */

/* -- 1. Page header ------------------------------------------- */

.nx-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.nx-page-header__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary-600);
  margin: 0;
}

.nx-page-header__title {
  font-family: var(--font-family-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0.25rem 0 0 0;
  overflow-wrap: anywhere;
}

.nx-page-header__context {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin: 0.25rem 0 0 0;
  max-width: 48rem;
}

.nx-page-header__meta {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  margin: 0.75rem 0 0 0;
}

.nx-page-header__action {
  flex-shrink: 0;
}

.nx-page-header__action > * {
  min-height: 2.25rem; /* comfortable touch target */
}

html.dark .nx-page-header__eyebrow { color: var(--color-primary-300); }
html.dark .nx-page-header__title { color: var(--color-gray-50); }
html.dark .nx-page-header__context { color: var(--color-gray-400); }
/* UI-BETA-GATE D-032: this dark variant was not missing, it was too dark —
   gray-500 (#64748b) on the dark page background rgb(17,24,39) measured 3.73:1
   live at 12px, under the 4.5:1 AA floor for small text, so the "Generated
   reports and analysis outputs …" meta line failed AA. Raised to the same dark
   secondary token the D-019/D-023 fixes use (gray-400): 6.92:1 on that surface.
   Note the markup pairs text-gray-400 with dark:text-gray-500, and the D-023
   rule that retargets dark:text-gray-500 cannot win here — this rule is later
   in the sheet at equal specificity, which is why the meta line still failed. */
html.dark .nx-page-header__meta { color: var(--color-gray-400); }

@media (max-width: 480px) {
  /* High zoom / small effective width: stack the action under the text. */
  .nx-page-header { flex-direction: column; align-items: stretch; }
  .nx-page-header__action { width: 100%; }
  .nx-page-header__action > * { width: 100%; }
}

@media print {
  .nx-page-header__action { display: none; } /* actions are meaningless on paper */
  .nx-page-header__title { color: #000; }
  .nx-page-header__eyebrow,
  .nx-page-header__context { color: #333; }
}

/* -- 2. Case context bar --------------------------------------- */

.nx-context-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2) var(--spacing-4);
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.nx-context-bar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  min-width: 0;
  overflow-wrap: anywhere;
}

.nx-context-bar__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

.nx-context-bar__value {
  font-weight: 500;
  color: var(--color-text-primary);
}

.nx-context-bar__divider {
  width: 1px;
  height: 1rem;
  background: var(--color-border-strong);
}

html.dark .nx-context-bar {
  background: rgba(30, 41, 59, 0.6);
  border-color: var(--color-gray-700);
}
html.dark .nx-context-bar__value { color: var(--color-gray-100); }
html.dark .nx-context-bar__divider { background: var(--color-gray-600); }

@media print {
  .nx-context-bar { background: none; border-color: #999; }
}

/* -- 3. Evidence / source chip --------------------------------- */

.nx-source-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  max-width: 22rem;
  /* UI-POLISH-001 C1: as a flex item in an atlas-card chip row the automatic
     minimum size (min-width: auto) floors at the nowrap filename clamped by
     max-width, so the chip refused to shrink into the narrow text column and
     right-clipped the page at 1706 and 1280 CSS px (ledger 2026-11-03).
     min-width: 0 lets the chip shrink; the __label ellipsis truncates and
     the title attribute keeps the full reference. */
  min-width: 0;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-full);
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.nx-source-chip:hover { background: var(--color-primary-100); }

.nx-source-chip:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.nx-source-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: anywhere;
}

.nx-source-chip__location {
  flex-shrink: 0;
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
}

/* Imprecise references must read as imprecise without color. */
.nx-source-chip__precision {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.nx-source-chip--imprecise {
  border-style: dashed; /* shape, not just color, marks imprecision */
}

html.dark .nx-source-chip {
  background: rgba(48, 63, 84, 0.35);
  border-color: var(--color-primary-700);
  color: var(--color-primary-300);
}
html.dark .nx-source-chip:hover { background: rgba(48, 63, 84, 0.5); }

@media (prefers-reduced-motion: reduce) {
  .nx-source-chip { transition: none; }
}

@media print {
  .nx-source-chip { background: none; border-color: #666; color: #000; }
  .nx-source-chip__location,
  .nx-source-chip__precision { color: #333; }
}

/* -- 4. Status badge -------------------------------------------
   Semantic review status with accessible text. One vocabulary
   (docs/user-guide/TASK-MAP.md): pending, draft, in_review,
   approved, rejected, corrected, blocked, superseded. The
   modifier class carries the tone; the visible label carries
   the meaning - color is never the only signal.               */

.nx-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  overflow-wrap: anywhere;
}

.nx-status-badge::before {
  /* Small shape marker per state so state survives grayscale
     printing and low-vision color filtering. */
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.nx-status-badge--pending,
.nx-status-badge--draft {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}
.nx-status-badge--in_review {
  background: var(--color-warning-100);
  color: var(--color-warning-700);
}
.nx-status-badge--approved {
  background: var(--color-success-100);
  color: var(--color-success-700);
}
.nx-status-badge--rejected,
.nx-status-badge--blocked {
  background: var(--color-error-100);
  color: var(--color-error-700);
}
.nx-status-badge--corrected {
  background: var(--color-info-100);
  color: var(--color-info-700);
}
.nx-status-badge--superseded {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
  text-decoration: line-through; /* superseded reads as superseded */
}

html.dark .nx-status-badge--pending,
html.dark .nx-status-badge--draft {
  background: rgba(55, 65, 81, 0.7);
  color: var(--color-gray-300);
}
html.dark .nx-status-badge--in_review {
  background: rgba(120, 53, 15, 0.4);
  color: var(--color-warning-300);
}
html.dark .nx-status-badge--approved {
  background: rgba(6, 78, 59, 0.5);
  color: var(--color-success-300);
}
html.dark .nx-status-badge--rejected,
html.dark .nx-status-badge--blocked {
  background: rgba(127, 29, 29, 0.4);
  color: var(--color-error-300);
}
html.dark .nx-status-badge--corrected {
  background: rgba(30, 58, 138, 0.4);
  color: var(--color-info-300);
}
html.dark .nx-status-badge--superseded {
  background: rgba(55, 65, 81, 0.7);
  color: var(--color-gray-400);
}

@media print {
  .nx-status-badge { background: none; border: 1px solid currentColor; }
}

/* -- 5. Confidence / uncertainty disclosure -------------------- */

.nx-confidence {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.nx-confidence--high {
  background: var(--color-success-100);
  color: var(--color-success-700);
}
.nx-confidence--medium {
  background: var(--color-info-100);
  color: var(--color-info-700);
}
.nx-confidence--low,
.nx-confidence--none {
  background: var(--color-warning-100);
  color: var(--color-warning-700);
}

html.dark .nx-confidence--high {
  background: rgba(6, 78, 59, 0.5);
  color: var(--color-success-300);
}
html.dark .nx-confidence--medium {
  background: rgba(30, 58, 138, 0.4);
  color: var(--color-info-300);
}
html.dark .nx-confidence--low,
html.dark .nx-confidence--none {
  background: rgba(120, 53, 15, 0.4);
  color: var(--color-warning-300);
}

@media print {
  .nx-confidence { background: none; border: 1px solid currentColor; }
}

/* Limitation label: a surface must not imply more certainty than
   the analysis provides. Icon + "Limitation:" text, never color. */
.nx-limitation {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  margin: 0;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-warning-200);
  border-left: 3px solid var(--color-warning-500);
  border-radius: var(--radius-lg);
  background: var(--color-warning-50);
  color: var(--color-warning-800);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.nx-limitation__icon { flex-shrink: 0; margin-top: 0.125rem; }

html.dark .nx-limitation {
  background: rgba(120, 53, 15, 0.2);
  border-color: var(--color-warning-700);
  border-left-color: var(--color-warning-400);
  color: var(--color-warning-300);
}

@media print {
  .nx-limitation { background: none; border-color: #999; border-left-color: #000; color: #000; }
}

/* -- 6. State boxes: loading / empty / error / retry / offline -- */

.nx-state-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-8) var(--spacing-4);
  text-align: center;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-background-secondary);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.nx-state-box--compact {
  padding: var(--spacing-3) var(--spacing-4);
  font-size: 0.8125rem;
}

.nx-state-box__icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

.nx-state-box--error .nx-state-box__icon,
.nx-state-box--offline .nx-state-box__icon { color: var(--color-error-500); }

.nx-state-box__title {
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.nx-state-box__detail {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 36rem;
}

.nx-state-box__retry {
  margin-top: var(--spacing-1);
  min-height: 2.25rem;
  padding: 0.375rem 1rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.nx-state-box__retry:hover { background: var(--color-background-tertiary); }

.nx-state-box__retry:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.nx-state-box__spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: nx-spin 0.8s linear infinite;
}

@keyframes nx-spin {
  to { transform: rotate(360deg); }
}

/* Loading must announce itself to assistive tech (role="status"
   is set by the JS helper). */
.nx-state-box--loading { min-height: 4rem; }

html.dark .nx-state-box {
  background: rgba(30, 41, 59, 0.4);
  border-color: var(--color-gray-700);
}
html.dark .nx-state-box__title { color: var(--color-gray-100); }
html.dark .nx-state-box__detail { color: var(--color-gray-400); }
html.dark .nx-state-box__retry {
  background: var(--color-gray-800);
  border-color: var(--color-gray-600);
  color: var(--color-gray-100);
}
html.dark .nx-state-box__retry:hover { background: var(--color-gray-700); }

@media (prefers-reduced-motion: reduce) {
  .nx-state-box__spinner {
    animation: none;
    border-top-color: currentColor;
    opacity: 0.6; /* static ring still reads as "working" with the label */
  }
}

@media print {
  .nx-state-box--loading { display: none; } /* never print a spinner */
  .nx-state-box { background: none; border-color: #999; }
}

@media (max-width: 480px) {
  .nx-state-box { padding: var(--spacing-4) var(--spacing-3); }
  .nx-state-box__retry { width: 100%; }
}

/* -- 7. Filter bar --------------------------------------------- */

.nx-filter-bar {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--spacing-3) var(--spacing-4);
}

.nx-filter-bar__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-3);
}

.nx-filter-bar__field {
  display: block;
  font-size: 0.75rem;
}

.nx-filter-bar__field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 0.25rem;
}

.nx-filter-bar__field-input {
  display: block;
  font-size: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.375rem 0.5rem;
  background: transparent;
  color: var(--color-text-primary);
}

.nx-filter-bar__field-input:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 1px;
}

.nx-filter-bar__clear {
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.nx-filter-bar__clear:hover { background: var(--color-background-tertiary); }

.nx-filter-bar__clear:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Active-filter summary line (role="status" set by the JS helper). */
.nx-filter-bar__status {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  margin: 0.5rem 0 0 0;
  min-height: 1rem; /* reserve the line so layout does not jump */
}

html.dark .nx-filter-bar {
  background: var(--color-gray-800);
  border-color: var(--color-gray-700);
}
html.dark .nx-filter-bar__field-input { color: var(--color-gray-100); }
html.dark .nx-filter-bar__clear:hover { background: var(--color-gray-700); }

@media print {
  .nx-filter-bar { display: none; } /* filters are interactive, not printable */
}

@media (max-width: 480px) {
  .nx-filter-bar__fields { flex-direction: column; align-items: stretch; }
  .nx-filter-bar__clear { width: 100%; }
}

/* -- 8. Split-pane review layout -------------------------------
   Two panes: a list/queue pane and a detail pane. Stacks below
   1024px (and at high zoom) so no pane is ever clipped.
   NEXUS-DESIGN-JOBS-T3 (§2c): the queue is the workbench's primary
   surface — it used to get 5fr and crush rows into word-by-word wraps
   (~396px). The split now favors the list: 7fr queue, 5fr detail.
   NEXUS-DESIGN-JOBS-038: the list track's floor was 0, so at standard
   viewports it could flex-shrink to ~40px and wrap case-list text to
   1-2 chars/line. The list column now holds a readable 260px minimum
   (the two-column split only applies above 1024px, where 260px + detail
   always fits). */

.nx-split-pane {
  display: grid;
  grid-template-columns: minmax(260px, 7fr) minmax(0, 5fr);
  gap: var(--spacing-4);
  align-items: start;
}

.nx-split-pane__pane {
  min-width: 0; /* let long ids wrap instead of overflowing */
  overflow-wrap: anywhere;
}

.nx-split-pane__pane--list {
  position: sticky;
  top: var(--spacing-4);
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
}

.nx-split-pane__divider {
  /* Visual divider for the detail pane; the grid gap does the work. */
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-2);
  margin-bottom: var(--spacing-3);
}

.nx-split-pane__pane-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.nx-split-pane__pane-hint {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  margin: 0.25rem 0 0 0;
}

html.dark .nx-split-pane__divider { border-top-color: var(--color-gray-700); }
html.dark .nx-split-pane__pane-title { color: var(--color-gray-100); }

@media (max-width: 1024px) {
  .nx-split-pane { grid-template-columns: minmax(0, 1fr); }
  .nx-split-pane__pane--list {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

@media print {
  .nx-split-pane { grid-template-columns: minmax(0, 1fr); }
  .nx-split-pane__pane--list { position: static; max-height: none; }
}

/* -- 9. Dialogs: confirm / destructive / decision-note --------- */

.nx-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4);
  background: rgba(15, 23, 42, 0.55);
}

.nx-dialog {
  width: 100%;
  max-width: 28rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25);
  padding: var(--spacing-5);
  overflow-wrap: anywhere;
}

/* Destructive dialogs carry a red top rule + icon; the text still
   says what will happen - color is never the only signal. */
.nx-dialog--destructive { border-top: 4px solid var(--color-error-500); }
.nx-dialog--confirm { border-top: 4px solid var(--color-info-500); }
.nx-dialog--decision-note { border-top: 4px solid var(--color-primary-500); }

.nx-dialog__title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 var(--spacing-2) 0;
}

.nx-dialog__body {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-4) 0;
}

.nx-dialog__field { margin-bottom: var(--spacing-3); }

.nx-dialog__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.nx-dialog__input,
.nx-dialog__textarea {
  width: 100%;
  font-size: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  background: transparent;
  color: var(--color-text-primary);
  font-family: inherit;
}

.nx-dialog__input:focus-visible,
.nx-dialog__textarea:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 1px;
}

.nx-dialog__error {
  font-size: 0.75rem;
  color: var(--color-error-600);
  margin: 0.25rem 0 0 0;
}

.nx-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--spacing-2);
  margin-top: var(--spacing-4);
}

.nx-dialog__button {
  min-height: 2.25rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-primary);
  cursor: pointer;
}

.nx-dialog__button:hover { background: var(--color-background-tertiary); }

.nx-dialog__button:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.nx-dialog__button--primary {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: var(--color-text-inverse);
}
.nx-dialog__button--primary:hover { background: var(--color-primary-700); }

.nx-dialog__button--destructive {
  background: var(--color-error-600);
  border-color: var(--color-error-600);
  color: var(--color-text-inverse);
}
.nx-dialog__button--destructive:hover { background: var(--color-error-700); }

html.dark .nx-dialog {
  background: var(--color-gray-800);
  color: var(--color-gray-100);
  border: 1px solid var(--color-gray-700);
}
html.dark .nx-dialog__body { color: var(--color-gray-400); }
html.dark .nx-dialog__input,
html.dark .nx-dialog__textarea { color: var(--color-gray-100); }
html.dark .nx-dialog__button {
  background: var(--color-gray-700);
  border-color: var(--color-gray-600);
  color: var(--color-gray-100);
}
html.dark .nx-dialog__button:hover { background: var(--color-gray-600); }
html.dark .nx-dialog__button--primary {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
}
html.dark .nx-dialog__button--destructive {
  background: var(--color-error-600);
  border-color: var(--color-error-600);
}

@media (prefers-reduced-motion: reduce) {
  .nx-dialog-overlay { animation: none; }
}

@media print {
  .nx-dialog-overlay { display: none; } /* dialogs are transient */
}

@media (max-width: 480px) {
  .nx-dialog-overlay { padding: var(--spacing-2); align-items: flex-end; }
  .nx-dialog { max-width: none; }
  .nx-dialog__actions { flex-direction: column-reverse; }
  .nx-dialog__actions > * { width: 100%; }
}

/* -- 10. Version / revision indicator -------------------------- */

.nx-version-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: 0.0625rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-background-secondary);
  color: var(--color-text-secondary);
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow-wrap: anywhere;
}

/* current/original markers are text, not color. */
.nx-version-indicator__marker {
  font-family: var(--font-family-sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.nx-version-indicator--current {
  border-color: var(--color-success-500);
  color: var(--color-success-700);
}

html.dark .nx-version-indicator {
  background: rgba(30, 41, 59, 0.6);
  border-color: var(--color-gray-700);
  color: var(--color-gray-300);
}
html.dark .nx-version-indicator--current {
  border-color: var(--color-success-500);
  color: var(--color-success-300);
}

@media print {
  .nx-version-indicator { background: none; color: #000; }
  .nx-version-indicator__marker { color: #333; }
}

/* -- 11. Toast + persistent inline result ---------------------- */

.nx-toast {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 60;
  max-width: 24rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  background: var(--color-gray-900);
  color: var(--color-text-inverse);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.3);
  overflow-wrap: anywhere;
}

.nx-toast--error {
  background: var(--color-error-600);
  /* Icon + text in the toast body mark the error; red is not enough. */
  border-left: 4px solid var(--color-error-900);
}

.nx-toast__content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nx-toast__retry {
  flex-shrink: 0;
  min-height: 1.75rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-inverse);
  cursor: pointer;
}

.nx-toast__retry:hover { background: rgba(255, 255, 255, 0.1); }

.nx-toast__retry:focus-visible {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: 2px;
}

/* Persistent inline result: stays in the page until the next action
   replaces it. role="status" (success/info) or role="alert" (error)
   is set by the JS helper. */
.nx-inline-result {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.nx-inline-result__icon { flex-shrink: 0; margin-top: 0.125rem; }

.nx-inline-result__retry {
  margin-left: var(--spacing-2);
  align-self: center;
}

.nx-inline-result--success {
  background: var(--color-success-50);
  border-color: var(--color-success-200);
  color: var(--color-success-800);
}
.nx-inline-result--error {
  background: var(--color-error-50);
  border-color: var(--color-error-200);
  color: var(--color-error-800);
}
.nx-inline-result--info {
  background: var(--color-info-50);
  border-color: var(--color-info-200);
  color: var(--color-info-800);
}

html.dark .nx-inline-result--success {
  background: rgba(6, 78, 59, 0.3);
  border-color: var(--color-success-700);
  color: var(--color-success-300);
}
html.dark .nx-inline-result--error {
  background: rgba(127, 29, 29, 0.3);
  border-color: var(--color-error-700);
  color: var(--color-error-300);
}
html.dark .nx-inline-result--info {
  background: rgba(30, 58, 138, 0.3);
  border-color: var(--color-info-700);
  color: var(--color-info-300);
}

@media print {
  .nx-toast { display: none; } /* toasts are transient */
  .nx-inline-result { background: none; border-color: #999; color: #000; }
}

@media (max-width: 480px) {
  .nx-toast { left: 1.25rem; right: 1.25rem; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   SHARED PRIMITIVES (NEXUS-UXG-009) — async interaction contract
   ═══════════════════════════════════════════════════════════════════
   .nx-async-status — canonical status for every long-running action
   (upload, pipeline, AI analysis, export, report generation, review
   decisions, retries). One component, 11 states, 4 tones. The badge
   text is the state signal (color is never the only signal); the detail
   line says what the user can do next. Guide:
   docs/development/UX-PRIMITIVES.md §7. */
.nx-async-status {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-3);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-lg);
  background: var(--color-background-secondary);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.nx-async-status__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.nx-async-status__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25rem;
  white-space: nowrap;
}

/* Shape marker — the dot keeps states legible in grayscale print. */
.nx-async-status__badge::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: currentColor;
  flex-shrink: 0;
}

.nx-async-status__title {
  font-weight: 600;
  min-width: 0;
}

.nx-async-status__detail {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
}

.nx-async-status__retry {
  align-self: flex-start;
}

/* Tones — in-flight (blue), success (green), attention (amber),
   failure (red), neutral (gray). Left rule + badge share the tone. */
.nx-async-status--submitting, .nx-async-status--queued, .nx-async-status--running, .nx-async-status--retrying {
  border-left-color: var(--color-info-500);
}
.nx-async-status--submitting .nx-async-status__badge,
.nx-async-status--queued .nx-async-status__badge,
.nx-async-status--running .nx-async-status__badge,
.nx-async-status--retrying .nx-async-status__badge {
  background: var(--color-info-100);
  color: var(--color-info-800);
}

.nx-async-status--succeeded {
  border-left-color: var(--color-success-500);
}
.nx-async-status--succeeded .nx-async-status__badge {
  background: var(--color-success-100);
  color: var(--color-success-800);
}

.nx-async-status--partial, .nx-async-status--needs-review {
  border-left-color: var(--color-warning-500);
}
.nx-async-status--partial .nx-async-status__badge,
.nx-async-status--needs-review .nx-async-status__badge {
  background: var(--color-warning-100);
  color: var(--color-warning-800);
}

.nx-async-status--failed, .nx-async-status--blocked {
  border-left-color: var(--color-error-500);
}
.nx-async-status--failed .nx-async-status__badge,
.nx-async-status--blocked .nx-async-status__badge {
  background: var(--color-error-100);
  color: var(--color-error-800);
}

.nx-async-status--idle, .nx-async-status--cancelled {
  border-left-color: var(--color-gray-400);
}
.nx-async-status--idle .nx-async-status__badge,
.nx-async-status--cancelled .nx-async-status__badge {
  background: var(--color-gray-200);
  color: var(--color-gray-700);
}

/* Dark mode */
html.dark .nx-async-status {
  background: var(--color-gray-800);
  border-color: var(--color-gray-700);
}
html.dark .nx-async-status__detail { color: var(--color-gray-400); }
html.dark .nx-async-status--submitting .nx-async-status__badge,
html.dark .nx-async-status--queued .nx-async-status__badge,
html.dark .nx-async-status--running .nx-async-status__badge,
html.dark .nx-async-status--retrying .nx-async-status__badge {
  background: rgba(30, 58, 138, 0.4);
  color: var(--color-info-300);
}
html.dark .nx-async-status--succeeded .nx-async-status__badge {
  background: rgba(6, 78, 59, 0.4);
  color: var(--color-success-300);
}
html.dark .nx-async-status--partial .nx-async-status__badge,
html.dark .nx-async-status--needs-review .nx-async-status__badge {
  background: rgba(120, 53, 15, 0.4);
  color: var(--color-warning-300);
}
html.dark .nx-async-status--failed .nx-async-status__badge,
html.dark .nx-async-status--blocked .nx-async-status__badge {
  background: rgba(127, 29, 29, 0.4);
  color: var(--color-error-300);
}
html.dark .nx-async-status--idle .nx-async-status__badge,
html.dark .nx-async-status--cancelled .nx-async-status__badge {
  background: var(--color-gray-700);
  color: var(--color-gray-300);
}

/* Print: tone becomes the left border, badge becomes plain text. */
@media print {
  .nx-async-status { background: none; border-color: #999; }
  .nx-async-status__badge { background: none; border: 1px solid #999; color: #000; }
  .nx-async-status__retry { display: none; }
}

/* High zoom / narrow: retry button goes full-width. */
@media (max-width: 480px) {
  .nx-async-status__retry { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────
   REPORT REVIEW (NEXUS-UXG-007) — work-product review view

   Styles the COMP-005 artifact content embedded in the SPA review view.
   The artifact's own classes (.section / .claim / .meta / tables) are
   scoped under #report-review-body so they cannot leak into the
   dashboard. Chips reuse the .nx-source-chip primitive above.
   ───────────────────────────────────────────────────────────────────────── */

#report-review-body { font-size: 0.875rem; line-height: 1.6; color: var(--color-gray-700); overflow-wrap: anywhere; }
html.dark #report-review-body { color: var(--color-gray-200); }

/* Provenance header table: long fingerprints/paths wrap, never overflow. */
#report-review th,
#report-review td { overflow-wrap: anywhere; }

#report-review-body .section { margin: 1.25rem 0; scroll-margin-top: 1rem; }
#report-review-body .section:first-child { margin-top: 0; }
#report-review-body .section > h2 {
  font-family: var(--font-family-sans);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--color-primary-700);
}
html.dark #report-review-body .section > h2 { color: var(--color-primary-300); }

#report-review-body .claim {
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--color-gray-200);
  background: var(--color-gray-50);
  border-radius: 0 0.5rem 0.5rem 0;
}
html.dark #report-review-body .claim {
  border-left-color: var(--color-gray-600);
  background: rgba(30, 41, 59, 0.5);
}

#report-review-body .claim-citations { margin-top: 0.375rem; }

#report-review-body .meta { color: var(--color-gray-500); font-size: 0.8125rem; }
html.dark #report-review-body .meta { color: var(--color-gray-400); }

#report-review-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: 0.8125rem;
}
#report-review-body th,
#report-review-body td {
  border: 1px solid var(--color-gray-200);
  padding: 0.375rem 0.5rem;
  text-align: left;
  vertical-align: top;
}
html.dark #report-review-body th,
html.dark #report-review-body td { border-color: var(--color-gray-600); }
#report-review-body th { background: var(--color-gray-50); font-weight: 600; }
html.dark #report-review-body th { background: rgba(30, 41, 59, 0.6); }

#report-review-body .correction-entry,
#report-review-body .correction-detail { font-size: 0.8125rem; }
#report-review-body .correction-entry {
  margin: 0.375rem 0;
  padding: 0.375rem 0.5rem;
  background: var(--color-warning-50);
  border-left: 3px solid var(--color-warning-400);
  border-radius: 0 0.375rem 0.375rem 0;
}
html.dark #report-review-body .correction-entry { background: rgba(120, 53, 15, 0.3); }
#report-review-body s { color: var(--color-gray-400); }

#report-review-body .correction-history h4,
#report-review-body .correction-block h4 {
  font-size: 0.8125rem;
  margin: 0.5rem 0 0.25rem;
}

/* Clean service copy: citation chips suppressed; the Source Map section
   remains the retained citation trail (COMP-005 render modes). */
#report-review-body.report-review--clean .claim-citations { display: none; }

@media print {
  #report-review-body .claim { border-left-color: #999; background: none; }
}

/* ============================================================
   NEXUS-UI-FCT-001 — ForenCoT atlas card grammar (.nx-atlas-*)
   ------------------------------------------------------------
   In-app expression of the ForenCoT atlas display direction
   (docs/designs/FORENCOT-ATLAS-STYLE-BRIEF.md): numbered group
   bands → pattern cards with a chevron domain-tag row and the
   SIGNAL / EVIDENCE TO CHECK / TEST ALTERNATIVES / PROTECTIVE
   PATTERN row anatomy, plus the method pipeline footer strip.

   Colors are token-derived only (color-mix over the existing
   palette); per-group pastel banding comes from --nx-atlas-tint
   set per band. Every rule has an html.dark override. Color is
   never the only signal: rows carry labels and icons.
   ============================================================ */
.nx-atlas-band {
  --nx-atlas-tint: var(--color-info-500);
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--nx-atlas-tint) 30%, transparent);
  background: color-mix(in srgb, var(--nx-atlas-tint) 7%, var(--color-background));
  padding: 1rem 1.125rem 1.125rem;
}
/* CSP-safe tint variants (no inline style attributes on the dashboard). */
.nx-atlas-band--info { --nx-atlas-tint: var(--color-info-500); }
.nx-atlas-band--success { --nx-atlas-tint: var(--color-success-500); }
.nx-atlas-band--viz-purple { --nx-atlas-tint: var(--color-viz-purple-500); }
.nx-atlas-band--warning { --nx-atlas-tint: var(--color-warning-500); }
.nx-atlas-band__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.875rem;
  margin-bottom: 0.875rem;
}
.nx-atlas-band__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: var(--nx-atlas-tint);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.nx-atlas-band__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-primary-900);
}
.nx-atlas-band__blurb {
  font-size: 0.8125rem;
  color: var(--color-gray-600);
  flex: 1 1 16rem;
}
.nx-atlas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0.875rem;
}
.nx-atlas-card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  background: var(--color-background);
  border: 1px solid var(--color-gray-200);
  border-radius: 0.875rem;
  padding: 0.875rem 1rem 1rem;
  box-shadow: 0 1px 2px rgba(16, 42, 67, 0.05), 0 8px 20px -14px rgba(16, 42, 67, 0.18);
}
button.nx-atlas-card {
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
button.nx-atlas-card:hover {
  border-color: color-mix(in srgb, var(--nx-atlas-tint) 55%, var(--color-gray-200));
  box-shadow: 0 2px 4px rgba(16, 42, 67, 0.07), 0 14px 28px -16px rgba(16, 42, 67, 0.28);
  transform: translateY(-1px);
}
button.nx-atlas-card:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}
.nx-atlas-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nx-atlas-pattern-index-card .nx-atlas-card__head {
  flex-wrap: wrap;
}
.nx-atlas-pattern-index-card .nx-atlas-card__name {
  min-width: 0;
}
.nx-atlas-pattern-index-card__mark {
  flex-shrink: 0;
  color: var(--color-primary-600);
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}
.nx-atlas-pattern-index-card__hint {
  margin: 0;
  color: var(--color-gray-600);
  font-size: 0.6875rem;
  line-height: 1.4;
}
.nx-atlas-pattern-detail__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.nx-atlas-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  padding: 0.0625rem 0.4375rem;
  border-radius: 9999px;
  background: var(--nx-atlas-tint);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}
.nx-atlas-card__name {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-primary-900);
}
.nx-atlas-card__glyph {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  color: var(--nx-atlas-tint);
}
.nx-atlas-card__chevrons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.nx-atlas-chevron {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem 0.125rem 0.5rem;
  clip-path: polygon(0 0, calc(100% - 0.375rem) 0, 100% 50%, calc(100% - 0.375rem) 100%, 0 100%, 0.375rem 50%);
  background: color-mix(in srgb, var(--nx-atlas-tint) 16%, var(--color-background));
  color: color-mix(in srgb, var(--nx-atlas-tint) 72%, var(--color-gray-900));
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.nx-atlas-chevron:first-child {
  clip-path: polygon(0 0, calc(100% - 0.375rem) 0, 100% 50%, calc(100% - 0.375rem) 100%, 0 100%);
  border-radius: 0.25rem 0 0 0.25rem;
}
.nx-atlas-rows {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.nx-atlas-row {
  display: grid;
  /* UI-CHROME-004: the 5.25rem (84px) label track could not fit the longest
     atlas label ("Protective pattern" measures ~138px at 10px/800/0.04em
     uppercase with its icon), so labels wrapped to two lines and landed
     8px from the body text — a collision read at the owner's zoom. 9rem
     (144px) clears the longest label in the set (Signal / Evidence to
     check / Test alternatives / Protective pattern) on one line with a
     12px gutter; every row shares the fixed track so labels stay aligned
     down the card (per-row max-content would raggedize the body column). */
  grid-template-columns: 9rem minmax(0, 1fr);
  align-items: start;
  gap: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  padding: 0.375rem 0.5rem;
  background: color-mix(in srgb, var(--nx-atlas-tint) 6%, var(--color-background));
}
.nx-atlas-row__label {
  display: flex;
  align-items: flex-start;
  gap: 0.3125rem;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
}
.nx-atlas-row__icon {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.0625rem;
}
.nx-atlas-row__text {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--color-gray-700);
  overflow-wrap: anywhere;
}
.nx-atlas-row--signal { background: color-mix(in srgb, var(--color-error-500) 8%, var(--color-background)); }
/* UI-BETA-GATE D-042: the heatmap community cards report their hit count as
   the SIGNAL row. The row TEXT already cleared AA in both themes once the
   measurement accounted for the row's own color-mix() background (9.34:1
   light on mix(error-500 8%, white), 8.70:1 dark on mix(error-500 14%,
   gray-800)) — what failed in that row was its label: error-600 (#dc2626) on
   the 8% red tint measured 4.35:1 at 10px. One step darker on the same scale
   (--color-error-700) is 5.83:1; the dark variant already passes at 6.80:1
   and is left alone. */
.nx-atlas-row--signal .nx-atlas-row__label { color: var(--color-error-700); }
.nx-atlas-row--signal .nx-atlas-row__icon { color: var(--color-error-500); }
.nx-atlas-row--evidence { background: color-mix(in srgb, var(--color-info-500) 8%, var(--color-background)); }
.nx-atlas-row--evidence .nx-atlas-row__label { color: var(--color-info-600); }
.nx-atlas-row--evidence .nx-atlas-row__icon { color: var(--color-info-500); }
.nx-atlas-row--test { background: color-mix(in srgb, var(--color-viz-purple) 8%, var(--color-background)); }
.nx-atlas-row--test .nx-atlas-row__label { color: color-mix(in srgb, var(--color-viz-purple) 80%, var(--color-gray-900)); }
.nx-atlas-row--test .nx-atlas-row__icon { color: var(--color-viz-purple); }
.nx-atlas-row--protective {
  background: color-mix(in srgb, var(--color-success-500) 10%, var(--color-background));
  border: 1px solid color-mix(in srgb, var(--color-success-500) 25%, transparent);
}
.nx-atlas-row--protective .nx-atlas-row__label { color: var(--color-success-600); }
.nx-atlas-row--protective .nx-atlas-row__icon { color: var(--color-success-600); }
.nx-atlas-row--protective .nx-atlas-row__text {
  font-weight: 700;
  color: var(--color-primary-900);
}
.nx-atlas-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.0625rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}
.nx-atlas-chip--high { background: color-mix(in srgb, var(--color-success-500) 15%, var(--color-background)); color: var(--color-success-700); }
.nx-atlas-chip--medium { background: color-mix(in srgb, var(--color-warning-500) 16%, var(--color-background)); color: var(--color-warning-700); }
.nx-atlas-chip--low { background: color-mix(in srgb, var(--color-error-500) 12%, var(--color-background)); color: var(--color-error-600); }
.nx-atlas-chip--neutral { background: var(--color-gray-100); color: var(--color-gray-600); }
.nx-atlas-pipeline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem 0.25rem;
}
.nx-atlas-pipeline__label {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--color-primary-800);
  margin-right: 0.375rem;
}
.nx-atlas-pipeline__step {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--color-info-500) 30%, transparent);
  background: color-mix(in srgb, var(--color-info-500) 8%, var(--color-background));
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary-800);
}
.nx-atlas-pipeline__step svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--color-info-600);
  flex-shrink: 0;
}
.nx-atlas-pipeline__arrow {
  color: var(--color-gray-400);
  font-size: 0.75rem;
}
.nx-atlas-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-gray-600);
}
.nx-atlas-disclaimer svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.0625rem;
  color: var(--color-info-600);
}

/* NEXUS-UI-FCT-004: slot holding a server-rendered d2 SVG inside an atlas
   panel. Sizing only — the diagram itself carries the nexus d2 theme, so
   no colors are invented here. */
.nx-atlas-diagram svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Dark mode */
html.dark .nx-atlas-band {
  background: color-mix(in srgb, var(--nx-atlas-tint) 14%, var(--color-gray-900));
  border-color: color-mix(in srgb, var(--nx-atlas-tint) 40%, transparent);
}
html.dark .nx-atlas-band__title { color: var(--color-gray-50); }
html.dark .nx-atlas-band__blurb { color: var(--color-gray-400); }
html.dark .nx-atlas-card {
  background: var(--color-gray-800);
  border-color: var(--color-gray-700);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 22px -16px rgba(0, 0, 0, 0.6);
}
html.dark .nx-atlas-card__name { color: var(--color-gray-50); }
html.dark .nx-atlas-pattern-index-card__mark { color: var(--color-primary-300); }
html.dark .nx-atlas-pattern-index-card__hint { color: var(--color-gray-400); }
html.dark .nx-atlas-chevron {
  background: color-mix(in srgb, var(--nx-atlas-tint) 26%, var(--color-gray-800));
  color: color-mix(in srgb, var(--nx-atlas-tint) 55%, var(--color-gray-100));
}
html.dark .nx-atlas-row { background: color-mix(in srgb, var(--nx-atlas-tint) 12%, var(--color-gray-800)); }
html.dark .nx-atlas-row__text { color: var(--color-gray-300); }
html.dark .nx-atlas-row--signal { background: color-mix(in srgb, var(--color-error-500) 14%, var(--color-gray-800)); }
html.dark .nx-atlas-row--signal .nx-atlas-row__label { color: var(--color-error-300); }
html.dark .nx-atlas-row--evidence { background: color-mix(in srgb, var(--color-info-500) 14%, var(--color-gray-800)); }
html.dark .nx-atlas-row--evidence .nx-atlas-row__label { color: var(--color-info-300); }
html.dark .nx-atlas-row--test { background: color-mix(in srgb, var(--color-viz-purple) 16%, var(--color-gray-800)); }
html.dark .nx-atlas-row--test .nx-atlas-row__label { color: var(--color-viz-purple-light); }
html.dark .nx-atlas-row--test .nx-atlas-row__icon { color: var(--color-viz-purple-light); }
html.dark .nx-atlas-row--protective {
  background: color-mix(in srgb, var(--color-success-500) 14%, var(--color-gray-800));
  border-color: color-mix(in srgb, var(--color-success-500) 35%, transparent);
}
html.dark .nx-atlas-row--protective .nx-atlas-row__label { color: var(--color-success-300); }
html.dark .nx-atlas-row--protective .nx-atlas-row__icon { color: var(--color-success-300); }
html.dark .nx-atlas-row--protective .nx-atlas-row__text { color: var(--color-gray-50); }
html.dark .nx-atlas-chip--high { background: color-mix(in srgb, var(--color-success-500) 22%, var(--color-gray-800)); color: var(--color-success-300); }
html.dark .nx-atlas-chip--medium { background: color-mix(in srgb, var(--color-warning-500) 22%, var(--color-gray-800)); color: var(--color-warning-300); }
html.dark .nx-atlas-chip--low { background: color-mix(in srgb, var(--color-error-500) 20%, var(--color-gray-800)); color: var(--color-error-300); }
html.dark .nx-atlas-chip--neutral { background: var(--color-gray-700); color: var(--color-gray-300); }
html.dark .nx-atlas-pipeline__label { color: var(--color-gray-100); }
html.dark .nx-atlas-pipeline__step {
  background: color-mix(in srgb, var(--color-info-500) 16%, var(--color-gray-800));
  border-color: color-mix(in srgb, var(--color-info-500) 40%, transparent);
  color: var(--color-gray-100);
}
html.dark .nx-atlas-pipeline__step svg { color: var(--color-info-300); }
html.dark .nx-atlas-disclaimer { color: var(--color-gray-400); }
html.dark .nx-atlas-disclaimer svg { color: var(--color-info-300); }

@media (prefers-reduced-motion: reduce) {
  button.nx-atlas-card { transition: none; }
  button.nx-atlas-card:hover { transform: none; }
}

@media print {
  .nx-atlas-band { background: none; border-color: var(--color-gray-300); }
  .nx-atlas-card { box-shadow: none; }
}

/* NEXUS-UI-FCT-003B: d2 diagram zone on the live ForenCoT page — same
   panel grammar as the standalone forencot view's inline styles
   (_forencot_view_fragments.py), ported here because the dashboard loads
   this stylesheet instead of the fragment's inline block. */
.nx-diagram-zone {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.nx-diagram-panel {
  background: #ffffff;
  border: 1px solid #e8e6e1;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  margin: 0;
  min-width: 0;
}
.nx-diagram-panel figcaption {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #193962;
  margin-bottom: 10px;
}
.nx-diagram-svg {
  overflow-x: auto;
}
.nx-diagram-svg svg {
  max-width: 100%;
  height: auto;
}

/* ── NEXUS-UIX-I: sticky in-page section anchor rail ──
 * Long Operate views (Case Workspace ~3.6k px, ForenCoT ~7k px) bury the case
 * work product under forms/atlas sections (UIX-E2E findings-owner-admin §3/§7,
 * TOP-10 #6). The rail is a compact sticky chip row of jump targets built from
 * the sections that actually rendered. Jumps are buttons, not href="#id"
 * anchors, because the hash is the SPA router. Sticky offset clears the
 * h-14/sm:h-16 sticky header; section targets carry scroll-mt so they clear
 * header + rail together.
 *
 * UIX-K: below sm the header actually wraps to two rows (dashboard-styles.css
 * D-028 sets flex-wrap/height:auto), so its real height (~90-100px at 390px)
 * exceeds h-14 and a fixed top:3.5rem slid the rail under the header. The
 * dashboard publishes the measured header height as --nx-sticky-header-h
 * (ResizeObserver in dashboard.html); the rail clears it with a small gap.
 * The h-14/sm:h-16 values remain the no-JS fallback. */
.nx-section-rail {
  position: sticky;
  top: calc(var(--nx-sticky-header-h, 3.5rem) + 0.5rem); /* fallback: header h-14 */
  z-index: 20; /* under the header (z-30), above page content */
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: thin;
  background: color-mix(in srgb, var(--color-background) 92%, transparent);
  backdrop-filter: blur(4px);
  border: 1px solid var(--color-gray-200);
  border-radius: 0.75rem;
  padding: 0.3125rem 0.5rem;
}
@media (min-width: 640px) {
  .nx-section-rail { top: calc(var(--nx-sticky-header-h, 4rem) + 0.5rem); } /* fallback: header sm:h-16 */
}
/* UIX-K: rail jump targets must clear header + rail after a jump; the
   scroll-mt-28 utility is the no-JS fallback, the measured header wins. */
[id].scroll-mt-28 {
  scroll-margin-top: calc(var(--nx-sticky-header-h, 3.5rem) + 3.5rem);
}
.nx-section-rail__link {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--color-gray-600);
  padding: 0.3125rem 0.75rem;
  border-radius: 0.5rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.nx-section-rail__link:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}
.nx-section-rail__link:focus-visible {
  outline: 2px solid var(--color-secondary-600);
  outline-offset: 2px;
}
/* Active section: clinical teal (secondary scale), text-paired — never color-only.
   FIX-CONTRAST: secondary-700 (#218f84) measured 3.50:1 on the secondary-100
   pill; moved to secondary-800 (#17665f, 6.01:1), the same step the other
   FIX-CONTRAST text call sites use. */
.nx-section-rail__link[aria-current="true"] {
  background: var(--color-secondary-100);
  color: var(--color-secondary-800);
  font-weight: 600;
}
html.dark .nx-section-rail {
  background: color-mix(in srgb, var(--color-gray-900) 92%, transparent);
  border-color: var(--color-gray-700);
}
html.dark .nx-section-rail__link { color: var(--color-gray-300); }
html.dark .nx-section-rail__link:hover {
  background: var(--color-gray-700);
  color: var(--color-gray-50);
}
html.dark .nx-section-rail__link:focus-visible {
  outline-color: var(--color-secondary-400);
}
/* Dark counterpart follows the established pattern (secondary-300 step, as in
   .nexus-clinical-fact-title above): secondary-700 fails contrast on dark. */
html.dark .nx-section-rail__link[aria-current="true"] {
  background: color-mix(in srgb, var(--color-secondary-500) 22%, var(--color-gray-800));
  color: var(--color-secondary-300);
}

/* NEXUS-UI-COV-002: comment bodies preserve the author's line breaks.
   whitespace-pre-wrap is not in the compiled dashboard Tailwind bundle and
   the bundle is checked in, so the primitive layer carries the utility. */
.nx-pre-wrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Context tabs sit below global sidebar destinations in the navigation
   hierarchy. Keep them quieter than primary doors while sharing the same
   Ink Blue / Vivid Teal active language. */
.app-context-tabs { display: flex; align-items: stretch; gap: 0; min-height: 44px; overflow-x: auto; border-bottom: 1px solid #e5e7eb; padding: 0 1rem; background: rgba(255,255,255,.92); }
.app-context-tabs[hidden] { display: none; }
#analysis-tabs, #delivery-tabs, #business-tabs { display: none !important; }
.app-context-tab { flex: 0 0 auto; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #64748b; padding: .7rem .8rem .6rem; font: 600 14px/20px Arial, Helvetica, sans-serif; cursor: pointer; white-space: nowrap; }
.app-context-tab:hover { color: #193962; background: #F7F8F5; }
.app-context-tab[aria-selected="true"] { color: #193962; border-bottom-color: #4EE2D0; }
html.dark .app-context-tabs { border-color: #374151; background: rgba(31,41,55,.92); }
html.dark .app-context-tab { color: #cbd5e1; }
html.dark .app-context-tab:hover, html.dark .app-context-tab[aria-selected="true"] { color: #fff; }
@media (max-width:639px) { .app-context-tabs { padding: 0 .75rem; } }
.main-content .nx-tabs .nx-tab {
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #475569 !important;
  padding: .7rem .8rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
}
.main-content .nx-tabs .nx-tab:hover { color: #193962 !important; background: #F7F8F5 !important; }
.main-content .nx-tabs .nx-tab[aria-selected="true"] { color: #193962 !important; border-bottom-color: #4EE2D0 !important; background: transparent !important; }
html.dark .main-content .nx-tabs .nx-tab { color: #cbd5e1 !important; }
html.dark .main-content .nx-tabs .nx-tab:hover { color: #fff !important; background: #1f2937 !important; }
html.dark .main-content .nx-tabs .nx-tab[aria-selected="true"] { color: #fff !important; border-bottom-color: #4EE2D0 !important; }