/* ========================================================================== 
   SHARED_BUILDER_002C — Unified dual-range visual and geometry contract

   Applies only to the five shared historical-builder range controls:
   Class, Number of Runners, Distance, Horse Age and Weight.

   Reference appearance:
   - warm orange unselected track;
   - teal-to-blue selected range;
   - cyan minimum handle and restrained red maximum handle;
   - handles centred on the track in Main Builder, Race Profiler and Pro Canvas.
   ========================================================================== */

body #page-builder :is(#race,#race-conditions,#course-profile,#horse,#ratings) .dual-range {
  --shared-range-left: var(--range-left, 0%);
  --shared-range-right: var(--range-right, 100%);
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  overflow: visible !important;
  touch-action: none;
  cursor: ew-resize;
}

body #page-builder :is(#race,#race-conditions,#horse,#ratings) .hybrid-dual-range {
  --shared-range-left: var(--hybrid-range-left, var(--range-left, 0%));
  --shared-range-right: var(--hybrid-range-right, var(--range-right, 100%));
}

body #page-builder #course-profile .distance-dual-range {
  --shared-range-left: var(--distance-range-left, var(--range-left, 0%));
  --shared-range-right: var(--distance-range-right, var(--range-right, 100%));
}

body #page-builder :is(#race,#race-conditions,#course-profile,#horse,#ratings) .dual-range::before,
body #page-builder :is(#race,#race-conditions,#course-profile,#horse,#ratings) .dual-range::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  height: 8px !important;
  border-radius: 999px !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

/* Full available range: visible warm track, independent of section accent. */
body #page-builder :is(#race,#race-conditions,#course-profile,#horse,#ratings) .dual-range::before {
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
  margin: 0 !important;
  border: 1px solid rgba(234, 136, 48, .24) !important;
  background: linear-gradient(90deg, #ffedd5 0%, #fed7aa 52%, #fdba74 100%) !important;
  box-shadow:
    inset 0 1px 2px rgba(154, 79, 20, .14),
    0 1px 0 rgba(255,255,255,.82) !important;
  z-index: 1 !important;
}

/* Selected interval: aligned to the same positions as the explicit handles. */
body #page-builder :is(#race,#race-conditions,#course-profile,#horse,#ratings) .dual-range::after {
  left: var(--shared-range-left) !important;
  right: auto !important;
  width: calc(var(--shared-range-right) - var(--shared-range-left)) !important;
  margin: 0 !important;
  border: 0 !important;
  background: linear-gradient(90deg, #0e7490 0%, #0891b2 40%, #2563eb 100%) !important;
  box-shadow:
    0 0 0 1px rgba(37,99,235,.14),
    0 3px 9px rgba(37,99,235,.18) !important;
  z-index: 2 !important;
}

body #page-builder :is(#race,#race-conditions,#course-profile,#horse,#ratings) .dual-range input[type="range"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

body #page-builder :is(#race,#race-conditions,#course-profile,#horse,#ratings) .dual-range input[type="range"]::-webkit-slider-runnable-track,
body #page-builder :is(#race,#race-conditions,#course-profile,#horse,#ratings) .dual-range input[type="range"]::-moz-range-track {
  height: 8px !important;
  border: 0 !important;
  background: transparent !important;
}

body #page-builder :is(#race,#race-conditions,#course-profile,#horse,#ratings) .dual-range.has-explicit-range-handles input[type="range"]::-webkit-slider-thumb,
body #page-builder :is(#race,#race-conditions,#course-profile,#horse,#ratings) .dual-range.has-explicit-range-handles input[type="range"]::-moz-range-thumb {
  opacity: 0 !important;
  pointer-events: none !important;
}

body #page-builder :is(#race,#race-conditions,#course-profile,#horse,#ratings) .dual-range-explicit-handle {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  z-index: 5 !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  border: 4px solid #0891b2 !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.94),
    0 5px 13px rgba(15,23,42,.22) !important;
  transform: translate(-50%, -50%) !important;
  cursor: ew-resize !important;
  touch-action: none !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body #page-builder :is(#race,#race-conditions,#course-profile,#horse,#ratings) .dual-range-explicit-handle.is-max {
  border-color: #dc3545 !important;
}

body #page-builder :is(#race,#race-conditions,#course-profile,#horse,#ratings) .dual-range.is-range-dragging .dual-range-explicit-handle {
  box-shadow:
    0 0 0 5px rgba(8,145,178,.14),
    0 5px 14px rgba(15,23,42,.24) !important;
}
body #page-builder :is(#race,#race-conditions,#course-profile,#horse,#ratings) .dual-range.is-range-dragging .dual-range-explicit-handle.is-max {
  box-shadow:
    0 0 0 5px rgba(220,53,69,.11),
    0 5px 14px rgba(15,23,42,.24) !important;
}

/* Give the track a real row. This replaces the older 14/17/46px conflict. */
body #page-builder :is(#race,#race-conditions,#horse,#ratings) .hybrid-slider-zone,
body #page-builder #course-profile .distance-slider-zone {
  grid-template-rows: 24px 22px !important;
  align-items: center !important;
  overflow: visible !important;
}

body #page-builder :is(#race,#race-conditions,#course-profile,#horse,#ratings) .range-anchor-row {
  margin-top: 4px !important;
}

body #page-builder :is(#race,#race-conditions,#course-profile,#horse,#ratings) .control-disabled .dual-range {
  cursor: not-allowed !important;
  opacity: .48 !important;
  filter: saturate(.55) !important;
}
body #page-builder :is(#race,#race-conditions,#course-profile,#horse,#ratings) .control-disabled .dual-range-explicit-handle {
  cursor: not-allowed !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body #page-builder :is(#race,#race-conditions,#course-profile,#horse,#ratings) .dual-range-explicit-handle {
    transition: none !important;
  }
}