/* L76 — Leads on desktop (>=900px): one-row toolbar + company-identity colours + guiding motion.
   Palette = tokens.css brand set only: starlight navy, sand, blue, ivory (+ semantic success / danger).
   Scoped to the Leads screen; phones are untouched. */
@media(min-width:900px){
  /* page: soft navy wash at the top so the toolbar sits on something, not on flat beige */
  html body main:has(.lf-top.lf-dk){background:linear-gradient(180deg,rgba(var(--c-starlight-rgb),.07) 0,rgba(var(--c-starlight-rgb),0) 260px)}

  /* ===== toolbar: count · search · agent · sort ········ months · filters ===== */
  html body main .lf-top.lf-dk{position:relative;z-index:20;display:flex;align-items:center;gap:var(--sp-3);flex-wrap:nowrap;margin:0 0 var(--sp-4);padding:10px 14px;border-radius:var(--rd-lg);
    background:linear-gradient(120deg,var(--c-starlight-dark) 0%,var(--c-starlight) 58%,#1f3d63 100%);box-shadow:var(--sh-2),inset 0 -3px 0 var(--c-sand)}
  html body main .lf-top.lf-dk::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;border-radius:0 0 var(--rd-lg) var(--rd-lg);background:linear-gradient(90deg,var(--c-sand-dark),var(--c-sand-light),var(--c-sand-dark));pointer-events:none}
  .lf-dk .lf-cnt{flex:none;display:flex;align-items:baseline;gap:6px;padding-inline-end:var(--sp-3);border-inline-end:1px solid rgba(255,255,255,.18);white-space:nowrap}
  .lf-dk .lf-cnt b{font:700 var(--fs-2xl,26px)/1 var(--font-head,inherit);color:var(--c-sand-light);font-variant-numeric:tabular-nums}
  .lf-dk .lf-cnt span{font-size:var(--fs-sm);color:rgba(255,255,255,.72)}
  .lf-dk .lf-sp{flex:1 1 0;min-width:0}

  /* search: shorter, grows when you click into it */
  html body main .lf-top.lf-dk>#q{flex:0 1 270px;min-width:170px;width:auto;height:42px;min-height:42px;padding:0 var(--sp-4) 0 42px;border:1px solid rgba(255,255,255,.24);border-radius:var(--rd-pill);color:var(--c-white);font-size:var(--fs-md);
    background:rgba(255,255,255,.10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3c08a' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") no-repeat 14px 50%/18px;
    transition:flex-basis var(--dur-slow) var(--ease),background-color var(--dur-md),border-color var(--dur-md),box-shadow var(--dur-md),color var(--dur-md)}
  [dir=rtl] html body main .lf-top.lf-dk>#q,html[dir=rtl] body main .lf-top.lf-dk>#q{padding:0 42px 0 var(--sp-4);background-position:calc(100% - 14px) 50%}
  html body main .lf-top.lf-dk>#q::placeholder{color:rgba(255,255,255,.62);opacity:1}
  html body main .lf-top.lf-dk>#q:focus{flex-basis:430px;outline:0;background-color:var(--c-white);color:var(--c-starlight);border-color:var(--c-sand);box-shadow:0 0 0 3px rgba(var(--c-sand-rgb),.45)}
  html body main .lf-top.lf-dk>#q:focus::placeholder{color:var(--c-n500)}

  /* agent + sort */
  html body main .lf-top.lf-dk .lf-sl{flex:none;width:auto;min-width:150px;max-width:230px;height:42px;min-height:42px;padding:0 34px 0 var(--sp-4);border:1px solid rgba(255,255,255,.24);border-radius:var(--rd-pill);color:var(--c-white);font:var(--fw-med,600) var(--fs-sm) var(--font-body);cursor:pointer;text-overflow:ellipsis;
    appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3c08a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/14px;transition:background-color var(--dur-md),border-color var(--dur-md)}
  [dir=rtl] html body main .lf-top.lf-dk .lf-sl,html[dir=rtl] body main .lf-top.lf-dk .lf-sl{padding:0 var(--sp-4) 0 34px;background-position:left 12px center}
  html body main .lf-top.lf-dk .lf-sl:hover{background-color:rgba(255,255,255,.18);border-color:var(--c-sand-light)}
  html body main .lf-top.lf-dk .lf-sl:focus-visible,.lf-dk .lf-fb:focus-visible,.lf-dk .lf-mo:focus-visible,.lf-dk .lf-clr:focus-visible{outline:3px solid rgba(var(--c-sand-rgb),.8);outline-offset:2px}
  html body main .lf-top.lf-dk .lf-sl option{color:var(--c-starlight);background:var(--c-white)}
  html body main .lf-top.lf-dk .lf-sl:has(option[value=""]:checked):not(#pv-sort){color:var(--c-sand-light)}
  .lf-dk .lf-clr{flex:none;height:34px;padding:0 var(--sp-3);border:1px dashed rgba(var(--c-sand-light-rgb),.7);border-radius:var(--rd-pill);background:transparent;color:var(--c-sand-light);font:600 var(--fs-xs) var(--font-body);cursor:pointer;transition:background var(--dur-md),color var(--dur-md)}
  .lf-dk .lf-clr:hover{background:var(--c-sand-light);color:var(--c-starlight)}

  /* months + filters */
  html body main .lf-top.lf-dk .lf-mo{height:42px;padding:0 var(--sp-3) 0 var(--sp-4);border:0;border-radius:var(--rd-pill);background:linear-gradient(180deg,var(--c-sand-light),var(--c-sand));color:var(--c-starlight);box-shadow:0 2px 8px rgba(0,0,0,.25);transition:transform var(--dur-fast),box-shadow var(--dur-md)}
  html body main .lf-top.lf-dk .lf-mo:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.3)}
  html body main .lf-top.lf-dk>.lf-fb{order:2;height:42px;min-height:42px;border:1px solid var(--c-sand-light);background:transparent;color:var(--c-white);transition:background var(--dur-md),color var(--dur-md),transform var(--dur-fast)}
  html body main .lf-top.lf-dk>.lf-fb:hover{background:rgba(var(--c-sand-light-rgb),.18);transform:translateY(-1px)}
  html body main .lf-top.lf-dk>.lf-fb.on,html body main .lf-top.lf-dk>.lf-fb[aria-expanded="true"]{background:var(--c-sand-light);border-color:var(--c-sand-light);color:var(--c-starlight)}
  html body main .lf-top.lf-dk .lf-mo-wrap{order:1}
  /* order: count · search (stretches) · agent · months · Filters · Priority */
  html body main .lf-top.lf-dk>.lf-cnt{order:0}
  html body main .lf-top.lf-dk>#q{order:1;flex:1 1 0;min-width:170px}
  html body main .lf-top.lf-dk>#q:focus{flex-basis:0}
  html body main .lf-top.lf-dk>.pv-ag,html body main .lf-top.lf-dk>.lf-clr{order:2}
  html body main .lf-top.lf-dk .lf-mo-wrap{order:3}
  html body main .lf-top.lf-dk>.lf-fb{order:4}
  html body main .lf-top.lf-dk>#pv-sort{order:5}
  html body main .lf-top.lf-dk>.lf-sp{display:none}

  /* ===== filters panel (also holds the old chip row) ===== */
  html body main .lf-panel{margin:calc(-1 * var(--sp-2)) 0 var(--sp-4);padding:var(--sp-4);border:1px solid var(--ln);border-top:3px solid var(--c-sand);border-radius:0 0 var(--rd-lg) var(--rd-lg);background:var(--bg-surface);box-shadow:var(--sh-2)}
  html body main .lf-panel:not([hidden]){animation:lfDrop var(--dur-md) var(--ease) both}
  .lf-quick{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin:0 0 var(--sp-3);padding-bottom:var(--sp-3);border-bottom:1px solid var(--ln)}
  .lf-quick>b{font:700 var(--fs-xs) var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--c-sand-dark)}
  .lf-quick .pv-chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);overflow:visible}
  .lf-quick .pv-chip{min-height:34px;padding:0 var(--sp-4);border:1px solid var(--ln-strong);border-radius:var(--rd-pill);background:var(--bg-surface);color:var(--tx-strong);font:600 var(--fs-sm) var(--font-body);cursor:pointer;transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),transform var(--dur-fast)}
  .lf-quick .pv-chip:hover{border-color:var(--c-sand);transform:translateY(-1px)}
  .lf-quick .pv-chip[aria-pressed="true"]{background:var(--c-starlight);border-color:var(--c-starlight);color:var(--c-sand-light)}
  .lf-quick .pv-chip.pv-x{background:var(--c-sand-light);border-color:var(--c-sand);color:var(--c-starlight)}
  .lf-quick #pv-src{flex:none;width:auto;max-width:240px;height:34px;min-width:150px;padding:0 var(--sp-3);border:1px solid var(--ln-strong);border-radius:var(--rd-pill);background:var(--bg-surface);color:var(--tx-strong);font:600 var(--fs-sm) var(--font-body)}

  /* ===== group headers: one colour per status, accent bar on the leading edge ===== */
  html body .list .lg{--g:var(--c-n600);--g-rgb:var(--c-n600-rgb);margin:0 0 12px}
  html body .list .lg-urgent{--g:var(--c-danger);--g-rgb:var(--c-danger-rgb)}
  html body .list .lg-none{--g:var(--c-sand-dark);--g-rgb:var(--c-sand-dark-rgb)}
  html body .list .lg-once{--g:var(--c-blue);--g-rgb:var(--c-blue-rgb)}
  html body .list .lg-twice{--g:var(--c-success);--g-rgb:var(--c-success-rgb)}
  html body .list .lg-unassigned{--g:var(--c-starlight);--g-rgb:var(--c-starlight-rgb)}
  html body .list .lg-h{position:relative;min-height:64px;padding:0 var(--sp-4);border:1px solid rgba(var(--g-rgb),.22);border-inline-start:6px solid var(--g);border-radius:var(--rd-md);
    background:linear-gradient(90deg,rgba(var(--g-rgb),.13),rgba(var(--g-rgb),.03) 38%,var(--bg-surface) 70%);box-shadow:var(--sh-1);
    transition:transform var(--dur-md) var(--ease),box-shadow var(--dur-md),border-color var(--dur-md)}
  html body .list .lg-h:hover{transform:translateX(4px);box-shadow:var(--sh-2);border-color:rgba(var(--g-rgb),.5)}
  [dir=rtl] html body .list .lg-h:hover{transform:translateX(-4px)}
  html body .list .lg-ic{width:40px;height:40px;background:var(--g);color:var(--c-white);box-shadow:0 3px 8px rgba(var(--g-rgb),.35)}
  html body .list .lg-ic svg{width:20px;height:20px}
  html body .list .lg-t b{font:700 var(--fs-lg) var(--font-body);color:var(--tx-strong)}
  html body .list .lg-t small{color:var(--tx-muted)}
  html body .list .lg-n{min-width:40px;padding:4px 12px;background:var(--g);color:var(--c-white);font-weight:700;font-size:var(--fs-md);font-variant-numeric:tabular-nums}
  html body .list .lg.open>.lg-h{border-color:rgba(var(--g-rgb),.55);box-shadow:var(--sh-2)}
  /* guiding pulse: only the groups that need someone to act right now */
  html body .list .lg-hot .lg-n{animation:lfPulse 2.4s ease-out infinite}

  /* ===== lead rows ===== */
  html body .list .lead.lx{--sc:var(--c-n300);border:1px solid var(--ln);border-inline-start:5px solid var(--sc);border-radius:var(--rd-md);background:var(--bg-surface);box-shadow:var(--sh-1);
    transition:transform var(--dur-md) var(--ease),box-shadow var(--dur-md),border-color var(--dur-md),background var(--dur-md)}
  html body .list .lead.lx.st-none{--sc:var(--c-danger)}
  html body .list .lead.lx.st-once{--sc:var(--c-sand-dark)}
  html body .list .lead.lx.st-twice{--sc:var(--c-success)}
  html body .list .lead.lx.st-unassigned{--sc:var(--c-blue)}
  html body .list .lead.lx:hover{transform:translateX(3px);border-color:rgba(var(--c-sand-rgb),.7);border-inline-start-color:var(--sc);background:linear-gradient(90deg,rgba(var(--c-sand-rgb),.08),var(--bg-surface) 45%);box-shadow:var(--sh-2)}
  [dir=rtl] html body .list .lead.lx:hover{transform:translateX(-3px)}
  html body .list .lead.lx .lx-av{background:linear-gradient(135deg,var(--c-starlight),#27507f);color:var(--c-sand-light);border:2px solid var(--c-sand);font-weight:700}
  html body .list .lead.lx .lx-assign{background:linear-gradient(180deg,var(--c-sand-light),var(--c-sand));border-color:var(--c-sand-dark);color:var(--c-starlight)}

  /* ===== guiding entrance (runs once when the screen opens, never on every keystroke) ===== */
  .lf-top.lf-enter>*{animation:lfSlide .42s var(--ease) both}
  .lf-top.lf-enter>*:nth-child(2){animation-delay:.05s}.lf-top.lf-enter>*:nth-child(3){animation-delay:.10s}.lf-top.lf-enter>*:nth-child(4){animation-delay:.15s}
  .lf-top.lf-enter>*:nth-child(5){animation-delay:.20s}.lf-top.lf-enter>*:nth-child(n+6){animation-delay:.25s}
  .list.lf-enter .lg{animation:lfRise .45s var(--ease) both}
  .list.lf-enter .lg:nth-of-type(2),.list.lf-enter .pv-i:nth-child(3){animation-delay:.08s}
  .list.lf-enter .lg:nth-of-type(3),.list.lf-enter .pv-i:nth-child(4){animation-delay:.16s}
  .list.lf-enter .lg:nth-of-type(n+4){animation-delay:.24s}
  .list.lf-enter .pv-i:nth-child(2){animation-delay:.02s}
  .list.lf-enter .pv-i{animation:lfRise .45s var(--ease) both}
  @keyframes lfSlide{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
  @keyframes lfRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes lfDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  @keyframes lfPulse{0%{box-shadow:0 0 0 0 rgba(var(--g-rgb),.55)}70%{box-shadow:0 0 0 10px rgba(var(--g-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--g-rgb),0)}}
}
@media(prefers-reduced-motion:reduce){
  .lf-top.lf-enter>*,.list.lf-enter .lg,.list.lf-enter .pv-i,html body main .lf-panel:not([hidden]),html body .list .lg-hot .lg-n{animation:none!important}
  html body .list .lg-h:hover,html body .list .lead.lx:hover,html body main .lf-top.lf-dk .lf-mo:hover,html body main .lf-top.lf-dk>.lf-fb:hover{transform:none}
}
body.motion-reduced .lf-top.lf-enter>*,body.motion-reduced .list.lf-enter .lg,body.motion-reduced .list.lf-enter .pv-i,body.motion-reduced .lf-panel:not([hidden]),body.motion-reduced .list .lg-hot .lg-n{animation:none!important}
/* months popup: "Select all" on top, selection applies by itself */
html body main .lf-mo-pop .mo-all{display:flex;align-items:center;justify-content:center;width:100%;min-height:36px;margin:0 0 var(--sp-2);border:1px solid var(--ln);border-radius:10px;background:var(--bg-sunken,#f4f1ea);color:var(--tx-strong);font:var(--fw-bold,700) var(--fs-sm) var(--font-body,inherit);cursor:pointer;position:sticky;top:0;z-index:1}
html body main .lf-mo-pop .mo-all:hover{border-color:var(--c-sand)}
html body main .lf-mo-pop .mo-all.on{background:var(--c-sand-light);border-color:var(--c-sand);color:var(--c-starlight)}