/*
 * Версия для слабовидящих.
 *
 * Схемы, размеры и межбуквенный интервал перенесены один в один с
 * нынешнего сайта: подбирались они под требования к сайтам СМИ и
 * государственных органов, менять их «на глаз» нельзя.
 *
 * Правила идут после палитры и перекрывают её — поэтому файл подключается
 * последним.
 */

:root[data-a11y='on'] {
  --a11y-scale: 1.25;
}

:root[data-a11y-size='1'] {
  --a11y-scale: 1.25;
}
:root[data-a11y-size='2'] {
  --a11y-scale: 1.5;
}
:root[data-a11y-size='3'] {
  --a11y-scale: 1.85;
}

:root[data-a11y-tracking='wide'] {
  --a11y-tracking: 0.08em;
}

/* Чёрным по белому */
:root[data-a11y-scheme='bw'] {
  --surface: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #ffffff;
  --line: #000000;
  --ink: #000000;
  --ink-muted: #000000;
  --brand: #000000;
  --brand-ink: #ffffff;
  --accent: #000000;
  color-scheme: light;
}

/* Белым по чёрному */
:root[data-a11y-scheme='wb'] {
  --surface: #000000;
  --surface-2: #000000;
  --surface-3: #000000;
  --line: #ffffff;
  --ink: #ffffff;
  --ink-muted: #ffffff;
  --brand: #ffffff;
  --brand-ink: #000000;
  --accent: #ffffff;
  color-scheme: dark;
}

/* Тёмно-синим по голубому */
:root[data-a11y-scheme='bb'] {
  --surface: #9dd1ff;
  --surface-2: #9dd1ff;
  --surface-3: #9dd1ff;
  --line: #063462;
  --ink: #063462;
  --ink-muted: #063462;
  --brand: #063462;
  --brand-ink: #9dd1ff;
  --accent: #063462;
  color-scheme: light;
}

/* Отключение изображений — отдельный режим, его просят слабовидящие. */
:root[data-a11y-images='off'] img,
:root[data-a11y-images='off'] svg:not([data-a11y-keep]),
:root[data-a11y-images='off'] video {
  display: none !important;
}

/* --- Узкая полоса со ссылкой --- */

.a11y-bar {
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.a11y-bar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 2.5rem;
}

.a11y-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.a11y-bar__link:hover {
  color: var(--brand);
}

/* --- Панель настроек --- */

.a11y {
  /* Толстая рамка снизу: в чёрно-белой схеме тонкая линия почти не видна. */
  border-bottom: 2px solid var(--ink);
  background: var(--surface);
}

.a11y__inner {
  display: grid;
  gap: 0.75rem;
  padding-block: 0.75rem;
}

.a11y__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
}

.a11y__group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  margin: 0;
  padding: 0;
}

.a11y__legend {
  font-size: 0.875rem;
  font-weight: 600;
}

/* 44×44 — наименьший размер, по которому уверенно попадают пальцем. */
.a11y__square {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.a11y__letter--s { font-size: 0.875rem; }
.a11y__letter--m { font-size: 1rem; }
.a11y__letter--l { font-size: 1.25rem; }

/* Выбранный размер залит: в чёрно-белой схеме различать можно только так. */
[data-a11y-size][aria-pressed='true'] {
  background: var(--ink);
  color: var(--surface);
}

/* Кнопки схем показывают сами себя — подпись тут не нужна и не влезает. */
.a11y__square--bw { background: #ffffff; color: #000000; border-color: #000000; }
.a11y__square--wb { background: #000000; color: #ffffff; border-color: #ffffff; }
.a11y__square--bb { background: #9dd1ff; color: #063462; border-color: #063462; }

[data-a11y-scheme][aria-pressed='true'] {
  outline: 3px solid var(--ink);
  outline-offset: 1px;
}

.a11y__wide {
  height: 2.75rem;
  border: 2px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  padding-inline: 0.75rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.a11y__wide--off {
  text-decoration: underline;
}

[hidden] {
  display: none !important;
}