/* ==========================================================================
   SP4 Couples — юридические документы: политика и условия беты.
   Узкая колонка (не шире 68 символов), спокойная типографика,
   оглавление липнет сбоку на широком экране и сворачивается на телефоне.
   Ни одного нового цвета: всё из base.css.
   ========================================================================== */

.doc {
  padding-block: clamp(24px, 5vw, 48px) clamp(48px, 8vw, 96px);
}

/* --------------------------------------------------------------------- *
   Раскладка: шапка документа, оглавление, текст
   --------------------------------------------------------------------- */

.doc__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'head'
    'toc'
    'body';
  gap: clamp(22px, 4vw, 32px);
}

.doc__head    { grid-area: head; }
.doc__toc-col { grid-area: toc; }
.doc__body    { grid-area: body; }

/* Колонка текста: мера строки — около 68 знаков кириллицы.
   Единица ch считается по ширине нуля, она шире средней буквы,
   поэтому 68 знаков текста укладываются примерно в 52ch. */
.doc__head,
.doc__body { max-width: 52ch; }

@media (min-width: 980px) {
  .doc__layout {
    grid-template-columns: 220px minmax(0, 52ch);
    grid-template-areas:
      'toc head'
      'toc body';
    column-gap: 52px;
    row-gap: 0;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------- *
   Шапка документа
   --------------------------------------------------------------------- */

.doc__back { margin-bottom: clamp(18px, 3vw, 26px); }
.doc__back .arrow,
.doc__foot .arrow { font-size: 1.05em; line-height: 1; }

.doc__title {
  font-size: var(--step-3);
  margin: 0 0 12px;
}

.doc__sub {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--text-soft);
  margin: 0 0 16px;
}

.doc__date {
  font-size: var(--step--1);
  color: var(--muted);
  margin: 0;
}

.doc__intro {
  margin: clamp(18px, 3vw, 26px) 0 0;
  padding-top: clamp(16px, 3vw, 22px);
  border-top: 1px solid var(--border);
  color: var(--text-soft);
  line-height: 1.65;
}

@media (min-width: 980px) {
  .doc__head { margin-bottom: clamp(26px, 4vw, 38px); }
}

/* --------------------------------------------------------------------- *
   Оглавление
   --------------------------------------------------------------------- */

.doc-toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.doc-toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  cursor: pointer;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-radius: var(--r-md);
  list-style: none;
}
.doc-toc__summary::-webkit-details-marker { display: none; }
.doc-toc__summary:hover { color: var(--text); }

/* Стрелка-указатель: поворачивается, когда список раскрыт. */
.doc-toc__summary::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}
.doc-toc[open] > .doc-toc__summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.doc-toc__list {
  list-style: none;
  margin: 0;
  padding: 0 10px 12px;
}
.doc-toc__list li { margin: 0; }

.doc-toc__list a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: var(--step--1);
  line-height: 1.35;
  color: var(--text-soft);
  text-decoration: none;
  overflow-wrap: break-word;
}
.doc-toc__list a:hover {
  background: var(--surface-alt);
  color: var(--accent);
}

/* Широкий экран: оглавление становится тихим столбцом и липнет сбоку. */
@media (min-width: 980px) {
  .doc-toc {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .doc-toc__summary {
    padding: 0 10px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  .doc-toc__list { padding: 0; }

  /* Там, где браузер умеет ::details-content, список открыт всегда,
     а надпись «Содержание» работает как заголовок столбца.
     Где не умеет — остаётся обычный рабочий переключатель. */
  @supports selector(::details-content) {
    .doc-toc::details-content {
      content-visibility: visible;
      block-size: auto;
    }
    .doc-toc__summary {
      pointer-events: none;
      cursor: default;
    }
    .doc-toc__summary::after { display: none; }
  }
}

/* --------------------------------------------------------------------- *
   Текст документа
   --------------------------------------------------------------------- */

.doc__body {
  color: var(--text-soft);
  line-height: 1.7;
  overflow-wrap: break-word;
}

.doc__section + .doc__section { margin-top: clamp(30px, 5vw, 46px); }

.doc__body h2 {
  font-size: var(--step-2);
  color: var(--text);
  margin: 0 0 14px;
  scroll-margin-top: 84px;
}

.doc__body p { margin: 0 0 1.05em; }
.doc__body p:last-child { margin-bottom: 0; }

.doc__body ul {
  margin: 0 0 1.05em;
  padding-left: 1.25em;
}
.doc__body ul:last-child { margin-bottom: 0; }
.doc__body li { margin-bottom: 0.5em; }
.doc__body li:last-child { margin-bottom: 0; }
.doc__body li::marker { color: var(--muted); }

.doc__body a {
  color: var(--accent);
  text-decoration: underline;
}
.doc__body a:hover { color: var(--accent-hover); }

/* Блок контакта внизу документа */
.doc__contact { margin-top: clamp(32px, 5vw, 48px); }
.doc__contact p { margin: 0 0 0.6em; }
.doc__contact p:last-child { margin-bottom: 0; }

.doc__foot { margin-top: clamp(24px, 4vw, 34px); }

/* --------------------------------------------------------------------- *
   Печать
   --------------------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .doc__toc-col,
  .doc__back,
  .doc__foot,
  .skip-link { display: none !important; }

  .doc__head, .doc__body { max-width: none; }
  .doc { padding-block: 0; }
  .doc__body a { text-decoration: none; }
}