/* Типографика текста статьи (/articles/<slug>, pages/article.html).

   HTML тела приходит из Markdown (app/services/article_markup.py), классов
   Tailwind в нём нет — поэтому обычный CSS по тегам внутри .article-body.
   Отдельный файл, а не main.css: main.css инлайнится в <head> каждой
   страницы, а эти правила нужны только статье.

   Цвета — токены сайта: заголовки #4D565E, текст #686C75, акцент brand
   #0DA775, светлые плашки #EAEFF5, подписи #888D98. */

.article-body {
    color: #686C75;
    font-size: 16px;
    line-height: 1.7;
    overflow-wrap: break-word;
}
.article-body > :first-child { margin-top: 0; }

.article-body h2,
.article-body h3,
.article-body h4 {
    color: #4D565E;
    font-weight: 600;
    text-wrap: pretty;
    /* Якоря оглавления: заголовок не должен уезжать под фиксированный навбар. */
    scroll-margin-top: 110px;
}
.article-body h2 { margin: 40px 0 0; font-size: 24px; line-height: 1.2; }
.article-body h3 { margin: 28px 0 0; font-size: 19px; line-height: 1.25; }
.article-body h4 { margin: 24px 0 0; font-size: 17px; line-height: 1.3; }

.article-body p { margin: 14px 0 0; text-wrap: pretty; }
.article-body strong { color: #4D565E; font-weight: 600; }

.article-body a {
    color: #0DA775;
    text-decoration: underline;
    text-decoration-color: rgb(13 167 117 / 0.35);
    text-underline-offset: 3px;
    transition: color .15s, text-decoration-color .15s;
}
.article-body a:hover { color: #0B8E63; text-decoration-color: currentColor; }

.article-body ul,
.article-body ol { margin: 14px 0 0; padding-left: 22px; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-top: 8px; padding-left: 2px; }
.article-body li > p { margin-top: 0; }
.article-body li::marker { color: #0DA775; font-weight: 600; }

.article-body blockquote {
    margin: 24px 0 0;
    padding: 18px 22px;
    border-radius: 20px;
    background: #EAEFF5;
    color: #4D565E;
}
.article-body blockquote > :first-child { margin-top: 0; }

.article-body img {
    display: block;
    width: 100%;
    height: auto;
    margin: 28px 0 0;
    border-radius: 20px;
    background: #EAEFF5;
}

.article-body hr { margin: 36px 0 0; border: 0; border-top: 1px solid #EAEFF5; }

.article-body code {
    padding: 1px 6px;
    border-radius: 6px;
    background: #EAEFF5;
    color: #4D565E;
    font-size: .92em;
}

/* Таблица шире экрана телефона прокручивается внутри своей обёртки, а не
   раздвигает страницу. Строки — светлые плашки со скруглением, как в
   макете раздела. */
.article-table {
    margin: 24px 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.article-table table {
    width: 100%;
    min-width: 680px;
    border-collapse: separate;
    border-spacing: 0 4px;
    font-size: 15px;
    line-height: 1.5;
}
.article-table th {
    padding: 8px 14px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #888D98;
    vertical-align: bottom;
}
.article-table td {
    padding: 14px;
    background: #EAEFF5;
    vertical-align: top;
}
.article-table td:first-child {
    border-radius: 14px 0 0 14px;
    color: #4D565E;
    font-weight: 600;
}
/* Код ошибки («E01, ERR ch1») и короткое название строки не рвём по словам —
   но только в таблицах от трёх колонок. В двухколоночной таблице слева
   бывает целая фраза («требование → что закрывает»), и без переноса она
   выдавливает вторую колонку за край. */
.article-table tr:has(> :nth-child(3)) > td:first-child {
    white-space: nowrap;
}
.article-table td:last-child { border-radius: 0 14px 14px 0; }

@media (min-width: 768px) {
    .article-body { font-size: 17px; }
    .article-body h2 { font-size: 28px; margin-top: 48px; }
    .article-body h3 { font-size: 21px; }
    .article-body p,
    .article-body ul,
    .article-body ol { margin-top: 16px; }
}

@media (min-width: 1280px) {
    .article-body { font-size: 18px; line-height: 1.75; }
    .article-body h2 { font-size: 32px; }
    .article-body h3 { font-size: 23px; }
    .article-table table { font-size: 16px; }
}