/* ================================================== */
/* Общие стили: шрифты, контейнер, шапка, подвал.     */
/* Подключается после style.css на всех страницах.    */
/* ================================================== */

/* Шрифты */
@font-face {
   font-family: 'Open Sans SemiBold';
   src: url(../fonts/Open-Sans/OpenSans-SemiBold.woff2) format('woff2');
   font-display: swap;
}

@font-face {
   font-family: 'Open Sans Medium';
   src: url(../fonts/Open-Sans/OpenSans-Medium.woff2) format('woff2');
   font-display: swap;
}

@font-face {
   font-family: 'Open Sans Regular';
   src: url(../fonts/Open-Sans/OpenSans-Regular.woff2) format('woff2');
   font-display: swap;
}

@font-face {
   font-family: 'Open Sans Light';
   src: url(../fonts/Open-Sans/OpenSans-Light.woff2) format('woff2');
   font-display: swap;
}

@font-face {
   font-family: 'Raleway Light';
   src: url(../fonts/Raleway/Raleway-Light.woff2) format('woff2');
   font-display: swap;
}

@font-face {
   font-family: 'Raleway Regular';
   src: url(../fonts/Raleway/Raleway-Regular.woff2) format('woff2');
   font-display: swap;
}

@font-face {
   font-family: 'Raleway Medium';
   src: url(../fonts/Raleway/Raleway-Medium.woff2) format('woff2');
   font-display: swap;
}

@font-face {
   font-family: 'Raleway SemiBold';
   src: url(../fonts/Raleway/Raleway-SemiBold.woff2) format('woff2');
   font-display: swap;
}

/* Нажатия на тач-экране.
   Мобильные браузеры подсвечивают нажатый элемент полупрозрачным голубым
   прямоугольником по всей его площади – цвет чужой, форма прямоугольная даже у
   скруглённых кнопок. Отключаем везде (свойство наследуется от html) и даём
   свой отклик: короткое нажатие видно по лёгкому потемнению и уменьшению –
   так же, как ведут себя кнопки при наведении мышью. */
html {
   -webkit-tap-highlight-color: transparent;

   /* Телефон в ландшафте: браузер сам увеличивает текст, если страница шире
      экрана в портрете – подписи и подсказки раздувались до неузнаваемости.
      Запрещаем: размеры берём только из стилей */
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
}

@media (hover: none) {
   /* 1. Кнопки – своя заливка есть, поэтому короткое затемнение и лёгкое
      уменьшение. Уменьшаем свойством scale, а не transform: у многих
      transform уже занят (стрелки слайд-шоу центрируются им) */
   button:active,
   input[type="submit"]:active,
   [role="button"]:active,
   .user-menu__item:active {   /* в меню входа рядом стоят и <button>, и <a> – отклик у них общий */
      opacity: 1;
      filter: brightness(.92);
      scale: .985;
   }

   /* 2. Ссылки и подписи без своей заливки – иконки, логотип, текстовые
      ссылки. Им НЕЛЬЗЯ давать фон: прямоугольник (пусть и скруглённый)
      не совпадает с формой круглой иконки и читается как неровное свечение
      вокруг неё. Приглушаем сам элемент – отклик повторяет содержимое */
   a:active,
   label:active {
      opacity: .6;
   }

   /* 3. Строки списков – файлы и папки. Здесь подсветка уместна: строка и
      есть прямоугольник. inline-block, чтобы у длинного названия подсветка
      покрывала весь блок строки, а не обрывалась по краям слов */
   .pdf-link {
      display: inline-block;
      max-width: 100%;
   }

   .pdf-link:active,
   .doc-folder__title:active,
   summary:active {
      opacity: 1;
      background-color: rgba(229, 111, 37, .16);
      border-radius: 6px;
   }

   /* 4. Плашки разделов и карточки блога – со своей заливкой, светлой или
      тёмной. Затемняем целиком: так отклик одинаково виден и на светлой
      плашке главной, и на тёмной карточке блога.
      Раньше здесь стояло ещё и «background-color: initial» – а это
      прозрачный: плашка на нажатие теряла свою заливку и показывала тёмный
      фон страницы. Отсюда и бралась чернота. */
   .link:active,
   .blog-card:active {
      opacity: 1;
      filter: brightness(.90);
   }
}

/* Кому движение мешает – остаётся только цвет */
@media (hover: none) and (prefers-reduced-motion: reduce) {
   button:active,
   input[type="submit"]:active,
   [role="button"]:active {
      scale: none;
   }
}

/* Контейнер */
.container {
   display: flex;
   flex-direction: column;
   min-height: 100%;
   /* svh – по МЕНЬШЕЙ видимой высоте (когда адресная строка на месте).
      Раньше здесь был dvh, но он меняется в момент, когда строка прячется:
      страница перестраивалась прямо во время прокрутки, и на планшете
      прокрутку отбрасывало назад. svh постоянна – во время прокрутки ничего
      не пересчитывается, а подвал по-прежнему прижат к низу */
   min-height: 100svh;

   width: 100%;
   max-width: 1650px;
   margin: 0 auto;
   padding: 0 15px;
}

@media (min-width: 2200px) {
   .container {
      max-width: 2000px;
   }
}

/* 4K и большие мониторы */
@media (min-width: 2560px) {
   .container {
      max-width: 2400px;
   }
}

@media (min-width: 3400px) {
   .container {
      max-width: 2900px;
   }
}

/* Шапка */
.header {
   width: 100%;

   background-color: #4A4A4A;
   border-radius: 0 0 20px 20px;
   box-shadow: 0 0 15px 0 rgba(0, 0, 0, .25);
}

.header__inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px;

   /* Компактная шапка внутренних страниц; на главной переопределяется выше */
   min-height: clamp(56px, 5vw, 95px);
   padding: 0 clamp(12px, 3vw, 55px);
}

/* Логотип на внутренних страницах (горизонтальная надпись 240x43) */
.img-header,
.image-header {
   width: clamp(150px, 15vw, 220px);
   height: auto;
   display: block;
}

/* Ссылка-обёртка логотипа: без строки текста – пробельные узлы вокруг <img>
   дают лишнюю высоту, и логотип съезжает с вертикального центра шапки
   (правило было только в docs.css – админка/блог/статьи страдали) */
.header__inner > a {
   align-self: center;
   line-height: 0;
}

/* Основной блок – уже шапки и подвала на ~5% */
.main {
   flex: 1 1 auto;

   padding-left: 2.5%;
   padding-right: 2.5%;
}

.section {
   width: 100%;
}

/* Кнопка «Выйти» */
.logout-btn {
   flex-shrink: 0;

   padding: 8px 16px;

   font-family: 'Raleway Medium', sans-serif;
   font-size: clamp(12px, 1vw, 15px);
   color: #E56F25;

   background: none;
   border: 1px solid #E56F25;
   border-radius: 10px;

   cursor: pointer;
   transition: background-color .15s linear, color .15s linear;
}

@media (any-hover: hover) {
   .logout-btn:hover {
      background-color: #E56F25;
      color: #FFFFFF;
   }
}

.logout-btn[hidden] {
   display: none;
}

/* Выпадающее меню в шапке внутренних страниц */
.site-menu {
   position: relative;
   align-self: center;
}

/* Кнопка меню – «бургер»: три полоски, при открытии складываются в крестик.
   Подложка и цвета – в языке вкладок (оранжевый, заливка при открытии) */
.menu-btn {
   position: relative;
   display: inline-flex;
   flex-direction: column;
   justify-content: center;
   gap: 5px;

   width: 44px;
   height: 38px;
   padding: 0 11px;

   color: #E56F25;
   background-color: rgba(229, 111, 37, .12);
   border: none;
   border-radius: 10px;

   cursor: pointer;
   transition: background-color .15s linear, color .15s linear, box-shadow .15s linear;
}

.menu-btn.open {
   background-color: #E56F25;
   color: #FFFFFF;
   box-shadow: 0 4px 14px rgba(229, 111, 37, .35);
}

/* ховер – только у мыши: на таче он «залипал», и бургер после закрытия
   меню оставался залитым оранжевым до следующего тапа */
@media (any-hover: hover) {
   .menu-btn:hover {
      background-color: #E56F25;
      color: #FFFFFF;
      box-shadow: 0 4px 14px rgba(229, 111, 37, .35);
   }
}

.menu-btn__bar {
   display: block;
   width: 22px;
   height: 2px;
   border-radius: 2px;
   background-color: currentColor;

   transform-origin: center;
   transition: transform .22s ease, opacity .15s linear;
}

/* Открыто: верхняя и нижняя полоски сходятся в крестик, средняя исчезает */
.menu-btn.open .menu-btn__bar:nth-child(1) {
   transform: translateY(7px) rotate(45deg);
}

.menu-btn.open .menu-btn__bar:nth-child(2) {
   opacity: 0;
   transform: scaleX(0);
}

.menu-btn.open .menu-btn__bar:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg);
}

.site-menu__list {
   position: absolute;
   top: calc(100% + 8px);
   right: 0;
   z-index: 30;

   display: flex;
   flex-direction: column;

   min-width: 185px;
   padding: 6px;

   background-color: #4A4A4A;
   border: 1px solid rgba(229, 111, 37, .35);
   border-radius: 12px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
}

.site-menu__list[hidden] {
   display: none;
}

.site-menu__item {
   padding: 9px 14px;
   max-width: 340px;
   overflow-wrap: anywhere;

   font-family: 'Raleway Medium', sans-serif;
   font-size: 14px;
   color: #E4E4E4;
   text-align: left;
   text-decoration: none;

   background: none;
   border: none;
   border-radius: 8px;

   cursor: pointer;
}

@media (any-hover: hover) {
   .site-menu__item:hover {
      background-color: #E56F25;
      color: #FFFFFF;
   }
}

/* Подвал */
.footer {
   width: 100%;

   background-color: #4A4A4A;
   border-radius: 20px 20px 0 0;
   box-shadow: 0 0 15px 0 rgba(0, 0, 0, .25);

   margin-top: auto;
}

.footer__inner {
   position: relative;

   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 10px;

   min-height: clamp(64px, 6vw, 110px);
   padding: 10px clamp(12px, 3vw, 55px);
}

.footer__inner > *,
.footer__inner::after {
   flex: 1;
}

/* третья «колонка»-заглушка вместо иконки (она вынесена к краю подвала),
   чтобы средний текст оставался по центру */
.footer__inner::after {
   content: "";
}

.footer-text {
   font-family: 'Open Sans Medium', sans-serif;
   font-size: clamp(10px, 0.9vw, 15px);
   color: #EE741D;

   text-align: left;
}

.footer--text + .footer--text {
   margin-top: 6px;
}

/* Ссылка на политику обработки данных – строкой под названием ИП. Размер и цвет
   наследует от .footer-text, поэтому растёт и сжимается вместе с подписью.
   Подсветка в одном языке с подписью разработчика – линия под словами, – но
   спокойнее: она есть всегда (это ссылка, и это должно быть видно) и при
   наведении разгорается вместе с текстом, без градиента и свечения */
.footer-link {
   color: inherit;

   /* Линия рисуется подчёркиванием, а не отдельным элементом: строка на узком
      экране переносится, и приклеенная снизу полоска оказалась бы не под теми
      словами. Отступ, чтобы линия не липла к буквам с хвостами */
   text-decoration: underline;
   text-decoration-thickness: 1px;
   text-decoration-color: rgba(238, 116, 29, .45);
   text-underline-offset: 3px;
   transition: color .25s ease, text-decoration-color .25s ease, text-decoration-thickness .25s ease;
}

@media (any-hover: hover) {
   .footer-link:hover {
      color: #FFA458;
      text-decoration-thickness: 2px;
      text-decoration-color: #FFA458;
   }
}

.text-footer {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.text-dev {
   margin: 2px 0;

   font-family: 'Open Sans Medium', sans-serif;
   font-size: clamp(12px, 1vw, 17px);
   color: #EE741D;
}

/* Годы – на 2 пункта мельче подписи и с большим отступом от неё */
.text-dev--years {
   margin-top: 9px;
   font-size: clamp(10px, calc(1vw - 2pt), calc(17px - 2pt));
}

/* Строка «© saulby»: знак и подпись по центру друг друга */
.text-dev--author {
   display: inline-flex;
   align-items: baseline;
   gap: .35em;
}

/* знак © в Open Sans сидит чуть ниже середины строчных букв Raleway –
   приподнимаем подпись, чтобы глазом они читались на одной линии */
.text-dev--author .dev-link {
   position: relative;
   top: -.06em;
}

/* Подпись разработчика – градиентный текст с линией-акцентом,
   без рамки и фона; при наведении линия растягивается и появляется свечение */
.dev-link {
   position: relative;
   display: inline-block;

   font-family: 'Raleway SemiBold', sans-serif;
   font-size: 1.05em;
   letter-spacing: .12em;
   line-height: 1.2;
   text-decoration: none;

   color: #EE741D;
   background-image: linear-gradient(90deg, #EE741D 0%, #FFA458 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;

   transition: filter .2s linear;
}

.dev-link::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -3px;

   width: 38%;
   height: 2px;
   border-radius: 2px;
   background-image: linear-gradient(90deg, #EE741D 0%, #FFA458 100%);

   transition: width .25s ease;
}

.dev-link:focus-visible {
   filter: drop-shadow(0 0 6px rgba(238, 116, 29, .55));
   outline: none;
}

@media (any-hover: hover) {
   .dev-link:hover {
      filter: drop-shadow(0 0 6px rgba(238, 116, 29, .55));
      outline: none;
   }
}

.dev-link:focus-visible::after {
   width: 100%;
}

@media (any-hover: hover) {
   .dev-link:hover::after {
      width: 100%;
   }
}

.icon-message {
   --icon-w: clamp(44px, 3.8vw, 72px);

   /* Иконка вровень с правым краем блоков разделов: .main отступает
      от краёв на 2.5%, а в SVG вокруг круга по 10/73 ширины «воздуха»
      под тень – сдвигаем на эту величину дальше вправо */
   position: absolute;
   top: 50%;
   right: calc(2.5% - var(--icon-w) * 10 / 73);
   transform: translateY(-50%);

   line-height: 0;
}

.icon-message img {
   width: var(--icon-w);
   height: auto;
   vertical-align: middle;
}

/* Мобильный подвал */
@media (max-width: 700px) {
   .footer__inner {
      flex-direction: column;
      gap: 6px;

      padding-top: 12px;
      padding-bottom: 12px;
   }

   .footer__inner::after {
      display: none;
   }

   .footer-text {
      text-align: center;
   }

   /* Иконка обратной связи – у правого края по середине высоты подвала,
      а не отдельной строкой снизу: подвал на телефоне остаётся компактным */
   .icon-message {
      position: absolute;
      right: clamp(10px, 3.5vw, 18px);
      top: 50%;
      bottom: auto;
      transform: translateY(-50%);
   }

   .icon-message img {
      width: clamp(40px, 11vw, 52px);
   }
}

/* Подсказка у иконки обратной связи (лимит обращений) */

.icon-message__note {
   position: absolute;
   right: 0;
   bottom: calc(100% + 10px);

   width: max-content;
   max-width: min(320px, 80vw);
   padding: 8px 12px;

   font-family: 'Open Sans Regular', sans-serif;
   font-size: 13px;
   line-height: 1.35;
   color: #FFFFFF;
   text-align: left;

   background-color: #353535;
   border: 1px solid #E56F25;
   border-radius: 8px;
   box-shadow: 0 6px 16px rgba(0, 0, 0, .4);

   opacity: 0;
   pointer-events: none;
   transition: opacity .15s linear;
}

.icon-message__note--visible {
   opacity: 1;
}

/* Форма обращения у той же иконки. Разметку собирает contacts.js – иконка
   стоит в подвале всех страниц сайта и блога, и дублировать кусок в каждый
   файл значило бы однажды про один забыть */
.feedback {
   position: absolute;
   right: 0;
   bottom: calc(100% + 10px);
   z-index: 20;

   font-family: 'Open Sans Regular', sans-serif;

   width: min(340px, 86vw);
   padding: 10px 14px 14px;

   text-align: left;

   /* Рамка и фон – как у выпадающего меню в шапке: это такое же окошко поверх
      страницы. Раньше рамка была сплошной оранжевой, той же, что у поля
      в фокусе, – окно и поле сливались в одну фигуру */
   background-color: #4A4A4A;
   border: 1px solid rgba(229, 111, 37, .35);
   border-radius: 12px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}

.feedback__title {
   margin: 0 0 12px;

   font-family: 'Open Sans SemiBold', sans-serif;
   font-size: 14px;
   line-height: 1.2;
   color: #FFFFFF;
}

.feedback__close {
   position: absolute;
   top: 6px;
   right: 8px;

   padding: 2px 6px;

   font-size: 18px;
   line-height: 1;
   color: #B3B3B3;

   background: none;
   border: 0;
   cursor: pointer;
}

.feedback__text,
.feedback__from {
   display: block;
   box-sizing: border-box;
   width: 100%;
   margin-bottom: 8px;
   padding: 8px 10px;

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

   background-color: #2B2B2B;
   border: 1px solid #5c5c5c;
   border-radius: 6px;
   resize: vertical;
}

/* Поле сообщения сразу высокое: писать в щель на три строки неудобно,
   а тянуть за уголок догадается не каждый. Растёт с окном, но в разумных
   пределах – на телефоне форма не должна упираться в верх экрана */
.feedback__text {
   height: clamp(150px, 32vh, 240px);
}

/* Своя рамка фокуса: системная голубая в оранжево-тёмном оформлении
   выглядит чужой */
.feedback__text:focus,
.feedback__from:focus {
   outline: none;
   border-color: #E56F25;
}

.feedback__send {
   padding: 8px 18px;

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

   background-color: #E56F25;
   border: 0;
   border-radius: 6px;
   cursor: pointer;
}

.feedback__send:disabled {
   opacity: .6;
   cursor: default;
}

/* Согласие на обработку данных – строка с галочкой под полями. Галочка и текст
   на одной базовой линии, ссылка на политику открывается в новой вкладке,
   чтобы написанное письмо не потерялось */
.feedback__agree {
   display: flex;
   align-items: flex-start;
   gap: 8px;

   margin-top: 2px;

   font-family: 'Open Sans Regular', sans-serif;
   font-size: 12px;
   line-height: 1.35;
   color: #B3B3B3;
   cursor: pointer;
}

.feedback__agree-box {
   flex-shrink: 0;
   width: 15px;
   height: 15px;
   margin: 1px 0 0;
   accent-color: #E56F25;
   cursor: pointer;
}

.feedback__agree a {
   color: #E56F25;
}

@media (any-hover: hover) {
   .feedback__agree a:hover {
      text-decoration: none;
   }
}

/* Кнопка и строка состояния в одном ряду: отдельная строка снизу требовала
   бы держать под неё место всегда (иначе форма прыгает при появлении
   сообщения), а пустая полоса под кнопкой выглядит неопрятно. Рядом с
   кнопкой место есть, а высоту ряда задаёт сама кнопка */
.feedback__row {
   display: flex;
   align-items: center;
   gap: 12px;

   margin-top: 12px;
}

.feedback__note {
   flex: 1;
   margin: 0;

   font-family: 'Open Sans Regular', sans-serif;
   font-size: 12px;
   line-height: 1.35;
   color: #8D8D8D;
}

.feedback__note--ok {
   color: #70CB29;
}

/* Иконки папок и файлов (SVG в CSS) – одинаковые на сайте и в админке */
.ico {
   display: inline-block;
   flex-shrink: 0;
   width: 18px;
   height: 16px;
   vertical-align: -2px;

   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
}

/* папка закрытая */
.ico--folder {
   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 2H17.5A1.5 1.5 0 0 1 19 5.5v8a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 1 13.5z' fill='%23B9B9B9'/%3E%3Cpath d='M1 6h18v1.2H1z' fill='%23888'/%3E%3C/svg%3E");
}

/* папка открытая */
.ico--folder-open {
   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, солнце с горами – картинка, горы со строкой –
   скан, треугольник – видео. Книга нарочно не лист, а книга: её силуэт
   отличается сразу, даже когда значок мелкий.
   Классы даёт сервер – file_icon_class() в app/php/file-kinds.php, чтобы
   список видов был в одном месте, а не в трёх. */
.ico--file,
.ico--pdf,
.ico--image,
.ico--djvu,
.ico--video,
.ico--epub {
   width: 14px;
   height: 17px;
}

/* PDF (он же запасной значок для незнакомого вида): две строки текста */
.ico--file,
.ico--pdf {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 17'%3E%3Cpath d='M1.5 0h7.3L13.5 4.7V15.5A1.5 1.5 0 0 1 12 17H1.5A1.5 1.5 0 0 1 0 15.5v-14A1.5 1.5 0 0 1 1.5 0z' fill='%23DADADA'/%3E%3Cpath d='M8.8 0v4.7h4.7z' fill='%23A3A3A3'/%3E%3Cpath d='M2.6 9h8.8v1.3H2.6zm0 2.8h8.8v1.3H2.6z' fill='%23E56F25'/%3E%3C/svg%3E");
}

/* картинка: солнце над горами */
.ico--image {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 17'%3E%3Cpath d='M1.5 0h7.3L13.5 4.7V15.5A1.5 1.5 0 0 1 12 17H1.5A1.5 1.5 0 0 1 0 15.5v-14A1.5 1.5 0 0 1 1.5 0z' fill='%23DADADA'/%3E%3Cpath d='M8.8 0v4.7h4.7z' fill='%23A3A3A3'/%3E%3Ccircle cx='4.4' cy='9.5' r='1.2' fill='%23E56F25'/%3E%3Cpath d='M2.3 14.6l3-3.6 1.8 2.1 1.5-1.8 3.1 3.3z' fill='%23E56F25'/%3E%3C/svg%3E");
}

/* скан DjVu: страница в рамке, внутри строки – снимок страницы, а не
   картинка. Горы с солнцем тут были сперва, но рядом с картинкой они
   слишком похожи (владелец, 15.09.2026) */
.ico--djvu {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 17'%3E%3Cpath d='M1.5 0h7.3L13.5 4.7V15.5A1.5 1.5 0 0 1 12 17H1.5A1.5 1.5 0 0 1 0 15.5v-14A1.5 1.5 0 0 1 1.5 0z' fill='%23DADADA'/%3E%3Cpath d='M8.8 0v4.7h4.7z' fill='%23A3A3A3'/%3E%3Crect x='2.4' y='8' width='9.2' height='6.6' rx='0.7' fill='none' stroke='%23E56F25' stroke-width='1.2'/%3E%3Cpath d='M3.9 10.2h6.2v0.9H3.9zm0 1.8h6.2v0.9H3.9z' fill='%23E56F25'/%3E%3C/svg%3E");
}

/* видео: треугольник пуска. Стоит выше середины листа – ниже он выглядел
   съехавшим вниз (загнутый уголок тянет взгляд вверх) */
.ico--video {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 17'%3E%3Cpath d='M1.5 0h7.3L13.5 4.7V15.5A1.5 1.5 0 0 1 12 17H1.5A1.5 1.5 0 0 1 0 15.5v-14A1.5 1.5 0 0 1 1.5 0z' fill='%23DADADA'/%3E%3Cpath d='M8.8 0v4.7h4.7z' fill='%23A3A3A3'/%3E%3Cpath d='M4.9 7.3l5.3 3.2-5.3 3.2z' fill='%23E56F25'/%3E%3C/svg%3E");
}

/* книга EPUB: обложка с корешком и закладкой – силуэт не листа, а книги,
   поэтому её видно в списке даже боковым зрением */
.ico--epub {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 17'%3E%3Crect x='0.6' y='0' width='12.8' height='17' rx='1.4' fill='%23DADADA'/%3E%3Cpath d='M2 0h2.6v17H2A1.4 1.4 0 0 1 0.6 15.6V1.4A1.4 1.4 0 0 1 2 0z' fill='%23A3A3A3'/%3E%3Cpath d='M8.4 0h3v7l-1.5-1.4L8.4 7z' fill='%23E56F25'/%3E%3C/svg%3E");
}

/* Иконки пунктов меню (шапка внутренних страниц и главная): маска из SVG,
   закрашенная текущим цветом текста – при наведении белеет вместе с ним */
.site-menu__item,
.user-menu__item {
   display: flex;
   align-items: center;
   gap: 10px;
   white-space: nowrap;
}

.site-menu__item[class*="__item--"]::before,
.user-menu__item[class*="__item--"]::before {
   content: "";
   flex: none;
   width: 16px;
   height: 16px;

   background-color: currentColor;
   -webkit-mask: var(--menu-ico) no-repeat center / contain;
   mask: var(--menu-ico) no-repeat center / contain;
}

.site-menu__item--home,
.user-menu__item--home {
   --menu-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 7.5 8 2.3l6 5.2V14H9.6V9.8H6.4V14H2z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.site-menu__item--section {
   --menu-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 1.5h6l3 3v10h-9z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M9.5 1.5v3h3M5.8 8h4.4M5.8 11h4.4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.site-menu__item--calc,
.user-menu__item--calc {
   --menu-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='1.5' width='10' height='13' rx='1.6' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Crect x='5.2' y='3.7' width='5.6' height='2.4' rx='.5' fill='%23000'/%3E%3Ccircle cx='5.9' cy='8.8' r='.95' fill='%23000'/%3E%3Ccircle cx='8' cy='8.8' r='.95' fill='%23000'/%3E%3Ccircle cx='10.1' cy='8.8' r='.95' fill='%23000'/%3E%3Ccircle cx='5.9' cy='11.6' r='.95' fill='%23000'/%3E%3Ccircle cx='8' cy='11.6' r='.95' fill='%23000'/%3E%3Ccircle cx='10.1' cy='11.6' r='.95' fill='%23000'/%3E%3C/svg%3E");
}

.site-menu__item--admin,
.user-menu__item--admin {
   --menu-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.2' fill='none' stroke='%23000' stroke-width='2.6' stroke-dasharray='2.05 2.04'/%3E%3Ccircle cx='8' cy='8' r='4.2' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='8' cy='8' r='1.5' fill='%23000'/%3E%3C/svg%3E");
}

/* Правка страницы (политика обработки данных) – карандаш */
.site-menu__item--edit {
   --menu-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.2 1.9 14.1 4.8 5.6 13.3 2 14l.7-3.6z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M9.9 3.2 12.8 6.1' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}

.site-menu__item--logout,
.user-menu__item--logout {
   --menu-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2.5H3v11h3.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.5 5l3 3-3 3M12.5 8H6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Недоступный пункт меню (например, калькулятор без расчётов) */
.site-menu__item:disabled,
.user-menu__item:disabled {
   color: #7F7F7F;
   background: none;
   cursor: default;
}

@media (any-hover: hover) {
   .site-menu__item:disabled:hover,
   .user-menu__item:disabled:hover {
      color: #7F7F7F;
      background: none;
      cursor: default;
   }
}

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

@media (any-hover: hover) {
   .site-menu__item--empty:hover {
      color: #7F7F7F;
      background: none;
      cursor: default;
   }
}

/* ======== 2K+ и 4K: шапка и подвал на всех страницах ======== */
@media (min-width: 2560px) {
   .img-header,
   .image-header {
      width: 240px;
   }

   .footer-text {
      font-size: 17px;
   }

   .icon-message {
      --icon-w: 84px;
   }

   .menu-btn {
      width: 52px;
      height: 46px;
      gap: 6px;
      border-radius: 12px;
      /* базовый padding 11px рассчитан на кнопку 44px – здесь центрируем флексом */
      padding: 0;
      align-items: center;
   }

   .menu-btn__bar {
      width: 26px;
   }

   .site-menu__item {
      font-size: 17px;
      padding: 11px 18px;
   }

   .site-menu__list {
      min-width: 230px;
   }

   .icon-message__note {
      font-size: 15px;
      max-width: min(380px, 80vw);
   }

   .ico {
      width: 22px;
      height: 20px;
      vertical-align: -3px;
   }

   /* крестик бургера: смещение полосок = высота полоски + новый зазор */
   .menu-btn.open .menu-btn__bar:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
   }

   .menu-btn.open .menu-btn__bar:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
   }
}

@media (min-width: 3400px) {
   .img-header,
   .image-header {
      width: 270px;
   }

   .footer-text {
      font-size: 20px;
   }

   .icon-message {
      --icon-w: 96px;
   }

   .menu-btn {
      width: 60px;
      height: 52px;
      gap: 7px;
      padding: 0;
      align-items: center;
   }

   .menu-btn__bar {
      width: 30px;
      height: 3px;
   }

   .site-menu__item {
      font-size: 19px;
      padding: 12px 20px;
   }

   .site-menu__list {
      min-width: 260px;
   }

   .icon-message__note {
      font-size: 17px;
      max-width: min(430px, 80vw);
   }

   .ico {
      width: 26px;
      height: 23px;
      vertical-align: -4px;
   }

   .menu-btn.open .menu-btn__bar:nth-child(1) {
      transform: translateY(10px) rotate(45deg);
   }

   .menu-btn.open .menu-btn__bar:nth-child(3) {
      transform: translateY(-10px) rotate(-45deg);
   }
}

/* УНП в подвале: iOS подчёркивает длинные числа как телефон даже при
   format-detection (замечено в Arc на айфоне). Рвём цифры невидимым
   разделителем – определитель видит три коротких куска, человек обычный
   номер. Разделитель нарисован стилем, поэтому в копию текста не попадает */
.unp span::before {
   content: "\200B";
}

/* ================================================== */
/* Правка текста прямо на странице – public/js/page-edit.js */
/* Панель есть на странице политики и в статьях блога,     */
/* и только у администратора: гостю скрипт не отдают.      */
/* Рамку и фон даёт .rich (rich.css) – здесь только то,    */
/* чего у панели в админке нет: ряд кнопок и подсказка     */
/* ================================================== */

.page-edit {
   margin-bottom: clamp(16px, 2vw, 24px);

   /* .rich прячет всё, что вылезает за скруглённые углы: в админке под панелью
      стоит высокое поле ввода, и палитра цвета раскрывалась внутри него.
      Здесь панель низкая – палитру обрезало снизу, поэтому выпускаем её
      наружу, а углы скругляем самой панели кнопок */
   overflow: visible;
}

.page-edit > .rich__toolbar {
   border-radius: 8px 8px 0 0;
}

/* Палитра цвета раскрывается влево от кнопки: в админке панель широкая и
   кнопка цвета стоит посередине, а здесь она у правого края – раскрытая
   вправо палитра уезжала за край окна, и «Сбросить» было не достать */
.page-edit .rich__palette {
   left: auto;
   right: 0;
}

.page-edit[hidden] {
   display: none;
}

.page-edit__row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px;

   padding: 10px 12px;
}

.page-edit__save,
.page-edit__cancel {
   padding: 8px 18px;

   font-family: 'Open Sans SemiBold', sans-serif;
   font-size: 13px;
   border: 0;
   border-radius: 6px;
   cursor: pointer;
}

.page-edit__save {
   color: #FFFFFF;
   background-color: #E56F25;
}

.page-edit__cancel {
   color: #E3E3E3;
   background-color: #4A4A4A;
}

.page-edit__note {
   flex: 1 1 140px;
   margin: 0;

   font-family: 'Open Sans Regular', sans-serif;
   font-size: 12px;
   line-height: 1.35;
   color: #8D8D8D;
}

.page-edit__note--ok {
   color: #70CB29;
}

.page-edit__hint {
   margin: 0;
   padding: 0 12px 12px;

   font-family: 'Open Sans Regular', sans-serif;
   font-size: 12px;
   line-height: 1.45;
   color: #8D8D8D;
}

/* Текст в правке: видно, где границы изменяемой области */
.page-edit--on {
   outline: 1px dashed rgba(229, 111, 37, .5);
   outline-offset: 10px;
}

/* 2K и 4K: кнопки и подписи крупнее вместе с остальной страницей */
@media (min-width: 2560px) {
   .page-edit__save,
   .page-edit__cancel {
      font-size: 16px;
      padding: 10px 20px;
   }

   .page-edit__note,
   .page-edit__hint {
      font-size: 15px;
   }
}

/* ================================================== */
/* Отправка файла («Поделиться») – app/js/share-file.js */
/* ================================================== */

.file-toast {
   position: fixed;
   left: 50%;
   bottom: 24px;
   transform: translateX(-50%);
   z-index: 99;

   max-width: min(420px, calc(100vw - 32px));
   padding: 12px 16px;

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

   background-color: #2B2B2B;
   border: 1px solid #5c5c5c;
   border-radius: 10px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

/* Техническая строчка в подсказке: что ответил браузер про отправку */
.file-toast__tech {
   display: block;
   margin-top: 6px;

   font-size: 12px;
   color: #9A9A9A;
}

.share-ask__backdrop {
   position: fixed;
   inset: 0;
   z-index: 99;
   background-color: rgba(0, 0, 0, .5);
}

.share-ask {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 100;

   width: min(360px, calc(100vw - 32px));
   padding: 20px;

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

   background-color: #2B2B2B;
   border: 1px solid #5c5c5c;
   border-radius: 14px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}

.share-ask__text {
   margin: 0 0 16px;
   font-size: 15px;
   line-height: 1.4;
   overflow-wrap: anywhere;
}

.share-ask__actions {
   display: flex;
   gap: 10px;
}

.share-ask__actions button {
   height: 36px;
   padding: 0 18px;

   font-family: 'Raleway Medium', sans-serif;
   font-size: 14px;
   color: #E3E3E3;

   background-color: #3a3a3a;
   border: 1px solid #5c5c5c;
   border-radius: 8px;
   cursor: pointer;
}

.share-ask__send {
   color: #FFFFFF;
   background-color: #E56F25;
   border-color: #E56F25;
}

@media (any-hover: hover) {
   .share-ask__actions button:hover {
      border-color: #E56F25;
   }
}

/* Иконка «поделиться» в панели просмотрщика – по центру кнопки */
.pdfjs-toolbar button svg {
   display: block;
   margin: 0 auto;
}

@media (min-width: 2560px) {
   .file-toast { font-size: 17px; max-width: min(520px, calc(100vw - 40px)); }
   .share-ask { width: min(440px, calc(100vw - 40px)); }
   .share-ask__text { font-size: 18px; }
   .share-ask__actions button { height: 42px; font-size: 17px; }
}

/* ================= Выпадающие списки ================= */
/* Раскрытый <select> рисует операционная система – чужим шрифтом и с синей
   подсветкой. Список показываем свой (app/js/select-menu.js), в оформлении
   меню действий: закрытый селект при этом остаётся нативным и не меняется */
.select-menu {
   position: fixed;
   z-index: 1200;

   display: flex;
   flex-direction: column;
   overflow-y: auto;
   overscroll-behavior: contain;

   padding: 6px;

   background-color: #4A4A4A;
   border: 1px solid rgba(229, 111, 37, .35);
   border-radius: 12px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
}

.select-menu[hidden] {
   display: none;
}

.select-menu__item {
   flex: none;
   padding: 9px 14px;

   font-family: 'Raleway Medium', sans-serif;
   font-size: 14px;
   line-height: 1.25;
   color: #E4E4E4;
   text-align: left;

   background: none;
   border: none;
   border-radius: 8px;
   cursor: pointer;
}

/* Выбранный сейчас пункт – цветом, без галочки: она сдвигала бы текст */
.select-menu__item--current {
   color: #E56F25;
}

.select-menu__item--off {
   color: #9A9A9A;
   cursor: default;
}

/* Подсветка пункта под курсором и под стрелками клавиатуры – одна и та же */
.select-menu__item--active {
   background-color: #E56F25;
   color: #FFFFFF;
}

@media (any-hover: hover) {
   .select-menu__item:hover {
      background-color: #E56F25;
      color: #FFFFFF;
   }

   .select-menu__item--off:hover {
      background-color: transparent;
      color: #9A9A9A;
   }
}

/* Открытый селект подсвечиваем – видно, чей это список */
select.select--open {
   border-color: #E56F25;
}

/* Пальцем: пункты крупнее, чтобы попадать не глядя */
@media (hover: none) {
   .select-menu__item {
      padding: 12px 16px;
      font-size: 15px;
   }
}

@media (min-width: 2560px) {
   .select-menu__item {
      padding: 11px 18px;
      font-size: 17px;
   }
}