/* Manage Vendor Lifecycle — live validations spider laid over the vendor-page screenshot. */
.sp{position:absolute;left:22.917%;top:18.485%;width:20.833%;height:32.462%;z-index:2}
.sp-svg{display:block;width:100%;height:100%;overflow:visible;font-family:'Manrope',-apple-system,sans-serif}
.sp-ring{transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1)}

/* the coverage shape and badge only appear once validations have synced */
.sp-wedge{opacity:0;transform:scale(.2);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.sp.synced .sp-wedge{opacity:1;transform:none}
.sp-badge{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.sp.synced .sp-badge{animation:spBadge .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes spBadge{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
.sp-halo{opacity:0;transform-box:fill-box;transform-origin:center}
.sp.synced .sp-halo{animation:spHalo 1.1s ease-out}
@keyframes spHalo{0%{opacity:.8;transform:scale(.9)}100%{opacity:0;transform:scale(2.1)}}

/* validation dots: neutral until synced, then teal for the ones that passed */
.sp-dot-ring{stroke:#C7CCDA;stroke-width:1.8;transition:stroke .4s ease}
.sp-dot{fill:#7486B0;transition:fill .4s ease}
.sp-label{font-size:11px;fill:#6E7DAD;transition:fill .3s ease,font-weight .2s}
.sp-node.is-ok.synced .sp-dot-ring{stroke:#7FF0D6}
.sp-node.is-ok.synced .sp-dot{fill:#15E5BD}
.sp-node.is-ok.synced .sp-label{fill:#1B2736}
.sp-ping{transform-box:fill-box;transform-origin:center}
.sp-ping.go{animation:spPing .9s ease-out}
@keyframes spPing{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(3)}}
.sp-node.is-ok.synced .sp-ping{stroke:#15E5BD}
.sp-node:not(.is-ok) .sp-ping{stroke:#8E9BE8}

/* every validation reads as clickable */
.sp-node{cursor:pointer;outline:none;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.sp-node:hover,.sp-node:focus-visible,.sp-node.is-active{transform:scale(1.18)}
.sp-node:hover .sp-label,.sp-node:focus-visible .sp-label,.sp-node.is-active .sp-label{fill:#1B2736;font-weight:600}
.sp-node:hover .sp-dot-ring,.sp-node:focus-visible .sp-dot-ring,.sp-node.is-active .sp-dot-ring{stroke:#2D8DE7}
.sp-node.is-ok.synced:hover .sp-dot-ring,.sp-node.is-ok.synced.is-active .sp-dot-ring{stroke:#15E5BD}
.sp-node:focus-visible .sp-hitbox{stroke:#2D8DE7;stroke-width:1;rx:6}
/* idle: the passed validations keep a slow, quiet glow */
.sp.synced .sp-node.is-ok .sp-dot-ring{animation:spGlow 2.8s ease-in-out infinite}
@keyframes spGlow{0%,100%{stroke-width:1.8}50%{stroke-width:3.4}}

/* status card */
.sp-card{position:absolute;transform:translate(14px,-50%);background:#fff;border:1px solid #E8EBF2;border-radius:10px;padding:10px 12px;box-shadow:0 10px 28px rgba(10,2,6,.14);font-family:'Manrope',-apple-system,sans-serif;white-space:nowrap;z-index:5;animation:spCard .2s ease-out}
.sp-card.left{transform:translate(calc(-100% - 14px),-50%)}
.sp-card-name{font-size:12.5px;font-weight:700;color:#1B2736;margin-bottom:6px}
.sp-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:3px 9px 3px 5px;border-radius:3px;color:#1B2736}
.sp-pill i{font-style:normal;width:13px;height:13px;border-radius:50%;display:inline-grid;place-items:center;font-size:8px;color:#fff;font-weight:700}
.sp-pill.ok{background:#DBF0DF;border:1px solid #B7E0C0}.sp-pill.ok i{background:#4AB261}
.sp-pill.wait{background:#DBEEFF;border:1px solid #9CC8F3}.sp-pill.wait i{background:#2D8DE7;line-height:1}
@keyframes spCard{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion: reduce){
  .sp-wedge,.sp-ring,.sp-node{transition:none}
  .sp.synced .sp-badge,.sp.synced .sp-halo,.sp-ping.go,.sp.synced .sp-node.is-ok .sp-dot-ring{animation:none}
}