/* Нижнее меню свёрнуто → капсула меню сужается до полоски подстраниц раздела (js/app.js: .sec-nav).
   В полоске: капсула с названием текущей подстраницы и круглые кнопки остальных. Тап по капсуле — развернуть меню. */
:root {
  --cap-h: var(--p-btn);                                       /* высота полоски = круглая кнопка 44 */
  --cap-gap: 10px;                                             /* полоска → низ экрана и полоска → нижняя строка */
  --cap-bottom: var(--cap-gap);
  --sub-drop: calc(var(--p-bottom-safe) + var(--p-menu-h) + var(--p-sub-gap) - var(--cap-gap) - var(--cap-h) - var(--cap-gap));
}

/* капсула меню: вместо «уехать вниз» — сжаться к центру до ширины полоски */
.screen .bottom-bar {
  transition: left .32s cubic-bezier(.2,.8,.2,1), width .32s cubic-bezier(.2,.8,.2,1), height .32s cubic-bezier(.2,.8,.2,1),
              bottom .32s cubic-bezier(.2,.8,.2,1), opacity .2s ease, visibility 0s;
}
.screen .bottom-bar > * { transition: opacity .18s ease .12s; }
.screen.is-bottom-hidden .bottom-bar {
  translate: none; visibility: visible;
  left: calc(50% - var(--cap-w, 120px) / 2); width: var(--cap-w, 120px); height: var(--cap-h);
  bottom: var(--cap-bottom);
  opacity: 0; transition: left .32s cubic-bezier(.2,.8,.2,1), width .32s cubic-bezier(.2,.8,.2,1), height .32s cubic-bezier(.2,.8,.2,1),
              bottom .32s cubic-bezier(.2,.8,.2,1), opacity .15s ease .26s, visibility 0s .41s;
}
.screen.is-bottom-hidden .bottom-bar > * { opacity: 0; transition: opacity .1s ease; }

/* полоска подстраниц: каждая подстраница — одна кнопка. Активная — капсула «иконка + слово», остальные — круг с иконкой.
   Переключение: старая капсула сворачивается в круг (слово уезжает), новая разворачивается (иконка остаётся, выезжает слово). */
.sec-nav {
  position: absolute; z-index: 10; left: var(--p-pad); right: var(--p-pad); bottom: var(--cap-bottom); height: var(--cap-h);
  display: flex; justify-content: center; align-items: center; gap: var(--p-gap);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease, visibility 0s .12s;
}
.screen.is-bottom-hidden .sec-nav { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .18s ease .22s, visibility 0s; }
.sec-nav .sec-item {
  width: var(--w, 44px); height: var(--cap-h); border-radius: 999px; flex: none;
  display: inline-flex; place-items: initial; align-items: center; justify-content: flex-start; padding: 0 0 0 11px; overflow: hidden;
  transition: width .38s cubic-bezier(.3,.7,.2,1);
}
.sec-nav .sec-item > .ic { flex: none; }
.sec-item__lbl {
  flex: none; margin-left: 7px; white-space: nowrap;
  font: 700 13px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .03em; color: var(--text);
  opacity: 0; translate: -6px 0; transition: opacity .16s ease, translate .3s cubic-bezier(.3,.7,.2,1);
}
.sec-nav .sec-item.is-active .sec-item__lbl { opacity: 1; translate: 0 0; transition: opacity .22s ease .14s, translate .32s cubic-bezier(.3,.7,.2,1) .08s; }
.sec-nav .sec-item.is-title { justify-content: center; padding: 0 20px; }
.sec-nav .sec-item.is-title .sec-item__lbl { opacity: 1; translate: none; margin: 0; padding: 0; }
.sec-nav .sec-item.is-active:active, .sec-nav .sec-item.is-title:active { transform: scale(.97); }   /* капсула не «прыгает» как круг */
/* много подстраниц (Финансы) — полоска листается вбок */
.sec-nav.is-many { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; left: 0; right: 0; padding: 0 var(--p-pad); }
.sec-nav.is-many::-webkit-scrollbar { display: none; }

.screen.is-bottom-hidden .sub-bottom-bar,
.screen.is-bottom-hidden .date-switcher { translate: 0 var(--sub-drop); }
.screen.is-bottom-hidden .dv-handle { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .sec-nav, .sec-item, .sec-item__lbl, .screen .bottom-bar, .screen .bottom-bar > * { transition: none !important; } }

/* Активная подстраница выглядит как остальные капсулы (плашка названия вверху, поле поиска), а не как растянутый круг:
   те же подложка, размытие, тень и ровная кромка из токенов. Круги остаются круглыми кнопками. */
.screen .sec-nav .sec-item.is-active {
  --glass-border: 1px;
  --rim-white: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.14) 32%, rgba(255, 255, 255, 0.14) 68%, rgba(255, 255, 255, 0.24) 100%);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) var(--glass-dim); backdrop-filter: blur(var(--glass-blur)) var(--glass-dim);
  box-shadow: var(--glass-shadow);
  transform: none; z-index: auto;
}
.screen .sec-nav .sec-item.is-active::before { mix-blend-mode: normal; opacity: .6; }
.screen .sec-nav .sec-item.is-active:active { transform: scale(.97); background: var(--glass-bg); }

/* перетекание капсулы каплей (js/liquid-switch.js): мессенджер и полоска подстраниц. На время капли — без CSS-переходов ширины */
.lq-goo { position: absolute; z-index: 0; overflow: visible; pointer-events: none; }
.lq-goo g { fill: rgb(12 12 12 / .94); }
.lq-on > :not(.lq-goo) { position: relative; z-index: 1; }
.sec-nav.lq-on .sec-item, .sec-nav.lq-on .sec-item__lbl { transition: none !important; }