/* ═════════════════════════════════════════════════════════════════════════════
   js/leads-redesign.css — WIP-UI-LEADS-01
   Compact header + triage strip + structured source typing + quality pulse
   for the Sales CRM Leads page. Lift target: spartan-leads-redesign-v2.html.

   All new classes are `ll-*` prefixed to avoid collision with the existing
   leads renderer's inline styles + with jobs-list-redesign's `jl-*`.

   Pulse channels:
     • Red (stale)  — .is-overdue-row / .pill-overdue (shared from
                      jobs-list-redesign.css)
     • Green (hot)  — .av.is-hot ring + .ll-qual-hot .ll-dot dot

   prefers-reduced-motion kills both, keeps borders/colours.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Source palette (additive — only used inside .ll-page) ──────────────── */
.ll-page {
  --src-fb:#1877F2;    --src-fb-bg:#EBF3FE;
  --src-google:#EA4335;--src-google-bg:#FEEDEB;
  --src-web:#0A0A0A;   --src-web-bg:#F5F5F4;
  --src-phone:#a16207; --src-phone-bg:#fefce8;
  --src-ref:#15803D;   --src-ref-bg:#DCFCE7;
  --src-trade:#6D28D9; --src-trade-bg:#F3E8FF;
  --q-hot:#15803D;     --q-warm:#D97706; --q-cold:#78716C;
}

/* ── Green pulse (hot lead) ────────────────────────────────────────────── */
@keyframes pulse-hot-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(21,128,61,.55), 0 0 0 2px #15803D; }
  70%      { box-shadow: 0 0 0 7px rgba(21,128,61,0), 0 0 0 2px #15803D; }
}
@keyframes pulse-hot-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(21,128,61,.55); }
  70%      { box-shadow: 0 0 0 6px rgba(21,128,61,0); }
}
.ll-page .av.is-hot { animation: pulse-hot-ring 2.0s ease-in-out infinite; }
.ll-page .ll-qual-hot .ll-dot { animation: pulse-hot-dot 1.8s infinite; }
@media (prefers-reduced-motion: reduce) {
  .ll-page .av.is-hot { animation: none !important; box-shadow: 0 0 0 2px #15803D; }
  .ll-page .ll-qual-hot .ll-dot { animation: none !important; }
}

/* ── Page container + layout ──────────────────────────────────────────── */
.ll-page { padding: 4px 0 48px; }
.ll-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: start;
}
/* A-467 — grid-blowout fix: a grid item's implicit min-width is min-content,
   so the table column used to force the 1fr track wider than the viewport,
   shoving the rail ~300px off-screen and giving the PAGE a horizontal
   scrollbar ("scrolling does not work properly"). min-width:0 lets the
   table column shrink; its own .ll-tbl-scroll handles internal overflow. */
.ll-layout > .ll-main { min-width: 0; }
/* A-467 — rail hidden (the default): single full-width column. */
.ll-layout--noRail { grid-template-columns: 1fr; }
@media (max-width: 1280px) {
  .ll-layout { grid-template-columns: 1fr; }
}

/* ── Compact page header ───────────────────────────────────────────────── */
.ll-ph {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--s200, #E7E5E4);
}
.ll-ph-l { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ll-ph-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--s400, #A8A29E);
  line-height: 1;
}
.ll-ph-h1-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.ll-ph-h1 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink, #0A0A0A);
  line-height: 1;
  margin: 0;
  font-family: var(--ff-sans, 'Archivo', system-ui, sans-serif);
}
.ll-ph-h1-meta {
  font-size: 13px;
  color: var(--s500, #78716C);
  font-weight: 600;
}
.ll-ph-h1-meta b { color: var(--ink, #0A0A0A); font-weight: 800; }
.ll-ph-h1-meta .ll-red   { color: var(--red, #a16207); font-weight: 800; }
.ll-ph-h1-meta .ll-green { color: #15803D; font-weight: 800; }
.ll-ph-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Triage strip (5 tiles) ─────────────────────────────────────────────── */
.ll-triage {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.ll-tcard {
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 12px;
  padding: 13px 15px;
  cursor: pointer;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  box-shadow: var(--shadow-rest, 0 1px 2px rgba(10,10,10,.03));
  position: relative;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.ll-tcard:hover {
  border-color: var(--s300, #D6D3D1);
  box-shadow: var(--shadow-hover, 0 1px 2px rgba(10,10,10,.04), 0 12px 28px -12px rgba(10,10,10,.18));
  transform: translateY(-2px);
}
.ll-tcard.ll-on {
  background: var(--ink, #0A0A0A);
  border-color: var(--ink, #0A0A0A);
  color: #fff;
}
.ll-tcard.ll-on .ll-tcard-label,
.ll-tcard.ll-on .ll-tcard-sub { color: rgba(255,255,255,.65); }
.ll-tcard.ll-alert {
  border-color: rgba(161,98,7,.3);
  background: var(--pale-red, #fefce8);
}
.ll-tcard.ll-alert .ll-tcard-val,
.ll-tcard.ll-alert .ll-tcard-label { color: var(--red, #a16207); }
.ll-tcard.ll-hot {
  border-color: rgba(21,128,61,.3);
  background: #DCFCE7;
}
.ll-tcard.ll-hot .ll-tcard-val,
.ll-tcard.ll-hot .ll-tcard-label { color: #15803D; }
.ll-tcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.ll-tcard-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--s500, #78716C);
}
.ll-tcard-ico {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--s100, #F5F5F4);
  color: var(--s500, #78716C);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.ll-tcard.ll-on .ll-tcard-ico { background: rgba(255,255,255,.12); color: #fff; }
.ll-tcard.ll-alert .ll-tcard-ico { background: rgba(250,204,21,.12); color: var(--red, #a16207); }
.ll-tcard.ll-hot .ll-tcard-ico { background: rgba(21,128,61,.12); color: #15803D; }
.ll-tcard-val {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink, #0A0A0A);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.ll-tcard.ll-on .ll-tcard-val { color: #fff; }
.ll-tcard-sub {
  font-size: 10.5px;
  color: var(--s500, #78716C);
  margin-top: 3px;
  font-weight: 600;
}
@media (max-width: 1100px) { .ll-triage { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .ll-triage { grid-template-columns: repeat(2, 1fr); } }

/* ── Filter bar (status segments + source chips + search) ──────────────── */
.ll-fbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 12px;
  flex-wrap: wrap;
}
.ll-seg {
  display: flex;
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  box-shadow: var(--shadow-rest);
}
.ll-seg button {
  padding: 7px 11px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--s500, #78716C);
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.ll-seg button:hover { color: var(--ink, #0A0A0A); }
.ll-seg button.ll-on { background: var(--ink, #0A0A0A); color: #fff; }
.ll-seg-count {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--s100, #F5F5F4);
  color: var(--s600, #57534E);
}
.ll-seg button.ll-on .ll-seg-count { background: rgba(255,255,255,.18); color: #fff; }
.ll-seg button:hover .ll-seg-count { background: var(--s200, #E7E5E4); color: var(--ink, #0A0A0A); }

.ll-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ll-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--s700, #44403C);
  cursor: pointer;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  box-shadow: var(--shadow-rest);
  font-family: inherit;
}
.ll-chip:hover {
  border-color: var(--ink, #0A0A0A);
  color: var(--ink, #0A0A0A);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}
.ll-chip.ll-on {
  background: var(--ink, #0A0A0A);
  color: #fff;
  border-color: var(--ink, #0A0A0A);
}
.ll-chip-c {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--s100, #F5F5F4);
  color: var(--s600, #57534E);
}
.ll-chip.ll-on .ll-chip-c { background: rgba(255,255,255,.2); color: #fff; }
.ll-chip-src {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: -0.02em;
}
.ll-page .src-ico-fb, .ll-chip-src.ll-src-fb         { background: var(--src-fb-bg); color: var(--src-fb); }
.ll-page .src-ico-google, .ll-chip-src.ll-src-google { background: var(--src-google-bg); color: var(--src-google); }
.ll-page .src-ico-web, .ll-chip-src.ll-src-web       { background: var(--src-web-bg); color: var(--src-web); }
.ll-page .src-ico-phone, .ll-chip-src.ll-src-phone   { background: var(--src-phone-bg); color: var(--src-phone); }
.ll-page .src-ico-ref, .ll-chip-src.ll-src-ref       { background: var(--src-ref-bg); color: var(--src-ref); }
.ll-page .src-ico-trade, .ll-chip-src.ll-src-trade   { background: var(--src-trade-bg); color: var(--src-trade); }

.ll-fbar-r {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* A-668 — the right-hand half of the leads filter bar (owner picker, region
 * picker, search, the density and view segmented controls) is 748px of nowrap
 * content with no flex-wrap. Measured at 673px — an unfolded Fold, which runs
 * the DESKTOP leads list because the phone card list stops at 639 — it pushed the
 * page 93px wide, and on a mobile viewport that made Chrome widen the layout
 * viewport to 766px and render the whole page zoomed out rather than show a
 * scrollbar. So nothing looked broken; everything was just small.
 *
 * `margin-left:auto` also has to go once it wraps, or the wrapped row is shoved
 * to the right of its own line. */
html[data-vp="xs"] .ll-page .ll-fbar-r,
html[data-vp="sm"] .ll-page .ll-fbar-r,
html[data-vp="md"] .ll-page .ll-fbar-r,
html[data-vp="lg"] .ll-page .ll-fbar-r {
  flex-wrap: wrap;
  margin-left: 0;
  width: 100%;
  row-gap: 8px;
}
html[data-vp="md"] .ll-page .ll-fbar-r > *,
html[data-vp="lg"] .ll-page .ll-fbar-r > * { min-width: 0; }
/* The search field is the one that should absorb the leftover width. */
html[data-vp="md"] .ll-page .ll-fbar-search,
html[data-vp="lg"] .ll-page .ll-fbar-search { flex: 1 1 200px; }
html[data-vp="xs"] .ll-page .ll-fbar-search,
html[data-vp="sm"] .ll-page .ll-fbar-search { flex: 1 1 100%; }
html[data-vp="xs"] .ll-page .ll-fbar-search input,
html[data-vp="sm"] .ll-page .ll-fbar-search input,
html[data-vp="md"] .ll-page .ll-fbar-search input { width: 100%; }
/* Segmented controls SCROLL rather than wrap — a segmented control split across
 * two lines stops reading as one choice. (`flex-shrink:0` was the first attempt
 * and it made things worse: it stopped the 714px status control shrinking without
 * giving it anywhere to go, so the page still overflowed, just less politely.)
 * A partly-visible last segment is the standard affordance for "there is more
 * this way" and needs no chevron. */
html[data-vp="xs"] .ll-page .ll-seg,
html[data-vp="sm"] .ll-page .ll-seg,
html[data-vp="md"] .ll-page .ll-seg,
html[data-vp="lg"] .ll-page .ll-seg {
  flex: 1 1 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
html[data-vp="xs"] .ll-page .ll-seg::-webkit-scrollbar,
html[data-vp="sm"] .ll-page .ll-seg::-webkit-scrollbar,
html[data-vp="md"] .ll-page .ll-seg::-webkit-scrollbar,
html[data-vp="lg"] .ll-page .ll-seg::-webkit-scrollbar { height: 0; }
html[data-vp="xs"] .ll-page .ll-seg > *,
html[data-vp="sm"] .ll-page .ll-seg > *,
html[data-vp="md"] .ll-page .ll-seg > *,
html[data-vp="lg"] .ll-page .ll-seg > * { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
.ll-fbar-search { position: relative; }
.ll-fbar-search input {
  padding: 8px 12px 8px 34px;
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 10px;
  font-size: 12.5px;
  min-width: 240px;
  box-shadow: var(--shadow-rest);
  font-family: inherit;
  color: var(--ink, #0A0A0A);
}
.ll-fbar-search input:focus {
  outline: none;
  border-color: var(--ink, #0A0A0A);
  box-shadow: 0 0 0 3px rgba(10,10,10,.05);
}
.ll-fbar-search .ico {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--s400, #A8A29E);
  pointer-events: none;
}

/* ── Lead table ────────────────────────────────────────────────────────── */
.ll-tbl-wrap {
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-rest);
}
/* layout fix (leads-narrow-viewport-wrap, 2026-07-30): the table body itself
   scrolls horizontally at narrow viewports instead of every column being
   squeezed by the browser's auto table-layout — that squeeze was forcing the
   name/brief/suburb/phone line to wrap across 2-3 rows with a stray "·"
   separator stranded alone. min-width matches the table's own natural width
   floor (title's 260px + the other columns' typical content width) so the
   scrollbar only appears when it's actually needed. */
.ll-tbl-scroll {
  overflow-x: auto;
  /* A-398 — breathing room so a bubble row's hover shadow/lift on the very
     first/last row doesn't get clipped against this box's own edge (setting
     only overflow-x forces overflow-y to 'auto' too, per the CSS Overflow
     spec, so it clips vertically as well without this). */
  padding: 5px 0;
}
.ll-tbl {
  width: 100%;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0 7px;
}
.ll-tbl thead {
  background: transparent;
}
.ll-tbl th {
  padding: 11px 14px 6px;
  text-align: left;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--s500, #78716C);
  white-space: nowrap;
}
.ll-tbl th.ll-r { text-align: right; }
/* A-398 — "bubble" row treatment (Phoenix: "same bubble/high-UI treatment"
   as the Today page / Dashboard): each row is its own rounded, separated
   pill card rather than a flat table line — border-spacing above pulls rows
   apart, first/last td radius + shared border closes each row into a bubble.
   transform lives on the TD (not the TR — table rows can't be transformed
   predictably in normal table layout) so every cell in the row lifts in
   lockstep, GPU-composited, never triggers a layout reflow — same idiom as
   every other hover-grow control already added sitewide (spartan-tokens.css). */
.ll-tbl td {
  padding: 13px 14px;
  font-size: 13px;
  border-top: 1px solid var(--s200, #E7E5E4);
  border-bottom: 1px solid var(--s200, #E7E5E4);
  vertical-align: middle;
  background: #fff;
  transition: transform 160ms cubic-bezier(.4,0,.2,1), box-shadow 160ms ease, border-color 160ms ease;
}
.ll-tbl tbody tr {
  cursor: pointer;
  position: relative;
}
.ll-tbl tbody tr:hover td {
  border-color: var(--red, #a16207);
  box-shadow: 0 6px 16px rgba(0,0,0,.09);
  transform: translateY(-1.5px);
  z-index: 1;
}
.ll-tbl tbody tr td:first-child {
  padding-left: 16px;
  border-left: 1px solid var(--s200, #E7E5E4);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.ll-tbl tbody tr td:last-child {
  padding-right: 14px;
  border-right: 1px solid var(--s200, #E7E5E4);
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* GP-160 — pin the row-actions column to the right edge of the scroller.
   The actions column is LAST, so whenever the table is wider than its box it
   is the first thing to disappear into .ll-tbl-scroll's overflow — and the
   horizontal scrollbar sits below ~2,200px of rows, so nobody ever finds it.
   That is how six live buttons (call / email / sms / book / quote / snooze)
   read as "not implemented". The shell width fix (99-init.js, GP-160) makes
   the table FIT on a wide monitor, where this rule is then a no-op: with no
   overflow, right:0 IS the cell's natural position. On a laptop it keeps the
   buttons reachable at the cost of covering Labels until you scroll, which
   beats losing every row action. Needs border-collapse:separate (set above) —
   sticky cells do nothing under border-collapse:collapse in Chrome. */
.ll-tbl thead th.ll-td-actions,
.ll-tbl tbody td.ll-td-actions {
  position: sticky;
  right: 0;
  z-index: 3;
  background: #fff;
}
.ll-tbl tbody td.ll-td-actions {
  box-shadow: -10px 0 12px -10px rgba(0,0,0,.18);
}
/* Row hover already repaints box-shadow on every td (see above); restate the
   pinned cell's edge shading so the lift doesn't drop it mid-hover. */
.ll-tbl tbody tr:hover td.ll-td-actions {
  box-shadow: 0 6px 16px rgba(0,0,0,.09), -10px 0 12px -10px rgba(0,0,0,.18);
}

/* Lead cell */
.ll-lead-cell {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.ll-page .av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  letter-spacing: -0.01em;
}
.ll-lead-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
  letter-spacing: -0.005em;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ll-lead-meta {
  font-size: 11.5px;
  color: var(--s500, #78716C);
  margin-top: 3px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  /* layout fix (leads-narrow-viewport-wrap, 2026-07-30): this line used
     flex-wrap:wrap, so on a squeezed column each piece (brief text, "·"
     separator, suburb/state, phone) could wrap to its own line independently
     — the "·" is barely a few px wide, so it regularly ended up stranded
     alone on a line between two wrapped neighbours. Single line now; the
     enquiry brief (the one piece with unpredictable length) truncates via
     .ll-lead-meta b below, while the separators/suburb/phone — short, and
     the more useful-at-a-glance fields — always stay fully visible. */
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
}
.ll-lead-meta b {
  color: var(--s700, #44403C);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 20px;
}
.ll-lead-meta .sep,
.ll-lead-meta .ll-meta-piece,
.ll-lead-meta .ll-meta-call { flex-shrink: 0; white-space: nowrap; }
.ll-lead-meta .sep { color: var(--s300, #D6D3D1); }

/* Source cell */
.ll-src { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ll-src-ico {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.ll-src-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.ll-src-sub {
  font-size: 10.5px;
  color: var(--s500, #78716C);
  font-weight: 600;
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* Quality pill */
.ll-qual {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ll-qual .ll-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.ll-qual-hot  { background: #DCFCE7; color: #15803D; box-shadow: inset 0 0 0 1px rgba(21,128,61,.18); }
.ll-qual-hot .ll-dot { background: #15803D; }
.ll-qual-warm { background: #FEF3C7; color: #D97706; box-shadow: inset 0 0 0 1px rgba(146,64,14,.18); }
.ll-qual-warm .ll-dot { background: #D97706; }
.ll-qual-cold { background: var(--s100, #F5F5F4); color: var(--s500, #78716C); box-shadow: inset 0 0 0 1px var(--s200, #E7E5E4); }
.ll-qual-cold .ll-dot { background: var(--s400, #A8A29E); }
.ll-qual-none { color: var(--s400, #A8A29E); font-weight: 600; font-size: 14px; }

/* Time cell (Created / Next Activity) */
.ll-t-cell { display: flex; flex-direction: column; gap: 1px; }
.ll-t-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
  font-variant-numeric: tabular-nums;
}
.ll-t-val.ll-red { color: var(--red, #a16207); }
.ll-t-val.ll-muted { color: var(--s400, #A8A29E); font-weight: 500; }
.ll-t-sub {
  font-size: 10px;
  color: var(--s400, #A8A29E);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ll-t-sub.ll-red { color: var(--red, #a16207); }

/* Owner cell */
.ll-owner-cell { display: inline-flex; align-items: center; gap: 8px; }
.ll-owner-cell .av { width: 26px; height: 26px; font-size: 10px; }
.ll-owner-name { font-size: 12px; font-weight: 700; color: var(--s700, #44403C); }
.ll-owner-unassigned {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--pale-red, #fefce8);
  color: var(--red, #a16207);
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(161,98,7,.18);
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  border: none;
  font-family: inherit;
}
.ll-owner-unassigned:hover {
  background: var(--fos-plate);
  color: var(--fos-on-plate);
}

/* Quick-action cluster — was opacity:0 until row-hover, invisible by default
   (a real usability problem on touch/tablet, which has no hover state, and
   just generally hard to discover on desktop too). Always visible now,
   matching every other redone surface (Today's _renderInlineRowActions,
   Deal Detail's .qa-btn) — the subtle hover lift on the buttons themselves
   is still there to reward the pointer, but the row no longer hides its own
   controls. */
.ll-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.ll-qa-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  color: var(--s600, #57534E);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.ll-qa-btn .ico { width: 15px; height: 15px; }
.ll-qa-btn:hover {
  background: var(--ink, #0A0A0A);
  color: #fff;
  border-color: var(--ink, #0A0A0A);
  transform: translateY(-1px);
}
.ll-qa-btn.ll-green:hover { background: #15803D; border-color: #15803D; }
.ll-qa-btn.ll-red:hover   { background: var(--fos-plate); border-color: var(--fos-plate); color: var(--fos-on-plate); }
/* A-400 — Build Quote quick action: same shell as its siblings, distinct
   purple accent on hover (matches the CAD/design accent used elsewhere) so
   it reads as "opens a different tool," not just another comms shortcut. */
.ll-qa-btn.ll-qa-btn-quote:hover { background: #7C3AED; border-color: #7C3AED; }

/* Table footer */
.ll-tbl-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  background: var(--s50, #FAFAF9);
  border-top: 1px solid var(--s200, #E7E5E4);
  font-size: 12px;
  color: var(--s500, #78716C);
  font-weight: 600;
}
.ll-tbl-foot b { color: var(--ink, #0A0A0A); }
.ll-tbl-foot .ll-red { color: var(--red, #a16207); }
.ll-tbl-foot .ll-green { color: #15803D; }
.ll-tbl-foot-r { display: flex; align-items: center; gap: 6px; }
.ll-tbl-foot-r button {
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid var(--s200, #E7E5E4);
  background: #fff;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--s600, #57534E);
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  cursor: pointer;
  font-family: inherit;
}

/* ── Pagination controls (top + bottom of leads table) ──────────────── */
.ll-tbl-foot-pager {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ll-tbl-head-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 18px;
  background: #fff;
  border-bottom: 1px solid var(--s200, #E7E5E4);
  flex-wrap: wrap;
}
.ll-pager-summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--s500, #78716C);
}
.ll-pager-summary b { color: var(--ink, #0A0A0A); font-weight: 800; font-variant-numeric: tabular-nums; }
.ll-pager-controls-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ll-pager-size {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--s500, #78716C);
}
.ll-pager-size-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ll-pager-size select {
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px solid var(--s200, #E7E5E4);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
  cursor: pointer;
  font-family: inherit;
  outline: none;
  transition: border-color 180ms cubic-bezier(.4,0,.2,1);
}
.ll-pager-size select:hover { border-color: var(--ink, #0A0A0A); }
.ll-pager-size select:focus { border-color: var(--red, #a16207); box-shadow: 0 0 0 3px rgba(250,204,21,.1); }
.ll-pager-nav-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 8px;
  padding: 3px;
}
.ll-pager-nums {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 3px;
  border-left: 1px solid var(--s100, #F5F5F4);
  border-right: 1px solid var(--s100, #F5F5F4);
}
.ll-pager-btn {
  padding: 5px 9px;
  border: none;
  background: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--s600, #57534E);
  cursor: pointer;
  font-family: inherit;
  border-radius: 5px;
  min-width: 28px;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  font-variant-numeric: tabular-nums;
}
.ll-pager-btn:hover:not([disabled]) {
  background: var(--s100, #F5F5F4);
  color: var(--ink, #0A0A0A);
}
.ll-pager-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.ll-pager-btn.ll-on {
  background: var(--fos-plate);
  color: var(--fos-on-plate);
}
.ll-pager-btn.ll-on:hover {
  background: var(--fos-plate);
  color: var(--fos-on-plate);
}
.ll-pager-nav {
  font-weight: 700;
  padding: 5px 11px;
}
.ll-pager-ellipsis {
  padding: 0 4px;
  font-size: 12px;
  color: var(--s400, #A8A29E);
  font-weight: 700;
  user-select: none;
}
@media (max-width: 720px) {
  .ll-tbl-head-pager { padding: 10px 14px; }
  .ll-pager-summary { width: 100%; }
  .ll-pager-controls-top { width: 100%; justify-content: space-between; }
  .ll-tbl-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .ll-tbl-foot-pager { justify-content: space-between; }
}
.ll-tbl-foot-r button:hover { border-color: var(--ink, #0A0A0A); color: var(--ink, #0A0A0A); }
.ll-tbl-foot-r button.ll-on { background: var(--ink, #0A0A0A); color: #fff; border-color: var(--ink, #0A0A0A); }

/* ── Rail (Map + Smart Cluster Suggestions) ────────────────────────────── */
.ll-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 96px;
}
.ll-rcard {
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-rest);
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.ll-rcard:hover {
  border-color: var(--s300, #D6D3D1);
  box-shadow: var(--shadow-hover);
}
.ll-rcard-h {
  padding: 14px 16px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ll-rcard-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s500, #78716C);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ll-rcard-link {
  font-size: 11px;
  font-weight: 700;
  color: var(--s500, #78716C);
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 6px;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.ll-rcard-link:hover {
  color: var(--ink, #0A0A0A);
  background: var(--s100, #F5F5F4);
}

/* Rep legend (top-left of map card) */
.ll-rep-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px 14px;
  font-size: 11.5px;
  font-weight: 700;
  border-top: 1px solid var(--s100, #F5F5F4);
}
.ll-rep-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--s700, #44403C);
}
.ll-rep-legend-row .ll-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.ll-rep-legend-row .ll-ct {
  color: var(--s400, #A8A29E);
  font-weight: 600;
  margin-left: auto;
  font-size: 10.5px;
}
.ll-rep-legend-empty {
  font-size: 11.5px;
  color: var(--s400, #A8A29E);
  font-weight: 500;
  font-style: italic;
}

/* Smart Cluster cards */
.ll-cluster {
  padding: 14px 16px;
  border-bottom: 1px solid var(--s100, #F5F5F4);
  transition: background 180ms cubic-bezier(.4,0,.2,1);
}
.ll-cluster:last-child { border-bottom: 0; }
.ll-cluster:hover { background: var(--s50, #FAFAF9); }
.ll-cluster-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
}
.ll-cluster-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink, #0A0A0A);
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ll-cluster-pin {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red, #a16207);
  box-shadow: 0 0 0 3px var(--pale-red, #fefce8);
  flex-shrink: 0;
}
.ll-quality-mix {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
}
.ll-quality-mix-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--s600, #57534E);
}
.ll-quality-mix-item .ll-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.ll-quality-mix-item.hot .ll-dot  { background: #15803D; animation: pulse-hot-dot 1.8s infinite; }
.ll-quality-mix-item.warm .ll-dot { background: #D97706; }
.ll-quality-mix-item.cold .ll-dot { background: var(--s400, #A8A29E); }
@media (prefers-reduced-motion: reduce) {
  .ll-page .ll-quality-mix-item.hot .ll-dot { animation: none !important; }
}

.ll-cluster-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--s500, #78716C);
  font-weight: 700;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ll-cluster-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: var(--s100, #F5F5F4);
  border-radius: 5px;
}
.ll-cluster-stat .ico { color: var(--s500, #78716C); }
.ll-cluster-stat.ll-save {
  background: #DCFCE7;
  color: #15803D;
}
.ll-cluster-stat.ll-save .ico { color: #15803D; }
.ll-cluster-stat.ll-rep {
  background: #DBEAFE;
  color: #1D4ED8;
}
.ll-cluster-stat.ll-rep .ico { color: #1D4ED8; }

.ll-cluster-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: var(--ink, #0A0A0A);
  color: #fff;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  margin-bottom: 10px;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  box-shadow: 0 4px 12px -4px rgba(10,10,10,.3);
  border: none;
  font-family: inherit;
  width: 100%;
}
.ll-cluster-cta:hover {
  background: var(--fos-plate);
  color: var(--fos-on-plate);
  box-shadow: 0 4px 12px -4px rgba(250,204,21,.5);
  transform: translateY(-1px);
}
.ll-cluster-cta .ico { transition: transform 180ms cubic-bezier(.4,0,.2,1); }
.ll-cluster-cta:hover .ico { transform: translateX(2px); }

.ll-cluster-leads {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ll-cl-lead {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  font-size: 12px;
}
.ll-cl-lead:hover {
  background: #fff;
  box-shadow: var(--shadow-rest);
}
.ll-cl-lead .av { width: 22px; height: 22px; font-size: 9.5px; }
.ll-cl-lead-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ll-cl-lead-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ll-cl-lead-q {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ll-cl-lead-q.hot  { background: #15803D; animation: pulse-hot-dot 1.8s infinite; }
.ll-cl-lead-q.warm { background: #D97706; }
.ll-cl-lead-q.cold { background: var(--s400, #A8A29E); }
@media (prefers-reduced-motion: reduce) {
  .ll-page .ll-cl-lead-q.hot { animation: none !important; }
}
.ll-cl-lead-name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ll-cl-lead-sub {
  font-size: 9.5px;
  color: var(--s500, #78716C);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-left: 13px;
  line-height: 1.3;
}
.ll-cl-lead-sub b { color: var(--s700, #44403C); font-weight: 700; }

.ll-cluster-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--s200, #E7E5E4);
}
.ll-cluster-foot button {
  padding: 5px 10px;
  border: 1px solid var(--s200, #E7E5E4);
  background: #fff;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--s600, #57534E);
  cursor: pointer;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  font-family: inherit;
}
.ll-cluster-foot button:hover {
  border-color: var(--ink, #0A0A0A);
  color: var(--ink, #0A0A0A);
}

.ll-cluster-empty {
  padding: 30px 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--s500, #78716C);
  font-weight: 600;
}

/* Pill overdue (shared with jobs list — but ensure available here) */
.ll-page .pill-overdue {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--pale-red, #fefce8);
  color: var(--red, #a16207);
  padding: 2px 7px 2px 6px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(161,98,7,.25);
  white-space: nowrap;
}
.ll-page .pill-overdue .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red, #a16207);
}

/* Compact density toggle */
.ll-tbl.ll-dense td { padding: 9px 14px; }

/* ── Sortable column headers ───────────────────────────────────────────── */
.ll-tbl thead th.ll-th-sortable {
  cursor: pointer;
  user-select: none;
  transition: background 180ms cubic-bezier(.4,0,.2,1),
              color 180ms cubic-bezier(.4,0,.2,1);
}
.ll-tbl thead th.ll-th-sortable:hover {
  background: var(--s100, #F5F5F4);
  color: var(--ink, #0A0A0A);
}
.ll-tbl thead th.ll-th-sortable.ll-sorted {
  color: var(--ink, #0A0A0A);
  background: var(--s100, #F5F5F4);
}
.ll-sort-arrow {
  color: var(--red, #a16207);
  font-size: 8px;
  letter-spacing: 0;
  margin-left: 3px;
  display: inline-block;
  vertical-align: middle;
}

/* Email/SMS as <a> need the same look as the button qa-btns */
.ll-actions a.ll-qa-btn { text-decoration: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Smart Cluster Planner — Phoenix request 2026-05-21
   Full-page view showing a rep's week with day-by-day appointments,
   recommended slots for the cluster leads, drive + downtime gaps, and
   a cluster map. Classes prefixed `cp-` to avoid collisions.
   ══════════════════════════════════════════════════════════════════════════ */

.cp-page {
  padding: 4px 0 48px;
  --cp-red: #a16207;
  --cp-q-hot: #15803D;
  --cp-q-warm: #D97706;
}

.cp-empty {
  text-align: center;
  padding: 80px 24px;
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 14px;
  margin-top: 24px;
}
.cp-empty-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink, #0A0A0A);
  letter-spacing: -0.015em;
}
.cp-empty-desc {
  font-size: 13px;
  color: var(--s500, #78716C);
  margin-top: 8px;
  font-weight: 500;
}

/* Header */
.cp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--s200, #E7E5E4);
  flex-wrap: wrap;
}
.cp-header-l { display: flex; align-items: center; gap: 16px; }
.cp-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--s200, #E7E5E4);
  background: #fff;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--s700, #44403C);
  cursor: pointer;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  font-family: inherit;
  box-shadow: var(--shadow-rest, 0 1px 2px rgba(10,10,10,.03));
}
.cp-back-btn:hover {
  border-color: var(--ink, #0A0A0A);
  color: var(--ink, #0A0A0A);
  transform: translateX(-2px);
  box-shadow: var(--shadow-hover, 0 8px 24px -8px rgba(10,10,10,.18));
}
.cp-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--s400, #A8A29E);
  margin-bottom: 4px;
}
.cp-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink, #0A0A0A);
  margin: 0;
  font-family: var(--ff-sans, 'Archivo', system-ui, sans-serif);
  line-height: 1;
}
.cp-rep-name { color: var(--cp-red); }
.cp-rep-suffix { color: var(--s500, #78716C); font-weight: 600; margin-left: 8px; font-size: 22px; }
.cp-subtitle {
  font-size: 12.5px;
  color: var(--s500, #78716C);
  font-weight: 600;
  margin-top: 6px;
  letter-spacing: -0.005em;
}
.cp-header-r {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cp-rep-select {
  padding: 7px 12px;
  border: 1px solid var(--s200, #E7E5E4);
  background: #fff;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--s700, #44403C);
  cursor: pointer;
  font-family: inherit;
  min-width: 200px;
  box-shadow: var(--shadow-rest);
}
.cp-rep-select:hover { border-color: var(--ink, #0A0A0A); }
.cp-week-nav {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
  box-shadow: var(--shadow-rest);
}
.cp-week-btn {
  padding: 5px 9px;
  background: none;
  border: none;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--s600, #57534E);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.cp-week-btn:hover { color: var(--ink, #0A0A0A); background: var(--s100, #F5F5F4); }
.cp-week-today { padding: 5px 11px; }

/* Layout */
.cp-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 1180px) {
  .cp-layout { grid-template-columns: 1fr; }
}

/* Rail (map + lead list) */
.cp-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 96px;
}
.cp-rcard {
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-rest);
}
.cp-rcard-h {
  padding: 12px 16px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s500, #78716C);
  border-bottom: 1px solid var(--s100, #F5F5F4);
}

/* Map card */
.cp-map-card {
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-rest);
}
.cp-map-header {
  padding: 11px 14px;
  border-bottom: 1px solid var(--s100, #F5F5F4);
}
.cp-map-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink, #0A0A0A);
  letter-spacing: -0.005em;
}
.cp-map-svg-wrap {
  background: linear-gradient(135deg, #E8F0E5 0%, #DDE9D8 100%);
  position: relative;
  height: 200px;
  overflow: hidden;
}
.cp-map-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cp-map-route {
  fill: none;
  stroke: var(--cp-red, #a16207);
  stroke-width: .8;
  stroke-dasharray: 1.2 1;
  opacity: .65;
}
.cp-map-pin {
  fill: var(--cp-red, #a16207);
  stroke: #fff;
  stroke-width: .8;
}
.cp-map-pin-hot {
  fill: var(--cp-q-hot, #15803D);
}
.cp-map-label {
  font-size: 3px;
  font-weight: 800;
  fill: var(--ink, #0A0A0A);
  text-anchor: middle;
  font-family: var(--ff-sans, 'Archivo', sans-serif);
}
.cp-map-legend {
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}
.cp-map-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.cp-map-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fos-plate);
  color: var(--fos-on-plate);
  font-weight: 800;
  font-size: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cp-map-num.cp-hot { background: var(--cp-q-hot, #15803D); color: #fff; }
.cp-map-legend-name {
  flex: 1;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-map-legend-suburb {
  color: var(--s400, #A8A29E);
  font-weight: 600;
  font-size: 10px;
}

/* Cluster lead list (rail) */
.cp-cl-list {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cp-cl-lead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 180ms cubic-bezier(.4,0,.2,1);
}
.cp-cl-lead:hover { background: var(--s100, #F5F5F4); }
.cp-cl-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--s200, #E7E5E4);
  color: var(--s700, #44403C);
  font-weight: 800;
  font-size: 10.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cp-cl-num.cp-hot { background: var(--cp-q-hot, #15803D); color: #fff; }
.cp-cl-lead-body { flex: 1; min-width: 0; }
.cp-cl-lead-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cp-cl-qual {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
}
.cp-cl-qual-hot  { background: #DCFCE7; color: #15803D; }
.cp-cl-qual-warm { background: #FEF3C7; color: #D97706; }
.cp-cl-qual-cold { background: var(--s100, #F5F5F4); color: var(--s500, #78716C); }
.cp-cl-lead-meta {
  font-size: 10.5px;
  color: var(--s500, #78716C);
  font-weight: 600;
  margin-top: 2px;
}
.cp-cl-lead-meta b { color: var(--s700, #44403C); font-weight: 700; }

/* Week grid (Mon-Sun) */
.cp-week {
  display: flex;
  flex-direction: column;
}
.cp-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
@media (max-width: 1340px) { .cp-week-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .cp-week-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .cp-week-grid { grid-template-columns: 1fr; } }

.cp-day {
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--shadow-rest);
  display: flex;
  flex-direction: column;
  min-height: 240px;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.cp-day:hover {
  border-color: var(--s300, #D6D3D1);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.cp-day-weekend { background: var(--s50, #FAFAF9); }
.cp-day-empty { min-height: 160px; }
.cp-day-today {
  border-color: var(--cp-red, #a16207);
  box-shadow: 0 0 0 2px rgba(250,204,21,.08), var(--shadow-rest);
}
.cp-day-today .cp-day-dom { color: var(--cp-red, #a16207); }

.cp-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cp-day-date {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.cp-day-dow {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--s400, #A8A29E);
}
.cp-day-dom {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink, #0A0A0A);
  line-height: 1;
}
.cp-day-mon {
  font-size: 11px;
  font-weight: 700;
  color: var(--s500, #78716C);
}
.cp-day-flag {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--pale-red, #fefce8);
  color: var(--cp-red, #a16207);
}

.cp-day-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cp-day-empty-msg {
  font-size: 11px;
  color: var(--s400, #A8A29E);
  font-style: italic;
  font-weight: 500;
  text-align: center;
  padding: 20px 0;
}

/* Appointment row inside a day card */
.cp-apt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  background: var(--s50, #FAFAF9);
  border: 1px solid var(--s100, #F5F5F4);
  border-radius: 8px;
  transition: background 180ms cubic-bezier(.4,0,.2,1);
}
.cp-apt:hover { background: #fff; box-shadow: var(--shadow-rest); }
.cp-apt-suggested {
  background: var(--pale-red, #fefce8);
  border-color: rgba(161,98,7,.18);
  border-style: dashed;
}
.cp-apt-suggested:hover { background: #fff; border-style: solid; }
.cp-apt-time {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink, #0A0A0A);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 38px;
  display: flex;
  flex-direction: column;
}
.cp-apt-time-end {
  font-size: 9px;
  color: var(--s400, #A8A29E);
  font-weight: 600;
  letter-spacing: 0;
}
.cp-apt-body {
  flex: 1;
  min-width: 0;
}
.cp-apt-client {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-hot-badge {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.10em;
  padding: 1px 4px;
  background: var(--cp-q-hot, #15803D);
  color: #fff;
  border-radius: 3px;
}
.cp-apt-meta {
  font-size: 10px;
  color: var(--s500, #78716C);
  font-weight: 600;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-apt-status {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  background: #DCFCE7;
  color: #15803D;
  border-radius: 4px;
}
.cp-book-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  background: var(--fos-plate);
  color: var(--fos-on-plate);
  border: none;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  font-family: inherit;
  white-space: nowrap;
}
.cp-book-btn:hover {
  background: var(--fos-plate-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px -2px rgba(250,204,21,.5);
}

/* Gap row between appointments — shows drive + downtime */
.cp-gap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  margin-left: 12px;
}
.cp-gap-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--s300, #D6D3D1);
}
.cp-gap-detail {
  font-size: 10px;
  color: var(--s500, #78716C);
  font-weight: 600;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cp-gap-downtime {
  color: var(--cp-q-warm, #D97706);
  font-weight: 700;
}

/* Day summary footer */
.cp-day-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--s200, #E7E5E4);
}
.cp-summary-item {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--s600, #57534E);
  padding: 3px 7px;
  background: var(--s100, #F5F5F4);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.01em;
}
.cp-summary-item .ico { color: var(--s500, #78716C); }
.cp-summary-down {
  background: var(--warn-bg, #FEF3C7) !important;
  color: var(--warn-fg, #92400E) !important;
}

/* ── Static Maps image (replaces SVG when Google key is set) ─────────────── */
.cp-map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cp-map-source {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s400, #A8A29E);
  margin-left: 8px;
}
.cp-map-keyhint {
  position: absolute;
  left: 8px;
  bottom: 8px;
  right: 8px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 10.5px;
  color: var(--s700, #44403C);
  font-weight: 600;
  line-height: 1.3;
}
.cp-map-svg-wrap { position: relative; }

/* ── Sequential call queue modal ─────────────────────────────────────────── */
.cp-call-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, .55);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: cp-call-fade-in 180ms cubic-bezier(.4,0,.2,1);
}
@keyframes cp-call-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.cp-call-modal {
  width: 420px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 72px -16px rgba(10, 10, 10, .55);
  overflow: hidden;
  animation: cp-call-slide-up 220ms cubic-bezier(.4,0,.2,1);
}
@keyframes cp-call-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.cp-call-modal-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--s100, #F5F5F4);
}
.cp-call-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s500, #78716C);
}
.cp-call-close {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--s200, #E7E5E4);
  color: var(--s500, #78716C);
  font-size: 18px;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  font-family: inherit;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.cp-call-close:hover { background: var(--s100, #F5F5F4); color: var(--ink, #0A0A0A); }
.cp-call-progress {
  height: 3px;
  background: var(--s100, #F5F5F4);
}
.cp-call-progress-fill {
  height: 100%;
  background: var(--cp-red, #a16207);
  transition: width 220ms cubic-bezier(.4,0,.2,1);
}
.cp-call-body {
  padding: 22px 24px 18px;
  text-align: center;
}
.cp-call-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ink, #0A0A0A);
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.cp-call-avatar.is-hot {
  background: var(--cp-q-hot, #15803D);
  box-shadow: 0 0 0 4px rgba(21,128,61,.12);
}
.cp-call-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink, #0A0A0A);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cp-call-qual {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 5px;
}
.cp-call-phone {
  font-size: 14px;
  font-weight: 700;
  color: var(--s700, #44403C);
  font-variant-numeric: tabular-nums;
  margin-top: 8px;
  letter-spacing: -0.005em;
}
.cp-call-brief {
  font-size: 12px;
  color: var(--s500, #78716C);
  margin-top: 6px;
  font-weight: 600;
  line-height: 1.4;
}
.cp-call-brief b { color: var(--s700, #44403C); font-weight: 700; }
.cp-call-actions {
  padding: 14px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cp-call-btn {
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  font-family: inherit;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.cp-call-btn-primary {
  background: var(--fos-plate);
  color: var(--fos-on-plate);
  box-shadow: 0 4px 12px -4px rgba(250,204,21,.5);
}
.cp-call-btn-primary:hover:not(:disabled) {
  background: var(--fos-plate-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(250,204,21,.6);
}
.cp-call-btn-skip {
  background: #fff;
  color: var(--s700, #44403C);
  border-color: var(--s200, #E7E5E4);
}
.cp-call-btn-skip:hover {
  border-color: var(--ink, #0A0A0A);
  color: var(--ink, #0A0A0A);
}
.cp-call-btn-end {
  background: none;
  color: var(--s500, #78716C);
  font-size: 12px;
  padding: 8px 16px;
}
.cp-call-btn-end:hover { color: var(--red, #a16207); }
@media (prefers-reduced-motion: reduce) {
  .cp-call-overlay, .cp-call-modal { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   WIP-UI-CLUSTER-WIRE-01 — Inline notes panel + booking modal + email preview
   Classes are cw-* prefixed (cluster-wire) to keep the existing cp-* call
   queue + leads `ll-*` namespaces clean.
   ══════════════════════════════════════════════════════════════════════════ */

/* Inline notes panel on each day card — collapsed by default */
.cw-notes-card {
  margin-top: 10px;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 10px;
  background: var(--s50, #FAFAF9);
  overflow: hidden;
  transition: border-color 180ms cubic-bezier(.4,0,.2,1);
}
.cw-notes-card.cw-open { background: #fff; border-color: var(--s300, #D6D3D1); }
.cw-notes-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s500, #78716C);
}
.cw-notes-card.cw-open .cw-notes-h { border-bottom: 1px solid var(--s100, #F5F5F4); color: var(--ink, #0A0A0A); }
.cw-notes-h-l { display: inline-flex; align-items: center; gap: 8px; }
.cw-notes-count {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--s200, #E7E5E4);
  color: var(--s700, #44403C);
  letter-spacing: 0.04em;
}
.cw-notes-card.cw-open .cw-notes-count { background: var(--ink, #0A0A0A); color: #fff; }
.cw-notes-chev {
  width: 14px;
  height: 14px;
  color: var(--s400, #A8A29E);
  transition: transform 180ms cubic-bezier(.4,0,.2,1);
}
.cw-notes-card.cw-open .cw-notes-chev { transform: rotate(180deg); color: var(--ink, #0A0A0A); }
.cw-notes-body {
  display: none;
  padding: 11px 12px 12px;
}
.cw-notes-card.cw-open .cw-notes-body { display: block; }
.cw-notes-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 160px;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 10px;
}
.cw-notes-empty {
  font-size: 11px;
  color: var(--s400, #A8A29E);
  font-style: italic;
  font-weight: 500;
  padding: 6px 0;
}
.cw-note {
  padding: 8px 11px;
  background: var(--s50, #FAFAF9);
  border-radius: 7px;
  border-left: 2px solid var(--s300, #D6D3D1);
  transition: background 180ms cubic-bezier(.4,0,.2,1);
}
.cw-note:hover {
  background: #fff;
  box-shadow: var(--shadow-rest, 0 1px 2px rgba(10,10,10,.03));
}
.cw-note.cw-fresh {
  border-left-color: var(--red, #a16207);
  background: var(--pale-red, #fefce8);
}
.cw-note.cw-system { border-left-color: var(--s400, #A8A29E); }
.cw-note.cw-call   { border-left-color: var(--red, #a16207); }
.cw-note.cw-inbound{ border-left-color: var(--info-fg, #1D4ED8); background: var(--info-bg, #DBEAFE); }
.cw-note-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  gap: 8px;
}
.cw-note-author {
  font-size: 10px;
  font-weight: 800;
  color: var(--ink, #0A0A0A);
  letter-spacing: 0.04em;
}
.cw-note-kind {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  background: var(--s200, #E7E5E4);
  color: var(--s600, #57534E);
  margin-left: 6px;
}
.cw-note.cw-call .cw-note-kind   { background: var(--pale-red, #fefce8); color: var(--red, #a16207); }
.cw-note.cw-system .cw-note-kind { background: var(--s200, #E7E5E4); color: var(--s600, #57534E); }
.cw-note.cw-inbound .cw-note-kind{ background: #BAE6FD; color: var(--info-fg, #1D4ED8); }
.cw-note-time {
  font-size: 9.5px;
  color: var(--s400, #A8A29E);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cw-note-body {
  font-size: 11.5px;
  color: var(--s700, #44403C);
  line-height: 1.5;
  font-weight: 500;
  white-space: pre-wrap;
}

.cw-notes-input-row {
  display: flex;
  gap: 7px;
  align-items: flex-start;
}
.cw-notes-input {
  flex: 1;
  background: var(--s50, #FAFAF9);
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12px;
  line-height: 1.4;
  min-height: 38px;
  color: var(--ink, #0A0A0A);
  resize: vertical;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  font-family: inherit;
}
.cw-notes-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--ink, #0A0A0A);
  box-shadow: 0 0 0 3px rgba(10,10,10,.05);
}
.cw-notes-input::placeholder { color: var(--s400, #A8A29E); }
.cw-notes-savestate {
  font-size: 10px;
  font-weight: 700;
  margin-top: 6px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cw-notes-savestate.cw-saving { color: var(--s500, #78716C); }
.cw-notes-savestate.cw-saved  { color: var(--q-hot, #15803D); }
.cw-notes-savestate.cw-failed { color: var(--red, #a16207); }
.cw-notes-savestate .cw-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.cw-notes-savestate.cw-saving .cw-dot { animation: pulse-hot-dot 1s infinite; }

/* ── Booking modal ────────────────────────────────────────────────────── */
.cw-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, .55);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 32px;
  animation: cw-modal-in 200ms cubic-bezier(.4,0,.2,1);
}
@keyframes cw-modal-in { from { opacity: 0; } to { opacity: 1; } }
.cw-modal {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 72px -16px rgba(10, 10, 10, .55);
  width: 920px;
  max-width: 100%;
  max-height: calc(100vh - 64px);
  overflow: hidden;
  display: grid;
  grid-template-columns: 540px 1fr;
  animation: cw-modal-slide 220ms cubic-bezier(.4,0,.2,1);
}
@media (max-width: 900px) { .cw-modal { grid-template-columns: 1fr; } }
@keyframes cw-modal-slide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* I-105 rework: 3-column booking modal. Header spans the top; below it a
   3-column row: A) contact + comms | B) booking form | C) region-C router
   (calendar / email / preview). Overrides the legacy 2-col grid layout above. */
.cw-modal.cw-modal-3col {
  display: flex;
  flex-direction: column;
  width: 1180px;
  /* A-049 (Finding 4) — let the rep grow the modal, never shrink it below the
     size it ships at. min-width/min-height are the CURRENT rendered dimensions
     (measured live: 1180x778), so the resize handle can only enlarge. The base
     .cw-modal rule sets overflow:hidden, which would suppress the resize grip —
     override to auto here (more specific) so the corner handle works. */
  resize: both;
  overflow: auto;
  min-width: 1180px;
  min-height: 778px;
  max-width: 96vw;
  max-height: 94vh;
}
/* Phone width stacks the columns; a drag-resize grip makes no sense there. */
@media (max-width: 900px) {
  .cw-modal.cw-modal-3col { resize: none; }
}
/* A-051 R4 — short laptop screens. The shipped min-height:778px is taller than a
   ~768px viewport (94vh ≈ 722px), so the modal overflowed the bottom and the
   Book/Cancel buttons + lower calendar rows were unreachable. On short viewports,
   drop the min-height so max-height:94vh caps the modal and the columns scroll
   internally instead of running off-screen. */
@media (max-height: 820px) {
  .cw-modal.cw-modal-3col { min-height: 0; }
}
/* A-051 R4 — always-visible, easy-to-grab vertical scrollbars on the three
   scrolling columns (form/contact/calendar pane). Previously only .cbp-cal-scroll
   carried this styling, so the form column — which holds the Book button below the
   fold on small screens — used an unstyled bar. NB: with `scrollbar-width: auto`
   set, current Chrome (121+) governs the bar's WIDTH natively (Windows ≈ 17px) and
   ignores the `::-webkit-scrollbar { width }` below — that's intentional: `auto`
   is the widest standard option, so we get the full-size native bar plus the
   styled rounded thumb. The webkit rules are kept for older Chromium that still
   honours them. The real small-screen fix is the min-height relax above. */
.cw-modal-cols .cw-modal-form,
.cw-modal-cols .cw-modal-contact,
.cw-modal-cols .cw-preview {
  scrollbar-width: auto;
  scrollbar-color: var(--s400, #A8A29E) var(--s100, #F5F5F4);
}
.cw-modal-cols .cw-modal-form::-webkit-scrollbar,
.cw-modal-cols .cw-modal-contact::-webkit-scrollbar,
.cw-modal-cols .cw-preview::-webkit-scrollbar { width: 16px; }
.cw-modal-cols .cw-modal-form::-webkit-scrollbar-track,
.cw-modal-cols .cw-modal-contact::-webkit-scrollbar-track,
.cw-modal-cols .cw-preview::-webkit-scrollbar-track { background: var(--s100, #F5F5F4); }
.cw-modal-cols .cw-modal-form::-webkit-scrollbar-thumb,
.cw-modal-cols .cw-modal-contact::-webkit-scrollbar-thumb,
.cw-modal-cols .cw-preview::-webkit-scrollbar-thumb {
  background: var(--s400, #A8A29E);
  border-radius: 8px;
  border: 3px solid var(--s100, #F5F5F4);
  min-height: 48px;
}
.cw-modal-cols .cw-modal-form::-webkit-scrollbar-thumb:hover,
.cw-modal-cols .cw-modal-contact::-webkit-scrollbar-thumb:hover,
.cw-modal-cols .cw-preview::-webkit-scrollbar-thumb:hover { background: var(--s500, #78716C); }
.cw-modal-3col .cw-modal-h {
  padding: 18px 22px;
  flex: 0 0 auto;
}
.cw-modal-cols {
  display: grid;
  grid-template-columns: 280px minmax(320px, 1fr) minmax(360px, 1.1fr);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.cw-modal-cols .cw-modal-form {
  border-right: 1px solid var(--s100, #F5F5F4);
  border-left: 1px solid var(--s100, #F5F5F4);
}
.cw-modal-contact {
  padding: 18px 18px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cw-modal-cols .cw-preview {
  overflow-y: auto;
}
/* Tablet — narrow the contact rail, let the calendar take the slack. */
@media (max-width: 1180px) {
  .cw-modal.cw-modal-3col { width: 100%; }
  .cw-modal-cols { grid-template-columns: 240px minmax(280px, 1fr) minmax(300px, 1fr); }
}
/* Phone / native — stack all three regions, scroll the modal body vertically. */
@media (max-width: 900px) {
  /* Trim the overlay gutter so the stacked modal uses the full phone width. */
  .cw-modal-overlay { padding: 12px; }
  .cw-modal.cw-modal-3col {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 24px);
  }
  .cw-modal-cols {
    grid-template-columns: 1fr;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .cw-modal-contact,
  .cw-modal-cols .cw-modal-form,
  .cw-modal-cols .cw-preview { overflow-y: visible; max-width: 100%; }
  .cw-modal-cols .cw-modal-form { border-left: none; border-right: none; border-top: 1px solid var(--s100, #F5F5F4); border-bottom: 1px solid var(--s100, #F5F5F4); }
  /* The all-rep calendar can be wider than a phone — let IT scroll sideways
     inside its own pane instead of pushing the whole modal/page wider. */
  .cw-preview > .cbp-cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.cw-modal-form {
  padding: 20px 22px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid var(--s100, #F5F5F4);
}
.cw-modal-h {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--s100, #F5F5F4);
}
.cw-modal-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s400, #A8A29E);
}
.cw-modal-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink, #0A0A0A);
  margin-top: 4px;
}
.cw-modal-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--s200, #E7E5E4);
  color: var(--s500, #78716C);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.cw-modal-close:hover { background: var(--s100, #F5F5F4); color: var(--ink, #0A0A0A); }

.cw-field { display: flex; flex-direction: column; gap: 5px; }
.cw-field-lbl {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s500, #78716C);
}
.cw-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cw-field-row.cw-three { grid-template-columns: 1fr 1fr 1fr; }
.cw-input,
.cw-modal select,
.cw-modal textarea {
  padding: 9px 11px;
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #0A0A0A);
  font-family: inherit;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.cw-modal textarea { resize: vertical; min-height: 60px; line-height: 1.4; }
.cw-input:focus,
.cw-modal select:focus,
.cw-modal textarea:focus {
  outline: none;
  border-color: var(--ink, #0A0A0A);
  box-shadow: 0 0 0 3px rgba(10,10,10,.05);
}
.cw-title-preview {
  padding: 11px 12px;
  background: var(--s50, #FAFAF9);
  border: 1px dashed var(--s300, #D6D3D1);
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
  letter-spacing: -0.005em;
}
.cw-title-preview .cw-title-lbl {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s400, #A8A29E);
  margin-bottom: 4px;
}
/* Appointment-kind dropdown (Measure / Site visit) + the title it derives. */
.cw-title-preview #cw_book_kind { width: 100%; box-sizing: border-box; }
.cw-title-preview #cw_book_title_preview {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--s500, #78716C);
}

.cw-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--s50, #FAFAF9);
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 9px;
  cursor: pointer;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.cw-toggle:hover { background: #fff; border-color: var(--s300, #D6D3D1); }
.cw-toggle.cw-on {
  background: #fff;
  border-color: var(--ink, #0A0A0A);
  box-shadow: 0 0 0 1px var(--ink, #0A0A0A);
}
.cw-toggle input { margin: 0; cursor: pointer; }
.cw-toggle-l { flex: 1; min-width: 0; }
.cw-toggle-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
  letter-spacing: -0.005em;
}
.cw-toggle-sub {
  font-size: 10.5px;
  color: var(--s500, #78716C);
  font-weight: 600;
  margin-top: 2px;
}
.cw-toggle:has(input:disabled) {
  opacity: .55;
  cursor: not-allowed;
}

.cw-conflict {
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}
.cw-conflict.cw-none {
  background: var(--ok-bg, #DCFCE7);
  color: var(--ok-fg, #15803D);
  box-shadow: inset 0 0 0 1px var(--ok-border, rgba(21,128,61,.18));
}
.cw-conflict.cw-soft {
  background: var(--warn-bg, #FEF3C7);
  color: var(--warn-fg, #92400E);
  box-shadow: inset 0 0 0 1px var(--warn-border, rgba(146,64,14,.18));
}
.cw-conflict.cw-hard {
  background: var(--pale-red, #fefce8);
  color: var(--red, #a16207);
  box-shadow: inset 0 0 0 1px rgba(161,98,7,.25);
}
.cw-conflict .ico { flex-shrink: 0; margin-top: 1px; }

.cw-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--s100, #F5F5F4);
}
.cw-modal-actions .btn { flex: 1; justify-content: center; }
.cw-modal-actions .cw-cancel { flex: 0 0 auto; padding: 10px 14px; }

/* Email preview pane (right side of the modal) */
.cw-preview {
  background: var(--s50, #FAFAF9);
  display: flex;
  flex-direction: column;
}
.cw-preview-h {
  padding: 14px 18px;
  border-bottom: 1px solid var(--s200, #E7E5E4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.cw-preview-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s500, #78716C);
}
.cw-preview-body {
  padding: 18px;
  overflow-y: auto;
  flex: 1;
}
.cw-preview-subject {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink, #0A0A0A);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--s200, #E7E5E4);
  letter-spacing: -0.005em;
}
.cw-preview-email {
  background: #fff;
  padding: 22px 24px;
  border-radius: 10px;
  border: 1px solid var(--s200, #E7E5E4);
  font-size: 12.5px;
  color: var(--s900, #1C1917);
  line-height: 1.6;
}
.cw-preview-email h2 {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink, #0A0A0A);
  margin: 14px 0 8px;
  letter-spacing: -0.01em;
}
.cw-preview-email p { margin: 0 0 11px; }
.cw-preview-email ul { margin: 8px 0 14px; padding-left: 18px; }
.cw-preview-email li { margin-bottom: 8px; }
.cw-preview-email a { color: var(--info-fg, #1D4ED8); text-decoration: underline; }
.cw-preview-error {
  padding: 12px;
  background: var(--pale-red, #fefce8);
  color: var(--red, #a16207);
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid rgba(161,98,7,.2);
}

@media (prefers-reduced-motion: reduce) {
  .cw-modal-overlay, .cw-modal { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   I-105 — Cluster-lead-click inline "Book Site Visit" pane (3 regions)
   Inline (no overlay/backdrop): lives in the .cp-page section so the planner
   stays "on page". Reuses the cw-* form tokens for Region B; Region A is the
   contact/comms card; Region C is the all-rep single-day calendar / email view.
   Three columns at desktop, stacking at 900px. Region C calendar scrolls
   horizontally if reps exceed the column width — never breaks page layout.
   ───────────────────────────────────────────────────────────────────────── */
.cbp-pane {
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 16px;
  box-shadow: 0 12px 40px -20px rgba(10, 10, 10, .35);
  overflow: hidden;
  margin-top: 16px;
}
.cbp-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--s100, #F5F5F4);
  background: var(--s50, #FAFAF9);
}
.cbp-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--s700, #44403C);
  cursor: pointer;
  font-family: inherit;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.cbp-back:hover { border-color: var(--ink, #0A0A0A); color: var(--ink, #0A0A0A); }
.cbp-topbar-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink, #0A0A0A);
}
.cbp-empty {
  padding: 40px 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--s500, #78716C);
}

/* 3-region grid: A (contact) narrow, B (form) medium, C (calendar) flexible. */
.cbp-grid {
  display: grid;
  grid-template-columns: 280px 360px minmax(0, 1fr);
  align-items: stretch;
}
.cbp-region {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.cbp-region-a { border-right: 1px solid var(--s100, #F5F5F4); }
.cbp-region-b { border-right: 1px solid var(--s100, #F5F5F4); background: #fff; }
.cbp-region-c { background: var(--s50, #FAFAF9); }

/* At 1280px the form column tightens but all three stay side-by-side. */
@media (max-width: 1320px) {
  .cbp-grid { grid-template-columns: 240px 320px minmax(0, 1fr); }
  .cbp-region { padding: 16px 16px 18px; }
}
/* Below 980px stack the regions vertically. */
@media (max-width: 980px) {
  .cbp-grid { grid-template-columns: 1fr; }
  .cbp-region-a, .cbp-region-b { border-right: none; border-bottom: 1px solid var(--s100, #F5F5F4); }
}

.cbp-card-h {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s500, #78716C);
  margin-bottom: 2px;
}

/* Region A — contact card */
.cbp-lead-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink, #0A0A0A);
}
.cbp-lead-sub { font-size: 12.5px; font-weight: 700; color: var(--s700, #44403C); }
.cbp-lead-brief {
  font-size: 12px;
  font-weight: 500;
  color: var(--s500, #78716C);
  line-height: 1.5;
  padding: 8px 10px;
  background: var(--s50, #FAFAF9);
  border: 1px solid var(--s100, #F5F5F4);
  border-radius: 8px;
}
.cbp-field { display: flex; flex-direction: column; gap: 5px; }
.cbp-lbl {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s500, #78716C);
}
.cbp-input {
  padding: 9px 11px;
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #0A0A0A);
  font-family: inherit;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.cbp-input:focus {
  outline: none;
  border-color: var(--ink, #0A0A0A);
  box-shadow: 0 0 0 3px rgba(10,10,10,.05);
}
.cbp-comms { display: flex; gap: 8px; margin-top: 4px; }
.cbp-comms-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 9px;
  border: 1px solid var(--s200, #E7E5E4);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: var(--s700, #44403C);
  cursor: pointer;
  font-family: inherit;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.cbp-comms-btn:hover { border-color: var(--ink, #0A0A0A); color: var(--ink, #0A0A0A); }
.cbp-comms-call:hover { background: var(--ok-bg, #DCFCE7); border-color: var(--ok-fg, #15803D); color: var(--ok-fg, #15803D); }
.cbp-comms-email:hover { background: var(--pale-red, #fefce8); border-color: var(--red, #a16207); color: var(--red, #a16207); }
.cbp-comms-btn .ico { flex-shrink: 0; }

/* I-105 follow-up — lead-notes pane (region A, under the comms row). Reads +
   writes the LEAD's note channel; lives inside the flex-column .cw-modal-contact. */
.cbp-note-head { margin-top: 4px; }
.cbp-note-history {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 180px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0;
  border-top: 1px solid var(--s100, #F5F5F4);
  border-bottom: 1px solid var(--s100, #F5F5F4);
}
.cbp-note-history:empty { display: none; }
.cbp-note-history .tl-item { padding: 6px 0; }
.cbp-note-empty {
  font-size: 12px;
  color: var(--s400, #A8A29E);
  font-style: italic;
  padding: 8px 2px;
}
.cbp-note-input {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 44px;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--s200, #E7E5E4);
  background: #fff;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink, #0A0A0A);
  transition: border-color 180ms cubic-bezier(.4,0,.2,1);
}
.cbp-note-input:focus { outline: none; border-color: var(--red, #a16207); }
.cbp-note-save {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Region B — booking form (reuses cw-* field/toggle/conflict styles) */
.cbp-region-b .cw-field-row,
.cbp-region-b .cw-field,
.cbp-region-b .cw-toggle,
.cbp-region-b .cw-title-preview,
.cbp-region-b .cw-conflict,
.cbp-region-b #cw_book_conflicts { width: 100%; }
.cbp-region-b .cw-input,
.cbp-region-b select,
.cbp-region-b textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #0A0A0A);
  font-family: inherit;
}
.cbp-region-b textarea { resize: vertical; min-height: 56px; line-height: 1.4; }
.cbp-region-b .cw-input:focus,
.cbp-region-b select:focus,
.cbp-region-b textarea:focus {
  outline: none;
  border-color: var(--ink, #0A0A0A);
  box-shadow: 0 0 0 3px rgba(10,10,10,.05);
}
.cbp-chosen-rep {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--s50, #FAFAF9);
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 9px;
}
.cbp-chosen-rep .cbp-lbl { margin: 0; }
.cbp-chosen-rep-val {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink, #0A0A0A);
  letter-spacing: -0.01em;
}
.cbp-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--s100, #F5F5F4);
}
.cbp-actions .btn { flex: 1; justify-content: center; }
.cbp-actions .btn.btn-w { flex: 0 0 auto; padding: 10px 14px; }

/* Region C — single-day all-rep calendar */
.cbp-cal-scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 520px;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 10px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
  /* Bigger, always-visible scrollbars so the all-rep columns are easy to drag. */
  scrollbar-width: auto;
  scrollbar-color: var(--s400, #A8A29E) var(--s100, #F5F5F4);
}
.cbp-cal-scroll::-webkit-scrollbar { height: 16px; width: 12px; }
.cbp-cal-scroll::-webkit-scrollbar-track {
  background: var(--s100, #F5F5F4);
  border-radius: 0 0 10px 10px;
}
.cbp-cal-scroll::-webkit-scrollbar-thumb {
  background: var(--s400, #A8A29E);
  border-radius: 8px;
  border: 3px solid var(--s100, #F5F5F4);
  min-width: 48px;
}
.cbp-cal-scroll::-webkit-scrollbar-thumb:hover { background: var(--s500, #78716C); }
.cbp-cal-scroll::-webkit-scrollbar-corner { background: var(--s100, #F5F5F4); }
.cbp-cal-grid {
  display: grid;
  /* one fixed time column + N rep columns (each min 96px so they scroll
     rather than squash when reps exceed the pane width). */
  grid-template-columns: 56px repeat(var(--cbp-cols, 1), minmax(96px, 1fr));
  min-width: max-content;
}
.cbp-cal-row { display: contents; }
.cbp-cal-cell {
  border-bottom: 1px solid var(--s100, #F5F5F4);
  border-right: 1px solid var(--s100, #F5F5F4);
  min-height: 30px;
  font-size: 11px;
  display: flex;
  align-items: center;
  padding: 2px 5px;
  box-sizing: border-box;
}
.cbp-cal-head .cbp-cal-cell {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--s50, #FAFAF9);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: -0.005em;
  color: var(--ink, #0A0A0A);
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid var(--s200, #E7E5E4);
}
.cbp-cal-colhead.cbp-cal-unassigned { color: var(--s400, #A8A29E); }
/* I-105 rework (Finding 4): the preselected rep's column header — highlighted so
   the rep sees whose calendar drove the chosen slot. */
.cbp-cal-colhead.cbp-cal-colhead-selected {
  background: var(--info-bg, #DBEAFE);
  color: var(--info-fg, #1D4ED8);
  box-shadow: inset 0 -2px 0 var(--info-fg, #1D4ED8);
}
/* I-105 rework: region-C 'preview' mode back-to-calendar control bar. */
.cbp-region-c-head {
  display: flex;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--s100, #F5F5F4);
  background: #fff;
}
/* I-105 rework: region C lives in the modal's right column (.cw-preview, no inner
   padding). The calendar + email-compose content needs its own inset; the
   welcome-email preview mode keeps its full-bleed .cw-preview-h header. */
.cw-preview > .cbp-card-h { padding: 14px 16px 0; margin-bottom: 8px; }
.cw-preview > .cbp-cal-scroll { padding: 0 12px; flex: 1 1 auto; min-height: 0; }
.cw-preview > .cbp-cal-hint { padding: 8px 16px 14px; }
.cw-preview > .cbp-email-blurb { padding: 0 16px; }
.cw-preview > .cbp-email-to,
.cw-preview > .cbp-email-actions { padding: 8px 16px 0; }
.cbp-cal-timecol {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  font-weight: 700;
  font-size: 10px;
  color: var(--s500, #78716C);
  justify-content: flex-end;
}
.cbp-cal-head .cbp-cal-timecol { z-index: 3; background: var(--s50, #FAFAF9); }
.cbp-cal-free {
  cursor: pointer;
  color: transparent;
  justify-content: center;
  font-weight: 800;
  transition: background 120ms ease, color 120ms ease;
}
.cbp-cal-free:hover { background: var(--pale-red, #fefce8); color: var(--red, #a16207); }
.cbp-cal-free-disabled { cursor: default; background: repeating-linear-gradient(45deg, #fff, #fff 6px, var(--s50, #FAFAF9) 6px, var(--s50, #FAFAF9) 12px); }
.cbp-cal-free-disabled:hover { background: repeating-linear-gradient(45deg, #fff, #fff 6px, var(--s50, #FAFAF9) 6px, var(--s50, #FAFAF9) 12px); color: transparent; }
.cbp-cal-busy {
  background: var(--s100, #F5F5F4);
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 3px 5px;
}
.cbp-cal-appt {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--s700, #44403C);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cbp-cal-hint {
  font-size: 11px;
  font-weight: 600;
  color: var(--s500, #78716C);
  margin-top: 2px;
}

/* Region C — email view */
.cbp-email-blurb {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--s500, #78716C);
  line-height: 1.55;
}
.cbp-email-to {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 9px;
}
.cbp-email-to .cbp-lbl { margin-right: 8px; }
.cbp-email-noemail { color: var(--s400, #A8A29E); font-weight: 600; }
.cbp-email-actions { display: flex; gap: 10px; margin-top: 4px; }
.cbp-email-actions .btn { flex: 1; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .cbp-comms-btn, .cbp-back, .cbp-input, .cbp-cal-free { transition: none; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   Book-Site-Visit redesign (2026-07-23) — rep dropdown + location/day
   recommendation + selected-rep day column (right) + all-rep calendar (below).
   Layout: header, then a 3-column row (contact | form | selected-rep day),
   then a full-width all-rep calendar section beneath the form.
   ═════════════════════════════════════════════════════════════════════════════ */

/* The modal body is a flex column: columns row on top, all-reps section below. */
.cw-modal.cw-modal-book2 { min-height: 720px; }
.cw-cols-book2 {
  grid-template-columns: 260px minmax(300px, 1fr) minmax(280px, 0.95fr);
  flex: 1 1 58%;
  min-height: 240px;
}
.cw-allreps-section {
  flex: 1 1 42%;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--s200, #E7E5E4);
  background: var(--s50, #FAFAF9);
  overflow: hidden;
}
.cw-allreps-head {
  flex: 0 0 auto;
  padding: 10px 18px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--s600, #57534E);
  text-transform: uppercase;
}
.cw-allreps-pane {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cw-allreps-pane.cw-preview { padding-bottom: 8px; }

/* ── Rep dropdown (owns the appointment) ─────────────────────────────────── */
.cbp-rep-field { display: flex; flex-direction: column; gap: 6px; }
.cbp-rep-row { display: flex; align-items: center; gap: 10px; }
.cbp-rep-av {
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 13px; letter-spacing: -0.01em;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}
.cbp-rep-av-empty { background: var(--s200, #E7E5E4); color: var(--s500, #78716C); }
.cbp-rep-select {
  flex: 1 1 auto; width: 100%; box-sizing: border-box;
  padding: 10px 12px; border-radius: 9px;
  border: 1.5px solid var(--s300, #D6D3D1); background: #fff;
  font-size: 13.5px; font-weight: 700; color: var(--ink, #0A0A0A);
  font-family: inherit; cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.cbp-rep-select:hover { border-color: var(--s500, #78716C); }
.cbp-rep-select:focus { outline: none; border-color: var(--red, #a16207); box-shadow: 0 0 0 3px rgba(250,204,21,.12); }
.cbp-rep-owner { font-size: 11.5px; font-weight: 600; color: var(--s500, #78716C); }
.cbp-rep-owner .cbp-chosen-rep-val { color: var(--ink, #0A0A0A); font-weight: 800; }

/* ── Recommendation banner ───────────────────────────────────────────────── */
.cbp-reco {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 12px;
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  border: 1.5px solid #fde68a;
  box-shadow: 0 1px 2px rgba(250,204,21,.05), 0 8px 20px -14px rgba(250,204,21,.4);
}
.cbp-reco-applied { background: var(--s50, #FAFAF9); border-color: var(--s200, #E7E5E4); box-shadow: none; }
.cbp-reco-body { flex: 1 1 auto; min-width: 0; }
.cbp-reco-badge {
  display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: .04em;
  text-transform: uppercase; color: var(--red, #a16207); margin-bottom: 2px;
}
.cbp-reco-main { font-size: 14px; font-weight: 800; color: var(--ink, #0A0A0A); letter-spacing: -0.01em; }
.cbp-reco-reason { font-size: 11.5px; font-weight: 600; color: var(--s600, #57534E); margin-top: 1px; }
.cbp-reco-apply { flex: 0 0 auto; white-space: nowrap; }
.cbp-reco-ok {
  flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #16a34a;
  display: inline-flex; align-items: center; gap: 4px;
}

/* ── Selected-rep day column (right) ─────────────────────────────────────── */
.cbp-selrep {
  display: flex; flex-direction: column;
  overflow: hidden; background: #fff;
  border-left: 1px solid var(--s100, #F5F5F4);
}
.cbp-selrep-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--s100, #F5F5F4);
}
.cbp-selrep-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 13.5px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}
.cbp-selrep-id { min-width: 0; }
.cbp-selrep-name { font-size: 14px; font-weight: 800; color: var(--ink, #0A0A0A); letter-spacing: -0.01em; }
.cbp-selrep-sub { font-size: 11px; font-weight: 600; color: var(--s500, #78716C); }
.cbp-selrep-status { margin-left: auto; font-size: 10px; font-weight: 800; color: #dc2626; background: #FEE2E2; padding: 3px 7px; border-radius: 999px; }
/* SC-S5 — what the booking pane is ACTUALLY checking.
   Shown when a rep has never linked their Google calendar ('not_connected' —
   true of 10 of 24 users in prod) or Google was unreachable. The booking goes
   ahead against Spartan's own appointments; this says so, so "bookable" is
   never a silent downgrade.
   Deliberately NOT a warning colour: nothing is wrong, this is the normal
   state for half the team, and a red banner half the company sees every day
   is a banner nobody reads — the comms-breach-lights lesson (SC-S8). */
.cbp-unverified {
  margin: 8px 0 0; padding: 9px 11px;
  background: #F4F7F5; border-left: 3px solid #6B7480; border-radius: 0 8px 8px 0;
  font-size: 12px; line-height: 1.5; color: #14181A;
}
.cbp-unverified b { font-weight: 700; }
.cbp-selrep-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 10px 12px; }
.cbp-selrep-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px; margin-bottom: 3px;
  font-size: 12px; font-weight: 700;
}
.cbp-selrep-time { flex: 0 0 44px; color: var(--s500, #78716C); font-weight: 800; font-variant-numeric: tabular-nums; }
.cbp-selrep-ev { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbp-selrep-tag { flex: 1 1 auto; text-align: right; color: var(--s400, #A8A29E); font-weight: 700; font-size: 11px; }
.cbp-selrep-busy { background: var(--s100, #F5F5F4); color: var(--s600, #57534E); }
.cbp-selrep-loading { background: repeating-linear-gradient(45deg,#fff,#fff 6px,var(--s50,#FAFAF9) 6px,var(--s50,#FAFAF9) 12px); color: var(--s400,#A8A29E); }
.cbp-selrep-free { cursor: pointer; border: 1px solid var(--s100, #F5F5F4); transition: background 120ms ease, border-color 120ms ease; }
.cbp-selrep-free:hover { background: var(--pale-red, #fefce8); border-color: #fde68a; }
.cbp-selrep-free:hover .cbp-selrep-tag { color: var(--red, #a16207); }
.cbp-selrep-chosen { background: var(--info-bg, #DBEAFE); border-color: #93C5FD; }
.cbp-selrep-chosen .cbp-selrep-tag { color: var(--info-fg, #1D4ED8); }
.cbp-selrep-empty {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 8px; padding: 28px 22px; color: var(--s500, #78716C);
}
.cbp-selrep-empty-ic { width: 46px; height: 46px; border-radius: 50%; background: var(--s100, #F5F5F4); display: flex; align-items: center; justify-content: center; color: var(--s400, #A8A29E); }
.cbp-selrep-empty-t { font-size: 14px; font-weight: 800; color: var(--ink, #0A0A0A); }
.cbp-selrep-empty-s { font-size: 12px; font-weight: 500; line-height: 1.5; max-width: 220px; }

/* ── Pulsing-red recommendation highlight (calendar + selected-rep) ──────── */
.cbp-cal-recommended,
.cbp-selrep-free.cbp-cal-recommended {
  background: var(--fos-plate) !important;
  color: var(--fos-on-plate) !important;
  border-color: var(--fos-plate) !important;
  animation: cbp-reco-pulse 1.6s ease-in-out infinite;
}
.cbp-cal-recommended .cbp-selrep-tag,
.cbp-cal-recommended .cbp-selrep-time { color: var(--fos-on-plate) !important; }
.cbp-cal-free.cbp-cal-recommended:hover { background: var(--fos-plate-hover) !important; color: var(--fos-on-plate) !important; }
.cbp-cal-colhead-recommended {
  background: var(--fos-plate) !important;
  color: var(--fos-on-plate) !important;
  box-shadow: inset 0 -2px 0 #854d0e;
  animation: cbp-reco-pulse 1.6s ease-in-out infinite;
}
.cbp-cal-col-star { font-size: 10px; }
@keyframes cbp-reco-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250,204,21,.55); }
  50%      { box-shadow: 0 0 0 5px rgba(250,204,21,0); }
}
@media (prefers-reduced-motion: reduce) {
  .cbp-cal-recommended, .cbp-cal-colhead-recommended { animation: none; }
}

/* Book2 responsive — stack columns + let each calendar scroll on small screens. */
@media (max-width: 900px) {
  .cw-cols-book2 { grid-template-columns: 1fr; flex: 0 0 auto; }
  .cw-allreps-section { flex: 0 0 auto; }
  .cbp-selrep { border-left: none; border-top: 1px solid var(--s100, #F5F5F4); max-height: 340px; }
  .cw-allreps-pane > .cbp-cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   S-183 v3 harmonize (2026-07-07) — bring the Leads page into the same card
   language as the Sales dashboard polish (js/sales-dashboard-v3.css).
   Visual layer only; every data-action/handler untouched.
   ═════════════════════════════════════════════════════════════════════════════ */

/* Pulsing red live-dot on the Inbound Queue eyebrow (matches dashboard hero;
   keyframes sp-pulse live in sales-dashboard-v3.css). */
.ll-ph-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.ll-ph-eyebrow::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red, #a16207); flex-shrink: 0;
  animation: sp-pulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@media (prefers-reduced-motion: reduce) { .ll-ph-eyebrow::before { animation: none; } }

/* Cards: same 16px radius + hairline border + layered soft shadow as
   .dash-kpi / .dash-card on the dashboard. */
.ll-tcard, .ll-tbl-wrap, .ll-rcard {
  border-radius: 16px;
  border-color: #efedec;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.03), 0 10px 28px -22px rgba(10, 10, 10, 0.22);
}

/* Status filter: iOS segmented-control track (matches .dash-seg). Active =
   white pill + soft shadow instead of the old solid-ink block. */
.ll-seg {
  background: var(--s100, #F5F5F4);
  border-radius: 14px; padding: 4px; gap: 4px;
  border-color: var(--s200, #E7E5E4);
  box-shadow: none;
}
.ll-seg button { border-radius: 10px; }
.ll-seg button:hover { background: rgba(255, 255, 255, 0.6); }
.ll-seg button.ll-on {
  background: #fff; color: var(--ink, #0A0A0A);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.06), 0 4px 12px -6px rgba(10, 10, 10, 0.12);
}
.ll-seg button.ll-on .ll-seg-count { background: var(--ink, #0A0A0A); color: #fff; }

/* ── Stages view (Phoenix 2026-07-31) — journey-stage board, secondary to
   the normal table. Columns mirror the lead-detail journey bar. ─────────── */
.ll-page .ll-viewseg { display: inline-flex; gap: 0; }
.ll-page .ll-viewseg .btn { border-radius: 0; }
.ll-page .ll-viewseg .btn:first-child { border-radius: 8px 0 0 8px; }
.ll-page .ll-viewseg .btn:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }

.ll-page .ll-stages {
  display: flex; gap: 12px; align-items: flex-start;
  overflow-x: auto; padding: 2px 2px 14px;
}
.ll-page .ll-stage-col {
  flex: 0 0 300px; min-width: 300px;
  background: var(--s100, #F5F5F4);
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 14px; padding: 10px;
  transition: box-shadow .12s, border-color .12s;
}
.ll-page .ll-stage-col.ll-stage-over {
  border-color: var(--red, #a16207);
  box-shadow: 0 0 0 2px rgba(250, 204, 21, .15);
}
.ll-page .ll-stage-col-h {
  display: flex; align-items: center; gap: 7px;
  padding: 2px 4px 10px; font-family: var(--ff-sans, 'Archivo', system-ui, sans-serif);
}
.ll-page .ll-stage-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ll-page .ll-stage-col-name { font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--ink, #0A0A0A); text-transform: uppercase; }
.ll-page .ll-stage-col-count { font-size: 11px; font-weight: 800; background: #fff; border: 1px solid var(--s200, #E7E5E4); border-radius: 10px; padding: 1px 7px; color: var(--s600, #57534E); }
.ll-page .ll-stage-col-sum { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--status-green, #15803D); }
.ll-page .ll-stage-col-body { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 420px); min-height: 80px; overflow-y: auto; padding: 1px; }
.ll-page .ll-stage-card {
  background: #fff; border: 1px solid var(--s200, #E7E5E4);
  border-radius: 10px; padding: 10px 12px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(10, 10, 10, .04);
  transition: box-shadow .12s, transform .12s;
}
.ll-page .ll-stage-card:hover { box-shadow: 0 4px 14px -4px rgba(10, 10, 10, .18); transform: translateY(-1px); }
.ll-page .ll-stage-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ll-page .ll-stage-card-name { font-size: 13px; font-weight: 700; color: var(--ink, #0A0A0A); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-page .ll-stage-card-val { font-size: 12px; font-weight: 800; color: var(--status-green, #15803D); flex-shrink: 0; }
.ll-page .ll-stage-card-sub { font-size: 11px; color: var(--s500, #78716C); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-page .ll-stage-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.ll-page .ll-stage-chip { font-size: 10px; font-weight: 800; padding: 1px 8px; border-radius: 10px; text-transform: capitalize; }
.ll-page .ll-stage-chip.q-hot { background: #FEE2E2; color: #B91C1C; }
.ll-page .ll-stage-chip.q-warm { background: #FEF3C7; color: #B45309; }
.ll-page .ll-stage-chip.q-cold { background: #E0F2FE; color: #0369A1; }
.ll-page .ll-stage-card-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; color: var(--s400, #A8A29E); }
.ll-page .ll-stage-av { width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 8px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.ll-page .ll-stage-unowned { font-size: 10px; font-weight: 700; color: #B45309; background: #FEF3C7; border-radius: 10px; padding: 1px 7px; }
.ll-page .ll-stage-viewdeal {
  margin-top: 8px; width: 100%; text-align: center; cursor: pointer;
  font-size: 11px; font-weight: 800; font-family: inherit;
  color: var(--status-green, #15803D); background: #F0FDF4;
  border: 1px solid #86EFAC; border-radius: 8px; padding: 5px 0;
}
.ll-page .ll-stage-grow {
  width: 100%; padding: 8px 0; cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 800; color: var(--s600, #57534E);
  background: #fff; border: 1px dashed var(--s300, #D6D3D1); border-radius: 10px;
}
.ll-page .ll-stage-grow:hover { border-color: var(--red, #a16207); color: var(--red, #a16207); }
.ll-page .ll-stage-empty {
  padding: 22px 10px; text-align: center; font-size: 11.5px; color: var(--s400, #A8A29E);
  border: 1px dashed var(--s300, #D6D3D1); border-radius: 10px;
}
.ll-page .ll-stage-foot { font-size: 11.5px; color: var(--s500, #78716C); padding: 2px 4px 10px; }
.ll-page .ll-stage-col-note { font-size: 9px; font-weight: 800; color: var(--s400, #A8A29E); text-transform: uppercase; letter-spacing: .04em; background: #fff; border: 1px solid var(--s200, #E7E5E4); border-radius: 8px; padding: 1px 6px; }

/* ── Snooze ("not now") ──────────────────────────────────────────────────────
   A parked lead leaves the queue but must never look deleted. Violet is the
   third state alongside red (stale — needs you NOW) and green/amber (hot —
   worth your time): deliberately quiet, deliberately not an alarm.
   Row button + pill live in the table; the picker is a standard .modal-bg. */
.ll-page .ll-qa-btn.ll-qa-btn-snooze:hover { background: #7C3AED; border-color: #7C3AED; }
.ll-page .ll-qa-btn.ll-qa-btn-snoozed {
  background: #F5F3FF; border-color: #DDD6FE; color: #6D28D9;
}
.ll-page .ll-qa-btn.ll-qa-btn-snoozed:hover { background: #6D28D9; border-color: #6D28D9; color: #fff; }

/* Parked rows sit back a little so the awake ones read first on the
   Snoozed tab (they are the only place snoozed rows ever appear). */
.ll-page .ll-tbl tr.ll-row-snoozed td { background: #FCFBFF; }

.ll-page .ll-snooze-pill,
.ll-page .ll-resurfaced-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px 2px 6px; border-radius: 5px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap;
}
.ll-page .ll-snooze-pill {
  background: #F5F3FF; color: #6D28D9;
  box-shadow: inset 0 0 0 1px rgba(109,40,217,.22);
}
.ll-page .ll-resurfaced-pill {
  background: #ECFDF5; color: #047857;
  box-shadow: inset 0 0 0 1px rgba(4,120,87,.22);
}
.ll-page .ll-snooze-pill .ico,
.ll-page .ll-resurfaced-pill .ico { width: 10px; height: 10px; }

/* Snoozed tab in the status segment */
.ll-page .ll-seg button.ll-seg-snooze .ico { width: 12px; height: 12px; }
.ll-page .ll-seg button.ll-seg-snooze.ll-on { background: #6D28D9; border-color: #6D28D9; }

/* ── Snooze picker (inside .modal-bg > .modal) ───────────────────────────── */
.ll-snooze-current {
  font-size: 12px; color: #6D28D9; background: #F5F3FF;
  border: 1px solid #DDD6FE; border-radius: 8px;
  padding: 8px 11px; margin-bottom: 14px;
}
.ll-snooze-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ll-snooze-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 9px 12px; cursor: pointer; font-family: inherit; text-align: left;
  background: #fff; border: 1px solid var(--s200, #E7E5E4); border-radius: 10px;
  transition: all 160ms cubic-bezier(.4,0,.2,1);
}
.ll-snooze-chip:hover { border-color: #7C3AED; background: #F5F3FF; transform: translateY(-1px); }
.ll-snooze-chip-l { font-size: 12.5px; font-weight: 700; color: var(--ink, #0A0A0A); }
.ll-snooze-chip-d { font-size: 10.5px; font-weight: 600; color: var(--s500, #78716C); }

.ll-snooze-custom {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid #f0f0f0;
}
.ll-snooze-custom label { font-size: 12px; font-weight: 600; color: #374151; }
.ll-snooze-custom input[type="date"] {
  flex: 1 1 130px; min-width: 130px;
  font-size: 12px; font-family: inherit; padding: 6px 8px;
  border: 1px solid var(--s200, #E7E5E4); border-radius: 8px;
}
.ll-snooze-set {
  padding: 6px 14px; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 700; color: #fff;
  background: #6D28D9; border: 1px solid #6D28D9; border-radius: 8px;
}
.ll-snooze-set:hover { background: #5B21B6; border-color: #5B21B6; }