/* ============================================================
   ACCESSIBILITY.CSS — компенсирующий слой поверх плагина BVI
   ============================================================

   Подключается СТРОГО ПОСЛЕ assets/vendor/bvi/css/bvi.min.css.
   Вендорный файл не редактируется — все правки живут здесь,
   чтобы плагин можно было обновить, просто заменив bvi.min.css.

   ⚠️ ИСКЛЮЧЕНИЕ ИЗ ПРАВИЛ ПРОЕКТА: здесь используется !important.
   Это вынужденно — вендорный bvi.min.css содержит 681 объявление
   с !important, перебить их иначе невозможно. Исключение действует
   ТОЛЬКО в этом файле и ТОЛЬКО для селекторов .bvi-*.
   Во всех остальных файлах проекта правило «без !important» в силе.

   Специфика перебивания: селекторы здесь повторяют специфичность
   вендорных (body + .bvi-body + [attr] + элемент), поэтому решает
   порядок подключения — этот файл идёт последним.

   Что чинится:
   1. Горизонтальные отступы обёртки — ломали full-bleed hero
   2. Плоская типографика — h1 был всего на 7px крупнее body-текста
   3. Фирменный шрифт Pragmatica вместо Arial
   4. Видео/iframe (управляется также флагом builtElements в JS-конфиге)
   ============================================================ */


/* ─── 1. ОБЁРТКА ────────────────────────────────────────────
   Плагин оборачивает всё содержимое <body> в .bvi-body и вешает
   padding: 0 0.5rem. Из-за этого hero, шапка и другие full-bleed
   блоки получали 8px поля по краям. Убираем.               */

body .bvi-body {
  padding: 0;
}


/* ─── 2. РАЗМЕРЫ: ЗУМ ВМЕСТО ПЕРЕЗАПИСИ ─────────────────────
   Плагин по умолчанию назначает КАЖДОМУ элементу абсолютный
   размер (`* { font-size: 18px !important }`), стирая всю
   типографику сайта: заголовки, мета, меню и основной текст
   становятся одинаковыми. Возвращать иерархию поштучно —
   бесконечная работа и постоянный источник расхождений.

   Поэтому размеры сайта НЕ трогаем вообще, а увеличение делаем
   зумом всего контейнера, как это делает браузерный зум.

   Как это работает: правила плагина завязаны на атрибут
   [data-bvi-fontsize] на .bvi-body. accessibility-init.js
   снимает этот атрибут — и вендорные правила размеров просто
   перестают совпадать, не вступая в спор о специфичности.
   Выбранное пользователем значение скрипт кладёт в переменную
   --bvi-zoom, а применяем его здесь.

   Кнопки «+/−» в панели продолжают работать: каждое нажатие
   меняет значение, скрипт пересчитывает коэффициент.

   Поддержка zoom: Chrome, Safari, Firefox 126+. В более старых
   Firefox страница просто останется в своих исходных размерах —
   деградация мягкая, ничего не ломается.                       */

body .bvi-body {
  zoom: var(--bvi-zoom, 1);
}


/* ─── 4. ШРИФТ ──────────────────────────────────────────────
   Вендор ставит Arial ОДНИМ правилом на сам контейнер .bvi-body,
   откуда шрифт наследуется вниз. Достаточно переопределить это
   единственное правило — собственные объявления font-family
   на элементах сайта (Pragmatica, Pragmatica Extended) наследование
   перебивают сами и остаются нетронутыми.

   ⚠️ НЕ добавлять сюда правило вида `.bvi-body ... *`.
   Такая версия здесь была и оказалась вредной: она затирала
   акцидентную Pragmatica Extended на заголовках и, вместе
   с font-weight, превращала все заголовки в обычный текст.
   Наследования достаточно — принудительный обход всех потомков
   ломает типографику сайта.                                    */

body .bvi-body[data-bvi-fontfamily=arial]:not(i):not(span):not(.bvi-no-styles) {
  font-family: var(--font-main) !important;
}

/* Насыщенности НЕ трогаем вовсе: вендор их не переопределяет,
   а собственные веса сайта — единственное, что отличает
   заголовок от основного текста после того, как плагин
   уравнял всем размеры.                                        */

/* Панель плагина оформляется отдельно — см. секцию 12.
   Раньше здесь стояло правило, сажавшее её на системный Arial;
   оно убрано, потому что панель теперь стилизована под сайт
   и должна использовать фирменные шрифты. */


/* ─── 5. МЕДИА ──────────────────────────────────────────────
   Плагин прячет video/iframe/figure/ymaps при builtElements=false.
   Флаг переключён в accessibility-init.js на true, поэтому hero-видео
   и карты остаются на месте.

   Здесь — страховка на случай, если пользователь выключит
   встраиваемые элементы в панели: <figure> у нас используется
   как обёртка обычных изображений, скрывать её вместе с видео
   неправильно — картинки должны остаться видимыми.           */

body .bvi-body[data-bvi-builtelements=false]:not(.bvi-no-styles) figure {
  display: block !important;
}

/* Само видео при этом честно скрывается — это осознанный выбор
   пользователя, не трогаем.                                   */


/* ─── 5a. ФОН ИЗОБРАЖЕНИЙ ──────────────────────────────────
   ПРИЧИНА «БЕЛЫХ ПРЯМОУГОЛЬНИКОВ ВМЕСТО ФОТО».

   Тема плагина ставит background-color: #fff !important на ВСЕ
   элементы разом — включая сами <img>. У картинки фон рисуется
   ПОВЕРХ её содержимого не полностью, но там, где изображение
   не заполняет свой бокс целиком (или пока декодируется),
   пользователь видит сплошную белую заливку вместо фото.

   Диагностика показывала при этом opacity:1, visibility:visible
   и успешно загруженный файл — то есть картинка была на месте,
   её просто закрашивало.

   Блок «Репертуар» уцелел случайно: там aspect-ratio + object-fit
   растягивают фото на весь контейнер, и фону негде проступить.

   Возвращаем изображениям прозрачный фон. Никакой роли в теме
   для слабовидящих он не играет: контраст задаётся текстом
   и рамками, а не подложкой картинки.                          */

/* ⚠️ СПЕЦИФИЧНОСТЬ ЗДЕСЬ КРИТИЧНА — НЕ УПРОЩАТЬ СЕЛЕКТОРЫ.

   Вендорное правило темы выглядит так:
     body .bvi-body[data-bvi-theme=white] :not(.bvi-no-styles)
   его вес — (0,3,1).

   Первая версия этой правки была написана как `body .bvi-body img`
   — вес (0,1,2), то есть МЕНЬШЕ вендорного. !important не спасает:
   при одинаковой важности спор решает специфичность, и фото
   оставались белыми. Ошибку не поймал автотест: тестовая среда
   разрешает такие конфликты порядком правил, а браузер — весом.

   Ниже вес (0,3,2) — на единицу выше вендорного, за счёт тега
   в конце. [data-bvi-theme] без значения покрывает все темы.   */

body .bvi-body[data-bvi-theme] img:not(.bvi-no-styles),
body .bvi-body[data-bvi-theme] picture:not(.bvi-no-styles),
body .bvi-body[data-bvi-theme] svg:not(.bvi-no-styles),
body .bvi-body[data-bvi-theme] video:not(.bvi-no-styles) {
  background-color: transparent !important;
}

/* Снимаем grayscale, если пользователь не выбирал обесцвечивание.
   Тот же расчёт веса: (0,3,2) против вендорных (0,3,1).         */
body .bvi-body[data-bvi-images=true] img:not(.bvi-no-styles) {
  filter: none !important;
}


/* ─── 5b. HERO: ФОТО ВМЕСТО ВИДЕО ──────────────────────────
   В hero <img class="slide__image"> и <video class="slide__video">
   лежат друг на друге (оба position:absolute; inset:0).
   Видео скрыто флагом builtElements=false в accessibility-init.js,
   и под ним открывается фото.

   Подстраховка: снимаем opacity-переход видео, чтобы при любом
   состоянии слайдера поверх фото не всплывал пустой слой.
   Скрываем только видео — сам слайд и фото не трогаем, иначе
   сломается логика активного слайда (.slide.active).            */

body .bvi-body .slide__video {
  display: none !important;
}

/* Фото активного слайда должно быть непрозрачным: тема плагина
   красит фоны в белый, и полупрозрачная картинка на белом
   выглядит выцветшей.                                            */
body .bvi-body .slide.active .slide__image {
  opacity: 1 !important;
}


/* ─── 6. ДЕКОРАТИВНЫЕ ОВЕРЛЕИ ───────────────────────────────
   ЭТО И БЫЛА ПРИЧИНА «БЕЛОГО ВМЕСТО ФОТО».

   Поверх фотографий лежат слои с градиентом (для читаемости
   текста на снимке). Собственного фона у них нет — только
   background-image: linear-gradient(...), поэтому в обычном
   режиме они полупрозрачные.

   Плагин ставит background-color: #fff !important ВСЕМ элементам
   подряд. Оверлей из прозрачного становится сплошным белым
   блоком и закрывает фотографию под собой. Там, где оверлей
   растянут на всю карточку, фото пропадает целиком; в «Репертуаре»
   он занимает только низ — оттого был виден верхний кусок фото.

   В режиме для слабовидящих градиенты не нужны вовсе: текст
   и так вынесен на контрастный фон темы, а затемнение снимка
   только мешает. Скрываем эти слои полностью.

   Все они декоративные (aria-hidden="true"), на доступность
   и на разметку скрытие не влияет.

   ⚠️ Вес этих селекторов — (0,3,1), РОВНО как у вендорного
   правила темы. При равном весе и равной важности спор решает
   порядок подключения, а accessibility.css грузится последним —
   поэтому побеждаем. Отсюда следствие: если файл когда-нибудь
   переставят выше bvi.min.css, правила молча перестанут
   работать. Порядок подключения здесь — часть решения.
   При добавлении новых страниц дописывать сюда их оверлеи.    */

body .bvi-body[data-bvi-theme] .overlay-gradient,
body .bvi-body[data-bvi-theme] .rep-card__overlay,
body .bvi-body[data-bvi-theme] .news__card-overlay,
body .bvi-body[data-bvi-theme] .schedule__card-overlay,
body .bvi-body[data-bvi-theme] .visitors__photo-overlay,
body .bvi-body[data-bvi-theme] .menu__desktop-photo-overlay {
  display: none !important;
}

/* Контейнеры фотографий тоже не должны заливаться белым:
   если картинка не заполняет бокс целиком, из-под неё
   проступала бы белая подложка вместо кадра.                  */
body .bvi-body[data-bvi-theme] .slide__media,
body .bvi-body[data-bvi-theme] .rep-card__media,
body .bvi-body[data-bvi-theme] .schedule__card-photo,
body .bvi-body[data-bvi-theme] .news__card-photo {
  background-color: transparent !important;
}


/* ─── 7. HERO: ПРОЗРАЧНЫЕ СЛОИ UI ──────────────────────────
   ПОЧЕМУ HERO ОСТАВАЛСЯ БЕЛЫМ, КОГДА ОСТАЛЬНОЕ УЖЕ ЧИНИЛОСЬ.

   Поверх слайдов лежат служебные слои, растянутые на весь экран:
     .ui-layer     — inset:0, z-index:20 (шапка, контролы)
     .global-info  — inset:0, z-index:15 (заголовок, описание)
   Плагин заливает их background-color:#fff, и они накрывают
   фотографию целиком.

   Коварство в том, что у обоих стоит pointer-events:none, и
   document.elementsFromPoint их НЕ ВОЗВРАЩАЕТ — в диагностике
   верхним слоем показывалась сама картинка, хотя поверх неё
   рисовались эти белые полотна. Отсюда несколько ложных версий.
   Вывод на будущее: замер слоёв через elementsFromPoint слеп
   к pointer-events:none, проверять такие слои нужно отдельно.

   Обнуляем фон ТОЛЬКО у контейнеров. Текстовые элементы внутри
   (заголовок, описание) получают белую подложку от темы каждый
   сам по себе — они останутся читаемыми поверх фотографии,
   а вокруг них будет виден кадр.                              */

body .bvi-body[data-bvi-theme] .mobile-app-container,
body .bvi-body[data-bvi-theme] .slider,
body .bvi-body[data-bvi-theme] .slide,
body .bvi-body[data-bvi-theme] .ui-layer,
body .bvi-body[data-bvi-theme] .global-info,
body .bvi-body[data-bvi-theme] .global-info__left,
body .bvi-body[data-bvi-theme] .global-info__title-wrapper,
body .bvi-body[data-bvi-theme] .header,
body .bvi-body[data-bvi-theme] .header__brand-block {
  background-color: transparent !important;
}


/* ─── 8. ВИДИМОСТЬ КАРТИНОК В СКРЫТЫХ КОНТЕЙНЕРАХ ──────────
   ПОЧЕМУ НЕ НАЖИМАЛИСЬ КНОПКИ В ШАПКЕ.

   При images=true вендор объявляет всем картинкам
   `visibility: visible !important`. Беда в том, что visibility
   наследуется: контейнер, скрытый через visibility:hidden,
   больше НЕ скрывает такую картинку — дочерний элемент со своим
   visible продолжает отрисовываться и перехватывать клики.

   У нас так скрыто закрытое меню (.menu { visibility: hidden }).
   Его фотографии оставались «висеть» невидимым слоем поверх
   страницы: визуально ничего не видно, но mouse-события уходили
   в них, и кнопки «Афиша», «Поиск», «Menu» не реагировали.
   Программный .click() при этом срабатывал — обработчики были
   целы, до элемента не доходил именно курсор.

   inherit возвращает нормальное поведение: картинка видна там,
   где виден её родитель, и скрыта вместе с ним.

   ⚠️ Вендорный селектор весит (0,5,2). Наш начинается с `html`,
   что даёт (0,5,3) — на единицу больше. Не убирать `html`,
   иначе правило проиграет.                                     */

html body .bvi-body[data-bvi-images=true]:not(.bvi-no-styles) img.bvi-img:not(.bvi-no-styles),
html body .bvi-body[data-bvi-images=true]:not(.bvi-no-styles) .bvi-background-image:not(.bvi-no-styles) {
  visibility: inherit !important;
}


/* ─── 9. ТЁМНЫЙ ПОДВАЛ ──────────────────────────────────────
   Тема плагина делает всю страницу белой. Подвал при этом
   сливается с контентом и теряет роль структурного «дна»
   страницы, поэтому возвращаем ему чёрный фон.

   Важно перевернуть ЦЕЛИКОМ пару фон/текст: тема принудительно
   красит текст, ссылки и заливку иконок в чёрный, и на чёрном
   фоне они стали бы невидимыми. Ниже — полный набор.

   Контраст белого на чёрном — 21:1, максимально возможный,
   требованиям ГОСТ Р 52872-2012 соответствует.

   Применяем только к светлой теме: у тёмных тем плагина
   (black/blue/brown) страница и так тёмная, отдельный чёрный
   подвал там не нужен и может конфликтовать с их палитрой.    */

body .bvi-body[data-bvi-theme=white] .footer:not(.bvi-no-styles),
body .bvi-body[data-bvi-theme=white] .footer :not(.bvi-no-styles) {
  background-color: var(--color-black-soft) !important;
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
  border-color: var(--color-white) !important;
}

/* Ссылки подвала — белые, при наведении инверсия на белый фон
   (тот же приём, что использует сам плагин, только наоборот).  */
html body .bvi-body[data-bvi-theme=white] .footer a:not(.bvi-no-styles) {
  color: var(--color-white) !important;
  background-color: transparent !important;
}

html body .bvi-body[data-bvi-theme=white] .footer a:not(.bvi-no-styles):hover,
html body .bvi-body[data-bvi-theme=white] .footer a:not(.bvi-no-styles):focus {
  color: var(--color-black-soft) !important;
  background-color: var(--color-white) !important;
}

/* Кнопки: плагин делает их чёрными с белым текстом — на чёрном
   фоне подвала они пропадали бы. Даём белую рамку.             */
html body .bvi-body[data-bvi-theme=white] .footer button:not(.bvi-no-styles) {
  color: var(--color-white) !important;
  background-color: var(--color-black-soft) !important;
  border: 1px solid var(--color-white) !important;
}

/* Поле подписки оставляем светлым: ввод текста читабельнее
   тёмными буквами по светлому, и это привычное поведение форм. */
html body .bvi-body[data-bvi-theme=white] .footer input:not(.bvi-no-styles) {
  background-color: var(--color-white) !important;
  color: var(--color-black-soft) !important;
}


/* ─── 10. ПОЛНОЭКРАННЫЕ СЛОИ ПОД ПАНЕЛЬЮ ────────────────────
   Панель плагина висит сверху (position:fixed, z-index:999999)
   и перекрывает всё, что открывается от top:0. У меню это
   верхняя строка с кнопкой закрытия — она уезжала под панель,
   и закрыть меню было нечем.

   accessibility-init.js измеряет высоту панели и кладёт её
   в --bvi-panel-h. Сдвигаем на эту величину полноэкранные слои.
   Меню сохраняет inset:0 по остальным сторонам, поэтому просто
   становится ниже на высоту панели, а не выходит за экран.

   Если панель свёрнута кнопкой «скрыть», переменная равна 0
   и слои возвращаются на место.                                */

body .bvi-body .menu,
body .bvi-body .search-desktop {
  top: var(--bvi-panel-h, 0px) !important;
}


/* ─── 11. ТЁМНОЕ МЕНЮ ───────────────────────────────────────
   По той же логике, что и подвал (секция 9): меню — крупный
   самостоятельный слой поверх страницы, и на белом фоне оно
   переставало читаться как отдельная сущность.

   Внутри меню элементов больше, чем в подвале: навигация,
   поиск, чипы быстрых ссылок, кнопки разделов, SVG-иконки.
   Переворачиваем пару фон/текст для всех сразу, иначе часть
   из них осталась бы чёрным по чёрному.

   Оговорка по SVG: иконки закрытия и стрелки нарисованы через
   stroke="currentColor", поэтому им достаточно color. Но у части
   иконок задана заливка, и вендор красит fill в чёрный —
   поэтому задаём и fill, и stroke.                              */

body .bvi-body[data-bvi-theme=white] .menu:not(.bvi-no-styles),
body .bvi-body[data-bvi-theme=white] .menu :not(.bvi-no-styles) {
  background-color: var(--color-black-soft) !important;
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
  stroke: var(--color-white) !important;
  border-color: var(--color-white) !important;
}

/* Ссылки и пункты навигации — белые, при наведении инверсия.   */
html body .bvi-body[data-bvi-theme=white] .menu a:not(.bvi-no-styles) {
  color: var(--color-white) !important;
  background-color: transparent !important;
}

html body .bvi-body[data-bvi-theme=white] .menu a:not(.bvi-no-styles):hover,
html body .bvi-body[data-bvi-theme=white] .menu a:not(.bvi-no-styles):focus {
  color: var(--color-black-soft) !important;
  background-color: var(--color-white) !important;
}

/* Кнопки разделов и закрытия: плагин делает их чёрными с белым
   текстом — на тёмном фоне они бы растворились. Даём рамку.
   Кнопки навигации внутри меню рамкой не обводим — их много,
   и рамка на каждой превратила бы список в сетку.               */
html body .bvi-body[data-bvi-theme=white] .menu button:not(.bvi-no-styles) {
  color: var(--color-white) !important;
  background-color: transparent !important;
  border-color: var(--color-white) !important;
}

html body .bvi-body[data-bvi-theme=white] .menu .menu__close:not(.bvi-no-styles) {
  border: 1px solid var(--color-white) !important;
}

/* Поле поиска оставляем светлым: вводимый текст читабельнее
   тёмным по светлому, и это привычное поведение форм.          */
html body .bvi-body[data-bvi-theme=white] .menu input:not(.bvi-no-styles) {
  background-color: var(--color-white) !important;
  color: var(--color-black-soft) !important;
}

/* Чипы быстрых ссылок — контурные, чтобы отличались от текста. */
html body .bvi-body[data-bvi-theme=white] .menu .menu__search-chip:not(.bvi-no-styles) {
  color: var(--color-white) !important;
  background-color: transparent !important;
  border: 1px solid var(--color-white) !important;
}


/* ─── 12. ОФОРМЛЕНИЕ ПАНЕЛИ ПЛАГИНА ─────────────────────────
   Панель приходит от вендора в стиле 2014 года и никак не
   связана с оформлением сайта. Приводим её к языку интерфейса
   театра: тёмная плашка, акцидентный шрифт в лейблах, брендовый
   красный на активных состояниях и фокусе.

   Разметку панели строит плагин, менять её нельзя — поэтому
   работаем только классами .bvi-*. Их набор зафиксирован
   в вендорном JS и при обновлении может измениться; тогда
   правки понадобятся здесь, на работу самой панели это
   не повлияет (сломается только внешний вид).

   Панель НЕ обёрнута в .bvi-body — она вставляется рядом,
   поэтому селекторы начинаются с `html body .bvi-panel`,
   как и у вендора, и тема страницы её не задевает.            */

html body .bvi-panel {
  background-color: var(--color-black-soft) !important;
  color: var(--color-white) !important;
  font-family: var(--font-main) !important;
  padding: var(--space-m) var(--space-l) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-white-25) !important;
  box-shadow: none !important;
}

/* Ряды блоков — раскладка сайта, а не вендорная                */
html body .bvi-panel .bvi-blocks {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-m) var(--space-xl) !important;
}

html body .bvi-panel .bvi-block {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-s) !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Лейблы групп — акцидентный шрифт, как заголовки секций сайта */
html body .bvi-panel .bvi-block .bvi-block-title {
  font-family: var(--font-accent) !important;
  font-size: 13px !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  color: var(--color-white-40) !important;
  margin: 0 var(--space-xs) 0 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

/* Кнопки панели — контурные, в духе чипов и табов сайта        */
html body .bvi-panel a.bvi-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--font-main) !important;
  font-size: 15px !important;
  font-weight: var(--font-weight-medium) !important;
  line-height: 1.15 !important;
  color: var(--color-white) !important;
  background-color: transparent !important;
  border: 1px solid var(--color-white-25) !important;
  border-radius: 2px !important;
  padding: 8px 14px !important;
  text-decoration: none !important;
  transition: background-color var(--duration-fast) var(--ease-out-smooth),
              border-color var(--duration-fast) var(--ease-out-smooth),
              color var(--duration-fast) var(--ease-out-smooth) !important;
}

html body .bvi-panel a.bvi-link:hover {
  background-color: var(--color-white-10) !important;
  border-color: var(--color-white-40) !important;
  color: var(--color-white) !important;
}

/* Активный выбор — брендовый красный                           */
/* Кнопку сворачивания исключаем: плагин может пометить её
   классом active, и тогда вся строка заливалась красным. */
html body .bvi-panel a.bvi-link.active:not([data-bvi="panel-hide"]) {
  background-color: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
  color: var(--color-white) !important;
}

html body .bvi-panel a.bvi-link:focus-visible {
  outline: 2px solid var(--color-brand) !important;
  outline-offset: 3px !important;
}

/* Недоступные кнопки (например, озвучка во время чтения)       */
html body .bvi-panel a.bvi-link.disabled {
  color: var(--color-white-40) !important;
  border-color: var(--color-white-10) !important;
  background-color: transparent !important;
}

/* Иконки вендора — белые вместо чёрных                         */
html body .bvi-panel .bvi-images {
  filter: invert(1) !important;
  opacity: 0.9 !important;
}


/* Ссылка на сайт разработчика плагина — приглушаем, но
   оставляем: этого требует лицензия и правила хорошего тона.   */
html body .bvi-panel .bvi-copyright {
  color: var(--color-white-40) !important;
  font-size: 12px !important;
}


/* ─── 12b. МОДАЛКА НАСТРОЕК ─────────────────────────────────
   Структура вендора: .bvi-modal (перекрытие на весь экран)
     └ .bvi-modal-dialog (центрирование, max-width 500px)
        └ .bvi-modal-content (сама карточка)
           └ .bvi-modal-header / -body / -footer

   Прежняя версия этих правил была поверхностной: тёмный фон
   ставился на .bvi-modal, то есть на ПЕРЕКРЫТИЕ, а карточка
   внутри оставалась вендорной белой. Отсюда и кривой вид.
   Красить нужно .bvi-modal-content, а перекрытие делать
   полупрозрачной подложкой.

   Второй источник кривизны: правила раскладки из секции 12
   (.bvi-panel .bvi-blocks — строка с переносом по центру)
   протекали внутрь модалки, потому что модалка лежит ВНУТРИ
   .bvi-panel. Здесь раскладка переопределяется на колонку:
   в модалке групп настроек много, и строкой они не помещаются. */

/* Перекрытие — затемняющая подложка, а не сплошная плашка      */
html body .bvi-panel .bvi-modal {
  background-color: var(--color-black-soft-40) !important;
  backdrop-filter: blur(2px) !important;
}

/* Карточка                                                      */
html body .bvi-panel .bvi-modal .bvi-modal-content {
  background-color: var(--color-black-soft) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-white-25) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

html body .bvi-panel .bvi-modal .bvi-modal-header,
html body .bvi-panel .bvi-modal .bvi-modal-footer {
  background-color: transparent !important;
  border-color: var(--color-white-15) !important;
  padding: var(--space-m) var(--space-l) !important;
}

html body .bvi-panel .bvi-modal .bvi-modal-body {
  background-color: transparent !important;
  padding: var(--space-l) !important;
}

html body .bvi-panel .bvi-modal .bvi-modal-title {
  font-family: var(--font-accent) !important;
  font-size: 18px !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: -0.02em !important;
  color: var(--color-white) !important;
}

/* Крестик закрытия — вендор делает его полупрозрачным чёрным
   с белой тенью; на тёмном фоне это нечитаемо.                 */
html body .bvi-panel .bvi-modal .bvi-modal-close {
  color: var(--color-white) !important;
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 var(--space-xs) !important;
  opacity: 0.7 !important;
  text-shadow: none !important;
  float: none !important;
}

html body .bvi-panel .bvi-modal .bvi-modal-close:hover,
html body .bvi-panel .bvi-modal .bvi-modal-close:focus {
  opacity: 1 !important;
  background-color: transparent !important;
  color: var(--color-white) !important;
}

/* Группы настроек — колонкой, а не строкой как в верхней панели */
html body .bvi-panel .bvi-modal .bvi-blocks {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: var(--space-l) !important;
}

html body .bvi-panel .bvi-modal .bvi-block {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--space-s) !important;
}

/* Лейбл группы занимает всю строку — кнопки под ним            */
html body .bvi-panel .bvi-modal .bvi-block .bvi-block-title {
  flex: 1 0 100% !important;
  margin: 0 0 var(--space-xs) 0 !important;
}

/* Кнопка сброса в подвале модалки — акцентная                  */
html body .bvi-panel .bvi-modal .bvi-modal-footer .bvi-reset {
  border-color: var(--color-brand) !important;
  color: var(--color-white) !important;
}

html body .bvi-panel .bvi-modal .bvi-modal-footer .bvi-reset:hover {
  background-color: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
}

/* Полоса прокрутки внутри модалки                              */
html body .bvi-panel .bvi-modal .bvi-modal-body::-webkit-scrollbar-thumb {
  background-color: var(--color-white-25) !important;
}


/* ─── 13. РАБОТА ПАРАМЕТРОВ МОДАЛКИ ─────────────────────────
   ПОЧЕМУ МЕЖСТРОЧНИК, ИНТЕРВАЛ И ЗАСЕЧКИ НЕ РАБОТАЛИ.

   Вендор вешает эти три свойства ТОЛЬКО на сам контейнер:
     .bvi-body[data-bvi-lineheight=big] { line-height: 2.5 }
   и рассчитывает, что значение унаследуется вниз по дереву.

   Но у нас line-height, letter-spacing и font-family объявлены
   на самих элементах (.rep-card__name, .page__intro-desc и т.д.),
   а собственное объявление элемента всегда сильнее унаследованного
   значения — независимо от специфичности и !important на предке.
   Поэтому переключатели в модалке визуально ничего не меняли.

   Пробрасываем свойства на потомков. Ключевой момент: ТОЛЬКО
   для значений, отличных от дефолтных. Если применять их всегда,
   мы затрём собственную типографику сайта — ровно этим грешила
   ранняя версия файла, из-за которой заголовки превращались
   в обычный текст (см. предупреждение в секции 4).

   При значении normal правила ниже просто не совпадают,
   и вёрстка остаётся в исходном виде.                          */

/* Межстрочный интервал                                          */
body .bvi-body[data-bvi-lineheight=average] *:not(.bvi-no-styles) {
  line-height: 2 !important;
}

body .bvi-body[data-bvi-lineheight=big] *:not(.bvi-no-styles) {
  line-height: 2.5 !important;
}

/* Межбуквенный интервал                                         */
body .bvi-body[data-bvi-letterspacing=average] *:not(.bvi-no-styles) {
  letter-spacing: 2px !important;
}

body .bvi-body[data-bvi-letterspacing=big] *:not(.bvi-no-styles) {
  letter-spacing: 4px !important;
}

/* Шрифт с засечками. Пробрасываем на всех потомков, включая
   заголовки на Pragmatica Extended: пользователь выбрал засечки
   осознанно, и половинчатое применение выглядело бы поломкой.

   Обратное переключение на «без засечек» отдельного правила
   не требует: атрибут меняется на arial, это правило перестаёт
   совпадать, и элементы возвращаются к своим шрифтам сайта.    */
body .bvi-body[data-bvi-fontfamily=times] *:not(.bvi-no-styles) {
  font-family: 'Times New Roman', Times, serif !important;
}


/* ─── 14. ПЛАВАЮЩАЯ КНОПКА ВОЗВРАТА ПАНЕЛИ ──────────────────
   Когда пользователь сворачивает панель, плагин показывает
   в правом верхнем углу ссылку с иконкой глаза — по ней панель
   возвращается. Вендор не оформляет её никак: просто чёрная
   иконка на прозрачном фоне, теряется на светлой странице.

   Делаем круглую кнопку фирменного красного с белой иконкой.

   Особенность разметки: у самой ссылки стоит класс .bvi-no-styles,
   поэтому тема плагина её не красит — а вот вложенный <i> с
   иконкой этого класса НЕ имеет, и тема заливает его белым.
   Поэтому фон обнуляем именно у него.

   Иконка приходит фоновой картинкой (eye.svg, чёрная), перекрасить
   её через fill/color невозможно. Используем фильтр:
   brightness(0) сначала делает изображение полностью чёрным,
   invert(1) переворачивает в чистый белый — приём работает
   с любым исходным цветом SVG.                                */

html body .bvi-body .bvi-link-fixed-top {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background-color: var(--color-brand) !important;
  box-shadow: 0 2px 12px var(--color-black-soft-25) !important;
  text-decoration: none !important;
  transition: transform var(--duration-fast) var(--ease-out-smooth),
              box-shadow var(--duration-fast) var(--ease-out-smooth) !important;
}

/* ⚠️ ОБЯЗАТЕЛЬНО: перезадаём скрытие.

   Плагин прячет кнопку классом .bvi-hide через правило
   `body .bvi-body .bvi-hide { display:none }` весом (0,2,1).
   Наше правило выше весит (0,2,2) и перебивало его — кнопка
   висела на экране всегда, даже при развёрнутой панели.
   Это правило весит (0,3,2) и возвращает нужное поведение:
   глаз появляется ТОЛЬКО когда панель свёрнута.               */
html body .bvi-body .bvi-link-fixed-top.bvi-hide {
  display: none !important;
}

html body .bvi-body .bvi-link-fixed-top:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 4px 18px var(--color-black-soft-40) !important;
}

html body .bvi-body .bvi-link-fixed-top:focus-visible {
  outline: 2px solid var(--color-brand) !important;
  outline-offset: 3px !important;
}

/* Иконка глаза — белая, фон под ней снимаем                    */
html body .bvi-body .bvi-link-fixed-top .bvi-images {
  background-color: transparent !important;
  background-position: center !important;
  background-size: contain !important;
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
  margin: 0 !important;
}


/* ─── 15. КНОПКА СВОРАЧИВАНИЯ В УГЛУ ПАНЕЛИ ─────────────────
   По умолчанию кнопка сворачивания панели стоит в общем ряду
   настроек, сразу после «Обычная версия», и выглядит как
   маленький минус — понять, что она делает, невозможно,
   а рядом с кнопкой полного выхода это ещё и рискованно:
   два разных по последствиям действия стоят вплотную.

   Выносим её в дальний правый угол панели и даём иконку
   перечёркнутого глаза — парную к глазу на кнопке возврата.
   Получается понятная пара: «глаз перечёркнут» — свернуть,
   «глаз» — развернуть обратно.

   Элемент НЕ создаём и не дублируем: это тот же самый
   [data-bvi="panel-hide"], только перемещённый через
   position: absolute. Штатный обработчик плагина остаётся
   при нём, ничего не нужно навешивать вручную.

   Из ряда настроек она при этом исчезает сама — абсолютное
   позиционирование выводит элемент из потока.               */

/* Панель — точка отсчёта для кнопки. Вендор уже задаёт
   position: relative, дублируем для надёжности, плюс поле
   справа, чтобы содержимое не заезжало под кнопку.          */
html body .bvi-panel {
  position: relative;
  padding-right: 84px !important;
}

html body .bvi-panel.bvi-fixed-top {
  position: fixed;
}

html body .bvi-panel a.bvi-link[data-bvi="panel-hide"] {
  position: absolute !important;
  top: 50% !important;
  right: var(--space-l) !important;
  transform: translateY(-50%) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  gap: 0 !important;

  border: none !important;
  border-radius: 50% !important;
  background-color: var(--color-brand) !important;
  transition: opacity var(--duration-fast) var(--ease-out-smooth) !important;
}

html body .bvi-panel a.bvi-link[data-bvi="panel-hide"]:hover {
  opacity: 0.85 !important;
  background-color: var(--color-brand) !important;
  border: none !important;
}

html body .bvi-panel a.bvi-link[data-bvi="panel-hide"]:focus-visible {
  outline: 2px solid var(--color-white) !important;
  outline-offset: 2px !important;
}

/* Меняем иконку минуса на перечёркнутый глаз — файл уже есть
   в комплекте вендора. Путь указан от папки этого CSS.       */
html body .bvi-panel a.bvi-link[data-bvi="panel-hide"] .bvi-images {
  width: 22px !important;
  height: 22px !important;
  background-color: transparent !important;
  background-image: url('/eye-slash.svg') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  filter: brightness(0) invert(1) !important;
  margin: 0 !important;
}


/* ─── 16. ПАНЕЛЬ НА МОБИЛЬНЫХ ───────────────────────────────
   Блок ограничен max-width, а не написан mobile-first, как
   принято в проекте: базовые правила панели (секции 12 и 15)
   переопределяют вендорные и должны работать на всех ширинах.  */

@media (max-width: 1023.98px) {

  html body .bvi-panel {
    padding: var(--space-m) var(--space-l) !important;
  }

  /* Всё содержимое — по левому краю                            */
  html body .bvi-panel .bvi-blocks {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: var(--space-m) !important;
  }

  html body .bvi-panel .bvi-block {
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  /* Лейбл группы.

     width: min-content делает блок шириной с самое длинное СЛОВО:
     «ЦВЕТА САЙТА» переносится по пробелу на две строки, а
     «НАСТРОЙКИ» остаётся одним словом в одну строку.

     ⚠️ НЕ возвращать overflow-wrap: break-word — именно он рвал
     слова посреди («НАСТРОЙ/КИ», «ИЗОБРАЖ/ЕНИЯ»). Перенос должен
     идти только по пробелам.                                   */
  html body .bvi-panel .bvi-block .bvi-block-title {
    width: min-content !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-align: left !important;
    line-height: 1.15 !important;
    flex-shrink: 0 !important;
  }

  /* Иконки группы не сжимаются и держатся одной строкой         */
  html body .bvi-panel .bvi-block a.bvi-link {
    flex-shrink: 0 !important;
  }

  /* ── Кнопка сворачивания: кружок + подпись, внизу панели ──
     order: 99 ставит её последней внутри своей группы, а сама
     группа в разметке плагина идёт последней — значит строка
     оказывается в самом низу панели.

     flex-direction и порядок задаём явно, чтобы подпись всегда
     шла ПОСЛЕ кружка, независимо от прочих правил.             */
  html body .bvi-panel a.bvi-link[data-bvi="panel-hide"] {
    position: static !important;
    transform: none !important;
    order: 99 !important;
    flex: 1 0 100% !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--space-s) !important;

    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin-top: var(--space-s) !important;

    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }

  /* Кружок с перечёркнутым глазом.

     ⚠️ ФОН И ИКОНКА ДОЛЖНЫ ЛЕЖАТЬ НА РАЗНЫХ СЛОЯХ.
     filter действует на элемент ЦЕЛИКОМ. Если повесить
     brightness(0) invert(1) на элемент с красным фоном, фильтр
     перекрасит в белый и фон, и иконку — получится белый круг
     с невидимым глазом (именно так и было). Вычисленный стиль
     при этом показывает background-color красным, потому что
     отражает объявленное значение, а не результат отрисовки, —
     по консоли ошибку не видно.

     Поэтому: фон остаётся на самом кружке, а картинка уходит
     в ::before, где фильтр затрагивает только её.             */
  html body .bvi-panel a.bvi-link[data-bvi="panel-hide"] .bvi-images {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    background-color: var(--color-brand) !important;
    background-image: none !important;
    filter: none !important;
    margin: 0 !important;
  }

  html body .bvi-panel a.bvi-link[data-bvi="panel-hide"] .bvi-images::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: url('/eye-slash.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    filter: brightness(0) invert(1) !important;
  }

  /* Подпись справа от кружка.

     Раньше текст добавлялся через ::after и упорно оказывался
     не там, где объявлен. Теперь подпись — настоящий <span>,
     который вставляет accessibility-init.js: положение элемента
     в потоке однозначно, и для программ чтения с экрана
     это тоже честнее сгенерированного контента.               */
  html body .bvi-panel .taganka-hide-label {
    display: inline !important;
    font-family: var(--font-main) !important;
    font-size: 15px !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: 1.15 !important;
    color: var(--color-white) !important;
    text-align: left !important;
  }
}


/* Подпись видна только на мобильных: на десктопе кнопка
   сворачивания — компактный кружок в углу панели.            */
@media (min-width: 1024px) {
  html body .bvi-panel .taganka-hide-label {
    display: none !important;
  }
}