/* ============================================================
   ЮРИДИЧЕСКИЙ ДОКУМЕНТ

   Первая страница сайта, которую не смотрят, а читают подряд,
   и правила у неё другие, чем у продающих блоков.

   Ширина колонки — 68 символов (ch), а не наши --maxw. Длина
   строки решает, дочитают ли: на 1920px текст во всю ширину
   даёт около 200 знаков в строке, и глаз теряет начало
   следующей. 60–75 знаков — норма для сплошного текста.

   Оглавление слева отдельной колонкой на широком экране: в
   документе четырнадцать разделов, и человек обычно приходит
   за одним из них — за отзывом согласия или за сроками.

   Своей полосы призыва у страницы нет, но общая (partials/cta.html)
   стоит на всех страницах и остаётся здесь тоже: юридический
   документ не повод обрывать путь к заявке.
   ============================================================ */
.doc .shell{
  display:grid;
  grid-template-columns:minmax(0, 22ch) minmax(0, 68ch);
  /* Строки: шапка и плашка по содержимому, вся свободная высота — телу.
     Без этой строки высокое оглавление (оно занимает все три строки)
     растягивало их поровну, и между «Редакция от…», плашкой и первым
     разделом появлялись пустые полосы по сотне пикселей. Замерено. */
  grid-template-rows:auto auto 1fr;
  /* Зазор только между колонками. Общий gap раздавал те же 64px и по
     вертикали, и документ разъезжался: между «Редакция от…», плашкой
     и первым разделом стояло по 94 пикселя пустоты (замерено). Отступы
     по вертикали задают margin у самих частей — им нужны разные. */
  gap:0 clamp(24px, 3.4vw, 64px);
  align-items:start;
  justify-content:center;
}

/* Шапка и тело — во вторую колонку, оглавление — в первую и с
   отступом от заголовка, чтобы его первая строка встала вровень
   с первым абзацем, а не с заголовком. */
.doc__head,
.doc__warn,
.doc__body{ grid-column:2; }

.doc__head{ margin-bottom:clamp(18px, 1.8vw, 30px); }

.doc__meta{
  margin:clamp(12px, 1.2vw, 20px) 0 0;
  font-size:clamp(13px, .95vw, 15px);
  color:var(--fg-mute);
}

/* Плашка «черновик». Красная, а не серая: серую предупреждающую
   плашку взгляд принимает за часть документа, и она провисит
   до публикации. Появляется только пока не заполнено наименование
   оператора — условие в самом блоке. */
.doc__warn{
  margin:0 0 clamp(20px, 2vw, 32px);
  padding:clamp(14px, 1.4vw, 20px) clamp(16px, 1.6vw, 24px);
  border:1px solid #f0c9c9;
  border-left:3px solid #c4443a;
  border-radius:var(--r-inner);
  background:#fdf3f2;
  font-size:clamp(14px, 1vw, 16px);
  line-height:1.6;
  color:#7c2d26;
}
.doc__warn code{
  font-family:var(--font-mono);
  font-size:.92em;
}

/* ---------- оглавление ---------- */
.doc__toc{
  grid-column:1;
  grid-row:1 / span 3;
  /* Липкое: в длинном документе оглавление, уехавшее вверх,
     бесполезно ровно с того момента, как понадобилось. */
  position:sticky;
  top:calc(var(--header-h, 76px) + 16px);
  padding:clamp(16px, 1.6vw, 24px);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  background:var(--surface);
  box-shadow:var(--shadow-card);
}

.doc__toc-cap{
  margin:0 0 clamp(10px, 1vw, 14px);
  font-size:clamp(12px, .8vw, 12px);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg-mute);
}

.doc__toc-list{
  margin:0;
  padding:0 0 0 1.4em;
  display:grid;
  gap:.5em;
  font-size:clamp(13px, .92vw, 14px);
  line-height:1.4;
  color:var(--fg-lead);
}
.doc__toc-list a{
  color:inherit;
  transition:color .2s var(--ease);
}
.doc__toc-list a:hover{ color:var(--accent-1); }

/* ---------- тело документа ---------- */
.doc__body{
  font-size:clamp(15px, 1.05vw, 17px);
  line-height:1.7;
  color:var(--fg-lead);
}

.doc__body section + section{ margin-top:clamp(26px, 2.6vw, 44px); }

.doc__h{
  margin:0 0 clamp(10px, 1vw, 16px);
  font-family:var(--font-display);
  font-weight:620;
  font-size:clamp(18px, 1.5vw, 24px);
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--fg);
  /* Якорь не должен уезжать под липкую шапку, когда на раздел
     переходят из оглавления. */
  scroll-margin-top:calc(var(--header-h, 76px) + 20px);
}

.doc__body p{ margin:0 0 .9em; }
.doc__body p:last-child{ margin-bottom:0; }
.doc__body b{ color:var(--fg); font-weight:600; }

.doc__list{
  margin:0 0 .9em;
  padding-left:1.3em;
  display:grid;
  gap:.45em;
}
.doc__list li::marker{ color:var(--accent-1); }

/* Термины: определение с новой строки и втяжкой — так пара
   «термин — значение» читается как словарь, а не как абзац. */
.doc__terms{ margin:0; }
.doc__terms dt{
  margin-top:.9em;
  font-weight:600;
  color:var(--fg);
}
.doc__terms dt:first-child{ margin-top:0; }
.doc__terms dd{
  margin:.2em 0 0;
  padding-left:1.1em;
  border-left:2px solid var(--line);
}

.doc__body code{
  padding:.12em .4em;
  border-radius:6px;
  background:var(--surface-2);
  font-family:var(--font-mono);
  font-size:.9em;
  color:var(--fg);
}

.doc__sign{
  margin-top:clamp(20px, 2vw, 32px);
  padding-top:clamp(14px, 1.4vw, 20px);
  border-top:1px solid var(--line);
  font-size:clamp(13px, .95vw, 15px);
  color:var(--fg-mute);
}

/* Ниже 1100px оглавление перестаёт быть колонкой: на планшете
   ему не хватает ширины, а липким оно там только мешает. */
@media (max-width: 1100px){
  .doc .shell{ grid-template-columns:minmax(0, 68ch); justify-content:start; }
  .doc__head,
  .doc__warn,
  .doc__body{ grid-column:1; }
  .doc__toc{
    grid-column:1;
    grid-row:auto;
    position:static;
    order:2;
    margin-bottom:clamp(20px, 2vw, 32px);
  }
  .doc__head{ order:1; }
  .doc__warn{ order:1; }
  .doc__body{ order:3; }
}