/* === REDESIGN v2 — Sprint 01 slot ====================================
 * Add ONLY class rules here (.pf-*, .scan-*, .widget-*, .dash-*, etc).
 *
 * Do NOT add :root { ... } or [data-theme="dark"] { ... } blocks —
 *   those live in tokens/. Adding them here would shadow style.css's
 *   legacy :root and break the pixel-perfect cascade contract that
 *   Sprint 01 establishes.
 *
 * Do NOT redefine token names that exist in style.css's :root.
 *
 * Sprint 06 is where Paleta A activates — by deleting style.css's
 *   :root + [data-theme="dark"] blocks, NOT by overriding here.
 *
 * Filled in Sprints 02-04 with the master-detail layout, widgets,
 * and dashboard refresh rules.
 * ==================================================================== */

/* ── Sprint 02 append — §1 Primitives ─────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   §1 · PRIMITIVES
   Re-exports of atoms.jsx (Pill, Btn, Kicker, KV, Navbar, etc.)
   Preserves the .pf- prefix so redesign + legacy can coexist
   during Sprints 01-02.
   ═══════════════════════════════════════════════════════════ */

/* ── Surface root ─────────────────────────────────────────── */
.pf {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
.pf * { box-sizing: border-box; }

/* ── Navbar chrome (base.html) ────────────────────────────── */
.pf-nav {
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.pf-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--text);
  text-decoration: none;
}
.pf-nav-brand .logo {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--accent), var(--accent-hover));
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--accent-border);
  position: relative;
}
.pf-nav-brand .logo::before,
.pf-nav-brand .logo::after {
  content: ""; position: absolute; background: var(--surface);
}
.pf-nav-brand .logo::before { top: 50%; left: -4px; right: -4px; height: 1px; }
.pf-nav-brand .logo::after  { left: 50%; top: -4px; bottom: -4px; width: 1px; }
.pf-nav-links {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.pf-nav-links a {
  color: inherit;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.pf-nav-links a.active { color: var(--text); border-bottom-color: var(--accent); }
.pf-nav-right { display: flex; gap: var(--space-2); align-items: center; }

@media (max-width: 768px) {
  .pf-nav { height: 52px; padding: 0 var(--space-3); }
  .pf-nav-links { display: none; }
  .pf-nav-brand span:not(.logo) { display: none; }
}

/* ── Icon button ──────────────────────────────────────────── */
.pf-iconbtn {
  width: 32px; height: 32px;
  border: 1px solid var(--border-visible);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-sm);
  cursor: pointer;
  font-family: ui-monospace, monospace;
  line-height: 1;
  transition: background 0.12s, border-color 0.12s;
}
.pf-iconbtn:hover { background: var(--surface-hover); border-color: var(--border-visible); }
.pf-iconbtn:focus-visible,
.pf-btn:focus-visible,
.dash-filters .segmented .seg:focus-visible {
  outline: 2px solid var(--accent-border);
  outline-offset: 2px;
}

/* ── Buttons ──────────────────────────────────────────────── */
.pf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-visible);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.pf-btn:hover { background: var(--surface-hover); }
.pf-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.pf-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.pf-btn.ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.pf-btn.ghost:hover { background: var(--surface-hover); color: var(--text); }
.pf-btn.sm { padding: 5px 10px; font-size: var(--text-xs); }
.pf-btn.lg { padding: 10px 16px; font-size: var(--text-md); }
.pf-btn .pf-btn-icon {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  opacity: 0.8;
  line-height: 1;
}

/* ── Pills / Badges ───────────────────────────────────────── */
.pf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-visible);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
}
.pf-pill.accent  { background: var(--accent-muted); color: var(--accent); border-color: var(--accent-border); }
.pf-pill.gold    { background: var(--gold-muted); color: var(--gold); border-color: rgba(180, 83, 9, 0.25); }
.pf-pill.success { background: var(--success-bg); color: var(--success); border-color: rgba(4, 120, 87, 0.25); }
.pf-pill.warning { background: var(--warning-bg); color: var(--warning); border-color: rgba(180, 83, 9, 0.25); }
.pf-pill.error   { background: var(--error-bg); color: var(--error); border-color: rgba(185, 28, 28, 0.25); }
.pf-pill.info    { background: var(--info-bg); color: var(--info); border-color: rgba(29, 78, 216, 0.25); }
.pf-pill.nowrap  { white-space: nowrap; flex-shrink: 0; }
.pf-pill .dot    { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Sprint 15 — dashboard taxonomy. Status + opportunity-level pills.
   Status-specific tones reuse the success/warning/error variants but
   stay self-contained so future status names can extend the family
   without leaking through .accent/.gold/etc. */
.pf-pill.status-completed { background: var(--success-bg); color: var(--success); border-color: rgba(4, 120, 87, 0.25); }
.pf-pill.status-running   { background: var(--info-bg);    color: var(--info);    border-color: rgba(29, 78, 216, 0.25); }
.pf-pill.status-failed    { background: var(--error-bg);   color: var(--error);   border-color: rgba(185, 28, 28, 0.25); }
.pf-pill.status-running .dot { animation: pf-pulse 1.4s ease-in-out infinite; }
@keyframes pf-pulse { 50% { opacity: 0.4; } }
/* Opportunity-level tones — HIGH = error red, MED = gold amber, LOW = neutral. */
.pf-pill.opp-high { background: var(--error-bg);   color: var(--error);   border-color: rgba(185, 28, 28, 0.25); }
.pf-pill.opp-med  { background: var(--gold-muted); color: var(--gold);    border-color: rgba(180, 83, 9, 0.25); }
.pf-pill.opp-low  { background: var(--surface);    color: var(--text-tertiary); }
.pf-pill.opp-empty {
  background: var(--bg);
  color: var(--text-secondary);
  border-style: dashed;
}
/* Tiny customer badge that sits next to the opportunity pill — keeps the
   "is this an existing account?" cue visible without consuming a column. */
.opp-cust {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  height: 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent-border);
  background: var(--accent-muted);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-left: 6px;
}
.opportunity-cell {
  display: inline-flex;
  align-items: center;
}

/* ── Cards ────────────────────────────────────────────────── */
.pf-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.pf-card.compact { padding: var(--space-4); }
.pf-card.flush   { padding: 0; }
.pf-card h3,
.pf-card .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}

/* ── Kicker / label ───────────────────────────────────────── */
.pf-kicker {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.pf-kicker.accent { color: var(--accent); }

/* ── Key/Value row ────────────────────────────────────────── */
.pf-kv {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 6px 0;
  font-size: var(--text-sm);
  border-bottom: 1px dashed var(--border);
}
.pf-kv:last-child { border-bottom: 0; }
.pf-kv .k { color: var(--text-secondary); }
.pf-kv .v {
  color: var(--text);
  font-weight: 500;
  text-align: right;
}
.pf-kv .v.mono { font-family: var(--font-mono); font-size: var(--text-xs); }

/* ── Bar (score indicator) ────────────────────────────────── */
.pf-bar {
  height: 4px;
  width: 100%;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.pf-bar > i {
  display: block;
  height: 100%;
  background: var(--accent);
}
.pf-bar.tone-gold    > i { background: var(--gold); }
.pf-bar.tone-success > i { background: var(--success); }
.pf-bar.tone-warning > i { background: var(--warning); }
.pf-bar.tone-error   > i { background: var(--error); }



/* ── Sprint 02 append — §2 Layout chrome ─────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   §2 · LAYOUT CHROME FOR /scan/{id}
   ═══════════════════════════════════════════════════════════ */

/* ── Command rail (breadcrumb + target + actions) ─────────── */
.scan-rail {
  padding: 14px var(--space-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.scan-rail .crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}
.scan-rail .crumbs a {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
}
.scan-rail .crumbs .sep {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.scan-rail .crumbs .target {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text);
}
.scan-rail .crumbs .meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.scan-rail .action-toolbar {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.scan-rail .action-toolbar .divider {
  width: 1px;
  background: var(--border);
  align-self: stretch;
  margin: 4px;
}

@media (max-width: 1024px) {
  .scan-rail .action-toolbar .pf-btn .label { display: none; }
  .scan-rail .action-toolbar .pf-btn.primary .label { display: inline; }
}
@media (max-width: 768px) {
  /* Rail collapses — see §3 mobile tab bar + §7 mobile action bar */
  .scan-rail { display: none; }
}

/* ── Banner row ───────────────────────────────────────────── */
.scan-banner {
  padding: 8px var(--space-5);
  background: var(--warning-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--text-sm);
}
.scan-banner .msg { color: var(--text); font-weight: 500; }
.scan-banner .sub { color: var(--text-secondary); }
.scan-banner .grow { flex: 1; }
.scan-banner a {
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
}

@media (max-width: 768px) {
  .scan-banner { font-size: var(--text-xs); padding: 6px var(--space-3); }
  .scan-banner .sub { display: none; }
}

/* ── Tab bar ──────────────────────────────────────────────── */
.scan-tabs {
  padding: 0 var(--space-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  gap: var(--space-5);
}
.scan-tabs .tab {
  padding: 12px 4px;
  border-bottom: 2px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  text-decoration: none;
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font-family: inherit;
}
.scan-tabs .tab .k {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-secondary);
}
.scan-tabs .tab .sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.scan-tabs .tab.active { border-bottom-color: var(--accent); }
.scan-tabs .tab.active .k { color: var(--text); }

@media (max-width: 768px) {
  .scan-tabs {
    padding: 0;
    gap: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .scan-tabs .tab {
    padding: 12px 0;
    text-align: center;
    align-items: center;
  }
  .scan-tabs .tab .k { font-size: var(--text-sm); }
  .scan-tabs .tab .sub { display: none; }
}

/* ── Master-detail body (desktop) ─────────────────────────── */
.scan-body {
  flex: 1;
  display: grid;
  grid-template-columns: 340px 1fr 320px;
  min-height: 0;
}
.scan-body > .left-rail,
.scan-body > .center,
.scan-body > .right-rail {
  overflow-y: auto;
  min-height: 0;
}
.scan-body > .left-rail {
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: var(--space-5);
}
.scan-body > .center {
  background: var(--bg);
  padding: var(--space-5);
}
.scan-body > .center .inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* Sprint 23a — bumped from 780px because the rails grew (left
     for the TOC + module status, right for the evidence peek), so
     the original "reading width" only matters for the raw report
     in the Proof tab. Widget grids look better with more breathing
     room and the page no longer leaves big hollow gutters at 1920+. */
  max-width: 1080px;
  margin: 0 auto;
}
.scan-body > .right-rail {
  border-left: 1px solid var(--border);
  background: var(--surface);
  padding: 18px;
}

/* Sprint 23a — keep the wide center sane on the typical laptop
   range. 1280-1600 lets center grow up to 1080 cap; below 1280
   we shrink rails so the center keeps reasonable width. */
@media (max-width: 1280px) {
  .scan-body { grid-template-columns: 280px 1fr 280px; }
  .scan-body > .center .inner { max-width: 880px; }
}
@media (max-width: 1100px) {
  .scan-body { grid-template-columns: 280px 1fr; }
  .scan-body > .right-rail { display: none; }
}
@media (max-width: 768px) {
  .scan-body { display: block; }
  .scan-body > .left-rail,
  .scan-body > .right-rail { display: none; }
  /* Sprint 25e — was 84px bottom for the sticky action bar; now
     the bar is gone, restore normal padding so mobile content
     doesn't have a phantom gap at the bottom. */
  .scan-body > .center { padding: var(--space-3); }
  .scan-body > .center .inner { gap: var(--space-3); }
}

/* ── Left rail sub-components ─────────────────────────────── */
.rail-opportunity-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 4px 0;
  line-height: var(--lh-tight);
}
/* Sprint 07 — pills row under opportunity title (urgency + plan version). */
.rail-opportunity-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--space-2) 0 var(--space-3);
}
.rail-opportunity-pills:empty { display: none; }
.rail-seller-note {
  padding: var(--space-3);
  background: var(--accent-muted);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  margin: var(--space-3) 0 18px;
}
.rail-seller-note .pf-kicker {
  color: var(--accent);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.rail-seller-note .seller-note-icon {
  font-size: var(--text-sm);
  filter: saturate(0.85);
}
.rail-seller-note .seller-note-flag {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  font-weight: 500;
}
.rail-seller-note .body {
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--text);
}
.rail-toc { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.rail-toc .item {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-left: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
}
.rail-toc .item.active {
  color: var(--text);
  background: var(--accent-muted);
  border-left-color: var(--accent);
}
.rail-module-status {
  margin-top: var(--space-5);
  padding: var(--space-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.rail-module-status .row {
  display: flex;
  gap: var(--space-3);
  margin-top: 6px;
  font-size: var(--text-sm);
  align-items: center;
}
.rail-module-status .ok { color: var(--success); font-weight: 600; }
.rail-module-status .deg { color: var(--warning); font-weight: 600; }
.rail-module-status .name { color: var(--text-tertiary); }
.rail-module-status .retry { margin-left: auto; font-size: var(--text-sm); color: var(--accent); text-decoration: none; }

/* Sprint 07 — compact 1-line module status. */
.rail-module-status.compact .rail-mod-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  margin-top: 4px;
  font-size: var(--text-sm);
}
.rail-module-status.compact .rail-mod-line .ok { color: var(--success); font-weight: 600; }
.rail-module-status.compact .rail-mod-line .deg { color: var(--warning); font-weight: 600; }
.rail-module-status.compact .rail-mod-line .failing {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  flex-basis: 100%;
}
.rail-module-status.compact .rail-mod-line .retry {
  margin-left: auto;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.rail-module-status.compact .rail-mod-line .retry:hover { text-decoration: underline; }



/* ── Sprint 02 append — §4 Report-MD restyle ─────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   §4 · REPORT-MD RESTYLE (NOT replace)
   Overrides on top of the existing marked.js output.
   ═══════════════════════════════════════════════════════════ */
.report-md {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.report-md h1, .report-md h2, .report-md h3 {
  font-family: var(--font-display);
  color: var(--text);
  letter-spacing: -0.01em;
}
.report-md h1 { font-size: var(--text-3xl); margin: var(--space-6) 0 var(--space-3); }
.report-md h2 { font-size: var(--text-2xl); margin: var(--space-6) 0 var(--space-3); }
.report-md h3 { font-size: var(--text-lg);  margin: var(--space-5) 0 var(--space-2); }
.report-md p  { margin: 0 0 var(--space-3); }
.report-md strong { color: var(--text); font-weight: 600; }
.report-md code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--accent-muted);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 4px;
}
.report-md blockquote {
  margin: 14px 0 6px;
  padding: 10px 14px;
  background: var(--accent-muted);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text);
}
.report-md blockquote p:first-child {
  color: var(--accent);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.report-md table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; }
.report-md th, .report-md td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.report-md th {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: var(--bg);
}

@media (max-width: 640px) {
  /* Prod uses [data-th] attrs for responsive stacking — keep that contract. */
  .report-md table, .report-md thead, .report-md tbody,
  .report-md tr, .report-md th, .report-md td { display: block; }
  .report-md thead { display: none; }
  .report-md tr {
    margin-bottom: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-2);
  }
  .report-md td {
    border: 0;
    padding: 4px 0;
  }
  .report-md td::before {
    content: attr(data-th);
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
}



/* ── Sprint 02 append — §6 Right-rail peek ─────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   §6 · RIGHT-RAIL EVIDENCE PEEK
   ═══════════════════════════════════════════════════════════ */
.evidence-peek .head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.evidence-peek .head a {
  font-size: var(--text-xs);
  color: var(--accent);
  text-decoration: none;
}
.evidence-peek .intro {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.evidence-peek .pf-card.compact { margin-bottom: var(--space-3); padding: var(--space-3); }
.evidence-peek .subd-totals {
  margin-top: 6px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.evidence-peek .subd-totals .c-s { color: var(--success); font-weight: 500; }
.evidence-peek .subd-totals .c-w { color: var(--warning); font-weight: 500; }
.evidence-peek .subd-totals .c-e { color: var(--error); font-weight: 500; }
.evidence-peek .subd-totals .c-mute { color: var(--text-tertiary); }
.evidence-peek .footnote {
  margin-top: 18px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-visible);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.evidence-peek .footnote b { color: var(--text-secondary); }



/* ── Sprint 02 append — §7 Mobile action bar ─────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   §7 · MOBILE ACTION BAR (sticky bottom on /scan/{id})
   ═══════════════════════════════════════════════════════════ */
/* Sprint 26e — soft fade on tab switch so jumping from Account to
   Conversation (e.g. via "Open playbook ▸") doesn't feel abrupt. */
@keyframes pf-panel-fade-in {
    from { opacity: 0.4; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pf-panel-fade-in { animation: pf-panel-fade-in 220ms var(--ease-out); }

/* ──────────────────────────────────────────────────────────────────
   Sprint 26d — Toolbar Export dropdown + Outreach generator card.
   Replaces the floating action bar (#floating-actions) which used
   to host markdown download / outreach selectors.
   ────────────────────────────────────────────────────────────────── */

.export-menu { position: relative; display: inline-flex; }
.export-menu .export-caret {
    margin-left: 4px;
    font-size: 10px;
    color: var(--text-tertiary);
}
.export-menu-list {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;
    min-width: 240px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,0.18));
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.export-menu-list[hidden] { display: none; }
.export-menu-list button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
    width: 100%;
}
.export-menu-list button:hover {
    background: var(--surface-hover, var(--accent-muted));
}
.export-menu-list button .ico {
    flex-shrink: 0;
    font-size: 14px;
    width: 18px;
    text-align: center;
}

/* Outreach generator card */
.outreach-generator {
    padding: var(--space-5);
    margin-bottom: var(--space-3);
}
.outreach-generator > .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.outreach-generator > .head h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
}
.outreach-gen-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.outreach-gen-select {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-family: inherit;
    font-size: var(--text-xs);
    color: var(--text);
    cursor: pointer;
}
.outreach-gen-select:hover { border-color: var(--accent-border); }
.outreach-gen-hint {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin: 0 0 var(--space-3);
}
.outreach-gen-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.outreach-gen-actions .btn { font-size: var(--text-sm); }
@media (max-width: 768px) {
    .outreach-generator > .head {
        flex-direction: column;
        align-items: flex-start;
    }
    .outreach-gen-actions .btn { flex: 1; min-width: calc(50% - 4px); }
}

/* Hide the legacy FAB completely; it lives in style.css and may be
   referenced by other code paths. !important guards inline display:flex
   that the JS used to set on visible. */
#floating-actions, .floating-actions, .fab-backdrop { display: none !important; }

/* ──────────────────────────────────────────────────────────────────
   Sprint 26c — Full report slide-over. Lives at body level so any
   tab can pop it open. Content cloned from #report-content (the
   already-rendered Markdown), so no re-render cost.
   ────────────────────────────────────────────────────────────────── */
.full-report-panel {
    position: fixed;
    inset: 0;
    /* navbar is z-index: 100; this panel must cover it. */
    z-index: 1100;
    pointer-events: none;
    visibility: hidden;
}
.full-report-panel[data-open="true"] {
    pointer-events: auto;
    visibility: visible;
}
.full-report-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 23, 0.55);
    opacity: 0;
    transition: opacity 220ms var(--ease-out);
}
.full-report-panel[data-open="true"] .full-report-backdrop { opacity: 1; }
.full-report-card {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 720px;
    background: var(--bg);
    box-shadow: -4px 0 32px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform 240ms var(--ease-out);
    display: flex;
    flex-direction: column;
}
.full-report-panel[data-open="true"] .full-report-card { transform: translateX(0); }
.full-report-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.full-report-head .full-report-sub {
    margin: 2px 0 0;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}
.full-report-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
}
@media (max-width: 768px) {
    .full-report-card { max-width: 100%; }
    .full-report-head { padding: var(--space-3) var(--space-4); }
    .full-report-body { padding: var(--space-4); }
}

/* Sprint 25e — operator preference: kill the sticky bottom bar.
   Original design had it but the operator wants all actions reachable
   via the top hamburger drawer. Hide on every viewport. */
.scan-action-bar { display: none !important; }

/* Mobile-only "Actions" block inside the rail-as-drawer. On desktop
   the rail's action toolbar at the top of the page already covers
   this, so we hide the mobile copy. */
.rail-actions-mobile { display: none; }
@media (max-width: 768px) {
    .rail-actions-mobile { display: block; }
    .rail-actions-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .rail-actions-list .rail-action {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text);
        font-family: inherit;
        font-size: var(--text-sm);
        text-align: left;
        cursor: pointer;
        transition: background var(--duration) var(--ease-out);
    }
    .rail-actions-list .rail-action:hover {
        background: var(--surface-hover, var(--accent-muted));
    }
    .rail-actions-list .rail-action.primary {
        background: var(--accent);
        color: var(--text-on-accent, #fff);
        border-color: var(--accent);
    }
    .rail-actions-list .rail-action.primary:hover {
        background: var(--accent-hover, var(--accent));
    }
    .rail-actions-list .rail-action .ico {
        flex-shrink: 0;
        font-size: 14px;
        width: 18px;
        text-align: center;
    }
}

@media (max-width: 768px) {
  .scan-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    /* display gated by !important above; left as grid for fallback. */
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--space-2);
    z-index: 11;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.06);
  }
  .scan-action-bar .pf-iconbtn { width: 38px; height: 38px; }

  /* Sprint 11 — mobile action-bar overflow menu (Rescan / Export / Copy / Methodology) */
  .scan-action-more { position: relative; }
  .scan-action-more-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,0.18));
    padding: 6px;
    display: none;
    z-index: 12;
  }
  .scan-action-more-menu[data-open="true"] { display: block; }
  .scan-action-more-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 0;
    background: none;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-family: inherit;
    cursor: pointer;
    border-radius: var(--radius-sm, 6px);
  }
  .scan-action-more-menu button:hover {
    background: var(--surface-hover, var(--hover));
    color: var(--text);
  }

  /* Sprint 05 mobile polish — hide the legacy FAB on mobile.
     Its functions (rescan, copy, export) are exposed by .scan-action-bar
     above, so showing both creates a stacked-controls overlap at the
     bottom of the viewport. The FAB stays for desktop where it docks
     mid-flow and never collides with the sticky action bar (which is
     hidden ≥769px). */
  #floating-actions, .floating-actions { display: none !important; }

  /* Lift the report content above the sticky action bar so the last
     section isn't hidden behind it. 70px = 49px (bar height) + 21px
     visual breathing room. */
  .scan-result { padding-bottom: 70px; }
  .scan-body { padding-bottom: var(--space-3); }
}



/* ── Sprint 02 append — §8 Mobile snapshot ─────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   §8 · MOBILE SNAPSHOT CARD (pinned opportunity at top of Brief)
   ═══════════════════════════════════════════════════════════ */
.scan-mobile-snapshot { display: none; }

@media (max-width: 768px) {
  .scan-mobile-header {
    padding: 10px var(--space-3);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .scan-mobile-header .mobile-back { color: var(--text-secondary); text-decoration: none; }
  /* Actions pill for the scan view. Text+icon (rather than a bare
     kebab) so SDR users discover it without prior mobile-app context.
     Distinct from navbar ☰ in shape AND label — no double-hamburger
     ambiguity. */
  .scan-mobile-header .scan-actions-toggle {
    margin-left: auto;
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: var(--text-xs);
    gap: 4px;
  }
  .scan-mobile-header .scan-actions-toggle .pf-btn-icon {
    font-size: 16px;
    line-height: 1;
    letter-spacing: -1px;
  }
  .scan-mobile-header .scan-actions-toggle[aria-expanded="true"] {
    background: var(--accent-muted);
    border-color: var(--accent);
    color: var(--text-accent);
  }
  .scan-mobile-header .target {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Sprint 19 — status pill on the right of the mobile header. Reuses
     the same color tones as dashboard status pills (S15). */
  .mobile-scan-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-visible);
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--surface);
    flex-shrink: 0;
  }
  .mobile-scan-status .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
  }
  .mobile-scan-status.status-completed { background: var(--success-bg); color: var(--success); border-color: rgba(4, 120, 87, 0.25); }
  .mobile-scan-status.status-running   { background: var(--info-bg);    color: var(--info);    border-color: rgba(29, 78, 216, 0.25); }
  .mobile-scan-status.status-running .dot { animation: pf-pulse 1.4s ease-in-out infinite; }
  .mobile-scan-status.status-failed    { background: var(--error-bg);   color: var(--error);   border-color: rgba(185, 28, 28, 0.25); }
  .mobile-scan-status:empty { display: none; }

  .scan-mobile-snapshot {
    display: block;
    background: linear-gradient(180deg, var(--accent-muted) 0%, var(--surface) 70px);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-lg);
    padding: 14px;
    margin-bottom: var(--space-3);
  }
  .scan-mobile-snapshot .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .scan-mobile-snapshot .plan {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-top: 4px;
    line-height: 1.2;
  }
  .scan-mobile-snapshot .subline {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 6px;
  }
}
@media (min-width: 769px) {
  .scan-mobile-header { display: none; }
}


/* ── Sprint 02 extras — widget placeholder + legacy block wrappers ─── */
/* Sprint 03 reemplaza los placeholders por widgets reales. Hasta
   entonces, rendereamos un slot dashed/gray para QA visual. */
.widget-placeholder {
    background: var(--surface);
    border: 1px dashed var(--border-visible);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.widget-placeholder .pf-kicker {
    margin-bottom: var(--space-2);
}
.widget-placeholder .placeholder-body {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    font-style: italic;
}
.widget-placeholder.scan-mobile-snapshot {
    display: none;
}
@media (max-width: 768px) {
    .widget-placeholder.scan-mobile-snapshot { display: block; }
}

/* Legacy sales blocks preserved inside Brief tab — wrap them so
   they sit nicely under the widget placeholders without inheriting
   `.center .inner` paddings in a way that breaks. */
.scan-brief-legacy-blocks {
    margin-top: var(--space-5);
}
.scan-brief-legacy-blocks > *:first-child {
    margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════
   §3 · NATIVE WIDGETS  (Sprint 03)
   Each widget is a translation of design-handoff/04-widgets.
   Filled by Prospector.v2.renderWidgets() in additions.js when
   polling completes. Empty containers ship from the template
   and are overwritten with populated HTML on data arrival.
   ═══════════════════════════════════════════════════════════ */

.widget-empty-state {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    font-style: italic;
}

/* ── Target widget ────────────────────────────────────────── */
.widget-target .head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.widget-target .avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent-muted), transparent);
    border: 1px solid var(--accent-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--accent);
    font-size: 18px;
    flex-shrink: 0;
}
.widget-target .identity { flex: 1; min-width: 0; }
.widget-target .identity .row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.widget-target .identity .name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.widget-target .identity .domain {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}
.widget-target .identity .descriptor {
    margin-top: 4px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.widget-target .stats {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}
.widget-target .stats .stat .val {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    margin-top: 2px;
}
.widget-target .stats .stat .val.text {
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: 500;
}
@media (max-width: 768px) {
    .widget-target .stats { grid-template-columns: repeat(3, 1fr); }
    .widget-target .stats .stat-hq { display: none; }
    .widget-target .identity .descriptor { font-size: var(--text-xs); }
    .widget-target .avatar { width: 36px; height: 36px; font-size: 15px; border-radius: var(--radius-sm); }
}

/* ── Protection-stack widget ──────────────────────────────── */
.widget-protection .stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.widget-protection .entry {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}
.widget-protection .entry .name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.widget-protection .entry .name b { font-weight: 600; font-size: var(--text-md); }
.widget-protection .entry .name .cat {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}
.widget-protection .entry .score-bar {
    margin-top: 6px;
    width: 160px;
}
.widget-protection .entry .score-num {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
}
.widget-protection .entry .score-num small {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-weight: 400;
}
.widget-protection .totals {
    margin-top: var(--space-3);
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}
.widget-protection .totals .muted { color: var(--text-secondary); }
.widget-protection .totals .c-success { color: var(--success); font-weight: 600; }
.widget-protection .totals .c-warning { color: var(--warning); font-weight: 600; }
.widget-protection .totals .c-error   { color: var(--error); font-weight: 600; }
@media (max-width: 768px) {
    .widget-protection .entry { grid-template-columns: 1fr; gap: var(--space-2); }
    .widget-protection .entry .score-bar { width: 100%; }
    .widget-protection .totals { flex-direction: column; gap: 4px; align-items: flex-start; }
}

/* ── Opportunity widget ───────────────────────────────────── */
.widget-opportunity {
    background: linear-gradient(180deg, var(--accent-muted) 0%, var(--surface) 80px);
    border-color: var(--accent-border);
}
.widget-opportunity .head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
}
.widget-opportunity .plan-name {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-top: 4px;
}
/* Sprint 16 — plan subtitle: same family, lighter weight + tertiary tone.
   Used inside opportunity widget plan-name, rail title, and mobile snapshot. */
.plan-subtitle {
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}
.rail-opportunity-title .plan-subtitle { font-size: 0.85em; }
.scan-mobile-snapshot .plan .plan-subtitle { font-size: 0.85em; }
.widget-opportunity .rationale {
    margin: 10px 0 16px;
    color: var(--text-secondary);
    font-size: var(--text-md);
    line-height: var(--lh-snug);
}
.widget-opportunity .plays { display: flex; flex-direction: column; gap: var(--space-2); }
.widget-opportunity .play {
    display: grid;
    /* Sprint 26a — 4 cols: tag / name / urgency chip / chev. Urgency
       used to wedge into the chev column and looked cramped. */
    grid-template-columns: 110px 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 10px 12px;
    background: var(--surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
}
.widget-opportunity .play:hover { border-color: var(--accent-border); background: var(--surface-hover); }
.widget-opportunity .play .tag {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--accent-muted);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    line-height: 1.4;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.widget-opportunity .play .name {
    font-size: var(--text-md);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}
.widget-opportunity .play .play-urg {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--surface-hover, var(--accent-muted));
    border: 1px solid var(--border);
    line-height: 1.4;
}
.widget-opportunity .play.play-urgency-high .play-urg {
    color: var(--error); background: var(--error-bg);
    border-color: var(--error-border, rgba(185, 28, 28, 0.25));
}
.widget-opportunity .play.play-urgency-medium .play-urg {
    color: var(--gold, #b45309);
    background: var(--gold-muted, color-mix(in oklab, #f59e0b 12%, transparent));
}
.widget-opportunity .play .chev {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

/* Sprint 25b — <details> form of .play. Summary row keeps the
   original 3-col grid; body slides below with talking points etc.
   Specificity bumped via .widget-opportunity prefix so the legacy
   `.widget-opportunity .play { display: grid }` rule doesn't keep
   .play as a grid (which placed the body alongside the summary). */
.widget-opportunity details.play {
    display: block;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    grid-template-columns: none;
}
details.play > summary {
    list-style: none;
    display: grid;
    grid-template-columns: 110px 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 10px 12px;
    user-select: none;
}
details.play > summary::-webkit-details-marker { display: none; }
details.play .play-urg {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--surface-hover, var(--accent-muted));
    border: 1px solid var(--border);
}
details.play.play-urgency-high .play-urg {
    color: var(--error);
    background: var(--error-bg);
    border-color: var(--error-border, rgba(185, 28, 28, 0.25));
}
details.play.play-urgency-medium .play-urg {
    color: var(--gold, #b45309);
    background: var(--gold-muted, color-mix(in oklab, #f59e0b 12%, transparent));
}
details.play[open] .chev { transform: rotate(90deg); }
details.play .chev {
    transition: transform 200ms var(--ease-out);
    display: inline-block;
}
details.play[open] > summary {
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.play-body {
    padding: var(--space-3) var(--space-4);
    background: var(--bg);
    font-size: var(--text-sm);
}
.play-row {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
}
.play-row:last-child { border-bottom: 0; }
.play-row .play-lbl {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    padding-top: 2px;
}
.play-row .play-val {
    color: var(--text-secondary);
    line-height: 1.55;
}
.play-row .play-ul {
    margin: 0;
    padding-left: 18px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.play-row .play-ul li { margin: 3px 0; }
.play-row .play-val .pf-pill { font-size: 10px; margin: 2px 4px 2px 0; display: inline-block; }

@media (max-width: 768px) {
    details.play > summary {
        grid-template-columns: 1fr auto auto;
        gap: 8px;
    }
    details.play > summary .tag { display: none; }
    .play-row { grid-template-columns: 1fr; gap: 4px; }
    .play-row .play-lbl { padding-top: 0; }
}
.widget-opportunity .play .chev {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}
/* Sprint 26e — explicit "Open playbook ▸" CTA replaces the bare
   chevron so the SDR knows the click jumps tabs (vs <details>
   expand-in-place pattern used everywhere else). On mobile the
   label text collapses to just the arrow to save horizontal space. */
.widget-opportunity .play .play-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--accent);
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--radius-pill, 999px);
    background: var(--accent-muted);
    border: 1px solid transparent;
    transition: background var(--duration) var(--ease-out),
                color var(--duration) var(--ease-out),
                border-color var(--duration) var(--ease-out);
    white-space: nowrap;
}
.widget-opportunity .play:hover .play-cta {
    background: var(--accent);
    color: var(--text-on-accent, #fff);
    border-color: var(--accent);
}
.widget-opportunity .play .play-cta-arrow {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1;
}

@media (max-width: 768px) {
    .widget-opportunity .plan-name { font-size: 19px; line-height: 1.2; }
    .widget-opportunity .rationale { display: none; }
    /* Mobile keeps 4 cols but the tag is hidden, so it's effectively
       name + urgency + CTA. */
    .widget-opportunity .play { grid-template-columns: 1fr auto auto; padding: 8px 10px; }
    .widget-opportunity .play .tag { display: none; }
    .widget-opportunity .play .play-cta-text { display: none; }
    .widget-opportunity .play .play-cta {
        padding: 4px 8px;
        font-size: 13px;
    }
}

/* ── Contacts widget ──────────────────────────────────────── */
.widget-contacts .head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.widget-contacts .count {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}
.widget-contacts .list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.widget-contacts .contact {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.widget-contacts .contact:last-child { border-bottom: 0; }
.widget-contacts .contact .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-muted);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 600;
}
.widget-contacts .info { min-width: 0; }
.widget-contacts .info .name {
    font-size: var(--text-md);
    font-weight: 600;
}
.widget-contacts .info .role {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.widget-contacts .actions { display: flex; gap: 4px; }

/* Sprint 25c — <details>.contact form. Summary uses the same grid
   as the legacy .contact div so click-to-expand stays visually
   identical when collapsed. The .contact-chev rotates on open;
   action icons stop click propagation so opening LinkedIn doesn't
   toggle the row. */
.widget-contacts details.contact {
    display: block;
    padding: 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}
.widget-contacts details.contact:last-child { border-bottom: 0; }
.widget-contacts details.contact > summary {
    list-style: none;
    display: grid;
    grid-template-columns: 32px 1fr auto auto;
    gap: var(--space-3);
    align-items: center;
    padding: 10px 0;
    user-select: none;
}
.widget-contacts details.contact > summary::-webkit-details-marker { display: none; }
.widget-contacts details.contact .contact-chev {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 14px;
    transition: transform 200ms var(--ease-out);
}
.widget-contacts details.contact[open] .contact-chev { transform: rotate(90deg); }
.widget-contacts details.contact .actions .pf-iconbtn {
    /* Avoid the icon button consuming the toggle click on the row. */
    cursor: pointer;
}
.contact-body {
    padding: var(--space-3) var(--space-3) var(--space-4);
    margin-left: 44px; /* avatar gutter so body lines up under name */
    background: var(--bg);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
}
.contact-body .play-row {
    grid-template-columns: 90px minmax(0, 1fr);
}

@media (max-width: 768px) {
    .widget-contacts .contact { grid-template-columns: 28px 1fr auto; gap: 10px; padding: 8px 0; }
    .widget-contacts .contact .avatar { width: 28px; height: 28px; font-size: var(--text-xs); }
    .widget-contacts .actions .pf-iconbtn { width: 26px; height: 26px; }
    .widget-contacts details.contact > summary {
        grid-template-columns: 28px 1fr auto auto;
        gap: 10px;
        padding: 8px 0;
    }
    .widget-contacts details.contact > summary .avatar { width: 28px; height: 28px; font-size: var(--text-xs); }
    .contact-body { margin-left: 0; }
    .contact-body .play-row { grid-template-columns: 1fr; }
}

/* ── Signals widget ───────────────────────────────────────── */
.widget-signals .head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.widget-signals .list { display: flex; flex-direction: column; margin-top: 4px; }
.widget-signals .signal {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
    align-items: flex-start;
}
.widget-signals .signal:last-child { border-bottom: 0; }
/* Sprint 23b — anchor-tag variant: same layout, hover affordance,
   external-link arrow nestled into .source. */
a.signal {
    text-decoration: none;
    color: inherit;
    transition: background var(--duration) var(--ease-out);
}
a.signal:hover { background: var(--surface-hover, var(--accent-muted)); }
a.signal .source .ext {
    display: inline-block;
    margin-left: 4px;
    color: var(--accent);
    font-family: var(--font-display);
    font-weight: 600;
    transform: translateY(-1px);
}
.widget-signals .signal .meta {
    display: flex;
    gap: 6px;
    align-items: center;
}
.widget-signals .signal .date {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}
.widget-signals .signal .title {
    font-size: var(--text-md);
    font-weight: 500;
    margin-top: 4px;
    line-height: 1.35;
}
.widget-signals .signal .source {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: 2px;
    font-family: var(--font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}
.widget-signals .signal .score {
    text-align: right;
}
.widget-signals .signal .score .num {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--accent);
}
.widget-signals .signal .score .label {
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
@media (max-width: 768px) {
    .widget-signals .signal { padding: 8px 0; }
    .widget-signals .signal .title { font-size: var(--text-sm); }
    /* Sprint 23b — source is the affordance for the new link form;
       keep visible but tighter. */
    .widget-signals .signal .source {
        font-size: 10px;
        max-width: 200px;
    }
    .widget-signals .signal .score .label { display: none; }
    .widget-signals .signal .score .num { font-size: var(--text-lg); }
}

/* ── pf-bar tones (used by widget-protection score-bar) ──── */
.pf-bar.tone-success > i { background: var(--success); }
.pf-bar.tone-warning > i { background: var(--warning); }
.pf-bar.tone-error   > i { background: var(--error); }

/* When widget JS populates a card, drop the dashed placeholder
   border the Sprint 02 stub uses. */
.widget-placeholder[data-populated="true"] {
    border-style: solid;
    background: var(--surface);
}

/* ═══════════════════════════════════════════════════════════
   §5 · DASHBOARD  (Sprint 04)
   Command (top) + History (fill) per design-handoff/03-screens
   /dashboard.html. JS filters live in additions.js §4
   (initDashboardFilters).
   ═══════════════════════════════════════════════════════════ */

.dash-command {
    padding: 20px var(--space-6);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.dash-command .inner { max-width: 1100px; margin: 0 auto; }
.dash-command h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-3);
}
/* Sprint 18 — kicker style replaces the loud h2. */
.dash-command .dash-kicker {
    margin: 0 0 10px;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.dash-command .input-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    margin-top: 6px;
}
.dash-command .domain-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--border-visible);
    border-radius: var(--radius-md);
    background: var(--bg);
}
.dash-command .domain-input input {
    flex: 1;
    border: 0;
    background: transparent;
    font-family: var(--font-mono);
    font-size: var(--text-md);
    color: var(--text);
    outline: none;
    min-width: 0;
}
.dash-command .domain-input input::placeholder { color: var(--text-tertiary); }
.dash-command .options {
    margin-top: 10px;
    display: flex;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    flex-wrap: wrap;
}
.dash-command .options label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.dash-command .options .check {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid var(--border-visible);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
}
.dash-command .options .check.on { background: var(--accent); border-color: var(--accent); }

.dash-history {
    padding: 20px var(--space-6);
    background: var(--bg);
}
.dash-history .inner { max-width: 1100px; margin: 0 auto; }
.dash-history h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}

.dash-filters {
    display: grid;
    grid-template-columns: 1fr auto auto auto auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}
.dash-filters .search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.dash-filters .search input {
    flex: 1;
    border: 0;
    background: transparent;
    font-size: var(--text-sm);
    color: var(--text);
    outline: none;
    min-width: 0;
}
.dash-filters .search input::placeholder { color: var(--text-secondary); }
.dash-filters .segmented {
    display: flex;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px;
}
.dash-filters .segmented .seg {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    background: transparent;
    border: 0;
    font-family: inherit;
}
.dash-filters .segmented .seg.on { background: var(--accent); color: #fff; }

.dash-table {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.dash-table .head-row {
    display: grid;
    grid-template-columns: 1fr 130px 130px 130px 110px 40px;
    padding: 10px var(--space-4);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    align-items: center;
}
.dash-table .head-row .align-right { text-align: right; }
.dash-table .row {
    display: grid;
    grid-template-columns: 1fr 130px 130px 130px 110px 40px;
    padding: 12px var(--space-4);
    align-items: center;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
    text-decoration: none;
    color: inherit;
}
.dash-table .row:last-child { border-bottom: 0; }
.dash-table .row:hover { background: var(--surface-hover); }
.dash-table .row .domain {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: var(--space-3);
}
.dash-table .row .owner {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-table .row .scanned {
    text-align: right;
    color: var(--text-secondary);
    font-size: var(--text-xs);
}
.dash-table .row .kebab {
    width: 32px;
    height: 32px;
    margin-left: auto;
}

/* Mobile: replace table with cards + scan pill. */
@media (max-width: 768px) {
    .dash-command { padding: var(--space-3); }
    .dash-command .input-row { grid-template-columns: 1fr; gap: 8px; }
    .dash-command .options { display: none; }

    .dash-history { padding: var(--space-3); }

    .dash-filters { display: none; }
    .dash-filters-mobile {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding: 4px 0 10px;
    }
    .dash-filters-mobile .pf-pill { flex-shrink: 0; cursor: pointer; }
    .dash-filters-mobile .pf-pill.on { background: var(--accent); color: #fff; border-color: var(--accent); }

    .dash-table { display: none; }
    /* Sprint 22e — compact mobile rows. Status loses its label and
       becomes a colored dot; tier pill (MED/HIGH/LOW) hidden so the
       row collapses to a single line whenever the domain fits. The CX
       chip stays — it's the only "this is a customer" cue. Saves
       ~20px per row vs the v1 stacked-badge layout. */
    .dash-cards { display: flex; flex-direction: column; gap: 4px; }
    .dash-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 7px 12px;
        display: grid;
        grid-template-columns: auto 1fr auto auto auto auto;
        column-gap: 8px;
        align-items: center;
        text-decoration: none;
        color: inherit;
        min-height: 40px;
    }
    .dash-card:hover { background: var(--surface-hover); }
    /* Flatten the inner wrapper div + .badges so children participate
       in the parent grid (status dot + domain + CX + date + chev all
       on one row). */
    .dash-card > div:first-child { display: contents; }
    .dash-card .badges { display: contents; }
    .dash-card .domain {
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        font-weight: 500;
        order: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    .dash-card .badges .pf-pill.status-completed,
    .dash-card .badges .pf-pill.status-running,
    .dash-card .badges .pf-pill.status-failed,
    .dash-card .badges .pf-pill.status-queued {
        order: 1;
        font-size: 0;
        padding: 0;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
        border: 0;
    }
    .dash-card .badges .pf-pill .dot { display: none; }
    .dash-card .badges .pf-pill.status-completed { background: var(--success); }
    .dash-card .badges .pf-pill.status-running { background: var(--accent); }
    .dash-card .badges .pf-pill.status-failed { background: var(--error); }
    .dash-card .badges .pf-pill.status-queued { background: var(--warning); }
    /* Tier pill: hide MED/LOW (noise) — HIGH stays as a tiny "!" chip
       so urgent prospects still pop visually in the row. */
    .dash-card .badges .pf-pill.opp-med,
    .dash-card .badges .pf-pill.opp-low { display: none; }
    .dash-card .badges .pf-pill.opp-high {
        order: 3;
        font-size: 9px;
        padding: 1px 6px;
        line-height: 1.4;
    }
    .dash-card .badges .opp-cust { order: 4; }
    .dash-card .badges .when {
        order: 5;
        font-size: 11px;
        color: var(--text-tertiary);
        font-variant-numeric: tabular-nums;
        font-family: var(--font-mono);
        white-space: nowrap;
    }
    .dash-card > span:last-child {
        order: 6;
        font-size: 14px;
    }
}
@media (min-width: 769px) {
    .dash-filters-mobile, .dash-cards { display: none; }
}

/* ── Sprint 09 — top nav user pill + dropdown ────────────────────────────
   User pill: status dot + email, sits at the right of the navbar.
   Click opens the .nav-user-menu dropdown with Password / Admin / Logout. */
.nav-user-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.nav-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px 0 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius-pill, 999px);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--duration) var(--ease-out),
                background var(--duration) var(--ease-out),
                color var(--duration) var(--ease-out);
    max-width: 240px;
}
.nav-user-pill:hover {
    border-color: var(--accent);
    color: var(--text);
    background: var(--surface-hover, var(--surface));
}
.nav-user-pill[aria-expanded="true"] {
    border-color: var(--accent);
    color: var(--text);
}
.nav-user-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--success) 25%, transparent);
}
/* Sprint 12 — avatar with initials replacing the status dot. */
.nav-user-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--accent) 22%, transparent);
    color: var(--accent);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display, var(--font-sans));
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
/* Sprint 21 — talking points widget. Numbered rows with icon + label,
   optional anchor that smooth-scrolls into the report Markdown. */
.widget-talking-points {
    padding: var(--space-5);
}
.widget-talking-points .head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-3);
}
.widget-talking-points .head h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
}
.widget-talking-points .tp-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.widget-talking-points .tp-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    transition: background var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
a.widget-talking-points,
.widget-talking-points a.tp-row:hover {
    background: var(--surface-hover, var(--accent-muted));
    border-color: var(--accent-border);
}
.widget-talking-points .tp-row .num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    width: 22px;
    flex-shrink: 0;
}
.widget-talking-points .tp-row .icon {
    font-size: 16px;
    width: 22px;
    text-align: center;
}
.widget-talking-points .tp-row .label {
    font-size: var(--text-sm);
    font-weight: 500;
    flex: 1;
    min-width: 0;
}
.widget-talking-points .tp-row .chev {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

/* Sprint 20 — single consolidated notice replacing multiple stacked
   banners (refresh + recalc + domain-warning). Expandable on click. */
.scan-consolidated-notice {
    max-width: 800px;
    margin: 0 auto 0.75rem;
    padding: 0.55rem 0.9rem;
    background: var(--warning-bg);
    border: 1px solid var(--warning-border, rgba(180, 83, 9, 0.25));
    border-radius: 8px;
    font-size: var(--text-xs);
    color: var(--warning);
    display: flex;
    align-items: center;
    gap: 8px;
}
.scan-consolidated-notice .icon { font-size: 14px; }
.scan-consolidated-notice .copy { color: var(--text-secondary); flex: 1; min-width: 0; }
.scan-consolidated-notice .copy strong { color: var(--warning); }
.scan-consolidated-notice .link {
    background: transparent;
    border: 0;
    color: var(--warning);
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-xs);
}
.scan-consolidated-notice .link:hover { background: rgba(180, 83, 9, 0.1); }

/* Sprint 12 — quick-action icon button (e.g. New scan) sitting in the nav rail. */
.nav-quick-action {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill, 999px);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all var(--duration) var(--ease-out);
}
.nav-quick-action:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-muted, var(--surface-hover));
}
@media (max-width: 768px) {
    .nav-quick-action {
        width: 100%;
        height: 44px;
        gap: 8px;
        justify-content: flex-start;
        padding: 0 12px;
    }
    .nav-quick-action::after {
        content: 'New scan';
        font-size: var(--text-sm);
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-secondary);
    }
}
.nav-user-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
    font-family: var(--font-mono, ui-monospace, monospace);
    letter-spacing: 0;
    text-transform: none;
}
.nav-user-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,0.18));
    padding: 6px;
    display: none;
    z-index: 200;
}
.nav-user-menu[data-open="true"] { display: block; }
.nav-user-menu a,
.nav-user-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border-radius: var(--radius-sm, 6px);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0;
    text-transform: none;
}
.nav-user-menu a:hover,
.nav-user-menu button:hover {
    background: var(--surface-hover, var(--hover));
    color: var(--text);
}
.nav-user-menu a.active {
    color: var(--text-accent);
    background: var(--accent-muted);
}
.nav-user-menu .admin-link {
    color: var(--gold);
}
.nav-user-menu .admin-link:hover {
    background: var(--gold-muted, var(--surface-hover));
    color: var(--gold);
}

/* Admin-zone navbar — keep gold underline indicator on Admin item inside menu. */
.navbar.admin-zone .nav-user-pill {
    border-color: var(--gold);
}

/* Mobile: pill collapses into the hamburger drawer alongside the links. */
@media (max-width: 768px) {
    .nav-user-wrapper {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .nav-user-pill {
        width: 100%;
        max-width: none;
        height: 44px;
        justify-content: flex-start;
        padding: 0 12px;
    }
    .nav-user-email {
        max-width: none;
    }
    .nav-user-menu {
        position: static;
        box-shadow: none;
        border: none;
        padding: 0;
        margin-top: 6px;
    }
    .nav-user-menu a,
    .nav-user-menu button {
        padding: 12px 12px;
        font-size: var(--text-sm);
    }
}

/* ──────────────────────────────────────────────────────────────────
   Sprint 22b — Conversation tab: CoM widgets + phase dividers
   pre-call (frame the gap), in-call (plays + objections),
   post-call (capture + plan). Each widget consumes
   data.modules.com_framework or the parsed competitor objections.
   ────────────────────────────────────────────────────────────────── */

.conv-phase {
    margin-bottom: var(--space-5);
}
.conv-phase + .conv-phase {
    margin-top: var(--space-4);
}
.conv-phase-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 0 4px var(--space-2);
    margin-bottom: var(--space-2);
    border-bottom: 1px dashed var(--border);
}
.conv-phase-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--accent-muted);
}
.conv-phase-title {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: 500;
}
.conv-phase > .pf-card,
.conv-phase > div > .pf-card,
.conv-phase > #plays-section,
.conv-phase > #compare-section,
.conv-phase > #deal-context-section {
    margin-bottom: var(--space-3);
}

/* Shared widget head pattern — matches talking-points / opportunity */
.widget-pain-vision,
.widget-discovery,
.widget-traps,
.widget-objections {
    padding: var(--space-5);
}
.widget-pain-vision .head,
.widget-discovery .head,
.widget-traps .head,
.widget-objections .head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-3);
    gap: var(--space-3);
}
.widget-pain-vision .head h3,
.widget-discovery .head h3,
.widget-traps .head h3,
.widget-objections .head h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.widget-pain-vision .head .driver-tag,
.widget-discovery .head .driver-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    text-align: right;
    line-height: 1.3;
}

/* Pain → Vision: 2-column grid (before vs after) */
.widget-pain-vision .pv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
.widget-pain-vision .pv-col {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    background: var(--bg);
}
.widget-pain-vision .pv-col.before { border-left: 3px solid var(--danger, #dc2626); }
.widget-pain-vision .pv-col.after  { border-left: 3px solid var(--success, #10b981); }
.widget-pain-vision .pv-kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}
.widget-pain-vision .pv-list {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}
.widget-pain-vision .pv-list li { margin: 2px 0; }
.widget-pain-vision .pv-sub {
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--border);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    line-height: 1.5;
}
.widget-pain-vision .pv-sub strong {
    display: block;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10px;
    margin-bottom: 2px;
}

/* Discovery questions: opening (3) + before/after pairs */
.widget-discovery .dq-section {
    margin-top: var(--space-3);
}
.widget-discovery .dq-section:first-of-type { margin-top: 0; }
.widget-discovery .dq-kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    margin-bottom: 6px;
}
.widget-discovery .dq-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.widget-discovery .dq-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.widget-discovery .dq-row .ctx {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    align-self: start;
    padding-top: 2px;
}
.widget-discovery .dq-row.phase-after .ctx { color: var(--success, #10b981); }
.widget-discovery .dq-row.phase-before .ctx { color: var(--text-tertiary); }
.widget-discovery .dq-row .q {
    font-size: var(--text-sm);
    color: var(--text);
    line-height: 1.5;
}

/* Trap-setting questions: per-differentiator card with Set/Open/Close */
.widget-traps .trap-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    background: var(--bg);
    margin-bottom: var(--space-3);
}
.widget-traps .trap-card:last-child { margin-bottom: 0; }
.widget-traps .trap-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: 6px;
}
.widget-traps .trap-name {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text);
}
.widget-traps .trap-fam {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--surface-hover, var(--accent-muted));
    flex-shrink: 0;
}
.widget-traps .trap-fam.fam-thales  { color: var(--accent); background: var(--accent-muted); }
.widget-traps .trap-topic {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
    font-style: italic;
}
.widget-traps .trap-q {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 10px;
    padding: 6px 0;
    align-items: start;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}
.widget-traps .trap-q + .trap-q { border-top: 1px dashed var(--border); }
.widget-traps .trap-q .lbl {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    padding-top: 1px;
}

/* Anticipated objections list */
.widget-objections .obj-meta {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-bottom: var(--space-3);
}
.widget-objections .obj-row {
    border-left: 3px solid var(--accent-border);
    padding: 8px 12px;
    margin-bottom: 10px;
    background: var(--bg);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.widget-objections .obj-row:last-child { margin-bottom: 0; }
.widget-objections .obj-q {
    font-weight: 600;
    color: var(--text);
    font-size: var(--text-sm);
    margin-bottom: 4px;
    line-height: 1.4;
}
.widget-objections .obj-q::before {
    content: '“';
    color: var(--accent);
    font-family: var(--font-display);
    margin-right: 2px;
}
.widget-objections .obj-q::after {
    content: '”';
    color: var(--accent);
    font-family: var(--font-display);
    margin-left: 2px;
}
.widget-objections .obj-r {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.55;
}
.widget-objections .obj-r::before {
    content: '→ ';
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

/* ──────────────────────────────────────────────────────────────────
   Sprint 22c — Account tab compress: secondary intel (Protection stack
   + Talking points) lives inside <details> so the SDR sees Target /
   Opportunity / Contacts / Signals above the fold without scrolling.
   ────────────────────────────────────────────────────────────────── */

.account-collapse {
    margin-bottom: var(--space-4);
}
.account-collapse > summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    user-select: none;
    transition: background var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.account-collapse > summary::-webkit-details-marker { display: none; }
.account-collapse > summary:hover {
    border-color: var(--accent-border);
    background: var(--surface-hover, var(--accent-muted));
}
.account-collapse .ac-title {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text);
    flex-shrink: 0;
}
.account-collapse .ac-hint {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-collapse .ac-chev {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 16px;
    transition: transform 200ms var(--ease-out);
}
.account-collapse[open] > summary .ac-chev {
    transform: rotate(90deg);
}
.account-collapse[open] > summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
    margin-bottom: 0;
}
.account-collapse > div {
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: 0;
    background: var(--bg);
}
/* The widget inside is already a .pf-card with its own border — kill
   the inner border so we don't get a doubled outline. */
.account-collapse > div > .pf-card {
    border: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    margin: 0;
}
/* Hide the redundant widget head — the <summary> already labels the
   section. !important needed because some legacy widget heads use
   inline display:flex which would otherwise win specificity. */
.account-collapse .widget-protection > .head,
.account-collapse .widget-talking-points > .head {
    display: none !important;
}
.account-collapse .widget-protection,
.account-collapse .widget-talking-points {
    padding-top: var(--space-3);
}

/* ──────────────────────────────────────────────────────────────────
   Sprint 22d — Proof tab CoM widgets: required capabilities, metrics,
   how-we-do-it, proof points. Source = value_drivers[0] in
   com_framework module (same as Conversation widgets).
   ────────────────────────────────────────────────────────────────── */

.widget-required-caps,
.widget-hwdi,
.widget-proof-points {
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}
.widget-required-caps .head,
.widget-hwdi .head,
.widget-proof-points .head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-3);
    gap: var(--space-3);
}
.widget-required-caps .head h3,
.widget-hwdi .head h3,
.widget-proof-points .head h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.widget-required-caps .head .driver-tag,
.widget-hwdi .head .driver-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    text-align: right;
    line-height: 1.3;
}

/* Required capabilities + Metrics: 2-col grid, mirrors Pain→Vision */
.widget-required-caps .rc-grid,
.widget-hwdi .rc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
.widget-required-caps .rc-col,
.widget-hwdi .rc-col {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    background: var(--bg);
}
.widget-required-caps .rc-kicker,
.widget-hwdi .rc-kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: var(--space-2);
}
.widget-required-caps .rc-list,
.widget-hwdi .rc-list {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}
.widget-required-caps .rc-list li,
.widget-hwdi .rc-list li {
    margin: 3px 0;
}

.widget-hwdi .hwdi-blurb {
    margin: 0 0 var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--accent-muted);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text);
    line-height: 1.55;
}

/* Proof points: customer story cards */
.widget-proof-points .proof-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    background: var(--bg);
    margin-bottom: var(--space-3);
}
.widget-proof-points .proof-card:last-child { margin-bottom: 0; }
.widget-proof-points .proof-customer {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text);
    margin-bottom: var(--space-2);
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--border);
}
.widget-proof-points .proof-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 10px;
    padding: 4px 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}
.widget-proof-points .proof-row .lbl {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    padding-top: 2px;
}
.widget-proof-points .proof-products {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--border);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ──────────────────────────────────────────────────────────────────
   Sprint 23c — AppSec/DataSec family tagging. .family-pill marks
   driver-level widget heads + proof point cards so the SDR knows
   which family the talking points are driving. .head-meta groups
   the pill next to the existing driver tag.
   ────────────────────────────────────────────────────────────────── */

.head-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.family-pill {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.5;
}
.family-pill.family-appsec {
    background: var(--accent-muted);
    color: var(--accent);
    border-color: var(--accent-border);
}
.family-pill.family-datasec {
    background: color-mix(in oklab, #8b5cf6 12%, transparent);
    color: #8b5cf6;
    border-color: color-mix(in oklab, #8b5cf6 30%, transparent);
}
.family-pill.family-both {
    background: var(--gold-muted, color-mix(in oklab, #f59e0b 12%, transparent));
    color: var(--gold, #b45309);
    border-color: rgba(180, 83, 9, 0.25);
}
.proof-customer .family-pill { vertical-align: middle; margin-left: 6px; }

/* HWDI columns get the family-pill as the kicker now (Sprint 23c)
   so we drop the previous monospace text kicker rule for them. */
.widget-hwdi .rc-col .rc-kicker { padding: 0; margin-bottom: var(--space-2); }
.widget-hwdi .rc-col .rc-kicker .family-pill { font-size: 10px; padding: 3px 8px; }

/* ──────────────────────────────────────────────────────────────────
   Sprint 24a — Evidence peek cards (DNS / Fingerprint / Subdomains)
   are now <details> blocks that expand inline. Same widget HTML is
   rendered into the right rail (desktop) AND into a Proof tab slot
   (mobile, where the rail is hidden). CSS gates which one is
   visible at each viewport so the user sees exactly one copy.
   ────────────────────────────────────────────────────────────────── */

.ev-card {
    display: block;
    margin-bottom: var(--space-3);
    padding: 0;
    overflow: hidden;
    cursor: pointer;
}
.ev-card > summary {
    list-style: none;
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    user-select: none;
    transition: background var(--duration) var(--ease-out);
}
.ev-card > summary::-webkit-details-marker { display: none; }
.ev-card:hover > summary { background: var(--surface-hover, var(--accent-muted)); }
.ev-card .ev-summary { flex: 1; min-width: 0; }
.ev-card .ev-chev {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 16px;
    flex-shrink: 0;
    align-self: center;
    transition: transform 200ms var(--ease-out);
}
.ev-card[open] .ev-chev { transform: rotate(90deg); }
.ev-card[open] > summary { border-bottom: 1px solid var(--border); background: var(--bg); }
/* When expanded, hide the compact summary rows — the body shows the
   same fields (and more) so duplicating them looks like noise. The
   group label (.pf-kicker) stays so the user knows what they
   expanded. */
.ev-card[open] > summary .pf-kv,
.ev-card[open] > summary .subd-totals,
.ev-card[open] > summary .pf-bar { display: none; }
.ev-card[open] > summary .pf-kicker { margin-bottom: 0; }
.ev-card .ev-body {
    padding: var(--space-3) var(--space-4) var(--space-4);
    background: var(--bg);
    font-size: var(--text-xs);
}
.ev-card .pf-kv {
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
}
.ev-card .pf-kv .k {
    flex-shrink: 0;
}
.ev-card .pf-kv .v {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
    text-align: right;
}
.ev-card .subd-totals {
    overflow-wrap: anywhere;
}

/* Inline detail rows: 2-col grid, monospace value column */
.ev-detail .ev-row {
    display: grid;
    /* Sprint 25a — narrower label col + min-width:0 on value so the
       grid actually shrinks the value column when the row is in a
       narrow rail. Without min-width:0 the 1fr column refused to
       contract, pushing long mono values out of bounds. */
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px dashed var(--border);
}
.ev-detail .ev-row:last-child { border-bottom: 0; }
.ev-detail .ev-k {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    padding-top: 2px;
}
.ev-detail .ev-v {
    color: var(--text-secondary);
    /* `anywhere` is more aggressive than break-all and handles long
       URL/DNS values better than break-word. */
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.4;
    min-width: 0;
    text-align: right;
}
.ev-detail .ev-v.mono { font-family: var(--font-mono); }
.ev-detail .ev-multiline { white-space: normal; }
.ev-detail .ev-empty { color: var(--text-tertiary); font-style: italic; }

/* Subdomain list — 3-col grid (name / status / TLS) */
.ev-detail .ev-sub-summary {
    display: flex;
    gap: 6px;
    align-items: baseline;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-2);
}
.ev-detail .ev-sub-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ev-detail .ev-sub-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    padding: 4px 0;
    font-size: 11px;
    line-height: 1.4;
    align-items: center;
}
.ev-detail .ev-sub-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.ev-detail .ev-sub-status,
.ev-detail .ev-sub-tls {
    flex-shrink: 0;
    font-size: 10px;
}
.ev-detail .ev-more {
    color: var(--text-tertiary);
    font-size: 10px;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--border);
    text-align: center;
}

/* Tone classes used by detail rows */
.ev-detail .c-success { color: var(--success); font-weight: 500; }
.ev-detail .c-warning { color: var(--warning); font-weight: 500; }
.ev-detail .c-error   { color: var(--error);   font-weight: 500; }
.ev-detail .c-mute    { color: var(--text-tertiary); }

/* Default visibility: rail-only on desktop, Proof-tab-only on mobile.
   The Proof tab slot is hidden ≥769px because the rail already shows
   the same data. */
@media (min-width: 769px) {
    .evidence-cards-mobile { display: none; }
}
@media (max-width: 768px) {
    /* On mobile the rail is already display:none from earlier rules;
       the Proof tab slot picks up the cards. Slight padding tweak to
       align with surrounding Proof widgets. */
    .evidence-cards-mobile { margin-bottom: var(--space-4); }
    .evidence-cards-mobile .head { display: none; } /* Proof tab already labels the section */
    .evidence-cards-mobile p.intro { display: none; }
}

/* Mobile: collapse 2-col Pain→Vision and shrink phase headers */
@media (max-width: 768px) {
    .widget-pain-vision .pv-grid {
        grid-template-columns: 1fr;
    }
    .conv-phase-head {
        padding-bottom: 4px;
    }
    .widget-pain-vision,
    .widget-discovery,
    .widget-traps,
    .widget-objections {
        padding: var(--space-4);
    }
    .widget-traps .trap-q {
        grid-template-columns: 48px 1fr;
        gap: 8px;
    }
    /* Stack widget head vertically so the driver tag doesn't squash
       the title — was producing "Pain →" / "Vision" wrap. */
    .widget-pain-vision .head,
    .widget-discovery .head,
    .widget-traps .head,
    .widget-objections .head,
    .widget-required-caps .head,
    .widget-hwdi .head,
    .widget-proof-points .head {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .widget-pain-vision .head .driver-tag,
    .widget-discovery .head .driver-tag,
    .widget-required-caps .head .driver-tag,
    .widget-hwdi .head .driver-tag {
        text-align: left;
    }
    .widget-required-caps,
    .widget-hwdi,
    .widget-proof-points {
        padding: var(--space-4);
    }
    .widget-required-caps .rc-grid,
    .widget-hwdi .rc-grid {
        grid-template-columns: 1fr;
    }
    .widget-proof-points .proof-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* ── Sprint 27 — Insurance vertical widgets ───────────────────────── */

/* Programa actual */
.widget-programa {
  padding: var(--space-5);
}
.widget-programa .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.widget-programa .head h3 { margin: 0; }
.widget-programa .prog-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}
.widget-programa .prog-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
}
.widget-programa .prog-value {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.widget-programa .prog-value .prog-mid {
  color: var(--text-tertiary);
  font-weight: 400;
  font-size: var(--text-sm);
}
.widget-programa .prog-note {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-style: italic;
}
.widget-programa .prog-ramo-table th,
.widget-programa .prog-ramo-table td {
  padding: var(--space-1) var(--space-2);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.widget-programa .prog-ramo-table th {
  color: var(--text-tertiary);
  font-weight: 600;
  font-size: var(--text-xs);
}
.widget-programa .prog-evidence a {
  color: var(--accent);
  text-decoration: none;
}
.widget-programa .prog-evidence a:hover { text-decoration: underline; }

/* Competitive battle-card table */
.widget-competitive {
  padding: var(--space-5);
}
.widget-competitive .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.widget-competitive .head h3 { margin: 0; }
.widget-competitive .comp-table {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.widget-competitive .comp-table th,
.widget-competitive .comp-table td {
  padding: var(--space-2) var(--space-3);
  text-align: center;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.widget-competitive .comp-table th.cat,
.widget-competitive .comp-table th.cat-header {
  text-align: left;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  font-size: var(--text-xs);
}
.widget-competitive .comp-table th.incumbent,
.widget-competitive .comp-table td.incumbent {
  background: var(--accent-bg);
  color: var(--text);
}
.widget-competitive .comp-table th.incumbent .incumbent-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
  margin-top: 2px;
}
.widget-competitive .comp-table th .posture-tag {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.widget-competitive .score-pill {
  display: inline-block;
  min-width: 24px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: var(--text-xs);
}
.widget-competitive .score-pill.score-high {
  background: var(--success-bg);
  color: var(--success);
}
.widget-competitive .score-pill.score-mid {
  background: var(--warning-bg);
  color: var(--warning);
}
.widget-competitive .score-pill.score-low {
  background: var(--error-bg);
  color: var(--error);
}
.widget-competitive .score-pill.score-na {
  background: var(--bg-secondary);
  color: var(--text-tertiary);
}
.widget-competitive .obj-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-top: var(--space-2);
  background: var(--bg);
}
.widget-competitive .obj-row summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  list-style: none;
}
.widget-competitive .obj-row summary::-webkit-details-marker { display: none; }
.widget-competitive .obj-row .obj-num {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-tertiary);
  width: 24px;
}
.widget-competitive .obj-row .obj-text {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text);
  font-style: italic;
}
.widget-competitive .obj-row .obj-chev {
  color: var(--text-tertiary);
  font-weight: 700;
  font-size: var(--text-md);
}
.widget-competitive .obj-row[open] .obj-chev { transform: rotate(90deg); }
.widget-competitive .obj-row .obj-body {
  padding: var(--space-2) var(--space-3) var(--space-3) calc(var(--space-3) + 24px + var(--space-2));
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ── Sprint 27 — Insurance Proof tab ──────────────────────────────── */
.proof-section {
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.proof-section h3 {
  margin: 0 0 var(--space-2) 0;
}
.proof-section .proof-hint {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0 0 var(--space-3) 0;
}
.proof-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
  font-size: var(--text-sm);
}
.proof-row:last-child { border-bottom: none; }
.proof-lbl {
  color: var(--text-tertiary);
  font-weight: 500;
}
.proof-mute { color: var(--text-tertiary); font-size: var(--text-xs); }
.proof-divider {
  border-top: 1px solid var(--border);
  margin: var(--space-2) 0;
}
.proof-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.proof-table th, .proof-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.proof-table th {
  color: var(--text-tertiary);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.proof-signal-block {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.proof-signal-block:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.proof-signal-block h4 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-md);
}
.proof-evidence-art {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}
.proof-evidence-title {
  font-size: var(--text-sm);
  font-weight: 600;
}
.proof-evidence-title a {
  color: var(--accent);
  text-decoration: none;
}
.proof-evidence-title a:hover { text-decoration: underline; }
.proof-evidence-meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}
.proof-evidence-quote {
  margin: var(--space-2) 0 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary);
  border-left: 3px solid var(--accent-border);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.5;
}
.proof-rec {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}
.proof-rec summary {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  list-style: none;
}
.proof-rec summary::-webkit-details-marker { display: none; }
.proof-rec-name { font-weight: 600; }
.proof-rec-score { color: var(--text-tertiary); font-size: var(--text-sm); }
.proof-rec-body {
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
}
.proof-rec-rationale {
  margin: 0 0 var(--space-2) 0;
  padding-left: var(--space-4);
  color: var(--text-secondary);
}

/* Outreach insurance shell */
.outreach-insurance-shell {
  padding: 0;
}
.outreach-roadmap-note {
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}
.outreach-section {
  margin-bottom: var(--space-4);
}
.outreach-section h3 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-md);
}
.outreach-action {
  margin: 0;
  font-weight: 600;
  color: var(--text);
  font-size: var(--text-md);
}
.outreach-role-block {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--bg-secondary, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.outreach-role-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.outreach-role-block h4 {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.outreach-role-block ul {
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
}
.outreach-role-block li {
  margin-bottom: 2px;
}
.outreach-gen-btn {
  background: var(--accent);
  color: var(--text-on-accent, #fff);
  border: 1px solid var(--accent-border, var(--accent));
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.75rem;
  font-size: var(--text-xs);
  cursor: pointer;
  font-weight: 600;
}
.outreach-gen-btn:hover:not(:disabled) { filter: brightness(1.08); }
.outreach-gen-btn:disabled { opacity: 0.6; cursor: progress; }

.outreach-gen-output { margin-top: var(--space-2); }
.outreach-gen-output:empty { display: none; }

.outreach-gen-loading {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: var(--space-2);
  font-style: italic;
}
.outreach-gen-error {
  font-size: var(--text-sm);
  color: var(--danger, #c0392b);
  background: var(--danger-bg, rgba(192,57,43,0.08));
  border: 1px solid var(--danger-border, rgba(192,57,43,0.25));
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

.outreach-gen-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-top: var(--space-2);
}
.outreach-gen-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.outreach-gen-channel {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}
.outreach-copy-btn {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.6rem;
  font-size: var(--text-xs);
  cursor: pointer;
}
.outreach-copy-btn:hover { color: var(--text); border-color: var(--accent-border, var(--accent)); }

.outreach-gen-subject {
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
  color: var(--text);
}
.outreach-gen-body {
  white-space: pre-wrap;
  font-family: var(--font-base, inherit);
  font-size: var(--text-sm);
  line-height: 1.5;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin: 0;
  color: var(--text);
  overflow-x: auto;
}
.outreach-gen-step {
  border-top: 1px dashed var(--border);
  padding-top: var(--space-2);
  margin-top: var(--space-2);
}
.outreach-gen-step:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.outreach-gen-step-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  flex-wrap: wrap;
}

/* Insurance inline play (Open Playbook expand) */
.widget-opportunity .play details.play,
.widget-opportunity details.play {
  list-style: none;
}
.widget-opportunity details.play[open] .play-cta-arrow {
  transform: rotate(180deg);
  display: inline-block;
}
.widget-opportunity details.play > summary {
  cursor: pointer;
  list-style: none;
}
.widget-opportunity details.play > summary::-webkit-details-marker { display: none; }

/* Tech stack widget — generic across verticals. */
.widget-tech-stack .ts-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.widget-tech-stack .ts-cat {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-3);
  align-items: start;
}
.widget-tech-stack .ts-cat-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding-top: 4px;
}
.widget-tech-stack .ts-cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.widget-tech-stack .ts-source {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--border);
}
.widget-tech-stack .ts-source code {
  font-family: var(--font-mono, monospace);
  background: var(--bg-secondary, rgba(0,0,0,0.04));
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.95em;
}
.widget-tech-stack .ts-source-warn { color: var(--warning, #b45309); }

.widget-tech-stack .ts-summary {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--border);
}
.widget-tech-stack .ts-summary summary {
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: 600;
  list-style: none;
}
.widget-tech-stack .ts-summary summary::-webkit-details-marker { display: none; }
.widget-tech-stack .ts-summary-body {
  margin-top: var(--space-2);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-1) var(--space-3);
}
.widget-tech-stack .ts-summary-row {
  display: contents;
  font-size: var(--text-xs);
}
.widget-tech-stack .ts-summary-cat {
  color: var(--text);
}
.widget-tech-stack .ts-summary-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 600;
}

/* Tech-b2b recommendations card — surfaces the recommender output as
   nested sub-cards with score badge + buyer-role pills + matched pain
   hypotheses (evidence + pitch). */
.widget-tech-b2b-recs .tbr-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.widget-tech-b2b-recs .tbr-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: var(--bg-secondary, var(--surface));
}
.widget-tech-b2b-recs .tbr-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.widget-tech-b2b-recs .tbr-head h4 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
}
.widget-tech-b2b-recs .tbr-roles {
  font-size: var(--text-xs);
  margin-bottom: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}
.widget-tech-b2b-recs .tbr-pains {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.widget-tech-b2b-recs .tbr-pain {
  border-left: 2px solid var(--border);
  padding-left: var(--space-3);
}
.widget-tech-b2b-recs .tbr-pain-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  font-size: var(--text-sm);
  margin-bottom: 4px;
}
.widget-tech-b2b-recs .tbr-pain-evidence {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.widget-tech-b2b-recs .tbr-pain-evidence code {
  font-family: var(--font-mono, monospace);
  background: var(--bg-secondary, rgba(0,0,0,0.04));
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.95em;
}
.widget-tech-b2b-recs .tbr-pitch {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--bg);
  border-left: 2px solid var(--accent);
  border-radius: 2px;
  font-size: var(--text-sm);
  color: var(--text);
  font-style: italic;
}
.widget-tech-b2b-recs .tbr-lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.widget-tech-b2b-recs .tbr-lock input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}
.widget-tech-b2b-recs .tbr-card-locked {
  border-color: var(--accent, #d4a017);
  background: linear-gradient(180deg,
    var(--bg-secondary, var(--surface)) 0%,
    rgba(212, 160, 23, 0.04) 100%);
}
.widget-tech-b2b-recs .tbr-card-locked .tbr-lock {
  color: var(--accent, #d4a017);
  font-weight: 600;
}
.widget-tech-b2b-recs .tbr-regen-btn {
  margin-left: auto;
  font-size: var(--text-xs);
  padding: 4px var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--accent, #d4a017);
  color: var(--bg, #fff);
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.widget-tech-b2b-recs .tbr-regen-btn:hover {
  filter: brightness(1.1);
}
.widget-tech-b2b-recs .tbr-regen-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}
.widget-tech-b2b-recs .tbr-lock-banner {
  margin: var(--space-3) 0 var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--accent, #d4a017);
  background: rgba(212, 160, 23, 0.06);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.5;
}
.widget-tech-b2b-recs .tbr-lock-banner strong {
  color: var(--accent, #d4a017);
  margin-right: 4px;
}

@media (max-width: 600px) {
  .widget-tech-b2b-recs .tbr-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Mobile: stack label + pills vertically. */
@media (max-width: 600px) {
  .widget-tech-stack .ts-cat {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
  .widget-tech-stack .ts-cat-label {
    padding-top: 0;
  }
}