/* SquishSwitch.vanilla.css — SquishSwitch.css (original, kept alongside) re-skinned to the contractor-app tokens. Class names unchanged. */
.squish-switch-root {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
}

.squish-switch {
  --ss-w: 64px;
  --ss-h: 36px;
  --ss-inset: 4px;
  --ss-thumb: 30px;
  --ss-r: 19px;
  --ss-thumb-r: 15px;
  --ss-track: var(--surface-2);
  --ss-track-on: var(--accent-fill);
  --ss-thumb-color: var(--text-2);
  --ss-thumb-on: var(--on-accent);
  --ss-fade: var(--dur-base);

  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  outline: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.squish-switch::after {
  content: '';
  position: absolute;
  inset: -4px -4px;
  min-height: var(--tap);
}

.squish-switch[data-held] {
  cursor: grabbing;
}

.squish-switch[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.5;
}

.squish-switch__track {
  position: relative;
  display: block;
  width: var(--ss-w);
  height: var(--ss-h);
  border-radius: var(--ss-r);
  background: var(--ss-track);
  box-shadow: inset 0 0 0 var(--border-w) var(--border-strong);
  transition: background-color var(--ss-fade) ease, box-shadow var(--ss-fade) ease;
}

.squish-switch[data-on] .squish-switch__track {
  box-shadow: none;
  background: var(--ss-track-on);
}

.squish-switch__thumb {
  position: absolute;
  top: var(--ss-inset);
  left: 0;
  width: var(--ss-thumb);
  height: var(--ss-thumb);
  border-radius: var(--ss-thumb-r);
  background: var(--ss-thumb-color);
  transition: background-color var(--ss-fade) ease;
}

.squish-switch[data-on] .squish-switch__thumb {
  background: var(--ss-thumb-on);
}

.squish-switch__label {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .squish-switch__track,
  .squish-switch__thumb {
    transition-duration: 1ms;
  }
}

/* tokens: ring + 44px hit area (the ::after above grows the target to >= 44px tall) */
.squish-switch:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-offset); border-radius: var(--ss-r); }
.squish-switch::after { top: 50%; bottom: auto; height: max(var(--tap), 100%); transform: translateY(-50%); }
.squish-switch__label { font-size: var(--fs-base); color: var(--text); }