/*!
 * Версия для слабовидящих для DataLife Engine – стили режима.
 * ГОСТ Р 52872-2019, WCAG 2.1 (уровень AA): масштаб текста до 200 %, цветовые схемы с контрастом не ниже 7:1,
 * управление изображениями, интервалами, гарнитурой, отключение анимации.
 *
 * Все правила действуют только при классе .a11y-on на <html>; параметры задаются атрибутами data-a11y-*.
 * :not(#a11y-boost) поднимает специфичность до уровня id, чтобы правила режима перекрывали стили шаблона, в том числе с !important.
 */

/* ---------- кнопки включения (видны, только когда скрипт плагина загружен) ---------- */
[data-a11y-toggle][hidden] { display: none !important; }
.a11y-toggle {
	display: inline-flex; align-items: center; gap: .45em;
	padding: .35em .7em; border: 1px solid currentColor; border-radius: 999px;
	background: transparent; color: inherit; font: inherit; line-height: 1.2; cursor: pointer;
}
.a11y-toggle svg { width: 1.25em; height: 1.25em; flex: none; }
.a11y-sr {
	position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
	margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ---------- палитры ---------- */
html.a11y-on:not(#a11y-boost) { --a11y-fg: #000; --a11y-bg: #fff; --a11y-size: 20px; --a11y-lh: 1.5; --a11y-ls: normal; --a11y-ws: normal;
	--a11y-font: Arial, 'Helvetica Neue', Helvetica, 'Liberation Sans', sans-serif; }
html.a11y-on:not(#a11y-boost)[data-a11y-color="wb"] { --a11y-fg: #fff; --a11y-bg: #000; }
html.a11y-on:not(#a11y-boost)[data-a11y-color="blue"] { --a11y-fg: #063462; --a11y-bg: #9dd1ff; }
html.a11y-on:not(#a11y-boost)[data-a11y-color="brown"] { --a11y-fg: #4d4b43; --a11y-bg: #f7f3d6; }
html.a11y-on:not(#a11y-boost)[data-a11y-color="green"] { --a11y-fg: #a9e44d; --a11y-bg: #3b2716; }

html.a11y-on:not(#a11y-boost)[data-a11y-size="2"] { --a11y-size: 26px; }
html.a11y-on:not(#a11y-boost)[data-a11y-size="3"] { --a11y-size: 34px; }
html.a11y-on:not(#a11y-boost)[data-a11y-lh="1"] { --a11y-lh: 1.8; }
html.a11y-on:not(#a11y-boost)[data-a11y-lh="2"] { --a11y-lh: 2.1; }
html.a11y-on:not(#a11y-boost)[data-a11y-ls="1"] { --a11y-ls: .12em; --a11y-ws: .16em; }
html.a11y-on:not(#a11y-boost)[data-a11y-ls="2"] { --a11y-ls: .25em; --a11y-ws: .35em; }
html.a11y-on:not(#a11y-boost)[data-a11y-font="serif"] { --a11y-font: 'Times New Roman', Times, 'Liberation Serif', Georgia, serif; }

/* ---------- цвет и фон: всё содержимое страницы в выбранной схеме ---------- */
html.a11y-on:not(#a11y-boost), html.a11y-on:not(#a11y-boost) body { background: var(--a11y-bg) !important; color: var(--a11y-fg) !important; color-scheme: light; }
html.a11y-on:not(#a11y-boost)[data-a11y-color="wb"], html.a11y-on:not(#a11y-boost)[data-a11y-color="green"] { color-scheme: dark; }
html.a11y-on:not(#a11y-boost) body *:not(svg):not(svg *):not(img):not(video):not(iframe):not(canvas):not(picture):not(object):not(embed):where(:not([id^="playerjs"] *):not(.tox *):not(.mce-content-body *)) {
	color: var(--a11y-fg) !important;
	background-color: var(--a11y-bg) !important;
	background-image: none !important;
	border-color: var(--a11y-fg) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	opacity: 1 !important;
}
html.a11y-on:not(#a11y-boost) body *::before, html.a11y-on:not(#a11y-boost) body *::after { background-image: none !important; box-shadow: none !important; text-shadow: none !important; }
html.a11y-on:not(#a11y-boost) body svg { color: var(--a11y-fg) !important; }
html.a11y-on:not(#a11y-boost) body ::placeholder { color: var(--a11y-fg) !important; opacity: .75 !important; }
html.a11y-on:not(#a11y-boost) body ::selection { background: var(--a11y-fg) !important; color: var(--a11y-bg) !important; }

/* ---------- шрифт, размер, интервалы (WCAG 1.4.4, 1.4.12) ----------
   видеоплееры (PlayerJS) и редактор TinyMCE сохраняют собственное оформление */
html.a11y-on:not(#a11y-boost) body, html.a11y-on:not(#a11y-boost) body *:not(svg):not(svg *):where(:not([id^="playerjs"] *):not(.tox *):not(.mce-content-body *)) {
	font-family: var(--a11y-font) !important;
	letter-spacing: var(--a11y-ls) !important;
	word-spacing: var(--a11y-ws) !important;
}
html.a11y-on:not(#a11y-boost) body :is(p, li, dd, dt, td, th, label, legend, input, select, textarea, button, a, span, cite, blockquote, figcaption, small, b, strong, em, i, time, address, summary, div):where(:not([id^="playerjs"] *):not(.tox *):not(.mce-content-body *)) {
	font-size: var(--a11y-size) !important;
	line-height: var(--a11y-lh) !important;
}
html.a11y-on:not(#a11y-boost) body h1 { font-size: calc(var(--a11y-size) * 1.6) !important; line-height: 1.25 !important; }
html.a11y-on:not(#a11y-boost) body h2 { font-size: calc(var(--a11y-size) * 1.4) !important; line-height: 1.3 !important; }
html.a11y-on:not(#a11y-boost) body h3 { font-size: calc(var(--a11y-size) * 1.2) !important; line-height: 1.35 !important; }
html.a11y-on:not(#a11y-boost) body :is(h4, h5, h6) { font-size: calc(var(--a11y-size) * 1.1) !important; line-height: 1.4 !important; }
html.a11y-on:not(#a11y-boost) body :is(h1, h2, h3, h4, h5, h6) :is(a, span, b, strong, em, i, small, time) { font-size: inherit !important; line-height: inherit !important; }
html.a11y-on:not(#a11y-boost) body :is(h1, h2, h3, h4, h5, h6) { font-weight: 700 !important; text-transform: none !important; }
html.a11y-on:not(#a11y-boost) body :is(p, li, dd, td, blockquote) { text-align: left !important; }
html.a11y-on:not(#a11y-boost) body :is(p, ul, ol, blockquote) { margin-bottom: calc(var(--a11y-size) * .8) !important; }
html.a11y-on:not(#a11y-boost) body * { text-transform: none !important; }

/* перекомпоновка без горизонтальной прокрутки при крупном шрифте (WCAG 1.4.10) */
html.a11y-on:not(#a11y-boost) body *:not(pre):not(pre *):not(code):not(textarea):not(svg):not(svg *):where(:not([id^="playerjs"] *):not(.tox *):not(.mce-content-body *)) {
	white-space: normal !important; overflow-wrap: break-word !important; flex-wrap: wrap !important; min-width: 0;
}
/* flex-ряды переносят элементы целиком; длинные слова в заголовках и адреса (e-mail, телефон, URL) – по символам */
html.a11y-on:not(#a11y-boost):not(#a11y-boost-2) body :is(h1, h2, h3, h4, h5, h6, a[href^="mailto:"], a[href^="tel:"], a[href^="http"]) { overflow-wrap: anywhere !important; hyphens: auto; }
html.a11y-on:not(#a11y-boost) body :is(img, video, iframe, input, select, textarea, button, .btn, table, embed, object):where(:not([id^="playerjs"] *):not(.tox *):not(.mce-content-body *)) { max-width: 100% !important; }
html.a11y-on:not(#a11y-boost) body [id^="playerjs"] { font-size: 16px !important; max-width: 100% !important; overflow: hidden !important; }
html.a11y-on:not(#a11y-boost) body :is(button, .btn, a) { height: auto !important; text-align: center; }

/* ---------- ссылки, кнопки, поля, фокус (WCAG 1.4.1, 2.4.7) ---------- */
html.a11y-on:not(#a11y-boost) body a { text-decoration: underline !important; text-underline-offset: .15em; }
html.a11y-on:not(#a11y-boost) body a:hover { text-decoration-thickness: .15em !important; }
html.a11y-on:not(#a11y-boost) body :is(button, input, select, textarea, .btn, [role="button"]) { border: 2px solid var(--a11y-fg) !important; }
html.a11y-on:not(#a11y-boost) body :focus-visible, html.a11y-on:not(#a11y-boost) body :focus {
	outline: 4px solid var(--a11y-fg) !important; outline-offset: 3px !important;
}
html.a11y-on:not(#a11y-boost) body svg.i, html.a11y-on:not(#a11y-boost) body .i { min-width: 1em; min-height: 1em; }

/* ---------- изображения ---------- */
html.a11y-on:not(#a11y-boost)[data-a11y-img="gray"] body :is(img, video, iframe, picture, canvas, svg image) { filter: grayscale(1) contrast(1.1) !important; }
html.a11y-on:not(#a11y-boost)[data-a11y-img="off"] body :is(img, picture, video, canvas, object, embed) { display: none !important; }
html.a11y-on:not(#a11y-boost)[data-a11y-img="off"] body iframe { visibility: hidden !important; }
.a11y-alt { display: none; }
html.a11y-on:not(#a11y-boost)[data-a11y-img="off"] .a11y-alt {
	display: inline-block !important; padding: .2em .5em; border: 2px dashed var(--a11y-fg) !important;
}

/* ---------- без анимации и движения (WCAG 2.2.2, 2.3.3) ---------- */
html.a11y-on:not(#a11y-boost) *, html.a11y-on:not(#a11y-boost) *::before, html.a11y-on:not(#a11y-boost) *::after {
	animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
html.a11y-on:not(#a11y-boost) { scroll-behavior: auto !important; }

/* ---------- панель настроек ---------- */
.a11y-panel { display: none; }
html.a11y-on:not(#a11y-boost) .a11y-panel {
	display: block; position: relative; z-index: 1000;
	border-bottom: 3px solid var(--a11y-fg) !important;
	font-family: var(--a11y-font) !important;
}
html.a11y-on:not(#a11y-boost) .a11y-panel__in {
	max-width: 1280px; margin: 0 auto; padding: 12px 16px;
	display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: flex-end;
}
html.a11y-on:not(#a11y-boost) .a11y-panel__head { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
html.a11y-on:not(#a11y-boost) .a11y-panel__title { margin: 0 !important; font-weight: 700 !important; font-size: 20px !important; line-height: 1.3 !important; }
html.a11y-on:not(#a11y-boost) .a11y-panel__body { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: flex-end; }
html.a11y-on:not(#a11y-boost) .a11y-panel.is-folded .a11y-panel__body { display: none !important; }
html.a11y-on:not(#a11y-boost) .a11y-group { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0 !important; min-width: 0; }
html.a11y-on:not(#a11y-boost) .a11y-group__label { font-size: 16px !important; line-height: 1.3 !important; font-weight: 700 !important; }
html.a11y-on:not(#a11y-boost) .a11y-group__btns { display: flex; flex-wrap: wrap; gap: 6px; }
html.a11y-on:not(#a11y-boost) .a11y-panel button {
	min-height: 44px; min-width: 44px; padding: 6px 12px; margin: 0;
	border: 2px solid var(--a11y-fg) !important; border-radius: 8px;
	font-size: 17px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: normal !important; word-spacing: normal !important;
	cursor: pointer;
}
/* панель не масштабируется вместе со страницей: подписи кнопок всегда одного размера */
html.a11y-on:not(#a11y-boost) .a11y-panel :is(button, .a11y-group__label) :not(.a11y-sample),
html.a11y-on:not(#a11y-boost) .a11y-panel .a11y-group__label {
	font-size: inherit !important; line-height: inherit !important; letter-spacing: normal !important; word-spacing: normal !important;
}
html.a11y-on:not(#a11y-boost) .a11y-panel .a11y-group__label { font-size: 16px !important; line-height: 1.3 !important; }
html.a11y-on:not(#a11y-boost) .a11y-panel button[aria-pressed="true"] {
	background-color: var(--a11y-fg) !important; color: var(--a11y-bg) !important;
}
html.a11y-on:not(#a11y-boost) .a11y-panel button[aria-pressed="true"] * { background-color: transparent !important; color: inherit !important; }
html.a11y-on:not(#a11y-boost) .a11y-panel .a11y-sample { font-family: Arial, sans-serif !important; font-size: 20px !important; }
html.a11y-on:not(#a11y-boost) .a11y-panel .a11y-sample[data-s="1"] { font-size: 17px !important; }
html.a11y-on:not(#a11y-boost) .a11y-panel .a11y-sample[data-s="3"] { font-size: 24px !important; }
/* образцы цветовых схем показываем в их собственных цветах */
html.a11y-on:not(#a11y-boost) .a11y-panel button.a11y-swatch[data-value="bw"] { background-color: #fff !important; color: #000 !important; border-color: #000 !important; }
html.a11y-on:not(#a11y-boost) .a11y-panel button.a11y-swatch[data-value="wb"] { background-color: #000 !important; color: #fff !important; border-color: #fff !important; }
html.a11y-on:not(#a11y-boost) .a11y-panel button.a11y-swatch[data-value="blue"] { background-color: #9dd1ff !important; color: #063462 !important; border-color: #063462 !important; }
html.a11y-on:not(#a11y-boost) .a11y-panel button.a11y-swatch[data-value="brown"] { background-color: #f7f3d6 !important; color: #4d4b43 !important; border-color: #4d4b43 !important; }
html.a11y-on:not(#a11y-boost) .a11y-panel button.a11y-swatch[data-value="green"] { background-color: #3b2716 !important; color: #a9e44d !important; border-color: #a9e44d !important; }
html.a11y-on:not(#a11y-boost) .a11y-panel button.a11y-swatch * { background-color: transparent !important; color: inherit !important; }
html.a11y-on:not(#a11y-boost) .a11y-panel button.a11y-swatch[aria-pressed="true"] { outline: 4px solid var(--a11y-fg) !important; outline-offset: 2px !important; }
html.a11y-on:not(#a11y-boost) .a11y-panel__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
html.a11y-on:not(#a11y-boost) .a11y-reading { outline: 4px dashed var(--a11y-fg) !important; outline-offset: 4px !important; }

@media (max-width: 720px) {
	html.a11y-on:not(#a11y-boost) .a11y-panel__in { gap: 12px 16px; padding: 10px 12px; }
	html.a11y-on:not(#a11y-boost) .a11y-group { flex: 1 1 100%; }
	html.a11y-on:not(#a11y-boost) .a11y-panel__actions { margin-left: 0; }
}

@media print {
	.a11y-panel, [data-a11y-toggle] { display: none !important; }
}
