/* U14 — Leads list on phones (≤640px): readable cards. Full name, full requirements, wrapping chips, labelled action buttons on their own row. Tokens only.
   Desktop and tablet rows are untouched (.lx-bl labels are hidden above 640px). */
.lx .lx-bl{display:none}
.lx-startpill{display:inline-block;margin:0 0 var(--sp-1);padding:2px 10px;border-radius:var(--rd-pill);background:var(--c-sand);color:var(--c-starlight);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
@media(max-width:640px){
  /* ---- sticky count + chips bar: one tidy row, no oversized sort pill */
  .pv-top{gap:var(--sp-2)}
  .pv-count{flex:1 1 auto;min-width:0;white-space:nowrap}
  .pv-top #pv-sort{flex:0 1 11rem;min-width:0;max-width:55%;overflow:hidden;text-overflow:ellipsis}
  .pv-chip,.pv-bar select{min-height:40px}
  .lf-fb{min-height:44px;padding:0 var(--sp-3);display:inline-flex;align-items:center;gap:var(--sp-2);border:1px solid var(--ln-strong);border-radius:var(--rd-pill);background:var(--bg-surface);color:var(--tx-strong);font:var(--fw-med) var(--fs-sm) var(--font-body);cursor:pointer}
  .lf-fb.on{background:var(--c-starlight);border-color:var(--c-starlight);color:var(--c-white)}

  /* ---- card skeleton: avatar | content | chevron, then a full-width action row */
  html body .lead.lx>.lx-head{grid-template-columns:40px minmax(0,1fr) 32px;grid-template-rows:auto auto auto auto;column-gap:var(--sp-2);row-gap:var(--sp-2);padding:var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-3);align-items:start}
  html body .lead.lx .lx-av{grid-column:1;grid-row:1;width:40px;height:40px;font-size:var(--fs-sm)}
  html body .lead.lx .lx-top{grid-column:2;grid-row:1;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2)}
  html body .lead.lx .lx-chev{grid-column:3;grid-row:1;width:32px;height:32px;align-self:start}
  html body .lead.lx .l2{grid-column:2/-1;grid-row:2}
  html body .lead.lx .lx-meta{grid-column:1/-1;grid-row:3}
  html body .lead.lx>.lx-head>.lx-acts{grid-column:1/-1;grid-row:4}

  /* ---- name: full, wraps instead of being cut to "M…" */
  html body .lead.lx .x-s{display:none}
  html body .lead.lx .x-f{display:inline}
  html body .lead.lx .lx-top .lx-name{flex:1 1 9rem;min-width:0;overflow:visible;white-space:normal;overflow-wrap:anywhere;font-size:var(--fs-md);line-height:1.25;color:var(--tx-strong)}
  html body .lead.lx .lx-top .lx-ln{display:inline-block}
  html body .lead.lx .lx-top .spec{margin-left:0;font-size:var(--fs-sm);padding:2px 8px}

  /* ---- requirements: budget · area · move-in, wraps, easy to read */
  html body .lead.lx .l2{flex-wrap:wrap;gap:2px 0;white-space:normal;overflow:visible;font-size:var(--fs-sm);line-height:1.35;color:var(--tx-body)}
  html body .lead.lx .l2>span{white-space:normal;overflow:visible}
  html body .lead.lx .l2 .rq-b{font-weight:var(--fw-bold);color:var(--tx-strong)}
  html body .lead.lx .l2 .rq-b::after{content:" QAR";font-weight:var(--fw-med);font-size:var(--fs-xs);color:var(--tx-muted)}
  html body .lead.lx .l2>span::after{content:none;display:none}
  html body .lead.lx .l2>span+span::before{content:"·";margin-inline:var(--sp-2);color:var(--tx-muted)}
  html body .lead.lx .l2 .rq-m .x-s{display:inline}html body .lead.lx .l2 .rq-m .x-f{display:none}

  /* ---- chips: wrap onto as many lines as needed, never cut */
  html body .lead.lx .lx-meta{display:flex;flex-wrap:wrap;overflow:visible;gap:var(--sp-1) var(--sp-2);align-items:center}
  html body .lead.lx .lx-meta>*{flex:0 1 auto;min-width:0}
  html body .lead.lx .lx-meta .badge,html body .lead.lx .lx-meta .tag,html body .lead.lx .lx-meta .age,html body .lead.lx .lx-why,html body .lead.lx .lx-fb,html body .lead.lx .sla-chip{font-size:var(--fs-xs);padding:3px 10px;line-height:1.4;white-space:nowrap}
  html body .lead.lx .sla-chip small{display:none}
  html body .lead.lx .lx-fb{display:inline-flex;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  html body .lead.lx .lx-who{margin:0;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--tx-strong)}
  html body .lead.lx .lx-who::before{content:"Owner:";margin-inline-end:6px;font-weight:var(--fw-med);color:var(--tx-muted)}
  html body .lead.lx .lx-ow{display:contents}

  /* ---- actions: labelled, 44px, equal width, own row */
  html body .lead.lx>.lx-head>.lx-acts{display:flex;flex-wrap:nowrap;gap:var(--sp-2);width:100%;padding-top:var(--sp-2);border-top:1px solid var(--ln)}
  html body .lead.lx .lx-acts .btn,html body .lead.lx .lx-acts .lx-assign{flex:1 1 0;width:auto;min-width:0;height:44px;min-height:44px;padding:0 var(--sp-2);display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--rd-sm);font-size:var(--fs-sm);font-weight:var(--fw-med);text-decoration:none;box-shadow:none}
  html body .lead.lx .lx-acts .lx-bl,html body .lead.lx .lx-head .lx-assign span{display:inline;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html body .lead.lx .lx-head .lx-assign.re{flex:0 0 44px;padding:0}
  html body .lead.lx .lx-head .lx-assign.re span{display:none}
  html body .lead.lx .lx-head .lx-assign:not(.re){flex:1.2 1 0}
  html body .lead.lx .lx-acts .btn svg,html body .lead.lx .lx-acts .btn .li,html body .lead.lx .lx-acts .lx-assign svg,html body .lead.lx .lx-acts .lx-assign .li{width:18px;height:18px;flex:none}
  html body .lead.lx .lx-acts .btn.call.pulse{animation:none;outline:2px solid var(--c-sand);outline-offset:1px}
  html body .lead.lx .lx-acts .lv-out{display:inline-flex;opacity:1}
  html body .lead.lx .bulk-pick{display:none}
}
@media(max-width:640px){html body .lead.lx .lx-acts .btn.wa{flex:1.5 1 0}}