/* ТЗ №33, блок 3 — версия для слабовидящих. Переопределяет переменные из
   tokens.css атрибутами на <html> (data-a11y-*), вёрстка сайта не
   переписывается — см. core/static/core/js/accessibility.js за логикой
   переключения и templates/_a11y_settings.html за самой панелью.

   Порядок в <head>: tokens.css, site.css, a11y.css — этот файл идёт
   последним, поэтому побеждает по порядку источника при равной
   специфичности; но на всякий случай селекторы ниже (html[data-a11y-*])
   всё равно специфичнее одиночных [data-portal="..."] из tokens.css. */

/* ---------- Панель настроек и кнопка-переключатель ----------
   ТЗ №35, п.3: компактная кнопка-иконка в один ряд с аватаром/бургером —
   раньше кнопка с видимым текстом «Версия для слабовидящих» не помещалась
   в шапку и вылезала за её пределы. Текст — только в title/aria-label
   (см. templates/_a11y_toggle.html), на странице не показывается. */
.a11y-toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}
.a11y-toggle svg { width: 20px; height: 20px; }
.a11y-toggle:hover { border-color: var(--color-primary); color: var(--primary-text); }
.a11y-toggle.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--on-primary);
}

.a11y-panel {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.a11y-panel-inner {
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  align-items: flex-end;
}
.a11y-group { display: flex; flex-direction: column; gap: var(--s-2); }
.a11y-group-label { font-size: var(--fs-label); font-weight: 700; color: var(--color-text-muted); }
.a11y-btn-group { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.a11y-btn-group button {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-small);
  cursor: pointer;
}
.a11y-btn-group button.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--on-primary);
}
.a11y-reset { min-height: 44px; }

/* ---------- Размер шрифта — три ступени ----------
   Значения — литералы (×1.5 / ×2 от --fs-* в tokens.css для каждого
   портала), а НЕ calc(var(--fs-display) * ...): такое выражение читает и
   одновременно переопределяет --fs-display на одном и том же элементе —
   формальный цикл var(), из-за которого само свойство становится целиком
   невалидным и текст падает на дефолтные 16px браузера (грабли первой
   реализации блока 3). Проброс через отдельное «-base» имя ожидаемо
   решает цикл на бумаге, но конкретно в этой сборке браузера ломает
   резолвинг --fs-* при самой первой отрисовке страницы (работает только
   после принудительного пересчёта стилей) — поэтому просто литералы;
   при изменении шкалы в tokens.css эти числа нужно пересчитать вручную. */
html[data-a11y-font="large"] { --a11y-font-scale: 1.5; }
html[data-a11y-font="xlarge"] { --a11y-font-scale: 2; }
html[data-portal="doctor"][data-a11y-font="large"] {
  --fs-display: 60px; --fs-h1: 48px; --fs-h2: 39px; --fs-h3: 30px;
  --fs-body: 24px; --fs-read: 25.5px; --fs-small: 21px; --fs-label: 18px;
  --btn-h: 54px; --input-h: 54px;
}
html[data-portal="doctor"][data-a11y-font="xlarge"] {
  --fs-display: 80px; --fs-h1: 64px; --fs-h2: 52px; --fs-h3: 40px;
  --fs-body: 32px; --fs-read: 34px; --fs-small: 28px; --fs-label: 24px;
  --btn-h: 72px; --input-h: 72px;
}
html[data-portal="patient"][data-a11y-font="large"] {
  --fs-display: 66px; --fs-h1: 51px; --fs-h2: 42px; --fs-h3: 33px;
  --fs-body: 25.5px; --fs-read: 27px; --fs-small: 22.5px; --fs-label: 19.5px;
  --btn-h: 58.5px; --input-h: 58.5px;
}
html[data-portal="patient"][data-a11y-font="xlarge"] {
  --fs-display: 88px; --fs-h1: 68px; --fs-h2: 56px; --fs-h3: 44px;
  --fs-body: 34px; --fs-read: 36px; --fs-small: 30px; --fs-label: 26px;
  --btn-h: 78px; --input-h: 78px;
}
html[data-a11y-font="large"],
html[data-a11y-font="xlarge"] {
  --lh-body: 1.6;
  --lh-read: 1.65;
}
/* Крупный шрифт в узких карточках/сетках легко переполняет колонку —
   разрешаем перенос и убираем обрезание по высоте там, где вёрстка на
   фиксированную высоту текста (счётчики строк и т.п.). */
html[data-a11y-font="large"] .card-desc,
html[data-a11y-font="xlarge"] .card-desc {
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

/* ---------- Цветовая схема — три стандартные комбинации ---------- */
html[data-a11y-scheme="bw"] {
  --bg: #fff; --bg-hero: #fff; --surface: #fff; --surface-soft: #f2f2f2;
  --text: #000; --text-2: #000; --text-3: #222;
  --line: #000; --primary: #000; --primary-text: #000; --primary-hover: #333; --on-primary: #fff; --accent: #000;
}
html[data-a11y-scheme="wb"] {
  --bg: #000; --bg-hero: #000; --surface: #000; --surface-soft: #1a1a1a;
  --text: #fff; --text-2: #fff; --text-3: #ddd;
  --line: #fff; --primary: #fff; --primary-text: #fff; --primary-hover: #ccc; --on-primary: #000; --accent: #fff;
}
html[data-a11y-scheme="blue"] {
  --bg: #d9edf9; --bg-hero: #d9edf9; --surface: #d9edf9; --surface-soft: #c3e0f2;
  --text: #05223f; --text-2: #05223f; --text-3: #0c3a5a;
  --line: #05223f; --primary: #05223f; --primary-text: #05223f; --primary-hover: #0c3a5a; --on-primary: #d9edf9; --accent: #05223f;
}

/* ---------- Межбуквенный интервал ---------- */
html[data-a11y-spacing="increased"] { --a11y-letter-spacing: 0.05em; }
html[data-a11y-spacing="wide"] { --a11y-letter-spacing: 0.12em; }
body { letter-spacing: var(--a11y-letter-spacing, normal); }

/* ---------- Изображения — показывать/скрывать ----------
   Декоративное (обложки, иллюстрации) — скрываем. Содержимое НЕ трогаем:
   страницы книг/статей во вьюере (.page-viewer-img) — это отсканированный
   текст, а не картинка-украшение; видео — вообще не <img>, не затронуто
   в принципе. Логотип — не пропадает, а заменяется текстом названия. */
html[data-a11y-images="hidden"] img:not(.page-viewer-img):not(.logo-full) {
  visibility: hidden;
}
/* Логотип — картинка (<img>), а ::after на replaced-элементах (img, video,
   input) браузеры не рисуют вовсе (ограничение спецификации) — поэтому
   вместо визуального трюка с ::after/attr() рядом с картинкой в разметке
   лежит .logo-text (см. templates/_logo_full.html), обычно скрытый. */
html[data-a11y-images="hidden"] .logo-full { display: none; }
.logo-text { display: none; }
html[data-a11y-images="hidden"] .logo-text {
  display: inline-block;
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--color-text);
  white-space: nowrap;
}