/* hv-postnav | legume — стрелки HV по макету Main (2).png; токены окон стилей HV, свой id — ничего чужого не задевает */
#hv-postnav{
  --hvn-scale:1;
  position:fixed;top:50%;left:auto;right:16px;z-index:9000;
  display:flex;flex-direction:column;align-items:flex-start;gap:13px;
  margin:0;padding:0 0 0 17px;transform:translateY(-50%);
  font:400 11px/23px var(--font);color:rgb(var(--pun-light));
  transition:opacity .35s ease}
#hv-postnav:not(.hvn-ready){opacity:0;pointer-events:none}
#hv-postnav.hvn-idle{opacity:.5}
#hv-postnav.hvn-drag{opacity:1}
/* пилюли «вверх / вниз» с линией от края форума */
#hv-postnav .hvn-pill{
  position:relative;box-sizing:border-box;flex:none;height:25px;margin:0;padding:0 12px;
  border:1px solid rgb(var(--pun-light));border-radius:var(--r-pill);background:rgb(var(--text));
  box-shadow:var(--glow-light);color:rgb(var(--pun-light));font:inherit;text-transform:lowercase;white-space:nowrap;
  cursor:pointer;opacity:.35;transition:opacity .2s ease,box-shadow .2s ease,background .2s ease}
#hv-postnav .hvn-pill::before{content:"";position:absolute;right:100%;top:50%;width:18px;height:2px;margin-top:-1px;background:rgb(var(--acc5))}
#hv-postnav .hvn-pill.hvn-on{opacity:1}
#hv-postnav .hvn-pill:hover{background:rgb(var(--acc7))}
#hv-postnav .hvn-pill:focus-visible{outline:1px solid rgb(var(--pun-light));outline-offset:2px}
/* шкала в темах: волосок с засечками постов и ползунком */
#hv-postnav .hvn-track{
  position:relative;box-sizing:border-box;width:13px;height:30vh;min-height:110px;max-height:220px;
  margin:0 0 0 16px;cursor:pointer;touch-action:none}
#hv-postnav .hvn-track::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:1px;background:rgba(var(--pun-light),.35)}
#hv-postnav .hvn-tick{position:absolute;left:4px;width:5px;height:1px;background:rgba(var(--pun-light),.55)}
#hv-postnav .hvn-thumb{
  position:absolute;left:3px;top:0;box-sizing:border-box;width:7px;height:22px;border-radius:var(--r-pill);
  background:var(--acc-grad);transition:transform .15s ease}
#hv-postnav .hvn-track:hover .hvn-thumb,#hv-postnav.hvn-drag .hvn-thumb{transform:scaleX(1.3)}
#hv-postnav .hvn-label{
  position:absolute;left:calc(100% + 10px);top:0;transform:translateY(-50%);box-sizing:border-box;
  padding:4px 10px;border:1px solid rgb(var(--pun-light));border-radius:var(--r-md);background:rgb(var(--text));box-shadow:var(--glow-light);
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s ease}
#hv-postnav:hover .hvn-label,#hv-postnav.hvn-drag .hvn-label{opacity:1}
#hv-postnav .hvn-label b{display:block;font:500 11px/14px var(--font);color:rgb(var(--pun-light))}
#hv-postnav .hvn-label i{display:block;font:400 10px/13px var(--font);font-style:normal;color:rgb(var(--acc5))}
/* телефон: одна пилюля внизу справа (класс ставит скрипт — у qsdb нет meta viewport) */
#hv-postnav.hvn-mobile{top:auto;left:auto;right:calc(14px * var(--hvn-scale));bottom:calc(18px * var(--hvn-scale));padding:0;transform:none;font-size:calc(11px * var(--hvn-scale));line-height:calc(23px * var(--hvn-scale))}
#hv-postnav.hvn-mobile .hvn-track{display:none}
#hv-postnav.hvn-mobile .hvn-pill{height:calc(25px * var(--hvn-scale));padding:0 calc(12px * var(--hvn-scale))}
#hv-postnav.hvn-mobile .hvn-pill::before{display:none}
#hv-postnav.hvn-mobile .hvn-pill:not(.hvn-on){display:none}