/* Shared control ergonomics.
   Linked after each page's inline <style>, so equal-specificity rules here win.

   The doubled [type="range"] / .range-input selectors are a deliberate
   specificity bump: they lift these rules above each page's own
   `input[type="range"]:not(.range-input)` without reaching for !important, and
   unlike :enabled they apply to disabled sliders too — the binaural page
   disables its right-pitch slider, and losing the sizing below would make that
   row jump by 22px every time an interval is linked. */

/* A slider has to own the gesture. Without touch-action the browser is free to
   reinterpret the drag as a page scroll the instant the finger drifts
   vertically, which is what made these near-undraggable on a phone. */
input[type="range"][type="range"] {
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* Grow the grab band to 40px without moving anything: the negative margins pull
   the layout box back to its original 18px, and the 2px track plus the thumb
   stay vertically centred inside the taller box. */
input[type="range"][type="range"]:not(.range-input) {
  height: 40px;
  margin-top: -11px;
  margin-bottom: -11px;
}

/* --- Dual-range (Evolve) handles, homepage only ---------------------------- */

/* The two overlapping native inputs were only grabbable on a 4px-wide thumb,
   and the min handle's z-index always beat the max one where they met. The
   wrapper now does the hit-testing and dragging for both (see index.html), so
   the inputs are display-only: they render their handle and nothing else. */
.range-slider {
  touch-action: none;
  height: 40px;
  margin-top: -9px;
  margin-bottom: -9px;
  cursor: ew-resize;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.range-input.range-input { pointer-events: none; }

/* Centre both handles on the track line. They used to be staggered 3px apart so
   you could tell them apart where they met; the driver's nearest-handle pick
   makes that unnecessary. */
.range-input.range-input::-webkit-slider-thumb { margin-top: -9px; }
.range-min.range-min::-webkit-slider-thumb { margin-top: -9px; }
.range-min.range-min::-moz-range-thumb { margin-top: 0; }

/* Under the finger you cannot see which handle you caught, so the live one
   grows taller — taller rather than wider, which would shift it sideways. */
.range-slider.dragging-min .range-min::-webkit-slider-thumb,
.range-slider.dragging-max .range-max::-webkit-slider-thumb {
  height: 26px;
  margin-top: -13px;
}

.range-slider.dragging-min .range-min::-moz-range-thumb,
.range-slider.dragging-max .range-max::-moz-range-thumb {
  height: 26px;
}

/* --- Click-to-type numeric readouts -------------------------------------- */

/* A readout that doubles as an input. The dotted underline is the only hint it
   is tappable; the negative margins cancel the padding so adding a 30px-tall
   touch target does not push the label row around. */
.editable-value {
  cursor: pointer;
  display: inline-block;
  /* The slider below reaches up into the label row now that its grab band is
     taller, and it paints later in the DOM. Lift the readout above it so taps
     on the number reach the number. */
  position: relative;
  z-index: 2;
  padding: 6px 7px;
  margin: -6px -7px;
  border-bottom: 1px dotted var(--fg-muted);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, border-bottom-color 0.12s ease;
}

.editable-value:hover,
.editable-value:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  border-bottom-color: var(--fg);
  outline: none;
}

.editable-value[aria-disabled="true"] {
  cursor: default;
  border-bottom-color: transparent;
  background: none;
}

.value-edit {
  position: relative;
  z-index: 2;
  font: inherit;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--fg);
  border-radius: 0;
  padding: 5px 6px;
  margin: -6px -7px;
  width: 5.5em;
  text-align: right;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.value-edit::-webkit-outer-spin-button,
.value-edit::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- Keeping neighbours reachable ---------------------------------------- */

/* The 40px grab band reaches ~11px past the slider's old box, which lands on
   the label row and any toggle sitting just above it. Sliders paint later in
   the DOM, so those rows have to be lifted to keep receiving their own taps. */
.slider-label,
.param-header,
.section-head,
.chip-row,
.interval-grid,
.mutation-block,
.mode-toggle,
.evolve-toggle,
.lfo-toggle {
  position: relative;
  z-index: 2;
}

/* A label that carries its own on/off toggle next to the name. */
.label-with-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}