/* ============================================================================
   pipeline-pro.css — the Pipelines workspace, 11/2026
   Bottom navigation dock · stage navigator · board search · the lead record (v2)
   Loads last. One typeface (the app's Inter). Dark backgrounds carry bold white
   text; gold is a fill only, with dark heavy text on it.
   ========================================================================== */

/* ------------------------------------------------------------ bottom dock */
.pp-dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;justify-content:center;padding:0 16px 14px;pointer-events:none}
.pp-dk-in{pointer-events:auto;display:flex;align-items:stretch;gap:2px;padding:6px;border-radius:18px;background:rgba(11,43,29,.96);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px -16px rgba(4,20,12,.65),0 2px 6px rgba(4,20,12,.25);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);max-width:100%;overflow-x:auto;scrollbar-width:none}
.pp-dk-in::-webkit-scrollbar{display:none}
.pp-dk-i{appearance:none;border:0;background:transparent;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:76px;padding:7px 10px 6px;border-radius:12px;color:#FFFFFF;transition:background-color .16s ease,box-shadow .2s ease}
.pp-dk-ic{display:grid;place-items:center;width:22px;height:22px}
.pp-dk-ic svg{width:20px;height:20px}
.pp-dk-l{font-size:11.5px;font-weight:800;letter-spacing:.1px;line-height:1.1;white-space:nowrap;color:#FFFFFF}
.pp-dk-i:hover{background:rgba(255,255,255,.1);box-shadow:0 0 18px rgba(63,193,120,.25)}
.pp-dk-i:focus-visible{outline:2px solid #F2B705;outline-offset:1px}
.pp-dk-i.on{background:#F2B705;color:#0B2B1D}
.pp-dk-i.on .pp-dk-l{color:#0B2B1D;font-weight:900}
.pp-dk-i.on:hover{background:#F8C91C}
/* room for the dock under whatever is on screen */
html.pp-dock-on .main .content{padding-bottom:104px}
html.pp-dock-on body.pb-focus .pb-col{max-height:calc(100vh - 262px)}
html.pp-dock-on .toast{bottom:96px}

/* phones: a full-width tab bar on every tab, five slots */
.pp-dock.is-phone{padding:0}
.pp-dock.is-phone .pp-dk-in{width:100%;border-radius:18px 18px 0 0;justify-content:space-around;padding:6px 6px calc(6px + env(safe-area-inset-bottom));border-bottom:0;overflow:visible}
.pp-dock.is-phone .pp-dk-i{flex:1 1 0;min-width:0;padding:7px 2px 6px}
.pp-dock.is-phone .pp-dk-l{font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){
  html.pp-dock-on .main .content{padding-bottom:96px}
  /* the dock does the tab strip's job on a phone */
  html.pp-dock-on #kw-tabs-shell{display:none!important}
}
.pp-more{position:fixed;left:10px;right:10px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:61;border-radius:18px;background:#0F3324;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 50px -18px rgba(4,20,12,.75);padding:12px;animation:ppUp .18s ease both}
.pp-more-h{font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:#FFFFFF;opacity:.8;margin:2px 6px 10px}
.pp-more-g{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pp-more-i{appearance:none;display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#FFFFFF;font:inherit;font-size:14px;font-weight:800;text-align:left;cursor:pointer;min-height:48px}
.pp-more-i.on{background:#F2B705;border-color:#F2B705;color:#0B2B1D}
@keyframes ppUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------- board: search */
.pb-head .pp-search{position:relative;display:flex;align-items:center;gap:8px;height:42px;padding:0 10px 0 12px;min-width:220px;flex:1 1 220px;max-width:340px;border-radius:12px;border:1px solid var(--line2,#C9DACF);background:var(--panel,#FFFFFF);color:var(--muted,#3F5A4B);transition:border-color .15s,box-shadow .15s}
.pb-head .pp-search:focus-within{border-color:#1E9A52;box-shadow:0 0 0 3px rgba(30,154,82,.16)}
.pp-search>svg{width:17px;height:17px;flex:none}
.pp-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--text,#0B2B1D)}
.pp-search input::-webkit-search-cancel-button{display:none}
.pp-search-x{display:none;appearance:none;border:0;background:var(--panel3,#EEF3EF);width:24px;height:24px;border-radius:7px;place-items:center;cursor:pointer;color:inherit;padding:0}
.pp-search-x svg{width:13px;height:13px}
.pp-search.has .pp-search-x{display:grid}
.pp-q-res{position:absolute;left:12px;top:calc(100% + 4px);font-size:11.5px;font-weight:800;color:#14603A;white-space:nowrap}
html[data-theme="dark"] .pp-q-res{color:#9FE3BB}
.pb-card.pp-miss{display:none!important}
.pb-col.pp-col-miss .pb-col-b::after{content:"No matches in this stage";display:block;padding:14px 8px;text-align:center;font-size:12.5px;font-weight:700;color:var(--muted2,#6B8C79)}
.pb-board.pp-searching .pb-col-empty{display:none}

/* ----------------------------------------- board: the stage navigator (desktop) */
@media (min-width:761px){
  .pb-mob{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 10px;margin:0 0 2px;scrollbar-width:none}
  .pb-mob::-webkit-scrollbar{display:none}
  .pb-mob-s{flex:none;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:99px;border:1px solid var(--line2,#C9DACF);background:var(--panel,#FFFFFF);color:var(--text,#0B2B1D);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s}
  .pb-mob-s b{font-size:11px;font-weight:800;min-width:20px;height:20px;padding:0 6px;border-radius:99px;display:inline-grid;place-items:center;background:var(--panel3,#EEF3EF);color:var(--text,#0B2B1D)}
  .pb-mob-s:hover{border-color:#1E9A52}
  .pb-mob-s.on{background:#0F3324;border-color:#0F3324;color:#FFFFFF;font-weight:800}
  .pb-mob-s.on b{background:rgba(255,255,255,.16);color:#FFFFFF}
  html[data-theme="dark"] .pb-mob-s{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18);color:#FFFFFF}
  html[data-theme="dark"] .pb-mob-s b{background:rgba(255,255,255,.1);color:#FFFFFF}
  html[data-theme="dark"] .pb-mob-s.on{background:#167A43;border-color:#3FC178}
  .pb-col.pp-flash{animation:ppFlash 1s ease}
  @keyframes ppFlash{0%{box-shadow:0 0 0 0 rgba(242,183,5,0)}25%{box-shadow:0 0 0 3px rgba(242,183,5,.85)}100%{box-shadow:0 0 0 0 rgba(242,183,5,0)}}
}
/* phone stage pills: gold fill takes dark heavy text */
@media (max-width:760px){
  .pb-mob-s.on{background:#F2B705!important;border-color:#F2B705!important;color:#0B2B1D!important;font-weight:800}
  .pb-mob-s.on b{color:#0B2B1D!important;opacity:1}
  .pb-head .pp-search{max-width:none;min-width:0;flex:1 1 100%;order:3}
  .pp-q-res{position:static;margin-left:auto}
}

/* ------------------------------------------------------------- board: cards */
.pb-card{transition:border-color .15s,box-shadow .2s,transform .15s!important}
.pb-card:hover{transform:translateY(-1px);box-shadow:0 10px 22px -14px rgba(7,31,21,.45)!important}
html[data-theme="dark"] .pb-card:hover{transform:none;box-shadow:0 0 0 1px rgba(63,193,120,.35),0 0 22px rgba(63,193,120,.22)!important}

/* ======================================================= the lead record v2 */
.modal.crm-v2{padding:0!important;overflow:hidden;display:flex;flex-direction:column;border-radius:18px!important}
.crm-v2 .crm2-hd{position:relative;flex:none;padding:14px 64px 14px 20px;background:linear-gradient(120deg,#0F3324 0%,#14472E 60%,#185638 100%);cursor:grab;user-select:none}
.crm-v2 .crm2-hd.drag-live{cursor:grabbing}
.crm-v2 .crm2-kick{font-size:10.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#FFFFFF;opacity:.78;margin:0 0 6px 58px}
.crm-v2 .crm-head{background:transparent!important;border:0!important;padding:0!important;align-items:center;gap:14px}
.crm-v2 .crmh-av{width:44px;height:44px;border-radius:12px;background:#F2B705!important;color:#0B2B1D!important;font-weight:900;font-size:15px;box-shadow:0 6px 16px -8px rgba(0,0,0,.6)}
.crm-v2 .crmh-name{color:#FFFFFF!important;font-size:20px;font-weight:800;letter-spacing:-.01em}
.crm-v2 .crmh-untitled{color:#FFFFFF!important;opacity:.75}
.crm-v2 .crmh-meta{color:#FFFFFF!important;opacity:.88;font-size:12.5px;font-weight:600;margin-top:2px}
.crm-v2 .crmh-pills{margin-top:6px}
.crm-v2 .crmh-pill{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.26)!important;color:#FFFFFF!important;font-weight:800}
.crm-v2 .crmh-pill.on{background:rgba(63,193,120,.3)!important;border-color:rgba(63,193,120,.6)!important}
.crm-v2 .crmh-r-hot{background:rgba(214,69,47,.5)!important;border-color:rgba(255,140,120,.6)!important}
.crm-v2 .crmh-r-warm{background:rgba(242,183,5,.32)!important;border-color:rgba(242,183,5,.6)!important}
.crm-v2 .crmh-r-cold{background:rgba(45,110,170,.45)!important;border-color:rgba(120,170,220,.6)!important}
.crm-v2 .crmh-acts{gap:8px}
.crm-v2 .crmh-act{height:36px;padding:0 14px;border-radius:10px;background:#FFFFFF!important;border-color:#FFFFFF!important;color:#0B2B1D!important;font-size:13px;font-weight:800}
.crm-v2 .crmh-act svg{color:#14603A!important}
.crm-v2 .crmh-act:hover{box-shadow:0 0 0 3px rgba(242,183,5,.55)}
.crm-v2 .crm2-x{position:absolute!important;top:50%;right:16px;transform:translateY(-50%);width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.28)!important;color:#FFFFFF!important;font-size:15px;font-weight:800;cursor:pointer}
.crm-v2 .crm2-x:hover{background:rgba(255,255,255,.2)!important}

/* the action bar: stage, the flips, and the save state on one line */
.crm-v2 .crm2-bar{flex:none;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:10px 20px;background:var(--panel2,#F6F9F7);border-bottom:1px solid var(--line,#E3ECE6)}
.crm-v2 .crm2-bar .pb-hdr-stage{margin:0!important;flex:0 1 auto}
.crm-v2 .crm2-bar .switch-row,.crm-v2 .crm2-bar .switch-row.crm-switches{display:flex;flex-wrap:wrap;gap:6px;margin:0!important;padding:0!important;border:0!important;background:none!important}
.crm-v2 .crm2-bar .switch{height:34px;padding:0 12px 0 6px;font-size:12.5px;font-weight:800}
.crm-v2 .crm2-save{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--muted,#3F5A4B);white-space:nowrap}
.crm-v2 .crm2-save::before{content:"";width:7px;height:7px;border-radius:50%;background:#1E9A52;box-shadow:0 0 0 3px rgba(30,154,82,.18)}

/* the body: Details | Activity, each scrolling on its own */
.crm-v2 .modal-b{flex:1 1 auto;min-height:0;padding:0!important}
.crm-v2 [data-lcpane="details"]{padding:14px 20px 18px!important}
.crm-v2 .crm-pane{padding:14px 20px 18px!important}
.crm-v2 .modal-grid{gap:10px 12px!important;margin:0}
.crm-v2 .modal-grid .field,.crm-v2 .pc-ta.field{margin:0!important;gap:0!important}
.crm-v2 .pc-f label,.crm-v2 .field>label{font-size:10.5px!important;letter-spacing:1px;margin:0 0 4px!important}
.crm-v2 .pc-in input,.crm-v2 .pc-in select{height:38px!important;min-height:38px!important;font-size:14px}
.crm-v2 .pc-in-ta textarea{min-height:76px}
.crm-v2 .pc-ta{margin-top:10px}
/* send a copy: one quiet line at the end of Details */
.crm-v2 .pb-movebar-send{margin:14px 0 0!important;padding:10px 12px!important;border:1px dashed var(--line2,#C9DACF)!important;border-radius:12px!important;background:transparent!important;box-shadow:none!important}
.crm-v2 .pb-mv-send{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.crm-v2 .pb-mv-h{flex:1 1 150px;margin:0!important;font-size:12.5px!important;font-weight:800;letter-spacing:0!important;text-transform:none!important;color:var(--text,#0B2B1D)}
.crm-v2 .pb-mv-h small{display:block;font-size:11.5px;font-weight:600;color:var(--muted,#3F5A4B);margin-top:1px}
.crm-v2 .pb-mv-row{flex:2 1 320px;display:flex;gap:6px;margin:0!important}
.crm-v2 .pb-mv-row select{flex:1;min-width:0;height:36px!important}
.crm-v2 .pb-mv-go{height:36px!important;padding:0 16px!important}
/* activity, tightened */
.crm-v2 .crm-fu{padding:10px 12px;margin-bottom:10px}
.crm-v2 .crm-fu-sets{margin-top:8px}
.crm-v2 .crm-comp textarea{min-height:64px}
.crm-v2 .crm-empty{padding:18px 8px!important}
.crm-v2 .crm-empty svg{width:22px;height:22px}
.crm-v2 .modal-f{flex:none;padding:10px 20px!important;border-top:1px solid var(--line,#E3ECE6)}

@media (min-width:761px){
  .modal.crm-editor.crm-v2{width:min(1000px,calc(100vw - 48px));max-width:1000px!important;max-height:min(820px,calc(100vh - 40px))}
  .crm-v2 .crm-tabs{display:none!important}
  .crm-v2 .modal-b{display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);overflow:hidden}
  .crm-v2 [data-lcpane],.crm-v2 [data-lcpane][hidden]{display:block!important;max-height:none!important;min-height:0;overflow-y:auto}
  .crm-v2 [data-lcpane="details"]{order:1;border-right:1px solid var(--line,#E3ECE6)}
  .crm-v2 [data-lcpane="activity"]{order:2}
  .crm-v2 [data-lcpane="details"]{padding-top:0!important}
  .crm-v2 [data-lcpane]::before{padding:10px 20px 8px!important;font-size:10.5px!important;color:var(--muted,#3F5A4B)!important}
  .crm-v2 [data-lcpane="details"]::before{margin:0 -20px 12px}
  .crm-v2 [data-lcpane="activity"] .crm-pane{padding-top:12px!important}
}
/* phones: the record is a full-screen sheet with Activity / Details tabs */
@media (max-width:760px){
  .modal-overlay:has(.crm-v2){padding:0!important;align-items:stretch!important}
  .modal.crm-editor.crm-v2{width:100vw!important;max-width:100vw!important;height:100dvh;max-height:100dvh!important;border-radius:0!important;margin:0!important}
  .crm-v2 .crm2-hd{padding:12px 56px 12px 14px;cursor:default}
  .crm-v2 .crm2-kick{margin-left:0}
  .crm-v2 .crm-head{flex-wrap:wrap;gap:10px}
  .crm-v2 .crmh-av{width:40px;height:40px}
  .crm-v2 .crmh-name{font-size:18px}
  .crm-v2 .crmh-acts{width:100%}
  .crm-v2 .crmh-act{flex:1;justify-content:center;height:40px}
  .crm-v2 .crm2-x{top:12px;transform:none}
  .crm-v2 .crm2-bar{padding:10px 14px}
  .crm-v2 .crm2-bar .pb-hdr-stage{flex:1 1 100%}
  .crm-v2 .crm2-save{display:none}
  .crm-v2 .modal-b{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .crm-v2 [data-lcpane="details"],.crm-v2 .crm-pane{padding:14px!important}
  .crm-v2 .modal-grid{grid-template-columns:1fr 1fr!important}
  .crm-v2 .pb-mv-row{flex-wrap:wrap}.crm-v2 .pb-mv-row select{flex:1 1 45%}
  .crm-v2 .modal-f{padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important}
}
@media (max-width:420px){ .crm-v2 .modal-grid{grid-template-columns:1fr!important} }

/* dark mode for the record */
html[data-theme="dark"] .crm-v2 .crm2-hd{background:linear-gradient(120deg,#0A2016 0%,#0F3324 100%)}
html[data-theme="dark"] .crm-v2 .crm2-bar{background:rgba(255,255,255,.03);border-bottom-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .crm-v2 .crm2-save{color:#FFFFFF;font-weight:800}
html[data-theme="dark"] .crm-v2 .pb-mv-h{color:#FFFFFF}
html[data-theme="dark"] .crm-v2 .pb-mv-h small{color:#D4E2D8}
html[data-theme="dark"] .crm-v2 .pb-movebar-send{border-color:rgba(255,255,255,.2)!important}

/* ------------------------------------------------ small fixes around it */
/* the floating menu button no longer sits on top of the "You are in …" banner text on phones */
@media (max-width:980px){ .view-banner{padding-left:64px!important} }
/* labels on the dark onboarding hero: white, never gold text */
.ob-hero .pg-hero-eyebrow{color:#FFFFFF!important;opacity:.85}
/* a full-screen tool (whiteboard, calculators, IUL) keeps the whole screen: no dock over its toolbar */
body.tool-embed-fs .pp-dock,body.tool-embed-fs .pp-more{display:none!important}
html.pp-dock-on body.tool-embed-fs .main .content{padding-bottom:0}