/* Публичные документы: колонка для чтения.
   ==========================================================================

   ЗАЧЕМ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ ПРАВИЛО В landing.css. Лендинг - это блоки во всю
   ширину; здесь нужна ровно одна вещь, которой в системе нет, - узкая колонка
   длинного текста. Дописав её в зеркало лендинга, мы получили бы правило, которое
   действует на страницах, где его никто не ждёт.

   СВОИХ ЧИСЕЛ НЕТ: ширина, отступы, кегль и цвет берутся токенами. Единственное
   собственное число - мера строки, и она задана в `ch`, то есть в знаках, а не в
   точках: длина строки меряется буквами, и при смене гарнитуры это не разъедется.

   ПЛОСКОСТЬ ЛЕНДИНГА ЗДЕСЬ ЗАКОННА. Документ открывают из подвала сайта и из окна
   согласия Google, то есть человек приходит с лендинга и уходит туда же; белая
   плоскость кабинета посреди этого пути читалась бы как другой сайт. */

.sc-legal {
	padding-block: var(--sc-space-64, 64px) var(--sc-space-80, 80px);
	padding-inline: var(--container-pad, 24px);
	background: var(--sc-l-paper, var(--sc-paper));
}

.sc-legal__doc {
	margin-inline: auto;
	/* 68 знаков - верхняя граница удобной строки; ниже неё колонка просто уже. */
	max-inline-size: min(68ch, var(--container-max, 1120px));
	color: var(--sc-ink-900);
}

.sc-legal__h1 {
	margin: 0;
	font-family: var(--sc-font-display, inherit);
	font-size: var(--sc-text-40, 40px);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/* Дата - не подпись к заголовку, а первое, что ищет человек, вернувшийся
   перечитать документ. Поэтому она стоит отдельной строкой и приглушена, но не
   спрятана. */
.sc-legal__date {
	margin-block: var(--sc-space-12, 12px) var(--sc-space-40, 40px);
	color: var(--sc-ink-500);
	font-size: var(--sc-text-14, 14px);
}

/* Статья блога платформы приходит блоками ядра, без наших классов: тело статьи получает те же
   правила ТЕМИ ЖЕ селекторами, а не копией значений - второй хозяин меры разошёлся бы с первым. */
.sc-legal__h2,
.sc-legal__body h2 {
	margin-block: var(--sc-space-40, 40px) var(--sc-space-12, 12px);
	font-size: var(--sc-text-20, 20px);
	line-height: 1.3;
}

.sc-legal__doc p {
	margin-block: 0 var(--sc-space-16, 16px);
	font-size: var(--sc-text-16, 16px);
	line-height: 1.65;
}

.sc-legal__list,
.sc-legal__body ul,
.sc-legal__body ol {
	margin-block: 0 var(--sc-space-16, 16px);
	padding-inline-start: var(--sc-space-24, 24px);
	display: flex;
	flex-direction: column;
	gap: var(--sc-space-8, 8px);
}

.sc-legal__list li,
.sc-legal__body li {
	font-size: var(--sc-text-16, 16px);
	line-height: 1.65;
}

.sc-legal__body h3 {
	margin-block: var(--sc-space-32, 32px) var(--sc-space-8, 8px);
	font-size: var(--sc-text-18, 18px);
	line-height: 1.35;
}

/* Узкая ширина. Порог общий с остальным сайтом; своего брейкпоинта не заводится. */
@media (max-width: 700px) {
	.sc-legal {
		padding-block: var(--sc-space-40, 40px) var(--sc-space-56, 56px);
	}

	.sc-legal__h1 {
		font-size: var(--sc-text-32, 32px);
	}
}