/*
    The dark-mode switch on the user's settings page, and the plain form fields beside it. Themed
    by the same tokens it switches, so it looks right in whichever mode it lands in.
*/
/* A single on/off switch — dark mode, and anything else that is genuinely two-state. */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch__track {
  position: relative;
  width: 40px;
  height: 22px;
  flex: none;
  border-radius: var(--pill-radius);
  background: var(--gray-300);
  transition: background var(--transition-fast);
}
.switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  transition: transform var(--transition-fast);
}
.switch input:checked + .switch__track {
  background: var(--mint);
}
.switch input:checked + .switch__track .switch__knob {
  transform: translateX(18px);
}
.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--mint-dark);
  outline-offset: 2px;
}
.switch__label {
  font-size: var(--text-sm);
  color: var(--text-colour);
}
/* The details form on the settings page. */
.settings-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.settings-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
}
.settings-field span {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mid);
}
.settings-field input {
  padding: 6px 8px;
  border: 1px solid var(--rule);
  border-radius: var(--micro-radius);
  background: var(--background-colour);
  color: var(--text-colour);
  font-size: var(--text-sm);
}
.settings-field input:disabled {
  color: var(--mid);
}