/* The agent dashboard's My Leads tab, on top of dashboard.css (the shell: tabs, banner, header chips, phone page).
   Settled on the My Leads design board (design 3, the split; rounds 1-4, 2026-10-22). */

/* ---------- buttons ---------- */
.btn1,.btn2,.exp,.lnk,.seen{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font:700 13px/1 var(--tiny);text-transform:uppercase}
.btn1 canvas,.btn2 canvas,.exp canvas,.lnk canvas,.call1 canvas{width:20px;height:20px}
.btn1{padding:10px 14px;background:var(--pink);color:#fff;text-shadow:2px 2px 0 var(--plum);box-shadow:0 0 0 3px var(--plum),0 5px 0 3px var(--plum)}
.btn1:hover{filter:brightness(1.08)}
.btn1:disabled{cursor:default;filter:grayscale(1) opacity(.55)}
.btn2{padding:9px 12px;background:#fff;color:var(--teal-dark);box-shadow:0 0 0 3px var(--teal-dark),0 4px 0 3px var(--teal-dark)}
.btn2:hover{background:#fff6c8}
.exp{flex:none;padding:8px 11px;background:var(--teal);color:var(--coin);box-shadow:0 0 0 3px var(--teal-dark),0 4px 0 3px var(--teal-dark)}
.lnk{margin-top:10px;color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.lnks{display:flex;flex-wrap:wrap;gap:0 20px}
.call1.off{cursor:not-allowed;background:#f3d6d3;color:#8f1d16;box-shadow:0 0 0 3px #8f1d16}
.x{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;width:32px;height:32px;font:400 13px/1 var(--ps);background:#fff;color:var(--teal-dark);box-shadow:0 0 0 3px var(--teal-dark)}
:is(.btn1,.btn2,.exp,.lnk,.seen,.x,.vt,.li,.rsn,.tick,.term):focus-visible{outline:3px dashed var(--pink);outline-offset:4px}
.tag.dnct{background:var(--red);color:#fff;box-shadow:2px 2px 0 #8f1d16}
.tag.st{background:#fff;color:var(--teal-dark);box-shadow:0 0 0 2px var(--teal)}
.law{display:inline-block;padding:4px 6px 3px;font:400 8px/1.25 var(--ps);text-transform:uppercase;color:#fff;background:#4a2a8f;transform:rotate(-3deg);box-shadow:2px 2px 0 #241452}
.opt{padding:3px 5px 2px;font:400 8px/1.25 var(--ps);text-transform:uppercase;background:#eee4cc;color:var(--muted)}

/* ---------- the Do not contact banner: one action, then a line that stays ---------- */
.dnc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;margin:0 0 22px;padding:14px 18px;background:#ffe9e6;
  box-shadow:0 -4px 0 0 #8f1d16,0 4px 0 0 #8f1d16,-4px 0 0 0 #8f1d16,4px 0 0 0 #8f1d16,6px 9px 0 0 rgba(143,29,22,.25)}
.dnc canvas{width:48px;height:48px}
.dnc .dh{display:block;font:700 21px/1.15 var(--pxf);color:#8f1d16}
.dnc p{margin-top:4px;font:600 15px/1.4 var(--pxf);color:#4a1410}
.dnc p b{color:#8f1d16}
.seen{padding:12px 16px;background:#8f1d16;color:#fff;box-shadow:0 0 0 3px #4a1410,0 5px 0 3px #4a1410}
.seen:hover{background:#b3261e}
.dncseen{display:flex;align-items:center;gap:10px;margin:0 0 22px;padding:9px 14px;background:#fbf0ee;font:600 14px/1.3 var(--pxf);color:#5a2a26;box-shadow:0 0 0 3px #d9a19b}
.dncseen canvas{width:24px;height:24px}

/* ---------- the split: the list on the left, one person on the right ---------- */
.split{display:grid;grid-template-columns:380px minmax(0,1fr);background:var(--paper);min-height:640px}
.lcol{padding:14px;border-right:3px solid var(--teal-dark);background:#f6ecd6;min-width:0}
.views{display:grid;grid-template-columns:repeat(4,auto);gap:8px;margin:0 0 12px}
.vt{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 6px;font:400 8px/1.38 var(--ps);text-transform:uppercase;color:var(--teal-dark);background:#fff;box-shadow:0 0 0 3px var(--teal-dark)}
.vt b{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 3px;font:400 9px/1 var(--ps);background:#e6dcc4;color:var(--teal-dark)}
.vt[aria-pressed="true"]{background:var(--coin);box-shadow:0 0 0 3px #6b3f00,0 5px 0 3px #6b3f00}
.vt[aria-pressed="true"] b{background:#fff6c8}
.lsrch{display:flex;gap:10px;margin:0 0 14px}
.srch{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:6px 10px;background:#fff;box-shadow:0 0 0 3px #cdbf9e}
.srch:focus-within{box-shadow:0 0 0 3px var(--teal-dark)}
.srch canvas{flex:none;width:20px;height:20px}
.srch input{all:unset;flex:1;min-width:0;font:600 14px/1.4 var(--pxf);color:var(--text)}
.srch input::placeholder{color:#8a8268}
.litems{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.li{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:7px;min-width:0;overflow:hidden;padding:10px 12px;background:#fff;box-shadow:0 0 0 3px #d9c9a4}
.li:hover{box-shadow:0 0 0 3px var(--teal-2)}
.li.on{background:#fff6c8;box-shadow:0 0 0 3px var(--teal-dark),5px 0 0 3px var(--coin)}
.li.dncl{background:#fff3f1;box-shadow:0 0 0 3px #e8908a,inset 6px 0 0 var(--red)}
.li.dncl.on{box-shadow:0 0 0 3px #8f1d16,inset 6px 0 0 var(--red)}
.lin{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.lin b{font:700 18px/1.15 var(--pxf);color:var(--teal-dark)}
.lin small{font:400 8px/1.38 var(--ps);text-transform:uppercase;color:var(--muted);white-space:nowrap}
.lit{display:flex;flex-wrap:wrap;gap:6px}
.lis{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:8px}
.lis .ci{font-size:12px;padding:4px 6px 3px;white-space:normal;min-width:0}
.empty{padding:20px 4px;font:600 15px/1.4 var(--pxf);color:var(--muted)}

/* window blocks, check-in and return chips */
.wb{display:inline-flex;align-items:center;flex:none;gap:8px;white-space:nowrap}
.wb .bar{display:flex;gap:2px;width:84px;height:14px;padding:2px;background:var(--line);box-shadow:0 0 0 2px var(--teal-dark)}
.wb .bar i{flex:1;background:var(--lime)}
.wb .bar i.e{background:transparent}
.wb b{font:400 11px/1 var(--ps);color:var(--teal-dark)}
.wb.end b{font:700 12px/1 var(--tiny);text-transform:uppercase;color:var(--muted)}
.ci,.rs{display:inline-flex;flex-direction:column;gap:2px;max-width:100%;padding:5px 8px 4px;font:700 13px/1.15 var(--pxf)}
.rs small{font:400 8px/1.38 var(--ps);text-transform:uppercase;opacity:.8}
.ci.ok{background:#e3f7e6;color:#0e5e28;box-shadow:0 0 0 2px #7fd08c}
.ci.warn{background:#fff3cc;color:#7a4b00;box-shadow:0 0 0 2px #e9a90f}
.ci.bad{background:#ffe3e0;color:#8f1d16;box-shadow:0 0 0 2px #e8908a}
.ci.none{background:#f3efe4;color:var(--muted);box-shadow:0 0 0 2px #d9c9a4}
.rs.ok{background:#ece3ff;color:#4a2a8f;box-shadow:0 0 0 2px #a58be0}
.rs.wait{background:#fff3cc;color:#7a4b00;box-shadow:0 0 0 2px #e9a90f}

/* ---------- the person ---------- */
.dcol{min-width:0;padding:18px 22px 22px}
.dcol h3{margin:0 0 10px;font:700 12px/1.2 var(--tiny);letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}
.dh3{display:flex;justify-content:space-between;gap:20px;padding:0 0 14px;margin:0 0 16px;border-bottom:3px dashed var(--line)}
.dh3>div:first-child{min-width:0}
.big{font:700 28px/1.15 var(--pxf);color:var(--teal-dark)}
.bt{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}
.cl{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px}
.pnum{font:400 15px/1.3 var(--ps);color:var(--teal-dark);white-space:nowrap}
.em{margin-top:8px;font:600 14px/1.3 var(--pxf);color:var(--muted);overflow-wrap:anywhere}
.wbox{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:none;align-self:flex-start;min-width:250px;padding:10px 12px;background:#fff;box-shadow:0 0 0 3px var(--teal-dark)}
.wbox small{font:400 8px/1.65 var(--ps);text-transform:uppercase;color:var(--muted)}
.snote{margin:0 0 14px;padding:9px 12px;font:600 14px/1.4 var(--pxf);color:#1f4a43;background:#e6f3ef;box-shadow:0 0 0 2px #9cc7bd}
.dcols{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:26px}
.tline{margin:0;padding:0;list-style:none}
.tline li{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;padding:0 0 12px}
.tline li::before{content:'';position:absolute;left:11px;top:26px;bottom:0;width:3px;background:var(--line)}
.tline li:last-child::before{display:none}
.tline canvas{width:24px;height:24px}
.tline b{display:block;font:600 15px/1.3 var(--pxf);color:var(--text)}
.tline small{font:400 8px/1.65 var(--ps);text-transform:uppercase;color:var(--muted)}
.tline li.ok b{color:#0e5e28}.tline li.warn b{color:#7a4b00}.tline li.bad b{color:#8f1d16}
.fa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px;margin:0}
.fa div{min-width:0}
.fa div:first-child{grid-column:span 2}
.fa dt{font:400 8px/1.5 var(--ps);text-transform:uppercase;color:var(--muted)}
.fa dd{margin:2px 0 0;font:600 16px/1.25 var(--pxf);color:var(--text)}
.dact{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:14px;padding-top:14px;border-top:3px dashed var(--line)}
.rwrap{margin-left:auto;display:inline-flex;align-items:center;flex-wrap:wrap;gap:12px}
.rmini{font:700 12px/1.2 var(--tiny);text-transform:uppercase;color:var(--muted)}

/* the check-in card: what it is, what they said, what it means for you */
.cib{margin:0 0 14px;padding:8px 11px;background:#fff;box-shadow:0 0 0 3px var(--teal-dark)}
.cibh{display:flex;align-items:flex-start;gap:8px;font:600 13px/1.35 var(--pxf);color:var(--text)}
.cibh canvas{flex:none;width:20px;height:20px}
.cibh b{flex:none;font:700 13px/20px var(--tiny);text-transform:uppercase;color:var(--teal-dark)}
.term{all:unset;cursor:pointer;font-weight:700;color:var(--teal);text-decoration:underline dotted 2px;text-underline-offset:3px}
.cibb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:10px;margin:7px 0 0}
.cibb>div{padding:6px 9px;background:#f6ecd6}
.cibb small{display:block;font:400 8px/1.62 var(--ps);text-transform:uppercase;color:var(--muted)}
.cibb small.cid{font:600 12px/1.3 var(--pxf);text-transform:none;color:var(--text)}
.cia{margin:2px 0;font:700 15px/1.25 var(--pxf);color:var(--teal-dark)}
.cie{margin:2px 0;font:700 12px/1.25 var(--tiny);text-transform:uppercase}
.cib:is(.ok,.up) .cie{color:#0e5e28}.cib.warn .cie{color:#9a5a00}.cib.bad .cie{color:#b3261e}.cib.none .cie{color:var(--muted)}
.cib:is(.ok,.up) .cibb>div:last-child{background:#e3f7e6}.cib.warn .cibb>div:last-child{background:#fff1d6}.cib.bad .cibb>div:last-child{background:#ffe9e6}
.cin{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:6px 0 0;font:700 12px/1.3 var(--pxf);color:#8f1d16}
.cin canvas{width:16px;height:16px}
/* the ban warning, inside a Do not contact lead */
.ban{display:flex;align-items:center;gap:16px;margin:0 0 18px;padding:18px 20px;background:#b3261e;color:#fff;box-shadow:0 0 0 4px #5c0f0a,0 6px 0 4px #5c0f0a}
.ban canvas{flex:none;width:48px;height:48px}
.ban b{display:block;font:400 22px/1.35 var(--ps)}
.ban p{margin-top:10px;font:600 15px/1.4 var(--pxf)}
.ban .law{margin-left:8px;background:#fff;color:#4a2a8f;box-shadow:2px 2px 0 #5c0f0a}

/* ---------- the return request ---------- */
.rhead{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 14px}
.rhead canvas{width:36px;height:36px}
.rhead h3{margin:0;font:700 22px/1.1 var(--pxf);letter-spacing:0;text-transform:none;color:var(--teal-dark)}
.rhead .x{margin-left:auto}
.steps{display:flex;gap:6px;margin:0 0 0 8px;padding:0;list-style:none}
.steps li{display:flex;align-items:center;gap:7px;padding:6px 10px 6px 6px;font:700 12px/1 var(--tiny);text-transform:uppercase;color:#8a8268;background:#f3efe4}
.steps li i{display:grid;place-items:center;width:20px;height:20px;font:400 10px/1 var(--ps);font-style:normal;background:var(--line);color:#8a8268}
.steps li.on{background:var(--coin);color:#3b2600}.steps li.on i{background:#fff;color:#3b2600}
.steps li.done{background:#e3f7e6;color:#0e5e28}.steps li.done i{background:var(--lime);color:#0e5e28}
.rgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px}
.rgrid.one{grid-template-columns:minmax(0,640px)}
.dl{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:10px 12px;background:#fff6c8;box-shadow:0 0 0 3px #8a5a00}
.dl canvas{width:21px;height:27px}
.dl span{font:700 15px/1.3 var(--pxf);color:#3b2600}
.dl b{display:block;margin-bottom:3px;font:400 15px/1 var(--ps);color:#6b3f00}
.dl small{display:block;margin-top:3px;font:400 8px/1.65 var(--ps);text-transform:uppercase;color:#8a5a00}
.rq{margin:0 0 12px;font:600 15px/1.45 var(--pxf)}
.reasons{display:grid;gap:8px}
.rsn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 12px;font:600 15px/1.3 var(--pxf);background:#fff;box-shadow:0 0 0 3px #d9c9a4}
.rsn i{flex:none;width:16px;height:16px;background:#fff;box-shadow:0 0 0 3px var(--teal-dark)}
.rsn:hover{box-shadow:0 0 0 3px var(--teal-2)}
.rsn[aria-checked="true"]{background:#fff6c8;box-shadow:0 0 0 3px var(--teal-dark)}
.rsn[aria-checked="true"] i{background:var(--teal);box-shadow:0 0 0 3px var(--teal-dark),inset 0 0 0 3px #fff}
.ract{display:flex;justify-content:flex-end;gap:14px;margin-top:16px}
.evs{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.evs li{display:grid;grid-template-columns:18px 24px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 12px;background:#fff;box-shadow:0 0 0 3px #d9c9a4}
.evs canvas{width:24px;height:24px}
.evs b{display:block;font:700 12px/1.2 var(--tiny);text-transform:uppercase;color:var(--teal-dark)}
.evs small{font:600 14px/1.35 var(--pxf);color:var(--text)}
.evs em{font:400 8px/1.25 var(--ps);font-style:normal;text-transform:uppercase;padding:3px 5px 2px;background:#e3f7e6;color:#0e5e28}
.tick{all:unset;box-sizing:border-box;cursor:pointer;width:18px;height:18px;background:#fff;box-shadow:0 0 0 2px var(--teal-dark)}
.tick[aria-checked="true"]{background:var(--teal);box-shadow:0 0 0 2px var(--teal-dark),inset 0 0 0 3px #fff}
.nl{display:flex;align-items:center;gap:6px;margin:14px 0 6px;font:700 12px/1.3 var(--tiny);text-transform:uppercase;color:var(--teal-dark)}
.nl b{padding:2px 4px 1px;font:400 8px/1 var(--ps);background:var(--teal);color:#fff}
.ta{box-sizing:border-box;display:block;width:100%;min-height:58px;padding:10px 12px;border:0;resize:vertical;font:600 15px/1.4 var(--pxf);color:var(--text);background:#fff;box-shadow:0 0 0 3px var(--teal-dark)}
.ta:focus{outline:3px dashed var(--pink);outline-offset:4px}
.why{min-height:1.4em;margin-top:10px;font:700 13px/1.4 var(--pxf);color:#8f1d16;text-align:right}
.shot{margin:12px 0 0;padding:10px 12px;background:#fff;box-shadow:0 0 0 3px #d9c9a4}
.shh{display:flex;align-items:center;gap:10px}
.shh canvas{width:24px;height:24px}
.shh b{font:700 12px/1.2 var(--tiny);text-transform:uppercase;color:var(--teal-dark)}
.shh .opt{margin-left:auto}
.shf{display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;margin:10px 0 0}
.thumb{display:flex;flex-direction:column;gap:6px;height:84px;padding:9px 7px;background:#1f2b2a;box-shadow:0 0 0 3px #0c1414}
.thumb i{display:block;height:5px;background:#7fd1c0}.thumb i:nth-child(2){width:70%}.thumb i:nth-child(3){width:85%;background:#e8908a}.thumb i:nth-child(4){width:55%}
.fn{font:700 12px/1.2 var(--tiny);color:var(--muted);overflow-wrap:anywhere}
.shot .nl{margin-top:6px}
.lnk.rm{margin-top:8px;font:400 8px/1 var(--ps);color:#8f1d16}
.shn{margin-top:6px;font:600 13px/1.35 var(--pxf);color:var(--muted)}
.sent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:14px;background:#e3f7e6;box-shadow:0 0 0 3px #7fd08c}
.sent canvas{width:48px;height:48px}
.sent>div>b{font:700 19px/1.2 var(--pxf);color:#0e5e28}
.sent p{margin-top:6px;font:600 15px/1.45 var(--pxf)}
.sent p.sm{font-size:13px;color:var(--muted)}
.rules{align-self:start;padding:14px 16px;background:#f7f2ff;box-shadow:0 0 0 3px #a58be0;font:600 14px/1.4 var(--pxf)}
.rh{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.rh canvas{width:24px;height:24px}
.rh b{font:700 15px/1 var(--tiny);text-transform:uppercase;color:#4a2a8f}
.rh .law{margin-left:auto}
.rp{margin:6px 0;font-size:13px;color:#4f4566}
.rt{display:block;margin:10px 0 4px;font:400 8px/1.65 var(--ps);text-transform:uppercase}
.rt.ok{color:#0e5e28}.rt.no{color:#8f1d16}
.rules ul{margin:0;padding-left:18px}
.rules li{margin:2px 0}

/* ---------- narrower desktops and laptops ---------- */
@media (max-width:1320px){.rgrid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1180px){
  .split{grid-template-columns:310px minmax(0,1fr)}
  .views{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dh3{flex-direction:column;gap:12px}
  .wbox{align-self:stretch;flex-direction:row;flex-wrap:wrap;align-items:center;min-width:0}
  .dcols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .split{grid-template-columns:minmax(0,1fr)}
  .views{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lcol{border-right:0;border-bottom:3px solid var(--teal-dark)}
  .dnc{grid-template-columns:auto minmax(0,1fr)}
  .dnc .seen{grid-column:1/-1;justify-content:center}
  .ban{flex-direction:column;align-items:flex-start;gap:10px}
  .ban b{font-size:16px;line-height:1.45}
  .cibb{grid-template-columns:minmax(0,1fr)}
  .fa{grid-template-columns:repeat(2,minmax(0,1fr))}
  .evs li{grid-template-columns:18px 24px minmax(0,1fr)}
  .evs em{display:none}
}