/* U17 — Leads list on phones (≤640px): the "labelled big buttons" card, with the wasted space removed.
   Line 1: avatar · full name · unit (select box + fold arrow top-right). Line 2: budget · area · move-in.
   Line 3: stage · age · urgency · owner. Line 4: full-width labelled buttons (Call · WhatsApp · Log; Assign/Reassign for managers).
   Last layer, after m-lead-mobile.css. Tablet and desktop untouched. Tokens only. Roll back: remove the m-lead-dense.css link. */
@media(max-width:640px){
  /* ---- skeleton: avatar | content, then the button row across the whole card */
  html body .lead.lx>.lx-head{position:relative;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto auto auto;column-gap:var(--sp-2);row-gap:var(--sp-1);padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-3);align-items:center}
  html body .lead.lx .lx-av{grid-column:1;grid-row:1/4;align-self:start;width:32px;height:32px;font-size:var(--fs-xs)}
  html body .lead.lx .lx-top{grid-column:2;grid-row:1;flex-wrap:nowrap;gap:var(--sp-2);min-width:0;align-items:center;min-height:22px;padding-inline-end:32px}
  html body .lead.lx .l2{grid-column:2;grid-row:2}
  html body .lead.lx .lx-meta{grid-column:2;grid-row:3}
  html body .lead.lx>.lx-head>.lx-acts{grid-column:1/-1;grid-row:4}
  html body .lead.lx .lx-chev{position:absolute;grid-area:auto;top:6px;inset-inline-end:var(--sp-1);width:30px;height:24px;margin:0}
  html body .lead.lx .bulk-pick{display:grid;place-items:center;position:absolute;grid-area:auto;top:7px;inset-inline-end:36px;width:22px;height:22px;margin:0;font-size:0;line-height:0}
  html body .lead.lx .bulk-pick::after{content:"";position:absolute;inset:-4px}
  html body .lead.lx .bulk-pick input{width:20px;height:20px;min-height:20px;min-width:0;margin:0}
  html body .lead.lx>.lx-head:has(.bulk-pick) .lx-top{padding-inline-end:62px}

  /* ---- line 1: one-line name (cut with …), language and unit chip stay visible */
  html body .lead.lx .lx-top .lx-name{display:block;flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--fs-md);line-height:1.25}
  html body .lead.lx .lx-top .lx-ln{display:inline-block;flex:none;font-size:var(--fs-xs);color:var(--tx-muted)}
  html body .lead.lx .lx-top .spec{flex:none;margin:0;padding:1px 7px;font-size:var(--fs-xs);line-height:1.4}

  /* ---- line 2: requirements on one line; the area gives way (…), budget and move-in always stay */
  html body .lead.lx .l2{display:flex;flex-wrap:nowrap;align-items:baseline;gap:0;overflow:hidden;white-space:nowrap;font-size:var(--fs-sm);line-height:1.3}
  html body .lead.lx .l2>span{flex:none;white-space:nowrap;overflow:visible}
  html body .lead.lx .l2>.rq-a{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  html body .lead.lx .l2>span+span::before{margin-inline:6px}

  /* ---- line 3: chips with their words; stage + age never cut, the urgency chip gives way first, then the owner */
  html body .lead.lx .lx-meta{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--sp-1);min-width:0;overflow:hidden}
  html body .lead.lx .lx-meta .badge,html body .lead.lx .lx-meta .tag,html body .lead.lx .lx-meta .age{flex:none;padding:2px 8px;font-size:var(--fs-xs);line-height:1.35;white-space:nowrap}
  html body .lead.lx .lx-meta .lx-why,html body .lead.lx .lx-meta .lx-fb,html body .lead.lx .lx-meta .sla-chip{flex:0 2 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 8px;font-size:var(--fs-xs);line-height:1.35}
  html body .lead.lx .lx-who{flex:0 10 auto;min-width:0;font-size:var(--fs-xs);font-weight:var(--fw-med);color:var(--tx-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html body .lead.lx .lx-who::before{content:none;margin:0}
  html body .lead.lx .lx-who.none{display:none}

  /* ---- line 4: the big labelled buttons, 36px high, full card width */
  html body .lead.lx>.lx-head>.lx-acts{display:flex;flex-wrap:nowrap;gap:6px;width:100%;padding:var(--sp-1) 0 0;border-top:0}
  html body .lead.lx>.lx-head>.lx-acts .btn,html body .lead.lx>.lx-head>.lx-acts .btn.wa,html body .lead.lx>.lx-head>.lx-acts .lx-assign:not(.re){flex:1 1 auto;width:auto;min-width:0;height:36px;min-height:36px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;gap:4px;border-radius:var(--rd-sm);font-size:var(--fs-sm);font-weight:var(--fw-med)}
  html body .lead.lx>.lx-head>.lx-acts .btn.call,html body .lead.lx>.lx-head>.lx-acts .btn.wa{flex-shrink:0}
  html body .lead.lx>.lx-head>.lx-acts .btn.wa{flex-grow:1.3}
  html body .lead.lx>.lx-head>.lx-acts .lx-assign:not(.re){flex-shrink:3}
  html body .lead.lx>.lx-head>.lx-acts .lx-assign.re{flex:0 0 36px;width:36px;min-width:36px;height:36px;min-height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--rd-sm)}
  html body .lead.lx>.lx-head>.lx-acts .lx-assign.re span{display:none}
  html body .lead.lx>.lx-head>.lx-acts .lx-bl,html body .lead.lx>.lx-head>.lx-acts .lx-assign:not(.re) span{display:inline;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html body .lead.lx>.lx-head>.lx-acts .btn svg,html body .lead.lx>.lx-head>.lx-acts .btn .li,html body .lead.lx>.lx-head>.lx-acts .lx-assign svg,html body .lead.lx>.lx-head>.lx-acts .lx-assign .li{width:18px;height:18px;flex:none}

  /* ---- list rhythm: tight gap; spacing inside the measured block so the scroll window stays exact */
  .pv-r{margin-top:0;padding-top:6px}
  html body .lead.lx .lx-startpill{margin:0 0 var(--sp-1) var(--sp-3)}

  /* ---- the "How this list works" tip: one slim strip, still dismissible */
  html body .coach{padding:6px 10px!important;margin:0 0 6px;gap:8px}
  html body .coach .coach-ic{display:none}
  html body .coach>div{display:block;font-size:var(--fs-xs);line-height:1.35}
  html body .coach>div b{display:inline;font-size:var(--fs-xs);margin-inline-end:6px}
  html body .coach>div span{display:inline}
  html body .coach .coach-x{padding:0 12px;min-height:34px;font-size:var(--fs-xs)}

  /* ---- box title ("Urgent · 80 leads · …"): one line */
  .lb-head{margin:2px 2px 4px;flex-wrap:nowrap}
  .lb-head b{flex:none}
  .lb-head span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:end}
}
/* very narrow phones (≤360): language label hidden, button words a little smaller */
@media(max-width:360px){
  html body .lead.lx .lx-top .lx-ln{display:none}
  html body .lead.lx>.lx-head>.lx-acts .btn,html body .lead.lx>.lx-head>.lx-acts .lx-assign:not(.re){font-size:var(--fs-xs);gap:4px;padding:0 var(--sp-1)}
}