/* ===== bundle: fonts @import (must be first — CSS spec requires @import precede all other rules) ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;450;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ===== styles/00-tokens.css ===== */
/* ============================================================
 * APEX SALES OS · DESIGN TOKENS · CANONICAL
 *
 * Lifted from design-mockups/01-pitch-tool.html lines 11-66.
 * Stripe-inspired. Inter Tight + JetBrains Mono. Purple primary.
 *
 * NEVER hardcode colors / spacings / shadows elsewhere — use
 * these variables. Theme is set via html[data-theme="light|dark"]
 * attribute (default: dark).
 *
 * Owner: Worker r1-001 (foundation-css). Do not modify outside this file.
 * ============================================================ */

:root{
  --bg:#ffffff; --bg-soft:#fafbfc; --bg-tint:#f7f8fa; --bg-warm:#fdfcfb; --bg-surface:#f0f1f5;
  --surface:#ffffff; --hover:#f6f7f9; --border:#e6e8ec; --border-strong:#d6d9df;
  --border-focus:#635bff;
  --text:#1a1f36; --text-soft:#3c4257; --text-muted:#697386; --text-faint:#8792a2;
  --primary:#635bff; --primary-hover:#5851e6; --primary-soft:#f5f4ff;
  --topbar-bg:rgba(255,255,255,.85);
  --modal-scrim:rgba(26,31,54,.45);
  --drawer-scrim:rgba(26,31,54,.32);
  --success:#4f46e5; --success-bg:#eeecff;
  --warning:#6b7280; --warning-bg:#f4f5f7;
  --danger:#1a1f36; --danger-bg:#ecedf0;
  --info:#635bff; --info-bg:#f5f4ff;
  --status-done:#4f46e5; --status-done-bg:#eeecff; --status-done-fg:#3b34a8; --status-done-bd:#d6d2ff;
  --status-working:#635bff; --status-working-bg:#f5f4ff; --status-working-fg:#4f46e5; --status-working-bd:#e0deff;
  --status-stuck:#1a1f36; --status-stuck-bg:#ecedf0; --status-stuck-fg:#1a1f36; --status-stuck-bd:#d6d9df;
  --status-notstarted:#8792a2; --status-notstarted-bg:#f4f5f7; --status-notstarted-fg:#54607a; --status-notstarted-bd:#e6e8ec;
  --pulse-critical:#4f46e5; --pulse-critical-bg:#eeecff; --pulse-critical-fg:#3b34a8; --pulse-critical-bd:#d6d2ff; --pulse-critical-dot:#4f46e5;
  --pulse-high:#7a73ff; --pulse-high-bg:#f5f4ff; --pulse-high-fg:#4f46e5; --pulse-high-bd:#e0deff; --pulse-high-dot:#7a73ff;
  --grad: linear-gradient(135deg,#7a73ff 0%, #635bff 35%, #4f46e5 65%, #2563eb 100%);
  --shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --shadow-sm:0 2px 5px -1px rgba(50,50,93,.08), 0 1px 3px -1px rgba(0,0,0,.05);
  --shadow-md:0 8px 22px -8px rgba(50,50,93,.12), 0 4px 10px -4px rgba(0,0,0,.05);
  --shadow-lg:0 24px 48px -12px rgba(50,50,93,.18), 0 8px 18px -8px rgba(0,0,0,.06);
  --radius-sm:6px; --radius:8px; --radius-lg:12px; --radius-xl:16px;
  --t:160ms cubic-bezier(.2,.6,.3,1);
}

html[data-theme="dark"]{
  --bg:#0a0e1a; --bg-soft:#0e1320; --bg-tint:#131826; --bg-warm:#0a0e1a; --bg-surface:#0d0e14;
  --surface:#131826; --hover:#1a1f30; --border:#1e2433; --border-strong:#2a3042;
  --border-focus:#7a73ff;
  --text:#f4f5f8; --text-soft:#c9cdd8; --text-muted:#8b91a3; --text-faint:#62687a;
  --primary:#7a73ff; --primary-hover:#635bff; --primary-soft:#1c1e3d;
  --topbar-bg:rgba(14,19,32,.85);
  --modal-scrim:rgba(0,0,0,.62);
  --drawer-scrim:rgba(0,0,0,.50);
  --success:#7a73ff; --success-bg:rgba(122,115,255,.14);
  --warning:#9ba1b3; --warning-bg:rgba(155,161,179,.10);
  --danger:#f4f5f8; --danger-bg:rgba(255,255,255,.06);
  --info:#7a73ff; --info-bg:rgba(122,115,255,.14);
  --status-done-bg:rgba(122,115,255,.18); --status-done-fg:#c5c0ff; --status-done-bd:rgba(122,115,255,.32);
  --status-working-bg:rgba(99,91,255,.20); --status-working-fg:#b8b3ff; --status-working-bd:rgba(122,115,255,.30);
  --status-stuck-bg:rgba(255,255,255,.06); --status-stuck-fg:#f4f5f8; --status-stuck-bd:rgba(255,255,255,.16);
  --status-notstarted-bg:rgba(139,145,163,.12); --status-notstarted-fg:#c9cdd8; --status-notstarted-bd:rgba(139,145,163,.22);
  --pulse-critical-bg:rgba(79,70,229,.22); --pulse-critical-fg:#c5c0ff; --pulse-critical-bd:rgba(122,115,255,.34); --pulse-critical-dot:#7a73ff;
  --pulse-high-bg:rgba(122,115,255,.16); --pulse-high-fg:#b8b3ff; --pulse-high-bd:rgba(122,115,255,.26); --pulse-high-dot:#7a73ff;
  --shadow-xs:0 1px 2px rgba(0,0,0,.45);
  --shadow-sm:0 2px 5px -1px rgba(0,0,0,.45), 0 1px 3px -1px rgba(0,0,0,.40);
  --shadow-md:0 8px 22px -8px rgba(0,0,0,.55), 0 4px 10px -4px rgba(0,0,0,.45);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.65), 0 8px 18px -8px rgba(0,0,0,.55);
  --grad: linear-gradient(135deg,#8c86ff 0%, #7a73ff 35%, #635bff 65%, #4f46e5 100%);
}

/* 300ms cross-fade on theme swap (per task brief) */
html, body{
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

/* ===== styles/01-base.css ===== */
/* ============================================================
 * APEX SALES OS · BASE RESET + TYPOGRAPHY + ANIMATIONS
 *
 * Owner: Worker W1 (foundation-css lane).
 * Loaded after 00-tokens.css; everything visual inherits the
 * tokens defined there. Page-local sheets MUST NOT redefine
 * the resets, scrollbar styling, or keyframes below.
 *
 * Stripe-tier baseline: Inter Tight body, JetBrains Mono for
 * .mono utility, subtle scrollbar, purple-tint selection, and
 * the canonical animation keyframes (tickPulse / livePulse /
 * dotPulse / shimmer / spin) referenced from primitives.
 * ============================================================ */

/* fonts (loaded from Google Fonts)
 * SAFARI COMPAT (2026-07-14): @import is only valid as the very first
 * rule(s) in a stylesheet (only @charset may precede it). When this file
 * is concatenated into styles/bundle.css it is the SECOND file in, well
 * after 00-tokens.css's :root{} rules — an invalid position. The bundle
 * build (scripts/build-bundle-css.sh) hoists this exact @import to the
 * top of bundle.css and strips it back out of this block on concat, so
 * the import stays valid in the shipped bundle. It is kept here so this
 * file still self-loads its fonts correctly if ever used standalone
 * (not concatenated). */

/* ------------------------------------------------------------
 * reset
 * ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ------------------------------------------------------------
 * IRON LAW · NO PAGE SCROLL (1440x900)
 *
 * The viewport is locked at 100vh. The body NEVER scrolls. The
 * browser window NEVER shows a vertical scrollbar. Every page
 * that has list data (commission ledger, audit log, chat thread,
 * call history, notifications, etc.) wraps its rows in an inner
 * container with `flex: 1; min-height: 0; overflow-y: auto` so
 * the LIST scrolls internally and the page chrome stays fixed.
 *
 * See docs/IRON-LAW-NO-SCROLL.md for the full pattern + list of
 * surfaces that ALWAYS scroll internally.
 *
 * Layout chain:
 *   body  -> flex column, 100vh, overflow hidden
 *   header#apex-topbar -> flex-shrink: 0
 *   main#app-root      -> flex: 1, min-height: 0, overflow hidden
 *   .app-frame         -> flex: 1, min-height: 0, overflow hidden
 *
 * If you find yourself adding `overflow: visible` or `min-height:
 * 100vh` to any of these, STOP. Wrap the list in an internal-
 * scroll container instead.
 * ------------------------------------------------------------ */
html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-warm);
  color: var(--text);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  /* IRON LAW lockdown: no horizontal AND no vertical body scroll */
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* topbar stays at top of the flex frame, sticky behaviour preserved */
#apex-topbar {
  flex-shrink: 0;
}

/* app-root owns the remaining viewport. Pages mount inside; their
 * internal flex chain takes over from here. */
#app-root {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-warm);
}

/* the canonical page frame inherits the locked viewport so pages
 * with hero + list shells can rely on a real 100% height parent
 * instead of recomputing `calc(100vh - 56px)` everywhere. */
.app-frame,
.page-shell,
.stage,
.stage-inner {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* ------------------------------------------------------------
 * selection
 * ------------------------------------------------------------ */
::selection { background: rgba(99, 91, 255, 0.20); }

/* ------------------------------------------------------------
 * scrollbar (subtle)
 * ------------------------------------------------------------ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 99px;
  border: 2px solid var(--bg-warm);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ------------------------------------------------------------
 * utility families
 * ------------------------------------------------------------ */
.mono  { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.num   { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.soft  { color: var(--text-soft); }

/* gradient text helper (purple gradient on big hero numbers) */
.gnum {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ------------------------------------------------------------
 * keyframes (animations)
 * ------------------------------------------------------------ */

/* tick animation (live numbers blip on update) */
@keyframes tickPulse {
  0%, 100% { transform: scale(1); }
  20%      { transform: scale(1.04); }
}
.tick { display: inline-block; animation: tickPulse 250ms ease-out; }

/* live pulse (recording / live data indicators) — purple, NEVER red */
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.16); }
  50%      { box-shadow: 0 0 0 6px rgba(99, 91, 255, 0.06); }
}

/* dot pulse (trailing point on sparklines) */
@keyframes dotPulse {
  0%, 100% { r: 2.6; opacity: 1; }
  50%      { r: 4;   opacity: 0.5; }
}

/* shimmer (loading skeleton sweep) */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* spin (loading spinner) */
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------
 * default app root + boot fade-in
 * (sizing rules live in the IRON LAW block above; this block
 * only owns the boot fade-in.)
 * ------------------------------------------------------------ */

/* hide while booting to avoid flash of unstyled content */
html.app-booting #app-root { opacity: 0; }
html:not(.app-booting) #app-root {
  opacity: 1;
  transition: opacity 200ms ease;
}

/* ------------------------------------------------------------
 * form element baseline
 * ------------------------------------------------------------ */
button {
  cursor: pointer;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
}

input, select, textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  color: var(--text);
  font: inherit;
  transition: border-color var(--t), box-shadow var(--t);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.12);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }

/* ------------------------------------------------------------
 * link reset
 * ------------------------------------------------------------ */
a { color: inherit; text-decoration: none; }
a.link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
a.link:hover { text-decoration: underline; }

/* ------------------------------------------------------------
 * keyboard hint chip
 * ------------------------------------------------------------ */
.kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* ------------------------------------------------------------
 * viewport guard (Apex Sales OS is desktop-only · 1280px+)
 * paired with the inline width-check script in index.html
 * ------------------------------------------------------------ */
html.viewport-too-small body > *:not(.viewport-warning) { display: none !important; }
html.viewport-too-small body::before {
  content: 'Apex Sales OS is desktop-only. Please open at 1280px+ width.';
  display: block;
  padding: 80px 40px;
  font-size: 18px;
  color: var(--text-muted);
  text-align: center;
}

/* ------------------------------------------------------------
 * EMBED MODE (?embed=1) — Apex Sales OS inside the RSM orientation
 * deck's mini app-shell iframe. The frame is intentionally narrow,
 * so instead of tripping the desktop-only guard we render the FULL
 * 1440px desktop layout and scale it down to the iframe width with a
 * transform. The result is a faithful, crisp, miniaturized desktop
 * screen the presenter can click through live. No layout/markup of
 * the screens themselves changes — this only scales the whole app.
 * ------------------------------------------------------------ */
html.apex-embed,
html.apex-embed body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}
html.apex-embed body {
  /* Render at a true desktop design width, then scale to fit the frame.
   * --apex-embed-w defaults to 1440 (set via :root) and can be tuned per
   * frame by the host setting it on the iframe URL is not needed; the
   * scale is driven purely by the frame's own viewport width (100vw). */
  width: 1440px;
  transform-origin: top left;
  transform: scale(calc(100vw / 1440));
  /* keep the scaled app from leaving a scroll gutter */
  -webkit-font-smoothing: antialiased;
}

/* ===== styles/02-primitives.css ===== */
/* ============================================================
 * APEX SALES OS · SHARED COMPONENT PRIMITIVES
 *
 * Every visual primitive used on more than one page lives here.
 * Page-local styles go in pages/<id>/<id>.css with .page-<id>- prefix.
 *
 * Class naming: kebab-case, no BEM, no SCSS.
 * Color: only var(--*). Never hardcoded.
 * Exception: rgba(99,91,255,*) — purple shadow/focus/blocked rings
 *            where no token exists for the precise alpha needed.
 *
 * Owner: Worker r4-001 (primitives-css). Do not modify outside this file.
 * Lifted/adapted from design-mockups/*.html — class names are canonical.
 *
 * Animation keyframes referenced:
 *   tickPulse, livePulse, dotPulse, shimmer, spin — defined in 01-base.css
 *   orbRing, orbBar, wfBarPulse                   — defined below (sections 14, 16)
 *
 * Sections (in order):
 *   1.  Topbar + brand
 *   2.  Context bar + breadcrumbs
 *   3.  Buttons
 *   4.  Chips
 *   5.  Sparkline
 *   6.  KPI tile
 *   7.  War room hero
 *   8.  View tabs + body
 *   9.  Modal
 *   10. Drawer
 *   11. Toast
 *   12. Tables
 *   13. Bubbles (iMessage style)
 *   14. Apex orb
 *   15. Slide stage
 *   16. Charts (area / hourly / heatmap / stacked / contrib / audio-waveform)
 *   17. Form fields
 *   18. Toggle / segmented controls
 *   19. Stepper
 *   20. Diagonal-purple block-out (canonical replacement for ALL red)
 *   21. System-state full-page layouts
 * ============================================================ */


/* ------------------------------------------------------------
 * 1 · Topbar + brand
 * ------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
}
.topbar-inner {
  height: 56px;
  /* APP SHELL LAW (Ben, 2026-07-11): the bar spans the full viewport like
     the recruiting bars -- no 1440px centering cap. */
  max-width: none;
  margin: 0 auto;
  padding: 0 24px;
  display: flex; align-items: center; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 2px 8px -2px rgba(10,14,26,0.30);
  display: block;
}
.brand-name {
  font-size: 13px; font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.brand-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 1px;
}
.topbar-tabs { display: flex; align-items: center; gap: 2px; }
.topbar-tab {
  display: flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  font-size: 12.5px; color: var(--text-soft);
  border-radius: 8px;
  transition: background var(--t), color var(--t);
}
.topbar-tab:hover {
  background: var(--hover);
  color: var(--text);
}
.topbar-tab.active {
  background: var(--primary-soft);
  color: var(--primary);
}
.topbar-spacer { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.topbar-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-tint);
  color: var(--text);
  font-size: 11px; font-weight: 600;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
/* When a headshot image is rendered inside the avatar circle, swap the
 * neutral tint background for a subtle gradient ring so the image reads
 * as a premium identity chip (matches the wallet-card aesthetic). */
.topbar-avatar.has-headshot {
  background: linear-gradient(135deg, rgba(99,91,255,0.18), rgba(122,115,255,0.08));
  border-color: rgba(99,91,255,0.28);
  box-shadow: 0 1px 2px rgba(10,14,26,0.05), inset 0 0 0 1px rgba(255,255,255,0.30);
}
.topbar-avatar.has-headshot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}


/* ------------------------------------------------------------
 * 2 · Context bar + breadcrumbs
 * ------------------------------------------------------------ */
.context-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  font-size: 12px; color: var(--text-muted);
}
.crumb { color: var(--text-soft); }
.crumb-current {
  color: var(--text);
  font-weight: 500;
}
.crumb-sep {
  color: var(--text-faint);
  margin: 0 4px;
}
.context-bar .right {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
}


/* ------------------------------------------------------------
 * 3 · Buttons
 * ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  white-space: nowrap; /* CTA labels never wrap (Ben, 2026-07-10: DD button broke to two lines) */
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12.5px; font-weight: 500;
  transition: background var(--t), border-color var(--t), color var(--t),
              transform var(--t), box-shadow var(--t), filter var(--t);
}
.btn:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 4px 10px -4px rgba(99, 91, 255, 0.18);
}
.btn:active { transform: translateY(0); }
.btn:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.12);
}

/* Primary — gradient + white text. Hover LIFTS and BRIGHTENS, never goes pale.
 * Canonical Treasury pattern: gradient background is preserved on every state,
 * box-shadow stacks for depth, brightness(1.04) for the glow. */
.btn-primary {
  background: var(--grad);
  border: 1px solid transparent;
  color: #ffffff;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 2px 6px -2px rgba(99, 91, 255, 0.55);
}
.btn-primary:hover {
  /* Override the .btn:hover lift while keeping the gradient + white text */
  background: var(--grad);
  transform: translateY(-1px);
  filter: brightness(1.04);
  color: #ffffff;
  border-color: transparent;
  box-shadow:
    0 8px 18px -6px rgba(99, 91, 255, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.btn-primary:active {
  transform: translateY(0);
  filter: brightness(1.0);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-soft);
}
.btn-ghost:hover {
  background: var(--hover);
  color: var(--text);
  border-color: transparent;
}

.btn-lg { height: 36px; padding: 0 14px; font-size: 13px; }
.btn-xl { height: 42px; padding: 0 18px; font-size: 14px; border-radius: var(--radius-lg); }
.btn-hero {
  height: 52px; padding: 0 24px;
  font-size: 15px; font-weight: 600;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* .btn-danger uses MUTED grey only — never red. Same shape as .btn, slightly
   recessed colors, hover lifts to the regular text color. */
.btn-danger {
  color: var(--text-muted);
  border-color: var(--border-strong);
}
.btn-danger:hover {
  background: var(--bg-tint);
  color: var(--text);
  border-color: var(--text-faint);
}

.btn[disabled] {
  opacity: 0.5;
  pointer-events: none;
}


/* ------------------------------------------------------------
 * 4 · Chips
 * ------------------------------------------------------------ */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  border-radius: 99px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  font-size: 11px; color: var(--text-soft);
  font-weight: 500;
  white-space: nowrap;
}
.chip .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.chip.purple-soft {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--status-done-bd);
}
.chip.muted {
  background: var(--bg-tint);
  color: var(--text-muted);
}
.chip.live {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--status-done-bd);
}
.chip.live .pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
  animation: livePulse 1.6s infinite ease-in-out;
}


/* ------------------------------------------------------------
 * 5 · Sparkline
 *   (referenced gradients: #sparkGrad, #sparkGradFill — defined in
 *    shared/components/svg-defs.js, owner: Worker W2)
 * ------------------------------------------------------------ */
.spark {
  width: 100%; height: 28px;
  display: block;
}
.spark-area {
  fill: url(#sparkGradFill);
  opacity: 0.45;
}
.spark-line {
  fill: none;
  stroke: url(#sparkGrad);
  stroke-width: 1.6;
}
.spark-dot { fill: var(--primary); }
.spark-dot-pulse {
  animation: dotPulse 1.6s infinite ease-in-out;
  transform-origin: center;
}


/* ------------------------------------------------------------
 * 6 · KPI tile
 * ------------------------------------------------------------ */
.kpi-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color var(--t), box-shadow var(--t);
}
.kpi-tile:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.kpi-tile-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 500;
}
.kpi-tile-head .ico {
  width: 14px; height: 14px;
  opacity: 0.7;
}
.kpi-tile-row {
  display: flex; align-items: baseline;
  justify-content: space-between;
}
.kpi-tile-num {
  font-family: 'Inter Tight', sans-serif;
  font-size: 30px; font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.kpi-tile-num.purple {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.kpi-tile-delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 500;
  color: var(--text-muted);
}
.kpi-tile-delta.up   { color: var(--primary); }
/* .down uses faint text — NEVER red. Down deltas read as quiet, not alarming. */
.kpi-tile-delta.down { color: var(--text-faint); }


/* ------------------------------------------------------------
 * 7 · War room hero
 *   Manager / CEO cockpit hero strip. 5-col grid:
 *   target | divider | actual | divider | gap-close action.
 * ------------------------------------------------------------ */
.war-room {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 24px;
  align-items: stretch;
  box-shadow: var(--shadow-sm);
}
.war-col {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.war-divider {
  width: 1px;
  background: var(--border);
  align-self: stretch;
}
.war-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 500;
}
.war-eyebrow.live::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary);
  animation: livePulse 1.6s infinite;
}
.war-num {
  font-family: 'Inter Tight', sans-serif;
  font-size: 56px; font-weight: 600;
  letter-spacing: -0.025em; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.war-num.purple {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.war-num-small {
  font-size: 14px; color: var(--text-muted);
  font-weight: 500;
  margin-left: 4px;
}
.war-meta-line {
  font-size: 12px;
  color: var(--text-muted);
}
.war-bar {
  height: 6px;
  background: var(--bg-tint);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.war-bar-fill {
  height: 100%;
  background: var(--grad);
  transition: width 240ms ease-out;
}
.war-countdown {
  font-family: 'JetBrains Mono', monospace;
  font-size: 40px; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.war-pace {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 12px; color: var(--text-soft);
  line-height: 1.5;
}
.war-pace b.accent {
  color: var(--primary);
  font-weight: 600;
}


/* ------------------------------------------------------------
 * 8 · View tabs + body
 *   Pill-segmented tab control; .view-body is the surface below
 *   the tabs (height is set inline by the caller — usually 280/320/380).
 * ------------------------------------------------------------ */
.view-tabs {
  display: flex; gap: 2px;
  padding: 4px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: fit-content;
}
.view-tab {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  font-size: 12px; color: var(--text-soft);
  font-weight: 500;
  border-radius: 6px;
  transition: background var(--t), color var(--t);
  cursor: pointer;
}
.view-tab:hover { color: var(--text); }
.view-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}
.view-body {
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  overflow: hidden;
}


/* ------------------------------------------------------------
 * 9 · Modal
 * ------------------------------------------------------------ */
.modal-bg {
  position: fixed; inset: 0;
  background: var(--modal-scrim);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 100;
  opacity: 0;
  transition: opacity 180ms ease;
}
.modal-bg.open {
  display: flex;
  opacity: 1;
}
.modal {
  width: 460px;
  max-width: calc(100vw - 48px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(8px);
  transition: transform 180ms ease;
}
.modal-bg.open .modal { transform: translateY(0); }
.modal-head { padding: 20px 22px 12px; }
.modal-head h3 {
  margin: 0 0 6px;
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.01em;
}
.modal-head p {
  margin: 0;
  font-size: 13px; color: var(--text-muted);
  line-height: 1.5;
}
.modal-body { padding: 6px 22px 16px; }
.modal-input {
  width: 100%;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}
.modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 22px;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
}


/* ------------------------------------------------------------
 * 10 · Drawer
 * ------------------------------------------------------------ */
.drawer-bg {
  position: fixed; inset: 0;
  background: var(--drawer-scrim);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: none;
  z-index: 90;
  opacity: 0;
  transition: opacity 180ms ease;
}
.drawer-bg.open {
  display: block;
  opacity: 1;
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 560px;
  max-width: 100vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  transform: translateX(24px);
  transition: transform 240ms ease;
}
.drawer-bg.open .drawer { transform: translateX(0); }
.drawer-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.drawer-head h3 {
  margin: 0;
  font-size: 15px; font-weight: 600;
}
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
}
.drawer-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  display: flex; justify-content: flex-end; gap: 8px;
}


/* ------------------------------------------------------------
 * 11 · Toast
 *   Stacks bottom-right. Success uses primary purple. Warning uses
 *   muted text — NEVER red.
 * ------------------------------------------------------------ */
.apex-toasts {
  position: fixed;
  bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 110;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px; color: var(--text);
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 8px;
  min-width: 240px;
  max-width: 360px;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
}
.toast.show {
  transform: translateY(0);
  opacity: 1;
}
.toast .toast-ico {
  width: 16px; height: 16px;
  opacity: 0.7;
}
.toast.success .toast-ico {
  color: var(--primary);
  opacity: 1;
}
.toast.warning .toast-ico {
  color: var(--text-muted);
}


/* ------------------------------------------------------------
 * 12 · Tables
 *   grid-template-columns is set inline per page (each table is bespoke).
 *   .me / .flagged / .top all share the same purple-tint highlight.
 * ------------------------------------------------------------ */
.tbl {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tbl-head,
.tbl-row {
  display: grid;
  align-items: center;
  padding: 10px 14px;
  font-size: 12.5px;
}
.tbl-head {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 11px; font-weight: 500;
}
.tbl-row {
  border-bottom: 1px solid var(--border);
  transition: background var(--t);
  position: relative;
}
.tbl-row:last-child { border-bottom: 0; }
.tbl-row:hover { background: var(--hover); }
.tbl-row.me,
.tbl-row.flagged,
.tbl-row.top {
  background: linear-gradient(90deg, var(--primary-soft) 0%, transparent 40%);
}
.tbl-row.me::before,
.tbl-row.flagged::before,
.tbl-row.top::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--grad);
}
.tbl-cell.num { font-variant-numeric: tabular-nums; }


/* ------------------------------------------------------------
 * 13 · Bubbles (iMessage style — NO Slack-style channel symbols)
 *   Three row orientations: .me (right), .them (left), .apex (assistant).
 * ------------------------------------------------------------ */
.bubble-row {
  display: flex; align-items: flex-end; gap: 8px;
  margin-bottom: 14px;
}
.bubble-row.me { flex-direction: row-reverse; }
.bubble-body {
  display: flex; flex-direction: column;
  min-width: 0; max-width: 460px;
}
.bubble-row.me .bubble-body { align-items: flex-end; }
.bubble-av {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-tint);
  color: var(--text);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.bubble-row.apex .bubble-av {
  background: var(--grad);
  color: var(--surface);
  border: 0;
}
.bubble-sender {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 4px 4px;
}
.bubble {
  max-width: 420px;
  padding: 9px 13px;
  border-radius: 18px;
  background: var(--bg-tint);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.45;
  word-wrap: break-word;
}
.bubble-row.me .bubble {
  background: var(--grad);
  color: var(--surface);
  border-bottom-right-radius: 6px;
}
.bubble-row.them .bubble { border-bottom-left-radius: 6px; }
.bubble-row.apex .bubble {
  background: var(--primary-soft);
  color: var(--text);
  border: 1px solid var(--status-done-bd);
  border-bottom-left-radius: 6px;
}
.bubble-reactions {
  display: flex; gap: 4px;
  margin: 4px 4px 0;
}
.bubble-react {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 1px 6px;
  font-size: 11px;
  color: var(--text-soft);
}
.bubble-react.mine {
  border-color: var(--status-done-bd);
  background: var(--primary-soft);
  color: var(--primary);
}
.bubble-time {
  font-size: 10.5px;
  color: var(--text-faint);
  margin: 4px 4px 0;
  text-align: right;
}
.bubble-attach {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-soft);
}


/* ------------------------------------------------------------
 * 14 · Apex orb
 *   The voice-AI hero element. Purple gradient sphere with a
 *   ring that pulses outward and mic bars inside the core.
 * ------------------------------------------------------------ */
.apex-orb {
  position: relative;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: var(--grad);
  display: grid; place-items: center;
  box-shadow: 0 20px 50px -10px rgba(99, 91, 255, 0.45);
}
.apex-orb-ring {
  position: absolute; inset: -12px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  opacity: 0.6;
  animation: orbRing 2.4s infinite ease-out;
}
.apex-orb-core {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  display: grid; place-items: center;
  color: var(--surface);
}
.apex-orb-bar {
  display: inline-block;
  width: 3px; margin: 0 1.5px;
  background: var(--surface);
  border-radius: 99px;
  animation: orbBar 0.7s infinite ease-in-out;
}
@keyframes orbRing {
  0%   { transform: scale(1);    opacity: 0.6; }
  100% { transform: scale(1.25); opacity: 0;   }
}
@keyframes orbBar {
  0%, 100% { height: 12px; }
  50%      { height: 36px; }
}


/* ------------------------------------------------------------
 * 15 · Slide stage
 *   The pitch-tool deck surface. 16:9 canvas with a faint purple
 *   radial wash + ruled grid underlay.
 * ------------------------------------------------------------ */
.slide-stage {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.slide-stage-head {
  padding: 12px 18px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  font-size: 12px; color: var(--text-soft);
}
.slide-counter {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
}
.slide-canvas {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg);
  overflow: hidden;
}
.slide-canvas-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 18% 22%, rgba(122, 115, 255, 0.10), transparent 70%),
    radial-gradient(50% 40% at 82% 78%, rgba(99, 91, 255, 0.08), transparent 70%);
}
.slide-canvas-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.35;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at center, black 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 60% at center, black 30%, transparent 80%);
}
.slide-canvas-inner {
  position: relative; z-index: 2;
  padding: 56px 64px;
  height: 100%;
  display: flex; flex-direction: column; gap: 12px;
  justify-content: center;
}
.slide-eyebrow {
  font-size: 12px;
  color: var(--primary);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 500;
}
.slide-headline {
  font-size: 36px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.1;
  margin: 0;
}
.slide-sub {
  font-size: 16px;
  color: var(--text-soft);
  line-height: 1.5;
  max-width: 640px;
}
.slide-stage-foot {
  padding: 10px 18px;
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}
.slide-progress-bar {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: var(--bg-tint);
  overflow: hidden;
}
.slide-progress-bar-fill {
  height: 100%;
  background: var(--grad);
  border-radius: 99px;
  transition: width 400ms cubic-bezier(0.2, 0.6, 0.3, 1);
}
.slide-nav-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
}
.slide-nav-btn:hover {
  background: var(--hover);
  color: var(--text);
}
.slide-nav-btn.primary {
  background: var(--primary);
  border-color: transparent;
  color: #fff;
}
.slide-nav-btn.primary:hover {
  background: var(--primary);
  filter: brightness(1.05);
  color: #fff;
}

/* Pitch-tool hero scale — larger than the base slide-* sizes used elsewhere.
 * Scoped under .page-pitch-frame so other surfaces keep the compact scale.
 * Source: design-mockups/01-pitch-tool.html (.slide-eyebrow/.slide-headline/.slide-sub). */
.page-pitch-frame .slide-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  margin-bottom: 18px;
}
.page-pitch-frame .slide-headline {
  font-size: 44px;
  letter-spacing: -0.024em;
  line-height: 1.05;
  max-width: 720px;
  margin: 0 0 18px;
}
.page-pitch-frame .slide-sub {
  font-size: 17px;
  max-width: 560px;
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.page-pitch-frame .slide-canvas-inner {
  padding: 0 76px;
}

/* Slide feature grid — the 3-up feature cards from the pitch mockup.
 * Ported verbatim from design-mockups/01-pitch-tool.html
 * (.slide-feature-grid / .slide-feature / .slide-feature-icon /
 * .slide-feature-label / .slide-feature-val, lines ~451-467) and scoped
 * under .page-pitch-frame so other surfaces are unaffected. Rendered by
 * slide-stage.js when a slide supplies a slides[].features array. */
.page-pitch-frame .slide-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 32px;
  max-width: 760px;
}
.page-pitch-frame .slide-feature {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.page-pitch-frame .slide-feature-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.page-pitch-frame .slide-feature-label {
  font-size: 13px;
  font-weight: 600;
}
.page-pitch-frame .slide-feature-val {
  font-size: 11.5px;
  color: var(--text-muted);
}


/* ------------------------------------------------------------
 * 16 · Charts
 *   Area chart, hourly bars, heatmap, stacked bars, contrib list,
 *   audio waveform. Referenced SVG gradients live in svg-defs.js.
 * ------------------------------------------------------------ */

/* area chart */
.area-chart {
  width: 100%;
  height: 240px;
}
.area-chart .area-fill {
  fill: url(#sparkGradFill);
  opacity: 0.35;
}
.area-chart .area-line {
  fill: none;
  stroke: url(#sparkGrad);
  stroke-width: 1.8;
}
.area-chart .grid-line {
  stroke: var(--border);
  stroke-width: 0.5;
}
.area-chart .axis-label {
  font-size: 10px;
  fill: var(--text-faint);
}

/* hourly bars */
.hourly-bars {
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
  align-items: end;
  height: 200px;
  padding: 8px 0;
}
.hourly-bar {
  background: var(--grad);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: opacity var(--t);
}
.hourly-bar:hover { opacity: 0.8; }

/* heatmap */
.heatmap {
  display: grid;
  gap: 3px;
}
.heatmap-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--bg-tint);
  position: relative;
  transition: transform var(--t);
}
.heatmap-cell:hover { transform: scale(1.1); }
.heatmap-cell.t1 { background: rgba(99, 91, 255, 0.18); }
.heatmap-cell.t2 { background: rgba(99, 91, 255, 0.35); }
.heatmap-cell.t3 { background: rgba(99, 91, 255, 0.55); }
.heatmap-cell.t4 { background: rgba(99, 91, 255, 0.78); }
.heatmap-cell.t5 { background: var(--primary); }
/* blocked / off — diagonal purple stripes (NEVER red) */
.heatmap-cell.blocked {
  background-image: repeating-linear-gradient(
    45deg,
    var(--bg-tint) 0 3px,
    rgba(99, 91, 255, 0.20) 3px 6px
  );
}

/* stacked bars (status segments) */
.stacked-bars {
  display: flex; flex-direction: column;
  gap: 8px;
}
.stacked-bar-row {
  display: grid;
  grid-template-columns: 100px 1fr 60px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.stacked-bar-row .bar {
  display: flex;
  height: 18px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.stacked-bar-row .seg.done       { background: var(--status-done); }
.stacked-bar-row .seg.working    { background: var(--status-working); }
.stacked-bar-row .seg.stuck      { background: var(--status-stuck); }
.stacked-bar-row .seg.notstarted { background: var(--bg-tint); }

/* contributor list */
.contrib-list {
  display: flex; flex-direction: column;
}
.contrib-row {
  display: grid;
  grid-template-columns: 24px 1fr 80px 40px;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.contrib-row:last-child { border-bottom: 0; }
.contrib-row .bar {
  height: 6px;
  background: var(--bg-tint);
  border-radius: 99px;
  overflow: hidden;
}
.contrib-row .bar-fill {
  height: 100%;
  background: var(--grad);
}

/* audio waveform (live recording indicator — purple bars, never red) */
.audio-waveform {
  display: flex; align-items: center; gap: 2px;
  height: 32px;
}
.wf-bar {
  width: 2.5px;
  background: var(--primary);
  border-radius: 99px;
  animation: wfBarPulse 0.9s infinite ease-in-out;
}
@keyframes wfBarPulse {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1);   }
}


/* ------------------------------------------------------------
 * 17 · Form fields
 * ------------------------------------------------------------ */
.field {
  display: flex; flex-direction: column;
  gap: 6px;
}
.field-label {
  font-size: 12px; font-weight: 500;
  color: var(--text-soft);
  display: flex; align-items: center; gap: 6px;
}
.field-label .hint {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 400;
}
.field input,
.field select,
.field textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
}
.field.span-2 { grid-column: span 2; }
.field-meta {
  font-size: 11px;
  color: var(--text-muted);
}
.hint {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 400;
}


/* ------------------------------------------------------------
 * 18 · Toggle / segmented controls
 * ------------------------------------------------------------ */
.toggle-pair {
  display: inline-flex; gap: 2px;
  padding: 3px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: 99px;
}
.toggle-pair .seg-opt {
  height: 26px; padding: 0 14px;
  font-size: 12px;
  border-radius: 99px;
  display: grid; place-items: center;
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.toggle-pair .seg-opt.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}

.seg-group {
  display: inline-flex;
  padding: 3px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  gap: 2px;
}
.seg-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.seg-row {
  display: grid;
  grid-auto-flow: column;
  gap: 2px;
}
.seg-opt {
  height: 28px; padding: 0 12px;
  font-size: 12px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.seg-opt:hover { color: var(--text); }
.seg-opt.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}


/* ------------------------------------------------------------
 * 19 · Stepper
 * ------------------------------------------------------------ */
.stepper {
  display: inline-flex; align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.stepper-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  color: var(--text-soft);
  transition: background var(--t);
}
.stepper-btn:hover {
  background: var(--hover);
  color: var(--text);
}
.stepper-value {
  padding: 0 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  text-align: center;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  height: 32px;
  display: grid; place-items: center;
}


/* ------------------------------------------------------------
 * 20 · Diagonal-purple block-out (CANONICAL)
 *   The ONLY pattern used anywhere we'd otherwise reach for red:
 *   off-days, blocked time-slots, unavailable seats, ineligible
 *   options. Two utility classes with identical paint.
 * ------------------------------------------------------------ */
.block-out,
.blocked-slot {
  background-image: repeating-linear-gradient(
    45deg,
    var(--bg-tint) 0 6px,
    rgba(99, 91, 255, 0.22) 6px 12px
  );
  color: var(--text-muted);
}


/* ------------------------------------------------------------
 * 21 · System-state full-page layouts
 *   Empty / loading / not-found / network-error / permission-denied.
 *   Centered, generous whitespace, single primary action.
 * ------------------------------------------------------------ */
.sys-state {
  min-height: calc(100vh - 56px);
  display: grid; place-items: center;
  padding: 60px 24px;
}
.sys-state-inner {
  max-width: 440px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
}
.sys-state-icon {
  width: 56px; height: 56px;
  color: var(--text-faint);
}
.sys-state-title {
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.sys-state-accent {
  font-size: 14px;
  color: var(--primary);
  font-weight: 500;
}
.sys-state-sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}
.sys-state-actions {
  display: flex; gap: 8px;
  margin-top: 6px;
}

/* ============================================================
 * 22 · Meeting-urgency countdown (meeting-countdown.js)
 *
 * Five urgency classes drive color, size, and pulsing as the
 * meeting time approaches. Each class is also injected by
 * meeting-countdown.js itself (via injectCountdownStyles) so
 * the module works standalone when this stylesheet is absent.
 * These canonical definitions here take precedence when the
 * full stylesheet is loaded.
 *
 * Urgency law:
 *   >1h           countdown-grey     muted text, no pulse
 *   <1h >15min    countdown-purple   primary color, no pulse
 *   <15min >3min  countdown-pulse    primary color, pulsing
 *   <3min >1min   countdown-amber    #ff8a00, larger font
 *   <=1min        countdown-magenta  #ff2d78, largest, fast pulse
 * ============================================================ */
.countdown-grey {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted, #94a3b8);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.countdown-purple {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--primary, #635bff);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.countdown-pulse {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--primary, #635bff);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  animation: countdown-pulse-anim 1.2s ease-in-out infinite;
}
.countdown-amber {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ff8a00;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.countdown-magenta {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0;
  color: #ff2d78;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  animation: countdown-pulse-anim 0.6s ease-in-out infinite;
}
@keyframes countdown-pulse-anim {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}


/* ============================================================
 * GLOBAL SPINNER LAW (Ben, 2026-07-10): "every single button like
 * this should have a loader circle while it's thinking."
 * Toggle with btn.classList.add('thinking') while an async action
 * is in flight; remove when it settles. Works on any .btn.
 * ============================================================ */
.btn.thinking { position: relative; pointer-events: none; opacity: .75; }
.btn.thinking::after {
  content: '';
  width: 14px; height: 14px;
  flex: 0 0 14px;
  margin-left: 2px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: apex-btn-spin 700ms linear infinite;
}
@keyframes apex-btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn.thinking::after { animation-duration: 1.6s; }
}

/* ===== styles/03-layout.css ===== */
/* ============================================================
 * APEX SALES OS · APP LAYOUT
 * The page-frame that holds every authenticated screen.
 *
 * Token-driven. No hardcoded colors / spacings.
 * Loads AFTER 02-primitives.css; layout-scoped rules below
 * intentionally restate context-bar / crumb declarations so this
 * file is self-contained as the canonical layout sheet.
 *
 * Owner: Worker W2 (r4-002-layout-css).
 * ============================================================ */

.app-frame {
  /* APP SHELL LAW (Ben, 2026-07-11): the shell FILLS the viewport at every
     width with symmetric gutters -- modeled on the locked recruiting shell.
     The old 1440px cap left giant white voids on wide monitors. */
  max-width: none;
  margin: 0 auto;
  padding: 16px 24px 24px;
  display: flex; flex-direction: column; gap: 14px;
  /* IRON LAW: sizing comes from the flex chain in 01-base.css.
     min-height removed so this container never forces the body to
     scroll. height + overflow are inherited from .app-frame in
     01-base.css (flex: 1; min-height: 0; overflow: hidden). */
  width: 100%;
  /* NO-WHITE-SLICE: app-frame is a transparent layout container so
     the body / #app-root bg-warm is visible behind every page. Only
     .card / .page-card / .kpi-tile-style elements paint surface. */
  background: transparent;
}

.context-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  font-size: 12px; color: var(--text-muted);
}
.crumb { color: var(--text-soft); }
.crumb-current { color: var(--text); font-weight: 500; }
.crumb-sep { color: var(--text-faint); margin: 0 4px; }
.context-bar .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Page section header (used inside pages) */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.section-head h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.section-head .meta { font-size: 12px; color: var(--text-muted); }

/* Grids that recur */
.grid-4  { display: grid; grid-template-columns: repeat(4, 1fr);  gap: 12px; }
.grid-3  { display: grid; grid-template-columns: repeat(3, 1fr);  gap: 12px; }
.grid-2  { display: grid; grid-template-columns: repeat(2, 1fr);  gap: 12px; }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }

/* Card surface (lightweight wrapper used by pages) */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.card-head h3 {
  margin: 0;
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
}
.card-head .meta { font-size: 11.5px; color: var(--text-muted); }

/* ============================================================
 * UNIVERSAL PAGE SHELL
 * Every authenticated page renders inside ONE centered card with
 * margin around it. The page body is never edge-to-edge.
 *
 * Outer:  .page-shell   warm-light background, padding around card
 * Inner:  .page-card    surface, rounded, 1px border, soft shadow
 *
 * Used by every paperwork, brand-mission, master-class, and
 * profile page. The only exception is the floor graduation
 * celebration which intentionally stays full-bleed.
 *
 * Owner: fix/uniform-page-shell — 2026-05-28
 * See: docs/UNIVERSAL-PAGE-SHELL.md
 * ============================================================ */
.page-shell {
  background: var(--bg-warm);
  padding: 16px 24px 24px;
  min-height: calc(100vh - 56px);          /* below 56px topbar */
  display: flex;
  flex-direction: column;
}
.page-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 20px 24px 24px;
  gap: 14px;
  min-width: 0;
  /* NO-SCROLL IRON LAW: a flex column with overflow:hidden cannot shrink
     below its intrinsic content height without min-height:0. Without it,
     tall page content (e.g. the e-sign contract doc + sign rail) expands
     .page-card past the 100vh viewport and overflow:hidden clips the
     bottom CTA with no scroll. min-height:0 lets inner overflow-y:auto
     containers actually engage so the advance CTA stays reachable. */
  min-height: 0;
  overflow: hidden;                        /* clip inner shells to radius */
}

/* When an .app-frame page also opts into the universal shell, its
 * own max-width / margin centering should NOT fight the shell. The
 * shell already centers via the parent app-frame gutters. */
.app-frame > .page-shell {
  padding: 0;
  min-height: 0;
  flex: 1 1 auto;
}
.app-frame > .page-shell > .page-card {
  padding: 16px 20px 20px;
  /* NO-SCROLL IRON LAW (scoped reinforcement): keep the shared page card
     shrinkable so inner overflow-y:auto stages scroll instead of pushing
     the page past the viewport. See base .page-card note above. */
  min-height: 0;
}

/* Master-class roots (.page-mc-*-root) already paint .bg-warm at the
 * viewport level. When wrapped, the inner page-card uses surface tone
 * and keeps the calm centered layout the master-class CSS already
 * implements via its own .page-mc-* containers. The 1440x900 lock
 * comes from the flex chain in 01-base.css; do NOT restore min-height
 * here or the page will overflow the viewport. */
.page-mc-preflight-root > .page-shell,
.page-mc-exam-root      > .page-shell,
.page-mc-result-root    > .page-shell {
  padding: 16px 24px 24px;
}

/* Inside the card, the leading context-bar should not pad-top because
 * the card already has its own internal padding. */
.page-card > .context-bar:first-child {
  padding-top: 0;
}

/* ============================================================
 * UNIVERSAL INNER-SCROLL UTILITY
 *
 * The page viewport (body + #app-root + .page-shell + .page-card)
 * is locked at 1440x900 with overflow: hidden so the screen never
 * scrolls. Long content (forms, lists, doc previews, settings)
 * MUST scroll INTERNALLY within its own bounded region while the
 * page chrome (eyebrow + title + sub on top, foot CTAs on bottom)
 * stays anchored.
 *
 * Pages opt in by adding `.inner-scroll` to any middle region:
 *   - W-9 form body  → wraps sections 1+2+3
 *   - eSign agreement preview pane
 *   - direct deposit form body
 *   - settings list rows
 *   - module-runner long video/MC content
 *   - admin tables, ledger rows, message threads
 *
 * The OUTER container must be flex column (so the head + foot are
 * `flex-shrink: 0` and `.inner-scroll` is `flex: 1; min-height: 0`).
 *
 * Owner: fix/inner-scroll-sweep
 * ============================================================ */
.inner-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--text-faint) transparent;
}
.inner-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.inner-scroll::-webkit-scrollbar-thumb {
  background: var(--text-faint);
  border-radius: 4px;
}
.inner-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}
.inner-scroll::-webkit-scrollbar-track { background: transparent; }

/* Pages that adopt inner-scroll also need their chrome rows to NOT
 * compress under flex distribution. */
.inner-scroll-head,
.inner-scroll-foot {
  flex-shrink: 0;
}


/* ===== styles/04-transitions.css ===== */
/* ============================================================
 * APEX SALES OS · ROUTE + RUNNER + TAB TRANSITIONS
 *
 * Owner: Worker done-18 (transitions lane). Loaded after the
 * primitives + layout sheets so its opacity/transform deltas
 * always win the cascade for the brief animation window.
 *
 * Three transition families live here. Every value is opt-in
 * via class — nothing animates unless the router / runner /
 * topbar adds the class. Reduced-motion users get zero motion
 * (handled at the bottom of this file).
 *
 *   1) ROUTE CROSS-FADE — default 200ms fade-out + fade-in on
 *      every hash route change. The router applies
 *      `route-leaving` before swapping rootEl content, removes
 *      it after `replaceChildren()`, then adds `route-entering`
 *      for the in-curve. Composited (opacity only) so the
 *      transition stays at 60fps on the 1440x900 viewport even
 *      when the next page mounts a 4-card KPI row or a
 *      hash-chained ledger.
 *
 *   2) RUNNER STAGE-CROSS — 150ms slide-left + fade for the
 *      video -> test -> voice -> result state machine inside
 *      module-runner.js. The runner adds `stage-cross` on the
 *      stage wrapper, flips state, then removes the class. The
 *      in-curve is shorter and tighter than a route swap because
 *      the rail/header stays put. This is the ONLY internal
 *      transition the runner uses; never call the router CSS for
 *      step changes (the rail would flicker).
 *
 *   3) CELEBRATION HEAVY-FADE — 400ms cross-fade on the three
 *      emotional-payoff routes: #/onboarding/complete,
 *      #/training-complete (and any *-complete page), and the
 *      Phase 7 #/floor-graduation page. The longer curve gives
 *      the celebration confetti / orb intro time to land. The
 *      router auto-detects these hashes; pages don't opt in.
 *
 *   4) TAB-SHAKE — 200ms horizontal nudge on a soft-locked
 *      topbar tab when the user clicks it (router does NOT
 *      navigate because the tab is `aria-disabled` + href="#").
 *      Pair with toast.warning("Unlocks at Phase X"). The shake
 *      lives on the tab itself; no layout shift on neighbours.
 *
 * NEVER add transitions to the html/body element here — those
 * live in 00-tokens.css for theme cross-fade only. NEVER use
 * red anywhere (Apex zero-red rule). NEVER introduce new colors;
 * opacity + translate only.
 * ============================================================ */

/* ------------------------------------------------------------
 * 1. ROUTE CROSS-FADE (default · 200ms)
 *
 * The router toggles these classes on #app-root. We animate
 * opacity only — translateY is intentionally tiny (2px) so the
 * fade reads as a calm dissolve, not a slide. Stripe-tier.
 * ------------------------------------------------------------ */
#app-root {
  transition: opacity 200ms cubic-bezier(.2,.6,.3,1);
  will-change: opacity;
}

#app-root.route-leaving {
  opacity: 0;
}

#app-root.route-entering {
  /* tiny in-curve overshoot so the page lands instead of "pops" */
  animation: route-fade-in 200ms cubic-bezier(.2,.6,.3,1) both;
}

@keyframes route-fade-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ------------------------------------------------------------
 * 3. CELEBRATION HEAVY-FADE (400ms · #/onboarding/complete,
 *    #/training-complete, #/floor-graduation)
 *
 * Router swaps the duration by adding `route-celebration` on
 * #app-root alongside the route-leaving / route-entering class.
 * Longer curve so the confetti + hero number have room to land.
 * ------------------------------------------------------------ */
#app-root.route-celebration {
  transition: opacity 400ms cubic-bezier(.2,.6,.3,1);
}

#app-root.route-celebration.route-entering {
  animation: route-celebration-in 400ms cubic-bezier(.2,.6,.3,1) both;
}

@keyframes route-celebration-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ------------------------------------------------------------
 * 2. RUNNER STAGE-CROSS (150ms slide-left + fade)
 *
 * Used inside module-runner.js for video -> mc -> apex -> result.
 * The runner adds `.stage-cross` on the .runner-stage-wrap element
 * RIGHT BEFORE re-rendering its children, then removes it on the
 * next frame so the new stage fades in from the right.
 * ------------------------------------------------------------ */
.runner-stage-wrap {
  transition: opacity 150ms cubic-bezier(.2,.6,.3,1),
              transform 150ms cubic-bezier(.2,.6,.3,1);
  will-change: opacity, transform;
}

.runner-stage-wrap.stage-cross {
  opacity: 0;
  transform: translateX(-12px);
}

.runner-stage-wrap.stage-cross-in {
  animation: stage-cross-in 150ms cubic-bezier(.2,.6,.3,1) both;
}

@keyframes stage-cross-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* ------------------------------------------------------------
 * 4. TAB-SHAKE (soft-locked topbar tab · 200ms)
 *
 * Topbar wires this on click: if the tab carries `.is-soft-locked`,
 * we call e.preventDefault(), add `.shake`, fire a warning toast,
 * and remove `.shake` on animationend.
 * ------------------------------------------------------------ */
.topbar-tab.shake {
  animation: tab-shake 200ms cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes tab-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px);  }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px);  }
}

/* ------------------------------------------------------------
 * REDUCED MOTION — kill every transition above. Per WCAG 2.3.3.
 * Theme cross-fade and other base transitions are out of scope.
 * ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #app-root,
  #app-root.route-celebration,
  .runner-stage-wrap {
    transition: none !important;
    animation: none !important;
  }
  #app-root.route-leaving { opacity: 1 !important; }
  #app-root.route-entering,
  #app-root.route-celebration.route-entering,
  .runner-stage-wrap.stage-cross,
  .runner-stage-wrap.stage-cross-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .topbar-tab.shake { animation: none !important; }
}

/* PERSISTENT DECK SHELL (2026-07-11): between deck routes the router
 * animates ONLY the content host - the bar + card must not fade or nudge
 * a single pixel. Same in-curve as the route swap. */
.deck-content.route-entering {
  animation: route-fade-in 200ms cubic-bezier(.2,.6,.3,1) both;
}

/* ===== pages/auth/auth.css ===== */
/* ============================================================
 * APEX SALES OS · AUTH PAGES (login / magic-sent / welcome)
 * Owner: r6-001-auth-css
 * Page-local styles only · every selector prefixed .page-auth-
 *
 * Renders three unauthenticated screens that bookend the app:
 *   - #/login              (login.js)
 *   - #/login/magic-sent   (magic-sent.js)
 *   - #/welcome            (welcome.js)
 *
 * Token-driven. Light + dark themes work via html[data-theme] swap.
 * Strength meter progression on welcome: muted-grey -> primary.
 * Never red anywhere.
 * ============================================================ */

/* ----------------------------------------------------------------
 * Frame · centered grid with twin radial primary washes
 * ---------------------------------------------------------------- */
.page-auth-frame {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  background:
    radial-gradient(circle at 20% 0%, rgba(99,91,255,0.10), transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(99,91,255,0.06), transparent 50%),
    var(--bg-warm);
}

/* ----------------------------------------------------------------
 * Card · 420px white surface, lg shadow, xl radius
 * ---------------------------------------------------------------- */
.page-auth-card {
  width: 420px;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px 32px 28px;
  box-shadow: var(--shadow-lg);
}

/* ----------------------------------------------------------------
 * Brand · gradient mark + wordmark
 * ---------------------------------------------------------------- */
.page-auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.page-auth-brand .mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--grad);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  box-shadow: var(--shadow-sm);
}
.page-auth-brand .name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* ----------------------------------------------------------------
 * Titles
 * ---------------------------------------------------------------- */
.page-auth-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.page-auth-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 22px;
  line-height: 1.55;
}

/* ----------------------------------------------------------------
 * Form field · label + input
 * ---------------------------------------------------------------- */
.page-auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.page-auth-field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-soft);
}
.page-auth-field input {
  height: 40px;
  padding: 0 12px;
  font-size: 13.5px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  transition: border-color var(--t), box-shadow var(--t);
}
.page-auth-field input::placeholder {
  color: var(--text-faint);
}
.page-auth-field input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 4px rgba(99,91,255,0.12);
}

/* ----------------------------------------------------------------
 * Row · remember-me + forgot link
 * ---------------------------------------------------------------- */
.page-auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.page-auth-row a {
  color: var(--primary);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--t);
}
.page-auth-row a:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------------------
 * Submit · full-width primary button (composes with .btn .btn-primary)
 * ---------------------------------------------------------------- */
.page-auth-submit {
  width: 100%;
  justify-content: center;
}

/* ----------------------------------------------------------------
 * Divider · "or" with horizontal lines
 * ---------------------------------------------------------------- */
.page-auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  color: var(--text-faint);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.page-auth-divider::before,
.page-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ----------------------------------------------------------------
 * Magic-link alternative button · full width, neutral surface
 * ---------------------------------------------------------------- */
.page-auth-magic {
  width: 100%;
  justify-content: center;
}

/* ----------------------------------------------------------------
 * Footer link
 * ---------------------------------------------------------------- */
.page-auth-foot {
  text-align: center;
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 24px;
}
.page-auth-foot a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t);
}
.page-auth-foot a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* ================================================================
 * MAGIC-SENT screen
 * ================================================================ */

/* 64px primary-soft hero glyph (envelope renders inside) */
.page-auth-magic-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--primary-soft);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  color: var(--primary);
}
.page-auth-magic-icon svg {
  width: 28px;
  height: 28px;
}

/* Mono chip showing the recipient address */
.page-auth-magic-email {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--text);
  word-break: break-all;
}

/* Numbered "what happens next" list */
.page-auth-magic-steps {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-soft);
}
.page-auth-magic-steps .step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.page-auth-magic-steps .num {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 10px;
  font-weight: 600;
  display: grid;
  place-items: center;
  margin-top: 1px;
}

/* ================================================================
 * WELCOME wizard (step 1 of 4 — set password)
 * ================================================================ */

/* Wider card to host the 4-bar meter + checklist */
.page-auth-welcome-card {
  width: 520px;
  padding: 36px 36px 30px;
}

/* Hero greeting with gradient-clipped first name */
.page-auth-welcome-hero {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--text);
}
.page-auth-welcome-hero .name {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.page-auth-welcome-sub {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0 0 24px;
  line-height: 1.55;
}

/* 4-bar progress meter · inactive = bg-tint, active = primary gradient */
.page-auth-welcome-meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: 8px 0 14px;
}
.page-auth-welcome-meter .bar {
  height: 4px;
  background: var(--bg-tint);
  border-radius: 99px;
  transition: background var(--t);
}
.page-auth-welcome-meter .bar.on {
  background: var(--grad);
}
.page-auth-welcome-meter-text {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* Preview checklist of remaining onboarding steps */
.page-auth-welcome-checklist {
  margin: 18px 0 22px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-soft);
}
.page-auth-welcome-checklist .row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-auth-welcome-checklist .row .ico {
  width: 14px;
  height: 14px;
  color: var(--text-faint);
  flex-shrink: 0;
}
.page-auth-welcome-checklist .row.on .ico {
  color: var(--primary);
}
.page-auth-welcome-checklist .row.on {
  color: var(--text);
}

/* ===== pages/waiting/waiting.css ===== */
/* ============================================================
 * CLOSER WAITING SCREEN · pages/waiting/waiting.js
 *
 * Calm full-bleed holding page. Locked tokens only (00-tokens.css):
 * light + dark themes, brand purple via var(--primary), no red /
 * green / amber anywhere. Layout family: pages/auth/auth.css
 * (.page-auth-frame gradient field, centered stage).
 *
 * Owner: stage/waiting-page. Bundled into styles/bundle.css by
 * scripts/build-bundle-css.sh (LAW 0.09).
 * ============================================================ */

.page-waiting-frame {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  position: relative;
  background:
    radial-gradient(circle at 20% 0%, rgba(99, 91, 255, 0.10), transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(99, 91, 255, 0.06), transparent 50%),
    var(--bg-warm);
}

/* Faint architectural grid, masked to the center, same treatment as the
 * auth magic hero. Reads as "the room is being built", stays whisper-quiet. */
.page-waiting-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.28;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at center, black 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 55% at center, black 20%, transparent 78%);
  pointer-events: none;
}

.page-waiting-stage {
  position: relative;
  z-index: 1;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* -------- Brand -------- */
.page-waiting-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
}
.page-waiting-brand-mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: contain;
  display: block;
  box-shadow: 0 6px 16px -4px rgba(10, 14, 26, 0.35);
}
.page-waiting-brand-name {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.012em;
  color: var(--text-soft);
}

/* -------- Live pulse indicator -------- */
.page-waiting-pulse {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--primary-soft);
  border: 1px solid var(--status-working-bd);
  margin-bottom: 26px;
}
.page-waiting-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  position: relative;
  flex-shrink: 0;
}
.page-waiting-pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--primary);
  opacity: 0;
  animation: pageWaitingPulseRing 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}
@keyframes pageWaitingPulseRing {
  0% { opacity: 0.5; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(1.6); }
}
.page-waiting-pulse-label {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}

/* -------- Copy -------- */
.page-waiting-title {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.026em;
  line-height: 1.08;
  color: var(--text);
  margin: 0 0 16px;
  max-width: 580px;
}
.page-waiting-sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  max-width: 480px;
}

/* -------- Logout (the only action) -------- */
.page-waiting-actions {
  margin-top: 40px;
}
.page-waiting-logout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: color var(--t), border-color var(--t), background var(--t), box-shadow var(--t);
}
.page-waiting-logout:hover {
  color: var(--text);
  border-color: var(--border-focus);
  background: var(--hover);
  box-shadow: var(--shadow-sm);
}
.page-waiting-logout:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.page-waiting-logout svg {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color var(--t);
}
.page-waiting-logout:hover svg {
  color: var(--primary);
}

/* -------- Motion respect -------- */
@media (prefers-reduced-motion: reduce) {
  .page-waiting-pulse-dot::after {
    animation: none;
    opacity: 0.35;
    transform: scale(1.2);
  }
}

/* -------- Small viewports -------- */
@media (max-width: 640px) {
  .page-waiting-title {
    font-size: 28px;
  }
  .page-waiting-sub {
    font-size: 14.5px;
  }
}

/* ===== pages/trainee/trainee.css ===== */
/* ============================================================
 * APEX SALES OS - TRAINEE DASHBOARD + MODULES
 * Owner: r7-001 (W11 trainee.css)
 *
 * Page-local styles for #/dashboard and #/training (trainee view).
 * All values driven by the canonical token system (00-tokens.css).
 * Animations (livePulse) come from 01-base.css.
 * Chip primitive (.chip, .chip.purple-soft, .chip.live) lives in
 * 02-primitives.css and is composed here for the "what's next" card.
 *
 * Layout target: 1440x900 viewport, no vertical scroll.
 * Themes: light + dark, both driven by html[data-theme] tokens.
 * NEVER red. Locked modules use diagonal purple lines.
 * ============================================================ */

/* ---------- shared trainee page frame ---------- */
.page-trainee-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
  align-items: start;
}

/* ---------- dashboard hero ---------- */
.page-trainee-hero {
  background:
    radial-gradient(circle at 100% 0%, rgba(99, 91, 255, 0.10), transparent 50%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  box-shadow: var(--shadow-sm);
}
.page-trainee-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.page-trainee-hero-eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  animation: livePulse 1.6s infinite;
}
.page-trainee-hero-greet {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 6px 0 4px;
}
.page-trainee-hero-greet .name {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.page-trainee-hero-meta {
  font-size: 13px;
  color: var(--text-muted);
}
.page-trainee-hero-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.page-trainee-hero-stat {
  text-align: right;
}
.page-trainee-hero-num {
  font-family: 'Inter Tight', sans-serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.page-trainee-hero-lbl {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

/* ---------- "what's next" wizard card (single action) ---------- */
.page-trainee-next {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}
.page-trainee-next-eyebrow {
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.page-trainee-next-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}
.page-trainee-next-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.55;
}
.page-trainee-next-meta {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.page-trainee-next-meta .chip {
  font-size: 11px;
}

/* ---------- right rail ---------- */
.page-trainee-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-trainee-rail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.page-trainee-rail-card h3 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.page-trainee-rail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.page-trainee-rail-row:last-child {
  border-bottom: 0;
}
.page-trainee-rail-row .av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-tint);
  color: var(--text);
  font-size: 10px;
  font-weight: 600;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.page-trainee-rail-row .meta {
  color: var(--text-muted);
  font-size: 11px;
}
.page-trainee-rail-row .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  margin-left: auto;
  animation: livePulse 1.6s infinite;
}

/* ---------- modules · canvas (matches mockup STATE 02) ---------- */
.modlist-canvas {
  padding: 18px 28px 22px;
}
.modlist-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 4px;
}
.modlist-head-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--text);
}
.modlist-head-sub {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 6px 0 0;
}
.modlist-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 99px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  color: var(--text-soft);
  transition: background var(--t), color var(--t), border-color var(--t);
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.filter-pill:hover {
  background: var(--hover);
  color: var(--text);
}
.filter-pill.active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--status-done-bd);
  font-weight: 600;
}
.filter-pill .count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.filter-pill.active .count {
  background: var(--surface);
  color: var(--primary);
  border-color: var(--status-done-bd);
}

/* ---------- modules grid · head (search + filter) ---------- */
.page-trainee-modules-head {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 4px;
}
.page-trainee-modules-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--t), box-shadow var(--t);
}
.page-trainee-modules-search:focus-within {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.page-trainee-modules-search input {
  border: 0;
  background: transparent;
  flex: 1;
  font-size: 13px;
  outline: none;
  padding: 0;
  color: var(--text);
  font-family: inherit;
}
.page-trainee-modules-search input::placeholder {
  color: var(--text-faint);
}
.page-trainee-modules-search .ico {
  width: 14px;
  height: 14px;
  color: var(--text-faint);
  flex-shrink: 0;
}

/* ---------- modules · resume card ---------- */
.page-trainee-modules-resume {
  background:
    radial-gradient(circle at 0% 100%, rgba(99, 91, 255, 0.08), transparent 50%),
    var(--surface);
  border: 1px solid var(--status-done-bd);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}
.page-trainee-modules-resume-eye {
  font-size: 10.5px;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.page-trainee-modules-resume-title {
  font-size: 15px;
  font-weight: 600;
  margin: 4px 0 2px;
  letter-spacing: -0.005em;
}
.page-trainee-modules-resume-meta {
  font-size: 12px;
  color: var(--text-muted);
}

/* ---------- modules · grid (mockup STATE 02 parity) ---------- */
.page-trainee-mod-grid,
.mod-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.page-trainee-mod,
.mod-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
  cursor: pointer;
  min-width: 0;
}
.page-trainee-mod:hover,
.mod-card:hover {
  background: var(--hover);
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.page-trainee-mod:focus-visible,
.mod-card:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* state · done */
.page-trainee-mod.done,
.mod-card.done {
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(99, 91, 255, 0.08), transparent 65%),
    var(--surface);
}

/* state · active (in progress) */
.page-trainee-mod.active,
.mod-card.active {
  border-color: var(--primary);
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(99, 91, 255, 0.10), transparent 65%),
    var(--surface);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.08), var(--shadow-xs);
}

/* state · locked (diagonal purple, never red) */
.page-trainee-mod.locked,
.mod-card.locked {
  background-image: repeating-linear-gradient(
    45deg,
    var(--bg-tint) 0 6px,
    rgba(99, 91, 255, 0.10) 6px 12px
  );
  background-color: var(--bg-tint);
  cursor: not-allowed;
}
.page-trainee-mod.locked:hover,
.mod-card.locked:hover {
  transform: none;
  background-color: var(--bg-tint);
  border-color: var(--border);
  box-shadow: none;
}
.page-trainee-mod.locked .page-trainee-mod-title,
.page-trainee-mod.locked .page-trainee-mod-sub,
.page-trainee-mod.locked .page-trainee-mod-foot,
.mod-card.locked .mod-card-title,
.mod-card.locked .mod-card-sub,
.mod-card.locked .mod-card-foot {
  color: var(--text-faint);
}

/* head row · M-number badge + title + status chip */
.page-trainee-mod-head,
.mod-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-trainee-mod-num,
.mod-card-num {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--bg-tint);
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.page-trainee-mod.done .page-trainee-mod-num,
.mod-card.done .mod-card-num {
  background: var(--primary);
  color: #fff;
}
.page-trainee-mod.active .page-trainee-mod-num,
.mod-card.active .mod-card-num {
  background: var(--surface);
  color: var(--primary);
  border: 1.5px solid var(--primary);
}
.page-trainee-mod.locked .page-trainee-mod-num,
.mod-card.locked .mod-card-num {
  color: var(--text-faint);
}

.page-trainee-mod-title,
.mod-card-title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-trainee-mod-sub,
.mod-card-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* foot · dashed-top, status-aware meta pip */
.page-trainee-mod-foot,
.mod-card-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 11px;
  color: var(--text-faint);
}
.mod-card-foot-pip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mod-card-foot-pip svg {
  width: 10px;
  height: 10px;
}

/* ---------- status chips (mockup parity, NEVER red) ---------- */
.page-trainee-mod-chip,
.mod-card-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.page-trainee-mod-chip .dot,
.mod-card-status .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.page-trainee-mod-chip.done,
.mod-card-status.done {
  background: var(--status-done-bg);
  color: var(--status-done-fg);
}
.page-trainee-mod-chip.done .dot,
.mod-card-status.done .dot { background: var(--status-done); }

.page-trainee-mod-chip.active,
.page-trainee-mod-chip.working,
.mod-card-status.active {
  background: var(--status-working-bg);
  color: var(--status-working-fg);
}
.page-trainee-mod-chip.active .dot,
.page-trainee-mod-chip.working .dot,
.mod-card-status.active .dot { background: var(--status-working); }

.page-trainee-mod-chip.stuck,
.mod-card-status.stuck {
  background: var(--status-stuck-bg, var(--status-notstarted-bg));
  color: var(--status-stuck-fg, var(--status-notstarted-fg));
}
.page-trainee-mod-chip.locked,
.page-trainee-mod-chip.notstarted,
.mod-card-status.locked,
.mod-card-status.notstarted {
  background: var(--status-notstarted-bg);
  color: var(--status-notstarted-fg);
}
.page-trainee-mod-chip.locked .dot,
.page-trainee-mod-chip.notstarted .dot,
.mod-card-status.locked .dot,
.mod-card-status.notstarted .dot { background: var(--status-notstarted); }

/* ============================================================
 * RECOVERED FROM origin/fix/px-12-trainee-home (brain-merge auto-resolve dropped these)
 * Sarah's dashboard war-room hero + cockpit KPI row (STATE 01 parity).
 * Page-namespaced under .page-trainee-kpis / .page-trainee-war-room
 * so no shared primitive is touched.
 * ============================================================ */

/* ---------- dashboard war-room hero (STATE 01 parity) ---------- */
.page-trainee-war-room {
  position: relative;
  overflow: hidden;
}
.page-trainee-war-num small {
  -webkit-text-fill-color: var(--text-muted);
}

/* ---------- dashboard cockpit KPI row (STATE 01 parity) ---------- */
/* Tightens the shared kpi-tile primitive to match the .cockpit-kpi
 * spec from the mockup. Page-local so no shared CSS is touched. */
.page-trainee-kpis {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 2px;
  margin-bottom: 0;
}
.page-trainee-kpis .kpi-tile {
  padding: 14px 16px;
  border-radius: var(--radius-lg);
}
.page-trainee-kpis .kpi-tile-head {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  gap: 7px;
  align-items: center;
}
.page-trainee-kpis .kpi-tile-head .ico {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--bg-tint);
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.page-trainee-kpis .kpi-tile-head .ico svg {
  width: 11px;
  height: 11px;
}
.page-trainee-kpis .kpi-tile-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.page-trainee-kpis .kpi-tile-num {
  font-family: 'Inter Tight', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.page-trainee-kpis .kpi-tile-num.purple {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.page-trainee-kpis .kpi-tile-num-small {
  font-size: 11.5px !important;
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 4px;
}
.page-trainee-kpis .kpi-tile-num.purple .kpi-tile-num-small {
  -webkit-text-fill-color: var(--text-muted);
}
.page-trainee-kpis .kpi-tile-delta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.page-trainee-kpis .kpi-tile-delta svg {
  width: 10px;
  height: 10px;
}
.page-trainee-kpis .kpi-tile .spark,
.page-trainee-kpis .kpi-tile svg.spark {
  margin-top: 8px;
}


/* ============================================================
 * R8 — TRAINING COCKPIT (Layer 1)  ·  Route: #/training
 * Page-namespaced under .page-train-cockpit so no shared CSS is touched.
 * 1440x900 viewport, NO SCROLL. Zero red. No emoji. Single pulse dot
 * on FLOOR LIVE eyebrow only. JBM huge numbers. Tabular nums.
 * ============================================================ */

.page-train-cockpit {
  padding: 14px 24px 18px;
  display: flex;
  flex-direction: column;
  font-family: 'Inter Tight', system-ui, sans-serif;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.page-train-cockpit-body {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr); /* sections / kpi / lower fills (hero row deleted 2026-07-11) */
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--text-faint) transparent;
  padding-right: 4px;
}
.page-train-cockpit-body::-webkit-scrollbar { width: 8px; }
.page-train-cockpit-body::-webkit-scrollbar-thumb {
  background: var(--text-faint);
  border-radius: 4px;
}
.page-train-cockpit-body::-webkit-scrollbar-track { background: transparent; }

/* ---- shared spark + animations ---- */
@keyframes pageTrainCockpitLivePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.16); }
  50%      { box-shadow: 0 0 0 6px rgba(99, 91, 255, 0.06); }
}
@keyframes pageTrainCockpitDotPulse {
  0%, 100% { r: 2.6; opacity: 1; }
  50%      { r: 4;   opacity: .5; }
}

.page-train-cockpit-spark {
  display: block;
  height: 28px;
  width: 100%;
  margin-top: 10px;
}
.page-train-cockpit-spark-line {
  fill: none;
  stroke: url(#page-train-cockpit-sparkGrad);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.page-train-cockpit-spark-area {
  fill: url(#page-train-cockpit-sparkAreaGrad);
  opacity: .35;
}
.page-train-cockpit-spark-dot {
  fill: var(--primary);
  animation: pageTrainCockpitDotPulse 1.6s ease-in-out infinite;
}

.page-train-cockpit-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.16);
  animation: pageTrainCockpitLivePulse 1.6s ease-in-out infinite;
  display: inline-block;
}

/* ---- ROW 1 · WAR-ROOM HERO ---- */
.page-train-cockpit-war {
  background:
    radial-gradient(50% 50% at 0% 0%, rgba(122, 115, 255, 0.10), transparent 70%),
    radial-gradient(60% 60% at 100% 100%, rgba(99, 91, 255, 0.14), transparent 65%),
    var(--surface);
  border: 1px solid var(--status-done-bd);
  border-radius: var(--radius-xl);
  padding: 18px 22px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.06), var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.page-train-cockpit-war-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
}
.page-train-cockpit-war-col {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.page-train-cockpit-eye {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.page-train-cockpit-eye.live { color: var(--primary); }

.page-train-cockpit-war-countdown {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 44px;
  letter-spacing: -.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-train-cockpit-war-num {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.034em;
  font-size: 44px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.page-train-cockpit-war-num.purple {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-train-cockpit-war-num small {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 6px;
  letter-spacing: -.010em;
  -webkit-text-fill-color: var(--text-muted);
}
.page-train-cockpit-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.5;
}
.page-train-cockpit-meta b {
  color: var(--text);
  font-weight: 600;
}
.page-train-cockpit-meta .accent {
  color: var(--primary);
  font-weight: 600;
}

/* ---- ROW 2 · KPI strip + PACE arithmetic ---- */
.page-train-cockpit-row2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.page-train-cockpit-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.page-train-cockpit-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color var(--t), box-shadow var(--t);
}
.page-train-cockpit-kpi:hover {
  border-color: var(--status-done-bd);
  box-shadow: var(--shadow-xs);
}
.page-train-cockpit-kpi-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.page-train-cockpit-kpi-ico {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--bg-tint);
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.page-train-cockpit-kpi-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.page-train-cockpit-kpi-num {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.020em;
  font-size: 24px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.page-train-cockpit-kpi-num.purple {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-train-cockpit-kpi-num small {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 4px;
  -webkit-text-fill-color: var(--text-muted);
}
.page-train-cockpit-kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--primary);
  font-family: 'JetBrains Mono', monospace;
}
.page-train-cockpit-kpi .page-train-cockpit-spark { margin-top: 4px; }

.page-train-cockpit-pace {
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(99, 91, 255, 0.08), transparent 65%),
    var(--surface);
  border: 1px solid var(--status-done-bd);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.page-train-cockpit-pace-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-train-cockpit-pace-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
}
.page-train-cockpit-pace-stamp {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-faint);
}
.page-train-cockpit-pace-body {
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.55;
}
.page-train-cockpit-pace-body b {
  color: var(--text);
  font-weight: 700;
}
.page-train-cockpit-pace-body b.accent {
  color: var(--primary);
}
.page-train-cockpit-pace-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.page-train-cockpit-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--bg-tint);
  color: var(--text-soft);
  border: 1px solid var(--border);
  font-weight: 600;
  letter-spacing: .04em;
}
.page-train-cockpit-chip.purple {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--status-done-bd);
  font-weight: 700;
}

/* ---- ROW 2.5 · SECTION STRIP ---- */
.page-train-cockpit-sections {
  display: grid;
  grid-template-columns: 86px repeat(5, 1fr);
  gap: 4px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 5px;
}
.page-train-cockpit-sections-lbl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 8px;
}
.page-train-cockpit-section {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 7px 11px;
  border-radius: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  transition: transform var(--t), box-shadow var(--t);
}
.page-train-cockpit-section:hover { transform: translateY(-1px); box-shadow: var(--shadow-xs); }
.page-train-cockpit-section-done {
  background: linear-gradient(90deg, rgba(99, 91, 255, 0.10), transparent 60%), var(--surface);
  border-color: var(--status-done-bd);
}
.page-train-cockpit-section-active {
  background:
    linear-gradient(90deg, rgba(99, 91, 255, 0.14), transparent 50%),
    var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(99, 91, 255, 0.10);
  position: relative;
}
.page-train-cockpit-section-active::before {
  content: '';
  position: absolute;
  right: 8px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.16);
  animation: pageTrainCockpitLivePulse 1.6s ease-in-out infinite;
}
.page-train-cockpit-section-locked {
  background-image: repeating-linear-gradient(
    45deg,
    var(--bg-tint) 0 6px,
    rgba(99, 91, 255, 0.18) 6px 12px
  );
  border-color: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
}
.page-train-cockpit-section-locked:hover { transform: none; box-shadow: none; }
.page-train-cockpit-section-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--bg-tint);
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
.page-train-cockpit-section-done .page-train-cockpit-section-mark,
.page-train-cockpit-section-active .page-train-cockpit-section-mark {
  background: var(--grad);
  color: white;
  box-shadow: 0 2px 6px -2px rgba(99, 91, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.page-train-cockpit-section-locked .page-train-cockpit-section-mark {
  background: rgba(99, 91, 255, 0.12);
  color: var(--text-muted);
}
.page-train-cockpit-section-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-train-cockpit-section-locked .page-train-cockpit-section-name {
  color: var(--text-muted);
}
.page-train-cockpit-section-prog {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  padding-right: 4px;
}
.page-train-cockpit-section-done .page-train-cockpit-section-prog {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-train-cockpit-section-active .page-train-cockpit-section-prog {
  color: var(--primary);
}

/* ---- ROW 3 · NEXT-ACTION CARD + RIGHT RAIL ---- */
.page-train-cockpit-lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 12px;
  overflow: hidden;
  min-height: 0;
}

.page-train-cockpit-next {
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(99, 91, 255, 0.10), transparent 65%),
    var(--surface);
  border: 1px solid var(--status-done-bd);
  border-radius: var(--radius-xl);
  padding: 22px 26px;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.06), var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.page-train-cockpit-next-mbadge {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: var(--grad);
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', monospace;
  color: white;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 6px 18px -6px rgba(99, 91, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.page-train-cockpit-next-body { min-width: 0; }
.page-train-cockpit-next-eye {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 8px;
}
.page-train-cockpit-next-ttl {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.15;
  color: var(--text);
}
.page-train-cockpit-next-sub {
  font-size: 13px;
  color: var(--text-soft);
  margin-top: 6px;
  line-height: 1.5;
  max-width: 540px;
}
.page-train-cockpit-next-tags {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.page-train-cockpit-next-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 4px 9px;
  border-radius: 99px;
  background: var(--bg-tint);
  color: var(--text-soft);
  border: 1px solid var(--border);
}
.page-train-cockpit-next-tag.purple {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--status-done-bd);
}
.page-train-cockpit-next-ctawrap {
  display: flex;
  align-items: center;
}
.page-train-cockpit-btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--grad);
  color: white;
  border: 1px solid transparent;
  padding: 14px 22px;
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -.005em;
  border-radius: 10px;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 8px 22px -6px rgba(99, 91, 255, 0.55),
    0 3px 8px -3px rgba(99, 91, 255, 0.36);
  transition: all var(--t);
  cursor: pointer;
  font-family: inherit;
}
.page-train-cockpit-btn-hero:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* right rail */
.page-train-cockpit-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}
.page-train-cockpit-rail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-train-cockpit-rail-card.carrot {
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(99, 91, 255, 0.14), transparent 65%),
    radial-gradient(50% 50% at 0% 100%, rgba(122, 115, 255, 0.10), transparent 70%),
    var(--surface);
  border: 1px solid var(--status-done-bd);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.06), var(--shadow-sm);
}
.page-train-cockpit-rail-card.locked {
  background-image: repeating-linear-gradient(
    45deg,
    var(--bg-tint) 0 6px,
    rgba(99, 91, 255, 0.16) 6px 12px
  );
}
.page-train-cockpit-rail-card.locked .page-train-cockpit-rail-eye,
.page-train-cockpit-rail-card.locked .page-train-cockpit-rail-ttl {
  color: var(--text-muted);
}
.page-train-cockpit-rail-eye {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-train-cockpit-rail-eye .accent { color: var(--primary); }
.page-train-cockpit-rail-ttl {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--text);
}
.page-train-cockpit-rail-num {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.022em;
  font-size: 26px;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 2px;
}
.page-train-cockpit-rail-num small {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 4px;
  -webkit-text-fill-color: var(--text-muted);
}
.page-train-cockpit-rail-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.page-train-cockpit-rail-sub b {
  color: var(--text);
  font-weight: 600;
}
.page-train-cockpit-rail-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-top: 4px;
  cursor: pointer;
}

/* ticker */
.page-train-cockpit-ticker {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.page-train-cockpit-ticker-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
}
.page-train-cockpit-ticker-row .nm {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-train-cockpit-ticker-row .amt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-train-cockpit-ticker-row .ago {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-faint);
}

/* ============================================================
 * LAYER 2  ·  SECTION DRILL-DOWN  (#/training/section/:id)
 * Namespace: .page-train-section-*
 * 1440x900, no vertical scroll. Mirrors mockup-e visual blueprint.
 * Zero red. Diagonal purple stripes for locked sub-groups.
 * ============================================================ */

.page-train-section {
  padding: 14px 24px 18px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

/* ---- HERO 3-col ---- */
.page-train-section-hero {
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(99, 91, 255, 0.10), transparent 65%),
    radial-gradient(50% 50% at 0% 100%, rgba(122, 115, 255, 0.08), transparent 70%),
    var(--surface);
  border: 1px solid var(--status-done-bd);
  border-radius: var(--radius-xl);
  padding: 18px 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.3fr);
  gap: 22px;
  align-items: stretch;
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.06), var(--shadow-sm);
}

/* Hero col 1 — identity */
.page-train-section-hero-id {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.page-train-section-orb {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--grad);
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', monospace;
  color: white;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow:
    0 8px 22px -6px rgba(99, 91, 255, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.page-train-section-id-text {
  min-width: 0;
}
.page-train-section-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid var(--status-done-bd);
  padding: 3px 9px;
  border-radius: 99px;
  margin-bottom: 7px;
}
.page-train-section-chip-pulse {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.16);
  animation: livePulse 1.6s ease-in-out infinite;
}
.page-train-section-name {
  font-family: 'Inter Tight', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.1;
  color: var(--text);
}
.page-train-section-tag {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.5;
}

/* Hero col 2 — 2x2 KPI grid */
.page-train-section-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.page-train-section-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.page-train-section-kpi-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.page-train-section-kpi-val {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.page-train-section-kpi-val.purple {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-train-section-kpi-val small {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 4px;
  -webkit-text-fill-color: var(--text-muted);
}
.page-train-section-kpi-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
}
.page-train-section-kpi-meta.muted {
  color: var(--text-faint);
}
.page-train-section-kpi-meta svg {
  width: 10px;
  height: 10px;
}

/* Hero col 3 — next-up card */
.page-train-section-next {
  background:
    linear-gradient(135deg, rgba(99, 91, 255, 0.10), transparent 60%),
    var(--surface);
  border: 1px solid var(--status-done-bd);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.page-train-section-next-badge {
  width: 48px;
  height: 48px;
  border-radius: 11px;
  background: var(--grad);
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', monospace;
  color: white;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow:
    0 4px 12px -3px rgba(99, 91, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.page-train-section-next-body {
  min-width: 0;
}
.page-train-section-next-eye {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
/* Static dot (no pulse — keep single pulse rule on the ACTIVE SECTION chip only). */
.page-train-section-next-eye-pulse-static {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
}
.page-train-section-next-ttl {
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--text);
}
.page-train-section-next-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.45;
}
.page-train-section-next-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--grad);
  color: white;
  border: 1px solid transparent;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
  border-radius: 8px;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 6px 16px -4px rgba(99, 91, 255, 0.55);
  transition: all var(--t);
  white-space: nowrap;
  cursor: pointer;
}
.page-train-section-next-cta:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* ---- VIEW TABS ---- */
.page-train-section-tabs {
  display: inline-flex;
  gap: 2px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
  width: fit-content;
}
.page-train-section-tab {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 5px;
  cursor: pointer;
  transition: all var(--t);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  font-family: inherit;
}
.page-train-section-tab:hover {
  color: var(--text);
}
.page-train-section-tab.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}
.page-train-section-tab svg {
  width: 12px;
  height: 12px;
}
.page-train-section-tab.active svg {
  color: var(--primary);
}

/* ---- BODY GRID (main + rail) ---- */
.page-train-section-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 12px;
  overflow: hidden;
  min-height: 0;
}
.page-train-section-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--text-faint) transparent;
  padding-right: 4px;
}
.page-train-section-main::-webkit-scrollbar { width: 8px; }
.page-train-section-main::-webkit-scrollbar-thumb {
  background: var(--text-faint);
  border-radius: 4px;
}
.page-train-section-main::-webkit-scrollbar-track { background: transparent; }

/* ---- 2x2 SUB-GROUP GRID ---- */
.page-train-section-sg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  min-height: 0;
  flex: 1;
}
.page-train-section-sg {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all var(--t);
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.page-train-section-sg:hover {
  border-color: var(--status-done-bd);
  box-shadow: var(--shadow-xs);
}
.page-train-section-sg-single {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}
.page-train-section-sg-done {
  background:
    linear-gradient(135deg, rgba(99, 91, 255, 0.06), transparent 50%),
    var(--surface);
  border-color: var(--status-done-bd);
}
.page-train-section-sg-active {
  background:
    linear-gradient(135deg, rgba(99, 91, 255, 0.10), transparent 55%),
    var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(99, 91, 255, 0.10), var(--shadow-sm);
}
.page-train-section-sg-locked {
  background-image: repeating-linear-gradient(
    45deg,
    var(--bg-tint) 0 6px,
    rgba(99, 91, 255, 0.16) 6px 12px
  );
  border-color: var(--border);
}
.page-train-section-sg-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-train-section-sg-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--bg-tint);
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.page-train-section-sg-done .page-train-section-sg-mark,
.page-train-section-sg-active .page-train-section-sg-mark {
  background: var(--grad);
  color: white;
  box-shadow:
    0 3px 8px -2px rgba(99, 91, 255, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.page-train-section-sg-locked .page-train-section-sg-mark {
  background: rgba(99, 91, 255, 0.12);
  color: var(--text-muted);
}
.page-train-section-sg-ttl {
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.15;
  color: var(--text);
}
.page-train-section-sg-locked .page-train-section-sg-ttl {
  color: var(--text-muted);
}
.page-train-section-sg-meta {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
}
.page-train-section-sg-active .page-train-section-sg-meta {
  color: var(--primary);
}
.page-train-section-sg-done .page-train-section-sg-meta {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-train-section-sg-bar {
  height: 6px;
  background: var(--bg-tint);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.page-train-section-sg-bar-fill {
  height: 100%;
  background: var(--grad);
  box-shadow: 0 0 8px -1px rgba(99, 91, 255, 0.4);
}
.page-train-section-sg-locknote {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
}
.page-train-section-sg-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-top: auto;
  padding-top: 6px;
}
.page-train-section-sg-locked .page-train-section-sg-cta {
  color: var(--text-muted);
}
.page-train-section-sg-cta-btn {
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.page-train-section-sg-cta-btn:hover {
  filter: brightness(1.15);
}

/* ---- MODULES LIST (rows inside an unlocked sub-group) ---- */
.page-train-section-modlist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.page-train-section-modrow {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 9px;
  border-radius: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  transition: background var(--t);
  cursor: pointer;
}
.page-train-section-modrow:hover {
  background: var(--hover);
}
.page-train-section-modrow:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.page-train-section-modrow-done {
  background:
    linear-gradient(90deg, rgba(99, 91, 255, 0.08), transparent 50%),
    var(--surface);
  border-color: var(--status-done-bd);
}
.page-train-section-modrow-active {
  background:
    linear-gradient(90deg, rgba(99, 91, 255, 0.14), transparent 50%),
    var(--surface);
  border-color: var(--primary);
  position: relative;
}
.page-train-section-modrow-active::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--grad);
  border-radius: 0 3px 3px 0;
}
.page-train-section-modrow-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.page-train-section-modrow-done .page-train-section-modrow-num,
.page-train-section-modrow-active .page-train-section-modrow-num {
  color: var(--primary);
}
.page-train-section-modrow-nm {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-train-section-modrow-stat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.page-train-section-modrow-done .page-train-section-modrow-stat,
.page-train-section-modrow-active .page-train-section-modrow-stat {
  color: var(--primary);
}
.page-train-section-modrow-dur {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

/* ---- ALL MODULES GRID (tab 2) ---- */
.page-train-section-allmods {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
}
.page-train-section-allmods-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  align-content: start;
  overflow: hidden;
}
.page-train-section-allmod {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  cursor: pointer;
  transition: all var(--t);
}
.page-train-section-allmod:hover {
  border-color: var(--status-done-bd);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}
.page-train-section-allmod-done {
  background:
    linear-gradient(135deg, rgba(99, 91, 255, 0.06), transparent 55%),
    var(--surface);
  border-color: var(--status-done-bd);
}
.page-train-section-allmod-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(99, 91, 255, 0.10);
}
.page-train-section-allmod-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.page-train-section-allmod-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.page-train-section-allmod-done .page-train-section-allmod-num,
.page-train-section-allmod-active .page-train-section-allmod-num {
  color: var(--primary);
}
.page-train-section-allmod-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--bg-tint);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.page-train-section-allmod-chip-done {
  background: var(--status-done-bg);
  color: var(--status-done-fg);
  border-color: var(--status-done-bd);
}
.page-train-section-allmod-chip-active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--status-done-bd);
}
.page-train-section-allmod-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.2;
}
.page-train-section-allmod-sub {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page-train-section-allmod-foot {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}

/* ---- COMING SOON placeholder (Tests / Schedule) ---- */
.page-train-section-soon {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: grid;
  place-items: center;
  text-align: center;
}
.page-train-section-soon-ttl {
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--text);
  margin-bottom: 6px;
}
.page-train-section-soon-sub {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ---- RAIL (right column) ---- */
.page-train-section-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}
.page-train-section-rail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-train-section-rail-carrot {
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(99, 91, 255, 0.14), transparent 65%),
    radial-gradient(50% 50% at 0% 100%, rgba(122, 115, 255, 0.10), transparent 70%),
    var(--surface);
  border: 1px solid var(--status-done-bd);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.06), var(--shadow-sm);
}
.page-train-section-rail-clears {
  flex: 1;
  overflow: hidden;
}
.page-train-section-rail-eye {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Static dot (purple) — single pulse rule reserved for ACTIVE SECTION chip only. */
.page-train-section-rail-eye-static {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  display: inline-block;
}
.page-train-section-rail-ttl {
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--text);
}
.page-train-section-rail-num {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  letter-spacing: -0.022em;
  font-size: 26px;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 2px;
}
.page-train-section-rail-num small {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 4px;
  -webkit-text-fill-color: var(--text-muted);
}
.page-train-section-rail-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.page-train-section-rail-sub b {
  color: var(--text);
  font-weight: 600;
}
.page-train-section-rail-ticker {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.page-train-section-rail-tickrow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
}
.page-train-section-rail-tickname {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-train-section-rail-tickamt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-train-section-rail-tickago {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-faint);
}

@media (max-width: 1200px) {
  .page-train-section-allmods-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .page-train-section-allmods-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .mods-mod-grid {
    grid-template-columns: 1fr;
  }
  .mods-roadmap-stats {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

/* ============================================================
 * LAYER 3 · MODULE OVERVIEW (PRE-FLIGHT) · #/training/module/:id
 * Single-module hero screen the trainee sees BEFORE the runner.
 * Mirrors mockup-e-active-section.html (single module hero variant).
 * Namespaced .page-train-module-* so it can never collide with the
 * older .mod-detail-* runner styles or the .mods-* dashboard styles.
 * 1440x900. No vertical scroll. Zero red. Zero emojis. No em dashes.
 * ============================================================ */
.page-train-module-shell {
  padding: 14px 24px 18px;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 12px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

/* ---- 1. Compact micro context strip ----------------------- */
.page-train-module-microstrip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  padding: 10px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-muted);
  overflow: hidden;
  white-space: nowrap;
  min-height: 38px;
}
.page-train-module-microstrip-sep {
  color: var(--text-faint);
  padding: 0 2px;
}
.page-train-module-microstrip-key {
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.page-train-module-microstrip-val {
  color: var(--text);
  font-weight: 600;
}
.page-train-module-microstrip-tail {
  margin-left: auto;
  color: var(--primary);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  white-space: nowrap;
}

/* ---- 2. Full-width module hero card ----------------------- */
.page-train-module-hero {
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(99,91,255,.12), transparent 65%),
    radial-gradient(50% 60% at 0% 100%, rgba(122,115,255,.08), transparent 70%),
    var(--surface);
  border: 1px solid var(--status-done-bd);
  border-radius: var(--radius-xl);
  padding: 22px 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
  align-items: stretch;
  box-shadow: 0 0 0 3px rgba(99,91,255,.06), var(--shadow-sm);
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.page-train-module-hero-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.page-train-module-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid var(--status-done-bd);
  padding: 4px 10px;
  border-radius: 99px;
}
.page-train-module-hero-eyebrow-pulse {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(99,91,255,.16);
  animation: livePulse 1.6s ease-in-out infinite;
}

.page-train-module-hero-titlerow {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.page-train-module-hero-badge {
  width: 56px; height: 56px;
  border-radius: 13px;
  background: var(--grad);
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: white; font-size: 15px; font-weight: 700;
  letter-spacing: .03em;
  box-shadow: 0 6px 16px -4px rgba(99,91,255,.55),
              inset 0 0 0 1px rgba(255,255,255,.18);
}
.page-train-module-hero-title {
  margin: 0;
  font-family: 'Inter Tight', sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.020em;
  line-height: 1.12;
  color: var(--text);
}
.page-train-module-hero-title-accent {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

.page-train-module-hero-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 720px;
}

.page-train-module-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.page-train-module-hero-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-soft);
  background: var(--bg-tint);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 99px;
}

.page-train-module-hero-ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 6px;
  flex-wrap: wrap;
}
.page-train-module-hero-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 10px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -.005em;
  color: white;
  background: var(--grad);
  text-decoration: none;
  box-shadow: 0 1px 1px rgba(0,0,0,.04),
              inset 0 0 0 1px rgba(255,255,255,.18),
              0 10px 24px -6px rgba(99,91,255,.55);
  transition: transform var(--t), filter var(--t);
}
.page-train-module-hero-cta-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  color: white;
}
.page-train-module-hero-cta-icon {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  color: white;
}
.page-train-module-hero-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid var(--border);
  text-decoration: none;
  transition: all var(--t);
}
.page-train-module-hero-cta-ghost:hover {
  background: var(--hover);
  color: var(--text);
}

/* hero right column · conic mastery ring */
.page-train-module-hero-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  border-left: 1px dashed var(--border);
  padding-left: 28px;
  min-width: 0;
}
.page-train-module-hero-mastery-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.page-train-module-hero-ring {
  --ring-pct: 23;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background:
    conic-gradient(
      from -90deg,
      #7a73ff 0%,
      #635bff calc(var(--ring-pct) * 0.5%),
      #4f46e5 calc(var(--ring-pct) * 1%),
      var(--bg-tint) calc(var(--ring-pct) * 1%),
      var(--bg-tint) 100%
    );
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 8px 22px -8px rgba(99,91,255,.45);
}
.page-train-module-hero-ring::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.page-train-module-hero-ring-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.page-train-module-hero-ring-num {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.page-train-module-hero-ring-num strong {
  font-size: 44px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.page-train-module-hero-ring-unit {
  font-size: 18px;
  color: var(--text-soft);
  font-weight: 600;
}
.page-train-module-hero-mastery-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.page-train-module-hero-mastery-carrot {
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.010em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- 3. 5-section path strip ------------------------------ */
.page-train-module-pathstrip {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 0;
}
.page-train-module-pathstrip-link {
  flex: 0 0 18px;
  height: 2px;
  background: linear-gradient(90deg, var(--border) 0%, var(--border-strong) 100%);
  margin: 0 -1px;
  align-self: center;
}
.page-train-module-pathstrip-pill {
  position: relative;
  flex: 1 1 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--bg-soft);
  text-decoration: none;
  color: var(--text);
  transition: all var(--t);
  min-width: 0;
}
.page-train-module-pathstrip-pill:hover {
  border-color: var(--status-done-bd);
  background: var(--hover);
}
.page-train-module-pathstrip-pill.is-done {
  background: linear-gradient(135deg, rgba(99,91,255,.10), transparent 55%), var(--surface);
  border-color: var(--status-done-bd);
}
.page-train-module-pathstrip-pill.is-done .page-train-module-pathstrip-stat {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-train-module-pathstrip-pill.is-active,
.page-train-module-pathstrip-pill.is-current {
  background:
    linear-gradient(135deg, rgba(99,91,255,.12), transparent 55%),
    var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(99,91,255,.10), var(--shadow-sm);
}
.page-train-module-pathstrip-pill.is-active .page-train-module-pathstrip-stat,
.page-train-module-pathstrip-pill.is-current .page-train-module-pathstrip-stat {
  color: var(--primary);
}
.page-train-module-pathstrip-pill.is-locked {
  background-image: repeating-linear-gradient(
    45deg,
    var(--bg-tint) 0 6px,
    rgba(99,91,255,.16) 6px 12px
  );
  color: var(--text-muted);
  cursor: not-allowed;
}
.page-train-module-pathstrip-pill.is-locked:hover {
  border-color: var(--border);
  background-image: repeating-linear-gradient(
    45deg,
    var(--bg-tint) 0 6px,
    rgba(99,91,255,.22) 6px 12px
  );
}
.page-train-module-pathstrip-id {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 6px;
  padding: 3px 7px;
}
.page-train-module-pathstrip-pill.is-locked .page-train-module-pathstrip-id {
  background: rgba(99,91,255,.14);
  color: var(--text-muted);
}
.page-train-module-pathstrip-ttl {
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.010em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-train-module-pathstrip-pill.is-locked .page-train-module-pathstrip-ttl {
  color: var(--text-muted);
}
.page-train-module-pathstrip-stat {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.page-train-module-pathstrip-pulse {
  position: absolute;
  top: 8px; right: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(99,91,255,.18);
  animation: livePulse 1.6s ease-in-out infinite;
}
.page-train-module-pathstrip-floor {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
  padding: 9px 14px;
  background: var(--grad);
  color: white;
  border-radius: 99px;
  box-shadow: 0 6px 16px -4px rgba(99,91,255,.55),
              inset 0 0 0 1px rgba(255,255,255,.18);
}
.page-train-module-pathstrip-floor svg {
  color: white;
}
.page-train-module-pathstrip-floor-ttl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: white;
}

/* ---- 4. UP NEXT in S2 list -------------------------------- */
.page-train-module-upnext {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}
.page-train-module-upnext-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-train-module-upnext-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.page-train-module-upnext-all {
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
}
.page-train-module-upnext-all:hover {
  text-decoration: underline;
}
.page-train-module-upnext-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--text-faint) transparent;
  padding-right: 4px;
}
.page-train-module-upnext-list::-webkit-scrollbar { width: 8px; }
.page-train-module-upnext-list::-webkit-scrollbar-thumb {
  background: var(--text-faint);
  border-radius: 4px;
}
.page-train-module-upnext-list::-webkit-scrollbar-track { background: transparent; }
.page-train-module-upnext-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 90px 56px 16px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: transform var(--t), background var(--t), border-color var(--t), box-shadow var(--t);
}
.page-train-module-upnext-row:hover {
  background: var(--surface);
  border-color: var(--status-done-bd);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}
.page-train-module-upnext-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 6px;
  padding: 4px 6px;
  text-align: center;
}
.page-train-module-upnext-name {
  font-family: 'Inter Tight', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.010em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-train-module-upnext-sg {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: right;
}
.page-train-module-upnext-dur {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-faint);
  text-align: right;
}
.page-train-module-upnext-chev {
  display: inline-grid;
  place-items: center;
  color: var(--text-faint);
}
.page-train-module-upnext-row:hover .page-train-module-upnext-chev {
  color: var(--primary);
}

/* ============================================================
 * TRN-SCREEN — Training inside the ONE locked recruiting shell
 * (Ben, 2026-07-11). Values cloned from the pipeline shell
 * (pipeline.css .pp-screen) so all six deck screens are ONE card.
 * ============================================================ */
.trn-screen{--bg:#fdfcfb;--surface:#ffffff;--border:#e6e8ec;--border2:#dfe1e8;--muted:#697386;--faint:#8792a2;--primary:#635bff;--grad:linear-gradient(135deg,#7a73ff,#635bff 35%,#4f46e5 65%,#2563eb);--mono:'JetBrains Mono',ui-monospace,monospace;--sans:'Inter Tight',-apple-system,BlinkMacSystemFont,sans-serif}
.trn-screen{margin:0;height:100%;width:100%;display:flex;flex-direction:column;min-height:0;position:relative;background:var(--bg);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}
.trn-screen .trn-backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#fdfcfb}
.trn-screen .amb{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.trn-screen .blob{position:absolute;border-radius:50%;mix-blend-mode:multiply;will-change:transform}
.trn-screen .b1{width:680px;height:680px;left:-200px;top:-240px;background:radial-gradient(circle,rgba(99,91,255,.16),transparent 62%)}
.trn-screen .b2{width:560px;height:560px;right:-160px;top:120px;background:radial-gradient(circle,rgba(124,116,255,.13),transparent 62%)}
.trn-screen .page-shell.trn-shell{position:relative;z-index:1;flex:1 1 auto;min-height:0;display:flex;padding:26px 34px 34px;background:transparent}
.trn-screen .page-card.trn-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl,20px);box-shadow:0 18px 48px -28px rgba(50,38,130,.34),0 1px 2px rgba(20,20,50,.04);padding:0;gap:0}
.trn-screen .trn-bar{flex:none;position:relative;z-index:30;background:rgba(253,252,251,.82);-webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid var(--border)}
.trn-screen .trn-bar-in{max-width:none;margin:0;padding:0 30px;height:60px;display:flex;align-items:center;gap:16px}
.trn-screen .trn-brand{display:flex;align-items:center;gap:11px;cursor:pointer;flex:none}
.trn-screen .orb-sm{width:30px;height:30px;border-radius:9px;object-fit:contain;background:#0c1020;box-shadow:0 8px 20px -8px rgba(30,22,80,.5),0 0 0 1px rgba(99,91,255,.14)}
.trn-screen .trn-bt{font-weight:700;font-size:14px;letter-spacing:-.01em;line-height:1.1;color:var(--text)}
.trn-screen .trn-bt small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:500;margin-top:2px}
.trn-screen .trn-tabs{display:flex;align-items:center;gap:4px;margin-left:18px;padding-left:18px;border-left:1px solid var(--border)}
.trn-screen .trn-tab{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:-.01em;cursor:pointer;transition:.15s;white-space:nowrap}
.trn-screen .trn-tab:hover{color:var(--text);background:rgba(20,20,50,.045)}
.trn-screen .trn-tab.on{color:var(--primary);background:#f7f6ff;border-color:#d6d2ff;cursor:default}
.trn-screen .trn-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.trn-screen .trn-whoami{display:flex;align-items:center;gap:9px}
.trn-screen .trn-wa-av{width:32px;height:32px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-weight:700;font-size:12px;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #d6d2ff}
.trn-screen .trn-wa-av img{width:100%;height:100%;object-fit:cover;display:block}
.trn-screen .trn-wa-n{font-weight:700;font-size:12.5px;letter-spacing:-.01em;line-height:1.15;color:var(--text)}
.trn-screen .trn-wa-r{font-family:var(--mono);font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin-top:1px}
.trn-screen .trn-logout{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--muted);font-family:var(--sans);font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.trn-screen .trn-logout:hover{color:var(--text);border-color:var(--border2)}
.trn-screen .trn-meta{flex:none;padding:10px 30px 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);text-align:right}
.trn-screen .trn-cockpit-host{flex:1 1 auto;min-height:0;padding:6px 30px 24px;overflow:hidden;display:flex;flex-direction:column}
.trn-screen .trn-cockpit-host.page-train-cockpit{width:auto}

/* ===== pages/trainee/module-detail.css ===== */
/* ============================================================
 * APEX SALES OS · TRAINEE · MODULE DETAIL WRAPPER (page-local)
 * Owner: r7-005-module-detail-css
 *
 * Page-local styles ONLY. Every selector is prefixed
 * `.page-module-detail-` so this file never collides with the
 * shared 00-04 sheets.
 *
 * Layout mirrors design-mockups/03-trainee-dashboard.html
 * STATE 03 (lines 1610-1728): two-column shell
 *   - 260px left rail  (back link + module head + 4-section path +
 *     perfection mandate)
 *   - 1fr right stage  (head bar + section preview + foot bar)
 *
 * Token-driven. Light + dark themes work via html[data-theme] swap.
 * Fits 1440x900 with zero outer scroll; stage media area may scroll
 * internally if the embedded section requires it (mockup parity).
 * No hex. No red. No emoji.
 * ============================================================ */

/* ---------------------------------------------------------------
 * Shell · 260 + 1fr columns. Matches .mod-detail-shell in mockup.
 * --------------------------------------------------------------- */
.page-module-detail-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: start;
  flex: 1;
  min-height: 0;
}

/* ---------------------------------------------------------------
 * Rail · stacked column (back link, module head, section path,
 * perfection mandate). Mockup mod-detail-rail uses 16px gap.
 * --------------------------------------------------------------- */
.page-module-detail-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  position: sticky;
  top: 0;
  align-self: start;
}

.page-module-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--radius);
  align-self: flex-start;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.page-module-detail-back:hover {
  background: var(--hover);
  color: var(--text);
}
.page-module-detail-back svg {
  width: 14px;
  height: 14px;
}

/* Rail head (M-number eyebrow + title + description) */
.page-module-detail-rail-head {
  padding: 0 4px;
}
.page-module-detail-rail-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.page-module-detail-rail-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.014em;
  margin-top: 6px;
  color: var(--text);
  line-height: 1.25;
}
.page-module-detail-rail-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.55;
}

/* Section path list */
.page-module-detail-section-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.page-module-detail-section-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  transition: background var(--t), border-color var(--t);
  text-align: left;
  text-decoration: none;
  color: inherit;
  font: inherit;
}
.page-module-detail-section-step:hover {
  background: var(--hover);
}
.page-module-detail-section-step.active {
  background: var(--primary-soft);
  border-color: var(--status-done-bd);
}
.page-module-detail-section-step.locked {
  cursor: not-allowed;
  opacity: 0.7;
}
.page-module-detail-section-step .pip {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tint);
  border: 1.5px solid var(--border);
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  flex-shrink: 0;
}
.page-module-detail-section-step.done .pip {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.page-module-detail-section-step.active .pip {
  background: var(--surface);
  color: var(--primary);
  border-color: var(--primary);
}
.page-module-detail-section-step .pip svg {
  width: 12px;
  height: 12px;
}
.page-module-detail-section-step .label {
  font-size: 13px;
  color: var(--text-soft);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-module-detail-section-step.done .label {
  color: var(--text);
}
.page-module-detail-section-step.active .label {
  color: var(--text);
  font-weight: 600;
}
.page-module-detail-section-step .meta {
  font-size: 10.5px;
  color: var(--text-faint);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}

/* Perfection mandate card */
.page-module-detail-mandate {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}
.page-module-detail-mandate-title {
  font-weight: 600;
  color: var(--text);
  font-size: 12.5px;
  margin-bottom: 6px;
}

/* ---------------------------------------------------------------
 * Stage · head bar / preview / foot bar
 * --------------------------------------------------------------- */
.page-module-detail-stage {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  min-height: 580px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.page-module-detail-stage-head {
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  flex-wrap: wrap;
}
.page-module-detail-stage-head .num {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-soft);
}
.page-module-detail-stage-head h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--text);
}
.page-module-detail-stage-head .right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Stage body wrapper (centers the section preview) */
.page-module-detail-stage-body {
  flex: 1;
  background: var(--bg-warm);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
  min-height: 0;
  overflow: auto;
}

/* Video preview surface (mirrors mockup .video-frame) */
.page-module-detail-video-frame {
  width: 92%;
  max-width: 880px;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(122, 115, 255, 0.10), transparent 65%),
    radial-gradient(40% 40% at 80% 80%, rgba(99, 91, 255, 0.08), transparent 65%),
    #0b0f1a;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 16px 48px -16px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.page-module-detail-video-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at center, black 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 60% at center, black 30%, transparent 80%);
  pointer-events: none;
}
.page-module-detail-video-titlebar {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}
.page-module-detail-video-tag {
  background: rgba(11, 15, 26, 0.72);
  color: #fff;
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 99px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.page-module-detail-video-play {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  box-shadow:
    0 20px 48px -8px rgba(99, 91, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: transform var(--t);
  z-index: 2;
}
.page-module-detail-video-play:hover {
  transform: translate(-50%, -50%) scale(1.04);
}
.page-module-detail-video-play svg {
  width: 30px;
  height: 30px;
  margin-left: 4px;
}
.page-module-detail-video-controls {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 2;
}
.page-module-detail-video-bar {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.page-module-detail-video-bar-fill {
  height: 100%;
  background: var(--grad);
  border-radius: 99px;
}
.page-module-detail-video-time {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* Non-video section preview (MC, voice exam, objection) */
.page-module-detail-stage-preview {
  width: 100%;
  max-width: 720px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.page-module-detail-stage-preview-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}
.page-module-detail-stage-preview-icon svg {
  width: 24px;
  height: 24px;
}
.page-module-detail-stage-preview-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}
.page-module-detail-stage-preview-sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 520px;
  margin: 0;
}
.page-module-detail-stage-preview-cta {
  margin-top: 8px;
}

/* Foot bar */
.page-module-detail-stage-foot {
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.page-module-detail-stage-foot-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-module-detail-stage-foot-meta svg {
  width: 13px;
  height: 13px;
}
.page-module-detail-stage-foot-spacer {
  flex: 1;
}

/* Gate pill (mirrors mockup .gate-note) */
.page-module-detail-gate-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--status-done-bd);
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.page-module-detail-gate-note svg {
  width: 12px;
  height: 12px;
}

/* ===== pages/trainee/runner.css ===== */
/* ============================================================
 * APEX SALES OS · MODULE RUNNER · full mockup-04 parity
 * Mirrors design-mockups/04-module-runner.html
 *
 * Class taxonomy (all 7 states):
 *   .runner-shell        — 2-col grid (rail | stage)
 *   .runner-rail         — left rail (back, module card, section list, gate)
 *   .runner-stage-wrap   — right stage container
 *   .stage-head          — hero copy + optional gate pill
 *   STATE 01 video:    .video-stage, .video-frame, .video-foot, .watch-strip
 *   STATE 02 unlock:   .unlock-card, .unlock-meta-row
 *   STATE 03 mc:       .q-card, .q-options, .q-foot
 *   STATE 04/05 res:   .results-shell, .results-hero, .score-ring, .results-side
 *   STATE 06 apex:     .apex-stage, .apex-orb, .apex-controls, .apex-stage-side
 *   STATE 07 result:   .result-card, .result-score-ring, .criteria-list
 *
 * Hard rules honored:
 *   - zero red anywhere (failures use --text-faint / --bg-tint / --status-stuck)
 *   - zero emojis (icons are svg via icon.js)
 *   - tokens only (no hardcoded hex except a few RGBA shadows from mockup)
 * ============================================================ */

/* ============================================================
 * SHELL — 2-col grid (rail | stage)
 *
 * Mockup design-mockups/04-module-runner.html wraps the runner in an
 * .app-frame card (line 112: border + radius + overflow:hidden + shadow).
 * Our shared .app-frame is a layout container (max-width + padding +
 * gap), not a card. We scope the override here so the runner-shell
 * acts as the visual card, exactly matching the mockup chrome, without
 * touching any shared stylesheet. The scope is `.module-runner-root`
 * (added in module-runner.js entry) so only this page is affected.
 * ============================================================ */
.app-frame.module-runner-root {
  padding: 0;
  gap: 0;
}
.runner-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  background: var(--bg-warm);
  /* IRON LAW (no page scroll): the shell claims the remaining viewport
   * and BOTH the left rail and the right stage scroll internally. Long
   * video sections, long MC quizzes, long apex prompts all stay bounded
   * inside the 1440x900 lock. */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}
.module-runner-root .runner-shell {
  /* Card-style app-frame chrome (mockup line 112-115). */
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.runner-rail {
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  padding: 22px 18px;
  display: flex; flex-direction: column; gap: 14px;
  /* rail scrolls when section list grows long */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--text-faint) transparent;
}
.runner-rail::-webkit-scrollbar { width: 8px; }
.runner-rail::-webkit-scrollbar-thumb {
  background: var(--text-faint);
  border-radius: 4px;
}
.runner-rail::-webkit-scrollbar-track { background: transparent; }
.runner-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-muted); font-weight: 500;
  padding: 6px 10px; border-radius: var(--radius);
  align-self: flex-start; transition: all var(--t);
  margin-bottom: 4px; text-decoration: none;
}
.runner-back:hover { background: var(--hover); color: var(--text); }

.runner-mod-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 16px 14px;
}
.runner-mod-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.runner-mod-title {
  font-size: 19px; font-weight: 600;
  letter-spacing: -0.014em;
  margin: 6px 0 4px;
  color: var(--text);
}
.runner-mod-sub {
  font-size: 12px; color: var(--text-muted);
  line-height: 1.5;
}

.section-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.section-step {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  cursor: default;
  transition: all var(--t);
}
.section-step:hover { background: var(--hover); }
.section-step.active {
  background: var(--primary-soft);
  border: 1px solid var(--status-done-bd);
}
.section-step .pip {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-tint);
  border: 1.5px solid var(--border);
  color: var(--text-faint);
  font-size: 11px; font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}
.section-step.done .pip {
  background: var(--primary); color: #fff;
  border-color: var(--primary);
}
.section-step.active .pip {
  background: var(--surface); color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99,91,255,0.10);
}
.section-step .label {
  font-size: 13px;
  color: var(--text-soft);
  font-weight: 500;
  flex: 1;
}
.section-step.done .label   { color: var(--text); }
.section-step.active .label { color: var(--text); font-weight: 600; }
.section-step .meta {
  font-size: 10.5px;
  color: var(--text-faint);
  font-family: 'JetBrains Mono', monospace;
}

.gate-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}
.gate-card-title {
  font-weight: 600;
  color: var(--text);
  font-size: 12.5px;
  margin-bottom: 6px;
}

/* ============================================================
 * STAGE WRAP — generic
 * ============================================================ */
.runner-stage-wrap {
  padding: 24px 32px 28px;
  min-width: 0;
  display: flex; flex-direction: column;
  gap: 16px;
  /* stage scrolls internally when the active section (video, MC, apex)
   * grows taller than the locked viewport. */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--text-faint) transparent;
}
.runner-stage-wrap::-webkit-scrollbar { width: 8px; }
.runner-stage-wrap::-webkit-scrollbar-thumb {
  background: var(--text-faint);
  border-radius: 4px;
}
.runner-stage-wrap::-webkit-scrollbar-track { background: transparent; }

.stage-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 4px;
}
.stage-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.stage-eyebrow::before {
  content: '';
  width: 14px; height: 1px;
  background: var(--text-faint);
}
.stage-title {
  font-size: 24px; font-weight: 600;
  letter-spacing: -0.018em;
  margin: 6px 0 0;
  color: var(--text);
}
.stage-sub {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 6px 0 0;
  max-width: 720px;
  line-height: 1.5;
}
.gate-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--status-done-bd);
  padding: 5px 11px;
  border-radius: 99px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.gate-pill svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ============================================================
 * STATE 01 — VIDEO PLAYER
 * ============================================================ */
.video-stage {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.video-frame {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(122,115,255,0.18), transparent 65%),
    radial-gradient(40% 40% at 80% 80%, rgba(99,91,255,0.14), transparent 65%),
    #0b0f1a;
  position: relative;
  overflow: hidden;
}
.video-frame::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at center, black 30%, transparent 80%);
  pointer-events: none;
}
/* DECK VARIANT (Ben, 2026-07-22): an embedded slide deck brings its own surface.
   Strip the black video-player background + grid overlay so the deck fills the
   frame flush with no black letterbox border around it. */
.video-stage.is-deck { background: transparent; border: none; box-shadow: none; }
.video-frame.is-deck { background: #fff; }
.video-frame.is-deck::after { display: none; }
.video-frame.is-deck > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-titlebar {
  position: absolute; top: 18px; left: 18px; right: 18px;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 2;
}
.video-tag {
  background: rgba(11,15,26,0.72);
  color: #fff;
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 99px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255,255,255,0.10);
}
.video-play {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 20px 56px -10px rgba(99,91,255,0.6),
    inset 0 0 0 1px rgba(255,255,255,0.22);
  cursor: pointer;
  transition: transform var(--t);
  z-index: 2;
  border: 0;
}
.video-play:hover { transform: translate(-50%, -50%) scale(1.04); }
.video-play svg { margin-left: 5px; }

.video-controls {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  display: flex; align-items: center; gap: 14px;
  z-index: 2;
}
.video-bar {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,0.10);
  overflow: hidden;
}
.video-bar-fill {
  height: 100%;
  background: var(--grad);
  border-radius: 99px;
  transition: width 200ms linear;
}
.video-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.video-foot {
  padding: 14px 22px;
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
}
.video-foot-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 8px;
}
.video-foot-meta svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Watch progress strip */
.watch-strip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 18px;
  align-items: center;
}
.watch-strip-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.watch-strip-bar {
  height: 6px;
  border-radius: 99px;
  background: var(--bg-tint);
  overflow: hidden;
  max-width: 720px;
}
.watch-strip-bar-fill {
  height: 100%;
  background: var(--grad);
  border-radius: 99px;
  transition: width 200ms linear;
}
.watch-strip-pct {
  font-family: 'Inter Tight', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.020em;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.watch-strip-pct small {
  -webkit-text-fill-color: var(--text-faint);
  color: var(--text-faint);
  font-size: 13px;
  font-weight: 500;
  margin-left: 2px;
  letter-spacing: -0.005em;
}
.watch-strip-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
 * STATE 02 — UNLOCK CELEBRATION CARD
 * ============================================================ */
.unlock-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 56px 48px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  align-items: center; gap: 22px;
  position: relative; overflow: hidden;
  text-align: center;
}
.unlock-card::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 380px; height: 380px;
  background: radial-gradient(50% 50% at 70% 30%, rgba(99,91,255,0.12), transparent 75%);
  pointer-events: none;
}
.unlock-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 260px; height: 260px;
  background: radial-gradient(50% 50% at 30% 70%, rgba(122,115,255,0.10), transparent 75%);
  pointer-events: none;
}
.unlock-icon {
  width: 80px; height: 80px;
  border-radius: 24px;
  background: var(--grad);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow:
    0 16px 40px -10px rgba(99,91,255,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.22);
  position: relative; z-index: 1;
}
.unlock-icon svg { width: 36px; height: 36px; }
.unlock-title {
  font-size: 28px; font-weight: 600;
  letter-spacing: -0.020em;
  margin: 0;
  position: relative; z-index: 1;
  color: var(--text);
}
.unlock-sub {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 480px;
  margin: 0;
  line-height: 1.55;
  position: relative; z-index: 1;
}
.unlock-meta-row {
  display: flex;
  gap: 20px;
  padding: 14px 22px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-top: 4px;
  position: relative; z-index: 1;
}
.unlock-meta-stat { text-align: center; padding: 0 8px; }
.unlock-meta-stat .num {
  font-family: 'Inter Tight', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.020em;
  line-height: 1;
  color: var(--text);
}
.unlock-meta-stat .num.purple {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.unlock-meta-stat .num small {
  font-size: 14px;
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
}
.unlock-meta-stat .label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.unlock-meta-divider {
  width: 1px;
  background: var(--border);
  align-self: stretch;
}
.unlock-actions {
  display: flex; gap: 10px;
  margin-top: 4px;
  position: relative; z-index: 1;
}

/* ============================================================
 * STATE 03 — MC QUESTION
 * ============================================================ */
.q-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px 44px 32px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 22px;
  position: relative; overflow: hidden;
}
.q-card::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 320px; height: 320px;
  background: radial-gradient(50% 50% at 70% 30%, rgba(99,91,255,0.08), transparent 75%);
  pointer-events: none;
}
.q-progress {
  display: flex; align-items: center; gap: 14px;
  position: relative; z-index: 1;
}
.q-progress-dots {
  display: flex; gap: 4px;
  flex: 1; max-width: 320px;
}
.q-progress-dot {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: var(--bg-tint);
  transition: background var(--t);
}
.q-progress-dot.done   { background: var(--primary); }
.q-progress-dot.active { background: var(--grad); }
.q-progress-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.q-progress-label b { color: var(--text); font-weight: 700; }

.q-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--primary);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.q-eyebrow::before {
  content: '';
  width: 14px; height: 1px;
  background: var(--primary);
}
.q-prompt {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.30;
  margin: 0;
  max-width: 720px;
  position: relative; z-index: 1;
  color: var(--text);
}

.q-options {
  display: flex; flex-direction: column; gap: 10px;
  position: relative; z-index: 1;
}
.q-option {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--bg-soft);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--t);
}
.q-option:hover {
  background: var(--hover);
  border-color: var(--border-strong);
}
.q-option.selected {
  background: var(--primary-soft);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99,91,255,0.10);
}
.q-option-letter {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all var(--t);
}
.q-option.selected .q-option-letter {
  background: var(--grad);
  color: #fff;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
}
.q-option-text {
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.5;
  font-weight: 500;
  flex: 1;
}
.q-option-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
  transition: all var(--t);
  flex-shrink: 0;
}
.q-option.selected .q-option-check {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.q-foot {
  display: flex; align-items: center; gap: 14px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
  position: relative; z-index: 1;
}
.q-foot-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 8px;
}
/* Scoped foot buttons — match mockup .btn-xl exactly without touching shared primitives.
 * Mockup ref (design-mockups/04-module-runner.html lines 155-156):
 *   .btn-xl { padding:14px 22px; font-size:15px; font-weight:600; letter-spacing:-.005em; border-radius:10px; }
 * Shared .btn-xl uses height-based sizing; this scope wins for the runner foot only. */
.q-foot .btn {
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  height: auto;
}
.q-foot .btn-xl {
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 10px;
  height: auto;
}
.q-foot .btn-primary.btn-xl:hover {
  /* Reinforce the mockup hover: gradient stays, brightness lifts, no white-out. */
  background: var(--grad);
  filter: brightness(1.05);
  transform: translateY(-1px);
  color: #ffffff;
  border-color: transparent;
  box-shadow:
    0 10px 22px -8px rgba(99, 91, 255, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.q-foot .btn-primary.btn-xl:active {
  transform: translateY(0);
  filter: brightness(1.0);
}
.q-foot .btn-primary.btn-xl[disabled],
.q-foot .btn-primary.btn-xl:disabled {
  /* Disabled CTA stays purple (no red), just dimmed. JS already sets inline opacity. */
  filter: saturate(0.7);
}

/* Selected option lift — mockup hover/select feedback. */
.q-option { will-change: transform; }
.q-option:hover { transform: translateY(-1px); }
.q-option.selected { transform: translateY(-1px); }

/* Focus rings — keyboard a11y without contradicting selected purple. */
.q-option:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.18);
}

/* ============================================================
 * STATE 04/05 — MC RESULTS (pass + fail)
 * ============================================================ */
.results-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
}
.results-shell > * { min-width: 0; }

.results-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 30px 32px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 18px;
  position: relative; overflow: hidden;
}
.results-hero::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 280px; height: 280px;
  background: radial-gradient(50% 50% at 70% 30%, rgba(99,91,255,0.10), transparent 75%);
  pointer-events: none;
}
.results-hero.fail::before {
  background: radial-gradient(50% 50% at 70% 30%, rgba(155,161,179,0.10), transparent 75%);
}

.score-ring {
  width: 132px; height: 132px;
  border-radius: 50%;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.score-ring.pass {
  background: conic-gradient(var(--primary) 0 100%, var(--bg-tint) 0 100%);
}
.score-ring.fail {
  background: conic-gradient(var(--text-faint) 0 80%, var(--bg-tint) 80% 100%);
}
.score-ring::before {
  content: '';
  position: absolute; inset: 8px;
  border-radius: 50%;
  background: var(--surface);
}
.score-num {
  position: relative; z-index: 1;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  letter-spacing: -0.030em;
  font-size: 42px;
  line-height: 1;
  color: var(--text);
}
.score-num.pass {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.score-num.fail { color: var(--text); }
.score-num small {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 1px;
  letter-spacing: -0.010em;
  -webkit-text-fill-color: var(--text-muted);
}

.score-head-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  position: relative; z-index: 1;
}
.score-head-body { min-width: 0; }
.score-head-body h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.016em;
  margin: 0;
  color: var(--text);
  overflow-wrap: break-word;
}
.score-head-body p {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 6px 0 0;
  line-height: 1.5;
}
.score-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 99px;
  margin-bottom: 10px;
}
.score-tag.pass {
  background: var(--status-done-bg);
  color: var(--status-done-fg);
  border: 1px solid var(--status-done-bd);
}
.score-tag.fail {
  background: var(--status-stuck-bg);
  color: var(--status-stuck-fg);
  border: 1px solid var(--status-stuck-bd);
}

.answers-list {
  display: flex; flex-direction: column; gap: 8px;
  position: relative; z-index: 1;
}
.answer-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.answer-row .ico {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.answer-row.pass .ico {
  background: var(--primary);
  color: #fff;
}
.answer-row.fail .ico {
  background: var(--status-stuck-bg);
  color: var(--text);
  border: 1px solid var(--status-stuck-bd);
}
.answer-row .q {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  font-weight: 500;
}
.answer-row.fail .q b {
  color: var(--text-soft);
  font-weight: 400;
}
.answer-row .meta {
  font-size: 11.5px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.results-actions {
  display: flex; gap: 10px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
  position: relative; z-index: 1;
}

.results-side {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column; gap: 14px;
  align-self: start;
}
.results-side-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.next-up-card {
  border: 1px solid var(--status-done-bd);
  background: var(--primary-soft);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.next-up-card .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 6px;
}
.next-up-card .title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}
.next-up-card .sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.5;
}
.results-list { display: flex; flex-direction: column; gap: 0; }
.results-list-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-top: 1px dashed var(--border);
  font-size: 12.5px;
}
.results-list-row:first-child {
  border-top: 0;
  padding-top: 4px;
}
.results-list-row .lbl {
  color: var(--text-muted);
  flex: 1;
}
.results-list-row .val {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.results-list-row .val.purple {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.results-coach {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
}
.results-coach b { color: var(--text); }

/* ============================================================
 * STATE 06 — APEX LIVE VOICE EXAM
 * ============================================================ */
.apex-stage {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 1fr 320px;
  min-height: 540px;
  /* No margin — the apex stage fills the runner-stage-wrap edge to edge.
   * Mockup line 1486 sets runner-stage-wrap padding to 0 around apex-stage.
   * module-runner.js mirrors this with stage.style.padding = '0'. */
}
.apex-stage-main {
  padding: 40px 44px;
  display: flex; flex-direction: column; gap: 24px;
  position: relative; overflow: hidden;
}
.apex-stage-main::before {
  content: '';
  position: absolute; top: -80px; right: -80px;
  width: 460px; height: 460px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(99,91,255,0.15), transparent 70%);
  pointer-events: none;
}
.apex-orb-stage {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
  padding: 8px 0 16px;
}
.apex-orb {
  width: 188px; height: 188px;
  border-radius: 50%;
  background: var(--grad);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow:
    0 24px 64px -16px rgba(99,91,255,0.6),
    inset 0 0 0 1px rgba(255,255,255,0.22);
}
.apex-orb::before,
.apex-orb::after {
  content: '';
  position: absolute; inset: -14px;
  border-radius: 50%;
  border: 1.5px solid rgba(99,91,255,0.30);
  animation: orbRing 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.apex-orb::after {
  animation-delay: 1.3s;
  inset: -28px;
}
@keyframes orbRing {
  0%   { opacity: 0.55; transform: scale(0.86); }
  100% { opacity: 0;    transform: scale(1.35); }
}
.apex-orb-wave {
  display: flex; align-items: center; gap: 4px;
  height: 60px;
}
.apex-orb-wave .b {
  width: 4px;
  border-radius: 2px;
  background: #fff;
  animation: orbBar 1s ease-in-out infinite;
}
.apex-orb-wave .b:nth-child(1) { height: 24%; animation-delay:   0ms; }
.apex-orb-wave .b:nth-child(2) { height: 52%; animation-delay:  90ms; }
.apex-orb-wave .b:nth-child(3) { height: 76%; animation-delay: 180ms; }
.apex-orb-wave .b:nth-child(4) { height: 92%; animation-delay: 270ms; }
.apex-orb-wave .b:nth-child(5) { height: 64%; animation-delay: 360ms; }
.apex-orb-wave .b:nth-child(6) { height: 40%; animation-delay: 450ms; }
.apex-orb-wave .b:nth-child(7) { height: 70%; animation-delay: 540ms; }
@keyframes orbBar {
  0%, 100% { transform: scaleY(0.55); opacity: 0.7; }
  50%      { transform: scaleY(1);    opacity: 1;   }
}

.apex-orb-caption { text-align: center; position: relative; z-index: 1; }
.apex-orb-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.apex-orb-line {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.40;
  max-width: 560px;
  margin: 0 auto;
  color: var(--text);
}

.apex-controls {
  display: flex; align-items: center; gap: 14px;
  justify-content: center;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
  margin-top: auto;
  position: relative; z-index: 1;
}
.apex-control-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--t);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}
.apex-control-btn:hover {
  background: var(--hover);
  color: var(--text);
  border-color: var(--border-strong);
}
.apex-control-btn.primary {
  background: var(--grad);
  color: #fff;
  border-color: transparent;
  width: 64px; height: 64px;
  box-shadow:
    0 10px 24px -8px rgba(99,91,255,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.22);
}
.apex-control-btn.danger {
  color: var(--text-muted);
  border-color: var(--border-strong);
}
.apex-control-btn.danger:hover {
  background: var(--hover);
  color: var(--text);
}

/* APEX stage RIGHT — transcript + criteria */
.apex-stage-side {
  background: var(--bg-soft);
  border-left: 1px solid var(--border);
  padding: 22px;
  display: flex; flex-direction: column; gap: 16px;
}
.apex-side-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 14px 12px;
}
.apex-side-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.apex-side-head .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
}
.apex-timer {
  font-family: 'Inter Tight', sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.020em;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.apex-timer-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
}

.apex-tcript {
  display: flex; flex-direction: column; gap: 7px;
  font-size: 12px;
  line-height: 1.45;
  max-height: 260px;
  overflow: hidden;
  position: relative;
}
.apex-tcript::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--surface));
  pointer-events: none;
}
.apex-tcript .ln { color: var(--text-soft); }
.apex-tcript .ln .who {
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 5px;
}
.apex-tcript .ln .who.apex { color: var(--primary); }
.apex-tcript .ln .who.you  { color: var(--text); }
.apex-tcript .ln.live .who { color: var(--primary); }

.apex-criteria { display: flex; flex-direction: column; gap: 6px; }
.apex-criteria-row {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px;
}
.apex-criteria-row .box {
  width: 16px; height: 16px;
  border-radius: 5px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.apex-criteria-row.hit .box {
  background: var(--primary);
  color: #fff;
}
.apex-criteria-row .box.empty {
  background: var(--bg-tint);
  border: 1px solid var(--border);
}
.apex-criteria-row.hit .label { color: var(--text); }
.apex-criteria-row .label    { color: var(--text-muted); }

/* Blinking cursor at the end of the live Apex transcript line */
.apex-tcript-cursor {
  display: inline-block;
  margin-left: 1px;
  animation: apexCursorBlink 1.05s steps(2, end) infinite;
}
@keyframes apexCursorBlink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Mic button mute state — keeps the gradient but drops to a calm,
   ringed treatment so the rep can see at a glance that mic is off. */
.apex-control-btn.primary.muted {
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.apex-control-btn.primary.muted:hover {
  background: var(--hover);
  color: var(--text);
}
/* Subtle press-flash for the replay button when activated */
.apex-control-btn.is-active {
  background: var(--hover);
  color: var(--text);
  border-color: var(--border-strong);
}

/* ============================================================
 * STATE 07 — APEX RESULT CARD
 * ============================================================ */
.result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.result-head {
  padding: 32px 36px 26px;
  display: flex; align-items: start;
  gap: 26px;
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.result-head::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 320px; height: 320px;
  background: radial-gradient(50% 50% at 70% 30%, rgba(99,91,255,0.10), transparent 75%);
  pointer-events: none;
}
.result-score-ring {
  width: 120px; height: 120px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--primary) 0 100%, var(--bg-tint) 0 100%);
}
.result-score-ring::before {
  content: '';
  position: absolute; inset: 8px;
  border-radius: 50%;
  background: var(--surface);
}
.result-score-num {
  position: relative; z-index: 1;
  font-family: 'JetBrains Mono', 'Inter Tight', monospace;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.030em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.result-score-num small {
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 2px;
  -webkit-text-fill-color: var(--text-muted);
}

/* Fail variant — muted stuck-grey ring + solid score color, NEVER red */
.result-card.fail .result-score-ring {
  background: conic-gradient(var(--text-faint) 0 var(--score-pct, 60%), var(--bg-tint) var(--score-pct, 60%) 100%);
}
.result-card.fail .result-score-num {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--text);
  color: var(--text);
}
.result-card.fail .result-head::before {
  background: radial-gradient(50% 50% at 70% 30%, rgba(155,161,179,0.10), transparent 75%);
}
.result-card.fail .result-tag {
  background: var(--status-stuck-bg);
  color: var(--status-stuck-fg);
  border-color: var(--status-stuck-bd);
}

/* Pass-only purple pulse on the ring (subtle, no red anywhere) */
.result-card.pass .result-score-ring {
  animation: result-ring-pulse 3.2s ease-in-out infinite;
}
@keyframes result-ring-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,91,255,0.00); }
  50%      { box-shadow: 0 0 0 8px rgba(99,91,255,0.08); }
}
.result-meta {
  flex: 1;
  min-width: 0;
  position: relative; z-index: 1;
}
.result-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--status-done-bg);
  color: var(--status-done-fg);
  border: 1px solid var(--status-done-bd);
  margin-bottom: 10px;
}
.result-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.014em;
  margin: 0 0 6px;
  color: var(--text);
}
.result-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}
.result-meta-row {
  display: flex;
  gap: 22px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.result-meta-row b {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.result-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  min-height: 280px;
}
.result-body-left {
  padding: 24px 28px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 18px;
}
.result-section-head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}

.criteria-list { display: flex; flex-direction: column; gap: 8px; }
.criteria-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px solid var(--border);
}
.criteria-row .ico {
  width: 20px; height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.criteria-row.pass .ico {
  background: var(--primary);
  color: #fff;
}
.criteria-row.fail .ico {
  background: var(--status-stuck-bg);
  color: var(--text);
  border: 1px solid var(--status-stuck-bd);
}
.criteria-row .label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.criteria-row .note {
  font-size: 11.5px;
  color: var(--text-muted);
}

.audio-player {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
}
.audio-play {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow:
    0 4px 10px -3px rgba(99,91,255,0.4),
    inset 0 0 0 1px rgba(255,255,255,0.22);
  border: 0;
  cursor: pointer;
}
.audio-wave-still {
  flex: 1;
  height: 30px;
  display: flex; align-items: center; gap: 2px;
}
.audio-wave-still .b {
  flex: 1;
  min-width: 2px;
  max-width: 3px;
  background: var(--text-faint);
  border-radius: 1px;
}
.audio-wave-still .b.played { background: var(--primary); }
.audio-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.result-body-right {
  padding: 24px 22px;
  background: var(--bg-soft);
  display: flex; flex-direction: column; gap: 14px;
}
.next-step-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.next-step-card.primary {
  border-color: var(--status-done-bd);
  background: linear-gradient(135deg, rgba(99,91,255,0.04), rgba(99,91,255,0.08));
}
.next-step-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.next-step-card.primary .next-step-meta { color: var(--primary); }
.next-step-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.next-step-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.5;
}
.next-step-card .btn {
  margin-top: 10px;
  width: 100%;
  justify-content: center;
}
/* CTA hover lift + brightness, no white-out */
.next-step-card .btn-primary {
  transition:
    transform .14s ease,
    filter .14s ease,
    box-shadow .14s ease;
}
.next-step-card .btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    0 8px 22px -8px rgba(99,91,255,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.20);
}
.next-step-card .btn-primary:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

/* Result secondary action ("Review transcript") sits under primary card */
.result-secondary-row {
  display: flex;
  gap: 8px;
  margin-top: -4px;
}
.result-secondary-row .btn {
  flex: 1;
  justify-content: center;
  background: transparent;
  color: var(--text-soft);
  border: 1px solid var(--border);
  font-size: 12.5px;
  padding: 9px 12px;
  border-radius: 10px;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.result-secondary-row .btn:hover {
  background: var(--bg-soft);
  color: var(--text);
  border-color: var(--text-faint);
}
.result-secondary-row .btn svg {
  margin-right: 6px;
  opacity: 0.85;
}

/* ============================================================
 * btn-hero / btn-xl — local mockup-sized CTAs.
 *
 * Shared primitives ship .btn-hero { height: 52px } and .btn-xl { height: 42px }.
 * The mockup sizes them by PADDING, not fixed height (mockup lines 156-162).
 * Scope these to the runner so the buttons size to the mockup's hero copy
 * without affecting any other surface.
 * ============================================================ */
.module-runner-root .btn-hero,
.runner-shell .btn-hero {
  height: auto;
  padding: 16px 28px;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.008em;
  border-radius: 12px;
  box-shadow:
    0 1px 1px rgba(0,0,0,0.04),
    inset 0 0 0 1px rgba(255,255,255,0.18),
    0 10px 28px -8px rgba(99,91,255,0.55),
    0 3px 8px -3px rgba(99,91,255,0.40);
}
.module-runner-root .btn-xl,
.runner-shell .btn-xl {
  height: auto;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 10px;
}

/* ============================================================
 * RESPONSIVE — collapse rail at narrow widths
 * ============================================================ */
@media (max-width: 1100px) {
  .runner-shell { grid-template-columns: 1fr; }
  .runner-rail  { border-right: 0; border-bottom: 1px solid var(--border); }
  .results-shell { grid-template-columns: 1fr; }
  .result-body   { grid-template-columns: 1fr; }
  .result-body-left { border-right: 0; border-bottom: 1px solid var(--border); }
  .apex-stage    { grid-template-columns: 1fr; }
  .apex-stage-side { border-left: 0; border-top: 1px solid var(--border); }
}

/* ===== pages/master-class/master-class.css ===== */
/* ============================================================
 * APEX SALES OS · MASTER CLASS · PAGE CSS
 * Owner: Phase 6. Preflight + exam + result.
 *
 * All selectors namespaced .page-mc-* so this file is safe to
 * load globally alongside every other page stylesheet.
 *
 * Tokens only. No hardcoded hex. Zero red. Mono numerics on
 * every timer, prompt count, and stat block.
 *
 * Fits 1440x900 without scroll on every screen.
 * ============================================================ */

/* ============================================================
 * PRE-FLIGHT
 * ============================================================ */
.page-mc-preflight-root {
  display: block;
  background: var(--bg-warm);
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.page-mc-preflight {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 32px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* allow content to scroll internally inside the locked viewport
   * rather than overflowing the page-shell. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--text-faint) transparent;
}
.page-mc-preflight::-webkit-scrollbar { width: 8px; }
.page-mc-preflight::-webkit-scrollbar-thumb {
  background: var(--text-faint);
  border-radius: 4px;
}
.page-mc-preflight::-webkit-scrollbar-track { background: transparent; }
.page-mc-preflight-inner {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.page-mc-eye {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0;
}
.page-mc-headline {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.15;
  margin: 0;
  color: var(--text);
}
.page-mc-lede {
  font-size: 16px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}
.page-mc-stat-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.page-mc-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}
.page-mc-stat-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  display: inline-block;
}
.page-mc-calm {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 540px;
  margin: 6px 0 0;
}
.page-mc-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 18px;
}
.page-mc-actions .btn {
  gap: 8px;
}
.page-mc-fineprint {
  font-size: 12px;
  color: var(--text-faint);
  margin: 0;
}

/* ---- break timer modal body ---- */
.page-mc-break-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
}
.page-mc-break-ring {
  width: 144px; height: 144px;
  border-radius: 50%;
  background: conic-gradient(var(--primary) 0 var(--mc-break-pct, 0%), var(--bg-tint) var(--mc-break-pct, 0%) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.page-mc-break-ring::before {
  content: '';
  position: absolute;
  inset: 8px;
  background: var(--surface);
  border-radius: 50%;
  border: 1px solid var(--border);
}
.page-mc-break-num {
  position: relative;
  font-family: 'JetBrains Mono', monospace;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  z-index: 1;
}
.page-mc-break-sub {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0;
  text-align: center;
  max-width: 280px;
  line-height: 1.5;
}

/* ============================================================
 * EXAM
 * ============================================================ */
.page-mc-exam-root {
  display: block;
  background: var(--bg-warm);
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.page-mc-exam {
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* the bar + stage + foot fit; stage can grow tall during long
   * prompts so it scrolls internally instead of overflowing. */
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
.page-mc-exam > .page-mc-exam-bar,
.page-mc-exam > .page-mc-exam-foot {
  flex-shrink: 0;
}
.page-mc-exam > .page-mc-exam-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--text-faint) transparent;
}
.page-mc-exam > .page-mc-exam-stage::-webkit-scrollbar { width: 8px; }
.page-mc-exam > .page-mc-exam-stage::-webkit-scrollbar-thumb {
  background: var(--text-faint);
  border-radius: 4px;
}
.page-mc-exam > .page-mc-exam-stage::-webkit-scrollbar-track { background: transparent; }
.page-mc-exam-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.page-mc-exam-prog {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.page-mc-exam-prog-mono {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.page-mc-exam-timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
}
.page-mc-exam-timer-mono {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ---- stage card ---- */
.page-mc-exam-stage {
  display: flex;
  flex-direction: column;
  min-height: 480px;
}
.page-mc-prompt-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 26px 28px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.page-mc-prompt-kind {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}
.page-mc-prompt-q {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.014em;
  margin: 0;
  color: var(--text);
  line-height: 1.3;
}

/* ---- MC grid (4 cards) ---- */
.page-mc-mc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.page-mc-mc-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--t);
  outline: none;
}
.page-mc-mc-row:hover {
  border-color: var(--primary-soft, var(--primary));
  background: var(--surface);
}
.page-mc-mc-row.selected {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--primary-glow, rgba(124, 58, 237, 0.18));
}
.page-mc-mc-row:focus-visible {
  border-color: var(--primary);
}
.page-mc-mc-letter {
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.page-mc-mc-row.selected .page-mc-mc-letter {
  background: var(--primary);
  color: var(--surface);
  border-color: var(--primary);
}
.page-mc-mc-txt {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.45;
}

/* ---- voice + objection split ---- */
.page-mc-voice-card {
  gap: 22px;
}
.page-mc-voice-split {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: stretch;
}
.page-mc-voice-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.page-mc-voice-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.page-mc-voice-quote {
  font-size: 14.5px;
  color: var(--text);
  margin: 0;
  text-align: center;
  line-height: 1.5;
  font-style: italic;
}
.page-mc-voice-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.page-mc-voice-mic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
  align-self: flex-start;
}
.page-mc-voice-wave {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 64px;
  padding: 0 8px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}
.page-mc-voice-wave-bar {
  width: 3px;
  background: var(--primary);
  border-radius: 2px;
  animation: pageMcWave 1.2s ease-in-out infinite alternate;
  opacity: 0.85;
  height: 12px;
}
@keyframes pageMcWave {
  0%   { height: 8px; opacity: 0.6; }
  50%  { height: 32px; opacity: 0.95; }
  100% { height: 16px; opacity: 0.75; }
}
.page-mc-voice-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ---- objection criteria checklist ---- */
.page-mc-objection-card .page-mc-voice-quote {
  font-style: normal;
  font-weight: 500;
}
.page-mc-criteria-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}
.page-mc-criteria-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.page-mc-criteria-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}
.page-mc-criteria-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
/* Real-grading states. Met = purple (brand), missed = muted stuck-grey.
 * No red, no green (Apex color law). */
.page-mc-criteria-row.met {
  border-color: var(--primary);
  background: var(--surface);
}
.page-mc-criteria-row.met .page-mc-criteria-dot {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow, rgba(99, 91, 255, 0.18));
}
.page-mc-criteria-row.missed {
  color: #94a3b8;
  opacity: 0.72;
}
.page-mc-criteria-row.missed .page-mc-criteria-dot {
  background: #94a3b8;
  border-color: #94a3b8;
}

/* MC answer feedback after submit. Correct = purple, wrong = stuck-grey. */
.page-mc-mc-row.correct {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-glow, rgba(99, 91, 255, 0.18));
}
.page-mc-mc-row.correct .page-mc-mc-letter {
  background: var(--primary);
  color: var(--surface);
  border-color: var(--primary);
}
.page-mc-mc-row.wrong {
  border-color: #94a3b8;
  opacity: 0.78;
}
.page-mc-mc-row.wrong .page-mc-mc-letter {
  background: #94a3b8;
  color: var(--surface);
  border-color: #94a3b8;
}

/* Live spoken-answer transcript + typed fallback box. */
.page-mc-voice-transcript {
  margin-top: 10px;
  min-height: 22px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.page-mc-voice-transcript:empty {
  display: none;
}
.page-mc-voice-answer {
  margin-top: 10px;
  width: 100%;
  resize: vertical;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  outline: none;
}
.page-mc-voice-answer:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-glow, rgba(99, 91, 255, 0.18));
}

/* ---- exam foot ---- */
.page-mc-exam-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* ============================================================
 * RESULT (pass + retry)
 * ============================================================ */
.page-mc-result-root {
  display: block;
  background: var(--bg-warm);
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.page-mc-result {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 32px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--text-faint) transparent;
}
.page-mc-result::-webkit-scrollbar { width: 8px; }
.page-mc-result::-webkit-scrollbar-thumb {
  background: var(--text-faint);
  border-radius: 4px;
}
.page-mc-result::-webkit-scrollbar-track { background: transparent; }
.page-mc-result-card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px 36px 32px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.page-mc-result-ring-wrap {
  position: relative;
  width: 168px;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.page-mc-result-ring {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  /* Swept from the REAL score: result.js sets --mc-result-pct from the same
   * value rendered in the numeral, so the arc can never disagree with the
   * number inside it. Defaults to a full sweep only when JS has not set it. */
  background: conic-gradient(
    var(--primary) 0 var(--mc-result-pct, 100%),
    var(--bg-tint) var(--mc-result-pct, 100%) 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.page-mc-result-ring::before {
  content: '';
  position: absolute;
  inset: 10px;
  background: var(--surface);
  border-radius: 50%;
  border: 1px solid var(--border);
}
.page-mc-result-ring-num {
  position: relative;
  font-family: 'JetBrains Mono', monospace;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  z-index: 1;
  line-height: 1;
}
.page-mc-result-ring-den {
  position: relative;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  z-index: 1;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.page-mc-result-ring-pulse {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  opacity: 0;
  animation: pageMcPulse 2.4s ease-out infinite;
  z-index: 1;
}
@keyframes pageMcPulse {
  0%   { transform: scale(0.92); opacity: 0.55; }
  100% { transform: scale(1.18); opacity: 0; }
}
.page-mc-result-card.retry .page-mc-result-ring {
  background: conic-gradient(var(--text-faint) 0 var(--mc-result-pct, 70%), var(--bg-tint) var(--mc-result-pct, 70%) 100%);
}
.page-mc-result-card.retry .page-mc-result-ring-num {
  color: var(--text-muted);
}
.page-mc-result-eye {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
}
.page-mc-result-card.retry .page-mc-result-eye {
  color: var(--text-muted);
}
.page-mc-result-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.2;
  margin: 0;
  color: var(--text);
}
.page-mc-result-sub {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 480px;
}
.page-mc-result-stats {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
  padding: 10px 18px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 99px;
}
.page-mc-result-stat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.page-mc-result-stat-mono {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.page-mc-result-stat-div {
  color: var(--text-faint);
  font-size: 12.5px;
}
.page-mc-result-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.page-mc-result-actions .btn {
  gap: 8px;
}

/* ===== pages/hr/hr.css ===== */
/* ============================================================
 * APEX SALES OS - HR / ONBOARDING
 * Owner: r8-001 (W14 hr.css)
 *
 * Page-local styles for the six HR routes:
 *   #/onboarding                            (wizard - one task at a time)
 *   #/onboarding/all                        (admin grid of all hires)
 *   #/onboarding/sign/:docId                (doc viewer + e-sign)
 *   #/onboarding/w9                         (W-9 form)
 *   #/onboarding/id-upload                  (ID + selfie drop)
 *   #/onboarding/direct-deposit             (ACH details)
 *
 * All values driven by the canonical token system (00-tokens.css).
 * Light + dark themes ride on html[data-theme] tokens.
 * Layout target: 1440x900 viewport, no vertical scroll.
 *
 * Step chips for pending/blocked use FAINT and MUTED greys.
 * Never red. The mockup reference is design-mockups/05-hr-onboarding.html.
 * ============================================================ */

/* ============================================================
 * WIZARD LAYOUT (trainee - one action at a time)
 * 1fr main + 320px right rail. Hero card on the left, checklist
 * preview on the right. Both align to the top.
 * ============================================================ */
.page-hr-wizard {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: start;
}

/* hero card - the one next task takes the stage */
.page-hr-wizard-hero {
  background:
    radial-gradient(circle at 100% 0%, rgba(99, 91, 255, 0.10), transparent 50%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  box-shadow: var(--shadow-sm);
}

.page-hr-wizard-eye {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.page-hr-wizard-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 8px 0 6px;
  line-height: 1.2;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.page-hr-wizard-sub {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 540px;
  margin: 0 0 22px;
}

.page-hr-wizard-cta {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* 6-bar progress meter under the hero subtitle */
.page-hr-meter {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin: 12px 0 6px;
}

.page-hr-meter .bar {
  height: 4px;
  background: var(--bg-tint);
  border-radius: 99px;
  transition: background var(--t);
}

.page-hr-meter .bar.on {
  background: var(--grad);
}

.page-hr-meter-text {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* right rail - up-next checklist preview */
.page-hr-upnext {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}

.page-hr-upnext h3 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.page-hr-upnext-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-soft);
}

.page-hr-upnext-row:last-child {
  border-bottom: 0;
}

.page-hr-upnext-row .ico {
  color: var(--text-faint);
  flex-shrink: 0;
}

.page-hr-upnext-row.done {
  color: var(--text);
}

.page-hr-upnext-row.done .ico {
  color: var(--primary);
}

.page-hr-upnext-row .meta {
  color: var(--text-muted);
  font-size: 11px;
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ============================================================
 * GRID LAYOUT (admin - all hires table)
 * 8-column row: avatar + name + 6 step chips.
 * Step chips: done (primary), pending (faint), blocked (muted).
 * No red, ever. Blocked uses neutral muted grey.
 * ============================================================ */
.page-hr-grid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.page-hr-grid-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}

.page-hr-grid-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.page-hr-grid-row {
  display: grid;
  grid-template-columns: 56px 1fr 110px 110px 110px 110px 110px 110px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text);
  transition: background var(--t);
}

.page-hr-grid-row:last-child {
  border-bottom: 0;
}

.page-hr-grid-row:not(.page-hr-grid-head-row):hover {
  background: var(--hover);
}

.page-hr-grid-head-row {
  background: var(--bg-soft);
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.page-hr-grid-row .av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-tint);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  border: 1px solid var(--border);
}

.page-hr-grid-row .name {
  font-weight: 500;
  color: var(--text);
}

.page-hr-grid-row .sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

.page-hr-grid-row .step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.page-hr-grid-row .step.done {
  color: var(--primary);
}

.page-hr-grid-row .step.pending {
  color: var(--text-faint);
}

.page-hr-grid-row .step.blocked {
  color: var(--text-muted);
}

/* ============================================================
 * E-SIGN / DOC VIEWER
 * 1fr doc + 360px sticky sign card.
 * Doc card simulates a printed page (white surface, generous padding).
 * Signature pad is a 120px dashed area; .signed turns it solid + primary.
 * ============================================================ */
.page-hr-esign {
  display: grid;
  grid-template-columns: 1fr 360px;
  /* HEIGHT-CHAIN FIX (recurring scroll regression): a grid with only
   * grid-template-columns gets an implicit single row of `auto`, which
   * sizes to CONTENT and lets .page-hr-doc-card / .page-hr-sign-rail grow
   * past the shell height, so their inner overflow-y:auto never engages
   * and the CTA lands off-screen. `grid-template-rows: minmax(0, 1fr)`
   * pins the row track to the shell's (already height-constrained) height
   * and the `minmax(0,...)` floor lets the grid items shrink below content
   * so the internal scrollers actually take over. Robust at 1440x900 and
   * under zoom because it depends on the flex-constrained .page-card
   * parent, not on any viewport calc(). */
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  /* lock the 2-col shell so the doc card and sign rail can each
   * scroll internally and the page chrome stays put. */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* ------------------------------------------------------------
 * DEPRECATED / REMOVED 2026-06-15 — fix/hr-esign-no-scroll
 * The legacy fixed-height e-sign primitives .page-hr-doc,
 * .page-hr-sign-card and .page-hr-sign-pad lived here. They carried a
 * hard height:720px trap that, combined with a non-shrinking ancestor,
 * clipped the advance CTA with no scroll (the contract bug Ben hit).
 * The live screen (esign.js) renders the flex/min-height:0 stack of
 * .page-hr-doc-card > .page-hr-doc-stage and .page-hr-sign-rail >
 * .page-hr-sign-cta instead. These legacy classes were verified unused
 * across all JS/HTML and were deleted so no future agent re-wires the
 * screen onto fixed-height classes. Do NOT reintroduce height:720px.
 * ------------------------------------------------------------ */

/* ============================================================
 * FORM PAGES (W-9, direct deposit)
 * 720px centered card, 2-col inner grid, right-aligned action foot.
 * ============================================================ */
.page-hr-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: var(--shadow-sm);
}

.page-hr-form h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.page-hr-form .sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 22px;
  line-height: 1.55;
}

.page-hr-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-bottom: 22px;
}

.page-hr-form-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

/* ============================================================
 * ID UPLOAD - drop zone + 2-up thumbnail slots
 * .page-hr-drop is a 2px dashed dropzone; .over highlights it
 * with primary border + soft fill. Thumbs are 120px image slots
 * with a small mono label overlay (ID FRONT / SELFIE).
 * ============================================================ */
.page-hr-drop {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 36px;
  text-align: center;
  background: var(--bg-soft);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color var(--t), background var(--t), color var(--t);
}

.page-hr-drop:hover {
  border-color: var(--primary);
  color: var(--text);
}

.page-hr-drop.over {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--text);
}

.page-hr-drop .ico {
  color: var(--text-faint);
  margin-bottom: 8px;
}

.page-hr-drop:hover .ico,
.page-hr-drop.over .ico {
  color: var(--primary);
}

.page-hr-drop .title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.page-hr-drop .hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.page-hr-thumb {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.page-hr-thumb .slot {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: 120px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--text-muted);
  position: relative;
  overflow: hidden;
}

.page-hr-thumb .slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-hr-thumb .slot .lbl {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(10, 14, 26, 0.62);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* ============================================================
 * DIRECT DEPOSIT (STATE 06)
 * Two-column shell: 1fr form card + 360px summary rail.
 * Matches design-mockups/05-hr-onboarding.html STATE 06.
 * Apex deposit-only flow — never debits the employee bank.
 * ============================================================ */
.page-hr-dd-shell {
  display: grid;
  grid-template-columns: 1fr 360px;
  /* HEIGHT-CHAIN FIX (recurring scroll regression): pin the single row to
   * minmax(0, 1fr) so the form card + summary rail bind to the constrained
   * shell height instead of the implicit `auto` row growing to content.
   * Without this the .page-hr-dd-body inner-scroll never engages and the
   * Submit CTA sits below the fold (rep had to zoom out to click it). */
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.page-hr-dd-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 26px 30px 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.page-hr-dd-body {
  padding-right: 4px;
}

.page-hr-dd-eye {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.page-hr-dd-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  line-height: 1.2;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.page-hr-dd-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 18px;
  line-height: 1.55;
  max-width: 560px;
}

.page-hr-dd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  margin-bottom: 16px;
}

/* JetBrains Mono override for routing / account inputs */
.page-hr-dd-mono input {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.14em;
}

/* Account input wrap so we can absolutely position the masked toggle eye */
.page-hr-dd-acct {
  position: relative;
}

.page-hr-dd-acct input {
  padding-right: 36px;
}

.page-hr-dd-eye-btn {
  position: absolute;
  right: 8px;
  top: 28px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--text-faint);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color var(--t), background var(--t);
}

.page-hr-dd-eye-btn:hover {
  color: var(--primary);
  background: var(--bg-soft);
}

/* Confirm-match chip beneath confirm input */
.page-hr-dd-match {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--bg-soft);
  color: var(--text-muted);
  border: 1px solid var(--border);
  margin-top: 4px;
  transition: color var(--t), background var(--t), border-color var(--t);
}

.page-hr-dd-match.ok {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: var(--primary-soft);
}

.page-hr-dd-match.warn {
  color: var(--text-muted);
  background: var(--bg-soft);
  border-color: var(--border);
}

/* Account-type radio row — purple ring on selected */
.page-hr-dd-type {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.page-hr-dd-type-opt {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}

.page-hr-dd-type-opt:hover {
  border-color: var(--border-strong);
}

.page-hr-dd-type-opt.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.page-hr-dd-type-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: border-color var(--t);
}

.page-hr-dd-type-opt.active .page-hr-dd-type-dot {
  border-color: var(--primary);
}

.page-hr-dd-type-dot::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0;
  transition: opacity var(--t);
}

.page-hr-dd-type-opt.active .page-hr-dd-type-dot::after {
  opacity: 1;
}

.page-hr-dd-type-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.page-hr-dd-type-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* Check illustration helper */
.page-hr-dd-check {
  margin-top: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.page-hr-dd-check-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--text-soft);
  letter-spacing: 0.08em;
}

.page-hr-dd-check-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-hr-dd-check-meta .pri {
  color: var(--primary);
  font-weight: 600;
}

.page-hr-dd-check-illu {
  width: 90px;
  height: 54px;
  border-radius: 6px;
  background:
    linear-gradient(135deg, var(--bg-tint), var(--surface));
  border: 1px dashed var(--border-strong);
  flex-shrink: 0;
}

/* Footer / submit row */
.page-hr-dd-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
  padding-top: 14px;
  margin-top: 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.page-hr-dd-foot-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Right rail */
.page-hr-dd-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* rail can overflow at 1440x900 with payout summary + security + changes
   * cards; let it scroll internally so the form card scroll stays separate. */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--text-faint) transparent;
  padding-right: 4px;
}
.page-hr-dd-rail::-webkit-scrollbar { width: 8px; }
.page-hr-dd-rail::-webkit-scrollbar-thumb {
  background: var(--text-faint);
  border-radius: 4px;
}
.page-hr-dd-rail::-webkit-scrollbar-track { background: transparent; }

.page-hr-dd-summary {
  background:
    radial-gradient(circle at 100% 0%, rgba(99, 91, 255, 0.16), transparent 55%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
}

.page-hr-dd-summary-eye {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.page-hr-dd-summary-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 4px 0 12px;
  letter-spacing: -0.005em;
}

.page-hr-dd-summary-stat {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.page-hr-dd-summary-stat small {
  font-family: 'Inter Tight', -apple-system, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  -webkit-text-fill-color: var(--text-muted);
}

.page-hr-dd-summary-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.page-hr-dd-summary-rows {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  border-top: 1px solid var(--border);
}

.page-hr-dd-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.page-hr-dd-summary-row:last-child {
  border-bottom: 0;
}

.page-hr-dd-summary-row .lbl {
  color: var(--text-muted);
}

.page-hr-dd-summary-row .val {
  color: var(--text);
  font-weight: 500;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}

.page-hr-dd-rail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

.page-hr-dd-rail-eye {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-hr-dd-rail-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 6px 0 4px;
  letter-spacing: -0.005em;
}

.page-hr-dd-rail-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ============================================================
 * RECOVERED RULES — UNION OF HR BRANCH CONTRIBUTIONS
 * Restored after brain-merge auto-resolve dropped 3 conflict
 * regions from frontend/pages/hr/hr.css. Each section below
 * contains page-scoped selectors from one branch's pixel-parity
 * work. Zero red, zero emojis, page-scoped only.
 * ============================================================ */

/* ===== Recovered: px-15-trainee-hr-tab ===== */

.page-hr-wizard-pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 4px 0 14px;
}

.page-hr-wizard-pagetitle {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--text);
}

.page-hr-wizard-pagesub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 5px 0 0;
  max-width: 540px;
  line-height: 1.55;
}

.page-hr-progress-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px 16px;
  box-shadow: var(--shadow-xs);
  flex-shrink: 0;
}

.page-hr-progress-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background:
    conic-gradient(var(--primary) 0 var(--ring-pct, 0%), var(--bg-tint) var(--ring-pct, 0%) 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.page-hr-progress-ring::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--surface);
}

.page-hr-progress-ring span {
  position: relative;
  z-index: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.page-hr-progress-ring span small {
  font-size: 9px;
  color: var(--text-muted);
}

.page-hr-progress-body .label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.page-hr-progress-body .val {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.page-hr-wizard-wash {
  position: absolute;
  top: 0;
  right: 0;
  width: 220px;
  height: 220px;
  background: var(--grad);
  opacity: 0.08;
  border-radius: 50%;
  transform: translate(40%, -40%);
  pointer-events: none;
}

.page-hr-wizard-eyerow {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.page-hr-wizard-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--status-working-bg);
  color: var(--status-working-fg);
  border: 1px solid var(--status-working-bd);
  text-transform: uppercase;
}

.page-hr-wizard-pill .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--status-working);
}

.page-hr-wizard-pill.done {
  background: var(--status-done-bg);
  color: var(--status-done-fg);
  border-color: var(--status-done-bd);
}

.page-hr-wizard-pill.done .dot {
  background: var(--status-done);
}

.page-hr-wizard-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-left: 4px;
}

.page-hr-wizard-done {
  position: relative;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.page-hr-wizard-done-lbl {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.page-hr-wizard-done-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.page-hr-wizard-done-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-soft);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 3px 9px 3px 7px;
  line-height: 1.2;
}

.page-hr-wizard-done-chip .ico {
  color: var(--primary);
  display: inline-flex;
  flex-shrink: 0;
}

/* ===== Recovered: px-23-hr-wizard ===== */

.page-hr-wizard-hero::before,
.page-hr-wizard-hero::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.page-hr-wizard-hero::before {
  top: 0;
  right: 0;
  width: 340px;
  height: 340px;
  background: radial-gradient(50% 50% at 70% 30%, rgba(99, 91, 255, 0.12), transparent 75%);
}

.page-hr-wizard-hero::after {
  bottom: 0;
  left: 0;
  width: 220px;
  height: 220px;
  background: radial-gradient(50% 50% at 30% 70%, rgba(122, 115, 255, 0.08), transparent 75%);
}

.page-hr-wizard-hero > * {
  position: relative;
  z-index: 1;
}

.page-hr-wizard-marker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.page-hr-wizard-marker-tile {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--grad);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 8px 22px -6px rgba(99, 91, 255, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}

.page-hr-wizard-marker-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.page-hr-wizard-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}

.page-hr-wizard-chip-rule {
  width: 14px;
  height: 1px;
  background: var(--primary);
  display: inline-block;
}

.page-hr-wizard-marker-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.page-hr-wizard-title .grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.page-hr-wizard-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 0 22px;
}

.page-hr-wizard-strip-cell-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.page-hr-wizard-strip-cell-value {
  font-family: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.020em;
  color: var(--text);
}

.page-hr-wizard-strip-cell-value .grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.page-hr-wizard-cta-hint {
  font-size: 12px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.page-hr-wizard-skip {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--t);
}

.page-hr-wizard-skip:hover {
  color: var(--text);
}

.page-hr-wizard-foot {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.page-hr-wizard-foot-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.page-hr-wizard-foot-link {
  margin-left: auto;
  font-size: 12px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  transition: opacity var(--t);
}

.page-hr-wizard-foot-link:hover {
  opacity: 0.78;
}

/* ===== Recovered: px-26-hr-esign-1099 ===== */

.page-hr-doc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.page-hr-doc-head {
  padding: 16px 22px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
}

.page-hr-doc-head .label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-soft);
  letter-spacing: 0.04em;
}

.page-hr-doc-head .sub {
  font-size: 12px;
  color: var(--text-muted);
}

.page-hr-doc-head .pages {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-hr-doc-head .pages .mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.page-hr-doc-head .page-nav {
  display: flex;
  gap: 4px;
}

.page-hr-doc-head .page-nav button {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}

.page-hr-doc-head .page-nav button:hover {
  background: var(--hover);
  color: var(--text);
}

.page-hr-doc-stage {
  padding: 32px;
  background:
    radial-gradient(70% 70% at 50% 0%, rgba(99, 91, 255, 0.04), transparent 65%),
    var(--bg-soft);
  flex: 1 1 auto;
  min-height: 0;
  /* Mockup (design-mockups/05-hr-onboarding.html .doc-stage) pins this at
     max-height:720px so the contract doc ALWAYS scrolls internally. Use a
     viewport-relative cap so it stays locked even if an ancestor regresses
     and stops bounding height. */
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  /* scrollbar styling now lives in the shared paperwork affordance block
   * (always-visible bar). This rule sits BEFORE that block in source, so
   * it deliberately declares no scrollbar-color / ::-webkit-scrollbar. */
}

.page-hr-doc-page {
  background: #ffffff;
  color: #1a1f36;
  border: 1px solid #e6e8ec;
  border-radius: 12px;
  box-shadow:
    0 14px 40px -12px rgba(15, 23, 42, 0.20),
    0 4px 14px -6px rgba(15, 23, 42, 0.10);
  padding: 56px 64px;
  line-height: 1.6;
  font-size: 13.5px;
  max-width: 760px;
  margin: 0 auto;
}

.page-hr-doc-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid #e6e8ec;
  margin-bottom: 24px;
}

.page-hr-doc-page-head .brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-hr-doc-page-head .brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, #7a73ff 0%, #635bff 35%, #4f46e5 65%, #2563eb 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}

.page-hr-doc-page-head .brand-name {
  color: #1a1f36;
  font-weight: 600;
  font-size: 13px;
}

.page-hr-doc-page-head .meta {
  text-align: right;
  color: #697386;
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}

.page-hr-doc-page h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.012em;
  margin: 0 0 6px;
  color: #1a1f36;
}

.page-hr-doc-page h1 .sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #697386;
  margin-bottom: 6px;
}

.page-hr-doc-page h2 {
  font-size: 14px;
  font-weight: 700;
  margin: 24px 0 10px;
  color: #1a1f36;
}

.page-hr-doc-page p {
  margin: 0 0 12px;
  color: #3c4257;
}

.page-hr-doc-page .filled {
  background: rgba(99, 91, 255, 0.08);
  padding: 1px 4px;
  border-radius: 3px;
  color: #1a1f36;
  font-weight: 600;
}

.page-hr-doc-sign-block {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px dashed #d6d9df;
}

.page-hr-doc-sign-row {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 24px;
  margin-bottom: 16px;
}

.page-hr-doc-sign-line {
  border-bottom: 1.5px solid #1a1f36;
  padding-bottom: 6px;
  font-family: 'Great Vibes', 'Brush Script MT', cursive;
  font-size: 22px;
  color: #1a1f36;
  min-height: 28px;
}

.page-hr-doc-sign-line.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
}

.page-hr-doc-sign-line.empty {
  border-bottom-style: dashed;
  border-bottom-color: #635bff;
  color: #635bff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0 4px;
  background: rgba(99, 91, 255, 0.04);
  border-radius: 6px 6px 0 0;
}

.page-hr-doc-sign-line.pending-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  color: #8792a2;
  border-bottom-color: #d6d9df;
}

.page-hr-doc-sign-caption {
  font-size: 10.5px;
  color: #697386;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 6px;
}

.page-hr-sign-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* the sign rail (progress + steps + sig pad + CTA) can overflow at
   * 1440x900; scroll internally so the CTA stays reachable. */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  /* scrollbar styling lives in the shared paperwork affordance block so
   * the sign-here CTA scroller always shows a bar when it overflows. */
}

.page-hr-sign-progress {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}

.page-hr-sign-progress::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 180px;
  height: 180px;
  background: radial-gradient(50% 50% at 70% 30%, rgba(99, 91, 255, 0.10), transparent 75%);
  pointer-events: none;
}

.page-hr-sign-progress .eye {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.page-hr-sign-progress .title {
  font-size: 17px;
  font-weight: 600;
  margin: 6px 0 0;
  letter-spacing: -0.008em;
  color: var(--text);
  position: relative;
  z-index: 1;
}

.page-hr-sign-progress .stats {
  display: flex;
  align-items: baseline;
  gap: 22px;
  margin-top: 16px;
}

.page-hr-sign-progress .stat {
  position: relative;
  z-index: 1;
}

.page-hr-sign-progress .num {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.020em;
  color: var(--text);
}

.page-hr-sign-progress .num small {
  font-size: 13px;
  color: var(--text-faint);
  font-weight: 500;
  margin-left: 2px;
}

.page-hr-sign-progress .lbl {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}

.page-hr-sign-steps {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-hr-sign-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  transition: background var(--t);
}

.page-hr-sign-step:hover {
  background: var(--hover);
}

.page-hr-sign-step.active {
  background: var(--primary-soft);
  border: 1px solid var(--status-done-bd);
  padding: 9px 11px;
}

.page-hr-sign-step .pip {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-tint);
  border: 1.5px solid var(--border);
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.page-hr-sign-step.done .pip {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.page-hr-sign-step.active .pip {
  background: var(--surface);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.10);
}

.page-hr-sign-step .label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  flex: 1;
}

.page-hr-sign-step.done .label {
  color: var(--text);
}

.page-hr-sign-step.active .label {
  color: var(--text);
  font-weight: 600;
}

.page-hr-sign-step .meta {
  font-size: 10.5px;
  color: var(--text-faint);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.page-hr-sig-pad-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}

.page-hr-sig-pad-card .eye {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.page-hr-sig-pad-options {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
}

.page-hr-sig-pad-options > button {
  flex: 1;
  padding: 7px 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 5px;
  cursor: pointer;
  background: transparent;
  border: 0;
  font-family: inherit;
  transition: background var(--t), color var(--t), box-shadow var(--t);
}

.page-hr-sig-pad-options > button:hover {
  color: var(--text);
}

.page-hr-sig-pad-options > button.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

.page-hr-sig-pad-canvas {
  background: var(--bg-soft);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  height: 110px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: crosshair;
  user-select: none;
  touch-action: none;
  transition: background var(--t), border-color var(--t);
}

.page-hr-sig-pad-canvas.signed {
  background: var(--surface);
  border-style: solid;
  border-color: var(--primary);
}

.page-hr-sig-pad-canvas .preview {
  font-family: 'Great Vibes', 'Brush Script MT', cursive;
  font-size: 42px;
  letter-spacing: -0.005em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  pointer-events: none;
}

.page-hr-sig-pad-canvas .hint {
  font-family: 'Great Vibes', 'Brush Script MT', cursive;
  font-size: 22px;
  color: var(--text-faint);
  pointer-events: none;
  transition: opacity var(--t);
}

.page-hr-sig-pad-canvas canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.page-hr-sig-pad-clear {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 500;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: inherit;
}

.page-hr-sig-pad-clear:hover {
  color: var(--text-soft);
  background: var(--hover);
}

.page-hr-sig-pad-name {
  width: 100%;
  height: 36px;
  margin-top: 12px;
  padding: 0 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
}

.page-hr-sig-pad-name::placeholder {
  color: var(--text-faint);
}

.page-hr-sig-pad-name:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.12);
}

.page-hr-sig-pad-meta {
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.55;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.page-hr-sig-pad-meta b {
  color: var(--text);
  font-weight: 600;
}

.page-hr-sign-cta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* The CTA is the LAST child of the scrolling .page-hr-sign-rail. Pin it
     to the bottom of the rail so the advance action (Sign and submit) is
     always reachable the moment the user can sign, instead of sitting
     below the fold. Surface bg + top border keep it legible over scrolled
     content. Negative margins + matching padding bleed it to the rail
     edges so the sticky surface fully covers content scrolling beneath. */
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0 -4px -2px;
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 18px -12px rgba(50, 50, 93, 0.12);
}

.page-hr-sign-cta .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.page-hr-sign-cta .note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}

.page-hr-sign-cta .btn {
  width: 100%;
  justify-content: center;
}

/* ============================================================
 * ONE-SIGNATURE UX (added: fix/hr-esign-one-signature)
 * The contractor line IN THE DOCUMENT is the single sign affordance.
 * Empty -> a "Sign here" button (dashed purple, edit icon). Clicking it
 * opens the signature modal. Once signed it shows the captured signature
 * (typed script name or drawn / uploaded image). There is exactly ONE
 * signature surface: the rail no longer carries a separate pad.
 * ============================================================ */

/* the contractor line rendered as a clickable sign button */
button.page-hr-doc-sign-cta-line {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  background: rgba(99, 91, 255, 0.04);
  border: 0;
  border-bottom: 1.5px dashed #635bff;
  border-radius: 6px 6px 0 0;
  padding: 12px 10px 6px;
  min-height: 40px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background var(--t), border-color var(--t);
}

button.page-hr-doc-sign-cta-line:hover {
  background: rgba(99, 91, 255, 0.08);
}

button.page-hr-doc-sign-cta-line:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.18);
}

/* once signed the affordance goes quiet: solid ink line, no purple prompt */
button.page-hr-doc-sign-cta-line.signed {
  background: transparent;
  border-bottom: 1.5px solid #1a1f36;
  border-radius: 0;
  padding: 6px 0;
}

.page-hr-doc-sign-prompt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #635bff;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-hr-doc-sign-prompt svg { flex-shrink: 0; }

/* the captured typed signature (script face, matches the pad preview) */
.page-hr-doc-sign-ink {
  font-family: 'Great Vibes', 'Brush Script MT', cursive;
  font-size: 26px;
  line-height: 1;
  color: #1a1f36;
}

/* the captured drawn / uploaded signature image */
.page-hr-doc-sign-img {
  max-height: 40px;
  max-width: 240px;
  object-fit: contain;
}

/* ------------------------------------------------------------
 * Signature modal: the ONE sig pad lives here, opened from the doc
 * contractor line (or the rail CTA before signing). Type / Draw / Upload,
 * one "Apply signature", then the CTA becomes "Submit and continue".
 * ------------------------------------------------------------ */
.page-hr-sign-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.page-hr-sign-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 17, 34, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* the sig pad card sits above the scrim inside the modal */
.page-hr-sign-modal .page-hr-sig-pad-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-lg);
  animation: page-hr-sign-modal-in 160ms ease-out;
}

@keyframes page-hr-sign-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.page-hr-sig-pad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.page-hr-sig-pad-head .eye {
  margin-bottom: 0;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 600;
  color: var(--text);
}

.page-hr-sign-modal-close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t), color var(--t);
}

.page-hr-sign-modal-close:hover {
  background: var(--hover);
  color: var(--text);
}

.page-hr-sig-pad-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 6px 0 14px;
}

.page-hr-sig-pad-upload-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.page-hr-sig-pad-apply {
  width: 100%;
  justify-content: center;
  margin-top: 14px;
}

/* ===== Recovered: px-28-hr-w9 ===== */

.page-hr-w9-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* HEIGHT-CHAIN FIX (recurring scroll regression): the implicit grid row
   * was `auto` (content-sized), so .page-hr-w9-card grew to the full
   * height of sections 1+2+3 and .page-hr-w9-body.inner-scroll never
   * engaged; the rep could fill the form but the Sign/Save CTA was below
   * the fold, forcing a zoom-out. Pinning the row to minmax(0, 1fr) makes
   * the card bind to the shell's constrained height and lets the body
   * scroll internally. The `padding: 20px 0 28px` here is part of the grid
   * container's own box (outside the tracks), so the row still fills the
   * remaining height correctly. */
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 20px 0 28px;
  align-items: stretch;
  /* single-column law: one column fills the container; rail removed.
   * lock the shell to the available card height so inner-scroll
   * regions inside the form card can bind to a real height parent. */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.page-hr-w9-rail {
  display: none;
}

.page-hr-w9-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  box-shadow: var(--shadow-md);
  /* flex column so eyebrow/title/sub + inner-scroll body + foot
   * compose without page-level scroll. */
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.page-hr-w9-body {
  /* sections 1+2+3 live here; .inner-scroll utility handles the
   * actual flex + overflow. The height chain (body -> #app-root ->
   * page-shell -> page-card -> w9-shell -> w9-card -> w9-body) is
   * verified height-constrained, so overflow-y:auto genuinely engages
   * and the Save W-9 foot stays anchored below. The always-visible
   * scrollbar (shared `.page-hr-paper-scroll` rule below) makes the
   * "more content below" affordance impossible to miss on macOS, where
   * an unstyled overlay scrollbar hides at rest. Right pad keeps form
   * fields off the reserved scrollbar gutter. */
  padding-right: 6px;
}

/* ============================================================
 * PAPERWORK INNER-SCROLL AFFORDANCE (shared: W-9/W2 · ID · DD · eSign)
 *
 * THE REGRESSION (2026-07): every paperwork body is correctly height-
 * constrained and DOES scroll (verified headless: mouse wheel moves
 * scrollTop to the bottom and the Sign/Save/Continue CTA becomes
 * reachable). But at rest the scroll region gave NO visible cue: macOS
 * renders an UNSTYLED overlay scrollbar that is hidden until you
 * actively scroll, and a bottom fade-mask made the cutoff look like the
 * natural end of the card. A rep therefore thought the page was stuck,
 * tried to scroll the (locked) page, saw nothing move, and zoomed the
 * browser OUT to reach the CTA -- exactly Ben's report.
 *
 * THE FIX (affordance; the height chain is correct and untouched):
 *   1. `scrollbar-gutter: stable` reserves the scrollbar lane in layout
 *      so the region visibly reads as a scroller and content never
 *      reflows when the bar appears.
 *   2. A styled WebKit scrollbar (explicit width + tinted track + solid
 *      thumb) opts OUT of macOS overlay behaviour, so Chrome/Safari on
 *      macOS paint a classic, always-present bar at rest.
 *   3. `scrollbar-color` (Firefox / standards) forces a visible thumb.
 * The fade-mask + scroll-timeline animation that disguised the cutoff
 * are removed. Page-scroll stays locked (rule 4); only the inner body
 * scrolls, on all four paperwork surfaces, at 1440x900 and when zoomed.
 * ============================================================ */
.page-hr-w9-body.inner-scroll,
.page-hr-dd-body.inner-scroll,
.page-hr-id-grid-scroll,
.page-hr-doc-stage,
.page-hr-sign-rail {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted) var(--bg-warm);
}
.page-hr-w9-body.inner-scroll::-webkit-scrollbar,
.page-hr-dd-body.inner-scroll::-webkit-scrollbar,
.page-hr-id-grid-scroll::-webkit-scrollbar,
.page-hr-doc-stage::-webkit-scrollbar,
.page-hr-sign-rail::-webkit-scrollbar {
  width: 12px;
}
.page-hr-w9-body.inner-scroll::-webkit-scrollbar-track,
.page-hr-dd-body.inner-scroll::-webkit-scrollbar-track,
.page-hr-id-grid-scroll::-webkit-scrollbar-track,
.page-hr-doc-stage::-webkit-scrollbar-track,
.page-hr-sign-rail::-webkit-scrollbar-track {
  background: var(--bg-warm);
  border-radius: 6px;
}
.page-hr-w9-body.inner-scroll::-webkit-scrollbar-thumb,
.page-hr-dd-body.inner-scroll::-webkit-scrollbar-thumb,
.page-hr-id-grid-scroll::-webkit-scrollbar-thumb,
.page-hr-doc-stage::-webkit-scrollbar-thumb,
.page-hr-sign-rail::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 6px;
  border: 3px solid var(--bg-warm);
  background-clip: padding-box;
  min-height: 40px;
}
.page-hr-w9-body.inner-scroll::-webkit-scrollbar-thumb:hover,
.page-hr-dd-body.inner-scroll::-webkit-scrollbar-thumb:hover,
.page-hr-id-grid-scroll::-webkit-scrollbar-thumb:hover,
.page-hr-doc-stage::-webkit-scrollbar-thumb:hover,
.page-hr-sign-rail::-webkit-scrollbar-thumb:hover {
  background: var(--text);
  background-clip: padding-box;
}

/* ============================================================
 * PAPERWORK FRAME HEIGHT-CHAIN ROOT FIX (2026-07-10)
 *
 * THE REAL ROOT CAUSE (measured headless by REPLAYING THE LIVE REP'S
 * NAVIGATION PATH, not a direct URL load): pages class the router's
 * render target (`#app-root`) directly, and NOTHING ever removes a
 * page's root classes on nav-away (the router only strips its own
 * route-transition classes). The headshot pillar adds
 * `page-auth-frame` to `#app-root`; navigating headshot -> W-9 leaves
 * it there, so the W-9 root computes to `.page-auth-frame`'s
 * `display: grid; place-items: center; min-height: 100vh` (auth.css
 * loads AFTER 01-base/03-layout, so at equal specificity it beats
 * `.app-frame`'s `display: flex; min-height: 0`). The w9/dd shells
 * become content-sized centered grid items (~1670px tall for the W-9),
 * `.inner-scroll` never gets a constrained parent so overflow-y:auto
 * has nothing to engage against, and `#app-root`'s overflow:hidden
 * clips the Sign/Submit CTA below the fold with NO way to reach it.
 * A direct URL load has no stale class, which is why every previous
 * "verified headless" proof passed while a real rep walking the wizard
 * was hard-stuck.
 *
 * THE FIX (two layers, both required):
 *   1. JS: the headshot pillar removes `page-auth-frame` in its router
 *      cleanup, and every paperwork page strips foreign root classes
 *      on mount + its own on cleanup (see w9-form/direct-deposit/
 *      id-upload/esign/onboarding-headshot).
 *   2. CSS (this rule): a double-class hard-lock in the LAST-loaded
 *      sheet that re-asserts the full canonical `.app-frame` recipe
 *      (03-layout.css) at (0,2,0) specificity, so the four paperwork
 *      roots keep a correct flex height chain even if some OTHER page
 *      leaks a root class in the future. `align-items: stretch`
 *      explicitly neutralizes a leaked `place-items: center`.
 * Robust at 1440x900, 1280x720, and under browser zoom because the
 * chain binds to the body flex viewport, not a viewport calc().
 * ============================================================ */
.app-frame.hr-paper-frame {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 24px 24px;
  gap: 14px;
  background: transparent;
  overflow: hidden;
}

.page-hr-w9-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.page-hr-w9-eyebrow::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--primary);
}

.page-hr-w9-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--text);
}

.page-hr-w9-sub {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 8px 0 22px;
  max-width: 560px;
  line-height: 1.55;
}

.page-hr-w9-section {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px dashed var(--border);
}

.page-hr-w9-section:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.page-hr-w9-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.page-hr-w9-section-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--status-done-bd);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.page-hr-w9-section-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}

.page-hr-w9-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

.page-hr-w9-grid .field-label {
  font-weight: 600;
}

.page-hr-w9-grid .span-2 {
  grid-column: span 2;
}

.page-hr-w9-grid input[type="text"] {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--text);
  font-family: inherit;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}

.page-hr-w9-grid input[type="text"]:hover {
  border-color: var(--border-strong);
}

.page-hr-w9-grid input[type="text"]:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.page-hr-w9-grid input[disabled] {
  background: var(--bg-tint);
  color: var(--text-muted);
  cursor: not-allowed;
}

.page-hr-w9-toggle-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.page-hr-w9-pill {
  padding: 8px 13px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
  user-select: none;
}

.page-hr-w9-pill:hover {
  background: var(--hover);
  color: var(--text);
  border-color: var(--border-strong);
}

.page-hr-w9-pill.active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary);
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.page-hr-w9-cert {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.6;
  margin-bottom: 14px;
}

.page-hr-w9-sigpad {
  background: var(--bg-soft);
  border: 1.5px dashed var(--primary);
  border-radius: var(--radius);
  padding: 12px 16px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t);
}

.page-hr-w9-sigpad:hover {
  background: var(--primary-soft);
}

.page-hr-w9-sigtext {
  font-family: 'Dancing Script', 'Great Vibes', 'Brush Script MT', cursive;
  font-size: 28px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1;
}

.page-hr-w9-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  flex-shrink: 0;
}

.page-hr-w9-foot-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.page-hr-w9-foot-meta svg {
  color: var(--text-faint);
  flex-shrink: 0;
}

.page-hr-w9-card .btn-primary {
  transition: transform var(--t), filter var(--t), box-shadow var(--t);
}

.page-hr-w9-card .btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 6px 16px -6px rgba(99, 91, 255, 0.45);
}

.page-hr-w9-card .btn-primary:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

.page-hr-w9-card .btn-primary[disabled] {
  filter: grayscale(0.4) brightness(0.92);
  cursor: not-allowed;
  pointer-events: none;
}

/* .page-hr-w9-rail is hidden (single-column law); kept for reference only */
.page-hr-w9-rail {
  display: none;
}
.page-hr-w9-rail::-webkit-scrollbar { width: 8px; }
.page-hr-w9-rail::-webkit-scrollbar-thumb {
  background: var(--text-faint);
  border-radius: 4px;
}
.page-hr-w9-rail::-webkit-scrollbar-track { background: transparent; }

.page-hr-w9-rail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}

.page-hr-w9-rail-card.accent {
  background: var(--primary-soft);
  border-color: var(--status-done-bd);
}

.page-hr-w9-rail-eye {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.page-hr-w9-rail-card.accent .page-hr-w9-rail-eye {
  color: var(--primary);
}

.page-hr-w9-rail-title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  line-height: 1.4;
}

.page-hr-w9-rail-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.55;
}

.page-hr-w9-rail-steps {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.7;
}

.page-hr-w9-rail-steps li {
  margin: 0;
}

/* ===== Recovered: px-29-hr-id-upload ===== */

.page-hr-id-shell {
  padding: 28px 32px 40px;
  max-width: 1200px;
  margin: 0 auto;
  /* lock the shell to its parent height so the front/back grid can
   * scroll internally while headline + foot stay anchored. */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}

.page-hr-id-headline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 22px;
  flex-shrink: 0;
}

.page-hr-id-grid-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  /* scrollbar styling lives in the shared paperwork affordance block so
   * the ID grid always shows a bar when it overflows. NOTE: this rule
   * sits AFTER that block in source, so it declares NO scrollbar-color /
   * ::-webkit-scrollbar here -- otherwise it would win by source order
   * and re-hide the bar. */
}

.page-hr-id-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.page-hr-id-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 6px;
}

.page-hr-id-sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 720px;
}

.page-hr-id-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.page-hr-id-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl, 14px);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
}

.page-hr-id-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-hr-id-card-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.page-hr-id-card-eyebrow::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--text-faint);
}

.page-hr-id-card.done .page-hr-id-card-eyebrow {
  color: var(--primary);
}

.page-hr-id-card.done .page-hr-id-card-eyebrow::before {
  background: var(--primary);
}

.page-hr-id-card-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}

.page-hr-id-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text-muted);
}

.page-hr-id-pill .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-faint);
}

.page-hr-id-pill.done {
  color: var(--primary);
  border-color: rgba(99, 91, 255, 0.28);
  background: var(--primary-soft, rgba(99, 91, 255, 0.08));
}

.page-hr-id-pill.done .dot {
  background: var(--primary);
}

.page-hr-id-pill.pending {
  color: var(--text-soft, var(--text-muted));
  border-color: var(--border-strong, var(--border));
  background: var(--bg-tint, var(--bg-soft));
}

.page-hr-id-pill.pending .dot {
  background: var(--text-muted);
}

.page-hr-id-dropzone {
  background:
    radial-gradient(60% 60% at 50% 30%, rgba(99, 91, 255, 0.05), transparent 65%),
    var(--bg-soft);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  transition: background var(--t), border-color var(--t), transform var(--t);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.page-hr-id-dropzone:hover {
  background: var(--bg-tint, var(--bg-soft));
  border-color: var(--primary);
}

.page-hr-id-dropzone.over {
  background: var(--primary-soft, rgba(99, 91, 255, 0.08));
  border-color: var(--primary);
}

.page-hr-id-dropzone-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--primary-soft, rgba(99, 91, 255, 0.1));
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.page-hr-id-dropzone-icon svg {
  width: 26px;
  height: 26px;
}

.page-hr-id-dropzone-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.page-hr-id-dropzone-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.page-hr-id-dropzone-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.page-hr-id-preview {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
}

.page-hr-id-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99, 91, 255, 0.08), rgba(99, 91, 255, 0.02));
}

.page-hr-id-preview::after {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1.5px dashed rgba(99, 91, 255, 0.3);
  border-radius: var(--radius);
}

.page-hr-id-preview-fname {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 11px;
  color: var(--text-soft, var(--text-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  padding: 3px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  z-index: 1;
}

.page-hr-id-preview-label {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid rgba(99, 91, 255, 0.28);
  color: var(--primary);
  font-weight: 600;
  z-index: 1;
}

.page-hr-id-preview-label .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.18);
}

.page-hr-id-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

.page-hr-id-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.page-hr-id-meta b {
  color: var(--text);
  font-weight: 600;
}

.page-hr-id-meta .sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
}

.page-hr-id-meta-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.page-hr-id-meta-actions .btn {
  padding: 5px 10px;
  font-size: 11.5px;
}

.page-hr-id-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  margin-top: 14px;
  flex-shrink: 0;
}

.page-hr-id-foot-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--primary-soft, rgba(99, 91, 255, 0.1));
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.page-hr-id-foot-icon svg {
  width: 16px;
  height: 16px;
}

.page-hr-id-foot-text {
  font-size: 12.5px;
  color: var(--text-soft, var(--text-muted));
  line-height: 1.5;
}

.page-hr-id-foot-text b {
  color: var(--text);
  font-weight: 600;
}

.page-hr-id-foot-spacer {
  flex: 1;
}

.page-hr-id-foot .btn-primary {
  transition: transform var(--t), filter var(--t), box-shadow var(--t);
}

.page-hr-id-foot .btn-primary:not(:disabled):hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.page-hr-id-foot .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* Bank account masking via CSS (not type=password) so the browser never
   treats routing/account numbers as saveable passwords. */
.page-hr-dd-masked {
  -webkit-text-security: disc;
  text-security: disc;
}

/* Legal clause styling -- gives numbered clauses hierarchy + punch so the
   document reads clean instead of a wall of inline "3.6" numbers. */
.page-hr-doc-clause { margin: 0 0 18px; }
.page-hr-doc-clause-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px;
}
.page-hr-doc-clause-num {
  flex: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  color: #635bff;
  background: rgba(99, 91, 255, 0.09);
  border: 1px solid rgba(99, 91, 255, 0.16);
  border-radius: 6px;
  padding: 3px 8px; line-height: 1.2;
  min-width: 34px; text-align: center;
}
.page-hr-doc-clause-title {
  font-weight: 700; font-size: 14px; color: #1a1f36; letter-spacing: -0.005em;
}
.page-hr-doc-clause-body {
  margin: 0 0 0 44px;
  font-size: 13px; line-height: 1.7; color: #3c4257;
}
.page-hr-doc-clause-plain {
  font-size: 13px; line-height: 1.7; color: #3c4257; margin: 0 0 14px;
}

/* Section blocks in the e-sign doc -- clear separation so each numbered section
   reads as its own unit and the Section X of N nav lands cleanly. */
.page-hr-doc-section { scroll-margin-top: 16px; padding-top: 6px; }
.page-hr-doc-section + .page-hr-doc-section {
  margin-top: 22px; padding-top: 22px; border-top: 1px solid #eef0f3;
}

/* NO-SCROLL LAW (rule 4) — restored 2026-07-07 (fix/login-w9).
   The 2026-07-06 "W9 SCROLL FIX" unlocked html/body/#app-root to page-scroll,
   which violates the fixed-viewport cockpit law. It was a workaround for the
   Save button being clipped -- but the real fix is the internal-scroll region
   the form already declares: .page-hr-w9-body carries `.inner-scroll`
   (flex:1 1 auto; min-height:0; overflow-y:auto) and .page-hr-w9-foot carries
   `.inner-scroll-foot` (flex-shrink:0). With the base height chain intact
   (html/body -> #app-root -> .app-frame/.page-shell/.page-card ->
   .page-hr-w9-shell -> .page-hr-w9-card, every link min-height:0 + overflow
   hidden), the three W9 sections scroll INSIDE the card while the page never
   scrolls and the Save CTA stays anchored in the foot at 1440x900. No page-
   level scroll override is needed or allowed here. */

/* W9 Type/Draw signature (matches the RSM Agreement signing experience). */
.page-hr-w9-sig-tabs { display: inline-flex; gap: 4px; margin: 4px 0 10px; background: #f0f1f5; border-radius: 8px; padding: 3px; }
.page-hr-w9-sig-tabs button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; color: #697386; padding: 5px 16px; border-radius: 6px;
}
.page-hr-w9-sig-tabs button.active { background: #fff; color: #635bff; box-shadow: 0 1px 3px rgba(16,24,40,.08); }
.page-hr-w9-sig-draw { position: relative; }
.page-hr-w9-sig-canvas {
  width: 100%; height: 130px; background: #fbfbfd; border: 1px dashed #d6d9df;
  border-radius: 10px; cursor: crosshair; display: block; touch-action: none;
}
.page-hr-w9-sig-clear {
  position: absolute; top: 8px; right: 10px; appearance: none; border: 1px solid #e6e8ec;
  background: #fff; border-radius: 6px; font-size: 10.5px; font-family: 'JetBrains Mono', monospace;
  color: #697386; padding: 3px 9px; cursor: pointer;
}
.page-hr-w9-sig-clear:hover { color: #635bff; border-color: #c9c5ff; }

/* W-9 TIN encryption assurance: inline lock + muted text, on-brand purple. */
.page-hr-w9-tin-secure {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-muted);
}
.page-hr-w9-tin-secure svg { flex: 0 0 auto; color: var(--brand, #635bff); }

/* ============================================================
 * MY DOCUMENTS  (#/my-documents)  — rep-facing signed-contract retrieval
 * Ben's promise: reps can access what they signed later, in their dashboard.
 * ============================================================ */
.page-mydocs-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 48px;
}
.page-mydocs-head { margin-bottom: 20px; }
.page-mydocs-title {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 650;
  color: var(--text);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.page-mydocs-sub {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0;
}
.page-mydocs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-mydocs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: 14px 16px;
}
.page-mydocs-left,
.page-mydocs-col { display: flex; }
.page-mydocs-left { align-items: center; gap: 12px; min-width: 0; }
.page-mydocs-col { flex-direction: column; min-width: 0; }
.page-mydocs-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--hover, #f6f7f9);
  color: var(--text-muted);
}
.page-mydocs-icon.done {
  /* SAFARI COMPAT (2026-07-14): color-mix() requires Safari 16.2+; rgba
     fallback (matching the --brand default #635bff) declared first. */
  background: rgba(99, 91, 255, .14);
  background: color-mix(in srgb, var(--brand, #635bff) 14%, transparent);
  color: var(--brand, #635bff);
}
.page-mydocs-l {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-mydocs-d {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.page-mydocs-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand, #635bff);
  /* SAFARI COMPAT (2026-07-14): color-mix() requires Safari 16.2+; rgba
     fallbacks (matching the --brand default #635bff) declared first. */
  background: rgba(99, 91, 255, .08);
  background: color-mix(in srgb, var(--brand, #635bff) 8%, transparent);
  border: 1px solid rgba(99, 91, 255, .24);
  border: 1px solid color-mix(in srgb, var(--brand, #635bff) 24%, transparent);
  border-radius: 8px;
  padding: 8px 12px;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease;
}
.page-mydocs-btn:hover {
  background: rgba(99, 91, 255, .16);
  background: color-mix(in srgb, var(--brand, #635bff) 16%, transparent);
}
.page-mydocs-onfile {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.75;
  flex: 0 0 auto;
}

/* ============================================================
 * HEADSHOT REVEAL  (#/onboarding/headshot — the "here's you" moment)
 * Restored 2026-07-08 (fix/w9-scroll-headshot-reveal). The cleaned headshot
 * composited on the Apex-branded background, shown for a beat after the
 * processing animation before the onboarding wizard advances. Visual language
 * mirrors #/signup/welcome's centerpiece (halo + gradient avatar frame + check
 * badge + orbit rings + gradient headline) so both flows land the same beat.
 * Lives inside the topbar-mounted .page-signup-frame (replaced by JS), so it is
 * sized to fit 1440x900 without page scroll (rule 4).
 * ============================================================ */
.page-onb-reveal {
  position: relative;
  width: 100%;
  min-height: 660px;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 56px;
  background:
    radial-gradient(80% 60% at 12% 12%, rgba(122,115,255,0.14), transparent 70%),
    radial-gradient(60% 50% at 88% 88%, rgba(99,91,255,0.10), transparent 70%),
    var(--bg-warm);
  isolation: isolate;
  overflow: hidden;
}
.page-onb-reveal-orbits {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.page-onb-reveal-orbit {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  border: 1px solid rgba(99,91,255,0.20);
  transform: translate(-50%, -50%) scale(1);
  animation: page-onb-reveal-orbit 6s ease-in-out infinite;
}
.page-onb-reveal-orbit-0 { animation-delay: 0s;   opacity: 0.55; }
.page-onb-reveal-orbit-1 { animation-delay: 0.8s; opacity: 0.40; width: 320px; height: 320px; }
.page-onb-reveal-orbit-2 { animation-delay: 1.6s; opacity: 0.25; width: 440px; height: 440px; }
@keyframes page-onb-reveal-orbit {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  20%  { opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}
.page-onb-reveal-center {
  position: relative;
  z-index: 2;
  width: 132px;
  height: 132px;
  margin: 0 auto 26px;
  animation: page-onb-reveal-pop 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes page-onb-reveal-pop {
  0%   { transform: scale(0.82); opacity: 0; }
  60%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.page-onb-reveal-halo {
  position: absolute;
  inset: -14px;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(139,133,255,0.45), transparent 70%);
  filter: blur(8px);
}
.page-onb-reveal-avatar {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 16px 40px -10px rgba(99,91,255,0.55),
    inset 0 0 0 2px rgba(255,255,255,0.25);
}
.page-onb-reveal-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.page-onb-reveal-avatar-initial {
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-size: 56px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}
.page-onb-reveal-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--bg-warm);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow:
    0 6px 14px -4px rgba(99,91,255,0.45),
    inset 0 0 0 2px var(--primary);
}
.page-onb-reveal-eyebrow {
  position: relative;
  z-index: 2;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 auto 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.page-onb-reveal-eyebrow::before,
.page-onb-reveal-eyebrow::after {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--primary);
}
.page-onb-reveal-headline {
  position: relative;
  z-index: 2;
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.026em;
  line-height: 1.04;
  margin: 0 0 12px;
}
.page-onb-reveal-headline-grad {
  background: linear-gradient(135deg, #635bff 0%, #8b85ff 60%, #5a8bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.page-onb-reveal-sub {
  position: relative;
  z-index: 2;
  font-size: 14.5px;
  color: var(--text-muted);
  margin: 0 auto 26px;
  max-width: 440px;
  line-height: 1.55;
}
.page-onb-reveal-continue {
  position: relative;
  z-index: 2;
}
/* "Next up" hint: one muted line under the sub-copy that names the next
 * paperwork step and mirrors signup-welcome's "Taking you to onboarding in
 * N sec" countdown beat, so the 1.9s auto-advance reads as intentional. */
.page-onb-reveal-next {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  margin: 0 auto 22px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.page-onb-reveal-next-lead {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}
.page-onb-reveal-next-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border-strong);
  align-self: center;
}
.page-onb-reveal-next-count {
  color: var(--text-soft);
  font-size: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .page-onb-reveal-orbit { animation: none; opacity: 0.25; }
  .page-onb-reveal-center { animation: none; }
}


/* Sign-the-agreement modal: the title is a HEADLINE, not an eyebrow
 * (Ben, 2026-07-10: "tiny at the top and not a headline"). Scoped to the
 * sig pad head so page eyebrows elsewhere are untouched. */
.page-hr-sig-pad-head .eye {
  font-family: 'Inter Tight', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text);
}
/* The typed-name input reads as an input BEFORE focus (Ben: "the box to
 * type isn't even highlighted until you click it"). */
.page-hr-sig-pad-name {
  border: 1.5px solid var(--primary) !important;
  background: var(--surface) !important;
  box-shadow: 0 1px 3px rgba(99,91,255,0.18);
}

/* ============================================================
 * CONTRACT-997 SIGNATURE MODAL — transplanted VERBATIM
 * (Ben, 2026-07-10: "exact fonts, exact type and draw thing,
 * exact adopt and sign, exact everything.") Source of truth:
 * Desktop/apex-contract-v2/contract-997.html. The .imodal
 * container rules are omitted only because the page's existing
 * .page-hr-sign-modal wrapper already provides the fixed scrim;
 * everything the rep sees is byte-for-byte contract-997.
 * ============================================================ */
.imodal-card{
  background:var(--surface, #fff); border:1px solid var(--border); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg); width:100%; max-width:380px; padding:24px 24px 22px;
  position:relative; z-index:1;
}
.imodal-eyebrow{ font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#635bff; margin-bottom:5px; }
.imodal-title{ font-size:18px; font-weight:700; margin:0 0 4px; letter-spacing:-.01em; color:var(--text); }
.imodal-sub{ font-size:12.5px; color:var(--text-muted); margin:0 0 16px; line-height:1.5; }
.imodal-tabs{
  display:flex; gap:4px; margin-bottom:12px;
  background:var(--bg-tint); border:1px solid var(--border); border-radius:8px; padding:3px;
}
.imodal-tabs > div{
  flex:1; padding:7px 10px; text-align:center; font-size:12px; font-weight:500; color:var(--text-muted);
  border-radius:5px; cursor:pointer; transition:all var(--t);
}
.imodal-tabs > div.active{ background:var(--surface, #fff); color:var(--text); font-weight:600; box-shadow:var(--shadow-xs); }
.imodal-input{
  width:100%; padding:11px 13px; font-size:14px; font-family:inherit;
  background:var(--bg-soft); border:1px solid var(--border); border-radius:8px; color:var(--text);
  outline:none; margin-bottom:12px; transition:all 160ms;
}
.imodal-input:focus{ border-color:var(--primary); background:var(--surface, #fff); box-shadow:0 0 0 3px rgba(99,91,255,.10); }
.imodal-preview{
  background:var(--bg-soft); border:1.5px dashed var(--border); border-radius:8px;
  height:84px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; position:relative; overflow:hidden;
}
.imodal-preview .ip{
  font-family:'Caveat', cursive; font-size:44px; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.imodal-preview .ip.empty{ -webkit-text-fill-color:var(--text-faint); background:none; font-family:'Inter Tight'; font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; }
.imodal-preview canvas{ width:100%; height:100%; display:block; touch-action:none; cursor:crosshair; }
.imodal-clear{ position:absolute; bottom:6px; right:8px; font-size:11px; color:var(--text-faint); font-weight:500; cursor:pointer; background:rgba(255,255,255,.7); padding:2px 7px; border-radius:5px; }
.imodal-actions{ display:flex; gap:10px; }
.imodal-actions .btn-cancel{ flex:0 0 auto; }
.imodal-actions .btn-apply{ flex:1; padding:11px; font-size:14px; font-weight:650; border-radius:9px; justify-content:center; }
#smodalInput{ text-transform:none; }
/* signature font picker (Historic/Romantic/Wildstyle) */
.sfont-options{ display:flex; gap:8px; margin:10px 0 4px; }
.sfont-option{ flex:1; padding:8px; border:1px solid var(--border); border-radius:7px; background:var(--surface, #fff); color:var(--text-muted); font-size:11px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; cursor:pointer; text-align:center; transition:all 160ms; }
.sfont-option:hover{ border-color:#c9c5ff; }
.sfont-option.active{ border-color:var(--primary); background:var(--primary-soft, rgba(99,91,255,.08)); color:var(--primary); }
#smodalPreview.f-historic{ font-family:'Tangerine',cursive; font-weight:700; }
#smodalPreview.f-romantic{ font-family:'Herr Von Muellerhoff',cursive; }
#smodalPreview.f-wildstyle{ font-family:'Sedgwick Ave Display',cursive; letter-spacing:1px; font-size:28px; }
#smodalPreview.empty{ font-family:'Inter Tight',sans-serif !important; -webkit-text-fill-color:var(--text-faint) !important; color:var(--text-faint) !important; background:none !important; font-size:13px !important; font-weight:500 !important; letter-spacing:.04em !important; text-transform:none !important; }
#smodalPreview{ -webkit-text-fill-color:var(--text) !important; color:var(--text) !important; }
/* the adopted signature on the document line, in the picked script */
.page-hr-doc-sign-ink.f-historic{ font-family:'Tangerine',cursive !important; font-weight:700; font-size:34px; }
.page-hr-doc-sign-ink.f-romantic{ font-family:'Herr Von Muellerhoff',cursive !important; font-size:34px; }
.page-hr-doc-sign-ink.f-wildstyle{ font-family:'Sedgwick Ave Display',cursive !important; font-size:24px; letter-spacing:1px; }

/* W-9 checklist column (Ben, 2026-07-11: checklist lives IN the wireframe,
 * never floating). The shell grows a fixed 226px second column. */
.page-hr-w9-shell.has-checklist { grid-template-columns: minmax(0, 1fr) 226px; column-gap: 18px; }
.page-hr-w9-checklist { min-width: 0; }
.page-hr-w9-checklist .apex-ob-rail { margin-top: 0; }

/* ===== pages/ops/ops.css ===== */
/* ============================================================
 * APEX SALES OS · DAILY OPERATIONS
 * Owner: Worker W15 (page-local styles only)
 * Namespace: .page-ops-*
 *
 * Pages: time-clock · schedule · booked-queue · my-calls-history
 *        · standup-live · notifications
 *
 * Tokens come from 00-tokens.css. Keyframe livePulse comes from
 * 01-base.css. Do NOT redefine resets / scrollbar / keyframes
 * here. Every block fits a 1440x900 viewport with no scroll.
 * Negative states (blocked, failed, no-show) use diagonal-purple
 * or muted-grey only — NEVER red.
 * ============================================================ */

/* ------------------------------------------------------------
 * Time clock · STATE 01 · hero punch
 * Mirrors design-mockups/06-daily-operations.html lines 196-288.
 * Centered hero card on a canvas with radial primary wash. Two-col
 * grid: pacing copy (left) + week-summary mini-card (right). Below:
 * 7-day bar chart + recent punches ledger. Comp-rules footer per
 * CLAUDE.md rule 12b (visible on every ledger page).
 * ------------------------------------------------------------ */
.page-ops-tc-canvas {
  padding: 22px 28px 18px;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(99,91,255,.06), transparent 70%),
    var(--bg-warm);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

/* hero card --------------------------------------------------- */
.page-ops-tc-hero {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 24px 64px -20px rgba(99,91,255,.20), var(--shadow-md);
  padding: 26px 36px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 36px;
  align-items: center;
}
.page-ops-tc-hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 420px;
  height: 420px;
  background: radial-gradient(50% 50% at 70% 30%, rgba(99,91,255,.14), transparent 75%);
  pointer-events: none;
}
.page-ops-tc-hero-left {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* eyebrow ----------------------------------------------------- */
.page-ops-tc-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.page-ops-tc-eyebrow::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--text-faint);
  transition: background 160ms ease;
}
.page-ops-tc-eyebrow.is-live {
  color: var(--primary);
}
.page-ops-tc-eyebrow.is-live::before {
  background: var(--primary);
}

/* big mono elapsed time (JBM per Apex rule) ------------------- */
.page-ops-tc-time {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1;
  margin: 0;
}
.page-ops-tc-time-big {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 78px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.page-ops-tc-time-small {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 22px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: -0.015em;
  margin-left: 2px;
}

/* pacing-insight sub line ------------------------------------- */
.page-ops-tc-sub {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 12px 0 0;
  max-width: 460px;
  line-height: 1.55;
}
.page-ops-tc-sub b {
  color: var(--text);
  font-weight: 600;
}

/* actions row + buttons --------------------------------------- */
.page-ops-tc-actions {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* hero CTA · purple gradient halo when punched-out ("Punch in"),
   muted-grey "Punch out" stop when punched-in. */
.page-ops-tc-punch {
  height: 50px;
  padding: 0 26px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.008em;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: filter 140ms ease, transform 100ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.page-ops-tc-punch--in {
  box-shadow:
    0 1px 1px rgba(0,0,0,.04),
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 10px 28px -8px rgba(99,91,255,.55),
    0 3px 8px -3px rgba(99,91,255,.40);
}
.page-ops-tc-punch--in::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
}
.page-ops-tc-punch--in:hover { filter: brightness(1.06); transform: translateY(-1px); }
.page-ops-tc-punch--in:active { transform: translateY(0); filter: brightness(0.98); }

.page-ops-tc-punch--out {
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.page-ops-tc-punch--out:hover {
  background: var(--hover);
  border-color: var(--text-faint);
  color: var(--text);
}
.page-ops-tc-punch--out:active { transform: translateY(0); }

.page-ops-tc-punch-ico {
  display: inline-flex;
  align-items: center;
}

/* secondary break button -------------------------------------- */
.page-ops-tc-break {
  height: 50px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 550;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
}
.page-ops-tc-break:hover { background: var(--hover); color: var(--text); }
.page-ops-tc-break-ico { display: inline-flex; align-items: center; color: var(--text-muted); }

/* geofence chip ----------------------------------------------- */
.page-ops-tc-fence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
}
.page-ops-tc-fence.ok {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: var(--status-done-bd);
}
.page-ops-tc-fence.deny {
  color: var(--text-muted);
  background: var(--bg-tint);
  border-color: var(--border-strong);
}
.page-ops-tc-fence-ico { display: inline-flex; align-items: center; }

/* right-side week summary card -------------------------------- */
.page-ops-tc-summary {
  position: relative;
  z-index: 1;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
}
.page-ops-tc-summary-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.page-ops-tc-summary-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.page-ops-tc-summary-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 0;
  border-top: 1px dashed var(--border);
}
.page-ops-tc-summary-row:first-child {
  border-top: 0;
  padding-top: 4px;
}
.page-ops-tc-summary-row .lbl {
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
}
.page-ops-tc-summary-row .val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13.5px;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.page-ops-tc-summary-row.is-today .lbl { color: var(--text); font-weight: 500; }
.page-ops-tc-summary-row.is-today .val { color: var(--primary); }
.page-ops-tc-summary-row.is-gros .val {
  font-size: 17px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* lower grid: week-bars + recent punches ---------------------- */
.page-ops-tc-lower {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

/* week activity card ------------------------------------------ */
.page-ops-tc-week {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-ops-tc-week-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.page-ops-tc-week-head .title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}
.page-ops-tc-week-head .meta {
  color: var(--text-muted);
  font-size: 11.5px;
  margin-left: auto;
}
.page-ops-tc-week-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  flex: 1;
}
.page-ops-tc-week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.page-ops-tc-week-day .bar {
  width: 100%;
  height: 72px;
  background: var(--bg-tint);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
}
.page-ops-tc-week-day .bar .fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--grad);
  border-radius: 6px;
  transition: height 320ms cubic-bezier(.4,.0,.2,1);
}
.page-ops-tc-week-day.is-today .bar {
  outline: 1.5px solid var(--primary);
  outline-offset: 2px;
}
.page-ops-tc-week-day .dow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.page-ops-tc-week-day .hrs {
  font-size: 11px;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.page-ops-tc-week-day .hrs.is-faint { color: var(--text-faint); }
.page-ops-tc-week-day.is-today .dow { color: var(--primary); }
.page-ops-tc-week-day.is-off .bar {
  background:
    repeating-linear-gradient(135deg, transparent 0, transparent 5px,
      rgba(99,91,255,.12) 5px, rgba(99,91,255,.12) 8px),
    var(--bg-tint);
  border: 1px solid var(--border);
}
.page-ops-tc-week-day.is-off .dow { color: var(--text-muted); }
.page-ops-tc-week-day.is-off .hrs { color: var(--text-muted); font-size: 10px; }

/* recent punches card ----------------------------------------- */
.page-ops-tc-punches {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px 12px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-ops-tc-punches-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.page-ops-tc-punches-head .title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}
.page-ops-tc-punches-head .meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--text-faint);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.page-ops-tc-punches-cols {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1.1fr 0.7fr 1fr;
  gap: 10px;
  padding: 6px 0 5px;
  border-bottom: 1px solid var(--border);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.page-ops-tc-punches-body {
  display: flex;
  flex-direction: column;
}
.page-ops-tc-punches-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1.1fr 0.7fr 1fr;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text);
  align-items: center;
}
.page-ops-tc-punches-row.is-last { border-bottom: 0; }
.page-ops-tc-punches-row .date { color: var(--text-muted); }
.page-ops-tc-punches-row .mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.page-ops-tc-punches-row .mono.is-live {
  color: var(--primary);
  font-weight: 600;
}
.page-ops-tc-punches-row .total {
  font-weight: 600;
  color: var(--text);
}
.page-ops-tc-punches-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 12px 0;
}

/* approval chip ----------------------------------------------- */
.page-ops-tc-chip {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--bg-tint);
  color: var(--text-muted);
}
.page-ops-tc-chip.is-approved {
  background: var(--status-done-bg);
  color: var(--status-done-fg);
  border-color: var(--status-done-bd);
}
.page-ops-tc-chip.is-open {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--status-done-bd);
}
.page-ops-tc-chip.is-pending {
  background: var(--bg-tint);
  color: var(--text-muted);
  border-color: var(--border);
}

/* comp-rules footer ------------------------------------------- */
.page-ops-tc-comprules {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.page-ops-tc-comprules-ico {
  display: inline-flex;
  align-items: center;
  color: var(--primary);
}

/* ------------------------------------------------------------
 * Topbar punch chip — persistent header button mirrors the
 * current time-clock state. Off-the-clock: ghost grey. On-the-
 * clock: primary-soft purple wash + pulsing dot + live elapsed.
 * Dot is HIDDEN when not live (CSS-only — keeps DOM stable).
 * ------------------------------------------------------------ */
.topbar-punch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.topbar-punch-dot {
  display: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  animation: livePulse 1.6s infinite;
  flex: 0 0 auto;
}
.topbar-punch.is-live .topbar-punch-dot {
  display: inline-block;
}
.topbar-punch.is-live {
  background: var(--primary-soft, rgba(99,91,255,0.10));
  color: var(--primary);
  border: 1px solid var(--border);
}
.topbar-punch.is-live svg {
  color: var(--primary);
}

/* ------------------------------------------------------------
 * Schedule · 14-day calendar grid
 * 56px time gutter + 14 day columns. Today highlighted with
 * primary-soft tint. Blocked cells use a diagonal purple
 * repeating pattern — never red.
 * ------------------------------------------------------------ */
.page-ops-cal-grid {
  display: grid;
  grid-template-columns: 56px repeat(14, 1fr);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.page-ops-cal-cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6px 8px;
  min-height: 44px;
  font-size: 11.5px;
  color: var(--text-soft);
  position: relative;
}
.page-ops-cal-cell.head {
  background: var(--bg-soft);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10.5px;
  text-align: center;
  min-height: 30px;
  padding-top: 8px;
  font-weight: 500;
}
.page-ops-cal-cell.timecol {
  background: var(--bg-soft);
  text-align: right;
  padding-right: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.page-ops-cal-cell.today {
  background: var(--primary-soft);
}
.page-ops-cal-cell.blocked {
  background-image: repeating-linear-gradient(
    45deg,
    var(--bg-tint) 0 6px,
    rgba(99,91,255,0.16) 6px 12px
  );
}
.page-ops-cal-slot {
  background: var(--grad);
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: filter var(--t);
}
.page-ops-cal-slot:hover { filter: brightness(1.06); }

/* ------------------------------------------------------------
 * Booked queue · STATE 03 (PX-32)
 * Mirrors design-mockups/06-daily-operations.html STATE 03:
 *   queue head (title + Open Google Cal) ->
 *   4-card stats row ->
 *   queue list (divider · hero "Up next" row · divider · later rows)
 *
 * Row grid is LOCKED:
 *   60px  /  minmax(0, 1fr)  /  90px  /  168px
 *   time      client+meta      source    actions(pill+button)
 *
 * Open-pitch primary CTA on every Confirmed row.  Awaiting rows get a
 * muted-grey Reschedule secondary.  No red anywhere.  No vertical
 * scroll within the 1440x900 viewport.
 * ------------------------------------------------------------ */
.page-ops-queue-shell {
  padding: 4px 0 0;
  /* IRON LAW (no page scroll): the shell claims the remaining viewport
     so the queue list inside can scroll its rows internally. */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.page-ops-queue-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.page-ops-queue-head h1 {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--text);
}
.page-ops-queue-head .sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 6px 0 0;
  max-width: 640px;
  line-height: 1.5;
}
.page-ops-queue-cal {
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Stats row -------------------------------------------------- */
.page-ops-queue-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.page-ops-queue-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.page-ops-queue-stat-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.page-ops-queue-stat-val {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.page-ops-queue-stat-val.purple {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.page-ops-queue-stat-val-grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.page-ops-queue-stat-val small {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
  letter-spacing: 0;
}
.page-ops-queue-stat-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 8px;
}
.page-ops-queue-stat-sub.is-emphasis {
  color: var(--primary);
  font-weight: 600;
}

/* Queue list ------------------------------------------------- */
.page-ops-queue-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  /* IRON LAW: card stretches to remaining viewport; the .page-ops-queue-rows
     child owns the internal scroll. Head/filter chrome lives outside the
     scroll target so it stays anchored. */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Internal-scroll wrapper for the rows. The page itself never scrolls;
   only this container does. See docs/IRON-LAW-NO-SCROLL.md. */
.page-ops-queue-rows {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.page-ops-queue-empty {
  padding: 20px 22px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Loading state: branded, cool-spectrum, no scroll jump. Shown in the shell
   while api.getBookedQueue resolves, then replaced by the real queue. */
.page-ops-queue-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 22px;
  font-size: 13px;
  color: var(--text-muted);
}
.page-ops-queue-spinner {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.page-ops-queue-divider {
  padding: 8px 22px;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.page-ops-queue-divider:first-child { border-top: 0; }

.page-ops-queue-row {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 90px 168px;
  gap: 16px;
  padding: 12px 22px;
  align-items: center;
  transition: background var(--t);
}
.page-ops-queue-row + .page-ops-queue-row { border-top: 1px solid var(--border); }
.page-ops-queue-row:hover { background: var(--hover); }
.page-ops-queue-row.is-next {
  background:
    radial-gradient(60% 60% at 100% 50%, rgba(99, 91, 255, 0.08), transparent 65%),
    var(--primary-soft);
}
.page-ops-queue-row.is-next:hover {
  background:
    radial-gradient(60% 60% at 100% 50%, rgba(99, 91, 255, 0.12), transparent 65%),
    var(--primary-soft);
}

/* Time cell -------------------------------------------------- */
.page-ops-queue-cell-time {
  text-align: center;
  min-width: 0;
}
.page-ops-queue-cell-time .h {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.page-ops-queue-cell-time .h small {
  font-size: 9px;
  font-weight: 600;
  margin-left: 2px;
  text-transform: lowercase;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.page-ops-queue-row.is-next .page-ops-queue-cell-time .h {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.page-ops-queue-cell-time .tz {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  margin-top: 3px;
  text-transform: uppercase;
}

/* Client cell ------------------------------------------------ */
.page-ops-queue-cell-client {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.page-ops-queue-cell-client .name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-ops-queue-cell-client .meta {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Source cell + qchip ---------------------------------------- */
.page-ops-queue-cell-source {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}
.page-ops-queue-qchip {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--bg-tint);
  color: var(--text-soft);
  border: 1px solid var(--border);
  letter-spacing: 0.02em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.page-ops-queue-qchip.is-purple {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--status-done-bd);
}

/* Actions cell ----------------------------------------------- */
.page-ops-queue-cell-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  min-width: 0;
}
.page-ops-queue-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 99px;
  white-space: nowrap;
  line-height: 1.2;
}
.page-ops-queue-pill.is-confirmed {
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid var(--status-done-bd);
}
.page-ops-queue-pill.is-confirmed .pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.16);
  animation: livePulse 1.6s infinite;
  flex: 0 0 auto;
}
.page-ops-queue-pill.is-awaiting {
  color: var(--text-muted);
  background: var(--bg-tint);
  border: 1px solid var(--border);
}
.page-ops-queue-cta {
  white-space: nowrap;
  height: 28px;
  padding: 0 10px;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.002em;
  flex: 0 0 auto;
}

/* ------------------------------------------------------------
 * Call history · search head + outcome chips
 * Search fills 1fr, filter chip group on the right. Outcome
 * chips: signed=status-done tint, no-show=bg-tint muted,
 * failed=bg-tint muted-grey. NEVER red for any negative.
 * ------------------------------------------------------------ */
.page-ops-hist-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.page-ops-hist-search {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color var(--t);
}
.page-ops-hist-search:focus-within { border-color: var(--border-focus); }
.page-ops-hist-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
}
.page-ops-hist-search input::placeholder { color: var(--text-faint); }
.page-ops-hist-row {
  transition: background var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.page-ops-hist-row:hover {
  background: var(--hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.page-ops-hist-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.page-ops-hist-row .outcome-chip {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--bg-tint);
  color: var(--text-muted);
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}
.page-ops-hist-row .outcome-chip.signed {
  background: var(--status-done-bg);
  color: var(--status-done-fg);
  border-color: var(--status-done-bd);
}
.page-ops-hist-row .outcome-chip.noshow {
  background: var(--bg-tint);
  color: var(--text-muted);
  border-color: var(--border);
}
/* "failed" stays muted-grey only — never red */
.page-ops-hist-row .outcome-chip.failed {
  background: var(--bg-tint);
  color: var(--text-muted);
  border-color: var(--border);
}

/* ------------------------------------------------------------
 * Stand-up live · pixel parity sweep (px-33)
 * Mockup: design-mockups/06-daily-operations.html STATE 04
 *
 * Layout: 2-col grid (1fr | 320px). Left stage holds STAND-UP tag,
 * day title, started/elapsed metadata, Open Zoom CTA, the now-
 * speaking card, and the up-next queue. Right rail stacks the
 * attendance pip grid, Apex auto-summary, and NSD roll-up cards.
 * Footer holds the End stand-up vs Submit my piece CTA row.
 * ------------------------------------------------------------ */
.page-ops-su-shell {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Loading: paint the fixture-default layout immediately, then gently
   pulse it while the live stand-up record resolves. No layout shift,
   no scroll, cool-spectrum only. Class is removed on settle. */
.page-ops-su-shell.is-loading .page-ops-su-grid {
  animation: page-ops-su-load-pulse 1.4s ease-in-out infinite;
}
@keyframes page-ops-su-load-pulse {
  0%, 100% { opacity: 0.62; }
  50%      { opacity: 1; }
}
.page-ops-su-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: start;
}
.page-ops-su-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Stage shell */
.page-ops-su-stage {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}

/* Head row */
.page-ops-su-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.page-ops-su-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--primary);
  background: var(--primary-soft);
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.page-ops-su-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: livePulse 1.6s infinite;
}
.page-ops-su-h {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}
.page-ops-su-head-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.page-ops-su-started {
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: -0.002em;
}
.page-ops-su-elapsed-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--text-soft);
  letter-spacing: 0;
}
.page-ops-su-zoom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.003em;
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
}
.page-ops-su-zoom:hover {
  background: var(--hover);
  border-color: var(--border-strong);
}

/* Now-speaking card */
.page-ops-su-now {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 14px 12px;
  background: linear-gradient(180deg, var(--primary-soft) 0%, var(--surface) 100%);
  border: 1px solid var(--primary);
  border-radius: var(--radius-lg);
}
.page-ops-su-now-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}
.page-ops-su-now-body { min-width: 0; }
.page-ops-su-now-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.004em;
}
.page-ops-su-now-role {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 1px;
  letter-spacing: -0.002em;
}
.page-ops-su-now-quote {
  font-size: 12.5px;
  color: var(--text-soft);
  margin-top: 6px;
  line-height: 1.45;
  letter-spacing: -0.002em;
  font-style: italic;
}
.page-ops-su-now-meta {
  text-align: right;
  min-width: 64px;
}
.page-ops-su-now-timer {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0;
}
.page-ops-su-now-of {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0;
}

/* Queue */
.page-ops-su-queue {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-ops-su-queue-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.page-ops-su-q-row {
  display: grid;
  grid-template-columns: 28px 24px 1fr auto 92px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
}
.page-ops-su-q-row.done {
  background: var(--bg-soft);
  opacity: 0.78;
}
.page-ops-su-q-row.done .page-ops-su-q-name {
  text-decoration: line-through;
  text-decoration-color: var(--text-faint);
  color: var(--text-muted);
}
.page-ops-su-q-row.done .page-ops-su-q-stats,
.page-ops-su-q-row.done .page-ops-su-q-state {
  color: var(--text-muted);
}
.page-ops-su-q-row.up {
  background: var(--primary-soft);
  border-color: var(--primary);
}
.page-ops-su-q-ord {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0;
}
.page-ops-su-q-av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: 0;
}
.page-ops-su-q-av.self {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.page-ops-su-q-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.003em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-ops-su-q-row.up .page-ops-su-q-name {
  font-weight: 600;
  color: var(--text);
}
.page-ops-su-q-you {
  font-weight: 400;
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: -0.002em;
}
.page-ops-su-q-stats {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 0;
}
.page-ops-su-q-state {
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: right;
  letter-spacing: -0.002em;
}
.page-ops-su-q-row.up .page-ops-su-q-state {
  color: var(--primary);
  font-weight: 600;
}

/* Right rail cards */
.page-ops-su-rail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 13px 14px;
  box-shadow: var(--shadow-sm);
}
.page-ops-su-rail-eye {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.page-ops-su-rail-title {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.004em;
  margin-bottom: 10px;
}
.page-ops-su-rail-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
  letter-spacing: -0.002em;
}

/* Attendance pip grid · 10 cols x 5 rows */
.page-ops-su-pip-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
  margin-bottom: 10px;
}
.page-ops-su-pip {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  border: 1px solid var(--border);
  padding: 0;
  background: var(--bg-tint);
  cursor: pointer;
  transition: transform var(--t), background var(--t), border-color var(--t);
}
.page-ops-su-pip:hover {
  transform: scale(1.08);
  border-color: var(--border-strong);
}
.page-ops-su-pip.here {
  background: var(--primary);
  border-color: var(--primary);
}
.page-ops-su-pip.missing {
  background: repeating-linear-gradient(
    45deg,
    var(--border-strong) 0,
    var(--border-strong) 2px,
    var(--bg-soft) 2px,
    var(--bg-soft) 4px
  );
  border-color: var(--border-strong);
}
.page-ops-su-pip-legend {
  display: flex;
  gap: 14px;
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: -0.002em;
}
.page-ops-su-pip-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.page-ops-su-pip-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}
.page-ops-su-pip-dot.here { background: var(--primary); }
.page-ops-su-pip-dot.missing {
  background: repeating-linear-gradient(
    45deg,
    var(--border-strong) 0,
    var(--border-strong) 1.5px,
    var(--bg-soft) 1.5px,
    var(--bg-soft) 3px
  );
}

/* Apex auto-summary */
.page-ops-su-summary {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 11px;
}
.page-ops-su-summary-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin-bottom: 6px;
}
.page-ops-su-summary-body {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-soft);
  letter-spacing: -0.002em;
}
.page-ops-su-summary-body b {
  font-weight: 600;
  color: var(--text);
}

/* Footer CTA row */
.page-ops-su-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.page-ops-su-cta-next {
  flex: 1;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: -0.002em;
}
.page-ops-su-end {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.003em;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.page-ops-su-end:hover {
  background: var(--hover);
  border-color: var(--border-strong);
  color: var(--text);
}
.page-ops-su-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 18px;
  border-radius: var(--radius);
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.003em;
  cursor: pointer;
  transition: filter var(--t), transform var(--t);
}
.page-ops-su-submit:hover { filter: brightness(1.06); }
.page-ops-su-submit:active { transform: translateY(1px); }
.page-ops-su-submit.done,
.page-ops-su-submit:disabled {
  background: var(--text-faint);
  border-color: var(--text-faint);
  cursor: default;
  filter: none;
}

/* ------------------------------------------------------------
 * Notifications · 2-tier feed  (PX-37 parity with mockup STATE 08)
 *
 * Tier 1 — "What needs you" cards get a gradient left edge,
 *          a soft purple wash, and one primary CTA per row.
 *          The TOP needs-card gets a .primary modifier with a
 *          gradient icon tile (the eye-anchor).
 * Tier 2 — "For your information" cards are quieter: muted icon
 *          tile, no left edge, no body wash, ghost dismiss action.
 *
 * Layout grid (both tiers, single row):
 *   32px icon tile  |  1fr title+sub  |  auto action chip  |  auto mono time
 *
 * Hero strip sits above tier 1 with the gradient count number.
 * Mark-all-read is a top-right .btn that lives in the head bar.
 * ------------------------------------------------------------ */

/* Hero strip — single sentence orienting the inbox */
.page-ops-notif-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px 14px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 10px;
}
.page-ops-notif-hero h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text);
  line-height: 1.2;
}
.page-ops-notif-hero h1 .n {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.page-ops-notif-hero .sub {
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: right;
  max-width: 320px;
}

/* Head bar — filter pills (left) + mark-all-read (right) */
.page-ops-notif-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

/* Tier separator — small uppercase eyebrow + mono count chip + hairline */
.page-ops-notif-tier {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 4px 8px;
  margin-top: 14px;
}
.page-ops-notif-tier::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.page-ops-notif-tier .count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-tint);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 99px;
  letter-spacing: 0;
  text-transform: none;
}

/* The unified row — used for both tiers */
.page-ops-notif-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
  position: relative;
}
.page-ops-notif-card:hover {
  border-color: var(--border-strong);
  background: var(--hover);
}
.page-ops-notif-card:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.12);
}

/* Urgent (needs-you) — left gradient accent + soft purple wash */
.page-ops-notif-card.urgent {
  border-color: var(--status-done-bd);
  background:
    linear-gradient(90deg, rgba(99, 91, 255, 0.06), transparent 24%),
    var(--surface);
}
.page-ops-notif-card.urgent::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: var(--grad);
  border-radius: 0 3px 3px 0;
}

/* Icon tile */
.page-ops-notif-card .icon-tile {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-tint);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.page-ops-notif-card.urgent .icon-tile {
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--status-done-bd);
}
.page-ops-notif-card.urgent.primary .icon-tile {
  background: var(--grad);
  color: #ffffff;
  border: 0;
  box-shadow:
    0 2px 6px -2px rgba(99, 91, 255, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* Body — title + supporting sub line, both truncate */
.page-ops-notif-card .body { min-width: 0; }
.page-ops-notif-card .body .title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-ops-notif-card .body .sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-ops-notif-card .body .sub b { color: var(--text-soft); font-weight: 600; }

/* Action column — primary CTA on needs rows, ghost dismiss on FYI */
.page-ops-notif-card .action { flex-shrink: 0; }
.page-ops-notif-card .action .btn {
  height: 28px;
  padding: 0 11px;
  font-size: 11.5px;
  font-weight: 500;
}
.page-ops-notif-card .action .btn-primary {
  height: 28px;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 6px;
}
.page-ops-notif-card .action .btn-dismiss {
  height: 28px;
  width: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-faint);
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.page-ops-notif-card .action .btn-dismiss:hover {
  background: var(--hover);
  color: var(--text-soft);
  border-color: var(--border);
}

/* Monospace timestamp */
.page-ops-notif-card .time {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--text-faint);
  white-space: nowrap;
  letter-spacing: 0.02em;
  min-width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Empty-tier hint row */
.page-ops-notif-empty {
  padding: 16px 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
  font-style: italic;
  opacity: 0.7;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg-soft);
  margin-bottom: 6px;
}

/* Load-older footer link */
.page-ops-notif-loadmore {
  text-align: center;
  padding-top: 14px;
}
.page-ops-notif-loadmore a {
  font-size: 12px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.page-ops-notif-loadmore a:hover { text-decoration: underline; }

/* ------------------------------------------------------------
 * Daily-ops hub (#/ops) - tile hover lift
 * ------------------------------------------------------------ */
.page-ops-hub-tile {
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.page-ops-hub-tile:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.page-ops-hub-tile:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ===== pages/chat/chat.css ===== */
/* ============================================================
 * APEX SALES OS · CHAT (Rooms + DM)
 * Owner: Worker W16
 * iMessage-style chassis. Rooms list on left, active thread on right.
 * Pixel parity with design-mockups/06-daily-operations.html STATE 07.
 * ============================================================ */

.page-chat-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  /* IRON LAW (no page scroll, 1440x900): the shell claims the remaining
     viewport via the flex chain in 01-base.css. The rail + pane stretch
     to fill, and the .page-chat-pane-body owns the message-thread scroll.
     See docs/IRON-LAW-NO-SCROLL.md. */
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
  overflow: hidden;
}

/* ============================================================
 * Left rail · rooms / DMs
 * ============================================================ */
.page-chat-rail {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page-chat-rail-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
}
.page-chat-rail-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
}

.page-chat-rail-search {
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.page-chat-rail-search input {
  width: 100%;
  height: 32px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: 12.5px;
  color: var(--text);
  transition: all var(--t);
}
.page-chat-rail-search input::placeholder { color: var(--text-muted); }
.page-chat-rail-search input:hover  { border-color: var(--border-strong); }
.page-chat-rail-search input:focus  {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
}

.page-chat-rail-section {
  padding: 14px 14px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--text-muted);
}

.page-chat-rail-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 12px;
}

.page-chat-rail-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
  border: 1px solid transparent;
}
.page-chat-rail-row:hover { background: var(--hover); }
.page-chat-rail-row.active {
  background: var(--primary-soft);
  border-color: var(--status-done-bd);
}

.page-chat-rail-row .av {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-soft);
  flex-shrink: 0;
}
.page-chat-rail-row.active .av { border-color: var(--primary); }
.page-chat-rail-row.apex .av {
  background: var(--grad);
  border: 0;
  color: #fff;
  box-shadow: 0 2px 6px -2px rgba(99, 91, 255, .45),
              inset 0 0 0 1px rgba(255, 255, 255, .20);
}

/* presence pulse — never red, always purple */
.page-chat-rail-row .av .online-dot,
.page-chat-pane-head .av .online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--bg-soft);
  box-shadow: 0 0 0 0 rgba(99, 91, 255, .55);
  animation: pageChatPulse 2.4s ease-out infinite;
}
.page-chat-pane-head .av .online-dot { border-color: var(--surface); }

@keyframes pageChatPulse {
  0%   { box-shadow: 0 0 0 0 rgba(99, 91, 255, .45); }
  70%  { box-shadow: 0 0 0 6px rgba(99, 91, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 91, 255, 0); }
}

.page-chat-rail-row .name {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-chat-rail-row.active .name { font-weight: 700; }
.page-chat-rail-row .preview {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.page-chat-rail-row .meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}
.page-chat-rail-row .time {
  font-size: 10.5px;
  color: var(--text-faint);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.page-chat-rail-row .unread {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--primary);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============================================================
 * Right pane · active thread
 * ============================================================ */
.page-chat-pane {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.page-chat-pane-head {
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 14px;
}
.page-chat-pane-head .av {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1.5px solid var(--status-done-bd);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.02em;
  flex-shrink: 0;
}
.page-chat-pane-head .av.apex {
  background: var(--grad);
  color: #fff;
  border: 0;
  box-shadow: 0 2px 6px -2px rgba(99, 91, 255, .45);
}
.page-chat-pane-head .name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--text);
  line-height: 1.2;
}
.page-chat-pane-head .sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.page-chat-pane-head .meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-chat-pane-head .call-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 99px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: all var(--t);
}
.page-chat-pane-head .call-btn:hover {
  background: var(--primary-soft);
  border-color: var(--status-done-bd);
  color: var(--primary);
}
.page-chat-pane-head .call-btn svg {
  width: 13px;
  height: 13px;
}

/* ============================================================
 * Message feed
 * ============================================================ */
.page-chat-pane-body {
  /* IRON LAW: thread scrolls INSIDE the pane; pane head + foot stay
     anchored. min-height: 0 is required so the body shrinks to its
     allotted flex slice instead of expanding to fit its messages.
     See docs/IRON-LAW-NO-SCROLL.md. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 26px 30px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(99, 91, 255, .04), transparent 70%),
    var(--bg-warm);
}

/* Day divider — eyebrow style, no rules through the text */
.page-chat-pane-body .day-divider {
  text-align: center;
  margin: 18px 0 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* JBM mono on timestamps + read receipts within the chat pane.
   Shared .bubble-time keeps its layout, we just upgrade the font here. */
.page-chat-pane-body .bubble-time,
.page-chat-pane-body .bubble-sender {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
 * Composer
 * ============================================================ */
.page-chat-pane-foot {
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-chat-pane-foot textarea {
  flex: 1;
  min-height: 40px;
  max-height: 120px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 10px 16px;
  font-size: 13.5px;
  color: var(--text);
  font-family: inherit;
  line-height: 1.45;
  resize: none;
  transition: border-color var(--t), background var(--t);
}
.page-chat-pane-foot textarea::placeholder { color: var(--text-muted); }
.page-chat-pane-foot textarea:hover  { border-color: var(--border-strong); }
.page-chat-pane-foot textarea:focus  {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
}

.page-chat-pane-foot .send {
  height: 40px;
  width: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  cursor: pointer;
  transition: opacity var(--t), transform var(--t), box-shadow var(--t);
  box-shadow: 0 2px 8px -2px rgba(99, 91, 255, .45);
  flex-shrink: 0;
}
.page-chat-pane-foot .send:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -2px rgba(99, 91, 255, .55);
}
.page-chat-pane-foot .send[disabled] {
  opacity: 0.5;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* ============================================================
 * iMessage parity overrides (scoped to .page-chat-pane-body)
 * The shared .bubble primitive is plain — these overrides match
 * design-mockups/06-daily-operations.html STATE 06 + 07 exactly:
 *   - "them" bubbles: surface bg + border + tail (radius 18/6)
 *   - "me" bubbles: gradient + soft purple shadow + opposite tail
 *   - "apex" bubbles: primary-soft + status-done-bd border
 *   - row max-width 75%, tighter avatar gap
 * ============================================================ */
.page-chat-pane-body .bubble-row {
  max-width: 75%;
  gap: 10px;
  margin-bottom: 6px;
}
.page-chat-pane-body .bubble-row.them {
  margin-right: auto;
}
.page-chat-pane-body .bubble-row.me {
  margin-left: auto;
}
.page-chat-pane-body .bubble-row.apex {
  margin-right: auto;
  max-width: 80%;
}

.page-chat-pane-body .bubble-av {
  width: 30px;
  height: 30px;
  font-size: 11px;
}
.page-chat-pane-body .bubble-row.apex .bubble-av {
  background: var(--grad);
  color: #fff;
  border: 0;
  box-shadow:
    0 2px 6px -2px rgba(99, 91, 255, .45),
    inset 0 0 0 1px rgba(255, 255, 255, .20);
}
.page-chat-pane-body .bubble-row.me .bubble-av {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--status-done-bd);
}

.page-chat-pane-body .bubble-sender {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 0 6px;
  margin: 0 0 4px;
}
.page-chat-pane-body .bubble-row.me .bubble-sender { text-align: right; }
.page-chat-pane-body .bubble-row.apex .bubble-sender {
  color: var(--primary);
  font-weight: 600;
}

/* "them" bubble: surface + hairline border + iMessage tail (bottom-left 6px) */
.page-chat-pane-body .bubble-row.them .bubble {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  padding: 11px 16px;
  font-size: 14px;
  line-height: 1.45;
  max-width: 100%;
}

/* "me" bubble: gradient + white text + soft purple shadow + tail (bottom-right 6px) */
.page-chat-pane-body .bubble-row.me .bubble {
  background: var(--grad);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 18px;
  border-bottom-right-radius: 6px;
  padding: 11px 16px;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 4px 12px -4px rgba(99, 91, 255, .40);
  max-width: 100%;
}

/* "apex" bubble: primary-soft + done-bd border + tail */
.page-chat-pane-body .bubble-row.apex .bubble {
  background: var(--primary-soft);
  border: 1px solid var(--status-done-bd);
  color: var(--text);
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  padding: 11px 16px;
  font-size: 14px;
  line-height: 1.45;
  max-width: 100%;
}

/* @mention highlight inside any bubble */
.page-chat-pane-body .bubble .at {
  color: var(--primary);
  font-weight: 600;
}
.page-chat-pane-body .bubble-row.me .bubble .at {
  color: #fff;
  font-weight: 700;
  background: rgba(255, 255, 255, .18);
  padding: 0 6px;
  border-radius: 4px;
}

/* reactions: chip-style, sit half-overlapping the bottom edge */
.page-chat-pane-body .bubble-reactions {
  display: inline-flex;
  gap: 4px;
  margin-top: -8px;
  margin-left: 8px;
  position: relative;
  z-index: 1;
}
.page-chat-pane-body .bubble-row.me .bubble-reactions {
  margin-left: auto;
  margin-right: 8px;
}

.page-chat-pane-body .bubble-time {
  font-size: 10.5px;
  color: var(--text-faint);
  padding: 0 6px;
  margin: 4px 0 0;
}
.page-chat-pane-body .bubble-row.me .bubble-time { text-align: right; }

/* ============================================================
 * Day divider — eyebrow chip with hairline rules flanking the text
 * ("SUNDAY, MAY 17" reads as a divider, not as a heading)
 * ============================================================ */
.page-chat-pane-body .day-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 22px 0 14px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
}
.page-chat-pane-body .day-divider::before,
.page-chat-pane-body .day-divider::after {
  content: '';
  height: 1px;
  background: var(--border);
}
.page-chat-pane-body .day-divider:first-child { margin-top: 4px; }

/* ============================================================
 * "Live" indicator in pane head — purple pulse dot before text
 * (never red — purple pulse iron law)
 * Scoped to .live-pill so it does not clobber the DM .meta
 * container that holds the Call button.
 * ============================================================ */
.page-chat-pane-head .live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 10px;
  border-radius: 99px;
  background: var(--primary-soft);
  border: 1px solid var(--status-done-bd);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
.page-chat-pane-head .live-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 0 rgba(99, 91, 255, .55);
  animation: pageChatLivePulse 1.8s ease-out infinite;
}
@keyframes pageChatLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(99, 91, 255, .55); }
  70%  { box-shadow: 0 0 0 6px rgba(99, 91, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 91, 255, 0); }
}

/* ============================================================
 * Active room rail row — make the selection unmistakable
 * (left accent + slightly heavier border, keeps primary-soft bg)
 * ============================================================ */
.page-chat-rail-row.active {
  position: relative;
  background: var(--primary-soft);
  border-color: var(--status-done-bd);
  box-shadow: inset 2px 0 0 var(--primary);
}
.page-chat-rail-row.active .name {
  color: var(--text);
  font-weight: 700;
}

/* ============================================================
 * PX-35 additions (team-chat iMessage parity)
 * Recovered after brain-merge auto-resolve. These are additive
 * to the px-36 (DM) chassis above so both surfaces render right.
 * ============================================================ */

/* ---- composer pill: attach + textarea + send live inside one pill ---- */
.page-chat-pane-foot .composer {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 6px 8px 6px 14px;
  transition: border-color var(--t), background var(--t);
}
.page-chat-pane-foot .composer:focus-within {
  border-color: var(--border-focus);
  background: var(--surface);
}
.page-chat-pane-foot .composer-attach {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--text-faint);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t), color var(--t);
}
.page-chat-pane-foot .composer-attach:hover {
  background: var(--hover);
  color: var(--text);
}
/* When the textarea is wrapped inside .composer, strip its own border/bg
   so the pill is the visible chrome (px-36 standalone textarea is untouched). */
.page-chat-pane-foot .composer textarea {
  flex: 1;
  min-height: 28px;
  max-height: 120px;
  background: transparent;
  border: 0;
  padding: 6px 4px;
  font-size: 13.5px;
  color: var(--text);
  resize: none;
  font-family: inherit;
  line-height: 1.45;
}
.page-chat-pane-foot .composer textarea:hover  { border: 0; background: transparent; }
.page-chat-pane-foot .composer textarea:focus  { outline: none; border: 0; background: transparent; }
.page-chat-pane-foot .composer textarea::placeholder { color: var(--text-muted); }

/* ---- typing indicator: three calm purple pulsing dots ---- */
.page-chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 18px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  width: max-content;
  margin: 4px 0 4px 38px;
}
.page-chat-typing .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.6;
  animation: chat-pulse 1.2s ease-in-out infinite;
}
.page-chat-typing .dot:nth-child(2) { animation-delay: 0.15s; }
.page-chat-typing .dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes chat-pulse {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%      { transform: translateY(-3px); opacity: 1; }
}

/* ---- empty / error / placeholder pane states ---- */
.page-chat-pane-empty,
.page-chat-pane-error,
.page-chat-pane-placeholder {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

/* ===== pages/pitch/pitch.css ===== */
/* ============================================================
 * APEX SALES OS — PITCH TOOL (page-local styles)
 * Source: design-mockups/01-pitch-tool.html
 * Scope:  .page-pitch-* only. All tokens come from the global
 *         design system. NO red. NO emoji. NO hard brand colors.
 * ============================================================ */


/* ------------------------------------------------------------
 * FRAME — the pitch tool fills the viewport minus topbar+context
 * ------------------------------------------------------------ */
/* Lens 3: removed min-height:720px — frame must flex-fill the available shell
 * height. Each state renderer wraps its content in .inner-scroll. */
.page-pitch-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  gap: 12px;
}


/* ------------------------------------------------------------
 * LIVE RIBBON — top strip in live state (small, calm)
 *   Mirrors mockup STATE 03 topbar-actions: tiny live chip with the
 *   timer baked in + lead meta on the left; mic chip + End Pitch on
 *   the right. Whole row reads as a quiet status strip, not a banner.
 * ------------------------------------------------------------ */
.page-pitch-ribbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.page-pitch-ribbon-left  { display: flex; align-items: center; gap: 12px; min-width: 0; }
.page-pitch-ribbon-right { display: flex; align-items: center; gap: 10px; }

/* live chip — pulse + label + timer in a single calm pill */
.page-pitch-live-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid var(--status-done-bd);
  padding: 4px 10px; border-radius: 99px;
}
.page-pitch-live-chip-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.16);
  animation: livePulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.page-pitch-live-chip-lbl  { letter-spacing: 0.10em; }
.page-pitch-live-chip-sep  { opacity: 0.45; }
.page-pitch-live-chip-timer {
  color: var(--text);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.page-pitch-ribbon-meta {
  font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* mic chip — small, neutral; primary tint only when active */
.page-pitch-ribbon-mic {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 4px 9px; border-radius: 99px;
}
.page-pitch-ribbon-mic.is-active {
  background: var(--primary-soft);
  border-color: var(--status-done-bd);
  color: var(--primary);
}
.page-pitch-ribbon-mic.is-off {
  background: var(--bg-tint);
  border-color: var(--border-strong);
  color: var(--text-muted);
}

.page-pitch-ribbon-end {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-soft); font-size: 12.5px; font-weight: 500;
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
}
.page-pitch-ribbon-end:hover {
  background: var(--hover); color: var(--text);
  border-color: var(--border-strong);
}


/* ------------------------------------------------------------
 * INTAKE — 2-col shell (rail + card), matches mockup state 01
 * ------------------------------------------------------------ */
.page-pitch-intake-shell {
  flex: 1;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 0;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 680px;
}

.page-pitch-intake-left {
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-pitch-intake-leftblock {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 14px 12px;
}

.page-pitch-intake-leftblock-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.page-pitch-intake-leftblock-head .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
}

.page-pitch-intake-callname {
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.012em; color: var(--text);
}
.page-pitch-intake-callsub {
  font-size: 12px; color: var(--text-muted);
  margin-top: 4px;
}
.page-pitch-intake-callmeta {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; color: var(--text-muted);
  padding-top: 10px; margin-top: 10px;
  border-top: 1px solid var(--border);
}
.page-pitch-intake-callmeta .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--text-faint);
}
.page-pitch-intake-ctxbody {
  font-size: 12.5px; color: var(--text-soft); line-height: 1.55;
}

.page-pitch-intake-right {
  padding: 28px 36px 32px;
  display: flex; flex-direction: column; gap: 20px;
  min-width: 0;
}

.page-pitch-intake-header {
  display: block;
}

.page-pitch-intake-eye {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.page-pitch-intake-eye-tick {
  width: 14px; height: 1px; background: var(--text-faint);
}

.page-pitch-intake-title {
  font-size: 28px; font-weight: 600;
  letter-spacing: -0.022em; margin: 0;
  color: var(--text);
}

.page-pitch-intake-sub {
  color: var(--text-muted); font-size: 14px;
  margin: 8px 0 0; max-width: 560px;
  line-height: 1.45;
}

.page-pitch-intake-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px 36px 28px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 24px;
}

.page-pitch-intake-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: center;
  padding: 4px 0;
}
.page-pitch-intake-row .lbl {
  font-size: 14px; font-weight: 600;
  color: var(--text); letter-spacing: -0.005em;
}
.page-pitch-intake-row .hint {
  font-size: 11.5px; font-weight: 450;
  color: var(--text-faint);
  margin-top: 3px;
}
.page-pitch-intake-row .prefill {
  font-size: 11px; font-weight: 500;
  color: var(--primary); margin-top: 3px;
}

.page-pitch-intake-control {
  display: flex; align-items: center;
  min-width: 0;
}

/* ----------------------------------------------------------------
 * INTAKE — control overrides (mockup state 01)
 *   Mockup uses larger toggle/seg/stepper inside the intake card than
 *   the shared primitives. Override locally without touching primitives.
 * ---------------------------------------------------------------- */

/* toggle-pair (Yes / No) inside intake card */
.page-pitch-intake-card .toggle-pair {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 240px;
}
.page-pitch-intake-card .toggle-pair .seg-opt {
  flex: 1;
  height: auto;
  padding: 10px 16px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 5px;
  cursor: pointer;
  display: block;
  transition: all var(--t);
}
.page-pitch-intake-card .toggle-pair .seg-opt:hover { color: var(--text); }
.page-pitch-intake-card .toggle-pair .seg-opt.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

/* seg-3 (Solo / Broker / Team Lead) inside intake card */
.page-pitch-intake-card .seg-group.seg-3 {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 420px;
  grid-template-columns: none;
}
.page-pitch-intake-card .seg-group.seg-3 .seg-opt {
  flex: 1;
  height: auto;
  padding: 11px 14px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 5px;
  cursor: pointer;
  display: block;
  transition: all var(--t);
}
.page-pitch-intake-card .seg-group.seg-3 .seg-opt:hover { color: var(--text); }
.page-pitch-intake-card .seg-group.seg-3 .seg-opt.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

/* stepper (− 22 +) inside intake card */
.page-pitch-intake-card .stepper {
  display: flex;
  align-items: stretch;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  width: 200px;
  max-width: 200px;
}
.page-pitch-intake-card .stepper-btn {
  width: 48px;
  height: auto;
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 600;
  background: transparent;
  transition: background var(--t), color var(--t);
}
.page-pitch-intake-card .stepper-btn:hover {
  background: var(--hover);
  color: var(--text);
}
.page-pitch-intake-card .stepper-value {
  flex: 1;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 10px 0;
  height: auto;
  min-width: 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: grid; place-items: center;
}

/* Client chips */
.page-pitch-intake-clients {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.page-pitch-intake-chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px 10px 12px;
  font-size: 13.5px;
  max-width: 380px;
}
.page-pitch-intake-chip .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: -0.02em;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.page-pitch-intake-chip .name {
  font-weight: 600; color: var(--text); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page-pitch-intake-chip .src {
  font-size: 10.5px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600;
  flex-shrink: 0;
}

/* Optional note */
.page-pitch-intake-note {
  margin-top: 6px;
}
.page-pitch-intake-note > summary {
  list-style: none; cursor: pointer;
  font-size: 12.5px; color: var(--text-muted);
  font-weight: 500; padding: 6px 0;
}
.page-pitch-intake-note > summary::-webkit-details-marker { display: none; }
.page-pitch-intake-note[open] > summary { color: var(--text); }
.page-pitch-intake-note-body { margin-top: 10px; }
.page-pitch-intake-note textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13.5px;
  resize: vertical;
  min-height: 56px;
  color: var(--text);
}

/* Foot */
.page-pitch-intake-foot {
  display: flex; align-items: center; gap: 14px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
}
.page-pitch-intake-foot-meta {
  color: var(--text-muted); font-size: 12.5px;
  display: flex; align-items: center; gap: 8px;
}
.page-pitch-intake-foot-meta .page-pitch-intake-tier {
  color: var(--text); font-weight: 600; margin-left: 4px;
}
.page-pitch-intake-foot-spacer { flex: 1; }
.page-pitch-intake-start {
  padding: 18px 32px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.008em;
  border-radius: 12px;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 8px 24px -6px rgba(99, 91, 255, 0.45),
    0 2px 6px -2px rgba(99, 91, 255, 0.40);
}
.page-pitch-intake-start:hover {
  filter: brightness(1.05);
  color: white;
}


/* ------------------------------------------------------------
 * READY — slide preview hero (mockup state 02)
 * Spec: design-mockups/01-pitch-tool.html lines 1092-1156.
 * Status pill + share-screen hint + big single CTA above a
 * bg-warm framed cover slide. Slide foot: prev, counter,
 * progress bar, time estimate, primary next.
 * ------------------------------------------------------------ */
.page-pitch-ready {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  min-height: 0;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.page-pitch-ready-action {
  display: flex; align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}

.page-pitch-ready-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid var(--status-done-bd);
  padding: 4px 10px; border-radius: 99px;
}
.page-pitch-ready-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.16);
  animation: livePulse 1.6s ease-in-out infinite;
}

.page-pitch-ready-action-spacer { flex: 1; }

.page-pitch-ready-hint {
  font-size: 12.5px; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.page-pitch-ready-hint .kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.page-pitch-ready-start {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  font-size: 15px; font-weight: 650;
  letter-spacing: -0.008em;
  border-radius: var(--radius-lg);
  background: var(--grad);
  color: white;
  border: 0;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 8px 24px -6px rgba(99, 91, 255, 0.45),
    0 2px 6px -2px rgba(99, 91, 255, 0.40);
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  cursor: pointer;
}
.page-pitch-ready-start:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 12px 30px -6px rgba(99, 91, 255, 0.55),
    0 3px 8px -2px rgba(99, 91, 255, 0.45);
}
.page-pitch-ready-start:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.page-pitch-ready-start-label {
  font-weight: 650;
}
.page-pitch-ready-start-key {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.18);
  color: white;
  letter-spacing: 0.04em;
  margin-left: 2px;
}

.page-pitch-ready-well {
  flex: 1;
  padding: 32px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 0;
  overflow: auto;
}

.page-pitch-ready-stage {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}

.page-pitch-ready-foot-prev,
.page-pitch-ready-foot-next {
  display: inline-flex; align-items: center; justify-content: center;
}
.page-pitch-ready-foot-prev[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.page-pitch-ready-foot-counter {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 90px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-pitch-ready-empty {
  max-width: 560px;
  margin: 48px auto;
  padding: 32px;
  text-align: center;
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  border-radius: 12px;
}
.page-pitch-ready-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.page-pitch-ready-empty-sub {
  font-size: 13px;
  color: var(--text-muted);
}
.page-pitch-ready-foot-eta {
  font-size: 12px;
  color: var(--text-muted);
  width: 70px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* ------------------------------------------------------------
 * LIVE — slide-is-hero cockpit
 *   Mirrors mockup STATE 03: a slim ribbon, a 2-col shell (rail +
 *   stage), rail blocks for Slide Index + Live Transcript and a
 *   transparency note. No waveform card, no score chip bar — the
 *   slide takes ~80% of the visual weight.
 * ------------------------------------------------------------ */
.page-pitch-live-root { position: relative; }

.page-pitch-live {
  display: flex; flex-direction: column;
  gap: 10px;
  min-height: 0;
  flex: 1;
}

/* shell: 280px rail + slide stage */
.page-pitch-live-shell {
  flex: 1;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 0;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 0;
}

/* left rail — quiet panels, rep-only */
.page-pitch-live-rail {
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  padding: 18px 16px;
  display: flex; flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

.page-pitch-live-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px 10px;
  min-width: 0;
}
.page-pitch-live-block-head {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.page-pitch-live-block-head-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}

/* slide index — compact list, active row highlighted in primary tint */
.page-pitch-live-index {
  display: flex; flex-direction: column;
  gap: 1px;
  font-size: 12.5px;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.page-pitch-live-index-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--t), color var(--t);
  border: 1px solid transparent;
}
.page-pitch-live-index-row:hover {
  background: var(--bg-tint);
  color: var(--text-soft);
}
.page-pitch-live-index-row.is-active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
  border-color: var(--status-done-bd);
}
.page-pitch-live-index-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.page-pitch-live-index-row.is-active .page-pitch-live-index-num {
  color: var(--primary);
}
.page-pitch-live-index-lbl {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}

/* live transcript — small, calm, fades at the bottom */
.page-pitch-live-transcript {
  display: flex; flex-direction: column;
  gap: 6px;
  font-size: 12px; line-height: 1.45;
  max-height: 200px;
  overflow: hidden;
  position: relative;
}
.page-pitch-live-transcript::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 32px;
  background: linear-gradient(to bottom, transparent, var(--surface));
  pointer-events: none;
}
.page-pitch-live-transcript-ln {
  color: var(--text-soft);
}
.page-pitch-live-transcript-who {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-weight: 600; color: var(--text);
  margin-right: 5px;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
}
.page-pitch-live-transcript-ln.is-live .page-pitch-live-transcript-who {
  color: var(--primary);
}
.page-pitch-live-transcript-caret {
  color: var(--text-faint);
  margin-left: 2px;
}
/* honest empty state — shown until the first line is actually captured.
   Replaces the seeded demo dialogue that used to fill this rail. Existing
   tokens only, no new visual language. */
.page-pitch-live-transcript-empty {
  color: var(--text-muted);
  font-style: italic;
}

/* transparency note — soft "client only sees the slide" line */
.page-pitch-live-note {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 11.5px; color: var(--text-muted);
  line-height: 1.45;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 11px;
}
.page-pitch-live-note > svg,
.page-pitch-live-note > .page-pitch-live-ico-fallback {
  flex-shrink: 0; margin-top: 1px;
  color: var(--primary);
}
.page-pitch-live-note-body {
  min-width: 0;
}
.page-pitch-live-note-body b {
  color: var(--text); font-weight: 600;
}

/* video room block: rep-side realtime room indicator (apex-realtime).
   Connected reads in brand primary, audio-only in muted text. No red or green. */
.page-pitch-live-video {
  display: flex; flex-direction: column;
}
.page-pitch-live-video-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600;
  color: var(--primary);
}
.page-pitch-live-video-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.16);
  flex-shrink: 0;
  animation: pitchVideoPulse 1.8s ease-in-out infinite;
}
@keyframes pitchVideoPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.16); }
  50%      { box-shadow: 0 0 0 6px rgba(99, 91, 255, 0.05); }
}
.page-pitch-live-video-id {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--text-muted);
  margin-top: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
}
.page-pitch-live-video-copy {
  margin-top: 10px;
  width: 100%;
  justify-content: center;
  font-size: 12px; font-weight: 500;
}
.page-pitch-live-video-note {
  font-size: 11.5px; line-height: 1.45;
  color: var(--text-muted);
}
.page-pitch-live-video-note b {
  color: var(--text-soft); font-weight: 600;
}

/* stage hero column */
.page-pitch-live-stage {
  position: relative;
  padding: 22px 28px 24px;
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background: var(--bg-warm);
}
.page-pitch-live-stage > .slide-stage {
  flex: 1;
  min-height: 0;
  box-shadow: var(--shadow-sm);
}

/* click zones over left/right thirds (invisible, accessible) */
.page-pitch-live-zone {
  position: absolute;
  top: 80px;
  bottom: 80px;
  width: 26%;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 5;
}
.page-pitch-live-zone-left  { left: 24px; }
.page-pitch-live-zone-right { right: 24px; }
.page-pitch-live-zone:focus-visible {
  outline: 2px dashed var(--primary);
  outline-offset: -8px;
}

/* stage foot — prev | "Slide N of M" | progress bar | "~ X min" | next */
.page-pitch-live-stage .slide-stage-foot {
  gap: 12px;
}
.page-pitch-live-foot-nav-btn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: background-color var(--t), color var(--t), border-color var(--t);
}
.page-pitch-live-foot-nav-btn:hover {
  background: var(--hover); color: var(--text);
  border-color: var(--border-strong);
}
.page-pitch-live-foot-nav-btn.is-primary {
  background: var(--primary);
  border-color: transparent;
  color: white;
}
.page-pitch-live-foot-nav-btn.is-primary:hover {
  filter: brightness(1.05);
  color: white;
}
.page-pitch-live-foot-label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  width: 84px;
  font-variant-numeric: tabular-nums;
}
.page-pitch-live-foot-progress {
  flex: 1; height: 4px;
  border-radius: 99px;
  background: var(--bg-tint);
  overflow: hidden;
  min-width: 0;
}
.page-pitch-live-foot-progress-fill {
  height: 100%;
  background: var(--grad);
  border-radius: 99px;
  transition: width 360ms cubic-bezier(0.2, 0.6, 0.3, 1);
}
.page-pitch-live-foot-rem {
  font-size: 12px;
  color: var(--text-muted);
  width: 64px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* ------------------------------------------------------------
 * NUDGE — discreet, rep-side only
 * Source: design-mockups/01-pitch-tool.html STATE 04 (.nudge-rail).
 * Lives off the slide canvas so the prospect on Zoom screen-share
 * never sees it. Calm tone, orb avatar, small card.
 * ------------------------------------------------------------ */
.page-pitch-nudges {
  position: absolute;
  top: 64px; left: 16px;
  display: flex; flex-direction: column;
  gap: 8px;
  z-index: 30;
  pointer-events: none;
  width: 300px;
  max-width: 32%;
}

/* Static rail mode (mockup v2): the nudge flows in the left rail above the
 * Slide Index instead of floating over the canvas. Resets the overlay
 * positioning so it behaves as a normal stacked rail block. */
.page-pitch-nudges-rail {
  position: static;
  top: auto; left: auto;
  z-index: auto;
  pointer-events: auto;
  width: auto;
  max-width: none;
  margin-bottom: 14px;
}
.page-pitch-nudges-rail .page-pitch-nudge-card {
  cursor: default;
}

.page-pitch-nudge-card {
  pointer-events: auto;
  background: var(--info-bg);
  border: 1px solid var(--status-done-bd);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  display: flex; align-items: flex-start; gap: 11px;
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  opacity: 0;
  transition: transform 240ms ease, opacity 240ms ease;
  cursor: pointer;
}
.page-pitch-nudge-card.show {
  transform: translateY(0);
  opacity: 1;
}

.page-pitch-nudge-orb {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 6px -2px rgba(99, 91, 255, 0.5);
  user-select: none;
}

.page-pitch-nudge-body {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-soft);
  min-width: 0;
}
.page-pitch-nudge-body b {
  color: var(--text);
  font-weight: 600;
}

.page-pitch-nudge-actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
}
.page-pitch-nudge-actions .btn {
  padding: 4px 10px;
  font-size: 11.5px;
}
.page-pitch-nudge-btn-primary {
  background: var(--grad);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
}
.page-pitch-nudge-btn-primary:hover {
  filter: brightness(1.04);
}


/* ------------------------------------------------------------
 * CLOSE — hero card (mockup state 05)
 * ------------------------------------------------------------ */
.page-pitch-close {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 36px 32px;
  min-height: 0;
}

.page-pitch-close-hero {
  width: 920px;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px 44px 36px;
  box-shadow: var(--shadow-md);
  display: block;
  position: relative;
  overflow: hidden;
}
.page-pitch-close-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 340px; height: 340px;
  background: radial-gradient(60% 60% at 70% 30%, rgba(99, 91, 255, 0.10), transparent 75%);
  pointer-events: none;
}

.page-pitch-close-eye {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--primary);
  text-transform: uppercase;
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
  position: relative;
}
.page-pitch-close-eye::before {
  content: '';
  width: 14px; height: 1px;
  background: var(--primary);
}

.page-pitch-close-title {
  font-size: 30px; font-weight: 600;
  letter-spacing: -0.022em;
  margin: 0; max-width: 580px;
  color: var(--text);
}

.page-pitch-close-sub {
  font-size: 14px; color: var(--text-muted);
  margin: 10px 0 0; max-width: 580px; line-height: 1.5;
}

.page-pitch-close-price {
  display: flex; align-items: baseline; gap: 18px;
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  flex-wrap: wrap;
}
.page-pitch-close-price .tier {
  font-size: 14px; font-weight: 600; color: var(--text);
}
.page-pitch-close-price .num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 22px; color: var(--text);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.page-pitch-close-price .sep { flex: 1; }
.page-pitch-close-price .breakdown {
  font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.page-pitch-close-price .change {
  font-size: 12px; color: var(--primary); font-weight: 500;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--status-done-bd);
  background: var(--primary-soft);
  cursor: pointer;
}
.page-pitch-close-price .change:hover {
  filter: brightness(0.98);
}

.page-pitch-close-actions {
  display: flex; align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
  position: relative;
}

.page-pitch-close-pay-link {
  background: var(--grad);
  color: white;
  border: 1px solid transparent;
  padding: 22px 34px;
  font-size: 17px; font-weight: 650;
  letter-spacing: -0.008em;
  border-radius: 12px;
  display: inline-flex; align-items: center; gap: 14px;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 10px 32px -8px rgba(99, 91, 255, 0.50),
    0 4px 8px -3px rgba(99, 91, 255, 0.36);
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  cursor: pointer;
}
.page-pitch-close-pay-link:hover {
  color: white;
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 14px 36px -8px rgba(99, 91, 255, 0.55),
    0 5px 10px -3px rgba(99, 91, 255, 0.40);
}
.page-pitch-close-pay-link .clip-ico {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  display: inline-flex; align-items: center; justify-content: center;
}

.page-pitch-close-shortcut {
  font-size: 11.5px; color: var(--text-muted);
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.page-pitch-close-shortcut .kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* Disclosure of "more links" */
.page-pitch-close-links {
  border-top: 1px dashed var(--border);
  padding-top: 14px;
  margin-top: 28px;
}
.page-pitch-close-links > summary {
  list-style: none; cursor: pointer;
  font-size: 12px; color: var(--text-muted);
  font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}
.page-pitch-close-links > summary::-webkit-details-marker { display: none; }
.page-pitch-close-links[open] > summary { color: var(--text); }

.page-pitch-close-link-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 14px;
  margin-top: 10px;
}
.page-pitch-close-link-icon {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.page-pitch-close-link-body { flex: 1; min-width: 0; }
.page-pitch-close-link-label {
  font-size: 12.5px; color: var(--text-soft);
  font-weight: 500;
}
.page-pitch-close-link-url {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page-pitch-close-link-copy {
  display: inline-flex; align-items: center; gap: 6px;
}

/* NMI status row */
.page-pitch-close-status {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.page-pitch-close-pay-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 6px 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.page-pitch-close-pay-chip .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-faint);
  animation: livePulse 1.6s ease-in-out infinite;
}
.page-pitch-close-pay-chip.paid {
  background: var(--primary-soft);
  border-color: var(--status-done-bd);
  color: var(--primary);
}
.page-pitch-close-pay-chip.paid .dot {
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.16);
}
.page-pitch-close-skip {
  background: none; border: 0; padding: 4px 6px;
  font-size: 11.5px; color: var(--text-faint);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.page-pitch-close-skip:hover { color: var(--text-muted); }


/* ------------------------------------------------------------
 * OUTCOME — NMI auto-detected confirmation (mockup state 06)
 * Swapped into .page-pitch-close in place of the close hero
 * once api.getPaymentStatus returns paid.
 * ------------------------------------------------------------ */
.page-pitch-outcome {
  width: 920px;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px 40px 32px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  gap: 22px;
  position: relative;
  overflow: hidden;
}
.page-pitch-outcome::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 280px; height: 280px;
  background: radial-gradient(50% 50% at 70% 30%, rgba(99, 91, 255, 0.10), transparent 75%);
  pointer-events: none;
}

.page-pitch-outcome-head {
  display: flex; align-items: flex-start; gap: 18px;
  position: relative;
}
.page-pitch-outcome-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--grad); color: white;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow:
    0 4px 10px -3px rgba(99, 91, 255, 0.40),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.page-pitch-outcome-headbody { flex: 1; min-width: 0; }
.page-pitch-outcome-title {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.014em;
  margin: 0; color: var(--text);
}
.page-pitch-outcome-sub {
  font-size: 13.5px; color: var(--text-muted);
  margin: 6px 0 0; line-height: 1.5;
  max-width: 620px;
}

.page-pitch-outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 4px;
}
.page-pitch-outcome-stat {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  min-width: 0;
}
.page-pitch-outcome-stat-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.page-pitch-outcome-stat-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 18px; font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.008em;
}
.page-pitch-outcome-stat-sub {
  font-size: 11.5px; color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.page-pitch-outcome-note {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.page-pitch-outcome-note-label {
  font-size: 12px; font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.page-pitch-outcome-note-hint {
  font-weight: 450;
  font-size: 11.5px;
  color: var(--text-muted);
}
.page-pitch-outcome-note textarea {
  width: 100%;
  resize: vertical;
  min-height: 64px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--text);
  font-family: inherit;
}
.page-pitch-outcome-note textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.14);
}

.page-pitch-outcome-foot {
  display: flex; align-items: center;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  flex-wrap: wrap;
}
.page-pitch-outcome-foot-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.page-pitch-outcome-foot-meta svg {
  color: var(--text-faint);
  flex-shrink: 0;
}
.page-pitch-outcome-foot-spacer { flex: 1; min-width: 12px; }

.page-pitch-outcome-override {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-soft);
  padding: 9px 14px;
  border-radius: var(--radius);
  font-size: 13px; font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.page-pitch-outcome-override:hover {
  background: var(--hover);
  color: var(--text);
  border-color: var(--border-strong);
}

.page-pitch-outcome-confirm {
  background: var(--grad);
  color: white;
  border: 0;
  padding: 12px 22px;
  font-size: 14.5px; font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--radius-lg);
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 8px 22px -8px rgba(99, 91, 255, 0.50),
    0 3px 6px -2px rgba(99, 91, 255, 0.32);
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  cursor: pointer;
}
.page-pitch-outcome-confirm:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 12px 28px -8px rgba(99, 91, 255, 0.55),
    0 4px 8px -2px rgba(99, 91, 255, 0.38);
}
.page-pitch-outcome-confirm:disabled {
  filter: grayscale(0.4) brightness(0.95);
  cursor: progress;
  transform: none;
}
.page-pitch-outcome-confirm svg {
  margin-top: 1px;
  flex-shrink: 0;
}


/* ------------------------------------------------------------
 * SCORING — processing card (mockup state 07)
 * ------------------------------------------------------------ */
.page-pitch-scoring {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 48px 32px 64px;
  min-height: 0;
  background: var(--bg-warm);
}
.page-pitch-scoring-card {
  width: 540px;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 56px 40px;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.page-pitch-scoring-orb {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--grad);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  color: white;
  box-shadow:
    0 12px 32px -10px rgba(99, 91, 255, 0.50),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.page-pitch-scoring-orb::before,
.page-pitch-scoring-orb::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1.5px solid rgba(99, 91, 255, 0.32);
  animation: processRing 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.page-pitch-scoring-orb::after {
  animation-delay: 1s;
}
.page-pitch-scoring-orb svg {
  width: 40px; height: 40px;
  position: relative;
  z-index: 1;
}

.page-pitch-scoring-title {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.014em;
  margin: 0; color: var(--text);
}
.page-pitch-scoring-sub {
  font-size: 14px; color: var(--text-muted);
  max-width: 380px;
  margin: 0;
  line-height: 1.5;
}

.page-pitch-scoring-steps {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
  max-width: 380px;
}
.page-pitch-scoring-step {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-soft);
  text-align: left;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.page-pitch-scoring-step .label {
  flex: 1 1 auto;
  min-width: 0;
}
.page-pitch-scoring-step .meta {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--mono, 'JetBrains Mono'), ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}
.page-pitch-scoring-step.active .meta { color: var(--text); }
.page-pitch-scoring-step.done   .meta { color: var(--text-muted); }
.page-pitch-scoring-step.pending .meta { color: var(--text-soft); opacity: 0.6; }
.page-pitch-scoring-step .check {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--primary);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  position: relative;
}
/* CSS-drawn checkmark — no Unicode characters */
.page-pitch-scoring-step .check::after {
  content: '';
  display: block;
  width: 4px;
  height: 7px;
  border-right: 1.5px solid white;
  border-bottom: 1.5px solid white;
  transform: rotate(45deg) translate(-1px, -1px);
}
.page-pitch-scoring-step.pending {
  color: var(--text-muted);
}
.page-pitch-scoring-step.pending .check {
  background: transparent;
  border: 1.5px solid var(--border);
  color: transparent;
}
.page-pitch-scoring-step.pending .check::after { content: ''; }
.page-pitch-scoring-step.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--text);
}
.page-pitch-scoring-step.active .check {
  background: transparent;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  position: relative;
}
.page-pitch-scoring-step.active .check::after {
  content: '';
  position: absolute; inset: 1px;
  border-radius: 50%;
  border: 1.5px solid var(--primary);
  border-top-color: transparent;
  animation: spin 800ms linear infinite;
}
.page-pitch-scoring-step.done {
  background: var(--bg-soft);
  color: var(--text);
  border-color: var(--status-done-bd);
}


/* ------------------------------------------------------------
 * RESULT — full pitch result card (mockup state 08)
 * ------------------------------------------------------------ */
.page-pitch-result {
  flex: 1;
  padding: 28px 32px 64px;
  min-height: 0;
  display: flex;
  justify-content: center;
}

.page-pitch-result-card {
  max-width: 1100px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* Loading skeleton shown while the finalized pitch_calls row is fetched.
   Cool-spectrum only — gentle opacity pulse, no red, no spinner chrome. */
.page-pitch-result-loading {
  animation: pitchResultLoadingPulse 1.4s ease-in-out infinite;
}
.page-pitch-result-loading .page-pitch-result-score-num::after {
  content: none;
}
@keyframes pitchResultLoadingPulse {
  0%, 100% { opacity: 0.62; }
  50%      { opacity: 1; }
}

.page-pitch-result-head {
  padding: 26px 30px 24px;
  display: flex; align-items: flex-start;
  gap: 22px;
  border-bottom: 1px solid var(--border);
}

.page-pitch-result-score {
  --score-pct: 86%;
  width: 96px; height: 96px; border-radius: 50%;
  position: relative; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--primary) 0 var(--score-pct), var(--bg-tint) var(--score-pct) 100%);
}
.page-pitch-result-score::before {
  content: '';
  position: absolute; inset: 6px;
  border-radius: 50%;
  background: var(--surface);
}
.page-pitch-result-score-num {
  position: relative; z-index: 1;
  font-size: 30px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text);
}
.page-pitch-result-score-num::after {
  content: '%';
  font-size: 14px; font-weight: 500;
  color: var(--text-muted);
  margin-left: 1px;
}

.page-pitch-result-meta {
  flex: 1; min-width: 0;
}

.page-pitch-result-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--status-done-bg);
  color: var(--status-done-fg);
  border: 1px solid var(--status-done-bd);
  margin-bottom: 10px;
}
.page-pitch-result-tag-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
}

.page-pitch-result-title {
  font-size: 21px; font-weight: 600;
  letter-spacing: -0.014em;
  margin: 0 0 4px;
  color: var(--text);
}

.page-pitch-result-sub {
  font-size: 13.5px; color: var(--text-muted);
  margin: 0; line-height: 1.5;
}

.page-pitch-result-metarow {
  display: flex; gap: 18px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.page-pitch-result-metarow b {
  color: var(--text); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.page-pitch-result-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  min-height: 280px;
}
.page-pitch-result-body-left {
  padding: 22px 26px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  gap: 18px;
}
.page-pitch-result-body-right {
  padding: 22px;
  background: var(--bg-soft);
  display: flex; flex-direction: column;
  gap: 14px;
}

.page-pitch-result-section-head {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}

/* Audio player */
.page-pitch-result-audio {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.page-pitch-result-audio-play {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary); color: white;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 0; cursor: pointer;
  box-shadow: var(--shadow-xs);
}
.page-pitch-result-audio-wf {
  flex: 1; height: 28px;
  display: flex; align-items: center;
  gap: 2px;
}
.page-pitch-result-audio-wf .b {
  flex: 1;
  min-width: 2px; max-width: 3px;
  background: var(--text-faint);
  border-radius: 1px;
}
.page-pitch-result-audio-wf .b.played {
  background: var(--primary);
}
.page-pitch-result-audio-time {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Criteria list */
.page-pitch-result-criteria {
  display: flex; flex-direction: column; gap: 8px;
}
.page-pitch-result-criterion {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px solid var(--border);
}
.page-pitch-result-criterion .ico {
  width: 18px; height: 18px; border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.page-pitch-result-criterion.pass .ico {
  background: var(--primary); color: white;
}
.page-pitch-result-criterion.fail .ico {
  background: var(--bg-tint); color: var(--text);
  border: 1px solid var(--border-strong);
}
.page-pitch-result-criterion .label {
  font-size: 13px; color: var(--text);
  font-weight: 500;
  flex: 1; min-width: 0;
}
.page-pitch-result-criterion .note {
  font-size: 11.5px; color: var(--text-muted);
}

/* Next-step cards */
.page-pitch-result-next {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.page-pitch-result-next.highlight {
  background: var(--info-bg);
  border-color: var(--pulse-high-bd);
}
.page-pitch-result-next .meta {
  font-size: 11.5px; color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.page-pitch-result-next.highlight .meta {
  color: var(--primary);
}
.page-pitch-result-next .title {
  font-size: 13.5px; font-weight: 600;
  color: var(--text);
}
.page-pitch-result-next .sub {
  font-size: 12px; color: var(--text-muted);
  margin-top: 4px;
}

.page-pitch-result-stack {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex; flex-direction: column; gap: 6px;
}
.page-pitch-result-stack-row {
  display: flex; justify-content: space-between;
}
.page-pitch-result-stack-row b {
  color: var(--text); font-weight: 600;
}

.page-pitch-result-cta-row {
  display: flex; justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 18px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}
.page-pitch-result-cta-primary {
  font-weight: 600;
}


/* ------------------------------------------------------------
 * KEYFRAMES (page-local)
 * ------------------------------------------------------------ */
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.16); }
  50%      { box-shadow: 0 0 0 6px rgba(99, 91, 255, 0.06); }
}

@keyframes processRing {
  0%   { opacity: 0.6; transform: scale(0.85); }
  100% { opacity: 0;   transform: scale(1.3); }
}

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


/* ------------------------------------------------------------
 * STATE BAR — kinetic 6-step progress indicator
 * Renders above the content frame, below the context-bar.
 * Active step pulses purple; done steps are dimmed; pending grey.
 * ------------------------------------------------------------ */
.page-pitch-state-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 0 4px;
  user-select: none;
}

.page-pitch-state-step {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.35;
  transition: opacity 200ms ease;
}

.page-pitch-state-step.is-active {
  opacity: 1;
}

.page-pitch-state-step.is-done {
  opacity: 0.55;
}

.page-pitch-state-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
  transition: background 200ms ease, box-shadow 200ms ease;
}

.page-pitch-state-step.is-active .page-pitch-state-dot {
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.18);
  animation: stateDotPulse 1.8s ease-in-out infinite;
}

.page-pitch-state-step.is-done .page-pitch-state-dot {
  background: var(--primary);
  opacity: 0.55;
}

.page-pitch-state-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  white-space: nowrap;
}

.page-pitch-state-step.is-active .page-pitch-state-lbl {
  color: var(--primary);
}

.page-pitch-state-step.is-done .page-pitch-state-lbl {
  color: var(--text-soft);
}

.page-pitch-state-sep {
  flex-shrink: 0;
  width: 18px;
  height: 1px;
  background: var(--border);
  margin: 0 4px;
  display: block;
  align-self: center;
}

@keyframes stateDotPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.18); }
  50%       { box-shadow: 0 0 0 7px rgba(99, 91, 255, 0.06); }
}


/* ------------------------------------------------------------
 * COMMISSION FLASH CARD
 * Replaces the close hero briefly after a deposit close is
 * confirmed. Kinetic: dollar-sign icon, amount count-up feel,
 * meta details, then auto-advances to scoring in 6 s.
 * ------------------------------------------------------------ */
.page-pitch-commission-flash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 48px 32px 40px;
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.page-pitch-commission-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(99, 91, 255, 0.18) 0%, rgba(99, 91, 255, 0.04) 100%);
  border: 1px solid rgba(99, 91, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  animation: commissionOrb 1s ease-out forwards;
}

.page-pitch-commission-amount {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--primary);
  line-height: 1;
}

.page-pitch-commission-meta {
  font-size: 13px;
  color: var(--text-soft);
  font-weight: 500;
}

.page-pitch-commission-rule {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}

.page-pitch-commission-foot {
  margin-top: 8px;
}

@keyframes commissionOrb {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ------------------------------------------------------------
 * Lens 9 — COMMISSION FLASH CARD
 * Shown on deposit close; auto-advances to scoring after 6 s.
 * APEX ZERO RED rule: no red anywhere. ZERO EMOJI.
 * ------------------------------------------------------------ */
.page-pitch-commission-flash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  max-width: 480px;
  margin: auto;
  text-align: center;
}

.page-pitch-commission-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft);
  border: 1.5px solid var(--status-done-bd);
  border-radius: 50%;
  color: var(--primary);
  animation: commissionOrb 0.55s cubic-bezier(.22,.68,0,1.2) forwards;
}

.page-pitch-commission-amount {
  font-size: 32px; font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light, #8b85ff) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-pitch-commission-meta {
  font-size: 13px; color: var(--text-muted);
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
}

.page-pitch-commission-rule {
  font-size: 11.5px; color: var(--text-faint);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.04em;
}

/* Lens 9: deposit trigger sub-line */
.page-pitch-commission-deposit {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--primary);
  padding: 4px 10px;
  border: 1px solid var(--status-done-bd);
  border-radius: 999px;
  background: var(--primary-soft);
}

.page-pitch-commission-foot {
  margin-top: 4px;
}

/* ------------------------------------------------------------------
 * CLOSE OUTCOME STATES (LAW 0.12 — no fake success)
 * The card only celebrates when the server confirmed the payment. On
 * 'pending' and 'failed' the money treatment is stripped: the headline
 * drops the purple money gradient and the orb goes muted stuck-grey,
 * so an unconfirmed close can never LOOK like a paid one.
 * Zero red, per repo rule 2 — unconfirmed uses neutral grey, not alarm.
 * ------------------------------------------------------------------ */
.page-pitch-commission-flash.is-pending .page-pitch-commission-amount,
.page-pitch-commission-flash.is-failed  .page-pitch-commission-amount {
  font-size: 22px;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}

.page-pitch-commission-flash.is-pending .page-pitch-commission-icon,
.page-pitch-commission-flash.is-failed  .page-pitch-commission-icon {
  background: var(--surface-2, var(--surface));
  border-color: var(--border);
  color: var(--text-muted);
  animation: none;
}

/* The status sentence is the point of these states — make it readable
 * prose rather than the faint mono micro-caption used for the rule line. */
.page-pitch-commission-flash.is-pending .page-pitch-commission-rule,
.page-pitch-commission-flash.is-failed  .page-pitch-commission-rule {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--text-muted);
  max-width: 380px;
}

/* ------------------------------------------------------------
 * Lens 3 — STATE BAR (kinetic breadcrumb)
 * ------------------------------------------------------------ */
.page-pitch-state-bar {
  display: flex; align-items: center; gap: 0;
  padding: 0 2px 10px;
}

.page-pitch-state-step {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 10px;
  border-radius: var(--radius);
  transition: opacity 0.2s;
  opacity: 0.45;
}
.page-pitch-state-step.is-done { opacity: 0.6; }
.page-pitch-state-step.is-active { opacity: 1; }

.page-pitch-state-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
}
.page-pitch-state-step.is-active .page-pitch-state-dot {
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.18);
  animation: stateDotPulse 1.6s ease-in-out infinite;
}
.page-pitch-state-step.is-done .page-pitch-state-dot {
  background: var(--primary);
  opacity: 0.55;
}

.page-pitch-state-lbl {
  font-size: 11px; font-weight: 500;
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  color: var(--text-soft);
  white-space: nowrap;
}
.page-pitch-state-step.is-active .page-pitch-state-lbl {
  color: var(--text);
  font-weight: 600;
}

.page-pitch-state-sep {
  width: 20px; height: 1px;
  background: var(--border);
  flex-shrink: 0;
}

/* keyframes */
@keyframes stateDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.18); }
  50%       { box-shadow: 0 0 0 6px rgba(99, 91, 255, 0.08); }
}

@keyframes commissionOrb {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* ===== pages/pitch/pitch-manager.css ===== */
/* ============================================================
 * MANAGER ASSIST (.pma-*) — live-assist surface for ARSM/RSM.
 * Locked Apex tokens: purple #635bff, Inter Tight + JetBrains Mono.
 * ZERO red anywhere (the live indicator is a PURPLE pulse, per the repo law
 * that "live recording" is a purple pulse and never a red one). No emoji.
 * Fits 1440x900 without page scroll; the call list owns its own overflow.
 * Mirrors the .pd-* language of pod-demos.css so the two surfaces read as one
 * system, including both dark-mode signals (media query + data-theme).
 * ============================================================ */

.pma-screen{
  --pma-primary:#635bff;
  --pma-border:#e6e8ec;
  --pma-surface:#fff;
  --pma-bg:#fdfcfb;
  --pma-text:#1a1f36;
  --pma-muted:#697386;
  --pma-faint:#8792a2;
  --pma-mono:'JetBrains Mono',ui-monospace,monospace;
  --pma-sans:'Inter Tight',-apple-system,BlinkMacSystemFont,sans-serif;
  display:flex;flex-direction:column;min-height:0;flex:1;
  background:var(--pma-bg);color:var(--pma-text);
  font-family:var(--pma-sans);overflow:hidden;border-radius:16px;
}

.pma-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:20px 22px 14px;border-bottom:1px solid var(--pma-border);
}
.pma-title{font-size:19px;font-weight:700;letter-spacing:-.01em;margin:0;color:var(--pma-text)}
.pma-sub{font-size:12px;color:var(--pma-muted);margin-top:3px;max-width:62ch;line-height:1.5}

.pma-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}

/* ---- list ---- */
.pma-list{flex:1;min-height:0;overflow-y:auto;padding:12px 14px 16px;display:flex;flex-direction:column;gap:9px}
.pma-row{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:14px;
  padding:13px 15px;background:var(--pma-surface);
  border:1px solid var(--pma-border);border-radius:12px;transition:.14s;
}
.pma-row:hover{border-color:#d6d2ff;box-shadow:0 1px 3px rgba(99,91,255,.09)}

/* Live indicator — PURPLE pulse, never red. */
.pma-live{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--pma-mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--pma-primary);
  background:#f5f4ff;border:1px solid #d6d2ff;border-radius:6px;padding:5px 9px;
}
.pma-dot{
  width:6px;height:6px;border-radius:50%;background:var(--pma-primary);
  animation:pma-pulse 1.9s ease-in-out infinite;
}
@keyframes pma-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.42;transform:scale(.82)}}
@media (prefers-reduced-motion: reduce){
  .pma-dot{animation:none}
}

.pma-who{min-width:0}
.pma-lead{font-size:14px;font-weight:650;color:var(--pma-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pma-rep{font-family:var(--pma-mono);font-size:10.5px;color:var(--pma-faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pma-dur{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--pma-mono);font-size:11px;color:var(--pma-muted);white-space:nowrap;
}

.pma-cta{
  font-family:var(--pma-sans);font-size:12.5px;font-weight:650;color:#fff;
  background:var(--pma-primary);border:1px solid var(--pma-primary);
  border-radius:9px;padding:8px 15px;cursor:pointer;transition:.14s;white-space:nowrap;
}
.pma-cta:hover:not(:disabled){background:#544cff;border-color:#544cff}
.pma-cta:disabled{opacity:.6;cursor:default}
.pma-cta:focus-visible{outline:2px solid var(--pma-primary);outline-offset:2px}

/* ---- empty / loading / unavailable ---- */
.pma-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:10px;padding:56px 24px;color:var(--pma-muted);
}
.pma-empty-ico{
  width:56px;height:56px;border-radius:14px;background:#f5f4ff;border:1px solid #e4e2ff;
  color:var(--pma-primary);display:inline-flex;align-items:center;justify-content:center;
}
.pma-empty-t{font-size:15px;font-weight:700;color:var(--pma-text)}
.pma-empty-s{font-size:12.5px;color:var(--pma-muted);max-width:46ch;line-height:1.55}

/* ---- toast ---- */
.pma-toast{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  background:var(--pma-text);color:var(--pma-bg);
  font-size:12.5px;font-weight:600;padding:10px 16px;border-radius:10px;
  box-shadow:0 6px 22px rgba(26,31,54,.22);z-index:20;max-width:min(90%,520px);text-align:center;
}
.pma-screen{position:relative}

/* ---- dark ---- */
@media (prefers-color-scheme: dark){
  .pma-screen{
    --pma-border:#2a2d3a;--pma-surface:#16181f;--pma-bg:#0f1117;
    --pma-text:#e8eaf0;--pma-muted:#9aa0b0;--pma-faint:#6b7180;
  }
  .pma-live,.pma-empty-ico{background:#1b1a2e;border-color:#312d5a}
  .pma-row:hover{border-color:#3a3570;box-shadow:0 1px 3px rgba(99,91,255,.18)}
}
:root[data-theme="dark"] .pma-screen{
  --pma-border:#2a2d3a;--pma-surface:#16181f;--pma-bg:#0f1117;
  --pma-text:#e8eaf0;--pma-muted:#9aa0b0;--pma-faint:#6b7180;
}
:root[data-theme="dark"] .pma-live,
:root[data-theme="dark"] .pma-empty-ico{background:#1b1a2e;border-color:#312d5a}
:root[data-theme="light"] .pma-screen{
  --pma-border:#e6e8ec;--pma-surface:#fff;--pma-bg:#fdfcfb;
  --pma-text:#1a1f36;--pma-muted:#697386;--pma-faint:#8792a2;
}
:root[data-theme="light"] .pma-live,
:root[data-theme="light"] .pma-empty-ico{background:#f5f4ff;border-color:#e4e2ff}

/* ===== pages/performance/perf.css ===== */
/* ============================================================
 * APEX SALES OS · PERFORMANCE
 * Owner: Worker W18 (page-local styles only)
 * Namespace: .page-perf-*
 * ============================================================ */

/* ------------------------------------------------------------
 * Stack ranker shell — 1440x900 fit, list scrolls within
 * ------------------------------------------------------------ */
.page-perf-rank-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 28px 24px;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  /* IRON LAW (no page scroll): the shell claims the remaining viewport
     via the flex chain in 01-base.css. The .page-perf-rank-table-scroll
     child owns the internal leaderboard scroll. The viewport-height calc
     is kept as a safety floor for stack-ranker's standalone mount path
     (some entry points skip the .app-frame wrapper). */
  flex: 1 1 auto;
  min-height: 0;
  /* 38px = context-bar crumb strip mounted above the shell */
  height: calc(100vh - 56px - 32px - 38px);
  overflow: hidden;
}

/* context bar above the shell (mockup 07-performance.html lines
   1259-1264); shared .context-bar / .crumb styles come from
   02-primitives.css — only page-local sizing lives here */
.page-perf-rank-context { flex-shrink: 0; }
.page-perf-rank-live-text {
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* head bar — eyebrow + gradient rank h1 + deck + range tabs */
.page-perf-rank-head-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px;
}
.page-perf-rank-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.page-perf-rank-h1 {
  font-family: 'Inter Tight', Inter, system-ui, -apple-system, sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  margin: 0;
  line-height: 1.15;
}
.page-perf-rank-deck {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-muted);
  max-width: 720px;
  line-height: 1.45;
}
/* gradient rank number inside the h1 (mockup .gnum, lines 168-171 —
   "This week, you're #4 of 50." with gradient text via --grad) */
.page-perf-rank-h1-num {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* range-tab segmented control (mockup .stats-rangetabs, lines 182-194:
   Today / This week / Month / Quarter) */
.page-perf-rank-rangetabs {
  display: flex;
  gap: 4px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
  flex-shrink: 0;
}
.page-perf-rank-rangetab {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 5px;
  cursor: pointer;
  transition: all var(--t);
}
.page-perf-rank-rangetab:hover { color: var(--text); }
.page-perf-rank-rangetab.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}
.page-perf-rank-rangetab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* podium row — top-3 cards (mockup .podium-* lines 373-431 / markup
   1281-1329). Rank-1 card gets the tinted "gold" treatment: purple
   radial wash + gradient rank number + purple mini-stat values. */
.page-perf-rank-podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.page-perf-rank-podium-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.page-perf-rank-podium-card.gold {
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(99, 91, 255, .16), transparent 65%),
    var(--surface);
  border-color: var(--status-done-bd);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, .08), var(--shadow-sm);
}
.page-perf-rank-podium-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-perf-rank-podium-rank {
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.03em;
  font-size: 38px;
  line-height: 1;
  flex-shrink: 0;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.page-perf-rank-podium-card.gold .page-perf-rank-podium-rank {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.page-perf-rank-podium-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.02em;
  border: 1.5px solid var(--status-done-bd);
  flex-shrink: 0;
}
.page-perf-rank-podium-body { flex: 1; min-width: 0; }
.page-perf-rank-podium-body .name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-perf-rank-podium-body .meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.page-perf-rank-podium-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding-top: 12px;
  margin-top: 2px;
  border-top: 1px dashed var(--border);
}
.page-perf-rank-podium-stat { text-align: center; }
.page-perf-rank-podium-stat .v {
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.014em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.page-perf-rank-podium-card.gold .page-perf-rank-podium-stat.purple .v {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.page-perf-rank-podium-stat .l {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* KPI strip — 4-up */
.page-perf-rank-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.page-perf-rank-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-perf-rank-kpi-lbl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.page-perf-rank-kpi-val {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.page-perf-rank-kpi-val.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.page-perf-rank-kpi-sub {
  font-size: 11px;
  color: var(--text-faint);
}

/* table region (chips + scrollable table) */
.page-perf-rank-tableregion {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

/* filter chips */
.page-perf-rank-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.page-perf-rank-chip {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.page-perf-rank-chip:hover {
  background: var(--hover);
  border-color: var(--border-strong);
  color: var(--text);
}
.page-perf-rank-chip.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}
.page-perf-rank-chip:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* table wrap + scroll */
.page-perf-rank-table {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.page-perf-rank-table-scroll {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  scrollbar-width: thin;
}
.page-perf-rank-table-body { display: block; }

/* ------------------------------------------------------------
 * Stack ranker row (7-col grid · me-row has purple wash + edge)
 * ------------------------------------------------------------ */
.page-perf-rank-row {
  display: grid;
  grid-template-columns: 64px minmax(220px, 1fr) 88px 88px 120px 100px 92px;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  position: relative;
  transition: background var(--t), transform var(--t);
}
.page-perf-rank-row:last-child { border-bottom: none; }
.page-perf-rank-row:hover { background: var(--hover); }
.page-perf-rank-row.me {
  background: linear-gradient(90deg, var(--primary-soft) 0%, transparent 60%);
}
.page-perf-rank-row.me::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--grad);
}
.page-perf-rank-row.me::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(99, 91, 255, 0.18);
  pointer-events: none;
  animation: perfMePulse 2.4s ease-in-out infinite;
}
@keyframes perfMePulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(99, 91, 255, 0.18); }
  50%      { box-shadow: inset 0 0 0 1px rgba(99, 91, 255, 0.42); }
}

.page-perf-rank-row .rank {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 15px;
  color: var(--text-soft);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.page-perf-rank-row.me .rank {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
}
.page-perf-rank-row .rank.top {
  color: var(--primary);
  font-weight: 700;
}
.page-perf-rank-row .col-rep {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.page-perf-rank-namewrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.page-perf-rank-row .av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-tint);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  color: var(--text-soft);
  flex-shrink: 0;
}
.page-perf-rank-row.me .av {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}
.page-perf-rank-row .name {
  font-weight: 500;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-perf-rank-row .sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.page-perf-rank-row .num {
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
  white-space: nowrap;
}
.page-perf-rank-row .num.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.page-perf-rank-row .num.right { text-align: right; }
.page-perf-rank-row.me .num    { color: var(--text); font-weight: 600; }

/* "You" chip on me-row name */
.page-perf-rank-metag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--grad);
  color: #ffffff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* trend marker — purple up, muted-grey flat/down (NEVER red) */
.page-perf-rank-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.page-perf-rank-trend.up   { color: var(--primary); }
.page-perf-rank-trend.flat { color: var(--text-faint); }
.page-perf-rank-trend.down { color: var(--text-muted); }
.page-perf-rank-trend svg  { display: block; }

/* empty state */
.page-perf-rank-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
}
.page-perf-rank-empty-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 4px;
}
.page-perf-rank-empty-sub {
  font-size: 12px;
  color: var(--text-muted);
}

/* ------------------------------------------------------------
 * Footer CTA bar — no dead ends. Advances the click-by-click
 * performance journey (commission · level-up · cockpit). Compact
 * so the shell still fits 1440x900 with the table scrolling
 * internally (no page scroll).
 * ------------------------------------------------------------ */
.page-perf-rank-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}
.page-perf-rank-cta {
  font-size: 13px;
  padding: 9px 16px;
}
.page-perf-rank-cta-secondary {
  background: var(--surface);
}
.page-perf-rank-cta-primary {
  margin-left: 2px;
}

/* ------------------------------------------------------------
 * Commission ledger — pixel parity vs design-mockups/07-performance.html
 * STATE 03. Page-local namespace .page-perf-ledger-*.
 * Reversed/refund rows use muted-grey or purple stripe · NEVER red.
 * Refunds net against future earnings; we never debit the rep account.
 * ------------------------------------------------------------ */

.page-perf-ledger-shell {
  padding: 22px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* IRON LAW (no page scroll): the shell claims the remaining viewport
     so .page-perf-ledger-list can flex and .page-perf-ledger-tablehost
     scrolls the rows internally. Page chrome (hero, rail, comp-rules,
     cash-out, list head, filter chips, column head) stays anchored. */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* summary grid — hero + 320 rail */
.page-perf-ledger-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
}

/* hero card */
.page-perf-ledger-hero {
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(99, 91, 255, .10), transparent 65%),
    var(--surface);
  border: 1px solid var(--status-done-bd);
  border-radius: var(--radius-lg);
  padding: 22px 28px;
  position: relative;
  overflow: hidden;
}
.page-perf-ledger-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--primary);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.page-perf-ledger-eyebrow::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--primary);
}
.page-perf-ledger-num {
  font-family: 'Inter Tight', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 54px;
  font-weight: 700;
  letter-spacing: -.030em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--primary);
}
.page-perf-ledger-sub {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-top: 12px;
  max-width: 520px;
  line-height: 1.55;
}
.page-perf-ledger-sub b { color: var(--text); font-weight: 600; }
.page-perf-ledger-hero-row {
  display: flex;
  gap: 22px;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px dashed var(--border);
}
.page-perf-ledger-hero-stat .v {
  font-family: 'Inter Tight', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.016em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.page-perf-ledger-hero-stat .v.purple {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--primary);
}
.page-perf-ledger-hero-stat .l {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 6px;
}
.page-perf-ledger-hero-divider {
  width: 1px;
  background: var(--border);
}

/* rail */
.page-perf-ledger-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-perf-ledger-rail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}
.page-perf-ledger-rail-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--text-faint);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.page-perf-ledger-rail-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.page-perf-ledger-rail-num {
  font-family: 'Inter Tight', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.page-perf-ledger-rail-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.5;
}
.page-perf-ledger-payout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px dashed var(--border);
}
.page-perf-ledger-payout-ico {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.page-perf-ledger-payout-body .title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.page-perf-ledger-payout-body .meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.page-perf-ledger-dispute-btn {
  margin-top: 12px;
  width: 100%;
}

/* comp-rules dock + cashout dock */
.page-perf-ledger-comp {
  /* renderCompRulesPanel paints its own card; we just give it room. */
}
.page-perf-ledger-cashout {
  display: flex;
  justify-content: flex-end;
}

/* ledger list */
.page-perf-ledger-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.page-perf-ledger-head {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.page-perf-ledger-head .title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--text);
}
.page-perf-ledger-head .meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* filter chips */
.page-perf-ledger-chiprow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.page-perf-ledger-chip {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-muted);
  background: var(--bg-tint);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.page-perf-ledger-chip:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.page-perf-ledger-chip.is-active {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: var(--status-done-bd);
}
.page-perf-ledger-chip-badge {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.page-perf-ledger-chip.is-active .page-perf-ledger-chip-badge {
  color: var(--primary);
  border-color: var(--primary-soft);
}

/* column header */
.page-perf-ledger-list-head {
  padding: 10px 20px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 70px 100px 110px 130px 120px;
  gap: 12px;
  align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* table host scrolls inside the container; outer page stays no-scroll */
.page-perf-ledger-tablehost {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* month / period divider */
.page-perf-ledger-month-divider {
  padding: 8px 20px;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 14px;
}
.page-perf-ledger-month-divider .total {
  margin-left: auto;
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ledger row */
.page-perf-ledger-row {
  padding: 12px 20px;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 70px 100px 110px 130px 120px;
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  transition: background var(--t);
}
.page-perf-ledger-row:first-of-type { border-top: 0; }
.page-perf-ledger-row:hover { background: var(--hover); }
.page-perf-ledger-row .date {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.page-perf-ledger-row .client .name {
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
  line-height: 1.3;
}
.page-perf-ledger-row .client .meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 3px;
  letter-spacing: .02em;
}
.page-perf-ledger-row .seats {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.page-perf-ledger-row .amount {
  font-family: 'Inter Tight', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.012em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.page-perf-ledger-row .commission {
  font-family: 'Inter Tight', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.012em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--primary);
}
.page-perf-ledger-row .commission.is-negative {
  background: none;
  -webkit-text-fill-color: var(--text-muted);
  color: var(--text-muted);
  font-weight: 600;
}

/* refund row stripe — purple, NEVER red */
.page-perf-ledger-row.is-refund {
  position: relative;
  background: linear-gradient(90deg, var(--primary-soft) 0%, transparent 55%);
}
.page-perf-ledger-row.is-refund::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--grad);
}

/* status chips */
.page-perf-ledger-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--bg-tint);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.page-perf-ledger-status .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-faint);
}
.page-perf-ledger-status.is-paid {
  background: var(--status-done-bg);
  color: var(--status-done-fg);
  border-color: var(--status-done-bd);
}
.page-perf-ledger-status.is-paid .dot { background: var(--status-done); }
.page-perf-ledger-status.is-pending {
  background: var(--bg-tint);
  color: var(--text-muted);
  border-color: var(--border);
}
.page-perf-ledger-status.is-payable {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--status-done-bd);
}
.page-perf-ledger-status.is-payable .dot { background: var(--primary); }
.page-perf-ledger-status.is-reversed,
.page-perf-ledger-status.is-refund {
  background: var(--status-stuck-bg);
  color: var(--status-stuck-fg);
  border-color: var(--status-stuck-bd);
}
.page-perf-ledger-status.is-reversed .dot,
.page-perf-ledger-status.is-refund .dot {
  background: var(--text-faint);
}

/* Late/overdue payout chip (Lens 9c). Amber, ZERO red per APEX STANDARD. */
.page-perf-ledger-status.is-late {
  background: rgba(255, 138, 0, 0.10);
  color: var(--warning, #ff8a00);
  border-color: rgba(255, 138, 0, 0.30);
}
.page-perf-ledger-status.is-late .dot {
  background: var(--warning, #ff8a00);
}

/* hash chip — clickable, JBM mono, truncated */
.page-perf-ledger-row .hash-wrap {
  text-align: right;
}
.page-perf-ledger-hash {
  appearance: none;
  -webkit-appearance: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--text-muted);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.page-perf-ledger-hash:hover {
  color: var(--primary);
  border-color: var(--status-done-bd);
  background: var(--primary-soft);
}
.page-perf-ledger-hash:disabled {
  cursor: default;
  opacity: .6;
}

/* empty state inside the host */
.page-perf-ledger-empty {
  padding: 36px 24px;
  text-align: center;
}
.page-perf-ledger-empty .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.page-perf-ledger-empty .sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.5;
}

/* honour prefers-reduced-motion (chips, rows) */
@media (prefers-reduced-motion: reduce) {
  .page-perf-ledger-chip,
  .page-perf-ledger-hash,
  .page-perf-ledger-row { transition: none; }
}

/* ------------------------------------------------------------
 * Stack ranker — pulse on rank-1 row so the leader breathes.
 * Purple pulse only · never red.
 * ------------------------------------------------------------ */
.page-perf-rank-row .rank.top { position: relative; }
.page-perf-rank-row .rank.top::after {
  content: '';
  position: absolute;
  left: -4px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 0 rgba(99, 91, 255, 0.55);
  animation: perfRankPulse 1.6s ease-in-out infinite;
}
@keyframes perfRankPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(99, 91, 255, 0.55);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 0 6px rgba(99, 91, 255, 0);
  }
}

/* honour prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .page-perf-rank-row .rank.top::after { animation: none; }
}

/* Stack ranker — header row baseline */
.page-perf-rank-head {
  background: var(--bg-soft);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ------------------------------------------------------------
 * Level-up invite drill card (56 · 1fr · auto grid · 44px ico)
 * .urgent variant gets primary-tinted border + gradient wash
 * ------------------------------------------------------------ */
.page-perf-drill-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  transition: background var(--t), border-color var(--t);
}
.page-perf-drill-card:hover { border-color: var(--border-strong); }
.page-perf-drill-card.urgent {
  border-color: var(--status-done-bd);
  background: linear-gradient(90deg, var(--primary-soft) 0%, transparent 50%);
}
.page-perf-drill-card .ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
}
.page-perf-drill-card .title { font-size: 14px; font-weight: 600; color: var(--text); }
.page-perf-drill-card .sub   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ------------------------------------------------------------
 * Level-up invite · STATE 04 (wizard discipline)
 * Mirrors /design-mockups/07-performance.html STATE 04 (.levelup-*).
 * Two columns at 1440 wide: hero+suggested (1fr) | leaderboard rail (320px).
 * Hero is one card, ONE primary CTA, soft purple wash, no scroll.
 * ------------------------------------------------------------ */
.page-perf-levelup {
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(99,91,255,.06), transparent 70%),
    var(--bg-warm);
  min-height: 100vh;
}
.page-perf-levelup-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  padding: 32px 32px 48px;
  max-width: 1440px;
  margin: 0 auto;
  align-items: start;
}
.page-perf-levelup-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  /* No-scroll iron law: clamp the main column to the space left under the
     topbar + context bar (~152px) and scroll internally only if hero +
     capped suggestions ever exceed it, so the page frame never scrolls. */
  max-height: calc(100vh - 152px);
  overflow-y: auto;
}
.page-perf-levelup-rail {
  position: sticky;
  top: 24px;
}

/* ----- Hero card ----- */
.page-perf-levelup-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 24px 64px -20px rgba(99,91,255,.20), var(--shadow-md);
  padding: 40px 48px 36px;
  position: relative;
  overflow: hidden;
}
.page-perf-levelup-hero::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 440px; height: 440px;
  background: radial-gradient(50% 50% at 70% 30%, rgba(99,91,255,.14), transparent 75%);
  pointer-events: none;
}
.page-perf-levelup-hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 280px; height: 280px;
  background: radial-gradient(50% 50% at 30% 70%, rgba(122,115,255,.10), transparent 75%);
  pointer-events: none;
}
.page-perf-levelup-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--primary);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.page-perf-levelup-eyebrow::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--primary);
}
.page-perf-levelup-title {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -.024em;
  line-height: 1.10;
  color: var(--text);
  margin: 0 0 14px;
  max-width: 640px;
  position: relative;
  z-index: 1;
}
.page-perf-levelup-title .accent {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-perf-levelup-sub {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 28px;
  max-width: 580px;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}

/* ----- Context strip (from-call quote) ----- */
.page-perf-levelup-context {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  position: relative;
  z-index: 1;
}
.page-perf-levelup-context-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.page-perf-levelup-context-ico svg { width: 16px; height: 16px; }
.page-perf-levelup-context-body .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.page-perf-levelup-context-body .quote {
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
  font-style: italic;
}
.page-perf-levelup-context-body .quote-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* ----- 4-stat ribbon ----- */
.page-perf-levelup-stats {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.page-perf-levelup-stat .v {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.page-perf-levelup-stat .v.purple {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-perf-levelup-stat .l {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ----- Action row ----- */
.page-perf-levelup-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.page-perf-levelup-actions .btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.page-perf-levelup-actions-tail {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.page-perf-levelup-mgr {
  color: var(--text-soft);
  font-size: 12.5px;
}
.page-perf-levelup-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ----- Suggested drills section ----- */
.page-perf-levelup-suggested {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px 24px;
}
.page-perf-levelup-section-head { margin-bottom: 14px; }
.page-perf-levelup-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.005em;
}
.page-perf-levelup-section-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.page-perf-levelup-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-perf-drill-card-body { min-width: 0; }
.page-perf-drill-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.page-perf-drill-card-reward {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--primary);
  padding: 4px 9px;
  background: var(--primary-soft);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.page-perf-drill-card-arrow {
  color: var(--text-muted);
  display: inline-flex;
  transition: transform var(--t), color var(--t);
}
.page-perf-drill-card:hover .page-perf-drill-card-arrow {
  color: var(--primary);
  transform: translateX(2px);
}

/* ----- Leaderboard rail ----- */
.page-perf-levelup-board {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 18px 18px;
}
.page-perf-levelup-board-head { margin-bottom: 14px; }
.page-perf-levelup-board-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
}
.page-perf-levelup-board-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.page-perf-levelup-board-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-perf-levelup-board-row {
  display: grid;
  grid-template-columns: 24px 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 8px;
  transition: background var(--t);
  position: relative;
}
.page-perf-levelup-board-row:hover { background: var(--hover); }
.page-perf-levelup-board-row.me {
  background: linear-gradient(90deg, var(--primary-soft) 0%, transparent 60%);
}
.page-perf-levelup-board-row.me::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--grad);
}
.page-perf-levelup-board-row .rank {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.page-perf-levelup-board-row .rank.top {
  color: var(--primary);
  font-weight: 600;
}
.page-perf-levelup-board-row .av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
}
.page-perf-levelup-board-row .info { min-width: 0; }
.page-perf-levelup-board-row .name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-perf-levelup-board-row .sub {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 1px;
}
.page-perf-levelup-board-row .score {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.page-perf-levelup-board-row .score.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.page-perf-levelup-board-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 4px;
}
.page-perf-levelup-board-foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.page-perf-levelup-board-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
  transition: color var(--t);
}
.page-perf-levelup-board-link:hover { color: var(--primary-hover); }

/* ----- Loading skeleton ----- */
.page-perf-levelup-hero.loading,
.page-perf-levelup-board.loading { opacity: .7; }
.page-perf-levelup-skeleton-title {
  height: 32px;
  width: 60%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--bg-soft) 0%, var(--hover) 50%, var(--bg-soft) 100%);
  background-size: 200% 100%;
  animation: perfSkeleton 1.4s ease-in-out infinite;
  margin: 14px 0;
}
.page-perf-levelup-skeleton-line {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-soft) 0%, var(--hover) 50%, var(--bg-soft) 100%);
  background-size: 200% 100%;
  animation: perfSkeleton 1.4s ease-in-out infinite;
  margin: 8px 0;
}
.page-perf-levelup-skeleton-line.short { width: 70%; }
@keyframes perfSkeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .page-perf-levelup-skeleton-title,
  .page-perf-levelup-skeleton-line { animation: none; }
}

/* ----- 1440-and-down: keep no-scroll discipline ----- */
@media (max-width: 1280px) {
  .page-perf-levelup-shell { grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; }
  .page-perf-levelup-hero  { padding: 32px 36px 28px; }
  .page-perf-levelup-title { font-size: 32px; }
}

/* ------------------------------------------------------------
 * Level-up session screen (1fr | 320px split)
 *
 * Mockup parity (07-performance.html § STATE 05): the screen is
 * a unified .session-stage with two columns:
 *   - left:  apex orb + prompt + circular controls (52 / 64 / 52)
 *   - right: live timer (JBM 30px), 3/3 criteria checklist,
 *           transcript with bottom fade overlay
 *
 * Height clamps to viewport minus topbar / context-bar / wrap
 * padding / score-foot so the full session fits a 1440x900 frame
 * with no outer scroll. Cockpit DNA: purple pulse on the chip
 * eyebrow and a soft radial wash behind the orb.
 *
 * The bulk of these rules ship via the page's injected <style>
 * block (page-perf-session-styles) so the slice can render even
 * when this file has not loaded yet. The selectors below clamp
 * outer geometry only - no overlap with the injected block.
 * ------------------------------------------------------------ */
.page-perf-session-wrap {
  flex: 1;
  min-height: 0;
}
.page-perf-session-grid {
  height: calc(100vh - 56px - 32px - 60px - 96px);
  min-height: 560px;
}
.page-perf-session-tcript::after {
  content: '';
  position: sticky;
  display: block;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  margin-top: -28px;
  background: linear-gradient(to bottom, transparent, var(--bg-soft));
  pointer-events: none;
}


/* ------------------------------------------------------------
 * Lens 9 — LATE ENTRY STYLES
 * Purple diagonal stripes for late commission entries.
 * APEX ZERO RED rule: no red. Off-days/late = diagonal purple lines.
 * ------------------------------------------------------------ */
.page-perf-ledger-row.is-late {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    rgba(99, 91, 255, 0.08) 3px,
    rgba(99, 91, 255, 0.08) 6px
  );
}

.page-perf-ledger-status.is-late {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--status-done-bd);
}

.page-perf-ledger-status.is-late .dot {
  background: var(--primary);
}

/* ===== pages/admin/admin.css ===== */
/* ============================================================
 * APEX SALES OS · REGIONAL ADMIN
 * Owner: Worker W19
 * Page-local styles only · .page-admin-* namespace
 * ============================================================ */

/* team overview · row in the big roster table */
.page-admin-team-row {
  display: grid;
  grid-template-columns: 56px 1fr 110px 110px 110px 110px 110px 80px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  position: relative;
  cursor: pointer;
  transition: background var(--t);
}
.page-admin-team-row:hover { background: var(--hover); }
.page-admin-team-row.flagged {
  background: linear-gradient(90deg, var(--primary-soft) 0%, transparent 40%);
}
.page-admin-team-row.flagged::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--grad);
}
.page-admin-team-row .av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-tint);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
}

/* employee drilldown · tab body container
 * (Recovered px-44: now a flex column that hosts tiles + feed cards.
 * The full visual chrome moved onto child cards — see recovered block below.) */
.page-admin-drill-tab-body {
  display: flex; flex-direction: column; gap: 18px;
}

/* override panel · stacked rows */
.page-admin-override {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-admin-override-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.page-admin-override-row:last-child { border-bottom: 0; }
.page-admin-override .lbl {
  font-size: 12.5px;
  font-weight: 500;
}
.page-admin-override .hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* new-hire wizard · shell + intake-* tokens
 * Mirrors design-mockups/08-regional-admin.html CSS lines 1239-1317
 * (STATE 06 — NEW HIRE INTAKE). Mockup is the frozen source of truth.
 * These tokens are referenced by frontend/pages/admin/new-hire.js but were
 * never published outside the mockup until this entry.
 *
 * NOTE: `.page-admin-newhire` is intentionally a no-op now — it used to
 * cap width at 720px and apply its own padding, which fought the mockup's
 * full-width 2-col `.intake-card` (padding 36×44, radius-xl, shadow-md).
 * The card is now sized + padded by `.intake-card` exactly as in the
 * mockup, so the legacy class only stays for selector compatibility.
 */
.intake-shell { padding: 28px 32px 40px; }
.intake-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px 44px;
  box-shadow: var(--shadow-md);
}
.page-admin-newhire {
  /* legacy hook · sizing now owned by .intake-card.
     Kept as a selector so other surfaces can hang page-local rules off it. */
  display: block;
}

.intake-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--primary);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.intake-eyebrow::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--primary);
}
.intake-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0;
}
.intake-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin: 8px 0 28px;
  max-width: 560px;
  line-height: 1.55;
}

.intake-section { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--border); }
.intake-section:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.intake-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.intake-section-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--status-done-bd);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
.intake-section-title { font-size: 14.5px; font-weight: 600; }
.intake-section-body { display: block; }

.intake-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.intake-grid .span-2 { grid-column: span 2; }

.intake-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px dashed var(--border);
}
.intake-foot .meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Intake pill row · mockup variant of seg-row uses flex with rounded pills
 * (lines 1267-1278). The shared .seg-row is display:grid for seg-group, so
 * we scope this variant to the intake-grid context to avoid clobbering.
 */
.intake-section .seg-row { display: flex; gap: 6px; }
.seg-pill {
  padding: 9px 14px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 500;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.seg-pill:hover { background: var(--hover); color: var(--text); }
.seg-pill.active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary);
  font-weight: 600;
}

/* Region · assign cards · mockup lines 1280-1311 */
.assign-card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-top: 8px;
}
.assign-card.recommended {
  background:
    linear-gradient(90deg, var(--primary-soft) 0%, transparent 30%),
    var(--surface);
  border-color: var(--status-done-bd);
}
.assign-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-tint);
  color: var(--text-soft);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.assign-card.recommended .assign-av {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--status-done-bd);
}
.assign-body .name { font-size: 14px; font-weight: 600; }
.assign-body .meta { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.assign-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 99px;
}
.assign-tag.suggest {
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--status-done-bd);
}
.assign-tag .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }

/* field-body wrapper used by fieldShell() in new-hire.js to group input + hint */
.field .field-body { display: flex; flex-direction: column; gap: 4px; }

/* page-local helpers referenced by new-hire.js */
.page-admin-newhire-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  width: 100%;
}
.page-admin-newhire-input.mono { font-family: 'JetBrains Mono', monospace; }
.page-admin-newhire-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.page-admin-newhire-hint {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.5;
}
.page-admin-newhire-region-list { display: block; }
.page-admin-newhire-region + .page-admin-newhire-region { margin-top: 8px; }
.page-admin-newhire-err {
  font-size: 11px;
  color: var(--text-soft);
  background: var(--primary-soft);
  border-left: 2px solid var(--primary);
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 4px;
}
.field.has-error .page-admin-newhire-input { border-color: var(--primary); }

/* Region · assign card · hover + selected polish
 * The cards are <button type=button>, so the shared .btn:hover would steal
 * the look. Scope these rules tightly to the page-admin newhire region. */
.page-admin-newhire-region {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-soft);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--t),
    box-shadow var(--t),
    background var(--t),
    transform var(--t);
}
.page-admin-newhire-region:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
  transform: translateY(-1px);
}
.page-admin-newhire-region:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.12);
}
.page-admin-newhire-region.is-selected {
  background:
    linear-gradient(90deg, var(--primary-soft) 0%, transparent 30%),
    var(--surface);
}
.page-admin-newhire-region.is-selected .assign-tag.suggest {
  background: var(--primary);
  color: #ffffff;
  border-color: transparent;
}
.page-admin-newhire-region.is-selected .assign-tag.suggest .dot {
  background: #ffffff;
}

/* Submit button loading state — keep the gradient, just dim + lock. */
.btn-primary.is-loading {
  pointer-events: none;
  filter: brightness(0.96) saturate(0.95);
  opacity: 0.85;
}

/* offboard confirm · centered card with checklist */
.page-admin-offboard {
  max-width: 540px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.page-admin-offboard-list {
  width: 100%;
  text-align: left;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.6;
}
.page-admin-offboard-list li { margin-left: 18px; }

/* ============================================================
 * ===== Recovered: px-44-admin-drill-down =====
 * Per-employee drilldown surface (.page-admin-drill-*).
 * Mirrors design-mockups/08-regional-admin.html .emp-* tokens
 * (lines ~789-914). Recovered after brain-merge auto-resolve
 * dropped this block. 1440x900 no-scroll. Zero red. Zero emoji.
 * ============================================================ */

.page-admin-drill-shell {
  padding: 20px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}
.page-admin-drill-shell > .page-admin-drill-contextbar,
.page-admin-drill-shell > .page-admin-drill-header,
.page-admin-drill-shell > .page-admin-drill-tabs {
  flex-shrink: 0;
}
.page-admin-drill-shell > .page-admin-drill-tab-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--text-faint) transparent;
  padding-right: 4px;
}
.page-admin-drill-shell > .page-admin-drill-tab-body::-webkit-scrollbar { width: 8px; }
.page-admin-drill-shell > .page-admin-drill-tab-body::-webkit-scrollbar-thumb {
  background: var(--text-faint);
  border-radius: 4px;
}
.page-admin-drill-shell > .page-admin-drill-tab-body::-webkit-scrollbar-track { background: transparent; }

/* Context bar (breadcrumb + hire meta) */
.page-admin-drill-contextbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0 14px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.page-admin-drill-contextbar .crumb { color: var(--text-soft); }
.page-admin-drill-contextbar .crumb-sep { color: var(--text-faint); font-size: 13px; }
.page-admin-drill-contextbar .crumb-current { color: var(--text); font-weight: 600; }
.page-admin-drill-contextbar .right { margin-left: auto; }
.page-admin-drill-contextbar .muted { color: var(--text-muted); }

/* Header card — radial purple wash on white surface, avatar tile, action stack */
.page-admin-drill-header {
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(99, 91, 255, 0.10), transparent 65%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
}
.page-admin-drill-avatar {
  width: 80px; height: 80px; border-radius: 22px;
  background: var(--grad); color: #ffffff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
  box-shadow:
    0 8px 22px -6px rgba(99, 91, 255, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.page-admin-drill-id .name {
  font-size: 22px; font-weight: 600; letter-spacing: -0.014em;
}
.page-admin-drill-id .role-row {
  font-size: 13px; color: var(--text-muted);
  margin-top: 4px;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.page-admin-drill-id .role-row .sep {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--text-faint);
  display: inline-block;
}
.page-admin-drill-id .role-row .rank {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}
.page-admin-drill-id .meta-row {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px; color: var(--text-faint);
  margin-top: 8px; letter-spacing: 0.04em;
}
.page-admin-drill-header-actions {
  display: flex; gap: 8px; flex-direction: column; align-items: stretch;
}

/* Tab strip — pill toggle inside tint box */
.page-admin-drill-tabs {
  display: flex; gap: 2px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
  margin-bottom: 18px;
  width: fit-content;
}
.page-admin-drill-tab {
  padding: 8px 16px; font-size: 13px; font-weight: 500;
  color: var(--text-muted);
  background: transparent; border: 0;
  border-radius: 5px; cursor: pointer;
  transition: background var(--t), color var(--t), box-shadow var(--t);
  font-family: inherit;
}
.page-admin-drill-tab:hover { color: var(--text); }
.page-admin-drill-tab.active {
  background: var(--surface); color: var(--text); font-weight: 600;
  box-shadow: var(--shadow-xs);
}

/* Two-col grid: main + 320px right rail */
.page-admin-drill-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px;
}
.page-admin-drill-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.page-admin-drill-tab-host { display: contents; }

/* KPI tiles — 4 across, sparkline under each */
.page-admin-drill-tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.page-admin-drill-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.page-admin-drill-tile .l {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 6px;
}
.page-admin-drill-tile .v {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: 22px; font-weight: 700; letter-spacing: -0.014em; line-height: 1;
}
.page-admin-drill-tile .v.purple {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-admin-drill-tile .v small {
  font-size: 13px; color: var(--text-muted); font-weight: 500;
  margin-left: 3px;
  -webkit-text-fill-color: var(--text-muted);
}
.page-admin-drill-tile-spark { color: var(--primary); }

/* Recent calls feed */
.page-admin-drill-feed-head {
  padding: 14px 20px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex; align-items: center; gap: 14px;
}
.page-admin-drill-feed-head .title { font-size: 13px; font-weight: 600; }
.page-admin-drill-feed-head .meta {
  font-size: 12px; color: var(--text-muted); margin-left: auto;
}
.page-admin-drill-feed {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
}
.page-admin-drill-call-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 130px 78px 90px;
  gap: 14px; align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  transition: background var(--t);
  cursor: pointer;
}
.page-admin-drill-call-row:first-child { border-top: 0; }
.page-admin-drill-call-row:hover { background: var(--hover); }
.page-admin-drill-call-row .date {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px; color: var(--text-muted);
}
.page-admin-drill-call-row .client .n { font-size: 13.5px; font-weight: 600; }
.page-admin-drill-call-row .client .m {
  font-size: 11px; color: var(--text-muted); margin-top: 2px;
}
.page-admin-drill-call-row .score {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: 18px; font-weight: 700; letter-spacing: -0.014em;
  text-align: right;
}
.page-admin-drill-call-row .score.purple {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-admin-drill-call-row .score small {
  font-size: 11px; color: var(--text-faint); font-weight: 500;
  -webkit-text-fill-color: var(--text-faint);
}
.page-admin-drill-call-row .actions .btn {
  padding: 5px 10px; font-size: 11px; height: auto;
}
.page-admin-drill-outcome {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 99px;
  display: inline-flex; align-items: center; gap: 5px;
}
.page-admin-drill-outcome.win {
  background: var(--status-done-bg);
  color: var(--status-done-fg);
  border: 1px solid var(--status-done-bd);
}
.page-admin-drill-outcome.win .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--status-done);
}
.page-admin-drill-outcome.neutral {
  background: var(--bg-tint);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.page-admin-drill-outcome.neutral .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-faint);
}

/* Training module grid (Training tab) */
.page-admin-drill-modgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.page-admin-drill-modcell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  min-height: 64px;
  display: flex; flex-direction: column; gap: 6px;
}
.page-admin-drill-modcell .m {
  display: flex; align-items: center; gap: 8px;
  justify-content: space-between;
}
.page-admin-drill-modcell .code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; color: var(--text-faint);
}
.page-admin-drill-modcell .pill {
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 99px;
  background: var(--bg-tint); color: var(--text-muted);
  border: 1px solid var(--border);
}
.page-admin-drill-modcell .t {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  line-height: 1.3;
}
.page-admin-drill-modcell.status-done .pill {
  background: var(--status-done-bg);
  color: var(--status-done-fg);
  border-color: var(--status-done-bd);
}
.page-admin-drill-modcell.status-working {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.page-admin-drill-modcell.status-working .pill {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--status-done-bd);
}
.page-admin-drill-modcell.status-stuck .pill {
  background: var(--bg-tint);
  color: var(--text-soft);
  border-color: var(--border-strong);
}

/* Paperwork tab */
.page-admin-drill-paperwork {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
}
.page-admin-drill-paperwork-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}
.page-admin-drill-paperwork-row:first-child { border-top: 0; }
.page-admin-drill-paperwork-row .left {
  display: flex; align-items: center; gap: 12px;
  flex: 1 1 auto; min-width: 0;
}
.page-admin-drill-paperwork-row .box {
  width: 22px; height: 22px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg-tint);
  color: var(--text-muted);
  flex: 0 0 22px;
}
.page-admin-drill-paperwork-row .box.done {
  background: var(--status-done-bg);
  border-color: var(--status-done-bd);
  color: var(--status-done-fg);
}
.page-admin-drill-paperwork-row .col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.page-admin-drill-paperwork-row .l { font-size: 13px; font-weight: 600; }
.page-admin-drill-paperwork-row .d { font-size: 11.5px; color: var(--text-muted); }
.page-admin-drill-paperwork-row .right { margin-left: auto; }
.page-admin-drill-paperwork-row .right .btn {
  padding: 6px 10px; font-size: 11.5px; height: auto;
}

/* Activity tab */
.page-admin-drill-activity {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
  max-height: 380px;
  overflow-y: auto;
}
.page-admin-drill-activity-row {
  display: grid;
  grid-template-columns: 14px 110px 1fr;
  gap: 12px; align-items: center;
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
}
.page-admin-drill-activity-row:first-child { border-top: 0; }
.page-admin-drill-activity-row .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-faint);
  display: inline-block;
}
.page-admin-drill-activity-row .dot.kind-win { background: var(--status-done); }
.page-admin-drill-activity-row .dot.kind-flag { background: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.page-admin-drill-activity-row .dot.kind-info { background: var(--text-faint); }
.page-admin-drill-activity-row .time {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px; color: var(--text-muted);
}
.page-admin-drill-activity-row .label { font-size: 12.5px; color: var(--text); }

/* Right rail cards */
.page-admin-drill-rail {
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0;
}
.page-admin-drill-rail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.page-admin-drill-rail-card.flag {
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(99, 91, 255, 0.10), transparent 65%),
    var(--surface);
  border-color: var(--status-done-bd);
}
.page-admin-drill-rail-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 10px;
}
.page-admin-drill-rail-card.flag .page-admin-drill-rail-eyebrow { color: var(--primary); }
.page-admin-drill-rail-title { font-size: 14px; font-weight: 600; }
.page-admin-drill-rail-sub {
  font-size: 12px; color: var(--text-muted);
  margin-top: 6px; line-height: 1.55;
}
.page-admin-drill-rail-cta { margin-top: 12px; width: 100%; }

/* Training progress sub-component */
.page-admin-drill-trainbar { margin-top: 14px; }
.page-admin-drill-trainbar .bar {
  height: 8px; border-radius: 99px;
  background: var(--bg-tint);
  overflow: hidden;
}
.page-admin-drill-trainbar .fill {
  height: 100%;
  background: var(--grad);
  border-radius: 99px;
}
.page-admin-drill-trainbar .meta {
  font-size: 11.5px; color: var(--text-muted);
  margin-top: 8px;
  display: flex; justify-content: space-between;
}

/* Comp rules host inside the comp card */
.page-admin-drill-rail-rules { margin-top: 12px; }

/* JetBrains Mono utility used inline by JS */
.page-admin-drill-call-row .mono,
.page-admin-drill-activity-row .mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

/* ============================================================
 * ===== Recovered: px-46-admin-offboarding =====
 * STATE 04 · OFF-BOARDING (wizard) — full hero card with
 * radial purple wash, 56px avatar, checklist pip/label/meta,
 * 3-col final stats, modal gate, toast fallback.
 * Scoped under .page-admin-offboard so off-* tokens stay
 * page-local and never leak. Calm tone: muted-grey primary,
 * zero red, zero emoji. Mirrors design-mockups/08-regional-admin
 * lines 1078-1167. Recovered after brain-merge auto-resolve.
 * NOTE: The legacy `.page-admin-offboard` centered confirm card
 * (above) is kept for selector compatibility — `off-shell` is
 * the new wizard shell layered on top of the same root class.
 * ============================================================ */
.page-admin-offboard.off-shell {
  padding: 28px 32px 32px;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(99, 91, 255, 0.06), transparent 70%),
    var(--bg-warm);
  position: relative;
  /* allow the hero card to grow tall (checklist + confirm) and scroll
   * internally so the page stays inside the 1440x900 lock. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--text-faint) transparent;
}
.page-admin-offboard.off-shell::-webkit-scrollbar { width: 8px; }
.page-admin-offboard.off-shell::-webkit-scrollbar-thumb {
  background: var(--text-faint);
  border-radius: 4px;
}
.page-admin-offboard.off-shell::-webkit-scrollbar-track { background: transparent; }
.page-admin-offboard .off-hero {
  max-width: 920px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 24px 64px -20px rgba(99, 91, 255, 0.20), var(--shadow-md);
  padding: 48px 56px 40px;
  position: relative;
  overflow: hidden;
}
.page-admin-offboard .off-hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 420px;
  height: 420px;
  background: radial-gradient(50% 50% at 70% 30%, rgba(99, 91, 255, 0.10), transparent 75%);
  pointer-events: none;
}
.page-admin-offboard .off-hero > * { position: relative; z-index: 1; }

.page-admin-offboard .off-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.page-admin-offboard .off-eyebrow::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--text-muted);
}

.page-admin-offboard .off-emp {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.page-admin-offboard .off-emp-av {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--bg-tint);
  color: var(--text-soft);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.page-admin-offboard .off-emp-body .name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.014em;
}
.page-admin-offboard .off-emp-body .meta {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 4px;
}

.page-admin-offboard .off-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.020em;
  line-height: 1.15;
  margin: 0 0 14px;
  max-width: 640px;
}
.page-admin-offboard .off-sub {
  font-size: 14.5px;
  color: var(--text-muted);
  margin: 0 0 28px;
  max-width: 580px;
  line-height: 1.55;
}

.page-admin-offboard .off-checklist {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  margin-bottom: 24px;
}
.page-admin-offboard .off-check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  transition: background var(--t);
}
.page-admin-offboard .off-check-row + .off-check-row {
  border-top: 1px dashed var(--border);
}
.page-admin-offboard .off-check-row .pip {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}
.page-admin-offboard .off-check-row.done .pip {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.page-admin-offboard .off-check-row.active .pip {
  background: var(--surface);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.10);
}
.page-admin-offboard .off-check-row .label {
  font-size: 13.5px;
  color: var(--text-soft);
  font-weight: 500;
  flex: 1;
}
.page-admin-offboard .off-check-row.done .label { color: var(--text); }
.page-admin-offboard .off-check-row.active .label {
  color: var(--text);
  font-weight: 600;
}
.page-admin-offboard .off-check-row .meta {
  font-size: 10.5px;
  color: var(--text-faint);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}

.page-admin-offboard .off-final {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.page-admin-offboard .off-final-stat .v {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1;
}
.page-admin-offboard .off-final-stat .v.purple {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-admin-offboard .off-final-stat .l {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 6px;
}

.page-admin-offboard .off-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-admin-offboard .off-actions-hint {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Cancel slot anchored to the topbar action zone (mockup line 1972).
 * Sits flush with the avatar; styled via shared .btn so no token drift. */
.page-admin-offboard-topactions {
  position: absolute;
  top: 14px;
  right: 80px;
  z-index: 2;
}

/* Inline toast fallback when shared toast() isn't loaded yet. */
.page-admin-offboard-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text);
  box-shadow: var(--shadow-md);
  z-index: 9100;
}

/* Non-blocking "syncing live record" chip in the breadcrumb right slot.
 * Muted + mono so it reads as ambient status, never an alert. Cool-spectrum
 * only, no red. Dropped the moment the live read settles. */
.off-sync-chip {
  margin-left: 10px;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.7;
  letter-spacing: 0.02em;
}

/* Confirm modal · effective-date + typed-name gate.
 * Calm grey primary, never red. Type OFFBOARD to enable submit. */
.page-admin-offboard-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 24, 0.62);
  display: grid;
  place-items: center;
  z-index: 9000;
}
.page-admin-offboard-modal {
  max-width: 440px;
  width: 90%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  box-shadow: var(--shadow-md);
}
.page-admin-offboard-modal-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
}
.page-admin-offboard-modal-body {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 14px;
}
.page-admin-offboard-modal-datelbl {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.page-admin-offboard-modal-input {
  width: 100%;
  padding: 10px 12px;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 13px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 14px;
  color: var(--text);
}
.page-admin-offboard-modal-input.mono {
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}
.page-admin-offboard-modal-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.page-admin-offboard-modal-row {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ============================================================
 * SEND INVITE (#/admin/send-invite · send-invite.js)
 * Mirrors the new-hire intake-card token set so the two admin
 * provisioning flows read as one system. Purple-only, no red/green.
 * ============================================================ */
.page-admin-invite-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  width: 100%;
}
.page-admin-invite-input.mono { font-family: 'JetBrains Mono', monospace; }
.page-admin-invite-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.page-admin-invite-input[readonly] {
  background: var(--hover);
  cursor: text;
}
.page-admin-invite-hint {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.5;
}
.page-admin-invite-err {
  font-size: 11px;
  color: var(--text-soft);
  background: var(--primary-soft);
  border-left: 2px solid var(--primary);
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 4px;
}
.field.has-error .page-admin-invite-input { border-color: var(--primary); }

/* Generated link panel — appears after the invite is created. */
.page-admin-invite-result {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-admin-invite-linkrow {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.page-admin-invite-linkrow .page-admin-invite-input { flex: 1; min-width: 0; }
.page-admin-invite-linkrow .btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.page-admin-invite-resultmeta {
  font-size: 11.5px;
  color: var(--text-faint);
  font-family: 'JetBrains Mono', monospace;
}

/* ---------- Edit-contact modal (super-admin employee-drilldown) ----------
   Ben 2026-07-11: Monica/super-admin updates any team member's phone +
   recovery email. Tokens only, zero red, matches the admin surface. */
.page-admin-edit-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 26, 0.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: 24px;
}
.page-admin-edit-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px -24px rgba(50, 38, 130, 0.5);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-admin-edit-title {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.015em;
  color: var(--text);
}
.page-admin-edit-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
  line-height: 1.4;
}
.page-admin-edit-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
  margin-top: 6px;
}
.page-admin-edit-input {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--bg-warm, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.page-admin-edit-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft, rgba(99, 91, 255, 0.16));
}
.page-admin-edit-status {
  min-height: 16px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.page-admin-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

/* ===== pages/nsd/nsd.css ===== */
/* ============================================================
 * APEX SALES OS · NSD ADMIN
 * Owner: Worker W20
 * Routes: /nsd/war-room, /nsd/modules, /nsd/regions, /nsd/rollup
 * Page-local classes only. All tokens come from shared design system.
 * ============================================================ */

/* ============================================================
   STATE 03 REGION EDITOR (list + right rail) on /nsd/regions
   Matches design-mockups/09-nsd-admin.html STATE 03.
   ============================================================ */
.page-nsd-region-editor-shell {
  padding: 28px 32px 40px;
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  box-sizing: border-box;
}
.page-nsd-region-editor-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 22px;
}
.page-nsd-region-editor-head h1 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--text);
}
.page-nsd-region-editor-head .gnum {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  font-family: 'Inter Tight', sans-serif;
  font-variant-numeric: tabular-nums;
}
.page-nsd-region-editor-head .sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

.page-nsd-region-editor-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 360px;
  gap: 22px;
  align-items: start;
}

/* Region list card (the table-style list) */
.page-nsd-region-list-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.page-nsd-region-list-head {
  padding: 12px 22px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) 80px 90px 110px 100px 80px;
  gap: 14px;
  align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.page-nsd-region-list-row {
  padding: 12px 22px;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) 80px 90px 110px 100px 80px;
  gap: 14px;
  align-items: center;
  border-top: 1px solid var(--border);
  transition: background-color var(--t);
  cursor: pointer;
}
.page-nsd-region-list-row:hover {
  background: var(--hover);
}
.page-nsd-region-list-row .rank {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  font-weight: 700;
}
.page-nsd-region-list-row .rank.top {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-nsd-region-list-row .name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.page-nsd-region-list-row .av {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--bg-tint);
  color: var(--text-soft);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.page-nsd-region-list-row.top .av {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--status-done-bd);
}
.page-nsd-region-list-row .name {
  min-width: 0;
}
.page-nsd-region-list-row .name .n {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-nsd-region-list-row .name .m {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.page-nsd-region-list-row .val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--text);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.page-nsd-region-list-row .val.purple {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-nsd-region-list-row .capacity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.page-nsd-region-list-row .capacity .bar {
  height: 4px;
  width: 80px;
  background: var(--bg-tint);
  border-radius: 99px;
  overflow: hidden;
}
.page-nsd-region-list-row .capacity .bar-fill {
  height: 100%;
  background: var(--grad);
  border-radius: 99px;
}
.page-nsd-region-list-row .capacity .v {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.page-nsd-region-list-row .row-actions {
  display: flex;
  justify-content: flex-end;
}
.page-nsd-region-list-row .row-actions .page-nsd-btn {
  padding: 5px 10px;
  font-size: 11.5px;
}

/* Right rail: Spin up new region */
.page-nsd-region-add-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.page-nsd-region-add-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.page-nsd-region-add-eyebrow::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--text-faint);
}
.page-nsd-region-add-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.page-nsd-region-add-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0 0 18px;
  line-height: 1.5;
}
.page-nsd-region-add-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.page-nsd-region-add-field + .page-nsd-region-add-field {
  margin-top: 10px;
}
.page-nsd-region-add-field > label {
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.page-nsd-region-add-field input,
.page-nsd-region-add-field select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  transition: border-color var(--t);
}
.page-nsd-region-add-field input:focus,
.page-nsd-region-add-field select:focus {
  outline: none;
  border-color: var(--border-focus);
}
.page-nsd-region-add-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

/* Right rail: Company stats card */
.page-nsd-region-stats-card {
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(99,91,255,.10), transparent 65%),
    var(--surface);
  border: 1px solid var(--status-done-bd);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.page-nsd-region-stats-card .label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.page-nsd-region-stats-card .stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px dashed var(--border);
}
.page-nsd-region-stats-card .stat:first-of-type {
  border-top: 0;
  padding-top: 4px;
}
.page-nsd-region-stats-card .stat .l {
  font-size: 12px;
  color: var(--text-muted);
}
.page-nsd-region-stats-card .stat .v {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.page-nsd-region-stats-card .stat .v.purple {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Buttons (page-local) */
.page-nsd-btn {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: border-color var(--t), background-color var(--t), transform var(--t);
}
.page-nsd-btn:hover {
  border-color: var(--border-strong);
  background: var(--hover);
}
.page-nsd-btn:focus-visible {
  outline: none;
  border-color: var(--border-focus);
}
.page-nsd-btn-primary {
  background: var(--grad);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset,
              0 6px 18px -8px rgba(99,91,255,.55);
}
.page-nsd-btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset,
              0 10px 22px -8px rgba(99,91,255,.65);
}
.page-nsd-btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
}
.page-nsd-btn-lg {
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 600;
}

/* Legacy alias kept for any callers still referencing the old card class.
   The current region editor no longer renders these; keeping the rule a no-op
   wrapper preserves backward compatibility without affecting the new layout. */
.page-nsd-region-card-legacy {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

/* ============================================================
 * Module editor — two-column shell on /nsd/modules
 * Pixel parity vs design-mockups/09-nsd-admin.html · STATE 02
 * 1440x900, fits without page scroll, editor scrolls inside.
 * ============================================================ */
.page-nsd-module-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 22px;
  height: calc(100vh - 56px - 32px - 60px);
  min-height: 720px;
}

/* ---- LEFT: module list ---- */
.page-nsd-module-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-nsd-list-head {
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.page-nsd-list-search {
  position: relative;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.page-nsd-list-search svg {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  color: var(--text-faint);
  pointer-events: none;
}
.page-nsd-list-search input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px 7px 30px;
  font-size: 12.5px;
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
}
.page-nsd-list-search input::placeholder { color: var(--text-faint); }
.page-nsd-list-search input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.12);
}
.page-nsd-list-filter {
  display: flex;
  gap: 4px;
  padding: 8px 10px 10px;
}
.page-nsd-list-filter-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.page-nsd-list-filter-btn:hover { background: var(--hover); color: var(--text-soft); }
.page-nsd-list-filter-btn.active {
  background: var(--primary-soft);
  border-color: var(--status-done-bd);
  color: var(--primary);
}
.page-nsd-list-filter-count {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: inherit;
  opacity: 0.85;
}
.page-nsd-list-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
.page-nsd-list-empty {
  padding: 18px 14px;
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
}
.page-nsd-module-list-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t);
}
.page-nsd-module-list-row + .page-nsd-module-list-row { margin-top: 2px; }
.page-nsd-module-list-row:hover { background: var(--hover); }
.page-nsd-module-list-row.active {
  background: var(--primary-soft);
  border-color: var(--status-done-bd);
}
.page-nsd-module-list-row .num {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 700;
  height: 22px;
  border-radius: 5px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.page-nsd-module-list-row.active .num {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}
.page-nsd-module-list-title {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-nsd-status-chip {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--bg-tint);
  color: var(--text-muted);
}
.page-nsd-status-chip.live {
  background: var(--primary-soft);
  border-color: var(--status-done-bd);
  color: var(--primary);
}
.page-nsd-status-chip.draft {
  background: var(--bg-tint);
  border-color: var(--border);
  color: var(--text-faint);
}

/* ---- RIGHT: editor pane ---- */
.page-nsd-module-editor {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.page-nsd-editor-head {
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.page-nsd-editor-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.page-nsd-editor-num {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.page-nsd-editor-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.008em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-nsd-editor-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.page-nsd-editor-meta svg { width: 12px; height: 12px; }
.page-nsd-editor-head-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-nsd-dirty-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--primary-soft);
  border: 1px solid var(--status-done-bd);
  color: var(--primary);
}
.page-nsd-dirty-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 2px rgba(99, 91, 255, 0.16);
}

/* ---- Tabs ---- */
.page-nsd-editor-tabs {
  display: flex;
  gap: 2px;
  padding: 0 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.page-nsd-editor-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-muted);
  padding: 12px 14px 11px;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--t), border-color var(--t);
}
.page-nsd-editor-tab:hover { color: var(--text-soft); }
.page-nsd-editor-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.page-nsd-editor-tab:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Editor body (scroll container) ---- */
.page-nsd-editor-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  min-height: 0;
}
.page-nsd-editor-empty {
  padding: 32px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}
.page-nsd-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---- Fields, inputs, textareas ---- */
.page-nsd-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.page-nsd-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: -0.005em;
}
.page-nsd-input,
.page-nsd-textarea,
.page-nsd-select {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 11px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
  outline: none;
  transition: border-color var(--t), box-shadow var(--t), background-color var(--t);
}
.page-nsd-input::placeholder,
.page-nsd-textarea::placeholder { color: var(--text-faint); }
.page-nsd-input:focus,
.page-nsd-textarea:focus,
.page-nsd-select:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.12);
  background: var(--surface);
}
.page-nsd-input-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
.page-nsd-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}
.page-nsd-textarea-tall { min-height: 220px; }
.page-nsd-help {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ---- Segmented control (category) ---- */
.page-nsd-seg {
  display: inline-flex;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.page-nsd-seg-btn {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--t), color var(--t), border-color var(--t);
}
.page-nsd-seg-btn:hover { color: var(--text-soft); }
.page-nsd-seg-btn.active {
  background: var(--surface);
  border-color: var(--status-done-bd);
  color: var(--primary);
  box-shadow: var(--shadow-xs);
}

/* ---- Stepper (watched threshold) ---- */
.page-nsd-stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.page-nsd-stepper-btn {
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background-color var(--t), border-color var(--t);
}
.page-nsd-stepper-btn:hover { background: var(--hover); border-color: var(--border-strong); }
.page-nsd-stepper-value {
  width: 60px;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  color: var(--text);
  outline: none;
}
.page-nsd-stepper-value:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.12);
}
.page-nsd-stepper-suffix {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-left: 4px;
}

/* ---- Quiz panel ---- */
.page-nsd-quiz-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.page-nsd-quiz-count {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.page-nsd-quiz-rule {
  color: var(--primary);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
}
.page-nsd-quiz-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-nsd-quiz-item {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.page-nsd-quiz-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.page-nsd-quiz-num {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--primary-soft);
  border: 1px solid var(--status-done-bd);
  letter-spacing: 0.02em;
}
.page-nsd-quiz-remove {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  color: var(--text-muted);
}
.page-nsd-quiz-remove svg { width: 12px; height: 12px; }
.page-nsd-quiz-remove:hover { color: var(--text-soft); background: var(--hover); }
.page-nsd-quiz-prompt {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 500;
}
.page-nsd-quiz-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.page-nsd-quiz-choice {
  display: grid;
  grid-template-columns: 18px 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: background-color var(--t), border-color var(--t);
}
.page-nsd-quiz-choice input[type="radio"] {
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}
.page-nsd-quiz-letter {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 700;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}
.page-nsd-quiz-choice .page-nsd-input {
  background: transparent;
  border: none;
  padding: 4px 0;
  font-size: 12.5px;
}
.page-nsd-quiz-choice .page-nsd-input:focus { box-shadow: none; background: transparent; }
.page-nsd-quiz-choice.correct {
  background: var(--primary-soft);
  border-color: var(--status-done-bd);
}
.page-nsd-quiz-choice.correct .page-nsd-quiz-letter {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}
.page-nsd-quiz-add {
  margin-top: 4px;
  display: flex;
}
.page-nsd-quiz-empty {
  padding: 18px 16px;
  background: var(--bg-soft);
  border: 1px dashed var(--border);
  border-radius: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.page-nsd-quiz-empty p { margin: 0; }

/* ---- Agent panel ---- */
.page-nsd-panel-agent { gap: 14px; }
.page-nsd-agent-actions {
  display: flex;
  gap: 8px;
}
.page-nsd-agent-actions .btn svg { width: 12px; height: 12px; }

/* ---- Resources panel ---- */
.page-nsd-resource-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-nsd-resource-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.4fr) 32px;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.page-nsd-resource-row .page-nsd-input,
.page-nsd-resource-row .page-nsd-select {
  background: var(--surface);
  padding: 6px 9px;
  font-size: 12.5px;
}
.page-nsd-resource-remove {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--text-muted);
}
.page-nsd-resource-remove svg { width: 13px; height: 13px; }
.page-nsd-resource-remove:hover { color: var(--text-soft); background: var(--hover); }
.page-nsd-resource-empty {
  padding: 18px 14px;
  background: var(--bg-soft);
  border: 1px dashed var(--border);
  border-radius: 10px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
}
.page-nsd-resource-add {
  margin-top: 6px;
}
.page-nsd-resource-add .btn svg,
.page-nsd-quiz-add .btn svg { width: 12px; height: 12px; }

/* ---- Footer ---- */
.page-nsd-editor-foot {
  padding: 12px 22px;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.page-nsd-editor-foot-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.01em;
}

/* ---- Modal (unsaved changes) ---- */
.page-nsd-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 26, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.page-nsd-modal {
  width: 420px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 22px 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-nsd-modal-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text);
}
.page-nsd-modal-body {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}
.page-nsd-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* ---- Drawer (test agent) ---- */
.page-nsd-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 26, 0.45);
  display: flex;
  justify-content: flex-end;
  z-index: 1000;
}
.page-nsd-drawer {
  width: 460px;
  max-width: 100vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.page-nsd-drawer-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.page-nsd-drawer-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text);
}
.page-nsd-drawer-sub {
  margin: 4px 0 0;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.page-nsd-drawer-close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--text-muted);
}
.page-nsd-drawer-close svg { width: 14px; height: 14px; }
.page-nsd-drawer-close:hover { color: var(--text-soft); background: var(--hover); }
.page-nsd-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.page-nsd-drawer-foot {
  padding: 14px 22px;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ---- Mic / wave (drawer body) ---- */
.page-nsd-mic-card {
  background:
    radial-gradient(60% 60% at 50% 30%, rgba(99, 91, 255, 0.10), transparent 65%),
    var(--bg-soft);
  border: 1px solid var(--status-done-bd);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.page-nsd-mic-orb {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--grad);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 22px -8px rgba(99, 91, 255, 0.55);
}
.page-nsd-mic-orb svg { width: 22px; height: 22px; }
.page-nsd-mic-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  opacity: 0.35;
  animation: page-nsd-mic-pulse 1.8s ease-out infinite;
}
@keyframes page-nsd-mic-pulse {
  0%   { transform: scale(0.92); opacity: 0.40; }
  100% { transform: scale(1.25); opacity: 0;    }
}
.page-nsd-mic-wave {
  display: inline-flex;
  align-items: end;
  gap: 3px;
  height: 28px;
}
.page-nsd-mic-bar {
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: var(--primary);
  opacity: 0.7;
  animation: page-nsd-mic-bar 1.1s ease-in-out infinite;
}
@keyframes page-nsd-mic-bar {
  0%, 100% { height: 6px;  opacity: 0.45; }
  50%      { height: 22px; opacity: 0.95; }
}
.page-nsd-mic-hint {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}
.page-nsd-mic-transcript {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-nsd-mic-line {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
}
.page-nsd-mic-line.examiner {
  background: var(--primary-soft);
  border: 1px solid var(--status-done-bd);
  color: var(--text);
}
.page-nsd-mic-line.you {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-style: italic;
}

/* ---- Toast ---- */
.page-nsd-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--status-done-bd);
  border-radius: 99px;
  box-shadow: var(--shadow-md);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  z-index: 1100;
  animation: page-nsd-toast-in 180ms cubic-bezier(.2,.6,.3,1);
}
.page-nsd-toast svg { width: 14px; height: 14px; color: var(--primary); }
.page-nsd-toast.leaving {
  animation: page-nsd-toast-out 220ms cubic-bezier(.2,.6,.3,1) forwards;
}
@keyframes page-nsd-toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0);   }
}
@keyframes page-nsd-toast-out {
  to { opacity: 0; transform: translate(-50%, 8px); }
}

/* Daily rollup — 4-up KPI strip on /nsd/rollup */
.page-nsd-rollup-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* ============================================================
 * Daily roll-up EMAIL PREVIEW (modal surface)
 * Mirrors design-mockups/09-nsd-admin.html STATE 04 (.email-shell).
 * Two-pane: left = delivery / sections / clip controls.
 *           right = Stripe-style light-mode rendered email.
 * ============================================================ */

/* Modal scaffold — wide variant for the email preview */
.page-nsd-rollup-modalbg {
  position: fixed; inset: 0;
  background: var(--scrim, rgba(15, 23, 42, 0.55));
  display: flex; align-items: center; justify-content: center;
  z-index: 9000; opacity: 0; transition: opacity var(--t, 160ms cubic-bezier(.2,.6,.3,1));
  padding: 24px;
}
.page-nsd-rollup-modalbg.open { opacity: 1; }

.page-nsd-rollup-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl, 16px);
  box-shadow: var(--shadow-lg);
  width: min(880px, 100%);
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.page-nsd-rollup-modal.page-nsd-rollup-modal-wide {
  width: min(1200px, 100%);
  max-height: calc(100vh - 48px);
}

.page-nsd-rollup-modalhead {
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.page-nsd-rollup-modalheadactions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.page-nsd-rollup-modaleyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.page-nsd-rollup-modaltitle {
  margin: 0 0 4px;
  font-family: 'Inter Tight', -apple-system, sans-serif;
  font-size: 17px; font-weight: 600; letter-spacing: -0.012em;
  color: var(--text);
}
.page-nsd-rollup-modalsub {
  font-size: 12.5px; color: var(--text-soft);
  max-width: 620px; line-height: 1.5;
}
.page-nsd-rollup-modalclose {
  padding: 6px 8px;
  display: inline-flex; align-items: center; justify-content: center;
}

.page-nsd-rollup-modalfoot {
  padding: 12px 22px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--bg-soft);
}
.page-nsd-rollup-modalactions { display: flex; gap: 8px; }
.page-nsd-rollup-recipients {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 6px;
}

/* Shell: 320px controls + fluid email preview */
.page-nsd-rollup-emailshell {
  padding: 18px 22px 22px;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
  overflow-y: auto;
  background: var(--bg-soft);
}

/* Left pane · stack of cards */
.page-nsd-rollup-emailcontrols {
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
}
.page-nsd-rollup-emailcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: 16px 18px;
}
.page-nsd-rollup-emailcardeyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.page-nsd-rollup-emailcardtitle {
  margin: 0 0 10px;
  font-family: 'Inter Tight', -apple-system, sans-serif;
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--text);
}
.page-nsd-rollup-emailfield { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.page-nsd-rollup-emailfield:first-of-type { margin-top: 0; }
.page-nsd-rollup-emailfield label {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
}
.page-nsd-rollup-emailfield input,
.page-nsd-rollup-emailfield select {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  padding: 8px 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--text);
  transition: border-color var(--t, 160ms), box-shadow var(--t, 160ms);
}
.page-nsd-rollup-emailfield input:focus,
.page-nsd-rollup-emailfield select:focus {
  outline: none;
  border-color: var(--border-focus, var(--primary));
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Section toggle rows */
.page-nsd-rollup-togglerow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px dashed var(--border);
}
.page-nsd-rollup-togglerow:first-of-type { border-top: 0; padding-top: 4px; }
.page-nsd-rollup-togglerow .lbl { min-width: 0; }
.page-nsd-rollup-togglerow .lbl-main {
  font-size: 12.5px; font-weight: 500; color: var(--text);
}
.page-nsd-rollup-togglerow .lbl-meta {
  font-size: 11px; color: var(--text-muted); margin-top: 2px;
}

.page-nsd-rollup-togglepill {
  appearance: none;
  width: 38px; height: 22px;
  border-radius: 999px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  position: relative; cursor: pointer; flex-shrink: 0;
  transition: background-color var(--t, 160ms), border-color var(--t, 160ms);
  padding: 0;
}
.page-nsd-rollup-togglepill::after {
  content: ''; position: absolute; top: 1px; left: 1px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  transition: left var(--t, 160ms), background-color var(--t, 160ms), border-color var(--t, 160ms);
}
.page-nsd-rollup-togglepill.on {
  background: var(--primary);
  border-color: var(--primary);
}
.page-nsd-rollup-togglepill.on::after {
  left: 17px;
  background: #ffffff;
  border-color: transparent;
}
.page-nsd-rollup-togglepill:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Right pane · the rendered email (Stripe-style light card) */
.page-nsd-rollup-emailpane { min-width: 0; display: flex; flex-direction: column; }

.page-nsd-rollup-email {
  /* Email itself stays LIGHT in both themes — that's how Ben's inbox renders.
     Gmail dark mode auto-converts; preserve the light source. */
  background: #ffffff;
  color: #1a1f36;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 14px 40px -12px rgba(15, 23, 42, 0.20);
  overflow: hidden;
}
html[data-theme="dark"] .page-nsd-rollup-email {
  background: #ffffff;
  color: #1a1f36;
  border-color: #e6e8ec;
}

.page-nsd-rollup-emailtoolbar {
  padding: 10px 14px;
  background: #f7f8fa;
  border-bottom: 1px solid #e6e8ec;
  display: flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: #697386;
}
.page-nsd-rollup-emaildots { display: inline-flex; gap: 5px; }
.page-nsd-rollup-emaildots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: #d6d9df; display: inline-block;
}

.page-nsd-rollup-emailmeta {
  padding: 16px 24px 12px;
  border-bottom: 1px solid #e6e8ec;
  background: #ffffff;
  font-size: 12px; color: #697386;
}
.page-nsd-rollup-emailrow {
  display: grid; grid-template-columns: 64px 1fr;
  gap: 8px; padding: 3px 0;
}
.page-nsd-rollup-emailrow .l {
  color: #8792a2; font-weight: 600;
}
.page-nsd-rollup-emailrow .v { color: #1a1f36; min-width: 0; }
.page-nsd-rollup-emailrow .v.bold { font-weight: 600; }

.page-nsd-rollup-emailbody {
  padding: 28px 32px 28px;
  background: #ffffff;
  color: #1a1f36;
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px; line-height: 1.6;
  max-height: 520px;
  overflow-y: auto;
}
.page-nsd-rollup-emailbody h1 {
  margin: 0 0 6px;
  font-size: 24px; font-weight: 700; letter-spacing: -0.014em;
  background: linear-gradient(135deg, #7a73ff 0%, #635bff 50%, #2563eb 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-nsd-rollup-emailbody h2 {
  margin: 22px 0 10px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #697386;
}
.page-nsd-rollup-emailbody p {
  margin: 10px 0;
  font-size: 14px; line-height: 1.6; color: #1a1f36;
}
.page-nsd-rollup-emailbody b { color: #1a1f36; font-weight: 700; }
.page-nsd-rollup-emailbody ul {
  margin: 8px 0 16px;
  padding-left: 20px;
  font-size: 14px; color: #1a1f36;
}
.page-nsd-rollup-emailbody li { margin: 6px 0; line-height: 1.55; }
.page-nsd-rollup-emaillede {
  font-size: 14px; color: #3c4257; margin: 6px 0 22px;
}
.page-nsd-rollup-emailaccent {
  color: #635bff; font-weight: 700;
}

.page-nsd-rollup-emailnums {
  background: #fafbfc;
  border: 1px solid #e6e8ec;
  border-radius: 10px;
  padding: 16px 18px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin: 14px 0 18px;
}
.page-nsd-rollup-emailstat { min-width: 0; }
.page-nsd-rollup-emailstat .v {
  font-family: 'Inter Tight', -apple-system, sans-serif;
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1;
  color: #1a1f36;
  font-variant-numeric: tabular-nums;
}
.page-nsd-rollup-emailstat .v.purple {
  background: linear-gradient(135deg, #7a73ff 0%, #635bff 50%, #2563eb 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-nsd-rollup-emailstat .l {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #697386; margin-top: 6px;
}

.page-nsd-rollup-emailctarow { margin: 22px 0 10px; }
.page-nsd-rollup-emailcta {
  display: inline-block;
  background: linear-gradient(135deg, #7a73ff 0%, #635bff 50%, #2563eb 100%);
  color: #ffffff !important;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 8px;
  font-weight: 600; font-size: 14px;
  box-shadow: 0 6px 14px -4px rgba(99, 91, 255, 0.45);
  transition: transform 160ms cubic-bezier(.2,.6,.3,1),
              box-shadow 160ms cubic-bezier(.2,.6,.3,1),
              filter 160ms cubic-bezier(.2,.6,.3,1);
}
.page-nsd-rollup-emailcta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -6px rgba(99, 91, 255, 0.55);
  filter: brightness(1.04);
}
.page-nsd-rollup-emailcta:active { transform: translateY(0); }

.page-nsd-rollup-emailsign {
  font-size: 12px;
  color: #697386;
  margin-top: 32px;
}
.page-nsd-rollup-emailstamp {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: #8792a2;
  display: inline-block;
  margin-top: 2px;
}

/* Tighten layout below 1180px so the modal still fits */
@media (max-width: 1180px) {
  .page-nsd-rollup-emailshell {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 14px;
  }
}
@media (max-width: 960px) {
  .page-nsd-rollup-emailshell {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== pages/super-admin/super.css ===== */
/* ============================================================
 * APEX SALES OS · SUPER ADMIN (CEO + Audit + Role Switcher)
 * Owner: Worker W21
 * Route surfaces: /ceo, /ceo/audit
 * Tokens: consumes design system vars from frontend/styles/tokens.css
 *         (--surface, --border, --bg-tint, --hover, --primary,
 *          --primary-soft, --text, --text-muted, --text-faint,
 *          --status-done-bd, --grad, --radius, --radius-lg,
 *          --shadow-lg). No hardcoded hex colors.
 * Rules: zero red. zero emojis. zero deity language. zero hash
 *        symbols. The "warn" state on a pulse row uses a muted
 *        dot with no animation, NEVER red.
 * ============================================================ */

/* ------------------------------------------------------------
 * CEO dashboard outer grid · main column + 320px right rail
 * ------------------------------------------------------------ */
.page-ceo-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: start;
}

/* ------------------------------------------------------------
 * System pulse card · platform health rows on the right rail
 * ------------------------------------------------------------ */
.page-ceo-pulse {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-ceo-pulse h3 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.page-ceo-pulse-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 12.5px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.page-ceo-pulse-row:last-child { border-bottom: 0; }
.page-ceo-pulse-row .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  animation: livePulse 1.6s infinite;
}
/* warn state · muted-grey dot, no pulse · NEVER red */
.page-ceo-pulse-row.warn .dot {
  background: var(--text-muted);
  animation: none;
}
/* idle state · faint dot, no pulse */
.page-ceo-pulse-row.idle .dot {
  background: var(--text-faint);
  animation: none;
}

/* ============================================================
 * AUDIT LOG · STATE 02 parity sweep
 *   Hero KPI strip · filter chips · toolbar · table rows
 *   Hash-chained, single-writer, drawer-on-click.
 *   Zero red. Zero deity. JBM mono on timestamps + hashes.
 * ============================================================ */

/* page root claims the locked 100vh viewport so the shell + table
 * chain below can flex correctly. IRON LAW (no page scroll):
 * see docs/IRON-LAW-NO-SCROLL.md. */
.page-audit {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* shell holds the page interior under the topbar/context bar */
.page-audit-shell {
  padding: 22px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* hero KPI strip · 4 tiles across, JBM mono numbers via kpi-tile */
.page-audit-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* toolbar: chips left, search + date + export right */
.page-audit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.page-audit-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.page-audit-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* filter chips · primary-soft pill when active, count badge in JBM */
.page-audit-chips .seg-btn,
.page-audit-chips .seg-opt,
.page-audit-chips .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 6px 11px;
  border-radius: 99px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.page-audit-chips .seg-btn:hover,
.page-audit-chips .seg-opt:hover,
.page-audit-chips .chip:hover {
  background: var(--hover);
  color: var(--text);
}
.page-audit-chips .seg-btn.is-active,
.page-audit-chips .seg-btn[aria-pressed='true'],
.page-audit-chips .seg-opt.active,
.page-audit-chips .chip.is-active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--status-done-bd);
  font-weight: 600;
}
.page-audit-chips .seg-btn .count,
.page-audit-chips .seg-opt .count,
.page-audit-chips .chip .count {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 0 6px;
  color: var(--text-muted);
  margin-left: 2px;
}
.page-audit-chips .seg-btn.is-active .count,
.page-audit-chips .seg-opt.active .count,
.page-audit-chips .chip.is-active .count {
  color: var(--primary);
  border-color: var(--status-done-bd);
}

/* search input + date pickers */
.page-audit-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  width: 240px;
  transition: border-color var(--t);
}
.page-audit-search:focus-within {
  border-color: var(--status-done-bd);
  background: var(--surface);
}
.page-audit-search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 12px;
  color: var(--text);
  font-family: inherit;
}
.page-audit-date {
  height: 32px;
  padding: 0 10px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-soft);
  font-size: 11.5px;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.page-audit-date:focus {
  outline: none;
  border-color: var(--status-done-bd);
}

/* table container · scrolls within container, page itself stays at 900h */
.page-audit-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

/* table header row · sticky inside the scroll body */
.page-audit-head {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: default;
  padding-top: 9px;
  padding-bottom: 9px;
}
.page-audit-head:hover { background: var(--bg-soft); }

/* table body · scrolls internally */
.page-audit-list {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
}

/* ------------------------------------------------------------
 * Audit log table row · 6-column grid
 *   time · actor avatar · description · subject · type · severity
 * ------------------------------------------------------------ */
.page-audit-row {
  display: grid;
  grid-template-columns: 96px 34px minmax(0, 1fr) 130px 100px 90px;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  border-top: 0;
  background: transparent;
  text-align: left;
  width: 100%;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  transition: background var(--t), transform var(--t);
  position: relative;
}
button.page-audit-row {
  border-left: 0;
  border-right: 0;
}
.page-audit-list .page-audit-row:nth-child(even) {
  background: var(--bg-soft);
}
.page-audit-list .page-audit-row:last-child {
  border-bottom: 0;
}
.page-audit-row:hover {
  background: var(--hover);
}
.page-audit-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.page-audit-row .mono {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.page-audit-time {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.page-audit-row .av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-tint);
  color: var(--text-soft);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.02em;
  border: 1px solid var(--border);
}
.page-audit-row .av.is-root,
.page-audit-row .av.is-ai {
  background: var(--grad);
  color: #ffffff;
  border: 0;
}

/* event body · title + meta · meta in muted text */
.page-audit-body { min-width: 0; }
.page-audit-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-audit-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-audit-meta b,
.page-audit-meta strong {
  color: var(--text);
  font-weight: 600;
}

/* subject hash-chip · JBM truncated like 0x9c4f...a3b1 */
.page-audit-subject {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-audit-subject.is-muted {
  color: var(--text-faint);
}

/* type chip · neutral, never red */
.page-audit-type {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--bg-tint);
  color: var(--text-soft);
  border: 1px solid var(--border);
  justify-self: start;
}

/* severity chip · purple shades for high, neutral for med/low · NEVER red */
.page-audit-sev {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--bg-tint);
  color: var(--text-muted);
  justify-self: start;
}
.page-audit-sev .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-faint);
}
.page-audit-sev.sev-high {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--status-done-bd);
}
.page-audit-sev.sev-high .dot { background: var(--primary); }
.page-audit-sev.sev-med {
  background: var(--bg-tint);
  color: var(--text-soft);
  border-color: var(--border);
}
.page-audit-sev.sev-med .dot { background: var(--text-soft); }
.page-audit-sev.sev-low {
  background: var(--bg-soft);
  color: var(--text-muted);
  border-color: var(--border);
}
.page-audit-sev.sev-low .dot { background: var(--text-faint); }

/* high-severity row · primary-soft wash from left, 3px gradient edge */
.page-audit-row.is-high {
  background:
    linear-gradient(90deg, var(--primary-soft) 0%, transparent 30%),
    var(--surface);
}
.page-audit-list .page-audit-row.is-high:nth-child(even) {
  background:
    linear-gradient(90deg, var(--primary-soft) 0%, transparent 30%),
    var(--bg-soft);
}
.page-audit-row.is-high::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--grad);
}

/* root-actor row · same purple soft-wash + 3px gradient left edge */
.page-audit-row.root {
  background: linear-gradient(90deg, var(--primary-soft) 0%, transparent 40%);
}
.page-audit-row.root::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--grad);
}

/* drawer detail · summary card + before/after JSON */
.page-audit-drawer-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-soft);
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-bottom: 12px;
}
.page-audit-drawer-card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.page-audit-drawer-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
}
.page-audit-drawer-k {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.page-audit-drawer-v {
  color: var(--text);
  word-break: break-word;
}
.page-audit-drawer-v.mono {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--text-soft);
}
.page-audit-drawer-ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.page-audit-drawer-bacol {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.page-audit-drawer-baheader {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.page-audit-drawer-json {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-soft);
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  overflow: auto;
  max-height: 240px;
  white-space: pre;
  margin: 0;
}

/* ------------------------------------------------------------
 * Root chip · uppercase primary-soft pill
 * Replaces the legacy deity-mode chip. Used to mark the
 * super-admin actor in tables, drawers, and topbar context.
 * ------------------------------------------------------------ */
.root-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--status-done-bd);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------
 * Role switcher widget · lives in the topbar actions area
 * Button toggles a 280px popover with search + employee rows.
 * ------------------------------------------------------------ */
.page-root-switcher {
  position: relative;
}
.page-root-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--status-done-bd);
  border-radius: var(--radius);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
}
.page-root-switcher-popover {
  position: absolute;
  top: 38px;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  width: 280px;
  display: none;
  z-index: 80;
}
.page-root-switcher.open .page-root-switcher-popover {
  display: block;
}
.page-root-switcher-popover input {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  margin-bottom: 8px;
}
.page-root-switcher-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 12px;
}
.page-root-switcher-row:hover {
  background: var(--hover);
}
.page-root-switcher-row.active {
  background: var(--primary-soft);
}
.page-root-switcher-row .av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-tint);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid var(--border);
}
.page-root-switcher-row .sub {
  font-size: 10.5px;
  color: var(--text-muted);
}

/* ------------------------------------------------------------
 * AptPay glance tile · click-to-launch the treasury sweep
 * Hover lifts subtly. NEVER red, NEVER deity language.
 * ------------------------------------------------------------ */
.page-ceo-glance-link {
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.page-ceo-glance-link:hover {
  border-color: var(--status-done-bd);
  background: var(--hover);
}
.page-ceo-glance-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
 * Treasury sweep launcher card · sits at the top of the right
 * rail. Shows live holding + cleared total + single primary CTA
 * that routes to #/treasury-sweep. Numeric reads run JBM mono.
 * ------------------------------------------------------------ */
.page-ceo-sweep {
  gap: 6px;
}
.page-ceo-sweep-balance,
.page-ceo-sweep-cleared {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.page-ceo-sweep-balance {
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.page-ceo-sweep-balance-lbl,
.page-ceo-sweep-cleared-lbl {
  font-size: 11.5px;
  color: var(--text-muted);
}
.page-ceo-sweep-balance-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.page-ceo-sweep-cleared-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.page-ceo-sweep-btn {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 34px;
  font-size: 12px;
  font-weight: 500;
}

/* ===== pages/profile/profile.css ===== */
/* ============================================================
 * APEX SALES OS · PROFILE / SETTINGS
 * Owner: Worker W23 (r6-020-profile-css)
 *
 * Layout: 240px nav + 1fr pane, both surface cards.
 * Tabs: Profile · Notifications · Security · Payouts · Theme.
 * Tokens only (Stripe-precedent). Light + dark via data-theme.
 * Purple rgba is the documented focus-ring exception.
 * ============================================================ */

/* ---- grid: nav + pane ---- */
.page-profile-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  align-items: start;
}

/* ---- left nav ---- */
.page-profile-nav {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-profile-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 12.5px;
  color: var(--text-soft);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--t), color var(--t);
}

.page-profile-nav-item:hover {
  background: var(--hover);
  color: var(--text);
}

.page-profile-nav-item.active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 500;
}

.page-profile-nav-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.16);
}

/* ---- right pane (white card on light, surface on dark) ---- */
.page-profile-pane {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
}

.page-profile-pane h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.page-profile-pane .sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0 0 18px;
}

/* ---- foot: right-aligned action row with top border ---- */
.page-profile-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ---- 76px gradient avatar (initials inside) — matches mockup STATE 05 ---- */
.page-profile-photo {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: var(--grad);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  box-shadow:
    0 8px 22px -6px rgba(99, 91, 255, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* ---- hero block: avatar + identity ---- */
.page-profile-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.page-profile-id-name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--text);
}

.page-profile-id-role {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-profile-id-role .sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-faint);
}

.page-profile-id-email {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 8px;
}

/* ---- section eyebrow ---- */
.page-profile-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.page-profile-section-title.gap-top {
  margin-top: 36px;
}

/* ---- row pattern: label/sub + value + action ---- */
.page-profile-row {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 18px;
  padding: 16px 0;
  border-top: 1px dashed var(--border);
  align-items: center;
}

.page-profile-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.page-profile-row-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.page-profile-row-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.page-profile-row-val {
  font-size: 13.5px;
  color: var(--text-soft);
}

.page-profile-row-val.mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 12.5px;
  color: var(--text-muted);
}

.page-profile-row .btn {
  padding: 5px 11px;
  font-size: 12px;
}

.page-profile-row-verified {
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ---- toggle switch (matches mockup .profile-toggle) ---- */
.page-profile-toggle {
  width: 38px;
  height: 22px;
  border-radius: 99px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
  flex-shrink: 0;
}

.page-profile-toggle::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  transition: left var(--t), background var(--t), border-color var(--t);
}

.page-profile-toggle.on {
  background: var(--primary);
  border-color: var(--primary);
}

.page-profile-toggle.on::after {
  left: 17px;
  background: #fff;
  border-color: transparent;
}

.page-profile-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.16);
}

/* ---- trust footer (sign-out, calm, muted) ---- */
.page-profile-trust {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.page-profile-trust-copy {
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.5;
}

.page-profile-signout {
  background: var(--bg-tint);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}

.page-profile-signout:hover {
  background: var(--hover);
  border-color: var(--border-strong);
  color: var(--text);
}

.page-profile-signout:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.16);
}

/* ---- theme tab: 3-col card grid with swatch previews ---- */
.page-profile-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.page-profile-theme-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  cursor: pointer;
  background: var(--surface);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

.page-profile-theme-card:hover {
  border-color: var(--border-strong);
}

.page-profile-theme-card.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.10);
}

.page-profile-theme-card:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.16);
}

/* ===== pages/account/account.css ===== */
/* ============================================================
 * My Account — the rep's one place for everything that's theirs.
 * Profile · Banking & Payout · My Documents · My Headshot · Referral
 *
 * Design-locked to the Apex Stripe-tier language: Inter Tight,
 * purple #635bff primary, light surfaces, 1px borders, radius-xl
 * cards, JetBrains Mono for eyebrows/receipts. Zero red, zero
 * emoji, 1440x900-fits with internal scroll on the doc viewer only.
 * ============================================================ */

/* ---- page scaffold ------------------------------------------------ */
/* Chromeless route (no left-nav spine): the page centers itself like the
 * recruiting cockpits do -- comfortable measure, symmetric gutters. */
.page-account {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 32px 16px;
}

/* ---- back affordance ----------------------------------------------- */
.page-account-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 11px;
  margin-right: 4px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.page-account-back:hover,
.page-account-back:focus-visible {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(99, 91, 255, 0.06);
}

/* ---- identity header ---------------------------------------------- */
.page-account-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.page-account-hero-av {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad) border-box;
}
.page-account-hero-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-account-hero-id { min-width: 0; }
.page-account-hero-name {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.15;
}
.page-account-hero-role {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-top: 4px;
}
.page-account-hero-email {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
}
.page-account-hero-spacer { flex: 1 1 auto; }
.page-account-hero-ref {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: 420px;
  flex-shrink: 0;
}
.page-account-hero-ref-eye {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}
.page-account-hero-ref .page-account-ref { margin-top: 0; }
.page-account-hero-ref .page-account-ref-chip { margin-top: 0; }
.page-account-btn.sm { padding: 6px 14px; font-size: 12px; }
.page-account-hero-chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  white-space: nowrap;
}

/* ---- section cards ------------------------------------------------- */
.page-account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
  min-height: 0;
}
.page-account-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.page-account-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 16px 22px;
  min-width: 0;
}
.page-account-card-eye {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-account-card-eye::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--primary);
}
.page-account-card-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-top: 6px;
}
.page-account-card-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.45;
}

/* ---- editable rows -------------------------------------------------- */
.page-account-rows { margin-top: 10px; display: flex; flex-direction: column; }
.page-account-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 2px;
  border-top: 1px solid var(--border-soft, var(--border));
}
.page-account-row:first-child { border-top: 0; }
.page-account-row-label {
  width: 168px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.page-account-row-label small {
  display: block;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 2px;
}
.page-account-row-value {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-account-row-value.mono { font-family: var(--mono); font-size: 13px; }
.page-account-row-value.muted { color: var(--text-muted); }
.page-account-row-action {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--primary);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  border-radius: 9px;
  padding: 7px 16px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
  white-space: nowrap;
}
.page-account-row-action:hover { border-color: var(--primary); background: var(--primary-soft, rgba(99,91,255,0.06)); }

/* inline editor swap-in for a row */
.page-account-row input[type="text"],
.page-account-row input[type="email"],
.page-account-row input[type="tel"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 1.5px solid var(--primary);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: 'Inter Tight', sans-serif;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(99, 91, 255, 0.16);
  outline: none;
}

/* ---- documents ------------------------------------------------------ */
.page-account-doclist { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.page-account-doc {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  padding: 8px 12px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.page-account-doc:hover { border-color: var(--primary); box-shadow: var(--shadow-sm, 0 1px 4px rgba(20,22,38,0.06)); }
.page-account-doc-ico {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--primary-soft, rgba(99,91,255,0.08));
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.page-account-doc-meta { flex: 1 1 auto; min-width: 0; }
.page-account-doc-title {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-account-doc-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}
.page-account-doc-actions { display: flex; gap: 8px; flex-shrink: 0; }
.page-account-doc-empty {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg, 14px);
  padding: 26px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 18px;
}

/* ---- headshot section ----------------------------------------------- */
.page-account-hs {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 12px;
}
.page-account-hs-preview {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad) border-box;
}
.page-account-hs-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-account-hs-body { flex: 1 1 auto; min-width: 0; }
.page-account-hs-note {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 13px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13.5px;
  color: var(--text);
  resize: vertical;
  background: var(--surface);
  margin-top: 10px;
}
.page-account-hs-note:focus { outline: none; border-color: var(--primary); box-shadow: 0 1px 3px rgba(99,91,255,0.16); }
.page-account-hs-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.page-account-hs-file { display: none; }

/* ---- referral -------------------------------------------------------- */
.page-account-ref {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 5px 5px 5px 14px;
  background: var(--bg-soft, #fafafd);
}
.page-account-ref-link {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-account-ref-chip {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--primary);
  background: var(--primary-soft, rgba(99,91,255,0.08));
  border-radius: 999px;
  padding: 5px 11px;
  white-space: nowrap;
  margin-top: 9px;
  display: inline-block;
}

/* ---- shared buttons --------------------------------------------------- */
.page-account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 11px;
  background: var(--grad);
  color: #ffffff;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13.5px;
  font-weight: 650;
  padding: 11px 20px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px -2px rgba(99,91,255,0.5);
  transition: transform 120ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
.page-account-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px -2px rgba(99,91,255,0.55); }
.page-account-btn[disabled] { opacity: 0.6; cursor: default; transform: none; }
.page-account-btn.ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
.page-account-btn.ghost:hover { border-color: var(--primary); color: var(--primary); }
.page-account-btn .spin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #ffffff;
  animation: page-account-spin 700ms linear infinite;
}
.page-account-btn.ghost .spin { border-color: rgba(99,91,255,0.25); border-top-color: var(--primary); }
@keyframes page-account-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .page-account-btn .spin { animation: page-account-pulse 900ms ease-in-out infinite; }
  @keyframes page-account-pulse { 50% { opacity: 0.4; } }
}

/* ---- password (SMS-code reset, Case B: logged-in My Account) ---------- */
.page-account-pw { margin-top: 12px; }
.page-account-pw-step { display: flex; flex-direction: column; gap: 12px; }
.page-account-pw-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  background: var(--bg-soft, #fafafd);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
}
.page-account-pw-confirm svg { color: var(--primary); flex-shrink: 0; }
.page-account-pw-field { display: flex; flex-direction: column; gap: 6px; }
.page-account-pw-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.page-account-pw-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0 10px;
  background: var(--surface);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.page-account-pw-input-row:focus-within {
  border-color: var(--primary);
  box-shadow: 0 1px 3px rgba(99, 91, 255, 0.16);
}
.page-account-pw-input-row input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  padding: 10px 0;
  font-size: 14px;
  font-family: 'Inter Tight', sans-serif;
  color: var(--text);
}
.page-account-pw-eye {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  border-radius: 6px;
  transition: color 140ms ease, background 140ms ease;
}
.page-account-pw-eye:hover { color: var(--primary); background: var(--primary-soft, rgba(99,91,255,0.06)); }

/* ---- banking summary tiles -------------------------------------------- */
.page-account-payout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.page-account-payout-tile {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 14px;
}
.page-account-payout-tile .k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.page-account-payout-tile .v {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-top: 5px;
  font-family: var(--mono);
}
.page-account-payout-tile .s {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* ---- signed-document viewer overlay ------------------------------------ */
.page-account-viewer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 38, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.page-account-viewer {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 24px 64px -12px rgba(20,22,38,0.4);
  width: min(880px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-account-viewer-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.page-account-viewer-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-account-viewer-body {
  overflow-y: auto;
  padding: 34px 44px;
  min-height: 0;
}
/* letterhead inside the viewer — mirrors emailed-pdf-preview.html */
.page-account-viewer-letterhead {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 2px solid #1a1f36;
  margin-bottom: 24px;
}
.page-account-viewer-letterhead img { width: 44px; height: 44px; border-radius: 10px; }
.page-account-viewer-letterhead .co {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.page-account-viewer-letterhead .dt {
  font-size: 20px;
  font-weight: 750;
  color: #1a1f36;
  letter-spacing: -0.01em;
}
.page-account-viewer-body h3 {
  font-size: 15px;
  font-weight: 700;
  color: #1a1f36;
  margin: 22px 0 8px;
}
.page-account-viewer-body p {
  font-size: 13.5px;
  line-height: 1.65;
  color: #3c4257;
  margin: 0 0 10px;
}
.page-account-viewer-sig {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
  display: flex;
  align-items: flex-end;
  gap: 30px;
}
.page-account-viewer-sig .ink {
  font-family: 'Caveat', 'Brush Script MT', cursive;
  font-size: 38px;
  color: #1a1f36;
  line-height: 1;
  border-bottom: 1.5px solid #1a1f36;
  padding: 0 18px 6px 4px;
}
.page-account-viewer-sig .ink img { max-height: 54px; display: block; }
.page-account-viewer-sig .stamp {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* print = the real PDF (letter format, viewer chrome hidden) */
@media print {
  body > *:not(.page-account-viewer-scrim) { display: none !important; }
  .page-account-viewer-scrim { position: static; background: none; padding: 0; backdrop-filter: none; }
  .page-account-viewer { box-shadow: none; border-radius: 0; width: 100%; max-height: none; }
  .page-account-viewer-bar { display: none; }
  .page-account-viewer-body { overflow: visible; padding: 0.6in 0.75in; }
  @page { size: letter; margin: 0; }
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1280px) {
  .page-account-grid { grid-template-columns: 1fr; }
}

/* ===== pages/system/system.css ===== */
/* ============================================================
 * APEX SALES OS · SYSTEM STATE PAGES
 * Owner: Worker W22
 * Page-local styles only · .page-sys-* namespace
 * Used by: 404 (not-found), network-error, permission-denied,
 *          loading-overlay utility, empty-state wrappers
 * ============================================================ */

/* outer frame — centered card on a faint radial purple wash */
.page-sys-frame {
  min-height: calc(100vh - 56px);
  display: grid;
  place-items: center;
  padding: 60px 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(99, 91, 255, 0.06), transparent 60%),
    var(--bg-warm);
}

/* the card itself · capped width, centered column */
.page-sys-card {
  max-width: 480px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* circular icon medallion · 80x80, neutral by default */
.page-sys-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.page-sys-icon svg {
  width: 36px;
  height: 36px;
}

/* accent variant · purple-soft tint for success/online states */
.page-sys-icon.accent {
  background: var(--primary-soft);
  border-color: var(--status-done-bd);
  color: var(--primary);
}

/* eyebrow label · mono uppercase status code */
.page-sys-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* page title */
.page-sys-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
  color: var(--text);
}

/* supporting paragraph */
.page-sys-sub {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 380px;
  margin: 0;
}

/* CTA row · one primary + one secondary */
.page-sys-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* meta footer · mono attempted-path + support link */
.page-sys-meta {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  width: 100%;
  font-size: 11.5px;
  color: var(--text-faint);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.page-sys-meta .mono {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
}
.page-sys-meta a {
  color: var(--text-muted);
  text-decoration: none;
}
.page-sys-meta a:hover {
  color: var(--text-soft);
  text-decoration: underline;
}

/* network error · live ping chip */
.page-sys-ping {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 12px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: 99px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.page-sys-ping .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  animation: livePulse 1.6s infinite ease-in-out;
}
.page-sys-ping.up .dot {
  background: var(--primary);
}
/* offline state · muted grey, NEVER red */
.page-sys-ping.down .dot {
  background: var(--text-faint);
}

/* ============================================================
 * .system-page · BEM fallback classes used by the inline
 * renderers inside shared/router.js (renderNotFound,
 * renderError, renderPermissionDenied, renderLoading).
 *
 * Mirrors mockup #11 design language with the same purple
 * radial wash, eyebrow → big title → muted body → action row.
 * Visible immediately when something goes wrong inside the
 * router itself (before a landable system page can mount).
 * ============================================================ */

.system-page {
  min-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 32px 72px;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(99, 91, 255, 0.08), transparent 70%),
    var(--bg-warm);
  gap: 14px;
}

/* STATE 03 · 404 NOT FOUND — tighter rhythm so the giant gradient
 * digit owns the canvas. Eyebrow hugs the digit, headline sits 14px
 * below it, body 18px under, attempted-path chip 8px under that,
 * actions 32px under the chip. Matches mockup #11 STATE 03. */
.system-page--not-found {
  gap: 0;
}

.system-page__eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.system-page__code {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.044em;
  font-size: 132px;
  line-height: 1;
  margin: 0 0 4px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}

/* 404 digit · JetBrains Mono mono numerals, gradient text-clip,
 * massive at 152px so it dominates the canvas. Matches mockup #11
 * STATE 03 (.err-code) but swaps in JBM mono for the pixel-style
 * "system" feel — the rest of the page stays Inter Tight. */
.system-page--not-found .system-page__code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 152px;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 6px 0 6px;
  /* Subtle gradient text-shadow so the digit lifts off the wash without
   * leaking color (text-fill-color: transparent). */
  filter: drop-shadow(0 18px 32px rgba(99, 91, 255, 0.18));
}

.system-page__title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.2;
  margin: 0;
  color: var(--text);
  max-width: 560px;
}

.system-page__body {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 520px;
}

.system-page__body b {
  color: var(--text);
  font-weight: 600;
}

.system-page__path {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  color: var(--text-soft);
  padding: 7px 14px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  max-width: 90%;
}

.system-page__path-label {
  color: var(--text-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 10.5px;
}

/* The attempted-path value · JBM mono so it reads as a literal route.
 * Inherits the chip's 12px size; text-soft for readable contrast. */
.system-page__path-value {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-soft);
  word-break: break-all;
}

/* Not-found rhythm overrides — gap:0 on the parent lets us pin every
 * spacing decision per element instead of relying on flex gap. */
.system-page--not-found .system-page__eyebrow { margin-bottom: 4px; }
.system-page--not-found .system-page__title   { margin-top: 8px;  margin-bottom: 14px; }
.system-page--not-found .system-page__body    { margin-bottom: 22px; }
.system-page--not-found .system-page__path    { margin-top: 0; margin-bottom: 0; }
.system-page--not-found .system-page__actions { margin-top: 28px; gap: 12px; }

.system-page__actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.system-page__action,
.system-page__action.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 550;
  border-radius: var(--radius, 8px);
}

.system-page__icon {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  position: relative;
  box-shadow: var(--shadow-sm, 0 2px 5px -1px rgba(50, 50, 93, 0.08));
}

.system-page__icon svg {
  width: 44px;
  height: 44px;
  color: var(--primary);
  position: relative;
  z-index: 1;
}

/* Permission-denied lock tile · purple gradient, calm (NOT alarmed).
   Restricted, not punitive — same purple as the brand mark, no red. */
.system-page__icon--lock {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
    var(--grad);
  border-color: transparent;
  color: #ffffff;
  box-shadow:
    0 12px 30px -12px rgba(99, 91, 255, 0.55),
    0 2px 5px -1px rgba(50, 50, 93, 0.10);
}

.system-page__icon--lock svg {
  color: #ffffff;
}

/* Inline path chip baked into the body sentence on permission-denied.
   Mono, faint pill, no border weight — sits in flow without breaking
   the line. Keeps the attempted hash readable at small sizes. */
.system-page__body-path {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  padding: 2px 8px;
  margin: 0 2px;
  border-radius: 6px;
  background: var(--bg-tint);
  color: var(--text-soft);
  letter-spacing: 0;
  white-space: nowrap;
}

/* No-access variant · slightly tighter rhythm so the lock tile,
   eyebrow, headline, body, and action row all fit a 1440x900 frame
   without scroll. Inherits the same purple radial wash from
   .system-page. */
.system-page--no-access {
  gap: 12px;
  padding: 56px 32px 64px;
}

.system-page--no-access .system-page__title {
  max-width: 520px;
}

.system-page--no-access .system-page__body {
  max-width: 480px;
}

/* Live "reconnecting" ring around the icon for the network state */
.system-page__icon--pulsing::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 36px;
  border: 1.5px solid var(--primary);
  opacity: 0;
  animation: netRingPulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}

@keyframes netRingPulse {
  0%   { opacity: .5; transform: scale(.92); }
  100% { opacity: 0;  transform: scale(1.12); }
}

/* Calm gradient icon tile for renderError() — purple wash, NEVER red. */
.system-page__icon--alert {
  background: var(--grad);
  border: 1px solid transparent;
  box-shadow:
    0 18px 40px -22px rgba(99, 91, 255, 0.55),
    0 2px 5px -1px rgba(50, 50, 93, 0.10);
}
.system-page__icon--alert svg {
  color: #fff;
  width: 42px;
  height: 42px;
}

/* Collapsed stack-trace details for renderError(). JetBrains Mono.
 * Tight, muted, never alarming. Sits below the action row.
 */
.system-page--error {
  gap: 12px;
  padding: 48px 32px 56px;
}

.system-page__stack {
  margin-top: 10px;
  max-width: 720px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.system-page__stack-summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  user-select: none;
}
.system-page__stack-summary::-webkit-details-marker { display: none; }
.system-page__stack-summary::before {
  content: '+';
  display: inline-block;
  width: 14px;
  color: var(--text-faint);
  font-weight: 700;
}
.system-page__stack[open] .system-page__stack-summary::before { content: '−'; }
.system-page__stack[open] .system-page__stack-summary {
  border-bottom: 1px solid var(--border);
}

.system-page__stack-pre {
  margin: 0;
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  max-height: 220px;
  overflow: auto;
  background: var(--bg-tint);
}

/* ============================================================
 * Loading skeleton (.page-loading) used by the router while it
 * imports the matched route module. Mirrors mockup STATE 01:
 * hero block with a soft purple radial wash, a 4-card KPI row,
 * 4 list-shape rows, and a calm mono meta label. Gentle linear
 * shimmer slides left-to-right across all blocks. No spinner.
 * No bouncy animation.
 * ============================================================ */

.page-loading {
  min-height: calc(100vh - 56px);
  padding: 28px 32px 40px;
  background: var(--bg-warm);
  display: flex;
  flex-direction: column;
  font-size: 0;
}

/* hero shimmer · ::before is painted directly so it shows up the
   instant the router mounts the loader, before any child appends */
.page-loading::before {
  content: '';
  display: block;
  height: 168px;
  border-radius: var(--radius-xl, 16px);
  border: 1px solid var(--status-done-bd);
  margin-bottom: 22px;
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(99, 91, 255, 0.10), transparent 65%),
    linear-gradient(90deg,
      var(--bg-tint) 0%,
      var(--bg-soft) 50%,
      var(--bg-tint) 100%);
  background-size: 100% 100%, 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}

/* KPI row · 4 cards across, 14px gap, calm card-shape mirrors
   the dashboard hero KPI strip so layout shift is invisible */
.page-loading__kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

.page-loading__kpi-card {
  height: 112px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  position: relative;
  overflow: hidden;
}

/* three internal lines per KPI card · sm label, xl number, sm sub */
.page-loading__kpi-card::before,
.page-loading__kpi-card::after {
  content: '';
  position: absolute;
  left: 22px;
  border-radius: 99px;
  background:
    linear-gradient(90deg,
      var(--bg-tint) 0%,
      var(--bg-soft) 50%,
      var(--bg-tint) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}

.page-loading__kpi-card::before {
  top: 20px;
  height: 10px;
  width: 60%;
}

.page-loading__kpi-card::after {
  top: 42px;
  height: 36px;
  width: 70%;
  border-radius: 12px;
}

/* row shape · matches dashboard list rhythm
   (40px avatar | flex middle | three 60px right-aligned chips) */
.page-loading__row {
  height: 72px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
}

/* 40px circular avatar shimmer on the left */
.page-loading__row::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    linear-gradient(90deg,
      var(--bg-tint) 0%,
      var(--bg-soft) 50%,
      var(--bg-tint) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}

/* primary text line to the right of the avatar */
.page-loading__row::after {
  content: '';
  position: absolute;
  top: 24px;
  left: 76px;
  width: 220px;
  height: 14px;
  border-radius: 99px;
  background:
    linear-gradient(90deg,
      var(--bg-tint) 0%,
      var(--bg-soft) 50%,
      var(--bg-tint) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}

/* slight width variance so the 4 list rows don't feel cloned ·
   note: kpi-row is child 1, then 4 rows are children 2-5 */
.page-loading__row:nth-child(3)::after { width: 180px; }
.page-loading__row:nth-child(4)::after { width: 240px; }
.page-loading__row:nth-child(5)::after { width: 200px; }

.page-loading__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 14px;
  letter-spacing: 0.04em;
}

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

/* ============================================================
 * .sys-state-empty · generic empty-state component
 * Pixel parity vs design-mockups/11-system-states.html STATE 02.
 * Scoped overrides on top of the .sys-state baseline in
 * frontend/styles/02-primitives.css (which we do not touch).
 *
 * Layout: centered column on a soft purple radial wash. A 120px
 * surface medallion sits above an eyebrow → 28px headline →
 * gradient accent line → muted body → two-button action row
 * (ghost secondary + gradient hero primary).
 * ============================================================ */

.sys-state.sys-state-empty {
  min-height: calc(100vh - 56px);
  padding: 64px 32px 72px;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(99, 91, 255, 0.06), transparent 70%),
    var(--bg-warm);
}

.sys-state-empty .sys-state-inner {
  max-width: 540px;
  gap: 0;
}

/* 120x120 medallion · surface tile + faint gradient halo behind icon */
.sys-state-empty .sys-state-icon-tile {
  width: 120px;
  height: 120px;
  border-radius: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 28px;
  box-shadow:
    0 16px 40px -10px rgba(99, 91, 255, 0.20),
    var(--shadow-sm, 0 2px 5px -1px rgba(50, 50, 93, 0.08));
}

.sys-state-empty .sys-state-icon-halo {
  position: absolute;
  inset: -2px;
  border-radius: 32px;
  background: var(--grad);
  opacity: 0.18;
  filter: blur(20px);
  pointer-events: none;
}

.sys-state-empty .sys-state-icon {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  color: var(--primary);
}

/* eyebrow · optional mono uppercase tag above the headline */
.sys-state-empty .sys-state-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}

/* big aspirational headline */
.sys-state-empty .sys-state-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.020em;
  line-height: 1.2;
  text-align: center;
  max-width: 520px;
  margin: 0 0 8px;
  color: var(--text);
}

/* gradient accent line (mockup: "Wide-open day ahead.") */
.sys-state-empty .sys-state-accent {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.020em;
  line-height: 1.2;
  text-align: center;
  max-width: 520px;
  margin: 0 0 12px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* supporting body · 480px column, generous leading */
.sys-state-empty .sys-state-sub {
  font-size: 15px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.55;
  max-width: 480px;
  margin: 0 0 28px;
}

/* CTA row · ghost secondary + gradient hero primary */
.sys-state-empty .sys-state-actions {
  display: flex;
  gap: 12px;
  margin-top: 0;
  flex-wrap: wrap;
  justify-content: center;
}

/* hero primary · matches mockup .btn-hero (padding, glow, weight) */
.sys-state-empty .sys-state-actions .btn-hero {
  padding: 16px 28px;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.008em;
  border-radius: 12px;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 10px 28px -8px rgba(99, 91, 255, 0.55),
    0 3px 8px -3px rgba(99, 91, 255, 0.40);
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

/* lift + brighten on hover · never goes white */
.sys-state-empty .sys-state-actions .btn-hero:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  color: #fff;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 14px 34px -8px rgba(99, 91, 255, 0.62),
    0 4px 10px -3px rgba(99, 91, 255, 0.45);
}

.sys-state-empty .sys-state-actions .btn-hero:active {
  transform: translateY(0);
  filter: brightness(1.02);
}

/* ghost secondary · btn-lg sizing parity */
.sys-state-empty .sys-state-actions .btn-lg {
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 550;
  border-radius: var(--radius, 8px);
}

/* ===== pages/brand-missions/brand-missions.css ===== */
/* ============================================================
 * APEX SALES OS · BRAND MISSIONS (PHASE 5 / 7)
 * Owner: feat/journey-phase5-lock
 *
 * Selectors namespaced with .page-bm-* so this file is safe to
 * load globally alongside the other page-local stylesheets in
 * frontend/index.html. Uses only design tokens from 00-tokens.css.
 *
 * Five missions stacked on the hub (Facebook, TrustPilot,
 * Testimonial, Invites, Claim) then a celebration handoff to the
 * Master Class. Zero red. Zero emoji. No em or en dashes.
 * Fits 1440x900 viewport without scroll on every page.
 * ============================================================ */

/* ---------- Shared layout ---------- */
.page-bm-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 24px 24px;
  /* Bound the wrap so long mission lists + claim forms scroll internally
   * rather than letting the page viewport overflow at 1440x900. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--text-faint) transparent;
}
.page-bm-wrap::-webkit-scrollbar { width: 8px; }
.page-bm-wrap::-webkit-scrollbar-thumb {
  background: var(--text-faint);
  border-radius: 4px;
}
.page-bm-wrap::-webkit-scrollbar-track { background: transparent; }

.page-bm-hero {
  text-align: center;
  padding: 28px 24px 32px;
}
.page-bm-hero h1 {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
.page-bm-hero p {
  margin: 0 auto;
  max-width: 540px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}
.page-bm-hero .page-bm-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 14px;
}

/* ---------- Hub: live progress meter (X of 5 complete) ----------
 * Kinetic cockpit DNA: a JBM-mono count chip + a thin progress rail that
 * fills toward the floor unlock. Matches the mockup's "X of 5 complete"
 * indicator. Purple only; the rail uses diagonal-friendly tokens, never red. */
.page-bm-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 540px;
  margin: 4px auto 0;
}
.page-bm-progress-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 13px;
}
.page-bm-progress-chip .page-bm-progress-count {
  color: var(--text);
}
.page-bm-progress-chip.lit {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}
.page-bm-progress-chip.lit .page-bm-progress-count { color: #fff; }
.page-bm-progress-rail {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  overflow: hidden;
}
.page-bm-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), #8b86ff);
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Hub: stacked mission cards ---------- */
.page-bm-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 22px;
}
.page-bm-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.page-bm-card:hover {
  border-color: var(--border-strong);
  background: var(--hover);
  transform: translateY(-1px);
}
.page-bm-card .page-bm-card-num {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 15px;
}
.page-bm-card .page-bm-card-body h3 {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
}
.page-bm-card .page-bm-card-body p {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
}
.page-bm-card.done {
  background: var(--status-done-bg);
  border-color: var(--status-done-bd);
}
.page-bm-card.done .page-bm-card-num {
  background: var(--status-done-bg);
  color: var(--status-done-fg);
}

/* ---------- Status pills ---------- */
.page-bm-pill {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--status-notstarted-bd);
  background: var(--status-notstarted-bg);
  color: var(--status-notstarted-fg);
}
.page-bm-pill.in-progress {
  background: var(--status-working-bg);
  color: var(--status-working-fg);
  border-color: var(--status-working-bd);
}
.page-bm-pill.done {
  background: var(--status-done-bg);
  color: var(--status-done-fg);
  border-color: var(--status-done-bd);
}

/* ---------- Rewards strip ---------- */
.page-bm-rewards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0 22px;
}
.page-bm-reward {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  text-align: center;
}
.page-bm-reward.lit {
  background: var(--primary-soft);
  border-color: var(--status-done-bd);
}
.page-bm-reward h4 {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.page-bm-reward p {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* ---------- Mission centered card ---------- */
.page-bm-mission {
  max-width: 640px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px 36px 32px;
  box-shadow: var(--shadow-md);
}
.page-bm-mission-mark {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--grad);
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
}
.page-bm-mission h2 {
  margin: 0 0 6px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.page-bm-mission p.lead {
  margin: 0 auto 22px;
  text-align: center;
  max-width: 460px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
}
.page-bm-mission .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
}
.page-bm-mission label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.page-bm-mission input[type="text"],
.page-bm-mission input[type="email"],
.page-bm-mission input[type="tel"],
.page-bm-mission input[type="url"] {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  transition: border-color var(--t), background var(--t);
}
.page-bm-mission input:focus {
  outline: none;
  border-color: var(--border-focus);
  background: var(--surface);
}
.page-bm-mission .actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.page-bm-mission .actions .grow { flex: 1; }

.page-bm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.page-bm-btn:hover {
  background: var(--hover);
  border-color: var(--border-strong);
}
.page-bm-btn.primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.page-bm-btn.primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
.page-bm-btn.lg { padding: 13px 22px; font-size: 14px; }
.page-bm-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- Mission 3: testimonial recorder ---------- */
.page-bm-record-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0a0e1a;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 8px 0 18px;
  border: 1px solid var(--border);
}
.page-bm-record-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0a0e1a;
}
.page-bm-record-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-faint);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}
.page-bm-record-timer {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(10,14,26,0.72);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.08em;
}
.page-bm-record-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--primary);
  margin-right: 6px;
  vertical-align: middle;
  animation: page-bm-pulse-dot 1.4s ease-in-out infinite;
}
@keyframes page-bm-pulse-dot {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

.page-bm-prompts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0 4px;
}
.page-bm-prompt {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
}
.page-bm-prompt strong {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 4px;
}

/* ---------- Mission 4: invite slots ---------- */
.page-bm-invites {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0 12px;
}
.page-bm-invite {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.page-bm-invite .full { grid-column: 1 / -1; }
.page-bm-invite .row {
  display: flex;
  gap: 8px;
  align-items: center;
  grid-column: 1 / -1;
}
.page-bm-invite .row .grow { flex: 1; }
.page-bm-invite .share-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-bm-invite .status {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.page-bm-tracking {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 6px 0 12px;
  padding: 12px 14px;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.page-bm-tracking strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
}
.page-bm-tracking span {
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.page-bm-tracking-note {
  margin: -6px 0 12px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ---------- Mission 5: unlock cards ---------- */
.page-bm-unlocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}
.page-bm-unlock {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 22px 22px 20px;
  text-align: center;
}
.page-bm-unlock h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
}
.page-bm-unlock p {
  margin: 0 0 16px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
}
.page-bm-unlock.activated {
  background: var(--primary-soft);
  border-color: var(--status-done-bd);
}
.page-bm-sparkle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--t);
}
.page-bm-sparkle::before,
.page-bm-sparkle::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.42) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: page-bm-sparkle 2.4s ease-in-out infinite;
}
.page-bm-sparkle::after {
  animation-delay: 1.2s;
}
@keyframes page-bm-sparkle {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
.page-bm-sparkle:hover { transform: translateY(-1px); }
.page-bm-sparkle[disabled] {
  background: var(--status-done-bg);
  color: var(--status-done-fg);
  cursor: default;
  transform: none;
}
.page-bm-sparkle[disabled]::before,
.page-bm-sparkle[disabled]::after { display: none; }

/* ---------- Completion celebration ---------- */
.page-bm-celebrate {
  text-align: center;
  padding: 32px 24px 12px;
}
.page-bm-celebrate h1 {
  margin: 0 0 8px;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.025em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-bm-celebrate p.lead {
  margin: 0 auto 22px;
  max-width: 560px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.page-bm-checks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-width: 720px;
  margin: 0 auto 18px;
}
.page-bm-check {
  background: var(--status-done-bg);
  border: 1px solid var(--status-done-bd);
  border-radius: var(--radius);
  padding: 14px 8px 10px;
  text-align: center;
}
.page-bm-check .num {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}
.page-bm-check .title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--status-done-fg);
}

/* ---------- Floating Apex widget ---------- */
.page-bm-floater {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--grad);
  box-shadow: var(--shadow-lg);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #fff;
  z-index: 100;
  transition: transform var(--t);
  animation: page-bm-float-pulse 3s ease-in-out infinite;
}
.page-bm-floater:hover { transform: translateY(-2px) scale(1.03); }
.page-bm-floater span {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
@keyframes page-bm-float-pulse {
  0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 var(--primary-soft); }
  50%      { box-shadow: var(--shadow-lg), 0 0 0 10px transparent; }
}

/* ===== pages/hierarchy/hierarchy.css ===== */
.hierarchy-screen{--bg:#fdfcfb;--surface:#ffffff;--border:#e6e8ec;--text:#1a1f36;--muted:#697386;--text-faint:#8792a2;--primary:#635bff;--grad:linear-gradient(135deg,#7a73ff,#635bff 35%,#4f46e5 65%,#2563eb);--mono:'JetBrains Mono',ui-monospace,monospace;--sans:'Inter Tight',-apple-system,BlinkMacSystemFont,sans-serif;--c-green:#00d26a;--c-blue:#2f80ff;--c-purple:#6e54ff;--c-yellow:#ffc400;--c-red:#8792a2;--beam:0.12;--beam-burst:0;--grit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.13'/%3E%3C/svg%3E")}
.hierarchy-screen *{box-sizing:border-box}
/* The board lives inside #app-root (flex:1) BELOW the real app topbar. It fills
 * that content area edge to edge and flows in normal document order, rather than
 * a position:fixed island floating over the whole screen. */
.hierarchy-screen{height:100%;width:100%;display:flex;flex-direction:column;min-height:0;position:relative}
.hierarchy-screen{margin:0;overflow:hidden;background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* MASTER SHELL (2026-07-25): under the QA master shell this class sits on the
 * shell's content host (.rsx-tool.ms-content) instead of on #app-root. That
 * host declares overflow-y:auto as the generic page scroller, and because the
 * shell injects its <style> into <head> at runtime it lands AFTER bundle.css
 * with equal specificity — so it would win and hand the org chart a second,
 * outer scrollbar. The board is no-page-scroll by design (it fits its card and
 * aligns by measurement), so reassert it with a compound selector that
 * outranks the single-class shell rule. Legacy path is unaffected: #app-root
 * never carries .rsx-tool. */
.hierarchy-screen.rsx-tool,.hierarchy-screen.ms-content{overflow:hidden}
/* SHELL-CONSISTENCY PASS (2026-07-07): the board renders INSIDE the universal
 * page shell (bordered card on warm #fdfcfb), matching every other screen. The
 * ambient blob layer is a fixed backdrop BEHIND the shell so the purple drift
 * shows through the warm gutter around the card, not edge-to-edge over content. */
.hierarchy-screen .hierarchy-backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#fdfcfb}
/* Page shell: warm gutter around the card. No global topbar on this surface
 * (Ben, 2026-07-08) — the card floats alone in the viewport like the sign-in /
 * onboarding screens, so the gutter is wider and the app reads as one smaller
 * centered instrument. */
.hierarchy-screen .page-shell.hierarchy-shell{position:relative;z-index:1;flex:1 1 auto;min-height:0;display:flex;padding:26px 34px 34px;background:transparent}
.hierarchy-screen .page-card.hierarchy-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl,20px);box-shadow:0 18px 48px -28px rgba(50,38,130,.34),0 1px 2px rgba(20,20,50,.04)}
/* ---- card header bar (.hbar): brand + nav + identity + logout ----
 * The global topbar's contents moved here; mirrors the Resume Blitz wbar so
 * the two Recruiting OS screens read as one instrument. */
.hierarchy-screen .hbar{flex:none;position:relative;z-index:30;background:rgba(253,252,251,.82);-webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid var(--border)}
.hierarchy-screen .hbar-in{padding:0 30px;height:60px;display:flex;align-items:center;gap:16px}
.hierarchy-screen .hbrand{display:flex;align-items:center;gap:11px;flex:none}
.hierarchy-screen .hbrand .orb-sm{width:30px;height:30px;border-radius:9px}
.hierarchy-screen .hbrand .ht{font-weight:700;font-size:14px;letter-spacing:-.01em;line-height:1.1;color:var(--text);font-family:var(--sans)}
.hierarchy-screen .hbrand .ht small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);font-weight:500;margin-top:2px}
.hierarchy-screen .htabs{display:flex;align-items:center;gap:4px;margin-left:18px;padding-left:18px;border-left:1px solid var(--border)}
.hierarchy-screen .htab{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:-.01em;cursor:pointer;transition:.15s}
.hierarchy-screen .htab:hover{color:var(--text);background:rgba(20,20,50,.045)}
.hierarchy-screen .htab.on{color:var(--primary);background:#f7f6ff;border-color:#d6d2ff;cursor:default}
.hierarchy-screen .hright{margin-left:auto;display:flex;align-items:center;gap:14px}
.hierarchy-screen .hwho{display:flex;align-items:center;gap:10px;padding-left:14px;border-left:1px solid var(--border)}
.hierarchy-screen .hwho-av{width:36px;height:36px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-weight:700;font-size:12.5px;box-shadow:0 0 0 3px #fff,0 5px 12px -5px rgba(50,38,130,.55);font-family:var(--sans)}
.hierarchy-screen .hwho-txt{display:flex;flex-direction:column;line-height:1.18}
.hierarchy-screen .hwho-n{font-weight:700;font-size:13.5px;letter-spacing:-.01em;color:var(--text);font-family:var(--sans)}
.hierarchy-screen .hwho-r{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.hierarchy-screen .hout{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--muted);font-family:var(--sans);font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.hierarchy-screen .hout:hover{color:var(--text);border-color:var(--text-faint)}
@media (max-width:760px){
.hierarchy-screen .page-shell.hierarchy-shell{padding:10px}
.hierarchy-screen .hbar-in{padding:0 14px;height:54px;gap:10px}
.hierarchy-screen .htabs{margin-left:8px;padding-left:8px}
.hierarchy-screen .htab span{display:none}
.hierarchy-screen .htab{padding:8px 10px}
.hierarchy-screen .hwho-txt{display:none}
.hierarchy-screen .hout span{display:none}
}
.hierarchy-screen .viewport{position:relative;flex:1 1 auto;width:100%;min-height:0;display:flex;align-items:stretch;justify-content:stretch;overflow:hidden;background:transparent}
.hierarchy-screen .ambient{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hierarchy-screen .bgfx{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hierarchy-screen .blob{position:absolute;border-radius:50%;will-change:transform;mix-blend-mode:multiply}
.hierarchy-screen .blob1{width:720px;height:720px;left:-180px;top:-220px;background:radial-gradient(circle,rgba(99,91,255,.20),transparent 62%);animation:drift1 28s ease-in-out infinite}
.hierarchy-screen .blob2{width:600px;height:600px;right:-160px;bottom:-200px;background:radial-gradient(circle,rgba(124,116,255,.18),transparent 62%);animation:drift2 34s ease-in-out infinite}
.hierarchy-screen .blob3{width:460px;height:460px;left:46%;top:2%;background:radial-gradient(circle,rgba(86,96,232,.12),transparent 64%);animation:drift3 40s ease-in-out infinite}
.hierarchy-screen .blob4{width:380px;height:380px;left:8%;bottom:-120px;background:radial-gradient(circle,rgba(122,115,255,.12),transparent 64%);animation:drift4 31s ease-in-out infinite}
/* Full-bleed board: fills the app content area left to right and top to bottom.
 * No fixed 1440x860 + transform:scale island, no floating card shadow, no outer
 * radius. The purple-tinted gradient now spans the full content width with no
 * dead gutters. box-sizing:border-box + max-width:100% guarantee no horizontal
 * overflow at any width from 1280 to 1920. */
.hierarchy-screen .board{width:100%;height:100%;max-width:100%;flex:1 1 auto;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;color:var(--text);font-family:var(--sans);position:relative;z-index:1;background:transparent;overflow:hidden}
.hierarchy-screen .mono{font-family:var(--mono)}
.hierarchy-screen .pri{color:var(--primary)}
/* The board's own internal top bar (.topbar / .brand* / .bar-right / .tag /
 * .install) was removed on 2026-07-06 so the app's real topbar is the only one.
 * Those style rules were deleted with it to keep this file free of dead CSS. */
.hierarchy-screen .body{flex:1;display:flex;min-height:0;padding:26px 40px 30px;position:relative}
.hierarchy-screen .spine{width:402px;flex:none;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:0;padding-right:24px;position:relative}
.hierarchy-screen .spine-inner{display:flex;flex-direction:column;align-items:stretch;width:100%;position:relative;transition:top .45s cubic-bezier(.2,.7,.2,1)}
.hierarchy-screen .lineage{display:flex;flex-direction:column;align-items:stretch;min-height:120px}
.hierarchy-screen .apex{position:relative;height:120px;display:flex;align-items:center;justify-content:center;flex:none}
.hierarchy-screen .beams{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0}
.hierarchy-screen .rays{position:absolute;width:420px;height:420px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(99,91,255,0) 0deg 5deg,rgba(99,91,255,.11) 5deg 6.3deg,rgba(99,91,255,0) 6.3deg 11deg);-webkit-mask:radial-gradient(circle,transparent 12%,#000 27%,#000 44%,transparent 70%);mask:radial-gradient(circle,transparent 12%,#000 27%,#000 44%,transparent 70%);animation:spin 72s linear infinite;opacity:calc(var(--beam) * .85)}
.hierarchy-screen .rays.r2{width:296px;height:296px;animation:rspin 96s linear infinite;opacity:calc(var(--beam) * .6)}
.hierarchy-screen .glow{position:absolute;width:224px;height:224px;border-radius:50%;background:radial-gradient(circle,rgba(99,91,255,.28),rgba(99,91,255,.09) 45%,transparent 70%);animation:glowb 6.5s ease-in-out infinite}
.hierarchy-screen .burst{position:absolute;width:234px;height:234px;border-radius:50%;background:radial-gradient(circle,rgba(122,115,255,.5),rgba(99,91,255,.12) 45%,transparent 70%);opacity:calc(var(--beam-burst) * .8);transition:opacity .42s ease-out;pointer-events:none}
.hierarchy-screen .beam{position:absolute;top:50%;left:50%;width:2px;height:230px;background:linear-gradient(to bottom,transparent,rgba(122,115,255,.5) 46%,rgba(99,91,255,0) 54%,transparent);transform-origin:center;-webkit-mask:linear-gradient(to bottom,transparent,#000 28%,#000 50%,transparent 72%);mask:linear-gradient(to bottom,transparent,#000 28%,#000 50%,transparent 72%);animation:beamf 5s ease-in-out infinite;opacity:calc(var(--beam) * .38)}
.hierarchy-screen .beam.b1{transform:translate(-50%,-50%) rotate(26deg);animation-delay:0s}
.hierarchy-screen .beam.b2{transform:translate(-50%,-50%) rotate(82deg);animation-delay:1.1s}
.hierarchy-screen .beam.b3{transform:translate(-50%,-50%) rotate(140deg);animation-delay:.6s}
.hierarchy-screen .orb-rot{position:relative;z-index:2;will-change:transform}
.hierarchy-screen .orb-spin, .hierarchy-screen .orb-breath, .hierarchy-screen .orb-react{display:block}
.hierarchy-screen .orb-react{will-change:transform}
.hierarchy-screen .orb-img{width:96px;height:96px;border-radius:21px;object-fit:contain;display:block;background:#0c1020;box-shadow:0 9px 30px -14px rgba(30,22,80,.5),0 0 18px -4px rgba(30,22,80,.28),0 0 0 1px rgba(99,91,255,.12)}
.hierarchy-screen .mode-breathing .orb-breath{animation:breath 6.5s ease-in-out infinite}
.hierarchy-screen .mode-spin .orb-spin{animation:spin 80s linear infinite}
.hierarchy-screen .cx{width:2px;height:16px;background:linear-gradient(to bottom,rgba(99,91,255,.5),rgba(99,91,255,.14));margin:0 auto;border-radius:2px;flex:none}
.hierarchy-screen .card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:12px 16px 12px 12px;box-shadow:0 14px 36px -24px rgba(50,38,130,.4),0 1px 2px rgba(20,20,50,.04);font:inherit;color:inherit}
.hierarchy-screen button.card{cursor:pointer;transition:transform 200ms ease-out,box-shadow 200ms ease-out,border-color 200ms ease-out}
.hierarchy-screen .card.cur{border-color:#cfcaff;box-shadow:0 18px 42px -22px rgba(80,60,200,.5),0 0 0 1px rgba(99,91,255,.2)}
.hierarchy-screen .card-body{flex:1;min-width:0}
.hierarchy-screen .card-eye{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}
.hierarchy-screen .card-name{font-weight:700;font-size:19px;letter-spacing:-.014em;margin-top:3px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hierarchy-screen .card-name.open{color:var(--text-faint);font-weight:500}
.hierarchy-screen .card-desc{font-family:var(--mono);font-size:11px;color:var(--text-faint);margin-top:4px;line-height:1.5}
.hierarchy-screen .av{width:56px;height:56px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#efeefe,#fff);box-shadow:0 0 0 1px var(--border),0 0 0 4px #fff,0 14px 30px -10px rgba(50,38,130,.55);font-family:var(--sans);font-weight:700}
.hierarchy-screen .av img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.hierarchy-screen .av.init{background:var(--grad);color:#fff;font-size:17px;letter-spacing:.01em;box-shadow:0 0 0 4px #fff,0 14px 30px -10px rgba(80,60,200,.6)}
.hierarchy-screen .av.open{background:#fbfbfd;border:1.5px dashed #c9cdd6;color:var(--text-faint);box-shadow:0 0 0 4px #fff}
.hierarchy-screen .plus{font-size:15px;font-weight:300;color:#aab1be;line-height:1}
.hierarchy-screen .av.abbr{background:#f0effe;color:var(--primary);font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.03em;box-shadow:0 0 0 1px #e3e1fb,0 0 0 4px #fff}
.hierarchy-screen .av.sm{width:40px;height:40px;font-size:13px;box-shadow:0 0 0 3px #fff,0 9px 20px -6px rgba(50,38,130,.52)}
.hierarchy-screen .av.sm.open{box-shadow:0 0 0 3px #fff}
.hierarchy-screen .kidzone{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0;padding-left:8px}
.hierarchy-screen .kid-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px;flex:none}
.hierarchy-screen .kid-title{font-weight:700;font-size:30px;letter-spacing:-.022em;line-height:1.02}
.hierarchy-screen .kid-sub{font-size:14px;color:var(--muted);margin-top:9px;max-width:62ch;line-height:1.5}
.hierarchy-screen .back{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--text-faint);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:9px 14px;cursor:pointer;white-space:nowrap;transition:color 160ms ease-out,border-color 160ms ease-out,background-color 160ms ease-out}
.hierarchy-screen .kid-actions{position:absolute;top:90px;right:40px;z-index:6;display:flex;gap:10px;align-items:center} /* +88px off the bar (Ben, 2026-07-10: 'move down at least seventy five pixels') */
.hierarchy-screen .pulse{display:grid;grid-template-columns:repeat(5,1fr)}
.hierarchy-screen .pulsebar{padding:16px 34px 17px;position:relative;overflow:hidden;border-bottom:1px solid rgba(0,0,0,.5);background:var(--grit),#0c0d11;box-shadow:inset 0 -16px 28px -18px rgba(0,0,0,.68),0 8px 16px -10px rgba(12,12,22,.4);flex:none}
.hierarchy-screen .stat{padding-left:24px;border-left:1px solid rgba(255,255,255,.09)}
.hierarchy-screen .stat.lead{padding-left:0;border-left:none}
.hierarchy-screen .stat-l{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);text-shadow:0 1px 2px rgba(0,0,0,.5)}
.hierarchy-screen .stat-row{display:flex;align-items:baseline;gap:8px;margin-top:7px}
.hierarchy-screen .stat-v{font-weight:800;font-size:20px;letter-spacing:-.022em;color:#fff;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.55);font-variant-numeric:tabular-nums}
.hierarchy-screen .stat-v .pre{font-weight:600;font-size:.56em;color:rgba(255,255,255,.5);margin-right:1px}
.hierarchy-screen .stat-v .suf{font-weight:600;font-size:.56em;color:rgba(255,255,255,.5);margin-left:2px}
.hierarchy-screen .delta{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.5)}
/* SAFARI COMPAT (2026-07-14): oklch() requires Safari 15.4+ (Mar 2022).
 * Hex fallback declared FIRST — CSS keeps the last declaration it
 * understands, so pre-15.4 Safari uses the hex and 15.4+ uses the oklch
 * (identical hue, just a wider gamut). Fallback matches the repo's
 * --c-green / --c-red design tokens above (zero-red rule: "down" uses the
 * same muted grey as --c-red, never an actual red). */
.hierarchy-screen .delta.up{color:#00d26a;color:oklch(.82 .15 155)}
.hierarchy-screen .delta.down{color:#8792a2;color:oklch(.77 .16 33)}
.hierarchy-screen .stat-d{font-family:var(--mono);font-size:9px;letter-spacing:.02em;color:rgba(255,255,255,.42);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hierarchy-screen .st{width:10px;height:10px;border-radius:50%;flex:none;opacity:var(--blink,1)}
/* SAFARI COMPAT (2026-07-14): color-mix() requires Safari 16.2+ (Dec 2022).
 * Because it appears inside a multi-layer box-shadow value, an
 * unrecognized color-mix() invalidates the ENTIRE box-shadow declaration
 * (not just one layer) per CSS's shorthand/multi-value parsing rules — so
 * a plain-rgba fallback box-shadow is declared FIRST (matching the current
 * --c-* token hex values) and the color-mix version follows; browsers keep
 * whichever declaration is the last one they understand. */
.hierarchy-screen .st.green{background:var(--c-green);box-shadow:0 0 0 3px rgba(0,210,106,.26),0 0 8px rgba(0,210,106,.70);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-green) 26%,transparent),0 0 8px color-mix(in srgb,var(--c-green) 70%,transparent)}
.hierarchy-screen .st.blue{background:var(--c-blue);box-shadow:0 0 0 3px rgba(47,128,255,.26),0 0 8px rgba(47,128,255,.70);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-blue) 26%,transparent),0 0 8px color-mix(in srgb,var(--c-blue) 70%,transparent)}
.hierarchy-screen .st.purple{background:var(--c-purple);box-shadow:0 0 0 3px rgba(110,84,255,.26),0 0 8px rgba(110,84,255,.70);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-purple) 26%,transparent),0 0 8px color-mix(in srgb,var(--c-purple) 70%,transparent)}
.hierarchy-screen .st.yellow{background:var(--c-yellow);box-shadow:0 0 0 3px rgba(255,196,0,.28),0 0 8px rgba(255,196,0,.72);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-yellow) 28%,transparent),0 0 8px color-mix(in srgb,var(--c-yellow) 72%,transparent)}
.hierarchy-screen .st.red{background:var(--c-red);box-shadow:0 0 0 3px rgba(135,146,162,.30),0 0 9px rgba(135,146,162,.78);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-red) 30%,transparent),0 0 9px color-mix(in srgb,var(--c-red) 78%,transparent)}
.hierarchy-screen .st.idle{background:transparent;border:1.5px dashed var(--text-faint);opacity:.7;transform:none}
.hierarchy-screen .row .st{margin-left:auto}
.hierarchy-screen .card .st{margin-left:auto;align-self:center}
.hierarchy-screen .life{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);border:1px solid var(--border);border-radius:999px;padding:4px 9px;background:#fcfcfe;white-space:nowrap}
.hierarchy-screen .banner .life{margin-left:auto}
.hierarchy-screen .av.photo{background:#fff}
.hierarchy-screen .modal-bg{position:absolute;inset:0;background:rgba(20,18,40,.3);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:20}
.hierarchy-screen .modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:21;width:430px;max-width:88%;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:26px;box-shadow:0 40px 100px -40px rgba(50,38,130,.6)}
.hierarchy-screen .modal-eye{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.hierarchy-screen .modal-h{font-weight:700;font-size:22px;letter-spacing:-.015em;margin-top:5px}
.hierarchy-screen .modal-row{display:flex;align-items:center;gap:16px;margin:20px 0}
.hierarchy-screen .modal-av{width:64px;height:64px;font-size:9px;color:var(--text-faint);background:#f0effe;text-transform:uppercase;letter-spacing:.1em}
.hierarchy-screen .upload{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--primary);background:#f3f2ff;border:1px solid #e6e3ff;border-radius:10px;padding:10px 14px;cursor:pointer}
.hierarchy-screen .field{width:100%;font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--border);border-radius:11px;background:#fcfcfe;color:var(--text);outline:none}
.hierarchy-screen .modal-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:22px}
.hierarchy-screen .foot-r{display:flex;gap:10px}
.hierarchy-screen .btn-skip{font:inherit;font-size:13px;color:var(--text-faint);background:none;border:none;padding:10px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.hierarchy-screen .btn-ghost{font:inherit;font-size:13px;color:var(--muted);background:none;border:1px solid var(--border);border-radius:10px;padding:10px 16px;cursor:pointer}
.hierarchy-screen .btn-go{font:inherit;font-size:13px;color:#fff;background:var(--grad);border:none;border-radius:10px;padding:10px 18px;cursor:pointer;box-shadow:0 10px 22px -10px rgba(80,60,200,.6)}
.hierarchy-screen .kid-body{flex:none;display:flex;align-items:center;min-height:0}
.hierarchy-screen .kid-inner{display:flex;align-items:stretch;width:100%;max-height:100%}
.hierarchy-screen .brk{width:30px;flex:none;position:relative}
.hierarchy-screen .brk-bar{position:absolute;right:7px;top:4px;bottom:4px;width:2px;background:linear-gradient(to bottom,rgba(99,91,255,.1),rgba(99,91,255,.5),rgba(99,91,255,.1));border-radius:2px}
.hierarchy-screen .brk-stub{position:absolute;right:7px;top:50%;width:22px;height:2px;margin-top:-1px;background:linear-gradient(to left,rgba(99,91,255,.5),rgba(99,91,255,.12))}
.hierarchy-screen .kids{flex:1;min-width:0}
.hierarchy-screen .tiers{display:flex;flex-direction:column}
.hierarchy-screen .tier{display:flex;align-items:center;gap:15px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:15px;padding:12px 16px;box-shadow:0 1px 2px rgba(20,20,50,.03);font:inherit;color:inherit}
.hierarchy-screen .tier.act{cursor:pointer;transition:transform 200ms ease-out,box-shadow 200ms ease-out,border-color 200ms ease-out}
.hierarchy-screen .tier-body{flex:1;min-width:0}
.hierarchy-screen .tier-eye{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.hierarchy-screen .tier-name{font-weight:700;font-size:16px;letter-spacing:-.012em;margin-top:3px}
.hierarchy-screen .tier-desc{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5;max-width:62ch}
.hierarchy-screen .tier-note{font-family:var(--mono);font-size:10px;color:var(--text-faint);margin-top:6px}
.hierarchy-screen .chip{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--primary);background:#f3f2ff;border:1px solid #e6e3ff;border-radius:999px;padding:7px 12px;flex:none;white-space:nowrap;align-self:center}
.hierarchy-screen .chip.cta{color:#fff;background:var(--grad);border-color:transparent;box-shadow:0 8px 18px -8px rgba(80,60,200,.6)}
/* EVEN REGION GRID (Ben screenshot fix, 2026-07-10): real CSS grid with
 * equal-width column tracks instead of flex-wrap with a shrinkable basis.
 * flex:0 1 222px let tiles shrink UNEVENLY and centered each wrapped line
 * independently, so the 20-region board rendered ragged - tiles misaligned,
 * rows not lining up into columns. Grid tracks are identical by definition
 * (minmax(200px,222px), auto-fill), rows always align to the same tracks,
 * gaps stay consistent at every viewport width. */
.hierarchy-screen .kgrid{display:grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap:10px;justify-content:center;align-content:center;width:100%}
.hierarchy-screen .kgrid .row{min-width:0;width:100%}
.hierarchy-screen .kgrid.pods{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;height:100%;align-content:center}
.hierarchy-screen .row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:9px 13px;cursor:pointer;font:inherit;color:inherit;box-shadow:0 1px 2px rgba(20,20,50,.03);transition:transform 160ms ease-out,box-shadow 160ms ease-out,border-color 160ms ease-out}
.hierarchy-screen .row.open{border-style:dashed;background:#fbfbfd;box-shadow:none}
.hierarchy-screen .row-id{min-width:0}
.hierarchy-screen .row-eye{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint)}
.hierarchy-screen .row-name{font-weight:600;font-size:14px;letter-spacing:-.01em;color:var(--text);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hierarchy-screen .row.open .row-name{color:var(--text-faint);font-weight:500}
.hierarchy-screen .pod{display:flex;gap:18px;width:100%;align-items:stretch}
.hierarchy-screen .podcol{flex:1;min-width:0;background:#fcfcfe;border:1px solid var(--border);border-radius:16px;padding:15px}
.hierarchy-screen .podcol-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.hierarchy-screen .podcol-t{font-weight:700;font-size:14px;letter-spacing:-.01em}
.hierarchy-screen .podcol-c{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
.hierarchy-screen .podlist{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hierarchy-screen .cell{display:flex;align-items:center;gap:9px;width:100%;text-align:left;font:inherit;color:inherit;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:7px 10px;cursor:pointer;transition:transform 140ms ease-out,border-color 140ms ease-out}
.hierarchy-screen .cell.open{border-style:dashed;background:#fbfbfd;cursor:pointer}
.hierarchy-screen .cell-i{font-family:var(--mono);font-size:10px;color:var(--text-faint);flex:none}
.hierarchy-screen .dot{width:7px;height:7px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 3px rgba(99,91,255,.12);flex:none}
.hierarchy-screen .dot.open{background:transparent;border:1.5px dashed var(--text-faint);box-shadow:none}
.hierarchy-screen .cell-n{font-weight:600;font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.hierarchy-screen .cell-av{width:22px;height:22px;font-size:9px;box-shadow:0 0 0 2px #fff,0 6px 14px -4px rgba(50,38,130,.5)}
.hierarchy-screen .cell.open .cell-av{display:none}
.hierarchy-screen .cell .st{margin-left:auto}
.hierarchy-screen .cell.open .cell-n{color:var(--text-faint);font-weight:500}
.hierarchy-screen .detail{display:flex;flex-direction:column;gap:13px;width:100%}
.hierarchy-screen .banner{display:flex;align-items:center;gap:13px;padding:14px 18px;border-radius:15px;border:1px solid var(--border);background:#fcfcfe}
.hierarchy-screen .banner .st{width:12px;height:12px}
.hierarchy-screen .banner-t{font-weight:700;font-size:16px;letter-spacing:-.01em}
.hierarchy-screen .banner-s{font-family:var(--mono);font-size:11px;color:var(--text-faint);margin-top:3px}
.hierarchy-screen .dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.hierarchy-screen .dcard{background:#fcfcfe;border:1px solid var(--border);border-radius:15px;padding:17px}
.hierarchy-screen .dcard-l{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.hierarchy-screen .dcard-v{font-weight:800;font-size:30px;letter-spacing:-.025em;margin-top:8px;color:var(--text)}
.hierarchy-screen .dcard-s{font-family:var(--mono);font-size:10px;color:var(--text-faint);margin-top:6px}
.hierarchy-screen .meter{height:8px;border-radius:6px;background:#eceef3;overflow:hidden;margin-top:12px}
.hierarchy-screen .meter-f{height:100%;border-radius:6px;background:var(--grad)}
.hierarchy-screen .meter.mini{height:4px;margin-top:8px;background:rgba(255,255,255,.15)}
.hierarchy-screen .sparkwrap{background:#fcfcfe;border:1px solid var(--border);border-radius:15px;padding:16px 18px}
.hierarchy-screen .sparkhead{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.hierarchy-screen .spark{display:block;width:100%;height:48px;margin-top:10px;overflow:visible}
.hierarchy-screen .spark polyline{fill:none;stroke:var(--primary);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.hierarchy-screen .cascade{transform:translateY(12px)}
.hierarchy-screen .revealed .cascade{transform:none;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.hierarchy-screen .dly1{transition-delay:.04s}
.hierarchy-screen .dly2{transition-delay:.12s}
.hierarchy-screen .dly3{transition-delay:.2s}
.hierarchy-screen .drillpanel{animation:viewin .5s cubic-bezier(.2,.7,.2,1)}
@keyframes viewin{from{transform:translateY(12px)}to{transform:none}}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(120px,90px) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-110px,-70px) scale(1.1)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,70px) scale(1.16)}}
@keyframes drift4{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,-60px) scale(1.12)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rspin{to{transform:rotate(-360deg)}}
@keyframes breath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.03)}}
@keyframes glowb{0%,100%{opacity:calc(var(--beam) * .5);transform:scale(1)}50%{opacity:calc(var(--beam) * .82);transform:scale(1.07)}}
@keyframes beamf{0%,100%{opacity:calc(var(--beam) * .22)}50%{opacity:calc(var(--beam) * .5)}}
@property --blink{syntax:'<number>';inherits:true;initial-value:1}
@keyframes blinkAll{0%,100%{--blink:.55}50%{--blink:1}}
@media (prefers-reduced-motion:reduce){
.hierarchy-screen .rays, .hierarchy-screen .rays.r2, .hierarchy-screen .glow, .hierarchy-screen .beam, .hierarchy-screen .orb-breath, .hierarchy-screen .orb-spin, .hierarchy-screen .drillpanel, .hierarchy-screen .viewport, .hierarchy-screen .blob{animation:none!important}
.hierarchy-screen .cascade{transform:none!important}
.hierarchy-screen .st{opacity:1!important;transform:none!important}

}

/* ===== pages/demos/pod-demos.css ===== */
/* ============================================================
 * POD DEMOS — content styles (feat/pod-demos-video, 2026-07-15)
 * Source of truth for the #/demos surface's styling. Extracted from the
 * POD_DEMOS_CSS in-JS constant (pages/demos/pod-demos.js) so it has a real
 * file in the build-bundle-css.sh pipeline instead of only living as a
 * hand-appended block in bundle.css (LAW 0.09 bundle-drift fix,
 * 2026-07-15: a rebuild was silently dropping this styling because the
 * source had no entry in FILES[]).
 *
 * KEEP IN SYNC WITH THE JS: pages/demos/pod-demos.js still carries an
 * identical inline POD_DEMOS_CSS constant that it injects via a <style>
 * tag on mount, as a guaranteed fallback so the surface is styled even if
 * the bundle fetch is ever dropped. If you edit the rules here, mirror the
 * same edit into that constant (and vice versa) so the two never diverge.
 * ============================================================ */
.pd-screen{--pd-primary:#635bff;--pd-grad:linear-gradient(135deg,#7a73ff,#635bff 35%,#4f46e5 65%,#2563eb);--pd-border:#e6e8ec;--pd-surface:#fff;--pd-bg:#fdfcfb;--pd-text:#1a1f36;--pd-muted:#697386;--pd-faint:#8792a2;--pd-mono:'JetBrains Mono',ui-monospace,monospace;--pd-sans:'Inter Tight',-apple-system,BlinkMacSystemFont,sans-serif;display:flex;flex-direction:column;min-height:0;flex:1;background:var(--pd-bg);color:var(--pd-text);font-family:var(--pd-sans);overflow:hidden;border-radius:16px}
.pd-screen *{box-sizing:border-box}
.pd-screen.pd-embedded{position:relative;min-height:0;height:100%;border:1px solid var(--pd-border)}
/* Master-shell mount (#/demos inside the card): identical chromeless layout to
 * the CRM sub-section, minus the border — the master card IS the frame, so a
 * second border would paint a card inside a card. */
.pd-screen.pd-incard{position:relative;min-height:0;height:100%;border:0;border-radius:0}
.pd-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 26px;border-bottom:1px solid var(--pd-border)}
.pd-bar-l{display:flex;align-items:center;gap:13px}
.pd-orb{width:38px;height:38px;border-radius:10px;background:var(--pd-grad);color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 12px -3px rgba(99,91,255,.5)}
.pd-title{font-size:17px;font-weight:700;letter-spacing:-.02em}
.pd-sub{font-size:12px;color:var(--pd-muted);margin-top:2px}
.pd-bar-r{display:flex;align-items:center;gap:10px}
.pd-scope{font-family:var(--pd-mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;color:var(--pd-muted);background:#f0eff5;border:1px solid var(--pd-border);border-radius:6px;padding:6px 10px}
.pd-scope.org{color:var(--pd-primary);background:#f5f4ff;border-color:#d6d2ff}
.pd-refresh{display:inline-flex;align-items:center;gap:6px;font-family:var(--pd-sans);font-size:12px;font-weight:600;color:var(--pd-muted);background:var(--pd-surface);border:1px solid var(--pd-border);border-radius:9px;padding:7px 13px;cursor:pointer;transition:.14s}
.pd-refresh:hover{border-color:#cfcaff;color:var(--pd-primary)}
.pd-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:16px 26px 22px}
.pd-kpirow{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.pd-kpi{background:var(--pd-surface);border:1px solid var(--pd-border);border-radius:12px;padding:12px 14px 11px;min-width:0}
.pd-kpi.hero{background:radial-gradient(60% 130% at 0% 0%,rgba(99,91,255,.07),transparent 65%),var(--pd-surface);border-color:#d6d2ff}
.pd-kpi-label{display:flex;align-items:center;gap:7px;font-family:var(--pd-mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--pd-muted)}
.pd-kpi-ico{width:16px;height:16px;background:#f7f8fa;border:1px solid var(--pd-border);border-radius:3px;display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--pd-muted)}
.pd-kpi.hero .pd-kpi-ico{background:#f5f4ff;border-color:#d6d2ff;color:var(--pd-primary)}
.pd-kpi-val{font-size:22px;font-weight:700;letter-spacing:-.015em;margin-top:8px;line-height:1}
.pd-kpi-val.purple{background:var(--pd-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pd-kpi-sub{font-size:11px;color:var(--pd-muted);margin-top:6px;line-height:1.4}
.pd-list{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column;gap:18px;padding-right:4px}
.pd-daygroup{display:flex;flex-direction:column;gap:8px}
.pd-dayhdr{display:flex;align-items:baseline;justify-content:space-between;padding:0 2px 2px}
.pd-dayhdr>span:first-child{font-size:13px;font-weight:700;letter-spacing:-.01em}
.pd-daycount{font-family:var(--pd-mono);font-size:10px;color:var(--pd-faint);letter-spacing:.04em}
.pd-daycards{display:flex;flex-direction:column;gap:8px}
.pd-demo{display:grid;grid-template-columns:104px 1fr auto;align-items:center;gap:14px;background:var(--pd-surface);border:1px solid var(--pd-border);border-radius:12px;padding:13px 16px;transition:.14s}
.pd-demo:hover{border-color:#cfcaff;box-shadow:0 2px 8px -2px rgba(50,50,93,.1)}
.pd-demo.live{border-color:#c9c4ff;background:radial-gradient(80% 160% at 0% 0%,rgba(99,91,255,.06),transparent 60%),var(--pd-surface)}
.pd-demo.noshow{opacity:.6}
.pd-demo-time{display:flex;flex-direction:column;gap:3px}
.pd-demo-hh{font-family:var(--pd-mono);font-size:13px;font-weight:600;letter-spacing:.02em}
.pd-demo-cd{font-family:var(--pd-mono);font-size:10px;font-weight:500;color:var(--pd-faint);letter-spacing:.03em}
.pd-demo-cd.now{color:var(--pd-primary);font-weight:700}
.pd-demo-cd.past{color:var(--pd-faint)}
.pd-demo-client{font-size:14px;font-weight:600;letter-spacing:-.01em}
.pd-demo-meta{font-size:11.5px;color:var(--pd-muted);margin-top:3px}
.pd-demo-actions{display:flex;align-items:center;gap:8px}
.pd-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--pd-sans);font-size:12px;font-weight:600;color:var(--pd-muted);background:var(--pd-surface);border:1px solid var(--pd-border);border-radius:9px;padding:8px 13px;cursor:pointer;transition:.14s;white-space:nowrap}
.pd-btn:hover{border-color:#cfcaff;color:var(--pd-primary)}
.pd-btn:disabled{opacity:.6;cursor:default}
.pd-btn.primary{color:#fff;background:var(--pd-grad);border-color:transparent;box-shadow:0 3px 10px -3px rgba(99,91,255,.5)}
.pd-btn.primary:hover{filter:brightness(1.05);color:#fff}
.pd-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:60px 20px;color:var(--pd-muted)}
.pd-empty-ico{width:56px;height:56px;border-radius:14px;background:#f5f4ff;border:1px solid #e4e2ff;color:var(--pd-primary);display:inline-flex;align-items:center;justify-content:center}
.pd-empty-t{font-size:15px;font-weight:700;color:var(--pd-text)}
.pd-empty-s{font-size:12.5px;max-width:340px;line-height:1.5}
.pd-toast{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);background:#1a1f36;color:#fff;font-size:12.5px;font-weight:500;padding:11px 18px;border-radius:10px;box-shadow:0 8px 24px -6px rgba(0,0,0,.4);z-index:40;max-width:80%;text-align:center}
@media (prefers-color-scheme: dark){
.pd-screen{--pd-border:#2a2d3a;--pd-surface:#16181f;--pd-bg:#0f1117;--pd-text:#e8eaf0;--pd-muted:#9aa0b0;--pd-faint:#6b7180}
.pd-scope{background:#1c1f28}
.pd-kpi-ico{background:#1c1f28}
}
:root[data-theme="dark"] .pd-screen{--pd-border:#2a2d3a;--pd-surface:#16181f;--pd-bg:#0f1117;--pd-text:#e8eaf0;--pd-muted:#9aa0b0;--pd-faint:#6b7180}
:root[data-theme="light"] .pd-screen{--pd-border:#e6e8ec;--pd-surface:#fff;--pd-bg:#fdfcfb;--pd-text:#1a1f36;--pd-muted:#697386;--pd-faint:#8792a2}

/* ===== pages/resume-blitz/resume-blitz.css ===== */
.blitz-screen{--bg:#fdfcfb;--surface:#ffffff;--border:#e6e8ec;--border2:#dfe1e8;--text:#1a1f36;--muted:#697386;--faint:#8792a2;--primary:#635bff;--primary-d:#4f46e5;--grad:linear-gradient(135deg,#7a73ff,#635bff 35%,#4f46e5 65%,#2563eb);--mono:'JetBrains Mono',ui-monospace,monospace;--sans:'Inter Tight',-apple-system,BlinkMacSystemFont,sans-serif;--c-green:#00d26a;--c-blue:#2f80ff;--c-purple:#6e54ff;--c-yellow:#ffc400;--c-red:#8792a2}
.blitz-screen *{box-sizing:border-box}
.blitz-screen{margin:0;height:100%;width:100%;display:flex;flex-direction:column;min-height:0;position:relative}
.blitz-screen{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden}
/* MASTER SHELL (2026-07-25): under the QA master shell this class sits on the
 * shell's content host (.rsx-tool.ms-content) instead of on #app-root. That
 * host declares overflow-y:auto as the generic page scroller, and because the
 * shell injects its <style> into <head> at runtime it lands AFTER bundle.css
 * with equal specificity — so it would win and hand this screen a second,
 * outer scrollbar. Resume Blitz is no-page-scroll by design (only its inner
 * regions scroll), so reassert it with a compound selector that outranks the
 * single-class shell rule. Legacy path is unaffected: #app-root never carries
 * .rsx-tool. */
.blitz-screen.rsx-tool,.blitz-screen.ms-content{overflow:hidden}
/* SHELL-CONSISTENCY PASS (2026-07-07): Resume Blitz renders INSIDE the universal
 * page shell (bordered card on warm #fdfcfb). The ambient blobs are a fixed
 * backdrop BEHIND the shell so drift shows through the warm gutter, not over
 * content. Mirrors the hierarchy board treatment. */
.blitz-screen .blitz-backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#fdfcfb}
/* No global topbar on this surface (Ben, 2026-07-08): the card floats alone in
   the viewport like the sign-in / onboarding screens, so the gutter is wider —
   the whole app reads as one smaller centered instrument. */
.blitz-screen .page-shell.blitz-shell{position:relative;z-index:1;flex:1 1 auto;min-height:0;display:flex;padding:26px 34px 34px;background:transparent}
.blitz-screen .page-card.blitz-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl,20px);box-shadow:0 18px 48px -28px rgba(50,38,130,.34),0 1px 2px rgba(20,20,50,.04)}
.blitz-screen ::selection{background:var(--primary);color:#fff}
.blitz-screen .mono{font-family:var(--mono)}
.blitz-screen .eye{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:500}
.blitz-screen .pri{color:var(--primary)}
.blitz-screen .muted{color:var(--muted)}
.blitz-screen .faint{color:var(--faint)}
.blitz-screen .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Fill the app content area (below the shared topbar) rather than the full
 * viewport. Using 100vh/100dvh here overflowed the fold because #app-root is
 * already shortened by the topbar; height:100% + flex fills the parent cleanly
 * and matches the hierarchy board's sizing so both screens fit their box. */
.blitz-screen .app{height:100%;flex:1 1 auto;min-height:0;position:relative;display:flex;flex-direction:column;overflow:hidden}
/* Ambient blobs clip to this screen (absolute, not fixed) so they never paint
 * over the topbar or overflow the content box. */
.blitz-screen .amb{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.blitz-screen .blob{position:absolute;border-radius:50%;mix-blend-mode:multiply;will-change:transform}
.blitz-screen .b1{width:680px;height:680px;left:-200px;top:-240px;background:radial-gradient(circle,rgba(99,91,255,.16),transparent 62%);animation:d1 30s ease-in-out infinite}
.blitz-screen .b2{width:560px;height:560px;right:-160px;top:120px;background:radial-gradient(circle,rgba(124,116,255,.13),transparent 62%);animation:d2 36s ease-in-out infinite}
.blitz-screen .b3{width:520px;height:520px;left:30%;bottom:-260px;background:radial-gradient(circle,rgba(86,96,232,.1),transparent 64%);animation:d3 42s ease-in-out infinite}
@keyframes d1{0%,100%{transform:translate(0,0)}50%{transform:translate(90px,70px)}}
@keyframes d2{0%,100%{transform:translate(0,0)}50%{transform:translate(-80px,50px)}}
@keyframes d3{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,-60px)}}
.blitz-screen /* status dots */
.st{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
/* SAFARI COMPAT (2026-07-14): color-mix() requires Safari 16.2+. A plain-rgba
 * fallback box-shadow (matching the current --c-* token hex values) is
 * declared first since an unrecognized color-mix() inside a multi-layer
 * box-shadow invalidates the whole declaration, not just one layer. */
.blitz-screen .st.green{background:var(--c-green);box-shadow:0 0 0 3px rgba(0,210,106,.24),0 0 7px rgba(0,210,106,.66);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-green) 24%,transparent),0 0 7px color-mix(in srgb,var(--c-green) 66%,transparent)}
.blitz-screen .st.blue{background:var(--c-blue);box-shadow:0 0 0 3px rgba(47,128,255,.24),0 0 7px rgba(47,128,255,.66);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-blue) 24%,transparent),0 0 7px color-mix(in srgb,var(--c-blue) 66%,transparent)}
.blitz-screen .st.purple{background:var(--c-purple);box-shadow:0 0 0 3px rgba(110,84,255,.24),0 0 7px rgba(110,84,255,.66);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-purple) 24%,transparent),0 0 7px color-mix(in srgb,var(--c-purple) 66%,transparent)}
.blitz-screen .st.yellow{background:var(--c-yellow);box-shadow:0 0 0 3px rgba(255,196,0,.26),0 0 7px rgba(255,196,0,.70);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-yellow) 26%,transparent),0 0 7px color-mix(in srgb,var(--c-yellow) 70%,transparent)}
.blitz-screen .st.red{background:var(--c-red);box-shadow:0 0 0 3px rgba(135,146,162,.28),0 0 8px rgba(135,146,162,.74);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-red) 28%,transparent),0 0 8px color-mix(in srgb,var(--c-red) 74%,transparent)}
.blitz-screen .st.idle{background:transparent;border:1.5px dashed var(--faint);opacity:.7}
.blitz-screen /* buttons */
.btn-go{font-family:var(--sans);font-weight:600;font-size:14px;color:#fff;background:var(--grad);border:none;border-radius:12px;padding:13px 22px;cursor:pointer;box-shadow:0 12px 26px -12px rgba(80,60,200,.65);transition:transform .16s,box-shadow .16s}
.blitz-screen .btn-go:hover{transform:translateY(-1px);box-shadow:0 16px 32px -12px rgba(80,60,200,.7)}
.blitz-screen .btn-ghost{font-family:var(--sans);font-weight:600;font-size:14px;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:13px 20px;cursor:pointer;transition:.16s}
.blitz-screen .btn-ghost:hover{color:var(--primary);border-color:#d6d2ff;background:#faf9ff}
.blitz-screen .big{font-size:15px;padding:15px 26px}
.blitz-screen .chip{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--primary);background:#f3f2ff;border:1px solid #e6e3ff;border-radius:999px;padding:6px 12px;white-space:nowrap;font-weight:500}
.blitz-screen .chip.cta{color:#fff;background:var(--grad);border-color:transparent;box-shadow:0 8px 18px -8px rgba(80,60,200,.6)}
.blitz-screen /* COVER */
/* FULL-WIDTH COVER (Ben, 2026-07-10, item 4): standard bar on top, composition
   uses the whole card width instead of a narrow centered column. */
.cover{max-width:none;width:100%;margin:0;padding:34px 56px 30px;flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;position:relative;z-index:1}
.blitz-screen .brandline{display:flex;align-items:center;gap:9px;margin-bottom:2px;margin-top:auto}
.blitz-screen .brandline .orb-sm{width:26px;height:26px;border-radius:8px}
.blitz-screen .metaline{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:15px;letter-spacing:.02em;line-height:1.6}
.blitz-screen .metaline b{color:var(--muted);font-weight:600}
.blitz-screen .orb-sm{width:38px;height:38px;border-radius:11px;object-fit:contain;background:#0c1020;box-shadow:0 8px 20px -8px rgba(30,22,80,.5),0 0 0 1px rgba(99,91,255,.14)}
.blitz-screen .rule{border:0;border-top:1px solid var(--border);margin:16px 0 0}
.blitz-screen .prep{display:flex;align-items:center;gap:15px;margin-top:20px}
.blitz-screen .prep-av{width:60px;height:60px;border-radius:50%;object-fit:cover;object-position:center top;box-shadow:0 0 0 1px var(--border),0 0 0 4px #fff,0 14px 30px -10px rgba(50,38,130,.5)}
.blitz-screen .prep-ini{display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-weight:800;font-size:24px;letter-spacing:-.02em}
.blitz-screen .prep-n{font-weight:700;font-size:25px;letter-spacing:-.02em;line-height:1;margin:5px 0 4px}
.blitz-screen .eyebrow{margin-top:24px;font-size:11.5px;letter-spacing:.16em;color:var(--primary)}
.blitz-screen .hero{font-weight:800;font-size:50px;line-height:1.02;letter-spacing:-.032em;margin:12px 0 0;max-width:17ch}
.blitz-screen .intro{font-size:16px;line-height:1.5;color:var(--muted);max-width:66ch;margin:14px 0 0}
.blitz-screen .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
.blitz-screen .tile{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:13px 15px;box-shadow:0 1px 2px rgba(20,20,50,.03)}
.blitz-screen .tile .tl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.blitz-screen .tile .tv{font-weight:800;font-size:25px;letter-spacing:-.03em;margin-top:7px;line-height:1}
.blitz-screen .tile .tv small{font-size:13px;color:var(--faint);font-weight:600;letter-spacing:0}
.blitz-screen .tile .ts{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:7px;line-height:1.4}
.blitz-screen .tierbar{display:flex;height:6px;border-radius:4px;overflow:hidden;margin-top:11px;gap:2px}
.blitz-screen .tierbar i{display:block}
.blitz-screen .wide{grid-column:span 2}
.blitz-screen .wide .tv{font-size:17px;font-weight:700;letter-spacing:-.01em}
.blitz-screen .ctas{display:flex;align-items:center;gap:12px;margin-top:24px;flex-wrap:wrap;margin-bottom:auto}
.blitz-screen .live{font-family:var(--mono);font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:9px;margin-left:4px}
.blitz-screen /* TOP BAR */
.wbar{flex:none;position:relative;z-index:30;background:rgba(253,252,251,.82);-webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid var(--border)}
.blitz-screen .wbar-in{max-width:none;margin:0;padding:0 30px;height:60px;display:flex;align-items:center;gap:16px}
.blitz-screen .wbrand{display:flex;align-items:center;gap:11px;cursor:pointer;flex:none}
.blitz-screen .wbrand .orb-sm{width:30px;height:30px;border-radius:9px}
.blitz-screen .wbrand .wt{font-weight:700;font-size:14px;letter-spacing:-.01em;line-height:1.1}
.blitz-screen .wbrand .wt small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:500;margin-top:2px}
/* in-card nav tabs (the global topbar's Hierarchy / Resume Blitz moved here) */
.blitz-screen .wtabs{display:flex;align-items:center;gap:4px;margin-left:18px;padding-left:18px;border-left:1px solid var(--border)}
.blitz-screen .wtab{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:-.01em;cursor:pointer;transition:.15s}
.blitz-screen .wtab:hover{color:var(--text);background:rgba(20,20,50,.045)}
.blitz-screen .wtab.on{color:var(--primary);background:#f7f6ff;border-color:#d6d2ff;cursor:default}
.blitz-screen .seg{display:flex;background:#f0eff5;border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px}
.blitz-screen .seg button{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:7px 13px;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:7px;transition:.14s}
.blitz-screen .seg button.on{background:#fff;color:var(--primary);box-shadow:0 1px 3px rgba(20,20,50,.12)}
.blitz-screen .wright{margin-left:auto;display:flex;align-items:center;gap:14px}
.blitz-screen .prog{display:flex;align-items:center;gap:10px}
.blitz-screen .prog .pt{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.blitz-screen .prog .pt b{color:var(--text);font-weight:700}
.blitz-screen .progbar{width:96px;height:6px;background:#eceef3;border-radius:4px;overflow:hidden}
.blitz-screen .progbar i{display:block;height:100%;background:var(--grad);transition:width .35s ease}
.blitz-screen .binsbtn{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:8px 13px;border:1px solid var(--border);background:var(--surface);border-radius:10px;cursor:pointer;display:flex;gap:8px;align-items:center;transition:.14s}
.blitz-screen .binsbtn:hover{border-color:#d6d2ff;color:var(--primary)}
.blitz-screen .binsbtn .bn{font-weight:700;color:var(--primary)}
.blitz-screen .whoami{display:flex;align-items:center;gap:10px;padding-left:14px;border-left:1px solid var(--border)}
.blitz-screen .wa-av{width:36px;height:36px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-weight:700;font-size:12.5px;object-fit:cover;box-shadow:0 0 0 3px #fff,0 5px 12px -5px rgba(50,38,130,.55)}
.blitz-screen .wa-txt{display:flex;flex-direction:column;line-height:1.18}
.blitz-screen .wa-n{font-weight:700;font-size:13.5px;letter-spacing:-.01em}
.blitz-screen .wa-r{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.blitz-screen /* FILTER BAR */
.fbar{max-width:1180px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.blitz-screen .fchip{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:7px 12px;cursor:pointer;display:inline-flex;gap:7px;align-items:center;transition:.13s;white-space:nowrap}
.blitz-screen .fchip:hover{border-color:#cfcaff;color:var(--text)}
.blitz-screen .fchip .c{color:var(--faint);font-weight:500}
.blitz-screen .fchip.on{background:var(--text);color:#fff;border-color:var(--text)}
.blitz-screen .fchip.on .c{color:rgba(255,255,255,.55)}
.blitz-screen .fchip.pk.on{background:var(--grad);border-color:transparent}
/* BIN TABS (Ben 2026-07-18): To Call | Invited | Callback | Passed.
   Active bin (incl. the bin a searched person lives in) highlights BLUE. */
.blitz-screen .fchip.bin-chip{border-radius:8px}
.blitz-screen .fchip.bin-chip.on{background:var(--primary,#635bff);border-color:transparent;color:#fff}
.blitz-screen .fchip.bin-tocall.on{background:var(--grad,var(--primary,#635bff))}
.blitz-screen .fsep{width:1px;height:22px;background:var(--border);margin:0 3px}
.blitz-screen .search{font-family:var(--mono);font-size:12px;padding:8px 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface);min-width:170px;color:var(--text);outline:none}
.blitz-screen .search:focus{border-color:#cfcaff}
.blitz-screen .search::placeholder{color:var(--faint)}
/* PERSONAL INVITE — filter-row CTA (Ben, 2026-07-13): same purple-gradient
   pill geometry as .dial/.invitebtn (var(--grad) fill, JetBrains Mono,
   11px radius, the signature box-shadow) but a REAL button, unlike the
   display-only .dial pill. */
.blitz-screen .pibtn{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:9px 14px 9px 12px;border:0;background:var(--grad);color:#fff;border-radius:9px;cursor:pointer;display:inline-flex;gap:7px;align-items:center;white-space:nowrap;box-shadow:0 10px 22px -12px rgba(80,60,200,.6);transition:.14s;margin-left:auto}
.blitz-screen .pibtn:hover{transform:translateY(-1px)}
.blitz-screen .pibtn:active{transform:translateY(0)}
.blitz-screen /* CARD */
.cc{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:22px 24px;box-shadow:0 14px 36px -24px rgba(50,38,130,.4),0 1px 2px rgba(20,20,50,.04);position:relative}
.blitz-screen .cc-head{display:flex;gap:15px;align-items:flex-start}
.blitz-screen .cc-av{width:54px;height:54px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-weight:700;font-size:17px;box-shadow:0 0 0 4px #fff,0 14px 30px -10px rgba(80,60,200,.55)}
.blitz-screen .cc-id{flex:1;min-width:0}
.blitz-screen .cc-eye{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--primary);display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600}
.blitz-screen .cc-eye .sep{color:var(--border2)}
.blitz-screen .cc-eye .rk{color:var(--faint)}
.blitz-screen .tierpill{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:5px}
.blitz-screen .tp-aaa{background:#efeefe;color:var(--primary)}
.blitz-screen .tp-aa{background:#eef4ff;color:var(--c-blue)}
.blitz-screen .tp-a{background:#f1f3f7;color:var(--muted)}
.blitz-screen .pickpill{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.05em;padding:2px 7px;border-radius:5px;background:var(--grad);color:#fff;display:inline-flex;align-items:center;gap:4px}
.blitz-screen .cc-name{font-weight:700;font-size:25px;letter-spacing:-.02em;line-height:1.05;margin:7px 0 0}
.blitz-screen .cc-loc{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:6px;letter-spacing:.02em}
.blitz-screen .cc-score{flex:none;text-align:center;width:60px}
.blitz-screen .score{position:relative;width:56px;height:56px;margin:0 auto}
.blitz-screen .score-svg{width:56px;height:56px;transform:rotate(-90deg);display:block}
.blitz-screen .score-svg .track{fill:none;stroke:#eceef3;stroke-width:4.2}
.blitz-screen .score-svg .arc{fill:none;stroke:url(#sg);stroke-width:4.2;stroke-linecap:round;transition:stroke-dasharray .6s ease}
.blitz-screen .score-n{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;letter-spacing:-.03em}
.blitz-screen .score-l{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:6px;font-weight:600}
.blitz-screen .creds{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:17px}
.blitz-screen .cred{background:repeating-linear-gradient(135deg,transparent 0,transparent 8px,rgba(99,91,255,.04) 8px,rgba(99,91,255,.04) 10px),linear-gradient(135deg,rgba(122,115,255,.08),rgba(99,91,255,.03) 45%,rgba(37,99,235,.07)),#fdfcfb;border:1px solid var(--border);border-radius:14px;padding:13px 15px}
.blitz-screen .cred .ch{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.blitz-screen .cred .cl{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);font-weight:600}
.blitz-screen .cred .cy{font-weight:800;font-size:19px;letter-spacing:-.02em;white-space:nowrap}
.blitz-screen .cred .cy small{font-size:10px;color:var(--faint);font-weight:600;letter-spacing:0}
.blitz-screen .cred .cn{font-size:13px;color:var(--muted);line-height:1.4;margin-top:7px}
.blitz-screen .bio{font-size:15.5px;line-height:1.6;color:var(--muted);margin-top:16px}
.blitz-screen .bio.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blitz-screen .more{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--primary);background:none;border:0;cursor:pointer;padding:8px 0 0;letter-spacing:.03em}
.blitz-screen .mark{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.blitz-screen .ocwell{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:repeating-linear-gradient(135deg,transparent 0,transparent 8px,rgba(99,91,255,.04) 8px,rgba(99,91,255,.04) 10px),linear-gradient(135deg,rgba(122,115,255,.08),rgba(99,91,255,.03) 45%,rgba(37,99,235,.07)),#fdfcfb;border:1px solid var(--border);border-radius:14px;padding:10px 12px}
.blitz-screen .mark .ml{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-right:2px}
.blitz-screen .oc{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--border);background:#fff;border-radius:10px;cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;gap:8px;transition:.14s;box-shadow:0 2px 5px -1px rgba(20,20,50,.16),0 1px 2px rgba(20,20,50,.09)}
.blitz-screen .oc:hover{border-color:#cfcaff;color:var(--text);transform:translateY(-2px);box-shadow:0 7px 16px -5px rgba(50,38,130,.3),0 2px 4px rgba(20,20,50,.1)}
.blitz-screen .oc .bx{width:12px;height:12px;border:1.5px solid var(--border2);border-radius:4px;display:inline-block;transition:.14s}
.blitz-screen .oc.won{border-color:var(--primary);background:#fff;color:var(--text)}
.blitz-screen .oc .fit{margin-left:3px;font-weight:800;font-size:11.5px;color:var(--faint);letter-spacing:0;font-style:normal}
.blitz-screen .oc.best .fit{color:var(--primary)}
.blitz-screen .oc.won .fit{color:var(--primary)}
.blitz-screen .fittag{font-style:normal;font-family:var(--mono);font-size:7px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--grad);color:#fff;border-radius:5px;padding:2px 5px;margin-left:3px}
.blitz-screen .oc.won .bx{background:var(--primary);border-color:var(--primary)}
.blitz-screen .foot{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border);flex-wrap:wrap}
/* Phone pill is DISPLAY ONLY (Ben, 2026-07-08): not a button, no hover lift,
   default cursor, text selectable so the rep can copy the number. */
.blitz-screen .dial{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.01em;padding:10px 16px;border:none;background:var(--grad);color:#fff;border-radius:11px;cursor:default;display:inline-flex;gap:9px;align-items:center;box-shadow:0 10px 22px -12px rgba(80,60,200,.6);width:200px;justify-content:center;white-space:nowrap;flex:none;-webkit-user-select:text;user-select:text}
.blitz-screen .lnk{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:10px 13px;border:1px solid var(--border);background:#fff;color:var(--muted);border-radius:10px;cursor:pointer;transition:.14s;display:inline-flex;align-items:center;gap:7px}
.blitz-screen .lnk:hover{border-color:#cfcaff;color:var(--primary)}
.blitz-screen .lnk.saved{background:#f3f2ff;border-color:#e6e3ff;color:var(--primary)}
.blitz-screen .foot-out{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.blitz-screen /* DIALER */
.dialer{max-width:1200px;width:100%;margin:0 auto;padding:22px 24px 14px;position:relative;z-index:1;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.blitz-screen .cc-dialer{padding:26px 32px;display:flex;flex-direction:column;min-height:0}
.blitz-screen .cc-dialer .cc-head, .blitz-screen .cc-dialer .creds, .blitz-screen .cc-dialer .mark, .blitz-screen .cc-dialer .cardfoot, .blitz-screen .cc-dialer .savemobile{flex:none}
.blitz-screen .cc-dialer .cc-name{font-size:31px}
.blitz-screen .cc-dialer .cc-av{width:60px;height:60px;font-size:19px}
.blitz-screen .cc-dialer .bio{font-size:16.5px;flex:1 1 0;min-height:0;overflow-y:auto;padding-right:6px}
.blitz-screen .cardnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.blitz-screen .cnav-btn{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--border);background:var(--surface);border-radius:10px;color:var(--muted);cursor:pointer;transition:.15s}
.blitz-screen .cnav-btn:hover{border-color:#cfcaff;color:var(--primary)}
.blitz-screen .cnav-btn:disabled{opacity:.4;cursor:not-allowed}
.blitz-screen .cnav-pos{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.04em;min-width:64px;text-align:center;flex:none}
.blitz-screen .cnav-pos b{color:var(--text);font-weight:700}
.blitz-screen .dialnav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px}
.blitz-screen .navbtn{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:12px 20px;border:1px solid var(--border);background:var(--surface);border-radius:12px;cursor:pointer;transition:.14s;color:var(--muted)}
.blitz-screen .navbtn:hover:not(:disabled){border-color:#cfcaff;color:var(--primary);transform:translateY(-1px)}
.blitz-screen .navbtn:disabled{opacity:.4;cursor:not-allowed}
.blitz-screen .dialpos{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);min-width:120px;text-align:center}
.blitz-screen .dialpos b{font-weight:700;font-size:17px;color:var(--text)}
.blitz-screen .dialhint{flex:none;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-top:12px}
.blitz-screen .dialhint kbd{background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:2px 6px;font-family:var(--mono);font-size:10px;margin:0 2px}
.blitz-screen .upnext{max-width:1080px;margin:16px auto 0;padding:12px 18px;border:1px dashed var(--border2);border-radius:14px;display:flex;align-items:center;gap:13px;background:rgba(255,255,255,.5)}
.blitz-screen .upnext .ul{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);flex:none;font-weight:600}
.blitz-screen .upnext .un{font-weight:700;font-size:15px}
.blitz-screen .upnext .us{font-family:var(--mono);font-size:11px;color:var(--faint);margin-left:auto;display:flex;align-items:center;gap:7px}
.blitz-screen .done-card{max-width:520px;margin:auto;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:40px 34px;box-shadow:0 14px 36px -24px rgba(50,38,130,.4)}
.blitz-screen .done-card .dh{font-weight:800;font-size:26px;letter-spacing:-.025em;margin-top:8px}
.blitz-screen .done-card .ds{color:var(--muted);font-size:15px;margin-top:10px;line-height:1.5}
.blitz-screen .dialrow{display:flex;gap:22px;align-items:stretch;flex:1;min-height:0}
.blitz-screen .dialrow .cc-dialer{flex:1 1 auto;min-width:0}
.blitz-screen .upnext-v{flex:0 0 140px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(247,246,252,.5));border:1px dashed var(--border2);border-radius:20px;padding:18px 14px;cursor:pointer;transition:.2s;opacity:.85;box-shadow:0 14px 36px -20px rgba(50,38,130,.45),0 1px 2px rgba(20,20,50,.04);-webkit-user-select:none;user-select:none}
.blitz-screen .upnext-v:hover{opacity:1;border-color:#cfcaff;transform:translateX(-4px);box-shadow:0 18px 40px -26px rgba(50,38,130,.5)}
.blitz-screen .unv-eye{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);font-weight:600}
.blitz-screen .unv-av{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-weight:700;font-size:14px;box-shadow:0 0 0 4px #fff;margin-top:6px}
.blitz-screen .unv-name{font-weight:700;font-size:15.5px;letter-spacing:-.02em;line-height:1.18;margin-top:6px}
.blitz-screen .unv-loc{font-size:11.5px;color:var(--muted)}
.blitz-screen .unv-arrow{margin:auto 0;align-self:center;color:var(--primary);display:flex;filter:drop-shadow(0 4px 10px rgba(99,91,255,.35))}
.blitz-screen .unv-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding-top:12px}
.blitz-screen .unv-grade{font-family:var(--mono);font-size:11px;color:var(--faint)}
.blitz-screen .cardfoot{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border);flex-wrap:wrap;-webkit-user-select:none;user-select:none}
.blitz-screen .mark{-webkit-user-select:none;user-select:none}
.blitz-screen .cf-actions{display:flex;align-items:center;gap:12px;margin-left:auto;flex-wrap:wrap}
.blitz-screen .savemobile{display:none}
.blitz-screen .mark-sec{display:flex;align-items:center;gap:9px;margin-left:auto}
.blitz-screen .invitebtn{margin-top:14px;width:100%;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:13px;border:0;border-radius:11px;background:var(--grad);color:#fff;cursor:pointer;transition:.14s;box-shadow:0 10px 22px -12px rgba(80,60,200,.6);flex:none}
.blitz-screen .invitebtn:hover{transform:translateY(-1px)}
.blitz-screen .invitebtn:disabled{background:#eceef3;color:var(--faint);cursor:not-allowed;box-shadow:none;transform:none}
.blitz-screen .confirm-strip{margin-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#f3f2ff;border:1px solid #e6e3ff;border-radius:12px;padding:10px 12px;flex:none}
.blitz-screen .confirm-strip .cq{font-weight:600;font-size:13.5px;flex:1 1 auto;min-width:140px}
.blitz-screen .confirm-strip .cfm{padding:10px 14px;font-size:12.5px;border-radius:10px}
.blitz-screen .invited-strip{margin-top:14px;display:flex;align-items:center;gap:9px;background:#e9fbf1;border:1px solid #bfefd6;border-radius:12px;padding:10px 12px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#0a7a45;flex:none}
.blitz-screen .invited-strip .undo{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;border:0;background:none;color:var(--muted);cursor:pointer;text-decoration:underline}
.blitz-screen .workrow{flex:1;min-height:0;display:flex}
/* COMPETITION BOARD SPINE (Ben, 2026-07-10): avatars + seat chips ~75% bigger,
   thicker gradient rims, loud purple 'N needed' counters, wider rail. */
.blitz-screen .hrail{flex:none;width:158px;border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;padding:16px 8px;background:rgba(255,255,255,.5);overflow-y:auto;overflow-x:hidden}
.blitz-screen .hnode{position:relative;width:77px;height:77px;border-radius:50%;border:0;padding:0;background:none;cursor:pointer;flex:none;transition:transform .15s}
.blitz-screen .hnode:hover{transform:translateY(-1px) scale(1.06)}
.blitz-screen .hn-img{width:77px;height:77px;border-radius:50%;object-fit:cover;object-position:center;box-shadow:0 0 0 3px #fff,0 0 0 6px #b9b2ff,0 14px 26px -10px rgba(50,38,130,.55);display:block}
.blitz-screen .hn-photo{background-size:cover;background-position:center;background-repeat:no-repeat}
.blitz-screen .hn-init{width:77px;height:77px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-weight:700;font-size:21px;box-shadow:0 0 0 3px #fff,0 0 0 6px #b9b2ff,0 14px 26px -10px rgba(50,38,130,.55)}
.blitz-screen .hn-tier{width:77px;height:77px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:2.5px dashed #b9b2ff;color:var(--primary);font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.06em}
.blitz-screen .hnode:hover .hn-tier{border-color:#cfcaff;color:var(--primary)}
.blitz-screen .hn-badge{position:absolute;top:-5px;right:-7px;background:var(--c-green);color:#063;font-family:var(--mono);font-size:12px;font-weight:700;border-radius:999px;padding:3px 8px;box-shadow:0 0 0 2px #fff}
.blitz-screen .hlab{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:6px;text-align:center;line-height:1.3;white-space:nowrap;font-weight:600}
.blitz-screen .hneed{font-family:var(--mono);font-size:12.5px;color:var(--primary);font-weight:800;letter-spacing:.05em;margin-top:4px;white-space:nowrap;background:rgba(99,91,255,.10);border:1px solid rgba(99,91,255,.28);border-radius:999px;padding:3px 10px}
.blitz-screen .hstem{width:2.5px;flex:1 1 18px;min-height:10px;max-height:34px;background:linear-gradient(180deg,#d6d2ff,var(--border));margin:8px 0}
.blitz-screen .bscrim{position:fixed;inset:0;background:rgba(20,18,40,.38);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:80;display:none;align-items:center;justify-content:center;padding:26px;pointer-events:none}
.blitz-screen .bscrim.on{display:flex;pointer-events:auto}
.blitz-screen .bracket{background:var(--bg);border:1px solid var(--border);border-radius:22px;max-width:940px;width:100%;max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;box-shadow:0 40px 100px -40px rgba(50,38,130,.6);overflow:hidden}
.blitz-screen .dchead{position:relative;background:repeating-linear-gradient(90deg,rgba(255,255,255,.075) 0 2px,transparent 2px 24px) left bottom/100% 9px no-repeat,radial-gradient(640px 320px at 16% -45%,rgba(122,115,255,.38),transparent 62%),radial-gradient(560px 300px at 86% -35%,rgba(37,99,235,.3),transparent 62%),linear-gradient(155deg,#161329,#242051 58%,#191533);color:#fff;padding:22px 26px 20px;flex:none;overflow:hidden}
.blitz-screen .dchead:before{content:"";position:absolute;width:720px;height:720px;right:-250px;top:-520px;border:1.5px solid rgba(255,255,255,.06);outline:1px solid rgba(255,255,255,.035);outline-offset:52px;border-radius:50%;pointer-events:none}
.blitz-screen .dc-top{position:relative;display:flex;align-items:flex-start;gap:14px}
.blitz-screen .dc-eye{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#a79ef2;font-weight:600}
.blitz-screen .dc-title{font-size:28px;font-weight:800;letter-spacing:-.015em;text-transform:uppercase;font-style:italic;line-height:1;margin-top:7px;color:#fff}
.blitz-screen .dchead .mclose{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
.blitz-screen .dc-mid{position:relative;display:flex;align-items:flex-end;gap:20px;margin-top:18px;flex-wrap:wrap}
.blitz-screen .coach{display:flex;align-items:center;gap:11px}
.blitz-screen .coach .hn-photo{width:46px;height:46px;border-radius:50%;box-shadow:0 0 0 2px #1a1635,0 0 0 4px rgba(167,158,242,.55);flex:none}
.blitz-screen .coach-n{font-weight:800;font-size:14.5px;color:#fff;line-height:1.15}
.blitz-screen .coach-r{font-family:var(--mono);font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:#a79ef2;margin-top:3px}
.blitz-screen .vsline{width:1px;align-self:stretch;background:rgba(255,255,255,.16)}
.blitz-screen .dcscore{margin-left:auto;display:flex;align-items:flex-end;gap:24px}
.blitz-screen .dstat{text-align:right}
.blitz-screen .dstat b{display:block;font-size:31px;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;font-style:italic}
.blitz-screen .dstat.gold b{color:#ffd166}
.blitz-screen .dstat span{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#a79ef2}
.blitz-screen .dcmeter{position:relative;height:8px;background:rgba(255,255,255,.13);border-radius:5px;overflow:hidden;margin-top:16px}
.blitz-screen .dcmeter i{display:block;height:100%;background:linear-gradient(90deg,#7a73ff,#b3aeff);border-radius:5px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.blitz-screen .dc-sub{position:relative;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:#8f87c9;margin-top:9px}
.blitz-screen .bbody{flex:1;min-height:0;overflow-y:auto;padding:0 0 26px}
.blitz-screen .bp-av{width:24px;height:24px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:9px;flex:none}
.blitz-screen .seat{width:22px;height:22px;border-radius:50%;border:1.5px dashed var(--border2);background:rgba(255,255,255,.6);flex:none;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:7.5px;font-weight:700;color:#fff;letter-spacing:0}
.blitz-screen .seat.on{border:0;background:var(--grad);box-shadow:0 2px 6px -2px rgba(80,60,200,.6)}
/* Seat status dots — depth chart is a live status board, so semantic status
   colors are allowed (green=onboarded, yellow=invited). NO red anywhere.
   on-booked preserves today's purple-gradient look for the mid state. */
.blitz-screen .seat.on-booked{border:0;background:var(--grad);box-shadow:0 2px 6px -2px rgba(80,60,200,.6)}
.blitz-screen .seat.on-invited{border:0;background:linear-gradient(135deg,#ffd24d,#ffc400);box-shadow:0 2px 6px -2px rgba(200,150,0,.5)}
.blitz-screen .seat.on-onboarded{border:0;background:linear-gradient(135deg,#2fe08a,#00c464);box-shadow:0 2px 6px -2px rgba(0,150,80,.45)}
/* ARSM starter avatar (.bp-av) carries a status modifier too — override its
   default gradient fill so the invited/onboarded states read on the avatar. */
.blitz-screen .bp-av.on-invited{background:linear-gradient(135deg,#ffd24d,#ffc400);color:#3a2c00}
.blitz-screen .bp-av.on-onboarded{background:linear-gradient(135deg,#2fe08a,#00c464)}
.blitz-screen .standings{padding:18px 26px 0}
.blitz-screen .sthead{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.blitz-screen .livedot{width:7px;height:7px;border-radius:50%;background:#8792a2;animation:lpulse 1.6s ease-in-out infinite;flex:none}
@keyframes lpulse{0%,100%{opacity:1}50%{opacity:.25}}
.blitz-screen .legend{margin-left:auto;display:flex;gap:14px;font-family:var(--mono);font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);align-items:center}
.blitz-screen .lg{display:inline-flex;align-items:center;gap:6px}
.blitz-screen .lg .seat{width:12px;height:12px}
.blitz-screen .dlrow{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:11px 16px;margin-bottom:8px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color .15s,transform .15s,box-shadow .15s;position:relative}
.blitz-screen .dlrow:hover{border-color:#cfcaff;transform:translateX(3px);box-shadow:0 10px 22px -16px rgba(50,38,130,.45)}
.blitz-screen .dlrow.r1{border-color:#d6d2ff;background:linear-gradient(90deg,rgba(122,115,255,.07),rgba(122,115,255,0) 45%),var(--surface)}
.blitz-screen .drank{width:34px;height:34px;border-radius:9px;background:#eceef3;color:var(--muted);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;flex:none;font-style:italic}
.blitz-screen .dlrow.r1 .drank{background:var(--grad);color:#fff;box-shadow:0 6px 14px -6px rgba(80,60,200,.7)}
.blitz-screen .dlrow.r2 .drank{background:#dfe3ff;color:var(--primary)}
.blitz-screen .dlrow.r3 .drank{background:#efe9ff;color:var(--primary)}
.blitz-screen .dpod{width:76px;flex:none}
.blitz-screen .dpod b{display:block;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.09em}
.blitz-screen .dpod span{font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--faint);text-transform:uppercase}
.blitz-screen .dstarter{display:flex;align-items:center;gap:8px;width:148px;flex:none;min-width:0}
.blitz-screen .dstarter .bp-av{width:28px;height:28px;font-size:9.5px}
.blitz-screen .dstarter .seat{width:28px;height:28px}
.blitz-screen .ds-n{font-weight:700;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blitz-screen .ds-n.open{color:var(--faint);font-weight:500;font-size:12px}
.blitz-screen .dunits{flex:1;min-width:0;display:flex;gap:18px;align-items:center}
.blitz-screen .dunit{display:flex;flex-direction:column;gap:5px;min-width:0}
.blitz-screen .du-lab{font-family:var(--mono);font-size:8px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);font-weight:700}
.blitz-screen .du-seats{display:flex;gap:4px;flex-wrap:wrap}
.blitz-screen .du-seats .seat{width:15px;height:15px;font-size:0}
.blitz-screen .dtogo{margin-left:auto;text-align:right;flex:none;width:80px}
.blitz-screen .dtogo b{display:block;font-size:20px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-style:italic}
.blitz-screen .dtogo b.full{color:#0a7a45;font-size:14px;letter-spacing:.04em}
.blitz-screen .dtogo span{font-family:var(--mono);font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.blitz-screen .dbar{height:4px;border-radius:3px;background:#eceef3;overflow:hidden;margin-top:6px}
.blitz-screen .dbar i{display:block;height:100%;background:var(--grad);transition:width .35s}
.blitz-screen .droster{background:var(--surface);border:1px solid var(--border);border-top:0;border-radius:0 0 14px 14px;margin:-9px 10px 10px;padding:15px 16px 13px}
.blitz-screen .dr-lab{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:10px 0 6px}
.blitz-screen .dr-sec{display:flex;flex-wrap:wrap;gap:6px}
.blitz-screen .drchip{display:inline-flex;align-items:center;gap:6px;background:#f2f1fa;border:1px solid var(--border);border-radius:999px;padding:3px 10px 3px 4px;font-weight:600;font-size:11.5px}
.blitz-screen .drchip .bp-av{width:20px;height:20px;font-size:7.5px}
.blitz-screen .dr-empty{font-size:12.5px;color:var(--faint)}
.blitz-screen /* SCROLL */
.scrollwrap{max-width:760px;width:100%;margin:0 auto;padding:18px 24px 60px;position:relative;z-index:1;flex:1;min-height:0;overflow-y:auto}
.blitz-screen .sechead{display:flex;align-items:center;gap:13px;margin:26px 2px 14px}
.blitz-screen .sechead h3{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0;white-space:nowrap;color:var(--text)}
.blitz-screen .sechead .ln{flex:1;height:1px;background:var(--border)}
.blitz-screen .sechead .ct{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.blitz-screen .scrollwrap .cc{margin-bottom:13px}
.blitz-screen .cc.worked{opacity:.62;transition:opacity .2s}
.blitz-screen .cc.worked:hover{opacity:1}
.blitz-screen .empty{padding:70px 20px;text-align:center;color:var(--faint);font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.blitz-screen /* BINS DRAWER */
.scrim{position:fixed;inset:0;background:rgba(20,18,40,.34);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:50;display:none;pointer-events:none}
.blitz-screen .scrim.on{display:block;pointer-events:auto}
.blitz-screen .drawer{position:fixed;top:0;right:0;bottom:0;width:410px;max-width:92vw;background:var(--bg);border-left:1px solid var(--border);z-index:60;display:none;flex-direction:column;box-shadow:-24px 0 70px -30px rgba(50,38,130,.5)}
.blitz-screen .drawer.on{display:flex}
.blitz-screen .dhead{padding:20px 22px 16px;border-bottom:1px solid var(--border);position:relative}
.blitz-screen .dhead h3{font-weight:800;font-size:21px;letter-spacing:-.02em;margin:0}
.blitz-screen .dhead p{font-family:var(--mono);font-size:11px;color:var(--faint);margin:6px 0 0;line-height:1.5}
.blitz-screen .dclose{position:absolute;top:18px;right:18px;background:var(--surface);border:1px solid var(--border);width:30px;height:30px;border-radius:9px;font-size:16px;cursor:pointer;color:var(--muted);line-height:1}
.blitz-screen .dbody{flex:1;overflow-y:auto;padding:6px 22px 26px}
.blitz-screen .bin{margin-top:14px;background:repeating-linear-gradient(135deg,transparent 0,transparent 8px,rgba(99,91,255,.04) 8px,rgba(99,91,255,.04) 10px),linear-gradient(135deg,rgba(122,115,255,.08),rgba(99,91,255,.03) 45%,rgba(37,99,235,.07)),#fdfcfb;border:1px solid var(--border);border-radius:16px;padding:14px 14px 13px}
.blitz-screen .bin-h{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.blitz-screen .bin-h .bn2{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.blitz-screen .bin-h .bc{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted);background:#fff;border:1px solid var(--border);border-radius:999px;padding:2px 9px;box-shadow:0 1px 2px rgba(20,20,50,.06)}
.blitz-screen .bin-list{display:flex;flex-direction:column;gap:8px}
.blitz-screen .bin-row{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:9px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 2px 5px -1px rgba(20,20,50,.12),0 1px 2px rgba(20,20,50,.06)}
.blitz-screen .bin-row .br-av{width:28px;height:28px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-weight:700;font-size:10px;box-shadow:0 0 0 2px #fff}
.blitz-screen .bin-row .br-n{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blitz-screen .bin-row .br-t{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.05em;color:var(--faint);white-space:nowrap}
.blitz-screen .bin-empty{font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.03em;padding:12px;border:1px dashed var(--border2);border-radius:12px;text-align:center;background:rgba(255,255,255,.55)}
.blitz-screen .pipe{margin-top:10px;padding:16px 18px;background:repeating-linear-gradient(135deg,transparent 0,transparent 8px,rgba(99,91,255,.04) 8px,rgba(99,91,255,.04) 10px),linear-gradient(135deg,rgba(122,115,255,.08),rgba(99,91,255,.03) 45%,rgba(37,99,235,.07)),#fdfcfb;border:1px solid var(--border);border-radius:16px;color:var(--text)}
.blitz-screen .pipe .ph{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--primary);font-weight:600;display:flex;align-items:center}
.blitz-screen .pipe .pf{display:flex;align-items:center;gap:7px;margin-top:11px;font-family:var(--mono);font-size:10px;flex-wrap:wrap}
.blitz-screen .pipe .pf .n{padding:5px 9px;background:#fff;border:1px solid var(--border);border-radius:8px;white-space:nowrap;letter-spacing:.02em;color:var(--muted);font-weight:600;box-shadow:0 2px 4px -1px rgba(20,20,50,.1)}
.blitz-screen .pipe .pf .n.hot{background:var(--c-green);border-color:var(--c-green);color:#063}
.blitz-screen .pipe .ar{color:#b9b3e8}
.blitz-screen .pipe .pd{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:12px;line-height:1.55}
.blitz-screen .pipe .pd b{color:var(--text)}
.blitz-screen .firebtn{margin-top:14px;width:100%;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:13px;border:0;border-radius:11px;background:var(--grad);color:#fff;cursor:pointer;transition:.14s;box-shadow:0 10px 22px -12px rgba(80,60,200,.6)}
.blitz-screen .firebtn:hover{transform:translateY(-1px);filter:brightness(1.03)}
.blitz-screen .firebtn:disabled{background:#eceef3;color:var(--faint);cursor:not-allowed;box-shadow:none;transform:none}
.blitz-screen .demo-tag{font-family:var(--mono);font-size:8px;letter-spacing:.09em;padding:2px 6px;border:1px solid #e6e3ff;border-radius:5px;color:var(--primary);background:#f3f2ff;margin-left:8px;text-transform:uppercase}
.blitz-screen /* RESUME MODAL */
.mscrim{position:fixed;inset:0;background:rgba(20,18,40,.28);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:70;display:none;align-items:center;justify-content:flex-end;padding:28px;pointer-events:none}
.blitz-screen .mscrim.on{display:flex;pointer-events:auto}
.blitz-screen .modal{background:var(--surface);border-radius:20px;max-width:440px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 40px 100px -40px rgba(50,38,130,.6)}
.blitz-screen .mh{padding:24px 28px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);display:flex;gap:15px;align-items:center;z-index:2}
.blitz-screen .mh .cc-av{width:50px;height:50px;font-size:16px}
.blitz-screen .mclose{margin-left:auto;background:var(--bg);border:1px solid var(--border);width:32px;height:32px;border-radius:10px;font-size:17px;cursor:pointer;color:var(--muted)}
.blitz-screen .mb{padding:22px 28px 28px}
.blitz-screen .mrow{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--border)}
.blitz-screen .mrow .mk2{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);flex:none;padding-top:2px}
.blitz-screen .mrow .mv{font-size:14.5px;text-align:right;line-height:1.5}
.blitz-screen .mnote{margin-top:18px;padding:13px 15px;background:#fcfcfe;border:1px dashed var(--border2);border-radius:12px;font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.6;letter-spacing:.01em}
.blitz-screen .mnote b{color:var(--text)}
/* RESUME SPLIT VIEW — brief card shrinks left, resume panel pops right */
.blitz-screen .mscrim-split{justify-content:center;align-items:center}
.blitz-screen .mresume-split{display:flex;gap:18px;align-items:stretch;width:min(1180px,96vw);height:88vh;pointer-events:auto}
.blitz-screen .mresume-split .modal.modal-brief{max-width:480px !important;flex:0 0 480px !important;width:480px;height:100%;max-height:100%;border-radius:20px}
.blitz-screen .mresume-panel{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;background:var(--surface);border-radius:20px;overflow:hidden;box-shadow:0 40px 100px -40px rgba(50,38,130,.6)}
.blitz-screen .mresume-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);background:var(--surface)}
.blitz-screen .mresume-title{font-weight:700;font-size:15px;letter-spacing:-.01em}
.blitz-screen .mresume-head .mclose{margin-left:auto}
.blitz-screen .mresume-frame{flex:1 1 auto;width:100%;border:0;background:#fff;display:block}
.blitz-screen .mresume-panel .mresume-frame{border-radius:0 0 20px 20px}
/* INLINE dialer resume: the resume is a SIBLING panel in the horizontal strip
   (dialrow), inserted between the current card and the up-next card. The card
   keeps its place and just yields room — no overlay, no popup, no shrink-to-380. */
/* Resume open: the row holds card + resume + up-next together. The up-next
   card STAYS VISIBLE (compact) so the rep never loses sight of who's next;
   the resume is width-capped so all three fit a 1440px viewport. */
/* Card 50% bigger (~480px) when the resume is open; resume takes the rest. */
/* When a resume is open, the dialer expands past its 1200px cap to full width
   so the candidate card stays FULL-SIZE beside the 720px resume (the cap was
   squeezing the card off-screen). */
.blitz-screen.resume-open .dialer{max-width:none;width:100%}
/* Card keeps normal width; resume is CAPPED (a letter-size doc only needs ~720px
   to read). Do NOT let the resume grow to fill all leftover space. */
.blitz-screen .dialrow.dialrow-resume-open{justify-content:flex-start}
.blitz-screen .dialrow.dialrow-resume-open > .cc-dialer-wrap{flex:1 1 auto;min-width:0}
.blitz-screen .dialrow.dialrow-resume-open > .upnext-v{flex:0 0 128px;padding:16px 12px}
.blitz-screen .inline-resume{flex:0 0 720px;width:720px;max-width:44vw;min-width:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 14px 36px -20px rgba(50,38,130,.45),0 1px 2px rgba(20,20,50,.04)}
.blitz-screen .inline-resume-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border);flex:none}
.blitz-screen .inline-resume-title{font-weight:700;font-size:14px;letter-spacing:-.01em}
.blitz-screen .inline-resume-nav{margin-left:auto;display:flex;gap:8px}
.blitz-screen .inline-resume-nav .cnav-btn{padding:6px 12px;font-size:12px}
.blitz-screen .inline-resume-head .mclose{margin-left:10px}
.blitz-screen .inline-resume-frame{flex:1 1 auto;width:100%;border:0;background:#fff;display:block;min-height:0}
/* Make the dialer card itself the flex container that stretches full-height so
   the resume panel beside it fills the whole strip height. */
.blitz-screen .dialrow.dialrow-resume-open{align-items:stretch}
.blitz-screen .dialrow.dialrow-resume-open > .cc-dialer-wrap > .cc-dialer{height:100%}
/* Narrow viewports: stack (resume on top, brief below), still in-window */
@media (max-width:900px){
  .blitz-screen .mresume-split{flex-direction:column;height:92vh;width:96vw}
  .blitz-screen .mresume-split .modal.modal-brief{flex:0 0 auto;max-width:100%;max-height:38%}
  .blitz-screen .mresume-panel{flex:1 1 auto}
}
.blitz-screen .cheer{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;background:rgba(20,18,40,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;padding:20px}
.blitz-screen .cheercard{position:relative;width:min(440px,92vw);border-radius:24px;overflow:hidden;background:linear-gradient(160deg,#1d1936,#2c2560 60%,#1d1936);box-shadow:0 60px 140px -40px rgba(20,15,60,.9);animation:chpop .45s cubic-bezier(.2,1.4,.3,1) both}
@keyframes chpop{0%{transform:scale(.55);opacity:0}100%{transform:scale(1);opacity:1}}
.blitz-screen .ch-rays{position:absolute;inset:-70%;background:repeating-conic-gradient(rgba(122,115,255,.16) 0 9deg,transparent 9deg 18deg);animation:chspin 14s linear infinite}
@keyframes chspin{to{transform:rotate(360deg)}}
.blitz-screen .ch-in{position:relative;padding:34px 30px 30px;text-align:center;color:#fff}
.blitz-screen .ch-eye{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#a79ef2;font-weight:600}
.blitz-screen .ch-av{width:76px;height:76px;border-radius:50%;margin:18px auto 0;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;box-shadow:0 0 0 3px #1d1936,0 0 0 6px rgba(167,158,242,.5),0 18px 40px -12px rgba(122,115,255,.8)}
.blitz-screen .ch-name{font-size:30px;font-weight:800;letter-spacing:-.03em;margin-top:14px;font-style:italic;text-transform:uppercase;line-height:1.05}
.blitz-screen .ch-role{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;color:#ffd166;margin-top:9px}
.blitz-screen .ch-sub{font-size:12.5px;color:#b9b2e8;margin-top:12px}
@media (prefers-reduced-motion:reduce){
.blitz-screen .ch-rays{animation:none}
.blitz-screen .cheercard{animation:none}
.blitz-screen .livedot{animation:none}

}
/* Orientation-schedule button: inline on the wbar between the identity block
   and Logout (was viewport-fixed, which hung off the card once the global
   topbar died — Ben, 2026-07-08). */
.blitz-screen .calbtn{width:38px;height:38px;border:1px solid #d6d2ff;background:#f7f6ff;border-radius:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--primary);transition:.15s;flex:none;box-shadow:0 2px 6px -2px rgba(80,60,200,.25)}
.blitz-screen .calbtn:hover{border-color:#cfcaff;color:var(--primary);background:#efedff;transform:translateY(-1px)}
.blitz-screen .oscrim{position:fixed;inset:0;background:rgba(20,18,40,.38);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:75;display:none;align-items:center;justify-content:center;padding:24px}
.blitz-screen .oscrim.on{display:flex}
.blitz-screen .oscard{background:var(--bg);border:1px solid var(--border);border-radius:20px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 40px 100px -40px rgba(50,38,130,.6)}
.blitz-screen .os-head{padding:20px 24px 16px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.blitz-screen .os-title{font-weight:800;font-size:21px;letter-spacing:-.02em;margin-top:5px}
.blitz-screen .os-grid{padding:8px 24px 4px}
.blitz-screen .os-row{display:flex;align-items:center;gap:11px;padding:13px 0;border-bottom:1px solid var(--border)}
.blitz-screen .os-role{font-weight:700;font-size:15px;width:84px}
.blitz-screen .os-cad{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.blitz-screen .os-time{margin-left:auto;font-family:var(--mono);font-size:14px;font-weight:700;color:var(--primary);letter-spacing:.02em}
.blitz-screen .os-rules{margin:14px 24px 22px;background:#f3f2ff;border:1px solid #e6e3ff;border-radius:14px;padding:14px 16px}
.blitz-screen .os-rlab{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary)}
.blitz-screen .os-rule{display:flex;gap:10px;margin-top:10px;font-size:13px;line-height:1.45}
.blitz-screen .os-rule b{flex:none;width:20px;height:20px;border-radius:7px;background:var(--grad);color:#fff;font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}

/* ==== CALL DISPOSITION + NOTE + DAILY LEDGER (feat/blitz-notes-ledger) ====
   Server-persisted call outcome + note per candidate, and the rep's daily
   ledger overlay. Zero red: negative dispositions use muted grey (--c-red is
   already remapped to grey), booked uses purple, callback uses yellow. Reuses
   the .oscard/.os-head overlay shell for the ledger. */
.blitz-screen .st.grey{background:var(--c-red);box-shadow:0 0 0 3px rgba(135,146,162,.24),0 0 7px rgba(135,146,162,.6);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-red) 24%,transparent),0 0 7px color-mix(in srgb,var(--c-red) 60%,transparent)}
.blitz-screen .callsec{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:12px}
.blitz-screen .dispwrap{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.blitz-screen .dispwrap .ml{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-top:9px}
.blitz-screen .dispwell{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1 1 auto}
.blitz-screen .dchip{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.03em;color:var(--muted);background:#fff;border:1px solid var(--border);border-radius:9px;padding:8px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.13s;box-shadow:0 1px 2px rgba(20,20,50,.05)}
.blitz-screen .dchip:hover{border-color:var(--border2);transform:translateY(-1px)}
.blitz-screen .dchip .ddot{width:8px;height:8px;opacity:.55;transition:.13s}
.blitz-screen .dchip.on{color:var(--text);font-weight:700;border-color:var(--primary);box-shadow:0 0 0 1px var(--primary),0 6px 14px -8px rgba(80,60,200,.5)}
.blitz-screen .dchip.on .ddot{opacity:1}
.blitz-screen .dchip.on.dchip-purple{border-color:var(--c-purple);box-shadow:0 0 0 1px var(--c-purple),0 6px 14px -8px rgba(110,84,255,.5)}
.blitz-screen .dchip.on.dchip-yellow{border-color:var(--c-yellow);box-shadow:0 0 0 1px var(--c-yellow),0 6px 14px -8px rgba(255,196,0,.45)}
/* BLANK disposition dots (Ben 2026-07-18): no color-coding — neutral outlined
   check for every disposition. Selected chip gets a subtle neutral emphasis. */
.blitz-screen .st.blank,.blitz-screen .ddot.blank{background:transparent;border:1.5px solid var(--border,#d5d3e0);box-shadow:none;border-radius:50%}
.blitz-screen .dchip.on .ddot.blank{border-color:var(--text,#1a1a24);background:transparent;box-shadow:none}
.blitz-screen .dchip.on.dchip-blank{border-color:var(--text,#1a1a24);box-shadow:0 0 0 1px var(--text,#1a1a24)}

/* Callback scheduler modal (Ben 2026-07-18): pick a real callback date+time. */
.blitz-screen .cbsched-back,.cbsched-back{position:fixed;inset:0;background:rgba(20,18,40,.42);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:9000}
.cbsched-card{background:var(--surface,#fff);border:1px solid var(--border,#e5e3ef);border-radius:16px;padding:22px 22px 18px;width:min(380px,92vw);box-shadow:0 24px 60px -20px rgba(30,20,80,.4);font-family:var(--sans,inherit)}
.cbsched-title{font-size:17px;font-weight:700;color:var(--text,#1a1a24)}
.cbsched-sub{font-size:13px;color:var(--muted,#6b7280);margin:5px 0 16px}
.cbsched-row{display:flex;gap:10px}
.cbsched-in{flex:1;font:inherit;font-size:14px;padding:10px 11px;border:1px solid var(--border,#d5d3e0);border-radius:10px;background:var(--surface,#fff);color:var(--text,#1a1a24)}
.cbsched-in:focus{outline:none;border-color:var(--primary,#635bff);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary,#635bff) 20%,transparent)}
.cbsched-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.cbsched-btn{font:inherit;font-size:13px;font-weight:600;padding:9px 16px;border-radius:10px;cursor:pointer;border:1px solid var(--border,#d5d3e0)}
.cbsched-cancel{background:var(--surface,#fff);color:var(--muted,#6b7280)}
.cbsched-confirm{background:var(--primary,#635bff);border-color:transparent;color:#fff}
.cbsched-confirm:hover{filter:brightness(1.05)}

.blitz-screen .notewrap{display:flex;flex-direction:column;gap:6px}
.blitz-screen .notewrap .ml{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:600}
.blitz-screen .callnote{font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--text);background:#fff;border:1px solid var(--border);border-radius:11px;padding:10px 12px;resize:vertical;min-height:52px;max-height:120px;outline:none;transition:.13s;width:100%;box-sizing:border-box}
.blitz-screen .callnote:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,91,255,.12)}
.blitz-screen .callnote::placeholder{color:var(--faint)}
.blitz-screen .note-unsaved{font-family:var(--mono);font-size:10px;letter-spacing:.02em;color:var(--faint);display:flex;align-items:center;gap:6px}
.blitz-screen .note-unsaved::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--faint);flex:none}
/* Daily ledger overlay content (inside the reused .oscard shell). */
.blitz-screen .ldg-empty{padding:30px 24px;text-align:center;color:var(--faint);font-size:13.5px}
.blitz-screen .ldg-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px 24px 8px}
.blitz-screen .ldg-stat{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 12px;text-align:center;box-shadow:0 1px 2px rgba(20,20,50,.04)}
.blitz-screen .ldg-n{font-family:var(--mono);font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--text);line-height:1}
.blitz-screen .ldg-l{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:7px}
.blitz-screen .ldg-brk{margin:8px 24px 22px;background:#f3f2ff;border:1px solid #e6e3ff;border-radius:14px;padding:8px 16px 12px}
.blitz-screen .ldg-brk-lab{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);padding:10px 0 4px}
.blitz-screen .ldg-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid #e6e3ff}
.blitz-screen .ldg-row:last-child{border-bottom:0}
.blitz-screen .ldg-role{font-size:13px;color:var(--text);font-weight:500}
.blitz-screen .ldg-cnt{margin-left:auto;font-family:var(--mono);font-size:14px;font-weight:800;color:var(--text)}
/* PERSONAL INVITE MODAL (Ben, 2026-07-13): body reuses .oscard/.os-head
   verbatim (same scrim/card/close as the orientation-schedule modal). Only
   the form-field primitives below are new -- lifted straight from .search's
   input treatment (mono, var(--border), 9px radius) so the form matches
   Blitz typography exactly with no new visual language. */
.blitz-screen .pi-body{padding:18px 24px 24px}
.blitz-screen .pi-row{display:flex;gap:12px;margin-bottom:14px}
.blitz-screen .pi-field{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.blitz-screen .pi-label{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.blitz-screen .pi-input{font-family:var(--mono);font-size:13.5px;padding:11px 13px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);outline:none;width:100%}
.blitz-screen .pi-input:focus{border-color:#cfcaff}
.blitz-screen .pi-input::placeholder{color:var(--faint)}
.blitz-screen .pi-input.pi-err{border-color:var(--muted)}
.blitz-screen .pi-errtxt{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:2px}
.blitz-screen .pi-seg{display:flex;background:#f0eff5;border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px}
.blitz-screen .pi-seg.pi-err{border-color:var(--muted)}
.blitz-screen .pi-seg button{flex:1;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:9px 10px;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:7px;transition:.14s}
.blitz-screen .pi-seg button.on{background:var(--grad);color:#fff;box-shadow:0 6px 14px -8px rgba(80,60,200,.6)}
.blitz-screen .pi-actions{display:flex;gap:10px;margin-top:20px}
.blitz-screen .pi-cancel{flex:none;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:13px 16px;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:11px;cursor:pointer;transition:.14s}
.blitz-screen .pi-cancel:hover{border-color:#cfcaff;color:var(--text)}
.blitz-screen .pi-submit{flex:1;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:13px;border:0;border-radius:11px;background:var(--grad);color:#fff;cursor:pointer;transition:.14s;box-shadow:0 10px 22px -12px rgba(80,60,200,.6)}
.blitz-screen .pi-submit:hover{transform:translateY(-1px)}
.blitz-screen .pi-submit:disabled{background:#eceef3;color:var(--faint);cursor:not-allowed;box-shadow:none;transform:none}
.blitz-screen .pi-apierr{margin-top:14px;background:#f3f2ff;border:1px solid #e6e3ff;border-radius:11px;padding:11px 13px;font-family:var(--mono);font-size:11.5px;color:var(--muted);line-height:1.5}
@media (max-width:520px){
  .blitz-screen .pi-row{flex-direction:column;gap:14px;margin-bottom:0}
  .blitz-screen .pi-row .pi-field{margin-bottom:14px}
}
.blitz-screen /* TOAST */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(30px);background:var(--text);color:#fff;padding:13px 20px;border-radius:13px;font-family:var(--mono);font-size:12px;letter-spacing:.01em;z-index:80;opacity:0;transition:.28s cubic-bezier(.3,.7,.2,1);display:flex;align-items:center;gap:11px;box-shadow:0 20px 50px -18px rgba(20,18,40,.7);max-width:90vw}
.blitz-screen .toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.blitz-screen .toast .tx b{font-weight:700}
@keyframes cin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.blitz-screen .anim{animation:cin .32s ease both}
@media (prefers-reduced-motion:reduce){
.blitz-screen .blob{animation:none}
.blitz-screen .anim{animation:none}

}
.blitz-screen button, .blitz-screen input, .blitz-screen a{-webkit-tap-highlight-color:transparent}
@media (max-width:760px){
.blitz-screen .cover{min-height:0;justify-content:flex-start;padding:26px 18px 44px}
.blitz-screen .brandline .orb-sm{width:24px;height:24px}
.blitz-screen .prep{margin-top:18px;gap:13px}
.blitz-screen .prep-av{width:52px;height:52px}
.blitz-screen .prep-n{font-size:22px}
.blitz-screen .eyebrow{margin-top:20px;font-size:11px}
.blitz-screen .hero{font-size:33px;max-width:100%;letter-spacing:-.022em}
.blitz-screen .intro{font-size:15px;margin-top:12px}
.blitz-screen .stats{grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.blitz-screen .tile{padding:12px 14px}
.blitz-screen .tile .tv{font-size:23px}
.blitz-screen .metaline{margin-top:14px;font-size:10.5px}
.blitz-screen .ctas{flex-direction:column;align-items:stretch;gap:10px;margin-top:22px}
.blitz-screen .ctas .btn-go, .blitz-screen .ctas .btn-ghost{width:100%;text-align:center;padding:15px}
.blitz-screen .live{margin-left:0;margin-top:2px;justify-content:center;text-align:center}
.blitz-screen .page-shell.blitz-shell{padding:10px}
.blitz-screen .wbar-in{padding:0 14px;height:54px;gap:10px}
.blitz-screen .wbrand .orb-sm{width:28px;height:28px}
.blitz-screen .wtabs{margin-left:8px;padding-left:8px}
.blitz-screen .wtab span{display:none}
.blitz-screen .wtab{padding:8px 10px}
.blitz-screen .prog{display:none}
.blitz-screen .wright{gap:9px}
.blitz-screen .seg button{padding:9px 12px;font-size:10px}
.blitz-screen .binsbtn{padding:9px 12px}
.blitz-screen .fbar{padding:10px 14px;gap:7px}
.blitz-screen .fsep{display:none}
.blitz-screen .search{flex:1 1 100%;order:10;font-size:16px;min-width:0}
.blitz-screen .pibtn{flex:1 1 100%;order:9;justify-content:center;margin-left:0}
.blitz-screen .fchip{padding:9px 12px}
.blitz-screen .dialer{padding:16px 14px 20px;overflow-y:auto}
.blitz-screen .calbtn{width:34px;height:34px;box-shadow:none}
.blitz-screen .scrollwrap{padding:14px 14px 90px}
.blitz-screen .cc{padding:16px 16px;border-radius:16px}
.blitz-screen .cc-dialer{padding:18px 16px;display:block}
.blitz-screen .dialrow{flex-direction:column;flex:none}
.blitz-screen .upnext-v{flex-basis:auto;width:100%;order:2;margin-top:0}
.blitz-screen .whoami{padding-left:0;border-left:none}
.blitz-screen .wa-txt{display:none}
.blitz-screen .savemobile{display:flex;width:100%;justify-content:center;margin-top:10px}
.blitz-screen .cf-actions{margin-left:0;width:100%;justify-content:space-between}
.blitz-screen .mark-sec{margin-left:0}
.blitz-screen .workrow{flex-direction:column}
.blitz-screen .hrail{flex-direction:row;width:100%;height:auto;border-right:0;border-bottom:1px solid var(--border);padding:9px 12px;overflow-x:auto;overflow-y:hidden;justify-content:flex-start}
.blitz-screen .hstem{width:14px;height:2px;flex:none;min-height:0;max-height:none;margin:0 5px;align-self:center}
.blitz-screen .hlab, .blitz-screen .hneed{display:none}
.blitz-screen .hnode, .blitz-screen .hn-img, .blitz-screen .hn-init, .blitz-screen .hn-tier{width:56px;height:56px}
.blitz-screen .bscrim{padding:0}
.blitz-screen .bracket{border-radius:0;max-width:100%;max-height:100%;height:100%}
.blitz-screen .dlrow{flex-wrap:wrap;gap:10px;padding:12px 14px}
.blitz-screen .dunits{width:100%;order:5}
.blitz-screen .dstarter{flex:1;width:auto}
.blitz-screen .dcscore{margin-left:0;width:100%;justify-content:space-between}
.blitz-screen .dc-mid{gap:14px}
.blitz-screen .vsline{display:none}
.blitz-screen .cc-head{gap:12px}
.blitz-screen .cc-av, .blitz-screen .cc-dialer .cc-av{width:46px;height:46px;font-size:15px}
.blitz-screen .cc-name, .blitz-screen .cc-dialer .cc-name{font-size:21px}
.blitz-screen .cc-score{width:50px}
.blitz-screen .score, .blitz-screen .score-svg{width:46px;height:46px}
.blitz-screen .score-n{font-size:16px}
.blitz-screen .creds{gap:8px}
.blitz-screen .bio, .blitz-screen .cc-dialer .bio{font-size:15px}
.blitz-screen .cc-dialer .bio{flex:none;overflow-y:visible;padding-right:0}
.blitz-screen .mark{gap:6px}
.blitz-screen .mark .ml{flex:1 1 100%;margin:0 0 3px}
.blitz-screen .oc{padding:12px 13px;flex:1 1 auto;justify-content:center}
.blitz-screen .foot{gap:8px}
.blitz-screen .dial{flex:1 1 100%;justify-content:center;padding:14px;font-size:15px;width:auto}
.blitz-screen .lnk{flex:1 1 auto;justify-content:center;padding:12px}
.blitz-screen .foot-out{flex:1 1 100%;margin-left:0;margin-top:2px;justify-content:flex-start}
.blitz-screen .dialnav{gap:8px;margin-top:16px}
.blitz-screen .navbtn{flex:1;padding:14px 10px}
.blitz-screen .dialpos{min-width:auto;flex:none;padding:0 4px}
.blitz-screen .dialhint{display:none}
.blitz-screen .upnext{padding:11px 14px}
.blitz-screen .upnext .us{display:none}
.blitz-screen .done-card{padding:30px 22px;margin:26px auto}
.blitz-screen .drawer{width:100%;max-width:100%}
.blitz-screen .dbody{padding:6px 16px 24px}
.blitz-screen .mscrim{padding:0;align-items:stretch}
.blitz-screen .modal{border-radius:0;max-width:100%;max-height:100%;height:100%}
.blitz-screen .mh{padding:18px 16px 15px}
.blitz-screen .mb{padding:18px 16px 26px}
.blitz-screen .mrow{flex-direction:column;gap:4px}
.blitz-screen .mrow .mv{text-align:left;max-width:100%}
.blitz-screen .toast{left:12px;right:12px;max-width:none;transform:translateY(30px);bottom:16px}
.blitz-screen .toast.on{transform:translateY(0)}

}
@media (max-width:440px){
.blitz-screen .wbrand .wt{display:none}
.blitz-screen .hero{font-size:29px}
.blitz-screen .prep-n{font-size:20px}

}
@media (max-height:660px){
.blitz-screen .dialer{overflow-y:auto}
.blitz-screen .dialrow{flex:none}
.blitz-screen .cc-dialer .bio{flex:none;overflow-y:visible;padding-right:0}

}
/* DEPTH CHART short-viewport fit (2026-07-14): the .bracket container is
   already correctly capped + flex-column with a scrolling .bbody, but on a
   short viewport the tall .dchead squeezes the body. Compress the header
   (tighter padding, smaller hero score, collapse the coach row) and tighten
   pod rows so 10 pods + a fully-visible pinned header fit without the header
   being clipped. Header stays flex:none (pinned); body scrolls inside. */
@media (max-height:900px){
.blitz-screen .dchead{padding:14px 22px 13px}
.blitz-screen .dc-mid{margin-top:11px;gap:14px}
.blitz-screen .dstat b{font-size:25px}
.blitz-screen .dcmeter{margin-top:11px}
.blitz-screen .dc-sub{margin-top:7px}
.blitz-screen .standings{padding:12px 24px 0}
.blitz-screen .dlrow{padding:8px 14px;margin-bottom:6px}
}
@media (max-height:760px){
.blitz-screen .dchead{padding:11px 20px 10px}
/* Collapse the coach row (photos + VS) but KEEP the .dcscore stat block so
   the real Seats filled / Still to fill / Region fill numbers stay visible. */
.blitz-screen .dc-mid{margin-top:9px}
.blitz-screen .dc-mid .coach, .blitz-screen .dc-mid .vsline{display:none}
.blitz-screen .dcscore{margin-left:0;width:100%;justify-content:space-between}
.blitz-screen .dstat b{font-size:22px}
.blitz-screen .dcmeter{margin-top:9px}
.blitz-screen .dlrow{padding:7px 13px;margin-bottom:5px}
}
.blitz-screen .loadovl{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:rgba(253,252,251,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.blitz-screen .loadcard{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:28px 30px;text-align:center;max-width:320px;box-shadow:0 20px 60px -24px rgba(50,38,130,.4)}
.blitz-screen .ldspin{width:26px;height:26px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--primary);margin:0 auto 14px;animation:ldspin .8s linear infinite}
@keyframes ldspin{to{transform:rotate(360deg)}}
.blitz-screen .loadcard .lt{font-weight:700;font-size:16px;margin-top:2px}
.blitz-screen .loadcard .ls{color:var(--muted);font-size:13px;margin-top:6px;line-height:1.5}
.blitz-screen .loadcard .btn-go{margin-top:16px}
.blitz-screen .exportrow{display:flex;gap:8px;margin:2px 0 10px}
.blitz-screen .exportrow .lnk{flex:1;justify-content:center}

/* ===== pages/resume-blitz/pipeline.css ===== */
/* ============================================================
 * APEX RECRUITING OS — HIRING PIPELINE (pp- namespace)
 * Tokens copied verbatim from resume-blitz.css (.blitz-screen block) so this
 * screen matches the locked Resume Blitz look exactly. No page scroll ever —
 * only .pp-chase-strip and .pp-col-cards scroll internally.
 * ============================================================ */
.pp-screen{--bg:#fdfcfb;--surface:#ffffff;--border:#e6e8ec;--border2:#dfe1e8;--text:#1a1f36;--muted:#697386;--faint:#8792a2;--primary:#635bff;--primary-d:#4f46e5;--grad:linear-gradient(135deg,#7a73ff,#635bff 35%,#4f46e5 65%,#2563eb);--mono:'JetBrains Mono',ui-monospace,monospace;--sans:'Inter Tight',-apple-system,BlinkMacSystemFont,sans-serif;--c-green:#00d26a;--c-blue:#2f80ff;--c-purple:#6e54ff;--c-yellow:#ffc400;--c-red:#8792a2}
.pp-screen *{box-sizing:border-box}
.pp-screen{margin:0;height:100%;width:100%;display:flex;flex-direction:column;min-height:0;position:relative}
.pp-screen{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden}
/* MASTER SHELL (2026-07-25): under the QA master shell this class sits on the
 * shell's content host (.rsx-tool.ms-content) instead of on #app-root. That
 * host declares overflow-y:auto as the generic page scroller, and because the
 * shell injects its <style> into <head> at runtime it lands AFTER bundle.css
 * with equal specificity — so it would win and hand this cockpit a second,
 * outer scrollbar. This screen is no-page-scroll by design (only
 * .pp-chase-strip and .pp-col-cards scroll internally), so reassert it with a
 * compound selector that outranks the single-class shell rule. Legacy path is
 * unaffected: #app-root never carries .rsx-tool. */
.pp-screen.rsx-tool,.pp-screen.ms-content{overflow:hidden}

.pp-screen .pp-backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#fdfcfb}
.pp-screen .amb{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.pp-screen .blob{position:absolute;border-radius:50%;mix-blend-mode:multiply;will-change:transform}
.pp-screen .b1{width:680px;height:680px;left:-200px;top:-240px;background:radial-gradient(circle,rgba(99,91,255,.16),transparent 62%);animation:ppd1 30s ease-in-out infinite}
.pp-screen .b2{width:560px;height:560px;right:-160px;top:120px;background:radial-gradient(circle,rgba(124,116,255,.13),transparent 62%);animation:ppd2 36s ease-in-out infinite}
.pp-screen .b3{width:520px;height:520px;left:30%;bottom:-260px;background:radial-gradient(circle,rgba(86,96,232,.1),transparent 64%);animation:ppd3 42s ease-in-out infinite}
@keyframes ppd1{0%,100%{transform:translate(0,0)}50%{transform:translate(90px,70px)}}
@keyframes ppd2{0%,100%{transform:translate(0,0)}50%{transform:translate(-80px,50px)}}
@keyframes ppd3{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,-60px)}}

.pp-screen .page-shell.pp-shell{position:relative;z-index:1;flex:1 1 auto;min-height:0;display:flex;padding:26px 34px 34px;background:transparent}
.pp-screen .page-card.pp-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl,20px);box-shadow:0 18px 48px -28px rgba(50,38,130,.34),0 1px 2px rgba(20,20,50,.04)}
.pp-screen .pp-host{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}

.pp-screen .mono{font-family:var(--mono)}

/* ---- header bar ---- */
.pp-screen .pp-bar{flex:none;position:relative;z-index:30;background:rgba(253,252,251,.82);-webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid var(--border)}
.pp-screen .pp-bar-in{max-width:none;margin:0;padding:0 30px;height:60px;display:flex;align-items:center;gap:16px}
.pp-screen .pp-brand{display:flex;align-items:center;gap:11px;cursor:pointer;flex:none}
.pp-screen .orb-sm{width:30px;height:30px;border-radius:9px;object-fit:contain;background:#0c1020;box-shadow:0 8px 20px -8px rgba(30,22,80,.5),0 0 0 1px rgba(99,91,255,.14)}
.pp-screen .pp-bt{font-weight:700;font-size:14px;letter-spacing:-.01em;line-height:1.1}
.pp-screen .pp-bt small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:500;margin-top:2px}

.pp-screen .pp-tabs{display:flex;align-items:center;gap:4px;margin-left:18px;padding-left:18px;border-left:1px solid var(--border)}
.pp-screen .pp-tab{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:-.01em;cursor:pointer;transition:.15s}
.pp-screen .pp-tab:hover{color:var(--text);background:rgba(20,20,50,.045)}
.pp-screen .pp-tab.on{color:var(--primary);background:#f7f6ff;border-color:#d6d2ff;cursor:default}

.pp-screen .pp-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.pp-screen .pp-whoami{display:flex;align-items:center;gap:10px;padding-left:14px;border-left:1px solid var(--border)}
.pp-screen .pp-wa-av,.pp-screen .pp-wa-photo{width:36px;height:36px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-weight:700;font-size:12.5px;object-fit:cover;box-shadow:0 0 0 3px #fff,0 5px 12px -5px rgba(50,38,130,.55)}
.pp-screen .pp-wa-txt{display:flex;flex-direction:column;line-height:1.18}
.pp-screen .pp-wa-n{font-weight:700;font-size:13.5px;letter-spacing:-.01em}
.pp-screen .pp-wa-r{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.pp-screen .pp-logout{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:8px 13px;border:1px solid var(--border);background:var(--surface);border-radius:10px;cursor:pointer;display:flex;gap:8px;align-items:center;transition:.14s;color:var(--muted)}
.pp-screen .pp-logout:hover{border-color:#d6d2ff;color:var(--primary)}

/* ---- role tab row ---- */
/* DESIGN LOCK — 'Hiring for' role segmented control (Pipeline.dc.html) */
.pp-screen .pp-rolerow{flex:none;display:flex;align-items:center;gap:12px;padding:12px 30px;border-bottom:1px solid var(--border)}
.pp-screen .pp-rolelabel{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.pp-screen .pp-seg{display:inline-flex;align-items:center;gap:3px;background:var(--bg-tint);border:1px solid var(--border);border-radius:12px;padding:3px}
.pp-screen .pp-segbtn{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:-.005em;color:var(--muted);background:transparent;border:0;border-radius:9px;padding:6px 13px;cursor:pointer;transition:.14s}
.pp-screen .pp-segbtn:hover{color:var(--text)}
.pp-screen .pp-segbtn.on{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(20,20,50,.1),0 0 0 1px var(--border)}
.pp-screen .pp-segbtn svg{width:13px;height:13px;flex:none;color:var(--faint);transition:.14s}
.pp-screen .pp-segbtn.on svg{color:var(--primary)}
.pp-screen .pp-segn{font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--faint);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:1px 6px;line-height:1.5}
.pp-screen .pp-segbtn.on .pp-segn{color:var(--primary)}
.pp-screen .pp-kb-chasecount{font-family:var(--mono);font-size:9px;font-weight:700;color:var(--primary);background:#f3f2ff;border:1px solid #e6e3ff;border-radius:999px;padding:2px 8px;display:inline-flex;align-items:center;gap:5px;flex:none;white-space:nowrap}
.pp-screen .pp-kb-chasecount::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--primary);animation:ppblink 1.6s ease-in-out infinite}
/* design lock: chase = amber blinker on the card itself (strip retired) */
@keyframes ppblink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(99,91,255,.5)}50%{opacity:.6;box-shadow:0 0 0 4px rgba(99,91,255,0)}}
@keyframes ppchase{0%,100%{border-color:var(--status-done-bd);box-shadow:0 0 0 0 rgba(99,91,255,.35)}50%{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,91,255,.09)}}
.pp-screen .pp-kb-chase{animation:ppchase 1.8s ease-in-out infinite}
.pp-screen .pp-kb-ontrack .pp-kb-av{position:relative}
.pp-screen .pp-kb-ontrack .pp-kb-av::after{content:'';position:absolute;right:-2px;bottom:-2px;width:7px;height:7px;border-radius:50%;background:#10b981;border:1.5px solid #fff}

/* ---- body ---- */
.pp-screen .pp-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:18px 30px 22px}

/* ---- chase strip ---- */
.pp-screen .pp-chase{flex:none;margin-bottom:16px}
.pp-screen .pp-chase-head{display:flex;align-items:baseline;gap:10px;margin-bottom:9px}
.pp-screen .pp-chase-title{font-weight:800;font-size:14.5px;letter-spacing:-.015em}
.pp-screen .pp-chase-sub{font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.01em}
.pp-screen .pp-chase-count{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--primary);background:#f3f2ff;border:1px solid #e6e3ff;border-radius:999px;padding:2px 10px}
.pp-screen .pp-chase-strip{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 8px;scrollbar-width:thin}
.pp-screen .pp-chase-card{flex:0 0 240px;display:flex;gap:11px;align-items:flex-start;background:repeating-linear-gradient(135deg,transparent 0,transparent 8px,rgba(99,91,255,.04) 8px,rgba(99,91,255,.04) 10px),linear-gradient(135deg,rgba(122,115,255,.08),rgba(99,91,255,.03) 45%,rgba(37,99,235,.07)),#fdfcfb;border:1px solid var(--border);border-radius:14px;padding:12px 13px;position:relative}
.pp-screen .pp-chase-card.pp-stalled{opacity:.6}
.pp-screen .pp-chase-av{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-weight:700;font-size:11.5px;box-shadow:0 0 0 3px #fff}
.pp-screen .pp-chase-body{min-width:0;flex:1}
.pp-screen .pp-chase-namerow{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pp-screen .pp-chase-name{font-weight:700;font-size:13.5px;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}
.pp-screen .pp-chase-meta{display:flex;align-items:center;gap:6px;margin-top:5px;font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.01em}
.pp-screen .pp-chase-sep{color:var(--border2)}
.pp-screen .pp-chase-phone{color:var(--muted);-webkit-user-select:text;user-select:text}
.pp-screen .pp-chase-empty{font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.02em;padding:16px 14px;border:1px dashed var(--border2);border-radius:14px;background:rgba(255,255,255,.5);width:100%}

/* ---- tier pill (shared) ---- */
.pp-screen .pp-tierpill{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:5px}
.pp-screen .pp-tier-aaa{background:#efeefe;color:var(--primary)}
.pp-screen .pp-tier-aa{background:#eef4ff;color:var(--c-blue)}
.pp-screen .pp-tier-a{background:#f1f3f7;color:var(--muted)}

/* ---- chip (shared: booked / unbooked / stalled) ---- */
.pp-screen .pp-chip{display:inline-flex;align-items:center;font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 7px;border-radius:6px;white-space:nowrap}
.pp-screen .pp-chip-booked{background:#e9fbf1;color:#0a7a45;border:1px solid #bfefd6}
.pp-screen .pp-chip-unbooked{background:#f1f3f7;color:var(--muted);border:1px solid var(--border)}
.pp-screen .pp-chip-stalled{background:#f1f3f7;color:var(--faint);border:1px dashed var(--border2)}

/* ---- toast (2026-07-09 — added so no-phone-on-file and other honest no-ops
   get real feedback instead of a silent dead click; dot classes match the
   .st pattern in resume-blitz.css exactly, scoped to .pp-screen's own
   --c-* tokens; box layout itself is inlined in pipeline.js) ---- */
.pp-screen .toast{opacity:1}
.pp-screen .toast .st{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
/* SAFARI COMPAT (2026-07-14): color-mix() requires Safari 16.2+. A plain-rgba
 * fallback box-shadow (matching the current --c-* token hex values) is
 * declared first since an unrecognized color-mix() inside a multi-layer
 * box-shadow invalidates the whole declaration, not just one layer. */
.pp-screen .toast .st.green{background:var(--c-green);box-shadow:0 0 0 3px rgba(0,210,106,.24),0 0 7px rgba(0,210,106,.66);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-green) 24%,transparent),0 0 7px color-mix(in srgb,var(--c-green) 66%,transparent)}
.pp-screen .toast .st.blue{background:var(--c-blue);box-shadow:0 0 0 3px rgba(47,128,255,.24),0 0 7px rgba(47,128,255,.66);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-blue) 24%,transparent),0 0 7px color-mix(in srgb,var(--c-blue) 66%,transparent)}
.pp-screen .toast .st.purple{background:var(--c-purple);box-shadow:0 0 0 3px rgba(110,84,255,.24),0 0 7px rgba(110,84,255,.66);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-purple) 24%,transparent),0 0 7px color-mix(in srgb,var(--c-purple) 66%,transparent)}
.pp-screen .toast .st.red{background:var(--c-red);box-shadow:0 0 0 3px rgba(135,146,162,.28),0 0 8px rgba(135,146,162,.74);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-red) 28%,transparent),0 0 8px color-mix(in srgb,var(--c-red) 74%,transparent)}

/* ---- Copy-phone CTA when no phone on file (honest-disabled look, not a
   dead click — clicking still fires the toastMsg() feedback) ---- */
.pp-screen .pp-kb-cta-btn.pp-kb-noval{background:var(--surface);color:var(--text-faint);border:1px dashed var(--border);box-shadow:none;opacity:.65}
.pp-screen .pp-kb-cta-btn.pp-kb-noval:hover{filter:none;color:var(--text-faint)}

/* ---- load error ---- */
.pp-screen .pp-loaderr{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--faint)}
.pp-screen .pp-loaderr-t{font-weight:700;font-size:14px;color:var(--muted)}
.pp-screen .pp-loaderr-s{font-family:var(--mono);font-size:11px;color:var(--faint)}

/* ================================================================
 * V2 — COMPACT DENSE KANBAN (design-locked, Ben 2026-07-08)
 * Source: design-mockups/recruiting-os-views/03-pipeline-kanban.html
 * Namespaced .pp-kb-* over this screen's own .pp-body; values copied
 * verbatim from the lock, only class names get the pp- prefix so
 * nothing here leaks into other screens. Runs on the GLOBAL tokens
 * from styles/00-tokens.css (--bg-soft, --surface, --grad, --status-*,
 * etc.) — every one of them already exists there, nothing redefined.
 * ================================================================ */
.pp-screen .pp-kb-board{flex:1;min-height:0;display:grid;grid-template-columns:repeat(6, 1fr);gap:10px;overflow:hidden;align-items:stretch}
.pp-screen .pp-kb-board .pp-kb-col{height:100%}
.pp-screen .pp-kb-col{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}

.pp-screen .pp-kb-col-head{flex:none;padding:9px 12px 0;border-bottom:1px solid var(--border);background:var(--surface)}
.pp-screen .pp-kb-accent{height:3px;border-radius:2px;margin-bottom:8px;background:var(--grad)}
.pp-screen .pp-kb-stage-label{display:flex;align-items:center;gap:7px;padding-bottom:8px}
.pp-screen .pp-kb-stage-label .pp-kb-icon{color:var(--text-faint);flex:none}
.pp-screen .pp-kb-stage-label .pp-kb-label{font-size:11px;font-weight:700;flex:1;letter-spacing:.03em;text-transform:uppercase;color:var(--text-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-screen .pp-kb-stage-label .pp-kb-count{font-family:var(--mono);font-size:10px;font-weight:700;background:var(--bg-tint);border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--text-faint);flex:none}
.pp-screen .pp-kb-progress{height:2px;width:100%;background:var(--bg-tint)}
.pp-screen .pp-kb-progress-fill{height:100%;background:var(--grad)}

.pp-screen .pp-kb-cards{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:8px 8px 10px;display:flex;flex-direction:column;gap:6px;scrollbar-width:thin}
.pp-screen .pp-kb-col-empty{font-family:var(--mono);font-size:10px;color:var(--text-faint);letter-spacing:.02em;line-height:1.5;padding:14px 10px;border:1px dashed var(--border-strong);border-radius:var(--radius-sm);text-align:center}

/* ---- card ---- (design lock: 3-col grid av/body/score; cta row spans below on hover)
 * Purple-gradient default + tinted avatar are the locked resting state; the
 * chase blink (pp-kb-chase) and green on-track dot (pp-kb-ontrack) carry the
 * "who to call" signal that the retired strip used to carry. */
.pp-screen .pp-kb-card{background:linear-gradient(90deg,rgba(99,91,255,.08),var(--surface) 80%);border:1px solid var(--status-done-bd);border-radius:var(--radius-sm);padding:8px 10px;transition:all var(--t);cursor:pointer;display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:center;position:relative}
.pp-screen .pp-kb-card:hover{border-color:var(--border-strong);background:var(--hover)}
.pp-screen .pp-kb-cta-btn{cursor:pointer}
.pp-screen .pp-kb-card.pp-kb-top{background:linear-gradient(90deg, rgba(99,91,255,.12), var(--surface) 80%);border-color:var(--primary)}
.pp-screen .pp-kb-card.pp-kb-stalled{opacity:.55}

.pp-screen .pp-kb-av{width:24px;height:24px;border-radius:50%;background:var(--primary-soft);color:var(--primary);border:1px solid var(--status-done-bd);display:inline-flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:700;flex-shrink:0}
.pp-screen .pp-kb-card.pp-kb-top .pp-kb-av{background:var(--primary-soft);color:var(--primary);border-color:var(--primary)}

.pp-screen .pp-kb-body{min-width:0}
.pp-screen .pp-kb-name{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.pp-screen .pp-kb-role{font-size:10px;color:var(--text-faint);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pp-screen .pp-kb-score{font-family:var(--mono);font-size:11px;font-weight:700;padding:3px 7px;border-radius:5px;white-space:nowrap}
.pp-screen .pp-kb-score.pp-kb-tier-a{background:var(--status-done-bg);color:var(--status-done-fg);border:1px solid var(--status-done-bd)}
.pp-screen .pp-kb-score.pp-kb-tier-b{background:var(--status-working-bg);color:var(--status-working-fg);border:1px solid var(--status-working-bd)}
.pp-screen .pp-kb-score.pp-kb-tier-c{background:var(--status-notstarted-bg);color:var(--status-notstarted-fg);border:1px solid var(--status-notstarted-bd)}

.pp-screen .pp-kb-cta-row{display:none;grid-column:1/-1;padding-top:6px;border-top:1px solid var(--border);margin-top:4px;gap:6px}
.pp-screen .pp-kb-card:hover .pp-kb-cta-row{display:flex}
.pp-screen .pp-kb-cta-btn{flex:1;padding:5px 8px;font-size:10.5px;font-weight:600;font-family:var(--sans);background:var(--grad);color:#fff;border:none;border-radius:5px;cursor:pointer;text-align:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:filter var(--t)}
.pp-screen .pp-kb-cta-btn:hover{filter:brightness(1.07)}
.pp-screen .pp-kb-cta-btn.pp-kb-sec{background:var(--surface);color:var(--text-soft);border:1px solid var(--border);box-shadow:none}

.pp-screen .pp-kb-more{padding:5px 0;text-align:center;font-size:10px;color:var(--text-faint);font-family:var(--mono);cursor:pointer;background:none;border:none;width:100%}
.pp-screen .pp-kb-more:hover{color:var(--primary)}

.pp-screen .pp-kb-col-foot{flex:none;padding:6px 10px 8px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);background:var(--bg-tint)}
.pp-screen .pp-kb-col-foot-label{font-family:var(--mono);font-size:9.5px;color:var(--text-faint);letter-spacing:.05em;text-transform:uppercase}
.pp-screen .pp-kb-col-foot-cta{font-size:10.5px;font-weight:600;color:var(--primary);background:none;border:none;cursor:pointer;padding:2px 6px;border-radius:4px;transition:background var(--t);font-family:var(--sans)}
.pp-screen .pp-kb-col-foot-cta:hover{background:var(--primary-soft)}

/* ---- brief popover (Ben's hover CTA -> "Brief" click target) ---- */
.pp-screen .pp-kb-pop{position:fixed;z-index:80;min-width:220px;max-width:260px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:12px 14px}
.pp-screen .pp-kb-pop-name{font-weight:700;font-size:13px;letter-spacing:-.01em;color:var(--text)}
.pp-screen .pp-kb-pop-row{display:flex;align-items:center;gap:7px;margin-top:7px;font-family:var(--mono);font-size:10.5px;color:var(--text-muted)}
.pp-screen .pp-kb-pop-row .pp-kb-pop-k{color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;font-size:9px;flex:none;width:52px}
.pp-screen .pp-kb-pop-close{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--text-faint);cursor:pointer;padding:2px;line-height:0}
.pp-screen .pp-kb-pop-close:hover{color:var(--text)}

/* Repo law (CLAUDE.md #4): every screen fits 1440x900 with NO scroll, ever —
   overflow must resolve via tabs/toggles/drawers, never a scrolling board.
   1440px was previously INSIDE the old 1500px horizontal-scroll fallback,
   which violated that law at the exact mandated viewport (fixed 2026-07-08).
   The 6-column grid is fluid (repeat(6,1fr)); fluid tracks never overflow
   their container, they just get narrower — at the mandated 1440px viewport
   the math is 1440 - 68(shell pad) - 2(card border) - 60(body pad) - 50(5
   gaps) = 1260px of track / 6 = 210px per column, comfortably above the
   ~150px floor a column needs to stay readable. Only below 1440 (a window
   genuinely narrower than the mandated desktop viewport) does the
   fixed-220px-column horizontal-scroll fallback engage as a safety net. */
@media (max-width:1340px){
  .pp-screen .pp-kb-board{grid-auto-flow:column;grid-auto-columns:220px;overflow-x:auto;overflow-y:hidden}
  .pp-screen .pp-kb-col{height:100%}
}

/* ---- SIMULATED PREVIEW (Ben, 2026-07-10, item 3) ---- */
.pp-screen .pp-sim-chip{display:inline-block;margin-left:10px;font-family:var(--mono,'JetBrains Mono',monospace);font-size:10px;font-weight:700;letter-spacing:.09em;color:var(--primary,#635bff);background:rgba(99,91,255,.10);border:1px solid rgba(99,91,255,.30);border-radius:999px;padding:3px 10px;vertical-align:middle;white-space:nowrap}
.pp-screen .pp-kb-card.pp-kb-sim{opacity:.82;border-style:dashed}

/* ================================================================
 * FABLE5 PIXEL PASS — richer Brief popover (pp2-*) + chase phone copy.
 * ================================================================ */
.pp-screen .pp2-wrap{position:fixed;z-index:80;filter:drop-shadow(0 24px 48px rgba(50,38,130,.22))}
.pp-screen .pp2-pop{width:268px;background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;overflow:hidden;position:relative}
.pp-screen .pp2-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:linear-gradient(135deg,rgba(122,115,255,.09),rgba(37,99,235,.05)),var(--bg-soft);border-bottom:1px solid var(--border)}
.pp-screen .pp2-av{width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;font-weight:700;font-size:11.5px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px #fff;flex:none}
.pp-screen .pp2-idn{min-width:0;flex:1}
.pp-screen .pp2-name{font-weight:700;font-size:13px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-screen .pp2-idrow{display:flex;gap:5px;align-items:center;margin-top:4px;flex-wrap:wrap}
.pp-screen .pp2-rows{padding:11px 14px;display:flex;flex-direction:column;gap:9px}
.pp-screen .pp2-row{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;color:var(--text-muted)}
.pp-screen .pp2-k{color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;font-size:9px;flex:none;width:52px}
.pp-screen .pp2-v{color:var(--text);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-screen .pp2-foot{display:flex;gap:6px;padding:10px 14px;border-top:1px solid var(--border);background:var(--bg-tint)}
.pp-screen .pp2-cta{flex:1;padding:7px 8px;font-family:var(--sans);font-size:10.5px;font-weight:600;background:var(--grad);color:#fff;border:none;border-radius:6px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.pp-screen .pp2-cta:hover{filter:brightness(1.07)}
.pp-screen .pp2-close{position:absolute;top:9px;right:9px;width:20px;height:20px;background:rgba(255,255,255,.72);border:1px solid var(--border);border-radius:6px;color:var(--text-faint);cursor:pointer;line-height:0;display:flex;align-items:center;justify-content:center;z-index:2;padding:0}
.pp-screen .pp2-close:hover{color:var(--text)}
.pp-screen .pp-chase-phone{cursor:copy;border-bottom:1px dashed transparent;transition:.14s}
.pp-screen .pp-chase-card:hover .pp-chase-phone{color:var(--primary);border-bottom-color:#d6d2ff}

/* ===== pages/resume-blitz/rsm-calendar.css ===== */
/* ============================================================
 * ORIENTATION CALENDAR — content styles, COPIED from the Claude
 * Design lock (Calendar.dc.html), scoped under .rc-screen. The
 * persistent deck shell (06-deck.css) owns bar + card + sizing;
 * shell/bar/backdrop rules were stripped so this only styles the
 * content inside .deck-content.
 * ============================================================ */
.rc-screen{--bg:#fdfcfb;--surface:#ffffff;--border:#e6e8ec;--border2:#dfe1e8;--text:#1a1f36;--muted:#697386;--faint:#8792a2;--primary:#635bff;--primary-d:#4f46e5;--grad:linear-gradient(135deg,#7a73ff,#635bff 35%,#4f46e5 65%,#2563eb);--mono:'JetBrains Mono',ui-monospace,monospace;--sans:'Inter Tight',-apple-system,BlinkMacSystemFont,sans-serif;--c-blue:#2f80ff;--rc-primary-soft:#f5f4ff;--rc-status-done-bd:#d6d2ff;--rc-status-done-fg:#3b34a8;--rc-status-done-bg:#eeecff;--rc-bg-soft:#fafbfc;--rc-bg-tint:#f7f8fa;--rc-hover:#f6f7f9;--text-soft:#3c4257;--rc-radius-lg:12px;--rc-shadow-sm:0 2px 5px -1px rgba(50,50,93,.08),0 1px 3px -1px rgba(0,0,0,.05);--rc-t:160ms cubic-bezier(.2,.6,.3,1);--radius-xl:16px;display:flex;flex-direction:column;min-height:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden}
.rc-screen *{box-sizing:border-box}
/* MASTER SHELL (2026-07-25): under the QA master shell this class sits on the
 * shell's content host (.rsx-tool.ms-content) instead of on #app-root. That
 * host declares overflow-y:auto as the generic page scroller, and because the
 * shell injects its <style> into <head> at runtime it lands AFTER bundle.css
 * with equal specificity — so it would win and hand this cockpit a second,
 * outer scrollbar. The calendar is no-page-scroll by design (only the grid
 * scrolls internally), so reassert it with a compound selector that outranks
 * the single-class shell rule. Legacy path is unaffected: #app-root never
 * carries .rsx-tool. */
.rc-screen.rsx-tool,.rc-screen.ms-content{overflow:hidden}
.rc-screen .rc-host{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.rc-screen .mono{font-family:var(--mono)}
.rc-screen .rc-ctrlrow{flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 30px;border-bottom:1px solid var(--border)}
.rc-screen .rc-lensstrip{display:flex;background:#f0eff5;border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px}
.rc-screen .rc-lens{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:8px 15px;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:7px;transition:.14s}
.rc-screen .rc-lens.on{background:#fff;color:var(--primary);box-shadow:0 1px 3px rgba(20,20,50,.12)}
.rc-screen .rc-weeknav{display:flex;align-items:center;gap:6px}
.rc-screen .rc-weekbtn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--rc-bg-tint);border-radius:7px;color:var(--muted);cursor:pointer;transition:var(--rc-t)}
.rc-screen .rc-weekbtn:hover{background:var(--rc-hover);color:var(--text)}
.rc-screen .rc-weeklabel{font-family:var(--mono);font-size:12px;color:var(--text);font-weight:600;letter-spacing:.02em;min-width:136px;text-align:center}
.rc-screen .rc-todaybtn{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:-.005em;padding:7px 13px;border:1px solid var(--border);background:var(--surface);border-radius:9px;cursor:pointer;color:var(--muted);transition:.14s;margin-left:4px}
.rc-screen .rc-todaybtn:hover{border-color:#cfcaff;color:var(--primary)}
.rc-screen .rc-viewtoggle{display:flex;gap:5px;margin-left:6px}
.rc-screen .rc-viewbtn{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:-.005em;padding:7px 12px;border:1px solid transparent;background:transparent;border-radius:9px;cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;gap:6px;transition:.14s}
.rc-screen .rc-viewbtn.on{border-color:var(--border);background:var(--rc-bg-tint);color:var(--text)}
.rc-screen .rc-viewbtn:not(.on):hover{color:var(--text)}
.rc-screen .rc-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:16px 30px 22px}
.rc-screen .rc-v1layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 264px;grid-template-rows:minmax(0,1fr);gap:14px}
.rc-screen .rc-kpirow{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.rc-screen .rc-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--rc-radius-lg);padding:12px 14px 11px;min-width:0}
.rc-screen .rc-kpi.hero{background:radial-gradient(60% 130% at 0% 0%,rgba(99,91,255,.07),transparent 65%),var(--surface);border-color:var(--rc-status-done-bd)}
.rc-screen .rc-kpi-label{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rc-screen .rc-kpi-ico{width:15px;height:15px;background:var(--rc-bg-tint);border:1px solid var(--border);border-radius:3px;display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--muted)}
.rc-screen .rc-kpi.hero .rc-kpi-ico{background:var(--rc-primary-soft);border-color:var(--rc-status-done-bd);color:var(--primary)}
.rc-screen .rc-kpi-val{font-family:var(--sans);font-size:22px;font-weight:700;letter-spacing:-.015em;margin-top:7px;line-height:1}
.rc-screen .rc-kpi-val.purple{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rc-screen .rc-kpi-val small{font-size:12px;font-weight:600;color:var(--faint);-webkit-text-fill-color:var(--faint)}
.rc-screen .rc-kpi-sub{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.4}
.rc-screen .rc-kpi-sub b{color:var(--text);font-weight:700}
.rc-screen .rc-kpi-dash{color:var(--faint)}
.rc-screen .rc-spark{display:flex;align-items:flex-end;gap:2px;height:20px;margin-top:9px}
.rc-screen .rc-spark-bar{flex:1;background:var(--border);border-radius:1.5px;min-height:2px}
.rc-screen .rc-spark-bar.active{background:#c9c4ff}
.rc-screen .rc-spark-bar.peak{background:var(--grad)}
.rc-screen .rc-calwrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--rc-radius-lg);overflow:hidden;display:flex;flex-direction:column;min-height:0}
.rc-screen .rc-colhead{padding:9px 10px 7px;text-align:center;border-bottom:1px solid var(--border);border-left:1px solid var(--border);background:var(--rc-bg-soft)}
.rc-screen .rc-colhead.corner{border-left:0;background:transparent}
.rc-screen .rc-dow{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rc-screen .rc-datenum{font-family:var(--sans);font-size:16px;font-weight:700;letter-spacing:-.012em;margin-top:2px;color:var(--text)}
.rc-screen .rc-colhead.today{border-bottom-color:var(--primary)}
.rc-screen .rc-colhead.today .rc-datenum{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rc-screen .rc-timeslot{height:100%;display:flex;align-items:flex-start;justify-content:flex-end;padding:5px 8px 0;font-family:var(--mono);font-size:9.5px;color:var(--faint);font-weight:500;letter-spacing:.04em;border-top:1px solid var(--border)}
.rc-screen .rc-slot{position:relative;border-top:1px solid var(--border);border-left:1px solid var(--border);height:100%}
.rc-screen .rc-slot.today{background:rgba(99,91,255,.022)}
.rc-screen .rc-ev{position:absolute;left:4px;right:4px;top:4px;bottom:4px;border-radius:6px;padding:6px 9px;cursor:pointer;transition:filter var(--rc-t),box-shadow var(--rc-t);overflow:hidden;text-align:left;border:0;font-family:var(--sans);display:flex;flex-direction:column;justify-content:center}
/* MULTI-SESSION HOUR (2026-07-14): real GHL can return several bookings inside
 * one viewer-local hour. When a slot holds more than one card, drop the single
 * absolute fill and stack the cards as a scrollable flex column so none is
 * hidden behind another. Each card auto-sizes to its content instead of
 * filling the whole hour. */
.rc-screen .rc-slot.multi{display:flex;flex-direction:column;gap:4px;padding:4px;overflow-y:auto;scrollbar-width:thin}
.rc-screen .rc-slot.multi .rc-ev{position:static;left:auto;right:auto;top:auto;bottom:auto;flex:none;justify-content:flex-start;min-height:0}
.rc-screen .rc-ev:hover{filter:brightness(1.06);box-shadow:var(--rc-shadow-sm)}
.rc-screen .rc-ev.on{filter:brightness(1.06);box-shadow:var(--rc-shadow-sm)}
.rc-screen .rc-ev.booked{background:var(--rc-primary-soft);border:1px solid var(--rc-status-done-bd)}
.rc-screen .rc-ev.booked-aaa{background:radial-gradient(70% 80% at 0% 0%,rgba(122,115,255,.24),transparent 70%),var(--rc-primary-soft);border:1px solid var(--primary);box-shadow:0 0 0 1px rgba(99,91,255,.12)}
.rc-screen .rc-ev.empty{background:transparent;border:1px dashed var(--border);align-items:center}
.rc-screen .rc-ev.empty:hover{border-color:var(--primary);background:var(--rc-primary-soft)}
.rc-screen .rc-ev-role{font-size:10.5px;font-weight:700;color:var(--primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.003em}
.rc-screen .rc-ev.booked-aaa .rc-ev-role{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rc-screen .rc-ev-meta{font-family:var(--mono);font-size:8.5px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-screen .rc-ev-row{display:flex;align-items:center;gap:4px;margin-top:2px;flex-wrap:wrap}
.rc-screen .rc-ev-chip{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.03em;color:var(--rc-status-done-fg);white-space:nowrap}
.rc-screen .rc-ev-countdown{font-family:var(--mono);font-size:8px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin-top:2px;white-space:nowrap}
.rc-screen .rc-ev-countdown.now{color:var(--primary)}
.rc-screen .rc-ev-empty-label{font-family:var(--mono);font-size:9px;color:var(--faint);letter-spacing:.04em}
.rc-screen .rc-pop-head{position:relative;padding:13px 34px 11px 14px;border-bottom:1px solid var(--border);background:var(--surface)}
.rc-screen .rc-pop-title{font-weight:700;font-size:13px;letter-spacing:-.01em}
.rc-screen .rc-pop-sub{font-family:var(--mono);font-size:9.5px;color:var(--faint);margin-top:4px;letter-spacing:.01em}
.rc-screen .rc-pop-close{position:absolute;top:8px;right:8px;width:22px;height:22px;border:1px solid var(--border);background:var(--surface);border-radius:7px;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.rc-screen .rc-pop-close:hover{color:var(--text);border-color:var(--border2)}
.rc-screen .rc-pop-body{max-height:220px;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;scrollbar-width:thin}
.rc-screen .rc-pop-empty{font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.02em;padding:14px 10px;text-align:center}
.rc-screen .rc-pop-row{display:flex;align-items:flex-start;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 10px}
.rc-screen .rc-pop-av{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-weight:700;font-size:9.5px;box-shadow:0 0 0 2px #fff}
.rc-screen .rc-pop-id{min-width:0;flex:1}
.rc-screen .rc-pop-name{font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-screen .rc-pop-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:5px}
.rc-screen .rc-tierpill{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.05em;padding:2px 6px;border-radius:5px}
.rc-screen .rc-tier-aaa{background:#efeefe;color:var(--primary)}
.rc-screen .rc-tier-aa{background:#eef4ff;color:var(--c-blue)}
.rc-screen .rc-tier-a{background:#f1f3f7;color:var(--muted)}
.rc-screen .rc-chip{display:inline-flex;align-items:center;font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:6px;white-space:nowrap}
.rc-screen .rc-chip-booked{background:var(--rc-status-done-bg);color:var(--rc-status-done-fg);border:1px solid var(--rc-status-done-bd)}
.rc-screen .rc-chip-showed{background:var(--rc-status-done-bg);color:var(--rc-status-done-fg);border:1px solid var(--rc-status-done-bd)}
.rc-screen .rc-chip-noshow{background:#f1f3f7;color:var(--muted);border:1px dashed var(--border2)}
.rc-screen .rc-chip-pending{background:#f1f3f7;color:var(--faint);border:1px solid var(--border)}
.rc-screen .rc-rail{display:flex;flex-direction:column;gap:10px;min-height:0;overflow-y:auto;scrollbar-width:thin}
.rc-screen .rc-railcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--rc-radius-lg);padding:14px 16px;flex:none}
.rc-screen .rc-railcard.hero{background:radial-gradient(60% 60% at 50% 0%,rgba(99,91,255,.10),transparent 65%),var(--surface);border-color:var(--rc-status-done-bd)}
.rc-screen .rc-rail-eyebrow{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--primary);text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;margin-bottom:8px}
.rc-screen .rc-rail-eyebrow::before{content:'';width:8px;height:1px;background:var(--primary)}
.rc-screen .rc-rail-title{font-size:13px;font-weight:600;letter-spacing:-.005em;margin-bottom:2px}
.rc-screen .rc-nextup{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px dashed var(--border)}
.rc-screen .rc-nextup:first-of-type{border-top:0;padding-top:2px}
.rc-screen .rc-nextup-av{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--rc-bg-tint);color:var(--muted);font-weight:700;font-size:10.5px;font-family:var(--mono)}
.rc-screen .rc-nextup-av.purple{background:var(--grad);color:#fff}
.rc-screen .rc-nextup-body{flex:1;min-width:0}
.rc-screen .rc-nextup-name{font-size:12px;font-weight:600;letter-spacing:-.004em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-screen .rc-nextup-meta{font-size:10.5px;color:var(--muted);margin-top:1px}
.rc-screen .rc-nextup-time{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--primary);text-align:right;flex-shrink:0}
.rc-screen .rc-time-big{font-size:15px;letter-spacing:-.008em;display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rc-screen .rc-time-sub{font-family:var(--mono);font-size:9px;color:var(--faint);letter-spacing:.04em;text-transform:uppercase;display:block}
.rc-screen .rc-nextup-empty{font-family:var(--mono);font-size:10.5px;color:var(--faint);padding:6px 0}
.rc-screen .rc-fillval{font-family:var(--sans);font-size:32px;font-weight:700;letter-spacing:-.022em;line-height:1;margin-top:8px;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rc-screen .rc-fillsub{font-size:11px;color:var(--muted);margin-top:6px}
.rc-screen .rc-fillsub b{color:var(--text)}
.rc-screen .rc-fillbar{height:6px;border-radius:99px;background:var(--rc-bg-tint);margin-top:10px;overflow:hidden}
.rc-screen .rc-fillbar-inner{height:100%;border-radius:99px;background:var(--grad)}
.rc-screen .rc-openlist{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.rc-screen .rc-openpill{font-family:var(--mono);font-size:10px;color:var(--faint);padding:4px 8px;border-radius:5px;border:1px dashed var(--border);letter-spacing:.03em;cursor:pointer;transition:all var(--rc-t);display:flex;align-items:center;gap:5px}
.rc-screen .rc-openpill:hover{border-color:var(--primary);color:var(--primary);background:var(--rc-primary-soft)}
.rc-screen .rc-openempty{font-family:var(--mono);font-size:10px;color:var(--faint);padding:4px 0}
.rc-screen .rc-monthwrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.rc-screen .rc-monthcard{max-width:420px;width:100%;text-align:center;background:repeating-linear-gradient(135deg,transparent 0,transparent 8px,rgba(99,91,255,.04) 8px,rgba(99,91,255,.04) 10px),linear-gradient(135deg,rgba(122,115,255,.08),rgba(99,91,255,.03) 45%,rgba(37,99,235,.07)),#fdfcfb;border:1px dashed var(--border2);border-radius:20px;padding:36px 32px}
.rc-screen .rc-monthicon{color:var(--primary);opacity:.55;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.rc-screen .rc-monthtitle{font-weight:800;font-size:17px;letter-spacing:-.015em}
.rc-screen .rc-monthcopy{font-size:13px;color:var(--muted);line-height:1.55;margin-top:9px}
/* ===== FABLE5 PIXEL PASS (2026-07-09) — deltas vs main@811f48c rsm-calendar.css =====
1) Grid window now DERIVES from the locked cadence's viewer-local hours (still 5 rows) instead of a hardcoded 9a-1p band — sessions can never fall outside the grid when tz conversion drifts more than an hour (the shipped file's stated ±1h assumption).
2) Hour rows stretch to fill the card (minmax(64px,1fr)) so the week grid doesn't strand dead white space below 1 PM at 900px tall.
3) Attendee popover is hoisted to screen level — it no longer clips inside the grid scroller on the bottom row.
4) Open Q2 — Show Rate + Chase List KPIs designed LIVE (toggle the "Live KPI data" tweak to see the shipped dash states).
5) Open Q1 — seats/session stays a stated assumption; now tweakable to preview 6/8/10/12 capacity. */
.rc-screen .rc-headrow{display:grid;grid-template-columns:52px repeat(7,1fr);flex:none;background:var(--surface)}
.rc-screen .rc-gridscroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column}
.rc-screen .rc-hourrow{display:grid;grid-template-columns:52px repeat(7,1fr);flex:none;height:76px;min-height:76px}
.rc-screen .rc-hourrow:first-child .rc-timeslot{border-top:0}
.rc-screen .rc-hourrow:first-child .rc-slot{border-top:0}
.rc-screen .rc-popwrap{position:absolute;z-index:70;width:300px;filter:drop-shadow(0 24px 60px rgba(50,38,130,.35))}
.rc-screen .rc-pop{background:var(--bg);border:1px solid var(--border);border-radius:14px;overflow:hidden;cursor:default}
.rc-screen .rc-kpi-link{font-size:11px;font-weight:600;color:var(--primary)}
.rc-screen .rc-kpi-link:hover{color:var(--primary-d)}
.rc-screen .rc-assume{margin-top:9px;font-family:var(--mono);font-size:9px;letter-spacing:.03em;color:var(--faint);padding:5px 8px;border:1px dashed var(--border2);border-radius:6px;background:rgba(255,255,255,.5);line-height:1.45}
/* ===== FABLE5 round 2 — dark Open Slots, populated Month, live Pod Demos ===== */
.rc-screen .rc-openlist{gap:6px;margin-top:10px}
.rc-screen .rc-openrow{display:flex;align-items:center;gap:9px;padding:7px 8px;border:1px solid var(--border);background:var(--surface);border-radius:9px;cursor:pointer;transition:.14s}
.rc-screen .rc-openrow:hover{border-color:#cfcaff;background:var(--rc-primary-soft)}
.rc-screen .rc-open-role{width:26px;height:26px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--primary);background:var(--rc-primary-soft);border:1px solid var(--rc-status-done-bd)}
.rc-screen .rc-open-body{flex:1;min-width:0}
.rc-screen .rc-open-name{font-size:11.5px;font-weight:600;color:var(--text);letter-spacing:-.004em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-screen .rc-open-meta{font-family:var(--mono);font-size:9px;color:var(--faint);margin-top:1px;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-screen .rc-open-cta{flex:none;font-family:var(--sans);font-size:10px;font-weight:600;color:#fff;background:var(--grad);border-radius:6px;padding:4px 9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);opacity:0;transition:.14s}
.rc-screen .rc-openrow:hover .rc-open-cta{opacity:1}
.rc-screen .rc-open-foot{font-family:var(--mono);font-size:9px;color:var(--faint);letter-spacing:.03em;padding-top:4px;text-align:center}
.rc-screen .rc-mg{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--rc-radius-lg);overflow:hidden}
.rc-screen .rc-mg-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-bottom:1px solid var(--border);background:var(--surface);flex:none}
.rc-screen .rc-mg-title{font-weight:700;font-size:15px;letter-spacing:-.012em}
.rc-screen .rc-mg-legend{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:9.5px;color:var(--muted);letter-spacing:.03em}
.rc-screen .rc-mg-key{display:inline-flex;align-items:center;gap:5px}
.rc-screen .rc-mg-swatch{width:11px;height:11px;border-radius:3.5px;background:var(--rc-primary-soft);border:1px solid var(--rc-status-done-bd)}
.rc-screen .rc-mg-swatch.aaa{background:radial-gradient(70% 80% at 20% 20%,rgba(122,115,255,.5),rgba(122,115,255,.12)),#f5f4ff;border-color:var(--primary)}
.rc-screen .rc-mg-swatch.open{background:transparent;border:1px dashed var(--border2)}
.rc-screen .rc-mg-head{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--border);flex:none;background:var(--rc-bg-soft)}
.rc-screen .rc-mg-dow{padding:8px 12px;text-align:right;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rc-screen .rc-mg-body{flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr}
.rc-screen .rc-mg-cell{border-top:1px solid var(--border);border-right:1px solid var(--border);padding:7px 8px 8px;min-width:0;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.rc-screen .rc-mg-cell:nth-child(7n){border-right:0}
.rc-screen .rc-mg-cell.we{background:var(--rc-bg-tint)}
.rc-screen .rc-mg-cell.c0{}
.rc-screen .rc-mg-cell.dim .rc-mg-date{color:var(--border2)}
.rc-screen .rc-mg-cell.today .rc-mg-date{background:var(--grad);color:#fff;box-shadow:0 4px 10px -4px rgba(80,60,200,.6)}
.rc-screen .rc-mg-date{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);align-self:flex-end;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.rc-screen .rc-mg-pill{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;font-weight:600;padding:3px 8px;border-radius:6px;background:var(--rc-primary-soft);border:1px solid var(--rc-status-done-bd);color:var(--rc-status-done-fg);white-space:nowrap;overflow:hidden;letter-spacing:.01em}
.rc-screen .rc-mg-pt{color:var(--primary);font-weight:700;flex:none}
.rc-screen .rc-mg-pl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.rc-screen .rc-mg-pn{font-weight:700;flex:none}
.rc-screen .rc-mg-pill.aaa{border-color:var(--primary);box-shadow:0 0 0 1px rgba(99,91,255,.14)}
.rc-screen .rc-mg-pill.open{background:transparent;border-style:dashed;color:var(--faint);border-color:var(--border2)}
.rc-screen .rc-mg-pill.open .rc-mg-pt{color:var(--faint);font-weight:600}
.rc-screen .rc-pods{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start;overflow-y:auto;scrollbar-width:thin}
.rc-screen .rc-pod{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.rc-screen .rc-pod-head{display:flex;align-items:center;gap:10px}
.rc-screen .rc-pod-av{width:36px;height:36px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-weight:700;font-size:12px;box-shadow:0 0 0 3px #fff,0 5px 12px -5px rgba(50,38,130,.45)}
.rc-screen .rc-pod-idn{flex:1;min-width:0}
.rc-screen .rc-pod-name{font-weight:700;font-size:13.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-screen .rc-pod-sub{font-family:var(--mono);font-size:9.5px;color:var(--faint);margin-top:2px;letter-spacing:.03em;text-transform:uppercase}
.rc-screen .rc-pod-live{flex:none;font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--grad);padding:3px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.rc-screen .rc-pod-cap{display:flex;align-items:baseline;justify-content:space-between;font-size:11px;color:var(--muted)}
.rc-screen .rc-pod-cap b{color:var(--text)}
.rc-screen .rc-pod-pct{font-weight:700;color:var(--primary)}
.rc-screen .rc-pod-slots{display:flex;flex-wrap:wrap;gap:5px}
.rc-screen .rc-slotchip{font-family:var(--mono);font-size:9px;font-weight:600;padding:3px 7px;border-radius:6px;letter-spacing:.02em}
.rc-screen .rc-slotchip.b{background:var(--rc-primary-soft);border:1px solid var(--rc-status-done-bd);color:var(--rc-status-done-fg)}
.rc-screen .rc-slotchip.o{background:transparent;border:1px dashed var(--border2);color:var(--faint)}
.rc-screen .rc-pod-law{flex:none;font-family:var(--mono);font-size:9.5px;color:var(--faint);letter-spacing:.03em;text-align:center;padding-top:10px}
.rc-screen .rc-pod-roster{display:flex;flex-direction:column;margin-top:2px}
.rc-screen .rc-closer{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px dashed var(--border)}
.rc-screen .rc-closer:first-child{border-top:0}
.rc-screen .rc-closer-av{width:24px;height:24px;border-radius:50%;background:var(--rc-bg-tint);border:1px solid var(--border);color:var(--text-soft);font-family:var(--mono);font-size:8.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.rc-screen .rc-closer.live .rc-closer-av{background:var(--rc-primary-soft);border-color:var(--rc-status-done-bd);color:var(--primary)}
.rc-screen .rc-closer-name{flex:1;min-width:0;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-screen .rc-live-chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--rc-primary-soft);border:1px solid var(--rc-status-done-bd);color:var(--rc-status-done-fg);white-space:nowrap;flex:none}
.rc-screen .rc-next-chip{display:inline-flex;align-items:center;font-family:var(--mono);font-size:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:transparent;border:1px dashed var(--border2);color:var(--faint);white-space:nowrap;flex:none}
.rc-screen .rc-live-dot{width:5px;height:5px;border-radius:50%;background:var(--primary);animation:rcpulse 1.6s ease-in-out infinite;flex:none}
.rc-screen .rc-pod-live .rc-live-dot{background:#fff}
@keyframes rcpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
.rc-screen .rc-closer-prog{flex:none;display:inline-flex;align-items:center;gap:6px;width:76px}
.rc-screen .rc-cp-bar{flex:1;height:4px;border-radius:99px;background:var(--rc-bg-tint);overflow:hidden;display:block}
.rc-screen .rc-cp-fill{height:100%;border-radius:99px;background:var(--grad);display:block}
.rc-screen .rc-cp-n{font-family:var(--mono);font-size:9px;font-weight:700;color:var(--muted);flex:none;width:32px;text-align:right}
.rc-screen .rc-pod-live{display:inline-flex;align-items:center;gap:5px}
.rc-screen .rc-podsplit{flex:1;min-height:0;display:grid;grid-template-columns:320px minmax(0,1fr);gap:12px}
.rc-screen .rc-podlist{display:flex;flex-direction:column;gap:6px;min-height:0;overflow-y:auto;scrollbar-width:thin;padding-right:2px}
.rc-screen .rc-plrow{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);cursor:pointer;transition:.14s;flex:none}
.rc-screen .rc-plrow:hover{border-color:#cfcaff}
.rc-screen .rc-plrow.on{border-color:var(--rc-status-done-bd);background:var(--rc-primary-soft)}
.rc-screen .rc-pl-num{width:26px;height:26px;border-radius:8px;flex:none;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;font-weight:700;background:var(--rc-bg-tint);border:1px solid var(--border);color:var(--muted)}
.rc-screen .rc-plrow.on .rc-pl-num{background:var(--grad);border-color:transparent;color:#fff}
.rc-screen .rc-pl-body{flex:1;min-width:0}
.rc-screen .rc-pl-name{font-size:11.5px;font-weight:700;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-screen .rc-pl-sub{font-family:var(--mono);font-size:8.5px;color:var(--faint);margin-top:1px;letter-spacing:.03em}
.rc-screen .rc-pl-right{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.rc-screen .rc-pl-on{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:9px;font-weight:700;color:var(--primary)}
.rc-screen .rc-pl-bar{width:44px;height:4px;border-radius:99px;background:var(--rc-bg-tint);overflow:hidden;display:block}
.rc-screen .rc-pl-fill{height:100%;background:var(--grad);display:block;border-radius:99px}
.rc-screen .rc-poddetail{overflow-y:auto;scrollbar-width:thin}
.rc-screen .rc-pod-roster.grid2{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
.rc-screen .rc-pod-roster.grid2 .rc-closer:nth-child(-n+2){border-top:0}
.rc-screen .rc-kpi-pace{margin-top:9px}
.rc-screen .rc-podboard{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--rc-radius-lg);overflow:hidden}
.rc-screen .rc-pb-row{display:grid;grid-template-columns:180px minmax(0,1.5fr) 168px 96px minmax(0,1fr);gap:12px;align-items:center;padding:0 14px}
.rc-screen .rc-pb-head{flex:none;height:32px;background:#f8f8fb;border-bottom:1px solid var(--border)}
.rc-screen .rc-pb-head .rc-cell{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.rc-screen .rc-pb-body{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin}
.rc-screen .rc-pb-item{border-bottom:1px solid var(--border)}
.rc-screen .rc-pb-item:last-child{border-bottom:0}
.rc-screen .rc-pb-main{height:44px;cursor:pointer;transition:background .14s}
.rc-screen .rc-pb-main:hover{background:var(--rc-hover)}
.rc-screen .rc-pb-item.sel .rc-pb-main{background:var(--rc-primary-soft)}
.rc-screen .rc-pb-pod{display:flex;align-items:center;gap:8px;min-width:0}
.rc-screen .rc-pb-name{font-size:11.5px;font-weight:700;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-screen .rc-pb-pace{min-width:0}
.rc-screen .rc-pb-pace-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:4px}
.rc-screen .rc-pb-run{font-size:10px;font-weight:700;color:var(--text)}
.rc-screen .rc-pb-delta{font-family:var(--mono);font-size:9px;font-weight:700}
.rc-screen .rc-pb-delta.up{color:var(--primary)}
.rc-screen .rc-pb-delta.down{color:var(--faint)}
.rc-screen .rc-pb-bar{position:relative;height:5px;border-radius:99px;background:var(--rc-bg-tint);display:block}
.rc-screen .rc-pb-fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--grad);display:block}
.rc-screen .rc-pb-tick{position:absolute;top:-2px;bottom:-2px;width:2px;border-radius:1px;background:var(--text);opacity:.45;display:block}
.rc-screen .rc-pb-live{display:flex;align-items:center;gap:8px}
.rc-screen .rc-pb-dots{display:inline-flex;gap:3px}
.rc-screen .rc-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.rc-screen .rc-dot.on{background:var(--primary);box-shadow:0 0 0 1px rgba(99,91,255,.22)}
.rc-screen .rc-dot.off{background:transparent;border:1px solid var(--border2)}
.rc-screen .rc-pb-on{font-size:9px;font-weight:700;color:var(--primary);flex:none}
.rc-screen .rc-pb-num{text-align:right;font-size:11px;color:var(--muted)}
.rc-screen .rc-pb-num b{color:var(--text);font-weight:800}
.rc-screen .rc-pb-alerts{display:flex;gap:5px;flex-wrap:wrap;min-width:0}
.rc-screen .rc-al{display:inline-flex;align-items:center;font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:6px;white-space:nowrap}
.rc-screen .rc-al.warn{background:#f1f3f7;color:var(--muted);border:1px solid var(--border2)}
.rc-screen .rc-al.long{background:var(--rc-primary-soft);color:var(--rc-status-done-fg);border:1px solid var(--rc-status-done-bd)}
.rc-screen .rc-al.ok{background:transparent;color:var(--faint);border:1px dashed var(--border)}
.rc-screen .rc-pb-detail{background:var(--rc-bg-soft);border-top:1px dashed var(--border);padding:10px 14px 12px}
.rc-screen .rc-pb-dhead{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.rc-screen .rc-ex{display:flex;align-items:center;gap:9px;padding:5px 0}
.rc-screen .rc-ex+.rc-ex{border-top:1px dashed var(--border)}
.rc-screen .rc-ex-name{min-width:0;font-size:11.5px;font-weight:600;flex:0 0 150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-screen .rc-ex-detail{font-size:9px;color:var(--faint);flex:1;letter-spacing:.02em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-screen .rc-pb-dfoot{font-family:var(--mono);font-size:9px;color:var(--faint);letter-spacing:.03em;margin-top:8px}
.rc-screen .rc-dg{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--rc-radius-lg);overflow:hidden}
.rc-screen .rc-dg-row{display:grid;grid-template-columns:172px repeat(16,1fr);gap:0;align-items:stretch}
.rc-screen .rc-dg-headrow{flex:none;border-bottom:1px solid var(--border);background:var(--rc-bg-soft)}
.rc-screen .rc-dg-corner{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;padding:0 12px;height:30px}
.rc-screen .rc-dg-hour{grid-column:span 2;display:flex;align-items:center;padding-left:8px;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.06em;color:var(--muted);border-left:1px solid var(--border)}
.rc-screen .rc-dg-body{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.rc-screen .rc-dg-body .rc-dg-row{flex:1;min-height:0;border-bottom:1px solid var(--border)}
.rc-screen .rc-dg-body .rc-dg-row:last-of-type{border-bottom:0}
.rc-screen .rc-dg-floor{background:var(--rc-bg-soft);box-shadow:inset 0 -1px 0 var(--border2)}
.rc-screen .rc-dg-floor-name{font-size:11px;font-weight:800;letter-spacing:-.005em}
.rc-screen .rc-dg-lab{display:flex;align-items:center;gap:8px;padding:0 10px 0 12px;min-width:0;border-right:1px solid var(--border)}
.rc-screen .rc-dg-lab-body{min-width:0;display:flex;flex-direction:column;gap:1px}
.rc-screen .rc-dg-lab-name{font-size:10.5px;font-weight:700;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-screen .rc-dg-lab-sub{font-size:8px;color:var(--faint);letter-spacing:.04em;white-space:nowrap}
.rc-screen .rc-dg-floor .rc-dg-lab{flex-direction:row;justify-content:space-between}
.rc-screen .rc-dg-cell{position:relative;border-left:1px solid rgba(20,20,50,.05);display:flex;align-items:center;justify-content:center;min-width:0}
.rc-screen .rc-dg-n{font-family:var(--mono);font-size:9.5px;font-weight:700;line-height:1}
.rc-screen .rc-dg-cell.lite .rc-dg-n{color:var(--text-soft)}
.rc-screen .rc-dg-cell.deep .rc-dg-n{color:#fff}
.rc-screen .rc-dg-cell.past{opacity:.5}
.rc-screen .rc-dg-cell.past .rc-dg-n{color:var(--muted)}
.rc-screen .rc-dg-cell.now-cell{box-shadow:inset 0 0 0 1.5px var(--primary);animation:rcdgpulse 2.4s ease-in-out infinite}
.rc-screen .rc-dg-cell.over{box-shadow:inset 0 0 0 1.5px #1a1f36}
.rc-screen .rc-dg-over{position:absolute;top:2px;right:3px;font-family:var(--mono);font-size:7px;font-weight:800;color:#1a1f36;background:#fff;border-radius:4px;padding:0 3px;line-height:1.5;letter-spacing:.02em}
.rc-screen .rc-dg-cell.deep .rc-dg-over{color:#1a1f36}
.rc-screen .rc-dg-now{position:absolute;top:0;bottom:0;width:2px;background:var(--primary);opacity:.8;pointer-events:none;box-shadow:0 0 8px rgba(99,91,255,.5)}
.rc-screen .rc-dg-now-tag{position:absolute;top:-1px;left:-16px;font-family:var(--mono);font-size:7.5px;font-weight:800;letter-spacing:.1em;color:#fff;background:var(--primary);border-radius:4px;padding:2px 5px}
.rc-screen .rc-dg-legend{flex:none;display:flex;align-items:center;gap:14px;padding:8px 14px;border-top:1px solid var(--border);background:var(--rc-bg-soft);flex-wrap:wrap}
.rc-screen .rc-dg-key{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:8.5px;color:var(--muted);letter-spacing:.04em}
.rc-screen .rc-dg-sw{width:12px;height:12px;border-radius:3px;border:1px solid rgba(20,20,50,.08);display:inline-block}
.rc-screen .rc-dg-sw-over{background:rgba(79,70,229,.9);box-shadow:inset 0 0 0 1.5px #1a1f36}
.rc-screen .rc-dg-sw-past{background:rgba(99,91,255,.25);opacity:.5}
.rc-screen .rc-dg-nowkey{width:2px;height:12px;background:var(--primary);display:inline-block;box-shadow:0 0 6px rgba(99,91,255,.5)}
.rc-screen .rc-dg-law{margin-left:auto;font-family:var(--mono);font-size:8.5px;color:var(--faint);letter-spacing:.03em}

/* Timezone picker (Ben 2026-07-19) */
.rc-screen .rc-tzwrap{display:inline-flex;align-items:center;gap:7px;margin-left:14px}
.rc-screen .rc-tzlabel{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.03em}
.rc-screen .rc-tzsel{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px 26px 6px 10px;cursor:pointer;transition:var(--rc-t);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23697386' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}
.rc-screen .rc-tzsel:hover{border-color:var(--primary)}
.rc-screen .rc-tzsel:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)}

/* Unified calendar event types (Ben 2026-07-19) */
.rc-screen .rc-ev-callback{background:var(--rc-primary-soft,#f5f4ff);border:1px solid var(--rc-status-done-bd,#d6d2ff)}
.rc-screen .rc-ev-callback .rc-ev-role{color:var(--primary,#635bff)}
.rc-screen .rc-ev-demo{background:#eef4ff;border:1px solid #c9dbff}
.rc-screen .rc-ev-demo .rc-ev-role{color:var(--c-blue,#2f80ff)}
.rc-screen .rc-chip-run{background:var(--c-blue,#2f80ff);color:#fff;border:0}

/* Reschedule + Cancel affordance (Ben 2026-07-19) */
.rc-screen .rc-pop-rowactions{display:flex;flex-direction:column;gap:4px;flex:none;align-self:flex-start;margin-left:6px}
.rc-screen .rc-pop-actbtn{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--surface);border-radius:6px;color:var(--muted);cursor:pointer;transition:var(--rc-t);padding:0}
.rc-screen .rc-pop-actbtn:hover{border-color:var(--primary);color:var(--primary);background:var(--rc-primary-soft)}
.rc-screen .rc-pop-actbtn.danger:hover{border-color:var(--border2);color:var(--text);background:var(--rc-bg-tint)}

.rc-screen .rc-modalbackdrop{position:fixed;inset:0;background:rgba(20,20,40,.42);z-index:90;display:flex;align-items:center;justify-content:center}
.rc-screen .rc-modal{width:380px;max-width:calc(100vw - 40px);max-height:calc(100vh - 80px);background:var(--bg);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(20,20,50,.35)}
.rc-screen .rc-modal-head{position:relative;padding:15px 36px 13px 16px;border-bottom:1px solid var(--border);background:var(--surface);flex:none}
.rc-screen .rc-modal-title{font-weight:700;font-size:14px;letter-spacing:-.01em}
.rc-screen .rc-modal-body{padding:14px 16px 6px;overflow-y:auto;scrollbar-width:thin;flex:1;min-height:0}
.rc-screen .rc-modal-sub{font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.01em;margin-bottom:12px;line-height:1.5}
.rc-screen .rc-modal-notice{font-size:12px;color:var(--muted);line-height:1.55;background:var(--rc-bg-tint);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.rc-screen .rc-modal-error{font-size:11.5px;color:var(--text-soft);line-height:1.5;background:var(--rc-bg-soft);border:1px dashed var(--border2);border-radius:9px;padding:8px 10px;margin-top:10px}
.rc-screen .rc-modal-foot{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--border);background:var(--surface)}
.rc-screen .rc-modal-confirm{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:-.005em;padding:8px 15px;border:0;border-radius:9px;cursor:pointer;color:#fff;background:var(--grad);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:var(--rc-t)}
.rc-screen .rc-modal-confirm:hover{filter:brightness(1.05)}
.rc-screen .rc-modal-confirm:disabled{opacity:.5;cursor:not-allowed;filter:none}
.rc-screen .rc-modal-confirm.danger{background:var(--text);color:#fff}

.rc-screen .rc-slotpicker{display:flex;flex-direction:column;gap:12px;padding-bottom:10px}
.rc-screen .rc-slotday-label{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.rc-screen .rc-slotchips{display:flex;flex-wrap:wrap;gap:6px}
.rc-screen .rc-slotchoice{font-family:var(--sans);font-size:11.5px;font-weight:600;padding:6px 11px;border:1px solid var(--border);background:var(--surface);border-radius:8px;color:var(--text);cursor:pointer;transition:var(--rc-t)}
.rc-screen .rc-slotchoice:hover{border-color:#cfcaff;color:var(--primary)}
.rc-screen .rc-slotchoice.on{background:var(--grad);border-color:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}

/* ===== pages/resume-blitz/rankings.css ===== */
/* ============================================================
 * REGION RANKINGS — content styles (Claude Design swap, 2026-07-11)
 * The persistent deck shell (06-deck.css) owns the bar + card +
 * sizing. Everything here styles what renders INSIDE .deck-content.
 * Design source: Claude Design "Rankings.dc.html" (Fable 5 pixel pass).
 * ============================================================ */
.rk-screen{--bg:#fdfcfb;--surface:#ffffff;--border:#e6e8ec;--border2:#dfe1e8;--text:#1a1f36;--muted:#697386;--faint:#8792a2;--primary:#635bff;--primary-d:#4f46e5;--grad:linear-gradient(135deg,#7a73ff,#635bff 35%,#4f46e5 65%,#2563eb);--mono:'JetBrains Mono',ui-monospace,monospace;--sans:'Inter Tight',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.rk-screen *{box-sizing:border-box}
.rk-screen .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.rk-screen .rk-host{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.rk-screen .rk-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:18px 30px 20px;gap:12px}

/* hero — Revenue Champion + your seat */
.rk-screen .rk-hero{flex:none;display:flex;align-items:center;gap:18px;background:radial-gradient(70% 160% at 10% -30%,rgba(122,115,255,.18),transparent 55%),radial-gradient(50% 140% at 96% 130%,rgba(37,99,235,.1),transparent 60%),#fff;border:1px solid #e0dcff;border-radius:18px;padding:15px 22px;box-shadow:0 14px 34px -24px rgba(50,38,130,.35)}
.rk-screen .rk-champ-crown{width:48px;height:48px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 12px 26px -10px rgba(80,60,200,.85),inset 0 0 0 1px rgba(255,255,255,.18);flex:none;overflow:hidden}
.rk-screen .rk-champ-crown svg{width:19px;height:19px}
/* Champion hero headshot (feat/rankings-headshots): the #1 RSM's real photo,
   circular, filling the crown slot. Initials fallback keeps the gradient +
   white text via .rk-champ-av's own centering. */
.rk-screen .rk-champ-av{width:100%;height:100%;max-width:none;max-height:none;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:17px;letter-spacing:.5px;overflow:hidden}
.rk-screen .rk-champ-av img{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:50%;display:block}
.rk-screen .rk-champ-main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px}
.rk-screen .rk-champ-eye{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--primary);font-weight:600}
.rk-screen .rk-champ-name{font-size:29px;font-weight:800;letter-spacing:-.028em;line-height:1.05;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-screen .rk-champ-meta{font-size:12.5px;font-weight:600;color:var(--muted)}
.rk-screen .rk-champ-meta b{font-family:var(--mono);font-weight:700;color:var(--primary)}
.rk-screen .rk-champ-stat{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 22px;border-left:1px solid var(--border2);flex:none}
.rk-screen .rk-champ-stat-l{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600}
.rk-screen .rk-champ-stat-v{font-weight:800;font-size:24px;letter-spacing:-.02em;line-height:1;color:var(--text)}
.rk-screen .rk-champ-stat-v small{font-size:12px;color:var(--faint);font-weight:600;letter-spacing:0}
.rk-screen .rk-you2{min-width:196px}
.rk-screen .rk-you2 .rk-champ-stat-l{color:var(--primary)}
.rk-screen .rk-you2-amt{color:var(--primary)}
.rk-screen .rk-you2-amt small{font-size:11px;color:var(--faint);font-weight:600;letter-spacing:0}
.rk-screen .rk-you2-bar{height:4px;border-radius:99px;background:#eeecff;margin-top:1px;overflow:hidden}
.rk-screen .rk-you2-fill{display:block;height:100%;background:var(--grad);border-radius:99px;position:relative;overflow:hidden}
.rk-screen .rk-you2-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);transform:translateX(-130%);animation:rkshine 3.4s cubic-bezier(.45,.05,.35,1) infinite}
@keyframes rkshine{0%{transform:translateX(-130%)}40%{transform:translateX(130%)}100%{transform:translateX(130%)}}
.rk-screen .rk-you2-target{font-size:11.5px;font-weight:600;color:var(--muted)}
.rk-screen .rk-you2-target b{color:var(--text);font-weight:700}
.rk-screen .rk-hero-empty{flex:1;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.02em;padding:10px}

/* leader chips */
.rk-screen .rk-chips{flex:none;display:flex;gap:10px;flex-wrap:wrap}
/* Chip surface matches the champion hero (.rk-hero): same soft purple radial
   tint, lilac border and lifted shadow so the three leaders read as one family
   with the champion, not flat white cards next to it. Radials tuned tighter for
   the smaller chip footprint so the wash reads without washing out the text. */
.rk-screen .rk-leader-chip{flex:1 1 200px;min-width:180px;background:radial-gradient(80% 150% at 8% -40%,rgba(122,115,255,.18),transparent 58%),radial-gradient(60% 150% at 98% 140%,rgba(37,99,235,.1),transparent 62%),#fff;border:1px solid #e0dcff;border-radius:14px;padding:10px 14px;box-shadow:0 14px 34px -24px rgba(50,38,130,.35)}
.rk-screen .rk-leader-title{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600}
.rk-screen .rk-leader-body{display:flex;align-items:center;gap:8px;margin-top:6px}
/* Winner headshot in each leader chip (feat/rankings-chip-headshots, 2026-07-14):
   circular, ~26px, box-shadow ring parity with the board row .rk-av, initials
   fallback (grad fill) when the seat has no photo — never a torn image. */
.rk-screen .rk-leader-av{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-weight:700;font-size:10px;box-shadow:0 0 0 2px #fff,0 1px 3px rgba(80,60,200,.28);overflow:hidden}
.rk-screen .rk-leader-av img{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:50%;display:block}
/* Name sits directly beside the headshot (flex:0 1 auto — do NOT grow, so it
   hugs the avatar with the 8px body gap instead of stretching to center). Reads
   as TITLE text: bold weight + dark --text, parity with .rk-champ-name /
   .rk-name-n, never a thin muted float. The value is the only element that
   pushes to the far right (margin-left:auto). */
.rk-screen .rk-leader-name{font-weight:700;font-size:14px;letter-spacing:-.01em;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto;min-width:0}
.rk-screen .rk-leader-val{font-weight:800;font-size:15px;color:var(--primary);flex:none;margin-left:auto;padding-left:8px}
.rk-screen .rk-chips-empty{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.02em;padding:11px 14px;border:1px dashed var(--border2);border-radius:14px;background:rgba(255,255,255,.5);width:100%}

/* board — per-position (RSM | Closer inv/bk | Setter inv/bk | ARSM inv/bk | Total inv/bk | Conv)
 * 10 columns: 1 name + (3 positions x 2) + 2 totals + 1 conv.
 * Screenshot-clean: ruled rows, position groups visually separated by a left
 * border on each position's Inv column. Sized to fit 11 RSM rows + head + team
 * row inside the card at 1440x900 with no page scroll. */
/* fr-based grid columns always resolve to the container width, so the table
   fits its card and the PAGE never scrolls horizontally. Wide-content overflow
   (if the card itself is ever narrower than the min readable width) is contained
   here with overflow:hidden on the wrap — the vertical body scroller handles rows. */
.rk-screen .rk-board-wrap{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 14px 34px -24px rgba(50,38,130,.35)}
/* Sub-columns widened to fit legible 'Invited'/'Booked' titles under each group
   (Ben 2026-07-14). fr tracks always resolve to the card width, so the PAGE never
   scrolls horizontally; RSM name column trimmed slightly to buy the room. */
.rk-screen .rk-row{display:grid;grid-template-columns:2.35fr .9fr .9fr .9fr .9fr .9fr .9fr 1fr 1fr .92fr;align-items:center;gap:0;padding:0 16px}
/* group header (position labels spanning inv+bk)
 * Each ghead cell is PINNED to explicit grid tracks so the group tier resolves
 * on the SAME 10-track axis as the sub-header + data rows below it. Without
 * explicit start/end, grid auto-placement of `span 2` cells could over-subscribe
 * to an 11th implicit track and drift the labels left of their Inv/Bk pairs.
 * Tracks: rsm=1, Closer=2-3, Setter=4-5, ARSM=6-7, Total=8-9, Conv=10.
 * The three .rk-g-pos cells are placed in DOM order via nth-of-type below. */
.rk-screen .rk-row-ghead{flex:none;height:32px;background:transparent;border-bottom:1px solid var(--border)}
.rk-screen .rk-row-ghead .rk-cell{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text);text-align:center;justify-content:center}
.rk-screen .rk-row-ghead .rk-g-rsm{grid-column:1 / 2}
/* Merged RSM header: one tall title block spanning BOTH header rows over the
   left column, so "Regional Sales Manager Rankings" fills the whole left
   header section (Ben 2026-07-14). The two header rows keep an empty first
   cell so the grid columns still line up; this title overlays them. */
/* ONE continuous gradient across the whole header block — put it on the
   container so it flows uniformly across both header rows + the merged titles
   instead of restarting per cell (Ben 2026-07-15: "make it uniform... all one
   just like the top Alec leader"). The rows/cells/merged titles are transparent
   and just show this single wash through. */
.rk-screen .rk-headstack{position:relative;background:radial-gradient(90% 220% at 6% -30%,rgba(122,115,255,.18),transparent 56%),radial-gradient(70% 200% at 98% 130%,rgba(37,99,235,.1),transparent 60%),#fff}
.rk-screen .rk-g-rsm-merged{position:absolute;left:0;top:0;bottom:0;width:calc(2.15 / 9.65 * 100%);display:flex;align-items:center;padding:0 18px;font-family:var(--sans);font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--text);text-transform:none;pointer-events:none;background:transparent;border-bottom:1px solid var(--border);white-space:nowrap;z-index:1}
/* Merged CONV header: one tall title block spanning BOTH header rows over the
   conv column on the right, matching the RSM merged title style. */
.rk-screen .rk-g-conv-merged{position:absolute;right:0;top:0;bottom:0;width:calc(.9 / 9.65 * 100%);display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--text);text-transform:none;pointer-events:none;background:radial-gradient(120% 200% at 100% 130%,rgba(37,99,235,.1),transparent 60%),radial-gradient(140% 220% at 100% -30%,rgba(122,115,255,.14),transparent 58%),#fff;border-left:1px solid var(--border);border-bottom:1px solid var(--border);z-index:2}
.rk-screen .rk-conv-pct{color:var(--primary)}
.rk-screen .rk-row-ghead .rk-g-pos{border-left:1px solid var(--border2)}
.rk-screen .rk-row-ghead .rk-g-pos:nth-of-type(2){grid-column:2 / 4}
.rk-screen .rk-row-ghead .rk-g-pos:nth-of-type(3){grid-column:4 / 6}
.rk-screen .rk-row-ghead .rk-g-pos:nth-of-type(4){grid-column:6 / 8}
.rk-screen .rk-row-ghead .rk-g-total{grid-column:8 / 10;border-left:1px solid var(--border2);color:var(--text)}
.rk-screen .rk-row-ghead .rk-g-conv{grid-column:10 / 11;border-left:1px solid var(--border2)}
/* sub header (Invited / Booked / Conv %) — spelled out and sized up for
   readability (Ben 2026-07-14: "fix the sizing and readability"). Bumped from a
   cramped 9px faint grey to a comfortably legible 11.5px in the readable muted
   tone, roomier row + right padding so 'Invited'/'Booked' never collide and sit
   cleanly right-aligned under their group header. */
.rk-screen .rk-row-head{flex:none;height:34px;background:transparent;border-bottom:1px solid var(--border)}
.rk-screen .rk-row-head .rk-cell{font-family:var(--mono);font-size:11.5px;font-weight:800;letter-spacing:.02em;text-transform:none;color:var(--text)}
.rk-screen .rk-row-head .rk-sub-h{justify-content:center;text-align:center}
.rk-screen .rk-board-body{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin}
.rk-screen .rk-board-body .rk-row{height:46px;border-bottom:1px solid var(--border)}
.rk-screen .rk-board-body .rk-row:last-child{border-bottom:0}
.rk-screen .rk-row-mine{background:#f7f6ff}
/* #1 champion data row — same soft purple radial gradient as the champion hero
   (.rk-hero) and the leader chips (.rk-leader-chip), tuned so it reads cleanly
   across a full-width row. Placed after .rk-row-mine so a rank-1 viewer row
   still gets the champion treatment; .rk-row-mine behavior is otherwise intact. */
.rk-screen .rk-row-champ{background:radial-gradient(80% 150% at 8% -40%,rgba(122,115,255,.18),transparent 58%),radial-gradient(60% 150% at 98% 140%,rgba(37,99,235,.1),transparent 62%),#fff}
.rk-screen .rk-cell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:100%;display:flex;align-items:center}
.rk-screen .rk-c-num{justify-content:center;text-align:center;font-size:12.5px;color:var(--text)}
/* every Invited/Booked/Total/Conv cell is a real bordered cell (vertical
   dividers between the columns), numbers centered under their header */
.rk-screen .rk-row-data .rk-c-num,.rk-screen .rk-row-head .rk-c-num,.rk-screen .rk-row-team .rk-c-num{border-left:1px solid var(--border)}
/* left rule at each position group + totals + conv, so the eye reads groups */
.rk-screen .rk-row-data .rk-cell:nth-child(2),
.rk-screen .rk-row-data .rk-cell:nth-child(4),
.rk-screen .rk-row-data .rk-cell:nth-child(6),
.rk-screen .rk-row-data .rk-cell:nth-child(8),
.rk-screen .rk-row-data .rk-cell:nth-child(10),
.rk-screen .rk-row-head .rk-cell:nth-child(2),
.rk-screen .rk-row-head .rk-cell:nth-child(4),
.rk-screen .rk-row-head .rk-cell:nth-child(6),
.rk-screen .rk-row-head .rk-cell:nth-child(8),
.rk-screen .rk-row-head .rk-cell:nth-child(10){box-shadow:inset 1px 0 0 var(--border)}
.rk-screen .rk-c-bk{font-weight:800;color:var(--text)}
.rk-screen .rk-c-tot{font-weight:700;color:var(--text)}
.rk-screen .rk-zero{color:var(--text);font-weight:500}
/* conversion — purple emphasis for the leader, muted grey for 0%/'-' (never red) */
.rk-screen .rk-c-conv{font-weight:700;color:var(--text)}
.rk-screen .rk-c-conv-lead{color:var(--primary);font-weight:800}
.rk-screen .rk-rankbadge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:20px;padding:0 5px;border-radius:6px;background:#eef0f4;color:var(--muted);font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:-.01em;flex:none}
.rk-screen .rk-rankbadge-1{background:var(--grad);color:#fff;box-shadow:0 3px 8px -3px rgba(80,60,200,.55)}
.rk-screen .rk-c-name{display:flex;align-items:center;gap:8px}
.rk-screen .rk-av{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-weight:700;font-size:10px;box-shadow:0 0 0 2px #fff;overflow:hidden}
/* defensive parity with .rk-champ-av img — recruitingAvatar inlines sizing on the
   img, this bounds it even if the inline styles are stripped. */
.rk-screen .rk-av img{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:50%;display:block}
/* name text takes ALL remaining track space (flex:1) and ellipsizes only under
   genuine pressure. Without flex:1 + min-width:0 the fixed badge+avatar starve it. */
.rk-screen .rk-name-txt{flex:1;min-width:0;line-height:1.15}
.rk-screen .rk-name-n{font-weight:700;font-size:13px;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-screen .rk-name-you{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);font-weight:700;margin-top:1px}
/* per-row REAL call activity today (bb_a6a555) — additive sub-line under the
   RSM name: "N dials · M contacts today" from the reps' logged calls. Zero
   activity reads "no calls today" in faint grey (honest-empty, never red,
   never invented numbers). No grid/column change — lives inside .rk-name-txt. */
.rk-screen .rk-name-act{font-size:9px;letter-spacing:.02em;color:var(--muted);font-weight:600;margin-top:1px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-screen .rk-name-act b{color:var(--primary);font-weight:700}
.rk-screen .rk-act-zero{color:var(--faint);font-weight:500}
/* team total row — pinned look, heavier rule on top */
.rk-screen .rk-row-team{flex:none;height:46px;background:radial-gradient(80% 150% at 8% -40%,rgba(122,115,255,.18),transparent 58%),radial-gradient(60% 150% at 98% 140%,rgba(37,99,235,.1),transparent 62%),#fff;border-top:2px solid var(--border2)}
.rk-screen .rk-row-team .rk-cell:nth-child(2),
.rk-screen .rk-row-team .rk-cell:nth-child(4),
.rk-screen .rk-row-team .rk-cell:nth-child(6),
.rk-screen .rk-row-team .rk-cell:nth-child(8),
.rk-screen .rk-row-team .rk-cell:nth-child(10){box-shadow:inset 1px 0 0 var(--border)}
.rk-screen .rk-team-tag{display:inline-flex;align-items:center;justify-content:center;height:20px;padding:0 6px;border-radius:6px;background:var(--text);color:#fff;font-family:var(--mono);font-weight:700;font-size:8.5px;letter-spacing:.08em;flex:none}
.rk-screen .rk-row-team .rk-name-n{font-weight:800}
.rk-screen .rk-row-team .rk-c-num{color:var(--text)}
.rk-screen .rk-row-team .rk-c-conv{color:var(--primary);font-weight:800}

/* legend + live stamp */
.rk-screen .rk-legend{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:2px}
.rk-screen .rk-stamp{display:inline-flex;align-items:center;gap:7px}
.rk-screen .rk-stamp-dot{width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 3px rgba(99,91,255,.16);animation:rkpulse 2.4s ease-in-out infinite}
.rk-screen .rk-stamp-dot-off{background:var(--faint);box-shadow:0 0 0 3px rgba(135,146,162,.14);animation:none}
.rk-screen .rk-stamp-t{font-size:10.5px;color:var(--muted);letter-spacing:.02em}
@keyframes rkpulse{0%,100%{box-shadow:0 0 0 3px rgba(99,91,255,.16)}50%{box-shadow:0 0 0 5px rgba(99,91,255,.05)}}
.rk-screen .rk-law{font-size:11.5px;color:var(--faint);font-style:italic;letter-spacing:.01em}
.rk-screen .rk-loaderr{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--faint);padding:30px}
.rk-screen .rk-loaderr-t{font-weight:700;font-size:14px;color:var(--muted)}
.rk-screen .rk-loaderr-s{font-family:var(--mono);font-size:11px;color:var(--faint)}

/* management view (non-NSD/QA fallback — never blank/broken) */
.rk-screen .rk-mgmt{align-items:center;justify-content:center}
.rk-screen .rk-mgmt-card{max-width:460px;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:34px 32px;box-shadow:0 20px 50px -34px rgba(50,38,130,.4)}
.rk-screen .rk-mgmt-eye{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--primary);font-weight:600}
.rk-screen .rk-mgmt-title{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-top:6px;color:var(--text)}
.rk-screen .rk-mgmt-msg{font-size:13.5px;line-height:1.5;color:var(--muted);margin-top:10px}
.rk-screen .rk-mgmt-actions{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.rk-screen .rk-mgmt-btn{font-family:var(--sans);font-weight:700;font-size:13px;padding:9px 18px;border-radius:10px;border:1px solid transparent;background:var(--grad);color:#fff;cursor:pointer;box-shadow:0 10px 22px -12px rgba(80,60,200,.7)}
.rk-screen .rk-mgmt-btn-ghost{background:#fff;color:var(--text);border-color:var(--border)}

/* sales rank-board switcher (feat/sales-rankboards) — compact segmented control
   INSIDE the deck content, flips between the four sales boards (closer/setter/
   pod/region) without leaving the persistent deck shell. Purple-on-white pill
   row matching the rk-* system; active tab = gradient fill. */
.rk-screen .rk-switch{flex:none;display:inline-flex;align-self:flex-start;gap:2px;padding:3px;background:#f2f1fb;border:1px solid var(--border);border-radius:12px}
.rk-screen .rk-switch-tab{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:-.01em;color:var(--muted);background:transparent;border:0;border-radius:9px;padding:7px 14px;cursor:pointer;transition:background .12s ease,color .12s ease}
.rk-screen .rk-switch-tab svg{width:13px;height:13px;opacity:.7}
.rk-screen .rk-switch-tab:hover{color:var(--text)}
.rk-screen .rk-switch-tab.on{background:var(--grad);color:#fff;box-shadow:0 6px 16px -8px rgba(80,60,200,.6);cursor:default}
.rk-screen .rk-switch-tab.on svg{opacity:1}

/* respect prefers-reduced-motion — kill the shimmer + pulse, keep the data */
@media (prefers-reduced-motion: reduce){
  .rk-screen .rk-you2-fill::after{animation:none;display:none}
  .rk-screen .rk-stamp-dot{animation:none}
}

/* ===== styles/05-recruiting-shell.css ===== */
/* ============================================================
 * APEX RECRUITING OS · ONE SHELL (five consumers)
 * ------------------------------------------------------------
 * Canonical shell sizing for ALL FIVE recruiting screens:
 *   #/hierarchy, #/resume-blitz, #/rsm-pipeline, #/rsm-calendar,
 *   #/rankings.
 *
 * Lifted from Resume Blitz (Ben, 2026-07-10, FINAL): "the whole
 * shell needs to be the same size ... resume blitz is the actual
 * centered one ... MODEL AFTER RESUME BLITZ SIZING." Card capped
 * at 1724px (Resume Blitz's effective card width), CENTERED with
 * symmetric gutters, backdrop paints edge to edge so the shell
 * background never "cuts off" at any viewport width.
 *
 * Selectors are #app-root-prefixed on purpose: id specificity
 * beats both the stale .app-frame layout class (max-width:1440,
 * left-pinned when a screen class re-declared margin:0 - the
 * 2026-07-10 dead-gutter bug) and every per-screen shell rule,
 * regardless of stylesheet order. One definition, five consumers;
 * no recruiting screen defines its own shell width anymore.
 *
 * Consumed via shared/components/recruiting-shell.js
 * (applyRecruitingRoot / recruitingAvatar).
 * ============================================================ */

/* ---- root: full-bleed, self-cleaning against stale layout classes ---- */
#app-root.rec-os {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* ---- shell: transparent gutter layer, full width, fixed padding ---- */
#app-root.rec-os .page-shell.rec-shell {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  /* Ben, 2026-07-11: sides locked, more air top + bottom (26/34 -> 52/52). */
  padding: 52px 34px 52px;
  background: transparent;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* ---- card: THE one recruiting card size (Resume Blitz canon) ----
 * 1724px = 1440 frame minus the 58px gutters Ben design-locked on the
 * Resume Blitz screenshots. Centered via auto margins at every width;
 * below the cap it fills the shell minus its symmetric padding. */
#app-root.rec-os .page-card.rec-card {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 1724px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  gap: 0;
}

@media (max-width: 760px) {
  #app-root.rec-os .page-shell.rec-shell { padding: 10px; }
}

/* ---- nav tabs: wrap-proof at every viewport (Ben screenshot:
 * "Resume / Blitz" broke onto two lines and smashed the row). All five
 * screens mark their tab row nav[aria-label="Recruiting OS"]. ---- */
#app-root.rec-os nav[aria-label="Recruiting OS"] {
  flex-wrap: nowrap;
  /* The nav box must NEVER shrink below its content: with min-width:0 here
   * and rigid children, the tabs overflowed the nav box and painted OVER the
   * progress text beside it (Ben screenshot: "Rankings" over "0/12 worked").
   * The flexible shrinker in the bar is the progress meter, not the nav. */
  flex: 0 0 auto;
}
/* The progress meter yields space first and clips gracefully instead of
 * letting neighbors overlap. */
#app-root.rec-os .blitz-screen .prog {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}
#app-root.rec-os nav[aria-label="Recruiting OS"] > * {
  white-space: nowrap;
  flex: 0 0 auto;
}

/* ---- shared identity avatar: stored headshot with graceful initials
 * fallback (shared/components/recruiting-shell.js recruitingAvatar). The
 * circle chrome comes from each screen's existing class (hwho-av, wa-av,
 * pp-wa-av, rc-wa-av, rk-wa-av); this only shapes the photo fill. ---- */
/* UNSCOPED ON PURPOSE (flash fix, 2026-07-10, frame-trace proof): during a
 * route transition the incoming screen strips the outgoing screen's root
 * classes while its tree is still fading out, so any avatar rule scoped under
 * those classes dies mid-fade and the img exploded to its natural size (a
 * 512x773 full-screen headshot flash on every click). These rules depend on
 * NOTHING that gets stripped. */
.rec-av-photo {
  overflow: hidden;
  padding: 0;
  border-radius: 50%;
  max-width: 44px;
  max-height: 44px;
}
.rec-av-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
#app-root.rec-os .rec-av-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  display: block;
}

/* SIZE PRESERVATION (2026-07-11, headshot-unification): the shared resolver
 * now feeds the LARGER recruiting person-avatars too (call-sheet's cc-av /
 * prep-av / ch-av / hn-init / hn-img / coach .hn-photo). The base
 * .rec-av-photo clamp above (max 44px, sized for the 36px topbar/whoami
 * circles) would otherwise SHRINK those bigger circles the moment a photo
 * loads. Lift the clamp for these classes so each avatar's own class size +
 * ring is preserved exactly - the photo fills the real circle, initials
 * fallback is unaffected. */
.blitz-screen .cc-av.rec-av-photo,
.blitz-screen .prep-av.rec-av-photo,
.blitz-screen .ch-av.rec-av-photo,
.blitz-screen .unv-av.rec-av-photo,
.blitz-screen .hn-init.rec-av-photo,
.blitz-screen .hn-img.rec-av-photo,
.blitz-screen .coach .hn-photo.rec-av-photo {
  max-width: none;
  max-height: none;
}

/* ===== styles/06-deck.css ===== */
/* ============================================================
 * PERSISTENT DECK SHELL — the ONE Recruiting OS shell
 * (Ben, 2026-07-11). Values are the locked pipeline shell.
 * Scoped under .deck-host so per-screen class churn on #app-root
 * can never restyle or reflow the persistent chrome.
 * ============================================================ */
.deck-host{margin:0;height:100%;width:100%;display:flex;flex-direction:column;min-height:0;position:relative;background:#fdfcfb;font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
.deck-host .deck-backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#fdfcfb}
.deck-host .deck-backdrop .amb{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.deck-host .deck-backdrop .blob{position:absolute;border-radius:50%;mix-blend-mode:multiply;will-change:transform}
.deck-host .deck-backdrop .b1{width:680px;height:680px;left:-200px;top:-240px;background:radial-gradient(circle,rgba(99,91,255,.16),transparent 62%)}
.deck-host .deck-backdrop .b2{width:560px;height:560px;right:-160px;top:120px;background:radial-gradient(circle,rgba(124,116,255,.13),transparent 62%)}
/* sizing/padding for .rec-shell comes from the LOCKED 05-recruiting-shell.css */
/* size/centering for .rec-card comes from the LOCKED file; visual chrome only here */
.deck-host .page-card.deck-card{background:#ffffff;border:1px solid #e6e8ec;border-radius:20px;box-shadow:0 18px 48px -28px rgba(50,38,130,.34),0 1px 2px rgba(20,20,50,.04)}
.deck-host .deck-bar{flex:none;position:relative;z-index:30;background:rgba(253,252,251,.82);-webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid #e6e8ec}
.deck-host .deck-bar-in{max-width:none;margin:0;padding:0 30px;height:60px;display:flex;align-items:center;gap:16px}
.deck-host .deck-brand{display:flex;align-items:center;gap:11px;cursor:pointer;flex:none}
.deck-host .deck-bar .orb-sm{width:30px;height:30px;border-radius:9px;object-fit:contain;background:#0c1020;box-shadow:0 8px 20px -8px rgba(30,22,80,.5),0 0 0 1px rgba(99,91,255,.14)}
.deck-host .deck-bt{font-weight:700;font-size:14px;letter-spacing:-.01em;line-height:1.1;color:#1a1f36}
.deck-host .deck-bt small{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#8792a2;font-weight:500;margin-top:2px}
.deck-host .deck-tabs{display:flex;align-items:center;gap:4px;margin-left:18px;padding-left:18px;border-left:1px solid #e6e8ec}
.deck-host .deck-tab{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid transparent;border-radius:10px;background:transparent;color:#697386;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:-.01em;cursor:pointer;transition:.15s;white-space:nowrap}
.deck-host .deck-tab:hover{color:#1a1f36;background:rgba(20,20,50,.045)}
.deck-host .deck-tab.on{color:#635bff;background:#f7f6ff;border-color:#d6d2ff;cursor:default}
.deck-host .deck-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.deck-host .deck-whoami{display:flex;align-items:center;gap:9px}
.deck-host .deck-wa-av{width:32px;height:32px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7a73ff,#635bff 35%,#4f46e5 65%,#2563eb);color:#fff;font-weight:700;font-size:12px;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #d6d2ff}
.deck-host .deck-wa-av img{width:100%;height:100%;object-fit:cover;display:block}
.deck-host .deck-wa-n{font-weight:700;font-size:12.5px;letter-spacing:-.01em;line-height:1.15;color:#1a1f36}
.deck-host .deck-wa-r{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;color:#8792a2;margin-top:1px}
.deck-host .deck-logout{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid #e6e8ec;border-radius:10px;background:transparent;color:#697386;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.deck-host .deck-logout:hover{color:#1a1f36;border-color:#dfe1e8}
.deck-host .deck-content{flex:1 1 auto;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden;position:relative;scrollbar-gutter:stable}
.deck-host .deck-content > *{flex:1 1 auto;min-height:0}
/* training content inside the persistent shell */
.deck-host .trn-meta{flex:none;padding:10px 30px 0;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#8792a2;text-align:right}
.deck-host .trn-cockpit-host{flex:1 1 auto;min-height:0;padding:6px 30px 24px;overflow:hidden;display:flex;flex-direction:column;width:auto}
/* module pages inside the persistent shell */
.deck-host .deck-module-wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow-y:auto;padding:14px 30px 24px;gap:12px}
.deck-host .deck-module-wrap .page-train-module-shell{flex:1 1 auto;min-height:0}
/* module runner inside the persistent shell: the runner's own card layout
   (runner.css .app-frame.module-runner-root) renders within deck content */
.deck-host .deck-runner-wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;max-width:none;margin:0;padding:14px 22px 20px}
/* My Account inside the persistent shell */
.deck-host .deck-content .page-account{max-width:1280px;margin:0 auto;width:100%;padding:18px 32px 28px;overflow-y:auto}

/* module wrap: breadcrumb natural height, shell fills */
.deck-host .deck-module-wrap > *{flex:0 0 auto}
.deck-host .deck-module-wrap > .page-train-module-shell{flex:1 1 auto;min-height:0}

/* RIGHT-CLUSTER STABILITY (Ben, 2026-07-11): punch + bell must not slide when
   the identity headshot loads late on hierarchy/resume-blitz. The avatar box
   is fixed-size and the name column has a stable min-width so nothing reflows. */
.deck-host .deck-wa-av{flex:0 0 32px;width:32px;height:32px}
.deck-host .deck-whoami{flex:0 0 auto}
.deck-host .deck-right .topbar-punch,.deck-host .deck-right .topbar-bell{flex:0 0 auto}
.deck-host .deck-right{flex:0 0 auto}

/* ===== pages/app/shell.css ===== */
/* ============================================================
 * APEX TEAM OS  ·  APP SHELL + LEFT-NAV STYLES
 * File: frontend/pages/app/shell.css
 * Owner: feat/infra-011 (app-shell + left-nav)
 *
 * Clean LIGHT left sidebar, hideable via transform translateX(-240px)
 * over 200ms ease. Active route gets a purple-gradient left border on
 * a light tint. Body never scrolls; only #content scrolls
 * (overflow-y:auto). The shell fits a 1440x900 viewport with zero
 * overflow.
 *
 * Tokens come from styles/00-tokens.css. Every colour is var(--*);
 * the panel uses the light surface token, dark-on-light labels, and
 * the purple accent only for the active indicator. Inter Tight body,
 * JetBrains Mono for the brand wordmark.
 * NO red, NO emoji, NO em-dashes.
 * ============================================================ */

/* Lock body scroll while the shell owns the viewport. */
html.apex-shell-active,
html.apex-shell-active body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

/* ============================================================
 * UNIFIED LIGHT SHELL CHROME (shell-light)
 *
 * When the left-nav shell is mounted (html.apex-shell-active), the
 * persistent topbar (#apex-topbar) and the left-nav share ONE clean
 * LIGHT surface so the app reads as a single framed light environment
 * (Stripe-tier light mode, the app's documented default). The prior
 * dark cosmic treatment was reverted per Ben's decision: the whole
 * shell is now light (light topbar + light left-nav + light content).
 * These overrides are scoped to .apex-shell-active so the chromeless
 * light auth and training screens keep their original topbar untouched.
 *
 * KEPT from the unify pass: single brand lockup ("Apex Sales OS" +
 * logo) lives ONLY in the topbar (the nav brand row stays removed in
 * left-nav.js), the rounded outer frame (now a light hairline), and
 * the full-width edge-to-edge inner. The purple accent stays for the
 * active-nav indicator and primary actions; everything else is light.
 * NO red, NO emoji, NO em-dashes.
 * ============================================================ */

/* Clean light topbar matching the light left-nav panel. */
html.apex-shell-active #apex-topbar.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  backdrop-filter: none;
}

/* Brand wordmark + sub read dark-on-light. */
html.apex-shell-active #apex-topbar .brand-name {
  color: var(--text);
}
html.apex-shell-active #apex-topbar .brand-sub {
  color: var(--text-muted);
}

/* Topbar tabs + actions read dark-on-light. */
html.apex-shell-active #apex-topbar .topbar-tab {
  color: var(--text-soft);
}
html.apex-shell-active #apex-topbar .topbar-tab:hover {
  background: var(--hover);
  color: var(--text);
}
html.apex-shell-active #apex-topbar .topbar-tab.active {
  background: var(--primary-soft);
  color: var(--primary);
}

/* Ghost chips (search, punch, bell) on the light bar. */
html.apex-shell-active #apex-topbar .btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-soft);
}
html.apex-shell-active #apex-topbar .btn-ghost:hover {
  background: var(--hover);
  border-color: var(--border-strong);
  color: var(--text);
}

/* Avatar reads on light. */
html.apex-shell-active #apex-topbar .topbar-avatar {
  background: var(--bg-tint);
  border-color: var(--border);
  color: var(--text);
}

/* Inner stays full-width edge to edge inside the framed app. */
html.apex-shell-active #apex-topbar .topbar-inner {
  max-width: none;
}

/* Rounded LIGHT outer frame so the topbar + nav + content read as one
 * framed light surface (subtle rounded hairline border around all). */
html.apex-shell-active body {
  background: var(--bg-surface);
  padding: 0;
}
html.apex-shell-active #apex-topbar.topbar {
  border-radius: 14px 14px 0 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  margin: 6px 6px 0;
}
html.apex-shell-active #app-root {
  background: transparent;
  margin: 0 6px 6px;
  border-radius: 0 0 14px 14px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

/* ---- Shell grid ---------------------------------------------- */
.apex-shell {
  --apex-leftnav-w: 240px;
  display: grid;
  grid-template-columns: var(--apex-leftnav-w) 1fr;
  /* Fill the available area inside #app-root (which sits below the
   * topbar and inside the rounded frame), not the full viewport, so
   * the shell + topbar fit 1440x900 with zero overflow. */
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
  transition: grid-template-columns 200ms ease;
}

/* When the panel is collapsed the grid column shrinks to the toggle stub so
 * the content reclaims the space. The stub keeps the hamburger reachable. */
.apex-shell.nav-collapsed {
  grid-template-columns: 0 1fr;
}

/* ---- Left nav panel ------------------------------------------ */
.apex-leftnav {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: var(--apex-leftnav-w, 240px);
  box-sizing: border-box;
  /* Light panel: the surface token so the nav reads as one cohesive light
   * environment with the topbar and content. Dark-on-light labels below. */
  background: var(--surface);
  border-right: 1px solid var(--border);
  color: var(--text-soft);
  overflow: hidden;
  /* The hideable slide. translateX(-240px) tucks the panel fully off-canvas. */
  transform: translateX(0);
  transition: transform 200ms ease;
  z-index: 20;
}

.apex-leftnav.is-collapsed {
  transform: translateX(-240px);
}

/* ---- Brand row REMOVED (shell-unify) -------------------------
 * The .apex-leftnav-brand / -logo / -brand-text styles are gone: the
 * brand now lives only in the unified dark topbar. left-nav.js no
 * longer renders the brand row, so the nav list begins at the top of
 * the panel, aligned under the topbar like the mockup.
 * ------------------------------------------------------------- */

/* ---- Nav list ------------------------------------------------ */
.apex-leftnav-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Slightly more top padding now that the brand row is gone, so item
   * 1 (Dashboard) sits cleanly under the topbar instead of jammed to
   * the top edge of the rounded frame. */
  padding: 14px 10px 12px;
  overflow-y: auto;
  overflow-x: hidden;
}

.apex-leftnav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 38px;
  padding: 0 12px 0 14px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 140ms ease, color 140ms ease;
}

.apex-leftnav-item:hover {
  background: var(--hover);
  color: var(--text);
}

.apex-leftnav-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: currentColor;
}

.apex-leftnav-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active route: purple-gradient left border + light purple tint. */
.apex-leftnav-item.is-active {
  color: var(--primary);
  background: var(--primary-soft);
}

.apex-leftnav-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--grad, linear-gradient(180deg, #8c86ff 0%, #635bff 100%));
}

/* ---- Edge toggle (hamburger) --------------------------------- */
.apex-leftnav-toggle {
  position: absolute;
  top: 14px;
  right: -14px;
  width: 28px;
  height: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  z-index: 25;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.apex-leftnav-toggle:hover {
  background: var(--hover);
  border-color: var(--border-strong);
}

.apex-leftnav-toggle-bar {
  display: block;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-muted);
}

/* When collapsed, the toggle rides the off-canvas panel's right edge so it
 * stays clickable to bring the panel back. */
.apex-leftnav.is-collapsed .apex-leftnav-toggle {
  right: -28px;
}

/* ---- Content area -------------------------------------------- */
/* display:flex + flex-direction:column are required so cockpit descendants
 * that use flex:1 1 auto (e.g. .rcd-root) can fill the remaining vertical
 * space. Without flex here, flex:1 1 auto on a child of a grid cell is inert. */
.apex-shell-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-y: hidden;
  overflow-x: hidden;
  background: var(--bg);
  -webkit-overflow-scrolling: touch;
}

/* ===== pages/app/build-board.css ===== */
/* ============================================================
 * APEX BUILD BOARD  (#/build-board)
 * File owner: feat/build-board-frontend
 * Design source: Apex Tasks — Operator Console
 *   /Desktop/ApexWork/task-board-pro/frontend/index.html
 * (rail + board + status-pill + pulse model), Apex-tokened.
 * Every color below is a var(--*) token already declared in
 * 00-tokens.css — zero hardcoded hex, zero red, light + dark safe.
 * ============================================================ */

.page-bb {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.page-bb-shell {
  padding: 18px 24px 24px;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  column-gap: 18px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* ---- rail (categories) ---- */
.bb-rail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}
.bb-rail-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 8px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.bb-rail-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.bb-rail-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--text-soft);
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  border: 1px solid transparent;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.bb-rail-item:hover { background: var(--hover); color: var(--text); }
.bb-rail-item.is-active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: rgba(99, 91, 255, 0.2);
  font-weight: 600;
}
.bb-rail-item--done {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.bb-rail-item-ico {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--bg-tint);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bb-rail-item.is-active .bb-rail-item-ico {
  background: var(--primary);
  color: #fff;
}
.bb-rail-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bb-rail-item-count {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-faint);
  background: var(--bg-tint);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 99px;
  font-variant-numeric: tabular-nums;
  min-width: 18px;
  text-align: center;
}
.bb-rail-item.is-active .bb-rail-item-count {
  background: rgba(99, 91, 255, 0.1);
  color: var(--primary);
  border-color: rgba(99, 91, 255, 0.18);
}

/* ---- content area ---- */
.bb-content {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 2px;
}

.bb-board-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bb-board-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.bb-board-subtitle {
  font-size: 12.5px;
  color: var(--text-muted);
  width: 100%;
}

.bb-retry-wrap {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

/* ---- swimlane group ---- */
.bb-swimlanes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bb-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.bb-group-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-tint);
  border: none;
  border-bottom: 1px solid var(--border);
  text-align: left;
  color: var(--text);
}
.bb-group-chevron {
  display: inline-flex;
  color: var(--text-muted);
  transition: transform var(--t);
}
.bb-group.is-collapsed .bb-group-chevron { transform: rotate(-90deg); }
.bb-group-name {
  font-size: 13px;
  font-weight: 600;
}
.bb-group-count {
  font-size: 11px;
  color: var(--text-faint);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 1px 7px;
  border-radius: 99px;
  font-variant-numeric: tabular-nums;
}
.bb-group-progress {
  width: 90px;
  height: 5px;
  border-radius: 99px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-left: auto;
}
.bb-group-progress-fill {
  height: 100%;
  background: var(--grad);
  border-radius: 99px;
  transition: width var(--t);
}
.bb-group-body {
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bb-group.is-collapsed .bb-group-body { display: none; }

/* ---- role facet strip ---- */
.bb-facet-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 2px;
}
.bb-facet-pill {
  padding: 4px 11px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-tint);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 500;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.bb-facet-pill:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.bb-facet-pill.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---- task list / row ---- */
.bb-task-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bb-task-row {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.bb-task-main {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}
.bb-task-expand {
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  padding: 2px;
  margin-top: 2px;
}
.bb-task-expand:hover { color: var(--text); }
.bb-task-status-wrap { margin-top: 1px; }

.bb-task-meta { min-width: 0; }
.bb-task-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bb-task-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.bb-role-chip {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid rgba(99, 91, 255, 0.18);
  padding: 1px 7px;
  border-radius: 99px;
}
.bb-task-detail {
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 4px;
  line-height: 1.5;
}
.bb-task-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.bb-owner-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--bg-tint);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 99px;
}
.bb-git-chip {
  font-size: 11px;
  color: var(--text-soft);
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  line-height: 1.4;
}
.bb-git-chip.is-empty { color: var(--text-faint); font-style: italic; }
.bb-git-repo { color: var(--text-soft); }
.bb-git-file { color: var(--text-muted); }
.bb-task-deps {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 6px;
}
.bb-task-deps-label { color: var(--text-faint); }

.bb-task-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* ---- progress dots (at-a-glance R1/R2/R3/Dry-Loop) ---- */
.bb-progress-dots {
  display: flex;
  align-items: center;
  gap: 4px;
}
.bb-progress-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
}
.bb-progress-dot.is-on { background: var(--status-done); }

/* ---- round + flag toggle pills ---- */
.bb-toggle-row,
.bb-flag-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.bb-toggle-pill {
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.bb-toggle-pill:hover { border-color: var(--border-strong); color: var(--text); }
.bb-toggle-pill.is-on {
  background: var(--status-done-bg);
  color: var(--status-done-fg);
  border-color: var(--status-done-bd);
}
.bb-flag-pill.is-on {
  background: var(--status-stuck-bg);
  color: var(--status-stuck-fg);
  border-color: var(--status-stuck-bd);
}
.bb-flag-pill--sm { font-size: 10px; padding: 2px 7px; }

.bb-task-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---- status pill (4-state, mirrors old board exactly) ---- */
.bb-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 600;
}
.bb-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bb-status--notstarted { background: var(--status-notstarted-bg); color: var(--status-notstarted-fg); border-color: var(--status-notstarted-bd); }
.bb-status--working    { background: var(--status-working-bg);    color: var(--status-working-fg);    border-color: var(--status-working-bd);    }
.bb-status--stuck      { background: var(--status-stuck-bg);      color: var(--status-stuck-fg);      border-color: var(--status-stuck-bd);      }
.bb-status--done       { background: var(--status-done-bg);       color: var(--status-done-fg);       border-color: var(--status-done-bd);       }

/* ---- Training-style sub-item expand (video/deck/conversation) ---- */
.bb-subitems {
  display: none;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  padding-left: 24px;
}
.bb-task-row.is-expanded .bb-subitems { display: flex; }
.bb-subitems-loading,
.bb-subitems-empty {
  font-size: 11.5px;
  color: var(--text-faint);
  padding: 4px 0;
}
.bb-subitem-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.bb-subitem-kind {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--bg-tint);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
}
.bb-subitem-title {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- new-task drawer form ---- */
.bb-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bb-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
}
.bb-field-input {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-soft);
  outline: none;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color var(--t), box-shadow var(--t);
}
.bb-field-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.12);
}
textarea.bb-field-input { resize: vertical; min-height: 90px; }

/* ---- notes drawer ---- */
.bb-notes-drawer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bb-notes-history {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bb-notes-empty {
  font-size: 12.5px;
  color: var(--text-faint);
  padding: 8px 0;
}
.bb-note {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.bb-note-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.bb-note-author {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-soft);
}
.bb-note-when {
  font-size: 10.5px;
  color: var(--text-faint);
}
.bb-note-body {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.bb-note-composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}