/* КАЛЬКУЛЯТОР ЖИВОЙ ИЗГОРОДИ. Файл подключает только страница `/kalkulyator-izgorodi/`.

   🔴 НИ ОДНОГО КОДА ЦВЕТА. Все цвета — именами ролей из `tokens.css`, и это не стиль, а способ
   не получить три разных зелёных на одной странице. Проверяется машиной сплошным проходом
   по всем файлам стилей (`core/site/tests/test_catalog_appearance.py`, проверка 9А-0в-01).

   ⛔ Ни одного чужого объекта: `body`, `main`, `.header`, `.footer`, `.zvonok`, `.availability`
   принадлежат рамке сайта (`site.css`), `.page`, `.page__lead`, `.page__note` — страницам
   вкладок (`pages.css`). Страница ими ПОЛЬЗУЕТСЯ и не переопределяет ни одного (🅱️5),
   с ЕДИНСТВЕННЫМ исключением ниже, у `.page__note` — и оно про краску, а не про устройство.

   🔴 ПРАВКИ КИРИЛЛА ПО СНИМКУ 06.08.2026 — их здесь шесть, и каждая стоит у своего правила:
   симметрия полей · центровка заголовков · строка подсказки в потоке · бронзовая обводка
   как на «Наших работах» · движение · свой выпадающий список вместо системного.
   Дословно про итог: «Калькулятор должен выглядеть ДОРОГО». */

/* 🔴 ИСКЛЮЧЕНИЕ: КРАСКА `.page__note` НА ЭТОЙ СТРАНИЦЕ. Замер 11.08.2026 (`text-contrast.py`)
   нашёл Lc 21 при нужных 90 у справки под таблицей — она набрана `.page__note` и красится
   `--tekst-tihiy`, а на живом видео это неразличимо. Правится ЗДЕСЬ, а не в `pages.css`:
   тот же класс работает на «Сотрудничестве» и «Контактах», их правит соседняя ветка
   `stranicy-vkladok`, и правка общего файла задела бы её работу. `hedge.css` подключается
   только этой страницей, поэтому override ниже не выходит за её пределы (порядок подключения
   в `hedge.html`: `pages.css`, потом `hedge.css` — при равной специфичности побеждает
   последний файл). */
.page__note { color: var(--tekst-myagkiy); }

/* ── Центровка страницы ──────────────────────────────────────────────────── */
/* Заголовки и абзацы по центру, поля — нет: подпись над полем ввода, поставленная по центру,
   отрывается от своего поля, и глазу приходится искать, к чему она относится. */
.hedge__title { text-align: center; }
/* 🔴 КЕГЛЬ 24, А НЕ УНАСЛЕДОВАННЫЕ 18–15, И ЭТО ЗАМЕР ЧИТАЕМОСТИ, А НЕ ВКУС. По APCA размер
   входит в контраст наравне с краской: у колонки текста от 18 точек порог Lc 75, а у 24 он
   падает до 60 («не для чтения подряд»). Класс держит и вводку под заголовком (`.page__lead`,
   было 18,4 точки, Lc 62 при нужных 75 — не хватало 13 пунктов при уже максимально светлой
   краске текста), и справку под таблицей (`.page__note`, было 15,2 точки, Lc 21 при нужных 90).
   Подложки под текстом не заводим — она уже проверялась на первом экране главной 05–06.08.2026
   и была снята: Кирилл забраковал её по снимку («без подложки лучше»), разбор в `tokens.css`
   у `--steklo-panel-kalkulyator`. */
.hedge__lead {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--t-xl);
  text-align: center;
}

/* ── Панель калькулятора ─────────────────────────────────────────────────── */
/* 🔴 ОБВОДКА БРОНЗОВАЯ И НЕПРОЗРАЧНАЯ — ровно та же, что у разворотов «Наших работ»
   (`projects.css`, `.projects__frame .compare`) и у панели проектов на главной
   (`home.css`, `.blok--proekty`). Прямое требование Кирилла 06.08.2026: «добавь этой рамке
   нашу фирменную бронзово-золотую обводку 1в1 как на главной странице в разделе "наши работы"».

   ⛔ Прозрачные кромки (`--frame`) здесь не работают в принципе, и это уже замерено на панели
   главной: они белые с прозрачностью, а лежат поверх ЖИВОГО ВИДЕО, яркость под ними разная
   сверху и снизу — двух сторон рамки не видно вовсе. Непрозрачная краска из палитры этой
   зависимости не имеет.

   Стекло, а не сплошная заливка: под каждой страницей идёт закреплённое видео, и глухая
   панель вырезала бы в нём прямоугольник (спецификация v10, раздел 4).

   🔴 СВОЯ ПЛОТНОСТЬ, А НЕ `--steklo-panel`. Кирилл 11.08.2026 отчеркнул эту панель на снимке
   как слишком прозрачную; замер `text-contrast.py` подтвердил — подпись поля держала Lc 49
   при нужных 90. Токен общий (двенадцать мест по сайту, его правят два других окна прямо
   сейчас), поэтому здесь `--steklo-panel-kalkulyator` — те же числа плюс 0,12 альфы
   (`tokens.css`). */
.hedge {
  margin: var(--o-6) auto var(--o-5);
  padding: var(--o-6);
  border: 1px solid var(--akcent-detal);
  border-radius: var(--r-xl);
  background: var(--steklo-panel-kalkulyator);
  box-shadow: var(--ten-3);
}

/* 🔴 СЕТКА, А НЕ ДВЕ ГИБКИЕ СТРОКИ. Правка Кирилла: «все ui поехали». Гибкие строки давали
   полям разную ширину — замер на 1440 точках: 266 и 372 точки в первой строке, — и правые
   края четырёх полей не совпадали ни с чем. У сетки два столбца общие для всех строк,
   поэтому края совпадают по устройству, а не по подобранным числам.

   `align-items: start` обязателен: под полем шага стоит строка подсказки, и без него
   соседнее поле растянулось бы на её высоту. */
.hedge__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: start;
  gap: var(--o-4) var(--o-4);
  margin: 0 0 var(--o-5);
}

.hedge__field { margin: 0; }

/* 🔴 ЧИТАЕМОСТЬ ПОДПИСИ: КРАСКА, ВЕС И КЕГЛЬ, А НЕ ПОДЛОЖКА. Замер 11.08.2026: Lc 49 при
   нужных 90 у 15 точек тихой краски. `--tekst-tihiy` — краска для второстепенного текста
   НА СПЛОШНОМ ФОНЕ, а не для надписи поверх живого видео; здесь нужен `--tekst-myagkiy`
   («абзацы поверх живого фона», см. `tokens.css`). Кегль 15 → 17 и вес 700 вместе опускают
   порог APCA с 90 до 60 — то же правило, каким уже чинилась латынь на плитке каталога
   (`card.css`, `.card__latin`). */
.hedge__label {
  display: block;
  margin: 0 0 var(--o-2);
  color: var(--tekst-myagkiy);
  font-size: var(--t-m);
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow: var(--ten-teksta);
}

/* 🔴 `font: inherit` и `width: 100%` — обязательны обе строки. Браузер даёт полям формы
   свой шрифт и свою ширину, и без этих строк выпадающий список набирается системным шрифтом
   в 13 точек посреди страницы, набранной нашим в 17. Видно это только глазом. */
.hedge__select,
.hedge__input {
  width: 100%;
  padding: var(--o-3) var(--o-4);
  border: 1px solid var(--frame);
  border-radius: var(--r-s);
  background: var(--fon-spiska);
  color: var(--tekst);
  font: inherit;
  transition: border-color var(--hod), box-shadow var(--hod);
}

.hedge__select:hover,
.hedge__input:hover { border-color: var(--frame-navedenie); }

/* Свечение по краю вместо системной синей рамки: она приходит своим цветом мимо палитры. */
.hedge__select:focus,
.hedge__input:focus {
  border-color: var(--akcent);
  box-shadow: var(--ten-akcenta);
  outline: none;
}

/* ── Подсказка в знаке вопроса ───────────────────────────────────────────── */
/* Правка Кирилла 06.08.2026: «передвинь надпись в знак вопроса небольшой, при наведении
   на который будет появляться попап в таком же стиле как страница». */
.hedge__label--help { display: flex; align-items: center; gap: var(--o-2); }

.hedge__help { position: relative; display: inline-flex; }

/* Кружок ровно по высоте строки подписи: крупнее — и он спорит с самой подписью за внимание,
   мельче — по нему не попасть пальцем. */
.hedge__help-sign {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: 1px solid var(--akcent-detal);
  border-radius: var(--r-pill);
  background: none;
  color: var(--akcent-detal);
  font: inherit;
  font-size: var(--t-xs);
  line-height: 1;
  cursor: help;
  transition: background var(--hod), color var(--hod);
}

.hedge__help-sign:hover,
.hedge__help-sign:focus-visible {
  background: var(--akcent-detal);
  color: var(--list-temnyy);
  outline: none;
}

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

   ⚠️ Показывается и по наведению, и по фокусу внутри обёртки: на телефоне наведения
   не существует, и без второго условия подсказка была бы недоступна половине посетителей. */
.hedge__help-popup {
  position: absolute;
  z-index: 6;
  bottom: calc(100% + var(--o-2));
  left: 50%;
  width: 17rem;
  margin-left: -8.5rem;
  padding: var(--o-4);
  border: 1px solid var(--akcent-detal);
  border-radius: var(--r-m);
  background: var(--steklo-panel), var(--fon-glubokiy);
  box-shadow: var(--ten-3);
  color: var(--tekst-myagkiy);
  font-size: var(--t-xs);
  line-height: 1.45;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--hod), transform var(--hod), visibility var(--hod);
}

.hedge__help:hover .hedge__help-popup,
.hedge__help:focus-within .hedge__help-popup {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ── Кнопка «Посчитать» ──────────────────────────────────────────────────── */
/* Своя, а не `.knopka` главной: тот файл (`home.css`) на этой странице не подключён вовсе,
   и ссылка на его имя оставила бы кнопку голым текстом. По центру панели — она здесь одна
   и завершает форму. */
.hedge__submit {
  display: block;
  margin: 0 auto;
  padding: var(--o-3) var(--o-7);
  border: 1px solid var(--akcent-detal);
  border-radius: var(--r-pill);
  background: var(--steklo-fon);
  color: var(--tekst);
  font: inherit;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background var(--hod), border-color var(--hod), transform var(--hod);
}

.hedge__submit:hover {
  background: var(--steklo-fon-navedenie);
  transform: translateY(-1px);
}

.hedge__submit:active { transform: translateY(0); }

/* ── Итог ────────────────────────────────────────────────────────────────── */
/* Зелёная рамка, а не бронзовая, и это не разнобой: бронза на странице ведёт форму, зелёный —
   единственный цвет действия (`tokens.css`), и блок с ценой и кнопкой покупки принадлежит ему. */
/* 🔴 Отступ сверху — половина решения «список и итог не пересекаются». Вторая половина —
   потолок высоты списка, см. `.picker__list`. Правка Кирилла 06.08.2026: сначала «сдвинуть
   попап с "нужно растений" просто ниже немного», потом, когда одной ступени не хватило, —
   «сдвигаешь блок "НУЖНО РАСТЕНИЙ" вниз… ОНИ НЕ ДОЛЖНЫ ПЕРЕСЕКАТЬСЯ».

   ⚠️ Одним отступом это не лечится: сдвинь блок ещё ниже — и между панелью и итогом повиснет
   дыра на пустой странице, где список никто не раскрывал. Поэтому ступень здесь одна,
   а остальное добирает потолок списка. */
/* 🔴 ПЛОТНЕЕ НА 30 ПРОЦЕНТНЫХ ПУНКТОВ, СВОИМ ТОКЕНОМ. `--zalivka-glavnaya` трогать нельзя —
   он стоит ещё в шести местах. `--zalivka-kalkulyator-otvet` (`tokens.css`) — те же числа
   плюс 0,30, и положен ВТОРЫМ СЛОЕМ ПОВЕРХ плотного стекла формы (тот же приём, что
   у `.hedge__help-popup` выше): чистый зелёный такой плотности прямо по видео уходит
   в кислотный, тёмная подложка держит его в зелёном, а не в неоне. */
.hedge__result {
  margin: var(--o-8) auto var(--o-7);
  padding: var(--o-6);
  border: 1px solid var(--kromka-glavnaya);
  border-radius: var(--r-xl);
  background: var(--zalivka-kalkulyator-otvet), var(--steklo-panel-kalkulyator);
  box-shadow: var(--ten-2);
  text-align: center;
}

/* Главное число страницы. Заголовочным шрифтом и крупно: за ним сюда и пришли. */
.hedge__count {
  margin: 0 0 var(--o-5);
  font-family: var(--shrift-zagolovka);
  font-size: var(--t-xl);
}

/* Список определений в две колонки: слева за что, справа сколько. Сетка, а не таблица, —
   строк три, и таблица потребовала бы заголовков, которых у них нет. Уже колонки страницы
   и по центру: три коротких строки во всю ширину читались бы как разорванные. */
.hedge__money {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--o-2) var(--o-5);
  max-width: 26rem;
  margin: 0 auto var(--o-5);
  text-align: left;
}

.hedge__money-name { color: var(--tekst-tihiy); }
.hedge__money-value { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.hedge__money-name--total,
.hedge__money-value--total {
  padding-top: var(--o-2);
  border-top: 1px solid var(--frame);
  color: var(--tekst);
  font-weight: 700;
}

/* Зелёная кнопка покупки — тот же единственный цвет действия, что у «В корзину» на карточке
   товара. Надпись на ней ТЁМНАЯ, и это замер: светлая на зелёном не проходит по контрасту
   (`tokens.css`, `--tekst-na-pokupke`). */
.hedge__cart {
  display: inline-block;
  padding: var(--o-3) var(--o-7);
  border-radius: var(--r-pill);
  background: var(--akcent-pokupki);
  box-shadow: var(--ten-pokupki);
  color: var(--tekst-na-pokupke);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--hod), box-shadow var(--hod), transform var(--hod);
}

.hedge__cart:hover {
  background: var(--akcent-pokupki-navedenie);
  box-shadow: var(--ten-pokupki-navedenie);
  transform: translateY(-2px);
}

.hedge__cart:active { transform: translateY(0); }

/* ── Справочная таблица ──────────────────────────────────────────────────── */
/* 🔴 КЕГЛЬ ПОДНЯТ СО СТУПЕНИ `--t-l` НА `--t-xxl`, И ЭТО НЕ ВКУС. Читаемость текста страницы
   правилась кеглем, и абзац под этим заголовком уехал на `--t-xl` — 24 точки. Заголовок
   остался на 20 и стал МЕЛЬЧЕ собственного текста; штаб увидел это на снимке 11.08.2026
   и замерил браузером: 20 против 24. Перевёрнутая иерархия читается как ошибка вёрстки,
   даже когда каждый кусок по отдельности читаем. */
.hedge__reference-name {
  margin: var(--o-8) 0 var(--o-2);
  font-size: var(--t-xxl);
}

/* 🔴 Прокрутка живёт у ОБЁРТКИ, а не у страницы. Замер на телефоне 390 точек: без неё
   страница была шире окна на 32 точки — четыре столбца чисел туда не помещаются, — и вбок
   ездил весь калькулятор. Это же ловит сторож вида (`tools/zamer/site-appearance.py`,
   первая находка «страница шире окна»). */
.hedge__reference-scroll { overflow-x: auto; }

/* `collapse` — чтобы линии соседних клеток не удваивались в две черты. */
.hedge__reference {
  width: 100%;
  min-width: 22rem;
  margin: var(--o-5) 0 var(--o-6);
  border-collapse: collapse;
  font-size: var(--t-s);
}

.hedge__reference-head {
  padding: var(--o-2) var(--o-3);
  border-bottom: 1px solid var(--akcent-detal);
  color: var(--tekst-tihiy);
  font-weight: 400;
  text-align: left;
  letter-spacing: .04em;
}

/* 🔴 ЧИТАЕМОСТЬ КЛЕТКИ: КЕГЛЬ И ВЕС, ТА ЖЕ ПАРА, ЧТО У ПОДПИСИ ПОЛЯ ВЫШЕ. Замер 11.08.2026:
   Lc 35 при нужных 90 у 15 точек обычного начертания прямо на видео (у таблицы нет своей
   панели — под ней тот же кадр, что под остальной страницей). 15 → 17 точек и вес 700 вместе
   опускают порог APCA с 90 до 60. */
.hedge__reference-cell {
  padding: var(--o-2) var(--o-3);
  border-bottom: 1px solid var(--frame);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-m);
  font-weight: 700;
  text-shadow: var(--ten-teksta);
}

/* Первая клетка строки — ссылка на карточку растения, набрана `--akcent` (зелёный ссылок).
   Зелёный этой яркости против живого видео на просвет проигрывает — тот же случай, что
   у латыни на плитке каталога, — поэтому здесь `--akcent-latyn`: та же семья цвета, но
   краска, у которой уже есть свой запас по читаемости (`tokens.css`). */
.hedge__reference-cell a { color: var(--akcent-latyn); }

/* Наведение на строку: в таблице на восемнадцать строк глаз теряет строку при переходе
   от названия к цене. */
.hedge__reference-row { transition: background var(--hod); }
.hedge__reference-row:hover { background: var(--steklo-fon); }

/* ══ ДВИЖЕНИЕ ════════════════════════════════════════════════════════════════
   🔴 Правка Кирилла 06.08.2026: «нету АНИМАЦИЙ». Движение по дизайн-стандарту разрешено
   полностью, пока код наш.

   ⚠️ ВСЁ ДВИЖЕНИЕ — ЧИСТЫЙ CSS, БЕЗ ЕДИНОЙ СТРОКИ СКРИПТА, и это не экономия. Начальную
   прозрачность, снимаемую скриптом, человек с отключённым JavaScript увидел бы как пустую
   страницу навсегда: снимать признак было бы некому (ровно поэтому `reveal.js` на странице
   проектов ставит её сам). Анимация проигрывается один раз и заканчивается на видимом
   состоянии, поэтому без скриптов страница цела по устройству. */
@keyframes hedge-appear {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.hedge,
.hedge__result,
.hedge__reference { animation: hedge-appear .5s ease both; }

/* Лесенка: панель, итог, таблица появляются друг за другом, а не все разом. Разрыв мелкий —
   движение должно читаться, а не заставлять ждать. */
.hedge__result { animation-delay: .08s; }
.hedge__reference { animation-delay: .16s; }

/* 🔴 Кто попросил систему убрать движение — получает статику. Это не украшение доступности:
   для части людей движение на экране вызывает тошноту, и запрос браузера — единственный
   способ об этом узнать. */
@media (prefers-reduced-motion: reduce) {
  .hedge,
  .hedge__result,
  .hedge__reference { animation: none; }
  .hedge__select,
  .hedge__input,
  .hedge__submit,
  .hedge__cart,
  .hedge__reference-row { transition: none; }
  .hedge__submit:hover,
  .hedge__cart:hover { transform: none; }
}

/* ══ СВОЙ ВЫПАДАЮЩИЙ СПИСОК ══════════════════════════════════════════════════
   🔴 Правка Кирилла 06.08.2026: «при нажатии на "растение" или "размер" — выпадающий список
   НЕКРАСИВЫЙ, НЕ ПРЕМИАЛЬНЫЙ, с банальным черным фоном и белымии буквами».

   Так и есть, и починить это правилами нельзя: раскрытый список системного поля рисует
   ОПЕРАЦИОННАЯ СИСТЕМА, а не страница. Ни фон, ни шрифт, ни отступы строк ему не задаются
   ни одним свойством CSS — это единственный кусок нашей вёрстки, до которого стили
   не дотягиваются в принципе.

   Поэтому список свой: кнопка и перечень строк, которые рисуем мы. Собирает его `hedge.js`
   из того же самого поля, и поле остаётся на месте — просто прячется. Скрипт не доехал,
   отключён или упал — человек видит обычное системное поле и пользуется страницей целиком.
   Классы ниже ставит скрипт, поэтому в разметке их нет и быть не может; разрешение на это
   выписано поимённо в `core/site/tests/test_styles.py`. */
.picker { position: relative; }

/* Поле остаётся в форме и продолжает быть источником правды — прячется только его вид.
   ⛔ Не `display: none` и не `hidden`: спрятанное так поле выпадает из порядка обхода
   клавиатурой, и выбрать растение без мыши стало бы нельзя. */
.picker__native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Кнопка повторяет поле ввода до последней точки: рядом стоят наши же поля длины и шага,
   и разъедься они на пару точек — это и будет то самое «ui поехали». */
.picker__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--o-3);
  width: 100%;
  padding: var(--o-3) var(--o-4);
  border: 1px solid var(--frame);
  border-radius: var(--r-s);
  background: var(--fon-spiska);
  color: var(--tekst);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--hod), box-shadow var(--hod);
}

.picker__button:hover { border-color: var(--frame-navedenie); }

/* 🔴 `min-width: 0` — обязательная строка, а не мелочь. Внутри гибкой кнопки текст по умолчанию
   не даёт себя сжать, поэтому длинная подпись размера («160–180 см · WRB — 6 300 ₽ · под заказ»)
   распирала бы кнопку за пределы сетки. */
.picker__name { min-width: 0; }

/* 🔴 ДВА ЭТАЖА В КАЖДОЙ СТРОКЕ, И ОБА ЗАНИМАЮТ СВОЮ ВЫСОТУ ВСЕГДА. Отсюда берётся симметрия,
   которой требовал Кирилл: у растения тихий этаж — латынь, у размера — цена и наличие,
   и обе кнопки выходят ровно двухстрочными. Пустой тихий этаж (латыни у растения может
   не быть) высоту всё равно держит — иначе кнопки снова разъедутся по высоте.

   ⚠️ Латынь набирается КУРСИВОМ ТЕКСТОВОГО шрифта — тем же приёмом, что на плитке товара:
   ботаническое название по традиции идёт курсивом.

   🔴 Заголовочный шрифт здесь стоял до 06.08.2026 и снят вместе со сменой пары (решение 0036):
   у Manrope настоящего курсива нет, браузер наклонял бы прямые буквы сам. Разбор целиком —
   в `catalog.css`, у `.category__latin`. */
.picker__main,
.picker__note { display: block; }
.picker__note {
  min-height: 1.3em;
  color: var(--tekst-tihiy);
  font-family: var(--shrift-teksta);
  font-size: var(--t-xs);
  font-style: italic;
  line-height: 1.3;
}

.picker__button:focus-visible,
.picker--open .picker__button {
  border-color: var(--akcent-detal);
  outline: none;
}

/* Стрелка — своя, из двух линий: системная приходит вместе с системным полем и в нашей
   гамме не участвует. Поворачивается при раскрытии, потому что это единственный признак
   состояния, который человек видит боковым зрением. */
.picker__arrow {
  flex: none;
  width: .5rem;
  height: .5rem;
  border-right: 1px solid var(--akcent-detal);
  border-bottom: 1px solid var(--akcent-detal);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--hod);
}

.picker--open .picker__arrow { transform: translateY(1px) rotate(-135deg); }

/* 🔴 СПИСОК ПОЛУПРОЗРАЧНЫЙ — ПРЯМАЯ ПРАВКА КИРИЛЛА 06.08.2026: «мне НЕ нравится выпадающий
   список, можем его сделать полупрозрачным как многие делают».

   ⚠️ Это осознанный отход от прежнего решения, и его надо назвать. 05.08.2026 всплывающий
   список размеров на карточке товара сделали ГЛУХИМ по его же правке — «при выборе размера
   попап не перекрывает другие надписи на фоне и все сливается». Разница в том, что там слой
   ложился на текст страницы, а здесь — на фон и на соседние поля, и стекло держит их
   различимыми: под списком остаются наши же панели, а не строки цен.

   🔴 ПОЛУПРОЗРАЧНОСТЬ БЕЗ РАЗМЫТИЯ ЧИТАТЬ НЕЛЬЗЯ, и это видно на первом же снимке: сквозь
   слой проступали «Посчитать» и «Нужно растений: 26 шт.», и строки списка ложились прямо
   на них. Поэтому под слоем стоит размытие — то самое «как многие делают»: матовое стекло,
   а не плёнка.

   ⚠️ В `tokens.css` написано «второго `backdrop-filter` на сайте быть не должно», и запись
   эта устарела ещё до нас: своё размытие есть у попапа помощника (`chat.css`). Разница
   с шапкой, ради которой запрет и писался, — в цене: шапка закреплена и пересчитывается
   на КАЖДОМ кадре прокрутки любой страницы, а этот слой существует только пока список открыт,
   и занимает 300 на 344 точки. Замер шапки (108 кадров в секунду против 135) к нему
   не относится.

   🔴🔴 ВЫСОТА СПИСКА — АРИФМЕТИКА ПО ЗАМЕРУ, А НЕ ВКУС. Правка Кирилла 06.08.2026, третий
   заход и уже в сердцах: «МЕЖДУ РАСКРЫТОМ СПИСКОМ И БЛОКОМ "НУЖНО В КОРЗИНУ" ЕСТЬ МЕСТО,
   ОНИ НЕ ДОЛЖНЫ ПЕРЕСЕКАТЬСЯ».

   Замер на 1440 точках до правки: список 401…745, блок итога начинается на 648 — список
   залезал на него на 98 точек. Просьба «чтобы влезало семь строк» в оставшийся зазор
   не помещается, и выбирать пришлось между ней и просьбой не пересекаться. Взято второе:
   оно названо позже и капслоком.

   Считается так: блок итога отодвинут вниз на ступень отступа, список ограничен тем, что
   осталось между его верхом и верхом блока, минус воздух. */
.picker__list {
  position: absolute;
  z-index: 5;
  top: calc(100% + var(--o-2));
  left: 0;
  right: 0;
  max-height: 16rem;
  margin: 0;
  padding: var(--o-2);
  overflow-y: auto;
  border: 1px solid var(--akcent-detal);
  border-radius: var(--r-m);
  background: var(--fon-metki);
  backdrop-filter: var(--steklo-blur);
  box-shadow: var(--ten-3);
  list-style: none;
  animation: hedge-appear .18s ease both;
}

.picker__list[hidden] { display: none; }

/* Высота строки — замер, а не подбор: при 55 точках на строку в 21,5rem помещалось 6,2 строки,
   и седьмая обрезалась пополам. С этими полями строка выходит 47 точек, семь строк — 329,
   и они встают в ту же коробку целиком. */
.picker__option {
  padding: var(--o-1) var(--o-3);
  border-radius: var(--r-s);
  font-size: var(--t-s);
  line-height: 1.25;
  cursor: pointer;
  transition: background var(--hod), color var(--hod);
}

/* Внутри списка тихий этаж прижат к главному: в кнопке между ними есть воздух, в строке
   списка он съедал бы седьмую строку. */
.picker__option .picker__note { min-height: 0; line-height: 1.25; }

/* Наведение мышью и ход клавишами — одно и то же состояние: у человека не должно быть
   двух разных «текущих» строк одновременно. */
.picker__option:hover,
.picker__option--active { background: var(--steklo-fon-navedenie); }

/* Выбранная строка помечена зелёным текстом, а не заливкой: заливка спорила бы
   с наведением, и обе читались бы как «сейчас выбрано». */
.picker__option--chosen { color: var(--akcent); }

@media (prefers-reduced-motion: reduce) {
  .picker__list { animation: none; }
  .picker__arrow,
  .picker__button,
  .picker__option { transition: none; }
}

/* ── Затемнение под справочником ─────────────────────────────────────────── */
/* 🔴 НИЗ СТРАНИЦЫ ЛЕЖИТ НА СВЕТЛОМ КУСКЕ КАДРА, И ТАМ КРАСКА НЕ СПАСАЕТ. Замер 12.08.2026
   на чистом стенде: клетка таблицы Lc 19 при нужных 60, справка под заголовком 49. Оба места
   уже набраны самым светлым текстом и укрупнены — запаса у краски не осталось, добавить его
   может только фон.

   Приём взят целиком со страниц-рассказов («Контакты», «Сотрудничество»): ровная заливка,
   форма и мягкий край — маской-картинкой. Градиентом эту форму не собрать: радиальный даёт
   кольца на ровном небе, пара линейных — прямоугольник с видимыми углами; оба варианта
   Кирилл забраковал по снимкам в ту же ночь. Разбор и снятый генератор — в истории гита; пятно под текстом страниц-рассказов заменено
   ровным слоем 12.08.2026.

   ⚠️ Вылет вбок считается от окна, а не набран в рем: набранные 136 точек делали страницу
   шире окна на телефоне — та же поломка, которую чинили на «Контактах» в этот же день. */
.hedge__spravochnik {
  position: relative;
}

.hedge__spravochnik::before {
  content: "";
  position: absolute;
  inset: -2rem calc(-1 * min(8.5rem, 3vw)) -3rem;
  z-index: -1;
  pointer-events: none;
  background: var(--oblako-spravochnika);
  backdrop-filter: var(--tuman-pod-tekstom);
  mask-image: var(--maska-oblaka-vysokaya);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}