/* Vetly loaders (shared by site + app). Transform/opacity only · ease-out (.23,1,.32,1) · loops 1.2–1.6s ·
   300ms show-delay · prefers-reduced-motion → static fallback. Showcase: /loaders.html */
:root{--ld-ease:cubic-bezier(.23,1,.32,1);--ld-pink:#ff48b0;--ld-teal:#00787f;--ld-ink:#1e1b2e;--ld-cream:#e8dfcb;--ld-cream-hi:rgba(255,251,240,.85)}
html.dark{--ld-teal:#2fb3ab;--ld-ink:#efeae0;--ld-cream:#2a2633;--ld-cream-hi:rgba(255,248,235,.08)}
/* show-delay: everything with .ld-delay fades in only after 300ms (fast work never flashes a loader) */
.ld-delay{opacity:0;animation:ld-in 200ms var(--ld-ease) 300ms forwards}
@keyframes ld-in{to{opacity:1}}

/* 1 · page / full loader: Bell's handset ringing, curly cord bouncing, 3 ring arcs pulsing out */
.ld-ring{--s:72px;position:relative;width:var(--s);height:var(--s);display:inline-block;color:var(--ld-ink)}
.ld-ring svg{position:absolute;overflow:visible}
.ld-ring .hs{inset:6% 20% 20% 6%;width:74%;height:74%;transform-origin:42% 58%;animation:ld-wiggle 1.4s var(--ld-ease) infinite}
.ld-ring .cord{left:22%;bottom:-6%;width:34%;height:26%;transform-origin:50% 0;animation:ld-cord 1.4s var(--ld-ease) infinite}
.ld-ring .arcs{right:-18%;top:-16%;width:56%;height:56%}
.ld-ring .arcs path{fill:none;stroke-width:6;stroke-linecap:round;transform-origin:6px 54px;opacity:0;animation:ld-arc 1.4s var(--ld-ease) infinite}
.ld-ring .arcs path:nth-child(1){stroke:var(--ld-pink)}
.ld-ring .arcs path:nth-child(2){stroke:var(--ld-teal);animation-delay:.14s}
.ld-ring .arcs path:nth-child(3){stroke:var(--ld-pink);animation-delay:.28s}
@keyframes ld-wiggle{0%,46%,100%{transform:rotate(0)}6%{transform:rotate(-9deg)}12%{transform:rotate(8deg)}18%{transform:rotate(-7deg)}24%{transform:rotate(6deg)}30%{transform:rotate(-3deg)}36%{transform:rotate(1deg)}}
@keyframes ld-cord{0%,46%,100%{transform:translateY(0) scaleY(1)}10%{transform:translateY(2px) scaleY(.82)}22%{transform:translateY(-1px) scaleY(1.1)}34%{transform:translateY(1px) scaleY(.94)}}
@keyframes ld-arc{0%{opacity:0;transform:scale(.7)}20%{opacity:1;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.08)}}
.ld-page{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:color-mix(in srgb,var(--stock,#f3eee2) 86%,transparent)}
.ld-page>div{display:grid;justify-items:center;gap:16px;text-align:center}
.ld-page b{font:700 20px/24px var(--f-disp,'Fraunces',serif);font-variation-settings:'SOFT' 100}.ld-page small{font:400 13px/20px var(--f-ui,'Work Sans',sans-serif);color:var(--mut,#5f596a)}
.ld-panel{display:flex;align-items:center;gap:16px;padding:16px}
.ld-panel .ld-ring{--s:40px}
.ld-panel b{display:block;font-weight:600}.ld-panel small{display:block;color:var(--mut);font-size:12px;line-height:16px}

/* 2 · inline button loader: icon → tiny ringing handset or 3 dots in currentColor, label → “Approving…”, width fixed */
.ld-btn-ic{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none}
.ld-mini{width:15px;height:15px;transform-origin:45% 60%;animation:ld-wiggle 1.2s var(--ld-ease) infinite}
.ld-dots{display:inline-flex;gap:3px;align-items:center;height:16px}.ld-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:ld-dot 1.2s var(--ld-ease) infinite}
.ld-dots i:nth-child(2){animation-delay:.15s}.ld-dots i:nth-child(3){animation-delay:.3s}
@keyframes ld-dot{0%,60%,100%{transform:translateY(0);opacity:.45}25%{transform:translateY(-3px);opacity:1}}
[data-loading].is-loading{pointer-events:none;cursor:progress}
[data-loading] .ld-lab{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-loading].is-loading>svg,[data-loading].is-loading>kbd{display:none}

/* 3 · skeleton: warm cream shimmer with paper grain (never grey) */
.sk{position:relative;overflow:hidden;border-radius:6px;height:12px;background:var(--ld-cream);animation:none!important;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .22 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0,var(--ld-cream-hi) 50%,transparent 100%);transform:translateX(-100%);animation:ld-shim 1.5s var(--ld-ease) infinite}
@keyframes ld-shim{to{transform:translateX(100%)}}
[data-state-view="skeleton"]{animation:ld-in 200ms var(--ld-ease) 300ms both}

/* 4 · “Finding replacements”: switchboard lamps lighting in sequence */
.ld-board{display:flex;align-items:center;gap:16px;padding:12px 16px;border-radius:12px;background:var(--card,#fbf8f0);box-shadow:0 0 0 1px var(--rule,rgba(30,27,46,.12))}
.ld-lamps{display:grid;grid-template-columns:repeat(6,12px);grid-template-rows:12px 12px;gap:6px;padding:8px;border-radius:8px;background:var(--ld-ink)}
.ld-lamps i{border-radius:50%;background:#3a3647;position:relative}
.ld-lamps i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ld-pink);opacity:0;animation:ld-lamp 1.6s var(--ld-ease) infinite}
.ld-lamps i:nth-child(even)::after{background:#8de0d6}
.ld-lamps i:nth-child(1)::after{animation-delay:0s}.ld-lamps i:nth-child(2)::after{animation-delay:.13s}.ld-lamps i:nth-child(3)::after{animation-delay:.26s}.ld-lamps i:nth-child(4)::after{animation-delay:.4s}
.ld-lamps i:nth-child(5)::after{animation-delay:.53s}.ld-lamps i:nth-child(6)::after{animation-delay:.66s}.ld-lamps i:nth-child(12)::after{animation-delay:.8s}.ld-lamps i:nth-child(11)::after{animation-delay:.93s}
.ld-lamps i:nth-child(10)::after{animation-delay:1.06s}.ld-lamps i:nth-child(9)::after{animation-delay:1.2s}.ld-lamps i:nth-child(8)::after{animation-delay:1.33s}.ld-lamps i:nth-child(7)::after{animation-delay:1.46s}
@keyframes ld-lamp{0%{opacity:0}8%{opacity:1}40%,100%{opacity:0}}
.ld-board b{display:block;font-weight:600}.ld-board small{display:block;color:var(--mut);font-size:12px;line-height:16px;font-variant-numeric:tabular-nums}

/* 5 · upload / import progress with an inked stamp at completion */
.ld-up{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center;padding:16px;border-radius:12px;background:var(--card,#fbf8f0);box-shadow:0 0 0 1px var(--rule,rgba(30,27,46,.12));position:relative}
.ld-up .meta{font-size:12px;line-height:16px;color:var(--mut);font-variant-numeric:tabular-nums}
.ld-up .track{grid-column:1/-1;height:8px;border-radius:4px;background:var(--rule2,rgba(30,27,46,.22));overflow:hidden}
.ld-up .fill{height:100%;border-radius:4px;background:var(--ld-teal);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform 400ms var(--ld-ease)}
.ld-up .ld-stamp{position:absolute;right:24px;top:-18px;width:88px;opacity:0;transform:rotate(-10deg) scale(1.25);pointer-events:none;transition:opacity 260ms var(--ld-ease),transform 260ms var(--ld-ease)}
.ld-up.done .ld-stamp{opacity:1;transform:rotate(-10deg) scale(1)}.ld-up.done [data-upload-start]{opacity:0}.ld-up.done .fill{background:var(--ld-teal)}
.ld-up .ld-stamp svg,.ld-up .ld-stamp .stk-slot{width:100%;height:auto;display:block}

@media (prefers-reduced-motion:reduce){
 .ld-ring .hs,.ld-ring .cord,.ld-mini,.ld-dots i,.sk::after,.ld-lamps i::after{animation:none!important}
 .ld-ring .arcs path{animation:none!important;opacity:1;transform:none}
 .ld-ring .arcs path:nth-child(3){opacity:.5}
 .ld-dots i{opacity:.7}.ld-lamps i:nth-child(-n+4)::after{opacity:1}
 .ld-delay,[data-state-view="skeleton"]{animation:none;opacity:1}
 .ld-up .fill,.ld-up .ld-stamp{transition:none}
}
.shotmode .ld-delay,.shotmode [data-state-view="skeleton"]{animation:none;opacity:1}
.shotmode .ld-ring .arcs path{animation:none!important;opacity:1;transform:none}.shotmode .ld-ring .arcs path:nth-child(3){opacity:.5}