/* ── Event Tear Sheet ── */

.ts-loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  z-index: 100;
  gap: 12px;
}
.ts-loading .loading-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.ts-loading .loading-text {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Print-only branded header (hidden on screen) */
.ts-print-header {
  display: none;
}

/* Header */
.ts-header {
  padding: 24px 32px 0;
}
.ts-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ts-theme-toggle {
  flex-shrink: 0;
  font-size: 12px;
  padding: 6px 14px;
  margin-top: 2px;
}
.ts-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
}
.ts-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Workflow toggles (above empty state — same horizontal rhythm as .ts-controls / .ts-report) */
.ts-workflow-wrap {
  padding: 0 32px 12px;
}

/* Controls bar */
.ts-controls {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 16px 32px;
  flex-wrap: wrap;
}
.ts-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 280px;
}
.ts-select-wrap.ts-select-small {
  min-width: 100px;
}
.ts-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}
.ts-select {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-secondary, var(--bg-card));
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
}
.ts-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}
.ts-checkbox-label {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  cursor: pointer;
}
.ts-checkbox-label input[type="checkbox"] {
  accent-color: var(--accent);
}
.ts-btn-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ts-generate-btn {
  white-space: nowrap;
  gap: 6px;
  display: flex;
  align-items: center;
}

/* Event series dropdown: family row chevron — keep SVG from expanding in flex (Alpine :style must not replace dimensions) */
.ts-family-chevron {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  flex-shrink: 0;
  display: block;
  transition: transform 0.2s;
}

/* Tabs */
.ts-tabs {
  display: flex;
  gap: 0;
  padding: 0 32px;
  border-bottom: 1px solid var(--border);
}
.ts-tab {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ts-tab:hover {
  color: var(--text-primary);
}
.ts-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.ts-tab i {
  font-size: 12px;
}

/* Error */
.ts-error {
  margin: 0 32px 16px;
  padding: 12px 16px;
  background: var(--error-bg);
  border: 1px solid var(--error);
  border-radius: 8px;
  color: var(--error);
  font-size: 13px;
}

/* Report container */
.ts-report {
  padding: 0 32px 32px;
}

/* Event Header */
.ts-event-header {
  padding: 20px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 24px;
}
.ts-event-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.ts-event-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ts-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--bg-secondary, rgba(255,255,255,0.05));
  border-radius: 20px;
  font-size: 12px;
  color: var(--text-secondary);
}
.ts-meta-pill i {
  font-size: 10px;
  opacity: 0.7;
}
.ts-event-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* Event Inventory band — pitch collateral, deadlines, tier inventory.
   Sits directly under the event header so the seller can grab the
   datasheet, see what's selling out, and check deadlines without
   pivoting to the opp modal. Mirrors the layout used inside the
   universal opp detail modal (templates/base.html). */
.ts-event-inventory {
  margin: -10px 0 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 14px 24px 16px;
}
.ts-inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  align-items: start;
}
.ts-inv-card {
  background: var(--bg-secondary, rgba(255,255,255,0.025));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.ts-inv-card-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ts-inv-card-title i {
  color: var(--accent);
  font-size: 11px;
}
.ts-inv-open-opps {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: #38bdf8;
  background: rgba(56,189,248,0.15);
  padding: 1px 6px;
  border-radius: 10px;
  text-transform: none;
}

.ts-inv-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ts-inv-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 12px;
  text-decoration: none;
  color: var(--accent);
  background: transparent;
  transition: background 120ms ease;
}
.ts-inv-link:hover {
  background: rgba(96,165,250,0.1);
}
.ts-inv-link i {
  font-size: 11px;
  width: 12px;
  text-align: center;
}

.ts-inv-deadlines {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ts-inv-dl-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 2px 0;
  color: var(--text-secondary);
}
.ts-inv-dl-row.past-date {
  opacity: 0.5;
  text-decoration: line-through;
}
.ts-inv-dl-lbl {
  color: var(--text-muted);
}
.ts-inv-dl-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

.ts-inv-tiers {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ts-inv-tier-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 2px 0;
  color: var(--text-secondary);
}
.ts-inv-tier-lbl {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ts-inv-tier-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.ts-inv-tier-row.sold-out .ts-inv-tier-count {
  color: #f87171;
}
.ts-inv-tier-row.hot .ts-inv-tier-count {
  color: #facc15;
}
.ts-inv-tier-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(239,68,68,0.18);
  color: #f87171;
}
.ts-inv-tier-tag-hot {
  background: rgba(234,179,8,0.18);
  color: #facc15;
}
.ts-inv-tier-link {
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  padding: 0 2px;
}
.ts-inv-tier-link:hover {
  text-decoration: underline;
}

.ts-inv-note {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--text-muted);
  font-style: italic;
  background: rgba(148,163,184,0.06);
  border-left: 2px solid var(--border);
  border-radius: 0 4px 4px 0;
}

/* Sections */
.ts-section {
  margin-bottom: 28px;
}
.ts-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ts-section-title i {
  color: var(--accent);
  font-size: 14px;
}

/* Open Opps (default top section) — highlighted bg so the rep
   immediately sees "active CRM pipeline lives at the top." */
.ts-open-opps {
  border: 1px solid rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.04);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.ts-open-opps .ts-section-title i {
  color: #16a34a;
}

/* Inline "how scored" hint next to the section title. Clickable —
   switches to the Methodology tab. Uses theme vars so it stays legible
   in dark, light, and pastel modes. */
.ts-methodology-hint {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  user-select: none;
}
.ts-methodology-hint:hover {
  color: var(--accent-light);
  background: var(--accent-subtle);
  border-color: var(--border);
}
.ts-methodology-hint i {
  font-size: 10px;
}

/* Sales Talking Points */
.ts-section-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: -8px 0 12px 0;
}
.ts-talking-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}
.ts-talking-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  transition: border-color 0.15s;
}
.ts-talking-card:hover {
  border-color: var(--accent);
}
.ts-talking-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ts-talking-header i {
  color: var(--accent);
  font-size: 14px;
  width: 20px;
  text-align: center;
}
.ts-talking-category {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.ts-talking-headline {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.3;
}
.ts-talking-detail {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Executive Summary */
.ts-exec-summary {
  border-left: 3px solid var(--accent);
  padding-left: 16px;
}
.ts-exec-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-primary);
}
.ts-synth-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
  margin-left: 8px;
  vertical-align: middle;
}
.ts-synth-btn {
  gap: 6px;
}
.ts-synth-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
  margin-top: 6px;
}
.ts-synth-indicator i {
  font-size: 8px;
}

/* Synthesis success banner */
.ts-synth-success {
  margin: 0 32px 16px;
  padding: 12px 16px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
  color: var(--success);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: ts-fade-in 0.4s ease;
}
.ts-synth-success span {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.7;
}

/* Loading sub-text */
.ts-loading-sub {
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.6;
  margin-top: 4px;
}

/* Highlight flash for scroll-to effect */
@keyframes ts-flash {
  0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
  50% { box-shadow: 0 0 20px 4px rgba(139, 92, 246, 0.2); }
  100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}
@keyframes ts-fade-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ts-highlight-flash {
  animation: ts-flash 1s ease 2;
}

/* Refined explanation HTML styling */
.ts-explain-refined {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.ts-explain-refined .ts-re-hook {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 6px;
  line-height: 1.4;
}
.ts-explain-refined ul {
  margin: 0;
  padding-left: 16px;
  list-style: none;
}
.ts-explain-refined ul li {
  position: relative;
  padding: 2px 0 2px 0;
  font-size: 12px;
  line-height: 1.5;
}
.ts-explain-refined ul li::before {
  content: "\2022";
  color: var(--accent);
  font-weight: 700;
  position: absolute;
  left: -14px;
}
.ts-explain-refined ul li strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Why This Event grid */
.ts-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.ts-why-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}
.ts-why-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}
.ts-why-value.ts-why-list {
  font-size: 13px;
  font-weight: 400;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ts-why-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ts-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(59,130,246,0.1);
  color: var(--accent-light, var(--accent));
  font-size: 12px;
}
.ts-chip-topic {
  background: rgba(16,185,129,0.1);
  color: var(--success);
}

/* Tier Summary */
.ts-tier-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ts-tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
}
.ts-tier-pill i { font-size: 12px; }
.ts-tier-anchor {
  background: rgba(59,130,246,0.12);
  color: var(--accent);
  border: 1px solid rgba(59,130,246,0.3);
}
.ts-tier-exhibitor {
  background: rgba(16,185,129,0.12);
  color: var(--success);
  border: 1px solid rgba(16,185,129,0.3);
}
.ts-tier-patron {
  background: rgba(245,158,11,0.12);
  color: var(--warning);
  border: 1px solid rgba(245,158,11,0.3);
}
.ts-tier-netnew {
  background: rgba(139,92,246,0.12);
  color: #a78bfa;
  border: 1px solid rgba(139,92,246,0.3);
}
.ts-tier-churned {
  background: rgba(239,68,68,0.08);
  color: var(--error);
  border: 1px solid rgba(239,68,68,0.2);
}
.ts-tier-detail {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Tier group headings */
.ts-tier-group {
  margin-bottom: 20px;
}
.ts-tier-heading {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
  padding: 6px 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ts-tier-count {
  font-weight: 400;
  font-size: 12px;
  opacity: 0.7;
}
.ts-tier-heading-anchor {
  background: rgba(59,130,246,0.08);
  color: var(--accent);
  border-left: 3px solid var(--accent);
}
.ts-tier-heading-exhibitor {
  background: rgba(16,185,129,0.08);
  color: var(--success);
  border-left: 3px solid var(--success);
}
.ts-tier-heading-patron {
  background: rgba(245,158,11,0.08);
  color: var(--warning);
  border-left: 3px solid var(--warning);
}

/* Tables */
.ts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ts-table thead th {
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.ts-table tbody tr {
  border-bottom: 1px solid var(--border-light, var(--border));
  transition: background 0.15s;
}
.ts-table tbody tr:hover {
  background: var(--bg-card-hover, rgba(255,255,255,0.02));
}
.ts-table tbody td {
  padding: 10px;
  vertical-align: top;
}
.ts-table-compact {
  font-size: 12px;
}
.ts-table-compact td,
.ts-table-compact th {
  padding: 6px 10px;
}

.ts-account-name {
  font-weight: 500;
  color: var(--text-primary);
}
a.ts-account-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--text-muted);
  transition: color 0.15s, border-color 0.15s;
  cursor: pointer;
}
a.ts-account-link:hover {
  color: var(--accent, #7c3aed);
  border-bottom-color: var(--accent, #7c3aed);
  border-bottom-style: solid;
}
.ts-account-id {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}
.ts-owner {
  white-space: nowrap;
  font-size: 12px;
}
.ts-score {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--accent);
}
.ts-flags {
  white-space: nowrap;
}
.ts-flag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-right: 4px;
}
.ts-flag-new {
  background: rgba(139,92,246,0.15);
  color: #a78bfa;
}
.ts-flag-churned {
  background: rgba(239,68,68,0.1);
  color: var(--error);
}
/* AI Tags column */
.ts-tags {
  max-width: 180px;
  min-width: 100px;
}
.ts-chip-tag {
  background: rgba(139, 92, 246, 0.1);
  color: #a78bfa;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  display: inline-block;
  margin: 1px 2px;
  white-space: nowrap;
}
.ts-no-tags {
  color: var(--text-muted);
  font-size: 11px;
}
.ts-account-id {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.ts-explanation {
  max-width: 600px;
  min-width: 350px;
}
.ts-explain-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Compact inline explainer used inside the tight Retention / Expansion /
   Net-New rows. Smaller, dimmer than the legacy table cell explainer so
   it fits comfortably under the chip strip without dominating the row.
   Uses theme variables so it stays readable in dark, light, and pastel
   modes (hardcoded slate-gray was invisible on rose pastel background). */
.ts-explain-inline {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  opacity: 0.92;
  font-weight: 400;
  word-break: break-word;
}
.ts-explain-inline.ts-explain-refined {
  color: var(--text-primary);
  opacity: 1;
}
.ts-explain-inline.ts-explain-refined p {
  margin: 0 0 4px;
  color: var(--text-secondary);
}
.ts-explain-inline.ts-explain-refined p:last-child {
  margin-bottom: 0;
}
.ts-explain-inline.ts-explain-refined ul,
.ts-explain-inline.ts-explain-refined ol {
  margin: 4px 0 4px 18px;
  padding: 0;
  color: var(--text-secondary);
}
.ts-explain-inline.ts-explain-refined li {
  color: var(--text-secondary);
}
.ts-explain-inline.ts-explain-refined strong {
  color: var(--text-primary);
}

/* ─── Reason bullets (deterministic per-prospect "why") ─────────────────
   Replaces the wall-of-text prose explainer in priority rows. Each
   bullet is one fact + one cited signal. Capped at 3 by reasonBullets()
   to keep the row scannable in both screen and PDF.
*/
.ts-reason-bullets {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-secondary);
}
.ts-reason-bullets li {
  display: flex;
  gap: 6px;
  align-items: baseline;
  color: var(--text-secondary);
}
.ts-reason-bullets li::before {
  content: '•';
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
}
.ts-reason-cite {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent-light, #6366f1);
  flex-shrink: 0;
  white-space: nowrap;
}
.ts-reason-text {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

/* ─── Refined-explanation toggle ────────────────────────────────────────
   When ``synthesis.refined_explanations`` lands, a "Show AI rationale"
   disclosure appears under the deterministic bullets. Keeps the row
   short by default; rep clicks to expand the polished prose. */
.ts-refined-toggle {
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent-light, #6366f1);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ts-refined-toggle:hover { text-decoration: underline; }
.ts-refined-toggle i { font-size: 9px; }

/* ─── Prospect row theming ──────────────────────────────────────────────
   Section background tints are pale by design (per-tier color hint),
   but the inline-styled text colors used to be hardcoded slate-gray
   (#e2e8f0 / #9ca3af / #cbd5e1) which became invisible against the
   pale tints in light mode. These selectors make the row text follow
   the theme variables instead. */
.ts-priority-row .ts-prow-name { color: var(--text-primary); font-weight: 600; font-size: 13px; }
.ts-priority-row .ts-prow-meta { color: var(--text-muted); font-size: 10px; }
.ts-priority-row .ts-prow-chip-muted {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  color: var(--text-secondary);
}

/* ─── Collapsible prospect section ──────────────────────────────────────
   Each prospect bucket renders the top 5 rows by default and hides
   the rest behind a "Show all N" toggle. Halves the page length on
   bulky tearsheets. */
.ts-section-tail { display: flex; flex-direction: column; gap: 6px; }
.ts-section-tail-toggle {
  margin-top: 6px;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-light, #6366f1);
  background: none;
  border: 1px dashed color-mix(in srgb, var(--accent-light, #6366f1) 40%, transparent);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
}
.ts-section-tail-toggle:hover {
  background: color-mix(in srgb, var(--accent-light, #6366f1) 8%, transparent);
}

.ts-event-vp {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}

/* BI context under account name */
.ts-account-bi {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-muted);
}
.ts-bi-desc {
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.ts-bi-sled {
  margin-top: 2px;
  font-style: italic;
  opacity: 0.85;
}

/* Net-New Logos section */
.ts-netnew-title {
  color: var(--accent-light);
}
.ts-flag-level {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

/* Session cards */
.ts-session-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ts-session-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.ts-session-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.ts-session-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.ts-session-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  align-items: center;
}
.ts-session-date {
  font-size: 11px;
  color: var(--text-muted);
}
.ts-session-targets {
  padding: 8px 16px;
}
.ts-session-target-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.03));
  font-size: 12px;
}
.ts-session-target-row:last-child {
  border-bottom: none;
}
.ts-session-acct {
  font-weight: 500;
  color: var(--text-primary);
  min-width: 180px;
}
.ts-session-level {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.ts-level-anchor { background: rgba(59,130,246,0.15); color: var(--accent); }
.ts-level-exhibitor { background: rgba(16,185,129,0.15); color: var(--success); }
.ts-level-patron { background: rgba(245,158,11,0.15); color: var(--warning); }
.ts-session-fit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.ts-session-reason {
  color: var(--text-secondary);
  font-size: 12px;
}
.ts-session-empty {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* Level badge */
.ts-level-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-secondary, rgba(255,255,255,0.05));
  color: var(--text-secondary);
}

/* Collapsible sections */
.ts-clickable {
  cursor: pointer;
  user-select: none;
}
.ts-clickable:hover {
  opacity: 0.85;
}
.ts-collapse-count {
  font-weight: 400;
  font-size: 13px;
  color: var(--text-muted);
}
.ts-collapse-icon {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
}

/* Export bar */
.ts-export-bar {
  display: flex;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  margin-top: 24px;
  flex-wrap: wrap;
  align-items: center;
}

/* Sales Library sync cluster — pill + overwrite + copy link.
   Visually grouped (pushed to the right of the export bar) so the
   user sees the auto-save state without it competing with the export
   actions. */
.ts-library-sync {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-left: 12px;
  border-left: 1px dashed var(--border);
}

.ts-library-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}

/* Default ("Not saved yet") — quiet so it doesn't shout when there's
   nothing to report yet. */
.ts-library-pill--idle {
  background: rgba(148, 163, 184, .12);
  color: #64748b;
  border-color: rgba(148, 163, 184, .25);
}

.ts-library-pill--saving {
  background: rgba(99, 102, 241, .12);
  color: #4f46e5;
  border-color: rgba(99, 102, 241, .25);
}
.ts-library-pill--saving::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: ts-pulse 1.1s ease-in-out infinite;
}

.ts-library-pill--saved {
  background: rgba(34, 197, 94, .14);
  color: #15803d;
  border-color: rgba(34, 197, 94, .3);
}
.ts-library-pill--saved::before {
  content: "\f00c"; /* fa-check */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 10px;
}

.ts-library-pill--error {
  background: rgba(220, 38, 38, .12);
  color: #b91c1c;
  border-color: rgba(220, 38, 38, .3);
}
.ts-library-pill--error::before {
  content: "\f071"; /* fa-triangle-exclamation */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 10px;
}

@keyframes ts-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* Empty state */
.ts-empty {
  text-align: center;
  padding: 80px 32px;
  color: var(--text-muted);
}

/* ── Methodology Tab ── */
.ts-methodology {
  padding: 24px 32px 40px;
  max-width: 900px;
}
.ts-meth-section {
  margin-bottom: 28px;
}
.ts-meth-section h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.ts-meth-section h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ts-meth-section h3 i {
  color: var(--accent);
  font-size: 13px;
}
.ts-meth-section p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 10px;
}
.ts-meth-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 10px;
}
.ts-meth-table thead th {
  text-align: left;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.ts-meth-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.04));
  vertical-align: top;
  color: var(--text-secondary);
}
.ts-meth-table tbody td:first-child {
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}
.ts-meth-table tbody td:nth-child(2) {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
  width: 60px;
}
.ts-meth-tier-anchor { color: var(--accent) !important; }
.ts-meth-tier-exhibitor { color: var(--success) !important; }
.ts-meth-tier-patron { color: var(--warning) !important; }
.ts-meth-note {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 6px;
}
.ts-meth-formula {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--accent);
  margin: 10px 0;
  display: inline-block;
}
.ts-meth-sources {
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-secondary);
}
.ts-meth-sources li { margin-bottom: 4px; }
.ts-meth-limits {
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.ts-meth-limits li { margin-bottom: 6px; }
.ts-meth-diag {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.ts-meth-diag-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-secondary);
}
.ts-meth-diag-item strong {
  color: var(--text-primary);
}
.ts-meth-diag-item span {
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
}

/* Print / PDF */
@page {
  size: letter portrait;
  margin: 0.6in 0.5in;
}
@media print {
  :root {
    --bg-primary: #fff !important;
    --bg-secondary: #fff !important;
    --bg-card: #fff !important;
    --bg-card-hover: #fff !important;
    --bg-surface: #fff !important;
    --text-primary: #111 !important;
    --text-secondary: #333 !important;
    --text-muted: #555 !important;
    --border: #ccc !important;
    --accent: #2563eb !important;
    --accent-light: #3b82f6 !important;
    --accent-dark: #1d4ed8 !important;
  }
  *, *::before, *::after { color: #111 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; }
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; color: #111 !important; font-size: 11px !important; line-height: 1.45 !important; width: 100% !important; }

  .sidebar, aside, nav, header, .nav-bar, [class*="sidebar"],
  .ts-controls, .ts-export-bar, .ts-generate-btn,
  .ts-tabs, .ts-synth-btn, .ts-synth-success, .ts-loading,
  .ts-methodology, .ts-empty, .ts-error,
  .ts-collapsible, .ts-event-vp { display: none !important; }
  .main-content { margin-left: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; }

  /* Branded print header */
  .ts-print-header {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 8px 0 12px;
    border-bottom: 2px solid #333;
    margin-bottom: 14px;
    background: #fff !important;
  }
  .ts-print-logo { height: 32px; width: auto; }
  .ts-print-title { font-size: 18px; font-weight: 700; color: #111 !important; }
  .ts-print-date { margin-left: auto; font-size: 10px; color: #666 !important; }

  .ts-header { display: none !important; }
  .ts-subtitle { display: none; }
  .ts-report { padding: 0; background: #fff !important; }

  .ts-event-header { border: 1px solid #bbb !important; background: #f8f9fa !important; padding: 10px; margin-bottom: 10px; }
  .ts-event-name { color: #111 !important; font-size: 16px !important; }
  .ts-meta-pill { border: 1px solid #999 !important; background: #f0f0f0 !important; color: #333 !important; font-size: 10px; }
  .ts-meta-pill i { color: #555 !important; }

  .ts-exec-summary { border-left: 3px solid #2563eb !important; background: #f8f9fa !important; padding: 8px 12px; }
  .ts-exec-text { font-size: 11px; color: #222 !important; }
  .ts-section-title { font-size: 14px; margin-bottom: 6px; color: #111 !important; }
  .ts-section-title i { color: #555 !important; }

  .ts-section { break-inside: auto; margin-bottom: 12px; padding: 10px; background: #fff !important; }

  .ts-talking-grid { gap: 8px; }
  .ts-talking-card { border: 1px solid #bbb !important; background: #f8f9fa !important; break-inside: avoid; padding: 8px; }
  .ts-talking-header { color: #2563eb !important; }
  .ts-talking-header i { color: #2563eb !important; }
  .ts-talking-category { color: #2563eb !important; }
  .ts-talking-headline { font-size: 11px; color: #111 !important; }
  .ts-talking-detail { font-size: 10px; color: #333 !important; }

  .ts-why-grid { gap: 8px; }
  .ts-why-card { border: 1px solid #bbb !important; background: #f8f9fa !important; padding: 8px; }
  .ts-why-value { color: #111 !important; }
  .ts-why-label { color: #555 !important; }
  .ts-chip { border: 1px solid #999 !important; background: #eee !important; color: #333 !important; }
  .ts-chip-topic { background: #e8f0fe !important; color: #1a56db !important; border-color: #93b4f4 !important; }

  .ts-tier-bar { gap: 6px; }
  .ts-tier-pill { border: 1px solid #999 !important; font-size: 10px; padding: 4px 8px; }
  .ts-tier-pill.ts-tier-anchor { background: #fef3c7 !important; color: #92400e !important; border-color: #d97706 !important; }
  .ts-tier-pill.ts-tier-exhibitor { background: #dbeafe !important; color: #1e40af !important; border-color: #3b82f6 !important; }
  .ts-tier-pill.ts-tier-patron { background: #d1fae5 !important; color: #065f46 !important; border-color: #10b981 !important; }
  .ts-tier-pill.ts-tier-netnew { background: #ede9fe !important; color: #5b21b6 !important; border-color: #8b5cf6 !important; }
  .ts-tier-pill.ts-tier-churned { background: #fee2e2 !important; color: #991b1b !important; border-color: #ef4444 !important; }
  .ts-tier-detail { color: #555 !important; }

  .ts-tier-group { break-inside: auto; page-break-inside: auto; }
  .ts-tier-heading { font-size: 13px; margin-top: 10px; color: #111 !important; break-after: avoid; }
  .ts-tier-heading.ts-tier-heading-anchor { border-color: #d97706 !important; color: #92400e !important; }
  .ts-tier-heading.ts-tier-heading-exhibitor { border-color: #3b82f6 !important; color: #1e40af !important; }
  .ts-tier-heading.ts-tier-heading-patron { border-color: #10b981 !important; color: #065f46 !important; }

  .ts-table { font-size: 9.5px; width: 100%; border-collapse: collapse; }
  .ts-table thead th { background: #f0f0f0 !important; color: #111 !important; border-bottom: 2px solid #999; padding: 5px 6px; }
  .ts-table tbody td { padding: 5px 6px; border-bottom: 1px solid #ddd; vertical-align: top; color: #222 !important; background: #fff !important; }
  .ts-table tbody tr { break-inside: avoid; }
  .ts-table tbody tr:nth-child(even) td { background: #fafafa !important; }
  .ts-account-name { font-size: 10px; color: #111 !important; }
  .ts-account-id { font-size: 8px; color: #888 !important; }
  .ts-account-bi { font-size: 8.5px; color: #666 !important; word-wrap: break-word; }
  .ts-bi-sled { color: #555 !important; }
  .ts-flag-level { background: #f0f0f0 !important; color: #333 !important; border: 1px solid #999 !important; }
  .ts-netnew-title { color: #111 !important; }
  .ts-owner { font-size: 10px; color: #333 !important; }
  .ts-score { font-size: 10px; color: #111 !important; }

  .ts-tags { max-width: 100px; min-width: 60px; }
  .ts-chip-tag { background: #f0f0f0 !important; color: #555 !important; font-size: 8px; padding: 0 3px; border: 1px solid #bbb !important; }
  .ts-no-tags { color: #999 !important; }
  .ts-event-desc { color: #333 !important; border-top-color: #ccc !important; font-size: 10px; }
  .ts-explanation { max-width: none; font-size: 9.5px; }
  .ts-explain-refined, .ts-explain-text { font-size: 9.5px; color: #222 !important; }
  .ts-explain-refined p { color: #222 !important; }
  .ts-explain-refined strong { color: #111 !important; }
  .ts-re-hook { color: #111 !important; font-weight: 600; }

  /* Print: bullets stay tight and break-friendly. The refined-rationale
     toggle disappears in print since we already collapse it by default
     on screen — the deterministic bullets are the print payload. */
  .ts-reason-bullets { margin: 4px 0 0; font-size: 9.5px; color: #222 !important; }
  .ts-reason-bullets li { color: #222 !important; }
  .ts-reason-bullets li::before { color: #888 !important; }
  .ts-reason-cite {
    background: #eef2ff !important;
    color: #4338ca !important;
    border: 1px solid #c7d2fe !important;
  }
  .ts-refined-toggle, .ts-section-tail-toggle { display: none !important; }
  .ts-section-tail.ts-section-tail-collapsed > * { display: flex !important; }

  .ts-flag { font-size: 9px; }
  .ts-flag-new { border: 1px solid #8b5cf6 !important; background: #ede9fe !important; color: #5b21b6 !important; }
  .ts-flag-churned { border: 1px solid #ef4444 !important; background: #fee2e2 !important; color: #991b1b !important; }

  .ts-synth-badge { background: #eee !important; color: #555 !important; font-size: 9px; }
  .ts-synth-indicator { display: none !important; }

  .ts-session-card { break-inside: avoid; border: 1px solid #bbb !important; background: #f8f9fa !important; }
  .ts-session-title { color: #111 !important; }
  .ts-session-target-row { color: #333 !important; }
  .ts-session-acct { color: #111 !important; }
  .ts-session-reason { color: #555 !important; }

  a { color: #111 !important; text-decoration: none !important; }
  svg { color: #555 !important; stroke: #555 !important; }
}

/* ── Research Frame ─────────────────────────────────────────────────────── */

.ts-research-frame {
  border-left: 3px solid var(--accent-light, #3b82f6);
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-card));
}

.ts-research-collapsed {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ts-research-preview {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  max-height: 72px;
  overflow: hidden;
  white-space: pre-wrap;
}

.ts-research-expand-btn {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  padding: 4px 10px;
}
.ts-research-expand-btn:hover { background: var(--bg-secondary); }

.ts-research-full {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ts-research-content {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-wrap;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
}

.ts-research-footer {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--text-muted);
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.ts-research-stale {
  font-size: 11px;
  color: var(--warning, #f59e0b);
  margin-left: 8px;
}

.ts-research-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 8px;
  background: var(--bg-secondary);
  border-radius: 99px;
  padding: 1px 8px;
}

.ts-research-missing {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-radius: var(--radius, 6px);
  padding: 10px 16px;
  border: 1px dashed var(--border);
}
.ts-research-missing a { color: var(--accent); }

/* ── Research flair badge on accounts ──────────────────────────────────── */

.ts-research-flair {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 99px;
  padding: 1px 7px;
}
.ts-research-flair::before {
  content: '🔬';
  font-size: 10px;
}

/* ── Draft Email button inline with explanation ─────────────────────────── */

.ts-email-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 11px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ts-email-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.ts-email-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Email Panel ─────────────────────────────────────────────────────────── */

/* ── Sales Kit Modal ──────────────────────────────────────── */
.ts-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ts-modal {
  background: var(--bg-card, #1a2234);
  border: 1px solid var(--border, #2d3748);
  border-radius: var(--radius, 12px);
  width: 100%;
  max-width: 860px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.ts-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border, #2d3748);
  flex-shrink: 0;
}
.ts-modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #f9fafb);
}
.ts-modal-title i { color: #10b981; }
.ts-modal-close {
  background: none;
  border: none;
  color: var(--text-muted, #6b7280);
  font-size: 24px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
}
.ts-modal-close:hover { color: var(--text-primary, #f9fafb); }
.ts-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.ts-email-panel {
  border-left: 3px solid #10b981;
  background: color-mix(in srgb, #10b981 4%, var(--bg-card));
}

.ts-email-model-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.ts-email-loading {
  font-size: 13px;
  color: var(--text-muted);
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ts-email-error {
  font-size: 13px;
  color: var(--danger, #ef4444);
  padding: 8px 0;
}

.ts-email-compose {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.ts-email-subject {
  font-size: 13px;
  color: var(--text-primary);
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius, 6px);
  border: 1px solid var(--border);
}

.ts-email-label {
  color: var(--text-muted);
  font-weight: 400;
  margin-right: 6px;
}

.ts-email-body {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
  white-space: pre-wrap;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius, 6px);
  border: 1px solid var(--border);
  max-height: 320px;
  overflow-y: auto;
}

.ts-email-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Sales Kit sections ── */

.ts-kit-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* Quotes / Sizzle */
.ts-kit-quotes {
  margin-bottom: 20px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(239,68,68,.04));
  border: 1px solid rgba(245,158,11,.2);
  border-radius: 10px;
}
.ts-kit-quotes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.ts-kit-quote {
  font-size: 13px;
  font-weight: 600;
  font-style: italic;
  color: var(--text-primary);
  padding: 10px 14px;
  background: var(--bg-secondary);
  border-left: 3px solid var(--warning, #f59e0b);
  border-radius: 0 8px 8px 0;
  line-height: 1.5;
}

/* Intel bullets */
.ts-kit-intel {
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(99,102,241,.06);
  border: 1px solid rgba(99,102,241,.15);
  border-radius: 10px;
}
.ts-kit-bullet-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.ts-kit-bullet-list li {
  margin-bottom: 4px;
}

/* Market context + vendor landscape duo */
.ts-kit-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 768px) { .ts-kit-duo { grid-template-columns: 1fr; } }
.ts-kit-duo-left,
.ts-kit-duo-right {
  padding: 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* Talking points */
.ts-kit-tps {
  padding: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ts-kit-tp-list li {
  color: var(--text-primary);
  font-weight: 500;
}

/* ═══════════════ MARKET INTELLIGENCE (SYNTHESIZED) ═══════════════ */

.ts-mi-frame {
  border: 1px solid rgba(99, 102, 241, 0.2);
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.04) 0%, transparent 100%);
  border-radius: 14px;
  padding: 24px;
}

.ts-mi-badge {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Hero: headline + strategic brief */
.ts-mi-hero {
  margin-bottom: 24px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 12px;
  border-left: 4px solid #6366f1;
}
.ts-mi-headline {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 12px;
}
.ts-mi-brief {
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-secondary);
}

/* Opportunity Map */
.ts-mi-opp-section {
  margin-bottom: 24px;
}
.ts-mi-sub-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ts-mi-sub-title i {
  color: var(--accent, #3b82f6);
  font-size: 14px;
}
.ts-mi-opp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.ts-mi-opp-card {
  padding: 16px 18px;
  background: var(--bg-secondary, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
}
.ts-mi-opp-card:hover {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.08);
}
.ts-mi-opp-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #3b82f6);
  border-radius: 10px 10px 0 0;
}
.ts-mi-opp-angle {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent, #3b82f6);
  margin-bottom: 8px;
}
.ts-mi-opp-detail {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.ts-mi-opp-prospects {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ts-mi-opp-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-right: 4px;
}
.ts-mi-prospect-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.1);
  color: var(--accent, #3b82f6);
  border: 1px solid rgba(59, 130, 246, 0.2);
  white-space: nowrap;
}

/* Vendor Landscape */
.ts-mi-vendor {
  margin-bottom: 24px;
  padding: 16px 20px;
  background: var(--bg-secondary, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 10px;
}
.ts-mi-vendor-text {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* Raw Research Toggle */
.ts-mi-raw-toggle {
  margin-bottom: 14px;
}
.ts-mi-raw-btn {
  background: none;
  border: 1px solid var(--border, #334155);
  color: var(--text-muted);
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s, border-color 0.15s;
}
.ts-mi-raw-btn:hover {
  color: var(--text-secondary);
  border-color: var(--accent, #3b82f6);
}

/* Raw Research Grid (shared between synthesized toggle and raw-only view) */
.ts-mi-raw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.ts-mi-raw-card {
  padding: 16px;
  background: var(--bg-secondary, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 8px;
}
.ts-mi-raw-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent, #3b82f6);
  margin-bottom: 8px;
}
.ts-mi-raw-content {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-line;
}

/* Synthesis prompt banner (raw-only mode) */
.ts-mi-synth-prompt {
  padding: 12px 18px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.05));
  border: 1px dashed rgba(99, 102, 241, 0.3);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.ts-mi-synth-prompt i {
  color: #8b5cf6;
  margin-right: 6px;
}

.ts-research-footer {
  margin-top: 12px;
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--text-muted);
}

@media print {
  .ts-email-btn { display: none !important; }
  .ts-modal-overlay { display: none !important; }
  .ts-mi-frame { break-inside: avoid; }
  .ts-mi-raw-toggle { display: none; }
  .ts-mi-raw-grid { display: none; }
}

/* ── Sales Kit modal: themable action buttons ──────────────────────────────
   The kit modal previously hard-coded an indigo gradient for the "Send via
   Outflow" CTA, which clashed in pastel mode. We pull the gradient onto
   the .ts-kit-send-btn class so theme overrides below can swap it. */
.ts-kit-send-btn {
  background: linear-gradient(135deg, #6366f1, #818cf8) !important;
  border: none !important;
  color: #fff !important;
}
.ts-kit-send-btn:hover { filter: brightness(1.05); }

.ts-kit-task-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ts-kit-task-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

/* ── Open Opps row: hover affordance for the click-to-open behavior ──────── */
.ts-open-opp-row.is-clickable { transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease; }
.ts-open-opp-row.is-clickable:hover {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
}
.ts-open-opp-row.is-clickable:active { transform: translateY(1px); }

/* ── Pastel mode polish ─────────────────────────────────────────────────────
   The kit modal renders best on pastel when we tighten the surfaces so
   text reads against a clearly-differentiated background, and recolor the
   indigo CTA + inline send panel to match the pink palette. */
.pastel-mode .ts-modal {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: 0 24px 80px rgba(157, 23, 77, 0.18);
}
.pastel-mode .ts-modal-overlay { background: rgba(157, 23, 77, 0.35); }
.pastel-mode .ts-modal-header {
  background: linear-gradient(180deg, #fdf2f8, #ffffff);
}
.pastel-mode .ts-modal-title { color: #831843; }
.pastel-mode .ts-modal-title i { color: #db2777; }
.pastel-mode .ts-modal-close { color: #9d174d; }
.pastel-mode .ts-modal-close:hover { color: #831843; }

.pastel-mode .ts-email-subject,
.pastel-mode .ts-email-body {
  background: #fdf2f8;
  color: #831843;
  border-color: #fbcfe8;
}
.pastel-mode .ts-email-subject strong { color: #831843; }
.pastel-mode .ts-email-label { color: #9d174d; }

.pastel-mode .ts-kit-section-label {
  color: #9d174d;
}

/* Pastel: kit action buttons. Recolor "Send via Outflow" and "Save as Task"
   onto the rose/pink palette so the modal feels native. */
.pastel-mode .ts-kit-send-btn {
  background: linear-gradient(135deg, #db2777, #f472b6) !important;
  color: #fff !important;
}
.pastel-mode .ts-kit-task-btn {
  background: #fff;
  color: #831843;
  border: 1px solid #fbcfe8;
}
.pastel-mode .ts-kit-task-btn:hover {
  background: #fdf2f8;
  border-color: #f9a8d4;
}

/* Pastel: inline "Send This Email" form — replace indigo wash with rose. */
.pastel-mode .ts-modal [style*="background:rgba(99,102,241,.06)"] {
  background: rgba(244, 114, 182, 0.08) !important;
  border-color: rgba(244, 114, 182, 0.32) !important;
}
.pastel-mode .ts-modal [style*="color:#818cf8"] { color: #db2777 !important; }

/* Pastel: the elevator pitch warning-tinted card needs more contrast. */
.pastel-mode .ts-modal [style*="rgba(245,158,11,.08)"] {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(234, 179, 8, 0.06)) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

/* Pastel: open opp row hover state */
.pastel-mode .ts-open-opp-row.is-clickable:hover {
  background: rgba(34, 197, 94, 0.16) !important;
  border-color: rgba(22, 163, 74, 0.45) !important;
}

/* Pastel: synth prompt banner uses indigo wash → pink */
.pastel-mode .ts-mi-synth-prompt {
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.1), rgba(219, 39, 119, 0.05));
  border-color: rgba(219, 39, 119, 0.3);
  color: #831843;
}
.pastel-mode .ts-mi-synth-prompt i { color: #db2777; }