/* ===== МОБИЛЬНАЯ НАВИГАЦИЯ (≤768px) =====
   Редизайн Joe, см. чат 2026-08-12. Заменяет header-tier-1/header-tier-2
   (десктопная шапка с полным списком разделов) нижним меню из 4 пунктов;
   остальные разделы, включая переключатель продукта (Облигации/Акции/
   Валюта/Индексы), - в шторке "Ещё". Отдельной мобильной шапки нет (была,
   убрана по просьбе - см. чат 2026-08-12: логотип+бейдж не нужны, если всё
   равно есть нижнее меню). Десктоп (>768px) не тронут: всё здесь живёт
   только внутри @media (max-width: 768px), тот же брейкпоинт, что в
   header.css. .app-toolbar (поиск/фильтры на Обзоре) не скрываем -
   отдельная задача перенести его в горизонтальные quick-chips. */

.bottom-nav,
.sheet-backdrop,
.sheet {
  display: none;
}

@media (max-width: 768px) {
  .header-tier-1,
  .header-tier-2 {
    display: none;
  }

  /* .app-header держит z-index:1000 (header.css) - выше и бэкдропа (70), и
     самой шторки (80). На Обзоре, где .app-toolbar (поиск) внутри .app-header
     остаётся видимым, это перекрывало верх открытой шторки и её бэкдроп -
     тап поверх строки поиска не закрывал шторку, потому что клик получал
     сам .app-header, а не бэкдроп под ним (баг, см. чат 2026-08-12). */
  .app-header {
    z-index: 20;
  }

  /* Без мобильной шапки первый видимый контент (в т.ч. строка поиска
     .app-toolbar на Обзоре) иначе оказывается впритык к верхнему краю
     экрана - в установленном PWA (standalone, см. site.webmanifest) это
     заходит под вырез/статус-бар iPhone, т.к. viewport-fit=cover (layout.ejs)
     отдаёт контенту всю область экрана. env() возвращает 0 в обычном
     Safari/Chrome, поэтому здесь ничего не меняется вне standalone. */
  body {
    padding-top: env(safe-area-inset-top);
    /* 72px = ~70px высота пилюли (замерено Playwright, iPhone 16 Pro
       393×852), без зазора - пилюля прижата к верхней границе safe-area
       (см. .bottom-nav ниже) - пересчитано под App Store-раскладку (мокап,
       чат 2026-08-20, было 79px при flex-по-контенту с задвоенным
       паддингом пилюля+пункт). +2px запаса на неточность замера. */
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  /* ---------- нижнее меню: плавающая пилюля, 5 равных колонок ----------
     Редизайн чат 2026-08-20 (мокап согласован, https://claude.ai/code/artifact/485ec16d-44cf-48b2-a17b-db7a12ca0225) -
     эталон App Store: та же плавающая пилюля (форма не менялась с чата
     2026-08-16), но пункты растянуты на всю ширину равными grid-колонками
     вместо flex-по-контенту, паддинг пилюля+пункт больше не задваивается,
     иконки крупнее. Подписи вернули ещё в редизайне 2026-08-16 (были
     sr-only-скрыты в icon-only эксперименте, чат 2026-08-15 - оказалось
     нечитаемо без них). Активность вкладки - duotone-иконка (outline →
     filled, см. layout.ejs .bn-icon-outline/.bn-icon-filled) + цвет, без
     фона-чипа - тот же приём, что в GitHub/Т-Банк и на референсе Apple. */
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    position: fixed;
    left: 50%;
    /* Без доп. зазора сверх safe-area-inset-bottom - тот сам по себе уже
       даёт достаточный отступ от зоны свайпа home indicator (~34pt на
       iPhone), 2px разницы с прошлой правкой (чат 2026-08-20) на глаз не
       читались, пилюля буквально садится на верхнюю границу safe area. */
    bottom: env(safe-area-inset-bottom);
    transform: translateX(-50%);
    /* Растягиваем почти во всю ширину экрана (иначе колонки узкие и
       подписи-длинные, вроде "Эмитенты", наезжают друг на друга), но
       ограничиваем max-width - на широком конце брейкпоинта (до 768px,
       напр. iPad в портретной ориентации) 5 колонок иначе расползаются
       на неоправданно большие интервалы. */
    width: calc(100vw - 20px);
    max-width: 460px;
    z-index: 60;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 3px;
    box-shadow: var(--shadow);
  }

  .bn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--text-faint);
    padding: 6px 2px 7px;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    position: relative; /* контейнер для .bn-ripple - см. mobile-nav.js */
    overflow: hidden; /* обрезает пузырь по скруглённой форме кнопки */
    -webkit-tap-highlight-color: transparent; /* свой пузырь вместо системной серой вспышки iOS/Android */
  }

  /* Подсветка при тапе (см. чат 2026-08-26, mobile-nav.js
     setupBottomNavPressHighlight) - заливка всей кнопки скруглённым
     прямоугольником, как highlighted-состояние вкладок в iOS (26.6), а не
     растущий из точки касания пузырь (первая версия в тот же день - заменена
     по просьбе). ::before, не отдельный span - подсветке не нужна точка
     касания, только форма самой кнопки, псевдоэлемент проще и не плодит DOM-
     узлы на каждый тап. inset:2px - подсветка чуть меньше кнопки, тот же приём,
     что у активного .bn-item (просвет по краю), а не заливка край-в-край. */
  .bn-item::before {
    content: '';
    position: absolute;
    inset: 2px;
    /* 999px - CSS сам ужимает радиус до половины меньшей стороны, получается
       настоящая "таблетка" (stadium), как подсветка активной вкладки в
       Telegram на iOS (референс, чат 2026-08-26) - 14px давал скорее
       скруглённый прямоугольник, а не настоящую капсулу. */
    border-radius: 999px;
    background: var(--accent-soft);
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
    /* Без этого позиционированный ::before (z-index:auto) красится ПОСЛЕ
       обычного inline-контента кнопки (см. CSS2.1 порядок стекового
       контекста) - иконка и подпись оказывались под заливкой, невидимы. */
    z-index: -1;
  }
  .bn-item.bn-pressed::before {
    opacity: 1;
    transform: scale(1);
  }
  /* Активная вкладка держит ту же таблетку постоянно, не только во время
     тапа (см. чат 2026-08-26, референс - подсветка "Чаты" в Telegram на
     iOS: там подсвечен именно ТЕКУЩИЙ раздел, а не только момент нажатия).
     Специфичность (.bn-item.active::before) выше базового правила выше по
     файлу, порядок в каскаде тут не важен. */
  .bn-item.active::before {
    opacity: 1;
    transform: scale(1);
  }
  @media (prefers-reduced-motion: reduce) {
    .bn-item::before { transition: none; }
  }
  .bn-item svg { width: 24px; height: 24px; }
  .bn-item span {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  /* Duotone: показываем outline-вариант по умолчанию, filled - только на
     активной вкладке. У "Ещё" filled-варианта нет (см. layout.ejs). */
  .bn-item .bn-icon-filled { display: none; }
  .bn-item.active .bn-icon-outline { display: none; }
  .bn-item.active .bn-icon-filled { display: block; }

  .bn-item.active { color: var(--accent); }
  .bn-item.active span { font-weight: 700; }
  .bn-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

  /* Избранное - звезда крупнее остальных иконок; цвет теперь по общей
     duotone-логике (серая outline неактивно → --star золотая filled на
     /favorites), а не жёстко #E4293D всегда, как было при icon-only (тот
     хардкод был у иконки без подписи - с подписью тем же цветом красилось
     бы и слово "Избранное" вне активной вкладки, что читалось как ошибка
     состояния). Согласовано в мокапе, чат 2026-08-16. */
  .bn-item-fav svg { width: 25px; height: 25px; }
  .bn-item-fav.active { color: var(--star); }

  /* ---------- шторка «Ещё» ---------- */
  .sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 10, 0.4);
    z-index: 70;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  .sheet-backdrop.open { opacity: 1; pointer-events: auto; }

  .sheet {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    background: var(--surface);
    border-radius: 16px 16px 0 0;
    box-shadow: var(--shadow);
    padding: 10px 18px calc(22px + env(safe-area-inset-bottom));
    transform: translateY(105%);
    transition: transform 0.25s ease;
    max-height: 78vh;
    overflow-y: auto;
  }
  .sheet.open { transform: translateY(0); }

  .sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-strong);
    margin: 4px auto 14px;
  }
  .sheet-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
  .sheet-sub { margin: 4px 0 12px; font-size: 12px; color: var(--text-faint); }

  .sheet-list { display: flex; flex-direction: column; }
  .sheet-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 4px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
  }
  /* border-top всех строк, кроме первой в списке - именно :not(:first-child),
     а не соседский .sheet-row + .sheet-row: между строкой-тогглом и
     следующей обычной строкой теперь может стоять её раскрывающийся блок
     (.sheet-product-list/.sheet-about-text, см. чат 2026-08-12) - div, не
     .sheet-row, поэтому соседский селектор эту границу бы пропустил. */
  .sheet-row:not(:first-child) { border-top: 1px solid var(--border); }
  .sheet-row svg { width: 19px; height: 19px; color: var(--text-muted); flex-shrink: 0; }
  .sheet-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

  /* Строка-тоггл (Продукт/О проекте) - значение выбранного пункта и шеврон
     прижаты к правому краю, шеврон разворачивается при aria-expanded. */
  .sheet-row-toggle .sheet-row-value {
    margin-left: auto;
    margin-right: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-faint);
  }
  .sheet-row-chevron {
    width: 16px;
    height: 16px;
    color: var(--text-faint);
    flex-shrink: 0;
    transition: transform 0.15s;
  }
  .sheet-row-toggle[aria-expanded="true"] .sheet-row-chevron { transform: rotate(180deg); }

  /* Раскрывающиеся блоки - привязаны к своему тоглу (без границы сверху,
     чтобы читались одним целым с ним), следующая обычная строка отделяется
     от них через .sheet-row:not(:first-child) выше. .product-switch-item/
     .soon уже стилизованы глобально в header.css (не привязаны к
     .product-switch-menu) - здесь только раскладка списком без вложенного
     дропдауна: шторка сама по себе уже играет его роль. */
  /* :not([hidden]) - иначе display:flex здесь (обычное авторское правило)
     перебивает display:none из браузерного [hidden] (у него ниже приоритет,
     чем у любого авторского CSS, независимо от специфичности) - шторка
     открывалась с уже развёрнутым списком продуктов (баг, см. чат
     2026-08-12). .sheet-about-text ту же ошибку не даёт - у него нет своего
     display, поэтому родной [hidden] всегда срабатывает. */
  .sheet-product-list:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 0 12px 31px;
  }

  .sheet-about-text {
    padding: 0 4px 13px 35px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-muted);
  }
  .sheet-about-text p { margin: 8px 0 0; }
  .sheet-about-text a { color: var(--accent); }
}