/* legal.css — Юридические страницы: условия, приватность, cookies.

   Грузится после app.css и только на страницах раздела (src/_data/pageStyles.json,
   ключ — pageKey). Раньше жил внутри app.css; при разрезе правило уходило сюда,
   только если каждый его селектор держится за класс, который встречается в
   разметке и скриптах одного этого раздела. Порядок правил внутри файла прежний.
   Каскад между файлами сверен вычисленными стилями всех элементов страниц до и
   после разреза. При равной специфичности правило раздела теперь всегда побеждает
   общее из app.css: если общему нужно победить, поднимите его специфичность,
   а не переносите строку выше. */

/* ---------- Юридические страницы ----------
   Документ читают выборочно: оглавление слева липнет при прокрутке,
   разделы пронумерованы, строка не шире 72ch. Вкладки сверху — между
   тремя документами, как в разделе «Легальные документы» у зрелых сайтов. */
.lg-head { padding: clamp(36px, 6vw, 72px) 0 clamp(22px, 3vw, 32px); border-bottom: 1px solid var(--border); }

.lg-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; }

.lg-tabs a { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--fg-muted);
  text-decoration: none; font-size: 0.8125rem; }

.lg-tabs a:hover { color: var(--fg); }

.lg-tabs a[aria-current="page"] { color: var(--fg); background: color-mix(in oklab, var(--fg) 8%, transparent); border-color: transparent; }

.lg-rev { margin: 14px 0 0; font: 400 0.75rem/1 var(--ff-mono); color: var(--fg-dim); letter-spacing: .04em; }

.lg-body { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }

.lg-body--single { display: block; max-width: 880px; }

.lg-toc { position: sticky; top: calc(var(--hdr-h) + 24px); }

.lg-toc__h { margin: 0 0 12px; font: 500 0.6875rem/1 var(--ff-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); }

.lg-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 2px; }

.lg-toc li { counter-increment: toc; }

.lg-toc a { display: flex; gap: 8px; padding: 5px 0; color: var(--fg-muted); text-decoration: none; font-size: 0.8438rem; line-height: 1.35; }

.lg-toc a::before { content: counter(toc) "."; color: var(--fg-dim); font-variant-numeric: tabular-nums; min-width: 1.4em; }

.lg-toc a:hover { color: var(--fg); }

.lg-doc { max-width: 72ch; }

.lg-sec { padding: 0 0 28px; scroll-margin-top: calc(var(--hdr-h) + 20px); }

.lg-sec + .lg-sec { padding-top: 28px; border-top: 1px solid var(--border); }

.lg-sec h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); margin-bottom: 14px; }

.lg-sec__n { color: var(--fg-dim); font-variant-numeric: tabular-nums; }

.lg-sec p, .lg-p { margin: 0 0 12px; color: var(--fg-muted); line-height: 1.65; }

.lg-sec a, .lg-p a { color: var(--peer); text-decoration: underline; text-underline-offset: 2px; }

.lg-muted { color: var(--fg-dim) !important; font-size: 0.875rem; }

.lg-table { margin: 18px 0 16px; }

.lg-table code { font: 400 0.8125rem var(--ff-mono); color: var(--fg); }

.lg-choice { margin-top: 32px; padding: clamp(22px, 3vw, 30px); border: 1px solid var(--border); border-radius: 16px; background: var(--card); }

.lg-choice h2 { font-size: 1.375rem; margin-bottom: 12px; }

.lg-choice p { margin: 0 0 10px; color: var(--fg-muted); }

.lg-choice b { color: var(--fg); font-weight: 600; }

.lg-choice__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }

.lg-choice__saved { color: var(--peer); font-size: 0.875rem; }

@media (max-width: 900px) {
  .lg-body { grid-template-columns: minmax(0, 1fr); }
  .lg-toc { position: static; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; }
}