/* Cultivar v3 — light palette aligned with v1 (PR #53).
   Variable names match the original v3 scheme so downstream rules
   pick up the new colors without churn. v1 reference:
   cultivar-v1/dashboard.html. */

:root {
  --bg:       #f4f5fb;   /* page background */
  --bg-elev:  #ffffff;   /* card / panel surface */
  --fg:       #0d1b3e;   /* primary text */
  --fg-muted: #5a6882;   /* meta / secondary text */
  --accent:   #4f6ef7;   /* primary action / link */
  --border:   #dbe4f0;
  --danger:   #dc2626;
  --green:    #16a34a;
  --orange:   #d97706;
  --radius:   12px;
  /* rgba tints derived from --accent for decorative fills */
  --accent-tint:    rgba(79, 110, 247, 0.08);
  --accent-tint-2:  rgba(79, 110, 247, 0.18);
  --danger-tint:    rgba(220, 38, 38, 0.10);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 14px/1.5 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}
/* Sora display face for headings and headline numeric values —
   the single largest contributor to "v1 looks designed" per the
   visual_design review (Bloom + Refactoring UI: display face on
   headings, body face on text). */
h1, h2, h3,
.prospect-name,
.summary-value,
.icp-total,
.score-num,
.signal-num,
.pane-heading {
  font-family: "Sora", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.summary-value { font-size: 1.85rem; }
.prospect-name { font-size: 1.75rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; }

.site-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.75rem 1.5rem;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 600; font-size: 1.1rem; color: var(--fg); }
.track-switcher { display: flex; gap: 0.5rem; }
.audit-nav { margin-left: auto; }

/* ----- Phase 3-auth: signed-in widget + login page ----- */
.user-widget {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.75rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--border);
}
.user-email {
  color: var(--fg-muted);
  font-size: 0.85rem;
}
.logout-form { margin: 0; }
.logout-button {
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.25rem 0.6rem;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.logout-button:hover { color: var(--fg); }

.login-page {
  max-width: 380px;
  margin: 2rem auto;
}
.login-explain {
  color: var(--fg-muted);
  font-size: 0.9rem;
  margin: 0 0 1rem;
}
.login-form { margin-top: 1rem; }
.track-link {
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  color: var(--fg-muted);
}
.track-link.is-active {
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}

/* Secondary nav — settings / admin row below the primary header. */
.secondary-nav {
  display: flex;
  gap: 1.2rem;
  padding: 0.45rem 1.5rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.secondary-link {
  color: var(--fg-muted);
  text-decoration: none;
  padding: 0.15rem 0;
  border-bottom: 2px solid transparent;
}
.secondary-link:hover { color: var(--fg); text-decoration: none; }
.secondary-link.is-active {
  color: var(--fg);
  border-bottom-color: var(--accent);
}

.site-main { padding: 1.5rem; max-width: 1200px; margin: 0 auto; }
.site-footer {
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: 0.85rem;
}

.orgs-list h1 { margin-top: 0; }
.org-count { color: var(--fg-muted); }

.orgs-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
.orgs-table th, .orgs-table td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.orgs-table th {
  font-weight: 500;
  color: var(--fg-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.org-row.is-disqualified { opacity: 0.6; }

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: 500;
}
.badge-disqualified { background: var(--danger); color: #fff; }
.badge-tier {
  background: #1565c0; color: #fff;
  text-transform: none; letter-spacing: 0;
  font-family: ui-monospace, monospace;
}
.badge-active { background: #2e7d32; color: #fff; }
.badge-inactive { background: var(--border); color: var(--fg-muted); }

/* Tier admin page */
.tiers-page .page-tagline { color: var(--fg-muted); }
.tiers-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1.5rem 0;
}
.tiers-table th, .tiers-table td {
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.tiers-table th {
  background: var(--bg-elev);
  color: var(--fg-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tier-row.tier-inactive { opacity: 0.55; }
.tier-band-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.section-heading {
  margin-top: 1.5rem;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3rem;
}
.badge-platform {
  background: #5d4037;
  color: #fff;
  text-transform: lowercase;
  font-family: ui-monospace, monospace;
}

/* Phase 8d forum-signals panel */
.forum-signals-panel {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.forum-signal-list { list-style: none; padding: 0; margin: 0.6rem 0 0 0; }
.forum-signal-row {
  padding: 0.6rem 0.7rem;
  margin: 0.5rem 0;
  background: var(--bg);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
}
.forum-signal-unmatched { border-left-color: #ff9800; }
.forum-signal-head {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
}
.forum-signal-title { margin: 0.2rem 0 0.3rem 0; font-weight: 500; }
.forum-signal-snippet { margin: 0.2rem 0; font-size: 0.85rem; }
.forum-signal-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
  align-items: center;
}
.forum-signal-actions select {
  background: var(--bg-elev); color: var(--fg);
  border: 1px solid var(--border); padding: 0.25rem 0.4rem;
}

/* Phase 9 validation gate */
.validation-overall {
  margin: 1rem 0 1.5rem 0;
  padding: 0.8rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.validation-overall.validation-pass {
  background: rgba(22, 163, 74, 0.10);
  color: var(--fg);
  border-color: var(--green);
}
.validation-overall.validation-fail {
  background: var(--danger-tint);
  color: var(--fg);
  border-color: var(--danger);
}
.validation-overall-heading { margin: 0; }

.gate-list { list-style: none; padding: 0; }
.gate-row {
  margin: 0.7rem 0;
  padding: 0.7rem 0.9rem;
  background: var(--bg-elev);
  border-left: 4px solid var(--border);
  border-radius: 3px;
}
.gate-pass { border-left-color: #2e7d32; }
.gate-fail { border-left-color: var(--danger); }
.gate-head {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}
.gate-badge-pass {
  background: #2e7d32; color: #fff;
  text-transform: none; letter-spacing: 0;
}
.gate-badge-fail {
  background: var(--danger); color: #fff;
  text-transform: none; letter-spacing: 0;
}
.gate-rubric {
  font-family: ui-monospace, monospace;
  color: var(--fg-muted);
  font-size: 0.85rem;
}
.gate-name { font-weight: 600; }
.gate-detail { margin: 0.3rem 0; font-size: 0.92rem; }
.gate-debug { margin-top: 0.4rem; font-size: 0.85rem; }
.gate-debug > summary {
  cursor: pointer;
  color: var(--fg-muted);
}
.gate-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.2rem 0.8rem;
  margin: 0.4rem 0;
}
.gate-meta dt { color: var(--fg-muted); }
.gate-meta dd { margin: 0; }

/* Feature B discover page */
.discovery-runs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
.discovery-runs-table th, .discovery-runs-table td {
  text-align: left;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.discovery-runs-table th {
  background: var(--bg-elev);
  color: var(--fg-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tier-band-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.section-heading {
  margin-top: 1.5rem;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3rem;
}
.muted { color: var(--fg-muted); }
.plan-fallback-note {
  font-size: 0.85rem;
  padding: 0.5rem 0.7rem;
  background: var(--bg-elev);
  border-left: 3px solid #ff9800;
  border-radius: 3px;
  margin: 0.4rem 0;
}

.empty-state {
  padding: 2rem;
  text-align: center;
  color: var(--fg-muted);
}

/* ----- Phase 2b: org detail + provenance pane ----- */

.breadcrumb { margin-bottom: 1rem; color: var(--fg-muted); }
.breadcrumb a { color: var(--fg-muted); }

.org-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 800px) {
  .org-detail-grid { grid-template-columns: 1fr; }
}

.org-summary h1 { display: flex; align-items: center; gap: 0.6rem; }

.org-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
}
.org-meta dt { color: var(--fg-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.org-meta dd { margin: 0; }

.provenance-pane {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem 1.25rem;
}
.pane-heading {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}

.provenance-list { list-style: none; padding: 0; margin: 0; }
.provenance-field + .provenance-field { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--border); }

.field-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.field-name { color: var(--fg-muted); }
.field-value { font-weight: 500; }
.field-value-none { color: var(--fg-muted); font-style: italic; font-weight: normal; }
.field-type { color: var(--fg-muted); font-size: 0.8rem; }

.field-source { font-size: 0.9rem; margin-bottom: 0.1rem; }
.src-label { color: var(--fg-muted); font-size: 0.8rem; margin-right: 0.3rem; }
.field-captured { font-size: 0.78rem; color: var(--fg-muted); }

.conf {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.conf-high            { background: #2e7d32; color: #fff; }
.conf-medium          { background: #c97c1e; color: #fff; }
.conf-low             { background: #5f5f5f; color: #ddd; }
.conf-manual_override { background: #1565c0; color: #fff; }

.field-history {
  margin-top: 0.45rem;
  font-size: 0.85rem;
}
.field-history summary {
  cursor: pointer;
  color: var(--fg-muted);
}
.history-list { list-style: none; padding: 0.5rem 0 0; margin: 0; }
.history-entry {
  padding: 0.35rem 0;
  border-bottom: 1px dotted var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
}
.history-entry:last-child { border-bottom: none; }
.history-value { font-weight: 500; }
.history-source { color: var(--fg-muted); font-size: 0.85rem; }
.history-when, .history-reason { font-size: 0.75rem; color: var(--fg-muted); }

.domain-invalid {
  color: var(--danger);
  text-decoration: line-through;
}

/* ----- Phase 2c: filter + sort form ----- */
.orgs-filter {
  display: flex;
  gap: 1.25rem;
  align-items: end;
  margin: 1rem 0 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.filter-field { display: flex; flex-direction: column; gap: 0.25rem; }
.filter-field span {
  font-size: 0.75rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.filter-field select {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.35rem 0.6rem;
  font: inherit;
  min-width: 12rem;
}

/* ----- Phase 3a: inline label / transition form ----- */
.label-form {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.label-form .pane-heading { margin: 0 0 0.25rem; }
.label-form .filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.label-form .filter-field span {
  font-size: 0.75rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.label-form select,
.label-form input[type="text"] {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.4rem 0.6rem;
  font: inherit;
}
.label-form .form-submit {
  align-self: flex-start;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 0.45rem 1rem;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.label-form .form-submit:hover { filter: brightness(1.1); }
.form-error {
  margin: 0;
  padding: 0.4rem 0.6rem;
  background: var(--danger);
  color: #fff;
  border-radius: 3px;
  font-size: 0.85rem;
}

/* ----- Phase 3c: audit page ----- */
.audit-page h1 { margin-top: 0; }
.audit-scope { color: var(--fg-muted); font-size: 1rem; font-weight: normal; }
.audit-explain {
  color: var(--fg-muted);
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
}
.audit-section {
  margin-top: 2rem;
}
.audit-section h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  margin: 0 0 0.5rem;
}
.audit-note {
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
}
.audit-truncated {
  margin-left: 0.5rem;
  padding: 0.1rem 0.4rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--fg-muted);
  font-size: 0.7rem;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
}
.audit-table {
  width: 100%;
  border-collapse: collapse;
}
.audit-table th, .audit-table td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.audit-table th {
  font-weight: 500;
  color: var(--fg-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.audit-when {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  white-space: nowrap;
  color: var(--fg-muted);
}
.audit-numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ----- Phase 3d: per-field override edit button ----- */
.fact-edit-button {
  margin-left: auto;
  padding: 0.05rem 0.4rem;
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 0.7rem;
  cursor: pointer;
}
.fact-edit-button:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.dialog-field-name {
  margin-left: 0.4rem;
  color: var(--accent);
  font-size: 0.9rem;
}
.dialog-current-readout {
  background: var(--bg-elev) !important;
  color: var(--fg-muted) !important;
  font-style: italic;
}

/* ----- Phase 3b: cross-track move modal ----- */
.track-move-button {
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 0.75rem;
  cursor: pointer;
}
.track-move-button:hover {
  background: var(--bg-elev);
}
.track-move-dialog {
  background: var(--bg-elev);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0;
  max-width: 480px;
  min-width: 320px;
}
.track-move-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}
.track-move-dialog .label-form {
  margin: 0;
  border: none;
  background: transparent;
  padding: 1.25rem 1.5rem;
}
.dialog-explain {
  margin: 0;
  font-size: 0.9rem;
  color: var(--fg-muted);
  line-height: 1.45;
}
.dialog-explain code {
  color: var(--fg);
}
.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.form-cancel {
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.45rem 1rem;
  font: inherit;
  cursor: pointer;
}
.form-cancel:hover {
  color: var(--fg);
}

/* ----- Phase 2d: live indicator ----- */
.live-indicator {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  vertical-align: middle;
  margin-left: 0.5rem;
}
.live-indicator[data-live-state="connecting"]   { background: #5f5f5f; color: #ddd; }
.live-indicator[data-live-state="live"]         { background: #2e7d32; color: #fff; }
.live-indicator[data-live-state="reconnecting"] { background: #c97c1e; color: #fff; }
.live-indicator[data-live-state="disconnected"] { background: var(--danger); color: #fff; }

/* ============================================================
   Phase 5b — rich prospect detail view
   ============================================================ */

.org-detail-grid-v5 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .org-detail-grid-v5 {
    grid-template-columns: 1fr;
  }
}

.prospect-main {
  min-width: 0;       /* prevent grid blowout from long content */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.prospect-rail {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* Operator feedback 2026-05-18 (PR #102): the prior
     position:sticky + max-height:100vh + overflow-y:auto setup
     created an unusable "expand one accordion shrinks others"
     feel because the rail had a hard height cap and any
     `<details>` toggle made the internal scroll position jump.
     The rail now flows naturally with the page so accordions
     can expand to their natural heights and the page scrolls
     to follow them. If the operator wants the org-summary
     header to stay in view while scrolling, that's a follow-up
     (sticky on .org-summary only, not the whole rail). */
}

.prospect-header {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}
.prospect-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 0.5rem 0;
  font-size: 1.6rem;
  font-weight: 600;
}
.prospect-tagline {
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
/* Most tagline items (industry, employee range, founded year) are
   short enough to stay on one line. Long ones — headquarters
   addresses in particular ("10 Times Square, 6th Floor, New York,
   NY 10018, United States") — need to wrap or they overflow the
   container at narrow widths. Allow word-level wrapping while
   keeping the bare-dot separator spans compact. */
.prospect-tagline > span {
  white-space: normal;
  min-width: 0;
  overflow-wrap: anywhere;
}
.prospect-summary {
  margin: 0.85rem 0 0 0;
  font-style: italic;
  color: var(--fg);
  line-height: 1.55;
  max-width: 75ch;
}

/* Grade badge — v1's tinted-pill formula: ~10% tint background +
   full-saturation foreground. Soft chip reads as metadata; saturated
   solid blocks read as flags (visual_design finding: solid blocks
   were the loudest thing on the page, the largest "v3 looks worse"
   signal). */
.grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8em;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.grade-badge.grade-A { background: rgba(22, 163, 74, 0.12);  color: var(--green); }
.grade-badge.grade-B { background: var(--accent-tint);       color: var(--accent); }
.grade-badge.grade-C { background: rgba(217, 119, 6, 0.12);  color: var(--orange); }
.grade-badge.grade-D { background: var(--danger-tint);       color: var(--danger); }

.icp-total {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 1.4rem;
  color: var(--accent);
}
.icp-max {
  color: var(--fg-muted);
  font-weight: 400;
  font-size: 0.85rem;
}

/* Sections — each named-section card */
.profile-section {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.4rem;
}
.section-heading {
  margin: 0 0 0.9rem 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.subhead {
  margin: 0.85rem 0 0.4rem 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  font-weight: 600;
}
.subhead-danger { color: var(--danger); }

/* Score breakdown rows */
.signal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.signal-row {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 1rem;
  align-items: start;
  padding: 0.6rem 0;
  border-top: 1px solid var(--border);
}
.signal-row:first-child { border-top: none; }
.signal-label strong { display: block; margin-bottom: 0.25rem; }
.signal-detail {
  margin: 0.25rem 0 0 0;
  padding: 0 0 0 1.2rem;
  list-style: disc;
  color: var(--fg-muted);
  font-size: 0.88rem;
}
.signal-detail li { margin-bottom: 0.15rem; }
.signal-score {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-end;
}
.signal-num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.signal-num-max {
  font-weight: 400;
  color: var(--fg-muted);
  font-size: 0.85rem;
}
.signal-bar {
  width: 200px;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.signal-bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width 200ms ease-out;
}
.signal-high .signal-bar-fill { background: var(--green); }
.signal-high .signal-num      { color: var(--green); }
.signal-mid  .signal-bar-fill { background: var(--accent); }
.signal-low  .signal-bar-fill { background: var(--orange); }
.signal-low  .signal-num      { color: var(--orange); }
.signal-zero .signal-bar-fill { background: var(--border); }
.signal-zero .signal-num      { color: var(--fg-muted); }
.signal-total {
  border-top: 2px solid var(--border);
  margin-top: 0.25rem;
  padding-top: 0.6rem;
  font-weight: 700;
}

.engagement-rec {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-2);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.55;
}

/* Tag pills */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.25rem 0;
}
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
}
.tag-tech { background: var(--accent-tint); border-color: var(--accent-tint-2); color: var(--accent); }
.tag-tech-soft { background: var(--bg); color: var(--fg-muted); }
.tag-debt { background: var(--danger-tint); border-color: rgba(220, 38, 38, 0.25); color: var(--danger); }
.tag-compliance { background: rgba(22, 163, 74, 0.10); border-color: rgba(22, 163, 74, 0.30); color: var(--green); }
.tag-award { background: rgba(217, 119, 6, 0.10); border-color: rgba(217, 119, 6, 0.30); color: var(--orange); }
.tag-competitor { background: var(--bg); color: var(--fg-muted); }

.bullet-list {
  margin: 0;
  padding: 0 0 0 1.2rem;
  list-style: disc;
  line-height: 1.55;
}
.bullet-list li { margin-bottom: 0.25rem; }

.comma-list {
  margin: 0.25rem 0 0 0;
  line-height: 1.55;
  color: var(--fg);
}

.leader-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.leader-list li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--border);
}
.leader-list li:last-child { border-bottom: none; }
.leader-name { font-weight: 600; }
.leader-title { color: var(--fg-muted); font-size: 0.88rem; }

/* Right-rail status panel */
.status-panel {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}
.status-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
}
.status-meta dt {
  color: var(--fg-muted);
  font-size: 0.85rem;
}
.status-meta dd {
  margin: 0;
}
.pane-heading {
  margin: 0 0 0.75rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}

/* ============================================================
   Phase 5c — list page (summary cards + rich table)
   ============================================================ */

.summary-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin: 0.75rem 0 1.25rem 0;
}
@media (max-width: 800px) { .summary-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .summary-row { grid-template-columns: 1fr; } }

.summary-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  text-decoration: none;
  color: inherit;
  display: block;
}
.summary-card-clickable { cursor: pointer; transition: border-color 120ms ease, background 120ms ease; }
.summary-card-clickable:hover { border-color: var(--accent); background: var(--accent-tint); text-decoration: none; }
.summary-card-clickable.is-active {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: 0 0 0 2px var(--accent-tint-2);
}
.summary-card-clear .summary-value-muted { color: var(--fg-muted); }
.summary-card-wide { grid-column: span 2; }
.summary-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-muted);
  font-weight: 600;
}
.summary-value {
  margin-top: 0.35rem;
  font-size: 1.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.summary-value-accent { color: var(--accent); }
.summary-value-green  { color: var(--green); }
.summary-value-orange { color: var(--orange); }
.summary-sub {
  margin-top: 0.15rem;
  font-size: 0.72rem;
  color: var(--fg-muted);
}

/* Filter bar */
.orgs-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
  padding: 0.85rem 1rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 1rem;
}
.orgs-filter .filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 130px;
}
.orgs-filter .filter-field > span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  font-weight: 600;
}
.orgs-filter input,
.orgs-filter select {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  border-radius: 6px;
  font: inherit;
}

.org-count {
  margin: 0.5rem 0;
  color: var(--fg-muted);
  font-size: 0.85rem;
}

/* Table v5 */
.orgs-table-v5 {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.orgs-table-v5 th,
.orgs-table-v5 td {
  padding: 0.65rem 0.9rem;
  text-align: left;
  vertical-align: middle;
  border-top: 1px solid var(--border);
}
.orgs-table-v5 thead th {
  background: var(--bg);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-muted);
  font-weight: 600;
  border-top: none;
}
.orgs-table-v5 th.num,
.orgs-table-v5 td.num    { text-align: right; font-variant-numeric: tabular-nums; }
.orgs-table-v5 th.center,
.orgs-table-v5 td.center { text-align: center; }

.org-row:hover { background: var(--accent-tint); }
.org-row.is-disqualified { opacity: 0.55; }

.cell-company { min-width: 220px; }
/* The company name IS the primary action — clicking opens the
   enriched prospect page. Style it like an obvious link (accent
   color + persistent underline) so the user doesn't mistakenly
   click the domain text below it. */
.org-link {
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.org-link:hover { filter: brightness(1.2); }
/* The domain underneath is METADATA, not a link. Render as plain
   inert text + a tiny ↗ glyph next to it that opens the external
   site in a new tab. This keeps the public-site link reachable
   without competing with the name as the primary action. */
.org-domain {
  display: block;
  font-size: 0.78rem;
  color: var(--fg-muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.org-domain-ext {
  color: var(--fg-muted);
  text-decoration: none;
  margin-left: 0.25rem;
  opacity: 0.6;
}
.org-domain-ext:hover { opacity: 1; color: var(--accent); }
.cell-missing { color: var(--fg-muted); }
.score-num { font-weight: 700; }

/* ============================================================
   Phase 6 — weight + size-band sliders
   ============================================================ */

.sliders-pane {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.pane-sub {
  font-weight: 400;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-left: 0.4rem;
}
.sliders-explain {
  margin: 0 0 0.4rem 0;
  font-size: 0.8rem;
  color: var(--fg-muted);
  line-height: 1.45;
}
.slider-subhead {
  margin: 0.6rem 0 0.2rem 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  font-weight: 600;
  border-top: 1px solid var(--border);
  padding-top: 0.6rem;
}
.slider-field {
  display: grid;
  grid-template-columns: 1fr 60px;
  align-items: center;
  gap: 0.4rem 0.8rem;
  font-size: 0.85rem;
}
.slider-label {
  grid-column: 1 / -1;
  color: var(--fg);
  font-weight: 500;
}
.slider {
  width: 100%;
  accent-color: var(--accent);
}
.slider-field output {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
  font-size: 0.85rem;
}
.sliders-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

/* Score-breakdown pill in the section header */
.score-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-left: 0.6rem;
  vertical-align: middle;
}
/* Score pill — tinted-pill formula (see .grade-badge). */
.score-pill.grade-A { background: rgba(22, 163, 74, 0.12);  color: var(--green); }
.score-pill.grade-B { background: var(--accent-tint);       color: var(--accent); }
.score-pill.grade-C { background: rgba(217, 119, 6, 0.12);  color: var(--orange); }
.score-pill.grade-D { background: var(--danger-tint);       color: var(--danger); }

/* ============================================================
   Contacts (leads) — Phase 5d UI
   ============================================================ */

/* Buying-stage pills — list and detail. The .stage-* modifier
   classes are shared between .stage-pill (inline list rendering) and
   .score-pill (section-header pill on the engagement-breakdown view),
   so the color values live in ONE rule set rather than being mirrored
   across both base classes (aspie PR #42 iter-1 finding ref:
   aspie_orchestrator_006 — DRY). */
.stage-pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-right: 0.25rem;
}
/* Stage pills — tinted-pill formula. Both .stage-pill and
   .score-pill variants share the same tint stack so the awareness/
   consideration/evaluation/decision color story is consistent
   between the list pill and the section-heading score pill. */
.stage-pill.stage-awareness,
.score-pill.stage-awareness     { background: rgba(90, 104, 130, 0.14);  color: var(--fg-muted); }
.stage-pill.stage-consideration,
.score-pill.stage-consideration { background: var(--accent-tint);        color: var(--accent); }
.stage-pill.stage-evaluation,
.score-pill.stage-evaluation    { background: rgba(217, 119, 6, 0.12);   color: var(--orange); }
.stage-pill.stage-decision,
.score-pill.stage-decision      { background: rgba(22, 163, 74, 0.12);   color: var(--green); }

/* Recommended-action pills (close / schedule-demo / reach-out / nurture). */
.action-pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bg-elev);
  color: var(--fg);
  border: 1px solid var(--border);
}
/* Action pills — tinted-pill formula. */
.action-pill.action-close         { background: rgba(22, 163, 74, 0.12); color: var(--green);     border-color: rgba(22, 163, 74, 0.3); }
.action-pill.action-schedule-demo { background: rgba(217, 119, 6, 0.12); color: var(--orange);    border-color: rgba(217, 119, 6, 0.3); }
.action-pill.action-reach-out     { background: var(--accent-tint);     color: var(--accent);    border-color: var(--accent-tint-2); }
.action-pill.action-nurture       { background: var(--bg);              color: var(--fg-muted);  border-color: var(--border); }

/* Right-rail collapsible panels — Phase 5b moved tuning/admin
   surfaces into <details> blocks closed by default so workflow
   stays above the fold (ux_design + ux_research finding). */
.rail-fold {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 1rem;
}
.rail-fold > summary {
  cursor: pointer;
  padding: 0.7rem 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--fg);
  list-style: none;
}
.rail-fold > summary::before {
  content: "▸ ";
  color: var(--fg-muted);
  display: inline-block;
  width: 1.2em;
  transition: transform 120ms ease;
}
.rail-fold[open] > summary::before { transform: rotate(90deg); }
.rail-fold > summary:hover { color: var(--accent); }
.rail-fold[open] {
  padding-bottom: 0.6rem;
}

/* Lifecycle pills — replaces the raw `<code>state_name</code>`
   rendering on org summary panels (ux_research finding: code-font
   leaks ORM-vocabulary; pills match sales-domain conventions). */
.lifecycle-pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--bg);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  text-transform: capitalize;
}
.lifecycle-pill.lifecycle-new          { background: var(--bg);                color: var(--fg-muted); }
.lifecycle-pill.lifecycle-enriched     { background: var(--accent-tint);       color: var(--accent); border-color: var(--accent-tint-2); }
.lifecycle-pill.lifecycle-contacted    { background: rgba(217, 119, 6, 0.10);  color: var(--orange); border-color: rgba(217, 119, 6, 0.25); }
.lifecycle-pill.lifecycle-replied      { background: rgba(217, 119, 6, 0.10);  color: var(--orange); border-color: rgba(217, 119, 6, 0.25); }
.lifecycle-pill.lifecycle-call         { background: rgba(22, 163, 74, 0.10);  color: var(--green);  border-color: rgba(22, 163, 74, 0.25); }
.lifecycle-pill.lifecycle-won          { background: rgba(22, 163, 74, 0.15);  color: var(--green);  border-color: rgba(22, 163, 74, 0.35); font-weight: 700; }
.lifecycle-pill.lifecycle-lost         { background: var(--danger-tint);       color: var(--danger); border-color: rgba(220, 38, 38, 0.25); }
.lifecycle-pill.lifecycle-dormant      { background: var(--bg);                color: var(--fg-muted); border-color: var(--border); }

/* Stage-row inside summary card — compact distribution display. */
.stage-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.4rem;
}

/* Signal-row variants for the engagement-detail page (mirror the
   org ICP-breakdown bands but keyed off engagement category). */
.signal-row.signal-decision    { background: rgba(46, 125, 50, 0.06); }
.signal-row.signal-evaluation  { background: rgba(201, 124, 30, 0.06); }
.signal-row.signal-consideration { background: rgba(25, 118, 210, 0.06); }
.signal-row.signal-awareness   { background: rgba(69, 90, 100, 0.04); }

.signal-meta {
  display: block;
  font-size: 0.7rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.2rem;
}

/* Inline org link inside the contacts table org column.
   Rendered as plain text — the row's primary action is the
   contact name link in the first cell; demoting this avoids
   two accent-colored links per row. Hover gives an underline
   affordance. (visual_design 60-30-10 finding.) */
.org-link-inline {
  color: var(--fg);
  text-decoration: none;
}
.org-link-inline:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Visit-tracking: session history on /contacts/{id}. */
.session-history { list-style: none; padding: 0; margin: 0; }
.session-entry {
  padding: 0.7rem 0.9rem;
  margin: 0.5rem 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.session-entry.session-most-recent {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.session-head {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 0.88rem;
  margin-bottom: 0.4rem;
}
.session-head .when { color: var(--fg-muted); }
.page-visit-list {
  list-style: none;
  padding: 0;
  margin: 0.3rem 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.page-visit-list li::before {
  content: "→ ";
  color: var(--fg-muted);
  margin-right: 0.25rem;
}
.visit-url {
  font-size: 0.82rem;
  color: var(--fg);
  word-break: break-all;
}
.page-visit-fold > summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 0.85rem;
  margin-top: 0.2rem;
}
.visit-queries {
  margin-top: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  font-size: 0.85rem;
}

/* Visit-tracking: last-visited URL chip on the contacts list.
   Rendered as muted metadata — NOT accent-colored — so the row's
   primary action (the contact name link) stays the only accent
   element per row (visual_design 60-30-10 finding). */
.last-page-chip {
  display: inline-block;
  max-width: 18rem;
  padding: 0.1rem 0.45rem;
  background: var(--bg);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.page-sub {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}

.breadcrumb {
  margin: 0 0 1rem 0;
  font-size: 0.85rem;
}
.breadcrumb a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   Sales plan — Phase 8 outreach intel
   ============================================================ */

.sales-plan {
  background: linear-gradient(180deg, var(--accent-tint) 0%, transparent 100%);
  border-left: 3px solid var(--accent);
  padding-left: 1.25rem;
}

.sales-block {
  margin: 0.9rem 0 1.1rem 0;
}

.sales-block-hook {
  background: rgba(22, 163, 74, 0.06);
  border-left: 3px solid var(--green);
  padding: 0.7rem 0.9rem;
  border-radius: 0 4px 4px 0;
  margin-left: -0.7rem;
}

.sales-block-warning {
  background: rgba(217, 119, 6, 0.06);
  border-left: 3px solid var(--orange);
  padding: 0.7rem 0.9rem;
  border-radius: 0 4px 4px 0;
  margin-left: -0.7rem;
}

.sales-prose {
  margin: 0.35rem 0;
  line-height: 1.55;
  color: var(--fg);
}

.sales-prose-soft {
  color: var(--fg-muted);
  font-size: 0.92rem;
}

.sales-details {
  margin-top: 0.4rem;
  font-size: 0.85rem;
}
.sales-details > summary {
  cursor: pointer;
  color: var(--accent);
  user-select: none;
}

.score-pill.demand-horizon {
  background: #1976d2;
  color: #fff;
}

/* ── Phase 6 persistence: /profiles + active-lens badge ─────────── */

/* Lens bar — single-line compact widget. Rewritten 2026-05-16 after
   user feedback that the prior two-row prominent framing oversold
   the feature relative to its visible effect. Now: label, name,
   switcher, "All lenses", and a "?" details affordance — all inline. */
.profile-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem 0 1rem 0;
  padding: 0.3rem 0.6rem;
  background: transparent;
  border-radius: 4px;
  border: 1px solid var(--border);
  flex-wrap: wrap;
  font-size: 0.85rem;
}
.profile-active-label {
  color: var(--fg-muted);
}
.profile-active-name {
  font-weight: 600;
  color: var(--accent);
}
.profile-switcher {
  display: inline-flex;
  align-items: center;
}
.profile-switcher select {
  font: inherit;
  padding: 0.15rem 0.3rem;
  background: var(--bg-elev);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.profile-gallery-link {
  color: var(--fg-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--fg-muted);
}
.profile-gallery-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* "?" explainer — a <details> styled as a small badge. Default
   collapsed so the bar stays single-line; opens an inline panel
   directly below the bar. */
.profile-help {
  display: inline-block;
  margin-left: auto;     /* push to the right edge of the row */
}
.profile-help > summary {
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  line-height: 1.3em;
  text-align: center;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  cursor: help;
  list-style: none;          /* hide the default disclosure marker */
  user-select: none;
}
.profile-help > summary::-webkit-details-marker { display: none; }
.profile-help > summary:hover { color: var(--accent); border-color: var(--accent); }
.profile-help[open] > summary {
  background: var(--accent-tint);
  color: var(--accent);
  border-color: var(--accent);
}
.profile-help-body {
  /* Full-width panel below the bar, anchored to the bar's left edge. */
  flex-basis: 100%;
  margin-top: 0.5rem;
  padding: 0.6rem 0.8rem;
  background: var(--bg-elev);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--fg);
}
.profile-help-body p { margin: 0.3rem 0; }
.profile-help-body p:first-child { margin-top: 0; }
.profile-help-body p:last-child  { margin-bottom: 0; }
.profile-help-desc { color: var(--fg-muted); }
.profile-help-desc strong { color: var(--fg); }

.profile-warning {
  flex-basis: 100%;
  margin: 0.4rem 0 0 0;
  padding: 0.4rem 0.6rem;
  background: rgba(217, 119, 6, 0.10);
  border-left: 3px solid var(--orange);
  font-size: 0.85rem;
}
/* .muted already defined above with var(--fg-muted) — duplicate removed. */

.profiles-list .page-header,
.profile-detail .page-header { margin-bottom: 1rem; }
.profiles-list .page-tagline,
.profile-detail .page-tagline {
  color: var(--fg-muted);
  font-size: 0.95rem;
}
.profiles-list .page-crumb,
.profile-detail .page-crumb {
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
}
.profiles-list .empty-state {
  padding: 1.5rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg-muted);
}

.profiles-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
.profiles-table th,
.profiles-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 0.92rem;
}
.profiles-table th {
  background: var(--bg);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.profile-name {
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
}
.profile-desc { color: var(--fg-muted); max-width: 28rem; }
.profile-use {
  color: var(--accent);
  text-decoration: underline;
  white-space: nowrap;
}

.profile-detail .page-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--fg-muted);
  flex-wrap: wrap;
}
.profile-immutable {
  background: var(--accent-tint);
  color: var(--accent);
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.profile-actions { margin: 1rem 0; }
.action-primary {
  display: inline-block;
  background: var(--accent);
  color: #fff !important;
  padding: 0.5rem 0.9rem;
  border-radius: 4px;
  text-decoration: none !important;
  font-weight: 600;
}

.weights-table {
  width: auto;
  margin: 0.5rem 0 1.5rem 0;
  border-collapse: collapse;
}
.weights-table th,
.weights-table td {
  padding: 0.35rem 0.8rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.weight-pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Phase 7 outreach + disqualification signals ──────────────── */

.outreach-panel,
.signals-panel {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  /* Prevent flex/grid children from forcing the panel wider than its
     parent rail track — the panel itself opts in to shrink. */
  min-width: 0;
  /* Hard belt over the form-control suspenders: clip anything that
     would otherwise paint outside the panel border. Visible in the
     rare case a child element ignores the width clamps. */
  overflow-x: hidden;
}
.outreach-panel .pane-heading,
.signals-panel .pane-heading {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
/* Single-column inside the 360px right rail. The earlier 1fr 1fr
   layout combined with .filter-field select{min-width:12rem} forced
   ~395px of content into ~328px of available width, overflowing
   horizontally and dragging the submit button + actor strings off
   the panel edge. Stacking vertically + clamping form-control min-
   widths to 0 lets every field fit cleanly inside the rail. */
.outreach-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
  min-width: 0;
}
.outreach-form .filter-field {
  margin: 0;
  /* Grid items default to min-width:auto (= content min-width). A
     <select> with options like "meeting_scheduled" or a long input
     placeholder otherwise refuses to shrink, which is what causes
     the panel overflow on a 360px rail. */
  min-width: 0;
}
/* Both .outreach-field-wide and the legacy two-column layout collapse
   to full-width here. Keeping the class so the template doesn't have
   to change and a future wider layout can re-enable it. */
.outreach-field-wide { grid-column: 1 / -1; }
.outreach-form button[type=submit] {
  grid-column: 1 / -1;
  justify-self: start;
}
/* Form controls obey the grid cell width — not their intrinsic
   content / cols-attribute width. box-sizing pulls padding inside
   the 100% so they don't push past the panel border. */
.outreach-form select,
.outreach-form input[type="text"],
.outreach-form textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.outreach-form textarea {
  /* Native default is ~20 cols; ignore that and resize vertically
     only so the textarea can't drag the panel wider when the
     operator pastes a long note. */
  resize: vertical;
  font: inherit;
}

.outreach-list {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0 0;
  min-width: 0;
}
.outreach-row {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  /* Long thread refs (message-ids, URLs) and notes wrap inside the
     row rather than pushing the row's intrinsic width past the
     panel. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.outreach-row:last-child { border-bottom: none; }
.outreach-row code {
  /* <code class="…"> inside a thread-ref doesn't break by default
     and was the load-bearing cause of horizontal overflow on rows
     with long message-IDs. */
  overflow-wrap: anywhere;
  word-break: break-all;
}
.outreach-row-head {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 0.2rem;
  font-size: 0.85rem;
  min-width: 0;
}
.outreach-row-head .when { color: var(--fg-muted); }
.outreach-row-head .actor { color: var(--fg-muted); margin-left: auto; }

/* ── Phase 8a generated sales-plan panel ────────────────────────── */

.generated-plan-panel {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.generated-plan-panel .pane-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.plan-version {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  background: var(--border);
  color: var(--fg);
  font-size: 0.75rem;
  font-family: ui-monospace, monospace;
}
.plan-generator {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.plan-generator.generator-template { background: #5f5f5f; color: #ddd; }
.plan-generator.generator-sonnet-4-6 { background: #1565c0; color: #fff; }
.plan-generator.generator-manual { background: #c97c1e; color: #fff; }

.plan-stale-banner {
  margin: 0.5rem 0;
  padding: 0.5rem 0.7rem;
  background: rgba(217, 119, 6, 0.10);
  color: var(--fg);
  border-left: 3px solid var(--orange);
  font-size: 0.88rem;
  border-radius: 3px;
}

.plan-fallback-note {
  font-size: 0.85rem;
  margin: 0.4rem 0;
}

.plan-actions {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin: 0.6rem 0;
}

.plan-meta {
  font-size: 0.78rem;
  margin: 0.3rem 0 0.6rem 0;
}
.plan-text {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.8rem 1rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88rem;
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 30rem;
  overflow-y: auto;
}
.plan-empty { margin: 0.5rem 0; }

/* Sales plan history page */
.plan-history-list { list-style: none; padding: 0; margin: 0; }
.plan-history-entry {
  padding: 0.8rem 1rem;
  margin: 0.7rem 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-elev);
}
.plan-history-entry.plan-current {
  border-color: var(--accent);
}
.plan-history-head {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
}
.plan-history-head .when { color: var(--fg-muted); }

/* ----------------------------------------------------------------- */
/* Team page (Phase 9d, 2026-05-15)                                  */
/* ----------------------------------------------------------------- */
.team-page .team-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 2rem;
  font-size: 0.95rem;
}
.team-table th,
.team-table td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.team-table th {
  font-weight: 600;
  color: var(--fg-muted);
  border-bottom: 2px solid var(--border);
}
.team-table tr:last-child td { border-bottom: none; }
.team-table-removed td { color: var(--fg-muted); }

.team-notes-form {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}
.team-notes-input {
  flex: 1;
  min-width: 0;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.form-submit-small,
.form-destructive-small {
  font-size: 0.85rem;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--border);
}
.form-submit-small {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.form-destructive-small {
  background: transparent;
  color: var(--fg-danger, #b9322c);
  border-color: var(--fg-danger, #b9322c);
}
.form-destructive-small:hover {
  background: var(--fg-danger, #b9322c);
  color: white;
}
.team-add-form {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  max-width: 700px;
  margin-bottom: 2rem;
}
.team-add-form .filter-field { flex: 1; }

.form-ok {
  background: #e6f6e8;
  color: #1f6b2f;
  padding: 0.5rem 0.7rem;
  border-radius: 4px;
  margin: 0.6rem 0;
  border-left: 4px solid #1f6b2f;
}

.user-menu-link {
  margin-left: 0.6rem;
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 0.9rem;
}
.user-menu-link:hover { color: var(--fg); text-decoration: underline; }

/* ── Phase 9c landing page ────────────────────────────────────── */

.landing-summary { margin-top: 1.5rem; }

.summary-card-clickable {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.summary-card-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.5rem 0;
}
.action-secondary {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--bg-elev);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
}
.action-secondary:hover { filter: brightness(0.97); }

.activity-feed {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
  border-top: 1px solid var(--border);
}
.activity-row {
  display: grid;
  grid-template-columns: 9rem 9rem 1fr;
  gap: 0.5rem 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  align-items: baseline;
  overflow-wrap: anywhere;
}
@media (max-width: 720px) {
  .activity-row { grid-template-columns: 1fr; }
}
.activity-when {
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
}
.activity-kind {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  white-space: nowrap;
}
.activity-kind-outreach { background: rgba(217, 119, 6, 0.10); color: var(--orange); }
.activity-kind-lead     { background: rgba(34, 139, 34, 0.10); color: var(--green); }
.activity-kind-contact  { background: rgba(80, 100, 200, 0.10); color: var(--accent); }
.activity-body { line-height: 1.4; }
.activity-actor { margin-left: 0.4rem; font-size: 0.8rem; }

/* =============================================================
   Contacts panel (PR #105) — replaces the 6-column orgs-table
   render. A fresh org with one sparse contact row looked
   awkward in a wide table (mostly empty cells) and orgs-table
   inherited the mobile horizontal-scroll rule which is wrong
   for an inline panel inside prospect-main. Compact list
   instead: one row per contact, key fields inline + wrap.
   ============================================================= */
.contacts-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.contact-card {
  padding: 0.65rem 0.85rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.contact-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.35rem;
}
.contact-card-name {
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
}
.contact-card-name:hover { text-decoration: underline; }
.contact-card-email {
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}
.contact-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  font-size: 0.85rem;
}
.contact-card-engagement .score-num { font-weight: 600; }
.contact-card-sessions,
.contact-card-lastseen { font-size: 0.8rem; }
.contacts-foot { margin-top: 0.75rem; font-size: 0.85rem; }

/* Inline add-contact button + dialog (2026-05-20). Replaces the
   /leads/new redirect with a modal on _contacts_panel.html. The
   dialog reuses .track-move-dialog for backdrop + chrome — only
   the trigger button and status line are new. */
.contacts-add-btn {
  margin-left: auto;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.25rem 0.7rem;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.contacts-add-btn:hover {
  background: var(--bg-elev);
  border-color: var(--accent);
}
.add-contact-modal { max-width: 480px; min-width: 320px; }
.add-contact-status {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--fg-muted);
}
.add-contact-status.status-error {
  color: var(--danger, #c0392b);
}

/* Per-contact "Enrich" button (PR #107). Lives in the head row so
   it's clearly part of the contact, not a global action. */
.contact-card-enrich-form { margin-left: auto; }
.contact-card-enrich-btn {
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.25rem 0.65rem;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.contact-card-enrich-btn:hover {
  color: var(--fg);
  border-color: var(--fg-muted);
}

/* Per-contact facts list (PR #107). Compact dl: label on the left
   small + muted, value on the right wraps freely. */
.contact-card-facts {
  margin: 0.5rem 0 0 0;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.75rem;
}
.contact-card-fact {
  display: contents;
}
.contact-card-fact > dt {
  font-size: 0.8rem;
  text-transform: capitalize;
  color: var(--fg-muted);
  white-space: nowrap;
}
.contact-card-fact > dd {
  margin: 0;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}
.contact-card-fact[data-confidence="low"] > dd { opacity: 0.7; }

/* =============================================================
   Transcripts panel (A1 PR-1) — BYO-text meeting transcripts.
   Visual: same card-on-elevated-surface idiom as contacts +
   outreach panels (border, radius, padding parity) so the
   rail/main reads as one consistent panel stack.
   ============================================================= */
.transcripts-panel {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  min-width: 0;
}
.transcripts-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.transcripts-panel-header .pane-heading { margin: 0; }
.transcripts-add-btn {
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.25rem 0.65rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.transcripts-add-btn:hover {
  color: var(--fg);
  border-color: var(--fg-muted);
}
.transcripts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.transcript-card {
  padding: 0.65rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.transcript-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  font-size: 0.8rem;
  color: var(--fg-muted);
  margin-bottom: 0.3rem;
}
.transcript-meta time { font-family: ui-monospace, monospace; }
.transcript-source {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.transcript-preview {
  font-size: 0.88rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  margin-bottom: 0.4rem;
}
.transcript-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.transcript-actions button {
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.2rem 0.55rem;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.transcript-actions button:hover {
  color: var(--fg);
  border-color: var(--fg-muted);
}
.transcripts-empty {
  margin: 0;
  font-size: 0.88rem;
  color: var(--fg-muted);
}
.transcript-modal {
  min-width: 320px;
  max-width: 640px;
}
.transcript-modal .transcript-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  min-width: 0;
}
.transcript-modal textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  resize: vertical;
  font: inherit;
  font-size: 0.88rem;
}
.transcript-attach-btn {
  font-size: 0.8rem;
}

@media (max-width: 720px) {
  .transcripts-panel { padding: 0.65rem 0.75rem; }
  .transcripts-panel-header { gap: 0.4rem; }
  .transcript-modal {
    min-width: 0;
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
    max-height: 90vh;
    overflow-y: auto;
    margin: 0.5rem;
  }
}
@media (max-width: 480px) {
  .transcript-card { padding: 0.55rem 0.7rem; }
  .transcript-actions { width: 100%; }
  .transcript-actions button { flex: 1 1 45%; }
}

/* =============================================================
   Mobile / narrow-viewport pass (PR #75, 2026-05-16).

   Pre-this-pass coverage was patchy: viewport meta tag was set
   and a handful of components had @media breakpoints (.summary-
   row, .activity-row, .org-detail-grid), but the main prospect
   table, filter row, and 6 other table classes all overflowed
   the viewport on phones. This section consolidates the mobile
   rules at two breakpoints — 720px (tablet/portrait phone) and
   480px (narrow phone).

   Strategy:
   - Wide tables get `display: block; overflow-x: auto` at 720px
     so they scroll horizontally rather than push the page wider
     than the viewport. The cells render via the table's normal
     intrinsic sizing; the cells stop using table-layout but the
     visual is close enough for read-only inspection.
   - Filter rows + multi-column forms drop their min-widths so
     fields wrap naturally; below 480px they stack one per line.
   - Site chrome (header padding, main padding) shrinks.
   ============================================================= */

/* --- 720px: tablet portrait / large phone landscape ---------- */
@media (max-width: 720px) {
  /* Site chrome: shrink padding so content uses the whole width. */
  .site-main { padding: 0.75rem; }
  .site-header { padding: 0.5rem 0.75rem; gap: 0.75rem; flex-wrap: wrap; }
  .secondary-nav { padding: 0.4rem 0.75rem; gap: 0.8rem; flex-wrap: wrap; }

  /* Wide tables: scroll horizontally instead of overflowing the
     viewport. `display: block` on <table> drops the table-cell
     layout model but the cells still render; the scroll happens
     on the table element itself. iOS 15+ has native momentum
     scrolling so no -webkit-overflow-scrolling needed (the
     property was removed from the CSS spec; aspie iter-1 nit on
     PR #75). */
  .orgs-table,
  .tiers-table,
  .team-table,
  .profiles-table,
  .audit-table,
  .discovery-runs-table,
  .weights-table {
    display: block;
    overflow-x: auto;
    width: 100%;
    /* Visual cue that there's more content to the right. */
    background-image:
      linear-gradient(to right, var(--bg-elev) 30%, rgba(255, 255, 255, 0)),
      linear-gradient(to right, rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0) 30%);
    background-position: left, right;
    background-repeat: no-repeat;
    background-size: 24px 100%, 12px 100%;
    background-attachment: local, scroll;
  }

  /* Filter row: drop min-widths so the 5 fields can wrap to two
     rows instead of stretching the viewport. */
  .orgs-filter { gap: 0.75rem; padding: 0.5rem 0.75rem; }
  .orgs-filter .filter-field { flex: 1 1 45%; min-width: 0; }
  .filter-field select,
  .orgs-filter select,
  .orgs-filter input { min-width: 0; width: 100%; }

  /* Lens bar: ensure the explainer panel doesn't crowd the bar. */
  .profile-bar { padding: 0.4rem 0.5rem; }
  .profile-help { margin-left: 0; }

  /* Org-detail grid: at 720px the existing 800px rule has already
     fired (`.org-detail-grid { grid-template-columns: 1fr; }`),
     so a re-declaration here would be redundant. Tighten the gap
     instead — that IS narrower than what the 800px rule does
     (which doesn't touch gap). aspie + sieve iter-1 on PR #75. */
  .org-detail-grid { gap: 1rem; }

  /* Headings + summary values: cap font-size growth at narrow
     widths to avoid 1.85rem values eating multiple lines. The
     h1 selector is scoped to .site-main so it doesn't silently
     shadow headings in future surfaces outside the main column
     (aspie iter-1/iter-2 nit on PR #75 — broad element selectors
     create invisible coupling). */
  .summary-value      { font-size: 1.4rem; }
  .prospect-name      { font-size: 1.3rem; }
  .site-main h1       { font-size: 1.3rem; }

  /* Agent bar (fixed-bottom variant): cap shorter on mobile so it
     doesn't eat ~half the phone viewport. Was 50vh; on a 667px
     iPhone the bar could occupy 333px, leaving 333px for content
     above. 35vh = ~230px is generous enough to read a few chat
     turns without dominating the screen. The body-padding
     observer in agent-bar.js automatically follows the rendered
     height, so content above always has scroll buffer. */
  .agent-bar:not(.agent-bar--inline) { max-height: 35vh; }
  .agent-scrollback { max-height: 25vh; }

  /* Modal dialogs: shrink to fit narrow viewports. The default
     min-width: 320px + max-width: 480px ran the dialog right to
     the edges on a 360px portrait phone with no breathing room. */
  .track-move-dialog {
    min-width: 0;
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
    max-height: 90vh;
    overflow-y: auto;
    margin: 0.5rem;
  }
  .track-move-dialog .label-form { padding: 0.75rem; }
  .track-move-dialog .dialog-buttons {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .track-move-dialog .form-submit,
  .track-move-dialog .form-cancel { flex: 1 1 45%; }

  /* Right rail spacing tighter on mobile so the long accordion
     stack doesn't push the agent bar way down the page. */
  .prospect-rail { gap: 1rem; }
  .prospect-header { padding: 0.85rem 1rem; }
  .rail-fold { padding: 0 0.75rem; }
}

/* --- 480px: narrow phone (portrait) -------------------------- */
@media (max-width: 480px) {
  /* Filter fields stack one per line at the tightest viewport. */
  .orgs-filter { flex-direction: column; align-items: stretch; }
  .orgs-filter .filter-field { flex-basis: auto; width: 100%; }

  /* Site header: brand on its own line, controls below. */
  .site-header { flex-direction: column; align-items: stretch; }
  .audit-nav { margin-left: 0; }

  /* User widget: vertical stack to avoid horizontal overflow. */
  .user-widget {
    flex-direction: column;
    align-items: flex-start;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    gap: 0.25rem;
  }

  /* Tighten body padding further on the smallest screens. */
  .site-main { padding: 0.5rem; }

  /* Agent bar even shorter at portrait phone widths. */
  .agent-bar:not(.agent-bar--inline) { max-height: 30vh; }
  .agent-scrollback { max-height: 22vh; }

  /* Tap-target floor: WCAG 2.5.8 minimum 24×24px, Apple HIG
     recommends 44×44px. Promote buttons, links-as-buttons, and
     interactive pills to ≥40px tall on phones. */
  .form-submit,
  .form-cancel,
  .action-primary,
  .action-secondary,
  .agent-pending-confirm,
  .agent-pending-cancel,
  .agent-submit {
    min-height: 40px;
  }
  /* Accordion summaries (right-rail folds) — easier to tap. */
  .rail-fold > summary { padding: 0.85rem 0; }
  /* Pills + lifecycle chips: a bit more horizontal padding so
     they're easier to hit accurately. */
  .lifecycle-pill { padding: 0.25rem 0.6rem; }

  /* Form inputs: full width inside dialogs so they're not narrow
     ribbons in the middle of the phone screen. */
  .track-move-dialog .filter-field input,
  .track-move-dialog .filter-field select,
  .track-move-dialog .filter-field textarea { width: 100%; }
}

/* ============================================================
 * Command bar (design-command-bar.md §6)
 * Fixed-bottom bar with an in-memory scrollback above the input.
 * PR-1: resting + active states. Scrollback persistence (and the
 * polished new-conversation / countdown UI) lands in PR-5.
 * ============================================================ */
.agent-bar {
  background: #1c1c1c;
  color: #f1f1f1;
  border-top: 1px solid #2a2a2a;
  display: flex;
  flex-direction: column;
}
.agent-bar:not(.agent-bar--inline) {
  /* Fixed-bottom variant for non-landing pages.
     PR #121 (this branch): max-height dropped from 50vh -> 35vh
     because the bar now defaults to collapsed (input-only) on
     mount; when the operator expands the scrollback, 35vh total
     comfortably holds the input row + the 30vh scrollback set in
     `.agent-bar:not(.agent-bar--collapsed):not(.agent-bar--inline)
     .agent-scrollback` below. */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  max-height: 35vh;
}
.agent-bar--inline {
  /* PR #95: inline variant rendered at the top of the landing
     page. Bordered on all sides + rounded so it reads as a
     distinct interactive surface (not an unstyled strip).
     max-height moved into each variant so divergent values
     (smaller cap on the inline bar so it doesn't eat the
     viewport) are easy to apply later — aspie/wicket iter-1
     on PR #96. */
  position: static;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  margin: 0 0 1.25rem 0;
  max-height: 50vh;
}
.agent-scrollback {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  line-height: 1.4;
  max-height: 40vh;
}
.agent-scrollback:empty { display: none; }

/* Collapsible scrollback (PR #121 — this branch).
   On the fixed-bottom variant the bar defaults to collapsed
   (just-the-input, ~4rem tall) on every page load. Operator
   clicks .agent-bar-toggle to slide the scrollback open; click-
   outside or Escape collapses it again (handled in agent-bar.js).

   Inline-on-landing variant is intentionally NOT collapsible —
   it's a top-of-page surface where the conversation IS the
   primary content. The two `.agent-bar:not(.agent-bar--inline)`
   selectors below scope the collapse behavior to the fixed bar. */
.agent-bar.agent-bar--collapsed .agent-scrollback {
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  border: 0;
  transition: max-height 0.18s ease-out;
}
.agent-bar:not(.agent-bar--collapsed):not(.agent-bar--inline) .agent-scrollback {
  /* Expanded state on the fixed-bottom variant. 30vh (was an
     implicit 40vh on the base .agent-scrollback rule above)
     because the operator complained about the bar eating screen
     real estate. */
  max-height: 30vh;
  transition: max-height 0.18s ease-out;
}

/* Toggle button — chevron at the top edge of the fixed-bottom
   bar that opens/closes the scrollback. Always visible so the
   operator knows the history is one click away (even when the
   scrollback is empty and the click is a no-op). */
.agent-bar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  background: #232323;
  color: #c8c8c8;
  border: none;
  border-bottom: 1px solid #2a2a2a;
  padding: 0.25rem 1rem;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  user-select: none;
}
.agent-bar-toggle:hover { background: #2a2a2a; color: #f1f1f1; }
.agent-bar-toggle:focus-visible {
  outline: 2px solid #4a8cff;
  outline-offset: -2px;
}
.agent-bar-toggle-icon {
  display: inline-block;
  font-size: 0.9rem;
  line-height: 1;
  transition: transform 0.18s ease-out;
}
/* Chevron points up (^) when collapsed = "click to expand".
   Rotates 180deg to point down when expanded = "click to collapse". */
.agent-bar-toggle[aria-expanded="true"] .agent-bar-toggle-icon {
  transform: rotate(180deg);
}
/* Inline-on-landing variant has no collapse affordance. */
.agent-bar--inline .agent-bar-toggle { display: none; }

/* Accessible "screen-reader only" helper for the toggle label
   text. The button keeps a visible chevron + visible word
   ("Show"/"Hide") but the long form ("conversation history")
   is hidden visually and only read by AT. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.agent-msg {
  padding: 0.35rem 0.6rem;
  margin: 0.2rem 0;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}
.agent-msg--user { background: #2a2a2a; color: #f8f8f8; }
.agent-msg--assistant { background: #14342a; color: #e9f5ee; }
.agent-msg--error { background: #3a1a1a; color: #f8d8d8; }
.agent-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid #2a2a2a;
}
.agent-input {
  flex: 1 1 auto;
  background: #2a2a2a;
  color: #f8f8f8;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  font: inherit;
}
.agent-input:focus { outline: 2px solid #4a8cff; outline-offset: -1px; }
.agent-submit {
  background: #4a8cff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font: inherit;
}
.agent-submit:hover { background: #3a7cff; }
.agent-submit:disabled { background: #555; cursor: not-allowed; }
/* Make room at the bottom of the page for the fixed-bottom
 * agent-bar so content doesn't disappear behind it.
 *
 * Operator feedback 2026-05-18 (PR #102): the prior 3rem
 * fixed padding was nowhere near the bar's runtime height —
 * the bar caps at 50vh (via .agent-bar:not(.agent-bar--inline))
 * so a chat with many turns blocks the bottom ~half of every
 * non-landing page with no scroll buffer.
 *
 * agent-bar.js now sets --agent-bar-pad on document.body via
 * ResizeObserver when the fixed-bottom bar mounts; the
 * fallback (3rem) covers the empty/initial state before the
 * observer fires AND the inline-on-landing case where no
 * fixed bar exists. */
body { padding-bottom: var(--agent-bar-pad, 3rem); }

/* Confirm/Cancel card for staged destructive actions
 * (design-command-bar.md §4.2). Distinct visual tier from
 * normal message bubbles so the human-in-loop step is obvious. */
.agent-pending-card {
  background: #3a2a14;
  border: 1px solid #6a4a24;
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  margin: 0.4rem 0;
  color: #f9e8c8;
}
.agent-pending-label {
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.agent-pending-buttons {
  display: flex;
  gap: 0.5rem;
}
.agent-pending-confirm,
.agent-pending-cancel {
  border: none;
  border-radius: 4px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
.agent-pending-confirm { background: #4a8cff; color: #fff; }
.agent-pending-confirm:hover { background: #3a7cff; }
.agent-pending-cancel { background: #555; color: #f8f8f8; }
.agent-pending-cancel:hover { background: #666; }
.agent-pending-confirm:disabled,
.agent-pending-cancel:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* PR-edit-in-place: inline Edit/Delete buttons on labels +
   outreach rows. */
.link-button {
  background: none;
  border: none;
  color: var(--fg-link, #2266cc);
  padding: 0 6px;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}
.link-button.danger { color: #b03a2e; }
.link-button:hover { background: #f0f0f0; }

.outreach-actions {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}

details.inline-edit {
  display: inline-block;
}
details.inline-edit > summary {
  list-style: none;
  cursor: pointer;
}
details.inline-edit > summary::-webkit-details-marker { display: none; }
.inline-edit-form,
.outreach-edit-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  padding: 8px;
  background: var(--bg-pane, #fafafa);
  border: 1px solid var(--border-subtle, #e0e0e0);
  border-radius: 4px;
}
.inline-edit-input,
.outreach-edit-textarea {
  width: 100%;
  font-family: inherit;
}
.inline-action-form,
.inline-delete-form {
  display: inline;
}

.audit-actions { white-space: nowrap; }
.audit-actions-col { width: 1%; }
.audit-row-deleted { opacity: 0.6; }
.audit-row-deleted .audit-when,
.audit-row-deleted code { text-decoration: line-through; }
.audit-edited, .audit-deleted-marker, .outreach-edited {
  font-size: 0.85em;
  margin-left: 4px;
}

/* Enrichment progress overlay (PR feat-enrich-progress-overlay).
   Surfaced when the operator triggers a synchronous LLM-driven
   enrichment (org-create with "Enrich now", "Refresh search
   enrichment" on the detail page, or per-contact "Enrich") so the
   30-90s wait shows a visible "in progress" signal rather than a
   stalled browser loading bar. Pure client-side: the form/POST
   continues blocking under the overlay; if the operator closes the
   tab the server-side enrichment still completes. The overlay
   element lives in base.html and is toggled by enrich-overlay.js. */
.enrich-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  color: #f1f1f1;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}
.enrich-overlay.active { display: flex; }
.enrich-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #444;
  border-top-color: #4cb;
  border-radius: 50%;
  animation: enrich-spin 0.9s linear infinite;
}
@keyframes enrich-spin { to { transform: rotate(360deg); } }
.enrich-overlay-text {
  font-size: 1.05rem;
  max-width: 32rem;
  text-align: center;
  line-height: 1.5;
}
.enrich-overlay-text strong {
  display: block;
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
}
.enrich-overlay-text small {
  display: block;
  margin-top: 0.6rem;
  opacity: 0.75;
}

/* ----- 2026-05-20: inline add-contact-from-org-page ----- */
/* Compact button living in the contacts-panel header. Same visual
   weight as the per-card Enrich button so the operator perceives them
   as same-tier verbs ("add" / "enrich"). */
.contacts-add-btn {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  background: var(--bg-elev);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  vertical-align: middle;
}
.contacts-add-btn:hover {
  filter: brightness(1.1);
}
/* Inline error inside the add-contact modal — reuses .track-move-dialog
   chrome. Hidden when empty; shows in error color when populated. */
.dialog-error {
  margin: 0.25rem 0 0;
  min-height: 1.1rem;
  font-size: 0.85rem;
  color: var(--danger, #c2410c);
}
.dialog-error:empty { display: none; }


/* ----- 2026-07-31: quick-search UX polish ----- */
/* Search input anchored LEFT so it sits visually above the Company
   column header (Dave 2026-07-31 iter-3). Fixed max-width matches
   the Company column's approximate width; height explicitly set so
   the input isn't compressed by the browser's default type=search
   styling. */
.orgs-quick-search-wide {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  justify-content: flex-start;
  margin: 0.75rem 0 0.5rem;
}
.orgs-quick-search-input {
  flex: 0 1 340px;
  min-width: 220px;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  line-height: 1.35;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-elev, #fff);
  color: var(--fg);
  -webkit-appearance: none;
  appearance: none;
}
.orgs-quick-search-input:focus {
  outline: 2px solid var(--accent, #1d64d1);
  outline-offset: 1px;
}
.orgs-quick-search-clear {
  flex: 0 0 auto;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  background: var(--bg-elev);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
}
.orgs-quick-search-clear:hover {
  filter: brightness(1.05);
}
/* Sort-header anchors: keep label + arrow glyph on one line so the
   arrow doesn't wrap under the label when columns get narrow
   (Dave 2026-07-31 iter-3 report). */
.orgs-th-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
}
.orgs-th-sort .sort-hint { opacity: 0.35; }
.orgs-th-sort.is-active { font-weight: 600; }

/* Hearth inbox pill + inbox cards (2026-07-31). */
.hearth-inbox-pill {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  background: var(--accent-bg, #eef4ff);
  color: var(--accent, #1d64d1);
  border-radius: 999px;
  text-decoration: none;
  margin-right: 0.5rem;
}
.hearth-inbox-pill:hover { filter: brightness(0.97); }
.hearth-inbox-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.hearth-inbox-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elev, #fff);
}
.hearth-inbox-name { margin: 0; font-size: 1.05rem; }
.hearth-inbox-domain code { padding: 0 0.35rem; background: var(--bg-elev); }
.hearth-inbox-slug { font-family: monospace; font-size: 0.82rem; margin-left: 0.5rem; }
.hearth-inbox-stats { grid-column: 1 / -1; font-size: 0.85rem; }
.hearth-inbox-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}