/* Slide to confirm — the submit control for the demo and the careers forms.
   The rules are bencho.dev's own (bencho.dev/?c=slide-confirm), taken verbatim; the only change is
   their two variables mapped onto our tokens: --fill-slab is the slab the track is cut from,
   --fill-on is the ink the handle is made of. Day and night both come from that pair. */
.sld{box-sizing:border-box;font:inherit;color:var(--sld-on);align-self:flex-start;margin-top:4px;
     --sld-slab:var(--fill);--sld-on:var(--black);--sld-in:var(--white)}
.darkmode .sld{--sld-slab:var(--block);--sld-on:#F5F5F7;--sld-in:var(--black)}
/* the panel is --card by night, so the track is cut one step deeper — the same well the fields sit
   in — or it would vanish into the panel it is standing on */

.sld-track{box-sizing:border-box;background:var(--sld-slab);touch-action:none;user-select:none;-webkit-user-select:none;width:100%;height:100%;position:relative}
.sld-wash{background:var(--sld-on);z-index:1;pointer-events:none;position:absolute;top:4px;bottom:4px;left:4px}
.sld-say{letter-spacing:-.006em;color:var(--muted);pointer-events:none;white-space:nowrap;place-items:center;font-size:14px;font-weight:500;display:grid;position:absolute;inset:0}
.sld-grip{background:var(--sld-on);height:48px;color:var(--sld-in);cursor:grab;pointer-events:auto;transform-origin:0% center;z-index:2;border:0;padding:0;transition:none;position:absolute;top:4px;left:4px;font:inherit}
.sld-track[data-held] .sld-grip{cursor:grabbing}
.sld-arrow,.sld-done{letter-spacing:-.006em;white-space:nowrap;pointer-events:none;justify-content:center;align-items:center;gap:8px;font-size:14px;font-weight:500;display:flex;position:absolute;inset:0;color:var(--sld-in)}

/* the tick and its word cross-fade in place of the arrow; the block animates this pair in React,
   a transition does the same job here because only two states exist */
.sld-done{opacity:0;transform:scale(.7);transition:opacity .18s cubic-bezier(.33,.55,.2,1),transform .18s cubic-bezier(.33,.55,.2,1)}
.sld-track[data-done] .sld-done{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sld-done{transition-duration:1ms}}

/* the keyboard has to reach the same submit the pointer does: the handle is a real button */
.sld-grip:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* the button the slider stands in for stays in the DOM — the send routine still writes to it —
   but [hidden] alone loses to .dw-submit's own display */
.dw-submit[hidden]{display:none}