/* The TOGGLE — the consent checkbox in a switch posture. The native control IS
 * the track (appearance: none): the shared focus ring lands on it, the label
 * keeps its click target, and the thumb is its ::before. Travel is the track's
 * width less its height, so the thumb rests flush at either end. */
.sk-toggle-input {
  appearance: none;
  box-sizing: border-box;
  position: relative;
  width: 2.4em;
  height: 1.35em;
  /* Seats the track on the label's first line, as the checkbox seats its box. */
  margin: 0.1em 0 0;
  border: var(--sk-border-width-min) solid var(--sk-stroke);
  border-radius: 999px;
  background: var(--sk-surface);
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}
.sk-toggle-input::before {
  content: "";
  position: absolute;
  top: 0.15em;
  left: 0.15em;
  height: calc(100% - 0.3em);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sk-ink-muted);
  transition:
    translate 160ms var(--sk-ease-out),
    background-color 160ms ease;
}
/* On-ink is --sk-btn-ink, as on the date part's selected day: the overlay ink
 * remaps move the accent fill but not --sk-bg. */
.sk-toggle-input:checked {
  background: var(--sk-accent);
  border-color: var(--sk-accent);
}
.sk-toggle-input:checked::before {
  translate: 1.05em 0;
  background: var(--sk-btn-ink);
}