/* One native range skin, including keyboard focus and a 44px touch target.
 * Materials belong to the enclosing panel; this component adds no blur layer.
 */
.cr-range-control {
  --range-track: var(--ui-line);
  --range-fill: var(--ui-muted);
  --range-thumb: #fff;
  --range-thumb-border: rgba(0, 0, 0, .18);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  width: 100%;
  color: var(--ui-text);
}
html:not(.cityrail-light-ui) .cr-range-control {
  --range-thumb: #e9e9ec;
  --range-thumb-border: rgba(0, 0, 0, .35);
}
.cr-range-control .cr-range-input {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 0;
  width: 0;
  min-width: 36px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  cursor: ew-resize;
  touch-action: pan-y;
}
.cr-range-input::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: var(--range-gradient, linear-gradient(to right, var(--range-fill) 0 var(--range-progress), var(--range-track) var(--range-progress) 100%));
}
.cr-range-input::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: var(--range-gradient, linear-gradient(to right, var(--range-fill) 0 var(--range-progress), var(--range-track) var(--range-progress) 100%));
}
.cr-range-input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 20px;
  height: 26px;
  margin-top: -11px;
  border: 1px solid var(--range-thumb-border);
  border-radius: 7px;
  background: var(--range-thumb);
  box-shadow: 0 1px 3px #0002;
}
.cr-range-input::-moz-range-thumb {
  box-sizing: border-box;
  width: 20px;
  height: 26px;
  border: 1px solid var(--range-thumb-border);
  border-radius: 7px;
  background: var(--range-thumb);
  box-shadow: 0 1px 3px #0002;
}
.cr-range-value {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 3px;
  color: inherit;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cr-range-control .cr-range-number {
  appearance: textfield;
  box-sizing: border-box;
  width: 5ch;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: 600 16px/1.4 -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.cr-range-control .cr-range-number[type="text"] { width: 6ch; }
.cr-range-number::-webkit-inner-spin-button,
.cr-range-number::-webkit-outer-spin-button { appearance: none; margin: 0; }
.cr-range-unit { color: var(--ui-muted); font-size: 13px; }
.cr-range-control :is(.cr-range-input, .cr-range-number):focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}
.cr-range-control .cr-range-number[aria-invalid="true"] { outline: 2px solid var(--ui-danger, #d70015); }
.cr-range-control:has(.cr-range-input:disabled) { opacity: .45; }
.cr-range-control .cr-range-input:disabled { cursor: not-allowed; }
@media (forced-colors: active) {
  .cr-range-control { --range-track: GrayText; --range-fill: Highlight; --range-thumb: ButtonFace; --range-thumb-border: ButtonText; }
  .cr-range-input { forced-color-adjust: none; }
}

.cr-range-control input[type="range"]::-webkit-slider-thumb {
  transition: scale var(--ui-control-duration) var(--ui-ease-out);
}
.cr-range-control input[type="range"]::-moz-range-thumb {
  transition: scale var(--ui-control-duration) var(--ui-ease-out);
}
.cr-range-control input[type="range"]:active:not(:disabled)::-webkit-slider-thumb { scale: var(--ui-press-scale); }
.cr-range-control input[type="range"]:active:not(:disabled)::-moz-range-thumb { scale: var(--ui-press-scale); }