/* The on/off switch — sys_design-system.md §14a. Its own file so `login.html` and
   `index.html`, which load no app stylesheet, are never sent it; every other page
   that needs a switch loads this one and only this one.

   `.pref-switch input[type="checkbox"]` is the specificity that lets one copy reach
   every page: a bare `input` ties the generic `input[type=…]` group at (0,1,1), the
   attribute makes it (0,2,1), and (0,2,1) wins wherever it is loaded.

   `appearance:none` as well as `opacity:0` — opacity alone leaves the native box
   occupying its own space and, on some engines, still painting its own focus ring. */
.pref-switch{position:relative; flex:0 0 auto; width:40px; height:22px; cursor:pointer; margin-top:1px;}

.pref-switch input[type="checkbox"]{
    appearance:none; -webkit-appearance:none;
    position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0;
    border:none; background:none; box-shadow:none;
    opacity:0; cursor:pointer;
  }

.pref-switch .track{
    position:absolute; inset:0; border-radius:999px;
    background:var(--panel-2); border:1px solid var(--border-strong);
    transition:background var(--dur-micro) linear, border-color var(--dur-micro) linear,
               box-shadow var(--dur-micro) linear;
  }

.pref-switch .knob{
    position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%;
    background:var(--text-faint); transition:transform var(--dur-micro) var(--ease-move), background var(--dur-micro) linear;
  }

/* The glow is a ring on the TRACK, not a filter, so it costs no compositing layer. */
.pref-switch input:checked ~ .track{
    background:var(--accent-soft); border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
  }

.pref-switch input:checked ~ .knob{transform:translateX(18px); background:var(--accent);}

/* The focus ring belongs to the track, because the input is invisible. Shared, so a switch is
   reachable and visibly focused on every page rather than on the two that remembered. */
.pref-switch input:focus-visible ~ .track{outline:2px solid var(--focus-ring); outline-offset:2px;}

/* A switch nobody may change still has to READ as off-limits rather than as merely off. */
.pref-switch input:disabled{cursor:not-allowed;}
.pref-switch:has(input:disabled){opacity:.55; cursor:not-allowed;}

/* The small variant — sys_design-system.md §14a. Same states and glow; only the size differs. */
.pref-switch.sm{width:32px; height:18px;}
.pref-switch.sm .knob{top:2px; left:2px; width:12px; height:12px;}
.pref-switch.sm input:checked ~ .knob{transform:translateX(14px);}

/* Reduced motion — this file's own copy, because `mobile.html` does not load
   components.css and a rule about a control belongs beside the control (CLAUDE.md
   rule 6). Duration only, never `transform`: the knob's position and the track's glow
   are the switch's STATE, and zeroing them would put an ON switch at its OFF position
   — a lie, not less motion. Both rules carry `!important`, for the reason recorded
   once in CSS/components.css: a media query adds no specificity of its own. */
@media (prefers-reduced-motion: reduce){
  .pref-switch .track,
  .pref-switch .knob{ transition-duration:1ms !important; }
}

/* A switch with its label beside it — sys_design-system.md §14a. The whole thing is a
   <label>, so the switch inside it is a <span>: nesting a label in a label gives the
   browser two candidates for one input. */
.switch-check{
    display:inline-flex; align-items:center; gap:10px;
    font-size:13px; color:var(--text-dim); cursor:pointer; min-width:0;
  }
.switch-check > span:last-child{min-width:0;}
/* Stacked in a settings pane rather than sitting in a row of controls. */
.settings-row .switch-check{display:flex; margin-bottom:8px;}