/* Документация (HelpCenterPage) — статический порт из pen "doc2ms/iframe-chat/HelpCenterPage" (mkpdv).
   Токены/шрифты — общие (tokens.css). Шапка/футер — общие (site-header.js / .footer). */

/* Серый фон-обёртка (как $bg в макете), чтобы белые карточки ToC/лонгрида читались */
.doc-main {
    background: var(--bg);
    min-height: calc(100vh - 81px);
    padding: var(--space-48) var(--space-64);
    display: flex;
    justify-content: center;
}
.doc {
    width: 100%;
    max-width: 1120px;
    display: flex;
    align-items: flex-start;
    gap: var(--space-40);
}

/* ─── Оглавление (TocNav) — карточка, sticky ─── */
.doc-toc {
    flex: none;
    width: 260px;
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    padding: var(--space-20);
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.doc-toc__hd,
.doc-toc__gh {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.doc-toc__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}
.doc-toc__item {
    display: block;
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
}
.doc-toc__item:hover {
    background: var(--surface-muted);
}
.doc-toc__item.is-active,
.doc-toc__item.is-active:hover {
    background: var(--surface-muted);
    color: var(--text-primary);
    font-weight: 600;
}

/* ─── Лонгрид ─── */
.doc-longread {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-40);
    padding: var(--space-32);
    background: var(--bg-white);
    border-radius: var(--radius-lg);
}
.doc-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    scroll-margin-top: 100px;
}
.doc-section--media {
    gap: var(--space-32);
    align-items: center;
}
.doc-h2 {
    align-self: stretch;
    margin: 0;
    font-family: var(--font-ui);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
}
.doc-p {
    align-self: stretch;
    margin: 0;
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ─── Callout (подсказка) ─── */
.doc-callout {
    align-self: stretch;
    display: flex;
    gap: var(--space-12);
    padding: var(--space-16);
    background: var(--accent-light);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent);
}
.doc-callout__ic {
    flex: none;
    color: var(--accent);
}
.doc-callout__t {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-secondary);
}

/* ─── Скрины (PNG) ─── */
.doc-shotwrap {
    align-self: stretch;
    display: flex;
    justify-content: center;
}
.doc-shot {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18);
}

/* ─── Placeholder (раздел «Подключение») ─── */
.doc-slot {
    width: 440px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--space-32);
    min-height: 200px;
    text-align: center;
    background: var(--surface-muted);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-md);
}
.doc-slot__ic {
    color: var(--text-muted);
}
.doc-slot__t1 {
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
}
.doc-slot__t2 {
    max-width: 480px;
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
}

/* ─── Адаптив ─── */
@media (max-width: 1024px) {
    .doc-main { padding: var(--space-32) var(--space-40); }
    .doc { gap: var(--space-32); }
}
@media (max-width: 860px) {
    .doc { flex-direction: column; }
    .doc-toc { position: static; width: 100%; }
}
@media (max-width: 640px) {
    .doc-main { padding: var(--space-24) var(--space-20); }
    .doc-longread { padding: var(--space-20); gap: var(--space-32); }
}