/* Sales pipeline board (pipeline.js). All classes prefixed pl-. Colors come from tokens.css only.
   Layout: 3 summary tiles, one filter row, then 4 columns of 3-line cards. "Call today" is the only highlighted column. */
#v-pipeline-body{min-width:0;container-type:inline-size;container-name:pl}
.pl-head{margin-bottom:16px}
.pl-head h2{margin:0 0 4px}
.pl-head .pl-sub{margin:0}
.pl-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* summary tiles */
.pl-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.pl-kpi{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:13px 14px 12px;display:grid;gap:3px;min-width:0}
.pl-kl{font:600 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.pl-kv{font:850 28px/1.05 var(--display);font-stretch:88%;letter-spacing:-.01em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pl-kh{font-size:12.5px;color:var(--muted);line-height:1.35}
.pl-kpi-hot{background:var(--signal);border-color:var(--signal)}
.pl-kpi-hot .pl-kl,.pl-kpi-hot .pl-kh,.pl-kpi-hot .pl-kv{color:var(--signal-ink)}

/* filter row */
.pl-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.pl-seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface);max-width:100%}
.pl-seg button{border:0;border-right:1px solid var(--line);background:transparent;padding:8px 12px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--muted)}
.pl-seg button:last-child{border-right:0}
.pl-seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.pl-search{flex:0 1 220px;min-width:0}
.pl-search input{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:8px 10px;font:inherit;font-size:14px}
.pl-search input:focus{outline:0;border-color:var(--pine)}
.pl-extra{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pl-fix,.pl-lostbtn{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:7px 12px;font:600 13px/1.2 var(--body);cursor:pointer}
.pl-fix{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.pl-fix:hover{background:color-mix(in srgb,var(--warn) 10%,var(--surface))}
.pl-lostbtn[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pl-link{border:0;background:none;padding:0;color:var(--pine);font:600 12.5px/1.3 var(--body);cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* board */
.pl-board{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:12px;align-items:start}
.pl-col{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:12px 10px 10px;min-width:0;transition:outline-color .12s}
.pl-col.pl-focus{background:var(--surface);border:2px solid var(--signal);padding:11px 9px 9px}
.pl-col.pl-over{outline:2px dashed var(--pine);outline-offset:-4px}
.pl-ch{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 4px}
.pl-ch h3{margin:0;font:800 16px/1.2 var(--display)}
.pl-cn{font:600 12px/1 var(--mono);color:var(--muted);background:var(--bg);border-radius:999px;padding:4px 8px}
.pl-focus .pl-cn{background:var(--signal);color:var(--signal-ink)}
.pl-csum{margin:3px 4px 10px;font:600 12px/1.2 var(--mono);color:var(--muted)}
.pl-cb{display:grid;gap:8px}
.pl-none{margin:0;font-size:12.5px;color:var(--muted);border:1px dashed var(--line);border-radius:10px;padding:10px;text-align:center}
.pl-empty{color:var(--muted);text-align:center;margin:12px 0}

/* cards: name + value, one reason, rep + one tag */
.pl-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;display:grid;gap:3px;min-width:0;transition:border-color .12s,box-shadow .12s}
.pl-focus .pl-card{background:var(--bg)}
.pl-card:hover,.pl-card:focus-visible{border-color:var(--pine);box-shadow:0 8px 20px -16px rgba(16,34,30,.6)}
.pl-card.pl-dragging{opacity:.45}
.pl-card[draggable="true"]{-webkit-user-drag:element}
.pl-r1{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-width:0}
.pl-name{font:600 14px/1.25 var(--body);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-val{font-size:13px;white-space:nowrap}
.pl-why{margin:0;font-size:13px;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:5px}
.pl-t{font:600 11.5px/1 var(--mono);color:var(--muted);padding:4px 7px;border-radius:6px;white-space:nowrap}
.pl-t-red{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.pl-t-yel{background:color-mix(in srgb,var(--signal) 34%,transparent);color:var(--ink)}

/* avatars and badges (badges now only appear in the detail panel) */
.pl-av{width:24px;height:24px;font-size:10px;border:0;padding:0;cursor:pointer}
button.pl-av:hover{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--pine)}
span.pl-av{cursor:default}
.pl-av-none{background:transparent;color:var(--muted);border:1.5px dashed var(--muted)}
.pl-av-lg{width:44px;height:44px;font-size:15px}
.pl-bs{display:flex;flex-wrap:wrap;gap:5px}
.pl-b{display:inline-block;font:600 10.5px/1.2 var(--mono);border-radius:5px;padding:3px 6px;background:var(--surface-2);color:var(--muted)}
.pl-b-signal{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.pl-b-risk{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}
.pl-b-good{background:color-mix(in srgb,var(--pine) 13%,transparent);color:var(--pine)}
.pl-b-info{background:var(--surface-2);color:var(--muted)}

/* detail panel */
.pl-scrim{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:50}
.pl-scrim[hidden],.pl-panel[hidden]{display:none}
.pl-panel{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--bg);color:var(--ink);border-left:1px solid var(--line);z-index:55;display:flex;flex-direction:column;box-shadow:-30px 0 60px -30px rgba(0,0,0,.4);outline:0;font-family:var(--body)}
.pl-ph{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);background:var(--surface)}
.pl-pt{flex:1;min-width:0}
.pl-pt h2{font:850 22px/1.1 var(--display);font-stretch:92%;margin:0;overflow-wrap:anywhere}
.pl-pt p{margin:3px 0 0;color:var(--muted);font-size:13.5px}
.pl-x{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;width:34px;height:34px;cursor:pointer;flex:none}
.pl-pb{overflow:auto;padding:16px 18px 28px;display:grid;gap:16px;align-content:start}
.pl-pb>*{min-width:0}
.pl-pb h3{font:800 15px/1.2 var(--display);margin:0 0 6px}
.pl-where{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:13px 14px;display:grid;gap:4px}
.pl-where-focus{border-color:color-mix(in srgb,var(--signal) 70%,var(--line));box-shadow:inset 4px 0 0 var(--signal)}
.pl-eb{font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pl-where b{font:800 17px/1.25 var(--display)}
.pl-where p{margin:0;font-size:14px}
.pl-next{display:grid;gap:2px;margin-top:6px!important;padding-top:8px;border-top:1px solid var(--line)}
.pl-next span{font:600 10.5px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--pine)}
.pl-mis{border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));border-left:4px solid var(--warn);border-radius:12px;padding:12px 14px;background:var(--surface);display:grid;gap:8px;justify-items:start;font-size:14px}
.pl-mis p{margin:0}
.pl-mis b{color:var(--warn)}
.pl-mis .btn{white-space:normal;text-align:left}
.pl-fine{font:400 11.5px/1.3 var(--mono);color:var(--muted)}
.pl-crmok{margin:0;font-size:13px;color:var(--muted)}
.pl-crmok b{color:var(--ink);font-weight:600}
.pl-ctx{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14px}
.pl-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
@media (max-width:460px){.pl-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pl-facts>div{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 10px;min-width:0}
.pl-facts dt{font:600 10.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.pl-facts dd{margin:2px 0 0;font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.pl-acts{display:flex;gap:8px;flex-wrap:wrap}
.pl-movebox{display:grid;gap:5px;font-size:13px;font-weight:600;border-top:1px solid var(--line);padding-top:14px}
.pl-movebox select{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:9px 10px;font:inherit;font-weight:400;max-width:100%}
.pl-movebox small{font:400 11.5px/1.3 var(--mono);color:var(--muted)}

/* narrow (phone, or the app with the assistant open beside it): columns become a horizontal swipe */
@container pl (max-width:760px){
  .pl-board{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px;overscroll-behavior-x:contain}
  .pl-col{flex:0 0 84%;scroll-snap-align:start}
  .pl-kpis{gap:8px}
  .pl-kpi{padding:10px 10px 9px}
  .pl-kv{font-size:19px}
  .pl-kh{font-size:11.5px}
  .pl-seg button{padding:8px 9px}
  .pl-search{flex:1 1 100%}
  .pl-extra{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.pl-card,.pl-col{transition:none}}