/* ============================================================
   NoCap Leads — shared components (lead cards, gauges, scan)
   Used by the landing inline demo and the membership app.
   ============================================================ */

/* ---- lead card ---- */
.lead{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;transition:border-color .25s,transform .25s,box-shadow .25s;cursor:pointer}
.lead:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:0 16px 40px -24px rgba(0,0,0,.7)}
.lead.sel{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset,var(--shadow-brand)}
.lead-main{min-width:0}
.lead-name{font-family:var(--font-display);font-weight:600;font-size:1.06rem;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.lead-meta{font-size:13px;color:var(--muted);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.lead-meta .sep{opacity:.4}
.lead-signals{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.03em;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:3px 7px;white-space:nowrap}
.lead-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}

/* verified tick */
.verified{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.05em;color:var(--verify)}
.verified svg{width:13px;height:13px}

/* sample (invented) data flags: load-bearing honesty, kept visible */
.sample-badge{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--warn);border:1px solid rgba(245,196,83,.4);background:rgba(245,196,83,.08);border-radius:6px;padding:2px 7px;text-transform:uppercase}
.sample-note{border:1px solid rgba(245,196,83,.35);border-left:3px solid var(--warn);background:rgba(245,196,83,.06);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--muted);line-height:1.55}
.sample-note b{color:var(--warn)}
.summary-sample{color:var(--warn)!important}

/* score gauge (radial) */
.gauge{--v:0;position:relative;width:56px;height:56px;flex:0 0 auto;border-radius:50%;
  background:conic-gradient(var(--gc,var(--brand)) calc(var(--v)*1%),rgba(160,140,224,.12) 0);
  display:grid;place-items:center}
.gauge::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--panel)}
.gauge .g-num{position:relative;z-index:1;font-family:var(--font-display);font-weight:700;font-size:16px}
.gauge.g-high{--gc:var(--verify)}
.gauge.g-med{--gc:var(--brand-hi)}
.gauge.g-low{--gc:var(--warn)}

/* compliance badge */
.cbadge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.04em;padding:4px 9px;border-radius:7px;border:1px solid}
.cbadge.clear{color:var(--verify);border-color:rgba(40,224,160,.34);background:rgba(40,224,160,.07)}
.cbadge.caution{color:var(--warn);border-color:rgba(245,196,83,.34);background:rgba(245,196,83,.07)}
.cbadge.manual{color:var(--brand-hi);border-color:rgba(167,139,250,.34);background:rgba(124,77,255,.07)}
.cbadge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---- scanning animation ---- */
.scan{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:22px;overflow:hidden}
.scan-stages{display:flex;flex-direction:column;gap:2px}
.scan-row{display:flex;align-items:center;gap:12px;padding:9px 4px;opacity:.35;transition:opacity .4s}
.scan-row.on{opacity:1}
.scan-row.done{opacity:.7}
.scan-ic{width:26px;height:26px;border-radius:8px;border:1px solid var(--line-2);display:grid;place-items:center;flex:0 0 auto;font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.scan-row.on .scan-ic{border-color:var(--brand);color:var(--brand-hi);box-shadow:0 0 0 4px rgba(124,77,255,.12)}
.scan-row.done .scan-ic{border-color:var(--verify);color:var(--verify)}
.scan-label{font-size:14px;flex:1}
.scan-label b{font-family:var(--font-display);font-weight:600}
.scan-label span{color:var(--faint);font-family:var(--font-mono);font-size:11.5px;margin-left:8px}
.scan-bar{height:2px;border-radius:2px;background:var(--line);position:relative;overflow:hidden;margin-top:14px}
.scan-bar::after{content:"";position:absolute;inset:0;width:35%;background:var(--grad);border-radius:2px;animation:sweep 1.1s infinite ease-in-out}
@keyframes sweep{0%{left:-35%}100%{left:100%}}
@media(prefers-reduced-motion:reduce){
  .scan-bar::after{animation:none;width:100%}
  .scan-row{transition:none}
  .lead{transition:none}
}

/* keyboard focus for the interactive non-button elements */
.lead:focus-visible,.nav-item:focus-visible,.filt:focus-visible,.client-item:focus-visible,.ex-chip:focus-visible{outline:2px solid var(--brand-hi);outline-offset:2px;border-radius:10px}

/* ---- stat tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.tile .t-num{font-family:var(--font-display);font-weight:700;font-size:1.9rem;line-height:1}
.tile .t-num.v{color:var(--verify)}
.tile .t-lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:8px}
@media(max-width:720px){.tiles{grid-template-columns:1fr 1fr}}

/* ---- detail drawer ---- */
.drawer{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:18px}
.drawer h3{font-size:1.3rem}
.drawer .d-row{display:flex;justify-content:space-between;gap:14px;font-size:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.drawer .d-row .k{color:var(--faint);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.drawer .d-row .val{text-align:right;color:var(--ink)}
.draft-box{background:var(--void);border:1px solid var(--line);border-radius:12px;padding:16px;font-size:13.5px;line-height:1.6;white-space:pre-wrap;color:var(--muted);font-family:var(--font-mono);max-height:230px;overflow:auto}
.refs a{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--brand-hi);margin:2px 10px 2px 0}
.refs a:hover{text-decoration:underline}
.basis{font-size:13.5px;color:var(--muted);line-height:1.6;background:rgba(124,77,255,.05);border:1px solid var(--line);border-left:2px solid var(--brand);border-radius:8px;padding:12px 14px}

/* ---------- location typeahead + too-broad city chips ---------- */
.geo-sug{position:absolute;z-index:70;display:none;background:var(--panel);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 20px 48px -16px rgba(0,0,0,.85);max-height:264px;overflow-y:auto;overscroll-behavior:contain}
.geo-opt{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:10px 14px;font-size:13.5px;color:var(--muted);cursor:pointer}
.geo-opt .geo-name{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.geo-opt .geo-kind{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);white-space:nowrap;flex:0 0 auto}
.geo-opt.on{background:rgba(124,77,255,.14)}
.geo-opt.on .geo-name{color:var(--brand-hi)}
.geo-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;justify-content:center}
.geo-chip{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.03em;color:var(--brand-hi);background:rgba(124,77,255,.08);border:1px solid rgba(167,139,250,.34);border-radius:100px;padding:8px 15px;cursor:pointer;transition:border-color .2s,background .2s}
.geo-chip:hover{border-color:var(--brand-hi);background:rgba(124,77,255,.16)}
.geo-chip:focus-visible{outline:2px solid var(--brand-hi);outline-offset:2px}