/* Ползунки на холсте письма (ui/story-vtrack.js) — отдельно от
   components/story-write.css по длине файла. Размер надписи и
   прозрачность плашки лежат по бокам поля, вертикальные; поворот —
   снизу, во всю ширину, горизонтальный. Знак в кружке говорит,
   за что каждый отвечает — иначе одинаковые кружки по краям кадра
   не различить. Литералы цвета — только themes.css. */

/* Вертикальная дорожка вдвое короче сцены и стоит по центру — во всю
   высоту она спорила бы за внимание с самим кадром. */
.story-vtrack {
  position: relative;
  flex: none;
  align-self: center;
  width: var(--sp-6);
  height: 50%;
  border-radius: var(--r-md);
  background: var(--veil);
  touch-action: none;
}

.story-vtrack[hidden] { display: none; }

.story-vtrack__fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--r-md);
  background: var(--accent);
}

.story-vtrack__knob {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: grid;
  place-items: center;
  width: var(--sp-8);
  height: var(--sp-8);
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  translate: -50% 50%;
  box-shadow: 0 .4cqw 1.2cqw var(--card-shadow);
}

.story-vtrack__knob .icon { width: var(--fs-sm); height: var(--fs-sm); }

/* Поворот — тот же приём, только лёжа: во всю ширину под сценой,
   тянут вправо — угол растёт. Знак в кружке — та же иконка поворота,
   что у шапки сборки истории. */
.story-htrack {
  position: relative;
  flex: none;
  margin: var(--sp-3) var(--sp-4) 0;
  height: var(--sp-6);
  border-radius: var(--r-md);
  background: var(--veil);
  touch-action: none;
}

.story-htrack__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--r-md);
  background: var(--accent);
}

.story-htrack__knob {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--sp-8);
  height: var(--sp-8);
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  translate: -50% -50%;
  box-shadow: 0 .4cqw 1.2cqw var(--card-shadow);
}

.story-htrack__knob .icon { width: var(--fs-sm); height: var(--fs-sm); }