/* Capsule switch appearance inspired by Nexus UI Capsule Toggles.
   Existing Radix switches remain responsible for state and interaction. */
button.slick-capsule[data-slot="switch"] {
  --capsule-on: var(--primary, #2367f2);
  --capsule-off: #b4bbc8;
  position: relative; display: inline-block; flex: 0 0 74px;
  width: 74px; min-width: 74px; height: 38px; min-height: 38px;
  padding: 0; margin: 3px 0; border: 0; border-radius: 999px;
  overflow: visible; cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg,rgba(255,255,255,.65),rgba(235,235,240,.5));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.9),inset 0 -2px 4px rgba(0,0,0,.06),inset 0 0 0 1px rgba(0,0,0,.08),0 6px 14px -8px rgba(0,0,0,.25);
  outline: none; transition: box-shadow .2s ease,opacity .2s ease;
}
/* The transparent extension gives the 38px capsule a 44px touch target. */
button.slick-capsule::before { content: ""; position: absolute; inset: -3px 0; border-radius: inherit; }
button.slick-capsule::after {
  content: ""; pointer-events: none; position: absolute;
  left: 8px; right: 8px; top: 3px; height: 11px; border-radius: inherit;
  background: linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));
}
button.slick-capsule > [data-slot="switch-thumb"] {
  position: absolute; top: 5px; left: 5px; width: 28px; height: 28px;
  display: block; overflow: hidden; pointer-events: none;
  border-radius: 999px; transform: none; background: var(--capsule-off);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.7);
  transition: box-shadow .35s ease .08s;
}
button.slick-capsule > [data-slot="switch-thumb"]::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--capsule-on); opacity: 0;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.7);
  transition: opacity .35s ease .08s;
}
button.slick-capsule[data-state="checked"] > [data-slot="switch-thumb"] {
  left: 41px; transform: none;
  box-shadow: 0 0 14px 2px color-mix(in srgb,var(--capsule-on) 53%,transparent),inset 0 1px 2px rgba(255,255,255,.7);
}
button.slick-capsule[data-state="checked"] > [data-slot="switch-thumb"]::before { opacity: 1; }
button.slick-capsule:focus-visible { outline: 2px solid var(--ring,#2367f2); outline-offset: 4px; }
button.slick-capsule:disabled { opacity: .5; cursor: not-allowed; }
:root.dark button.slick-capsule, :root[data-theme="dark"] button.slick-capsule {
  --capsule-off: #636976;
  background: linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.14),inset 0 -2px 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1),0 6px 14px -8px rgba(0,0,0,.7);
}
:root.dark button.slick-capsule::after, :root[data-theme="dark"] button.slick-capsule::after {
  background: linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));
}
@media (prefers-reduced-motion: reduce) {
  button.slick-capsule,button.slick-capsule > [data-slot="switch-thumb"],button.slick-capsule > [data-slot="switch-thumb"]::before { transition: none; }
}
@media (forced-colors: active) {
  button.slick-capsule { border: 1px solid ButtonText; }
  button.slick-capsule > [data-slot="switch-thumb"] { background: ButtonText; }
  button.slick-capsule[data-state="checked"] > [data-slot="switch-thumb"]::before { background: Highlight; forced-color-adjust: none; }
}