/* ============================================================================
 * Zed PN8 — Slider + color-settings bar redesign (CT-314)
 * Gated: html.zed-ux (default OFF => ZERO regression).
 * Thin (4px) rounded tracks, accent fill (JS-driven --zed-range-fill for
 * WebKit; native ::-moz-range-progress for Firefox), small rounded thumb.
 * Color-adjust bars get semantic gradient tracks (temp/tint/sat/tonal).
 * ==========================================================================*/

html.zed-ux input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 16px;
  background: transparent;
  cursor: pointer;
  --zed-range-fill: 0%;
}

/* WebKit track (accent fill driven by --zed-range-fill) */
html.zed-ux input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--zed-radius-pill);
  background: linear-gradient(to right,
    var(--zed-accent) 0%,
    var(--zed-accent) var(--zed-range-fill),
    var(--zed-bg-active) var(--zed-range-fill),
    var(--zed-bg-active) 100%);
}
html.zed-ux input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.28);
  box-shadow: var(--zed-shadow-sm);
  transition: transform var(--zed-dur-fast) var(--zed-ease);
}
html.zed-ux input[type="range"]:hover::-webkit-slider-thumb {
  transform: scale(1.18);
}
html.zed-ux input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.05);
}
html.zed-ux input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--zed-accent);
  outline-offset: 2px;
}

/* Firefox track + native progress fill */
html.zed-ux input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: var(--zed-radius-pill);
  background: var(--zed-bg-active);
}
html.zed-ux input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: var(--zed-radius-pill);
  background: var(--zed-accent);
}
html.zed-ux input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: var(--zed-shadow-sm);
}

/* --- Color-adjust bars: semantic gradient tracks --- */
html.zed-ux .colorControl-temp input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #4a90d9, #cfd3d8 50%, #f0a030);
}
html.zed-ux .colorControl-temp input[type="range"]::-moz-range-track {
  background: linear-gradient(to right, #4a90d9, #cfd3d8 50%, #f0a030);
}
html.zed-ux .colorControl-tint input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #58c15a, #cfd3d8 50%, #d15fd1);
}
html.zed-ux .colorControl-tint input[type="range"]::-moz-range-track {
  background: linear-gradient(to right, #58c15a, #cfd3d8 50%, #d15fd1);
}
html.zed-ux .colorControl-saturation input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #7a7a7a, var(--zed-accent));
}
html.zed-ux .colorControl-saturation input[type="range"]::-moz-range-track {
  background: linear-gradient(to right, #7a7a7a, var(--zed-accent));
}
/* Tonal controls: neutral dark -> light ramp */
html.zed-ux .colorControl-exposure input[type="range"]::-webkit-slider-runnable-track,
html.zed-ux .colorControl-lightness input[type="range"]::-webkit-slider-runnable-track,
html.zed-ux .colorControl-contrast input[type="range"]::-webkit-slider-runnable-track,
html.zed-ux .colorControl-highlight input[type="range"]::-webkit-slider-runnable-track,
html.zed-ux .colorControl-shadow input[type="range"]::-webkit-slider-runnable-track,
html.zed-ux .colorControl-whites input[type="range"]::-webkit-slider-runnable-track,
html.zed-ux .colorControl-blacks input[type="range"]::-webkit-slider-runnable-track,
html.zed-ux .colorControl-brilliance input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #2a2a30, #e8e9ec);
}
html.zed-ux .colorControl-exposure input[type="range"]::-moz-range-track,
html.zed-ux .colorControl-lightness input[type="range"]::-moz-range-track,
html.zed-ux .colorControl-contrast input[type="range"]::-moz-range-track,
html.zed-ux .colorControl-highlight input[type="range"]::-moz-range-track,
html.zed-ux .colorControl-shadow input[type="range"]::-moz-range-track,
html.zed-ux .colorControl-whites input[type="range"]::-moz-range-track,
html.zed-ux .colorControl-blacks input[type="range"]::-moz-range-track,
html.zed-ux .colorControl-brilliance input[type="range"]::-moz-range-track {
  background: linear-gradient(to right, #2a2a30, #e8e9ec);
}

/* Value readout chip (output elements next to sliders) */
html.zed-ux .colorControlTop output,
html.zed-ux .spectrumInspectorControlTop output {
  background: var(--zed-bg-inset);
  border: 1px solid var(--zed-border);
  border-radius: var(--zed-radius-sm);
  color: var(--zed-text);
  font-size: var(--zed-fs-xs);
  font-weight: var(--zed-fw-medium);
  padding: 1px 6px;
  min-width: 34px;
  text-align: center;
}

/* Number input beside color sliders */
html.zed-ux .colorNumber {
  background: var(--zed-bg-inset);
  border: 1px solid var(--zed-border);
  border-radius: var(--zed-radius-sm);
  color: var(--zed-text);
  font-size: var(--zed-fs-xs);
}