/* Toggles -see docs/strategy/design-system/18-toggle.md */

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--divider);
}

.toggle-row:last-child {
  border-bottom: 0;
}

.toggle-label {
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--text);
}

.toggle-sub {
  margin-top: 1px;
  font-size: var(--font-size-small);
  color: var(--muted);
}

.switch {
  position: relative;
  display: inline-flex;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.slider {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  position: relative;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
  cursor: pointer;
}

.slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-toggle-knob);
  transition: transform var(--duration-base) var(--ease-standard);
}

/* Active state uses the purple admin accent across the app · the
   admin-accent palette is the single source of truth for "operator
   toggled this on" affordances. The historic .switch.pro modifier
   stays as an alias so any markup that explicitly opted in keeps
   rendering identically (no-op now that base IS purple). */
.switch input:checked + .slider {
  background: var(--admin-accent-bg);
  border-color: var(--admin-accent);
}

.switch input:checked + .slider::after {
  transform: translateX(18px);
  background: var(--admin-accent);
}

.switch.pro input:checked + .slider {
  background: var(--admin-accent-bg);
  border-color: var(--admin-accent);
}

.switch.pro input:checked + .slider::after {
  background: var(--admin-accent);
}

.switch input:focus-visible + .slider {
  outline: 2px solid var(--admin-accent);
  outline-offset: 2px;
}