/* primitives.css — MB21 c4 consolidation
 *
 * UI primitives: .fmn-btn-* family, .ec-btn-* family (composer buttons),
 * form controls (inputs, selects, textareas), badges, pills, dividers,
 * generic chip styles. Anything that's reused across multiple surfaces
 * as a building block.
 *
 * Receives migrated rules per the c4 classification rubric. v34's
 * doubled-class hacks (.fmn-btn-icon.fmn-btn-icon etc.) drop to
 * single-class when migrated here — load order now wins on its own.
 */



/* === migrated from components-base.css === */
/* ============================================================
   components-base.css — Round 2 (post-audit)

   The PRIMITIVES library. Defines the canonical visual vocabulary:
   pills, badges, buttons, modals, panels, page-headers, section-headers,
   tables, status indicators.

   Loaded AFTER tokens.css and base.css, BEFORE components.css and
   styles-additions-v*.css. Component CSS should use these primitives by
   COMPOSITION (e.g., <span class="pill pill-sm pill-stream-components">),
   not by re-declaring rules.

   Migration target: every duplicated pill/chip/badge/modal definition
   in components.css and styles-additions-v*.css collapses into composed
   uses of these primitives. See DESIGN_SYSTEM.md for the catalog of
   migrations.
   ============================================================ */
/* ============================================================
   PILL — replaces 18 distinct pill-class names

   Composition pattern:
     <span class="pill pill-md pill-stream-components">Components</span>
     <span class="pill pill-sm pill-status-overdue">overdue 4d</span>
     <span class="pill pill-md pill-tier-hot">HOT</span>
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0_5) var(--space-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(28, 28, 26, 0.06);
  color: var(--text-secondary);
}

/* Size variants */
.pill-sm { padding: var(--space-0_5) var(--space-1_5); font-size: 10px; }

/* Pill with leading dot indicator */
.pill::before {
  content: "";
  display: none;
}

/* ============================================================
   BADGE — counts, smaller than pill, no caps

   Composition:
     <span class="badge">3</span>
     <span class="badge badge-warning">12 overdue</span>
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--text-primary);
  color: var(--text-on-accent);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  line-height: 1;
}

/* ============================================================
   BUTTONS — primary / secondary / tertiary / danger / ghost
   plus -sm / -md (default) / -lg sizes

   Note: base.css has the original .btn-primary/.btn-secondary/.btn-danger
   definitions. Round 2 retires those in favor of these — base.css's
   versions become aliases (kept for back-compat, deprecated for new use).

   Composition:
     <button class="btn btn-primary">Save</button>
     <button class="btn btn-secondary btn-sm">Cancel</button>
     <button class="btn btn-ghost">x</button>
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1_5);
  padding: var(--space-2) var(--space-3_5);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-primary);
  transition:
    background var(--motion-fast) var(--easing-out),
    color      var(--motion-fast) var(--easing-out),
    border-color var(--motion-fast) var(--easing-out),
    opacity    var(--motion-fast) var(--easing-out);
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Sizes */
.btn-sm { padding: var(--space-1) var(--space-2_5); font-size: var(--text-sm); }

/* Variants */
.btn-primary {
  background: var(--text-primary);
  color: var(--bg-page);
  border-color: var(--text-primary);
}

.btn-primary:hover { opacity: 0.85; }

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-default);
}

.btn-secondary:hover { background: rgba(28, 28, 26, 0.04); }

.btn-danger {
  background: transparent;
  color: var(--color-rose-600);
  border-color: var(--color-rose-600);
}

.btn-danger:hover { background: var(--color-rose-50); }

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

.btn-ghost:hover { background: rgba(28, 28, 26, 0.04); color: var(--text-primary); }

/* ============================================================
   SECTION HEADER — within panels, within pages
   Consolidates .panel-section-label, .h-section-label, and a few
   one-off section labels in components.css.
   ============================================================ */
/* ============================================================
   TABLE — used by dashboard-summary-table and standalone pages
   ============================================================ */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.tbl-th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-default);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.tbl-th:hover { color: var(--text-primary); }

.tbl-th.is-sorted-asc::after  { content: "  ↑"; }

.tbl-th.is-sorted-desc::after { content: "  ↓"; }

.tbl-row {
  cursor: pointer;
  transition: background var(--motion-fast) var(--easing-out);
}

.tbl-row:hover { background: var(--bg-elev-2); }

.tbl-cell {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

/* Staleness encoding on rows — uses tokens from tokens.css */
.tbl-row.is-due-soon .tbl-cell {
  background: var(--staleness-due-soon-bg);
  border-left: var(--staleness-due-soon-border) solid var(--staleness-due-soon-accent);
}

.tbl-row.is-overdue .tbl-cell {
  background: var(--staleness-overdue-bg);
  border-left: var(--staleness-overdue-border) solid var(--staleness-overdue-accent);
}

.tbl-row.is-very-overdue .tbl-cell {
  background: var(--staleness-very-overdue-bg);
  border-left: var(--staleness-very-overdue-border) solid var(--staleness-very-overdue-accent);
}

/* ============================================================
   STATUS INDICATOR — primitive for the multi-dim encoding

   For dimensions where a pill is too heavy and a row tint is wrong:
   inline-text indicators with a leading dot.

     <span class="status-indicator status-indicator-positive">
       <span class="status-indicator-dot"></span>
       buying signal
     </span>
   ============================================================ */
/* AI signal severity */
.status-indicator-positive .status-indicator-dot { background: var(--sentiment-positive); }

.status-indicator-neutral  .status-indicator-dot { background: var(--sentiment-neutral); }

.status-indicator-mixed    .status-indicator-dot { background: var(--sentiment-mixed); }

.status-indicator-negative .status-indicator-dot { background: var(--sentiment-negative); }

/* ============================================================
   STREAM CHIP — small inline marker showing which stream(s)
   an account belongs to. Composes pill + pill-stream-* + pill-with-dot.

   Convenience class for very common usage:
     <span class="stream-chip stream-chip-components">Components</span>
   ============================================================ */
.stream-chip {
  /* identical to .pill .pill-with-dot .pill-md but as single class */
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0_5) var(--space-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  white-space: nowrap;
}

.stream-chip::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

/* === end migrated from components-base.css === */


/* === migrated from styles-additions-v33.css === */
/* styles-additions-v33.css — MB13: standardization + IdentityCard + dashboard
 *
 * Loaded AFTER v32.css. Cache buster v=240.
 *
 * Sections:
 *   1. Button primitives (S1)
 *   2. Field label primitives (S2)
 *   3. IdentityCard primitive (C4)
 *   4. Contact summary card view (C2/C3)
 *   5. Composer field-order fixes (L1/L2)
 *   6. Pre-send checklist clickable flags (L5)
 *   7. Page header redesign (D1)
 *   8. Dashboard stat config + tiles (D2/D3)
 *   9. Watched carousel cards (D4)
 *  10. Summary lists sizing (D5)
 */
/* =============================================================
 * 1. Button primitives (S1)
 * ============================================================= */
.fmn-btn-primary,
.fmn-btn-secondary,
.fmn-btn-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
  text-decoration: none;
}

.fmn-btn-primary {
  background: var(--color-accent, #FFD500);
  color: #171717;
  border: 1px solid var(--color-accent, #FFD500);
}

.fmn-btn-primary:hover {
  background: #fcc500;
  border-color: #fcc500;
}

.fmn-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fmn-btn-secondary {
  background: var(--surface-card, #fff);
  color: var(--text-primary, #171717);
  border: 1px solid var(--text-primary, #171717);
}

.fmn-btn-secondary:hover {
  background: var(--surface-subtle, #f8f8f7);
}

.fmn-btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fmn-btn-text {
  background: transparent;
  color: var(--text-secondary, #525252);
  border: 1px solid transparent;
  padding: 6px 10px;
}

.fmn-btn-text:hover {
  color: var(--text-primary, #171717);
  background: var(--surface-subtle, #f8f8f7);
}

/* Danger variant for destructive actions */
.fmn-btn-danger {
  background: var(--surface-card, #fff);
  color: #dc2626;
  border: 1px solid #dc2626;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.fmn-btn-danger:hover {
  background: #fef2f2;
}

/* Compact variant — smaller padding for use inside cards */
.fmn-btn-primary.fmn-btn-sm,
.fmn-btn-secondary.fmn-btn-sm,
.fmn-btn-text.fmn-btn-sm,
.fmn-btn-danger.fmn-btn-sm {
  padding: 5px 11px;
  font-size: 12px;
}

/* =============================================================
 * 2. Field label primitives (S2)
 * ============================================================= */
.fmn-label {
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary, #525252);
  margin-bottom: 6px;
}

@keyframes fmn-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* =============================================================
 * 5. Composer field-order fixes (L1/L2)
 *
 * TO field moves to top (was at bottom). Compact contact-card style.
 * ============================================================= */
/* =============================================================
 * 6. Pre-send checklist clickable flags (L5)
 * ============================================================= */
.ps-check-item[data-clickable="true"] {
  cursor: pointer;
  transition: background 120ms;
}

.ps-check-item[data-clickable="true"]:hover {
  background: rgba(245, 158, 11, 0.08);
}

.ps-check-item[data-flag="warning"] .ps-check-flag-icon {
  color: #f59e0b;
}

.ps-check-item[data-flag="error"] .ps-check-flag-icon {
  color: #dc2626;
}

.ps-check-item-jump-hint {
  font-size: 10px;
  color: var(--text-tertiary, #a3a3a3);
  font-family: var(--font-mono, ui-monospace, monospace);
  margin-left: auto;
}

/* =============================================================
 * 7. Page header redesign (D1)
 * ============================================================= */
.dash-header-redesign {
  padding: var(--space-6, 24px) 0;
  border-bottom: 1px solid var(--border-subtle, #f0f0f0);
  margin-bottom: var(--space-6, 24px);
}

/* =============================================================
 * 8. Dashboard stat config + tiles (D2/D3)
 * ============================================================= */
.dash-stats-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: var(--space-4, 16px);
}

.dash-stats-row-label {
  flex: 1;
}

.dash-stats-config-btn {
  background: transparent;
  border: 1px solid var(--border-default, #e5e5e5);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary, #525252);
}

.dash-stats-config-btn:hover {
  background: var(--surface-subtle, #f8f8f7);
}

.dash-stat-tile {
  cursor: pointer;
  transition: transform 120ms, box-shadow 120ms;
  position: relative;
}

.dash-stat-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.dash-stat-tile::after {
  content: '→';
  position: absolute;
  top: 8px;
  right: 10px;
  opacity: 0;
  transition: opacity 120ms;
  color: var(--text-tertiary, #a3a3a3);
  font-size: 14px;
}

.dash-stat-tile:hover::after {
  opacity: 1;
}

.dash-config-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle, #f0f0f0);
}

.dash-config-stat-row label {
  flex: 1;
  cursor: pointer;
  font-size: 13px;
}

/* =============================================================
 * 9. Watched carousel cards (D4)
 * ============================================================= */
.dash-watched-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.dash-watched-carousel::-webkit-scrollbar {
  height: 8px;
}

.dash-watched-carousel::-webkit-scrollbar-thumb {
  background: var(--border-default, #e5e5e5);
  border-radius: 4px;
}

/* =============================================================
 * 10. Summary lists sizing (D5)
 * ============================================================= */
.dash-summary-container {
  max-width: 480px;
  width: 100%;
}

.dash-summary-container .summary-table {
  font-size: 13px;
}

/* === end migrated from styles-additions-v33.css === */


/* === migrated from styles-additions-v32.css === */
/* styles-additions-v32.css — MB12: Identity prominence + Q1 popover + Q3 refine
 *
 * Loaded AFTER v31.css. Cache buster v=235.
 *
 * Sections:
 *   1. Identity pills (M1/M2) — recipient name + role + account badges
 *   2. Composer header redesign (M1)
 *   3. Contact panels identity (M2a)
 *   4. Activity list identity (M2b)
 *   5. Account header identity (M2c)
 *   6. Q1 contact card quick actions popover
 *   7. Q2 smart intake suggestion chips + tooltips
 *   8. Q3 type-your-own + Refine button
 */
/* =============================================================
 * 1. Identity pills — reusable token classes
 * ============================================================= */
/* Primary name pill — black bg, yellow text. Use for recipient names. */
.id-pill-name {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: #171717;
  color: var(--color-accent, #FFD500);
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-family: inherit;
}

/* Role badge — outlined, neutral. Use for titles/positions. */
.id-pill-role {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--surface-card, #fff);
  color: var(--text-primary, #171717);
  border: 1.5px solid #171717;
  border-radius: 999px;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Account/company chip — subtle yellow tint */
.id-pill-account {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: rgba(255, 213, 0, 0.18);
  color: #171717;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
}

/* Stack of pills with consistent gap */
.id-pill-stack {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* Status modifier — recent / dormant / new */
.id-pill-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.id-pill-status[data-status="new"] {
  background: rgba(255, 213, 0, 0.25);
  color: #171717;
}

.id-pill-status[data-status="recent"] {
  background: rgba(22, 163, 74, 0.18);
  color: #16a34a;
}

.id-pill-status[data-status="dormant"] {
  background: var(--surface-subtle, #f8f8f7);
  color: var(--text-tertiary, #a3a3a3);
}

/* MB12 M2a: contact-link rendered as a name pill */
.tcpr-contact-link {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: #171717;
  color: var(--color-accent, #FFD500);
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.tcpr-contact-link:hover {
  background: #2a2a2a;
}

.tcpr-contact-role {
  font-size: 12px;
  color: var(--text-secondary, #525252);
  margin-left: 8px;
}

/* =============================================================
 * 5. Account header identity (M2c)
 * ============================================================= */
.account-header-name-pill {
  /* v0.34.1 - simple + correct: size to content, center the text, wrap
     naturally. NO line-clamp (it was truncating 'Scaffold' to 'Scaff...'),
     NO narrow max-width. A company name must never be cut off.
     flex centering works because we are NOT using -webkit-box anymore. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 18px;
  background: var(--color-accent, #FFD500);
  color: #171717;
  /* rounded-rect rather than a full 999px pill, which looks like a blob once
     a name wraps to two lines. */
  border-radius: 20px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  /* allow a roomy two lines for longer names; balance the wrap so it never
     stacks one word per line. No truncation. */
  max-width: 22ch;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: none;
}

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

/* === migrated from styles-additions-v31.css === */
/* Save & Next button styling (replaces Open in Outlook in batch mode) */
.ec-modal[data-batch-mode="true"] #ec-submit-btn .ec-btn-label-default {
  display: none;
}

.ec-modal[data-batch-mode="true"] #ec-submit-btn .ec-btn-label-batch {
  display: inline;
}

.ec-modal:not([data-batch-mode="true"]) #ec-submit-btn .ec-btn-label-default {
  display: inline;
}

.ec-modal:not([data-batch-mode="true"]) #ec-submit-btn .ec-btn-label-batch {
  display: none;
}

/* === migrated from styles-additions-v25.css === */
@keyframes diag-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.diag-section { display: flex; flex-direction: column; gap: var(--space-2, 8px); }

.diag-section-title {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary, #a3a3a3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.diag-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.diag-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-default, #e5e5e5);
  vertical-align: top;
}

.diag-table td:first-child {
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text-secondary, #525252);
  width: 1%;
  white-space: nowrap;
}

.diag-clear-errors-btn {
  background: transparent;
  border: 1px solid var(--border-default, #e5e5e5);
  border-radius: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  padding: 2px 8px;
  cursor: pointer;
  color: var(--text-secondary, #525252);
}

.diag-clear-errors-btn:hover { background: var(--surface-subtle, #f8f8f7); }

.diag-test-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

.diag-test-btn {
  padding: 8px 12px;
  background: var(--text-primary, #171717);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.diag-test-btn:hover { background: #333; }

.diag-test-results {
  max-height: 160px;
  overflow-y: auto;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  background: var(--surface-subtle, #f8f8f7);
  border-radius: 4px;
  padding: var(--space-2, 8px);
  border: 1px solid var(--border-default, #e5e5e5);
  min-height: 40px;
}

.diag-test-results:empty::before {
  content: 'No tests run yet.';
  color: var(--text-tertiary, #a3a3a3);
  font-style: italic;
}

.diag-test-pass { color: var(--color-pass, #16a34a); padding: 2px 0; }

.diag-test-fail { color: var(--color-critical, #dc2626); padding: 2px 0; }

.diag-danger {
  background: rgba(220, 38, 38, 0.04);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 6px;
  padding: var(--space-3, 12px);
}

.diag-danger-btn {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: var(--color-critical, #dc2626);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  margin-top: var(--space-2, 8px);
}

.diag-danger-btn:hover { background: #b91c1c; }

.diag-danger-hint {
  margin-top: var(--space-2, 8px);
  font-size: 11px;
  color: var(--text-secondary, #525252);
  line-height: 1.4;
}

/* Diagnostics trigger affordance on the version stamp */
#app-version-stamp {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* === end migrated from styles-additions-v25.css === */


/* === migrated from styles-additions-v24.css === */
@media (min-width: 1100px) {
  .dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--space-5, 24px);
    align-items: flex-start;
  }
  .dashboard-col-left {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
  }
  .dashboard-col-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
    position: sticky;
    top: var(--space-3, 12px);
  }
}

/* Below 1100px: single column with deliberate ordering */
@media (max-width: 1099px) {
  .dashboard-col-left,
  .dashboard-col-right {
    width: 100%;
  }
  /* Force order: AT A GLANCE → Watched → SUMMARY */
  .dashboard-ag-mount  { order: 1; }
  .dashboard-watched-mount { order: 2; }
  .dashboard-summary-mount { order: 3; }
}

/* =============================================================
 * 2. AT A GLANCE density
 * ============================================================= */
.ag-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3, 12px);
}

.ag-stat {
  padding: var(--space-3, 12px);
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-default, #e5e5e5);
  border-radius: 6px;
}

.ag-stat-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary, #a3a3a3);
  margin-bottom: 4px;
}

.ag-stat-value {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary, #171717);
  line-height: 1.1;
}

.ag-stat-context {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-tertiary, #a3a3a3);
}

/* Tighten at <800px: 2x2 grid */
@media (max-width: 799px) {
  .ag-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2, 8px);
  }
  .ag-stat { padding: var(--space-2, 8px) var(--space-3, 12px); }
  .ag-stat-value { font-size: 18px; }
}

/* =============================================================
 * 4. SUMMARY table density
 * ============================================================= */
.summary-table-dense th,
.summary-table-dense td {
  padding: var(--space-2, 8px) var(--space-3, 12px);
}

/* Hide low-signal columns at narrow widths */
@media (max-width: 899px) {
  .summary-table-dense .col-ltv { display: none; }
}

@media (max-width: 699px) {
  .summary-table-dense .col-streams { display: none; }
}

/* === migrated from styles-additions-v23.css === */
/* =============================================================
 * 2. Header nav tabs — wrap at narrow viewports
 * =============================================================
 *
 * #app-mode-nav is the top-level nav (Dashboard / Email Outreach toggle in
 * the May-6 baseline; expanded by MB5/MB6 to include Companies / Contacts /
 * Activities). At narrow viewports the row overflows horizontally and
 * tabs get cut off the right side without an obvious affordance to reach
 * them.
 *
 * Fix: enable flex-wrap below 900px. Tabs wrap to a second (or third) row.
 * Discoverable, no hidden content. Adds at most ~40px of vertical when wrapping.
 */
@media (max-width: 899px) {
  #app-mode-nav {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}

/* At very narrow viewports (phones), the nav can sit closer to the edge */
@media (max-width: 600px) {
  #app-mode-nav {
    /* Override the v13.css inline-style top:16px left:32px by reducing
     * the inset. We can't override inline styles via class, but the
     * left: 32px isn't critical — we use padding on the body instead. */
    gap: 4px;
  }
  .app-mode-btn {
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* === migrated from styles-additions-v22.css === */
/* The main body textarea gets the bulk of vertical space */
#ec-body {
  min-height: 220px;
}

@media (min-width: 1100px) {
  #ec-body {
    /* On wide viewports, give the body textarea proportionally more height */
    min-height: 320px;
  }
}

/* Notes textarea is compact — 2 rows is fine for the prompt-hint use case */
#ec-notes-textarea,
.ec-notes-textarea {
  min-height: 56px;
  font-size: 13px;
}

/* =============================================================
 * 5. Buttons (touch targets enforced)
 * ============================================================= */
.ec-btn-primary,
.ec-btn-secondary,
.ec-btn-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.ec-btn-primary:active,
.ec-btn-secondary:active,
.ec-btn-tertiary:active {
  transform: translateY(1px);
}

.ec-btn-primary {
  background: var(--color-accent, #FFD500);
  border: 1px solid var(--color-accent, #FFD500);
  color: #000;
}

.ec-btn-primary:hover {
  background: #f0c700;
  border-color: #f0c700;
}

.ec-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ec-btn-secondary {
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-default, #e5e5e5);
  color: var(--text-primary, #171717);
}

.ec-btn-secondary:hover {
  background: var(--surface-subtle, #f8f8f7);
  border-color: var(--border-strong, #d4d4d4);
}

.ec-btn-tertiary {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary, #525252);
}

.ec-btn-tertiary:hover {
  background: var(--surface-subtle, #f8f8f7);
  color: var(--text-primary, #171717);
}

/* iOS rounded-rectangle button default — strip it */
.ec-btn-primary,
.ec-btn-secondary,
.ec-btn-tertiary,
.ec-chip {
  -webkit-appearance: none;
  appearance: none;
}

/* === migrated from styles-additions-v21.css === */
.hsa-empty {
  padding: var(--space-3);
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
  font-style: italic;
}

.hsa-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 12px;
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--color-accent, #FFD500);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 120ms ease, transform 80ms ease;
}

.hsa-row:hover {
  border-color: var(--text-tertiary);
  border-left-color: var(--color-accent, #FFD500);
  transform: translateY(-1px);
}

.hsa-row.hsa-row-hot {
  border-left-color: #ef4444; /* red — buying signal within 48h */
}

.hsa-row.hsa-row-warm {
  border-left-color: #f59e0b; /* amber — recent signal */
}

.hsa-row.hsa-row-fresh {
  border-left-color: var(--color-accent, #FFD500);
}

.hsa-score {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 32px;
  text-align: right;
}

.hsa-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hsa-signal-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--text-tertiary);
  padding: 2px 6px;
  background: var(--surface-subtle, rgba(0,0,0,0.04));
  border-radius: 4px;
}

.hsa-signal-tag.hsa-tag-buying { color: #ef4444; background: rgba(239,68,68,0.08); }

.hsa-signal-tag.hsa-tag-reply  { color: #3b82f6; background: rgba(59,130,246,0.08); }

.hsa-signal-tag.hsa-tag-quote  { color: #10b981; background: rgba(16,185,129,0.08); }

.hsa-cta {
  font-size: 11px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-primary);
}

.hsa-cta:hover {
  background: var(--color-accent, #FFD500);
  border-color: var(--color-accent, #FFD500);
}

/* ============================================================
 * "Respond within 48h" hot-signal callout (dashboard top)
 * ============================================================ */
.hot-signal-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 14px 16px;
  margin-bottom: var(--space-3);
  background: linear-gradient(135deg, rgba(239,68,68,0.06), rgba(239,68,68,0.02));
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 8px;
}

.hot-signal-callout[hidden] { display: none; }

.hot-signal-icon {
  font-size: 20px;
  line-height: 1;
}

.hot-signal-body {
  flex: 1;
  min-width: 0;
}

.hot-signal-body h4 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: #991b1b;
}

.hot-signal-action {
  font-size: 11px;
  padding: 3px 8px;
  margin-left: 6px;
  background: var(--color-accent, #FFD500);
  border: 1px solid var(--color-accent, #FFD500);
  border-radius: 4px;
  cursor: pointer;
  color: #000;
  font-weight: 500;
}

/* === migrated from styles-additions-v20.css === */
#ec-send-time-display {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ============================================================
 * Mod 15 — Tone heatmap overlay (composer-segments extension)
 * ============================================================
 * When the heatmap toggle is on, segments are colored by tone_category
 * lift band instead of by segment type. Maps Sopro lift % to a 5-band
 * gradient: green (high lift), light-green (medium), yellow (small),
 * light-red (small drag), red (heavy drag).
 */
.cs-controls .cs-heatmap-toggle-label {
  margin-left: var(--space-2);
  font-size: 12px;
  color: var(--text-secondary);
}

.cs-body.cs-heatmap-on .cs-segment {
  /* Disable type-based color when heatmap mode is active */
  background-color: transparent;
}

.cs-body.cs-heatmap-on .cs-segment[data-tone-band="high-lift"]   { background-color: rgba(34, 197, 94, 0.22); }

.cs-body.cs-heatmap-on .cs-segment[data-tone-band="medium-lift"] { background-color: rgba(132, 204, 22, 0.20); }

.cs-body.cs-heatmap-on .cs-segment[data-tone-band="small-lift"]  { background-color: rgba(234, 179, 8, 0.20); }

.cs-body.cs-heatmap-on .cs-segment[data-tone-band="small-drag"]  { background-color: rgba(251, 146, 60, 0.22); }

.cs-body.cs-heatmap-on .cs-segment[data-tone-band="heavy-drag"]  { background-color: rgba(239, 68, 68, 0.22); }

/* === migrated from styles-additions-v19.css === */
/* ============================================================
   2. COMPACT-TEXTAREA WRAPPER (compact-textarea.js)
   ============================================================ */
.ct-wrap {
  position: relative;
  width: 100%;
}

.ct-textarea {
  width: 100%;
  transition: min-height var(--motion-medium, 250ms) var(--easing-out),
              padding-right var(--motion-fast) var(--easing-out);
  resize: vertical;
}

.ct-state-compact .ct-textarea {
  min-height: 60px;
  resize: none;
}

.ct-state-expanded .ct-textarea {
  min-height: 180px;
  padding-right: 32px;  /* leave room for shrink toggle */
}

.ct-toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity var(--motion-fast) var(--easing-out),
              background var(--motion-fast) var(--easing-out);
}

.ct-wrap:hover .ct-toggle,
.ct-state-expanded .ct-toggle,
.ct-textarea:focus + .ct-toggle {
  opacity: 1;
}

.ct-toggle:hover {
  background: var(--bg-elev-2);
  color: var(--text-primary);
}

.ct-toggle-icon {
  font-size: 14px;
  line-height: 1;
  transform: rotate(45deg);
}

.ct-state-compact .ct-toggle-icon { transform: rotate(45deg); }

.ct-state-expanded .ct-toggle-icon { transform: rotate(-135deg); }

/* ============================================================
   3. RADAR CHART (radar-chart.js)
   ============================================================ */
.rc-svg {
  display: block;
  margin: 0 auto;
}

.rc-rings { pointer-events: none; }

.rc-axes { pointer-events: none; }

.rc-labels { pointer-events: none; }

.rp-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background var(--motion-fast) var(--easing-out);
}

.rp-header:hover { background: var(--bg-elev-2); }

.rp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.rp-summary {
  flex: 1;
  font-weight: 500;
}

.rp-toggle {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.rp-body {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.rp-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: default;
}

.rp-check:hover { background: var(--bg-elev-2); }

.rp-check-icon {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 600;
  flex-shrink: 0;
  width: 16px;
}

.rp-pass .rp-check-icon { color: #16a34a; }

.rp-fail .rp-check-icon { color: #dc2626; }

.rp-check-text { flex: 1; min-width: 0; }

.rp-check-name {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: 500;
}

.rp-check-why {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
}

/* ============================================================
   5. COMPOSER SEGMENTS — lever annotations (composer-segments.js)
   ============================================================ */
.cs-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.cs-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5, 6px);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  cursor: pointer;
}

.cs-legend {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.cs-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
}

.cs-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.cs-body {
  background: var(--bg-elev-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.cs-segment {
  border-radius: 3px;
  padding: 1px 2px;
  margin: 0 -2px;
  transition: filter var(--motion-fast) var(--easing-out),
              box-shadow var(--motion-fast) var(--easing-out);
  cursor: help;
}

.cs-legend-yellow .cs-legend-swatch { background: rgba(234, 179, 8, 0.55);  }

.cs-legend-green  .cs-legend-swatch { background: rgba(22, 163, 74, 0.55);  }

.cs-legend-blue   .cs-legend-swatch { background: rgba(59, 130, 246, 0.55); }

.cs-legend-orange .cs-legend-swatch { background: rgba(249, 115, 22, 0.60); }

.cs-legend-gray   .cs-legend-swatch { background: rgba(120, 120, 120, 0.50);}

.cs-segment:hover {
  filter: brightness(0.95);
}

/* When a rubric check pulses a segment */
@keyframes cs-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
  50% { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.55); }
}

.cs-pulse {
  animation: cs-pulse 1.2s ease-in-out 2;
}

.sc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elev-2);
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sc-bulk-actions {
  display: flex;
  gap: var(--space-2);
}

.sc-accept-all,
.sc-reject-all,
.sc-accept,
.sc-reject {
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--motion-fast) var(--easing-out),
              border-color var(--motion-fast) var(--easing-out);
}

.sc-accept-all,
.sc-accept {
  border-color: #16a34a;
  color: #16a34a;
}

.sc-accept-all:hover,
.sc-accept:hover {
  background: rgba(22, 163, 74, 0.08);
}

.sc-reject-all,
.sc-reject {
  color: var(--text-secondary);
}

.sc-reject-all:hover,
.sc-reject:hover {
  background: var(--bg-elev-2);
  color: var(--text-primary);
}

.sc-change {
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: opacity var(--motion-medium) var(--easing-out);
}

.sc-change:last-child { border-bottom: 0; }

.sc-change-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sc-type-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  padding: 2px 6px;
  border-radius: 3px;
}

.sc-change-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.sc-change-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.sc-from { color: var(--text-secondary); }

.sc-strike { text-decoration: line-through; }

.sc-arrow { color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--text-xs); }

.sc-to { color: var(--text-primary); }

.sc-insert { color: #15803d; }

.sc-delete { color: #b91c1c; }

.sc-why {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: var(--bg-elev-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--border-default);
}

.sc-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.sc-processed { opacity: 0.55; }

.sc-status {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--text-tertiary);
  text-align: right;
}

.sc-processed-accepted .sc-status { color: #15803d; }

.sc-processed-rejected .sc-status { color: var(--text-tertiary); }

.sc-empty {
  padding: var(--space-4);
  text-align: center;
}

.sc-empty-msg {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* === end migrated from styles-additions-v19.css === */


/* === migrated from styles-additions-v18.css === */
/* ============================================================
   styles-additions-v18.css — MB3 (Sprint 6, post-MB2.1)

   Adds:
   - Sortable column header treatment (.tbl-th-sortable)
   - Page-header breathing room above the title (B6)
   - +New dropdown polish (U1) — softer corners, lighter shadow,
     tighter rhythm so it feels of-a-piece with the rest of the
     dashboard

   Per CLAUDE.md convention, every style layer ADDS, never edits
   prior layers. v17 (MB2.1) and earlier remain untouched.
   ============================================================ */
/* ============================================================
   1. SORTABLE COLUMN HEADERS (B2)

   .tbl-th-sortable    — on every column whose header is clickable
   .is-active-sort     — added when this column matches the current
                          sort state (per-page / per-entity)

   The active column gets a subtle dot indicator. Hover state on
   sortable headers is light to avoid feeling busy in dense tables.
   ============================================================ */
.tbl-th-sortable {
  cursor: pointer;
  user-select: none;
  transition: background var(--motion-fast) var(--easing-out),
              color var(--motion-fast) var(--easing-out);
}

.tbl-th-sortable:hover {
  background: var(--bg-elev-2);
  color: var(--text-primary);
}

.tbl-th-sortable:focus-visible {
  outline: 2px solid var(--accent, var(--text-primary));
  outline-offset: -2px;
}

.tbl-th.is-active-sort {
  color: var(--text-primary);
  font-weight: 500;
}

.tbl-th.is-active-sort::after {
  content: " \2022";   /* small bullet • */
  color: var(--accent, var(--text-primary));
  margin-left: var(--space-1);
  opacity: 0.85;
}

/* ============================================================
   3. +NEW DROPDOWN POLISH (U1)

   v16 had a tight radius, prominent shadow, and slightly oversize
   menu items that read "blocky" against the rest of the UI. Soften:
     - rounder corners
     - lighter, smaller shadow
     - text-base → text-sm
     - tighter line-height on items
     - menu animates open instead of hard-cut
     - subtle border that picks up the elev-2 instead of default
   ============================================================ */
.gc-trigger {
  /* v16 default of radius-sm + 8px padding was fine; tighten the
     caret spacing slightly for visual balance. */
  border-radius: var(--radius-md);
}

.gc-menu {
  /* Softer corners + lighter shadow + a touch of border subtlety */
  border-radius: var(--radius-md);
  border-color: var(--border-subtle);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08),
              0 1px 2px rgba(0, 0, 0, 0.04);
  /* Origin animation: scale up from top-right corner of the trigger */
  transform-origin: top right;
  transform: scale(0.96) translateY(-2px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--motion-fast) var(--easing-out),
              opacity var(--motion-fast) var(--easing-out);
  /* Override v16's display:none so the transition can run.
     Keep visibility:hidden so it's still fully inert when closed. */
  display: block;
  visibility: hidden;
}

.gc-menu.is-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.gc-menu-item {
  /* Tighter rhythm — feels less like a touch-target on a phone */
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  line-height: 1.35;
  /* Slight color shift on hover instead of just bg */
  transition: background var(--motion-fast) var(--easing-out),
              color var(--motion-fast) var(--easing-out);
}

.gc-menu-item:hover {
  background: var(--bg-elev-2);
  color: var(--text-primary);
}

.gc-menu-item:focus-visible {
  outline: 2px solid var(--accent, var(--text-primary));
  outline-offset: -2px;
}

.gc-menu-icon {
  font-size: var(--text-sm);  /* was text-16 */
  width: 20px;                 /* was 24px — feels less columnar */
  text-align: center;
  opacity: 0.85;
}

.gc-menu-divider {
  /* Lighter and thinner so it doesn't act as a visual barrier */
  background: var(--border-subtle);
  margin: var(--space-1_5, 6px) var(--space-2);
  opacity: 0.6;
}

/* === end migrated from styles-additions-v18.css === */


/* === migrated from styles-additions-v17.css === */
/* ============================================================
   4. EMAIL OUTREACH PAGE HEADER COMPOSE BUTTON

   Header button at the top of #email-outreach-root, parallel to the
   "+ New" buttons on standalone pages.
   ============================================================ */
.eos-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.eos-header-compose {
  margin-left: auto;
}

.tm-back-btn  { margin-right: auto; }

/* === migrated from styles-additions-v16.css === */
/* By default, hide the standalone page roots; app-mode classes show them */
#companies-root,
#contacts-root,
#activities-root,
#products-root,
#quotes-root {
  display: none;
}
#pings-root { display: none; }

/* ============================================================
   3. SEARCH + FILTER BAR

   Reusable across the three standalone pages and the email outreach
   section. Compose with .pill .pill-stream-* for filter chips.
   ============================================================ */
.std-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.std-search {
  flex: 1;
  min-width: 200px;
  max-width: 400px;
}

.std-search input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
  transition: border-color var(--motion-fast) var(--easing-out);
}

.std-search input:focus {
  outline: none;
  border-color: var(--border-focus);
}

.std-filters {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
  flex-wrap: wrap;
}

.std-filter-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--text-tertiary);
  margin-right: var(--space-1);
}

/* Filter chip = pill, but with toggleable active state */
.std-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2_5);
  border-radius: var(--radius-pill);
  background: var(--bg-elev-2);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--motion-fast) var(--easing-out),
              color var(--motion-fast) var(--easing-out),
              border-color var(--motion-fast) var(--easing-out);
}

.std-filter-chip:hover {
  background: rgba(28, 28, 26, 0.08);
  color: var(--text-primary);
}

.std-filter-chip.is-active {
  background: var(--text-primary);
  color: var(--bg-page);
  border-color: var(--text-primary);
}

.std-sort-select {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
}

/* Result count under the page header */
.std-result-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}

/* ============================================================
   5. GLOBAL COMPOSE DROPDOWN

   The "+ New" button on the masthead that replaced the three
   individual buttons. Renders a dropdown with Email / Touch / Quote
   options. Preserves legacy IDs for app.js compatibility.
   ============================================================ */
.gc-wrap {
  position: relative;
  display: inline-block;
}

.gc-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--text-primary);
  color: var(--bg-page);
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: opacity var(--motion-fast) var(--easing-out);
}

.gc-trigger:hover { opacity: 0.85; }

.gc-trigger-caret {
  font-size: var(--text-xs);
  margin-left: var(--space-1);
  opacity: 0.7;
}

.gc-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  min-width: 200px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 50;
  overflow: hidden;
  display: none;
}

.gc-menu.is-open { display: block; }

.gc-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2_5) var(--space-3);
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--motion-fast) var(--easing-out);
}

.gc-menu-item:hover { background: var(--bg-elev-2); }

.gc-menu-icon {
  font-size: var(--text-16);
  width: 24px;
  text-align: center;
}

.gc-menu-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-1) 0;
}

/* ============================================================
   6. APP-MODE NAV — 5 tabs instead of 2

   Pre-MB1, app-mode-nav had 2 buttons (Dashboard / Email Outreach).
   With 5 buttons, it needs more horizontal space. The existing
   inline style in index.html uses `position: absolute; top: 16px;
   left: 32px` — keep that but allow the nav to flow horizontally.
   ============================================================ */
#app-mode-nav {
  /* MB18 H1: static centered single-row bar at ALL widths (was absolute +
     wrap + max-width, which jumbled in iPad portrait at 834px). */
  position: static;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 14px 16px 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#app-mode-nav::-webkit-scrollbar { display: none; }

@media (max-width: 720px) {
  #app-mode-nav {
    position: static !important;
    display: flex;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-elev-1);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
}

/* === end migrated from styles-additions-v16.css === */


/* === migrated from styles-additions-v15.css === */
/* ============================================================
   styles-additions-v11.css — App v0.4.3
   Adds:
     1. 3-option segmented control for the touch-modal "When" picker
     2. Hint banner under the When picker (used in backdate mode)
     3. Clickable contact-name button in panel touch rows
     4. "+✉" missing-email flag chip
     5. Contact edit modal (.cem-*) — mirrors .aem-* modal
   ============================================================ */
/* ---------- 1. 3-option segmented control ---------- */
/* The default .tm-segmented assumes 2 options on one line. Three options
   wrap awkwardly on narrow screens. Allow wrap and shrink padding slightly. */
.tm-segmented.tm-segmented-3 {
  flex-wrap: wrap;
  gap: 2px;
}

.tm-segmented.tm-segmented-3 .tm-seg-opt span {
  padding: 6px 11px;
  font-size: 12.5px;
}

@media (max-width: 480px) {
  .tm-segmented.tm-segmented-3 {
    display: flex;
    width: 100%;
  }
  .tm-segmented.tm-segmented-3 .tm-seg-opt {
    flex: 1;
    text-align: center;
  }
  .tm-segmented.tm-segmented-3 .tm-seg-opt span {
    display: block;
    padding: 6px 4px;
    font-size: 12px;
  }
}

/* ---------- 2. When-hint banner (used in backdate mode) ---------- */
.tm-when-hint {
  margin-top: 8px;
  padding: 8px 11px;
  background: #f7f5f1;
  border-left: 3px solid #b8a983;
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  color: #6b6960;
  line-height: 1.4;
}

/* ---------- 3. Clickable contact name in panel touch rows ---------- */
.tcpr-contact-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.18);
  text-decoration-thickness: 0.5px;
  text-underline-offset: 2px;
  transition: text-decoration-color 0.12s, color 0.12s;
}

.tcpr-contact-link:hover {
  text-decoration-color: currentColor;
  color: #1a1a1a;
}

.tcpr-contact-link:focus-visible {
  outline: 2px solid #b8a983;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- 4. Missing-email flag on contact name ---------- */
.tcpr-contact-flag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  background: #fff5e0;
  border: 0.5px solid #d4b264;
  border-radius: 3px;
  font-size: 10px;
  color: #8a6a17;
  font-weight: 500;
  letter-spacing: 0.2px;
  vertical-align: 1px;
  cursor: pointer;
  white-space: nowrap;
}

.tcpr-contact-link:hover .tcpr-contact-flag {
  background: #ffeec2;
  border-color: #b8902c;
}

@media (prefers-color-scheme: dark) {
  /* Match existing app behavior: app uses light theme, no dark variants needed yet */
}

/* === migrated from styles-additions-v14.css === */
/* ----- Stale badges ----- */
.staleness-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--ds-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  white-space: nowrap;
}

.staleness-badge-late {
  background: rgba(214, 158, 46, 0.18);
  color: #8a5d10;
}

.staleness-badge-critical {
  background: rgba(221, 107, 32, 0.20);
  color: #7c2d12;
}

.staleness-badge-blocked {
  background: rgba(155, 28, 28, 0.20);
  color: #7f1d1d;
  /* subtle pulse to draw attention to truly stuck items */
  animation: staleness-pulse 2s ease-in-out infinite;
}

@keyframes staleness-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

.staleness-days {
  font-size: 11px;
  color: var(--ds-text-muted, #6a6a6a);
  margin-left: 6px;
}

/* ----- Win probability stale-impact note ----- */
.win-prob-stale-note {
  display: inline-block;
  font-size: 10px;
  color: #9b1c1c;
  margin-left: 4px;
  font-style: italic;
}

/* === end migrated from styles-additions-v14.css === */


/* === migrated from styles-additions-v13.css === */
#email-outreach-root {
  /* top padding clears the absolute-positioned #app-mode-nav */
  padding: 64px 32px 48px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ----- Top-nav mode toggle ----- */
#app-mode-nav {
  display: flex;
  gap: 6px;
  align-items: center;
}

.app-mode-btn {
  /* MB18 N1: VAO pill nav — larger, rounded, centered (positioning on the
     #app-mode-nav inline style). Black-active state stays (consistent with
     the BatchActionBar selected-pill pattern). */
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--ds-text-muted, #555);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.app-mode-btn:hover {
  border-color: rgba(0,0,0,0.25);
  color: var(--ds-text, #2a2a2a);
}

.app-mode-btn-active {
  background: var(--ds-text, #1a1a1a);
  color: #fff;
  border-color: var(--ds-text, #1a1a1a);
}

.app-mode-btn-active:hover {
  background: var(--ds-text, #1a1a1a);
  color: #fff;
}

/* ----- Email Outreach header ----- */
.eo-header {
  margin-bottom: 24px;
}

.eo-header-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.eo-back {
  background: transparent;
  border: none;
  font-size: 13px;
  color: var(--ds-text-muted, #777);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: inherit;
}

.eo-back:hover {
  color: var(--ds-text, #2a2a2a);
  background: rgba(0,0,0,0.04);
}

.eo-title {
  font-size: 24px;
  font-weight: 600;
  font-family: var(--ds-font-serif, ui-serif, Georgia, serif);
  color: var(--ds-text, #1a1a1a);
}

.eo-spacer {
  flex: 1;
}

/* ----- Sub-tabs ----- */
.eo-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.10);
}

.eo-tab {
  padding: 10px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-text-muted, #777);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.eo-tab:hover {
  color: var(--ds-text, #2a2a2a);
}

.eo-tab-active {
  color: var(--ds-text, #1a1a1a);
  border-bottom-color: var(--ds-text, #1a1a1a);
  font-weight: 600;
}

.eo-tab-count {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(0,0,0,0.08);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--ds-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.eo-tab-active .eo-tab-count {
  background: var(--ds-text, #1a1a1a);
  color: #fff;
}

/* ----- Body / list area ----- */
.eo-body {
  min-height: 200px;
}

.eo-help {
  font-size: 12px;
  color: var(--ds-text-muted, #888);
  padding: 0 4px 12px;
  letter-spacing: 0.02em;
}

/* The Outbox cards reuse .ob-card from styles-additions-v12.css.
   Inside the EO section we may want them to feel slightly different but
   for utility-grade Phase A we keep them visually identical. */
/* ----- Empty state ----- */
.eo-empty {
  padding: 56px 24px;
  text-align: center;
  border: 1px dashed rgba(0,0,0,0.15);
  border-radius: 12px;
  background: rgba(255,255,255,0.4);
}

.eo-empty-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ds-text, #2a2a2a);
}

.eo-empty-sub {
  font-size: 13px;
  color: var(--ds-text-muted, #777);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto;
}

.eo-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 5px;
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  font-family: var(--ds-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  margin: 0 2px;
}

/* === migrated from styles-additions-v12.css === */
/* styles-additions-v12.css
   ============================================================
   Phase A: Outbox view + email card styles.
   Utility-grade, intentionally undecorated. Phase C (v13) layers
   the pastel palette, mini-radar, and polish on top of these
   class hooks.
   ============================================================ */
/* ----- Outbox container ----- */
.ob-wrap {
  padding: 16px 0 24px 0;
}

.ob-help {
  font-size: 12px;
  color: var(--ds-text-muted, #888);
  padding: 0 12px 12px;
  letter-spacing: 0.02em;
}

/* ----- Empty state ----- */
.ob-empty {
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed rgba(0,0,0,0.15);
  border-radius: 12px;
  margin: 16px 12px;
  background: rgba(255,255,255,0.4);
}

.ob-empty-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ds-text, #2a2a2a);
}

.ob-empty-sub {
  font-size: 13px;
  color: var(--ds-text-muted, #777);
  line-height: 1.5;
}

.ob-empty-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  font-family: var(--ds-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  margin: 0 2px;
}

/* ----- Drag handle ----- */
.ob-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  font-size: 18px;
  color: rgba(0,0,0,0.25);
  cursor: grab;
  flex-shrink: 0;
  transition: color 0.15s;
}

.ob-drag-handle:active {
  cursor: grabbing;
}

/* ----- Status pills (utility colors; pastels in v13) ----- */
.ob-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  font-family: var(--ds-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.ob-status-draft {
  background: rgba(120,120,120,0.15);
  color: #555;
}

.ob-status-queued {
  background: rgba(200,140,40,0.18);
  color: #8a5d10;
}

.ob-status-failed {
  background: rgba(200,40,40,0.18);
  color: #a02525;
}

.ob-status-default {
  background: rgba(0,0,0,0.06);
  color: #555;
}

/* === migrated from styles-additions-v11.css === */
.ec-btn-ai {
  background: linear-gradient(135deg, #1F2D44, #2D5FAB);
  color: #FFF;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  transition: opacity 0.15s ease;
}

.ec-btn-ai:hover { opacity: 0.92; }

.ec-btn-ai:disabled { opacity: 0.6; cursor: wait; }

.ec-btn-ai-icon { font-size: 14px; }

.ec-btn-primary,
.ec-btn-secondary,
.ec-btn-tertiary {
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.ec-btn-primary {
  background: #1F2D44;
  color: #FFF;
  border-color: #1F2D44;
}

.ec-btn-primary:hover { background: #2D3F5C; }

.ec-btn-primary:disabled { opacity: 0.6; cursor: wait; }

.ec-btn-secondary {
  background: #FFF;
  color: #1F2D44;
  border-color: rgba(31,45,68,0.25);
}

.ec-btn-secondary:hover { background: rgba(31,45,68,0.05); }

.ec-btn-tertiary {
  background: transparent;
  color: #5F5E5A;
  border-color: transparent;
}

.ec-btn-tertiary:hover { background: rgba(0,0,0,0.05); color: #2C2C2A; }

/* === migrated from components.css === */
/* ============================================================
   components.css — Round 1 (consolidated component styles)

   This file replaces the ten styles-additions-v*.css files. It loads
   AFTER tokens.css and base.css.

   Round 1 promise: visual parity with current production. The contents
   below are the v-files concatenated in their original load order, with
   only two transformations:
     1. Each v-file's header comment removed; a section banner inserted
        in its place so you can still locate which sprint added what.
     2. The 3D coverflow carousel CSS (.c3d-*) removed — Round 1 retires
        the coverflow in favor of a horizontal-scroll watched row.
        The new .watched-row-* rules at the bottom of this file replace it.

   What did NOT happen in Round 1: rule deduplication, token migration,
   selector cleanup. Those are Round 2 — best done with the new card
   designs in hand. Doing them blind in Round 1 risks regressions.

   To find a rule: ctrl+F by selector. To find what sprint added it:
   look for the nearest section banner above the rule.
   ============================================================ */
/* ============================================================
   SECTION — Stream tag chips & status-driven cards (Step 1)
   Originally: styles-additions.css
   ============================================================ */
/* ---------- Stream chips (inline, used in cards & elsewhere) ---------- */
.stream-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  font-family: inherit;
  line-height: 1.4;
}

.stream-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stream-chip-empty {
  background: transparent;
  border: 0.5px dashed rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.45);
  font-style: italic;
}

/* ---------- Stream tags editor (in account panel) ---------- */
.stream-tags-editor {
  margin: 16px 0;
}

.ste-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;
  margin-bottom: 8px;
}

.ste-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ste-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px;
  border: 0.5px solid rgba(0, 0, 0, 0.15);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ste-chip:hover {
  background: rgba(0, 0, 0, 0.04);
}

.ste-chip.is-active {
  font-weight: 500;
  border-width: 1px;
}

.ste-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ste-hint {
  font-size: 11px;
  opacity: 0.55;
  margin-top: 8px;
  font-style: italic;
}

/* ============================================================
   SECTION — At-a-glance, watched, win prob, panel status (Step 1.5)
   Originally: styles-additions-v2.css
   ============================================================ */
/* ---------- Section labels (homepage) ---------- */
.h-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.7;
  margin: 24px 0 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.h-section-label-count {
  opacity: 0.5;
  font-weight: 400;
}

/* ---------- At-a-glance stats row ---------- */
.ag-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.ag-lbl {
  font-size: 11px;
  opacity: 0.7;
  margin-bottom: 4px;
}

.ag-val {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
}

.ag-trend {
  font-size: 11px;
  opacity: 0.6;
  margin-top: 3px;
}

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

/* ---------- Panel status block (top of opened panel) ---------- */
.psb {
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.psb-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  position: relative;
  z-index: 2;
}

.psb-flag {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

.psb-prompt {
  font-size: 16px;
  font-weight: 500;
  flex: 1;
}

.psb-pill {
  font-size: 10px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.psb-detail {
  font-size: 13px;
  margin-bottom: 12px;
  opacity: 0.85;
  position: relative;
  z-index: 2;
}

.psb-prob {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 64px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -2px;
  -webkit-text-stroke: 1.5px currentColor;
  color: transparent;
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.psb-prob-pct { font-size: 38px; }

.psb-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  position: relative;
  z-index: 2;
}

.psb-btn {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 500;
  font-family: inherit;
  transition: opacity 0.15s ease;
}

.psb-btn:hover { opacity: 0.85; }

/* ============================================================
   SECTION — View tabs, list toggles, activities, quotes, dormant (Step 2)
   Originally: styles-additions-v3.css
   ============================================================ */
/* ---------- View tabs ---------- */
.ds-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 999px;
  width: fit-content;
  margin: 0 0 18px;
  align-items: center;
}

.ds-tab {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.6);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.ds-tab:hover { color: rgba(0, 0, 0, 0.85); }

.ds-tab.is-active {
  background: rgba(255, 255, 255, 0.95);
  color: rgba(0, 0, 0, 0.92);
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.ds-tab-count {
  font-size: 11px;
  opacity: 0.55;
  font-weight: 400;
}

.ds-config-btn {
  margin-left: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.55);
  transition: background 0.15s ease, color 0.15s ease;
  padding: 0;
}

.ds-config-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.85);
}

.ds-config-header {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.7;
  margin-bottom: 12px;
}

.ds-config-section { margin-bottom: 12px; }

.ds-config-section-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  margin-bottom: 6px;
}

.ds-config-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 0;
  cursor: pointer;
}

.ds-config-row input[type="checkbox"] {
  margin-top: 3px;
  cursor: pointer;
}

.ds-config-row-text { flex: 1; }

.ds-config-row-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.ds-config-row-desc {
  font-size: 11px;
  opacity: 0.65;
  line-height: 1.4;
  margin-top: 1px;
}

.ds-config-hint {
  font-size: 11px;
  opacity: 0.55;
  margin-top: 8px;
  font-style: italic;
}

.ds-empty {
  font-size: 12px;
  opacity: 0.55;
  font-style: italic;
  padding: 24px;
  text-align: center;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
}

/* ---------- Dark mode safety ---------- */
@media (prefers-color-scheme: dark) {
  .ds-tabs { background: rgba(255, 255, 255, 0.06); }
  .ds-tab { color: rgba(255, 255, 255, 0.6); }
  .ds-tab:hover { color: rgba(255, 255, 255, 0.85); }
  .ds-tab.is-active {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.95);
  }
  .ds-config-btn:hover { background: rgba(255, 255, 255, 0.08); }
  .ds-config-panel {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .da-threshold-select { border-color: rgba(255, 255, 255, 0.2); }
  .al-more:hover { background: rgba(255, 255, 255, 0.05); }
}

.rr-icon-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 2px;
}

.rr-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.rr-star {
  width: 14px;
  height: 14px;
  opacity: 0.7;
  cursor: pointer;
  transition: transform 0.1s ease;
  flex-shrink: 0;
}

.rr-star:hover { transform: scale(1.15); }

.rr-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.rr-line1 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.rr-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

.rr-name-sub {
  font-size: 12px;
  opacity: 0.7;
  font-weight: 400;
}

.rr-action {
  font-size: 13px;
  opacity: 0.85;
  flex: 1;
  min-width: 0;
}

.rr-due {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.rr-streams {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.rr-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  font-weight: 400;
}

.rr-chip-empty {
  background: transparent;
  border: 0.5px dashed currentColor;
  font-style: italic;
  opacity: 0.6;
}

.rr-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---------- Context strip ---------- */
.rr-context {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding-top: 8px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.rr-context-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rr-context-lbl {
  font-size: 9.5px;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rr-context-val {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.rr-context-sub {
  font-size: 10px;
  opacity: 0.65;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Sparkline ---------- */
.rr-spark {
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
  height: 12px;
}

.rr-spark-bar {
  width: 3px;
  background: currentColor;
  opacity: 0.55;
  border-radius: 1px;
  min-height: 1px;
}

/* ---------- Win prob bubble overlay (right side, semi-transparent) ---------- */
.rr-winprob {
  position: absolute;
  right: 14px;
  bottom: 8px;
  font-size: 38px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -1.5px;
  -webkit-text-stroke: 1.2px currentColor;
  color: transparent;
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
  font-family: inherit;
}

/* ---------- Responsive: collapse context strip on narrow screens ---------- */
@media (max-width: 540px) {
  .rr-context {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .rr-context-cell:nth-child(4),
  .rr-context-cell:nth-child(5) {
    display: none;
  }
  .rr-winprob {
    font-size: 28px;
  }
}

/* ---------- Dark mode safety ---------- */
@media (prefers-color-scheme: dark) {
  .rr-context { border-top-color: rgba(255, 255, 255, 0.1); }
  .rr-chip { background: rgba(255, 255, 255, 0.08); }
}

/* ============================================================
   SECTION — Touch modal, touch list, version pill (Sprint 2)
   Originally: styles-additions-v5.css
   ============================================================ */
/* ===== Version pill in masthead ===== */
.mast-version {
  margin-top: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: #888780;
  letter-spacing: 0.5px;
  cursor: help;
  user-select: none;
}

/* ===== "Log a touch" masthead button ===== */
.btn-secondary {
  display: inline-block;
  margin-top: 8px;
  margin-right: 6px;
  padding: 8px 14px;
  background: #fff;
  color: #1a1a1a;
  border: 1px solid #d8d6d0;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.btn-secondary:hover {
  background: #f7f5f1;
  border-color: #1a1a1a;
}

.tm-row {
  margin-bottom: 14px;
}

.tm-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 480px) {
  .tm-row-grid { grid-template-columns: 1fr; }
}

.tm-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #888780;
}

.tm-label-hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: #b3b0a6;
  margin-left: 6px;
}

.tm-segmented {
  display: inline-flex;
  background: #f3f0e9;
  border-radius: 6px;
  padding: 3px;
}

.tm-seg-opt {
  cursor: pointer;
}

.tm-seg-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tm-seg-opt span {
  display: inline-block;
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 4px;
  color: #6b6960;
  transition: background 0.12s, color 0.12s;
}

.tm-seg-opt input:checked + span {
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.tm-date-input,
.tm-text-input {
  display: block;
  margin-top: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d8d6d0;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  background: #fff;
}

.tm-error {
  background: #FAECE7;
  color: #993C1D;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 12px;
}

.tm-btn-cancel,
.tm-btn-submit {
  padding: 9px 18px;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
}

.tm-btn-cancel {
  background: #fff;
  color: #1a1a1a;
  border-color: #d8d6d0;
}

.tm-btn-cancel:hover { background: #f7f5f1; }

.tm-btn-submit {
  background: #1a1a1a;
  color: #fff;
}

.tm-btn-submit:hover { background: #2a2a2a; }

.tm-btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ptr-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ebe7df;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #6b6960;
}

.ptr-meta {
  flex: 1;
  min-width: 0;
}

.ptr-line-1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6b6960;
  margin-bottom: 2px;
}

.ptr-channel {
  font-weight: 500;
  color: #1a1a1a;
}

.ptr-direction {
  color: #b3b0a6;
}

.ptr-date {
  color: #888780;
}

.ptr-line-2 {
  font-size: 13px;
  color: #1a1a1a;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ptr-line-full {
  display: none;
  font-size: 13px;
  color: #1a1a1a;
  line-height: 1.5;
  white-space: pre-wrap;
  margin-top: 4px;
}

.ptr-empty {
  color: #b3b0a6;
}

.ptr-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.ptr-badge-planned {
  background: #E6F1FB;
  color: #1F5D9D;
}

.ptr-badge-missed {
  background: #FAECE7;
  color: #993C1D;
}

.ptr-badge-cancelled {
  background: #f3f0e9;
  color: #888780;
}

.tcpr-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ebe7df;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #6b6960;
}

.tcpr-meta {
  flex: 1;
  min-width: 0;
}

.tcpr-line-1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6b6960;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.tcpr-channel {
  font-weight: 600;
  color: #1a1a1a;
}

.tcpr-direction { color: #b3b0a6; }

.tcpr-date { color: #888780; }

.tcpr-contact { color: #1F5D9D; font-size: 11px; }

.tcpr-line-2 {
  font-size: 13px;
  color: #1a1a1a;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tcpr-empty { color: #b3b0a6; }

.tcpr-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.tcpr-badge-planned { background: #E6F1FB; color: #1F5D9D; }

.tcpr-badge-missed { background: #FAECE7; color: #993C1D; }

.tcpr-badge-cancelled { background: #f3f0e9; color: #888780; }

/* ===== Smart context strip in TouchModal ===== */
.tm-context-strip {
  background: #fdfaf3;
  border: 1px solid #f0e8d3;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 13px;
}

.tm-context-strip-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #888780;
  margin-bottom: 4px;
}

.tm-context-strip-text {
  color: #1a1a1a;
  line-height: 1.4;
}

.tm-context-strip-text strong {
  font-weight: 600;
}

/* ============================================================
   SECTION — Touch detail modal, dashboard activity stream (Sprint 2.3)
   Originally: styles-additions-v7.css
   ============================================================ */
/* ===== Dashboard Activity Stream ===== */
.dash-activity {
  background: transparent;
}

.dash-activity-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #ebe7df;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.dash-activity-tab {
  background: transparent;
  border: 0;
  padding: 8px 14px 10px;
  font: inherit;
  font-size: 13px;
  color: #888780;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
  margin-bottom: -1px;
}

.dash-activity-tab:hover { color: #1a1a1a; }

.dash-activity-tab-active {
  color: #1a1a1a;
  border-bottom-color: #1a1a1a;
  font-weight: 500;
}

.dash-activity-tab-count {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  color: #b3b0a6;
  font-weight: 400;
}

.dash-activity-tab-active .dash-activity-tab-count { color: #888780; }

.dash-activity-empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: #b3b0a6;
  background: #f7f5f1;
  border-radius: 6px;
}

.dash-activity-row {
  display: flex;
  gap: 12px;
  padding: 12px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid #f3f0e9;
}

.dash-activity-row:hover { background: #f7f5f1; }

.dash-activity-row:last-child { border-bottom: 0; }

.dar-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ebe7df;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #6b6960;
}

.dar-meta { flex: 1; min-width: 0; }

.dar-line-1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6b6960;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.dar-account {
  color: #1a1a1a;
  font-weight: 600;
  font-size: 13px;
}

.dar-channel {
  font-weight: 500;
  color: #1a1a1a;
}

.dar-direction { color: #b3b0a6; }

.dar-date { color: #888780; }

.dar-contact { color: #1F5D9D; font-size: 11px; }

.dar-body {
  font-size: 13px;
  color: #1a1a1a;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dar-empty { color: #b3b0a6; }

.dash-activity-loadmore {
  margin-top: 12px;
  width: 100%;
  background: transparent;
  border: 1px solid #d8d6d0;
  border-radius: 6px;
  padding: 8px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  color: #1a1a1a;
}

.dash-activity-loadmore:hover {
  background: #f7f5f1;
  border-color: #1a1a1a;
}

.dash-activity-more-note {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: #b3b0a6;
  font-style: italic;
}

/* ===== Touch row enhancements (chain indicator + arrow) ===== */
.tcpr-chain {
  display: inline-block;
  font-size: 11px;
  color: #C49B3A;
  margin-right: 2px;
  cursor: help;
}

.tcpr-arrow {
  flex: 0 0 16px;
  color: #d8d6d0;
  font-size: 18px;
  align-self: center;
  font-weight: 300;
  transition: color 0.12s, transform 0.12s;
}

/* ===== Smart context strip — make it look clickable ===== */
.tm-context-strip {
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.tm-context-strip:hover {
  background: #faf3e3;
  border-color: #C49B3A;
}

.tm-context-strip-cta {
  font-weight: 500;
  color: #C49B3A;
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
}

/* ============================================================
   SECTION — Quotes — badges, dashboard quotes, quote modal, detail modal (Sprint 3)
   Originally: styles-additions-v8.css
   ============================================================ */
/* ---------- Status & Source badges (used everywhere) ---------- */
.qtsb {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.qsrcb {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
}

/* ---------- Dashboard quotes section ---------- */
.dash-quotes {
  background: var(--paper, #faf8f3);
  border: 1px solid #e6e1d5;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

.dash-quotes-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e6e1d5;
  padding-bottom: 8px;
  flex-wrap: wrap;
}

.dash-quotes-tab {
  background: transparent;
  border: 1px solid #e6e1d5;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  color: #6b6960;
  transition: all 0.15s;
  font-family: inherit;
}

.dash-quotes-tab:hover { background: #f3f0e9; }

.dash-quotes-tab-active {
  background: #1F5D9D;
  border-color: #1F5D9D;
  color: white;
}

.dash-quotes-tab-count {
  display: inline-block;
  padding: 0 5px;
  border-radius: 8px;
  background: rgba(0,0,0,0.08);
  font-size: 0.72rem;
  margin-left: 4px;
}

.dash-quotes-tab-active .dash-quotes-tab-count { background: rgba(255,255,255,0.25); }

.dash-quotes-empty {
  padding: 24px;
  color: #888780;
  font-size: 0.9rem;
  text-align: center;
}

.dash-quotes-row {
  display: flex;
  gap: 12px;
  padding: 10px;
  border-radius: 6px;
  background: white;
  border: 1px solid #ece7db;
  cursor: pointer;
  transition: all 0.12s;
  align-items: center;
}

.dash-quotes-row:hover {
  background: #f7f4ec;
  border-color: #d8d2c4;
  transform: translateX(2px);
}

.dqr-left { flex: 1; min-width: 0; }

.dqr-line-1 {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.dqr-serial {
  background: #f3f0e9;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.78rem;
  color: #5b5950;
}

.dqr-tag {
  background: #E6F1FB;
  color: #1F5D9D;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.dqr-line-2 {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 0.92rem;
  margin-bottom: 2px;
}

.dqr-account { color: #2a2a2a; }

.dqr-title {
  color: #6b6960;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dqr-line-3 {
  font-size: 0.78rem;
  color: #888780;
}

.dqr-right {
  text-align: right;
  flex-shrink: 0;
}

.dqr-amount {
  font-size: 1.1rem;
  font-weight: 600;
  font-family: 'IBM Plex Mono', monospace;
  color: #1D9E75;
}

.dqr-win-prob {
  font-size: 0.78rem;
  color: #888780;
  margin-top: 2px;
}

.dash-quotes-more {
  padding: 8px;
  text-align: center;
  font-size: 0.78rem;
  color: #888780;
}

.tcpqr-left { flex: 1; min-width: 0; }

.tcpqr-line-1 {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.tcpqr-serial {
  background: #f3f0e9;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.76rem;
  color: #5b5950;
}

.tcpqr-tag {
  background: #E6F1FB;
  color: #1F5D9D;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.74rem;
  font-weight: 600;
}

.tcpqr-title {
  font-size: 0.92rem;
  color: #2a2a2a;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tcpqr-meta {
  font-size: 0.76rem;
  color: #888780;
}

.tcpqr-right {
  text-align: right;
  flex-shrink: 0;
}

.tcpqr-amount {
  font-size: 1rem;
  font-weight: 600;
  font-family: 'IBM Plex Mono', monospace;
  color: #1D9E75;
}

.tcpqr-win {
  font-size: 0.74rem;
  color: #888780;
  margin-top: 2px;
}

/* ---------- Touch row: $ indicator for linked quotes ---------- */
.tcpr-quote-link {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #1D9E75;
  color: white;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  line-height: 16px;
  margin-right: 4px;
  cursor: help;
}

/* ---------- Touch row quick-outcome shortcut button ---------- */
.tcpr-quick-outcome {
  background: #1F5D9D;
  color: white;
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  margin: auto 4px;
  transition: all 0.12s;
}

.tcpr-quick-outcome:hover { background: #18815f; transform: scale(1.1); }

.tcpr-intent-dot.tcpr-intent-buying_signal     { background: #1D9E75; box-shadow: 0 0 0 2px #E1F5EE; }

.tcpr-intent-dot.tcpr-intent-objection         { background: #993C1D; box-shadow: 0 0 0 2px #FAECE7; }

.tcpr-intent-dot.tcpr-intent-stalling          { background: #996024; box-shadow: 0 0 0 2px #FAEEDA; }

.tcpr-intent-dot.tcpr-intent-info_gathering    { background: #1F5D9D; box-shadow: 0 0 0 2px #E6F1FB; }

.tcpr-intent-dot.tcpr-intent-relationship_building { background: #6b5b9d; box-shadow: 0 0 0 2px #ece7f5; }

.tcpr-intent-dot.tcpr-intent-decline           { background: #993C1D; box-shadow: 0 0 0 2px #FAECE7; }

.tcpr-intent-dot.tcpr-intent-unknown           { background: #888780; }

/* ============================================================
 * MB16 P6 — Standardized label classes (additive, MB14 S3 pattern).
 * Coexist with legacy .ec-label / .cem-label / .aem-label / etc.,
 * and with v33's .fmn-label / .fmn-label-inline / .fmn-label-required.
 * Three new variants: primary (form field), section (group header),
 * micro (uppercase eyebrow).
 * ============================================================ */
.fmn-label-primary {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary, #525252);
  margin-bottom: 4px;
}

.fmn-label-micro {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-tertiary, #A3A3A3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
 * MB17 D1 — Dashboard masthead (replaces MB13 D1's
 * .dash-header-redesign band; index.html now emits .fmn-masthead).
 * ============================================================ */
.fmn-masthead {
  background: #FFFFFF;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.fmn-masthead-brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.fmn-masthead-name {
  font-family: "Iowan Old Style", "Georgia", "Charter", "Times New Roman", serif;
  font-size: 26px;
  font-weight: 500;
  color: #1A1A1A;
  line-height: 1;
}

.fmn-masthead-eyebrow {
  padding: 2px 8px;
  background: #171717;
  color: #FFD500;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  border-radius: 4px;
  text-transform: uppercase;
}

.fmn-masthead-sub {
  font-size: 12px;
  color: #525252;
  margin-top: 4px;
}

.fmn-masthead-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fmn-masthead-callout {
  padding: 4px 10px 4px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.fmn-masthead-callout i { font-size: 13px; }

.fmn-masthead-callout-hot {
  background: #FAEEDA;
  color: #633806;
}

.fmn-masthead-callout-hot i { color: #BA7517; }

.fmn-masthead-callout-overdue {
  background: #FCEBEB;
  color: #791F1F;
}

/* ============================================================
 * MB17 D2 — At-a-glance tile redesign. Additive on top of MB14's
 * .ag-stat/.ag-card/.dash-stat-tile so the MB14 STAT_CATALOG +
 * gear-drawer + clickable formon:nav routing all keep working.
 * Sparkline data is currently stubbed (see STAT_VISUALS in
 * at-a-glance.js) — real historical snapshots land in a later sprint.
 * ============================================================ */
.fmn-stat-tile {
  font-family: inherit;
  background: #FFFFFF;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  padding: 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms, background 120ms;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 96px;
}

.fmn-stat-tile:hover {
  border-color: rgba(0, 0, 0, 0.15);
  background: #FAFAF9;
}

.fmn-stat-lbl {
  font-size: 10px;
  font-weight: 500;
  color: #A3A3A3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fmn-stat-val {
  font-size: 22px;
  font-weight: 500;
  color: #1A1A1A;
  line-height: 1;
  margin-top: 2px;
}

.fmn-stat-spark {
  margin-top: 6px;
  min-height: 16px;
  line-height: 0;
}

.fmn-stat-trend {
  font-size: 10px;
  margin-top: auto;
  padding-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 500;
}

.fmn-stat-trend i { font-size: 11px; }

/* ============================================================
 * MB18 N2 — Dashboard summary list fits its rail (no page scroll).
 * The summary table is content-sized by default; force fixed layout
 * so it never exceeds .dash-summary-container (480px) and pushes the
 * page into horizontal scroll.
 * ============================================================ */
.dash-summary-container .summary-table-dense {
  table-layout: fixed;
  width: 100%;
}

.dash-summary-container .summary-table-dense th,
.dash-summary-container .summary-table-dense td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
}

.dash-summary-container {
  overflow-x: hidden;
}

/* =============================================================
   MB20 c1: Button + form-control primitives
   Spec: DESIGN.md §6 (Buttons), §7 (Form Inputs), §14 (Focus States)
   Brand: --color-accent (yellow #FFD500) with BLACK text on primary.

   Placed at end of components.css for cascade win over earlier
   rules in this file. Note: later-loading styles-additions-v*.css
   files may still override (see styles-additions-v22.css .ec-btn-*
   block) — additive sweep produces elements like
   `class="ec-btn-primary fmn-btn-primary"` where both rules paint
   yellow+black (no visual conflict in current state). C5 retires
   the legacy .ec-btn-* layer entirely.
   ============================================================= */
/* ----- Buttons ----- */
.fmn-btn-primary,
.fmn-btn-revenue,
.fmn-btn-secondary,
.fmn-btn-tertiary,
.fmn-btn-destructive {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  padding: 8px 16px;
  /* MB20 c3a: 44px touch target (Apple HIG / WCAG AA). Padding unchanged — the
     button gets taller without text getting more cramped. */
  min-height: 44px;
  font-family: var(--font-sans, -apple-system, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  border-radius: var(--radius-md, 8px);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--duration-fast, 120ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--duration-fast, 120ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--duration-fast, 120ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
  user-select: none;
  text-decoration: none;
}

.fmn-btn-primary:disabled,
.fmn-btn-revenue:disabled,
.fmn-btn-secondary:disabled,
.fmn-btn-tertiary:disabled,
.fmn-btn-destructive:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — filled yellow with BLACK text. The "hero" action. One per view. */
.fmn-btn-primary {
  background-color: var(--color-accent, #FFD500);
  color: var(--color-accent-text, #000000);
  border-color: var(--color-accent, #FFD500);
}

.fmn-btn-primary:hover:not(:disabled) {
  background-color: var(--color-accent-hover, #FFDF33);
  border-color: var(--color-accent-hover, #FFDF33);
}

.fmn-btn-primary:active:not(:disabled) {
  background-color: var(--color-accent-pressed, #E6BC00);
  border-color: var(--color-accent-pressed, #E6BC00);
}

/* Revenue — filled green. Positive/revenue actions (New Quote, Convert to quote). */
.fmn-btn-revenue {
  background-color: var(--color-revenue, #16A34A);
  color: var(--color-revenue-text, #FFFFFF);
  border-color: var(--color-revenue, #16A34A);
}

.fmn-btn-revenue:hover:not(:disabled) {
  background-color: var(--color-revenue-hover, #22C55E);
  border-color: var(--color-revenue-hover, #22C55E);
}

/* Secondary — dark outline. Cancel, alternate, back, edit. */
.fmn-btn-secondary {
  background-color: transparent;
  color: var(--ink, #171717);
  border-color: var(--ink, #171717);
}

.fmn-btn-secondary:hover:not(:disabled) {
  background-color: var(--ink, #171717);
  color: #FFFFFF;
}

/* Tertiary — transparent / link-like. Low-emphasis inline actions. */
.fmn-btn-tertiary {
  background-color: transparent;
  color: var(--ink-muted, #525252);
  border-color: transparent;
  padding-left: 8px;
  padding-right: 8px;
}

.fmn-btn-tertiary:hover:not(:disabled) {
  color: var(--ink, #171717);
  background-color: var(--canvas-inset, #F5F5F5);
}

/* Destructive — filled red. Delete, Remove, irreversible. */
.fmn-btn-destructive {
  background-color: var(--color-danger, #DC2626);
  color: var(--color-danger-text, #FFFFFF);
  border-color: var(--color-danger, #DC2626);
}

.fmn-btn-destructive:hover:not(:disabled) {
  background-color: var(--color-danger-hover, #EF4444);
  border-color: var(--color-danger-hover, #EF4444);
}

/* Focus ring — applies to all variants. Use :focus-visible per DESIGN.md §14
   so the ring shows on keyboard nav, not on mouse clicks. */
.fmn-btn-primary:focus-visible,
.fmn-btn-revenue:focus-visible,
.fmn-btn-secondary:focus-visible,
.fmn-btn-tertiary:focus-visible,
.fmn-btn-destructive:focus-visible {
  outline: 2px solid var(--color-accent, #FFD500);
  outline-offset: 2px;
}

/* Compact size modifier — apply on top of any variant. */
.fmn-btn-compact {
  padding: 6px 12px;
  min-height: 28px;
  font-size: 13px;
}

/* ----- Form controls ----- */
.fmn-input,
.fmn-select,
textarea.fmn-input {
  display: block;
  width: 100%;
  padding: 8px 12px;
  min-height: 36px;
  font-family: var(--font-sans, -apple-system, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink, #171717);
  background-color: var(--canvas-inset, #F5F5F5);
  border: 1px solid var(--hairline, #EBEBEB);
  border-radius: var(--radius-md, 8px);
  transition:
    border-color var(--duration-fast, 120ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--duration-fast, 120ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.fmn-input::placeholder,
textarea.fmn-input::placeholder {
  color: var(--ink-subtle, #737373);
}

.fmn-input:focus,
.fmn-input:focus-visible,
.fmn-select:focus,
.fmn-select:focus-visible,
textarea.fmn-input:focus,
textarea.fmn-input:focus-visible {
  outline: none;
  border-color: var(--color-accent, #FFD500);
  box-shadow: 0 0 0 3px rgba(255, 213, 0, 0.25);
}

.fmn-input[aria-invalid="true"],
.fmn-select[aria-invalid="true"],
textarea.fmn-input[aria-invalid="true"] {
  border-color: var(--color-danger, #DC2626);
}

.fmn-input[aria-invalid="true"]:focus,
.fmn-select[aria-invalid="true"]:focus,
textarea.fmn-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.20);
}

.fmn-input:disabled,
.fmn-select:disabled,
textarea.fmn-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--canvas-inset, #F5F5F5);
}

/* Select — strip native chrome, add custom caret */
.fmn-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23171717'%3E%3Cpath d='M5 8l5 5 5-5H5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
  cursor: pointer;
}

/* textarea variant — taller, vertical resize only */
textarea.fmn-input {
  min-height: 88px;
  resize: vertical;
  line-height: 1.5;
}

/* ===== end MB20 c1 primitives ===== */
/* ================================================================
   MB20 c3a: Floating-UI foundation
   - .fmn-btn-icon — 44×44 icon-only nav button
   - .fmn-btn-row  — equal-width flex container for action button rows
   - .fmn-modal-overlay / .fmn-modal-content — standard modal layers
   - .fmn-modal-from-modal(-overlay) — modal-on-modal layers
   - .fmn-popover / .fmn-side-panel / .fmn-toast — other floating surfaces
   Each pulls its z-index from tokens.css. Layout/styling stays minimal —
   c3b/c3c rebuild full modal anatomy. c3a establishes the layer hierarchy
   and gives a hook point.
   ================================================================ */
/* Equal-width button row — prevents long-label wrapping from breaking row geometry */
.fmn-btn-row {
  display: flex;
  gap: var(--space-2, 8px);
  align-items: stretch;
  width: 100%;
}

.fmn-btn-row > .fmn-btn-primary,
.fmn-btn-row > .fmn-btn-revenue,
.fmn-btn-row > .fmn-btn-secondary,
.fmn-btn-row > .fmn-btn-tertiary,
.fmn-btn-row > .fmn-btn-destructive,
.fmn-btn-row > button {
  flex: 1 1 0;
  min-width: 0;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

/* MB21 c5: 44×44 icon-only nav button. Originally added in c3a but deleted
   in c1 (unused at the time). Re-added here because c5's modal nav refresh
   consumes it for every modal close (×) button and the email-card-detail
   < > X cluster (the "tiny buttons" Juston flagged). */
.fmn-btn-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  font-size: 18px;
  color: var(--color-text, #14120e);
  transition: background-color 0.15s ease;
}

.fmn-btn-icon:hover { background-color: rgba(0, 0, 0, 0.05); }
.fmn-btn-icon:active { background-color: rgba(0, 0, 0, 0.1); }

.fmn-btn-icon:focus-visible {
  outline: 2px solid var(--color-accent, #FFD500);
  outline-offset: 2px;
}

.fmn-btn-icon:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ================================================================
   MB21 c5: VAO-3 signal chips — manual signal capture on touch-detail
   (decision authority / champion / budget). Rendered as click-to-detail
   buttons that open DetailPopover on tap.
   ================================================================ */

.fmn-signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.fmn-signal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 14px;
  border: 1px solid;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.15s ease, filter 0.15s ease;
}

.fmn-signal-decision {
  color: var(--color-signal-decision, #4f46e5);
  border-color: var(--color-signal-decision, #4f46e5);
  background-color: rgba(79, 70, 229, 0.08);
}

.fmn-signal-champion {
  color: var(--color-signal-champion, #ec4899);
  border-color: var(--color-signal-champion, #ec4899);
  background-color: rgba(236, 72, 153, 0.08);
}

.fmn-signal-budget {
  color: var(--color-signal-budget, #16a34a);
  border-color: var(--color-signal-budget, #16a34a);
  background-color: rgba(22, 163, 74, 0.08);
}

.fmn-signal-add {
  color: var(--color-text-muted, #888);
  border-color: var(--color-divider, #ebe7df);
  border-style: dashed;
}

.fmn-signal-chip:hover { filter: brightness(1.05); }
.fmn-signal-chip:active { filter: brightness(0.95); }
/* ============================================================
   MB27-C — Pings: stream items, panel section, inbox page, nav badge
   ============================================================ */
/* Ping stream (shared: panels, quote modal, inbox page) */
.pst-empty { color: #999; font-size: 13px; padding: 8px 0; margin: 0; }
.pst-list { display: flex; flex-direction: column; gap: 8px; }
.pst-item {
  border: 1px solid #E5E5E5; border-radius: 8px; padding: 10px 12px;
  background: #fff;
}
.pst-item.pst-status-sent { border-left: 3px solid #FFD500; }
.pst-item.pst-status-acknowledged { border-left: 3px solid #6D28D9; }
.pst-item.pst-status-resolved { border-left: 3px solid #16A34A; opacity: 0.75; }
.pst-item.pst-status-dismissed { border-left: 3px solid #A3A3A3; opacity: 0.6; }
.pst-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; margin-bottom: 4px; }
.pst-who { font-weight: 700; color: #171717; }
.pst-subj {
  background: #F5F5F4; border-radius: 4px; padding: 1px 6px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.03em; color: #525252; cursor: pointer;
}
.pst-tag {
  background: #FEF9C3; border-radius: 4px; padding: 1px 6px; font-size: 11px; color: #713F12;
}
.pst-status { color: #737373; }
.pst-time { color: #A3A3A3; margin-left: auto; }
.pst-body { font-size: 14px; line-height: 1.5; color: #262626; white-space: pre-wrap; }
.pst-reply {
  margin-top: 6px; padding: 6px 10px; background: #FAFAF8; border-radius: 6px;
  font-size: 13px; color: #404040;
}
.pst-reply-label { font-weight: 700; color: #6D28D9; }
.pst-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pst-reply-box { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.pst-reply-text { width: 100%; box-sizing: border-box; resize: vertical; }

/* Panel ping section header */
.tcpanel-pings-header, .qdm-pings-section .qdm-section-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}

/* Pings inbox page */
.pings-page { padding: 8px 4px; }
.pings-page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.pings-back {
  background: none; border: 0; color: #525252; cursor: pointer; font-size: 14px; padding: 0;
}
.pings-title { margin: 0; font-size: 26px; }
.pings-filters { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }
.pings-stream-mount { max-width: 760px; }

/* Nav unread badge on the Pings tab */
.ping-nav-badge {
  display: inline-block; min-width: 18px; height: 18px; line-height: 18px;
  padding: 0 5px; margin-left: 6px; border-radius: 9px;
  background: #DC2626; color: #fff; font-size: 11px; font-weight: 700; text-align: center;
  vertical-align: middle;
}

/* =============================================================
 * MB33-A — Dashboard KPI ribbon + iPad fit (1194x834)
 * Conforms the existing At-a-glance strip into a compact, always-
 * visible ribbon that fits above the fold on iPad. Additive: wins
 * by cascade order over the earlier .ag-grid rules. No JS change.
 * ============================================================= */
.ag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
/* Compact tiles so 6-7 fit in one iPad-wide row without wrapping tall */
.ag-stat.fmn-stat-tile,
.fmn-stat-tile {
  padding: 10px 12px;
  border-radius: 12px;
}
.fmn-stat-tile .fmn-stat-lbl,
.ag-stat-label.fmn-stat-lbl {
  font-size: 9px;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fmn-stat-tile .fmn-stat-val,
.ag-stat-value.fmn-stat-val {
  font-size: 20px;
  line-height: 1.1;
}
.fmn-stat-tile .fmn-stat-trend,
.ag-stat-context.fmn-stat-trend { font-size: 10px; margin-top: 4px; }
.fmn-stat-tile .fmn-stat-spark { margin-top: 6px; }

/* The "AT A GLANCE" row label sits tight above the ribbon */
.dash-stats-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.dash-stats-row-label.fmn-label { font-size: 10px; letter-spacing: 0.06em; }

/* iPad landscape (1194) — keep the ribbon to a single dense row */
@media (min-width: 900px) and (max-width: 1280px) {
  .ag-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
  .fmn-stat-tile .fmn-stat-val { font-size: 19px; }
}

/* iPad portrait (834) — two dense rows rather than squeezing one */
@media (max-width: 860px) {
  .ag-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fmn-stat-tile { padding: 9px 11px; }
  .fmn-stat-tile .fmn-stat-val { font-size: 18px; }
}

/* Tighten dashboard shell vertical rhythm so more lands above the fold */
#dashboard-root .dash-stats-row { margin-top: 4px; }
.ds-list-block { margin-bottom: 14px; }
.ds-list-header { margin-bottom: 8px; }

/* =============================================================
 * MB33-C — Redesigned dashboard landing page (#dash-home)
 * iPad-first (1194x834), responsive to phone and desktop.
 * ============================================================= */
.dh-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:14px 0 12px; flex-wrap:wrap; }
.dh-brand { display:flex; align-items:center; gap:10px; }
.dh-brand-name { font-family:'Fraunces',Georgia,serif; font-size:26px; font-weight:600; letter-spacing:-0.01em; color:var(--text-primary,#1a1a1a); }
.dh-brand-eyebrow { font-family:var(--font-mono,monospace); font-size:10px; font-weight:700; letter-spacing:.08em; background:#1a1a1a; color:#FFD500; border-radius:5px; padding:2px 7px; }
.dh-brand-sub { font-size:13px; color:var(--text-tertiary,#6b6a63); margin-top:3px; }
.dh-header-right { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.dh-header-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.dh-synced { font-family:var(--font-mono,monospace); font-size:11px; color:#16A34A; background:#E7F4E8; border-radius:999px; padding:4px 10px; }
.dh-synced-time { font-family:var(--font-mono,monospace); font-size:11px; color:var(--text-tertiary,#6b6a63); }

/* KPI ribbon */
.dh-ribbon-label { font-family:var(--font-mono,monospace); font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-secondary,#54534F); margin:6px 0 8px; }
.dh-ribbon { display:grid; grid-template-columns:repeat(auto-fit,minmax(116px,1fr)); gap:10px; margin-bottom:18px; }
.dh-kpi { text-align:left; background:var(--surface-card,#fdfcf9); border:1px solid var(--border-default,#e0ddd3); border-radius:12px; padding:10px 12px; cursor:pointer; font-family:inherit; transition:border-color .12s, box-shadow .12s; display:flex; flex-direction:column; gap:3px; }
.dh-kpi:hover { border-color:#bdb9ac; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.dh-kpi.dir { background:#FFFDF2; border-color:#F2E6A8; }
.dh-kpi-lab { font-family:var(--font-mono,monospace); font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-secondary,#54534F); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dh-kpi-val { font-size:20px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--text-primary,#1a1a1a); }
.dh-kpi-val.rev, .dh-kpi.rev .dh-kpi-val { color:#16A34A; }
.dh-kpi-val small { font-size:12px; color:var(--text-tertiary,#6b6a63); font-weight:500; }
.dh-kpi-bar { height:4px; border-radius:3px; background:#EEEEEC; margin-top:5px; overflow:hidden; }
.dh-kpi-bar i { display:block; height:100%; border-radius:3px; background:#16A34A; }
.dh-kpi-bar i.near { background:#E67E22; } .dh-kpi-bar i.under { background:#C0392B; }

/* main grid */
.dh-grid { display:grid; grid-template-columns:1.55fr 1fr; gap:16px; align-items:start; }
.dh-col { display:flex; flex-direction:column; gap:16px; }
.dh-block { background:var(--surface-card,#fdfcf9); border:1px solid var(--border-default,#e0ddd3); border-radius:16px; padding:15px 17px; }
.dh-block h2 { font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:17px; margin:0; }
.dh-hh { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.dh-sub { font-size:12px; color:var(--text-tertiary,#6b6a63); }
.dh-flash { background:#FFFDF2; border-color:#F2E6A8; }
.dh-empty { font-size:13px; color:var(--text-tertiary,#6b6a63); padding:8px 0; }

/* avatars */
.dh-av { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; font-weight:600; font-size:11px; width:30px; height:30px; flex-shrink:0; }
.dh-av.sm { width:24px; height:24px; font-size:10px; }

/* action cards */
.dh-act { display:flex; gap:11px; align-items:flex-start; padding:11px 0; border-top:1px solid #EEEEEC; cursor:pointer; }
.dh-act:first-of-type { border-top:none; }
.dh-act:hover { background:rgba(0,0,0,.015); border-radius:8px; margin:0 -8px; padding-left:8px; padding-right:8px; }
.dh-act-rank { font-family:var(--font-mono,monospace); font-size:12px; font-weight:700; color:var(--text-tertiary,#6b6a63); width:16px; flex-shrink:0; padding-top:2px; }
.dh-act-body { flex:1; min-width:0; }
.dh-act-top { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.dh-ent { font-weight:700; font-size:1.04em; color:var(--text-primary,#1a1a1a); border-bottom:1px solid transparent; cursor:pointer; }
.dh-ent:hover { color:#0C447C; border-bottom-color:#0C447C; }
.dh-act-sub { font-size:12px; color:var(--text-tertiary,#6b6a63); margin-top:2px; }
.dh-act-why { font-size:13px; color:#3a3a37; margin-top:6px; }
.dh-act-cta { display:flex; align-items:center; gap:8px; margin-top:8px; }
.dh-act-next { flex:1; font-size:12px; color:var(--text-tertiary,#6b6a63); min-width:0; }
.dh-pills { margin-top:7px; }

/* chips */
.dh-chip { display:inline-block; font-size:10px; font-weight:700; border-radius:5px; padding:1px 7px; }
.dh-chip.t1 { background:#FFD500; color:#1a1a1a; }
.dh-chip.t2 { background:#E6F1FB; color:#0C447C; }
.dh-chip.t3 { background:#F1EFE8; color:#5F5E5A; }
.dh-chip.strat { background:#1a1a1a; color:#FFD500; }
.dh-chip.score-hot { background:#C0392B; color:#fff; } .dh-chip.score-warm { background:#E67E22; color:#fff; }
.dh-chip.score-cool { background:#2980B9; color:#fff; } .dh-chip.score-cold { background:#5D6D7E; color:#fff; }
.dh-chip.dark { background:#F1EFE8; color:#5F5E5A; } .dh-chip.dark.cold { background:#FBE9E7; color:#C0392B; }

/* rows (dark / recent) */
.dh-row { display:flex; align-items:center; gap:9px; padding:8px 0; border-top:1px solid #EEEEEC; font-size:13px; cursor:pointer; }
.dh-row:first-of-type { border-top:none; }
.dh-row:hover { background:rgba(0,0,0,.015); }
.dh-row-nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dh-row-days { font-family:var(--font-mono,monospace); font-size:12px; color:#C0392B; }
.dh-row-when { font-family:var(--font-mono,monospace); font-size:11px; color:var(--text-tertiary,#6b6a63); }

/* stage funnel */
.dh-stages { margin-top:4px; }
.dh-stage { display:flex; align-items:center; gap:9px; padding:5px 0; font-size:13px; }
.dh-stage .nm { width:90px; color:var(--text-tertiary,#6b6a63); }
.dh-stage .track { flex:1; height:16px; background:#EEEEEC; border-radius:4px; overflow:hidden; }
.dh-stage .track i { display:block; height:100%; background:#1a1a1a; border-radius:4px; }
.dh-stage .ct { width:28px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }

/* buttons */
.dh-btn { font-family:inherit; font-weight:700; border:none; border-radius:8px; cursor:pointer; }
.dh-btn.primary { background:#FFD500; color:#1a1a1a; }
.dh-btn.ghost { background:transparent; color:var(--text-secondary,#3a3a37); border:1px solid var(--border-default,#e0ddd3); }
.dh-btn.compact { font-size:12px; padding:5px 11px; }

/* responsive: iPad portrait + phone collapse to one column */
@media (max-width: 900px) {
  .dh-grid { grid-template-columns:1fr; }
  .dh-ribbon { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .dh-ribbon { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dh-brand-name { font-size:22px; }
}
/* desktop: cap width so it doesn't sprawl, center it */
@media (min-width: 1400px) {
  .dh-home, .dh-header { max-width:1320px; margin-left:auto; margin-right:auto; }
}

/* =============================================================
 * v0.32.42 — dashboard drill-down modal + version stamp
 * ============================================================= */
.dd-overlay { position:fixed; inset:0; z-index:1029; display:flex; align-items:flex-start; justify-content:center;
  background:rgba(20,18,12,.34); padding:8vh 16px 18vh; overflow-y:auto; }
.dd-modal { background:var(--surface-card,#fdfcf9); border:1px solid var(--border-default,#e0ddd3); border-radius:16px;
  width:100%; max-width:520px; box-shadow:0 24px 64px rgba(0,0,0,.22); overflow:hidden; }
.dd-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:15px 18px; border-bottom:1px solid var(--line,#EEEEEC); }
.dd-title { font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:18px; }
.dd-subtitle { font-size:12px; color:var(--text-tertiary,#6b6a63); margin-top:2px; }
.dd-close { width:34px; height:34px; border:none; background:transparent; cursor:pointer; font-size:20px; color:var(--text-tertiary,#6b6a63); border-radius:8px; flex-shrink:0; }
.dd-close:hover { background:rgba(0,0,0,.06); color:var(--text-primary,#1a1a1a); }
.dd-body { padding:6px 18px 16px; max-height:60vh; overflow-y:auto; }
.dd-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line,#EEEEEC); }
.dd-row:first-child { border-top:none; }
.dd-clickable { cursor:pointer; }
.dd-clickable:hover { background:rgba(0,0,0,.02); margin:0 -10px; padding-left:10px; padding-right:10px; border-radius:8px; }
.dd-row-main { display:flex; flex-direction:column; gap:1px; min-width:0; }
.dd-row-primary { font-weight:600; font-size:14px; color:var(--text-primary,#1a1a1a); }
.dd-row-secondary { font-size:12px; color:var(--text-tertiary,#6b6a63); text-transform:capitalize; }
.dd-row-meta { font-family:var(--font-mono,monospace); font-size:12px; color:var(--text-secondary,#3a3a37); flex-shrink:0; }
.dd-empty { font-size:13px; color:var(--text-tertiary,#6b6a63); padding:14px 0; text-align:center; }

/* version stamp in the new dashboard header */
.dh-header-right .mast-version { font-family:var(--font-mono,monospace); font-size:10px; color:var(--text-tertiary,#9b988f);
  cursor:default; letter-spacing:.02em; margin-top:0; padding-right:2px; }

/* =============================================================
 * v0.32.45 — Product builder page (.pb-*)
 * ============================================================= */
.pb-head{max-width:1194px;margin:8px auto 0;padding:0 24px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.pb-crumb{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-tertiary);text-transform:uppercase}
.pb-title{font-family:var(--font-serif);font-size:30px;font-weight:600;letter-spacing:-.01em;margin-top:2px}
.pb-sub{font-size:13px;color:var(--text-secondary);margin-top:4px}
.pb-head-r{display:flex;align-items:center;gap:12px;flex-shrink:0}
.pb-unit-toggle{display:flex;border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden}
.pb-unit{padding:8px 13px;border:none;background:transparent;font-family:var(--font-sans);font-size:13px;color:var(--text-secondary);cursor:pointer;border-right:1px solid var(--border-default)}
.pb-unit:last-child{border-right:none}
.pb-unit.on{background:var(--text-primary);color:#fff}

.pb-grid{max-width:1194px;margin:18px auto 80px;padding:0 24px;display:grid;grid-template-columns:380px 1fr;gap:20px;align-items:start}
@media (max-width:920px){.pb-grid{grid-template-columns:1fr}}

.pb-list-panel{background:var(--surface-card,#fff);border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden;position:sticky;top:12px}
.pb-list-head{padding:14px 16px 10px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-subtle)}
.pb-list-head h3{font-family:var(--font-serif);font-size:17px;font-weight:600}
.pb-count{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary)}
.pb-list-search{margin:10px 16px;display:flex;align-items:center;gap:8px;background:var(--color-paper-100,#F4F1E8);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:8px 11px;color:var(--text-tertiary);font-size:13px}
.pb-list-search input{border:none;background:transparent;outline:none;font-family:var(--font-sans);font-size:13px;flex:1;color:var(--text-primary)}
.pb-list-fams{display:flex;gap:6px;padding:0 16px 8px;flex-wrap:wrap}
.pb-fam-chip{font-family:var(--font-mono);font-size:11px;padding:5px 10px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:transparent;color:var(--text-secondary);cursor:pointer}
.pb-fam-chip.on{background:var(--text-primary);color:#fff;border-color:var(--text-primary)}
.pb-prod-list{max-height:600px;overflow-y:auto;padding:4px 10px 12px}
.pb-prow{display:flex;align-items:center;gap:11px;padding:11px;border-radius:var(--radius-md);cursor:pointer;border:1px solid transparent}
.pb-prow:hover{background:var(--color-paper-100,#F4F1E8)}
.pb-prow.sel{background:var(--color-paper-100,#F4F1E8);border-color:var(--border-strong)}
.pb-prow.retired{opacity:.5}
.pb-pthumb{width:40px;height:40px;border-radius:var(--radius-md);background:var(--color-paper-100,#F4F1E8);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font-mono);font-size:9px;color:var(--text-tertiary);text-align:center;line-height:1.1;padding:2px}
.pb-prow.sel .pb-pthumb{background:var(--surface-card,#fff)}
.pb-pinfo{flex:1;min-width:0}
.pb-pname{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-pmeta{font-family:var(--font-mono);font-size:10.5px;color:var(--text-tertiary);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-pdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.pb-pdot.stream-comp{background:var(--color-sky-400,#6BA3D8)}
.pb-pdot.stream-form{background:var(--color-sage-400,#5DAB7C)}
.pb-pdot.stream-scaff{background:var(--color-peach-400,#E5A65B)}
.pb-empty{padding:24px 12px;text-align:center;color:var(--text-tertiary);font-size:13px}

.pb-editor{background:var(--surface-card,#fff);border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden}
.pb-editor-empty{display:flex;align-items:center;justify-content:center;min-height:300px}
.pb-empty-state{color:var(--text-tertiary);font-size:14px}
.pb-ed-head{padding:16px 22px;border-bottom:1px solid var(--border-subtle);display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.pb-ed-head-l{display:flex;align-items:center;gap:14px}
.pb-ed-thumb{width:56px;height:56px;border-radius:var(--radius-md);background:var(--color-paper-100,#F4F1E8);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:10px;color:var(--text-tertiary);text-align:center;line-height:1.15;flex-shrink:0;padding:4px}
.pb-ed-name{font-family:var(--font-serif);font-size:21px;font-weight:600}
.pb-ed-sku{font-family:var(--font-mono);font-size:12px;color:var(--text-tertiary);margin-top:2px}
.pb-ed-toggle{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary);font-family:var(--font-mono);cursor:pointer}

.pb-ed-body{padding:8px 22px 20px}
.pb-sec{padding:16px 0;border-bottom:1px solid var(--border-subtle)}
.pb-sec:last-child{border-bottom:none}
.pb-sec-h{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.pb-ai{font-size:9.5px;background:var(--color-lilac-50,#F0EDFA);color:#6B5BB5;padding:2px 7px;border-radius:var(--radius-pill);letter-spacing:.02em;text-transform:none}
.pb-internal{font-size:9.5px;background:var(--status-hot-bg,#FBE9E7);color:var(--status-hot-fg,#76251A);padding:2px 7px;border-radius:var(--radius-pill);letter-spacing:.02em;text-transform:none}
.pb-frow{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.pb-frow.three{grid-template-columns:1fr 1fr 1fr}
@media (max-width:560px){.pb-frow,.pb-frow.three{grid-template-columns:1fr}}
.pb-fld label{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:5px}
.pb-fld input,.pb-fld textarea{width:100%;border:1px solid var(--border-default);border-radius:var(--radius-md);padding:9px 11px;font-family:var(--font-sans);font-size:14px;background:var(--bg-input,#fff);outline:none;color:var(--text-primary)}
.pb-fld input:focus,.pb-fld textarea:focus{border-color:var(--color-sky-400,#6BA3D8)}
.pb-fld textarea{resize:vertical;min-height:62px}
.pb-full{grid-column:1/-1}
.pb-req{color:var(--status-hot-fg,#76251A);font-size:9px}
.pb-unit-wrap{display:flex;align-items:center;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-input,#fff);padding:0 11px}
.pb-unit-wrap input{border:none;outline:none;padding:9px 4px 9px 0;font-family:var(--font-sans);font-size:14px;width:100%;background:transparent;color:var(--text-primary)}
.pb-unit-wrap .pb-u{font-family:var(--font-mono);font-size:12px;color:var(--text-tertiary);white-space:nowrap}
.pb-auto{background:var(--color-sage-50,#E6F4ED);border-color:transparent}
.pb-auto input,.pb-auto .pb-u{color:var(--color-sage-800,#1B543A)}
.pb-seg{display:flex;border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden;width:fit-content}
.pb-seg-btn{padding:8px 14px;border:none;background:transparent;font-family:var(--font-sans);font-size:13px;color:var(--text-secondary);cursor:pointer;border-right:1px solid var(--border-default)}
.pb-seg-btn:last-child{border-right:none}
.pb-seg-btn.on{background:var(--text-primary);color:#fff}
.pb-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary)}
.pb-check input{width:16px;height:16px;accent-color:var(--text-primary)}

.pb-feat-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.pb-feat{display:inline-flex;align-items:center;gap:6px;background:var(--color-paper-100,#F4F1E8);border-radius:var(--radius-pill);padding:6px 8px 6px 12px;font-size:13px}
.pb-feat-del{border:none;background:transparent;color:var(--text-tertiary);cursor:pointer;font-size:14px;line-height:1}
.pb-feat-add{font-size:13px;padding:6px 12px;border-radius:var(--radius-pill);border:1px dashed var(--border-strong);background:transparent;color:var(--text-secondary);cursor:pointer}

/* load slider */
.pb-slider-wrap{background:var(--color-paper-100,#F4F1E8);border-radius:var(--radius-lg);padding:18px 20px}
.pb-slider-readout{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px}
.pb-slider-ext,.pb-slider-cap{display:flex;align-items:baseline;gap:5px}
.pb-slider-ext span:first-child{font-family:var(--font-serif);font-size:26px;font-weight:600}
.pb-slider-cap span:first-child{font-family:var(--font-serif);font-size:26px;font-weight:600;color:var(--color-revenue,#16A34A)}
.pb-slider-unit{font-family:var(--font-mono);font-size:12px;color:var(--text-tertiary)}
.pb-slider{width:100%;accent-color:var(--text-primary);height:6px}
.pb-slider-ticks{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:var(--text-tertiary);margin-top:6px}
.pb-curve-empty{font-size:13px;color:var(--text-tertiary);padding:14px;border:1.5px dashed var(--border-default);border-radius:var(--radius-md);text-align:center}
.pb-link{border:none;background:transparent;color:var(--text-link,#2E70B0);cursor:pointer;font-size:13px;font-family:var(--font-sans)}
.pb-curve-pts{margin-top:10px;font-size:13px}
.pb-curve-pts summary{cursor:pointer;font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.03em}
.pb-curve-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.pb-curve-row input{width:80px;border:1px solid var(--border-default);border-radius:6px;padding:6px 8px;font-family:var(--font-mono);font-size:13px}
.pb-curve-sep{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary)}
.pb-curve-del{border:none;background:transparent;color:var(--text-tertiary);cursor:pointer;font-size:15px;margin-left:auto}

/* cost + margin */
.pb-margin-strip{display:flex;gap:12px;margin-top:14px}
.pb-margin-cell{flex:1;background:var(--color-paper-100,#F4F1E8);border-radius:var(--radius-md);padding:11px 13px;display:flex;flex-direction:column;gap:3px}
.pb-margin-hi{background:var(--text-primary)}
.pb-margin-hi .pb-margin-lbl{color:rgba(255,255,255,.6)}
.pb-margin-hi .pb-margin-val{color:var(--color-accent,#FFD500)}
.pb-margin-lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.03em;text-transform:uppercase;color:var(--text-tertiary)}
.pb-margin-val{font-family:var(--font-mono);font-size:15px;font-weight:600;color:var(--text-primary)}

/* discount tiers */
.pb-tier-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.pb-tier{border:1px solid var(--border-default);border-radius:var(--radius-md);padding:8px 10px;display:flex;flex-direction:column;gap:5px}
.pb-tier-d0{border-color:var(--color-accent,#FFD500);background:rgba(255,213,0,.06)}
.pb-tier-lbl{font-family:var(--font-mono);font-size:10.5px;color:var(--text-tertiary);text-transform:uppercase}
.pb-tier-input{display:flex;align-items:center;gap:3px;font-family:var(--font-mono);font-size:13px}
.pb-tier-input span{color:var(--text-tertiary)}
.pb-tier-input input{width:100%;border:none;border-bottom:1px solid var(--border-default);outline:none;font-family:var(--font-mono);font-size:13px;padding:2px 0;background:transparent;color:var(--text-primary)}

.pb-ed-foot{padding:16px 22px;border-top:1px solid var(--border-subtle);display:flex;justify-content:space-between;align-items:center;background:var(--color-paper-100,#F4F1E8)}
.pb-foot-hint{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary)}
.pb-foot-acts{display:flex;gap:10px}
.pb-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--text-primary);color:#fff;padding:12px 20px;border-radius:var(--radius-md);font-size:14px;z-index:2000;box-shadow:0 8px 24px rgba(0,0,0,.2)}

/* =============================================================
 * v0.32.46 — Full-page quote builder (.qbx-*)
 * ============================================================= */
.qbx-overlay{position:fixed;inset:0;z-index:1200;background:var(--color-paper-50,#FAF8F2);overflow-y:auto}
.qbx-page{max-width:1194px;margin:0 auto;padding:20px 24px 80px}
.qbx-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:16px}
.qbx-crumb{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-tertiary);text-transform:uppercase}
.qbx-title{font-family:var(--font-serif);font-size:28px;font-weight:600;letter-spacing:-.01em;margin-top:2px;display:flex;align-items:center;gap:12px}
.qbx-for{font-size:13px;color:var(--text-secondary);margin-top:4px}
.qbx-for b{color:var(--text-primary)}
.qbx-head-r{display:flex;gap:10px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.qbx-pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.03em;padding:4px 11px;text-transform:uppercase}
.qbx-pill-draft{background:var(--color-paper-200,#ECE7D8);color:var(--text-secondary)}
.qbx-stream-comp{background:var(--color-sky-50,#EEF5FC);color:var(--color-sky-800,#1F4D7A)}
.qbx-stream-scaff{background:var(--color-peach-50,#FBEFDF);color:var(--color-peach-800,#7D4F12)}
.qbx-stream-form{background:var(--color-sage-50,#E6F4ED);color:var(--color-sage-800,#1B543A)}

.qbx-grid{display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:start}
@media (max-width:900px){.qbx-grid{grid-template-columns:1fr}}

.qbx-palette{background:var(--surface-card,#fff);border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden;position:sticky;top:12px}
.qbx-palette-head{padding:14px 16px 10px;border-bottom:1px solid var(--border-subtle)}
.qbx-palette-head h3{font-family:var(--font-serif);font-size:17px;font-weight:600}
.qbx-palette-head p{font-size:12px;color:var(--text-tertiary);margin-top:1px}
.qbx-palette-search{margin:10px 16px;display:flex;align-items:center;gap:8px;background:var(--color-paper-100,#F4F1E8);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:8px 11px;color:var(--text-tertiary);font-size:13px}
.qbx-palette-search input{border:none;background:transparent;outline:none;font-family:var(--font-sans);font-size:13px;flex:1;color:var(--text-primary)}
.qbx-palette-fams{display:flex;gap:6px;padding:0 16px 10px;flex-wrap:wrap}
.qbx-fam-chip{font-family:var(--font-mono);font-size:11px;padding:5px 10px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:transparent;color:var(--text-secondary);cursor:pointer}
.qbx-fam-chip.on{background:var(--text-primary);color:#fff;border-color:var(--text-primary)}
.qbx-palette-list{max-height:520px;overflow-y:auto;padding:4px 12px 12px}
.qbx-cat-card{display:flex;align-items:center;gap:12px;padding:11px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-top:8px;cursor:pointer;background:var(--surface-card,#fff)}
.qbx-cat-card:hover{border-color:var(--border-strong);box-shadow:0 2px 10px rgba(0,0,0,.05)}
.qbx-cat-thumb{width:40px;height:40px;border-radius:var(--radius-md);background:var(--color-paper-100,#F4F1E8);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font-mono);font-size:9px;color:var(--text-tertiary);text-align:center;line-height:1.1;padding:2px}
.qbx-cat-info{min-width:0;flex:1}
.qbx-cat-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qbx-cat-spec{font-family:var(--font-mono);font-size:10.5px;color:var(--text-tertiary);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qbx-cat-add{width:30px;height:30px;border-radius:var(--radius-md);border:1px solid var(--border-default);background:var(--color-accent,#FFD500);color:var(--text-primary);font-size:18px;font-weight:700;cursor:pointer;flex-shrink:0;line-height:1}
.qbx-cat-empty{padding:20px 8px;text-align:center;color:var(--text-tertiary);font-size:12px}
.qbx-palette-hint{font-size:11px;color:var(--text-tertiary);text-align:center;padding:8px 16px 0;font-style:italic}

.qbx-canvas{display:flex;flex-direction:column;gap:16px}
.qbx-panel{background:var(--surface-card,#fff);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:18px 20px}
.qbx-panel-h{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.qbx-frow{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.qbx-frow.three{grid-template-columns:1fr 1fr 1fr}
@media (max-width:560px){.qbx-frow,.qbx-frow.three{grid-template-columns:1fr}}
.qbx-full{grid-column:1/-1}
.qbx-fld label{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:5px}
.qbx-fld input,.qbx-select{width:100%;border:1px solid var(--border-default);border-radius:var(--radius-md);padding:9px 11px;font-family:var(--font-sans);font-size:14px;background:var(--bg-input,#fff);outline:none;color:var(--text-primary)}
.qbx-fld input:focus,.qbx-select:focus{border-color:var(--color-sky-400,#6BA3D8)}
.qbx-unit-wrap{display:flex;align-items:center;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-input,#fff);padding:0 11px}
.qbx-unit-wrap input{border:none;outline:none;padding:9px 4px;font-family:var(--font-mono);font-size:14px;width:100%;background:transparent;color:var(--text-primary)}
.qbx-unit-wrap .qbx-u{font-family:var(--font-mono);font-size:12px;color:var(--text-tertiary);white-space:nowrap}
.qbx-auto{background:var(--color-sage-50,#E6F4ED);border-color:transparent}
.qbx-auto input,.qbx-auto .qbx-u{color:var(--color-sage-800,#1B543A)}
.qbx-auto-tag{font-family:var(--font-mono);font-size:9.5px;color:var(--color-sage-800,#1B543A);background:rgba(93,171,124,.18);padding:2px 6px;border-radius:var(--radius-pill);margin-left:6px;text-transform:none;letter-spacing:0}

.qbx-term-block{margin-bottom:14px}
.qbx-term-block:last-child{margin-bottom:0}
.qbx-term-lbl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:7px}
.qbx-term-pills{display:flex;gap:7px;flex-wrap:wrap}
.qbx-term{font-family:var(--font-sans);font-size:13px;padding:7px 13px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:transparent;color:var(--text-secondary);cursor:pointer}
.qbx-term:hover{border-color:var(--border-strong)}
.qbx-term.on{background:var(--text-primary);color:#fff;border-color:var(--text-primary)}
.qbx-term-custom{font-family:var(--font-sans);font-size:13px;padding:7px 13px;border-radius:var(--radius-pill);border:1px dashed var(--border-strong);background:transparent;color:var(--text-secondary);cursor:pointer}
.qbx-term-custom.on{background:var(--text-primary);color:#fff;border-style:solid}
.qbx-term-custom-input{font-size:13px;padding:7px 13px;border-radius:var(--radius-pill);border:1px solid var(--color-sky-400,#6BA3D8);outline:none;font-family:var(--font-sans);width:140px}

.qbx-totals{background:var(--text-primary);color:#fff;border-radius:var(--radius-lg);padding:18px 20px}
.qbx-tot-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:14px;color:rgba(255,255,255,.72)}
.qbx-tot-row .v{font-family:var(--font-mono);color:#fff}
.qbx-tax{width:46px;font-family:var(--font-mono);font-size:12px;border:none;border-bottom:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;text-align:right;outline:none}
.qbx-tot-div{height:1px;background:rgba(255,255,255,.14);margin:8px 0}
.qbx-tot-grand{display:flex;justify-content:space-between;align-items:baseline;padding-top:4px}
.qbx-tot-grand .l{font-family:var(--font-serif);font-size:18px}
.qbx-tot-grand .v{font-family:var(--font-mono);font-size:26px;font-weight:600;color:var(--color-accent,#FFD500)}
.qbx-tot-weight{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:rgba(255,255,255,.5);margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12)}
.qbx-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--text-primary);color:#fff;padding:12px 20px;border-radius:var(--radius-md);font-size:14px;z-index:2000;box-shadow:0 8px 24px rgba(0,0,0,.2)}

/* =============================================================
 * v0.32.47 — quote revisions badges + quote view (qv-*)
 * ============================================================= */
.qdm-rev-badge{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;background:var(--color-lilac-50,#F0EDFA);color:#6B5BB5;padding:3px 8px;border-radius:var(--radius-pill)}
.qdm-superseded-badge{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;background:var(--color-paper-200,#ECE7D8);color:var(--text-tertiary);padding:3px 8px;border-radius:var(--radius-pill)}

.qv-overlay{position:fixed;inset:0;z-index:1209;display:flex;align-items:flex-start;justify-content:center;background:rgba(20,18,12,.4);padding:5vh 16px 12vh;overflow-y:auto}
.qv-shell{background:var(--surface-card,#fff);border:1px solid var(--border-default);border-radius:var(--radius-lg);width:100%;max-width:720px;box-shadow:0 24px 64px rgba(0,0,0,.24);overflow:hidden}
.qv-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border-subtle);background:var(--color-paper-100,#F4F1E8)}
.qv-tabs{display:flex;border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden}
.qv-tab{padding:7px 14px;border:none;background:transparent;font-family:var(--font-sans);font-size:13px;color:var(--text-secondary);cursor:pointer;border-right:1px solid var(--border-default)}
.qv-tab:last-child{border-right:none}
.qv-tab.on{background:var(--text-primary);color:#fff}
.qv-bar-actions{display:flex;align-items:center;gap:8px}
.qv-close{width:32px;height:32px;border:none;background:transparent;font-size:20px;color:var(--text-tertiary);cursor:pointer;border-radius:8px}
.qv-close:hover{background:rgba(0,0,0,.06)}
.qv-body{max-height:68vh;overflow-y:auto;padding:24px}

/* visual doc (on-screen; print uses its own inline CSS) */
.qv-doc{font-family:var(--font-serif);color:var(--text-primary)}
.qv-doc-head{display:flex;justify-content:space-between;border-bottom:2px solid var(--text-primary);padding-bottom:12px;margin-bottom:20px}
.qv-brand{font-size:22px;font-weight:700}
.qv-brand-sub{font-size:10px;color:var(--text-tertiary);letter-spacing:.05em;text-transform:uppercase;font-family:var(--font-mono)}
.qv-serial{font-family:var(--font-mono);font-size:16px;font-weight:700;text-align:right}
.qv-dates{font-size:11px;color:var(--text-tertiary);text-align:right;margin-top:4px;font-family:var(--font-mono)}
.qv-parties{display:flex;justify-content:space-between;margin-bottom:20px}
.qv-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);font-family:var(--font-mono)}
.qv-party{font-size:15px;font-weight:600}
.qv-party-sub{font-size:12px;color:var(--text-tertiary)}
.qv-table{width:100%;border-collapse:collapse;margin-bottom:16px;font-family:var(--font-sans)}
.qv-table th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-tertiary);border-bottom:1px solid var(--border-default);padding:6px 8px;font-family:var(--font-mono)}
.qv-table td{padding:8px;border-bottom:1px solid var(--border-subtle);font-size:13px}
.qv-r{text-align:right;font-family:var(--font-mono)}
.qv-sku{display:block;font-family:var(--font-mono);font-size:10px;color:var(--text-tertiary)}
.qv-summary{margin-left:auto;width:260px;font-family:var(--font-sans)}
.qv-sum-row{display:flex;justify-content:space-between;padding:4px 8px;font-size:13px;color:var(--text-secondary)}
.qv-sum-row span:last-child{font-family:var(--font-mono)}
.qv-sum-grand{display:flex;justify-content:space-between;padding:8px;font-size:16px;font-weight:700;border-top:2px solid var(--text-primary);margin-top:4px}
.qv-sum-grand span:last-child{font-family:var(--font-mono)}
.qv-terms{display:flex;gap:24px;margin-top:20px;padding-top:12px;border-top:1px solid var(--border-subtle)}
.qv-term span{font-size:10px;text-transform:uppercase;color:var(--text-tertiary);display:block;font-family:var(--font-mono)}
.qv-term b{font-size:13px;font-family:var(--font-sans)}
.qv-foot{margin-top:20px;font-size:11px;color:var(--text-tertiary);border-top:1px solid var(--border-subtle);padding-top:10px;font-family:var(--font-sans)}

/* plain copy-paste */
.qv-plain{font-family:var(--font-mono);font-size:12.5px;line-height:1.6;color:var(--text-primary);white-space:pre-wrap;word-break:break-word;margin:0}

/* =============================================================
 * v0.32.48 — busy/loading, denser palette, INCO suggest, quotes page
 * ============================================================= */
/* top progress bar */
.fmn-busy-bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--color-accent,#FFD500);z-index:3000;opacity:0;transition:opacity .15s}
.fmn-busy-bar.on{opacity:1;width:100%;animation:fmn-busy-slide 1.1s ease-in-out infinite}
@keyframes fmn-busy-slide{0%{width:0;margin-left:0}50%{width:60%}100%{width:0;margin-left:100%}}
/* button busy state (spinner + dim) */
.fmn-btn-busy{position:relative;color:transparent !important;pointer-events:none;opacity:.85}
.fmn-btn-busy::after{content:"";position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border:2px solid rgba(0,0,0,.25);border-top-color:rgba(0,0,0,.7);border-radius:50%;animation:fmn-spin .6s linear infinite}
@keyframes fmn-spin{to{transform:rotate(360deg)}}

/* denser catalog rows on the quote builder palette */
.qbx-cat-card{padding:8px 10px;gap:10px;margin-top:6px}
.qbx-cat-thumb{width:34px;height:34px;font-size:8px}
.qbx-cat-name{font-size:12.5px}
.qbx-cat-spec{font-size:10px}
.qbx-cat-add{width:26px;height:26px;font-size:16px}

/* INCO suggestion + hint tag in the builder */
.qbx-inco-suggest{margin-top:12px;font-size:12.5px;color:var(--text-secondary);background:var(--color-sky-50,#EEF5FC);border:1px solid var(--color-sky-400,#6BA3D8);border-radius:var(--radius-md);padding:9px 12px}
.qbx-inco-apply{margin-left:8px;font-family:var(--font-sans);font-size:12px;font-weight:600;border:none;background:var(--text-primary);color:#fff;border-radius:var(--radius-pill);padding:4px 12px;cursor:pointer}
.qbx-hint-tag{font-family:var(--font-mono);font-size:9.5px;color:var(--text-tertiary);background:var(--color-paper-200,#ECE7D8);padding:2px 6px;border-radius:var(--radius-pill);margin-left:6px;text-transform:none;letter-spacing:0}

/* quotes page */
.qp-head{max-width:1100px;margin:8px auto 0;padding:0 24px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.qp-crumb{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-tertiary);text-transform:uppercase}
.qp-title{font-family:var(--font-serif);font-size:30px;font-weight:600;letter-spacing:-.01em;margin-top:2px}
.qp-sub{font-size:13px;color:var(--text-secondary);margin-top:4px}
.qp-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);flex-shrink:0;margin-top:6px}
.qp-toggle input{width:16px;height:16px;accent-color:var(--text-primary)}
.qp-controls{max-width:1100px;margin:16px auto 0;padding:0 24px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.qp-search{display:flex;align-items:center;gap:8px;background:var(--surface-card,#fff);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:8px 12px;color:var(--text-tertiary);font-size:13px;min-width:280px;flex:1}
.qp-search input{border:none;background:transparent;outline:none;font-family:var(--font-sans);font-size:13px;flex:1;color:var(--text-primary)}
.qp-chips{display:flex;gap:6px;flex-wrap:wrap}
.qp-chip{font-family:var(--font-mono);font-size:11px;padding:6px 11px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:transparent;color:var(--text-secondary);cursor:pointer}
.qp-chip.on{background:var(--text-primary);color:#fff;border-color:var(--text-primary)}
.qp-list{max-width:1100px;margin:16px auto 80px;padding:0 24px;display:flex;flex-direction:column;gap:8px}
.qp-row{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--surface-card,#fff);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:14px 18px;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.qp-row:hover{border-color:var(--border-strong);box-shadow:0 2px 12px rgba(0,0,0,.05)}
.qp-row-main{min-width:0}
.qp-row-top{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.qp-serial{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text-secondary)}
.qp-rev{font-family:var(--font-mono);font-size:9.5px;font-weight:600;text-transform:uppercase;background:var(--color-lilac-50,#F0EDFA);color:#6B5BB5;padding:2px 7px;border-radius:var(--radius-pill)}
.qp-sup{font-family:var(--font-mono);font-size:9.5px;font-weight:600;text-transform:uppercase;background:var(--color-paper-200,#ECE7D8);color:var(--text-tertiary);padding:2px 7px;border-radius:var(--radius-pill)}
.qp-status{font-family:var(--font-mono);font-size:9.5px;font-weight:600;text-transform:uppercase;padding:2px 8px;border-radius:var(--radius-pill)}
.qp-row-title{font-family:var(--font-serif);font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qp-row-sub{font-size:12.5px;color:var(--text-tertiary);margin-top:1px}
.qp-row-right{text-align:right;flex-shrink:0}
.qp-amount{font-family:var(--font-mono);font-size:17px;font-weight:600;color:var(--text-primary)}
.qp-revised{font-family:var(--font-mono);font-size:10.5px;color:var(--text-tertiary);margin-top:2px}
.qp-empty{text-align:center;color:var(--text-tertiary);font-size:14px;padding:40px 0}

/* =============================================================
 * v0.32.49 — Champion accounts (dashboard block + product panel)
 * ============================================================= */
/* dashboard champion rows */
.dh-champ{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--border-subtle);cursor:pointer}
.dh-champ:last-child{border-bottom:none}
.dh-champ:hover{background:var(--color-paper-100,#F4F1E8)}
.dh-champ-rank{width:20px;height:20px;flex-shrink:0;border-radius:50%;background:var(--color-accent,#FFD500);color:var(--text-primary);font-family:var(--font-mono);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.dh-champ-name{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.dh-champ-meta{font-family:var(--font-mono);font-size:10.5px;color:var(--text-tertiary);white-space:nowrap}
.dh-champ-rev{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--color-revenue,#16A34A);white-space:nowrap}

/* product editor top-buyers panel */
.pb-champions{display:flex;flex-direction:column;gap:2px}
.pb-champ-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:var(--radius-md)}
.pb-champ-row:nth-child(odd){background:var(--color-paper-100,#F4F1E8)}
.pb-champ-rank{width:20px;height:20px;flex-shrink:0;border-radius:50%;background:var(--color-accent,#FFD500);color:var(--text-primary);font-family:var(--font-mono);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pb-champ-name{flex:1;min-width:0;font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-champ-units{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);white-space:nowrap}
.pb-champ-rev{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--color-revenue,#16A34A);white-space:nowrap;min-width:64px;text-align:right}
.pb-champions-empty{font-size:13px;color:var(--text-tertiary);padding:14px;border:1.5px dashed var(--border-default);border-radius:var(--radius-md);text-align:center;line-height:1.5}

/* =============================================================
 * v0.32.50 — won/conversion strip + purchase-history tab
 * ============================================================= */
/* dashboard won strip */
.dh-won-strip{display:flex;align-items:stretch;gap:1px;background:var(--text-primary);border-radius:var(--radius-lg);overflow:hidden;margin:0 0 16px}
.dh-won-head{display:flex;align-items:center;padding:0 18px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent,#FFD500);background:rgba(255,255,255,.04);white-space:nowrap}
.dh-won-item{flex:1;padding:12px 16px;background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:2px;min-width:0}
.dh-won-lab{font-family:var(--font-mono);font-size:10px;letter-spacing:.03em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.dh-won-val{font-family:var(--font-serif);font-size:20px;font-weight:600;color:#fff}
.dh-won-sub{font-family:var(--font-mono);font-size:10px;color:rgba(255,255,255,.4)}
@media (max-width:760px){.dh-won-strip{flex-wrap:wrap}.dh-won-head{width:100%;padding:8px 16px}.dh-won-item{min-width:45%}}

/* purchase history tab */
.tcph-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.tcph-rank{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary)}
.tcph-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}
@media (min-width:520px){.tcph-stats{grid-template-columns:repeat(4,1fr)}}
.tcph-stat{background:var(--color-paper-100,#F4F1E8);border-radius:var(--radius-md);padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.tcph-stat-lab{font-family:var(--font-mono);font-size:10px;letter-spacing:.03em;text-transform:uppercase;color:var(--text-tertiary)}
.tcph-stat-val{font-family:var(--font-serif);font-size:21px;font-weight:600;color:var(--text-primary)}
.tcph-stat-sub{font-family:var(--font-mono);font-size:10.5px;color:var(--text-tertiary)}
.tcph-block{margin-bottom:20px}
.tcph-h{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-tertiary);margin:0 0 10px}
.tcph-prod-list{display:flex;flex-direction:column;gap:6px}
.tcph-prod{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--color-paper-100,#F4F1E8);border-radius:var(--radius-md)}
.tcph-prod-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcph-prod-units{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);white-space:nowrap;margin-left:12px}
.tcph-timeline{display:flex;flex-direction:column}
.tcph-tl-row{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--border-subtle);cursor:pointer}
.tcph-tl-row:last-child{border-bottom:none}
.tcph-tl-row:hover{background:var(--color-paper-100,#F4F1E8)}
.tcph-tl-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.tcph-tl-dot.won{background:var(--color-revenue,#16A34A)}
.tcph-tl-dot.lost{background:var(--color-ink-300,#5F5E5A)}
.tcph-tl-date{font-family:var(--font-mono);font-size:11.5px;color:var(--text-tertiary);white-space:nowrap;width:96px;flex-shrink:0}
.tcph-tl-title{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcph-tl-status{font-family:var(--font-mono);font-size:9.5px;font-weight:600;text-transform:uppercase;padding:2px 8px;border-radius:var(--radius-pill);flex-shrink:0}
.tcph-tl-status.won{background:var(--color-sage-50,#E6F4ED);color:var(--color-sage-800,#1B543A)}
.tcph-tl-status.lost{background:var(--color-paper-200,#ECE7D8);color:var(--text-tertiary)}
.tcph-tl-amount{font-family:var(--font-mono);font-size:13px;font-weight:600;white-space:nowrap;flex-shrink:0;min-width:64px;text-align:right}

/* =============================================================
 * v0.33.0 — proactive panel + relationship tiers + won-strip restyle
 * Appended to primitives.css. Uses existing tokens only.
 * ============================================================= */

/* ---- Proactive panel (agent nudges layered over the rule banner) ---- */
.pp-callout{
  display:flex;gap:12px;align-items:flex-start;
  background:#FDF6F4;                 /* warm paper-tinted alert, not red slab */
  border:1px solid #F2D6CE;
  border-left:3px solid #C0392B; /* v0.34.0 - red rail: this is an URGENT 48h alert, not a calm go-signal */
  border-radius:var(--radius-lg,12px);
  padding:14px 16px;margin:0 0 16px;
}
.pp-icon{flex:0 0 auto;color:#B4452E;line-height:0;margin-top:1px}
.pp-bodywrap{flex:1;min-width:0}
.pp-head{
  margin:0 0 8px;font-family:var(--font-serif,Georgia,serif);
  font-size:14px;font-weight:600;color:var(--text-primary,#1c1c1a);
}
.pp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pp-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;
}
.pp-row-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;flex:1}
.pp-acct{font-size:13.5px;color:var(--text-primary,#1c1c1a);white-space:nowrap}
.pp-meta{
  font-family:var(--font-mono,monospace);font-size:11px;
  color:var(--text-secondary,#6b6b66);
}
.pp-meta-nudge{
  font-family:var(--font-sans,system-ui);font-size:12.5px;line-height:1.35;
  color:var(--text-primary,#2a2a27);white-space:normal;flex-basis:100%;
}
.pp-action{
  flex:0 0 auto;
  background:var(--color-accent,#FFD500);color:var(--color-accent-text,#000);
  border:none;border-radius:8px;padding:6px 12px;
  font-family:var(--font-mono,monospace);font-size:11px;font-weight:600;
  letter-spacing:.02em;cursor:pointer;white-space:nowrap;
}
.pp-action:hover{background:var(--color-accent-hover,#f0c700)}
.pp-action-nudge{background:var(--color-accent,#FFD500);color:var(--color-accent-text,#000)} /* v0.34.0 - keep urgent nudge action on brand yellow, not green */
.pp-action-nudge:hover{background:var(--color-accent-hover,#f0c700)}
.pp-row-upgraded .pp-acct{font-weight:600}

/* ---- Relationship tier badge (inline pill: "Priority · 72") ---- */
.rel-tier,.pp-tier{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px;border-radius:999px;
  font-family:var(--font-mono,monospace);font-size:10.5px;
  font-weight:600;letter-spacing:.03em;white-space:nowrap;
  border:1px solid transparent;line-height:1.6;
}
.rel-tier{background:rgba(0,0,0,.04);color:var(--text-primary,#1c1c1a)}
.rel-tier-label{text-transform:uppercase}
.rel-tier-score{
  font-weight:700;
  padding-left:5px;border-left:1px solid rgba(0,0,0,.12);
}
.rel-tier-conf{opacity:.5;font-weight:400}
/* per-tier accent rail via the --rel-rail custom prop set inline */
.rel-tier{box-shadow:inset 3px 0 0 var(--rel-rail,transparent)}
.rel-tier-1{background:rgba(255,213,0,.16);color:#7a5d00}
.rel-tier-2{background:rgba(22,163,74,.12);color:#0f7a37}
.rel-tier-3{background:rgba(22,163,74,.07);color:#2a6b45}
.rel-tier-4{background:rgba(0,0,0,.05);color:var(--text-secondary,#6b6b66)}
.rel-tier-5{background:var(--color-paper-100,#F4F1E8);color:var(--text-secondary,#8a8a82)}

/* compact tier on the proactive rows */
.pp-tier-1{background:rgba(255,213,0,.16);color:#7a5d00}
.pp-tier-2{background:rgba(22,163,74,.12);color:#0f7a37}
.pp-tier-3{background:rgba(22,163,74,.07);color:#2a6b45}
.pp-tier-4{background:rgba(0,0,0,.05);color:var(--text-secondary,#6b6b66)}
.pp-tier-5{background:var(--color-paper-100,#F4F1E8);color:var(--text-secondary,#8a8a82)}

/* ---- Closed-business strip restyle: lighter paper + green accent rail ----
 * Replaces the heavy ink slab. Same DOM (.dh-won-strip et al), warm surface,
 * green head rail, ink text. See HANDOFF for the exact replace of the v0.32.50
 * block in primitives.css. */
.dh-won-strip{
  display:flex;align-items:stretch;gap:1px;
  background:var(--color-paper-200,#ECE7D8);     /* the 1px gap color (divider tint) */
  border:1px solid var(--color-paper-200,#ECE7D8);
  border-left:4px solid var(--color-revenue,#16A34A);  /* green accent rail */
  border-radius:var(--radius-lg,12px);overflow:hidden;margin:0 0 16px;
}
.dh-won-head{
  display:flex;align-items:center;padding:0 18px;
  font-family:var(--font-mono,monospace);font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#0f7a37;            /* green ink label */
  background:var(--color-paper-100,#F4F1E8);white-space:nowrap;
}
.dh-won-item{
  flex:1;padding:12px 16px;background:var(--bg-elev-1,#fff);
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
.dh-won-lab{
  font-family:var(--font-mono,monospace);font-size:10px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:var(--text-secondary,#54534F);
}
.dh-won-val{
  font-family:var(--font-serif,Georgia,serif);font-size:20px;font-weight:600;
  color:var(--text-primary,#1c1c1a);
}
/* revenue figures lean green to echo the rail */
.dh-won-item:first-of-type .dh-won-val,
.dh-won-item:last-of-type .dh-won-val{color:#0f7a37}
.dh-won-sub{
  font-family:var(--font-mono,monospace);font-size:10px;font-weight:500;
  color:var(--text-secondary,#6E6C67);
}
@media (max-width:760px){
  .dh-won-strip{flex-wrap:wrap}
  .dh-won-head{width:100%;padding:8px 16px}
  .dh-won-item{min-width:45%}
}

/* v0.34.0 - KPI drill-down CTA (create the missing item when a weekly target is unmet) */
.dd-cta-row{display:flex;justify-content:center;padding:14px 0 4px;border-top:1px solid var(--color-paper-200,#ECE7D8);margin-top:8px}
.dd-cta{font-family:var(--font-mono,monospace);font-size:12px;font-weight:600;letter-spacing:.02em;padding:9px 18px;border-radius:10px;cursor:pointer}