/* Текст AI-отчёта приходит от форматтера как markdown → html, своих классов в нём нет, поэтому
   типографику задаём по тегам внутри контейнера. Держим её отдельным файлом, а не утилитами
   Tailwind: разметку отчёта мы не контролируем и навесить классы на неё негде. */
.lk-research-text > * + * {
    margin-top: 0.75rem;
}

.lk-research-text h1,
.lk-research-text h2,
.lk-research-text h3,
.lk-research-text h4,
.lk-research-text h5,
.lk-research-text h6 {
    /* Отступ сверху больше обычного: заголовок должен отбивать раздел от предыдущего текста.
       scroll-margin — под прилипшую шапку, иначе переход из «Содержания» прячет заголовок. */
    margin-top: 1.5rem;
    scroll-margin-top: 96px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: #151515;
}

.lk-research-text h1:first-child,
.lk-research-text h2:first-child,
.lk-research-text h3:first-child,
.lk-research-text h4:first-child,
.lk-research-text h5:first-child,
.lk-research-text h6:first-child {
    margin-top: 0;
}

.lk-research-text ul,
.lk-research-text ol {
    padding-inline-start: 1.25rem;
    list-style: disc;
}

.lk-research-text ol {
    list-style: decimal;
}

.lk-research-text li + li {
    margin-top: 0.25rem;
}

.lk-research-text a {
    color: #8752fa;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lk-research-text strong {
    font-weight: 600;
    color: #151515;
}

/* Таблицы в отчётах встречаются (форматтер умеет markdown-таблицы) и легко шире колонки —
   пускаем горизонтальную прокрутку внутри обёртки, чтобы не растягивать страницу. */
.lk-research-text table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
}

.lk-research-text th,
.lk-research-text td {
    border: 1px solid #e4e4e7;
    padding: 0.5rem 0.75rem;
    text-align: start;
    vertical-align: top;
}

.lk-research-text th {
    background: #f8f3ff;
    font-weight: 600;
    color: #151515;
}

/* Иллюстрация пустого состояния: своя ширина из макета (369px — родной размер svg). Здесь, а не
   утилитой max-w-[369px], чтобы картинка не зависела от пересборки tailwind: без собранного
   класса она растянулась бы во всю ширину карточки. */
.lk-report-empty-art {
    width: 100%;
    max-width: 369px;
}

/* «Содержание» отчёта: в макете блок одноцветный, #f5f6fa, а полосу под шапкой рисует белая
   граница поверх него. В палитре tailwind этого оттенка нет — в экспорте Figma он разложился на
   neutral-100 у коробки и slate-100 у шапки, и оба мимо. */
.lk-report-toc {
    background: #f5f6fa;
}

/* Список разделов: на десктопе открыт, на мобильном и планшете свёрнут — так в макетах (там
   колонка узкая, и длинный список отодвигал бы сам отчёт). Дальше состоянием управляет кнопка,
   она проставляет data-collapsed (player-page.js).

   Здесь, а не утилитами в разметке: источников состояния два — ширина экрана и клик, — а
   tailwind'ская hidden объявлена ниже медиа-запроса lg:flex и перебила бы его, так что на
   десктопе список было бы не свернуть. */
.lk-report-toc-list {
    display: none;
    flex-direction: column;
}

@media (min-width: 1024px) {
    .lk-report-toc-list {
        display: flex;
    }
}

.lk-report-toc-list[data-collapsed="true"] {
    display: none;
}

.lk-report-toc-list[data-collapsed="false"] {
    display: flex;
}