/* Версия для слабовидящих: панель управления + режимы отображения html.special-* */

/* ---------- Панель ---------- */

.special-version-panel {
	display: none;
	position: fixed;
	/* right: var(--space-2x, 1rem); */
	left: var(--space-2x, 1rem);
	bottom: var(--space-2x, 1rem);
	z-index: 10000;
	width: 320px;
	max-width: calc(100vw - 2rem);
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	background: var(--color-white, #fff);
	color: var(--color-gray-950, #000);
	border-radius: var(--radius-16, 1rem);
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
	padding: var(--space-4, 1rem);
	font-family: var(--body-font-family, sans-serif);
	font-size: 14px;
	line-height: 1.4;
}

.special-version-panel i,
.special-version-panel span {
	color: inherit;
}

.special-version-panel div,
.special-version-panel p,
.special-version-panel table {
	font-size: unset;
}

.special-version-panel .special-version-panel__close {
	height: unset;
}

html.special .special-version-panel {
	display: block;
}

html.special-collapsed .special-version-panel {
	display: none !important;
}

/* Кнопка не должна скрываться: повторный клик по ней выключает режим (см. js/special-version.js)
html.special .specialButton {
	display: none !important;
}
*/

/* ---------- Плавающая кнопка (свёрнутое состояние) ---------- */

.special-version-fab {
	display: none;
	position: fixed;
	/* right: var(--space-2x, 1rem); */
	left: var(--space-2x, 1rem);
	bottom: var(--space-2x, 1rem);
	z-index: 10000;
	flex-direction: column;
	gap: var(--space-1, 0.25rem);
}

html.special-collapsed .special-version-fab {
	display: flex;
}

.special-version-fab__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: var(--color-gray-950, #000);
	color: var(--color-white, #fff);
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
	cursor: pointer;
	padding: 0;
}

.special-version-fab__btn:hover {
	opacity: 0.9;
}

.special-version-fab__btn:focus-visible {
	outline: 2px solid var(--color-blue-500, #328fe6);
	outline-offset: 2px;
}

.special-version-fab__btn--danger {
	background: var(--color-red-600, #cc3648);
}

.special-version-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-3, 0.75rem);
}

.special-version-panel__title {
	font-weight: 700;
	font-size: 15px;
}

.special-version-panel__close {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: inherit;
}

.special-version-group {
	margin-bottom: var(--space-3, 0.75rem);
}

.special-version-group--actions {
	display: flex;
	gap: var(--space-2, 0.5rem);
}

.special-version-group__label {
	display: block;
	font-weight: 600;
	margin-bottom: var(--space-1, 0.25rem);
	font-size: 13px;
}

.special-version-group__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1, 0.25rem);
}

.special-version-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 10px;
	border: 1px solid var(--color-gray-300, #cdcdcd);
	border-radius: var(--radius-8, 0.5rem);
	background: var(--color-gray-50, #f2f2f2);
	color: inherit;
	cursor: pointer;
	font-size: 13px;
}

.special-version-btn:hover {
	border-color: var(--color-gray-700, #676767);
}

.special-version-btn:focus-visible {
	outline: 2px solid var(--color-blue-500, #328fe6);
	outline-offset: 2px;
}

.special-version-btn[aria-pressed="true"] {
	background: var(--color-gray-950, #000);
	color: var(--color-white, #fff);
	border-color: var(--color-gray-950, #000);
}

.special-version-btn--wide {
	flex: 1 1 auto;
}

.special-version-btn--color {
	position: relative;
}

.special-version-btn--color-1 {
	background: #fff;
	color: #000;
}

.special-version-btn--color-2 {
	background: #000;
	color: #fff;
}

.special-version-btn--color-3 {
	background: #eaf4fc;
	color: #0b345b;
}

.special-version-btn--color-4 {
	background: #f5ecdd;
	color: #4a2e1a;
}

.special-version-btn--color-5 {
	background: #2b1d14;
	color: #8fd694;
}

.special-version-advanced hr {
	border: none;
	border-top: 1px solid var(--color-gray-200, #ddd);
	margin: var(--space-3, 0.75rem) 0;
}

/* ---------- Скрытые изображения ---------- */

html.special-images-0 img[data-special-processed] {
	background: var(--color-gray-100, #eee);
	min-height: 24px;
}

/* ---------- Размер шрифта ---------- */

html.special-font-size-1 {
	font-size: 100%;
}

html.special-font-size-2 {
	font-size: 120%;
}

html.special-font-size-3 {
	font-size: 145%;
}

/* ---------- Шрифт ---------- */

html.special-font-family-1 body,
html.special-font-family-1 body * {
	font-family: Arial, Helvetica, sans-serif !important;
}

html.special-font-family-2 body,
html.special-font-family-2 body * {
	font-family: "Times New Roman", Times, serif !important;
}

/* ---------- Межстрочный интервал ---------- */

html.special-line-height-1 body,
html.special-line-height-1 body * {
	line-height: 1.4 !important;
}

html.special-line-height-2 body,
html.special-line-height-2 body * {
	line-height: 1.8 !important;
}

html.special-line-height-3 body,
html.special-line-height-3 body * {
	line-height: 2.2 !important;
}

/* ---------- Межбуквенный интервал ---------- */

html.special-letter-spacing-1 body,
html.special-letter-spacing-1 body * {
	letter-spacing: normal !important;
}

html.special-letter-spacing-2 body,
html.special-letter-spacing-2 body * {
	letter-spacing: 0.05em !important;
}

html.special-letter-spacing-3 body,
html.special-letter-spacing-3 body * {
	letter-spacing: 0.12em !important;
}

/*
 * Цветовые схемы переопределяют семантические CSS-переменные
 * (images/variables/styles/global.css), от которых зависит основная
 * вёрстка сайта — большая часть компонентов перекрасится автоматически.
 * Дополнительно форсируем фон/цвет на body и ссылках как страховку для
 * мест, где используются захардкоженные цвета вместо переменных.
 */

html.special-color-1 {
	--color-text-primary: #000000;
	--color-text-secondary: #000000;
	--color-bg-1: #ffffff;
	--color-bg-2: #ffffff;
	--color-bg-3: #ffffff;
	--color-bg-4: #ffffff;
	--color-bg-5: #ffffff;
	--primary: #000000;
	--on-primary: #ffffff;
	--outline: #000000;
}

html.special-color-2 {
	--color-text-primary: #ffffff;
	--color-text-secondary: #ffffff;
	--color-bg-1: #000000;
	--color-bg-2: #000000;
	--color-bg-3: #000000;
	--color-bg-4: #000000;
	--color-bg-5: #000000;
	--primary: #ffffff;
	--on-primary: #000000;
	--outline: #ffffff;
}

html.special-color-3 {
	--color-text-primary: #0b345b;
	--color-text-secondary: #0b345b;
	--color-bg-1: #eaf4fc;
	--color-bg-2: #eaf4fc;
	--color-bg-3: #eaf4fc;
	--color-bg-4: #eaf4fc;
	--color-bg-5: #eaf4fc;
	--primary: #0b345b;
	--on-primary: #eaf4fc;
	--outline: #0b345b;
}

html.special-color-4 {
	--color-text-primary: #4a2e1a;
	--color-text-secondary: #4a2e1a;
	--color-bg-1: #f5ecdd;
	--color-bg-2: #f5ecdd;
	--color-bg-3: #f5ecdd;
	--color-bg-4: #f5ecdd;
	--color-bg-5: #f5ecdd;
	--primary: #4a2e1a;
	--on-primary: #f5ecdd;
	--outline: #4a2e1a;
}

html.special-color-5 {
	--color-text-primary: #8fd694;
	--color-text-secondary: #8fd694;
	--color-bg-1: #2b1d14;
	--color-bg-2: #2b1d14;
	--color-bg-3: #2b1d14;
	--color-bg-4: #2b1d14;
	--color-bg-5: #2b1d14;
	--primary: #8fd694;
	--on-primary: #2b1d14;
	--outline: #8fd694;
}

html[class*="special-color-"] body {
	background: var(--color-bg-5) !important;
	color: var(--color-text-primary) !important;
}

html[class*="special-color-"] body a {
	color: var(--primary) !important;
}