/* ═══════════════════════════════════════════════════════════════════════════
   THE VOLUME — the one piece of furniture every design shares
   ───────────────────────────────────────────────────────────────────────────
   Native range inputs cannot be styled without resetting three vendors' worth
   of pseudo-elements, and that boilerplate is the same whatever the page is
   dressed as. So the shape lives here once and the colour lives with the
   theme: each stylesheet sets the four variables below and gets a slider in
   its own hand.

     --vol-track   the unfilled part of the line
     --vol-fill    the part to the left of the handle
     --vol-thumb   the handle
     --vol-ink     the speaker and the readout

   `--vol-at` is written by station.js on every change and is the width of the
   filled part. It is the only thing that moves.
   ═══════════════════════════════════════════════════════════════════════════ */

.vol {
  --vol-track: rgba(128, 128, 128, 0.3);
  --vol-fill: currentColor;
  --vol-thumb: currentColor;
  --vol-ink: currentColor;

  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--vol-ink);
}

/* ── the speaker ──────────────────────────────────────────────────────────── */

.vol__key {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.vol__key:hover {
  transform: scale(1.08);
}

.vol__key:active {
  transform: scale(0.94);
}

.vol__key svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
  overflow: visible;
}

/* Muted is a state of the whole group, not of the button, so the slider goes
   quiet with it rather than sitting there at full brightness saying nothing. */
body[data-muted='true'] .vol {
  --vol-fill: var(--vol-track);
}

body[data-muted='true'] .vol__key {
  opacity: 0.62;
}

/* ── the slider ───────────────────────────────────────────────────────────── */

.vol__range {
  --vol-at: 80%;

  flex: 0 1 6.5rem;
  width: 6.5rem;
  height: 1.1rem;
  margin: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.vol__range:focus {
  outline: none;
}

/* The track is drawn once as a gradient stopped at --vol-at, which is cheaper
   and steadier than a second element sized on every input event. */
.vol__range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    var(--vol-fill) 0 var(--vol-at),
    var(--vol-track) var(--vol-at) 100%
  );
}

.vol__range::-moz-range-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    var(--vol-fill) 0 var(--vol-at),
    var(--vol-track) var(--vol-at) 100%
  );
}

.vol__range::-webkit-slider-thumb {
  width: 0.72rem;
  height: 0.72rem;
  margin-top: calc((0.72rem - 3px) / -2);
  border: 0;
  border-radius: 50%;
  background: var(--vol-thumb);
  appearance: none;
  -webkit-appearance: none;
  transition: transform 0.16s ease;
}

.vol__range::-moz-range-thumb {
  width: 0.72rem;
  height: 0.72rem;
  border: 0;
  border-radius: 50%;
  background: var(--vol-thumb);
  transition: transform 0.16s ease;
}

.vol__range:hover::-webkit-slider-thumb,
.vol__range:focus-visible::-webkit-slider-thumb {
  transform: scale(1.35);
}

.vol__range:hover::-moz-range-thumb,
.vol__range:focus-visible::-moz-range-thumb {
  transform: scale(1.35);
}

/* Keyboard focus has to be visible on a control with no border of its own. */
.vol__range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--vol-track);
}

.vol__range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--vol-track);
}

.vol__key:focus-visible {
  outline: 2px solid var(--vol-thumb);
  outline-offset: 2px;
}

/* ── the readout ──────────────────────────────────────────────────────────── */

.vol__value {
  min-width: 1.6em;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  opacity: 0.7;
  user-select: none;
}

/* Narrow screens keep the speaker — which is the mute key — and drop the
   slider and the readout, because a 6rem slider under a thumb is a toy. */
@media (max-width: 34rem) {
  .vol__range,
  .vol__value {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vol__key,
  .vol__range::-webkit-slider-thumb,
  .vol__range::-moz-range-thumb {
    transition: none;
  }
}