:root {
  --ink: #0B1220;
  --ink-2: #344054;
  --ink-3: #667085;
  --ink-inverse: #FFFFFF;
  --paper: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --line: #E4E9F2;
  --line-strong: #C6CFDD;
  --accent: #2563EB;
  --accent-soft: #EAF2FF;
  --accent-ink: #1849A9;
  --violet: #7C3AED;
  --violet-soft: #F2EBFF;
  --coral: #E84A5F;
  --coral-soft: #FFF0F2;
  --amber: #D97706;
  --amber-soft: #FFF7E6;
  --sky: #0284C7;
  --sky-soft: #E9F7FF;
  --call: #0B1220;
  --call-text: #FFFFFF;
  --success: #7C3AED;
  --success-soft: #F2EBFF;
  --warn: #B45309;
  --warn-soft: #FFF7E6;
  --danger: #C82C46;
  --danger-soft: #FFF0F2;
  --ai: #475467;
  --focus: #2563EB;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-md: 0 10px 28px rgba(16, 24, 40, .08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  min-height: 100dvh;
}
a { color: inherit; text-decoration: none; }
button, select, input, textarea { font: inherit; color: inherit; }

.skip {
  position: absolute;
  left: -999px;
}
.skip:focus { left: 16px; top: 8px; background: var(--surface); padding: 8px; }

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, var(--accent-soft));
  border-bottom: 1px solid var(--line);
}
.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 8px;
  gap: 12px;
}
.wordmark {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.wordmark span {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pause-chip {
  margin: 0;
  font-size: 13px;
  color: var(--warn);
  background: var(--warn-soft);
  padding: 6px 10px;
  border-radius: var(--r-sm);
}
.nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0 16px 12px;
  -webkit-overflow-scrolling: touch;
}
.nav-item {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
}
.nav-item:hover { color: var(--ink); }
.nav-item.is-active {
  color: var(--accent-ink);
  background: var(--accent-soft);
  box-shadow: inset 0 -3px 0 var(--accent);
  font-weight: 600;
}

.banner {
  margin: 0;
  padding: 10px 20px;
  font-size: 13px;
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.banner-huge {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--warn);
  background: var(--warn-soft);
}
.banner-huge strong {
  display: inline;
  margin-right: 6px;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.banner-live {
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.banner code { font-size: 12px; }

.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}
.page-head h1, .deal-head h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--accent) 45%, transparent);
  display: inline-block;
  padding-bottom: 4px;
}
.lede, .muted { color: var(--ink-3); font-size: 15px; }
.kicker, .label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.score { margin: 0; line-height: 1; }
.score-n {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.04em;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--accent) 35%, transparent);
}
.score-d {
  font-size: 22px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: -0.02em;
}

.stage-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 24px 0 20px;
  padding-bottom: 4px;
}
.stage-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 10px;
  color: var(--ink-2);
  border-bottom: 3px solid transparent;
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.stage-chip[data-stage="new"],
.stage-chip[data-stage="working"] {
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface-2));
}
.stage-chip[data-stage="deposit"] {
  background: color-mix(in srgb, var(--warn-soft) 40%, var(--surface-2));
}
.stage-chip[data-stage="won"] {
  background: color-mix(in srgb, var(--success-soft) 50%, var(--surface-2));
}
.stage-chip[data-stage="lost"] {
  background: var(--surface-2);
  opacity: 0.85;
}
.stage-chip.is-active {
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-bottom: 3px solid var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.stage-chip.is-active[data-stage="deposit"] {
  color: var(--warn);
  background: var(--warn-soft);
  border-bottom-color: var(--warn);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 20%, transparent);
}
.stage-chip.is-active[data-stage="won"] {
  color: var(--success);
  background: var(--success-soft);
  border-bottom-color: var(--success);
}
.stage-name { font-weight: 600; font-size: 15px; }
.stage-n { color: var(--ink-3); font-size: 13px; }
.stage-chip.is-active .stage-n { color: inherit; }

.board { display: block; }
.column { display: none; }
.column.is-focus { display: block; }
.column {
  border-radius: var(--r-lg);
  padding: 16px 12px 20px;
  background: var(--surface-2);
}
.column[data-stage="new"],
.column[data-stage="working"] {
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--paper));
  box-shadow: inset 3px 0 0 var(--accent);
}
.column[data-stage="quoted"] {
  background: color-mix(in srgb, var(--accent-soft) 22%, var(--paper));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
}
.column[data-stage="deposit"] {
  background: color-mix(in srgb, var(--warn-soft) 35%, var(--paper));
  box-shadow: inset 3px 0 0 var(--warn);
}
.column[data-stage="won"] {
  background: color-mix(in srgb, var(--success-soft) 40%, var(--paper));
  box-shadow: inset 3px 0 0 var(--success);
}
.column[data-stage="lost"] {
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--ink-3);
  opacity: 0.92;
}
.column-head {
  padding: 0 0 12px;
  margin: 0 0 4px;
}
.column-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.column-head h2 span { color: var(--ink-3); font-weight: 500; }
.column-tip {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--accent-ink);
}
.ai-lane-summary {
  margin: 4px 0 0;
  padding: 12px 12px 10px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, var(--line));
}
.ai-lane-count {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-ink);
}
.ai-lane-state {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink-2);
}
.ai-lane-notes {
  margin: 8px 0 0;
  padding: 0 0 0 16px;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
}
.ai-lane-notes li { margin: 2px 0; }
.column[data-stage="deposit"] .column-tip { color: var(--warn); }
.column[data-stage="won"] .column-tip { color: var(--success); }
.column[data-stage="lost"] .column-tip { color: var(--ink-3); }

.card-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 16px;
}
.card {
  background: var(--surface);
  border: 0;
  border-radius: var(--r);
  padding: 18px 16px 20px;
  margin: 0;
  box-shadow: 0 1px 2px rgba(28,25,23,.04);
}
.sms-list { list-style: none; margin: 24px 0 0; padding: 0; }
.sms-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
  margin: 0 0 12px;
}
/* Won -> factory is a mission pillar: give it the green identity it has
   on the board, and no stray list markers. */
.factory-list { list-style: none; margin: 24px 0 0; padding: 0; }
.factory-row {
  background: var(--surface);
  border: 0;
  border-radius: var(--r);
  padding: 18px 16px 20px;
  margin: 0 0 16px;
  box-shadow: inset 3px 0 0 var(--success), 0 1px 2px rgba(28,25,23,.04);
}
.factory-row .card-meta { color: var(--success); }
.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-name {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  min-width: 0;
  flex: 1;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.card-meta {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-3);
}
.card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  margin: 8px 6px 0 0;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.chip-ai {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.chip-keep {
  background: color-mix(in srgb, var(--warn-soft) 70%, var(--accent-soft));
  color: var(--warn);
}
.chip-human {
  background: var(--ink);
  color: var(--ink-inverse);
}
.chip-paused {
  background: var(--warn-soft);
  color: var(--warn);
}
.chip-won {
  background: var(--success-soft);
  color: var(--success);
}
.chip-tony {
  background: var(--warn-soft);
  color: var(--warn);
}
.card-next {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  max-width: 36ch;
  color: var(--ink);
  line-height: 1.35;
}
.card-signal {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--accent-ink);
  font-weight: 500;
}
.card-secondary {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-ink);
}
.card-secondary:hover { text-decoration: underline; }
.card-compact { padding: 14px 16px; }
.card-compact .card-next { font-size: 15px; }

.btn-call, .btn-secondary, .btn-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: var(--r);
  font-weight: 600;
  border: 0;
  cursor: pointer;
}
.btn-call {
  background: var(--call);
  color: var(--call-text);
}
.btn-call:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-secondary, .btn-open {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-open { min-width: 72px; }
.card .btn-call,
.card .btn-open {
  width: auto;
  min-width: 72px;
  min-height: 44px;
  flex: 0 0 auto;
}
@media (max-width: 719px) {
  .deal-actions .btn-call, .deal-actions .btn-secondary {
    width: 100%;
  }
}

.empty {
  margin: 24px 0;
  color: var(--ink-3);
}
.text-link { color: var(--accent-ink); font-weight: 500; }
.text-link:hover { text-decoration: underline; }

.lanes { display: grid; gap: 40px; margin-top: 32px; }
.lane-sales { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 20%, transparent); padding-left: 16px; }
.mini-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
/* The one rail that was still plain text — give it the board's stage colours. */
.mini-stage {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface-2));
  color: var(--accent-ink);
  font-size: 13px;
}
.mini-stage[data-stage="deposit"] {
  background: color-mix(in srgb, var(--warn-soft) 55%, var(--surface-2));
  color: var(--warn);
}
.mini-stage[data-stage="won"] {
  background: color-mix(in srgb, var(--success-soft) 55%, var(--surface-2));
  color: var(--success);
}
.mini-stage[data-stage="lost"] { background: var(--surface-2); color: var(--ink-3); }
.mini-n { font-weight: 700; font-size: 15px; color: var(--ink); }

/* ---- Buyer identification OS (Journey) ---- */
.id-head { margin: 0 0 22px; }
.id-head h1 {
  margin: 0 0 6px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}
.id-sub { margin: 0; font-size: 14px; color: var(--ink-2); }
.id-sub strong { color: var(--ink); font-weight: 700; }

.id-cover {
  margin: 8px 0 0;
  max-width: 70ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
}

.fn-keep-row {
  margin-top: 6px;
  padding-left: 14px;
  border-bottom: none;
  border-radius: var(--r);
  background: var(--success-soft);
  box-shadow: inset 4px 0 0 var(--success);
}
.fn-keep-row:hover {
  background: color-mix(in srgb, var(--success-soft) 82%, var(--success));
}
.fn-keep-row .fn-n { color: var(--success); }
.fn-keep-row .fn-note em { font-style: normal; font-weight: 700; }
.fn-hard_keep { background: var(--success); }

.packets-strip { margin: 16px 0 28px; }
.ps {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}
.ps:hover { border-color: var(--success); }
.ps-n {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-align: right;
  color: var(--success);
  font-variant-numeric: tabular-nums;
}
.ps-label { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.ps-note { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.ps-go { font-size: 13px; font-weight: 700; color: var(--success); white-space: nowrap; }

.working { margin: 0 0 28px; }
.wk-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
}
.wk-summary div { display: flex; flex-direction: column; }
.wk-summary dt { margin: 0; font-size: 11px; color: var(--ink-3); order: 2; }
.wk-summary dd {
  margin: 0;
  order: 1;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.wk-samples {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.wk {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  text-decoration: none;
}
.wk:hover { border-color: var(--ink-3); }
.wk-name { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.wk-meta { display: block; margin-top: 2px; font-size: 11px; color: var(--ink-3); }
.wk-blocker { display: block; margin-top: 4px; font-size: 11px; color: var(--ink-2); }

.ready-now { margin: 0 0 26px; }
.rn {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 20px 20px 20px 18px;
  border-radius: var(--r-lg);
  background: var(--success-soft);
  box-shadow: inset 5px 0 0 var(--success);
  text-decoration: none;
  color: inherit;
}
.rn:hover { background: color-mix(in srgb, var(--success-soft) 80%, var(--success)); }
.rn-n {
  font-size: 58px;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.95;
  text-align: right;
  color: var(--success);
  font-variant-numeric: tabular-nums;
}
.rn-label {
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.rn-note {
  display: block;
  margin-top: 4px;
  max-width: 60ch;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-2);
}
.rn-note em { font-style: normal; font-weight: 700; }
.rn-go {
  font-size: 13px;
  font-weight: 700;
  color: var(--success);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .rn { grid-template-columns: 64px 1fr; gap: 14px; }
  .rn-n { font-size: 40px; }
  .rn-go { grid-column: 1 / -1; }
}

.id-funnel {
  margin: 0 0 30px;
  padding: 6px 0 0;
  border-top: 2px solid var(--line-strong);
}
.fn-row, .fn-keep {
  display: grid;
  grid-template-columns: 112px 1fr 48px;
  align-items: center;
  gap: 18px;
  padding: 16px 10px 16px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.fn-row:hover { background: var(--surface); }
.fn-row.is-open { background: var(--surface); box-shadow: inset 3px 0 0 var(--ink); }
.fn-n {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fn-body { display: block; }
.fn-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.fn-note { display: block; margin-top: 1px; font-size: 12px; color: var(--ink-3); }
.fn-track {
  display: block;
  height: 10px;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.fn-fill { display: block; height: 100%; border-radius: 999px; min-width: 3px; }
.fn-long_tail { background: color-mix(in srgb, var(--ai) 45%, var(--surface-2)); }
.fn-serious { background: var(--warn); }
.fn-ready_candidate { background: var(--accent); }
.fn-pct {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fn-keep {
  margin-top: 4px;
  border-bottom: none;
  border-radius: var(--r);
  padding-left: 14px;
  background: var(--success-soft);
  box-shadow: inset 4px 0 0 var(--success);
}
.fn-keep .fn-n { color: var(--success); }
.fn-keep .fn-note em { font-style: normal; font-weight: 700; }

.sec-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.sec-note { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.sec-clear { margin-left: auto; font-size: 12px; color: var(--accent-ink); }

.desk { margin: 0 0 30px; }
.desk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
}
.pk {
  display: flex;
  flex-direction: column;
  padding: 14px 15px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 4px 0 0 var(--success);
}
.pk-top { display: flex; align-items: baseline; gap: 10px; }
.pk-name {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.pk-name:hover { text-decoration: underline; }
.pk-score {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pk-why { margin: 7px 0 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.pk-ev { margin: 7px 0 0; padding-left: 15px; }
.pk-ev li { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.pk-ask {
  margin: 9px 0 0;
  font-size: 13px;
  color: var(--ink-2);
}
.pk-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.btn-call {
  flex: 1;
  padding: 9px 12px;
  border-radius: var(--r);
  background: var(--call);
  color: var(--call-text);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.pk-nophone { flex: 1; font-size: 12px; color: var(--ink-3); }
.pk-closer { font-size: 11px; color: var(--ink-3); }

.desk-empty {
  padding: 22px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.de-line { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--ink); }
.de-note { margin: 0; max-width: 62ch; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.de-note em { font-style: normal; font-weight: 700; color: var(--ink-2); }

.why { margin: 0 0 30px; }
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 10px;
}
.wh {
  display: block;
  padding: 12px 14px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}
.wh:hover { border-color: var(--ink-3); }
.wh.is-open { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }
.wh-n {
  display: block;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.wh-label { display: block; margin-top: 1px; font-size: 13px; font-weight: 600; color: var(--ink); }
.wh-note { display: block; margin-top: 2px; font-size: 11px; line-height: 1.45; color: var(--ink-3); }
.wh-track {
  display: block;
  height: 4px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.wh-fill { display: block; height: 100%; border-radius: 999px; background: var(--ai); min-width: 2px; }

.inspect { margin: 0 0 30px; }
.insp { width: 100%; border-collapse: collapse; font-size: 13px; }
.insp thead th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-strong);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  text-align: left;
}
.insp tbody td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.insp tbody a { color: var(--ink); font-weight: 600; text-decoration: none; }
.insp tbody a:hover { text-decoration: underline; }
.insp-n { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.insp-bl { color: var(--ink-3); }
.insp-empty { font-size: 13px; color: var(--ink-3); }

/* ---- J1-J9 sales journey ---- */
.ladder { margin: 0 0 28px; }
.jl { margin: 0; padding: 0; list-style: none; }
.jl-row {
  display: grid;
  grid-template-columns: 34px minmax(140px, 1.1fr) minmax(90px, 2fr) 62px 44px 52px;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--line);
}
.jl-row.is-human {
  background: var(--success-soft);
  border-radius: var(--r-sm);
  box-shadow: inset 4px 0 0 var(--success);
  padding-left: 12px;
  border-bottom-color: transparent;
}
.jl-row.is-empty { opacity: 0.55; }
.jl-key {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.jl-row.is-human .jl-key { color: var(--success); }
.jl-label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.jl-note { display: block; margin-top: 1px; font-size: 11px; line-height: 1.4; color: var(--ink-3); }
.jl-ai {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--accent-ink);
}
.jl-row.is-human .jl-ai { color: var(--ink-3); }
.jl-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.jl-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ai) 45%, var(--surface-2));
}
.jl-row.is-human .jl-fill { background: var(--success); }
.jl-n {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.jl-pct {
  font-size: 12px;
  color: var(--ink-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.jl-owner {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: right;
  color: var(--ink-3);
}
.jl-row.is-human .jl-owner { color: var(--success); }
.jl-foot { margin: 12px 0 0; font-size: 12px; color: var(--ink-3); }
.jl-foot strong { color: var(--ink-2); }

@media (max-width: 720px) {
  .jl-row { grid-template-columns: 28px 1fr 54px 40px; gap: 10px; }
  .jl-track, .jl-owner { display: none; }
}

/* Stages as tiny secondary meta — present, never the product. */
.stage-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 22px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--ink-3);
}
.sm-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sm { font-variant-numeric: tabular-nums; }
.sm-note { margin-left: auto; font-style: italic; }

.stage-quiet {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.sq-head {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.sq-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sq {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  text-decoration: none;
}
.sq:hover { border-color: var(--ink-3); }
.sq-name { font-size: 12px; color: var(--ink-3); }
.sq-n { font-size: 13px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sq-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }
.sq-note a { color: var(--accent-ink); }

@media (max-width: 720px) {
  .id-head h1 { font-size: 26px; }
  .fn-row, .fn-keep { grid-template-columns: 78px 1fr 40px; gap: 12px; }
  .fn-n { font-size: 26px; }
}

.band-strip {
  margin: 0 0 16px;
  padding: 14px 16px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.band-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.band-total {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
}
.band-bar {
  display: flex;
  gap: 2px;
  height: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}
.band-seg { border-radius: 999px; }
.band-long_tail { background: color-mix(in srgb, var(--ai) 55%, var(--surface-2)); }
.band-serious { background: var(--warn); }
.band-ready_candidate { background: var(--accent); }
.band-keep-dot { background: var(--success); }
.band-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0;
}
.band-item dt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  color: var(--ink-2);
}
.band-item dd {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 2px 0 0 14px;
}
.band-item dd strong {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.band-pct { font-size: 12px; color: var(--ink-3); }
.band-note { font-size: 12px; color: var(--ink-3); }
.band-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.band-keep dd strong { color: var(--success); }

.lane-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 12px 0 8px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}
.lane-summary div {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.lane-summary dt {
  margin: 0;
  order: 2;
  font-size: 12px;
  color: var(--accent-ink);
}
.lane-summary dd {
  margin: 0;
  order: 1;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.lane-note {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--accent-ink);
}
.lane-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 0;
}
.lane-tile {
  flex: 1 1 140px;
  min-height: 64px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--paper));
  box-shadow: inset 3px 0 0 var(--accent);
  color: var(--accent-ink);
}
.lane-tile[data-lane="tony"] {
  background: color-mix(in srgb, var(--warn-soft) 45%, var(--paper));
  box-shadow: inset 3px 0 0 var(--warn);
  color: var(--warn);
}
.lane-tile[data-lane="factory"] {
  background: color-mix(in srgb, var(--success-soft) 45%, var(--paper));
  box-shadow: inset 3px 0 0 var(--success);
  color: var(--success);
}
.lane-tile.is-active { box-shadow: inset 4px 0 0 currentColor, 0 1px 2px rgba(28,25,23,.06); }
.lane-tile.is-clear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  background: var(--surface-2);
  box-shadow: none;
  color: var(--ink-2);
}
.lane-name { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }
.lane-n { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.lane-chip { background: var(--accent-soft); color: var(--accent-ink); }
.lane-chip[data-lane="tony"] { background: var(--warn-soft); color: var(--warn); }
.lane-chip[data-lane="factory"] { background: var(--success-soft); color: var(--success); }
.chip-score { background: var(--surface-2); color: var(--ink-2); }
.chip-score[data-band="hot"] { background: var(--warn-soft); color: var(--warn); }
.chip-score[data-band="warm"] { background: var(--accent-soft); color: var(--accent-ink); }
.control-surface { box-shadow: inset 3px 0 0 var(--accent); }
.channel-list { list-style: none; margin: 0; padding: 0; }
.channel-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 2px 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.channel-row:first-child { border-top: 0; }
.channel-name { font-weight: 600; }
.channel-addr { color: var(--ink-2); overflow-wrap: anywhere; }
.channel-gate {
  grid-column: 2;
  font-size: 13px;
  color: var(--success);
}
.channel-gate.is-held { color: var(--warn); }
.icp-note { margin: 8px 0 0; font-size: 13px; color: var(--ink-3); }
.resume-page .page { max-width: 640px; }
.resume-step {
  margin: 12px 0 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent-ink);
}
.doc-version {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
}
.campaign-panel { margin-top: 32px; box-shadow: inset 3px 0 0 var(--accent); }
.proposal-list { list-style: none; margin: 16px 0 0; padding: 0; }
.proposal {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.proposal:first-child { border-top: 0; }
.proposal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.proposal-name { font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.proposal-plan { margin: 6px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.proposal-when { font-size: 13px; color: var(--ink-3); }
.proposal-why { margin: 6px 0 0; color: var(--ink-2); }
.proposal-blockers { margin: 6px 0 0; font-size: 13px; color: var(--warn); }
.proposal-creative {
  margin: 6px 0 0;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--success-soft) 45%, var(--surface));
  box-shadow: inset 3px 0 0 var(--success);
  font-size: 13px;
  color: var(--ink-2);
}
.creative-panel { box-shadow: inset 3px 0 0 var(--success); }
.creative-list { margin: 0 0 8px; padding-left: 18px; color: var(--ink-2); }
.response-read {
  display: grid;
  gap: 8px 12px;
  margin: 12px 0 8px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--accent-soft) 32%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}
.response-read div { display: flex; justify-content: space-between; gap: 12px; }
.response-read dt {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.response-read dd { margin: 0; font-weight: 600; text-align: right; }
.escalate-note {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--warn-soft);
  box-shadow: inset 3px 0 0 var(--warn);
  color: var(--warn);
  font-weight: 600;
}
.wa-person {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
  font-size: 13px;
  color: var(--accent-ink);
}
.wa-window {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--ink-2);
}
.wa-window strong { color: var(--accent-ink); }
.wa-blockers {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 13px;
  color: var(--warn);
}
.stage-panel { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
.stage-panel strong { color: var(--accent-ink); }
.funnel-panel { box-shadow: inset 3px 0 0 var(--accent); }
.funnel-score {
  margin: 0 0 8px;
  color: var(--accent-ink);
  letter-spacing: -0.03em;
}
.funnel-score strong { font-size: 34px; font-weight: 700; }
.funnel-score span { font-size: 14px; color: var(--ink-3); }
.funnel-stall {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--warn-soft);
  box-shadow: inset 3px 0 0 var(--warn);
  color: var(--warn);
  font-weight: 600;
}
.funnel-reasons {
  margin: 12px 0 8px;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 14px;
}
.packet-panel {
  background: color-mix(in srgb, var(--warn-soft) 32%, var(--surface));
  box-shadow: inset 3px 0 0 var(--warn);
}
.packet-why { margin: 0 0 8px; font-weight: 600; color: var(--warn); }
.packet-evidence { margin: 0 0 12px; padding-left: 18px; color: var(--ink-2); }
.factory-panel {
  background: color-mix(in srgb, var(--success-soft) 32%, var(--surface));
  box-shadow: inset 3px 0 0 var(--success);
}
.pipe-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}
.pipe-chip {
  height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface-2));
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 600;
}
.pipe-chip.is-active {
  background: var(--accent-soft);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.card-activity {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}
.stage-bar {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
}
.stage-bar-item {
  min-width: 72px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
}
.stage-bar-item span { display: block; }
.stage-bar-item em { font-style: normal; color: var(--accent-ink); }
.stage-bar-item.is-current {
  color: var(--accent-ink);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.stage-bar-item[data-stage="deposit"].is-current {
  color: var(--warn);
  background: var(--warn-soft);
  box-shadow: inset 3px 0 0 var(--warn);
}
.stage-bar-item[data-stage="won"].is-current {
  color: var(--success);
  background: var(--success-soft);
  box-shadow: inset 3px 0 0 var(--success);
}
.focus-drafts { margin: 8px 0 0; padding-left: 18px; color: var(--ink-2); }
.fields-kicker {
  margin: 20px 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.value-line {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--accent-ink);
}
.field-sheet {
  margin: 0;
  padding: 8px 12px 12px;
  background: color-mix(in srgb, var(--accent-soft) 28%, var(--paper));
  box-shadow: inset 3px 0 0 var(--accent);
  border-radius: var(--r);
}
.field-row {
  display: grid;
  grid-template-columns: minmax(7rem, 36%) 1fr;
  gap: 8px 14px;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
.field-row:last-child { border-bottom: 0; }
.field-row dt {
  margin: 0;
  color: var(--ink-3);
  font-size: 13px;
}
.field-row dd {
  margin: 0;
  font-weight: 500;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.field-row.is-blank dd { color: var(--ink-3); font-weight: 400; }
.card.is-dragging { opacity: 0.55; }
.column.is-drop { outline: 2px solid var(--accent); }

.deal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.deal-layout { display: flex; flex-direction: column; }
.contact-name {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.contact-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  color: var(--accent-ink);
}
.contact-row span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.contact-row strong { font-weight: 600; color: inherit; }
.contact-row.is-empty { color: var(--ink-3); }
.contact-dates { margin: 12px 0 0; }
.note-pin {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface));
  border-radius: var(--r-sm);
  box-shadow: inset 3px 0 0 var(--accent);
  color: var(--ink);
  font-weight: 500;
}
.note-list { list-style: none; margin: 0 0 16px; padding: 0; }
.note-list li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.tl-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
}
.tl-filters button {
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.tl-filters button.is-active {
  color: var(--accent-ink);
  background: var(--accent-soft);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.tl-dot.is-note { background: var(--warn); }
.panel {
  background: var(--surface);
  border-radius: var(--r);
  padding: 20px;
  margin: 0 0 16px;
}
.panel h2 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.field { display: block; margin: 12px 0; }
.field[hidden], [hidden] { display: none !important; }
.field span { display: block; margin-bottom: 6px; color: var(--ink-2); font-size: 14px; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.field textarea { min-height: 88px; resize: vertical; }
.flash { color: var(--success); font-size: 14px; }

.estep {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.estep-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 88px;
  padding: 10px 12px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-3);
}
.estep-item span { font-weight: 600; color: inherit; }
.estep-item em { font-style: normal; font-size: 12px; }
.estep-item.is-done { color: var(--ink-2); background: var(--paper); }
.estep-item.is-done span { color: var(--success); }
.estep-item.is-active {
  color: var(--accent-ink);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
  border-radius: var(--r-sm);
}
.estep-item.is-active span { color: var(--accent-ink); }

.compose-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.compose-tabs button {
  background: none;
  border: 0;
  padding: 8px 4px 10px;
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.compose-tabs button.is-active {
  color: var(--accent-ink);
  border-bottom-color: var(--accent);
}

.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.tl-dot {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--ink-3);
}
.tl-dot.is-live { background: var(--accent); }
.tl-title { margin: 0; font-weight: 600; }
.tl-meta { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.tl-body { margin: 8px 0 0; color: var(--ink-2); }

.sms-row.is-yes { background: var(--success-soft); }
.sms-row.is-stop { opacity: 0.7; }
.more-list { list-style: none; margin: 0; padding: 0; }
.more-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.more-list span { font-weight: 600; }

@media (min-width: 1100px) {
  .page { max-width: 1040px; padding: 32px 40px 80px; }
  .page-head h1, .deal-head h1 { font-size: 32px; }
  .score-n { font-size: 48px; }
  .lanes { grid-template-columns: 1fr 1fr; gap: 48px; }
  .board {
    display: grid;
    width: min(100vw - 48px, 1680px);
    margin-left: 50%;
    transform: translateX(-50%);
    grid-template-columns: repeat(6, minmax(180px, 1fr));
    gap: 24px;
    align-items: start;
  }
  .column, .column.is-focus { display: block; }
  /* Six narrow columns squeeze a name against its button — give it the row. */
  .board .card-top { flex-wrap: wrap; }
  .board .card-name { flex: 1 1 100%; }
  .board .card-top .btn-call,
  .board .card-top .btn-open { width: 100%; margin-top: 10px; }
  .deal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
  }
  .deal-main { grid-column: 1; grid-row: 1; }
  .deal-side { grid-column: 2; grid-row: 1; position: sticky; top: 88px; }
}

/* Tony-only global CRM search ------------------------------------------- */
.crm-search {
  margin: 24px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.crm-search-compact { margin-top: 20px; }
.crm-search > label {
  display: block;
  margin-bottom: 8px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}
.crm-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}
.crm-search input[type="search"] {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.crm-search input[type="search"]:focus {
  outline: 3px solid color-mix(in srgb, var(--focus) 22%, transparent);
  border-color: var(--focus);
}
.search-summary {
  margin: 20px 0 12px;
  color: var(--ink-2);
}
.search-results {
  display: grid;
  gap: 10px;
}
.search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.search-result h2 {
  margin: 0 0 5px;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.search-result h2 a:hover { text-decoration: underline; }
.search-meta,
.search-next,
.search-contact {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 14px;
}
.search-contact a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.search-empty {
  margin-top: 18px;
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
}
.search-empty p { margin: 6px 0 0; color: var(--ink-3); }

@media (max-width: 640px) {
  .crm-search-row { grid-template-columns: 1fr; }
  .crm-search-row .btn-call,
  .crm-search-row .btn-secondary { width: 100%; }
  .search-result { align-items: stretch; flex-direction: column; }
  .search-result .btn-open { width: 100%; text-align: center; }
}


/* ========================================================================
   2026 command-centre redesign
   White operating canvas + purposeful directional colour. No brand green.
   ======================================================================== */

body.app-shell {
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  letter-spacing: -0.006em;
}
body.nav-open { overflow: hidden; }

.app-frame { min-height: 100dvh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: 278px;
  display: flex;
  flex-direction: column;
  padding: 24px 16px 18px;
  background: #fff;
  border-right: 1px solid var(--line);
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 4px 8px 20px;
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  position: relative;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  overflow: hidden;
  border-radius: 11px;
  background: var(--ink);
  box-shadow: var(--shadow-sm);
}
.brand-mark i {
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  border-radius: 5px;
}
.brand-mark i:nth-child(1) { left: -6px; top: 8px; background: var(--accent); }
.brand-mark i:nth-child(2) { left: 8px; top: -6px; background: var(--violet); }
.brand-mark i:nth-child(3) { right: -6px; bottom: 5px; background: var(--coral); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-copy strong { font-size: 17px; font-weight: 700; letter-spacing: -0.035em; }
.brand-copy small {
  margin-top: 5px;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.side-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 0 18px;
  scrollbar-width: thin;
}
.nav-section-label {
  margin: 18px 10px 7px;
  color: #98A2B3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.side-nav .nav-item {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 55px;
  height: auto;
  margin: 2px 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ink-2);
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.side-nav .nav-item:hover {
  color: var(--ink);
  background: var(--surface-2);
  transform: translateX(2px);
}
.side-nav .nav-item.is-active {
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-color: #C9DBFF;
  box-shadow: none;
}
.nav-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--ink-3);
  background: var(--surface-2);
}
.nav-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-icon-home svg path:first-child { fill: currentColor; stroke: none; }
.nav-item.is-active .nav-icon { color: #fff; background: var(--accent); }
.nav-item[href="/tony"].is-active { color: #5B21B6; background: var(--violet-soft); border-color: #DDC9FF; }
.nav-item[href="/tony"].is-active .nav-icon { background: var(--violet); }
.nav-item[href="/installs"].is-active { color: #9A3412; background: var(--amber-soft); border-color: #FED7AA; }
.nav-item[href="/installs"].is-active .nav-icon { background: var(--amber); }
.nav-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.nav-copy strong { font-size: 14px; font-weight: 650; }
.nav-copy small { margin-top: 4px; overflow: hidden; color: var(--ink-3); font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.nav-count {
  min-width: 26px;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--accent-ink);
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.nav-count-priority { color: #5B21B6; background: var(--violet-soft); }
.nav-active-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sidebar-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}
.sidebar-status > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.sidebar-status strong { font-size: 12px; }
.sidebar-status small { margin-top: 2px; color: var(--ink-3); font-size: 11px; }
.status-signal { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }

.workspace { min-height: 100dvh; margin-left: 278px; background: #fff; }
.command-bar {
  position: sticky;
  top: 0;
  z-index: 35;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 28px;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.command-left, .command-actions { display: flex; align-items: center; gap: 12px; }
.command-title { display: flex; flex-direction: column; line-height: 1.15; }
.command-title span { color: var(--ink-3); font-size: 10px; font-weight: 600; }
.command-title strong { margin-top: 3px; font-size: 16px; letter-spacing: -.02em; }
.global-search {
  width: clamp(240px, 28vw, 410px);
  min-height: 42px;
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.global-search:focus-within { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.global-search svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; }
.mobile-search-toggle { display: none; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; }
.mobile-search-toggle svg { width: 18px; height: 18px; }
.global-search input { min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13px; }
.global-search input::placeholder { color: #98A2B3; }
.global-search kbd { padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink-3); background: #fff; font-family: inherit; font-size: 10px; }
.command-cta {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  border-radius: 10px;
  color: #fff;
  background: var(--violet);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(124,58,237,.18);
}
.command-cta:hover { background: #6D28D9; }
.command-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--accent-ink);
  background: var(--accent-soft);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.command-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.menu-toggle span { display: block; width: 19px; height: 2px; margin: 4px auto; border-radius: 999px; background: var(--ink); }
.sidebar-scrim { display: none; }

.banner-huge, .banner-live {
  margin: 0;
  padding: 8px 28px;
  border-bottom: 1px solid #FDE7B4;
  color: #92400E;
  background: #FFFBEB;
  font-size: 12px;
  text-align: center;
}
.banner-huge strong, .banner-live strong { color: #78350F; letter-spacing: .05em; }
.banner-live { border-bottom-color: #C9DBFF; color: var(--accent-ink); background: #F5F9FF; }
.banner-live strong { color: var(--accent-ink); }
:where(section, article, div)[id] { scroll-margin-top: 146px; }

.page {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 38px clamp(24px, 4vw, 60px) 88px;
}
.hero-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin: 0 0 28px;
  padding: 0 0 26px;
  border-bottom: 1px solid var(--line);
}
.eyebrow, .hero-head .kicker { margin: 0 0 9px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero-head h1, .page-head h1, .deal-head h1, .id-head h1 {
  margin: 0;
  max-width: 18ch;
  color: var(--ink);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: 1.02;
  box-shadow: none;
}
.hero-copy { max-width: 720px; margin: 12px 0 0; color: var(--ink-2); font-size: 17px; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-actions .btn-call, .hero-actions .btn-secondary { white-space: nowrap; }
.page-head:not(.hero-head), .id-head, .deal-head { margin: 0 0 26px; }
.page-head .lede, .id-sub, .deal-head .card-meta { max-width: 760px; margin-top: 12px; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.kicker, .label { color: var(--ink-3); font-weight: 750; letter-spacing: .1em; }

.business-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 26px;
}
.business-stat {
  position: relative;
  min-height: 154px;
  display: flex;
  flex-direction: column;
  padding: 19px 20px 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease;
}
.business-stat::after { content: ""; position: absolute; inset: auto -34px -44px auto; width: 106px; height: 106px; border-radius: 50%; background: currentColor; opacity: .07; }
.business-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-label { color: var(--ink-2); font-size: 12px; font-weight: 700; }
.business-stat strong { margin-top: 15px; color: currentColor; font-size: 40px; line-height: 1; letter-spacing: -.05em; }
.business-stat strong em { margin-left: 4px; color: var(--ink-3); font-size: 17px; font-style: normal; font-weight: 600; }
.stat-note { margin-top: auto; color: var(--ink-3); font-size: 11px; }
.stat-coral { color: var(--coral); box-shadow: inset 0 4px 0 var(--coral), var(--shadow-sm); }
.stat-blue { color: var(--accent); box-shadow: inset 0 4px 0 var(--accent), var(--shadow-sm); }
.stat-violet { color: var(--violet); box-shadow: inset 0 4px 0 var(--violet), var(--shadow-sm); }
.stat-amber { color: var(--amber); box-shadow: inset 0 4px 0 var(--amber), var(--shadow-sm); }
.stat-neutral { color: #667085; box-shadow: inset 0 4px 0 #98A2B3, var(--shadow-sm); }

.qualification-shell {
  margin: 0 0 28px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.section-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.section-title-row .kicker { margin-bottom: 5px; }
.section-title-row h2 { margin: 0; font-size: 23px; letter-spacing: -.035em; }
.section-status { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.status-current { color: var(--accent-ink); background: var(--accent-soft); }
.status-held { color: #92400E; background: var(--amber-soft); }
.status-learning { color: #5B21B6; background: var(--violet-soft); }
.qualification-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.signal-card {
  min-height: 166px;
  padding: 17px;
  border-radius: 14px;
  border: 1px solid currentColor;
  background: #fff;
}
.signal-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: currentColor; color: #fff; font-size: 15px; font-weight: 700; }
.signal-label { margin: 17px 0 0; color: var(--ink-2); font-size: 12px; font-weight: 700; }
.signal-value { margin: 4px 0 0; color: currentColor; font-size: 34px; font-weight: 750; letter-spacing: -.045em; line-height: 1; }
.signal-note { margin: 12px 0 0; color: var(--ink-3); font-size: 11px; line-height: 1.45; }
.signal-note strong { color: var(--ink-2); }
.signal-coral { color: var(--coral); border-color: #FFD1D8; background: linear-gradient(145deg, #fff 52%, var(--coral-soft)); }
.signal-blue { color: var(--accent); border-color: #CADBFF; background: linear-gradient(145deg, #fff 52%, var(--accent-soft)); }
.signal-violet { color: var(--violet); border-color: #DFCFFF; background: linear-gradient(145deg, #fff 52%, var(--violet-soft)); }
.signal-amber { color: var(--amber); border-color: #FED7AA; background: linear-gradient(145deg, #fff 52%, var(--amber-soft)); }
.grade-panel { display: grid; grid-template-columns: minmax(210px, .8fr) 2fr; gap: 24px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.grade-panel-copy h3 { margin: 0; font-size: 19px; letter-spacing: -.025em; }
.grade-panel-copy p:last-child { margin: 7px 0 0; color: var(--ink-3); font-size: 12px; line-height: 1.5; }
.grade-band-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.grade-band {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 7px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition: transform .14s ease, box-shadow .14s ease;
}
a.grade-band:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.grade-code { grid-row: 1 / span 2; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: #667085; font-size: 11px; font-weight: 800; }
.grade-name { overflow: hidden; color: var(--ink-2); font-size: 11px; font-weight: 700; text-overflow: ellipsis; }
.grade-band strong { grid-column: 1 / -1; margin-top: 10px; color: currentColor; font-size: 25px; letter-spacing: -.04em; }
.grade-band small { grid-column: 1 / -1; color: var(--ink-3); font-size: 10px; }
.grade-p { color: var(--coral); border-color: #FFD1D8; background: var(--coral-soft); }
.grade-h { color: var(--amber); border-color: #FED7AA; background: var(--amber-soft); }
.grade-c { color: var(--violet); border-color: #DFCFFF; background: var(--violet-soft); }
.grade-s { color: var(--accent); border-color: #CADBFF; background: var(--accent-soft); }
.grade-l { color: #475467; background: #F2F4F7; }
.grade-u { color: #98A2B3; background: #FAFAFA; }
.grade-p .grade-code { background: var(--coral); }
.grade-h .grade-code { background: var(--amber); }
.grade-c .grade-code { background: var(--violet); }
.grade-s .grade-code { background: var(--accent); }
.grade-l .grade-code, .grade-u .grade-code { background: #667085; }
a.grade-band.is-active { outline: 2px solid currentColor; outline-offset: 2px; }
.grade-mini { display: inline-grid; min-width: 25px; height: 25px; place-items: center; border-radius: 7px; color: #fff; background: currentColor; font-size: 10px; font-weight: 800; }
.grade-mini.grade-p { color: #fff; background: var(--coral); }
.grade-mini.grade-h { color: #fff; background: var(--amber); }
.grade-mini.grade-c { color: #fff; background: var(--violet); }
.grade-mini.grade-s { color: #fff; background: var(--accent); }
.grade-mini.grade-l, .grade-mini.grade-u { color: #fff; background: #667085; }

.quick-route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 28px; }
.quick-route {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 16px 17px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.quick-route:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.quick-route-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: currentColor; font-size: 11px; font-weight: 800; }
.quick-route strong { display: block; color: var(--ink); font-size: 14px; }
.quick-route small { display: block; margin-top: 4px; color: var(--ink-3); font-size: 11px; line-height: 1.4; }
.quick-route b { color: currentColor; font-size: 20px; }
.route-blue { color: var(--accent); }
.route-violet { color: var(--violet); }
.route-coral { color: var(--coral); }
.route-amber { color: var(--amber); }

.overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 28px; }
.overview-card { position: relative; padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow-sm); }
.overview-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 17px 0 0 17px; background: currentColor; }
.overview-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.overview-card h2 { margin: 0; color: var(--ink); font-size: 21px; letter-spacing: -.03em; }
.overview-card > p { color: var(--ink-2); }
.overview-badge { padding: 5px 9px; border-radius: 999px; color: currentColor; background: color-mix(in srgb, currentColor 10%, #fff); font-size: 11px; font-weight: 700; }
.accent-blue { color: var(--accent); }
.accent-violet { color: var(--violet); }
.inline-action { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: currentColor; font-size: 13px; font-weight: 700; }
.inline-action span { transition: transform .15s ease; }
.inline-action:hover span { transform: translateX(3px); }

.panel, .card, .sms-row, .pk, .wh, .wk, .band-strip, .crm-search, .search-result {
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.panel { padding: 22px; border-radius: 16px; }
.panel h2 { font-size: 21px; font-weight: 700; letter-spacing: -.035em; }
.card { border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.card:hover, .pk:hover, .wk:hover, .wh:hover { border-color: #C6CFDD; box-shadow: var(--shadow-md); }
.btn-call, .btn-secondary, .btn-open { border-radius: 10px; font-weight: 700; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.btn-call:hover:not(:disabled), .btn-secondary:hover, .btn-open:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-secondary, .btn-open { border-color: var(--line-strong); }

/* Journey reads top-to-bottom: intake → commercial grade → readiness → action. */
.journey-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 11px; margin: 0 0 20px; }
.journey-status-card { min-height: 106px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.journey-status-card span { display: block; color: var(--ink-3); font-size: 11px; font-weight: 700; }
.journey-status-card strong { display: block; margin-top: 8px; color: currentColor; font-size: 30px; letter-spacing: -.04em; }
.journey-status-card small { display: block; margin-top: 5px; color: var(--ink-3); font-size: 10px; }
.journey-status-card.blue { color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.journey-status-card.coral { color: var(--coral); box-shadow: inset 0 3px 0 var(--coral); }
.journey-status-card.violet { color: var(--violet); box-shadow: inset 0 3px 0 var(--violet); }
.journey-status-card.amber { color: var(--amber); box-shadow: inset 0 3px 0 var(--amber); }
.section-jumps { position: sticky; top: 74px; z-index: 15; display: flex; gap: 7px; margin: 0 0 22px; padding: 9px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: var(--shadow-sm); }
.section-jumps a { flex: 0 0 auto; padding: 7px 10px; border-radius: 8px; color: var(--ink-2); font-size: 11px; font-weight: 700; }
.section-jumps a:hover { color: var(--accent-ink); background: var(--accent-soft); }
.id-funnel { padding: 20px; border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 17px; background: #fff; box-shadow: var(--shadow-sm); }
.fn-row, .fn-keep { margin: 6px 0; padding: 14px 13px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.fn-row:hover { background: #F9FBFF; border-color: #C9DBFF; }
.fn-row:nth-of-type(1) { box-shadow: inset 4px 0 0 #98A2B3; }
.fn-row:nth-of-type(2) { box-shadow: inset 4px 0 0 var(--amber); }
.fn-row:nth-of-type(3) { box-shadow: inset 4px 0 0 var(--accent); }
.fn-keep-row, .fn-keep { color: var(--violet); background: var(--violet-soft); border-color: #DFCFFF; box-shadow: inset 4px 0 0 var(--violet); }
.fn-keep-row .fn-n, .fn-keep .fn-n { color: var(--violet); }
.fn-hard_keep { background: var(--violet); }
.fn-ready_candidate { background: var(--accent); }
.fn-serious { background: var(--amber); }
.packets-strip .ps { border-color: #DFCFFF; background: linear-gradient(135deg, #fff, var(--violet-soft)); box-shadow: inset 4px 0 0 var(--violet), var(--shadow-sm); }
.ps-n, .ps-go { color: var(--violet); }
.pk { box-shadow: inset 4px 0 0 var(--violet), var(--shadow-sm); }
.pk-score { color: #5B21B6; background: var(--violet-soft); }
.ready-now .rn { background: var(--violet-soft); box-shadow: inset 5px 0 0 var(--violet); }
.rn-n, .rn-go { color: var(--violet); }
.wk-summary { border-color: var(--line); background: #fff; box-shadow: var(--shadow-sm); }
.jl-row.is-human { color: var(--violet); background: var(--violet-soft); box-shadow: inset 4px 0 0 var(--violet); }
.jl-row.is-human .jl-key, .jl-row.is-human .jl-owner { color: var(--violet); }
.jl-row.is-human .jl-fill { background: var(--violet); }

/* Deal detail: a clear header, persistent in-page navigation and separated work zones. */
.deal-head { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, #fff 64%, var(--accent-soft)); box-shadow: var(--shadow-sm); }
.deal-head h1 { font-size: clamp(30px, 4vw, 48px); }
.deal-actions { gap: 10px; }
.deal-layout { gap: 18px; }
.deal-main, .deal-side { min-width: 0; }
.deal .control-surface { background: linear-gradient(145deg, #fff 65%, var(--accent-soft)); box-shadow: inset 4px 0 0 var(--accent), var(--shadow-sm); }
.funnel-panel { background: linear-gradient(145deg, #fff 65%, var(--violet-soft)); box-shadow: inset 4px 0 0 var(--violet), var(--shadow-sm); }
.funnel-score, .funnel-score strong { color: var(--violet); }
.packet-panel { background: linear-gradient(145deg, #fff 65%, var(--amber-soft)); box-shadow: inset 4px 0 0 var(--amber), var(--shadow-sm); }
.factory-panel { background: linear-gradient(145deg, #fff 65%, var(--violet-soft)); box-shadow: inset 4px 0 0 var(--violet), var(--shadow-sm); }
.summary-rail { box-shadow: inset 4px 0 0 var(--coral), var(--shadow-sm); }
.contact-panel { box-shadow: inset 4px 0 0 var(--accent), var(--shadow-sm); }
.notes-panel { box-shadow: inset 4px 0 0 var(--amber), var(--shadow-sm); }
.note-pin { background: var(--amber-soft); box-shadow: inset 3px 0 0 var(--amber); }
.stage-bar-item.is-current { color: var(--accent-ink); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.stage-bar-item[data-stage="won"].is-current { color: #5B21B6; background: var(--violet-soft); box-shadow: inset 3px 0 0 var(--violet); }
.tl-dot.is-live { background: var(--coral); }
.estep-item.is-done span { color: var(--violet); }

/* Search is a first-class operating surface. */
.crm-search { border-color: #CADBFF; background: linear-gradient(145deg, #fff, #F7FAFF); box-shadow: var(--shadow-sm); }
.crm-search input[type="search"] { border-color: var(--line-strong); background: #fff; }
.search-result { border-radius: 14px; }
.search-result:hover { border-color: #CADBFF; box-shadow: var(--shadow-md); }
.search-empty { border-color: var(--line-strong); background: var(--surface-2); }

/* Property and scoring explanation on the system page. */
.system-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.system-card { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); }
.system-card h2 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.03em; }
.system-card p { color: var(--ink-2); line-height: 1.55; }
.system-card ol, .system-card ul { margin: 12px 0 0; padding-left: 20px; color: var(--ink-2); }
.system-card li { margin: 7px 0; }
.system-card-blue { box-shadow: inset 4px 0 0 var(--accent), var(--shadow-sm); }
.system-card-amber { box-shadow: inset 4px 0 0 var(--amber), var(--shadow-sm); }
.system-card-violet { box-shadow: inset 4px 0 0 var(--violet), var(--shadow-sm); }
.system-card-coral { box-shadow: inset 4px 0 0 var(--coral), var(--shadow-sm); }
.connection-state { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: #92400E; background: var(--amber-soft); font-size: 11px; font-weight: 700; }
.source-note { margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; color: var(--ink-2); background: var(--surface-2); font-size: 12px; line-height: 1.55; }

.notice-card { padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-md); }
.notice-card h1 { margin: 0; font-size: 34px; letter-spacing: -.04em; }
.notice-danger { box-shadow: inset 4px 0 0 var(--coral), var(--shadow-md); }

@media (min-width: 1100px) {
  .page { max-width: 1480px; padding: 42px clamp(28px, 4vw, 64px) 90px; }
  .deal-layout { grid-template-columns: minmax(0, 1fr) 350px; gap: 20px; }
  .deal-side { top: 92px; }
  .board { width: min(calc(100vw - 326px), 1680px); }
}

@media (max-width: 1180px) {
  .command-state { display: none; }
  .qualification-grid, .business-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-panel { grid-template-columns: 1fr; }
  .grade-band-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .sidebar { transform: translateX(-102%); box-shadow: 24px 0 50px rgba(16,24,40,.16); transition: transform .2s ease; }
  body.nav-open .sidebar { transform: translateX(0); }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 45; background: rgba(11,18,32,.36); backdrop-filter: blur(2px); }
  body.nav-open .sidebar-scrim { display: block; }
  .workspace { margin-left: 0; }
  .menu-toggle { display: block; }
  .global-search { width: min(42vw, 360px); }
  .command-cta { display: none; }
}

@media (max-width: 720px) {
  .command-bar { min-height: 64px; padding: 10px 16px; }
  .command-title span { display: none; }
  .global-search { width: 44px; grid-template-columns: 1fr; justify-content: center; padding: 0 4px; }
  .mobile-search-toggle { display: grid; }
  .global-search .search-leading-icon, .global-search input, .global-search kbd { display: none; }
  .global-search.is-open { position: fixed; top: 10px; left: 68px; right: 16px; z-index: 60; width: auto; grid-template-columns: 20px 1fr; justify-content: initial; padding: 0 12px; }
  .global-search.is-open .mobile-search-toggle { display: none; }
  .global-search.is-open .search-leading-icon, .global-search.is-open input { display: block; }
  .page { padding: 26px 16px 72px; }
  .hero-head { align-items: flex-start; flex-direction: column; }
  .hero-head h1, .page-head h1, .deal-head h1, .id-head h1 { font-size: 34px; }
  .business-stat-grid, .qualification-grid, .quick-route-grid, .overview-grid, .system-grid, .journey-status-grid { grid-template-columns: 1fr; }
  .business-stat { min-height: 132px; }
  .grade-band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qualification-shell { padding: 18px; }
  .section-title-row { align-items: flex-start; flex-direction: column; }
  .section-jumps { top: 64px; margin-inline: -4px; }
  .id-funnel { padding: 14px; }
  .fn-row, .fn-keep { grid-template-columns: 64px 1fr 38px; gap: 9px; }
  .fn-n { font-size: 25px; }
  .ps { grid-template-columns: 42px 1fr; }
  .ps-n { font-size: 28px; }
  .ps-go { grid-column: 1 / -1; }
  .insp { min-width: 720px; }
  .inspect { overflow-x: auto; }
  .banner-huge, .banner-live { padding-inline: 16px; text-align: left; }
}


.score-architecture {
  margin: 0 0 24px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.score-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr) 26px minmax(0, 1fr) 26px minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
}
.score-step {
  position: relative;
  min-height: 220px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  box-shadow: inset 0 4px 0 currentColor;
}
.score-step::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -34px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: currentColor;
  opacity: .07;
}
.score-step-number {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 9px;
  color: #fff;
  background: currentColor;
  font-size: 11px;
  font-weight: 800;
}
.score-step .kicker { color: currentColor; }
.score-step h3 { margin: 0; color: var(--ink); font-size: 17px; letter-spacing: -.025em; }
.score-step > strong { display: block; margin-top: 11px; color: currentColor; font-size: 23px; letter-spacing: -.035em; }
.score-step p:last-child { margin: 10px 0 0; color: var(--ink-3); font-size: 12px; line-height: 1.48; }
.score-step-coral { color: var(--coral); background: linear-gradient(145deg, #fff 55%, var(--coral-soft)); }
.score-step-amber { color: var(--amber); background: linear-gradient(145deg, #fff 55%, var(--amber-soft)); }
.score-step-blue { color: var(--accent); background: linear-gradient(145deg, #fff 55%, var(--accent-soft)); }
.score-step-violet { color: var(--violet); background: linear-gradient(145deg, #fff 55%, var(--violet-soft)); }
.score-arrow { display: grid; place-items: center; color: #98A2B3; font-size: 22px; }

.closer-hero { background: linear-gradient(135deg, #fff 68%, var(--violet-soft)); border: 1px solid #E5D8FF; border-radius: 18px; padding: 24px; box-shadow: var(--shadow-sm); }
.desk-count { display: inline-flex; align-items: baseline; gap: 5px; padding: 8px 12px; border-radius: 999px; color: #5B21B6; background: var(--violet-soft); font-size: 12px; }
.desk-count strong { font-size: 18px; }
.deal-jumps { margin-top: 18px; }

@media (max-width: 1180px) {
  .score-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .score-arrow { display: none; }
}

@media (max-width: 720px) {
  .score-architecture { padding: 18px; }
  .score-flow { grid-template-columns: 1fr; }
  .score-step { min-height: 0; }
}


.asset-hero { background: linear-gradient(135deg, #fff 62%, var(--coral-soft)); border: 1px solid #FFD8DE; border-radius: 18px; padding: 24px; box-shadow: var(--shadow-sm); }
.asset-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 16px; }
.asset-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 22px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.asset-rules > div { display: grid; grid-template-columns: 10px 1fr; gap: 2px 8px; align-items: center; }
.asset-rules strong { color: var(--ink); font-size: 12px; }
.asset-rules small { grid-column: 2; color: var(--ink-3); font-size: 10px; }
.channel-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.channel-email { color: var(--accent); }
.channel-sms { color: var(--coral); }
.channel-whatsapp { color: var(--violet); }
.asset-library { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: 24px; }
.asset-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); transition: transform .16s ease, box-shadow .16s ease; }
.asset-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.asset-preview { height: 122px; display: grid; place-items: center; color: #fff; font-size: 25px; font-weight: 800; letter-spacing: -.04em; }
.asset-photo .asset-preview { background: linear-gradient(135deg, var(--coral), #FB7185); }
.asset-brochure .asset-preview { background: linear-gradient(135deg, var(--accent), #60A5FA); }
.asset-video .asset-preview { background: linear-gradient(135deg, var(--violet), #A78BFA); }
.asset-body { padding: 16px; }
.asset-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.asset-kind { color: var(--ink-3); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.asset-status { padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.status-approved { color: #5B21B6; background: var(--violet-soft); }
.status-ready { color: var(--accent-ink); background: var(--accent-soft); }
.status-pending-url { color: #92400E; background: var(--amber-soft); }
.status-draft { color: #92400E; background: var(--amber-soft); }
.status-retired { color: var(--ink-3); background: #F2F4F7; }
.asset-body h2 { margin: 11px 0 0; font-size: 16px; letter-spacing: -.025em; }
.asset-body > p { margin: 6px 0 0; color: var(--ink-3); font-size: 11px; line-height: 1.45; }
.asset-channels { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 13px; }
.channel-chip { padding: 5px 7px; border-radius: 7px; font-size: 9px; font-weight: 800; }
.channel-chip.channel-email { color: var(--accent-ink); background: var(--accent-soft); }
.channel-chip.channel-sms { color: #BE123C; background: var(--coral-soft); }
.channel-chip.channel-whatsapp { color: #5B21B6; background: var(--violet-soft); }
.asset-missing { margin-top: 14px !important; padding: 8px 10px; border-radius: 8px; color: #92400E !important; background: var(--amber-soft); font-weight: 700; }
.asset-gaps { border-left: 4px solid var(--amber); }
.asset-gaps ul { color: var(--ink-2); }

@media (max-width: 1180px) {
  .asset-library { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .asset-library, .asset-summary-grid, .asset-rules { grid-template-columns: 1fr; }
}


/* CRM-native Product Quote system -------------------------------------- */
.quote-workspace,.quote-library,.quote-detail-page{max-width:1540px;margin:0 auto}.quote-hero,.quote-library-hero,.quote-detail-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;background:linear-gradient(135deg,#fff 0%,#f4f7ff 70%,#eef2ff 100%);border-color:#cbd5ff}.quote-hero-actions{display:flex;flex-wrap:wrap;gap:10px}.quote-assurance{display:flex;align-items:center;gap:18px;margin:14px 0 20px;padding:13px 18px;border:1px solid #bfdbfe;border-left:4px solid #2563eb;border-radius:12px;background:#eff6ff;color:#1e3a8a;font-size:13px}.quote-assurance span:last-child{margin-left:auto}.quote-builder-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start}.quote-builder-main{display:grid;gap:20px}.quote-builder-side{position:sticky;top:92px;display:grid;gap:16px}.quote-section{padding:24px}.quote-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}.quote-section-head>div{display:flex;align-items:center;gap:12px}.quote-section-head h2{margin:0}.quote-section-head>p{max-width:520px;margin:3px 0 0;color:var(--muted);font-size:13px;text-align:right}.step-number{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#111827;color:#fff;font-weight:800}.quote-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.quote-span-2{grid-column:span 2}.quote-product-toolbar{display:grid;grid-template-columns:280px 1fr;gap:14px;margin-bottom:18px}.quote-model-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-height:520px;overflow:auto;padding:2px}.quote-model-card{display:grid;grid-template-rows:126px 1fr;padding:0;overflow:hidden;border:1px solid #dbe2ee;border-radius:14px;background:#fff;color:#111827;text-align:left;cursor:pointer;transition:.16s ease}.quote-model-card:hover{transform:translateY(-1px);border-color:#8aa2ff;box-shadow:0 8px 22px rgb(37 99 235 / 12%)}.quote-model-card.is-selected{border:2px solid #2563eb;box-shadow:0 0 0 3px rgb(37 99 235 / 12%)}.quote-model-card img,.quote-model-placeholder{width:100%;height:126px;object-fit:cover;background:#eef2ff}.quote-model-placeholder{display:grid;place-items:center;font-size:34px;font-weight:900;color:#3730a3}.quote-model-card-copy{display:grid;gap:4px;padding:12px}.quote-model-card-copy strong{font-size:14px}.quote-model-card-copy small{color:var(--muted)}.quote-model-card-copy b{margin-top:5px;color:#1d4ed8;font-size:13px}.selected-product-empty{padding:36px;border:1px dashed #cbd5e1;border-radius:14px;background:#f8fafc;color:#64748b;text-align:center}.selected-product-card{display:grid;grid-template-columns:minmax(220px,34%) 1fr;gap:24px;margin-bottom:22px;padding:18px;border:1px solid #dbeafe;border-radius:16px;background:#f8fbff}.selected-product-card>img{width:100%;height:260px;object-fit:cover;border-radius:12px}.selected-product-card h3{margin:4px 0 8px;font-size:24px}.selected-product-card ul{columns:2;margin:14px 0 0;padding-left:20px;color:#334155;font-size:13px}.selected-product-card li{break-inside:avoid;margin:0 0 7px}.quote-only-price{margin:0 0 22px;padding:16px;border:1px solid #fbbf24;border-radius:12px;background:#fffbeb;color:#78350f}.quote-only-price .field{max-width:280px;margin-top:12px}.quote-subhead{margin:22px 0 12px;font-size:15px}.quote-extras-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.quote-extra-card{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:start;padding:14px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.quote-extra-card input{margin-top:3px;accent-color:#2563eb}.quote-extra-card span{display:grid;gap:4px}.quote-extra-card small{color:var(--muted)}.quote-extra-card b{color:#1d4ed8;font-size:13px;white-space:nowrap}.quote-inline-heading{display:flex;align-items:center;justify-content:space-between}.quote-custom-lines{display:grid;gap:9px;margin-bottom:18px}.quote-custom-line{display:grid;grid-template-columns:1fr 1.4fr 180px 38px;gap:10px;align-items:end}.quote-remove-line{height:42px;border:0;border-radius:9px;background:#fee2e2;color:#b91c1c;font-size:23px;cursor:pointer}.quote-summary-card{padding:22px;border-top:4px solid #2563eb}.quote-summary-card h2{margin:4px 0 18px}.quote-summary-lines{display:grid;gap:10px;padding-bottom:16px;border-bottom:1px solid #e2e8f0}.quote-summary-lines>div{display:flex;justify-content:space-between;gap:12px;font-size:13px}.quote-summary-lines span{color:#475569}.quote-totals{display:grid;gap:9px;margin:18px 0}.quote-totals>div{display:flex;justify-content:space-between;gap:18px}.quote-totals dt{color:#64748b}.quote-totals dd{margin:0;font-weight:700}.quote-grand-total{margin-top:7px;padding-top:14px;border-top:2px solid #111827;color:#111827;font-size:17px}.quote-save{width:100%;justify-content:center}.quote-save-note{margin:10px 0 0;color:#64748b;font-size:11px;text-align:center}.form-error{padding:10px;border-radius:8px;background:#fff1f2;color:#be123c;font-size:13px}.quote-template-card ul{padding-left:20px;color:#475569}.quote-template-card li{margin:8px 0}.quote-library-controls{margin:18px 0}.quote-library-search{display:grid;grid-template-columns:minmax(280px,1fr) auto auto;gap:12px;align-items:end}.quote-library-table-wrap{padding:22px}.quote-table-scroll{overflow:auto}.quote-table{width:100%;border-collapse:collapse}.quote-table th,.quote-table td{padding:13px 12px;border-bottom:1px solid #e2e8f0;text-align:left;vertical-align:top}.quote-table th{color:#64748b;font-size:11px;text-transform:uppercase;letter-spacing:.06em}.quote-table td span{display:block;margin-top:3px;color:#64748b;font-size:12px}.quote-id{max-width:150px;overflow:hidden;text-overflow:ellipsis}.status-chip{display:inline-flex!important;width:max-content;padding:4px 8px;border-radius:999px;background:#e2e8f0!important;color:#334155!important;font-size:10px!important;font-weight:800;text-transform:uppercase}.status-prepared,.status-draft{background:#dbeafe!important;color:#1d4ed8!important}.status-accepted{background:#ede9fe!important;color:#6d28d9!important}.status-declined,.status-void{background:#fee2e2!important;color:#b91c1c!important}.quote-library-empty{padding:60px 20px;text-align:center}.quote-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;margin-top:20px;align-items:start}.quote-detail-grid>aside{display:grid;gap:16px;position:sticky;top:92px}.quote-document-preview{padding:40px}.quote-letterhead{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;padding-bottom:22px;border-bottom:4px solid #111827}.quote-letterhead>div{display:flex;align-items:center;gap:12px}.quote-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:#111827;color:#fff;font-weight:900}.quote-letterhead p{margin:0;color:#475569;font-size:12px;text-align:right}.quote-document-heading{display:flex;justify-content:space-between;gap:30px;margin:30px 0}.quote-document-heading h2{margin:4px 0 0;font-size:28px}.quote-document-heading dl{display:flex;gap:18px;margin:0}.quote-document-heading dl div{display:grid;gap:4px}.quote-document-heading dt{color:#64748b;font-size:10px;text-transform:uppercase}.quote-document-heading dd{margin:0;font-size:12px;font-weight:700}.quote-client-block{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;padding:18px;border-radius:12px;background:#f8fafc}.quote-client-block span{display:block;margin-bottom:5px;color:#64748b;font-size:10px;text-transform:uppercase}.quote-client-block p{margin:2px 0}.quote-document-image{width:100%;max-height:420px;object-fit:cover;border-radius:14px;margin-bottom:28px}.quote-document-preview section>h3{margin-top:28px}.quote-document-table{width:100%;border-collapse:collapse}.quote-document-table th,.quote-document-table td{padding:12px;border-bottom:1px solid #e2e8f0;text-align:left;vertical-align:top}.quote-document-table th:last-child,.quote-document-table td:last-child{text-align:right;white-space:nowrap}.quote-document-table p{margin:4px 0 0;color:#64748b;font-size:12px}.quote-spec-list{columns:2;padding-left:20px}.quote-spec-list li{break-inside:avoid;margin:0 0 8px}.pre-line{white-space:pre-line}.quote-document-total{display:flex;justify-content:flex-end}.quote-document-total dl{width:min(100%,390px)}.quote-document-total dl>div{display:flex;justify-content:space-between;padding:7px 0}.quote-record-card{padding:20px}.quote-version-list{display:grid;gap:8px;padding:0;list-style:none}.quote-version-list li{display:grid;gap:3px;padding:10px;border:1px solid #e2e8f0;border-radius:9px}.quote-version-list li.is-current{border-color:#2563eb;background:#eff6ff}.quote-version-list span{color:#64748b;font-size:11px}.quote-no-send{border-left:4px solid #f59e0b;background:#fffbeb}.deal-quote-panel{border-top:4px solid #2563eb}.deal-quote-actions{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0}.deal-quote-list{display:grid;gap:8px;margin-top:14px}.deal-quote-row{display:grid;grid-template-columns:1fr auto;gap:10px;padding:11px;border:1px solid #e2e8f0;border-radius:10px}.deal-quote-row span{display:block;color:#64748b;font-size:11px}
@media(max-width:1100px){.quote-builder-grid,.quote-detail-grid{grid-template-columns:1fr}.quote-builder-side,.quote-detail-grid>aside{position:static}.quote-model-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quote-hero,.quote-library-hero,.quote-detail-hero{align-items:flex-start;flex-direction:column}.quote-assurance{align-items:flex-start;flex-direction:column}.quote-assurance span:last-child{margin-left:0}}
@media(max-width:700px){.quote-field-grid,.quote-product-toolbar,.selected-product-card,.quote-client-block{grid-template-columns:1fr}.quote-span-2{grid-column:auto}.quote-model-grid{grid-template-columns:1fr}.quote-extras-grid{grid-template-columns:1fr}.quote-custom-line{grid-template-columns:1fr}.quote-custom-line .quote-remove-line{width:42px}.selected-product-card ul,.quote-spec-list{columns:1}.quote-library-search{grid-template-columns:1fr}.quote-document-preview{padding:22px}.quote-document-heading,.quote-letterhead{flex-direction:column}.quote-document-heading dl{flex-wrap:wrap}.quote-section-head{flex-direction:column}.quote-section-head>p{text-align:left}}


/* Voice-assisted, deal-linked Product Quote workflow */
.quote-voice-panel {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(320px, 1.4fr);
  gap: 24px;
  align-items: center;
  margin: 0 0 20px;
  padding: 22px;
  border-left: 4px solid #7c3aed;
  background: linear-gradient(105deg, #faf5ff, #ffffff 55%);
}
.quote-voice-panel h2 { margin: 2px 0 5px; }
.quote-voice-panel p { margin: 0; color: var(--muted); }
.quote-voice-controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}
.quote-voice-controls textarea {
  min-height: 66px;
  resize: vertical;
  border: 1px solid #d7dee9;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
}
.quote-voice-status { grid-column: 1 / -1; font-weight: 700; color: #5b21b6 !important; }
.deal-quote-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 15px 0; }
.deal-quote-list { display: grid; border-top: 1px solid #e4e9f2; }
.deal-quote-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #e4e9f2; color: #101828; text-decoration: none; }
.deal-quote-row span span { display: block; margin-top: 3px; color: #667085; font-size: .82rem; }
.deal-quote-row:hover strong:first-child { color: #2563eb; }
@media (max-width: 900px) {
  .quote-voice-panel { grid-template-columns: 1fr; }
  .quote-voice-controls { grid-template-columns: 1fr 1fr; }
  .quote-voice-controls textarea { grid-column: 1 / -1; grid-row: 1; }
}


/* Product Quote preview — white Company OS command-centre surface */
.quote-action-row {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr);
  gap: 10px;
}
.quote-action-row > * { width: 100%; }
.quote-template-lock {
  padding: 14px 16px;
  border: 1px solid #c7d7fe;
  border-radius: 12px;
  background: #f5f8ff;
}
.quote-template-lock p { margin: 4px 0 0; color: var(--muted); }
.quote-preview-dialog {
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid #d7dee9;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 80px rgb(15 23 42 / 24%);
  color: var(--ink);
}
.quote-preview-dialog::backdrop { background: rgb(15 23 42 / 54%); backdrop-filter: blur(3px); }
.quote-preview-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  border-bottom: 1px solid #e4e9f2;
  background: rgb(255 255 255 / 96%);
}
.quote-preview-toolbar h2 { margin: 2px 0 0; }
.quote-preview-content { padding: 26px; }
.quote-preview-document { max-width: 740px; margin: 0 auto; }
.quote-preview-document > h3 { margin: 18px 0; font-size: clamp(1.7rem, 4vw, 2.5rem); }
.quote-preview-document > img { width: 100%; max-height: 360px; object-fit: cover; border-radius: 14px; margin: 18px 0; }
.quote-preview-client { display: grid; gap: 3px; margin: 0 0 18px; padding: 14px; border-left: 4px solid #2563eb; background: #eff6ff; }
.quote-preview-client span, .quote-preview-client small { color: #667085; }
.quote-preview-totals { width: min(100%, 390px); margin: 18px 0 18px auto; }
.quote-preview-totals > div { display: flex; justify-content: space-between; gap: 20px; padding: 7px 0; border-bottom: 1px solid #e4e9f2; }
.quote-preview-totals > div:last-child { border-top: 2px solid #0b1220; border-bottom: 0; font-weight: 800; }
@media (max-width: 700px) {
  .quote-action-row { grid-template-columns: 1fr; }
  .quote-preview-toolbar { align-items: flex-start; }
  .quote-preview-content { padding: 18px; }
}