/* Раздел инструкций для клиентов /docs/ (13.11.2026). Подключается после style.css на страницах <body class="app-page">.
   Шапка и подвал сокращенные, как у приложений app.leadzilla.ru: в шапке ★LeadZilla → «Инструкции» → «Все инструкции»
   и переключатель темы, в подвале только темная полоса реквизитов. Модалки, окно cookie и скрипты — общие (partials/footer.html) */

/* ---------- Шапка ---------- */
.app-hdr__in { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.app-hdr .logo { display: inline-flex; align-items: center; min-height: 44px; font-size: 28px; }
.app-hdr__name { display: inline-flex; align-items: center; min-height: 44px; padding-left: 12px; border-left: 1px solid var(--rule-soft);
  font: 700 var(--fs-s)/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; }
.app-hdr__all { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; font: 400 var(--fs-s)/1.2 var(--sans);
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-soft); text-underline-offset: 3px; white-space: nowrap; }
.docs-home .app-hdr__all { visibility: hidden; }
/* переключатель темы: зона нажатия 44×44, иконка 20 px */
.app-hdr__theme { width: 44px; height: 44px; margin: 0; border: 1px solid var(--rule-soft); }
.app-hdr__theme::after { content: none; }
.app-hdr__theme .ico { width: 20px; height: 20px; }
@media (hover: hover) {
  .app-hdr__name:hover, .app-hdr__all:hover { color: var(--accent); text-decoration-color: currentColor; }
}
@media (max-width: 480px) {
  .app-hdr__in { gap: 8px; min-height: 56px; }
  .app-hdr .logo { font-size: 22px; }
  .app-hdr__name { padding-left: 8px; letter-spacing: .06em; }
  .app-hdr__all { display: none; }
  .app-hdr__theme { margin-left: auto; }
}

/* ---------- Подвал: от подвала сайта остается только полоса реквизитов ---------- */
.app-page .footer__grid, .app-page .dock { display: none; }
.app-page .footer { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- Страница инструкции ---------- */
/* Каркас — документ сайта (.policy > .doc: .doc__head, .doc__toc, .doc__text; style.css, «документы»), здесь только свое */
.crumbs { margin: 0 0 12px; font: 400 var(--fs-s)/1.4 var(--sans); color: var(--muted); }
.doc .crumbs a { color: inherit; }
.doc h2, .doc h3 { scroll-margin-top: 88px; }

/* Шаги: номер в красном круге, текст, под ним скриншот */
.steps { list-style: none; counter-reset: step; margin: 16px 0 0; padding: 0; }
.steps > li { counter-increment: step; position: relative; margin: 0 0 32px; padding-left: 48px; max-width: none; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-ink); font: 700 var(--fs-s)/1 var(--sans); }
.steps > li > p:first-child { margin-top: 2px; }
@media (max-width: 480px) { .steps > li { padding-left: 40px; } }

/* Скриншот: рамка, тень, подпись. Клик открывает просмотр (data-lightbox, main.js) */
.shot { margin: 16px 0 0; max-width: 720px; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--rule-soft); border-radius: 8px; background: #fff; box-shadow: 0 6px 24px rgba(28, 25, 21, .10); }
.shot figcaption { margin-top: 8px; font: 400 var(--fs-s)/1.4 var(--sans); color: var(--muted); }
.shot--narrow { max-width: 480px; }

/* Врезки: важно (красная линия), совет (зеленая) */
.callout { margin: 24px 0; padding: 16px 20px; border-left: 4px solid var(--accent); background: var(--card); max-width: 46em; }
.callout p { margin: 0 0 8px; }
.callout p:last-child { margin-bottom: 0; }
.callout__cap { display: block; margin-bottom: 4px; font: 700 var(--fs-s)/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.callout--ok { border-left-color: var(--ok-line); }
.callout--ok .callout__cap { color: var(--ok); }

/* Поле «скопировать»: логин агентства с кнопкой (правило 40 скилла ui) */
.copyline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; max-width: 480px; margin: 12px 0; }
.copyline code { display: flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 18px; overflow-x: auto; white-space: nowrap; }
.copyline .btn { min-width: 150px; }

/* ---------- Разводящая /docs/: карточки по сетке 12 колонок ---------- */
.cards { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
.cards > li { grid-column: span 12; display: flex; max-width: none; }
@media (min-width: 700px) { .cards > li { grid-column: span 6; } }
@media (min-width: 1060px) { .cards > li { grid-column: span 4; } }
.card-link { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 20px; border: 1px solid var(--rule-soft); background: var(--card); color: var(--ink); text-decoration: none; }
.card-link__kicker { font: 700 var(--fs-s)/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.card-link__title { font: 700 var(--fs-l)/1.25 var(--serif-head); }
.card-link__text { font: 400 var(--fs-m)/1.5 var(--serif); color: var(--ink-2); }
.card-link__more { margin-top: auto; padding-top: 8px; font: 700 var(--fs-s)/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
@media (hover: hover) { .card-link:hover { border-color: var(--accent); } }

/* Определитель типа аккаунта: признак → ответ */
.signs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
.signs > li { grid-column: span 12; max-width: none; padding: 16px 20px; border: 1px solid var(--rule-soft); }
@media (min-width: 900px) { .signs > li { grid-column: span 6; } }
.signs p { margin: 0 0 8px; }
.signs p:last-child { margin: 0; }
.signs__see { font-style: italic; color: var(--ink-2); }

/* Скриншот открывается в просмотре сайта: кнопка во всю картинку (группа docs, main.js) */
.shot__zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.shot__zoom > * { cursor: inherit; }
.shot__src { color: inherit; }

/* Разводящая: документ без колонки оглавления — карточки и признаки во всю ширину, текст до 46em */
.doc--hub { display: block; }
.doc--hub .doc__head, .doc--hub > p, .doc--hub > figure { max-width: 46em; }
.card-link--plain { background: transparent; border-style: dashed; }
/* карточка — ссылка целиком: подчеркивание и красный цвет ссылок документа (.doc a) на нее не действуют */
.doc .card-link { color: var(--ink); text-decoration: none; overflow-wrap: normal; }
.doc .card-link__title, .doc .card-link__kicker, .doc .card-link__more { color: var(--accent); }
.doc .card-link__title { color: var(--ink); }
@media (hover: hover) { .doc a.card-link:hover .card-link__title { color: var(--accent); } }