/*
 * Виджет доступности: значок и панель.
 *
 * Стили не должны течь ни в одну сторону. Наружу — потому что мы задаём только
 * свои классы с префиксом `onsite-a11yw` и ни одного тега. Внутрь — потому что чужая
 * тема любит раздавать правила по `button`, `ul`, `li`, `h2`, и без сброса
 * панель развалится на первом же сайте с самописной темой.
 *
 * Цвета заданы своими переменными на корне виджета: тема клиента их не
 * переопределит, а нам не придётся угадывать её палитру.
 */

.onsite-a11yw {
	--onsite-a11yw-fon: #ffffff;
	--onsite-a11yw-tekst: #1d2327;
	--onsite-a11yw-ramka: #8c8f94;
	--onsite-a11yw-akcent: #1d4e78;
	--onsite-a11yw-akcent-tekst: #ffffff;
	--onsite-a11yw-tenj: 0 2px 12px rgba( 0, 0, 0, .28 );

	position: fixed;
	right: 20px;
	bottom: 20px;
	/* Поверх содержимого, но не поверх всего на свете: липкие шапки тем обычно
	   сидят на 100…1000, модалки выше. Виджет не должен закрывать меню. */
	z-index: 99000;
	isolation: isolate;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: var( --onsite-a11yw-tekst );
	direction: ltr;
	text-align: left;
}

/* Сброс наследства чужой темы: всё, что она могла раздать по тегам. */
.onsite-a11yw button,
.onsite-a11yw ul,
.onsite-a11yw li,
.onsite-a11yw h2,
.onsite-a11yw p {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	list-style: none;
	text-decoration: none;
	min-height: 0;
	min-width: 0;
	width: auto;
	float: none;
}

.onsite-a11yw .onsite-a11yw-knopka {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 48×48 — размер пальца по WCAG 2.2 AA (24 минимум, 44 рекомендация).
	   Виджету доступности стыдно иметь мишень меньше нормы. */
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var( --onsite-a11yw-akcent );
	color: var( --onsite-a11yw-akcent-tekst );
	box-shadow: var( --onsite-a11yw-tenj );
	cursor: pointer;
}

.onsite-a11yw .onsite-a11yw-knopka:hover {
	background: #163d5e;
}

/* Видимый фокус обязателен: без него виджет непроходим с клавиатуры, а это
   ровно то нарушение, которое плагин ищет у других (WCAG 2.4.7). */
.onsite-a11yw .onsite-a11yw-knopka:focus-visible,
.onsite-a11yw .onsite-a11yw-perekluchatel:focus-visible,
.onsite-a11yw .onsite-a11yw-zakryt:focus-visible {
	outline: 3px solid #2271b1;
	outline-offset: 2px;
}

.onsite-a11yw .onsite-a11yw-panel {
	position: absolute;
	right: 0;
	bottom: 60px;
	width: 260px;
	max-width: calc( 100vw - 40px );
	box-sizing: border-box;
	padding: 16px;
	border: 1px solid var( --onsite-a11yw-ramka );
	border-radius: 8px;
	background: var( --onsite-a11yw-fon );
	box-shadow: var( --onsite-a11yw-tenj );
}

/* Атрибут hidden сам по себе не прячет: любое правило с display перебивает
   его — на этом уже спотыкались в панели плагина. */
.onsite-a11yw [hidden] {
	display: none !important;
}

.onsite-a11yw .onsite-a11yw-zagolovok {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 12px;
}

.onsite-a11yw .onsite-a11yw-punkt + .onsite-a11yw-punkt {
	margin-top: 6px;
}

.onsite-a11yw .onsite-a11yw-perekluchatel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid var( --onsite-a11yw-ramka );
	border-radius: 6px;
	background: var( --onsite-a11yw-fon );
	cursor: pointer;
	text-align: left;
}

.onsite-a11yw .onsite-a11yw-perekluchatel:hover {
	border-color: var( --onsite-a11yw-akcent );
}

/* Состояние показано НЕ одним цветом: рамка плюс галочка. По одному цвету
   человек с нарушением цветовосприятия включённый режим не отличит. */
.onsite-a11yw .onsite-a11yw-perekluchatel[aria-checked="true"] {
	border-color: var( --onsite-a11yw-akcent );
	box-shadow: inset 0 0 0 1px var( --onsite-a11yw-akcent );
}

.onsite-a11yw .onsite-a11yw-galka {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid var( --onsite-a11yw-ramka );
	border-radius: 4px;
}

.onsite-a11yw .onsite-a11yw-perekluchatel[aria-checked="true"] .onsite-a11yw-galka {
	border-color: var( --onsite-a11yw-akcent );
	background: var( --onsite-a11yw-akcent );
	/* Галочка нарисована рамкой внутри квадрата — без картинок и шрифтов. */
	box-shadow: inset 0 0 0 2px var( --onsite-a11yw-fon ), inset 0 0 0 4px var( --onsite-a11yw-akcent );
}

.onsite-a11yw .onsite-a11yw-snoska {
	margin-top: 12px;
	font-size: 12px;
	line-height: 1.35;
	color: #50575e;
}

.onsite-a11yw .onsite-a11yw-zakryt {
	margin-top: 12px;
	width: 100%;
	min-height: 40px;
	padding: 8px 10px;
	border: 1px solid var( --onsite-a11yw-ramka );
	border-radius: 6px;
	background: var( --onsite-a11yw-fon );
	cursor: pointer;
}

.onsite-a11yw .onsite-a11yw-zakryt:hover {
	border-color: var( --onsite-a11yw-akcent );
}

/* Тёмная тема сайта: панель не должна светить белым прямоугольником в ночи. */
@media ( prefers-color-scheme: dark ) {
	.onsite-a11yw {
		--onsite-a11yw-fon: #1d2327;
		--onsite-a11yw-tekst: #f0f0f1;
		--onsite-a11yw-ramka: #6b7075;
		--onsite-a11yw-akcent: #72aee6;
		--onsite-a11yw-akcent-tekst: #101517;
	}

	/* Вес как у светлых правил выше (два класса), иначе тёмные проигрывают им:
	   так сноска оставалась серой на тёмном (2.17:1), а значок под мышью
	   темнел до тёмной иконки на тёмно-синем (1.63:1). */
	.onsite-a11yw .onsite-a11yw-snoska {
		color: #c3c4c7;
	}

	.onsite-a11yw .onsite-a11yw-knopka:hover {
		background: #9ec9ea;
	}
}

/*
 * Режим высокой контрастности (Windows, forced-colors). Система сама
 * перекрашивает фон, текст и рамки в свою палитру и стирает тени. Без этого
 * блока значок терял круг (граница обнулена сбросом, фон равен фону страницы),
 * а «вкл» и «выкл» у переключателей становились одинаковыми: галочка
 * нарисована фоном и тенью, а их режим убирает. Цвета здесь только
 * системные — палитру выбирает человек, а не мы.
 */
@media ( forced-colors: active ) {
	.onsite-a11yw .onsite-a11yw-knopka {
		border: 2px solid ButtonText;
	}

	.onsite-a11yw .onsite-a11yw-knopka:focus-visible,
	.onsite-a11yw .onsite-a11yw-perekluchatel:focus-visible,
	.onsite-a11yw .onsite-a11yw-zakryt:focus-visible {
		outline-color: Highlight;
	}

	/* Включённый режим — настоящая галочка-фигура из рамок: форма, а не цвет. */
	.onsite-a11yw .onsite-a11yw-galka {
		position: relative;
	}

	.onsite-a11yw .onsite-a11yw-perekluchatel[aria-checked="true"] .onsite-a11yw-galka::after {
		content: "";
		position: absolute;
		left: 6px;
		top: 2px;
		width: 5px;
		height: 10px;
		border: solid ButtonText;
		border-width: 0 2px 2px 0;
		transform: rotate( 45deg );
	}
}

/* Человек попросил меньше движения — не двигаемся. */
@media ( prefers-reduced-motion: reduce ) {
	.onsite-a11yw * {
		transition: none !important;
		animation: none !important;
	}
}