/* ============================================================
   PRODUCT.AI UNIFIED DESIGN SYSTEM v4.0
   ============================================================
   Shared design system for CEO Cortex and Cortex Team dashboards.
   Canonical source: cortex/dashboard/ (deploys to cortex.product.ai)
   Symlinked from: Ops/Dashboards/ (CEO Cortex, localhost:8099)
   Tokens: design-tokens.css (shared)
   Spec: Ops/_ Design System/DESIGN-SYSTEM.md

   Color Philosophy:
   - Status owns color: verified green #02BB64, info sky #38BDF8, progress
     amber #FBBF24 (marks only), caution orange #FB923C, error red #EF4444,
     deal pink #F472B6 (productai-brand-color-driver §3.3)
   - System accent: Product.ai violet (#8B5CF6, violet-500) for current state, progress
   - Everything else: Tailwind zinc grayscale
   - Pillar/track badges: semantic color per pillar

   Typography (productai-brand-typography-driver §3.5): Plus Jakarta Sans
   for all text and UI; Archivo for page titles and section eyebrows only;
   Roboto Mono for receipts only (IDs, codes, timestamps, paths)
   Grid: 4px base, 8px spacing unit
   Radius: 4px (sm), 6px (md), 8px (lg), 12px (xl)
   ============================================================ */
@import url('design-tokens.css');

/* --- RESET & BASE --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  background: var(--bg-base, #09090B);
}
body {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: 1.5;
  font-weight: 430;
  font-feature-settings: 'zero' 1;
  font-variant-numeric: tabular-nums;
  background: var(--bg-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }

/* ============================================================
   CORTEX TOKEN OVERRIDES
   Cortex uses a different text hierarchy than the shared tokens.
   ============================================================ */
:root {
  /* Cortex text hierarchy — Tailwind zinc since 2026-09-29, mirrors
     design-tokens.css (zinc-300 / zinc-400 / zinc-450; quaternary 5.74:1
     on --bg-base). Was #c0c0cc / #9a9aa6 / #8a8a96. */
  --text-secondary: #D4D4D8;
  --text-tertiary: #A1A1AA;
  --text-quaternary: #898992;
  /* Nav skeleton is Cortex-specific first-paint scaffolding for empty .global-nav shells.
     It lives here (not design-tokens.css) because it is tied to this shared nav implementation. */
  --nav-skeleton-row-height: 26px;
  --nav-skeleton-brand: rgba(244,244,245,0.32);
  --nav-skeleton-link-strong: rgba(113,113,122,0.32);
  --nav-skeleton-link: rgba(113,113,122,0.26);
  --nav-skeleton-link-soft: rgba(113,113,122,0.22);
  --nav-skeleton-link-muted: rgba(113,113,122,0.18);

  /* Layout (Cortex default; Cortex overrides via cortex.css) */
  --max-width: 1440px;
  --page-padding: 32px;

  /* ── Shorthand aliases ──
     Legacy tokens used across Cortex dashboards. Map to canonical names.
     New code should use canonical (--bg-base, --text-primary, etc.) names. */
  --bg: var(--bg-base);
  --raised: var(--bg-raised);
  --overlay: var(--bg-overlay);
  --card: var(--surface-primary);
  --card-hover: var(--surface-hover);
  --card-active: var(--surface-active);
  --border: var(--border-subtle);
  --border-med: var(--border-default);
  --t1: var(--text-primary);
  --t2: var(--text-secondary);
  --t3: var(--text-tertiary);
  --t4: var(--text-quaternary);
  --green: var(--status-green);
  --green-bg: var(--status-green-muted);
  --yellow: var(--status-yellow);
  --yellow-bg: var(--status-yellow-muted);
  --red: var(--status-red);
  --red-bg: var(--status-red-muted);
  --blue: var(--status-blue);
  --blue-bg: var(--status-blue-muted);
  --purple: var(--status-purple);
  --purple-bg: var(--status-purple-muted);
  --orange: var(--status-orange);
  --orange-bg: var(--status-orange-muted);
  --pink: var(--pillar-brand);
  --teal: var(--pillar-kops);
  --mono: var(--font-mono);
  --radius: var(--radius-lg);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.app {
  max-width: var(--max-width, 1440px);
  margin: 0 auto;
  padding: 32px;
}
.app-flush { max-width: 100%; padding: 0; }

/* ============================================================
   GLOBAL NAV
   Shared top bar across all dashboard pages.
   ============================================================ */
/* --global-nav-h — the bar's rendered height, as a GLOBAL token. Declared at
   :root because a custom property declared on .global-nav is invisible to
   consumers OUTSIDE the nav's subtree (sticky page headers, fixed sheets, side
   rails) — they silently resolve their var() fallbacks instead. That scoping
   bug let three different guesses at one bar ship: 52px here, 56px in the Soma
   deck, 59px in the Soma's reserve-capture sticky header.
   These statics are MEASURED first-paint defaults, not eyeball derivations:
   team bar = 53px desktop (10+10 padding + 32px link row + 1px border),
   47px ≤900px (the inline rail hides; the tallest row drops to 26px).
   nav.js re-publishes the real rendered height onto this token after render,
   on resize, and after fonts load (documentElement inline style, which
   out-cascades these statics), so consumers track reality even when the bar
   changes or wraps. A surface that overrides the bar's box (the Soma's
   cortex.css: 12px padding + an always-visible, wrappable rail → ~59px)
   relies on that runtime publisher for its real value — the Soma's
   dashboard-css-guard keeps static tokens out of layout files, and the
   published value out-cascades whatever the statics say. */
:root { --global-nav-h: 53px; }
@media (max-width: 900px) { :root { --global-nav-h: 47px; } }
.global-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 32px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: #09090B;
  position: sticky;
  top: 0;
  z-index: 100;
}
.global-nav:empty::before {
  content: "";
  display: block;
  flex: 0 1 1060px;
  max-width: calc(100vw - 96px);
  height: var(--nav-skeleton-row-height, 26px);
  border-radius: 6px;
  background:
    linear-gradient(90deg, var(--nav-skeleton-brand), var(--nav-skeleton-brand)) 32px 6px / 22px 14px no-repeat,
    linear-gradient(90deg, var(--nav-skeleton-brand), var(--nav-skeleton-brand)) 62px 7px / 45px 12px no-repeat,
    linear-gradient(90deg, var(--nav-skeleton-link-strong), var(--nav-skeleton-link-strong)) 133px 8px / 48px 10px no-repeat,
    linear-gradient(90deg, var(--nav-skeleton-link-strong), var(--nav-skeleton-link-strong)) 194px 8px / 56px 10px no-repeat,
    linear-gradient(90deg, var(--nav-skeleton-link-strong), var(--nav-skeleton-link-strong)) 265px 8px / 58px 10px no-repeat,
    linear-gradient(90deg, var(--nav-skeleton-link), var(--nav-skeleton-link)) 362px 8px / 45px 10px no-repeat,
    linear-gradient(90deg, var(--nav-skeleton-link), var(--nav-skeleton-link)) 420px 8px / 61px 10px no-repeat,
    linear-gradient(90deg, var(--nav-skeleton-link), var(--nav-skeleton-link)) 499px 8px / 70px 10px no-repeat,
    linear-gradient(90deg, var(--nav-skeleton-link), var(--nav-skeleton-link)) 585px 8px / 53px 10px no-repeat,
    linear-gradient(90deg, var(--nav-skeleton-link-soft), var(--nav-skeleton-link-soft)) 677px 8px / 60px 10px no-repeat,
    linear-gradient(90deg, var(--nav-skeleton-link-soft), var(--nav-skeleton-link-soft)) 754px 8px / 62px 10px no-repeat,
    linear-gradient(90deg, var(--nav-skeleton-link-muted), var(--nav-skeleton-link-muted)) 851px 8px / 36px 10px no-repeat,
    linear-gradient(90deg, var(--nav-skeleton-link-muted), var(--nav-skeleton-link-muted)) 900px 8px / 67px 10px no-repeat,
    linear-gradient(90deg, var(--nav-skeleton-link-muted), var(--nav-skeleton-link-muted)) 984px 8px / 61px 10px no-repeat;
  opacity: 0.78;
  pointer-events: none;
}
.global-nav:not(:empty)::before { content: none; }
.global-nav-brand {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: 600;
  color: #F4F4F5; letter-spacing: -0.01em;
  margin-right: 16px; text-decoration: none;
}
.global-nav-brand-mark { flex-shrink: 0; display: block; }
.global-nav-brand-text { line-height: 1; }
.global-nav-link {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #71717A;
  text-decoration: none;
  transition: all 120ms ease-out;
}
.global-nav-link:hover { color: #A1A1AA; background: rgba(255,255,255,0.04); }
.global-nav-link.active { color: #F4F4F5; background: #222228; }

/* Inline rail stays on ONE line — labels never break mid-word and items never wrap to
   a second row. flex-shrink:0 holds the rail at full content width so the overflow-nav
   (nav.js fitNav) can detect when it no longer fits and move the rightmost items into
   More, instead of the rail wrapping. The 8px gap is the air between the six territory
   pills (nav.js DECK_CSS draws the pills); items fitNav hides leave no gap behind. */
.global-nav-links { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex-shrink: 0; }
.global-nav-links .global-nav-link { white-space: nowrap; }

/* --- Nav separator (personal | team groups) --- */
.global-nav-sep {
  width: 1px; height: 14px;
  background: var(--border-strong); margin: 0 12px;
  flex-shrink: 0; align-self: center;
}

/* --- Nav spacer (responsive nav) --- */
.global-nav-spacer { flex: 1; }

/* --- "More" menu (Cortex inline, right of primary nav links) ---
   Styled to read as a peer of .global-nav-link (same padding/font/color) so it
   visually belongs with the nav row rather than feeling like a separate tool. */
.global-nav-menu { position: relative; display: inline-flex; align-items: center; }
.global-nav-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  min-height: 44px; /* 44px touch-target floor [NO-XG: operator-ordered UX-v2 tap-target repair on team-owned shared chrome — pure CSS, no Soma content in diff | low | none] */
  padding: 5px 10px 5px 12px;
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  font-family: inherit;
  line-height: 1;
  transition: all 120ms ease-out;
}
.global-nav-menu-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
.global-nav-menu-btn[aria-expanded="true"] { color: var(--text-primary); background: rgba(255,255,255,0.04); }
.global-nav-menu-btn svg { opacity: 0.7; transition: transform 120ms ease-out; }
.global-nav-menu-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.global-nav-menu-label { letter-spacing: inherit; }
.global-nav-dropdown {
  position: absolute;
  /* Right-align to the trigger so the menu opens leftward and stays inside the
     viewport. With left:0 it spilled ~109px past the right edge (the trigger sits
     near the right of the nav), creating page-wide horizontal scroll — and the menu
     rendered partly off-screen when open. visibility:hidden keeps it laid out, so
     the overflow happened even while closed. */
  right: 0;
  top: calc(100% + 6px);
  background: var(--bg-overlay);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 6px 0;
  min-width: 200px;
  max-width: calc(100vw - 16px);  /* Fit within viewport on mobile */
  z-index: 200;
  box-shadow: var(--shadow-lg);
  /* Cap to the viewport and scroll internally. Without this the dropdown grows to
     fit all items (up to 32 on the ≤900px mobile breakpoint, which dumps every
     primary link + every section into the menu); on a short viewport the bottom
     items fall below the fold with no way to reach them — the operator had to zoom
     the browser out to see them. 72px ≈ nav height + the 6px top gap + a small
     bottom margin. overscroll-behavior:contain stops scroll-chaining to the page. */
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
}
.global-nav-dropdown.open,
.global-nav-dropdown.is-open { visibility: visible; }
.global-nav-dropdown.is-closing { visibility: visible; }
.global-nav-dropdown .global-nav-link {
  display: block;
  padding: 8px 16px;
  border-radius: 0;
  white-space: nowrap;
}
.global-nav-dropdown .global-nav-link.active { background: var(--surface-active); }
.global-nav-dropdown-hr {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: 4px 0;
}

/* Desktop: hide main page links in the dropdown (they're inline) */
.global-nav-dropdown-main { display: none; }
.global-nav-dropdown-main + .global-nav-dropdown-hr { display: none; }

/* transitions.dev — menu dropdown */
.t-dropdown {
  transform-origin: top left;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-open-dur) var(--dropdown-ease),
    opacity   var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}
.t-dropdown[data-origin="top-right"]     { transform-origin: top right; }
.t-dropdown[data-origin="top-center"]    { transform-origin: top center; }
.t-dropdown[data-origin="bottom-left"]   { transform-origin: bottom left; }
.t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }
.t-dropdown[data-origin="bottom-right"]  { transform-origin: bottom right; }

.t-dropdown.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-close-dur) var(--dropdown-ease),
    opacity   var(--dropdown-close-dur) var(--dropdown-ease);
}

/* Cortex motion utility — left-to-right progress fills */
.t-progress-fill {
  transform-origin: left center;
  will-change: transform;
}
.t-progress-fill.is-animating {
  animation: t-progress-fill-in var(--progress-fill-dur) var(--progress-fill-ease) both;
}
@keyframes t-progress-fill-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Cortex motion utility — light enter ramp for fetched/re-rendered surfaces */
.t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity   var(--panel-close-dur) var(--panel-ease),
    filter    var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}
.t-panel-slide[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity   var(--panel-open-dur) var(--panel-ease),
    filter    var(--panel-open-dur) var(--panel-ease);
}

/* Cortex motion utility — light enter ramp for fetched/re-rendered surfaces */
.t-content-enter {
  animation: t-cortex-content-enter var(--panel-open-dur) var(--panel-ease) both;
  will-change: transform, opacity, filter;
}
@keyframes t-cortex-content-enter {
  from { opacity: 0; transform: translateY(6px); filter: blur(1px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .t-dropdown { transition: none !important; }
  .t-panel-slide { transition: none !important; }
  .t-progress-fill { animation: none !important; }
  .t-content-enter { animation: none !important; }
}

/* --- User avatar (Cortex right side — trigger for the account dropdown) --- */
/* The avatar is a <button> (opens the account dropdown), styled to read exactly
   like the old <a> circle. The button-reset props (cursor, font, padding, line)
   keep it pixel-identical now that it's a button element. */
.global-nav-user {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: all 120ms ease-out;
  /* button reset (avatar is now a trigger button, not a link) */
  padding: 0;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
}
.global-nav-user:hover,
.global-nav-user[aria-expanded="true"] {
  background: rgba(255,255,255,0.10);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.global-nav-user-initials { line-height: 1; pointer-events: none; }

/* --- Avatar dropdown (My Profile + Get Started) --- */
/* Wrapper anchors the absolutely-positioned dropdown to the avatar (mirrors
   .global-nav-menu). Reuses .global-nav-dropdown for the panel chrome; the
   selectors below add the avatar-only header row + item layout. */
.global-nav-avatar { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
/* Header row — resolved name + initials; the whole row links to the operator's
   page (CEO: team index). Neutral by design (identity is not a brand moment). */
.global-nav-avatar-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--text-primary);
}
.global-nav-avatar-head:hover { background: var(--surface-hover); }
.global-nav-avatar-head-av {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.global-nav-avatar-head-name {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Items — reuse .global-nav-link; add an icon slot. "primary" marks My Profile
   as the canonical interactive surface (the one accent moment in this menu). */
.global-nav-dropdown .global-nav-avatar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
}
.global-nav-dropdown .global-nav-avatar-item:hover { background: var(--surface-hover); color: var(--text-primary); }
.global-nav-dropdown .global-nav-avatar-item.primary { color: var(--text-primary); background: var(--accent-subtle); }
.global-nav-dropdown .global-nav-avatar-item.primary:hover { background: var(--accent-muted); }
.global-nav-avatar-ico { flex-shrink: 0; display: inline-flex; color: var(--text-tertiary); }
.global-nav-dropdown .global-nav-avatar-item.primary .global-nav-avatar-ico { color: var(--accent); }

/* Mobile: show main page links in dropdown, hide inline links */
@media (max-width: 900px) {
  .global-nav { padding: 10px 16px; }
  .global-nav-links { display: none; }
  .global-nav-dropdown-main { display: block; }
  .global-nav-dropdown-main + .global-nav-dropdown-hr { display: block; }
}

/* Mobile (≤900px — where the rail collapses and the More button sits at the left):
   anchor the More menu to the viewport's LEFT edge and clamp its width, instead of
   hanging it off the button right-aligned (right-anchored it was 388px wide and
   spilled ~210px off the left edge on a phone). position:fixed makes left/right refer
   to the viewport, not the button. Scoped to the More menu ONLY — the avatar/account
   dropdown stays right-anchored (an earlier unscoped `left:0` flipped the avatar menu
   ~164px off the RIGHT edge); the base rule's max-width: calc(100vw - 16px) already
   clamps the avatar dropdown so it can't exceed the viewport. */
@media (max-width: 900px) {
  .global-nav-menu .global-nav-dropdown {
    position: fixed;
    left: 8px;
    right: auto;
    top: var(--global-nav-h); /* tracks the declared nav-height token, not a magic 52px */
    max-width: calc(100vw - 16px);
  }
}
/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 24px;
  margin-bottom: 0;
}

/* Sub-navigation — segmented control for sibling pages within a domain.
   Used for cross-linking between sibling dashboards (Recruiting:
   Candidates / Roles / Projects). Pattern: container with subtle border,
   active item gets raised background + primary text. No accent — the
   contrast comes from elevation, not color. Keeps accent budget free
   for the page's primary CTA.
   Added 2026-05-04 from recruiting-pages cohesion refactor. */
.ui-subnav {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-active);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  gap: 2px;
}
.ui-subnav-item {
  padding: 5px 14px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-tertiary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.12s ease, background 0.12s ease;
}
.ui-subnav-item:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}
.ui-subnav-item.active {
  background: var(--bg-raised);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  cursor: default;
}
.ui-subnav-item.active:hover {
  background: var(--bg-raised);
}

/* Section bar — one full-width bar of sibling pages under the global nav, drawn
   by a section's own script (the recruiting section's is recruiting-nav.js).
   Added 2026-10-12 from the recruiting Desk's top bar (recruiting-driver §16.10):
   a square mark and the section name, then flat tabs; the current tab is raised,
   never accent. On a phone the tabs scroll sideways in one row. */
.ui-sectionbar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-base);
  font-family: var(--font-sans);
}
.ui-sectionbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
}
.ui-sectionbar-mark { width: 6px; height: 6px; border-radius: 0; background: var(--text-primary); }
.ui-sectionbar-items { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ui-sectionbar-items::-webkit-scrollbar { display: none; }
.ui-sectionbar-item {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 36px;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-tertiary);
  text-decoration: none;
  white-space: nowrap;
}
.ui-sectionbar-item:hover { color: var(--text-primary); }
.ui-sectionbar-item.active { background: var(--surface-active); color: var(--text-primary); }
@media (max-width: 640px) {
  .ui-sectionbar { gap: 10px; padding: 0 12px; }
  .ui-sectionbar-item { min-height: 44px; }
}

/* Breadcrumb — small navigational lead-in above page titles.
   Token-correct (uses --text-quaternary + --accent), 11px uppercase
   label style. Pairs with .page-title; sits above it.
   Added 2026-05-04 from recruiting-projects header refactor.
   An eyebrow, so Archivo 600 (typography driver §3.5). */
.ui-breadcrumb {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-quaternary);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ui-breadcrumb a {
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color 0.12s ease;
}
.ui-breadcrumb a:hover { color: var(--text-primary); }
.ui-breadcrumb-sep {
  color: var(--text-quaternary);
  opacity: 0.5;
}

.page-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: #F4F4F5;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.page-subtitle {
  font-size: var(--fs-md);
  color: #71717A;
  margin-top: 4px;
}
.page-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--accent-subtle);
  color: var(--accent-hover);
}
.page-badge.stale { background: rgba(239,68,68,0.08); color: var(--status-red); }
.page-meta {
  font-size: var(--fs-xs);
  color: #52525B;
  text-align: right;
  line-height: 1.5;
}
.page-meta strong { color: #71717A; font-weight: 600; }

/* ============================================================
   SECTION SYSTEM
   Two tiers: .section (border-based) and .zone (band-based).
   ============================================================ */

/* --- .section: space-separated module --- */
.section {
  padding: 32px 0 0;
}
.section:first-child { padding-top: 0; }

/* --- .zone: margin-separated module with prominent header --- */
.zone {
  margin-bottom: 40px;
}
.zone:last-child { margin-bottom: 0; }

/* --- .zone-band: alternating background variant --- */
.zone-band {
  padding: 32px;
}
.zone-band:nth-child(odd)  { background: #101013; }
.zone-band:nth-child(even) { background: #09090B; }
.zone-band-inner {
  max-width: 1216px;
  margin: 0 auto;
}

/* --- Shared section/zone header --- */
.section-header,
.zone-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 0;
}
.section-title,
.zone-title {
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: #F4F4F5;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.section-line,
.zone-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.04);
}
.section-right,
.zone-meta,
.section-count {
  font-size: var(--fs-xs);
  color: #52525B;
  white-space: nowrap;
}

/* Mobile containment for shared dashboard sections/trays */
@media (max-width: 640px) {
  .section-header,
  .zone-header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 10px;
    margin-bottom: 16px;
  }
  .section-title,
  .zone-title {
    white-space: normal;
    min-width: 0;
    flex: 1 1 auto;
  }
  .section-line,
  .zone-line {
    display: none;
  }
  .section-right,
  .zone-meta,
  .section-count {
    white-space: normal;
    overflow-wrap: anywhere;
    flex: 1 1 100%;
  }
}

/* --- Show-more toggle --- */
.show-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #52525B;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 0;
  margin-top: 8px;
  font-family: inherit;
  transition: color 120ms;
}
.show-more-toggle:hover { color: #71717A; }

/* ============================================================
   NAV (segmented control)
   ============================================================ */
.nav {
  display: inline-flex;
  gap: 1px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 20px;
}
.nav-item {
  padding: 6px 16px;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #71717A;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 120ms ease-out;
  font-family: inherit;
  white-space: nowrap;
}
.nav-item:hover { color: #A1A1AA; background: rgba(255,255,255,0.04); }
.nav-item.active { color: #F4F4F5; background: #222228; }

/* ============================================================
   FILTER BAR
   ============================================================ */
/* Two unmistakable species (lex restyle 2026-06-16, graduated from lex page-local):
   a group LABEL is mono + uppercase + dimmest tier (a caption); a toggle PILL is
   sans + sentence-case with a real surface + border (a control). Groups separated
   by a hairline (box-shadow left — guard-safe vs border-left). Active = raised
   NEUTRAL surface (not accent); accent only on an optional .is-mine cluster.
   Covers .active + [aria-pressed] + [aria-checked] for every live emitter. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--space-2);
  column-gap: 0;
  margin-bottom: var(--space-3);
}
.filter-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0 var(--space-4);
  box-shadow: -1px 0 0 var(--border-default);
}
.filter-group:first-child { padding-left: 0; box-shadow: none; }
.filter-group-label,
.filter-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--text-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: var(--space-1);
  white-space: nowrap;
  user-select: none;
}
.filter-group-label::after { content: ":"; opacity: 0.55; }
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text-tertiary);
  background: var(--surface-input);
  border: 1px solid var(--border-subtle);
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.filter-pill:hover { color: var(--text-secondary); background: var(--surface-hover); border-color: var(--border-default); }
.filter-pill.active,
.filter-pill[aria-pressed="true"],
.filter-pill[aria-checked="true"] {
  color: var(--text-primary);
  background: var(--surface-active);
  border-color: var(--border-strong);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.filter-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.filter-pill.disabled,
.filter-pill[aria-disabled="true"] { opacity: 0.34; cursor: default; pointer-events: none; }
.filter-pill-count {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--text-quaternary);
  font-variant-numeric: tabular-nums;
}
.filter-pill.active .filter-pill-count,
.filter-pill[aria-pressed="true"] .filter-pill-count,
.filter-pill[aria-checked="true"] .filter-pill-count { color: var(--text-tertiary); }
.filter-group.is-mine .filter-pill { border-color: var(--border-strong); color: var(--text-secondary); }
.filter-group.is-mine .filter-pill:hover { border-color: var(--accent); color: var(--text-primary); background: var(--surface-hover); }
.filter-group.is-mine .filter-pill.active,
.filter-group.is-mine .filter-pill[aria-pressed="true"] { color: var(--accent-hover); background: var(--accent-dim); border-color: var(--accent); box-shadow: none; }
.filter-pill .pill-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
@media (max-width: 720px) {
  .filter-group { padding: 0; width: 100%; box-shadow: none; }
  .filter-group-label, .filter-label { width: 100%; margin-bottom: var(--space-1); }
  .filter-pill { padding: 9px 13px; min-height: 38px; }
}

/* ============================================================
   STATUS COLORS
   The ONLY chromatic colors used across all pages.
   ============================================================ */

/* Status dots */
.dot-shipped  { background: var(--status-green); }
.dot-on-track { background: var(--status-blue); }
.dot-active   { background: var(--status-blue); }
.dot-at-risk  { background: var(--status-yellow); }
.dot-future   { background: #333338; }
.dot-planned  { background: #333338; }
.dot-blocked  { background: var(--status-red); }

/* Status text */
.status-shipped  { color: var(--status-green); }
.status-on-track { color: var(--status-blue); }
.status-active   { color: var(--status-blue); }
.status-at-risk  { color: var(--status-yellow); }
.status-blocked  { color: var(--status-red); }
.status-future   { color: #52525B; }
.status-fresh    { color: var(--status-green); }
.status-stale    { color: var(--status-yellow); }
.status-very-stale { color: var(--status-red); }

/* Generic status dots (CEO) */
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-green { background: var(--status-green); }
.dot-yellow { background: var(--status-yellow); }
.dot-orange { background: var(--status-orange); }
.dot-red { background: var(--status-red); }
.dot-blue { background: var(--status-blue); }

/* ============================================================
   CARDS (base)
   ============================================================
   The standard clickable card. All dashboard cards should extend this.
   Variants: .card-lg (more padding), .card-flush (no padding).
   States: .active (purple border), .shipped (dimmed), .fading (muted).
   Category tints: set inline style for bg + border color per category.

   Usage:
     <div class="card" onclick="openTray(item)">
       <div class="card-title">Title</div>
       <div class="card-desc">Description</div>
     </div>
   ============================================================ */
.card {
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  cursor: pointer;
  transition: background 100ms, border-color 100ms;
  display: flex;
  flex-direction: column;
}
.card:hover {
  background: var(--surface-hover);
  border-color: var(--border-default);
}
.card.active {
  border-color: var(--status-purple);
  background: rgba(181,162,254,0.04);
}
.card.shipped { opacity: 0.4; }
.card.fading { opacity: 0.6; }
.card-lg { padding: 20px; }
.card-flush { padding: 0; }
.card-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.card-meta {
  font-size: var(--fs-xs);
  color: var(--text-quaternary);
  margin-top: 4px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.card-subtitle {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
  line-height: 1.4;
}
.card-body {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 12px;
}
.card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.card.interactive { cursor: pointer; }
.card.interactive:hover { transform: translateY(-1px); }
.card-desc {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  line-height: 1.5;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   STAT CARDS (dashboard KPIs)
   ============================================================ */
.stat-card {
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  flex: 1;
  min-width: 120px;
}
.stat-card-value {
  font-size: var(--fs-stat-lg);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-card-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: var(--space-1);
}

/* ============================================================
   BUTTONS  (ui-btn)
   ============================================================
   The canonical button primitive. Added 2026-08-27; before this the
   system had no shared button at all and every surface carried its own
   (.tray-submit-btn, .page-work-btn, .filter-toggle-btn,
   .global-nav-pulse-btn, .tray-copy-btn, .tray-spec-btn-*), which is why
   they drifted apart. Those one-offs are deliberately left in place for
   now — migrating them is its own reviewable change. New buttons use this.

   Variants: .ui-btn-primary (solid violet) | .ui-btn-ghost (default) |
             .ui-btn-danger | sizes .ui-btn-sm / .ui-btn-lg

   TWO RULES, both load-bearing:

   1. ONE PRIMARY PER PAGE, on the highest-intent action. Everything else
      is ghost. When every button is violet, none of them are.
      (productai-brand-color-driver Axiom 6.)

   2. THE LABEL ON A VIOLET FILL IS BLACK, at every state. The fill
      ladder is violet-300 #B5A2FE -> hover violet-450 #956FF8 -> pressed
      violet-500 #8B5CF6; black runs 9.56 / 5.91 / 4.96:1, white fails AA
      at every state. This is not a style choice. (Same driver, Axiom 6
      btn-brand and the §3.2 ink rule.)
   ============================================================ */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 7px 14px;
  min-height: 32px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}
.ui-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.ui-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ui-btn:disabled,
.ui-btn[aria-disabled="true"] { opacity: 0.34; cursor: default; pointer-events: none; }

/* --- Ghost: the default. Recessive by design — a hairline on a tonal
       fill, one step of lift on hover. No accent, so the page's accent
       budget stays free for its single primary. --- */
.ui-btn-ghost {
  background: var(--surface-input);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}
.ui-btn-ghost:hover {
  background: var(--surface-hover);
  border-color: var(--border-default);
  color: var(--text-primary);
}
.ui-btn-ghost:active { background: var(--surface-active); }

/* --- Primary: the one solid violet on the page (brand btn-brand).
       Black label at every state (see rule 2 above). Fill violet-300,
       darkening on approach: hover violet-450, pressed violet-500. --- */
.ui-btn-primary {
  background: var(--btn-brand-bg, #B5A2FE);
  border-color: var(--btn-brand-bg, #B5A2FE);
  color: var(--btn-brand-ink, #000);
  font-weight: 600;
}
.ui-btn-primary:hover {
  background: var(--btn-brand-bg-hover, #956FF8);
  border-color: var(--btn-brand-bg-hover, #956FF8);
  color: var(--btn-brand-ink, #000);
}
.ui-btn-primary:active {
  background: var(--btn-brand-bg-pressed, #8B5CF6);
  border-color: var(--btn-brand-bg-pressed, #8B5CF6);
}

/* --- Danger: destructive actions. Tinted, never solid — a solid red
       button reads as louder than the page's own primary. --- */
.ui-btn-danger {
  background: var(--status-red-muted);
  border-color: rgba(239,68,68,0.30);
  color: var(--status-red);
}
.ui-btn-danger:hover {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.45);
}
.ui-btn-danger:focus-visible { outline-color: var(--status-red); }

/* --- Sizes. Default is 32px, which matches the filter bar and the nav
       rail. sm sits with inline table controls; lg is for a standalone
       page-level CTA. --- */
.ui-btn-sm {
  padding: 5px 11px;
  min-height: 28px;
  gap: var(--space-1);
}
.ui-btn-sm svg { width: 12px; height: 12px; }
.ui-btn-lg {
  padding: 10px 18px;
  min-height: 40px;
  font-size: var(--fs-sm);
}
.ui-btn-lg svg { width: 16px; height: 16px; }

/* --- Full-width, for trays and narrow columns. --- */
.ui-btn-block { width: 100%; }

/* ============================================================
   BADGES & TAGS
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  background: rgba(255,255,255,0.04);
  color: #71717A;
}
/* Colored badge variants (CEO) */
.badge-accent { background: var(--accent-subtle); color: var(--accent-hover); } /* #8B5CF6 text misses 4.5:1 on cards; #956FF8 clears it */
.badge-green { background: var(--status-green-muted); color: var(--status-green); }
.badge-yellow { background: var(--status-yellow-muted); color: var(--status-yellow); }
.badge-orange { background: var(--status-orange-muted); color: var(--status-orange); }
.badge-red { background: var(--status-red-muted); color: var(--status-red); }
.badge-blue { background: var(--status-blue-muted); color: var(--status-blue); }
.badge-purple { background: var(--status-purple-muted); color: var(--status-purple); }

.tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  color: #71717A;
  letter-spacing: 0.01em;
}
.tag.owner { color: #A1A1AA; }

/* ============================================================
   AVATARS
   ============================================================ */
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: var(--fs-xs);
  background: rgba(255,255,255,0.06);
  color: #71717A;
}
.avatar-sm { width: 18px; height: 18px; border-radius: 4px; font-size: var(--fs-xs); }
.avatar-md { width: 32px; height: 32px; border-radius: 8px; font-size: var(--fs-xs); }
.avatar-lg { width: 56px; height: 56px; border-radius: 14px; font-size: var(--fs-2xl); }

/* Person Badge — avatar circle + display name, standard across all dashboards */
.person-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.person-badge .avatar {
  border-radius: 50%;
  border: none;
  margin: 0;
}
.person-badge-name {
  font-size: var(--fs-xs);
  color: var(--text-primary);
  white-space: nowrap;
}
.person-badge-sm .avatar { width: 18px; height: 18px; font-size: var(--fs-avatar); }
.person-badge-sm .person-badge-name { font-size: var(--fs-label); color: var(--text-tertiary); }

/* ============================================================
   PROGRESS BARS
   ============================================================ */
.progress-bar {
  width: 100%;
  height: 2px;
  background: var(--surface-hover);
  border-radius: 1px;
  overflow: hidden;
}
.progress-bar.thick { height: 3px; }
.progress-fill {
  height: 100%;
  border-radius: 1px;
  background: var(--accent);
  transition: width 0.5s ease-out;
}

/* ============================================================
   BANNERS
   ============================================================ */
.banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  font-weight: 500;
  margin-bottom: var(--space-5);
}
.banner-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.banner-healthy { background: var(--status-green-muted); border: 1px solid rgba(2,187,100,0.15); color: var(--status-green); }
.banner-degraded { background: var(--status-yellow-muted); border: 1px solid rgba(251,191,36,0.15); color: var(--status-yellow); }
.banner-critical { background: var(--status-red-muted); border: 1px solid rgba(239,68,68,0.15); color: var(--status-red); }

/* ============================================================
   STATS STRIP
   ============================================================
   Horizontal row of KPI stats. Two variants:
   - .stats-strip (inline, no background - most common)
   - .stats-strip.stats-strip-card (with card background + border)

   Usage:
     <div class="stats-strip">
       <div class="stat-item">
         <div class="stat-val">42</div>
         <div class="stat-label">Active</div>
       </div>
     </div>
   ============================================================ */
.stats-strip {
  display: flex;
  gap: 32px;
  margin-bottom: 24px;
}
.stats-strip-card {
  padding: 16px 20px;
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.stats-strip-compact { gap: 16px; margin-bottom: 16px; }
.stat-item { text-align: center; }
.stat-val {
  font-size: var(--fs-stat-lg);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.stat-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Legacy aliases */
.stats-row { display: flex; gap: 24px; padding-bottom: 16px; }
.stat-value { color: var(--text-secondary); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ============================================================
   GROUP HEADERS
   ============================================================ */
.group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 2px 0;
}
.group-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.group-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #71717A;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.group-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.04);
}

/* ============================================================
   LEGEND
   ============================================================ */
.legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 12px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  color: #52525B;
}
.legend-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

/* ============================================================
   TABLES
   ============================================================ */
.ds-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.ds-table thead th {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #333338;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ds-table tbody tr { transition: background 100ms; }
.ds-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.ds-table tbody td {
  padding: 8px 12px;
  font-size: var(--fs-xs);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  vertical-align: middle;
}
.ds-table tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   GRIDS
   ============================================================
   .grid is the standard auto-fill card grid. Override min-width
   with --grid-min (default 340px) for narrower/wider cards.
   ============================================================ */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 340px), 1fr)); gap: 14px; }
.grid-tight { gap: 8px; }
.grid-wide { --grid-min: 380px; }
.grid-narrow { --grid-min: 280px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (max-width: 900px) { .grid-wide, .grid { --grid-min: 280px; } }

/* ============================================================
   PHONE FLOOR — the mobile-responsive baseline every page inherits
   (2026-09-10, the phone pass Michael Quoc ordered: "some elements block
   other elements on the page"). Shared by the team Cortex dashboard and the
   Soma dashboard (symlinked). Three laws, all at <=640px:
     1. No sideways scroll. A table STACKS into per-row cards; a cell's
        label comes from its `data-label` (html-deliverable-driver A-18).
        Opt a genuinely tiny table out with .table-keep.
     2. Nothing hides under a fixed element: a tray or sheet is the full
        phone width and scrolls inside itself.
     3. The readability floor: no rendered text under 11px, and controls
        get a 40px hit box.
   Page CSS may extend these rules, never undo them without a reason in
   the page's own <style>.
   ============================================================ */
@media (max-width: 640px) {
  :root { --fs-2xs: 11px; --fs-mini: 11px; --fs-micro: 11px; }
  /* clip, never hidden: `overflow-x: hidden` on html makes body its own scroll container and
     position:sticky (the global nav) scrolls away with the page. `clip` clips without a scrollport. */
  html, body { overflow-x: clip; }
  img, svg, video, canvas, iframe { max-width: 100%; }
  pre, code { overflow-wrap: anywhere; word-break: break-word; }
  pre { white-space: pre-wrap; }
  /* 1. tables stack — only when the page labels its cells (data-label on td); every selector sits in
     :where() so a page's own single-class phone rule always wins. A table with no labels keeps its
     header and scrolls inside its own box (the law's last resort — the page never scrolls sideways). */
  :where(table:not(.table-keep):has(td[data-label])),
  :where(table:not(.table-keep):has(td[data-label])) :where(thead, tbody, tfoot, tr, th, td) { display: block; width: auto; max-width: 100%; }
  :where(table:not(.table-keep):has(td[data-label])) thead { display: none; }
  :where(table:not(.table-keep):has(td[data-label])) tbody tr {
    padding: 10px 12px; margin-bottom: 8px;
    background: var(--surface-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  }
  :where(table:not(.table-keep):has(td[data-label])) tbody td { padding: 3px 0; border-bottom: none; white-space: normal; text-align: left; }
  :where(table:not(.table-keep):has(td[data-label])) tbody td:empty { display: none; }
  :where(table:not(.table-keep):has(td[data-label])) tbody td[data-label]::before {
    content: attr(data-label); display: block;
    font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-quaternary); margin-bottom: 1px;
  }
  :where(table:not(.table-keep):not(:has(td[data-label]))) { display: block; max-width: 100%; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }   /* !important only here: a page's own `overflow:hidden` on the table would clip the header instead of letting it scroll */
  /* 2. fixed panels fit the phone */
  .tray, .cortex-tray, .tray-panel { max-width: 100vw; width: 100vw; }
  /* 3. the floor — real controls get a 40px hit box; native checkboxes/radios keep their size */
  button, .btn, [role="button"] { min-height: 40px; }
  .ui-pill, .pill, .chip, .tag { min-height: 0; }   /* chips are labels, not controls, unless they carry an onclick */
  .ui-pill[onclick], .pill[onclick], .chip[onclick], .tag[onclick], button.ui-pill, button.pill, button.chip, button.tag { min-height: 40px; }
  /* the nav chrome every page inherits: brand link, Start pill, avatar button, sub-nav tabs */
  .global-nav-brand { min-height: 44px; }
  .global-nav-start { min-height: 40px; display: inline-flex; align-items: center; }
  .global-nav-start span { font-size: 11px; }
  .global-nav-user { width: 40px; height: 40px; }
  .ui-subnav, .tab-group { flex-wrap: wrap; }
  .ui-stat-strip { flex-wrap: wrap; }
  .ui-stat-strip .ui-stat { min-width: calc(50% - 4px); }   /* the base .ui-stat{min-width:0} below beat the older wrap rule; specificity settles it */
  .person-pill, a.person-pill { min-height: 40px; display: inline-flex; align-items: center; }
  .ui-subnav-item { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ============================================================
   TOOLTIP
   ============================================================ */
.tooltip {
  position: fixed;
  background: #18181B;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: var(--fs-xs);
  color: #F4F4F5;
  max-width: 360px;
  z-index: 200;
  pointer-events: none;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
}
.tooltip .tt-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #52525B;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 8px;
}
.tooltip .tt-label:first-child { margin-top: 0; }
.tooltip .tt-value { color: #A1A1AA; }

/* ============================================================
   BACK LINK
   ============================================================ */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #52525B;
  text-decoration: none;
  margin-bottom: 24px;
  transition: color 120ms;
}
.back-link:hover { color: #71717A; }
.back-link svg { width: 14px; height: 14px; }

/* ============================================================
   LOADING / ERROR / UTILITY
   ============================================================ */
.loading { text-align: center; padding: 80px 32px; color: var(--text-tertiary); font-size: var(--fs-sm); }
.error { text-align: center; padding: 80px 32px; color: var(--status-red); font-size: var(--fs-sm); }
.hidden { display: none !important; }
.empty-state { font-size: var(--fs-xs); color: var(--text-quaternary); padding: var(--space-4); text-align: center; font-style: italic; }

.cortex-loading {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:160px;
  padding:28px 20px;
  color:var(--text-tertiary);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:0.02em;
}
.cortex-loading.compact { min-height:96px; padding:18px 14px; }
.cortex-loading-card {
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  background:var(--surface-primary);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.02);
}
.cortex-loading-spinner {
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid var(--border-default);
  border-top-color:var(--status-blue);
  animation:cortex-loading-spin 760ms linear infinite;
  flex-shrink:0;
}
@keyframes cortex-loading-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cortex-loading-spinner { animation:none !important; }
}
.mono { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-tertiary); }
.text-green { color: var(--status-green); }
.text-yellow { color: var(--status-yellow); }
.text-red { color: var(--status-red); }

/* ============================================================
   FOOTER
   ============================================================ */
.page-footer {
  text-align: center;
  padding: var(--space-4) 0 var(--space-6);
  font-size: var(--fs-xs);
  color: var(--text-quaternary);
}

/* ============================================================
   MARKDOWN CONTENT (used by UI.renderMd in components.js)
   ============================================================ */
.md-content { font-size: var(--fs-sm); line-height: 1.7; color: #A1A1AA; }
.md-content strong { color: #F4F4F5; font-weight: 600; }
.md-content em { color: #71717A; }
.md-content table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: var(--fs-xs); }
.md-content table td, .md-content table th { padding: 6px 10px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.04); color: #A1A1AA; vertical-align: top; }
.md-content table th { font-weight: 600; color: #71717A; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.md-content table tr:hover td { background: rgba(255,255,255,0.015); }
.md-h1 { font-size: var(--fs-2xl); font-weight: 600; color: var(--text-primary); margin: 16px 0 8px 0; line-height: 1.3; }
.md-h2 { font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); margin: 14px 0 6px 0; line-height: 1.35; }
.md-h3 { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); margin: 12px 0 4px 0; line-height: 1.4; }
.md-bullet { padding-left: 20px; position: relative; margin: 3px 0; }
.md-bullet::before { content: ''; position: absolute; left: 6px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: #333338; }
.md-numlist { padding-left: 20px; margin: 3px 0; color: #A1A1AA; }
.md-gap { height: 10px; }
.md-checkbox { padding-left: 20px; position: relative; margin: 3px 0; }
.md-checkbox::before { content: ''; position: absolute; left: 2px; top: 3px; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.12); }
.md-checkbox.checked::before { background: rgba(2,187,100,0.15); border-color: rgba(2,187,100,0.3); }
.md-content blockquote { margin: 8px 0; padding: 8px 16px; border-left: 2px solid rgba(255,255,255,0.08); color: #71717A; font-style: italic; }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 1024px) {
  .app { padding: 24px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .app { padding: 16px; }
  .page-title { font-size: var(--fs-stat); }
  .page-header { flex-direction: column; gap: 8px; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .ui-cadence { flex-wrap: wrap; }
  .ui-cadence-week { min-width: calc(33% - 3px); }
  .ui-mp-grid { grid-template-columns: 1fr; }
  .ui-prio-grid { grid-template-columns: 1fr; }
  .ui-pipe-item { grid-template-columns: 70px 20px 1fr; }
  .ui-rel-grid { grid-template-columns: 1fr; }
  .ui-stat-strip { flex-wrap: wrap; }
  .ui-stat { min-width: calc(50% - 4px); }
  .ui-kpi { min-height: auto; }
  .ui-avatar { width: 52px; height: 52px; font-size: var(--fs-xl); }
}
/* ============================================================
   ============================================================
   UI COMPONENT LIBRARY (used by components.js)
   All classes prefixed with ui- to distinguish from legacy page styles.
   ============================================================
   ============================================================ */

/* --- STAT STRIP --- */
.ui-stat-strip {
  display: flex; gap: 8px;
  padding: 24px 0;
  margin-bottom: 36px;
}
.ui-stat {
  flex: 1;
  background: var(--bg-raised);
  border-radius: 6px;
  padding: 16px 18px;
  min-width: 0;
}
.ui-stat-value {
  font-size: var(--fs-stat); font-weight: 600; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2; margin-bottom: 4px;
}
.ui-stat-label {
  font-size: var(--fs-label); font-weight: 500; color: var(--text-quaternary);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ui-stat-sub {
  font-size: var(--fs-label); color: var(--text-tertiary); margin-top: 3px;
}

/* --- KPI CARD --- */
.ui-kpi {
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 24px;
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 140px;
}
.ui-kpi-label {
  font-size: var(--fs-label); font-weight: 600; color: var(--text-quaternary);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.ui-kpi-value {
  font-size: var(--fs-display); font-weight: 600; color: var(--text-primary);
  letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ui-kpi-suffix {
  font-size: var(--fs-2xl); color: var(--text-quaternary); font-weight: 400;
}
.ui-kpi-detail {
  font-size: var(--fs-xs); color: var(--text-tertiary); line-height: 1.4;
  margin-top: 6px;
}
.ui-kpi-bar {
  width: 100%; height: 3px; margin-top: 12px;
  background: var(--surface-hover); border-radius: 2px;
  overflow: hidden;
}
.ui-kpi-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  transition: width 0.6s ease-out;
}

/* --- AVATAR --- */
.ui-avatar {
  width: 64px; height: 64px; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-stat); font-weight: 600; color: var(--text-primary);
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  position: relative; overflow: hidden;
}
.ui-avatar img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* --- PILLS / BADGES --- */
.ui-badge-row {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.ui-pill {
  display: inline-flex; align-items: center;
  font-size: var(--fs-xs); font-weight: 500;
  padding: 3px 10px; border-radius: 6px;
  letter-spacing: 0.01em;
}
.ui-pill.infra   { background: rgba(56,189,248,0.10);  color: var(--status-blue); }
.ui-pill.intel   { background: rgba(181,162,254,0.10); color: var(--status-purple); }
.ui-pill.agent   { background: rgba(251,191,36,0.10);  color: var(--status-yellow); }
.ui-pill.revenue { background: rgba(2,187,100,0.10);  color: var(--status-green); }
.ui-pill.brand   { background: rgba(244,114,182,0.10); color: var(--pillar-brand); }
.ui-pill.mission {
  background: var(--accent-dim); color: var(--accent-hover);
  font-weight: 600; letter-spacing: 0.03em;
}

/* --- DIRECTIVE / ALERT BANNER --- */
.ui-directive {
  padding: 16px 20px;
  border-radius: 6px;
  margin-bottom: 24px;
  display: flex; gap: 12px; align-items: flex-start;
}
.ui-directive.warn { background: rgba(251,191,36,0.04); border: 1px solid rgba(251,191,36,0.12); }
.ui-directive.crit { background: rgba(239,68,68,0.04); border: 1px solid rgba(239,68,68,0.12); }
.ui-directive.clear { background: rgba(2,187,100,0.04); border: 1px solid rgba(2,187,100,0.12); }
.ui-directive-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
  font-weight: 600; font-size: var(--fs-sm);
}
.ui-directive.warn .ui-directive-icon { background: rgba(251,191,36,0.10); color: var(--status-yellow); }
.ui-directive.crit .ui-directive-icon { background: rgba(239,68,68,0.10); color: var(--status-red); }
.ui-directive.clear .ui-directive-icon { background: rgba(2,187,100,0.10); color: var(--status-green); }
.ui-directive-body { flex: 1; min-width: 0; }
.ui-directive-label {
  font-size: var(--fs-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 4px; opacity: 0.8;
}
.ui-directive.warn .ui-directive-label { color: var(--status-yellow); }
.ui-directive.crit .ui-directive-label { color: var(--status-red); }
.ui-directive.clear .ui-directive-label { color: var(--status-green); }
.ui-directive-text {
  font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6;
}

/* --- MANIFEST HEALTH WARNINGS --- */
.ui-warnings {
  border-radius: 6px;
  margin-bottom: 28px;
  overflow: hidden;
}
.ui-warnings.crit {
  background: rgba(239,68,68,0.03);
  border: 1px solid rgba(239,68,68,0.12);
}
.ui-warnings.warn {
  background: rgba(251,191,36,0.03);
  border: 1px solid rgba(251,191,36,0.12);
}
.ui-warnings.info {
  background: rgba(56,189,248,0.03);
  border: 1px solid rgba(56,189,248,0.12);
}
.ui-warnings-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.ui-warnings-icon {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ui-warnings-title {
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary);
  letter-spacing: -0.01em;
}
.ui-warnings.crit .ui-warnings-title { color: var(--status-red); }
.ui-warnings.warn .ui-warnings-title { color: var(--status-yellow); }
.ui-warnings.info .ui-warnings-title { color: var(--status-blue); }
.ui-warnings-list {
  padding: 8px 16px 12px;
}
.ui-warning-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 0;
}
.ui-warning-dot {
  width: 6px; height: 6px; border-radius: 50%;
  margin-top: 6px; flex-shrink: 0;
}
.ui-warning-item.crit .ui-warning-dot { background: var(--status-red); }
.ui-warning-item.warn .ui-warning-dot { background: var(--status-yellow); }
.ui-warning-item.info .ui-warning-dot { background: var(--status-blue); }
.ui-warning-body {
  font-size: var(--fs-xs); line-height: 1.5; min-width: 0;
}
.ui-warning-label {
  font-weight: 600;
}
.ui-warning-item.crit .ui-warning-label { color: var(--status-red); }
.ui-warning-item.warn .ui-warning-label { color: var(--status-yellow); }
.ui-warning-item.info .ui-warning-label { color: var(--status-blue); }
.ui-warning-text {
  color: var(--text-tertiary);
}

/* --- ROLE ALIGNMENT --- */

/* Option A: Role Definition Block */
.ui-role-def {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  overflow: hidden;
}
.ui-role-def-row {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.ui-role-def-row:last-child { border-bottom: none; }
.ui-role-def-row.scope {
  background: rgba(251,191,36,0.02);
}
.ui-role-def-label {
  font-size: var(--fs-label); font-weight: 600; color: var(--text-quaternary);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.ui-role-def-row.scope .ui-role-def-label { color: var(--status-yellow); opacity: 0.6; }
.ui-role-def-value {
  font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5;
}

/* Role Alignment Analysis (rebuilt Option A) */
.ui-role-alignment {
  display: flex; flex-direction: column; gap: 16px;
}
.ui-alignment-identity {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  overflow: hidden;
}
.ui-alignment-id-row {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex; gap: 12px; align-items: baseline;
}
.ui-alignment-id-row:last-child { border-bottom: none; }
.ui-alignment-id-label {
  font-size: var(--fs-label); font-weight: 600; color: var(--text-quaternary);
  text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap;
  min-width: 100px;
}
.ui-alignment-id-value {
  font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.4;
}

/* Distribution bar */
.ui-alignment-bar-row {
  display: flex; gap: 12px; align-items: flex-start;
}
.ui-alignment-bar-label {
  font-size: var(--fs-label); font-weight: 600; color: var(--text-quaternary);
  text-transform: uppercase; letter-spacing: 0.04em;
  min-width: 100px; padding-top: 4px;
}
.ui-alignment-bar-wrap {
  flex: 1; min-width: 0;
}
.ui-alignment-bar {
  display: flex;
  height: 20px;
  border-radius: 2px;
  overflow: hidden;
  gap: 1px;
}
.ui-alignment-seg {
  min-width: 3px;
  transition: width 0.5s ease-out;
  opacity: 0.85;
}
.ui-alignment-seg:first-child { border-radius: 2px 0 0 2px; }
.ui-alignment-seg:last-child { border-radius: 0 2px 2px 0; }
.ui-alignment-seg:only-child { border-radius: 2px; }
.ui-alignment-bar-legend {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 6px;
}
.ui-alignment-bar-key {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-label); color: var(--text-tertiary); font-weight: 500;
  white-space: nowrap;
}

/* Alignment context (compact identity reference) */
.ui-alignment-context {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 16px;
}
.ui-alignment-context-row {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex; gap: 12px; align-items: baseline;
}
.ui-alignment-context-row:last-child { border-bottom: none; }
.ui-alignment-context-label {
  font-size: var(--fs-label); font-weight: 600; color: var(--text-quaternary);
  text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap; min-width: 100px;
}
.ui-alignment-context-value {
  font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.4;
}

/* Alignment findings */
.ui-alignment-findings {
  display: flex; flex-direction: column; gap: 6px;
}
.ui-finding {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 14px;
  border-radius: 6px;
  border-left: 2px solid transparent;
}
.ui-finding.positive {
  background: rgba(2,187,100,0.03);
  border-left-color: rgba(2,187,100,0.30);
}
.ui-finding.concern {
  background: rgba(251,191,36,0.03);
  border-left-color: rgba(251,191,36,0.30);
}
.ui-finding.gap {
  background: rgba(239,68,68,0.03);
  border-left-color: rgba(239,68,68,0.30);
}
.ui-finding-icon {
  flex-shrink: 0; padding-top: 1px;
}
.ui-finding-text {
  font-size: var(--fs-sm); line-height: 1.5; color: var(--text-secondary);
}

/* Alignment summary + scores */
.ui-alignment-summary {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 14px 16px;
}
.ui-alignment-summary-label {
  font-size: var(--fs-label); font-weight: 600; color: var(--text-quaternary);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.ui-alignment-scores {
  display: flex; gap: 12px;
}
.ui-alignment-score {
  flex: 1;
  padding: 8px 12px;
  border-radius: 6px;
  text-align: center;
}
.ui-alignment-score.good     { background: rgba(2,187,100,0.06); border: 1px solid rgba(2,187,100,0.15); }
.ui-alignment-score.moderate { background: rgba(251,191,36,0.06); border: 1px solid rgba(251,191,36,0.15); }
.ui-alignment-score.low      { background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.15); }
.ui-alignment-score-value {
  font-size: var(--fs-3xl); font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.ui-alignment-score.good .ui-alignment-score-value     { color: var(--status-green); }
.ui-alignment-score.moderate .ui-alignment-score-value  { color: var(--status-yellow); }
.ui-alignment-score.low .ui-alignment-score-value       { color: var(--status-red); }
.ui-alignment-score-label {
  font-size: var(--fs-label); font-weight: 500; color: var(--text-quaternary);
  margin-top: 2px;
}

/* Bar legend expected/muted states */
.ui-alignment-bar-key.expected { color: var(--text-primary); font-weight: 600; }
.ui-alignment-bar-key.muted { color: var(--surface-muted); }

/* Expected segment indicator */
.ui-alignment-seg.expected {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}

/* Option B: Reality Interface Scorecard */
.ui-reality-scorecard {
  display: flex; flex-direction: column;
  gap: 2px;
}
.ui-reality-row {
  display: flex; gap: 12px;
  padding: 12px 14px;
  border-radius: 6px;
  align-items: flex-start;
  transition: background 120ms;
}
.ui-reality-row:hover { background: rgba(255,255,255,0.02); }
.ui-reality-row.no-evidence {
  background: rgba(255,255,255,0.01);
}
.ui-reality-row.has-evidence {
  background: rgba(56,189,248,0.03);
  border-left: 2px solid rgba(56,189,248,0.20);
}
.ui-reality-row.has-proof {
  background: rgba(2,187,100,0.03);
  border-left: 2px solid rgba(2,187,100,0.20);
}
.ui-reality-indicator {
  flex-shrink: 0; padding-top: 2px;
  width: 16px; display: flex; align-items: flex-start; justify-content: center;
}
.ui-reality-content { flex: 1; min-width: 0; }
.ui-reality-activity {
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary);
  line-height: 1.4; margin-bottom: 2px;
}
.ui-reality-outcome {
  font-size: var(--fs-xs); color: var(--text-tertiary); line-height: 1.4;
}
.ui-reality-evidence {
  display: flex; gap: 6px; margin-top: 6px;
}
.ui-reality-proof {
  font-size: var(--fs-label); color: var(--status-green); line-height: 1.4;
  margin-top: 4px; opacity: 0.8;
}

/* --- STRATEGIC IMPACT --- */
.ui-impact-empty {
  font-size: var(--fs-xs); color: var(--surface-muted); font-style: italic; padding: 8px 0;
}

/* Pillar dot (inline indicator) */
.ui-pillar-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Pillar tag (labeled pill) */
.ui-pillar-tag {
  display: inline-flex; align-items: center;
  font-size: var(--fs-label); font-weight: 600;
  padding: 2px 7px; border-radius: 2px;
  letter-spacing: 0.02em;
  margin-right: 6px;
  white-space: nowrap;
  vertical-align: middle;
  flex-shrink: 0;
}
.ui-pillar-tag.infra   { background: rgba(56,189,248,0.10);  color: var(--status-blue); }
.ui-pillar-tag.intel   { background: rgba(181,162,254,0.10); color: var(--status-purple); }
.ui-pillar-tag.agent   { background: rgba(251,191,36,0.10);  color: var(--status-yellow); }
.ui-pillar-tag.revenue { background: rgba(2,187,100,0.10);  color: var(--status-green); }
.ui-pillar-tag.brand   { background: rgba(244,114,182,0.10); color: var(--pillar-brand); }

/* Master Plan explainer */
.ui-mp-explainer {
  font-size: var(--fs-xs); color: var(--text-quaternary); line-height: 1.5;
  margin-bottom: 12px;
}

/* Master Plan legend */
.ui-mp-legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 8px 0;
}
.ui-mp-legend-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-label); color: var(--text-tertiary); font-weight: 500;
}
.ui-mp-legend-dot {
  width: 7px; height: 7px; border-radius: 50%;
}
.ui-mp-legend-dot.shipped  { background: var(--status-green); }
.ui-mp-legend-dot.on-track { background: var(--status-blue); }
.ui-mp-legend-dot.at-risk  { background: var(--status-yellow); }
.ui-mp-legend-dot.blocked  { background: var(--status-red); }
.ui-mp-legend-dot.planned  { background: var(--text-quaternary); }

/* Master Plan cards */
.ui-mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}
.ui-mp-card {
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 14px 16px;
  border-left: 3px solid var(--surface-muted);
  transition: border-color 120ms;
}
.ui-mp-card.shipped  { border-left-color: var(--status-green); opacity: 0.55; }
.ui-mp-card.on-track { border-left-color: var(--status-blue); }
.ui-mp-card.past-due { border-left-color: var(--status-yellow); background: rgba(251,191,36,0.03); }
.ui-mp-card.at-risk  { border-left-color: var(--status-yellow); }
.ui-mp-card.blocked  { border-left-color: var(--status-red); }
.ui-mp-card.planned  { border-left-color: var(--text-quaternary); }
.ui-mp-card-header {
  display: flex; align-items: flex-start; gap: 8px;
}
.ui-mp-dot {
  width: 7px; height: 7px; border-radius: 50%;
  margin-top: 4px; flex-shrink: 0;
}
.ui-mp-dot.shipped  { background: var(--status-green); }
.ui-mp-dot.on-track { background: var(--status-blue); }
.ui-mp-dot.past-due { background: var(--status-yellow); }
.ui-mp-dot.at-risk  { background: var(--status-yellow); }
.ui-mp-dot.blocked  { background: var(--status-red); }
.ui-mp-dot.planned  { background: var(--text-quaternary); }
.ui-mp-name {
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary);
  line-height: 1.4;
}
.ui-mp-card.shipped .ui-mp-name {
  text-decoration: line-through;
  text-decoration-color: rgba(2,187,100,0.3);
  color: var(--text-tertiary);
}
.ui-mp-meta {
  font-size: var(--fs-label); color: var(--text-quaternary); margin-top: 4px;
  padding-left: 15px;
}
.ui-mp-status-label {
  font-weight: 600; letter-spacing: 0.02em;
}
.ui-mp-status-label.shipped     { color: var(--status-green); }
.ui-mp-status-label.on-track    { color: var(--status-blue); }
.ui-mp-status-label.past-due    { color: var(--status-yellow); }
.ui-mp-status-label.at-risk     { color: var(--status-yellow); }
.ui-mp-status-label.blocked     { color: var(--status-red); }
.ui-mp-status-label.no-evidence { color: var(--status-red); }
.ui-mp-status-label.planned     { color: var(--text-quaternary); }

.ui-mp-legend-dot.past-due    { background: var(--status-yellow); }
.ui-mp-legend-dot.no-evidence { background: var(--status-red); }

.ui-mp-card.no-evidence {
  border-left-color: var(--status-red);
  background: rgba(239,68,68,0.03);
}
.ui-mp-dot.no-evidence { background: var(--status-red); }

/* Evidence row */
.ui-mp-evidence {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 6px; padding-left: 15px;
}
.ui-mp-ev {
  font-size: var(--fs-label); font-weight: 500;
  padding: 1px 6px; border-radius: 3px;
}
.ui-mp-ev.shipped {
  color: var(--status-green); background: rgba(2,187,100,0.10);
}
.ui-mp-ev.pipeline {
  color: var(--status-blue); background: rgba(56,189,248,0.10);
}
.ui-mp-ev.none {
  color: var(--status-red); background: rgba(239,68,68,0.06);
  font-style: italic;
}

/* Weekly cadence strip */
.ui-cadence {
  display: flex; gap: 4px;
}
.ui-cadence-week {
  flex: 1;
  background: var(--bg-raised);
  border-radius: 6px;
  padding: 10px 8px;
  text-align: center;
  min-width: 0;
  border: 1px solid transparent;
  transition: border-color 120ms;
}
.ui-cadence-week.active {
  border-color: rgba(2,187,100,0.12);
  background: rgba(2,187,100,0.03);
}
.ui-cadence-week.hot {
  border-color: rgba(2,187,100,0.20);
  background: rgba(2,187,100,0.05);
}
.ui-cadence-week.empty {
  border-color: rgba(251,191,36,0.12);
  background: rgba(251,191,36,0.03);
}
.ui-cadence-week.current {
  border-color: rgba(255,255,255,0.06);
}
.ui-cadence-label {
  font-size: var(--fs-label); font-weight: 600; color: var(--text-quaternary);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.ui-cadence-count {
  font-size: var(--fs-2xl); font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: var(--surface-muted);
}
.ui-cadence-week.active .ui-cadence-count { color: var(--status-green); }
.ui-cadence-week.hot .ui-cadence-count { color: var(--status-green); }
.ui-cadence-week.empty .ui-cadence-count { color: var(--status-yellow); }
.ui-cadence-items {
  margin-top: 6px; text-align: left;
}
.ui-cadence-item {
  font-size: var(--fs-label); color: var(--text-quaternary); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 1px 0;
}

/* --- PRIORITY CARDS --- */
.ui-prio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}
.ui-prio-card {
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 14px 16px;
  border-top: 2px solid transparent;
}
.ui-prio-card.p0 { border-top-color: var(--status-red); }
.ui-prio-card.p1 { border-top-color: var(--status-yellow); }
.ui-prio-card.p2 { border-top-color: var(--status-blue); }
.ui-prio-card.p3 { border-top-color: var(--text-tertiary); }
.ui-prio-label {
  font-size: var(--fs-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.ui-prio-card.p0 .ui-prio-label { color: var(--status-red); }
.ui-prio-card.p1 .ui-prio-label { color: var(--status-yellow); }
.ui-prio-card.p2 .ui-prio-label { color: var(--status-blue); }
.ui-prio-card.p3 .ui-prio-label { color: var(--text-tertiary); }
.ui-prio-text {
  font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5;
}

/* --- PIPELINE TIMELINE --- */
.ui-pipeline {
  display: flex; flex-direction: column;
}
.ui-pipe-item {
  display: grid;
  grid-template-columns: 80px 20px 1fr;
  gap: 0 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 2px;
  margin-bottom: 2px;
  transition: background 120ms;
}
.ui-pipe-item:hover { background: rgba(255,255,255,0.02); }
.ui-pipe-item.overdue { background: rgba(251,191,36,0.03); }
.ui-pipe-date {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-tertiary);
  text-align: right; padding-top: 1px;
  font-variant-numeric: tabular-nums;
}
.ui-pipe-dot-col {
  display: flex; flex-direction: column; align-items: center;
  position: relative; padding-top: 4px;
}
.ui-pipe-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0; position: relative; z-index: 2;
}
.ui-pipe-dot.done        { background: var(--status-green); }
.ui-pipe-dot.in-progress { background: var(--status-blue); }
.ui-pipe-dot.planned     { background: var(--surface-muted); border: 2px solid var(--text-quaternary); box-sizing: border-box; }
.ui-pipe-dot.failed      { background: var(--status-red); }
.ui-pipe-line {
  width: 1px; flex: 1;
  background: rgba(255,255,255,0.06);
  margin-top: 4px;
}
.ui-pipe-name {
  font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.4;
}
.ui-pipe-name.done   { color: var(--text-tertiary); text-decoration: line-through; text-decoration-color: rgba(113,113,122,0.4); }
.ui-pipe-name.failed { color: var(--text-tertiary); text-decoration: line-through; text-decoration-color: rgba(239,68,68,0.4); }
.ui-pipe-name.overdue { color: var(--status-yellow); }
.ui-pipe-dot.overdue { background: var(--status-yellow); border: none; }
.ui-pipe-item.overdue .ui-pipe-date { color: var(--status-yellow); }
.ui-pipe-overdue-tag {
  font-size: var(--fs-2xs); font-weight: 600; color: var(--status-yellow);
  text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--status-yellow-muted);
  padding: 2px 6px; border-radius: 2px;
  margin-left: 6px;
}

/* --- SHIPPED LIST --- */
.ui-shipped {
  display: flex; flex-direction: column;
}
.ui-ship-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 0 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.ui-ship-item:last-child { border-bottom: none; }
.ui-ship-date {
  font-size: var(--fs-xs); font-weight: 500; color: var(--status-green);
  text-align: right; padding-top: 1px;
  font-variant-numeric: tabular-nums; opacity: 0.8;
}
.ui-ship-name {
  font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.4;
}
.ui-ship-impact {
  font-size: var(--fs-xs); color: var(--text-quaternary); line-height: 1.4;
  margin-top: 3px;
}

/* --- RELATIONSHIP CARDS --- */
.ui-rel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.ui-rel-card {
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 14px 16px;
  transition: border-color 120ms;
}
.ui-rel-card:hover { border-color: var(--border-strong); }
.ui-rel-name {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary);
  margin-bottom: 2px;
}
.ui-rel-context {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-tertiary);
  margin-bottom: 6px;
}
.ui-rel-purpose {
  font-size: var(--fs-xs); color: var(--text-quaternary); line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- ACCORDION --- */
.ui-accordion {
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 12px;
}
.ui-acc-item {
  border-bottom: 1px solid var(--border-subtle);
}
.ui-acc-item:last-child { border-bottom: none; }
.ui-acc-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  cursor: pointer; background: transparent;
  border: none; width: 100%;
  font-family: inherit; text-align: left;
  transition: background 120ms;
}
.ui-acc-header:hover { background: rgba(255,255,255,0.02); }
.ui-acc-arrow {
  font-size: var(--fs-label); color: var(--surface-muted);
  transition: transform 200ms;
  flex-shrink: 0; width: 16px; text-align: center;
}
.ui-acc-item.open .ui-acc-arrow { transform: rotate(90deg); }
.ui-acc-label {
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary);
  flex: 1;
}
.ui-acc-num {
  font-size: var(--fs-label); font-weight: 500; color: var(--surface-muted);
  font-variant-numeric: tabular-nums;
}
.ui-acc-body {
  display: none;
  padding: 0 16px 16px 42px;
}
.ui-acc-item.open .ui-acc-body { display: block; }

/* --- WEEK NUMBER --- */
.ui-week-number {
  font-size: var(--fs-xs); color: var(--text-tertiary); line-height: 1.5;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--bg-raised);
  border-radius: 2px;
}
.ui-week-number strong { color: var(--text-secondary); font-weight: 600; }

/* --- MARKDOWN CONTENT --- */
.md-content {
  font-size: var(--fs-sm); line-height: 1.7; color: var(--text-secondary);
}
.md-content strong { color: var(--text-primary); font-weight: 600; }
.md-content em { color: var(--text-tertiary); }
.md-content table {
  width: 100%; border-collapse: collapse;
  margin: 12px 0; font-size: var(--fs-xs);
}
.md-content table td,
.md-content table th {
  padding: 6px 10px; text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary); vertical-align: top;
}
.md-content table th {
  font-weight: 600; color: var(--text-tertiary);
  font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.md-content table tr:hover td { background: rgba(255,255,255,0.015); }
.md-bullet {
  padding-left: 20px; position: relative; margin: 3px 0;
}
.md-bullet::before {
  content: '';
  position: absolute; left: 6px; top: 8px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--surface-muted);
}
.md-numlist {
  padding-left: 20px; margin: 3px 0; color: var(--text-secondary);
}
.md-gap { height: 10px; }
.md-checkbox {
  padding-left: 20px; position: relative; margin: 3px 0;
}
.md-checkbox::before {
  content: '';
  position: absolute; left: 2px; top: 3px;
  width: 12px; height: 12px; border-radius: 3px;
  border: 1px solid var(--border-strong);
}
.md-checkbox.checked::before {
  background: rgba(2,187,100,0.15);
  border-color: rgba(2,187,100,0.3);
}
.md-content blockquote {
  margin: 8px 0; padding: 8px 16px;
  border-left: 2px solid rgba(255,255,255,0.08);
  color: var(--text-tertiary); font-style: italic;
}

/* --- SEARCH INPUT --- */
.ui-search-wrap { position: relative; }
.ui-search-wrap .ui-search-icon {
  position: absolute; left: 12px; top: 0; bottom: 0;
  display: flex; align-items: center;
  color: var(--text-quaternary); pointer-events: none;
}
.ui-search-wrap .ui-search-icon svg { display: block; }
.ui-search {
  width: 100%;
  padding: 10px 14px 10px 36px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-family: var(--font-sans);
  outline: none;
  transition: border-color 100ms;
}
.ui-search:focus { border-color: var(--accent); }
.ui-search::placeholder { color: var(--text-quaternary); }

/* ── Bar Chart ── */
.ui-bar-chart { display: flex; align-items: flex-end; gap: 3px; }
.ui-bar-chart-bar {
  flex: 1; border-radius: 3px 3px 0 0; min-height: 2px;
  position: relative; cursor: default;
  transition: opacity 150ms; opacity: 0.75;
}
.ui-bar-chart-bar:hover { opacity: 1; }
.ui-bar-chart-bar .ui-bar-tip {
  display: none; position: absolute;
  bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  background: var(--bg-overlay); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 3px 8px;
  font-size: var(--fs-label); color: var(--text-secondary);
  white-space: nowrap; z-index: 10; pointer-events: none;
}
.ui-bar-chart-bar:hover .ui-bar-tip { display: block; }
.ui-bar-chart-empty {
  flex: 1; height: 3px; border-radius: 1px;
  background: var(--border-subtle); opacity: 0.5;
  align-self: flex-end;
}
.ui-bar-chart-labels { display: flex; justify-content: space-between; margin-top: 4px; }
.ui-bar-chart-label { font-size: var(--fs-label); color: var(--text-quaternary); }

/* ── Date Badge ── */
.ui-date-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-label); font-weight: 600;
  padding: 2px 8px; border-radius: 2px; white-space: nowrap;
}
.ui-date-badge.overdue { background: var(--status-red-muted); color: var(--status-red); }
.ui-date-badge.soon { background: var(--status-yellow-muted); color: var(--status-yellow); }
.ui-date-badge.ok { color: var(--text-tertiary); }
.ui-date-badge.none { color: var(--text-quaternary); font-weight: 500; }


/* ── Scrollbars — dark-theme conformance (global) ─────────────────────────
   Every overflow container previously fell back to the platform's LIGHT
   scrollbar on the dark theme (first reported on vectors.html .vec-sidebar,
   Wave-0 preview feedback 2026-06-11). Token-only treatment; thin + quiet. */
* { scrollbar-width: thin; scrollbar-color: var(--surface-muted) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--surface-muted);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: content-box; }