/* Toggle switch — from Uiverse.io by vinodjangid07                        */
/* https://uiverse.io — original markup used a single hardcoded #checkboxInput
   id + adjacent .toggleSwitch label, good for one toggle per page. This
   project uses many toggles on the same page (preferences, briefings,
   bear-trap), so the id selector is generalized to a class (.uv-toggle-input)
   here — same visual design, same colors/gradient/shadow, just reusable.
   Usage:
     <input type="checkbox" class="uv-toggle-input" id="my-toggle">
     <label class="uv-toggle-switch" for="my-toggle"></label>
   Add class="uv-toggle-switch uv-toggle-switch--sm" for the compact 40x20
   size used where the full 80x40 size would overwhelm a tight row (e.g.
   Bear Trap's inline Run sequence / Preflight toggles). */

.uv-toggle-input {
  /* To hide the checkbox */
  display: none;
}
.uv-toggle-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 80px;
  height: 40px;
  background-color: rgb(199, 199, 199);
  border-radius: 20px;
  cursor: pointer;
  transition-duration: .3s;
  flex: none;
  vertical-align: middle;
}
.uv-toggle-switch::after {
  content: "";
  position: absolute;
  height: 40px;
  width: 40px;
  left: 0px;
  background: conic-gradient(rgb(104, 104, 104), white, rgb(104, 104, 104), white, rgb(104, 104, 104));
  border-radius: 50%;
  transition-duration: .3s;
  box-shadow: 5px 2px 7px rgba(8, 8, 8, 0.308);
}
.uv-toggle-input:checked + .uv-toggle-switch::after {
  transform: translateX(100%);
  transition-duration: .3s;
}
/* Switch background change */
.uv-toggle-input:checked + .uv-toggle-switch {
  background-color: rgb(153, 197, 151);
  transition-duration: .3s;
}

/* Compact variant — same design, scaled down for tight inline rows. */
.uv-toggle-switch--sm {
  width: 40px;
  height: 20px;
  border-radius: 10px;
}
.uv-toggle-switch--sm::after {
  height: 20px;
  width: 20px;
}
.uv-toggle-input:disabled + .uv-toggle-switch {
  cursor: not-allowed;
  opacity: .5;
}