/* css.slopped.site exhibit: The big light. From css/exhibits/dark-mode.mjs. */
.x-dark-mode .switchboard { display: grid; justify-items: start; gap: 14px; }
.x-dark-mode .switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.x-dark-mode .switch { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; font-size: 18px; font-weight: 700; cursor: pointer; }
.x-dark-mode .knob { position: relative; width: 72px; height: 40px; border: 2px solid var(--ink); border-radius: 999px; background: var(--acid); transition: background .2s; }
.x-dark-mode .knob::after { content: ""; position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); transition: translate .2s; }
.x-dark-mode .switch-input:checked + .switch .knob { background: var(--panel); }
.x-dark-mode .switch-input:checked + .switch .knob::after { translate: 32px 0; }
.x-dark-mode .switch-input:focus-visible + .switch .knob { outline: 3px solid var(--focus); outline-offset: 3px; }
.x-dark-mode .switch-note { max-width: 52ch; margin: 0; }
.x-dark-mode .when-off, .x-dark-mode:has(#lamp:checked) .when-on { display: none; }
.x-dark-mode:has(#lamp:checked) .when-off { display: inline; }
@media (prefers-reduced-motion: reduce) { .x-dark-mode .knob, .x-dark-mode .knob::after { transition: none; } }
/* key */
/* one checkbox, and the whole document listens to it */
:root:has(#lamp:checked) {
  color-scheme: dark;
  --paper: #141511;
  --ink: #ecebe2;
  --muted: #a7a698;
  --line: #3a3b34;
  --panel: #23241f;
  --card: #1c1d19;
  --code: #000;
  --focus: #c8e04a;
  --yes: #9fd36f;
  --no: #ff8f73;
}
/* the wordmark is a black drawing; turn it inside out with the room */
:root:has(#lamp:checked) .masthead img, :root:has(#lamp:checked) .foot-logo img { filter: invert(1); }
/* /key */

/* live support notes (built from css/exhibits.js) */
.sup-has .sup-no { display: none; }
@supports not selector(:has(*)) { .sup-has .sup-yes { display: none; } .sup-has .sup-no { display: inline; } .sup-has { --sup: var(--no); } }
