/*
  VoiceIsolate Pro — Slider Tick Marks  (slider-ticks.css)
  =========================================================
  Styles the native datalist tick marks generated by slider-ticks.js
  and adds the .slider-tick-wrapper layout container.

  APPROACH:
    • Browsers render datalist <option> ticks as small lines below
      the track.  We suppress the native marks and replace them with
      a custom ::after pseudo-element background pattern for full
      design control.
    • The wrapper div uses position:relative so the tick strip can
      be absolute-positioned flush under the track.
    • Tick color matches the slider's accent: red (offline) or cyan (RT).

  COMPATIBILITY:
    • Chrome/Edge: datalist ticks supported — both native + custom.
    • Firefox: datalist ticks supported.
    • Safari: datalist NOT visually rendered — JS snap still works.
      The CSS fallback shows a repeating gradient tick strip.

  NOTE: --tick-count and --tick-step are set inline by slider-ticks.js
  on the .slider-tick-wrapper element for precise positioning.
*/

/* ── Wrapper ───────────────────────────────────────────────── */
.slider-tick-wrapper {
  position: relative;
  width:    100%;
  display:  flex;
  flex-direction: column;
  gap:      0;
}

/* The input inside the wrapper takes full width */
.slider-tick-wrapper > input[type="range"] {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Hide the datalist element itself (it's a data source, not visual) */
.slider-tick-wrapper > datalist {
  display: none;
}

/* ── Tick strip (pseudo-element on wrapper) ─────────────────── */
/*
  We draw ticks as a repeating linear-gradient stripe.
  --pct-step = (step / range) * 100%  — computed via JS and set as
  a CSS custom property on .slider-tick-wrapper.

  Because CSS can't directly divide custom properties, we use
  a js-set --tick-pct-step variable for the gradient stop spacing.
*/
.slider-tick-wrapper::after {
  content:  '';
  display:  block;
  width:    calc(100% - 18px); /* account for thumb overhang */
  margin:   0 9px;
  height:   5px;
  margin-top: 2px;
  background: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 255, 255, 0.0) calc(var(--tick-pct-step, 10%) - 0.5px),
    rgba(255, 42, 61, 0.45)  calc(var(--tick-pct-step, 10%) - 0.5px),
    rgba(255, 42, 61, 0.45)  var(--tick-pct-step, 10%)
  );
  border-radius: 2px;
  pointer-events: none;
  flex-shrink: 0;
}

/* RT sliders (cyan accent) */
.slider-tick-wrapper.is-rt::after {
  background: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 255, 255, 0.0) calc(var(--tick-pct-step, 10%) - 0.5px),
    rgba(0, 255, 231, 0.40)  calc(var(--tick-pct-step, 10%) - 0.5px),
    rgba(0, 255, 231, 0.40)  var(--tick-pct-step, 10%)
  );
}

/* Locked sliders — cyan protected accent (same token as style.css / slider-theme) */
.slider-tick-wrapper.is-locked::after {
  background: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 255, 255, 0.0) calc(var(--tick-pct-step, 10%) - 0.5px),
    rgba(103, 232, 249, 0.45) calc(var(--tick-pct-step, 10%) - 0.5px),
    rgba(103, 232, 249, 0.45) var(--tick-pct-step, 10%)
  );
}
.slider-tick-wrapper.is-locked > input[type="range"] {
  accent-color: var(--vip-lock-accent, #67e8f9);
}

/* ── Active state: brighten ticks when dragging ─────────────── */
.slider-tick-wrapper:has(input:active)::after {
  opacity: 1.0;
}
.slider-tick-wrapper::after {
  opacity: 0.55;
  transition: opacity 0.15s ease;
}
.slider-tick-wrapper:hover::after {
  opacity: 0.85;
}

/* ── Suppress native datalist marks in Chrome/Edge ─────────── */
/*
  Chrome renders datalist marks as tiny triangles below the track.
  We use our custom repeating-gradient instead so we suppress these.
  The ::-webkit-slider-container pseudo doesn't allow hiding individual
  option ticks, but the marks appear only when list= is set, so we
  offset them below our visible area.
*/
input[type="range"]::-webkit-slider-container {
  overflow: hidden; /* clips native datalist tick overflow */
}

/* Firefox datalist ticks */
input[type="range"]::-moz-range-progress { overflow: hidden; }

/* ── Snap pulse animation: thumb flash on tick landing ──────── */
@keyframes tick-snap-pulse {
  0%   { box-shadow: inset 0 -2px 4px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.70), 0 0 0 0 transparent, 0 0 22px rgba(255,42,61,0.90); }
  60%  { box-shadow: inset 0 -2px 4px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.70), 0 0 0 5px rgba(255,42,61,0.28), 0 0 28px rgba(255,42,61,0.70); }
  100% { box-shadow: inset 0 -2px 4px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.70), 0 0 0 0 transparent, 0 0 12px rgba(255,42,61,0.40); }
}
@keyframes tick-snap-pulse-rt {
  0%   { box-shadow: inset 0 -2px 4px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.70), 0 0 0 0 transparent, 0 0 22px rgba(0,255,231,0.88); }
  60%  { box-shadow: inset 0 -2px 4px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.70), 0 0 0 5px rgba(0,255,231,0.26), 0 0 28px rgba(0,255,231,0.65); }
  100% { box-shadow: inset 0 -2px 4px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.70), 0 0 0 0 transparent, 0 0 12px rgba(0,255,231,0.38); }
}

.slider-tick-wrapper.snap-pulse > input[type="range"]::-webkit-slider-thumb {
  animation: tick-snap-pulse 0.22s ease-out;
}
.slider-tick-wrapper.is-rt.snap-pulse > input[type="range"]::-webkit-slider-thumb {
  animation: tick-snap-pulse-rt 0.22s ease-out;
}

/* Remove snap pulse class after animation */
/* (Done via JS timeout — see slider-ticks.js) */

/* ── Reduced motion: disable all animations ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .slider-tick-wrapper::after,
  .slider-tick-wrapper > input[type="range"] {
    transition: none !important;
    animation:  none !important;
  }
  @keyframes tick-snap-pulse    { from {} to {} }
  @keyframes tick-snap-pulse-rt { from {} to {} }
}

/* ── Mobile: thicker ticks for touch targets ────────────────── */
@media (max-width: 600px) {
  .slider-tick-wrapper::after {
    height:    7px;
    margin-top: 1px;
  }
}