/* SalesPulse Live — Bloomberg-style terminal theme (green-on-black, sales floor vibe) */

:root {
  --bg:         #000000;
  --bg-1:       #0a0d0a;
  --bg-2:       #10140f;
  --bg-3:       #161b16;
  --panel:      #0c100c;
  --panel-2:    #131913;
  --border:     #243024;
  --border-2:   #344034;
  --green:      #00e676;     /* primary accent */
  --green-dim:  #00a050;
  --green-soft: #00301a;
  --amber:      #ff9c00;
  --red:        #ff5252;
  --cyan:       #45d0ff;
  --magenta:    #ff5eae;
  --purple:     #b388ff;
  --white:      #f0f0f0;
  --text:       #e8efe8;
  --dim:        #809980;
  --dimmer:     #506050;
  --mono: "IBM Plex Mono", "JetBrains Mono", "Roboto Mono", "Consolas", "Cascadia Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: var(--mono);
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--green); color: #000; padding: 6px 10px; }
.skip-link:focus { left: 6px; top: 6px; z-index: 100; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--dim); }
.green { color: var(--green); }
.red { color: var(--red); }
.amber { color: var(--amber); }
.cyan { color: var(--cyan); }
.purple { color: var(--purple); }

/* TICKER */
.ticker {
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  height: 26px;
  position: relative;
}
.ticker-track {
  display: inline-flex;
  white-space: nowrap;
  animation: tickerScroll 70s linear infinite;
  line-height: 26px;
  font-size: 12px;
  padding-left: 100%;
}
.ticker-item { padding: 0 18px; color: var(--white); }
.ticker-item .sym { color: var(--green); font-weight: 700; margin-right: 6px; }
.ticker-item .val { color: var(--white); margin-right: 4px; }
.ticker-item .chg.up   { color: var(--green); }
.ticker-item .chg.down { color: var(--red); }
.ticker-item .sep      { color: var(--dimmer); margin: 0 8px; }
@keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* TERMINAL BAR */
.terminal-bar {
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  padding: 6px 14px;
  display: flex; align-items: center; gap: 14px;
}
.terminal-bar .brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--green); font-weight: 700; letter-spacing: 1px;
}
.terminal-bar .brand .dot {
  width: 10px; height: 10px; background: var(--green);
  display: inline-block; box-shadow: 0 0 10px var(--green);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.terminal-bar .brand .sub {
  color: var(--dim); font-weight: 400; letter-spacing: 0;
  font-size: 11px; margin-left: 4px;
}
.terminal-bar .clock { margin-left: auto; color: var(--white); font-size: 12px; }
.terminal-bar .clock .lbl { color: var(--dim); margin-right: 6px; }

/* FUNCTION KEYS */
.fkeys {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 0;
}
.fkey {
  background: transparent; border: none;
  border-right: 1px solid var(--border);
  color: var(--text);
  padding: 7px 14px;
  font-family: var(--mono); font-size: 12px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.fkey .k { color: var(--green); font-weight: 700; }
.fkey:hover { background: var(--green-soft); color: var(--green); }
.fkey.active { background: var(--green); color: #000; }
.fkey.active .k { color: #000; }
.fkey:focus-visible { outline: 1px solid var(--green); outline-offset: -1px; }
.fkey.primary {
  margin-left: auto;
  background: var(--green); color: #000; font-weight: 700;
}
.fkey.primary .k { color: #000; }
.fkey.primary:hover { background: var(--white); }

/* COMMAND BAR */
.cmd-bar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 6px 14px;
  display: flex; align-items: center; gap: 10px;
}
.cmd-bar .prompt { color: var(--green); font-weight: 700; }
.cmd-bar input {
  flex: 1; background: transparent; border: none;
  color: var(--white); font-family: var(--mono); font-size: 13px;
  outline: none; caret-color: var(--green);
}
.cmd-bar input::placeholder { color: var(--dimmer); }
.cmd-bar .hint { color: var(--dim); font-size: 11px; }
.cursor {
  display: inline-block; width: 8px; height: 14px;
  background: var(--green); vertical-align: middle;
  animation: blink 1s steps(2, end) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* MAIN */
main { padding: 10px 12px 50px; max-width: 1600px; margin: 0 auto; }

/* PANEL */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  margin-bottom: 10px;
}
.panel-head {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  padding: 6px 12px;
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
}
.panel-head .title { color: var(--green); font-weight: 700; }
.panel-head .sub   { color: var(--dim); font-weight: 400; }
.panel-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.panel-body { padding: 12px; }
.panel-body.tight { padding: 0; }

/* GRID HELPERS */
.row-grid { display: grid; gap: 10px; }
.cols-2 { grid-template-columns: 1.4fr 1fr; }
.cols-2-eq { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 900px) {
  .cols-2, .cols-2-eq, .cols-3 { grid-template-columns: 1fr; }
}

/* HERO STRIP */
.hero {
  background: linear-gradient(90deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  padding: 12px 14px;
  margin-bottom: 10px;
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.hero .label {
  color: var(--green); font-weight: 700; letter-spacing: 1.5px;
  font-size: 11px; text-transform: uppercase;
  padding: 4px 8px; border: 1px solid var(--green-dim);
}
.hero .summary { color: var(--white); font-size: 14px; flex: 1; min-width: 280px; }
.hero .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; font-size: 11px; font-weight: 700;
  border: 1px solid var(--border-2); background: var(--bg-1);
  letter-spacing: 0.5px;
}
.chip.good { color: var(--green); border-color: rgba(0,230,118,0.4); }
.chip.warn { color: var(--amber); border-color: rgba(255,156,0,0.4); }
.chip.info { color: var(--cyan);  border-color: rgba(69,208,255,0.4); }
.chip.bad  { color: var(--red);   border-color: rgba(255,82,82,0.4); }

/* NEW vs EXPANSION motion lens (#9) — 3-segment toggle pill in the hero
   strip. Mirrors the .toggle pattern visually so it reads as part of the
   same control family. Aligned to the right edge of the hero on desktop. */
.hero .motion-pill { margin-left: auto; }
.motion-pill {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--border-2); background: var(--bg-1);
}
.motion-seg {
  background: transparent; color: var(--dim);
  border: none; border-right: 1px solid var(--border-2);
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 1px;
  padding: 5px 10px; cursor: pointer;
}
.motion-seg:last-child { border-right: none; }
.motion-seg:hover { color: var(--white); background: var(--bg-2); }
.motion-seg.active { background: var(--green); color: #000; }
.motion-seg:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

/* Per-panel chip injected into .panel-head .sub when the lens is on.
   Green for NEW LOGO; cyan for EXPANSION — matches the .mot-badge color
   contract used inside the TOP OPEN DEALS table. */
.motion-chip {
  display: inline-block; margin-left: 10px;
  padding: 2px 7px; font-size: 10px; font-weight: 700; letter-spacing: 1px;
  color: var(--green); border: 1px solid rgba(0,230,118,0.5); background: rgba(0,230,118,0.08);
}
.motion-chip.exp {
  color: var(--cyan); border-color: rgba(69,208,255,0.5); background: rgba(69,208,255,0.08);
}

/* MOT column badge inside TOP OPEN DEALS. NEW is green (the default
   motion), EXP is cyan so the eye can spot the expansion rows quickly. */
.mot-badge {
  display: inline-block; padding: 1px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  border: 1px solid var(--border-2); background: var(--bg-1);
}
.mot-badge.mot-new { color: var(--green); border-color: rgba(0,230,118,0.5); }
.mot-badge.mot-exp { color: var(--cyan);  border-color: rgba(69,208,255,0.5); }

/* NEW vs EXPANSION mini stacked-bar at the top of PIPELINE BY SEGMENT.
   Always rendered (even on ALL) — it's the headline read for the motion
   split and gives the user a reason to discover the toggle in the hero. */
.motion-split { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--border); }
.motion-split .ms-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px; font-size: 11px; letter-spacing: 1px;
}
.motion-split .ms-title { color: var(--green); font-weight: 700; }
.motion-split .ms-sub   { color: var(--dim); }
.motion-split .ms-bar {
  display: flex; width: 100%; height: 22px;
  border: 1px solid var(--border-2); background: var(--bg-1);
}
.motion-split .ms-bar span {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #000;
  white-space: nowrap; overflow: hidden;
}
.motion-split .ms-new { background: var(--green); }
.motion-split .ms-exp { background: var(--cyan); }
.motion-split .ms-legend {
  display: flex; gap: 16px; margin-top: 6px; font-size: 11px; color: var(--dim);
  flex-wrap: wrap;
}
.motion-split .ms-legend b { color: var(--white); }
.motion-split .ms-dot {
  display: inline-block; width: 9px; height: 9px; margin-right: 5px;
  vertical-align: middle; border: 1px solid var(--border-2);
}
.motion-split .ms-d-new { background: var(--green); }
.motion-split .ms-d-exp { background: var(--cyan); }

/* KPI TILES */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
@media (max-width: 1400px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1000px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  background: var(--panel);
  padding: 10px 12px;
  border-left: 2px solid var(--green-dim);
}
.kpi.good { border-left-color: var(--green); }
.kpi.warn { border-left-color: var(--amber); }
.kpi.bad  { border-left-color: var(--red); }
.kpi.info { border-left-color: var(--cyan); }
.kpi .k-label {
  color: var(--dim); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center;
}
.kpi .k-label .badge { color: var(--green); font-size: 9px; }
.kpi .k-value {
  color: var(--white); font-size: 22px; font-weight: 700;
  margin: 4px 0 2px; font-variant-numeric: tabular-nums;
}
.kpi .k-delta { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi .k-delta.up   { color: var(--green); }
.kpi .k-delta.down { color: var(--red); }
.kpi .k-delta.flat { color: var(--dim); }
.kpi .k-note { color: var(--dim); font-size: 11px; margin-top: 4px; }
.kpi .k-whisper {
  color: var(--dimmer); font-size: 10px; margin-top: 3px;
  padding-top: 3px; border-top: 1px dashed var(--border);
  font-variant-numeric: tabular-nums;
}
.kpi .k-whisper b { color: var(--dim); font-weight: 700; }
/* YoY whisper line (#22) — second whisper under the WoW one. No top
   border so the two lines read as a stacked temporal stack. */
.kpi .k-whisper-yoy {
  border-top: none; padding-top: 0; margin-top: 1px;
}
.kpi .k-whisper-yoy .green { color: var(--green); font-weight: 700; }
.kpi .k-whisper-yoy .red   { color: var(--red);   font-weight: 700; }

/* YoY SAME-QUARTER panel (#22) — compact data table reuse +
   a few standalone tweaks for the mismatch chip + summary stat. */
#yoy .data-table tbody td { padding: 5px 10px; }
#yoy .data-table tbody tr:nth-child(odd) { background: rgba(255,255,255,0.012); }
.yoy-mismatch {
  display: inline-block; margin-left: 6px; padding: 0 4px;
  font-size: 9px; font-weight: 700; color: var(--bg);
  background: var(--amber); border-radius: 1px; vertical-align: 1px;
}

/* WoW | YoY toggle in the WHAT CHANGED panel head (#22). */
.chg-toggle {
  display: inline-flex; gap: 0; border: 1px solid var(--border);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.5px;
  vertical-align: middle;
}
.chg-toggle .seg {
  background: transparent; color: var(--dim); border: 0;
  padding: 2px 8px; cursor: pointer; font: inherit;
}
.chg-toggle .seg:hover { color: var(--green); }
.chg-toggle .seg.active {
  background: var(--green-soft); color: var(--green); font-weight: 700;
}
.chg-toggle .seg + .seg { border-left: 1px solid var(--border); }

/* TOP-3 CONCENTRATION tile (#11) — clickable KPI variant with a
   colored footer micro-stat showing the "if top 3 slip" gap to quota.
   Footer color mirrors the tile-tone signal (green = still covered;
   red = miss). Star badge inside TOP OPEN DEALS marks the same 3 rows
   so the visual link from tile → table is one click and one glance. */
.kpi-clickable { cursor: pointer; transition: background 80ms linear; }
.kpi-clickable:hover { background: var(--bg-2); }
.kpi-clickable:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.kpi-foot {
  margin-top: 6px; padding-top: 4px; border-top: 1px dashed var(--border);
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}
.kpi-foot.good { color: var(--green); }
.kpi-foot.bad  { color: var(--red); }
.kpi-foot.warn { color: var(--amber); }
.deal-top3-star {
  color: var(--amber); font-weight: 700; margin-right: 2px;
  font-size: 12px; line-height: 1; vertical-align: -1px;
}

/* NEXT STEP column + health rollup (#15) — column uses two inline elements
   (text + chip) so it stays compact. Chips reuse green/amber/red borders. */
.next-step { white-space: nowrap; min-width: 130px; }
.ns-text   { color: var(--white); font-size: 11px; }
.ns-missing {
  color: var(--red); font-weight: 700; letter-spacing: 1px;
  font-size: 11px;
}
.ns-chip {
  display: inline-block; padding: 1px 5px; margin-left: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  border: 1px solid currentColor; border-radius: 0;
  font-family: var(--mono); vertical-align: 1px;
}
.ns-chip.green { color: var(--green); }
.ns-chip.amber { color: var(--amber); }
.ns-chip.red   { color: var(--red); }
/* Header-stat rollup; lives in the panel-head between sub and controls. */
.deals-health {
  font-size: 11px; color: var(--dim); font-family: var(--mono);
  letter-spacing: 0.5px; margin-left: 12px; white-space: nowrap;
}
.deals-health .dh-label { color: var(--dim); margin-right: 4px; }
.deals-health .dh-good  { color: var(--green); font-weight: 700; }
.deals-health .dh-warn  { color: var(--amber); font-weight: 700; }
.deals-health .dh-bad   { color: var(--red);   font-weight: 700; }
.deals-health .dh-bad.muted { color: var(--dim); font-weight: 400; }
.deals-health .dh-bad.clickable {
  cursor: pointer; padding: 0 4px;
  border: 1px solid transparent;
}
.deals-health .dh-bad.clickable:hover { border-color: var(--red); }
.deals-health .dh-bad.clickable:focus { outline: 1px solid var(--red); outline-offset: 1px; }
.deals-health .dh-bad.active {
  background: rgba(255,82,82,0.12); border-color: var(--red);
}
/* Sortable column header for NEXT STEP. */
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: var(--green); }
.data-table th.sortable.sorted { color: var(--green); }
.data-table th.sortable.sorted::after { content: " ▼"; font-size: 9px; }

@media (max-width: 720px) {
  .deals-health { display: block; width: 100%; margin: 4px 0 0 0; }
  .next-step { min-width: 90px; }
  .ns-text { display: none; }
}

/* MOMENTUM column + 12-cell heatmap ribbon (#14). Reuses green/amber/red
   palette so no new colors. Heatmap cells are flat buttons (no shadows). */
.momentum { white-space: nowrap; min-width: 90px; }
.mo-dot { font-size: 13px; vertical-align: -1px; }
.mo-dot.mo-hot  { color: var(--green); }
.mo-dot.mo-warm { color: var(--amber); }
.mo-dot.mo-cold { color: var(--red); }
.mo-score { font-weight: 700; font-family: var(--mono); padding-left: 2px; }
.mo-trend { font-size: 11px; padding-left: 4px; font-weight: 700; }
.mo-trend.mo-up   { color: var(--green); }
.mo-trend.mo-down { color: var(--red); }
.mo-trend.mo-flat { color: var(--dim); }

.mo-heat {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 2px; margin: 0 0 8px 0;
}
.mo-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg-1); border: 1px solid var(--border); padding: 4px 2px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.5px;
  color: var(--white); cursor: pointer; min-height: 30px;
}
.mo-cell:hover  { border-color: var(--green); }
.mo-cell:focus  { outline: 1px solid var(--green); outline-offset: 1px; }
.mo-cell.mo-hot  { border-left: 3px solid var(--green); color: var(--green); }
.mo-cell.mo-warm { border-left: 3px solid var(--amber); color: var(--amber); }
.mo-cell.mo-cold { border-left: 3px solid var(--red);   color: var(--red); }
.mo-cell-lbl   { font-weight: 700; font-size: 10px; }
.mo-cell-trend { font-size: 10px; color: inherit; opacity: 0.85; line-height: 1; margin-top: 1px; }

@media (max-width: 720px) {
  .mo-heat { grid-template-columns: repeat(6, 1fr); }
  .mo-score { display: none; }
  .momentum { min-width: 56px; }
}

/* QUAL (MEDDIC 0-8) — #20.
   Compact column rendering: tone-colored X/8 number + 8-cell segmented bar
   in MEDDPICC order. Hover the bar to see which letters are missing. */
.qual-cell { white-space: nowrap; min-width: 110px; }
.qual-num  { font-weight: 700; font-size: 12px; letter-spacing: 0.02em; }
.qual-num.green { color: var(--green); }
.qual-num.amber { color: var(--amber); }
.qual-num.red   { color: var(--red); }
.qual-weak {
  display: inline-block; margin-left: 4px; padding: 0 4px;
  font-size: 9px; font-weight: 700; color: var(--bg);
  background: var(--red); border-radius: 1px; vertical-align: 1px;
}
.qual-bar {
  display: inline-grid; grid-template-columns: repeat(8, 1fr);
  gap: 1px; margin-left: 6px; vertical-align: middle;
}
.qual-bar-cell {
  width: 9px; height: 11px; font-size: 8px; line-height: 11px;
  text-align: center; font-weight: 700; letter-spacing: 0;
  background: var(--border); color: var(--dim);
}
.qual-bar-cell.on  { background: var(--green-soft); color: var(--green); }
.qual-bar-cell.off { background: rgba(255,80,80,0.18); color: var(--red); }
.data-table thead th#th-qual { cursor: pointer; }
.data-table thead th#th-qual.sorted { color: var(--green); }
@media (max-width: 480px) {
  .qual-cell  { min-width: 44px; }
  .qual-bar   { display: none; }
  .qual-cell:active .qual-bar,
  .qual-cell:focus  .qual-bar { display: inline-grid; }
}

/* WHAT CHANGED SINCE LAST FORECAST — 4-card grid (stacks ≤720px).
   Card style is minimal (no rounded corners / shadows) to fit the
   terminal aesthetic. Lists inside cards are dense, tabular. */
.changed-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border);
}
.change-card {
  background: var(--panel); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.change-card .card-title {
  color: var(--green); font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.change-card .card-big {
  display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap;
  font-size: 16px; color: var(--white); font-variant-numeric: tabular-nums;
}
.change-card .card-row {
  display: flex; gap: 6px; align-items: center; font-size: 11px; flex-wrap: wrap;
}
.change-card .card-row-spaced { justify-content: space-between; }
.chg-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.chg-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 4px 8px; align-items: baseline;
  padding: 4px 6px; font-size: 11px;
  border-bottom: 1px dashed var(--border);
  font-variant-numeric: tabular-nums;
}
.chg-row:last-child { border-bottom: none; }
.chg-row[data-account] { cursor: pointer; }
.chg-row[data-account]:hover  { background: var(--bg-2); }
.chg-row[data-account]:focus  { outline: 1px solid var(--green); outline-offset: -1px; }
.chg-row .chg-acct { color: var(--white); font-weight: 700; grid-column: 1; }
.chg-row .chg-mid  { grid-column: 1 / -1; color: var(--dim); font-size: 10px; }
.chg-row .chg-amt  { grid-column: 2; grid-row: 1; color: var(--green); font-weight: 700; }
.chg-risk-toggle { align-self: flex-start; }
.chg-risk-list { list-style: none; padding: 4px 0 0; margin: 0; font-size: 11px; }
.chg-risk-list li { padding: 3px 0; border-bottom: 1px dashed var(--border); }
.chg-risk-list li:last-child { border-bottom: none; }
.chg-risk-list .risk-new    { color: var(--red); }
.chg-risk-list .risk-closed { color: var(--green); }

/* CHART (SVG line) */
.chart-wrap { position: relative; height: 240px; padding: 6px 6px 0; }
.chart-svg { width: 100%; height: 100%; display: block; }
.chart-grid line { stroke: var(--border); stroke-width: 1; }
.chart-axis text { fill: var(--dim); font-family: var(--mono); font-size: 10px; }
.chart-area  { fill: rgba(0,230,118,0.10); }
.chart-band  { fill: var(--green-soft); fill-opacity: 0.15; stroke: none; pointer-events: none; }
.chart-line  { fill: none; stroke: var(--green); stroke-width: 2; }
.chart-line.amber { stroke: var(--amber); }
.chart-line.cyan  { stroke: var(--cyan); }
.chart-area.amber { fill: rgba(255,156,0,0.10); }
.chart-area.cyan  { fill: rgba(69,208,255,0.10); }
.chart-dot { fill: var(--green); }
.chart-dot.amber { fill: var(--amber); }
.chart-dot.cyan  { fill: var(--cyan); }
.chart-quota { fill: none; stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart-pace  { fill: none; stroke: var(--dim);   stroke-width: 1.5; stroke-dasharray: 2 3; opacity: 0.9; }
/* Projection extension (#17) — same color as selected series, dashed. */
.chart-line-proj { stroke-dasharray: 5 4; stroke-width: 2; opacity: 0.9; }
.chart-band-proj { fill-opacity: 0.10; }
.chart-dot-proj  { fill: var(--green); opacity: 0.75; }
.chart-proj-end  { fill: none; stroke: var(--green); stroke-width: 1.5; }
.chart-proj-end-lbl { fill: var(--green); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.5px; }
.chart-now       { stroke: var(--dim); stroke-width: 1; stroke-dasharray: 1 3; opacity: 0.5; }
.chart-now-lbl   { fill: var(--dim); font-family: var(--mono); font-size: 9px; letter-spacing: 1px; }
.chart-stat {
  position: absolute; top: 8px; right: 12px;
  display: flex; gap: 14px; font-size: 11px; flex-wrap: wrap; justify-content: flex-end;
  max-width: calc(100% - 16px);
}
.chart-stat span { color: var(--dim); }
.chart-stat b { color: var(--white); font-weight: 700; margin-left: 4px; }
/* PROJECTED Q-END mini-stat (#17) — block style, sits in chart-stat row. */
.chart-stat .proj-block {
  display: flex; flex-direction: column; gap: 2px; padding-left: 14px;
  border-left: 1px solid var(--border-2); align-items: flex-start;
  cursor: help;
}
.chart-stat .proj-lbl   { color: var(--dim); font-size: 10px; letter-spacing: 1px; }
.chart-stat .proj-big   { font-size: 16px; font-weight: 700; font-family: var(--mono); margin: 0; }
.chart-stat .proj-big.green { color: var(--green); }
.chart-stat .proj-big.amber { color: var(--amber); }
.chart-stat .proj-big.red   { color: var(--red); }
.chart-stat .proj-range { color: var(--dim); font-size: 10px; }
.chart-stat .proj-gap   { font-size: 10px; font-weight: 700; }
.chart-stat .proj-gap.green { color: var(--green); }
.chart-stat .proj-gap.amber { color: var(--amber); }
.chart-stat .proj-gap.red   { color: var(--red); }
.chart-stat .proj-best  { color: var(--dim); font-size: 10px; }
.chart-legend {
  display: flex; gap: 14px; padding: 0 14px 6px; font-size: 11px; color: var(--dim); flex-wrap: wrap;
}
.chart-legend .swatch { display: inline-block; width: 10px; height: 10px; vertical-align: middle; margin-right: 5px; }
.chart-legend .swatch-band { background: var(--green-soft); opacity: 0.6; border: 1px solid var(--green-dim); }
.chart-legend .swatch-pace { background: var(--dim); height: 2px; margin-bottom: 3px; }
.chart-legend .swatch-proj { background: linear-gradient(90deg, var(--green) 0 6px, transparent 6px 10px); height: 2px; margin-bottom: 3px; }
.chart-legend .swatch-pipe-target { background: var(--amber); height: 2px; margin-bottom: 3px; opacity: 0.9; }
.chart-legend .swatch-pipe-miss   { background: var(--red); border-radius: 50%; width: 8px; height: 8px; }
.chart-caption { padding: 0 14px 12px; font-size: 11px; color: var(--dim); min-height: 14px; }

/* TOGGLES */
.toggle-group { display: inline-flex; border: 1px solid var(--border-2); }
.toggle {
  background: var(--bg-1); border: none; color: var(--dim);
  padding: 4px 10px; font-family: var(--mono); font-size: 11px;
  cursor: pointer; letter-spacing: 1px; text-transform: uppercase;
  border-right: 1px solid var(--border-2);
}
.toggle:last-child { border-right: none; }
.toggle:hover { color: var(--green); }
.toggle.active { background: var(--green); color: #000; font-weight: 700; }

/* INPUTS */
.input, select, textarea {
  background: var(--bg);
  border: 1px solid var(--border-2);
  color: var(--white);
  font-family: var(--mono); font-size: 12px;
  padding: 6px 10px;
  min-width: 160px;
}
.input.input-sm { min-width: 130px; padding: 6px 8px; font-size: 11px; }
.input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); }
.input::placeholder { color: var(--dimmer); }
select option { background: var(--bg); color: var(--white); }

/* BUTTONS */
.btn {
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  color: var(--text);
  padding: 6px 12px;
  font-family: var(--mono); font-size: 12px;
  cursor: pointer; letter-spacing: 0.5px;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { border-color: var(--green); color: var(--green); }
.btn.active {
  background: var(--green); color: #000; border-color: var(--green); font-weight: 700;
}
.btn.active:hover { background: var(--white); border-color: var(--white); color: #000; }
.btn.primary {
  background: var(--green); color: #000; border-color: var(--green); font-weight: 700;
}
.btn.primary:hover { background: var(--white); border-color: var(--white); color: #000; }
.btn.danger { border-color: rgba(255,82,82,0.4); color: var(--red); }
.btn.sm { padding: 3px 8px; font-size: 11px; }

.controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* TABLE */
.data-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--mono); font-size: 12px;
}
.data-table th, .data-table td {
  padding: 7px 12px; text-align: left;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.data-table th {
  background: var(--bg-2);
  color: var(--green); font-weight: 700;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
}
.data-table tbody tr:hover { background: var(--bg-2); }
.data-table td.num { text-align: right; }
.data-table td.center { text-align: center; }

.status-pill {
  display: inline-block; padding: 1px 7px; font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; border: 1px solid;
}
.status-pill.commit     { color: var(--green); border-color: var(--green); }
.status-pill.upside     { color: var(--cyan);  border-color: var(--cyan); }
.status-pill.bestcase   { color: var(--cyan);  border-color: var(--cyan); }
.status-pill.risk       { color: var(--red);   border-color: var(--red); }
.status-pill.omitted    { color: var(--dim);   border-color: var(--dim); }
.status-pill.won        { color: var(--green); border-color: var(--green); }
.status-pill.lost       { color: var(--red);   border-color: var(--red); }
.status-pill.open       { color: var(--amber); border-color: var(--amber); }
.status-pill.closed     { color: var(--dim);   border-color: var(--dim); }

/* SLIPPAGE — header stat strip + concentration footer.
   The amount column in .slip-table uses inline .red/.amber classes for
   severity (≥$1M / $500K-$999K). Row hover + click-to-jump highlight
   below relies on .data-table tbody tr:hover (already styled). */
.slip-stat {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px dashed var(--border);
  font-size: 12px; color: var(--white);
  letter-spacing: 0.5px;
}
.slip-stat .sep { color: var(--dimmer); }
.slip-stat b { font-weight: 700; }
.slip-table tbody tr { cursor: pointer; }
.slip-table tbody tr:focus { outline: 1px solid var(--green); outline-offset: -1px; background: var(--bg-2); }
.slip-foot {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 8px 14px 12px;
  border-top: 1px dashed var(--border);
  font-size: 11px; color: var(--white);
}
.slip-foot .sep { color: var(--dimmer); }
.slip-foot b { color: var(--green); font-weight: 700; }

/* Click-to-jump highlight: a 1.5s green pulse on the matched deal row.
   Uses only var(--green-soft) — no new color tokens. */
@keyframes rowPulse {
  0%   { background-color: var(--green-soft); box-shadow: inset 0 0 0 1px var(--green-dim); }
  100% { background-color: transparent;       box-shadow: inset 0 0 0 1px transparent; }
}
.data-table tbody tr.highlight-pulse { animation: rowPulse 1.5s ease-out; }

/* FUNNEL */
.funnel { padding: 8px 14px 16px; }
.funnel-stage {
  display: grid; grid-template-columns: 130px 1fr 110px 80px; gap: 10px;
  align-items: center; padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}
.funnel-stage:last-child { border-bottom: none; }
.funnel-name { color: var(--white); font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.funnel-bar-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.funnel-bar-wrap { background: var(--bg); border: 1px solid var(--border); height: 22px; position: relative; }
.funnel-bar {
  height: 100%; background: linear-gradient(90deg, var(--green-dim), var(--green));
  display: flex; align-items: center; padding-left: 8px;
  color: #000; font-weight: 700; font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.funnel-amount { color: var(--green); text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.funnel-conv {
  text-align: right; color: var(--dim); font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.funnel-conv.good { color: var(--green); }
.funnel-conv.warn { color: var(--amber); }
.funnel-conv.bad  { color: var(--red); }

/* FUNNEL AGING BUCKETS */
.funnel-buckets { display: flex; gap: 6px; flex-wrap: wrap; font-size: 10px; }
.bucket {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 7px; border: 1px solid var(--border-2);
  color: var(--dim); letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}
.bucket .b-lbl { color: var(--dim); text-transform: uppercase; }
.bucket b { color: var(--white); font-weight: 700; }
.bucket.old { color: var(--red); border-color: rgba(255,82,82,0.4); background: rgba(255,82,82,0.05); }
.bucket.old .b-lbl, .bucket.old b { color: var(--red); }

/* REP TABLE */
.attainment-bar { display: inline-block; width: 80px; height: 8px; background: var(--bg); border: 1px solid var(--border); vertical-align: middle; margin-right: 6px; }
.attainment-bar > span { display: block; height: 100%; background: var(--green); }
.attainment-bar > span.warn { background: var(--amber); }
.attainment-bar > span.bad  { background: var(--red); }

/* SEGMENT GRID */
.seg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.seg {
  background: var(--panel); padding: 10px 12px;
}
.seg .seg-name { color: var(--green); font-weight: 700; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.seg .seg-value { color: var(--white); font-size: 18px; margin: 4px 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.seg .seg-bar { height: 6px; background: var(--bg); border: 1px solid var(--border); }
.seg .seg-bar > span { display: block; height: 100%; background: var(--green); }
.seg .seg-meta { color: var(--dim); font-size: 11px; margin-top: 4px; display: flex; justify-content: space-between; }

/* RISK LIST */
.risk-list { list-style: none; margin: 0; padding: 0; }
.risk-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px dashed var(--border);
  font-size: 12px;
}
.risk-item:last-child { border-bottom: none; }
.risk-item .risk-text { flex: 1; color: var(--white); }
.risk-item.reviewed .risk-text { color: var(--dimmer); text-decoration: line-through; }
.sev {
  display: inline-flex; padding: 2px 8px; font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  border: 1px solid; min-width: 70px; justify-content: center;
}
.sev.low    { color: var(--cyan);  border-color: var(--cyan); }
.sev.medium { color: var(--amber); border-color: var(--amber); }
.sev.high   { color: var(--red);   border-color: var(--red); }

/* INSIGHTS */
.insight-list { margin: 0; padding-left: 18px; }
.insight-list li { margin-bottom: 8px; line-height: 1.6; color: var(--text); }
.insight-list li::marker { color: var(--green); }

/* RELEASE NOTES */
.rel-list { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.rel-list li {
  padding: 6px 0; border-bottom: 1px dashed var(--border);
  display: flex; gap: 12px; align-items: center;
}
.rel-list li:last-child { border-bottom: none; }
.rel-list .ver {
  color: var(--green); font-weight: 700; min-width: 50px;
  border: 1px solid var(--green-dim); text-align: center;
  padding: 1px 4px; font-size: 11px;
}

/* STATUS BAR */
.status-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--green);
  color: #000;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 4px 14px;
  display: flex; gap: 18px; align-items: center;
  border-top: 1px solid #000;
  letter-spacing: 1px;
  z-index: 60;
}
.status-bar .seg { display: flex; gap: 6px; align-items: center; }
.status-bar .seg .l { opacity: 0.7; }
.status-bar .seg.right { margin-left: auto; }

/* REQUESTS PAGE */
.req-wrap { max-width: 520px; margin: 0 auto; padding: 12px 14px 80px; }
.req-hero {
  padding: 18px 16px;
  border: 1px solid var(--green-dim);
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--panel) 100%);
  margin-bottom: 14px;
}
.req-hero h2 { margin: 0 0 6px; color: var(--green); font-size: 18px; letter-spacing: 2px; }
.req-hero p { margin: 0; color: var(--dim); font-size: 13px; }
.req-card { background: var(--panel); border: 1px solid var(--border); padding: 18px 16px; margin-bottom: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--green); font-weight: 700;
}
.field input, .field select, .field textarea {
  width: 100%; background: var(--bg);
  border: 1px solid var(--border-2);
  color: var(--white); padding: 12px 14px;
  font-family: var(--mono); font-size: 16px;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(0,230,118,0.15);
}
.submit-btn {
  width: 100%; background: var(--green); color: #000; border: none;
  padding: 14px; font-family: var(--mono); font-size: 15px;
  font-weight: 700; letter-spacing: 2px; cursor: pointer;
  margin-top: 4px;
}
.submit-btn:hover { background: var(--white); }
.submit-result { margin-top: 14px; padding: 12px 14px; font-size: 13px; display: none; }
.submit-result.show { display: block; }
.submit-result.good { background: rgba(0,230,118,0.08); border: 1px solid var(--green); color: var(--green); }
.submit-result.err  { background: rgba(255,82,82,0.08); border: 1px solid var(--red); color: var(--red); }

.live-feed { background: var(--panel); border: 1px solid var(--border); padding: 14px 16px; margin-top: 14px; }
.live-feed h3 { margin: 0 0 10px; color: var(--green); font-size: 11px; letter-spacing: 1.5px; }
.live-feed .feed-empty { color: var(--dim); font-size: 12px; }
.live-feed ul { list-style: none; margin: 0; padding: 0; }
.live-feed li { padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 13px; color: var(--white); display: flex; gap: 10px; align-items: flex-start; }
.live-feed li:last-child { border-bottom: none; }
.live-feed .tag { flex-shrink: 0; font-size: 10px; padding: 1px 6px; border: 1px solid var(--green-dim); color: var(--green); letter-spacing: 1px; font-weight: 700; }
.live-feed .feed-meta { font-size: 11px; color: var(--dim); display: block; margin-top: 2px; }

.nav-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--dim); font-size: 12px; text-decoration: none;
  margin-bottom: 10px; letter-spacing: 1px;
}
.nav-back:hover { color: var(--green); }

/* RESPONSIVE */
@media (max-width: 720px) {
  .terminal-bar .brand .sub { display: none; }
  .terminal-bar { padding: 6px 10px; gap: 8px; }
  .fkeys { overflow-x: auto; flex-wrap: nowrap; }
  .fkey { padding: 7px 10px; flex-shrink: 0; }
  .fkey.primary { margin-left: 0; }
  .hero { flex-direction: column; align-items: flex-start; }
  /* Funnel mobile (#5): keep conversion label visible by stacking it as a
     second-row caption under the bar/amount so every stage — including
     Closed Won's "— win —" — renders consistently down to 360px. */
  .funnel-stage {
    grid-template-columns: 80px 1fr 70px;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 2px;
  }
  .funnel-stage .funnel-name {
    grid-column: 1; grid-row: 1 / span 2; align-self: center;
  }
  .funnel-stage .funnel-bar-col { grid-column: 2; grid-row: 1; }
  .funnel-stage .funnel-amount  { grid-column: 3; grid-row: 1; }
  .funnel-stage .funnel-conv {
    display: block;
    grid-column: 2 / span 2;
    grid-row: 2;
    text-align: left;
    font-size: 10px;
    padding-left: 2px;
  }
  .status-bar { font-size: 10px; gap: 10px; padding: 4px 8px; overflow-x: auto; }
  /* Slippage panel: stack stat row, allow horizontal scroll on the table,
     wrap the concentration footer onto multiple lines. */
  .slip-stat { font-size: 11px; gap: 6px 8px; padding: 8px 10px; }
  .slip-foot { font-size: 10px; gap: 6px 8px; padding: 6px 10px 10px; }
  .slip-table { min-width: 560px; }
  /* Chart stat: keep horizontal but allow wrap and shrink so PACE + vs PACE
     don't collide with the toggle group above. */
  .chart-stat { gap: 8px 12px; font-size: 10px; top: 4px; right: 8px; }
  /* WHAT CHANGED panel: stack 4 cards into 1 column on mobile. */
  .changed-grid { grid-template-columns: 1fr; }
  .change-card .card-big { font-size: 14px; }
  /* NEW vs EXPANSION pill (#9): on mobile the hero stacks (already set
     to flex-direction:column above), so let the pill take a full row
     and stretch its segments edge-to-edge for easy thumb-tapping. */
  .hero .motion-pill { margin-left: 0; width: 100%; }
  .motion-seg { flex: 1 1 0; text-align: center; padding: 7px 6px; }
  /* Motion-split bar on segments: stack legend nicely, ensure bar stays
     readable when labels would overflow tiny widths. */
  .motion-split .ms-bar { height: 20px; }
  .motion-split .ms-bar span { font-size: 9px; }
  .motion-split .ms-legend { gap: 8px; font-size: 10px; }
}

/* PIPELINE CREATED (#12) — leading-indicator panel.
   Stat row mirrors .slip-stat / .chart-stat pattern; bars are pure SVG
   so no new assets are introduced. Target line and miss-dot use the
   same amber/red semantic colors as the rest of the dashboard. */
.pipe-stat {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px dashed var(--border);
  font-size: 12px; color: var(--white); letter-spacing: 0.5px;
}
.pipe-stat > div { display: flex; flex-direction: column; min-width: 96px; }
.pipe-stat span { color: var(--dim); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.pipe-stat b { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.pipe-stat .muted { color: var(--dim); font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 2px; }
.pipe-stat .green { color: var(--green); }
.pipe-stat .amber { color: var(--amber); }
.pipe-stat .red   { color: var(--red); }

.pipe-chart-wrap { padding: 8px 14px 4px; height: 200px; }
.pipe-svg { width: 100%; height: 100%; display: block; }
.pipe-svg .chart-grid line { stroke: var(--border); stroke-width: 1; }
.pipe-svg .chart-grid text { fill: var(--dim); font-size: 9px; font-family: var(--mono); }
.pipe-svg .chart-axis text { fill: var(--dim); font-size: 10px; font-family: var(--mono); letter-spacing: 1px; }
.pipe-svg .pipe-bar-in  { fill: var(--green); }
.pipe-svg .pipe-bar-out { fill: var(--amber); opacity: 0.85; }
.pipe-svg .pipe-target  { stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0.9; }
.pipe-svg .pipe-target-lbl { fill: var(--amber); font-size: 9px; font-family: var(--mono); letter-spacing: 1px; }
.pipe-svg .pipe-miss-dot { fill: var(--red); stroke: var(--bg); stroke-width: 1; }

.pipe-legend {
  display: flex; gap: 14px; padding: 4px 14px 8px; font-size: 11px; color: var(--dim); flex-wrap: wrap;
}
.pipe-legend .swatch { display: inline-block; width: 10px; height: 10px; vertical-align: middle; margin-right: 5px; }

.pipe-mix-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 14px 4px; font-size: 11px; letter-spacing: 1px;
  color: var(--green); font-weight: 700; border-top: 1px dashed var(--border);
}
.pipe-mix-head .muted { color: var(--dim); font-weight: 400; letter-spacing: 0; }

.pipe-mix { padding: 0 14px 6px; }
.pipe-mix-bar {
  display: flex; width: 100%; height: 22px;
  border: 1px solid var(--border-2); background: var(--bg-1);
}
.pipe-mix-bar span {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #000;
  white-space: nowrap; overflow: hidden;
}
.pipe-mix-bar .pipe-mix-out { background: var(--green); }
.pipe-mix-bar .pipe-mix-in  { background: var(--cyan); }
.pipe-mix-bar .pipe-mix-pa  { background: var(--amber); }
.pipe-mix-bar .pipe-mix-ex  { background: var(--magenta); color: var(--white); }

.pipe-mix-legend {
  display: flex; gap: 14px; margin-top: 6px; font-size: 11px; color: var(--dim); flex-wrap: wrap;
}
.pipe-mix-legend b { color: var(--white); }
.pipe-mix-legend .pipe-mix-dot {
  display: inline-block; width: 9px; height: 9px; margin-right: 5px;
  vertical-align: middle; border: 1px solid var(--border-2);
}

.pipe-caption { padding: 4px 14px 12px; font-size: 11px; color: var(--dim); min-height: 14px; }

@media (max-width: 720px) {
  .pipe-stat { font-size: 11px; gap: 8px 10px; padding: 8px 10px; }
  .pipe-stat > div { min-width: 80px; }
  .pipe-stat b { font-size: 13px; }
  .pipe-chart-wrap { height: 180px; padding: 6px 8px 2px; }
  .pipe-mix-bar { height: 20px; }
  .pipe-mix-bar span { font-size: 9px; }
  .pipe-mix-legend { gap: 8px; font-size: 10px; }
  .pipe-legend { gap: 10px; font-size: 10px; padding: 4px 10px 8px; }
}

/* NEXT-QUARTER COVERAGE (#16) — 3-column grid + shared bar viz. */
.fc-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px;
  background: var(--border); padding: 0; margin: 0 14px 6px;
  border: 1px solid var(--border);
}
.fc-col {
  background: var(--bg-1); padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.fc-col.is-current { background: var(--bg-2); }
.fc-col-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
}
.fc-col-head .fc-label { color: var(--white); font-weight: 700; }
.fc-col-head .fc-cur { color: var(--green); font-size: 9px; letter-spacing: 1px; }
.fc-col-head .fc-wk { font-size: 10px; }
.fc-big {
  font-size: 32px; font-weight: 700; font-family: var(--mono);
  line-height: 1.1; font-variant-numeric: tabular-nums; margin: 4px 0 0;
}
.fc-big.green { color: var(--green); }
.fc-big.amber { color: var(--amber); }
.fc-big.red   { color: var(--red); }
.fc-tgt { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.fc-sec {
  display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px;
  font-variant-numeric: tabular-nums; padding-top: 4px;
  border-top: 1px solid var(--border-2);
}
.fc-sec .sep { color: var(--border-2); }
.fc-sec b { color: var(--white); font-weight: 700; }
.fc-sec .muted { color: var(--dim); font-size: 10px; }
.fc-action {
  margin-top: 6px; padding: 4px 6px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  border-left: 2px solid currentColor;
}
.fc-action.green { color: var(--green); }
.fc-action.amber { color: var(--amber); background: rgba(255,156,0,0.06); }
.fc-action.red   { color: var(--red);   background: rgba(255,82,82,0.06); }
.fc-action b { font-family: var(--mono); }
.fc-mismatch {
  position: absolute; top: 6px; right: 8px;
  color: var(--amber); font-size: 9px; letter-spacing: 1px;
  background: var(--bg-0); padding: 2px 4px; border: 1px solid var(--amber);
  cursor: help;
}
.fc-bar-wrap { padding: 4px 14px 0; }
.fc-svg { width: 100%; height: 110px; display: block; }
.fc-svg .fc-row-lbl { fill: var(--dim); font-family: var(--mono); font-size: 10px; letter-spacing: 1px; }
.fc-svg .fc-row-val { font-family: var(--mono); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fc-svg .fc-axis    { fill: var(--dim); font-family: var(--mono); font-size: 9px; letter-spacing: 1px; }
.fc-svg .fc-target-marker { /* color/style set inline */ }
.fc-legend {
  display: flex; gap: 14px; padding: 4px 14px 6px; font-size: 11px; color: var(--dim); flex-wrap: wrap;
}
.fc-legend .swatch { display: inline-block; width: 10px; height: 10px; vertical-align: middle; margin-right: 5px; }
.fc-legend .swatch-fc-target { background: var(--white); height: 2px; margin-bottom: 3px; opacity: 0.9; }
.fc-legend .swatch-fc-w { background: var(--green); opacity: 0.7; }
.fc-caption { padding: 0 14px 12px; font-size: 11px; color: var(--dim); }
.fc-caption b { color: var(--white); }
.fc-caption .green { color: var(--green); }
.fc-caption .amber { color: var(--amber); }
.fc-caption .red   { color: var(--red); }

@media (max-width: 720px) {
  .fc-grid { grid-template-columns: 1fr; }
  .fc-big  { font-size: 26px; }
  .fc-sec  { font-size: 10px; }
  .fc-action { font-size: 10px; }
  .fc-bar-wrap { height: auto; }
}

/* FORECAST RELIABILITY (#19) — bias chip + 4Q sparkline on REP LEADERBOARD. */
.bias-chip {
  display: inline-block; padding: 1px 6px; font-family: var(--mono);
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  border: 1px solid currentColor; background: transparent;
  vertical-align: middle;
}
.bias-chip.green { color: var(--green); }
.bias-chip.amber { color: var(--amber); }
.bias-chip.red   { color: var(--red); }
.bias-chip.muted { color: var(--dim); border-color: var(--border-2); }
.bias-chip.bias-mini { font-size: 9px; padding: 0 4px; margin-left: 4px; letter-spacing: 0.5px; }
.fcst-spark { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.fcst-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  vertical-align: middle; opacity: 0.85;
}
.fcst-dot.green { background: var(--green); }
.fcst-dot.amber { background: var(--amber); }
.fcst-dot.red   { background: var(--red); }
@media (max-width: 720px) {
  /* Mobile: collapse FCST ACC + sparkline; keep BIAS chip only. */
  .data-table th:nth-child(8), .data-table td:nth-child(8) { display: none; }
  .fcst-spark { display: none; }
}

/* AT-RISK REPS coaching list (#21) — derived watchlist. Compact list rows. */
#at-risk-reps .panel-body { padding-bottom: 8px; }
.ar-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); margin: 0 14px 6px; }
.ar-row {
  display: grid; grid-template-columns: minmax(170px, 220px) 1fr 120px;
  align-items: center; gap: 12px;
  padding: 8px 12px; background: var(--bg-1); border: 0; text-align: left;
  font: inherit; color: inherit; cursor: pointer; width: 100%;
  font-size: 12px; line-height: 1.3;
}
.ar-row:hover  { background: var(--bg-2); }
.ar-row:focus  { outline: 1px solid var(--green); outline-offset: -1px; }
.ar-rep        { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.ar-rep .ar-name  { font-weight: 700; }
.ar-rep .ar-name b.red   { color: var(--red); }
.ar-rep .ar-name b.amber { color: var(--amber); }
.ar-rep .ar-region { font-size: 10px; letter-spacing: 1px; }
.ar-reason     { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; min-width: 0; }
.ar-rationale  { color: var(--dim); font-family: var(--mono); font-size: 11px; }
.ar-primary {
  display: inline-block; padding: 1px 6px; font-family: var(--mono);
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  border: 1px solid currentColor;
}
.ar-primary.red   { color: var(--red); }
.ar-primary.amber { color: var(--amber); }
.ar-act-wrap   { text-align: right; }
.ar-action {
  display: inline-block; padding: 2px 8px; font-family: var(--mono);
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  color: var(--bg-0); background: var(--green);
}
.ar-action.red   { background: var(--red);   color: var(--white); }
.ar-action.amber { background: var(--amber); color: var(--bg-0); }
.ar-empty { padding: 12px; color: var(--green); font-family: var(--mono); font-size: 12px; }
.ar-caption { padding: 4px 14px 0; font-size: 11px; color: var(--dim); }
.ar-caption b { color: var(--white); }
.ar-caption b.red   { color: var(--red); }
.ar-caption b.amber { color: var(--amber); }

@media (max-width: 720px) {
  .ar-row { grid-template-columns: 1fr; gap: 4px; padding: 8px 10px; }
  .ar-act-wrap { text-align: left; }
  .ar-rationale { font-size: 10px; }
}


/* ===== ACTION INBOX (#23) — top-of-fold consolidated alert queue ===== */
#inbox .inbox-controls { display: flex; align-items: center; gap: 8px; }
.inbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.inbox-empty {
  text-align: center;
  padding: 16px 12px;
  color: var(--dim);
  font-size: 12px;
  border: 1px dashed var(--border);
  background: var(--bg-1);
  border-radius: 2px;
}
.inbox-empty b.green { color: var(--green); letter-spacing: 0.5px; font-size: 13px; }
.inbox-bucket-head {
  list-style: none;
  font-size: 10.5px;
  letter-spacing: 0.8px;
  color: var(--dim);
  padding: 8px 4px 4px;
  border-bottom: 1px dashed var(--border);
  margin-top: 4px;
}
.inbox-bucket-head:first-child { margin-top: 0; padding-top: 4px; }
.inbox-bucket-head b { color: var(--white); letter-spacing: 0.3px; }
.inbox-row {
  display: grid;
  grid-template-columns: 14px 78px 1fr 78px 110px;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 12px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.inbox-row:hover { background: var(--bg-2); border-color: var(--border-2); }
.inbox-row:focus { outline: 1px solid var(--green); outline-offset: 1px; }
.inbox-sev { font-size: 14px; line-height: 1; text-align: center; }
.inbox-sev.sev-red   { color: var(--red); }
.inbox-sev.sev-amber { color: var(--amber); }
.inbox-sev.sev-green { color: var(--green); }
.inbox-cat {
  font-size: 9.5px;
  letter-spacing: 0.6px;
  color: var(--dim);
  text-align: center;
  border: 1px solid var(--border);
  padding: 2px 4px;
  border-radius: 2px;
  background: var(--bg);
  font-weight: 700;
}
.inbox-cat.cat-slippage      { color: var(--red);   border-color: var(--red); }
.inbox-cat.cat-qual          { color: var(--red);   border-color: var(--red); }
.inbox-cat.cat-coverage      { color: var(--red);   border-color: var(--red); }
.inbox-cat.cat-concentration { color: var(--red);   border-color: var(--red); }
.inbox-cat.cat-next-step     { color: var(--amber); border-color: var(--amber); }
.inbox-cat.cat-momentum      { color: var(--amber); border-color: var(--amber); }
.inbox-cat.cat-rep-risk      { color: var(--amber); border-color: var(--amber); }
.inbox-cat.cat-wow-move      { color: var(--amber); border-color: var(--amber); }
.inbox-cat.cat-multi         { color: var(--magenta); border-color: var(--magenta); }
.inbox-title {
  color: var(--white);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.inbox-amt {
  text-align: right;
  color: var(--green);
  font-weight: 700;
}
.inbox-amt.muted { color: var(--dim); font-weight: 400; }
.inbox-act {
  font-size: 10px;
  letter-spacing: 0.5px;
  text-align: center;
  padding: 4px 6px;
  border-radius: 2px;
  font-weight: 700;
  border: 1px solid var(--border);
}
.inbox-act.act-red   { color: var(--red);   border-color: var(--red);   background: rgba(255, 82, 82, 0.08); }
.inbox-act.act-amber { color: var(--amber); border-color: var(--amber); background: rgba(255, 156, 0, 0.08); }
.inbox-act.act-muted { color: var(--dim); }
.inbox-more { margin-top: 8px; text-align: center; }
.inbox-more .btn.sm { font-size: 10.5px; padding: 4px 12px; letter-spacing: 0.5px; }

/* Status bar inbox segment — clickable jump w/ severity tone */
.status-bar .seg.clickable {
  cursor: pointer;
  transition: color 120ms, background 120ms;
}
.status-bar .seg.clickable:hover { background: var(--bg-2); color: var(--green); }
.status-bar .seg.clickable:focus { outline: 1px solid var(--green); outline-offset: 1px; }
.status-bar .seg.clickable.warn .l { color: var(--amber); }
.status-bar .seg.clickable.bad  .l { color: var(--red); }
.status-bar .seg.clickable .green { color: var(--green); }
.status-bar .seg.clickable .amber { color: var(--amber); }
.status-bar .seg.clickable .red   { color: var(--red); }

/* Mobile: collapse inbox row to two lines — cat+title on row 1, sev+amount+action on row 2 */
@media (max-width: 720px) {
  .inbox-row {
    grid-template-columns: 14px 60px 1fr 70px;
    grid-template-rows: auto auto;
    gap: 6px 8px;
    padding: 6px;
  }
  .inbox-sev   { grid-row: 1 / span 2; }
  .inbox-cat   { grid-row: 1; grid-column: 2; font-size: 9px; padding: 1px 3px; }
  .inbox-title { grid-row: 1; grid-column: 3 / span 2; font-size: 11.5px; white-space: normal; }
  .inbox-amt   { grid-row: 2; grid-column: 2 / span 2; text-align: left; font-size: 11px; }
  .inbox-act   { grid-row: 2; grid-column: 4; font-size: 9px; padding: 2px 4px; }
}


/* ===== LENS persona modes (#24) — re-scope panels per role ===== */
.terminal-bar .lens-pills {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 14px;
  font-family: var(--mono);
}
.terminal-bar .lens-pills .lens-lbl {
  color: var(--dim);
  font-size: 10.5px;
  letter-spacing: 0.6px;
  margin-right: 4px;
}
.terminal-bar .lens-pills .lens-pill {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  font-weight: 700;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.terminal-bar .lens-pills .lens-pill:hover {
  color: var(--green);
  border-color: var(--green-dim);
}
.terminal-bar .lens-pills .lens-pill.active {
  color: var(--bg);
  background: var(--green);
  border-color: var(--green);
}
.terminal-bar .lens-pills .lens-pill:focus {
  outline: 1px solid var(--green);
  outline-offset: 1px;
}

/* Lens preview chip — visible above the inbox when a non-FULL persona is active */
.lens-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--white);
  background: var(--bg-1);
  border: 1px solid var(--green-dim);
  padding: 6px 10px;
  margin: 0 0 8px;
  border-radius: 2px;
}
.lens-chip b { color: var(--green); }
.lens-chip .muted { color: var(--dim); font-weight: 400; }
.lens-chip .lens-chip-lbl { color: var(--dim); }
.lens-chip .lens-clear {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  background: transparent;
  color: var(--red);
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  margin-left: auto;
  font-weight: 700;
}
.lens-chip .lens-clear:hover { border-color: var(--red); }
.lens-chip .lens-clear:focus { outline: 1px solid var(--red); outline-offset: 1px; }

/* Per-persona panel-hide rules — DOM stays intact, so all computed totals/insights stay in sync */

main.lens-cro section#funnel,
  main.lens-cro section#deals,
  main.lens-cro section#pipegen,
  main.lens-cro section#reps,
  main.lens-cro section#segments,
  main.lens-cro section#risks { display: none !important; }

main.lens-mgr section#yoy,
  main.lens-mgr section#forecast,
  main.lens-mgr section#pipegen,
  main.lens-mgr section#forward-cov,
  main.lens-mgr section#segments,
  main.lens-mgr section#risks,
  main.lens-mgr section#audience { display: none !important; }

main.lens-ae section#changed,
  main.lens-ae section#yoy,
  main.lens-ae section#funnel,
  main.lens-ae section#forecast,
  main.lens-ae section#slippage,
  main.lens-ae section#pipegen,
  main.lens-ae section#forward-cov,
  main.lens-ae section#at-risk-reps,
  main.lens-ae section#reps,
  main.lens-ae section#segments,
  main.lens-ae section#risks,
  main.lens-ae section#audience { display: none !important; }

main.lens-cfo section#inbox,
  main.lens-cfo section#changed,
  main.lens-cfo section#funnel,
  main.lens-cfo section#deals,
  main.lens-cfo section#pipegen,
  main.lens-cfo section#forward-cov,
  main.lens-cfo section#at-risk-reps,
  main.lens-cfo section#reps,
  main.lens-cfo section#segments,
  main.lens-cfo section#risks,
  main.lens-cfo section#insights,
  main.lens-cfo section#audience { display: none !important; }

main.lens-cmo section#inbox,
  main.lens-cmo section#changed,
  main.lens-cmo section#yoy,
  main.lens-cmo section#forecast,
  main.lens-cmo section#deals,
  main.lens-cmo section#slippage,
  main.lens-cmo section#forward-cov,
  main.lens-cmo section#at-risk-reps,
  main.lens-cmo section#reps,
  main.lens-cmo section#risks,
  main.lens-cmo section#audience { display: none !important; }

main.lens-board section#inbox,
  main.lens-board section#changed,
  main.lens-board section#funnel,
  main.lens-board section#deals,
  main.lens-board section#slippage,
  main.lens-board section#pipegen,
  main.lens-board section#forward-cov,
  main.lens-board section#at-risk-reps,
  main.lens-board section#reps,
  main.lens-board section#segments,
  main.lens-board section#risks,
  main.lens-board section#audience { display: none !important; }


/* Mobile: collapse lens pill group to a horizontal scroll strip; keep pills tappable */
@media (max-width: 720px) {
  .terminal-bar .lens-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    margin: 4px 0 0;
    padding: 0 4px;
    -webkit-overflow-scrolling: touch;
  }
  .terminal-bar .lens-pills .lens-pill {
    flex: 0 0 auto;
    min-width: 44px;
    padding: 4px 6px;
    font-size: 10px;
  }
  .lens-chip { font-size: 10.5px; padding: 5px 8px; flex-wrap: wrap; }
}

/* Respect user motion preferences — no fades when reduced motion is requested */
@media (prefers-reduced-motion: reduce) {
  .terminal-bar .lens-pills .lens-pill,
  .lens-chip,
  #lens-chip { transition: none; }
}


/* ===== PIPELINE FUNNEL — median days-in-stage (#13) ===== */
.funnel-stage {
  position: relative;
}
.funnel-med {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 2px;
  border: 1px solid var(--border);
  background: var(--bg);
  vertical-align: middle;
}
.funnel-med.good { color: var(--green); border-color: var(--green-dim); }
.funnel-med.warn { color: var(--amber); border-color: var(--amber); }
.funnel-med.bad  { color: var(--red);   border-color: var(--red);   background: rgba(255, 82, 82, 0.05); }

/* Caption below the funnel — total + longest-stage callout */
.funnel-cycle {
  margin-top: 10px;
  padding: 6px 8px;
  border-top: 1px dashed var(--border);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--white);
}
.funnel-cycle .muted { color: var(--dim); }
.funnel-cycle .bad   { color: var(--red); }

/* Sales Cycle KPI tile — clickable affordance + cycle whisper line */
.kpi[data-cycle-bound] { transition: border-color 120ms; }
.kpi[data-cycle-bound]:hover { border-color: var(--green-dim); }
.kpi[data-cycle-bound]:focus { outline: 1px solid var(--green); outline-offset: 1px; }
.kpi .k-whisper-cycle { color: var(--dim); }
.kpi .k-whisper-cycle b { color: var(--white); }

/* Mobile: chip wraps under the bar like the aging buckets do today */
@media (max-width: 480px) {
  .funnel-med {
    display: block;
    margin: 4px 0 0;
    width: max-content;
  }
  .funnel-cycle { font-size: 10.5px; }
}


/* ===== WIN / LOSS REASONS (#18) — the playbook hidden in losses ===== */
.winloss-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.winloss-half {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  background: var(--bg-1);
  border-radius: 2px;
}
.winloss-half-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
}
.winloss-half-title {
  font-size: 11px;
  letter-spacing: 0.8px;
  font-weight: 700;
}
.winloss-half-title.good { color: var(--green); }
.winloss-half-title.bad  { color: var(--red); }
.winloss-half-sub {
  font-size: 10.5px;
  color: var(--dim);
  letter-spacing: 0.4px;
}
.winloss-bar,
.winloss-stage-bar,
.winloss-comp-bar {
  display: flex;
  width: 100%;
  height: 14px;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  background: var(--bg);
}
.winloss-seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.4px;
  font-weight: 700;
  color: var(--bg);
  overflow: hidden;
  white-space: nowrap;
  border-right: 1px solid var(--bg-2);
}
.winloss-seg:last-child { border-right: 0; }
.winloss-seg.seg-good  { background: var(--green);     }
.winloss-seg.seg-warn  { background: var(--amber);     color: var(--bg); }
.winloss-seg.seg-bad   { background: var(--red);       color: var(--white); }
.winloss-seg.seg-muted { background: var(--border-2);  color: var(--white); }

.winloss-list,
.winloss-stage-list,
.winloss-comp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.winloss-row {
  display: grid;
  grid-template-columns: 12px 1fr 48px 64px;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  font-family: var(--mono);
  font-size: 11px;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}
.winloss-stage-list .winloss-row {
  grid-template-columns: 12px 1fr 48px 64px 68px;
}
.winloss-row:hover { background: var(--bg-2); border-color: var(--border); }
.winloss-row .winloss-dot { font-size: 10px; line-height: 1; }
.winloss-row.tone-good  .winloss-dot { color: var(--green); }
.winloss-row.tone-warn  .winloss-dot { color: var(--amber); }
.winloss-row.tone-bad   .winloss-dot { color: var(--red);   }
.winloss-row.tone-muted .winloss-dot { color: var(--dim);   }
.winloss-row .winloss-label { color: var(--white); }
.winloss-row .winloss-pct,
.winloss-row .winloss-amt {
  text-align: right;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.winloss-row.tone-bad  .winloss-pct,
.winloss-row.tone-bad  .winloss-amt { color: var(--red);   }
.winloss-row.tone-warn .winloss-pct,
.winloss-row.tone-warn .winloss-amt { color: var(--amber); }
.winloss-row .winloss-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.winloss-comp-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 2px;
  background: rgba(255, 82, 82, 0.06);
}

.winloss-sub-section {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.winloss-sub-head {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.6px;
  color: var(--white);
}
.winloss-sub-head .muted { color: var(--dim); }

@media (max-width: 720px) {
  .winloss-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .winloss-row { grid-template-columns: 12px 1fr 40px 52px; font-size: 10.5px; }
  .winloss-stage-list .winloss-row { grid-template-columns: 12px 1fr 40px 52px 56px; }
  .winloss-seg { font-size: 9px; }
}



/* ---------- STAKEHOLDER REACH (#27) ----------
   Multi-threading / buying-group coverage on every top-deal row + a
   portfolio rollup placed inside the DEAL RISK panel. */
.reach-cell {
  white-space: nowrap;
  font-feature-settings: "tnum";
  padding: 6px 8px !important;
  line-height: 1.35;
  vertical-align: middle;
}
.reach-cell .reach-status {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  margin-right: 4px;
  border: 1px solid transparent;
}
.reach-cell .reach-status.strong { color: var(--green); border-color: rgba(46,160,67,0.35); background: rgba(46,160,67,0.08); }
.reach-cell .reach-status.ok { color: var(--green-soft, #5fb878); border-color: rgba(95,184,120,0.30); background: rgba(95,184,120,0.06); }
.reach-cell .reach-status.thin { color: var(--amber); border-color: rgba(210,153,34,0.40); background: rgba(210,153,34,0.10); }
.reach-cell .reach-status.single { color: var(--red); border-color: rgba(218,54,51,0.45); background: rgba(218,54,51,0.12); }
.reach-cell .reach-single-chip { display: inline-block; margin-left: 2px; padding: 0 4px; font-size: 10px; color: var(--red); border: 1px solid rgba(218,54,51,0.35); border-radius: 2px; background: rgba(218,54,51,0.06); letter-spacing: 0.3px; }
.reach-cell .reach-mismatch { display: inline-block; margin-left: 4px; padding: 0 4px; font-size: 10px; color: var(--amber); border: 1px solid rgba(210,153,34,0.35); border-radius: 2px; background: rgba(210,153,34,0.06); letter-spacing: 0.3px; }
.reach-cell .reach-bar { display: inline-flex; gap: 1px; margin-left: 6px; vertical-align: middle; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 11px; letter-spacing: -1px; }
.reach-cell .reach-bar-cell { line-height: 1; }
.reach-cell .reach-bar-cell.s0 { color: var(--dim); opacity: 0.45; }
.reach-cell .reach-bar-cell.s1 { color: var(--amber); opacity: 0.85; }
.reach-cell .reach-bar-cell.s2 { color: var(--green); }
.reach-cell .reach-mobile { display: none; }

/* Aggregate rollup inside DEAL RISK panel */
.reach-aggregate { padding: 8px 10px 10px; margin: 0 -8px 10px; border-bottom: 1px dashed var(--border, rgba(255,255,255,0.08)); }
.reach-agg-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.reach-agg-title { font-size: 11px; letter-spacing: 1px; color: var(--dim); font-weight: 600; }
.reach-agg-avg { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; }
.reach-agg-avg.strong { color: var(--green); }
.reach-agg-avg.ok { color: var(--green-soft, #5fb878); }
.reach-agg-avg.thin { color: var(--amber); }
.reach-agg-avg.single { color: var(--red); }
.reach-agg-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.reach-agg-chip { display: inline-block; padding: 2px 7px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 10.5px; letter-spacing: 0.3px; border: 1px solid var(--border, rgba(255,255,255,0.10)); border-radius: 2px; color: var(--text, #c9d1d9); background: rgba(255,255,255,0.02); cursor: default; }
.reach-agg-chip.clickable { cursor: pointer; color: var(--red); border-color: rgba(218,54,51,0.45); background: rgba(218,54,51,0.10); }
.reach-agg-chip.clickable:hover { background: rgba(218,54,51,0.18); }
.reach-agg-chip.clickable.active { background: rgba(218,54,51,0.28); }
.reach-agg-chip.amber { color: var(--amber); border-color: rgba(210,153,34,0.35); }
.reach-agg-chip.strong { color: var(--green); border-color: rgba(46,160,67,0.35); }
.reach-agg-chip.clear { color: var(--dim); cursor: pointer; }
.reach-agg-chip.clear:hover { color: var(--text); }

/* Mobile collapse */
@media (max-width: 480px) {
  .reach-cell .reach-status,
  .reach-cell .reach-single-chip,
  .reach-cell .reach-mismatch,
  .reach-cell .reach-bar { display: none; }
  .reach-cell .reach-mobile { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.4px; }
  .reach-cell .reach-mobile.strong { color: var(--green); }
  .reach-cell .reach-mobile.ok { color: var(--green-soft, #5fb878); }
  .reach-cell .reach-mobile.thin { color: var(--amber); }
  .reach-cell .reach-mobile.single { color: var(--red); }
}



/* ---------- BENCHMARKS (#30) ----------
   8-chip strip + BENCHMARK INDEX placed directly under KPI DESK.
   Per-KPI tile whispers reuse .k-whisper (shipped in #10).
   Uses only existing CSS vars; no new font families. */
#benchmarks .panel-head .sub { cursor: pointer; }
#benchmarks .panel-head .right { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 11px; }
.bench-index-pill { display: inline-block; padding: 2px 8px; border: 1px solid var(--border, rgba(255,255,255,0.10)); border-radius: 2px; letter-spacing: 0.4px; }
.bench-index-pill.strong { color: var(--green); border-color: rgba(46,160,67,0.45); background: rgba(46,160,67,0.10); }
.bench-index-pill.ok     { color: var(--green-soft, #5fb878); border-color: rgba(95,184,120,0.40); background: rgba(95,184,120,0.06); }
.bench-index-pill.amber  { color: var(--amber); border-color: rgba(210,153,34,0.40); background: rgba(210,153,34,0.08); }
.bench-index-pill.red    { color: var(--red); border-color: rgba(218,54,51,0.45); background: rgba(218,54,51,0.10); }

.bench-strip {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  padding: 6px 4px 4px;
}
.bench-chip {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  background: rgba(255,255,255,0.02);
  color: var(--text, #c9d1d9);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  padding: 8px 8px 7px;
  border-radius: 2px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.bench-chip:hover  { background: rgba(255,255,255,0.05); }
.bench-chip:focus  { outline: 1px dotted var(--dim); outline-offset: 1px; }
.bench-chip.strong { border-color: rgba(46,160,67,0.45); }
.bench-chip.ok     { border-color: rgba(95,184,120,0.35); }
.bench-chip.amber  { border-color: rgba(210,153,34,0.45); }
.bench-chip.red    { border-color: rgba(218,54,51,0.50); }

.bench-chip-label { font-size: 10px; color: var(--dim); letter-spacing: 0.6px; font-weight: 600; }
.bench-chip-our   { font-size: 13px; font-weight: 700; color: var(--text, #c9d1d9); letter-spacing: 0.3px; }
.bench-chip-pct   { font-size: 10.5px; letter-spacing: 0.4px; font-weight: 600; }
.bench-chip.strong .bench-chip-pct { color: var(--green); }
.bench-chip.ok     .bench-chip-pct { color: var(--green-soft, #5fb878); }
.bench-chip.amber  .bench-chip-pct { color: var(--amber); }
.bench-chip.red    .bench-chip-pct { color: var(--red); }

.bench-mismatch { display: inline-block; margin-left: 4px; color: var(--amber); font-size: 10px; }

@keyframes benchPulse { from { box-shadow: 0 0 0 0 rgba(95,184,120,0.55);} to { box-shadow: 0 0 0 10px rgba(95,184,120,0); } }
.bench-pulse { animation: benchPulse 1.4s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .bench-pulse { animation: none; } }

.bench-source { padding: 8px 10px; margin: 8px 4px 0; border: 1px dashed var(--border, rgba(255,255,255,0.10)); color: var(--dim); font-size: 11px; line-height: 1.5; }
.bench-source b { color: var(--text, #c9d1d9); }
.bench-source-url { color: var(--green-soft, #5fb878); }

/* KPI tile bench whisper (3rd whisper line, reuses .k-whisper) */
.k-whisper-bench { font-weight: 600; letter-spacing: 0.3px; }
.k-whisper-bench.strong { color: var(--green); }
.k-whisper-bench.ok     { color: var(--green-soft, #5fb878); }
.k-whisper-bench.amber  { color: var(--amber); }
.k-whisper-bench.red    { color: var(--red); }

/* Lens hide: AE / MGR don't get the BENCHMARKS panel (less actionable
   for their daily loops). KPI-tile whispers stay visible across lenses. */
main.lens-ae #benchmarks,
main.lens-mgr #benchmarks { display: none !important; }

/* Mobile: 2x4 grid */
@media (max-width: 720px) {
  .bench-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .bench-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #benchmarks .panel-head .right { display: none; }
}



/* ---------- DEAL DETAIL EXPANDER (#32) ----------
   Bloomberg DES-style inline expander on TOP OPEN DEALS rows.
   Uses only existing CSS vars; no new colors / fonts. */
#deals tbody tr.row-expanded { background: rgba(95,184,120,0.06); }
#deals tbody tr.row-expanded td:first-child b { text-shadow: 0 0 0.5px currentColor; }
#deals tbody tr[data-account] td:first-child { cursor: pointer; }
#deals tbody tr[data-account] td:first-child:hover b { text-decoration: underline; }

tr.expander-row > td {
  padding: 0 !important;
  background: rgba(255,255,255,0.015);
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.10));
}
.expander-inner {
  padding: 10px 14px 12px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text, #c9d1d9);
  animation: expanderOpen 180ms ease-out;
}
@keyframes expanderOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .expander-inner { animation: none; } }

.expander-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--border, rgba(255,255,255,0.10));
}
.exp-head-chev { color: var(--green); }
.exp-head-sep  { color: var(--dim); }
.exp-head-amt  { font-weight: 700; }
.exp-collapse-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,0.15));
  color: var(--dim);
  font-family: inherit;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  cursor: pointer;
  border-radius: 2px;
}
.exp-collapse-btn:hover { color: var(--text); border-color: var(--text); }
.expander-mismatch {
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  color: var(--amber);
  border: 1px solid rgba(210,153,34,0.40);
  border-radius: 2px;
  background: rgba(210,153,34,0.06);
}

.expander-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  gap: 16px;
}
.expander-col-title {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--dim);
  font-weight: 600;
  margin-bottom: 4px;
  border-bottom: 1px dotted var(--border, rgba(255,255,255,0.10));
  padding-bottom: 2px;
}

.expander-act-row { display: flex; gap: 8px; padding: 1px 0; }
.exp-act-date     { color: var(--dim); width: 56px; flex: 0 0 auto; }
.exp-act-icon     { color: var(--green-soft, #5fb878); width: 14px; flex: 0 0 auto; text-align: center; }
.exp-act-summary  { color: var(--text, #c9d1d9); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.expander-meddic-row { display: flex; gap: 6px; padding: 1px 0; align-items: center; }
.expander-meddic-row.on .exp-meddic-letter { color: var(--green); font-weight: 700; }
.expander-meddic-row.off .exp-meddic-letter { color: var(--amber); font-weight: 700; }
.exp-meddic-letter { width: 22px; flex: 0 0 auto; text-align: center; }
.exp-meddic-glyph  { width: 12px; flex: 0 0 auto; text-align: center; }
.exp-meddic-glyph.green { color: var(--green); }
.exp-meddic-glyph.amber { color: var(--amber); }
.exp-meddic-note   { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text, #c9d1d9); }

.expander-stake-row { display: flex; gap: 6px; padding: 1px 0; align-items: center; }
.exp-stake-role    { width: 18px; color: var(--dim); flex: 0 0 auto; text-align: center; }
.exp-stake-glyph   { width: 12px; flex: 0 0 auto; text-align: center; }
.exp-stake-glyph.green { color: var(--green); }
.exp-stake-glyph.amber { color: var(--amber); }
.exp-stake-glyph.red   { color: var(--red); }
.exp-stake-name    { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expander-stake-row.missing .exp-stake-name { color: var(--red); opacity: 0.85; }
.exp-stake-title   { color: var(--dim); font-size: 10.5px; }

.expander-notes {
  margin-top: 10px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.025);
  border-left: 2px solid var(--green-soft, #5fb878);
  font-size: 11px;
  line-height: 1.55;
}
.expander-notes b { color: var(--green-soft, #5fb878); letter-spacing: 0.5px; }

.expander-actions { margin-top: 8px; display: flex; gap: 8px; justify-content: flex-end; }
.exp-action-btn {
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,0.15));
  color: var(--green-soft, #5fb878);
  font-family: inherit;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  cursor: pointer;
  border-radius: 2px;
}
.exp-action-btn:hover { color: var(--text); border-color: var(--text); }

.expander-empty { color: var(--dim); font-style: italic; }

/* Lens hide: BOARD doesn't get the expander */
main.lens-board #deals tbody tr[data-account] td:first-child { cursor: default; }
main.lens-board tr.expander-row { display: none; }

/* Mobile: full-screen modal overlay instead of inline expansion */
.deal-expand-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: stretch; }
.deal-expand-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); cursor: pointer; }
.deal-expand-modal-body { position: relative; margin: auto; width: 96%; max-height: 92vh; overflow-y: auto; background: var(--bg, #0d1117); border: 1px solid var(--border, rgba(255,255,255,0.15)); padding: 8px; border-radius: 2px; }
@media (max-width: 480px) {
  .expander-grid { grid-template-columns: 1fr; gap: 10px; }
  .expander-head { flex-wrap: wrap; }
}



/* ---------- SCENARIO MODELER · WHAT-IF (#31) ----------
   Lever bar + result strip; mono terminal aesthetic; no new colors. */
#scenario .panel-head .right.scenario-presets { display: flex; gap: 6px; align-items: center; }
.scn-preset, .scn-reset {
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,0.15));
  color: var(--green-soft, #5fb878);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.7px;
  padding: 3px 8px;
  cursor: pointer;
  border-radius: 2px;
}
.scn-reset { color: var(--dim); }
.scn-preset:hover, .scn-reset:hover { color: var(--text); border-color: var(--text); }

.scn-mismatch:empty { display: none; }
.scn-mismatch { padding: 4px 6px; margin-bottom: 6px; }

.scn-levers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
  padding: 6px 4px 12px;
  border-bottom: 1px dashed var(--border, rgba(255,255,255,0.10));
  margin-bottom: 10px;
}
.scn-lever-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.1fr) minmax(150px, 1fr) minmax(140px, 1.3fr);
  gap: 8px;
  align-items: center;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
  padding: 2px 0;
}
.scn-lever-lbl { color: var(--text, #c9d1d9); font-weight: 600; letter-spacing: 0.4px; }
.scn-xref { color: var(--dim); font-weight: 400; font-size: 9.5px; margin-left: 4px; letter-spacing: 0.5px; }
.scn-select {
  background: rgba(255,255,255,0.04);
  color: var(--green-soft, #5fb878);
  border: 1px solid var(--border, rgba(255,255,255,0.15));
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.4px;
  padding: 3px 6px;
  border-radius: 2px;
  text-transform: uppercase;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--green-soft, #5fb878) 50%), linear-gradient(135deg, var(--green-soft, #5fb878) 50%, transparent 50%);
  background-position: calc(100% - 11px) center, calc(100% - 6px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 22px;
  cursor: pointer;
}
.scn-select:focus { outline: 1px solid var(--green); outline-offset: 1px; }
.scn-lever-note { color: var(--dim); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.scn-result-head {
  display: flex;
  align-items: center;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.7px;
  margin-bottom: 6px;
}
.scn-label {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 10.5px;
  border: 1px solid;
}
.scn-label.scn-best   { color: var(--green);  border-color: var(--green);    background: rgba(95,184,120,0.08); }
.scn-label.scn-upside { color: var(--green-soft, #5fb878); border-color: rgba(95,184,120,0.50); }
.scn-label.scn-quo    { color: var(--dim);    border-color: var(--border, rgba(255,255,255,0.15)); }
.scn-label.scn-down   { color: var(--amber);  border-color: rgba(210,153,34,0.50); background: rgba(210,153,34,0.06); }
.scn-label.scn-worst  { color: var(--red);    border-color: var(--red);      background: rgba(208,77,77,0.10); }
.scn-warn { margin-left: 4px; }

.scn-result-grid {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11.5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.scn-row {
  display: grid;
  grid-template-columns: 110px 80px 18px 90px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 3px 4px;
  border-bottom: 1px dotted var(--border, rgba(255,255,255,0.08));
}
.scn-kpi   { color: var(--dim); letter-spacing: 0.6px; font-weight: 600; }
.scn-base  { color: var(--dim); }
.scn-arrow { color: var(--dim); text-align: center; }
.scn-new   { color: var(--text, #c9d1d9); }
.scn-delta { letter-spacing: 0.3px; }
.scn-delta.green  { color: var(--green); }
.scn-delta.amber  { color: var(--amber); }
.scn-delta.red    { color: var(--red); }
.scn-delta.muted  { color: var(--dim); }
.scn-attain { letter-spacing: 0.4px; text-align: right; }
.scn-attain.green { color: var(--green); }
.scn-attain.amber { color: var(--amber); }
.scn-attain.red   { color: var(--red); }
.scn-attain.muted { color: var(--dim); }

.scn-pulse { animation: scnPulse 1.4s ease-out 1; }
@keyframes scnPulse {
  0%   { background: rgba(95,184,120,0.18); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .scn-pulse { animation: none; } }

/* Mobile */
@media (max-width: 480px) {
  .scn-levers { grid-template-columns: 1fr; gap: 8px; }
  .scn-lever-row { grid-template-columns: 1fr; gap: 2px; }
  .scn-row { grid-template-columns: 1fr 1fr; }
  .scn-arrow { display: none; }
  #scenario .panel-head .right.scenario-presets { flex-wrap: wrap; row-gap: 4px; }
}



/* ---------- EARNED vs SOFT COMMIT (#34) ----------
   Horizontal stacked bar + driver chips at the bottom of FORECAST panel.
   No new colors — uses --green / --amber / --red CSS vars. */
.cs-wrap {
  margin-top: 8px;
  padding: 8px 10px;
  border-top: 1px dashed var(--border, rgba(255,255,255,0.10));
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--text, #c9d1d9);
}
.cs-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.cs-title { letter-spacing: 0.4px; font-weight: 600; }
.cs-glyph.cs-good { color: var(--green); }
.cs-glyph.cs-warn { color: var(--amber); }
.cs-bench {
  margin-left: auto;
  padding: 1px 6px;
  font-size: 10.5px;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: 0.95;
}
.cs-bench.green { color: var(--green); }
.cs-bench.amber { color: var(--amber); }
.cs-bench.red   { color: var(--red); }
.cs-mismatch {
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  color: var(--amber);
  border: 1px solid rgba(210,153,34,0.40);
  border-radius: 2px;
  background: rgba(210,153,34,0.06);
}

.cs-bar {
  display: flex;
  width: 100%;
  height: 24px;
  border: 1px solid var(--border, rgba(255,255,255,0.15));
  border-radius: 2px;
  overflow: hidden;
  margin: 4px 0 8px;
}
.cs-seg {
  background: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  padding: 0 8px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 120ms ease-out;
  min-width: 0;
  overflow: hidden;
}
.cs-seg-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-seg.cs-earned {
  background: rgba(95,184,120,0.22);
  color: var(--green);
  font-weight: 700;
  border-right: 1px solid var(--bg, #0d1117);
}
.cs-seg.cs-soft {
  background: rgba(210,153,34,0.20);
  color: var(--amber);
  font-weight: 700;
}
.cs-seg:hover { filter: brightness(1.25); }
.cs-seg:focus { outline: 1px solid currentColor; outline-offset: -1px; }

.cs-drivers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 10.5px;
}
.cs-drivers-lbl { color: var(--dim); letter-spacing: 0.7px; }
.cs-driver {
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,0.15));
  color: var(--amber);
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 2px;
}
.cs-driver:hover { color: var(--text); border-color: var(--text); }
.cs-empty { color: var(--dim); font-style: italic; }

@media (max-width: 480px) {
  .cs-head { flex-direction: column; align-items: flex-start; }
  .cs-bench { margin-left: 0; }
  .cs-seg-lbl { font-size: 9.5px; }
}


/* ==========================================================================
   #33 DEAL HEALTH SCORE (v0.27) — composite per-deal health + portfolio tile
   ========================================================================== */

/* HEALTH cell in TOP OPEN DEALS row */
.health-cell {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.health-cell .h-glyph { margin-right: 2px; }
.health-cell.h-strong   { color: var(--green); }
.health-cell.h-ok       { color: var(--green); opacity: 0.85; }
.health-cell.h-atrisk   { color: var(--amber); }
.health-cell.h-critical { color: var(--red); }
th#th-health { cursor: pointer; }
th#th-health.sorted { color: var(--green); }

/* PORTFOLIO HEALTH tile inside DEAL RISK panel */
.portfolio-health {
  border: 1px solid var(--border);
  padding: 10px 12px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.015);
}
.portfolio-health .ph-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.portfolio-health .ph-title {
  font-size: 10.5px; letter-spacing: 0.8px; color: var(--dim);
  text-transform: uppercase;
}
.portfolio-health .ph-big {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px; font-weight: 600; color: var(--text);
}
.portfolio-health .ph-of { font-size: 11px; color: var(--dim); }
.portfolio-health .ph-band-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; padding: 1px 6px; border: 1px solid var(--border);
  letter-spacing: 0.4px;
}
.portfolio-health .ph-band-chip.h-strong   { color: var(--green); border-color: var(--green); }
.portfolio-health .ph-band-chip.h-ok       { color: var(--green); opacity: 0.85; }
.portfolio-health .ph-band-chip.h-atrisk   { color: var(--amber); border-color: var(--amber); }
.portfolio-health .ph-band-chip.h-critical { color: var(--red); border-color: var(--red); }
.portfolio-health .ph-wow {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: var(--dim); margin-left: auto;
}
.portfolio-health .ph-wow.up   { color: var(--green); }
.portfolio-health .ph-wow.down { color: var(--red); }
.portfolio-health .ph-bar {
  position: relative; height: 6px; background: rgba(255,255,255,0.04);
  border: 1px solid var(--border); margin: 6px 0;
}
.portfolio-health .ph-bar-fill { height: 100%; background: var(--green); transition: width 0.3s ease; }
.portfolio-health .ph-bar-fill.h-strong   { background: var(--green); }
.portfolio-health .ph-bar-fill.h-ok       { background: var(--green); opacity: 0.7; }
.portfolio-health .ph-bar-fill.h-atrisk   { background: var(--amber); }
.portfolio-health .ph-bar-fill.h-critical { background: var(--red); }
.portfolio-health .ph-buckets {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px;
}
.portfolio-health .ph-bucket {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; padding: 2px 7px; border: 1px solid var(--border);
  background: transparent; color: var(--dim); cursor: pointer;
  letter-spacing: 0.3px;
}
.portfolio-health .ph-bucket:hover { color: var(--text); border-color: var(--green); }
.portfolio-health .ph-bucket.active { color: var(--text); background: rgba(255,255,255,0.04); }
.portfolio-health .ph-bucket.h-strong.active   { border-color: var(--green); color: var(--green); }
.portfolio-health .ph-bucket.h-atrisk.active   { border-color: var(--amber); color: var(--amber); }
.portfolio-health .ph-bucket.h-critical.active { border-color: var(--red); color: var(--red); }
.portfolio-health .ph-critical-amt {
  margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--red);
}
.portfolio-health .ph-mismatch {
  display: inline-block; margin-left: 6px; padding: 0 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; color: var(--amber); border: 1px solid var(--amber);
}

/* HEALTH filter chip above TOP OPEN DEALS */
.health-filter-chip {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-bottom: 6px;
}
.health-filter-chip:empty { display: none; }
.health-filter-chip .hf-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; padding: 2px 7px; border: 1px solid var(--red);
  color: var(--red); background: rgba(208,77,77,0.06);
  letter-spacing: 0.3px; cursor: pointer;
}
.health-filter-chip .hf-chip:hover { background: rgba(208,77,77,0.12); }
.health-filter-chip .hf-x { opacity: 0.7; margin-left: 4px; }

/* Mobile — collapse HEALTH cell to glyph only */
@media (max-width: 480px) {
  .health-cell b { display: none; }
  .portfolio-health .ph-big { font-size: 16px; }
  .portfolio-health .ph-buckets { gap: 4px; }
  .portfolio-health .ph-bucket { font-size: 10px; padding: 2px 5px; }
}


/* ==========================================================================
   #36 TEAM ATTAIN · MANAGER ROLLUP (v0.28)
   ========================================================================== */
.team-attain-body { font-size: 11.5px; }
.team-attain-body .data-table { width: 100%; border-collapse: collapse; }
.team-attain-body .data-table th,
.team-attain-body .data-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.team-attain-body .data-table th {
  text-align: left; color: var(--dim); font-weight: 500;
  letter-spacing: 0.4px; font-size: 10.5px;
}
.team-attain-body .data-table td.num,
.team-attain-body .data-table th.num { text-align: right; }
.team-attain-body .ta-row { cursor: pointer; transition: background 0.15s; }
.team-attain-body .ta-row:hover { background: rgba(255,255,255,0.025); }
.team-attain-body .ta-row.active { background: rgba(99,180,99,0.06); border-left: 2px solid var(--green); }
.team-attain-body .ta-total td { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--dim); border-top: 1px solid var(--border); border-bottom: none; padding-top: 6px; }
.team-attain-body .h-strong   { color: var(--green); }
.team-attain-body .h-ok       { color: var(--green); opacity: 0.85; }
.team-attain-body .h-atrisk   { color: var(--amber); }
.team-attain-body .h-critical { color: var(--red); }
.team-attain-body .ta-chip {
  display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; padding: 2px 7px; border: 1px solid var(--green);
  color: var(--green); background: rgba(99,180,99,0.06);
  letter-spacing: 0.3px; cursor: pointer; margin-bottom: 8px;
}
.team-attain-body .ta-chip:hover { background: rgba(99,180,99,0.12); }
.team-attain-body .ta-chip .ta-x { opacity: 0.7; margin-left: 6px; }
.team-attain-body .ta-mismatch {
  display: inline-block; margin-top: 6px; padding: 1px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; color: var(--amber); border: 1px solid var(--amber);
}
.mgr-cell {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--dim);
}
#reps.pulse-soft { animation: ta-pulse 1.5s ease-out; }
@keyframes ta-pulse {
  0% { box-shadow: 0 0 0 0 rgba(99,180,99,0.30); }
  50% { box-shadow: 0 0 0 8px rgba(99,180,99,0); }
  100% { box-shadow: 0 0 0 0 rgba(99,180,99,0); }
}
@media (max-width: 480px) {
  .team-attain-body .data-table th:nth-child(6),
  .team-attain-body .data-table td:nth-child(6),
  .team-attain-body .data-table th:nth-child(7),
  .team-attain-body .data-table td:nth-child(7) { display: none; }
  .mgr-cell { font-size: 10px; }
}


/* ==========================================================================
   #35 PIPELINE EROSION FORECAST (v0.29)
   ========================================================================== */
.erosion-body { font-size: 11.5px; }
.erosion-body .er-head { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.erosion-body .er-methodology-toggle {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; padding: 2px 8px; background: transparent;
  border: 1px solid var(--border); color: var(--dim); cursor: pointer;
  letter-spacing: 0.4px;
}
.erosion-body .er-methodology-toggle:hover { color: var(--text); border-color: var(--green); }
.erosion-body .data-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.erosion-body .data-table th,
.erosion-body .data-table td {
  padding: 3px 8px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.erosion-body .data-table td.num { text-align: right; }
.erosion-body .er-summary td { padding: 5px 8px; font-size: 12px; }
.erosion-body .er-summary td:first-child { color: var(--dim); letter-spacing: 0.4px; font-size: 10.5px; text-transform: uppercase; }
.erosion-body .er-summary td:nth-child(2) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.erosion-body .er-section-title {
  font-size: 10.5px; letter-spacing: 0.6px; color: var(--dim);
  text-transform: uppercase; margin: 14px 0 6px;
  border-bottom: 1px solid var(--border); padding-bottom: 3px;
}
.erosion-body .er-quarters td,
.erosion-body .er-stages td { padding: 3px 8px; }
.erosion-body .er-bar code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; letter-spacing: -1px; color: var(--green);
  background: transparent;
}
.erosion-body .er-stage-row { cursor: pointer; transition: background 0.15s; }
.erosion-body .er-stage-row:hover { background: rgba(255,255,255,0.025); }
.erosion-body .er-bench {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--dim);
}
.erosion-body .er-flush {
  margin-top: 12px; padding: 10px 12px;
  border: 1px solid var(--amber); background: rgba(214,158,46,0.04);
  cursor: pointer; transition: background 0.15s;
  font-size: 11.5px; line-height: 1.6;
}
.erosion-body .er-flush:hover { background: rgba(214,158,46,0.10); }
.erosion-body .er-flush b { color: var(--amber); }
.erosion-body .er-flush-link {
  display: inline-block; margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--green); letter-spacing: 0.3px;
}
.erosion-body .er-mismatch {
  display: inline-block; margin-top: 10px; padding: 2px 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: var(--amber); border: 1px solid var(--amber);
}
.erosion-body .er-methodology {
  margin-top: 14px; padding: 10px 12px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.015);
  font-size: 11px; line-height: 1.55;
}
.erosion-body .er-methodology p { margin: 4px 0; }
.erosion-body .er-methodology code {
  background: rgba(255,255,255,0.04); padding: 1px 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px;
}
#deals.pulse-soft { animation: er-pulse 1.5s ease-out; }
@keyframes er-pulse {
  0% { box-shadow: 0 0 0 0 rgba(99,180,99,0.30); }
  50% { box-shadow: 0 0 0 8px rgba(99,180,99,0); }
  100% { box-shadow: 0 0 0 0 rgba(99,180,99,0); }
}
@media (max-width: 480px) {
  .erosion-body .er-bar { display: none; }
  .erosion-body .er-summary td:nth-child(2) { font-size: 12px; }
  .erosion-body .er-quarters td:last-child { display: none; }
}


/* ===== FUNCTION PAGES (#37) ===== */
nav.fkeys .pg-pill {
  background: none; border: none; font: inherit; cursor: pointer;
  color: inherit; padding: 6px 10px; border-radius: 3px;
}
nav.fkeys .pg-pill .k { color: var(--green); font-weight: 700; margin-right: 4px; }
nav.fkeys .pg-pill:hover:not(.active) { background: var(--green-soft); color: var(--green); }
nav.fkeys .pg-pill.active { background: var(--green); color: #000; font-weight: 700; }
nav.fkeys .pg-pill.active .k { color: #000; }

main[data-page="overview"] section[data-pages]:not(.pg-overview),
main[data-page="pipeline"] section[data-pages]:not(.pg-pipeline),
main[data-page="forecast"] section[data-pages]:not(.pg-forecast),
main[data-page="deals"]    section[data-pages]:not(.pg-deals),
main[data-page="team"]     section[data-pages]:not(.pg-team),
main[data-page="intel"]    section[data-pages]:not(.pg-intel),
main[data-page="history"]  section[data-pages]:not(.pg-history) {
  display: none !important;
}

.pages-intro {
  background: rgba(0, 230, 118, 0.06);
  border: 1px solid var(--green);
  color: var(--green);
  padding: 8px 14px;
  margin: 6px 14px 0;
  font-size: 11px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.pages-intro b { color: var(--green); }
.pages-intro .pi-x {
  background: none; border: 1px solid currentColor; color: inherit;
  cursor: pointer; padding: 3px 9px; font: inherit; font-size: 10px;
  letter-spacing: 1px;
}
.pages-intro .pi-x:hover { background: var(--green); color: #000; }

#status-page { color: var(--green); }

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

@media (max-width: 480px) {
  nav.fkeys {
    overflow-x: auto; flex-wrap: nowrap;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  nav.fkeys .pg-pill, nav.fkeys .fkey { scroll-snap-align: start; flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pages-intro { animation: none !important; }
}