/* ==================================================== */
/* Страницы документов: Справочник, Стандарты,          */
/* Каталоги, Литература (список PDF + просмотрщик)      */
/* ==================================================== */

/* Шапка с навигацией */
.header__inner {
   align-items: stretch;
   padding-right: 0;
}

.header__inner > a {
   align-self: center;
   line-height: 0;
}

.nav {
   display: flex;
   align-items: stretch;

   font-family: 'Raleway Medium', sans-serif;
}

.nav__link {
   display: flex;
   align-items: center;
   justify-content: center;

   padding: 0 clamp(10px, 2vw, 28px);

   font-size: clamp(13px, 1.2vw, 19px);
   color: #E56F25;
   text-decoration: none;
   /* длинное имя раздела не растягивает шапку: ограничение и перенос */
   max-width: 340px;
   overflow-wrap: anywhere;

   transition: background .2s linear;
}

@media (any-hover: hover) {
   /* пустой раздел исключён прямо здесь: правило ниже (.nav__link--empty)
      слабее по весу и подсветку не перебивало – пустая вкладка светилась
      наравне с обычной */
   .nav__link:not(.active):not(.nav__link--empty):hover {
      background-color: #353535;
      color: #FFFFFF;
   }
}

.nav__link.active {
   background-color: #E56F25;
   color: #FFFFFF;
}

.nav .site-menu {
   margin: 0 clamp(10px, 2vw, 24px);
}

/* .main заполняет высоту между шапкой и подвалом (container – flex-колонка) */
.main {
   display: flex;
   flex-direction: column;
}

/* Основной блок: список + просмотрщик – растягивается на всю свободную высоту,
   чтобы под ним не оставалось пустого места (планшет в ландшафте и т.п.).
   Высоту окна фиксируем ниже (двухколоночный режим), поэтому список и
   просмотрщик прокручиваются внутри себя, а не растягивают страницу. */
.section-main {
   display: flex;
   gap: 1.5%;

   flex: 1 1 auto;
   min-height: 420px;

   padding: clamp(22px, 2.5vw, 45px) 0;
}

/* Двухколоночный режим (с просмотрщиком): высота = окно, внутренняя прокрутка */
@media (min-width: 900.02px) {
   .container {
      height: 100vh;
      /* svh – по видимой высоте с учётом адресной строки. 100vh считается по
         полной высоте окна, и страница выходила выше экрана (планшет в
         ландшафте прокручивался на высоту этой самой строки). Именно svh,
         а не dvh: dvh меняется в момент, когда строка прячется, и раскладка
         скакала прямо во время прокрутки */
      height: 100svh;
   }

   .main {
      min-height: 0;
   }

   .section-main {
      min-height: 0;
   }
}

/* 4K-бампы (≥2560/≥3400) – в КОНЦЕ файла: базовые правила .pdf-link,
   .input-search и .doc-folder__title ниже по файлу перебивали их */

.nav-horizontal {
   flex: 0 0 27%;
   min-width: 250px;

   display: flex;
   flex-direction: column;
}

.input-search {
   /* та же высота и нижний отступ, что у панели зума справа,
      чтобы колонки начинались и заканчивались на одном уровне */
   height: 40px;
   width: 100%;

   margin: 0 0 18px;
   padding: 5px 45px 5px 15px;

   border: none;
   outline: none;
   border-bottom: 1px solid #818181;

   background-color: #353535;
   color: #B3B3B3;

   font-family: 'Raleway Regular', sans-serif;
   font-size: 14px;

   background-image: url(../icons/search-icon.svg);
   background-repeat: no-repeat;
   background-size: 18px;
   background-position: right 12px center;
}

.links-text {
   flex: 1;
   overflow-y: auto;

   /* такая же панель, как у просмотрщика справа – колонки видимо совпадают */
   background-color: #2B2B2B;
   border-radius: 10px;
   padding: 14px 16px;

   scrollbar-color: gray transparent;
   scrollbar-width: thin;
}

::-webkit-scrollbar {
   width: 5px;
   height: 5px; /* горизонтальный скролл такой же тонкий, как вертикальный */
   background: transparent;
}

::-webkit-scrollbar-thumb {
   background: #D7D7D7;
   border-radius: 10px;
}

p:has(a.pdf-link) {
   margin: 0 0 10px 0;
}

/* Папки в списке материалов */
.doc-folder {
   margin: 0 0 10px 0;
}

.doc-folder__title {
   display: flex;
   align-items: center;
   gap: 9px;

   font-family: 'Open Sans SemiBold', sans-serif;
   /* Список материалов набран мельче остального сайта нарочно: он длинный,
      и крупный шрифт заставлял листать там, где всё могло поместиться */
   font-size: clamp(13px, 1vw, 16.5px);
   /* папка – нейтральная, чуть приглушённее файлов; оранжевый – только
      у выбранного файла и при наведении */
   color: #CFCFCF;

   cursor: pointer;
   user-select: none;

   /* без нижнего маргина: в свёрнутом виде отступы сверху и снизу равны */
   margin: 0;

   /* прячем стандартный треугольник details */
   list-style: none;
}

.doc-folder__title::-webkit-details-marker {
   display: none;
}

/* Стрелка-шеврон, как в меню: вправо – свёрнута, вниз – раскрыта */
.doc-folder__title::before {
   content: "";
   flex-shrink: 0;

   width: 7px;
   height: 7px;
   margin-bottom: 2px;

   border-right: 2px solid #8F8F8F;
   border-bottom: 2px solid #8F8F8F;

   transform: rotate(-45deg);
   transition: transform .15s ease, border-color .15s linear;
}

.doc-folder[open] > .doc-folder__title::before {
   transform: rotate(45deg);
   margin-bottom: 4px;
}

/* только устройства с мышью: на таче :hover «залипает» после тапа,
   и открытая папка выглядела бы «выбранной» (как чинили у файлов) */
@media (any-hover: hover) {
   .doc-folder__title:hover {
      color: #E56F25;
   }

   .doc-folder__title:hover::before {
      border-color: #E56F25;
   }
}

/* Иконка папки меняется при раскрытии */
.doc-folder[open] > .doc-folder__title > .doc-folder__ico {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M1 3.5A1.5 1.5 0 0 1 2.5 2h4.6l2 2h8.4A1.5 1.5 0 0 1 18 5.5V7H1z' fill='%23999'/%3E%3Cpath d='M3.2 7h15.6a1 1 0 0 1 .95 1.3l-1.8 5.6a1.5 1.5 0 0 1-1.43 1.1H2.2a1 1 0 0 1-.95-1.3l1-5.6A1.5 1.5 0 0 1 3.2 7z' fill='%23C9C9C9'/%3E%3C/svg%3E");
}

.pdf-link .ico {
   margin-right: 8px;
}

.doc-folder__children {
   margin-top: 8px;
   margin-left: 16px;
   padding-left: 10px;
   border-left: 1px solid #4A4A4A;
}

.pdf-link {
   font-family: 'Open Sans Regular', sans-serif;
   /* Файл на пункт-полтора мельче папки: папка – заголовок ветки, файлы под
      ней перечисление. При одинаковом размере список читался сплошняком.
      На больших экранах (2560px и выше) эта разница была заложена и раньше */
   font-size: clamp(12px, 0.9vw, 15px);
   color: #FDFDFD;

   text-decoration: none;
}

/* Ховер – только на устройствах с мышью: на тач-экране :hover «залипает»
   после тапа, и открытые файлы выглядели бы как «выбранные» */
@media (any-hover: hover) {
   .pdf-link:hover {
      color: #E56F25;
   }
}

#no-results-message {
   font-family: 'Open Sans Regular', sans-serif;
   color: #B3B3B3;
}

.hr-vertical {
   width: 1px;
   height: 100%;

   background-color: #B4B4B4;
   border-radius: 20px;
}

.pdf-viewer {
   flex: 1;
   min-width: 0;

   display: flex;
   flex-direction: column;
}

/* Просмотрщик PDF.js */
.pdfjs-group {
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.pdfjs-sep {
   width: 1px;
   height: 20px;
   margin: 0 4px;
   background-color: #5c5c5c;
}

.pdfjs-page-input {
   width: 44px;
   height: 28px;

   font-family: 'Open Sans Regular', sans-serif;
   font-size: 13px;
   color: #E3E3E3;
   text-align: center;

   background-color: #353535;
   border: 1px solid #5c5c5c;
   border-radius: 6px;
   outline: none;
}

.pdfjs-page-input:focus {
   border-color: #E56F25;
}

.pdfjs-rotation {
   width: 48px;
   height: 28px;

   font-family: 'Open Sans Regular', sans-serif;
   font-size: 13px;
   color: #E3E3E3;
   text-align: center;

   background-color: #353535;
   border: 1px solid #5c5c5c;
   border-radius: 6px;
   outline: none;
}

.pdfjs-rotation:focus {
   border-color: #E56F25;
}

/* Стрелки поворота чуть наклонены – так читаются как «вращение» */
.pdfjs-toolbar .pdfjs-rot-btn {
   font-size: 17px;
}

.pdfjs-toolbar .pdfjs-rot-btn span {
   display: inline-block;
}

.pdfjs-toolbar .pdfjs-rot-btn[data-op="rot-left"] span {
   transform: rotate(-40deg);
}

.pdfjs-toolbar .pdfjs-rot-btn[data-op="rot-right"] span {
   transform: rotate(40deg);
}

.pdfjs-page-total {
   font-family: 'Open Sans Regular', sans-serif;
   font-size: 13px;
   color: #B3B3B3;
   white-space: nowrap;
}

.pdfjs-toolbar {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;

   padding: 6px 10px;
   margin-bottom: 18px; /* тот же отступ, что у поисковой строки слева */

   background-color: #414141;
   border-radius: 10px;
}

.pdfjs-toolbar button {
   width: 32px;
   height: 28px;

   font-size: 16px;
   line-height: 1;
   color: #E3E3E3;

   background-color: #353535;
   border: 1px solid #5c5c5c;
   border-radius: 6px;

   cursor: pointer;
}

@media (any-hover: hover) {
   /* :not(:disabled) – чтобы погашенная кнопка не подсвечивалась под курсором
      и не выглядела нажимаемой. Так было со звуком у ролика без звуковой
      дорожки: кнопка приглушена, а под мышью загоралась оранжевым */
   .pdfjs-toolbar button:not(:disabled):hover {
      border-color: #E56F25;
      color: #E56F25;
   }
}

.pdfjs-zoom {
   width: 56px;
   height: 28px;

   font-family: 'Open Sans Regular', sans-serif;
   font-size: 13px;
   color: #E3E3E3;

   text-align: center;

   background: none;
   border: 1px solid transparent;
   border-radius: 6px;
   outline: none;
}

.pdfjs-zoom:focus {
   border-color: #5c5c5c;
   background-color: #353535;
}

@media (any-hover: hover) {
   .pdfjs-zoom:hover {
      border-color: #5c5c5c;
      background-color: #353535;
   }
}

.pdfjs-pages {
   position: relative;

   flex: 1;
   overflow: auto;

   scrollbar-width: thin;
   scrollbar-color: #D7D7D7 transparent;

   padding: 10px;

   background-color: #2B2B2B;
   border-radius: 10px;
}

/* Дорожка со страницами: шириной по самому широкому листу, но не уже окна.
   Узкие страницы центрируются относительно неё – иначе рядом с листом шире
   окна они прижимались к левому краю и «съезжали» при прокрутке вбок */
.pdfjs-track {
   width: max-content;
   min-width: 100%;
}

.pdfjs-page {
   margin: 0 auto 12px;

   background-color: #FFFFFF;
   box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

/* Страница, которую сервер ещё рисует: не белый лист, а приглушённая рамка */
.pdfjs-page--empty {
   background-color: #333333;
   box-shadow: none;
   border: 1px solid #3D3D3D;
}

.pdfjs-page canvas {
   display: block;
}

/* Развёрнутый режим: просмотрщик поверх страницы, фон затемнён */
.pdf-backdrop {
   position: fixed;
   inset: 0;
   z-index: 90;

   display: none;
   background-color: rgba(0, 0, 0, .72);
}

.pdf-backdrop--visible {
   display: block;
}

.pdf-viewer--expanded {
   position: fixed;
   inset: 3vh 4vw;
   z-index: 95;

   background-color: #353535;
   border-radius: 14px;
   padding: 12px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}

.pdfjs-status {
   font-family: 'Open Sans Regular', sans-serif;
   color: #B3B3B3;

   text-align: center;
   padding: 24px 0;
}

/* ======== Ролик: своя панель и кадр (video-view.js) ======== */
/* Панель стоит внизу затемнённой области, посередине и ровно по ширине кадра
   (ширину задаёт сам проигрыватель – из разметки она неизвестна).
   Поверх картинки её не кладём: ролик, занявший всю высоту области, она бы
   закрывала. Место под неё отведено отступом снизу у .vid-stage */
.vid-bar {
   position: absolute;
   left: 50%;
   bottom: 10px;
   transform: translateX(-50%);

   margin: 0;
   min-width: min-content;   /* совсем узкому ролику кнопки не сплющиваем */
   max-width: calc(100% - 20px);

   /* Показывается, когда стала известна ширина кадра (класс ставит
      проигрыватель): иначе на миг мелькает узкой и прыгает */
   visibility: hidden;
}

.vid-bar--ready {
   visibility: visible;
}
/* Рамка и панель те же, что у страниц документов, – другое только содержимое:
   дорожка перемотки забирает всё, что осталось от кнопок */
.vid-track {
   flex: 1 1 60px;
   min-width: 40px;
   height: 4px;

   background-color: rgba(255, 255, 255, .28);
   border-radius: 2px;

   cursor: pointer;
   touch-action: none; /* дорожку тянем пальцем, а не прокручиваем страницу */
}

.vid-fill {
   width: 0;
   height: 100%;

   background-color: #E56F25;
   border-radius: 2px;
}

.vid-time {
   flex: none;

   font-family: 'Open Sans Regular', sans-serif;
   font-size: 12px;
   color: #B3B3B3;

   font-variant-numeric: tabular-nums; /* цифры не «прыгают» при отсчёте */
   white-space: nowrap;
}

/* Скорость – выпадающий список (раскрытый рисует наш select-menu.js).
   Ширина ЖЁСТКАЯ: у «1×» и «1,25×» разная длина, и от кнопки, менявшей
   размер под текст, панель дёргалась на каждой смене скорости */
.vid-rate {
   flex: none;
   width: 62px;
   height: 28px;
   padding: 0 16px 0 8px;

   font-family: 'Open Sans Regular', sans-serif;
   font-size: 12px;
   color: #E3E3E3;
   text-align: center;

   background-color: #353535;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23B3B3B3' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 5px center;
   background-size: 8px;

   border: 1px solid #5c5c5c;
   border-radius: 6px;
   outline: none;

   appearance: none;
   -webkit-appearance: none;
   cursor: pointer;
}

@media (any-hover: hover) {
   .vid-rate:hover {
      border-color: #E56F25;
      color: #E56F25;
   }
}

/* В ролике нет звуковой дорожки: кнопка остаётся на месте, но приглушена –
   так видно, что звука нет, а не что кнопку забыли. Курсор обычный, рамка
   тусклая: нажимать нечего, и выглядеть нажимаемой она не должна */
.pdfjs-toolbar .vid-btn--off {
   opacity: .4;
   cursor: default;
   border-color: #4A4A4A;
}

/* Кадр по центру рамки и целиком: прокрутки тут нет – ролик один, и он всегда
   вписан в окно (у страниц документов наоборот, там лента с прокруткой).

   Поле вокруг кадра темнее самой рамки – это «экран». Без затемнения поля
   сливались с окном, и широкий ролик выглядел неудачно обрезанным, а не
   вписанным (владелец, 15.09.2026) */
.vid-stage {
   display: flex;
   align-items: center;
   justify-content: center;

   overflow: hidden;
   outline: none;

   background-color: #1A1A1A;
   /* Полоса под панель: она прибита к нижнему краю области, и кадр не должен
      под неё заходить. 40 – высота панели, 10 – её отступ снизу, 8 – зазор */
   padding-bottom: 58px;
}

/* Рамка обтягивает кадр: надпись поверх ролика не должна вылезать на пустое
   поле вокруг него (у вертикального ролика его больше, чем самого кадра) */
/* Рамка равна самой картинке – ни чёрных полей по бокам, ни обрезки.
   Держится это на пропорции: её ставит проигрыватель по размерам ролика,
   как только они станут известны (до этого – обычные 16:9). Размер рамки
   браузер подбирает сам так, чтобы влезть и по ширине, и по высоте.

   Без пропорции выходило одно из двух: рамка тянулась на всю высоту, и по
   бокам чернели поля (а панель под ней оказывалась шире картинки), либо
   рамка обнимала ролик, но теряла высоту, и картинка обрезалась. */
.vid-frame {
   position: relative;

   aspect-ratio: 16 / 9;
   max-width: 100%;
   max-height: 100%;   /* полосу под панель уже вычел padding сцены */

   overflow: hidden;
}

.vid-video {
   display: block;
   width: 100%;
   height: 100%;

   background-color: #000000;
}

/* Надпись поверх кадра – роли «Пользователь». Сеткой по диагонали, как знак
   на страницах документов; нажатия проходят сквозь неё к самому ролику */
.vid-mark {
   position: absolute;
   inset: -30%;
   z-index: 2;

   display: flex;
   flex-wrap: wrap;
   align-content: center;
   justify-content: center;
   gap: 42px 56px;

   overflow: hidden;
   transform: rotate(-30deg);

   pointer-events: none;
   user-select: none;
}

.vid-mark span {
   font-family: 'Open Sans Regular', sans-serif;
   font-size: 13px;
   color: rgba(241, 176, 135, .42); /* тот же тон, что у знака на страницах */
   white-space: nowrap;
}

/* Отклик на нажатие по кадру: значок вспыхивает в середине и растворяется –
   тот же приём, что у видео-слайда на главной. Без него нажатие выглядит
   так, будто не сработало: панель внизу, а глаз смотрит на картинку */
.vid-flash {
   position: absolute;
   left: 50%;
   top: 50%;
   z-index: 3;

   display: flex;
   align-items: center;
   justify-content: center;

   width: 72px;
   height: 72px;

   color: #E56F25;
   background-color: rgba(43, 43, 43, .82);
   border: 2px solid #E56F25;
   border-radius: 50%;

   opacity: 0;
   pointer-events: none;
   transform: translate(-50%, -50%) scale(.7);
}

.vid-flash--on {
   animation: vid-flash .55s ease-out;
}

@keyframes vid-flash {
   0%   { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
   25%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
   100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); }
}

/* Кому анимация мешает – просто ничего не мигает */
@media (prefers-reduced-motion: reduce) {
   .vid-flash--on {
      animation: none;
   }
}

/* На весь экран разворачивается вся рамка, а не сам тег video: иначе наша
   панель и надпись остались бы за кадром, а вместо них браузер показал бы
   свой проигрыватель – с кнопкой «скачать» */
.pdf-viewer:fullscreen,
.pdf-viewer:-webkit-full-screen {
   display: flex;
   flex-direction: column;

   padding: 8px;
   background-color: #000000;
   border-radius: 0;
}

.pdf-viewer:fullscreen .vid-stage,
.pdf-viewer:-webkit-full-screen .vid-stage {
   background-color: #000000;
   border-radius: 0;
   padding: 0;
}

/* ======== Мобильная вёрстка ======== */
@media (max-width: 900px) {
   .header__inner {
      flex-direction: column;
      align-items: center;
      padding-right: clamp(12px, 3vw, 50px);
      padding-top: 12px;
      padding-bottom: 14px;
      row-gap: 8px;
   }

   /* Вкладки-разделы и бургер – сетка равных ячеек: все вкладки одного
      размера, бургер выровнен с ними; логотип – отдельной строкой по центру */
   .nav {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 6px;
      width: 100%;
      align-items: stretch;
   }

   .nav__link {
      padding: 8px 6px;
      border-radius: 9px; /* активная/наведённая вкладка – скруглённая, не резкий прямоугольник */
   }

   .nav .site-menu {
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   /* Чётное число вкладок – сетка заполнена, бургер отдельной строкой по центру;
      нечётное – бургер занимает свободную ячейку справа, как вкладка */
   .nav--even .site-menu {
      grid-column: 1 / -1;
   }

   .section-main {
      flex: none;
      height: auto;
      min-height: 0;
      flex-direction: column;
   }

   .nav-horizontal {
      flex: 1 1 auto;
      min-width: 0;
   }

   .links-text {
      max-height: none;
      overflow: visible;

      background: none;
      border-radius: 0;
      padding: 0;
   }

   /* На телефоне просмотрщик не стоит в колонке рядом со списком – он
      открывается поверх страницы на весь экран (клик по файлу, см. JS) */
   .hr-vertical,
   .pdf-viewer {
      display: none;
   }

   .pdf-viewer--expanded {
      display: flex;
      inset: 0;
      padding: 8px 8px 0;
      border-radius: 0;
   }

   /* Панель на телефоне переносится: кнопок много, в одну строку не влезают */
   .pdf-viewer--expanded .pdfjs-toolbar {
      flex-wrap: wrap;
      row-gap: 8px;
      margin-bottom: 8px;
   }
}

/* Дубль 5-й вкладки в бургер-меню: показывается только когда сама вкладка
   скрыта (ландшафт телефона, см. ниже) */
.site-menu__item--overflow {
   display: none;
}

/* Достаточно широкие экраны (ландшафт телефона, планшет в портрете):
   вкладки помещаются в один ряд – бургер в том же ряду последней ячейкой,
   как вкладка; правило чётности остаётся только узким телефонам */
@media (min-width: 600px) and (max-width: 900px) {
   .nav .site-menu,
   .nav--even .site-menu {
      grid-column: auto;
   }
}

/* Планшет: ячеек ровно столько, сколько вкладок плюс бургер (--nav-cells
   приходит из разметки). Раньше и тут стояло auto-fit по 130px, число колонок
   зависело от ширины – при пяти разделах их выходило пять, бургер оказывался
   шестым элементом и убегал на вторую строку к левому краю.
   От 700px, а не от 600: у́же ячейка становится тесной и «Справочник»
   переносится посреди слова – там пусть остаётся сетка «сколько влезет» */
@media (min-width: 700px) and (max-width: 900px) {
   .nav {
      grid-template-columns: repeat(var(--nav-cells, 5), minmax(0, 1fr));
   }
}

/* Планшет в портрете (и любой достаточно высокий экран этой ширины):
   страница помещается в окно целиком, как в двухколоночном режиме на широких
   экранах. Прокручивается только список файлов – сама страница не ездит,
   шапка и подвал всегда на месте. Телефоны сюда не попадают: у них либо ширина
   меньше 600, либо (в ландшафте) не хватает высоты, и там прокрутка страницы
   уместнее – список занял бы весь экран. */
@media (min-width: 600px) and (max-width: 900px) and (min-height: 700px) {
   .container {
      height: 100vh;
      height: 100svh; /* см. выше: постоянная высота, без пересчёта при прокрутке */
      min-height: 0;
   }

   .main,
   .nav-horizontal {
      min-height: 0;
   }

   .section-main {
      flex: 1 1 auto;
      min-height: 0;
   }

   /* Возвращаем прокрутку внутри списка: правило для ≤900px её сняло */
   .links-text {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
   }
}

/* Ландшафт телефона: не больше 4 вкладок – 5-я уходит в бургер-меню */
@media (max-width: 900px) and (orientation: landscape) {
   /* Вкладок здесь на одну меньше, чем считает --nav-cells (пятая спрятана),
      поэтому жёсткое число ячеек оставило бы пустую справа – возвращаем
      сетку «сколько влезет» */
   .nav {
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
   }

   .nav .site-menu,
   .nav--even .site-menu {
      grid-column: auto;
   }

   .nav__link--5th {
      display: none;
   }

   .site-menu__item--overflow {
      display: block;
   }
}

/* Пустой раздел в шапке – неактивная вкладка */
.nav__link--empty {
   color: #7F7F7F;
   background: none;
   cursor: default;
}

/* ======== 4K и большие мониторы (в конце файла – после базовых правил) ======== */
@media (min-width: 2560px) {
   .nav__link {
      font-size: 24px;
   }

   .pdf-link {
      font-size: 22px;
   }

   .doc-folder__title {
      font-size: 23px;
   }

   .input-search {
      height: 50px;
      font-size: 18px;
      background-size: 22px;
      background-position: right 14px center;
   }

   .doc-folder__title::before {
      width: 9px;
      height: 9px;
   }

   /* Панель просмотрщика PDF */
   .pdfjs-toolbar {
      gap: 10px;
      padding: 8px 12px;
   }

   .pdfjs-toolbar button {
      width: 40px;
      height: 36px;
      font-size: 19px;
   }

   .pdfjs-page-input,
   .pdfjs-rotation,
   .pdfjs-zoom {
      height: 36px;
      font-size: 16px;
   }

   .pdfjs-page-input {
      width: 54px;
   }

   .pdfjs-rotation {
      width: 60px;
   }

   .pdfjs-zoom {
      width: 68px;
   }

   .pdfjs-page-total {
      font-size: 16px;
   }

   .pdfjs-sep {
      height: 26px;
   }

   .pdfjs-toolbar .pdfjs-rot-btn {
      font-size: 21px;
   }
}

/* 4K на 100% масштаба */
@media (min-width: 3400px) {
   .nav__link {
      font-size: 28px;
   }

   .pdf-link {
      font-size: 26px;
   }

   .doc-folder__title {
      font-size: 27px;
   }

   .input-search {
      height: 62px;
      font-size: 22px;
      background-size: 26px;
      background-position: right 16px center;
   }

   .doc-folder__title::before {
      width: 11px;
      height: 11px;
   }

   /* Панель просмотрщика PDF */
   .pdfjs-toolbar {
      gap: 12px;
      padding: 9px 14px;
   }

   .pdfjs-toolbar button {
      width: 46px;
      height: 42px;
      font-size: 22px;
   }

   .pdfjs-page-input,
   .pdfjs-rotation,
   .pdfjs-zoom {
      height: 42px;
      font-size: 18px;
   }

   .pdfjs-page-input {
      width: 62px;
   }

   .pdfjs-rotation {
      width: 68px;
   }

   .pdfjs-zoom {
      width: 78px;
   }

   .pdfjs-page-total {
      font-size: 18px;
   }

   .pdfjs-sep {
      height: 30px;
   }

   .pdfjs-toolbar .pdfjs-rot-btn {
      font-size: 25px;
   }
}