/* pages/legal — /legal, /legal/:doc, /legal/seller, /legal/cookies (задача
   2 переиспользует эту таблицу): макет «документ» (docs/design/Info
   Pages.dc.html → Returns). На 390 навигация лежит над текстом простым
   порядком в DOM (nav — первый дочерний элемент .legal-doc), на 1024+ —
   левым сайдбаром через grid. Только var(--*) — как везде в сайте. */

.legal-index { display: flex; flex-direction: column; gap: 24px; padding-block: 16px 48px; }
.legal-index__list { display: flex; flex-direction: column; gap: 4px; list-style: none; margin: 0; padding: 0; }
.legal-index__item { border-bottom: 1px solid var(--color-divider); padding: 8px 0; }
.legal-index__link {
  display: flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600;
  color: var(--color-text); text-decoration: none;
}
.legal-index__link:hover { color: var(--color-accent-700); }
.legal-index__excerpt { margin: 0 0 8px; font-size: 14px; color: var(--color-neutral-700); }

.legal-doc, .legal-doc-not-found { display: flex; flex-direction: column; gap: 24px; padding-block: 16px 48px; }
@media (min-width: 1024px) {
  .legal-doc { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
}

.legal-nav__list { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 1024px) { .legal-nav { position: sticky; top: 16px; } }
.legal-nav__item {
  display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-3);
  border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; font-size: 14px;
}
.legal-nav__item:hover { background: var(--color-accent-2-200); }
.legal-nav__item--active { color: var(--color-accent-2-700); background: var(--color-accent-2-200); font-weight: 600; }

.legal-doc__content { display: flex; flex-direction: column; gap: 20px; max-width: 720px; }
.legal-doc__body { display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: 1.6; color: var(--color-text); }
.legal-doc__body h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 22px; margin: 12px 0 0; }
.legal-doc__body h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin: 8px 0 0; }
.legal-doc__body p { margin: 0; }
.legal-doc__body ul, .legal-doc__body ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.legal-doc__body a { color: var(--color-accent-700); }
.legal-doc__body table { border-collapse: collapse; width: 100%; }
.legal-doc__body th, .legal-doc__body td { border: 1px solid var(--color-divider); padding: 6px 10px; text-align: left; }
.legal-doc__body blockquote { margin: 0; padding-left: 12px; border-left: 3px solid var(--color-divider); color: var(--color-neutral-700); }

.legal-doc__contact {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  border-top: 1px solid var(--color-divider); padding-top: var(--space-3); font-size: 14px;
}
.legal-doc__contact-label { font-weight: 700; color: var(--color-neutral-700); }
.legal-doc__contact a { color: var(--color-accent-700); text-decoration: none; }

.legal-seller__fields { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.legal-seller__field { display: flex; flex-direction: column; gap: 2px; }
.legal-seller__field dt { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-neutral-700); }
.legal-seller__field dd { margin: 0; font-size: 15px; }

.legal-cookies__categories { display: flex; flex-direction: column; gap: 16px; }
.legal-cookies__category { align-items: flex-start; }
.legal-cookies__category .switch__track { margin-top: 2px; }
.legal-cookies__category-text { display: flex; flex-direction: column; gap: 4px; }
.legal-cookies__category .switch__label { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; }
.legal-cookies__category-desc { font-size: 14px; color: var(--color-neutral-700); }
.legal-cookies__current { font-size: 14px; }
.legal-cookies__current strong { font-weight: 600; }
.legal-cookies__privacy { font-size: 14px; }
.legal-cookies__privacy a { color: var(--color-accent-700); }

/* Баннер cookie (components/cookie-banner, components.css) — position:fixed
   снизу экрана — на этой же странице перекрывает переключатели и кнопку
   Save: табуляция даёт фокус на элементе, скрытом под баннером (DEV0330,
   сценарий 12 приёмки). padding-bottom один не чинит переключатели: они и
   так попадают в вьюпорт по геометрии документа, поэтому браузер их не
   скроллит, хотя баннер их всё равно закрывает сверху. Браузер учитывает
   scroll-margin у элемента, который САМ получает фокус, а не у его
   label-обёртки — у switch-переключателей это `<input>` (визуально нулевого
   размера, трек рисует соседний `<span>`), поэтому правило висит на
   `[role="switch"]`, а не на `.legal-cookies__category`. padding-bottom
   остаётся, чтобы хватало места докрутить последние элементы страницы.
   Высота — с запасом над измеренной BG на 390px (~304px). */
body:has(.legal-cookies__categories) .legal-doc__content { padding-bottom: 340px; }
.legal-cookies__categories [role="switch"], .legal-cookies__current, .legal-cookies__save { scroll-margin-bottom: 340px; }