/* CRM uses shared brand tokens: flat tables, one toolbar, restrained state. */
.prospect-directory,
.prospect-detail,
.crm-meetings {
  max-width: none;
}
html:has(.prospect-directory) {
  scrollbar-gutter: stable;
}
.prospect-directory .page-head,
.prospect-detail .page-head,
.crm-meetings .page-head {
  justify-content: flex-start;
  gap: var(--s5);
  margin-bottom: var(--s3);
}
.prospect-directory .page-head .spacer,
.prospect-detail .page-head .spacer,
.crm-meetings .page-head .spacer {
  display: none;
}
.prospect-directory .page-head h1,
.crm-meetings .page-head h1 {
  letter-spacing: -0.02em;
}
.prospect-directory .page-head .sub {
  color: var(--ink-muted);
  margin-top: var(--s1);
}

/* CRM tabs use the one app-wide tab style (.views in app.css). */
.prospect-directory-help {
  margin: 0 0 var(--s4);
}

/* One toolbar; extra filters do not push the list down on desktop. */
.prospect-directory .crm-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--s2);
  padding: 0;
  margin: 0 0 var(--s4);
  border: 0;
  background: transparent;
  box-shadow: none;
}
.crm-list-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: 1 1 auto;
  min-width: 0;
  max-width: 480px;
}
.crm-add-prospect {
  flex: none;
}
.crm-toolbar .crm-add-prospect {
  flex: none;
  height: 38px;
  min-height: 38px;
  padding: 0 var(--s3);
  gap: var(--s2);
  white-space: nowrap;
}
.crm-view-controls {
  display: grid;
  grid-template-columns: repeat(3, var(--crm-view-control-width));
  flex: none;
  align-items: center;
  gap: var(--s2);
}
.prospect-filters--closed .crm-view-controls {
  grid-template-columns: repeat(2, var(--crm-view-control-width));
}
.crm-search {
  display: flex;
  align-items: center;
  flex: 1 1 200px;
  max-width: 320px;
  min-width: 0;
  position: relative;
}
.crm-list-actions .crm-search {
  max-width: none;
}
.crm-search .input {
  height: 38px;
  padding-left: var(--s3);
  padding-right: 40px;
  border-color: var(--rule-strong);
  background: var(--surface);
}
.crm-search .input::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}
.crm-search > button {
  display: grid;
  place-items: center;
  position: absolute;
  right: var(--s1);
  top: var(--s1);
  width: 30px;
  height: 30px;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--ink-muted);
  cursor: pointer;
}
.crm-search > button:hover {
  background: var(--well);
  color: var(--navy);
}
.crm-view-panel {
  position: relative;
  margin: 0;
}
.crm-view-panel > summary {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--btn-h);
  height: var(--btn-h);
  padding: 0 var(--s3);
  list-style: none;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.crm-view-panel > summary::-webkit-details-marker {
  display: none;
}
.crm-view-controls .crm-view-panel > summary {
  width: 100%;
}
.crm-view-panel > summary > svg:last-child {
  margin-left: auto;
  flex: none;
}
.crm-option-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--s2));
  left: 0;
  width: 240px;
  padding: var(--s2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.crm-panel-title {
  margin: 0;
  padding: var(--s2);
  color: var(--ink-muted);
  font-size: var(--t-xs);
}
.crm-view-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 38px;
  padding: var(--s2);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: var(--t-sm);
  text-decoration: none;
}
.crm-view-option > svg {
  visibility: hidden;
  flex: none;
}
.crm-view-option[aria-current='page'] {
  background: var(--crm-accent-bg);
  color: var(--navy-line);
  font-weight: 600;
}
.crm-view-option[aria-current='page'] > svg {
  visibility: visible;
}
.crm-view-option:hover {
  background: var(--well);
  color: var(--navy);
  text-decoration: none;
}
.crm-view-option[aria-current='page']:hover {
  background: var(--crm-accent-bg);
}
.crm-filter-panel {
  position: relative;
  margin: 0;
}
.crm-filter-panel > summary {
  display: inline-flex;
  gap: var(--s2);
  height: 38px;
  min-height: 38px;
  padding: 0 var(--s3);
  list-style: none;
  cursor: pointer;
}
.crm-filter-panel > summary::-webkit-details-marker {
  display: none;
}
.crm-filter-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--navy);
}
.crm-filter-options {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--s2));
  right: 0;
  width: 560px;
  max-width: calc(100vw - 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s4);
  padding: var(--s5);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.crm-filter-options .field {
  margin: 0;
}
.crm-filter-options .prospect-filters__due {
  height: 38px;
}
.crm-filter-options .prospect-filters__actions {
  grid-column: 1/-1;
  grid-row: 3;
  display: flex;
  gap: var(--s2);
}
.prospect-stage-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--s2);
  grid-column: 1/-1;
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}
.prospect-filter-chip {
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 38px;
  justify-content: center;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
}
.crm-filter-result {
  display: flex;
  gap: var(--s3);
  font-size: var(--t-sm);
  margin: 0 0 var(--s3);
  color: var(--ink-muted);
}
.crm-group-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3);
  margin: 0 0 var(--s3);
  font-size: var(--t-xs);
  color: var(--ink-muted);
}
.crm-group-tools button {
  border: 0;
  background: transparent;
  padding: var(--s1) 0;
  font: inherit;
  cursor: pointer;
}
.crm-group-tools button:first-of-type {
  margin-left: var(--s2);
}

/* One stage palette across list badges, group headings and stage controls. */
[data-crm-stage='NEW_LEAD'] {
  --crm-stage-ink: var(--crm-stage-new);
}
[data-crm-stage='BOOKED'] {
  --crm-stage-ink: var(--crm-stage-booked);
}
[data-crm-stage='MET'] {
  --crm-stage-ink: var(--crm-stage-preparing);
}
[data-crm-stage='PROPOSAL'] {
  --crm-stage-ink: var(--crm-stage-sent);
}
[data-crm-stage='ENGAGED'] {
  --crm-stage-ink: var(--crm-stage-won);
}
[data-crm-stage='LOST'] {
  --crm-stage-ink: var(--crm-stage-lost);
}
[data-crm-stage] {
  --crm-stage-bg: color-mix(in srgb, var(--crm-stage-ink) 10%, var(--surface));
  --crm-stage-line: color-mix(in srgb, var(--crm-stage-ink) 28%, var(--surface));
}
.pill.crm-status-badge {
  --mark: var(--crm-stage-ink);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s2);
  box-sizing: border-box;
  width: var(--crm-status-width);
  min-width: var(--crm-status-width);
  max-width: var(--crm-status-width);
  height: var(--crm-status-height);
  padding: 0 var(--s3);
  border: 1px solid var(--crm-stage-line);
  border-radius: var(--r-sm);
  background: var(--crm-stage-bg);
  color: var(--crm-stage-ink);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: var(--lh-tight);
  white-space: nowrap;
}

/* One flat list, with generous name space and quiet group dividers. */
.prospect-directory .prospect-grid,
.crm-meetings .grid-wrap {
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  box-shadow: none;
}
.prospect-grid table.grid {
  table-layout: fixed;
  width: 100%;
}
.prospect-grid table.grid th,
.prospect-grid table.grid td {
  padding: var(--s3) var(--s4);
}
/* Table heads match every other table (app.css). */
.prospect-grid table.grid thead th:first-child {
  width: 36%;
}
.prospect-grid table.grid thead th:last-child {
  width: 15%;
}
.prospect-grid--statuses table.grid thead th:first-child {
  width: 30%;
}
.prospect-grid table.grid .crm-status-column,
.prospect-grid .prospect-cell--status {
  width: calc(var(--crm-status-width) + 2 * var(--s4));
}
.prospect-grid .crm-group-row th {
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-sm);
  font-weight: 650;
  padding: var(--s2) var(--s4);
  background: var(--crm-accent-bg);
  color: var(--navy-line);
  border-top: 1px solid var(--crm-accent-line);
  border-bottom: 1px solid var(--crm-accent-line);
  box-shadow: inset 3px 0 var(--gold-deep);
}
/* Group bands stay neutral; the stage color is carried by a small dot. */
.prospect-grid .crm-group-row[data-crm-stage] th {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--rule);
  box-shadow: none;
}
.crm-group-toggle {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  border: 0;
  padding: var(--s1) 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.crm-group-toggle > svg {
  flex: none;
}
.crm-group-toggle[aria-expanded='false'] > svg {
  transform: rotate(-90deg);
}
.prospect-grid tr[hidden] {
  display: none !important;
}
.crm-group-count {
  color: inherit;
  font-weight: 400;
  margin-left: var(--s2);
  font-variant-numeric: tabular-nums;
}
.prospect-grid table.grid tbody td {
  vertical-align: middle;
  height: 72px;
  border-bottom: 1px solid var(--rule);
  white-space: normal;
}
.prospect-grid table.grid tbody td.cell-date {
  white-space: nowrap;
  font-size: var(--t-xs);
  color: var(--ink-muted);
}
.prospect-grid table.grid tbody tr:not(.crm-group-row):hover td {
  background: var(--crm-hover-bg);
}
.prospect-grid table.grid tbody tr.is-overdue td:first-child {
  box-shadow: none;
}
.prospect-grid .prospect-cell--name,
.prospect-grid .crm-next-action {
  width: auto;
}
.prospect-grid table.grid td:not(.prospect-cell--name) {
  min-width: 0;
}
.prospect-grid .prospect-cell--name > a {
  display: block;
  color: var(--navy);
  font-weight: 600;
  line-height: var(--lh);
  overflow-wrap: anywhere;
}
.crm-prospect-meta {
  display: block;
  margin-top: var(--s1);
  color: var(--ink-muted);
  font-size: var(--t-xs);
  overflow-wrap: anywhere;
  line-height: var(--lh);
}
.crm-owner-avatar {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: var(--s2);
  border-radius: var(--r-pill);
  background: var(--navy-line);
  color: var(--surface);
  font-size: var(--t-xs);
  font-weight: 600;
  vertical-align: middle;
}
.crm-owner > span:last-child {
  vertical-align: middle;
  font-size: var(--t-sm);
}
.crm-action-text {
  display: block;
  color: var(--ink);
  white-space: normal;
  line-height: var(--lh);
  margin-bottom: var(--s1);
}
.crm-next-action .crm-action-text {
  font-size: var(--t-sm);
}
.crm-followup-date {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-xs);
  color: var(--ink-muted);
}
.crm-followup-date.overdue {
  color: var(--bad);
}
.crm-date-label {
  font-weight: 600;
}
/* How many follow-ups are due, beside the filter that shows them (the
   loose count line under the table is gone, 5 Oct 2026). */
.prospect-filters__due .n {
  min-width: 20px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--bad-bg);
  color: var(--bad);
  font-size: var(--t-xs);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Detail pages use the same flat, full-width section rhythm. */
.prospect-detail .card {
  box-shadow: none;
  border-color: var(--rule-strong);
}
.crm-record-surface {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
}
.crm-record-surface > .card {
  max-width: none;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
}
.crm-record-surface > .card:last-child {
  border-bottom: 0;
}
.prospect-detail .crm-record-surface .card__head {
  padding: var(--s5) var(--s5) var(--s3);
  border-bottom: 0;
  background: transparent;
}
.prospect-detail .crm-record-surface .card__body {
  padding: 0 var(--s5) var(--s5);
}
.prospect-detail .prospect-remove {
  margin-top: var(--s4);
}
.prospect-detail .card__head {
  background: var(--surface);
  padding: var(--s4) var(--s5);
}
.prospect-detail .card__body {
  padding: var(--s4) var(--s5);
}
.prospect-detail .card__head .hint {
  font-size: var(--t-xs);
}
.prospect-detail .flag--bad {
  color: var(--bad);
}
.prospect-detail input::placeholder,
.prospect-detail textarea::placeholder,
.crm-meetings input::placeholder {
  color: var(--ink-muted);
}
/* Stage buttons size to their labels instead of splitting the card into four
   wide blocks (29 Sep 2026). */
/* Five equal steps, the last one Won (6 Oct 2026): a row of peer choices
   reads as one control only when the steps are the same width. */
.prospect-stage-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 880px;
  gap: var(--s2);
}
.prospect-stage-button {
  justify-content: center;
  gap: var(--s1);
  padding: 0 10px;
  min-height: 44px;
  border-color: var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--t-sm);
  font-weight: 500;
}
.prospect-stage-button[data-crm-stage],
.prospect-filter-chip[data-crm-stage] {
  background: var(--crm-stage-bg);
  border-color: var(--crm-stage-line);
  color: var(--crm-stage-ink);
}
.prospect-stage-button[data-crm-stage]:not([aria-pressed='true']):hover:not(:disabled),
.prospect-filter-chip[data-crm-stage]:not([aria-pressed='true']):hover {
  background: var(--crm-stage-bg);
  border-color: var(--crm-stage-ink);
}
.prospect-stage-button[data-crm-stage][aria-pressed='true'],
.prospect-filter-chip[data-crm-stage][aria-pressed='true'] {
  background: var(--crm-stage-ink);
  border-color: var(--crm-stage-ink);
  color: var(--surface);
  box-shadow: none;
}
.prospect-stage-button[data-crm-stage][aria-pressed='true']:hover:not(:disabled),
.prospect-filter-chip[data-crm-stage][aria-pressed='true']:hover {
  background: var(--crm-stage-ink);
  border-color: var(--crm-stage-ink);
  color: var(--surface);
}
.prospect-stage-help {
  margin: var(--s2) 0 0;
  font-size: var(--t-xs);
}
.prospect-outcomes {
  gap: var(--s2);
}
.prospect-outcomes > form > .btn,
.prospect-outcomes > details > summary {
  min-width: 124px;
  height: 38px;
  justify-content: center;
}
.prospect-outcomes .help {
  flex-basis: auto;
  margin-left: var(--s2);
  font-size: var(--t-xs);
}
.prospect-detail .prospect-outcomes .btn--remove {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--rule-strong);
}
.crm-followup-form {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) minmax(160px, 1fr) auto;
  align-items: end;
  gap: var(--s3);
}
.crm-followup-form .field {
  margin: 0;
}
.crm-followup-form .btn {
  height: 38px;
}
.crm-followup-form .input,
.crm-followup-form .select {
  height: 38px;
  min-height: 38px;
}
.crm-followup-guidance {
  grid-column: 1/-1;
  margin: 0;
  font-size: var(--t-xs);
}
#prospect-followup:empty,
#prospect-followup[hidden] {
  display: none;
}
.crm-followup-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.crm-followup-list li {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(180px, 2fr) auto;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4);
  border-bottom: 1px solid var(--rule);
}
.crm-followup-list li:last-child {
  border-bottom: 0;
}
.crm-followup-list a {
  font-weight: 600;
}
.crm-desk-followups .card__head {
  gap: var(--s4);
}

/* Meetings belong to the same workspace. */
.crm-meetings .grid th,
.crm-meetings .grid td {
  vertical-align: middle;
  padding: var(--s3) var(--s4);
}
.crm-meetings .grid thead th {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-sm);
}
.crm-meetings .card {
  max-width: 1100px;
  box-shadow: none;
}
.crm-classify-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.crm-classify-options label {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.crm-classify-options label:has(input:checked) {
  background: var(--crm-accent-bg);
  border-color: var(--crm-accent-line);
  color: var(--navy);
}
.crm-meeting-actions {
  display: flex;
  gap: var(--s2);
  align-items: center;
  flex-wrap: wrap;
}
.crm-meeting-actions .btn {
  min-width: 112px;
  justify-content: center;
}
.crm-meeting-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin: var(--s2) 0 var(--s4);
  color: var(--ink-muted);
}
.crm-meetings .field {
  max-width: 640px;
}
.crm-meetings #meeting-review {
  max-width: 820px;
}
#meeting-review .field {
  max-width: none;
}
#meeting-review .help {
  margin: var(--s2) 0 var(--s4);
}
#meeting-review .crm-meeting-actions {
  margin-top: var(--s3);
}
.crm-meeting-state {
  display: inline-block;
  padding: var(--s1) var(--s2);
  background: var(--well);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
}
.crm-meeting-search {
  margin: 0 0 var(--s4);
}
.crm-meeting-search .field {
  margin: 0;
  flex: 1;
  max-width: 360px;
}
.crm-meeting-search .btn {
  height: 38px;
}
.crm-connection-note {
  margin: 0 0 var(--s3);
  color: var(--ink-muted);
  font-size: var(--t-sm);
}
.crm-meeting-pagination {
  margin-top: var(--s3);
  font-size: var(--t-xs);
  color: var(--ink-muted);
}
.crm-meeting-guidance {
  margin: var(--s2) 0 0;
  max-width: 80ch;
  font-size: var(--t-xs);
  color: var(--ink-muted);
}

@media (max-width: 1050px) {
  .crm-followup-form {
    grid-template-columns: 1fr 1fr;
  }
  .prospect-grid table.grid {
    table-layout: auto;
  }
  .crm-owner-avatar {
    display: none;
  }
  .crm-prospect-source {
    display: none;
  }
}
/* Deliberate two-row toolbar when narrow: add/search, then three equal controls. */
@media (max-width: 960px) {
  .prospect-directory .crm-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .crm-list-actions,
  .crm-list-actions .crm-search {
    max-width: none;
  }
  .crm-view-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .prospect-filters--closed .crm-view-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .prospect-directory .page-head,
  .crm-meetings .page-head {
    flex-wrap: wrap;
    gap: var(--s3);
  }
  .crm-tabs.views {
    gap: var(--s4);
  }
  .prospect-directory .crm-toolbar {
    position: relative;
  }
  .crm-list-actions .crm-search {
    flex: 1 1 0;
    max-width: none;
  }
  .crm-view-controls {
    gap: var(--s2);
  }
  .crm-view-panel {
    position: static;
  }
  .crm-view-panel > summary {
    padding: 0 var(--s2);
  }
  .crm-option-panel {
    left: 0;
    right: 0;
    width: 100%;
  }
  .crm-filter-panel {
    position: static;
  }
  .crm-filter-options {
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    padding: var(--s4);
    grid-template-columns: 1fr;
  }
  .crm-filter-options .prospect-filters__actions {
    grid-row: 4;
  }
  .prospect-stage-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .prospect-directory .prospect-grid {
    border: 0;
  }
  .prospect-grid table.grid tbody {
    gap: 0;
  }
  .prospect-grid table.grid tbody tr {
    border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: none;
    padding: var(--s4);
  }
  .prospect-grid table.grid tbody tr.is-overdue {
    box-shadow: none;
  }
  .prospect-grid table.grid tbody tr.crm-group-row {
    display: block;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .prospect-grid table.grid .crm-group-row th {
    display: block;
    width: 100%;
    padding: var(--s3) var(--s4);
  }
  .prospect-grid table.grid tbody td,
  .prospect-grid table.grid tbody td:first-child {
    height: auto;
    padding: 0;
    border: 0;
  }
  .prospect-grid table.grid tbody td:not(.prospect-cell--name)::before {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
  }
  .prospect-grid table.grid tbody td.prospect-cell--name {
    padding-bottom: var(--s2);
  }
  .prospect-grid table.grid tbody td.prospect-cell--status {
    grid-column: 1/-1;
    width: auto;
  }
  .crm-followup-list li {
    grid-template-columns: 1fr auto;
    gap: var(--s2);
  }
  .crm-followup-list li > span {
    grid-column: 1/-1;
    grid-row: 2;
  }
  .crm-followup-form,
  .crm-classify-options {
    grid-template-columns: 1fr;
  }
  .prospect-detail .card__head,
  .prospect-detail .card__body {
    padding: var(--s4);
  }
  .prospect-outcomes .help {
    flex-basis: 100%;
    margin-left: 0;
  }
  .prospect-status__actions.prospect-outcomes > form,
  .prospect-status__actions.prospect-outcomes > details:not([open]) {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .prospect-status__actions.prospect-outcomes > form > .btn,
  .prospect-status__actions.prospect-outcomes > details > summary {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 380px) {
  .crm-view-controls .crm-view-panel > summary > svg:first-child {
    display: none;
  }
}
.prospect-grid .crm-group-row[data-crm-stage] .crm-group-toggle > svg {
  order: -2;
}

/* One button style: the view controls are ordinary gray buttons, applied or
   not (26 Sep 2026: no white outlined buttons). */
.crm-view-panel > summary,
.crm-filter-panel > summary,
.crm-view-panel > summary.is-applied,
.crm-filter-panel[open] > summary {
  border-color: transparent;
  background: var(--btn-bg);
  color: var(--ink);
}
.crm-view-panel > summary:hover,
.crm-filter-panel > summary:hover {
  background: var(--btn-bg-hover);
}
.crm-filter-panel > summary.is-applied {
  color: var(--navy);
}

/* ---------------------------------------------------------------------------
   Color pass (Daniel, 6 Oct 2026: "completely devoid of color, look at
   Airtable or Monday"). Every stage has its own color, carried by the
   pipeline tiles, a filled status cell, the board columns and the stage
   buttons on a prospect. Labels are always written, so color is never the
   only signal. Meetings is a tab of this screen, not a separate page.
   ------------------------------------------------------------------------ */
[data-crm-stage] {
  --crm-stage-tint: color-mix(in srgb, var(--crm-stage-ink) 9%, var(--surface));
}

/* Pipeline tiles: the My desk tiles, in each stage's color. */
.crm-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: var(--s4) 0 var(--s4);
}
.crm-kpi[data-crm-stage]:not(.kpi--zero) {
  --tone: var(--crm-stage-ink);
  --tone-bg: var(--crm-stage-tint);
  --tone-ink: var(--crm-stage-ink);
}
.crm-kpi {
  min-height: 84px;
  text-decoration: none;
}
.crm-kpi:hover {
  text-decoration: none;
}
.crm-kpi[aria-current] {
  outline: 2px solid var(--tone);
  outline-offset: -2px;
}
.crm-kpi__due {
  color: var(--bad);
  font-weight: 600;
}

/* Table or board. */
.prospect-directory .crm-toolbar .crm-layout {
  display: inline-flex;
  flex: none;
  padding: 3px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  background: var(--surface);
}
.crm-layout__option {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 30px;
  padding: 0 var(--s3);
  border-radius: var(--r-sm);
  color: var(--ink-muted);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
}
.crm-layout__option:hover {
  color: var(--navy);
  text-decoration: none;
}
.crm-layout__option[aria-current] {
  background: var(--navy);
  color: var(--n-00);
}

/* Filled status cell, as on a Monday board. */
.crm-table table.grid td.prospect-cell--status {
  padding: var(--s2) var(--s3);
}
.crm-status-fill {
  --fill-ink: var(--crm-stage-ink, var(--n-60));
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 var(--s3);
  border-radius: 999px;
  background: color-mix(in srgb, var(--fill-ink) 14%, var(--surface));
  color: color-mix(in srgb, var(--fill-ink) 85%, #000);
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
}
.prospect-grid.crm-table table.grid thead th.crm-status-column {
  width: 176px;
}
/* Columns are sized to what they hold; the spare width goes to the last
   column instead of stretching the name and client setup (7 Oct 2026). */
.prospect-grid.crm-table table.grid thead th.crm-col-name {
  width: 280px;
}
.prospect-grid.crm-table table.grid thead th.crm-col-setup {
  width: 170px;
}
.prospect-grid.crm-table table.grid thead th.crm-col-source {
  width: 150px;
}
.prospect-grid.crm-table table.grid thead th.crm-col-owner {
  width: 150px;
}
.prospect-grid.crm-table table.grid thead th.crm-col-next {
  width: 220px;
}
.prospect-grid.crm-table table.grid thead th.crm-col-activity {
  width: auto;
}
.prospect-grid.crm-table table.grid thead th.crm-col-reason {
  width: 240px;
}
.prospect-grid.crm-table table.grid thead th.crm-col-wanted ~ th.crm-col-activity {
  width: 120px;
}
/* What they wanted (Won and Lost): one line, the rest on hover. */
.crm-wanted {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.crm-table .none {
  color: var(--ink-muted);
  font-size: var(--t-sm);
}
.crm-table .prospect-cell--name a {
  font-weight: 650;
  color: var(--navy);
}
.crm-table tbody tr:not(.crm-group-row):hover td {
  background: var(--crm-hover-bg);
}

/* Group headings take their stage color. */
.prospect-grid .crm-group-row[data-crm-stage] th,
.prospect-grid .crm-group-row[data-crm-due] th {
  background: var(--surface);
  padding-top: var(--s3);
  padding-bottom: var(--s2);
}
.crm-group-row[data-crm-stage] .crm-group-title {
  color: var(--crm-stage-ink);
  font-size: var(--t-base);
  font-weight: 700;
}
.prospect-grid .crm-group-row[data-crm-stage] .crm-group-count {
  min-width: 22px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--crm-stage-tint);
  color: var(--crm-stage-ink);
  font-weight: 700;
  text-align: center;
}
.crm-group-row[data-crm-due='overdue'] .crm-group-title {
  color: var(--bad);
}
.crm-group-row[data-crm-due='today'] .crm-group-title {
  color: var(--gold-ink);
}
.crm-group-row[data-crm-stage] .crm-group-toggle > svg {
  color: var(--crm-stage-ink);
}

/* Source tags, as in Airtable. */
.crm-source {
  --tag: var(--n-60);
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 24px;
  padding: 0 var(--s2);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--tag) 13%, var(--surface));
  color: color-mix(in srgb, var(--tag) 82%, var(--ink));
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-source--referral {
  --tag: #177545;
}
.crm-source--website {
  --tag: #2f62c8;
}
.crm-source--calendly-booking {
  --tag: #6a4bc9;
}
.crm-source--cold-email {
  --tag: #b45309;
}
.crm-source--existing-client {
  --tag: #0d7f74;
}

/* Owner avatars: one color per person. */
.crm-avatar {
  --avatar: var(--navy);
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--avatar);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.crm-avatar--1 {
  --avatar: #2f62c8;
}
.crm-avatar--2 {
  --avatar: #6a4bc9;
}
.crm-avatar--3 {
  --avatar: #0d7f74;
}
.crm-avatar--4 {
  --avatar: #b45309;
}
.crm-avatar--5 {
  --avatar: #be185d;
}
.crm-avatar--empty {
  --avatar: transparent;
  border: 1.5px dashed color-mix(in srgb, var(--ink-muted) 60%, var(--surface));
}
.crm-table .crm-owner {
  display: table-cell;
}
.crm-table .crm-owner > * {
  vertical-align: middle;
}
.crm-table .crm-owner .crm-avatar {
  margin-right: var(--s2);
}

/* Follow-up dates. */
.crm-due {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  height: 22px;
  padding: 0 var(--s2);
  border-radius: var(--r-sm);
  background: var(--n-10);
  color: var(--ink);
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
}
.crm-due--late {
  background: var(--bad-bg);
  color: var(--bad);
}
.crm-due--today {
  background: var(--warn-bg);
  color: var(--gold-ink);
}
.crm-due--soon {
  background: #e8effb;
  color: #1f4f9e;
}
.crm-due--none {
  border: 1px dashed var(--rule-strong);
  background: none;
  color: var(--ink-muted);
  text-decoration: none;
}
.crm-due--none:hover {
  border-color: var(--ink-muted);
  color: var(--ink);
}
.crm-table .crm-next-action {
  line-height: 1.35;
}
.crm-table .crm-next-action .crm-action-text {
  display: block;
  margin-bottom: 3px;
}

/* Board. */
.crm-board__message {
  margin: 0 0 var(--s3);
}
.crm-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: var(--s3);
  align-items: start;
  overflow-x: auto;
  padding-bottom: var(--s2);
}
.crm-column {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-height: 220px;
  padding: var(--s2);
  border-radius: 12px;
  background: color-mix(in srgb, var(--crm-stage-ink) 5%, var(--n-10));
  transition: box-shadow 0.12s;
}
.crm-column.is-over {
  box-shadow: inset 0 0 0 2px var(--crm-stage-ink);
}
.crm-column__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: 8px;
  background: var(--crm-stage-ink);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 700;
}
.crm-column__count {
  min-width: 22px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.22);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.crm-column__cards {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.crm-column__empty {
  margin: 0;
  padding: var(--s4) var(--s2);
  border: 1px dashed color-mix(in srgb, var(--crm-stage-ink) 30%, var(--surface));
  border-radius: 10px;
  color: var(--ink-muted);
  font-size: var(--t-sm);
  text-align: center;
}
.crm-card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(10 34 64 / 0.06);
  cursor: grab;
  transition:
    box-shadow 0.12s,
    transform 0.12s;
}
.crm-card:hover {
  box-shadow: 0 4px 12px rgb(10 34 64 / 0.1);
}
.crm-card.is-dragging {
  opacity: 0.45;
}
.crm-card.is-saving {
  opacity: 0.6;
  pointer-events: none;
}
.crm-card__name {
  color: var(--navy);
  font-size: var(--t-base);
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
}
.crm-card__name:hover {
  text-decoration: underline;
}
.crm-card__note {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--ink-muted);
  font-size: var(--t-sm);
  line-height: 1.4;
}
.crm-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s2);
}
.crm-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--rule);
}
.crm-card__next {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: var(--t-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Meetings tab. */
.crm-meeting-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s4) 0;
}
.crm-meeting-toolbar .crm-search {
  flex: 0 1 320px;
}
.crm-meeting-toolbar .crm-add-prospect {
  height: 38px;
  gap: var(--s2);
  white-space: nowrap;
}
[data-meeting='review'],
[data-meeting='rescheduled'] {
  --meeting: #b45309;
}
[data-meeting='prospect'] {
  --meeting: #2f62c8;
}
[data-meeting='client'] {
  --meeting: #177545;
}
[data-meeting='ignored'],
[data-meeting='canceled'] {
  --meeting: #6f747d;
}
.crm-status-fill[data-meeting] {
  --fill-ink: var(--meeting);
}
.crm-meetings .crm-when {
  display: block;
  margin-bottom: 3px;
}
.crm-tabs__review {
  background: var(--warn-bg) !important;
  color: var(--gold-ink) !important;
}

@media (max-width: 1100px) {
  .crm-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .crm-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .crm-meeting-toolbar {
    flex-wrap: wrap;
  }
  .crm-meeting-toolbar .crm-search {
    margin-left: 0;
    max-width: none;
    flex: 1 1 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .crm-card,
  .crm-column {
    transition: none;
  }
}

.crm-panel-actions {
  margin-top: var(--s1);
  padding-top: var(--s1);
  border-top: 1px solid var(--rule);
}
.crm-panel-actions .crm-view-option {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-sm);
  text-align: left;
  cursor: pointer;
}
.prospect-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s1);
}

.crm-meeting-toolbar .crm-view-panel > summary {
  height: 38px;
}
.crm-meeting-toolbar .crm-view-panel .n {
  padding: 0 6px;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
}
.crm-meeting-list {
  margin: 0;
  padding: var(--s1) var(--s5) var(--s3);
  list-style: none;
}
.crm-meeting-list li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  padding: var(--s3) 0;
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm);
}
.crm-meeting-list li:first-child {
  border-top: 0;
}
.crm-meeting-list__title {
  color: var(--navy);
  font-weight: 650;
}
.crm-meeting-list__when {
  color: var(--ink-muted);
}
.crm-add-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: var(--s5);
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 18px 60px color-mix(in srgb, var(--navy) 22%, transparent);
}
.crm-add-dialog::backdrop {
  background: color-mix(in srgb, var(--navy) 40%, transparent);
}
.crm-add-dialog h2 {
  margin: 0 0 var(--s4);
  font-size: var(--t-md);
}
.crm-add-dialog__actions {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s2);
}
/* The dialog shows in place only if JavaScript is off. */
.crm-add-dialog:not([open])[data-open] {
  display: block;
  position: static;
}

@media (max-width: 860px) {
  .prospect-stage-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Contact card at the top of a prospect (6 Oct 2026). */
.prospect-contact__facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, auto));
  justify-content: start;
  gap: var(--s3) var(--s7);
  margin: 0;
}
.prospect-contact__facts > div {
  min-width: 0;
}
.prospect-contact__facts dt {
  margin-bottom: var(--s1);
  color: var(--ink-muted);
  font-size: var(--t-xs);
  font-weight: 600;
}
.prospect-contact__facts dd {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 26px;
  margin: 0;
  font-size: var(--t-sm);
  overflow-wrap: anywhere;
}
.prospect-contact__facts a {
  color: var(--navy);
}
.prospect-contact__note {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
}
.prospect-contact__note p {
  margin: var(--s1) 0 0;
  font-size: var(--t-sm);
  white-space: pre-line;
}
.prospect-contact .card__head-action {
  gap: var(--s1);
}
@media (max-width: 1100px) {
  .prospect-contact__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.prospect-contact__note .lbl {
  color: var(--ink-muted);
  font-size: var(--t-xs);
  font-weight: 600;
}

/* Status cell as a stage picker (6 Oct 2026). */
.crm-stage-pick {
  position: static;
}
/* Equal width so the arrows line up down the column; read-only labels
   elsewhere stay sized to their text (Daniel, 6 Oct 2026). */
.crm-stage-pick > summary {
  justify-content: space-between;
  width: 150px;
  list-style: none;
  gap: var(--s1);
  padding-right: 10px;
  cursor: pointer;
  transition: background-color 0.12s;
}
.crm-stage-pick > summary::-webkit-details-marker {
  display: none;
}
.crm-stage-pick > summary svg {
  flex: none;
  opacity: 0.6;
}
.crm-stage-pick > summary:hover,
.crm-stage-pick[open] > summary {
  background: color-mix(in srgb, var(--fill-ink) 22%, var(--surface));
}
.crm-stage-pick > summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.crm-stage-pick > summary[aria-busy='true'] {
  opacity: 0.6;
}
.crm-stage-menu {
  position: fixed;
  z-index: 60;
  width: 220px;
  padding: var(--s1);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.crm-stage-menu form {
  margin: 0;
}
.crm-stage-option {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  min-height: 36px;
  padding: 0 var(--s2);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.crm-stage-option:hover {
  background: var(--well);
  text-decoration: none;
}
.crm-stage-option[aria-current] {
  font-weight: 600;
}
.crm-stage-option > svg {
  margin-left: auto;
  color: var(--navy);
}
.crm-stage-option__swatch {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--crm-stage-ink);
}
.crm-stage-option--lost {
  margin-top: var(--s1);
  border-top: 1px solid var(--rule);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  color: var(--ink-muted);
}