/* Текст, написанный в админке.

   Общий файл: его подключают и страницы описания сервера, и статья
   новости. Редактор там один и тот же, значит и оформление должно быть
   одно — иначе список в описании и список в новости выглядят из разных
   сайтов.

   Правила ниже переехали сюда из description.css 22.10.2026. Цветовые
   переменные продублированы на самом `.wprose`: раньше они приходили от
   `.dsc`, а на странице новости этой обёртки нет.

   ПРО ЕДИНИЦЫ: у `html` в теме плавающий размер шрифта (75% до 540 px,
   87% до 840 px, дальше 100%), поэтому 1rem на телефоне — это 12 px.
   Всё, что должно быть заданного размера, пишем в пикселях. */

.wprose {
    --dsc-bronze: #907b5b;
    --dsc-bronze-light: #c6b89a;
    --dsc-ink: #e0d6bf;
    --dsc-muted: #8c949b;
    --dsc-line: rgba(144, 123, 91, .34);
}

/* ======================= Текст из админки =======================

   Наполнение приходит из редактора: заголовки, списки, таблицы,
   картинки. Редактор размечает пункты списка как
   `<li data-list="bullet"><span class="ql-ui"></span>…`, поэтому
   собственный маркер рисуется у `li`, а служебный span гасится.      */

.wprose {
    font-family: var(--font-text);
    font-size: 15px;
    line-height: 1.68;
    color: #b9c0c7;
    overflow-wrap: break-word;
}

.wprose > *:first-child {
    margin-top: 0;
}

.wprose > *:last-child {
    margin-bottom: 0;
}

.wprose p {
    margin: 0 0 14px;
}

.wprose h1,
.wprose h2,
.wprose h3,
.wprose h4,
.wprose h5,
.wprose h6 {
    margin: 26px 0 12px;
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .03em;
    color: var(--dsc-ink);
}

.wprose h1,
.wprose h2 {
    font-size: 21px;
    text-transform: uppercase;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--dsc-line);
}

.wprose h3 {
    font-size: 18px;
}

.wprose h4,
.wprose h5,
.wprose h6 {
    font-size: 16px;
    color: var(--dsc-bronze-light);
}

.wprose a {
    color: var(--dsc-bronze-light);
    border-bottom: 1px solid rgba(198, 184, 154, .35);
    transition: color .3s, border-color .3s;
}

.wprose a:hover {
    color: #f0e7d4;
    border-bottom-color: rgba(240, 231, 212, .7);
}

.wprose strong,
.wprose b {
    color: var(--dsc-ink);
    font-weight: 700;
}

.wprose em,
.wprose i {
    font-style: italic;
}

.wprose img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 18px 0;
}

.wprose ul,
.wprose ol {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.wprose li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 7px;
}

.wprose li .ql-ui {
    display: none;
}

.wprose ul > li:before {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    width: 5px;
    height: 5px;
    background: var(--dsc-bronze);
    transform: rotate(45deg);
}

.wprose ol {
    counter-reset: wprose-ol;
}

.wprose ol > li {
    counter-increment: wprose-ol;
    padding-left: 26px;
}

.wprose ol > li:before {
    content: counter(wprose-ol) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--dsc-bronze);
}

.wprose blockquote {
    margin: 18px 0;
    padding: 12px 18px;
    border-left: 2px solid var(--dsc-bronze);
    background: rgba(144, 123, 91, .08);
    color: #c3cad1;
    font-style: italic;
}

.wprose code,
.wprose pre {
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    color: var(--dsc-bronze-light);
}

.wprose code {
    padding: 2px 6px;
    background: rgba(144, 123, 91, .12);
}

.wprose pre {
    margin: 18px 0;
    padding: 14px 16px;
    overflow-x: auto;
    background: #15181d;
    box-shadow: inset 0 0 0 1px var(--dsc-line);
}

.wprose hr {
    height: 1px;
    margin: 24px 0;
    border: 0;
    background: linear-gradient(90deg,
    rgba(144, 123, 91, 0) 0%, rgba(144, 123, 91, .45) 50%, rgba(144, 123, 91, 0) 100%);
}

/* Таблицы.

   Редактор отдаёт таблицу не как есть: помощник `app/Helpers/editor.php`
   заворачивает её в `div.table-responsive.box` с тенью и отступом
   **прямо в атрибуте style**, а самой таблице ставит класс `table`.
   Инлайновый стиль перебивается только `!important` — отсюда две строки
   ниже. Обёртка иногда накладывается дважды, поэтому у вложенной
   снимаются поля.

   Селекторы написаны с `.wprose` впереди ради веса: в теме есть
   `.table thead th`, и правило с одним классом ему проигрывает. */

.wprose .table-responsive {
    margin: 18px 0;
    padding: 0 !important;
    box-shadow: none !important;
    overflow-x: auto;
}

.wprose .table-responsive .table-responsive {
    margin: 0;
}

.wprose table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    font-family: var(--font-text);
    font-size: 14px;
}

.wprose table th,
.wprose table td {
    height: auto;
    padding: 10px 14px;
    text-align: left;
    border: 1px solid var(--dsc-line);
    color: #b9c0c7;
}

.wprose table thead {
    background: transparent;
}

.wprose table th {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--dsc-ink);
    background: rgba(144, 123, 91, .14);
}

/* Тема верстает `.table` под свои нужды: первой ячейке строки ставит
   `display: flex` и ширину 70&nbsp;%, последней — 30&nbsp;% и
   выравнивание по центру. На таблице из описания от этого разъезжались
   колонки: шапка шла по одной сетке, тело по другой. Возвращаем обычную
   таблицу. */
.wprose table tbody tr td:first-child,
.wprose table tbody tr td:last-child {
    display: table-cell;
    width: auto;
    text-align: left;
}

.wprose table tbody tr td {
    line-height: 1.6;
    vertical-align: top;
}

/* Полосатость рисуем на ячейках, поэтому полосу темы на строке гасим —
   иначе два слоя складываются. */
.wprose table tbody tr:nth-child(2n) {
    background: transparent;
}

.wprose table tbody tr:nth-child(2n) td {
    background: rgba(255, 255, 255, .025);
}

/* Пустые `tbody`, которые помощник вставляет рядом с настоящим, не
   должны оставлять в таблице пробел. */
.wprose table tbody:empty {
    display: none;
}