/* =============================================================================
   /assets/a11y.css — версия для слабовидящих (п. 2.4 ТЗ).
   Подфаза 0c. Подключается последним из CSS на всех страницах сайта.

   КОНТРАКТ (задан подфазой 0a, templates/base.html — не менять):
     localStorage['vo_a11y'] = {"scheme":"bw|wb|yb|normal","fs":100|125|150,"img":"on|off"}
     нет ключа        -> обычный режим, этот файл не влияет ни на один пиксель
     есть ключ        -> инлайновый сниппет в <head> ставит на <html> сразу
                         class="lowvision" data-scheme=".." data-fs=".." data-img=".."
     панель настроек  -> id="a11y-panel" (вставляет /assets/a11y.js)
     кнопка           -> a.a11y-toggle (статическая в разметке, 2 шт.: шапка и подвал)

   ПОЧЕМУ ВСЁ НАЧИНАЕТСЯ С html.lowvision:
     селектор «тег + класс» (0-1-0) специфичнее одиночного класса инлайнового CSS
     главной страницы, поэтому в обычном режиме файл выключен целиком и физически
     не может испортить существующий дизайн. Обратная сторона: правила с двумя
     классами в инлайновом CSS (.audience-item .audience-text и т. п.) выигрывают
     у html.lowvision p, поэтому такие места перечислены поимённо ниже.

   ОБОСНОВАНИЕ ЗНАЧЕНИЙ (важно: самих требований п. 2.4 ТЗ в ГОСТ Р 52872-2019 НЕТ,
   проверено сплошным поиском по обеим редакциям; делаем как требование заказчика,
   а числа берём из тех пунктов ГОСТа, которые существуют):
     3.1.12  «визуальная подстройка» — единственное место, легитимирующее панель:
             шрифт, размер, цвет, фон. Все четыре параметра в панели есть.
     3.1.33  формула коэффициента контрастности (L1+0,05)/(L2+0,05) —
             все пары цветов всех схем ниже посчитаны tools/contrast.py.
     3.1.86  «увеличенный текст» — 18 пт ≈ 150 %, поэтому третий шаг размера 150 %.
     1.4.3   4,5:1 обычный текст, 3:1 увеличенный — порог обычной схемы.
     1.4.6   7:1 — порог трёх контрастных схем (фактически 10:1 и выше).
     1.4.4   изменение размера до 200 % — в режиме шапка перестаёт быть fixed,
             .nav переносится, ничего не перекрывается.
     1.4.5   изображения текста — поэтому «отключить изображения» НЕ трогает
             svg и HTML-схемы: иначе кнопка удаляла бы содержательные данные.
     1.4.8   спецификация визуального отображения — реализована целиком:
             выбор цветов, строка ≤ 80 символов (70ch), без выравнивания по ширине,
             межстрочный 1,5, межабзацный 1,5 × межстрочного, зум 200 %.
     1.4.11  3:1 для нетекстовых элементов — рамки, фокус, границы поверхностей.

   АДРЕСНЫЕ ПЕРЕКРЫТИЯ С !important (полный список, держать здесь, не рассыпать):
     1) body{background:#050505} и color — инлайновый CSS главной и sveden.css;
     2) .hero:before — радиальный градиент;
     3) .btn / .submit-btn / .circle / .step:hover .circle — linear-gradient;
     4) .card / .service-group / .audience-item / .step / .empty-note /
        .page-nav-link / .section-card — фоны #111 и рамки #222;
     5) header{background:rgba(5,5,5,.9);backdrop-filter:blur(10px)};
     6) .hero:before и section c градиентами — background-image;
     7) любые атрибуты style="" в разметке (в index.html их 11):
        a[style], span[style], div[style], input[style], textarea[style];
     8) .cookie-bar (старый баннер главной) и .cookie-bar a;
     9) .socials a img — инвертировать нельзя, поэтому просто рамка;
    10) footer{color:#444} и footer a{color:#666};
    11) .logo span{color:#fff};
    12) фоновые изображения при data-img="off";
    13) .form-error-note / .form-consent — мелкий цветной текст;
    14) #topBtn — фон и цвет;
    15) input/select/textarea — фон #111, цвет #fff, рамка #333.
   ========================================================================== */

/* --- Цветовые схемы. Значения проверены tools/contrast.py ------------------ */

/* Обычная (порог 4,5:1 по п. 1.4.3). Фирменный оранжевый #F47B20 в текст
   не попадает сознательно: на белом он даёт 2,73:1 и критерий не проходит. */
html.lowvision,
html.lowvision[data-scheme="normal"]{
  --a11y-bg:#FFFFFF;
  --a11y-surface:#EFEFEF;
  --a11y-fg:#1A1A1A;
  --a11y-muted:#4A4A4A;
  --a11y-link:#0B4EA2;
  --a11y-visited:#6A1B9A;
  --a11y-accent:#0B4EA2;
  --a11y-on-accent:#FFFFFF;
  --a11y-border:#595959;
  --a11y-focus:#8A3B00;
}
/* Чёрным по белому (порог 7:1 по п. 1.4.6; фактически от 10,49:1) */
html.lowvision[data-scheme="bw"]{
  --a11y-bg:#FFFFFF;
  --a11y-surface:#F0F0F0;
  --a11y-fg:#000000;
  --a11y-muted:#1A1A1A;
  --a11y-link:#0000A0;
  --a11y-visited:#5B0080;
  --a11y-accent:#000000;
  --a11y-on-accent:#FFFFFF;
  --a11y-border:#000000;
  --a11y-focus:#0000A0;
}
/* Белым по чёрному (от 10,31:1) */
html.lowvision[data-scheme="wb"]{
  --a11y-bg:#000000;
  --a11y-surface:#1A1A1A;
  --a11y-fg:#FFFFFF;
  --a11y-muted:#F0F0F0;
  --a11y-link:#FFD700;
  --a11y-visited:#FFAAFF;
  --a11y-accent:#FFFFFF;
  --a11y-on-accent:#000000;
  --a11y-border:#FFFFFF;
  --a11y-focus:#FFD700;
}
/* Жёлтым по чёрному (от 13,00:1) */
html.lowvision[data-scheme="yb"]{
  --a11y-bg:#000000;
  --a11y-surface:#1A1A1A;
  --a11y-fg:#FFFF00;
  --a11y-muted:#FFE680;
  --a11y-link:#FFFFFF;
  --a11y-visited:#FFD9A0;
  --a11y-accent:#FFFF00;
  --a11y-on-accent:#000000;
  --a11y-border:#FFFF00;
  --a11y-focus:#FFFFFF;
}

/* --- Три размера шрифта ----------------------------------------------------
   Размер живёт в переменной, а не в font-size корня: и sveden.css, и инлайновый
   CSS главной задают размеры в px, а px от корневого размера не масштабируется.
   Поэтому ниже типографика описана заново — без этого переключатель бесполезен. */
html.lowvision{ --a11y-fs:1rem;    --a11y-lh:1.5; }
html.lowvision[data-fs="100"]{ --a11y-fs:1rem; }
html.lowvision[data-fs="125"]{ --a11y-fs:1.25rem; }
html.lowvision[data-fs="150"]{ --a11y-fs:1.5rem; }   /* ≈18 пт, п. 3.1.86 */

/* --- Переописание типографики ---------------------------------------------- */
html.lowvision{
  background:var(--a11y-bg);
  color:var(--a11y-fg);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
html.lowvision body{
  background:var(--a11y-bg) !important;
  color:var(--a11y-fg) !important;
  font-family:Arial,Helvetica,"Segoe UI",sans-serif;
  font-size:var(--a11y-fs);
  line-height:var(--a11y-lh);
  overflow-x:visible;
}
html.lowvision p,
html.lowvision li,
html.lowvision dd,
html.lowvision dt,
html.lowvision td,
html.lowvision th,
html.lowvision label,
html.lowvision figcaption,
html.lowvision blockquote,
html.lowvision address,
html.lowvision time,
html.lowvision span,
html.lowvision div,
html.lowvision a{
  font-size:var(--a11y-fs);
  line-height:var(--a11y-lh);
  color:inherit;
}
html.lowvision h1{ font-size:calc(var(--a11y-fs) * 1.75); line-height:1.25; color:var(--a11y-fg); }
html.lowvision h2{ font-size:calc(var(--a11y-fs) * 1.5);  line-height:1.3;  color:var(--a11y-fg); }
html.lowvision h3{ font-size:calc(var(--a11y-fs) * 1.25); line-height:1.35; color:var(--a11y-fg); }
html.lowvision h4,
html.lowvision h5,
html.lowvision h6{ font-size:calc(var(--a11y-fs) * 1.1); line-height:1.4; color:var(--a11y-fg); }
html.lowvision h1,html.lowvision h2,html.lowvision h3,
html.lowvision h4,html.lowvision h5,html.lowvision h6{
  margin:calc(var(--a11y-fs) * 1.2) 0 calc(var(--a11y-fs) * 0.6);
  font-weight:700;
}
/* Мелкий служебный текст: не мельче 0,875 от основного (14px при 100 %). */
html.lowvision .crumbs,
html.lowvision .crumbs a,
html.lowvision .crumbs span,
html.lowvision .updated,
html.lowvision .updated time,
html.lowvision .lk-note,
html.lowvision .footer-note,
html.lowvision .footer-copy,
html.lowvision .footer-sub,
html.lowvision .doc-note,
html.lowvision .form-consent,
html.lowvision .form-error-note,
html.lowvision small{
  font-size:calc(var(--a11y-fs) * 0.875);
  line-height:var(--a11y-lh);
}
html.lowvision .lead{ font-size:calc(var(--a11y-fs) * 1.05); }

/* Классы существующего /sveden/sveden.css (селекторы в два класса требуют
   поимённого перекрытия — см. шапку файла). */
html.lowvision .section-name,
html.lowvision .section-num,
html.lowvision .submenu-name,
html.lowvision .submenu-num,
html.lowvision .submenu-link,
html.lowvision .subsections-title,
html.lowvision .page-nav-link,
html.lowvision .back-link,
html.lowvision .lk-link,
html.lowvision .a11y-toggle,
html.lowvision .cookie-settings,
html.lowvision .footer-label,
html.lowvision .empty-note p,
html.lowvision .doc-link,
html.lowvision .doc-pdf{
  font-size:var(--a11y-fs);
  line-height:var(--a11y-lh);
  letter-spacing:normal;
}
/* Классы инлайнового CSS главной страницы (index.html, 43 КБ в <style>). */
html.lowvision .hero h1{ font-size:calc(var(--a11y-fs) * 1.9); line-height:1.25; }
html.lowvision .hero p,
html.lowvision .about-text p,
html.lowvision .about-list li,
html.lowvision .audience-text,
html.lowvision .card-desc,
html.lowvision .step-desc,
html.lowvision .service-group p{
  font-size:var(--a11y-fs);
  line-height:var(--a11y-lh);
}
html.lowvision .audience-name,
html.lowvision .card-title,
html.lowvision .step-title,
html.lowvision .group-title,
html.lowvision .audience-num,
html.lowvision .group-num,
html.lowvision .circle,
html.lowvision .footer-logo,
html.lowvision nav a,
html.lowvision .btn,
html.lowvision .submit-btn,
html.lowvision input,
html.lowvision select,
html.lowvision textarea,
html.lowvision button{
  font-size:var(--a11y-fs);
  line-height:var(--a11y-lh);
  font-family:inherit;
}

/* --- Спецификация отображения по п. 1.4.8 ---------------------------------- */
html.lowvision p,
html.lowvision li,
html.lowvision dd,
html.lowvision .lead,
html.lowvision .empty-note p,
html.lowvision .footer-note,
html.lowvision blockquote{
  max-width:70ch;                /* ≤ 80 символов в строке */
  text-align:left;               /* не по ширине */
}
html.lowvision p,
html.lowvision .lead,
html.lowvision blockquote{
  /* межабзацный интервал ≥ 1,5 × межстрочного (1,5em × 1,5 = 2,25em) */
  margin-bottom:calc(var(--a11y-fs) * var(--a11y-lh) * 1.5);
}
html.lowvision li{ margin-bottom:calc(var(--a11y-fs) * 0.5); }
html.lowvision ul,
html.lowvision ol{ padding-left:1.5em; margin-bottom:calc(var(--a11y-fs) * var(--a11y-lh) * 1.5); }

/* --- Каркас страницы в режиме ---------------------------------------------
   Шапка перестаёт быть fixed: при 150 % и при зуме 200 % (п. 1.4.4) она иначе
   съедает экран и перекрывает начало текста. Заодно снимается backdrop-filter. */
html.lowvision header{
  position:static !important;
  background:var(--a11y-surface) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom:2px solid var(--a11y-border) !important;
  box-shadow:none;
}
html.lowvision .nav{
  height:auto !important;
  min-height:0;
  flex-wrap:wrap;
  gap:12px;
  padding:12px 0;
  align-items:center;
}
html.lowvision main{ padding-top:24px !important; padding-bottom:40px !important; }
html.lowvision section{ padding:32px 0 !important; }
html.lowvision .container{ width:min(1200px,94%); }
html.lowvision .logo{ color:var(--a11y-fg) !important; }
html.lowvision .logo span{ display:inline !important; color:var(--a11y-fg) !important; font-weight:700; }
html.lowvision .a11y-toggle { max-width:100%; white-space:normal; flex-shrink:1; overflow-wrap:anywhere; }
html.lowvision .sections,html.lowvision .submenu { grid-template-columns:repeat(2,minmax(0,1fr)); }
html.lowvision .submenu,html.lowvision .struct-level { margin-left:0; padding-left:0; }
html.lowvision .section-card,html.lowvision .submenu-item,html.lowvision .struct-node { min-width:0; overflow-wrap:anywhere; }
@media(max-width:768px) {
  html.lowvision .sections,html.lowvision .submenu { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:360px) {
  html.lowvision .container { width:88%; }
  html.lowvision .head-links { width:100%; flex-basis:100%; min-width:0; }
  html.lowvision .a11y-toggle { width:100%; }
  html.lowvision .section-card,html.lowvision .submenu-link { width:100%; max-width:100%; }
  html.lowvision .struct-node { width:100%; max-width:100%; flex-basis:100%; }
}
html.lowvision .logo img{ height:auto; max-height:calc(var(--a11y-fs) * 2.5); }

/* Поверхности: вместо тёмных карточек — фон surface и явная рамка.
   Пара «рамка/фон» проверена на 3:1 по п. 1.4.11, пара «surface/bg» — нет
   и не должна: поверхности различаются рамкой, а не оттенком. */
html.lowvision .card,
html.lowvision .service-group,
html.lowvision .audience-item,
html.lowvision .step,
html.lowvision .empty-note,
html.lowvision .section-card,
html.lowvision .page-nav-link,
html.lowvision .a11y-panel,
html.lowvision .submenu,
html.lowvision .table-wrap,
html.lowvision table,
html.lowvision th,
html.lowvision td,
html.lowvision .doc-link,
html.lowvision .todo-row,
html.lowvision .struct-node,
html.lowvision .cookie-bar{
  background:var(--a11y-surface) !important;
  background-image:none !important;
  color:var(--a11y-fg) !important;
  border-color:var(--a11y-border) !important;
  box-shadow:none !important;
  transform:none !important;
}
html.lowvision .card,
html.lowvision .service-group,
html.lowvision .audience-item,
html.lowvision .step,
html.lowvision .empty-note,
html.lowvision .section-card,
html.lowvision .page-nav-link,
html.lowvision .struct-node{ border:2px solid var(--a11y-border) !important; }
html.lowvision th,
html.lowvision td{ border:1px solid var(--a11y-border) !important; }
html.lowvision th{ background:var(--a11y-bg) !important; }

/* Градиенты и декоративные подложки. */
html.lowvision .hero:before,
html.lowvision .process:before,
html.lowvision .audience-item:first-child,
html.lowvision .hero{
  background:none !important;
  background-image:none !important;
}
html.lowvision .btn,
html.lowvision .submit-btn,
html.lowvision .circle,
html.lowvision .step:hover .circle,
html.lowvision button[type="submit"]{
  background:var(--a11y-accent) !important;
  background-image:none !important;
  color:var(--a11y-on-accent) !important;
  border:2px solid var(--a11y-border) !important;
  border-radius:6px;
  text-shadow:none;
}
html.lowvision #topBtn{
  background:var(--a11y-accent) !important;
  color:var(--a11y-on-accent) !important;
  border:2px solid var(--a11y-border) !important;
}
html.lowvision input,
html.lowvision select,
html.lowvision textarea,
html.lowvision input[style],
html.lowvision select[style],
html.lowvision textarea[style]{
  background:var(--a11y-bg) !important;
  color:var(--a11y-fg) !important;
  border:2px solid var(--a11y-border) !important;
  font-size:var(--a11y-fs) !important;
  font-family:inherit !important;
}
/* Атрибуты style="" в разметке (их не перебить без !important). */
html.lowvision a[style]{ color:var(--a11y-link) !important; }
html.lowvision span[style],
html.lowvision div[style],
html.lowvision p[style]{ color:var(--a11y-fg) !important; background-image:none !important; }

/* Подвал: в обычном режиме он серый и мелкий. */
html.lowvision footer{
  background:var(--a11y-surface) !important;
  color:var(--a11y-fg) !important;
  border-top:2px solid var(--a11y-border) !important;
  text-align:left;
}
html.lowvision footer a{ color:var(--a11y-link) !important; }
html.lowvision .socials a img{ border:1px solid var(--a11y-border); background:var(--a11y-bg); }
/* Старый баннер cookie на главной (до фазы 9 он ещё там). */
html.lowvision .cookie-bar a{ color:var(--a11y-link) !important; }

/* --- Ссылки и фокус -------------------------------------------------------
   п. 1.4.1: цвет не единственное средство — ссылки всегда подчёркнуты. */
html.lowvision a{ color:var(--a11y-link) !important; text-decoration:underline; }
html.lowvision a:visited{ color:var(--a11y-visited) !important; }
html.lowvision a:hover{ text-decoration-thickness:3px; }
html.lowvision .btn,
html.lowvision .submit-btn,
html.lowvision .page-nav-link,
html.lowvision .section-card,
html.lowvision .a11y-toggle,
html.lowvision .cookie-settings{ text-decoration:underline; }
html.lowvision *:focus{ outline:3px solid var(--a11y-focus); outline-offset:2px; }
html.lowvision *:focus-visible{ outline:3px solid var(--a11y-focus); outline-offset:2px; }

/* --- Отключение изображений (data-img="off") ------------------------------
   СОЗНАТЕЛЬНЫЕ ИСКЛЮЧЕНИЯ: inline <svg>, <img src="*.svg"> и HTML-схема
   структуры управления. Скрывать их — значит удалять содержательную
   информацию, а это прямое нарушение п. 1.4.5. Следствие для фазы 2:
   схема структуры управления делается HTML+CSS, не картинкой. */
html.lowvision[data-img="off"] img:not([src$=".svg"]):not([src$=".SVG"]):not(.a11y-keep){
  display:none !important;
}
html.lowvision[data-img="off"] picture:not(:has(img[src$=".svg"])){ display:none !important; }
html.lowvision[data-img="off"] svg,
html.lowvision[data-img="off"] .struct-schema,
html.lowvision[data-img="off"] .struct-node,
html.lowvision[data-img="off"] .a11y-keep{ display:revert !important; }
html.lowvision[data-img="off"] *{ background-image:none !important; }
html.lowvision[data-img="off"] .logo span{ display:inline !important; }
html.lowvision img{ max-width:100%; height:auto; }

/* --- Панель настроек (#a11y-panel, разметку вставляет /assets/a11y.js) ----- */
html.lowvision .a11y-toggle,
.a11y-toggle[aria-expanded]{ cursor:pointer; }
#a11y-panel[hidden]{ display:none !important; }
#a11y-panel{
  position:fixed;
  top:0;
  right:0;
  z-index:1200;                      /* выше header{z-index:1000} */
  width:min(380px,100%);
  max-height:100vh;
  overflow-y:auto;
  box-sizing:border-box;
  padding:16px 18px 20px;
  background:#FFFFFF;
  color:#1A1A1A;
  border:2px solid #000000;
  border-radius:0 0 0 10px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.5;
  text-align:left;
  box-shadow:0 8px 32px rgba(0,0,0,.35);
}
html.lowvision #a11y-panel{
  background:var(--a11y-bg);
  color:var(--a11y-fg);
  border-color:var(--a11y-border);
  font-size:var(--a11y-fs);
}
#a11y-panel .a11y-panel-title{ margin:0 0 12px; font-size:1.1em; font-weight:700; }
#a11y-panel fieldset{ margin:0 0 14px; padding:10px 12px; border:1px solid currentColor; border-radius:6px; }
#a11y-panel legend{ padding:0 6px; font-weight:700; font-size:.95em; }
#a11y-panel .a11y-row{ display:flex; align-items:center; gap:10px; margin:6px 0; }
#a11y-panel input[type="radio"],
#a11y-panel input[type="checkbox"]{ width:1.15em; height:1.15em; margin:0; flex:0 0 auto; accent-color:currentColor; }
#a11y-panel label{ cursor:pointer; }
#a11y-panel .a11y-sample{
  display:inline-block;
  margin-left:auto;
  padding:2px 8px;
  border:1px solid currentColor;
  border-radius:4px;
  font-size:.85em;
}
#a11y-panel .a11y-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
#a11y-panel button{
  font:inherit;
  padding:8px 14px;
  border-radius:6px;
  border:2px solid currentColor;
  background:transparent;
  color:inherit;
  cursor:pointer;
}
#a11y-panel button:hover{ text-decoration:underline; }
#a11y-panel .a11y-note{ margin:10px 0 0; font-size:.85em; max-width:none; }
#a11y-panel *:focus{ outline:3px solid #8A3B00; outline-offset:2px; }
html.lowvision #a11y-panel *:focus{ outline-color:var(--a11y-focus); }
/* Панель не модальная: контент под ней остаётся доступным (п. 5.5 ГОСТа). */
#a11y-panel{ pointer-events:auto; }

/* --- Узкий экран и печать -------------------------------------------------- */
@media (max-width:768px){
  #a11y-panel{ width:100%; border-radius:0; }
  html.lowvision .nav{ padding:10px 0; }
  html.lowvision .head-links{ flex-wrap:wrap; }
}
@media print{
  #a11y-panel{ display:none !important; }
}