/* Nudge prototype — design tokens & global styles
 *
 * ── Brand color system ─────────────────────────────────────────────────
 *
 *   --brand    Primary action / CTA. Monochrome dark grey. One brand color
 *              for ALL CTAs across the app — primary, secondary, ghost.
 *              Hierarchy comes from intensity, not hue:
 *                · Primary CTA: grey gradient + rim light  (draws the eye)
 *                · Secondary:   flat grey fill             (calmer)
 *                · Ghost:       outline + grey text        (quietest)
 *              Lets severity tones (warn / amber / good) carry all colour.
 *
 *   --accent   Themeable "look here" attention color. Warm ember by
 *              default; user can swap via the Tweaks panel (ember /
 *              electric / citrus / rose / graphite). Used on eyebrow
 *              dots, hero borders, severity-tinted text — STATE, not
 *              ACTION.
 *
 *   --good     Verified, supported, healthy. Green.
 *   --warn     Critical, drift, at-risk. Red-coral.
 *   --info     Neutral metadata, stage chips. Violet.
 *
 * Cool brand vs. warm accent keeps the eye honest: indigo = press,
 * amber = pay attention, red = alarm, green = good. ────────────────── */

:root {
  /* Brand v2 — Inter for body/UI (calm, system-terminal feel), Geist
   * reserved for display headings via --font-display, JetBrains Mono for
   * facts (timestamps, scores, evidence). Local Geist Mono kept as
   * fallback so any legacy rule still renders if a class slips through. */
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, "Consolas", monospace;

  /* Brand — near-black control surface. Same color on every CTA;
     intensity (filled vs outlined) carries hierarchy. */
  --brand-light:  #2A2725;
  --brand:        #1F1F1F;
  --brand-strong: #0D0D0D;
  --brand-soft:   rgba(31, 31, 31, 0.18);
  --brand-ink:    #F5F3EE;

  /* Operational instrument palette — each color is load-bearing and
     used SPARINGLY. The default UI is warm-neutral mono; color =
     signal, not decoration.
       --accent (amber-600)   · WATCH       — middle severity, brand tone
       --warn   (red-600)     · URGENT      — true alarm, loudest, rare
       --good   (sage)        · VERIFIED    — on-track, calm presence
       --info   (slate-blue)  · BUYER-SIDE  — cool counter-tone for info
     Soft variants are kept at ~18% alpha for chip/rail backgrounds. */
  --accent: #D97706;                       /* amber-600 — watch */
  --accent-soft: rgba(217, 119, 6, 0.18);
  --accent-strong: #B45309;                /* amber-700 for hover/press */
  --accent-ink: #1A0F02;

  --good: #7DA690;                         /* muted sage — verified */
  --good-soft: rgba(125, 166, 144, 0.16);
  --risk: #B91C1C;                         /* clear muted red — at-risk health */
  --risk-soft: rgba(185, 28, 28, 0.10);
  --warn: #DC2626;                         /* red-600 — urgent, used rarely */
  --warn-soft: rgba(220, 38, 38, 0.16);
  --info: #6B8FAE;                         /* slate-blue — buyer-side info */
  --info-soft: rgba(107, 143, 174, 0.16);
  --closed-won: oklch(0.72 0.11 185);
  --closed-won-soft: oklch(0.72 0.11 185 / 0.18);
  --closed-lost: oklch(0.66 0.13 350);
  --closed-lost-soft: oklch(0.66 0.13 350 / 0.18);

  /* Density */
  --row-h: 56px;
  --pad-card: 20px;
  --gap: 16px;
  --pipeline-card-h: 230px;
  --pipeline-stack-card-h: 46px;

  --radius-card: 22px;
  --radius-pill: 999px;
  --radius-input: 12px;

  /* Shared platform chrome. Cards and major sections use these tokens so
     AE, manager, forecast, and Addy surfaces read as the same system. */
  --section-radius: 14px;
  --section-pad-y: 22px;
  --section-pad-x: 22px;
  --section-gap: 14px;
  --section-bg: color-mix(in oklch, var(--surface) 92%, var(--text) 4%);
  --section-border: color-mix(in oklch, var(--border) 76%, var(--text) 8%);
  --section-shadow:
    0 1px 0 rgba(255, 255, 255, 0.035) inset,
    0 10px 26px rgba(0, 0, 0, 0.14);

  /* Shadows — theme-aware overrides per-theme below */
}

[data-theme="dark"] {
  /* Brand v2 dark surfaces — pushed slightly closer to black for a more
     neutral matte canvas. Surfaces use a small but real luminance delta
     above bg so cards still "lift" without translucent glass effects. */
  --bg: #060606;
  --bg-2: #0F0F0F;
  --bg-3: #181818;
  --surface: #0F0F0F;
  --surface-2: #181818;
  --surface-3: #1F1F1F;
  --border: #1F1F1F;
  --border-strong: #2C2C2C;
  --text: #F2F1ED;       /* near-neutral off-white (still a hint of warmth) */
  --text-2: #9E9E9C;     /* supporting */
  --text-3: #555555;     /* muted */
  --chip: #181818;
  --inset: rgba(0, 0, 0, 0.36);
  --addy-bubble: linear-gradient(180deg, rgba(180,83,9,0.18), rgba(180,83,9,0.06));
  /* Primary CTA: warm light-grey pill on dark bg. Softer than pure off-white
     so it harmonises with the rest of the muted palette instead of shouting
     against it. */
  --cta: #DDD8C9;
  --cta-strong: #ECE7D8;
  --cta-soft: rgba(221, 216, 201, 0.10);
  --cta-ink: #161310;
  --hairline: #1F1F1F;
  --hairline-strong: #2C2C2C;
  /* Elevation — neutral very-dark-grey (#1a1a1a-ish) reads on near-black
     surfaces without going pure black. Each level pairs the drop with a
     faint white inset hairline at the top edge for the lifted look. */
  --shadow-card:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 18px 38px -22px rgba(20,20,20,0.85),
    0 4px 10px -6px rgba(20,20,20,0.55);
  --shadow-md:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 10px 22px -14px rgba(20,20,20,0.8),
    0 3px 8px -5px rgba(20,20,20,0.5);
  --shadow-lg:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 16px 32px -18px rgba(20,20,20,0.85),
    0 4px 10px -5px rgba(20,20,20,0.55);
  --shadow-xl:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 22px 48px -22px rgba(20,20,20,0.9),
    0 6px 14px -8px rgba(20,20,20,0.6);
  --shadow-2xl:
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 40px 80px -36px rgba(20,20,20,0.9),
    0 12px 28px -14px rgba(20,20,20,0.65);
  color-scheme: dark;
}

[data-theme="light"] {
  /* Brand v2 light surfaces — clean near-white canvas; cards sit on white
     with only a faint warm-neutral tint in secondary surfaces. */
  --brand-light:  #E6E3DA;
  --brand:        #CFCBC0;
  --brand-strong: #0D0D0D;
  --brand-soft:   rgba(13, 13, 13, 0.06);
  --brand-ink:    #FFFFFF;

  /* Light canvas pushed closer to white for lower visual weight. The
     non-white values are kept subtle so surfaces remain legible without a
     heavy cream cast. */
  --bg: #FDFDFC;
  --bg-2: #FFFFFF;
  --bg-3: #F7F7F5;
  --surface: #FFFFFF;
  --surface-2: #F8F8F6;
  --surface-3: #F1F1EE;
  --border: #E8E8E4;
  --border-strong: #CECEC8;
  --text: #18181A;
  --text-2: #555555;
  --text-3: #A6A6A2;
  --chip: #F8F8F6;
  --inset: rgba(0,0,0,0.04);
  --addy-bubble: linear-gradient(180deg, rgba(180,83,9,0.14), rgba(180,83,9,0.04));
  /* Primary CTA: warm charcoal pill on the near-white bg. Less stark than
     pure black; still anchors as primary action. */
  --cta: #2B2723;
  --cta-strong: #1F1B17;
  --cta-soft: rgba(43, 39, 35, 0.06);
  --cta-ink: #FFFFFF;
  --hairline: #E8E8E4;
  --hairline-strong: #CECEC8;
  /* Elevation — small, layered, neutral grey. The "lifted" feel here comes
     from a tight near-shadow + a wider far-shadow + a single 1px hairline
     at the bottom as a "grounding" cue (replaces the dark theme's inset
     white top-highlight, since white on white is invisible). */
  --shadow-card:
    0 1px 0 rgba(15,15,20,0.04),
    0 1px 2px rgba(15,15,20,0.04),
    0 4px 8px -2px rgba(15,15,20,0.05);
  --shadow-md:
    0 1px 0 rgba(15,15,20,0.04),
    0 2px 4px rgba(15,15,20,0.05),
    0 8px 16px -4px rgba(15,15,20,0.07);
  --shadow-lg:
    0 1px 0 rgba(15,15,20,0.04),
    0 4px 8px rgba(15,15,20,0.06),
    0 14px 28px -8px rgba(15,15,20,0.09);
  --shadow-xl:
    0 1px 0 rgba(15,15,20,0.05),
    0 6px 14px rgba(15,15,20,0.08),
    0 24px 48px -16px rgba(15,15,20,0.12);
  --shadow-2xl:
    0 1px 0 rgba(15,15,20,0.05),
    0 10px 24px rgba(15,15,20,0.10),
    0 36px 72px -24px rgba(15,15,20,0.16);
  --section-bg: #FFFFFF;
  --section-border: #E6E6E1;
  --section-shadow:
    0 1px 0 rgba(15, 15, 20, 0.035),
    0 8px 22px rgba(15, 15, 20, 0.055);
  color-scheme: light;
}

[data-density="compact"] {
  --row-h: 44px;
  --pad-card: 14px;
  --gap: 10px;
  --pipeline-card-h: 210px;
  --pipeline-stack-card-h: 42px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss03", "cv11", "calt";
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}

button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
button:disabled { cursor: not-allowed; opacity: 0.55; }
button:disabled:active { transform: none; }
input, textarea, select { font-family: inherit; color: inherit; }

/* ---------- atoms ---------- */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "ss01", "zero", "calt";
  letter-spacing: -0.005em;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-feature-settings: "ss01";
}
.eyebrow.accent { color: var(--accent); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--pad-card);
}
/* Card-in-card collapses to a flush band so the boxiness disappears */
.card .card,
.flush { background: transparent; border: 0; padding: 0; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--text-2);
  font-size: 12px;
  border: 1px solid var(--border);
}

.chip.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.chip.good { background: var(--good-soft); color: var(--good); border-color: transparent; }
.chip.info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.chip.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.chip.closed-won { background: var(--closed-won-soft); color: var(--closed-won); border-color: transparent; }
.chip.closed-lost { background: var(--closed-lost-soft); color: var(--closed-lost); border-color: transparent; }

/* Button system. The primary "click here" CTA is `.btn.accent` — it
 * pulls the actual ember accent so the next action is unmissable.
 * `.btn.primary` is reserved for high-contrast neutral actions (rare —
 * "Confirm + close" style). The unmodified `.btn` is the secondary
 * filler. Height/weight are bumped from the legacy 34px/500 to 36px/600
 * so buttons read as clickable surfaces, not labels. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    transform 120ms ease,
    box-shadow 160ms ease;
}
.btn:hover { background: var(--surface-3); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: var(--text);
  color: var(--bg);
  border-color: transparent;
}
.btn.primary:hover { opacity: 0.9; background: var(--text); }
.btn.accent {
  /* Primary CTA — warm off-white on dark for high contrast without
     burning amber on every button. Amber is reserved for "watch" /
     risk signals (dots, chips, rails), not for the action layer. Flat
     solid fill: no inner highlight contour, no drop edge — the button
     reads as a single confident surface. */
  background: var(--cta);
  color: var(--cta-ink);
  border-color: transparent;
  box-shadow: none;
}
.btn.accent:hover {
  background: var(--cta-strong);
  box-shadow: none;
}
.btn.primary:disabled,
.btn.accent:disabled {
  background: var(--surface-3);
  color: var(--text-3);
  border-color: var(--border);
  box-shadow: none;
}
.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
}
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.sm { height: 30px; padding: 0 12px; font-size: 12px; }
.btn.lg { height: 42px; padding: 0 20px; font-size: 14px; }

.input {
  height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-input);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  outline: none;
  width: 100%;
}
.input:focus { border-color: var(--border-strong); }
.input::placeholder { color: var(--text-3); }

.divider { height: 1px; background: var(--border); }

/* ---------- icon ---------- */
.icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- avatar ---------- */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, oklch(0.7 0.18 30), oklch(0.6 0.18 350));
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}
.avatar.addy {
  background:
    radial-gradient(120% 120% at 30% 20%, oklch(0.85 0.18 30) 0%, oklch(0.55 0.22 350) 60%, oklch(0.35 0.2 320) 100%);
}
.avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.avatar.xs { width: 20px; height: 20px; font-size: 9px; }
.avatar.lg { width: 44px; height: 44px; font-size: 15px; }

/* ---------- layout shell ---------- */
.app {
  position: relative;
  display: grid;
  /* Sidebar width is a custom property so the rail can expand/collapse
     smoothly without re-templating the grid. Default rail is icon-only. */
  --sidebar-width: 64px;
  grid-template-columns: var(--sidebar-width) 1fr;
  column-gap: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: var(--bg);
  transition: grid-template-columns 220ms ease;
}
.app.sidebar-expanded {
  --sidebar-width: 220px;
}
.app > .sidebar,
.app > .workspace { position: relative; z-index: 1; }

/* ---------- ambient background ----------
   Layered, color-free depth: a soft spotlight at top-center (light-from-above),
   a faint floor wash at the bottom, and a darker corner vignette.
   No texture layers or accent colors.
   Light theme: same structure, lower opacities + warmer paper tone. */
.ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  isolation: isolate;
}

/* Layer 1 — top-center spotlight + bottom floor wash. Both are neutral
   (slightly cool grey, no color), establishing a "light comes from above"
   read so cards lift cleanly off the canvas. */
.ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 45% at 50% -8%,
      rgba(255,255,255,0.045) 0%,
      rgba(255,255,255,0.018) 35%,
      transparent 70%),
    radial-gradient(80% 60% at 50% 120%,
      rgba(255,255,255,0.025) 0%,
      transparent 65%);
}

/* Layer 2 — corner vignette to deepen the edges. Pulls focus to the center
   without obvious darkening. */
.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%,
    transparent 55%,
    rgba(0,0,0,0.45) 100%);
}

.ambient-vignette { display: none; }

[data-theme="light"] .ambient::before {
  background:
    radial-gradient(60% 45% at 50% -8%,
      rgba(20,18,16,0.018) 0%,
      transparent 70%),
    radial-gradient(80% 60% at 50% 120%,
      rgba(20,18,16,0.014) 0%,
      transparent 65%);
}
[data-theme="light"] .ambient::after {
  background: radial-gradient(120% 90% at 50% 40%,
    transparent 55%,
    rgba(20,18,16,0.025) 100%);
}
/* ============================================================
   LIGHT THEME OVERRIDES — places where the dark-first surface
   logic doesn't translate cleanly. Each override here is solving
   a specific issue: dark-mode "light from above" gradients become
   "shadow from above" in light, white-on-white insets disappear,
   etc. We rebuild those surfaces from the light-mode side rather
   than fighting the dark logic.
   ============================================================ */

/* Modal back — keep the workspace visible behind the deal popup while
   dimming it enough for the detail panel to stay dominant. */
[data-theme="light"] .modal-back {
  background: rgba(15, 15, 20, 0.30);
}

/* Modal — keep it in the same cool-grey family as the dashboard. Pure white
   felt detached from the light workspace, so the panel sits just above bg. */
[data-theme="light"] .modal {
  background: color-mix(in oklch, var(--bg) 82%, var(--surface) 18%);
}

[data-theme="light"] .modal[data-screen-label="03 Deal Detail"] {
  --bg-2: #f1f1f4;
  --bg-3: #ededf1;
  --surface: #f6f6f8;
  --surface-2: #e8e8ee;
  --surface-3: #dedee6;
  background:
    linear-gradient(180deg, #f4f4f7 0%, #f1f1f4 72px),
    #f1f1f4;
  border-color: rgba(15, 15, 20, 0.10);
}

/* Priority card — same fix: flat white, neutral radial. The accent dot in
   the eyebrow + the alignment column's left rule carry the brand cue. */
[data-theme="light"] .cp-priority-shell { background: transparent; }
[data-theme="light"] .cp-banner { background: transparent; }
[data-theme="light"] .cp-banner:hover { background: color-mix(in oklch, var(--text) 4%, transparent); }

/* Pipeline stage rail nodes — in dark, the node sits on `var(--bg)` so it
   stands out against the canvas. In light, bg is the cool-grey canvas and
   bg-2 is white — make the node white so it reads as "above the line". */
[data-theme="light"] .pipeline-head-rail-node {
  background: var(--bg-2);
}

/* Account map — surface-2 is now closer to the modal bg in light, so add
   a faint inner border to retain definition. */
[data-theme="light"] .acct-map {
  background:
    linear-gradient(180deg, rgba(15,15,20,0.015), transparent 60%),
    var(--surface-2);
}

/* Sidebar — keep the canvas underneath so it doesn't read as a separate
   raised surface. Border-right alone provides the separation. */
[data-theme="light"] .app {
  background: var(--bg);
}

/* Dock chip & dock surface — the dock-chip uses a dark-tinted gradient by
   default (designed for dark theme). In light, it should match a normal
   raised pill. */
[data-theme="light"] .dock-chip {
  background:
    linear-gradient(180deg, var(--hairline), transparent),
    color-mix(in oklch, var(--bg-2) 60%, transparent);
  box-shadow: var(--shadow-md);
}
[data-theme="light"] .dock.compact {
  background: color-mix(in oklch, var(--bg-2) 60%, transparent);
}
[data-theme="light"] .composer {
  background: color-mix(in oklch, var(--surface-2) 70%, transparent);
}

/* BSP track — slightly more contrast on light so the band reads. */
[data-theme="light"] .cp-bsp-track {
  background: rgba(15, 15, 20, 0.08);
}

/* BSP marker pin — currently uses `var(--bg-2)` for the pin background,
   which after the bg-2 fix is white = same as cards. Keep this, but add a
   border to anchor the pin on the bar. */
[data-theme="light"] .cp-bsp-pin {
  background: #ffffff;
}

/* Input/textarea — give a slight recess on white cards. */
[data-theme="light"] .input,
[data-theme="light"] .deal-input,
[data-theme="light"] .deal-textarea,
[data-theme="light"] .deal-select {
  background: var(--surface-2);
}

/* Buttons in light: subtle change so .btn doesn't look identical to
   .btn.ghost on a white card. */
[data-theme="light"] .btn {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="light"] .btn:hover { background: var(--surface-3); }
[data-theme="light"] .btn.ghost { background: transparent; }
[data-theme="light"] .btn.ghost:hover { background: var(--surface-2); }
[data-theme="light"] .btn.primary,
[data-theme="light"] .btn.accent {
  background: var(--cta);
  color: var(--cta-ink);
  border-color: transparent;
}
[data-theme="light"] .btn.primary:hover,
[data-theme="light"] .btn.accent:hover {
  background: var(--cta-strong);
}
[data-theme="light"] .btn.primary:disabled,
[data-theme="light"] .btn.accent:disabled {
  background: var(--surface-3);
  color: var(--text-3);
  border-color: var(--border);
}

/* Avatar default gradient — in dark it's a vivid orange-pink; in light,
   tone it down to read on white surfaces. */
[data-theme="light"] .avatar {
  background: linear-gradient(135deg, oklch(0.62 0.15 30), oklch(0.5 0.16 350));
}

.sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  gap: 18px;
  border-right: 0;
  overflow: hidden;
}
/* Labels are hidden in the collapsed rail; the expanded rail reveals them
   next to each icon. Keep them in the DOM so screen-readers still announce
   button purpose when collapsed. */
.sidebar .nav-label {
  display: none;
  font-size: 13px;
  font-weight: 500;
  color: inherit;
  white-space: nowrap;
}
.sidebar.is-expanded {
  align-items: stretch;
  padding: 16px 12px;
}
.sidebar.is-expanded .nav-label { display: inline; }
.sidebar.is-expanded .nav-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 10px;
}
.sidebar.is-expanded .logo { align-self: flex-start; margin-left: 2px; }
.sidebar.is-expanded .sidebar-bottom-controls {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.sidebar.is-expanded .sidebar-mode-switch {
  flex-direction: row;
  width: 72px;
}
.sidebar.is-expanded .sidebar-mode-switch .mode-btn { flex: 1; }
.sidebar.is-expanded .sidebar-bottom-controls .nav-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
}
/* Toggle button — pinned chevron that flips the rail open/closed. */
.sidebar .sidebar-toggle {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.sidebar .sidebar-toggle:hover { background: var(--surface-2); color: var(--text); }
.sidebar.is-expanded .sidebar-toggle {
  width: 100%;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 10px;
  display: inline-flex;
}
.sidebar::after {
  /* Soft right-edge fade — replaces the old hard 1px divider with a thin
     gradient that feathers the sidebar into the workspace. Subtle enough
     to read as depth rather than a line. */
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 22px;
  pointer-events: none;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in oklch, var(--text) 6%, transparent)
  );
}
[data-theme="light"] .sidebar::after {
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in oklch, var(--text) 4%, transparent)
  );
}

.sidebar .logo {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, width 220ms ease, padding 220ms ease;
}
/* Wordmark only shows when the sidebar is expanded; the collapsed rail
   stays icon-only so the brand mark and the Nudge wordmark together act
   as the header of the expanded sidebar. */
.logo .logo-wordmark { display: none; }
.sidebar.is-expanded .logo {
  width: auto;
  min-width: 0;
  height: 40px;
  padding: 0 12px 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
}
.sidebar.is-expanded .logo .logo-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--text);
  line-height: 1;
}
.sidebar.is-expanded .logo .logo-wordmark sup {
  font-size: 8.5px;
  margin-left: 1px;
  color: var(--text-3);
  font-weight: 600;
  position: relative;
  top: -0.55em;
}
.sidebar .logo:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}
.sidebar .logo:active { transform: scale(0.94); }
.sidebar .logo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Addy lives in the logo. The two dots ARE her presence — each animates
   independently based on state. CSS-only vocabulary, no per-state JS:
     idle         — gentle synced breath (her resting state)
     scanning     — soft horizontal drift, slower breath (processing)
     has-something— right dot warms + pulses (whisper queued)
     speaking     — both dots pulse in offset rhythm (whisper visible)
     needs-you    — both flash warn (badge appears too)
     listening    — held wider + dim (after summon, holding)
   The current container (.sidebar .logo) keeps its 36×36 surface; the
   dots live centered inside via .logo-dots. */
.sidebar .logo {
  position: relative;
  /* Soft halo that breathes around the button — Addy's "presence field".
     Always-on, low-amplitude pulse so the eye registers her even when
     she's idle, without competing with the dots. */
}
.sidebar .logo::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    color-mix(in oklch, var(--accent) 38%, transparent),
    transparent 72%
  );
  opacity: 0.7;
  animation: addy-halo 2.6s ease-in-out infinite;
}
@keyframes addy-halo {
  0%, 100% { opacity: 0.45; transform: scale(0.9); }
  50%      { opacity: 0.95; transform: scale(1.15); }
}
.sidebar .logo:hover::before { opacity: 0.95; }
.logo-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  position: relative;
  z-index: 1;
}
/* The three dots are Addy's identity and the Nudge brand mark. At rest
   they hold the printed brand's progressive opacity (faint → medium →
   solid). State animations override opacity so all three become equal
   participants when she's actively scanning, speaking, or alerting. */
.logo-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  transform-origin: center;
  transition: background 220ms ease;
  will-change: transform, opacity;
  box-shadow: 0 0 8px color-mix(in oklch, var(--accent) 65%, transparent);
}
.logo-dot--1 { --logo-dot-base: 0.32; opacity: 0.32; }
.logo-dot--2 { --logo-dot-base: 0.6;  opacity: 0.6; }
.logo-dot--3 { --logo-dot-base: 1;    opacity: 1; }

/* idle — three dots fade out and reappear in a left-to-right wave. Each
   dot rides the same keyframe but staggered, so you always see the
   pattern moving across rather than blinking in unison. Peak opacity is
   the dot's brand base, so the resting silhouette stays on-logo. */
.logo[data-addy-state="idle"] .logo-dot {
  animation: addy-idle-wave 2.6s ease-in-out infinite;
}
.logo[data-addy-state="idle"] .logo-dot--1 { animation-delay: 0s; }
.logo[data-addy-state="idle"] .logo-dot--2 { animation-delay: 0.35s; }
.logo[data-addy-state="idle"] .logo-dot--3 { animation-delay: 0.7s; }
@keyframes addy-idle-wave {
  0%   { opacity: var(--logo-dot-base); transform: scale(1.1);
         box-shadow: 0 0 12px color-mix(in oklch, var(--accent) 75%, transparent); }
  35%  { opacity: 0;                    transform: scale(0.35);
         box-shadow: 0 0 0 0 transparent; }
  55%  { opacity: 0;                    transform: scale(0.35);
         box-shadow: 0 0 0 0 transparent; }
  100% { opacity: var(--logo-dot-base); transform: scale(1.1);
         box-shadow: 0 0 12px color-mix(in oklch, var(--accent) 75%, transparent); }
}
/* Legacy alias — kept so the `has-something` rule below still resolves. */
@keyframes addy-heartbeat {
  0%, 100% { transform: scale(1);    opacity: 0.9; }
  50%      { transform: scale(1.18); opacity: 1; }
}
@keyframes addy-glance-l {
  0%, 88%, 100% { translate: 0 0; }
  92%           { translate: -1.5px 0; }
  96%           { translate: -0.5px 0; }
}
@keyframes addy-glance-r {
  0%, 88%, 100% { translate: 0 0; }
  92%           { translate: 1.5px 0; }
  96%           { translate: 0.5px 0; }
}
/* Legacy alias — older `has-something` rule still references addy-breath. */
@keyframes addy-breath {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.8); }
}

/* scanning — outer dots drift outward, center dot stays put. Reads as the
   logo "spreading attention" while she's looking through signals. */
.logo[data-addy-state="scanning"] .logo-dot {
  animation: addy-scan-c 5.2s ease-in-out infinite;
  opacity: 0.85;
}
.logo[data-addy-state="scanning"] .logo-dot--1 { animation-name: addy-scan-l; }
.logo[data-addy-state="scanning"] .logo-dot--3 { animation-name: addy-scan-r; }
@keyframes addy-scan-l {
  0%, 100% { transform: translateX(0)    scale(1); }
  50%      { transform: translateX(-2px) scale(0.92); }
}
@keyframes addy-scan-c {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.92); }
}
@keyframes addy-scan-r {
  0%, 100% { transform: translateX(0)    scale(1); }
  50%      { transform: translateX(2px)  scale(0.92); }
}

/* has-something — first two dots stay calm, the third (the "solid" brand
   dot) warms and pulses. Visually says "there's a signal at the end of
   the chain". */
.logo[data-addy-state="has-something"] .logo-dot--1,
.logo[data-addy-state="has-something"] .logo-dot--2 {
  animation: addy-breath 4.4s ease-in-out infinite;
}
.logo[data-addy-state="has-something"] .logo-dot--3 {
  background: var(--accent-strong);
  animation: addy-pulse 2.2s ease-in-out infinite;
  opacity: 1;
}
@keyframes addy-pulse {
  0%, 100% { transform: scale(1);
             box-shadow: 0 0 0 0   color-mix(in oklch, var(--accent) 40%, transparent); }
  50%      { transform: scale(1.22);
             box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 22%, transparent); }
}

/* speaking — three dots pulse in a staggered cadence, faster than idle */
.logo[data-addy-state="speaking"] .logo-dot {
  animation: addy-speak 0.9s ease-in-out infinite;
  background: var(--accent-strong);
}
.logo[data-addy-state="speaking"] .logo-dot--1 { animation-delay: 0s; }
.logo[data-addy-state="speaking"] .logo-dot--2 { animation-delay: 0.15s; }
.logo[data-addy-state="speaking"] .logo-dot--3 { animation-delay: 0.3s; }
@keyframes addy-speak {
  0%, 100% { opacity: 1;    transform: scale(1.15); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}

/* needs-you — all three flash warn slowly; pairs with the count badge */
.logo[data-addy-state="needs-you"] .logo-dot {
  animation: addy-flash 1.6s ease-in-out infinite;
  opacity: 1;
}
@keyframes addy-flash {
  0%, 100% { background: var(--accent); transform: scale(1); }
  50%      { background: var(--warn);   transform: scale(1.25);
             box-shadow: 0 0 0 4px color-mix(in oklch, var(--warn) 18%, transparent); }
}

/* listening — held state after summon. No animation; widened + dim. */
.logo[data-addy-state="listening"] .logo-dot {
  animation: none;
  transform: scale(1.35);
  opacity: 0.45;
  background: var(--accent);
}

/* Count badge — anchors to the upper-right of the logo box. Halo against
   the sidebar background keeps it legible on either theme. */
.logo-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--warn);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--bg);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .logo[data-addy-state] .logo-dot { animation: none; }
  .sidebar .logo::before { animation: none; opacity: 0.5; }
}

.sidebar .nav-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  transition: background 120ms ease, color 120ms ease;
}
.sidebar .nav-btn:hover { background: var(--surface-2); color: var(--text); }
.sidebar .nav-btn.active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
}
.sidebar .nav-btn .dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  background: var(--warn);
  color: white;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  display: grid;
  place-items: center;
}

.sidebar .spacer { flex: 1; }

/* ─────────── Bottom user dock ───────────
   Three controls in one cohesive tray: AE/MGR mode toggle, theme
   toggle (dark/light), profile menu trigger. Both toggles share the
   same segmented-pill design with a sliding indicator. */
.sidebar-bottom-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 6px;
  width: 100%;
  position: relative;
}
.sidebar-bottom-controls .nav-label,
.sidebar.is-expanded .sidebar-bottom-controls .nav-label {
  display: none;
}

/* Segmented pill base — shared by mode switch and theme switch. The
   ::before pseudo is the sliding indicator that animates between the
   two slots. */
.sidebar-mode-switch,
.sidebar-theme-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 50px;
  height: 26px;
  padding: 2px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--text) 6%, transparent);
  border: 1px solid var(--hairline);
}
.sidebar-mode-switch::before,
.sidebar-theme-switch::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  border-radius: 999px;
  background: var(--surface);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px color-mix(in oklch, var(--text) 8%, transparent);
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), background 220ms ease;
  pointer-events: none;
  z-index: 0;
}
.sidebar-mode-switch.is-mgr::before  { transform: translateX(100%); }
.sidebar-theme-switch.is-light::before { transform: translateX(100%); }
.sidebar-mode-switch.is-mgr::before {
  background: color-mix(in oklch, var(--accent) 20%, var(--surface));
}

.sidebar-mode-switch .mode-btn,
.sidebar-theme-switch .theme-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 140ms ease;
}
.sidebar-mode-switch .mode-btn .icon,
.sidebar-theme-switch .theme-btn .icon {
  width: 11px;
  height: 11px;
}
.sidebar-mode-switch .mode-btn:hover,
.sidebar-theme-switch .theme-btn:hover {
  color: var(--text-2);
}
.sidebar-mode-switch .mode-btn.is-active,
.sidebar-theme-switch .theme-btn.is-active {
  color: var(--text);
}
.sidebar.is-manager .sidebar-mode-switch .mode-btn.is-active {
  color: var(--accent);
}

/* Label text inside each segment — hidden when sidebar is collapsed
   (only icon shows) so the 50px pill reads as a tight icon toggle. */
.sidebar-mode-switch .mode-btn-label,
.sidebar-theme-switch .theme-btn-label {
  display: none;
}

/* Expanded sidebar — the pills get wider and labels appear. Override
   the older horizontal-row layout that lived in the base sidebar
   block (the new dock is a vertical stack regardless of expansion). */
.sidebar.is-expanded .sidebar-bottom-controls {
  flex-direction: column;
  padding: 12px 14px 14px;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
}
.sidebar.is-expanded .sidebar-mode-switch,
.sidebar.is-expanded .sidebar-theme-switch {
  width: 100%;
  height: 34px;
  padding: 3px;
}
.sidebar.is-expanded .sidebar-mode-switch .mode-btn,
.sidebar.is-expanded .sidebar-theme-switch .theme-btn {
  height: 28px;
  gap: 6px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sidebar.is-expanded .sidebar-mode-switch .mode-btn-label,
.sidebar.is-expanded .sidebar-theme-switch .theme-btn-label {
  display: inline;
}
.sidebar.is-expanded .sidebar-bottom-controls .sidebar-profile {
  position: static;
}
.sidebar.is-expanded .sidebar-bottom-controls .sidebar-profile-menu {
  left: 0;
  width: 100%;
  min-width: 0;
}

/* Profile / account row pinned to the bottom of the sidebar. The trigger
   reuses the nav-btn skin so it sits in the rail; clicking opens a small
   menu above (since this lives at the bottom) with profile commands. */
.sidebar-profile { position: relative; }
.sidebar-profile-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.sidebar-profile-trigger:hover {
  background: color-mix(in oklch, var(--text) 5%, transparent);
}
.sidebar .sidebar-profile-trigger.is-open {
  background: color-mix(in oklch, var(--text) 7%, transparent);
  color: var(--text);
}
.sidebar-profile-trigger-id {
  display: none;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.sidebar-profile-trigger-id b {
  display: block;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-profile-trigger-id em {
  display: block;
  margin-top: 2px;
  color: var(--text-3);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar.is-expanded .sidebar-profile-trigger {
  width: 100%;
  height: 48px;
  padding: 6px 8px;
  justify-content: flex-start;
}
.sidebar.is-expanded .sidebar-profile-trigger-id {
  display: flex;
}

/* Avatar — proper circle with accent ring + small online status dot.
   Same element scales up inside the profile menu head. */
.sidebar-profile-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, oklch(0.72 0.14 30), oklch(0.6 0.16 350));
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex: none;
  box-shadow:
    0 0 0 1.5px var(--bg),
    0 0 0 3px color-mix(in oklch, var(--accent) 32%, transparent);
}
.sidebar-profile-status {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--good);
  border: 1.5px solid var(--bg);
  box-shadow: 0 0 0 0.5px color-mix(in oklch, var(--good) 60%, transparent);
}
.sidebar-profile-avatar.lg {
  width: 40px;
  height: 40px;
  font-size: 16px;
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 3.5px color-mix(in oklch, var(--accent) 32%, transparent);
}
.sidebar-profile-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-profile-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: max(220px, 100%);
  z-index: 40;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 22px 56px -18px color-mix(in oklch, var(--text) 34%, transparent),
              0 2px 8px -4px color-mix(in oklch, var(--text) 12%, transparent);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar:not(.is-expanded) .sidebar-profile-menu {
  left: calc(100% + 8px);
  bottom: 0;
  width: 220px;
}
.sidebar-profile-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--hairline);
}
.sidebar-profile-menu-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sidebar-profile-menu-id b {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.sidebar-profile-menu-id em {
  font-style: normal;
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-profile-menu-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, color 120ms ease;
}
.sidebar-profile-menu-item:hover {
  background: var(--surface-2);
  color: var(--text);
}
.sidebar-profile-menu-item.is-signout { color: var(--risk, var(--accent)); }
.sidebar-profile-menu-item.is-signout:hover {
  background: color-mix(in oklch, var(--risk, var(--accent)) 14%, transparent);
}
.sidebar-profile-menu-sep {
  display: block;
  height: 1px;
  background: var(--hairline);
  margin: 4px 4px;
}

/* Weather banner — now the entry point to the buyer-progression forecast.
   Click the whole card to open it. */
.cp-banner.is-clickable {
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.cp-banner.is-clickable:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: 0 14px 34px -16px color-mix(in oklch, var(--text) 20%, transparent);
}
.cp-banner.is-clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.cp-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding-right: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  opacity: 0.85;
  transition: color 140ms ease, transform 140ms ease, opacity 140ms ease;
}
.cp-banner.is-clickable:hover .cp-banner-cta {
  color: var(--text);
  opacity: 1;
  transform: translateX(2px);
}

.workspace {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.workspace-main {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  display: grid;
}
.workspace-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  /* Flush against the sidebar on the left; rounded only on the outer (right)
     side so the header reads as an extension of the sidebar surface, not a
     detached card with a hard inset corner at the joint. */
  margin: 10px 14px 0 0;
  padding: 15px 20px;
  border: 1px solid var(--section-border);
  border-left: 0;
  border-radius: 0 16px 16px 0;
  background: var(--section-bg);
  box-shadow: var(--section-shadow);
}
.workspace-header.has-control-slot {
  /* Slot now holds just the search control, so the title takes the lion's
     share of the row and the slot collapses to its content width. */
  grid-template-columns: minmax(280px, 1fr) auto;
  align-items: center;
  padding: 16px 20px;
}
.workspace-header-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.workspace-header-copy .platform-eyebrow {
  white-space: nowrap;
}
.workspace-header-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.026em;
  color: var(--text);
  white-space: nowrap;
  text-shadow:
    0 1px 0 color-mix(in oklch, var(--bg) 50%, transparent),
    0 0 28px color-mix(in oklch, var(--accent) 10%, transparent);
  font-feature-settings: "ss01", "cv11", "ss02";
}
.workspace-header-subtitle {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.4;
  min-width: 0;
  max-width: 60ch;
}
.workspace-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}
.workspace-header-actions.has-control-slot {
  width: 100%;
}
.workspace-header-slot {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.workspace-header-meta {
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.workspace-header-stat {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 64px;
  padding: 7px 12px;
  border-radius: 12px;
  background: color-mix(in oklch, var(--surface-2) 70%, transparent);
  border: 1px solid var(--hairline);
  white-space: nowrap;
}
.workspace-header-stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1;
}
.workspace-header-stat-value {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1180px) {
  .workspace-header.has-control-slot {
    grid-template-columns: minmax(0, 1fr);
  }
  .workspace-header.has-control-slot .workspace-header-actions {
    justify-content: flex-start;
  }
  .workspace-header.has-control-slot .deals-header-controls {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.scroll {
  overflow-y: auto;
  padding: 20px 32px 28px;
}
/* Deals page: drop the top padding so the sticky list header pins flush
   against the workspace header (no gap that rows can scroll through).
   The view-options bar inside the page provides its own top breathing
   room via margin. */
.scroll[data-screen-label="02 Deal Rooms"] {
  padding-top: 0;
}
.scroll[data-screen-label="02 Deal Rooms"] .deals-view-options-bar {
  margin-top: 16px;
}

/* ── Login stage ─────────────────────────────────────────────────────
   Same universe as the platform: full-bleed dark canvas with the
   ambient parallax layer behind. The card is the same surface the
   workspace uses elsewhere so a returning user sees Nudge from the
   first paint, not a generic login. */
.login-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  display: grid;
  place-items: center;
}
.login-screen {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  padding: 0 24px;
}
.login-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px;
  border-radius: 20px;
  border: 1px solid var(--section-border);
  background: var(--section-bg);
  box-shadow: 0 32px 80px -28px color-mix(in oklch, var(--text) 38%, transparent),
              0 4px 14px -6px color-mix(in oklch, var(--text) 14%, transparent);
}
.login-card-head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.login-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.login-brand-wordmark {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--text);
  line-height: 1;
}
.login-brand-wordmark sup {
  font-size: 9.5px;
  margin-left: 1px;
  color: var(--text-3);
  font-weight: 600;
  position: relative;
  top: -0.55em;
}
.login-card-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.login-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--text);
  line-height: 1.1;
}
.login-card-sub {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-2);
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.login-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.login-field-aux {
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
}
.login-field-aux:hover { color: var(--text); }
.login-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.login-input::placeholder { color: var(--text-3); }
.login-input:hover { border-color: var(--border-strong); }
.login-input:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
}
.login-input[aria-invalid="true"] {
  border-color: color-mix(in oklch, var(--risk, var(--accent)) 55%, var(--border));
}
.login-submit {
  width: 100%;
  height: 46px;
  justify-content: center;
  margin-top: 6px;
  font-size: 14px;
}
.login-card-foot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--hairline);
  color: var(--text-3);
  font-size: 12.5px;
  margin-top: 4px;
  padding-top: 14px;
}
.login-link {
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklch, var(--text) 30%, transparent);
}
.login-link:hover {
  text-decoration-color: var(--text);
}
.scroll::-webkit-scrollbar { width: 10px; }
.scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.scroll::-webkit-scrollbar-track { background: transparent; }

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.dashboard-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.view-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
}
.view-switch button {
  height: 26px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.view-switch button:hover { color: var(--text); background: color-mix(in oklch, var(--text) 5%, transparent); }
.view-switch button.is-active {
  color: var(--cta-ink);
  background: var(--cta);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.brand-mark-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--text);
}
/* Progressive opacity matches the printed brand sheet: faded → medium →
   solid, reading as a signal that builds up to a "nudge". */
.brand-mark-dot--1 { opacity: 0.28; }
.brand-mark-dot--2 { opacity: 0.55; }
.brand-mark-dot--3 { opacity: 1; }
.brand-wordmark {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--text);
  line-height: 1;
}
.brand-wordmark sup {
  font-size: 9px;
  margin-left: 1px;
  color: var(--text-3);
  font-weight: 600;
  top: -0.5em;
  position: relative;
}

/* ────────────────────────────────────────────────────────────────────
 * TYPE SCALE — single source of truth for headings.
 *
 *   .display    32px  · screen title (one per route)
 *   .title      22px  · section heading (cockpit widgets, manager blocks)
 *   .subtitle   16px  · sub-section / card title
 *   .body       14px  · default copy
 *   .eyebrow    10px  · category kicker, mono caps (defined above)
 *
 * Aliases below keep the legacy class names (.h1/.h2/.h3, plus the
 * one-offs `.letter-section`, `.pipeline-weather-headline`,
 * `.coach-block-title`) visually identical so screens don't need rewrites
 * to pick up the new scale.
 * ──────────────────────────────────────────────────────────────────── */
.display,
.h1 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
/* H2 — section-level titles inside content. Calmer than the sticky H1
   so the hierarchy reads at a glance: H1 sets the page, H2 marks
   sections, body text carries detail. */
.title,
.h2,
.pipeline-weather-headline,
.coach-block-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.010em;
  line-height: 1.2;
  margin: 0;
}
.subtitle,
.h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 0;
}
.body { font-size: 14px; line-height: 1.5; }
.muted { color: var(--text-2); }
.sub { color: var(--text-3); font-size: 12px; }

/* Page reading structure: every route and major subsection should read as
   eyebrow -> title -> subtitle -> optional metadata/actions. */
.platform-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  margin: 0 0 22px;
}
.platform-page-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.platform-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.platform-page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text);
  text-wrap: balance;
}
.platform-page-subtitle {
  margin: 0;
  max-width: 68ch;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.5;
  text-wrap: pretty;
}
.platform-page-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 520px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.platform-page-meta span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.platform-page-meta b {
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.briefing-title,
.manager-topline-title {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text);
  text-wrap: balance;
}
@media (max-width: 760px) {
  .platform-page-header {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .platform-page-meta { justify-content: flex-start; }
  .platform-page-title,
  .briefing-title,
  .manager-topline-title { font-size: 26px; }
}

/* ────────────────────────────────────────────────────────────────────
 * PIPELINE STRIP — signature moment.
 * A 3px bar pinned to the top of the viewport. Its color + animation
 * reflect the weighted buyer↔seller alignment across open deals, so a
 * glance at the top of the screen tells you pipeline health.
 *   tone-good   · soft green, slow breathe (4s)
 *   tone-amber  · ember, gentle left→right traverse (drift forming)
 *   tone-warn   · muted red, faster pulse + traverse (heavy drift)
 * ──────────────────────────────────────────────────────────────────── */
.pipeline-strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 10000;
  pointer-events: none;
  overflow: hidden;
}
.pipeline-strip-fill {
  position: absolute;
  inset: 0;
  background: var(--good);
  opacity: 0.85;
}
.pipeline-strip.tone-good .pipeline-strip-fill {
  background: var(--good);
  animation: pipeline-breathe 4.4s ease-in-out infinite;
}
.pipeline-strip.tone-amber .pipeline-strip-fill {
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--accent) 25%, transparent) 0%,
    var(--accent) 50%,
    color-mix(in oklch, var(--accent) 25%, transparent) 100%
  );
  background-size: 240% 100%;
  animation: pipeline-traverse 4s linear infinite;
  opacity: 0.95;
}
.pipeline-strip.tone-warn .pipeline-strip-fill {
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--risk) 26%, transparent) 0%,
    var(--risk) 50%,
    color-mix(in oklch, var(--risk) 26%, transparent) 100%
  );
  background-size: 220% 100%;
  animation:
    pipeline-traverse 3s linear infinite,
    pipeline-pulse 2.4s ease-in-out infinite;
  opacity: 0.88;
}
@keyframes pipeline-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}
@keyframes pipeline-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.18); }
}
@keyframes pipeline-traverse {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pipeline-strip-fill { animation: none !important; }
}

/* Helper line — the "what this section means" one-liner that lives
 * directly under a .title. Quiet by default; never carries an action. */
.section-helper {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
  max-width: 56ch;
}

/* Section header cluster — eyebrow + title + helper stacked together. */
.section-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 14px;
}
.section-header .eyebrow { margin-bottom: 2px; }

/* ---------- spark ---------- */
.spark { width: 100%; height: 36px; }
.spark .line { fill: none; stroke-width: 1.5; }
.spark .area { stroke: none; }

/* ---------- progress bar ---------- */
.bar {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  position: relative;
}
.bar > .fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}
.bar.seller > .fill { background: linear-gradient(90deg, var(--text-2), var(--text)); }
.bar.warn > .fill { background: linear-gradient(90deg, var(--warn), oklch(0.7 0.2 28)); }
.bar.good > .fill { background: linear-gradient(90deg, var(--good), oklch(0.78 0.18 158)); }

/* ---------- AI dock ---------- */
.dock {
  position: relative;
  justify-self: center;
  align-self: end;
  width: min(780px, calc(100% - 48px));
  margin: 0 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 20;
}

.dock.left { justify-self: start; }
.dock.right { justify-self: end; }

/* Home dock — float the composer at the bottom-center, fully see-through */
.dock:not(.compact) {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, calc(100% - 64px));
  margin: 0;
  z-index: 30;
  pointer-events: none;
}
.dock:not(.compact).left { left: 24px; transform: none; }
.dock:not(.compact).right { left: auto; right: 24px; transform: none; }
/* Only the actual interactive surfaces capture clicks; gaps click through */
.dock:not(.compact) .composer,
.dock:not(.compact) .dock-starter,
.dock:not(.compact) .dock-slash,
.dock:not(.compact) .dock-msg-bubble {
  pointer-events: auto;
}

.dock:not(.compact) .composer {
  background: transparent;
  border-color: color-mix(in oklch, var(--text) 18%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.dock:not(.compact) .dock-starter {
  background: transparent;
  border-color: color-mix(in oklch, var(--text) 16%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.dock:not(.compact) .dock-msg.user .dock-msg-bubble {
  background: transparent;
  border-color: color-mix(in oklch, var(--text) 18%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.dock.compact {
  position: absolute;
  right: 22px;
  bottom: 20px;
  width: min(420px, calc(100% - 44px));
  margin: 0;
  padding: 12px;
  border: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
  border-radius: 18px;
  background: color-mix(in oklch, var(--bg-2) 30%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: var(--shadow-xl);
}
/* Inside the compact frosted panel, children should be naked — no nested cards */
.dock.compact .composer {
  background: transparent;
  border-color: color-mix(in oklch, var(--border) 40%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.dock.compact .dock-starter,
.dock.compact .dock-slash {
  background: color-mix(in oklch, var(--surface-2) 25%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.dock.compact .dock-msg.user .dock-msg-bubble {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: color-mix(in oklch, var(--surface-2) 35%, transparent);
}
.dock.compact .composer {
  border-radius: 16px;
  padding-left: 12px;
}
.dock.compact .composer > .icon:first-child { display: none; }
.dock.compact .composer-suggestion {
  max-width: 46%;
}
.dock-context {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 28px 0 2px;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dock-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--text-3);
}
.dock-close:hover {
  background: var(--surface-2);
  color: var(--text);
}
.dock-chip {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(360px, calc(100% - 44px));
  height: 40px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--border-strong) 50%, transparent);
  background:
    linear-gradient(180deg, var(--hairline), transparent),
    color-mix(in oklch, var(--bg-2) 30%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  color: var(--text);
  box-shadow: 0 18px 38px -22px color-mix(in oklch, var(--bg) 90%, transparent);
}
.dock-chip span:not(.avatar) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 500;
}
.dock-chip .icon { color: var(--accent); }
.dock-chip:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}

.composer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in oklch, var(--surface-2) 30%, transparent);
  border: 1px solid color-mix(in oklch, var(--border) 55%, transparent);
  border-radius: 999px;
  padding: 6px 6px 6px 16px;
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  box-shadow: var(--shadow-lg);
}
.composer-suggestion {
  min-width: 0;
  max-width: 42%;
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px 0 5px;
  border-radius: 999px;
  background: var(--addy-bubble);
  border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
  color: var(--text);
  flex: 0 1 auto;
}
.composer-suggestion:hover {
  background: color-mix(in oklch, var(--accent) 18%, var(--surface-2));
}
.composer-suggestion-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
}
.composer .input {
  background: transparent;
  border: 0;
  height: 36px;
  padding: 0;
  flex: 1;
  min-width: 150px;
  font-size: 14px;
}
.composer .input:focus { border: 0; }
.composer textarea.input {
  resize: none;
  font-family: inherit;
  height: 36px;
  max-height: 120px;
  padding: 8px 0;
  line-height: 1.4;
  overflow-y: auto;
}
.composer .send {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  display: grid;
  place-items: center;
}
.composer .send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Multi-turn thread */
.dock-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 4px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.dock.compact .dock-thread { max-height: 220px; }
.dock-msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 92%;
}
.dock-msg.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.dock-msg.addy { align-self: flex-start; }
.dock-msg-bubble {
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.dock-msg.user .dock-msg-bubble {
  background: color-mix(in oklch, var(--surface-2) 30%, transparent);
  border: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
  color: var(--text);
  border-bottom-right-radius: 4px;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.dock-msg.addy .dock-msg-bubble {
  background: var(--addy-bubble);
  border: 1px solid color-mix(in oklch, var(--accent) 45%, transparent);
  color: var(--text);
  border-bottom-left-radius: 4px;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 8px 24px -16px color-mix(in oklch, var(--accent) 50%, transparent);
}
.dock-msg-thinking {
  font-size: 12px;
  color: var(--text-2);
}

/* Contextual starter prompts */
.dock-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 4px;
}
.dock-starter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
  background: color-mix(in oklch, var(--surface-2) 25%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease, background 140ms ease;
}
.dock-starter .icon { color: var(--accent); }
.dock-starter:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* Slash command popover */
.dock-slash {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
  background: color-mix(in oklch, var(--surface) 65%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow-lg);
  max-width: 360px;
  align-self: flex-start;
}
.dock.right .dock-slash { align-self: flex-end; }
.dock-slash-item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.dock-slash-item:hover { background: var(--surface-2); }
.dock-slash-item .icon { color: var(--accent); }
.dock-slash-cmd {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
}
.dock-slash-hint {
  font-size: 12px;
  color: var(--text-2);
}

/* ---------- Addy command center ---------- */
.addy-shell {
  max-width: 1120px;
  margin: 0 auto;
}
.addy-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.addy-hero-copy {
  max-width: 680px;
}
.addy-hero-copy .h1 {
  margin-top: 8px;
}
.addy-hero-copy p {
  margin-top: 8px;
  max-width: 560px;
  line-height: 1.6;
}
.addy-hero-stats {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--text-3);
  font-size: 12px;
}
.addy-hero-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
.addy-hero-stats b {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 650;
}
.addy-ops-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 18px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.addy-op-step {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "num label"
    "num value";
  gap: 2px 10px;
  padding: 12px 14px;
  border-right: 1px solid var(--border);
}
.addy-op-step:last-child { border-right: 0; }
.addy-op-step span {
  grid-area: num;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.25;
}
.addy-op-step b {
  grid-area: label;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}
.addy-op-step em {
  grid-area: value;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.addy-screen-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.85fr);
  gap: 34px;
  margin-top: 24px;
  align-items: start;
}
.addy-side-stack {
  display: grid;
  gap: 28px;
}
.addy-panel {
  min-width: 0;
}
.addy-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.addy-section-head span {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.addy-section-head em {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10.5px;
}
.addy-list,
.addy-feed-list {
  display: grid;
}
.addy-list {
  margin-top: 4px;
}
.addy-queue-head {
  display: grid;
  grid-template-columns: 64px minmax(150px, 0.85fr) minmax(220px, 1.2fr) minmax(170px, 0.8fr);
  gap: 16px;
  padding: 11px 2px 9px;
  border-bottom: 1px solid var(--border);
}
.addy-queue-head span {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.addy-queue-item {
  display: grid;
  grid-template-columns: 64px minmax(150px, 0.85fr) minmax(220px, 1.2fr) minmax(170px, 0.8fr);
  gap: 16px;
  align-items: start;
  width: 100%;
  padding: 15px 2px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.addy-queue-item:hover {
  background: color-mix(in oklch, var(--text) 3%, transparent);
}
.addy-queue-item:focus-visible {
  outline-offset: 4px;
}
.addy-rank {
  display: grid;
  gap: 4px;
  justify-items: start;
}
.addy-rank span {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 650;
}
.addy-queue-item.tone-warn .addy-rank span { color: var(--warn); }
.addy-queue-item.tone-info .addy-rank span,
.addy-queue-item.tone-amber .addy-rank span { color: var(--accent); }
.addy-queue-item.tone-good .addy-rank span { color: var(--good); }
.addy-rank em {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
}
.addy-feed-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.addy-row-deal {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.addy-row-deal span,
.addy-feed-meta span {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.addy-row-deal em,
.addy-feed-meta time {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10.5px;
  white-space: nowrap;
}
.addy-symptoms {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}
.addy-symptoms span {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
}
.addy-symptoms span.tone-warn { color: var(--warn); }
.addy-symptoms span.tone-amber,
.addy-symptoms span.tone-info { color: var(--accent); }
.addy-symptoms span.tone-good { color: var(--good); }
.addy-row-signal {
  min-width: 0;
}
.addy-row-signal b {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  text-wrap: pretty;
  margin-bottom: 4px;
}
.addy-queue-item p,
.addy-feed-row p,
.addy-memory-row p {
  margin: 0;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.48;
  text-wrap: pretty;
}
.addy-row-action {
  display: grid;
  gap: 7px;
  min-width: 0;
  justify-items: start;
}
.addy-row-action span {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  text-wrap: pretty;
}
.addy-row-action em {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  white-space: nowrap;
}
.addy-feed-list {
  margin-top: 4px;
}
.addy-feed-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.addy-feed-row.tone-warn .addy-feed-meta span { color: var(--warn); }
.addy-feed-row.tone-amber .addy-feed-meta span,
.addy-feed-row.tone-info .addy-feed-meta span { color: var(--accent); }
.addy-feed-row.tone-good .addy-feed-meta span { color: var(--good); }
.addy-feed-row .dot-status {
  margin-top: 7px;
}
.addy-memory-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.addy-memory-row.is-down .addy-feed-meta time { color: var(--warn); }
.addy-memory-row.is-up .addy-feed-meta time { color: var(--good); }
.addy-memory-bar {
  position: relative;
  height: 3px;
  margin: 8px 0 7px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--text-3) 14%, transparent);
  overflow: hidden;
}
.addy-memory-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--text-3);
}
.addy-memory-row.is-down .addy-memory-bar span { background: var(--warn); }
.addy-memory-row.is-up .addy-memory-bar span { background: var(--good); }
.addy-screen {
  padding-bottom: 180px;
}

/* ---------- focus ring on links/buttons ---------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: inherit;
}

/* ---------- modal ---------- */
.modal-back {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.56);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 500;
  display: grid;
  place-items: center;
  animation: fade 160ms ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: min(960px, calc(100% - 64px));
  max-height: 86vh;
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--text) 4%, var(--bg-2)) 0%,
      var(--bg-2) 64px),
    var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 24px;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  animation: pop 200ms cubic-bezier(.2,.8,.2,1);
  /* Same inset hairline + neutral very-dark-grey drop as the cards, just
     scaled up to read for a full panel. The white inset edges traces the
     full perimeter so the modal lifts off the dimmed backdrop. */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 0 0 1px rgba(255,255,255,0.03) inset,
    var(--shadow-2xl);
}
@keyframes pop { from { transform: translateY(8px) scale(0.985); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Progression forecast modal ───────────────────────────────────────── */
.forecast-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: color-mix(in oklch, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 24px;
  animation: forecastFadeIn 220ms ease forwards;
}
.forecast-backdrop.is-closing { animation: forecastFadeOut 280ms ease forwards; }
.forecast-card {
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 28px 28px 20px;
  border-radius: 24px;
  border: 1px solid color-mix(in oklch, var(--accent) 30%, var(--border));
  background:
    radial-gradient(110% 80% at 50% 0%, color-mix(in oklch, var(--accent) 14%, transparent), transparent 60%),
    color-mix(in oklch, var(--bg-2) 88%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--shadow-2xl);
  animation: forecastPop 320ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.is-closing .forecast-card { animation: forecastVanish 280ms cubic-bezier(0.4, 0, 0.6, 1) forwards; }
.forecast-card.tone-sunny { border-color: color-mix(in oklch, var(--good) 40%, var(--border)); }
.forecast-card.tone-partly { border-color: color-mix(in oklch, var(--accent) 35%, var(--border)); }
.forecast-card.tone-cloudy { border-color: color-mix(in oklch, var(--text-3) 35%, var(--border)); }
.forecast-card.tone-rainy { border-color: color-mix(in oklch, var(--warn) 40%, var(--border)); }
.forecast-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  background: color-mix(in oklch, var(--surface-2) 60%, transparent);
}
.forecast-close:hover { color: var(--text); background: var(--surface-2); }
.forecast-eyebrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.forecast-eyebrow .sub { color: var(--text-3); font-weight: 500; letter-spacing: 0.04em; text-transform: none; font-size: 11px; }
.forecast-hero {
  display: flex;
  align-items: center;
  gap: 16px;
}
.forecast-glyph { color: var(--text-2); flex-shrink: 0; }
.forecast-glyph path,
.forecast-glyph circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.forecast-glyph-sunny { color: var(--good); }
.forecast-glyph-partly { color: var(--accent); }
.forecast-glyph-cloudy { color: var(--text-3); }
.forecast-glyph-rainy { color: var(--warn); }
.forecast-hero-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.forecast-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
}
.forecast-sub {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.45;
}
.forecast-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.forecast-row {
  width: 100%;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: color-mix(in oklch, var(--surface-2) 35%, transparent);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease, background 140ms ease;
}
.forecast-row:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklch, var(--accent) 30%, var(--border));
  background: var(--surface-2);
}
.forecast-row-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.forecast-row-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.forecast-row-co { font-weight: 500; font-size: 14px; color: var(--text); }
.forecast-row-meta { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.forecast-row-delta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
}
.forecast-row-delta span {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
}
.forecast-row-delta em { font-style: normal; font-size: 10px; color: var(--text-3); margin-top: 2px; }
.forecast-row-delta.tone-good span { color: var(--good); }
.forecast-row-delta.tone-warn span { color: var(--warn); }
.forecast-row-delta.tone-info span { color: var(--accent); }
.forecast-row-delta.tone-muted span { color: var(--text-2); }
.forecast-path {
  position: relative;
  height: 34px;
  margin: 0 38px 4px 2px;
}
.forecast-path::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 13px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--text-3) 14%, transparent);
}
.forecast-path::after {
  content: "";
  position: absolute;
  right: 0;
  top: 8px;
  width: 1px;
  height: 14px;
  background: color-mix(in oklch, var(--text-2) 35%, transparent);
}
.forecast-path-gap {
  position: absolute;
  top: 13px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--warn) 48%, transparent);
}
.forecast-row.tone-good .forecast-path-gap {
  background: color-mix(in oklch, var(--good) 48%, transparent);
}
.forecast-row.tone-info .forecast-path-gap {
  background: color-mix(in oklch, var(--accent) 48%, transparent);
}
.forecast-row.tone-muted .forecast-path-gap {
  background: color-mix(in oklch, var(--text-2) 32%, transparent);
}
.forecast-path-marker {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}
.forecast-path-marker b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1.5px solid currentColor;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}
.forecast-path-marker em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1;
  color: var(--text-3);
}
.forecast-path-marker.buyer { color: var(--warn); }
.forecast-row.tone-good .forecast-path-marker.buyer { color: var(--good); }
.forecast-row.tone-info .forecast-path-marker.buyer { color: var(--accent); }
.forecast-path-marker.seller { color: var(--text); }
.forecast-path-target {
  position: absolute;
  left: calc(100% + 9px);
  top: 9px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.forecast-empty {
  list-style: none;
  padding: 14px 4px;
  font-size: 13px;
  color: var(--text-2);
}
.forecast-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  font-size: 12px;
}
.forecast-foot .muted { color: var(--text-3); }

@media (max-width: 620px) {
  .forecast-row-top {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .forecast-row-delta {
    align-items: flex-start;
  }
  .forecast-path {
    margin-right: 30px;
  }
  .forecast-path-target {
    font-size: 8.5px;
  }
}

/* ── Letter from Addy ────────────────────────────────────────────────
   Narrative-led replacement for the old analytics shell. Reads like a
   weekly note rather than a dashboard. The disclosure at the bottom
   reuses .analytics-detail* / .analytics-lens(es) for the "examples"
   drilldown, so those classes are intentionally preserved below. */
.letter-screen {
  padding-bottom: 96px;
  --letter-measure: 68ch;
  --letter-rule: var(--hairline);
}

/* Addy briefing — structured replacement for the prose letter. Same
   palette as the AE cockpit so it reads as part of the platform. */
.briefing-screen {
  padding: 22px 28px 96px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.briefing-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 760px;
  padding-top: 6px;
}
.briefing-title {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.018em;
  color: var(--text);
}
.briefing-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
  max-width: 60ch;
}

/* KPI strip — 4 quiet tiles, mono numerals, no charts. */
.briefing-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.briefing-kpi {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  background: color-mix(in oklch, var(--text) 3%, transparent);
  border: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
  border-radius: 10px;
}
.briefing-kpi-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.briefing-kpi-value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.briefing-kpi-value em {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  margin-left: 2px;
}

/* Sections — eyebrow + content, no wrapping cards. */
.briefing-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.briefing-prose {
  margin: 0;
  max-width: 60ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}
.briefing-prose b { color: var(--text); font-weight: 600; }

/* Signals — hairline-separated rows with a tone-colored stripe on the left. */
.briefing-signals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.briefing-signal {
  position: relative;
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0 14px 14px;
  border-bottom: 1px solid var(--hairline);
}
.briefing-signal:last-child { border-bottom: 0; }
.briefing-signal-tone {
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 999px;
  background: var(--text-3);
}
.briefing-signal-tone.tone-warn { background: var(--warn); }
.briefing-signal-tone.tone-amber { background: var(--accent); }
.briefing-signal-tone.tone-good { background: var(--good); }
.briefing-signal-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  grid-column: 2;
}
.briefing-signal-main b {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.briefing-signal-main span {
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.45;
}
.briefing-signal-deals {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.briefing-signal-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  color: var(--text-2);
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}
.briefing-signal-action:hover {
  color: var(--text);
  background: color-mix(in oklch, var(--text) 6%, transparent);
  border-color: var(--text-3);
}

/* Moves — numbered list with title + copy + impact + action. */
.briefing-moves {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.briefing-move {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}
.briefing-move:last-child { border-bottom: 0; }
.briefing-move-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-3);
}
.briefing-move-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.briefing-move-body b {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}
.briefing-move-body span {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-2);
}
.briefing-move-impact {
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  white-space: nowrap;
}
.briefing-move-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--text);
  border: 1px solid var(--text);
  border-radius: 999px;
  color: var(--bg);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 140ms ease, transform 140ms ease;
}
.briefing-move-action:hover { opacity: 0.86; transform: translateX(1px); }

/* Examples drawer — reuses the analytics-* row styles. */
.briefing-examples {
  margin-top: 10px;
  border-top: 1px solid var(--hairline);
  padding-top: 16px;
}
.briefing-examples > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  list-style: none;
  transition: color 140ms ease;
}
.briefing-examples > summary::-webkit-details-marker { display: none; }
.briefing-examples > summary::before {
  content: "›";
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 14px;
  transition: transform 160ms ease;
}
.briefing-examples[open] > summary::before { transform: rotate(90deg); }
.briefing-examples > summary:hover { color: var(--text); }
.briefing-examples > .analytics-lenses { margin-top: 14px; }

@media (max-width: 760px) {
  .briefing-move {
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 8px;
  }
  .briefing-move-impact, .briefing-move-action { grid-column: 2; }
  .briefing-signal {
    grid-template-columns: 6px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .briefing-signal-action { grid-column: 2; justify-self: start; }
}
.letter {
  max-width: var(--letter-measure);
  margin: 24px auto 0;
  padding: 0 4px;
  font-family: var(--font-sans);
  color: var(--text);
}
.letter-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--letter-rule);
  margin-bottom: 28px;
}
.letter-mark {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--addy-bubble, var(--accent-soft));
  position: relative;
  flex: 0 0 28px;
  overflow: hidden;
  isolation: isolate;
}
/* Soft outer halo that breathes — communicates "agent active" without
   needing copy. Pulses on the bubble itself, not the dots. */
.letter-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, var(--accent-soft), transparent 70%);
  animation: letterMarkHalo 3.2s ease-in-out infinite;
}
.letter-mark > span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  top: 50%;
  margin-top: -3.5px;
  z-index: 1;
}
/* Two dots orbit toward and away from each other along the horizontal
   axis — reads as "thinking" / agent state, similar to a typing
   indicator but slower and quieter so it sits comfortably in a letter
   header. Staggered phases keep them out of sync. */
.letter-mark > span:first-child {
  left: 5px;
  animation: letterMarkDotA 2.4s ease-in-out infinite;
}
.letter-mark > span:last-child {
  left: 16px;
  background: var(--accent-strong);
  animation: letterMarkDotB 2.4s ease-in-out infinite;
}
@keyframes letterMarkHalo {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.08); }
}
@keyframes letterMarkDotA {
  0%, 100% { transform: translateX(0)   scale(1);    opacity: 0.8; }
  50%      { transform: translateX(3px) scale(1.15); opacity: 1; }
}
@keyframes letterMarkDotB {
  0%, 100% { transform: translateX(0)    scale(1);    opacity: 0.85; }
  50%      { transform: translateX(-3px) scale(1.15); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .letter-mark::before,
  .letter-mark > span { animation: none; }
}
/* Sign-off mark is smaller — scale the same primitives down. */
.letter-sign .letter-mark {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.letter-sign .letter-mark > span { width: 5px; height: 5px; margin-top: -2.5px; }
.letter-sign .letter-mark > span:first-child { left: 4px; }
.letter-sign .letter-mark > span:last-child  { left: 11px; }
.letter-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.letter-meta b {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.letter-meta em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
.letter-greeting {
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 14px;
  letter-spacing: 0.005em;
}
.letter-body {
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 18px;
  color: var(--text-2);
}
.letter-body b {
  color: var(--text);
  font-weight: 600;
}
.letter-section {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--text-3);
  margin: 32px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--letter-rule);
}
.letter-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  margin: 0 1px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--accent);
  border-radius: 0;
  font: inherit;
  font-size: inherit;
  color: var(--accent-strong);
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
  transition: background 120ms ease, color 120ms ease;
}
.letter-action:hover {
  background: var(--accent-soft);
  color: var(--text);
}
.letter-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.letter-todo {
  list-style: none;
  counter-reset: letter-todo;
  margin: 0;
  padding: 0;
}
.letter-todo li {
  counter-increment: letter-todo;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--letter-rule);
}
.letter-todo li:last-child {
  border-bottom: 0;
}
.letter-todo li::before {
  content: counter(letter-todo, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  padding-top: 4px;
}
.letter-todo-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
}
.letter-todo-text b {
  color: var(--text);
  font-weight: 600;
}
.letter-todo-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.letter-todo-meta em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
.letter-sign {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--letter-rule);
  font-size: 13px;
  color: var(--text-2);
  font-style: italic;
}
.letter-examples {
  margin-top: 40px;
  border-top: 1px solid var(--letter-rule);
  padding-top: 16px;
}
.letter-examples > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 8px 0;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.letter-examples > summary::-webkit-details-marker {
  display: none;
}
.letter-examples > summary::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-3);
  line-height: 1;
}
.letter-examples[open] > summary::before {
  content: "−";
}
.letter-examples[open] > summary {
  color: var(--text-2);
  margin-bottom: 12px;
}

/* ── Analytics / reporting / interpretation ─────────────────────────── */
.analytics-screen {
  padding-bottom: 96px;
}
.analytics-shell {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.analytics-global {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 34px;
  align-items: end;
  padding: 8px 0 26px;
  border-bottom: 1px solid var(--border);
}
.analytics-global-copy {
  min-width: 0;
}
.analytics-global h1 {
  max-width: 800px;
  margin: 8px 0 0;
  color: var(--text);
  font-size: 48px;
  line-height: 1;
  font-weight: 680;
  letter-spacing: 0;
}
.analytics-global p {
  max-width: 760px;
  margin: 14px 0 0;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}
.analytics-global-stats {
  display: grid;
  gap: 0;
}
.analytics-global-stats div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.analytics-global-stats div:last-child {
  border-bottom: 0;
}
.analytics-global-stats span {
  color: var(--text-2);
  font-size: 12.5px;
}
.analytics-global-stats b {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.analytics-patterns,
.analytics-learning-loop {
  padding: 4px 0 0;
}
.analytics-pattern-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.analytics-pattern {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 0 18px 0 0;
  border-right: 1px solid var(--border);
}
.analytics-pattern:last-child {
  border-right: 0;
  padding-right: 0;
}
.analytics-pattern-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.analytics-pattern-top b {
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.analytics-pattern h2 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.22;
  font-weight: 650;
  letter-spacing: 0;
}
.analytics-pattern p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
  text-wrap: pretty;
}
.analytics-rule {
  display: grid;
  gap: 3px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.analytics-rule span {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.analytics-rule b {
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 650;
}
.analytics-loop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.analytics-loop-grid > div {
  display: grid;
  align-content: start;
  gap: 9px;
  padding-top: 2px;
}
.analytics-loop-grid h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: 0;
}
.analytics-loop-grid p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
  text-wrap: pretty;
}
.analytics-detail-toggle {
  display: flex;
  justify-content: flex-start;
  padding-top: 2px;
}
.analytics-focus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 28px;
  align-items: end;
  padding: 8px 0 24px;
  border-bottom: 1px solid var(--border);
}
.analytics-focus-copy {
  min-width: 0;
}
.analytics-focus h1 {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--text);
  font-size: 52px;
  line-height: 0.98;
  font-weight: 680;
  letter-spacing: 0;
}
.analytics-focus-copy p {
  max-width: 680px;
  margin: 14px 0 0;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}
.analytics-focus-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.analytics-focus-stats {
  display: grid;
  gap: 8px;
}
.analytics-focus-stats div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.analytics-focus-stats div:last-child {
  border-bottom: 0;
}
.analytics-focus-stats span {
  color: var(--text-2);
  font-size: 12.5px;
}
.analytics-focus-stats b {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.analytics-today {
  padding: 4px 0 0;
}
.analytics-focus-list,
.analytics-detail-list {
  display: grid;
  gap: 2px;
}
.analytics-focus-row,
.analytics-detail-row {
  display: grid;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 10px;
  border: 1px solid transparent;
  border-bottom-color: var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.analytics-focus-row {
  grid-template-columns: 34px minmax(150px, 1fr) 76px minmax(220px, 1.2fr) auto;
}
.analytics-focus-row:hover,
.analytics-detail-row:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.analytics-focus-rank {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11px;
}
.analytics-focus-main,
.analytics-focus-gap,
.analytics-detail-row span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.analytics-focus-main b,
.analytics-detail-row b {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analytics-focus-main em,
.analytics-focus-gap em,
.analytics-detail-row em {
  overflow: hidden;
  color: var(--text-3);
  font-style: normal;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analytics-focus-gap b {
  color: var(--warn);
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.analytics-focus-next {
  min-width: 0;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analytics-detail {
  display: grid;
  gap: 14px;
  padding: 18px 0 0;
  border-top: 1px solid var(--border);
}
.analytics-lenses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.analytics-lens {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.analytics-lens:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.analytics-lens.is-active {
  border-color: color-mix(in oklab, var(--accent) 48%, var(--border));
  background: var(--accent-soft);
  color: var(--text);
}
.analytics-lens span {
  font-size: 12px;
}
.analytics-lens b {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}
.analytics-detail-row {
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1fr) auto;
}
.analytics-detail-row > span:nth-child(2) {
  min-width: 0;
  color: var(--text-2);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analytics-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  padding-bottom: 4px;
}
.analytics-hero p {
  max-width: 680px;
  margin: 8px 0 0;
  line-height: 1.55;
}
.analytics-readout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 30px;
  padding: 22px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.analytics-readout-copy p {
  max-width: 820px;
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
  text-wrap: pretty;
}
.analytics-statline {
  display: grid;
  align-content: start;
  gap: 6px;
}
.analytics-stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 16px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.analytics-stat:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.analytics-stat:active {
  transform: translateY(1px);
}
.analytics-stat.is-active {
  border-color: color-mix(in oklab, var(--accent) 54%, var(--border));
  background: var(--accent-soft);
}
.analytics-stat span {
  font-size: 12.5px;
}
.analytics-stat b {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.analytics-stat em {
  grid-column: 1 / -1;
  color: var(--text-3);
  font-style: normal;
  font-size: 11px;
}
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
}
.analytics-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.analytics-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.analytics-story {
  display: grid;
  align-content: start;
  padding-top: 2px;
}
.analytics-narrative {
  display: grid;
  gap: 10px;
}
.analytics-narrative p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
  text-wrap: pretty;
}
.analytics-narrative p:first-child {
  color: var(--text);
}
.analytics-cockpit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: stretch;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.analytics-cockpit-main,
.analytics-inspector {
  min-width: 0;
}
.analytics-deal-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.analytics-deal-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.analytics-deal-chip:hover {
  border-color: var(--border-strong);
  background: var(--surface-3);
}
.analytics-deal-chip:active {
  transform: translateY(1px);
}
.analytics-deal-chip.is-active {
  border-color: color-mix(in oklab, var(--accent) 54%, var(--border));
  background: var(--accent-soft);
}
.analytics-deal-chip span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.analytics-deal-chip b {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analytics-deal-chip em {
  overflow: hidden;
  color: var(--text-3);
  font-style: normal;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analytics-deal-chip strong {
  flex: 0 0 auto;
  color: var(--warn);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.analytics-inspector {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 14px;
  border-left: 1px solid var(--border);
}
.analytics-scoreboard {
  display: grid;
  gap: 10px;
}
.analytics-scoreboard div {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  min-height: 42px;
  padding-bottom: 14px;
}
.analytics-scoreboard span {
  color: var(--text-2);
  font-size: 12px;
}
.analytics-scoreboard b {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.analytics-scoreboard i {
  position: absolute;
  left: 0;
  right: auto;
  bottom: 0;
  height: 8px;
  min-width: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 28%, transparent);
  transition: width 220ms ease;
}
.analytics-scoreboard div:first-child i {
  background: var(--good);
}
.analytics-selected-read {
  padding-top: 2px;
}
.analytics-selected-read b {
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
}
.analytics-selected-read p {
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.5;
}
.analytics-inspector-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.analytics-alignment {
  padding: 22px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ── Trend strip — direction over time, 4 KPIs ───────────────────── */
.analytics-trends {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 0 22px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.analytics-trend-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.analytics-trend {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 2px 6px;
  color: var(--text-2);
}
.analytics-trend-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.analytics-trend-h em {
  font-style: normal;
  letter-spacing: 0.08em;
}
.analytics-trend.tone-good .analytics-trend-h em { color: var(--good); }
.analytics-trend.tone-warn .analytics-trend-h em { color: var(--warn); }
.analytics-trend.tone-flat .analytics-trend-h em { color: var(--text-3); }
.analytics-trend > b {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.analytics-trend-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.analytics-trend.tone-good { color: var(--good); }
.analytics-trend.tone-warn { color: var(--warn); }
.analytics-trend.tone-flat { color: var(--text-2); }
.analytics-trend .spark { margin-top: 4px; }

/* ── Stage breakdown — bar per funnel stage ──────────────────────── */
.analytics-stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 0;
}
.analytics-stage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.analytics-stage-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.analytics-stage-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.analytics-stage-h span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.analytics-stage-h em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.analytics-stage-track {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--text) 8%, transparent);
  overflow: hidden;
}
.analytics-stage-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--text-2);
  transition: width 220ms ease;
}
.analytics-stage-bar.tone-warn .analytics-stage-fill { background: var(--warn); }
.analytics-stage-bar.tone-amber .analytics-stage-fill { background: var(--accent); }
.analytics-stage-bar.tone-good .analytics-stage-fill { background: var(--good); }
.analytics-stage-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.analytics-stage-foot b {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}

/* ── Decision levers — quantified actions with projected impact ──── */
.analytics-levers {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 0;
  border-top: 1px solid var(--border);
}
.analytics-lever-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.analytics-lever {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 22px;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: background 160ms ease;
}
.analytics-lever::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 10px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--text) 6%, transparent) 0%,
    transparent 100%
  );
  opacity: 0.7;
}
.analytics-lever:hover { background: color-mix(in oklch, var(--text) 4%, transparent); }
.analytics-lever-impact {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.analytics-lever-title {
  font-size: 16px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-top: 2px;
}
.analytics-lever-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.analytics-lever p {
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.5;
  text-wrap: pretty;
}
.analytics-lever-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}
.analytics-lever-targets {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.analytics-lever-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .analytics-trend-grid,
  .analytics-stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-lever-grid { grid-template-columns: 1fr; }
}
.analytics-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.analytics-steps div {
  min-width: 0;
  padding-left: 14px;
  border-left: 2px solid var(--border);
}
.analytics-steps span {
  display: block;
  margin-bottom: 9px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}
.analytics-steps b {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
}
.analytics-steps p {
  margin: 7px 0 0;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.5;
  text-wrap: pretty;
}
.analytics-evidence {
  padding-top: 2px;
}
.analytics-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.analytics-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px minmax(220px, 0.9fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 10px;
  border: 1px solid transparent;
  border-bottom-color: var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.analytics-row:last-child {
  border-bottom-color: transparent;
}
.analytics-row:hover .analytics-row-main b {
  color: var(--accent);
}
.analytics-row.is-active {
  border-color: color-mix(in oklab, var(--accent) 44%, var(--border));
  background: var(--accent-soft);
}
.analytics-row-main,
.analytics-row-gap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.analytics-row-main b {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.analytics-row-main em,
.analytics-row-gap em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--text-3);
}
.analytics-row-gap b {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--warn);
  font-variant-numeric: tabular-nums;
}
.analytics-row-read {
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.35;
  min-width: 0;
}
.analytics-empty {
  padding: 14px 0;
  color: var(--text-2);
  font-size: 13px;
}

@media (max-width: 980px) {
  .analytics-global {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 18px;
  }
  .analytics-global h1 {
    font-size: 38px;
    line-height: 1.05;
  }
  .analytics-global-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .analytics-global-stats div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .analytics-pattern-grid {
    grid-template-columns: 1fr;
  }
  .analytics-pattern {
    padding: 0 0 16px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .analytics-pattern:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .analytics-loop-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .analytics-focus {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 18px;
  }
  .analytics-focus h1 {
    font-size: 38px;
    line-height: 1.04;
  }
  .analytics-focus-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .analytics-focus-stats div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .analytics-focus-row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }
  .analytics-focus-next {
    grid-column: 2 / -1;
    white-space: normal;
  }
  .analytics-detail-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .analytics-detail-row > span:nth-child(2) {
    grid-column: 1 / -1;
    white-space: normal;
  }
  .analytics-hero {
    align-items: flex-start;
    flex-direction: column;
  }
  .analytics-readout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .analytics-readout-copy p {
    font-size: 19px;
  }
  .analytics-grid {
    grid-template-columns: 1fr;
  }
  .analytics-cockpit {
    grid-template-columns: 1fr;
  }
  .analytics-inspector {
    border-top: 1px solid var(--border);
    border-left: 0;
    padding: 16px 0 0;
  }
  .analytics-steps {
    grid-template-columns: 1fr;
  }
  .analytics-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .analytics-row-read {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .analytics-global h1 {
    font-size: 32px;
  }
  .analytics-global p {
    font-size: 14px;
  }
  .analytics-global-stats {
    grid-template-columns: 1fr;
  }
  .analytics-focus h1 {
    font-size: 32px;
  }
  .analytics-focus-copy p {
    font-size: 14px;
  }
  .analytics-focus-stats {
    grid-template-columns: 1fr;
  }
  .analytics-readout-copy p {
    font-size: 17px;
  }
  .analytics-stat {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .analytics-deal-list {
    grid-template-columns: 1fr;
  }
}

@keyframes forecastFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes forecastFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes forecastPop {
  from { opacity: 0; transform: translateY(12px) scale(0.94); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes forecastVanish {
  from { opacity: 1; transform: none; filter: blur(0); }
  to   { opacity: 0; transform: translateY(-6px) scale(0.92); filter: blur(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .forecast-backdrop, .forecast-backdrop.is-closing,
  .forecast-card, .is-closing .forecast-card {
    animation-duration: 1ms;
  }
}

.modal-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 22px 12px;
}
.modal-body {
  overflow-y: auto;
  padding: 18px 28px 32px;
}
.modal-meta { font-size: 11.5px; }

.tabs {
  display: flex;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}
.tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 7px;
  color: var(--text-2);
}
.tabs button.active {
  background: var(--bg);
  color: var(--text);
}
.view-tabs button {
  min-width: 82px;
}

/* ---------- alignment vis ---------- */
.scorecard {
  border-radius: 18px;
  padding: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scorecard .num {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.scorecard .num.warn { color: var(--warn); }
.scorecard .num.good { color: var(--good); }
.scorecard .num.accent { color: var(--accent); }

/* table */
/* Deal table — horizontally scrollable when the workspace narrows,
   so columns never clip. Inner table keeps a sensible min-width so
   columns don't crush against each other before scrolling kicks in. */
.deal-table-wrap {
  margin-top: 4px;
  overflow-x: auto;
}
.deal-table-wrap .tbl {
  min-width: 900px;
}
.app.sidebar-expanded .tbl-category-col { width: 160px; }
.app.sidebar-expanded .tbl-progress { width: 220px; }
/* border-collapse: separate lets sticky <th>s render their bottom border
   reliably and lets individual cells carry their own inset-shadow dividers
   (slightly more dimensional than flat borders) without collapsed-border
   quirks. */
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.tbl td { text-align: left; font-weight: 500; padding: 12px 14px; }
.tbl th { text-align: left; }

/* Sticky header — pins directly under the workspace header so rows
   scroll behind it without showing through. Solid surface (not the
   semi-transparent var(--bg-3)) plus a stronger bottom rule so it reads
   as a continuation of the page header when scrolled. */
.tbl thead th {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--surface);
  color: var(--text-2);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 11px 14px;
  border-bottom: 0;
  box-shadow:
    inset 0 -1px 0 0 var(--hairline-strong),
    0 6px 12px -8px color-mix(in oklch, var(--text) 14%, transparent);
}
.tbl thead th:first-child { border-top-left-radius: 10px; }
.tbl thead th:last-child  { border-top-right-radius: 10px; }
.tbl thead th:not(:last-child) {
  box-shadow:
    inset -1px 0 0 0 var(--hairline-strong),
    inset -2px 0 3px -1px color-mix(in oklch, var(--text) 5%, transparent),
    inset 0 -1px 0 0 var(--hairline-strong),
    inset 0 -3px 4px -2px color-mix(in oklch, var(--text) 6%, transparent);
}

/* Body cells — inset shadow on the right + bottom gives subtly dimensional
   dividers. Right shadow is suppressed on the last column, bottom on the
   last row (handled with the more-specific rules below). */
.tbl tr.row { cursor: pointer; }
.tbl tr.row td {
  background: transparent;
  transition: background 120ms ease;
  box-shadow:
    inset -1px 0 0 0 var(--hairline),
    inset -2px 0 3px -1px color-mix(in oklch, var(--text) 4%, transparent),
    inset 0 -1px 0 0 var(--hairline),
    inset 0 -2px 3px -1px color-mix(in oklch, var(--text) 4%, transparent);
}
/* Last-column cells: keep bottom shadow only. */
.tbl tr.row td:last-child {
  box-shadow:
    inset 0 -1px 0 0 var(--hairline),
    inset 0 -2px 3px -1px color-mix(in oklch, var(--text) 4%, transparent);
}
/* Last-row cells: keep right shadow only. */
.tbl tr.row:last-child td {
  box-shadow:
    inset -1px 0 0 0 var(--hairline),
    inset -2px 0 3px -1px color-mix(in oklch, var(--text) 4%, transparent);
}
/* Bottom-right corner cell: neither. */
.tbl tr.row:last-child td:last-child {
  box-shadow: none;
}
.tbl tr.row:hover td {
  background: color-mix(in oklch, var(--text) 4%, transparent);
}
.tbl td .cell-strong { font-weight: 500; }
.tbl-num { text-align: right !important; }
.tbl-category-col { width: 190px; }
.tbl-progress { width: 260px; }
.tbl-status-col { width: 64px; }
.tbl-action-col { width: 32px; }
.table-small { font-size: 12px; }
.table-champion { font-size: 11px; }
.tbl .meta-chip {
  min-height: 24px;
  font-size: 11.5px;
}
.tbl-num .meta-chip {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.tbl-status-cell {
  text-align: center !important;
}
.table-status-meter {
  height: 14px;
  vertical-align: middle;
}
.table-status-meter > span {
  width: 3.5px;
}
.row-open-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  border: 1px solid transparent;
}
.row-open-btn:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
}

/* sticky scroll behavior */
.sticky-head {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 5;
  padding-bottom: 12px;
}

/* skeleton stripes for image placeholders */
.placeholder-stripe {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--surface-2) 0 8px,
    var(--surface-3) 8px 16px
  );
  border: 1px dashed var(--border);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* nudge feed */
.nudge-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  transition: transform 150ms ease, border-color 120ms ease;
}
.nudge-row:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.nudge-row .marker {
  width: 4px;
  height: 36px;
  border-radius: 999px;
  background: var(--text-3);
}
.nudge-row.warn .marker { background: var(--warn); }
.nudge-row.good .marker { background: var(--good); }
.nudge-row.info .marker { background: var(--accent); }

/* status dots */
.dot-status { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.dot-status.warn { background: var(--warn); }
.dot-status.good { background: var(--good); }
.dot-status.info { background: var(--accent); }

/* gridlines for the alignment dual-line chart */
.alignment-vis {
  position: relative;
  height: 240px;
  padding: 12px 8px 24px 8px;
  border-radius: 18px;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, var(--border) 39px 40px);
  border: 1px solid var(--border);
}

/* tweaks panel positioning override (the starter floats to bottom-right which we want) */

/* responsive guard */
@media (max-width: 1100px) {
  .scroll { padding: 20px; }
}

/* ============================================================
   UX cleanup: rhythm via type + whitespace, not nested boxes
   ============================================================ */

/* Section rhythm — hairline rules between blocks of content */
.section { padding: 28px 0; border-top: 1px solid var(--border); }
.section:first-of-type { border-top: 0; padding-top: 0; }
.section-h {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 14px;
  display: flex; align-items: baseline; gap: 10px;
}
.section-h .count {
  color: var(--text-2);
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-mono);
  font-size: 12px;
}
.section-h .spacer { flex: 1; }

/* HERO — the single most important thing on the screen */
.hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 0 4px;
  max-width: 920px;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--accent);
  align-self: flex-start;
}
.hero-eyebrow .glyph {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  animation: heroPulse 2s ease-in-out infinite;
}
@keyframes heroPulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 16%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in oklch, var(--accent) 26%, transparent); }
}
.hero-title {
  font-size: 30px; font-weight: 700;
  letter-spacing: -0.022em; line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
.hero-sub {
  margin: -4px 0 0;
  color: var(--text-2);
  font-size: 14px;
}
.hero-stat-row {
  display: inline-flex; align-items: baseline; gap: 22px;
  margin: 4px 0 0;
}
.hero-stat { display: inline-flex; align-items: baseline; gap: 6px; }
.hero-stat b {
  font-size: 26px; font-weight: 600; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hero-stat.warn b { color: var(--warn); }
.hero-stat.good b { color: var(--good); }
.hero-stat span { color: var(--text-3); font-size: 12px; }
.hero-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }

/* Carousel pips — a thin row to switch the hero deal */
.pip-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 0 18px; }
.pip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-2); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all 120ms ease;
}
.pip:hover { background: var(--surface-2); color: var(--text); }
.pip.is-on {
  background: var(--text); color: var(--bg);
  border-color: var(--text);
}
.pip .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--text-3);
}
.pip[data-status="at-risk"] .dot { background: var(--risk); }
.pip[data-status="needs-attention"] .dot { background: var(--accent); }
.pip[data-status="healthy"] .dot { background: var(--good); }
.pip.is-on .dot { box-shadow: 0 0 0 2px color-mix(in oklch, var(--bg) 80%, transparent); }

/* Deal-flow rows — compact action lists */
.flow-row {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 14px; align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: padding-left 120ms ease;
}
.flow-row:last-child { border-bottom: 0; }
.flow-row:hover { padding-left: 4px; }
.flow-row .marker {
  width: 4px; align-self: stretch;
  background: var(--text-3);
  border-radius: 999px;
  min-height: 28px;
}
.flow-row.warn .marker { background: var(--warn); }
.flow-row.good .marker { background: var(--good); }
.flow-row.info .marker { background: var(--accent); }
.flow-row .body { min-width: 0; }
.flow-row .body .t { font-weight: 500; font-size: 14px; }
.flow-row .body .s { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }

/* ============================================================
   PIPELINE — premium stage stepper. Each stage header is a clean
   typographic block topped with a numbered node on a connector rail.
   The rail visually threads the stages together as one continuous
   process, replacing the busier chevron-arrow approach.
   ============================================================ */

/* Pipeline weather card — replaces the old PipelineStatus block. A single
   weather glyph + one sentence carries the state. The metric in the
   sentence adapts to the weather (so the user gets the most relevant
   number for now, not a fixed stat grid). */
.pipeline-weather {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 22px 24px;
  background: transparent;
  border: 0;
  border-radius: 0;
  transition: background 160ms ease;
}
.pipeline-weather::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 10px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--text) 6%, transparent) 0%,
    transparent 100%
  );
  opacity: 0.7;
}
.pipeline-weather:hover {
  background: color-mix(in oklch, var(--text) 4%, transparent);
}

.pipeline-weather-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.pipeline-weather-body {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}
.pipeline-weather-glyph {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: color-mix(in oklch, var(--text) 4%, transparent);
  /* The icon's own ::svg color picks up via the existing forecast-glyph-*
     classes (sunny=good, partly=accent, cloudy=text-3, rainy=warn). */
}
.pipeline-weather-glyph .forecast-glyph {
  width: 56px;
  height: auto;
}
/* Gentle drift on the sunny glyph — sun "shines" a little */
.pipeline-weather.weather-sunny  .pipeline-weather-glyph .forecast-glyph { animation: weather-sun 6s ease-in-out infinite; }
.pipeline-weather.weather-rainy  .pipeline-weather-glyph .forecast-glyph { animation: weather-rain 1.6s ease-in-out infinite; }
@keyframes weather-sun  { 0%,100%{ transform: rotate(0deg); } 50%{ transform: rotate(8deg); } }
@keyframes weather-rain { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(1.5px); } }
@media (prefers-reduced-motion: reduce) {
  .pipeline-weather-glyph .forecast-glyph { animation: none; }
}

.pipeline-weather-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pipeline-weather-headline {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -0.012em;
  color: var(--text);
}
.pipeline-weather.tone-warn  .pipeline-weather-headline { color: var(--warn); }
.pipeline-weather.tone-amber .pipeline-weather-headline { color: var(--accent); }
.pipeline-weather-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.pipeline-weather-sub b {
  color: var(--text);
  font-weight: 600;
}

.pipeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  position: relative;
  /* Horizontally scroll the kanban whenever the workspace gets narrow
     (sidebar expanded, smaller viewport) so the 5 stage columns keep
     their proportions instead of clipping off the right edge. */
  overflow-x: auto;
}
.pipeline-stage-header,
.pipeline-stage-columns {
  display: grid;
  grid-template-columns: repeat(5, minmax(170px, 1fr));
  gap: 12px;
  min-width: 900px;
}
/* When the main app sidebar is expanded the workspace loses ~156px.
   Tighten the kanban column minimum so on common laptop widths the
   board still fits without scrolling, and only scrolls below that. */
.app.sidebar-expanded .pipeline-stage-header,
.app.sidebar-expanded .pipeline-stage-columns {
  grid-template-columns: repeat(5, minmax(152px, 1fr));
  min-width: 820px;
}
.pipeline-stage-header {
  position: sticky;
  /* Pin flush against the workspace header (no 6px gap that lets deal
     cards show through behind). Solid surface + no backdrop blur so
     cards scrolling past genuinely disappear under it. */
  top: 0;
  z-index: 15;
  padding: 12px 14px 14px;
  margin: 0 0 4px;
  background: var(--surface);
  border: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
  /* Square the top corners so the header reads as attached to the page
     header above; the bottom corners stay rounded for visual softness. */
  border-radius: 0 0 9px 9px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 6px 12px -8px color-mix(in oklch, var(--text) 14%, transparent);
}

[data-theme="light"] .pipeline-stage-header {
  box-shadow:
    0 1px 2px rgba(15, 15, 20, 0.04),
    0 4px 12px rgba(15, 15, 20, 0.05);
}
.pipeline-stage {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
  position: relative;
}
.pipeline-head {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0 2px;
  background: transparent;
  border: 0;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: color 140ms ease;
}
.pipeline-head:focus-visible {
  outline: 1px solid var(--border-strong);
  outline-offset: 4px;
  border-radius: 6px;
}

/* The rail: a thin horizontal line threading the numbered nodes across
   all stages. Sits BETWEEN the stage name (above) and meta (below). */
.pipeline-head-rail {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  height: 26px;
  margin: 6px 0 8px;
}
.pipeline-head-rail-line {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    var(--hairline) 0%,
    var(--border-strong) 50%,
    var(--hairline) 100%
  );
}
.pipeline-stage-header .pipeline-stage:first-child .pipeline-head-rail-line {
  left: 50%;
  background: linear-gradient(90deg, var(--border-strong) 0%, var(--hairline) 100%);
}
.pipeline-stage-header .pipeline-stage:last-child .pipeline-head-rail-line {
  right: 50%;
  background: linear-gradient(90deg, var(--hairline) 0%, var(--border-strong) 100%);
}
.pipeline-head-rail-node {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-2);
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.pipeline-head-rail-num { line-height: 1; }
.pipeline-stage-header .pipeline-stage:last-child .pipeline-head-rail-node {
  color: var(--good);
  border-color: color-mix(in oklch, var(--good) 45%, var(--border-strong));
  background: color-mix(in oklch, var(--good) 10%, var(--bg));
}
.pipeline-head:hover .pipeline-head-rail-node {
  border-color: var(--text);
  color: var(--text);
}

/* Stage name — sits ABOVE the rail */
.pipeline-head-name {
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-2);
  text-align: center;
  width: 100%;
}
/* Meta — sits BELOW the rail */
.pipeline-head-meta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  width: 100%;
}
.pipeline-head-count { letter-spacing: 0; }
.pipeline-head-dot { opacity: 0.5; }
.pipeline-head-value {
  color: var(--text-2);
  font-weight: 500;
}

/* Selected stage — node fills, label tightens */
.pipeline-stage.is-selected .pipeline-head-rail-node {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  transform: scale(1.04);
}
.pipeline-stage.is-selected .pipeline-head-name { color: var(--text); }
.pipeline-stage.is-selected .pipeline-head-value { color: var(--text); }

/* Dim non-selected stages slightly when ANY stage is filtered, so the
   active selection reads at-a-glance without losing the rail */
.pipeline:has(.pipeline-stage-head-cell.is-selected) .pipeline-stage-head-cell:not(.is-selected) .pipeline-head-name,
.pipeline:has(.pipeline-stage-head-cell.is-selected) .pipeline-stage-head-cell:not(.is-selected) .pipeline-head-meta {
  opacity: 0.5;
}

/* Deals under each stage — single-rail timeline. Stage column has one
   continuous vertical rail; each deal is a row anchored to it with a
   marker dot. Status communicated via marker color (no card box). */
.pipeline-deals {
  display: flex; flex-direction: column;
  gap: 0;
  padding: 6px 2px;
  position: relative;
  /* No internal scroll — cards keep their full width. Stages with many
     deals collapse to the top 5; a "Show N more" button below expands the
     column inline so the rest of the columns stay aligned. */
}
.pipeline-deals::before { content: none; }

/* Per-column "Show N more / Show top 5" toggle. Sits below the last visible
   card in a stage. Quiet by default, lifts on hover. Surfaces only when a
   stage exceeds the collapsed limit. */
.pipeline-deals-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin: 10px 0 4px;
  padding: 9px 12px;
  background: transparent;
  border: 1px dashed var(--hairline-strong);
  border-radius: 9px;
  color: var(--text-2);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}
.pipeline-deals-toggle b {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  padding: 0 2px;
}
.pipeline-deals-toggle:hover {
  color: var(--text);
  background: color-mix(in oklch, var(--text) 5%, transparent);
  border-color: var(--text-3);
  border-style: solid;
}
.pipeline-deals-toggle .icon { transition: transform 160ms ease; flex: none; }
.pipeline-deals-toggle .icon.is-flipped { transform: rotate(180deg); }
.pipeline-deals-toggle:hover .icon { transform: translateY(1px); }
.pipeline-deals-toggle:hover .icon.is-flipped { transform: rotate(180deg) translateY(1px); }
.pipeline-card {
  position: relative;
  display: flex; flex-direction: column; gap: 9px;
  min-height: 0;
  padding: 14px 14px 16px;
  margin: 6px 0;
  background: color-mix(in oklch, var(--text) 5%, transparent);
  border: 1px solid color-mix(in oklch, var(--border) 80%, transparent);
  border-radius: 9px;
  text-align: left;
  cursor: pointer;
  overflow: visible;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 2px 4px rgba(0, 0, 0, 0.22),
    0 10px 22px rgba(0, 0, 0, 0.32),
    0 22px 48px rgba(0, 0, 0, 0.32);
  transition: background 160ms ease, border-color 160ms ease,
              transform 160ms ease, box-shadow 160ms ease;
}
.pipeline-card::after { content: none; }
.pipeline-card + .pipeline-card { border-top: 0; }
.pipeline-card:hover {
  background: color-mix(in oklch, var(--text) 8%, transparent);
  border-color: var(--hairline-strong);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 3px 6px rgba(0, 0, 0, 0.26),
    0 16px 32px rgba(0, 0, 0, 0.38),
    0 30px 60px rgba(0, 0, 0, 0.36);
}

[data-theme="light"] .pipeline-card {
  box-shadow:
    0 1px 2px rgba(15, 15, 20, 0.06),
    0 6px 16px rgba(15, 15, 20, 0.09),
    0 14px 32px rgba(15, 15, 20, 0.08);
}
[data-theme="light"] .pipeline-card:hover {
  box-shadow:
    0 2px 4px rgba(15, 15, 20, 0.08),
    0 10px 22px rgba(15, 15, 20, 0.12),
    0 22px 44px rgba(15, 15, 20, 0.11);
}
.pipeline-card::before { content: none; }
/* Marker dots stay neutral — risk is conveyed by the bar meter on the right.
   The dots are just rail rhythm, not status. */
.pipeline-card-meta {
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
/* 3-bar signal-meter — risk level shown by # of filled bars + tone color.
   No text, no emoji. Reads like cellular signal but inverted: more bars
   filled = more risk. */
.risk-meter {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  padding: 0;
}
.risk-meter > span {
  display: block;
  width: 3px;
  border-radius: 1px;
  background: color-mix(in oklch, var(--text) 14%, transparent);
  transition: background 160ms ease;
}
.risk-meter > span:nth-child(1) { height: 40%; }
.risk-meter > span:nth-child(2) { height: 70%; }
.risk-meter > span:nth-child(3) { height: 100%; }

/* Healthy — 1 bar lit (green) */
.risk-meter.tone-healthy > span:nth-child(1) { background: var(--good); }
/* Needs attention — 2 bars lit (accent) */
.risk-meter.tone-needs-attention > span:nth-child(1),
.risk-meter.tone-needs-attention > span:nth-child(2) { background: var(--accent); }
/* At risk — all 3 lit in muted rust. Red is reserved for true critical alerts. */
.risk-meter.tone-at-risk > span { background: var(--risk); }
/* Closed Won — all 3 in won-tone */
.risk-meter.tone-closed-won > span { background: var(--closed-won); }
/* Closed Lost — all 3 muted in lost-tone */
.risk-meter.tone-closed-lost > span {
  background: color-mix(in oklch, var(--closed-lost) 55%, transparent);
}

/* Body collapsed by default; expands on hover/focus. The grid-rows 0fr→1fr
   trick animates from 0 to natural height. */
.pipeline-card-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 220ms ease, opacity 180ms ease, margin-top 220ms ease;
  margin-top: 0;
}
.pipeline-card-body-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pipeline-card:hover .pipeline-card-body,
.pipeline-card:focus-visible .pipeline-card-body,
.pipeline-card:focus-within .pipeline-card-body {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 6px;
}

/* Title row — company name reads as a proper title via size + weight + tight
   tracking, separated from the body by a 1px hairline so the title block has
   its own visual identity. The value sits in a quiet pill on the right so it
   reads as metadata, not as competing copy. */
.pipeline-card-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.pipeline-card:hover .pipeline-card-top,
.pipeline-card:focus-within .pipeline-card-top {
  padding-bottom: 9px;
  border-bottom: 1px solid var(--hairline);
  transition: padding-bottom 180ms ease, border-color 180ms ease;
}
.pipeline-card-co {
  font-size: 14.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.012em;
  line-height: 1.15;
  flex: 1; min-width: 0;
}
.pipeline-card-v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.pipeline-card-line {
  font-size: 13px; line-height: 1.4;
  color: var(--text);
  letter-spacing: -0.005em;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pipeline-card[data-status="at-risk"] .pipeline-card-line { color: color-mix(in oklch, var(--risk) 58%, var(--text)); font-weight: 500; }
.pipeline-card[data-status="needs-attention"] .pipeline-card-line { color: var(--accent); font-weight: 500; }
.pipeline-card[data-status="healthy"] .pipeline-card-line { color: var(--good); font-weight: 500; }
.pipeline-card.is-closed .pipeline-card-line { color: var(--text); font-weight: 600; }

.deal-cat-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  margin-top: 1px;
}

.deal-cat-strip.is-compact {
  gap: 4px;
}

.deal-cat-chip {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: color-mix(in oklch, var(--text) 5%, transparent);
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.deal-cat-chip:hover,
.deal-cat-chip:focus-visible {
  background: color-mix(in oklch, currentColor 10%, var(--surface-2));
  border-color: currentColor;
}

.deal-cat-chip .icon {
  flex: 0 0 auto;
  color: currentColor;
}

.deal-cat-chip .deal-cat-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  z-index: 40;
  width: max-content;
  max-width: 240px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.15;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 3px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.deal-cat-chip .deal-cat-label::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  transform: translate(-50%, -4px) rotate(45deg);
}

.deal-cat-chip:hover .deal-cat-label,
.deal-cat-chip:focus-visible .deal-cat-label {
  opacity: 1;
  transform: translate(-50%, 0);
}

.deal-cat-chip.is-compact {
  width: 20px;
  height: 20px;
  font-size: 10px;
}

.coach-cat-strip {
  margin-top: 0;
  justify-content: flex-end;
}

.deal-cat-gap {
  border-color: color-mix(in oklch, var(--warn) 24%, var(--border));
  background: color-mix(in oklch, var(--warn) 9%, transparent);
  color: color-mix(in oklch, var(--warn) 58%, var(--text));
}

.deal-cat-action {
  border-color: color-mix(in oklch, var(--info) 24%, var(--border));
  background: color-mix(in oklch, var(--info) 9%, transparent);
  color: color-mix(in oklch, var(--info) 54%, var(--text));
}

/* Next-move row — single AI-suggested action with a tiny status-tinted dot
   instead of an "eyebrow" label, so the card stays quiet but legible. */
.pipeline-card-fix {
  position: relative;
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 0 0;
  border-top: 1px solid var(--hairline);
  min-width: 0;
}
.pipeline-card-fix-label {
  position: relative;
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.pipeline-card-fix-label::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--text-3);
}
.pipeline-card-fix-text {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-2);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.pipeline-card[data-status="at-risk"] .pipeline-card-fix-label::before { background: var(--risk); }
.pipeline-card[data-status="at-risk"] .pipeline-card-fix-label { color: var(--risk); }
.pipeline-card[data-status="needs-attention"] .pipeline-card-fix-label::before { background: var(--accent); }
.pipeline-card[data-status="needs-attention"] .pipeline-card-fix-label { color: var(--accent); }
.pipeline-card[data-status="healthy"] .pipeline-card-fix-label::before { background: var(--good); }
.pipeline-card[data-status="at-risk"] .pipeline-card-fix-text { color: color-mix(in oklch, var(--risk) 26%, var(--text)); }
.pipeline-card[data-status="needs-attention"] .pipeline-card-fix-text { color: color-mix(in oklch, var(--accent) 35%, var(--text)); }

/* Folded card — single-row "title only" state for healthy deals with no
   urgency cue. The short height makes risky/momentum cards visually dominate
   the column at a glance. The green left-border still signals "healthy". */
.pipeline-card.is-folded {
  height: auto;
  min-height: 0;
  padding: 14px 4px;
  gap: 0;
}
.pipeline-card.is-folded .pipeline-card-top {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.pipeline-card.is-folded::before { top: 17px; }
/* Slightly de-emphasize the title weight so folded cards feel quieter than
   their expanded neighbors — they're "fine, ignore". */
.pipeline-card.is-folded .pipeline-card-co {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
}
.pipeline-card.is-folded:hover .pipeline-card-co { color: var(--text); }

.pipeline-outcome {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
}
.pipeline-outcome-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--closed-won-soft);
  color: var(--closed-won);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pipeline-card[data-outcome="lost"] .pipeline-outcome-label {
  background: var(--closed-lost-soft);
  color: var(--closed-lost);
}
.pipeline-outcome p {
  margin: 0;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.45;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pipeline-outcome span {
  color: var(--text-3);
  font-size: 11.5px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pipeline-card:not(.is-closed) .deal-progress { margin-top: 4px; }

.deal-progress {
  min-width: 0;
}
.deal-progress .cp-bsp { gap: 6px; }
.deal-progress .cp-bsp-track {
  height: 5px;
  margin: 30px 14px 14px;
}
.deal-progress .cp-bsp-pin {
  width: 19px;
  height: 19px;
  font-size: 9px;
}
.deal-progress .cp-bsp-marker em { font-size: 9.5px; }
.deal-progress .cp-bsp-chip {
  height: 19px;
  padding: 0 8px 0 7px;
  font-size: 10px;
}
.deal-progress .cp-bsp-chip-gap { font-size: 9.5px; }
.deal-progress.is-compact { min-width: 230px; max-width: 260px; }
.deal-progress.is-compact .cp-bsp { gap: 4px; }
.deal-progress.is-compact .cp-bsp-track {
  height: 4px;
  margin: 28px 12px 12px;
}
.deal-progress.is-compact .cp-bsp-pin {
  width: 17px;
  height: 17px;
  font-size: 8.5px;
}
.deal-progress.is-compact .cp-bsp-marker em { font-size: 9px; }
.deal-progress.is-compact .cp-bsp-chip {
  height: 17px;
  font-size: 9.5px;
  padding: 0 7px 0 6px;
}
.deal-progress.is-compact .cp-bsp-chip-gap { font-size: 9px; }

.pipeline-card-bar {
  height: 3px; border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  position: relative;
  margin-top: 2px;
}
.pipeline-card-bar .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 999px;
  background: var(--text-3);
}
.pipeline-card[data-status="at-risk"] .pipeline-card-bar .fill { background: var(--risk); }
.pipeline-card[data-status="needs-attention"] .pipeline-card-bar .fill { background: var(--accent); }
.pipeline-card[data-status="healthy"] .pipeline-card-bar .fill { background: var(--good); }

/* ============================================================
   BUYER / SELLER WALK — labeled figures on a flowing path,
   heading toward a checkered finish line.

   Forward motion is sold by:
     - The path's bright dashes scrolling leftward (world flows past)
     - Speed lines streaking off the seller's back
     - Real walking gait: bob + step + alternating legs
     - Finish-line goal at 100% (checker pattern)
     - Pace tied to deal state — together = brisk; split = sluggish
   ============================================================ */
.bsw {
  position: relative;
  height: 54px;          /* room for: steam · tag · head · body · legs · path */
  width: 100%;
  margin-top: 8px;
  overflow: hidden;
  /* leave a strip on the right reserved for the finish line */
  padding-right: 12px;
}

/* The path: bright dashes that flow leftward at speed. Far more visible
   than before — the user sees obvious motion at a glance. */
.bsw-path {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 4px;
  pointer-events: none;
}
.bsw-path::before {
  /* faint baseline so the path reads as a road */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--border);
}
.bsw-path-stripe {
  position: absolute;
  left: 0; right: 0; bottom: 1px;
  height: 2px;
  background-image: linear-gradient(90deg,
    var(--text-2) 0%, var(--text-2) 50%,
    transparent  50%, transparent 100%);
  background-size: 12px 2px;
  background-repeat: repeat-x;
  opacity: 0.7;
  animation: bswPathFlow 0.7s linear infinite;
}
@keyframes bswPathFlow {
  from { background-position: 0 0; }
  to   { background-position: -12px 0; }
}
/* Pace = state: brisk together, slow split */
.bsw.bsw-together .bsw-path-stripe { animation-duration: 0.5s;  opacity: 0.85; }
.bsw.bsw-drifting .bsw-path-stripe { animation-duration: 0.85s; opacity: 0.65; }
.bsw.bsw-split    .bsw-path-stripe { animation-duration: 1.4s;  opacity: 0.45; }

/* FINISH LINE — checkered vertical band, fixed at the right edge */
.bsw-finish {
  position: absolute;
  right: 0; top: 6px; bottom: 4px;
  width: 8px;
  display: flex; flex-direction: column; align-items: flex-end;
  pointer-events: none;
}
.bsw-finish-line {
  width: 6px; flex: 1;
  background-image:
    linear-gradient(45deg,  var(--text)   25%, transparent 25%),
    linear-gradient(-45deg, var(--text)   25%, transparent 25%),
    linear-gradient(45deg,  transparent   75%, var(--text) 75%),
    linear-gradient(-45deg, transparent   75%, var(--text) 75%);
  background-size: 4px 4px;
  background-position: 0 0, 0 2px, 2px -2px, -2px 0px;
  background-color: var(--bg-2);
  border-left: 1px solid var(--text-2);
  opacity: 0.8;
}
/* (finish-line text label removed) */

/* Figures — label on top, then head, body, legs, standing on path */
.bsw-fig {
  position: absolute;
  bottom: 8px;
  width: 12px;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 1px;
  transform-origin: bottom center;
  will-change: transform;
}
.bsw-fig .bsw-tag {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-bottom: 1px;
  white-space: nowrap;
  text-transform: uppercase;
}
.bsw-buyer  .bsw-tag { color: var(--warn);   }
.bsw-seller .bsw-tag { color: var(--text);   }
.bsw.bsw-together .bsw-buyer .bsw-tag { color: var(--good); }

.bsw-fig .bsw-head {
  width: 4px; height: 4px;
  border-radius: 999px;
}
.bsw-fig .bsw-body {
  width: 2px; height: 7px;
  border-radius: 1px;
  margin-top: 1px;
}
.bsw-fig .bsw-legs {
  position: relative;
  width: 6px; height: 5px;
}
.bsw-fig .bsw-leg-l,
.bsw-fig .bsw-leg-r {
  position: absolute;
  top: 0;
  width: 1.5px; height: 5px;
  border-radius: 1px;
  transform-origin: top center;
}
.bsw-fig .bsw-leg-l { left: 1px; }
.bsw-fig .bsw-leg-r { right: 1px; }

/* Role colors */
.bsw-buyer  .bsw-head,
.bsw-buyer  .bsw-body,
.bsw-buyer  .bsw-leg-l,
.bsw-buyer  .bsw-leg-r { background: var(--warn); }
.bsw-seller .bsw-head,
.bsw-seller .bsw-body,
.bsw-seller .bsw-leg-l,
.bsw-seller .bsw-leg-r { background: var(--text); }
.bsw.bsw-together .bsw-buyer .bsw-head,
.bsw.bsw-together .bsw-buyer .bsw-body,
.bsw.bsw-together .bsw-buyer .bsw-leg-l,
.bsw.bsw-together .bsw-buyer .bsw-leg-r { background: var(--good); }

/* Speed lines — short horizontal streaks behind seller, flying off
   leftward. Sells "in motion" beyond doubt. Always present on seller,
   thicker when ahead of the buyer. */
.bsw-streak {
  position: absolute;
  right: 100%;
  top: 8px;
  width: 22px; height: 8px;
  pointer-events: none;
  display: flex; flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 240ms ease;
}
.bsw-streak span {
  display: block;
  height: 1px;
  background: var(--text-2);
  border-radius: 999px;
  transform-origin: right center;
}
.bsw-streak span:nth-child(1) { width: 10px; animation: streakDash 0.6s linear infinite;        }
.bsw-streak span:nth-child(2) { width: 14px; animation: streakDash 0.6s linear infinite 0.18s;  }
.bsw-streak span:nth-child(3) { width: 8px;  animation: streakDash 0.6s linear infinite 0.36s;  }
.bsw.bsw-together .bsw-streak { opacity: 0.7; }
.bsw.bsw-drifting .bsw-streak { opacity: 0.9; }
.bsw.bsw-split    .bsw-streak { opacity: 1;   }
@keyframes streakDash {
  0%   { transform: translateX(0)    scaleX(1);   opacity: 0.95; }
  100% { transform: translateX(-14px) scaleX(0.4); opacity: 0;    }
}

/* Steam puffs rising from the buyer's head when split — frustration cue.
   Three offset blobs that drift up + scale + fade, looping. Hidden in
   together / drifting states. */
.bsw-steam {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
}
.bsw-steam span {
  position: absolute;
  bottom: 0;
  width: 3px; height: 3px;
  border-radius: 999px;
  background: var(--warn);
  opacity: 0;
}
.bsw-steam span:nth-child(1) { left: 6px; animation: steamPuff 1.2s ease-out infinite 0s;     }
.bsw-steam span:nth-child(2) { left: 2px; animation: steamPuff 1.2s ease-out infinite 0.4s;   }
.bsw-steam span:nth-child(3) { left: 9px; animation: steamPuff 1.2s ease-out infinite 0.8s;   }
.bsw.bsw-split .bsw-buyer .bsw-steam { opacity: 1; }
@keyframes steamPuff {
  0%   { transform: translateY(0)    scale(0.4); opacity: 0;    }
  20%  { opacity: 0.85; }
  100% { transform: translateY(-12px) scale(1.4); opacity: 0;    }
}
@media (prefers-reduced-motion: reduce) {
  .bsw-steam span { animation: none !important; }
}

/* Walking — the figure bobs and the legs alternate. The actual
   horizontal position is fixed (= score); the bob+leg sells the gait. */
.bsw.bsw-together .bsw-buyer,
.bsw.bsw-together .bsw-seller {
  animation: walkBob 0.7s ease-in-out infinite;
}
.bsw.bsw-together .bsw-buyer  { animation-delay: 0s; }
.bsw.bsw-together .bsw-seller { animation-delay: 0.06s; }
.bsw.bsw-together .bsw-buyer  .bsw-leg-l,
.bsw.bsw-together .bsw-seller .bsw-leg-l { animation: legSwingFwd 0.7s ease-in-out infinite; }
.bsw.bsw-together .bsw-buyer  .bsw-leg-r,
.bsw.bsw-together .bsw-seller .bsw-leg-r { animation: legSwingBack 0.7s ease-in-out infinite; }

.bsw.bsw-drifting .bsw-seller { animation: walkBob 0.7s ease-in-out infinite; }
.bsw.bsw-drifting .bsw-seller .bsw-leg-l { animation: legSwingFwd 0.7s ease-in-out infinite; }
.bsw.bsw-drifting .bsw-seller .bsw-leg-r { animation: legSwingBack 0.7s ease-in-out infinite; }
.bsw.bsw-drifting .bsw-buyer  { animation: walkBobSlow 1.4s ease-in-out infinite; }

.bsw.bsw-split .bsw-seller { animation: walkBob 0.55s ease-in-out infinite; }
.bsw.bsw-split .bsw-seller .bsw-leg-l { animation: legSwingFwd 0.55s ease-in-out infinite; }
.bsw.bsw-split .bsw-seller .bsw-leg-r { animation: legSwingBack 0.55s ease-in-out infinite; }
.bsw.bsw-split .bsw-buyer  { animation: walkStuck 0.5s ease-in-out infinite; }
.bsw.bsw-split .bsw-buyer .bsw-head {
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--warn) 35%, transparent);
}

/* Hover the card — accelerate the whole journey */
.pipeline-card:hover .bsw-path-stripe { animation-duration: 0.6s; }
.pipeline-card:hover .bsw-seller       { animation-duration: 0.32s; }
.pipeline-card:hover .bsw-buyer        { animation-duration: 0.36s; }
.pipeline-card:hover .bsw-seller .bsw-leg-l,
.pipeline-card:hover .bsw-seller .bsw-leg-r { animation-duration: 0.32s; }
.pipeline-card:hover .bsw-dust span { animation-duration: 0.7s; }
.pipeline-card:hover .bsw-goal-flag { animation-duration: 0.8s; }

@keyframes walkBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}
@keyframes walkBobSlow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.5px); }
}
@keyframes walkStuck {
  /* frustrated: tilts side-to-side, doesn't advance */
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-4deg); }
  75%      { transform: rotate(4deg); }
}
@keyframes legSwingFwd {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(20deg); }
  75%      { transform: rotate(-15deg); }
}
@keyframes legSwingBack {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-15deg); }
  75%      { transform: rotate(20deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bsw-fig,
  .bsw-fig .bsw-leg-l,
  .bsw-fig .bsw-leg-r,
  .bsw-path-stripe,
  .bsw-goal-flag,
  .bsw-dust span { animation: none !important; }
}

/* ============================================================
   STACK MODE — manual only. Large columns keep normal cards by default.
   ============================================================ */
/* Poker-stack mode: cards overlap like a deck of playing cards laid out
   with subtle alternating tilt + edge shadow. Hover lifts the card to
   the top of the stack and rotates it back to upright. */
.pipeline-stage.is-compact .pipeline-deals {
  gap: 0;
  padding: 6px 6px 4px;
  perspective: 600px;
  perspective-origin: top center;
}
.pipeline-card-stack {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 10px;
  height: var(--pipeline-stack-card-h) !important;
  min-height: var(--pipeline-stack-card-h) !important;
  padding: 11px 12px 11px 14px !important;
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--text-3) !important;
  background: var(--bg-2) !important;
  margin: 0 !important;
  margin-top: -22px !important;
  box-shadow:
    0 1px 0 0 color-mix(in oklch, var(--border-strong) 80%, transparent),
    0 8px 16px -10px rgba(0, 0, 0, 0.55);
  transform-origin: 50% 100%;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 220ms ease,
              z-index 0s linear 220ms;
  position: relative;
}
.pipeline-card-stack:first-of-type { margin-top: 0 !important; }
/* Alternating subtle rotation gives the "hand-stacked" feel without
   overdoing it. Even / odd alternation keeps the deck balanced. */
.pipeline-card-stack:nth-child(5n+1) { transform: rotate(-1.4deg) translateY(0); z-index: 1; }
.pipeline-card-stack:nth-child(5n+2) { transform: rotate(0.9deg)  translateY(0); z-index: 2; }
.pipeline-card-stack:nth-child(5n+3) { transform: rotate(-0.6deg) translateY(0); z-index: 3; }
.pipeline-card-stack:nth-child(5n+4) { transform: rotate(1.2deg)  translateY(0); z-index: 4; }
.pipeline-card-stack:nth-child(5n+5) { transform: rotate(-1.0deg) translateY(0); z-index: 5; }
.pipeline-card-stack:hover {
  z-index: 50 !important;
  transform: rotate(0deg) translateY(-4px) scale(1.015) !important;
  border-color: var(--border-strong) !important;
  background: var(--surface-3) !important;
  box-shadow:
    0 1px 0 0 color-mix(in oklch, var(--border-strong) 90%, transparent),
    0 18px 28px -12px rgba(0, 0, 0, 0.7);
  transition: transform 160ms cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 160ms ease,
              z-index 0s linear 0s;
}
.pipeline-card-stack[data-status="at-risk"]         { border-left-color: var(--risk) !important; }
.pipeline-card-stack[data-status="needs-attention"] { border-left-color: var(--accent) !important; }
.pipeline-card-stack[data-status="healthy"]         { border-left-color: var(--good) !important; }
.pipeline-card-stack.is-closed[data-outcome="won"] {
  border-left-color: var(--closed-won) !important;
  background: var(--bg-2) !important;
}
.pipeline-card-stack.is-closed[data-outcome="lost"] {
  border-left-color: var(--closed-lost) !important;
  background: var(--bg-2) !important;
}
.pipeline-card-stack .pipeline-card-co {
  font-size: 12.5px;
  flex: 1; min-width: 0;
}
.pipeline-card-stack .pipeline-card-v {
  font-size: 11.5px;
}

.pipeline-empty {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--text-3);
  padding: 10px 12px;
  text-align: center;
  opacity: 0.6;
}

@media (max-width: 1180px) {
  .pipeline-status {
    grid-template-columns: minmax(260px, 1fr) minmax(300px, 1fr);
  }
  .pipeline-status-metrics {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-top: 14px;
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }
  .pipeline {
    overflow-x: auto;
  }
  .pipeline-stage-header,
  .pipeline-stage-columns {
    grid-template-columns: repeat(5, minmax(140px, 1fr));
  }
  .pipeline-head { font-size: 11px; }
}

@media (max-width: 760px) {
  .pipeline-status {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
    border-radius: 14px;
  }
  .pipeline-status-title {
    font-size: 21px;
  }
  .pipeline-status-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .pipeline-status-metric strong {
    font-size: 15px;
  }
  .pipeline-status-metric span,
  .pipeline-status-metric em {
    white-space: normal;
  }
}

/* ============================================================
   DEAL DETAIL — flatter sections instead of nested cards
   ============================================================ */
/* Section rhythm — more vertical breathing room between sections and a
   barely-there divider, so groups read by whitespace first, line second.
   This makes adjacent sections feel like distinct ideas without
   announcing a hard cut. */
.dd-section { padding: 28px 0; border-top: 1px solid color-mix(in oklch, var(--border) 50%, transparent); }
.dd-section:first-of-type { border-top: 0; padding-top: 10px; }
.dd-section + .dd-section { padding-top: 26px; }

/* Single-rail timeline: one continuous rail threading every section. */
.dd-rail-track {
  position: relative;
  padding-left: 32px;
}
.dd-rail-track::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 22px;
  bottom: 22px;
  width: 1.5px;
  background: var(--border);
}
.dd-rail-track > .dd-section {
  border-top: 0;
  padding: 28px 0;
  position: relative;
}
.dd-rail-track > .dd-section:first-of-type { padding-top: 14px; }
.dd-rail-track > .dd-section + .dd-section { border-top: 0; }
.dd-rail-track > .dd-section::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 32px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1.5px solid var(--text-2);
  box-shadow: 0 0 0 4px var(--bg-2);
  z-index: 1;
}
.dd-rail-track > .dd-section:first-of-type::before { top: 18px; }
.dd-rail-track > .dd-section.is-primary::before {
  background: var(--text);
  border-color: var(--text);
  width: 12px;
  height: 12px;
  left: -26px;
}
/* Inner gap-list rail aligns visually with the outer rail */
.dd-rail-track .gap-list { margin-left: -32px; }
.dd-rail-track .gap-item {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  column-gap: 14px;
}
.dd-rail-track .gap-rail::before {
  left: 11px;
  transform: none;
}
.dd-section-h {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 18px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.dd-prose {
  margin: 0;
  color: var(--text-2);
  font-size: 14px; line-height: 1.6;
  max-width: 720px;
  text-wrap: pretty;
}
.dd-prose strong { color: var(--text); font-weight: 600; }

.deal-defense {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Small top eyebrow — only the ProgressGate lives here now. Status badge
   was dropped (tone is already encoded by the card's rail + wash) and the
   lens tabs moved to a quiet footer switcher. Hides itself when the gate
   isn't available so the card doesn't leave dead space at the top. */
.deal-defense-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: -4px 0 0;
}
.deal-defense-head:empty { display: none; }
.deal-defense-cats { margin-top: 0; }

/* Lens switcher demoted — small mono uppercase row at the card footer
   instead of three competing tabs at the top. Active lens is implicit
   (it's what's currently rendering); only the *other* lenses appear as
   text links the user can switch into. */
.deal-defense-lens-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  flex-wrap: wrap;
}
.deal-defense-lens-label { color: var(--text-3); }
.deal-defense-lens-link {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 6px;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--text-2);
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  transition: color 140ms ease, background 140ms ease;
}
.deal-defense-lens-link:hover {
  color: var(--text);
  background: color-mix(in oklch, var(--text) 5%, transparent);
}
.deal-defense-lens-link + .deal-defense-lens-link {
  position: relative;
  margin-left: 10px;
}
.deal-defense-lens-link + .deal-defense-lens-link::before {
  content: "·";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
}
.deal-defense.is-focused {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  align-items: stretch;
}
.deal-defense-main {
  min-width: 0;
}
.deal-defense-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.deal-defense-state {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 650;
  border: 1px solid var(--border);
  color: var(--text-2);
  background: var(--surface-2);
}
.deal-defense-state.tone-verified {
  color: var(--good);
  background: var(--good-soft);
  border-color: transparent;
}
.deal-defense-state.tone-weak {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: transparent;
}
.deal-defense-state.tone-unverified {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: transparent;
}
.deal-defense h2 {
  margin: 8px 0 0;
  color: var(--text);
  font-size: 19px;
  line-height: 1.22;
  font-weight: 650;
  letter-spacing: 0;
}
.deal-defense p {
  max-width: 660px;
  margin: 7px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.48;
  text-wrap: pretty;
}
.deal-defense-gap-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.72fr);
  gap: 14px;
  margin-top: 14px;
  max-width: 760px;
}
.deal-defense-gap-action > div {
  min-width: 0;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.deal-defense-gap-action span {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.deal-defense-gap-action b {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  text-wrap: pretty;
}
.deal-defense-gap-action em {
  display: block;
  margin-top: 7px;
  color: var(--text-2);
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.deal-defense-gap-action .btn {
  max-width: 100%;
  white-space: normal;
  text-align: left;
  justify-content: flex-start;
}
.deal-defense-progress {
  min-width: 0;
  align-self: center;
  padding-left: 24px;
  border-left: 1px solid color-mix(in oklch, var(--accent) 16%, var(--border));
}
.deal-defense-progress .cp-bsp-track {
  min-width: 0;
}

/* Compact action row — replaces the old `deal-defense-gap-action`
   block that re-printed the truth title/body next to the action.
   The narrative now lives once in `detail-truth-story`; this row is
   just the single CTA + channel hint. */
.deal-defense-action {
  margin-top: 6px;
}

/* Kicker now hosts the lens switcher alongside the progress gate. */
.deal-defense-kicker { justify-content: space-between; row-gap: 6px; }
.deal-defense-kicker .detail-truth-lenses { margin: 0; }

@media (max-width: 760px) {
  .deal-defense {
    grid-template-columns: 1fr;
  }
  .deal-defense.is-focused,
  .deal-defense-gap-action {
    grid-template-columns: 1fr;
  }
  .deal-defense-progress {
    padding-left: 0;
    border-left: 0;
  }
}

.closed-analysis {
  padding: 20px 0 24px;
}
.closed-analysis-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--closed-won-soft);
  color: var(--closed-won);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.closed-analysis.is-lost .closed-analysis-kicker {
  background: var(--closed-lost-soft);
  color: var(--closed-lost);
}
.closed-analysis-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
}
.closed-analysis-actions > span {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.closed-analysis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.closed-analysis-grid > div {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: var(--shadow-card);
}
.closed-analysis-grid span {
  display: block;
  margin-bottom: 7px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.closed-analysis-grid p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
  text-wrap: pretty;
}
@media (max-width: 760px) {
  .closed-analysis-grid {
    grid-template-columns: 1fr;
  }
}

/* Inline action — no nested card chrome, just a subject line + body + button */
.dd-action {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 18px 4px 20px;
  border: 0;
  align-items: center;
  transition: background 160ms ease;
}
.dd-action::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 10px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--text) 6%, transparent) 0%,
    transparent 100%
  );
  opacity: 0.7;
}
.dd-action:last-child::after { display: none; }
.dd-action:hover { background: color-mix(in oklch, var(--text) 4%, transparent); }
.dd-action.is-automation {
  align-items: start;
  padding: 16px 0;
}
.dd-action .ic {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
}
.dd-action .body { min-width: 0; }
.dd-action.is-automation .body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dd-action .kind {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}
.dd-action .title {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  text-wrap: pretty;
}
.dd-action .preview {
  margin: 6px 0 0;
  font-size: 12.5px; line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
  max-width: 520px;
}
.dd-action .preview b {
  color: var(--text);
  font-weight: 600;
}
.dd-action > .btn,
.dd-action > .chip {
  white-space: nowrap;
}
.dd-action-buttons,
.dd-hero-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.dd-hero-actions {
  margin-top: 14px;
}
.dd-action-buttons .btn {
  white-space: nowrap;
}
.dd-action-buttons .chip {
  white-space: nowrap;
}
.dd-automation-preview {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: 620px;
}
.dd-automation-contact {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.dd-automation-avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
}
.dd-automation-contact-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.dd-automation-contact-copy b {
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.25;
}
.dd-automation-contact-copy em {
  color: var(--text-3);
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.dd-automation-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dd-flow-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 180px;
  min-height: 22px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.15;
}
.dd-flow-chip span {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent);
  font-weight: 700;
}

.dd-finance-lookup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in oklch, var(--accent) 22%, var(--border));
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--accent) 10%, var(--surface-2)) 0%,
      var(--surface-2) 100%);
}
.dd-finance-lookup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dd-finance-lookup-scan {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dd-finance-scan-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid color-mix(in oklch, var(--accent) 16%, var(--border));
  color: var(--text-2);
  font-size: 10.5px;
  line-height: 1;
  white-space: nowrap;
}
.dd-finance-scan-chip span {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent);
  font-weight: 700;
}
.dd-finance-lookup-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
.dd-finance-lookup-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  white-space: nowrap;
}
.dd-finance-lookup-contact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.dd-finance-lookup-avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--accent) 14%, var(--surface-2));
  border: 1px solid color-mix(in oklch, var(--accent) 28%, var(--border));
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}
.dd-finance-lookup-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dd-finance-lookup-copy b {
  font-size: 13.5px;
  line-height: 1.2;
  color: var(--text);
}
.dd-finance-lookup-copy span {
  font-size: 11.5px;
  color: var(--text-2);
}
.dd-finance-lookup-copy em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.4;
}
.dd-finance-lookup-path {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}
.dd-finance-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.dd-finance-step > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
}
.dd-finance-step div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dd-finance-step b {
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--text);
}
.dd-finance-step em {
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-3);
}
.ap-found.is-finance {
  border-color: color-mix(in oklch, var(--accent) 26%, var(--border));
  background: color-mix(in oklch, var(--accent) 8%, var(--surface-2));
}
.ap-buyer-brief {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklch, var(--accent) 18%, var(--border));
  border-radius: 12px;
  background: color-mix(in oklch, var(--accent) 7%, var(--surface-2));
}
.ap-buyer-brief-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ap-buyer-brief-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ap-buyer-brief-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid color-mix(in oklch, var(--accent) 20%, var(--border));
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ap-buyer-brief p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-2);
}

@media (max-width: 760px) {
  .dd-action {
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
  }
  .dd-action > .btn,
  .dd-action > .chip,
  .dd-action-buttons {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
  }
  .dd-finance-lookup-head,
  .ap-buyer-brief-top {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Inline alignment — just bars + numbers, no card */
.dd-align {
  display: grid; grid-template-columns: 60px 1fr auto;
  gap: 12px; align-items: center;
  padding: 8px 0;
}
.dd-align .label {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em;
}
.dd-align .v {
  font-variant-numeric: tabular-nums; font-weight: 600;
  font-size: 13px;
}

/* Stakeholder row */
.dd-stake {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.dd-stake:last-child { border-bottom: 0; }
.dd-stake .who { min-width: 0; }
.dd-stake .who .name { font-weight: 500; font-size: 13.5px; }
.dd-stake .who .role { color: var(--text-3); font-size: 11.5px; margin-top: 1px; }

/* Activity row — now a button-shaped clickable surface. The grid + visual
   layout previously on .dd-act move to .dd-act-head; the outer .dd-act
   carries the row's separator + state classes (is-open / is-nudge). */
.dd-act {
  position: relative;
  border: 0;
  transition: background 160ms ease;
}
.dd-act::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 8px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--text) 4%, transparent) 0%,
    transparent 100%
  );
  opacity: 0.5;
}
.dd-act:last-child::after { display: none; }
.dd-act-head {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 16px;
  align-items: start;
  width: 100%;
  padding: 22px 6px 22px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background 160ms ease;
}
.dd-act-head:hover { background: color-mix(in oklch, var(--text) 4%, transparent); }
.dd-act-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.dd-act.is-open .dd-act-head { background: color-mix(in oklch, var(--text) 3%, transparent); }
/* Snippet — body summary line in the closed row is clamped to one line
   so the timeline scans like a feed. Full content lives in the expand. */
.dd-act:not(.is-open) .dd-act-head .body .b {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd-act-caret {
  color: var(--text-3);
  transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dd-act.is-open .dd-act-caret { transform: rotate(90deg); color: var(--text-2); }

/* Expand panel — reading view of the message body, channel meta, and
   (for Nudge replied items) impact attribution. Indented under the body
   column so it visually belongs to the same row. */
.dd-act-expand {
  padding: 4px 6px 26px 54px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: ddActExpandIn 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes ddActExpandIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dd-act-expand-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--text-2);
}
.dd-act-meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.dd-act-expand-subject {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.dd-act-expand-body {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-2);
  white-space: pre-wrap;
  text-wrap: pretty;
  padding: 12px 14px;
  border-left: 2px solid var(--hairline-strong);
  background: color-mix(in oklch, var(--text) 2%, transparent);
  border-radius: 0 8px 8px 0;
}
.dd-act-expand-impact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dd-act-expand-impact p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.dd-act-expand-impact b { color: var(--text); font-weight: 600; }

@media (max-width: 720px) {
  .dd-act-expand { padding-left: 14px; }
}

.dd-act .ic {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--text-2);
}
.dd-act.kind-addy .ic { background: var(--accent-soft); color: var(--accent); }
.dd-act.kind-email .ic { background: var(--info-soft); color: var(--info); }
.dd-act.kind-meeting .ic { background: var(--good-soft); color: var(--good); }
.dd-act .body { min-width: 0; }
.dd-act .body .t { font-weight: 500; font-size: 13.5px; }
.dd-act .body .s { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.dd-act .body .b {
  font-size: 12.5px; color: var(--text-2);
  margin: 6px 0 0; line-height: 1.5;
  text-wrap: pretty;
}
.dd-act .when { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); white-space: nowrap; }

/* Nudge-derived activity row — softly tinted background so the entry
   reads as agent-originated without shouting. Sent and replied phases
   both share this surface; the badges below carry the phase distinction. */
.dd-act.is-nudge {
  background: linear-gradient(90deg, color-mix(in oklch, var(--accent) 7%, transparent) 0%, transparent 36%);
}
.dd-act.is-nudge.side-buyer {
  background: linear-gradient(90deg, color-mix(in oklch, var(--good) 8%, transparent) 0%, transparent 36%);
}
.dd-act-nudge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.dd-act-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.badge-nudge-recommended {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent);
}
.badge-nudge-executed {
  background: color-mix(in oklch, var(--text) 9%, transparent);
  color: var(--text-2);
}
.badge-nudge-verified {
  background: var(--good-soft);
  color: var(--good);
}
/* Impact measurement — sits alongside the verified badge as a single mono
   delta line ("+12pt buyer alignment · gap 25 → 13"). Same typography as
   the badges so the row reads as one cohesive unit, but without a pill. */
.dd-act-impact {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}

/* ── Account map (Stakeholders tab) ────────────────────────────────────
   Power on Y, Support on X. Quadrant labels are tiny corner-tags so they
   never collide with stakeholder nodes; faint zone tints communicate the
   quadrant character (good = champions, warn = blockers). */
.acct-map {
  position: relative;
  height: 380px;
  margin-bottom: 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.acct-map-grid { position: absolute; inset: 0; pointer-events: none; }

/* Faint zone tints — readable but never compete with nodes */
.acct-zone {
  position: absolute;
  width: 50%; height: 50%;
}
.acct-z-tr { top: 0; right: 0;
  background: radial-gradient(70% 70% at 80% 20%, color-mix(in oklch, var(--good) 10%, transparent), transparent 70%);
}
.acct-z-tl { top: 0; left: 0;
  background: radial-gradient(70% 70% at 20% 20%, color-mix(in oklch, var(--warn) 8%, transparent), transparent 70%);
}
.acct-z-br { bottom: 0; right: 0;
  background: radial-gradient(70% 70% at 80% 80%, color-mix(in oklch, var(--info) 8%, transparent), transparent 70%);
}
.acct-z-bl { bottom: 0; left: 0; }

/* Quadrant labels — tiny corner-tags, single line, max-width clamps so
   they never extend into the node area */
.acct-quad {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 4px 8px;
  background: color-mix(in oklch, var(--bg) 70%, transparent);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
  pointer-events: none;
}
.acct-q-tl { top: 12px; left: 12px; }
.acct-q-tr { top: 12px; right: 12px; color: color-mix(in oklch, var(--good) 75%, var(--text-2)); }
.acct-q-bl { bottom: 12px; left: 12px; }
.acct-q-br { bottom: 12px; right: 12px; }

.acct-axis {
  position: absolute;
  background: color-mix(in oklch, var(--border) 90%, transparent);
}
.acct-axis-y { top: 10%; bottom: 10%; left: 50%; width: 1px; }
.acct-axis-x { left: 10%; right: 10%; top: 50%;  height: 1px; }
.acct-axis-label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  pointer-events: none;
}
.acct-axis-label-y {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.acct-axis-label-x {
  bottom: 8px;
  right: 14px;
}
.acct-axis-label .hi { color: var(--text-2); }

/* Stakeholder node — circular avatar with hover tooltip */
.acct-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 2;
  padding: 0;
}
.acct-node-dot {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1.5px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  box-shadow: var(--shadow-md);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.acct-node[data-quadrant="champion"] .acct-node-dot { border-color: color-mix(in oklch, var(--good) 50%, var(--border-strong)); }
.acct-node[data-quadrant="blocker"]  .acct-node-dot { border-color: color-mix(in oklch, var(--warn) 50%, var(--border-strong)); }
.acct-node[data-quadrant="ally"]     .acct-node-dot { border-color: color-mix(in oklch, var(--info) 50%, var(--border-strong)); }
.acct-node-name {
  font-size: 11px;
  color: var(--text-2);
  font-weight: 500;
  white-space: nowrap;
}
.acct-node:hover .acct-node-dot,
.acct-node.is-hover .acct-node-dot,
.acct-node:focus-visible .acct-node-dot {
  transform: scale(1.08);
  background: var(--accent-soft);
  border-color: var(--accent);
}
.acct-node.is-missing .acct-node-dot {
  background: transparent;
  border-style: dashed;
  color: var(--text-3);
}
.acct-node.is-missing .acct-node-name { color: var(--text-3); font-style: italic; }
.acct-node-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 200px;
  display: flex; flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  background: var(--bg-3);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
  box-shadow: var(--shadow-md);
  z-index: 5;
}
.acct-node-tip b { color: var(--text); font-size: 12.5px; }
.acct-node-tip span { font-size: 11px; color: var(--text-3); }
.acct-node-tip em { font-family: var(--font-mono); font-style: normal; font-size: 10px; color: var(--text-2); margin-top: 2px; }
.acct-node:hover .acct-node-tip,
.acct-node.is-hover .acct-node-tip,
.acct-node:focus-visible .acct-node-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Roster — richer cards: identity, P/S meters, and a suggested next move
   per stakeholder. Replaces the prior 1-line row that lacked information. */
.acct-roster {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.acct-card {
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 14px 14px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.acct-card.is-missing { border-style: dashed; }

.acct-card-head {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.acct-card-id { display: flex; flex-direction: column; min-width: 0; }
.acct-card-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-card-role {
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-card-tag {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text-2);
}
.acct-card-tag.tone-good  { color: var(--good);   border-color: color-mix(in oklch, var(--good) 30%, transparent);   background: color-mix(in oklch, var(--good) 10%, var(--surface-2)); }
.acct-card-tag.tone-warn  { color: var(--warn);   border-color: color-mix(in oklch, var(--warn) 30%, transparent);   background: color-mix(in oklch, var(--warn) 10%, var(--surface-2)); }
.acct-card-tag.tone-info  { color: var(--info);   border-color: color-mix(in oklch, var(--info) 30%, transparent);   background: color-mix(in oklch, var(--info) 10%, var(--surface-2)); }
.acct-card-tag.tone-muted { color: var(--text-3); }
.acct-card.is-missing .acct-card-tag {
  color: var(--warn);
  border-color: color-mix(in oklch, var(--warn) 30%, transparent);
  background: color-mix(in oklch, var(--warn) 10%, var(--surface-2));
}

/* Twin meters — power & support side-by-side, tabular numerals */
.acct-card-meters {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.acct-card-meter {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}
.acct-card-meter-l {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.acct-card-meter-track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--text-3) 14%, transparent);
  overflow: hidden;
}
.acct-card-meter-fill {
  position: absolute; inset: 0 auto 0 0;
  border-radius: 999px;
  background: var(--text-2);
}
.acct-card[data-quadrant="champion"] .acct-card-meter-fill { background: var(--good); }
.acct-card[data-quadrant="blocker"]  .acct-card-meter-fill { background: var(--warn); }
.acct-card[data-quadrant="ally"]     .acct-card-meter-fill { background: var(--info); }
.acct-card[data-quadrant="bystander"] .acct-card-meter-fill { background: var(--text-3); }
.acct-card.is-missing .acct-card-meter-fill { background: color-mix(in oklch, var(--warn) 60%, var(--text-3)); }
.acct-card-meter-v {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.acct-card-meter-v em {
  font-style: normal;
  font-weight: 400;
  color: var(--text-3);
  font-size: 9.5px;
  margin-left: 1px;
}

/* Suggested move row — gives the card something to act on */
.acct-card-move {
  display: flex; align-items: baseline; gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  min-width: 0;
}
.acct-card-move-l {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-3);
}
.acct-card-move-t {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-2);
  letter-spacing: -0.005em;
  text-wrap: pretty;
  min-width: 0;
}

/* ── Meetings tab ────────────────────────────────────────────────────── */
.mtg-group + .mtg-group { margin-top: 22px; }
.mtg-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.mtg-summary div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.mtg-summary b {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.mtg-summary span {
  color: var(--text-3);
  font-size: 11px;
}
.mtg-group-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.mtg-group-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.mtg-group-sub {
  margin-top: 3px;
  color: var(--text-2);
  font-size: 12.5px;
}
.mtg-group-count {
  min-width: 28px;
  height: 24px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}
.mtg-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 10px;
}
.mtg {
  position: relative;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  transition: background 160ms ease;
}
.mtg::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 10px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--text) 6%, transparent) 0%,
    transparent 100%
  );
  opacity: 0.7;
}
.mtg.is-open { background: color-mix(in oklch, var(--text) 3%, transparent); }

.mtg-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 16px; row-gap: 4px;
  width: 100%;
  padding: 16px 4px 18px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  align-items: center;
  color: inherit;
  transition: background 160ms ease;
}
.mtg-head:hover { background: color-mix(in oklch, var(--text) 4%, transparent); }
.mtg-when {
  grid-column: 1; grid-row: 1;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-3);
  white-space: nowrap;
}
.mtg-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mtg-pill.is-upcoming { background: var(--accent-soft); color: var(--accent); }
.mtg-pill.is-past     { background: var(--surface-3); color: var(--text-3); }
.mtg-date { color: var(--text-2); font-weight: 500; }
.mtg-dur  { color: var(--text-3); }

.mtg-title {
  grid-column: 1; grid-row: 2;
  font-size: 14px; font-weight: 600; color: var(--text);
  letter-spacing: -0.005em;
}

.mtg-attendees {
  grid-column: 2; grid-row: 1 / span 2;
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.mtg-att {
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  color: var(--text);
  display: grid; place-items: center;
  margin-left: -6px;
}
.mtg-att:first-child { margin-left: 0; }
.mtg-att-names {
  font-size: 11px;
  color: var(--text-3);
  margin-left: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mtg-cta-row {
  grid-column: 3; grid-row: 1 / span 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}
.mtg-cta-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text);
}
.mtg.is-upcoming .mtg-cta-label .icon { color: var(--accent); }
.mtg.is-past .mtg-cta-label .icon     { color: var(--text-2); }
.mtg-caret { color: var(--text-3); transition: transform 180ms ease; }
.mtg.is-open .mtg-caret { transform: rotate(180deg); color: var(--text); }

.mtg-detail {
  padding: 16px 18px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
  display: flex; flex-direction: column;
  gap: 14px;
}
.mtg-detail-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mtg-detail-kicker .icon { color: var(--accent); }
.mtg-intel,
.mtg-debrief {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mtg-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mtg-block {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.mtg-block-wide { grid-column: 1 / -1; }
.mtg-block-focus {
  border-left: 3px solid var(--accent);
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--accent) 8%, transparent), transparent 54%),
    var(--surface-2);
}
.mtg-block-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.mtg-block p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.mtg-block-addy .mtg-block-label .icon { color: var(--accent); }
.mtg-block-addy {
  background: var(--accent-soft);
  border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
}
.mtg-block-addy ul li { color: var(--text); }

.mtg-bullets {
  margin: 0;
  padding-left: 18px;
  display: flex; flex-direction: column;
  gap: 5px;
}
.mtg-bullets li {
  font-size: 13px; line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}

.mtg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mtg-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 11.5px;
  color: var(--text);
}
.mtg-chip .icon { color: var(--text-3); }

.mtg-debrief-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}
.mtg-video {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: inherit;
  text-decoration: none;
}
.mtg-video:hover { border-color: var(--border-strong); }
.mtg-video-thumb {
  position: relative;
  width: 64px; height: 40px;
  border-radius: 7px;
  background:
    radial-gradient(80% 60% at 30% 30%, color-mix(in oklch, var(--accent) 30%, transparent), transparent 60%),
    linear-gradient(135deg, var(--bg-3), var(--surface-2));
  display: grid; place-items: center;
}
.mtg-video-play {
  font-size: 14px;
  color: var(--text);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.mtg-video-meta { display: flex; flex-direction: column; }
.mtg-video-meta b { font-size: 13px; color: var(--text); }
.mtg-video-meta span { font-size: 11px; color: var(--text-3); }
.mtg-sentiment { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mtg-sentiment-v {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.mtg-transcript {
  margin: 0;
  padding: 10px 12px;
  border-left: 2px solid var(--accent);
  background: var(--surface-2);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  font-style: italic;
  line-height: 1.55;
  color: var(--text-2);
}

.mtg-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }

/* ── Meetings · flat recipe ─────────────────────────────────────────────
   Single-surface rows, no nested boxes. Same visual language as the
   priority deal card: tone-keyed left rail when status matters, click to
   expand inline, body uses coach-mini-label flat blocks. */

.mtg-section-label {
  margin: 24px 0 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.mtg-section-label:first-child { margin-top: 8px; }

.mtg-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.mtg-row {
  position: relative;
  border: 1px solid color-mix(in oklch, var(--hairline) 55%, transparent);
  border-radius: 14px;
  background: var(--bg-2);
  transition: background 140ms ease, border-color 140ms ease;
}
.mtg-row + .mtg-row { margin-top: 12px; }
.mtg-row::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 999px;
  background: var(--text-3);
  opacity: 0;
  transition: opacity 140ms ease;
}
.mtg-row.is-upcoming::before { background: var(--accent); opacity: 1; }
.mtg-row.is-past::before     { background: var(--good); opacity: 0.6; }
.mtg-row.is-open {
  background: color-mix(in oklch, var(--text) 2.5%, var(--bg-2));
}

.mtg-row-head {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 16px 18px 16px 22px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  border-radius: inherit;
  transition: background 140ms ease;
}
.mtg-row-head:hover { background: color-mix(in oklch, var(--text) 4%, transparent); }
.mtg-row-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.mtg-row-when {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.mtg-row-when em { font-style: normal; color: var(--text-3); }

.mtg-row-title {
  min-width: 0;
  font-size: 14px;
  font-weight: 550;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mtg-row-att {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.mtg-row-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1.5px solid var(--bg-2);
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-left: -6px;
}
.mtg-row-avatar:first-child { margin-left: 0; }
.mtg-row-avatar.is-more {
  background: transparent;
  color: var(--text-3);
  border-color: var(--hairline);
}

.mtg-row-caret {
  color: var(--text-3);
  transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  flex-shrink: 0;
}
.mtg-row.is-open .mtg-row-caret { transform: rotate(90deg); color: var(--text-2); }

.mtg-row-body {
  padding: 2px 22px 22px 22px;
}

/* Flat block content — replaces the old `mtg-detail-grid` + `mtg-block`
   nest with stacked named sections. Each block is just label + content,
   no surrounding container. */
.mtg-flat {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 18px;
}
.mtg-flat-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mtg-flat-block p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}
.mtg-flat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.mtg-flat-recording {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: color-mix(in oklch, var(--text) 3%, transparent);
}
.mtg-recording-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font: inherit;
}
.mtg-recording-thumb {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  flex-shrink: 0;
}
.mtg-recording-meta { display: flex; flex-direction: column; line-height: 1.25; }
.mtg-recording-meta b { font-size: 12.5px; font-weight: 600; color: var(--text); }
.mtg-recording-meta span { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); letter-spacing: 0.03em; }
.mtg-flat-sentiment {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.mtg-flat-sentiment-v {
  font-size: 13px;
  font-weight: 550;
  color: var(--text);
}

@media (max-width: 720px) {
  .mtg-row-head {
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
  }
  .mtg-row-when { grid-column: 1 / -1; font-size: 10.5px; }
  .mtg-row-title { grid-column: 1; }
  .mtg-row-att { grid-column: 2; }
  .mtg-row-caret { grid-column: 2; }
}

/* ── Stakeholders · same row recipe as meetings ────────────────────────
   Single tone-keyed surface, head shows identity + quadrant tag, click
   to expand reveals power/support meters + next move. The 2D account
   map above stays as is — that's a spatial view, not a list. */

.stk-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.stk-row {
  position: relative;
  border: 1px solid color-mix(in oklch, var(--hairline) 55%, transparent);
  border-radius: 14px;
  background: var(--bg-2);
  transition: background 140ms ease, border-color 140ms ease;
}
.stk-row + .stk-row { margin-top: 12px; }
.stk-row::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 999px;
  background: var(--text-3);
  opacity: 0;
  transition: opacity 140ms ease;
}
.stk-row.tone-good::before  { background: var(--good);   opacity: 1; }
.stk-row.tone-amber::before { background: var(--accent); opacity: 1; }
.stk-row.tone-warn::before  { background: var(--warn);   opacity: 1; }
.stk-row.is-missing::before { background: var(--text-3); opacity: 0.6; }
.stk-row.is-open {
  background: color-mix(in oklch, var(--text) 2.5%, var(--bg-2));
}

.stk-row-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 14px 18px 14px 22px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  border-radius: inherit;
  transition: background 140ms ease;
}
.stk-row-head:hover { background: color-mix(in oklch, var(--text) 4%, transparent); }
.stk-row-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.stk-row-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.stk-row-name {
  font-size: 13.5px;
  font-weight: 550;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stk-row-role {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 1px;
}

.stk-row-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.stk-row-tag.tone-good  { background: var(--good-soft);   color: var(--good); }
.stk-row-tag.tone-amber { background: var(--accent-soft); color: var(--accent); }
.stk-row-tag.tone-warn  { background: var(--warn-soft);   color: var(--warn); }
.stk-row.is-missing .stk-row-tag {
  background: color-mix(in oklch, var(--text-3) 18%, transparent);
  color: var(--text-3);
}

.stk-row-caret {
  color: var(--text-3);
  transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.stk-row.is-open .stk-row-caret { transform: rotate(90deg); color: var(--text-2); }

.stk-row-body {
  padding: 2px 22px 22px 22px;
}

/* Power / Support meter — slim, label + track + value on one line. Lives
   inside the expand panel; reuses the visual weight of coach-mini-label. */
.stk-meter {
  display: flex;
  align-items: center;
  gap: 10px;
}
.stk-meter-track {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--text) 8%, transparent);
  overflow: hidden;
}
.stk-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--text-2);
  border-radius: inherit;
}
.stk-row.tone-good  .stk-meter-fill { background: var(--good); }
.stk-row.tone-amber .stk-meter-fill { background: var(--accent); }
.stk-row.tone-warn  .stk-meter-fill { background: var(--warn); }
.stk-meter-v {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.stk-meter-v em { font-style: normal; color: var(--text-3); }

/* ── AI Actions · secondary row recipe ─────────────────────────────────
   Click row to expand evidence; Review button stays accessible on the
   head with stopPropagation. Outer is role=button (not <button>) so the
   inner Review can be a real button without nesting interactives. */

.ai-act-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ai-act-row {
  position: relative;
  border: 1px solid color-mix(in oklch, var(--hairline) 55%, transparent);
  border-radius: 14px;
  background: var(--bg-2);
  transition: background 140ms ease, border-color 140ms ease;
}
.ai-act-row + .ai-act-row { margin-top: 12px; }
.ai-act-row.is-open {
  background: color-mix(in oklch, var(--text) 2.5%, var(--bg-2));
}
.ai-act-row-head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  cursor: pointer;
  transition: background 140ms ease;
  border-radius: inherit;
}
.ai-act-row-head:hover { background: color-mix(in oklch, var(--text) 4%, transparent); }
.ai-act-row-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ai-act-row-ic {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}
.ai-act-row-body { min-width: 0; }
.ai-act-row-kind {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 2px;
}
.ai-act-row-title {
  font-size: 13.5px;
  font-weight: 550;
  color: var(--text);
  line-height: 1.35;
}
.ai-act-row-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-act-row-aside {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ai-act-row-caret {
  color: var(--text-3);
  transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ai-act-row.is-open .ai-act-row-caret { transform: rotate(90deg); color: var(--text-2); }
.ai-act-row-expand {
  padding: 2px 18px 22px 18px;
}

@media (max-width: 720px) {
  .ai-act-row-head {
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto;
  }
  .ai-act-row-aside {
    grid-column: 1 / -1;
    justify-content: flex-end;
    margin-top: 4px;
  }
}

@media (max-width: 760px) {
  .deal-form,
  .mtg-summary,
  .mtg-detail-grid {
    grid-template-columns: 1fr;
  }
  .mtg-head {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 8px;
  }
  .mtg-when,
  .mtg-title,
  .mtg-attendees,
  .mtg-cta-row {
    grid-column: 1;
    grid-row: auto;
  }
  .mtg-cta-row {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 9px;
    justify-content: space-between;
  }
  .mtg-att-names {
    white-space: normal;
  }
}

/* ── AI Action preview dialog ──────────────────────────────────────────
   Shows the actual draft content (email / LinkedIn / calendar invite) with
   a Send action. Stacks on top of the deal-detail modal. */
.ap-back {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  padding: 24px;
  animation: apFade 140ms ease-out;
}
.ap {
  width: 680px;
  max-width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
  animation: apPop 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes apFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes apPop  { from { transform: translateY(8px) scale(0.985); opacity: 0; } to { transform: none; opacity: 1; } }

.ap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.ap-channel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}
.ap-channel-label {
  white-space: nowrap;
}
.ap-channel-ic {
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
}
.ap-channel-sep { width: 1px; height: 12px; background: var(--border); }
.ap-channel-meta {
  color: var(--text-3);
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.ap-fields {
  display: flex;
  flex-direction: column;
  padding: 8px 16px 4px;
}
.ap-field {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.ap-fields .ap-field:last-child { border-bottom: 0; }
.ap-field-l {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ap-field-v {
  font-size: 13px;
  line-height: 1.35;
  color: var(--text);
  font-weight: 500;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ap-found {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  margin: 8px 16px 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in oklch, var(--accent) 8%, var(--surface-2));
}
.ap-found-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid color-mix(in oklch, var(--accent) 32%, var(--border));
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}
.ap-found-body {
  min-width: 0;
}
.ap-found-kicker {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 3px;
}
.ap-found-name {
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
}
.ap-found-role {
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.35;
  margin-top: 2px;
}
.ap-found p {
  margin: 6px 0 0;
  color: var(--text-3);
  font-size: 11.5px;
  line-height: 1.4;
  text-wrap: pretty;
}

.ap-workflow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px 16px 14px;
}
.ap-workflow-step {
  display: flex;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.ap-workflow-num {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--accent);
  font-weight: 600;
}
.ap-workflow-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ap-workflow-copy b {
  font-size: 11.5px;
  line-height: 1.2;
  color: var(--text);
  overflow-wrap: anywhere;
}
.ap-workflow-copy em {
  font-style: normal;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--text-3);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.ap-body {
  padding: 14px 18px 18px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  background: var(--bg);
  flex: 1;
  min-height: 160px;
}
.ap-body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
  text-wrap: pretty;
}
.ap-body p + p { margin-top: 10px; }
.ap-body br { line-height: 0.5em; }

.ap-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}
.ap-foot-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-3);
}
.ap-foot-meta .icon { color: var(--accent); }
.ap-foot-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ── Evidence drawer ────────────────────────────────────────────────── */
.source-logo {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid color-mix(in oklch, currentColor 28%, transparent);
  background: color-mix(in oklch, currentColor 12%, var(--bg-2));
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0;
}
.source-logo.sm {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  font-size: 9px;
}
.source-logo.salesforce { color: oklch(0.7 0.16 230); }
.source-logo.gong { color: oklch(0.72 0.18 320); }
.source-logo.slack { color: oklch(0.74 0.16 150); }
.source-logo.gmail { color: oklch(0.66 0.18 28); }
.source-logo.calendar { color: oklch(0.7 0.14 260); }
.source-logo.linkedin { color: oklch(0.64 0.15 235); }
.source-logo.outreach { color: oklch(0.72 0.16 55); }
.source-logo.nudge { color: var(--accent); }
.source-logo.is-brand {
  background: var(--bg-2);
  border-color: color-mix(in oklch, currentColor 22%, var(--border));
  padding: 4px;
}
.source-logo.is-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.source-logo.is-brand.sm { padding: 3px; }

.evidence-strip {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  justify-items: start;
}
.evidence-strip.is-compact {
  margin-top: 9px;
}
.evidence-disclosure {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.evidence-disclosure:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
}
.evidence-strip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.evidence-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 210px;
  padding: 5px 8px 5px 5px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.evidence-strip.is-compact .evidence-chip {
  max-width: 180px;
  padding-right: 7px;
}
.evidence-chip:hover {
  border-color: var(--border-strong);
  background: var(--surface-3);
}
.evidence-chip:active {
  transform: translateY(1px);
}
.evidence-chip.is-active {
  border-color: color-mix(in oklch, var(--accent) 42%, var(--border));
  background: color-mix(in oklch, var(--accent) 12%, var(--surface-2));
}
.evidence-chip span {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.evidence-chip b,
.evidence-chip em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evidence-chip b {
  color: var(--text);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.15;
}
.evidence-chip em {
  color: var(--text-3);
  font-style: normal;
  font-size: 10.5px;
  line-height: 1.15;
}
.evidence-inline-proof {
  display: grid;
  gap: 6px;
  max-width: 680px;
  padding: 11px 12px;
  border: 1px solid color-mix(in oklch, var(--accent) 22%, var(--border));
  border-radius: 10px;
  background: color-mix(in oklch, var(--accent) 7%, var(--surface-2));
}
.evidence-inline-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
}
.evidence-inline-proof > b {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
}
.evidence-inline-proof > p {
  margin: 0;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.45;
  text-wrap: pretty;
}

.evidence-back {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(2px);
  animation: apFade 140ms ease-out;
}
.evidence-drawer {
  width: min(460px, calc(100vw - 24px));
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border-left: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2xl);
  outline: none;
  animation: evidenceSlide 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes evidenceSlide {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.evidence-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
}
.evidence-head h2 {
  margin: 7px 0 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.18;
  font-weight: 650;
  letter-spacing: 0;
}
.evidence-head p {
  margin: 7px 0 0;
  color: var(--text-3);
  font-size: 12px;
}
.evidence-confidence {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.evidence-confidence span {
  color: var(--text-2);
  font-size: 12px;
}
.evidence-confidence b {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.evidence-confidence i {
  grid-column: 1 / -1;
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.evidence-confidence i span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}
.evidence-summary {
  padding: 16px 20px 0;
}
.evidence-summary p {
  margin: 8px 0 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  text-wrap: pretty;
}
.evidence-sources {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 18px 20px;
  overflow-y: auto;
}
.evidence-source {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.evidence-source-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.evidence-source-top b {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 650;
}
.evidence-source-top span {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
  white-space: nowrap;
}
.evidence-source strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.3;
}
.evidence-source p {
  margin: 5px 0 0;
  color: var(--text-2);
  font-size: 12.2px;
  line-height: 1.45;
  text-wrap: pretty;
}
.evidence-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}

@media (max-width: 760px) {
  .ap-workflow {
    grid-template-columns: 1fr;
  }
  .evidence-back {
    padding-left: 24px;
  }
  .evidence-source-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}

/* ── Deal detail tabs (Overview · Act with AI · More ▾) ────────────── */
.dd-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.dd-tabs-l {
  display: flex;
  gap: 4px;
}
.dd-tab {
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.dd-tab:hover { color: var(--text-2); }
.dd-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.dd-more {
  position: relative;
  margin-bottom: 4px;
}
.dd-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.dd-more-btn:hover {
  color: var(--text-2);
  background: var(--surface-2);
}
.dd-more-btn.is-active {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
}
.dd-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 12;
  list-style: none;
  margin: 0;
  padding: 6px;
  min-width: 180px;
  background: var(--bg-3);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
}
.dd-more-menu li { display: block; }
.dd-more-item {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
}
.dd-more-item:hover { background: var(--surface-2); color: var(--text); }
.dd-more-item.is-active { color: var(--text); background: var(--surface-2); }

/* ── Deal edit / note forms ─────────────────────────────────────────── */
.deal-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}
.deal-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.deal-field-full { grid-column: 1 / -1; }
.deal-field > span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.deal-select {
  appearance: auto;
  color-scheme: dark;
}
[data-theme="light"] .deal-select { color-scheme: light; }
.deal-textarea {
  min-height: 132px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}
.deal-form-summary {
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 13px;
}
.deal-form-summary span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.deal-form-summary b {
  color: var(--text-3);
  font-weight: 400;
}
.deal-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
.deal-form-hint {
  margin-right: auto;
  color: var(--text-3);
  font-size: 12px;
}

@media (max-width: 760px) {
  .deal-form {
    grid-template-columns: 1fr;
  }
  .deal-form-actions {
    justify-content: flex-start;
  }
  .deal-form-hint {
    flex-basis: 100%;
    margin-right: 0;
  }
}

/* ── Ranked gap list (deal overview) ───────────────────────────────────
   Hierarchy is encoded in marker density and title weight — never color.
   A single rail visually threads the items together, top-down. */
.gap-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gap-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  column-gap: 14px;
  padding: 14px 0;
  position: relative;
  align-items: start;
}
.gap-item + .gap-item { border-top: 1px solid var(--border); }

/* Single rail threading the markers vertically */
.gap-rail {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 6px;
}
.gap-rail::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: -14px;
  left: 50%;
  width: 1.5px;
  background: var(--border);
  transform: translateX(-50%);
  z-index: 0;
}
.gap-item:last-child .gap-rail::before { display: none; }

/* Marker density signals priority. No color, just fill/outline/dot. */
.gap-marker {
  position: relative;
  z-index: 1;
  display: block;
  border-radius: 999px;
  background: var(--bg-2);
  box-shadow: 0 0 0 4px var(--bg-2);
}
.gap-item.tier-1 .gap-marker {
  width: 12px; height: 12px;
  background: var(--text);
}
.gap-item.tier-2 .gap-marker {
  width: 10px; height: 10px;
  background: var(--bg-2);
  border: 1.5px solid var(--text-2);
}
.gap-item.tier-3 .gap-marker {
  width: 6px; height: 6px;
  background: var(--text-3);
}

.gap-body {
  display: flex; flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.gap-kind {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.impact-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--text-2);
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-2);
  white-space: nowrap;
}
.impact-badge.is-primary {
  color: var(--text);
  border-color: color-mix(in oklch, currentColor 35%, var(--border));
  font-weight: 600;
}
.hero-eyebrow .impact-badge { margin-left: 6px; }
.gap-title {
  color: var(--text);
  text-wrap: balance;
  margin-top: 2px;
}
.gap-item.tier-1 .gap-title { font-size: 15px; font-weight: 600; }
.gap-item.tier-2 .gap-title { font-size: 14px; font-weight: 500; }
.gap-item.tier-3 .gap-title { font-size: 13px; font-weight: 500; color: var(--text-2); }
.evidence-quote {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 5px;
  font-size: 11px;
  color: var(--text-3);
}
.evidence-quote .source-logo {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  font-size: 8px;
}
.evidence-quote-time {
  flex: 0 0 auto;
  color: var(--text-3);
  white-space: nowrap;
}
.evidence-quote-text {
  color: var(--text-2);
  font-style: italic;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gap-evidence.evidence-quote { margin-top: 4px; }
.ai-action-evidence.evidence-quote {
  margin-top: 7px;
  max-width: 620px;
}
.gap-cta {
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.gap-cta .btn { white-space: nowrap; }

/* Deal room header: name owns the hierarchy; status and metadata stay quiet. */
.modal-head .modal-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.modal-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}
.modal-title-row .h2 {
  margin: 0;
  min-width: 0;
  line-height: 1.12;
}
.deal-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.005em;
}
.deal-status-badge > span {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
}
.deal-status-badge.tone-warn { color: var(--risk); }
.deal-status-badge.tone-amber { color: var(--accent); }
.deal-status-badge.tone-good,
.deal-status-badge.tone-closed-won { color: var(--good); }
.deal-status-badge.tone-closed-lost { color: var(--closed-lost); }
.meta-chip-row,
.deal-meta-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* Quieter alternative to .deal-meta-badges — single inline mono line of
   metadata, no chip outlines. Used in the deal-room header where the
   status pill has been dropped and we want the title to own the row. */
.deal-meta-line {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meta-chip,
.deal-meta-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: color-mix(in oklch, var(--surface-2) 58%, transparent);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  line-height: 1.2;
  white-space: nowrap;
}
.analytics-detail-row .meta-chip-row,
.closed-analysis-actions > .meta-chip-row {
  overflow: visible;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  white-space: normal;
}

@media (max-width: 640px) {
  .modal-head {
    gap: 10px;
    padding: 16px 16px 10px;
  }
  .meta-chip,
  .deal-meta-badge {
    white-space: normal;
  }
}

/* ============================================================
   DIAGNOSE → PRESCRIBE
   The user must see, at a glance:
     1. What's wrong (specific, numeric where possible)
     2. Why it matters (impact on the deal)
     3. What to do about it (the action, drafted, one tap to fire)
   These three lines live together. Never split across clicks.
   ============================================================ */

/* Symptom chips — the concrete diagnostic markers (e.g. "72h silent",
   "CFO missing", "−33 pts gap"). Stack horizontally, scannable. */
.symptoms {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
}
.sx {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.sx::before {
  content: ""; width: 5px; height: 5px; border-radius: 999px;
  background: var(--text-3);
}
.sx.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.sx.warn::before { background: var(--warn); }
.sx.amber { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.sx.amber::before { background: var(--accent); }
.sx.info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.sx.info::before { background: var(--info); }
.sx.good { background: var(--good-soft); color: var(--good); border-color: transparent; }
.sx.good::before { background: var(--good); }
.sx.closed-won { background: var(--closed-won-soft); color: var(--closed-won); border-color: transparent; }
.sx.closed-won::before { background: var(--closed-won); }
.sx.closed-lost { background: var(--closed-lost-soft); color: var(--closed-lost); border-color: transparent; }
.sx.closed-lost::before { background: var(--closed-lost); }

/* Diagnose row — paired diagnostic statement + drafted prescription */
.diag {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 14px; align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.diag:last-child { border-bottom: 0; }
.diag .marker {
  width: 4px; align-self: stretch;
  background: var(--text-3); border-radius: 999px; min-height: 36px;
}
.diag.warn .marker { background: var(--warn); }
.diag.amber .marker { background: var(--accent); }
.diag.good .marker { background: var(--good); }
.diag.info .marker { background: var(--info); }
.diag-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.diag-what {
  font-size: 14.5px; font-weight: 600; color: var(--text);
  letter-spacing: -0.01em;
}
.diag-why {
  font-size: 13px; color: var(--text-2);
  line-height: 1.45;
}
.diag-fix {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px;
  font-size: 12px; color: var(--text-2);
}
.diag-fix-pre {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--accent);
  margin-right: 2px;
}
.diag-fix-text {
  color: var(--text); font-weight: 500;
}
.diag-fix-meta {
  color: var(--text-3); font-size: 11.5px;
}

/* Status legend — tells the user what red/amber/green mean.
   Sits inline above content so it's discoverable, not hidden. */
.legend {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: 14px;
  padding: 8px 0;
  font-size: 11.5px;
  color: var(--text-3);
}
.legend .item {
  display: inline-flex; align-items: center; gap: 7px;
}
.legend .swatch {
  width: 8px; height: 8px; border-radius: 999px;
  flex-shrink: 0;
}
.legend .swatch.warn { background: var(--warn); }
.legend .swatch.amber { background: var(--accent); }
.legend .swatch.good { background: var(--good); }
.legend .swatch.closed { background: var(--text-2); }
.legend .swatch.closed-won { background: var(--closed-won); }
.legend .swatch.closed-lost { background: var(--closed-lost); }
.legend .label {
  color: var(--text-2);
  font-weight: 500;
}
.legend .desc {
  color: var(--text-3);
}
.legend .sep {
  width: 1px; height: 12px;
  background: var(--border);
}

/* Pipeline deals: pull the diagnosis text inline, beneath the company
   name, so the user knows what's wrong without a click. */
.pipeline-deal-diag {
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.4;
  margin: -2px 0 2px;
  text-wrap: pretty;
}
.pipeline-deal-fix {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500;
  color: var(--accent);
  margin-top: 4px;
}
.pipeline-deal-fix .arrow { font-size: 10px; }
.pipeline-deal[data-status="healthy"] .pipeline-deal-fix { color: var(--good); }
.pipeline-deal[data-status="healthy"] .pipeline-deal-diag { color: var(--text-3); }

/* Hero: a richer "why this matters" line + symptom chips */
.hero-why {
  margin: 4px 0 4px;
  color: var(--text-2);
  font-size: 14px; line-height: 1.55;
  max-width: 640px;
  text-wrap: pretty;
}
.hero-fix-preview {
  margin-top: 6px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-left: 2px solid var(--accent);
  border-radius: 0 10px 10px 0;
  box-shadow: var(--shadow-card);
  max-width: 640px;
}
.hero-fix-pre-l {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.hero-fix-pre-t {
  font-size: 13px; color: var(--text);
  font-weight: 500; margin-bottom: 4px;
}
.hero-fix-pre-b {
  font-size: 12.5px; color: var(--text-2);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ============================================================
   HOME — AI cockpit: dense, layered, live.
   Pure grid. The AI dock sits in its own workspace row so it never
   overlaps page content.
   ============================================================ */
.cockpit {
  padding: 22px 34px 22px;
  display: flex; flex-direction: column; gap: 16px;
}

/* Shared dot eyebrow (used in every band header) */
.cp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-2);
}
.cp-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--text-3);
  flex-shrink: 0;
}
.cp-eyebrow-dot.warn  { background: var(--warn);   animation: cpPulse 2.0s ease-in-out infinite; }
.cp-eyebrow-dot.amber { background: var(--accent); animation: cpPulse 2.4s ease-in-out infinite; }
.cp-eyebrow-dot.good  { background: var(--good);   }
.cp-eyebrow-dot.info  { background: var(--info);   }
.cp-eyebrow-dot.accent { background: var(--accent); }
.cp-eyebrow-dot.closed-won  { background: var(--closed-won); }
.cp-eyebrow-dot.closed-lost { background: var(--closed-lost); }
.cp-eyebrow-sep { width: 1px; height: 10px; background: var(--border); }
@keyframes cpPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, currentColor 24%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in oklch, currentColor 0%, transparent); }
}

/* ── Top row: AgentBanner + Today's agenda paired side-by-side ───── */
.cp-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(380px, 1fr);
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 1080px) {
  .cp-top-row { grid-template-columns: 1fr; }
}

/* Today's agenda — slot widget version. The cp-feed shell already
   supplies card chrome (bg/border/shadow); only the list rows are styled
   here. */
/* Today's agenda — compact meeting briefing rows. WHAT / WHEN / WITH WHOM
   / WHAT TO DO answered in a single tight card per meeting. */
.cp-agenda-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.agenda-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(180px, auto);
  gap: 14px;
  align-items: center;           /* even vertical balance across the 3 columns */
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: color-mix(in oklch, var(--text) 2%, transparent);
  color: var(--text);
  transition: background 140ms ease, border-color 140ms ease;
}
.agenda-card:hover {
  background: color-mix(in oklch, var(--text) 4%, transparent);
  border-color: var(--hairline-strong);
}
.agenda-card.tone-warn  { border-left: 3px solid var(--info); }
.agenda-card.tone-amber { border-left: 3px solid var(--accent); }
.agenda-card.tone-good  { border-left: 3px solid var(--good); }

/* WHEN rail — stretches full card height, content centred vertically so the
   time visually anchors to the company name regardless of body height. */
.agenda-card-when {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 6px;
  background: color-mix(in oklch, var(--text) 3%, transparent);
  border: 1px solid var(--hairline);
  text-align: center;
  min-width: 0;
}
.agenda-card.tone-warn  .agenda-card-when { border-color: color-mix(in oklch, var(--info) 28%, var(--hairline-strong)); background: color-mix(in oklch, var(--info) 6%, transparent); }
.agenda-card.tone-amber .agenda-card-when { border-color: color-mix(in oklch, var(--accent) 30%, var(--hairline-strong)); background: color-mix(in oklch, var(--accent) 6%, transparent); }
.agenda-card-when-day {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  line-height: 1.1;
}
.agenda-card.tone-warn  .agenda-card-when-day { color: var(--info); }
.agenda-card.tone-amber .agenda-card-when-day { color: var(--accent); }
.agenda-card-when-time {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.agenda-card-when-dur {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-top: 1px;
}
.agenda-card-when-tz,
.agenda-card-when-rule {
  display: none;                /* TZ + divider stripped — keep only date / time / dur */
}

/* Right column — meeting info + prep actions, single consistent vertical rhythm. */
.agenda-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  justify-content: center;       /* match WHEN rail's vertical centring */
}
.agenda-card-head {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text);
  transition: opacity 140ms ease;
}
.agenda-card-head:hover { opacity: 0.85; }
.agenda-card-co {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.008em;
  color: var(--text);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agenda-card-meeting {
  font-size: 11.5px;
  color: var(--text-2);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agenda-card-who {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-3);
  min-width: 0;
  line-height: 1.3;
}
.agenda-card-who > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.agenda-card-who em {
  font-style: normal;
  color: var(--text-3);
  opacity: 0.8;
  margin-right: 2px;
}
.agenda-card-who .icon { color: var(--text-3); flex: none; opacity: 0.85; }

/* Prep actions — right column, chips stacked vertically (one per line) so
   they fill the right side and read like a checklist of prep moves. */
.agenda-card-prep,
.agenda-card-prep-label { display: none; }
.agenda-card-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
}
.agenda-card-action {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 7px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.002em;
  color: var(--text-2);
  background: color-mix(in oklch, var(--text) 4%, transparent);
  border: 1px solid var(--hairline-strong);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  line-height: 1.3;
}
.agenda-card-action > span {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.agenda-card-action:hover {
  background: color-mix(in oklch, var(--text) 9%, transparent);
  border-color: var(--text-3);
  color: var(--text);
}
.agenda-card-action .icon { flex: none; opacity: 0.85; }

.agenda-card-action.is-primary.tone-warn {
  color: var(--info);
  background: color-mix(in oklch, var(--info) 10%, transparent);
  border-color: color-mix(in oklch, var(--info) 30%, transparent);
}
.agenda-card-action.is-primary.tone-warn:hover {
  background: color-mix(in oklch, var(--info) 16%, transparent);
  border-color: var(--info);
}
.agenda-card-action.is-primary.tone-amber {
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  border-color: color-mix(in oklch, var(--accent) 35%, transparent);
}
.agenda-card-action.is-primary.tone-amber:hover {
  background: color-mix(in oklch, var(--accent) 20%, transparent);
  border-color: var(--accent);
}

.cp-agenda-empty {
  padding: 14px 0;
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  font-style: italic;
}

@media (max-width: 720px) {
  .agenda-card {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas:
      "when body"
      "actions actions";
    gap: 8px 10px;
    padding: 8px 10px;
  }
  .agenda-card-when    { grid-area: when; }
  .agenda-card-body    { grid-area: body; }
  .agenda-card-actions {
    grid-area: actions;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .agenda-card-action { flex: 0 0 auto; }
  .agenda-card-when-time { font-size: 12px; }
}

/* ── BAND 1 — agent banner ───────────────────────────────────────── */
.cp-banner {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px; align-items: center;
  padding: 10px 14px;
  background: color-mix(in oklch, var(--text) 2.5%, transparent);
  border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
  border-radius: 10px;
  box-shadow: none;
  transition: background 160ms ease;
}
.cp-banner::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 10px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--text) 6%, transparent) 0%,
    transparent 100%
  );
  opacity: 0.7;
}
.cp-banner:hover { background: color-mix(in oklch, var(--text) 4%, transparent); }

/* Merged top banner — weather glyph anchors the left, greeting + verdict
   stack on the right. Glyph replaces the old live-pulse: the sun rotates
   and the rain bounces, so the surface is alive without a separate ping. */
.cp-banner--weather {
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
}
.cp-banner-glyph {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in oklch, var(--text) 4%, transparent);
}
.cp-banner-glyph .forecast-glyph {
  width: 24px;
  height: auto;
}
.cp-banner--weather.weather-sunny .cp-banner-glyph .forecast-glyph {
  animation: weather-sun 6s ease-in-out infinite;
}
.cp-banner--weather.weather-rainy .cp-banner-glyph .forecast-glyph {
  animation: weather-rain 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cp-banner-glyph .forecast-glyph { animation: none; }
}
/* State suffix on the greeting line — same hue logic as the old weather
   widget's headline (warn=red, amber=accent, good inherits). Keeps the
   greeting type-weight but lets urgency colour the diagnostic word. */
.cp-banner-weather-tag {
  color: var(--text-2);
  font-weight: 500;
}
.cp-banner--weather.tone-warn  .cp-banner-weather-tag { color: var(--warn); }
.cp-banner--weather.tone-amber .cp-banner-weather-tag { color: var(--accent); }
@media (max-width: 720px) {
  .cp-banner--weather { grid-template-columns: 32px 1fr; gap: 10px; }
  .cp-banner-glyph { width: 32px; height: 32px; border-radius: 8px; }
  .cp-banner-glyph .forecast-glyph { width: 22px; }
}
.cp-live {
  position: relative;
  width: 12px; height: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cp-live-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--good);
  box-shadow: 0 0 8px var(--good);
}
.cp-live-ring {
  position: absolute; inset: -2px;
  border-radius: 999px;
  border: 1.5px solid var(--good);
  animation: cpRing 1.8s ease-out infinite;
}
@keyframes cpRing {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}
.cp-banner-text {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.cp-banner-greet {
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--text);
}
.cp-banner-status {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-banner-status b { color: var(--text); font-weight: 600; }

.cp-banner-r {
  display: inline-flex; align-items: center; gap: 16px;
  flex-shrink: 0;
}
.cp-stat { display: inline-flex; align-items: baseline; gap: 6px; }
.cp-stat b {
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.cp-stat span { font-size: 11px; color: var(--text-3); }
.cp-stat.good b { color: var(--good); }
.cp-stat-sep { width: 1px; height: 16px; background: var(--border); }

/* ── Card stack: single-column vertical stack. Each cell is a fixed
   drop target — a widget either lives in it or the slot is empty
   (visible placeholder). Drag any widget by its grip handle to
   reorder. Widgets never sit side by side. ── */
.cp-stack {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: 28px;
  align-items: stretch;
}
/* Section delimitation — the brand's three-dot motif sits under every
 * cockpit section in the gap below it. On-brand (echoes the Nudge
 * logo + the agent-state dots), uniformly visible across all sections,
 * still clearly secondary to content. The Unicode bullets are sized
 * via the mono font + letter-spacing so they read as a precise mark,
 * not punctuation. */
.cp-stack > .cp-slot::after {
  content: "· · ·";
  position: absolute;
  bottom: -19px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--text-3);
  opacity: 0.45;
  line-height: 1;
  pointer-events: none;
}
.cp-stack .pipeline-status { margin: 0; }
.cp-slot {
  position: relative;
  display: flex;
  min-height: 0;
  min-width: 0;
  border-radius: 6px;
  overflow: visible;
  transition: background 140ms ease, outline-color 140ms ease;
}
.cp-slot.is-occupied > * { width: 100%; min-width: 0; }
.cp-slot.is-empty {
  border: 1px dashed var(--border);
  background: color-mix(in oklch, var(--surface-2) 40%, transparent);
}
.cp-slot.is-drop-target {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: color-mix(in oklch, var(--accent) 8%, transparent);
}
.cp-slot-empty {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cp-slot-empty .icon { opacity: 0.5; }
.cp-slot.is-drop-target .cp-slot-empty,
.cp-slot.is-drop-target .cp-slot-empty .icon { color: var(--accent); opacity: 1; }
@media (max-width: 980px) {
  .cp-slot.is-empty { display: none; } /* hide empty placeholders on narrow */
}

/* ── Manager View — same cockpit language, team-level buyer proof ── */
/* ── Manager view: 3 manager-moment sections ───────────────────────── */
.manager-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;       /* let nested flex scroll containers shrink to fit */
  height: 100%;        /* explicit fill of the workspace grid row */
  overflow: hidden;
}
/* Manager home — buyer motion across the team. No boxes; lines + shadows. */
.manager-home {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

/* Section 1 — Team buyer progression (mirrors AE .pipeline-status) */
.mgr-status {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 1.05fr) minmax(300px, 0.9fr) minmax(250px, auto);
  align-items: center;
  gap: 24px;
  padding: 28px 24px 32px;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--hairline-strong);
}
.mgr-status::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 4px;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in oklch, var(--text) 5%, transparent) 0%, transparent 100%);
}
.mgr-status-main { min-width: 0; }
.mgr-status-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.mgr-status-kicker .cp-eyebrow-dot {
  box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 18%, transparent);
}
.mgr-status-title {
  margin-top: 8px;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
}
.mgr-status-main p {
  margin: 7px 0 0;
  max-width: 520px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
  text-wrap: pretty;
}
.mgr-status-progress {
  min-width: 0;
  padding: 0 6px;
}
.mgr-status-progress .cp-bsp-track {
  margin: 42px 20px 24px;
}
.mgr-status-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  gap: 14px;
  min-width: 0;
  padding-left: 18px;
  border-left: 1px solid var(--hairline);
}
.mgr-status-metric { min-width: 0; }
.mgr-status-metric span,
.mgr-status-metric em {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.mgr-status-metric strong {
  display: block;
  margin: 5px 0 4px;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mgr-status-metric em {
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--text-2);
}

/* Section 2 — Buyer state composition: a single stacked bar */
.mgr-composition {
  position: relative;
  padding: 28px 24px 32px;
  background: transparent;
  border-bottom: 1px solid var(--hairline-strong);
}
.mgr-composition::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 4px;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in oklch, var(--text) 5%, transparent) 0%, transparent 100%);
}
.mgr-composition-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.mgr-composition-kicker .cp-eyebrow-dot {
  box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 18%, transparent);
}
.mgr-composition-head h3 {
  margin: 8px 0 18px;
  font-size: 22px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text);
}
.mgr-composition-bar {
  position: relative;
  display: flex;
  height: 16px;
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in oklch, var(--text) 8%, transparent);
  box-shadow: inset 0 1px 1px color-mix(in oklch, var(--text) 18%, transparent),
              0 0 0 1px var(--hairline);
}
.mgr-composition-bar .seg {
  display: block;
  height: 100%;
  transition: width 200ms ease;
}
.mgr-composition-bar .seg-good { background: var(--good); }
.mgr-composition-bar .seg-amber { background: var(--accent); }
.mgr-composition-bar .seg-warn { background: var(--warn); }
.mgr-composition-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.mgr-composition-legend .leg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mgr-composition-legend .leg::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--text-3);
}
.mgr-composition-legend .leg-good::before { background: var(--good); }
.mgr-composition-legend .leg-amber::before { background: var(--accent); }
.mgr-composition-legend .leg-warn::before { background: var(--warn); }
.mgr-composition-legend .leg b {
  color: var(--text);
  font-weight: 600;
  margin-right: 4px;
}

/* Section 3 — Buyer motion by AE: rows with progression bars, hairlines */
.mgr-aes {
  position: relative;
  padding: 28px 24px 12px;
  background: transparent;
}
.mgr-aes-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.mgr-aes-kicker .cp-eyebrow-dot {
  box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 18%, transparent);
}
.mgr-aes-head h3 {
  margin: 8px 0 18px;
  font-size: 22px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text);
}
.mgr-aes-list {
  display: flex;
  flex-direction: column;
}
.mgr-ae-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 0.9fr) minmax(280px, 1.4fr);
  gap: 24px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
}
.mgr-ae-row:first-child { border-top: 0; }
.mgr-ae-id {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mgr-ae-id b {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mgr-ae-id span {
  color: var(--text-3);
  font-size: 12px;
}
.mgr-ae-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.mgr-ae-meta b {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-right: 4px;
  font-family: var(--font-sans);
}
.mgr-ae-progress {
  min-width: 0;
  padding: 0 4px;
}
.mgr-ae-progress .cp-bsp-track {
  margin: 28px 14px 16px;
}
.manager-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border: 0;
  border-bottom: 1px solid var(--section-border);
  background: var(--section-bg);
  box-shadow: var(--section-shadow);
}
.manager-topline-l {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
}
.manager-topline-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text);
}
.manager-topline-subtitle {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
  max-width: 68ch;
}
.manager-topline-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.manager-topline-meta span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.manager-topline-meta b {
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-family: var(--font-sans);
}

/* Section frame — hairline divider + crisp tight gradient (no fuzz) */
.manager-section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px 24px 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid var(--hairline-strong);
}
.manager-section::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 4px;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in oklch, var(--text) 5%, transparent) 0%, transparent 100%);
}
.manager-section:last-child { border-bottom: 0; }
.manager-section:last-child::after { display: none; }
.manager-section.moment-truth,
.manager-section.moment-review,
.manager-section.moment-coaching { border-top: 0; }

/* Section header — sharper eyebrow + bolder question */
.manager-moment-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 14px;
  margin-bottom: 4px;
}
.manager-moment-eyebrow {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.manager-moment-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--text-3);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--text-3) 22%, transparent);
}
.moment-truth .manager-moment-eyebrow::before {
  background: var(--warn);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--warn) 22%, transparent);
}
.moment-review .manager-moment-eyebrow::before {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent);
}
.moment-coaching .manager-moment-eyebrow::before {
  background: var(--good);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--good) 22%, transparent);
}
.manager-moment-index {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text);
  margin-right: 2px;
  font-variant-numeric: tabular-nums;
}
.manager-moment-question {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text);
  max-width: 820px;
  text-wrap: balance;
}
.manager-moment-head .chip {
  align-self: center;
}

/* KPI row — hairline-separated, larger numerals */
.manager-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  padding: 8px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.manager-kpi {
  min-width: 0;
  padding: 10px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--hairline);
}
.manager-kpi:first-child {
  padding-left: 4px;
  border-left: 0;
}
.manager-kpi-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.manager-kpi-value {
  display: block;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.028em;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.manager-kpi.is-primary .manager-kpi-value { color: var(--warn); }
.manager-kpi.tone-good .manager-kpi-value { color: var(--good); }
.manager-kpi.tone-warn .manager-kpi-value { color: var(--warn); }
.manager-kpi.tone-amber .manager-kpi-value { color: var(--accent); }

/* Risky-deal table — sharper header, accent bar on selected row */
.manager-deal-list {
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  background: transparent;
  border-top: 1px solid var(--hairline-strong);
}
.manager-deal-list-head,
.manager-deal-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(110px, 0.7fr) 96px 132px minmax(180px, 1.2fr) 168px;
  gap: 12px;
  align-items: center;
}
.manager-deal-list-head {
  padding: 11px 6px 11px 8px;
  border-bottom: 1px solid var(--hairline-strong);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.manager-deal-row {
  position: relative;
  padding: 13px 6px 13px 8px;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  color: var(--text-2);
  text-align: left;
  font-size: 13px;
  transition: background 140ms ease;
}
.manager-deal-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: transparent;
  transition: background 140ms ease;
}
.manager-deal-row:last-child { border-bottom: 0; }
.manager-deal-row:hover {
  background: color-mix(in oklch, var(--text) 3%, transparent);
}
.manager-deal-row.is-selected {
  background: color-mix(in oklch, var(--accent) 8%, transparent);
}
.manager-deal-row.is-selected::before {
  background: var(--accent);
}
.manager-deal-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.manager-deal-title b {
  color: var(--text);
  font-size: 13.5px;
}
.manager-deal-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-3);
  font-size: 12px;
}
.manager-gap-cell {
  min-width: 0;
}
.manager-gap-cell b {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
}
.manager-deal-row .mono {
  font-family: var(--font-mono);
  color: var(--text);
}
.manager-proof {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  width: max-content;
  box-shadow: inset 0 0 0 1px currentColor;
}
.manager-proof.tone-good {
  background: color-mix(in oklch, var(--good) 14%, transparent);
  color: var(--good);
}
.manager-proof.tone-amber {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent);
}
.manager-proof.tone-warn {
  background: color-mix(in oklch, var(--warn) 14%, transparent);
  color: var(--warn);
}

/* ── Coaching queue ─────────────────────────────────────────────────────
   Manager's "what should I actually do" surface — team patterns up top,
   prioritised intervention queue below. Reuses the warn / amber / good
   tone triad from the AE side so the colour language stays consistent. */
.coach-screen {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 4px 0 32px;
}

/* KPI strip — mirrors .manager-kpi-grid, 4-up */
.coach-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.coach-kpi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 22px;
  border-left: 1px solid var(--hairline);
}
.coach-kpi:first-child { padding-left: 4px; border-left: 0; }
.coach-kpi-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.coach-kpi-value {
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.coach-kpi-value em {
  font-style: normal;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-3);
}
.coach-kpi.tone-warn .coach-kpi-value { color: var(--warn); }
.coach-kpi.tone-amber .coach-kpi-value { color: var(--accent); }
.coach-kpi.tone-good .coach-kpi-value { color: var(--good); }

/* Block = a section (team patterns / queue) */
.coach-block { display: flex; flex-direction: column; gap: 16px; }
.coach-block-head { display: flex; flex-direction: column; gap: 4px; }

/* Two-level section header — state dot inline with the title, helper
 * paragraph below. Shared shape across the manager dashboard (coach
 * block) and the forecast model sections (Deals · Config · Backtest)
 * so the title hierarchy reads the same as the AE cockpit. */
.coach-block-title-row,
.section-head-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.coach-block-title-row .coach-eyebrow-dot,
.section-head-row .cp-eyebrow-dot { flex-shrink: 0; }
.coach-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.coach-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--text-3);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--text-3) 22%, transparent);
}
.coach-eyebrow-dot.warn {
  background: var(--warn);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--warn) 22%, transparent);
}
.coach-eyebrow-dot.amber {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent);
}
.coach-block-title {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text);
}
/* Forecast-side h2 matches the same headline family as the manager
 * coach block + cockpit titles. */
.section-head-row .h2 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text);
  margin: 0;
}
/* Manager + forecast helpers — single-line typewriter on section hover.
 * Same mechanic as cp-feed-helper: max-width 0 → 100% in steps(). */
.coach-block-sub,
.fcal-deals-head > div > p.muted,
.fcal-config-head > p.muted,
.fcal-bt-hero-head > div > p.muted {
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  max-height: 0;
  opacity: 0;
  margin: 0;
  transition:
    max-height 200ms ease,
    opacity 140ms ease,
    margin-top 200ms ease;
}
.coach-block:hover .coach-block-sub,
.coach-block:focus-within .coach-block-sub,
.fcal-deals-head:hover > div > p.muted,
.fcal-deals-head:focus-within > div > p.muted,
.fcal-config-head:hover > p.muted,
.fcal-config-head:focus-within > p.muted,
.fcal-bt-hero-head:hover > div > p.muted,
.fcal-bt-hero-head:focus-within > div > p.muted {
  max-height: 28px;
  opacity: 1;
  margin-top: 6px;
  animation: nudgeTypewriter 1.4s steps(60, end) 160ms forwards;
}
@media (prefers-reduced-motion: reduce) {
  .coach-block:hover .coach-block-sub,
  .fcal-deals-head:hover > div > p.muted,
  .fcal-config-head:hover > p.muted,
  .fcal-bt-hero-head:hover > div > p.muted {
    animation: none;
    max-width: 100%;
  }
}
.coach-block-sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-3);
}
.coach-block-scope {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-3);
}

/* shared mini-label */
.coach-mini-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.coach-mini-label.warn { color: var(--warn); }
.coach-mini-label.good { color: var(--good); }

.coach-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.coach-avatar.sm { width: 18px; height: 18px; font-size: 8.5px; }

/* ── Pattern lens ──
   A thin rep selector that focuses the queue. Built as a control strip — a
   segmented control plus one inline detail line — intentionally NOT a card
   grid, so it never reads as a twin of the queue section below it. */
.coach-lens {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 2px 0 18px;
  border-bottom: 1px solid var(--hairline);
}
.coach-lens-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.coach-lens-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.coach-lens-segs {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  background: var(--surface-2);
}
.coach-lens-seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.coach-lens-seg:hover { color: var(--text); }
.coach-lens-seg.is-on {
  background: var(--bg-3);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
.coach-lens-seg em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--warn);
}

/* inline detail — the active rep's pattern, or a team roll-up */
.coach-lens-detail { min-height: 19px; }
.coach-lens-detail p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}
.coach-lens-detail b { color: var(--text); font-weight: 600; }
.coach-lens-quote { color: var(--text); }
.coach-lens-coach { color: var(--text-3); }
.coach-lens-coach::before { content: "  ·  "; color: var(--text-3); }
.coach-lens-coach b { color: var(--accent); font-weight: 600; }
p.coach-lens-detail-all { color: var(--text-3); }

/* ── Coaching queue — rotative horizontal carousel ── */
.coach-carousel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.coach-stage-wrap {
  position: relative;
  padding: 0 48px;
}
.coach-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--text-2);
  cursor: pointer;
  z-index: 4;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.coach-nav.prev { left: 0; }
.coach-nav.next { right: 0; }
.coach-nav:hover {
  background: var(--surface-3);
  color: var(--text);
  border-color: var(--text-3);
}

.coach-stage {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  transition: height 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
  touch-action: pan-y;
  cursor: grab;
}
.coach-stage:active { cursor: grabbing; }
.coach-stage:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 14px;
}
.coach-track {
  position: relative;
  height: 100%;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.coach-stage.is-dragging .coach-track,
.coach-stage.is-dragging .coach-slide { transition: none; }

.coach-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: min(560px, 76%);
  margin: 0 auto;
  transition: transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 320ms ease;
  will-change: transform, opacity;
}
.coach-slide[data-pos="active"] {
  transform: translateX(calc(var(--off) * (100% + 20px))) scale(1);
  opacity: 1;
  z-index: 3;
}
.coach-slide[data-pos="peek"] {
  transform: translateX(calc(var(--off) * (100% + 20px))) scale(0.9);
  opacity: 0.38;
  z-index: 2;
  pointer-events: none;
}
.coach-slide[data-pos="hidden"] {
  transform: translateX(calc(var(--off) * (100% + 20px))) scale(0.84);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

/* rail — pips + position counter */
.coach-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.coach-pips {
  display: flex;
  align-items: center;
  gap: 7px;
}
.coach-pip {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--hairline-strong);
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease, width 220ms ease;
}
.coach-pip:hover { transform: scale(1.25); }
.coach-pip.is-on {
  width: 22px;
  background: var(--text-2);
}
.coach-pip.is-on[data-tone="warn"] { background: var(--warn); }
.coach-pip.is-on[data-tone="amber"] { background: var(--accent); }
.coach-pip.is-on[data-tone="good"] { background: var(--good); }
.coach-pip.is-coached { background: color-mix(in oklch, var(--good) 55%, transparent); }
.coach-pip.is-on.is-coached { background: var(--good); }
.coach-counter {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .coach-stage-wrap { padding: 0 38px; }
  .coach-slide { width: 86%; }
}

/* ── Coaching queue card — calm by default, prep on demand ── */
.coach-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px 18px 26px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--bg-2);
  transition: opacity 160ms ease, border-color 140ms ease, background 140ms ease;
}
/* Active slide in the carousel — body is the click target for the primary
   action (open deal room / Forecast Room). Inner buttons stop propagation. */
.coach-card.is-clickable { cursor: pointer; }
.coach-card.is-clickable:hover {
  background-color: color-mix(in oklch, var(--text) 4%, var(--bg-2));
  border-color: var(--hairline-strong);
}
/* Tone-keyed hover — the rail's color whispers through the whole surface
   on hover. Very low alpha so it reads as a temperature shift, not a
   wash. The directional gradient (resting state, set via background-image)
   layers on top so the left edge still has the strongest tint. */
.coach-card.is-clickable.tone-warn:hover  { background-color: color-mix(in oklch, var(--warn) 4%, var(--bg-2)); }
.coach-card.is-clickable.tone-amber:hover { background-color: color-mix(in oklch, var(--accent) 4%, var(--bg-2)); }
.coach-card.is-clickable.tone-good:hover  { background-color: color-mix(in oklch, var(--good) 4%, var(--bg-2)); }
.coach-card.is-clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.coach-card::before {
  content: "";
  position: absolute;
  left: 0; top: 18px; bottom: 18px;
  width: 3px;
  border-radius: 999px;
  background: var(--text-3);
}
.coach-card.tone-warn::before { background: var(--warn); }
.coach-card.tone-amber::before { background: var(--accent); }
.coach-card.tone-good::before { background: var(--good); }

/* Tone-keyed surface wash — the left rail bleeds into the body so urgency
   reads as surface temperature, not decoration. Warn cards feel hotter,
   good cards stay essentially calm. Gradient sits on the base bg so the
   :hover background-color bump still works on top. Scoped to the
   home-page priority deal (coach-card) only — the deal-room defense
   section is flush content, no card surface. */
.coach-card.tone-warn {
  background-image: linear-gradient(90deg, color-mix(in oklch, var(--warn) 7%, transparent) 0%, transparent 18%);
  border-color: color-mix(in oklch, var(--warn) 12%, var(--hairline));
}
.coach-card.tone-amber {
  background-image: linear-gradient(90deg, color-mix(in oklch, var(--accent) 7%, transparent) 0%, transparent 16%);
  border-color: color-mix(in oklch, var(--accent) 10%, var(--hairline));
}
.coach-card.tone-good {
  background-image: linear-gradient(90deg, color-mix(in oklch, var(--good) 5%, transparent) 0%, transparent 12%);
  border-color: color-mix(in oklch, var(--good) 6%, var(--hairline));
}
.coach-card.is-coached { opacity: 0.5; }
.coach-card.is-coached .coach-cta,
.coach-card.is-coached .coach-trigger-line,
.coach-card.is-coached .coach-prep { display: none; }

/* HEADER — identity left, meta right, single compact row.
   Quiet on purpose so the hero (action) below dominates. */
.coach-card-head {
  display: flex;
  align-items: center;
  gap: 11px;
}
.coach-sev {
  width: 8px; height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--text-3);
}
.coach-sev.tone-warn { background: var(--warn); }
.coach-sev.tone-amber { background: var(--accent); }
.coach-sev.tone-good { background: var(--good); }
.coach-card-id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  margin-right: auto;
}
.coach-card-id b {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.008em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coach-card-id span {
  color: var(--text-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.coach-card-meta-r {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.coach-card-meta-r b {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
/* gap chip — tone-tinted micro-pill carrying the alignment delta in the
   header so the gap is visible at a glance without expanding prep. */
.coach-gap-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}
.coach-gap-chip.tone-warn  { background: color-mix(in oklch, var(--warn)   13%, transparent); color: var(--warn); }
.coach-gap-chip.tone-amber { background: color-mix(in oklch, var(--accent) 13%, transparent); color: var(--accent); }
.coach-gap-chip.tone-good  { background: color-mix(in oklch, var(--good)   13%, transparent); color: var(--good); }

/* HERO CTA — flat solid surface + layered drop shadow for depth. No
   inset highlight, no hairline contour: the shadow alone lifts it off
   the card. Hover deepens the spread + adds a soft tint fill + slides
   the arrow right. */
.coach-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 13px 17px;
  border: 0;
  border-radius: 12px;
  box-sizing: border-box;
  /* Primary CTA — warm off-white base. The hover fill rides left-to-right
     in the same direction as the dots cascade + arrow drift, so the whole
     button reads as one motion: "the action moves forward". Fill color is
     derived from the CTA's own ink token mixed into the base, so it gets
     darker-in-dark / lighter-in-light automatically and has real contrast
     against the resting surface (--cta-strong is only ~1 step different
     from --cta, so used as a fill it was invisible). The slight gradient
     across the fill itself gives the leading edge a "wave crest" feel. */
  background-color: var(--cta);
  background-image: linear-gradient(
    90deg,
    color-mix(in oklch, var(--cta-ink) 22%, var(--cta)) 0%,
    color-mix(in oklch, var(--cta-ink) 36%, var(--cta)) 60%,
    color-mix(in oklch, var(--cta-ink) 48%, var(--cta)) 100%
  );
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0 0;
  color: var(--cta-ink);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.008em;
  /* Flat solid surface — the inset top highlight (the 1px white contour
     line) was reading as a visible outline on every action button; the
     drop shadow alone now carries depth. */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.20),
    0 8px 22px rgba(0, 0, 0, 0.28);
  transition: background-size 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
              background-color 140ms ease,
              color 140ms ease,
              box-shadow 220ms ease,
              transform 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.coach-cta:hover {
  background-size: 100% 100%;
  transform: translateY(-1px);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.26),
    0 14px 30px rgba(0, 0, 0, 0.36);
}
.coach-cta:active {
  background-size: 100% 100%;
  transform: translateY(0);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(0, 0, 0, 0.12);
}
.coach-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.coach-cta:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
  box-shadow: none;
}
/* Lighter shadow on white surfaces — black shadows on light bg can read
   too heavy compared to the same alpha on dark. */
[data-theme="light"] .coach-cta {
  box-shadow:
    0 1px 2px rgba(15, 15, 20, 0.05),
    0 4px 12px rgba(15, 15, 20, 0.07);
}
[data-theme="light"] .coach-cta:hover {
  box-shadow:
    0 2px 4px rgba(15, 15, 20, 0.07),
    0 8px 20px rgba(15, 15, 20, 0.10);
}
[data-theme="light"] .coach-cta:active {
  box-shadow:
    inset 0 1px 2px rgba(15, 15, 20, 0.08),
    0 1px 0 rgba(15, 15, 20, 0.06);
}

/* Severity-weighted lift — urgent cards push their CTA further off the
   surface (deeper, longer ambient shadow + slightly stronger hover lift);
   verified-silence cards sit nearly flush. Pure pixel hierarchy, no hue
   change — the CTA still reads as the warm-off-white primary. Scopes
   to in-card CTAs only (`.coach-card.tone-*`) so the modal confirm and
   forecast-room ask keep the baseline shadow. Amber/default is the
   baseline — no override needed. */
.coach-card.tone-warn .coach-cta {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.24),
    0 16px 34px rgba(0, 0, 0, 0.42);
}
.coach-card.tone-warn .coach-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.30),
    0 22px 42px rgba(0, 0, 0, 0.50);
}
.coach-card.tone-good .coach-cta {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.14),
    0 4px 12px rgba(0, 0, 0, 0.18);
}
.coach-card.tone-good .coach-cta:hover {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.16),
    0 8px 18px rgba(0, 0, 0, 0.24);
}
[data-theme="light"] .coach-card.tone-warn .coach-cta {
  box-shadow:
    0 2px 4px rgba(15, 15, 20, 0.07),
    0 12px 28px rgba(15, 15, 20, 0.13);
}
[data-theme="light"] .coach-card.tone-warn .coach-cta:hover {
  box-shadow:
    0 3px 6px rgba(15, 15, 20, 0.09),
    0 18px 38px rgba(15, 15, 20, 0.16);
}
[data-theme="light"] .coach-card.tone-good .coach-cta {
  box-shadow:
    0 1px 2px rgba(15, 15, 20, 0.04),
    0 2px 6px rgba(15, 15, 20, 0.05);
}
[data-theme="light"] .coach-card.tone-good .coach-cta:hover {
  box-shadow:
    0 1px 3px rgba(15, 15, 20, 0.05),
    0 4px 10px rgba(15, 15, 20, 0.07);
}

.coach-cta-text {
  flex: 1;
  min-width: 0;
  text-wrap: pretty;
}
.coach-cta-channel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--cta-ink) 8%, transparent);
  color: color-mix(in oklch, var(--cta-ink) 68%, transparent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
.coach-cta-channel .icon {
  flex: none;
  opacity: 0.85;
}
.coach-cta-arrow {
  flex-shrink: 0;
  color: color-mix(in oklch, var(--cta-ink) 65%, transparent);
  transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
              color 140ms ease;
}
.coach-cta:hover .coach-cta-arrow {
  transform: translateX(3px);
  color: var(--cta-ink);
}
/* Arrow track — three leader dots that cascade into the arrow on hover.
   Says "this is the path forward" without a word. Dots and arrow share
   the same flex line so the track size is stable; on hover the dots fade
   + drift right with a staggered delay, the arrow drifts forward 3px
   (same as before), and the net read is "dots absorbed by arrow". */
.coach-cta-track {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.coach-cta-dot {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--cta-ink) 45%, transparent);
  transition: opacity 200ms ease,
              transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.coach-cta:hover .coach-cta-dot:nth-child(1) {
  transform: translateX(6px);
  opacity: 0;
  transition-delay: 0ms;
}
.coach-cta:hover .coach-cta-dot:nth-child(2) {
  transform: translateX(4px);
  opacity: 0;
  transition-delay: 60ms;
}
.coach-cta:hover .coach-cta-dot:nth-child(3) {
  transform: translateX(2px);
  opacity: 0;
  transition-delay: 120ms;
}
.coach-cta:disabled .coach-cta-dot {
  opacity: 0.3;
  transform: none;
}
/* Inline pill (channel hint) embedded in the CTA. Subtle tint so it
   reads as metadata on the white button surface, not a competing chip. */
.coach-cta-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--cta-ink) 10%, transparent);
  color: color-mix(in oklch, var(--cta-ink) 75%, transparent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* TRIGGER LINE — small severity-tinted summary of what's wrong. Sits below
   the hero as one-glance context: "Critical risk ignored · 9d". */
.coach-trigger-line {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-3);
  font-weight: 500;
}
.coach-trigger-dot {
  width: 5px; height: 5px;
  border-radius: 999px;
  flex-shrink: 0;
  background: currentColor;
}
.coach-trigger-line.tone-warn  { color: var(--warn); }
.coach-trigger-line.tone-amber { color: var(--accent); }
.coach-trigger-line.tone-good  { color: var(--good); }

/* (.coach-prep-reality kept available for the AE Priority card, which
   still uses it as the lead paragraph in its Deal-context prep.) */
.coach-prep-reality {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  letter-spacing: -0.006em;
}

/* coaching prep — collapsible disclosure */
.coach-prep { display: flex; flex-direction: column; }
.coach-prep-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 140ms ease;
}
.coach-prep-toggle:hover { color: var(--text); }
.coach-prep-caret {
  color: var(--text-3);
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.coach-prep.is-open .coach-prep-caret { transform: rotate(90deg); }
.coach-prep-toggle em {
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-3);
}
.coach-prep-toggle em::before { content: "· "; }
/* grid-rows 0fr → 1fr animates the disclosure to its natural height */
.coach-prep-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.coach-prep.is-open .coach-prep-body { grid-template-rows: 1fr; }
/* Prep collapse — sections separated by hairlines so each one has its own
   zone instead of reading as a flat wall. */
.coach-prep-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.coach-prep.is-open .coach-prep-inner { padding-top: 6px; }
.coach-prep-inner > * + * {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.coach-prep-block { display: flex; flex-direction: column; gap: 8px; }
.coach-prep-context {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
}

/* Default coaching-question list — supporting weight (smallest in prep). */
.coach-q-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.coach-q-list li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}
.coach-q-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 9px;
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--accent);
}

/* HERO question block — the manager's script, at the bottom of the prep
   so it reads as the terminal action. Bigger type, weighted, prominent
   tick markers. The eye lands here last. */
.coach-prep-block--hero .coach-q-list { gap: 10px; }
.coach-prep-block--hero .coach-q-list li {
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.008em;
}
.coach-prep-block--hero .coach-q-list li::before {
  content: "";
  left: 4px;
  top: 12px;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
}
.coach-evidence-line {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
}
/* Signal chips — used by AE priority card to render diag.symptoms inline
   in the prep collapse. Tones match the AE side: warn / amber / good / info. */
.coach-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.coach-chip {
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 500;
}
.coach-chip.tone-warn  { background: color-mix(in oklch, var(--warn)   13%, transparent); color: var(--warn);   }
.coach-chip.tone-amber { background: color-mix(in oklch, var(--accent) 13%, transparent); color: var(--accent); }
.coach-chip.tone-good  { background: color-mix(in oklch, var(--good)   13%, transparent); color: var(--good);   }
.coach-chip.tone-info  { background: color-mix(in oklch, var(--info)   13%, transparent); color: var(--info);   }

/* ── Buying committee block ──
   Named stakeholders + state. Replaces the vague methodology score / signal
   chips with a concrete row per role. Lives inside the coach-prep collapse
   on coaching + AE priority cards. */
.coach-committee-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 8px;
  overflow: hidden;
  background: var(--hairline);
}
.coach-committee-row {
  display: grid;
  grid-template-columns: 14px 92px minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  background: color-mix(in oklch, var(--bg-2) 96%, transparent);
  font-size: 12px;
  line-height: 1.35;
  transition: background 140ms ease;
}
.coach-committee-row:hover { background: var(--bg-3); }
.coach-committee-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--text-3);
  justify-self: center;
}
.coach-committee-dot.tone-warn  { background: var(--warn); }
.coach-committee-dot.tone-amber { background: var(--accent); }
.coach-committee-dot.tone-good  { background: var(--good); }
.coach-committee-dot.tone-info  { background: var(--info); }
.coach-committee-role {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.coach-committee-name {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coach-committee-row.tone-warn  .coach-committee-name { color: var(--warn); }
.coach-committee-row.tone-amber .coach-committee-name { color: var(--accent); }
.coach-committee-signal {
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .coach-committee-row {
    grid-template-columns: 14px 1fr;
    grid-template-rows: auto auto;
    row-gap: 2px;
  }
  .coach-committee-role { grid-row: 1; grid-column: 2; }
  .coach-committee-name { grid-row: 1; grid-column: 2; justify-self: end; }
  .coach-committee-signal { grid-row: 2; grid-column: 2; }
  .coach-committee-dot { grid-row: 1 / span 2; }
}

/* (.coach-move-channel removed — channel hint now embedded in the CTA
   as .coach-cta-chip.) */

.coach-prep-intervention {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--hairline-strong);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
}

/* footer — just the two actions */
.coach-card-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.coach-foot-lead { margin-right: auto; }
/* Secondary CTA — faint neutral tint, no border. Quieter than the
   outlined primary but still scans as a button. */
.coach-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in oklch, var(--text) 8%, transparent);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.coach-btn:hover { background: color-mix(in oklch, var(--text) 14%, transparent); }

/* Ghost — text-only with hover tint. Quietest tier; for navigation
   like "Open deal" that's not the main move. */
.coach-btn.ghost {
  background: transparent;
  color: var(--text-2);
}
.coach-btn.ghost:hover {
  background: color-mix(in oklch, var(--text) 6%, transparent);
  color: var(--text);
}

/* Completed state — green tint; "done" reads as success. */
.coach-btn.is-done {
  background: color-mix(in oklch, var(--good) 16%, transparent);
  color: var(--good);
}
.coach-btn.is-done:hover { background: color-mix(in oklch, var(--good) 22%, transparent); }

.coach-empty {
  padding: 28px;
  border: 1px dashed var(--hairline-strong);
  border-radius: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
}

/* ── Action preview modal ──
   Pops before any CTA actually fires. Shows the drafted message, the
   challenge to log, or the deal move — always with evidence backing it.
   Cancel returns to the card; Confirm fires payload.onConfirm. */
.action-preview-back {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 250;
  animation: action-preview-fade-in 200ms ease;
}
[data-theme="light"] .action-preview-back {
  background: rgba(15, 15, 20, 0.32);
}
.action-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: min(560px, 100%);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 26px 28px 22px;
  background: var(--bg-2);
  border: 1px solid color-mix(in oklch, var(--text) 12%, transparent);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 20px 60px rgba(0, 0, 0, 0.50),
    0 6px 20px rgba(0, 0, 0, 0.32);
  animation: action-preview-rise 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-theme="light"] .action-preview {
  box-shadow:
    0 2px 4px rgba(15, 15, 20, 0.06),
    0 18px 50px rgba(15, 15, 20, 0.12),
    0 6px 16px rgba(15, 15, 20, 0.06);
}
@keyframes action-preview-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes action-preview-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.action-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.action-preview-head-text { min-width: 0; }
.action-preview-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.action-preview-title {
  margin: 5px 0 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--text);
  text-wrap: balance;
}
.action-preview-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 140ms ease, color 140ms ease;
}
.action-preview-close:hover {
  background: color-mix(in oklch, var(--text) 8%, transparent);
  color: var(--text);
}

.action-preview-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 7px;
  margin: 0;
  padding: 13px 14px;
  border-radius: 10px;
  background: color-mix(in oklch, var(--text) 5%, transparent);
  font-size: 12.5px;
}
.action-preview-meta dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  align-self: center;
}
.action-preview-meta dd {
  margin: 0;
  color: var(--text);
  font-weight: 500;
}

.action-preview-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 16px 14px;
  border: 1px solid color-mix(in oklch, var(--text) 9%, transparent);
  border-radius: 12px;
  background: color-mix(in oklch, var(--text) 3%, transparent);
}
.action-preview-mini-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 5px;
}
.action-preview-subject p {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.action-preview-text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  letter-spacing: -0.003em;
}

/* Expected impact — hierarchical: firmness as hero, likelihood as a
   visualized bar, gap close as a warn→good before/after flow. Calm
   green-tinted panel; no heavy chrome competing with the modal body. */
.action-preview-impact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.action-preview-impact-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 20px 16px;
  border: 1px solid color-mix(in oklch, var(--good) 32%, var(--hairline));
  border-radius: 12px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--good) 7%, var(--bg-2)) 0%,
      color-mix(in oklch, var(--good) 3%, var(--bg-2)) 100%
    );
}
/* Hero firmness — the dollars on the table */
.action-preview-impact-hero {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.action-preview-impact-hero b {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--good);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.action-preview-impact-hero em {
  font-style: normal;
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: -0.003em;
}

/* Rows under the hero — likelihood, gap close */
.action-preview-impact-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in oklch, var(--good) 18%, var(--hairline));
}
.action-preview-impact-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.action-preview-impact-row-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
}
.action-preview-impact-row-label {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-right: auto;
}
.action-preview-impact-row-head b {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.action-preview-impact-row-head em {
  font-style: normal;
  color: var(--text-3);
  font-size: 12px;
}

/* Probability bar */
.action-preview-prob {
  height: 5px;
  background: color-mix(in oklch, var(--text) 8%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
.action-preview-prob > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--good) 60%, transparent) 0%,
    var(--good) 100%
  );
  transition: width 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Gap flow — warn (before) → good (after), with arrow icon between. */
.action-preview-gap-flow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
}
.action-preview-gap-flow b { font-variant-numeric: tabular-nums; }
.action-preview-gap-flow .from { color: var(--warn); }
.action-preview-gap-flow .to { color: var(--good); }
.action-preview-gap-flow svg { color: var(--text-3); }

.action-preview-evidence ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.action-preview-evidence li {
  position: relative;
  padding-left: 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.action-preview-evidence li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--text-3);
}
.action-preview-evidence li b {
  color: var(--text);
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.action-preview-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}
.action-preview-confirm { width: auto; flex: 0 1 auto; padding-left: 18px; padding-right: 18px; }

@media (max-width: 560px) {
  .action-preview {
    padding: 20px 18px 18px;
    gap: 14px;
  }
  .action-preview-title { font-size: 17px; }
}

/* ── Addy trace chip ──
   Tiny provenance badge on any Addy-originated card. Sits between the
   trigger line and the prep disclosure. Click → small popover anchored
   to the chip, showing signal → variable → action → time. */
.addy-trace-wrap {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
}
.addy-trace-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px 4px 7px;
  border: 1px solid color-mix(in oklch, var(--text) 12%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.002em;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.addy-trace-chip:hover,
.addy-trace-chip.is-open {
  background: color-mix(in oklch, var(--text) 5%, transparent);
  border-color: color-mix(in oklch, var(--text) 22%, transparent);
  color: var(--text-2);
}
.addy-trace-chip-mark {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.addy-trace-chip-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--accent);
  animation: addy-mark-breath 2.6s ease-in-out infinite;
}
.addy-trace-chip-dot:nth-child(1) { animation-delay: 0s;     }
.addy-trace-chip-dot:nth-child(2) { animation-delay: 0.87s;  }
.addy-trace-chip-dot:nth-child(3) { animation-delay: 1.73s;  }
.addy-trace-chip-text em {
  font-style: normal;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}

/* Popover — anchored bottom-left of the chip */
.addy-trace-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(320px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklch, var(--text) 14%, transparent);
  background: color-mix(in oklch, var(--bg-2) 96%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 24px rgba(0, 0, 0, 0.32),
    0 22px 40px rgba(0, 0, 0, 0.22);
  z-index: 60;
  animation: addy-trace-pop-in 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transform-origin: top left;
}
[data-theme="light"] .addy-trace-pop {
  background: color-mix(in oklch, var(--bg-2) 99%, transparent);
  border-color: color-mix(in oklch, var(--text) 10%, transparent);
  box-shadow:
    0 2px 4px rgba(15, 15, 20, 0.06),
    0 12px 24px rgba(15, 15, 20, 0.10),
    0 22px 40px rgba(15, 15, 20, 0.06);
}
@keyframes addy-trace-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.addy-trace-pop-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.addy-trace-pop-mark {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.addy-trace-pop-mark > span {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent);
}
.addy-trace-pop-head b {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.addy-trace-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.addy-trace-steps li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid color-mix(in oklch, var(--text) 6%, transparent);
}
.addy-trace-steps li:first-child { padding-top: 6px; border-top: 0; }
.addy-trace-steps li:last-child  { padding-bottom: 2px; }
.addy-trace-step-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.addy-trace-steps li p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
  letter-spacing: -0.003em;
}

/* ── Addy spotlight ──
   Summoned by clicking the sidebar dots or ⌘K. Anchored top-left so it
   reads as "growing from her eyes." Shows recent whispers + ask input. */
.addy-spotlight-back {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 230;
  animation: addy-spotlight-back-in 200ms ease;
}
[data-theme="light"] .addy-spotlight-back {
  background: rgba(15, 15, 20, 0.18);
}
@keyframes addy-spotlight-back-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.addy-spotlight {
  position: fixed;
  top: 70px;
  left: 78px;
  width: min(440px, calc(100vw - 110px));
  max-height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 14px;
  border: 1px solid color-mix(in oklch, var(--text) 14%, transparent);
  background: color-mix(in oklch, var(--bg-2) 96%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 38px rgba(0, 0, 0, 0.42),
    0 26px 60px rgba(0, 0, 0, 0.30);
  overflow: hidden;
  transform-origin: top left;
  animation: addy-spotlight-in 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-theme="light"] .addy-spotlight {
  background: color-mix(in oklch, var(--bg-2) 99%, transparent);
  border-color: color-mix(in oklch, var(--text) 10%, transparent);
  box-shadow:
    0 2px 4px rgba(15, 15, 20, 0.06),
    0 18px 46px rgba(15, 15, 20, 0.16),
    0 26px 60px rgba(15, 15, 20, 0.08);
}
@keyframes addy-spotlight-in {
  from { opacity: 0; transform: scale(0.92) translate(-6px, -6px); }
  to   { opacity: 1; transform: scale(1) translate(0, 0); }
}

.addy-spotlight-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px 16px;
  border-bottom: 1px solid color-mix(in oklch, var(--text) 8%, transparent);
}
.addy-spotlight-mark {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.addy-spotlight-mark-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  animation: addy-mark-breath 2.6s ease-in-out infinite;
}
.addy-spotlight-mark-dot:nth-child(1) { animation-delay: 0s;    }
.addy-spotlight-mark-dot:nth-child(2) { animation-delay: 0.87s; }
.addy-spotlight-mark-dot:nth-child(3) { animation-delay: 1.73s; }
.addy-spotlight-head-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.addy-spotlight-head-text b {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.addy-spotlight-head-text span {
  color: var(--text-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.addy-spotlight-head-text span b {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}
.addy-spotlight-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.addy-spotlight-close:hover {
  background: color-mix(in oklch, var(--text) 8%, transparent);
  color: var(--text);
}

/* Notices — scrollable list */
.addy-spotlight-notices {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  overflow-y: auto;
  max-height: 360px;
}
.addy-spotlight-notice {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 12px 16px;
  border-bottom: 1px solid color-mix(in oklch, var(--text) 6%, transparent);
}
.addy-spotlight-notice:last-child { border-bottom: 0; }
.addy-spotlight-notice-dot {
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--text-3);
  justify-self: center;
}
.addy-spotlight-notice.variant-warn  .addy-spotlight-notice-dot { background: var(--warn); }
.addy-spotlight-notice.variant-amber .addy-spotlight-notice-dot { background: var(--accent); }
.addy-spotlight-notice.variant-good  .addy-spotlight-notice-dot { background: var(--good); }
.addy-spotlight-notice-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.addy-spotlight-notice-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  letter-spacing: -0.004em;
}
.addy-spotlight-notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.addy-spotlight-notice-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  white-space: nowrap;
  align-self: start;
  padding-top: 2px;
}

.addy-spotlight-empty {
  margin: 0;
  padding: 22px 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
  text-align: center;
}

/* Chat thread — shown in place of the notices list once the user starts
   talking. Same visual scale as a small conversation; Addy's bubbles get
   a soft accent tint so her replies feel like a presence, not a tooltip. */
.addy-spotlight-thread {
  list-style: none;
  margin: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
}
.addy-spot-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  animation: addy-spot-msg-in 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes addy-spot-msg-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.addy-spot-msg.role-user { justify-content: flex-end; }
.addy-spot-msg p {
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  max-width: 80%;
}
.addy-spot-msg.role-user p {
  background: color-mix(in oklch, var(--text) 8%, transparent);
  color: var(--text);
  border-bottom-right-radius: 4px;
}
.addy-spot-msg.role-addy p {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.addy-spot-msg-avatar {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink, #1A0F02);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.addy-spot-typing {
  display: inline-flex !important;
  gap: 4px;
  padding: 12px 14px !important;
  min-height: 16px;
}
.addy-spot-typing span {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--text-3);
  animation: addy-spot-typing 1s ease-in-out infinite;
}
.addy-spot-typing span:nth-child(2) { animation-delay: 0.15s; }
.addy-spot-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes addy-spot-typing {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}

/* Ask input — last row, anchored at the bottom of the panel */
.addy-spotlight-ask {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid color-mix(in oklch, var(--text) 8%, transparent);
  background: color-mix(in oklch, var(--text) 3%, transparent);
}
.addy-spotlight-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  letter-spacing: -0.004em;
  padding: 6px 2px;
}
.addy-spotlight-input::placeholder { color: var(--text-3); }
.addy-spotlight-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--font-mono);
}
.addy-spotlight-hint kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in oklch, var(--text) 8%, transparent);
  border: 1px solid color-mix(in oklch, var(--text) 14%, transparent);
  color: var(--text-2);
}

@media (prefers-reduced-motion: reduce) {
  .addy-spotlight, .addy-spotlight-back { animation: none; }
  .addy-spotlight-mark-dot { animation: none; }
}

/* ── Addy whisper ──
   Addy's voice in context. Floats bottom-right of the viewport, sits
   above the AIDock area. Identity ties back to the sidebar logo dots
   via the mini ·· mark in the header. Variants tint a 3px left stripe. */
.addy-whisper {
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 220;
  width: min(340px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 14px 18px;
  border-radius: 14px;
  border: 1px solid color-mix(in oklch, var(--text) 14%, transparent);
  background: color-mix(in oklch, var(--bg-2) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 30px rgba(0, 0, 0, 0.38),
    0 22px 50px rgba(0, 0, 0, 0.30);
  animation: addy-whisper-in 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transform-origin: bottom right;
}
[data-theme="light"] .addy-whisper {
  background: color-mix(in oklch, var(--bg-2) 98%, transparent);
  border-color: color-mix(in oklch, var(--text) 10%, transparent);
  box-shadow:
    0 1px 2px rgba(15, 15, 20, 0.06),
    0 12px 28px rgba(15, 15, 20, 0.14),
    0 22px 50px rgba(15, 15, 20, 0.08);
}
@keyframes addy-whisper-in {
  from { opacity: 0; transform: translate(8px, 12px) scale(0.98); }
  to   { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* Left-edge tone stripe for variants (default = none). */
.addy-whisper::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 999px;
  background: transparent;
}
.addy-whisper.variant-warn::before  { background: var(--warn); }
.addy-whisper.variant-amber::before { background: var(--accent); }
.addy-whisper.variant-good::before  { background: var(--good); }

/* Header — Addy mark + name + close */
.addy-whisper-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.addy-whisper-mark {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 1px;
}
.addy-whisper-mark-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  animation: addy-mark-breath 2.6s ease-in-out infinite;
}
.addy-whisper-mark-dot:nth-child(1) { animation-delay: 0s;    }
.addy-whisper-mark-dot:nth-child(2) { animation-delay: 0.87s; }
.addy-whisper-mark-dot:nth-child(3) { animation-delay: 1.73s; }
@keyframes addy-mark-breath {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.78); }
}
.addy-whisper-name {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.addy-whisper-close {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.addy-whisper-close:hover {
  background: color-mix(in oklch, var(--text) 8%, transparent);
  color: var(--text);
}

/* The voice */
.addy-whisper-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  letter-spacing: -0.006em;
  text-wrap: pretty;
}

/* Actions — primary is brand-greyed (matches the CTAs), rest are ghost. */
.addy-whisper-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
}
.addy-whisper-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.addy-whisper-btn.is-primary {
  background: var(--brand);
  color: var(--brand-ink);
}
.addy-whisper-btn.is-primary:hover { background: var(--brand-strong); }
.addy-whisper-btn.is-ghost {
  background: transparent;
  color: var(--text-2);
  border-color: color-mix(in oklch, var(--text) 14%, transparent);
}
.addy-whisper-btn.is-ghost:hover {
  background: color-mix(in oklch, var(--text) 6%, transparent);
  color: var(--text);
  border-color: color-mix(in oklch, var(--text) 28%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .addy-whisper { animation: none; }
  .addy-whisper-mark-dot { animation: none; }
}

/* ── Toast ──
   Global confirmation slot. Lives bottom-center over the workspace, animates
   in/out, auto-dismisses ~3.5s. Fired by any CTA via window.fireToast(msg). */
.nudge-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 14px;
  border-radius: 12px;
  background: color-mix(in oklch, var(--bg-3) 92%, transparent);
  color: var(--text);
  border: 1px solid color-mix(in oklch, var(--text) 14%, transparent);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.004em;
  white-space: nowrap;
  max-width: calc(100vw - 48px);
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 28px rgba(0, 0, 0, 0.36),
    0 18px 42px rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 200;
  pointer-events: none;
  animation: nudge-toast-in 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-theme="light"] .nudge-toast {
  background: color-mix(in oklch, var(--bg-2) 96%, transparent);
  border-color: color-mix(in oklch, var(--text) 10%, transparent);
  box-shadow:
    0 1px 2px rgba(15, 15, 20, 0.06),
    0 8px 22px rgba(15, 15, 20, 0.10),
    0 18px 34px rgba(15, 15, 20, 0.06);
}
.nudge-toast-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--good);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--good) 22%, transparent);
  flex-shrink: 0;
}
.nudge-toast-msg {
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes nudge-toast-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.nudge-toast {
  /* set the static transform that animation lands on, so the element
     stays centered after the keyframes finish. */
  transform: translateX(-50%);
}

@media (max-width: 720px) {
  .coach-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* Section 2: deal-pick strip — tab-style, sharper active state */
.deal-pick-strip {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  padding-bottom: 0;
  border-bottom: 1px solid var(--hairline-strong);
}
.deal-pick {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 2.5px solid transparent;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  margin-bottom: -1px;
}
.deal-pick b {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.deal-pick em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.deal-pick:hover {
  background: color-mix(in oklch, var(--text) 3%, transparent);
}
.deal-pick.is-active {
  background: color-mix(in oklch, var(--accent) 8%, transparent);
  border-bottom-color: var(--accent);
}
.deal-pick.is-active b { color: var(--accent); }

/* Review pack — no outer box; sections separated by hairlines */
.review-pack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0;
  border: 0;
  background: transparent;
}
.review-pack-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline-strong);
}
.review-pack-head h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text);
}
.review-pack-meta { margin-top: 8px; }

/* CRM stage → Nudge reality compare strip — flat, vertical hairline separators */
.review-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr 1.4fr;
  align-items: center;
  gap: 18px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.review-compare > svg,
.review-compare > i {
  color: var(--text-3);
}
.review-compare-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}
.review-compare-cell + .review-compare-cell,
.review-compare-cell + .review-compare-gap,
.review-compare-gap {
  padding-left: 18px;
  border-left: 1px solid var(--hairline);
}
.review-compare-cell span,
.review-compare-gap span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.review-compare-cell b,
.review-compare-gap b {
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.review-compare-cell.tone-warn b { color: var(--warn); }
.review-compare-gap span { color: var(--warn); }

/* Evidence available / missing — 2 cols, vertical hairline, no boxes */
.review-evidence {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.review-evidence-col {
  padding: 4px 18px;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.review-evidence-col:first-child { padding-left: 0; }
.review-evidence-col + .review-evidence-col {
  border-left: 1px solid var(--hairline);
}
.review-evidence-col span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.review-evidence-col.tone-good span { color: var(--good); }
.review-evidence-col.tone-warn span { color: var(--warn); }
.review-evidence-col em {
  font-style: normal;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.45;
}
.review-evidence-col em.muted { color: var(--text-3); }

/* Evidence-available header with verified count */
.review-evidence-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.review-evidence-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--good);
}

/* Clickable + verifiable evidence rows */
.evidence-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--hairline);
  transition: background 140ms ease;
}
.evidence-row:last-of-type { border-bottom: 0; }
.evidence-row:hover {
  background: color-mix(in oklch, var(--text) 4%, transparent);
}
.evidence-row.is-verified {
  background: color-mix(in oklch, var(--good) 8%, transparent);
}
.evidence-verify {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.4;
  width: 100%;
}
.evidence-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1px solid var(--text-3);
  color: transparent;
  flex-shrink: 0;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.evidence-row.is-verified .evidence-check {
  background: var(--good);
  border-color: var(--good);
  color: var(--bg);
}
.evidence-row.is-verified .evidence-label {
  color: var(--good);
}
.evidence-label {
  flex: 1;
  text-wrap: pretty;
}
.evidence-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.evidence-view-btn:hover {
  background: color-mix(in oklch, var(--text) 6%, transparent);
  color: var(--text);
}

/* Coaching questions — flat hover rows, no borders */
.review-coaching {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.review-coaching > span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.review-coaching-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.review-coaching-list button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease;
}
.review-coaching-list button:last-child { border-bottom: 0; }
.review-coaching-list button:hover {
  background: color-mix(in oklch, var(--text) 4%, transparent);
  padding-left: 8px;
  padding-right: 8px;
}
.review-coaching-list button > svg,
.review-coaching-list button > i {
  color: var(--text-3);
  flex-shrink: 0;
}

/* Section 2 single-CTA row */
.review-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.btn.lg.primary {
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid color-mix(in oklch, var(--accent) 60%, transparent);
  background: var(--accent);
  color: var(--accent-ink, #1a0d05);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.btn.sm.primary {
  border: 1px solid color-mix(in oklch, var(--accent) 50%, transparent);
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent);
}

/* Section 3: Coaching & stage truth — line/row layout */
.coaching-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 0;
  align-items: start;
  border-top: 1px solid var(--hairline);
}
.coaching-col {
  display: flex;
  flex-direction: column;
  padding: 16px 0;
}
.coaching-col + .coaching-col {
  padding-left: 24px;
  border-left: 1px solid var(--hairline);
}
.coaching-col:first-child {
  padding-right: 24px;
}
.coaching-col-title {
  margin: 0 0 14px;
  font-size: 10.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 600;
}

/* AE pattern + stage exception rows — hairline separators, no card boxes */
.ae-pattern-card,
.stage-exception-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
  transition: background 140ms ease;
}
.ae-pattern-card:last-child,
.stage-exception-card:last-child { border-bottom: 0; }
.ae-pattern-card:hover,
.stage-exception-card:hover {
  background: color-mix(in oklch, var(--text) 4%, transparent);
}
.ae-pattern-head,
.stage-exception-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ae-pattern-head b,
.stage-exception-card-head b {
  display: block;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.012em;
}
.ae-pattern-head span:not(.chip),
.stage-exception-card-head > div > span:not(.meta-chip-row) {
  display: block;
  margin-top: 2px;
  color: var(--text-3);
  font-size: 12px;
}
.ae-pattern-line {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.45;
  text-wrap: pretty;
}
.ae-pattern-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.ae-pattern-examples button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 11.5px;
  cursor: pointer;
  border-bottom: 1px dashed var(--hairline);
  transition: color 140ms ease, border-color 140ms ease;
}
.ae-pattern-examples button:hover {
  color: var(--accent);
  border-bottom-color: color-mix(in oklch, var(--accent) 50%, transparent);
}
.ae-pattern-actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

/* "Missing proof" — flat row with mono label + bold value, no box */
.stage-exception-gap {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.stage-exception-gap span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warn);
  flex-shrink: 0;
}
.stage-exception-gap b {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
}

/* Segmented control — hairline frame, sharper active state */
.stage-segmented {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 0;
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
  border-radius: 0;
  background: transparent;
}
.stage-segmented .seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid var(--hairline);
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.stage-segmented .seg:last-child { border-right: 0; }
.stage-segmented .seg:hover {
  background: color-mix(in oklch, var(--text) 4%, transparent);
  color: var(--text);
}
.stage-segmented .seg.is-active {
  color: var(--text);
  background: color-mix(in oklch, var(--text) 6%, transparent);
  box-shadow: inset 0 -2.5px 0 0 var(--text);
}
.stage-segmented .seg.seg-warn.is-active {
  color: var(--warn);
  background: color-mix(in oklch, var(--warn) 10%, transparent);
  box-shadow: inset 0 -2.5px 0 0 var(--warn);
}
.stage-segmented .seg.seg-accent.is-active {
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  box-shadow: inset 0 -2.5px 0 0 var(--accent);
}

.coaching-empty {
  padding: 20px 0;
  border-top: 1px dashed var(--hairline);
  border-bottom: 1px dashed var(--hairline);
  color: var(--text-3);
  font-size: 12.5px;
  text-align: center;
}

.manager-toast {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 90;
  padding: 10px 13px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  box-shadow: var(--shadow-lg);
  font-size: 12.5px;
  font-weight: 600;
}

/* Drag-and-drop affordance shared by swappable cards */
.cp-card { position: relative; transition: opacity 140ms ease, outline-color 120ms ease; }
.cp-card.is-dragging { opacity: 0.45; }
.cp-card.is-drag-over {
  outline: 2px dashed color-mix(in oklch, var(--accent) 70%, transparent);
  outline-offset: 4px;
}
.cp-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  margin-right: -2px;
  color: var(--text-3);
  cursor: grab;
  border-radius: 4px;
}
.cp-drag-handle:hover { color: var(--text-2); background: var(--surface-2); }
.cp-card.is-dragging .cp-drag-handle { cursor: grabbing; }

/* Priority deal — flat row, no card surface. Hover indicates actionability. */
/* Priority deal — rotative deck shell. The card inside is a coach-card,
   the same recipe used by the manager-side coaching + theatre carousels.
   The shell carries the eyebrow + slot drag-handle; the carousel below
   holds the deck of coach-cards. */
.cp-priority-shell {
  position: relative;
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 28px 28px 26px;
  background:
    radial-gradient(120% 80% at 0% 0%,
      color-mix(in oklch, var(--text) 5%, transparent) 0%,
      transparent 55%),
    color-mix(in oklch, var(--text) 3%, transparent);
  border: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 12px 32px rgba(0, 0, 0, 0.18);
}

[data-theme="light"] .cp-priority-shell {
  box-shadow:
    0 1px 2px rgba(15, 15, 20, 0.04),
    0 8px 24px rgba(15, 15, 20, 0.06);
}
.cp-priority-shell::after { content: none; }
.cp-priority-shell-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  cursor: grab;
}
.cp-priority-shell-head:active { cursor: grabbing; }

/* Carousel inside the priority shell — same slide width as the coaching
   queue (560px max) so the cards read as the same component. */
.cp-priority-carousel { gap: 14px; }
.cp-priority-carousel .coach-stage { cursor: grab; }
.cp-priority-carousel .coach-stage:active { cursor: grabbing; }

.priority-split {
  display: grid;
  grid-template-columns: minmax(220px, 0.88fr) minmax(0, 1.42fr);
  gap: 16px;
  align-items: stretch;
  min-width: 0;
}

/* Priority queue — a plain vertical list. The active card carries a left
   accent stripe + brighter fill so it reads as the open chapter; the
   others are quiet and clickable. */
.priority-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding-right: 2px;
}

.priority-stack-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: color-mix(in oklch, var(--text) 2%, transparent);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.priority-stack-card:hover {
  background: color-mix(in oklch, var(--text) 6%, transparent);
  border-color: var(--hairline-strong);
}

.priority-stack-card.is-selected {
  background: color-mix(in oklch, var(--text) 8%, transparent);
  border-color: color-mix(in oklch, currentColor 26%, var(--hairline-strong));
  padding-left: 16px;
}

.priority-stack-card.is-selected::after {
  content: "";
  position: absolute;
  inset: 8px auto 8px 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: currentColor;
}

.priority-stack-card.tone-warn { color: var(--risk); }
.priority-stack-card.tone-amber { color: var(--accent); }
.priority-stack-card.tone-good { color: var(--good); }

.priority-stack-sev {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 2px color-mix(in oklch, currentColor 12%, transparent);
}

/* Riskiest at-risk deal — pulsing halo so the eye lands on it first. */
.priority-stack-sev.is-pulsing {
  animation: priority-orb-pulse 1.6s ease-in-out infinite;
}
@keyframes priority-orb-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px color-mix(in oklch, currentColor 14%, transparent),
                0 0 0 6px color-mix(in oklch, currentColor 0%, transparent);
  }
  50% {
    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 22%, transparent),
                0 0 0 8px color-mix(in oklch, currentColor 8%, transparent);
  }
}

.priority-stack-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.priority-stack-name {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.008em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.priority-stack-meta,
.priority-stack-trigger {
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.priority-stack-meta { color: var(--text-3); }
.priority-stack-trigger { color: currentColor; opacity: 0.95; }

.priority-stack-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 0;
}

.priority-stack-cats {
  justify-content: flex-end;
  margin-top: 0;
}

.priority-stack-value {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.priority-detail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 360px;
  padding: 22px 22px 20px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background:
    linear-gradient(90deg, color-mix(in oklch, currentColor 5%, transparent), transparent 30%),
    color-mix(in oklch, var(--text) 4%, transparent);
  color: var(--text-2);
  will-change: transform, opacity;
  transform-origin: 50% 100%;
  animation: priority-detail-enter 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 4px 14px rgba(0, 0, 0, 0.10);
}

[data-theme="light"] .priority-detail {
  box-shadow:
    0 1px 2px rgba(15, 15, 20, 0.03),
    0 4px 12px rgba(15, 15, 20, 0.04);
}

@keyframes priority-detail-enter {
  from { transform: translateX(32px) rotate(2deg); opacity: 0; }
  to   { transform: translateX(0) rotate(0); opacity: 1; }
}

/* Tinder-style swipe out — when the user advances (next arrow or CTA
   confirm), the current detail card swipes off to the right; the next
   deal mounts behind it with the entrance animation. */
.priority-detail.is-swiping-out {
  animation: priority-detail-exit 280ms cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
  pointer-events: none;
}

@keyframes priority-detail-exit {
  from { transform: translateX(0) rotate(0); opacity: 1; }
  to   { transform: translateX(118%) rotate(8deg); opacity: 0; }
}

.priority-detail.tone-warn { color: var(--risk); }
.priority-detail.tone-amber { color: var(--accent); }
.priority-detail.tone-good { color: var(--good); }

/* Empty-state priority detail — the daily-read panel shown on the right
   when no deal is selected. Same outer card as priority-detail (so the
   layout doesn't shift when a deal is picked), with shape-of-the-day
   stat tiles + a single "Start here" recommendation. */
.priority-detail-empty .priority-detail-title h3 {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.012em;
}
.priority-empty-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.priority-empty-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: color-mix(in oklch, var(--text) 3%, transparent);
  min-width: 0;
}
.priority-empty-stat.tone-warn {
  border-color: color-mix(in oklch, var(--risk) 22%, var(--hairline));
  background: color-mix(in oklch, var(--risk) 4%, transparent);
}
.priority-empty-stat b {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.priority-empty-stat.tone-warn b { color: var(--risk); }
.priority-empty-stat b small {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  margin-left: 2px;
  font-variant-numeric: normal;
}
.priority-empty-stat em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-top: 4px;
}
.priority-empty-rec {
  padding-top: 4px;
}
.priority-empty-rec h4 {
  color: var(--text);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}
.priority-empty-rec p {
  margin: 4px 0 12px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
  max-width: 56ch;
}
.priority-empty-hint {
  margin: 6px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--hairline);
  color: var(--text-3);
  font-size: 11.5px;
  font-style: italic;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.priority-empty-hint .icon { opacity: 0.7; }

.priority-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}

.priority-detail-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.priority-detail-kicker {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

.priority-detail-title h3 {
  margin: 0;
  color: var(--text);
  font-size: 19px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.014em;
}

.priority-detail-title p {
  margin: 0;
  color: var(--text-3);
  font-size: 11.5px;
}

.priority-detail-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.priority-detail-cats { margin-top: 0; }

.priority-detail-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 13px;
  min-width: 0;
}

.priority-detail-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.priority-detail-block h4 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.008em;
}

.priority-detail-block p {
  margin: 0;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.5;
  text-wrap: pretty;
}

.priority-detail-diagnosis {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}

.priority-detail .cp-bsp-track {
  margin-top: 38px;
  margin-bottom: 22px;
}

.priority-detail-cta {
  margin-top: 2px;
}

/* "+X more actions" — subtle link beneath the primary CTA. Surfaces when
   the deal has additional recommended next moves; routes to the deal
   room's Next-move tab so the rep can see and fire any of them. */
.priority-detail-more-actions {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 4px 2px;
  margin: 0;
  align-self: flex-end;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--text-3);
  cursor: pointer;
  transition: color 140ms ease;
}
.priority-detail-more-actions span { color: var(--text-2); }
.priority-detail-more-actions em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  text-transform: uppercase;
}
.priority-detail-more-actions:hover { color: var(--text-2); }
.priority-detail-more-actions:hover span { color: var(--text); }
.priority-detail-more-actions .icon {
  align-self: center;
  transition: transform 140ms ease;
}
.priority-detail-more-actions:hover .icon {
  transform: translateX(2px);
}

/* ───────── Settings module — pill tabs + cards ─────────
   Page title + subtitle are owned by the workspace header. The module
   itself is just tabs + content; cards hold their own title/subtitle
   (template pattern). */
.settings-module {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 40px 48px;
  color: var(--text);
}

/* Pill tabs — accent-tinted active state with a soft rim works reliably
   in both light and dark themes. The bar itself gets a clear border so
   it never blends into the page. */
.settings-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 24px;
  padding: 5px;
  border-radius: 14px;
  background: color-mix(in oklch, var(--text) 5%, transparent);
  border: 1px solid var(--hairline);
  overflow-x: auto;
  scrollbar-width: none;
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
  white-space: nowrap;
}
.settings-tab:hover {
  color: var(--text);
  background: color-mix(in oklch, var(--text) 4%, transparent);
}
.settings-tab.is-active {
  background: var(--cta);
  color: var(--cta-ink);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.12);
  /* Override the platform text-shadow rule — on the high-contrast CTA
     fill the depth shadow would muddy the label. */
  text-shadow: none;
}
.settings-tab.is-active:hover {
  background: var(--cta);
  filter: brightness(1.06);
}

.settings-content {
  flex: 1;
  min-width: 0;
}
.settings-page {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
.settings-page.two-col {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}

/* Card — title + subtitle inside the card, subtle border + tiny shadow. */
.settings-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.settings-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 0;
}
.settings-card-title-block { min-width: 0; }
.settings-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--text);
  text-shadow: 0 1px 0 color-mix(in oklch, var(--bg) 50%, transparent);
}

/* Eyebrow — small mono uppercase tag above the card title for character.
   Tone-neutral by default; status pills can override. */
.settings-card-eyebrow {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--text) 6%, transparent);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.settings-side-card .settings-card-eyebrow {
  background: color-mix(in oklch, var(--good) 12%, transparent);
  color: var(--good);
}
.settings-card-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--good);
}
.settings-card-head p {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
}
.settings-card-action-slot {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
}
.settings-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: transparent;
  border: 0;
  color: var(--text-3);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.settings-card-action:hover {
  background: color-mix(in oklch, var(--text) 5%, transparent);
  color: var(--text);
}
.settings-card-meta {
  color: var(--text-3);
  font-size: 12.5px;
}
.settings-card-body {
  padding: 18px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.settings-card-footer {
  padding: 14px 24px 18px;
  border-top: 1px solid var(--hairline);
}

/* Profile photo row — flat (no nested card) */
.settings-photo-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 4px;
}
.settings-photo-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.settings-photo-copy em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

/* Avatar */
.settings-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--accent) 22%, var(--surface-2));
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  flex: none;
}
.settings-avatar.lg {
  width: 72px;
  height: 72px;
  font-size: 26px;
}

/* Form field with pill input */
.settings-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.settings-field > span {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}
.settings-input-shell {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  border-radius: 12px;
  background: color-mix(in oklch, var(--text) 4%, transparent);
  border: 1px solid transparent;
  transition: border-color 120ms ease, background 120ms ease;
}
.settings-input-shell:focus-within {
  border-color: color-mix(in oklch, var(--accent) 35%, var(--border));
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
}
.settings-input-shell input,
.settings-input-shell select {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  outline: none;
}
.settings-input-shell.has-adornment input {
  padding-left: 4px;
}
.settings-input-adornment {
  padding-left: 14px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.settings-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* Textarea uses the same pill-fill look */
.settings-textarea-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-textarea-field > span {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.settings-textarea-field textarea {
  width: 100%;
  min-height: 100px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: color-mix(in oklch, var(--text) 4%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}
.settings-textarea-field textarea:focus {
  border-color: color-mix(in oklch, var(--accent) 35%, var(--border));
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
}

/* Phone field — flag + dial in one cell, number in the other */
.settings-phone-grid {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 10px;
}
.settings-phone-country select {
  padding-left: 42px;
  appearance: none;
}
.settings-phone-country::after {
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: 11px;
  pointer-events: none;
}
.settings-phone-flag {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
}
.settings-phone-helper {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

/* Yearly Sales Objective callout — soft green tinted box */
.settings-target-callout {
  padding: 18px 20px;
  border-radius: 14px;
  background: color-mix(in oklch, var(--good) 14%, transparent);
  text-align: left;
}
.settings-target-callout b {
  display: block;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-shadow: 0 1px 0 color-mix(in oklch, var(--good) 24%, transparent);
}
.settings-target-callout em {
  display: block;
  margin-top: 2px;
  color: var(--text-3);
  font-size: 12.5px;
  font-style: normal;
}

/* Side-card CTA — full-width neutral button (Update Goal) */
.settings-side-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  background: color-mix(in oklch, var(--text) 4%, transparent);
  border: 0;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.settings-side-cta:hover {
  background: color-mix(in oklch, var(--text) 8%, transparent);
  color: var(--text);
}

/* Inline label (for choice grids etc) */
.settings-inline-label {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

/* Buttons */
.settings-primary-btn,
.settings-secondary-btn,
.settings-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.settings-primary-btn {
  color: var(--cta-ink);
  background: var(--cta);
}
.settings-secondary-btn {
  color: var(--text-2);
  background: color-mix(in oklch, var(--text) 6%, transparent);
}
.settings-secondary-btn:hover {
  color: var(--text);
  background: color-mix(in oklch, var(--text) 10%, transparent);
}
.settings-secondary-btn.sm {
  min-height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

.settings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  color: var(--text-3);
  font-size: 12px;
}

/* Row lists inside a card — divider rows, no nested boxes */
.settings-rule-list,
.settings-integration-list,
.settings-role-list,
.settings-studio-play-list {
  display: flex;
  flex-direction: column;
}
.settings-rule-list span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.settings-rule-list span:first-child { padding-top: 0; }
.settings-rule-list span:last-child { border-bottom: 0; padding-bottom: 0; }
.settings-integration,
.settings-role-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
}
.settings-integration:first-child,
.settings-role-row:first-child { padding-top: 0; }
.settings-integration:last-child,
.settings-role-row:last-child { border-bottom: 0; padding-bottom: 0; }
.settings-role-row { grid-template-columns: 30px minmax(0, 1fr) auto auto; }
.settings-integration-icon,
.settings-role-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in oklch, var(--text) 6%, transparent);
  color: var(--text-2);
}
.settings-integration.tone-good .settings-integration-icon { color: var(--good); }
.settings-integration.tone-amber .settings-integration-icon { color: var(--accent); }

/* Shared inner-row typography */
.settings-integration b,
.settings-role-row b,
.settings-rule-list b,
.settings-toggle-copy b,
.settings-choice b,
.settings-compliance-box b,
.settings-studio-brief b {
  display: block;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 650;
}
.settings-integration em,
.settings-role-row em,
.settings-rule-list em,
.settings-toggle-copy em,
.settings-choice em {
  display: block;
  margin-top: 2px;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.4;
}

.settings-integration-sync {
  color: var(--text-3);
  font-size: 11.5px;
  white-space: nowrap;
}
.settings-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.settings-status.tone-good {
  color: var(--good);
  background: color-mix(in oklch, var(--good) 14%, transparent);
}
.settings-status.tone-amber {
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 14%, transparent);
}
.settings-status.tone-muted {
  color: var(--text-3);
  background: color-mix(in oklch, var(--text) 6%, transparent);
}

/* Autonomy choice — bordered rows, no nested fill */
.settings-choice-grid {
  display: grid;
  gap: 10px;
}
.settings-choice {
  display: block;
  padding: 14px 16px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid var(--hairline);
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.settings-choice:hover { background: color-mix(in oklch, var(--text) 3%, transparent); }
.settings-choice.is-active {
  border-color: color-mix(in oklch, var(--accent) 55%, var(--border));
  background: color-mix(in oklch, var(--accent) 8%, transparent);
}

/* Toggle row */
.settings-toggle-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.settings-toggle-row:first-child { padding-top: 0; }
.settings-toggle-row:last-child { border-bottom: 0; padding-bottom: 0; }
.settings-toggle-copy { flex: 1; min-width: 0; }
.settings-toggle-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.settings-switch {
  width: 42px;
  height: 24px;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--text) 8%, transparent);
  border: 1px solid var(--hairline);
  transition: background 140ms ease;
}
.settings-switch span {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--text-3);
  transition: transform 160ms ease, background 140ms ease;
}
.settings-switch.is-on {
  background: color-mix(in oklch, var(--accent) 28%, var(--surface-3));
}
.settings-switch.is-on span {
  transform: translateX(18px);
  background: var(--accent);
}

/* Range slider row */
.settings-range {
  display: grid;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.settings-range:first-child { padding-top: 0; }
.settings-range:last-child { border-bottom: 0; padding-bottom: 0; }
.settings-range > span {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.settings-range > span em {
  color: var(--text-2);
  font-size: 12px;
  font-style: normal;
}
.settings-range input {
  width: 100%;
  accent-color: var(--accent);
}

/* Compliance note — quiet inline block, no nested card */
.settings-compliance-box {
  margin-top: 6px;
  padding: 14px 0 0;
  border-top: 1px solid var(--hairline);
}
.settings-compliance-box p {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.55;
}

/* Sales Studio plays — divider rows */
.settings-studio-play {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
}
.settings-studio-play:first-child { padding-top: 0; }
.settings-studio-play:last-child { border-bottom: 0; padding-bottom: 0; }
.settings-studio-play-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--text-3);
}
.settings-studio-play.tone-warn .settings-studio-play-dot { background: var(--warn); }
.settings-studio-play.tone-amber .settings-studio-play-dot { background: var(--accent); }
.settings-studio-play.tone-good .settings-studio-play-dot { background: var(--good); }
.settings-studio-play b {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}
.settings-studio-play em {
  display: block;
  margin-top: 2px;
  color: var(--text-3);
  font-size: 11.5px;
  font-style: normal;
  line-height: 1.35;
}
.settings-studio-play > span:last-child {
  color: var(--text-2);
  font-size: 11px;
  white-space: nowrap;
}
.settings-studio-brief {
  margin-top: 16px;
  padding: 14px 0 0;
  border-top: 1px solid color-mix(in oklch, var(--accent) 22%, var(--hairline));
}
.settings-studio-brief p {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.55;
}

.settings-action-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Headless tab — status pill + API key row */
.settings-pill-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--text) 6%, transparent);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.settings-pill-status.is-on {
  color: var(--good);
  background: color-mix(in oklch, var(--good) 14%, transparent);
}
.settings-apikey-shell {
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 6px 6px 14px;
  min-height: 48px;
}
.settings-apikey-value {
  flex: 1;
  min-width: 200px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-2);
  letter-spacing: 0.01em;
  word-break: break-all;
}
.settings-apikey-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in oklch, var(--text) 6%, transparent);
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.settings-apikey-action:hover {
  background: color-mix(in oklch, var(--text) 10%, transparent);
  color: var(--text);
}
.settings-apikey-action.danger:hover {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent);
}

/* Headless use-case rows — one per Addy action class. Five-column
   grid (icon · copy · channel · timing · toggle) so rows with only a
   channel still align with rows that also have a timing field — the
   timing slot just stays empty instead of pulling the channel left. */
.settings-usecase-list {
  display: flex;
  flex-direction: column;
}
.settings-usecase {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 180px 130px auto;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}
.settings-usecase:first-child { padding-top: 4px; }
.settings-usecase:last-child  { border-bottom: 0; padding-bottom: 4px; }
.settings-usecase-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: color-mix(in oklch, var(--text) 6%, transparent);
  color: var(--text-2);
}
.settings-usecase.is-on .settings-usecase-icon {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent);
}
.settings-usecase-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-usecase-copy b {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
}
.settings-usecase-copy em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.4;
}
/* Channel + timing live as direct grid children of .settings-usecase
   so they always sit in columns 3 and 4. Rows without a timing field
   render an empty spacer in column 4 so the toggle stays in column 5
   for every row. */
.settings-usecase-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.settings-usecase-spacer {
  display: block;
  min-width: 0;
}
.settings-usecase-field > span {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.settings-usecase-field .settings-input-shell.sm {
  min-height: 34px;
  border-radius: 9px;
  min-width: 0;
  width: 100%;
}
.settings-usecase-field .settings-input-shell.sm input,
.settings-usecase-field .settings-input-shell.sm select {
  height: 34px;
  font-size: 12.5px;
  padding: 0 10px;
  min-width: 0;
}
.settings-usecase-timing .settings-input-shell.sm {
  padding-right: 8px;
}
.settings-usecase-timing-unit {
  color: var(--text-3);
  font-size: 11px;
  white-space: nowrap;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.settings-usecase-toggle {
  position: relative;
  display: inline-flex;
}
.settings-usecase-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.settings-usecase[aria-disabled="true"],
.settings-usecase :disabled {
  opacity: 0.6;
}

.settings-panel-copy {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}

/* ─────────── Platform typography personality ───────────
   A single rule that stamps the same subtle depth + tightened optical
   kerning across every major display heading on every screen. Theme-
   adaptive: dark mode reads as a quiet inner glow, light mode as a
   soft drop. Don't list small body text here — only headings/titles
   that benefit from a touch of tactility. */
.workspace-header-title,
.settings-card h3,
.settings-card-eyebrow,
.settings-target-callout b,
.settings-usecase-copy b,
.coach-block-title,
.manager-topline-title,
.login-brand-wordmark,
.brand-wordmark,
.h1, .h2, .h3,
.coach-card-id b,
.priority-detail-headline,
.lens-panel-title,
.cp-title,
.dt-truth-title,
.dt-section-title {
  text-shadow: 0 1px 0 color-mix(in oklch, var(--bg) 55%, transparent);
}

/* Default tighter optical kerning on display headings so they all
   share the same rhythm. Per-rule overrides still win. */
.workspace-header-title,
.settings-card h3,
.coach-block-title,
.manager-topline-title,
.h1, .h2, .h3 {
  letter-spacing: -0.018em;
}

/* ─────────── Inline keyword chips ───────────
   `<span class="kw">` highlights an important word or number inside
   a sentence. Tone variants tint by meaning: money/good = green,
   loss/risk = warn, key term = accent, num = neutral mono. Use
   sparingly — too many chips kills the signal. */
.kw {
  display: inline-block;
  padding: 0 6px;
  margin: 0 1px;
  border-radius: 6px;
  background: color-mix(in oklch, var(--text) 7%, transparent);
  color: var(--text);
  font-weight: 650;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  white-space: nowrap;
}
.kw.tone-num {
  background: color-mix(in oklch, var(--text) 7%, transparent);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0.01em;
}
.kw.tone-money,
.kw.tone-good {
  background: color-mix(in oklch, var(--good) 14%, transparent);
  color: var(--good);
}
.kw.tone-loss,
.kw.tone-warn {
  background: color-mix(in oklch, var(--warn) 16%, transparent);
  color: var(--warn);
}
.kw.tone-key,
.kw.tone-accent {
  background: color-mix(in oklch, var(--accent) 16%, transparent);
  color: var(--accent);
}
.kw.tone-muted {
  background: color-mix(in oklch, var(--text) 5%, transparent);
  color: var(--text-2);
}

@media (max-width: 980px) {
  .settings-module {
    padding: 20px 16px 32px;
  }
  .settings-tabs {
    padding: 4px;
  }
  .settings-tab {
    flex: 0 0 auto;
    padding: 0 14px;
  }
  .settings-page.two-col,
  .settings-form-grid {
    grid-template-columns: 1fr;
  }
  .settings-card-head,
  .settings-card-body { padding-left: 18px; padding-right: 18px; }
  .settings-integration,
  .settings-role-row {
    grid-template-columns: 30px minmax(0, 1fr);
  }
  .settings-integration-sync,
  .settings-status,
  .settings-integration .settings-secondary-btn,
  .settings-role-row > span,
  .settings-role-row .settings-secondary-btn {
    grid-column: 2;
    justify-self: start;
  }
  .settings-phone-grid {
    grid-template-columns: 110px minmax(0, 1fr);
  }
  .settings-page-header h1 {
    font-size: 24px;
  }
  .settings-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Subtle "Deal room" affordance — quiet text-only link in the header,
   placed away from the primary corrective-action CTA so the two reads
   stay distinct (this opens the room; the CTA fires the action). */
.priority-detail-room {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin-top: 4px;
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 140ms ease;
  align-self: flex-end;
}
.priority-detail-room:hover {
  color: var(--text);
}
.priority-detail-room .icon {
  transition: transform 140ms ease;
}
.priority-detail-room:hover .icon {
  transform: translate(1px, -1px);
}

/* Buyer ↔ Seller progression bar — frameless by default; gets a subtle
   left rule when it lives inside the priority card so it reads as a sibling
   column instead of a box dropped onto a card. */
.cp-bsp {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
/* (Priority card body / alignment column / "Next move" inline classes were
   removed when the AE priority widget moved to the coach-card recipe. The
   buyer↔seller progression bar lives inside the coach-prep collapse now. */
.ai-action-rail {
  margin-top: 2px;
}
.ai-priority-action {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-gap-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 4px;
  max-width: 760px;
}
.ai-gap-action > div {
  min-width: 0;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ai-gap-action span,
.ai-compact-lines b {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ai-gap-action b {
  display: block;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--text);
  text-wrap: pretty;
}
.ai-gap-action em {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.ai-secondary-actions {
  display: flex;
  flex-direction: column;
}
.ai-compact-action {
  padding: 14px 4px;
}
.ai-compact-action .kind {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
.ai-compact-action .kind span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.ai-compact-lines {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 14px;
}
.ai-compact-lines span {
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text);
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .ai-gap-action,
  .ai-compact-lines {
    grid-template-columns: 1fr;
  }
}

/* Tug-of-war B↔S progression — minimal single-line bar: just the two %s
   flanking the track. Tone-aware fills carry state; no separate heads or
   caption text. Surrounding components (lens badge + story title) supply
   the narrative, so the bar itself stays visual. */
/* Bar is exactly the track's height (12px fill + 2px borders = 14px).
   With this, align-items:center reliably puts every child's visual
   midline on the same line — the percentage label, the small-caps
   "BUYER"/"SELLER" tag, and the bar fill. */
.cp-bsp-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 14px;
}
.cp-bsp-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  min-width: 64px;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  align-self: center;
  line-height: 1;
  gap: 5px;
}
.cp-bsp-num em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-3);
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  /* Monospace digits have asymmetric vertical metrics — the visual
     centerline of "67%" sits slightly above the geometric centerline
     of the line-box, making the text read as "too high" against the
     bar. A 1px translate compensates without affecting layout. */
}
.cp-bsp-num {
  transform: translateY(1px);
}
.cp-bsp-num-buyer  { justify-content: flex-end;   text-align: right; }
.cp-bsp-num-seller { justify-content: flex-start; text-align: left; }
.cp-bsp-num.is-leading { color: var(--text); }
.cp-bsp-num.is-leading em { color: var(--text-2); opacity: 1; }
.cp-bsp.tone-warn  .cp-bsp-num.is-leading { color: var(--warn); }
.cp-bsp.tone-amber .cp-bsp-num.is-leading { color: var(--accent); }
.cp-bsp.tone-good  .cp-bsp-num.is-leading { color: var(--good); }

.cp-bsp-track {
  position: relative;
  flex: 1;
  height: 12px;
  margin: 0;
  border-radius: 8px;
  background: color-mix(in oklch, var(--text) 4%, transparent);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.cp-bsp-fill {
  position: absolute;
  top: 0; bottom: 0;
  background: color-mix(in oklch, var(--text-3) 28%, transparent);
  transition: width 240ms cubic-bezier(0.22, 0.61, 0.36, 1), background 200ms ease;
}
.cp-bsp-fill-buyer  { right: 50%; border-radius: 8px 0 0 8px; }
.cp-bsp-fill-seller { left: 50%;  border-radius: 0 8px 8px 0; }

.cp-bsp.tone-warn  .cp-bsp-fill.is-leading { background: color-mix(in oklch, var(--warn)   72%, transparent); }
.cp-bsp.tone-amber .cp-bsp-fill.is-leading { background: color-mix(in oklch, var(--accent) 72%, transparent); }
.cp-bsp.tone-good  .cp-bsp-fill            { background: color-mix(in oklch, var(--good)   58%, transparent); }
.cp-bsp.tone-good  .cp-bsp-fill.is-leading { background: color-mix(in oklch, var(--good)   78%, transparent); }

.cp-bsp-centre {
  position: absolute;
  top: -3px; bottom: -3px;
  left: 50%;
  width: 1px;
  background: var(--text-3);
  opacity: 0.55;
  transform: translateX(-50%);
  z-index: 2;
}

/* alignment lines */
.cp-align {
  display: grid; grid-template-columns: 56px 1fr auto;
  row-gap: 8px; column-gap: 10px;
  align-items: center;
  padding: 9px 12px;
  background: var(--surface-2);
  border-radius: 10px;
}
.cp-align-row { display: contents; }
.cp-align-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.cp-align-v {
  font-variant-numeric: tabular-nums;
  font-size: 12px; font-weight: 600; color: var(--text);
  text-align: right;
}
.cp-align-v.warn { color: var(--warn); }
.cp-align-gap {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--warn);
  margin-top: 2px;
}

/* fix block */
.cp-fix {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  background: color-mix(in oklch, var(--accent) 12%, var(--bg-3));
  border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
  border-radius: 10px;
}
.cp-fix-l {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.cp-fix-pre { color: var(--accent); }
.cp-fix-meta { color: var(--text-3); letter-spacing: 0.04em; }
.cp-fix-t {
  font-size: 13.5px; font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.4;
}

.cp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-actions .btn.lg { height: 36px; padding: 0 15px; border-radius: 999px; font-size: 13px; }

/* (Old .cp-pips / .cp-pip styles removed — the priority widget now uses
   .coach-pips from the shared rotative-deck rail.) */

/* ── BAND 3 — revenue at risk map ───────────────────────────────── */
.cp-risk {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 18px 26px;
  background: transparent;
  border: 0;
  border-radius: 0;
  transition: background 160ms ease;
}
.cp-risk::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 10px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--text) 6%, transparent) 0%,
    transparent 100%
  );
  opacity: 0.7;
}
.cp-risk:hover { background: color-mix(in oklch, var(--text) 4%, transparent); }
.cp-risk-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
}
.cp-risk-title {
  margin: 8px 0 0;
  font-size: 22px;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
.cp-risk-metrics {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 8px;
  align-items: center;
}
.cp-risk-metrics span {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: 11px;
  white-space: nowrap;
}
.cp-risk-metrics b {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}
.cp-risk-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: stretch;
}
.cp-risk-plot-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.cp-risk-plot {
  position: relative;
  min-height: 282px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:
    linear-gradient(90deg,
      color-mix(in oklch, var(--good) 8%, transparent) 0%,
      transparent 32%,
      color-mix(in oklch, var(--accent) 7%, transparent) 60%,
      color-mix(in oklch, var(--risk) 7%, transparent) 100%),
    var(--surface-2);
  overflow: visible;
}
/* Single threshold rule — vertical, marking the start of the "watch / costing" zone */
.cp-risk-plot::after {
  content: "";
  position: absolute;
  left: 62%;
  top: 38px;
  bottom: 18px;
  width: 1px;
  pointer-events: none;
  background: color-mix(in oklch, var(--risk) 16%, transparent);
}
.cp-risk-zone {
  position: absolute;
  top: 12px;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.cp-risk-zone.low { left: 16px; color: var(--good); }
.cp-risk-zone.mid { left: 38%; color: var(--accent); }
.cp-risk-zone.high { right: 16px; color: var(--risk); }
.cp-risk-y {
  position: absolute;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  pointer-events: none;
}
.cp-risk-y.top { left: 16px; top: 38px; }
.cp-risk-y.bottom { left: 16px; bottom: 14px; }

/* X-axis band — sits cleanly under the plot, never floats. */
.cp-risk-axis-x {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.cp-risk-axis-x > span:first-child { color: var(--text-2); }
.cp-risk-axis-x > span:last-child  { color: var(--text-2); margin-left: auto; }
.cp-risk-axis-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--good)   30%, transparent),
    color-mix(in oklch, var(--accent) 28%, transparent),
    color-mix(in oklch, var(--risk)   24%, transparent));
  border-radius: 999px;
}
.cp-risk-bubble {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in oklch, var(--text) 18%, transparent);
  background: var(--surface-3);
  color: var(--text);
  box-shadow: var(--shadow-md);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.cp-risk-bubble:hover,
.cp-risk-bubble:focus-visible {
  z-index: 8;
  transform: translate(-50%, -50%) scale(1.06);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}
.cp-risk-bubble.tone-warn {
  background: color-mix(in oklch, var(--risk) 22%, var(--bg-2));
  border-color: color-mix(in oklch, var(--risk) 38%, transparent);
}
.cp-risk-bubble.tone-amber {
  background: color-mix(in oklch, var(--accent) 36%, var(--bg-2));
  border-color: color-mix(in oklch, var(--accent) 58%, transparent);
}
.cp-risk-bubble.tone-good {
  background: color-mix(in oklch, var(--good) 36%, var(--bg-2));
  border-color: color-mix(in oklch, var(--good) 58%, transparent);
}
.cp-risk-initials {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}
.cp-risk-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  width: 208px;
  transform: translateX(-50%) translateY(4px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 11px;
  border-radius: 10px;
  background: var(--bg-3);
  border: 1px solid var(--border-strong);
  color: var(--text-2);
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
  box-shadow: var(--shadow-lg);
}
.cp-risk-tip b {
  color: var(--text);
  font-size: 12.5px;
}
.cp-risk-tip span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
}
.cp-risk-tip em {
  margin-top: 2px;
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-2);
}
.cp-risk-bubble:hover .cp-risk-tip,
.cp-risk-bubble:focus-visible .cp-risk-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Buyer alignment buckets (replaces "Highest drag" rank list) */
.cp-risk-buckets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.cp-risk-buckets-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.cp-risk-bucket {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  padding: 14px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.cp-risk-bucket b {
  grid-row: 1 / 3;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
}
.cp-risk-bucket span {
  grid-column: 2;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.cp-risk-bucket em {
  grid-column: 2;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.cp-risk-bucket.tone-warn  { border-left: 3px solid var(--risk); }
.cp-risk-bucket.tone-warn  b { color: var(--risk); }
.cp-risk-bucket.tone-amber { border-left: 3px solid var(--accent); }
.cp-risk-bucket.tone-amber b { color: var(--accent); }
.cp-risk-bucket.tone-good  { border-left: 3px solid var(--good); }
.cp-risk-bucket.tone-good  b { color: var(--good); }

/* Responsive */
@media (max-width: 1100px) {
  .manager-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mgr-status { grid-template-columns: 1fr; }
  .mgr-status-metrics { padding-left: 0; border-left: 0; border-top: 1px solid var(--hairline); padding-top: 14px; }
  .mgr-ae-row { grid-template-columns: 1fr; gap: 12px; }
  .coaching-grid { grid-template-columns: 1fr; }
  .manager-deal-list-head,
  .manager-deal-row {
    grid-template-columns: minmax(160px, 1.4fr) minmax(100px, 0.7fr) 110px 168px;
  }
  .manager-deal-list-head > span:nth-child(4),
  .manager-deal-list-head > span:nth-child(5),
  .manager-deal-row > span:nth-child(4),
  .manager-deal-row > .manager-gap-cell {
    display: none;
  }
  .review-compare {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .review-compare > svg,
  .review-compare > i { display: none; }
  .cp-risk-head { align-items: start; flex-direction: column; }
  .cp-risk-metrics { grid-template-columns: repeat(2, max-content); }
  .cp-risk-body { grid-template-columns: 1fr; }
  .cp-risk-buckets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cp-risk-buckets-label { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .dashboard-top-actions {
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .manager-kpi-grid { grid-template-columns: 1fr 1fr; }
  .review-evidence {
    grid-template-columns: 1fr;
  }
  .stage-segmented {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stage-segmented .seg:nth-child(2) { border-right: 0; }
  .stage-segmented .seg:nth-child(3),
  .stage-segmented .seg:nth-child(4) {
    border-top: 1px solid var(--border);
  }
  .manager-deal-list-head { display: none; }
  .manager-deal-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .manager-topline {
    flex-direction: column;
    align-items: flex-start;
  }
  .cockpit { padding: 16px; }
  .cp-banner { grid-template-columns: 1fr; gap: 10px; }
  .cp-priority-shell { padding: 16px; }
  .cp-risk { padding: 14px; }
  .cp-risk-title { font-size: 18px; }
  .cp-risk-metrics { grid-template-columns: 1fr 1fr; width: 100%; }
  .cp-risk-metrics span { justify-content: center; }
  .cp-risk-plot { min-height: 300px; }
  .cp-risk-buckets { grid-template-columns: 1fr; }
  .cp-risk-x { display: none; }
}

@media (max-width: 980px) {
  .addy-screen-grid {
    grid-template-columns: 1fr;
  }
  .addy-queue-head {
    display: none;
  }
  .addy-queue-item {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas:
      "rank account"
      "rank signal"
      "rank action";
    gap: 8px 14px;
  }
  .addy-rank { grid-area: rank; }
  .addy-row-account { grid-area: account; }
  .addy-row-signal { grid-area: signal; }
  .addy-row-action { grid-area: action; }
}

@media (max-width: 720px) {
  .addy-screen {
    padding-bottom: 220px;
  }
  .addy-ops-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .addy-op-step:nth-child(2n) {
    border-right: 0;
  }
  .addy-op-step:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }
  .addy-hero {
    align-items: flex-start;
  }
}

/* ───────────────────── Channel layer (compact) ───────────────────── */
/* Two tiny pieces: a "via {channel}" chip on the priority card, and a
   small segmented switch on the AI primary action. The action stays the
   same; only the channel — and the draft length/style — varies. */

.ch-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.ch-chip .icon { opacity: 0.95; }

.ch-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-3);
  flex-wrap: wrap;
}
.ch-switch-l {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ch-switch-options {
  display: inline-flex;
  gap: 4px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
}
.ch-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.ch-pill:hover { color: var(--text); }
.ch-pill.is-on {
  background: var(--accent-soft);
  color: var(--accent);
}
.ch-pill .icon { opacity: 0.95; }

/* Add-slot button below the grid */
.cp-stack-foot { margin-top: 12px; }
.cp-add-slot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.cp-add-slot:hover {
  color: var(--accent);
  border-color: color-mix(in oklch, var(--accent) 38%, var(--border));
  background: color-mix(in oklch, var(--accent) 6%, transparent);
}

/* Per-widget remove button — shows on hover of the parent widget */
.cp-slot-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-3);
  border-radius: 5px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease, background 120ms ease;
}
.cp-slot:hover .cp-slot-remove,
.cp-slot:focus-within .cp-slot-remove { opacity: 1; }
.cp-slot-remove:hover { color: var(--warn); background: var(--surface-3); }

/* Section picker */
.picker-back {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  padding: 24px;
  animation: ap-fade 140ms ease-out;
}
.picker {
  width: 380px;
  max-width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.46);
  overflow: hidden;
}
.picker-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.picker-list {
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 2px;
}
.picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.picker-item:hover {
  background: var(--surface-2);
  border-color: var(--border);
}
.picker-item-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.picker-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.picker-item-body b {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.picker-item-body em {
  font-size: 11.5px;
  color: var(--text-3);
  font-style: normal;
  letter-spacing: -0.005em;
}
.picker-item-chev { color: var(--text-3); }
.picker-item:hover .picker-item-chev { color: var(--text); }

/* ───────────────────── Feed widgets (nudges / signals / coaching) ──────── */
.cp-feed {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 22px;
}
.cp-feed-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
/* Section header for cockpit feed widgets: grip-handle affordance and
 * title share row 1 (same baseline); helper one-liner spans below.
 * Grid layout means no JSX restructure — affordance and title slot
 * into the right cells. */
.cp-feed-headings {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
  min-width: 0;
}
.cp-feed-affordance {
  grid-row: 1;
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
}
/* Section title — single-line headline, calm by default.
 * The helper is hidden until the section is hovered, then types itself
 * out (steps() = typewriter cadence). Matches the brand experience
 * principle: explanation on demand, not by default. */
.cp-feed-title {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.15;
  margin: 0;
  color: var(--text);
}
.cp-feed-helper {
  grid-row: 2;
  grid-column: 1 / -1;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.45;
  margin: 0;
  /* One-line typewriter: `max-width` animates from 0 to the full width
   * in discrete steps, character-by-character. White-space nowrap keeps
   * the text on a single line; overflow hides what hasn't been
   * "typed" yet. */
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 200ms ease,
    opacity 140ms ease,
    margin-top 200ms ease;
}
.cp-feed:hover .cp-feed-helper,
.cp-priority-shell:hover .cp-feed-helper,
.cp-feed:focus-within .cp-feed-helper,
.cp-priority-shell:focus-within .cp-feed-helper {
  max-height: 24px;
  opacity: 1;
  margin-top: 4px;
  animation: nudgeTypewriter 1.4s steps(60, end) 160ms forwards;
}
@keyframes nudgeTypewriter {
  from { max-width: 0; }
  to   { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-feed:hover .cp-feed-helper,
  .cp-priority-shell:hover .cp-feed-helper,
  .cp-feed:focus-within .cp-feed-helper,
  .cp-priority-shell:focus-within .cp-feed-helper {
    animation: none;
    max-width: 100%;
  }
}
.cp-feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.cp-feed-row + .cp-feed-row { border-top: 1px solid var(--hairline); }
.cp-feed-row-btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 4px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  border-radius: 6px;
  transition: background 120ms ease;
}
.cp-feed-row-btn:hover { background: color-mix(in oklch, var(--text) 6%, transparent); }
/* First row in every feed = the most urgent item by sort order. Pull
 * a subtle weight + tint forward so the eye lands here first. */
.cp-feed-row:first-child .cp-feed-row-btn {
  background: color-mix(in oklch, var(--text) 3%, transparent);
}
.cp-feed-row:first-child .cp-feed-row-btn:hover {
  background: color-mix(in oklch, var(--text) 7%, transparent);
}
.cp-feed-row:first-child .cp-feed-text b { font-size: 15px; }
.cp-feed-row:first-child .cp-feed-dot {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 18%, transparent);
}
.cp-feed-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  margin-left: 2px;
  flex-shrink: 0;
}
.cp-feed-row.tone-warn  { color: var(--risk); }
.cp-feed-row.tone-amber { color: var(--accent); }
.cp-feed-row.tone-good  { color: var(--good); }
.cp-feed-row.tone-info  { color: var(--info); }
.cp-feed-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
/* Primary line — the deal name or action verb. Larger + brighter so it
 * reads as the headline of the row. */
.cp-feed-text b {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.008em;
  line-height: 1.25;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Secondary line — the supporting context. Smaller + muted so it
 * recedes behind the primary line. */
.cp-feed-text em {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-3);
  font-style: normal;
  letter-spacing: -0.002em;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Timestamp — quietest element in the row. Mono so it doesn't compete
 * with the headline rhythm. */
.cp-feed-time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-3);
  flex-shrink: 0;
  opacity: 0.85;
}
.cp-feed-lead {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in oklch, currentColor 12%, transparent);
  margin-left: 2px;
  flex-shrink: 0;
}
.cp-feed-empty {
  padding: 12px 0;
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: -0.005em;
}

/* Rank chip for Addy's day rows. Same shape as .cp-feed-lead but visually
   quieter — it's an ordinal, not a metric. */
.cp-feed-rank {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-3);
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  margin-left: 2px;
  flex-shrink: 0;
}
.cp-feed-row.tone-warn  .cp-feed-rank { color: var(--risk); background: var(--risk-soft); }
.cp-feed-row.tone-amber .cp-feed-rank { color: var(--accent); background: var(--accent-soft); }

/* This week's runway — stat panel above the feed list. */
.cp-runway-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 0 4px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 4px;
}
.cp-runway-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-input);
  min-width: 0;
}
.cp-runway-stat em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.cp-runway-stat b {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.1;
}
.cp-runway-stat span {
  font-size: 11px;
  color: var(--text-3);
}
.cp-runway-stat.tone-good {
  background: color-mix(in oklch, var(--good) 8%, var(--surface-2));
  border-color: color-mix(in oklch, var(--good) 18%, var(--hairline));
}
.cp-runway-stat.tone-good b { color: var(--good); }
.cp-runway-stat.tone-warn {
  background: color-mix(in oklch, var(--risk) 5%, var(--surface-2));
  border-color: color-mix(in oklch, var(--risk) 16%, var(--hairline));
}
.cp-runway-stat.tone-warn b { color: var(--risk); }
@container cp-slot (max-width: 420px) {
  .cp-runway-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cp-runway-stat { padding: 8px 10px; }
  .cp-runway-stat b { font-size: 15px; }
}

/* ───────────────────── Adaptive home widgets ───────────────────── */
/* Each widget is a CSS container. Container queries adapt content based on
   the slot it's placed in — half-slot widgets show a denser distillation;
   full-slot widgets show full layouts. */
/* `container: … / inline-size` so the @container queries below can react
   to the slot width, while letting natural content height determine the
   card's block size. With `/ size`, the card requires an externally
   defined height and collapses inside an auto-sized grid row. */
.cp-priority-shell {
  width: 100%;
  overflow: visible;
  container: cp-priority / inline-size;
}
.cp-risk {
  width: 100%;
  overflow: visible;
  container: cp-risk / inline-size;
}
.pipeline-status {
  width: 100%;
  overflow: visible;
  container: cp-pipeline / inline-size;
}

/* Priority deal — stack the selector above the detail panel in narrow slots. */
@container cp-priority (max-width: 560px) {
  .priority-split {
    grid-template-columns: 1fr;
  }
  .priority-stack {
    max-height: 250px;
  }
}
@container cp-priority (max-width: 440px) {
  .priority-stack-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .priority-stack-side {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .priority-detail-head {
    flex-direction: column;
  }
}

/* Buyer drift map — drop the plot first when narrow; metrics next. */
@container cp-risk (max-width: 580px) {
  .cp-risk-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@container cp-risk (max-width: 480px) {
  .cp-risk-plot-wrap { display: none; }
}
@container cp-risk (max-width: 380px) {
  .cp-risk-metrics { display: none; }
}

/* Pipeline status — stack columns when slot is narrow, drop metrics
   first. Container can't query itself, so we route the change through
   its children. */
@container cp-pipeline (max-width: 640px) {
  .pipeline-status-main,
  .pipeline-status-progress,
  .pipeline-status-metrics {
    grid-column: 1 / -1;
  }
}
@container cp-pipeline (max-width: 460px) {
  .pipeline-status-metrics { display: none; }
}

/* ───────────────────── Embedded mode (mobile preview iframe) ───────────────────── */
/* Inside the mobile preview iframe the app shows only the deals list. No
   sidebar, no AI dock — full-bleed workspace at phone width. */
.app.is-embedded {
  grid-template-columns: 1fr;
}
.app.is-embedded .workspace {
  padding: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}
.app.is-embedded .scroll {
  padding-top: 16px;
}
.app.is-embedded .deals-header { margin-top: 4px; }
.app.is-embedded .topbar { padding: 0 14px; }
/* Table in narrow viewport — let it scroll horizontally rather than
   crushing every column; prevents text from wrapping into mush. */
.app.is-embedded .deal-table-wrap { overflow-x: auto; }
.app.is-embedded .tbl { min-width: 640px; }

/* ───────────────────── Mobile preview overlay ───────────────────── */
/* Loads the same app in an iframe at iPhone-class proportions (393×852)
   so the actual viewport-based media queries fire. The bezel is purely
   visual — a thin rounded frame around the iframe with a notch. Esc or
   backdrop click closes. */
.mobile-preview-back {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: 24px;
  animation: ap-fade 140ms ease-out;
}
.mobile-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-height: calc(100vh - 48px);
}
.mobile-preview-bezel {
  position: relative;
  width: 393px;
  height: min(852px, calc(100vh - 96px));
  max-width: calc(100vw - 48px);
  background: #050507;
  border: 8px solid #18181c;
  border-radius: 44px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 24px 64px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.mobile-preview-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 26px;
  background: #050507;
  border-radius: 999px;
  z-index: 2;
}
.mobile-preview-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--bg);
  border-radius: 36px;
}
.mobile-preview-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
@keyframes ap-fade { from { opacity: 0; } to { opacity: 1; } }

/* ───────────────────── Narrow-viewport polish ───────────────────── */
/* The codebase already collapses cards and toolbars at 720px. This block
   covers the remaining gaps: home topbar, deal-room header chips, and a
   slimmer sidebar at the smallest sizes. Scoped tight so nothing else
   shifts. */
@media (max-width: 640px) {
  .workspace-header {
    grid-template-columns: minmax(0, 1fr);
    align-items: flex-start;
    padding: 10px 14px;
  }
  .workspace-header-title { font-size: 22px; }
  .workspace-header-subtitle {
    font-size: 12px;
  }
  .workspace-header-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .workspace-header .deals-header-controls {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .workspace-header .deal-lens-switch {
    flex-wrap: wrap;
  }
  .workspace-header .deals-search-input {
    width: min(260px, calc(100vw - 130px));
  }
  .workspace-header-meta {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .topbar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .dashboard-top-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .tour-trigger { font-size: 10px; padding: 3px 8px; }

  .modal-title-row { gap: 8px; }
  .modal-title-row .h2 { font-size: 18px; }
  .deal-meta-badges { gap: 4px; }
  .deal-meta-badge { font-size: 11px; padding: 4px 7px; }

  .app { grid-template-columns: 56px 1fr; }
}

@media (max-width: 480px) {
  .cp-banner { padding: 14px 12px 18px; }
  .cp-banner-greet { font-size: 14.5px; }
  .cp-banner-status { font-size: 12px; }
  .deals-header { gap: 10px; }
  .deals-header .h1 { white-space: normal; }
}

/* ───────────────────── Action preview — post-send moment ───────────────────── */
/* After Send is clicked the modal stays on screen for ~1.4s so the AE
   sees Nudge engage. Reuses the live-pulse pattern from AgentBanner. */
.ap-watching {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 16px 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklch, var(--good) 32%, var(--border));
  background: color-mix(in oklch, var(--good) 10%, transparent);
  border-radius: 10px;
  animation: ap-watching-in 200ms ease-out;
}
@keyframes ap-watching-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.ap-watching-pulse {
  position: relative;
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ap-watching-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--good);
  box-shadow: 0 0 8px var(--good);
}
.ap-watching-ring {
  position: absolute; inset: -2px;
  border-radius: 999px;
  border: 1.5px solid var(--good);
  animation: cpRing 1.4s ease-out infinite;
}
.ap-watching-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 12.5px;
  letter-spacing: -0.005em;
}
.ap-watching-text b { color: var(--text); font-weight: 600; }
.ap-watching-text span { color: var(--text-2); }

/* ───────────────────── Guided demo tour ───────────────────── */
/* Step-by-step overlay that walks through the activity-vs-truth flow.
   Spotlight = a thin ring around the current target. Tooltip floats
   anchored to the target; if the target isn't mounted yet (e.g. modal
   closed, wrong tab), the tooltip centers and shows a hint instead. */
.tour-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tour-trigger:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }
.tour-trigger .icon { color: var(--accent); }
.tour-trigger-caret {
  transition: transform 140ms ease;
  margin-left: 2px;
}
.tour-trigger-wrap.is-open .tour-trigger-caret { transform: rotate(180deg); }

/* Picker dropdown — fans out below the trigger with three tour flows.
   Closes on outside click + Escape (handled in TourTrigger). */
.tour-trigger-wrap {
  position: relative;
  display: inline-block;
}
.tour-picker {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  width: 300px;
  padding: 6px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.12);
}
.tour-picker-group-label {
  padding: 10px 10px 4px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.tour-picker-group-label:first-of-type { padding-top: 4px; }
.tour-picker-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 4px;
}
.tour-picker-head span {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.tour-picker-head em {
  color: var(--text-3);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tour-picker-item {
  display: block;
  width: 100%;
  padding: 10px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}
.tour-picker-item:hover {
  background: color-mix(in oklch, var(--text) 5%, transparent);
}
.tour-picker-item.is-current {
  background: color-mix(in oklch, var(--accent) 10%, transparent);
}
.tour-picker-item b {
  display: block;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.005em;
}
.tour-picker-item em {
  display: block;
  margin-top: 2px;
  color: var(--text-3);
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.4;
}

.tour-root {
  position: fixed;
  inset: 0;
  z-index: 320;
  pointer-events: none;
}
.tour-spotlight {
  position: fixed;
  border-radius: 12px;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.30),
    0 0 0 2px var(--accent),
    0 0 24px 2px color-mix(in oklch, var(--accent) 40%, transparent);
  transition: top 180ms ease, left 180ms ease, width 180ms ease, height 180ms ease;
  pointer-events: none;
}
.tour-tooltip {
  position: fixed;
  width: 320px;
  max-width: calc(100vw - 24px);
  padding: 14px 16px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.46);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: tour-fade-in 160ms ease-out;
}
.tour-tooltip--floating {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@keyframes tour-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tour-tooltip--floating { animation: tour-fade-in-center 160ms ease-out; }
@keyframes tour-fade-in-center { from { opacity: 0; transform: translate(-50%, calc(-50% + 4px)); } to { opacity: 1; transform: translate(-50%, -50%); } }

.tour-step-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tour-step-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tour-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-3);
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.tour-close:hover { background: var(--surface-3); color: var(--text); }

.tour-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.tour-body {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
  letter-spacing: -0.005em;
}
.tour-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 4px 0 0;
  padding: 8px 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 11.5px;
  color: var(--text-2);
}
.tour-hint .icon { color: var(--accent); margin-top: 2px; flex-shrink: 0; }

.tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.tour-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tour-btn:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.tour-btn:disabled { opacity: 0.4; cursor: default; }
.tour-btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.tour-btn-primary:hover:not(:disabled) { background: var(--cta-strong); color: var(--accent-ink); }
.tour-btn-ghost { border-color: transparent; }

.tour-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tour-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--surface-3);
}
.tour-dot.is-on { background: var(--accent); }

/* ───────────────────── Deals screen toolbar ───────────────────── */
/* Right-aligned cluster of compact controls so they read as one purposeful
   group, not three separate elements floating in the page header. Search
   collapses to a single magnifier; filters live behind one popover; view
   toggle anchors the right edge. All controls share a 30px height. */
.deals-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  min-width: 0;
}
.deals-header-controls-only {
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 10px;
}
.deals-header .h1 {
  white-space: nowrap;
  margin: 0;
  min-width: 0;
}

.deal-truth-sub {
  max-width: 680px;
  margin: 7px 0 0;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.5;
}

.deals-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* Single quiet "View options" trigger pinned to the right above the
   pipeline. Replaces the previous toolbar of chips + dropdowns + view
   tabs so the pipeline gets the full visual stage. The summary text
   inside the trigger keeps the active state legible without opening. */
.deals-view-options-bar {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 14px;
}
.deals-view-options {
  position: relative;
  display: inline-flex;
}
.deals-view-options-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: color-mix(in oklch, var(--surface-2) 50%, transparent);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.deals-view-options-trigger:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
.deals-view-options-trigger[aria-expanded="true"] {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}
.deals-view-options-lens-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--info);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--info) 22%, transparent);
}
.deals-view-options-lens-dot.is-truth  { background: var(--info);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--info) 22%, transparent); }
.deals-view-options-lens-dot.is-seller { background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 22%, transparent); }
.deals-view-options-lens-dot.is-buyer  { background: var(--good);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--good) 22%, transparent); }
.deals-view-options-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
}
.deals-view-options-summary > span {
  white-space: nowrap;
}
.deals-view-options-sep {
  color: var(--text-3);
  opacity: 0.6;
}
.deals-view-options-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink, #0a0a0a);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0;
}
.deals-view-options-caret {
  color: var(--text-3);
  margin-left: 1px;
}
.deals-view-options-trigger[aria-expanded="true"] .deals-view-options-caret {
  transform: rotate(180deg);
}

/* Popover — anchored top-right of the trigger, opens downward. */
.deals-view-options-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: min(360px, 92vw);
  max-height: 70vh;
  overflow-y: auto;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 22px 56px -18px color-mix(in oklch, var(--text) 34%, transparent),
              0 2px 8px -4px color-mix(in oklch, var(--text) 12%, transparent);
  display: grid;
  gap: 14px;
}
.deals-view-options-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.deals-view-options-section-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.deals-view-options-lens-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.deals-view-options-section .deals-sort-control {
  align-self: flex-start;
}
.deals-view-options-section .tabs.view-tabs.view-tabs-sm {
  align-self: flex-start;
}
.deals-view-options-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.deals-view-options-filters .deals-filter-group {
  /* Strip the inner-popover indentation: rows already live inside the
     view-options popover, so they don't need their own background. */
  background: transparent;
  padding: 0;
  border: 0;
}
.deals-toolbar .btn.sm,
.deals-toolbar .deals-search-input {
  height: 30px;
}
.deals-header-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  width: 100%;
}
.workspace-header .deals-header-controls {
  padding: 4px;
  border: 1px solid color-mix(in oklch, var(--border) 78%, transparent);
  border-radius: 14px;
  background: color-mix(in oklch, var(--surface-2) 64%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--text) 5%, transparent);
  flex-wrap: nowrap;
  gap: 6px;
}
.workspace-header .deals-header-controls .btn.sm,
.workspace-header .deals-header-controls .deals-search-input {
  height: 32px;
  border-radius: 10px;
}
.workspace-header .deal-lens-switch {
  margin: 0;
  flex-wrap: nowrap;
  gap: 4px;
}
.workspace-header .deal-lens-switch-label {
  display: none;
}
.workspace-header .lens-badge {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 10px;
  background: transparent;
  border-color: transparent;
}
.workspace-header button.lens-badge:hover,
.workspace-header button.lens-badge.is-active {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 1px 0 color-mix(in oklch, var(--text) 7%, transparent);
}

.deals-search { display: inline-flex; align-items: center; }
.deals-search-btn { position: relative; }
.deals-search-btn .deals-search-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}
.deals-search-field {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.deals-search-ic {
  position: absolute;
  left: 10px;
  display: inline-flex;
  color: var(--text-3);
  pointer-events: none;
}
.deals-search-input {
  width: 280px;
  padding: 0 12px 0 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 12.5px;
  outline: none;
  transition: border-color 120ms ease;
  animation: deals-search-grow 160ms ease-out;
}
.workspace-header .deals-search-input {
  width: 230px;
}
.deals-search-input:focus { border-color: var(--border-strong); }
.deals-search-input::placeholder { color: var(--text-3); }
@keyframes deals-search-grow { from { width: 32px; opacity: 0.4; } to { width: 280px; opacity: 1; } }

.deals-filters { position: relative; display: inline-flex; }
.deals-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--accent-ink);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.deals-filters-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: 300px;
  max-height: min(620px, calc(100vh - 180px));
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
}
.deals-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.deals-filter-l {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.deals-filter-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-2);
  cursor: pointer;
  padding: 2px 0;
  letter-spacing: -0.005em;
}
.deals-filter-row .icon {
  color: var(--text-3);
  flex: 0 0 auto;
}
.deals-filter-row input {
  accent-color: var(--accent);
  cursor: pointer;
  width: 13px;
  height: 13px;
}
.deals-filter-row:hover { color: var(--text); }
.deals-filter-row:hover .icon { color: var(--text-2); }
.deals-filter-clear {
  margin-top: 2px;
  padding-top: 10px;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text-3);
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
  align-self: flex-start;
}
.deals-filter-clear:hover { color: var(--text); }
.deals-sort-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.deals-sort-control select {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  outline: none;
  cursor: pointer;
}

.tabs.view-tabs.view-tabs-sm {
  padding: 3px;
  border-radius: 12px;
  background: var(--surface);
}
.tabs.view-tabs.view-tabs-sm button {
  padding: 0 11px;
  font-size: 11.5px;
  min-width: 70px;
  height: 26px;
  border-radius: 9px;
}

/* Lens switcher — sits as a quiet sub-line under the page H1, not in
   the toolbar. Reads like an inline "Show by Truth · Seller · Buyer"
   choice rather than three controls competing with search/filter. */
.deal-lens-switch {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.deal-lens-switch-label {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-right: 4px;
}

/* ── LensBadge — the single source of truth for how a deal lens shows up
   anywhere in the UI. Same icon + label + tint everywhere (lens picker,
   inline card header, table affordances). Interactive variant adds an
   active state for use as a picker chip. */
.lens-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: color-mix(in oklch, var(--text) 4%, transparent);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.2;
}
.lens-badge .lens-badge-icon { flex: none; opacity: 0.9; }

.lens-badge-sm {
  padding: 2px 8px;
  gap: 4px;
  font-size: 9.5px;
  letter-spacing: 0.10em;
}

/* Lens-specific accent — calm by default, brighter when active or hovered. */
.lens-badge-truth  { color: var(--info);   border-color: color-mix(in oklch, var(--info)   28%, var(--hairline-strong)); background: color-mix(in oklch, var(--info)   6%, transparent); }
.lens-badge-seller { color: var(--accent); border-color: color-mix(in oklch, var(--accent) 28%, var(--hairline-strong)); background: color-mix(in oklch, var(--accent) 6%, transparent); }
.lens-badge-buyer  { color: var(--good);   border-color: color-mix(in oklch, var(--good)   28%, var(--hairline-strong)); background: color-mix(in oklch, var(--good)   6%, transparent); }

/* Interactive variant — used in the picker. */
button.lens-badge {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
button.lens-badge:hover {
  background: color-mix(in oklch, currentColor 14%, transparent);
  border-color: currentColor;
  color: var(--text);
}
/* Active lens — saturated fill with inverted (background-color) ink so the
   selected lens reads as obviously selected, not just tinted. Without this
   the only signal was a faint hover-like tint that didn't survive a quick
   scan of the page. */
button.lens-badge.is-active {
  background: currentColor;
  border-color: currentColor;
  box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 28%, transparent),
              0 6px 16px -6px color-mix(in oklch, currentColor 45%, transparent);
  transform: translateY(-1px);
}
button.lens-badge.lens-badge-truth.is-active  { color: var(--info); }
button.lens-badge.lens-badge-seller.is-active { color: var(--accent); }
button.lens-badge.lens-badge-buyer.is-active  { color: var(--good); }
button.lens-badge.is-active .lens-badge-icon,
button.lens-badge.is-active span {
  color: var(--bg);
  opacity: 1;
}
button.lens-badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The buttons in the lens picker are <LensBadge interactive>, so the shared
   .lens-badge styles below own their look. The picker only needs spacing. */

/* Detail tabs (deal room) keep the underline tab look — still useful
   inside the dense deal-defense card. */
.detail-truth-lenses {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 12px 0;
}

.detail-truth-lenses button {
  position: relative;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  height: 26px;
  padding: 0 10px;
  cursor: pointer;
  transition: color 140ms ease;
}

.detail-truth-lenses button:hover { color: var(--text-2); }
.detail-truth-lenses button.is-active { color: var(--text); font-weight: 600; }
.detail-truth-lenses button.is-active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 1.5px;
  border-radius: 1px;
  background: var(--accent);
}
.detail-truth-lenses button:focus-visible {
  outline: 1px solid color-mix(in oklch, var(--accent) 60%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}

.detail-truth-story {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.detail-truth-story {
  padding: 2px 0 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}

.detail-truth-story span {
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.detail-truth-story h3 {
  margin: 0;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.detail-truth-story h3 { margin-top: 8px; font-size: 20px; }

.detail-truth-story p {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.65;
}

.detail-truth-story p {
  font-size: 13px;
  line-height: 1.55;
}



.deal-level-truth {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

.deal-level-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
/* DealLevelTruth owns the LensBadge — LensMetricBar deliberately doesn't
   repeat the label, so the lens identity sits once per card. */
.deal-level-head b {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.deal-level-truth p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

.lens-metric-track {
  position: relative;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--text) 12%, transparent);
  overflow: hidden;
}

.lens-metric-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent); /* default: seller */
}

.lens-metric.lens-buyer .lens-metric-track span { background: var(--info); }

/* Truth lens — tone-aware (synthesized buyer×seller signal). Default
   neutral, then tinted by dealTruthTone so green/aligned never reads
   as a warning, and seller-heavy reads as the actual risk. */
.lens-metric.lens-truth .lens-metric-track span,
.detail-lens-meter.lens-truth .lens-metric-track span {
  background: color-mix(in oklch, var(--text) 55%, transparent);
}
.lens-metric.lens-truth[data-truth-tone="aligned"] .lens-metric-track span,
.detail-lens-meter.lens-truth[data-truth-tone="aligned"] .lens-metric-track span {
  background: var(--good);
}
.lens-metric.lens-truth[data-truth-tone="seller-heavy"] .lens-metric-track span,
.detail-lens-meter.lens-truth[data-truth-tone="seller-heavy"] .lens-metric-track span {
  background: var(--warn);
}
.lens-metric.lens-truth[data-truth-tone="buyer-led"] .lens-metric-track span,
.detail-lens-meter.lens-truth[data-truth-tone="buyer-led"] .lens-metric-track span {
  background: var(--info);
}
.lens-metric.lens-truth[data-truth-tone="dormant"] .lens-metric-track span,
.lens-metric.lens-truth[data-truth-tone="mixed"] .lens-metric-track span,
.detail-lens-meter.lens-truth[data-truth-tone="dormant"] .lens-metric-track span,
.detail-lens-meter.lens-truth[data-truth-tone="mixed"] .lens-metric-track span {
  background: color-mix(in oklch, var(--text) 45%, transparent);
}

.lens-metric {
  min-width: 0;
}

.lens-metric-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;       /* metric stands alone on the right */
  gap: 10px;
  margin-bottom: 6px;
}
.lens-metric-top b {
  color: var(--text);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}

.lens-metric.is-compact {
  min-width: 210px;
  max-width: 240px;
}

.lens-metric.is-compact .lens-metric-top {
  margin-bottom: 5px;
}

/* Truth lens uses the dual-marker buyer-seller bar so it fits a card
   instead of the wide priority slot it was originally tuned for. */
/* Compact tug-of-war bar when it lives inside a deal card. */
.lens-metric-bsp .cp-bsp-track { height: 10px; }
.lens-metric-bsp .cp-bsp-num { font-size: 10.5px; min-width: 56px; gap: 4px; }
.lens-metric-bsp .cp-bsp-num em { font-size: 8.5px; }

.detail-lens-meter {
  margin-top: 14px;
}

.detail-lens-meter.lens-buyer .lens-metric-track span { background: var(--info); }
/* Truth color comes from the tone-aware rules above (data-truth-tone). */

.lens-score-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.lens-score-chip.lens-buyer {
  background: var(--info-soft);
  color: var(--info);
}

/* Truth chip — neutral by default, tinted by dealTruthTone so the chip
   reflects the actual deal state (good/risk/info/dormant) instead of
   reading as a flat warning. */
.lens-score-chip.lens-truth {
  background: color-mix(in oklch, var(--text) 8%, transparent);
  color: var(--text);
}
.lens-score-chip.lens-truth[data-truth-tone="aligned"] {
  background: var(--good-soft);
  color: var(--good);
}
.lens-score-chip.lens-truth[data-truth-tone="seller-heavy"] {
  background: var(--risk-soft);
  color: var(--risk);
}
.lens-score-chip.lens-truth[data-truth-tone="buyer-led"] {
  background: var(--info-soft);
  color: var(--info);
}
.lens-score-chip.lens-truth[data-truth-tone="dormant"],
.lens-score-chip.lens-truth[data-truth-tone="mixed"] {
  background: color-mix(in oklch, var(--text) 8%, transparent);
  color: var(--text-2);
}

.table-truth-title {
  font-size: 12.5px;
}

.table-truth-body {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 330px;
}

@media (max-width: 720px) {
  .deals-toolbar { justify-content: flex-start; }
  .deals-search-input { width: 100%; min-width: 200px; }
  .lens-metric.is-compact { min-width: 180px; }
}

/* ───────────────────── Progress gate (deal-room only) ───────────────────── */
/* Buyer-proof judgment chip in the deal-room header. Visually quieter than
   the deal-status-badge: neutral border + neutral text, only the icon
   carries tone. Click toggles a small popover with the reason and missing
   proof. Sits at the end of .deal-meta-badges, never duplicated elsewhere. */
.progress-gate {
  position: relative;
  display: inline-flex;
}
.progress-gate-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: color-mix(in oklch, var(--surface-2) 58%, transparent);
  color: var(--text-3);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.progress-gate-chip:hover { background: var(--surface-3); color: var(--text-2); }
.progress-gate-chip[aria-expanded="true"] { background: var(--surface-3); color: var(--text-2); }
.progress-gate-chip .icon { opacity: 0.95; }

/* Tone lives on the icon only — text and border stay neutral so the chip
   reads as quiet metadata next to the louder status badge. */
.progress-gate.state-allowed .progress-gate-chip .icon  { color: var(--good); }
.progress-gate.state-at_risk .progress-gate-chip .icon  { color: var(--accent); }
.progress-gate.state-blocked .progress-gate-chip .icon  { color: var(--warn); }

.progress-gate-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: max-content;
  max-width: 320px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-2);
  box-shadow: 0 12px 32px rgba(0,0,0,0.32);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.progress-gate-pop-h {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  letter-spacing: -0.005em;
}
.progress-gate-pop-h b { font-weight: 600; color: var(--text); }
.progress-gate.state-allowed .progress-gate-pop-h .icon { color: var(--good); }
.progress-gate.state-at_risk .progress-gate-pop-h .icon { color: var(--accent); }
.progress-gate.state-blocked .progress-gate-pop-h .icon { color: var(--warn); }
.progress-gate-pop-r {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2);
  letter-spacing: -0.005em;
}
.progress-gate-pop-m {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 2px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-2);
}
.progress-gate-pop-m > span:first-child {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ChannelSwitch row inside ActionPreview — matches modal padding,
   sits under the header, no extra top margin (header already separates). */
.ap-channel-switch {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.ap-channel-switch .ch-switch { margin-top: 0; }

/* Subtle fade on body re-render so the channel switch reads as live. */
@keyframes ap-body-swap { from { opacity: 0.4; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.ap-body, .ap-fields { animation: ap-body-swap 140ms ease-out; }

/* ---------- Lens panels (Deal Truth / Seller / Buyer) ---------- */
/* Subtle by default. Each lens distills to: a small label + a short list
   + a "see more" link. No card chrome, no pill grids. The lead above
   provides its own bottom margin — no margin-top here. */
.lens-panel {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: ap-body-swap 160ms ease-out;
}

/* Hairline-list rows: time | title | meta. No backgrounds, no borders, no
   icons. Subtle horizontal hairlines between rows. */
.lens-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.lens-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 7px 0;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.lens-row:last-child { border-bottom: 0; }
.lens-row-time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  white-space: nowrap;
}
.lens-row-title {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lens-row-meta {
  color: var(--text-3);
  font-size: 11.5px;
  text-align: right;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lens-rows-empty {
  padding: 12px 0;
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

/* "See more" link — text only, no button chrome. */
.lens-link {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 0;
  font-size: 11.5px;
  color: var(--text-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
}
.lens-link:hover { color: var(--accent); }

/* ── Defense card hierarchy ─────────────────────────────────────────────
   Three levels of importance carried by type scale, not by container chrome:
     Level 1 (.defense-lead-title)   — the answer        16px / weight 500
     Level 1.5 (.defense-lead-sub)   — supporting copy   12.5px muted
     Level 2 (.deal-defense-action)  — primary action    button
     Level 3 (panel rows / meter)    — evidence          12px

   Everything aligns flush to the same left edge — no border indents that
   shift content horizontally between lens states. Urgency is signalled by
   a small colored dot before the title, not by recoloring the title. */
.deal-defense-kicker {
  margin-bottom: 14px;
}
.defense-lead {
  margin: 0 0 16px;
}
.defense-lead-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-1);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.defense-lead-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  margin-top: 2px;
  align-self: center;
  background: var(--text-3);
}
.defense-lead-dot.tone-warn { background: var(--warn); }
.defense-lead-dot.tone-amber { background: var(--accent); }
.defense-lead-dot.tone-good { background: var(--good); }
.defense-lead-sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-3);
}

/* When the action row follows the lead in truth lens, the existing border-top
   hairline already provides a visual separator. Trim its top margin so the
   rhythm stays even (lead margin-bottom is doing the work). */
.defense-lead + .deal-defense-action {
  margin-top: 0;
}

/* The lens panel below the lead — eyebrow label + hairline rows + link. */
.lens-panel-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 6px;
}

/* When the lens is seller/buyer the right-column meter is hidden, so we
   collapse the deal-defense grid to a single column and let the panel
   breathe full-width. */
.deal-defense.lens-fullwidth,
.deal-defense.is-focused.lens-fullwidth {
  grid-template-columns: minmax(0, 1fr);
}
.lens-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  row-gap: 4px;
  column-gap: 16px;
}
.lens-panel-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.lens-panel-meta {
  font-size: 12px;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lens-panel-meta b { color: var(--text-1); font-weight: 600; }
.lens-panel-meta em { color: var(--text-3); font-style: normal; }
.lens-panel-meta .lens-thin { color: var(--warn); }
.lens-panel-subhead {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 2px;
}
.lens-panel-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* MEDDPICC pillar coverage — flowing pill row (covered = filled accent, thin
   = ghost outline). Replaces the old 8-cell grid; reads more like natural
   tags and wraps gracefully. */
.pillar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.pillar-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-3);
  background: transparent;
  white-space: nowrap;
  line-height: 1.4;
}
.pillar-pill .pillar-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  flex: 0 0 auto;
}
.pillar-pill.is-covered {
  background: var(--good-soft);
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 30%, transparent);
}
.pillar-pill.is-thin {
  border-style: dashed;
}

/* Inline MEDDPICC codes next to an activity row — bare colored mono text,
   no chrome. Reads like a tag without competing with the title. */
.meddpicc-chip-row {
  display: inline-flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-self: end;
}
.meddpicc-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: transparent;
  border: 0;
  padding: 0;
}
.meddpicc-chip.is-empty {
  color: var(--text-3);
  opacity: 0.5;
}

/* Activity rows inside lens panels — tighter than the full Activity tab. */
.lens-activity {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lens-activity-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.lens-activity-row.side-buyer { border-left: 2px solid var(--info); }
.lens-activity-row.side-seller { border-left: 2px solid var(--accent); }
.lens-activity-row.side-mixed { border-left: 2px solid var(--good); }
.lens-activity-row.side-ai { border-left: 2px solid color-mix(in srgb, var(--text-3) 60%, transparent); }
.lens-activity-ic {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--text-2);
}
.lens-activity-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lens-activity-title {
  font-size: 12.5px;
  color: var(--text-1);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lens-activity-sub {
  font-size: 11px;
  color: var(--text-3);
}
.lens-activity-empty {
  padding: 12px;
  border-radius: 8px;
  border: 1px dashed var(--border);
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
}

/* "Owns" column on buyer-lens activity rows. */
.buyer-owns {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  max-width: 220px;
  text-align: right;
}
.buyer-owns-l {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.buyer-owns-v {
  font-size: 11.5px;
  color: var(--text-2);
  line-height: 1.25;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Champion classification rows — multi-stakeholder roles. Hairline-
   separated rows instead of nested cards, so the section sits inside the
   deal-room hierarchy as one flat zone rather than boxes-in-boxes. The
   role tone is signalled by a left-edge color stripe + tag chip, not by
   recoloring the whole row's fill. */
.champion-class-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.champion-class-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0 12px 12px;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
}
.champion-class-card::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 2px;
  border-radius: 999px;
  background: var(--text-3);
  opacity: 0.4;
}
.champion-class-card:last-child { border-bottom: 0; }
.champion-class-card[data-role="primary-champion"]::before { background: var(--good); opacity: 0.85; }
.champion-class-card[data-role="co-champion"]::before { background: var(--good); opacity: 0.55; }
.champion-class-card[data-role="mobilizer"]::before { background: var(--info); opacity: 0.75; }
.champion-class-card[data-role="sponsor"]::before { background: var(--accent); opacity: 0.75; }
.champion-class-card[data-role="blocker-risk"]::before { background: var(--warn); opacity: 0.85; }
.champion-class-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}
.champion-class-name { font-size: 13px; font-weight: 600; color: var(--text-1); }
.champion-class-role { font-size: 11px; color: var(--text-3); }
.champion-class-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-2);
}
.champion-class-tag.tone-good { background: var(--good-soft); color: var(--good); }
.champion-class-tag.tone-info { background: var(--info-soft); color: var(--info); }
.champion-class-tag.tone-amber { background: var(--accent-soft); color: var(--accent); }
.champion-class-tag.tone-warn { background: var(--warn-soft); color: var(--warn); }
.champion-class-meters {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text-3);
}
.champion-class-meters b { color: var(--text-1); font-weight: 600; }
.champion-class-move {
  font-size: 11.5px;
  color: var(--text-2);
  padding-top: 5px;
  border-top: 1px dashed var(--border);
}

/* Supporter rail — low-signal stakeholders rolled up under the champion grid. */
.champion-supporters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}
.champion-supporters-l {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-right: 2px;
}
.champion-supporters-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
}

@media (max-width: 760px) {
  .lens-activity-row { grid-template-columns: 22px minmax(0, 1fr); }
  .lens-activity-row .meddpicc-chip-row,
  .lens-activity-row .buyer-owns,
  .lens-activity-row .follow-badge { grid-column: 2; justify-self: start; align-items: flex-start; max-width: none; text-align: left; }
}

/* ---------- Activity tab: lens views (Timeline / Seller / Buyer) ---------- */
/* Single header row: section title on the left, both controls grouped on the
   right. The lens switch is the primary pill toggle; the kind filter is a
   lighter inline button group so the two don't read as duplicate switchers. */
.activity-section-h {
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
}
.activity-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.activity-lens-switch {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.activity-lens-switch button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-3);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  letter-spacing: 0;
  text-transform: none;
}
.activity-lens-switch button:hover { color: var(--text-2); }
.activity-lens-switch button.is-active {
  background: var(--bg-2);
  color: var(--text-1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
/* Kind filter — sub-control of the Timeline view, now lives on its own
   row below the section header (no longer stacked next to the lens
   switcher). Quieter visual treatment — text-link style, prefixed by a
   small mono "Filter" label so it reads as a refinement, not a tab. */
.activity-kind-filter {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 16px;
}
.activity-kind-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-right: 8px;
}
.activity-kind-btn {
  appearance: none;
  background: transparent;
  border: none;
  padding: 4px 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-3);
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
  transition: color 120ms ease, background 120ms ease;
}
.activity-kind-btn:hover { color: var(--text-2); background: var(--surface-2); }
.activity-kind-btn.is-active {
  color: var(--accent);
  background: var(--accent-soft);
}

/* Timeline rows: side stripe + inline chips. Existing .dd-act layout
   keeps doing the heavy lifting; we only add the side stripe and chip
   row styling. */
.dd-act.side-seller { box-shadow: inset 2px 0 0 var(--accent); }
.dd-act.side-buyer { box-shadow: inset 2px 0 0 var(--info); }
.dd-act.side-mixed { box-shadow: inset 2px 0 0 var(--good); }
.dd-act.side-ai { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--text-3) 60%, transparent); }
.dd-act-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  white-space: nowrap;
}
.dd-act-aside .meddpicc-chip-row { justify-self: end; }

/* Inline lens panel inside the Activity tab — lighter than the defense card. */
.lens-panel-inline {
  margin-top: 4px;
  background: transparent;
  border: none;
  padding: 0;
}
.lens-panel-inline > .lens-panel-head { margin-bottom: 4px; }

/* Follow-through badge on buyer commitment rows. */
.follow-badge {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  max-width: 240px;
  justify-self: end;
}
.follow-badge .follow-badge-l {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.follow-badge .follow-badge-l b {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}
.follow-badge .follow-badge-l em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--text-3);
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.follow-badge.tone-good { border-color: color-mix(in srgb, var(--good) 35%, transparent); background: var(--good-soft); color: var(--good); }
.follow-badge.tone-good .follow-badge-l b { color: var(--good); }
.follow-badge.tone-warn { border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-soft); color: var(--warn); }
.follow-badge.tone-warn .follow-badge-l b { color: var(--warn); }
.follow-badge.tone-muted { color: var(--text-3); }
.follow-badge.tone-muted .follow-badge-l b { color: var(--text-2); }

.buyer-commitment-text {
  font-size: 11.5px;
  color: var(--text-2);
  font-style: italic;
  line-height: 1.3;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Activity-tab full-width buyer rows need extra room for the badge. */
.lens-panel-inline .lens-activity-row {
  grid-template-columns: 22px minmax(0, 1fr) auto;
}

/* ---------- Forecast model (manager view) ---------- */
.fcal {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 22px 60px;
  overflow: auto;
  flex: 1;             /* fill remaining height under workspace header */
  min-height: 0;       /* let overflow:auto actually trigger */
  min-width: 0;
}
.fcal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.fcal-head h2.h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.fcal-head-l { min-width: 0; }
/* Config tab section header — same hero treatment as Recalc / Deals / Backtest
   so all four sections share a consistent identity row. */
.fcal-config-head {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.fcal-config-head h2.h2 { font-size: 18px; font-weight: 600; }

.fcal-scenarios {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  gap: 2px;
}
.fcal-scenario {
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  border: 0;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.fcal-scenario:hover { color: var(--text); }
.fcal-scenario.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.fcal-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  align-self: flex-start;
}
.fcal-tab {
  height: 32px;
  padding: 0 14px;
  border-radius: 9px;
  background: transparent;
  border: 0;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.fcal-tab:hover { color: var(--text); }
.fcal-tab.is-active {
  background: var(--surface);
  color: var(--text);
}

/* (Recalc 4-up KPI strip removed — its data lives in the hero + lens now.) */

.fcal-pipeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
}
.fcal-pipeline-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.fcal-pipeline-head h3 { font-size: 13px; font-weight: 600; margin: 0; }
.fcal-pipeline-bar {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--surface-2);
}
.fcal-pipeline-seg { display: block; min-width: 1px; height: 100%; }
.fcal-pipeline-seg.seg-commit       { background: var(--good); }
.fcal-pipeline-seg.seg-most-likely  { background: var(--info); }
.fcal-pipeline-seg.seg-best-case    { background: var(--accent); }
.fcal-pipeline-seg.seg-omitted      { background: var(--warn); }
.fcal-pipeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  font-size: 12px;
  color: var(--text-2);
}
.fcal-leg { display: inline-flex; align-items: center; gap: 6px; }
.fcal-leg em { width: 8px; height: 8px; border-radius: 2px; }
.fcal-leg em.seg-commit       { background: var(--good); }
.fcal-leg em.seg-most-likely  { background: var(--info); }
.fcal-leg em.seg-best-case    { background: var(--accent); }
.fcal-leg em.seg-omitted      { background: var(--warn); }
.fcal-leg b { color: var(--text); font-weight: 600; font-feature-settings: "tnum" 1; }

.fcal-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fcal-table-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.fcal-table-head h3 { margin: 0; font-size: 13px; font-weight: 600; }
.fcal-table { display: flex; flex-direction: column; }
.fcal-tr {
  display: grid;
  grid-template-columns:
    minmax(200px, 1.6fr) minmax(110px, 0.9fr) 80px minmax(110px, 0.8fr)
    minmax(100px, 0.8fr) 60px 60px 90px 90px minmax(110px, 0.9fr);
  gap: 10px;
  align-items: center;
  padding: 10px 6px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: background 100ms ease;
}
.fcal-tr:hover:not(.fcal-tr-head) { background: var(--surface-2); }
.fcal-tr.is-selected {
  background: var(--accent-soft);
  border-radius: 8px;
}
.fcal-tr-head {
  cursor: default;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-weight: 500;
}
.fcal-tr-head:hover { background: transparent; }
.fcal-tr .num {
  font-feature-settings: "tnum" 1;
  text-align: right;
  white-space: nowrap;
}
.fcal-cell-deal {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fcal-cell-deal b { font-weight: 600; }
.fcal-cell-deal em { font-size: 11px; font-style: normal; }
.fcal-flag-pill {
  align-self: flex-start;
  margin-top: 4px;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--risk-soft);
  color: var(--risk);
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
.fcal-prob { font-weight: 600; font-feature-settings: "tnum" 1; }
.fcal-prob.tone-good  { color: var(--good); }
.fcal-prob.tone-amber { color: var(--accent); }
.fcal-prob.tone-warn  { color: var(--risk); }

.fcal-gapbar {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 16px;
  border-radius: 4px;
  background: var(--surface-2);
  overflow: hidden;
}
.fcal-gapbar em {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  display: block;
}
.fcal-gapbar em.tone-good  { background: var(--good-soft); border-right: 1px solid var(--good); }
.fcal-gapbar em.tone-amber { background: var(--accent-soft); border-right: 1px solid var(--accent); }
.fcal-gapbar em.tone-warn  { background: var(--risk-soft); border-right: 1px solid var(--risk); }
.fcal-gapbar b {
  position: relative;
  margin-left: auto;
  padding-right: 6px;
  font-size: 10px;
  font-weight: 600;
  font-feature-settings: "tnum" 1;
  color: var(--text);
}

.fcal-theatre {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
}
.fcal-theatre-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.fcal-theatre-head h3 { margin: 0; font-size: 13px; font-weight: 600; }
.fcal-theatre-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
}
.fcal-theatre-item button {
  width: 100%;
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.fcal-theatre-item button:hover {
  background: var(--surface-3);
  border-color: var(--border-strong, var(--border));
}
.fcal-theatre-item b { font-size: 12px; font-weight: 600; }
.fcal-theatre-item span { font-size: 12px; color: var(--text-2); }
.fcal-theatre-item em { font-size: 11px; font-style: normal; }

.fcal-risk {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fcal-risk-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.fcal-risk-head h3 { margin: 4px 0 0; font-size: 16px; font-weight: 600; }
.fcal-risk-actions { display: inline-flex; gap: 8px; }
.fcal-risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.fcal-risk-cell {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fcal-risk-cell.is-highlight {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.fcal-risk-cell em {
  font-size: 11px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.fcal-risk-cell b {
  font-size: 18px;
  font-weight: 600;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}
.fcal-risk-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.fcal-risk-col em {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.fcal-risk-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
}
.fcal-risk-list li {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  line-height: 1.4;
}

.fcal-config {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fcal-config-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 14px;
}
@media (max-width: 900px) {
  .fcal-config-grid { grid-template-columns: 1fr; }
}
.fcal-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.fcal-block h3 { margin: 0; font-size: 13px; font-weight: 600; }
/* Inter-section rhythm without nesting boxes. The hero/table-wrap keep their
   own surfaces; everything else relies on whitespace + hairlines. The grid
   exclusion stops side-by-side blocks (Model basics / Formula) from picking
   up a stray top divider. */
.fcal-block + .fcal-block {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.fcal-config-grid > .fcal-block + .fcal-block {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.fcal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fcal-field > span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.fcal-source-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.fcal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.fcal-formula {
  margin: 0;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-2);
  white-space: pre-wrap;
}

.fcal-formula-editor {
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fcal-formula-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fcal-formula-line-secondary { padding-top: 4px; border-top: 1px dashed var(--border); margin-top: 2px; }
.fcal-formula-body {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding-left: 16px;
}
.fcal-formula-out { color: var(--text); font-weight: 600; }
.fcal-formula-eq, .fcal-formula-mul { color: var(--text-3); }
.fcal-formula-base { color: var(--text-2); }
.fcal-formula-token { display: inline-flex; align-items: center; gap: 6px; }
.fcal-formula-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  transition: border-color 140ms ease, background 140ms ease;
}
.fcal-formula-chip:hover { border-color: var(--accent); }
.fcal-formula-chip em { font-style: normal; font-weight: 600; color: var(--text); }
.fcal-formula-dot { color: var(--text-3); }
.fcal-formula-weight {
  width: 36px;
  padding: 1px 2px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
}
.fcal-formula-weight::-webkit-outer-spin-button,
.fcal-formula-weight::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fcal-formula-weight:focus {
  outline: none;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--accent);
}
.fcal-formula-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 140ms ease, color 140ms ease;
}
.fcal-formula-remove:hover { background: var(--warn-soft); color: var(--warn); }
.fcal-formula-add { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.fcal-formula-add-btn {
  padding: 2px 10px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 999px;
  color: var(--text-3);
  font: inherit;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.fcal-formula-add-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }
.fcal-formula-add-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 26px;
  z-index: 20;
  min-width: 220px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-sans, system-ui, sans-serif);
}
.fcal-formula-add-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}
.fcal-formula-add-item:hover { background: var(--surface-2); }
.fcal-formula-add-item b { font-family: "Geist Mono", ui-monospace, SFMono-Regular, monospace; font-size: 11px; }

.fcal-rows {
  display: flex;
  flex-direction: column;
}
.fcal-row {
  display: grid;
  grid-template-columns: minmax(200px, 1.4fr) minmax(180px, 2fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 0;
}
.fcal-row:first-child { border-top: 0; }
.fcal-row.is-disabled { opacity: 0.55; }
.fcal-row-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fcal-row-l b { font-size: 12px; font-weight: 600; }
.fcal-row-c { display: flex; align-items: center; gap: 10px; }
.fcal-row-c input[type="range"] { flex: 1; accent-color: var(--accent); }
.fcal-row-c .mono.small { min-width: 36px; text-align: right; font-size: 11px; color: var(--text-2); }
.fcal-row-r { display: flex; align-items: center; }

.fcal-toggle {
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  padding: 1px;
  position: relative;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.fcal-toggle span {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--text-3);
  transform: translateX(0);
  transition: transform 140ms ease, background 140ms ease;
}
.fcal-toggle.is-on { background: var(--accent); border-color: var(--accent); }
.fcal-toggle.is-on span { transform: translateX(16px); background: var(--accent-ink, white); }

.fcal-empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 30px;
  text-align: center;
}

@media (max-width: 1100px) {
  .fcal-tr {
    grid-template-columns:
      minmax(180px, 1.4fr) minmax(90px, 0.8fr) 70px minmax(90px, 0.7fr)
      minmax(90px, 0.8fr) 50px 50px 80px 80px minmax(100px, 0.9fr);
  }
}

/* ---------- Forecast model — comprehension upgrades ---------- */
/* ── Gap inspection hero ──
   One bold figure (at-risk), one supporting line (supported / declared),
   one calm proportion bar. All other detail lives in the lens below — the
   hero stays a single headline. Single tone (warn/amber) carries severity. */
/* ── Recalc tab — slot-based draggable layout ──
   Mirrors the AE-cockpit pattern: widgets live directly on the page canvas
   (no card surface), separated by whitespace + a subtle bottom-fade
   ::after divider. Slots reorder via HTML5 drag on the widget's eyebrow
   row. Picker fills empty slots; "Add slot" extends the stack. */
.recalc-stack { padding-top: 4px; }
.recalc-widget {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 22px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.recalc-widget::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 10px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--text) 6%, transparent) 0%,
    transparent 100%
  );
  opacity: 0.7;
}
.recalc-widget > * { position: relative; }
.recalc-widget-head {
  display: flex;
  align-items: center;
  cursor: grab;
}
.recalc-widget-head:active { cursor: grabbing; }
.recalc-widget-body { display: flex; flex-direction: column; gap: 14px; }
.recalc-widget-sub {
  margin: 0;
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.recalc-widget-sub b { color: var(--text); font-weight: 600; }

.recalc-widget--hero .fcal-hero-inline {
  display: flex; flex-direction: column; gap: 14px;
}

/* (Legacy .fcal-hero / .fcal-scan section wrappers — kept below for content
   styling, but the widget shell now provides the outer chrome.) */

.fcal-hero {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.fcal-hero.tone-warn { /* tone reflected on parent widget border */ }
.fcal-hero.tone-amber { /* tone reflected on parent widget border */ }
.fcal-hero-head { display: flex; flex-direction: column; gap: 10px; }

/* Headline — one BIG number + a quiet "at risk" suffix on the baseline. */
.fcal-hero-headline {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  line-height: 1;
  letter-spacing: -0.025em;
}
.fcal-hero-headline b {
  font-size: 38px;
  font-weight: 700;
  font-feature-settings: "tnum" 1;
  color: var(--text);
  white-space: nowrap;
}
.fcal-hero-headline b.tone-warn  { color: var(--risk); }
.fcal-hero-headline b.tone-amber { color: var(--accent); }
.fcal-hero-headline b.tone-good  { color: var(--good); }
.fcal-hero-suffix {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0;
}

/* One supporting line — declared & supported amounts, neutral throughout. */
.fcal-hero-sub {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-3);
}
.fcal-hero-sub b {
  color: var(--text-2);
  font-weight: 600;
  font-feature-settings: "tnum" 1;
}

/* Thin proportion bar — supported segment is a calm neutral so the at-risk
   stripes carry the only colour weight. No labels above or below. */
.fcal-hero-bar {
  display: flex;
  height: 8px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.fcal-hero-bar-supported {
  display: block;
  height: 100%;
  background: color-mix(in oklch, var(--text-3) 38%, transparent);
  transition: width 240ms ease;
}
.fcal-hero-bar-atrisk {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--risk) 48%, transparent),
    color-mix(in srgb, var(--risk) 48%, transparent) 6px,
    color-mix(in srgb, var(--risk) 16%, transparent) 6px,
    color-mix(in srgb, var(--risk) 16%, transparent) 12px
  );
  transition: width 240ms ease;
}
.fcal-hero-bar-atrisk.tone-amber {
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--accent) 60%, transparent),
    color-mix(in srgb, var(--accent) 60%, transparent) 6px,
    color-mix(in srgb, var(--accent) 22%, transparent) 6px,
    color-mix(in srgb, var(--accent) 22%, transparent) 12px
  );
}
.fcal-hero-narrative {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.fcal-hero-narrative .cp-eyebrow-dot {
  margin-top: 8px;
  flex-shrink: 0;
}
.fcal-hero-narrative p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  letter-spacing: -0.01em;
}
.fcal-hero-narrative b { font-weight: 600; font-feature-settings: "tnum" 1; }
.fcal-hero-narrative b.hl { color: var(--accent); }
.fcal-hero-narrative .muted { color: var(--text-3); }

.fcal-hero-compare {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fcal-compare {
  display: grid;
  grid-template-columns: 110px 1fr 80px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.fcal-compare-label {
  color: var(--text-2);
  font-weight: 500;
}
.fcal-compare.is-highlight .fcal-compare-label { color: var(--text); font-weight: 600; }
.fcal-compare-track {
  position: relative;
  height: 10px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.fcal-compare-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 200ms ease;
}
.fcal-compare-fill.tone-muted  { background: var(--surface-3); }
.fcal-compare-fill.tone-info   { background: var(--info); opacity: 0.7; }
.fcal-compare-fill.tone-accent { background: var(--accent); }
.fcal-compare-value {
  text-align: right;
  font-feature-settings: "tnum" 1;
  font-weight: 600;
  color: var(--text);
}
.fcal-compare:not(.is-highlight) .fcal-compare-value { font-weight: 500; }

/* New table grid: 8 columns instead of 10. */
.fcal-tr {
  grid-template-columns:
    minmax(200px, 1.4fr) minmax(110px, 0.9fr) 80px minmax(110px, 0.9fr)
    minmax(180px, 1.4fr) 100px minmax(120px, 0.9fr) minmax(220px, 1.6fr);
}
@media (max-width: 1100px) {
  .fcal-tr {
    grid-template-columns:
      minmax(170px, 1.4fr) minmax(90px, 0.8fr) 70px minmax(90px, 0.8fr)
      minmax(150px, 1.3fr) 90px minmax(110px, 0.9fr) minmax(180px, 1.4fr);
  }
}

.fcal-cell-prob { display: flex; align-items: center; min-width: 0; }
.fcal-prob-compare {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.fcal-prob-pair {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-feature-settings: "tnum" 1;
  font-size: 12px;
}
.fcal-prob-pair em { font-style: normal; color: var(--text-3); }
.fcal-prob-pair b { font-size: 13px; font-weight: 600; }
.fcal-prob-pair b.tone-good  { color: var(--good); }
.fcal-prob-pair b.tone-amber { color: var(--accent); }
.fcal-prob-pair b.tone-warn  { color: var(--risk); }
.fcal-prob-arrow { color: var(--text-3); font-size: 12px; }
.fcal-prob-bar {
  position: relative;
  display: block;
  height: 4px;
  width: 100%;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}
.fcal-prob-bar em {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 2px;
  display: block;
}
.fcal-prob-bar em.declared {
  background: var(--surface-3);
  z-index: 1;
}
.fcal-prob-bar em.adjusted {
  z-index: 2;
}
.fcal-prob-bar em.adjusted.tone-good  { background: var(--good); }
.fcal-prob-bar em.adjusted.tone-amber { background: var(--accent); }
.fcal-prob-bar em.adjusted.tone-warn  { background: var(--risk); }

.fcal-cell-reason {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fcal-cell-reason em {
  font-style: normal;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fcal-cell-reason-more {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Pipeline segment labels */
.fcal-pipeline-bar { height: 28px; border-radius: 8px; }
.fcal-pipeline-seg {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 10px;
  position: relative;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.95);
  font-size: 11px;
  font-weight: 600;
}
[data-theme="light"] .fcal-pipeline-seg { color: rgba(255, 255, 255, 0.95); }
.fcal-pipeline-seg-label {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  letter-spacing: 0;
}
.fcal-pipeline-seg-label em { font-style: normal; opacity: 0.85; font-weight: 500; }
.fcal-pipeline-seg-label b { font-feature-settings: "tnum" 1; }

/* Config row impact column (extra column appended) */
.fcal-row {
  grid-template-columns: minmax(200px, 1.4fr) minmax(180px, 2fr) 100px auto;
}
.fcal-row-impact {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.fcal-impact {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  font-feature-settings: "tnum" 1;
  background: var(--surface-3);
  color: var(--text-2);
  white-space: nowrap;
}
.fcal-impact.tone-info  { background: var(--info-soft, var(--surface-3)); color: var(--info); }
.fcal-impact.tone-amber { background: var(--accent-soft); color: var(--accent); }
.fcal-impact.tone-warn  { background: var(--risk-soft); color: var(--risk); }
.fcal-impact.tone-muted { background: var(--surface-3); color: var(--text-3); }
.fcal-impact.tone-good  { background: var(--good-soft, rgba(34, 197, 94, 0.12)); color: var(--good); }

/* ---------- Business cadence ----------
   Hero period heading + clickable year-rhythm strip + slim controls. The
   block is one piece — no inner borders — so the year strip reads as the
   centerpiece, not three separate widgets stacked. */
.fcal-cadence {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 22px 18px;
  background:
    radial-gradient(900px 220px at 12% -30%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
/* The cadence block has its own surface; cancel the inter-block divider that
   .fcal-block + .fcal-block normally adds when stacked under Saved models. */
.fcal-cadence.fcal-block + .fcal-block,
.fcal-block + .fcal-cadence.fcal-block {
  margin-top: 16px;
  padding-top: 16px;
}
.fcal-cadence.fcal-block + .fcal-block { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); padding-top: 16px; }

.fcal-cadence-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.fcal-cadence-hero-l { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fcal-cadence-period {
  margin: 4px 0 2px;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text);
  font-feature-settings: "tnum" 1;
}
.fcal-cadence-meta {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
  font-feature-settings: "tnum" 1;
}
.fcal-cadence-meta .muted { color: var(--text-3); }

.fcal-cadence-days {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
}
.fcal-cadence-days.tone-good  { border-color: color-mix(in srgb, var(--good)   45%, var(--border)); background: color-mix(in srgb, var(--good)   8%, var(--surface)); }
.fcal-cadence-days.tone-amber { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.fcal-cadence-days.tone-warn  { border-color: color-mix(in srgb, var(--risk)   28%, var(--border)); background: color-mix(in srgb, var(--risk)   5%, var(--surface)); }
.fcal-cadence-days-num {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
  color: var(--text);
}
.fcal-cadence-days.tone-good  .fcal-cadence-days-num { color: var(--good); }
.fcal-cadence-days.tone-amber .fcal-cadence-days-num { color: var(--accent); }
.fcal-cadence-days.tone-warn  .fcal-cadence-days-num { color: var(--risk); }
.fcal-cadence-days-label {
  margin-top: 4px;
  font-family: var(--font-mono, "Geist Mono", ui-monospace, monospace);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

/* Year rhythm strip — clickable tiles for each chunk in the FY. */
.fcal-cadence-strip { display: flex; flex-direction: column; gap: 6px; }
.fcal-cadence-tiles {
  display: grid;
  gap: 8px;
}
.fcal-cadence-tiles.is-wide   { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.fcal-cadence-tiles.is-tight  { grid-template-columns: repeat(12, minmax(0, 1fr)); }
@media (max-width: 880px) {
  .fcal-cadence-tiles.is-tight { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.fcal-cadence-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 10px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
  min-width: 0;
}
.fcal-cadence-tile:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.fcal-cadence-tile.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--text);
}
.fcal-cadence-tile.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
  pointer-events: none;
}
.fcal-cadence-tile-label {
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.005em;
}
.fcal-cadence-tile-sub {
  font-size: 11px;
  color: var(--text-3);
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
.fcal-cadence-tiles.is-tight .fcal-cadence-tile { padding: 10px 6px 8px; align-items: center; text-align: center; }
.fcal-cadence-tiles.is-tight .fcal-cadence-tile-label { font-size: 12px; }
.fcal-cadence-tiles.is-tight .fcal-cadence-tile-sub { display: none; }
.fcal-cadence-tile-today {
  position: absolute;
  top: 6px;
  right: 8px;
  font-family: var(--font-mono, "Geist Mono", ui-monospace, monospace);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--text);
  color: var(--surface);
}
.fcal-cadence-tile.is-active .fcal-cadence-tile-today { background: var(--accent); color: var(--accent-ink, white); }
.fcal-cadence-tiles.is-tight .fcal-cadence-tile-today {
  top: 4px; right: 4px; font-size: 7.5px; padding: 0 4px;
}

.fcal-cadence-strip-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

/* Compact controls under the strip — cadence pills and FY-start dropdown
   side-by-side instead of three stacked rows. */
.fcal-cadence-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.fcal-cadence-control {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.fcal-cadence-label {
  font-family: var(--font-mono, "Geist Mono", ui-monospace, monospace);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  white-space: nowrap;
}
.fcal-cadence-pills {
  display: inline-flex;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  gap: 2px;
}
.fcal-cadence-pill {
  padding: 6px 14px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--text-2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  white-space: nowrap;
}
.fcal-cadence-pill:hover { color: var(--text); }
.fcal-cadence-pill.is-active {
  background: var(--accent);
  color: var(--accent-ink, white);
  font-weight: 600;
}
.fcal-cadence-fy {
  width: auto;
  min-width: 200px;
}
.fcal-cadence-fy:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- Saved models ---------- */
.fcal-saved { display: flex; flex-direction: column; gap: 10px; }
.fcal-saved-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.fcal-saved-head h3 { margin: 0 0 2px; }
.fcal-saved-draft {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 280px;
  max-width: 480px;
}
.fcal-saved-draft .input { flex: 1; }
.fcal-saved-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.fcal-saved-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  background: transparent;
  border-radius: 0;
  transition: background 140ms ease;
}
.fcal-saved-item:first-child { border-top: 0; }
.fcal-saved-item:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.fcal-saved-item.is-current {
  background: var(--accent-soft);
  border-radius: 8px;
  padding-left: 10px;
  padding-right: 10px;
  border-top-color: transparent;
}
.fcal-saved-item.is-current + .fcal-saved-item { border-top-color: transparent; }
.fcal-saved-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fcal-saved-meta b { font-size: 12px; font-weight: 600; }
.fcal-saved-actions { display: flex; align-items: center; gap: 6px; }
.fcal-saved-del:hover { color: var(--warn); }

/* ---------- Backtest tab ---------- */
.fcal-backtest-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.fcal-backtest-head h3 { font-size: 16px; }
.fcal-backtest-period { display: inline-flex; gap: 6px; }

.fcal-buckets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.fcal-bucket {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.fcal-bucket-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fcal-bucket-head b { font-size: 12px; font-weight: 600; }
.fcal-bucket-tracks { display: flex; flex-direction: column; gap: 4px; }
.fcal-bucket-track {
  display: grid;
  grid-template-columns: 64px 1fr 36px;
  align-items: center;
  gap: 8px;
}
.fcal-bucket-track-label { font-style: normal; font-size: 11px; color: var(--text-3); }
.fcal-bucket-bar {
  position: relative;
  height: 8px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}
.fcal-bucket-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 200ms ease;
}
.fcal-bucket-fill.expected { background: var(--text-3); opacity: 0.6; }
.fcal-bucket-fill.actual { background: var(--accent); }
.fcal-bucket-fill.actual.tone-good  { background: var(--good); }
.fcal-bucket-fill.actual.tone-amber { background: var(--accent); }
.fcal-bucket-fill.actual.tone-warn  { background: var(--risk); }
.fcal-bucket-empty { padding-left: 6px; }
.fcal-bucket-drift { display: flex; }

.fcal-compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fcal-compare-item {
  display: grid;
  grid-template-columns: minmax(200px, 1.4fr) minmax(280px, 2fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.fcal-compare-item.is-current { border-color: var(--accent); }
.fcal-compare-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fcal-compare-name b { font-size: 12px; font-weight: 600; }
.fcal-compare-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.fcal-compare-stats span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fcal-compare-stats em { font-style: normal; }
.fcal-compare-stats b { font-size: 13px; font-feature-settings: "tnum" 1; }
.fcal-compare-stats b.tone-good  { color: var(--good); }
.fcal-compare-stats b.tone-amber { color: var(--accent); }
.fcal-compare-stats b.tone-warn  { color: var(--risk); }

.fcal-misses { display: flex; flex-direction: column; gap: 6px; }
.fcal-miss {
  display: grid;
  grid-template-columns: minmax(200px, 1.2fr) minmax(280px, 2fr);
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.fcal-miss-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fcal-miss-l b { font-size: 12px; font-weight: 600; }
.fcal-miss-c {
  display: grid;
  grid-template-columns: 80px 80px 1fr;
  align-items: center;
  gap: 12px;
}
.fcal-miss-c span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fcal-miss-c em { font-style: normal; }
.fcal-miss-c b { font-size: 13px; font-feature-settings: "tnum" 1; }
.fcal-miss-c b.tone-good { color: var(--good); }
.fcal-miss-c b.tone-warn { color: var(--risk); }

@media (max-width: 900px) {
  .fcal-compare-item { grid-template-columns: 1fr; }
  .fcal-miss { grid-template-columns: 1fr; }
}

/* ---------- Backtest hero (new) ---------- */
.fcal-bt-hero {
  position: relative;
  background:
    radial-gradient(1200px 240px at 8% -20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(800px 200px at 100% 0%, color-mix(in srgb, var(--info, var(--accent)) 12%, transparent), transparent 55%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px 20px;
  margin-bottom: 12px;
  overflow: hidden;
}
.fcal-bt-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.fcal-bt-hero-head h2 { font-size: 18px; font-weight: 600; }
.fcal-bt-meta-sep { margin: 0 8px; color: var(--text-3); }
.fcal-bt-hero-body {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 980px) {
  .fcal-bt-hero-body { grid-template-columns: 1fr; }
}

.fcal-bt-score {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
}
.fcal-bt-score-num {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.fcal-bt-score-num b {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.fcal-bt-score-num em { font-style: normal; font-size: 16px; color: var(--text-3); }
.fcal-bt-score-num.tone-good b  { color: var(--good); }
.fcal-bt-score-num.tone-amber b { color: var(--accent); }
.fcal-bt-score-num.tone-warn b  { color: var(--risk); }
.fcal-bt-score-track {
  height: 6px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}
.fcal-bt-score-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 220ms ease;
}
.fcal-bt-score-fill.tone-good  { background: var(--good); }
.fcal-bt-score-fill.tone-amber { background: var(--accent); }
.fcal-bt-score-fill.tone-warn  { background: var(--risk); }
.fcal-bt-score-label {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fcal-bt-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 8px 0 0;
}
.fcal-bt-stat {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.fcal-bt-stat:first-child { border-top: 0; padding-top: 4px; }
.fcal-bt-stat dt {
  margin: 0;
  font-size: 11px;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
}
.fcal-bt-stat dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  font-feature-settings: "tnum" 1;
  text-align: right;
  color: var(--text);
}
.fcal-bt-stat dd.tone-good  { color: var(--good); }
.fcal-bt-stat dd.tone-amber { color: var(--accent); }
.fcal-bt-stat dd.tone-warn  { color: var(--warn); }
.fcal-bt-stat-sub { margin-left: 6px; font-weight: 500; }

.fcal-bt-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 0 0 0 20px;
  background: transparent;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--text-3) 25%, transparent);
}
@media (max-width: 980px) {
  .fcal-bt-chart {
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--text-3) 25%, transparent);
  }
}
.fcal-bt-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.fcal-bt-chart-legend { display: inline-flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fcal-bt-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-2);
}
.fcal-bt-legend-item .line {
  display: inline-block;
  width: 18px;
  height: 0;
  border-top: 2px solid var(--text-3);
}
.fcal-bt-legend-item .line.dashed { border-top-style: dashed; }
.fcal-bt-legend-item .line.solid.tone-good  { border-top-color: var(--good); }
.fcal-bt-legend-item .line.solid.tone-amber { border-top-color: var(--accent); }
.fcal-bt-legend-item .line.solid.tone-warn  { border-top-color: var(--warn); }

/* SVG reliability chart */
.fcal-bt-rel-svg { width: 100%; height: auto; max-height: 320px; display: block; }
.fcal-bt-rel-grid line { stroke: var(--border); stroke-width: 1; opacity: 0.6; }
.fcal-bt-rel-diagonal { stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0.7; }
.fcal-bt-rel-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.fcal-bt-rel-line.tone-good  { stroke: var(--good); }
.fcal-bt-rel-line.tone-amber { stroke: var(--accent); }
.fcal-bt-rel-line.tone-warn  { stroke: var(--warn); }
.fcal-bt-rel-drift { stroke: none; opacity: 0.18; }
.fcal-bt-rel-drift.tone-good  { fill: var(--good); }
.fcal-bt-rel-drift.tone-amber { fill: var(--accent); }
.fcal-bt-rel-drift.tone-warn  { fill: var(--warn); }
.fcal-bt-rel-dot { stroke: var(--surface-2); stroke-width: 2; }
.fcal-bt-rel-dot.tone-good  { fill: var(--good); }
.fcal-bt-rel-dot.tone-amber { fill: var(--accent); }
.fcal-bt-rel-dot.tone-warn  { fill: var(--warn); }
.fcal-bt-rel-axis { fill: var(--text-3); font-size: 10px; font-family: var(--font-sans, system-ui, sans-serif); }
.fcal-bt-rel-axis-title { fill: var(--text-3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }
.fcal-bt-rel-dot-label { fill: var(--text-2); font-size: 10px; font-weight: 600; font-family: var(--font-sans, system-ui, sans-serif); font-feature-settings: "tnum" 1; }

.fcal-bt-bucket-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.fcal-bt-bucket-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
}
.fcal-bt-bucket-chip-band { font-style: normal; font-weight: 600; color: var(--text); }
.fcal-bt-bucket-chip-count { color: var(--text-3); }
.fcal-bt-bucket-chip-drift { font-weight: 600; }
.fcal-bt-bucket-chip-drift.tone-good  { color: var(--good); }
.fcal-bt-bucket-chip-drift.tone-amber { color: var(--accent); }
.fcal-bt-bucket-chip-drift.tone-warn  { color: var(--warn); }
.fcal-bt-bucket-chip-drift.tone-muted { color: var(--text-3); }

/* ---------- Backtest leaderboard (new) ---------- */
.fcal-bt-leaderboard {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.fcal-bt-rank {
  display: grid;
  grid-template-columns: 32px minmax(180px, 1.4fr) minmax(200px, 2fr) minmax(160px, 1.2fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 0;
  transition: background 140ms ease;
}
.fcal-bt-rank:first-child { border-top: 0; }
.fcal-bt-rank:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.fcal-bt-rank.is-active {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-radius: 8px;
  padding-left: 10px;
  padding-right: 10px;
  border-top-color: transparent;
}
.fcal-bt-rank.is-active + .fcal-bt-rank { border-top-color: transparent; }
.fcal-bt-rank-pos {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-align: center;
}
.fcal-bt-rank-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fcal-bt-rank-name b { font-size: 13px; font-weight: 600; }
.fcal-bt-rank-score { display: grid; grid-template-columns: 1fr 36px; align-items: center; gap: 10px; }
.fcal-bt-rank-bar {
  height: 8px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}
.fcal-bt-rank-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 220ms ease;
}
.fcal-bt-rank-fill.tone-good  { background: var(--good); }
.fcal-bt-rank-fill.tone-amber { background: var(--accent); }
.fcal-bt-rank-fill.tone-warn  { background: var(--warn); }
.fcal-bt-rank-num {
  font-size: 14px;
  font-weight: 700;
  font-feature-settings: "tnum" 1;
  text-align: right;
}
.fcal-bt-rank-num.tone-good  { color: var(--good); }
.fcal-bt-rank-num.tone-amber { color: var(--accent); }
.fcal-bt-rank-num.tone-warn  { color: var(--warn); }
.fcal-bt-rank-stats { display: flex; gap: 16px; }
.fcal-bt-rank-stats span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fcal-bt-rank-stats em { font-style: normal; }
.fcal-bt-rank-stats b { font-size: 12px; font-feature-settings: "tnum" 1; font-weight: 600; }
.fcal-bt-rank-action { display: flex; align-items: center; }

@media (max-width: 980px) {
  .fcal-bt-rank {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "pos name action" "score score score" "stats stats stats";
  }
  .fcal-bt-rank-pos    { grid-area: pos; }
  .fcal-bt-rank-name   { grid-area: name; }
  .fcal-bt-rank-score  { grid-area: score; }
  .fcal-bt-rank-stats  { grid-area: stats; }
  .fcal-bt-rank-action { grid-area: action; justify-self: end; }
}

/* ---------- Backtest top misses (new visual axis) ---------- */
.fcal-bt-misses { display: flex; flex-direction: column; }
.fcal-bt-miss {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(280px, 2.2fr) minmax(160px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 0;
}
.fcal-bt-miss:first-child { border-top: 0; }
@media (max-width: 980px) {
  .fcal-bt-miss { grid-template-columns: 1fr; }
}
.fcal-bt-miss-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fcal-bt-miss-meta b { font-size: 13px; font-weight: 600; }
.fcal-bt-miss-axis { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.fcal-bt-miss-track {
  position: relative;
  height: 28px;
  margin: 0 14px;
}
.fcal-bt-miss-baseline {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--surface-3);
  border-radius: 999px;
  transform: translateY(-50%);
}
.fcal-bt-miss-tick {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 6px;
  background: var(--border);
  transform: translate(-50%, -50%);
}
.fcal-bt-miss-drift {
  position: absolute;
  top: 50%;
  height: 4px;
  border-radius: 999px;
  transform: translateY(-50%);
  opacity: 0.45;
}
.fcal-bt-miss-drift.tone-amber { background: var(--accent); }
.fcal-bt-miss-drift.tone-warn  { background: var(--warn); }
.fcal-bt-miss-marker {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface);
  border: 2px solid var(--text-3);
}
.fcal-bt-miss-marker em {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-2);
  font-feature-settings: "tnum" 1;
}
.fcal-bt-miss-marker.outcome em {
  bottom: auto;
  top: calc(100% + 4px);
}
.fcal-bt-miss-marker.pred.tone-amber { border-color: var(--accent); background: var(--accent); }
.fcal-bt-miss-marker.pred.tone-warn  { border-color: var(--warn); background: var(--warn); }
.fcal-bt-miss-marker.pred em { color: var(--text-2); }
.fcal-bt-miss-marker.outcome.won  { border-color: var(--good); background: var(--good); }
.fcal-bt-miss-marker.outcome.lost { border-color: var(--warn); background: var(--warn); }
.fcal-bt-miss-marker.outcome em { color: var(--text-3); }
.fcal-bt-miss-axis-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
}
.fcal-bt-miss-axis-labels em {
  font-style: normal;
  font-size: 10px;
  color: var(--text-3);
  font-feature-settings: "tnum" 1;
}
.fcal-bt-miss-tag {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  text-align: center;
}
.fcal-bt-miss-tag.tone-amber { background: var(--accent-soft); color: var(--accent); }
.fcal-bt-miss-tag.tone-warn  { background: var(--warn-soft); color: var(--warn); }
.fcal-bt-miss-tag b { font-feature-settings: "tnum" 1; font-weight: 700; margin: 0 2px; }

/* ---------- Typography polish across the module ---------- */
.fcal-block h3,
.fcal-pipeline-head h3,
.fcal-theatre-head h3,
.fcal-table-head h3,
.fcal-saved-head h3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  display: inline-flex;
  align-items: center;
}
.fcal-bt-hero + .fcal-block { margin-top: 16px; }
.fcal-block + .fcal-table-wrap { margin-top: 16px; }

/* Refined InfoTip — subtler icon, same affordance */
.fcal-tip-icon {
  width: 13px;
  height: 13px;
  background: transparent;
  border-color: color-mix(in srgb, var(--text-3) 50%, transparent);
  color: var(--text-3);
  font-size: 8px;
  font-weight: 600;
}
.fcal-tip-icon:hover,
.fcal-tip-icon:focus-visible {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
}

/* ---------- Theatre warnings: action cards ---------- */
.fcal-theatre-cards {
  display: flex;
  flex-direction: column;
}
.fcal-theatre-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 0;
}
.fcal-theatre-card:first-child { border-top: 0; padding-top: 4px; }
.fcal-theatre-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.fcal-theatre-card-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fcal-theatre-card-title b { font-size: 13px; font-weight: 600; }
.fcal-theatre-card-flag {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
}
.fcal-theatre-card-ask {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 0 0 12px;
  border-left: 3px solid color-mix(in srgb, var(--accent) 70%, var(--border));
  background: transparent;
  border-radius: 0;
}
.fcal-theatre-card-ask p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-2);
  font-style: italic;
}
/* (Theatre carousel now reuses the coach-carousel deck — generic rotative
   chrome, named for the surface it first shipped on. The old cp-priority
   single-card variant lived here.) */

.fcal-theatre-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}

/* ---------- Risk explain: recommended action banner ---------- */
.fcal-risk-reco {
  margin-top: 4px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fcal-risk-reco.tone-warn  { border-color: color-mix(in srgb, var(--risk)   32%, var(--border)); background: var(--risk-soft); }
.fcal-risk-reco.tone-amber { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: var(--accent-soft); }
.fcal-risk-reco.tone-good  { border-color: color-mix(in srgb, var(--good)   55%, var(--border)); background: var(--good-soft); }
.fcal-risk-reco-label {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-2);
}
.fcal-risk-reco.tone-warn  .fcal-risk-reco-label { color: var(--risk); }
.fcal-risk-reco.tone-amber .fcal-risk-reco-label { color: var(--accent); }
.fcal-risk-reco.tone-good  .fcal-risk-reco-label { color: var(--good); }
.fcal-risk-reco p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

/* ---------- Backtest score diagnosis ---------- */
.fcal-bt-score-diag {
  margin: 4px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
  background: var(--surface);
  color: var(--text-2);
  border-left: 3px solid var(--border);
}
.fcal-bt-score-diag.tone-good  { border-left-color: var(--good); color: var(--text); }
.fcal-bt-score-diag.tone-amber { border-left-color: var(--accent); color: var(--text); }
.fcal-bt-score-diag.tone-warn  { border-left-color: var(--risk); color: var(--text); }

/* ---------- Backtest misses pattern diagnosis ---------- */
.fcal-bt-diagnosis {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 10px;
}
.fcal-bt-diagnosis p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.fcal-bt-diagnosis b { font-weight: 600; color: var(--text); }

/* ---------- Recalc · charts row (donut + column chart, side-by-side) ---------- */
/* (Twin-chart .fcal-charts-row removed — replaced by the lens + focused
   chart pattern below.) */

/* (Old .fcal-scan / .fcal-scan-head / .fcal-scan-grid wrappers removed —
   replaced by the slot-based recalc-widget shell. The .fcal-rank-* and
   .fcal-ae-* content classes below are still used inside the widgets.) */
/* ── Ranked deals ── */
.fcal-rank-list { list-style: none; margin: 0; padding: 0; }
.fcal-rank-row {
  position: relative;
  border-bottom: 1px solid var(--hairline);
}
.fcal-rank-row:last-child { border-bottom: 0; }
.fcal-rank-row::before {
  content: "";
  position: absolute;
  left: 0; top: 9px; bottom: 9px;
  width: 2px;
  border-radius: 999px;
  background: transparent;
}
.fcal-rank-row.tone-warn::before { background: var(--warn); }
.fcal-rank-row.tone-amber::before { background: var(--accent); }
.fcal-rank-btn {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 11px 6px 11px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: background 120ms ease;
}
.fcal-rank-btn:hover {
  background: color-mix(in oklch, var(--text) 5%, transparent);
}
.fcal-rank-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.fcal-rank-co {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fcal-rank-co b {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fcal-rank-co em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fcal-rank-gap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.fcal-rank-gap b {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.fcal-rank-gap b.tone-warn  { color: var(--warn); }
.fcal-rank-gap b.tone-amber { color: var(--accent); }
.fcal-rank-gap em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ── AE rollup ── */
.fcal-ae-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fcal-ae-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 12px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.fcal-ae-row:hover {
  background: color-mix(in oklch, var(--text) 5%, transparent);
}
.fcal-ae-row.is-active {
  border-color: color-mix(in oklch, var(--accent) 50%, var(--hairline-strong));
  background: color-mix(in oklch, var(--accent) 6%, transparent);
}
.fcal-ae-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.fcal-ae-name {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.fcal-ae-name b {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
}
.fcal-ae-name em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.fcal-ae-gap {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.fcal-ae-gap b {
  font-size: 13.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.fcal-ae-gap b.tone-warn  { color: var(--warn); }
.fcal-ae-gap b.tone-amber { color: var(--accent); }
.fcal-ae-gap b.tone-good  { color: var(--good); }
.fcal-ae-gap em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}

.fcal-ae-bar {
  display: flex;
  width: 100%;
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.fcal-ae-bar-sup {
  display: block;
  height: 100%;
  background: color-mix(in oklch, var(--text-3) 35%, transparent);
  transition: width 220ms ease;
}
.fcal-ae-bar-gap {
  display: block;
  height: 100%;
  transition: width 220ms ease;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--warn) 60%, transparent),
    color-mix(in srgb, var(--warn) 60%, transparent) 5px,
    color-mix(in srgb, var(--warn) 22%, transparent) 5px,
    color-mix(in srgb, var(--warn) 22%, transparent) 10px
  );
}
.fcal-ae-bar-gap.tone-amber {
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--accent) 60%, transparent),
    color-mix(in srgb, var(--accent) 60%, transparent) 5px,
    color-mix(in srgb, var(--accent) 22%, transparent) 5px,
    color-mix(in srgb, var(--accent) 22%, transparent) 10px
  );
}
.fcal-ae-bar-gap.tone-good {
  background: color-mix(in oklch, var(--good) 35%, transparent);
}

/* Donut */
.fcal-donut {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.fcal-donut-wrap { width: 100%; max-width: 260px; }
.fcal-donut-svg { width: 100%; height: auto; display: block; }
.fcal-donut-track { fill: var(--surface-2); stroke: none; }
.fcal-donut-slice { stroke: var(--surface); stroke-width: 1.5; transition: opacity 140ms ease; cursor: default; }
.fcal-donut-slice:hover { opacity: 0.85; }
.fcal-donut-slice.seg-commit       { fill: var(--good); }
.fcal-donut-slice.seg-most-likely  { fill: var(--info); }
.fcal-donut-slice.seg-best-case    { fill: var(--accent); }
.fcal-donut-slice.seg-omitted      { fill: var(--warn); }
.fcal-donut-total {
  fill: var(--text);
  font-size: 22px;
  font-weight: 700;
  font-feature-settings: "tnum" 1;
  font-family: var(--font-sans, system-ui, sans-serif);
  letter-spacing: -0.01em;
}
.fcal-donut-sub {
  fill: var(--text-3);
  font-size: 10px;
  font-family: var(--font-mono, "Geist Mono", ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.fcal-donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.fcal-donut-leg {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  font-size: 12px;
}
.fcal-donut-leg:first-child { border-top: 0; }
.fcal-donut-key {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--text-3);
}
.fcal-donut-key.seg-commit       { background: var(--good); }
.fcal-donut-key.seg-most-likely  { background: var(--info); }
.fcal-donut-key.seg-best-case    { background: var(--accent); }
.fcal-donut-key.seg-omitted      { background: var(--warn); }
.fcal-donut-leg-label { color: var(--text); font-weight: 500; }
.fcal-donut-leg-value { color: var(--text); font-weight: 600; font-feature-settings: "tnum" 1; }
.fcal-donut-leg-pct { font-feature-settings: "tnum" 1; }

/* Vertical column chart — By AE */
/* (.fcal-charts-owners removed — owner chart now lives in the focused-chart slot.) */
.fcal-owner-cols-svg { width: 100%; height: auto; max-height: 280px; display: block; overflow: visible; }
.fcal-owner-cols-grid line { stroke: var(--border); stroke-width: 1; opacity: 0.5; stroke-dasharray: 2 3; }
.fcal-owner-cols-axis {
  fill: var(--text-3);
  font-size: 10px;
  font-feature-settings: "tnum" 1;
  font-family: var(--font-sans, system-ui, sans-serif);
}
.fcal-owner-cols-baseline { stroke: var(--border); stroke-width: 1; }
.fcal-owner-col-supported { fill: var(--accent); transition: opacity 140ms ease; }
.fcal-owner-col-atrisk {
  fill: color-mix(in srgb, var(--warn) 35%, transparent);
  stroke: color-mix(in srgb, var(--warn) 60%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 2;
  transition: opacity 140ms ease;
}
.fcal-owner-col-atrisk.tone-amber {
  fill: color-mix(in srgb, var(--accent) 35%, transparent);
  stroke: color-mix(in srgb, var(--accent) 60%, transparent);
}
.fcal-owner-col-atrisk.tone-good {
  fill: color-mix(in srgb, var(--good) 25%, transparent);
  stroke: color-mix(in srgb, var(--good) 50%, transparent);
}
.fcal-owner-col-name {
  fill: var(--text);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans, system-ui, sans-serif);
}
.fcal-owner-col-meta {
  fill: var(--text-3);
  font-size: 10px;
  font-family: var(--font-sans, system-ui, sans-serif);
}
.fcal-owner-col-gap {
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.04em;
}
.fcal-owner-col-gap.tone-good  { fill: var(--good); }
.fcal-owner-col-gap.tone-amber { fill: var(--accent); }
.fcal-owner-col-gap.tone-warn  { fill: var(--warn); }
.fcal-owner-col-hit {
  fill: transparent;
  transition: fill 140ms ease;
}
.fcal-owner-col.is-clickable { cursor: pointer; }
.fcal-owner-col.is-clickable:hover .fcal-owner-col-hit,
.fcal-owner-col:focus-visible .fcal-owner-col-hit {
  fill: color-mix(in srgb, var(--text) 5%, transparent);
}
.fcal-owner-col:focus-visible { outline: none; }
.fcal-owner-col.is-active .fcal-owner-col-hit { fill: color-mix(in srgb, var(--accent) 8%, transparent); }
.fcal-owner-col.is-active .fcal-owner-col-supported { stroke: var(--accent); stroke-width: 2; }
.fcal-owner-col.is-active .fcal-owner-col-name { fill: var(--accent); }

/* ---------- Recalc · By AE breakdown ---------- */
.fcal-owners {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.fcal-owner {
  display: grid;
  grid-template-columns: minmax(160px, 1.1fr) minmax(220px, 2.4fr) minmax(160px, auto) auto;
  gap: 16px;
  align-items: center;
  padding: 12px 8px;
  margin: 0 -8px;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  width: calc(100% + 16px);
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  border-radius: 8px;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  transition: background 140ms ease;
}
.fcal-owner.is-clickable {
  cursor: pointer;
  border: 0;
  border-radius: 8px;
}
.fcal-owner.is-clickable:hover {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
.fcal-owner.is-clickable:hover .fcal-owner-go {
  color: var(--accent);
  transform: translateX(2px);
}
.fcal-owner.is-active {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow: inset 3px 0 0 0 var(--accent);
}
.fcal-owner.is-active .fcal-owner-go { color: var(--accent); }
li:first-child .fcal-owner { border-top: 0; }
.fcal-owner-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--text-3);
  transition: color 140ms ease, transform 140ms ease;
}
.fcal-owner-l {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fcal-owner-l b { font-size: 13px; font-weight: 600; }
.fcal-owner-l em { font-style: normal; }
.fcal-owner-l em .tone-warn { color: var(--warn); font-weight: 600; }
.fcal-owner-bar {
  display: flex;
  height: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.fcal-owner-bar-supported {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 220ms ease;
}
.fcal-owner-bar-atrisk {
  display: block;
  height: 100%;
  transition: width 220ms ease;
}
.fcal-owner-bar-atrisk.tone-warn {
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--warn) 50%, transparent),
    color-mix(in srgb, var(--warn) 50%, transparent) 6px,
    color-mix(in srgb, var(--warn) 18%, transparent) 6px,
    color-mix(in srgb, var(--warn) 18%, transparent) 12px
  );
}
.fcal-owner-bar-atrisk.tone-amber {
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--accent) 55%, transparent),
    color-mix(in srgb, var(--accent) 55%, transparent) 6px,
    color-mix(in srgb, var(--accent) 18%, transparent) 6px,
    color-mix(in srgb, var(--accent) 18%, transparent) 12px
  );
}
.fcal-owner-bar-atrisk.tone-good {
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--good) 50%, transparent),
    color-mix(in srgb, var(--good) 50%, transparent) 6px,
    color-mix(in srgb, var(--good) 18%, transparent) 6px,
    color-mix(in srgb, var(--good) 18%, transparent) 12px
  );
}
.fcal-owner-r {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  white-space: nowrap;
}
.fcal-owner-r b {
  font-feature-settings: "tnum" 1;
  font-weight: 600;
  font-size: 13px;
}
.fcal-owner-r b .muted { color: var(--text-3); margin: 0 4px; font-weight: 400; }
.fcal-owner-gap {
  font-style: normal;
  font-feature-settings: "tnum" 1;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.fcal-owner-gap.tone-warn  { color: var(--warn); }
.fcal-owner-gap.tone-amber { color: var(--accent); }
.fcal-owner-gap.tone-good  { color: var(--good); }

@media (max-width: 900px) {
  .fcal-owner { grid-template-columns: 1fr; }
  .fcal-owner-r { align-items: flex-start; }
}

/* ---------- Forecast Recalculation Kanban ---------- */
.fcal-kanban-section { display: flex; flex-direction: column; gap: 12px; }
.fcal-kanban-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
/* Deals tab head — mirrors the Backtest hero treatment without the gradient,
   so a manager scanning between tabs sees consistent header rhythm. */
.fcal-deals-tab { display: flex; flex-direction: column; gap: 16px; }
.fcal-deals-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.fcal-deals-head h2 { font-size: 18px; font-weight: 600; }
.fcal-deals-head p { font-size: 13px; line-height: 1.5; }
.fcal-deals-head p b { color: var(--text); font-weight: 600; font-feature-settings: "tnum" 1; }
.fcal-deals-head-r {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.fcal-deals-hint { margin: 0; }
/* Persistent filter chip row — sits above section headers, lists active
   filters as removable chips. Empty state renders nothing. */
.fcal-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}
.fcal-filter-bar > em {
  font-style: normal;
  margin-right: 2px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.fcal-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 12px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.fcal-filter-chip:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.fcal-filter-chip em { font-style: normal; text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; }
.fcal-filter-chip b { font-weight: 600; }
.fcal-filter-chip svg { color: var(--text-3); transition: color 140ms ease; }
.fcal-filter-chip:hover svg { color: var(--text); }
.fcal-filter-clear {
  margin-left: auto;
  background: transparent;
  border: 0;
  padding: 4px 8px;
  font: inherit;
  font-size: 11px;
  color: var(--text-3);
  cursor: pointer;
  border-radius: 6px;
  transition: color 140ms ease, background 140ms ease;
}
.fcal-filter-clear:hover { color: var(--text); background: var(--surface-2); }
/* Card body content for the kanban — probability declared → evidence pair
   and the "Recommend" row. Body itself uses pipeline-card-body styling
   (hidden by default, expands on hover/focus) inherited from the AE deals. */
.fcal-kanban-prob {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fcal-kanban-prob-pair {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-feature-settings: "tnum" 1;
}
.fcal-kanban-prob-pair em {
  font-style: normal;
  font-size: 12px;
  color: var(--text-3);
}
.fcal-kanban-prob-arrow { color: var(--text-3); font-size: 12px; }
.fcal-kanban-prob-pair b {
  font-size: 13px;
  font-weight: 600;
}
.fcal-kanban-prob-pair b.tone-good  { color: var(--good); }
.fcal-kanban-prob-pair b.tone-amber { color: var(--accent); }
.fcal-kanban-prob-pair b.tone-warn  { color: var(--warn); }
.fcal-kanban-prob-gap {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
}
.fcal-kanban-prob-gap.tone-good  { background: var(--good-soft, color-mix(in srgb, var(--good) 12%, transparent)); color: var(--good); }
.fcal-kanban-prob-gap.tone-amber { background: var(--accent-soft); color: var(--accent); }
.fcal-kanban-prob-gap.tone-warn  { background: var(--warn-soft); color: var(--warn); }
.fcal-kanban-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-feature-settings: "tnum" 1;
}
.fcal-kanban-cat em { font-style: normal; }

/* ---------- Forecast Room (manager modal) ---------- */
.forecast-room .modal-head { gap: 12px; }
.forecast-room-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fcal-room-tab {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 16px;
}
.fcal-room-section { display: flex; flex-direction: column; gap: 10px; }
.fcal-room-section h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

/* Story tab — declared / CRM / evidence comparison */
.fcal-room-compare {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fcal-room-compare-row {
  display: grid;
  grid-template-columns: 150px 1fr 90px 50px;
  gap: 14px;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
}
.fcal-room-compare-row.is-highlight .fcal-room-compare-label { color: var(--text); font-weight: 600; }
.fcal-room-compare-label {
  display: inline-flex;
  align-items: center;
  color: var(--text-2);
  font-weight: 500;
}
.fcal-room-compare-track {
  height: 10px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.fcal-room-compare-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 220ms ease;
}
.fcal-room-compare-fill.tone-muted { background: var(--surface-3); }
.fcal-room-compare-fill.tone-info  { background: var(--info); opacity: 0.7; }
.fcal-room-compare-fill.tone-good  { background: var(--good); }
.fcal-room-compare-fill.tone-amber { background: var(--accent); }
.fcal-room-compare-fill.tone-warn  { background: var(--warn); }
.fcal-room-compare-row b {
  font-feature-settings: "tnum" 1;
  font-weight: 600;
  text-align: right;
  color: var(--text);
}
.fcal-room-compare-row em {
  text-align: right;
  font-feature-settings: "tnum" 1;
}

.fcal-room-reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.fcal-room-reasons li {
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.fcal-room-reasons li:first-child { border-top: 0; }

/* Math tab — probability waterfall */
.fcal-room-intro {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.fcal-room-intro b { font-weight: 600; color: var(--text); font-feature-settings: "tnum" 1; }
.fcal-room-waterfall {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.fcal-room-step {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(200px, 2fr) 110px;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.fcal-room-step:first-child { border-top: 0; }
.fcal-room-step.is-base .fcal-room-step-fill { background: var(--text-3); }
.fcal-room-step.is-buffer .fcal-room-step-l b { color: var(--accent); }
.fcal-room-step-l {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fcal-room-step-l b { font-size: 13px; font-weight: 600; }
.fcal-room-step-bar {
  height: 12px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.fcal-room-step-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 220ms ease;
}
.fcal-room-step-r {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
}
.fcal-room-step-r b {
  font-feature-settings: "tnum" 1;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

/* Triggers tab — buffers + flags */
.fcal-room-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.fcal-room-trigger {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.fcal-room-trigger:first-child { border-top: 0; }
.fcal-room-trigger-bullet {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--warn);
  margin-top: 8px;
}

.fcal-room-flags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.fcal-room-flag {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.fcal-room-flag:first-child { border-top: 0; padding-top: 4px; }
.fcal-room-flag-text {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
}
.fcal-room-flag-ask {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 4px 12px;
  border-left: 3px solid color-mix(in srgb, var(--accent) 70%, var(--border));
}
.fcal-room-flag-ask p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
  font-style: italic;
}

/* ---------- Variable tuning hints ---------- */
.fcal-row-impact { display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: wrap; }
.fcal-hint {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid currentColor;
  background: transparent;
}
.fcal-hint.tone-amber { color: var(--accent); }
.fcal-hint.tone-warn  { color: var(--warn); }
.fcal-hint.tone-muted { color: var(--text-3); }

/* ---------- Inline info tooltips ---------- */
.fcal-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  vertical-align: middle;
}
.fcal-tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-3);
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 9px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  cursor: help;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.fcal-tip-icon:hover,
.fcal-tip-icon:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink, white);
  outline: none;
}
.fcal-tip-body {
  position: absolute;
  z-index: 1000;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 280px;
  padding: 8px 10px;
  background: var(--text);
  color: var(--surface);
  border-radius: 8px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  letter-spacing: 0.01em;
  white-space: normal;
  text-align: left;
  text-transform: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}
.fcal-tip-body::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--text);
}
.fcal-tip:hover .fcal-tip-body,
.fcal-tip:focus-within .fcal-tip-body {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s;
}
.fcal-tip-bottom .fcal-tip-body {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}
.fcal-tip-bottom .fcal-tip-body::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--text);
}
.fcal-tip-bottom:hover .fcal-tip-body,
.fcal-tip-bottom:focus-within .fcal-tip-body {
  transform: translateX(-50%) translateY(0);
}
/* Keep tooltips visible on top of cards/sections that clip overflow */
.fcal-block,
.fcal-pipeline,
.fcal-theatre,
.fcal-saved-head,
.fcal-tr-head { overflow: visible; }

/* ============================================================ */
/* Agents — chips, receipts panel, promise cards                */
/* ============================================================ */

/* ── AgentChip: inline attribution ───────────────────────────── */
.agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px 0 6px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--text-2);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.agent-chip:hover { background: var(--surface-3); border-color: var(--border-strong); }
.agent-chip-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: currentColor;
  flex-shrink: 0;
}
.agent-chip-name { font-weight: 600; }
.agent-chip-why { color: var(--text-3); font-weight: 400; font-style: italic; font-size: 10px; }
.agent-chip.is-compact { height: 20px; padding: 0 7px 0 5px; font-size: 10.5px; }
.agent-chip.is-compact .agent-chip-glyph { width: 14px; height: 14px; }

.agent-chip.tone-info   { color: var(--info);   background: var(--info-soft);   border-color: transparent; }
.agent-chip.tone-accent { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.agent-chip.tone-good   { color: var(--good);   background: var(--good-soft);   border-color: transparent; }

/* Agent avatar — used in receipts head + promise cards */
.agent-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.agent-avatar.tone-info   { background: var(--info-soft);   color: var(--info);   border-color: transparent; }
.agent-avatar.tone-accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.agent-avatar.tone-good   { background: var(--good-soft);   color: var(--good);   border-color: transparent; }

/* ── Receipts slide-over (right rail) ─────────────────────── */
.receipts-back {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(2px);
  z-index: 2147483600;
  display: flex; justify-content: flex-end;
  animation: receipts-fade 160ms ease;
}
@keyframes receipts-fade { from { opacity: 0; } to { opacity: 1; } }

.receipts-panel {
  position: relative;
  width: min(520px, 94vw);
  height: 100%;
  background: var(--bg-2);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto;
  animation: receipts-slide 240ms cubic-bezier(.2,.7,.3,1);
  --tone: var(--info);
  --tone-soft: var(--info-soft);
  box-shadow: -24px 0 60px -20px rgba(0,0,0,0.45);
}
.receipts-panel.tone-info   { --tone: var(--info);   --tone-soft: var(--info-soft);   }
.receipts-panel.tone-accent { --tone: var(--accent); --tone-soft: var(--accent-soft); }
.receipts-panel.tone-good   { --tone: var(--good);   --tone-soft: var(--good-soft);   }
@keyframes receipts-slide { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Thin agent-tone band at the very top — gives each agent's drawer a
   distinct visual identity without needing to color the chrome. */
.receipts-accent {
  position: sticky;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tone), color-mix(in oklch, var(--tone) 20%, transparent));
  z-index: 2;
}

/* Sticky cluster: header + meta + confidence stay pinned while the body
   scrolls. Translucent backdrop so the underlying content shows
   slightly when scrolled. */
.receipts-sticky {
  position: sticky;
  top: 3px;
  z-index: 1;
  background: color-mix(in oklch, var(--bg-2) 92%, transparent);
  backdrop-filter: blur(6px);
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--hairline);
}

.receipts-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px;
}
.receipts-head-l { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.receipts-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.receipts-head-text b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.receipts-head-text em {
  font-style: normal;
  font-size: 12px;
  color: var(--tone);
  font-weight: 500;
  letter-spacing: 0.005em;
}
.receipts-jurisdiction {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-3);
  margin-top: 6px;
  letter-spacing: 0.002em;
}

.agent-avatar.lg {
  width: 44px; height: 44px;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 6px 14px -8px rgba(0,0,0,0.5);
}

.receipts-close {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  flex-shrink: 0;
}
.receipts-close:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }
.receipts-close:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; }

.receipts-meta-block {
  display: flex; flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.receipts-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.receipts-deal-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-2);
}
.receipts-deal-tag b { font-weight: 600; color: var(--text); }

/* Confidence — flat horizontal bar with label above. Bar uses the
   agent's tone so confidence reads as "this agent's certainty". */
.receipts-confidence {
  display: flex; flex-direction: column; gap: 6px;
}
.receipts-confidence-label {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 11px;
}
.receipts-confidence-label em {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
}
.receipts-confidence-label b {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.receipts-confidence-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.receipts-confidence-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--tone);
  transition: width 320ms cubic-bezier(.2,.7,.3,1);
}

/* Scrolling body */
.receipts-body {
  padding: 16px 20px 8px;
  display: flex; flex-direction: column;
  gap: 18px;
}

.receipts-title {
  display: flex; flex-direction: column; gap: 6px;
}
.receipts-title h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.receipts-section {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 14px 0 0;
  border-top: 1px solid var(--hairline);
}
.receipts-section:first-of-type { border-top: none; padding-top: 0; }
.receipts-section-h {
  display: flex; align-items: center; gap: 8px;
}
.receipts-section-count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-3);
  padding: 2px 7px;
  background: var(--surface-2);
  border-radius: 999px;
  border: 1px solid var(--hairline);
}
.receipts-empty {
  margin: 0;
  padding: 8px 0;
  color: var(--text-3);
}

.receipts-signal {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.receipts-signal-h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.receipts-source {
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tone);
  padding: 2px 7px;
  background: color-mix(in oklch, var(--tone) 12%, var(--surface-3));
  border-radius: 6px;
}
.receipts-signal-when {
  font-style: normal;
  font-size: 10.5px;
  color: var(--text-3);
  font-family: var(--font-mono);
}
.receipts-signal p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}

/* Rules — labeled rows with a tone-coloured left rail, no bullets. */
.receipts-rules {
  margin: 0; padding: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 6px;
}
.receipts-rule {
  position: relative;
  padding: 8px 12px 8px 16px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.receipts-rule::before {
  content: "";
  position: absolute;
  left: 6px; top: 10px; bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: var(--tone);
  opacity: 0.7;
}

.receipts-quote {
  margin: 0;
  padding: 12px 14px;
  background: color-mix(in oklch, var(--tone) 6%, var(--surface-2));
  border: 1px solid color-mix(in oklch, var(--tone) 18%, var(--hairline));
  border-left: 3px solid var(--tone);
  border-radius: 0 12px 12px 0;
}
.receipts-quote p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  font-style: italic;
  color: var(--text);
  quotes: "\201C" "\201D";
}
.receipts-quote p::before { content: open-quote; }
.receipts-quote p::after  { content: close-quote; }
.receipts-quote em {
  font-style: normal;
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* Sticky footer so feedback actions stay reachable while scrolling. */
.receipts-foot {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 14px 20px 18px;
  background: color-mix(in oklch, var(--bg-2) 92%, transparent);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--hairline);
}
.receipts-foot-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.receipts-foot-note {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.4;
}

/* ── Promises screen ─────────────────────────────────────── */
.promises-screen { padding-bottom: 80px; }
.promises-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin: 8px 0 22px;
  flex-wrap: wrap;
}
.promises-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.promises-filter .fcal-scenario em { margin-left: 6px; }

.promises-stack {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}
.promise-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.promise-card.tone-info   { border-top: 3px solid var(--info); }
.promise-card.tone-amber  { border-top: 3px solid oklch(0.78 0.16 80); }
.promise-card.tone-good   { border-top: 3px solid var(--good); }
.promise-card.tone-muted  { border-top: 3px solid var(--border-strong); }

.promise-card-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.promise-card-id { display: flex; flex-direction: column; min-width: 0; }
.promise-card-id b { font-size: 13px; }
.promise-card-id em { font-style: normal; }

.promise-title { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 500; }
.promise-detail { margin: 0; line-height: 1.5; }

.promise-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.promise-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--border); }

/* ── Home feed attribution slot ──────────────────────────── */
.cp-feed-row-btn { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; }
.cp-feed-attribution { display: inline-flex; }

/* ═══════════════════════════════════════════════════════════════════════
 * NUDGE BRAND IDENTITY v2 — operational revenue control layer.
 *
 *   "Nudge forces the next real outcome."
 *
 * This block is self-contained: tokens, components, and preview-only
 * helpers. Every class is namespaced `.nudge-*` so the rest of the
 * prototype keeps its existing visual system untouched. Components
 * inherit their look from variables defined under `.nudge`, never from
 * the document-level tokens — so dropping `<div class="nudge">` anywhere
 * gets you the brand surface in isolation.
 * ═══════════════════════════════════════════════════════════════════ */

.nudge {
  /* Surfaces — dark is the product decision. Off-white is the inverse. */
  --color-bg-primary:   #0D0D0D;
  --color-bg-secondary: #161616;
  --color-bg-tertiary:  #1F1F1F;
  --color-bg-inverse:   #F5F3EE;

  /* Text */
  --color-text-primary:   #F5F3EE;
  --color-text-secondary: #A8A29E;
  --color-text-muted:     #57534E;
  --color-text-inverse:   #0D0D0D;

  /* Borders */
  --color-border-subtle:  #292524;
  --color-border-default: #3D3937;

  /* Signal dot system — the brand's semantic language. */
  --color-signal-missing:    transparent;
  --color-signal-weak:       #78716C;
  --color-signal-partial:    #57534E;
  --color-signal-verified:   #F5F3EE;
  --color-signal-risk:       #B45309;
  --color-signal-risk-muted: #1C1008;

  /* Accent — single operational color. Amber only. */
  --color-accent:       #B45309;
  --color-accent-muted: #1C1008;

  /* Type scale */
  --font-size-hero:  56px;
  --font-size-h1:    36px;
  --font-size-h2:    24px;
  --font-size-h3:    18px;
  --font-size-body:  14px;
  --font-size-label: 12px;
  --font-size-mono:  12px;
  --font-size-micro: 11px;

  /* Spacing — 4px base */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* Radius — moderate, never aggressive */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  /* Shadow — border-as-affordance, not depth */
  --shadow-subtle: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-panel:  0 0 0 1px var(--color-border-subtle);

  /* Fonts */
  --font-geist:   "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-inter:   "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-jb-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Apply on the surface itself. */
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-inter);
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: 1.6;
}

/* Light theme override — secondary, but tokens must exist. */
[data-theme="light"] .nudge {
  --color-bg-primary:   #F5F3EE;
  --color-bg-secondary: #EFEDE5;
  --color-bg-tertiary:  #E5E2D9;
  --color-bg-inverse:   #0D0D0D;
  --color-text-primary:   #0D0D0D;
  --color-text-secondary: #57534E;
  --color-text-muted:     #A8A29E;
  --color-text-inverse:   #F5F3EE;
  --color-border-subtle:  #D6D2C5;
  --color-border-default: #B5B0A1;
  --color-signal-weak:     #A8A29E;
  --color-signal-partial:  #78716C;
  --color-signal-verified: #0D0D0D;
}

/* ── Typography classes — Geist for display, Inter for body, JB Mono
 * for data. Mono is reserved strictly for facts, never for narrative. */
.nudge-hero-type {
  font-family: var(--font-geist);
  font-size: var(--font-size-hero);
  line-height: 1.0;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.nudge-h1 {
  font-family: var(--font-geist);
  font-size: var(--font-size-h1);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.nudge-h2 {
  font-family: var(--font-geist);
  font-size: var(--font-size-h2);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.nudge-h3 {
  font-family: var(--font-geist);
  font-size: var(--font-size-h3);
  line-height: 1.3;
  font-weight: 600;
  margin: 0;
}
.nudge-body {
  font-family: var(--font-inter);
  font-size: var(--font-size-body);
  line-height: 1.6;
  font-weight: 400;
  margin: 0;
}
.nudge-label {
  font-family: var(--font-inter);
  font-size: var(--font-size-label);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.nudge-mono {
  font-family: var(--font-jb-mono);
  font-size: var(--font-size-mono);
  line-height: 1.5;
  font-weight: 400;
}
.nudge-micro {
  font-family: var(--font-jb-mono);
  font-size: var(--font-size-micro);
  line-height: 1.4;
  font-weight: 400;
  color: var(--color-text-muted);
}
.nudge-muted    { color: var(--color-text-secondary); }
.nudge-faint    { color: var(--color-text-muted); }

/* ── Status dot — semantic signal language. */
.nudge-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  vertical-align: middle;
  flex-shrink: 0;
  box-sizing: border-box;
}
.nudge-dot[data-size="xs"]   { width: 4px;  height: 4px;  }
.nudge-dot[data-size="sm"]   { width: 6px;  height: 6px;  }
.nudge-dot[data-size="md"]   { width: 8px;  height: 8px;  }
.nudge-dot[data-size="lg"]   { width: 12px; height: 12px; }
.nudge-dot[data-state="missing"] {
  background: transparent;
  border: 1px solid var(--color-signal-risk);
}
.nudge-dot[data-state="weak"]     { background: var(--color-signal-weak); }
.nudge-dot[data-state="partial"]  { background: var(--color-signal-partial); }
.nudge-dot[data-state="verified"] { background: var(--color-signal-verified); }
.nudge-dot[data-state="risk"]     { background: var(--color-signal-risk); }

/* Dot processing animation — left→right cycle, no bounce, no fade loop. */
.nudge-dots-processing {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.nudge-dots-processing .nudge-dot {
  animation: nudgeDotProcess 1.4s ease-in-out infinite;
  background: var(--color-signal-weak);
}
.nudge-dots-processing .nudge-dot:nth-child(2) { animation-delay: 0.18s; }
.nudge-dots-processing .nudge-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes nudgeDotProcess {
  0%, 60%, 100% { background: var(--color-signal-weak);     transform: scale(1); }
  30%           { background: var(--color-signal-verified); transform: scale(1.15); }
}

/* ── Signal badge — [dot] [LABEL]. Communicates state inline. */
.nudge-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-jb-mono);
  font-size: var(--font-size-micro);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.nudge-badge[data-state="risk"]     { color: var(--color-signal-risk); border-color: color-mix(in oklch, var(--color-signal-risk) 40%, transparent); }
.nudge-badge[data-state="verified"] { color: var(--color-text-primary); }
.nudge-badge[data-state="missing"]  { color: var(--color-signal-risk); }

/* ── Card / operating panel — border is the affordance. */
.nudge-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.nudge-card[data-density="heavy"] { padding: var(--space-5); }
.nudge-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}
.nudge-card-head-empty + .nudge-card-body { margin-top: 0; }

/* ── Section header — three dots + LABEL + optional rule. */
.nudge-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.nudge-section-dots {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.nudge-section-rule {
  flex: 1;
  height: 1px;
  background: var(--color-border-subtle);
}

/* ── Risk / missing proof — left-rail amber, factual copy. */
.nudge-risk {
  background: var(--color-signal-risk-muted);
  border-left: 2px solid var(--color-signal-risk);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.nudge-risk-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.nudge-risk-headline {
  font-family: var(--font-inter);
  font-size: var(--font-size-body);
  font-weight: 500;
  color: var(--color-text-primary);
}
.nudge-risk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-jb-mono);
  font-size: var(--font-size-mono);
  color: var(--color-text-secondary);
}
.nudge-risk-list li::before {
  content: "—";
  margin-right: var(--space-2);
  color: var(--color-signal-risk);
}

/* ── Hero block — full-width dark, dot-grid texture, no gradients. */
.nudge-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.nudge-hero-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--color-text-secondary) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: 0 0;
  opacity: 0.04;
  pointer-events: none;
}
.nudge-hero-content { position: relative; z-index: 1; max-width: 64ch; }
.nudge-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.nudge-hero-sub {
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 56ch;
}

/* ── Empty state — three hollow dots, direct statement, no apologies. */
.nudge-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-7) var(--space-5);
  gap: var(--space-4);
}
.nudge-empty-dots {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.nudge-empty-headline {
  font-family: var(--font-geist);
  font-size: var(--font-size-h3);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  max-width: 34ch;
}
.nudge-empty-sub {
  font-family: var(--font-inter);
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 44ch;
}

/* ── Button system — uppercase, tracked, never rounded-full. */
.nudge-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  height: 32px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-inter);
  font-size: var(--font-size-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease, opacity 120ms ease, color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.nudge-btn[data-variant="primary"] {
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
}
.nudge-btn[data-variant="primary"]:hover  { opacity: 0.9; }
.nudge-btn[data-variant="secondary"] {
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}
.nudge-btn[data-variant="secondary"]:hover { background: var(--color-bg-tertiary); }
.nudge-btn[data-variant="risk"] {
  background: var(--color-signal-risk-muted);
  border-color: var(--color-signal-risk);
  color: var(--color-signal-risk);
}
.nudge-btn[data-variant="risk"]:hover { opacity: 0.9; }
.nudge-btn[data-variant="ghost"] {
  color: var(--color-text-secondary);
}
.nudge-btn[data-variant="ghost"]:hover  { background: var(--color-bg-tertiary); color: var(--color-text-primary); }

/* ── Deal Clarity Status Panel — three-dot row + flat field list. */
.nudge-clarity-dots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
}
.nudge-clarity-dot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.nudge-clarity-dot-label {
  font-family: var(--font-jb-mono);
  font-size: var(--font-size-micro);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.nudge-clarity-dot[data-state="missing"] .nudge-clarity-dot-label { color: var(--color-signal-risk); }
.nudge-clarity-fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.nudge-clarity-field {
  display: grid;
  grid-template-columns: minmax(160px, 200px) 1fr;
  gap: var(--space-4);
  align-items: baseline;
}
.nudge-clarity-field-label {
  font-family: var(--font-jb-mono);
  font-size: var(--font-size-micro);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.nudge-clarity-field-value {
  font-family: var(--font-jb-mono);
  font-size: var(--font-size-mono);
  color: var(--color-text-primary);
}
.nudge-clarity-field[data-missing="true"] .nudge-clarity-field-label { color: var(--color-signal-risk); }
.nudge-clarity-field[data-missing="true"] .nudge-clarity-field-value {
  font-style: italic;
  color: var(--color-text-muted);
}

/* ── Preview-page layout — owns its own grid. Not exported as a brand
 * primitive; only used inside /brand. */
.nudge-preview {
  min-height: 100vh;
  width: 100%;
  padding: var(--space-7) var(--space-7) var(--space-8);
  overflow-y: auto;
}
.nudge-preview-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.nudge-preview-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.nudge-preview-section > .nudge-section-header { margin-bottom: var(--space-2); }
.nudge-preview-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.nudge-preview-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.nudge-preview-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}
.nudge-preview-swatch {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
}
.nudge-preview-swatch-chip {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}
.nudge-preview-swatch-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.nudge-preview-logo-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  min-height: 140px;
}
.nudge-preview-logo-frame[data-bg="dark"]  { background: var(--color-bg-primary); }
.nudge-preview-logo-frame[data-bg="light"] { background: var(--color-bg-inverse); }
.nudge-preview-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-geist);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.nudge-preview-logo[data-on="dark"]  { color: var(--color-text-primary); }
.nudge-preview-logo[data-on="light"] { color: var(--color-text-inverse); }
.nudge-preview-logo-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nudge-preview-logo-dot {
  width: 10px; height: 10px; border-radius: 9999px;
}
.nudge-preview-logo[data-on="dark"]  .nudge-preview-logo-dot { background: var(--color-text-primary); }
.nudge-preview-logo[data-on="light"] .nudge-preview-logo-dot { background: var(--color-text-inverse); }

.nudge-preview-type-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: baseline;
  gap: var(--space-5);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.nudge-preview-type-row:last-child { border-bottom: 0; }
.nudge-preview-dot-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.nudge-preview-dot-row:last-child { border-bottom: 0; }
.nudge-preview-dot-meaning {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nudge-preview-dot-name {
  font-family: var(--font-jb-mono);
  font-size: var(--font-size-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}
.nudge-preview-dot-desc {
  font-family: var(--font-inter);
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
}

/* Quick anchor nav at top of preview */
.nudge-preview-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}
.nudge-preview-nav a {
  font-family: var(--font-jb-mono);
  font-size: var(--font-size-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}
.nudge-preview-nav a:hover { color: var(--color-text-primary); border-color: var(--color-border-default); }

@media (max-width: 720px) {
  .nudge-preview-grid-2,
  .nudge-preview-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .nudge-clarity-dots { grid-template-columns: minmax(0, 1fr); }
  .nudge-clarity-field { grid-template-columns: minmax(0, 1fr); }
}

/* ── Manager-lens Deal Room overview ─────────────────────────────────── */
/* Uses the regular .dd-section chrome (same as the AE Deal Truth tab) so
   the lens feels native to the platform. Tone lives inside the probability
   bar and the inflation stat — not on a tinted hero panel. */
.mgr-overview-hero .hero-title { color: var(--text); }
.mgr-overview-hero .dd-prose   { color: var(--text-2); max-width: 64ch; }
.mgr-overview-bar { margin: 12px 0 2px; }

.mgr-overview-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.mgr-overview-stats > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mgr-overview-stats > div > span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.mgr-overview-stats > div > b {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
}
.mgr-overview-stats > div > em {
  font-style: normal;
  font-size: 11px;
  color: var(--text-3);
}
.mgr-overview-gap.tone-warn  > b { color: var(--warn); }
.mgr-overview-gap.tone-amber > b { color: var(--accent); }
.mgr-overview-gap.tone-good  > b { color: var(--text); }

.mgr-overview-cat-move {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.mgr-overview-cat-move p {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
}
.mgr-overview-cat-move b { color: var(--text); font-weight: 600; }

.mgr-reasons {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.mgr-reasons li {
  position: relative;
  padding: 8px 0 8px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  border-bottom: 1px solid var(--hairline);
}
.mgr-reasons li:last-child { border-bottom: 0; }
.mgr-reasons li::before {
  content: "";
  position: absolute;
  left: 0; top: 15px;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--text-3);
}

.mgr-coaching-questions {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mgr-coaching-questions li {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  padding: 6px 0 6px 12px;
  border-left: 2px solid var(--hairline-strong);
}

@media (max-width: 720px) {
  .mgr-overview-stats { grid-template-columns: minmax(0, 1fr); }
}

/* ── Pipeline funnel (Letter from Addy) ─────────────────────────────────── */
.briefing-block-title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  line-height: 1.3;
  max-width: 60ch;
}
.pipeline-funnel {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pipeline-funnel:focus { outline: none; }
.pipeline-funnel.is-keyboard {
  outline: 2px solid color-mix(in oklch, rgba(99, 102, 241, 1) 35%, transparent);
  outline-offset: 8px;
  border-radius: 16px;
}

/* The column chart row — one button per stage, equal widths. */
.pipeline-chart-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.pipeline-col {
  appearance: none;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 14px 14px 12px;
  cursor: pointer;
  display: grid;
  grid-template-rows: auto 200px auto auto;
  gap: 10px;
  text-align: center;
  color: var(--text);
  font: inherit;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
  position: relative;
}
.pipeline-col:hover,
.pipeline-col.is-hovered {
  background: color-mix(in oklch, var(--text) 3%, transparent);
  border-color: var(--hairline-strong);
}
.pipeline-col.is-worst {
  background: color-mix(in oklch, var(--risk) 4%, transparent);
  border-color: color-mix(in oklch, var(--risk) 22%, var(--hairline-strong));
}
.pipeline-col.is-selected {
  background: color-mix(in oklch, rgba(99, 102, 241, 1) 8%, transparent);
  border-color: color-mix(in oklch, rgba(99, 102, 241, 1) 55%, var(--hairline-strong));
  box-shadow: 0 0 0 3px color-mix(in oklch, rgba(99, 102, 241, 1) 12%, transparent);
  transform: translateY(-1px);
}
.pipeline-col.is-worst.is-selected {
  background: color-mix(in oklch, var(--risk) 7%, transparent);
  border-color: color-mix(in oklch, var(--risk) 55%, var(--hairline-strong));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--risk) 9%, transparent);
}

.pipeline-col-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}
.pipeline-col-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.pipeline-col-count b {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pipeline-col-count em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.pipeline-col-money {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* Bar wrap is a fixed-height container; the bar grows upward from the bottom. */
.pipeline-col-bar-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.pipeline-col-bar {
  width: 78%;
  max-width: 110px;
  display: flex;
  flex-direction: column; /* active on top, lost at bottom */
  justify-content: flex-end;
  border-radius: 6px 6px 4px 4px;
  overflow: hidden;
  background: color-mix(in oklch, var(--text) 4%, transparent);
  min-height: 14px;
  transition: filter 160ms ease;
}
.pipeline-col:hover .pipeline-col-bar { filter: brightness(1.05); }
.pipeline-col-bar-active {
  display: block;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.55), rgba(99, 102, 241, 0.32));
}
.pipeline-col-bar-lost {
  display: block;
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.58), rgba(220, 38, 38, 0.85));
}
.pipeline-col.is-selected .pipeline-col-bar-active {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.75), rgba(99, 102, 241, 0.48));
}

.pipeline-col-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  padding-top: 6px;
  border-top: 1px solid var(--hairline);
}
.pipeline-col.is-worst .pipeline-col-name { color: var(--warn); }
.pipeline-col.is-selected .pipeline-col-name { color: var(--text); }

.pipeline-col-lost {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--warn);
  font-weight: 600;
}
.pipeline-col-lost b {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pipeline-col-lost em {
  font-style: normal;
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--warn);
  opacity: 0.85;
}
.pipeline-col-lost.is-empty {
  color: var(--text-3);
  font-weight: 500;
  font-style: italic;
}
.pipeline-col-lost-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--warn);
  display: inline-block;
}

.pipeline-funnel-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-top: 4px;
  font-size: 11.5px;
  color: var(--text-2);
}
.pipeline-funnel-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pipeline-funnel-key .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}
.pipeline-funnel-key .dot-active { background: rgba(99, 102, 241, 0.65); }
.pipeline-funnel-key .dot-loss   { background: rgba(220, 38, 38, 0.65); }
.pipeline-funnel-hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
}
.pipeline-funnel-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  margin: 0 2px;
  border: 1px solid var(--hairline-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-2);
  background: color-mix(in oklch, var(--text) 4%, transparent);
}
@media (max-width: 720px) {
  .pipeline-chart-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pipeline-col { grid-template-rows: auto 140px auto auto; }
  .pipeline-col-count b { font-size: 22px; }
  .pipeline-funnel-hint { display: none; }
}

/* ── StageDrawer — re-uses Top-Priority "expanded card" pattern ────────── */
.stage-drawer {
  margin-top: 14px;
  animation: stage-drawer-in 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
  gap: 14px;
}
@keyframes stage-drawer-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stage-drawer-head {
  align-items: flex-start;
  cursor: default;
}
.stage-drawer-head .cp-feed-title { letter-spacing: -0.015em; }
.stage-drawer-close {
  appearance: none;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.stage-drawer-close:hover {
  color: var(--text);
  border-color: var(--text-3);
  background: color-mix(in oklch, var(--text) 6%, transparent);
}
.stage-drawer-split {
  /* Re-use the priority-split grid proportions directly. */
  grid-template-columns: minmax(240px, 0.90fr) minmax(0, 1.42fr);
}
.stage-drawer-stack {
  gap: 4px;
  max-height: 520px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.stage-drawer-stack::-webkit-scrollbar { width: 6px; }
.stage-drawer-stack::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--text) 12%, transparent);
  border-radius: 999px;
}
.stage-drawer-filter {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  margin-bottom: 6px;
  background: color-mix(in oklch, var(--text) 4%, transparent);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  position: sticky;
  top: 0;
  z-index: 1;
}
.stage-drawer-filter-btn {
  flex: 1;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 5px 8px;
  border-radius: 6px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 140ms ease, color 140ms ease;
}
.stage-drawer-filter-btn em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
}
.stage-drawer-filter-btn:hover { color: var(--text); }
.stage-drawer-filter-btn.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}
.stage-drawer-filter-btn.is-active em { color: var(--text); }
.stage-drawer-filter-btn.is-loss.is-active { color: var(--warn); }
.stage-drawer-filter-btn.is-loss.is-active em { color: var(--warn); }
.stage-drawer-empty {
  font-size: 12.5px;
  color: var(--text-3);
  font-style: italic;
  padding: 14px 8px;
  text-align: center;
}
.priority-stack-card.is-lost .priority-stack-name {
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklch, var(--warn) 55%, transparent);
  text-decoration-thickness: 1px;
  opacity: 0.92;
}
.priority-stack-card.is-lost .priority-stack-meta {
  color: var(--warn);
  opacity: 0.85;
}

/* ── Won/Loss patterns (coaching) ─────────────────────────────────────── */
.won-loss-shell .cp-feed-helper b {
  color: var(--text);
  font-weight: 650;
}
.wl-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: color-mix(in oklch, var(--text) 3%, transparent);
  align-self: flex-start;
}
.wl-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 12px;
  border-radius: 7px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 140ms ease, color 140ms ease;
}
.wl-tab em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.wl-tab:hover { color: var(--text); }
.wl-tab.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.wl-tab.is-active em { color: var(--text); }
.wl-tab.is-active.is-loss { color: var(--warn); }
.wl-tab.is-active.is-loss em { color: var(--warn); }
.wl-tab.is-active.is-win { color: var(--good); }
.wl-tab.is-active.is-win em { color: var(--good); }
.wl-tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
}
.wl-tab-dot-loss { background: var(--warn); }
.wl-tab-dot-win  { background: var(--good); }

/* Root why · global analysis — the headline panel above the pattern split.
   Tone-tinted background so loss/win context lands instantly; types follow
   the same coach-mini-label / h-style hierarchy as priority-detail cards. */
.wl-root-why {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklch, currentColor 24%, var(--hairline));
  background: color-mix(in oklch, currentColor 6%, transparent);
  color: var(--text);
}
.wl-root-why.tone-warn { color: var(--warn); }
.wl-root-why.tone-good { color: var(--good); }
.wl-root-why-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: currentColor;
}
.wl-root-why-kicker em {
  font-style: normal;
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.wl-root-why-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
}
.wl-root-why-headline {
  margin: 4px 0 0;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--text);
  max-width: 64ch;
}
.wl-root-why-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  max-width: 68ch;
}
.wl-root-why-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in oklch, currentColor 22%, var(--hairline));
  font-size: 11.5px;
  color: var(--text-3);
}
.wl-root-why-meta b {
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-right: 2px;
}
.wl-root-why-meta em {
  font-style: normal;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
}
.wl-root-why-jump {
  appearance: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in oklch, currentColor 14%, transparent);
  border: 1px solid color-mix(in oklch, currentColor 32%, transparent);
  color: currentColor;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.wl-root-why-jump:hover {
  background: color-mix(in oklch, currentColor 22%, transparent);
  border-color: currentColor;
  transform: translateY(-1px);
}
.wl-root-why-jump .icon { transition: transform 140ms ease; }
.wl-root-why-jump:hover .icon { transform: translateX(2px); }

.wl-empty {
  padding: 18px 8px;
  font-size: 12.5px;
  color: var(--text-3);
  font-style: italic;
  text-align: center;
}

/* Pattern breakdown toggle — folded by default, expands the priority-split
   below when the user wants to drill into specific patterns + deals. */
.wl-details-toggle {
  appearance: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px dashed var(--hairline-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease, border-style 140ms ease;
}
.wl-details-toggle em {
  font-style: normal;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  margin-left: 2px;
}
.wl-details-toggle:hover {
  color: var(--text);
  border-color: var(--text-3);
  background: color-mix(in oklch, var(--text) 4%, transparent);
  border-style: solid;
}
.wl-details-toggle.is-open {
  border-style: solid;
  border-color: var(--hairline-strong);
  background: color-mix(in oklch, var(--text) 3%, transparent);
}
.wl-details-toggle .icon { transition: transform 160ms ease; flex: none; }
.wl-details-toggle .icon.is-flipped { transform: rotate(180deg); }

.wl-split {
  grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.55fr);
}
.wl-pattern-stack {
  gap: 6px;
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 2px;
}
.wl-pattern-stack::-webkit-scrollbar { width: 6px; }
.wl-pattern-stack::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--text) 12%, transparent);
  border-radius: 999px;
}

.wl-pattern-card {
  appearance: none;
  position: relative;
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  text-align: left;
  background: color-mix(in oklch, var(--text) 2%, transparent);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 12px 14px 12px 0;
  cursor: pointer;
  color: var(--text);
  font: inherit;
  transition: background 140ms ease, border-color 140ms ease;
}
.wl-pattern-card:hover {
  background: color-mix(in oklch, var(--text) 5%, transparent);
  border-color: var(--hairline-strong);
}
.wl-pattern-card.is-selected {
  background: color-mix(in oklch, currentColor 9%, transparent);
  border-color: color-mix(in oklch, currentColor 45%, var(--hairline-strong));
}
.wl-pattern-card.tone-warn { color: var(--warn); }
.wl-pattern-card.tone-good { color: var(--good); }

.wl-pattern-stripe {
  border-radius: 10px 0 0 10px;
  background: currentColor;
  opacity: 0.35;
}
.wl-pattern-card.is-selected .wl-pattern-stripe { opacity: 0.85; }

.wl-pattern-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.wl-pattern-label {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.008em;
  line-height: 1.25;
}
.wl-pattern-stats {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: currentColor;
}
.wl-pattern-stats b {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.wl-pattern-stats em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--text-3);
}
.wl-pattern-card.is-selected .wl-pattern-stats em { color: var(--text-2); }

/* Right-side detail card */
.wl-pattern-detail { min-height: 0; }

.wl-prescription p { color: var(--text); }
.wl-prescription {
  padding: 12px 14px;
  background: color-mix(in oklch, currentColor 8%, transparent);
  border: 1px solid color-mix(in oklch, currentColor 28%, transparent);
  border-radius: 10px;
  color: currentColor;
}
.wl-prescription .coach-mini-label { color: currentColor; }
.wl-prescription p { color: var(--text); }

.wl-deals-block {
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
}
.wl-deals-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.wl-deals {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.wl-deal-row {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 8px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font: inherit;
  transition: opacity 140ms ease, padding-left 140ms ease;
}
.wl-deal-row:last-child { border-bottom: 0; }
.wl-deal-row:hover { opacity: 0.85; padding-left: 4px; }
.wl-deal-row.is-focused {
  background: color-mix(in oklch, currentColor 8%, transparent);
  padding-left: 8px;
  padding-right: 8px;
  margin: 0 -8px;
  border-radius: 6px;
  border-bottom-color: transparent;
}
.wl-deal-row-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.wl-deal-row-main b {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.wl-deal-row-main em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--text-3);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}
.wl-deal-row.tone-warn .wl-deal-row-main b { color: var(--warn); }
.wl-deal-row.tone-warn.is-focused .wl-deal-row-main b { color: var(--warn); }
.wl-deal-row-value {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.wl-focus {
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
}

@media (max-width: 980px) {
  .wl-split { grid-template-columns: minmax(0, 1fr); }
  .wl-pattern-stack { max-height: 320px; }
}
.stage-drawer-detail { min-height: 0; }

@media (max-width: 980px) {
  .stage-drawer-split { grid-template-columns: minmax(0, 1fr); }
  .stage-drawer-stack { max-height: 320px; }
  .pipeline-funnel-tooltip { display: none; }
}
@media (max-width: 720px) {
  .pipeline-funnel-hint { display: none; }
}

/* Cross-platform card and section normalization
   Major AE, manager, forecast, and Addy containers now share the same
   surface recipe. Content-specific tone still lives in stripes, chips,
   meters, and text instead of changing each container's chrome. */
.card,
.cp-feed,
.cp-priority-shell,
.recalc-widget,
.manager-section,
.mgr-status,
.mgr-composition,
.mgr-aes,
.briefing-block,
.priority-detail,
.coach-card,
.pipeline-col,
.fcal-empty {
  background: var(--section-bg);
  border: 1px solid var(--section-border);
  border-radius: var(--section-radius);
  padding: var(--section-pad-y) var(--section-pad-x);
  box-shadow: var(--section-shadow);
}

.card .card,
.flush {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.cp-feed,
.cp-priority-shell,
.recalc-widget,
.manager-section,
.mgr-status,
.mgr-composition,
.mgr-aes,
.briefing-block,
.priority-detail,
.coach-card {
  gap: var(--section-gap);
}

.pipeline-briefing,
.manager-home,
.recalc-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.recalc-widget::after,
.manager-section::after,
.mgr-status::after,
.mgr-composition::after,
.cp-stack > .cp-slot::after {
  display: none;
}

.manager-section:last-child {
  border-bottom: 1px solid var(--section-border);
}

.cp-priority-shell,
.priority-detail,
.coach-card {
  box-shadow: var(--section-shadow);
}

.coach-card.tone-warn {
  background-color: var(--section-bg);
  background-image: linear-gradient(90deg, color-mix(in oklch, var(--risk) 4%, transparent) 0%, transparent 18%);
  border-color: color-mix(in oklch, var(--risk) 18%, var(--section-border));
}
.coach-card.tone-amber {
  background-color: var(--section-bg);
  background-image: linear-gradient(90deg, color-mix(in oklch, var(--accent) 5%, transparent) 0%, transparent 16%);
  border-color: color-mix(in oklch, var(--accent) 16%, var(--section-border));
}
.coach-card.tone-good {
  background-color: var(--section-bg);
  background-image: linear-gradient(90deg, color-mix(in oklch, var(--good) 4%, transparent) 0%, transparent 12%);
  border-color: color-mix(in oklch, var(--good) 12%, var(--section-border));
}

.priority-detail.tone-warn,
.priority-detail.tone-amber,
.priority-detail.tone-good {
  background-color: var(--section-bg);
  background-image: linear-gradient(90deg, color-mix(in oklch, currentColor 4%, transparent), transparent 28%);
}

.cp-feed-title,
.manager-moment-question,
.mgr-status-title,
.mgr-composition-head h3,
.mgr-aes-head h3,
.section-head-row .h2,
.coach-block-title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--text);
}

.cp-feed-helper,
.briefing-sub,
.manager-section p,
.mgr-status-main p,
.recalc-widget-sub,
.coach-block-sub {
  color: var(--text-2);
}

.cp-feed-helper,
.coach-block-sub,
.fcal-deals-head > div > p.muted,
.fcal-config-head > p.muted,
.fcal-bt-hero-head > div > p.muted {
  white-space: normal;
  overflow: visible;
  max-width: 100%;
  max-height: none;
  opacity: 1;
  margin-top: 4px;
  animation: none;
}

.cp-feed:hover .cp-feed-helper,
.cp-priority-shell:hover .cp-feed-helper,
.cp-feed:focus-within .cp-feed-helper,
.cp-priority-shell:focus-within .cp-feed-helper,
.coach-block:hover .coach-block-sub,
.coach-block:focus-within .coach-block-sub,
.fcal-deals-head:hover > div > p.muted,
.fcal-deals-head:focus-within > div > p.muted,
.fcal-config-head:hover > p.muted,
.fcal-config-head:focus-within > p.muted,
.fcal-bt-hero-head:hover > div > p.muted,
.fcal-bt-hero-head:focus-within > div > p.muted {
  max-width: 100%;
  max-height: none;
  opacity: 1;
  margin-top: 4px;
  animation: none;
}

@media (max-width: 760px) {
  .card,
  .cp-feed,
  .cp-priority-shell,
  .recalc-widget,
  .manager-section,
  .mgr-status,
  .mgr-composition,
  .mgr-aes,
  .briefing-block,
  .priority-detail,
  .coach-card,
  .pipeline-col,
  .fcal-empty {
    padding: 16px;
    border-radius: 12px;
  }
}

/* Health-risk tone de-escalation
   `--warn` stays available for critical/destructive/blocked/lost states.
   Repeated health-drift surfaces use `--risk` so dense views do not read as
   full alarm-red before the user has inspected the content. */
.pipeline-weather.tone-warn .pipeline-weather-headline,
.forecast-row-delta.tone-warn span,
.analytics-trend.tone-warn,
.analytics-trend.tone-warn .analytics-trend-h em,
.scorecard .num.warn,
.hero-stat.warn b,
.cp-banner--weather.tone-warn .cp-banner-weather-tag,
.manager-kpi.tone-warn .manager-kpi-value,
.manager-kpi.is-primary .manager-kpi-value,
.coach-kpi.tone-warn .coach-kpi-value,
.coach-mini-label.warn,
.coach-trigger-line.tone-warn,
.review-compare-cell.tone-warn b,
.review-compare-gap span,
.review-evidence-col.tone-warn span,
.cp-bsp.tone-warn .cp-bsp-num.is-leading,
.cp-align-v.warn,
.lens-panel-meta .lens-thin,
.fcal-bt-stat dd.tone-warn,
.fcal-bt-bucket-chip-drift.tone-warn,
.fcal-bt-rank-num.tone-warn,
.fcal-rank-gap b.tone-warn,
.fcal-ae-gap b.tone-warn,
.fcal-owner-l em .tone-warn,
.fcal-owner-gap.tone-warn,
.fcal-kanban-prob-pair b.tone-warn,
.fcal-hint.tone-warn,
.mgr-overview-gap.tone-warn > b,
.pipeline-col.is-worst .pipeline-col-name {
  color: var(--risk);
}

.briefing-signal-tone.tone-warn,
.analytics-stage-bar.tone-warn .analytics-stage-fill,
.coach-pip.is-on[data-tone="warn"],
.coach-card.tone-warn::before,
.coach-sev.tone-warn,
.coach-committee-dot.tone-warn,
.cp-bsp.tone-warn .cp-bsp-fill.is-leading,
.lens-metric.lens-truth[data-truth-tone="seller-heavy"] .lens-metric-track span,
.detail-lens-meter.lens-truth[data-truth-tone="seller-heavy"] .lens-metric-track span,
.defense-lead-dot.tone-warn,
.fcal-bt-rel-drift.tone-warn,
.fcal-bt-rel-dot.tone-warn,
.fcal-bt-rank-fill.tone-warn,
.fcal-bt-miss-drift.tone-warn,
.fcal-bt-miss-marker.pred.tone-warn,
.fcal-rank-row.tone-warn::before,
.fcal-owner-col-gap.tone-warn,
.fcal-room-compare-fill.tone-warn {
  background: var(--risk);
}

.fcal-bt-rel-line.tone-warn {
  stroke: var(--risk);
}

.fcal-bt-legend-item .line.solid.tone-warn {
  border-top-color: var(--risk);
}

.coach-gap-chip.tone-warn,
.coach-chip.tone-warn,
.champion-class-tag.tone-warn,
.follow-badge.tone-warn,
.fcal-bt-miss-tag.tone-warn,
.fcal-kanban-prob-gap.tone-warn {
  background: var(--risk-soft);
  color: var(--risk);
}

.follow-badge.tone-warn,
.fcal-bt-miss-marker.pred.tone-warn {
  border-color: color-mix(in srgb, var(--risk) 34%, transparent);
}

.manager-proof.tone-warn {
  background: color-mix(in oklch, var(--risk) 8%, transparent);
  color: var(--risk);
}

.coach-card.is-clickable.tone-warn:hover {
  background-color: color-mix(in oklch, var(--risk) 3%, var(--bg-2));
}
.coach-card.tone-warn {
  background-image: linear-gradient(90deg, color-mix(in oklch, var(--risk) 4%, transparent) 0%, transparent 18%);
  border-color: color-mix(in oklch, var(--risk) 9%, var(--hairline));
}

.stage-segmented .seg.seg-warn.is-active {
  color: var(--risk);
  background: color-mix(in oklch, var(--risk) 7%, transparent);
  box-shadow: inset 0 -2.5px 0 0 var(--risk);
}

.fcal-owner-col-atrisk {
  fill: color-mix(in srgb, var(--risk) 24%, transparent);
  stroke: color-mix(in srgb, var(--risk) 42%, transparent);
}
.fcal-owner-col-gap.tone-warn {
  fill: var(--risk);
}
.fcal-owner-bar-atrisk.tone-warn {
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--risk) 42%, transparent),
    color-mix(in srgb, var(--risk) 42%, transparent) 6px,
    color-mix(in srgb, var(--risk) 14%, transparent) 6px,
    color-mix(in srgb, var(--risk) 14%, transparent) 12px
  );
}