/* =============================================================================
   Porto Guará — Maritime Design System (canonical visual layer)
   File: css/maritime-system.css
   Intent: one abyssal navy / harbour-teal system for the SPA shell and suite
           pages. Load AFTER brand.css (and ideally last among product CSS) so
           :root aliases re-skin every consumer of --pg-*, --brand-*, --bg-*, etc.
   Constraints: dependency-free, offline-safe (no @import / CDN fonts).
   Root font-size assumption: html { font-size: 14px } as set in styles.css:76.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. CANONICAL TOKENS (--ms-*)
   Deep-sea navy ground, three elevated tiers, single harbour-teal accent.
   Semantic vessel states are distinct from risk/alert reds.
   ----------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* —— Depth surfaces (solid — no glassmorphism) —— */
  --ms-abyss: #070B12;           /* page canvas / deepest chrome */
  --ms-deep: #0B1220;            /* sidebar, sticky chrome, secondary well */
  --ms-surface: #111A2B;         /* default panel / card */
  --ms-elevated: #162235;        /* hover, dropdowns, modals, overlays */
  --ms-input: #1A2740;           /* form fields, inset wells */
  --ms-hover: #1C2A40;           /* interactive hover wash */

  /* —— Borders (hairline chart-rule character) —— */
  --ms-border: #243049;          /* default rule */
  --ms-border-strong: #334466;   /* stronger separation / focus-adjacent */
  --ms-border-accent: rgba(45, 212, 191, 0.38);
  --ms-hairline: rgba(230, 237, 247, 0.06);

  /* —— Text —— */
  --ms-text: #E6EDF7;            /* primary body / titles */
  --ms-text-secondary: #A8B3C7;  /* supporting copy */
  --ms-text-muted: #8B97AD;      /* labels — AA on abyss/deep/surface */
  --ms-text-dim: #7E8BA3;        /* micro labels; AA on surface (5.06:1) */
  --ms-text-inverse: #070B12;    /* text on accent fills */

  /* —— Accent: harbour teal (single confident signal) —— */
  --ms-accent: #2DD4BF;
  --ms-accent-bright: #5EEAD4;
  --ms-accent-deep: #14B8A6;
  --ms-accent-dim: rgba(45, 212, 191, 0.12);
  --ms-accent-glow: rgba(45, 212, 191, 0.28);
  --ms-accent-muted: rgba(45, 212, 191, 0.08);

  /* —— Brand ramp (11-step) remapped to harbour teal —— */
  --ms-accent-50: #ECFDF9;
  --ms-accent-100: #CCFBF1;
  --ms-accent-200: #99F6E4;
  --ms-accent-300: #5EEAD4;
  --ms-accent-400: #2DD4BF;
  --ms-accent-500: #2DD4BF;
  --ms-accent-600: #14B8A6;
  --ms-accent-700: #0F766E;
  --ms-accent-800: #115E59;
  --ms-accent-900: #134E4A;
  --ms-accent-950: #042F2E;

  /* —— Data / secondary (signal cyan-blue for charts, not UI chrome) —— */
  --ms-data: #38BDF8;
  --ms-data-dim: rgba(56, 189, 248, 0.14);
  --ms-data-50: #F0F9FF;
  --ms-data-100: #E0F2FE;
  --ms-data-200: #BAE6FD;
  --ms-data-300: #7DD3FC;
  --ms-data-400: #38BDF8;
  --ms-data-500: #0EA5E9;
  --ms-data-600: #0284C7;
  --ms-data-700: #0369A1;
  --ms-data-800: #075985;
  --ms-data-900: #0C4A6E;
  --ms-data-950: #082F49;

  /* —— Attention amber (deadlines, waiting) —— */
  --ms-amber: #F59E0B;
  --ms-amber-dim: rgba(245, 158, 11, 0.14);
  --ms-amber-50: #FFFBEB;
  --ms-amber-100: #FEF3C7;
  --ms-amber-200: #FDE68A;
  --ms-amber-300: #FCD34D;
  --ms-amber-400: #FBBF24;
  --ms-amber-500: #F59E0B;
  --ms-amber-600: #D97706;
  --ms-amber-700: #B45309;
  --ms-amber-800: #92400E;
  --ms-amber-900: #78350F;
  --ms-amber-950: #451A03;

  /* —— Semantic UI —— */
  --ms-success: #34D399;
  --ms-success-dim: rgba(52, 211, 153, 0.14);
  --ms-warning: #F59E0B;
  --ms-warning-dim: rgba(245, 158, 11, 0.14);
  /* Alias for chart adapter / consumers that read --ms-warn */
  --ms-warn: var(--ms-warning);
  --ms-warn-dim: var(--ms-warning-dim);
  --ms-danger: #EF4444;
  --ms-danger-dim: rgba(239, 68, 68, 0.15);
  --ms-info: #60A5FA;
  --ms-info-dim: rgba(96, 165, 250, 0.14);

  /* —— Maritime vessel / berth states —— */
  --ms-state-berthed: #34D399;       /* alongside / completed */
  --ms-state-berthed-dim: rgba(52, 211, 153, 0.14);
  --ms-state-underway: #38BDF8;      /* steaming / en route */
  --ms-state-underway-dim: rgba(56, 189, 248, 0.14);
  --ms-state-anchored: #FBBF24;      /* at anchor / waiting berth */
  --ms-state-anchored-dim: rgba(251, 191, 36, 0.14);
  --ms-state-delayed: #FB923C;       /* schedule slip */
  --ms-state-delayed-dim: rgba(251, 146, 60, 0.14);
  --ms-state-alert: #F87171;         /* operational alert */
  --ms-state-alert-dim: rgba(248, 113, 113, 0.14);
  --ms-state-sanctioned: #EF4444;    /* screening hit / blocked */
  --ms-state-sanctioned-dim: rgba(239, 68, 68, 0.16);

  /* —— Restrained steel (replaces AI-startup purple/pink in token consumers) —— */
  --ms-steel: #6B8CAE;
  --ms-steel-dim: rgba(107, 140, 174, 0.16);
  --ms-rose: #E879A9;               /* rare chart series only */
  --ms-rose-dim: rgba(232, 121, 169, 0.14);
  --ms-gold: #D4A574;               /* executive / verdict callouts */

  /* —— Atmosphere (subtle; not decorative gradients) —— */
  --ms-ambient:
    radial-gradient(ellipse 50% 40% at 12% -10%, rgba(45, 212, 191, 0.06), transparent 55%),
    radial-gradient(ellipse 45% 35% at 100% 20%, rgba(56, 189, 248, 0.05), transparent 50%),
    linear-gradient(180deg, #070B12 0%, #0B1220 100%);
  --ms-chrome: rgba(7, 11, 18, 0.94);
  --ms-overlay: rgba(4, 8, 14, 0.78);
  --ms-focus-ring: 0 0 0 2px var(--ms-abyss), 0 0 0 4px rgba(45, 212, 191, 0.40);

  /* —— Typography stacks (local @font-face names + system; no CDN) —— */
  --ms-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --ms-font-mono: 'DM Mono', 'JetBrains Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', ui-monospace, monospace;
  --ms-font-cn: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', sans-serif;
  /* Optical-weight-matched bilingual body: Latin first, CJK fallback same weight class */
  --ms-font-body: var(--ms-font-ui), var(--ms-font-cn);
  --ms-font-heading: var(--ms-font-ui), var(--ms-font-cn);
  --ms-font-metric: var(--ms-font-mono);

  /* —— Type scale (rem; 1rem = 14px per styles.css) —— */
  --ms-text-2xs: 0.6875rem;   /* ~9.6px  — micro / ticker */
  --ms-text-xs: 0.75rem;      /* 10.5px — uppercase labels */
  --ms-text-sm: 0.8125rem;    /* 11.4px — secondary UI */
  --ms-text-md: 0.875rem;     /* 12.25px — dense table */
  --ms-text-base: 1rem;       /* 14px — body */
  --ms-text-lg: 1.125rem;     /* 15.75px — section */
  --ms-text-xl: 1.25rem;      /* 17.5px — card title */
  --ms-text-2xl: 1.5rem;      /* 21px — KPI */
  --ms-text-3xl: 1.75rem;     /* 24.5px — hero metric */
  --ms-text-4xl: 2.25rem;     /* 31.5px — display KPI */
  --ms-text-5xl: 2.75rem;     /* 38.5px — rare hero */

  --ms-leading-tight: 1.25;
  --ms-leading-snug: 1.4;
  --ms-leading-normal: 1.55;
  --ms-leading-relaxed: 1.7;
  --ms-tracking-label: 0.08em;
  --ms-tracking-tight: -0.02em;
  --ms-weight-regular: 400;
  --ms-weight-medium: 500;
  --ms-weight-semibold: 600;
  --ms-weight-bold: 700;

  /* —— Spacing (4px modular) —— */
  --ms-space-0: 0;
  --ms-space-1: 4px;
  --ms-space-2: 8px;
  --ms-space-3: 12px;
  --ms-space-4: 16px;
  --ms-space-5: 20px;
  --ms-space-6: 24px;
  --ms-space-7: 32px;
  --ms-space-8: 40px;
  --ms-space-9: 48px;
  --ms-space-10: 64px;

  --ms-density-padding-card: 16px;
  --ms-density-padding-button: 10px 16px;
  --ms-density-gap-row: 12px;
  --ms-density-gap-section: 24px;

  /* —— Radii (tighter than marketing cards; instrumentation feel) —— */
  --ms-radius-xs: 4px;
  --ms-radius-sm: 6px;
  --ms-radius-md: 8px;
  --ms-radius-lg: 10px;
  --ms-radius-xl: 14px;
  --ms-radius-pill: 999px;

  /* —— Shadows (depth via edge + soft occlusion; no neon bloom) —— */
  --ms-shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.35);
  --ms-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(230, 237, 247, 0.03);
  --ms-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --ms-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.52);
  --ms-shadow-panel: var(--ms-shadow-lg);
  --ms-shadow-control: var(--ms-shadow-md);

  /* —— Motion —— */
  --ms-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ms-ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
  --ms-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ms-duration-fast: 120ms;
  --ms-duration-base: 200ms;
  --ms-duration-slow: 320ms;
  --ms-transition: all var(--ms-duration-base) var(--ms-ease-standard);
  --ms-transition-hover: transform var(--ms-duration-base) var(--ms-ease-emphasized),
    box-shadow var(--ms-duration-base) var(--ms-ease-emphasized),
    border-color var(--ms-duration-fast) ease;
  --ms-transition-color: color var(--ms-duration-fast) ease,
    background-color var(--ms-duration-fast) ease,
    border-color var(--ms-duration-fast) ease;
  --ms-transition-layout: opacity var(--ms-duration-slow) var(--ms-ease-emphasized),
    transform var(--ms-duration-slow) var(--ms-ease-emphasized);

  /* —— Z-index (aligned with css/z-index-fixes.css hierarchy) —— */
  --ms-z-base: 0;
  --ms-z-content: 1;
  --ms-z-sticky: 100;
  --ms-z-header: 200;
  --ms-z-dropdown: 300;
  --ms-z-advisor: 500;
  --ms-z-sidebar-overlay: 999;
  --ms-z-sidebar: 1000;
  --ms-z-modal: 1200;
  --ms-z-toast: 9500;
  --ms-z-brain: 9000;
  --ms-z-login: 10000;
  --ms-z-pdf: 10001;
}

/* -----------------------------------------------------------------------------
   2. COMPATIBILITY ALIASES
   Existing token names → maritime values. Do not rename HTML/JS consumers.
   Sources audited: brand.css:9–101, styles.css:8–72, competitive-proof.css:2–18,
   visual-studio.css:2–17, plus undefined refs in styles.css:6452–6510.
   ----------------------------------------------------------------------------- */
:root {
  /* brand.css primary ramp */
  --brand-primary-50: var(--ms-accent-50);
  --brand-primary-100: var(--ms-accent-100);
  --brand-primary-200: var(--ms-accent-200);
  --brand-primary-300: var(--ms-accent-300);
  --brand-primary-400: var(--ms-accent-400);
  --brand-primary-500: var(--ms-accent-500);
  --brand-primary-600: var(--ms-accent-600);
  --brand-primary-700: var(--ms-accent-700);
  --brand-primary-800: var(--ms-accent-800);
  --brand-primary-900: var(--ms-accent-900);
  --brand-primary-950: var(--ms-accent-950);

  /* brand.css accent (data-blue) ramp */
  --brand-accent-50: var(--ms-data-50);
  --brand-accent-100: var(--ms-data-100);
  --brand-accent-200: var(--ms-data-200);
  --brand-accent-300: var(--ms-data-300);
  --brand-accent-400: var(--ms-data-400);
  --brand-accent-500: var(--ms-data-500);
  --brand-accent-600: var(--ms-data-600);
  --brand-accent-700: var(--ms-data-700);
  --brand-accent-800: var(--ms-data-800);
  --brand-accent-900: var(--ms-data-900);
  --brand-accent-950: var(--ms-data-950);

  /* brand.css secondary (amber) ramp */
  --brand-secondary-50: var(--ms-amber-50);
  --brand-secondary-100: var(--ms-amber-100);
  --brand-secondary-200: var(--ms-amber-200);
  --brand-secondary-300: var(--ms-amber-300);
  --brand-secondary-400: var(--ms-amber-400);
  --brand-secondary-500: var(--ms-amber-500);
  --brand-secondary-600: var(--ms-amber-600);
  --brand-secondary-700: var(--ms-amber-700);
  --brand-secondary-800: var(--ms-amber-800);
  --brand-secondary-900: var(--ms-amber-900);
  --brand-secondary-950: var(--ms-amber-950);

  --brand-gradient-ambient: var(--ms-ambient);
  --brand-gradient-accent-glow: radial-gradient(circle at 50% 0%, var(--ms-accent-muted) 0%, transparent 60%);

  --brand-success: var(--ms-success);
  --brand-warning: var(--ms-warning);
  --brand-danger: var(--ms-danger);
  --brand-info: var(--ms-info);

  --brand-font-display: var(--ms-font-heading);
  --brand-font-body: var(--ms-font-body);
  --brand-font-mono: var(--ms-font-mono);
  --brand-font-cn: var(--ms-font-cn);

  --brand-density-padding-card: var(--ms-density-padding-card);
  --brand-density-padding-button: var(--ms-density-padding-button);
  --brand-density-gap-row: var(--ms-density-gap-row);
  --brand-density-gap-section: var(--ms-density-gap-section);

  /* brand.css product-surface contract (pg-*) */
  --pg-canvas: var(--ms-abyss);
  --pg-surface: var(--ms-deep);
  --pg-surface-panel: var(--ms-surface);
  --pg-surface-panel-solid: var(--ms-surface);
  --pg-surface-hover: var(--ms-hover);
  --pg-surface-input: var(--ms-input);
  --pg-border: var(--ms-border);
  --pg-border-strong: var(--ms-border-strong);
  --pg-border-accent: var(--ms-border-accent);
  --pg-text: var(--ms-text);
  --pg-text-secondary: var(--ms-text-secondary);
  --pg-text-muted: var(--ms-text-muted);
  --pg-text-dim: var(--ms-text-dim);
  --pg-radius-xs: var(--ms-radius-xs);
  --pg-radius-sm: var(--ms-radius-sm);
  --pg-radius-md: var(--ms-radius-md);
  --pg-radius-lg: var(--ms-radius-lg);
  --pg-radius-xl: var(--ms-radius-xl);
  --pg-shadow-panel: var(--ms-shadow-panel);
  --pg-shadow-control: var(--ms-shadow-control);
  --pg-focus-ring: var(--ms-focus-ring);
  --pg-chrome: var(--ms-chrome);
  --pg-ambient: var(--ms-ambient);

  /* styles.css semantic aliases */
  --bg-primary: var(--ms-abyss);
  --bg-secondary: var(--ms-deep);
  --bg-card: var(--ms-surface);
  --bg-card-hover: var(--ms-hover);
  --bg-input: var(--ms-input);
  --bg-modal: var(--ms-overlay);
  --bg-elevated: var(--ms-elevated);

  --border: var(--ms-border);
  --border-light: var(--ms-border-strong);
  --border-subtle: var(--ms-hairline);

  --text-primary: var(--ms-text);
  --text-secondary: var(--ms-text-secondary);
  --text-tertiary: var(--ms-text-dim);
  --text-muted: var(--ms-text-dim);
  --text-muted-aa: var(--ms-text-muted);

  --accent: var(--ms-accent);
  --accent-dim: var(--ms-accent-dim);
  --accent-glow: var(--ms-accent-glow);

  --red: var(--ms-danger);
  --red-dim: var(--ms-danger-dim);
  --orange: var(--ms-amber);
  --orange-dim: var(--ms-amber-dim);
  --yellow: var(--ms-amber-400);
  --yellow-dim: rgba(251, 191, 36, 0.15);
  --blue: var(--ms-data);
  --blue-dim: var(--ms-data-dim);
  --purple: var(--ms-steel);          /* steel — kills violet “AI startup” read */
  --purple-dim: var(--ms-steel-dim);
  --pink: var(--ms-rose);
  --pink-dim: var(--ms-rose-dim);
  --cyan: var(--ms-data);
  --cyan-dim: var(--ms-data-dim);
  --teal: var(--ms-accent-deep);
  --teal-dim: var(--ms-accent-dim);
  --green: var(--ms-success);
  --warning: var(--ms-warning);
  --warning-dim: var(--ms-warning-dim);
  --danger: var(--ms-danger);
  --danger-dim: var(--ms-danger-dim);
  --info: var(--ms-info);
  --info-dim: var(--ms-info-dim);

  --font-heading: var(--ms-font-heading);
  --font-body: var(--ms-font-body);
  --font-mono: var(--ms-font-mono);
  --font-cn: var(--ms-font-cn);

  --radius: var(--ms-radius-md);
  --radius-sm: var(--ms-radius-sm);
  --radius-lg: var(--ms-radius-lg);

  --shadow: var(--ms-shadow-control);
  --shadow-lg: var(--ms-shadow-panel);

  /* Glass tiers → solid elevated surfaces (precision over decoration) */
  --glass: var(--ms-surface);
  --glass-border: var(--ms-hairline);
  --glass-ambient: var(--ms-chrome);
  --glass-ambient-blur: none;
  --glass-content: var(--ms-surface);
  --glass-content-blur: none;
  --glass-elevated: var(--ms-elevated);
  --glass-elevated-blur: none;

  --transition: var(--ms-transition);
  --transition-hover: var(--ms-transition-hover);
  --transition-color: var(--ms-transition-color);
  --transition-layout: var(--ms-transition-layout);
  --transition-spring: var(--ms-ease-emphasized);

  /* Marine / pilot local tokens already in styles.css scopes */
  --marine-fav: var(--ms-state-berthed);
  --marine-mar: var(--ms-state-anchored);
  --marine-res: var(--ms-state-alert);
  --marine-unk: var(--ms-text-dim);
  --f-fav: var(--ms-state-berthed);
  --f-mar: var(--ms-state-anchored);
  --f-res: var(--ms-state-alert);
  --p-live: var(--ms-state-berthed);
  --p-sched: var(--ms-state-underway);
  --p-unconf: var(--ms-state-anchored);

  /* competitive-proof.css local aliases (re-assert via shared brand tokens) */
  --ink: var(--ms-text);
  --muted: var(--ms-text-secondary);
  --dim: var(--ms-text-dim);
  --night: var(--ms-abyss);
  --panel: var(--ms-surface);
  --panel-solid: var(--ms-surface);
  --line: var(--ms-border);
  --line-strong: var(--ms-border-accent);
  --gold: var(--ms-gold);
  --violet: var(--ms-steel);
  --mono: var(--ms-font-mono);
  --sans: var(--ms-font-body);

  /* visual-studio.css local aliases */
  --vs-bg: var(--ms-abyss);
  --vs-panel: var(--ms-surface);
  --vs-panel-solid: var(--ms-surface);
  --vs-line: var(--ms-border);
  --vs-line-strong: var(--ms-border-accent);
  --vs-text: var(--ms-text);
  --vs-muted: var(--ms-text-secondary);
  --vs-dim: var(--ms-text-dim);
  --vs-accent: var(--ms-accent);
  --vs-accent-2: var(--ms-amber);
  --vs-danger: var(--ms-danger);
  --vs-hold: var(--ms-warning);
  --vs-shadow: var(--ms-shadow-panel);
  --vs-radius: var(--ms-radius-lg);
  --vs-mono: var(--ms-font-mono);
  --vs-sans: var(--ms-font-body);

  /* Undefined tokens referenced by styles.css vessel-filter-tab (6452–6510) */
  --brand-surface-50: var(--ms-deep);
  --brand-surface-100: var(--ms-surface);
  --brand-surface-200: var(--ms-elevated);
  --brand-surface-300: var(--ms-border);
  --brand-text-primary: var(--ms-text);
  --brand-text-secondary: var(--ms-text-secondary);
}

/* Light theme: keep AA by deepening accent on light grounds (brand.css:104–107) */
[data-theme='light'] {
  --ms-abyss: #F4F7FB;
  --ms-deep: #E8EEF6;
  --ms-surface: #FFFFFF;
  --ms-elevated: #FFFFFF;
  --ms-input: #F0F4FA;
  --ms-hover: #E2EAF4;
  --ms-border: #C5D0E0;
  --ms-border-strong: #9AABC2;
  --ms-text: #0B1220;
  --ms-text-secondary: #3D4D66;
  --ms-text-muted: #5A6B84;
  --ms-text-dim: #6E7F99;
  --ms-text-inverse: #FFFFFF;
  --ms-accent: #0F766E;
  --ms-accent-500: #0F766E;
  --brand-primary-500: #0F766E;
  --brand-accent-500: #0369A1;
  --ms-chrome: rgba(244, 247, 251, 0.94);
  --ms-ambient: linear-gradient(180deg, #F4F7FB 0%, #E8EEF6 100%);
}

/* -----------------------------------------------------------------------------
   3. BASE ELEMENTS
   ----------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 14px;
  scroll-behavior: smooth;
  background: var(--ms-abyss);
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--ms-font-body);
  font-size: var(--ms-text-base);
  font-weight: var(--ms-weight-regular);
  line-height: var(--ms-leading-normal);
  color: var(--ms-text);
  background: var(--ms-abyss);
  background-image: var(--ms-ambient);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Metrics / coordinates / tonnage — tabular lining numerals */
.kpi-num,
.stat-value,
.ring-num,
.v-val,
.ais-sum-value,
.gs-kpi-n,
.gs-bar-val,
.global-pw-total,
[data-metric],
.font-metric,
.tabular-nums {
  font-family: var(--ms-font-metric);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

.text-cn,
.t-cn,
[lang='zh-CN'],
:lang(zh-CN) {
  font-family: var(--ms-font-cn), var(--ms-font-ui);
}

a {
  color: var(--ms-accent);
  text-decoration: none;
}
a:hover {
  color: var(--ms-accent-bright);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:focus-visible {
  outline: 2px solid var(--ms-accent);
  outline-offset: 3px;
}

::selection {
  background: rgba(45, 212, 191, 0.28);
  color: var(--ms-text);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(230, 237, 247, 0.10);
  border-radius: var(--ms-radius-xs);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(230, 237, 247, 0.18);
}

/* Soften decorative orbs / purple glow from styles.css:87–91 */
.bg-orb {
  opacity: 0.05;
  filter: blur(160px);
}
.bg-orb-1 { background: var(--ms-accent) !important; }
.bg-orb-2 { background: var(--ms-data) !important; }
.bg-orb-3 { background: var(--ms-steel) !important; opacity: 0.03; }
.bg-grid {
  background-image: radial-gradient(rgba(230, 237, 247, 0.028) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.9;
}

/* -----------------------------------------------------------------------------
   4. APP SHELL — header / sidebar / layout
   Patterns: index.html #appHeader, .app-layout, .sidebar, .nav-item, .main-content
   ----------------------------------------------------------------------------- */
#appHeader {
  background: var(--ms-chrome);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--ms-border);
  z-index: var(--ms-z-header);
}

.header-brand h2,
.header-sub {
  letter-spacing: var(--ms-tracking-tight);
}
.header-sub {
  font-family: var(--ms-font-mono);
  font-size: var(--ms-text-2xs);
  color: var(--ms-text-dim);
  text-transform: uppercase;
  letter-spacing: var(--ms-tracking-label);
}
.header-stat .stat-label-bi {
  font-size: var(--ms-text-2xs);
  color: var(--ms-text-muted);
  letter-spacing: var(--ms-tracking-label);
}
.stat-value {
  font-size: var(--ms-text-sm);
  color: var(--ms-text);
}
.stat-countdown {
  color: var(--ms-accent);
}

.app-layout {
  background: transparent;
}

.sidebar {
  background: var(--ms-deep);
  border-right: 1px solid var(--ms-border);
}
.sidebar-title {
  font-size: var(--ms-text-2xs);
  font-weight: var(--ms-weight-semibold);
  letter-spacing: var(--ms-tracking-label);
  color: var(--ms-text-muted);
  text-transform: uppercase;
}
.sidebar-version {
  font-family: var(--ms-font-mono);
  font-size: var(--ms-text-2xs);
  color: var(--ms-text-dim);
}
.sidebar-search-input {
  background: var(--ms-input);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-sm);
  color: var(--ms-text);
  font-size: var(--ms-text-sm);
}
.sidebar-search-input:focus {
  border-color: var(--ms-accent);
  box-shadow: var(--ms-focus-ring);
  outline: none;
}

.nav-item {
  border-radius: var(--ms-radius-sm);
  color: var(--ms-text-secondary);
  font-size: var(--ms-text-sm);
  transition: var(--ms-transition-color);
}
.nav-item:hover {
  background: var(--ms-surface);
  color: var(--ms-text);
}
.nav-item.active,
.nav-item[aria-current='page'] {
  background: var(--ms-accent-dim);
  color: var(--ms-accent);
  border-color: var(--ms-border-accent);
  font-weight: var(--ms-weight-semibold);
  box-shadow: none;
}
/* Replace gradient active bar with single solid signal mark */
.nav-item.active::before,
.nav-item[aria-current='page']::before {
  background: var(--ms-accent) !important;
  box-shadow: none !important;
  width: 2px;
  border-radius: 0 1px 1px 0;
}

.main-content {
  background: transparent;
}

.ambient-status-strip {
  border-bottom: 1px solid var(--ms-hairline);
  color: var(--ms-text-secondary);
  font-size: var(--ms-text-xs);
  font-family: var(--ms-font-mono);
}

.live-ticker,
.ticker-label {
  font-family: var(--ms-font-mono);
  font-size: var(--ms-text-2xs);
  letter-spacing: 0.04em;
}

/* Suite nav (brand.css:118–159) — shared off-shell chrome */
.pg-suite-nav {
  border-color: var(--ms-border);
  background: var(--ms-deep);
  border-radius: var(--ms-radius-pill);
}
.pg-suite-nav a {
  color: var(--ms-text-secondary);
  font-family: var(--ms-font-body);
}
.pg-suite-nav a:hover {
  color: var(--ms-text);
  background: var(--ms-hover);
}
.pg-suite-nav a[aria-current='page'] {
  border-color: var(--ms-border-accent);
  color: var(--ms-accent);
  background: var(--ms-accent-dim);
}

/* -----------------------------------------------------------------------------
   5. CARDS / PANELS
   ----------------------------------------------------------------------------- */
.ov-card,
.party-box,
.comp-card,
.regulator-card,
.news-article-card,
.fin-kpi-card,
.reg-summary-card,
.vital,
.gs-kpi {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-md);
  box-shadow: var(--ms-shadow-xs);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ov-card {
  padding: var(--ms-density-padding-card);
}
.ov-card::before {
  height: 1px;
  background: linear-gradient(90deg, var(--ms-accent), transparent 70%);
  opacity: 0.55;
}
.ov-card:hover {
  transform: none; /* precision: no lift theatre */
  border-color: var(--ms-border-strong);
  box-shadow: var(--ms-shadow-sm);
}

.ov-header {
  font-size: var(--ms-text-xs);
  font-weight: var(--ms-weight-bold);
  letter-spacing: var(--ms-tracking-label);
  text-transform: uppercase;
  color: var(--ms-text-secondary);
  border-bottom: 1px solid var(--ms-hairline);
  padding-bottom: var(--ms-space-2);
  margin-bottom: var(--ms-space-3);
}

.module-header {
  border-bottom: 1px solid var(--ms-border);
  margin-bottom: var(--ms-space-4);
  padding-bottom: var(--ms-space-3);
}
.module-title h3,
.module-header h2,
.module-header h3 {
  font-family: var(--ms-font-heading);
  letter-spacing: var(--ms-tracking-tight);
  color: var(--ms-text);
}

/* Login — solid panel, single accent hairline (no rainbow bar) */
#loginScreen {
  background: var(--ms-abyss);
  background-image: var(--ms-ambient);
  animation: none;
}
#loginScreen::before {
  display: none;
}
.login-card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-lg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.login-card::before {
  height: 2px;
  background: var(--ms-accent) !important;
  animation: none !important;
}
.login-brand h1,
.login-brand .brand-title {
  background: none;
  -webkit-text-fill-color: unset;
  color: var(--ms-text);
  font-family: var(--ms-font-heading);
  letter-spacing: var(--ms-tracking-tight);
}
.login-tagline {
  font-family: var(--ms-font-mono);
  color: var(--ms-text-dim);
  letter-spacing: var(--ms-tracking-label);
}

/* -----------------------------------------------------------------------------
   6. KPI / METRIC TILES
   ----------------------------------------------------------------------------- */
.kpi,
.kpi-strip .kpi {
  background: var(--ms-deep);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-sm);
  padding: var(--ms-space-3) var(--ms-space-2);
}
.kpi:hover {
  transform: none;
  background: var(--ms-hover);
  border-color: var(--ms-border-strong);
}
.kpi-num {
  font-size: var(--ms-text-2xl);
  font-weight: var(--ms-weight-bold);
  color: var(--ms-accent);
  line-height: 1;
  text-shadow: none;
}
.kpi-lab {
  font-size: var(--ms-text-2xs);
  color: var(--ms-text-dim);
  margin-top: var(--ms-space-1);
  letter-spacing: 0.03em;
}
.v-label {
  font-size: var(--ms-text-2xs);
  color: var(--ms-text-dim);
  letter-spacing: var(--ms-tracking-label);
  text-transform: uppercase;
}
.accent-text {
  color: var(--ms-accent) !important;
}

/* -----------------------------------------------------------------------------
   7. DATA TABLES
   ----------------------------------------------------------------------------- */
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: var(--ms-text-md);
}
table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ms-deep);
  color: var(--ms-text-muted);
  font-size: var(--ms-text-2xs);
  font-weight: var(--ms-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ms-tracking-label);
  padding: 10px 12px;
  border-bottom: 1px solid var(--ms-border);
}
table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--ms-hairline);
  color: var(--ms-text);
  font-variant-numeric: tabular-nums;
}
table tbody tr:nth-child(even) {
  background: rgba(230, 237, 247, 0.015);
}
table tbody tr:hover {
  background: var(--ms-accent-muted);
}

.risk-table tbody tr:hover,
.market-freight-table tbody tr:hover,
.pilot-table tbody tr:hover,
.gm-table tbody tr:hover,
.comp-table tbody tr:hover,
.pc-cmp tbody tr:hover,
.evidence-matrix tbody tr:hover {
  background: var(--ms-accent-muted);
}

/* -----------------------------------------------------------------------------
   8. BADGES / STATUS PILLS (risk + maritime states)
   ----------------------------------------------------------------------------- */
.risk-pill,
.badge,
.reg-chip,
.status-pill,
.ms-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--ms-radius-pill);
  font-size: var(--ms-text-2xs);
  font-weight: var(--ms-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.3;
}

.risk-low { background: var(--ms-accent-dim); color: var(--ms-accent); }
.risk-medium { background: var(--ms-amber-dim); color: var(--ms-amber); }
.risk-high { background: var(--ms-danger-dim); color: var(--ms-danger); }
.risk-critical { background: var(--ms-danger); color: #fff; }

/* Maritime states — use with .ms-status or .status-pill */
.ms-status--berthed,
.status-berthed,
.status-delivered {
  background: var(--ms-state-berthed-dim);
  color: var(--ms-state-berthed);
  border-color: rgba(52, 211, 153, 0.28);
}
.ms-status--underway,
.status-underway,
.status-live {
  background: var(--ms-state-underway-dim);
  color: var(--ms-state-underway);
  border-color: rgba(56, 189, 248, 0.28);
}
.ms-status--anchored,
.status-anchored,
.status-waiting,
.status-pending {
  background: var(--ms-state-anchored-dim);
  color: var(--ms-state-anchored);
  border-color: rgba(251, 191, 36, 0.28);
}
.ms-status--delayed,
.status-delayed {
  background: var(--ms-state-delayed-dim);
  color: var(--ms-state-delayed);
  border-color: rgba(251, 146, 60, 0.28);
}
.ms-status--alert,
.status-alert,
.status-overdue {
  background: var(--ms-state-alert-dim);
  color: var(--ms-state-alert);
  border-color: rgba(248, 113, 113, 0.28);
}
.ms-status--sanctioned,
.status-sanctioned {
  background: var(--ms-state-sanctioned-dim);
  color: var(--ms-state-sanctioned);
  border-color: rgba(239, 68, 68, 0.35);
}

.reg-chip {
  background: var(--ms-deep);
  border-color: var(--ms-border);
  color: var(--ms-text);
  border-radius: var(--ms-radius-pill);
}
.reg-chip:hover {
  border-color: var(--ms-accent);
  background: var(--ms-accent-dim);
  transform: none;
  box-shadow: none;
}

.rl.high { background: var(--ms-danger-dim); color: var(--ms-danger); }
.rl.med { background: var(--ms-amber-dim); color: var(--ms-amber); }
.rl.low { background: var(--ms-accent-dim); color: var(--ms-accent); }

/* -----------------------------------------------------------------------------
   9. BUTTONS
   ----------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--ms-density-padding-button);
  border: 1px solid transparent;
  border-radius: var(--ms-radius-sm);
  font-family: var(--ms-font-body);
  font-size: var(--ms-text-sm);
  font-weight: var(--ms-weight-semibold);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: var(--ms-transition-color), transform var(--ms-duration-fast) var(--ms-ease-emphasized);
  outline: none;
}
.btn:focus-visible {
  outline: 2px solid var(--ms-accent);
  outline-offset: 2px;
}
.btn:active {
  transform: scale(0.98);
}
.btn::after {
  display: none; /* kill shine sweep from styles.css:1067–1069 */
}

.btn-primary {
  background: var(--ms-accent);
  color: var(--ms-text-inverse);
  border-color: var(--ms-accent);
}
.btn-primary:hover {
  background: var(--ms-accent-bright);
  border-color: var(--ms-accent-bright);
  color: var(--ms-text-inverse);
  box-shadow: none;
  filter: none;
  transform: none;
}

.btn-accent {
  background: var(--ms-accent-dim);
  color: var(--ms-accent);
  border: 1px solid var(--ms-border-accent);
}
.btn-accent:hover {
  background: rgba(45, 212, 191, 0.18);
  border-color: var(--ms-accent);
  box-shadow: none;
  filter: none;
}

.btn-secondary {
  background: var(--ms-input);
  color: var(--ms-text);
  border: 1px solid var(--ms-border);
}
.btn-secondary:hover {
  background: var(--ms-hover);
  border-color: var(--ms-border-strong);
}

.btn-danger {
  background: var(--ms-danger-dim);
  color: var(--ms-danger);
  border: 1px solid rgba(239, 68, 68, 0.30);
}
.btn-danger:hover {
  background: rgba(239, 68, 68, 0.22);
  color: var(--ms-danger);
}

.btn-sm {
  padding: 5px 12px;
  font-size: var(--ms-text-xs);
}

.btn-icon {
  padding: 7px;
  background: transparent;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-sm);
  color: var(--ms-text-secondary);
  cursor: pointer;
  transition: var(--ms-transition-color);
  line-height: 1;
}
.btn-icon:hover {
  background: var(--ms-hover);
  color: var(--ms-text);
  border-color: var(--ms-border-strong);
}

.btn-glow {
  box-shadow: 0 0 0 1px var(--ms-border-accent);
}

.fin-scenario-btn.active {
  background: var(--ms-accent);
  color: var(--ms-text-inverse);
  border-color: var(--ms-accent);
  box-shadow: none;
}

/* -----------------------------------------------------------------------------
   10. FORMS
   ----------------------------------------------------------------------------- */
.form-label {
  display: block;
  font-size: var(--ms-text-xs);
  font-weight: var(--ms-weight-semibold);
  color: var(--ms-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--ms-tracking-label);
  margin-bottom: 6px;
}

.form-input,
input[type='text'],
input[type='password'],
input[type='email'],
input[type='number'],
input[type='search'],
input[type='url'],
select,
textarea {
  background: var(--ms-input);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-sm);
  color: var(--ms-text);
  font-family: var(--ms-font-body);
  font-size: var(--ms-text-md);
  transition: border-color var(--ms-duration-fast) ease, box-shadow var(--ms-duration-fast) ease;
}

.form-input:focus,
input[type='text']:focus,
input[type='password']:focus,
input[type='email']:focus,
input[type='number']:focus,
input[type='search']:focus,
input[type='url']:focus,
select:focus,
textarea:focus {
  border-color: var(--ms-accent);
  box-shadow: var(--ms-focus-ring);
  outline: none;
}

.form-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--ms-text-dim);
}

/* -----------------------------------------------------------------------------
   11. TABS
   ----------------------------------------------------------------------------- */
.mtab-bar,
.vdm-tabs,
.vessel-detail-tabs {
  border-color: var(--ms-border);
  background: var(--ms-deep);
  border-radius: var(--ms-radius-md);
}

.mtab-btn,
.act-filter,
.vessel-filter-tab {
  color: var(--ms-text-secondary);
  border-radius: var(--ms-radius-sm);
  font-weight: var(--ms-weight-semibold);
  transition: var(--ms-transition-color);
}

.mtab-btn:hover,
.act-filter:hover,
.vessel-filter-tab:hover {
  color: var(--ms-text);
  background: rgba(230, 237, 247, 0.04);
}

.mtab-btn.active,
.act-filter.active {
  color: var(--ms-accent);
  background: var(--ms-accent-dim);
  border-color: var(--ms-border-accent);
  box-shadow: none;
}

.vessel-filter-tab.active {
  background: var(--ms-accent);
  border-color: var(--ms-accent-deep);
  color: var(--ms-text-inverse);
  box-shadow: none;
}

.lang-toggle-btn {
  border: 1px solid var(--ms-border);
  background: var(--ms-deep);
  color: var(--ms-text-secondary);
  border-radius: var(--ms-radius-sm);
  font-size: var(--ms-text-xs);
}
.lang-toggle-btn:hover {
  border-color: var(--ms-border-strong);
  color: var(--ms-text);
}

/* -----------------------------------------------------------------------------
   12. MODALS / OVERLAYS / DRAWERS
   ----------------------------------------------------------------------------- */
.modal-overlay,
.pc-modal,
.kpi-dd-overlay,
.cmd-palette-overlay {
  background: var(--ms-overlay);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: var(--ms-z-modal);
}

.modal-content,
.pc-box,
.kpi-dd-modal,
.vessel-modal,
.cmd-palette {
  background: var(--ms-elevated);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-lg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--ms-text);
}

.modal-header,
.kpi-dd-header {
  border-bottom: 1px solid var(--ms-border);
}
.modal-title,
.kpi-dd-title {
  font-family: var(--ms-font-heading);
  font-weight: var(--ms-weight-bold);
  letter-spacing: var(--ms-tracking-tight);
}
.modal-close,
.kpi-dd-close {
  color: var(--ms-text-dim);
}
.modal-close:hover,
.kpi-dd-close:hover {
  color: var(--ms-text);
  background: var(--ms-hover);
}

.drawer,
[class*='detail-panel'],
[class*='slide-panel'] {
  background: var(--ms-elevated);
  border-left: 1px solid var(--ms-border);
  box-shadow: var(--ms-shadow-lg);
}

/* -----------------------------------------------------------------------------
   13. TOOLTIPS / TOASTS
   ----------------------------------------------------------------------------- */
[role='tooltip'],
.tooltip,
[class*='popover'],
.graph-tooltip {
  background: var(--ms-elevated);
  border: 1px solid var(--ms-border-strong);
  border-radius: var(--ms-radius-sm);
  box-shadow: var(--ms-shadow-md);
  color: var(--ms-text);
  font-size: var(--ms-text-sm);
  padding: 8px 12px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.toast-container {
  z-index: var(--ms-z-toast);
}
.toast {
  background: var(--ms-elevated);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-md);
  box-shadow: var(--ms-shadow-lg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.toast.success { border-left: 3px solid var(--ms-accent); }
.toast.error { border-left: 3px solid var(--ms-danger); }
.toast.warning { border-left: 3px solid var(--ms-amber); }
.toast.info { border-left: 3px solid var(--ms-info); }

/* -----------------------------------------------------------------------------
   14. EMPTY / LOADING / ERROR
   ----------------------------------------------------------------------------- */
.empty-state,
[class*='no-data'],
.module-welcome,
.marine-empty {
  padding: var(--ms-space-7) var(--ms-space-5);
  text-align: center;
  color: var(--ms-text-secondary);
  font-size: var(--ms-text-md);
  background-image: none;
  border: 1px dashed var(--ms-border);
  border-radius: var(--ms-radius-md);
}

.loading-state,
.module-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ms-space-9) var(--ms-space-5);
  color: var(--ms-text-dim);
  font-size: var(--ms-text-sm);
}

.skeleton,
.skeleton-line,
.skel-bar,
[data-loading='true'] {
  background: linear-gradient(
    90deg,
    var(--ms-surface) 25%,
    rgba(230, 237, 247, 0.04) 50%,
    var(--ms-surface) 75%
  );
  background-size: 200% 100%;
  animation: ms-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--ms-radius-xs);
}

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

.module-error-overlay,
.module-error-body,
.load-error {
  color: var(--ms-text-secondary);
}
.module-error-icon,
.load-error strong {
  color: var(--ms-danger);
}
.login-error {
  color: var(--ms-danger);
}

/* Progress */
.progress-bar,
[class*='progress-track'],
.gs-bar {
  background: var(--ms-input);
  border-radius: var(--ms-radius-xs);
  overflow: hidden;
}
.progress-bar > *,
[class*='progress-fill'],
.gs-bar-fill,
.ring-fill {
  background: var(--ms-accent);
  filter: none;
}

/* -----------------------------------------------------------------------------
   15. OFF-SHELL PAGE REINFORCEMENT
   competitive-proof.html / visual-studio.html — shared chrome density
   ----------------------------------------------------------------------------- */
.proof-header,
.vs-header {
  background: var(--ms-chrome);
  border-bottom: 1px solid var(--ms-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.proof-kicker,
.proof-eyebrow,
.vs-kicker {
  color: var(--ms-accent);
  font-family: var(--ms-font-mono);
  letter-spacing: 0.16em;
}

.proof-metrics,
.docket-truth,
.vs-hero-proof,
.next-flow {
  border-color: var(--ms-border);
  background: var(--ms-border);
}

.proof-metrics > *,
.docket-truth > *,
.vs-hero-proof > *,
.next-flow article,
.method-grid article,
.cohort-panel,
.gap-card,
.product-card,
.source-card,
.docket-card {
  background: var(--ms-surface);
  border-color: var(--ms-border);
}

.matrix-controls,
.matrix-wrap,
.matrix-legend {
  border-color: var(--ms-border);
  background: var(--ms-deep);
}

/* Soften proof verdict gold wash — keep gold as accent, cut heavy gradient */
.proof-verdict {
  background: var(--ms-surface);
  border-color: rgba(212, 165, 116, 0.35);
  box-shadow: var(--ms-shadow-sm);
}
.proof-next {
  background: var(--ms-surface);
  border-color: var(--ms-border-accent);
  box-shadow: var(--ms-shadow-sm);
}

/* Kill accent glow dots on trust chips */
.proof-trust i,
.vs-trust-dot {
  box-shadow: none;
  background: var(--ms-accent);
}

/* -----------------------------------------------------------------------------
   16. UTILITY CLASSES (optional explicit use in new markup)
   ----------------------------------------------------------------------------- */
.ms-panel {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-md);
  padding: var(--ms-density-padding-card);
  box-shadow: var(--ms-shadow-xs);
}
.ms-panel--elevated {
  background: var(--ms-elevated);
  box-shadow: var(--ms-shadow-sm);
}
.ms-rule {
  border: 0;
  border-top: 1px solid var(--ms-border);
  margin: var(--ms-space-4) 0;
}
.ms-label {
  font-size: var(--ms-text-xs);
  font-weight: var(--ms-weight-semibold);
  letter-spacing: var(--ms-tracking-label);
  text-transform: uppercase;
  color: var(--ms-text-muted);
}
.ms-metric {
  font-family: var(--ms-font-metric);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  color: var(--ms-accent);
  font-weight: var(--ms-weight-bold);
}
.tabular-numerals,
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* -----------------------------------------------------------------------------
   17. PRINT — executive briefings
   ----------------------------------------------------------------------------- */
@media print {
  :root {
    color-scheme: light;
    --ms-abyss: #FFFFFF;
    --ms-deep: #FFFFFF;
    --ms-surface: #FFFFFF;
    --ms-elevated: #FFFFFF;
    --ms-text: #0B1220;
    --ms-text-secondary: #334155;
    --ms-text-muted: #475569;
    --ms-text-dim: #64748B;
    --ms-border: #CBD5E1;
    --ms-accent: #0F766E;
  }

  body {
    background: #fff !important;
    background-image: none !important;
    color: #0B1220 !important;
    font-size: 11pt;
    line-height: 1.45;
  }

  #appHeader,
  .sidebar,
  .sidebar-overlay,
  .advisor-bubble,
  .advisor-bubbles,
  .floating-ai-bubble,
  #statusBar,
  .live-ticker,
  .ambient-status-strip,
  .alerts-rail,
  .proactive-brief,
  .btn,
  .btn-icon,
  .bg-orb,
  .bg-grid,
  .pg-suite-nav,
  .proof-header-actions,
  .vs-header-actions,
  #loginScreen {
    display: none !important;
  }

  .app-layout,
  .main-content,
  .module-content,
  .proof-shell,
  .vs-shell {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .ov-card,
  .ms-panel,
  .method-grid article,
  .cohort-panel,
  .source-card,
  .docket-card,
  .kpi,
  table {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #CBD5E1 !important;
    background: #fff !important;
    backdrop-filter: none !important;
  }

  a {
    color: #0F766E !important;
    text-decoration: none;
  }

  .kpi-num,
  .stat-value,
  .ms-metric {
    color: #0F766E !important;
    text-shadow: none !important;
  }

  h1, h2, h3, .module-title h3 {
    color: #0B1220 !important;
    page-break-after: avoid;
  }

  @page {
    margin: 16mm 14mm;
  }
}

/* -----------------------------------------------------------------------------
   18. REDUCED MOTION / HIGH CONTRAST
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: high) {
  :root {
    --ms-border: #4A6080;
    --ms-border-strong: #6B84A6;
    --ms-text-dim: #A8B3C7;
  }
  .ov-card,
  .btn,
  .form-input {
    border-width: 2px;
  }
  .nav-item.active::before {
    width: 3px;
  }
}

/* -----------------------------------------------------------------------------
   19. SHARED INTERACTION SYSTEM (UI/UX accel 2026-08-11)
   One coherent hover / focus / press / loading / overflow contract for the SPA
   shell and suite pages (Dashboard, Visual Studio, Competitive Proof, Terminal,
   News, Market, Admin). Prefer tokens over per-page cosmetics.
   ----------------------------------------------------------------------------- */

html {
  overflow-x: clip;
}
body {
  overflow-x: clip;
  max-width: 100%;
}

/* Decorative atmosphere must never create horizontal scroll */
.bg-orb,
.te-atmosphere,
.tr-atmosphere,
.vs-atmosphere,
.proof-grid {
  pointer-events: none;
  contain: paint;
}
.bg-orb {
  display: none; /* purely decorative; overflowed desktop + mobile audits */
}

/* Interactive controls: <100ms perceived feedback, 150–250ms eased settle */
.btn,
.btn-icon,
.nav-item,
.pg-suite-nav a,
.lang-toggle-btn,
.cmd-palette-trigger,
.user-badge,
.header-actions button,
.mtab,
.tab-btn,
.pb-chip,
.pb-btn,
.pb-recall-chip,
.pg-upload__btn,
.pg-upload__zone,
.proof-lang,
.proof-back,
.proof-action,
.proof-hero-links a,
.proof-hero-links button,
.vs-lang,
.vs-back,
.vs-generate,
.vs-export-bar button,
.tr-language,
.tr-back,
.tr-run,
.tr-scenario,
.te-pill,
.te-primary,
.te-text-button,
.te-rail li,
.te-download {
  transition:
    color var(--ms-duration-fast) var(--ms-ease-standard),
    background-color var(--ms-duration-fast) var(--ms-ease-standard),
    border-color var(--ms-duration-fast) var(--ms-ease-standard),
    box-shadow var(--ms-duration-base) var(--ms-ease-standard),
    transform var(--ms-duration-base) var(--ms-ease-emphasized),
    opacity var(--ms-duration-fast) var(--ms-ease-standard);
}

.btn:hover,
.btn-icon:hover,
.nav-item:hover,
.pg-suite-nav a:hover,
.mtab:hover,
.tab-btn:hover,
.pg-upload__btn:hover,
.proof-action:hover:not(:disabled),
.vs-generate:hover,
.tr-run:hover,
.te-primary:hover,
.te-pill:hover,
.te-download:hover {
  transform: translateY(-1px);
}

.btn:active,
.btn-icon:active,
.nav-item:active,
.pg-suite-nav a:active,
.mtab:active,
.tab-btn:active,
.pg-upload__btn:active,
.proof-action:active:not(:disabled),
.vs-generate:active,
.tr-run:active,
.te-primary:active,
.te-pill:active,
.te-download:active {
  transform: translateY(1px);
}

.btn:focus-visible,
.btn-icon:focus-visible,
.nav-item:focus-visible,
.pg-suite-nav a:focus-visible,
.lang-toggle-btn:focus-visible,
.mtab:focus-visible,
.tab-btn:focus-visible,
.pg-upload__btn:focus-visible,
.pg-upload__zone:focus-within,
.proof-lang:focus-visible,
.proof-back:focus-visible,
.proof-action:focus-visible,
.vs-lang:focus-visible,
.vs-back:focus-visible,
.vs-generate:focus-visible,
.tr-language:focus-visible,
.tr-back:focus-visible,
.tr-run:focus-visible,
.tr-scenario:focus-visible,
.te-pill:focus-visible,
.te-primary:focus-visible,
.te-text-button:focus-visible,
.te-rail li:focus-visible,
.te-download:focus-visible {
  outline: none;
  box-shadow: var(--ms-focus-ring);
}

/* Module / panel containment — tables scroll inside, chrome never bleeds */
.main-content,
.module-panel,
.module-content,
#module-news,
#module-market,
#module-admin,
#module-documents,
#module-overview,
.vs-shell,
.proof-shell,
.tr-shell,
.te-shell {
  min-width: 0;
  max-width: 100%;
}

.module-panel,
.module-content {
  overflow-x: clip;
}

/* Shared loading skeleton — use instead of bare spinners */
.ms-skeleton,
.proof-verdict[data-state='loading'] .proof-fingerprint code,
.proof-metrics[data-state='loading'] strong {
  position: relative;
  color: transparent !important;
  background: linear-gradient(
    90deg,
    var(--ms-surface) 25%,
    var(--ms-elevated) 50%,
    var(--ms-surface) 75%
  );
  background-size: 200% 100%;
  border-radius: var(--ms-radius-sm);
  animation: ms-skeleton-shimmer 1.35s var(--ms-ease-standard) infinite;
}
.ms-skeleton-block {
  display: block;
  min-height: 1.1em;
  width: 72%;
  margin: 0.35em 0;
  border-radius: var(--ms-radius-sm);
  background: linear-gradient(
    90deg,
    var(--ms-surface) 25%,
    var(--ms-elevated) 50%,
    var(--ms-surface) 75%
  );
  background-size: 200% 100%;
  animation: ms-skeleton-shimmer 1.35s var(--ms-ease-standard) infinite;
}
@keyframes ms-skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Login: solid elevated card (no glass) — maritime-system wins over styles.css */
#loginScreen .login-card {
  background: var(--ms-elevated);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--ms-border);
  box-shadow: var(--ms-shadow-panel);
}
#loginScreen .login-card::before {
  background: linear-gradient(90deg, var(--ms-accent), var(--ms-data), transparent 85%);
}

/* Suite nav: clearer hierarchy + press affordance */
.pg-suite-nav a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}
.pg-suite-nav a[aria-current='page'] {
  font-weight: var(--ms-weight-semibold);
}

@media (prefers-reduced-motion: reduce) {
  .ms-skeleton,
  .ms-skeleton-block,
  .proof-verdict[data-state='loading'] .proof-fingerprint code,
  .proof-metrics[data-state='loading'] strong {
    animation: none !important;
    background: var(--ms-elevated) !important;
  }
  .btn:hover,
  .btn-icon:hover,
  .nav-item:hover,
  .pg-suite-nav a:hover,
  .mtab:hover,
  .tab-btn:hover,
  .pg-upload__btn:hover,
  .proof-action:hover:not(:disabled),
  .vs-generate:hover,
  .tr-run:hover,
  .te-primary:hover,
  .te-pill:hover,
  .te-download:hover,
  .btn:active,
  .btn-icon:active,
  .nav-item:active,
  .pg-suite-nav a:active,
  .mtab:active,
  .tab-btn:active,
  .pg-upload__btn:active,
  .proof-action:active:not(:disabled),
  .vs-generate:active,
  .tr-run:active,
  .te-primary:active,
  .te-pill:active,
  .te-download:active {
    transform: none;
  }
}

@media (max-width: 640px) {
  .header-actions .btn-icon:focus-visible,
  .lang-toggle-btn:focus-visible {
    box-shadow: var(--ms-focus-ring);
  }
  #module-news .news-grid,
  #module-market .market-grid,
  #module-admin .admin-grid,
  .fin-kpi-grid,
  .reg-signals-grid,
  .exec-signals-strip {
    grid-template-columns: 1fr;
    min-width: 0;
  }
}

/* -----------------------------------------------------------------------------
   20. UI/UX ACCEL A2 — empty/loading hierarchy, cmd palette, residual glass
   CSS-only; loads after premium.css / brain.css so these win without touching
   Worker B/C contended JS/HTML slices.
   ----------------------------------------------------------------------------- */

/* Residual glass → solid maritime surfaces */
[role='tooltip'],
.tooltip,
[class*='popover'],
.kpi-dd-overlay,
.brain-region-label {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[role='tooltip'],
.tooltip,
[class*='popover'] {
  background: var(--ms-elevated) !important;
  border-color: var(--ms-border) !important;
  box-shadow: var(--ms-shadow-md);
  color: var(--ms-text);
}
.kpi-dd-overlay {
  background: var(--ms-overlay) !important;
}
.kpi-dd-modal {
  background: var(--ms-elevated);
  border-color: var(--ms-border);
  box-shadow: var(--ms-shadow-panel);
}
.brain-region-label {
  background: var(--ms-elevated) !important;
  border-color: var(--ms-border) !important;
  color: var(--ms-text);
}

/* Empty / no-data — real hierarchy, not a flat muted blob */
.empty-state,
[class*='no-data'],
.cmd-palette-empty,
.module-empty,
.pg-upload__empty {
  position: relative;
  background-color: var(--ms-surface);
  background-image:
    radial-gradient(circle at 1px 1px, var(--ms-hairline) 1px, transparent 0);
  background-size: 22px 22px;
  border: 1px dashed var(--ms-border);
  border-radius: var(--ms-radius-lg);
  padding: var(--ms-space-7) var(--ms-space-5);
  text-align: center;
  color: var(--ms-text-secondary);
  max-width: 100%;
  min-width: 0;
}
.empty-state::before,
[class*='no-data']::before,
.module-empty::before {
  content: '';
  display: block;
  width: 36px;
  height: 36px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 1px solid var(--ms-border-accent);
  background:
    radial-gradient(circle at 50% 45%, var(--ms-accent-dim), transparent 68%),
    var(--ms-deep);
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.08);
}
.empty-state strong,
.empty-state h3,
.empty-state .empty-title,
.module-empty strong,
.module-empty h3 {
  display: block;
  color: var(--ms-text);
  font-size: var(--ms-text-lg);
  font-weight: var(--ms-weight-semibold);
  letter-spacing: var(--ms-tracking-tight);
  margin-bottom: 6px;
}
.empty-state p,
.module-empty p,
.cmd-palette-empty {
  color: var(--ms-text-muted);
  font-size: var(--ms-text-sm);
  line-height: var(--ms-leading-normal);
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}

/* Prefer skeleton shimmer over bare spinner discs (beat .bento-enhanced specificity) */
.loading-state .spinner,
.module-loading .spinner,
.analysis-loading .spinner,
.bento-enhanced .loading-state .spinner,
.bento-enhanced .module-loading .spinner {
  width: 100% !important;
  max-width: 220px;
  height: 10px !important;
  margin: 8px auto !important;
  border: 0 !important;
  border-radius: var(--ms-radius-pill) !important;
  background: linear-gradient(
    90deg,
    var(--ms-surface) 25%,
    var(--ms-elevated) 50%,
    var(--ms-surface) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: ms-skeleton-shimmer 1.35s var(--ms-ease-standard) infinite !important;
  box-shadow: none !important;
}
.loading-state .spinner::before,
.loading-state .spinner::after,
.module-loading .spinner::before,
.module-loading .spinner::after,
.bento-enhanced .loading-state .spinner::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

/* Command palette — token-aligned selection + keyboard comfort */
.cmd-palette-overlay {
  background: var(--ms-overlay);
  padding-top: min(15vh, 120px);
  padding-left: 12px;
  padding-right: 12px;
}
.cmd-palette {
  background: var(--ms-elevated);
  border-color: var(--ms-border);
  box-shadow: var(--ms-shadow-panel);
  max-height: min(70vh, 640px);
}
.cmd-palette-search {
  border-bottom-color: var(--ms-border);
}
.cmd-palette-search input:focus-visible {
  outline: none;
  box-shadow: inset 0 -2px 0 var(--ms-accent);
}
.cmd-palette-item:hover,
.cmd-palette-item.is-selected {
  background: var(--ms-accent-dim) !important;
}
.cmd-palette-item.is-selected::before {
  background: var(--ms-accent) !important;
}
.cmd-palette-item:focus-visible {
  outline: none;
  box-shadow: var(--ms-focus-ring);
}
.cmd-palette-item-badge {
  border-color: var(--ms-border);
  background: var(--ms-deep);
  color: var(--ms-text-secondary);
  border-radius: var(--ms-radius-sm);
}
.cmd-palette-trigger:hover {
  border-color: var(--ms-border-accent) !important;
  color: var(--ms-accent) !important;
  background: var(--ms-accent-dim) !important;
}
.cmd-palette-trigger:focus-visible {
  box-shadow: var(--ms-focus-ring);
}

/* News / Market / Admin module chrome containment */
#module-news .news-article-card,
#module-market .fin-kpi-card,
#module-admin .admin-card,
#module-market .ov-card,
#module-news .ov-card {
  min-width: 0;
  max-width: 100%;
}
#module-news .news-article-card:hover,
#module-market .fin-kpi-card:hover,
#module-admin .admin-card:hover {
  border-color: var(--ms-border-accent);
  box-shadow: var(--ms-shadow-sm);
  transform: translateY(-1px);
  transition:
    border-color var(--ms-duration-fast) var(--ms-ease-standard),
    box-shadow var(--ms-duration-base) var(--ms-ease-standard),
    transform var(--ms-duration-base) var(--ms-ease-emphasized);
}

@media (max-width: 640px) {
  .cmd-palette {
    width: min(100%, 92vw);
    max-height: 78vh;
  }
  .cmd-palette-item {
    padding: 12px 14px;
  }
  .empty-state,
  [class*='no-data'],
  .module-empty {
    padding: var(--ms-space-5) var(--ms-space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-state .spinner,
  .module-loading .spinner,
  .analysis-loading .spinner,
  .bento-enhanced .loading-state .spinner,
  .cmd-palette,
  .cmd-palette-overlay,
  .kpi-dd-overlay,
  .kpi-dd-modal {
    animation: none !important;
  }
  #module-news .news-article-card:hover,
  #module-market .fin-kpi-card:hover,
  #module-admin .admin-card:hover {
    transform: none;
  }
}

/* -----------------------------------------------------------------------------
   21. UI/UX ACCEL A3 — suite navigation + terminal keyboard comfort
   brand.css hides .pg-suite-nav below 1120px; restore a compact scroll rail so
   Visual Studio / Proof / Terminal remain reachable on tablet and phone.
   ----------------------------------------------------------------------------- */

.pg-suite-nav {
  background: var(--ms-deep);
  border-color: var(--ms-border);
  max-width: min(100%, 560px);
}

@media (max-width: 1120px) {
  .pg-suite-nav {
    display: inline-flex !important;
    max-width: min(72vw, 420px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .pg-suite-nav::-webkit-scrollbar { display: none; }
  .pg-suite-nav a {
    min-height: 30px;
    padding: 0 10px;
    font-size: 9px;
    flex: 0 0 auto;
  }
}

@media (max-width: 640px) {
  .pg-suite-nav {
    max-width: min(58vw, 260px);
  }
  .vs-header,
  .proof-header,
  .tr-header,
  .te-header {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}

/* Terminal suite: keyboard focus parity with VS/Proof */
.tr-language:focus-visible,
.tr-back:focus-visible,
.tr-run:focus-visible,
.tr-scenario:focus-visible,
.tr-primary-link:focus-visible,
.te-pill:focus-visible,
.te-primary:focus-visible,
.te-text-button:focus-visible,
.te-rail li:focus-visible,
.te-download:focus-visible,
.te-mode:focus-visible {
  outline: none;
  box-shadow: var(--ms-focus-ring);
}

.tr-scenario:hover,
.te-rail li:hover {
  border-color: var(--ms-border-accent);
}

.tr-scenario:active,
.te-rail li:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .tr-scenario:active,
  .te-rail li:active {
    transform: none;
  }
}