/* ==========================================================================
   legal.css — только privacy.html, offer.html, cookie.html.
   Подключается ПОСЛЕ main.css.
   ========================================================================== */

@layer components {
  .legal {
    padding-block: var(--section-y) var(--s-9);
  }

  .legal__head {
    max-width: var(--measure);
    margin-block-end: var(--s-7);
  }
  .legal__head h1 {
    margin-block: var(--s-3);
    font-size: var(--fs-4);
  }

  .doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-4);
    font-size: var(--fs--1);
    color: var(--c-fg-faint);
  }
  .doc-meta > * {
    display: inline-flex;
    gap: var(--s-2);
  }

  /* --- Содержание. Ноль JS: всё на <details>. --------------------------- */
  .toc {
    padding: var(--s-5);
    border-radius: var(--r-2);
    background: var(--c-bg-alt);
  }
  .toc__summary {
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: var(--fs-1);
    color: var(--c-heading);
    cursor: pointer;
  }
  .toc__list {
    margin-block-start: var(--s-4);
  }
  .toc__list li + li {
    margin-block-start: var(--s-1);
  }
  .toc__link {
    display: block;
    padding-block: var(--s-2); /* до 44px тач-таргета на мобильном */
    font-size: var(--fs--1);
    color: var(--c-fg);
    text-decoration: none;
  }
  .toc__link:hover {
    color: var(--c-link);
    text-decoration: underline;
  }

  @media (min-width: 62em) {
    .legal__grid {
      display: grid;
      grid-template-columns: 17rem minmax(0, var(--measure));
      gap: var(--s-8);
      align-items: start;
    }
    .legal__head {
      grid-column: 1 / -1;
      /* На сетке отбивку даёт row-gap, иначе она складывалась с margin. */
      margin-block-end: 0;
    }
    .toc {
      position: sticky;
      top: calc(var(--header-h) + var(--s-4));
      max-height: calc(100dvh - var(--header-h) - var(--s-8));
      overflow: auto;
      overscroll-behavior: contain;
    }
    /* На широком экране содержание свернуть нельзя — и для этого не нужен
       JS, достаточно снять у summary указатель и маркер. */
    .toc__summary {
      list-style: none;
      pointer-events: none;
    }
    .toc__summary::-webkit-details-marker {
      display: none;
    }
    .toc__summary::marker {
      content: "";
    }
  }

  /* --- Проза документа --------------------------------------------------
     Единственное задокументированное исключение из правила «никаких
     селекторов по тегу»: в документе ~200 абзацев, класс на каждом не нужен.
     Исключение ограничено одним классом и лежит в слое components. */
  .prose {
    max-width: var(--measure);
    line-height: var(--lh-legal);
    /* Кириллицу без переносов нельзя выключать по формату — идут реки. */
    text-align: left;
    hyphens: manual;
  }
  .prose > section + section {
    margin-block-start: var(--s-8);
  }
  .prose h2 {
    margin-block-end: var(--s-4);
    font-size: var(--fs-2);
  }
  .prose h3 {
    margin-block: var(--s-5) var(--s-3);
    font-size: var(--fs-1);
  }
  .prose p + p,
  .prose p + ul,
  .prose ul + p,
  .prose p + dl,
  .prose dl + p,
  .prose p + .callout,
  .prose .callout + p {
    margin-block-start: var(--s-3);
  }

  /* Номера пунктов — ЛИТЕРАЛЬНЫЙ ТЕКСТ, не CSS-счётчики. Это вопрос
     корректности, а не стиля:
     • текст из counter() не входит в DOM — Chrome и Safari копируют такой
       список БЕЗ номеров, а документ цитируют по номерам пунктов;
     • счётчики гарантируют сдвиг: вставили пункт — все последующие номера
       молча съехали, а опубликованные анкоря вида #p-4-2 остались на месте
       и указывают уже не туда;
     • в русских документах нумерация нерегулярна («п. 3.4 (исключён)»);
     • если этот файл не отдастся, номера всё равно читаются.
     Здесь только висячий отступ и типографика номера. */
  .clause {
    padding-inline-start: 3.4em;
    text-indent: -3.4em;
  }
  .clause--l3 {
    padding-inline-start: 4.8em;
    text-indent: -4.8em;
  }
  /* Длинные адреса в тексте документа. Ссылка на политику ЮKassa — 72 знака
     без пробелов; по умолчанию такой «слово» не переносится и на 360px
     выпирал за край экрана на 11px. break-word рвёт слово только когда иначе
     оно не помещается, поэтому короткие адреса выглядят как раньше. */
  .prose a {
    overflow-wrap: break-word;
  }

  /* Абзац-продолжение пункта: номера у него нет, поэтому нет и выступа —
     только тот же отступ слева, чтобы текст стоял в одну колонку с
     пунктами. Селектор из двух классов: .clause выше задаёт text-indent, и
     при равной специфичности решал бы порядок правил в файле. */
  .prose .clause--cont {
    text-indent: 0;
  }
  .clause__no {
    display: inline-block;
    min-width: 2.6em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-weight: 700;
    color: var(--c-fg-faint);
    text-indent: 0;
  }
  .clause--l3 .clause__no {
    min-width: 4em;
  }

  /* Подсветка пункта, на который пришли по ссылке. */
  .clause:target,
  .prose section:target > h2 {
    background: var(--c-target);
    border-radius: var(--r-1);
    box-shadow: 0 0 0 var(--s-2) var(--c-target);
  }

  .prose ul:not(.toc__list) {
    padding-inline-start: 3.4em;
  }
  .prose ul:not(.toc__list) > li {
    position: relative;
  }
  .prose ul:not(.toc__list) > li + li {
    margin-block-start: var(--s-2);
  }
  .prose ul:not(.toc__list) > li::before {
    content: "—";
    position: absolute;
    inset-inline-start: -1.2em;
    color: var(--c-fg-faint);
  }

  /* Нумерованный перечень внутри раздела. Маркеры приходится возвращать:
     reset снимает их у всех списков, а в перечне прав субъекта нумерация —
     часть смысла. Это list-style, а не counter() в ::before: браузер
     переносит такие номера в буфер обмена вместе с текстом. */
  .prose ol:not(.toc__list) {
    padding-inline-start: 3.4em;
    list-style: decimal;
  }
  .prose ol:not(.toc__list) > li::marker {
    color: var(--c-fg-faint);
    font-weight: 700;
  }
  .prose ol:not(.toc__list) > li + li {
    margin-block-start: var(--s-2);
  }
  .prose ol + p,
  .prose p + ol {
    margin-block-start: var(--s-3);
  }

  /* Анкорь у заголовка раздела: без JS, появляется по ховеру и по фокусу. */
  .anchor {
    margin-inline-start: 0.4em;
    color: var(--c-fg-faint);
    font-weight: 400;
    text-decoration: none;
    opacity: 0;
  }
  .prose h2:hover .anchor,
  .anchor:focus-visible {
    opacity: 1;
  }

  /* --- Врезка: пояснение своими словами, не часть договора ------------- */
  .callout {
    padding: var(--s-4) var(--s-5);
    border-inline-start: 4px solid var(--c-accent);
    border-radius: var(--r-1);
    background: var(--teal-soft);
    font-size: var(--fs--1);
  }
  .callout strong {
    color: var(--c-heading);
  }

  /* --- Таблицы (передача третьим лицам, перечень cookie) --------------- */
  /* Таблица шире узкого экрана и прокручивается ВНУТРИ этой обёртки, а не
     растягивает страницу. Обёртка получает tabindex="0" в разметке, иначе
     до горизонтальной прокрутки нельзя добраться без мыши. */
  .table-wrap {
    margin-block-start: var(--s-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .table-wrap:focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 2px;
  }
  .prose table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: var(--fs--1);
  }
  .prose caption {
    margin-block-end: var(--s-2);
    font-size: var(--fs--1);
    color: var(--c-fg-faint);
    text-align: left;
  }
  .prose th,
  .prose td {
    padding: var(--s-3);
    border-block-end: 1px solid var(--c-rule);
    text-align: left;
    vertical-align: top;
  }
  .prose thead th {
    background: var(--c-bg-alt);
    color: var(--c-heading);
    font-weight: 700;
  }

  /* --- Реквизиты внутри документа -------------------------------------- */
  .prose .req {
    margin-block-start: var(--s-4);
    padding: var(--s-5);
    border-radius: var(--r-2);
    background: var(--c-bg-alt);
  }


  /* --- История редакций ------------------------------------------------ */
  /* Сейчас ни одна страница этот блок не использует: документы публикуются
     первой редакцией. Правила оставлены намеренно — история появится при
     первом изменении документа после публикации. */
  .versions {
    font-size: var(--fs--1);
  }
  .versions li + li {
    margin-block-start: var(--s-2);
  }

  /* Блок для печати: в PDF документ обязан сам себя называть. */
  .print-only {
    display: none;
  }
}