/* The slide-to-confirm button: a dark track on a black page, a white knob with an arrow, and a green fill that
   follows the knob. At the end the whole track is green and the knob, now dark, carries a tick. */
:root {
  --page: #000000;          /* the page */
  --track: #151515;         /* the track */
  --knob: #f4f1ea;          /* the knob */
  --ink: #0c0c0c;           /* the arrow, and the text on green */
  --green: #3ae08a;         /* the fill, and the tick */
  --muted: #9a968e;         /* the words on the track */
  --pad: 8px;               /* between the track and the knob */
  --knob-size: 60px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--knob);
  font-family: 'Sora Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
}

/* ---------------------------------------------------------------- the track */
.slide {
  position: relative;
  width: min(380px, 100%);
  height: calc(var(--knob-size) + var(--pad) * 2);
  border-radius: 999px;
  background: var(--track);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 2px 6px rgba(0, 0, 0, 0.6);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* the green that follows the knob: from the start of the track to the knob's far edge */
.slide__fill {
  position: absolute;
  left: var(--pad);
  top: var(--pad);
  width: var(--knob-size);
  height: var(--knob-size);
  border-radius: 999px;
  background: linear-gradient(90deg, #2bd27c, var(--green));
}

.slide__label,
.slide__done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 560;
  letter-spacing: -0.005em;
  white-space: nowrap;
  pointer-events: none;
}

/* the words sit in the room right of the knob; the words of the end in the room left of it */
.slide__label {
  padding-left: calc(var(--knob-size) + var(--pad));
  color: var(--muted);
}

.slide__label b {
  margin-left: 0.3em;
  font-weight: 700;
  color: var(--knob);
}

.slide__done {
  padding-right: calc(var(--knob-size) + var(--pad));
  color: var(--ink);
  font-weight: 700;
  opacity: 0;
}

/* ---------------------------------------------------------------- the knob */
.slide__knob {
  position: absolute;
  left: var(--pad);
  top: var(--pad);
  display: grid;
  place-items: center;
  width: var(--knob-size);
  height: var(--knob-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--knob);
  color: var(--ink);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.7), inset 0 -2px 0 rgba(0, 0, 0, 0.08);
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.slide__knob:active {
  cursor: grabbing;
}

.slide__knob[aria-disabled='true'] {
  cursor: default;
}

.slide__knob:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}

.slide__knob svg {
  width: 26px;
  height: 26px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.slide__tick {
  stroke: var(--green);
  stroke-width: 2.6;
  opacity: 0;
}