/* The sales board (js/sales-crm.js) — the ops CRM's own skin on the sales
   screen. page-crm.css paints everything: its tokens and frame land on
   .sales-crm (granted beside #crmRoot in that file), and every component is
   the same class the ops board uses. This sheet holds only what the sales
   board has and the ops board does not:
     – the dark restatements page-crm.css scopes to #crmRoot,
     – the legacy sales sheets' reach: shared class names restated at id
       specificity with page-crm.css's own values,
     – the folded empty phase and the Parked group,
     – the Send pill in the Agreement column,
     – the sc-* rules: the omnibox, the Clients / Organizations cells, the
       client card's property groups, the organization picker, the New client
       sheet's form controls, the Send-agreements dialog (js/sales-crm-clients.js; the guard keeps the
       class lists in the JS and this sheet identical, so nothing ships unused),
     – the phone: stages STACK (installer-board rule), never side-scroll.
   Loaded after page-crm.css and before mobile.css. */

/* ── dark restatements (page-crm.css keeps these under #crmRoot) ──────────── */
[data-theme="dark"] .sales-crm .crm-tbtn-on,
[data-theme="dark"] .sales-crm .crm-view-active,
[data-theme="dark"] .sales-crm .crm-view-active:hover,
[data-theme="dark"] .sales-crm .crm-tab2-on,
[data-theme="dark"] .sales-crm .crm-tab2-on:hover,
[data-theme="dark"] .sales-crm .crm-digest-n b { color: var(--crm-ink); }
[data-theme="dark"] .sales-crm .crm-updbtn-n { background: var(--crm-gold); color: #1f2533; }
[data-theme="dark"] .sales-crm .crm-table tbody tr.crm-row-done td {
  background: color-mix(in oklab, var(--crm-done, #00c875) 17%, var(--crm-paper));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sales-crm .crm-tbtn-on,
  :root:not([data-theme="light"]) .sales-crm .crm-view-active,
  :root:not([data-theme="light"]) .sales-crm .crm-view-active:hover,
  :root:not([data-theme="light"]) .sales-crm .crm-tab2-on,
  :root:not([data-theme="light"]) .sales-crm .crm-tab2-on:hover,
  :root:not([data-theme="light"]) .sales-crm .crm-digest-n b { color: var(--crm-ink); }
}

/* The sales screen's legacy body padding is the dashboard's; the board frames
   itself the way #crmRoot does (18px 24px 72px), so the body gives it the room. */
#salesScreen #salesBody.sales-crm-host { padding: 0; }
.sales-crm { min-height: 100%; }
/* The shell's bell (design-system.css) is fixed at the top right of the
   window and paints over the page (z 160 to its 100) from 641px up; its
   place is the THE BELL'S LINE tokens there. The head shares its line: the
   board starts at the bell's top and the title fills the bell's band, so the
   title and the buttons beside it centre on the bell's own centre line. And
   wherever the head came near the window's right edge (900 to 1600px, and on
   narrower tablets whose row fits on one line) the bell covered New client's
   right end, so the head's content stops the bell's clearance short of that
   edge: its padding is the clearance less the board's own 24px and the
   gutter either side of #salesBody once the pane (the window less the rail,
   --pane-left) passes its 1280px cap. On a phone the bell rides in the
   top bar, above the pane, and the head needs none of this. */
@media (min-width: 641px) {
  #salesScreen .sales-crm { padding-top: var(--bell-top); }
  #salesScreen .sales-crm > .crm-head { padding-right: max(0px, var(--bell-clear) - 24px - max(0px, (100vw - var(--pane-left) - 1280px) / 2)); }
  #salesScreen .sales-crm > .crm-head > .crm-title { min-height: var(--bell-size); display: flex; align-items: center; }
  /* Under the title on a tablet, the buttons wrap rather than run off its edge. */
  #salesScreen .sales-crm > .crm-head > .crm-head-right { flex: 0 1 auto; flex-wrap: wrap; min-width: 0; }
}
/* The sales screen's own title rules (dashboard.css, page-sales.css) are id-scoped
   and one of them hard-codes navy, which vanishes in dark. The board's title is
   the ops board's: 25px, weight 500, --crm-head in both themes. */
#salesScreen .sales-crm .crm-title {
  font-size: 25px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2;
  color: var(--crm-head); display: block; margin: 0;
}

/* ── the legacy sales sheets' reach ────────────────────────────────────────────
   page-sales.css, dashboard.css, mobile.css and design-system.css style the
   classic dashboard as `#salesScreen .crm-…`, and the board lives inside that
   screen wearing the same class names (.crm-table, .crm-search, .crm-name,
   .crm-avatar, .crm-contact, .crm-empty). An id outranks every `.sales-crm`
   rule, so on the real page the search stretched, the rows grew, the card's
   contacts collapsed to one line and the phone kept its dashes. Each shared
   class is restated here at id specificity with page-crm.css's OWN values —
   nothing new, the ops board's numbers. scripts/dev/sales-crm-ui.test.cjs
   computes the shared set and fails when a class is missing from this block. */
body.lh-shell #salesScreen .sales-crm .crm-table {
  width: 100%; margin: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0;
  font-size: 13.5px; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
}
body.lh-shell #salesScreen .sales-crm .crm-table thead th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--crm-ink-2); padding: 10px 12px; height: 36px; white-space: nowrap;
  background: var(--crm-panel); border-bottom: 1px solid var(--crm-grid-strong); border-right: 1px solid var(--crm-grid);
}
body.lh-shell #salesScreen .sales-crm .crm-table thead th:last-child { border-right: none; }
#salesScreen .sales-crm .crm-table tbody td {
  padding: 0 12px; height: var(--crm-row-h); font-size: inherit; color: var(--crm-ink);
  border-bottom: 1px solid var(--crm-grid); border-right: 1px solid var(--crm-grid);
  white-space: nowrap; vertical-align: middle;
}
#salesScreen .sales-crm .crm-table tbody td:last-child { border-right: none; }
#salesScreen .sales-crm .crm-table tbody tr:last-child td { border-bottom: none; }
#salesScreen .sales-crm .crm-table tbody td.crm-name { padding: 0; text-overflow: clip; }
#salesScreen .sales-crm .crm-name { font-size: inherit; font-weight: inherit; line-height: inherit; color: var(--crm-ink); }
#salesScreen .sales-crm .crm-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 25px; height: 25px; min-width: 25px; border-radius: 50%;
  background: var(--crm-panel-2); color: var(--crm-head); border: 1px solid var(--crm-rule);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
}
#salesScreen .sales-crm .crm-contact { display: block; margin: 0 0 13px; font-size: inherit; font-style: normal; color: inherit; }
#salesScreen .sales-crm .crm-empty { color: var(--crm-ink-2); font-size: 14px; text-align: center; }
/* The search is a label around an icon and an input (the ops board's is a bare input). */
#salesScreen .sales-crm .crm-search {
  position: static; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  width: 352px; min-width: 0; height: 30px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid var(--crm-rule-firm); border-radius: 999px; background: var(--crm-paper);
  color: var(--crm-ink); font-size: 13px; transition: border-color .12s ease-out, box-shadow .12s ease-out;
}
#salesScreen .sales-crm .crm-search:focus-within { border-color: var(--crm-gold); box-shadow: 0 0 0 3px var(--crm-gold-faint); }
#salesScreen .sales-crm .crm-search input { border: 0; background: transparent; color: inherit; font: inherit; width: 100%; outline: none; min-width: 0; box-shadow: none; padding: 0; }
#salesScreen .sales-crm .crm-search input::placeholder { color: var(--crm-ink-3); }
#salesScreen .sales-crm .crm-search svg { width: 14px; height: 14px; color: var(--crm-ink-3); flex: 0 0 auto; }

/* ── phases with none of your projects: folded to a line, never hidden ─────── */
.sales-crm .crm-group-empty { margin-bottom: 16px; }
.sales-crm .crm-group-empty .crm-group-name { color: var(--crm-ink-2); }
.sales-crm .crm-group-empty .crm-group-count { color: var(--crm-ink-3); font-style: italic; }
.sales-crm .crm-group-collapsed .crm-caret { transform: rotate(-90deg); }

/* ── cells the ops board does not have ────────────────────────────────────── */
.sales-crm .cell-send {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 600;
  color: var(--crm-gold-ink); border: 1px solid var(--crm-gold-pale);
  background: var(--crm-gold-faint); border-radius: 999px; padding: 3px 10px; cursor: pointer;
}
.sales-crm .cell-send:hover { border-color: var(--crm-gold); }
.sales-crm .cell-sign { display: inline-flex; align-items: center; gap: 6px; color: var(--crm-clear); font-weight: 500; }
.sales-crm .cell-sign svg { width: 14px; height: 14px; }
.sales-crm .cell-svy { display: inline-flex; align-items: center; gap: 7px; }
.sales-crm .cell-svy .crm-done-mark, .sales-crm .cell-map .crm-done-mark { width: 22px; height: 22px; }
.sales-crm .cell-svy .crm-done-mark svg, .sales-crm .cell-map .crm-done-mark svg { width: 12px; height: 12px; }
.sales-crm .cell-map { display: inline-flex; align-items: center; gap: 6px; }
.sales-crm .crm-wait-text { font-size: 12.5px; color: var(--crm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-crm .crm-stchip-lead { width: auto; min-height: 22px; font-size: 11.5px; padding: 0 9px; }
.sales-crm .crm-tbtn select { border: 0; background: transparent; color: inherit; font: inherit; outline: none; }
.sales-crm .crm-error { color: var(--crm-blocked); background: var(--crm-blocked-bg); border-radius: 8px; padding: 12px 14px; margin: 12px 0; font-size: 13px; }

/* The drawer's tabs a sales agent gets. The pane hosts the read-only map. */
.sales-crm .crm-pane-map { min-height: 420px; display: flex; flex-direction: column; }
.sales-crm .crm-pane-map .lh-mapviewer { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 420px; }
.sales-crm .crm-pane-map .lh-mapviewer-map { flex: 1 1 auto; min-height: 380px; border-radius: 10px; overflow: hidden; border: 1px solid var(--crm-grid-strong); }
.sales-crm .crm-tab2-n {
  font-size: 10px; font-weight: 700; background: var(--crm-panel-2); color: var(--crm-ink-2);
  border-radius: 999px; padding: 1px 6px;
}
.sales-crm .crm-ladder-gate-bar { grid-column: 2 / -1; }
.sales-crm .crm-ladder-fold {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--crm-ink-2);
  padding: 10px 0 0 38px; cursor: pointer; background: none; border: 0; font-family: inherit;
}
.sales-crm .crm-ladder-fold b { color: var(--crm-gold-ink); font-weight: 600; }
.sales-crm .crm-ladder-fold svg { width: 14px; height: 14px; }
.sales-crm .upd { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 12px; padding: 14px 0; border-top: 1px solid var(--crm-rule); }
.sales-crm .upd:first-child { border-top: 0; padding-top: 0; }
.sales-crm .upd .who { font-size: 13px; color: var(--crm-head); font-weight: 600; display: flex; align-items: baseline; gap: 8px; }
.sales-crm .upd .who small { font-size: 11.5px; color: var(--crm-ink-3); font-weight: 400; }
.sales-crm .upd .txt { grid-column: 2; font-size: 13.5px; line-height: 1.5; color: var(--crm-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.sales-crm .upd .sys { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--crm-gold-ink); background: var(--crm-gold-faint); border-radius: 4px; padding: 2px 6px; }
.sales-crm .crm-quick[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.sales-crm .crm-contact-line svg, .sales-crm .crm-fact-v svg { width: 13px; height: 13px; flex: 0 0 auto; }
.sales-crm .crm-quick svg, .sales-crm .crm-tbtn svg, .sales-crm .crm-projlink svg { width: 14px; height: 14px; }
.sales-crm .crm-updbtn svg { width: 16px; height: 16px; }

/* ── the omnibox: one box for a project, a client, an organization or a status ─ */
.sales-crm .sc-omni-wrap { position: relative; }
.sales-crm .sc-omni {
  position: absolute; left: 0; top: calc(100% + 6px); width: min(560px, calc(100vw - 48px)); z-index: var(--crm-z-menu, 120);
  background: var(--crm-paper); border: 1px solid var(--crm-rule-firm); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(31, 37, 51, .24); overflow: hidden; color: var(--crm-ink); text-align: left;
}
.sales-crm .sc-omni-scopes { display: flex; gap: 6px; padding: 10px 12px 4px; flex-wrap: wrap; }
.sales-crm .sc-omni-scope { font: inherit; font-size: 12px; color: var(--crm-ink-2); border: 1px solid var(--crm-rule-firm); background: transparent; border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.sales-crm .sc-omni-scope b { color: var(--crm-ink-3); font-weight: 500; margin-left: 4px; }
.sales-crm .sc-omni-scope.is-on { background: var(--crm-gold-faint); border-color: var(--crm-gold-pale); color: var(--crm-head); font-weight: 600; }
.sales-crm .sc-omni-grp { padding: 8px 12px 2px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--crm-ink-3); }
.sales-crm .sc-omni-hit { display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin: 0 6px; border-radius: 7px; font-size: 13px; cursor: pointer; }
.sales-crm .sc-omni-hit.is-on, .sales-crm .sc-omni-hit:hover { background: var(--crm-gold-faint); }
.sales-crm .sc-omni-hit > svg { width: 15px; height: 15px; color: var(--crm-ink-3); flex: 0 0 auto; }
.sales-crm .sc-omni-hit .t { color: var(--crm-head); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-crm .sc-omni-hit em { font-style: normal; background: var(--crm-gold-pale); border-radius: 3px; padding: 0 1px; }
.sales-crm .sc-omni-hit .s { color: var(--crm-ink-2); font-size: 12px; margin-left: auto; white-space: nowrap; }
.sales-crm .sc-omni-chip { width: auto; min-height: 20px; font-size: 10.5px; padding: 0 7px; border-radius: 5px; flex: 0 0 auto; }
.sales-crm .sc-omni-none { padding: 14px 14px 10px; font-size: 13px; color: var(--crm-ink-2); }
.sales-crm .sc-omni-hint { padding: 10px 14px 12px; margin-top: 6px; border-top: 1px solid var(--crm-rule); font-size: 12px; color: var(--crm-ink-2); background: var(--crm-panel); }
.sales-crm .sc-omni-hint b { font-weight: 600; color: var(--crm-ink); }

/* ── the Clients and Organizations views: the cells the board does not have ── */
.sales-crm .sc-org { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sales-crm .sc-org svg { width: 14px; height: 14px; color: var(--crm-ink-3); flex: 0 0 auto; }
.sales-crm .sc-org span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-crm .sc-org small { color: var(--crm-ink-3); font-size: 11.5px; flex: 0 0 auto; }
.sales-crm .sc-agr { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.sales-crm .sc-agr .ok { color: var(--crm-clear); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.sales-crm .sc-agr .ok svg { width: 13px; height: 13px; }
.sales-crm .sc-agr .due, .sales-crm .sc-type .due { color: var(--crm-gold-ink); font-weight: 600; }
.sales-crm .sc-agr .sent { color: var(--crm-ink-2); }
.sales-crm .sc-agr .no { color: var(--crm-blocked); }
.sales-crm .sc-type { font-size: 12.5px; color: var(--crm-ink-2); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sales-crm .sc-mini { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--crm-ink); white-space: nowrap; }
.sales-crm .sc-mini i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.sales-crm .sc-cell-org, .sales-crm .sc-cell-n { vertical-align: middle; }

/* ── the client card and the organization card ─────────────────────────────── */
.sales-crm .sc-pill { width: auto; min-height: 28px; padding: 4px 12px; border-radius: 999px; }
.sales-crm .sc-gate-n { width: auto; padding: 0 6px; border-radius: 999px; }
.sales-crm .sc-msg { font-size: 12.5px; color: var(--crm-clear); background: color-mix(in oklab, var(--crm-clear) 12%, var(--crm-paper)); border-radius: 8px; padding: 8px 10px; margin: 0 0 12px; }
.sales-crm .sc-msg.is-error { color: var(--crm-blocked); background: var(--crm-blocked-bg); }
.sales-crm .sc-link { color: var(--crm-gold-ink); font-weight: 600; text-decoration: none; }
.sales-crm .sc-link:hover { text-decoration: underline; }
.sales-crm .sc-link-btn { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 0; font: inherit; font-size: 11.5px; letter-spacing: .08em; font-weight: 600; color: var(--crm-gold-ink); cursor: pointer; }
.sales-crm .sc-link-btn.quiet { letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--crm-ink-2); margin-left: auto; }
.sales-crm .sc-link-btn svg { width: 14px; height: 14px; }
.sales-crm .sc-help { font-size: 12px; color: var(--crm-ink-2); margin-top: 5px; line-height: 1.45; }
.sales-crm .sc-intro { font-size: 12.5px; line-height: 1.5; color: var(--crm-ink-2); margin: -4px 0 18px; max-width: 64ch; }
.sales-crm .sc-pgroup { border: 1px solid var(--crm-grid-strong); border-radius: 10px; background: var(--crm-paper); box-shadow: var(--crm-shadow-card); margin-bottom: 16px; overflow: hidden; }
.sales-crm .sc-pgroup-h { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--crm-panel); border-bottom: 1px solid var(--crm-grid-strong); flex-wrap: wrap; }
.sales-crm .sc-pgroup-h > svg { width: 16px; height: 16px; color: var(--crm-ink-2); }
.sales-crm .sc-pgroup-h .n { font-size: 14px; font-weight: 600; color: var(--crm-head); }
.sales-crm .sc-pgroup-h .r { margin-left: auto; font-size: 12px; color: var(--crm-ink-2); }
.sales-crm .sc-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 4px; padding: 2px 7px; white-space: nowrap; }
.sales-crm .sc-tag-default { background: var(--crm-gold-faint); color: var(--crm-gold-ink); border: 1px solid var(--crm-gold-pale); }
.sales-crm .sc-tag-only { background: var(--crm-panel-2); color: var(--crm-ink-2); border: 1px solid var(--crm-rule-firm); }
.sales-crm .sc-prow { display: grid; grid-template-columns: 22px minmax(0, 1.2fr) 150px minmax(0, 1.4fr) 128px; align-items: center; gap: 12px; padding: 0 14px; min-height: 50px; border-top: 1px solid var(--crm-grid); font-size: 13px; cursor: pointer; }
.sales-crm .sc-pgroup-h + .sc-prow { border-top: 0; }
.sales-crm .sc-prow:hover { background: var(--crm-gold-faint); }
.sales-crm .sc-prow > svg { width: 15px; height: 15px; color: var(--crm-ink-3); }
.sales-crm .sc-prow .a { font-weight: 500; color: var(--crm-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-crm .sc-prow .a small { display: block; font-size: 11.5px; font-weight: 400; color: var(--crm-ink-3); line-height: 1.2; }
.sales-crm .sc-prow-chip { width: auto; min-height: 24px; font-size: 12px; padding: 0 9px; border-radius: 6px; justify-self: start; }
.sales-crm .sc-prow .ag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--crm-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sales-crm .sc-prow .ag.ok { color: var(--crm-clear); font-weight: 500; }
.sales-crm .sc-prow .ag.ok svg { width: 13px; height: 13px; }
.sales-crm .sc-prow .ag.no { color: var(--crm-blocked); }
.sales-crm .sc-prow .act { font-size: 12px; color: var(--crm-ink-3); white-space: nowrap; display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; text-decoration: none; }
.sales-crm .sc-prow .act svg { width: 13px; height: 13px; }
.sales-crm .sc-prow .act.link { color: var(--crm-gold-ink); font-weight: 600; }
.sales-crm .sc-prow-picker { padding: 6px 14px 12px 48px; border-top: 1px dashed var(--crm-rule); }
.sales-crm .sc-pfoot { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px dashed var(--crm-rule-firm); border-radius: 10px; font-size: 13px; color: var(--crm-ink); flex-wrap: wrap; }
.sales-crm .sc-pfoot > svg { width: 16px; height: 16px; color: var(--crm-ink-2); flex: 0 0 auto; }
.sales-crm .sc-pfoot span { flex: 1 1 260px; line-height: 1.45; }
.sales-crm .sc-pfoot b { font-weight: 600; color: var(--crm-head); }
.sales-crm .sc-pfoot .crm-btn { margin-left: auto; }
.sales-crm .sc-agree { border: 1px solid var(--crm-rule-firm); border-radius: 10px; padding: 11px 13px; margin-bottom: 10px; }
.sales-crm .sc-agree-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.sales-crm .sc-agree-h .n { font-weight: 600; color: var(--crm-head); display: inline-flex; align-items: center; gap: 5px; }
.sales-crm .sc-agree-h .sc-agree-doc { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--crm-gold-ink); text-decoration: none; }
.sales-crm .sc-agree-h .sc-agree-doc:hover { text-decoration: underline; }
.sales-crm .sc-agree-h .n.ok { color: var(--crm-clear); }
.sales-crm .sc-agree-h .n svg { width: 13px; height: 13px; }
.sales-crm .sc-agree-h .s { font-size: 12px; color: var(--crm-ink-2); }
.sales-crm .sc-agree-b { font-size: 12.5px; color: var(--crm-ink-2); margin-top: 5px; line-height: 1.45; }
.sales-crm .sc-act { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; padding: 9px 0; border-top: 1px solid var(--crm-rule); font-size: 13px; }
.sales-crm .sc-act:first-child { border-top: 0; }
.sales-crm .sc-act .k { color: var(--crm-ink-2); text-transform: capitalize; }
.sales-crm .sc-act .t { color: var(--crm-ink); overflow-wrap: anywhere; }
.sales-crm .sc-act .d { color: var(--crm-ink-3); font-size: 12px; white-space: nowrap; }
.sales-crm .sc-list { display: flex; flex-direction: column; }
.sales-crm .sc-list-row { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-top: 1px solid var(--crm-rule); font-size: 13px; cursor: pointer; }
.sales-crm .sc-list-row:first-child { border-top: 0; }
.sales-crm .sc-list-row:hover { background: var(--crm-gold-faint); }
.sales-crm .sc-list-row > svg { width: 15px; height: 15px; color: var(--crm-ink-3); }
.sales-crm .sc-list-row .a { flex: 1 1 auto; min-width: 0; color: var(--crm-head); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── the organization picker (client card, property rows, the sheet) ────────── */
.sales-crm .sc-picker { margin-top: 8px; }
#salesScreen .sales-crm .sc-picker-in { width: 100%; height: 36px; border-radius: 8px; }
.sales-crm .sc-sug { border: 1px solid var(--crm-rule-firm); border-radius: 10px; background: var(--crm-paper); box-shadow: 0 16px 42px rgba(31, 37, 51, .18); padding: 6px; margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.sales-crm .sc-sug-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 9px; border-radius: 7px; border: 0; background: none; text-align: left; font: inherit; font-size: 13px; color: var(--crm-ink); cursor: pointer; }
.sales-crm .sc-sug-row:hover { background: var(--crm-gold-faint); }
.sales-crm .sc-sug-row svg { width: 15px; height: 15px; color: var(--crm-ink-3); flex: 0 0 auto; }
.sales-crm .sc-sug-row .m { margin-left: auto; font-size: 11.5px; color: var(--crm-ink-3); white-space: nowrap; }
.sales-crm .sc-sug-new { color: var(--crm-gold-ink); font-weight: 600; border-top: 1px dashed var(--crm-rule); border-radius: 0; margin-top: 2px; padding-top: 9px; }
.sales-crm .sc-sug-cancel { color: var(--crm-ink-3); font-size: 12px; justify-content: center; }

/* ── forms: the New client sheet, add a property, edit an organization ──────── */
.sales-crm .sc-grid { display: grid; gap: 12px 16px; }
.sales-crm .sc-grid-2 { grid-template-columns: 1fr 1fr; }
.sales-crm .sc-grid-addr { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr) 88px 96px; }
.sales-crm .sc-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.sales-crm .sc-actions .sc-help { margin-top: 0; }
.sales-crm .sc-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sales-crm .sc-seg { display: inline-flex; border: 1px solid var(--crm-rule-firm); border-radius: 8px; overflow: hidden; }
.sales-crm .sc-seg button { padding: 8px 14px; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--crm-ink-2); background: var(--crm-paper); border: 0; border-right: 1px solid var(--crm-rule-firm); cursor: pointer; }
.sales-crm .sc-seg button:last-child { border-right: 0; }
.sales-crm .sc-seg button.on { background: var(--crm-gold-faint); color: var(--crm-head); font-weight: 600; }
.sales-crm .sc-tog { position: relative; display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--crm-ink); cursor: pointer; }
.sales-crm .sc-tog input { position: absolute; opacity: 0; width: 0; height: 0; }
.sales-crm .sc-tog .sw { width: 34px; height: 20px; border-radius: 999px; background: var(--crm-rule-firm); position: relative; transition: background .12s; flex: 0 0 auto; }
.sales-crm .sc-tog .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .12s; }
.sales-crm .sc-tog.on .sw { background: var(--crm-gold); }
.sales-crm .sc-tog.on .sw::after { left: 16px; }
.sales-crm .sc-date { border: 1px solid var(--crm-rule-firm); border-radius: 8px; background: var(--crm-paper); color: var(--crm-ink); font: inherit; font-size: 13px; padding: 7px 10px; }
.sales-crm .sc-acard { border: 1px solid var(--crm-rule-firm); border-radius: 10px; padding: 11px 13px; margin-bottom: 8px; background: var(--crm-paper); }
.sales-crm .sc-acard.warn { border-color: var(--crm-gold-pale); }
.sales-crm .sc-acard-a { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; color: var(--crm-head); margin-bottom: 10px; }
.sales-crm .sc-acard-a svg { width: 15px; height: 15px; color: var(--crm-ink-3); }
.sales-crm .sc-acard-o { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12.5px; flex-wrap: wrap; }
.sales-crm .sc-acard-o .k { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--crm-ink-2); }
.sales-crm .sc-acard-o .why { color: var(--crm-ink-2); }
.sales-crm .sc-sel { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--crm-rule-firm); border-radius: 999px; padding: 4px 10px; color: var(--crm-ink-2); background: var(--crm-paper); font: inherit; font-size: 12.5px; cursor: pointer; }
.sales-crm .sc-sel svg { width: 12px; height: 12px; color: var(--crm-ink-3); }
.sales-crm .sc-sel.diff { color: var(--crm-head); border-color: var(--crm-gold); background: var(--crm-gold-faint); font-weight: 500; }
.sales-crm .sc-addform, .sales-crm .sc-oform { margin-bottom: 16px; }
/* Edit details: the signer's fields sit under the "who signs" toggle. */
.sales-crm .sc-oform .sc-seg + .sc-grid { margin-top: 12px; }
.sales-crm .sc-dupe { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--crm-gold-faint); border: 1px solid var(--crm-gold-pale); font-size: 12.5px; color: var(--crm-ink); line-height: 1.45; }
.sales-crm .sc-dupe > svg { width: 16px; height: 16px; color: var(--crm-gold-ink); flex: 0 0 auto; margin-top: 1px; }
.sales-crm .sc-dupe b { font-weight: 600; }
.sales-crm .sc-orgpill { display: flex; align-items: center; gap: 8px; min-height: 38px; border: 1px solid var(--crm-rule-firm); border-radius: 8px; padding: 6px 11px; font-size: 13.5px; color: var(--crm-head); }
.sales-crm .sc-orgpill > svg { width: 15px; height: 15px; color: var(--crm-ink-3); }
.sales-crm .sc-newtag { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--crm-gold-ink); background: var(--crm-gold-faint); border: 1px solid var(--crm-gold-pale); border-radius: 4px; padding: 2px 6px; }
.sales-crm .sc-newtag.quiet { color: var(--crm-ink-2); background: var(--crm-panel-2); border-color: var(--crm-rule-firm); }
.sales-crm .sc-orgfield { margin-top: 14px; }
.sales-crm .sc-foot-err { flex: 1 1 100%; font-size: 12.5px; color: var(--crm-blocked); }
/* The head and the foot stay put; the body is the scroller, so Create is always in reach. */
.sales-crm .sc-sheet { width: min(760px, 100%); max-height: min(92vh, 920px); overflow: hidden; }
.sales-crm .sc-sheet .sc-sheet-body { overflow: auto; flex: 1 1 auto; min-height: 0; }
.sales-crm .sc-sheet-head { flex: 1 1 auto; min-width: 0; }
.sales-crm .sc-sheet-title { font-family: var(--font-serif); font-size: 22px; font-weight: 500; line-height: 1.22; }
.sales-crm .sc-sheet-sub { font-size: 12.5px; color: var(--crm-ink-2); margin-top: 4px; line-height: 1.45; }
.sales-crm .sc-sheet-body { display: block; padding: 6px 22px 12px; }
.sales-crm .sc-sheet-body .crm-sec { margin-top: 18px; }

/* ── Send agreements: one per organization; the agent picks what rides on each ─ */
.sales-crm .sc-send { width: min(640px, 100%); overflow: hidden; }
.sales-crm .sc-send-body { overflow: auto; flex: 1 1 auto; min-height: 0; display: block; }
.sales-crm .sc-send-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--crm-ink); background: var(--crm-gold-faint); border: 1px solid var(--crm-gold-pale); border-radius: 8px; padding: 8px 11px; margin-bottom: 12px; }
.sales-crm .sc-send-note svg { width: 14px; height: 14px; color: var(--crm-gold-ink); flex: 0 0 auto; }
.sales-crm .sc-ag { border: 1px solid var(--crm-rule-firm); border-radius: 10px; overflow: hidden; }
.sales-crm .sc-ag + .sc-ag { margin-top: 12px; }
.sales-crm .sc-ag-h { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: var(--crm-panel); border-bottom: 1px solid var(--crm-rule); }
.sales-crm .sc-ag-h .n { font-size: 14px; font-weight: 600; color: var(--crm-head); }
.sales-crm .sc-ag.off .sc-ag-h .n { color: var(--crm-ink-2); }
.sales-crm .sc-ag-h .s { font-size: 12px; color: var(--crm-ink-2); }
.sales-crm .sc-ag-h .cnt { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--crm-gold-ink); background: var(--crm-gold-faint); border: 1px solid var(--crm-gold-pale); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.sales-crm .sc-ag.off .sc-ag-h .cnt { color: var(--crm-ink-2); background: var(--crm-panel-2); border-color: var(--crm-rule-firm); }
.sales-crm .sc-ag-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 0 13px; min-height: 42px; border-top: 1px solid var(--crm-rule); font-size: 13px; color: var(--crm-ink); }
.sales-crm .sc-ag-h + .sc-ag-row { border-top: 0; }
.sales-crm .sc-ag-row[role="checkbox"] { cursor: pointer; }
.sales-crm .sc-ag-row[role="checkbox"]:hover { background: var(--crm-gold-faint); }
.sales-crm .sc-ag-row .a { font-weight: 500; color: var(--crm-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-crm .sc-ag-row .m { font-size: 12px; color: var(--crm-ink-2); white-space: nowrap; }
.sales-crm .sc-ag-row.off .a, .sales-crm .sc-ag-row.off .m { color: var(--crm-ink-3); }
.sales-crm .sc-ag-row.done { background: var(--crm-panel); }
.sales-crm .sc-ag-row.done .a { color: var(--crm-ink-2); font-weight: 400; }
.sales-crm .sc-ag-row .m.done { color: var(--crm-clear); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.sales-crm .sc-ag-row .m.done svg { width: 12px; height: 12px; }
.sales-crm .sc-cb { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--crm-rule-firm); background: var(--crm-paper); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; color: transparent; flex: 0 0 auto; }
.sales-crm .sc-cb.on { background: var(--crm-navy); border-color: var(--crm-navy); color: var(--crm-gold); }
.sales-crm .sc-cb svg { width: 12px; height: 12px; }
.sales-crm .sc-cb.lock { background: var(--crm-panel-2); border-color: var(--crm-rule); color: var(--crm-ink-3); cursor: default; }
.sales-crm .sc-cb.lock svg { width: 11px; height: 11px; }
.sales-crm .sc-ag-f { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-top: 1px solid var(--crm-rule); font-size: 12px; color: var(--crm-ink-2); background: var(--crm-paper); flex-wrap: wrap; }
.sales-crm .sc-ag-f b { color: var(--crm-ink); font-weight: 600; }
.sales-crm .sc-rate { margin-left: auto; display: inline-flex; border: 1px solid var(--crm-rule-firm); border-radius: 6px; overflow: hidden; }
.sales-crm .sc-rate button { border: 0; background: none; padding: 3px 10px; font: inherit; font-size: 12px; color: var(--crm-ink-2); font-weight: 600; cursor: pointer; }
.sales-crm .sc-rate button + button { border-left: 1px solid var(--crm-rule-firm); }
.sales-crm .sc-rate button.on { background: var(--crm-ink); color: var(--crm-paper); }
.sales-crm .sc-hold { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--crm-ink-2); margin-top: 12px; }
.sales-crm .sc-hold svg { width: 14px; height: 14px; color: var(--crm-ink-3); flex: 0 0 auto; }

/* ── Send the site map, and the agent's own updates ─────────────────────────── */
.sales-crm .sc-mapsend { width: min(600px, 100%); overflow: hidden; }
.sales-crm .sc-ro { min-height: 36px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--crm-rule); border-radius: 8px; background: var(--crm-panel); color: var(--crm-ink); font-size: 13.5px; }
.sales-crm .sc-ro small { margin-left: auto; font-size: 11px; color: var(--crm-ink-3); white-space: nowrap; }
.sales-crm .sc-att { display: flex; align-items: center; gap: 10px; border: 1px solid var(--crm-rule); border-radius: 8px; padding: 9px 11px; background: var(--crm-panel); font-size: 12.5px; }
.sales-crm .sc-att-th { width: 46px; height: 34px; border-radius: 4px; background: linear-gradient(135deg, var(--crm-panel-2), var(--crm-rule-firm)); border: 1px solid var(--crm-rule-firm); flex: 0 0 auto; position: relative; overflow: hidden; }
.sales-crm .sc-att-th::after { content: ""; position: absolute; left: 10px; top: 8px; width: 24px; height: 16px; border: 1.5px solid var(--crm-head); border-radius: 2px; opacity: .55; }
.sales-crm .sc-att b { display: block; color: var(--crm-head); font-weight: 600; }
.sales-crm .sc-att span { color: var(--crm-ink-2); }
.sales-crm .sc-chk { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--crm-ink); line-height: 1.45; text-align: left; }
.sales-crm .sc-chk-btn { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; width: 100%; }
.sales-crm .sc-chk .bx { width: 16px; height: 16px; border-radius: 4px; background: var(--crm-paper); border: 1px solid var(--crm-rule-firm); flex: 0 0 auto; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; color: var(--crm-gold); }
.sales-crm .sc-chk .bx.on { background: var(--crm-navy); border-color: var(--crm-navy); }
.sales-crm .sc-chk .bx svg { width: 11px; height: 11px; }
.sales-crm .sc-chk b { font-weight: 600; }
.sales-crm .sc-note { border: 1px solid var(--crm-rule-firm); border-radius: 10px; padding: 10px 12px; margin-bottom: 16px; background: var(--crm-paper); }
.sales-crm .sc-note textarea { width: 100%; box-sizing: border-box; border: 0; background: transparent; color: var(--crm-ink); font: inherit; font-size: 13.5px; line-height: 1.5; resize: vertical; min-height: 64px; outline: none; }
.sales-crm .sc-note-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.sales-crm .sc-note-actions .sc-help { margin-top: 0; flex: 1 1 auto; }
.sales-crm .sc-upd-av { width: 30px; height: 30px; min-width: 30px; font-size: 11px; }

/* ── the phone: one scroll, stages stack, rows become cards ──────────────── */
/* ── Leo's ask box on the cards (crm.js's .crm-leo-ask, page-crm.css) ─────── */
.sales-crm .sc-leo { margin-top: 2px; }
.sales-crm .sc-leo .crm-leo-ask { margin-top: 6px; }

@media (max-width: 640px) {
  #salesScreen .sales-crm { padding: 14px 14px 88px; }
  #salesScreen .sales-crm .crm-title { font-size: 21px; }
  #salesScreen .sales-crm .crm-head { gap: 10px; }
  #salesScreen .sales-crm .crm-head-right { width: 100%; flex-wrap: wrap; }
  #salesScreen .sales-crm .crm-search { flex: 1 1 100%; width: auto; height: 44px; font-size: 16px; }
  /* Leo's read becomes a plain line: no pill, the three lenses wrap as words. */
  #salesScreen .sales-crm .crm-toolbar .crm-digest {
    display: block; margin-left: 0; height: auto; padding: 4px 2px; white-space: normal; line-height: 1.8;
    border: 0; background: transparent; animation: none;
  }
  #salesScreen .sales-crm .crm-toolbar .crm-digest .crm-leo-mark { display: inline-flex; vertical-align: -3px; margin-right: 6px; }
  #salesScreen .sales-crm .crm-toolbar .crm-digest-line, #salesScreen .sales-crm .crm-toolbar .crm-digest-n { display: inline; }
  #salesScreen .sales-crm .crm-tablewrap { border: 0; box-shadow: none; background: transparent; overflow: visible; }
  #salesScreen .sales-crm .crm-table, #salesScreen .sales-crm .crm-table tbody { display: block; width: 100%; }
  #salesScreen .sales-crm .crm-table thead, #salesScreen .sales-crm .crm-table colgroup { display: none; }
  #salesScreen .sales-crm .crm-table tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center;
    background: var(--crm-paper); border: 1px solid var(--crm-grid-strong); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--crm-shadow-card);
  }
  #salesScreen .sales-crm .crm-table tbody tr.crm-row-blocked { box-shadow: var(--crm-shadow-card), inset 3px 0 0 var(--crm-blocked); }
  #salesScreen .sales-crm .crm-table tbody td { display: block; height: auto; padding: 0; border: 0; white-space: normal; max-width: none; overflow: visible; text-overflow: clip; font-size: 13px; }
  #salesScreen .sales-crm .crm-table tbody td.crm-name { grid-column: 1 / -1; padding: 0; }
  #salesScreen .sales-crm .crm-name-row { min-height: 0; }
  #salesScreen .sales-crm .crm-name-wrap { padding: 0; }
  #salesScreen .sales-crm .crm-name-upd { border-left: 0; }
  #salesScreen .sales-crm .crm-table tbody td.crm-cell-st { grid-column: 1; }
  #salesScreen .sales-crm .crm-table tbody td.crm-cell-st .crm-stchip { width: auto; min-height: 24px; font-size: 12px; padding: 0 9px; border-radius: 6px; }
  #salesScreen .sales-crm .crm-table tbody td.crm-cell-rail { grid-column: 2; }
  #salesScreen .sales-crm .crm-table tbody td.crm-cell-wait { grid-column: 1 / -1; }
  #salesScreen .sales-crm .crm-table tbody td.crm-cell-facts { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--crm-ink-2); }
  #salesScreen .sales-crm .crm-table tbody tr:hover td { background: transparent; }
  #salesScreen .sales-crm .crm-group-head { flex-wrap: wrap; }
  #salesScreen .sales-crm .crm-group-gate { margin-left: 0; width: 100%; }
  #salesScreen .sales-crm .crm-table tbody td.sc-cell-org { grid-column: 1 / -1; }
  #salesScreen .sales-crm .crm-table tbody td.sc-cell-n { display: none; }
  #salesScreen .sales-crm .sc-grid-2, #salesScreen .sales-crm .sc-grid-addr { grid-template-columns: 1fr 1fr; }
  /* An edit form's pairs (email beside phone) need the full width for an address. */
  #salesScreen .sales-crm .sc-oform .sc-grid-2 { grid-template-columns: 1fr; }
  #salesScreen .sales-crm .sc-prow { grid-template-columns: 22px minmax(0, 1fr); row-gap: 4px; padding: 10px 14px; }
  #salesScreen .sales-crm .sc-prow .a { white-space: normal; }
  #salesScreen .sales-crm .sc-prow-chip, #salesScreen .sales-crm .sc-prow .ag, #salesScreen .sales-crm .sc-prow .act { grid-column: 2; justify-self: start; }
  #salesScreen .sales-crm .sc-prow-picker { padding-left: 14px; }
  #salesScreen .sales-crm .sc-act { grid-template-columns: 1fr; gap: 2px; }
  #salesScreen .sales-crm .sc-omni { width: calc(100vw - 28px); }
  #salesScreen .sales-crm .sc-seg { display: flex; flex-wrap: wrap; }
  #salesScreen .sales-crm .sc-seg button { flex: 1 1 auto; border-top: 1px solid var(--crm-rule-firm); margin-top: -1px; }
  /* Last on purpose: a cell with nothing to say leaves the card, whatever else it is. */
  #salesScreen .sales-crm .crm-table tbody td:empty, #salesScreen .sales-crm .crm-table tbody td.ph-hide, #salesScreen .sales-crm .crm-table tbody td.crm-cell-none { display: none; }
}

/* ── Additional contacts (KAN-98): who else is copied on every email to the client ── */
.sales-crm .sc-copies-k { font-weight: 600; color: var(--crm-ink); }
.sales-crm .sc-copies > span { min-width: 0; overflow-wrap: anywhere; }
.sales-crm .sc-copies-edit { margin-top: 8px; }
#salesScreen .sales-crm .sc-copies-in { width: 100%; height: 34px; border-radius: 8px; box-sizing: border-box; }
.sales-crm .sc-copies-btns { display: flex; gap: 8px; margin-top: 8px; }
.sales-crm .sc-copies-err { font-size: 12px; color: var(--crm-blocked); margin-top: 5px; }