/* RPHB CRM — phone first, then wide screens. */
/* The look is design D, "the blend" (Andrew 10/9): ReSimpli 6.0's base (Instrument Sans, white panels on a light
   grey page, teal buttons and links, orange stages), Salesforce Lightning's stage arrows, and JobTread's band for
   the numbers that matter (dark teal in light mode; in dark mode the band sits LIGHTER than the page, Andrew 10/9).
   Spec: C:\RPHB\own-crm-data\mockups\blend\. Every colour goes through a token below.
   Each person picks Light, Dark or Match this device on Your account (stored on their user, sent as
   <html data-theme>); "auto" follows the phone or computer's own setting. Keep both dark blocks identical. */
:root {
  --bg: #f3f3f3; --panel: #ffffff; --soft: #f9f9f9; --soft-2: #fbfbfb; --field: #ffffff;
  --ink: #01010b; --muted: #6b6e70; --faint: #95989a; --icon: #3a3c3e;
  --line: #ebebeb; --line-2: #e2e2e2; --line-3: #d3d3d3;
  /* teal: accent = links, accent-fill = buttons and the lit menu item, accent-text = teal words on a soft fill */
  --accent: #008080; --accent-fill: #0c6060; --accent-hover: #094555; --accent-ink: #ffffff; --accent-text: #0c6060;
  --accent-soft: #e7efef; --accent-faint: #f3f7f7;
  --note: #fdf8f0; --note-line: #f1e2cb; --in: #f3f5f5; --out: #e7efef;
  --red: #d93b39; --red-dot: #fc605f; --red-soft: #feefef; --green: #00802f; --green-soft: #e5f2ea;
  --hot: #b76f1e; --hot-soft: #f8f0e7; --blue: #2f6fae; --blue-soft: #ecf3fb;
  /* deal stages: orange text, the filled stage arrow, stages still to come */
  --stage: #b76f1e; --stage-fill: #a35f17; --on-stage: #ffffff; --path-todo: #ebeeee; --path-hover: #e0e6e6; --path-ink: #3d4042;
  /* the band (key facts and counts) */
  --band: #0e3436; --band-border: #0e3436; --band-line: rgba(255, 255, 255, .13); --band-hover: #134244;
  --band-k: #9fc3c1; --band-v: #ffffff; --band-orange: #f2a65a; --band-red: #ff7b7a; --band-teal: #7dd3cc; --band-green: #8fd6a0;
  --av-bg: #2b2d2f; --av-ink: #ffffff; --chip: #f0f0f0; --purple: #8a4fc0; --purple-soft: #f6eefd;
  --mark: #ffe58a; --mark-ink: #01010b;
  --radius: 15px; --r-s: 10px; --r-xs: 5px; --pill: 60px;
  --shadow: 0 1px 2px rgba(1, 1, 11, .05); --pop-shadow: 0 8px 24px rgba(1, 1, 11, .14);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171717; --panel: #212121; --soft: #2a2a2a; --soft-2: #262626; --field: #1c1c1c;
    --ink: #e0e0e0; --muted: #a8a8ab; --faint: #8e8e8e; --icon: #c5c5c7;
    --line: #323232; --line-2: #3d3d3d; --line-3: #555555;
    --accent: #2db0ab; --accent-fill: #009b9b; --accent-hover: #17a6a3; --accent-ink: #ffffff; --accent-text: #2db0ab;
    --accent-soft: #24393a; --accent-faint: #1f2b2b;
    --note: #34200a; --note-line: #432607; --in: #2a2a2a; --out: #0f3030;
    --red: #ff7b7a; --red-dot: #fc605f; --red-soft: #3d2526; --green: #4cb94e; --green-soft: #1f3321;
    --hot: #e0954a; --hot-soft: #3a2a1a; --blue: #8cbcf0; --blue-soft: #1f2e3f;
    --stage: #e0954a; --stage-fill: #9e5c1a; --on-stage: rgba(255, 255, 255, .95); --path-todo: #2e2e2e; --path-hover: #383838; --path-ink: #c5c5c7;
    --band: #245254; --band-border: #2f6466; --band-line: rgba(255, 255, 255, .12); --band-hover: #2a5d5f;
    --band-k: #a9d3d0; --band-v: rgba(255, 255, 255, .92); --band-orange: #f0a65c; --band-red: #ff7b7a; --band-teal: #5fc9c1; --band-green: #8fd6a0;
    --av-bg: #3d3d3d; --av-ink: #e0e0e0; --chip: #323232; --purple: #d29be6; --purple-soft: #3a2a45;
    --mark: #7a6516; --mark-ink: #ffffff;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3); --pop-shadow: 0 8px 24px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #171717; --panel: #212121; --soft: #2a2a2a; --soft-2: #262626; --field: #1c1c1c;
  --ink: #e0e0e0; --muted: #a8a8ab; --faint: #8e8e8e; --icon: #c5c5c7;
  --line: #323232; --line-2: #3d3d3d; --line-3: #555555;
  --accent: #2db0ab; --accent-fill: #009b9b; --accent-hover: #17a6a3; --accent-ink: #ffffff; --accent-text: #2db0ab;
  --accent-soft: #24393a; --accent-faint: #1f2b2b;
  --note: #34200a; --note-line: #432607; --in: #2a2a2a; --out: #0f3030;
  --red: #ff7b7a; --red-dot: #fc605f; --red-soft: #3d2526; --green: #4cb94e; --green-soft: #1f3321;
  --hot: #e0954a; --hot-soft: #3a2a1a; --blue: #8cbcf0; --blue-soft: #1f2e3f;
  --stage: #e0954a; --stage-fill: #9e5c1a; --on-stage: rgba(255, 255, 255, .95); --path-todo: #2e2e2e; --path-hover: #383838; --path-ink: #c5c5c7;
  --band: #245254; --band-border: #2f6466; --band-line: rgba(255, 255, 255, .12); --band-hover: #2a5d5f;
  --band-k: #a9d3d0; --band-v: rgba(255, 255, 255, .92); --band-orange: #f0a65c; --band-red: #ff7b7a; --band-teal: #5fc9c1; --band-green: #8fd6a0;
  --av-bg: #3d3d3d; --av-ink: #e0e0e0; --chip: #323232; --purple: #d29be6; --purple-soft: #3a2a45;
  --mark: #7a6516; --mark-ink: #ffffff;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3); --pop-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
/* The CRM's font: Instrument Sans, ReSimpli 6.0's own app font (Andrew's blend pick 10/9). Free (SIL Open Font
   License), stored with the app so every phone and computer shows the same letters. */
@font-face { font-family: 'Instrument Sans'; font-weight: 400; font-display: swap; src: url('/static/instrument-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 500; font-display: swap; src: url('/static/instrument-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 600; font-display: swap; src: url('/static/instrument-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 700; font-display: swap; src: url('/static/instrument-sans-latin-700-normal.woff2') format('woff2'); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 14px/1.45 'Instrument Sans', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 20px; line-height: 1.25; font-weight: 600; margin: 0; }
h2 { font-size: 16px; font-weight: 600; margin: 0 0 .5rem; }
h3 { font-size: 14.5px; font-weight: 600; margin: .75rem 0 .25rem; }
b, strong { font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: .85em; }
.n { color: var(--faint); font-weight: 500; font-size: .9em; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; display: inline-block; vertical-align: middle; }
.av { width: 28px; height: 28px; border-radius: 50%; background: var(--av-bg); color: var(--av-ink); font-size: 10.5px; font-weight: 600; display: inline-grid; place-items: center; flex: none; letter-spacing: .2px; vertical-align: middle; }
.av.sm { width: 22px; height: 22px; font-size: 9px; }
.av.soft { background: var(--hot-soft); color: var(--hot); }
.av.sys { font-size: 8.5px; letter-spacing: 0; } /* "CRM" for things the CRM did by itself (follow-ups, automatic moves) */

/* ---------- the frame: sidebar on computers, slim top bar, bottom tab bar on phones (layout.ts) ---------- */
.app { display: flex; min-height: 100vh; }
.side { width: 212px; flex: none; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 14px 0 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side-brand { display: flex; align-items: center; gap: 9px; padding: 0 18px 18px; font-weight: 700; font-size: 15px; color: var(--ink); }
.side-brand:hover { text-decoration: none; }
.side-brand .ic, .tb-mark .ic { width: 26px; height: 26px; color: var(--accent); stroke: none; fill: currentColor; }
.side-brand small { display: block; font-size: 11px; font-weight: 500; color: var(--faint); line-height: 12px; }
.nav { display: flex; flex-direction: column; }
.nav a { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 18px 0 15px; color: var(--ink); border-left: 3px solid transparent; }
.nav a:hover { background: var(--soft); text-decoration: none; }
.nav a .ic { color: var(--icon); }
.nav a.on { background: var(--accent-faint); border-left-color: var(--accent-fill); color: var(--accent-text); font-weight: 600; }
.nav a.on .ic { color: var(--accent-text); }
.nav-n { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--red); }
.nav-sep { height: 1px; background: var(--line); margin: 8px 18px; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding: 12px 10px 0; }
.srow { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-s); color: var(--ink); font: inherit; text-align: left; width: 100%; border: 1px solid transparent; background: none; }
.srow:hover { background: var(--soft); text-decoration: none; }
.srow.phone { background: var(--soft); border-color: var(--line); cursor: pointer; }
.srow .ic { color: var(--icon); }
.srow .lbl { flex: 1; min-width: 0; line-height: 17px; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.srow .lbl small { display: block; font-size: 11px; line-height: 14px; color: var(--faint); font-weight: 500; }
.srow .pw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-3); flex: none; }
.srow[data-state="idle"] .pw-dot { background: var(--green); }
.srow[data-state="calling"] .pw-dot, .srow[data-state="ringing"] .pw-dot, .srow[data-state="connected"] .pw-dot { background: var(--accent); }
.srow[data-state="incoming"] .pw-dot { background: var(--hot); }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 52px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 18px 0 20px; background: var(--bg); position: sticky; top: 0; z-index: 10; }
.tb-mark, .topbar .search-btn, .sq { display: none; }
.tb-title { font-size: 14px; font-weight: 600; color: var(--accent-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tb-alert { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--pill); background: var(--red-soft); color: var(--red); font-size: 12px; font-weight: 600; white-space: nowrap; }
.tb-alert i { width: 7px; height: 7px; border-radius: 50%; background: var(--red-dot); }
.tb-alert:hover { text-decoration: none; }
.search { position: relative; flex: 0 1 380px; min-width: 0; margin: 0 auto; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: var(--r-s); background: var(--panel); border: 1px solid var(--line); color: var(--faint); }
.search:focus-within { border-color: var(--accent); }
.search .ic { width: 15px; height: 15px; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; height: 100%; font-size: 13.5px; outline: none; box-shadow: none; }
.tb-right { display: flex; align-items: center; gap: 6px; }
.icon-btn { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--icon); cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }
.icon-btn:hover { background: var(--line); }
/* small pop-up menus (New, the avatar, a row's "more") built on <details> */
.pop { position: relative; }
.pop > summary { list-style: none; cursor: pointer; }
.pop > summary::-webkit-details-marker { display: none; }
.pop-sheet { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 12rem; display: grid; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: var(--pop-shadow); overflow: hidden; }
.pop-sheet > a, .pop-sheet button { display: block; width: 100%; text-align: left; padding: .6rem .9rem; color: var(--ink); background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.pop-sheet > a:hover, .pop-sheet button:hover { background: var(--soft); text-decoration: none; }
.pop-sheet form { margin: 0; border-top: 1px solid var(--line); }
.pop-sheet .who-am-i { padding: .6rem .9rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.newpill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 9px; border-radius: var(--pill); background: var(--accent-soft); color: var(--accent-text); font-size: 13px; font-weight: 600; }
.newpill .ic { width: 17px; height: 17px; }
.me-menu > summary { display: inline-flex; align-items: center; gap: 4px; }
.me-menu > summary .ic { width: 14px; height: 14px; color: var(--faint); }
.m-tabs { display: none; }
@media (max-width: 640px) {
  .side { display: none; }
  .app { display: block; }
  .topbar { height: 54px; gap: 4px; padding: 0 8px 0 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
  .tb-mark { display: block; padding-right: 4px; }
  .tb-title { flex: 1; font-size: 17px; color: var(--ink); }
  .tb-alert { display: none; }
  .topbar .search-btn { display: inline-grid; }
  .search { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; height: auto; padding: 8px 12px; border-radius: 0; border-width: 0 0 1px; }
  .sq:checked ~ .search { display: flex; }
  .search input { font-size: 16px; height: 36px; }
  .newpill { width: 32px; padding: 0; justify-content: center; background: none; }
  .newpill span { display: none; }
  .m-tabs { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--panel); border-top: 1px solid var(--line); padding: 7px 4px calc(8px + env(safe-area-inset-bottom)); }
  .m-tabs > a, .m-tabs .more-menu { flex: 1; min-width: 0; }
  .m-tabs > a, .more-menu > summary { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--muted); position: relative; padding: 2px 0; }
  .m-tabs > a:hover { text-decoration: none; }
  .m-tabs > a.on, .more-menu > summary.on, .more-menu[open] > summary { color: var(--accent-text); }
  .m-tabs .ic { width: 23px; height: 23px; }
  .m-tabs .nav-n { position: absolute; top: -5px; left: calc(50% + 5px); height: 16px; min-width: 16px; line-height: 16px; font-size: 10px; padding: 0 4px; border-radius: var(--pill); background: var(--red-dot); color: var(--accent-ink); text-align: center; margin: 0; }
  .more-menu { position: relative; }
  .more-menu > summary { list-style: none; cursor: pointer; }
  .more-menu > summary::-webkit-details-marker { display: none; }
  .more-sheet { position: absolute; bottom: calc(100% + 12px); right: 4px; min-width: 13rem; display: grid; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: var(--pop-shadow); overflow: hidden; }
  .more-sheet a { display: flex; align-items: center; gap: 10px; padding: .8rem 1rem; color: var(--ink); font-weight: 600; font-size: 15px; border-top: 1px solid var(--line); }
  .more-sheet a:first-child { border-top: 0; }
  .more-sheet a .ic { width: 18px; height: 18px; color: var(--icon); }
  body { padding-bottom: 68px; }
}
.pipes { display: flex; gap: .25rem; overflow-x: auto; padding: 2px 20px 8px; scrollbar-width: none; }
.pipes a { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: .3rem .75rem; border-radius: var(--r-s); color: var(--ink); font-size: 13.5px; font-weight: 600; }
.pipes a:hover { background: var(--line); text-decoration: none; }
.pipes a.on { background: var(--accent-soft); color: var(--accent-text); }
.pipes a.on .n { color: inherit; }
.pipes a.new { color: var(--accent); }
.pipes a .ic { width: 16px; height: 16px; }
@media (max-width: 640px) { .pipes { padding: 8px 10px 4px; } }
.live-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: var(--pop-shadow); overflow: hidden; }
.live-results a { display: block; padding: .55rem .8rem; color: var(--ink); border-top: 1px solid var(--line); font-weight: 600; }
.live-results a:first-child { border-top: 0; }
.live-results a.sel, .live-results a:hover { background: var(--accent-faint); text-decoration: none; }
.live-results .muted { display: block; font-size: .8rem; font-weight: 500; }

main { padding: 4px 20px 32px; max-width: 1600px; width: 100%; margin: 0 auto; }
@media (max-width: 640px) { main { padding: 10px 10px 24px; } }
.foot { text-align: center; color: var(--faint); font-size: .8rem; padding: 1rem 16px 2rem; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .25rem 0 .9rem; flex-wrap: wrap; }
.crumb { color: var(--muted); font-weight: 500; font-size: .95rem; }
.sec { margin-top: 1.25rem; }
/* the sign-in pages and the e-sign signer page keep a plain top strip (they have no menu) */
.top { position: sticky; top: 0; z-index: 10; background: var(--panel); border-bottom: 1px solid var(--line); }
.top-row { display: flex; gap: .6rem; align-items: center; padding: .7rem 16px; }
.brand { font-weight: 700; color: var(--ink); white-space: nowrap; }

/* ---------- buttons, chips, pills, badges ---------- */
/* .btn = the teal main button (pill-shaped, like ReSimpli); .btn.ghost = the plain white one beside it. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; border: 1px solid var(--accent-fill); border-radius: var(--pill); padding: .3rem 16px; background: var(--accent-fill); color: var(--accent-ink); font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.25; text-align: center; cursor: pointer; }
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .ic { width: 16px; height: 16px; }
.btn.ghost { background: var(--panel); color: var(--ink); border-color: var(--line-2); border-radius: var(--r-s); }
.btn.ghost:hover { background: var(--soft); }
.btn.ghost .ic { color: var(--icon); }
.chips { display: flex; gap: .35rem; margin: .25rem 0 .75rem; }
.chips.scroll { overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
.chip { white-space: nowrap; border: 1px solid var(--line); border-radius: var(--r-s); padding: .3rem .75rem; color: var(--ink); background: var(--panel); font-size: 13px; font-weight: 600; }
.chip:hover { background: var(--soft); text-decoration: none; }
.chip.on { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-text); }
.chip.on .n { color: inherit; opacity: .85; }
.chip.empty:not(.on) { opacity: .55; }
.pill { display: inline-block; border-radius: var(--pill); padding: .15rem .7rem; background: var(--soft); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.pill.stage { background: var(--hot-soft); border-color: transparent; color: var(--stage); }
.pill.hot { color: var(--hot); border-color: var(--hot); }
.tag { display: inline-block; border-radius: var(--r-xs); padding: .05rem .45rem; background: var(--chip); font-size: 11.5px; font-weight: 600; color: var(--muted); }
.tag.offer { color: var(--green); }
.badge { display: inline-flex; align-items: center; border-radius: var(--r-xs); padding: .08rem .45rem; background: var(--chip); font-size: 11.5px; font-weight: 600; color: var(--muted); border: 0; white-space: nowrap; }
.badge.red { background: var(--red-soft); color: var(--red); }
.badge.teal { background: var(--accent-soft); color: var(--accent-text); }
.badge.orange { background: var(--hot-soft); color: var(--hot); }
.badge.green { background: var(--green-soft); color: var(--green); }
.flash { background: var(--accent-faint); border: 1px solid var(--accent-soft); border-radius: var(--r-s); padding: .6rem .85rem; margin: 0 0 .75rem; }
.flash.warn { background: var(--note); border: 1px solid var(--note-line); }
.flash ul { margin: .35rem 0; }

/* ---------- cards, lists, board ---------- */
.card { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s); padding: .6rem .7rem; color: var(--ink); box-shadow: var(--shadow); }
.card:hover { border-color: var(--accent); text-decoration: none; }
/* stripe + light tint marks what needs attention (Andrew 10/9, "A+C") */
.card.hot { background: color-mix(in srgb, var(--hot) 6%, var(--panel)); border-color: color-mix(in srgb, var(--hot) 22%, var(--line)); border-left: 3px solid var(--hot); }
.card-addr { font-weight: 600; }
.card-sub, .card-stage, .card-phone { color: var(--muted); font-size: .85rem; }
.card-stage { color: var(--stage); }
.card-meta { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .35rem; font-size: .8rem; color: var(--muted); }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .35rem; font-size: .8rem; color: var(--muted); }
.who { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--av-bg); color: var(--av-ink); font-size: .65rem; font-weight: 600; margin-left: -.25rem; border: 2px solid var(--panel); }
.list { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.stage-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: var(--radius); overflow: hidden; }
.stage-list a { display: flex; justify-content: space-between; padding: .8rem .9rem; background: var(--panel); color: var(--ink); }
.stage-list a.empty { color: var(--muted); }
.board { display: flex; gap: .65rem; overflow-x: auto; align-items: flex-start; padding-bottom: .5rem; }
.col { flex: 0 0 270px; background: color-mix(in srgb, var(--line) 55%, var(--bg)); border-radius: var(--radius); padding: .5rem; max-height: calc(100vh - 170px); display: flex; flex-direction: column; }
.col h2 { font-size: .9rem; padding: .15rem .25rem .45rem; margin: 0; }
.col h2 a { color: var(--ink); }
.col-body { display: grid; gap: .45rem; overflow-y: auto; }
.only-wide { display: none; }
@media (min-width: 900px) { .only-wide { display: flex; } .only-phone { display: none; } }

/* ---------- lead page ---------- */
.pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.box { background: var(--panel); border: 1px solid transparent; border-radius: var(--radius); padding: .9rem 1.1rem; box-shadow: var(--shadow); min-width: 0; }
.box h2 .small { font-weight: 400; }
.call-link { font-weight: 600; }
.call-link.dnc { color: var(--red); }
.nums, .facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem .9rem; margin: 0; }
.nums dt, .facts dt { color: var(--muted); font-size: .78rem; }
.nums dd, .facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.facts dd { font-weight: 500; }
.facts.qa { grid-template-columns: 1fr; }
.team-list, .tasks, .files, .hits { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; color: var(--ink); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.tbl td, .tbl th { padding: .45rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
details summary { cursor: pointer; }
.offer-form { margin-top: .6rem; }
.offer-form form, .form-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: .5rem; align-items: end; }
.form-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); max-width: 760px; }
.offer-form .wide, .form-grid .wide { grid-column: 1 / -1; }
label { display: grid; gap: .2rem; font-size: .85rem; color: var(--muted); min-width: 0; }
input[type="date"], input[type="time"] { min-width: 0; }
input, select, textarea { font: inherit; font-size: 14px; color: var(--ink); background: var(--field); border: 1px solid var(--line-2); border-radius: var(--r-s); padding: .5rem .65rem; width: 100%; accent-color: var(--accent-fill); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
@media (max-width: 640px) { input, select, textarea { font-size: 16px; } } /* 16px stops phones zooming in */
textarea { resize: vertical; }
.actions { display: grid; gap: .6rem; }
.note-form { display: grid; gap: .5rem; }
.note-form .btn { justify-self: start; }
.stage-form { display: flex; gap: .5rem; align-items: end; }
.stage-form label { flex: 1; }
.stack { display: grid; gap: .6rem; max-width: 420px; }
.radio { display: flex; gap: .5rem; align-items: center; font-size: 1rem; color: var(--ink); }
.radio input { width: auto; }

/* ---------- timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.a { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s); padding: .55rem .75rem; min-width: 0; }
.a-head { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: baseline; font-size: .85rem; }
.a-head time { margin-left: auto; color: var(--muted); font-size: .8rem; }
.a-who { font-weight: 600; }
.kind { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.k-call, .k-note, .k-text, .k-offer { color: var(--accent-text); }
.a.note { background: var(--note); border-color: var(--note-line); }
.a.note .pre { margin-top: .25rem; }
.a.offer { background: color-mix(in srgb, var(--green) 6%, var(--panel)); border-color: color-mix(in srgb, var(--green) 22%, var(--line)); border-left: 3px solid var(--green); }
.a.text .bubble { margin-top: .3rem; padding: .45rem .65rem; border-radius: 12px; background: var(--in); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 92%; }
.a.text.out .bubble { background: var(--out); margin-left: auto; }
.a.minor { background: transparent; border-style: dashed; padding: .35rem .7rem; }
.a.minor .a-head { font-size: .8rem; }
.a audio { width: 100%; margin-top: .35rem; height: 36px; }
.more { text-align: center; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .35rem; margin-top: .4rem; }
.thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-xs); background: var(--bg); display: block; }
.folder { border-top: 1px solid var(--line); padding: .45rem 0; }
.folder:first-of-type { border-top: 0; }
.files li { display: grid; }
.hits li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s); padding: .6rem .75rem; }
.snip { margin-top: .25rem; white-space: pre-wrap; overflow-wrap: anywhere; }
mark { background: var(--mark); color: var(--mark-ink); border-radius: 2px; padding: 0 1px; }

/* ---------- sign-in, account and users (src/views/auth.ts) ---------- */
.auth-main { max-width: 440px; padding-top: 8vh; }
.auth-card { display: grid; gap: .75rem; }
.auth-card .stack { max-width: none; }
.auth-card .btn, .stack > .btn { padding: .7rem 1rem; font-size: 1rem; }
.auth-card p { margin: 0; }
.tag { display: inline-block; font-size: .75rem; font-weight: 600; padding: .05rem .45rem; border-radius: var(--r-xs); background: var(--accent-soft); color: var(--accent); vertical-align: middle; }
.tag.off { background: var(--red-soft); color: var(--red); }
.account-who { display: grid; gap: .2rem; max-width: 420px; }
.account-who p { margin: .4rem 0 0; }
.user-list { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.user-card { display: grid; gap: .3rem; }
.user-card.inactive { opacity: .7; }
.user-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.user-card details form { margin-top: .5rem; }
.invite-box p { margin: .35rem 0 .5rem; }
.copy-row { display: flex; gap: .4rem; }
.copy-row input { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: 14px; }
@media (max-width: 640px) { .user-list { grid-template-columns: 1fr; } }

/* ==================== Tasks + My Day (tasks builder) ==================== */
.btn.small { padding: .32rem .65rem; font-size: .85rem; }
.btn.danger { color: var(--red); }
/* Count tiles sit in the band (JobTread's idea in the blend): one dark teal block, small uppercase labels, big
   numbers coloured by meaning. Red tiles carry a red bar on the left edge so they are seen first. */
.tiles, .dl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 .9rem; background: var(--band); border: 1px solid var(--band-border); border-radius: var(--radius); overflow: hidden; }
.tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { display: flex; flex-direction: column; gap: 3px; padding: 12px 18px 13px; color: var(--band-v); box-shadow: -1px -1px 0 var(--band-line); min-width: 0; }
.tile:hover { text-decoration: none; background: var(--band-hover); }
.tile b { display: flex; align-items: center; gap: 5px; font-size: 26px; line-height: 32px; font-weight: 700; color: var(--band-v); }
.tile b .ic { width: 15px; height: 15px; stroke-width: 2; }
.tile span { order: -1; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--band-k); }
.tile.red b { color: var(--band-red); }
.tile.red:not(.zero) { box-shadow: inset 4px 0 0 var(--band-red), -1px -1px 0 var(--band-line); }
.tile.red:not(.zero) span { color: var(--band-red); }
.tile.orange b { color: var(--band-orange); }
.tile.blue b { color: var(--band-teal); }
.tile.green b, .tile.sf-green b { color: var(--band-green); }
.tile.on { background: var(--band-hover); box-shadow: inset 0 -3px 0 var(--band-teal), -1px -1px 0 var(--band-line); }
.tile.zero b { opacity: .55; }
@media (max-width: 640px) { .tile { padding: 10px 14px; } .tile b { font-size: 22px; line-height: 28px; } }
.latest { display: block; background: var(--note); border: 1px solid var(--note-line); border-radius: var(--r-s); padding: .6rem .8rem; margin: 0 0 .75rem; color: var(--ink); }
.latest:hover { text-decoration: none; border-color: var(--accent); }
.latest-body { display: block; color: var(--muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-filters { display: grid; gap: 0; }
.t-filters .chips { margin: .1rem 0 .5rem; align-items: center; }
.who-pick { display: flex; gap: .35rem; }
.who-pick select { padding: .28rem .5rem; border-radius: var(--r-xs); font-size: .88rem; width: auto; }
.t-all { display: flex; flex-direction: row; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ink); margin: .25rem 0 .5rem; }
.t-all input, .t-check input, .bulk-series input { width: 1.2rem; height: 1.2rem; }
.t-day { margin-bottom: .9rem; scroll-margin-top: 130px; }
.t-day h2 { font-size: .9rem; color: var(--muted); margin: 0 0 .35rem; }
.t-day.late h2 { color: var(--red); }
.t-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.t-row { display: flex; align-items: flex-start; gap: .6rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s); padding: .55rem .7rem; min-width: 0; }
.t-row.late { background: color-mix(in srgb, var(--red) 6%, var(--panel)); border-color: color-mix(in srgb, var(--red) 22%, var(--line)); border-left: 3px solid var(--red); }
.t-row.done .t-title { text-decoration: line-through; color: var(--muted); }
.t-check { display: flex; padding-top: .15rem; }
.t-main { flex: 1; min-width: 0; }
.t-title { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.t-kind { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent-text); background: var(--accent-soft); border-radius: var(--r-xs); padding: .05rem .4rem; }
.t-kind.k-appointment { color: var(--green); }
.t-meta { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: center; font-size: .82rem; color: var(--muted); margin-top: .15rem; }
.t-late { color: var(--red); font-weight: 600; }
.t-people { display: inline-flex; gap: .25rem; flex-wrap: wrap; }
.t-person { background: var(--chip); border: 1px solid transparent; border-radius: var(--r-xs); padding: 0 .45rem; font-size: .75rem; color: var(--ink); }
.t-btns { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
  .t-row { flex-wrap: wrap; }
  .t-btns { flex-basis: 100%; justify-content: flex-start; padding-left: 1.8rem; }
}
.bulk-bar { position: sticky; bottom: 0; z-index: 5; display: grid; gap: .4rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; padding: .6rem .7rem; box-shadow: var(--pop-shadow); margin-top: .5rem; }
.bulk-bar .btn .ic { width: 15px; height: 15px; }
.bulk-bar.idle { display: none; }
.bulk-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.bulk-row select, .bulk-row input[type="date"] { width: auto; flex: 1 1 9rem; padding: .35rem .5rem; }
.bulk-series { display: flex; flex-direction: row; align-items: center; gap: .35rem; margin-left: auto; color: var(--ink); }
.t-form fieldset { border: 1px solid var(--line); border-radius: var(--r-xs); padding: .5rem .7rem; margin: 0; }
.t-form legend { font-size: .85rem; color: var(--muted); padding: 0 .3rem; }
.t-assign { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.t-days { display: flex; flex-wrap: wrap; gap: .3rem; }
.t-days .day { display: flex; flex-direction: row; align-items: center; gap: .25rem; border: 1px solid var(--line); border-radius: var(--r-xs); padding: .25rem .6rem; color: var(--ink); font-size: .9rem; }
.t-days .day input, .t-assign input { width: auto; }
.t-days-quick { display: flex; gap: .35rem; margin: .45rem 0; flex-wrap: wrap; }
.t-len { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.lead-pick { position: relative; }
.lead-pick .live-results { z-index: 6; }
.t-edit-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.t-add { margin-top: .6rem; }
.t-add-form { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-top: .5rem; align-items: end; }
.t-add-form .wide { grid-column: 1 / -1; }
.t-add-foot { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.t-lead-list .t-row { padding: .45rem .55rem; }
.fold { background: var(--panel); border: 1px solid transparent; box-shadow: var(--shadow); border-radius: var(--radius); padding: .6rem .8rem; margin-bottom: .5rem; scroll-margin-top: 130px; }
.fold > summary { font-weight: 600; }
.fold[open] > summary { margin-bottom: .5rem; }
.md-leads { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.md-leads li { display: grid; border-top: 1px solid var(--line); padding-top: .4rem; }
.md-leads li:first-child { border-top: 0; padding-top: 0; }
.md-leads li .badge { justify-self: start; } /* a small label, not a bar across the box */
.md-more { text-align: center; }
.t-more { padding: 0 .7rem; margin-top: -.2rem; }
/* ==================== end Tasks + My Day ==================== */

/* ---------- lead editing (planner) ---------- */
details.edit { margin-top: .4rem; }
details.edit > summary { display: inline-block; list-style: none; cursor: pointer; color: var(--accent); font-size: .85rem; }
details.edit > summary::-webkit-details-marker { display: none; }
details.edit[open] > summary { color: var(--muted); margin-bottom: .4rem; }
.form-grid.compact { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); max-width: none; margin-top: .25rem; }
.small-form { gap: .45rem; max-width: none; }
.small-form input, .small-form select { padding: .35rem .5rem; }
form.inline { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 0; }
form.inline input { flex: 1 1 8rem; width: auto; }
form.inline select { width: auto; }
.btn.small { padding: .35rem .7rem; font-size: .85rem; }
.btn.danger, .linkish.danger { color: var(--red); }
.linkish { background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; font: inherit; text-decoration: underline; }
label.check { display: flex; flex-direction: row; align-items: center; gap: .4rem; color: var(--ink); }
label.check input { width: auto; }
.box.pinned { background: var(--note); border-color: var(--note-line); }
.pill.temp { font-weight: 600; border-color: transparent; }
.pill.t-hot { background: var(--red-soft); color: var(--red); }
.pill.t-warm { background: color-mix(in srgb, var(--hot) 18%, var(--panel)); color: var(--hot); }
.pill.t-cold { background: var(--accent-soft); color: var(--accent); }


/* ---------- all-leads list (planner) ---------- */
.views .chip.team { border-style: dashed; }
.active-filters:empty { display: none; }
.filters > summary { list-style: none; }
.filters > summary::-webkit-details-marker { display: none; }
.filters form { margin-top: .6rem; }
.filters select[multiple] { min-height: 6rem; }
.bulk { margin: .75rem 0; }
.bulk .form-grid { margin-top: .5rem; }
.table-wrap { overflow: auto; max-height: calc(100vh - 220px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.leads-table { margin: 0; }
.leads-table thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; box-shadow: 0 1px 0 var(--line); }
.leads-table td .pill { margin-top: .25rem; font-size: .75rem; padding: .05rem .5rem; }
.leads-table input[type=checkbox] { width: 1.1rem; height: 1.1rem; }
.pager { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .75rem 0; }
.pager .page-box { width: 5rem; display: inline-block; }
.save-view { margin: .5rem 0 1rem; }
@media (max-width: 640px) {
  .table-wrap { max-height: none; border: 0; background: transparent; }
  .leads-table thead { display: none; }
  .leads-table, .leads-table tbody, .leads-table tr, .leads-table td { display: block; width: 100%; }
  .leads-table tr { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .5rem; padding: .5rem .6rem; position: relative; }
  .leads-table td { border: 0; padding: .1rem 0 .1rem 2rem; }
  .leads-table td:first-child { position: absolute; left: .55rem; top: .6rem; padding: 0; width: auto; }
}
@media (max-width: 640px) {
  .leads-table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: .85em; }
}

/* ==== Deals (deals builder) ==== */
.dl-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0 0 .75rem; }
.dl-tiles .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 900px) { .dl-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } .dl-tiles .tile:last-child:nth-child(odd) { grid-column: auto; } }
.dl-tiles .tile b.m { font-size: 1.35rem; line-height: 1.15; overflow-wrap: anywhere; }
.fee-low { color: var(--red); font-weight: 700; }
.dl-badge { display: inline-block; border-radius: var(--r-xs); padding: .02rem .4rem; font-size: .74rem; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.dl-badge.red { background: var(--red-soft); color: var(--red); }
.dl-badge.orange { background: color-mix(in srgb, var(--hot) 18%, var(--panel)); color: var(--hot); }
.dl-badge.blue { background: var(--accent-soft); color: var(--accent); }
.dl-card .dl-money { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin-top: .3rem; font-size: .85rem; color: var(--muted); }
.dl-card .dl-money b { color: var(--ink); }
.dl-card .card-foot { flex-wrap: wrap; }
/* calendar: month grid on wide screens, dated list on phones */
.dl-cal-wide { display: none; }
@media (min-width: 900px) { .dl-cal-wide { display: grid; gap: 1rem; } .dl-cal-phone { display: none; } }
.dl-month { margin-bottom: 1rem; }
.dl-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.dl-wd { background: var(--bg); color: var(--muted); font-size: .78rem; font-weight: 600; padding: .3rem .4rem; }
.dl-day { background: var(--panel); min-height: 6.2rem; padding: .25rem .3rem; display: grid; align-content: start; gap: .2rem; min-width: 0; }
.dl-day.blank { background: var(--bg); }
.dl-day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.dl-num { font-size: .78rem; color: var(--muted); }
.dl-ev { display: block; font-size: .78rem; line-height: 1.25; padding: .15rem .3rem; border-radius: var(--r-xs); background: var(--accent-soft); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-ev b { color: var(--accent); font-weight: 700; }
.dl-ev.close { background: color-mix(in srgb, var(--green) 16%, var(--panel)); }
.dl-ev.close b { color: var(--green); }
.dl-ev.late { background: var(--red-soft); }
.dl-ev.late b { color: var(--red); }
.dl-dates { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.dl-dates li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .65rem; display: grid; gap: .3rem; }
.dl-dates .dl-ev { white-space: normal; font-size: .9rem; padding: .3rem .45rem; }
.dl-date { font-weight: 600; }
.dl-date.today { color: var(--accent); }
.dl-danger { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.dl-danger > li { display: grid; gap: .15rem; }
.dl-danger ul { margin: .3rem 0 0; padding-left: 1.1rem; color: var(--red); }
/* the deal box on the lead page */
.box.deal { border-top: 3px solid var(--green); }
.box.deal > h2 { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.dl-part { border-top: 1px solid var(--line); padding-top: .55rem; margin-top: .65rem; }
.dl-part h3 { margin: 0 0 .45rem; }
.dl-hand { display: inline-block; margin-left: .3rem; font-size: .72rem; font-weight: 600; color: var(--hot); border: 1px solid currentColor; border-radius: var(--r-xs); padding: 0 .3rem; }
.dl-calc { margin-top: .45rem; }
.dl-outcome { margin: .3rem 0 0; padding: .5rem .7rem; border-radius: var(--r-xs); font-weight: 600; }
.dl-outcome.won { background: color-mix(in srgb, var(--green) 14%, var(--panel)); }
.dl-outcome.lost { background: var(--red-soft); }
.dl-keys, .dl-docs, .dl-contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.dl-keys li, .dl-contacts li { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.dl-keys li.na { opacity: .7; }
.dl-k { color: var(--muted); font-size: .82rem; min-width: 7.5rem; }
.dl-docs li { display: flex; flex-wrap: wrap; gap: .2rem .5rem; align-items: baseline; }
.dl-docs li details.edit { margin: 0; }
.dl-docs li details.edit[open] { flex-basis: 100%; }
.dl-mark { width: 1.2rem; text-align: center; font-weight: 700; color: var(--muted); }
.dl-docs .s-received .dl-mark { color: var(--green); }
.dl-docs .s-not_needed .dl-doc b { color: var(--muted); text-decoration: line-through; }
.dl-doc { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dl-dates-form { display: grid; gap: .5rem; }
.dl-date-row { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: end; }
.dl-date-row > label:first-child { flex: 1 1 12rem; }
.dl-close { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.dl-close details.edit[open] { flex-basis: 100%; }
/* ==== end Deals ==== */

/* ==== Reports (reports builder) ==== */
.rp-picker { margin: 0 0 .75rem; }
.rp-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.rp-row label { display: grid; gap: .15rem; font-size: .8rem; color: var(--muted); }
.rp-row input, .rp-row select { font: inherit; font-size: 16px; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--panel); color: var(--ink); }
.rp-period { margin: .5rem 0 0; font-size: .9rem; }
.rp-who { margin: 0 0 .6rem; }
.rp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0 0 .75rem; }
@media (min-width: 700px) { .rp-tiles { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } }
.rp-tile { display: grid; gap: .1rem; padding: .7rem .8rem; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.rp-tile b { font-size: 1.7rem; line-height: 1.1; }
.rp-tile span { font-size: .85rem; font-weight: 600; }
.rp-tile small { color: var(--muted); font-size: .78rem; }
.rp-box { margin-bottom: .75rem; }
.rp-box h2 { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.rp-csv { margin-left: auto; font-size: .85rem; font-weight: 400; }
.rp-scroll { overflow-x: auto; }
.rp-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rp-table th, .rp-table td { padding: .4rem .5rem; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.rp-table thead th { border-top: 0; font-size: .78rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.rp-table thead th a { color: var(--muted); }
.rp-table thead th a.on { color: var(--accent); }
.rp-table tbody th { font-weight: 600; }
.rp-table .num { text-align: right; white-space: nowrap; }
.rp-wide tbody th { position: sticky; left: 0; background: var(--panel); min-width: 9rem; }
.rp-src { display: block; font-weight: 400; }
.rp-v { display: block; }
.rp-bar { display: block; height: 5px; margin-top: .2rem; border-radius: var(--r-xs); background: var(--accent-soft); min-width: 3rem; }
.rp-bar i { display: block; height: 100%; border-radius: var(--r-xs); background: var(--accent); }
.rp-auto { color: var(--muted); }
.rp-auto .rp-bar i { background: var(--muted); }
@media (max-width: 640px) {
  .rp-cards thead { display: none; }
  .rp-cards, .rp-cards tbody, .rp-cards tr { display: block; }
  .rp-cards tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem .6rem; padding: .55rem 0; border-top: 1px solid var(--line); }
  .rp-cards tr th { grid-column: 1 / -1; border: 0; padding: 0; }
  .rp-cards td { border: 0; padding: 0; text-align: left; }
  .rp-cards td::before { content: attr(data-label); display: block; font-size: .72rem; color: var(--muted); }
}
.rp-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.rp-funnel li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .1rem .6rem; align-items: center; }
.rp-step { font-weight: 600; font-size: .9rem; }
.rp-fbar { display: block; height: 14px; border-radius: 4px; background: var(--accent-soft); }
.rp-fbar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.rp-fnum { grid-column: 2; font-size: .9rem; }
@media (max-width: 640px) { .rp-funnel li { grid-template-columns: 1fr; } .rp-fnum { grid-column: 1; } }
.rp-defs { color: var(--muted); font-size: .8rem; margin: .5rem 0; }
.rp-defs ul { margin: .25rem 0 0; padding-left: 1.1rem; }
/* ==== end Reports ==== */

/* ---------- lead intake (planner) ---------- */
.badge.st-created { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge.st-matched { color: var(--green); }
.badge.st-failed { background: var(--red-soft); color: var(--red); border-color: transparent; font-weight: 600; }
.badge.st-ignored, .badge.st-duplicate { opacity: .8; }
.copy-row input, .flash input[readonly] { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; margin: .35rem 0; }
.row-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
pre.code { background: var(--bg); padding: .6rem; border-radius: var(--r-xs); overflow: auto; max-height: 420px; }

/* ==== Buyers (buyers builder) ==== */
.only-wide-block { display: none; }
@media (min-width: 900px) { .only-wide-block { display: block; } .only-phone-block { display: none; } }
.nowrap { white-space: nowrap; }
.b-head-btns { display: flex; gap: .4rem; flex-wrap: wrap; }
.b-filters { display: grid; gap: .5rem; margin-bottom: .6rem; }
.b-search { display: flex; gap: .4rem; }
.b-search input { flex: 1; min-width: 0; }
.b-quick { margin: 0; }
.b-filters > details > summary { font-weight: 600; padding: .2rem 0; }
.b-tagmode { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: .4rem 0; }
.b-tagmode input { width: auto; }
.b-tagfind { margin: .2rem 0 .4rem; max-width: 320px; }
.b-tagtable { max-width: 560px; }
.b-tagtable input { width: 1.15rem; height: 1.15rem; }
.b-tagtable td:nth-child(-n+2), .b-tagtable th:nth-child(-n+2) { text-align: center; width: 4.5rem; }
.b-tagpick .b-tagtable-wrap, .b-tagpick { max-height: none; }
.b-filter-foot { display: flex; gap: .8rem; align-items: center; }
.b-active { flex-wrap: wrap; margin: 0 0 .5rem; }
.b-count { margin: .25rem 0 .5rem; }
.b-table-wrap { max-height: calc(100vh - 190px); overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.b-table { margin: 0; }
.b-table thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); box-shadow: 0 1px 0 var(--line); padding: .5rem .45rem; }
.b-table tbody tr:hover { background: var(--accent-soft); }
.b-table td { padding: .4rem .45rem; }
.b-email { overflow-wrap: anywhere; max-width: 16rem; }
.b-tags { display: inline-flex; flex-wrap: wrap; gap: .2rem; align-items: center; }
.b-tags .tag { text-decoration: none; }
.b-tags .tag.on { background: var(--accent-fill); color: var(--accent-ink); }
.badge.vip { background: color-mix(in srgb, var(--hot) 18%, var(--panel)); color: var(--hot); border-color: transparent; font-weight: 700; }
.b-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.b-card-row { display: flex; flex-wrap: wrap; gap: .2rem .7rem; margin-top: .2rem; font-size: .92rem; }
.pager { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: .8rem 0; }
.pager .pg { padding: .35rem .65rem; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--panel); color: var(--ink); min-width: 2.2rem; text-align: center; }
.pager .pg.on { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-ink); }
.pager .pg.off { opacity: .4; pointer-events: none; }
.pager .gap { color: var(--muted); padding: 0 .15rem; }
.pager .goto { display: flex; gap: .3rem; align-items: center; margin-left: auto; }
.pager .goto-l { display: flex; flex-direction: row; align-items: center; gap: .35rem; white-space: nowrap; color: var(--ink); }
.pager .goto input { width: 5.5rem; padding: .35rem .45rem; }
@media (max-width: 640px) { .pager .goto { margin-left: 0; flex-basis: 100%; } }
.b-grid { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
.b-col { display: grid; gap: .75rem; align-content: start; min-width: 0; }
@media (min-width: 1000px) { .b-grid { grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); } }
.b-deals, .b-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.b-deals li { border-top: 1px solid var(--line); padding-top: .45rem; }
.b-deals li:first-child { border-top: 0; padding-top: 0; }
.b-notes { margin-top: .6rem; }
.b-import .stack { max-width: 560px; }
.b-import-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.pill.ds-offered { color: var(--hot); border-color: var(--hot); }
.pill.ds-assigned { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
.pill.ds-passed { opacity: .6; }
/* dispo box on the lead page */
.dispo [id] { scroll-margin-top: 130px; }
.dispo .d-tiles .tile b { font-size: 1.5rem; }
.d-group > summary, .d-suggest > summary, .d-listing > summary { font-weight: 600; }
.d-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.d-row { display: flex; gap: .5rem; align-items: flex-start; border-top: 1px solid var(--line); padding-top: .4rem; }
.d-row:first-child { border-top: 0; padding-top: 0; }
.d-main { flex: 1; min-width: 0; }
.d-row > details.edit { margin: 0; }
.d-row > details.edit[open] { flex-basis: 100%; }
.dispo .d-row { flex-wrap: wrap; }
.d-comment { color: var(--muted); margin-top: .15rem; }
.d-why { margin: .15rem 0 0; padding-left: 1.1rem; font-size: .82rem; color: var(--muted); }
.d-add { position: relative; }
.d-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .35rem; max-height: 340px; overflow-y: auto; }
.d-photo { position: relative; display: block; }
.d-photo input { position: absolute; top: .3rem; left: .3rem; width: 1.15rem; height: 1.15rem; }
.d-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-xs); display: block; border: 2px solid transparent; }
.d-photo input:checked + img { border-color: var(--accent); }
.d-photos { border: 1px solid var(--line); border-radius: var(--r-xs); padding: .5rem .6rem; margin: 0; }
.d-prepare { display: grid; gap: .3rem; margin-top: .6rem; justify-items: start; }
/* ==== end Buyers ==== */

/* ==== E-sign (esign builder) ==== */
.es-head-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.es-status { display: inline-block; border-radius: var(--r-xs); padding: .1rem .55rem; font-size: .78rem; font-weight: 700; vertical-align: middle; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.es-status.es-sent, .es-status.es-viewed { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.es-status.es-signing { background: color-mix(in srgb, var(--hot) 16%, var(--panel)); color: var(--hot); border-color: transparent; }
.es-status.es-completed { background: color-mix(in srgb, var(--green) 16%, var(--panel)); color: var(--green); border-color: transparent; }
.es-status.es-declined, .es-status.es-voided, .es-status.es-expired { background: var(--red-soft); color: var(--red); border-color: transparent; }
.es-red { color: var(--red); }
.es-person { display: inline-block; border-radius: var(--r-xs); padding: 0 .4rem; font-size: .78rem; font-weight: 700; color: #fff; background: var(--c); }
.es-docs { list-style: none; margin: 0; padding: 0; }
.es-docs li { padding: .55rem 0; border-top: 1px solid var(--line); }
.es-docs li:first-child { border-top: 0; }
.es-doc-main { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.es-list-box { margin-top: .75rem; }
.es-doc-grid { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); margin-bottom: .75rem; }
@media (min-width: 900px) { .es-doc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.es-signers, .es-facts, .es-outbox { list-style: none; margin: 0; padding: 0; }
.es-signers li, .es-outbox li { padding: .5rem 0; border-top: 1px solid var(--line); }
.es-signers li:first-child, .es-outbox li:first-child { border-top: 0; }
.es-facts li { padding: .15rem 0; }
.es-inline { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-top: .35rem; }
.es-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.es-hash { overflow-wrap: anywhere; font-family: ui-monospace, Consolas, monospace; }
.es-trail { margin: 0; padding-left: 1.2rem; }
.es-trail li { padding: .2rem 0; }
.es-links { border-color: var(--accent); margin-bottom: .75rem; }
.es-link { padding: .45rem 0; border-top: 1px solid var(--line); }
.es-link:first-of-type { border-top: 0; }
.es-link .copy-row { display: flex; gap: .4rem; margin-top: .3rem; }
.es-void { margin-top: .75rem; }
.es-signer { border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: var(--r-xs); padding: .5rem .7rem; margin: .5rem 0; }
.es-signer legend { padding: 0 .3rem; }
.es-order-toggle { color: var(--ink); display: flex; gap: .4rem; align-items: flex-start; }
.es-order-toggle input { width: auto; margin-top: .2rem; }
.es-send-buttons { display: flex; gap: .5rem; margin: .5rem 0 1rem; }
.es-pick { max-width: 480px; }
.es-oneoff { margin-top: .6rem; }
.es-consent-peek { margin-top: .35rem; }
.es-consent-text ul { margin: .3rem 0; padding-left: 1.2rem; }
/* field placer */
.es-builder { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .es-builder { grid-template-columns: 260px minmax(0, 1fr); align-items: start; } .es-tools { position: sticky; top: 70px; max-height: calc(100vh - 84px); overflow-y: auto; } .es-phone-note { display: none; } }
.es-tools { display: grid; gap: .6rem; }
.es-tool-label { display: block; font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: .25rem; }
.es-types { display: flex; flex-wrap: wrap; gap: .3rem; }
.es-types .chip { cursor: pointer; font: inherit; font-size: .85rem; }
.es-props { display: grid; gap: .45rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.es-props[hidden], .es-props label[hidden] { display: none; }
.es-props .radio { display: flex; gap: .4rem; align-items: center; color: var(--ink); }
.es-props .radio input { width: auto; }
.es-pages { display: grid; gap: .3rem; min-width: 0; }
.es-pages.placing .es-layer { cursor: crosshair; }
.es-page-no { font-size: .8rem; color: var(--muted); margin-top: .4rem; }
.es-page { position: relative; width: 100%; max-width: 900px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.es-page canvas { display: block; width: 100%; height: 100%; }
.es-layer { position: absolute; inset: 0; }
.es-field { position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1.5px solid var(--c, var(--es-me, #1f6feb));
  background: color-mix(in srgb, var(--c, var(--es-me, #1f6feb)) 16%, transparent); color: #0b1a4a; font: inherit; font-size: 11px; line-height: 1.1; border-radius: var(--r-xs); cursor: move; user-select: none; touch-action: none; padding: 0; }
.es-field span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.es-field i { position: absolute; top: 0; left: 0; font-style: normal; font-size: 9px; font-weight: 700; color: #fff; background: var(--c); padding: 0 3px; border-bottom-right-radius: 3px; }
.es-field.sel { outline: 2px solid var(--c); outline-offset: 1px; z-index: 2; }
.es-handle { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; background: var(--c); cursor: nwse-resize; }
/* signer pages */
.es-sign-main { max-width: 900px; margin: 0 auto; padding: 0 12px 6rem; }
.es-secure { margin-left: auto; }
.es-msg-card { max-width: 560px; margin: 1.25rem auto; }
.es-msg-card h1 { margin-bottom: .4rem; }
.es-msg-card.ok { border-top: 4px solid var(--green); }
.es-consent-list { padding-left: 1.2rem; }
.es-consent-list li { margin: .35rem 0; }
.es-consent-form { display: grid; gap: .75rem; margin-top: .75rem; }
.es-tick { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink); font-size: .95rem; }
.es-tick input { width: 1.4rem; height: 1.4rem; flex: none; margin-top: .1rem; }
.btn.es-big { width: 100%; padding: .85rem 1rem; font-size: 1.05rem; }
.btn.es-big:disabled { opacity: .45; cursor: not-allowed; }
.es-decline { margin-top: 1rem; }
.es-decline summary { color: var(--muted); }
.es-sign-bar { position: sticky; top: 0; z-index: 15; display: flex; gap: .6rem; align-items: center; background: var(--panel); border-bottom: 1px solid var(--line); padding: .5rem 4px; margin: 0 -4px .5rem; }
.es-signer-body .top { position: static; }
.es-sign-title { flex: 1; min-width: 0; display: grid; }
.es-sign-title b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-doc { display: grid; gap: .6rem; }
.es-field.mine { cursor: pointer; border-width: 2px; font-weight: 600; }
.es-field.mine.req { animation: es-glow 1.6s ease-in-out infinite; }
.es-field.mine.filled { background: color-mix(in srgb, var(--es-me) 6%, transparent); border-style: dashed; }
.es-field.mine img { max-width: 100%; max-height: 100%; }
.es-field.pulse { animation: es-pulse .9s ease-out 2; }
.es-tick-mark { font-size: 1.1em; font-weight: 700; }
@keyframes es-glow { 50% { background: color-mix(in srgb, var(--es-me) 32%, transparent); } }
@keyframes es-pulse { 0% { box-shadow: 0 0 0 0 var(--es-me); } 100% { box-shadow: 0 0 0 12px transparent; } }
.es-finish-wrap { max-width: 560px; margin: 1rem auto; }
.es-sheet { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; }
.es-sheet[hidden], .es-sheet [hidden] { display: none; }
.es-sheet-card { background: var(--panel); width: 100%; max-width: 620px; border-radius: 4px 4px 0 0; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); display: grid; gap: .6rem; }
@media (min-width: 700px) { .es-sheet { align-items: center; } .es-sheet-card { border-radius: 4px; } }
.es-sheet-tabs { display: flex; gap: .35rem; }
.es-sheet-tabs .chip { cursor: pointer; font: inherit; }
.es-pad { width: 100%; aspect-ratio: 3 / 1; height: auto; background: #fff; border: 1px dashed var(--muted); border-radius: var(--r-xs); touch-action: none; display: block; }
.es-styles { display: grid; gap: .35rem; margin-top: .5rem; }
.es-style { font-size: 1.7rem; background: #fff; color: #0b1a4a; border: 1px solid var(--line); border-radius: var(--r-xs); padding: .3rem .6rem; text-align: left; cursor: pointer; overflow: hidden; white-space: nowrap; }
.es-style.on { border: 2px solid var(--accent); }
.es-sheet-buttons { display: flex; gap: .5rem; justify-content: flex-end; }
body.es-sheet-open { overflow: hidden; }
/* ==== end E-sign ==== */

/* ---------- phone lines (planner) ---------- */
.lines { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.line { display: grid; gap: .45rem; }
.line.off { opacity: .6; }
.line-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.rings { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; }


/* ==== Safety (safety builder) ==== */
.sf-tiles b { font-size: 1.35rem; }
.sf-buttons { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sf-buttons form { margin: 0; }
.sf-chips { flex-wrap: wrap; }
.sf-log { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.sf-log li { padding: .55rem .8rem; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.sf-log li:first-child { border-top: 0; }
.sf-compare { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 641px) { .sf-compare { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.sf-side h2 { overflow-wrap: anywhere; }
.sf-keep { display: flex; gap: .45rem; align-items: center; font-weight: 600; padding: .45rem .6rem; margin: 0 0 .6rem; border-radius: var(--r-xs); background: var(--accent-soft); cursor: pointer; }
.sf-keep input { width: 1.15rem; height: 1.15rem; }
.sf-side:has(.sf-keep input:checked) { outline: 2px solid var(--accent); }
.sf-facts { display: grid; grid-template-columns: 5.5rem 1fr; gap: .35rem .6rem; margin: 0; }
.sf-facts dt { color: var(--muted); font-size: .85rem; }
.sf-facts dd { margin: 0; overflow-wrap: anywhere; }
.sf-admin-form { display: inline; margin: 0; }
/* ==== end Safety ==== */

/* ==== Email (email builder) ==== */
.em-tiles { margin-top: .25rem; }
.em-list { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .45rem; }
.em-card-top { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.em-status { display: inline-block; border-radius: var(--r-xs); padding: .1rem .55rem; font-size: .78rem; font-weight: 600; background: var(--bg); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.em-status.s-sent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.em-status.s-sending, .em-status.s-paused { background: var(--note); border-color: var(--note-line); color: var(--ink); }
.em-status.s-not_sent { background: var(--red-soft); color: var(--red); border-color: transparent; }
.em-plain { list-style: none; margin: .25rem 0; padding: 0; display: grid; gap: .3rem; }
.em-missing { color: var(--red); }
.em-problems ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.em-layout { display: grid; gap: 1rem; }
@media (min-width: 1000px) { .em-layout { grid-template-columns: minmax(0, 1fr) 640px; align-items: start; } .em-preview { position: sticky; top: 70px; } }
.em-editor { display: grid; gap: .75rem; min-width: 0; }
.em-fs { border: 0; margin: 0; padding: 0; display: grid; gap: .75rem; min-width: 0; }
.stack-wide { display: grid; gap: .6rem; }
.em-default { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.em-find { display: flex; gap: .5rem; align-items: center; }
.em-find input { flex: 1; min-width: 0; }
.em-results { display: grid; gap: .35rem; }
.em-results .btn { text-align: left; justify-content: flex-start; }
.em-deal { margin: 0; display: grid; gap: .1rem; }
.em-blocks { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.em-block { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .75rem; display: grid; gap: .5rem; box-shadow: var(--shadow); scroll-margin-top: 130px; }
.em-block-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.em-tools { display: flex; gap: .25rem; }
.em-tools .btn { min-width: 2.2rem; padding: .3rem .5rem; }
.em-tools .btn:disabled { opacity: .35; cursor: default; }
.em-add { display: flex; gap: .5rem; align-items: center; }
.em-add select { flex: 1; }
.em-savebar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: .5rem; padding: .6rem 0; background: var(--bg); border-top: 1px solid var(--line); z-index: 2; }
.em-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .35rem .75rem; }
.em-pick summary { color: var(--accent); font-size: .9rem; }
.em-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .4rem; margin-top: .45rem; max-height: 360px; overflow-y: auto; }
.em-thumb { position: relative; display: block; border-radius: var(--r-xs); overflow: hidden; border: 2px solid transparent; cursor: pointer; }
.em-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.em-thumb input { position: absolute; top: .3rem; left: .3rem; width: 1.1rem; height: 1.1rem; }
.em-thumb:has(input:checked) { border-color: var(--accent); }
.em-thumb.auto { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--bg); border-color: var(--line); padding: .3rem 1.6rem .3rem .3rem; font-size: .8rem; color: var(--ink); text-align: center; }
.em-cur { display: block; max-width: 220px; width: 100%; border-radius: var(--r-xs); }
.em-fields code { font-size: .82rem; }
.em-preview { display: grid; gap: .5rem; min-width: 0; }
.em-pv-tools { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.em-seg { display: flex; gap: .3rem; }
.em-pv-subject { overflow-wrap: anywhere; }
.em-frame-wrap { margin: 0 auto; width: 100%; background: #f2f4f7; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.em-frame { display: block; width: 100%; height: 900px; border: 0; background: #f2f4f7; margin: 0 auto; }
.em-indent { display: grid; gap: .4rem; padding-left: 1.6rem; }
.em-aud { margin: .75rem 0 .35rem; }
.em-skip { border-top: 1px solid var(--line); padding: .4rem 0; }
.em-skip:first-of-type { border-top: 0; }
.em-go { margin-top: .75rem; }
.em-confirm { display: grid; gap: .5rem; grid-template-columns: minmax(0, 14rem) auto; align-items: end; }
.em-confirm .wide { grid-column: 1 / -1; margin: 0; }
@media (max-width: 640px) { .em-confirm { grid-template-columns: 1fr; } .em-confirm .btn { width: 100%; } }
.em-headers { margin-bottom: .75rem; }
.em-sub { margin: 0 0 .6rem; color: var(--muted); }
/* ==== end Email ==== */

/* ==== Phones (phones builder) ==== */
.phone-widget { position: fixed; right: 12px; bottom: 12px; z-index: 40; width: min(320px, calc(100vw - 24px)); display: grid; justify-items: end; gap: .4rem; }
@media (max-width: 640px) { .phone-widget { bottom: calc(76px + env(safe-area-inset-bottom)); } }
.pw-bar { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: var(--pill);
          padding: .45rem .85rem; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; box-shadow: var(--pop-shadow); order: 2; }
.pw-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--muted); }
.phone-widget[data-state="idle"] .pw-dot { background: var(--green); }
.phone-widget[data-state="calling"] .pw-dot, .phone-widget[data-state="ringing"] .pw-dot, .phone-widget[data-state="connected"] .pw-dot { background: var(--accent); }
.phone-widget[data-state="incoming"] .pw-dot { background: var(--hot); animation: pw-pulse 1s infinite; }
.phone-widget[data-state="incoming"] .pw-bar, .phone-widget[data-state="connected"] .pw-bar { border-color: var(--accent); }
@keyframes pw-pulse { 50% { opacity: .3; } }
.pw-panel { order: 1; width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem; box-shadow: var(--pop-shadow); display: grid; gap: .5rem; }
.pw-who { font-weight: 700; font-size: 1.05rem; display: grid; gap: .1rem; }
.pw-sub { display: block; color: var(--muted); font-size: .82rem; font-weight: 400; }
.pw-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.pw-dial { display: flex; gap: .4rem; }
.pw-dial input { flex: 1; min-width: 0; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--bg); color: var(--ink); font-size: 16px; }
.pw-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
.pw-keys .btn { font-size: 1.05rem; padding: .45rem 0; }
.pw-note { margin: 0; font-size: .85rem; color: var(--muted); }
.btn.danger-fill { background: var(--red); border-color: var(--red); color: var(--accent-ink); }
.btn.ok-fill { background: var(--green); border-color: var(--green); color: var(--accent-ink); }
.call-btn { margin-left: .35rem; }
.call-btn:disabled { opacity: .65; cursor: not-allowed; font-weight: 400; }
.call-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.call-row { border-top: 1px solid var(--line); padding-top: .5rem; display: grid; gap: .35rem; }
.call-row:first-child { border-top: 0; padding-top: 0; }
.call-row-head { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: baseline; }
.call-row audio { width: 100%; max-width: 420px; height: 36px; }
details.box > summary { cursor: pointer; list-style: none; }
details.box > summary h2 { display: inline; margin: 0; }
details.box[open] > summary { margin-bottom: .5rem; }
.allow-list { margin: .25rem 0 .5rem; padding-left: 1.1rem; display: grid; gap: .25rem; }
/* ==== end Phones ==== */

/* ==== Panels (the blend's white blocks) and the To-do page (my-day.ts) ==== */
.panel { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.panel + .panel { margin-top: 14px; }
.panel-h { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px; }
.panel-h h2 { font-size: 16px; margin: 0; }
.panel-h h2 .n { font-size: 16px; }
.panel-h .right { margin-left: auto; font-size: 13px; font-weight: 600; }
.panel-b { padding: 4px 18px 16px; }
.panel-f { border-top: 1px solid var(--line); padding: 11px 18px; font-size: 13px; font-weight: 600; }
.ph-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin-bottom: 14px; flex-wrap: wrap; }
.ph-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-fill); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.ph-date { font-size: 13px; color: var(--faint); padding-top: 2px; }
.ph-head .btn { margin-left: auto; }
.td-cols { display: flex; gap: 14px; align-items: flex-start; }
.td-main { flex: 1; min-width: 0; }
.td-side { width: 344px; flex: none; }
.td-tabs { display: flex; align-items: center; gap: 8px; padding: 0 18px 12px; flex-wrap: wrap; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-s); background: var(--soft); border: 1px solid var(--line); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg > a { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.seg > a:hover { text-decoration: none; background: var(--line); }
.seg > a .c { color: var(--faint); font-weight: 500; }
.seg > a.on { background: var(--accent-soft); color: var(--accent-text); }
.seg > a.on .c { color: inherit; }
/* the bulk bar sits above the task table on the To-do page */
.bulk-bar.top { position: static; margin: 0; border-radius: 0; border-width: 1px 0 0; box-shadow: none; background: var(--accent-faint); padding: 9px 18px; }
.bulk-n { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); white-space: nowrap; margin-right: 4px; }
.bulk-n .ic { width: 16px; height: 16px; }
.tbl-wrap { overflow-x: auto; }
.td-tasks th, .td-tasks td { padding: 10px 12px; vertical-align: middle; }
.td-tasks th + th, .td-tasks td + td { border-left: 1px solid var(--line); }
.td-tasks thead th { border-top: 1px solid var(--line); }
.td-tasks .c-cb { width: 42px; padding-right: 0; text-align: center; }
.td-tasks .c-cb + th, .td-tasks .c-cb + td { border-left: 0; }
.td-tasks .c-cb input { width: 15px; height: 15px; margin: 0; vertical-align: middle; }
.td-tasks .c-task a, .td-tasks .c-prop a { font-weight: 600; color: var(--ink); }
.td-tasks .c-act { width: 84px; padding: 4px 8px; text-align: right; white-space: nowrap; }
.td-tasks .c-act .icon-btn { width: 28px; height: 28px; border-radius: 8px; }
.td-tasks .c-act > * { display: inline-grid; vertical-align: middle; }
.td-tasks tbody tr:hover td { background: var(--soft-2); }
.td-tasks tr.sel td { background: var(--accent-faint); }
.td-tasks tr:last-child td { border-bottom: 0; }
.rep { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.rep .ic { width: 14px; height: 14px; }
.ppl { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.ppl > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.td-later { margin: 0; padding: 10px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.td-empty { margin: 0; padding: 4px 18px 18px; color: var(--muted); }
.ld-fold { margin: 0 14px 14px; }
.ld-fold > summary { display: flex; align-items: center; gap: 9px; padding: 0 14px; min-height: 46px; border-radius: var(--r-s); background: var(--soft-2); border: 1px solid var(--line); cursor: pointer; list-style: none; }
.ld-fold > summary::-webkit-details-marker { display: none; }
.ld-fold > summary .chev { width: 22px; height: 22px; display: grid; place-items: center; transition: transform .15s; }
.ld-fold > summary .chev .ic { width: 15px; height: 15px; }
.ld-fold[open] > summary .chev { transform: rotate(90deg); }
.ld-fold > summary .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--accent); }
.ld-fold > summary .dot.red { background: var(--red-dot); }
.ld-fold > summary .sub { font-size: 13px; color: var(--faint); margin-left: auto; text-align: right; }
.ld-fold[open] > summary { border-radius: var(--r-s) var(--r-s) 0 0; }
.ld-body { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-s) var(--r-s); overflow: hidden; }
.ld-body .tbl th, .ld-body .tbl td { padding: 9px 12px; vertical-align: middle; }
.ld-body .tbl tr:last-child td { border-bottom: 0; }
.ld-body .tbl a { font-weight: 600; color: var(--ink); }
.ld-body > p { margin: 0; padding: 10px 12px; color: var(--muted); font-size: 13px; }
.ld-body > p + .tbl-wrap, .ld-body > .tbl-wrap + p { border-top: 1px solid var(--line); }
.deal-t th, .deal-t td { padding: 9px; vertical-align: middle; }
.deal-t th:first-child, .deal-t td:first-child { padding-left: 18px; }
.deal-t a { font-weight: 600; color: var(--ink); }
.deal-t tr:last-child td { border-bottom: 0; }
.deal-t .rel { font-size: 12px; line-height: 16px; color: var(--faint); }
.deal-t .rel.late { color: var(--red); }
.act { display: flex; gap: 10px; padding: 14px 16px; margin: 0 14px 14px; border-radius: var(--r-s); background: var(--note); border: 1px solid var(--note-line); color: var(--ink); }
.act:hover { text-decoration: none; border-color: var(--hot); }
.act-body { flex: 1; min-width: 0; font-size: 13px; line-height: 19px; }
.act-body .why { color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.act-body .t { color: var(--faint); font-size: 12px; margin-top: 5px; }
.m-date { display: none; }
@media (max-width: 1000px) {
  .td-cols { flex-direction: column; align-items: stretch; }
  .td-side { width: auto; }
  .td-side .panel:first-child { margin-top: 0; }
}
@media (max-width: 640px) {
  .ph-head { padding: 10px 14px; margin-bottom: 10px; gap: 8px; }
  .ph-head .ph-icon, .ph-head h1 { display: none; }
  .ph-head .btn { min-height: 30px; font-size: 13px; }
  .panel + .panel { margin-top: 10px; }
  .panel-h { padding: 0 14px; min-height: 48px; }
  .panel-h h2 { font-size: 15px; }
  .td-tabs { padding: 0 14px 10px; }
  .seg > a { padding: 0 10px; }
  .bulk-bar.top { padding: 8px 14px; }
  .td-tasks thead { display: none; }
  .td-tasks, .td-tasks tbody { display: block; }
  .td-tasks tr { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "cb task act" "cb prop due"; border-top: 1px solid var(--line); padding: 10px 4px 10px 14px; column-gap: 6px; row-gap: 2px; }
  .td-tasks td { display: block; padding: 0; border: 0 !important; background: none !important; }
  .td-tasks tr.sel { background: var(--accent-faint); }
  .td-tasks .c-cb { grid-area: cb; width: auto; padding-top: 2px; text-align: left; }
  .td-tasks .c-task { grid-area: task; min-width: 0; }
  .td-tasks .c-prop { grid-area: prop; font-size: 13px; }
  .td-tasks .c-due { grid-area: due; font-size: 12px; text-align: right; }
  .td-tasks .c-act { grid-area: act; width: auto; padding: 0; }
  .td-tasks .c-rep, .td-tasks .c-who { display: none; }
  .ld-fold { margin: 0 10px 10px; }
  .ld-fold > summary .sub { display: none; }
  .act { margin: 0 10px 10px; padding: 12px; }
}
/* ==== end panels and To-do ==== */

/* ==== Lead page (rebuild run 2, views/lead.ts), to mockups\blend\lead.html ==== */
/* the top bar's breadcrumb with a back arrow (M1-003); on phones it shows the title with the stage under it */
.tb-crumb { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; color: var(--faint); white-space: nowrap; }
.tb-back { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--ink); flex: none; }
.tb-back:hover { background: var(--line); text-decoration: none; }
.tb-back .ic { width: 16px; height: 16px; }
.cr-path { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.cr-path a { color: var(--accent-text); font-weight: 600; }
.cr-path a:last-child { color: var(--faint); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.cr-path .sl { color: var(--line-3); }
.cr-phone { display: none; }
/* top-bar search results: leads, then buyers (M1-004) */
.lr-head { padding: 6px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); background: var(--soft-2); border-top: 1px solid var(--line); }
.lr-head:first-child { border-top: 0; }
.lr-head + a { border-top: 0; }
.pop-sep { height: 1px; background: var(--line); margin: 2px 0; }
@media (max-width: 640px) {
  .topbar.has-crumb .tb-mark { display: none; }
  .topbar.has-crumb .tb-crumb { flex: 1; }
  .cr-path { display: none; }
  .cr-phone { display: grid; min-width: 0; padding-left: 2px; }
  .cr-phone b { font-size: 17px; font-weight: 600; line-height: 21px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
  .cr-phone small { font-size: 12px; line-height: 15px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
  .tb-back { width: 32px; height: 32px; margin-left: -6px; }
  .tb-back .ic { width: 20px; height: 20px; }
}

.lead [id] { scroll-margin-top: 64px; }
/* record header */
.rec { margin-bottom: 14px; }
.rec-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.rec-ic { width: 44px; height: 44px; border-radius: var(--r-s); background: var(--purple-soft); color: var(--purple); display: grid; place-items: center; flex: none; }
.rec-ic .ic { width: 22px; height: 22px; }
.rec-t { min-width: 0; }
.rec-kind { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--faint); line-height: 16px; }
.rec-t h1 { font-size: 20px; line-height: 26px; overflow-wrap: anywhere; }
.rec-t .addr { font-size: 13px; color: var(--faint); }
.rec-t .addr a { font-weight: 600; margin-left: 8px; }
.rec-acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.rec-acts .btn { min-height: 32px; padding: 0 12px; font-size: 13px; }
.rec-acts > .btn:not(.ghost) { min-height: 34px; padding: 0 16px 0 12px; }
.btn.off, .btn.off:hover { color: var(--red); background: var(--red-soft); border-color: transparent; cursor: default; }
.m-acts { display: none; }
.act-menu > summary.btn { list-style: none; }
.act-menu > summary::-webkit-details-marker { display: none; }
.act-menu .pop-sheet { min-width: 16rem; max-height: min(70vh, 620px); overflow-y: auto; }
.act-menu .pop-sheet > a { display: flex; align-items: center; gap: 10px; padding: .5rem .9rem; font-size: 13.5px; }
.act-menu .pop-sheet > a .ic { width: 16px; height: 16px; color: var(--icon); }
/* the key-facts band (JobTread's idea), full width across the record */
.hl { display: flex; background: var(--band); border-top: 1px solid var(--band-border); border-bottom: 1px solid var(--band-border); color: var(--band-v); }
.hl .f { flex: 1; padding: 11px 18px 12px; border-left: 1px solid var(--band-line); min-width: 0; }
.hl .f:first-child { border-left: 0; flex: 1.3; }
.hl .f:nth-child(3) { flex: 1.25; }
.hl .k { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--band-k); }
.hl .v { font-size: 15px; line-height: 20px; font-weight: 700; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl .v small { font-size: 12px; font-weight: 500; color: var(--band-k); margin-left: 6px; }
.hl .v.st { color: var(--band-orange); white-space: normal; }
.hl .v.unset { color: var(--band-k); font-weight: 500; }
.hl .v.low { color: var(--band-red); }
/* the stage path (Salesforce Lightning's idea): arrows overlap, the current stage is filled orange */
.pathrow { display: flex; align-items: center; gap: 14px; padding: 12px 18px 4px; margin: 0; }
.pathscroll { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pathscroll::-webkit-scrollbar { display: none; }
.path { display: flex; position: relative; min-width: 100%; width: max-content; border-radius: var(--pill); overflow: hidden; }
.path > * { flex: 1 0 auto; height: 34px; display: flex; align-items: center; justify-content: center; gap: 5px; font: inherit; font-size: 13px; font-weight: 600; color: var(--path-ink); background: var(--path-todo); border: 0; white-space: nowrap; padding: 0 16px 0 22px; margin-left: -8px; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); }
.path > :first-child { margin-left: 0; padding-left: 16px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.path > :last-child { padding-right: 16px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%); }
.path > :only-child { clip-path: none; }
.path > button:hover { background: var(--path-hover); color: var(--path-ink); }
.path > .done { background: var(--accent-soft); color: var(--accent-text); }
.path .ic { width: 14px; height: 14px; stroke-width: 2; }
.path > .cur { background: var(--stage-fill); color: var(--on-stage); cursor: default; }
.pathrow > .btn { flex: none; }
.path-end { flex: none; height: 28px; padding: 0 12px; font-size: 13px; }
.path-more { padding: 0 18px 12px; }
.path-more details.edit > summary { font-size: 12.5px; }
.path-more .stage-form { max-width: 560px; margin-top: 4px; }
/* tabs and the two columns */
.rtabs { margin: 0 0 14px; }
.cols { display: flex; gap: 14px; align-items: flex-start; }
.col-main { flex: 1; min-width: 0; }
.col-side { width: 344px; flex: none; min-width: 0; }
.lead-pane > .panel + .panel, .lead-pane + .lead-pane { margin-top: 14px; }
.lead-panes.js .lead-pane { display: none; }
.lead-panes.js .lead-pane.on { display: block; }
.lead-panes.js .lead-pane + .lead-pane { margin-top: 0; }
.pane-foot { margin: 10px 0 0; }
.panel.pinned { background: var(--note); }
/* history: filters, the composer, the timeline */
.act-filter { display: flex; align-items: center; gap: 4px; padding: 0 18px 12px; flex-wrap: wrap; margin: 0; }
.act-filter .chip { border: 0; background: none; border-radius: var(--pill); height: 28px; padding: 0 11px; display: inline-flex; align-items: center; gap: 5px; }
.act-filter .chip:hover { background: var(--soft); }
.act-filter .chip.on { background: var(--accent-soft); color: var(--accent-text); }
.act-filter .chip .n { font-size: 13px; }
.composer { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--soft-2); padding: 10px 18px 12px; }
.cmp-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.cmp-tab { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.cmp-tab .ic { width: 15px; height: 15px; color: var(--icon); }
#cmp-note:checked ~ .cmp-tabs [for="cmp-note"], #cmp-call:checked ~ .cmp-tabs [for="cmp-call"], #cmp-text:checked ~ .cmp-tabs [for="cmp-text"] { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-text); }
#cmp-note:checked ~ .cmp-tabs [for="cmp-note"] .ic, #cmp-call:checked ~ .cmp-tabs [for="cmp-call"] .ic, #cmp-text:checked ~ .cmp-tabs [for="cmp-text"] .ic { color: inherit; }
.cmp-r:focus-visible + .cmp-r, .cmp-r:focus-visible ~ .cmp-tabs { outline: 2px solid var(--accent-soft); outline-offset: 2px; border-radius: var(--r-s); }
.cmp-pane { display: none; margin: 0; }
#cmp-note:checked ~ .cmp-note { display: grid; gap: 8px; }
#cmp-call:checked ~ .cmp-call { display: grid; gap: 8px 10px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); align-items: end; }
#cmp-text:checked ~ .cmp-text { display: block; }
.cmp-call .wide { grid-column: 1 / -1; }
.cmp-foot { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.cmp-foot .btn { flex: none; }
.composer textarea { min-height: 40px; }
.cmp-text p { margin: 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--panel); border: 1px dashed var(--line-3); color: var(--muted); font-size: 13px; }
.cmp-text b { color: var(--ink); }
.tl { list-style: none; margin: 0; padding: 6px 18px; }
.tl > li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; position: relative; padding: 10px 0 12px; }
.tl > li::before { content: ""; position: absolute; left: 14.5px; top: 44px; bottom: -8px; width: 1px; background: var(--line); }
.tl > li:last-child::before { display: none; }
.tl .node { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--chip); color: var(--icon); }
.tl .node .ic { width: 15px; height: 15px; }
.tl .node.note { background: var(--hot-soft); color: var(--hot); }
.tl .node.out { background: var(--accent-soft); color: var(--accent-text); }
.tl .node.in { background: var(--note-line); color: var(--hot); }
.tl .node.money { background: var(--green-soft); color: var(--green); }
.tl .hd { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; font-size: 13px; line-height: 20px; min-height: 30px; min-width: 0; }
.tl .hd > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.tl .hd b { font-weight: 600; }
.tl .hd .who-t { color: var(--muted); }
.tl .hd .logged { color: var(--faint); }
.tl .hd .t { margin-left: auto; font-size: 12px; color: var(--faint); white-space: nowrap; }
.tl .bd { grid-column: 2; font-size: 13px; line-height: 19px; margin-top: 4px; min-width: 0; display: grid; gap: 6px; }
.tl .bubble { border-radius: var(--r-s); padding: 9px 12px; border: 1px solid var(--accent-soft); background: var(--accent-faint); white-space: pre-wrap; overflow-wrap: anywhere; }
.tl .bubble.in { border-color: var(--note-line); background: var(--note); }
.notebox { background: var(--soft-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 12px; overflow-wrap: anywhere; }
.tl audio { width: 100%; max-width: 460px; height: 36px; }
.tl .thumbs { margin-top: 0; }
.offer-line { font-weight: 600; }
.tl-empty { margin: 0; padding: 14px 18px; color: var(--muted); }
/* side panels: label and value rows, the contact, tasks, team, documents, offers */
.kv { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; font-size: 13px; border-top: 1px solid var(--line); }
.kv:first-child, .sub-h + .kv { border-top: 0; }
.kv .k { color: var(--muted); width: 122px; flex: none; }
.kv .v { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.kv .v.unset { color: var(--faint); font-weight: 500; }
.sub-h { font-size: 12px; font-weight: 700; color: var(--ink); margin: 14px 0 2px; text-transform: uppercase; letter-spacing: .4px; }
.sub-h .n { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 4px; }
.dl-part:first-child > .sub-h:first-child, .panel-b > .sub-h:first-child { margin-top: 4px; }
.st-text { color: var(--stage); }
.panel details.edit { margin-top: 8px; }
.contact-b + .contact-b { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.contact { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.contact b { display: block; font-weight: 600; font-size: 15px; }
.contact small { display: block; color: var(--faint); font-size: 12px; }
.av.lg { width: 40px; height: 40px; font-size: 13px; background: var(--blue-soft); color: var(--blue); }
.crow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.crow > .ic { width: 16px; height: 16px; color: var(--icon); }
.crow .v { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.crow .v a { color: var(--ink); }
.crow .v a.dnc { color: var(--red); }
.crow .v small { display: block; color: var(--faint); font-size: 12px; line-height: 16px; font-weight: 500; }
.crow .call-btn { margin: 4px 0 0; display: flex; }
.crow .call-btn[hidden] { display: none; }
.icon-btn.soft { width: 30px; height: 30px; color: var(--accent-text); background: var(--accent-soft); }
.icon-btn.soft .ic { width: 15px; height: 15px; }
.icon-btn.soft:hover { background: var(--accent-faint); text-decoration: none; }
.crow details.edit { margin: 0; }
.crow details.edit > summary { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--icon); }
.crow details.edit > summary:hover { background: var(--line); }
.crow details.edit[open] { flex-basis: 100%; }
.crow form.inline { margin: 0; }
.task-list { list-style: none; margin: 0; padding: 0; }
.task1 { padding: 10px 0; border-top: 1px solid var(--line); }
.task1:first-child { border-top: 0; padding-top: 0; }
.task1 .t-title { font-weight: 600; }
.task1 .due { font-size: 12px; color: var(--muted); }
.task1.late .due { color: var(--red); }
.task1 .ppl { margin-top: 6px; font-size: 12px; color: var(--muted); }
.task-acts { display: flex; gap: 6px; margin: 10px 0 0; flex-wrap: wrap; }
.task-acts .btn { min-height: 28px; padding: 0 10px; font-size: 12px; }
.task-acts .btn .ic { width: 14px; height: 14px; }
.person { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; font-weight: 600; border-top: 1px solid var(--line); }
.person:first-child { border-top: 0; }
.person .role { margin-left: auto; color: var(--faint); font-size: 12px; font-weight: 500; text-align: right; }
.doc { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; border-top: 1px solid var(--line); }
.doc:first-child { border-top: 0; }
.doc .muted { margin-left: auto; }
.doc-mark { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--line-3); display: inline-grid; place-items: center; flex: none; background: var(--field); }
.s-received .doc-mark { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-ink); }
.s-not_needed .doc-mark { border-style: dashed; }
.doc-mark .ic { width: 12px; height: 12px; stroke-width: 2.4; }
.tbl.offers th, .tbl.offers td { padding: 9px 8px; vertical-align: middle; }
.tbl.offers th:first-child, .tbl.offers td:first-child { padding-left: 18px; }
.tbl.offers thead th { border-top: 1px solid var(--line); }
.tbl.offers tr:last-child td { border-bottom: 0; }
p.panel-b { margin: 0; }
/* the boxes from other views, inside the blend's panels: deal, buyers (dispo), e-sign, files */
.panel .dl-part { border-top: 0; padding-top: 0; margin-top: 0; }
.panel .dl-part + .dl-part { margin-top: 6px; }
.panel .dl-docs li, .panel .dl-contacts li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.panel .dl-docs li:first-child, .panel .dl-contacts li:first-child { border-top: 0; }
.panel .dl-docs { gap: 0; }
.panel .dl-docs details.edit > summary { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--icon); }
.panel .dl-docs details.edit { margin: 0; }
.panel .dl-c { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.panel .dl-outcome { margin: 0 0 10px; }
.panel .dl-close { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.dl-notes { margin-top: 12px; }
.panel .fold { box-shadow: none; border: 1px solid var(--line); border-radius: var(--r-s); }
.panel .tiles { margin: 0 0 12px; }
.panel .latest { margin-bottom: 12px; }
.panel .es-docs { margin: 0; }
.panel .folder:first-child { border-top: 0; padding-top: 0; }
.panel .facts { margin-top: 2px; }
.panel .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-sum > summary { list-style: none; cursor: pointer; }
.ai-sum > summary::-webkit-details-marker { display: none; }
.ai-sum > summary h2 { margin: 0; }
.ai-sum .panel-b h3:first-child { margin-top: 0; }
@media (max-width: 1000px) {
  .cols { flex-direction: column; align-items: stretch; gap: 10px; }
  .col-side { width: auto; }
}
@media (max-width: 640px) {
  .rec { margin-bottom: 10px; }
  .rec-head { flex-wrap: wrap; gap: 12px; padding: 14px; }
  .rec-ic { width: 40px; height: 40px; }
  .rec-t { flex: 1; }
  .rec-t h1 { font-size: 19px; line-height: 24px; }
  .rec-acts { display: none; }
  .m-acts { display: flex; gap: 8px; width: 100%; align-items: center; }
  .m-acts > .btn { flex: 1; min-height: 40px; font-size: 15px; }
  .m-acts > .icon-btn, .m-acts .act-menu > summary { width: 40px; height: 40px; background: var(--accent-soft); color: var(--accent-text); }
  .m-acts .act-menu .pop-sheet { max-height: 60vh; }
  .hl { flex-wrap: wrap; }
  .hl .f { flex: 0 0 50% !important; border-left: 0; border-top: 1px solid var(--band-line); padding: 9px 14px 10px; }
  .hl .f:nth-child(-n+2) { border-top: 0; }
  .hl .f:nth-child(even) { border-left: 1px solid var(--band-line); }
  .hl .v { font-size: 14px; }
  .pathrow { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px 4px; }
  .pathrow > .btn { min-height: 38px; }
  .path-end { align-self: flex-start; }
  .path-more { padding: 0 14px 12px; }
  .rtabs { display: flex; margin: 0 0 10px; }
  .act-filter { padding: 0 14px 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .composer { padding: 10px 14px 12px; }
  .cmp-tab { flex: 1; justify-content: center; height: 34px; }
  .cmp-foot { flex-direction: column; align-items: stretch; }
  .tl { padding: 4px 14px; }
  .tl .hd .t { margin-left: 0; width: 100%; order: 3; }
  .kv .k { width: 112px; }
  .tbl.offers th:first-child, .tbl.offers td:first-child { padding-left: 14px; }
}
.crow .call-btn { min-height: 26px; padding: 0 10px; font-size: 12px; white-space: nowrap; }
/* The phone widget never covers content (run 2). While the phone is off: on computers the sidebar's Phone
   row stands in for the floating button (it still opens the widget); on phones the button sits at the
   foot of the page, above the tab bar. While the phone is on it floats, and the page gets room under it. */
@media (min-width: 641px) {
  .phone-widget[data-state="off"]:not(:has(.pw-panel)) { display: none; }
  body:has(.phone-widget:not([hidden]):not([data-state="off"])) .foot { padding-bottom: 72px; }
}
@media (max-width: 640px) {
  .phone-widget[data-state="off"] { position: static; width: auto; margin: 0 10px 24px; justify-items: center; }
  body:has(.phone-widget:not([hidden]):not([data-state="off"])) { padding-bottom: 132px; }
}
/* ==== end lead page ==== */