/*
 * Kiln · backend · готовый текст.
 *
 * Превью публикации в инспекторе: текст из редактора или markdown. Классов
 * в нём нет и быть не может — разметку пишет конвертер, а не человек.
 *
 * Поэтому здесь, в отличие от остальных блоков, стилизуются сами теги.
 * Ограничение одно: всё живёт внутри .prose, за его пределы правила не
 * выходят и с блоками окна не спорят.
 *
 * Кегль мельче основного: превью стоит в узкой колонке инспектора рядом со
 * свойствами, и текст в ней не должен спорить с ними за внимание.
 *
 *   <div class="prose">…</div>
 */
.prose {
    /*
     * Отбивка сверху задаётся блоком, а не страницей: превью всегда стоит
     * под чем-то — под описанием раздела или под заголовком, — и расстояние
     * до него одно и то же.
     */
    margin-top: var(--native-prose-space-title);
    color: var(--native-label-secondary);
    font-size: var(--native-text-prose);
    line-height: var(--native-line-prose);
    /*
     * Длинное слово переносится внутри себя, а не выдавливает колонку.
     * Текст приходит из редактора, а там неизбежны адреса целиком: ссылка
     * в семьдесят знаков шире инспектора и разрывов внутри не имеет.
     */
    overflow-wrap: anywhere;
}

/*
 * Подзаголовки набираются тем же кеглем, что текст, и отличаются только
 * насыщенностью: в превью на триста пикселей ширины разница в размере
 * читалась бы как сбой вёрстки, а не как уровень.
 */
.prose h2,
.prose h3 {
    margin: var(--native-prose-space-title) 0 var(--native-prose-space-under);
    color: var(--native-label);
    font-size: var(--native-text-prose);
    font-weight: 600;
}

.prose p {
    margin: var(--native-prose-space) 0;
}

/*
 * Картинка во всю ширину колонки. Скругление как у контрола: в нативном
 * окне прямоугольная картинка выглядит вставленной, а не своей.
 */
.prose img {
    display: block;
    width: 100%;
    height: auto;
    margin: var(--native-prose-space-image) 0;
    border-radius: var(--native-radius-control);
}

.prose ul,
.prose ol {
    margin: var(--native-prose-space) 0;
    padding-left: var(--native-prose-list-gutter);
}

.prose ul {
    list-style: disc;
}

.prose ol {
    list-style: decimal;
}

.prose li {
    margin: var(--native-prose-space-item) 0;
}

/* Ссылка помечена цветом, подчёркивания нет: в превью оно рвёт строку. */
.prose a {
    color: var(--native-accent);
    text-decoration: none;
}

.prose a:hover {
    text-decoration: underline;
}