/* ==========================================================================
   DropHub — правовые страницы: terms.html, privacy.html (responsible.html
   с 2026-10-28 скрыта: noindex, ссылок нет)

   Каркас общий с остальными справочными разделами (pages.css: .pg-page,
   .pg-head), здесь — только то, что нужно длинному тексту:
     · переключатель трёх документов над текстом;
     · три колонки на широком экране: оглавление · текст · «Коротко»;
       уже 1280 — «Коротко» встаёт над текстом, уже 900 — одна колонка,
       оглавление сворачивается (legal.js);
     · текст 15/1.65 и строка не длиннее ~76 знаков — читать договор
       мелким серым кеглем сайта (13px) тяжело;
     · пункты с висячим номером «1.1.» — на ссылку «п. 4.3» легко найти
       нужное место глазами;
     · .lg-todo — место, которое заполняет владелец («[реквизиты
       оператора]» и т. п.). Видно сразу, чтобы не уехать в прод пустым.
   Цвета — токены home.css (--panel, --line, --accent…), своих нет, кроме
   цвета основного текста статьи: --text (#F2F5F7) на чёрном слепит
   на длинном чтении, --text-dim (#8C97A3) для договора тускловат.
   ========================================================================== */

.lg-page {
  --lg-ink: #C9D0D6; --lg-top: 84px;
  /* Индиго сайта вместо прежнего графита (владелец 2026-10-28: «редизайн в
     наш дизайн») — те же цвета, что у статей (guides.css) и бонусов:
     поверхности #1C1636 → #261E48, рамки #2E2752, акцент — лайм. Токены
     переопределены только внутри .lg-page: шапка и подвал сайта свои. */
  --panel: #1C1636; --panel-3: #261E48; --line: #2E2752; --line-soft: #262046;
  --accent: #D7FF00; --accent-hi: #E8FF66; --text-dim: #A69FCF; --text-mute: #8F86B8;
  --radius: 16px;
}
/* герой — из guides.css; переключатель документов живёт в нём */
.lg-hero { margin-bottom: 26px; }
.lg-hero .lg-docs { margin-top: 18px; }

/* ---------- заголовок ---------- */
.lg-head h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.lg-age {
  display: inline-grid; place-items: center;
  min-width: 52px; height: 34px; padding: 0 10px; border-radius: 10px;
  background: var(--red); color: #fff;
  font-family: var(--f-cond), sans-serif; font-size: 19px; font-weight: 700; letter-spacing: .02em;
  line-height: 1;
}
.lg-date { color: var(--text-dim); }

/* ---------- переключатель документов ---------- */
.lg-docs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lg-docs a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 12px;
  border: 1.5px solid #3A3166; background: rgba(255, 255, 255, .04);
  color: #BDB7DE; font-size: 13px; font-weight: 700; text-decoration: none;
  transition: color .14s, border-color .14s, background-color .14s;
}
.lg-docs a:hover { color: #fff; border-color: #4C4182; background: rgba(255, 255, 255, .07); }
/* открытый документ — как «включённое» по сайту: статичный градиент
   логотипа лайм → розовый по рамке (без анимации) */
.lg-docs a[aria-current="page"] {
  color: #F4FFD6; border-color: transparent;
  background: linear-gradient(180deg, #2A2158 0%, #1C1540 100%) padding-box,
              linear-gradient(135deg, #D7FF00 0%, #F0FFC8 45%, #FFD6F7 55%, #F535F0 100%) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), -4px -4px 14px rgba(215, 255, 0, .14), 4px 4px 14px rgba(245, 53, 240, .18);
}

/* ---------- раскладка ---------- */
.lg-layout {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: 250px minmax(0, 1fr) 300px;
  grid-template-areas: "toc doc side";
}
.lg-toc  { grid-area: toc; }
.lg-doc  { grid-area: doc; min-width: 0; }
.lg-side { grid-area: side; display: grid; gap: 12px; }
.lg-toc, .lg-side { position: sticky; top: var(--lg-top); }
.lg-toc { max-height: calc(100vh - var(--lg-top) - 16px); overflow: auto; scrollbar-width: thin; }

@media (max-width: 1280px) {
  .lg-layout { grid-template-columns: 250px minmax(0, 1fr); grid-template-areas: "toc side" "toc doc"; }
  .lg-side { position: static; }
}
@media (max-width: 900px) {
  .lg-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "toc" "doc"; gap: 12px; }
  .lg-toc { position: static; max-height: none; overflow: visible; }
}
/* без боковой колонки «Коротко»: соглашение и политика — текст владельца
   1-в-1 (Telegraph, 2026-10-14), своих врезок в них нет */
.lg-layout--noside { grid-template-columns: 250px minmax(0, 1fr); grid-template-areas: "toc doc"; }
@media (max-width: 900px) {
  .lg-layout--noside { grid-template-columns: minmax(0, 1fr); grid-template-areas: "toc" "doc"; }
}
/* ---------- оглавление ---------- */
.lg-toc {
  border: 1px solid var(--line); border-radius: var(--radius); background: #1A1430;
  padding: 6px;
}
.lg-toc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer; list-style: none;
  font-family: var(--f-cond), sans-serif; font-size: 15px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text);
}
.lg-toc > summary::-webkit-details-marker { display: none; }
.lg-toc > summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px;
  border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim);
  transform: translateY(-2px) rotate(45deg); transition: transform .16s;
}
.lg-toc[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.lg-toc ol { margin: 0; padding: 0 0 4px; list-style: none; display: grid; gap: 1px; }
.lg-toc a {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px;
  padding: 7px 10px; border-radius: 9px;
  color: var(--text-dim); font-size: 13px; line-height: 1.35; text-decoration: none;
  transition: color .14s, background-color .14s;
}
.lg-toc a b { color: var(--text-mute); font-weight: 600; font-variant-numeric: tabular-nums; }
.lg-toc a:hover { color: var(--text); background: var(--panel-3); }
.lg-toc a.is-on { color: var(--text); background: var(--panel-3); box-shadow: inset 2px 0 0 var(--accent); }
.lg-toc a.is-on b { color: var(--accent); }

/* ---------- «Коротко» ---------- */
.lg-sum {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(215, 255, 0, .07), rgba(215, 255, 0, 0) 55%), var(--panel);
  padding: 16px 18px 18px;
}
.lg-sum h2 {
  margin: 0 0 12px;
  font-family: var(--f-cond), sans-serif; font-size: 17px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
}
.lg-sum ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: lgsum; }
.lg-sum li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start;
  font-size: 14px; line-height: 1.5; color: #D5DBE0;
}
.lg-sum li::before {
  counter-increment: lgsum; content: counter(lgsum);
  display: grid; place-items: center; width: 22px; height: 22px; margin-top: 0;
  border-radius: 6px; background: var(--accent); color: #0E1102;
  font-size: 12px; font-weight: 700; line-height: 1;
}
.lg-sum li b { color: var(--text); }
.lg-sum__foot { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-mute); }
.lg-help {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; min-height: 42px; padding: 0 16px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--panel-3);
  color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none;
  transition: border-color .14s, background-color .14s;
}
.lg-help:hover { border-color: var(--accent); }
.lg-help svg { flex: none; width: 18px; height: 18px; color: #2AABEE; }

/* ---------- текст документа ---------- */
.lg-doc {
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(180deg, #211A3F 0%, #1A1430 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  padding: 28px 32px 32px;
}
.lg-sec { scroll-margin-top: var(--lg-top); }
.lg-sec + .lg-sec { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.lg-sec h2 {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 14px;
  font-family: var(--f-cond), sans-serif; font-size: 20px; font-weight: 700; line-height: 1.2;
  letter-spacing: .03em; text-transform: uppercase; color: var(--text);
}
/* лаймовая черта, как у заголовков статей; номер — тише */
.lg-sec h2::before {
  content: ''; flex: none; align-self: center; width: 4px; height: .95em; border-radius: 2px; background: var(--accent);
}
.lg-sec h2 .lg-num { flex: none; color: #8F86B8; font-variant-numeric: tabular-nums; }
.lg-sec h3 { margin: 18px 0 8px; font-size: 15px; font-weight: 700; color: var(--text); }

.lg-doc p, .lg-doc li { font-size: 15px; line-height: 1.65; color: var(--lg-ink); }
.lg-doc p { margin: 0 0 10px; max-width: 76ch; }
.lg-doc b, .lg-doc strong { color: var(--text); font-weight: 600; }
.lg-doc a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(215, 255, 0, .4); text-underline-offset: 3px; }
.lg-doc a:hover { text-decoration-color: currentColor; }
.lg-doc code {
  padding: 1px 5px; border-radius: 5px; border: 1px solid var(--line); background: var(--panel-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em;
  color: var(--text); overflow-wrap: anywhere;
}

/* пункт с висячим номером */
.lg-cl { position: relative; padding-left: 2.9em; }
.lg-n { position: absolute; left: 0; top: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.lg-doc .lg-n { color: var(--text-dim); }   /* сильнее, чем .lg-doc b */

/* списки внутри пункта */
.lg-list { margin: -2px 0 12px 2.9em; padding: 0; list-style: none; display: grid; gap: 6px; max-width: 72ch; }
.lg-list li { position: relative; padding-left: 18px; }
.lg-list li::before {
  content: ""; position: absolute; left: 2px; top: .66em;
  width: 6px; height: 6px; border-radius: 2px; background: var(--accent);
}
.lg-list--flat { margin-left: 0; }

/* врезка: формула, важное */
.lg-note {
  margin: 2px 0 14px; padding: 12px 14px; max-width: 76ch;
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px;
  background: var(--panel-3);
}
.lg-doc .lg-note p { margin: 0; font-size: 14px; }
.lg-doc .lg-note p + p { margin-top: 6px; }
.lg-note--warn { border-left-color: var(--red); }

/* ключ — назначение (хранилище браузера) */
.lg-kv {
  margin: 2px 0 14px; padding: 0; list-style: none; max-width: 76ch;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.lg-kv li {
  display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 4px 14px;
  padding: 10px 14px; border-top: 1px solid var(--line);
}
.lg-kv li:first-child { border-top: 0; background: var(--panel-3); }
.lg-doc .lg-kv li { font-size: 14px; line-height: 1.5; }
.lg-kv__k { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; min-width: 0; }
.lg-kv li:first-child span { color: var(--text-dim); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* место, которое заполняет владелец */
.lg-todo {
  padding: 0 5px; border-radius: 6px;
  border: 1px dashed rgba(215, 255, 0, .6); background: rgba(215, 255, 0, .1);
  color: var(--accent-hi); font-weight: 600;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* реквизиты и контакты в конце документа */
.lg-contacts { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; max-width: 76ch; }
.lg-doc .lg-contacts li { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 4px 14px; }
.lg-contacts span { color: var(--text-dim); }
.lg-contacts .lg-todo, .lg-contacts a { justify-self: start; }

.lg-related { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--text-dim); }

/* фокус с клавиатуры */
.lg-page a:focus-visible, .lg-toc > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- телефон ---------- */
@media (max-width: 760px) {
  .lg-page { --lg-top: 68px; }
  .lg-doc { padding: 20px 16px 22px; border-radius: 16px; }
  .lg-hero .lg-docs { margin-top: 14px; }
  .lg-sum { padding: 14px 16px 16px; }
  .lg-sec + .lg-sec { margin-top: 22px; padding-top: 20px; }
  .lg-sec h2 { font-size: 18px; }
  .lg-age { height: 30px; min-width: 46px; font-size: 17px; }
}
@media (max-width: 560px) {
  /* номер пункта — в строку: висячий отступ съедает десятую часть ширины */
  .lg-cl { padding-left: 0; }
  .lg-n { position: static; }
  .lg-list { margin-left: 0; }
  .lg-kv li, .lg-doc .lg-contacts li { grid-template-columns: minmax(0, 1fr); }
  .lg-kv li:first-child { display: none; }
  .lg-docs a { padding: 0 12px; }
}

/* ---------- печать ---------- */
@media print {
  .kz-header, .kz-tabbar, .kz-menu, .dh-foot, .lg-docs, .lg-toc, .lg-help { display: none !important; }
  body { background: #fff !important; }
  .lg-layout { display: block; }
  .lg-doc, .lg-sum { border: 0; background: none; padding: 0; }
  .lg-page, .lg-doc p, .lg-doc li, .lg-sum li, .lg-sec h2, .lg-doc b { color: #000 !important; }
  .lg-todo { color: #000; background: none; }
}