/* Полезная информация: читалка разделов. Подключается после общих стилей панели.
   Цель — читать долго и без усталости: строка не длиннее ~80 знаков, спокойный ритм, заметная навигация. */

/* ───────── Верхняя панель и прогресс ───────── */
.doc-reader .doc-topbar-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    font: 700 16px var(--font-body);
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-hi);
    max-width: 34vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-reader .doc-crumb { color: var(--text-dim); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.doc-reader .doc-crumb-sep { color: var(--text-mute); font-weight: 400; }

.doc-progress {
    position: sticky;
    top: 0;
    z-index: 6;
    height: 2px;
    margin-top: -2px;
    background: transparent;
    pointer-events: none;
}
.doc-progress i {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-dark), var(--accent));
    box-shadow: 0 0 8px var(--accent-glow);
    transition: width 0.12s linear;
}

/* ───────── Лист: колонка для чтения ───────── */
.doc-reader .doc-page .doc-paper {
    max-width: 880px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.doc-reader .doc-hero { padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.doc-hero-eyebrow {
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-light);
}
.doc-reader .doc-hero h1 { margin: 0 0 12px; font-size: 36px; line-height: 1.15; letter-spacing: -0.01em; }
.doc-hero-desc { margin: 0 0 14px; max-width: 720px; font-size: 16px; line-height: 1.6; color: var(--text-dim); }
.doc-reader .doc-hero-meta { gap: 8px; }
.doc-reader .doc-hero-count {
    padding: 2px 10px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.05);
}

/* ───────── Пункт ───────── */
.doc-reader .doc-rule {
    margin: 0 0 18px;
    padding: 26px 30px 26px;
    border: 1px solid var(--line-2);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.022);
    scroll-margin-top: 90px;
}
.doc-reader .doc-rule-head { gap: 14px; margin-bottom: 14px; align-items: center; }
.doc-reader .doc-rule-head h2 { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 800; letter-spacing: 0; }
.doc-reader .doc-num {
    flex: none;
    min-width: 34px;
    height: 30px;
    padding: 0 9px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    font: 700 14px var(--font-mono);
    color: var(--accent-ink);
    background: var(--accent);
}
.doc-reader .doc-num.sm {
    min-width: 30px;
    height: 24px;
    padding: 0 7px;
    font-size: 12.5px;
    color: var(--accent-light);
    background: var(--accent-soft);
}
.doc-reader .doc-text-line {
    max-width: 72ch;
    font-size: 16px;
    line-height: 1.75;
    color: var(--text);
}
.doc-reader .doc-text + .doc-text { margin-top: 10px; }
.doc-reader .doc-text-line .rt-code {
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 0.92em;
    background: rgba(255, 255, 255, 0.07);
}
.doc-reader .doc-text.note {
    margin-top: 12px;
    padding: 10px 14px 10px 16px;
    border-left: 3px solid var(--warn);
    border-radius: 0 10px 10px 0;
    background: color-mix(in srgb, var(--warn) 7%, transparent);
}
.doc-reader .doc-text.note .doc-text-line { font-size: 15px; color: var(--text); }

/* Подпункт */
.doc-reader .doc-sub {
    margin: 22px 0 0;
    padding: 2px 0 2px 20px;
    border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
    scroll-margin-top: 90px;
}
.doc-reader .doc-sub-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.doc-reader .doc-sub-head h3 { margin: 0; font-size: 17.5px; line-height: 1.35; font-weight: 800; letter-spacing: 0; text-transform: none; }

/* ───────── Таблицы ───────── */
.doc-reader .doc-table-block { margin: 0 0 26px; }
.doc-reader .info-table-wrap {
    border: 1px solid var(--line-2);
    border-radius: 14px;
    overflow: auto;
    background: rgba(255, 255, 255, 0.015);
}
.doc-reader .info-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc-reader .info-table thead th {
    position: sticky;
    top: 0;
    padding: 12px 16px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--text-hi);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-2, #17171c));
    border-bottom: 1px solid var(--line-3);
}
.doc-reader .info-table tbody td {
    padding: 12px 16px;
    line-height: 1.55;
    vertical-align: top;
    color: var(--text);
    border-bottom: 1px solid var(--line);
}
.doc-reader .info-table tbody tr:last-child td { border-bottom: 0; }
.doc-reader .info-table tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }
.doc-reader .info-table.striped tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.018); }
.doc-reader .info-table.first-bold tbody td:first-child { font-weight: 700; color: var(--text-hi); }
.doc-reader .info-table.compact thead th,
.doc-reader .info-table.compact tbody td { padding: 8px 12px; }
.doc-reader .info-table-caption { margin-top: 8px; font-size: 13px; font-style: italic; color: var(--text-mute); }

/* ───────── Боковая панель: поиск ───────── */
.doc-find {
    position: relative;
    display: block;
    margin: 0 0 18px;
}
.doc-find svg {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    fill: none;
    stroke: var(--text-mute);
    stroke-width: 2;
    pointer-events: none;
}
.doc-find input { width: 100%; margin: 0; padding-left: 36px; height: 38px; }
.doc-reader .doc-hidden { display: none !important; }
mark.doc-hit {
    padding: 0 2px;
    border-radius: 3px;
    color: #1c1405;
    background: var(--warn);
}
.doc-reader .doc-find-empty[hidden] { display: none !important; }

/* Панель редактора не переносится на вторую строку: подписи групп прячутся на узких экранах */
@media (max-width: 1700px) { .doc-reader .doc-toolbar .tb-label { display: none; } }

/* ───────── Навигация по заголовкам ───────── */
.doc-reader .doc-nav-toc a { line-height: 1.4; }
.doc-reader .doc-nav-toc a.active { background: var(--accent-soft); border-radius: 8px; }

@media (max-width: 760px) {
    .doc-reader .doc-rule { padding: 18px 16px; }
    .doc-reader .doc-hero h1 { font-size: 28px; }
    .doc-reader .doc-rule-head h2 { font-size: 19px; }
    .doc-reader .doc-sub { padding-left: 14px; }
}