/* The house switch: one look for every on/off control in Pathary, the shell, the phone and every module.
   Two ways to put one on a page, both drawn here and nowhere else:
   - <input type="checkbox" role="switch">, the usual one, beside its words in a label (.rd-switch rows and the rest);
   - <span class="house-switch"> inside a button that is the switch (role="switch" aria-checked), or inside a button
     that only shows its state (data-on on the span). That button draws its own focus ring and its own disabled look.
   The track is the ::after, the knob the ::before, so the box itself can grow to a 44 px finger target on a touch screen
   while the drawing stays the same size. Track 40 by 22 at normal Text size and scaled with it, fully round; the knob a
   circle inset 2 px on every side. Off is a neutral track with a visible edge in Day and Night, on is the accent with
   the knob at the right. The colors are read on the switch itself, so a panel in another mode draws it in that mode. A
   place that needs another on color sets --switch-on on a parent; nothing else is set per place. */
input[type="checkbox"][role="switch"],
.house-switch {
  --sw-w: round(calc(40px * var(--t-k, 1)), 2px);
  --sw-h: round(calc(22px * var(--t-k, 1)), 2px);
  --sw-in: 2px;
  --sw-on: var(--switch-on, var(--accent));
  --sw-off: color-mix(in srgb, var(--text) 14%, var(--panel));
  --sw-edge: color-mix(in srgb, var(--text) 18%, transparent);
  --sw-knob: var(--onScrim, #fff);
  --sw-shadow: 0 1px 3px color-mix(in srgb, var(--scrimDeep, #000) 30%, transparent),
    0 0 1px color-mix(in srgb, var(--scrimDeep, #000) 40%, transparent);
  --sw-bw: var(--sw-w);
  --sw-bh: var(--sw-h);
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  width: var(--sw-bw);
  min-width: 0;
  max-width: none;
  height: var(--sw-bh);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* The track. */
input[type="checkbox"][role="switch"]::after,
.house-switch::after {
  content: "";
  position: absolute;
  top: calc((var(--sw-bh) - var(--sw-h)) / 2);
  left: calc((var(--sw-bw) - var(--sw-w)) / 2);
  box-sizing: border-box;
  width: var(--sw-w);
  height: var(--sw-h);
  margin: 0;
  border: 0;
  border-radius: calc(var(--sw-h) / 2);
  background: var(--sw-off);
  box-shadow: inset 0 0 0 1px var(--sw-edge);
  transform: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
/* The knob. */
input[type="checkbox"][role="switch"]::before,
.house-switch::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc((var(--sw-bh) - var(--sw-h)) / 2 + var(--sw-in));
  left: calc((var(--sw-bw) - var(--sw-w)) / 2 + var(--sw-in));
  box-sizing: border-box;
  width: calc(var(--sw-h) - 2 * var(--sw-in));
  height: calc(var(--sw-h) - 2 * var(--sw-in));
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sw-knob);
  box-shadow: var(--sw-shadow);
  transform: translateX(0);
  transition: transform 0.15s ease;
}
input[type="checkbox"][role="switch"]:checked::after,
.house-switch[data-on]::after,
[aria-checked="true"] > .house-switch::after {
  background: var(--sw-on);
  box-shadow: inset 0 0 0 1px transparent;
}
input[type="checkbox"][role="switch"]:checked::before,
.house-switch[data-on]::before,
[aria-checked="true"] > .house-switch::before {
  background: var(--sw-knob);
  transform: translateX(calc(var(--sw-w) - var(--sw-h)));
}
/* The ring goes round the track, never the larger finger box. */
input[type="checkbox"][role="switch"]:focus-visible {
  outline: none;
  box-shadow: none;
}
input[type="checkbox"][role="switch"]:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input[type="checkbox"][role="switch"]:disabled {
  opacity: 0.45;
  cursor: default;
}
/* A touch screen: the box takes 44 px each way, centred on the drawing, and gives the extra back in margin so the row
   around it lays out as it does with a mouse. */
@media (pointer: coarse) {
  input[type="checkbox"][role="switch"] {
    --sw-bw: max(var(--sw-w), 44px);
    --sw-bh: max(var(--sw-h), 44px);
    margin: calc((var(--sw-h) - var(--sw-bh)) / 2) calc((var(--sw-w) - var(--sw-bw)) / 2);
  }
}
@media (prefers-reduced-motion: reduce) {
  input[type="checkbox"][role="switch"]::before,
  input[type="checkbox"][role="switch"]::after,
  .house-switch::before,
  .house-switch::after {
    transition: none;
  }
}