/* L87 — Slim lead card + matches-only dropdown (desktop >=1024px). Loaded after m-lead-pro.css. Tokens only.
   1. Card: one compact row (about 60px instead of 160-250px), clear border + status tint + gap so neighbours never blend.
   2. Dropdown: ONLY the best matches (guidance and contact blocks are hidden here; they stay on phones and in the lead file).
   3. Each match: unit · action pill · price, reason chips, one line of guidance. Send / More sit on the header row.
   Phones and tablets (<1024px) are untouched. Rollback: remove the m-lead-slim.css link from index.html. */
@media(min-width:1024px){
  /* ===== shell: visible separation between cards ===== */
  html body main .list .lead.lx.lx.lx{margin:0 0 7px;background:color-mix(in srgb,var(--sc,var(--c-n300)) 6%,var(--c-white));border:1px solid var(--c-n300);border-inline-start:4px solid var(--sc,var(--c-n300));border-radius:10px;box-shadow:0 1px 3px rgba(var(--c-starlight-rgb),.10)}
  html body main .list .lead.lx.lx.lx:hover{background:color-mix(in srgb,var(--sc,var(--c-n300)) 10%,var(--c-white));border-color:var(--c-n400);border-inline-start-color:var(--sc,var(--c-n300));box-shadow:0 3px 10px rgba(var(--c-starlight-rgb),.12)}
  html body main .list .lead.lx.lx.lx.open{background:var(--c-white);border-color:var(--sc,var(--c-n400));box-shadow:0 6px 18px rgba(var(--c-starlight-rgb),.14)}
  html body main .list .lead.lx.lx.lx.open>.lx-head{background:color-mix(in srgb,var(--sc,var(--c-n300)) 7%,var(--c-white));border-bottom:1px solid color-mix(in srgb,var(--sc,var(--c-n300)) 35%,var(--c-n200));border-radius:9px 9px 0 0}
  /* "Start here" becomes a small corner tag instead of a full row above the card */
  html body main .list .lead.lx.lx.lx.lx-start{margin-top:11px}
  html body main .list .lead.lx.lx.lx>.lx-startpill{position:absolute;top:-10px;inset-inline-start:12px;z-index:2;margin:0;padding:0 9px;font-size:10.5px;line-height:18px;box-shadow:var(--sh-1)}

  /* ===== compact header (all desktop widths) ===== */
  html body main .list .lead.lx.lx.lx>.lx-head{padding:7px 10px 7px 12px;min-height:0;row-gap:0;align-items:center}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-av{margin:0;width:34px;height:34px;align-self:center;font-size:12px}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-top{padding-top:0;align-self:end}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-name{font-size:var(--fs-md);line-height:1.25}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-sub{flex-wrap:nowrap;overflow:hidden;gap:0 9px;font-size:12px;line-height:1.35}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-sub>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
  html body main .list .lead.lx.lx.lx>.lx-head .l2>span{gap:2px}
  html body main .list .lead.lx.lx.lx>.lx-head .l2>span::before,html body main .list .lead.lx.lx.lx>.lx-head .lx-st::before,html body main .list .lead.lx.lx.lx>.lx-head .lx-ow::before{font-size:9.5px;line-height:1.1}
  html body main .list .lead.lx.lx.lx>.lx-head .l2 .rq-s small{display:none}
  html body main .list .lead.lx.lx.lx>.lx-head .l2 .rq-s b{padding:0 8px;line-height:1.55;font-size:12px}
  html body main .list .lead.lx.lx.lx>.lx-head .l2 .rq-b,html body main .list .lead.lx.lx.lx>.lx-head .l2>span{font-size:var(--fs-sm)}
  html body main .list .lead.lx.lx.lx>.lx-head .l2 .rq-a .x-f{-webkit-line-clamp:1;line-clamp:1}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-st :is(.badge,.tag,.age,.lx-why,.lx-dt,.sla-chip){display:inline-flex;align-items:center;gap:4px;min-height:0;height:19px;padding:0 7px;border-radius:6px;font-size:11px;line-height:19px}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-ow :is(.lx-mc,.lx-fb,.tag){min-height:0;height:18px;padding:0 7px;font-size:11px;line-height:18px}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-st .li,html body main .list .lead.lx.lx.lx>.lx-head .lx-ow .li{width:12px;height:12px}
  html body main .list .lead.lx.lx.lx>.lx-head>.lx-acts{gap:5px}
  html body main .list .lead.lx.lx.lx>.lx-head>.lx-acts .btn,html body main .list .lead.lx.lx.lx>.lx-head>.lx-acts .lx-assign{height:30px;min-height:30px;padding:0 10px;gap:5px;border-radius:7px;font-size:12.5px}
  html body main .list .lead.lx.lx.lx>.lx-head>.lx-acts .lx-assign,html body main .list .lead.lx.lx.lx>.lx-head>.lx-acts .btn.lv-out,html body main .list .lead.lx.lx.lx>.lx-head>.lx-acts .btn.lx-edit{width:30px;min-width:30px;padding:0}
  html body main .list .lead.lx.lx.lx>.lx-head>.lx-acts .btn svg,html body main .list .lead.lx.lx.lx>.lx-head>.lx-acts .btn .li,html body main .list .lead.lx.lx.lx>.lx-head>.lx-acts .lx-assign svg,html body main .list .lead.lx.lx.lx>.lx-head>.lx-acts .lx-assign .li{width:15px;height:15px}
  html body main .list .lead.lx.lx.lx>.lx-head>.lx-chev{width:24px;height:24px}

  /* ===== dropdown: matches only ===== */
  html body main .list .lead.lx.lx.lx .lx-panel{display:block;padding:7px 10px 9px;border-top:0;background:color-mix(in srgb,var(--sc,var(--c-n300)) 4%,var(--c-n50));border-radius:0 0 8px 8px}
  html body main .list .lead.lx.lx.lx .lx-panel>:not(.lx-mt){display:none}
  html body main .list .lead.lx.lx.lx .lx-panel>.lx-mt{display:block;padding:0;border:0;border-radius:0;background:none}
  html body main .list .lead.lx.lx.lx .lx-mrows{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 8px;align-items:stretch}
  /* header row: title on the left, Send / More on the right of the same row */
  html body main .list .lead.lx.lx.lx .lx-mrows>.bm-h{grid-column:1;grid-row:1;justify-content:flex-start;align-items:center;gap:10px;padding:0;border:0;font-size:var(--fs-sm);line-height:1.2}
  html body main .list .lead.lx.lx.lx .lx-mrows>.bm-f{grid-column:2;grid-row:1;justify-self:end;display:flex;flex-wrap:nowrap;gap:6px;padding:0}
  html body main .list .lead.lx.lx.lx .lx-mrows>.bm-f .btn{flex:0 0 auto;min-width:112px;min-height:28px;height:28px;padding:0 12px;border-radius:7px;font-size:12px;white-space:nowrap}
  html body main .list .lead.lx.lx.lx .lx-mrows>.bm-tip{grid-column:1/-1;align-items:center;gap:6px;padding:3px 9px;border-radius:6px;font-size:11.5px;line-height:1.35;white-space:nowrap;overflow:hidden}
  html body main .list .lead.lx.lx.lx .lx-mrows>.bm-tip span{min-width:0;overflow:hidden;text-overflow:ellipsis}
  html body main .list .lead.lx.lx.lx .lx-mrows>.lm-empty{grid-column:1/-1;padding:2px 0}
  .lead.lx .lx-mrows .lm-sk{height:52px}
  /* each match: tighter, with the guidance line */
  html body main .list .lead.lx.lx.lx .lx-mrows .bm-r,html body main .list .lead.lx.lx.lx .lx-mrows .bm-h+.bm-r{padding:5px 10px 5px 0;border-radius:8px;gap:2px}
  html body main .list .lead.lx.lx.lx .lx-mrows .bm-ck{width:32px;height:32px;margin:0 0 0 -2px}
  html body main .list .lead.lx.lx.lx .lx-mrows .bm-b{gap:1px}
  html body main .list .lead.lx.lx.lx .lx-mrows .bm-l1{row-gap:2px}
  html body main .list .lead.lx.lx.lx .lx-mrows .bm-l1 b,html body main .list .lead.lx.lx.lx .lx-mrows .bm-p{font-size:var(--fs-md)}
  html body main .list .lead.lx.lx.lx .lx-mrows .bm-l3{gap:1px 8px;line-height:1.35}
  html body main .list .lead.lx.lx.lx .lx-mrows .bm-y{font-size:11.5px}
  html body main .list .lead.lx.lx.lx .lx-mrows .bm-gd{flex:1 1 150px;min-width:0;font:500 11.5px/1.35 var(--font-body);color:var(--tx-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html body main .list .lead.lx.lx.lx .lx-mrows .bm-gd::before{content:"→ ";color:var(--c-n400)}
}

/* ===== wide desktops (>=1280px): the whole card is ONE row ===== */
@media(min-width:1100px){
  html body main .list .lead.lx.lx.lx .lx-mrows{grid-template-columns:repeat(3,minmax(0,1fr))}
  html body main .list .lead.lx.lx.lx .lx-mrows>.bm-h{grid-column:1/3}
  html body main .list .lead.lx.lx.lx .lx-mrows>.bm-f{grid-column:3}
}
@media(min-width:1280px){
  html body main .list .lead.lx.lx.lx>.lx-head{grid-template-columns:34px minmax(140px,.85fr) minmax(250px,1.7fr) minmax(190px,1.3fr) minmax(128px,.8fr) auto 24px;grid-template-rows:auto auto;column-gap:14px}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-av,html body main .list .lead.lx.lx.lx>.lx-head .l2,html body main .list .lead.lx.lx.lx>.lx-head .lx-st,html body main .list .lead.lx.lx.lx>.lx-head .lx-ow,html body main .list .lead.lx.lx.lx>.lx-head>.lx-acts,html body main .list .lead.lx.lx.lx>.lx-head>.lx-chev{grid-row:1/3;align-self:center}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-top{grid-column:2;grid-row:1}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-sub{grid-column:2;grid-row:2;align-self:start}
  html body main .list .lead.lx.lx.lx>.lx-head .l2{grid-column:3;grid-template-columns:minmax(74px,.9fr) minmax(70px,.8fr) minmax(0,1.5fr) minmax(86px,.9fr);gap:0 12px;padding-inline-start:12px}
  /* status: chips wrap freely, no label row */
  html body main .list .lead.lx.lx.lx>.lx-head .lx-st{grid-column:4;flex-direction:row;flex-wrap:wrap;align-content:center;gap:3px 4px;padding:0 0 0 12px}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-st::before,html body main .list .lead.lx.lx.lx>.lx-head .lx-ow::before{display:none}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-st1,html body main .list .lead.lx.lx.lx>.lx-head .lx-st2{display:contents}
  /* assignment: agent on the first line, date + matches on the second */
  html body main .list .lead.lx.lx.lx>.lx-head .lx-ow{grid-column:5;flex-direction:row;flex-wrap:wrap;align-content:center;gap:2px 6px;padding:0 0 0 12px}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-ow1{flex:0 0 100%}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-ow .lx-mt{gap:0 6px;flex-wrap:nowrap}
  html body main .list .lead.lx.lx.lx>.lx-head>.lx-acts{grid-column:6}
  html body main .list .lead.lx.lx.lx>.lx-head>.lx-chev{grid-column:7}
  html body main .list .lead.lx.lx.lx .lx-mrows{grid-template-columns:repeat(3,minmax(0,1fr))}
  html body main .list .lead.lx.lx.lx .lx-mrows>.bm-h{grid-column:1/3}
  html body main .list .lead.lx.lx.lx .lx-mrows>.bm-f{grid-column:3}
}
@media(min-width:1280px) and (max-width:1559px){html body main .list .lead.lx.lx.lx>.lx-head .lx-sub>span:nth-child(3){display:none}}
/* 1280-1559: Call / WhatsApp become icon buttons (names stay as tooltips) so every column keeps its full text */
@media(min-width:1280px) and (max-width:1559px){
  html body main .list .lead.lx.lx.lx>.lx-head>.lx-acts .btn.call .lx-bl,html body main .list .lead.lx.lx.lx>.lx-head>.lx-acts .btn.wa .lx-bl{display:none}
  html body main .list .lead.lx.lx.lx>.lx-head>.lx-acts .btn.call,html body main .list .lead.lx.lx.lx>.lx-head>.lx-acts .btn.wa{width:30px;min-width:30px;padding:0}
}
@media(min-width:1640px){
  html body main .list .lead.lx.lx.lx>.lx-head{grid-template-columns:36px minmax(190px,1fr) minmax(340px,2fr) minmax(240px,1.2fr) minmax(150px,.8fr) auto 24px;column-gap:18px;padding-block:7px}
}

/* ===== below 1560px: Call / WhatsApp become icon buttons (names stay in the tooltip) so the data columns get the room ===== */
@media(min-width:1024px) and (max-width:1559px){
  html body main .list .lead.lx.lx.lx>.lx-head>.lx-acts .btn.call,html body main .list .lead.lx.lx.lx>.lx-head>.lx-acts .btn.wa{width:30px;min-width:30px;padding:0}
  html body main .list .lead.lx.lx.lx>.lx-head>.lx-acts .btn.call .lx-bl,html body main .list .lead.lx.lx.lx>.lx-head>.lx-acts .btn.wa .lx-bl{display:none}
}

/* ===== laptops (1024-1279px): status + assignment share one column, everything else on one line ===== */
@media(min-width:1024px) and (max-width:1279px){
  html body main .list .lead.lx.lx.lx>.lx-head{grid-template-columns:34px minmax(140px,1fr) minmax(235px,1.5fr) minmax(190px,1.4fr) auto 22px;grid-template-rows:auto auto;column-gap:10px;padding:6px 8px 6px 10px}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-av,html body main .list .lead.lx.lx.lx>.lx-head .l2,html body main .list .lead.lx.lx.lx>.lx-head>.lx-acts,html body main .list .lead.lx.lx.lx>.lx-head>.lx-chev{grid-row:1/3;align-self:center}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-top{grid-column:2;grid-row:1;flex-wrap:nowrap}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-name{min-width:0}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-sub{grid-column:2;grid-row:2;align-self:start}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-sub>span:nth-child(3){display:none}
  html body main .list .lead.lx.lx.lx>.lx-head .l2{grid-column:3;grid-template-columns:minmax(64px,.8fr) minmax(62px,.8fr) minmax(0,1.4fr) minmax(82px,.9fr);gap:0 8px;padding-inline-start:10px}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-st{grid-column:4;grid-row:1;align-self:end;flex-direction:row;flex-wrap:wrap;gap:3px 4px;padding:0 0 0 10px}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-st::before,html body main .list .lead.lx.lx.lx>.lx-head .lx-ow::before{display:none}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-st1,html body main .list .lead.lx.lx.lx>.lx-head .lx-st2{display:contents}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-ow{grid-column:4;grid-row:2;align-self:start;flex-direction:row;flex-wrap:nowrap;gap:0 8px;padding:2px 0 0 10px;border-inline-start:1px solid var(--c-n100)}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-ow1{flex:none}
  html body main .list .lead.lx.lx.lx>.lx-head .lx-ow .lx-mt{gap:0 6px;flex-wrap:nowrap}
  html body main .list .lead.lx.lx.lx>.lx-head>.lx-acts{grid-column:5}
  html body main .list .lead.lx.lx.lx>.lx-head>.lx-chev{grid-column:6}
}

@media(min-width:1024px) and (prefers-reduced-motion:reduce){
  html body main .list .lead.lx.lx.lx{transition:none}
}

/* L91 — Leads toolbar: no gap above it, slightly lower bar, bigger filter icon + label */
html body main:has(.lf-top){padding-top:0}
@media(max-width:899px){
  html body .lf-top>#q{height:42px;min-height:42px}
}
@media(min-width:900px){
  html body main .lf-top.lf-dk{padding:7px 12px;margin-bottom:var(--sp-3)}
  html body main .lf-top.lf-dk>#q,html body main .lf-top.lf-dk .lf-sl,html body main .lf-top.lf-dk .lf-mo,html body main .lf-top.lf-dk>.lf-fb{height:38px;min-height:38px}
  html body main .lf-top.lf-dk>.lf-fb{gap:8px;padding:0 var(--sp-4) 0 var(--sp-3);font-size:var(--fs-md);font-weight:700}
  html body main .lf-top.lf-dk>.lf-fb .li{width:24px;height:24px;flex:none}
}