/* ============================================================
   Slide to confirm — standalone, no dependencies.
   Recolour with the custom properties on .s2c.
   ============================================================ */
.s2c{
  --s2c-track:#17171B;        /* track background            */
  --s2c-fill:#EE6C3C;         /* the colour that fills in    */
  --s2c-thumb:#FFFFFF;        /* knob                        */
  --s2c-icon:#EE6C3C;         /* icon inside the knob        */
  --s2c-text:rgba(255,255,255,.62);
  --s2c-text-done:#FFFFFF;
  --s2c-height:60px;
  --s2c-pad:5px;              /* gap around the knob         */
  --s2c-radius:99px;
  --s2c-ease:cubic-bezier(.22,.61,.36,1);

  position:relative;
  height:var(--s2c-height);
  border-radius:var(--s2c-radius);
  background:var(--s2c-track);
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;         /* let the page scroll vertically, we own the X */
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
  isolation:isolate;
}
.s2c[aria-disabled="true"]{opacity:.55;pointer-events:none}

/* the part that fills in behind the knob */
.s2c-fill{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--s2c-fill);opacity:.9;
  will-change:width;
}

/* label, centred, with a sheen that stops once confirmed */
.s2c-label{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:9px;
  font:650 13.5px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:-.01em;color:var(--s2c-text);
  pointer-events:none;text-align:center;padding:0 60px;
}
.s2c-label::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);
  animation:s2c-shine 2.4s linear infinite;
}
@keyframes s2c-shine{from{transform:translateX(-60%)}to{transform:translateX(60%)}}

/* the knob */
.s2c-thumb{
  position:absolute;top:var(--s2c-pad);left:var(--s2c-pad);z-index:2;
  width:calc(var(--s2c-height) - var(--s2c-pad) * 2);
  height:calc(var(--s2c-height) - var(--s2c-pad) * 2);
  border-radius:99px;background:var(--s2c-thumb);color:var(--s2c-icon);
  display:grid;place-items:center;
  box-shadow:0 3px 10px rgba(0,0,0,.28);
  cursor:grab;touch-action:none;
  transition:left .38s var(--s2c-ease);
}
.s2c-thumb:active{cursor:grabbing}
.s2c.is-dragging .s2c-thumb{transition:none}
.s2c-thumb:focus-visible{outline:3px solid var(--s2c-fill);outline-offset:3px}

/* confirmed */
.s2c.is-done .s2c-label{color:var(--s2c-text-done)}
.s2c.is-done .s2c-label::after{display:none}
.s2c.is-done .s2c-thumb{cursor:default}

/* a second palette, for destructive or success actions */
.s2c.s2c-green{--s2c-track:#0E3E22;--s2c-fill:#22B85C;--s2c-icon:#22B85C}
.s2c.s2c-red{--s2c-track:#3A1412;--s2c-fill:#E4483C;--s2c-icon:#E4483C}

@media (prefers-reduced-motion:reduce){
  .s2c-label::after{animation:none}
  .s2c-thumb{transition:none}
}