/* Форма жалобы на сайт (SCRUM-812, ст. 16 DSA): третий документ шаблона `page-legal.php`.
   Свой файл и свой блок `.sc-report`: у блока стилей один файл-хозяин. Флажок - настоящий `input`,
   спрятанный под свой квадрат: форма работает без скрипта, а вид - наш, не системный. */

.sc-report {
	display: grid;
	gap: var(--sc-space-16, 16px);
	margin-block-start: var(--sc-space-24, 24px);
}

.sc-report__f {
	display: grid;
	gap: var(--sc-space-8, 8px);
	font-size: var(--sc-text-body-sm, 14px);
	font-weight: var(--sc-fw-medium, 500);
}

.sc-report__f input,
.sc-report__f select,
.sc-report__f textarea {
	inline-size: 100%;
	min-block-size: 44px;
	padding: var(--sc-space-8, 8px) var(--sc-space-12, 12px);
	border: var(--sc-rule-w-hair) solid var(--sc-hairline);
	border-radius: var(--sc-radius-md, 8px);
	background: var(--sc-plane, #fff);
	color: var(--sc-text);
	font: inherit;
	font-weight: var(--sc-fw-text, 400);
}

.sc-report__f input:focus-visible,
.sc-report__f select:focus-visible,
.sc-report__f textarea:focus-visible {
	outline: 2px solid var(--sc-focus-ring);
	outline-offset: 0;
}

.sc-report__check {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--sc-space-8, 8px);
	font-size: var(--sc-text-body-sm, 14px);
	cursor: pointer;
}

.sc-report__check input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
}

.sc-report__box {
	display: inline-block;
	flex: none;
	inline-size: 18px;
	block-size: 18px;
	margin-block-start: 2px;
	border: 1.5px solid var(--sc-ink-950, #111);
	border-radius: 4px;
	background: var(--sc-plane, #fff);
}

.sc-report__check input:checked + .sc-report__box {
	background: var(--sc-ink-950, #111);
	box-shadow: inset 0 0 0 3px var(--sc-plane, #fff);
}

.sc-report__check input:focus-visible + .sc-report__box {
	outline: 2px solid var(--sc-focus-ring);
	outline-offset: 2px;
}

.sc-report__go {
	justify-self: start;
	min-block-size: 44px;
	padding-inline: var(--sc-space-24, 24px);
	border: 0;
	border-radius: var(--sc-radius-pill, 999px);
	background: var(--sc-ink-950, #111);
	color: var(--sc-plane, #fff);
	font: inherit;
	font-weight: var(--sc-fw-medium, 500);
	cursor: pointer;
}

.sc-report__go:focus-visible {
	outline: 2px solid var(--sc-focus-ring);
	outline-offset: 2px;
}

.sc-report__trap {
	position: absolute;
	inset-inline-start: -10000px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}

.sc-report__ok,
.sc-report__err {
	padding: var(--sc-space-12, 12px) var(--sc-space-16, 16px);
	border-radius: var(--sc-radius-md, 8px);
	font-size: var(--sc-text-body-sm, 14px);
}

.sc-report__ok {
	background: var(--sc-quiet-hover, rgba(0, 0, 0, 0.04));
}

.sc-report__err {
	color: var(--sc-danger, #b42318);
	background: var(--sc-quiet-hover, rgba(0, 0, 0, 0.04));
}