/* =========================================================================
   BOTTOM-NAV-STRIP.CSS - нижняя панель телефона: одна полоса, не 7 коробок.
   Создан 26.08.2026. Подключается ПОСЛЕДНИМ в <head>, после
   deshablon-panels.css - это обязательно, иначе не победить его по каскаду.
   styles.css и mobile.css НЕ трогаю - чужие зоны, правки только здесь.

   ЗАДАЧА ВЯЧЕСЛАВА 26.08: "нижнюю панель надо как-то сделать... а то
   сжато всё криво как-то, сделай красивее плавнее всё, а не как отдельную
   каждую кнопку".

   ПРИЧИНА, СНЯТАЯ ЗАМЕРОМ (headless Chrome, 375x812, localhost).
   deshablon-panels.css написан для десктопных панелей (.card/.svc/.guard/
   .qcard) и в нём НЕТ ограничения по ширине экрана: правило
     .card, .svc, .guard, .qcard { border:1px solid var(--dp-line);
       background:var(--dp-wash); box-shadow:inset 0 1px 0 var(--dp-rim),
       var(--dp-seat); }
   действует и на телефоне, где .qcard - это ячейка нижней панели. Замер
   computed style одной ячейки на 375px до правки:
     border: 1px solid rgba(255,255,255,.24)
     background: linear-gradient(90deg, rgba(255,255,255,.075) ... )
     box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 30px -14px rgba(0,0,0,.72)
   Шесть таких ячеек подряд читаются как шесть отдельных карточек с
   собственной тенью и кантом, а не как одна панель. Кнопка «Рынок»
   (.panel-toggle, отдельный <button> вне .qnav) добавляла седьмую
   коробку - у неё свой кант var(--accent-line) и свой фон, из другого
   файла (styles.css), но с тем же эффектом обособления.

   ВЫБРАННЫЙ СПОСОБ ИЗ ТРЁХ, ПРЕДЛОЖЕННЫХ В ЗАДАНИИ: снять рамку/фон/тень
   с каждой ячейки и оставить ОДНУ общую подложку. Она уже есть и её не
   нужно создавать: .side--left .qnav в styles.css несёт
   background:rgba(12,13,17,.94) + border-top + blur на весь ряд. Просто
   деshablon-panels.css рисует поверх неё семь личных подложек.
     - Прокручиваемая лента ОТКЛОНЕНА: 6 целей + кнопка рынка помещаются
       без переноса и без горизонтальной прокрутки на 375 и на 320
       (замер ниже) - вводить скролл в первичной навигации means прятать
       часть целей за лишним жестом ради проблемы, которой при этой
       ширине уже нет.
     - Группировка редких пунктов в "Ещё" ОТКЛОНЕНА: это правка
       ИНФОРМАЦИОННОЙ архитектуры (нужно подменю и JS) под ВИЗУАЛЬНУЮ
       жалобу ("не как отдельную кнопку"), и она разошлась бы с шапкой
       и подвалом, где те же 6 пунктов лежат плоским списком без "Ещё".

   ЗАМЕР ДО ПРАВКИ:
     375x812: 6 ячеек по 53.5x62.2px, у каждой свой border+background+
       box-shadow (см. выше). Кнопка «Рынок» 46x58, кант var(--accent-line).
       Подпись «Гарантии» рвётся многоточием («Гарант…») - теснота видна
       глазом на скриншоте. Горизонтальной прокрутки страницы нет.
     320x568: 6 ячеек по 46.66x61px, та же коробочная рамка на каждой.
       Кнопка «Рынок» 34x58 - ШИРЕ 44px кнопка не бывает ни разу, ширина
       на 10px ниже планки нажатия. Это старый дефект, не рождён этой
       правкой, но раз ряд и так перестраивается - чиню заодно (блок В).
       Горизонтальной прокрутки страницы нет.
   ЗАМЕР ПОСЛЕ - в отчёте задачи, метод тот же (getBoundingClientRect по
   .qcard и .panel-toggle на обеих ширинах после подключения файла).
   ========================================================================= */

/* -------------------------------------------------------------------------
   А. ОДНА ПОДЛОЖКА ВМЕСТО СЕМИ. Снимаем персональный кант/фон/тень с
   каждой ячейки нижней панели и с кнопки «Рынок». Подложку по-прежнему
   держит .side--left .qnav (не трогаю - она общая и уже одна на весь ряд).
   Селектор длиннее, чем в deshablon-panels.css (3 звена против 1), поэтому
   побеждает по весу селектора, а не только по порядку файла - override
   останется верным, даже если deshablon-panels.css когда-нибудь подключат
   позже этого файла по ошибке.
   ------------------------------------------------------------------------- */
@media (max-width:1199px){
  .side--left .qnav .qcard,
  .side--left .qnav .qcard:hover,
  .side--left .qnav .qcard:focus-visible,
  .side--left .qnav .qcard.is-current{
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  /* Кнопка «Рынок» - седьмая ячейка того же ряда, а не отдельная таблетка.
     Геометрию (позицию, ширину/высоту, отступы) не трогаю - она задана
     в mobile.css и согласована с сеткой .qnav. Снимаю только личную
     "коробочность": кант, скругление, собственный фон. Полоса под ней -
     тот же .qnav, других слоёв фона у кнопки не остаётся. */
  .panel-toggle{
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}

/* -------------------------------------------------------------------------
   Б. ПРИКОСНОВЕНИЕ ПЛАВНОЕ, НО ТОЛЬКО TRANSFORM/OPACITY.
   Рамка и фон, которые раньше плавно меняли цвет при hover/tap
   (transition: border-color, background-image, box-shadow из
   deshablon-panels.css), теперь ничего не меняют - им нечего красить на
   плоской подложке. Отклик на нажатие переносится на разрешённые
   свойства: лёгкое сжатие + лёгкое затемнение. Гашение по
   prefers-reduced-motion обязательно и стоит ниже отдельным блоком.
   ------------------------------------------------------------------------- */
@media (max-width:1199px){
  .side--left .qnav .qcard,
  .panel-toggle{
    transition: transform .16s ease, opacity .16s ease;
  }
  .side--left .qnav .qcard:active,
  .panel-toggle:active{
    transform: scale(.94);
    opacity: .82;
  }
}
@media (prefers-reduced-motion: reduce){
  .side--left .qnav .qcard,
  .panel-toggle{
    transition: none;
  }
  .side--left .qnav .qcard:active,
  .panel-toggle:active{
    transform: none;
    opacity: 1;
  }
}

/* -------------------------------------------------------------------------
   В. ПОЛ НАЖАТИЯ 44px НА САМОМ УЗКОМ ЭКРАНЕ (320-374px).
   Замер до: кнопка «Рынок» была 34x58 - ширина на 10px ниже планки.
   Дорожка под неё в сетке росла с 36px, кнопка занимала ровно дорожку.
   Поднимаю обе до 44px. Шесть ячеек навигации от этого не мельчают:
   на 320px ширина ячейки была 46.66px, после правки -
   (320 - 2*2px полей контейнера - 44px) / 6 = 45.33px - по-прежнему
   выше планки 44px, просадка на 1.33px против прежнего значения, и
   она смотрит только в ширину, высота ячейки (61px) не меняется.
   ------------------------------------------------------------------------- */
@media (max-width:374px){
  .side--left .qnav{
    grid-template-columns: repeat(6, minmax(0,1fr)) 44px;
  }
  .panel-toggle{
    width: 44px;
  }
}
