/* МЕНЮ РАЗДЕЛОВ И ВИДОВ — файл дорожки рамки (`docs/spec/u1-navigation.md`, Р-6).

   🔴 НИ ОДНОГО КОДА ЦВЕТА В ЭТОМ ФАЙЛЕ. Только имена из `tokens.css`: UI строится тремя
   дорожками сразу (9А.0б), и набери каждая свой зелёный — на одной странице окажется три
   разных зелёных, причём разъедутся они молча, браузер на несовпадение оттенков не жалуется.
   Нужен цвет, которого в `tokens.css` нет, — это разговор с координатором, а не строка здесь.

   🔴 ПЕРЕСОБРАНО ВОЛНОЙ 3 (спецификация `docs/spec/v4-new-structure.md`, раздел 1, п. 3).
   ⛔ ОТДЕЛЬНОЙ ПОЛОСЫ РАЗДЕЛОВ БОЛЬШЕ НЕТ. Она стояла второй строкой под шапкой на каждой
   странице сайта и занимала место дважды: сама по себе и вместе с шапкой, которая волной 3
   стала закреплённой. Теперь тот же список — ВЫПАДАЮЩИЙ СЛОЙ ПОД ВКЛАДКОЙ «КАТАЛОГ»,
   а разметка его не изменилась ни на строку (`_menu.html`): переехало место, а не устройство.

   ⚠️ ОТСЮДА ГЛАВНАЯ ПЕРЕМЕНА В ЭТОМ ФАЙЛЕ: `.menu__list` был ГОРИЗОНТАЛЬНОЙ полосой
   с боковой прокруткой, стал ВЕРТИКАЛЬНЫМ столбиком внутри слоя. Вместе с прокруткой ушёл
   и повод, по которому на телефоне список не имел права всплывать: обрезать его больше нечему.
   Всплывающим он там всё равно не делается — см. раздел «палец» ниже, довод другой и он
   про закреплённую шапку.

   🔴 ПРЕЖНЕЕ РЕШЕНИЕ, КОТОРОЕ ОСТАЛОСЬ В СИЛЕ ЦЕЛИКОМ — правки Кирилла 01.08.2026, пункты 1
   и 4. Дословно: «должны не открываться а быть выпадающим списком при наведении, при
   отведении - список пропадает» и «что за выпадающее зеленая площадь и сдвиг всей страницы
   при нажатии на категорию?». Ни одного правила состояния у выпадения нет: гасить нечего,
   потому что нечего было включать.

   🔴 ДВА РАЗНЫХ УСТРОЙСТВА — ДВА РАЗНЫХ СПОСОБА, И РАЗВОДИТ ИХ ПРИЗНАК `hover`, а не ширина
   экрана. Ширина врёт: планшет бывает шире ноутбука, а пальцем по нему всё равно тычут.

   | Что у человека            | Как открывается                  | Где лежит список          |
   |---------------------------|----------------------------------|---------------------------|
   | мышь (`hover: hover`)     | наведение на вкладку, уход гасит | НАД страницей, не двигает |
   | палец (`hover: none`)     | щелчок по подписи, второй гасит  | в потоке раскрытой шапки  |

   ⚠️ НА ТЕЛЕФОНЕ СПИСОК ОСТАЁТСЯ В ПОТОКЕ, И ЭТО РЕШЕНИЕ, А НЕ НЕДОДЕЛКА. Там сама шапка
   закреплена у верхнего края экрана и вкладки уже раскрыты внутри неё; всплывающий слой
   поверх закреплённой шапки означал бы второй плавающий слой над первым — и его пришлось бы
   удерживать в границах экрана счётом, то есть скриптом. Растущая вниз от края экрана шапка
   делает то же самое бесплатно.

   Мобильный вид первым (3.3): каталог растений смотрят с телефона на участке. */

/* 🔴 СЛОЙ, А НЕ ПОЛОСА. Спрятан по умолчанию и показывается ровно двумя способами ниже,
   каждый в своём мире ввода. Общего показа нет вовсе: правило, поставленное здесь, действовало
   бы и там, где его не гасит ни уход курсора, ни второе нажатие, — то есть вернуло бы
   «открылось и не закрывается» (п. 1 правок Кирилла).

   Подложка — панель, а не зелёная площадь (п. 4): тот же тон, что у карточки, и граница
   по краю. На тёмной гамме именно граница отделяет всплывший слой от страницы под ним; тень
   для этого не годится — она набирается кодом цвета, а кодов цвета в этом файле нет.

   🔴🔴 СЛОЙ ПЕРЕКРАШЕН 06.08.2026. Требование Кирилла, дословно: «всплоывающее окно имеет
   черезчур зеленый цвет, хочу чуть более нейтральный и прозрачный, как у надписи „растет
   средне“, вот такой же ui попап по стилю должен быть».

   Что было и почему выглядело зелёным: подложкой стояла `--fon-kartochki` — краска в зелень,
   глухая на 86 % (значение смотреть в `tokens.css`, здесь оно набрано быть не может),
   а поверх неё названия разделов были набраны ЗЕЛЁНЫМ (`--akcent`) и полужирным. Зелёный
   текст на зеленоватой плите и есть то самое «черезчур зелёное».

   ⚠️ Код краски в этой строке стоял дословно и покраснел на сторожe цветов (`test_9a_0v_01`):
   он читает файл целиком, вместе с пояснениями, и находит в них ровно то, что ищет. Это
   не придирка сторожа — в файле дорожки кода цвета не должно быть даже в комментарии,
   иначе следующее окно скопирует его из объяснения в правило.

   Что стало: `--steklo-panel` — нейтральное тёмное стекло, та же роль, что у панели корзины
   и у окна помощника; буквы у всех строк одинаковые и светлые (правила ниже).

   ⚠️ РАЗМЫТИЕ ПОД СЛОЕМ — ВЫНУЖДЕННОЕ, И ЭТО НАДО НАЗВАТЬ ВСЛУХ. В палитре записано
   «второго `backdrop-filter` на сайте быть не должно»: размытие браузер пересчитывает каждый
   кадр, и это самое дорогое, что есть на странице. Но прозрачный слой без размытия лежит
   поверх живого видео, и сквозь него читается движущийся кадр — то есть плата за прозрачность,
   которую попросил Кирилл, вносится здесь. Отличие от шапки: шапка размывает ВСЕГДА,
   а этот слой — только пока курсор стоит на вкладке «Каталог».

   ⚠️ Взято то же значение, что у шапки (`--steklo-blur-shapki`), а не своё: слой выпадает
   вплотную под её нижнюю кромку, и разное размытие читалось бы как ступенька на стекле. */
.menu {
  display: none;
  /* 🔴 СОБСТВЕННЫЙ КЕГЛЬ — правка Кирилла 11.08.2026: меню крупнее примерно на треть, а шапку
     не раздуваем (кегль шапки держит предел высоты 80 точек). */
  font-size: 1.12em;
  /* 🔴 ШРИФТ НЕ НАБИРАЕТСЯ ЗДЕСЬ ВОВСЕ — он наследуется от полосы шапки, над которой это
     меню выпадает. Слово Кирилла 12.08.2026: «шрифт ставь как у слова DERVO белое на главной,
     всем этим словам в шапке», и в перечень он вписал сами разделы — «Плодовые деревья,
     Хвойные, Декоративные лиственные…».

     Этим снято правило от 11.08.2026, ставившее меню шрифт основного текста: тогда меню
     набиралось как текст страниц, теперь — как вкладки, под которыми оно и живёт. */
  background: var(--steklo-panel);
  backdrop-filter: var(--steklo-blur-shapki);
  border: 1px solid var(--frame);
  border-radius: var(--skruglenie);
}

/* ⛔ Подчёркивания в меню нет ни в покое, ни при наведении — правка Кирилла 11.08.2026. */
.menu a,
.menu a:hover { text-decoration: none; }

/* Столбик разделов. ⛔ Ни боковой прокрутки, ни переноса: список стоит внутри слоя, и слой
   растёт под него сам. Высоту слою НЕ задаём — фиксированная превратила бы всплывающий
   второй уровень в прокрутку внутри прокрутки, а его самого обрезала бы по краю. */
.menu__list {
  display: flex;
  flex-direction: column;
  gap: 0.02em;
  margin: 0;
  padding: 0.2em;
  list-style: none;
}

/* Пункт не сжимается: сжатые названия разделов переносились бы по буквам. */
.menu__item { flex: 0 0 auto; }

/* 🔴 ГАЛОЧКА, КОТОРОЙ ОТКРЫВАЮТ РАЗДЕЛ ПАЛЬЦЕМ. Спрятана размером и прозрачностью, а НЕ
   `display: none` и не `visibility: hidden`, и это не стилистическая мелочь: спрятанная
   любым из тех двух способов она выпала бы из порядка обхода клавиатурой, и меню перестало бы
   открываться у человека без мыши — молча, как всегда бывает с недоступностью.

   `position: absolute` убирает её из потока: место под неё в слое не отводится. */
.menu__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

/* Название раздела. Это ПОДПИСЬ к галочке (`label`), а не заголовок и не ссылка: нажатие
   по ней переключает галочку силами браузера, без единой строки кода. Свой знак «▾» ставится
   значком после текста — так он одинаков во всех браузерах и не зависит от их рисунка.

   🔴 БУКВЫ СВЕТЛЫЕ, А НЕ ЗЕЛЁНЫЕ, И ВЕС 500, А НЕ 700. Требование Кирилла 06.08.2026,
   дословно: «буквы то белые то ззеленые. Берем одинаковые буквы».

   Так и было: названия разделов зелёные полужирные, названия видов под ними — светлые.
   Две краски в одном списке читаются как два разных сорта строк, хотя разница между ними
   только в уровне вложенности. Зелёный на сайте — цвет ДЕЙСТВИЯ, а не цвет заголовка;
   он остаётся здесь ровно на наведении, где и означает действие.

   ⚠️ Вес 500 — тот же, что у вкладок шапки, над которыми этот список выпадает. Шрифт
   наследуется от `.header` и здесь не набирается: он один на весь блок шапки и каталога. */
/* 🔴 ПРОМЕЖУТКИ МЕЖДУ СТРОКАМИ МЕНЮ УВЕЛИЧЕНЫ В ПОЛТОРА РАЗА — 0,42 эма вместо 0,28.
   Кирилл 12.08.2026 перечислил и вкладки, и разделы каталога одним списком и попросил
   «расстояние больше в полтора раза, равномерно». Наверху полосы это боковые поля вкладок,
   здесь — поля строк по вертикали: список стоит столбиком, и «между словами» у него
   означает сверху и снизу. */
.menu__name {
  display: block;
  padding: 0.42em 0.7em;
  color: var(--tekst);
  font-weight: 400;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.menu__name::after { content: " ▾"; color: var(--tekst-tihiy); }

/* Обвод для клавиатуры. Сама галочка невидима, поэтому знак фокуса обязан появиться на её
   подписи — иначе человек, идущий по странице клавишей, видит, что список открылся,
   но не видит, на чём он стоит. `:focus-visible`, а не `:focus`: мышь обвода не получает. */
.menu__toggle:focus-visible + .menu__name {
  outline: 2px solid var(--akcent);
  outline-offset: -2px;
}

/* 🔴 Второй уровень спрятан по умолчанию — тот же довод, что у самого слоя выше: общего
   показа нет, показ живёт внутри своего мира ввода. */
.menu__species-list {
  display: none;
  min-width: 14em;
  margin: 0;
  padding: 0.45em 0.75em 0.55em;
  list-style: none;
  /* Тот же стеклянный слой, что у списка разделов, и по той же причине — разбор у `.menu`.
     Две подложки разного тона в одном выпадении читались бы как два разных окна. */
  background: var(--steklo-panel);
  backdrop-filter: var(--steklo-blur-shapki);
  border: 1px solid var(--frame);
  border-radius: var(--skruglenie);
}

/* «Все …» — первая строка списка и его выход на страницу раздела. Отделена линией снизу,
   потому что это единственная ссылка на другой уровень: остальные ведут на товар. */
.menu__all {
  /* Стрелка держится со строкой: при переносе она уезжала на вторую строку одна. */
  white-space: nowrap;
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--frame);
  /* 🔴 ВЕС 500 — ТОТ ЖЕ, ЧТО У ВКЛАДОК ШАПКИ (`.tabs__link`). Правка 11.08.2026: здесь
     стояло 700, у названия вида 600, и Кирилл прочитал меню как «убогий» текст — жирные
     начертания в тонкой шапке выглядят дёшево. Ссылку на раздел отличает не вес, а линия
     под ней и отступ.

     ⚠️ Вес 400 и разрядка .02em — тот же приём, что у подписей калькулятора изгороди
     (`hedge.css`, `.hedge__label`). Правка 11.08.2026: Кирилл показал на них пальцем —
     «там буквы элитные и дорогие», а меню при весе 500 и крупном кегле читалось плотным. */
  font-weight: 400;
  letter-spacing: .02em;
}

/* 🔴 ОБРЕЗАНИЕ ВМЕСТО ПЕРЕНОСА — решение Кирилла 11.08.2026: «обрезание делай, в чём
   сложность?». Длинные названия рвались на две строки, и стрелка «Все …» уезжала вниз
   одна: «Все декоративные лиственные →», «Пион молочноцветковый». Окно при этом остаётся
   прежней ширины — раздувать его он не просил. */
.menu__name,
.menu__species-name,
.menu__all > a,
.menu__cultivar > a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.menu__species { margin-top: 0.45em; }

/* Вид — подпись группы, а не ссылка: страницы вида не существует.
   ⚠️ ШРИФТ ЗДЕСЬ БОЛЬШЕ НЕ НАБИРАЕТСЯ. Прежде вид набирался заголовочным начертанием, чтобы
   отличаться от сортов под ним; с 06.08.2026 весь блок шапки и каталога идёт ОДНИМ шрифтом
   (требование Кирилла), и второе объявление семейства здесь означало бы ровно то, чего он
   просил не делать. Отличает вид от сорта вес, а не шрифт. */
.menu__species-name {
  display: block;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--tekst);
}

.menu__cultivars {
  margin: 0.1em 0 0;
  padding: 0 0 0 0.75em;
  list-style: none;
}

.menu__cultivar { padding: 0.08em 0; }

/* ── ПАЛЕЦ: наведения нет, открывает щелчок ──────────────────────────────────
   Признак `hover: none` — это ровно «навести курсор на этом устройстве нельзя». Оба уровня
   разворачиваются В ПОТОКЕ раскрытой шапки, и шапка растёт вниз от края экрана.

   ⚠️ Второе нажатие по подписи гасит список — галочка снимается сама. Это то самое
   «не закрывается» из п. 1, вылеченное на телефоне; на мыши то же самое лечит уход курсора.

   ⛔ Ни одного `position: absolute` в этом мире, и это проверяется отдельно (`test_menu.py`):
   всплывающий слой поверх и без того закреплённой шапки пришлось бы удерживать в границах
   экрана счётом, то есть скриптом (шапка файла). */
@media (hover: none) {
  /* Слой занимает всю ширину раскрытой вкладки: пункт «Каталог» на телефоне выложен в строку
     (ссылка и подпись раскрытия рядом), и без своей строки список встал бы третьим соседом
     в той же строке, шириной в остаток. */
  .tabs__toggle:checked ~ .menu { display: block; flex-basis: 100%; }
  .menu__toggle:checked ~ .menu__species-list { display: block; }
  .menu__toggle:checked + .menu__name::after { content: " ▴"; }
}

/* ── МЫШЬ: наведение открывает, уход гасит ───────────────────────────────────
   🔴 Ни одного правила состояния: у выпадения нет памяти, гасить нечего. Ровно этого
   и требует п. 1 — «при отведении список пропадает». */
@media (hover: hover) {
  /* 🔴 СЛОЙ ПОД ВКЛАДКОЙ «КАТАЛОГ». Точка отсчёта — сама вкладка (`.tabs__item` получает
     `position: relative` в `site.css`), поэтому слой привязан к ней и не сдвигает НИЧЕГО:
     его в потоке страницы нет вовсе — то самое, чего требовал п. 4.

     ⚠️ Собственный большой `z-index` слою НЕ НУЖЕН: закреплённая шапка сама лежит выше
     страницы (`site.css`, слой 8), а всё, что внутри неё, всплывает вместе с ней. Число
     здесь работает только среди соседей по шапке. */
  /* 🔴 ПЕРЕМЫЧКА ПОД ВКЛАДКОЙ — зазор 11 точек (0,3 см). Стоит на ПУНКТЕ вкладки, а не на
     окне: пока курсор идёт вниз от «Каталог», он ещё не дошёл до `.menu`, и перемычка на
     окне не спасает — наведение гаснет в мёртвой полосе. */
  .tabs__item--catalog::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 11px;
    top: 100%;
  }

  .menu {
    position: absolute;
    top: calc(100% + 11px);
    left: 0;
    z-index: 5;
    /* Ширина задана снизу, а не сверху: вынутый из потока блок сжимается по содержимому,
       и слой из двух коротких названий разделов оказался бы уже собственной вкладки. */
    min-width: 14em;
  }

  /* Вторая перемычка — зазор между вкладкой и верхом окна, когда курсор уже над окном. */
  .menu::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 11px;
    bottom: 100%;
  }

  /* 🔴 Показ ровно двумя признаками, и второй — не украшение. Наведение открывает; фокус
     ВНУТРИ слоя держит его открытым, пока человек идёт по нему клавишей. Без второй строки
     список схлопывался бы в тот момент, когда до него дошли.

     ⚠️ Наведение ловится на ПУНКТЕ вкладки, а не на её ссылке: слой по разметке лежит внутри
     пункта, поэтому пока курсор идёт по слою, наведение держится. Наводись правило на ссылку —
     слой гас бы под курсором на полпути к первой строке. */
  .tabs__item--catalog:hover > .menu,
  .tabs__toggle:focus-visible ~ .menu,
  .menu:focus-within {
    display: block;
  }

  /* Точка отсчёта для второго уровня — сам раздел. */
  .menu__item { position: relative; }

  /* Перемычка вбок — зазор 11 точек между первым и вторым окном. */
  .menu__item::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 11px;
  }

  /* 🔴 Второй уровень уезжает ВБОК от своего раздела, а не вниз: слой разделов и сам стоит
     столбиком, и раскрытие вниз раздвигало бы его — то есть вернуло бы «сдвиг страницы»,
     только внутри слоя.

     ⚠️ Уезжает ВПРАВО, и это безопасно ровно потому, что «Каталог» — крайняя ЛЕВАЯ вкладка
     шапки: справа от слоя всегда есть окно. Прежнее правило `:last-child`, разворачивавшее
     последний пункт влево, снято вместе со своим поводом — оно спасало полосу, у которой
     последний раздел стоял у правого края экрана, а полосы больше нет.

     Длинный раздел не растягивает страницу вниз до бесконечности: восемь видов по шесть
     сортов — это полсотни строк. ⛔ Прокрутки нет — при нехватке высоты ужимаются отступы
     строк, а не кегль и не число разделов (правка Кирилла 11.08.2026). */
  .menu__species-list {
    position: absolute;
    top: 0;
    left: calc(100% + 11px);
    z-index: 5;
  }

  .menu__species-list::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 11px;
    right: 100%;
  }

  .menu__item:hover > .menu__species-list,
  .menu__species-list:hover,
  .menu__toggle:focus-visible ~ .menu__species-list,
  .menu__species-list:focus-within {
    display: block;
  }

  /* ⚠️ Отклик — ПЕСОЧНЫЙ, а не зелёный, и это то же решение 06.08.2026, что у ссылок шапки:
     зелёных надписей в блоке шапки и каталога не остаётся ни одной. Зелёный на сайте
     означает действие — кнопку, — а раскрытие списка действием не является. */
  .menu__item:hover > .menu__name { color: var(--akcent-detal); }
  .menu__item:hover > .menu__name::after { content: " ▸"; }
}