/* Ползунок WID — один вид для всего сайта.

   Так выглядят все «потяните и посмотрите» на сайте: дорожка 8 px, бегунок
   30 px в белой окантовке, цветная тень под цвет блока. Пока ползунок не
   трогали, бегунок подмигивает — иначе на телефоне не видно, что его можно
   тянуть. После первого касания класс is-touched гасит подмигивание.

   Как применять:

     <input type="range" class="wid-range"
            style="--range:#e5484d;--range-soft:#ffd9da" min="1" max="25">

   Цвет задаётся двумя переменными: --range (бегунок) и --range-soft
   (дорожка). Подпись и подсказка — по желанию:

     <p class="wid-range__head"><span>День задержки</span><strong>7</strong></p>
     <p class="wid-range__hint"><i class="ph-fill ph-hand-swipe-right"></i>Потяните ползунок</p>

   Скрипт: assets/ui/range.js — ставит is-touched при первом касании.
   Правило: новый ползунок на сайте делаем только этим классом, свои стили
   для input[type=range] не пишем. */

.wid-range{
  --range:#1f7ff2;
  --range-soft:#dbe9ff;
  width:100%;height:44px;margin:0;
  background:none;cursor:grab;
  -webkit-appearance:none;appearance:none;
}
.wid-range:active{cursor:grabbing}
.wid-range::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:var(--range-soft)}
.wid-range::-moz-range-track{height:8px;border-radius:999px;background:var(--range-soft)}
.wid-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:30px;height:30px;margin-top:-11px;
  border:4px solid #fff;border-radius:50%;
  background:var(--range);
  box-shadow:0 6px 16px color-mix(in srgb,var(--range) 40%,transparent);
}
.wid-range::-moz-range-thumb{
  width:30px;height:30px;border:4px solid #fff;border-radius:50%;
  background:var(--range);
  box-shadow:0 6px 16px color-mix(in srgb,var(--range) 40%,transparent);
}
.wid-range:not(.is-touched)::-webkit-slider-thumb{animation:wid-range-thumb 1.9s ease-in-out infinite}
.wid-range:not(.is-touched)::-moz-range-thumb{animation:wid-range-thumb 1.9s ease-in-out infinite}
@keyframes wid-range-thumb{
  0%,100%{box-shadow:0 6px 16px color-mix(in srgb,var(--range) 40%,transparent),0 0 0 0 color-mix(in srgb,var(--range) 45%,transparent)}
  55%{box-shadow:0 6px 16px color-mix(in srgb,var(--range) 40%,transparent),0 0 0 12px transparent}
}

.wid-range__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0}
.wid-range__head span{color:#5c6169;font-size:13px;font-weight:650}
.wid-range__head strong{font-size:22px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

.wid-range__hint{display:flex;align-items:center;gap:9px;margin:2px 0 0;color:#5c6169;font-size:14px;font-weight:650;overflow:hidden;transition:opacity .3s ease,height .3s ease,margin .3s ease}
.wid-range__hint i{font-size:20px;animation:wid-range-swipe 1.9s ease-in-out infinite}
@keyframes wid-range-swipe{0%,100%{transform:translateX(0)}55%{transform:translateX(8px)}}
/* подсказку не просто гасим, а убираем — иначе под ползунком остаётся дыра */
.wid-range__hint.is-touched{opacity:0;height:0;margin:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .wid-range::-webkit-slider-thumb,.wid-range::-moz-range-thumb,.wid-range__hint i{animation:none}
}