/* ============================================================
   Блок «Юридический документ» — legal-doc

   Регистр — ЧТЕНИЕ, а не витрина: мера строки, вертикальный ритм,
   волосяные линейки. Ни карточек, ни заливок, ни теней, ни радиусов.
   Единственная «плитка» на весь блок — фон ячеек шапки таблицы, и та
   тонирована из --ctx-accent, а не задана цветом.

   ЦВЕТ — ТОЛЬКО ТОКЕНЫ --ctx-* / --macro-* (style.css, раздел
   «КОНТЕКСТНАЯ ПАЛИТРА»). Ни одного hex в файле; обе темы и палитра
   страницы кейса работают сами, ветки «если тёмная» нет.

   ШИРИНА — ВЕСЬ .container СТРАНИЦЫ (решение владельца 10.09.2026).
   ⚠️ ЗДЕСЬ БЫЛА МЕРА ЧТЕНИЯ --case-col (46rem, 736px) с обоснованием
   «длинный текст просит узкую колонку». Обоснование снято не потому, что
   я его переоценил, а РЕШЕНИЕМ ВЛАДЕЛЬЦА: колонка стояла прижатой влево
   внутри .container (1320px на 1440), и справа пустовала половина ширины.
   Документ теперь набирается во всю ширину контейнера — той же, на которой
   стоят соседние секции сайта (.author-card__inner на «Студии»: 60…1380,
   содержимое 72…1368 на 1440).
   Цена решения замерена и владельцу известна: самая длинная строка тела
   выросла с 89 до 158 знаков (1440, RU; на EN — со 109 до 187). Считано по
   реальным line box'ам, а не прикидкой «ширина / кегль». Своих чисел ширины
   в файле по-прежнему нет — ширину целиком задаёт .container Bootstrap.

   ⚠️ НИ ОДНОГО counter-*. Нумерация пунктов («1.1.», «4.2.») приходит
   из wysiwyg текстом и не пересчитывается — см. шапку legal-doc.php.
   Автонумерация сломала бы внешние ссылки на пункты.

   ⚠️ Селекторы — минимум из двух классов или потомки .legal-doc__body.
   Голых `table`, `h2`, `ul` в файле быть не может: CSS блока грузится на
   всю страницу и покрасил бы чужую разметку.
   ============================================================ */

.legal-doc {
	/* Акцент текстом, а не заливкой: заливочный --ctx-accent в тёмной теме
	   (#d33154) даёт к фону 3.72 — этого мало для мелкой типографики.
	   Та же тройка фолбэков, что в case-facts-grid и stages: на кейсе —
	   акцент кейса, вне кейса — «текстовая» светлота фирменного. */
	--legal-accent-text: var(--case-accent-text, var(--macro-accent-text, var(--ctx-accent)));

	/* Вертикальный ритм тела. Один множитель на весь документ: расстояние
	   между абзацами, до/после списка, до/после таблицы. */
	--legal-rhythm: 1rem;

	/* Отступ якоря из-под фиксированной ленты. --top-plate-space — нижняя
	   кромка ленты в координатах окна (style.css :root, 52/56px); плюс
	   воздух, чтобы заголовок не прилипал к ленте снизу.
	   ⚠️ Без этого переход по ссылке из оглавления кладёт заголовок ПОД
	   ленту, и раздел выглядит начинающимся со второго абзаца. */
	--legal-anchor-offset: calc(var(--top-plate-space, 3.5rem) + 1.25rem);
}

@media (min-width: 768px) {
	.legal-doc {
		--legal-rhythm: 1.125rem;
	}
}

/* Внутренняя обёртка ширину БОЛЬШЕ НЕ ОГРАНИЧИВАЕТ: единственная мера
   документа — .container снаружи (см. шапку файла, решение 10.09.2026).
   Сам блок обёртки оставлен: он держит вертикальный ритм шапки/оглавления/
   тела и остаётся точкой, где мера задавалась бы, если её когда-нибудь
   вернут. max-width объявлен явно, а не «просто не задан», — чтобы правило
   темы или страницы кейса не сузило документ молча. */
.legal-doc .legal-doc__inner {
	max-width: none;
}

/* ------------------------------------------------------------------
   ШАПКА ДОКУМЕНТА
   ------------------------------------------------------------------ */

.legal-doc .legal-doc__head {
	margin-bottom: calc(var(--legal-rhythm) * 2);
}

.legal-doc .legal-doc__title {
	/* Кегль ниже витринного display-*: это заголовок документа, а не
	   первого экрана. Нижняя граница clamp совпадает с h2 темы, верхняя
	   держит различие с разделами. */
	font-size: clamp(1.625rem, 1.1rem + 2.2vw, 2.5rem);
	line-height: 1.15;
	margin: 0 0 var(--legal-rhythm);
	color: var(--ctx-ink);
	/* Длинный юридический заголовок в 2–3 строки не должен оставлять
	   одинокое слово в последней. */
	text-wrap: balance;
}

/* Выходные данные. <dl> с парами внутри .legal-doc__meta-item: обёртка
   нужна, чтобы пара «подпись + значение» переносилась целиком, а не
   разрывалась между строками флекса. */
.legal-doc .legal-doc__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem calc(var(--legal-rhythm) * 1.5);
	margin: 0;
	padding: var(--legal-rhythm) 0 0;
	border-top: 1px solid var(--ctx-border);
	font-size: 0.875rem;
	line-height: 1.45;
}

.legal-doc .legal-doc__meta-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.375rem;
	/* На 375 пары встают в столбик; на 576+ идут в строку, сколько влезет. */
	flex: 1 1 100%;
}

@media (min-width: 576px) {
	.legal-doc .legal-doc__meta-item {
		flex: 0 1 auto;
	}
}

.legal-doc .legal-doc__meta-label {
	margin: 0;
	font-weight: 400;
	color: var(--ctx-muted);
	/* Капс задаёт CSS, в поле лежит человеческая подпись: так её читает
	   скринридер и так её правит редактор. */
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.75rem;
}

.legal-doc .legal-doc__meta-value {
	margin: 0;
	color: var(--ctx-ink);
	font-weight: 600;
}

.legal-doc .legal-doc__meta-value time {
	/* <time> — контейнер машинной даты, визуально это тот же текст. */
	color: inherit;
}

/* Преамбула — крупнее тела, но не «лид витрины»: документ, а не оффер. */
.legal-doc .legal-doc__lede {
	margin-bottom: calc(var(--legal-rhythm) * 2);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ctx-ink);
}

.legal-doc .legal-doc__lede > p {
	margin: 0 0 var(--legal-rhythm);
}

.legal-doc .legal-doc__lede > p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
   ОГЛАВЛЕНИЕ

   <details> — нативное сворачивание, JS у блока нет вовсе. Без CSS это
   всё ещё рабочий список ссылок, поэтому здесь только оформление.
   ------------------------------------------------------------------ */

.legal-doc .legal-doc__toc {
	margin-bottom: calc(var(--legal-rhythm) * 2.5);
	padding: var(--legal-rhythm) 0;
	border-top: 1px solid var(--ctx-border);
	border-bottom: 1px solid var(--ctx-border);
}

.legal-doc .legal-doc__toc-summary {
	/* list-style на <summary> — тот самый треугольник; убираем оба
	   написания, свою стрелку рисуем ::after, чтобы она слушалась цвета. */
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	/* Тап-таргет: сама подпись мельче 44px, область нажатия — нет. */
	min-height: 44px;
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ctx-muted);
	touch-action: manipulation;
}

.legal-doc .legal-doc__toc-summary::-webkit-details-marker {
	display: none;
}

.legal-doc .legal-doc__toc-summary::after {
	content: '';
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-0.125rem, -0.125rem);
	transition: transform 0.18s ease;
}

.legal-doc .legal-doc__toc[open] > .legal-doc__toc-summary::after {
	transform: rotate(-135deg) translate(-0.125rem, -0.125rem);
}

@media (prefers-reduced-motion: reduce) {
	.legal-doc .legal-doc__toc-summary::after {
		transition: none;
	}
}

.legal-doc .legal-doc__toc-list {
	/* list-style: none — потому что номер раздела уже стоит в тексте
	   заголовка («1. Общие положения»). Маркер дал бы вторую нумерацию. */
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	font-size: 0.9375rem;
	line-height: 1.4;
}

@media (min-width: 768px) {
	.legal-doc .legal-doc__toc-list {
		/* Колонки вместо пятнадцати строк: оглавление обязано помещаться
		   в экран целиком, иначе им не пользуются.
		   column-count, а не grid: строки разной длины, а колонки должны
		   уравняться по высоте сами. */
		column-count: 2;
		column-gap: 2rem;
	}
}

@media (min-width: 1200px) {
	.legal-doc .legal-doc__toc-list {
		/* ⚠️ ТРЕТЬЯ КОЛОНКА — СЛЕДСТВИЕ ПЕРЕХОДА НА ПОЛНУЮ ШИРИНУ
		   (10.09.2026). В мере --case-col двух колонок хватало: они были
		   по ~350px. На всю ширину контейнера те же две растянулись бы до
		   ~630px каждая — две узкие полосы текста посреди пустоты, ровно
		   то, на что владелец и жаловался.
		   Почему три, а не четыре: самый длинный пункт документа — 68
		   знаков («4. Категории субъектов и перечень обрабатываемых
		   персональных данных»). Три колонки на 1440 дают по ~410px, и он
		   ложится в две строки; четыре дали бы ~300px и три строки на
		   пункт, то есть рваный список. Число breakpoint'ов бутстраповское
		   (xl), своих порогов не заводим. */
		column-count: 3;
	}
}

.legal-doc .legal-doc__toc-item {
	/* Пункт не должен разрываться между колонками. */
	break-inside: avoid;
	margin: 0 0 0.25rem;
}

.legal-doc .legal-doc__toc-link {
	display: inline-block;
	padding: 0.1875rem 0;
	color: var(--ctx-ink);
	text-decoration: none;
	touch-action: manipulation;
}

/* Гейт наведения — `any-hover`, а не `hover`: см. канон «ГЕЙТ НАВЕДЕНИЯ»
   в themes/bootcommerce-child-main/style.css. Коротко: `hover`/`pointer`
   спрашивают про ПЕРВИЧНЫЙ указатель, и планшет с подключённой мышью
   отвечает на них «нет». Гасить через `(any-hover: none)` НЕЛЬЗЯ — на
   гибриде он истинен одновременно с `(any-hover: hover)`. */
@media (any-hover: hover) {
	.legal-doc .legal-doc__toc-link:hover {
		color: var(--legal-accent-text);
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
}

/* ⚠️ !important ВЫНУЖДЕННЫЙ, не небрежность. Общее правило темы
   `.dark-theme a:not(.btn):not(.page-link):not(.nav-link):not(.dropdown-item):not(.case-card__link)`
   (style.css) из-за цепочки :not() имеет специфичность (0,5,1) — наши (0,2,0)
   и (0,3,0) ему проигрывают. Без этих двух правил блок разъезжается по темам:
   замер 09.09.2026 на стенде — в светлой ссылка оглавления rgb(39,40,41)
   (--ctx-ink, как задумано), в тёмной rgb(231,141,161) (акцент темы). Пятнадцать
   строк оглавления акцентом — это уже не оглавление, а пятнадцать призывов
   к действию. Тот же приём и с тем же обоснованием — у .studio-link
   (studio-intro.css) и в самой теме (style.css, .case-nav__label:
   `color: var(--ctx-ink) !important` с той же пометкой про (0,5,1)). */
body.dark-theme .legal-doc .legal-doc__toc-link {
	color: var(--ctx-ink) !important;
}

@media (any-hover: hover) {
	body.dark-theme .legal-doc .legal-doc__toc-link:hover {
		color: var(--legal-accent-text) !important;
	}
}

/* ------------------------------------------------------------------
   ТЕЛО ДОКУМЕНТА

   Приходит одним куском HTML из wysiwyg, поэтому правила висят на
   потомках .legal-doc__body — контроля над классами внутри нет.
   ------------------------------------------------------------------ */

.legal-doc .legal-doc__body {
	color: var(--ctx-ink);
	font-size: 1rem;
	line-height: 1.65;
	/* Длинный e-mail, реестровый номер, ссылка без пробелов не должны
	   выпирать за меру. */
	overflow-wrap: break-word;
}

.legal-doc .legal-doc__body > *:first-child {
	margin-top: 0;
}

.legal-doc .legal-doc__body > *:last-child {
	margin-bottom: 0;
}

.legal-doc .legal-doc__body p {
	margin: 0 0 var(--legal-rhythm);
}

/* Разделы. scroll-margin-top — условие работы якорей, см. переменную
   --legal-anchor-offset выше. */
.legal-doc .legal-doc__body h2,
.legal-doc .legal-doc__body h3,
.legal-doc .legal-doc__body h4 {
	scroll-margin-top: var(--legal-anchor-offset);
	color: var(--ctx-ink);
	text-wrap: balance;
}

.legal-doc .legal-doc__body h2 {
	margin: calc(var(--legal-rhythm) * 2.5) 0 var(--legal-rhythm);
	padding-top: var(--legal-rhythm);
	/* Волосяная линейка вместо плашки: единственный разделитель разделов. */
	border-top: 1px solid var(--ctx-border);
	font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
	line-height: 1.25;
}

.legal-doc .legal-doc__body h3 {
	margin: calc(var(--legal-rhythm) * 1.75) 0 calc(var(--legal-rhythm) * 0.5);
	font-size: 1.0625rem;
	line-height: 1.35;
	color: var(--legal-accent-text);
}

.legal-doc .legal-doc__body h4 {
	margin: calc(var(--legal-rhythm) * 1.5) 0 calc(var(--legal-rhythm) * 0.5);
	font-size: 1rem;
	font-weight: 600;
}

.legal-doc .legal-doc__body ul,
.legal-doc .legal-doc__body ol {
	margin: 0 0 var(--legal-rhythm);
	padding-left: 1.25rem;
}

.legal-doc .legal-doc__body li {
	margin-bottom: 0.375rem;
}

.legal-doc .legal-doc__body li:last-child {
	margin-bottom: 0;
}

.legal-doc .legal-doc__body li > ul,
.legal-doc .legal-doc__body li > ol {
	margin-top: 0.375rem;
}

.legal-doc .legal-doc__body a {
	color: var(--legal-accent-text);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
	touch-action: manipulation;
}

/* То же правило темы (0,5,1) перекрасило бы ссылку в тексте в
   --macro-accent-text. Вне кейса это почти тот же оттенок, а НА СТРАНИЦЕ
   КЕЙСА — чужой: акцент проекта вместо акцента записи, то есть ровно то
   нарушение контекстной палитры, ради которого --case-accent-text и заведён. */
body.dark-theme .legal-doc .legal-doc__body a {
	color: var(--legal-accent-text) !important;
}

@media (any-hover: hover) {
	.legal-doc .legal-doc__body a:hover {
		text-decoration-thickness: 2px;
	}
}

.legal-doc .legal-doc__body strong,
.legal-doc .legal-doc__body b {
	font-weight: 600;
	color: var(--ctx-ink);
}

/* Разделитель разделов из `---`. Своей толщины не заводим — та же
   волосяная линейка, что у h2. */
.legal-doc .legal-doc__body hr {
	height: 0;
	margin: calc(var(--legal-rhythm) * 2) 0;
	border: 0;
	border-top: 1px solid var(--ctx-border);
	opacity: 1;
}

/* Моноширинный фрагмент — в документе им набраны домены и плейсхолдеры
   реквизитов ({{ИНН}}). Тонировка из акцента, а не свой серый: на
   странице кейса подложка обязана слушаться палитры записи. */
.legal-doc .legal-doc__body code,
.legal-doc .legal-doc__body kbd {
	padding: 0.075em 0.35em;
	border-radius: 0.25rem;
	background-color: color-mix(in srgb, var(--ctx-accent) 10%, transparent);
	color: inherit;
	font-size: 0.9375em;
}

@supports not (color: color-mix(in srgb, red, blue)) {
	.legal-doc .legal-doc__body code,
	.legal-doc .legal-doc__body kbd {
		background-color: var(--ctx-surface);
	}
}

.legal-doc .legal-doc__body blockquote {
	margin: var(--legal-rhythm) 0;
	padding-left: 1rem;
	border-left: 2px solid var(--ctx-border);
	color: var(--ctx-muted);
}

/* ------------------------------------------------------------------
   ТАБЛИЦА РЕКВИЗИТОВ

   Обёртку .table-responsive ставит PHP вокруг каждой <table> из wysiwyg
   (см. legal-doc.php). Ширину таблице НЕ задаём: узкая «параметр —
   значение» обязана переноситься по словам, а не ехать полосой
   прокрутки. Обёртка — страховка на случай, когда перенос невозможен.
   ------------------------------------------------------------------ */

.legal-doc .legal-doc__scroller {
	margin: calc(var(--legal-rhythm) * 1.5) 0;
	/* Кольцо фокуса у прокручиваемой области (tabindex="0") — снаружи,
	   иначе оно режется собственным overflow контейнера. */
	--focus-ring-offset: 2px;
}

.legal-doc .legal-doc__body table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.legal-doc .legal-doc__body th,
.legal-doc .legal-doc__body td {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--ctx-border);
	text-align: left;
	vertical-align: top;
}

/* Реквизиты — это адреса, ИНН и почта: длинные неразрывные куски. Ломаем их
   внутри ячейки, а не растягиваем таблицу. ⚠️ ТОЛЬКО td: сужено 10.09.2026,
   у шапки поведение обратное — см. следующее правило. */
.legal-doc .legal-doc__body td {
	overflow-wrap: anywhere;
}

/* ⚠️ ШАПКА ТАБЛИЦЫ ЛОМАТЬСЯ ПОСРЕДИ СЛОВА НЕ ДОЛЖНА — и это не косметика,
   а условие того, чтобы автоматическая раскладка колонок вообще работала.
   Замерено 10.09.2026: РОДИТЕЛЬСКАЯ ТЕМА объявляет `body { word-break:
   break-word }` (bootscore-main/style.css:173), и это наследуется каждой
   ячейкой. Следствие — min-content ячейки схлопывается: у «Срок хранения»
   он 11px при ширине самого слова «хранения» 71px. Автоматическая раскладка
   имеет право сузить колонку до min-content и сужала — до 93px при
   содержимом 71px + 24px полей, из-за чего заголовок печатался как
   «Срок / хранени / я» (видно и ДО перехода на полную ширину: там колонка
   была 81px).
   Возвращаем шапке нормальный перенос: минимум колонки снова равен самому
   длинному слову подписи. td это НЕ касается — там ломать по буквам как
   раз нужно (адрес, ИНН, почта), и колонку под них держит соседняя.
   ⚠️ ЦЕНА ЗАМЕРЕНА И ПРИНЯТА: на 375 одна таблица из пяти («Категория /
   Назначение / Обрабатываемые данные») перестала помещаться и получила
   7px прокрутки внутри .table-responsive — 358px при 351px обёртки.
   Страницу это не разъезжает (documentElement.scrollWidth = 375 на всех
   ширинах, замер 10.09.2026), а прокрутка внутри обёртки — ровно тот
   сценарий, ради которого обёртка и стоит. Альтернатива была хуже: без
   этого правила та же колонка на 375 сжималась до 40px и печатала подпись
   по слогам. */
.legal-doc .legal-doc__body th {
	word-break: normal;
	overflow-wrap: normal;
}

.legal-doc .legal-doc__body th {
	background-color: color-mix(in srgb, var(--ctx-accent) 8%, transparent);
	font-weight: 600;
	color: var(--ctx-ink);
}

@supports not (color: color-mix(in srgb, red, blue)) {
	.legal-doc .legal-doc__body th {
		background-color: var(--ctx-surface);
	}
}

/* Первая колонка — подпись, а не данные: гасим её до второстепенного. */
.legal-doc .legal-doc__body tbody td:first-child {
	color: var(--ctx-muted);
}

/* ⚠️ ЗДЕСЬ БЫЛА ДОЛЯ ПЕРВОЙ КОЛОНКИ (width: 38%, на <576px — 42%). СНЯТА
   10.09.2026 ВМЕСТЕ С ПЕРЕХОДОМ НА ПОЛНУЮ ШИРИНУ, и снята замером, а не
   на глаз. В мере 736px доля работала: 38% давали подписи 280px. На всю
   ширину контейнера (таблица 1296px на 1440) та же доля назначала первой
   колонке 492px — ЛЮБОЙ таблице документа, независимо от содержимого:
     «Реквизит / Значение» (2 колонки)  → 492 / 803;
     «Имя / Назначение / Тип / Срок»    → 492 / 523 / 200 / 81, то есть
        под слово `cookiebar` уходило 492px, а «12 дней» ломалось в 81px.
   Без доли автоматическая раскладка (table-layout: auto — умолчание,
   своего значения не задаём) считает колонки ПО СОДЕРЖИМОМУ. Замер тех же
   таблиц на 1440 после снятия: 423/872, 305/654/243/93 — пропорции идут
   от текста, а не от числа в CSS.
   На 375 доля тоже мешала, а не помогала: у таблицы «Цель / Обрабатываемые
   данные» короткое значение («Раздел 4.1, 4.3») в узкой доле ломалось
   посимвольно и вытягивало таблицу до 1483px по высоте против 591px на
   автоматической раскладке (замер 10.09.2026).
   Фиксированных пикселей здесь нет и не появилось: ширины колонок целиком
   считает браузер. Прокрутка .table-responsive осталась страховкой на
   случай, когда перенос невозможен. */

@media (max-width: 575.98px) {
	.legal-doc .legal-doc__body th,
	.legal-doc .legal-doc__body td {
		padding: 0.4375rem 0.5rem;
	}
}

/* ------------------------------------------------------------------
   ПЕЧАТЬ

   Юридический документ печатают и сохраняют в PDF — это его штатный
   сценарий, а не экзотика. Ленту, оглавление и контекстный цвет на
   бумагу не тащим.
   ------------------------------------------------------------------ */

@media print {
	.legal-doc .legal-doc__toc {
		display: none;
	}

	/* ⚠️ ЗДЕСЬ СНИМАЛАСЬ ЭКРАННАЯ МЕРА (--case-col) — правило убрано
	   10.09.2026 как ставшее пустым: на экране меры больше нет, снимать
	   нечего. Ширину на бумаге задают поля печати браузера. */

	.legal-doc .legal-doc__body h2,
	.legal-doc .legal-doc__body h3 {
		break-after: avoid;
	}

	.legal-doc .legal-doc__scroller {
		overflow: visible;
	}
}