/* ==========================================================================
   ВАРИАНТ 1. ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ — КАРКАС, РАБОТА НЕ ЗАВЕРШЕНА

   Сделано: включение через data-атрибуты, три темы, три ступени кегля,
   отключение изображений, панель управления.
   Осталось: аудит контраста WCAG, режим увеличенных интервалов,
   решение по флагам-эмодзи, серверная сессия, стили печати.
   ========================================================================== */

html[data-a11y-size="2"] {
    --a11y-scale: 1.25;
}

html[data-a11y-size="3"] {
    --a11y-scale: 1.5;
}

/* --- Общие правки режима ------------------------------------------------- */

html[data-a11y="on"] body {
    --shadow-card: none;
    --shadow-card-hover: none;
    --radius-lg: 4px;
    --radius-md: 4px;
    --radius-sm: 2px;
    --radius-pill: 4px;
}

html[data-a11y="on"] .doc-card,
html[data-a11y="on"] .country-card {
    border-width: 2px;
}

/* Боковое меню стран: тёмная колонна в спецверсии не годится —
   разбираем её до контурного блока в цветах выбранной темы. */
html[data-a11y="on"] .rail {
    background: var(--c-surface);
    border: 2px solid var(--c-border);
    color: var(--c-text);
}

html[data-a11y="on"] .rail__label,
html[data-a11y="on"] .rail-nav__item,
html[data-a11y="on"] .rail__all {
    color: var(--c-text);
}

html[data-a11y="on"] .rail__label,
html[data-a11y="on"] .rail__bottom {
    border-color: var(--c-border);
}

html[data-a11y="on"] .rail-nav__item:hover,
html[data-a11y="on"] .rail-nav__item.is-current {
    background: transparent;
    border-left-color: var(--c-text);
    color: var(--c-text);
    text-decoration: underline;
}

html[data-a11y="on"] a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* TODO: решить, скрывать ли иконки карточек целиком или перекрашивать. */
html[data-a11y="on"] .doc-card__icon {
    border: 1px solid currentColor;
}

/* --- Тема: чёрным по белому (по умолчанию) ------------------------------ */

html[data-a11y="on"][data-a11y-theme="white"] {
    --c-text: #000000;
    --c-text-muted: #000000;
    --c-bg: #ffffff;
    --c-surface: #ffffff;
    --c-border: #000000;
    --c-border-strong: #000000;
    --c-primary: #000000;
    --c-primary-dark: #000000;
    --c-primary-soft: #ffffff;
    --c-primary-tint: #ffffff;
    --c-accent-f: #ffffff;
    --c-accent-f-ink: #000000;
    --c-accent-m: #ffffff;
    --c-accent-m-ink: #000000;
}

/* --- Тема: белым по чёрному ---------------------------------------------- */

html[data-a11y="on"][data-a11y-theme="black"] {
    --c-text: #ffffff;
    --c-text-muted: #ffffff;
    --c-bg: #000000;
    --c-surface: #000000;
    --c-border: #ffffff;
    --c-border-strong: #ffffff;
    --c-primary: #ffffff;
    --c-primary-dark: #ffffff;
    --c-primary-soft: #000000;
    --c-primary-tint: #000000;
    --c-accent-f: #000000;
    --c-accent-f-ink: #ffffff;
    --c-accent-m: #000000;
    --c-accent-m-ink: #ffffff;
}

/* --- Тема: тёмно-синим по голубому --------------------------------------- */

html[data-a11y="on"][data-a11y-theme="blue"] {
    --c-text: #063462;
    --c-text-muted: #063462;
    --c-bg: #9dd1ff;
    --c-surface: #9dd1ff;
    --c-border: #063462;
    --c-border-strong: #063462;
    --c-primary: #063462;
    --c-primary-dark: #063462;
    --c-primary-soft: #9dd1ff;
    --c-primary-tint: #9dd1ff;
    --c-accent-f: #9dd1ff;
    --c-accent-f-ink: #063462;
    --c-accent-m: #9dd1ff;
    --c-accent-m-ink: #063462;
}

/* Заливка кнопки сливается с фоном — оставляем контурную. */
html[data-a11y="on"] .btn--primary {
    background: transparent;
    color: var(--c-text);
    box-shadow: inset 0 0 0 2px var(--c-text);
}

html[data-a11y="on"] .btn--primary:hover {
    background: var(--c-text);
    color: var(--c-bg);
}

/* --- Отключение изображений ---------------------------------------------- */

html[data-a11y-images="off"] img {
    display: none;
}

/* Флаги теперь вектор, а не эмодзи-текст, поэтому убираются как обычные
   изображения. Название страны рядом остаётся — смысл не теряется. */
html[data-a11y-images="off"] .flag {
    display: none;
}

/* ==========================================================================
   Панель управления спецверсией
   ========================================================================== */

.a11y-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--c-text-muted);
    font-size: inherit;
}

.a11y-toggle:hover {
    color: var(--c-primary);
}

.a11y-toggle svg {
    width: 19px;
    height: 19px;
}

.a11y-panel {
    display: none;
    background: var(--c-surface);
    border-bottom: 2px solid var(--c-border);
}

html[data-a11y="on"] .a11y-panel {
    display: block;
}

.a11y-panel__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.a11y-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.a11y-group__label {
    color: var(--c-text-muted);
    font-size: calc(var(--fs-small) * var(--a11y-scale));
}

.a11y-opt {
    min-width: 34px;
    padding: 4px 10px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: calc(var(--fs-small) * var(--a11y-scale));
    line-height: 1.4;
}

.a11y-opt[aria-pressed="true"] {
    background: var(--c-text);
    color: var(--c-bg);
    font-weight: var(--fw-bold);
}

.a11y-opt--size-1 { font-size: calc(15px * var(--a11y-scale)); }
.a11y-opt--size-2 { font-size: calc(19px * var(--a11y-scale)); }
.a11y-opt--size-3 { font-size: calc(23px * var(--a11y-scale)); }

/* Темы — цветовые образцы без букв: подпись живёт в aria-label,
   иначе на каждый язык пришлось бы подбирать свою литеру. */
.a11y-opt--theme {
    min-width: 40px;
    height: 30px;
}

.a11y-opt--theme-white { background: #fff; color: #000; }
.a11y-opt--theme-black { background: #000; color: #fff; }
.a11y-opt--theme-blue  { background: #9dd1ff; color: #063462; }

.a11y-opt--theme-white[aria-pressed="true"],
.a11y-opt--theme-black[aria-pressed="true"],
.a11y-opt--theme-blue[aria-pressed="true"] {
    outline: 3px solid var(--c-text);
    outline-offset: 2px;
}

.a11y-panel__exit {
    margin-left: auto;
    text-decoration: underline;
    font-size: calc(var(--fs-small) * var(--a11y-scale));
    color: var(--c-text-muted);
}