/* Справка: раскрывающиеся вопросы.
   ==========================================================================

   ПОВЕРХ КОЛОНКИ ДОКУМЕНТА (`legal.css`), а не вместо неё. Ширина строки, поля, кегль и
   ритм - там; здесь только то, чего у документа нет: группы и раскрывашки. Вторая колонка
   со своим `max-inline-size` означала бы двух хозяев одной меры, и разошлись бы они при
   первой же правке - а расходится всегда та, которую реже открывают.

   РАСКРЫВАШКА РОДНАЯ (`<details>`), поэтому правил ей нужно мало: браузер сам держит
   состояние, обход клавиатурой и чтение диктором. Треугольник заменён своим знаком - он
   зеркалится письмом справа налево, а родной маркер в части браузеров не поворачивается. */

.sc-hc__lead {
	margin-block: 0 var(--sc-space-32, 32px);
	color: var(--sc-ink-500);
	font-size: var(--sc-text-lead, 18px);
	line-height: var(--sc-lh-lead, 1.55);
	text-wrap: pretty;
}

.sc-hc__grp {
	margin-block-start: var(--sc-space-48, 48px);
}

.sc-hc__h2 {
	margin-block: 0 var(--sc-space-16, 16px);
	font-size: var(--sc-text-h3, 20px);
	font-weight: var(--sc-fw-medium, 500);
	line-height: var(--sc-lh-h3, 1.3);
	color: var(--sc-ink-900);
}

.sc-hc__q {
	border-block-end: 1px solid var(--sc-hairline, rgba(0, 0, 0, 0.08));
}

.sc-hc__q:first-of-type {
	border-block-start: 1px solid var(--sc-hairline, rgba(0, 0, 0, 0.08));
}

.sc-hc__sum {
	display: flex;
	align-items: baseline;
	gap: var(--sc-space-12, 12px);
	padding-block: var(--sc-space-16, 16px);
	cursor: pointer;
	color: var(--sc-ink-900);
	font-size: var(--sc-text-body, 16px);
	line-height: var(--sc-lh-body, 1.6);
	list-style: none;
}

/* Родной маркер снимается в обоих видах записи: WebKit до сих пор рисует свой. */
.sc-hc__sum::-webkit-details-marker {
	display: none;
}

.sc-hc__sum::before {
	content: "+";
	flex: none;
	inline-size: 1ch;
	color: var(--sc-ink-500);
	font-size: var(--sc-text-lead, 18px);
	line-height: 1;
}

.sc-hc__q[open] .sc-hc__sum::before {
	content: "−";
}

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

.sc-hc__a {
	padding-block-end: var(--sc-space-16, 16px);
	/* Ответ выровнен по тексту вопроса, а не по знаку: иначе абзац уезжает влево и связь
	   между вопросом и ответом читается хуже. */
	padding-inline-start: calc(1ch + var(--sc-space-12, 12px));
}

.sc-hc__a p {
	margin-block: 0 var(--sc-space-12, 12px);
	color: var(--sc-ink-700, #3a3d42);
	font-size: var(--sc-text-body, 16px);
	line-height: var(--sc-lh-body, 1.65);
	text-wrap: pretty;
}

.sc-hc__a p:last-child {
	margin-block-end: 0;
}

.sc-hc__list {
	margin-block: 0 var(--sc-space-12, 12px);
	padding-inline-start: var(--sc-space-24, 24px);
	display: flex;
	flex-direction: column;
	gap: var(--sc-space-8, 8px);
	color: var(--sc-ink-700, #3a3d42);
}

.sc-hc__list li {
	font-size: var(--sc-text-body, 16px);
	line-height: var(--sc-lh-body, 1.6);
}

.sc-hc__ask {
	margin-block: var(--sc-space-48, 48px) 0;
	padding: var(--sc-space-16, 16px);
	border-radius: var(--sc-radius-md, 12px);
	background: var(--sc-surface-sunken, #f7f7f8);
	color: var(--sc-ink-900);
	font-size: var(--sc-text-body, 16px);
	text-wrap: pretty;
}

.sc-hc__date {
	margin-block: var(--sc-space-24, 24px) 0;
	color: var(--sc-ink-500);
	font-size: var(--sc-text-caption, 14px);
}

/* ---- Руководства (`inc/help-guides.php`): путь назад, кнопка экрана, список на хабе ---- */

.sc-hc__back {
	display: inline-flex;
	align-items: center;
	gap: var(--sc-space-8, 8px);
	margin-block-end: var(--sc-space-16, 16px);
	color: var(--sc-ink-500);
	font-size: var(--sc-text-caption, 14px);
	text-decoration: none;
}

.sc-hc__back:hover {
	color: var(--sc-ink-900);
}

.sc-hc__screen {
	margin-block: 0 var(--sc-space-32, 32px);
}

.sc-hc__guides {
	display: grid;
	gap: var(--sc-space-12, 12px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-hc__guide {
	display: block;
	padding: var(--sc-space-16, 16px);
	border: 1px solid var(--sc-hairline, rgba(0, 0, 0, 0.08));
	border-radius: var(--sc-radius-md, 12px);
	color: var(--sc-ink-900);
	text-decoration: none;
}

.sc-hc__guide:hover {
	border-color: var(--sc-ink-300, rgba(0, 0, 0, 0.24));
}

.sc-hc__guideT {
	display: block;
	font-weight: var(--sc-fw-medium, 500);
}

.sc-hc__guideP {
	display: block;
	margin-block-start: var(--sc-space-4, 4px);
	color: var(--sc-ink-500);
	font-size: var(--sc-text-caption, 14px);
}