/* L77 — Lead card on desktop (>=1024px): everything the phone card shows, in full, laid out in labelled columns.
   Client · Request (unit type, budget, area, move-in) · Status · Owner (assigned on, matches, feedback) · Actions (labelled).
   Phones and tablets keep their own layout (the new elements are hidden below 1024px). Tokens only. */
.lead.lx .rq-s,.lead.lx .lx-mt{display:none}
@media(min-width:1024px){
  html body .lead.lx>.lx-head{grid-template-columns:44px minmax(210px,1.1fr) minmax(280px,1.7fr) minmax(190px,1.05fr) minmax(170px,.95fr) 252px 28px;grid-template-rows:auto auto;column-gap:16px;row-gap:3px;align-items:stretch;padding:14px 10px 14px 16px}
  html body .lead.lx .lx-av{align-self:center;width:44px;height:44px;font-size:var(--fs-md)}

  /* client */
  html body .lead.lx .lx-top{grid-row:1;align-self:end;flex-wrap:wrap;gap:4px 8px}
  html body .lead.lx .lx-top .spec{display:none}
  html body .lead.lx .lx-top .lx-name{font-size:var(--fs-lg);line-height:1.25}
  html body .lead.lx .lx-sub{grid-row:2;flex-wrap:wrap;white-space:normal;gap:2px 0;font-size:var(--fs-sm);line-height:1.4;overflow:visible}
  html body .lead.lx .lx-sub>span{overflow:visible;text-overflow:clip;white-space:nowrap}
  html body .lead.lx .lx-sub>span:first-child{flex:0 0 100%}
  html body .lead.lx .lx-sub>span:nth-child(2)::before{content:none;margin:0}

  /* request: 2 x 2 labelled grid, nothing cut off (prefix is long on purpose: older rules place these cells explicitly) */
  html body .lead.lx>.lx-head .l2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:12px 20px;align-content:center;padding-inline-start:18px;white-space:normal}
  html body .lead.lx>.lx-head .l2>span{display:flex;flex-direction:column;align-items:flex-start;gap:3px;white-space:normal;overflow:visible;text-overflow:clip;min-width:0;order:0;font:600 var(--fs-md)/1.3 var(--font-body);color:var(--tx-strong)}
  html body .lead.lx>.lx-head .l2 .rq-s{grid-column:1;grid-row:1}
  html body .lead.lx>.lx-head .l2 .rq-b{grid-column:2;grid-row:1}
  html body .lead.lx>.lx-head .l2 .rq-a{grid-column:1;grid-row:2}
  html body .lead.lx>.lx-head .l2 .rq-m{grid-column:2;grid-row:2}
  html body .lead.lx>.lx-head .l2 .rq-a:only-of-type,html body .lead.lx>.lx-head .l2 .rq-b:only-child{grid-column:auto}
  html body .lead.lx>.lx-head .l2>span::before{display:block;margin:0;font:700 10.5px/1.2 var(--font-body);letter-spacing:.07em;text-transform:uppercase;color:var(--c-sand-dark)}
  html body .lead.lx>.lx-head .l2 .rq-s::before{content:"Unit type"}
  html body .lead.lx>.lx-head .l2 .rq-b::before{content:"Budget"}
  html body .lead.lx>.lx-head .l2 .rq-a::before{content:"Area"}
  html body .lead.lx>.lx-head .l2 .rq-m::before{content:"Move-in"}
  html body .lead.lx>.lx-head .l2 .rq-b{font:700 var(--fs-lg)/1.25 var(--font-body);color:var(--c-starlight)}
  html body .lead.lx>.lx-head .l2 .rq-b::after{display:none}
  html body .lead.lx>.lx-head .l2 .rq-b .x-f::after{content:" QAR";font:600 var(--fs-xs) var(--font-body);color:var(--tx-faint)}
  html body .lead.lx>.lx-head .l2 .rq-s b{padding:1px 10px;border-radius:var(--rd-pill);background:var(--c-starlight);color:var(--c-sand-light);font:700 var(--fs-sm)/1.5 var(--font-body)}
  html body .lead.lx>.lx-head .l2 .rq-s small{font:500 var(--fs-xs)/1.3 var(--font-body);color:var(--tx-muted)}
  html body .lead.lx>.lx-head .l2 .rq-m .x-f{color:var(--c-sand-dark)}

  /* status */
  html body .lead.lx .lx-st{grid-column:4;grid-row:1/3}
  html body .lead.lx .lx-ow{grid-column:5;grid-row:1/3}

  /* owner: who, assigned on, matches, feedback */
  html body .lead.lx .lx-mt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
  html body .lead.lx .lx-mt .mt-as{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);color:var(--tx-muted);white-space:nowrap}
  html body .lead.lx .lx-mt .mt-as .li{width:13px;height:13px}
  html body .lead.lx .lx-mc{flex:none;padding:2px 10px;border-radius:var(--rd-pill);font:700 var(--fs-xs)/1.5 var(--font-body);color:var(--tx-muted);background:var(--bg-tint);white-space:nowrap}
  html body .lead.lx .lx-mc[data-lv="0"]{color:var(--c-danger);background:var(--c-danger-soft)}
  html body .lead.lx .lx-mc[data-lv="l"]{color:var(--c-warning);background:var(--c-warning-soft)}
  html body .lead.lx .lx-mc[data-lv="m"]{color:var(--c-blue);background:var(--c-blue-soft)}
  html body .lead.lx .lx-mc[data-lv="h"]{color:var(--c-success);background:var(--c-success-soft)}
  html body .lead.lx .lx-fb{white-space:normal}

  /* actions: labelled, 2 x 2 */
  html body .lead.lx>.lx-head>.lx-acts{grid-column:6;grid-row:1/3;position:relative;display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:6px;padding:0;width:auto}
  html body .lead.lx>.lx-head>.lx-acts .btn,html body .lead.lx>.lx-head>.lx-acts .lx-assign{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;min-width:0;height:36px;min-height:36px;padding:0 8px;border-radius:var(--rd-sm);font:600 var(--fs-sm)/1 var(--font-body);white-space:nowrap}
  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:16px;height:16px;flex:none}
  html body .lead.lx .lx-acts .lx-bl,html body .lead.lx .lx-head .lx-assign span{display:inline;overflow:hidden;text-overflow:ellipsis}
  html body .lead.lx .lx-acts .lx-edit{display:inline-flex;border:1px solid var(--ln-strong);background:var(--bg-surface);color:var(--c-starlight)}
  html body .lead.lx .lx-acts .lx-edit:hover{border-color:var(--c-sand);background:rgba(var(--c-sand-rgb),.12)}
  html body .lead.lx .lx-acts:not(:has(.lx-assign)) .lx-edit{grid-column:1/-1}
  html body .lead.lx>.lx-head>.lx-acts .lv-out{position:absolute;top:-12px;inset-inline-end:-8px;z-index:2;width:26px;min-width:26px;max-width:26px;height:26px;min-height:26px;padding:0;flex:none;border-radius:50%;box-shadow:var(--sh-1)}
  html body .lead.lx>.lx-head>.lx-acts .lv-out .lx-bl{display:none}
  html body .lead.lx>.lx-head>.lx-acts .lv-out svg,html body .lead.lx>.lx-head>.lx-acts .lv-out .li{width:14px;height:14px}
  html body .lead.lx .lx-chev{align-self:center}
}
/* laptops: owner column drops under the status column so the card never gets cramped */
@media(min-width:1024px) and (max-width:1279px){
  html body .lead.lx>.lx-head{grid-template-columns:44px minmax(180px,1fr) minmax(250px,1.5fr) minmax(190px,1fr) 246px 26px;column-gap:12px}
  html body .lead.lx .lx-st{grid-column:4;grid-row:1}
  html body .lead.lx .lx-ow{grid-column:4;grid-row:2;border-inline-start:0;padding-top:6px}
  html body .lead.lx>.lx-head>.lx-acts{grid-column:5}
  html body .lead.lx .lx-chev{grid-column:6}
}
@media(min-width:1500px){
  html body .lead.lx>.lx-head{grid-template-columns:48px minmax(250px,1.1fr) minmax(340px,1.8fr) minmax(230px,1.1fr) minmax(200px,.95fr) 260px 30px;column-gap:24px}
}