/* The settings' switches (switch.js): an icon, a name, and a square track
   whose knob slides across, green when on. The distance switch has km and mi
   at its ends and stays neutral, since neither end is off. kit.css imports
   this; City Limits links it. :root outranks the record pages' general
   button rule. */
.setting-switches { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; border-top: 1px solid var(--border); }
.setting-switches:first-child { padding-top: 0; border-top: 0; }
:root .setting-switch {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 36px; margin: 0; padding: 3px 0;
  border: 0; border-radius: 0; background: transparent; color: var(--text); box-shadow: none;
  font: 500 13px/1.2 var(--display, system-ui, sans-serif); letter-spacing: 0; text-transform: none; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
:root .setting-switch:hover { background: transparent; color: var(--text); }
.setting-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.setting-switch .switch-icon { flex: none; display: grid; place-items: center; width: 22px; height: 22px; color: var(--muted); }
.setting-switch[aria-checked="true"] .switch-icon, .setting-switch.two-way .switch-icon { color: var(--text); }
.setting-switch .switch-label { flex: 1; min-width: 0; }
.setting-switch .switch-track {
  flex: none; position: relative; width: 36px; height: 20px; box-sizing: border-box;
  border: 1px solid var(--border); background: var(--wash); transition: background .18s ease, border-color .18s ease;
}
.setting-switch .switch-knob {
  position: absolute; top: 3px; left: 3px; width: 12px; height: 12px;
  background: var(--muted); transition: transform .2s cubic-bezier(.3, 1.5, .6, 1), background .18s ease;
}
.setting-switch:hover .switch-track { border-color: var(--text); }
.setting-switch[aria-checked="true"] .switch-track { background: var(--accent); border-color: var(--accent); }
.setting-switch[aria-checked="true"] .switch-knob { transform: translateX(16px); background: #fff; }
/* Two ends, neither of them off: the knob just says which. */
.setting-switch.two-way .switch-track, .setting-switch.two-way[aria-checked="true"] .switch-track { background: var(--wash); border-color: var(--border); }
.setting-switch.two-way:hover .switch-track { border-color: var(--text); }
.setting-switch.two-way .switch-knob, .setting-switch.two-way[aria-checked="true"] .switch-knob { background: var(--text); }
.setting-switch .switch-side { flex: none; font: 600 10px/1 var(--mono, monospace); letter-spacing: .04em; color: var(--faint); }
.setting-switch[aria-checked="false"] .switch-side[data-side="off"],
.setting-switch[aria-checked="true"] .switch-side[data-side="on"] { color: var(--text); }
.setting-switch.two-way .switch-label { margin-right: 1px; }
/* A change of state: the icon hops. */
.setting-switch.switched .switch-icon { animation: switch-hop .32s ease; }
@keyframes switch-hop { 0% { transform: scale(1); } 40% { transform: scale(1.22) rotate(-8deg); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .setting-switch .switch-track, .setting-switch .switch-knob { transition: none; }
  .setting-switch.switched .switch-icon { animation: none; }
}