:root {
  --bg: #f8f7f4;
  --bg-2: #efeee9;
  --panel: #ffffff;
  --panel-soft: #fbfaf7;
  --panel-tint: #f0fdfa;
  --ink: #111719;
  --ink-soft: #3c4852;
  --muted: #66737f;
  --faint: #98a4af;
  --line: #e5e5df;
  --line-strong: #c9ccc4;
  --nav: #11171a;
  --nav-2: #171d20;
  --teal: #0f766e;
  --teal-dark: #134e4a;
  --teal-soft: #f0fdfa;
  --blue: #2f5bd7;
  --blue-soft: #e8eeff;
  /* --green / --green-soft deleted here (review-desk-craft): three :root blocks declared the
     same token with three different values, all at equal specificity, so this
     one only ever lost. The single surviving declaration is in the "Mandate
     brand override" :root -- --green: #225B3A, --green-soft: #E0EBE3. */
  --amber: #b46a17;
  --amber-soft: #fff1d6;
  --violet: #6757d9;
  --violet-soft: #edeaff;
  --red: #b42318;
  --danger: #b42318;
  --danger-soft: #fde7e9;
  --radius: 8px;
  --shadow: none;
  --shadow-soft: none;
  --focus: 0 0 0 2px rgba(15, 118, 110, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: progress;
  opacity: 0.66;
  transform: none !important;
}

button.is-disabled,
button.is-disabled:hover {
  cursor: not-allowed;
  opacity: 0.54;
  border-color: var(--line);
  background: #f4f5f3;
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  color: #ffffff;
  font-size: 1.04rem;
  line-height: 1.08;
}

h2 {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--ink);
  font-size: 2.15rem;
  line-height: 1.02;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 0;
  font-size: 1.22rem;
  line-height: 1.14;
  letter-spacing: 0;
}

h4 {
  margin-bottom: 0;
}

.hidden {
  display: none !important;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.login-screen,
.setup-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(rgba(17, 23, 25, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 23, 25, 0.04) 1px, transparent 1px),
    var(--bg);
  background-size: 40px 40px;
}

.setup-shell {
  width: min(980px, calc(100vw - 40px));
  display: grid;
  grid-template-columns: minmax(360px, 560px) minmax(280px, 1fr);
  gap: 16px;
  align-items: stretch;
}

.login-card,
.setup-card {
  width: min(440px, 100%);
  display: grid;
  gap: 14px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  color: #f8fafc;
  background:
    linear-gradient(135deg, rgba(0, 122, 112, 0.22), transparent 44%),
    var(--nav);
  box-shadow: var(--shadow);
}

.login-card .eyebrow,
.login-card p,
.login-card label,
.setup-card .eyebrow,
.setup-card p,
.setup-card label,
.setup-card small {
  color: #c8d3dc;
}

.login-card h1,
.setup-card h1 {
  font-size: 1.95rem;
}

.login-card label,
.setup-card label,
.filter-row label,
.scanner-panel label,
.discover-panel label,
.custom-discover-panel label,
.search-discover-panel label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 850;
}

.setup-card {
  width: 100%;
}

.setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.setup-grid.setup-grid-single {
  grid-template-columns: 1fr;
}

.setup-card small {
  font-size: 0.72rem;
  font-weight: 650;
}

.setup-guide-card {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
}

.setup-guide-card h2 {
  max-width: none;
  color: var(--ink);
  font-size: 2rem;
  line-height: 1.02;
}

.setup-guide-list {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px 12px;
}

.setup-guide-list span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid #b9dacf;
  border-radius: 999px;
  color: var(--teal-dark);
  background: var(--teal-soft);
  font-size: 0.72rem;
  font-weight: 900;
}

.setup-guide-list p,
.setup-safety-note span {
  margin: 0;
  color: #52606e;
  line-height: 1.5;
}

.setup-guide-list strong,
.setup-safety-note strong {
  display: block;
  color: var(--ink);
}

.setup-safety-note {
  display: grid;
  gap: 6px;
  padding: 13px;
  border: 1px solid #dce4df;
  border-radius: var(--radius);
  background: #fbfaf7;
}

.form-error {
  min-height: 20px;
  margin-bottom: 0;
  color: #ffb4ac;
  font-weight: 780;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 18px 13px;
  color: #f8fafc;
  background:
    linear-gradient(180deg, rgba(0, 122, 112, 0.18), transparent 22%),
    linear-gradient(155deg, var(--nav) 0, var(--nav-2) 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  /* Reviewer: on laptop heights the 11-tab list was overflowing the 100vh
     sidebar and the bottom items got clipped. Bound the sidebar then let
     nav-tabs scroll internally — the sidebar-note still anchors via
     margin-top: auto inside the same flex column. */
  overflow: hidden;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 6px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  color: #ffffff;
  background:
    linear-gradient(135deg, var(--teal), #203a78 58%, #22272a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font-size: 0.78rem;
  font-weight: 950;
}

.sidebar .eyebrow {
  color: #96a9b8;
}

.nav-tabs {
  display: grid;
  gap: 5px;
  /* Reviewer: short-laptop heights need the nav list to scroll internally
     rather than overflow the sidebar box. flex: 1 1 auto + min-height: 0
     lets this child shrink inside the flex column; overflow-y: auto
     adds the scroll only when the list is taller than available space. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.nav-tab {
  position: relative;
  min-height: 41px;
  padding: 10px 12px 10px 43px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: #cdd7de;
  background: transparent;
  text-align: left;
  font-weight: 820;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.nav-tab::before {
  position: absolute;
  left: 11px;
  top: 50%;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #b9c7d1;
  background: rgba(255, 255, 255, 0.04);
  content: attr(data-icon);
  font-size: 0.56rem;
  font-weight: 950;
  transform: translateY(-50%);
}

.nav-tab:hover,
.nav-tab.active {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transform: translateX(1px);
}

.nav-tab.active::before {
  border-color: rgba(151, 191, 56, 0.42);
  color: #f9ffef;
  background: linear-gradient(135deg, var(--teal), var(--green));
}

.sidebar-note {
  margin-top: auto;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.055);
}

.sidebar-note p {
  margin-bottom: 0;
  color: #cad5dc;
  font-size: 0.83rem;
  line-height: 1.44;
}

.sidebar-note .note-title {
  margin-bottom: 5px;
  color: #ffffff;
  font-weight: 880;
}

.workspace {
  min-width: 0;
  padding: 6px 24px 16px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: -24px -24px 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(217, 227, 234, 0.9);
  /* Reviewer: blur was leaking ghost-rows of scrolled content through the
     sticky topbar at laptop sizes. Use near-opaque paper instead of the
     1180-era translucent panel. The blur stays as a fallback for browsers
     that ignore the alpha bump but it no longer dominates the visual. */
  background: rgba(248, 245, 239, 0.98);
  backdrop-filter: blur(16px);
}

.topbar-copy {
  min-width: 0;
}

.workspace-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 850;
}

.workspace-status span:not(.live-dot) {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(31, 122, 75, 0.16);
}

.topbar-actions,
.filter-row,
.detail-actions,
.stage-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.topbar-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.primary-button,
.secondary-button,
.ghost-button,
.icon-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 8px 12px;
  color: var(--ink);
  background: var(--panel);
  font-weight: 840;
  line-height: 1;
  box-shadow: var(--shadow-soft);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.primary-button,
.icon-button {
  border-color: var(--teal-dark);
  color: #ffffff;
  background: linear-gradient(135deg, var(--teal), #0b675f);
  box-shadow: 0 12px 22px rgba(0, 122, 112, 0.18);
}

.ghost-button {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}

.secondary-button:hover,
.ghost-button:hover,
.primary-button:hover,
.icon-button:hover {
  border-color: var(--teal);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.button-icon,
.icon-button span {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 0 4px;
  font-size: 0.62rem;
  font-weight: 950;
  line-height: 1;
  opacity: 0.72;
}

.command-center {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(240px, 0.72fr) minmax(210px, 0.48fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  color: #edf4f4;
  background:
    linear-gradient(135deg, rgba(0, 122, 112, 0.28), transparent 36%),
    linear-gradient(180deg, #111719 0, #17201f 100%);
  box-shadow: var(--shadow);
}

.command-panel {
  display: grid;
  align-content: space-between;
  gap: 18px;
  min-height: 168px;
}

.command-panel .eyebrow {
  color: #9fb0bf;
}

.command-panel h3 {
  max-width: 580px;
  color: #ffffff;
  font-size: 1.72rem;
  line-height: 1.04;
}

.command-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.command-meta span {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  color: #d9e5e8;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.76rem;
  font-weight: 850;
}

.market-matrix {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  align-content: center;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    rgba(255, 255, 255, 0.045);
  background-size: 20px 20px;
}

.market-matrix span {
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
}

.market-matrix .cool {
  background: rgba(47, 91, 215, 0.46);
}

.market-matrix .warm {
  background: rgba(180, 106, 23, 0.58);
}

.market-matrix .hot {
  background: rgba(0, 122, 112, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.source-ledger {
  display: grid;
  gap: 8px;
}

.source-ledger article {
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 48px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
}

.source-ledger span {
  color: #aebdc8;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.source-ledger strong {
  color: #ffffff;
  font-size: 1.25rem;
  line-height: 1;
}

.command-center,
.intelligence-strip {
  display: none;
}

body[data-active-tab="discover"] .kpi-grid {
  display: none;
}

body:not([data-active-tab="discover"]) .kpi-grid {
  margin-bottom: 16px;
}

body:not([data-active-tab="discover"]) .kpi-tile {
  min-height: 74px;
  display: grid;
  align-content: center;
  padding: 11px 13px;
}

body:not([data-active-tab="discover"]) .kpi-tile::before {
  width: 28px;
  height: 3px;
  margin-bottom: 8px;
}

body:not([data-active-tab="discover"]) .kpi-tile strong {
  margin: 3px 0 0;
  font-size: 1.25rem;
}

body:not([data-active-tab="discover"]) .kpi-detail {
  display: none;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.kpi-tile {
  position: relative;
  min-height: 104px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.kpi-tile::before {
  display: block;
  width: 42px;
  height: 4px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: var(--teal);
  content: "";
}

.kpi-tile::after {
  position: absolute;
  right: -20px;
  bottom: -28px;
  width: 110px;
  height: 72px;
  border: 1px solid rgba(0, 122, 112, 0.12);
  border-radius: var(--radius);
  content: "";
  transform: rotate(-12deg);
}

.accent-blue::before {
  background: var(--blue);
}

.accent-amber::before {
  background: var(--amber);
}

.accent-green::before {
  background: var(--green);
}

.kpi-tile strong {
  position: relative;
  z-index: 1;
  display: block;
  margin: 7px 0 5px;
  font-size: 1.72rem;
  line-height: 1;
}

.kpi-label,
.kpi-detail,
.meta-label {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-size: 0.78rem;
}

.kpi-label {
  font-weight: 850;
}

.intelligence-strip {
  display: grid;
  grid-template-columns: 1.15fr 0.92fr 0.92fr;
  gap: 12px;
  margin-bottom: 20px;
}

.intelligence-strip article {
  position: relative;
  min-height: 112px;
  padding: 15px 16px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(0, 122, 112, 0.08), rgba(47, 91, 215, 0.04)),
    rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.intelligence-strip article::after {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(0, 122, 112, 0.12);
  border-radius: var(--radius);
  content: "";
  transform: rotate(12deg);
}

.intelligence-strip span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.71rem;
  font-weight: 900;
  text-transform: uppercase;
}

.intelligence-strip strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 6px;
  font-size: 1.24rem;
  line-height: 1.08;
}

.intelligence-strip p {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin-bottom: 0;
  color: var(--ink-soft);
  line-height: 1.42;
}

body[data-active-tab="discover"] .command-center,
body[data-active-tab="discover"] .intelligence-strip {
  display: none;
}

body[data-active-tab="home"] .command-center,
body[data-active-tab="home"] .intelligence-strip {
  display: grid;
}

body[data-active-tab="home"] .kpi-grid {
  display: grid;
  margin-bottom: 16px;
}

body[data-active-tab="home"] .kpi-tile {
  min-height: 96px;
  padding: 14px;
}

body[data-active-tab="home"] .kpi-tile strong {
  font-size: 1.54rem;
}

body[data-active-tab="home"] .kpi-detail {
  display: inline;
}

body[data-active-tab="home"] .command-center,
body[data-active-tab="home"] .kpi-grid,
body[data-active-tab="home"] .intelligence-strip {
  display: none;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.view-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.view-copy {
  max-width: 560px;
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.48;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.38fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 14px;
  padding: 0;
  border: 1px solid rgba(9, 32, 30, 0.18);
  border-radius: 8px;
  color: #ffffff;
  background: #0e2421;
  box-shadow: 0 16px 34px rgba(18, 24, 31, 0.12);
  overflow: hidden;
}

.home-hero-main {
  min-width: 0;
  padding: 24px;
}

.home-hero h3 {
  max-width: 720px;
  margin-bottom: 8px;
  color: #ffffff;
  font-size: 1.58rem;
  line-height: 1.08;
}

.home-hero p {
  max-width: 760px;
  margin: 0;
  color: #c7d4d0;
  line-height: 1.5;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  margin-top: 18px;
}

.home-hero .eyebrow {
  color: #97b6b0;
}

.home-hero .secondary-button {
  border-color: rgba(255, 255, 255, 0.18);
  color: #f8fbfb;
  background: rgba(255, 255, 255, 0.08);
}

.home-hero-spotlight {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
  padding: 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent),
    rgba(255, 255, 255, 0.045);
}

.home-hero-spotlight span {
  color: #9eb8b3;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.home-hero-spotlight strong {
  color: #ffffff;
  font-size: 1.08rem;
}

.home-hero-spotlight p {
  font-size: 0.84rem;
}

.home-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.home-stat-card,
.home-panel {
  border: 1px solid #dce4ec;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(18, 24, 31, 0.035);
}

.home-stat-card {
  width: 100%;
  padding: 14px;
  text-align: left;
  cursor: pointer;
}

.home-stat-card:hover {
  border-color: rgba(0, 127, 115, 0.28);
  background: #f8fcfb;
}

.home-overview span {
  display: block;
  color: #667085;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.home-overview strong {
  display: block;
  margin: 7px 0 5px;
  color: #111820;
  font-size: 1.52rem;
  line-height: 1;
}

.home-overview p {
  margin: 0;
  color: #5d6b78;
  font-size: 0.82rem;
  line-height: 1.42;
}

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 14px;
  margin-bottom: 14px;
}

.home-support-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.86fr);
  gap: 14px;
}

.home-panel {
  min-width: 0;
  padding: 15px;
}

.home-panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.home-panel h4 {
  margin-top: 3px;
  color: #111820;
  font-size: 1rem;
}

.home-focus-list,
.home-route-list {
  display: grid;
  gap: 8px;
}

.home-focus-row,
.home-route-list button {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 1px solid #dfe7ef;
  border-radius: 8px;
  background: #fbfcfd;
  text-align: left;
}

.home-focus-row {
  grid-template-columns: 30px minmax(0, 1fr) auto;
  padding: 10px;
}

/* FE-019: due-tomorrow callout. Sits above the regular queue as its own
   clickable bar so a single imminent follow-up reads "act now" rather
   than getting absorbed into the standard queue rhythm. Burgundy-tinted
   accent, dashed-ish urgency without screaming. */
.home-due-tomorrow-callout {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "eyebrow cta"
    "body cta";
  align-items: center;
  gap: 2px 12px;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid rgba(124, 31, 42, 0.32);
  border-left: 3px solid var(--mandate-red, #7C1F2A);
  border-radius: 8px;
  background: rgba(124, 31, 42, 0.04);
  text-align: left;
  color: var(--ink, #0F1419);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.home-due-tomorrow-callout:hover,
.home-due-tomorrow-callout:focus-visible {
  background: rgba(124, 31, 42, 0.08);
  border-color: rgba(124, 31, 42, 0.5);
  outline: none;
}

.home-due-tomorrow-eyebrow {
  grid-area: eyebrow;
  color: var(--mandate-red, #7C1F2A);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-due-tomorrow-body {
  grid-area: body;
  display: block;
}

.home-due-tomorrow-body strong {
  display: block;
  color: var(--ink, #0F1419);
}

.home-due-tomorrow-body small {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft, #5A5754);
  font-size: 0.82rem;
}

.home-due-tomorrow-cta {
  grid-area: cta;
  color: var(--mandate-red, #7C1F2A);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.home-focus-row strong,
.home-focus-row small,
.home-route-list strong,
.home-route-list span {
  display: block;
}

.home-focus-row small,
.home-route-list span {
  margin-top: 3px;
  color: #667085;
  font-size: 0.8rem;
}

.home-focus-row em {
  color: #667085;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.home-route-list button {
  grid-template-columns: minmax(0, 1fr);
  padding: 12px;
}

.home-focus-row:hover,
.home-route-list button:hover {
  border-color: rgba(0, 127, 115, 0.28);
  background: #f4fbfa;
}

.home-route-list button.is-disabled:hover {
  border-color: var(--line);
  background: #f4f5f3;
}

.home-pipeline-list {
  display: grid;
  gap: 7px;
}

.home-pipeline-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(110px, 0.5fr) 36px minmax(120px, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #dfe7ef;
  border-radius: 8px;
  color: #344054;
  background: #fbfcfd;
  text-align: left;
}

.home-pipeline-row strong {
  text-align: right;
}

.home-pipeline-row i {
  height: 7px;
  border-radius: 999px;
  background: #edf2f6;
  overflow: hidden;
}

.home-pipeline-row b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.home-coverage-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.home-coverage-list div {
  min-width: 0;
  padding: 12px;
  border: 1px solid #dfe7ef;
  border-radius: 8px;
  background: #fbfcfd;
}

.home-coverage-list strong,
.home-coverage-list span {
  display: block;
}

.home-coverage-list strong {
  color: #111820;
  font-size: 1.2rem;
}

.home-coverage-list span {
  margin-top: 4px;
  color: #667085;
  font-size: 0.75rem;
  font-weight: 850;
}

input,
select,
textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 8px 10px;
  color: var(--ink);
  background: #ffffff;
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: rgba(102, 115, 127, 0.54);
  font-weight: 450;
  opacity: 1;
}

.login-card input::placeholder,
.setup-card input::placeholder {
  color: rgba(226, 238, 242, 0.34);
}

.login-card input,
.setup-card input {
  color: #f8fafc;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--teal);
  box-shadow: var(--focus);
}

.discover-panel,
.custom-discover-panel,
.search-discover-panel,
.scanner-panel {
  position: relative;
  display: grid;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
  padding: 42px 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
}

.discover-panel {
  grid-template-columns: minmax(240px, 1fr) 145px 165px 165px auto;
}

.custom-discover-panel,
.search-discover-panel {
  grid-template-columns: minmax(280px, 1fr) 125px 165px 165px auto;
}

.scanner-panel {
  grid-template-columns: minmax(280px, 1fr) 165px auto;
  padding-top: 14px;
}

.discover-panel::before,
.custom-discover-panel::before,
.search-discover-panel::before {
  position: absolute;
  left: 14px;
  top: 12px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  content: "Seed discovery";
}

.custom-discover-panel::before {
  content: "Custom web crawl";
}

.search-discover-panel::before {
  content: "Search-led sourcing";
}

.discover-panel::after,
.custom-discover-panel::after,
.search-discover-panel::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--teal);
  content: "";
}

.custom-discover-panel::after {
  background: var(--blue);
}

.search-discover-panel::after {
  background: var(--green);
}

.source-workbench {
  display: grid;
  grid-template-columns: minmax(230px, 0.42fr) minmax(420px, 0.9fr) minmax(260px, 0.5fr);
  gap: 14px;
  align-items: start;
}

.source-picker,
.source-builder,
.source-status {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
}

.source-picker {
  display: grid;
  gap: 8px;
  padding: 13px;
}

.source-option {
  min-height: 92px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: #ffffff;
  text-align: left;
  box-shadow: none;
}

.source-option strong,
.source-option small {
  display: block;
}

.source-option small {
  grid-column: 2;
  color: var(--muted);
  line-height: 1.35;
}

.source-option.active {
  border-color: rgba(0, 122, 112, 0.45);
  background: var(--teal-soft);
  box-shadow: var(--focus);
}

.source-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 122, 112, 0.2);
  border-radius: var(--radius);
  color: var(--teal-dark);
  background: #ffffff;
  font-size: 0.68rem;
  font-weight: 950;
}

.source-builder {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.source-builder-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--line);
}

.source-builder-head h4 {
  margin: 3px 0 5px;
  font-size: 1.18rem;
}

.source-builder-head p {
  max-width: 540px;
  margin: 0;
  color: var(--muted);
  line-height: 1.42;
}

.source-run-label {
  align-self: flex-start;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--teal-dark);
  background: var(--teal-soft);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.source-mode-panel.discover-panel,
.source-mode-panel.custom-discover-panel,
.source-mode-panel.search-discover-panel {
  display: none;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.source-mode-panel.active {
  display: grid;
}

.source-mode-panel::before,
.source-mode-panel::after {
  display: none;
}

.advanced-settings {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.advanced-settings summary {
  cursor: pointer;
  padding: 10px 11px;
  color: var(--ink);
  font-weight: 850;
}

.advanced-settings .check-row {
  margin: 0 10px 10px;
}

.source-status {
  display: grid;
  gap: 10px;
  padding: 13px;
}

.source-status .source-note {
  margin: 0;
}

.source-next-step {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.source-next-step strong {
  display: block;
  margin-top: 4px;
  line-height: 1.35;
}

.check-row {
  min-height: 38px;
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--ink) !important;
}

.check-row input {
  width: 16px;
  min-height: 16px;
}

.source-note {
  display: grid;
  gap: 7px;
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid #f0cf91;
  border-radius: var(--radius);
  background: #fffaf0;
  color: #684600;
}

.source-note span {
  color: #6b5a37;
  line-height: 1.45;
}

.integration-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.integration-pill {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  margin: 2px 4px 2px 0;
  padding: 3px 8px;
  border: 1px solid rgba(180, 106, 23, 0.16);
  border-radius: 999px;
  background: #fff0d6;
  color: #805000;
  font-weight: 850;
  font-size: 0.73rem;
}

.integration-pill.configured {
  border-color: rgba(31, 122, 75, 0.16);
  background: var(--green-soft);
  color: var(--green);
}

.lead-layout {
  display: grid;
  grid-template-columns: minmax(440px, 0.9fr) minmax(540px, 1.1fr);
  gap: 20px;
  align-items: start;
}

.lead-list,
.people-list,
.followup-list,
.jobs-list,
.discovery-results {
  display: grid;
  gap: 10px;
}

.people-list {
  gap: 8px;
}

.result-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid rgba(0, 122, 112, 0.22);
  border-radius: var(--radius);
  background: rgba(223, 244, 241, 0.74);
}

.result-context strong,
.result-context span {
  display: block;
}

.result-context span {
  margin-top: 3px;
  color: var(--teal-dark);
  font-size: 0.8rem;
  font-weight: 760;
}

.lead-row,
.detail-card,
.pipeline-column,
.scan-result,
.followup-card,
.playbook-card,
.job-card,
.discovery-card,
.contact-row,
.mini-stat,
.signal-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
}

.job-card-highlight {
  border-color: rgba(0, 122, 112, 0.55);
  box-shadow: var(--focus), var(--shadow);
}

.job-card-selected {
  border-color: rgba(47, 91, 215, 0.44);
  box-shadow: 0 0 0 3px rgba(47, 91, 215, 0.11), var(--shadow-soft);
}

.job-outcome-note,
.integration-plan {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(175, 95, 18, 0.18);
  border-radius: var(--radius);
  background: #fff8ed;
  color: #6f3f0d;
  font-size: 0.82rem;
  line-height: 1.42;
}

.job-outcome-note strong,
.job-outcome-note span,
.integration-plan span,
.integration-plan strong {
  display: block;
}

.integration-plan .configured {
  color: var(--teal-dark);
}

.lead-row {
  width: 100%;
  padding: 14px;
  text-align: left;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.lead-row:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.lead-row.active {
  border-color: var(--teal);
  background: linear-gradient(135deg, rgba(0, 122, 112, 0.06), rgba(255, 255, 255, 0.94));
  box-shadow: var(--focus), var(--shadow-soft);
}

.lead-row-head,
.detail-head,
.pipeline-card-head,
.scan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.lead-row h4,
.pipeline-card h4,
.followup-card h4,
.playbook-card h4,
.discovery-card h4 {
  margin: 0;
  font-size: 1rem;
}

.lead-row p,
.pipeline-card p,
.followup-card p,
.playbook-card p,
.detail-card p {
  color: var(--ink-soft);
  line-height: 1.46;
}

.lead-meta,
.tag-row,
.evidence-list,
.note-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lead-meta {
  margin: 7px 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.lead-meta span {
  min-width: 0;
}

.row-metrics {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.people-count {
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 840;
  white-space: nowrap;
}

.person-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
  padding: 8px 0;
  color: #475467;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 0.84rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid rgba(0, 122, 112, 0.12);
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal-dark);
  font-size: 0.69rem;
  font-weight: 880;
}

.status-pill,
.score-pill {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 920;
  white-space: nowrap;
}

.score-pill {
  background: var(--blue-soft);
  color: #244bb8;
}

.status-pill {
  background: #eef2f6;
  color: #475467;
}

.manual-priority-badge {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  width: fit-content;
  padding: 4px 9px;
  border: 1px solid #d8e1ea;
  border-radius: 999px;
  color: #344054;
  background: #ffffff;
  font-size: 0.73rem;
  font-weight: 920;
  white-space: nowrap;
}

.priority-unset {
  color: #667085;
  background: #f3f6f8;
}

.priority-0 {
  color: #5f6b7a;
  background: #f3f6f8;
}

.priority-1 {
  color: #82550e;
  background: #fff8eb;
  border-color: #ead7af;
}

.priority-2 {
  color: #244bb8;
  background: #eef3ff;
  border-color: #d4defd;
}

.priority-3 {
  color: #006157;
  background: #e4f7f3;
  border-color: #b9dfd8;
}

.priority-dial {
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid #d7e0e9;
  border-radius: var(--radius);
  background: #f8fafb;
}

.priority-dial summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #344054;
  font-weight: 900;
}

.priority-dial summary::marker {
  color: var(--teal);
}

.priority-dial summary strong {
  color: var(--teal-dark);
  font-size: 0.86rem;
}

.priority-dial input[type="range"] {
  width: 100%;
  margin: 14px 0 7px;
  accent-color: var(--teal);
}

.priority-scale {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  color: #667085;
  font-size: 0.69rem;
  font-weight: 820;
}

.priority-scale span:nth-child(2),
.priority-scale span:nth-child(3) {
  text-align: center;
}

.priority-scale span:last-child {
  text-align: right;
}

.priority-dial p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.status-won {
  background: var(--green-soft);
  color: var(--green);
}

.status-proposal {
  background: var(--amber-soft);
  color: #8a4f00;
}

.status-call {
  background: var(--blue-soft);
  color: #244bb8;
}

.status-cancelled {
  background: #eef2f6;
  color: #667085;
}

.lead-detail,
.audit-list {
  position: sticky;
  top: 92px;
}

.detail-card,
.scan-result,
.job-card {
  padding: 16px;
}

.detail-section {
  padding-top: 15px;
  margin-top: 15px;
  border-top: 1px solid var(--line);
}

.detail-section h5 {
  margin: 0 0 9px;
  color: var(--ink);
  font-size: 0.73rem;
  font-weight: 900;
  text-transform: uppercase;
}

.quality-grid,
.contacts-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.quality-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quality-grid div,
.mini-stat {
  min-height: 70px;
  padding: 10px;
  background: var(--panel-soft);
}

.quality-grid strong,
.mini-stat strong {
  display: block;
  margin-bottom: 3px;
  font-size: 1.28rem;
  line-height: 1;
}

.quality-grid span,
.mini-stat span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 780;
}

.contact-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.contact-hero strong,
.contact-hero span {
  display: block;
}

.contact-hero span {
  margin-top: 2px;
  color: var(--muted);
}

.avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(47, 91, 215, 0.12);
  border-radius: 50%;
  background: #dbeafe;
  color: #1e3a8a;
  font-weight: 900;
  font-size: 0.8rem;
}

.avatar.small {
  width: 25px;
  height: 25px;
  font-size: 0.66rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.contact-item {
  padding: 9px 0;
  border-top: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.contact-item span {
  display: block;
  margin-bottom: 3px;
}

.person-card {
  cursor: pointer;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.person-card:first-child {
  border-top: 1px solid var(--line);
}

.person-card:hover,
.person-card.active {
  border-color: rgba(0, 122, 112, 0.34);
  background: rgba(245, 252, 251, 0.94);
}

.person-card.active {
  box-shadow: var(--focus);
}

.person-main {
  min-width: 0;
}

.person-main strong,
.person-main span {
  display: block;
}

.person-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.person-main span {
  color: var(--muted);
  font-size: 0.84rem;
}

.person-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 11px;
  margin-top: 6px;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.person-open-button {
  width: fit-content;
  min-height: 28px;
  margin-top: 8px;
  padding: 5px 8px;
  border: 1px solid rgba(0, 122, 112, 0.18);
  border-radius: var(--radius);
  background: var(--teal-soft);
  color: var(--teal-dark);
  font-size: 0.7rem;
  font-weight: 900;
}

.workflow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tier-pill {
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
  min-height: 21px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 0.65rem !important;
  font-weight: 900;
  white-space: nowrap;
}

.tier-hot {
  background: var(--green-soft);
  color: var(--green);
}

.tier-warm {
  background: var(--blue-soft);
  color: #244bb8;
}

.tier-cool {
  background: #eef2f6;
  color: #667085;
}

.evidence-list {
  display: grid;
  padding-left: 18px;
  color: var(--ink-soft);
}

.note-list {
  display: grid;
}

.note-item {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}

.stage-controls select,
.stage-controls input {
  min-width: 156px;
}

.pipeline-board {
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) minmax(230px, 0.8fr) minmax(250px, 0.9fr) minmax(430px, 1.45fr) minmax(230px, 0.8fr) minmax(230px, 0.8fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.pipeline-column {
  min-height: 480px;
  padding: 12px;
  background: rgba(248, 251, 252, 0.86);
}

.pipeline-column h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
  margin: 0 0 10px;
}

.pipeline-card {
  min-height: 130px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
}

.pipeline-card-call {
  border-color: rgba(0, 122, 112, 0.22);
  background:
    linear-gradient(135deg, rgba(0, 122, 112, 0.08), transparent 44%),
    #ffffff;
}

.pipeline-person-heading {
  min-width: 0;
}

.pipeline-person-heading h4 {
  overflow-wrap: anywhere;
}

.pipeline-person-heading small {
  margin: 3px 0 0;
}

.pipeline-card-highlight {
  border-color: rgba(0, 122, 112, 0.56);
  box-shadow: var(--focus), var(--shadow-soft);
}

.pipeline-card small {
  display: block;
  margin: -4px 0 8px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.pipeline-card p strong {
  color: var(--ink);
}

.pipeline-card:active {
  cursor: grabbing;
}

.compact-button {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 0.74rem;
  box-shadow: none;
}

.pipeline-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.teams-card-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.teams-card-strip strong,
.teams-panel-head strong {
  display: block;
  overflow-wrap: anywhere;
}

.teams-card-strip small {
  margin: 2px 0 0;
}

.teams-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.teams-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.teams-panel-head .ghost-button {
  min-height: 30px;
  padding: 6px 9px;
  box-shadow: none;
}

.teams-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.teams-panel label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.teams-panel input,
.teams-panel select,
.teams-panel textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 8px 9px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
}

.teams-panel textarea {
  min-height: 118px;
  resize: vertical;
  line-height: 1.45;
}

.teams-integration-state {
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--amber);
  background: var(--amber-soft);
  font-size: 0.76rem;
  font-weight: 790;
  line-height: 1.35;
}

.teams-integration-state.configured {
  color: var(--green);
  background: var(--green-soft);
}

.teams-panel input:focus,
.teams-panel select:focus,
.teams-panel textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: var(--focus);
}

.teams-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.teams-actions button {
  width: 100%;
  min-width: 0;
  white-space: normal;
  line-height: 1.12;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(10, 18, 20, 0.44);
  backdrop-filter: blur(10px);
}

.situation-modal {
  width: min(720px, 100%);
  max-height: min(86vh, 760px);
  display: grid;
  gap: 14px;
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow);
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.modal-head h3 {
  margin: 3px 0;
  overflow-wrap: anywhere;
}

.modal-head p {
  margin: 0;
  color: var(--muted);
}

.situation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.situation-modal label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 850;
}

.situation-modal input,
.situation-modal select,
.situation-modal textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 10px;
  color: var(--ink);
  background: #ffffff;
}

.situation-modal textarea {
  resize: vertical;
  line-height: 1.45;
}

.situation-check {
  align-self: end;
  min-height: 42px;
}

.situation-presets,
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.signal-grid,
.playbook-grid,
.discovery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
}

.discovery-grid {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.signal-card,
.playbook-card,
.discovery-card {
  padding: 14px;
}

.signal-card {
  background: var(--panel-soft);
}

.signal-card strong {
  display: block;
  margin-bottom: 6px;
}

.crawl-stat {
  margin: 8px 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.link-list {
  display: grid;
  gap: 8px;
  padding-left: 0;
  list-style: none;
}

.link-list a {
  overflow-wrap: anywhere;
}

.jobs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
  gap: 16px;
  align-items: start;
}

.progress-track {
  height: 9px;
  margin: 12px 0;
  border-radius: 999px;
  overflow: hidden;
  background: #e9eef4;
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.job-activity {
  margin: 8px 0 4px;
  color: var(--teal-dark) !important;
  font-weight: 850;
}

.job-error-list {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.job-error-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px;
  border: 1px solid #f0cf91;
  border-radius: var(--radius);
  background: #fffaf0;
}

.job-error-row strong,
.job-error-row span {
  display: block;
}

.job-error-row span,
.job-error-row details {
  color: #6b5a37;
  font-size: 0.8rem;
}

.job-error-row details {
  grid-column: 1 / -1;
}

.job-error-row summary {
  cursor: pointer;
  font-weight: 850;
}

.job-inspector {
  position: sticky;
  top: 112px;
  display: grid;
  gap: 14px;
}

.job-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.job-metric-grid div,
.job-next-action {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.job-metric-grid strong,
.job-metric-grid span,
.job-next-action strong {
  display: block;
}

.job-metric-grid strong {
  font-size: 1.2rem;
}

.job-metric-grid span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 850;
}

.job-section {
  display: grid;
  gap: 8px;
}

.job-imported-list {
  display: grid;
  gap: 7px;
}

.job-imported-lead {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: #ffffff;
  text-align: left;
}

.job-imported-lead strong,
.job-imported-lead span {
  display: block;
  overflow-wrap: anywhere;
}

.job-imported-lead span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.followup-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px;
}

.due-badge {
  min-width: 100px;
  height: 35px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #ffd999;
  border-radius: var(--radius);
  background: var(--amber-soft);
  color: #8a4f00;
  font-weight: 900;
}

.contacts-table {
  display: grid;
  gap: 8px;
}

.contacts-head,
.contact-row {
  display: grid;
  grid-template-columns: minmax(250px, 1.1fr) minmax(170px, 0.85fr) minmax(245px, 1fr) 148px;
  gap: 12px;
  align-items: center;
}

.contacts-head {
  min-height: 32px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 0.71rem;
  font-weight: 900;
  text-transform: uppercase;
}

.contact-row {
  padding: 12px;
}

.contact-row small,
.contact-methods span,
.contact-row div > small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.75rem;
}

.contact-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  box-shadow: none;
}

.contact-methods {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  overflow-wrap: anywhere;
}

/* FE-027 — contact info (email/phone) on Contacts cards renders in ink,
   not the brand --blue token (which the brand override repointed to
   mandate-red at line 8613). Reserves brand-red for action affordances. */
.contact-methods a,
.person-contact-row a {
  color: var(--ink, #1f1b17);
  font-weight: 500;
}

/* FE-026: empty-state priority indicator on the Contacts list. Stays in
   the design language (pill, dashed border, muted ink) instead of the
   raw "Priority not set" caption that looked like a stray helper text.
   Sentence-case + 500 weight so a quiet empty state reads quietly —
   uppercase "NO PRIORITY" shouted a status that's actually an absence. */
.contact-priority-empty {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  padding: 2px 8px;
  border: 1px dashed var(--line-strong, #C9C2B2);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.02);
  color: var(--ink-soft, #5A5754);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0;
}

.contact-priority-label {
  display: block;
  margin-top: 3px;
  color: var(--ink-soft, #3c4852);
  font-size: 0.72rem;
}
.contact-methods a:hover,
.contact-methods a:focus-visible,
.person-contact-row a:hover,
.person-contact-row a:focus-visible {
  color: var(--burgundy, #7a1f2b);
  text-decoration: underline;
}

.compact-check {
  min-width: 118px;
}

.empty-state {
  padding: 22px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  max-width: min(420px, calc(100vw - 36px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--nav);
  color: #ffffff;
  box-shadow: var(--shadow);
}

.toast span {
  min-width: 0;
}

.toast button {
  flex-shrink: 0;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 800;
}

/* Visual hierarchy refresh: quieter CRM surfaces, clearer list/detail separation. */
:root {
  --bg: #f4f6f8;
  --bg-2: #eceff3;
  --panel: #ffffff;
  --panel-soft: #f7f9fb;
  --panel-tint: #edf7f4;
  --ink: #171d22;
  --ink-soft: #39454f;
  --muted: #677483;
  --faint: #98a3af;
  --line: #dce3ea;
  --line-strong: #bdc9d5;
  --nav: #121615;
  --nav-2: #1a201f;
  --teal: #007f73;
  --teal-dark: #006157;
  --teal-soft: #e3f4f1;
  --blue: #315fd6;
  --blue-soft: #eaf0ff;
  /* --green / --green-soft deleted here (review-desk-craft): three :root blocks declared the
     same token with three different values, all at equal specificity, so this
     one only ever lost. The single surviving declaration is in the "Mandate
     brand override" :root -- --green: #225B3A, --green-soft: #E0EBE3. */
  --amber: #9a6417;
  --amber-soft: #fff6e8;
  --red: #b42318;
  --radius: 8px;
  --shadow: 0 18px 46px rgba(18, 24, 31, 0.1);
  --shadow-soft: 0 4px 14px rgba(18, 24, 31, 0.06);
  --focus: 0 0 0 3px rgba(0, 127, 115, 0.18);
}

html {
  background: #eef2f5;
}

body {
  background:
    linear-gradient(180deg, #f9fbfc 0, #f1f4f7 420px, #eef2f5 100%);
}

h2 {
  max-width: 920px;
  font-size: clamp(1.85rem, 2.1vw, 2.35rem);
  line-height: 1.04;
}

h3 {
  color: var(--ink);
}

.app-shell {
  grid-template-columns: 276px minmax(0, 1fr);
}

.sidebar {
  padding: 22px 16px;
  background:
    linear-gradient(180deg, rgba(0, 127, 115, 0.12), transparent 180px),
    linear-gradient(180deg, #121615 0, #171d1c 100%);
  border-right-color: rgba(255, 255, 255, 0.08);
}

.brand-block {
  padding: 0 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.brand-mark {
  border-color: rgba(255, 255, 255, 0.22);
  background: linear-gradient(135deg, rgba(0, 127, 115, 0.92), rgba(49, 95, 214, 0.76));
  box-shadow: none;
}

.nav-tabs {
  gap: 6px;
}

.nav-tab {
  min-height: 42px;
  border-color: transparent;
  color: rgba(238, 245, 246, 0.76);
  background: transparent;
  font-weight: 780;
}

.nav-tab::before {
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(238, 245, 246, 0.66);
  background: rgba(255, 255, 255, 0.04);
}

.nav-tab:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
}

.nav-tab.active {
  border-color: rgba(255, 255, 255, 0.13);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 3px 0 0 var(--teal);
}

.nav-tab.active::before {
  border-color: rgba(0, 127, 115, 0.45);
  color: #ffffff;
  background: var(--teal);
}

.sidebar-note {
  margin-top: auto;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: none;
}

.workspace {
  padding: 22px 24px 40px;
}

.topbar {
  margin: -22px -24px 20px;
  padding: 18px 24px 15px;
  border-bottom: 1px solid rgba(220, 227, 234, 0.95);
  background: rgba(248, 245, 239, 0.98);
  box-shadow: 0 10px 26px rgba(18, 24, 31, 0.045);
}

body[data-active-tab="pipeline"] .topbar {
  justify-content: flex-end;
  min-height: 72px;
}

body[data-active-tab="pipeline"] .topbar-copy {
  display: none;
}

.workspace-status {
  margin-bottom: 7px;
  gap: 8px;
  color: #657384;
  font-size: 0.74rem;
  font-weight: 820;
}

.workspace-status span:not(.live-dot) {
  min-height: auto;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
}

.live-dot {
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 4px rgba(39, 112, 77, 0.14);
}

.primary-button,
.secondary-button,
.ghost-button,
.icon-button {
  min-height: 40px;
  border-radius: 7px;
  box-shadow: none;
}

.primary-button,
.icon-button {
  border-color: var(--teal-dark);
  background: linear-gradient(180deg, #00887b, #006f65);
  box-shadow: 0 10px 24px rgba(0, 127, 115, 0.18);
}

.secondary-button {
  border-color: var(--line-strong);
  background: #ffffff;
}

.ghost-button {
  border-color: #d9e1e9;
  background: #f7f9fb;
}

.secondary-button:hover,
.ghost-button:hover,
.primary-button:hover,
.icon-button:hover {
  box-shadow: 0 10px 22px rgba(18, 24, 31, 0.08);
}

.button-icon,
.icon-button span {
  border-radius: 5px;
}

.kpi-grid {
  gap: 12px;
  margin-bottom: 18px;
}

.kpi-tile {
  min-height: 104px;
  border-color: #e1e7ee;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(18, 24, 31, 0.04);
}

.kpi-tile::before {
  width: 3px;
  opacity: 0.9;
}

.kpi-tile strong {
  font-size: 1.72rem;
}

.intelligence-strip {
  gap: 12px;
  margin-bottom: 18px;
}

.intelligence-strip article {
  border-color: #e1e7ee;
  background: #ffffff;
  box-shadow: none;
}

.intelligence-strip article::after {
  display: none;
}

.view-heading {
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #dde5ed;
}

.view-heading h3 {
  margin-top: 2px;
  font-size: 1.42rem;
  line-height: 1.18;
}

.view-copy {
  max-width: 520px;
  color: #5d6976;
}

.eyebrow,
.meta-label {
  color: #697788;
}

input,
select,
textarea {
  min-height: 40px;
  border-color: #cdd8e3;
  background: #fbfcfd;
  box-shadow: inset 0 1px 0 rgba(18, 24, 31, 0.02);
}

textarea {
  line-height: 1.44;
}

.source-workbench {
  grid-template-columns: minmax(240px, 0.34fr) minmax(480px, 0.96fr) minmax(280px, 0.46fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

#view-discover .source-workbench {
  grid-template-columns: minmax(260px, 0.34fr) minmax(560px, 1fr);
}

#view-discover .source-status {
  display: none;
}

.journey-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: -2px 0 16px;
}

.journey-map article {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 88px;
  padding: 12px;
  border: 1px solid #dce4ec;
  border-radius: 8px;
  background: #ffffff;
}

.journey-step {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 127, 115, 0.18);
  border-radius: 8px;
  color: var(--teal-dark);
  background: var(--teal-soft);
  font-size: 0.78rem;
  font-weight: 900;
}

.journey-map strong {
  display: block;
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.25;
}

.journey-map p {
  margin: 4px 0 0;
  color: #667085;
  font-size: 0.76rem;
  line-height: 1.38;
}

.source-picker,
.source-builder,
.source-status {
  border-color: #dbe3eb;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(18, 24, 31, 0.04);
}

.source-picker {
  align-content: start;
  gap: 8px;
  padding: 12px;
}

.source-option {
  min-height: 86px;
  border-color: transparent;
  background: #f6f8fa;
  box-shadow: inset 0 0 0 1px rgba(220, 227, 234, 0.82);
}

.source-option:hover {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #c9d4df;
}

.source-option.active {
  border-color: transparent;
  background: #f0faf8;
  box-shadow: inset 3px 0 0 var(--teal), inset 0 0 0 1px rgba(0, 127, 115, 0.26);
}

.source-icon {
  border-color: #d6e0e8;
  color: #475467;
  background: #ffffff;
}

.source-option.active .source-icon {
  border-color: rgba(0, 127, 115, 0.28);
  color: var(--teal-dark);
  background: var(--teal-soft);
}

.source-builder {
  min-width: 0;
}

.source-builder-head {
  padding: 18px 18px 15px;
  border-bottom-color: #dce4ec;
  background: linear-gradient(180deg, #ffffff, #fbfcfd);
}

.source-builder-head h4 {
  font-size: 1.22rem;
}

.source-run-label {
  border-color: #d7e0e9;
  color: #52606e;
  background: #f3f6f8;
}

.discover-panel,
.custom-discover-panel,
.search-discover-panel,
.scanner-panel {
  gap: 14px;
  align-content: start;
  align-items: start;
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

.discover-panel::before,
.custom-discover-panel::before,
.search-discover-panel::before,
.discover-panel::after,
.custom-discover-panel::after,
.search-discover-panel::after {
  display: none;
}

.source-mode-panel {
  padding: 18px;
}

body[data-active-tab="pipeline"] .kpi-grid,
body[data-active-tab="pipeline"] .intelligence-strip,
body[data-active-tab="briefs"] .kpi-grid,
body[data-active-tab="briefs"] .intelligence-strip,
body[data-active-tab="scanner"] .kpi-grid,
body[data-active-tab="scanner"] .intelligence-strip,
body[data-active-tab="jobs"] .kpi-grid,
body[data-active-tab="jobs"] .intelligence-strip,
body[data-active-tab="followups"] .kpi-grid,
body[data-active-tab="followups"] .intelligence-strip,
body[data-active-tab="playbook"] .kpi-grid,
body[data-active-tab="playbook"] .intelligence-strip {
  display: none;
}

body[data-active-tab="leads"] .kpi-grid,
body[data-active-tab="contacts"] .kpi-grid,
body[data-active-tab="leads"] .intelligence-strip,
body[data-active-tab="contacts"] .intelligence-strip,
body[data-active-tab="briefs"] .kpi-grid,
body[data-active-tab="briefs"] .intelligence-strip {
  display: none;
}

#view-leads .view-heading {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(520px, auto);
  align-items: end;
  gap: 18px;
  margin: 0 0 16px;
  padding: 0 0 15px;
  border-bottom: 1px solid #dce4ec;
}

#view-leads .view-heading h3 {
  font-size: 1.48rem;
}

#view-leads .filter-row {
  justify-content: flex-end;
  gap: 10px;
}

#view-leads .filter-row label {
  min-width: 150px;
}

#view-leads .filter-row label:first-child {
  min-width: 220px;
}

#view-leads .filter-row input,
#view-leads .filter-row select {
  min-height: 38px;
  background: #ffffff;
  box-shadow: none;
}

#view-leads .filter-row span {
  font-size: 0.68rem;
  color: #718093;
}

.source-status {
  align-content: start;
  gap: 12px;
  padding: 14px;
  background: #f7f9fb;
}

.source-note,
.source-next-step,
.integration-plan,
.job-outcome-note {
  border-color: #dce4ec;
  color: var(--ink-soft);
  background: #ffffff;
}

.source-note {
  gap: 8px;
}

.integration-plan {
  margin-top: 8px;
}

.integration-pill {
  border-color: #dde5ed;
  color: #5b6875;
  background: #f4f7fa;
}

.integration-pill.configured {
  border-color: rgba(39, 112, 77, 0.16);
  color: var(--green);
  background: var(--green-soft);
}

.result-context {
  border-color: #cfddd9;
  background: #f1faf7;
}

.result-note {
  margin: 6px 0 0;
  color: #637083;
  font-size: 0.82rem;
}

.lead-layout {
  grid-template-columns: minmax(430px, 0.82fr) minmax(560px, 1.18fr);
  gap: 16px;
}

#view-leads .lead-layout {
  position: relative;
  grid-template-columns: minmax(430px, 0.82fr) minmax(560px, 1.18fr);
  gap: 0;
  align-items: stretch;
  border: 1px solid #cfd9e4;
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(18, 24, 31, 0.06);
  overflow: hidden;
}

#view-leads .lead-list-pane {
  min-width: 0;
  padding: 12px;
  border-right: 1px solid #cfd9e4;
  background: #f6f8fa;
}

.pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -2px -2px 12px;
  padding: 4px 4px 12px;
  border-bottom: 1px solid #dce4ec;
}

.pane-head strong,
.pane-head span {
  display: block;
}

.pane-head strong {
  margin-top: 3px;
  color: var(--ink);
  font-size: 0.98rem;
}

.pane-count {
  flex: 0 0 auto;
  min-height: 24px;
  display: inline-flex !important;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid #d8e1ea;
  border-radius: 999px;
  color: #566474;
  background: #ffffff;
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
}

.account-list-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 10px;
  padding: 4px;
  border: 1px solid #dce4ec;
  border-radius: 8px;
  background: #eef3f5;
}

.account-list-tab {
  min-width: 0;
  min-height: 34px;
  padding: 6px 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #596775;
  background: transparent;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.account-list-tab:hover {
  color: #24313d;
  background: rgba(255, 255, 255, 0.72);
}

.account-list-tab.active {
  border-color: #cbd7e2;
  color: #16232d;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(18, 24, 31, 0.05);
}

#view-leads .lead-list {
  padding-right: 2px;
}

#view-leads .lead-detail {
  min-width: 0;
  padding: 0;
  background:
    linear-gradient(90deg, rgba(0, 127, 115, 0.045), transparent 22px),
    #ffffff;
}

#view-leads .detail-card {
  min-height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#view-leads .detail-head {
  margin: -18px -18px 18px;
  padding: 18px 18px 17px 22px;
  border-bottom-color: #cfd9e4;
  box-shadow: inset 4px 0 0 var(--teal);
}

.detail-head-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.detail-subtitle {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.account-lifecycle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 0 0 16px;
  padding: 13px;
  border: 1px solid #dce4ec;
  border-radius: 8px;
  background: #f8fafc;
}

.account-lifecycle strong {
  display: block;
  margin-top: 3px;
  color: #111820;
  font-size: 0.96rem;
}

.account-lifecycle p {
  margin: 4px 0 0;
  color: #667085;
  font-size: 0.78rem;
  line-height: 1.38;
}

.account-lifecycle-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.account-lifecycle-actions .avoid-action:not(.primary-button) {
  border-color: rgba(177, 73, 47, 0.24);
  color: #8a3b22;
  background: #fff8f4;
}

.lead-list,
.people-list,
.followup-list,
.jobs-list,
.discovery-results {
  gap: 8px;
}

.lead-row,
.detail-card,
.pipeline-column,
.scan-result,
.followup-card,
.playbook-card,
.job-card,
.discovery-card,
.contact-row,
.mini-stat,
.signal-card {
  border-color: #dce4ec;
  background: #ffffff;
  box-shadow: none;
}

.lead-row {
  position: relative;
  padding: 13px 14px 13px 28px;
  border-left: 3px solid transparent;
  background: #ffffff;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

/* D4 — earn the dot. priorityDotClass returns high/mid/low; only high
   and mid earn a visible dot. The grey default was reading as noise next
   to the company avatar — labels appeared to sit on a grey blob. Hide
   the dot when no priority is set so it stays a real signal. */
.lead-row::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 19px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.lead-row[data-priority="high"]::before {
  background: var(--green, #225b3a);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
}

.lead-row[data-priority="mid"]::before {
  background: var(--amber, #a86b1f);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
}

/* Hover + active states pre-dated the brand override that swapped --teal
   for mandate-red. The hardcoded #9ab0bf / rgba(0,127,115,...) values
   were still rendering as blue-grey / teal even though the rest of the
   surface had moved to mandate-red. Rewire to the mandate-red palette
   so the row border matches the sidebar's active-tab rail. */
.lead-row:hover {
  transform: none;
  border-color: var(--line-strong, #C9C2B2);
  border-left-color: rgba(124, 31, 42, 0.4);
  background: #fbfaf7;
  box-shadow: none;
}

.lead-row.active {
  border-color: rgba(124, 31, 42, 0.32);
  border-left-color: var(--mandate-red, #7C1F2A);
  background: var(--teal-soft, #F5E7E9);
  box-shadow: 0 0 0 3px rgba(124, 31, 42, 0.08);
}

.lead-row.account-list-avoid {
  border-left-color: #c66a4a;
  background: #fffaf7;
}

.account-list-pill {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid #d8e1ea;
  border-radius: 999px;
  color: #54616f;
  background: #f5f7f9;
  font-size: 0.67rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.account-list-pill-managed {
  border-color: rgba(39, 112, 77, 0.18);
  color: #1f5f3a;
  background: #eef8f1;
}

.account-list-pill-avoid {
  border-color: rgba(177, 73, 47, 0.18);
  color: #8a3b22;
  background: #fff1eb;
}

#view-leads .lead-row.active::after {
  position: absolute;
  top: 18px;
  right: -15px;
  bottom: 18px;
  width: 4px;
  border-radius: 999px;
  background: var(--teal);
  content: "";
}

.lead-row h4,
.pipeline-card h4,
.followup-card h4,
.playbook-card h4,
.discovery-card h4 {
  color: #101820;
  font-size: 0.98rem;
  line-height: 1.22;
}

.lead-meta {
  gap: 6px 10px;
  margin: 6px 0;
}

.person-strip {
  gap: 7px;
  margin: 9px 0;
  padding: 8px 0;
  border-color: #e1e7ee;
}

.tag {
  min-height: 22px;
  border-color: #c5e5df;
  color: #005d54;
  background: #e7f6f3;
}

.status-pill,
.score-pill,
.person-tier {
  border: 1px solid transparent;
}

.score-pill {
  border-color: #d7e1ff;
}

.status-pill {
  border-color: #e1e7ee;
}

.lead-detail,
.audit-list {
  top: 94px;
}

.detail-card,
.scan-result,
.job-card {
  padding: 18px;
}

.detail-card {
  box-shadow: 0 1px 2px rgba(18, 24, 31, 0.04);
}

.detail-head {
  margin: -18px -18px 16px;
  padding: 18px;
  border-bottom: 1px solid #dce4ec;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.detail-head h3 {
  font-size: 1.3rem;
}

.detail-section {
  padding-top: 16px;
  margin-top: 16px;
}

.detail-section h5 {
  color: #111820;
  font-size: 0.72rem;
}

.quality-grid div,
.mini-stat {
  border: 1px solid #e3e9ef;
  background: #f7f9fb;
}

.contact-hero {
  padding: 4px 0;
}

.avatar {
  border-color: #d3ddfb;
  background: #eef3ff;
  color: #244bb8;
}

.pipeline-board {
  grid-template-columns: minmax(290px, 1fr) minmax(280px, 0.96fr) minmax(280px, 0.96fr) minmax(360px, 1.22fr) minmax(280px, 0.96fr) minmax(280px, 0.96fr);
  gap: 10px;
  padding: 0 0 12px;
}

.pipeline-column {
  min-height: 520px;
  padding: 10px;
  background: #f7f9fb;
  border-color: #d8e1ea;
  box-shadow: none;
}

.pipeline-column h4 {
  min-height: 32px;
  margin: 0 0 10px;
  padding: 0 0 9px;
  border-bottom: 1px solid #d8e1ea;
  color: #252f3a;
  font-size: 0.9rem;
}

.pipeline-card {
  position: relative;
  min-height: 0;
  margin-bottom: 9px;
  padding: 13px 13px 12px;
  border-color: #dfe7ef;
  border-left: 0;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(18, 24, 31, 0.045);
  overflow: hidden;
}

.pipeline-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #cad6e2;
  content: "";
}

.pipeline-card:hover {
  border-color: #c1ceda;
  background: #fcfdff;
  box-shadow: 0 6px 14px rgba(18, 24, 31, 0.055);
}

.pipeline-card-call {
  border-color: rgba(0, 127, 115, 0.28);
  background: #ffffff;
}

.pipeline-card-call::before {
  background: var(--teal);
}

.pipeline-card-highlight {
  border-color: rgba(0, 127, 115, 0.5);
  box-shadow: 0 0 0 3px rgba(0, 127, 115, 0.1);
}

.pipeline-card-highlight::before {
  background: var(--teal);
}

.pipeline-card-head {
  align-items: flex-start;
}

.pipeline-card-person {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.pipeline-avatar {
  width: 32px;
  height: 32px;
  border-color: #d7e0e9;
  background: #edf4f2;
  color: #315b55;
  font-size: 0.68rem;
}

.pipeline-person-heading h4 {
  min-height: auto;
  margin: 0;
  padding: 0;
  border-bottom: 0;
  color: #111820;
  font-size: 0.98rem;
  line-height: 1.2;
}

.pipeline-person-heading small {
  display: block;
  margin-top: 3px;
  color: #667085;
  font-size: 0.76rem;
  line-height: 1.32;
}

.pipeline-account-line {
  display: grid;
  gap: 2px;
  margin-top: 11px;
  padding: 9px 10px;
  border: 1px solid #e6ebf1;
  border-radius: 6px;
  color: #667085;
  background: #f7f9fb;
  font-size: 0.78rem;
  line-height: 1.35;
}

.pipeline-account-line strong {
  color: #222b35;
}

.pipeline-route {
  display: grid;
  gap: 2px;
  margin-top: 9px;
  padding: 0 1px;
  color: #4b5968;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.pipeline-route span {
  color: #718093;
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
}

.pipeline-route strong {
  color: #27323d;
  font-size: 0.78rem;
  line-height: 1.32;
}

.pipeline-tags {
  gap: 5px;
  margin-top: 10px;
}

.pipeline-card .tag {
  min-height: 20px;
  padding: 2px 7px;
  border-color: #dce7e4;
  color: #3c625d;
  background: #f3f8f7;
  font-size: 0.64rem;
}

.pipeline-card .compact-button {
  min-height: 30px;
  padding: 6px 9px;
  font-size: 0.72rem;
}

.pipeline-quick-actions {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e3e9ef;
}

.pipeline-column .empty-state {
  min-height: 60px;
  padding: 18px 10px;
  border-color: #d7e0e9;
  color: #7a8796;
  background: #ffffff;
}

.teams-card-strip,
.teams-panel {
  border-top-color: #dce4ec;
}

.teams-integration-state {
  border-color: #e2d1ad;
  color: #82550e;
  background: #fff8eb;
}

.contact-row {
  background: #ffffff;
}

.contacts-head,
.contact-row {
  border-color: #dce4ec;
}

.job-card-highlight {
  border-color: rgba(0, 127, 115, 0.48);
  box-shadow: 0 0 0 3px rgba(0, 127, 115, 0.1);
}

.job-card-selected {
  border-color: rgba(49, 95, 214, 0.38);
  box-shadow: 0 0 0 3px rgba(49, 95, 214, 0.1);
}

.empty-state,
.scan-empty {
  color: #637083;
  background: #ffffff;
}

/* Structural reduction and premium shell pass */
.topbar {
  box-shadow: none;
}

.workspace-status {
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.live-dot {
  width: 6px;
  height: 6px;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}

h2 {
  font-size: 2.2rem;
  font-weight: 650;
}

.eyebrow,
.meta-label {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sidebar {
  background: linear-gradient(180deg, #11181a, #0f1517);
}

.brand-block {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-block > div:last-child {
  min-width: 0;
}

.brand-block h1::after {
  content: none;
  color: #8fa1ad;
  font-weight: 650;
}

.nav-tabs {
  gap: 3px;
}

.nav-section-label {
  display: block;
  margin: 14px 10px 5px;
  color: #6f818c;
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.nav-tab {
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 6px;
}

.nav-tab::before {
  display: none;
}

.nav-tab:hover,
.nav-tab.active {
  transform: none;
}

.sidebar-note {
  display: none;
}

.topbar-actions {
  gap: 7px;
}

.topbar-actions .secondary-button .button-icon,
.topbar-actions .ghost-button .button-icon {
  display: none;
}

.topbar-menu {
  position: relative;
}

.topbar-menu[open] {
  z-index: 30;
}

.topbar-menu summary {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: #25303a;
  background: #ffffff;
  font-weight: 900;
  list-style: none;
  cursor: pointer;
}

.topbar-menu[open] summary {
  border-color: var(--teal);
  box-shadow: var(--focus);
}

.topbar-menu summary::-webkit-details-marker {
  display: none;
}

.topbar-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 190px;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.topbar-menu-panel .ghost-button {
  width: 100%;
  justify-content: flex-start;
  border-color: transparent;
}

.danger-action {
  color: #9f2f22;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
summary:focus-visible {
  outline: none;
  border-color: var(--teal);
  box-shadow: var(--focus);
}

#view-discover .source-workbench {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1120px;
}

#view-discover .source-builder {
  border-color: var(--line);
  box-shadow: none;
}

.source-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 6px;
  border-bottom: 1px solid var(--line);
  background: #fbfaf7;
}

.source-tabs .source-option {
  min-height: 54px;
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
}

.source-tabs .source-option strong,
.source-tabs .source-option small {
  display: block;
  grid-column: auto;
}

.source-tabs .source-option small {
  color: #6f7c86;
  font-size: 0.72rem;
}

.source-tabs .source-option.active {
  border-color: #bcdad5;
  background: #ffffff;
  box-shadow: none;
}

.source-tabs .source-option.is-disabled,
.source-tabs .source-option.is-disabled:hover {
  border-color: transparent;
  background: transparent;
}

.source-builder-head {
  padding: 18px 18px 14px;
}

.source-run-label {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid #dce4ec;
  border-radius: 999px;
  color: #52606e;
  background: #f7f9fb;
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.source-run-label::after {
  content: "";
}

.source-mode-panel {
  grid-template-columns: 1fr;
  gap: 20px;
}

.source-helper {
  display: block;
  margin-top: 5px;
  color: #66737f;
  font-size: 0.82rem;
  font-weight: 520;
  line-height: 1.45;
}

.source-submit-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.42fr);
  gap: 14px;
  align-items: start;
  margin-top: 8px;
}

.source-submit-row .primary-button {
  justify-content: center;
  min-height: 44px;
}

.advanced-settings {
  margin: 0;
}

.discovery-results:empty {
  display: none;
}

.source-icon {
  display: none;
}

/* Leads cockpit cleanup */
body[data-active-tab="leads"] .topbar {
  min-height: 72px;
  margin-bottom: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}

body[data-active-tab="leads"] #topbarTitle {
  font-size: 1.58rem;
  line-height: 1.05;
}

body[data-active-tab="leads"] .workspace-status {
  margin-bottom: 3px;
}

#view-leads .view-heading {
  grid-template-columns: minmax(220px, 0.8fr) minmax(560px, auto);
  margin-bottom: 10px;
  padding-bottom: 12px;
}

#view-leads .view-heading h3 {
  font-size: 1.16rem;
}

#view-leads .lead-layout {
  grid-template-columns: minmax(360px, 0.72fr) minmax(640px, 1.28fr);
  border-color: #d7e0e8;
  box-shadow: 0 8px 20px rgba(18, 24, 31, 0.045);
}

#view-leads .lead-list-pane {
  padding: 10px;
  background: #f8fafb;
}

#view-leads .lead-detail {
  background: #ffffff;
}

#view-leads .lead-row {
  padding: 12px 13px;
  border-left-width: 2px;
}

#view-leads .lead-row.active {
  background: #f3fbf9;
  box-shadow: none;
}

#view-leads .lead-row.active::after {
  right: -11px;
  width: 3px;
}

.lead-row-reason {
  margin: 8px 0 0;
  display: -webkit-box;
  overflow: hidden;
  color: #475467;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lead-row-tags {
  margin-top: 8px;
  gap: 5px;
}

#view-leads .lead-row .tag {
  min-height: 20px;
  padding: 2px 7px;
  font-size: 0.64rem;
}

#view-leads .detail-card.lead-profile {
  padding: 0;
  box-shadow: none;
}

#view-leads .lead-profile-head {
  margin: 0;
  padding: 18px 20px;
  border-bottom: 1px solid #dce4ec;
  background: #ffffff;
  box-shadow: none;
}

.lead-profile-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.lead-profile-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid #e1e8ef;
  background: #fbfcfd;
}

.lead-profile-toolbar .priority-dial {
  flex: 1 1 320px;
  max-width: 380px;
  margin: 0;
  padding: 8px 10px;
  background: #ffffff;
}

.lead-profile-toolbar .priority-dial summary {
  font-size: 0.82rem;
}

.lead-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 26px;
  padding: 18px 20px;
  border-bottom: 1px solid #e1e8ef;
}

.lead-profile-panel {
  min-width: 0;
}

/* D6 — section labels inside the dossier panel demoted: sentence case,
   normal weight, no tracking. One eyebrow per panel rule means only
   "Selected account" stays uppercase. */
.lead-profile-panel h5,
.primary-contact-strip h5 {
  margin: 0 0 6px;
  color: var(--muted, #526170);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.lead-profile-panel p {
  margin-bottom: 10px;
}

.research-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}

.research-summary span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid #dce5ec;
  border-radius: 999px;
  color: #526170;
  background: #f7f9fb;
  font-size: 0.72rem;
  font-weight: 850;
}

.lead-profile-tags {
  gap: 5px;
}

.primary-contact-strip {
  display: grid;
  grid-template-columns: minmax(220px, 0.82fr) minmax(320px, 1.18fr);
  gap: 18px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid #e1e8ef;
}

.primary-contact-person {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}

.primary-contact-person strong,
.primary-contact-person span {
  display: block;
}

.primary-contact-person span {
  margin-top: 2px;
  color: #667085;
}

.primary-contact-routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.primary-contact-routes .contact-item {
  padding: 0;
  border-top: 0;
}

.relationship-controls {
  display: grid;
  grid-template-columns: minmax(160px, 0.9fr) minmax(160px, 0.8fr) minmax(140px, 0.7fr);
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line, #e1e8ef);
  background: #fbfcfd;
}

/* D6 — quieten the field-group meta labels inside the dossier. */
.relationship-controls .meta-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.relationship-controls > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.lead-profile > .detail-section {
  margin: 0;
  padding: 18px 20px;
  border-top: 0;
}

.lead-profile .people-list {
  gap: 0;
  border: 1px solid #dce4ec;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.lead-profile .person-card {
  border: 0;
  border-bottom: 1px solid #e2e9ef;
  border-radius: 0;
  box-shadow: none;
}

.lead-profile .person-card:last-child {
  border-bottom: 0;
}

.lead-activity-section {
  margin: 8px 20px 16px;
  padding: 14px 0 4px;
  border-top: 1px solid #e1e8ef;
}
.lead-activity-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.lead-activity-head h5 {
  font-size: 0.85rem;
  font-weight: 800;
  color: #344054;
  margin: 0;
}
.lead-activity-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lead-activity-list li {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 0.82rem;
  color: #344054;
}
.lead-activity-marker {
  /* Re-use the .lifecycle-event[data-type=...] colour rules; this just
     forces the dot size + removes the hover-cursor since these aren't
     interactive. */
  width: 10px;
  height: 10px;
  border-width: 1.5px;
  margin: 0;
  cursor: default;
}
.lead-activity-title {
  font-weight: 600;
}
.lead-activity-when {
  color: var(--ink-soft, #516171);
  font-size: 0.74rem;
}

.detail-drawer {
  margin: 0 20px 20px;
  border-top: 1px solid #e1e8ef;
}

.detail-drawer summary {
  cursor: pointer;
  padding: 14px 0;
  color: #344054;
  font-size: 0.8rem;
  font-weight: 900;
}

.detail-drawer .detail-section {
  margin-top: 0;
}

.detail-drawer textarea {
  width: 100%;
}

@media (max-width: 1280px) {
  /* Dead-code rules removed: .app-shell grid-template-columns and .sidebar
     position/height were overridden by .app-shell:not(.hidden) and .sidebar
     !important rules at the end of the file (fixed-sidebar architecture).
     Keeping only the rules that still take effect at narrow viewports. */
  .sidebar-note {
    display: none;
  }

  .command-center {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 0.6fr);
  }

  .source-ledger {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .source-workbench {
    grid-template-columns: 1fr;
  }

  #view-discover .source-workbench,
  .home-grid,
  .home-support-grid {
    grid-template-columns: 1fr;
  }

  .journey-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .source-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .beta-readiness {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .source-picker .meta-label {
    grid-column: 1 / -1;
  }

  .discover-panel,
  .custom-discover-panel,
  .search-discover-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intelligence-strip {
    grid-template-columns: 1fr;
  }

  .lead-layout,
  .jobs-layout {
    grid-template-columns: 1fr;
  }

  #view-leads .lead-layout {
    grid-template-columns: 1fr;
  }

  .lead-profile-grid,
  .primary-contact-strip,
  .relationship-controls {
    grid-template-columns: 1fr;
  }

  #view-leads .lead-list-pane {
    border-right: 0;
    border-bottom: 1px solid #cfd9e4;
  }

  #view-leads .lead-row.active::after {
    display: none;
  }

  .lead-detail,
  .audit-list {
    position: static;
  }

  .signal-grid,
  .playbook-grid,
  .discovery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contacts-head,
  .contact-row {
    grid-template-columns: minmax(240px, 1.2fr) minmax(180px, 0.8fr) minmax(220px, 1fr) 142px;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 13px;
  }

  h2 {
    font-size: 1.72rem;
  }

  .workspace {
    padding: 14px;
  }

  .topbar {
    position: static;
    display: grid;
    margin: 0 0 14px;
    padding: 0 0 14px;
    background: transparent;
    backdrop-filter: none;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex-wrap: wrap;
    width: 100%;
  }

  .topbar-actions > * {
    width: 100%;
    min-width: 0;
  }

  .command-center,
  .intelligence-strip,
  .home-hero,
  .home-overview,
  .home-support-grid,
  .source-picker,
  .contacts-summary,
  .quality-grid,
  .contact-grid,
  .filter-row,
  .scanner-panel,
  .journey-map,
  .account-lifecycle,
  .setup-grid,
  .discover-panel,
  .custom-discover-panel,
  .search-discover-panel,
  .signal-grid,
  .discovery-grid,
  .playbook-grid {
    grid-template-columns: 1fr;
  }

  .command-panel {
    min-height: 0;
  }

  .home-hero-actions {
    justify-content: flex-start;
  }

  .setup-shell {
    grid-template-columns: 1fr;
  }

  .home-coverage-list,
  .home-pipeline-row {
    grid-template-columns: 1fr;
  }

  .command-panel h3 {
    font-size: 1.35rem;
  }

  .source-ledger {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .view-heading,
  .lead-row-head,
  .detail-head,
  .scan-head,
  .result-context,
  .followup-card {
    display: grid;
  }

  #view-leads .view-heading {
    grid-template-columns: 1fr;
  }

  #view-leads .filter-row,
  #view-leads .filter-row label,
  #view-leads .filter-row label:first-child {
    min-width: 0;
    width: 100%;
  }

  .row-metrics {
    display: flex;
    justify-items: start;
    justify-content: flex-start;
    align-items: center;
  }

  .lead-profile-toolbar {
    display: grid;
  }

  .lead-profile-toolbar .priority-dial {
    max-width: none;
  }

  .account-list-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-lifecycle-actions,
  .detail-head-pills {
    justify-content: flex-start;
  }

  .contacts-head {
    display: none;
  }

  .contact-row {
    grid-template-columns: 1fr;
  }

  .pipeline-board {
    grid-template-columns: repeat(6, minmax(230px, 1fr));
  }

  .teams-panel-grid,
  .teams-actions,
  .teams-card-strip,
  .situation-grid {
    grid-template-columns: 1fr;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .topbar-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi-tile {
    min-height: 94px;
  }

  .source-ledger {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* Final Source Desk simplification pass */
.primary-button,
.icon-button {
  border-color: var(--teal);
  background: var(--teal);
  box-shadow: none;
}

.primary-button:hover,
.icon-button:hover {
  border-color: var(--teal-dark);
  background: var(--teal-dark);
  box-shadow: none;
}

.workspace-status {
  color: #687681;
}

.live-dot {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14);
}

#view-discover .view-heading {
  margin-bottom: 16px;
  padding-bottom: 16px;
}

#view-discover .view-copy {
  max-width: 480px;
  color: #5f6c75;
  line-height: 1.55;
}

#view-discover .source-builder {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
}

#view-discover .source-builder-head {
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

#view-discover .source-mode-panel.discover-panel,
#view-discover .source-mode-panel.custom-discover-panel,
#view-discover .source-mode-panel.search-discover-panel {
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 18px;
  background: #ffffff;
}

#view-discover .source-mode-panel::before,
#view-discover .source-mode-panel::after {
  display: none;
  content: none;
}

.source-tabs {
  border-bottom-color: var(--line);
}

.source-tabs .source-option {
  grid-template-columns: 1fr;
  min-height: 56px;
  color: #1f2a33;
}

.source-tabs .source-option:hover {
  background: rgba(255, 255, 255, 0.58);
}

.source-tabs .source-option.active {
  border-color: #c9ddd8;
  background: #ffffff;
}

.source-helper {
  max-width: 760px;
}

.source-submit-row .primary-button {
  justify-content: space-between;
  padding-inline: 14px;
}

.shortcut-hint {
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.68rem;
  font-weight: 780;
  white-space: nowrap;
}

.advanced-settings {
  background: #fbfaf7;
}

.advanced-settings summary {
  min-height: 42px;
}

.topbar-menu-panel {
  box-shadow: 0 12px 28px rgba(17, 23, 25, 0.08);
}

@media (max-width: 1120px) {
  #view-discover .source-mode-panel.discover-panel,
  #view-discover .source-mode-panel.custom-discover-panel,
  #view-discover .source-mode-panel.search-discover-panel,
  .source-submit-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .source-tabs {
    grid-template-columns: 1fr;
  }

  .source-submit-row .primary-button {
    justify-content: center;
  }
}

/* Leads master-detail v2 */
.command-trigger {
  min-width: 58px;
  color: #52606e;
  background: #ffffff;
}

#view-leads .filter-row {
  justify-content: flex-end;
  gap: 8px;
}

#view-leads .filter-row label {
  min-width: 150px;
}

#view-leads .filter-row label:first-child {
  min-width: min(360px, 44vw);
}

#view-leads .lead-layout {
  border-color: var(--line);
  box-shadow: none;
}

#view-leads .lead-list-pane {
  background: #fbfaf7;
}

.pane-head {
  margin-bottom: 8px;
}

.pane-count {
  min-height: 0;
  padding: 0;
  border: 0;
  color: #71808c;
  background: transparent;
  font-size: 0.78rem;
}

.account-list-tabs {
  display: flex;
  gap: 18px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.account-list-tab {
  position: relative;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 10px;
  border: 0;
  border-radius: 0;
  color: #596775;
  background: transparent;
}

.account-list-tab small {
  color: #8a96a3;
  font-size: 0.68rem;
  font-weight: 760;
}

.account-list-tab.active {
  border: 0;
  color: #101820;
  background: transparent;
  box-shadow: none;
}

.account-list-tab.active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--teal);
  content: "";
}

#view-leads .lead-row {
  display: grid;
  gap: 7px;
  min-height: 112px;
  padding: 13px 14px;
  border-left-width: 2px;
}

#view-leads .lead-row.active {
  border-color: #cfe3df;
  border-left-color: var(--teal);
  background: #f4fbf9;
}

#view-leads .lead-row.active::after {
  display: none;
}

.lead-row-head {
  align-items: start;
}

.row-metrics {
  align-items: flex-start;
}

.people-count {
  color: #7a8793;
  font-size: 0.72rem;
  font-weight: 760;
}

.lead-row-reason {
  margin: 0;
  -webkit-line-clamp: 1;
  line-height: 1.45;
}

.lead-row-tagline,
.muted-tagline {
  margin: 0;
  color: #71808c;
  font-size: 0.76rem;
  line-height: 1.45;
}

#view-leads .lead-row .manual-priority-badge {
  min-height: 20px;
  padding: 2px 6px;
  font-size: 0.64rem;
}

.account-metric-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 9px;
  color: #66737f;
  font-size: 0.78rem;
}

.account-metric-row strong {
  color: #16232d;
  font-weight: 900;
}

.lead-profile-status .account-list-pill,
.lead-profile-status .status-pill {
  border-color: #dde4ea;
  color: #52606e;
  background: #f5f7f9;
}

.lead-profile-status .status-call {
  border-color: #d8e2f8;
  color: #244bb8;
  background: #f3f6ff;
}

.lead-detail-tabs {
  display: flex;
  gap: 22px;
  padding: 0 20px;
  border-bottom: 1px solid #e1e8ef;
}

.lead-detail-tab {
  position: relative;
  min-height: 42px;
  padding: 4px 0;
  border: 0;
  color: #66737f;
  background: transparent;
  font-weight: 900;
}

.lead-detail-tab.active {
  color: #101820;
}

.lead-detail-tab.active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--teal);
  content: "";
}

.lead-detail-panel {
  display: none;
}

.lead-detail-panel.active {
  display: block;
}

.segmented-control {
  display: inline-flex;
  flex-wrap: nowrap;
  overflow: hidden;
  border: 1px solid #d7e0e9;
  border-radius: 7px;
  background: #ffffff;
}

.segmented-control button {
  min-height: 34px;
  padding: 7px 12px;
  border: 0;
  border-right: 1px solid #d7e0e9;
  color: #52606e;
  background: transparent;
  font-weight: 850;
}

.segmented-control button:last-child {
  border-right: 0;
}

.segmented-control button.active {
  color: #ffffff;
  background: var(--teal);
}

.segmented-control .avoid-action:not(.active) {
  color: #8a3b22;
}

.lead-profile-toolbar {
  align-items: start;
}

.lead-profile-toolbar .priority-dial {
  max-width: 300px;
  padding: 8px 10px;
}

.lead-profile-grid {
  gap: 18px;
}

.lead-profile-panel p {
  line-height: 1.55;
}

.context-panel {
  padding-right: 10px;
}

.action-panel .detail-actions {
  margin-top: 12px;
}

.relationship-controls small {
  color: #7b8794;
  font-size: 0.72rem;
}

.currency-input {
  text-align: right;
}

.people-spine-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid #e1e8ef;
}

.people-spine-head h5 {
  margin: 4px 0 0;
  font-size: 1rem;
}

.people-spine-head > span {
  color: #7a8793;
  font-size: 0.78rem;
  font-weight: 820;
}

.workflow-actions {
  align-items: center;
}

.workflow-separator {
  width: 1px;
  height: 28px;
  margin-left: auto;
  background: #dce4ec;
}

.advance-action::after {
  content: " ->";
}

.intro-icon-button {
  color: #52606e;
  background: transparent;
}

.lead-profile .people-list {
  margin: 0 20px 20px;
}

.person-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.person-open-button.muted {
  border-color: #dce4ec;
  color: #52606e;
  background: #ffffff;
}

.person-contact-row {
  color: #7a8793;
}

.person-contact-row a {
  font-weight: 760;
}

.confirm-modal,
.shortcut-modal {
  width: min(520px, 100%);
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(17, 23, 25, 0.18);
}

.confirm-modal p {
  margin: 0;
  color: #52606e;
  line-height: 1.55;
}

.confirm-modal label {
  display: grid;
  gap: 6px;
  color: #52606e;
  font-size: 0.78rem;
  font-weight: 850;
}

.danger-primary {
  border-color: #9f2f22;
  background: #b42318;
}

.shortcut-list {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px 12px;
}

.shortcut-list span {
  justify-self: start;
  padding: 3px 7px;
  border: 1px solid #dce4ec;
  border-radius: 5px;
  color: #52606e;
  background: #fbfaf7;
  font-size: 0.72rem;
  font-weight: 900;
}

.shortcut-list strong {
  align-self: center;
  color: #24313d;
  font-size: 0.86rem;
}

/* Settings */
.settings-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  gap: 12px;
  margin-bottom: 14px;
}

.settings-hero article,
.integration-card,
.settings-save-bar {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
}

.settings-hero article {
  padding: 16px;
}

.settings-hero strong {
  display: block;
  margin: 4px 0 6px;
  font-size: 1.08rem;
}

.settings-hero p,
.integration-card p {
  margin: 0;
  color: #52606e;
  line-height: 1.55;
}

.beta-readiness {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}

.beta-readiness article {
  min-height: 168px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.beta-readiness strong {
  display: block;
  margin: 5px 0 7px;
  color: #111820;
  font-size: 0.98rem;
}

.beta-readiness p {
  margin: 0;
  color: #52606e;
  line-height: 1.5;
}

.settings-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.integration-card {
  display: grid;
  gap: 13px;
  align-content: start;
  padding: 16px;
}

.integration-card.configured {
  border-color: #b9dacf;
  background: #fbfffd;
}

.integration-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.integration-card-head h4 {
  margin-top: 3px;
  color: #111820;
  font-size: 1.02rem;
}

.integration-state {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid #dce4ec;
  border-radius: 999px;
  color: #66737f;
  background: #f6f7f5;
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
}

.integration-state.configured {
  border-color: #b9dacf;
  color: #16664b;
  background: #eaf7f0;
}

.settings-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #52606e;
  font-size: 0.76rem;
  font-weight: 850;
}

.settings-form label small {
  min-height: 17px;
  color: #7a8792;
  font-size: 0.71rem;
  font-weight: 760;
}

.integration-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-save-bar {
  grid-column: 1 / -1;
  position: sticky;
  bottom: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 14px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
}

.settings-save-bar strong,
.settings-save-bar span {
  display: block;
}

.settings-save-bar span {
  margin-top: 3px;
  color: #66737f;
  font-size: 0.78rem;
}

/* Pipeline board v2: compact operational kanban */
body[data-active-tab="pipeline"] .workspace {
  background: #f7f6f2;
}

body[data-active-tab="pipeline"] .view-heading {
  margin-bottom: 12px;
}

.pipeline-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.pipeline-heading-actions .view-copy {
  margin: 0;
}

.pipeline-heading-actions .primary-button {
  border-color: var(--burgundy, #7A1F2A);
  background: var(--burgundy, #7A1F2A);
  color: var(--ink-on-burgundy, #FBF7EE);
  box-shadow: none;
}

.pipeline-board {
  grid-template-columns: repeat(6, minmax(252px, 1fr));
  gap: 10px;
  align-items: start;
  padding-bottom: 14px;
}

.pipeline-column {
  --stage: #8b98a5;
  min-height: 520px;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 10px;
  border: 1px solid #e1e5e0;
  border-radius: 8px;
  background: #fbfaf7;
}

.pipeline-stage-new-lead {
  --stage: #89919b;
}

.pipeline-stage-researched {
  --stage: #2f6fbd;
}

.pipeline-stage-contacted {
  --stage: #4f46a8;
}

.pipeline-stage-call-booked {
  --stage: #b7791f;
}

.pipeline-stage-proposal-sent {
  --stage: #c05621;
}

.pipeline-stage-won {
  --stage: #27804f;
}

.pipeline-column-head {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 2px 2px 0;
}

.pipeline-column-head span,
.pipeline-column-head small,
.pipeline-column-head strong {
  display: block;
}

.pipeline-column-head span {
  color: #26323c;
  font-size: 0.72rem;
  font-weight: 920;
  letter-spacing: 0;
}

.pipeline-column-head small {
  margin-top: 3px;
  color: #7a8792;
  font-size: 0.72rem;
  font-weight: 780;
}

.pipeline-column-head strong {
  min-width: 24px;
  color: #27323d;
  font-size: 1rem;
  line-height: 1;
  text-align: right;
}

.pipeline-stage-bar {
  height: 3px;
  display: block;
  margin: 0 0 5px;
  border-radius: 999px;
  background: var(--stage);
}

.pipeline-card {
  position: relative;
  min-height: 58px;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid #e1e6e1;
  border-radius: 7px;
  color: #24313d;
  background: #ffffff;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.pipeline-card::before {
  display: none;
}

.pipeline-card:hover,
.pipeline-card:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--stage) 34%, #d7ded8);
  background: #fffefa;
  box-shadow: 0 8px 18px rgba(17, 23, 25, 0.07);
  transform: translateY(-1px);
}

.pipeline-card-main {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) 12px;
  gap: 8px;
  align-items: center;
}

.pipeline-state-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--stage);
}

.pipeline-card-copy {
  min-width: 0;
}

.pipeline-card-titleline {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
}

.pipeline-card-titleline strong,
.pipeline-card-titleline span,
.pipeline-card-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-card-titleline strong {
  color: #111820;
  font-size: 0.86rem;
  font-weight: 850;
}

.pipeline-card-titleline span {
  color: #7a8792;
  font-size: 0.72rem;
  font-weight: 760;
}

.pipeline-card-copy small {
  display: block;
  margin: 3px 0 0;
  color: #687580;
  font-size: 0.75rem;
  line-height: 1.25;
}

.pipeline-drag-handle {
  width: 10px;
  height: 24px;
  opacity: 0;
  background-image: radial-gradient(#9aa6af 1px, transparent 1.5px);
  background-size: 5px 5px;
  transition: opacity 0.14s ease;
}

.pipeline-card:hover .pipeline-drag-handle,
.pipeline-card:focus-visible .pipeline-drag-handle {
  opacity: 0.8;
}

.pipeline-card-hover {
  display: none;
  gap: 7px;
  margin: 6px 0 0 17px;
  color: #7a8792;
  font-size: 0.72rem;
  line-height: 1.35;
}

.pipeline-card-hover em {
  color: #52606e;
  font-style: normal;
  font-weight: 800;
}

.pipeline-card:hover .pipeline-card-hover,
.pipeline-card:focus-visible .pipeline-card-hover {
  display: flex;
  flex-wrap: wrap;
}

.pipeline-card-call {
  min-height: 86px;
  border-color: color-mix(in srgb, var(--stage) 32%, #e1e6e1);
  background: #ffffff;
}

.pipeline-card-call::before,
.pipeline-card-highlight::before {
  display: none;
}

.pipeline-card-highlight {
  border-color: color-mix(in srgb, var(--stage) 52%, #d7ded8);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--stage) 18%, transparent);
}

.pipeline-quick-actions,
.pipeline-account-line,
.pipeline-route,
.pipeline-tags,
.pipeline-avatar,
.pipeline-card-person {
  display: none;
}

.teams-card-strip {
  grid-template-columns: minmax(0, 1fr) auto auto;
  margin: 8px 0 0 17px;
  padding-top: 8px;
  border-top: 1px solid #e5e9e4;
}

.teams-card-strip .meta-label {
  font-size: 0.64rem;
}

.teams-card-strip strong {
  color: #27323d;
  font-size: 0.78rem;
}

.teams-card-strip small {
  color: #7a8792;
  font-size: 0.7rem;
}

.pipeline-column .empty-state {
  min-height: 48px;
  padding: 14px 10px;
  border-style: dashed;
  background: #ffffff;
}

.pipeline-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  background: rgba(17, 23, 25, 0.18);
}

.pipeline-drawer {
  width: min(460px, 100%);
  height: 100%;
  display: grid;
  align-content: start;
  gap: 16px;
  overflow: auto;
  padding: 20px;
  border-left: 1px solid #dce4df;
  background: #ffffff;
  box-shadow: -20px 0 50px rgba(17, 23, 25, 0.16);
}

.pipeline-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e1e6e1;
}

.pipeline-drawer-head h3 {
  margin: 4px 0 5px;
  font-size: 1.24rem;
}

.pipeline-drawer-head p {
  margin: 0;
  color: #5f6c75;
  line-height: 1.45;
}

.pipeline-drawer-meta,
.pipeline-drawer-routes,
.pipeline-drawer-actions {
  display: grid;
  gap: 8px;
}

.pipeline-drawer-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pipeline-drawer-meta span {
  min-width: 0;
  padding: 10px;
  border: 1px solid #e1e6e1;
  border-radius: 7px;
  color: #52606e;
  background: #fbfaf7;
  font-size: 0.76rem;
  font-weight: 830;
  overflow-wrap: anywhere;
}

.pipeline-drawer-routes a,
.pipeline-drawer-routes span {
  padding: 10px 0;
  border-bottom: 1px solid #edf0ec;
  overflow-wrap: anywhere;
}

.pipeline-drawer-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pipeline-drawer-actions .primary-button {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .pipeline-board {
    grid-template-columns: repeat(6, minmax(240px, 1fr));
  }

  .pipeline-drawer-meta,
  .pipeline-drawer-actions {
    grid-template-columns: 1fr;
  }

  .settings-hero,
  .beta-readiness,
  .settings-form,
  .integration-fields-grid {
    grid-template-columns: 1fr;
  }

  .settings-save-bar {
    position: static;
    display: grid;
  }
}

/* Source OS home v2 visual system */
:root {
  --bg: #faf9f5;
  --panel: #ffffff;
  --paper-warm: #fdfcf8;
  --ink: #0e1318;
  --ink-soft: #4f5560;
  --muted: #767a82;
  --faint: #9ca0a8;
  /* D7 — harden the hairline so dividers read as structural, not scratchy. */
  --line: rgba(15, 20, 25, 0.10);
  --line-strong: rgba(15, 20, 25, 0.18);
  --teal: #0f766e;
  --teal-dark: #0a4f4a;
  --teal-soft: #f0fdfa;
  --blue: #2563eb;
  /* --green deleted here (review-desk-craft): three :root blocks declared the
     same token with three different values, all at equal specificity, so this
     one only ever lost. The single surviving declaration is in the "Mandate
     brand override" :root -- --green: #225B3A, --green-soft: #E0EBE3. */
  --amber: #d97706;
  --violet: #4f46e5;
  --red: #c2410c;
  --nav: #0c0e12;
  --nav-2: #14171d;
  --radius: 8px;
  --shadow: 0 0 0 0.5px rgba(15, 20, 25, 0.05), 0 1px 1px rgba(15, 20, 25, 0.04), 0 8px 18px -8px rgba(15, 20, 25, 0.12);
  --shadow-soft: 0 0 0 0.5px rgba(15, 20, 25, 0.04), 0 1px 2px rgba(15, 20, 25, 0.035);
  --focus: 0 0 0 3px rgba(15, 118, 110, 0.18);
}

html,
body {
  background: var(--bg);
}

body {
  color: var(--ink);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.32;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  content: "";
}

.app-shell {
  position: relative;
  z-index: 1;
  grid-template-columns: 200px minmax(0, 1fr);
}

.sidebar {
  gap: 0;
  padding: 0;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(15, 118, 110, 0.08), transparent 60%),
    linear-gradient(180deg, #0c0e12 0%, #090b0f 100%);
}

.brand-block {
  min-height: 74px;
  padding: 20px 16px 18px;
  border-bottom: 0;
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background:
    radial-gradient(120% 100% at 0 0, rgba(255, 255, 255, 0.2), transparent 60%),
    linear-gradient(165deg, #14b8a6 0%, #0f766e 55%, #0a4f4a 100%);
  color: #ecfeff;
  font-size: 0.68rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 10px -2px rgba(10, 79, 74, 0.42);
}

.brand-block .eyebrow {
  margin-bottom: 2px;
  color: #62666e;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.brand-block h1 {
  color: #eceef2;
  font-size: 13px;
  font-weight: 500;
}

.brand-owner {
  color: #62666e;
  font-weight: 400;
}

.brand-block h1::after {
  content: none;
  color: #62666e;
  font-weight: 400;
}

.nav-tabs {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
  padding: 4px 8px;
}

.nav-section-label {
  margin: 18px 10px 6px;
  color: #3f434a;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.nav-tab {
  min-height: 34px;
  padding: 7px 10px;
  border-color: transparent;
  border-radius: 6px;
  color: #8e929b;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
}

.nav-tab::before {
  display: none;
}

.nav-tab:hover {
  color: #eceef2;
  background: rgba(255, 255, 255, 0.04);
  transform: none;
}

.nav-tab.active {
  color: #f4f6f9;
  background: linear-gradient(90deg, rgba(20, 184, 166, 0.11), rgba(20, 184, 166, 0.02));
  border-color: rgba(20, 184, 166, 0.18);
  box-shadow: inset 2px 0 0 #14b8a6;
  transform: none;
}

.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  font-size: 10.5px;
  font-weight: 700;
}

.sidebar-footer strong,
.sidebar-footer small {
  display: block;
}

.sidebar-footer strong {
  color: #eceef2;
  font-size: 12.5px;
  font-weight: 600;
}

.sidebar-footer small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #62666e;
  font-size: 11px;
}

.sidebar-footer small i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
}

.workspace {
  /* Full-bleed app: use the whole viewport width on large / 33" monitors
     instead of a centred 1400px column. */
  max-width: none;
  margin: 0;
  padding: 24px clamp(20px, 2vw, 48px) 56px;
}

.topbar {
  height: 56px;
  margin: -24px -32px 24px;
  padding: 0 32px;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 249, 245, 0.86);
  backdrop-filter: saturate(140%) blur(12px);
}

.tb-breadcrumb {
  min-width: 190px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 13px;
}

.tb-breadcrumb em {
  color: var(--faint);
  font-style: normal;
}

.tb-breadcrumb h2 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.topbar-status {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 12px;
  margin: 0;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.66);
  color: var(--muted);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-sizing: border-box;
}

/* Topbar hidden globally — the greeting now sits at the top of the workspace.
   All children kept in DOM for the Ctrl-K palette shortcut and the various
   handlers that still target their IDs (exportCsv, openSettings, logoutButton…) */
.topbar,
.tb-breadcrumb[hidden],
.topbar-actions[hidden],
.topbar-status[hidden],
.command-trigger[hidden],
.home-next-action[hidden] {
  display: none !important;
}

/* Workspace breathes less at the top now that there's no topbar to anchor to. */
.workspace {
  padding-top: 14px !important;
}

.topbar-status .live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16);
}

.topbar-status time {
  color: var(--ink-soft);
}

@media (max-width: 1100px) {
  .topbar-status {
    display: none;
  }
}

.command-trigger {
  width: min(260px, 28vw);
  min-height: 32px;
  justify-content: flex-start;
  margin: 0;
  padding: 4px 10px;
  border-color: var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 1px rgba(15, 20, 25, 0.02);
  font-weight: 450;
}

.command-trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-trigger kbd {
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--ink-soft);
  background: linear-gradient(180deg, #fff 0%, #f6f4ec 100%);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
}

.topbar-actions {
  flex: 0 0 auto;
}

.primary-button,
.secondary-button,
.ghost-button,
.icon-button,
.topbar-menu summary {
  border-radius: 6px;
  font-weight: 600;
}

.icon-button {
  min-height: 34px;
  border-color: #0e1318;
  background: linear-gradient(180deg, #1f252b 0%, #0e1318 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 10px -2px rgba(15, 20, 25, 0.22);
}

.button-icon {
  display: none;
}

.home-v2 {
  padding-top: 8px;
}

.command-center,
.kpi-grid,
.intelligence-strip {
  display: none;
}

.home-v2-hero {
  display: block;
  padding: 0;
}

.home-v2-copy {
  min-width: 0;
  text-align: left;
}

.home-v2 h3 {
  margin: 0 0 2px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.home-v2 h3 span {
  color: var(--teal-dark);
}

#homeEmptyIntro {
  display: none;
  max-width: 560px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.home-empty #homeEmptyIntro {
  display: block;
}

.home-empty .home-v2-hero {
  padding-bottom: 22px;
}

.home-v2-brief {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.home-empty .home-v2-brief {
  display: none;
}

/* Empty-state intro: hide every data-driven section so the welcome
   hero + people-launchpad ("Find new leads / Paste websites / Search
   the web") become the entire screen. Each launchpad card teaches
   what the action does, so Sarah's "watch it bloom from blank"
   journey starts cleanly. Sections reappear automatically when the
   workspace has any leads. */
body.home-empty .kpi-grid,
body.home-empty .intelligence-strip,
body.home-empty .home-jobs-strip,
body.home-empty .home-stat-strip,
body.home-empty .home-v2-grid {
  display: none !important;
}

/* =================================================================
   First-run bimodal home — once the user has completed any discovery
   the body class is removed and the regular home renders. Trigger is
   one-time-gated (currentUser.firstRunCompletedAt or localStorage),
   never live-state-derived, so a workspace wipe mid-pilot does not
   re-onboard.
   ================================================================= */

.home-onboarding {
  display: none;
}

body.first-run-pending .home-onboarding {
  display: block;
  margin: 0 0 24px;
}

/* Hide the rest of the home page during first-run-pending so the
   onboarding zone is the only thing on screen. home-jobs-strip stays
   visible because that is the "while you wait" surface during a run. */
body.first-run-pending .home-v2-hero,
body.first-run-pending .home-people-launchpad,
body.first-run-pending .home-connectors,
body.first-run-pending .kpi-grid,
body.first-run-pending .intelligence-strip,
body.first-run-pending .home-stat-strip,
body.first-run-pending .home-v2-grid {
  display: none !important;
}

/* Sidebar dim for the seven data-dependent tabs while onboarding is
   still pending. Stays in place after the first run completes — no
   shapeshifting. Discover / Source check / Playbook / Settings stay
   at full weight because they remain useful pre-data. */
body.first-run-pending #tab-leads,
body.first-run-pending #tab-issuers,
body.first-run-pending #tab-maturity,
body.first-run-pending #tab-contacts,
body.first-run-pending #tab-pipeline,
body.first-run-pending #tab-briefs,
body.first-run-pending #tab-followups {
  opacity: 0.45;
}

body.first-run-pending #tab-leads:hover,
body.first-run-pending #tab-issuers:hover,
body.first-run-pending #tab-maturity:hover,
body.first-run-pending #tab-contacts:hover,
body.first-run-pending #tab-pipeline:hover,
body.first-run-pending #tab-briefs:hover,
body.first-run-pending #tab-followups:hover {
  opacity: 0.7;
}

body.first-run-pending #tab-home,
body.first-run-pending #tab-discover,
body.first-run-pending #tab-scanner,
body.first-run-pending #tab-playbook,
body.first-run-pending #tab-settings {
  opacity: 1 !important;
}

/* Zone 1 — Orient */
.home-onboarding-head {
  padding: 4px 0 24px;
}

.home-onboarding-eyebrow {
  margin: 0 0 12px;
  color: var(--mandate-red, #7C1F2A);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.home-onboarding-title {
  margin: 0 0 12px;
  color: var(--ink, #0A0A0A);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.18;
}

.home-onboarding-intro {
  max-width: 660px;
  margin: 0;
  color: var(--ink-soft, #2a2a2a);
  font-size: 0.96rem;
  line-height: 1.55;
}

/* Zone 2 — One decision */
.home-onboarding-pick {
  margin-bottom: 28px;
}

/* Section prompt — Ink heading, not red, so it does not stack with the
   brand eyebrow above. Reviewer flagged two red eyebrows back-to-back
   as rhythm-stutter. */
.home-onboarding-prompt {
  margin: 0 0 14px;
  color: var(--ink, #0A0A0A);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

/* State switching — picker vs hero */
.home-onboarding[data-state="picker"] .home-onboarding-prompt-hero,
.home-onboarding[data-state="picker"] .home-onboarding-coverage-summary,
.home-onboarding[data-state="picker"] #homeOnboardingHero,
.home-onboarding[data-state="picker"] .home-onboarding-disclose,
.home-onboarding[data-state="picker"] .home-onboarding-preview {
  display: none;
}
.home-onboarding[data-state="hero"] .home-onboarding-coverage {
  display: none;
}

/* Intent picker — single-pick "what are you looking for?" replacing the
   3-axis multi-select. Concrete mandate scenarios; each option is a clickable
   card with title + tagline. Selected card gets the Mandate Red treatment. */
.home-onboarding-coverage-hint {
  max-width: 620px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.home-onboarding-intent-list,
.setup-intent-list {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
}

.intent-card {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 100ms ease, background 100ms ease;
}

.intent-card:hover {
  border-color: var(--ink-soft);
}

.intent-card input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--mandate-red, #7C1F2A);
  cursor: pointer;
}

.intent-card-body {
  display: block;
  min-width: 0;
}

.intent-card-body strong {
  display: block;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.intent-card-body small {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.intent-card.is-on {
  border-color: var(--mandate-red, #7C1F2A);
  background: rgba(124, 31, 42, 0.04);
}

.intent-card.is-on .intent-card-body strong {
  color: var(--mandate-red, #7C1F2A);
}

/* Setup wizard variant — dark card background, lighter text */
.setup-intent-list .intent-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.setup-intent-list .intent-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.setup-intent-list .intent-card-body strong {
  color: #f8fafc;
}

.setup-intent-list .intent-card-body small {
  color: rgba(248, 250, 252, 0.65);
}

.setup-intent-list .intent-card.is-on {
  border-color: var(--mandate-red, #7C1F2A);
  background: rgba(124, 31, 42, 0.22);
}

.setup-intent-list .intent-card.is-on .intent-card-body strong {
  color: #fff;
}

.home-onboarding-coverage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Coverage summary above the pack hero — editable affordance */
.home-onboarding-coverage-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 0.84rem;
}

.home-coverage-summary-label strong {
  color: var(--ink);
  font-weight: 600;
}

.home-onboarding-coverage-summary .ghost-button {
  margin-left: auto;
  padding: 4px 10px;
  font-size: 0.78rem;
}

.home-onboarding-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  max-width: 760px;
  padding: 26px 28px 28px;
  border: 1px solid #1a1a1c;
  border-radius: 16px;
  color: var(--paper, #F8F5EF);
  background:
    radial-gradient(80% 90% at 0% 0%, rgba(124, 31, 42, 0.22), transparent 55%),
    linear-gradient(180deg, #18181a 0%, #0E0E10 100%);
  box-shadow: 0 14px 42px -22px rgba(0, 0, 0, 0.55);
}

.home-onboarding-hero-eyebrow {
  margin: 0 0 8px;
  color: rgba(248, 245, 239, 0.7);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#homeOnboardingPackLabel {
  margin: 0 0 6px;
  color: var(--paper, #F8F5EF);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.home-onboarding-hero-meta {
  margin: 0 0 10px;
  color: rgba(248, 245, 239, 0.65);
  font-size: 0.82rem;
}

.home-onboarding-hero-desc {
  max-width: 460px;
  margin: 0;
  color: rgba(248, 245, 239, 0.84);
  font-size: 0.9rem;
  line-height: 1.55;
}

.home-onboarding-run-btn {
  background: var(--mandate-red, #7C1F2A);
  color: var(--paper, #F8F5EF);
  border: 0;
  padding: 12px 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 10px;
  box-shadow: 0 6px 18px -10px rgba(124, 31, 42, 0.85);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 120ms ease;
}

.home-onboarding-run-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(124, 31, 42, 0.95);
}

.home-onboarding-disclose {
  margin-top: 14px;
}

.home-onboarding-disclose > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.home-onboarding-disclose > summary::-webkit-details-marker { display: none; }

.home-onboarding-disclose > summary::before {
  content: "▾";
  display: inline-block;
  width: 14px;
  color: var(--muted);
  transition: transform 120ms ease;
}

.home-onboarding-disclose[open] > summary::before {
  transform: rotate(180deg);
}

.home-onboarding-alternatives {
  margin-top: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
}

.home-onboarding-packs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.home-onboarding-alt-pack {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 100ms ease, transform 100ms ease;
}

.home-onboarding-alt-pack:hover {
  border-color: var(--mandate-red, #7C1F2A);
  transform: translateY(-1px);
}

.home-onboarding-alt-pack strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.home-onboarding-alt-pack small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.home-onboarding-alt-pack span {
  color: var(--mandate-red, #7C1F2A);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.home-onboarding-other-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 760px) {
  .home-onboarding-hero {
    grid-template-columns: 1fr;
  }
  .home-onboarding-other-actions {
    grid-template-columns: 1fr;
  }
}

/* Zone 3 — Preview canvas */
.home-onboarding-preview {
  padding-top: 4px;
}

.home-onboarding-preview-caption {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.82rem;
  font-style: italic;
}

.home-onboarding-preview-rows {
  display: grid;
  gap: 10px;
}

.home-onboarding-preview-row {
  padding: 16px 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background:
    repeating-linear-gradient(135deg, rgba(15, 15, 15, 0.012) 0 6px, transparent 6px 12px),
    #fff;
  opacity: 0.78;
}

.home-onboarding-preview-row header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.home-onboarding-preview-row header strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.home-preview-tier {
  padding: 2px 8px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-onboarding-preview-row dl {
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: 0.85rem;
}

.home-onboarding-preview-row dl > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px;
}

.home-onboarding-preview-row dt {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.home-onboarding-preview-row dd {
  margin: 0;
  color: var(--ink-soft);
}

.home-onboarding-preview-row dd em {
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 640px) {
  .home-onboarding-preview-row dl > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* =================================================================
   Discover — live progress card. Appears above the source-workbench
   while a discovery job is running so the user sees real-time:
   processed/total, status message from the worker, current target,
   elapsed time, and the pipeline stages each target moves through.
   ================================================================= */
/* Onboarding checklist — appears under the pack hero on the first-run home.
   Four activation milestones (Codex's research: 3-5 items, not-dismissible,
   tied to real product actions). Auto-completes as the user earns each step;
   the whole section hides once first-run-pending flips false. */
.home-onboarding-checklist {
  display: grid;
  gap: 14px;
  max-width: 760px;
  margin: 18px 0 0;
  padding: 18px 22px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(124, 31, 42, 0.04), transparent 60%),
    #fff;
}

.home-onboarding-checklist-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.home-onboarding-checklist-head .eyebrow {
  margin: 0 0 4px;
  color: var(--mandate-red, #7C1F2A);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.home-onboarding-checklist-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
}

.home-onboarding-checklist-meta {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.home-onboarding-checklist-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-onboarding-checklist-list > li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  transition: background 120ms ease, border-color 120ms ease;
}

.home-onboarding-checklist-list > li:hover {
  border-color: rgba(124, 31, 42, 0.2);
}

.home-onboarding-checklist-list > li.is-done {
  background:
    radial-gradient(60% 100% at 0% 0%, rgba(34, 91, 58, 0.06), transparent 60%),
    var(--panel-soft);
  border-color: rgba(34, 91, 58, 0.18);
}

.home-onboarding-checklist-list > li strong {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.home-onboarding-checklist-list > li small {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.home-onboarding-checklist-list > li.is-done strong {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.home-onboarding-checklist-check {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1.5px solid var(--line-strong, #cdc7bb);
  border-radius: 999px;
  background: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.home-onboarding-checklist-list > li.is-done .home-onboarding-checklist-check {
  border-color: rgba(34, 91, 58, 0.6);
  background: rgba(34, 91, 58, 0.85);
  position: relative;
}

.home-onboarding-checklist-list > li.is-done .home-onboarding-checklist-check::after {
  content: "";
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(0, -1px);
}

.discover-live-progress[hidden] {
  display: none !important;
}

.discover-live-progress {
  display: grid;
  gap: 14px;
  margin: 0 0 18px;
  padding: 18px 22px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(124, 31, 42, 0.06), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fbfaf5 100%);
  box-shadow: var(--shadow-soft);
}

.discover-live-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.discover-live-head .eyebrow {
  margin: 0 0 4px;
  color: var(--mandate-red, #7C1F2A);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.discover-live-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
}

.discover-live-spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--mandate-red, #7C1F2A);
  box-shadow: 0 0 0 0 rgba(124, 31, 42, 0.45);
  animation: discoverLivePulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
  margin-top: 6px;
}

@keyframes discoverLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(124, 31, 42, 0.45); opacity: 1; }
  70% { box-shadow: 0 0 0 14px rgba(124, 31, 42, 0); opacity: 0.7; }
  100% { box-shadow: 0 0 0 0 rgba(124, 31, 42, 0); opacity: 1; }
}

.discover-live-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--panel-soft);
  overflow: hidden;
}

.discover-live-bar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--mandate-red, #7C1F2A), #b5424e);
  border-radius: inherit;
  transition: width 400ms ease;
}

.discover-live-status {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.discover-live-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
}

.discover-live-meta > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.discover-live-meta dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.discover-live-meta dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-live-pipeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pipeline;
}

.discover-live-pipeline li {
  position: relative;
  padding: 10px 12px 10px 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.4;
  counter-increment: pipeline;
}

.discover-live-pipeline li::before {
  content: counter(pipeline);
  position: absolute;
  top: 10px;
  left: 10px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--mandate-red, #7C1F2A);
  color: var(--paper, #F8F5EF);
  font-size: 0.72rem;
  font-weight: 700;
}

.discover-live-pipeline strong {
  display: block;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.discover-live-link {
  color: var(--mandate-red, #7C1F2A);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  align-self: start;
}

.discover-live-link:hover {
  opacity: 0.8;
}

@media (max-width: 880px) {
  .discover-live-meta,
  .discover-live-pipeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =================================================================
   Setup wizard — two-step. Step 1 profile, step 2 coverage.
   Reuses .home-onboarding-chip styles from the home onboarding so
   the visual language matches end-to-end.
   ================================================================= */
.setup-step-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 4px 0 14px;
  padding: 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}

.setup-step-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.setup-step-dot > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.72rem;
  font-weight: 700;
}

.setup-step-dot.is-active {
  border-color: var(--mandate-red, #7C1F2A);
  color: #fff;
  background: rgba(124, 31, 42, 0.18);
}

.setup-step-dot.is-active > span {
  background: var(--mandate-red, #7C1F2A);
  color: #fff;
}

.setup-step-dot.is-done > span {
  background: rgba(34, 91, 58, 0.35);
  color: #aedbb4;
}

.setup-step[hidden] {
  display: none !important;
}

.setup-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

.setup-coverage-axes {
  display: grid;
  gap: 14px;
  margin: 6px 0 14px;
}

.setup-coverage-axes fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.setup-coverage-axes legend {
  margin-bottom: 6px;
  color: #f8fafc;
  font-size: 0.8rem;
  font-weight: 700;
}

.setup-coverage-axes .home-onboarding-chip {
  padding: 5px 10px;
  font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.78);
  border-color: rgba(255, 255, 255, 0.14);
}

.setup-coverage-axes .home-onboarding-chip:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

.setup-coverage-axes .home-onboarding-chip.is-on,
.setup-coverage-axes .home-onboarding-chip[aria-pressed="true"] {
  background: var(--mandate-red, #7C1F2A);
  color: #fff;
  border-color: var(--mandate-red, #7C1F2A);
}

/* Home connector explainer — teaches Sarah what the web search and
   Hunter keys actually do, and ties them to the third launchpad card.
   Visible only on the empty-state home; hides automatically once the
   workspace has data, since by then she's already inside the product. */
.home-connectors {
  display: none;
}

body.home-empty .home-connectors {
  display: block;
  margin-top: 18px;
  padding: 22px 24px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(60% 100% at 0% 0%, rgba(15, 118, 110, 0.05), transparent 55%),
    linear-gradient(180deg, #fff 0%, #fbfaf5 100%);
  box-shadow: var(--shadow-soft);
}

.home-connectors-head {
  display: grid;
  gap: 6px;
  max-width: 720px;
  margin-bottom: 18px;
}

.home-connectors-head h4 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--ink);
}

.home-connectors-head p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.home-connectors-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 880px) {
  .home-connectors-grid {
    grid-template-columns: 1fr;
  }
}

.home-connector-card {
  display: grid;
  gap: 10px;
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.home-connector-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.home-connector-card header strong {
  font-size: 0.98rem;
  color: var(--ink);
}

.home-connector-card .integration-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.home-connector-card .integration-pill.configured {
  border-color: rgba(15, 118, 110, 0.35);
  background: rgba(15, 118, 110, 0.08);
  color: var(--teal);
}

.home-connector-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
}

.home-connector-card dl > div {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 10px;
  align-items: baseline;
}

.home-connector-card dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.home-connector-card dd {
  margin: 0;
  color: var(--ink-soft);
}

.home-connector-card dd code {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--panel-soft);
  color: var(--ink);
  font-size: 0.82rem;
}

.home-connector-card button {
  justify-self: start;
  margin-top: 4px;
}

.home-connector-card.configured {
  background:
    radial-gradient(60% 100% at 0% 0%, rgba(15, 118, 110, 0.04), transparent 60%),
    #fff;
}

@media (max-width: 640px) {
  .home-connector-card dl > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.home-v2-brief span,
.home-v2-brief .home-brief-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: linear-gradient(180deg, #fff 0%, var(--paper-warm) 100%);
  box-shadow: var(--shadow-soft);
  font-size: 12px;
  font-weight: 450;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.home-v2-brief .home-brief-chip:hover {
  border-color: rgba(124, 31, 42, 0.32);
  background: #fff;
  transform: translateY(-1px);
}

.home-v2-brief .home-brief-chip strong {
  color: var(--ink);
  font-weight: 650;
}

.home-v2-brief i,
.home-stat-card i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.home-v2-brief .due,
.home-stat-card.due i {
  background: var(--amber);
}

.home-v2-brief .booked {
  background: var(--violet);
}

.home-v2-brief .new,
.home-stat-card.worklist i {
  background: var(--blue);
}

.home-stat-card.managed i {
  background: var(--green);
}

.home-stat-card.avoid i {
  background: #71717a;
}

.home-next-action {
  width: 100%;
  display: grid;
  gap: 8px;
  padding: 10px 12px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(124, 31, 42, 0.06), transparent 50%),
    linear-gradient(180deg, #fff 0%, #fbfaf5 100%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 12px;
}

.home-next-action .home-next-person strong {
  font-size: 13px;
}

.home-next-action .home-next-person small {
  font-size: 11px;
  line-height: 1.3;
}

.home-next-action p {
  font-size: 11.5px !important;
  padding-top: 6px !important;
  line-height: 1.4 !important;
}

.home-next-action .primary-button.compact-button {
  padding: 5px 10px;
  font-size: 12px;
}

.home-empty .home-next-action {
  border-color: rgba(20, 184, 166, 0.25);
  color: #fff;
  background:
    radial-gradient(80% 60% at 0 0, rgba(20, 184, 166, 0.18), transparent 50%),
    radial-gradient(60% 40% at 100% 100%, rgba(94, 234, 212, 0.1), transparent 50%),
    linear-gradient(170deg, #0a4f4a 0%, #073c37 100%);
}

.home-next-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-empty .home-next-label,
.home-empty .home-next-action p,
.home-empty .home-next-person small {
  color: rgba(255, 255, 255, 0.66);
}

.home-next-label i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
}

.home-next-person {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}

.home-next-person strong,
.home-next-person small {
  display: block;
}

.home-next-person strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.home-empty .home-next-person strong {
  color: #fff;
}

.home-next-person small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.home-next-action p {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

.home-empty .home-next-action p {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.home-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-empty .home-next-actions .secondary-button {
  border-color: rgba(255, 255, 255, 0.18);
  color: #ecfeff;
  background: rgba(255, 255, 255, 0.08);
}

.start-avatar {
  color: #ecfeff;
  background: rgba(20, 184, 166, 0.26);
}

.home-people-launchpad {
  display: grid;
  grid-template-columns: minmax(220px, 0.6fr) minmax(0, 1.4fr);
  gap: 12px;
  align-items: stretch;
  margin-bottom: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(124, 31, 42, 0.18);
  border-radius: 12px;
  background:
    radial-gradient(70% 90% at 0 0, rgba(124, 31, 42, 0.08), transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #fbfaf5 100%);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* Hide the long web search / Hunter onboarding cards on home — they belong
   in Settings now. The connector status itself is still surfaced inline elsewhere. */
.home-connectors {
  display: none !important;
}

.home-launch-copy {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}

.home-launch-copy h4 {
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.12;
}

.home-launch-copy p:not(.eyebrow) {
  max-width: 430px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.45;
}

.home-launch-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.home-launch-card {
  position: relative;
  min-height: 76px;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.home-launch-card:hover {
  border-color: rgba(124, 31, 42, 0.28);
  background: #ffffff;
  transform: translateY(-1px);
}

/* FE-016: "needs-setup" replaces .is-disabled for the Search-the-web card
   so the card stays clickable but signals it routes to setup rather than
   running a search. Soft dashed accent, no opacity dim, no not-allowed
   cursor — clicking is the call-to-action. */
.home-launch-card.needs-setup {
  border-style: dashed;
  border-color: rgba(124, 31, 42, 0.45);
  background: rgba(250, 247, 244, 0.92);
}

.home-launch-card.needs-setup:hover {
  border-style: dashed;
  border-color: rgba(124, 31, 42, 0.6);
  background: #fff;
}

/* FE-016: same treatment for the Discover-tab segment selector
   (`.source-tabs .source-option[data-source-mode="search"]`). */
.source-tabs .source-option.needs-setup {
  border-style: dashed;
  border-color: rgba(124, 31, 42, 0.45);
}
.source-tabs .source-option.needs-setup:hover {
  border-color: rgba(124, 31, 42, 0.6);
}

/* FE-016: dv2 describe card carries .needs-setup until web search is
   connected. Dashed accent, not greyed out. Stays clickable. */
.dv2-mode-card.needs-setup {
  border-style: dashed;
  border-color: rgba(124, 31, 42, 0.45);
  opacity: 1;
  cursor: pointer;
}
.dv2-mode-card.needs-setup:hover {
  border-color: rgba(124, 31, 42, 0.6);
  background: rgba(124, 31, 42, 0.03);
}

.home-launch-card span {
  width: 28px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(124, 31, 42, 0.16);
  border-radius: 999px;
  color: var(--teal-dark);
  background: var(--teal-soft);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 650;
}

.home-launch-card strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.014em;
}

.home-launch-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.45;
}

.home-launch-card::after {
  position: absolute;
  right: 14px;
  bottom: 12px;
  color: var(--faint);
  content: ">";
  font-weight: 650;
}

.home-launch-card.primary-route {
  border-color: rgba(124, 31, 42, 0.26);
  background:
    radial-gradient(100% 100% at 100% 0, rgba(124, 31, 42, 0.10), transparent 54%),
    #ffffff;
}

.home-launch-card.is-disabled {
  opacity: 0.6;
}

.home-launch-card.is-disabled:hover {
  border-color: var(--line);
  transform: none;
}

.home-jobs-strip {
  display: grid;
  gap: 12px;
  margin: -4px 0 24px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #fbfaf5 100%);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.home-jobs-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.home-jobs-strip-head h4 {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.home-jobs-strip-head .eyebrow {
  margin-bottom: 4px;
}

.home-jobs-strip-head span {
  flex-shrink: 0;
  color: var(--muted);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.home-jobs-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

.home-job-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-width: 0;
  min-height: 78px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.home-job-card-copy {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.home-job-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.home-job-card-head strong {
  min-width: 0;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.home-job-status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.home-job-status-running {
  color: var(--teal);
  background: var(--teal-soft);
}

.home-job-status-queued {
  color: var(--ink-soft);
  background: var(--stone, #E8E3D7);
}

.home-job-progress-row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.home-job-progress-track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--line);
}

.home-job-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.home-job-progress-row span,
.home-job-card time {
  color: var(--muted);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.home-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #fbfaf5 100%);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.home-empty .home-stat-strip {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(251, 250, 245, 0.86) 100%);
}

.home-empty .home-stat-card strong {
  color: #b6bdc4;
}

.home-stat-card {
  min-height: 82px;
  padding: 12px 16px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.home-stat-card:hover {
  background: rgba(124, 31, 42, 0.04);
}

.home-stat-card:last-child {
  border-right: 0;
}

.home-stat-card span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-stat-card strong {
  display: block;
  margin: 6px 0 2px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1;
}

.home-stat-card p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

/* FE-061b — Home grid layout. Two columns × two rows:
     [ Today's queue (wide)            | Activity (narrow) ]
     [ Pipeline (wide)                 | Lead sources (narrow) ]
   The existing `.home-v2-left` / `.home-v2-right` wrappers stay in the
   markup but go `display: contents`, so their children flatten into the
   parent grid and we get the row pairing without a HTML restructure. */
.home-v2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-auto-rows: min-content;
  gap: 6px;
}

.home-v2-left,
.home-v2-right {
  display: contents;
}

.home-panel {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #fbfaf5 100%);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.home-panel-head {
  align-items: center;
  margin: 0 !important;
  padding: 3px 12px;
  border-bottom: 1px solid var(--line);
  min-height: 0;
}

.home-panel-head h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
}

/* FE-023: optional explainer line under a panel heading. Used by the
   "Where your leads came from" coverage panel so the operator knows what
   the breakdown counts. Inherits 1-line clamp via `:not(:empty)` flex
   sibling so a missing subtitle doesn't reserve space. */
.home-panel-head-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.home-panel-subtitle {
  margin: 0;
  color: var(--muted, #6E6A65);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.25;
}

.home-panel-head .compact-button,
.home-panel-head .ghost-button {
  min-height: 22px;
  padding: 2px 8px;
  font-size: 0.7rem;
  line-height: 1.1;
}

.home-panel-head h4 span {
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--muted);
  background: rgba(15, 20, 25, 0.04);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
}

.home-focus-list {
  gap: 0;
}

.home-focus-row {
  min-height: 40px;
  grid-template-columns: 10px 24px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 5px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-focus-row:hover {
  border-color: var(--line);
  background: linear-gradient(90deg, rgba(15, 118, 110, 0.03), transparent 34%);
}

.home-focus-row .avatar,
.home-next-person .avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 0.5px rgba(15, 20, 25, 0.08);
}

.home-next-person .avatar {
  width: 34px;
  height: 34px;
}

.home-priority-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  justify-self: center;
}

.home-priority-dot.high,
.home-priority-dot.mid {
  background: var(--amber);
}

.home-priority-dot.low {
  background: #b8bdc4;
}

.home-focus-row strong {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}

.home-focus-row small {
  color: var(--muted);
  font-size: 11.5px;
}

.home-focus-row small b {
  color: var(--ink-soft);
  font-weight: 500;
}

.home-focus-row em {
  color: var(--muted);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
}

.home-focus-row em.urgent {
  color: var(--amber);
}

.home-empty-card {
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 54px 24px 58px;
  text-align: center;
}

.home-empty-queue {
  min-height: 300px;
  background:
    radial-gradient(70% 58% at 50% 0, rgba(15, 118, 110, 0.055), transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent);
}

.home-empty-card > span {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--teal);
  background: radial-gradient(120% 100% at 50% 0, rgba(15, 118, 110, 0.06), transparent 60%), linear-gradient(180deg, #fff 0%, #f6f4ec 100%);
  font-size: 26px;
}

.home-empty-card strong {
  font-size: 14px;
}

.home-empty-card p {
  max-width: 340px;
  color: var(--muted);
  line-height: 1.55;
}

.home-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

/* FE-061b — Activity list is now the narrow right-hand cell of the top
   row. Cap its height so it can't drag the whole row taller than the
   queue alongside it; rows inside scroll if there's more. */
.home-activity-list {
  position: relative;
  padding: 2px 0;
  max-height: 240px;
  overflow-y: auto;
}

.home-activity-row {
  width: 100%;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 4px 10px;
  border: 0;
  background: transparent;
  text-align: left;
}

.home-activity-row:hover {
  background: linear-gradient(90deg, rgba(15, 118, 110, 0.025), transparent 35%);
}

/* FE-022: activity-row detail now shows name + title + a has-contact-route
   indicator instead of crawl-stat noise ("N people/routes / K public pages").
   The indicator is a small inline chip — green when the lead has a direct
   email/phone, muted-warm when it doesn't. Operator-actionable at a glance. */
.home-activity-detail {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.home-activity-person {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--ink-soft, #5A5754);
}

.home-activity-person-title {
  color: var(--muted, #6E6A65);
  font-size: 0.85em;
  font-weight: 400;
}

.home-activity-contact {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.home-activity-contact-ok {
  background: rgba(34, 91, 58, 0.10);
  color: var(--green, #225B3A);
}

.home-activity-contact-off {
  background: rgba(124, 31, 42, 0.06);
  color: var(--muted, #6E6A65);
}

/* Show-and-tell pilot mode — collapse the sidebar to Sarah's core flow.
   The flow she actually uses: Home → Discover → Leads → Contacts →
   Pipeline (move found people through stages) → Follow-ups (track who
   needs chasing) → Briefs → Settings. The "infrastructure" tabs
   (Issuers / Maturity wall / Source check / Playbook) stay collapsed —
   they were holdovers from the broader Mandate vision and aren't load-
   bearing for the pilot. Hidden tabs stay in the DOM so deep-links,
   keyboard shortcuts, and JS handlers that target #view-issuers /
   #view-playbook etc. still work; only the visible nav entry is
   suppressed. */
.nav-tab#tab-issuers,
.nav-tab#tab-maturity,
.nav-tab#tab-scanner,
.nav-tab#tab-playbook {
  display: none !important;
}

/* Show-and-tell pilot mode — force the wired home-v2 layout instead of
   the static-then-wired home-v3 port. The v3 layout (ticker, kanban,
   queue rows) ships hardcoded mock data per docs/home-implementation.md;
   until those surfaces are wired to the live `leads` array, v2 — which
   is fully wired through renderHome — is the credible surface for Sarah.
   Achieved without re-attributing the body so the body-attribute-bound
   sticky bar / cmd-K input / Discover v2 styles keep working as before.
   To revert on a demo machine: comment the block out. */
body[data-home-version="v3"] .home-v3 {
  display: none !important;
}
body[data-home-version="v3"] .home-v2-hero {
  display: block !important;
}
body[data-home-version="v3"] .home-people-launchpad,
body[data-home-version="v3"] .home-jobs-strip,
body[data-home-version="v3"] .home-stat-strip,
body[data-home-version="v3"] .home-v2-grid {
  display: grid !important;
}

/* Show-and-tell — kill the "Soon" chip on the dv2 describe card. The card
   itself is clickable + routes to Settings when web search isn't
   connected (FE-016); the chip read as "this feature isn't ready" which
   contradicted the clickable affordance. */
.dv2-chip-soon {
  display: none !important;
}

/* FE-021: day-bucket separator between activity rows. Thin top border + a
   small uppercase label so the timeline reads as a chronology, not a flat
   list. The first separator shouldn't add a leading border. */
.home-activity-day-sep {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 2px;
  padding: 4px 10px 0;
  border-top: 1px solid var(--line, #E8E3D7);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6E6A65);
}

.home-activity-day-sep:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.home-activity-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e5e7eb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 2px var(--paper-warm);
}

.home-activity-icon.due,
.home-activity-icon.pipeline-stage-call-booked,
.home-activity-icon.pipeline-stage-ipts,
.home-activity-icon.pipeline-stage-guidance {
  background: #fde68a;
}

.home-activity-icon.pipeline-stage-contacted,
.home-activity-icon.pipeline-stage-priced {
  background: #c7d2fe;
}

.home-activity-icon.pipeline-stage-researched,
.home-activity-icon.pipeline-stage-rumour,
.home-activity-icon.pipeline-stage-worklist {
  background: #bfdbfe;
}

.home-activity-icon.pipeline-stage-won,
.home-activity-icon.pipeline-stage-mandated,
.home-activity-icon.pipeline-stage-settled,
.home-activity-icon.pipeline-stage-managed {
  background: #a7f3d0;
}

.home-activity-icon.pipeline-stage-avoid {
  background: #e5e7eb;
  opacity: 0.55;
}

.home-activity-row strong,
.home-activity-row small {
  display: block;
}

.home-activity-row strong {
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-activity-row small,
.home-activity-row em,
.home-empty-activity {
  color: var(--muted);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-activity-row em {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-style: normal;
}

.home-empty-activity {
  padding: 32px 24px;
  text-align: center;
}

.home-onboarding-guide {
  display: grid;
  gap: 0;
}

.home-onboarding-guide article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.home-onboarding-guide article:last-child {
  border-bottom: 0;
}

.home-onboarding-guide span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid #b9dacf;
  border-radius: 999px;
  color: var(--teal-dark);
  background: var(--teal-soft);
  font-size: 0.72rem;
  font-weight: 900;
}

.home-onboarding-guide strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.home-onboarding-guide p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.home-pipeline-list {
  gap: 3px;
  padding: 8px 14px 10px;
}

.home-pipeline-row {
  --stage: #71717a;
  min-height: 22px;
  grid-template-columns: minmax(0, 1fr) 92px 32px;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.home-pipeline-row i {
  order: 1;
  height: 22px;
  border-radius: 5px;
  background: rgba(15, 20, 25, 0.035);
  overflow: hidden;
}

.home-pipeline-row i b {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: color-mix(in srgb, var(--stage) 34%, #ffffff);
}

.home-pipeline-row span {
  order: 2;
  margin-left: -100%;
  padding-left: 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
}

.home-pipeline-row strong {
  order: 3;
  color: var(--ink);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12.5px;
  text-align: right;
}

.home-pipeline-row.pipeline-stage-new-lead {
  --stage: #71717a;
}

.home-pipeline-row.pipeline-stage-researched {
  --stage: #2563eb;
}

.home-pipeline-row.pipeline-stage-contacted {
  --stage: #4f46e5;
}

.home-pipeline-row.pipeline-stage-call-booked {
  --stage: #d97706;
}

.home-pipeline-row.pipeline-stage-proposal-sent {
  --stage: #c2410c;
}

.home-pipeline-row.pipeline-stage-won {
  --stage: #059669;
}

.home-route-list {
  gap: 0;
  padding: 8px 12px 12px;
}

.home-route-list button {
  grid-template-columns: 32px minmax(0, 1fr) 14px;
  gap: 12px;
  min-height: 58px;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.home-route-list button::before {
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--teal);
  background: var(--teal-soft);
  content: "+";
  font-weight: 700;
}

.home-route-list button::after {
  grid-row: 1 / span 2;
  grid-column: 3;
  align-self: center;
  color: var(--faint);
  content: ">";
}

.home-route-list button:hover {
  border-color: transparent;
  background: rgba(15, 118, 110, 0.04);
}

.home-route-list strong {
  grid-row: 1;
  grid-column: 2;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.home-route-list span {
  grid-row: 2;
  grid-column: 2;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.home-route-list button.is-disabled {
  opacity: 0.55;
}

/* FE-061c — Coverage list. Donut + stats footer hidden so the panel
   collapses to just the four source-rows list and stays visually flush
   with the pipeline panel in the row beside it. */
.home-coverage-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 4px 12px 6px;
}

.home-source-total,
.home-source-foot {
  display: none !important;
}

.home-source-row {
  font-size: 11.5px !important;
  padding: 2px 0;
  line-height: 1.1;
}

.home-source-total span {
  color: var(--muted);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-source-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  color: var(--ink-soft);
  font-size: 12.5px;
}

.home-source-row i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #71717a;
}

.home-source-row i.target {
  background: #14b8a6;
}

.home-source-row i.known {
  background: #6366f1;
}

.home-source-row i.web {
  background: #f59e0b;
}

.home-source-row strong {
  color: var(--ink);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
}

.home-source-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.home-source-foot span {
  padding: 3px 7px;
  border-radius: 5px;
  color: var(--muted);
  background: rgba(15, 20, 25, 0.035);
  font-size: 11px;
}

@media (max-width: 1100px) {
  .home-people-launchpad {
    grid-template-columns: 1fr;
  }

  .home-launch-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-v2-grid {
    grid-template-columns: 1fr;
  }

  .home-v2-hero {
    grid-template-columns: 1fr;
  }

  .home-next-action {
    width: 100%;
  }
}

@media (max-width: 880px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .sidebar-footer {
    display: none;
  }

  .topbar {
    margin: -18px -16px 18px;
    padding: 10px 16px;
    height: auto;
    flex-wrap: wrap;
  }

  .workspace {
    padding: 18px 16px 44px;
  }

  .command-trigger {
    order: 3;
    width: 100%;
  }

  .home-v2-hero {
    flex-direction: column;
    gap: 18px;
  }

  .home-next-action {
    width: 100%;
  }

  .home-launch-actions {
    grid-template-columns: 1fr;
  }

  .home-launch-card {
    min-height: 110px;
  }

  .home-jobs-strip-head,
  .home-job-card,
  .home-job-card-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .home-jobs-strip-head,
  .home-job-card-head {
    display: grid;
  }

  .home-job-progress-row {
    grid-template-columns: 1fr;
  }

  .home-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-stat-card:nth-child(2) {
    border-right: 0;
  }

  .home-stat-card:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

/* Final viewport guard: keep the app from creating a page-level horizontal scroll. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.app-shell,
.workspace,
.view,
.source-workbench,
.source-builder {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 1280px) {
  /* Dead-code rules removed: .app-shell, .sidebar, .nav-tabs flex-row, and
     .sidebar-footer overrides assumed a collapsed-top-bar layout that
     never landed — the actual architecture is a fixed left sidebar at
     all widths (see .app-shell:not(.hidden) and .sidebar rules below).
     What survives: workspace padding tightens, topbar wraps, and the
     command trigger gets a viewport-cap. The flex-row nav was the
     visible bug — it was making the vertical nav stack horizontally
     inside the fixed 240px sidebar. */
  .workspace {
    padding: 18px 18px 44px;
  }

  .topbar {
    margin: -18px -18px 20px;
    padding: 10px 18px;
    height: auto;
    flex-wrap: wrap;
  }

  .command-trigger {
    width: min(360px, 42vw);
  }
}

@media (max-width: 760px) {
  .topbar {
    top: 0;
  }

  .command-trigger {
    order: 3;
    width: 100%;
  }
}

/* ==============================================================
   Mandate brand override — appended 2026-05-14
   Cascades over earlier :root blocks and hard-coded brand selectors.
   ============================================================== */

:root {
  --bg: #F8F5EF;
  --bg-2: #EFEAE0;
  --panel: #FFFFFF;
  --panel-soft: #FBF8F2;
  --panel-tint: #F5E7E9;
  --ink: #0A0A0A;
  --ink-soft: #5A5754;
  --muted: #6E6A65;
  --faint: #9C9892;
  --line: #E8E3D7;
  --line-strong: #C9C2B2;
  --nav: #14110F;
  --nav-2: #1F1B17;
  --teal: #7C1F2A;
  --teal-dark: #5C151F;
  --teal-soft: #F5E7E9;
  --blue: #7C1F2A;
  --blue-soft: #F5E7E9;
  --green: #225B3A;
  --green-soft: #E0EBE3;
  --amber: #A86B1F;
  --amber-soft: #F5EBD9;
  --red: #7C1F2A;
  /* UX-S2: --danger stays distinct from the burgundy brand-accent collapse so danger
     status pills, prohibited badges, and destructive-action affordances remain
     visually separable from primary CTAs. */
  --danger: #B42318;
  --danger-soft: #FDE7E9;
  --focus: 0 0 0 2px rgba(124, 31, 42, 0.28);
}

body {
  font-family: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.brand-mark {
  background: var(--bg) !important;
  color: var(--teal) !important;
  border: 1.5px solid var(--teal) !important;
  box-shadow: none !important;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brand-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sidebar-avatar {
  background: var(--teal) !important;
  color: var(--bg) !important;
}

.nav-tab.active {
  background: linear-gradient(90deg, rgba(124, 31, 42, 0.14), rgba(124, 31, 42, 0.03)) !important;
  border-color: rgba(124, 31, 42, 0.22) !important;
  box-shadow: inset 2px 0 0 var(--teal) !important;
}

.auth-logo {
  display: block;
  margin: 0 auto 14px;
  color: var(--teal);
}

.login-card .eyebrow,
.setup-card .eyebrow {
  text-align: center;
}

.login-card h1,
.setup-card h1 {
  text-align: center;
}

/* Sidebar dark-mode text — replace WCAG-failing colors flagged in review-codex.md §3.
   Old: #62666e (3.35:1) and #3f434a (1.94:1) on dark nav. New colors meet AA. */
.sidebar .brand-block .eyebrow {
  color: #B8B0A4 !important;
}

.sidebar .nav-section-label {
  color: #D6D0C5 !important;
}

.sidebar-footer .version-stamp {
  display: block;
  margin-top: 2px;
  color: #8E867A;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
}

.sidebar-footer .legal-link {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
}

.sidebar-footer .legal-link a {
  color: #B8B0A4;
  text-decoration: none;
  /* WCAG 1.4.11: link underline indicator must reach >=3:1 against dark sidebar bg */
  border-bottom: 1px dotted #8E867A;
  padding-bottom: 1px;
}

.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;
}

.sidebar-footer .legal-link a:hover {
  color: #D6D0C5;
  border-bottom-color: #D6D0C5;
}

/* Sidebar — pinned to viewport, always visible regardless of page scroll.
   sticky was unreliable due to a parent overflow context. Fixed bypasses it.
   With position:fixed the sidebar leaves the grid, so we drop .app-shell from
   grid → block with left padding to reserve the 240px gutter.
   :not(.hidden) so that .hidden still wins when the user is on setup/login. */
.app-shell:not(.hidden) {
  display: block !important;
  padding-left: 240px !important;
  min-height: 100vh;
}

.sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 240px !important;
  height: 100vh !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  z-index: 50;
}

.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

/* Login + setup input contrast fix — earlier rule at line 1189 set
   .login-card input color to near-white assuming a dark input background;
   the Mandate brand override gave inputs a white background, leaving
   white-on-white invisible typing. Restore readable ink-on-paper. */
.login-card input,
.setup-card input {
  color: var(--ink) !important;
  background: var(--panel) !important;
}

.login-card input::placeholder,
.setup-card input::placeholder {
  color: var(--faint) !important;
}

.login-card label > span,
.setup-card label > span {
  color: var(--ink-soft) !important;
}

/* Empty-state polish: hide data-driven Home panels when their content list
   is empty, so a zero-data first impression reads as a single hero + CTAs
   instead of a wall of "nothing here yet" placeholders. */
.home-queue-panel:has(.home-focus-list:empty),
.home-activity-panel:has(.home-activity-list:empty),
.home-v2-right .home-panel:has(.home-pipeline-list:empty),
.home-v2-right .home-panel:has(.home-coverage-list:empty) {
  display: none;
}

.source-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.source-tier-badge.tier-open-web {
  background: var(--green-soft);
  color: var(--green);
}

.source-tier-badge.tier-licensed-feed {
  background: var(--teal-soft);
  color: var(--teal);
}

.source-tier-badge.tier-user-provided {
  background: var(--amber-soft);
  color: var(--amber);
}

.source-tier-badge.tier-prohibited {
  background: var(--danger);
  color: #fff;
}

.source-tier-badge.size-detail {
  padding: 4px 10px;
  font-size: 11px;
}

.lead-heading-tools {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.brief-launcher {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.brief-launcher .primary-button {
  min-height: 34px;
  padding: 8px 12px;
  font-size: 0.76rem;
  white-space: normal;
}

#view-leads .lead-row {
  cursor: default;
}

.lead-row-main {
  display: grid;
  gap: 7px;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Reviewer #3: previous pill+border treatment read as a button while the
   underlying mechanic is multi-select (drives the bulk-brief strip at the
   top of the list). Strip the pill chrome so it reads as a plain checkbox
   with a quiet label — same affordance Outlook / Notion use for row
   multi-select. */
.lead-brief-select {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px;
  border: 0;
  border-radius: 4px;
  color: var(--ink-soft, #5a6470);
  background: transparent;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.lead-brief-select:hover {
  background: rgba(15, 20, 25, 0.04);
  color: var(--ink, #0F1419);
}

.lead-brief-select input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--mandate-red, #7C1F2A);
  cursor: pointer;
}

.lead-brief-select + .lead-row-main .row-metrics {
  padding-right: 76px;
}

#view-briefs .view-heading {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
  gap: 18px;
  margin: 0 0 12px;
  padding: 0 0 14px;
  border-bottom: 1px solid #dce4ec;
}

.brief-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.brief-state-tabs {
  margin: 0 0 12px;
}

#view-briefs .brief-layout {
  position: relative;
  grid-template-columns: minmax(360px, 0.72fr) minmax(640px, 1.28fr);
  gap: 0;
  align-items: stretch;
  border: 1px solid #d7e0e8;
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(18, 24, 31, 0.045);
  overflow: hidden;
}

#view-briefs .lead-list-pane {
  min-width: 0;
  padding: 12px;
  border-right: 1px solid #d7e0e8;
  background: #f6f8fa;
}

.brief-list {
  display: grid;
  gap: 8px;
}

.brief-row {
  width: 100%;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #dce4ec;
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  color: inherit;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
}

.brief-row:hover {
  border-color: #cbd6e1;
  border-left-color: #9ab0bf;
  background: #fbfcfd;
}

.brief-row.active {
  border-color: #cfe3df;
  border-left-color: var(--teal);
  background: #f4fbf9;
}

.brief-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.brief-row h4,
.brief-row p {
  margin: 0;
}

.brief-row h4 {
  color: #101820;
  font-size: 0.94rem;
  line-height: 1.22;
}

.brief-row p,
.brief-row-meta {
  color: #71808c;
  font-size: 0.75rem;
}

.brief-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-weight: 760;
}

#view-briefs .brief-detail {
  min-width: 0;
  padding: 0;
  background:
    linear-gradient(90deg, rgba(124, 31, 42, 0.045), transparent 22px),
    #ffffff;
}

#view-briefs .brief-detail > .empty-state {
  margin: 14px;
}

.brief-summary-card,
.brief-item-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.brief-summary-card {
  border-bottom: 1px solid #dce4ec;
}

.brief-metric-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.brief-metric-row span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid #d8e1ea;
  border-radius: 999px;
  color: #526170;
  background: #f8fafb;
  font-size: 0.75rem;
  font-weight: 780;
}

.brief-items {
  display: grid;
}

.brief-item-card {
  border-bottom: 1px solid #e2e8ef;
}

.brief-item-card:last-child {
  border-bottom: 0;
}

.brief-fields {
  display: grid;
  grid-template-columns: minmax(120px, 0.24fr) minmax(0, 1fr);
  gap: 10px 14px;
  margin: 0;
}

.brief-fields dt {
  color: #667085;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.brief-fields dd {
  min-width: 0;
  margin: 0;
  color: #24313d;
  line-height: 1.48;
}

.brief-source-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.brief-source-line a {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.brief-source-line small {
  color: #71808c;
  font-weight: 760;
}

.feedback-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e2e8ef;
}

.feedback-button {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #d8e1ea;
  border-radius: 999px;
  color: #526170;
  background: #ffffff;
  font-size: 0.72rem;
  font-weight: 850;
  cursor: pointer;
}

.feedback-button:hover {
  border-color: #bac8d6;
  color: #24313d;
  background: #f6f8fa;
}

.feedback-button.active {
  border-color: rgba(124, 31, 42, 0.34);
  color: #7c1f2a;
  background: #fbf0f1;
}

.status-brief-draft {
  color: #526170;
  background: #eef2f6;
}

.status-brief-human-reviewed {
  color: #244bb8;
  background: var(--blue-soft);
}

.status-brief-sent {
  color: var(--green);
  background: var(--green-soft);
}

.status-brief-archived {
  color: #805000;
  background: #fff0d6;
}

@media (max-width: 980px) {
  #view-leads .view-heading,
  #view-briefs .view-heading,
  #view-briefs .brief-layout {
    grid-template-columns: 1fr;
  }

  .lead-heading-tools,
  .brief-actions,
  .brief-launcher {
    justify-items: stretch;
    justify-content: stretch;
  }

  #view-briefs .lead-list-pane {
    border-right: 0;
    border-bottom: 1px solid #d7e0e8;
  }
}

@media (max-width: 720px) {
  .brief-fields {
    grid-template-columns: 1fr;
  }

  .lead-brief-select {
    position: static;
    width: fit-content;
    margin-bottom: 4px;
  }

  .lead-brief-select + .lead-row-main .row-metrics {
    padding-right: 0;
  }
}

/* Skip-to-main accessibility link - visually hidden until keyboard-focused.
   First Tab-keystroke after page load brings it into view. */
.skip-to-main {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--bg);
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 120ms ease-out;
}

.skip-to-main:focus {
  transform: translateY(0);
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Reduced-motion preference — strip animations + transitions for users who request it.
   WCAG 2.3.3 compliance and a procurement signal for accessibility-conscious buyers. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Windows High Contrast / forced-colors mode — let the OS palette win for users who
   need it, with explicit linkable colour assignments where Mandate brand would
   otherwise lose distinction. */
@media (forced-colors: active) {
  .brand-mark,
  .auth-logo,
  .source-tier-badge,
  .nav-tab.active,
  .primary-button {
    forced-color-adjust: none;
  }

  .skip-to-main {
    border: 2px solid CanvasText;
  }
}

.empty-state-card,
.loading-state-card,
.error-state-card {
  min-height: 180px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--bg);
  text-align: center;
}

.empty-state-card h4,
.loading-state-card h4,
.error-state-card h4,
.empty-state-card p,
.loading-state-card p,
.error-state-card p {
  max-width: 34rem;
  margin: 0;
}

.empty-state-card h4,
.error-state-card h4 {
  font-size: 1rem;
}

.empty-state-card p,
.loading-state-card p,
.error-state-card p {
  color: var(--ink-soft);
  line-height: 1.5;
}

.state-card-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--teal);
  background: var(--teal-soft);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  font-weight: 850;
}

.state-card-pulse {
  width: 38px;
  height: 6px;
  border-radius: 999px;
  background: var(--teal);
}

.state-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.error-state-card {
  border-color: var(--teal);
  box-shadow: inset 3px 0 0 var(--teal);
}

#view-briefs .brief-detail > .empty-state-card,
#view-briefs .brief-detail > .loading-state-card,
#view-briefs .brief-detail > .error-state-card {
  margin: 14px;
}

/* ----------------------------------------------------------------------
   Touch-target accessibility (TICKET-24 / codex P2)

   On coarse-pointer devices (touchscreens), bump tappable controls to
   the 44px minimum recommended by iOS HIG / WCAG 2.5.5 (AAA). Desktop
   pointer experience is unaffected.
   ---------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  .primary-button,
  .secondary-button,
  .ghost-button,
  .icon-button,
  .compact-button {
    min-height: 44px;
  }

  .compact-button {
    padding: 10px 12px;
  }

  .nav-tab {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .account-list-tab {
    min-height: 44px;
  }
}

/* ----------------------------------------------------------------------
   Print stylesheet (TICKET-21 / codex P2)

   Optimised for Cmd-P on a Brief detail. Hides app chrome (sidebar,
   topbar, toast region, modals, interactive controls) and lays out the
   selected brief.detail full-width on white with dark text. The Brief
   view is the only currently-paged surface; other views still print
   only their main content area, not the navigation chrome.
   ---------------------------------------------------------------------- */
@page {
  margin: 14mm;
  size: A4;
}

@media print {
  html,
  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 10.5pt;
  }

  /* Chrome that should never reach paper. */
  .sidebar,
  .topbar,
  .sidebar-footer,
  .toast-region,
  .modal-backdrop,
  .home-jobs-strip,
  .command-trigger,
  .topbar-actions,
  .dev-reload-stamp,
  [data-admin-only],
  .visually-hidden + a,
  .brief-item-feedback,
  .brief-actions,
  .brief-row .brief-row-actions,
  #view-briefs button {
    display: none !important;
  }

  /* Workspace fills the page now that the sidebar is gone. */
  main.workspace,
  #main {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* Only the active Brief view prints its content; other views still
     print whatever section is currently visible, minus the chrome. */
  #view-briefs .brief-layout {
    display: block !important;
    gap: 0 !important;
  }
  #view-briefs .lead-list-pane,
  #view-briefs .brief-list-pane {
    display: none !important;
  }
  #view-briefs .brief-detail {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: #000000 !important;
  }

  .brief-items {
    display: block !important;
  }

  .brief-item-card {
    page-break-inside: avoid;
    break-inside: avoid;
    border: 1px solid #cccccc !important;
    background: #ffffff !important;
    color: #000000 !important;
    margin: 0 0 14pt !important;
    padding: 10pt 12pt !important;
    box-shadow: none !important;
  }

  /* Inline the source URL after every evidence / source link so the
     reader can find the citation off-screen. */
  .brief-source-line a[href]::after,
  .brief-evidence a[href]::after,
  .brief-fields a[href]::after {
    content: " (" attr(href) ")";
    font-size: 8.5pt;
    color: #555555;
    word-break: break-all;
  }

  /* Avoid orphaned headings at page boundary. */
  h1, h2, h3, h4, h5 {
    page-break-after: avoid;
    break-after: avoid-page;
  }
}

/* ==============================================================
   Tier 1: deal-stage pill, confidence-tier badge, lifecycle audit strip
   Appended 2026-05-18 for the capital-markets-lifecycle layer.
   Per docs/tier1-integration-plan.md and docs/tier1-integration-plan-codex.md (v2):
   render only when value is set (NULL = absent, no fabricated default).
   ============================================================== */

.deal-stage-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.69rem;
  font-weight: 880;
  font-family: "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--line);
  color: var(--ink-soft);
  border: 1px solid transparent;
}

.deal-stage-pill[data-stage="Rumour"] {
  background: var(--bg-2);
  color: var(--muted);
  border-color: var(--line);
}

.deal-stage-pill[data-stage="Mandated"] {
  background: var(--teal-soft);
  color: var(--teal);
  border-color: rgba(124, 31, 42, 0.22);
}

.deal-stage-pill[data-stage="IPTs"] {
  background: var(--amber-soft);
  color: var(--amber);
  border-color: rgba(168, 107, 31, 0.24);
}

.deal-stage-pill[data-stage="Guidance"] {
  background: var(--amber-soft);
  color: #6F4710;
  border-color: rgba(168, 107, 31, 0.46);
  font-weight: 920;
}

.deal-stage-pill[data-stage="Priced"] {
  background: var(--green-soft);
  color: var(--green);
  border-color: rgba(34, 91, 58, 0.28);
}

.deal-stage-pill[data-stage="Settled"] {
  background: var(--ink-soft);
  color: var(--bg);
  border-color: var(--ink);
}

.confidence-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  min-width: 28px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 940;
  font-family: "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
  white-space: nowrap;
  border: 1px solid transparent;
}

.confidence-badge[data-tier="T1"] {
  background: var(--green-soft);
  color: var(--green);
  border-color: rgba(34, 91, 58, 0.32);
}

.confidence-badge[data-tier="T2"] {
  background: var(--amber-soft);
  color: var(--amber);
  border-color: rgba(168, 107, 31, 0.3);
}

.confidence-badge[data-tier="T3"] {
  background: var(--bg-2);
  color: var(--faint);
  border-color: var(--line);
}

/* Click-to-edit affordance: hover ring on interactive pills */
.deal-stage-pill[data-editable="true"],
.confidence-badge[data-editable="true"] {
  cursor: pointer;
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.deal-stage-pill[data-editable="true"]:hover,
.confidence-badge[data-editable="true"]:hover {
  box-shadow: var(--focus);
}

.deal-stage-pill[data-editable="true"]:focus-visible,
.confidence-badge[data-editable="true"]:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* Inline edit dropdown anchored to the clicked pill */
.pill-edit-menu {
  position: absolute;
  z-index: 1000;
  min-width: 160px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(20, 17, 15, 0.18);
  padding: 6px;
  font-size: 0.78rem;
}

.pill-edit-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font-size: 0.78rem;
}

.pill-edit-menu button:hover,
.pill-edit-menu button:focus-visible {
  background: var(--bg-2);
  outline: none;
}

.pill-edit-menu button[data-active="true"] {
  background: var(--teal-soft);
  color: var(--teal);
  font-weight: 880;
}

.pill-edit-menu .pill-edit-clear {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 8px;
  color: var(--muted);
  font-style: italic;
}

/* Lifecycle audit strip — horizontal timeline of lead events */
.lifecycle-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: 12px 0 18px;
  overflow-x: auto;
  min-height: 56px;
}

.lifecycle-strip-empty {
  color: var(--faint);
  font-size: 0.78rem;
  font-style: italic;
  padding: 4px 0;
}

.lifecycle-strip-axis {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 28px;
  padding: 0 6px;
}

.lifecycle-strip-axis::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 2px;
  background: var(--line);
  transform: translateY(-50%);
  border-radius: 999px;
}

.lifecycle-event {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid var(--panel-soft);
  cursor: help;
  z-index: 1;
  margin: 0 6px;
  background: var(--ink-soft);
}

.lifecycle-event[data-type="stage_changed"] { background: var(--teal); }
.lifecycle-event[data-type="confidence_changed"] { background: var(--amber); }
.lifecycle-event[data-type="status_changed"] { background: #244bb8; }
.lifecycle-event[data-type="accountlist_changed"] { background: #6b4cb7; }
.lifecycle-event[data-type="primary_contact_set"] { background: #2f8f5d; }
.lifecycle-event[data-type="primary_contact_replaced"] { background: #c97a1a; }
.lifecycle-event[data-type="lead_imported"] { background: #0e6f8a; }
.lifecycle-event[data-type="note"],
.lifecycle-event[data-type="note_added"] { background: var(--muted); }
.lifecycle-event[data-type="meeting"],
.lifecycle-event[data-type="meeting_scheduled"] { background: var(--green); }
.lifecycle-event[data-type="email"] { background: var(--teal-dark); }
.lifecycle-event[data-type="saved_search_hit"] { background: #6F4710; }
.lifecycle-event[data-type="morning_flash"] { background: var(--amber); border-color: var(--amber-soft); }

.lifecycle-event-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
  max-width: 240px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  box-shadow: 0 8px 22px rgba(20, 17, 15, 0.28);
}

.lifecycle-event:hover .lifecycle-event-tooltip,
.lifecycle-event:focus-visible .lifecycle-event-tooltip {
  opacity: 1;
}

.lifecycle-event-tooltip-title {
  display: block;
  font-weight: 880;
  margin-bottom: 2px;
  color: var(--bg);
}

.lifecycle-event-tooltip-meta {
  display: block;
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.02em;
}

/* Global search bar in top chrome (Cmd-K). Inline-positioned within topbar; overlay panel renders results. */
.global-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.78rem;
  cursor: pointer;
  min-width: 240px;
  transition: border-color 120ms;
}

.global-search-trigger:hover,
.global-search-trigger:focus-visible {
  border-color: var(--teal);
  outline: none;
}

.global-search-trigger-kbd {
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  color: var(--ink-soft);
  background: var(--bg-2);
}

.global-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.45);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 80px 16px 16px;
  z-index: 1100;
}

.global-search-overlay[hidden] {
  display: none;
}

.global-search-panel {
  width: min(640px, 100%);
  max-height: calc(100vh - 120px);
  background: var(--panel);
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgba(20, 17, 15, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.global-search-input-row {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}

.global-search-input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 0.95rem;
  color: var(--ink);
  font-family: inherit;
}

.global-search-input::placeholder {
  color: var(--faint);
}

.global-search-results {
  overflow-y: auto;
  max-height: 480px;
  padding: 4px 6px 10px;
}

.global-search-group-label {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 880;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 12px 14px 4px;
}

.global-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font-size: 0.86rem;
}

.global-search-result:hover,
.global-search-result[aria-selected="true"] {
  background: var(--bg-2);
}

.global-search-result-title {
  font-weight: 880;
  color: var(--ink);
}

.global-search-result-subtitle {
  color: var(--muted);
  font-size: 0.74rem;
  margin-top: 2px;
}

.global-search-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--faint);
  font-size: 0.82rem;
}

.pipeline-card-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.lead-profile-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Tier 2 — Issuers view layout + dossier widget grid */
.issuers-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: start;
}

.issuers-list-pane {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
}

.issuers-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  max-height: 70vh;
  overflow-y: auto;
}

.issuer-list-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  cursor: pointer;
  font-size: 0.85rem;
}

.issuer-list-item:hover,
.issuer-list-item.active {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.issuer-list-item-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.issuer-detail {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  min-height: 360px;
}

.issuer-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.issuer-detail-head h2 {
  margin: 4px 0 6px;
}

.issuer-detail-head code {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--muted);
}

.issuer-widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.issuer-card {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}

.issuer-card h4 {
  margin: 0 0 10px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.issuer-card-wide {
  grid-column: 1 / -1;
}

.issuer-summary-list,
.issuer-lead-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
}

.issuer-lead-list li {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

@media (max-width: 880px) {
  .issuers-layout {
    grid-template-columns: 1fr;
  }
}

/* Window 2 — Saved searches + Morning Flash */
.settings-block {
  margin: 18px 0 24px;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.settings-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.settings-block-head h4 {
  margin: 4px 0 0;
}

.saved-search-row {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 10px;
  background: var(--panel-soft);
}

.saved-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.saved-search-cadence {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 0.7rem;
  font-weight: 880;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.saved-search-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.save-alert-modal {
  max-width: 480px;
  padding: 22px 24px;
}

.save-alert-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.frequency-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.frequency-fieldset legend {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.frequency-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.frequency-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.8rem;
  background: var(--panel);
}

.frequency-chip input[type="radio"] {
  display: none;
}

.frequency-chip:has(input:checked) {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal);
  font-weight: 880;
}

.save-alert-feedback {
  color: var(--teal-dark);
  font-size: 0.85rem;
  min-height: 1em;
}

.morning-flash-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.morning-flash-preview {
  margin-top: 12px;
}

.morning-flash-iframe {
  width: 100%;
  min-height: 320px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-top: 10px;
  background: white;
}

.morning-flash-runs {
  margin-top: 16px;
}

.morning-flash-run-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

.morning-flash-run-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}

.morning-flash-run-list li:last-child {
  border-bottom: 0;
}

/* Tier 2 T2.3 — Saved column layouts switcher.
   Reviewer demote: visually quieter than Export / More in the topbar so
   workspace-level vs table-level controls don't compete. */
.leads-layout-switcher {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.78rem;
  opacity: 0.85;
}

.leads-layout-switcher .ghost-button.compact-button {
  font-size: 0.74rem;
  padding: 3px 8px;
  color: var(--muted);
  border-color: var(--line);
}

.leads-layout-switcher .ghost-button.compact-button:hover {
  color: var(--ink);
  border-color: var(--ink-soft);
  opacity: 1;
}

.layout-menu {
  min-width: 240px;
}

.column-editor-modal {
  max-width: 520px;
  padding: 22px 24px;
}

.column-editor-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.column-editor-form fieldset.column-list {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0;
}

.column-editor-form fieldset.column-list legend {
  font-size: 0.75rem;
  color: var(--muted);
  padding: 0 6px;
}

.column-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.86rem;
}

.column-row input[type="checkbox"]:disabled + span {
  color: var(--faint);
}

.check-row {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.85rem;
}

.modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Cmd+K palette quick actions — sections of clickable rows above search hits. */
.global-search-group {
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
}

.global-search-group:last-child {
  border-bottom: 0;
}

.global-search-group-label {
  margin: 0 0 4px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.global-search-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: background 100ms ease;
}

.global-search-action:hover,
.global-search-action:focus-visible {
  background: rgba(124, 31, 42, 0.06);
  outline: none;
}

.global-search-action kbd {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
}

/* =================================================================
   Lead-row v2 — three lines per row, people surfaced inline.
   Spec from reviewer:
   - Line 1: favicon + company name (+ source-tier badge)
   - Line 2: tag chips + route/emailable meta (replaces the templated
     "X has public website signals for ..." subtitle entirely)
   - Line 3: top-1 person preview (initials + name + role + route)
   - Caret on the right reveals top-3 people inline
   - Person-click opens dossier on the People tab with the person
     pre-selected; row-click opens the Account tab
   ================================================================= */
.lead-row-v2 {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto auto;
  gap: 4px 8px;
  padding: 12px 16px 12px 28px;
}

.lead-row-v2 > .lead-row-open {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  width: 100%;
  min-width: 0;
}

.lead-row-v2 > .lead-brief-select {
  position: absolute;
  top: 10px;
  right: 10px;
}

.lead-row-v2 .lead-row-line-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.lead-row-v2 .lead-row-line-identity h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-row-v2 .lead-row-line-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.lead-row-tag-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.lead-row-tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.lead-row-routes {
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

/* FE-055: the mailto anchor inside review-candidate-facts. Uses a real
   <a href="mailto:..."> so screen readers, right-click "Copy email",
   middle-click, and native keyboard activation all work; the wider
   [data-mailto] selector was too broad. */
.review-fact-mailto {
  color: inherit;
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
  text-decoration: none;
}

.review-fact-mailto:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  background: rgba(124, 31, 42, 0.06);
}

.review-fact-mailto:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
  background: rgba(124, 31, 42, 0.06);
  outline: 2px solid var(--burgundy, #7a1f2b);
  outline-offset: 2px;
}

/* Reviewer #2: zero-people rows were collapsing to two visible lines while
   populated rows had three — breaks the visual rhythm. Match the person
   preview line's vertical metrics so every row has the same height. */
.lead-row-no-people {
  grid-column: 1;
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 8px 4px 36px;
  color: var(--ink-soft, #5a6470);
  font-size: 0.84rem;
  font-style: italic;
}

/* Reviewer: cap the inline-expanded list at ~5 person rows tall and let
   the rest scroll inside the lead row instead of pushing the next card
   way down the page. Each person preview is ~32px so 180px holds five
   cleanly with a hint of the next one peeking. */
.lead-row-people-extra {
  grid-column: 1;
  display: grid;
  gap: 2px;
  padding-top: 2px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
  max-height: 180px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.lead-row-people-extra::-webkit-scrollbar {
  width: 6px;
}

.lead-row-people-extra::-webkit-scrollbar-thumb {
  background: rgba(15, 20, 25, 0.18);
  border-radius: 999px;
}

.lead-row-people-extra::-webkit-scrollbar-track {
  background: transparent;
}

/* Reviewer #2 — surface the expand affordance as inline copy rather than
   a tiny absolute-positioned caret hidden behind the Brief button. Sits
   under the top person preview, reads as a real link, and the count
   tells the user how many more people are at the firm. */
.lead-row-people-more {
  grid-column: 1;
  justify-self: start;
  margin: 2px 0 4px 36px;
  padding: 2px 6px;
  border: 0;
  background: transparent;
  color: var(--mandate-red, #7C1F2A);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  transition: background 100ms ease;
}

.lead-row-people-more:hover,
.lead-row-people-more:focus-visible {
  background: rgba(124, 31, 42, 0.08);
  outline: none;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Reviewer #5 — dual click-target row needs visible hover. The row body
   tints subtly; the person line gets an underline on hover so the two
   targets read as discrete. */
.lead-row-v2 .lead-row-open {
  transition: background 100ms ease;
  border-radius: 8px;
}

.lead-row-v2 .lead-row-open:hover,
.lead-row-v2 .lead-row-open:focus-visible {
  background: rgba(124, 31, 42, 0.04);
  outline: none;
}

/* Dossier polish: pill consistency — unset pill matches the set-state
   shape and only differs in content treatment. */
.lead-profile .property-field .deal-stage-pill.is-unset,
.lead-profile .property-field .confidence-badge.is-unset {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  min-height: 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted);
  font-style: italic;
  font-size: 0.74rem;
  font-weight: 600;
}

/* Dossier polish: shrink the company avatar from 44px to 22px so the
   company name stays the dominant element in the header. */
.lead-profile .company-avatar-lg {
  width: 22px;
  height: 22px;
  font-size: 0.66rem;
  border-radius: 6px;
}

/* Generate-brief button disabled state — visible-but-quiet when
   no leads are selected. */
#generateBriefFromSelected:disabled,
#generateBriefFromSelected[disabled] {
  background: var(--panel-soft);
  color: var(--muted);
  border: 1px solid var(--line);
  cursor: not-allowed;
  opacity: 0.7;
  box-shadow: none;
}

/* Discover Pass 2 — collapse the Run-preview filler aside into a single-line
   meta strip under the dropdowns, and tighten vertical rhythm. The page
   should read as a toolbar above the recent-runs table, not a settings
   form. */
#view-discover .run-preview {
  display: none !important;
}

#view-discover .discover-grid {
  grid-template-columns: minmax(0, 1fr);
}

#view-discover .source-mode-panel {
  padding-bottom: 8px;
}

#view-discover .source-helper-line {
  display: none;
}

#view-discover .view-heading {
  margin-bottom: 16px;
}

#view-discover .source-builder {
  padding-top: 14px;
  padding-bottom: 14px;
}

#view-discover .source-submit-row {
  margin-top: 6px;
}

.form-feedback {
  color: var(--teal-dark);
  font-size: 0.82rem;
  min-height: 1em;
}

/* UX-LOADING — in-flight scan banner + skeleton lead rows on the Leads view */
.leads-scan-banner {
  margin: 4px 0 12px;
  padding: 14px 16px;
  /* TICKET-213 — out of the pink-on-red warning register, into Stone/Paper. */
  background: var(--panel-soft, #fbfaf5);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* FE-056 — custom-websites Add-button pattern. Replaces the freeform
   textarea with a single URL input + Add, and a list of cards below.
   The hidden #customTargets textarea is kept as the serialization sink
   so runCustomDiscovery's submit path is untouched. */
.custom-targets-stack {
  display: grid;
  gap: 12px;
}
.custom-targets-add {
  display: grid;
  gap: 6px;
}
.custom-targets-add-row {
  display: flex;
  gap: 8px;
}
.custom-targets-add-row input {
  flex: 1 1 auto;
  min-width: 0;
}
.custom-targets-add-row .secondary-button {
  flex: 0 0 auto;
  white-space: nowrap;
}
.custom-targets-list {
  display: grid;
  gap: 6px;
}
.custom-targets-empty {
  margin: 0;
  padding: 12px;
  color: var(--ink-muted, #5f574d);
  font-size: 0.86rem;
  background: var(--panel-soft, #fbfaf5);
  border: 1px dashed var(--line, #e4dfd2);
  border-radius: 10px;
  text-align: center;
}
.custom-targets-error {
  display: block;
  min-height: 1.1em;
  color: var(--burgundy, #7a1f2b);
  font-size: 0.78rem;
}
.custom-targets-error:empty { display: none; }
#customTargetInput[aria-invalid="true"] {
  border-color: var(--burgundy, #7a1f2b);
  outline-color: var(--burgundy, #7a1f2b);
}
.custom-target-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e4dfd2);
  border-radius: 10px;
}
.custom-target-card .custom-target-text {
  flex: 1 1 auto;
  min-width: 0;
}
.custom-target-card .custom-target-text strong {
  display: block;
  font-size: 0.92rem;
  color: var(--ink, #1f1b17);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-target-card .custom-target-text small {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-muted, #5f574d);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-target-remove {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line, #e4dfd2);
  border-radius: 8px;
  background: transparent;
  color: var(--ink-muted, #5f574d);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.custom-target-remove:hover,
.custom-target-remove:focus-visible {
  outline: none;
  border-color: var(--burgundy, #7a1f2b);
  color: var(--burgundy, #7a1f2b);
}

/* v1 Blocker #5 — soft cap notice when filtered candidates exceed
   LEAD_LIST_SOFT_CAP. Clicking focuses the search input. */
.leads-soft-cap-notice {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  margin: 4px 0 12px;
  padding: 12px 16px;
  background: var(--panel-soft, #fbfaf5);
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.leads-soft-cap-notice:hover {
  background: var(--panel, #fff);
  border-color: var(--mandate-red, #7a1f2b);
}
/* WCAG 2.4.11 — visible focus ring; background-shift alone isn't enough. */
.leads-soft-cap-notice:focus-visible {
  background: var(--panel, #fff);
  border-color: var(--mandate-red, #7a1f2b);
  outline: 2px solid var(--mandate-red, var(--burgundy, #7a1f2b));
  outline-offset: 2px;
}
.leads-soft-cap-notice strong { font-weight: 600; }
.leads-soft-cap-notice span { color: var(--ink-muted, #5f574d); font-size: 0.92em; }

.leads-scan-banner-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* TICKET-213 — spinner glyph in brand red replaces the pulse dot.
   A pulse on a pink-rose background reads as warning state; a thin
   rotating ring reads as "in progress, working". */
.leads-scan-spinner {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(124, 31, 42, 0.18);
  border-top-color: var(--mandate-red, #7C1F2A);
  animation: leads-scan-spin 0.9s linear infinite;
}

@keyframes leads-scan-spin {
  to { transform: rotate(360deg); }
}

/* Kept for backwards-compat with any callers still rendering the old
   pulse class; deprecated by .leads-scan-spinner. */
.leads-scan-pulse {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--mandate-red, #7C1F2A);
}

.leads-scan-banner-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
}

.leads-scan-banner-copy strong {
  font-size: 0.92rem;
  color: var(--ink);
  font-weight: 700;
}

.leads-scan-banner-copy small {
  font-size: 0.76rem;
  color: var(--muted);
}

.leads-scan-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.leads-scan-progress {
  position: relative;
  flex: 1 1 auto;
  height: 4px;
  background: rgba(15, 20, 25, 0.06);
  border-radius: 999px;
  overflow: hidden;
}

.leads-scan-progress > span {
  display: block;
  height: 100%;
  background: var(--mandate-red, #7C1F2A);
  border-radius: 999px;
  transition: width 360ms ease;
}

.leads-scan-progress-pct {
  flex: 0 0 auto;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  min-width: 2.5em;
  text-align: right;
}

/* TICKET-213 — skeleton rows that live inside the leads <table> so the
   column geometry matches loaded rows exactly. No layout shift when
   real data lands. */
.leads-tr-skeleton td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.leads-tr-skeleton .skeleton-block {
  height: 12px;
  width: 80%;
  display: block;
}

.leads-tr-skeleton .skeleton-cell-likelihood {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.leads-tr-skeleton .skeleton-cell-company { width: 70%; }
.leads-tr-skeleton .skeleton-cell-sourceTier { width: 50%; }
.leads-tr-skeleton .skeleton-cell-segment { width: 60%; }
.leads-tr-skeleton .skeleton-cell-jurisdiction { width: 50%; }
.leads-tr-skeleton .skeleton-cell-dealStage { width: 60%; }
.leads-tr-skeleton .skeleton-cell-confidence { width: 40%; }
.leads-tr-skeleton .skeleton-cell-priority { width: 40%; }
.leads-tr-skeleton .skeleton-cell-status { width: 55%; }
.leads-tr-skeleton .skeleton-cell-peopleCount { width: 30%; }

/* Skeleton stack — generic shimmer-block list for loadingState. */
.skeleton-stack {
  display: grid;
  gap: 10px;
  padding: 8px 0;
}

.skeleton-stack .skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.skeleton-stack .skeleton-row-text {
  display: grid;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.skeleton-block-circle {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  flex-shrink: 0;
}

@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-stack .skeleton-block {
  background: linear-gradient(
    90deg,
    rgba(15, 20, 25, 0.05) 0%,
    rgba(15, 20, 25, 0.10) 50%,
    rgba(15, 20, 25, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 6px;
}

/* Skeleton row — shown above real leads while a scan runs */
.skeleton-lead-row {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 6px 0;
  pointer-events: none;
}

.skeleton-block {
  display: block;
  background: linear-gradient(90deg, var(--line) 0%, var(--bg-2) 50%, var(--line) 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-block-checkbox {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 6px;
}

.skeleton-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}

.skeleton-block-title { height: 14px; width: 62%; }
.skeleton-block-meta  { height: 10px; width: 38%; }
.skeleton-block-line  { height: 10px; width: 84%; }

/* UX pass — property-labelled pills on lead detail header */
.lead-profile-status {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.property-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.property-label {
  font-size: 0.65rem;
  font-weight: 880;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.property-label-inline {
  align-self: center;
  margin-right: 6px;
}

.property-empty {
  font-size: 0.78rem;
  color: var(--faint);
  font-style: italic;
  padding: 2px 8px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
}

/* UX pass — "Move to" action buttons (state-mutation), distinct from filter tabs */
.account-list-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.account-list-action-btn {
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 120ms, color 120ms, border-color 120ms;
}

.account-list-action-btn:hover:not(.active) {
  border-color: var(--teal);
  color: var(--teal);
}

.account-list-action-btn.active {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--bg);
  cursor: default;
}

.account-list-action-btn.avoid-action.active {
  background: var(--ink);
  border-color: var(--ink);
}

/* UX pass — small inline empty for the lifecycle strip */
.lifecycle-strip-empty-inline {
  margin: 8px 0 6px;
  padding: 0 4px;
  color: var(--faint);
  font-size: 0.78rem;
  font-style: italic;
}

/* UX pass — Source column rendered as plain text, not a chip */
.source-cell {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* V1-006 — Maturity wall view */
.maturity-summary {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.maturity-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 880;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}

.maturity-pill.maturity-late      { background: var(--teal-soft);   color: var(--teal);      border-color: rgba(124, 31, 42, 0.28); }
.maturity-pill.maturity-warming   { background: var(--amber-soft);  color: var(--amber);     border-color: rgba(168, 107, 31, 0.28); }
.maturity-pill.maturity-refi-open { background: var(--green-soft);  color: var(--green);     border-color: rgba(34, 91, 58, 0.30); }
.maturity-pill.maturity-early     { background: var(--bg-2);        color: var(--muted);     border-color: var(--line); }
.maturity-pill.maturity-past      { background: var(--ink-soft);    color: var(--bg); }
.maturity-pill.maturity-none      { background: var(--bg-2);        color: var(--faint);     border-color: var(--line); }

.maturity-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.maturity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.maturity-table thead th {
  position: sticky;
  top: 0;
  background: var(--panel-soft);
  border-bottom: 1px solid var(--line-strong);
  text-align: left;
  padding: 10px;
  font-size: 0.7rem;
  font-weight: 880;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.maturity-table tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  white-space: nowrap;
}

.maturity-row {
  cursor: pointer;
  transition: background-color 80ms;
}

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

.maturity-row-refi-open td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.maturity-row-warming td:first-child   { box-shadow: inset 3px 0 0 var(--amber); }
.maturity-row-late td:first-child      { box-shadow: inset 3px 0 0 var(--teal); }

/* V1-005 — Agency role history widget on Issuer dossier */
.issuer-card-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.issuer-roles-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.issuer-roles-table th,
.issuer-roles-table td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.issuer-roles-table thead th {
  font-size: 0.7rem;
  font-weight: 880;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--bg-2);
}

.issuer-roles-table tr.historical td {
  color: var(--faint);
}

.issuer-roles-table tr.historical td strong {
  font-weight: 600;
}

.issuer-roles-table .role-section-row td {
  background: var(--bg-2);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: center;
  padding: 6px;
}

/* V1-013 — Outreach templates */
.templates-subhead {
  margin: 14px 0 8px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.template-editor-modal,
.template-picker-modal {
  max-width: 620px;
}

.template-editor-modal textarea {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.85rem;
}

.template-picker-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
  max-height: 320px;
  overflow-y: auto;
}

.template-picker-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  cursor: pointer;
  text-align: left;
}

.template-picker-row:hover {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.template-picker-render {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.template-picker-render textarea {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  width: 100%;
}

.template-picker-render input {
  width: 100%;
}

.template-picker-render.hidden {
  display: none;
}

/* V1-003 — Mandate-likelihood signal dots (green/amber/red/muted) */
.likelihood-badge {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--faint);
  vertical-align: middle;
  cursor: help;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.likelihood-green { background: var(--green); }
.likelihood-amber { background: var(--amber); }
.likelihood-red   { background: var(--teal); }
.likelihood-muted { background: var(--line-strong); }

.leads-table th[data-leads-sort="likelihood"] {
  width: 28px;
  padding-left: 14px;
  padding-right: 4px;
}

.leads-table td[data-col="likelihood"] {
  width: 28px;
  padding-left: 14px;
  padding-right: 4px;
}

/* V1-002 — Dense table view as the default Leads layout */
.leads-view-toggle {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
  margin-right: 8px;
}

.leads-view-toggle button {
  background: var(--panel);
  border: 0;
  padding: 6px 12px;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--muted);
}

.leads-view-toggle button.active {
  background: var(--teal);
  color: var(--bg);
  font-weight: 880;
}

.leads-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.leads-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.leads-table thead th {
  position: sticky;
  top: 0;
  background: var(--panel-soft);
  border-bottom: 1px solid var(--line-strong);
  text-align: left;
  padding: 9px 10px;
  font-size: 0.7rem;
  font-weight: 880;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.leads-table thead th.sorted {
  color: var(--teal);
}

.leads-table thead th:hover {
  background: var(--bg-2);
}

.leads-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  white-space: nowrap;
}

.leads-table tbody tr {
  cursor: pointer;
  transition: background-color 80ms;
}

.leads-table tbody tr:hover {
  background: var(--bg-2);
}

.leads-table tbody tr.active {
  background: var(--teal-soft);
}

.leads-table-empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--faint);
  font-style: italic;
}

/* Tier 2 T2.2 — Composable watchlists editor */
.settings-block-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.watchlist-editor-modal {
  max-width: 580px;
}

.watchlist-entries-fieldset {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0;
}

.watchlist-entries-fieldset legend {
  font-size: 0.75rem;
  color: var(--muted);
  padding: 0 6px;
}

.watchlist-entry-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.watchlist-entry-row select,
.watchlist-entry-row input {
  height: 36px;
  font-size: 0.85rem;
}

.watchlist-entry-row [data-entry-remove] {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

/* Topbar global-section leak fix — command-center / kpi-grid / intelligence-strip
   live outside the .view sections in index.html and were rendering on every tab.
   Scope them to the home tab only. */
body:not([data-active-tab="home"]) .command-center,
body:not([data-active-tab="home"]) .kpi-grid,
body:not([data-active-tab="home"]) .intelligence-strip {
  display: none !important;
}

/* ==============================================================
   V1-007 Firm credentials form — Settings panel section that drives
   the issuer pitch-pack PDF cover page.
   ============================================================== */

.firm-credentials-form {
  display: grid;
  gap: 12px;
  max-width: 620px;
  margin-top: 10px;
}

.firm-credentials-form label {
  display: grid;
  gap: 4px;
}

.firm-credentials-form label > span {
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 650;
}

.firm-credentials-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.firm-credentials-actions .meta-label {
  color: var(--muted);
}

/* ==============================================================
   V1-004 As-of-Date filter — pill input on Leads filter row, banner
   above the lead list when active.
   ============================================================== */

.as-of-field {
  min-width: 142px;
}

.as-of-field input[type="date"] {
  font-variant-numeric: tabular-nums;
}

.as-of-banner {
  margin: 8px 0 6px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.4;
}

.as-of-banner.hidden {
  display: none;
}

.as-of-clear.hidden {
  display: none;
}

/* ==============================================================
   Discover screen redesign — single primary CTA, run preview,
   recent runs canvas, segmented source picker.
   ============================================================== */

body[data-active-tab="discover"] .export-menu {
  display: none !important;
}

#view-discover .source-segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 14px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}

#view-discover .source-segment {
  appearance: none;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

#view-discover .source-segment strong {
  display: block;
  color: inherit;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0;
}

#view-discover .source-segment small {
  display: block;
  color: var(--faint);
  font-size: 0.78rem;
  line-height: 1.3;
}

#view-discover .source-segment:hover:not(.is-disabled):not(.active) {
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink-soft);
}

#view-discover .source-segment.active {
  background: var(--panel);
  border-color: var(--teal);
  color: var(--ink);
  box-shadow: inset 2px 0 0 var(--teal);
}

#view-discover .source-segment.active strong {
  color: var(--ink);
}

#view-discover .source-segment.active small {
  color: var(--muted);
}

#view-discover .source-segment.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

#view-discover .source-builder {
  padding: 20px;
}

#view-discover .source-builder-head {
  display: none;
}

#view-discover .source-helper-line {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.discover-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.9fr);
  gap: 22px;
  align-items: start;
}

@media (max-width: 880px) {
  .discover-grid {
    grid-template-columns: 1fr;
  }
}

.discover-fields {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.discover-fields label {
  display: grid;
  gap: 5px;
}

.discover-fields label > span {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
}

.discover-fields select,
.discover-fields input[type="search"],
.discover-fields textarea {
  width: 100%;
  max-width: 460px;
}

.run-preview {
  padding: 14px 14px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}

.run-preview-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.run-preview-list {
  margin: 0;
  display: grid;
  gap: 6px;
}

.run-preview-list > div {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 10px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px dashed var(--line);
}

.run-preview-list > div:last-child {
  border-bottom: 0;
}

.run-preview-list dt {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 550;
}

.run-preview-list dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#view-discover .source-submit-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.advanced-quiet {
  border: 0 !important;
  background: transparent !important;
  padding: 0;
}

.advanced-quiet summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 0 !important;
  color: var(--muted) !important;
  font-size: 0.82rem !important;
  font-weight: 550 !important;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.advanced-quiet summary:hover {
  color: var(--ink-soft) !important;
}

.advanced-quiet[open] summary {
  margin-bottom: 6px;
}

.advanced-quiet .check-row {
  margin: 4px 0 4px 14px !important;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.submit-stack {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.submit-reassurance {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 500;
  text-align: right;
}

.discover-recent {
  margin-top: 28px;
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.discover-recent-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.discover-recent-head h4 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--ink);
}

.discover-recent-head .meta-label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
}

.discover-recent-empty {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.discover-recent-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.discover-recent-table th {
  padding: 6px 10px;
  text-align: left;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
}

.discover-recent-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  vertical-align: middle;
}

.discover-recent-table tr:last-child td {
  border-bottom: 0;
}

/* =================================================================
   Company avatar — initial-letter chip that gets the real favicon
   layered on top once /api/favicon proxy is live (Codex brief). CSP
   keeps img-src 'self' so we never call out to Google directly.
   ================================================================= */
.company-avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: hsl(var(--avatar-hue, 0), 38%, 92%);
  color: hsl(var(--avatar-hue, 0), 36%, 28%);
  border: 1px solid hsl(var(--avatar-hue, 0), 30%, 84%);
}

.company-avatar-sm {
  width: 28px;
  height: 28px;
  font-size: 0.74rem;
}

.company-avatar-lg {
  width: 44px;
  height: 44px;
  font-size: 1rem;
  border-radius: 12px;
}

.company-avatar-initial {
  position: relative;
  z-index: 0;
}

/* Reviewer #5: when a favicon comes back near-white (TLT's grey-on-white
   case), the white img background was hiding the chip's coloured tint
   underneath. Make the img background transparent so the colour-seeded
   chip shows through low-saturation favicons — visual weight is restored
   from the chip without losing the brand mark when one exists. */
.company-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  z-index: 1;
}

/* Lead row layout — avatar + identity-text side by side */
.lead-row-identity {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.lead-row-identity-text {
  min-width: 0;
  flex: 1;
}

.lead-row-identity-text h4 {
  margin: 0 0 2px;
}

/* Dossier header — larger avatar + identity-text */
.lead-profile-identity {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.lead-profile-identity-text {
  min-width: 0;
  flex: 1;
}

/* =================================================================
   Dossier polish (D2 / D7 / D8 / D9) — quieter "Set …" placeholder
   pills, hardened hairlines, lifecycle ghost row, result-filter chip.
   ================================================================= */

/* D2 — unset pill: same outline, faint hint inside instead of "+ stage". */
.deal-stage-pill.is-unset,
.confidence-badge.is-unset {
  color: var(--muted, #526170);
  font-style: italic;
  font-weight: 500;
  background: transparent;
  border-color: var(--line, #dce4ec);
  border-style: dashed;
}

.deal-stage-pill.is-unset:hover,
.confidence-badge.is-unset:hover {
  color: var(--ink-soft, #2a2a2a);
  border-color: var(--ink-soft, #2a2a2a);
  border-style: solid;
}

/* D8 — lifecycle empty state: one ghosted event + caption. */
.lifecycle-strip.is-ghost {
  position: relative;
  padding: 12px 16px;
  border: 1px dashed var(--line, #dce4ec);
  border-radius: 10px;
  background: var(--panel-soft, #fbfaf5);
}

.lifecycle-strip.is-ghost .lifecycle-event.ghost {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
}

.lifecycle-ghost-caption {
  margin: 8px 0 0;
  color: var(--muted, #526170);
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.45;
}

/* D9 — result-view filter chip strip. */
#leadResultContext {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--panel-soft, #fbfaf5);
  font-size: 0.84rem;
}

#leadResultContext.hidden {
  display: none;
}

/* Run-filter chip — shows when openHomeJobLeads pins Leads to a specific
   discovery run's imports. Without this affordance the operator had no
   way to see why the lead list was restricted (or unrestrict it). */
.lead-result-context-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.lead-result-context-chip strong {
  color: var(--ink, #1f1b17);
  font-weight: 600;
}
.lead-result-context-clear {
  background: transparent;
  border: 1px solid var(--line, #e4dfd2);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-muted, #5f574d);
  cursor: pointer;
}
.lead-result-context-clear:hover,
.lead-result-context-clear:focus-visible {
  outline: 2px solid var(--burgundy, #7a1f2b);
  outline-offset: 2px;
  color: var(--burgundy, #7a1f2b);
  border-color: var(--burgundy, #7a1f2b);
}

.result-chip-label {
  color: var(--muted, #526170);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.result-chip-value {
  color: var(--ink, #0A0A0A);
  font-weight: 600;
}

.result-chip-meta {
  color: var(--muted, #526170);
  font-variant-numeric: tabular-nums;
}

.result-chip-dismiss {
  margin-left: auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted, #526170);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}

.result-chip-dismiss:hover {
  background: rgba(124, 31, 42, 0.08);
  color: var(--mandate-red, #7C1F2A);
}

/* Clickable recent-search row — opens Leads filtered to the job's imports. */
.discover-recent-row.is-openable {
  cursor: pointer;
  transition: background 100ms ease;
}

.discover-recent-row.is-openable:hover,
.discover-recent-row.is-openable:focus-visible {
  background: rgba(124, 31, 42, 0.04);
  outline: none;
}

.discover-recent-row.is-openable:focus-visible {
  box-shadow: inset 0 0 0 2px var(--mandate-red, #7C1F2A);
}

.discover-recent-open-cell {
  width: 70px;
  text-align: right;
}

.discover-recent-open {
  color: var(--mandate-red, #7C1F2A);
  font-weight: 600;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 100ms ease;
}

.discover-recent-row.is-openable:hover .discover-recent-open,
.discover-recent-row.is-openable:focus-visible .discover-recent-open {
  opacity: 1;
}

.discover-recent-table td:nth-child(3) {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
}

.discover-recent-table td:last-child {
  color: var(--muted);
  font-size: 0.78rem;
}

/* ==============================================================
   Wave D4 — First-run overlay (three-step orientation).
   Reuses .modal-backdrop pattern; styles the inner card to feel
   like the Carta-grade modal system the rest of the app uses.
   ============================================================== */
.first-run-modal {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(10, 10, 10, 0.18);
  padding: 28px 30px 24px;
  width: min(520px, 92vw);
  max-width: 92vw;
}

.first-run-modal .eyebrow {
  margin: 0 0 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.first-run-modal h3 {
  margin: 0 0 12px;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--ink);
}

.first-run-modal p {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
}

.first-run-dots {
  display: flex;
  gap: 6px;
  margin: 0 0 20px;
}

.first-run-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background 120ms ease;
}

.first-run-dot.active {
  background: var(--teal);
}

.first-run-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}

.first-run-actions [data-first-run-skip] {
  margin-right: auto;
  color: var(--muted);
  font-size: 0.85rem;
}

/* FE-043 — Leads view heading restructure.
   Old layout was a 2-column grid: title left, a *vertical stack* of
   layout-switcher / filter-row / brief-launcher right. That stacked three
   pills on the right while the heading sat alone on the left — visually
   chaotic and tall.
   New shape: row 1 = title + (layout switcher + selection + Generate brief)
   row 2 = full-width inline filter bar.
   Overrides the four earlier `#view-leads .view-heading` rules. */
#view-leads .view-heading {
  display: block;
  grid-template-columns: none;
  align-items: stretch;
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid #dce4ec;
}

#view-leads .view-heading h3 {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.2;
}

.lead-heading-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.lead-heading-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Brief launcher sat in its own stacked row before — now inline next to
   the layout switcher on the same row as the heading. */
#view-leads .brief-launcher {
  margin: 0;
}

#view-leads .brief-launcher .primary-button {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 0.78rem;
  white-space: nowrap;
}

.leads-layout-switcher {
  margin-bottom: 0 !important;
}

/* Full-width inline filter bar replaces the right-side stacked filter cluster. */
.leads-filter-bar {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.leads-filter-bar label {
  display: grid;
  gap: 4px;
  margin: 0;
  min-width: 0;
}

.leads-filter-bar label.filter-search {
  flex: 1 1 280px;
  min-width: 220px;
}

.leads-filter-bar label:not(.filter-search) {
  flex: 0 0 auto;
  min-width: 140px;
}

.leads-filter-bar label span {
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.leads-filter-bar input,
.leads-filter-bar select {
  min-height: 34px !important;
  padding: 6px 10px;
  background: #ffffff;
  border: 1px solid var(--line-strong, #d7e0e8);
  border-radius: 8px;
  font-size: 0.85rem;
  box-shadow: none !important;
}

.leads-filter-bar .as-of-field input {
  min-width: 140px;
}

.leads-filter-bar .ghost-button.compact-button,
.leads-filter-bar .secondary-button.compact-button {
  align-self: flex-end;
  min-height: 34px;
  padding: 6px 12px;
  font-size: 0.78rem;
}

/* The Contacts filter bar carries both .contacts-filter-bar and
   .leads-filter-bar (FE-032), so one parent class + the two IDs covers
   both right-flushed buttons. */
.leads-filter-bar :is(#saveAndAlertButton, #exportPeopleCsvContacts) {
  margin-left: auto;
}

/* When wrapped to a narrow viewport, the title stack still reads clean. */
@media (max-width: 880px) {
  .lead-heading-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .lead-heading-actions {
    width: 100%;
    justify-content: space-between;
  }
  .leads-filter-bar :is(#saveAndAlertButton, #exportPeopleCsvContacts) {
    margin-left: 0;
  }
}

/* FE-044 — Scan banner + skeleton rows polish.
   Banner stays in the Stone/Paper register but spinner is beefed up,
   title+status get a slightly tighter, more confident copy treatment,
   and the progress row sits visually attached to the banner instead of
   floating below.
   Skeleton rows below the banner shrunk: each row was 14px padding +
   28px checkbox-block + 3 horizontal bars = tall and visually noisy.
   Now compact + lower-contrast so the banner reads as the active
   element and the skeletons recede. */
.leads-scan-banner {
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 10px;
  gap: 8px;
  box-shadow: 0 1px 0 rgba(15, 20, 25, 0.02);
}

.leads-scan-banner-row {
  gap: 10px;
}

.leads-scan-spinner {
  width: 18px;
  height: 18px;
  border-width: 2.5px;
}

.leads-scan-banner-copy strong {
  font-size: 0.88rem;
  letter-spacing: -0.005em;
}

.leads-scan-banner-copy small {
  font-size: 0.74rem;
  color: var(--ink-soft, #5a6470);
}

.leads-scan-progress-row {
  gap: 8px;
}

.leads-scan-progress {
  height: 3px;
  background: rgba(124, 31, 42, 0.08);
}

.leads-scan-progress-pct {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--mandate-red, #7C1F2A);
}

.skeleton-lead-row {
  padding: 10px 12px;
  margin: 4px 0;
  gap: 10px;
  border-radius: 8px;
  opacity: 0.65;
}

.skeleton-block-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

.skeleton-body {
  gap: 6px;
}

.skeleton-block-title { height: 10px; width: 48%; }
.skeleton-block-meta  { height: 8px;  width: 28%; }
.skeleton-block-line  { height: 8px;  width: 70%; }

/* FE-045 — Pipeline board fits all six columns into the viewport.
   Previous rule (.pipeline-board at line 5470) was repeat(6, minmax(252px, 1fr))
   → 6 × 252 + 5 × 10 = 1562px minimum board width. On a 1444px laptop window
   minus 200px sidebar and workspace padding the available width is ~1188px,
   so the rightmost column ("Call booked") got clipped off the right edge.
   Fix: drop the column minimum (minmax(0, 1fr)) so columns share the
   available space evenly; gap trimmed to 8px so six columns can still
   breathe inside the viewport. */
.pipeline-board {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding-bottom: 12px;
  width: 100%;
  overflow-x: visible;
}

.pipeline-column {
  min-width: 0;
  padding: 8px;
}

.pipeline-column-head {
  min-height: 36px;
  padding: 0 2px 0 2px;
}

.pipeline-column-head strong {
  font-size: 1rem;
}

/* FE-046 — defeat flex/grid display rules that override [hidden] for
   the As-of field, the as-of clear button, and the pane-count strip. */
.leads-filter-bar label.as-of-field[hidden],
.leads-filter-bar #asOfDateClear[hidden],
.lead-list-pane .pane-head[hidden] {
  display: none !important;
}

/* FE-048 — Contacts header polish.
   Drops: "People intelligence" eyebrow, "Has email" checkbox.
   Renames: "Prioritised public contacts" → "Discovered contacts".
   Compresses: heading + filter row into the same horizontal pattern as
   Leads (single H3 + full-width inline filter bar). Brand-red accents
   on focus/active states. */
.contacts-heading {
  display: block !important;
  grid-template-columns: none !important;
  margin: 0 0 14px;
  padding: 0 0 12px;
}

.contacts-heading-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.contacts-heading h3 {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.2;
  color: var(--ink);
}

.contacts-filter-bar {
  display: flex !important;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.contacts-filter-bar label {
  display: grid;
  gap: 4px;
  margin: 0;
  min-width: 0;
}

.contacts-filter-bar label.filter-search {
  flex: 1 1 280px;
  min-width: 220px;
}

.contacts-filter-bar label:not(.filter-search):not(.check-row) {
  flex: 0 0 auto;
  min-width: 160px;
}

.contacts-filter-bar label span {
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.contacts-filter-bar input,
.contacts-filter-bar select {
  min-height: 34px !important;
  padding: 6px 10px;
  background: #ffffff;
  border: 1px solid var(--line-strong, #d7e0e8);
  border-radius: 8px;
  font-size: 0.85rem;
  box-shadow: none !important;
}

.contacts-filter-bar input:focus,
.contacts-filter-bar select:focus {
  border-color: var(--mandate-red, #7C1F2A);
  box-shadow: 0 0 0 3px rgba(124, 31, 42, 0.12) !important;
  outline: none;
}

.contacts-filter-bar .check-row[hidden] {
  display: none !important;
}

/* FE-051 — Sticky banner. Thin bar at the top of the workspace, sticky to
   the viewport, present across all views. Holds the page heading (left,
   brand burgundy) and the notification bell (right). User explicitly asked
   for the bell to travel with them down the page. */
.sticky-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 18px;
  margin: 0 -28px 2px;
  background: rgba(247, 245, 240, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(15, 20, 25, 0.06);
  min-height: 44px;
}

/* FE-061 — `.sticky-bar-title` element was retired; the wordmark anchors the
   bar on the left, the icon cluster on the right. Selector retained as a
   no-op in case any third-party styles or a future heading element brings
   the class back. */
.sticky-bar-title {
  display: none;
}

/* FE-049 / FE-051 — bell now lives inside the sticky banner; position
   is by-flow, not fixed. */
.notif-mount {
  position: relative;
  z-index: 60;
  flex: 0 0 auto;
}

/* FE-061 / FE-063 — right cluster of the sticky banner: Settings cog +
   notification bell. Stays at natural width; the cmd-wrap to its left
   takes flex: 1 and pushes it right naturally. */
.sticky-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.sticky-bar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line-strong, #d7e0e8);
  background: #ffffff;
  color: var(--ink, #0F1419);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 20, 25, 0.08);
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.sticky-bar-icon:hover,
.sticky-bar-icon:focus-visible {
  border-color: var(--mandate-red, #7C1F2A);
  color: var(--mandate-red, #7C1F2A);
  outline: none;
}

/* FE-061 — wordmark anchors the sticky bar on the top-left. Scaled up so
   it reads as the brand mark of the page rather than a tucked-away badge.
   `margin-right: auto` belt-and-braces with `.sticky-bar-right`'s
   `margin-left: auto` to make sure the mark sticks to the start regardless
   of which flex hint the browser honours. */
.sticky-bar-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  padding: 4px 4px 4px 0;
  border-radius: 10px;
  color: var(--mandate-red, #7C1F2A);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: "Geist Mono", ui-monospace, monospace;
  flex: 0 0 auto;
}

.sticky-bar-wordmark svg {
  display: block;
  width: 32px;
  height: 32px;
}

/* FE-058 / FE-061 / FE-061b / FE-061c — Today's queue. Flush against the
   left edge of column 1 row 1 in the home grid. Row padding pushed to
   the floor so all 6 rows + the row-2 pipeline/lead-sources strip fit
   inside a single laptop viewport. */
.home-queue-panel {
  margin: 0;
  max-width: none;
  padding: 4px 10px;
}

.home-queue-panel header h4 {
  font-size: 0.9rem;
}

.home-focus-list {
  gap: 0;
}

.home-focus-row {
  padding: 2px 10px !important;
  gap: 8px;
  min-height: 0 !important;
}

.home-focus-row .avatar {
  width: 20px;
  height: 20px;
  font-size: 0.62rem;
}

.home-focus-row strong {
  font-size: 0.78rem;
  line-height: 1.15;
}

.home-focus-row small {
  font-size: 0.7rem;
  line-height: 1.15;
}

.notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line-strong, #d7e0e8);
  background: #ffffff;
  color: var(--ink, #0F1419);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 20, 25, 0.08);
  transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.notif-bell:hover,
.notif-bell:focus-visible {
  border-color: var(--mandate-red, #7C1F2A);
  color: var(--mandate-red, #7C1F2A);
  outline: none;
}

.notif-bell[aria-expanded="true"] {
  border-color: var(--mandate-red, #7C1F2A);
  color: var(--mandate-red, #7C1F2A);
  background: rgba(124, 31, 42, 0.04);
}

.notif-bell-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--mandate-red, #7C1F2A);
  box-shadow: 0 0 0 2px #ffffff;
}

.notif-bell-dot[hidden] {
  display: none !important;
}

.notif-panel {
  position: absolute;
  top: 44px;
  right: 0;
  width: min(360px, calc(100vw - 32px));
  max-height: min(440px, calc(100vh - 80px));
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--line-strong, #d7e0e8);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 20, 25, 0.14);
  overflow: hidden;
}

.notif-panel[hidden] {
  display: none !important;
}

.notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line, #e5e9ee);
}

.notif-panel-head strong {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #6b7480);
}

.notif-clear {
  font-size: 0.72rem;
  padding: 4px 8px;
}

.notif-list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.notif-list:empty + .notif-empty {
  display: block;
}

.notif-list:not(:empty) + .notif-empty {
  display: none;
}

.notif-empty {
  padding: 18px 16px;
  margin: 0;
  color: var(--muted, #6b7480);
  font-size: 0.85rem;
  text-align: center;
}

.notif-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--line, #e5e9ee);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

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

.notif-row:hover,
.notif-row:focus-visible {
  background: rgba(124, 31, 42, 0.04);
  outline: none;
}

.notif-row-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-top: 7px;
  background: var(--mandate-red, #7C1F2A);
}

.notif-row.is-finished .notif-row-dot {
  background: var(--green, #27804f);
}

.notif-row-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.notif-row-copy strong {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink, #0F1419);
  letter-spacing: -0.005em;
}

.notif-row-copy small {
  font-size: 0.74rem;
  color: var(--muted, #6b7480);
}

.notif-row-time {
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: var(--muted, #6b7480);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}

/* FE-050 — Discover form trims.
   Hides: "Ctrl Enter" hint, "Runs in background" reassurance,
   "Run in background" checkbox row (3 forms: packs/custom/search).
   The reassurance message is now owned by the runs notification bell. */
.advanced-settings label.check-row[hidden] {
  display: none !important;
}

/* =================================================================
   FE-061d / FE-061f — Discover view density. Voice-note: "giant
   unnecessary weird spacing hiding stuff down the page and top right
   we don't need those words." Strips the right-side copy, collapses
   the page-heading divider, and pulls the source-workbench upward by
   trimming the wrapping paddings/margins that the older two-column
   `.view-heading + .view-copy` layout assumed.
   FE-061f tightened further: each gap was still leaking ~10px more
   than necessary; the workbench card now hugs its contents.
   ================================================================= */

/* Kill the right-side "Choose a source, set the issuer count..."
   paragraph. The H3 title carries the page on its own. */
#view-discover .view-copy {
  display: none !important;
}

/* FE-061g — The view-heading is now `hidden` in the markup because the
   eyebrow + H4 inside the launchpad below carry the page title. CSS
   `display: flex` from the base `.view-heading` rule would otherwise
   defeat the HTML `hidden` attribute, so force it here. */
#view-discover .view-heading[hidden] {
  display: none !important;
}

/* Collapse the heading row in case `[hidden]` ever gets removed. */
#view-discover .view-heading {
  margin-bottom: 4px !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

#view-discover .view-heading h3 {
  margin: 0 !important;
  font-size: 1.15rem;
  line-height: 1.15;
}

/* Source workbench shell. */
#view-discover .source-workbench {
  margin-bottom: 8px !important;
  gap: 0;
}

#view-discover .source-builder {
  padding: 4px !important;
}

/* Tab strip. */
#view-discover .source-segments {
  margin: 0 0 4px !important;
  padding: 3px !important;
}

#view-discover .source-segment {
  padding: 4px 10px !important;
  min-height: 0 !important;
}

#view-discover .source-segment strong {
  font-size: 0.84rem;
  line-height: 1.15;
}

#view-discover .source-segment small {
  font-size: 0.7rem;
  line-height: 1.15;
}

/* Form panel. */
#view-discover .source-mode-panel {
  padding: 4px 8px !important;
  gap: 6px !important;
}

#view-discover .discover-grid {
  gap: 6px !important;
}

#view-discover .discover-fields {
  gap: 6px !important;
}

#view-discover .discover-fields label {
  gap: 2px !important;
}

/* Inputs/selects: keep them readable but slim. */
#view-discover .discover-fields select,
#view-discover .discover-fields input[type="search"],
#view-discover .discover-fields textarea {
  min-height: 32px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

#view-discover .source-helper {
  margin-top: 2px !important;
  font-size: 0.74rem;
  line-height: 1.3;
}

#view-discover .source-submit-row {
  margin-top: 2px !important;
}

#view-discover .source-submit-row .primary-button {
  min-height: 34px !important;
}

#view-discover .source-helper-line {
  margin: 0 0 4px !important;
  font-size: 0.76rem;
  line-height: 1.25;
}

/* =================================================================
   FE-061g — Discover mode picker rebuilt as the Find-People launchpad.
   The `.source-segments` div now also carries `.home-people-launchpad`
   class and contains a `.home-launch-copy` block + three
   `.home-launch-card.source-segment` buttons. These overrides:
     1. Cancel the older 3-column grid tab strip styling that the
        plain `.source-segments` selector still tries to apply.
     2. Give the active card a burgundy border + accent so the
        selected mode reads as picked.
     3. Hide the standalone helper line (its copy now lives inside
        the launchpad copy block).
   ================================================================= */

/* Cancel the old tab-strip layout when source-segments is now the
   launchpad. */
#view-discover .source-segments.home-people-launchpad {
  display: grid !important;
  grid-template-columns: minmax(220px, 0.6fr) minmax(0, 1.4fr) !important;
  gap: 12px !important;
  margin: 0 0 8px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(124, 31, 42, 0.18) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(70% 90% at 0 0, rgba(124, 31, 42, 0.08), transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #fbfaf5 100%) !important;
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

/* Reset the segment-specific rules so the launchpad card style wins
   on these buttons. */
#view-discover .source-segments.home-people-launchpad .home-launch-card.source-segment {
  appearance: none;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 10px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  color: var(--ink);
  text-align: left;
  min-height: 84px !important;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

#view-discover .source-segments.home-people-launchpad .home-launch-card.source-segment strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.014em;
  line-height: 1.15;
}

#view-discover .source-segments.home-people-launchpad .home-launch-card.source-segment small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.35;
}

/* The 01/02/03 badge. */
#view-discover .source-segments.home-people-launchpad .home-launch-card.source-segment > span[aria-hidden="true"] {
  width: 28px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(124, 31, 42, 0.16);
  border-radius: 999px;
  color: var(--mandate-red, #7C1F2A);
  background: rgba(124, 31, 42, 0.08);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 650;
  margin-bottom: 2px;
}

/* Active card — burgundy outline + slight lift. */
#view-discover .source-segments.home-people-launchpad .home-launch-card.source-segment.active {
  border-color: rgba(124, 31, 42, 0.55) !important;
  background:
    radial-gradient(100% 100% at 100% 0, rgba(124, 31, 42, 0.12), transparent 54%),
    #ffffff !important;
  box-shadow: 0 0 0 1px rgba(124, 31, 42, 0.35), 0 6px 18px rgba(124, 31, 42, 0.12) !important;
}

#view-discover .source-segments.home-people-launchpad .home-launch-card.source-segment.active > span[aria-hidden="true"] {
  color: #ffffff;
  background: var(--mandate-red, #7C1F2A);
  border-color: var(--mandate-red, #7C1F2A);
}

#view-discover .source-segments.home-people-launchpad .home-launch-card.source-segment:hover:not(.active):not(.is-disabled) {
  border-color: rgba(124, 31, 42, 0.32) !important;
  background: #ffffff !important;
  transform: translateY(-1px);
}

#view-discover .source-segments.home-people-launchpad .home-launch-card.source-segment.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* The dynamic helper copy now sits inside `.home-launch-copy > p`. */
#view-discover .source-segments.home-people-launchpad .home-launch-copy h4 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.022em;
  line-height: 1.12;
}

#view-discover .source-segments.home-people-launchpad .home-launch-copy > p:not(.eyebrow) {
  margin: 6px 0 0;
  max-width: 430px;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.45;
}

/* The legacy three-column grid tab styling shouldn't run on this
   element any more; cancel it explicitly in case the cascade order
   misbehaves. */
#view-discover .source-segments.home-people-launchpad > button {
  grid-column: auto;
}

/* When the launchpad is narrow the actions row stacks. */
@media (max-width: 1100px) {
  #view-discover .source-segments.home-people-launchpad {
    grid-template-columns: 1fr !important;
  }
  #view-discover .source-segments.home-people-launchpad .home-launch-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =================================================================
   Leads review desk - run results redesigned in the v3 Mandate style.
   This intentionally follows the Home/Discover paper, burgundy, ticker
   and terminal-metadata language instead of the old blue CRM shell.
   ================================================================= */

body[data-active-tab="leads"] .workspace {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 var(--canvas-pad-x) 18px !important;
  background: var(--canvas) !important;
}

body[data-active-tab="leads"] .sticky-bar {
  padding: 18px var(--canvas-pad-x) 14px;
  margin: 0 calc(var(--canvas-pad-x) * -1) 0;
  background: var(--canvas);
  border-bottom: var(--hairline-w) solid var(--hairline);
}

body[data-active-tab="leads"] .sticky-bar-wordmark {
  display: none !important;
}

body[data-active-tab="leads"] .sticky-bar-brand-label {
  display: flex !important;
  align-items: baseline;
  gap: 12px;
}

#view-leads {
  color: var(--ink);
  font-family: var(--font-sans-v4);
  font-size: 13px;
}

#view-leads .lead-review-heading {
  margin: 0 0 12px;
  padding: 12px 0 10px;
  border-bottom: var(--hairline-w) solid var(--hairline);
  background: var(--canvas);
}

#view-leads .lead-heading-top {
  align-items: flex-start;
  margin-bottom: 10px;
}

.lead-heading-copy {
  min-width: 260px;
}

#view-leads .lead-heading-copy h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2vw, 2rem);
  font-weight: 650;
  line-height: 1.05;
  color: var(--ink);
}

.lead-heading-copy p {
  max-width: 620px;
  margin: 6px 0 0;
  color: var(--ink-muted);
  line-height: 1.45;
}

#view-leads .lead-heading-actions {
  align-items: center;
}

#view-leads .leads-layout-switcher {
  display: none !important;
}

#view-leads .brief-launcher {
  display: none;
  padding: 3px;
  border: var(--hairline-w) solid var(--hairline);
  background: var(--surface);
}

#view-leads .brief-launcher .meta-label {
  padding: 0 8px;
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 10px;
  letter-spacing: 0;
}

#view-leads .brief-launcher .primary-button,
#view-leads #generateBriefFromSelected {
  border-color: var(--burgundy);
  background: var(--burgundy);
  color: var(--ink-on-burgundy);
  border-radius: var(--radius-mini);
  box-shadow: none;
}

.run-review-summary {
  display: none;
  flex-wrap: wrap;
  gap: 0;
  padding: 7px 0;
  border-top: var(--hairline-w) solid var(--hairline-soft);
  border-bottom: var(--hairline-w) solid var(--hairline-soft);
  background: transparent;
}

.run-review-stat {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 0 12px;
  border-right: var(--hairline-w) solid var(--hairline);
}

.run-review-stat:last-child {
  border-right: 0;
}

.run-review-stat strong {
  color: var(--burgundy);
  font-family: var(--font-mono-v4);
  font-size: 0.86rem;
  line-height: 1;
  font-weight: 800;
}

.run-review-stat small {
  overflow: hidden;
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-leads .leads-filter-bar {
  margin-top: 10px;
  padding-top: 10px;
  border-top: var(--hairline-w) solid var(--hairline-soft);
}

#view-leads .leads-filter-bar label span {
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

#view-leads .leads-filter-bar input,
#view-leads .leads-filter-bar select,
#view-leads .leads-filter-bar .secondary-button,
#view-leads .leads-filter-bar .ghost-button {
  min-height: 32px !important;
  border: var(--hairline-w) solid var(--hairline-default);
  border-radius: var(--radius-input);
  background: var(--surface);
  color: var(--ink);
  box-shadow: none !important;
}

#view-leads #saveAndAlertButton {
  display: none !important;
}

#view-leads .leads-filter-bar input:focus,
#view-leads .leads-filter-bar select:focus {
  border-color: var(--burgundy);
  outline: 2px solid rgba(122, 31, 42, 0.12);
}

#view-leads .lead-review-desk {
  display: grid;
  grid-template-columns: minmax(360px, 0.82fr) minmax(620px, 1.18fr);
  gap: 12px;
  min-height: calc(100vh - 210px);
  border: 0;
  background: transparent;
  box-shadow: none;
}

#view-leads .lead-review-desk.is-person-open {
  grid-template-columns: minmax(236px, 300px) minmax(0, 1fr);
  gap: 0;
}

#view-leads .lead-list-pane {
  padding: 10px;
  border: var(--hairline-w) solid var(--hairline);
  border-radius: 8px;
  background: color-mix(in srgb, var(--canvas) 72%, var(--surface));
}

#view-leads .lead-list-pane .pane-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  padding: 0 0 8px;
  border-bottom: var(--hairline-w) solid var(--hairline-soft);
}

#view-leads .lead-list-pane .pane-head h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.1;
}

#view-leads .lead-list-pane .pane-count {
  display: none;
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.review-lane-strip {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 10px;
  padding-bottom: 9px;
  border-bottom: var(--hairline-w) solid var(--hairline);
}

.review-lane-chip {
  display: inline-flex;
  gap: 5px;
  align-items: baseline;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.review-lane-chip strong {
  color: var(--burgundy);
  font-family: var(--font-mono-v4);
  font-size: 0.78rem;
  line-height: 1;
  font-weight: 850;
}

.review-lane-chip span {
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.review-lane-chip small {
  display: none;
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
  line-height: 1.25;
}

.review-lane-brief {
  border-left-color: var(--burgundy);
}

.review-lane-route {
  border-left-color: var(--sage);
}

.review-lane-evidence {
  border-left-color: #A86B1F;
}

.review-lane-board {
  color: var(--sage-dark);
}

#view-leads .account-list-tabs {
  display: none;
  gap: 16px;
  margin: 0 0 9px;
  padding: 0 0 8px;
  border-bottom: var(--hairline-w) solid var(--hairline);
}

#view-leads .account-list-tab {
  min-height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

#view-leads .account-list-tab.active {
  color: var(--burgundy);
  background: transparent;
}

#view-leads .account-list-tab.active::after {
  background: var(--burgundy);
}

#view-leads .lead-list {
  display: grid;
  gap: 8px;
  padding-right: 0;
}

#view-leads .lead-row.review-candidate-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-height: 0;
  margin: 0;
  padding: 12px;
  border: var(--hairline-w) solid var(--hairline);
  border-left: 3px solid var(--hairline-strong);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, var(--canvas));
  box-shadow: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

#view-leads .lead-row.review-candidate-row:hover {
  background: #fffaf4;
  border-color: var(--hairline-strong);
}

#view-leads .lead-row.review-candidate-row.active {
  position: relative;
  z-index: 2;
  margin-right: -8px;
  padding-right: 18px;
  border-color: rgba(122, 31, 42, 0.32);
  border-left-color: var(--burgundy);
  border-right-color: #fffaf4;
  background: #fffaf4;
  box-shadow: 0 14px 32px rgba(55, 42, 30, 0.10);
  transform: translateX(4px);
}

#view-leads .lead-row.review-candidate-row.active::after {
  display: block;
  position: absolute;
  top: 18px;
  right: -13px;
  bottom: 18px;
  width: 16px;
  border: var(--hairline-w) solid rgba(122, 31, 42, 0.24);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: #fffaf4;
  box-shadow: 10px 10px 24px rgba(55, 42, 30, 0.08);
  content: "";
}

#view-leads .lead-review-desk.is-person-open .lead-list-pane {
  padding: 10px 0 10px 10px;
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: var(--surface);
}

#view-leads .lead-review-desk.is-person-open .lead-row.review-candidate-row {
  padding: 10px;
}

#view-leads .lead-review-desk.is-person-open .lead-row.review-candidate-row.active {
  margin-right: -10px;
  padding-right: 20px;
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(90deg, #fffaf4 0%, var(--surface) 100%);
  box-shadow: none;
  transform: none;
}

#view-leads .lead-review-desk.is-person-open .lead-row.review-candidate-row.active::after {
  display: none;
}

#view-leads .lead-review-desk.is-person-open .lead-detail {
  border-left: 0;
}

#view-leads .lead-review-desk.is-person-open .detail-card.lead-profile.mandate-dossier {
  border-left: var(--hairline-w) solid rgba(122, 31, 42, 0.16);
  border-radius: 0 8px 8px 0;
}

#view-leads .lead-review-desk.is-person-open .lead-row-v2 > .lead-row-open.review-candidate-open {
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
}

#view-leads .lead-review-desk.is-person-open .review-person-avatar {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  font-size: 10px;
}

#view-leads .lead-review-desk.is-person-open .lead-row-verdict,
#view-leads .lead-review-desk.is-person-open .review-decision-likelihood,
#view-leads .lead-review-desk.is-person-open .review-candidate-reason,
#view-leads .lead-review-desk.is-person-open .review-candidate-facts,
#view-leads .lead-review-desk.is-person-open .review-person-firm span {
  display: none;
}

#view-leads .lead-review-desk.is-person-open .review-person-heading small,
#view-leads .lead-review-desk.is-person-open .review-person-firm {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-leads .lead-review-desk.is-person-open .review-route-group-row {
  grid-template-columns: 24px minmax(0, 1fr);
  padding: 10px;
}

#view-leads .lead-review-desk.is-person-open .review-route-group-icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 9px;
}

#view-leads .lead-review-desk.is-person-open .review-route-group-copy {
  gap: 1px;
}

#view-leads .lead-review-desk.is-person-open .review-route-group-copy .meta-label,
#view-leads .lead-review-desk.is-person-open .review-route-group-copy p,
#view-leads .lead-review-desk.is-person-open .review-route-group-facts {
  display: none;
}

#view-leads .lead-review-desk.is-person-open .review-route-group-copy h4 {
  overflow: hidden;
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 10px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.review-candidate-row[data-verdict="brief"] { border-left-color: var(--burgundy); }
.review-candidate-row[data-verdict="route"] { border-left-color: var(--sage); }
.review-candidate-row[data-verdict="evidence"] { border-left-color: #A86B1F; }
.review-candidate-row[data-verdict="avoid"] { border-left-color: var(--ink-faint); opacity: 0.78; }

.review-route-group-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: var(--hairline-w) dashed rgba(122, 31, 42, 0.20);
  border-radius: 8px;
  background: rgba(255, 250, 244, 0.58);
}

.review-route-group-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(122, 31, 42, 0.075);
  color: var(--burgundy);
  font-family: var(--font-mono-v4);
  font-size: 10px;
  font-weight: 850;
}

.review-route-group-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.review-route-group-copy h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 760;
}

.review-route-group-copy p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.review-route-group-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--ink-faint);
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
}

#view-leads .lead-row-v2 > .lead-row-open.review-candidate-open {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 0;
  border-radius: 8px;
  text-align: left;
}

/* The one rule for the queue position. Two others used to fight over it: a
   `line-height: 30px` added when the card carried a 30px initials avatar
   (deleted 2026-07-28), and a 620px override undoing the first one's tall
   line. Both are gone; 20px is the name's own line box, so the number sits
   on the name's first baseline at every width. */
.review-rank {
  align-self: start;
  color: var(--ink-faint);
  font-family: var(--font-mono-v4);
  font-size: 10px;
  font-weight: 700;
  line-height: 20px;
}

.review-candidate-body {
  min-width: 0;
  display: grid;
  gap: 5px;
}

#view-leads .lead-row-v2 .lead-row-line-identity {
  gap: 8px;
}

#view-leads .lead-row-v2 .lead-row-line-identity h4 {
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-sans-v4);
  font-size: 0.98rem;
  font-weight: 760;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-person-avatar,
.person-dossier-avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: var(--hairline-w) solid rgba(122, 31, 42, 0.16);
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.26), transparent 36%),
    hsl(var(--avatar-hue, 350) 28% 32%);
  color: var(--ink-on-burgundy);
  font-family: var(--font-mono-v4);
  font-weight: 800;
  letter-spacing: 0;
}

.review-person-avatar {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-size: 11px;
}

.review-person-heading {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.review-person-heading small,
.review-person-firm {
  color: var(--ink-muted);
  font-size: 0.77rem;
  line-height: 1.3;
}

.review-person-firm {
  margin: 0;
}

.review-person-firm span {
  margin-left: 6px;
  color: var(--ink-faint);
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
  text-transform: uppercase;
}

.lead-row-verdict,
.dossier-verdict-label {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border: var(--hairline-w) solid currentColor;
  border-radius: 999px;
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.verdict-brief { color: var(--burgundy); background: rgba(122, 31, 42, 0.055); }
.verdict-route { color: var(--sage-dark); background: var(--sage-tint); }
.verdict-evidence { color: #8A4F16; background: rgba(168, 107, 31, 0.12); }
.verdict-board { color: var(--sage-dark); background: var(--sage-tint); }
.verdict-avoid { color: var(--ink-muted); background: rgba(31, 27, 23, 0.05); }

.review-grade {
  margin-left: auto;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
}

.review-candidate-reason {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.review-decision-likelihood {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 8px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(122, 31, 42, 0.035);
}

.review-decision-likelihood span {
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
  text-transform: uppercase;
}

/* The burgundy colour declarations that used to live in these rules are
   gone (review-desk-craft). They were superseded years-of-commits ago by
   the CLEAN LIGHT block further down the file, which could only reach them
   by shouting !important — an arms race between two rules for the same
   selector, where the loser was still sitting here doing nothing. Removing
   the loser is what lets the winner stop shouting. Geometry and typography
   stay; only colour left. */
.review-decision-likelihood strong {
  font-family: var(--font-mono-v4);
  font-size: 10px;
  text-transform: uppercase;
}

.review-decision-likelihood i {
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
}

.review-decision-likelihood b {
  display: block;
  height: 100%;
  border-radius: inherit;
}

#view-leads .lead-row-line-meta {
  gap: 6px;
}

.review-candidate-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
  line-height: 1.35;
}

.review-candidate-facts span {
  min-width: 0;
}

#view-leads .lead-row-tag-chip,
#view-leads .lead-row-routes {
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius-mini);
  background: color-mix(in srgb, var(--surface) 78%, var(--canvas));
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
}

#view-leads .lead-brief-select {
  display: none;
}

#view-leads .lead-detail {
  position: sticky;
  top: 72px;
  min-width: 0;
  padding: 0;
  background: transparent;
}

#view-leads .detail-card.lead-profile.mandate-dossier {
  min-height: 0;
  padding: 0;
  border: var(--hairline-w) solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 16px 42px rgba(55, 42, 30, 0.075);
  overflow: hidden;
}

.person-dossier-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  min-height: 0;
}

.person-dossier-main {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 22px 24px 20px;
  background: linear-gradient(180deg, #fffaf4 0%, var(--surface) 38%);
}

.person-dossier-identity {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.person-dossier-identity .eyebrow {
  margin-bottom: 6px;
  color: var(--burgundy);
  font-family: var(--font-mono-v4);
  font-size: 10px;
  letter-spacing: 0;
}

.person-dossier-identity h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 2.5vw, 2.65rem);
  font-weight: 650;
  line-height: 1;
}

/* FE-053 — person-name is a button that opens an action menu. Inherits
   the h3 typography so the visual register doesn't change. */
.person-dossier-name-button {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  text-align: left;
}
.person-dossier-name-button:hover {
  color: var(--burgundy, #7a1f2b);
}
/* WCAG 2.4.11 — keyboard focus needs a non-colour-only indicator at
   ≥3:1 against the surrounding surface. Burgundy ring on the cream
   page sits at ~6:1; comfortably clears. */
.person-dossier-name-button:focus-visible {
  outline: 2px solid var(--burgundy, #7a1f2b);
  outline-offset: 3px;
  border-radius: 4px;
  color: var(--burgundy, #7a1f2b);
}
.person-dossier-name-caret {
  display: inline-block;
  font-size: 0.65em;
  color: var(--ink-muted, #5f574d);
  transform: translateY(-0.18em);
}
.person-dossier-name-button[aria-expanded="true"] .person-dossier-name-caret {
  color: var(--burgundy, #7a1f2b);
}
.person-action-menu button[disabled] {
  color: var(--ink-faint, #9c9489);
  cursor: not-allowed;
  opacity: 0.5;
}

.person-dossier-identity .detail-subtitle {
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: 0.94rem;
}

.person-decision-summary {
  max-width: 760px;
  padding-top: 4px;
}

.person-decision-summary .meta-label,
.person-context-card h5 {
  color: var(--burgundy);
  font-family: var(--font-mono-v4);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.person-decision-summary strong {
  display: block;
  max-width: 36ch;
  margin-top: 6px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  font-weight: 650;
  line-height: 1.12;
}

.person-decision-summary p {
  max-width: 62ch;
  margin: 6px 0 0;
  color: var(--ink-muted);
  line-height: 1.45;
}

.person-decision-summary .dossier-actions {
  margin-top: 14px;
}

.person-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 8px;
  border-top: var(--hairline-w) solid rgba(122, 31, 42, 0.10);
}

.person-context-card {
  min-width: 0;
}

.person-context-card h5 {
  margin: 0 0 7px;
}

.person-context-card p {
  margin: 0;
  color: var(--ink);
  line-height: 1.5;
}

.person-context-card small {
  display: block;
  margin-top: 9px;
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 10px;
}

.person-outreach-panel {
  display: grid;
  gap: 14px;
  padding-top: 14px;
  border-top: var(--hairline-w) solid rgba(122, 31, 42, 0.10);
}

.person-outreach-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(260px, 1.1fr);
  gap: 18px;
  align-items: start;
}

.person-outreach-head > div {
  min-width: 0;
}

.person-outreach-head .meta-label,
.person-outreach-item span,
.person-opener .meta-label {
  color: var(--burgundy);
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.person-outreach-head strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.08rem, 1.4vw, 1.32rem);
  font-weight: 650;
  line-height: 1.12;
}

.person-outreach-head p,
.person-outreach-item p,
.person-opener p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.person-outreach-head > div:nth-child(2) {
  padding: 10px 12px 11px;
  border-left: 2px solid rgba(122, 31, 42, 0.22);
  border-radius: 8px;
  background: rgba(122, 31, 42, 0.035);
}

.person-outreach-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}

.person-outreach-item {
  min-width: 0;
  padding: 11px 0;
  border-top: var(--hairline-w) solid rgba(122, 31, 42, 0.09);
}

.person-outreach-item p {
  color: var(--ink);
}

.person-opener {
  padding: 12px 14px;
  border: var(--hairline-w) solid rgba(122, 31, 42, 0.14);
  border-left: 3px solid var(--burgundy);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 78%, #fffaf4);
}

.person-opener p {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.38;
}

.person-dossier-side {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 20px;
  border-left: var(--hairline-w) solid rgba(122, 31, 42, 0.12);
  background: color-mix(in srgb, var(--canvas) 42%, var(--surface));
}

.person-dossier-side .dossier-verdict-card {
  padding: 0 0 14px;
  border: 0;
  border-bottom: var(--hairline-w) solid rgba(122, 31, 42, 0.12);
  border-radius: 0;
  background: transparent;
}

.person-dossier-side .dossier-route-meter {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.person-dossier-side .dossier-route-meter span {
  min-width: 0;
  padding: 10px 0;
  border: 0;
  border-bottom: var(--hairline-w) solid rgba(122, 31, 42, 0.10);
  border-radius: 0;
  background: transparent;
}

.person-pulled-details {
  display: grid;
  gap: 10px;
  padding: 2px 0 4px;
  border-bottom: var(--hairline-w) solid rgba(122, 31, 42, 0.12);
}

.person-pulled-details-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.person-pulled-details-head .meta-label {
  color: var(--burgundy);
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
}

.person-pulled-details-head small {
  color: var(--ink-faint);
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
}

.person-pulled-details dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.person-pulled-details dl > div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-top: var(--hairline-w) solid rgba(122, 31, 42, 0.08);
}

.person-pulled-details dt {
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
}

.person-pulled-details dd {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.person-pulled-details dd strong,
.person-pulled-details dd a {
  color: var(--ink);
  font-weight: 650;
}

.person-pulled-details dd a {
  text-decoration-color: rgba(122, 31, 42, 0.24);
  text-underline-offset: 3px;
}

.person-detail-missing {
  color: var(--ink-faint);
}

.person-dossier-side .dossier-evidence-tape {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  border-bottom: 0;
  background: transparent;
}

.person-dossier-side .dossier-evidence-mark {
  padding: 9px 0;
  border: 0;
  border-bottom: var(--hairline-w) solid rgba(122, 31, 42, 0.10);
  border-radius: 0;
  background: transparent;
}

.person-dossier .detail-drawer {
  margin: 0;
  padding: 14px 24px 18px;
  border-top: var(--hairline-w) solid var(--hairline);
  background: var(--surface);
}

.review-overview-panel {
  min-height: 100%;
  padding: 24px;
  border: var(--hairline-w) solid var(--hairline);
  border-radius: 10px;
  background:
    linear-gradient(180deg, #fffaf4 0%, rgba(255, 250, 244, 0.42) 42%, var(--surface) 100%);
  box-shadow: 0 18px 48px rgba(55, 42, 30, 0.06);
}

.review-overview-hero {
  max-width: 720px;
  margin-bottom: 22px;
}

.review-overview-hero .eyebrow {
  margin-bottom: 8px;
  color: var(--burgundy);
  font-family: var(--font-mono-v4);
  font-size: 10px;
}

.review-overview-hero h3 {
  max-width: 12ch;
  margin: 0 0 10px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  font-weight: 650;
  line-height: 0.98;
}

.review-overview-hero p {
  max-width: 58ch;
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.98rem;
  line-height: 1.5;
}

.review-overview-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.review-overview-stats span,
.review-overview-card,
.review-overview-sources {
  border: var(--hairline-w) solid rgba(122, 31, 42, 0.10);
  border-radius: 9px;
  background: rgba(255, 250, 244, 0.68);
}

.review-overview-stats span {
  display: grid;
  gap: 2px;
  padding: 11px 12px;
}

.review-overview-stats strong {
  color: var(--burgundy);
  font-family: var(--font-serif);
  font-size: 1.55rem;
  line-height: 1;
}

.review-overview-stats small,
.review-overview-section-head small {
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
  text-transform: uppercase;
}

.review-overview-card {
  max-width: 760px;
  margin-bottom: 16px;
  padding: 14px 16px;
}

.review-overview-card p {
  max-width: 68ch;
  margin: 5px 0 0;
  color: var(--ink);
  line-height: 1.48;
}

.review-overview-sources {
  overflow: hidden;
}

.review-overview-section-head,
.review-overview-source-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: var(--hairline-w) solid rgba(122, 31, 42, 0.08);
}

.review-overview-source-row:last-child {
  border-bottom: 0;
}

.review-overview-source-row strong {
  color: var(--ink);
  font-weight: 720;
}

.review-overview-source-row span,
.review-overview-muted {
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 10px;
}

.review-overview-muted {
  margin: 0;
  padding: 14px;
}

#view-leads .mandate-dossier .lead-profile-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
  gap: 18px;
  align-items: start;
  padding: 20px 22px 18px;
  border-bottom: var(--hairline-w) solid var(--hairline);
  background: linear-gradient(180deg, #fffaf4 0%, var(--surface) 100%);
  box-shadow: none;
}

.person-dossier-avatar {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  font-size: 14px;
}

.mandate-dossier .lead-profile-identity-text .eyebrow {
  margin-bottom: 5px;
  color: var(--burgundy);
  font-family: var(--font-mono-v4);
  font-size: 10px;
  letter-spacing: 0;
}

#view-leads .mandate-dossier .lead-profile-identity-text h3 {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 2.2vw, 2.35rem);
  font-weight: 650;
  line-height: 1.03;
}

.mandate-dossier .detail-subtitle {
  color: var(--ink-muted);
}

.dossier-verdict-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: var(--hairline-w) solid rgba(122, 31, 42, 0.14);
  border-radius: 10px;
  background: color-mix(in srgb, var(--canvas) 58%, var(--surface));
}

.dossier-verdict-card strong {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.85rem;
  line-height: 1;
  font-weight: 700;
}

.dossier-verdict-card small {
  color: var(--ink-muted);
  line-height: 1.35;
}

#view-leads .lead-profile-status {
  display: grid;
  gap: 8px;
  justify-items: stretch;
}

#view-leads .lead-profile-status .property-field {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
}

#view-leads .lead-profile-status .property-label {
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
}

.dossier-review-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px 22px;
  border-bottom: var(--hairline-w) solid var(--hairline);
  background: color-mix(in srgb, var(--canvas) 48%, var(--surface));
}

.dossier-review-copy {
  min-width: 0;
  max-width: 760px;
}

.dossier-review-copy .meta-label {
  color: var(--burgundy);
  font-family: var(--font-mono-v4);
  font-size: 10px;
}

.dossier-review-copy strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 650;
  line-height: 1.18;
}

.dossier-review-copy p {
  max-width: 66ch;
  margin: 5px 0 0;
  color: var(--ink-muted);
  line-height: 1.45;
}

.dossier-route-meter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.dossier-route-meter span {
  display: grid;
  gap: 1px;
  min-width: 112px;
  padding: 8px 10px;
  border: var(--hairline-w) solid rgba(122, 31, 42, 0.10);
  border-radius: 8px;
  background: rgba(255, 250, 244, 0.70);
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
}

.dossier-route-meter strong {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1;
}

.dossier-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.dossier-actions .primary-button,
.dossier-actions .ghost-button,
.mandate-dossier .detail-actions .primary-button,
.mandate-dossier .detail-actions .ghost-button {
  min-height: 32px;
  border-radius: 8px;
  box-shadow: none;
}

.dossier-actions .primary-button,
.mandate-dossier .detail-actions .primary-button {
  border-color: var(--burgundy);
  background: var(--burgundy);
  color: var(--ink-on-burgundy);
}

/* "Open on board" was the only sage-FILLED button in the product. Its hex
   was on-palette; its weight was not. A filled button is the grammar for
   "this is the thing to do here", and this control only exists once the
   thing has already been done. See the craft block at the end of the file
   for the secondary treatment that replaced this fill. */
.dossier-actions .dossier-board-confirmed {
  border-color: color-mix(in srgb, var(--sage-dark) 42%, transparent);
}

.dossier-evidence-tape {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 22px;
  border-bottom: var(--hairline-w) solid var(--hairline);
  background: color-mix(in srgb, var(--surface) 74%, var(--canvas));
}

.dossier-evidence-mark {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: var(--hairline-w) solid rgba(122, 31, 42, 0.10);
  border-radius: 8px;
  background: rgba(255, 250, 244, 0.78);
}

.dossier-evidence-mark small {
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
  text-transform: uppercase;
}

.dossier-evidence-mark strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-leads .mandate-dossier .lifecycle-strip {
  display: none;
}

#view-leads .lead-detail-tabs {
  padding: 0 22px;
  border-bottom: var(--hairline-w) solid var(--hairline);
  background: var(--surface);
}

#view-leads .lead-detail-tab {
  min-height: 40px;
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

#view-leads .lead-detail-tab.active {
  color: var(--burgundy);
}

#view-leads .lead-detail-tab.active::after {
  background: var(--burgundy);
}

#view-leads .lead-detail-panel.active {
  padding: 16px 20px 20px;
}

#view-leads .lead-profile-toolbar {
  margin-bottom: 14px;
  padding: 0;
}

#view-leads .person-dossier .lead-profile-toolbar {
  display: none;
}

#view-leads .lead-profile-toolbar .priority-dial {
  max-width: 420px;
}

#view-leads .lead-profile-toolbar .priority-dial summary {
  min-height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 78%, var(--canvas));
}

#view-leads .lead-profile-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
  gap: 14px;
}

#view-leads .lead-profile-panel {
  padding: 0;
  border: 0;
  background: transparent;
}

#view-leads .lead-profile-panel h5,
#view-leads .primary-contact-strip h5 {
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 10px;
  text-transform: uppercase;
}

#view-leads .lead-profile-panel p {
  color: var(--ink);
  line-height: 1.5;
}

#view-leads .relationship-controls {
  margin-top: 16px;
  padding: 12px;
  border: var(--hairline-w) solid var(--hairline);
  background: color-mix(in srgb, var(--canvas) 54%, var(--surface));
}

#view-leads .person-dossier .relationship-controls {
  display: none;
}

#view-leads .person-dossier .action-panel .detail-actions {
  display: none;
}

#view-leads .relationship-controls .meta-label {
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
}

#view-leads .relationship-controls select,
#view-leads .relationship-controls input,
#view-leads .detail-drawer textarea {
  border: var(--hairline-w) solid var(--hairline-default);
  border-radius: var(--radius-input);
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
}

#view-leads .detail-drawer {
  margin-top: 12px;
  border-top: var(--hairline-w) solid var(--hairline);
}

#view-leads .detail-drawer summary {
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 10px;
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  #view-leads .lead-review-desk {
    grid-template-columns: 1fr;
  }
  #view-leads .lead-review-desk.is-person-open {
    grid-template-columns: 1fr;
  }
  #view-leads .lead-list-pane {
    border-right: 0;
    border-bottom: var(--hairline-w) solid var(--hairline);
  }
  #view-leads .lead-detail {
    position: static;
  }
  #view-leads .lead-review-desk.is-person-open .lead-list-pane,
  #view-leads .lead-review-desk.is-person-open .detail-card.lead-profile.mandate-dossier {
    border-radius: 8px;
  }
  #view-leads .lead-review-desk.is-person-open .detail-card.lead-profile.mandate-dossier {
    border-left: var(--hairline-w) solid var(--hairline);
  }
  #view-leads .lead-review-desk.is-person-open .lead-row-verdict { display: inline-flex; }
  #view-leads .lead-review-desk.is-person-open .review-decision-likelihood { display: grid; }
  #view-leads .lead-review-desk.is-person-open .review-candidate-reason { display: block; }
  #view-leads .lead-review-desk.is-person-open .review-candidate-facts { display: flex; }
  #view-leads .lead-row.review-candidate-row.active {
    margin-right: 0;
    padding-right: 10px;
    border-right-color: var(--burgundy);
  }
  #view-leads .lead-row.review-candidate-row.active::after {
    display: none;
  }
}

@media (max-width: 860px) {
  .run-review-summary,
  .dossier-evidence-tape,
  .review-overview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .person-dossier-shell {
    grid-template-columns: 1fr;
  }
  .person-dossier-side {
    border-top: var(--hairline-w) solid rgba(122, 31, 42, 0.12);
    border-left: 0;
  }
  .person-context-grid,
  .person-outreach-head,
  .person-outreach-grid {
    grid-template-columns: 1fr;
  }
  .dossier-review-band,
  #view-leads .mandate-dossier .lead-profile-head {
    grid-template-columns: 1fr;
  }
  .dossier-route-meter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .run-review-summary,
  .review-lane-strip,
  .dossier-route-meter,
  .dossier-evidence-tape,
  .review-overview-stats {
    grid-template-columns: 1fr;
  }
  #view-leads .lead-row-v2 > .lead-row-open.review-candidate-open {
    grid-template-columns: 1fr;
  }
  /* (The .review-rank line-height override that lived here is gone — the
     single .review-rank rule no longer reserves an avatar-sized line.) */
  #view-leads .lead-row-v2 .lead-row-line-identity {
    flex-wrap: wrap;
  }
  .person-dossier-main,
  .person-dossier-side,
  .person-dossier .detail-drawer {
    padding-right: 16px;
    padding-left: 16px;
  }
  .pipeline-heading-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =================================================================
   FE-062 — v3 home design. Editorial / capital-markets aesthetic.
   Implements the spec at `design/mandate-design-system.md` and the
   runnable reference at `design/mandate-home-reference.html`.
   Scoped to `.home-v3` so it does not bleed into other views.

   PHASE 1 — Tokens renamed to canonical names per spec §2 (was
   `--m3-*` prefix). The `.m3-*` class names are kept for now; the
   spec explicitly allows the production codebase to keep its own
   class naming.
   ================================================================= */

/* Tokens go on `:root` so they're addressable from anywhere in the
   app. The home view shouldn't be the only thing that knows what
   --burgundy is. */
:root {
  /* Surfaces */
  --canvas:            #F4F0E8;
  --surface:           #FBF7EE;
  --frame:             #26221C;
  --sidebar-bg:        #15141A;
  --ticker-bg:         #1F1B17;

  /* Ink */
  --ink:               #1F1B17;
  --ink-muted:         #6B6259;
  --ink-faint:         #948A7E;
  --ink-on-burgundy:   #FBF7EE;
  --ink-on-sage:       #4A6651;

  /* Burgundy (primary accent) */
  --burgundy:          #7A1F2A;
  --burgundy-bright:   #A8434C;
  --burgundy-dark:     #5A1620;

  /* Sage (secondary accent, positive momentum only) */
  --sage:              #6B8773;
  --sage-dark:         #4A6651;
  --sage-tint:         rgba(107, 135, 115, 0.14);
  --sage-tint-strong:  rgba(107, 135, 115, 0.20);
  --sage-pulse:        rgba(107, 135, 115, 0.22);

  /* Hairlines (all burgundy at varying alpha — never grey) */
  --hairline-soft:     rgba(122, 31, 42, 0.06);
  --hairline:          rgba(122, 31, 42, 0.10);
  --hairline-default:  rgba(122, 31, 42, 0.14);
  --hairline-strong:   rgba(122, 31, 42, 0.20);

  /* Hover tints */
  --hover-tint:        rgba(122, 31, 42, 0.045);
  --col-hover-tint:    rgba(122, 31, 42, 0.028);

  /* Ticker chrome */
  --ticker-fg:         #E8DFC9;
  --ticker-fg-muted:   #A89F8B;
  --ticker-sep:        #5C544A;

  /* Sidebar chrome */
  --sidebar-ink:       #6B6259;
  --sidebar-ink-on:    #F4F0E8;
  --sidebar-ink-hover: #D6CFC0;

  /* Fonts */
  --font-serif:        "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-sans-v4:      "Inter", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono-v4:      "Geist Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* Radii */
  --radius-card:       10px;
  --radius-input:      8px;
  --radius-pill:       11px;
  --radius-mini:       3px;

  /* Layout */
  --hairline-w:        0.5px;
  --canvas-pad-x:      22px;
  --card-pad-x:        18px;
  --card-pad-y:        14px;
  --row-pad-y:         12px;
  --section-gap:       14px;
  --sidebar-w:         56px;
  --avatar-md:         30px;
  --avatar-sm:         24px;
  --avatar-ring:       1.5px;

  /* Motion */
  --t-fast:            150ms;
  --t-base:            180ms;
  --t-medium:          240ms;
  --t-slow:            300ms;
  --ease:              cubic-bezier(0.4, 0, 0.2, 1);
  --ease-pop:          cubic-bezier(0.2, 0.7, 0.3, 1.4);
  --tick-loop:         45s;
  --pulse-loop:        2.4s;
  --overdue-loop:      2.6s;
}

.home-v3 {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  padding: 0 var(--canvas-pad-x);
}

/* Warmer paper for the workspace canvas on the home tab. The canvas
   loses its own padding because v3 controls its own indents via
   `.home-v3` (greeting/cmd/cards) and bleeds the ticker out via
   negative margin. */
body[data-active-tab="home"] .workspace,
body[data-home-version="v3"] .workspace {
  background: var(--canvas) !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* PHASE 2 — Canvas vertical rhythm per spec §3.
   top chrome (sticky-bar) padding 18px top, 14px bottom; butts
   against the ticker (no extra gap).
   ticker → headline 18px (via .m3-tk margin-bottom).
   headline → cmd 12px (already on .m3-greeting margin-bottom).
   cmd → card 14px (already on .m3-cmd margin-bottom).
   card → card 14px (already on .m3-card margin-bottom). */
body:is([data-home-version="v3"][data-active-tab="home"], [data-discover-version="v2"][data-active-tab="discover"]) .sticky-bar {
  padding: 18px var(--canvas-pad-x) 14px;
  margin: 0;
  min-height: 0;
  background: var(--canvas);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
}

.m3-mono {
  font-family: var(--font-mono-v4);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ---------- Greeting headline ---------- */
.home-v3 .m3-greeting {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-weight: 500;
}

/* FE-063 — Greeting demoted to section intro: 20px not 24, with 18px
   of air above (was the page hero) and a smaller bottom margin since
   the queue card sits immediately below. */
.home-v3 .m3-greeting.m3-greeting-intro {
  font-size: 20px;
  margin: 18px 0 10px;
}

.home-v3 .m3-greeting .m3-greeting-accent {
  color: var(--burgundy);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease);
}

.home-v3 .m3-greeting .m3-greeting-accent:hover,
.home-v3 .m3-greeting .m3-greeting-accent:focus-visible {
  border-bottom-color: var(--burgundy);
  outline: none;
}

/* ---------- Command bar ---------- */
.home-v3 .m3-cmd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  margin-bottom: var(--section-gap);
  background: var(--surface);
  border: var(--hairline-w) solid var(--hairline-strong);
  border-radius: var(--radius-input);
  cursor: text;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.home-v3 .m3-cmd:hover {
  border-color: rgba(122, 31, 42, 0.32);
  background: #FCF9F1;
}

.home-v3 .m3-cmd:focus-within {
  border-color: var(--burgundy);
  box-shadow: 0 0 0 3px rgba(122, 31, 42, 0.10);
}

.home-v3 .m3-cmd svg {
  flex-shrink: 0;
  color: var(--ink-faint);
}

.home-v3 .m3-cmd input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  min-height: 0;
  box-shadow: none;
}

.home-v3 .m3-cmd input::placeholder {
  color: var(--ink-faint);
}

.home-v3 .m3-cmd kbd {
  flex-shrink: 0;
  padding: 2px 6px;
  border: var(--hairline-w) solid #D6CFC0;
  border-radius: var(--radius-mini);
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 11px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ---------- Card chrome ---------- */
.home-v3 .m3-card {
  background: var(--surface);
  border: var(--hairline-w) solid var(--hairline-default);
  border-radius: var(--radius-card);
  margin-bottom: var(--section-gap);
  overflow: hidden;
}

.home-v3 .m3-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px 11px;
  border-bottom: var(--hairline-w) solid var(--hairline);
}

.home-v3 .m3-card-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.home-v3 .m3-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--burgundy);
  color: var(--ink-on-burgundy);
  font-size: 11px;
  font-weight: 500;
}

.home-v3 .m3-card-head-link {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--ink-muted);
  text-decoration: none;
}

.home-v3 .m3-card-head-link:hover {
  color: var(--burgundy);
}

/* ---------- Today's queue (dense rows) ---------- */
.home-v3 .m3-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--row-pad-y) 18px;
  border: 0;
  border-bottom: var(--hairline-w) solid var(--hairline-soft);
  background: transparent;
  text-align: left;
  width: 100%;
  position: relative;
  cursor: pointer;
  transition: background var(--t-base) var(--ease);
}

.home-v3 .m3-row:last-child { border-bottom: 0; }

.home-v3 .m3-row:hover {
  background: var(--hover-tint);
}

/* Phase 5 — burgundy stripe slides in from the left on hover, per
   spec §4.5. Width animates 0 → 2.5px over t-base. */
.home-v3 .m3-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--burgundy);
  transition: width var(--t-base) var(--ease);
}

.home-v3 .m3-row:hover::before,
.home-v3 .m3-row:focus-visible::before {
  width: 2.5px;
}

.home-v3 .m3-row:focus-visible {
  outline: 1px solid var(--burgundy);
  outline-offset: 4px;
  background: var(--hover-tint);
}

.home-v3 .m3-av {
  flex-shrink: 0;
  width: var(--avatar-md);
  height: var(--avatar-md);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ink-on-burgundy);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.home-v3 .m3-av.m3-av-accent { background: var(--burgundy); }

.home-v3 .m3-row-body {
  flex: 1;
  min-width: 0;
}

.home-v3 .m3-row-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.home-v3 .m3-row-sub {
  font-size: 11px;
  color: var(--ink-muted);
}

.home-v3 .m3-act {
  flex-shrink: 0;
  width: 158px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-v3 .m3-act-lbl {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}

.home-v3 .m3-act-lbl svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--ink-muted);
}

.home-v3 .m3-act.m3-act-overdue .m3-act-lbl svg { color: var(--burgundy); }

.home-v3 .m3-act-sub {
  font-size: 10px;
  color: var(--ink-faint);
  font-family: var(--font-mono-v4);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.home-v3 .m3-due {
  flex-shrink: 0;
  width: 86px;
  text-align: right;
  font-family: var(--font-mono-v4);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink);
}

.home-v3 .m3-due.m3-due-overdue {
  color: var(--burgundy);
  font-weight: 500;
  animation: m3-overdue var(--overdue-loop) ease-in-out infinite;
}

.home-v3 .m3-due.m3-due-soft { color: var(--ink-muted); }

@keyframes m3-overdue {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ---------- Live pipeline: funnel + kanban ---------- */
.home-v3 .m3-pipeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px 11px;
  border-bottom: var(--hairline-w) solid var(--hairline);
}

.home-v3 .m3-pipeline-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.home-v3 .m3-spark {
  display: block;
  flex-shrink: 0;
}

.home-v3 .m3-delta-week {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 9px;
  background: var(--sage-tint);
  color: var(--sage-dark);
  font-family: var(--font-mono-v4);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
}

.home-v3 .m3-delta-week svg { width: 11px; height: 11px; }

.home-v3 .m3-funnel-wrap {
  padding: 14px 18px 4px;
}

.home-v3 .m3-funnel { display: block; width: 100%; }

.home-v3 .m3-kanban {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: var(--hairline-w) solid var(--hairline-soft);
}

.home-v3 .m3-col {
  min-width: 0;
  padding: 14px 10px;
  border-right: var(--hairline-w) solid var(--hairline-soft);
  transition: background var(--t-base) var(--ease);
  cursor: pointer;
}

.home-v3 .m3-col:last-child { border-right: 0; }

.home-v3 .m3-col:hover {
  background: var(--col-hover-tint);
}

/* Phase 6 — funnel segments fade to burgundy-dark on hover. */
.home-v3 .m3-funnel .m3-fseg {
  transition: fill var(--t-fast) var(--ease);
  cursor: pointer;
}

.home-v3 .m3-funnel .m3-fseg:hover {
  fill: var(--burgundy-dark);
}

.home-v3 .m3-stage {
  margin-bottom: 8px;
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.home-v3 .m3-count {
  font-family: var(--font-mono-v4);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  color: var(--ink);
}

.home-v3 .m3-amount {
  margin-top: 3px;
  font-family: var(--font-mono-v4);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--ink-faint);
}

.home-v3 .m3-col.m3-col-won .m3-count { color: var(--sage); }
.home-v3 .m3-col.m3-col-won .m3-amount { color: var(--sage-dark); }

.home-v3 .m3-stack {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.home-v3 .m3-stack > .m3-mini + .m3-mini { margin-left: -8px; }

.home-v3 .m3-mini {
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: var(--avatar-ring) solid var(--surface);
  background: var(--ink);
  color: var(--ink-on-burgundy);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: transform var(--t-base) var(--ease-pop);
}

.home-v3 .m3-mini:hover {
  transform: scale(1.22);
  z-index: 2;
}

.home-v3 .m3-col.m3-col-won .m3-mini { background: var(--sage); }

.home-v3 .m3-stack-more {
  margin-left: 6px;
  font-family: var(--font-mono-v4);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--ink-muted);
}

.home-v3 .m3-col.m3-col-won .m3-stack-more { color: var(--sage-dark); }

.home-v3 .m3-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 8px;
  padding: 2px 6px;
  border-radius: 9px;
  font-family: var(--font-mono-v4);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 500;
}

.home-v3 .m3-delta.m3-delta-up {
  background: var(--sage-tint);
  color: var(--sage-dark);
}

.home-v3 .m3-delta.m3-delta-flat {
  background: rgba(148, 138, 126, 0.18);
  color: var(--ink-muted);
}

.home-v3 .m3-delta.m3-delta-won {
  background: var(--sage-tint-strong);
  color: var(--sage-dark);
}

.home-v3 .m3-delta svg { width: 10px; height: 10px; }

.home-v3 .m3-stats {
  display: flex;
  gap: 24px;
  padding: 11px 18px 13px;
  border-top: var(--hairline-w) solid rgba(122, 31, 42, 0.08);
  font-size: 11px;
  color: var(--ink-muted);
}

.home-v3 .m3-stats > div { display: flex; align-items: baseline; gap: 6px; }

.home-v3 .m3-stat-value {
  font-family: var(--font-mono-v4);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

/* =================================================================
   FE-062 Phase 8 — Animations module (spec §5).

   Three loops run constantly (pulse, ticker-scroll, overdue-pulse).
   Three more (flipboard-in/out, avatar-enter, won-pulse) only fire
   when underlying data changes; the keyframes are defined here so
   the data-binding layer can attach them later without re-touching
   CSS. The reduce-motion block at the bottom kills the decorative
   loops but keeps the ticker scroll (slowed to 90s) because it's
   content, not decoration.
   ================================================================= */

@keyframes m3-flipboard-out {
  0%   { transform: translateY(0);    opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; }
}

@keyframes m3-flipboard-in {
  0%   { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

@keyframes m3-avatar-enter {
  0%   { transform: translateY(8px) scale(0.85); opacity: 0; }
  100% { transform: translateY(0)    scale(1);    opacity: 1; }
}

@keyframes m3-won-pulse {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.15); }
}

/* Flipboard counter helper. Apply `.is-flipping` to the parent and
   the JS swaps the inner text node from a span carrying
   .m3-flipboard-out to one carrying .m3-flipboard-in. Parent needs
   `overflow: hidden; position: relative;`. */
.home-v3 .m3-flipboard {
  display: inline-block;
  overflow: hidden;
  position: relative;
  line-height: 1;
}

.home-v3 .m3-flipboard-out { animation: m3-flipboard-out 200ms ease forwards; }
.home-v3 .m3-flipboard-in  { animation: m3-flipboard-in  200ms ease forwards; }

.home-v3 .m3-mini.is-new {
  animation: m3-avatar-enter 400ms var(--ease-pop) forwards;
}

.home-v3 .m3-col.m3-col-won .m3-delta.is-celebrating {
  animation: m3-won-pulse 600ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  :is(.home-v3, .discover-v2) .m3-tk-dot,
  .home-v3 .m3-due.m3-due-overdue {
    animation: none;
  }
  :is(.home-v3, .discover-v2) .m3-tk-track {
    animation-duration: 90s;
  }
  .home-v3 .m3-mini,
  .home-v3 .m3-row,
  .home-v3 .m3-cmd,
  .home-v3 .m3-row::before,
  .home-v3 .m3-funnel .m3-fseg {
    transition: none;
  }
}

/* Hide every legacy home section while v3 is mounted. The legacy DOM
   stays in the markup so JS hooks that target #homeFocusList etc.
   do not throw. */
body[data-home-version="v3"] .home-onboarding,
body[data-home-version="v3"] .home-v2-hero,
body[data-home-version="v3"] .home-jobs-strip,
body[data-home-version="v3"] .home-people-launchpad,
body[data-home-version="v3"] .home-connectors,
body[data-home-version="v3"] .home-v2-grid,
body[data-home-version="v3"] .kpi-grid,
body[data-home-version="v3"] .intelligence-strip,
body[data-home-version="v3"] .home-stat-strip {
  display: none !important;
}

/* When v3 is mounted, swap the sticky-bar's M MANDATE wordmark for
   the "CAPITAL MARKETS / Conor" brand label. */
body:is([data-home-version="v3"][data-active-tab="home"], [data-discover-version="v2"][data-active-tab="discover"]) .sticky-bar-wordmark {
  display: none !important;
}

body:is([data-home-version="v3"][data-active-tab="home"], [data-discover-version="v2"][data-active-tab="discover"]) .sticky-bar-brand-label {
  display: flex !important;
  align-items: baseline;
  gap: 10px;
}

.sticky-bar-brand-label { display: none; }

/* Phase 3 — bare top-chrome icons. Spec §4.1: settings + bell are
   plain <i> glyphs at 15px in --ink-muted, no button chrome. */
body:is([data-home-version="v3"][data-active-tab="home"], [data-discover-version="v2"][data-active-tab="discover"]) .sticky-bar-icon,
body:is([data-home-version="v3"][data-active-tab="home"], [data-discover-version="v2"][data-active-tab="discover"]) .notif-bell {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink-muted) !important;
}

body:is([data-home-version="v3"][data-active-tab="home"], [data-discover-version="v2"][data-active-tab="discover"]) .sticky-bar-icon svg,
body:is([data-home-version="v3"][data-active-tab="home"], [data-discover-version="v2"][data-active-tab="discover"]) .notif-bell svg {
  width: 17px;
  height: 17px;
}

body:is([data-home-version="v3"][data-active-tab="home"], [data-discover-version="v2"][data-active-tab="discover"]) .sticky-bar-icon:hover,
body:is([data-home-version="v3"][data-active-tab="home"], [data-discover-version="v2"][data-active-tab="discover"]) .notif-bell:hover {
  color: var(--ink) !important;
  background: transparent !important;
  border-color: transparent !important;
}

body:is([data-home-version="v3"][data-active-tab="home"], [data-discover-version="v2"][data-active-tab="discover"]) .sticky-bar-right {
  gap: 14px;
}

/* FE-063 — Command bar wrapper in the chrome header. flex: 1 takes
   all slack between brand-label and icon cluster; inner cmd is a
   320px pill centred via justify-content. Hidden on non-home tabs
   (the workspace switcher should not look like a search field
   when the user is deep in Leads / Pipeline). */
.sticky-bar-cmd-wrap {
  display: none;
}

/* FE-038: the compact icon-button Cmd-K trigger shows on tabs where the
   full .sticky-bar-cmd input isn't rendered (everything except Home v3
   and Discover v2). Hidden when the full bar IS visible, so we don't
   double up the affordance. */
.sticky-bar-cmd-icon {
  display: inline-flex;
}

body:is([data-home-version="v3"][data-active-tab="home"], [data-discover-version="v2"][data-active-tab="discover"]) .sticky-bar-cmd-icon {
  display: none;
}

body:is([data-home-version="v3"][data-active-tab="home"], [data-discover-version="v2"][data-active-tab="discover"]) .sticky-bar-cmd-wrap {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
}

body:is([data-home-version="v3"][data-active-tab="home"], [data-discover-version="v2"][data-active-tab="discover"]) .sticky-bar-cmd {
  display: flex;
  align-items: center;
  flex: 0 1 320px;
  width: 320px;
  max-width: 320px;
  height: 32px;
  margin: 0;
  padding: 0 12px;
  gap: 8px;
  background: var(--surface);
  border: 0.5px solid var(--hairline-strong);
  border-radius: var(--radius-input);
  cursor: text;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

body:is([data-home-version="v3"][data-active-tab="home"], [data-discover-version="v2"][data-active-tab="discover"]) .sticky-bar-cmd:hover {
  border-color: rgba(122, 31, 42, 0.32);
  background: #FCF9F1;
}

body:is([data-home-version="v3"][data-active-tab="home"], [data-discover-version="v2"][data-active-tab="discover"]) .sticky-bar-cmd:focus-within {
  border-color: var(--burgundy);
  box-shadow: 0 0 0 3px rgba(122, 31, 42, 0.10);
}

body:is([data-home-version="v3"][data-active-tab="home"], [data-discover-version="v2"][data-active-tab="discover"]) .sticky-bar-cmd svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--ink-faint);
}

body:is([data-home-version="v3"][data-active-tab="home"], [data-discover-version="v2"][data-active-tab="discover"]) .sticky-bar-cmd input {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 12.5px;
  min-height: 0 !important;
  height: 100%;
  box-shadow: none;
  text-overflow: ellipsis;
}

body:is([data-home-version="v3"][data-active-tab="home"], [data-discover-version="v2"][data-active-tab="discover"]) .sticky-bar-cmd input::placeholder {
  color: var(--ink-faint);
}

body:is([data-home-version="v3"][data-active-tab="home"], [data-discover-version="v2"][data-active-tab="discover"]) .sticky-bar-cmd kbd {
  flex-shrink: 0;
  padding: 1px 5px;
  border: 0.5px solid #D6CFC0;
  border-radius: var(--radius-mini);
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 10.5px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

/* =================================================================
   FE-062 Phase 7 — Narrow icon-only sidebar (spec §4.7). Applied
   app-wide whenever body[data-home-version="v3"] is set, not just
   on the home view, so the editorial chrome is consistent across
   Discover / Leads / Pipeline / etc.
   ================================================================= */

body[data-home-version="v3"] .app-shell,
body[data-home-version="v3"] .app-shell:not(.hidden) {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  padding-left: var(--sidebar-w) !important;
}

body[data-home-version="v3"] .sidebar {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  height: 100vh !important;
}

body[data-home-version="v3"] .sidebar {
  width: var(--sidebar-w) !important;
  min-width: var(--sidebar-w) !important;
  max-width: var(--sidebar-w) !important;
  padding: 14px 0 !important;
  gap: 2px !important;
  align-items: center;
  background: var(--sidebar-bg) !important;
  border-right: 0 !important;
  color: var(--sidebar-ink) !important;
  overflow: hidden;
}

/* Brand block becomes a single serif "M" centred at top. */
body[data-home-version="v3"] .sidebar .brand-block {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
  padding: 0;
  margin-bottom: 14px;
  gap: 0;
}

body[data-home-version="v3"] .sidebar .brand-block-text {
  display: none;
}

body[data-home-version="v3"] .sidebar .brand-mark {
  width: auto !important;
  height: auto !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  line-height: 1;
}

body[data-home-version="v3"] .sidebar .brand-mark-svg {
  display: none;
}

body[data-home-version="v3"] .sidebar .brand-mark-letter {
  display: block;
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  color: var(--burgundy-bright);
}

/* By default the existing CSS hides .brand-mark-letter (it only
   shows when the v3 sidebar is mounted). Keep the SVG variant the
   default for any non-v3 fallback. */
.brand-mark-letter { display: none; }

/* Nav list. */
body[data-home-version="v3"] .sidebar .nav-tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 0;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Group labels are hidden in narrow mode but kept in DOM for AT. */
body[data-home-version="v3"] .sidebar .nav-section-label {
  display: none;
}

/* Each nav tab becomes an icon-only square. */
body[data-home-version="v3"] .sidebar .nav-tab {
  position: relative;
  width: 100%;
  height: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sidebar-ink);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
  font-size: 17px;
}

body[data-home-version="v3"] .sidebar .nav-tab .nav-tab-icon {
  width: 20px;
  height: 20px;
  display: block;
}

body[data-home-version="v3"] .sidebar .nav-tab .nav-tab-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body[data-home-version="v3"] .sidebar .nav-tab:hover {
  color: var(--sidebar-ink-hover);
  background: transparent;
}

body[data-home-version="v3"] .sidebar .nav-tab.active {
  color: var(--sidebar-ink-on);
  background: transparent;
}

body[data-home-version="v3"] .sidebar .nav-tab.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 2.5px;
  background: var(--burgundy-bright);
  border-radius: 0;
}

/* Footer collapses to just a circular avatar button. The full
   user-info string remains in DOM for screen readers / future
   menu rendering but is visually hidden. */
body[data-home-version="v3"] .sidebar .sidebar-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  margin: auto 0 8px;
  width: 100%;
}

body[data-home-version="v3"] .sidebar .sidebar-footer-text {
  display: none;
}

body[data-home-version="v3"] .sidebar .sidebar-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--sidebar-ink-on);
  font-family: var(--font-serif);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}

body[data-home-version="v3"] .sidebar .sidebar-avatar:hover {
  background: rgba(255, 255, 255, 0.16);
}

.sticky-bar-brand-label .m3-brand-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--burgundy);
  font-weight: 500;
  text-transform: uppercase;
}

.sticky-bar-brand-label .m3-brand-slash {
  color: var(--ink-muted);
  font-size: 14px;
}

.sticky-bar-brand-label .m3-brand-owner {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink-muted);
}

/* =================================================================
   DISCOVER v2 — Phase 1 (Page shell)
   Spec: design/mandate-discover-spec.md §1, §7.1
   Reference: design/mandate-discover-reference.html
   ================================================================= */

body[data-discover-version="v2"][data-active-tab="discover"] .workspace {
  background: var(--canvas);
  padding: 0;
  margin: 0;
  max-width: none;
  width: 100%;
}

body[data-discover-version="v2"] #view-discover > .source-workbench,
body[data-discover-version="v2"] #view-discover > .discovery-results,
body[data-discover-version="v2"] #view-discover > .discover-recent,
body[data-discover-version="v2"] #view-discover > .discover-live-progress {
  display: none !important;
}

body[data-discover-version="v2"] .discover-v2 {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  padding: 18px var(--canvas-pad-x) 22px;
}

body:not([data-discover-version="v2"]) .discover-v2 { display: none; }

.discover-v2-h1 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.discover-v2-subtitle {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0 0 16px;
  max-width: 640px;
}

.discover-v2-mode-row:empty,
.discover-v2-config-card:empty,
.discover-v2-recent-card:empty {
  display: none;
}

body[data-discover-version="v2"][data-active-tab="discover"] .sticky-bar-brand-label {
  display: flex;
}

/* =================================================================
   DISCOVER v2 — Phases 2-6
   Primitives + page body + interactions + scan-in-progress + polish.
   Spec: design/mandate-discover-spec.md §2-§8.
   ================================================================= */

/* ---- Mode card row (§3.2) ----------------------------------- */

.dv2-mode-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.dv2-mode-card {
  flex: 1;
  position: relative;
  background: var(--surface);
  border: 0.5px solid var(--hairline-default);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--ink);
  transition: border-color 150ms, background 150ms, box-shadow 150ms;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dv2-mode-card:hover:not(.is-disabled):not(.is-active) {
  border-color: rgba(122, 31, 42, 0.32);
  background: #FCF9F1;
}

.dv2-mode-card.is-active {
  border-color: var(--burgundy);
  background: #FCF9F1;
  box-shadow: 0 0 0 1px var(--burgundy);
}

.dv2-mode-card.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dv2-mode-icon-tile {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(122, 31, 42, 0.08);
  color: var(--burgundy);
  margin-bottom: 10px;
  transition: background 150ms, color 150ms;
}

.dv2-mode-card.is-active .dv2-mode-icon-tile {
  background: var(--burgundy);
  color: var(--surface);
}

.dv2-mode-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dv2-mode-desc {
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.45;
  margin-top: 3px;
}

.dv2-chip-soon {
  font-size: 9px;
  letter-spacing: 0.10em;
  color: var(--ink-faint);
  background: rgba(148, 138, 126, 0.18);
  padding: 1px 6px;
  border-radius: 9px;
  font-weight: 500;
  text-transform: uppercase;
}

/* ---- Runtime slot (config <-> progress swap) ---------------- */

.dv2-runtime-slot {
  position: relative;
  margin-bottom: 18px;
}

.dv2-runtime-slot > [hidden] { display: none; }

/* ---- Configuration card (§3.3) ------------------------------ */

.dv2-config {
  background: var(--surface);
  border: 0.5px solid var(--hairline-default);
  border-radius: 10px;
  padding: 18px 20px 20px;
}

.dv2-config[data-dv2-swap="out"] {
  animation: dv2-form-out 220ms ease-in forwards;
}

.dv2-config-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  margin-bottom: 16px;
}

.dv2-config-col { min-width: 0; }

.dv2-label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 4px;
}

.dv2-helper {
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 6px 0 0 2px;
}

.dv2-config-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 0.5px solid rgba(122, 31, 42, 0.08);
}

.dv2-config-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dv2-runtime {
  font-family: var(--font-mono-v4);
  font-size: 11px;
  color: var(--ink-muted);
}

.dv2-link {
  background: none;
  border: none;
  color: var(--ink-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 150ms;
}

.dv2-link:hover { color: var(--burgundy); }

.dv2-link-chevron {
  display: inline-flex;
  transition: transform 180ms;
}

.dv2-link[aria-expanded="true"] .dv2-link-chevron {
  transform: rotate(180deg);
}

/* ---- Select / dropdown primitive (§2.1, §3.3.1, §3.3.2) ----- */

.dv2-select {
  position: relative;
}

.dv2-select-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--surface);
  border: 0.5px solid var(--hairline-strong);
  border-radius: 8px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 150ms, outline-color 150ms;
}

.dv2-select-trigger:hover {
  border-color: rgba(122, 31, 42, 0.35);
}

.dv2-select[data-dv2-open="true"] .dv2-select-trigger {
  border-color: var(--burgundy);
  outline: 1.5px solid rgba(122, 31, 42, 0.18);
  outline-offset: 1px;
}

.dv2-select-icon {
  color: var(--burgundy);
  display: inline-flex;
  flex-shrink: 0;
}

.dv2-select-value {
  flex: 1;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dv2-select-chevron {
  color: var(--ink-faint);
  display: inline-flex;
  flex-shrink: 0;
  transition: transform 180ms;
}

.dv2-select[data-dv2-open="true"] .dv2-select-chevron {
  transform: rotate(180deg);
}

.dv2-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 0.5px solid rgba(122, 31, 42, 0.18);
  border-radius: 8px;
  overflow: hidden;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(31, 27, 23, 0.06);
  display: none;
}

.dv2-select[data-dv2-open="true"] .dv2-dropdown {
  display: block;
  animation: dv2-dropdown-in 140ms ease-out;
}

.dv2-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 0.5px solid rgba(122, 31, 42, 0.06);
  font-size: 12px;
  cursor: pointer;
  transition: background 150ms;
  color: var(--ink);
}

.dv2-dropdown-item:last-child { border-bottom: none; }

.dv2-dropdown-item:hover { background: rgba(122, 31, 42, 0.045); }

.dv2-dropdown-item[aria-selected="true"] {
  background: rgba(122, 31, 42, 0.06);
}

.dv2-dropdown-check {
  width: 16px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  color: transparent;
  flex-shrink: 0;
}

.dv2-dropdown-item[aria-selected="true"] .dv2-dropdown-check {
  color: var(--burgundy);
}

.dv2-dropdown-label {
  flex: 1;
  color: var(--ink);
}

.dv2-dropdown-meta {
  font-family: var(--font-mono-v4);
  font-size: 10px;
  color: var(--ink-muted);
}

/* ---- Advanced expansion (§3.3.3) ---------------------------- */

.dv2-config-expansion {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(122, 31, 42, 0.025);
  border: 0.5px solid var(--hairline-default);
  border-radius: 10px;
}

.dv2-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 0.5px solid rgba(122, 31, 42, 0.06);
  gap: 14px;
}

.dv2-setting-row:last-child { border-bottom: none; }

.dv2-setting-text { display: flex; flex-direction: column; gap: 1px; }

.dv2-setting-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}

.dv2-setting-desc {
  font-size: 10px;
  color: var(--ink-muted);
}

.dv2-chip-stepper {
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  background: rgba(122, 31, 42, 0.08);
  border: none;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 150ms;
}

.dv2-chip-stepper:hover { background: rgba(122, 31, 42, 0.14); }

.dv2-toggle {
  width: 28px;
  height: 16px;
  background: #D6CFC0;
  border: none;
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 150ms;
}

.dv2-toggle[data-dv2-toggle-state="on"] { background: var(--burgundy); }

.dv2-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  transition: left 150ms;
}

.dv2-toggle[data-dv2-toggle-state="on"] .dv2-toggle-knob {
  left: calc(100% - 14px);
}

/* ---- Primary / secondary buttons ---------------------------- */

.dv2-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  background: var(--burgundy);
  color: var(--ink-on-burgundy);
  border: none;
  cursor: pointer;
  transition: background 150ms;
}

.dv2-primary:hover { background: var(--burgundy-dark); }

.dv2-primary[disabled],
.dv2-primary[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

.dv2-primary-icon { display: inline-flex; }

.dv2-secondary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  background: transparent;
  color: var(--ink);
  border: 0.5px solid var(--hairline-strong);
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}

.dv2-secondary:hover {
  background: var(--hover-tint);
  border-color: rgba(122, 31, 42, 0.32);
}

.dv2-secondary-destruct {
  color: var(--burgundy);
  border-color: rgba(122, 31, 42, 0.22);
}

.dv2-secondary-destruct:hover {
  background: rgba(122, 31, 42, 0.04);
  border-color: var(--burgundy);
}

/* ---- Progress card (§2.3, §5) ------------------------------- */

.dv2-progress {
  background: var(--surface);
  border: 0.5px solid var(--hairline-default);
  border-radius: 10px;
  padding: 16px;
}

.dv2-progress[data-dv2-swap="in"] {
  animation: dv2-progress-in 280ms ease-out;
}

.dv2-progress-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.dv2-progress-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 3px var(--sage-pulse);
  flex-shrink: 0;
  animation: dv2-pulse 2.4s ease-in-out infinite;
}

.dv2-progress[data-dv2-state="paused"] .dv2-progress-dot,
.dv2-progress[data-dv2-state="complete"] .dv2-progress-dot {
  animation: none;
  background: var(--burgundy);
}

.dv2-progress[data-dv2-state="complete"] .dv2-progress-dot {
  background: var(--sage);
}

.dv2-progress-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--sage);
  font-weight: 500;
  text-transform: uppercase;
}

.dv2-progress[data-dv2-state="paused"] .dv2-progress-label {
  color: var(--burgundy);
}

.dv2-progress[data-dv2-state="no-matches"] .dv2-progress-label,
.dv2-progress[data-dv2-state="no-matches"] .dv2-progress-dot {
  color: var(--burgundy);
  background: var(--burgundy);
  animation: none;
  box-shadow: 0 0 0 3px rgba(122, 31, 42, 0.18);
}

.dv2-progress-meta {
  margin-left: auto;
  font-family: var(--font-mono-v4);
  font-size: 11px;
  color: var(--ink-muted);
}

.dv2-progress-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.3;
}

.dv2-mono {
  font-family: var(--font-mono-v4);
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

.dv2-progress-bar {
  height: 4px;
  background: rgba(122, 31, 42, 0.10);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 14px;
  position: relative;
}

.dv2-progress-fill {
  display: block;
  background: var(--burgundy);
  height: 100%;
  border-radius: 2px;
  transition: width 320ms ease-out;
  position: relative;
  overflow: hidden;
}

.dv2-progress[data-dv2-state="no-matches"] .dv2-progress-fill {
  background: rgba(122, 31, 42, 0.40);
}

.dv2-progress-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
  animation: dv2-shimmer 1.6s linear infinite;
  pointer-events: none;
}

.dv2-progress[data-dv2-state="paused"] .dv2-progress-shimmer,
.dv2-progress[data-dv2-state="complete"] .dv2-progress-shimmer,
.dv2-progress[data-dv2-state="no-matches"] .dv2-progress-shimmer {
  display: none;
}

.dv2-progress-activity {
  display: flex;
  flex-direction: column;
  min-height: 60px;
  margin-bottom: 6px;
}

.dv2-activity {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 11px;
  color: var(--ink-muted);
  animation: dv2-activity-enter 240ms ease-out;
}

.dv2-activity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
  flex-shrink: 0;
}

.dv2-activity[data-dv2-status="active"] { color: var(--ink); }
.dv2-activity[data-dv2-status="active"] .dv2-activity-dot { background: var(--burgundy); }

.dv2-activity[data-dv2-status="queued"] { opacity: 0.5; }
.dv2-activity[data-dv2-status="queued"] .dv2-activity-dot { background: #D6CFC0; }

.dv2-progress-footer {
  display: flex;
  gap: 6px;
  padding-top: 10px;
  border-top: 0.5px solid rgba(122, 31, 42, 0.08);
  margin-top: 10px;
  align-items: center;
}

.dv2-progress-total {
  margin-left: auto;
  font-family: var(--font-mono-v4);
  font-size: 11px;
  color: var(--ink-muted);
}

/* ---- Drawer (§2.2) ----------------------------------------- */

.dv2-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(31, 27, 23, 0.40);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dv2-drawer-backdrop[data-dv2-visible="true"] {
  opacity: 1;
  pointer-events: auto;
}

.dv2-drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 360px;
  background: var(--surface);
  border-left: 0.5px solid var(--hairline-default);
  padding: 16px 18px;
  box-shadow: -8px 0 24px rgba(31, 27, 23, 0.10);
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 50;
  overflow-y: auto;
}

.dv2-drawer[data-dv2-visible="true"] { transform: translateX(0); }

.dv2-drawer[data-dv2-width="settings"]      { width: 280px; }
.dv2-drawer[data-dv2-width="notifications"] { width: 240px; }
.dv2-drawer[data-dv2-width="recent"]        { width: 360px; }

.dv2-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.dv2-drawer-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.dv2-drawer-close {
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color 150ms;
}

.dv2-drawer-close:hover { color: var(--ink); }

.dv2-drawer-section-label {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 4px;
  margin-top: 14px;
}

.dv2-drawer-body { font-size: 12px; color: var(--ink); }

.dv2-drawer-body dl {
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 12px;
}

.dv2-drawer-body dt {
  font-size: 11px;
  color: var(--ink-muted);
}

.dv2-drawer-body dd {
  margin: 0;
  font-size: 12px;
  color: var(--ink);
}

.dv2-drawer-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 0.5px solid rgba(122, 31, 42, 0.08);
}

/* ---- Toast (cancel-undo, complete) -------------------------- */

.dv2-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  background: var(--surface);
  border: 0.5px solid var(--hairline-strong);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 12px 32px rgba(31, 27, 23, 0.18);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--ink);
  max-width: 360px;
  animation: dv2-toast-in 200ms ease-out;
}

.dv2-toast[data-dv2-tone="sage"] {
  border-left: 3px solid var(--sage);
}

.dv2-toast-undo {
  background: none;
  border: none;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--burgundy);
  cursor: pointer;
  padding: 0;
}

/* ---- Keyframes ---------------------------------------------- */

@keyframes dv2-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--sage-pulse); }
  50%      { box-shadow: 0 0 0 6px rgba(107, 135, 115, 0.08); }
}

@keyframes dv2-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes dv2-activity-enter {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes dv2-form-out {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes dv2-progress-in {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes dv2-dropdown-in {
  0%   { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes dv2-toast-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---- Reduced motion ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .dv2-progress-shimmer,
  .dv2-progress-dot {
    animation: none !important;
  }
  .dv2-activity,
  .dv2-config[data-dv2-swap="out"],
  .dv2-progress[data-dv2-swap="in"],
  .dv2-select[data-dv2-open="true"] .dv2-dropdown,
  .dv2-toast {
    animation-duration: 0ms !important;
  }
  .dv2-mode-card,
  .dv2-select-trigger,
  .dv2-recent-row,
  .dv2-drawer,
  .dv2-drawer-backdrop,
  .dv2-link-chevron,
  .dv2-select-chevron,
  .dv2-toggle-knob {
    transition-duration: 0ms !important;
  }
}

/* ---- Focus rings (§6 polish) -------------------------------- */

body[data-discover-version="v2"] .dv2-mode-card:focus-visible,
body[data-discover-version="v2"] .dv2-select-trigger:focus-visible,
body[data-discover-version="v2"] .dv2-link:focus-visible,
body[data-discover-version="v2"] .dv2-primary:focus-visible,
body[data-discover-version="v2"] .dv2-secondary:focus-visible,
body[data-discover-version="v2"] .dv2-recent-row:focus-visible,
body[data-discover-version="v2"] .dv2-toggle:focus-visible,
body[data-discover-version="v2"] .dv2-chip-stepper:focus-visible,
body[data-discover-version="v2"] .dv2-dropdown-item:focus-visible,
body[data-discover-version="v2"] .dv2-drawer-close:focus-visible {
  outline: 1.5px solid var(--burgundy);
  outline-offset: 2px;
}

/* Final lead-view canvas override. The v3 Home rule keys off
   body[data-home-version="v3"] and appears later than the review-desk
   block, so the Leads tab needs this last word to keep its gutter. */
body[data-home-version="v3"][data-active-tab="leads"] .workspace {
  padding: 0 var(--canvas-pad-x) 18px !important;
}


/* Show-and-tell pilot mode (override — must live AFTER the earlier
   body[data-home-version="v3"] .home-v2-X { display:none } rules around
   line 15750, hence the trailing position). Force the wired home-v2
   layout in place of the static home-v3 mock zone. Ticker, kanban, and
   the "Today's queue" hardcoded names (Alex Bayliss / Priya Shah / etc.)
   stay in the DOM but go away visually; Sarah sees her actual counts,
   queue, activity feed, and coverage breakdown from renderHome. */
body[data-home-version="v3"] .home-v3 {
  display: none !important;
}
body[data-home-version="v3"] .home-v2-hero {
  display: block !important;
}
body[data-home-version="v3"] .home-people-launchpad,
body[data-home-version="v3"] .home-jobs-strip,
body[data-home-version="v3"] .home-stat-strip,
body[data-home-version="v3"] .home-v2-grid {
  display: grid !important;
}

/* Account popover — opened by clicking the sidebar avatar (bottom-left).
   Shows the signed-in user + a Sign-out action. Lives in a fixed-position
   element appended to body by account-menu.js; CSS handles the visual. */
.account-popover {
  position: fixed;
  z-index: 1000;
  min-width: 240px;
  max-width: 320px;
  padding: 12px;
  border: 1px solid var(--line-strong, #C9C2B2);
  border-radius: 10px;
  background: var(--paper, #FBF7EE);
  box-shadow: 0 16px 40px rgba(18, 24, 31, 0.18);
  font-size: 0.85rem;
  color: var(--ink, #0F1419);
  display: none;
}

.account-popover[data-open="true"] {
  display: block;
}

.account-popover-head {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line, #E8E3D7);
}

.account-popover-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink, #0F1419);
}

.account-popover-email {
  margin-top: 2px;
  color: var(--ink-soft, #5A5754);
  font-size: 0.78rem;
  word-break: break-all;
}

.account-popover-role {
  margin-top: 4px;
  color: var(--muted, #6E6A65);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-popover-action {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-strong, #C9C2B2);
  border-radius: 6px;
  background: transparent;
  color: var(--ink, #0F1419);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.account-popover-action:hover,
.account-popover-action:focus-visible {
  background: rgba(124, 31, 42, 0.06);
  border-color: rgba(124, 31, 42, 0.45);
  outline: none;
}

.sidebar-avatar-button {
  cursor: pointer;
}

/* Feedback button — sticky-bar quick way for the pilot user to tap and send
   Conor a comment via mailto. Sits at the far left of .sticky-bar-right so
   it's the most prominent of the right-cluster icons. Inherits the
   .sticky-bar-icon shape so it visually matches Settings cog + bell;
   tinted burgundy on hover so it reads as "send a thing" not "another
   nav icon". Touch target stays at the existing .sticky-bar-icon size
   (~36-40px) — meets the 44px-recommended mobile floor when padding
   counts. */
.sticky-bar-feedback {
  color: var(--mandate-red, #7C1F2A);
}

.sticky-bar-feedback:hover,
.sticky-bar-feedback:focus-visible {
  background: rgba(124, 31, 42, 0.10);
  color: var(--mandate-red, #7C1F2A);
}

/* On phone widths, beef the icon up a touch so the tap-target is sized
   like Sarah expects on iOS. */
@media (max-width: 600px) {
  .sticky-bar-feedback {
    min-width: 44px;
    min-height: 44px;
  }
  .sticky-bar-feedback svg {
    width: 20px;
    height: 20px;
  }
}

/* Feedback FAB — bottom-right floating action button. Always visible on
   every tab, on phone and desktop. The chat-bubble icon + "Feedback"
   label means it reads as "send something" not "another nav icon".
   Burgundy fill so it matches the brand and stands out from the cream
   canvas; ample touch padding so iPhone thumbs land cleanly. */
.feedback-fab {
  position: fixed;
  z-index: 950;
  right: 18px;
  bottom: 18px;
  min-height: 52px;
  padding: 0 18px 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--mandate-red, #7C1F2A);
  color: #FBF7EE;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(124, 31, 42, 0.36), 0 2px 6px rgba(18, 24, 31, 0.16);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.feedback-fab:hover,
.feedback-fab:focus-visible {
  background: var(--mandate-red-dark, #5C151F);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(124, 31, 42, 0.42), 0 4px 10px rgba(18, 24, 31, 0.2);
  outline: none;
}

.feedback-fab:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(124, 31, 42, 0.32);
}

.feedback-fab svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  flex-shrink: 0;
}

.feedback-fab-label {
  white-space: nowrap;
}

/* On phone widths drop the label so the icon-only pill fits cleanly with
   the iOS home-indicator zone. Touch-target stays ≥44px via padding. */
@media (max-width: 540px) {
  .feedback-fab {
    min-width: 56px;
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
  }
  .feedback-fab svg {
    width: 22px;
    height: 22px;
  }
  .feedback-fab-label {
    /* Visually-hide but keep for screen readers */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Discover mode cards — stack vertically on phone widths so the three
   modes ("Curated market" / "Known firms" / "Describe what you want")
   don't crush into 120px columns with truncated descriptions. Above the
   breakpoint they keep the existing 3-column row. */
@media (max-width: 720px) {
  .dv2-mode-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  .dv2-mode-card {
    min-height: 0 !important;
  }
  .dv2-mode-desc {
    /* Cards no longer need the squashed-column text; let it breathe. */
    max-width: none !important;
  }
}

/* Welcome tip — bottom-right popover (above the feedback FAB) on phone,
   top-right floating card on desktop. Shows once after first sign-in
   then dismissed permanently to localStorage. Mandate brand burgundy
   accent, clear typography, three-step list, single primary action. */
.welcome-tip-card {
  position: fixed;
  z-index: 960;
  right: 18px;
  bottom: 84px;  /* above the FAB */
  width: min(360px, calc(100vw - 36px));
  padding: 18px 20px 16px;
  border: 1px solid var(--line-strong, #C9C2B2);
  border-radius: 14px;
  background: var(--paper, #FBF7EE);
  box-shadow: 0 18px 48px rgba(18, 24, 31, 0.22), 0 4px 12px rgba(18, 24, 31, 0.06);
  font-size: 0.9rem;
  color: var(--ink, #0F1419);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.welcome-tip-card.welcome-tip-dismissing {
  opacity: 0;
  transform: translateY(8px);
}

.welcome-tip-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted, #6E6A65);
  cursor: pointer;
}
.welcome-tip-close:hover,
.welcome-tip-close:focus-visible {
  background: rgba(18, 24, 31, 0.06);
  color: var(--ink, #0F1419);
  outline: none;
}

.welcome-tip-eyebrow {
  color: var(--mandate-red, #7C1F2A);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.welcome-tip-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink, #0F1419);
}

.welcome-tip-steps {
  margin: 0 0 14px;
  padding-left: 22px;
  color: var(--ink-soft, #5A5754);
  font-size: 0.86rem;
  line-height: 1.5;
}
.welcome-tip-steps li {
  margin-bottom: 6px;
}
.welcome-tip-steps li:last-child {
  margin-bottom: 0;
}
.welcome-tip-steps strong {
  color: var(--ink, #0F1419);
  font-weight: 700;
}

.welcome-tip-got-it {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--mandate-red, #7C1F2A);
  border-radius: 8px;
  background: var(--mandate-red, #7C1F2A);
  color: #FBF7EE;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease;
}
.welcome-tip-got-it:hover,
.welcome-tip-got-it:focus-visible {
  background: var(--mandate-red-dark, #5C151F);
  transform: translateY(-1px);
  outline: none;
}

/* On very narrow phones, slide the card across the bottom so it doesn't
   crowd a single right corner with both the tip + FAB. */
@media (max-width: 540px) {
  .welcome-tip-card {
    right: 12px;
    left: 12px;
    bottom: 88px;
    width: auto;
    max-width: none;
  }
}

/* Correction to the earlier polish — .dv2-mode-row is display:flex, not
   grid, so grid-template-columns had no effect. Flex-direction column
   stacks the three mode cards vertically on phone widths. */
@media (max-width: 720px) {
  .dv2-mode-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .dv2-mode-card {
    width: 100% !important;
    min-height: 0 !important;
    padding: 14px 14px !important;
  }
  .dv2-mode-card .dv2-mode-desc {
    max-width: none !important;
    margin-top: 4px !important;
  }
  .dv2-mode-card .dv2-mode-title {
    font-size: 0.95rem !important;
  }
}

/* Dossier "Not relevant" / "Restore" — clear, finger-friendly bin action so
   Sarah can dismiss a firm she doesn't want from a single tap. Sits next
   to the primary CTA, stacks under it on phone where space is tight.
   Specificity bumped via .dossier-actions ancestor so the override at
   line ~14775 (which clamps ghost-button to min-height:32px) loses. */
.dossier-actions .dossier-bin-action {
  min-height: 38px;
  padding: 6px 12px;
  font-size: 0.85rem;
}
@media (max-width: 540px) {
  .dossier-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .dossier-actions .dossier-bin-action,
  .dossier-actions .primary-button {
    min-height: 44px;
    width: 100%;
  }
}

/* Action-menu "Skip this firm" — visually separated from per-person actions
   so the firm-level intent reads differently from the person actions above. */
.person-action-menu .person-action-bin {
  margin-top: 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 8px;
  color: var(--burgundy, #7C1F2A);
}
.person-action-menu .person-action-bin:hover,
.person-action-menu .person-action-bin:focus {
  background: rgba(124, 31, 42, 0.06);
}

/* Home-side nudge prompting the user to fill in firm credentials —
   shown until either positioning is set OR the user explicitly
   dismisses. Hidden by default via .hidden; renderFirmProfileNudge()
   toggles. Burgundy-tinted card; stacks vertically on phone. */
.firm-profile-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, rgba(124, 31, 42, 0.05), rgba(124, 31, 42, 0.01));
  border: 1px solid rgba(124, 31, 42, 0.18);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 12px;
  color: var(--ink, #1a1a1a);
}
.firm-profile-nudge.hidden { display: none; }
.firm-profile-nudge-body { flex: 1 1 auto; min-width: 0; }
.firm-profile-nudge-body strong {
  display: block;
  font-size: 0.92rem;
  color: var(--burgundy, #7C1F2A);
  margin-bottom: 2px;
}
.firm-profile-nudge-body p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--muted, #555);
}
.firm-profile-nudge-actions {
  display: inline-flex;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .firm-profile-nudge {
    flex-direction: column;
    align-items: stretch;
  }
  .firm-profile-nudge-actions {
    width: 100%;
    flex-direction: row;
  }
  .firm-profile-nudge-actions button {
    flex: 1 1 auto;
  }
}

/* Bulk action bar — surfaces multi-lead actions when Sarah has ticked
   one or more leads. Sticks to the top of the Leads tab so it stays
   visible while scrolling the list. */
.bulk-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(124, 31, 42, 0.06);
  border: 1px solid rgba(124, 31, 42, 0.22);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 10px 0 4px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.bulk-action-bar.hidden { display: none; }
.bulk-action-bar-summary {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--burgundy, #7C1F2A);
  font-size: 0.92rem;
}
.bulk-action-bar-summary strong {
  font-size: 1.1rem;
  font-weight: 700;
}
.bulk-action-bar-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 720px) {
  .bulk-action-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .bulk-action-bar-actions {
    width: 100%;
    justify-content: stretch;
  }
  .bulk-action-bar-actions button {
    flex: 1 1 calc(50% - 4px);
  }
}

/* Follow-ups: filter chips + per-card call-management actions. Task #8 —
   Sarah flagged "managing the call ins" needs work. We surface call time,
   the Teams join link, and Call done / Reschedule / Notes inline, so she
   can run a real follow-up queue without bouncing into the situation
   modal for every action. */
.followup-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.followup-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.followup-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--hairline, #d8d8d8);
  border-radius: 999px;
  background: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink, #13161c);
  cursor: pointer;
  min-height: 36px;
}
.followup-chip:hover {
  background: #f4f6fb;
}
.followup-chip.is-active {
  background: var(--ink, #13161c);
  color: #ffffff;
  border-color: var(--ink, #13161c);
}
.followup-chip-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
  font-size: 0.72rem;
  font-weight: 700;
}
.followup-chip.is-active .followup-chip-count {
  background: rgba(255, 255, 255, 0.18);
}
/* Override the base .followup-card 2-column grid so we can stack the
   main row, the meeting strip, recent-note, action row, and inline
   editor vertically. The main row inside retains the original 2-col
   grid via .followup-card-main. */
.followup-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dce4ec;
  border-radius: var(--radius, 12px);
  background: #ffffff;
}
.followup-card.is-call {
  border-left: 3px solid var(--indigo, #3f18aa);
}
.followup-card.is-overdue {
  border-color: #ffd8d8;
  background: #fffafa;
}
.followup-card-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}
.followup-card-copy h4 {
  margin: 0 0 4px;
}
.followup-card-copy p {
  margin: 0 0 6px;
}
.due-badge.is-overdue {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #8a1c1c;
}
.followup-meeting {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f1edff;
  color: var(--indigo, #3f18aa);
  font-size: 0.85rem;
}
.followup-meeting strong {
  font-weight: 700;
}
.followup-meeting small {
  color: var(--muted, #5b6373);
  font-weight: 500;
}
.followup-teams-join {
  margin-left: auto;
}
.followup-recent-note {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f7f8f6;
  font-size: 0.85rem;
  color: var(--ink, #13161c);
}
.followup-recent-note em {
  color: var(--muted, #5b6373);
  font-style: normal;
  margin-right: 4px;
}
.followup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.followup-actions .compact-button {
  min-height: 34px;
}
.followup-action-primary {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.followup-action-primary:hover {
  background: #d1fae5;
}
.followup-inline {
  padding: 10px;
  border-radius: 10px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.followup-inline label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--muted, #5b6373);
  font-weight: 600;
}
.followup-inline input[type="date"],
.followup-inline textarea {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
}
.followup-inline textarea {
  resize: vertical;
  min-height: 60px;
}
.followup-inline-chips,
.followup-inline-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .followup-card {
    display: flex;
  }
  .followup-card-main {
    display: grid;
  }
  .followup-actions .compact-button {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
  .followup-meeting {
    font-size: 0.82rem;
  }
  .followup-teams-join {
    margin-left: 0;
    flex: 1 1 100%;
  }
}

/* Pilot polish — wizard + Discover squish-left layouts.
   The Sarah-style fresh-pilot run surfaced two layout complaints:
   (1) the wizard's two columns sprawl on a desktop browser, with the dark
       form card the same width as the white guide card, leaving the right
       column visually empty toward the bottom.
   (2) the Discover form (curated/known/describe row + dropdowns) stretches
       full-width and the bottom 60% of viewport is empty white space
       because there's nowhere for the found people to land in real time.
   Fix: cap and narrow the form column, add a sticky live-results rail on
   the right (Discover) so people land there as the crawl enriches. */

/* WIZARD — tighter 2-col on wide screens, narrower form card, sticky
   guide card so it stays visible while step 2's intent list scrolls. */
@media (min-width: 900px) {
  .setup-shell {
    width: min(1080px, calc(100vw - 40px));
    grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
    align-items: start;
  }
  .setup-card {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
  .setup-guide-card {
    position: sticky;
    top: 24px;
    align-self: start;
  }
}

/* ---------------------------------------------------------------- */
/* DISCOVER live rail v2 — desktop 2-col layout. Left: compact dv2
   form capped at 640px so it reads tight. Right: live-streaming
   results rail that fills the right column with a substantial empty
   state, a status pulse during a crawl, and per-row inline action
   drawers (Email directly / Copy email / Send to pipeline / Open
   profile / Skip firm) so the user never has to leave Discover to
   act on a found person.
   ---------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Scope to .active — otherwise this rule forces #view-discover visible
     on every desktop tab, bleeding the Discover form/rail into Home,
     Pipeline, etc. The base `.view { display: none }` only hides views
     that DON'T have a more-specific display rule, so the .active gate
     is load-bearing. */
  #view-discover.active {
    display: grid;
    grid-template-columns: minmax(520px, 720px) clamp(380px, 30vw, 500px);
    justify-content: start;
    column-gap: 28px;
    align-items: start;
    max-width: 1300px;
    margin: 0 auto;
    padding-right: 22px;
  }
  #view-discover.active .discover-v2 {
    max-width: 100%;
    padding-right: 0;
    margin-left: 0;
  }
  #view-discover.active .dv2-live-rail {
    position: sticky;
    top: 72px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* Discover sibling sections (.dv2-recent etc.) that live inside .discover-v2
   sit naturally in the left column. The grid only directly children of
   #view-discover (the .discover-v2 wrapper and the appended live rail),
   so no extra positioning is needed here. */

/* ---------------------------------------------------------------- */
/* LEADS — Review-run dossier was sprawling edge-to-edge on ultrawide,
   pushing the right "Decision-maker likelihood" rail right up against
   the viewport edge. Cap the whole leads view at the same 1480px as
   Home and centre it so the right rail comes in from the edge. */
@media (min-width: 1024px) {
  #view-leads.active {
    max-width: 1480px;
    margin: 0 auto;
  }
  /* Reduce the dossier's right rail by a notch and slightly trim its
     padding so the main copy (recommendation + opening line + mandate
     focus) gets a bit more breathing room. */
  #view-leads.active .person-dossier-shell {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  }
}

.dv2-live-rail {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 16px;
  border: 1px solid var(--hairline-default, #d8d8d8);
  border-radius: 14px;
  background: #ffffff;
  font-size: 0.86rem;
  color: var(--ink, #13161c);
  box-shadow: 0 1px 0 rgba(19, 22, 28, 0.04);
}

.dv2-live-rail-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--hairline-default, #d8d8d8);
}

.dv2-live-rail-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dv2-live-rail-pulse {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #94a3b8;
  flex-shrink: 0;
}

.dv2-live-rail-pulse[data-state="running"] {
  background: #3f18aa;
  box-shadow: 0 0 0 4px rgba(63, 24, 170, 0.16);
  animation: dv2-rail-pulse 1.4s ease-in-out infinite;
}

.dv2-live-rail-pulse[data-state="found"] {
  background: #16a34a;
}

@keyframes dv2-rail-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

/* ============================================================
   CLEAN LIGHT v1 - Home declutter (2026-06-15)
   The v2 home stacked seven modules and showed the same leads
   twice (Today's queue + a near-identical Activity feed). Calm it
   to a single ordered column on one consistent measure: drop the
   redundant Activity panel, move the connector-setup wall off the
   home (it lives in Settings > Integrations), and quieten the
   "find people" launchpad so the actual work leads.
   ============================================================ */

/* Redundant Activity feed duplicates Today's queue -> remove. */
#view-home .home-activity-panel { display: none !important; }

/* Connector setup is a wall of explanatory text; it belongs in
   Settings, not the home. */
#view-home .home-connectors { display: none !important; }

/* One ordered vertical column on a capped, centred measure so the
   page reads top-to-bottom instead of sprawling across misaligned
   columns. */
#view-home .home-v2-grid {
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}
#view-home .home-v2-hero,
#view-home .home-jobs-strip,
#view-home .home-people-launchpad,
#view-home .home-v2-grid {
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#view-home .home-people-launchpad,
#view-home .home-v2-grid { margin-top: 18px !important; }

/* Quieten the launchpad numerals so the queue leads, not the
   01/02/03 entry cards. */
#view-home .home-people-launchpad .home-launch-card { padding: 14px 16px !important; }
#view-home .home-people-launchpad .home-launch-card > span[aria-hidden="true"] {
  color: var(--ink-faint) !important;
  font-weight: 500 !important;
}

/* ------------------------------------------------------------
   Push to minimal. "Busy and confusing" -> the home is now just:
   greeting (sticky banner) + ONE action + the worklist. Pipeline,
   coverage, the jobs strip, and the alternate find-modes all have
   their own tabs, so they come off the home entirely.
   ------------------------------------------------------------ */
#view-home .home-jobs-strip { display: none !important; }       /* crawl progress shows on Leads/Discover */
#view-home .home-v2-right { display: none !important; }          /* pipeline + coverage -> their own tabs */
#view-home .home-people-launchpad .home-launch-copy p { display: none !important; }
#view-home .home-launch-card[data-home-source="websites"],
#view-home .home-launch-card[data-home-source="search"] { display: none !important; }
#view-home .home-people-launchpad .home-launch-actions { display: block !important; }
#view-home .home-people-launchpad .home-launch-card[data-home-source="packs"] { max-width: 420px !important; }

/* Now that the home is one column of content, keep the queue the
   clear focus with generous breathing room. */
#view-home .home-people-launchpad { margin-bottom: 22px !important; }
#view-home .home-queue-panel { padding-top: 4px !important; }

/* ------------------------------------------------------------
   Fix the "bizarre unused space": the minimal home was capped to
   a narrow centred column, leaving a huge right gutter and an
   empty page. Use the measure - the worklist becomes a full-width
   centrepiece showing more of the list; the find action stays a
   modest button above it.
   ------------------------------------------------------------ */
#view-home .home-v2-hero,
#view-home .home-people-launchpad,
#view-home .home-v2-grid { max-width: 1240px !important; }

/* Find = one modest button, not a floating card stranded in space. */
#view-home .home-people-launchpad .home-launch-copy { display: none !important; }
#view-home .home-people-launchpad .home-launch-card[data-home-source="packs"] {
  max-width: 300px !important;
}
#view-home .home-people-launchpad .home-launch-card[data-home-source="packs"] > span[aria-hidden="true"] {
  display: none !important;
}

/* Worklist fills the full measure - it is the page. */
#view-home .home-v2-grid { grid-template-columns: 1fr !important; }
#view-home .home-queue-panel,
#view-home .home-v2-left { width: 100% !important; }
#view-home .home-focus-list { width: 100% !important; }

/* ============================================================
   LANDING HOME (2026-06-15) — one full-bleed surface that IS the
   worklist. Replaces the stacked v2/v3/onboarding home; cards fold
   out in a staggered 3D reveal and fill the whole page.
   ============================================================ */
/* Wave 4b deleted the dead v2/v3/onboarding markup, so the old guard that hid
   everything in #view-home except #landingHome is no longer needed. */
/* Scope to .active — an unscoped `#view-home { display:block }` overrides the
   base `.view { display:none }` and pins the home (the "Build your worklist"
   hero) on top of every other tab. Same load-bearing .active gate the
   #view-discover rule documents above. */
#view-home.active { display: block !important; padding: 0 !important; }

.landing-home {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 92px);
  padding: 24px clamp(16px, 3vw, 44px) 44px;
  gap: 20px;
  /* Full-bleed: the worklist uses the entire content width (no centred cap)
     so it fills large / 33" monitors edge to edge. */
  width: 100%;
}

.landing-home .lh-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  animation: lhHeadIn 460ms cubic-bezier(0.22, 1, 0.36, 1) 40ms both;
}
.landing-home .lh-eyebrow {
  margin: 0 0 5px;
  font-family: var(--font-mono-v4, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--burgundy);
}
.landing-home .lh-title {
  margin: 0;
  font-size: 1.95rem;
  line-height: 1.03;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.landing-home .lh-head-actions { display: flex; align-items: center; gap: 16px; }
.landing-home .lh-count-wrap { color: var(--ink-muted); font-size: 0.9rem; }
.landing-home .lh-count-wrap span { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.landing-home .lh-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  align-content: start;
  perspective: 1500px;
}

.landing-home .lh-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
  padding: 16px 16px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface, #ffffff);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transform-origin: top center;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease, border-color 180ms ease;
}
.landing-home .lh-grid.lh-animate .lh-card {
  animation: lhFold 600ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.landing-home .lh-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}
.landing-home .lh-card-row { display: flex; align-items: center; justify-content: space-between; }
.landing-home .lh-av {
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: #ffffff;
  background: var(--burgundy);
}
.landing-home .lh-routes { display: inline-flex; gap: 5px; }
.landing-home .lh-dot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; }
.landing-home .lh-dot-mail { background: #1f9d6b; }
.landing-home .lh-dot-phone { background: #2f5bd7; }
.landing-home .lh-name { font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.16; }
.landing-home .lh-firm { font-size: 0.82rem; color: var(--ink-muted); line-height: 1.25; }
.landing-home .lh-next {
  margin-top: 3px;
  font-size: 0.74rem;
  color: var(--ink-soft);
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(138, 31, 51, 0.08);
  align-self: flex-start;
}
.landing-home .lh-route-line {
  margin-top: 3px;
  font-family: var(--font-mono-v4, ui-monospace, monospace);
  font-size: 0.72rem;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.landing-home .lh-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 90px 20px; color: var(--ink-muted);
}

@keyframes lhFold {
  from { opacity: 0; transform: rotateX(-62deg) translateY(26px) scale(0.97); }
  to   { opacity: 1; transform: rotateX(0deg) translateY(0) scale(1); }
}
@keyframes lhHeadIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-home .lh-grid.lh-animate .lh-card,
  .landing-home .lh-head { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Landing home empty state - a proper hero, not a bare line. */
.landing-home .lh-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; margin: auto; max-width: 560px; padding: 32px 20px 48px;
}
.landing-home .lh-empty-art {
  width: 66px; height: 66px; display: grid; place-items: center;
  border-radius: 18px; color: var(--burgundy); background: rgba(138, 31, 51, 0.08);
}
.landing-home .lh-empty-art svg { width: 30px; height: 30px; }
.landing-home .lh-empty h2 { margin: 8px 0 0; font-size: 1.65rem; letter-spacing: -0.012em; color: var(--ink); }
.landing-home .lh-empty p { margin: 0; color: var(--ink-muted); font-size: 0.96rem; line-height: 1.5; }
.landing-home .lh-empty-cta {
  margin-top: 8px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--burgundy); color: #ffffff; font-weight: 600; font-size: 1.02rem;
  padding: 14px 32px; box-shadow: var(--shadow-soft);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.landing-home .lh-empty-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow); background: var(--burgundy-dark, #5a1620); }
.landing-home .lh-empty-opts {
  margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%;
}
.landing-home .lh-opt {
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
  padding: 15px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface, #ffffff); box-shadow: var(--shadow-soft);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.landing-home .lh-opt:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.landing-home .lh-opt strong { color: var(--ink); font-size: 0.92rem; }
.landing-home .lh-opt span { color: var(--ink-muted); font-size: 0.78rem; line-height: 1.32; }
@media (max-width: 680px) { .landing-home .lh-empty-opts { grid-template-columns: 1fr; } }

.dv2-live-rail-eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--muted, #5b6373);
}

.dv2-live-rail-head[data-state="running"] .dv2-live-rail-eyebrow {
  color: #3f18aa;
}

.dv2-live-rail-counter {
  margin-left: auto;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: #3f18aa;
  background: rgba(63, 24, 170, 0.08);
  padding: 2px 8px;
  border-radius: 999px;
}

.dv2-live-rail-title {
  margin: 0;
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink, #13161c);
}

.dv2-live-rail-sub {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted, #5b6373);
}

.dv2-live-rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dv2-live-rail-item {
  border: 1px solid transparent;
  border-radius: 10px;
  background: #f8f9f7;
  transition: background 120ms ease, border-color 120ms ease;
}

.dv2-live-rail-item:hover {
  background: #f1eef8;
  border-color: #d8d2ee;
}

.dv2-live-rail-item.is-expanded {
  background: #ffffff;
  border-color: #c9bee9;
  box-shadow: 0 1px 0 rgba(63, 24, 170, 0.06), 0 4px 14px -8px rgba(19, 22, 28, 0.18);
}

.dv2-live-rail-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.dv2-live-rail-row:focus-visible {
  outline: 2px solid #3f18aa;
  outline-offset: -2px;
}

.dv2-live-rail-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3f18aa, #8774c6);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.dv2-live-rail-rowmain {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.dv2-live-rail-rowname {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink, #13161c);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dv2-live-rail-rowtitle {
  font-size: 0.74rem;
  color: var(--muted, #5b6373);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dv2-live-rail-rowcompany {
  font-style: normal;
  font-size: 0.74rem;
  color: #3f18aa;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dv2-live-rail-rowbadges {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--muted, #5b6373);
}

.dv2-live-rail-badge {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ebe7f7;
  color: #3f18aa;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
}

.dv2-live-rail-chev {
  margin-left: 4px;
  color: var(--muted, #5b6373);
  transition: transform 160ms ease;
  display: inline-flex;
}

.dv2-live-rail-chev[data-state="open"] {
  transform: rotate(180deg);
  color: #3f18aa;
}

.dv2-live-rail-drawer {
  padding: 4px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dv2-live-rail-drawer[hidden] {
  display: none;
}

.dv2-live-rail-drawer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.dv2-live-rail-action {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid #d8d2ee;
  border-radius: 8px;
  background: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink, #13161c);
  cursor: pointer;
  text-align: left;
}

.dv2-live-rail-action:hover:not(:disabled) {
  background: #f1eef8;
  border-color: #c9bee9;
}

.dv2-live-rail-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dv2-live-rail-action.is-primary {
  background: #3f18aa;
  color: #ffffff;
  border-color: #3f18aa;
  grid-column: 1 / -1;
  justify-content: center;
}

.dv2-live-rail-action.is-primary:hover:not(:disabled) {
  background: #2f1284;
  border-color: #2f1284;
}

.dv2-live-rail-action.is-quiet {
  grid-column: 1 / -1;
  background: transparent;
  border-color: #e8e4f3;
  color: var(--muted, #5b6373);
  justify-content: center;
}

.dv2-live-rail-action.is-quiet:hover:not(:disabled) {
  background: #faf7ff;
  color: #3f18aa;
  border-color: #d8d2ee;
}

.dv2-live-rail-drawer-meta {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted, #5b6373);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  padding: 6px 8px;
  background: #f7f8f6;
  border-radius: 6px;
  word-break: break-all;
}

.dv2-live-rail-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 14px 4px 8px;
  min-height: 260px;
}

.dv2-live-rail-empty-art {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 8px;
}

.dv2-live-rail-empty-row {
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(90deg, #f1eef8 0%, #ebe7f7 50%, #f1eef8 100%);
  background-size: 220% 100%;
  animation: dv2-rail-shimmer 2.4s linear infinite;
  opacity: 0.6;
}

.dv2-live-rail-empty-row:nth-child(2) { opacity: 0.4; animation-delay: 0.3s; }
.dv2-live-rail-empty-row:nth-child(3) { opacity: 0.25; animation-delay: 0.6s; }

@keyframes dv2-rail-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

.dv2-live-rail-tips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 0.82rem;
  color: var(--ink, #13161c);
}

.dv2-live-rail-tips li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-left: 12px;
  position: relative;
}

.dv2-live-rail-tips li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #3f18aa;
  position: absolute;
  left: 0;
  top: 8px;
}

.dv2-live-rail-tips strong {
  font-weight: 700;
  color: var(--ink, #13161c);
}

/* On phone, hide the rail entirely — Discover stacks single-column there
   (the dv2 form's progress card already handles in-flight feedback on
   small screens). Two-column live rail is a desktop-only affordance. */
@media (max-width: 1023px) {
  .dv2-live-rail {
    display: none;
  }
}

/* ---------------------------------------------------------------- */
/* HOME — wider right column on desktop. The cramped 300px sidebar
   was squeezing Activity rows and the Where-your-leads-came-from
   coverage list into ellipsis. Allow the right column to scale with
   viewport (clamp 380-520) so on a 1440+ screen the side panels
   actually fit "Partner, Chair of Corporate" without truncation,
   and on ultrawide the whole layout caps at 1480px and centres so
   the Home page doesn't sprawl edge-to-edge.
   ---------------------------------------------------------------- */
@media (min-width: 1024px) {
  #view-home {
    /* Full-width landing home on large / 33" monitors. The 1480px cap was for
       the old two-column v2 home (now hidden); the worklist grid should use the
       whole width (auto-fit fills it as the worklist grows). */
    max-width: none;
    margin: 0;
  }
  #view-home .home-v2-grid {
    grid-template-columns: minmax(0, 1fr) clamp(380px, 28vw, 520px);
    column-gap: 14px;
  }
  /* Match width-cap on the launchpad row (Find people) and jobs strip
     so they line up with the grid below instead of running edge-to-edge. */
  #view-home .home-people-launchpad,
  #view-home .home-jobs-strip,
  #view-home .home-connectors {
    max-width: 100%;
  }
}

/* Ensure Activity / Coverage rows have room to breathe — when text wraps
   we'd rather see two lines than ellipsis on the person's job title. */
.home-activity-row {
  flex-wrap: wrap;
}
.home-activity-row .home-activity-detail {
  min-width: 0;
  flex: 1 1 0;
}
.home-activity-person-title {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Welcome-tip card overlap fix (1440x900 audit, 2026-05-28). The
   bottom-right tip card was obscuring the Pipeline kanban "Won" column,
   the Discover rail's bottom rows, and the Settings save button. Keep
   the tip on Home / Leads / Followups / Briefs where there's quiet
   margin in the bottom-right; suppress it on the surfaces where it
   covers working content. CSS-only hide is collision-safe — the card
   stays in the DOM and the existing dismiss handlers in welcome-tip.js
   keep working. */
body[data-active-tab="discover"] #mandateWelcomeTip,
body[data-active-tab="pipeline"] #mandateWelcomeTip,
body[data-active-tab="settings"] #mandateWelcomeTip {
  display: none !important;
}

/* Pilot mode (2026-05-28 audit) — Contacts is a near-duplicate of Leads
   (same crawled people, flat table vs Leads' list + dossier). The flow
   Sarah actually uses is Home -> Discover -> Leads (dossier) -> Pipeline
   -> Follow-ups -> Briefs -> Settings. Hide the Contacts nav entry to
   stop the two views competing. Same pattern as the existing pilot-mode
   block higher in this file (issuers / maturity / scanner / playbook).
   The view stays in the DOM so any deep-link / shortcut to #view-contacts
   still resolves. */
.nav-tab#tab-contacts {
  display: none !important;
}

/* Home Pipeline preview (2026-05-28 audit) — mini-kanban heads that
   mirror the Pipeline tab's column language. The old horizontal-bar
   layout used different visual language from the kanban it linked to;
   this brings the two views into one mental model. Each .home-pipeline-
   mini-col stays a button so the existing data-home-stage navigation
   keeps working. */
.home-pipeline-list.home-pipeline-mini-kanban {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
}
.home-pipeline-mini-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 10px 12px;
  background: var(--card-bg, #FFFFFF);
  border: 1px solid var(--hairline, #E7E2DA);
  border-radius: 10px;
  border-top: 3px solid var(--stage-accent, #B5AFA4);
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease;
  font: inherit;
  color: inherit;
}
.home-pipeline-mini-col:hover,
.home-pipeline-mini-col:focus-visible {
  background: var(--card-bg-elevated, #FAF7F1);
  border-color: var(--stage-accent, #B5AFA4);
}
.home-pipeline-mini-col:focus-visible {
  outline: 2px solid var(--accent, #134E32);
  outline-offset: 2px;
}
.home-pipeline-mini-stage {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6E6A65);
  line-height: 1.2;
  min-height: 24px;
  overflow-wrap: anywhere;
}
.home-pipeline-mini-count {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink, #13161C);
}
.home-pipeline-mini-col.pipeline-stage-new-lead { --stage-accent: #B5AFA4; }
.home-pipeline-mini-col.pipeline-stage-researched { --stage-accent: #8E8B85; }
.home-pipeline-mini-col.pipeline-stage-contacted { --stage-accent: #C09E60; }
.home-pipeline-mini-col.pipeline-stage-call-booked { --stage-accent: #6F8A6B; }
.home-pipeline-mini-col.pipeline-stage-proposal-sent { --stage-accent: #4E6E8E; }
.home-pipeline-mini-col.pipeline-stage-won { --stage-accent: #225B3A; }
@media (max-width: 720px) {
  .home-pipeline-list.home-pipeline-mini-kanban {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Briefs empty-state cleanup (2026-05-28 audit) — when the workspace has
   zero briefs, suppress the right-pane "Choose a brief to review" stub
   and let the left list pane stretch. Two stub cards side-by-side reads
   as a half-built screen; one card with a clear next-step CTA is the
   intended empty state. renderBriefDetail() clears innerHTML in this
   case so :empty kicks in. */
.brief-layout #briefDetail:empty {
  display: none;
}
.brief-layout:has(#briefDetail:empty) .lead-list-pane {
  flex: 1 1 100%;
  max-width: none;
  width: 100%;
}

/* === Connect Outlook (device-code OAuth) === */
.outlook-connect-status { margin: 12px 0; }
.outlook-connect-actions { display: flex; gap: 8px; margin-top: 12px; }
.outlook-device-instructions { background: #f7f8f6; border: 1px solid #d8d8d8; border-radius: 8px; padding: 16px; }
.outlook-device-instructions ol { margin: 8px 0 12px 20px; padding: 0; }
.outlook-device-instructions li { margin-bottom: 6px; }
.outlook-device-code { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border: 1px solid #d8d8d8; border-radius: 6px; }
.outlook-device-code code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 22px; letter-spacing: 2px; font-weight: 600; color: #3f18aa; flex: 1; user-select: all; }
#outlookPollStatus { margin-top: 12px; font-style: italic; }

/* ============================================================
   LARGE-SCREEN SCALE-UP (2026-06-17)
   On 32-34" monitors at native resolution the px-based UI reads as
   tiny / "zoomed out". Scale the content pane up so text + cards feel
   right; zoom keeps the full-width grid filling the screen.
   ============================================================ */
/* Scale on `body` (not `.workspace`) so body-level overlays — the pipeline
   drawer, modals, action menu, toasts — scale with the app instead of
   rendering tiny/mismatched against the zoomed content. */
@media (min-width: 1800px) { body { zoom: 1.15; } }
@media (min-width: 2400px) { body { zoom: 1.3; } }
@media (min-width: 3000px) { body { zoom: 1.45; } }

/* ============================================================
   FULL-WIDTH EVERYWHERE (2026-06-17)
   The per-view 1480px caps (#view-home, #view-leads, ...) boxed each
   page into a centred column. Override them so EVERY tab uses the full
   screen width, consistent with the home. The .workspace scale-up above
   already applies to all tabs.
   ============================================================ */
.view.active {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ============================================================
   HEADER CONSISTENCY (2026-06-17)
   The global sticky-bar defaulted to the big "MANDATE" wordmark and
   only Home/Leads/Discover swapped it for the "CAPITAL MARKETS / owner"
   brand label -> Pipeline/Issuers/etc. leaked the wordmark. Make the
   brand label the default on every tab.
   ============================================================ */
.sticky-bar-wordmark { display: none !important; }
.sticky-bar-brand-label { display: flex !important; }

/* ============================================================
   REVIEW-RUN DESK POLISH (2026-06-18)
   Reported: the Leads "Review run" rows looked unprofessional —
   "numbers under brown dots", muddy avatars, trashy box edges.
   Causes found:
   - The legacy .lead-row::before priority dot (amber #a86b1f,
     absolute left:11px) sat on top of the newer .review-rank "01"
     number -> read as a dot stuck to a number. Two redundant
     priority signals (rank + verdict pill + left-border already
     carry it), so the dot is pure noise on review rows.
   - .review-person-avatar used hsl(var(--avatar-hue) 28% 32%):
     random low-light/low-sat hues that all render muddy (brown,
     olive, etc.). Replaced with one calm brand-tinted circle.
   - The active row's protruding ::after notch (right:-13px) +
     translateX(4px) slide made the card edge look broken in the
     overview state. Replaced with a clean square-edged lift.
   ============================================================ */

/* 1. Drop the colliding legacy priority dot on review rows. */
#view-leads .lead-row.review-candidate-row::before { content: none; }

/* 2. One consistent, refined avatar instead of random muddy hues. */
#view-leads .review-person-avatar,
.mandate-dossier .person-dossier-avatar {
  border: var(--hairline-w) solid var(--hairline-strong);
  border-radius: 50%;
  background: color-mix(in srgb, var(--burgundy) 9%, var(--surface));
  color: var(--burgundy);
  letter-spacing: 0.01em;
}
#view-leads .review-person-avatar { width: 30px; height: 30px; font-size: 11px; }

/* 3. (The rank-number rule that lived here is gone — review-desk-craft
      collapsed the three competing .review-rank rules into the single one
      near the top of the card block. This one reserved a 30px line for the
      initials avatar, which the 2026-07-28 restyle deleted from the card.) */

/* 4. Clean active row: no protruding notch, no slide, just a lift. */
#view-leads .lead-row.review-candidate-row.active {
  margin-right: 0;
  padding-right: 12px;
  border-right-color: var(--hairline-strong);
  box-shadow: 0 4px 16px rgba(55, 42, 30, 0.10);
  transform: none;
}
#view-leads .lead-row.review-candidate-row.active::after { content: none; }

/* 5. Slightly crisper resting card edge so boxes read as intentional. */
#view-leads .lead-row.review-candidate-row {
  border-radius: 10px;
  border-color: var(--hairline-strong);
}

/* ============================================================
   REVIEW-RUN DESK POLISH — PASS 2 (2026-06-18)
   Further reports: (a) the selected-row highlight read as a muddy
   pale-yellow wash (#fffaf4), (b) the dossier "Mandate focus" /
   "Your positioning" pair was incongruent — only the 2nd had a box,
   and the columns were unequal width.
   ============================================================ */

/* a. NO highlight on review rows. The user does not want a hover or
      selected fill / tint / lift / shadow (yellow, burgundy, and a
      white-lift all read as noise here). Keep every row flat like a
      resting row; only the thin verdict left-spine remains, which is
      already on every row. */
#view-leads .lead-row.review-candidate-row:hover,
#view-leads .lead-row.review-candidate-row.active,
#view-leads .lead-review-desk.is-person-open .lead-row.review-candidate-row.active {
  background: color-mix(in srgb, var(--surface) 88%, var(--canvas));
  border-top-color: var(--hairline-strong);
  border-right-color: var(--hairline-strong);
  border-bottom-color: var(--hairline-strong);
  box-shadow: none;
  transform: none;
  margin-right: 0;
}
/* The selected row also force-coloured its left spine burgundy — the
   last bit of selection emphasis. Let it keep its normal verdict spine
   instead, so a selected row looks identical to its unselected self. */
#view-leads .review-candidate-row.active[data-verdict="brief"] { border-left-color: var(--burgundy); }
#view-leads .review-candidate-row.active[data-verdict="route"] { border-left-color: var(--sage); }
#view-leads .review-candidate-row.active[data-verdict="evidence"] { border-left-color: #A86B1F; }
#view-leads .review-candidate-row.active[data-verdict="avoid"] { border-left-color: var(--ink-faint); }

/* The outreach "Opening line" card also leaned on #fffaf4. */
.person-opener {
  background: color-mix(in srgb, var(--burgundy) 4%, var(--surface));
}

/* b. Congruent outreach header: equal columns, and both cards get the
      same boxed treatment (previously only "Your positioning" did). */
.person-outreach-head {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.person-outreach-head > div,
.person-outreach-head > div:nth-child(2) {
  padding: 12px 14px;
  border: var(--hairline-w) solid var(--hairline-strong);
  border-left: 2px solid color-mix(in srgb, var(--burgundy) 45%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--burgundy) 3.5%, var(--surface));
}

/* ============================================================
   DISCOVER WIDTH — PASS 3 (2026-06-18)
   The Discover view was a fixed two-column grid
   (form minmax(520,720) + rail clamp(380,30vw,500)), left-aligned,
   so on a wide monitor it stopped at ~1250px and left the whole right
   half of the screen empty ("not stretched enough"). The view-level
   max-width cap is already lifted globally; the remaining problem is
   the fixed track sizes. Let the live-results rail take the freed
   width (1fr) so the layout fills the monitor — wider rows also mean
   less truncation of the route descriptions.
   ============================================================ */
@media (min-width: 1024px) {
  #view-discover.active {
    grid-template-columns: minmax(500px, 660px) minmax(460px, 1fr);
    column-gap: 32px;
    max-width: none;
  }
}

/* ============================================================
   PIPELINE BOARD HEIGHT — PASS 4 (2026-06-18)
   An empty board left short 520px lanes floating in a huge grey void
   on tall monitors — it read as broken / half-loaded. Make the lanes
   fill the viewport height and centre the empty-state placeholder so
   an empty board reads as "lanes waiting for cards", not a void.
   ============================================================ */
/* NOT the pipeline board. :18605's `calc(100vh - 172px)` min-heights look
   like the same fault, but they were superseded at :19088, where the board
   takes `flex: 1 1 0; min-height: 0; overflow-y: auto` so its tall content
   scrolls inside itself instead of growing the page. Re-declaring a large
   min-height at EOF wins on source order and re-breaks that: measured, the
   board leaked 89px into the document and board-heading-clip.mjs failed on
   the assertion it was written for. The dead :18605 rules are harmless
   because the later block overrides them; the fix is to leave them alone. */

/* ============================================================
   UNIFIED LAYOUT SHELL (2026-06-19, cl24)
   ------------------------------------------------------------
   Replaces the scattered per-view height fixes — each carrying its own
   hand-tuned magic offset (.landing-home calc(100vh-92px);
   #view-pipeline .pipeline-board 100vh-172px / .pipeline-column
   100vh-188px / its empty-state 100vh-280px; #view-leads
   .lead-review-desk 100vh-210px) — with ONE rule set so EVERY tab
   fills the screen the same way:

     - full width: already handled by the global .view.active{
       max-width:none} a few blocks up; computed styles confirm every
       primary container resolves to the full content width, so width
       was never the real fault;
     - full height: the active view's content fills the space below the
       single 64px sticky header, so the short-content tabs (Briefs,
       Maturity, Scanner, an empty Pipeline) stop rendering as a small
       top-left box with a grey --canvas void to the right and below.

   Mechanism: the workspace is a flex column pinned to >=100vh, the
   sticky header is its only fixed-height row, and the active view grows
   to claim the rest. The height is DERIVED by flex rather than computed
   as 100vh-minus-a-guess, so it stays correct at every body{zoom} step
   and whatever the header measures. topbar / kpi-grid /
   intelligence-strip are display:none, so the active view is the only
   growing row in the column.
   ============================================================ */

main.workspace {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main.workspace > .sticky-bar { flex: 0 0 auto; }

/* The active view claims the height below the header and becomes a
   vertical flex column so its content region can stretch. Home (bespoke
   full-bleed block) and Discover (bespoke 2-col grid) already fill
   correctly, so they keep their own display via these id rules. */
.view.active {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#view-home.active { display: block; }
#view-discover.active { display: grid; }

/* Each view's primary content region stretches to fill the space below
   its heading / filter bar. One selector list of the known content
   containers, not N per-view min-height caps. Settings and Home are
   intentionally absent: long, naturally-flowing stacks that must not be
   forced to grow a single child. */
.view.active > .lead-layout,
.view.active > .contacts-table,
.view.active > .followup-list,
.view.active > .pipeline-board,
.view.active > .issuers-layout,
.view.active > .scan-result {
  flex: 1 1 auto;
  min-height: 0;
}

/* Centre an empty-state placeholder inside a full-height region instead
   of letting the fixed ~180px .empty-state-card cling to the top-left.
   :has() scopes this to the empty case only — a populated pane keeps
   its normal top-aligned, scrolling layout. align-items:center also
   lets the card size to its content instead of stretching edge to edge. */
.view.active .lead-detail:has(> .empty-state-card),
.view.active .brief-detail:has(> .empty-state-card),
.view.active .issuer-detail:has(> .empty-state-card),
.view.active .lead-list:has(> .empty-state-card),
.view.active .brief-list:has(> .empty-state-card),
.view.active .contacts-table:has(> .empty-state-card),
.view.active .followup-list:has(> .empty-state-card),
.view.active .issuers-list:has(> .empty-state-card) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
}

/* Briefs is the one list/detail view that hides its detail pane
   (display:none) when nothing is selected, so an empty draft list left
   the placeholder crammed into a narrow left column beside an empty
   second column. With no briefs, collapse the 2-pane grid to one
   full-width column and let the list pane centre the placeholder.
   (Leads / Issuers keep a populated detail pane, so they are untouched.) */
#view-briefs.active .brief-layout:has(.brief-list > .empty-state-card) {
  grid-template-columns: 1fr;
}
#view-briefs.active .lead-list-pane:has(.brief-list > .empty-state-card) {
  display: flex;
  flex-direction: column;
}

/* Maturity is the one awkward shape: its empty-state lives in
   .maturity-summary ABOVE a header-only table. With no rows, hide the
   empty table and let the summary claim + centre the height; with data,
   both render at their natural size. */
#view-maturity.active:has(.maturity-summary .empty-state-card) .maturity-table-wrap {
  display: none;
}
#view-maturity.active:has(.maturity-summary .empty-state-card) .maturity-summary {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Scanner: an idle (never-run) result area is genuinely empty markup.
   Fill it and turn the void into an intentional, centred placeholder. */
#view-scanner.active .scan-result {
  flex: 1 1 auto;
  min-height: 0;
}
#view-scanner.active .scan-result:empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
}
#view-scanner.active .scan-result:empty::before {
  content: "Run a scan to pull contacts, service signals, and an outreach angle from a public page.";
  max-width: 360px;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.5;
}

/* Home worklist with sparse data (e.g. the pilot user's 3-lead worklist)
   left a few cards packed top-left with a tall grey void below — the
   .lh-grid fills its height (flex:1) but align-content:start pinned the
   single row to the top. `safe center` balances the few cards in the
   filled grid; when the worklist is long enough to overflow, `safe`
   falls back to start so it still scrolls naturally from the top. */
.landing-home .lh-grid { align-content: safe center; }

/* Fix (cl24-0619): "Capital Markets" brand-label overlapped the fixed side
   rail. The base .sticky-bar rule (~L12818) uses `margin: 0 -28px 2px` as a
   full-bleed hack that assumed the workspace carried 28px of horizontal
   padding to negate. A later layout pass dropped that padding (workspace
   padding-left is now 0), so the -28px bleed pulled the brand-label to x=46,
   10px under the 56px-wide fixed sidebar. Drop the horizontal bleed on the
   non-home views so the bar sits flush against the rail's right edge instead
   of under it. Home v3 / Discover v2 already set `margin: 0` (~L15170). */
.app-shell:not(.hidden) .sticky-bar {
  margin-left: 0;
  margin-right: 0;
  padding: 18px var(--canvas-pad-x) 14px;
  min-height: 0;
  background: var(--canvas);
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Match the brand-label slash spacing Home v3 / Discover v2 use, so
   "Capital Markets / Pipeline" reads with a gap instead of jammed together. */
.app-shell:not(.hidden) .sticky-bar-brand-label {
  gap: 10px;
}

/* Find-leads runs history (left column, under the search form) + the
   non-destructive Clear / Show-all controls on the live results rail. */
.discover-runs-history {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel, #fff);
}
.discover-runs-history .drh-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.discover-runs-history .drh-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.discover-runs-history .drh-count {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--faint);
}
.discover-runs-history .drh-empty {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--faint);
}
.discover-runs-history .drh-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.discover-runs-history .drh-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: default;
  color: var(--ink);
}
.discover-runs-history .drh-row.is-openable { cursor: pointer; }
.discover-runs-history .drh-row.is-openable:hover { background: rgba(20, 184, 166, 0.07); }
.discover-runs-history .drh-row:disabled { opacity: 0.7; }
.discover-runs-history .drh-row-terms {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.discover-runs-history .drh-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--faint);
}
.discover-runs-history .drh-row-count { color: var(--brand, #0f766e); font-weight: 600; }
.discover-runs-history .drh-row-status { text-transform: capitalize; }

.dv2-live-rail-actions {
  margin-left: auto;
  display: inline-flex;
  gap: 8px;
}
.dv2-live-rail-clear {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  background: transparent;
  color: var(--ink-soft, #555);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.dv2-live-rail-clear:hover {
  border-color: var(--brand, #0f766e);
  color: var(--brand, #0f766e);
}
.dv2-live-rail-clear.is-restore {
  color: var(--brand, #0f766e);
  border-color: rgba(20, 184, 166, 0.4);
}

/* ============================================================
   P1-1 (2026-06-19): sparse home worklist void.
   The cl25 fix centred the grid contents (`align-content: safe center`),
   which on Sarah's 3-lead home dropped the single card row into the middle
   of the tall grid — a large gap directly UNDER the "People to reach"
   heading that read as broken. Instead, top-align the cards right under the
   heading and stop the grid stretching to fill the viewport when the
   worklist is short (spare space falls below the cards, as in any normal
   list). The 0-lead "Build your worklist" hero stays centred — it's a
   single CTA and centring is intentional there. Long worklists keep their
   natural top-down scroll. Last-wins: overrides the base `.lh-grid`
   (flex:1 1 auto / align-content:start) and the cl25 `safe center`.
   ============================================================ */
.landing-home .lh-grid:has(.lh-card) {
  align-content: start;
  flex-grow: 0;
}
.landing-home .lh-grid:has(.lh-empty) {
  align-content: center;
  flex-grow: 1;
}

/* P1-2 (2026-06-19): firm-only leads (no named contact found) show the firm
   name once + this "find the owner" instruction instead of repeating the
   company as a fake person name ("Macfarlanes / Macfarlanes"). Styled as a
   muted status line, not data. */
.landing-home .lh-card .lh-firm-empty {
  font-style: italic;
  color: var(--ink-soft, #8a8784);
}

/* ============================================================
   WAVE 3 — IA collapse to Home + 3 tabs
   Top nav now shows only Home / Find people (discover) / Review
   runs (leads) / Board & contacts (pipeline). Briefs, Follow-ups
   and Settings leave the nav: Settings lives on the sticky-bar
   gear; Briefs + Follow-ups + Contacts fold into the Board hub
   sub-nav below. The buttons stay in the DOM (display:none, not
   removed) so routing, deep-links, keyboard handlers and the
   nav-tab-count tests are unaffected — same idiom as the pilot
   lean-nav blocks higher up.
   ============================================================ */
.nav-tab#tab-briefs,
.nav-tab#tab-followups,
.nav-tab#tab-settings {
  display: none !important;
}
/* With four entries the Workspace / Operations section dividers add
   noise — hide them too. */
.nav-tabs .nav-section-label {
  display: none !important;
}

/* Board hub sub-nav — a segmented control shown only while one of the
   board-family views (pipeline / contacts / followups / briefs) is
   active. Each segment routes through switchTab, so the active segment
   can be derived purely from body[data-active-tab]. */
.board-subnav {
  display: none;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 0 2px;
  margin: 0;
}
body[data-active-tab="pipeline"] .board-subnav,
body[data-active-tab="contacts"] .board-subnav,
body[data-active-tab="followups"] .board-subnav,
body[data-active-tab="briefs"] .board-subnav {
  display: flex;
}
.board-subnav-tab {
  appearance: none;
  border: 1px solid var(--line, #e5e5df);
  background: var(--panel, #ffffff);
  color: var(--ink-soft, #3c4852);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.board-subnav-tab:hover {
  color: var(--burgundy, #7a1f2b);
  border-color: var(--burgundy, #7a1f2b);
}
.board-subnav-tab:focus-visible {
  outline: 2px solid var(--burgundy, #7a1f2b);
  outline-offset: 2px;
}
/* Active segment mirrors the active board-family view (aria-current set by
   switchTab, so it doubles as the a11y current-page marker). Burgundy is the
   app-wide selected/primary colour — matches the sidebar active tab. */
.board-subnav-tab[aria-current="page"] {
  background: var(--burgundy, #7a1f2b);
  border-color: var(--burgundy, #7a1f2b);
  color: #ffffff;
}

/* ============================================================
   WAVE 4 — Home launcher row
   Three IA destination cards (Start a run / Review runs / Board &
   contacts) sitting above the worklist, turning Home into a hub
   without displacing the worklist. Wired by the existing
   [data-home-nav] handler, no new JS.
   ============================================================ */
.lh-launch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 4px 0 24px;
}
.lh-launch-card {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 16px 18px;
  border: 1px solid var(--line, #e5e5df);
  border-radius: 12px;
  background: var(--panel, #ffffff);
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.lh-launch-card:hover {
  border-color: var(--burgundy, #7a1f2b);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(17, 23, 25, 0.07);
}
.lh-launch-card:focus-visible {
  outline: 2px solid var(--burgundy, #7a1f2b);
  outline-offset: 2px;
}
.lh-launch-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 10px;
  background: var(--bg-2, #efeee9);
  color: var(--burgundy, #7a1f2b);
  transition: background 120ms ease, color 120ms ease;
}
.lh-launch-card:hover .lh-launch-icon {
  background: var(--burgundy, #7a1f2b);
  color: #ffffff;
}
.lh-launch-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.lh-launch-text strong {
  font-size: 15px;
  color: var(--ink, #111719);
}
.lh-launch-text span {
  font-size: 12.5px;
  color: var(--ink-soft, #3c4852);
  line-height: 1.35;
}
@media (max-width: 760px) {
  .lh-launch { grid-template-columns: 1fr; }
}

/* ============================================================
   WAVE 5 — review-run page: scroll long candidate lists
   ============================================================ */
/* Cap the candidate list to the desk height and let it scroll, instead of
   growing the whole page on a long run. Short runs sit under the cap, so this
   is a no-op until a run actually overflows. (The overview-panel void and the
   card declutter from the Wave 5 plan are deferred — they need real visual
   verification this headless harness can't give.) */
#view-leads .lead-list-pane {
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  min-height: 0;
}

/* ============================================================
   PIPELINE BOARD — keep the heading clear of the sticky bar (cl30, 2026-06-25)
   ------------------------------------------------------------
   Conor's "top left is a bit squished": the kanban columns
   (.pipeline-column min-height ~520px, taller with real cards) grew
   main.workspace past 100vh, so the BODY scrolled and the .view-heading —
   carrying the "Pipeline" eyebrow and the "Add from review" button — slid
   off the top of the page. Pin the workspace to the viewport ONLY while the
   board is the active view (:has scopes it; every other tab keeps its
   natural page-growth scroll), so the tall board scrolls INSIDE
   .pipeline-board instead of growing the page. The heading and its actions
   then stay put at the top at every scroll position. Verified with real
   layout by tests/e2e/board-heading-clip.mjs. */
main.workspace:has(> #view-pipeline.active) {
  height: 100vh;
  min-height: 0;
}
#view-pipeline.active > .view-heading {
  flex: 0 0 auto;
}
#view-pipeline.active > .pipeline-board {
  /* flex-basis:0 (not auto) so the board takes EXACTLY the free space below
     the heading and never spills its tall content past the view — auto basis
     measures the 1200px+ content and leaks ~40px through to the body. */
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

/* ============================================================
   SETUP WIZARD STEP INDICATOR — repaint for the light card (cl31, 2026-06-25)
   ------------------------------------------------------------
   The original palette was rgba(255,255,255,...) — built for a dark setup
   card. The card is light, so the inactive "Coverage"/"Firm" dots rendered
   white-on-white (invisible) and the active "Profile" pill was white text on
   an 18%-opacity burgundy tint (washed out next to the solid Continue button).
   Repaint: inactive = muted ink on a hairline white chip; active = SOLID
   burgundy + white, matching .primary-button. */
.setup-step-indicator {
  color: var(--muted, #66737f);
}
.setup-step-dot {
  border-color: var(--line, #e5e5df);
  background: #fff;
  color: var(--ink-soft, #3c4852);
}
.setup-step-dot > span {
  background: #edefec;
  color: var(--muted, #66737f);
}
.setup-step-dot.is-active {
  border-color: var(--mandate-red, #7C1F2A);
  background: var(--mandate-red, #7C1F2A);
  color: #fff;
}
.setup-step-dot.is-active > span {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}
.setup-step-dot.is-done {
  border-color: rgba(15, 122, 90, 0.4);
  color: #0f7a5a;
}
.setup-step-dot.is-done > span {
  background: rgba(15, 122, 90, 0.16);
  color: #0f7a5a;
}

/* ============================================================
   BOARD HUB — decongest the sub-nav <-> heading stack (cl32, 2026-06-25)
   The Pipeline/Contacts/Follow-ups/Briefs pills sat 2px above the
   "PIPELINE / Deal stages" eyebrow, so the whole top-left read as one
   smushed block jammed under the sticky bar. Separate the nav row from
   the section heading with real whitespace + a hairline, and give the
   heading room to breathe. Applies to every board-family view. */
.board-subnav {
  padding: 18px 0 14px;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--line, #e5e5df);
  justify-content: center;
}
body[data-active-tab="pipeline"] .view-heading,
body[data-active-tab="contacts"] .view-heading,
body[data-active-tab="followups"] .view-heading,
body[data-active-tab="briefs"] .view-heading {
  margin-bottom: 20px;
}
body[data-active-tab="pipeline"] .view-heading .eyebrow,
body[data-active-tab="contacts"] .view-heading .eyebrow,
body[data-active-tab="followups"] .view-heading .eyebrow,
body[data-active-tab="briefs"] .view-heading .eyebrow {
  margin-bottom: 8px;
}

/* ============================================================
   BOARD COLUMNS — keep readable on narrow/medium screens (cl32, 2026-06-25)
   The 6-col grid is built for ~1600px. Below that the 1fr tracks collapse
   (~130px at an 880px pane), crushing cards and stacking the Teams-call
   time one char per line. Hold a readable 250px column and scroll the board
   horizontally instead. >1200px (incl. the 1440px clip test) is untouched. */
@media (max-width: 1200px) {
  #view-pipeline.active > .pipeline-board {
    grid-template-columns: repeat(6, 250px) !important;
    overflow-x: auto;
  }
}
/* Never let the collapsed Teams-call time stack vertically, whatever the width. */
.teams-card-strip strong {
  white-space: nowrap;
}

/* Reach-out: best-guess (inferred) email badges + notes. An inferred address
   must always read as provisional, never as a verified contact. Amber = built
   from the firm's observed format; deeper orange = format assumed. */
.email-guess-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  white-space: nowrap;
  vertical-align: middle;
  color: #8a5a00;
  background: #fff4d6;
  border: 1px solid #f0c965;
}
.email-guess-badge.is-assumed {
  color: #9a3412;
  background: #ffe6d5;
  border-color: #f4a87a;
}
.person-action-note {
  margin: 2px 6px 6px;
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #8a5a00;
  background: #fff4d6;
  border: 1px solid #f0c965;
}
.person-action-note.is-assumed {
  color: #9a3412;
  background: #ffe6d5;
  border-color: #f4a87a;
}


/* ============================================================================
   MOBILE OPTIMISATION PASS (2026-07-01) — Sarah uses Mandate on her phone.
   Appended last, matching the body[data-home-version="v3"] specificity so it
   actually beats the pinned narrow-rail rules (line ~16013). Scope: <=640px.
   Screenshot loop: tests/e2e/screenshots/mobile-pass. Fixes: (1) left rail ->
   bottom tab bar + full-width content, (2) Find-leads config no longer runs
   off-screen, (3) top bar de-crammed, (4) install tip + feedback bubble docked
   above the nav instead of over content.
   ========================================================================== */
@media (max-width: 640px) {
  /* shell: reclaim the full width, drop the reserved gutter */
  body[data-home-version="v3"] .app-shell:not(.hidden) {
    padding-left: 0 !important;
    padding-bottom: 78px !important;
  }
  /* sidebar -> fixed bottom tab bar */
  body[data-home-version="v3"] .sidebar {
    position: fixed !important; top: auto !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important; min-width: 0 !important; max-width: none !important;
    height: auto !important; min-height: 0 !important;
    flex-direction: row !important; align-items: stretch !important; gap: 0 !important;
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important; z-index: 200 !important;
    border-right: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.22) !important;
  }
  body[data-home-version="v3"] .sidebar .brand-block,
  body[data-home-version="v3"] .sidebar .sidebar-footer,
  body[data-home-version="v3"] .sidebar .nav-section-label { display: none !important; }
  body[data-home-version="v3"] .sidebar .nav-tabs {
    flex-direction: row !important; align-items: stretch !important;
    gap: 2px !important; width: 100% !important; flex: 1 1 auto !important;
    padding: 0 !important; margin: 0 !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  body[data-home-version="v3"] .sidebar .nav-tabs::-webkit-scrollbar { display: none !important; }
  body[data-home-version="v3"] .sidebar .nav-tab {
    flex: 0 0 auto !important; width: auto !important; height: auto !important;
    min-height: 0 !important; min-width: 62px !important;
    flex-direction: column !important; align-items: center !important; justify-content: center !important;
    gap: 3px !important; padding: 6px 6px !important; border-radius: 12px !important;
  }
  body[data-home-version="v3"] .sidebar .nav-tab .nav-tab-label {
    position: static !important; width: auto !important; height: auto !important;
    margin: 0 !important; padding: 0 !important; clip: auto !important; overflow: visible !important;
    white-space: nowrap !important; border: 0 !important; opacity: 0.92 !important;
    font-size: 9.5px !important; line-height: 1.05 !important; letter-spacing: 0 !important;
  }
  main.workspace, .app-shell > main, .app-shell > .view-scroll { padding-bottom: 78px !important; }

  /* top bar: wrap + truncate so the name never clips */
  .topbar { flex-wrap: wrap !important; gap: 8px !important; }
  .topbar-copy, .tb-breadcrumb {
    min-width: 0 !important; max-width: 100% !important;
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  }
  .topbar-actions { flex: 0 0 auto !important; gap: 6px !important; margin-left: auto !important; }

  /* Find-leads config: stack, full-width run button (was off-screen) */
  .dv2-mode-row { flex-direction: column !important; gap: 8px !important; }
  .dv2-mode-card { width: 100% !important; min-width: 0 !important; }
  .dv2-runtime-slot, .dv2-config { max-width: 100% !important; overflow-x: hidden !important; }
  .dv2-config-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .dv2-config-col { min-width: 0 !important; width: 100% !important; }
  .dv2-select, .dv2-select-trigger { width: 100% !important; box-sizing: border-box !important; }
  .dv2-config-footer, .dv2-config-actions { flex-wrap: wrap !important; gap: 10px !important; }
  .dv2-primary { width: 100% !important; justify-content: center !important; }

  /* floating overlays: dock above the bottom nav, never over content */
  body .feedback-fab {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; right: 10px !important;
    transform: scale(0.82) !important; transform-origin: bottom right !important;
    opacity: 0.94 !important; z-index: 205 !important;
  }
  /* one-time install tip: full-width, compact, docked above the nav */
  #mandateWelcomeTip.welcome-tip-card {
    left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 14px 16px 12px !important; font-size: 0.84rem !important;
  }
}

/* Mobile round 2 (2026-07-02): compact the review-run explainer + hint the
   bottom-nav scroll. The serif "Pick the person worth opening." hero + long
   paragraph ate a full phone screen before any people appeared (part of the
   pilot "overwhelming on phone" feedback); keep the stats + source context,
   drop the decoration. The bottom tab bar scrolls horizontally but nothing
   signalled more tabs off-screen - add a right-edge fade. */
@media (max-width: 640px) {
  .review-overview-hero h3 { font-size: 19px !important; line-height: 1.2 !important; margin: 2px 0 0 !important; }
  .review-overview-hero > p:not(.eyebrow) { display: none !important; }
  .review-overview-panel { padding: 14px !important; }
  .review-overview-card p { font-size: 12.5px !important; }

  body[data-home-version="v3"] .sidebar::after {
    content: "" !important;
    position: absolute !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
    width: 26px !important; pointer-events: none !important;
    background: linear-gradient(90deg, transparent, var(--nav, #1c1917)) !important;
    opacity: 0.9 !important;
  }
}

/* Mobile round 3 (2026-07-02): fixes found by the r2 screenshot review.
   (1) The r2 nav-scroll fade used var(--nav) (near-black) but the bottom tab
       bar is white (--sidebar-bg #fff) — it rendered as a black smudge on the
       right end of the nav. Fade to the bar's actual background instead.
   (2) The header search pill collapses to ~81px on a phone, half of it the
       decorative "⌘ K" chip — useless on touch. Hide the pill on mobile and
       show the round search icon (same affordance every other tab already
       uses); it opens the command palette on tap.
   (3) The install tip ate 37% of the first-run viewport — tighten the step
       list and title, same content.
   (4) Board & contacts: the six 230px+ grid columns scroll inside the board;
       give it column-per-swipe scroll-snap with a peek of the next stage so
       it reads as a deck, not a clipped table. */
@media (max-width: 640px) {
  body[data-home-version="v3"] .sidebar::after {
    background: linear-gradient(90deg, transparent, var(--sidebar-bg, #ffffff)) !important;
  }

  .sticky-bar-cmd-wrap { display: none !important; }
  .sticky-bar-cmd-icon { display: inline-flex !important; }

  #mandateWelcomeTip.welcome-tip-card .welcome-tip-title {
    font-size: 1.02rem !important; margin: 2px 0 0 !important; line-height: 1.25 !important;
  }
  #mandateWelcomeTip.welcome-tip-card .welcome-tip-steps {
    margin: 8px 0 10px !important; padding-left: 18px !important;
  }
  #mandateWelcomeTip.welcome-tip-card .welcome-tip-steps li {
    margin: 0 0 5px !important; font-size: 0.8rem !important; line-height: 1.35 !important;
  }
  #mandateWelcomeTip.welcome-tip-card .welcome-tip-got-it {
    padding: 8px 16px !important; font-size: 0.85rem !important;
  }

  .pipeline-board {
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(82vw, 340px) !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    overscroll-behavior-x: contain !important;
    scroll-padding-left: 12px !important;
  }
  .pipeline-column {
    scroll-snap-align: start !important;
    min-height: 380px !important;
  }
}

/* ============================================================================
   MOBILE POLISH PASS r4 (2026-07-07) - eyes-on findings from a full phone drive
   (portrait + landscape + 360px, real logged-in app). Appended at EOF so these
   refine earlier rules by source order (same selectors -> no !important race).
   (1) Kill iOS input zoom-on-focus: Safari zooms any focused native control
       under 16px. Base is body{font-size:14px} + input{font:inherit}, so the
       setup wizard's first-screen fields and every filter/search zoomed on tap.
   (2) Make the leads/contacts filter selects a real 44px tap target.
   (3) Let the sticky top bar clear the notch in the standalone PWA (now that
       viewport-fit=cover is set, safe-area-inset-top resolves non-zero on iOS).
   (4) Size the mobile scroll caps/pins to the DYNAMIC viewport (dvh) so the
       last rows never hide behind the 78px bottom tab bar under the Safari
       address-bar toolbar; give the capped list its own bottom clearance.
   ========================================================================== */
@media (max-width: 640px) {
  /* (1) no zoom-on-tap */
  input, select, textarea { font-size: 16px; }

  /* (2) 44px filter controls (also >=16px, so they never zoom) */
  .leads-filter-bar input, .leads-filter-bar select,
  .contacts-filter-bar input, .contacts-filter-bar select {
    min-height: 44px;
    font-size: 16px;
  }

  /* (3) clear the notch / status bar under black-translucent */
  .topbar { padding-top: env(safe-area-inset-top, 0px); }

  /* (4) dynamic-viewport heights + bottom-nav clearance */
  main.workspace:has(> #view-pipeline.active) { height: 100dvh; }
  #view-leads .lead-list-pane {
    max-height: calc(100dvh - 150px);
    padding-bottom: 78px;
    scroll-padding-bottom: 78px;
  }
}

/* Anti-zoom, width-independent: iOS zooms a focused <16px native control in ANY
   orientation, and a landscape phone is >640px so the portrait block above
   misses it. hover:none + pointer:coarse = a real touch device with no mouse
   (excludes desktops and touch laptops, whose trackpad reports pointer:fine),
   so desktop keeps its 14px controls. */
@media (hover: none) and (pointer: coarse) {
  /* !important so this beats the component filter-bar rules (.leads-filter-bar
     select etc., specificity 0,1,1, not media-scoped) that otherwise win at
     >640px in landscape. Only touch devices match this query, so desktop keeps
     its own control sizing untouched. */
  input, select, textarea { font-size: 16px !important; }
}

/* ================================================================
   cl37-0724 — Find-leads de-goring
   Fabricated demo content (LIVE ticker, mock "Recent searches", fake
   scan choreography) was removed from the Discover page. These rules
   restyle what remains around the REAL crawl: a single-column,
   form-first layout, the "Describe" setup panel, and template token
   pills. Appended per the styles.css append-only rule.
   ================================================================ */

/* --- DV2 single-column layout (cl37) ---------------------------
   Replaces the 2-col "form left / rail right" grid (see "DISCOVER
   live rail v2" above). The form IS the page: one centred column,
   the live rail drops BELOW it as a full-width section (and only
   when a crawl is running or people were found — it is hidden at
   idle), then #discoverRunsHistory below that. Same
   #view-discover.active grid, single column, so there is no
   one-sided grey void (the UNIFIED LAYOUT SHELL void-bug history). */
#view-discover.active {
  grid-template-columns: minmax(0, 1fr);
  /* !important to beat the UNIFIED LAYOUT SHELL's `.view.active {
     max-width: none !important }`. Centred via margin auto so the canvas
     sits symmetrically on BOTH sides — a centred column, not the
     one-sided grey void the shell was built to kill. */
  max-width: 840px !important;
  margin: 0 auto;
  column-gap: 0;
  row-gap: 20px;
  padding-right: 0;
  /* The shell height-fills the view; without this, grid distributes the
     leftover height between rows and "Past searches" floats ~200px below
     the form. Stack rows at the top, let the bottom stay canvas. */
  align-content: start;
}
#view-discover.active .discover-v2 { max-width: 100%; }
/* Rail + runs-history are separate cards below the form; inset them by
   the canvas padding so their edges line up with the config card. */
#view-discover.active #dv2LiveRail,
#view-discover.active #discoverRunsHistory {
  margin-left: var(--canvas-pad-x);
  margin-right: var(--canvas-pad-x);
}
/* Rail flows below the form instead of sticking in a right column. */
#view-discover.active .dv2-live-rail {
  position: static;
  top: auto;
  max-height: none;
  overflow: visible;
}
/* Idle rail carries no content — keep it out of the flow entirely so it
   leaves no empty box above the runs history. */
.dv2-live-rail.dv2-live-rail--idle-hidden { display: none; }

/* --- DV2 describe setup panel (cl37) ---------------------------
   Shown inside the runtime slot when "Describe what you want" is picked
   and a web-search key isn't connected. Muted card consistent
   with .dv2-config; a single explicit "Connect" button (no teleport). */
.dv2-describe-setup {
  border: 0.5px solid var(--hairline-default);
  border-radius: 10px;
  background: var(--surface);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dv2-describe-setup-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.dv2-describe-setup-body {
  margin: 0;
  max-width: 60ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.dv2-describe-setup .dv2-primary { align-self: flex-start; }

/* --- Template token pills (cl37) -------------------------------
   Subject previews render {{tokens}} as small muted chips instead of
   raw "{{leadCompany}}" gore. */
.tpl-token {
  display: inline-block;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--hover-tint, rgba(122, 31, 42, 0.05));
  border: 0.5px solid var(--hairline-default, #d8d8d8);
  color: var(--ink-muted);
  font-size: 0.92em;
  line-height: 1.5;
  text-transform: lowercase;
}

/* Quiet the template list's category chip — one muted lowercase pill,
   scoped to #templatesList so watchlist / saved-search cadences that
   share .saved-search-cadence keep their own louder style. */
#templatesList .saved-search-cadence {
  background: var(--hover-tint, rgba(122, 31, 42, 0.05));
  color: var(--ink-muted);
  border: 0.5px solid var(--hairline-default, #d8d8d8);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase;
}

/* ---------------------------------------------------------------- */
/* DV2 MARKET DROPDOWN — long registry (cl39-0724)                  */
/* The pack registry now holds 15+ markets; without a height cap the */
/* absolute-positioned dropdown runs past the viewport bottom on     */
/* laptop screens. Cap and scroll instead. overflow-y:auto keeps the */
/* border-radius clip that the base rule's overflow:hidden provided. */
/* ---------------------------------------------------------------- */

.dv2-select[data-dv2-dropdown="market"] .dv2-dropdown {
  max-height: min(420px, 55vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------------------------------------------------------------- */
/* REVIEW DESK — ZERO-STATE SINGLE COLUMN (cl40-0728)                */
/*                                                                   */
/* The review desk is a two-column grid (people list | dossier). On a */
/* workspace with no leads renderLeads() blanks #leadDetail to an     */
/* EMPTY STRING rather than an empty-state card, so neither of the    */
/* UNIFIED LAYOUT SHELL rules above catches it: the centring rule     */
/* keys off `.lead-detail:has(> .empty-state-card)`, and the Briefs   */
/* column-collapse is scoped to #view-briefs (its comment even says   */
/* "Leads keeps a populated detail pane" — true once a run has        */
/* landed, false on a fresh workspace). Result: the empty-state card  */
/* clings to the top of a 522px left column with a ~780px grey void   */
/* beside it. That is the state the live pilot sits in (0 leads), so  */
/* it is the first thing the user sees on "Review runs".             */
/*                                                                   */
/* Collapse to one column and drop the blank dossier, exactly as     */
/* Briefs already does; the existing `.lead-list:has(> .empty-state- */
/* card)` rule then centres the card once the pane is a flex column. */
/* Applies to both empty branches (zero leads and filters-hid-       */
/* everything) because both render the card into #leadList; a live   */
/* scan renders skeletons instead and keeps the normal two-column    */
/* desk.                                                             */
/* ---------------------------------------------------------------- */

#view-leads.active .lead-review-desk:has(.lead-list > .empty-state-card) {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

#view-leads.active .lead-review-desk:has(.lead-list > .empty-state-card) .lead-detail {
  display: none;
}

#view-leads.active .lead-list-pane:has(.lead-list > .empty-state-card) {
  display: flex;
  flex-direction: column;
}

/* The card is a fixed-ish block; without a cap it stretches the full
   width of the now-full-width pane and reads as a banner rather than a
   placeholder. Same max-width the dossier placeholders use. */
#view-leads.active .lead-list:has(> .empty-state-card) .empty-state-card {
  width: 100%;
  max-width: 460px;
}

/* ==========================================================================
   UI PASS — 2026-07-28, from Conor's first hands-on session.
   Append-only block (house rule). Nine items, his wording in the comments.
   ========================================================================== */

/* [9] "we need a full separation from the title bar ... our mandate red maroony
   colour in a delicate bar under". One brand hairline under the sticky chrome
   on EVERY view. --burgundy is the existing brand token; nothing new invented.
   Delicate = 2px, softened at the ends so it reads as a rule, not a stripe. */
.sticky-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(122, 31, 42, 0.28) 0%,
    var(--burgundy) 12%,
    var(--burgundy) 88%,
    rgba(122, 31, 42, 0.28) 100%
  );
}

/* [7] "the search settings and notifications icons should be top right."
   On Review runs the cluster sat immediately after the breadcrumb because the
   centred command pill is hidden there, collapsing the flex row. Pushing the
   cluster with an auto margin makes it top-right in every view regardless of
   what is or is not rendered between it and the wordmark. */
.sticky-bar-right {
  margin-left: auto !important;
}

/* [1] "on a clean plate this should surely only have build your worklist
   central and larger. none of those top things."
   Zero-lead home: the three IA cards and the desk header both go, leaving the
   hero as the only thing on the page. Both return the moment a lead exists —
   this is keyed on .home-empty, which renderHome already maintains. */
body.home-empty .lh-launch,
body.home-empty .lh-head {
  display: none !important;
}
body.home-empty .landing-home .lh-empty {
  max-width: 700px;
  gap: 16px;
  padding: 8px 20px 40px;
}
body.home-empty .landing-home .lh-empty-art {
  width: 92px;
  height: 92px;
  border-radius: 26px;
}
body.home-empty .landing-home .lh-empty-art svg {
  width: 42px;
  height: 42px;
}
body.home-empty .landing-home .lh-empty h2 {
  margin: 10px 0 0;
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  line-height: 1.1;
}
body.home-empty .landing-home .lh-empty p {
  font-size: 1.06rem;
  line-height: 1.55;
  max-width: 52ch;
}
body.home-empty .landing-home .lh-empty-cta {
  margin-top: 14px;
  font-size: 1.08rem;
  padding: 16px 38px;
}
body.home-empty .landing-home .lh-empty-opts {
  margin-top: 30px;
  gap: 14px;
}
body.home-empty .landing-home .lh-opt {
  padding: 17px;
}
@media (max-width: 680px) {
  body.home-empty .landing-home .lh-empty h2 { font-size: 1.9rem; }
  body.home-empty .landing-home .lh-empty p { font-size: 0.98rem; }
  body.home-empty .landing-home .lh-empty-cta { width: 100%; }
}

/* [2] + [3] "this should all be central not pushed to the right, and slightly
   larger to fill the page" / "while crawling this should also be central".
   The column already had `margin: 0 auto`, but unqualified — the layout shell's
   own margin rule won on cascade order, so the canvas hugged the left with a
   ~500px void on the right. Both the form and the scanning panel live inside
   #view-discover, so centring the view fixes both states at once. */
body[data-discover-version="v2"][data-active-tab="discover"] #view-discover.active {
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
}
/* With a wider column the 1.4fr/1fr split leaves the right field stranded;
   even columns read as one form. */
body[data-discover-version="v2"] .dv2-config-grid {
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

/* [4] "I dont want work this person there. the circle with their initials is
   useless, i dont think that card is attractive as it could be."
   Chip and avatar are gone from the markup; what is left is re-spaced into a
   strict hierarchy — name, role, firm, likelihood, one-line reason. */
.review-candidate-open {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.review-candidate-row .review-candidate-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.review-candidate-row .lead-row-line-identity {
  display: block;
  margin: 0;
}
.review-candidate-row .review-person-heading {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.review-candidate-row .review-person-name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.011em;
  line-height: 1.25;
  color: var(--ink);
}
.review-candidate-row .review-person-role {
  font-size: 0.855rem;
  line-height: 1.35;
  color: var(--ink-muted);
}
.review-candidate-row .review-person-role.is-missing {
  font-style: italic;
  color: var(--ink-faint);
}
.review-candidate-row .review-person-firm {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-muted);
}
.review-candidate-row .review-decision-likelihood {
  margin: 2px 0 0;
}
.review-candidate-row .review-candidate-reason {
  margin: 0;
  font-size: 0.855rem;
  line-height: 1.4;
  color: var(--ink-muted);
}
.review-candidate-row .review-candidate-facts {
  margin-top: 1px;
  opacity: 0.9;
}

/* [5] "the drop down for the person's name isnt attached properly to the name."
   openPersonActionMenu measures the caret in viewport coordinates and
   re-measures on scroll/resize, so the menu must be fixed, not absolute — the
   old absolute + scrollY arithmetic is exactly what let it drift. The notch
   gives it a visible join to the trigger, and its offset is written per open
   by positionMenu (--person-menu-notch-left) so it lands on the caret's centre
   at any width and at any clamped position. The literal 20px that used to sit
   here only ever pointed at the caret by coincidence. */
.person-action-menu {
  position: fixed;
  min-width: 200px;
}
.person-action-menu::before {
  content: "";
  position: absolute;
  top: -5px;
  left: var(--person-menu-notch-left, 20px);
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: var(--panel);
  border-left: 1px solid var(--line-strong);
  border-top: 1px solid var(--line-strong);
}

/* [8] "the feedback button can obscure the info bottom right."
   On pointer widths it collapses to a 44px puck and only grows to the labelled
   pill on hover/focus, so it stops sitting on top of the dossier rail's last
   rows. The rail also gets clearance so its final row is never underneath it.
   Phone widths already dock it above the bottom nav — left alone. */
@media (min-width: 541px) {
  .feedback-fab {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    gap: 0;
    justify-content: center;
    overflow: hidden;
    transition: width 0.18s ease, padding 0.18s ease, gap 0.18s ease,
                transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
  }
  .feedback-fab .feedback-fab-label {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.18s ease, opacity 0.14s ease;
  }
  .feedback-fab:hover,
  .feedback-fab:focus-visible {
    width: auto;
    padding: 0 18px 0 14px;
    gap: 8px;
  }
  .feedback-fab:hover .feedback-fab-label,
  .feedback-fab:focus-visible .feedback-fab-label {
    max-width: 160px;
    opacity: 1;
  }
  #view-leads.active .lead-detail {
    padding-bottom: 76px;
  }
}

/* ============================================================
   DOSSIER NARRATIVE — PACKET DE-CLUTTER (2026-07-28)

   The person packet was "visually HECTIC": a Recommendation box, a
   two-card Mandate-focus/Your-positioning header, a four-box label
   grid (RUN SIGNAL / WHY THIS PERSON / SPECIFIC ASK / PROOF TO
   MENTION) and an opener card, all stacked inside one column. Six
   bordered boxes competing, and the one thing that mattered — who
   this person is and why they are worth the call — was the most
   squashed of the lot.

   The middle is now two blocks of prose:
     .dossier-narrative  — who / why they can decide / what sparks
                           interest. The LEAD of the packet, set in
                           the serif at reading size.
     .dossier-ask        — the ask, with proof-to-mention folded in
                           underneath it rather than shouted from its
                           own box.
   RUN SIGNAL is gone (the narrative covers it), and the focus /
   positioning label-cards are gone (focus rides the ask's label,
   positioning drops to one quiet line under the opener).
   ============================================================ */

.dossier-narrative {
  display: grid;
  gap: 10px;
  padding: 4px 0 2px;
}

.dossier-narrative-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* The lead paragraph. Serif, generous leading, near-black: this is the
   sentence the user actually reads, so it gets the typographic budget
   the old squashed box never had. */
.dossier-narrative-who {
  font-family: var(--font-serif);
  font-size: 1.06rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 68ch;
}

.dossier-narrative-why,
.dossier-narrative-spark {
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--ink-soft, var(--ink));
  max-width: 68ch;
}

/* The interest hook is the pivot into the ask, so it gets a quiet rule
   rather than a border box. */
.dossier-narrative-spark {
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--burgundy) 30%, transparent);
}

.dossier-verdict-chip {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: var(--hairline-w) solid color-mix(in srgb, var(--burgundy) 28%, transparent);
  background: color-mix(in srgb, var(--burgundy) 7%, var(--surface));
  color: var(--burgundy);
  white-space: nowrap;
}

.dossier-verdict-chip.verdict-evidence {
  border-color: color-mix(in srgb, #A86B1F 34%, transparent);
  background: color-mix(in srgb, #A86B1F 8%, var(--surface));
  color: #8A5716;
}

.dossier-verdict-chip.verdict-avoid {
  border-color: var(--hairline-strong);
  background: var(--surface);
  color: var(--ink-faint);
}

/* Skeleton state: a narrative is being written detached. Deliberately
   understated — the composed copy underneath is already readable, so
   this is a progress note, not a spinner blocking content. */
.dossier-narrative-writing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.dossier-narrative-writing i {
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--burgundy) 12%, transparent) 0%,
    color-mix(in srgb, var(--burgundy) 55%, transparent) 50%,
    color-mix(in srgb, var(--burgundy) 12%, transparent) 100%
  );
  background-size: 200% 100%;
  animation: dossier-narrative-sweep 1.5s ease-in-out infinite;
}

@keyframes dossier-narrative-sweep {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dossier-narrative-writing i { animation: none; }
}

/* The ask. One block, not two: proof-to-mention sits under the ask as
   the thing you say to earn it, which is how it is actually used. */
.dossier-ask {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: var(--hairline-w) solid var(--hairline-strong);
  border-left: 3px solid color-mix(in srgb, var(--burgundy) 50%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--burgundy) 3%, var(--surface));
}

.dossier-ask-body {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
  max-width: 66ch;
}

.dossier-ask-proof {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-faint);
  max-width: 66ch;
}

/* Positioning lost its label card; it rides under the opener as one
   quiet line, which is all it ever earned. */
.dossier-positioning {
  margin-top: 6px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-faint);
}

/* The actions row is now a sibling of the narrative rather than living
   inside the old Recommendation box, so it needs its own breathing
   room instead of inheriting that box's padding. */
.person-dossier-main > .dossier-actions {
  margin: 2px 0 4px;
}

@media (max-width: 720px) {
  .dossier-narrative-who { font-size: 1.02rem; }
  .dossier-narrative-spark { padding-left: 10px; }
  .dossier-ask { padding: 11px 12px; }
  .dossier-narrative-who,
  .dossier-narrative-why,
  .dossier-narrative-spark,
  .dossier-ask-body,
  .dossier-ask-proof { max-width: none; }
}

/* [4 cont.] The likelihood signal must survive the compact rail.
   Auto-selecting the first person (item 6) means .is-person-open is now the
   normal state of the review desk, and that state hid the likelihood bar
   outright — so the one thing the list is FOR, judging who to open next, had
   nowhere to show. Restored as a hairline bar plus its High/Medium/Low tag,
   which fits the 300px rail where the full block did not. The reason line and
   fact row stay hidden there; they are shown in full in the open dossier. */
#view-leads .lead-review-desk.is-person-open .review-decision-likelihood {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0 0;
  padding: 0;
  border: 0;
  background: none;
  min-height: 0;
}
/* review-desk-craft: the hairline bar and its `> i > b` geometry are deleted
   with the bar itself. The caption is no longer hidden here either — a bare
   "HIGH" with the label suppressed was an unlabelled word of unknown
   subject, which is exactly the state the 3px rule was in. See the craft
   block at the end of the file for how the pair is laid out now. */
#view-leads .lead-review-desk.is-person-open .review-decision-likelihood > strong {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The narrative and ask render into one slot so a background arrival can be
   swapped in without rebuilding the whole packet (which would throw away the
   reader's scroll position and focus). The slot is a grid so the two sections
   keep the packet's own rhythm rather than collapsing together. */
.dossier-narrative-slot {
  display: grid;
  gap: 16px;
}

/* [4 cont.] The contact route must survive the compact rail too.
   Same cause as the likelihood bar above: .is-person-open hid the whole facts
   strip, and auto-select made that state permanent, so "Direct email" — the
   second signal the list exists to convey, and a live mailto link — vanished
   from every card. Show the route only; the evidence count and source host stay
   for the open dossier, where there is room for them. */
#view-leads .lead-review-desk.is-person-open .review-candidate-facts {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}
#view-leads .lead-review-desk.is-person-open .review-candidate-facts > :nth-child(n + 2) {
  display: none;
}

/* Attribution wave — labelled contact routes in the dossier's pulled-details
   rail. A person can publish a direct dial AND a mobile; the label the firm
   printed beside each number is what tells them apart, so it renders with the
   number rather than being dropped. */
.person-detail-label {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: 4px;
}

.person-detail-sep {
  color: var(--ink-faint);
}

/* ================================================================
   cl45-0728 — Find page: two entries, and the brand palette back

   Two problems reported off the live build:

   (1) "it's blue?" — the whole .dv2-live-rail-* family (the RECENT
       results feed and its row action drawer) was built on an indigo
       accent, #3f18aa, in 97ba0bb (Wave D1b polish, 2026-05-29).
       "Email directly" was a full-width indigo button, and the row
       badges, caret, firm line, focus ring, hover borders and the
       skeleton shimmer were indigo too, as were the CRAWLING label
       and its pulse dot. None of it is in the palette. Every one is
       remapped below onto tokens the rest of the app already uses:
       burgundy for accent, sage for positive/found, the neutral
       hairline + hover tints for chrome. Nothing new is invented.
       --brand was never defined either, so .drh-row-count and the
       rail Clear button were falling back to a hard-coded teal.

   (2) "it's got this find page doing two things" — the run setup and
       the results/past-search feed were stacked on one screen. The
       page now opens on two entries and folds one out at a time (see
       the accordion block below; behaviour in app.js/bindDv2Entry).

   Appended at EOF per the styles.css append-only rule, so these win on
   source order over the earlier rules without an !important race.
   ================================================================ */

/* ---- The two entries ------------------------------------------ */

.dv2-entry {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.dv2-entry-item {
  border: 1px solid var(--hairline-default, #d8d8d8);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color var(--t-fast, 150ms) var(--ease, ease),
              box-shadow var(--t-fast, 150ms) var(--ease, ease);
}

.dv2-entry-item:hover {
  border-color: var(--hairline-strong, #c9ccc4);
}

.dv2-entry-item[data-dv2-expanded="true"] {
  border-color: rgba(122, 31, 42, 0.28);
  box-shadow: 0 1px 0 rgba(122, 31, 42, 0.04);
}

.dv2-entry-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.dv2-entry-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background var(--t-fast, 150ms) var(--ease, ease);
}

.dv2-entry-head:hover {
  background: var(--hover-tint, rgba(122, 31, 42, 0.045));
}

.dv2-entry-head:focus-visible {
  outline: 2px solid var(--burgundy, #7A1F2A);
  outline-offset: -2px;
}

.dv2-entry-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--hover-tint, rgba(122, 31, 42, 0.045));
  border: 0.5px solid var(--hairline, rgba(122, 31, 42, 0.10));
  color: var(--ink-muted);
  transition: background var(--t-fast, 150ms) var(--ease, ease),
              color var(--t-fast, 150ms) var(--ease, ease);
}

.dv2-entry-item[data-dv2-expanded="true"] .dv2-entry-mark {
  background: var(--burgundy, #7A1F2A);
  border-color: var(--burgundy, #7A1F2A);
  color: var(--ink-on-burgundy, #FBF7EE);
}

.dv2-entry-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dv2-entry-title {
  font-family: var(--font-serif);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.dv2-entry-sub {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.dv2-entry-flag {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--burgundy, #7A1F2A);
  background: rgba(122, 31, 42, 0.08);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

.dv2-entry-flag[hidden] {
  display: none;
}

.dv2-entry-chevron {
  display: inline-flex;
  color: var(--ink-faint);
  transition: transform var(--t-medium, 240ms) var(--ease, ease),
              color var(--t-fast, 150ms) var(--ease, ease);
}

.dv2-entry-item[data-dv2-expanded="true"] .dv2-entry-chevron {
  transform: rotate(180deg);
  color: var(--burgundy, #7A1F2A);
}

/* The fold. Grid row 0fr -> 1fr measures itself, so the panel settles on
   its real height with no magic numbers and nothing springy: 220ms on the
   system ease, no overshoot. */
.dv2-entry-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 220ms var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
              opacity 140ms var(--ease, ease);
}

.dv2-entry-item[data-dv2-expanded="true"] .dv2-entry-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.dv2-entry-panel-inner {
  min-height: 0;
  padding: 0 16px;
}

.dv2-entry-item[data-dv2-expanded="true"] .dv2-entry-panel-inner {
  padding-bottom: 16px;
}

/* Clipped only while the fold runs. The market/count dropdowns are
   absolutely positioned and hang outside the panel, so overflow goes back
   to visible the moment it settles (app.js drops .is-animating). */
.dv2-entry-item.is-animating .dv2-entry-panel-inner,
.dv2-entry-item[data-dv2-expanded="false"] .dv2-entry-panel-inner {
  overflow: hidden;
}

.dv2-entry-item[data-dv2-expanded="true"]:not(.is-animating) .dv2-entry-panel-inner {
  overflow: visible;
}

/* The run setup keeps its own spacing inside the fold; retune the leading
   margin so it does not double up with the panel padding. */
.dv2-entry-panel-inner .discover-v2-subtitle {
  margin: 14px 0;
}

.dv2-entry-panel-inner .dv2-runtime-slot {
  margin-bottom: 0;
}

/* The rail + past-searches were full-width siblings of the view and carried
   the canvas inset themselves. Inside the fold the panel owns the padding. */
#view-discover.active #dv2ListsHost #dv2LiveRail,
#view-discover.active #dv2ListsHost #discoverRunsHistory {
  margin-left: 0;
  margin-right: 0;
}

#dv2ListsHost #dv2LiveRail {
  margin-top: 14px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

#dv2ListsHost .discover-runs-history {
  margin-top: 16px;
  border: 0;
  border-top: 1px solid var(--hairline-default, #d8d8d8);
  border-radius: 0;
  padding: 14px 0 0;
  background: transparent;
}

/* The rail used to be a desktop-only right-hand column, so phones hid it
   outright. It is now the body of "See your generated lists" — the whole
   point of the entry — so it shows at every width. */
@media (max-width: 1023px) {
  #dv2ListsHost .dv2-live-rail {
    display: flex;
  }
}

@media (max-width: 640px) {
  .dv2-entry-head {
    padding: 12px 13px;
    gap: 10px;
  }
  .dv2-entry-panel-inner {
    padding: 0 13px;
  }
  .dv2-entry-item[data-dv2-expanded="true"] .dv2-entry-panel-inner {
    padding-bottom: 13px;
  }
  .dv2-entry-title {
    font-size: 15px;
  }
  .dv2-entry-flag {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dv2-entry-panel,
  .dv2-entry-chevron,
  .dv2-entry-item,
  .dv2-entry-head,
  .dv2-entry-mark {
    transition-duration: 0ms !important;
  }
}

/* ---- De-indigo the results feed (was #3f18aa, commit 97ba0bb) --- */

.dv2-live-rail-pulse {
  background: var(--ink-faint, #97a0ad);
}

.dv2-live-rail-pulse[data-state="running"] {
  background: var(--burgundy, #7A1F2A);
  box-shadow: 0 0 0 4px rgba(122, 31, 42, 0.16);
}

.dv2-live-rail-pulse[data-state="found"] {
  background: var(--sage, #6B8773);
}

.dv2-live-rail-head[data-state="running"] .dv2-live-rail-eyebrow {
  color: var(--burgundy, #7A1F2A);
}

.dv2-live-rail-counter {
  color: var(--burgundy, #7A1F2A);
  background: rgba(122, 31, 42, 0.08);
}

.dv2-live-rail-item {
  background: var(--surface);
  border-color: var(--hairline, rgba(122, 31, 42, 0.10));
}

.dv2-live-rail-item:hover {
  background: var(--hover-tint, rgba(122, 31, 42, 0.045));
  border-color: var(--hairline-strong, #c9ccc4);
}

.dv2-live-rail-item.is-expanded {
  background: var(--panel, #ffffff);
  border-color: rgba(122, 31, 42, 0.28);
  box-shadow: 0 1px 0 rgba(122, 31, 42, 0.06), 0 4px 14px -8px rgba(31, 27, 23, 0.16);
}

/* The initials disc is gone from the markup, so the row is two columns:
   the person, then the badges and caret. */
.dv2-live-rail-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.dv2-live-rail-row:focus-visible {
  outline: 2px solid var(--burgundy, #7A1F2A);
}

.dv2-live-rail-rowcompany {
  color: var(--burgundy, #7A1F2A);
}

.dv2-live-rail-badge {
  background: rgba(122, 31, 42, 0.08);
  color: var(--burgundy, #7A1F2A);
}

.dv2-live-rail-chev[data-state="open"] {
  color: var(--burgundy, #7A1F2A);
}

.dv2-live-rail-action {
  border-color: var(--hairline-default, #d8d8d8);
  background: var(--panel, #ffffff);
}

.dv2-live-rail-action:hover:not(:disabled) {
  background: var(--hover-tint, rgba(122, 31, 42, 0.045));
  border-color: var(--hairline-strong, #c9ccc4);
}

/* The loudest one: "Email directly" was a full-width indigo slab. */
.dv2-live-rail-action.is-primary {
  background: var(--burgundy, #7A1F2A);
  border-color: var(--burgundy, #7A1F2A);
  color: var(--ink-on-burgundy, #FBF7EE);
}

.dv2-live-rail-action.is-primary:hover:not(:disabled) {
  background: var(--burgundy-dark, #5A1620);
  border-color: var(--burgundy-dark, #5A1620);
}

.dv2-live-rail-action.is-quiet {
  border-color: var(--hairline, rgba(122, 31, 42, 0.10));
}

.dv2-live-rail-action.is-quiet:hover:not(:disabled) {
  background: var(--hover-tint, rgba(122, 31, 42, 0.045));
  color: var(--burgundy, #7A1F2A);
  border-color: var(--hairline-default, #d8d8d8);
}

.dv2-live-rail-drawer-meta {
  background: var(--hover-tint, rgba(122, 31, 42, 0.045));
}

.dv2-live-rail-empty-row {
  background: linear-gradient(90deg,
    rgba(122, 31, 42, 0.05) 0%,
    rgba(122, 31, 42, 0.11) 50%,
    rgba(122, 31, 42, 0.05) 100%);
  background-size: 220% 100%;
}

.dv2-live-rail-tips li::before {
  background: var(--burgundy, #7A1F2A);
}

/* --brand is not a token in this codebase, so both of these were painting
   the old teal through their fallback. */
.discover-runs-history .drh-row-count {
  color: var(--burgundy, #7A1F2A);
}

.dv2-live-rail-clear:hover {
  border-color: var(--burgundy, #7A1F2A);
  color: var(--burgundy, #7A1F2A);
}

.dv2-live-rail-clear.is-restore {
  color: var(--burgundy, #7A1F2A);
  border-color: rgba(122, 31, 42, 0.32);
}

/* Find-page form controls were still on the old cool blue-grey border
   (#cdd8e3, styles.css:3118). Scoped to this view so the rest of the
   app's forms are untouched. */
#view-discover input,
#view-discover select,
#view-discover textarea {
  border-color: var(--line, #e8eaee);
}

/* Touch devices latch :hover after a tap, which left the tapped entry head
   and the tapped result row stuck in their hover tint. Last in the block so
   it beats the hover rules above. */
@media (hover: none) {
  .dv2-entry-head:hover {
    background: transparent;
  }
  .dv2-live-rail-item:hover:not(.is-expanded) {
    background: var(--surface);
    border-color: var(--hairline, rgba(122, 31, 42, 0.10));
  }
}

/* ============================================================================
   BLIND-GUESS EMAIL TIER (2026-07-28)
   The bottom rung under the amber "best guess" and the orange "assumed format":
   a firm that published NO personal address anywhere the crawl reached, so the
   format behind every address minted for it has nothing behind it. gunnercooke
   is the case — info@ plus a vacancies mailbox, and 150 invented personal
   addresses reported as full email coverage.

   Deliberately QUIETER than .is-assumed, not louder: pale danger tint, no solid
   fill weight, and a DASHED hairline that reads as "nothing solid behind this".
   Colours are the existing brand tokens only (--danger / --danger-soft), so
   this adds a tier without adding a hue.
   ========================================================================== */
.email-guess-badge.is-blind-guess {
  color: var(--danger, #b42318);
  background: var(--danger-soft, #fde7e9);
  border: 1px dashed rgba(180, 35, 24, 0.55);
  font-weight: 600;
}
.person-action-note.is-blind-guess {
  color: var(--danger, #b42318);
  background: var(--danger-soft, #fde7e9);
  border: 1px dashed rgba(180, 35, 24, 0.45);
}
/* Review row's route pill and the dossier route meter's route line: the label
   itself already says "Blind-guess email", so these only need to stop reading
   like an ordinary healthy route. */
.review-fact-mailto.is-blind-guess {
  color: var(--danger, #b42318);
  border-bottom: 1px dashed rgba(180, 35, 24, 0.55);
}
.dossier-route-meter span.is-blind-guess strong {
  color: var(--danger, #b42318);
}
/* Discover rail drawer: one quiet line under the address, never a block of red. */
.dv2-live-rail-drawer-meta.is-blind-guess {
  margin-top: 4px;
  color: var(--danger, #b42318);
  font-size: 11.5px;
  line-height: 1.45;
}
/* Board lead drawer. .pipeline-drawer-routes is a grid of full-width rows, and
   its `span` rule (padding: 10px 0) outweighs the chip's own padding, so the
   chip arrived as a full-bleed pink slab that read like an error banner rather
   than a label on the address above it. Pull it back to a pill, left-aligned on
   its own row. */
.pipeline-drawer-routes .email-guess-badge.is-blind-guess {
  justify-self: start;
  margin-left: 0;
  padding: 1px 7px;
}
/* Phone: the chip must wrap onto its own line rather than push the address
   out of the row. Every surface above renders it inline beside an email. */
@media (max-width: 640px) {
  .email-guess-badge.is-blind-guess {
    margin-top: 4px;
  }
  .person-contact-row .email-guess-badge.is-blind-guess,
  .contact-methods .email-guess-badge.is-blind-guess,
  .person-strip .email-guess-badge.is-blind-guess,
  .dv2-live-rail-drawer-meta .email-guess-badge.is-blind-guess {
    display: inline-block;
  }
}

/* =================================================================
   run-controls-honesty — the Find page's run controls tell the truth.

   Appended at the end per the repo's append-only rule; nothing above
   is rewritten.
   ================================================================= */

/* D7 — hidden means hidden, scoped to the discovery view.

   `.discover-fields label { display: grid }` (a class-plus-element author
   rule) beats the user-agent `[hidden]` rule, so a `<label hidden>` in that
   container rendered anyway. That is how the "Limit this run to" select — a
   control that silently truncated the operator's own pasted list — became
   visible without anyone choosing to show it. The select is deleted, but the
   cascade hole that surfaced it is a latent bug generator, so close it.

   Scoped to #view-discover rather than global: the blast radius matches the
   evidence actually gathered. Every [hidden] element in this view was audited
   and only that one label rendered; all unhiding in app.js goes through the
   `.hidden` IDL property, which removes the attribute, so nothing that is
   meant to appear is caught by this. Precedent: the FE-050 rule on
   `.advanced-settings label.check-row[hidden]`. */
#view-discover [hidden] {
  display: none !important;
}

/* The one advanced control the crawler actually honours. Checkbox rather than
   the old `.dv2-toggle` button-switch: a real input carries its own state, so
   there is nothing to keep in sync and nothing to fake. */
.dv2-setting-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}

.dv2-setting-check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--burgundy, #7a1f2b);
  cursor: pointer;
}

/* The live cost arithmetic, tied to the selected account count. Set on its own
   line so the number reads as a figure to weigh rather than trailing prose. */
.dv2-setting-cost {
  display: block;
  margin-top: 2px;
  font-weight: 600;
  color: var(--ink-soft, var(--ink-muted));
  font-variant-numeric: tabular-nums;
}

/* "What this run always does" — a statement, not a control. Deliberately
   styled as body copy with no affordance: nothing here is clickable, because
   none of it is a choice. */
.dv2-always-note {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 0.5px solid rgba(122, 31, 42, 0.06);
  font-size: 10px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.dv2-always-note strong {
  font-weight: 600;
  color: var(--ink-soft, var(--ink-muted));
}

/* The over-rail notice beside the Known-firms add-row. Same `.custom-targets-error`
   idiom as the add-row's own validation message, but it is a factual report
   rather than a rejection, so it reads in the muted ink instead of burgundy.
   `:empty { display: none }` is inherited from that class; the `[hidden]`
   reset above does the rest when there is nothing to say. */
.custom-targets-error.custom-targets-rail {
  color: var(--ink-muted);
  font-size: 0.74rem;
  line-height: 1.5;
  margin-top: 2px;
}

/* Note for the next reader, not a rule: `#view-discover .run-preview`
   (~line 10701) and the `.dv2-toggle` / `.dv2-toggle-knob` / `.dv2-chip-stepper`
   blocks (~line 16250) no longer match any markup — the asides and the four
   inert advanced controls were deleted by this change. They are left in place
   rather than excised because this stylesheet is append-only and edited by
   several sessions a day; dead rules that match nothing cost nothing, whereas
   an in-place rewrite of a 20k-line shared file conflicts. Safe to remove in a
   dedicated stylesheet-pruning pass. */

/* The Describe explanation is a caption for the query field, so it shares the
   field's column rather than running the full width of the panel — the inputs
   in `.discover-fields` are capped at 460px, and a paragraph twice that wide
   beside them reads as unrelated body copy. */
#view-discover #searchDiscoverHelper {
  max-width: 460px;
}

/* ======================================================================
   SETTINGS INFORMATION ARCHITECTURE  (openspec/changes/settings-ia)

   #view-settings was one 4000px scroll of ten sections in chronological
   order, with a page heading ("Integrations") naming content eight
   sections below it, and every description parked ~880 CSS px to the
   right of the title it described. Now: four groups behind a segmented
   sub-nav, and descriptions stacked under their headings.

   Append-only: nothing above this line is edited. The base rules that
   caused the fault (.view-heading at :877 and :3032, .settings-block-head
   at :10183) are overridden here, scoped to #view-settings — several of
   the other nine .view-heading instances put *controls*, not captions, in
   the right-hand slot, so a page-wide change would alter interaction and
   is recorded as a follow-up audit instead.
   ====================================================================== */

/* --- Sub-nav. Same segmented-pill language as .board-subnav (:18952),
       re-declared rather than shared so the board rules stay untouched.
       Taller than the board pills: the phone requirement is a 40px touch
       target and the board bar has never been used at 375px. */
.settings-subnav {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 2px 0 16px;
  margin: 0;
}
.settings-subnav-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid var(--line, #e5e5df);
  background: var(--panel, #ffffff);
  color: var(--ink-soft, #3c4852);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.settings-subnav-tab:hover {
  color: var(--burgundy, #7a1f2b);
  border-color: var(--burgundy, #7a1f2b);
}
.settings-subnav-tab:focus-visible {
  outline: 2px solid var(--burgundy, #7a1f2b);
  outline-offset: 2px;
}
.settings-subnav-tab[aria-current="page"] {
  background: var(--burgundy, #7a1f2b);
  border-color: var(--burgundy, #7a1f2b);
  color: #ffffff;
}

/* --- Group panels. One visible at a time; the rest carry [hidden], which
       the controller in settings-ia.js toggles. */
.settings-group {
  display: block;
}
.settings-group[hidden] {
  display: none !important;
}
.settings-group-head {
  margin: 0 0 6px;
}
.settings-group-head h4 {
  margin: 0;
  color: #111820;
  font-size: 1.14rem;
  line-height: 1.2;
}

/* --- The fix the operator asked for: a description sits under the heading
       it describes, sharing its left edge, at a reading measure. The base
       rules distribute heading and caption to opposite edges of a container
       that lost its 1400px cap in the full-bleed change, so the gap grew
       with the monitor. justify-content is reset explicitly rather than
       merely neutralised by display:block — getComputedStyle still reports
       the old flex value otherwise, and the spec asserts on it. */
#view-settings .view-heading,
#view-settings .settings-block-head,
#view-settings .settings-group-head {
  display: block;
  justify-content: flex-start;
  gap: 0;
}
#view-settings .view-heading > .view-copy,
#view-settings .settings-block-head > .view-copy,
#view-settings .settings-group-head > .view-copy,
#view-settings .integration-card > .view-copy,
#view-settings .integration-card > p {
  max-width: 62ch;
  margin: 6px 0 0;
}
#view-settings .settings-block-head h4 {
  margin: 2px 0 0;
}

/* --- Each connection says what stops working while it is missing. The
       web-search card already did this; the rest did not. */
.integration-consequence {
  margin: 0;
  padding: 8px 10px;
  border-left: 2px solid var(--line, #e5e5df);
  color: #5d6976;
  font-size: 0.82rem;
  line-height: 1.5;
}
.integration-card.configured .integration-consequence {
  opacity: 0.62;
}
.settings-connections-summary {
  margin: 10px 0 0;
  color: #5d6976;
  font-size: 0.86rem;
}
.settings-connections-summary strong {
  color: #111820;
}

/* --- Morning Flash reports its last recorded run rather than asserting a
       delivery time nothing in server.js schedules. */
.morning-flash-lastrun {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line, #e5e5df);
  border-radius: 8px;
  background: var(--panel-soft, #f7f8f6);
  color: #52606e;
  font-size: 0.84rem;
  line-height: 1.5;
}

/* --- Template rows. They used to borrow .saved-search-row, whose head is
       justify-content: space-between and whose actions are a separate row
       with margin-top — so the category flew to the far edge and View
       dropped onto its own line, leaving a dead middle a thousand pixels
       wide. Bounded cards instead: the auto-fill track keeps every card
       under ~400px, so nothing can strand itself from the name again.
       .saved-search-row is left alone; saved searches and watchlists still
       use it and genuinely want the right-hand cadence. */
.settings-template-grid {
  display: grid;
  /* Hard upper bound on the track, not 1fr: with 1fr a container just under
     two tracks wide collapses to one 540px card, and the whole point of the
     rebuild is that nothing in a template row can drift far from its name.
     The spec asserts no descendant sits more than 480px from the name's
     left edge, and body carries zoom: 1.15 above 1800px. */
  grid-template-columns: repeat(auto-fill, minmax(300px, 400px));
  justify-content: start;
  gap: 10px;
  max-width: 1240px;
  margin: 0 0 6px;
}
.settings-template-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  min-width: 0;
}
.settings-template-card .stpl-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.settings-template-card .stpl-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
/* The name wraps rather than truncating. Ellipsis here would be a silent
   cap on the one field the row exists to show; wrapping inside the flex
   item leaves the category label sitting immediately after the name box, so
   the "category is a label on the name" geometry still holds. */
.settings-template-card .stpl-name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.95rem;
  line-height: 1.25;
}
.settings-template-card .stpl-category {
  flex: 0 0 auto;
  color: var(--ink-muted, #6b7682);
  font-size: 0.7rem;
  font-weight: 780;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.settings-template-card .stpl-actions {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  gap: 6px;
}
.settings-template-card .stpl-preview {
  margin: 0;
  color: var(--ink-soft, #52606e);
  font-size: 0.84rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.settings-template-card .stpl-usage {
  margin: 0;
  color: var(--ink-muted, #6b7682);
  font-size: 0.75rem;
  line-height: 1.4;
}

/* --- Honest controls, found by looking at the page after the move: the
       button rules at :493 set display: inline-flex, which beats the UA
       [hidden] rule, so Connect Outlook and Disconnect BOTH rendered
       regardless of whether the mailbox was connected. A Disconnect button
       on a disconnected mailbox is exactly the inert control the standing
       rule forbids. Same fix as the leads filter bar at :12470. */
#view-settings button[hidden],
.outlook-connect-actions button[hidden] {
  display: none !important;
}

/* --- Empty states lost their initials disc, so the card is re-spaced the
       way the review card was (:19708). .state-card-icon itself is NOT
       retired: errorState() still uses it for the "!" status glyph, which
       is a status symbol, not a monogram of somebody else's name. */
.empty-state-card {
  min-height: 146px;
  gap: 8px;
  padding: 22px 24px;
}
.empty-state-card .state-card-actions {
  margin-top: 6px;
}

/* --- Home landing cards lost their .lh-av monogram for the same reason.
       The row now holds only the route dots; keep them where the eye
       already looks and stop the row collapsing to zero height. */
.landing-home .lh-card-row {
  justify-content: flex-end;
  min-height: 10px;
}

/* --- Phone. .settings-block-head had no responsive variant anywhere in
       the sheet, so at 375px every block heading fought its own
       description for one flex row; the stacking rule above fixes that at
       every width. The two-column key grids have to collapse as well. */
@media (max-width: 760px) {
  #view-settings .settings-form {
    grid-template-columns: minmax(0, 1fr);
  }
  #view-settings .integration-fields-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  #view-settings .settings-block {
    padding: 14px;
  }
  .settings-subnav {
    gap: 6px;
  }
  .settings-subnav-tab {
    font-size: 12px;
    padding: 8px 12px;
  }
  .settings-template-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .morning-flash-actions {
    flex-wrap: wrap;
  }
}

/* ---------------------------------------------------------------------------
   campaign-scope — the Find page's run-scope row, and the review desk's run
   scope label + segment headers.

   Palette note: teal and the neutral ink/line tokens only. The colour sweep
   asserts no blue or purple band on #view-discover, and this row sits inside
   that view.
--------------------------------------------------------------------------- */

.dv2-scope-row {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dv2-scope-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.dv2-scope-clear {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--teal);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dv2-scope-clear:hover { color: var(--teal-dark); }

.dv2-scope-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
}

.dv2-scope-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 240px;
}

.dv2-scope-group-title {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.dv2-scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-soft);
  padding: 4px 10px;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  cursor: pointer;
}

.dv2-scope-chip:hover { border-color: var(--teal); color: var(--ink); }

.dv2-scope-chip:focus-visible { outline: none; box-shadow: var(--focus); }

.dv2-scope-chip[aria-checked="true"] {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal-dark);
  font-weight: 600;
}

.dv2-scope-chip-count {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--muted);
}

.dv2-scope-chip[aria-checked="true"] .dv2-scope-chip-count { color: var(--teal-dark); }

/* The "why there is no control here" sentence. It carries the honest-controls
   rule: a dimension with no data states the fact instead of offering a dead
   toggle, so the absence is readable rather than mysterious. */
.dv2-scope-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 62ch;
}

.dv2-scope-counts {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
}

.dv2-scope-counts.is-empty {
  background: var(--amber-soft);
  border-color: var(--amber);
  color: var(--amber);
  font-weight: 600;
}

/* The run's account of what its scope did, on the completed progress panel. */
.dv2-scope-summary {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Review desk — the run stating its own scope, and the segment headers. */
/* The chip is a narrow column, so the scope takes its own line rather than
   fighting the run label for width. Wrapping is explicit here: without it the
   pill grew a ragged third line and the Clear button drifted under the text. */
.lead-result-context-chip {
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 4px;
}

.lead-result-context-scope {
  flex: 1 0 100%;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.lead-result-context-scope.is-unscoped { font-style: italic; }

.review-overview-scope {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Headers, not chips: a mixed run is organised by segment, and the heading is
   the organiser. Sticky so the group a row belongs to stays readable while the
   list scrolls. */
.review-segment-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 6px;
  padding: 6px 2px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.review-segment-header:first-child { margin-top: 0; }

.review-segment-header small {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* ── Bottom-right corner stack (review-flow-continuity) ────────────────
   `.toast` and `.feedback-fab` shipped with identical right/bottom
   coordinates and a 930-point z-index gap between them, so the FAB sat on
   top of the toast's action button: Undo was present and unclickable at
   every width above 540px. `.dv2-toast` carried the same collision. The
   old `@media (max-width: 540px)` patch that lifted toasts to 84px is
   removed with this rule — it fixed the one viewport somebody happened to
   look at, and the dead `.global-toast` selector went with it.

   Raising z-index alone would only swap which control is covered, so the
   toast also clears the FAB vertically. 84px is the FAB's 52px pill plus
   its 18px offset plus a 14px gap, and is the clearance
   `.welcome-tip-card` already uses; on phone the FAB is a 56px circle at a
   14px offset, which lands on the same number.

   `--toast-bottom` is set per-toast by showToast when the welcome tip is
   occupying this band, so a toast stacks above the tip instead of on it. */
.toast,
.dv2-toast {
  bottom: var(--toast-bottom, 84px);
  z-index: 970;
}

/* At the mobile-shell breakpoint the FAB is itself docked above the bottom tab
   bar, at the same 84px this rule uses, so the toast has to clear the FAB's
   docked position rather than the bar's: 84px + the 46px scaled puck + a 14px
   gap. Same principle, different constant. */
@media (max-width: 640px) {
  .toast,
  .dv2-toast {
    bottom: var(--toast-bottom, calc(144px + env(safe-area-inset-bottom, 0px)));
  }
}

/* Review desk with nothing left to review — collapse to a single column
   instead of leaving an empty dossier rail beside the empty state. Set
   when the candidate list renders empty (renderLeads). */
#view-leads .lead-review-desk.is-desk-empty {
  grid-template-columns: minmax(0, 1fr);
}

#view-leads .lead-review-desk.is-desk-empty .lead-detail {
  display: none;
}

/* ==========================================================================
   REVIEW DESK — THE DESK EARNS ITS WIDTH (review-desk-craft, cl53)
   --------------------------------------------------------------------------
   Conor, on a live dossier: "just look how poorly optimised the space of
   this page is". Measured, the defect is a ratio, not a typography problem.
   The dossier's centre track was `minmax(0, 1fr)` while every prose block
   inside it is separately capped in ch, so the track grew with the monitor
   and the text did not: 256px of dead gutter at 1600, 626px at 2560 (CSS px,
   measured by tests/e2e/review-desk-layout.mjs on the tree before this
   block).

   The 66-68ch measure is correct and is NOT touched here. What changes is
   the track it sits in.

   Three moves, in the order the arithmetic runs:

   1. The view is a capped, centred column again. It already had a 1480px
      cap at :17515, but that cap has been dead since the 2026-06-17
      "FULL-WIDTH EVERYWHERE" block set `.view.active { max-width: none
      !important }` (:18443) — which is why #view-leads measured 2430px at
      2560 and leads-dossier-wide.mjs has been failing both of its
      assertions. Restated with !important and an id-weighted selector, the
      same way #view-discover.active does it at :19431.

   2. The reclaimed width goes to the rail, which is the densest content on
      the page and was the most cramped: at 300px a full address wrapped
      mid-token ("alex.bayliss@linklaters.co / m").

   3. The cap is the number that makes the ≤80px void metric true, not a
      round number chosen first. Working back from the tightest cap on the
      surface — .dossier-ask-body at 66ch of serif = 548px, inside
      .dossier-ask's 31.5px of border and padding:

        centre content   = 548 + 80 (max gap) - 31.5   ->  ~651px
        + .person-dossier-main padding  48
        + rail                         340
        + candidate list               300
        + dossier card border            1
        = 1340px

      1340 is therefore derived, and sits under the ≤1480 ceiling
      leads-dossier-wide.mjs guards. It is expressed in CSS pixels, so at
      the 1800 and 2400 body{zoom} steps the composition scales with the
      rest of the app instead of shrinking on a bigger monitor.
   ========================================================================== */

@media (min-width: 1024px) {
  #view-leads.active {
    max-width: 1340px !important;
    margin-inline: auto !important;
  }
}

/* The rail. 320px is enough for a full email address without a mid-token
   break; 340px from 1440 up, where the width is there to give. Guarded at
   861px so the ≤860px single-column collapse at :14738 still wins. */
@media (min-width: 861px) {
  .person-dossier-shell,
  #view-leads.active .person-dossier-shell {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

@media (min-width: 1440px) {
  .person-dossier-shell,
  #view-leads.active .person-dossier-shell {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}

/* --------------------------------------------------------------------------
   REVIEW CARD — THREE TIERS, ONE HONEST SIGNAL (review-desk-craft)
   Conor: "the high bars on the cards on the left and the cards themselves on
   the left are really ugly and not well designed".

   The bar is deleted in the markup. What is left has to be laid out so a
   reader takes the card in tiers rather than as six equally-spaced rows:

     who        name / role / firm      tight
     judgement  bucket / reason         set apart
     reach      route / evidence / host set apart

   Uniform 7px gaps gave every line the same importance, which is how a card
   ends up looking like a form.
   -------------------------------------------------------------------------- */

.review-candidate-row .review-candidate-body {
  gap: 0;
}

.review-candidate-row .review-person-firm {
  margin-top: 3px;
}

.review-candidate-row .review-decision-likelihood {
  margin-top: 11px;
}

.review-candidate-row .review-candidate-reason {
  margin-top: 5px;
}

.review-candidate-row .review-candidate-facts {
  margin-top: 11px;
}

/* The role line wraps instead of clipping. It also carries the full role as
   a title (set in renderPersonReviewRow) so a role that still needs two
   lines is readable on hover as well. */
.review-candidate-row .review-person-role {
  overflow-wrap: anywhere;
  white-space: normal;
}

/* The bucket, in the compact rail the desk actually lives in. The caption is
   back: "HIGH" on its own, next to nothing, does not say high WHAT. It wraps
   rather than being suppressed, so the pair survives a 236px list. */
#view-leads .lead-review-desk.is-person-open .review-decision-likelihood {
  flex-wrap: wrap;
  gap: 2px 7px;
  margin-top: 9px;
}

#view-leads .lead-review-desk.is-person-open .review-decision-likelihood > span {
  display: inline;
  flex: 0 1 auto;
  color: var(--ink-faint);
  font-family: var(--font-mono-v4);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#view-leads .lead-review-desk.is-person-open .review-candidate-facts {
  margin-top: 9px;
}

/* --------------------------------------------------------------------------
   WHAT EARNED THE BUCKET (review-desk-craft)
   Replaces "<strong>100</strong> likelihood score" in the dossier rail. The
   score is a keyword heuristic; the signals it matched are checkable against
   the page, which a three-digit integer is not. Rendered as quiet chips so
   they read as evidence under the verdict, not as another claim.
   -------------------------------------------------------------------------- */

.dossier-likelihood-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 0;
}

.dossier-likelihood-signals span {
  padding: 2px 6px;
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius-mini);
  background: color-mix(in srgb, var(--canvas) 55%, var(--surface));
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 9px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-transform: uppercase;
}

.person-likelihood-card.likelihood-high .dossier-likelihood-signals span {
  border-color: color-mix(in srgb, var(--sage-dark) 26%, transparent);
  background: var(--sage-tint);
  color: var(--sage-dark);
}

/* The role is the second fact a reader takes off the card, and in the 300px
   compact rail it was being ellipsed after about 30 characters — "Partner,
   Capital Markets and Banki…" tells you less than the seniority word alone.
   Let it take a second line, cap it at two so a long crawled title cannot
   run away with the card, and keep the full string on the title attribute
   (set in renderPersonReviewRow) for anything that still does not fit. */
#view-leads .lead-review-desk.is-person-open .review-person-heading small.review-person-role {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   THE BOARDED STATE IS A SIGNPOST, NOT A VERB (review-desk-craft)
   Conor, on the green board button: "not part of our colour accents". The
   diagnosis needs correcting before the fix: --sage-dark IS palette, and
   recolouring it would not have fixed anything. What is off is the WEIGHT.
   "Open on board" renders only when isBoardLead(lead) is true -- the person
   is already on the board and this is a route back to an existing record. It
   was the only sage-filled button in the product, wearing the clothes the
   product reserves for its main action.
   Quiet, outlined, sage-inked. The route back still exists and is still
   obviously clickable; it just stops shouting.
   -------------------------------------------------------------------------- */

.dossier-actions .dossier-board-confirmed,
.mandate-dossier .detail-actions .dossier-board-confirmed {
  border-color: color-mix(in srgb, var(--sage-dark) 42%, transparent);
  background: var(--sage-tint);
  color: var(--sage-dark);
  font-weight: 550;
}

.dossier-actions .dossier-board-confirmed:hover,
.mandate-dossier .detail-actions .dossier-board-confirmed:hover {
  border-color: var(--sage-dark);
  background: var(--sage-tint-strong);
  color: var(--sage-dark);
  box-shadow: none;
  transform: none;
}

/* --------------------------------------------------------------------------
   THE EVIDENCE RAIL, GROUPED BY PURPOSE (review-desk-craft)
   Conor: "the right menu is sloppy and disorganised too".

   It was nine rows on one 82px label grid in source order, so two actionable
   routes, two identity facts and five provenance facts all read at the same
   weight and nothing in the rail was findable. Three labelled groups now:
   Reach (what you can do), Identity (confirmation), Provenance (why you
   should believe any of it)  with the evidence tape inside Provenance,
   where it was already styled to belong.

   No collapsing. A detail/summary per group would hide provenance behind a
   click, which is the opposite of what the attribution work bought.
   -------------------------------------------------------------------------- */

.pulled-details-group {
  display: grid;
  gap: 4px;
}

.pulled-details-group + .pulled-details-group {
  margin-top: 12px;
  padding-top: 11px;
  border-top: var(--hairline-w) solid rgba(122, 31, 42, 0.16);
}

/* Quieter than the values it labels: 9.5px against the 0.82rem of a dd.
   Burgundy ink and letter-spacing give it enough presence to be a heading
   without competing with the facts underneath. */
.pulled-details-group-head {
  margin: 0;
  color: var(--burgundy);
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* The first row of a group already sits under its heading, so its own top
   hairline just doubles the separation. */
.pulled-details-group dl > div:first-child {
  border-top: 0;
  padding-top: 2px;
}

/* The tape is the last thing in Provenance and reads as its continuation,
   not as a new section: same row rhythm, one hairline joining them. */
.person-dossier-side .pulled-details-group .dossier-evidence-tape {
  margin-top: 0;
  border-top: var(--hairline-w) solid rgba(122, 31, 42, 0.08);
}

/* With the rail at 320-340px the label column can afford to be a touch
   wider, which keeps "Also on file at" and "Source page" on one line. */
.person-pulled-details dl > div {
  grid-template-columns: 92px minmax(0, 1fr);
}

/* Found by the new review-desk colour sweep, not by eye: the activity
   timeline's heading is a hard-coded #344054 slate (styles.css
   .lead-activity-head h5), a hue that belongs to no brand family. Re-inked
   from the token, scoped to the review desk because that is what this change
   owns -- the global rule is still there for the sweep that walks outward one
   view at a time. */
#view-leads .lead-activity-head h5 {
  color: var(--ink);
}

/* ── Relevance (person-relevance) ──────────────────────────────────────
   Two groups render, not three. `in` and `adjacent` sit together above
   the fold; only `out` is demoted under its own header. `in` carries no
   mark at all, because badging the expected case on nine rows in ten is
   how a desk gets noisy.

   The header borrows the segment header's geometry deliberately — it is
   the same kind of object, a block heading owning its own row, and the
   desk should not grow a second vocabulary for it. What it adds is
   colour: amber, the palette's "look closer" family, so the demotion is
   legible before the words are read. Sage stays what it has always been
   here, the affirmative, so `adjacent` speaks in the quieter neutral
   ink rather than borrowing a signal colour it has not earned. */
.review-segment-header.review-relevance-header {
  margin-top: 22px;
  color: var(--amber);
  border-bottom-color: color-mix(in srgb, var(--amber) 30%, transparent);
}

.review-segment-header.review-relevance-header small {
  color: var(--ink-muted);
}

/* One line, one reason. It sits directly under the recommendation line so
   the two read as one paragraph of judgement rather than as a badge
   bolted onto a card. */
.review-relevance-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 7px;
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-muted);
}

.review-relevance-note strong {
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.review-relevance-note[data-relevance="out"] strong { color: var(--amber); }
.review-relevance-note[data-relevance="adjacent"] strong { color: var(--sage-dark); }

/* The demoted rows are quieter, never hidden: she said she would not call
   him, not that seeing him was harmful. Opacity alone would take the text
   below contrast, so the card recedes through its border and its ground
   while the words stay at full strength. */
.review-candidate-row[data-relevance="out"] {
  border-left-color: color-mix(in srgb, var(--amber) 45%, transparent);
  background: color-mix(in srgb, var(--amber-soft) 30%, transparent);
}

.review-candidate-row[data-relevance="out"].active {
  background: var(--surface);
}

/* The open state compresses the list column by hiding the likelihood, the
   recommendation line and the facts. The relevance note is deliberately NOT
   hidden with them. A person is auto-selected the moment the desk loads, so
   the open state IS the desk's resting state: hiding the note there would mean
   the adjacent label never rendered at all, and the demoted group would sit
   under a header with nothing on the rows explaining who they are. It is one
   short line, and only labelled rows carry one. */
#view-leads .lead-review-desk.is-person-open .review-relevance-note {
  margin-top: 3px;
  font-size: 10.5px;
}

#view-leads .lead-review-desk.is-person-open .review-relevance-note strong {
  font-size: 9px;
}

/* ==========================================================================
   MOBILE CRAFT PASS (mobile-craft, cl55-0729)
   --------------------------------------------------------------------------
   Conor, after driving the live app on his iPhone: "super cramped and weird to
   use on a phone", and on the board, "look at the layout it's a fucking mess".
   Eight defects. Every number below was measured at 390x844 by the craft net in
   tests/e2e/phone-audit.mjs before this block existed:

     1. the install tip rendered 374x218px — a half-screen card lying ON TOP of
        two of the three Home option buttons (318x92px of overlap on one)
     2. the three New-run mode cards took 403px, ~half the visible page, so the
        actual run controls started a full screen down
     3. six grey helper paragraphs under the curated controls, three of them
        multi-line, stacked into a wall of explainer prose
     4. the Feedback bubble floating over the config panel edge and the counts
        line, in the same corner band as the tip and the toast
     5. shell type and padding still at desktop scale
     6. no way to email or call an open person without scrolling past the whole
        narrative and opening the action menu behind their name
     7. the board rendering desktop kanban columns squeezed to 320px: the second
        stage clipped mid-word ("No accoun / stag", "Open Wo") and the Teams
        setup form expanding inside that column
     8. toasts anchored off a measurement of the old 218px tip, so a toast
        landed mid-screen on top of the dossier prose

   The through-line of the fixes is that NOTHING honest is deleted. The tip
   keeps its three steps, the helpers keep every word of their provenance copy,
   the mode cards keep their full descriptions, the reach bar routes through the
   existing guard ladder rather than around it — each is one tap or one
   breakpoint away instead of occupying a phone screen unasked. Desktop is
   untouched: everything below is either a new element that is display:none
   above 640px, or lives inside the one media query.

   THE FIXED STACK, once and for all. Out from the bottom edge of a 390px
   screen, safe-area inset zero:

     0   – 78px    bottom tab bar          (.sidebar)
     84  – 136px   person reach bar        (.person-reach-bar, only when a
                                            dossier is open on the Review desk)
     F   – F+44    Feedback bubble (right) and the install tip bar beside it,
                   where F = --phone-float-base: 84px normally, 142px when the
                   reach bar is up
     F+54 – …      toasts, full width minus gutters

   One order, no overlaps, and every layer above the tab bar is measured against
   the controls beneath it by the craft net.
   ========================================================================== */

/* New elements, hidden above the breakpoint so the desktop DOM renders exactly
   as it did before this pass. */
.welcome-tip-bar,
.dv2-mode-brief,
.dv2-note-line,
.person-reach-bar {
  display: none;
}

@media (max-width: 640px) {
  /* The one number the whole floating stack hangs off. */
  body {
    --phone-float-base: calc(84px + env(safe-area-inset-bottom, 0px));
  }
  body[data-active-tab="leads"]:has(.person-reach-bar) {
    --phone-float-base: calc(142px + env(safe-area-inset-bottom, 0px));
  }

  /* -- 1. Install tip: a one-line bar, not a half-screen card ---------------
     Docked beside the Feedback bubble rather than above it, so at rest the
     whole floating stack is one 44px band and the tip covers nothing but its
     own bar. Tapping it unfolds the same three steps, full width. */
  #mandateWelcomeTip.welcome-tip-card {
    left: 8px !important;
    right: 62px !important;   /* 10px FAB offset + 44px FAB + 8px gap */
    width: auto !important;
    max-width: none !important;
    bottom: var(--phone-float-base) !important;
    padding: 0 !important;
    border-radius: 12px !important;
    font-size: 0.82rem !important;
    box-shadow: 0 6px 18px rgba(18, 24, 31, 0.16), 0 1px 3px rgba(18, 24, 31, 0.08) !important;
  }
  #mandateWelcomeTip .welcome-tip-bar {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 0 32px 0 12px;   /* right pad clears the dismiss X */
    border: 0;
    border-radius: 12px;
    background: transparent;
    font: inherit;
    color: var(--ink, #0F1419);
    text-align: left;
    cursor: pointer;
  }
  #mandateWelcomeTip .welcome-tip-bar-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #mandateWelcomeTip .welcome-tip-bar-cue {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(124, 31, 42, 0.10);
    color: var(--mandate-red, #7C1F2A);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  #mandateWelcomeTip .welcome-tip-body {
    display: none;
  }
  #mandateWelcomeTip.is-expanded {
    right: 8px !important;    /* the opened card may use the full width */
  }
  #mandateWelcomeTip.is-expanded .welcome-tip-body {
    display: block;
    padding: 0 14px 14px;
  }
  #mandateWelcomeTip .welcome-tip-close {
    top: 6px !important;
    right: 2px !important;
    width: 32px !important;
    height: 32px !important;
    z-index: 1;   /* the bar button spans the whole card; the X must stay hittable */
  }

  /* -- 2. Mode cards: selectable rows, not desktop tiles --------------------
     Same ids, same classes, same click target — only the composition changes:
     the icon moves inline and spans both text rows, and the two-line
     description gives way to one short line (.dv2-mode-brief). */
  .dv2-mode-row {
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .dv2-mode-card {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 0;
    align-items: center;
    padding: 8px 12px !important;
    border-radius: 9px !important;
  }
  .dv2-mode-card .dv2-mode-icon-tile {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
    margin-bottom: 0 !important;
  }
  .dv2-mode-card .dv2-mode-icon-tile svg {
    width: 14px;
    height: 14px;
  }
  .dv2-mode-card .dv2-mode-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 13.5px !important;
    line-height: 1.25 !important;
  }
  .dv2-mode-card .dv2-mode-desc {
    display: none !important;
  }
  .dv2-mode-card .dv2-mode-brief {
    display: block !important;
    grid-column: 2;
    grid-row: 2;
    margin-top: 1px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* -- 3. Helper prose: one line at rest, the rest one tap away -------------
     Every word of the provenance and needs-research copy is still in the DOM,
     verbatim, in its original element. It is disclosed rather than deleted —
     the honest-controls rule does not survive being summarised. The counts
     sentence is deliberately NOT part of this: it is the answer to "what will
     this run actually do", so it stays on screen at all times. */
  .dv2-note-line {
    display: block !important;
    margin: 4px 0 0 !important;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--ink-muted);
  }
  .dv2-note-why {
    margin-left: 6px;
    padding: 3px 9px;
    min-height: 26px;
    border: 0.5px solid var(--hairline-default, rgba(18, 24, 31, 0.16));
    border-radius: 999px;
    background: transparent;
    color: var(--ink-muted);
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    vertical-align: 1px;
  }
  [data-note-host] .dv2-helper,
  [data-note-host] .dv2-scope-note {
    display: none;
  }
  [data-note-host].is-note-open .dv2-helper,
  [data-note-host].is-note-open .dv2-scope-note {
    display: block;
  }
  .dv2-scope-note,
  .dv2-helper {
    font-size: 11.5px;
    line-height: 1.4;
  }

  /* -- 4. Feedback bubble: smaller, and out of the controls' way ------------
     Was a 56px circle scaled to 0.82 at 94% opacity — a soft-edged blob over
     the config panel. A true 44px puck at full strength, in the shared band
     described at the top of this block. */
  body .feedback-fab {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    right: 10px !important;
    bottom: var(--phone-float-base) !important;
    transform: none !important;
    opacity: 1 !important;
    z-index: 205 !important;
    box-shadow: 0 4px 14px rgba(124, 31, 42, 0.28), 0 1px 3px rgba(18, 24, 31, 0.12) !important;
  }
  body .feedback-fab svg {
    width: 19px !important;
    height: 19px !important;
  }
  /* Nothing comes to rest underneath the floating band: the tab bar reserves
     78px, the band tops out at 128px, so the scroll container clears both. */
  main.workspace,
  .app-shell > main,
  .app-shell > .view-scroll {
    padding-bottom: 140px !important;
  }

  /* -- 5. Shell type and padding at phone scale -----------------------------
     Reductions only — the composition is unchanged. */
  body[data-discover-version="v2"] .discover-v2 {
    padding-top: 12px;
    padding-bottom: 18px;
  }
  .discover-v2-h1 {
    font-size: 19px;
    margin-bottom: 2px;
  }
  body.home-empty .landing-home .lh-empty {
    gap: 10px;
    padding: 4px 16px 24px;
  }
  body.home-empty .landing-home .lh-empty-art {
    width: 60px;
    height: 60px;
    border-radius: 18px;
  }
  body.home-empty .landing-home .lh-empty-art svg {
    width: 28px;
    height: 28px;
  }
  body.home-empty .landing-home .lh-empty h2 {
    margin-top: 6px;
    font-size: 1.55rem;
    line-height: 1.15;
  }
  body.home-empty .landing-home .lh-empty p {
    font-size: 0.92rem;
    line-height: 1.45;
  }
  body.home-empty .landing-home .lh-empty-cta {
    margin-top: 10px;
    padding: 13px 26px;
    font-size: 0.98rem;
  }
  body.home-empty .landing-home .lh-empty-opts {
    margin-top: 18px;
    gap: 10px;
  }
  body.home-empty .landing-home .lh-opt {
    padding: 12px 14px;
  }

  /* -- 6. Reach bar: email or call the open person without scrolling --------
     Rendered inside the dossier (public/app.js, personReachBarMarkup) so it
     exists exactly when a person is open and disappears with the view. Email
     runs the same guarded action as the menu; Call is a tel: link and is simply
     absent when the crawl pulled no number. */
  .person-reach-bar {
    display: flex !important;
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    z-index: 206;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 7px 10px;
    border: 1px solid var(--line-strong, #C9C2B2);
    border-radius: 14px;
    background: var(--paper, #FBF7EE);
    box-shadow: 0 8px 22px rgba(18, 24, 31, 0.18), 0 1px 3px rgba(18, 24, 31, 0.08);
  }
  .person-reach-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.2;
  }
  .person-reach-who strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink, #0F1419);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .person-reach-who small {
    font-size: 10.5px;
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .person-reach-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
  }
  .person-reach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid var(--mandate-red, #7C1F2A);
    background: var(--mandate-red, #7C1F2A);
    color: #FBF7EE;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  .person-reach-btn.is-call {
    background: transparent;
    color: var(--mandate-red, #7C1F2A);
  }
  /* Absent, not faked: the same language the live rail uses when a person has
     no published address, and it is not clickable. */
  .person-reach-btn.is-email[disabled] {
    border-color: var(--line-strong, #C9C2B2);
    background: transparent;
    color: var(--ink-muted);
    font-weight: 600;
    font-size: 11.5px;
    cursor: not-allowed;
  }
  /* The dossier's own scroll has to clear the reach bar AND the band above it,
     or the last paragraph comes to rest under both. */
  body[data-active-tab="leads"]:has(.person-reach-bar) main.workspace,
  body[data-active-tab="leads"]:has(.person-reach-bar) .app-shell > main {
    padding-bottom: 200px !important;
  }

  /* -- 7. The board: one stage per screen ------------------------------------
     Was `min(82vw, 340px)`: a 320px column with a 70px peek, so the next stage
     showed half its words and read as broken rather than swipeable. A pane is
     now the board's width less a ~22px peek, which lands on the next pane's
     padding instead of mid-word. */
  /* The existing <=640 "column per swipe" rule (line ~19359) has been DEAD since
     the <=1200px rule at ~19169 landed: `#view-pipeline.active > .pipeline-board`
     is id-weighted and `grid-template-columns: repeat(6, 250px) !important`, so
     six fixed 250px columns were laid out on a 390px screen and the plain
     `.pipeline-board` override could never win. Measured: pane 250px, peek
     128px of the next stage, i.e. half a column of clipped words. Restated at
     the same weight so it actually applies. */
  #view-pipeline.active > .pipeline-board,
  #view-pipeline.active .pipeline-board,
  .pipeline-board {
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: calc(100% - 30px) !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 0 !important;
    overscroll-behavior-x: contain !important;
  }
  /* The 18px peek has to land on the next pane's padding, never on its words:
     a sliver of tinted panel reads as "another stage over there", half a word
     reads as broken. The left inset is therefore wider than the peek. */
  .pipeline-column {
    scroll-snap-align: start !important;
    min-height: 0 !important;
    padding: 10px 12px 10px 24px !important;
    border-radius: 12px !important;
  }
  /* An identity `transform` on the card (matrix(1,0,0,1,0,0)) makes it the
     containing block for every fixed descendant, which is how the Teams sheet
     below ends up the width of a stage column instead of the screen. Nothing
     is lost dropping it on touch — the transform it exists for is a hover lift. */
  .pipeline-card {
    transform: none !important;
  }
  .pipeline-column .empty-state,
  .pipeline-column .empty-state * {
    overflow-wrap: anywhere;
    hyphens: none;
  }
  /* The Teams setup form was expanding inside a ~320px stage column. It is a
     form, not a card detail, so on a phone it leaves the column and opens as a
     full-width sheet above the tab bar. Same markup, same Close button, same
     handlers — only the box it renders in changes. */
  .teams-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: 68dvh !important;
    margin: 0 !important;
    /* The panel never carried a background of its own — inside a card it
       inherited the card's white. Lifted out, it needs one, or the board reads
       straight through the form. */
    padding: 14px 14px 18px !important;
    overflow-y: auto !important;
    z-index: 240 !important;
    background: var(--surface, #ffffff) !important;
    border-top: 1px solid var(--line-strong, #C9C2B2) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -14px 34px rgba(18, 24, 31, 0.28) !important;
  }
  .teams-panel-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* The sheet owns the screen while it is open — the bubble would sit on its
     fields, and the sheet is the thing being used. */
  body:has(.teams-panel) .feedback-fab {
    display: none !important;
  }

  /* -- 8. Toasts anchored to the stack, not to a guess ----------------------
     showToast measures the install tip and writes --toast-bottom when one is on
     screen; with the tip now a 44px bar in the float band, that measurement and
     this default resolve to the same place instead of leaving a toast stranded
     mid-content over the dossier. Full width minus gutters so an action button
     is never pushed off the side. */
  .toast,
  .dv2-toast {
    left: 10px !important;
    right: 10px !important;
    bottom: var(--toast-bottom, calc(var(--phone-float-base) + 54px)) !important;
    max-width: none !important;
    z-index: 970;
  }
}

/* ===========================================================================
   KNOWLEDGE CARD  (knowledge-coverage-surfaces, cl59-0729)
   Settings -> Knowledge. One entry per market panel: what Mandate knows, and
   what it does not. Appended at the end of the sheet, per the append-only rule
   in CLAUDE.md and openspec/project.md.

   The layout constraint that decides every rule below: the settings view is
   asserted at 375px (tests/e2e/settings-ia.mjs) for no document-level
   horizontal scroll and no control leaving the viewport. A per-panel numeric
   readout is exactly the shape that overflows, so this is a STACK OF LABELLED
   LINES, not a fixed-column table. The label/value pair only becomes two
   columns above 760px, and even there the value track is minmax(0, 1fr) so a
   long sentence wraps instead of pushing the box wide.
   =========================================================================== */

#knowledgeCoverageList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.knowledge-lede,
.knowledge-empty {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.knowledge-pack {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft, var(--panel));
}

/* Stacked, never space-between: the heading and its count line share a left
   edge at every width, which is the same fault the settings block heads were
   fixed for earlier in this sheet. */
.knowledge-pack-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 10px;
}

.knowledge-pack-head h5 {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.knowledge-pack-firms {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.knowledge-lines {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.knowledge-line {
  min-width: 0;
}

.knowledge-term {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.knowledge-value {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  overflow-wrap: anywhere;
  hyphens: none;
}

/* A gap is never a bare zero: the stated reason carries the weight and the
   numbers follow it in the ordinary voice. */
.knowledge-gap {
  color: var(--ink);
  font-weight: 600;
}

/* "Not computed yet" is a different claim from a measured zero, and it reads
   differently on the page as well as in the words. */
.knowledge-uncomputed {
  color: var(--muted);
  font-style: italic;
}

.knowledge-date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Display only (docs/KNOWLEDGE-LAYER.md section 5): nothing expires, nothing
   is purged, nothing is re-fetched. */
.knowledge-aged {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: 1px;
}

@media (min-width: 760px) {
  .knowledge-line {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    align-items: baseline;
    column-gap: 14px;
  }
  .knowledge-term {
    padding-top: 1px;
  }
}

/* ==========================================================================
   FIT THE WINDOW (2026-07-31)
   Conor: "the app's content still doesn't fit the whole window?"

   Measured in visual pixels on a 2560 frame at the 1.3 body zoom he runs,
   with a populated account:

     Home     2487 wide,  73 left dead,   0 right dead
     Board    2487 wide,  73 left dead,   0 right dead
     Review   1742 wide, 445 left dead, 373 right dead   <- 1340px cap
     Find     1352 wide, 640 left dead, 568 right dead   <- 1040px cap

   Two faults reading as one complaint. The two views a seat spends its day
   in float in the middle of the monitor, and the two that do fill it run
   straight into the frame with no gutter at all.

   [1] THE GUTTER. `body[data-home-version="v3"] .workspace { padding: 0
   !important }` (:14908) is unqualified, and `data-home-version="v3"` is
   hardcoded on <body> (index.html:27), so the home canvas's zero padding was
   applying to every tab in the app - which is why nine views touched the
   right edge at every width. Its own comment explains the rule in terms of
   home only ("v3 controls its own indents via .home-v3 ... and bleeds the
   ticker out via negative margin"), so this restores the canvas pad
   everywhere else and leaves home exactly as it was.

   [2] THE CAPS. 1040 on Find and 1340 on Review were both derived honestly -
   1340 from the 66ch reading measure of .dossier-ask-body, 1040 from "this
   should all be central not pushed to the right" - but both are fixed CSS
   pixels, so on a bigger monitor the app does not get bigger, it just gets
   more margin. They become viewport-tracking with a ceiling: the layout
   fills what it is given up to a bound, instead of stopping at a number
   chosen for a 1440 screen.

   The reading measure the 1340 protects is enforced where it belongs -
   .dossier-ask-body already carries its own 66ch - so the width released
   here goes to the candidate list and the rail, which are tabular, not
   prose, and were the cramped parts.
   ========================================================================== */

@media (min-width: 1024px) {
  body[data-home-version="v3"]:not([data-active-tab="home"]) #main.workspace {
    padding: 0 22px !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  /* Review: 1340 -> 1560. Not further, and the difference matters. The desk
     with a person open is list + prose + rail, and prose cannot use width:
     past its 68ch measure the extra pixels become the one-sided void
     review-desk-layout.mjs was written to catch. Everything the desk can
     actually spend goes to the candidate list below, where names and roles
     were truncating at 300px. The remainder stays as margin, honestly. */
  #view-leads.active {
    max-width: min(1340px, 100%) !important;
  }

  /* Find: 1040 -> up to 1680, which is where the form/live-rail split at
     :17494 stops gaining anything (720 form + 500 rail + gap). Below that it
     tracks the frame, so the run and its results sit side by side instead of
     the rail being squeezed out of a 1040 column. */
  body[data-discover-version="v2"][data-active-tab="discover"] #view-discover.active {
    max-width: min(1680px, 100%) !important;
  }
}

/* Wide frames: the released width goes to the rail, which holds addresses and
   provenance lines that were wrapping mid-token at 340. */
@media (min-width: 1800px) {
  .person-dossier-shell,
  #view-leads.active .person-dossier-shell {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
}

/* ==========================================================================
   INSTALL TIP: A BAR ON DESKTOP TOO (2026-07-31)

   The persona runs caught the one-time "Install Mandate as a desktop app"
   card sitting on top of the person's email, phone, LinkedIn and source link
   in the pulled-details rail - on Review, Contacts, Follow-ups and Briefs, at
   1920 and 2560, for both seats. A 360x250 card fixed to the bottom-right
   corner will always land on the rail, because that is where the rail is.

   The shape that fixes it already exists: mobile-craft turned this same card
   into a 44px bar that unfolds on tap, for exactly the same reason ("it
   rendered as a half-screen card sitting ON TOP of the page"). The desktop
   was left as the card it always was. It gets the bar now - same markup, same
   toggle, same dismissal, sized for a mouse.

   At rest it covers one line of the rail's bottom edge instead of eight. The
   steps are one click away and open upward, over content the user has just
   asked to cover.
   ========================================================================== */

@media (min-width: 641px) {
  #mandateWelcomeTip.welcome-tip-card {
    width: min(340px, calc(100vw - 36px));
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(18, 24, 31, 0.16), 0 2px 6px rgba(18, 24, 31, 0.08);
  }
  #mandateWelcomeTip .welcome-tip-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 0 34px 0 14px;   /* right pad clears the dismiss X */
    border: 0;
    border-radius: 12px;
    background: transparent;
    font: inherit;
    color: var(--ink, #0F1419);
    text-align: left;
    cursor: pointer;
  }
  #mandateWelcomeTip .welcome-tip-bar-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #mandateWelcomeTip .welcome-tip-bar-cue {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(124, 31, 42, 0.10);
    color: var(--mandate-red, #7C1F2A);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  #mandateWelcomeTip .welcome-tip-body {
    display: none;
  }
  #mandateWelcomeTip.is-expanded .welcome-tip-body {
    display: block;
    padding: 2px 18px 16px;
  }
  #mandateWelcomeTip .welcome-tip-close {
    top: 7px;
    right: 4px;
    width: 32px;
    height: 32px;
    z-index: 1;   /* the bar button spans the card; the X must stay hittable */
  }
}

/* The gutter grows with the frame. review-desk-layout.mjs and
   leads-dossier-wide.mjs both guarantee the evidence rail keeps >=80 device
   pixels off the glass - a craft decision worth keeping even though the cap
   it sat behind is gone. 64 CSS px at the 1.3 body zoom is 83 device px, so
   the view fills the monitor AND the rail is not against the edge. */
@media (min-width: 1600px) {
  body[data-home-version="v3"]:not([data-active-tab="home"]) #main.workspace {
    padding: 0 40px !important;
  }
}
@media (min-width: 1900px) {
  body[data-home-version="v3"]:not([data-active-tab="home"]) #main.workspace {
    padding: 0 80px !important;
  }
}

/* Where the released width may and may not go.

   The 1340 cap was derived from the 66ch reading measure, and lifting it
   without saying where the extra pixels land just re-opened the one-sided
   prose void that review-desk-layout.mjs exists to catch: the track grew, the
   paragraph did not, and 200px of dead space opened on the right of every
   sentence. Prose cannot use width. The candidate list can - it is cards, and
   names and roles were truncating - and so can the rail.

   So the dossier card is capped near what its own content can fill, and the
   list takes the remainder of the frame. */
@media (min-width: 1800px) {
  /* With a person open the list is pinned at 300px and the dossier takes 1fr
     (:13329), so every pixel the view gains lands in the prose track. Give the
     list the width instead - it is the only part of this composition that can
     spend it. */
  #view-leads .lead-review-desk.is-person-open {
    grid-template-columns: minmax(236px, 540px) minmax(0, 1fr);
  }
  #view-leads.active {
    max-width: min(1580px, 100%) !important;
  }
}

/* ==========================================================================
   SPEC P3 #12 — a signed-in phone user could not leave the account.

   The mobile shell (max-width: 640px, :19229) collapses the sidebar into a
   bottom tab bar and hides its footer wholesale:

     body[data-home-version="v3"] .sidebar .sidebar-footer { display: none }

   That footer is the only thing anywhere in the app that holds #sidebarAvatar,
   and the avatar is the only affordance that opens the account menu, and that
   menu is the only route to Sign out. So the rule that tidied away a name, a
   version stamp and a legal link also took sign-out with it. At 390px the
   avatar measures 0x0 and there is no other way out.

   The footer comes back as one item at the end of the tab row — avatar only.
   The name, version stamp and legal link stay hidden, which is what that rule
   was actually for: they are the part that does not fit, not the button. The
   avatar keeps a 44px hit target so it is reachable by thumb, and does not
   scroll away with the tabs.

   The popover positions itself relative to the avatar and grows upward from
   its bottom edge (account-menu.js positionMenu), which is already the right
   behaviour for a control sitting in a bottom bar.
   ========================================================================== */
@media (max-width: 640px) {
  body[data-home-version="v3"] .sidebar .sidebar-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 0 0 2px !important;
    padding: 0 2px 0 6px !important;
    border: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.10) !important;
    background: none !important;
  }
  /* The part that genuinely does not fit stays gone. */
  body[data-home-version="v3"] .sidebar .sidebar-footer-text { display: none !important; }
  body[data-home-version="v3"] .sidebar .sidebar-footer .sidebar-avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    font-size: 12px !important;
    line-height: 1 !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  /* 34px of paint, 44px of touch — the WCAG target size without a button that
     looks oversized next to 62px-wide tabs. */
  body[data-home-version="v3"] .sidebar .sidebar-footer .sidebar-avatar::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}

/* ======================================================================
   SPEC P3 #16 - the far-right description columns (2026-08-01)

   The follow-up audit owed by settings-ia task 3.4. `.view-heading` is
   `display:flex; justify-content:space-between` (:877) on a column that
   lost its 1400px cap in the full-bleed change, so a caption in the
   right-hand slot drifts further from the title it describes the wider
   the monitor gets. settings-ia corrected that inside `#view-settings`
   only, and recorded the rest as needing individual calls because the
   right-hand slot is not always a caption.

   Re-audited against the current tree, because the design doc's line
   numbers predate several changes and the shape has moved under them.
   Four views hold a stranded caption and are stacked here:

     #view-issuers    :1096
     #view-maturity   :1116
     #view-scanner    :1192
     #view-followups  :1216

   The other instances are recorded rather than touched:

     #view-leads      :977   already stacked - FE-043 (:12246) made this
                             heading display:block and the copy sits in
                             .lead-heading-copy directly under the h3.
     #view-pipeline   :1144  already stacked - .view-copy is nested in
                             the left column. The right-hand slot holds
                             the "Add from review" button.
     #view-contacts   :1056  already stacked - FE-048 (:12491) sets this
                             heading display:block and drops the search
                             and filter bar onto its own row.
     #view-jobs       :1493  right-hand slot is the Refresh button.
     #view-briefs     :1158  right-hand slot is PDF / CSV, and no
                             caption exists to strand.
     #view-playbook   :1507  no right-hand slot at all.
     #view-discover   :736   the heading carries `hidden` and :12905
                             forces display:none. Never painted.

   The three remaining control rows - pipeline's "Add from review",
   briefs' PDF / CSV, jobs' Refresh - stay beside their headings on
   purpose: stacking a button row changes how the page is operated, and
   this change is a layout one. That is a recorded decision, not an
   omission, and the spec below asserts they stay put so a later
   page-wide sweep cannot quietly turn them into stacks.

   justify-content is reset explicitly rather than left to be
   neutralised by display:block - getComputedStyle still reports the old
   flex value otherwise, and the spec asserts on it. Same idiom as the
   settings-ia block above. Appended at EOF per the append-only rule.

   Cover: tests/e2e/view-heading-captions.mjs - geometric, per the
   openspec rule that assertions on presence do not substitute for
   assertions on geometry.
   ====================================================================== */
#view-issuers .view-heading,
#view-maturity .view-heading,
#view-scanner .view-heading,
#view-followups .view-heading {
  display: block;
  justify-content: flex-start;
  gap: 0;
}

#view-issuers .view-heading > .view-copy,
#view-maturity .view-heading > .view-copy,
#view-scanner .view-heading > .view-copy,
#view-followups .view-heading > .view-copy {
  max-width: 62ch;
  margin: 6px 0 0;
}

/* ==========================================================================
   AUTH SCREEN: TRUE CENTRING + LARGER SIGN-IN CARD (2026-08-02)

   Two separate problems, one appended block.

   (1) NOT CENTRAL. `.login-screen` is `min-height:100vh` + `place-items:
       center`, but `body{zoom}` kicks in at 1800px (1.15 / 1.3 / 1.45).
       zoom multiplies the used value of every length, so a 100vh box is
       painted at 100vh x zoom -- 130% of the viewport on a 2560px display.
       The card centres inside that oversized box, which puts it at ~65%
       of the real viewport: visibly low, with phantom scroll underneath.
       Dividing the min-height by the same factor restores a box that is
       exactly one viewport tall after zoom, so `place-items:center` lands
       the card in the optical centre at every step.

       The variable is deliberately named --auth-zoom, NOT --app-zoom:
       the open ui-viewport-chrome change introduces --app-zoom for the
       house-wide version of this fix, and two definitions of one name
       racing by source order is how you get a bug nobody can read. This
       is scoped to the auth screens and composes with that change.

   (2) TOO SMALL. 440px wide with 30px padding reads as a dialog dropped
       on a 32" desktop rather than the front door of the product. Widened
       and given interior room; the type and controls scale with it so the
       proportions hold rather than a big box round small text.

   Size changes are scoped to .login-card ALONE. .setup-card shares the
   base rule but lives inside .setup-shell's two-column grid, where a
   width change would fight the grid template. The centring fix applies
   to both because both screens have the identical defect.
   ========================================================================== */
.login-screen,
.setup-screen {
  --auth-zoom: 1;
  min-height: calc(100vh / var(--auth-zoom));
}
@media (min-width: 1800px) { .login-screen, .setup-screen { --auth-zoom: 1.15; } }
@media (min-width: 2400px) { .login-screen, .setup-screen { --auth-zoom: 1.3; } }
@media (min-width: 3000px) { .login-screen, .setup-screen { --auth-zoom: 1.45; } }

.login-card {
  width: min(560px, 100%);
  padding: 48px 44px 44px;
  gap: 18px;
  border-radius: calc(var(--radius) * 1.25);
}

.login-card .auth-logo {
  width: 72px;
  height: 72px;
  justify-self: center;
}

.login-card .eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-align: center;
}

.login-card h1 {
  font-size: 2.6rem;
  line-height: 1.1;
  text-align: center;
  margin: 2px 0 0;
}

/* The strap line only -- :not() keeps the error paragraph out of it, which
   otherwise inherits the centring and the larger size and turns a two-line
   validation message into a centred banner. */
.login-card > p:not(.form-error) {
  font-size: 1.05rem;
  text-align: center;
  margin: 0 0 6px;
}

.login-card label {
  gap: 8px;
}

.login-card label > span {
  font-size: 0.95rem;
  font-weight: 600;
}

.login-card input {
  min-height: 50px;
  padding: 13px 15px;
  font-size: 1.02rem;
  border-radius: 10px;
}

.login-card .primary-button {
  min-height: 54px;
  font-size: 1.06rem;
  font-weight: 650;
  border-radius: 10px;
  margin-top: 4px;
}

/* Phones: the wider card would otherwise only add horizontal padding and
   squeeze the fields. Give the interior room back and drop the display
   type a step so the heading cannot wrap on a 360px screen. */
@media (max-width: 640px) {
  .login-card {
    padding: 32px 22px 28px;
    gap: 15px;
  }
  .login-card h1 { font-size: 2.05rem; }
  .login-card .auth-logo { width: 60px; height: 60px; }
  .login-card > p:not(.form-error) { font-size: 1rem; }
}

/* ==========================================================================
   WIDE-DESK RECLAIM + PANEL DEFINITION (2026-08-02)

   Measured on a 2560x1440 frame at body{zoom:1.3} (the >=2400 step), with a
   person open on the Review desk. Numbers are PHYSICAL px as painted:

     icon rail ends      73
     content starts     289     <- 216px of nothing
     content ends      2343
     viewport          2560     <- 217px of nothing

   433px, 17% of the monitor, spent on margin. It is double-counted:
   `#main.workspace` pads 80px a side (:22328) AND `#view-leads.active` caps
   at 1580px (:22352), and the cap then centres itself with another 86.5px of
   auto margin at each edge. The padding buys nothing once the cap centres.

   The deeper fault is a unit mismatch. Media queries fire on the real
   viewport (2560), but every length inside them is a CSS px that zoom then
   multiplies by 1.3. So `padding: 0 80px` was chosen to look like 80 and
   paints 104; the 1580 cap paints 2054. The layout was tuned as if zoom
   were not there. Available CSS px after the rail is (2560-73)/1.3 = 1913,
   against which 80+1580+80 = 1740 spends only 91% and strands the rest.

   [1] FRAME. At >=2200 the gutter drops to 36 and the cap rises to 1840:
       36+1840+36 = 1912 of 1913. The frame is filled rather than centred
       inside its own leftovers.

   [2] WHERE THE WIDTH GOES -- and this is the part that fixes the void.
       The existing :22343 comment is right that prose cannot spend width,
       but the grid it ships contradicts it: `minmax(236px, 540px)
       minmax(0, 1fr)` pins the list at 540 and hands every released pixel
       to the 1fr prose track. The paragraphs stop at their own 66ch measure
       (.dossier-ask-body), so the surplus lands as dead space to the RIGHT
       OF THE PERSON'S NAME -- the "giant top right space". Widening the
       frame without this rule would have made that void worse, not better.
       So the list ceiling goes 540 -> 680 and the rail 380 -> 440, and the
       prose track gets what is left instead of all of it.

   [3] DEFINITION. The dividers are not missing -- they are sub-visible.
       `--hairline-w` is 0.5px (:14874), which the engine rounds up to one
       device pixel and reports back as 0.769px (1/1.3). One device pixel of
       rgba(122,31,42,0.16) on a near-white page is invisible on a 32-inch
       panel at desk distance. The existing burgundy is the right colour and
       the right idea; it has no weight. So this raises WEIGHT and ALPHA on
       the structural edges rather than introducing a second colour.

       Specificity matters here and cost a first attempt: the desk ships
       `#view-leads .lead-review-desk.is-person-open .lead-detail {
       border-left: 0 }` (:13541) at (1,2,0), so a `> * + *` child rule at
       (1,1,0) never applies no matter how late it sits. The rules below
       match that selector shape deliberately.

   Scoped to >=2200 so 1280/1440/1600 (where the e2e chain asserts) keep
   their current geometry. The edge treatment is width-independent.
   ========================================================================== */

@media (min-width: 2200px) {
  /* [1] frame */
  body[data-home-version="v3"]:not([data-active-tab="home"]) #main.workspace {
    padding: 0 36px !important;
  }

  /* 1790, not 1840. review-desk-layout.mjs:405 records the intent as "tracks
     the frame up to 1840 CSS px", but the same comment reaffirms the rule it
     will not trade away: the rail must keep 80 CSS px from the glass. The
     arithmetic only allows one of them. Available after the rail is 1969-56 =
     1913 CSS px; an 80px edge margin leaves 1833 for gutter+cap, so 36+1790
     = 1826 clears it and 36+1840 = 1876 does not.

     1750 rather than 1790 because the view is CENTRED, so shrinking the cap
     by N only moves its right edge N/2. Solving it properly instead of
     iterating: right = 56 + 36 + (1841-cap)/2 + cap = 1012.5 + cap/2, and
     right <= 1969-80 = 1889 gives cap <= 1753. Measured at 1750: rail ends
     1887 CSS / 2453 device, 82 CSS and 106 device clear of the glass. */
  #view-leads.active {
    max-width: min(1750px, 100%) !important;
  }

  /* [2] the released width goes to the list and the rail, never the prose */
  #view-leads .lead-review-desk.is-person-open {
    grid-template-columns: minmax(320px, 680px) minmax(0, 1fr);
  }

  .person-dossier-shell,
  #view-leads.active .person-dossier-shell {
    grid-template-columns: minmax(0, 1fr) 440px;
  }
}

/* [3] Panel definition.

   --panel-rule is 2px, not 1.5px, because Chromium FLOORS border widths to
   whole device pixels: 1.5px x 1.3 zoom = 1.95 -> floors to 1 device px, ie
   no change at all. 2px x 1.3 = 2.6 -> 2 device px. Alpha goes 0.16 -> 0.28
   for the same reason: the colour was never wrong, it was never visible. */
:root {
  --panel-rule: 2px;
  --panel-edge: rgba(122, 31, 42, 0.28);
  --panel-edge-soft: rgba(122, 31, 42, 0.14);
}

/* The seam between the candidate list and the person. This is the one line
   that carries the composition, so it is the strongest.
   Matches :13541's specificity to overturn its `border-left: 0`. */
#view-leads .lead-review-desk.is-person-open .lead-detail {
  border-left: var(--panel-rule) solid var(--panel-edge);
}

/* The dossier card sits inside .lead-detail and drew the seam previously.
   With the seam now on the pane, its own edge would double the line. */
#view-leads .lead-review-desk.is-person-open .detail-card.lead-profile.mandate-dossier {
  border-left: 0;
}

/* Outer frame of the desk: the list's leading edge and the rail's seam. */
#view-leads .lead-list-pane {
  border-left: var(--panel-rule) solid var(--panel-edge-soft);
}

#view-leads .person-dossier-shell > * + * {
  border-left: var(--panel-rule) solid var(--panel-edge-soft);
}

/* The selected row is the one piece of state the eye should find instantly,
   so it gets full-strength burgundy rather than a tint. */
#view-leads .lead-review-desk .lead-row.review-candidate-row.active {
  border-left: 3px solid var(--burgundy);
}

/* ==========================================================================
   CANDIDATE CARD: USE THE WIDTH IT WAS GIVEN (2026-08-02)

   Widening the list pane (884px on a 2560 frame) made the card worse, not
   better. `.review-candidate-body` is a vertical stack of five short rows --
   name, role, firm, likelihood, contact route -- so every pixel the pane
   gained became empty space down the right-hand half of every card. A narrow
   composition stretched is not a wide composition.

   The five rows carry two different kinds of information, so they become two
   columns: WHO on the left (name, role, firm) and HOW STRONG on the right
   (decision-maker likelihood, contact route). That halves the card height,
   spends the width on structure rather than air, and gives the eye a fixed
   right-hand track to scan down when comparing candidates -- which is the
   actual job of this list.

   Grid areas rather than source order because the reason line, when present,
   must span the full width underneath both columns; with plain auto-flow it
   would land in whichever cell fell next and break the two-track read.

   Gated at >=1800, not >=2200. The gate belongs where the LIST becomes
   wide enough to hold two tracks, and that is the 1800 step, where the desk
   grid goes from a fixed 300px pane to minmax(236px, 540px). Below 1800 the
   pane is 300px and the stack is correct, so 1280/1440/1600 -- the widths
   the e2e chain asserts -- keep exactly today's card.

   The FRAME rules above stay at >=2200, and not out of caution: there is
   nothing to reclaim below it. The rail-to-edge guard binds first, and
   under centring the gutter cancels out of the arithmetic, so the ceiling
   is (viewport - 80) - 828. That gives ~1384 at 1600 against a shipped
   1340, and 1521 at 1998 against a shipped 1521 -- ie 46px of slack at one
   width and none at the other. review-desk-layout.mjs prints the same
   conclusion as railToEdge: 103 at 1600, 81 at 1998, against a floor of 80.
   2560 was the only width with real slack and it has now been taken.
   ========================================================================== */

@media (min-width: 1800px) {
  #view-leads .review-candidate-row .review-candidate-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
    grid-template-areas:
      "identity signal"
      "firm     route"
      "reason   reason";
    column-gap: 32px;
    row-gap: 2px;
    align-items: start;
  }

  #view-leads .review-candidate-row .lead-row-line-identity { grid-area: identity; }
  #view-leads .review-candidate-row .review-person-firm     { grid-area: firm; }
  #view-leads .review-candidate-row .review-candidate-reason { grid-area: reason; }

  /* The signal track. Right-aligned so the values form a straight edge down
     the list; that alignment is the whole point of giving them a column. */
  #view-leads .review-candidate-row .review-decision-likelihood {
    grid-area: signal;
    justify-self: end;
    text-align: right;
  }

  #view-leads .review-candidate-row .review-candidate-facts {
    grid-area: route;
    justify-self: end;
    text-align: right;
    justify-content: flex-end;
  }

  /* The reason only earns its full-width row when it has content; an empty
     node would otherwise hold open a third row of pure padding. */
  #view-leads .review-candidate-row .review-candidate-reason:empty {
    display: none;
  }
}

/* ==========================================================================
   THE SEAM OPENS WHERE THE SELECTION FLOWS THROUGH (2026-08-02)

   Correcting my own change above. The desk already had a considered
   master-detail connection: the active row carries `margin-right: -10px`,
   `border-right: 0`, a left-only radius and a gradient that resolves to the
   surface colour (:13527), and `.lead-detail` carried `border-left: 0`
   (:13541) precisely so the selected card could run into the profile with
   nothing between them. Putting a 2px rule on `.lead-detail` drew a hard
   line exactly across that junction and cut the connection.

   Both things are wanted, and they are not in conflict once the seam is
   drawn in the right place. The boundary between the list and the profile
   should read as a real edge -- EXCEPT at the selected row, where the two
   surfaces are meant to be one. So the rule moves off `.lead-detail` and
   onto the LIST PANE's right edge, and the active row covers it: a child
   paints above its parent's border, and that row already overhangs the pane
   by 10px, so it erases the seam across exactly its own height and no more.
   The break tracks the selection with no JS and no per-row bookkeeping.

   The active row's gradient is re-ended on #ffffff rather than --surface
   (#FBF7EE) so the hand-off is invisible: the profile pane's own background
   resolves to #ffffff (:3438), and a cream-to-white step at the junction is
   the tell that gives away two panels pretending to be one surface.
   ========================================================================== */

/* Put the boundary back where the composition wants it. */
#view-leads .lead-review-desk.is-person-open .lead-detail {
  border-left: 0;
}

#view-leads .lead-review-desk.is-person-open .lead-list-pane {
  border-right: var(--panel-rule) solid var(--panel-edge);
}

/* The selected row bridges the seam. `position: relative` guarantees it
   paints in the positioned layer, above the pane's border, rather than
   relying on the default painting order for a background alone. */
#view-leads .lead-review-desk.is-person-open .lead-row.review-candidate-row.active {
  position: relative;
  z-index: 1;
  margin-right: calc(-10px - var(--panel-rule));
  padding-right: calc(20px + var(--panel-rule));
  background: linear-gradient(90deg, #fffaf4 0%, #ffffff 100%);
}

/* The error paragraph is always in the DOM (it is an aria-live region, so it
   must exist before it has anything to say). Empty, it still took a grid row
   plus the 18px gap either side, which opened a ~65px hole between Password
   and Sign in against ~35px everywhere else in the card -- read as a missing
   field rather than as spacing. Collapsed until it has text; the live region
   still announces, because display toggles on content, not on the node. */
.login-card .form-error:empty,
.setup-card .form-error:empty {
  display: none;
}


/* ==========================================================================
   U-01 / U-02 / U-03 — THE ZOOM/VH FAULT AND THE BODY SCROLL CONTAINER
   (2026-08-02). Catalogued in tmp/ui-survey/REPORT.md; U-01 and U-02 are
   the survey's only two "breaks-usability" entries.

   ONE ARITHMETIC BUG BEHIND U-01 AND U-03. `vh` resolves against the
   viewport and ignores `zoom`, but the box it produces is then multiplied
   by the zoom on its way to the screen. So `height: 100vh` inside a body at
   zoom 1.3 paints 1.3 viewports tall: the fixed sidebar measured 1242px at
   1920, 1274px at 1969 and 1872px at 2560 -- a 432px overhang here.

   U-01 is that overhang with a consequence. `#sidebarAvatar` is the only
   affordance that opens the account menu, and that menu is the only route
   to Sign out. At 2560 it sat at y=1807 in a 1440-tall viewport;
   elementFromPoint returned outside-viewport and the popover never opened.
   Scrolling could not save it -- the rail is position:fixed and the page's
   whole scrollable range IS the overhang. There was no way to sign out.

   U-03 is the same multiply on the shell: the document was `vh x zoom` tall
   on every view, so every page carried a few hundred px of scrollable
   nothing.

   --app-zoom mirrors the ladder at :18446-18448 and must be kept in step
   with it. It is declared on :root, which is not itself zoomed, so it
   inherits cleanly into the zoomed subtree.

   U-02 IS A DIFFERENT BUG WITH A ONE-WORD FIX. `overflow-x: hidden` on
   `html, body` (:8710) makes body a scroll container, so `position: sticky`
   on the top bar resolved against a scrollport that was not the one
   scrolling -- measured `barTop = -scrollY` exactly, ie no sticking at all.
   `clip` suppresses the same overflow WITHOUT establishing a scroll
   container, which is the case it was added to the spec for.

   WHAT IS DELIBERATELY NOT HERE: the pipeline board. `:18605` carries
   `min-height: calc(100vh - 172px)` on .pipeline-board and looks like the
   same fault, but it was superseded at `:19088`, where the board takes
   `flex: 1 1 0; min-height: 0; overflow-y: auto` so its tall content
   scrolls inside itself rather than growing the page. A divided copy of
   :18605 appended here wins on source order and re-breaks that -- measured,
   the board leaked 89px into the document and board-heading-clip.mjs
   failed on precisely the assertion it exists for. Those rules are dead
   already; leave them dead.
   ========================================================================== */

:root { --app-zoom: 1; }
@media (min-width: 1800px) { :root { --app-zoom: 1.15; } }
@media (min-width: 2400px) { :root { --app-zoom: 1.3; } }
@media (min-width: 3000px) { :root { --app-zoom: 1.45; } }

/* U-02 */
html,
body {
  overflow-x: clip;
}

/* Companion to the clip swap: `hidden` gave body a block formatting context
   as a side effect and `clip` does not. flow-root restores that one
   property without making body a scroll container, so sticky keeps working
   and body's box behaves exactly as it did before. */
body {
  display: flow-root;
}

/* U-01. The selector is not plain `.sidebar`: :15664 ships
   `body[data-home-version="v3"] .sidebar { height: 100vh !important }` at
   specificity (0,2,1) and that attribute is hard-coded on <body>
   (index.html:27), so a (0,1,0) rule loses however late it sits. A first
   pass used the short form and changed nothing.

   The >=641px bound is load-bearing, not tidiness. At <=640px the sidebar
   is not a rail at all -- :19229 turns it into the bottom tab bar with
   `height: auto !important; min-height: 0 !important`. That rule is also
   `body[data-home-version="v3"] .sidebar`, ie identical specificity, so an
   unscoped copy here wins on source order and inflates the phone tab bar to
   a full viewport. phone-audit.mjs caught exactly that. Zoom only starts at
   1800px, so nothing is lost by bounding this to the widths that have a
   rail. */
@media (min-width: 641px) {
  .sidebar,
  body[data-home-version="v3"] .sidebar {
    height: calc(100vh / var(--app-zoom)) !important;
  }
}

/* U-03. Ids because these carry the document's scrollable height and must
   not be out-specified by the class rules layered over this shell. */
#appShell:not(.hidden),
.app-shell:not(.hidden) {
  min-height: calc(100vh / var(--app-zoom));
}

#main.workspace,
main.workspace {
  min-height: calc(100vh / var(--app-zoom));
}

/* Same fault wearing a calc(): capping the shell was not enough while a
   child held its own `100vh - chrome` min-height. Only the vh term is
   divided; the subtracted offset is already in the box's own CSS px. */
.landing-home,
#landingHome.landing-home {
  min-height: calc((100vh / var(--app-zoom)) - 92px);
}

/* body itself is the purest form -- a box declared one viewport tall, then
   painted 1.3 viewports tall by its own zoom. With every descendant fixed
   the overflow list was empty and the document was still 1872px against a
   1440px frame, because body alone held it open. */
body {
  min-height: calc(100vh / var(--app-zoom));
}

/* The auth screens solved this locally before the shared variable existed.
   Point their local name at it so the ladder is declared once. */
.login-screen,
.setup-screen {
  --auth-zoom: var(--app-zoom);
}

/* ==========================================================================
   U-06 / U-07 — SETTINGS: CARDS THE WIDTH OF THEIR CONTENT (2026-08-02)

   The inverse of the Review desk problem. There the frame was too small;
   here the card is full-bleed while everything inside it is capped, so the
   width becomes white space INSIDE the panel rather than margin outside it.
   Survey measurements at 2560: panel = full view width (2487px) in every
   group, with "You and your firm" holding fields capped at 806px (~1,650px
   of empty card), Automation holding ~700px of centred copy in ~2,400px
   boxes, and Templates holding 300-400px cards in a 2,400px one.

   Capping the whole view was tried first and was worse: it centres, so
   Settings floated with ~310px of dead space on BOTH sides while the
   breadcrumb rule above it still spanned the frame, and the misalignment
   read as broken. The defect is not the view's width, it is that
   individual blocks are full-bleed around capped content -- so the cap
   belongs on those blocks, not on the page.

   U-07 rides along because it is the same fault one level down: a password
   input inherits the block's width, so the Tavily and Hunter key fields
   measured 1145px at 2560 for a value that is ~40 characters. Capped to a
   width that suits the content, left-aligned so the label, field and
   status line stay a single column.

   Bounded to >=1024px: below that the single-column stack is already
   correct and the cap would do nothing but risk the phone layout.
   ========================================================================== */

@media (min-width: 1024px) {
  /* An API key, a tenant id, an organizer address: none of these are prose
     and none of them read better at 1145px. */
  #view-settings input[type="text"],
  #view-settings input[type="password"],
  #view-settings input[type="email"],
  #view-settings input[type="url"] {
    max-width: 460px;
  }

  /* Empty states were centred copy floating in a full-bleed box. Hold the
     copy to a measure so the box reads as a card with a message in it. */
  #view-settings .empty-state,
  #view-settings .empty-state-card {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Per-group block widths. One number cannot serve all six groups, because
   the groups hold different things — which is why the first attempt (a
   single cap on the whole view) was wrong in both directions at once.
   Measured at 2560, content width inside each 2394px block:

     You and your firm   fields reach  806px  -> ~1,590 wasted
     People and access   member rows + a three-field invite form, so it
                         takes the same cap as identity
     Automation          copy reaches ~700px  -> ~1,690 wasted, x3 blocks
     Templates           3-col grid   1580px  -> ~810 wasted
     Knowledge           label/value  ~1,900  -> uses most of it
     Connections         2-col cards, fills the frame — left alone

   So each group is capped near what it actually holds. The cap is on the
   BLOCK, not the view: the page keeps its full-width heading and rule, and
   the card stops looking like a bug by ending where its content does. */
@media (min-width: 1024px) {
  #settingsGroupIdentity .settings-block,
  #settingsGroupAccess .settings-block,
  #settingsGroupAutomation .settings-block {
    max-width: 880px;
  }

  #settingsGroupTemplates .settings-block {
    max-width: 1360px;
  }

  #settingsGroupKnowledge .settings-block {
    max-width: 1500px;
  }
}

/* ==========================================================================
   U-07 / U-12 — CONTROLS AND ROWS THE SIZE OF WHAT THEY HOLD (2026-08-02)

   Re-measured at 2560 before writing anything, because the survey is from
   2026-07-29 and several passes have landed since. Most of its width items
   no longer reproduce: the right gutter is 47-152px where it recorded 0,
   Find fills its view where it recorded 53%, and the Review desk no longer
   strands 370px a side. U-08 was dead too. What follows is only what still
   measured broken.

   U-07, still live outside Settings. A control inherits its container's
   width, so on a 2394px view: the review search box 1864px, the contacts
   people-search 2037px, the scan URL 1993px, the note field 1328px. None of
   these hold more than a line of text. The filter ROW is capped rather than
   the input inside it, so the search and its two selects stay a single
   group instead of the selects being flung to the far edge.

   U-12, still live at 1859px of nothing. `.followup-card` is
   `minmax(0, 1fr) auto` -- body left, due badge hard right -- so every
   pixel the view gains lands between the sentence and the chip. A follow-up
   row is an inbox line; it reads at a bounded width and gains nothing from
   a 2394px one.
   ========================================================================== */

@media (min-width: 1024px) {
  /* U-07 */
  .filter-row {
    max-width: 1400px;
  }

  #scannerUrl,
  #newNote,
  #peopleSearchInput,
  #searchInput {
    max-width: 720px;
  }

  /* U-12 */
  .followup-card {
    max-width: 1100px;
  }
}

/* ==========================================================================
   U-09 — THE TOAST STOPS LANDING ON THE PULLED-DETAILS RAIL (2026-08-02)

   Measured with a person open at 2560: toast 1991..2537, rail 1881..2453.
   The toast is bottom-right fixed and the rail is the right-hand column of
   the desk, so they occupy the same corner at every width -- the survey
   found overlapsRail true at 1280, 1440, 1600, 1920, 1969 and 2560, which
   corrects the older P3 #18 note that recorded it as 1600x900 only.

   It matters more than a cosmetic overlap: the rail is where the address
   and provenance live, and the toast that covers them is usually the one
   confirming the action you just took on that person.

   So the toast steps left of the rail, but only while a rail is actually
   on screen -- `:has(.person-dossier-side)` -- and the offset tracks the
   rail's own width at each breakpoint, including the 440px this session
   gave it at >=2200. Everywhere else the toast keeps its 18px corner.
   Bounded to >=1024px: the phone layout has no rail and its own stack
   order (tab bar -> reach bar -> FAB -> toast) is already documented.
   ========================================================================== */

@media (min-width: 1024px) {
  body[data-active-tab="leads"]:has(.person-dossier-side) {
    /* rail width + the page gutter OUTSIDE the rail + a 16px gap. The
       first attempt used the rail width alone and still clipped it by
       65px, because the view is centred and leaves its own margin to the
       right of the rail before the viewport edge. */
    --toast-right: 358px;   /* rail 320 + gutter 22 + 16 */
  }
  .toast {
    right: var(--toast-right, 18px);
  }
}

@media (min-width: 1600px) {
  body[data-active-tab="leads"]:has(.person-dossier-side) { --toast-right: 458px; }  /* rail 340 + gutter 102 + 16 */
}
@media (min-width: 1800px) {
  body[data-active-tab="leads"]:has(.person-dossier-side) { --toast-right: 476px; }  /* rail 380 + gutter 80 + 16 */
}
@media (min-width: 2200px) {
  body[data-active-tab="leads"]:has(.person-dossier-side) { --toast-right: 538px; }  /* rail 440 + gutter 82 + 16 */
}

/* ==========================================================================
   U-17 / U-18 — THE LAST TWO POLISH ITEMS (2026-08-02)

   U-17. `.lifecycle-strip-axis` is `flex: 1 1 auto` and its `::before`
   paints a 2px rule from edge to edge, so the axis is as long as the card
   whatever it holds. On an issuer with one event that is a single dot at
   the far left followed by ~1,400px of empty rule -- measured on Osborne
   Clarke at 2560, axis 1849px for one pin.

   A timeline's rule exists to carry ordering between events. With one
   event there is no ordering, so the rule is decoration standing in for
   data that does not exist; with two or three it only needs enough length
   to separate them. Quantity queries rather than a blanket cap, so a busy
   issuer still gets the full-width axis it earns:

     1 event    no rule at all, just the pin
     2-3        axis sized to a short bounded track
     4+         unchanged, stretches as before

   U-18. `.contact-row` is `minmax(250px, 1.1fr) minmax(170px, 0.85fr)
   minmax(245px, 1fr) 148px`, and fr units spend whatever the view gives
   them: at 2560 the columns measured 608/470/553/148 inside a 2394px row,
   so a name ending at 365 sat 365px clear of the firm beside it. The four
   summary tiles have the same shape -- 589px each holding roughly 130px of
   number and label.

   Both are capped to what they hold rather than to the frame, and the head
   and rows share the cap so the columns stay aligned with their labels.
   ========================================================================== */

/* U-17. The axis rule goes first, then the strip that frames it: dropping
   the rule alone still left a full-width bordered box holding one dot, so
   the box is bounded too. Above three events it stretches as before,
   because then the track is carrying real ordering.

   Written as bounded-by-default plus an opt-out, NOT as
   `:has(... :not(:has(...)))`. A first attempt used that and silently did
   nothing: :has() may not be nested inside :has(), so the whole rule is
   invalid and dropped. Element.matches() throws on it, which is how it was
   caught -- computed max-width had stayed `none` while the CSS looked
   right in the file. Scoped to the issuers dossier, which is where the
   survey measured it; the leads dossier has its own strip rules at :14593. */
#view-issuers .lifecycle-strip {
  max-width: 420px;
}

#view-issuers .lifecycle-strip:has(> .lifecycle-strip-axis > :nth-child(4)) {
  max-width: none;
}

.lifecycle-strip-axis:not(:has(> :nth-child(2)))::before {
  display: none;
}

.lifecycle-strip-axis:not(:has(> :nth-child(2))) {
  flex: 0 0 auto;
}

.lifecycle-strip-axis:has(> :nth-child(2)):not(:has(> :nth-child(4))) {
  flex: 0 0 auto;
  min-width: 320px;
}

@media (min-width: 1024px) {
  /* U-18 */
  #view-contacts .contacts-table,
  #view-contacts .contacts-summary {
    max-width: 1400px;
  }
}

/* ============================================================
   FB-06 — the brief controls the review desk was hiding.

   Two `display: none` rules between them made "Generate brief" unreachable by
   any route a person could take:

     #view-leads .lead-brief-select { display: none }   (:13866)
     #view-leads .brief-launcher    { display: none }   (:13217)

   The first hid the per-row checkbox, which is the only thing that puts an id
   in `selectedBriefLeadIds`; the second hid the counter that reports the set
   and the button that consumes it. `updateBriefSelectionUi()` was correct all
   along and had nothing to update. Every previous proof of the brief path went
   round the UI, through a direct POST or the test hook, so nothing caught it.

   Appended rather than edited in place: styles.css is append-only at the end
   (AGENTS.md), so the original rules stay where they are and this block wins on
   source order at equal specificity.
   ============================================================ */

/* 1. The row control. A bare 14px box floating on a card reads as debris; the
      same box inside a bordered pill labelled BRIEF reads as a control and
      says what ticking it does. */
#view-leads .lead-brief-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 5px;
  border: var(--hairline-w) solid var(--hairline-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 86%, var(--canvas));
  color: var(--ink-muted);
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

#view-leads .lead-brief-select:hover {
  border-color: var(--burgundy);
  background: #fffaf4;
  color: var(--ink);
}

#view-leads .lead-brief-select input[type="checkbox"] {
  display: inline-block;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--burgundy);
  cursor: pointer;
}

/* 2. The keyboard route is the half that was never reachable, so it gets a ring
      rather than the browser hairline. Space toggles natively once the box is
      focusable — no key handler is needed and adding one would fight it.

      The ring goes round the PILL, not round the box. The box sits 5px from the
      pill's left edge, so an outline on the input with any offset cuts a gap
      straight through the pill it is sitting in; at 3x that reads as a broken
      widget. Offset outward, the ring lands on the row behind the pill, which
      is light in both the picked and unpicked states, so one colour works for
      both. `:has()` is already used elsewhere in this sheet. */
#view-leads .lead-brief-select:has(input[type="checkbox"]:focus-visible) {
  outline: 2px solid var(--burgundy);
  outline-offset: 2px;
}

/* 3. Room for the pill on the lines it would otherwise cover. Applied to the
      identity and firm lines rather than to the row, so the reason and the
      facts underneath still use the full width of the rail. */
#view-leads .review-person-row .lead-row-line-identity,
#view-leads .review-person-row .review-person-firm {
  padding-right: 74px;
}

@media (max-width: 720px) {
  #view-leads .review-person-row .lead-row-line-identity,
  #view-leads .review-person-row .review-person-firm {
    padding-right: 70px;
  }
}

/* 4. The picked state, on the ROW. At rail width a 15px tick is not something
      you can scan a dozen candidates for.

      Deliberately NOT the left border: that channel already carries the verdict
      colour, and `.active` uses it for "open in the dossier". A tinted face plus
      a filled pill is a different signal from both, so a row can be open AND
      picked and still read as two separate facts.

      `.is-brief-selected` is written into the row markup by
      renderPersonReviewRow() so it survives the keyed re-render in
      list-reconcile.js, AND toggled live by updateBriefSelectionUi() so the row
      changes in the same frame as the tick. */
#view-leads .lead-row.review-candidate-row.is-brief-selected {
  border-color: color-mix(in srgb, var(--burgundy) 34%, transparent);
  background: color-mix(in srgb, var(--burgundy) 7%, var(--surface));
}

#view-leads .lead-row.review-candidate-row.is-brief-selected:hover {
  background: color-mix(in srgb, var(--burgundy) 10%, var(--surface));
}

#view-leads .lead-row.review-candidate-row.is-brief-selected .lead-brief-select {
  border-color: var(--burgundy);
  background: var(--burgundy);
  color: #fff;
}

/* A row that is both picked and open. The person-open skin paints `.active`
   with a left-to-right cream gradient at :13550 and that selector carries one
   more class than the rule above, so without this the open row loses its tint
   and the picked state falls back to the pill alone. The gradient is what
   visually joins the row to the dossier beside it, so this tints the gradient
   rather than replacing it with a flat fill. */
#view-leads .lead-review-desk.is-person-open .lead-row.review-candidate-row.active.is-brief-selected {
  border-color: color-mix(in srgb, var(--burgundy) 34%, transparent);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--burgundy) 10%, #fffaf4) 0%,
    color-mix(in srgb, var(--burgundy) 6%, var(--surface)) 100%
  );
}

/* 5. The launcher: the counter this ticket asks to keep truthful and the button
      it asks to enable were both off-screen on the one view that feeds them.
      Un-hiding the checkbox alone would have produced a tick that changes an
      invisible number and enables an invisible button.

      Restored to the flex row `.brief-launcher` declares at :9008. The padding,
      border and surface in the :13217 rule are the review-desk skin already
      written for this element and are left exactly as they were. */
#view-leads .brief-launcher {
  display: flex;
}

#view-leads #generateBriefFromSelected:disabled {
  border-color: var(--hairline-strong);
  background: color-mix(in srgb, var(--surface) 80%, var(--canvas));
  color: var(--ink-muted);
  cursor: not-allowed;
}

/* =================================================================
   FB-08 — "Mandate couldn't load your workspace."

   The band the app raises when a workspace request fails while the
   session itself is fine. It has to read as an app that is up and
   missing its data, not as a broken page: the sidebar, the header and
   the rest of the shell stay exactly as they are, and this sits at the
   top of the workspace carrying the one control that fixes it.

   `main.workspace` is a flex column (:18641), so the band declares
   flex: 0 0 auto or it gets squeezed by the view below it. Hidden in
   normal operation via `.hidden` (display: none !important, :127) —
   every other spec on this file is the proof that it stays down.
   ================================================================= */
.workspace-load-error {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 12px clamp(14px, 2vw, 28px) 4px;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--burgundy) 26%, transparent);
  border-left: 3px solid var(--burgundy);
  border-radius: 10px;
  background: color-mix(in srgb, var(--burgundy) 7%, var(--surface));
  color: var(--ink);
}

.workspace-load-error-copy {
  min-width: 0;
}

.workspace-load-error-copy strong {
  display: block;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--burgundy-dark);
}

.workspace-load-error-copy p {
  margin: 4px 0 0;
  max-width: 620px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-muted);
}

.workspace-load-error-retry {
  flex: 0 0 auto;
}

/* At phone width the button drops under the copy instead of being
   squeezed onto the same line beside it. */
@media (max-width: 560px) {
  .workspace-load-error {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .workspace-load-error-retry {
    width: 100%;
  }
}

/* ==========================================================================
   FB-05 — the invite experience (2026-08-04)

   Two surfaces, appended rather than woven in: the signed-out invite screen
   borrows .login-screen / .login-card wholesale so it is the same card on the
   same grid backdrop as sign-in, and the owner-side card in
   Settings > You and your firm reuses .settings-block.

   The auth cards were flipped light at :17677 (white ground, var(--ink)
   text), so everything here inks from the app tokens rather than the dark
   card the base rule at :161 still describes. Written against a screenshot,
   not against that base rule: the first attempt used #f8fafc on white and the
   three facts were invisible.

   Only what those two need is defined here. Nothing above this point moves.
   ========================================================================== */

/* --- Signed out: /invite/<token> ----------------------------------------- */

/* The screen holds two cards (the form and the expired/used notice) and shows
   one at a time, so the grid must not reserve a row for the hidden one. */
.invite-screen {
  grid-auto-rows: min-content;
  align-content: center;
}

.invite-facts {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  text-align: left;
}

.invite-facts > div {
  display: grid;
  gap: 2px;
}

.invite-facts dt {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.invite-facts dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* The expired/used card is a statement, not a form: the heading carries the
   whole message, so it reads at the size the sign-in heading does. */
#inviteExpiredCard h1 {
  font-size: 1.5rem;
  line-height: 1.25;
}

/* --- Owner side: Settings > People and access ---------------------------- */

.workspace-users-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.workspace-user-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}

.workspace-user-main {
  flex: 1 1 200px;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.workspace-user-main strong {
  font-size: 0.95rem;
}

.workspace-user-email {
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.workspace-user-role {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.82rem;
}

.workspace-user-status {
  flex: 0 0 auto;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.76rem;
  line-height: 1.5;
}

.workspace-user-status[data-user-state="active"] {
  border-color: rgba(0, 122, 112, 0.35);
  color: #0b6b60;
  background: rgba(0, 122, 112, 0.08);
}

.workspace-user-status[data-user-state="invited"] {
  border-color: rgba(124, 31, 42, 0.28);
  color: #7c1f2a;
  background: rgba(124, 31, 42, 0.07);
}

.workspace-user-status[data-user-state="suspended"] {
  color: #5d6976;
  background: rgba(93, 105, 118, 0.1);
}

.workspace-user-actions {
  flex: 0 0 auto;
}

/* Suspending signs the person out everywhere, so the control is armed by the
   first click and fired by the second. No timer resets it — a control that
   disarms itself while you read it is worse than one that waits. */
.workspace-user-actions .is-confirming {
  border-color: #7c1f2a;
  color: #7c1f2a;
  font-weight: 650;
}

.workspace-users-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.workspace-invite-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.workspace-invite-form label {
  display: grid;
  gap: 6px;
}

.workspace-invite-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.workspace-invite-result {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.workspace-invite-result p {
  margin: 0 0 8px;
}

.workspace-invite-link-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.workspace-invite-link-row input {
  flex: 1 1 260px;
  min-width: 0;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.82rem;
}

/* Phone: the row furniture stacks rather than being squeezed off the edge.
   settings-ia.mjs asserts nothing in the selected group is clipped at 375px. */
@media (max-width: 560px) {
  .workspace-user-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .workspace-user-actions,
  .workspace-invite-link-row input,
  .workspace-invite-link-row button {
    width: 100%;
  }

  .workspace-users-actions .primary-button {
    width: 100%;
  }
}

/* ==========================================================================
   SETUP WIZARD COVERAGE OPTIONS — repaint for the light card (cl79, 2026-08-05)
   --------------------------------------------------------------------------
   Same failure the step indicator had at cl31 and the setup inputs had before
   that. `.setup-intent-list .intent-card*` (~line 6502) is labelled "Setup
   wizard variant — dark card background, lighter text": it was written when
   the setup card was a dark card. The card has been white since the auth-screen
   flip (~line 17678), so every one of its colours now lands on the wrong
   surface, and step 2 rendered three separate faults from that one cause:

     1. Option TITLE painted #f8fafc on a white card — 1.05:1. Invisible.
        Every option, including the two-line "Show me everything" title.
     2. Option DESCRIPTION survived only by accident: the later
        `.setup-card small { color: var(--ink-muted) !important }` (~17693)
        outranks the variant. `.setup-card small { font-weight: 650 }` (~220)
        was never outranked though, so the description rendered BOLDER than
        its own ghost title — the hierarchy read upside down.
     3. SELECTED card painted rgba(124,31,42,0.22) — a pale pink over white,
        not the solid maroon its `color: #fff` title assumed — so the selected
        title came out white-on-pink at 1.51:1.

   Repaint to the component's own light treatment. `.intent-card` unscoped
   (~6493) already does exactly this on the home picker, and it is the same
   selected-row language as `.frequency-chip:has(input:checked)` and
   `.dv2-scope-chip[aria-checked="true"]`: light tint, solid brand border,
   DARK brand text. No white text on a tint anywhere.

   The description COLOUR is deliberately left to the `!important` auth-card
   rule (resolves to --ink-muted #5b6675, 5.83:1 — already correct); only its
   weight is corrected here, so the diff stays on the broken layers.
   ========================================================================== */

/* Unselected — a normal card on white. */
.setup-intent-list .intent-card {
  background: var(--surface, #ffffff);
  border-color: var(--line, #e8eaee);
}

.setup-intent-list .intent-card:hover {
  background: var(--panel-soft, #fafbfc);
  border-color: var(--line-strong, #d5d8de);
}

/* Title: dark ink, and heavier than the description below it. */
.setup-intent-list .intent-card-body strong {
  color: var(--ink, #14181f);
  font-weight: 700;
  /* `normal` left a two-line title (the "Show me everything" option) cramped
     and knocked the radio off the first line. Pin it so wrapped and
     single-line titles space identically. */
  line-height: 1.35;
}

/* Description: secondary. Beats `.setup-card small { font-weight: 650 }` on
   specificity — that rule is for the helper text under step-1 inputs and has
   no business bolding an option description past its own title. */
.setup-intent-list .intent-card-body small {
  font-weight: 450;
}

/* Radio sits centred on the FIRST line of the title at both widths, whether
   or not that title wraps.

   Fourth casualty of the same screen, and the reason the list read as "radio
   circles + orphaned descriptions with phantom text above": the blanket
   `input, select, textarea { min-height: 40px }` (~line 3059) is form-field
   sizing, and it catches `input[type="radio"]` too. `.intent-card
   input[type="radio"]` (~6468) sets only accent-colour and a 3px nudge, never
   a height, so each radio got a 40px-tall box inside a 12px-padded card and
   drew its glyph centred in that box — 14.5px BELOW the title's first line,
   i.e. level with the description. Size the control to the control.
   (Tap target is unaffected: `.intent-card` is a <label>, so the whole card
   is clickable.) */
.setup-intent-list .intent-card input[type="radio"] {
  min-height: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

/* Selected — light brand tint, solid brand border, dark brand title.
   The inset shadow doubles the border weight without moving the box, so
   selecting an option does not reflow the list. */
.setup-intent-list .intent-card.is-on {
  background: rgba(124, 31, 42, 0.06);
  border-color: var(--mandate-red, #7C1F2A);
  box-shadow: inset 0 0 0 1px var(--mandate-red, #7C1F2A);
}

.setup-intent-list .intent-card.is-on .intent-card-body strong {
  color: var(--burgundy-dark, #5A1620);
}

/* ==========================================================================
   FIRM-POSITIONING NUDGE — stop it reading as a second error (cl79, 2026-08-05)
   --------------------------------------------------------------------------
   `.firm-profile-nudge` (~17158) and `.workspace-load-error` (~23378) were
   painted from the same palette: burgundy-tinted fill, burgundy border,
   burgundy title. When both are up — the load failure at the top of the
   workspace and the nudge in the home column — the desk reads as two failures
   stacked, and the nudge is not a failure. It is an optional suggestion with
   a "Not now" button on it.

   Give the urgency to the panel that earned it. The error panel is untouched:
   it keeps the burgundy fill, the burgundy border and its 3px left accent bar.
   The nudge drops to the app's calm-informational treatment — neutral paper
   card with a hairline, dark ink title, muted body — the same language as
   `.setup-safety-note` (~274) and `.welcome-tip-card` (~16987). Its burgundy
   "Open Settings" button stays, and is now the only brand accent on it.
   ========================================================================== */
.firm-profile-nudge {
  background: var(--panel-soft, #fafbfc);
  border-color: var(--line, #e8eaee);
}

.firm-profile-nudge-body strong {
  color: var(--ink, #14181f);
}

/* ==========================================================================
   NARROW THIS MARKET — the scope row reads as a control set (2026-08-05)
   ==========================================================================
   Conor, on the live Find page with the China-desk panel selected: "this narrow
   market section needs to look way better… i asked for multiples countries and
   cities and segments but they never materialised."

   The multi-select was never missing — `toggle` has always pushed into an array
   and the server has always matched by set membership. What was missing was any
   sign of it. Measured on that panel at 1440px, the row rendered four columns of
   which three were mostly prose: one 4-line country lecture, a size apology, and
   a detached grey counts box, with the actual controls drawn as hairline tags
   identical to the read-only metadata pills used elsewhere in the app.

   Four changes, all here, all append-only over the original block at ~20937:

     1. The row becomes one surface. It was a bare top border with the counts
        line floating below as a separate card; now the groups and the counts sit
        in a single panel with the counts as its flush footer, so "9 firms match"
        is visibly the output of the controls above it rather than a notice.
     2. A chip gets a tick box. `[aria-checked]` already drove a teal fill; the
        box makes the OFF state look like an empty control rather than a tag, and
        the ON state look ticked rather than merely coloured. It is a ::before on
        the existing button, so no spec that reads chip text or counts changes.
     3. The explainer prose moves behind the "why" disclosure at every width —
        the exact affordance public/mobile-notes.js has driven on phones since
        the note pass. The full copy stays in `.dv2-scope-note`, verbatim, so the
        uniform-note contract and every textContent assertion over it still hold;
        only its resting visibility changes.
     4. New quiet lines: `.dv2-scope-hint` states that chips combine, and
        `.dv2-scope-elsewhere` names the values other markets hold when this one
        offers a single option.

   Palette: teal/ink/line tokens only. tests/e2e/campaign-scope.mjs asserts no
   blue or purple band anywhere in this row.
   ========================================================================== */

.dv2-scope-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 0;
  gap: 0;
  margin-top: 6px;
}

.dv2-scope-head {
  align-items: center;
  gap: 10px;
  padding: 10px 14px 0;
}

/* "Tick any number — they combine". Sits with the label, not under it: a rule
   about the controls belongs in the same line as their heading. */
.dv2-scope-hint {
  flex: 1 1 auto;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted);
}

.dv2-scope-head .dv2-scope-clear { flex: 0 0 auto; }

.dv2-scope-groups {
  padding: 10px 14px 12px;
  gap: 16px 0;
  align-items: start;
}

/* A hairline between columns, so four dimensions read as one instrument rather
   than four unrelated paragraphs that happen to be side by side. */
.dv2-scope-group {
  gap: 7px;
  padding: 0 16px;
  border-left: 1px solid var(--line);
}

.dv2-scope-group:first-child { border-left: 0; padding-left: 0; }

.dv2-scope-group-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
}

.dv2-scope-chips { gap: 7px; }

/* -- the chip, as a control ------------------------------------------------ */

.dv2-scope-chip {
  gap: 7px;
  padding: 5px 11px 5px 9px;
  border-color: var(--line-strong);
  background: var(--panel);
  color: var(--ink);
  font-size: 12.5px;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

/* The tick box. Empty and outlined when off, filled with a check when on —
   the difference between "a control you have not used" and "a label". */
.dv2-scope-chip::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--panel);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 9px;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.dv2-scope-chip:hover {
  border-color: var(--teal);
  background: var(--panel-soft);
  color: var(--ink);
}

.dv2-scope-chip:hover::before { border-color: var(--teal); }

.dv2-scope-chip[aria-checked="true"] {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal-dark);
  box-shadow: inset 0 0 0 1px var(--teal);
}

.dv2-scope-chip[aria-checked="true"]::before {
  background-color: var(--teal);
  border-color: var(--teal);
  /* A white check, inlined so the row stays a single request. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.6 9 10 3.2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dv2-scope-chip-count { font-size: 11px; }

.dv2-scope-chip[aria-checked="true"] .dv2-scope-chip-count {
  color: var(--teal-dark);
  opacity: 0.75;
}

/* -- prose, demoted -------------------------------------------------------- */

/* The short line was mobile-only (hidden by the global rule at ~21578). It now
   carries the note at every width; the two-class selector clears that rule
   without touching the other elements it governs. */
.dv2-scope-row .dv2-note-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}

.dv2-scope-row .dv2-note-brief { min-width: 0; }

.dv2-scope-row .dv2-note-why {
  flex: 0 0 auto;
  margin: 0;
  padding: 1px 7px;
  min-height: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.dv2-scope-row .dv2-note-why:hover { border-color: var(--teal); color: var(--teal); }
.dv2-scope-row .dv2-note-why:focus-visible { outline: none; box-shadow: var(--focus); }

/* The full copy: in the DOM always, on screen on request. The ID beats the
   phone block's own pair (0,3,0 vs 1,2,0), so the open rule below has to carry
   the ID too or a tapped "why" on a phone would be re-hidden by this one. */
#dv2ScopeRow [data-note-host] .dv2-scope-note { display: none; }
#dv2ScopeRow [data-note-host].is-note-open .dv2-scope-note { display: block; }

.dv2-scope-row .dv2-scope-note {
  margin: 2px 0 0;
  padding: 7px 9px;
  border-radius: 6px;
  background: var(--panel-soft);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* A note with nothing to disclose — City and Segment on a panel that has both —
   stays a plain line rather than growing a "why" that reveals itself. */
.dv2-scope-group:not([data-note-host]) .dv2-scope-note {
  padding: 0;
  background: none;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* "One country in this panel. Norway, Sweden and Finland sit in other markets."
   Never disclosed: it is the answer to "why is there only one chip here", and an
   answer behind a button is not an answer. */
.dv2-scope-elsewhere {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* -- the counts line, attached ---------------------------------------------- */

.dv2-scope-counts {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--panel-soft);
  padding: 9px 14px;
  font-size: 12.5px;
  color: var(--ink);
}

.dv2-scope-counts.is-empty {
  border-top-color: var(--amber);
  background: var(--amber-soft);
  color: var(--amber);
}

@media (max-width: 640px) {
  .dv2-scope-row { margin-top: 4px; }
  .dv2-scope-head { padding: 10px 12px 0; flex-wrap: wrap; }
  .dv2-scope-hint { flex: 1 0 100%; order: 3; }
  .dv2-scope-groups { padding: 8px 12px 10px; gap: 14px 0; }
  /* One column on a phone, so the vertical hairline would run beside a single
     stack of controls and read as a stray rule. */
  .dv2-scope-group { padding: 0; border-left: 0; }
  .dv2-scope-counts { padding: 9px 12px; }
  .dv2-scope-row .dv2-note-line { font-size: 11.5px; }
}

/* ==========================================================================
   REVIEW ROW: THE BRIEF PILL'S CORNER IS RESERVED (cl81, 2026-08-05)
   --------------------------------------------------------------------------
   Live report, 2560-wide screen: the likelihood caption read
   "DECISION-MAKER LIKELIH" with the BRIEF pill sitting across the rest of it.
   Not a text overflow — the caption is whole and its box is wide enough
   (144px of text in 187px). It is painted UNDER the pill.

   Two rules that were written months apart and never met:

     .lead-row-v2 > .lead-brief-select { position: absolute; top: 10px;
                                         right: 10px }        (~10498)
     @media (min-width: 1800px) { ... grid-template-areas:
       "identity signal" ... }                                 (~22766)

   The pill is taken out of flow and pinned to the row's top-right corner. The
   >=1800 card then moves the likelihood block INTO that corner as the `signal`
   cell, right-aligned. FB-06 reserved room for the pill by padding the
   identity and firm lines (~23291) — correct for the stacked card, where those
   are the lines the corner covers, and irrelevant at >=1800, where they sit in
   the left column and the corner belongs to `signal`.

   So the reservation moves to where the corner actually is. Above 1800 the
   whole two-column body is inset by the pill's width, which keeps the signal
   and route cells on the one right-hand edge the wide card exists to give
   them, and the identity padding is released — it was stealing 74px from the
   name and role for a control that is nowhere near them at this width.

   74px is FB-06's own measurement of the pill (its 64px against a 10px offset)
   and is reused deliberately: one number for one control. The e2e chain
   asserts 1280/1440/1600, which is why nothing caught this — the failing
   width is above every gate. tests/e2e/review-desk-selection.mjs now measures
   the two boxes at 2560 and fails if they intersect.
   ========================================================================== */

@media (min-width: 1800px) {
  #view-leads .review-candidate-row .review-candidate-body {
    padding-right: 74px;
  }

  #view-leads .review-person-row .lead-row-line-identity,
  #view-leads .review-person-row .review-person-firm {
    padding-right: 0;
  }
}

/* ================================================================
   DESIGN LANGUAGE — WAVE 1 (2026-08-05)
   Tokens, self-hosted fonts, and the Review run page.

   Spec: docs/design/DESIGN-LANGUAGE.md
   Normative reference: docs/design/review-run-prototype.html

   This block is the foundation wave of the rollout Conor directed on
   2026-08-05 ("roll it out"). It lands three things:

     1. The 20 canonical colour tokens, as a REPOINT of the names the
        app already uses rather than a parallel set. CLEAN LIGHT v1
        (the !important :root block that used to sit at ~17599) has
        been deleted in this same change — it was the thing burying
        the warm-editorial system these values restore.
     2. Self-hosted Source Serif 4 and IBM Plex Mono, and the three
        font tokens repointed onto them plus the Helvetica Neue system
        stack. Nothing is fetched off-origin any more.
     3. The Review run page rebuilt against the prototype.

   Corrections applied here, all recorded in the spec so no reviewer
   reads them as drift:
     - §6 contrast: the six failing pairings are promoted. Failing TEXT
       moves to --ink-muted (5.44:1); the unchecked checkbox border
       moves to --ink-faint (3.65:1); input and select borders move to
       --band-low (3.10:1). Every replacement is already a prototype
       value.
     - §5 focus: the prototype's `button:focus { outline: none }` with
       no replacement is its one real defect. Every interactive element
       here gets a 2px --brand focus-visible ring at 2px offset.
     - §8 adoption decisions: LOW band flattens onto --ink-muted;
       --paper-raised is dropped (a 2/2/2 lift is token noise —
       hairlines do the layering); shadows go fully flat.
   ================================================================ */

/* ---------------------------------------------------------------
   1. FONTS — self-hosted, OFL, WOFF2 only.

   Source Serif 4 ships as the variable face (opsz 8–60 + wght
   200–900) in two files, upright and italic, which is what the design
   tool's link asks for and cheaper than six statics. IBM Plex Mono
   ships 400 ONLY: the link requests 400 and 500, but no mono element
   in the prototype is ever weighted, so 500 is not shipped until a
   wave needs it (spec §3).

   The third family downloads nothing — 'Helvetica Neue' is a system
   stack. Licences sit beside the files in public/fonts/.
   --------------------------------------------------------------- */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/source-serif-4-variable-latin-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/source-serif-4-variable-latin-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}

/* ---------------------------------------------------------------
   2. TOKENS

   Left column: the canonical name from spec §2. Right column: every
   live token that resolves onto it, so the repoint reaches the whole
   app instead of only the rules that learn the new names.
   --------------------------------------------------------------- */
:root {
  /* --- Surfaces --- */
  --paper:            #FBF9F6;
  --field:            #FFFFFF;
  --fill-active:      #F3EBDE;
  --fill-quiet:       #F7F2E8;
  --fill-notice:      #F6ECE6;
  /* --paper-raised is deliberately absent. Spec §8 decision 2: a
     2/2/2 lift on the profile pane is below the perceptual threshold,
     so it is token noise. The pane reads as a separate surface
     because of the hairlines either side of it. */

  /* --- Brand --- */
  --brand:            #7E1F2E;
  --brand-dark:       #571320;
  --brand-hairline:   #E8D3C9;

  /* --- Ink: a five-step warm-grey ramp --- */
  --ink:              #201A16;
  --ink-quote:        #4A423A;
  --ink-muted:        #6E655B;
  --ink-faint:        #8A8175;
  --ink-placeholder:  #A79D90;

  /* --- Likelihood bands. HIGH reuses --brand. --band-low survives as
         a token but carries no TEXT: spec §8 decision 1 flattens the
         LOW label onto --ink-muted, because the ramp gap between
         5.44:1 and 2.95:1 was the accessibility problem and a middle
         grey would re-open it. --- */
  --band-med:         #8A6A2F;
  --band-low:         #9A9186;

  /* --- Lines: four tiers, weakest first. --hairline-soft is LIGHTER
         than --hairline on purpose — rules inside a list recede so the
         list reads as one object, rules between panes assert. --- */
  --hairline-soft:    #EEE7DB;
  --hairline:         #E7E0D5;
  --stroke:           #DDD4C6;
  --stroke-mark:      #C6BCAE;

  /* --- Aliases: existing names repointed onto the canonical values.
         --font-mono-v4 alone has 60 references; a parallel set nobody
         adopts is how the file got three disagreeing systems. --- */
  --surface:          var(--paper);
  --bg:               var(--paper);
  --bg-2:             var(--fill-quiet);
  --canvas:           var(--paper);
  --panel:            var(--field);
  --panel-soft:       var(--fill-quiet);
  --panel-tint:       var(--fill-notice);
  --burgundy:         var(--brand);
  --burgundy-dark:    var(--brand-dark);
  --burgundy-bright:  var(--brand);
  --teal:             var(--brand);
  --teal-dark:        var(--brand-dark);
  --teal-soft:        var(--fill-notice);
  --blue:             var(--brand);
  --blue-soft:        var(--fill-notice);
  --red:              var(--brand);
  --amber:            var(--band-med);
  --ink-soft:         var(--ink-muted);
  --muted:            var(--ink-muted);
  /* --faint is a TEXT token, so it takes the §6 promotion rather than
     the decorative grey it looks like it should take. */
  --faint:            var(--ink-muted);
  --line:             var(--hairline);
  --line-strong:      var(--stroke);
  --hairline-default: var(--stroke);
  --hairline-strong:  var(--stroke-mark);
  --ink-on-burgundy:  var(--paper);
  --hover-tint:       var(--fill-quiet);
  --col-hover-tint:   var(--fill-quiet);

  /* --- Chrome --- */
  --sidebar-w:        60px;
  --sidebar-bg:       var(--paper);
  --sidebar-ink:      var(--ink-muted);
  --sidebar-ink-hover:var(--ink);
  --sidebar-ink-on:   var(--brand);

  /* --- Shadows: spec §8 decision 3, fully flat. Nothing at rest
         lifts. A floating layer that overlays content may keep a
         minimal shadow ONLY where a hairline cannot establish the
         layering on its own, and each survival is named in the wave
         notes.

         A TRANSPARENT shadow rather than `none`, and the distinction
         matters: both tokens are consumed inside SHADOW LISTS —
         `box-shadow: var(--focus), var(--shadow)` at :1659, :1707 and
         :2230 — and `none` is not a legal list item, so `none` here
         makes the whole declaration invalid and silently drops the
         focus ring sitting beside it. A fully transparent shadow is
         flat on screen and valid in a list. --- */
  --shadow:           0 0 0 0 rgba(0, 0, 0, 0);
  --shadow-soft:      0 0 0 0 rgba(0, 0, 0, 0);

  /* --- Focus. The global rings below are outlines, because a
         ring-shaped box-shadow is painted outside the border box and
         disappears inside any ancestor with overflow:hidden. This
         token stays a real ring for the rules that already consume it
         as one (`.dv2-scope-chip:focus-visible` at :20905 pairs it
         with `outline: none`, so a `none` here would leave that
         control with no indicator at all). --- */
  --focus:            0 0 0 2px var(--brand);
  --focus-ring:       2px solid var(--brand);
  --focus-offset:     2px;

  /* --- Type --- */
  --font-serif:       "Source Serif 4", Georgia, serif;
  --font-mono-v4:     "IBM Plex Mono", monospace;
  --font-sans-v4:     "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* CLEAN LIGHT forced Geist onto the body with !important. That block
   is gone; this is what the body asks for now. */
body,
button,
input,
select,
textarea {
  font-family: var(--font-sans-v4);
}

body {
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

/* ---------------------------------------------------------------
   3. FOCUS — the prototype's one real defect, corrected.

   The export sets `input:focus, select:focus, button:focus { outline:
   none }` and then supplies a replacement for inputs and selects only.
   Every button in the design is left with no visible focus indicator,
   which fails WCAG 2.4.7 outright. :focus-visible keeps the clean look
   the prototype is after for pointer users while giving keyboard users
   a real indicator.
   --------------------------------------------------------------- */
/* The descendant forms are not belt-and-braces. Several controls carry
   their OWN `:focus-visible { outline: none }` — `.sticky-bar-icon` at
   :12631 is one — and a bare `button:focus-visible` loses to them on
   specificity. Scoping through the shell puts every ring at (0,2,0) or
   better, which is enough to overturn them without an !important. */
.app-shell :focus-visible,
.login-screen :focus-visible,
.setup-screen :focus-visible,
.invite-screen :focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
/* The BRIEF control is a label wrapping the checkbox, so the ring goes
   round the whole pill rather than round a 15px box inside it. */
.lead-brief-select:has(input:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.app-shell .lead-brief-select input:focus-visible,
.lead-brief-select input:focus-visible { outline: none; }
/* :10661 kills the ring on the row's own open button at (0,3,0). The
   row is the primary keyboard target on this page, so it is the last
   place that can be left without an indicator. */
.app-shell .lead-row-v2 .lead-row-open:focus-visible,
#view-leads .lead-list .review-candidate-open:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -2px;
}

input:focus,
select:focus,
textarea:focus { border-color: var(--brand); }

/* ---------------------------------------------------------------
   4. SCROLLBARS — the 2px paper border insets the thumb so it reads
   as a floating 6px capsule.
   --------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--stroke); border-radius: 5px; border: 2px solid var(--paper); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------
   5. ICON RAIL — 60px

   Was 56px and dark (#15141A) with a white override bolted on by
   CLEAN LIGHT. Now paper with a single hairline, as the prototype
   draws it. Active is THREE things at once — fill, inset brand bar,
   brand icon — and the inset bar alone is not the idiom.
   --------------------------------------------------------------- */
.app-shell { padding-left: var(--sidebar-w); }

.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  max-width: var(--sidebar-w);
  background: var(--paper);
  border-right: 1px solid var(--hairline);
  color: var(--ink-muted);
  padding: 14px 0 18px;
  gap: 6px;
  box-shadow: none;
}
.sidebar .brand-mark,
.sidebar .brand-mark-letter,
.sidebar .brand-mark-svg {
  color: var(--brand);
  margin-bottom: 4px;
}
.sidebar .nav-tab {
  width: 38px;
  height: 38px;
  min-height: 38px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--ink-muted);
}
.sidebar .nav-tab:hover {
  background: var(--fill-active);
  color: var(--ink);
}
/* Active is THREE things at once. The v3 rule at :15789 explicitly set
   the fill to transparent, so the chain has to outrank it or the idiom
   arrives two-thirds finished. */
body[data-home-version] .app-shell .sidebar .nav-tab.active,
.sidebar .nav-tab.active {
  /* `!important` here is not a style choice. The rule at :8825 paints the
     active tab with `background: linear-gradient(…) !important`, so a
     normal declaration — at any specificity — cannot replace it, and
     :8825 is mid-file where this wave does not edit. The flat fill is
     the idiom; the gradient is the last of the old chrome on the rail. */
  background: var(--fill-active) !important;
  border-color: var(--hairline) !important;
  color: var(--brand);
  box-shadow: inset 2px 0 0 var(--brand) !important;
}
body[data-home-version] .app-shell .sidebar .nav-tab:hover,
.sidebar .nav-tab:hover {
  background: var(--fill-active);
  color: var(--ink);
}
.sidebar .nav-tab.active::before { background: var(--brand); }
.sidebar .nav-tab-icon { width: 18px; height: 18px; }
.sidebar-avatar,
.sidebar-avatar-button {
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: 50%;
  background: var(--brand);
  color: var(--paper);
  font-family: var(--font-mono-v4);
  font-size: 12px;
  font-weight: 400;
  border: none;
  box-shadow: none;
}

/* ---------------------------------------------------------------
   6. HEADER — 54px, with the 2px brand rule.

   That rule is the strongest single line in the design and the
   fastest way to recognise the language. It is not a hairline and
   must not be softened.

   Breadcrumb idiom: mono uppercase for WHERE you are, a --stroke-mark
   slash, serif for WHAT you are looking at.
   --------------------------------------------------------------- */
/* The per-view header rules are attribute-scoped (`body[data-active-tab=
   "leads"] .sticky-bar`, `body:is([data-home-version="v3"]…)`), so a bare
   `.sticky-bar` never reaches the header on any view that has one. The
   chain below outranks all of them without an !important. */
body[data-active-tab] .app-shell:not(.hidden) .sticky-bar,
.sticky-bar {
  height: 54px;
  min-height: 54px;
  padding: 0 28px;
  margin: 0;
  gap: 10px;
  background: var(--paper);
  backdrop-filter: none;
  border-bottom: 2px solid var(--brand);
  box-shadow: none;
}
.sticky-bar-brand-label { gap: 10px; align-items: baseline; }
.sticky-bar-brand-label .m3-brand-eyebrow {
  font-family: var(--font-mono-v4);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
}
.sticky-bar-brand-label .m3-brand-slash { color: var(--stroke-mark); }
.sticky-bar-brand-label .m3-brand-owner {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.sticky-bar-wordmark { color: var(--brand); }
.sticky-bar-wordmark span {
  font-family: var(--font-mono-v4);
  font-size: 11px;
  letter-spacing: .14em;
}
.sticky-bar-right { gap: 4px; }
.sticky-bar-icon,
.notif-bell {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-muted);
  box-shadow: none;
}
.sticky-bar-icon:hover,
.notif-bell:hover {
  background: var(--fill-active);
  color: var(--ink);
}
.notif-bell-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  top: 7px;
  right: 8px;
}
.sticky-bar-cmd,
.m3-cmd {
  border: 1px solid var(--stroke);
  border-radius: 0;
  background: var(--field);
  box-shadow: none;
}

/* ---------------------------------------------------------------
   7. REVIEW RUN — page-title block, primary button, filter row
   --------------------------------------------------------------- */
#view-leads .lead-review-heading { padding-top: 26px; }
#view-leads .lead-heading-top {
  align-items: flex-end;
  gap: 24px;
  padding-bottom: 18px;
}
#view-leads .lead-review-heading h3 {
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
#view-leads .lead-review-heading > .lead-heading-top p {
  font-family: var(--font-sans-v4);
  font-size: 14px;
  color: var(--ink-muted);
  max-width: 60ch;
  margin: 8px 0 0;
}
#view-leads .brief-launcher { gap: 16px; padding-bottom: 2px; }
#view-leads #briefSelectionCount {
  font-family: var(--font-mono-v4);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--ink-muted);
  padding: 0;
  white-space: nowrap;
}

/* Primary button — square, mono, uppercase, brand fill. The disabled
   face is the prototype's: --stroke fill with an --ink-faint label.
   WCAG 1.4.3 exempts an inactive control, and the spec names it as
   legal-not-good rather than pretending it passes. */
#view-leads #generateBriefFromSelected,
.review-desk-primary {
  border: none;
  border-radius: 0;
  padding: 11px 20px;
  font-family: var(--font-mono-v4);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--brand);
  color: var(--paper);
  box-shadow: none;
  white-space: nowrap;
}
#view-leads #generateBriefFromSelected:hover:not(:disabled) { filter: brightness(1.08); background: var(--brand); }
#view-leads #generateBriefFromSelected:disabled {
  background: var(--stroke);
  color: var(--ink-faint);
  cursor: not-allowed;
}
#view-leads #generateBriefFromSelected[data-working="true"] { animation: wave1-pulse 1.2s ease-in-out infinite; }
@keyframes wave1-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  #view-leads #generateBriefFromSelected[data-working="true"] { animation: none; }
}

/* Filter row — every control gets a mono label; there are no bare
   inputs. The select keeps its own chevron, optically centred at
   -52%: that half-percent is deliberate. */
#view-leads .leads-filter-bar {
  gap: 20px;
  padding: 6px 0 20px;
  border-bottom: 1px solid var(--hairline);
  align-items: end;
}
#view-leads .leads-filter-bar label > span {
  font-family: var(--font-mono-v4);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 7px;
}
#view-leads .leads-filter-bar input,
#view-leads .leads-filter-bar select {
  border: 1px solid var(--band-low);
  border-radius: 0;
  background: var(--field);
  padding: 10px 14px;
  font-family: var(--font-sans-v4);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  box-shadow: none;
}
#view-leads .leads-filter-bar select {
  font-size: 13.5px;
  padding: 10px 30px 10px 14px;
  cursor: pointer;
}
#view-leads .leads-filter-bar input::placeholder { color: var(--ink-muted); }
#view-leads .leads-filter-bar input:focus,
#view-leads .leads-filter-bar select:focus { border-color: var(--brand); }

/* ---------------------------------------------------------------
   8. THE DESK GRID

   Prototype: `360px minmax(440px,1fr) auto` with `overflow-x: auto`,
   so the desk scrolls sideways rather than crushing the profile below
   440px. The app nests the profile and the rail inside #leadDetail, so
   the same three tracks are expressed as two grids: the desk splits
   list from detail, and the dossier shell splits profile from rail.
   The measured outcome is the prototype's — 360 / >=440 / 318 — and
   the shell's 758px floor (440 + 318) is what puts the sideways
   scroll in exactly the same place.

   The single-track empty desk is untouched: sarah-flow and
   review-flow-continuity both read it.
   --------------------------------------------------------------- */
@media (min-width: 900px) {
  #view-leads .lead-review-desk,
  #view-leads .lead-review-desk.is-person-open,
  #view-leads.active .lead-review-desk.is-person-open {
    grid-template-columns: 360px minmax(440px, 1fr);
    overflow-x: auto;
    border-radius: 0;
    background: var(--paper);
  }
  #view-leads .lead-review-desk.is-desk-empty,
  #view-leads.active .lead-review-desk.is-desk-empty { grid-template-columns: 1fr; }

  #view-leads .person-dossier-shell,
  #view-leads.active .person-dossier-shell {
    grid-template-columns: minmax(440px, 1fr) 318px;
    min-width: 758px;
  }
  #view-leads .person-dossier-side,
  #view-leads.active .person-dossier-side {
    width: 318px;
    border-left: 1px solid var(--hairline);
    background: var(--paper);
    padding: 30px 26px 40px;
  }
}

/* The seam between the panes is a hairline, not the 2px --panel-rule
   the fit work introduced. The prototype has exactly two rule
   weights: 2px in the brand under the header, and 1px hairlines
   everywhere else. A second heavy rule down the middle of the desk
   competes with the one that carries the language. */
#view-leads .lead-list-pane,
#view-leads .lead-review-desk.is-person-open .lead-list-pane {
  border-radius: 0;
  border-right: 1px solid var(--hairline);
  border-bottom: none;
  background: var(--paper);
  padding: 0;
}
#view-leads .lead-review-desk.is-person-open .lead-detail { border-left: 0; }
/* The active row no longer bridges a 2px seam, so it stops paying the
   negative margin that used to reach across it. */
#view-leads .lead-review-desk.is-person-open .lead-row.review-candidate-row.active {
  margin-right: 0;
  padding-right: 0;
  border-radius: 0;
}
#view-leads .person-dossier {
  border-radius: 0;
  border: none;
  background: var(--paper);
  box-shadow: none;
}

/* Sticky list head — serif title, mono count. */
#view-leads .lead-list-pane .pane-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper);
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
#view-leads .pane-head h4 {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
}
#view-leads .pane-count {
  font-family: var(--font-mono-v4);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------
   9. LIST ROWS — the 26px index gutter is the row idiom.

   A zero-padded ordinal spanning the row gives the list a ledger
   quality and an unambiguous reading order. Column 2 is the person;
   column 3 stacks the likelihood over the BRIEF control.

   The row's DOM order is checkbox -> open button, because Shift+Tab
   off the open button must land on that row's own box (asserted by
   review-desk-selection and friends-beta-brief-select). Grid
   PLACEMENT moves the box to the right without moving it in the tab
   order, so both the visual idiom and the keyboard contract hold.

   The row selector is chained through all three of its class aliases
   (.review-person-row.review-candidate-row.lead-row). That is not
   decoration: the desk's compact skin already addresses these
   elements through `#view-leads .lead-review-desk.is-person-open …`,
   and a rule that only says `#view-leads .review-decision-likelihood`
   loses to it on specificity no matter where it sits in the file.
   --------------------------------------------------------------- */
#view-leads .lead-list { padding: 0; }
#view-leads .lead-list .review-person-row.review-candidate-row.lead-row {
  display: block;
  position: relative;
  padding: 0;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--hairline-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
#view-leads .lead-list .review-person-row.review-candidate-row.lead-row:hover {
  background: var(--fill-quiet);
}
/* Selected — the same idiom as the rail's active state, one pixel
   heavier because the row is taller. The picked face has to live in
   the row's own `background`: friends-beta-brief-select compares the
   computed shorthand of a picked row against an unpicked one, so a
   border or a shadow alone would not be a difference it can see. */
#view-leads .lead-list .review-person-row.review-candidate-row.lead-row.is-brief-selected,
#view-leads .lead-list .review-person-row.review-candidate-row.lead-row.is-brief-selected:hover,
#view-leads .lead-review-desk.is-person-open .lead-list .review-person-row.review-candidate-row.lead-row.active.is-brief-selected {
  background: var(--fill-active);
  border-color: var(--hairline-soft);
}
#view-leads .lead-list .review-person-row.review-candidate-row.lead-row.active,
#view-leads .lead-review-desk.is-person-open .lead-list .review-person-row.review-candidate-row.lead-row.active {
  background: var(--fill-active);
  box-shadow: inset 3px 0 0 var(--brand);
}

/* The BRIEF control keeps the absolute top-right placement it already
   had. Two reasons, both load-bearing: it is the geometry the
   selection spec's overlap assertions were written against, and it is
   the only way to stack it over the likelihood while the likelihood
   lives inside the open button and the tick lives outside it.

   The prototype stacks that column the other way up — readout, meter,
   then the tick. Inverting it puts the row's one action on the same
   baseline as the person's name, which is where a reader's eye
   already is. Recorded as a deviation in the wave notes. */
#view-leads .lead-list .review-person-row.review-candidate-row.lead-row > .lead-brief-select {
  position: absolute;
  top: 15px;
  right: 18px;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--ink-muted);
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
#view-leads .lead-list .review-person-row.review-candidate-row.lead-row.is-brief-selected > .lead-brief-select {
  background: transparent;
  border: none;
  color: var(--ink-muted);
}
#view-leads .lead-list .review-person-row.review-candidate-row.lead-row > .lead-brief-select:hover {
  background: transparent;
  border: none;
  color: var(--ink);
}

/* Column 3 is 96px: the 44px track plus the two-line caption that
   names what the band measures. */
#view-leads .lead-list .review-person-row.review-candidate-row.lead-row > .review-candidate-open {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 96px;
  gap: 2px 10px;
  padding: 15px 18px 13px 20px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  width: 100%;
  align-items: start;
}
/* The body wrapper stops being a box so its children can take their
   own places on the row grid. */
#view-leads .lead-list .review-person-row.review-candidate-row.lead-row .review-candidate-body { display: contents; }
#view-leads .lead-list .review-person-row.review-candidate-row.lead-row .lead-row-line-identity,
#view-leads .lead-list .review-person-row.review-candidate-row.lead-row .review-person-heading {
  display: block;
  min-width: 0;
  /* The 74px reserve for the old floating pill is gone: the tick now
     sits over its own 96px track, not over the copy. */
  padding-right: 0;
}

#view-leads .lead-list .review-person-row.review-candidate-row.lead-row .review-rank {
  grid-column: 1;
  grid-row: 1 / span 8;
  font-family: var(--font-mono-v4);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0;
  /* §6 promotion: the prototype's --ink-placeholder is 2.54:1 here. */
  color: var(--ink-muted);
  padding-top: 4px;
}
#view-leads .lead-list .review-person-row.review-candidate-row.lead-row .review-candidate-body > *:not(.review-decision-likelihood) {
  grid-column: 2;
  min-width: 0;
}

#view-leads .lead-list .review-person-row.review-candidate-row.lead-row .review-person-name {
  font-family: var(--font-serif);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
#view-leads .lead-list .review-person-row.review-candidate-row.lead-row .review-person-role {
  font-family: var(--font-sans-v4);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-muted);
}
#view-leads .lead-list .review-person-row.review-candidate-row.lead-row .review-person-firm {
  font-family: var(--font-sans-v4);
  font-size: 12px;
  font-weight: 400;
  /* §6 promotion: the prototype's --ink-faint is 3.65:1 for text. */
  color: var(--ink-muted);
  padding: 0;
  margin-top: 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 8px;
  min-width: 0;
}
/* The segment sits after a 3px --stroke-mark dot and reads the way
   the route tag does: coloured, tracked mono text. No pill, no
   border, no background — the chip language does not survive here. */
#view-leads .lead-list .review-person-row.review-candidate-row.lead-row .review-person-firm > span {
  /* The compact desk skin hides this span (:13566). Under the new
     language it is the row's route tag, so it comes back. */
  display: inline-block;
  position: relative;
  padding-left: 11px;
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  white-space: nowrap;
  border: none;
  border-radius: 0;
  background: transparent;
  flex: 0 0 auto;
}
#view-leads .lead-list .review-person-row.review-candidate-row.lead-row .review-person-firm > span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: var(--stroke-mark);
}

#view-leads .lead-list .review-person-row.review-candidate-row.lead-row .review-candidate-reason {
  font-family: var(--font-sans-v4);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-muted);
  margin-top: 8px;
}
#view-leads .lead-list .review-person-row.review-candidate-row.lead-row .review-candidate-facts {
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  gap: 10px;
  margin-top: 8px;
}
#view-leads .lead-list .review-person-row.review-candidate-row.lead-row .review-candidate-facts a {
  color: var(--brand);
  text-decoration: none;
}
#view-leads .lead-list .review-person-row.review-candidate-row.lead-row .review-relevance-note {
  font-family: var(--font-sans-v4);
  font-size: 11.5px;
  color: var(--ink-muted);
  border: none;
  border-left: 2px solid var(--stroke-mark);
  border-radius: 0;
  background: transparent;
  padding: 2px 0 2px 10px;
  margin-top: 8px;
}
#view-leads .lead-list .review-person-row.review-candidate-row.lead-row .review-relevance-note strong {
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
}

/* Likelihood, list-row size — a square track with a square fill and a
   mono readout in the band colour. The caption stays: it is the only
   thing on the row naming what the band measures, and dropping it
   would be a silent weakening.

   The METER IS DISCRETE, not proportional. The prototype fills to
   `{score}%`, but this product has no calibrated score — it has three
   buckets from a keyword read, and the proportional bar was removed
   for exactly that reason (review-desk-craft). A three-step track is
   the same information at the resolution the input can support and it
   makes no precision claim the data cannot back. Recorded as a
   deviation in the wave notes. */
#view-leads .lead-list .review-person-row.review-candidate-row.lead-row .review-decision-likelihood,
#view-leads .lead-review-desk.is-person-open .lead-list .review-person-row .review-decision-likelihood {
  grid-column: 3;
  grid-row: 1 / span 8;
  justify-self: end;
  align-self: start;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 4px;
  width: 96px;
  min-height: 0;
  /* Clears the BRIEF control absolutely placed above it. */
  padding: 34px 0 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#view-leads .lead-list .review-person-row .review-decision-likelihood > span,
#view-leads .lead-review-desk.is-person-open .lead-list .review-person-row .review-decision-likelihood > span {
  display: block;
  flex: 0 0 auto;
  font-family: var(--font-mono-v4);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: right;
  color: var(--ink-muted);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
#view-leads .lead-list .review-person-row .review-decision-likelihood > strong,
#view-leads .lead-review-desk.is-person-open .lead-list .review-person-row .review-decision-likelihood > strong {
  flex: 0 0 auto;
  font-family: var(--font-mono-v4);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: currentColor;
}
/* The track. `::after` is the fill; its width is a band step, never a
   number. Label and fill always share the band colour. */
#view-leads .lead-list .review-person-row .review-decision-likelihood::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 44px;
  height: 3px;
  border-radius: 0;
  background: linear-gradient(to right, currentColor 0 var(--band-step, 100%), var(--hairline) var(--band-step, 100%) 100%);
}
#view-leads .lead-list .review-person-row .review-decision-likelihood.likelihood-high { color: var(--brand); --band-step: 100%; }
#view-leads .lead-list .review-person-row .review-decision-likelihood.likelihood-medium { color: var(--band-med); --band-step: 66%; }
/* §8 decision 1: LOW text flattens onto muted ink. The band identity
   is carried by the meter fill and by the word itself. */
#view-leads .lead-list .review-person-row .review-decision-likelihood.likelihood-low { color: var(--ink-muted); --band-step: 33%; }

/* Square checkbox. A 15px box, 1px border, no radius; checked is the
   brand on the brand with a paper tick. The border is --ink-faint,
   not the prototype's --stroke-mark: at 1.78:1 the mark tier failed
   the 3:1 non-text floor as the SOLE indicator of an unchecked
   control (spec §6). */
#view-leads .lead-list .lead-brief-select input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  min-width: 15px;
  min-height: 15px;
  flex: 0 0 auto;
  margin: 0;
  /* The generic input rule pays 8px/10px of padding, and under
     border-box that floors the used width at 22px however small the
     declared width is. */
  padding: 0;
  border: 1px solid var(--ink-faint);
  border-radius: 0;
  background: var(--field);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
#view-leads .lead-list .lead-brief-select input[type="checkbox"]::after {
  content: "";
  width: 7px;
  height: 3px;
  border-left: 1.5px solid var(--paper);
  border-bottom: 1.5px solid var(--paper);
  transform: translateY(-1px) rotate(-45deg);
  opacity: 0;
}
#view-leads .lead-list .lead-brief-select input[type="checkbox"]:checked {
  background: var(--brand);
  border-color: var(--brand);
}
#view-leads .lead-list .lead-brief-select input[type="checkbox"]:checked::after { opacity: 1; }
#view-leads .lead-list .lead-brief-select > span {
  font-family: var(--font-mono-v4);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: inherit;
}
/* The ring goes round the pill, not round the 15px box inside it. */
#view-leads .lead-brief-select:has(input[type="checkbox"]:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Empty state — mono, tracked, centred, set in caps. */
#view-leads .lead-list-empty,
#view-leads .lead-list .empty-state {
  padding: 36px 20px;
  font-family: var(--font-mono-v4);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  border: none;
  background: transparent;
}

/* ---------------------------------------------------------------
   10. PROFILE PANE

   Kicker row, then the person at 44px. The page title (38px) is
   deliberately NOT the largest text on the page — the title is
   chrome, the person is the subject. Do not "fix" it.

   The three measures step down — body 62ch, ask card 60ch, pull-quote
   58ch — so nested blocks read as progressively more inset.
   --------------------------------------------------------------- */
#view-leads .person-dossier-main {
  padding: 34px 46px 48px;
  max-width: 760px;
  gap: 0;
  background: var(--paper);
}
#view-leads .person-dossier-identity { display: block; margin: 0; }
#view-leads .person-dossier-identity .eyebrow {
  font-family: var(--font-mono-v4);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0;
}
#view-leads .person-dossier-name-row,
#view-leads .person-dossier-name-button {
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--ink);
  margin: 14px 0 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  text-align: left;
}
#view-leads .person-dossier-name-caret { font-size: 16px; color: var(--ink-muted); }
#view-leads .person-dossier-identity .detail-subtitle {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink-muted);
  margin: 10px 0 0;
}

#view-leads .dossier-narrative {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
  border-left: none;
  border-right: none;
  border-bottom: none;
}
#view-leads .dossier-narrative-head { margin-bottom: 14px; }
#view-leads .dossier-narrative-head .meta-label,
#view-leads .dossier-ask .meta-label {
  font-family: var(--font-mono-v4);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
#view-leads .dossier-narrative-who,
#view-leads .dossier-narrative-why {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  max-width: 62ch;
  text-wrap: pretty;
  margin: 0;
}
#view-leads .dossier-narrative-why { margin: 18px 0 0; }

/* Pull-quote idiom. The 2px brand rule echoes the header rule at a
   smaller scale. No quote marks, no background, no radius. */
#view-leads .dossier-narrative-spark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-quote);
  max-width: 58ch;
  margin: 28px 0 0;
  padding: 4px 0 4px 20px;
  border: none;
  border-left: 2px solid var(--brand);
  border-radius: 0;
  background: transparent;
}

/* "What to ask" card. Square, hairline border, quiet fill. */
#view-leads .dossier-ask {
  margin-top: 32px;
  border: 1px solid var(--hairline);
  border-radius: 0;
  background: var(--fill-quiet);
  padding: 20px 24px 22px;
  box-shadow: none;
}
#view-leads .dossier-ask .meta-label {
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--brand);
  margin-bottom: 10px;
  display: block;
}
#view-leads .dossier-ask-body,
#view-leads .dossier-ask-proof {
  font-family: var(--font-serif);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  max-width: 60ch;
  text-wrap: pretty;
  margin: 0;
}
#view-leads .dossier-ask-proof { margin-top: 12px; color: var(--ink-muted); }

#view-leads .dossier-actions { margin-top: 32px; gap: 10px; }
#view-leads .dossier-actions .primary-button {
  border-radius: 0;
  border: none;
  padding: 11px 20px;
  font-family: var(--font-mono-v4);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--brand);
  color: var(--paper);
  box-shadow: none;
}
#view-leads .dossier-actions .ghost-button {
  border-radius: 0;
  border: 1px solid var(--stroke);
  padding: 11px 20px;
  font-family: var(--font-mono-v4);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink-muted);
  box-shadow: none;
}
#view-leads .person-opener {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
  background: transparent;
}
#view-leads .person-opener .meta-label {
  font-family: var(--font-mono-v4);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
#view-leads .person-opener p {
  font-family: var(--font-serif);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 60ch;
  margin: 10px 0 0;
}

/* ---------------------------------------------------------------
   11. EVIDENCE RAIL — 318px

   Contact route reads as the headline value: serif 700 22px in the
   brand. Section heads are mono .16em in the BRAND, underlined with a
   hairline. Data rows are a 76px label column against a 600-weight
   sans value. The last row in a group drops its rule — the rail ends
   on content, not a line.
   --------------------------------------------------------------- */
#view-leads .dossier-route-meter {
  display: block;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
/* The markup puts the value first and the label second; the rail's
   idiom is label above value, so the pair is flipped visually rather
   than in the DOM. */
#view-leads .dossier-route-meter > span {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  font-family: var(--font-mono-v4);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
#view-leads .dossier-route-meter > span + span {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
#view-leads .dossier-route-meter > span > strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brand);
  margin: 6px 0 0;
}
#view-leads .dossier-route-meter > span + span > strong {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 4px 0 0;
}

/* The rail's likelihood section. The prototype carries one and the
   app's rail lost it in July; it returns as a BAND, not as a
   `{score} / 100` readout, for the same reason the row meter is
   discrete — there is no calibrated score to print. */
#view-leads .dossier-rail-likelihood { margin-top: 26px; }
#view-leads .dossier-rail-likelihood > .meta-label {
  display: block;
  font-family: var(--font-mono-v4);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}
#view-leads .dossier-rail-likelihood-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
}
#view-leads .dossier-rail-likelihood-track {
  flex: 1;
  height: 4px;
  display: block;
  background: linear-gradient(to right, currentColor 0 var(--band-step, 100%), var(--hairline) var(--band-step, 100%) 100%);
}
#view-leads .dossier-rail-likelihood-readout {
  font-family: var(--font-mono-v4);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: currentColor;
}
#view-leads .dossier-rail-likelihood[data-band="high"] { color: var(--brand); --band-step: 100%; }
#view-leads .dossier-rail-likelihood[data-band="medium"] { color: var(--band-med); --band-step: 66%; }
#view-leads .dossier-rail-likelihood[data-band="low"] { color: var(--ink-muted); --band-step: 33%; }

#view-leads .person-pulled-details { border: none; background: transparent; padding: 0; box-shadow: none; }
#view-leads .person-pulled-details-head { display: none; }
#view-leads .pulled-details-group { border: none; background: transparent; padding: 0; margin-top: 26px; }
#view-leads .pulled-details-group-head {
  font-family: var(--font-mono-v4);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
  padding-bottom: 8px;
  margin: 0;
  border-bottom: 1px solid var(--hairline);
}
#view-leads .pulled-details-group dl { margin: 0; display: block; }
#view-leads .pulled-details-group dl > div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline-soft);
  align-items: baseline;
}
#view-leads .pulled-details-group dl > div:last-child { border-bottom: none; }
#view-leads .pulled-details-group dt {
  font-family: var(--font-mono-v4);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* §6 promotion: the prototype's --ink-placeholder is 2.54:1. */
  color: var(--ink-muted);
  margin: 0;
}
#view-leads .pulled-details-group dd {
  font-family: var(--font-sans-v4);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  word-break: break-all;
  margin: 0;
}
#view-leads .pulled-details-group[data-detail-group="provenance"] dd { font-size: 12.5px; }
#view-leads .pulled-details-group dd a { color: var(--brand); text-decoration: none; }
#view-leads .pulled-details-group dd small,
#view-leads .pulled-details-group dd .meta-label {
  font-family: var(--font-mono-v4);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* §6 promotion: FIRM-PUBLISHED was 2.54:1 on paper. */
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------
   12. THE BRIEF-DRAFTED TOAST

   Serif message + mono DISMISS on the notice fill, ruled top and
   bottom with the one tinted hairline in the system. A banner that
   speaks in sans is wrong.

   PLACEMENT IS UNCHANGED. The prototype draws this as a full-bleed
   strip under the header; the app floats it, and review-flow-
   continuity asserts at four widths that the toast neither
   intersects the feedback control nor loses a hit test to it. Moving
   the strip is a wave-3 job (the spec puts every banner and toast in
   that wave); what wave 1 adopts is the PATTERN. Recorded as a
   deviation.

   The shadow here is the one functional survival allowed by §8
   decision 3: the toast overlays content, and a hairline alone cannot
   establish that it floats above the list it covers.
   --------------------------------------------------------------- */
.toast {
  background: var(--fill-notice);
  border: none;
  border-top: 1px solid var(--brand-hairline);
  border-bottom: 1px solid var(--brand-hairline);
  border-radius: 0;
  padding: 11px 28px;
  gap: 16px;
  color: var(--brand-dark);
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  box-shadow: 0 6px 20px -12px rgba(32, 26, 22, 0.45);
}
.toast strong { font-family: var(--font-serif); font-weight: 700; }
.toast button {
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--brand);
  font-family: var(--font-mono-v4);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: none;
  padding: 2px 4px;
}

/* ---------------------------------------------------------------
   13. AUTH CARDS — carried over, not redesigned.

   CLEAN LIGHT v1 was the only thing making the login and setup cards
   light; deleting it would have dropped them back to the dark
   gradient underneath, which is a regression on two screens wave 1
   does not otherwise touch. This is the minimum to keep them on the
   new paper at normal specificity. Their full treatment — paper,
   serif headings, mono labels — is wave 3.
   --------------------------------------------------------------- */
.login-card,
.setup-card {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--hairline);
  box-shadow: none;
}
.login-card h1, .setup-card h1,
.login-card h2, .setup-card h2,
.login-card p, .setup-card p,
.login-card label, .setup-card label,
.login-card label > span, .setup-card label > span,
.login-card small, .setup-card small { color: var(--ink); }
.login-card .eyebrow, .setup-card .eyebrow { color: var(--brand); }
.login-card small, .setup-card small { color: var(--ink-muted); }
.login-card .auth-logo, .setup-card .auth-logo { color: var(--brand); }

/* ---------------------------------------------------------------
   14. THE WIDE-SCREEN CARD VARIANT IS RETIRED

   At >=1800px `styles.css:22660` re-grids `.review-candidate-body`
   into a two-column card with named areas — identity/signal over
   firm/route over reason — because the list pane used to grow to
   540px on a big monitor.

   Under the design language it does not grow: the desk's first track
   is 360px at every width, so the wide variant has nothing to spend
   and its `grid-area` names collide with the row's own three-track
   grid. The result was a genuine overlap at 2560, with the name drawn
   on top of the relevance note.

   One row composition at every width, which is what the prototype
   draws. Same media query, so the two rules are read together.
   --------------------------------------------------------------- */
@media (min-width: 1800px) {
  #view-leads .lead-list .review-person-row.review-candidate-row.lead-row .review-candidate-body {
    display: contents;
  }
  #view-leads .lead-list .review-person-row.review-candidate-row.lead-row .lead-row-line-identity,
  #view-leads .lead-list .review-person-row.review-candidate-row.lead-row .review-person-firm,
  #view-leads .lead-list .review-person-row.review-candidate-row.lead-row .review-candidate-reason,
  #view-leads .lead-list .review-person-row.review-candidate-row.lead-row .review-relevance-note,
  #view-leads .lead-list .review-person-row.review-candidate-row.lead-row .review-candidate-facts {
    grid-area: auto;
    grid-column: 2;
    justify-self: stretch;
    justify-content: flex-start;
    text-align: left;
  }
  #view-leads .lead-list .review-person-row.review-candidate-row.lead-row .review-decision-likelihood {
    grid-area: auto;
    grid-column: 3;
    grid-row: 1 / span 8;
    justify-self: end;
    text-align: right;
  }
}