/* =========================================================================
   GFI Heroes — Pipelines (2026-10-14)
   The Pipelines tab (js/pipeline-board.js) and the lead record
   (js/pipeline-cards.js + js/lead-crm.js), ported from the Pledge tracker and
   drawn in the tracker's own colours: navy, blue and gold on the cool greys the rest
   of the app uses.

   One rule runs through the whole file: every dark surface — a column header,
   an avatar, a selected option, a primary button — carries bold white text.
   Nothing on a dark fill is ever grey, blue or gold text.
   ========================================================================= */

:root{
  --pl-navy:#00205A; --pl-navy2:#103B7E; --pl-navy3:#163B78;
  --pl-blue:#2E6FD6; --pl-blue-ink:#1B4E9E;
  --pl-tint:#EEF4FD; --pl-tint2:#E3EDFB; --pl-tint-line:#C6D8F3;
  --pl-ink:#16233E; --pl-ink2:#2B3D5E; --pl-mute:#586A86; --pl-mute2:#6A7C99;
  --pl-line:#DCE3EE; --pl-line2:#C4CEDD; --pl-field:#F6F8FC;
  --pl-gold-a:#F4D489; --pl-gold-b:#E4B45A; --pl-gold-edge:#C9932F; --pl-gold-ink:#0A1A3A;
  --pl-dark-grad:linear-gradient(180deg,#163B78,#00205A);
}

/* ---------------------------------------------------------------- header */
.content:has(.pb-shell),.content:has(.pb-head){max-width:none}
.pb-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.pb-exit{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 16px 0 6px;border-radius:30px;
  border:1px solid var(--pl-line2);background:#FFFFFF;color:var(--pl-ink);font:inherit;font-size:13px;font-weight:800;
  cursor:pointer;box-shadow:0 2px 8px rgba(0,32,90,.08);flex:none;transition:border-color .14s,box-shadow .14s}
.pb-exit svg{width:26px;height:26px;padding:6px;border-radius:50%;background:var(--pl-dark-grad);color:#FFFFFF;box-sizing:border-box;flex:none}
.pb-exit:hover{border-color:var(--pl-blue);box-shadow:0 8px 18px -8px rgba(0,32,90,.45)}
.pb-exit:focus-visible{outline:2px solid var(--pl-blue);outline-offset:2px}

.pb-pick{display:flex;align-items:center;gap:10px;position:relative;margin:0}
.pb-pick-l{font-family:var(--sans);font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--pl-ink);line-height:1;white-space:nowrap}
.pb-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;min-width:0!important;border:0!important;padding:0!important}
.pb-dd{position:relative}
.pb-dd-btn{display:inline-flex;align-items:center;gap:10px;height:38px;min-width:210px;padding:0 12px 0 14px;border-radius:10px;
  border:1px solid var(--pl-line2);background:#FFFFFF;color:var(--pl-ink);font:inherit;font-size:14px;cursor:pointer;box-shadow:0 1px 2px rgba(0,32,90,.06)}
.pb-dd-btn b{font-weight:800;white-space:nowrap}
.pb-dd-btn em{font-style:normal;font-weight:800;font-size:12px;min-width:24px;height:22px;padding:0 7px;border-radius:99px;display:inline-grid;place-items:center;background:var(--pl-tint2);color:var(--pl-navy2)}
.pb-dd-btn svg{width:16px;height:16px;margin-left:auto;flex:none;transition:transform .15s}
.pb-dd-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.pb-dd-btn:hover{border-color:var(--pl-blue)}
.pb-dd-btn:focus-visible{outline:2px solid var(--pl-blue);outline-offset:2px}
.pb-dd-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:100%;width:max-content;max-width:320px;padding:6px;border-radius:12px;
  background:#FFFFFF;border:1px solid var(--pl-line2);box-shadow:0 24px 50px -18px rgba(7,18,46,.45)}
.pb-dd-menu[hidden]{display:none}
.pb-dd-opt{display:flex;align-items:center;gap:18px;width:100%;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:var(--pl-ink);font:inherit;font-size:14px;font-weight:700;text-align:left;cursor:pointer}
.pb-dd-opt span{flex:1;white-space:nowrap}
.pb-dd-opt em{font-style:normal;font-size:12px;font-weight:800;color:var(--pl-mute)}
.pb-dd-opt:hover,.pb-dd-opt:focus-visible{background:var(--pl-tint);outline:none}
.pb-dd-opt.on em{color:#FFFFFF}

.pb-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.pb-tools .btn-row{width:auto;height:38px;padding:0 14px;font-size:13px;font-weight:800;border-radius:10px;background:#FFFFFF;
  border:1px solid var(--pl-line2);color:var(--pl-ink);box-shadow:0 2px 6px rgba(0,32,90,.08);gap:8px;filter:none}
.pb-tools .btn-row svg{width:15px;height:15px;flex:none}
.pb-tools .btn-row:hover{border-color:var(--pl-blue);color:var(--pl-navy2);background:#FFFFFF}
/* the one primary action on the page: navy, bold white */
.pb-tools .pb-add{background:var(--pl-dark-grad);color:#FFFFFF;border-color:var(--pl-navy);box-shadow:0 8px 18px -10px rgba(0,32,90,.8),inset 0 1px 0 rgba(255,255,255,.14)}
.pb-tools .pb-add:hover{background:var(--pl-dark-grad);color:#FFFFFF;border-color:var(--pl-navy);filter:brightness(1.12)}
.pb-tools .btn-row:focus-visible{outline:2px solid var(--pl-blue);outline-offset:2px}

.pb-notice{font-size:12.5px;color:var(--pl-ink);background:var(--pl-tint);border:1px solid var(--pl-tint-line);border-left:3px solid var(--pl-gold-b);border-radius:var(--r3);padding:9px 12px;margin:0 0 10px;line-height:1.5}
.pb-notice code{font-family:var(--mono);font-size:11px;background:rgba(0,32,90,.07);padding:1px 6px;border-radius:5px}

/* ---------------------------------------------------------------- board */
.pb-shell{position:relative;min-width:0}
.pb-board{display:flex;gap:8px;align-items:flex-start;overflow-x:auto;overflow-y:hidden;padding:0 0 10px;margin:0;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.pb-board::-webkit-scrollbar{display:none}
.pb-board.dragging{cursor:grabbing;scroll-behavior:auto;user-select:none}
.pb-col{flex:0 0 250px;width:250px;display:flex;flex-direction:column;min-height:160px;max-height:calc(100vh - 230px);
  background:linear-gradient(180deg,#F1F5FB,#EAF0F8);border:1px solid #D3DDEB;border-radius:14px;box-shadow:0 6px 18px -14px rgba(0,32,90,.35)}
/* column header: a dark band, so bold white text */
.pb-col-h{display:flex;align-items:center;gap:8px;padding:0 10px;min-height:42px;position:sticky;top:0;z-index:1;
  background:var(--pl-dark-grad);color:#FFFFFF;border-radius:13px 13px 0 0}
.pb-col-ic{width:16px;height:16px;flex:none;color:#FFFFFF;display:grid;place-items:center}
.pb-col-ic svg{width:15px;height:15px}
.pb-col-h .t{flex:1 1 auto;min-width:0;color:#FFFFFF;font-weight:800;font-size:11px;letter-spacing:.5px;text-transform:uppercase;line-height:1.15;overflow-wrap:anywhere;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.pb-col-h .n{flex:none;min-width:24px;height:21px;display:inline-grid;place-items:center;padding:0 7px;border-radius:20px;background:#FFFFFF;color:var(--pl-navy);font-weight:800;font-size:11px;font-family:var(--sans)}
/* attention stages (no answer, turn down, DND, pending …): a gold band — light
   enough that the text on it is dark navy, never white */
.pb-col.gold .pb-col-h{background:linear-gradient(180deg,var(--pl-gold-a),var(--pl-gold-b));color:var(--pl-gold-ink)}
.pb-col.gold .pb-col-h .t,.pb-col.gold .pb-col-ic{color:var(--pl-gold-ink);text-shadow:none}
.pb-col.gold .pb-col-h .n{background:var(--pl-navy);color:#FFFFFF}
.pb-col-b{padding:8px;display:flex;flex-direction:column;gap:7px;overflow-y:auto;flex:1 1 auto;min-height:80px;transition:background .15s;
  scrollbar-width:thin;scrollbar-color:transparent transparent;overscroll-behavior:contain}
/* the column's scrollbar stays out of sight until the pointer is on that column */
.pb-col:hover .pb-col-b{scrollbar-color:#B9C5D8 transparent}
.pb-col-b.over{background:rgba(46,111,214,.1)}
.pb-col-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 10px;border:1.5px dashed #BCCAE0;border-radius:12px;background:rgba(255,255,255,.6);color:var(--pl-mute);text-align:center;font-size:11px}
.pb-col.gold .pb-col-empty{border-color:#EAD8A6;background:#FFFDF7}
.pb-empty-ic{width:22px;height:22px;color:#7F93B8;display:grid;place-items:center}
.pb-col.gold .pb-empty-ic{color:var(--pl-gold-edge)}
.pb-empty-ic svg{width:20px;height:20px}
.pb-col-empty b{font-size:12.5px;font-weight:800;color:var(--pl-ink)}
.pb-col-empty small{font-size:11px;line-height:1.4;color:var(--pl-mute);font-weight:500;max-width:22ch;text-wrap:pretty}
.pb-col-first{align-items:flex-start;text-align:left;font-weight:600;font-size:12px;line-height:1.45;padding:12px 10px;border-style:solid;color:var(--pl-mute)}

/* cards */
.pb-card{background:#FFFFFF;border:1px solid #D7DFEC;border-radius:10px;padding:8px 9px;cursor:pointer;outline:none;
  box-shadow:0 1px 2px rgba(0,32,90,.05),0 8px 20px -14px rgba(0,32,90,.3);transition:box-shadow .18s,border-color .14s}
.pb-card:hover,.pb-card:focus-visible{border-color:var(--pl-blue);box-shadow:0 12px 26px -12px rgba(0,32,90,.4),0 0 0 3px rgba(46,111,214,.16)}
.pb-card-top{display:flex;align-items:flex-start;gap:8px}
.pb-av{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--pl-dark-grad);color:#FFFFFF;font-weight:800;font-size:11.5px;letter-spacing:.3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 10px -6px rgba(0,32,90,.8)}
.pb-card-tx{flex:1 1 auto;min-width:0}
.pb-name-row{display:flex;align-items:flex-start;gap:6px}
.pb-name{flex:1 1 auto;min-width:0;font-family:var(--sans);font-size:13.5px;font-weight:800;color:var(--pl-ink);letter-spacing:-.01em;line-height:1.2;word-break:break-word}
.pb-lines{display:flex;flex-wrap:wrap;gap:2px 9px;margin-top:3px}
.pb-ln{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--pl-ink2);min-width:0}
.pb-ln svg{width:11px;height:11px;flex:none;color:var(--pl-mute2)}
.pb-ln span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
.pb-pills{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:6px}
.pb-card .rec-pill,.pb-card .lc-rate,.pb-card .rec-dchip,.pb-card .pol-status{font-family:var(--sans);font-size:9.5px;font-weight:800;letter-spacing:.4px;padding:3px 7px;border-radius:6px;border:0;line-height:1.2}
.pb-card .rec-pill{background:#E6EBF3;color:#3A4D6E}
.pb-card .rec-pill.on{background:#D7F1E2;color:#127A40}
.pb-card .lc-rate.lc-hot{background:#FBDAD4;color:#A3290D}
.pb-card .lc-rate.lc-warm{background:#F8E5B4;color:#6B4A00}
.pb-card .lc-rate.lc-cold{background:#D9E7F8;color:#1D4F9A}
.pb-card .rec-dchip{text-transform:none;letter-spacing:0;font-weight:700;background:#E3EDFB;color:#1B4E9E}
.pb-card .rec-dchip.d-training{background:#D7F1E2;color:#127A40}
.pb-card .rec-dchip.d-partner{background:#E6E0FA;color:#4A3E8C}
.pb-card .rec-dchip.d-client{background:#DCEAF5;color:#215A79}
.pb-card .rec-dchip.d-top100{background:#F8E5B4;color:#6B4A00}
.pb-card .rec-appt{font-size:11.5px;font-weight:800;color:var(--pl-ink);margin:0}
.pb-card .pol-status.ok{background:#D7F1E2;color:#127A40}
.pb-card .pol-status.pend{background:#E3EDFB;color:#1B4E9E}
.pb-card .pol-status.mid{background:#F8E5B4;color:#6B4A00}
.pb-card .pol-status.bad{background:#FBDAD4;color:#A3290D}
.pb-card .pol-status.muted{background:#E6EBF3;color:#3A4D6E}
.pb-money{font-family:var(--sans);font-weight:800;font-size:13px;color:var(--pl-ink)}
/* the follow-up badge sits in the card's pill row; on a card it reads small */
.pb-card .crm-due{font-size:9.5px;padding:2px 7px;border-radius:6px}
.pb-card .crm-due svg{width:10px;height:10px}

.pb-ghost{opacity:.35}
.pb-chosen{border-color:var(--pl-blue);box-shadow:0 10px 24px -12px rgba(0,32,90,.5)}
.pb-drag{transform:rotate(1.5deg)}
body.pb-dragging{cursor:grabbing}

/* the left / right glide at the board's edges */
.pb-shell::before,.pb-shell::after{content:"";position:absolute;top:0;bottom:10px;width:44px;z-index:2;pointer-events:none;opacity:0;transition:opacity .22s;border-radius:var(--r2)}
.pb-shell::before{left:0;background:linear-gradient(90deg,rgba(238,241,246,.97) 15%,rgba(238,241,246,0))}
.pb-shell::after{right:0;background:linear-gradient(270deg,rgba(238,241,246,.97) 15%,rgba(238,241,246,0))}
.pb-shell.can-l::before,.pb-shell.can-r::after{opacity:1}
.pb-nav{position:absolute;top:50%;transform:translateY(-50%) scale(.85);z-index:3;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--pl-line2);background:#FFFFFF;color:var(--pl-navy);font-size:20px;font-weight:800;line-height:1;padding-bottom:3px;cursor:pointer;
  box-shadow:0 8px 20px -6px rgba(0,32,90,.45);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s,border-color .15s;touch-action:none;user-select:none}
.pb-nav.show{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1)}
.pb-nav:hover{border-color:var(--pl-blue)}
.pb-nav:active{transform:translateY(-50%) scale(.92)}
.pb-nav-l{left:-6px}.pb-nav-r{right:-6px}
body.pb-dragging .pb-nav{pointer-events:none}

/* Desktop: the board runs to the right edge of the window and, once it holds
   anything, to the bottom — every column the same height (pipeline-board.js
   sets --pb-h from the space left under the header). The header keeps the
   page's own right margin; only the board bleeds. */
@media (min-width:761px){
  #dashboard-tab-content.content:has(.pb-shell){padding-right:0;padding-bottom:0}
  #dashboard-tab-content.content:has(.pb-shell) > :not(.pb-shell){margin-right:26px}
  .pb-board::after{content:"";flex:0 0 18px}
  .pb-nav-r{right:12px}
  .pb-shell.pb-fill{height:var(--pb-h)}
  .pb-shell.pb-fill .pb-board{height:100%;align-items:stretch;padding-bottom:0}
  .pb-shell.pb-fill .pb-col{max-height:none;height:100%}
  .pb-shell.pb-fill::before,.pb-shell.pb-fill::after{bottom:0}
}

/* phone: one stage at a time, picked from a scrolling row */
.pb-mob{display:none}

/* ---------------------------------------------------------------- dialogs */
.pb-opts{display:flex;flex-direction:column;gap:6px}
.pb-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:11px 13px;border:1px solid var(--pl-line);border-radius:var(--r2);background:var(--pl-field);font-size:13.5px;font-weight:600;color:var(--pl-ink)}
.pb-opt:hover,.pb-opt:focus-visible{border-color:var(--pl-blue);background:var(--pl-tint);outline:none}
.pb-opt.on{border-color:var(--pl-blue);background:var(--pl-tint)}
.pb-opt.other{margin-top:6px;border-style:dashed;color:var(--pl-blue-ink)}
.pb-opt em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--pl-mute);background:#FFFFFF;border:1px solid var(--pl-line2);border-radius:20px;padding:2px 8px}

/* the stage manager */
.pb-smbox{max-width:640px}
.pb-fixedname{color:var(--pl-mute);font-weight:600}
.pb-smlist{display:flex;flex-direction:column;gap:6px}
.pb-smrow{display:grid;grid-template-columns:22px 22px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:7px 8px;border:1px solid var(--pl-line);border-radius:var(--r2);background:var(--pl-field)}
.pb-smrow.gone{opacity:.6;background:var(--panel3)}
.pb-smgrip{width:22px;height:28px;display:grid;place-items:center;color:var(--muted2);cursor:grab}
.pb-smgrip svg{width:16px;height:16px}
.pb-smidx{font-family:var(--mono);font-size:11px;color:var(--muted2);text-align:center}
.pb-smname{display:flex;align-items:center;gap:6px;min-width:0}
.pb-smname input{font-weight:600}
.pb-smname input.bad{border-color:var(--danger);box-shadow:0 0 0 3px rgba(217,59,54,.12)}
.pb-smtag{font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:2px 7px;border-radius:20px;white-space:nowrap}
.pb-smtag.new{background:var(--ok-dim);color:#127A40}
.pb-smtag.ren{background:var(--pl-tint2);color:var(--pl-navy2)}
.pb-smtag.gone{background:#FCE8E7;color:var(--danger)}
.pb-smcount{font-size:11.5px;color:var(--pl-mute);white-space:nowrap}
.pb-smacts{display:inline-flex;gap:4px}
.pb-smab{width:30px;height:30px;border-radius:8px;border:1px solid var(--pl-line);background:#FFFFFF;color:var(--pl-ink);font-weight:800;display:grid;place-items:center}
.pb-smab:hover:not(:disabled){border-color:var(--pl-blue)}
.pb-smab:disabled{opacity:.35;cursor:default}
.pb-smab.danger{color:var(--danger)}
.pb-smmove{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--pl-ink);padding:4px 0 2px 44px}
.pb-smmove select{width:auto;min-width:160px;padding:5px 26px 5px 8px}
.pb-smadd{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pb-smadd .btn-row{width:auto}
.pb-smerr{color:var(--danger);font-size:12.5px;font-weight:600;margin-top:10px;min-height:1em}

/* =================================================================== the record */
/* 640px: sized for a normal screen at 90% zoom. lead-crm.css widens it to 920px
   above 1040px, the one place two bodies of content sit side by side */
.modal.pc-editor{max-width:640px;padding:0;overflow:hidden;background:#FFFFFF;border:1px solid var(--pl-line);border-radius:14px;
  box-shadow:0 30px 80px -30px rgba(7,18,46,.6);max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px);display:flex;flex-direction:column}
.pc-editor .modal-h{position:relative;flex:none;padding:14px 18px 11px;margin:0;border-bottom:0;background:#FFFFFF;display:flex;align-items:center;justify-content:space-between;gap:12px}
/* a thin gold rule under the title — the tracker's accent, the same one the Overview uses */
.pc-editor .modal-h::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#C9A14E,#FFE39C 40%,#E4B45A 70%,rgba(228,180,90,.2))}
.pc-editor .mh-t{font-family:var(--sans);font-size:18px;font-weight:800;color:var(--pl-ink);letter-spacing:-.01em;line-height:1.1}
.pc-editor .mh-s{font-size:12px;color:var(--pl-mute);margin-top:2px;font-weight:600}
.pc-editor .modal-x{width:32px;height:32px;border-radius:9px;border:1px solid var(--pl-line);background:#FFFFFF;color:var(--pl-ink);font-size:14px;flex:none}
.pc-editor .modal-x:hover{border-color:var(--pl-blue);color:var(--pl-navy2)}
.pc-editor .modal-b{flex:1 1 auto;min-height:0;overflow:auto;padding:12px 18px 14px;background:#FFFFFF}
.pc-editor .field{margin-bottom:0}
.pc-editor .field label{display:block;font-family:var(--sans);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--pl-ink2);font-weight:800;margin-bottom:4px}
.pc-editor .switch-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.pc-editor .switch{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 14px 0 7px;border-radius:30px;border:1px solid #CBD5E4;background:var(--pl-field);color:var(--pl-ink);font-size:12.5px;font-weight:700}
.pc-editor .switch .kn{width:34px;height:20px;border-radius:20px;border:0;background:#C3CEDF;position:relative;flex:none;transition:background .15s}
.pc-editor .switch .kn::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .15s;transform:none}
.pc-editor .switch.on{border-color:var(--ok);background:rgba(31,168,90,.08)}
.pc-editor .switch.on .kn{background:linear-gradient(180deg,#22B565,#127A40)}
.pc-editor .switch.on .kn::after{left:16px;transform:none;background:#FFFFFF}
.pc-editor .switch:focus-visible{outline:2px solid var(--pl-blue);outline-offset:2px}
.pc-editor .modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.pc-editor .pc-ta{margin-top:10px}
.pc-in{position:relative;display:flex;align-items:center}
.pc-in > svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--pl-navy2);pointer-events:none}
.pc-in-ta > svg{top:12px;transform:none}
.pc-in::after{content:"";position:absolute;left:33px;top:9px;bottom:9px;width:1px;background:#DCE3EE;pointer-events:none}
.pc-in-ta::after{top:9px;bottom:auto;height:18px}
.pc-in input,.pc-in select,.pc-in textarea{width:100%;height:36px;padding:0 10px 0 42px;border:1px solid #CBD5E4;border-radius:8px;background:var(--pl-field);color:var(--pl-ink);font-size:13px;font-weight:600;font-family:var(--sans);transition:border-color .14s,box-shadow .14s,background .14s}
.pc-in textarea{height:auto;min-height:64px;padding:9px 10px 9px 42px;line-height:1.45;resize:vertical}
.pc-in select{appearance:none;-webkit-appearance:none;padding-right:30px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300205A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 10px center;background-size:14px}
.pc-in input:focus,.pc-in select:focus,.pc-in textarea:focus{outline:none;border-color:var(--pl-blue);background:#FFFFFF;box-shadow:0 0 0 3px rgba(46,111,214,.18)}
.pc-in input::placeholder,.pc-in textarea::placeholder{color:#8C99AE;font-weight:500}
.pc-in input:disabled,.pc-in select:disabled,.pc-in textarea:disabled{color:var(--pl-ink2);opacity:1;background:#F1F4F9}
.pc-editor .pc-family{margin-top:14px}
.pc-editor .modal-f{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 18px 12px;margin:0;background:var(--pl-field);border-top:1px solid #E4EAF3}
.pc-editor .pc-del{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:8px;border:1px solid var(--pl-line);background:#FFFFFF;color:var(--pl-mute);font-size:12.5px;font-weight:700}
.pc-editor .pc-del svg{width:14px;height:14px}
.pc-editor .pc-del:hover{border-color:var(--danger);color:var(--danger)}
/* Done: a dark button, so bold white */
.pc-editor .pc-done{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:8px;background:var(--pl-dark-grad);color:#FFFFFF;font-size:13.5px;font-weight:800;border:1px solid var(--pl-navy);
  box-shadow:0 0 0 2px #E4B45A,0 10px 20px -10px rgba(0,32,90,.8)}
.pc-editor .pc-done svg{width:15px;height:15px}
.pc-editor .pc-done:hover{filter:brightness(1.12);color:#FFFFFF}
.pc-editor .pc-done:hover *{color:#FFFFFF}

/* send a copy to another pipeline */
.pb-movebar{display:flex;flex-direction:column;gap:12px;padding:12px 14px;margin:0 0 12px;border-radius:10px;background:var(--pl-tint);border:1px solid var(--pl-tint-line)}
.pb-mv-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin:0 0 8px;font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--pl-ink2)}
.pb-mv-h small{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--pl-mute)}
.pb-mv-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;gap:8px}
.pb-mv-row select{height:38px;border-radius:8px;border:1px solid var(--pl-tint-line);color:var(--pl-ink);font:inherit;font-size:13px;font-weight:700;padding:0 32px 0 10px;min-width:0;appearance:none;-webkit-appearance:none;cursor:pointer;
  background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300205A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center/14px no-repeat}
.pb-mv-row select[hidden]{display:none}
.pb-mv-row select:focus{outline:none;border-color:var(--pl-blue);box-shadow:0 0 0 3px rgba(46,111,214,.18)}
.pb-mv-go{height:38px;padding:0 18px;border-radius:8px;border:0;background:var(--pl-navy);color:#FFFFFF;font:inherit;font-size:14px;font-weight:800;cursor:pointer}
.pb-mv-go:hover:not(:disabled){filter:brightness(1.15);color:#FFFFFF}
.pb-mv-go:disabled,.pb-mv-row select:disabled{opacity:.5;cursor:default}

/* a chip for Top 100 on the old list views too */
.rec-dchip.d-top100{background:rgba(228,180,90,.22);color:#6B4A00}

/* ===================================================================== mobile */
@media (max-width:760px){
  .pb-pick-l{font-size:22px}
  .pb-dd-btn,.pb-tools .btn-row,.pb-exit{height:42px}
  .pb-mob{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px 4px;scrollbar-width:none}
  .pb-mob::-webkit-scrollbar{display:none}
  .pb-mob-s{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:9px 13px;border-radius:20px;border:1px solid var(--pl-line2);background:#FFFFFF;color:var(--pl-ink2);white-space:nowrap}
  .pb-mob-s b{font-family:var(--mono);font-size:11px;font-weight:800;color:var(--pl-mute)}
  /* the stage you are on: navy, bold white */
  .pb-mob-s.on{background:var(--pl-dark-grad);color:#FFFFFF;border-color:var(--pl-navy);font-weight:800}
  .pb-mob-s.on b{color:#FFFFFF}
  .pb-board{display:block;overflow:visible;padding:0;margin:0 0 10px}
  .pb-col{display:none;width:100%;flex-basis:auto;max-height:none}
  .pb-col.mob-on{display:flex}
  .pb-col-h{position:static;min-height:50px}
  .pb-col-b{overflow:visible}
  .pb-card{padding:10px 11px}.pb-name{font-size:14.5px}.pb-ln{font-size:12.5px}
  .pb-ln span{max-width:none}
  .pb-shell::before,.pb-shell::after,.pb-nav{display:none}
  .pc-editor .modal-grid{grid-template-columns:1fr;gap:10px}
  /* 16px stops iOS zooming into a box on focus */
  .pc-in input,.pc-in select,.pc-in textarea,.pb-mv-row select,.pb-hdr-stage select,#pc-new-name,#pc-new-phone{font-size:16px}
  .pc-in input,.pc-in select{height:42px}
  .pb-smrow{grid-template-columns:20px minmax(0,1fr) auto}
  .pb-smidx,.pb-smcount{display:none}
  .pb-smmove{padding-left:0}
}
@media (max-width:640px){
  .pb-head{display:grid;grid-template-columns:1fr;gap:8px}
  .pb-head .pb-exit{justify-self:start}
  .pb-pick{width:100%}
  .pb-dd{flex:1;min-width:0}
  .pb-dd-btn{width:100%;min-width:0}
  .pb-dd-menu{left:auto;right:0;max-width:calc(100vw - 32px)}
  .pb-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;width:100%;margin:0}
  .pb-tools .btn-row{width:100%;justify-content:center;min-width:0;padding:0 8px}
  .pb-tools .btn-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pb-mv-row{grid-template-columns:1fr}
  .pb-mv-h small{flex-basis:100%}
  .pc-editor .modal-h > div:first-child{flex:1 1 auto;min-width:0}
}
@media (max-width:420px){
  .pb-tools{grid-template-columns:1fr 1fr}
  .pb-tools .pb-add{grid-column:1/-1}
}

/* A record with no Activity pane (an agent on a database where neither the
   timeline nor tasks are switched on yet) is just the form: no empty second
   column beside it on a wide screen. */
@media (min-width:1040px){
  .modal.crm-editor.crm-solo{max-width:640px!important}
  .crm-editor.crm-solo .modal-b{display:block}
  .crm-editor.crm-solo [data-lcpane="details"]{border-right:0;max-height:none}
  .crm-editor.crm-solo [data-lcpane]::before{display:none}
  .crm-editor.crm-solo [data-lcpane="details"]{padding:14px 18px 16px}
}

/* The pipeline dialogs (move, stage editor, new lead) speak in the same
   typeface as the board and the record rather than the display face. */
#pb-sm .mh-t,#pb-ask .mh-t,#pc-new-overlay .mh-t{font-family:var(--sans);font-weight:800;letter-spacing:-.01em;font-size:18px;line-height:1.2}
#pb-sm .mh-s,#pb-ask .mh-s,#pc-new-overlay .mh-s{font-weight:600}
#pc-new-overlay .btn-add,#pb-sm .btn-add,#pb-ask .btn-add{font-weight:800;color:#FFFFFF}

/* The tasks block sits under the timeline in the Activity pane. On a wide
   screen the record's body has no padding of its own (each pane carries its
   own), so the block needs the same inset as the timeline above it or it
   runs into the column's edge. */
.crm-editor [data-lcpane="activity"] > .tk-rec{margin:0 22px 20px}
@media (max-width:760px){ .crm-editor [data-lcpane="activity"] > .tk-rec{margin:0 16px 18px} }
#pb-sm .mh-s,#pb-ask .mh-s,#pc-new-overlay .mh-s{text-wrap:balance}
/* the list views' import button is dashed; in the board's toolbar every button is the same solid outline */
.pb-tools .pb-import{border-style:solid!important;color:var(--pl-ink)}

/* =========================================================== edit stages
   A clean list: a coloured dot that matches the stage's column (navy, or gold
   for the stages that need attention), the name as a quiet field that only
   shows its box on hover or focus, a count pill, and icon-only actions.
   Reset lives in the footer, away from Save, so it is never hit by mistake. */
.pb-dlg .modal{max-width:600px;padding:0;overflow:hidden;border-radius:16px;border:1px solid var(--pl-line);display:flex;flex-direction:column;max-height:calc(100dvh - 84px)}
.pb-dlg .pb-sm-h{align-items:center;gap:13px;padding:18px 20px 16px;border-bottom:1px solid var(--pl-line);background:#FFFFFF;flex:none;position:relative}
.pb-dlg .pb-sm-h::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,#C9A14E,#FFE39C 40%,#E4B45A 70%,rgba(228,180,90,.15))}
.pb-dlg .pb-sm-ic{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--pl-dark-grad);color:#FFFFFF;box-shadow:0 8px 16px -10px rgba(0,32,90,.9)}
.pb-dlg .pb-sm-ic svg{width:20px;height:20px}
.pb-dlg .pb-sm-tt{flex:1 1 auto;min-width:0}
.pb-dlg .mh-t{font-size:19px;font-weight:800;color:var(--pl-ink);letter-spacing:-.015em}
.pb-dlg .mh-s{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:5px;font-size:12.5px;font-weight:600;color:var(--pl-mute);text-wrap:pretty}
#pb-sm .pb-sm-pipe{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:99px;background:var(--pl-tint2);color:var(--pl-navy2);font-size:11.5px;font-weight:800}
.pb-dlg .modal-x{width:34px;height:34px;border-radius:10px;border:1px solid var(--pl-line);background:#FFFFFF;color:var(--pl-ink);font-size:14px;align-self:flex-start}
.pb-dlg .modal-x:hover{border-color:var(--pl-blue)}
#pb-sm .pb-sm-b{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 16px 6px;background:#F7F9FD;scrollbar-width:thin;scrollbar-color:#C4CEDD transparent}

#pb-sm .pb-smlist{gap:6px}
#pb-sm .pb-smrow{grid-template-columns:18px 10px minmax(0,1fr) auto auto;gap:10px;padding:6px 6px 6px 8px;border:1px solid #DCE3EE;border-radius:11px;background:#FFFFFF;box-shadow:0 1px 2px rgba(0,32,90,.05);transition:border-color .14s,box-shadow .14s}
#pb-sm .pb-smrow:hover{border-color:#C4CEDD;box-shadow:0 6px 16px -10px rgba(0,32,90,.35)}
#pb-sm .pb-smrow:focus-within{border-color:var(--pl-blue);box-shadow:0 0 0 3px rgba(46,111,214,.14)}
#pb-sm .pb-smrow.new{border-color:#9FD6B6;background:#FBFEFC}
#pb-sm .pb-smrow.gone{opacity:1;background:#FBF4F4;border-style:dashed;border-color:#E8C3C1}
#pb-sm .pb-smrow.gone .pb-smname input{text-decoration:line-through;color:var(--pl-mute)}
#pb-sm .pb-smrow.sortable-ghost{opacity:.4}
#pb-sm .pb-smgrip{width:18px;height:30px;color:#9AA9C1;cursor:grab}
#pb-sm .pb-smgrip:active{cursor:grabbing}
#pb-sm .pb-smgrip svg{width:15px;height:15px}
#pb-sm .pb-smdot{width:10px;height:10px;border-radius:50%;background:var(--pl-navy2);box-shadow:0 0 0 3px rgba(16,59,126,.14)}
#pb-sm .pb-smdot.gold{background:#E4B45A;box-shadow:0 0 0 3px rgba(228,180,90,.25)}
#pb-sm .pb-smname{gap:8px}
#pb-sm .pb-smname input{height:34px;padding:0 10px;margin:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--pl-ink);font:inherit;font-size:14px;font-weight:700;box-shadow:none;width:100%;min-width:0;transition:border-color .14s,background .14s}
#pb-sm .pb-smrow:hover .pb-smname input:not(:disabled){background:#F6F8FC;border-color:#E1E7F0}
#pb-sm .pb-smname input:focus{outline:none;background:#FFFFFF!important;border-color:var(--pl-blue)!important}
#pb-sm .pb-smname input.bad{border-color:var(--danger)!important;background:#FFF7F7}
#pb-sm .pb-smname input::placeholder{color:#97A5BC;font-weight:600}
#pb-sm .pb-smtag{flex:none;font-size:9.5px;padding:3px 7px;border-radius:6px}
#pb-sm .pb-smcount{font-size:11.5px;font-weight:800;color:var(--pl-navy2);background:var(--pl-tint);border:1px solid var(--pl-tint-line);padding:3px 9px;border-radius:99px}
#pb-sm .pb-smcount:empty{visibility:hidden;padding:0;border:0}
#pb-sm .pb-smacts{gap:2px}
#pb-sm .pb-smab{width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:#5B6D8C;cursor:pointer;transition:background .12s,color .12s}
#pb-sm .pb-smab svg{width:16px;height:16px}
#pb-sm .pb-smab:hover:not(:disabled){background:var(--pl-tint);color:var(--pl-navy)}
#pb-sm .pb-smab.danger{color:#B6403B}
#pb-sm .pb-smab.danger:hover:not(:disabled){background:#FCE8E7;color:#9E2A25}
#pb-sm .pb-smab.undo{color:var(--pl-blue)}
#pb-sm .pb-smab:disabled{opacity:.28;cursor:default}
#pb-sm .pb-smab:focus-visible{outline:2px solid var(--pl-blue);outline-offset:1px}
#pb-sm .pb-smmove{padding:6px 2px 2px 38px;font-size:12.5px;font-weight:600;color:var(--pl-ink2)}
#pb-sm .pb-smmove select{height:32px;border-radius:8px;font-weight:700}

#pb-sm .pb-smadd{margin:8px 0 0}
#pb-sm .pb-sm-addbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;border-radius:11px;border:1.5px dashed #AFC1DD;background:rgba(255,255,255,.7);color:var(--pl-navy2);font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;transition:border-color .14s,background .14s}
#pb-sm .pb-sm-addbtn span{font-size:18px;line-height:1;font-weight:700}
#pb-sm .pb-sm-addbtn:hover{border-color:var(--pl-blue);background:#FFFFFF;color:var(--pl-navy)}
#pb-sm .pb-sm-addbtn:focus-visible{outline:2px solid var(--pl-blue);outline-offset:2px}
#pb-sm .pb-smerr{margin:8px 2px 4px;min-height:0}
#pb-sm .pb-smerr:empty{display:none}

.pb-dlg .pb-sm-f{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--pl-line);background:#FFFFFF;flex:none}
.pb-dlg .pb-sm-fsp{flex:1 1 auto}
#pb-sm .pb-sm-reset{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--pl-mute);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
#pb-sm .pb-sm-reset svg{width:15px;height:15px}
#pb-sm .pb-sm-reset:hover{background:var(--pl-tint);color:var(--pl-navy2)}
.pb-dlg .pb-sm-cancel{height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--pl-line2);background:#FFFFFF;color:var(--pl-ink);font:inherit;font-size:13.5px;font-weight:800;cursor:pointer}
.pb-dlg .pb-sm-cancel:hover{border-color:var(--pl-blue)}
.pb-dlg .pb-sm-save{height:40px;padding:0 20px;border-radius:10px;border:1px solid var(--pl-navy);background:var(--pl-dark-grad);color:#FFFFFF;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;box-shadow:0 10px 20px -12px rgba(0,32,90,.9),inset 0 1px 0 rgba(255,255,255,.14)}
.pb-dlg .pb-sm-save:hover{filter:brightness(1.12)}
.pb-dlg .pb-sm-save:disabled{opacity:.6;cursor:default;filter:none}
.pb-dlg .pb-sm-cancel:focus-visible,#pb-sm .pb-sm-save:focus-visible,#pb-sm .pb-sm-reset:focus-visible{outline:2px solid var(--pl-blue);outline-offset:2px}

@media (max-width:760px){
  .pb-dlg.modal-overlay{padding:0;align-items:flex-end}
  .pb-dlg .modal{max-width:none;border-radius:18px 18px 0 0;max-height:92dvh;margin:auto 0 0}
  #pb-sm .pb-sm-b{padding:12px 12px 6px}
  #pb-sm .pb-smrow{grid-template-columns:16px minmax(0,1fr) auto;gap:6px;padding:5px 4px 5px 6px}
  #pb-sm .pb-smdot,#pb-sm .pb-smcount{display:none}
  #pb-sm .pb-smname input{padding:0 6px}
  #pb-sm .pb-smacts{gap:0}
  #pb-sm .pb-smname input{font-size:16px;height:40px}
  #pb-sm .pb-smab{width:34px;height:38px}
  #pb-sm .pb-smmove{padding-left:0}
  #pb-sm .pb-sm-reset span{display:none}
  #pb-sm .pb-sm-reset{width:40px;justify-content:center;padding:0}
}

/* ======================================================= pipeline picker */
.pb-dd-btn{gap:9px;padding:0 12px 0 6px;min-width:230px;height:40px;border-radius:11px}
.pb-dd-bic{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--pl-dark-grad);color:#FFFFFF}
.pb-dd-bic svg{width:15px;height:15px}
.pb-dd-btn b{font-size:14.5px}
.pb-dd-menu{width:330px;max-width:calc(100vw - 32px);padding:6px;border-radius:14px;border:1px solid var(--pl-line);
  box-shadow:0 2px 6px rgba(0,32,90,.06),0 28px 60px -20px rgba(7,18,46,.5);animation:pbDdIn .14s ease-out}
@keyframes pbDdIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pb-dd-menu{animation:none}}
.pb-dd-grp{padding:10px 10px 5px;font-size:10px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--pl-mute2)}
.pb-dd-grp:not(:first-child){margin-top:4px;border-top:1px solid #EDF1F7;padding-top:12px}
.pb-dd-opt{gap:11px;padding:7px 8px;border-radius:10px;font-weight:700;transition:background .12s}
.pb-dd-ic{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--pl-tint);color:var(--pl-navy2);border:1px solid var(--pl-tint-line);transition:background .12s,color .12s}
.pb-dd-ic svg{width:16px;height:16px}
.pb-dd-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.pb-dd-tx > span{font-size:14px;font-weight:800;color:var(--pl-ink);white-space:nowrap}
.pb-dd-tx small{font-size:11.5px;font-weight:600;color:var(--pl-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-dd-opt em{flex:none;min-width:26px;height:22px;padding:0 8px;border-radius:99px;display:inline-grid;place-items:center;background:#EEF1F6;color:var(--pl-ink2);font-size:11.5px;font-weight:800}
.pb-dd-tick{flex:none;width:16px;height:16px;color:var(--pl-blue);display:grid;place-items:center}
.pb-dd-tick svg{width:16px;height:16px}
.pb-dd-opt:hover,.pb-dd-opt:focus-visible{background:#F3F6FB}
.pb-dd-opt:hover .pb-dd-ic,.pb-dd-opt:focus-visible .pb-dd-ic{background:#FFFFFF}
/* the pipeline you are on: a soft blue row with its icon tile in navy (white icon) */
.pb-dd-opt.on{background:var(--pl-tint);color:var(--pl-ink)}
.pb-dd-opt.on .pb-dd-ic{background:var(--pl-dark-grad);color:#FFFFFF;border-color:var(--pl-navy)}
.pb-dd-opt.on em{background:var(--pl-navy);color:#FFFFFF}
@media (max-width:640px){ .pb-dd{position:static} .pb-dd-menu{width:auto;left:0;right:0;max-width:none} .pb-dd-btn{min-width:0} }

/* the New contact dialog: same chrome as Edit stages */
.pb-dlg .modal.pc-newbox{max-width:460px}
#pc-new-overlay .pc-new-b{padding:18px 20px 8px;display:flex;flex-direction:column;gap:14px;overflow-y:auto}
#pc-new-overlay .field{margin:0}
#pc-new-overlay .field label{display:block;font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--pl-ink2);font-weight:800;margin-bottom:6px}
#pc-new-overlay .pc-in input{height:42px;font-size:14.5px}
#pc-new-overlay .pc-in input:disabled{background:#EEF1F6;color:var(--pl-mute);cursor:not-allowed}
#pc-new-overlay .pc-nophone{margin:-4px 0 0}
#pc-new-overlay .pc-new-err{margin:0;min-height:0}
#pc-new-overlay .pc-new-err:empty{display:none}
#pc-new-overlay .pb-sm-save{font-weight:800}
@media (max-width:760px){ #pc-new-overlay .pc-in input{font-size:16px;height:46px} }