.row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-strong);
  cursor: default;
}
.disabled {
  color: var(--fg-faint);
}
.label {
  min-width: 0;
}
/* Checkbox icon: 16px box, rx 2.5 + 0.5 stroke, white check on the brand blue; 2px focus ring with 1px gap. */
.boxWrap {
  position: relative;
  flex: none;
  display: inline-flex;
  width: 16px;
  height: 16px;
}
.native {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: default;
}
.box {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: var(--bg-checkbox, var(--bg-button));
  box-shadow: inset 0 0 0 1px var(--border-checkbox, var(--control-off));
  color: var(--fg-button-primary);
  transition:
    background var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
  pointer-events: none;
}
.on {
  background: var(--bg-button-primary);
  box-shadow: none;
}
.box {
  /* Icons default to the grey --fg-icon; the check mark follows the box's text colour. */
  --icon-color: currentColor;
}
.disabled .box {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--fg-faint);
}
.disabled .on {
  background: var(--border);
}
.radio {
  border-radius: 50%;
}
.radio.on::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.native:focus-visible + .box {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

/* OnOff button (ToggleButton.*): "ON" on green with the knob right, "OFF" on grey with the knob left. */
.switch {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  width: 42px;
  height: 18px;
  padding: 0;
  border-radius: 3px;
  background: var(--bg-toggle-off, var(--bg-elev));
  box-shadow: inset 0 0 0 1px var(--border-toggle, var(--control-off));
  color: var(--fg-toggle-off, var(--fg-muted));
  font-size: var(--fs-tiny);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.switchOn {
  background: var(--bg-toggle-on, var(--success));
  box-shadow: none;
  color: var(--fg-toggle-on, var(--fg-on-accent));
}
.knobLabel {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  right: 0;
  pointer-events: none;
}
.switchOn .knobLabel {
  left: 0;
  right: auto;
}
.knob {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 1px;
  width: 16px;
  border-radius: 2px;
  background: var(--bg-toggle-knob, var(--control-off));
  transition: transform var(--dur) var(--ease);
}
.switchOn .knob {
  transform: translateX(24px);
}
.switch:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}
.switch:disabled {
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .box,
  .knob,
  .switch {
    transition: none;
  }
}

@media (forced-colors: active) {
  .box,
  .switch {
    border: 1px solid ButtonText;
  }
}