/* Общий слой siberia-ai.ru: шкала шрифтов, контраст, касания, фокус, мобильное меню.
   Подключается последним на всех страницах, поверх собственных стилей страницы
   (на сайте пять разных наборов стилей, у каждой группы страниц свой).
   Решение владельца 28.09.2026: сначала общие настройки на весь сайт, потом страницы.

   Замер до правки (seo/dostupnost-2026-09-28): от 6 до 13 размеров шрифта на странице
   (12; 12,5; 13; 13,5; 14; 14,5; 15; 15,5; 16; 17; 19; 20; 26; 32; 44 px), основной текст
   главной на телефоне 15 px, контраст ниже нормы на всех 15 шаблонах, ссылки меню
   высотой 22 px, на страницах разделов меню на телефоне скрыто вовсе.

   Шкала после правки, шесть размеров: 14, 16, 18, 20, 28 и заголовок страницы
   34 px на телефоне и 44 px на широком экране.
   Селекторы повторяют селекторы наборов стилей один в один: тогда равная
   специфичность и более позднее подключение решают спор в пользу этого слоя,
   без !important. */

/* 1. Шкала шрифтов */
body{font-size:16px;line-height:1.6}

p,li,dd,dt,td,table,.card p,.kv,.plain li,.finding p,.err,.fajl,.form .golosa,
.zapis-ryad .golosa,.spisok-fajlov li,.spisok-fajlov .melkaya,.instrument td,
.instrument textarea,.itog-koda,.proverka-zapisi table,
.zapis-ryad input[type=text],.zapis-ryad input[type=number],
.zapis-ryad select,.instrument select,.form input,.form button,
.poisk input[type=search],#probe-url,#tablo,.probe-body p,.probe-list,.obrazec,
ul.gruppa-spisok>li>a,.btn,.hint,.probe .hint,.meta,.pojasnenie,.ot,.tablica table,
.brand,.foot .foot-co{font-size:16px}

small,.small,footer .small,.eyebrow,.badge,.badge span,.tag,.status,.lvl,.filename,
.card .n,.card h3 .ver,.code-label,.code,pre,.kroshki,.note,.foot-sk p,footer,footer p,
.foot-nav a,header nav,header nav a,th,.tablica thead th,.shema figcaption,
.finding .code,.polosa-grupp a,.polosa-grupp b,h2.gruppa .skolko,.probe-list b,
.instrument td.muted{font-size:14px}

.tagline,.lead,.lid,summary,.finding h4,.probe-body h4{font-size:18px}

h3,.vopros summary h3,.probe .probe-title,h2.gruppa,summary::after{font-size:20px}
.tablica caption{font-size:16px;font-weight:600}

h2{font-size:28px}
/* Крупные цифры набора главной (<b>33</b><span>...</span>) - 28 px. В плашке
   документации «версия <b>1.2.14</b>» значение единственное в плашке и остается
   размером плашки: первая редакция слоя раздувала его до 28 px (рецензия 28.09). */
.ring b,.badge b:not(:only-child){font-size:28px}
/* Цифры сплошным цветом: градиент на сайте оставлен за обещанием в заголовке
   и главной кнопкой, а на всем подряд он читается шаблоном (Brand Guardian). */
.badge b:not(:only-child){background:none;color:var(--fg)}

h1{font-size:34px;line-height:1.15}
@media (min-width:768px){ h1{font-size:44px} }
/* Одно начертание заголовков на всех наборах: у главной было 800 и 750, у прочих
   700 и 650, и при равных размерах это читалось ошибкой, а не иерархией. */
h1,h2{font-weight:700}
/* Обещание в заголовке главной держится одним куском и не рвется посередине дуги. */
h1 .grad-text{display:inline-block}

/* 2. Контраст светлой темы. Цвета градиента (--a1, --a2, --a3) не трогаются:
   градиент на главной оставлен решением владельца 28.09. Меняются цвета текста:
   синий ссылок 4,42 -> 5,49 на фоне страницы, бирюзовый меток 3,07 -> 5,22 на белом. */
@media (prefers-color-scheme: light){
  :root{--accent:#1F63BE;--ok:#0A7A6E;--warn:#8A5F12;--muted-2:#546A7B;--sev-high:#9C4E12}
}
/* Темная тема: мелкий текст в подвале главной (#6B7F92 на #0E1720) давал 4,36 к 1. */
@media (prefers-color-scheme: dark){
  :root{--muted-2:#8196A9}
}

/* Кнопки с фоном акцентного цвета. В темной теме акцент светло-синий #4E9CF5,
   и белая надпись на нем давала 2,83 к 1 (кнопки «Обрезать», «Извлечь звук» и
   другие). Темная надпись дает 6,66. В светлой теме надпись остается белой. */
.zapis-ryad button[id$="-knopka"],.zapis-ryad button.glavnaya,.form button,.btn-primary{color:#04121E}
@media (prefers-color-scheme: light){
  .zapis-ryad button[id$="-knopka"],.zapis-ryad button.glavnaya,.form button,.btn-primary{color:#fff}
}

/* 3. Ссылка в тексте отличается не только цветом: подчеркивание. */
p a:not(.btn),main li a:not(.btn),main td a,main dd a,.card p a,.note a,
.kv a{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}

/* 3а. Комментарий в блоке кода: фон блока темный в обеих темах, а цвет комментария
   брался из приглушенного текста светлой темы и давал 3,09 к 1. */
.code .c,pre .c,.term .c{color:#8FA3B5}

/* 3б. Длинная строка в блоке кода переносится, а не прокручивается вбок: прокрутку
   без фокуса нельзя пройти с клавиатуры, а контрольные суммы и команды читаются
   и с переносом. */
pre,.term{white-space:pre-wrap;overflow-wrap:anywhere}

/* 4. Цель касания не меньше 48 px (web.dev, accessible tap targets).
   Ссылки внутри предложений исключены, как и в WCAG 2.2 (2.5.8). */
header nav a,.foot-nav a,.kroshki a,.polosa-grupp a,.brand{display:inline-flex;align-items:center;min-height:48px}
/* Короткое слово в меню («Цены») было 36 px в ширину: поля по 6 px, а промежуток
   меньше на столько же, чтобы на глаз расстояние между пунктами не изменилось. */
header nav{gap:8px}
header nav a{padding:0 6px}
/* Плитка каталога нажимается целиком: ссылка названия растянута на всю карточку.
   Название цветом текста и без подчеркивания, как решено в s.css («пятьдесят пять
   синих заголовков подряд читаются хуже»); подчеркивание при наведении и фокусе.
   Первая редакция слоя подчеркнула все 55 и добавила зазор (рецензия 28.09). */
ul.gruppa-spisok>li{position:relative}
ul.gruppa-spisok>li>a::after{content:"";position:absolute;inset:0;border-radius:8px}
ul.gruppa-spisok>li>a{text-decoration:none}
ul.gruppa-spisok>li:hover>a,ul.gruppa-spisok>li>a:focus-visible{text-decoration:underline}
.btn,button,select,.fajl,input[type=text],input[type=url],input[type=search],input[type=number],
input[type=email],input[type=tel]{min-height:48px}
.golosa,.form .golosa,.zapis-ryad .golosa{display:inline-flex;align-items:center;min-height:48px}

/* 4а. Подпись и список в одном ряду на узком экране: список не сжимался уже
   своего самого длинного пункта («L, около 7 процентов») и вылезал за карточку
   генератора QR. Видно было на снимке 375 px еще до правки, с 16 px стало заметнее. */
@media (max-width:720px){
  .zapis-ryad .golosa{min-width:0}
  .zapis-ryad .golosa select{min-width:0;max-width:100%}
}

/* 5. Мобильное меню. На страницах разделов и в части корневых меню на телефоне
   было скрыто (header nav{display:none}): пятьдесят шесть инструментов и двадцать две
   страницы расшифровки оставались без меню. Теперь оно под логотипом, в две строки. */
@media (max-width:860px){
  header .wrap{flex-wrap:wrap;gap:0 12px}
  /* -6 px: у пунктов поля по 6 px, без сдвига меню стояло правее логотипа. */
  header nav{display:flex;flex-wrap:wrap;margin-left:-6px;width:calc(100% + 12px);gap:0 8px}
}
@media (min-width:861px){ header nav{margin-right:-6px} }
/* Отметка текущего раздела под самим словом, а не у нижнего края пункта высотой
   48 px: черта висела на 15 px ниже слова и была шире его (рецензия UI Designer). */
header nav a[aria-current="page"]{border-bottom:0;padding-bottom:0;text-decoration:underline;
  text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}

/* Кнопки и поля шрифтом сайта: кнопки форм набирались Arial, потому что кнопка
   не наследует гарнитуру. Одна гарнитура на сайт. */
button,input,select,textarea{font-family:inherit}
@media (max-width:720px){ .form button{width:100%} }

/* Длинное значение в строке кода (контрольная сумма SHA-256) не растягивает
   страницу шире экрана: /docs занимала 520 px на любом телефоне. */
code{overflow-wrap:anywhere}

/* Цены: цена с периодом не разрывается («15 000 ₽ в / месяц»). */
summary h2.v-summary .ot{white-space:nowrap}
/* 5а. Липкая шапка на узком экране не липнет. С меню в две строки она заняла
   четверть экрана 375 на 667 и закрывала поле, которому главная кнопка отдает
   фокус (WCAG 2.2, 2.4.11; рецензия 28.09). На широком экране шапка липкая
   по-прежнему, и переход по якорю останавливается ниже нее. */
@media (max-width:860px),(max-height:500px){
  header{position:static}
}
@media (min-width:861px){
  html{scroll-padding-top:96px}
}

/* 5б. Таблицы на телефоне. Колонка цены, значения паспорта и номера счетов уходили
   за правый край (table{min-width:560px}, первая колонка без переноса), и видно
   было только названия строк. Теперь таблица в ширину экрана, строки переносятся. */
@media (max-width:600px){
  .table-wrap table{min-width:0}
  .table-wrap td:first-child,.table-wrap th:first-child{white-space:normal}
  .table-wrap td{overflow-wrap:anywhere}
}
/* Таблица без обертки (тарифы на странице «Диалога») на узком экране прокручивается
   внутри себя, а не растягивает страницу: 388 px при экране 375. */
@media (max-width:560px){
  main table:not(.table-wrap table):not(.tablica table):not(.scroll table){display:block;overflow-x:auto}
}

/* 6. Фокус с клавиатуры виден всегда. */
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.instrument textarea:focus-visible{outline:3px solid var(--accent);outline-offset:1px}

/* 7. Переход к содержанию для клавиатуры и экранного диктора. */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:1000;padding:0 16px;border-radius:8px;
  display:inline-flex;align-items:center;min-height:48px;
  background:var(--bg-soft,var(--surface,#fff));color:var(--fg);font-size:16px}

/* 8. Таблица в прокрутке получает фокус (tabindex в разметке) и видимую рамку. */
.table-wrap:focus-visible,.tablica:focus-visible,.scroll:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* 9. Пары «название - значение» в политике и проверочном комплекте размечены
   списком определений (dl), как и положено dt/dd; у dl свои поля по умолчанию. */
dl.kv{margin:0 0 14px}

/* 10. Цены: название продукта внутри раскрывающегося блока стало заголовком второго
   уровня (было h1 -> h3 без h2), а выглядеть должно как прежде. */
summary h2.v-summary{display:inline;font-size:inherit;font-weight:inherit;margin:0;line-height:inherit}

/* 10а. Метки уровня в результатах проверки сайта. Замер первой редакции смотрел
   страницу до нажатия кнопки и результатов не видел; рецензент прогнал axe по
   отрисованному результату: белый на пастели в темной теме давал 1,67-2,6 к 1,
   в светлой «СРЕДНЕ» 4,23, размер 11,5 px вне шкалы. Темная надпись на светлых
   метках темной темы, белая на темных метках светлой. */
.sev{font-size:14px;color:#04121E}
@media (prefers-color-scheme: light){
  .sev{color:#fff}
  .sev-MEDIUM{background:#8A5F12}
  .probe-list b{color:#8A5F12}
}

/* 10б. Сияние первого экрана на внутренних страницах: второе пятно (синий акцент
   и #39c0ed вне палитры) обрезалось краем блока прямой линией. Остается общее
   сияние страницы, то же, что на главной. */
.hero::before,.hero::after{display:none}

/* 10в. Кольцо балла заполнялось за секунду: дольше 300 мс и без оглядки на просьбу
   системы не двигать. */
.ring .fg{transition-duration:.2s}

/* 11. Движение по просьбе системы: тем, кто выключил анимацию, ее нет. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms;scroll-behavior:auto}
}

/* 12. Текст только для экранного диктора: объявления о смене состояния, «из 100» у балла. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}