/*
 * The light / dark switch — SHARED.
 *
 * Worn by every admin page in its topbar and by the public front page in its
 * header. One control, one stylesheet: a visitor who has set this system to
 * dark on the front page and then signs in should not meet a different-looking
 * switch that means the same thing.
 *
 * It was written for the admin shell and moved here whole when the front page
 * needed it. It depends on the design tokens and on nothing else.
 *
 * The markup it expects:
 *
 *   label.theme-switch > input.theme-switch-input[data-theme-input]
 *                      + span.theme-switch-track > .theme-switch-face--sun
 *                                                + .theme-switch-face--moon
 *                                                + .theme-switch-knob
 *
 * @see public/assets/js/theme.js  what reads the checkbox and stores the choice
 */

/*
 * A switch, not a button with an icon on it.
 *
 * The icon button had the ambiguity every one of them has: does the moon mean
 * "you are in dark mode" or "press this for dark mode"? A switch cannot ask
 * that question — the knob is on one side or the other, and both sides carry
 * their own mark.
 *
 * The control underneath is a real checkbox. It is invisible but not
 * `display: none`, so it keeps its place in the tab order and still announces
 * itself; everything visible here is drawn by the label around it.
 */
.theme-switch {
  display: inline-flex;
  align-items: center;
  flex: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.theme-switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.theme-switch-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 62px;
  height: 32px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  transition: background var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}

/*
 * Both marks are always on the track.
 *
 * The one the knob is NOT covering is the state you are in; the one it covers
 * is where you would go. Showing only one would put the ambiguity straight
 * back.
 */
.theme-switch-face {
  position: relative;
  z-index: 1;
  font-size: 13px;
  line-height: 1;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.theme-switch-face--sun { color: #f0a500; }
.theme-switch-face--moon { color: #93a4d4; }

/* The knob dims whichever mark it is sitting on. */
.theme-switch-input:not(:checked) ~ .theme-switch-track .theme-switch-face--sun { opacity: .28; }
.theme-switch-input:checked ~ .theme-switch-track .theme-switch-face--moon { opacity: .28; }

.theme-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
  transition: transform var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-standard);
}

.theme-switch-input:checked ~ .theme-switch-track .theme-switch-knob {
  transform: translateX(30px);
}

.theme-switch-input:checked ~ .theme-switch-track {
  background: #1b2338;
  border-color: #2b3d6b;
}

.theme-switch:hover .theme-switch-track { border-color: var(--brand); }

/* Focus lands on the hidden input, so the ring has to be drawn on the track. */
.theme-switch-input:focus-visible ~ .theme-switch-track {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .theme-switch-knob,
  .theme-switch-track,
  .theme-switch-face { transition: none; }
}