/* ============================================================================
   app/css/v3/lead-card.css -- the one lead card, ported from
   mocks/v2/shared/components.css (CONTACT CARD, E's 52px list row, chips,
   dots, stat tiles) and mocks/v2/leads/6-v3-upgrade.html (.bcard). Rules
   are the mock's, verbatim where the name is free. Two deliberate renames
   because the live app already uses those class names for other things:
     mock .card  -> .lcard   (the app's .card is a section panel)
     mock .row   -> .lrow    (the app's .row is a flex utility)
   Every inner class (card-head, card-av, card-story, bc-name, avatar ...)
   keeps the mock's name. Chips, dots and pills inside a lead card use the
   mock's vocabulary; outside one, the app's own .chip/.pill rules still
   apply, so nothing else on the page is restyled.
   Not gated on html[data-design="v3"]: the card is the card in both modes,
   the design flag only changes the page chrome around it.
   ========================================================================== */

/* ---------- the card (mock .card) ---------- */
.lcard{
  position:relative;border-radius:var(--r-16);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01) 42%),var(--bg-1);
  border:1px solid var(--line-1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.4),0 20px 32px -24px rgba(0,0,0,.9);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  color:var(--ink-0);font-family:var(--font-ui);
}
.lcard.click{cursor:pointer;}
.lcard.click:hover{border-color:var(--line-3);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 4px rgba(0,0,0,.4),0 28px 44px -24px rgba(0,0,0,.95);}
.lcard.active{border-color:var(--ruby-soft);box-shadow:var(--glow-ruby);}
.lcard.quiet{opacity:.78;}
.lcard.sel{border-color:var(--blue-line);}
.card-list{display:flex;flex-direction:column;gap:12px;}
.card-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 12px;padding:14px 16px 10px;}
.card-av{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;background:var(--bg-3);color:var(--ink-1);border:1.5px solid var(--line-3);background-size:cover;background-position:center;}
.card-id{flex:1 1 200px;min-width:0;}
.card-title{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;min-width:0;}
.card-name{font-family:var(--font-display);font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-.005em;color:var(--ink-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.card-handle{font-family:var(--font-mono);font-size:var(--fs-12);color:var(--ink-2);}
.card-story{margin-top:4px;font-size:var(--fs-125);line-height:1.45;color:var(--ink-1);display:flex;flex-wrap:wrap;gap:2px 0;}
.card-story span+span::before{content:'';display:inline-block;width:3px;height:3px;margin:0 9px;border-radius:50%;background:var(--ink-3);vertical-align:middle;}
.card-story .none{color:var(--ink-2);font-style:italic;}
.card-head-r{display:flex;flex-direction:column;align-items:flex-end;gap:7px;margin-left:auto;flex-shrink:0;}
.card-state{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;letter-spacing:.02em;padding:4px 10px;border-radius:var(--r-20);border:1px solid var(--line-2);background:var(--bg-3);color:var(--ink-1);white-space:nowrap;}
.card-state.hot{border-color:var(--hot-line);background:var(--hot-wash);color:var(--hot);}
.card-state.warm{border-color:var(--warm-line);background:var(--warm-wash);color:var(--warm);}
.card-state.ruby{border-color:var(--ruby-line);background:var(--ruby-wash);color:var(--ruby);}
.card-state.blue{border-color:var(--blue-line);background:var(--blue-wash);color:var(--stage-qualified);}
.card-state.gray{color:var(--ink-1);}
.card-intent{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:var(--r-20);background:var(--bg-3);border:1px solid var(--line-2);font-size:var(--fs-11);color:var(--ink-2);white-space:nowrap;}
.card-intent b{font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--ink-0);font-variant-numeric:tabular-nums;}
.card-intent .gauge{position:relative;width:42px;height:5px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;}
.card-intent .gauge::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--v,0%);border-radius:inherit;background:var(--stage-qualified);}
.card-intent.hot .gauge::after{background:var(--hot);}
.card-intent.warm .gauge::after{background:var(--warm);}
.card-intent.none b{font-family:var(--font-ui);font-size:var(--fs-11);font-weight:500;color:var(--ink-2);}
.card-body{display:flex;flex-direction:column;gap:12px;padding:2px 16px 14px;}
.card-hero{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;background:rgba(0,0,0,.28);box-shadow:inset 0 2px 6px rgba(0,0,0,.35),inset 0 0 0 1px var(--line-1);}
.card-hero-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:var(--fs-115);color:var(--ink-2);}
.card-hero-top .mono{margin-left:auto;}
.card-chat{display:flex;flex-direction:column;gap:6px;}
.card-bub{max-width:min(88%,560px);padding:8px 12px;border-radius:14px;font-size:var(--fs-125);line-height:1.45;overflow-wrap:anywhere;color:var(--ink-0);}
.card-bub.in{align-self:flex-start;border-bottom-left-radius:4px;background:var(--bg-2);border:1px solid var(--line-1);}
.card-bub.out{align-self:flex-end;border-bottom-right-radius:4px;background:var(--bg-4);}
.card-bub.new{font-size:14px;font-weight:500;border-color:var(--blue-line);}
.card-bub.fail{border:1px solid var(--ruby-line);background:var(--ruby-wash);}
.card-bub-m{display:flex;justify-content:space-between;gap:12px;margin-bottom:2px;font-size:var(--fs-11);color:var(--ink-2);}
.card-bub-m b{font-weight:500;color:var(--ink-1);}
.card-wait{font-size:var(--fs-12);color:var(--warm);}
.card-empty{font-size:var(--fs-125);color:var(--ink-2);}
.card-facts{display:flex;flex-wrap:wrap;gap:6px 7px;}
.card-next{padding:9px 12px;border-radius:12px;border:1px solid var(--line-2);font-size:var(--fs-125);line-height:1.45;color:var(--ink-0);}
.card-next b{font-weight:600;color:var(--ink-0);}
.card-acts{display:flex;flex-wrap:wrap;gap:8px;}
.card-act{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:11px;border:1px solid var(--line-2);background:var(--bg-3);color:var(--ink-0);font-size:var(--fs-125);font-weight:600;white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.35);transition:border-color .14s ease,background .14s ease;font-family:inherit;}
.card-act:hover{border-color:var(--line-3);}
.card-act.primary{background:var(--ink-0);color:var(--bg-0);border-color:transparent;}
.card-act svg{width:14px;height:14px;}
.card-act-wrap{display:inline-flex;flex-direction:column;gap:3px;min-width:0;max-width:100%;}
.card-act-wrap .why{font-size:var(--fs-11);color:var(--ink-2);line-height:1.3;}
.card-act.off,.card-act[disabled]{opacity:.5;cursor:not-allowed;}
.card-sec{display:flex;flex-direction:column;gap:7px;}
.card-sec-t{font-size:var(--fs-11);color:var(--ink-2);display:flex;align-items:center;gap:8px;}
.card-sec-t .n{font-family:var(--font-mono);color:var(--ink-2);font-variant-numeric:tabular-nums;}
.card-touches{display:flex;flex-wrap:wrap;gap:6px;}
.card-more{border-top:1px solid var(--line-1);background:rgba(0,0,0,.22);}
.card-more>summary{display:flex;align-items:center;cursor:pointer;list-style:none;padding:10px 16px;font-size:var(--fs-125);font-weight:600;color:var(--ink-2);}
.card-more>summary::-webkit-details-marker{display:none;}
.card-more>summary::before{content:'';flex:0 0 auto;width:9px;height:6px;margin-right:9px;background:var(--ink-2);clip-path:polygon(0 0,100% 0,50% 100%);transform:rotate(-90deg);transition:transform .15s;}
.card-more[open]>summary::before{transform:none;}
.card-more>summary small{margin-left:8px;font-weight:500;color:var(--ink-2);}
.card-more-b{display:flex;flex-direction:column;gap:12px;padding:2px 16px 14px;}
.timeline{display:flex;flex-direction:column;gap:8px;}
.titem{display:grid;grid-template-columns:96px 1fr;gap:10px;font-size:var(--fs-12);color:var(--ink-1);align-items:start;}
.titem .when{font-family:var(--font-mono);font-size:var(--fs-11);color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums;}
.titem b{color:var(--ink-0);font-weight:500;}
.titem .who{font-family:var(--font-mono);font-size:var(--fs-11);color:var(--ink-2);}
.titem .body{color:var(--ink-1);margin-top:2px;overflow-wrap:anywhere;}
.lcard.compact .card-head{padding:12px 14px 8px;}
.lcard.compact .card-body{padding:0 14px 12px;gap:9px;}
.lcard.compact .card-name{font-size:15px;}
.lcard.compact .card-av{flex-basis:40px;width:40px;height:40px;}
.lcard.compact .card-hero{padding:9px 11px;}
.lcard .card-check{position:absolute;top:14px;left:14px;z-index:2;width:16px;height:16px;accent-color:var(--stage-qualified);}
.lcard.has-check .card-head{padding-left:40px;}

/* ---------- E's 52px list row (mock .row) ---------- */
.lrow{display:flex;align-items:center;gap:10px;width:100%;padding:0 14px;min-height:var(--row-h);border-bottom:1px solid var(--line-1);text-align:left;transition:background .18s ease,box-shadow .18s ease;color:inherit;text-decoration:none;background:none;border-left:0;border-right:0;border-top:0;cursor:pointer;font-family:inherit;font-size:inherit;}
.lrow:hover{background:var(--bg-1);box-shadow:inset 0 1px 0 rgba(255,255,255,.03);}
.lrow.active{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0) 60%),var(--bg-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
.lrow:last-child{border-bottom:0;}
.avatar{width:27px;height:27px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:var(--fs-11);font-weight:600;background:var(--bg-3);color:var(--ink-1);border:1.5px solid var(--line-3);background-size:cover;background-position:center;transition:border-color .18s ease,box-shadow .18s ease;}
.avatar.lg{width:38px;height:38px;font-size:14px;}
.avatar.xl{width:44px;height:44px;font-size:14px;}
.lrow:hover .avatar{border-color:var(--ruby-soft);}
.lrow.active .avatar{border-color:var(--ruby);box-shadow:0 0 0 3px var(--ruby-wash);}
.lrow .handle{font-family:var(--font-mono);font-size:var(--fs-12);color:var(--ink-0);flex-shrink:0;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lrow .name{font-size:var(--fs-125);font-weight:500;color:var(--ink-0);flex-shrink:0;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lrow .stage-mini{display:flex;align-items:center;gap:5px;font-size:var(--fs-115);color:var(--ink-2);flex-shrink:0;white-space:nowrap;}
.lrow .preview{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-12);color:var(--ink-2);}
.lrow.active .preview{color:var(--ink-1);}
.lrow .time{flex-shrink:0;font-family:var(--font-mono);font-size:var(--fs-11);color:var(--ink-2);min-width:30px;text-align:right;font-variant-numeric:tabular-nums;}
.lrow .why{font-size:var(--fs-115);color:var(--warm);flex-shrink:0;white-space:nowrap;}
.lrow .why.over{color:var(--ruby);}
.lrow .row-chevron{flex-shrink:0;width:11px;height:11px;color:var(--ink-3);opacity:0;}
.lrow.active .row-chevron,.lrow:hover .row-chevron{opacity:1;color:var(--ink-1);}
.lrow .facts{display:none;font-size:var(--fs-11);color:var(--ink-2);flex-shrink:0;white-space:nowrap;}
@media (min-width:980px){.lrow .facts{display:inline;}}
.lrow-list{display:flex;flex-direction:column;border:1px solid var(--line-1);border-radius:var(--r-10);background:var(--bg-1);overflow:hidden;}
@media (max-width:640px){.lrow .preview{display:none;}.lrow .stage-mini span{display:none;}}

/* ---------- board card (leads/6-v3-upgrade .bcard) ---------- */
.bcard{position:relative;display:flex;flex-direction:column;gap:7px;padding:10px 11px;border-radius:var(--r-10);background:var(--card-v3-bg);border:1px solid var(--line-2);box-shadow:var(--card-v3-shadow);cursor:grab;transition:border-color .14s var(--ease),box-shadow .14s var(--ease);color:var(--ink-0);}
.bcard:hover{border-color:var(--line-3);box-shadow:var(--card-v3-shadow-lift);}
.bcard.dragging{opacity:.45;cursor:grabbing;}
.bcard.active{border-color:var(--ruby-soft);box-shadow:var(--glow-ruby);}
.bc-top{display:flex;align-items:center;gap:8px;min-width:0;}
.bc-id{min-width:0;flex:1;display:flex;flex-direction:column;}
.bc-name{font-size:var(--fs-125);font-weight:600;color:var(--ink-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bc-handle{font-family:var(--font-mono);font-size:var(--fs-11);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bc-story{font-size:var(--fs-11);color:var(--ink-1);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bc-chips{display:flex;flex-wrap:wrap;gap:4px;}
.bc-why{display:flex;align-items:center;gap:5px;font-size:var(--fs-11);color:var(--warm);line-height:1.35;}
.bc-why .icon{width:12px;height:12px;flex-shrink:0;}
.bc-why.over{color:var(--ruby);}
.bc-acts{display:flex;flex-wrap:wrap;gap:4px;}

/* ---------- chips, dots, pills: the mock's vocabulary, only inside a lead surface ---------- */
:is(.lcard,.lrow,.bcard,.lc-scope) .chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:var(--fs-11);line-height:1;padding:4px 8px;border-radius:var(--r-6);border:1px solid var(--line-2);background:transparent;color:var(--ink-1);white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:500;box-shadow:none;}
:is(.lcard,.lrow,.bcard,.lc-scope) .chip.on{color:var(--ink-0);border-color:var(--line-3);background:var(--bg-3);}
:is(.lcard,.lrow,.bcard,.lc-scope) .chip.hot{color:var(--hot);border-color:var(--hot-line);background:var(--hot-wash);}
:is(.lcard,.lrow,.bcard,.lc-scope) .chip.warm{color:var(--warm);border-color:var(--warm-line);background:var(--warm-wash);}
:is(.lcard,.lrow,.bcard,.lc-scope) .chip.cold{color:var(--ink-1);border-color:var(--cold-line);background:var(--cold-wash);}
:is(.lcard,.lrow,.bcard,.lc-scope) .chip.blue{color:var(--stage-qualified);border-color:var(--blue-line);background:var(--blue-wash);}
:is(.lcard,.lrow,.bcard,.lc-scope) .chip.ruby{color:var(--ruby);border-color:var(--ruby-line);background:var(--ruby-wash);}
:is(.lcard,.lrow,.bcard,.lc-scope) .chip.ghost{border-style:dashed;color:var(--ink-2);}
:is(.lcard,.lrow,.bcard,.lc-scope) .chip.link{text-decoration:none;cursor:pointer;}
:is(.lcard,.lrow,.bcard,.lc-scope) .chip.link:hover,:is(.lcard,.lrow,.bcard,.lc-scope) .chip-btn:hover{border-color:var(--line-3);color:var(--ink-0);}
:is(.lcard,.lrow,.bcard,.lc-scope) .chip-btn{cursor:pointer;font-family:var(--font-mono);}
:is(.lcard,.lrow,.bcard,.lc-scope) .chip-btn[disabled]{opacity:.55;cursor:not-allowed;}
:is(.lcard,.lrow,.bcard,.lc-scope) .chip .icon{width:12px;height:12px;}
.dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;display:inline-block;background:var(--cold);}
.dot.hot{background:var(--hot);}
.dot.warm{background:var(--warm);}
.dot.cold{background:var(--cold);}
.dot.ruby{background:var(--ruby);}
.dot.blue{background:var(--stage-qualified);}
.dot.stage-new{background:var(--stage-new);}
.dot.stage-engaged{background:var(--stage-engaged);}
.dot.stage-resource{background:var(--stage-resource);}
.dot.stage-money{background:var(--stage-money);}
.dot.stage-terminal{background:var(--stage-terminal);}
.dot.stage-disq{background:var(--stage-disq);}
.dot.unscored{background:transparent;border:1.3px solid var(--self-ring);}
:is(.lcard,.lrow,.bcard,.lc-scope) .pill.static{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:var(--r-20);border:1px solid var(--line-2);background:transparent;color:var(--ink-1);font-size:var(--fs-11);font-weight:500;white-space:nowrap;cursor:default;}
:is(.lcard,.lrow,.bcard,.lc-scope) .pill.static.on.hot{background:var(--hot-wash);border-color:var(--hot-line);color:var(--hot);}
:is(.lcard,.lrow,.bcard,.lc-scope) .pill.static.on.warm{background:var(--warm-wash);border-color:var(--warm-line);color:var(--warm);}
.icon{width:14px;height:14px;flex-shrink:0;display:inline-block;vertical-align:-2px;}

/* ---------- stat tile (mock .stat, flat; glow only for meaning) ---------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
.stat-row.bento{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}
.stat{position:relative;padding:11px 13px;border-radius:var(--r-10);background:var(--bg-1);border:1px solid var(--line-1);min-width:0;text-align:left;color:var(--ink-0);font-family:var(--font-ui);}
.stat .v{display:flex;align-items:baseline;gap:7px;font-family:var(--font-display);font-size:22px;font-weight:600;line-height:1.1;color:var(--ink-0);font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.stat .v small{font-family:var(--font-mono);font-size:var(--fs-11);font-weight:500;color:var(--ink-2);letter-spacing:0;}
.stat .k{margin-top:4px;font-size:var(--fs-115);color:var(--ink-2);display:flex;align-items:center;gap:6px;}
.stat .t{margin-top:6px;font-size:var(--fs-11);color:var(--ink-2);font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.stat.muted .v{color:var(--ink-2);}
.stat.click{cursor:pointer;transition:background .16s ease,border-color .16s ease;}
.stat.click:hover{background:var(--bg-2);border-color:var(--line-3);}
.stat.on{background:var(--bg-3);border-color:var(--line-3);}
.stat.zero{border-color:rgba(239,75,92,.35);}
.stat.zero::after{content:'ZERO';position:absolute;top:9px;right:10px;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.08em;padding:2px 6px;border-radius:var(--r-4);background:var(--zero-wash);color:var(--zero);border:1px solid rgba(239,75,92,.35);}
.stat.v3{background:var(--card-v3-bg);border-color:var(--card-v3-border);box-shadow:var(--card-v3-shadow);}
.stat.glow-hot{box-shadow:var(--glow-hot);border-color:rgba(51,209,126,.3);}
.stat.glow-ruby{box-shadow:var(--glow-ruby);border-color:rgba(255,59,78,.42);}
.stat.glow-warm{box-shadow:var(--glow-warm);border-color:rgba(242,169,59,.4);}
.stat .v .hue-hot{color:var(--hot);}
.stat .v .hue-ruby{color:var(--ruby);}
.stat .v .hue-warm{color:var(--warm);}
.stat .v .hue-blue{color:var(--stage-qualified);}
.icon-chip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;border:1px solid var(--line-2);background:var(--bg-3);color:var(--ink-1);flex-shrink:0;}
.icon-chip .icon{width:13px;height:13px;}
.icon-chip.hot{color:var(--hot);border-color:var(--hot-line);background:var(--hot-wash);}
.icon-chip.warm{color:var(--warm);border-color:var(--warm-line);background:var(--warm-wash);}
.icon-chip.ruby{color:var(--ruby);border-color:var(--ruby-line);background:var(--ruby-wash);}
.icon-chip.blue{color:var(--stage-qualified);border-color:var(--blue-line);background:var(--blue-wash);}
.icon-chip.cold{color:var(--ink-1);border-color:var(--cold-line);background:var(--cold-wash);}

/* ---------- section head used above a list of cards ---------- */
.lc-head{display:flex;align-items:center;gap:10px;margin:4px 0 10px;flex-wrap:wrap;}
.lc-head .t{font:600 15px var(--font-display);color:var(--ink-0);}
.lc-head .n{font:600 var(--fs-11) var(--font-mono);color:var(--ink-2);}
.lc-head .spacer{flex:1;}

/* ---------- owner lanes (leads/6-v3-upgrade .lane-row): hover reveals the one action ---------- */
.lane-row{position:relative;}
.lane-row .lane-acts{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;gap:6px;opacity:0;pointer-events:none;transition:opacity .14s ease;}
.lane-row:hover .lane-acts,.lane-row:focus-within .lane-acts{opacity:1;pointer-events:auto;}
.lane-row:hover .lrow .time,.lane-row:focus-within .lrow .time,.lane-row:hover .lrow .row-chevron{opacity:0;}
@media (hover:none){.lane-row .lane-acts{position:static;transform:none;opacity:1;pointer-events:auto;padding:0 14px 8px 51px;}.lane-row .lrow{border-bottom:0;}.lane-row{border-bottom:1px solid var(--line-1);}}
.lane-row .lrow .why,.lane-row .lrow .stage-mini span,.lane-row .lrow .facts{display:none;}
.lane-row .lrow .preview{display:block;}