/* Пробник вибору розміру рахунку. Три варіанти під html[data-sizefx];
   без атрибута — як є. --n (скільки сходинок) і data-v на кульці ставить
   sizefx.js. Геометрія та сама, що в робочому ползунку: місце під кульку
   22px, сходинка i стоїть на 11px + i/(n-1) · (100% − 22px). */

/* спільна колонка перемикачів усіх пробників (її створює перший із них) */
.fx-dock{position:fixed; left:14px; bottom:14px; z-index:100000; display:flex;
  flex-direction:column; align-items:flex-start; gap:6px}
.fx-dock > *{position:static !important}

/* ─────────────── перемикач ─────────────── */
.sizefx-sw{position:fixed; left:14px; bottom:14px; z-index:100000; display:flex;
  align-items:center; gap:4px; padding:4px; border:1px solid var(--line);
  border-radius:12px; background:var(--panel); font:500 12px/1 inherit;
  box-shadow:0 8px 30px rgba(0,0,0,.35)}
.sizefx-sw span{padding:0 8px; color:var(--faint); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase}
.sizefx-sw button{border:0; background:none; color:var(--dim); font:inherit;
  padding:7px 10px; border-radius:8px; cursor:pointer; transition:background .15s, color .15s}
.sizefx-sw button:hover{color:var(--text); background:var(--panel-2)}
.sizefx-sw button.on{color:var(--text); background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px var(--accent)}

/* ─────────────── спільне: число ─────────────── */
html[data-sizefx] .rs-size-v{gap:9px; margin-bottom:8px}
html[data-sizefx] .rs-size-v span{font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; color:var(--faint)}


/* ═══════════════ A · «Шкала» ═══════════════
   Лінійка з поділками: великі — на сходинках, дрібні між ними. Пройдена
   частина поділок світиться акцентом, замість кульки — тонка стрілка з
   ромбом угорі. Число — великим тонким кеглем. */
html[data-sizefx="a"] .rs-size-v b{font-size:38px; font-weight:400; letter-spacing:-.045em}
html[data-sizefx="a"] .rs-sl{height:46px}
html[data-sizefx="a"] .rs-range{height:46px}
html[data-sizefx="a"] .rs-tr, html[data-sizefx="a"] .rs-fl{top:12px; height:22px; margin-top:0;
  border-radius:0; background-repeat:repeat-x}
/* Доріжка й заливка тут порожні: дрібні поділки — риски .sz-ruler
   (ставить sizefx.js), великі — на мітках (.rs-tick::before). Обидва
   шари рахують місце тією ж формулою, що й стрілка, тож усе збігається. */
html[data-sizefx="a"] .rs-tr{background:none; box-shadow:none}
html[data-sizefx="a"] .rs-fl{display:none}
.sz-ruler{display:none}
html[data-sizefx="a"] .sz-ruler{display:block; position:absolute; left:0; right:0; top:12px;
  height:22px; pointer-events:none}
html[data-sizefx="a"] .sz-ruler i{position:absolute; top:50%; width:1px; height:9px;
  margin:-4.5px 0 0 -.5px; background:var(--line)}
/* зелений шар — пройдене; обрізаний до стрілки й тьмяніє до початку */
html[data-sizefx="a"] .sz-ruler.on i{background:color-mix(in srgb, var(--accent) 75%, transparent)}
html[data-sizefx="a"] .sz-ruler.on{
  clip-path:inset(0 calc(100% - 11px - var(--pk, 0) * (100% - 22px)) 0 0);
  -webkit-mask:linear-gradient(90deg, rgba(0,0,0,.35), #000 85%);
          mask:linear-gradient(90deg, rgba(0,0,0,.35), #000 85%);
  transition:clip-path .38s cubic-bezier(.22,1,.36,1)}
/* Стрілка й заливка їдуть до нової сходинки плавно — і під пальцем
   теж: сходинки дискретні, і без переходу стрілка перестрибувала б. */
html[data-sizefx="a"] .rs-th{top:4px; margin-top:0; width:2px; height:38px; border-radius:2px;
  left:calc(10px + var(--pk, 0) * (100% - 22px)); background:var(--accent); border:0;
  box-shadow:0 0 14px color-mix(in srgb, var(--accent) 70%, transparent);
  transform-origin:50% 100%}
html[data-sizefx="a"] .rs-th, html[data-sizefx="a"] .rs-range:active ~ .rs-th{
  transition:left .38s cubic-bezier(.22,1,.36,1), transform .2s cubic-bezier(.34,1.56,.64,1)}
html[data-sizefx="a"] .rs-th::before{content:""; position:absolute; left:50%; top:-5px;
  width:9px; height:9px; margin-left:-4.5px; border-radius:2px; background:var(--accent);
  transform:rotate(45deg)}
html[data-sizefx="a"] .rs-range:active ~ .rs-th{transform:scaleY(1.12)}
html[data-sizefx="a"] .rs-range:focus-visible ~ .rs-th{box-shadow:0 0 0 3px var(--accent-soft),
  0 0 14px var(--accent)}
html[data-sizefx="a"] .rs-tick{font-family:var(--mono); font-size:10.5px}
/* велика поділка над міткою: на висоті доріжки (вона 12–34px у ползунку,
   мітки починаються на 50px) */
html[data-sizefx="a"] .rs-tick::before{content:""; position:absolute; top:-38px; left:50%;
  width:2px; height:22px; margin-left:-1px; border-radius:1px;
  background:color-mix(in srgb, var(--text) 30%, transparent); pointer-events:none;
  transition:background .3s}
html[data-sizefx="a"] .rs-tick:first-child::before{left:11px}
html[data-sizefx="a"] .rs-tick:last-child::before{left:auto; right:10px; margin:0}
/* .past — сходинки нижче набраної руками суми (свій депозит) */
html[data-sizefx="a"] .rs-tick:has(~ .rs-tick.on)::before,
html[data-sizefx="a"] .rs-tick.past::before{background:var(--accent)}
/* під стрілкою власна поділка не потрібна */
html[data-sizefx="a"] .rs-tick.on::before{opacity:0}


/* ═══════════════ B · «Сходинки» ═══════════════
   Ползунка немає: кожен розмір — кнопка-сходинка, над кнопками смужки
   заповнення. Пройдені смужки зелені й заливаються каскадом зліва. */
html[data-sizefx="b"] .rs-size-v b{font-size:32px; font-weight:600; letter-spacing:-.035em}
html[data-sizefx="b"] .rs-sl{height:0; overflow:hidden}
html[data-sizefx="b"] .rs-scale{display:grid; grid-template-columns:repeat(var(--n, 6), minmax(0,1fr));
  gap:6px; height:auto; margin-top:6px}
html[data-sizefx="b"] .rs-tick, html[data-sizefx="b"] .rs-tick:first-child,
html[data-sizefx="b"] .rs-tick:last-child{position:relative; left:auto !important; transform:none;
  padding:16px 0 11px; border:1px solid var(--line); border-radius:10px;
  background:var(--panel-2); color:var(--dim); font-family:var(--mono); font-size:12px;
  transition:border-color .2s, background .2s, color .2s, box-shadow .3s,
    transform .2s cubic-bezier(.16,1,.3,1)}
html[data-sizefx="b"] .rs-tick::before{content:""; position:absolute; left:10px; right:10px; top:6px;
  height:3px; border-radius:3px; background:var(--line)}
html[data-sizefx="b"] .rs-tick::after{content:""; position:absolute; left:10px; right:10px; top:6px;
  height:3px; border-radius:3px; background:var(--accent); transform:scaleX(0);
  transform-origin:0 50%; transition:transform .3s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i, 0) * 45ms)}
html[data-sizefx="b"] .rs-tick:has(~ .rs-tick.on)::after,
html[data-sizefx="b"] .rs-tick.on::after{transform:scaleX(1)}
html[data-sizefx="b"] .rs-tick:hover{border-color:var(--faint); color:var(--text);
  transform:translateY(-1px)}
html[data-sizefx="b"] .rs-tick:active{transform:scale(.96)}
html[data-sizefx="b"] .rs-tick.on{border-color:var(--accent); color:var(--text); font-weight:600;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent),
    var(--panel-2);
  box-shadow:0 10px 26px -14px color-mix(in srgb, var(--accent) 70%, transparent)}
html[data-sizefx="b"] .rs-tick.born{animation:none}
@media(max-width:520px){
  html[data-sizefx="b"] .rs-tick{font-size:10.5px; padding:15px 0 10px}
}


/* ═══════════════ C · «Скло» ═══════════════
   Товста втоплена доріжка з крапками-сходинками, заливка з
   відблиском, металева кулька з ореолом. Поки ведуть чи наводять —
   над кулькою підказка з розміром. */
html[data-sizefx="c"] .rs-size-v b{font-size:36px; font-weight:600; letter-spacing:-.04em}
html[data-sizefx="c"] .rs-sl{height:56px}
html[data-sizefx="c"] .rs-range{top:12px; height:44px}
html[data-sizefx="c"] .rs-tr{top:34px; height:10px; margin-top:-5px; background:var(--bg, #050505);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.7), inset 0 0 0 1px var(--line)}
html[data-sizefx="c"] .rs-fl{top:34px; height:10px; margin-top:-5px; overflow:hidden;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent), var(--accent));
  box-shadow:0 0 16px -2px color-mix(in srgb, var(--accent) 55%, transparent)}
html[data-sizefx="c"] .rs-fl::after{content:""; position:absolute; inset:0; width:40%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform:translateX(-120%)}
html[data-sizefx="c"] .rs-sl:hover .rs-fl::after{animation:sz-shine 1.4s cubic-bezier(.4,0,.2,1)}
@keyframes sz-shine{to{transform:translateX(320%)}}
html[data-sizefx="c"] .rs-th{top:34px; width:26px; height:26px; margin-top:-13px;
  left:calc(-2px + var(--pk, 0) * (100% - 22px)); border:0;
  background:radial-gradient(circle at 35% 30%, #fff, #dfe3e8 55%, #9aa1aa);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent),
    0 6px 16px rgba(0,0,0,.55)}
html[data-sizefx="c"] .rs-th::after{content:attr(data-v); position:absolute; left:50%;
  bottom:calc(100% + 10px); padding:4px 8px; border-radius:7px; background:var(--text);
  color:var(--bg, #050505); font:600 11px/1 var(--mono); white-space:nowrap;
  opacity:0; transform:translate(-50%, 4px);
  transition:opacity .2s, transform .25s cubic-bezier(.16,1,.3,1)}
html[data-sizefx="c"] .rs-range:hover ~ .rs-th::after,
html[data-sizefx="c"] .rs-range:active ~ .rs-th::after,
html[data-sizefx="c"] .rs-range:focus-visible ~ .rs-th::after{opacity:1; transform:translate(-50%, 0)}
html[data-sizefx="c"] .rs-range:active ~ .rs-th{transform:scale(1.15)}
/* крапки сходинок на доріжці: мітки стоять рівно під ними */
html[data-sizefx="c"] .rs-scale{margin-top:2px}
html[data-sizefx="c"] .rs-tick::before{content:""; position:absolute; top:-26px; left:50%;
  width:4px; height:4px; margin-left:-2px; border-radius:50%;
  background:color-mix(in srgb, var(--text) 35%, transparent); pointer-events:none}
html[data-sizefx="c"] .rs-tick:first-child::before{left:11px}
html[data-sizefx="c"] .rs-tick:last-child::before{left:auto; right:9px; margin:0}
html[data-sizefx="c"] .rs-tick:has(~ .rs-tick.on)::before,
html[data-sizefx="c"] .rs-tick.on::before{background:color-mix(in srgb, var(--bg, #050505) 55%, transparent)}
html[data-sizefx="c"] .rs-tick.on::before{opacity:0}
html[data-sizefx="c"] .rs-tick{font-family:var(--mono); font-size:10.5px}

@media(prefers-reduced-motion:reduce){
  html[data-sizefx] .rs-tick, html[data-sizefx] .rs-tick::after, html[data-sizefx] .rs-th,
  html[data-sizefx] .rs-th::after{transition:none}
  html[data-sizefx] .rs-fl::after{animation:none}
}