/* ============================================================
   Нижний навбар — «liquid glass» капсула. Стеклянный эффект —
   blur+saturate с многослойными inset-обводками (имитация светлых/
   тёмных рефлексов стекла). --active-idx двигает стеклянную
   «таблетку» под активной иконкой — см. static/js/mobile-nav.js.
   position:absolute — внутри #stage (телефон: весь экран,
   десктоп: центрированная колонка).
   ============================================================ */
.rail {
  --c-glass: #0d1219;
  --c-light: #fff;
  --c-dark: #000;
  --glass-reflex-dark: 2;
  --glass-reflex-light: .3;
  --saturation: 150%;
  --active-idx: 0;

  position: absolute;
  top: calc(var(--app-height, 100lvh) - 70px - 24px); bottom: auto; left: 12px; right: 12px;
  z-index: 10;
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: center;
  width: auto;
  height: 70px;
  padding: 0 6px;
  border: 0;
  border-radius: 24px;
  background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
  backdrop-filter: blur(14px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(14px) saturate(var(--saturation));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
    inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
}

/* скользящая стеклянная «таблетка» под активным разделом */
.rail::before {
  content: '';
  position: absolute;
  left: 6px; top: 6px;
  width: calc((100% - 12px) / 4);
  height: calc(100% - 12px);
  border-radius: 18px;
  background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
  translate: calc(var(--active-idx) * 100%) 0;
  transition: translate 420ms cubic-bezier(1, 0, .4, 1);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0px -4px 1px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 3px 6px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
}

/* лёгкое «сжатие» таблетки при переключении раздела */
.rail.morph::before {
  animation: rail-morph 440ms ease;
}
@keyframes rail-morph {
  0%   { scale: 1 1; }
  50%  { scale: 1.12 1; }
  100% { scale: 1 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rail::before { transition: none; }
  .rail.morph::before { animation: none; }
}

/* группы рейла — обычные ячейки общей строки из 4 кнопок */
.rail-group { display: contents; }
.rail-btn {
  flex: 1 1 0;
  width: auto;
  height: 100%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  padding: 0; margin: 0; background: none; border: 0; cursor: pointer;
}
.rail-ico {
  width: 26px; height: 26px; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--muted);
  transition: color .2s;
}
.rail-ico svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.rail-btn.active .rail-ico { color: var(--accent); }
/* подписи под иконками скрыты — компактная капсула в духе liquid glass */
.rail-tip { display: none; }