/* Базовая связка сайта поверх Bootstrap: бренд через токены :root (задаются
   layout-ом из ThemeSettings; этап 3 добавит полноценную тему из ЛК). */

/* Платформенные дефолты токенов (доработка платформы для тем, Этап 1, каскад §B): грузится
   ДО файловой темы бизнеса (theme.css) и ДО <style> явного выбора владельца — оба слоя выше
   могут перекрыть эти значения. Раньше эти же значения печатались в <style> БЕЗУСЛОВНО (после
   theme.css), поэтому файловая тема не могла задать даже свой акцент — теперь может, если
   владелец не выбрал ничего явно (см. SiteThemeCss.Build). Значения — прежний дефолт-пресет
   платформы, поэтому у бизнесов без своей темы ничего визуально не меняется. */
:root {
  --site-accent: #2563eb;
  --site-accent-text: #ffffff;
  --site-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --site-heading-font: var(--site-font);
  --bs-border-radius: 12px;
  --bs-border-radius-lg: 12px;
}
body { font-family: var(--site-font); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--site-heading-font); }

a { color: var(--site-link, var(--site-accent)); }
.btn-primary {
  --bs-btn-bg: var(--site-accent);
  --bs-btn-border-color: var(--site-accent);
  --bs-btn-hover-bg: var(--site-accent);
  --bs-btn-hover-border-color: var(--site-accent);
  --bs-btn-active-bg: var(--site-accent);
  --bs-btn-active-border-color: var(--site-accent);
  --bs-btn-color: var(--site-accent-text);
  --bs-btn-hover-color: var(--site-accent-text);
  --bs-btn-active-color: var(--site-accent-text);
  --bs-btn-hover-opacity: .9;
}
.btn-outline-primary {
  --bs-btn-color: var(--site-accent);
  --bs-btn-border-color: var(--site-accent);
  --bs-btn-hover-bg: var(--site-accent);
  --bs-btn-hover-border-color: var(--site-accent);
  --bs-btn-hover-color: var(--site-accent-text);
  --bs-btn-active-bg: var(--site-accent);
  --bs-btn-active-border-color: var(--site-accent);
  --bs-btn-active-color: var(--site-accent-text);
}

/* Текст поверх картинки блока «Баннер-герой». */
.site-hero-text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1rem 1rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .65));
  color: #fff;
  pointer-events: none;
}

/* Richtext-блок без внешних отступов первого/последнего элемента. */
.site-richtext > :first-child { margin-top: 0; }
.site-richtext > :last-child { margin-bottom: 0; }

/* ── Визуальные варианты секций (библиотека секций, этап 1) ───────────────────
   Владелец выбирает «Вариант вида» у блока → рендерер (и сайт, и мини-апп) вешает на ОБЁРТКУ
   секции класс `site-<тип>--<вариант>`. Ниже — базовые примеры платформы; тема перекрывает их
   или объявляет свои варианты в `presets.json → variants` и стилизует своим CSS.
   Вариант не выбран — обёртки нет вовсе, разметка прежняя. */

/* Баннер-герой: текст сбоку, а не поверх картинки (удобно для длинных заголовков). */
@media (min-width: 768px) {
  .site-hero--split > div { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .site-hero--split .site-hero-text {
    position: static;
    padding: 1.25rem;
    background: none;
    color: inherit;
    pointer-events: auto;
  }
}

/* Баннер-герой: затемнение по всей картинке — светлый текст читается на пёстром фото. */
.site-hero--overlay .site-hero-text {
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(0, 0, 0, .45);
  text-align: center;
}

/* Кнопка: во всю ширину колонки (призыв к действию под текстом). */
.site-cta--wide .btn { display: block; width: 100%; }

/* Карта в блоке «Контакты»: место под фрейм занято сразу (высота задана инлайном
   из настройки блока) — страница не прыгает, когда карта догрузится. */
.site-contacts-map {
  overflow: hidden;
  border-radius: var(--bs-border-radius, .375rem);
  background: var(--bs-secondary-bg, #e9ecef);
}

.site-contacts-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Ряд кнопок маршрута: переносится на узких экранах, а не режется. */
.site-contacts-routes {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* ── Общий «конверт» блока (Этап 2 доработки под темы) ─────────────────────────
   layout.fullWidth — секция выходит из .container во всю ширину экрана (full-bleed):
   стандартный приём с отрицательными полями до края вьюпорта, без ломки скролла ни на
   каком контейнере-предке (margin считается от вьюпорта, не от родителя). */
.site-block--full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* layout.padTop/padBottom — отступы секции ступенями (владелец не оперирует пикселями). */
.site-pt-sm { padding-top: 1rem; }
.site-pt-md { padding-top: 2.5rem; }
.site-pt-lg { padding-top: 5rem; }
.site-pb-sm { padding-bottom: 1rem; }
.site-pb-md { padding-bottom: 2.5rem; }
.site-pb-lg { padding-bottom: 5rem; }

/* ── Конверт блока v2: высота секции, фон-картинка, появление (Этап 3) ─────────
   layout.minHeight — ступени высоты («авто» класса не даёт). Считаются от высоты окна
   посетителя; содержимое встаёт по центру — иначе на полноэкранной секции текст прилипал
   бы к верхнему краю. Колонка, а не строка: у секции один потомок-блок, и в колонке он
   растягивается по ширине сам (align-items: stretch по умолчанию). */
.site-h-half,
.site-h-full {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.site-h-half { min-height: 50vh; }
.site-h-full { min-height: 100vh; }

/* layout.bg.parallax — фон отстаёт от страницы при прокрутке. Чистый CSS: своего кода
   прокрутки не заводим (он даёт рваную прокрутку на слабых машинах). На телефонах эффект
   выключаем — там background-attachment: fixed либо не работает вовсе, либо стоит дорого. */
.site-bg--fixed { background-attachment: fixed; }
@media (max-width: 767.98px) {
  .site-bg--fixed { background-attachment: scroll; }
}

/* layout.reveal — появление секции при прокрутке. Прячет секцию НЕ этот файл сам по себе:
   класс site-anim вешает на <html> крошечный скрипт в <head> (см. _SiteLayout.cshtml), и
   только если браузер умеет IntersectionObserver. Без JS и на старом браузере класса нет —
   секции видны сразу, как и раньше. Показывает секцию site.js (класс site-reveal--in). */
.site-anim [data-site-reveal]:not(.site-reveal--in) { opacity: 0; }
.site-anim [data-site-reveal="up"]:not(.site-reveal--in) { transform: translateY(24px); }
.site-anim [data-site-reveal="zoom"]:not(.site-reveal--in) { transform: scale(.96); }
.site-anim [data-site-reveal] {
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.site-reveal--in { opacity: 1; transform: none; }

/* «Уменьшить движение» в системе посетителя отключает появление и параллакс ЖЁСТКО —
   независимо от настроек блока и мастер-тумблера сайта (решение при нарезке таска 109). */
@media (prefers-reduced-motion: reduce) {
  .site-anim [data-site-reveal],
  .site-anim [data-site-reveal]:not(.site-reveal--in) {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .site-bg--fixed { background-attachment: scroll; }
}

/* ── Витрина товаров и галерея ─────────────────────────────────────────────────
   Размеры карточек переехали из инлайн-стилей в классы: значения те же, что были
   зашиты в разметку, но тема перекрывает их своим CSS, не трогая код флота.
   Крючки .site-products / .site-product-card / .site-gallery / .site-gallery-item
   дают теме зацепку на весь блок и на отдельную карточку. */
.site-product-slide { min-width: 210px; }

/* Пропорции фото товара — ступенями (BlockTypes.CoverRatios), как у обложки ленты ниже.
   «landscape» = прежние зашитые 150px (блоки без поля и разметка темы без ступени выглядят
   как раньше), «square»/«portrait» тянутся по ширине карточки — в раскладке «в одну колонку»
   фиксированная высота резала фото. Потолок высоты — 60% экрана: в одну колонку карточка
   тянется во всю ширину контента, и чистая пропорция дала бы на десктопе фото выше экрана
   (товар занял бы весь первый экран). На узких экранах потолок не срабатывает, форма точная.
   Побочный эффект: на широком экране «квадрат» упирается в потолок и выглядит полосой —
   лечится не потолком, а ограничением ШИРИНЫ фото в раскладке «в одну колонку». */
.site-product-photo { height: 150px; }
.site-product-photo--landscape { height: 150px; }
.site-product-photo--square { height: auto; aspect-ratio: 1 / 1; max-height: 60vh; }
.site-product-photo--portrait { height: auto; aspect-ratio: 3 / 4; max-height: 60vh; }

/* Карточка товара — ссылка целиком: цвет текста наследуется, подчёркивания нет
   (классы Bootstrap в разметке), при наведении карточка чуть подсвечивается, а название
   подчёркивается — иначе кликабельность карточки ничем не выдаёт себя. Своего кольца
   фокуса здесь больше нет: см. блок «Фокус и наведение» ниже. */
.site-product-card { transition: box-shadow .15s ease-in-out; }
.site-product-card:hover { box-shadow: var(--bs-box-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075)); }
.site-product-card:hover .site-product-name { text-decoration: underline; }

.site-gallery-slide { min-width: 220px; }

/* Кнопки листания карусели галереи. Полоса листается мышью, пальцем и стрелками с клавиатуры,
   но кольцо фокуса на сайте снято (решение владельца), и о стрелках догадаться было нельзя —
   кнопки называют возможность прямо. Рисует их скрипт (в разметке они hidden): без JS листать
   ими нечем, а прокрутка полосы работает и так. Цвета — токены Bootstrap, тема подхватится сама. */
.site-gallery-carousel { position: relative; }
.site-gallery-nav {
  /* top ставит скрипт — по центру КАРТИНКИ: в высоту полосы входят подписи, и от
     «50% блока» кнопка съезжала вниз тем сильнее, чем длиннее подпись. */
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: flex; align-items: center; justify-content: center;
  /* 40px и на телефоне: палец по 32px промахивается, а свайп остаётся основным способом. */
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  background: var(--bs-body-bg); color: var(--bs-body-color); opacity: .95;
  /* Рамка — чтобы светлый круг не пропал на светлом фото (снег, витрина, белый фон). */
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .25);
  cursor: pointer;
}
.site-gallery-nav:hover { opacity: 1; }
/* Край полосы: кнопка гаснет, но остаётся фокусируемой (не disabled) — иначе на последнем
   нажатии браузер сбрасывал бы фокус на body и место в странице терялось. */
.site-gallery-nav[aria-disabled="true"] { opacity: .35; cursor: default; box-shadow: none; }
.site-gallery-nav--prev { left: .25rem; }
.site-gallery-nav--next { right: .25rem; }
/* Явно, не полагаясь на [hidden] из Bootstrap Reboot: своя тема может прийти без него,
   и до загрузки скрипта кнопки вылезли бы поверх фото. */
.site-gallery-nav[hidden] { display: none; }

/* ── Список файлов: строка документа и сведения об электронной подписи ─────────
   План 2026-08-03-svedeniya-ob-elektronnoj-podpisi.md, макет 2026-08-03. Цвета —
   токены Bootstrap и акцент сайта (--site-accent): значок и карточку оформляет тема.

   Главное ограничение разметки: у свёрнутого <details> скрыто ВСЁ, кроме <summary>
   (в новом Chromium это отдельный бокс ::details-content), и раскладка flex/grid
   с order внутри него не работает. Поэтому <details> оборачивает только значок
   и карточку, имя файла и вес живут в строке рядом, а значок ставится на своё место
   позиционированием — место под него держит padding-right строки. */
.site-gallery-files { container-type: inline-size; }
.site-gallery-file {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; column-gap: .75rem;
}
.site-gallery-file-name { min-width: 0; display: flex; align-items: center; min-height: 40px; }
.site-gallery-file-size { grid-column: 2; }
/* Сам <details> — обычная ячейка строки во всю ширину: свёрнутый он ничего не занимает
   (значок выведен из потока), раскрытый — кладёт карточку под именем файла. */
.site-gallery-file-sig { grid-column: 1 / -1; }
/* Запас под значок: он выведен из потока и без запаса налез бы на вес файла. */
.site-gallery-file--signed { padding-right: 10rem; }
.site-sig-badge, .site-gallery-file-signature { position: absolute; top: .5rem; right: 1rem; }
.site-gallery-file-signature {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 .5rem;
  color: var(--site-link, var(--site-accent));
}
.site-sig-card { padding-top: .5rem; display: grid; gap: .75rem; }
/* Узкая строка (телефон, колонка сайта): значок переезжает под имя — иначе на 10rem
   запаса имя документа сминается в три строки. Запрос по ширине СПИСКА, а не экрана:
   строка бывает узкой и на широком мониторе (блок в колонке). Порог в em, а не в пикселях:
   в режиме для слабовидящих кегль растёт вдвое, и запас под значок растёт вместе с ним. */
@container (max-width: 27em) {
  .site-gallery-file--signed { padding-right: var(--bs-list-group-item-padding-x, 1rem); }
  /* relative, а не static: элемент возвращается в поток, но подсказка по-прежнему
     считает координаты от значка, а не от всей строки. */
  .site-sig-badge, .site-gallery-file-signature {
    position: relative; top: auto; right: auto;
    margin-top: .375rem; grid-column: 1 / -1; justify-self: start;
  }
}

/* Значок подписи — кнопка (<summary>), а не картинка: работает с клавиатуры, читалка
   произносит «показать сведения об электронной подписи документа „…“». Цвет один и тот же
   независимо от происхождения сведений: разница сказана словами в карточке, а на цвет
   полагаться нельзя — часть посетителей его не различает. */
.site-sig-badge {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .375rem;
  min-height: 40px; padding: 0 .7rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--site-accent) 35%, transparent);
  background: color-mix(in srgb, var(--site-accent) 8%, transparent);
  color: var(--site-accent); font-size: .8125rem; font-weight: 600;
}
.site-sig-badge::-webkit-details-marker { display: none; }
.site-sig-badge:hover { background: color-mix(in srgb, var(--site-accent) 16%, transparent); }
.site-sig-badge-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.site-sig-badge-caret { width: 12px; height: 12px; opacity: .7; transition: transform .15s ease-in-out; }
[open] > .site-sig-badge .site-sig-badge-caret { transform: rotate(180deg); }

/* Подсказка по наведению курсора — требование норматива. Висит ПОД значком и прижата
   к правому краю: значок стоит у правой кромки строки, а первая строка списка — у верхней,
   и подсказка сверху обрезалась бы. Только мышь и только точный указатель. */
/* Рамка цветом фона: в обычном виде её не видно, а в режиме для слабовидящих (там фон
   у всего гасится, а рамки красятся цветом схемы) она обводит подсказку — иначе тёмный
   слой поверх списка стал бы прозрачным и лёг текстом на текст. */
.site-sig-tip {
  position: absolute; right: 0; top: calc(100% + .5rem);
  width: min(266px, 72vw); padding: .625rem .75rem; border-radius: var(--bs-border-radius, 12px);
  background: #0f172a; border: 1px solid #0f172a; color: #e2e8f0; text-align: left;
  font-size: .75rem; font-weight: 400; line-height: 1.45;
  box-shadow: 0 8px 22px rgba(2, 6, 23, .34);
  opacity: 0; visibility: hidden; z-index: 20; transition: opacity .16s, visibility .16s;
}
.site-sig-tip b { color: #fff; font-weight: 600; }
.site-sig-tip-signer { display: block; margin-top: .25rem; }
.site-sig-tip-signer + .site-sig-tip-signer { border-top: 1px solid #334155; padding-top: .25rem; }
.site-sig-tip-line { display: block; }
.site-sig-tip-key { color: #94a3b8; }
.site-sig-tip-more { display: block; margin-top: .375rem; color: #93c5fd; }
@media (hover: hover) and (pointer: fine) {
  .site-sig-badge:hover .site-sig-tip, .site-sig-badge:focus-visible .site-sig-tip {
    opacity: 1; visibility: visible;
  }
  /* Карточка раскрыта — подсказка не нужна и только закрывает штамп. */
  [open] > .site-sig-badge:hover .site-sig-tip,
  [open] > .site-sig-badge:focus-visible .site-sig-tip { opacity: 0; visibility: hidden; }
}

/* Штамп подписи. Полоска слева — единственное отличие «прочитано» от «ввёл владелец»
   по цвету; сама разница сказана текстом в оговорке. */
.site-sig-stamp {
  border: 1px solid var(--bs-border-color); border-left: 3px solid var(--site-accent);
  border-radius: var(--bs-border-radius, 12px); padding: .75rem .875rem;
  display: grid; gap: .625rem; font-weight: 400;
}
.site-sig-stamp--manual { border-left-color: #b45309; }
.site-sig-stamp-title {
  display: flex; align-items: flex-start; gap: .5rem;
  font-weight: 600; font-size: .875rem; line-height: 1.35;
}
.site-sig-stamp-title svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 1px; color: var(--site-accent); }
.site-sig-stamp--manual .site-sig-stamp-title svg { color: #b45309; }
.site-sig-stamp-grid {
  display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: .25rem .875rem;
  margin: 0; font-size: .8125rem;
}
.site-sig-stamp-grid dt { font-weight: 400; color: var(--bs-secondary-color); }
.site-sig-stamp-grid dd { margin: 0; }
.site-sig-stamp-serial { font-family: var(--bs-font-monospace); letter-spacing: .02em; }
@media (max-width: 560px) {
  .site-sig-stamp-grid { grid-template-columns: 1fr; gap: 0; }
  .site-sig-stamp-grid dt { margin-top: .4375rem; }
}
.site-sig-stamp-note {
  margin: 0; padding-top: .5rem; border-top: 1px dashed var(--bs-border-color);
  font-size: .78125rem; color: var(--bs-secondary-color);
}
.site-sig-download { justify-self: start; display: inline-flex; align-items: center; gap: .375rem; }
.site-sig-download svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* Школы печатают страницу с документами: свёрнутые карточки на бумаге раскрываем.
   Два способа — старые движки прячут детей <details>, новый Chromium — отдельный
   бокс ::details-content (неизвестный движку селектор просто отбрасывается). */
@media print {
  .site-gallery-file-sig > * { display: revert !important; }
  .site-gallery-file-sig::details-content { content-visibility: visible !important; }
  .site-sig-tip { display: none; }
}

/* Пропорции обложки ленты публикаций (этап 4) — ступени вместо пикселей (BlockTypes.CoverRatios).
   «landscape» = прежние зашитые 160px (обратная совместимость с блоками до этого поля). */
.site-pubfeed-cover { width: 100%; object-fit: cover; }
.site-pubfeed-cover--landscape { height: 160px; }
.site-pubfeed-cover--square { aspect-ratio: 1 / 1; }
.site-pubfeed-cover--portrait { aspect-ratio: 3 / 4; }

/* Поиск по сайту (блок siteSearch, план 2026-07-31-poisk-po-sajtu.md): значок в шапке →
   дропдаун на десктопе, полноэкранный оверлей на мобильном (брейкпоинт md — как у Bootstrap
   d-md-flex зоны site-header-aside, куда блок обычно вставляется). Цвета — токены Bootstrap
   (var(--bs-*)), тема сайта подхватывается сама, своих цветов не заводим. */
.site-search { display: inline-flex; }
.site-search__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent;
  color: inherit; cursor: pointer; flex: 0 0 auto;
}
.site-search__toggle:hover { background: var(--bs-tertiary-bg); }
/* position:fixed, а не absolute от .site-search — зона site-header-aside (ms-auto) не всегда
   реально прижата к правому краю (зависит от того, есть ли контент в navbar-collapse рядом:
   у него flex-grow, и при пустом меню ms-auto соседнего блока может не выбрать свободное
   место). Верхний/левый угол панели считает JS (getBoundingClientRect значка) и клампит
   в границы окна — так дропдаун не уезжает за край экрана независимо от места вставки блока. */
.site-search__panel {
  display: none; position: fixed; top: 0; left: 0;
  width: 340px; max-width: calc(100vw - 32px);
  background: var(--bs-body-bg); color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color); border-radius: .5rem;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .15); z-index: 1040; padding: .5rem;
}
.site-search__panel.is-open { display: block; }
.site-search__field { display: flex; align-items: center; gap: .5rem; padding: .375rem .5rem; }
.site-search__field svg { flex: 0 0 auto; color: var(--bs-secondary-color); }
.site-search__input { border: none; outline: none; background: transparent; flex: 1; font: inherit; color: inherit; min-width: 0; }
.site-search__cancel { display: none; flex: 0 0 auto; border: none; background: none; color: var(--bs-primary); font-weight: 600; font-size: .875rem; cursor: pointer; }
.site-search__dropdown { max-height: 70vh; overflow: auto; }
.site-search__state { padding: 1.25rem 1rem; text-align: center; color: var(--bs-secondary-color); font-size: .875rem; }
.site-search__spinner {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--bs-border-color); border-top-color: var(--bs-primary);
  animation: site-search-spin .7s linear infinite; vertical-align: -2px;
}
@media (prefers-reduced-motion: reduce) { .site-search__spinner { animation: none; } }
@keyframes site-search-spin { to { transform: rotate(360deg); } }
.site-search__item { display: block; padding: .5rem .75rem; border-radius: .375rem; color: inherit; text-decoration: none; }
.site-search__item:hover, .site-search__item:focus-visible { background: var(--bs-tertiary-bg); }
.site-search__item-title { display: block; font-weight: 600; font-size: .9rem; }
.site-search__item-url { display: block; font-size: .72rem; color: var(--bs-primary); }
.site-search__item-snippet { display: block; font-size: .8rem; color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-search__item mark { background: color-mix(in srgb, var(--bs-primary) 25%, transparent); color: inherit; border-radius: 2px; }

@media (max-width: 767.98px) {
  .site-search__panel.is-open {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; width: auto; max-width: none; border-radius: 0; border: none;
    padding: 0; z-index: 1050;
  }
  .site-search__field { padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
  .site-search__cancel { display: inline-block; }
  .site-search__dropdown { flex: 1; max-height: none; padding: .5rem; }
  body.site-search-open { overflow: hidden; }
}

/* Переключение рубрики ленты скриптом (site.js): карточка уходит и приходит плавно,
   а не мигает. Длительность держать в согласии с DURATION в site.js. */
[data-site-categories],
[data-site-props] { transition: opacity .3s ease, transform .3s ease; }
.site-feed-item--hiding { opacity: 0; transform: scale(.96); }
/* !important — против утилит Bootstrap: строка файла в галерее несёт `d-flex`
   (`display: flex !important`), и без него скрытый элемент оставался бы на виду. */
.site-feed-item--hidden { display: none !important; }

/* Представление «Список»: у Bootstrap рамка и скругления группы держатся на структурных
   правилах (`.list-group-item + .list-group-item` убирает верхнюю границу, радиусы — на
   :first-child/:last-child), а скрытые строки они считают наравне с видимыми — после
   фильтра список обрезался бы сверху. Скрипт помечает первую и последнюю ВИДИМУЮ строку,
   здесь возвращаем им рамку. Строка во всю ширину при этом не схлопывается к центру —
   только гаснет. */
.list-group > .site-feed-item--first {
  border-top-width: var(--bs-list-group-border-width, 1px);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.list-group > .site-feed-item--last {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.list-group > .site-feed-item--hiding { transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-site-categories],
  [data-site-props] { transition: none; }
}

/* ── Фокус и наведение: голубого нет ───────────────────────────────────────────
   Кольцо фокуса от МЫШИ на публичном сайте снято ЦЕЛИКОМ — прямое решение владельца
   от 2026-07-31. Голубое приходило из дефолтов Bootstrap (--bs-focus-ring-color, #86b7fe
   у границы поля, #0d6efd у галочки) и с акцентом бизнеса связано не было — теперь всё,
   что осталось цветным, берёт --site-accent.
   Кольцо при обходе С КЛАВИАТУРЫ владелец вернул позже — макет версии для слабовидящих
   от 2026-08-04, раздел 5: «Обычный вид сайта тоже получает этот обвод… ставим его на весь
   сайт разом». Обвод рисуется цветом текста самого элемента, поэтому виден на любой теме
   и в любой цветовой схеме режима. Мышью его не увидеть — :focus-visible браузер зажигает
   только при работе с клавиатуры. Поменять это может только владелец. */
:focus { outline: 0; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

:root {
  /* Если компонент всё-таки нарисует кольцо по своим правилам — оно будет не синим. */
  --bs-focus-ring-width: 0;
  --bs-focus-ring-color: color-mix(in srgb, var(--site-accent) 25%, transparent);
}

/* Кольцо у компонентов Bootstrap приходит через их собственные переменные — гасим в них,
   а не перечислением состояний (.btn.active:focus-visible, .btn:active:focus-visible, …). */
.btn { --bs-btn-focus-box-shadow: none; }
.pagination { --bs-pagination-focus-box-shadow: none; }
.accordion { --bs-accordion-btn-focus-box-shadow: none; }
.btn-close { --bs-btn-close-focus-shadow: none; }
.navbar { --bs-navbar-toggler-focus-width: 0; }

/* Здесь Bootstrap зашивает голубое прямо в правило — гасим правилом
   (site.css грузится после bootstrap.min.css, специфичность та же). */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.nav-link:focus,
.nav-link:focus-visible { box-shadow: none; }

/* Граница поля при вводе — акцентом бизнеса вместо голубой (#86b7fe у Bootstrap). */
.form-control:focus,
.form-select:focus,
.form-check-input:focus { border-color: var(--site-accent); }

/* Поставленная галочка (согласие в лид-форме) — тоже акцентом, а не дефолтным синим. */
.form-check-input:checked {
  background-color: var(--site-accent);
  border-color: var(--site-accent);
}

/* ── Таблица сведений (блок svedenTable, приказ Рособрнадзора № 1493) ──────────
   Двухколоночная таблица «поле — значение» на узком экране встаёт в столбик:
   подпись сверху, значение снизу. Приём чисто визуальный — теги и атрибуты
   микроразметки остаются на месте, робот видит ту же разметку. Роли (role="table",
   "row", "rowheader", "cell") проставлены в шаблоне явно: без них display:block
   отобрал бы у таблицы табличную семантику, и диктор перестал бы связывать
   подпись со значением. Слово «отсутствует» НЕ приглушаем — это значение,
   а не заглушка, и контраст должен остаться по ГОСТ Р 52872-2019. */
.sveden-table th[scope="row"] { width: 38%; font-weight: 600; }
.sveden-table--pairs > tbody > tr > * { vertical-align: top; }

/* Штамп подписи у документа таблицы (таск 161). Разметка и классы — общие со списком
   документов галереи: один и тот же документ обязан выглядеть одинаково, каким бы блоком
   его ни выложили. Отличие ровно одно — МЕСТО значка. В строке списка он выведен из потока
   и стоит у правой кромки; в ячейке таблицы места справа нет, поэтому значок возвращается
   в поток и встаёт под названием документа (тот же приём, что у узкого списка на телефоне:
   position:relative, а не static, — подсказка по наведению по-прежнему считает координаты
   от значка). Карточку ограничиваем по ширине: раскрытая, она иначе растянула бы колонку
   на всю длину строки со сведениями сертификата. */
.site-sveden .site-sig-badge,
.site-sveden .site-gallery-file-signature {
  position: relative; top: auto; right: auto; margin-top: .375rem;
}
/* Запасная ссылка «Подпись» (файл .sig приложен, а сведений не заполнили) — своей строкой,
   как и значок: обе разновидности отметки о подписи обязаны стоять в одном месте, иначе
   в подразделе, где часть документов со сведениями, а часть без, отметка прыгает от строки
   к строке. Значку строка достаётся сама — он лежит в блочном <details>, и трогать
   его display у <summary> ради этого не нужно. */
.site-sveden .site-gallery-file-signature { display: flex; width: fit-content; }
.site-sveden .site-sig-card { max-width: 32rem; }

/* Подсказки по наведению в таблице нет. Она выведена из потока и висит ниже и левее значка,
   а таблица лежит в .table-responsive (overflow-x: auto) — по спецификации это скролл-контейнер
   по ОБЕИМ осям, и он обрежет подсказку у крайней строки и у первой колонки. Хуже того,
   скрытая подсказка держит overflow постоянно (visibility из потока не убирает), и таблица
   получила бы лишнюю полосу прокрутки на пустом месте. Требование норматива закрывает сама
   карточка — она раскрывается нажатием и живёт в потоке ячейки. */
.site-sveden .site-sig-tip { display: none; }

/* Сведения штампа в ячейке — в одну колонку. Ширину ячейки задаёт её содержимое: пара
   «подпись — значение» с колонкой от 120 px и неразрывным программным ключом (моноширинный,
   до сотни знаков) раздвинула бы колонку таблицы на пол-экрана. Вид не новый — так штамп
   уже выглядит на узком экране. */
.site-sveden .site-sig-stamp-grid { grid-template-columns: 1fr; gap: 0; }
.site-sveden .site-sig-stamp-grid dt { margin-top: .4375rem; }
.site-sveden .site-sig-stamp-serial { overflow-wrap: anywhere; }

@media (max-width: 575.98px) {
  .sveden-table--pairs,
  .sveden-table--pairs > tbody,
  .sveden-table--pairs > tbody > tr,
  .sveden-table--pairs > tbody > tr > * { display: block; width: 100%; }

  .sveden-table--pairs > tbody > tr { padding: .25rem 0; }
  .sveden-table--pairs > tbody > tr > th { border-bottom: 0; padding-bottom: .15rem; }
}

/* ══ Версия для слабовидящих (таск 136) ════════════════════════════════════════
   Обязательна образовательным организациям (п. 21 приказа Рособрнадзора № 1493),
   технический ориентир — ГОСТ Р 52872-2019. Включается настройкой сайта: выключена —
   ни кнопки, ни панели в разметке нет, и ни одно правило ниже не срабатывает.
   Режим включает сам посетитель, признаки лежат на <html>: data-a11y="on",
   data-a11y-scheme (wb|bw|blue), data-a11y-scale (100|150|200), data-a11y-spacing
   (normal|wide), data-a11y-images (on|off). Их ставит либо сервер (выбор приехал
   в cookie — разметка сразу правильная, без вспышки обычного сайта), либо site.js,
   когда режим включают прямо на этой странице. */

/* ── Ссылка «Перейти к основному содержимому» ────────────────────────────────
   Первая по обходу на КАЖДОЙ странице сайта, не только в режиме: без неё до текста
   с клавиатуры приходится проходить всё меню. Видима только при получении фокуса. */
.site-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1080;
  padding: .6rem 1rem;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #000);
  border: 2px solid currentColor;
  border-radius: .4rem;
  text-decoration: none;
  font-weight: 600;
}
.site-skip:focus { left: .5rem; top: .5rem; }

/* ── Кнопка вызова ───────────────────────────────────────────────────────────
   На узком экране — отдельная строка во всю ширину (в ряду шапки уже теснятся название
   организации, поиск и «бургер», а имя школы бывает в полстроки). На широком — в конец
   ряда шапки. Цвет — текста, а не акцента бизнеса: у бизнеса с пастельным акцентом
   кнопка иначе оказалась бы самой бледной на странице. */
.site-a11y-launch { width: 100%; margin-top: .5rem; }
@media (min-width: 992px) {
  .site-a11y-launch { width: auto; order: 1; margin: 0 0 0 .75rem; }
}
.site-a11y-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  /* 44 px — минимальная цель нажатия: панелью пользуются те, кому трудно попасть
     по мелкому элементу. */
  min-height: 44px;
  width: 100%;
  padding: .5em .85em;
  border: 1px solid currentColor;
  border-radius: .45em;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
@media (min-width: 992px) {
  .site-a11y-btn { width: auto; white-space: nowrap; }
}
.site-a11y-btn svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

/* ── Панель настроек показа ──────────────────────────────────────────────────
   Часть шапки: при липкой шапке прилипает вместе с ней. */
.site-a11y { border-top: 1px solid var(--bs-border-color, #dee2e6); }
.site-a11y[hidden] { display: none; }
.site-a11y__inner { padding-top: .9rem; padding-bottom: 1rem; }
.site-a11y__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.site-a11y__caption { margin: 0; font-weight: 700; display: flex; align-items: center; gap: .45em; }
.site-a11y__caption svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.site-a11y__hide { margin-left: auto; }
.site-a11y__groups { display: flex; flex-wrap: wrap; gap: .7rem 1.7rem; align-items: flex-start; }
.site-a11y__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.site-a11y__group legend {
  float: none;
  width: auto;
  padding: 0;
  margin-bottom: .45em;
  font-size: .78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.site-a11y__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Переключатель прячем визуально, но не от клавиатуры и не от чтения с экрана:
   обход идёт по нему, обвод фокуса рисуется на подписи. */
.site-a11y__chips input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.site-a11y__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  min-height: 44px;
  min-width: 44px;
  padding: .5em .9em;
  border: 1px solid currentColor;
  border-radius: .45em;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
}
.site-a11y__chip:hover { text-decoration: underline; }
.site-a11y__chips input:focus-visible + .site-a11y__chip { outline: 3px solid currentColor; outline-offset: 3px; }
.site-a11y__a { font-weight: 700; }
.site-a11y__a--sm { font-size: .85em; }
.site-a11y__a--md { font-size: 1.1em; }
.site-a11y__a--lg { font-size: 1.4em; }
.site-a11y__sw { width: 1.1em; height: 1.1em; border-radius: .2em; border: 1px solid currentColor; flex: 0 0 auto; }
.site-a11y__sw--wb { background: #ffffff; }
.site-a11y__sw--bw { background: #000000; }
.site-a11y__sw--blue { background: #9dd1ff; }
.site-a11y__flat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  min-height: 44px;
  padding: .5em .9em;
  border: 1px solid currentColor;
  border-radius: .45em;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.site-a11y__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}
.site-a11y__hint { margin: 0; font-size: .85em; max-width: 62ch; }
.site-a11y__reset { margin-left: auto; }

/* Строка состояния: видима несколько секунд после изменения, дальше остаётся
   в разметке невидимой — чтение с экрана её объявит в любом случае, а постоянной
   полосы, отъедающей строку экрана, у посетителя не будет. */
.site-a11y-status { margin: 0; padding: .45rem 1rem; font-weight: 600; border-bottom: 1px solid var(--bs-border-color, #dee2e6); }
.site-a11y-status:not(.site-a11y-status--shown) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Режим включён: две краски ───────────────────────────────────────────────
   Контраст в схемах (формула WCAG 2.1): чёрным на белом и белым на чёрном — 21:1,
   тёмно-синим на голубом (#063462 на #9DD1FF) — 7,76:1. Порог обычного текста 4,5:1,
   повышенный уровень AAA — 7:1: все три схемы проходят AAA.
   Приглушённый текст, акцент бизнеса, линии и рамки приравниваются к цвету текста —
   контраст не может «поплыть» ни на одном элементе, который рисует платформа. */
html[data-a11y="on"] {
  --site-a11y-fg: #000000;
  --site-a11y-bg: #ffffff;
  --bs-body-bg: var(--site-a11y-bg);
  --bs-body-color: var(--site-a11y-fg);
  --bs-secondary-color: var(--site-a11y-fg);
  --bs-secondary-bg: var(--site-a11y-bg);
  --bs-tertiary-bg: var(--site-a11y-bg);
  --bs-card-bg: var(--site-a11y-bg);
  --bs-border-color: var(--site-a11y-fg);
  --bs-heading-color: var(--site-a11y-fg);
  --bs-emphasis-color: var(--site-a11y-fg);
  --bs-link-color: var(--site-a11y-fg);
  --bs-link-hover-color: var(--site-a11y-fg);
  --site-accent: var(--site-a11y-fg);
  --site-accent-text: var(--site-a11y-bg);
  --site-link: var(--site-a11y-fg);
}
html[data-a11y="on"][data-a11y-scheme="bw"] { --site-a11y-fg: #ffffff; --site-a11y-bg: #000000; }
html[data-a11y="on"][data-a11y-scheme="blue"] { --site-a11y-fg: #063462; --site-a11y-bg: #9dd1ff; }

/* Ступени кегля от размера, выбранного в браузере посетителя: проценты, а не пиксели, —
   тому, кто уже увеличил шрифт в системе, режим прибавляет сверху, а не отменяет.
   Отступы Bootstrap заданы в rem и растут вместе с текстом, поэтому при 200 % страница
   не слипается, а строки переносятся — ничего не обрезается. */
html[data-a11y="on"][data-a11y-scale="150"] { font-size: 150%; }
html[data-a11y="on"][data-a11y-scale="200"] { font-size: 200%; }

html[data-a11y="on"] body {
  background: var(--site-a11y-bg) !important;
  color: var(--site-a11y-fg) !important;
  /* Своя гарнитура темы в режиме не участвует: декоративные шрифты читаются хуже. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
/* Одним правилом на всё содержимое: цвет текста и рамок — цвет схемы, фон прозрачный
   (сквозь него виден фон страницы), картинок-фонов, теней и подсветок нет. Перечислять
   вместо этого токены Bootstrap бессмысленно: у блока может стоять фон инлайн-стилем,
   а у темы — свои цвета в собственном CSS. */
html[data-a11y="on"] body * {
  color: var(--site-a11y-fg) !important;
  border-color: var(--site-a11y-fg) !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
/* Слои ПОВЕРХ содержимого фон обязаны иметь: прозрачными они лягут на текст, и читать
   будет нечего (найдено ревью доступности). Правило выше делает фон прозрачным у всего
   подряд — здесь возвращаем его тем, кто перекрывает страницу или прилипает к её краю. */
html[data-a11y="on"] header,
html[data-a11y="on"] .site-a11y,
html[data-a11y="on"] .site-a11y-status,
html[data-a11y="on"] .site-skip,
html[data-a11y="on"] .dropdown-menu,
html[data-a11y="on"] .site-search__panel,
html[data-a11y="on"] .site-sig-tip,
html[data-a11y="on"] .site-gallery-nav,
html[data-a11y="on"] .modal-content,
html[data-a11y="on"] .offcanvas,
html[data-a11y="on"] #site-cookie-banner { background-color: var(--site-a11y-bg) !important; }

/* Ссылку в тексте цветом уже не отличить — подчёркиваем и утолщаем. */
html[data-a11y="on"] main a,
html[data-a11y="on"] footer a { text-decoration: underline; font-weight: 600; }
/* Поставленная галочка (согласие в лид-форме) заливкой, а не цветом. */
html[data-a11y="on"] .form-check-input:checked { background-color: var(--site-a11y-fg) !important; }
/* Значок «бургера» у Bootstrap — картинка-фон: перекрасить нельзя, зато можно назвать словом. */
html[data-a11y="on"] .navbar-toggler-icon { display: none; }
html[data-a11y="on"] .navbar-toggler::after { content: "Меню"; font-weight: 700; }
/* Логотип-картинку не показываем: чужой PNG не перекрасить, тёмное лого на схеме
   «белым на чёрном» просто исчезнет. Название организации рядом остаётся текстом. */
html[data-a11y="on"] .navbar-brand img { display: none; }
/* «Войти» — только из обычного вида (раздел 4 макета). */
html[data-a11y="on"] .site-login { display: none; }
/* Текст поверх картинки в режиме встаёт под неё: читать поверх фотографии нельзя
   ни в одной схеме. */
html[data-a11y="on"] .site-hero-text { position: static; padding: .75em 0; background: none; pointer-events: auto; }
/* Плашка cookie остаётся (это правовое требование), но в потоке страницы: прижатая
   к низу экрана, при 200 % она закрыла бы содержимое. */
html[data-a11y="on"] #site-cookie-banner { position: static !important; }
/* Пока панель открыта, шапка не липкая: на телефоне при 200 % липкая шапка с открытой
   панелью заняла бы весь экран и содержимого не осталось бы. */
html[data-a11y-panel="open"] header.sticky-top { position: static !important; }

/* Кнопка вызова залита, когда режим ВКЛЮЧЁН (а не «панель открыта»): свернув панель,
   посетитель по кнопке видит, что режим продолжает работать. Выбранная пилюля залита так же.
   Цвет фона задаём и самому элементу, И всему, что внутри: подпись и значок лежат
   в отдельных <span>, и правило «весь текст цветом схемы» выше покрасило бы их в цвет
   заливки — кнопка стала бы чёрным прямоугольником без надписи (найдено живой проверкой). */
html[data-a11y="on"] .site-a11y-btn,
html[data-a11y="on"] .site-a11y-btn *,
html[data-a11y="on"] .site-a11y__chips input:checked + .site-a11y__chip,
html[data-a11y="on"] .site-a11y__chips input:checked + .site-a11y__chip * {
  color: var(--site-a11y-bg) !important;
}
html[data-a11y="on"] .site-a11y-btn,
html[data-a11y="on"] .site-a11y__chips input:checked + .site-a11y__chip {
  background-color: var(--site-a11y-fg) !important;
  font-weight: 700;
  border-width: 2px;
}
/* Образцы цвета в панели — единственное место, где краски не две: иначе выбирать не из чего.
   Селектор длиннее правил заливки: в ВЫБРАННОЙ пилюле образец тоже должен остаться собой. */
html[data-a11y="on"] .site-a11y__chips .site-a11y__sw--wb,
html[data-a11y="on"] .site-a11y__chips input:checked + .site-a11y__chip .site-a11y__sw--wb { background-color: #ffffff !important; }
html[data-a11y="on"] .site-a11y__chips .site-a11y__sw--bw,
html[data-a11y="on"] .site-a11y__chips input:checked + .site-a11y__chip .site-a11y__sw--bw { background-color: #000000 !important; }
html[data-a11y="on"] .site-a11y__chips .site-a11y__sw--blue,
html[data-a11y="on"] .site-a11y__chips input:checked + .site-a11y__chip .site-a11y__sw--blue { background-color: #9dd1ff !important; }
/* Границы в режиме толще: тонкая линия на крупном тексте теряется. */
html[data-a11y="on"] .site-a11y,
html[data-a11y="on"] .site-a11y__foot,
html[data-a11y="on"] header,
html[data-a11y="on"] footer { border-width: 2px !important; }

/* Увеличенный интервал — три величины сразу (ГОСТ Р 52872-2019 опирается на WCAG 1.4.12):
   между буквами 0,12 кегля, между словами 0,16, между строками 1,8 и двойной отступ
   между абзацами. Менять только межбуквенный смысла мало — читают абзац целиком. */
html[data-a11y="on"][data-a11y-spacing="wide"] body {
  letter-spacing: .12em;
  word-spacing: .16em;
  line-height: 1.8;
}
html[data-a11y="on"][data-a11y-spacing="wide"] p,
html[data-a11y="on"][data-a11y-spacing="wide"] li { margin-bottom: 2em; }

/* Изображения скрыты: вместо осмысленной картинки — её описание (site.js подставляет
   текст alt, а если его не заполнили — честную надпись), декоративная исчезает совсем.
   Значки интерфейса (svg) остаются: они рисуются цветом текста и читаются в любой схеме. */
html[data-a11y-images="off"] img,
html[data-a11y-images="off"] iframe,
html[data-a11y-images="off"] video { display: none !important; }
.site-a11y-alt {
  display: block;
  max-width: 40em;
  margin: 0 0 1em;
  padding: .7em .9em;
  border: 2px dashed currentColor;
  border-radius: .4em;
}

/* Движение в режиме не нужно вовсе: появление секций мешает читать. */
html[data-a11y="on"] [data-site-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }