/* эТОИР — оформительские блоки статей (CKEditor Style feature).
   Один файл на два контекста: .post-body — публичная статья, .ck-content — админка.
   ponytail: fallback-значения в var() — потому что в админке tokens.css не подключён;
   при расхождении править tokens.css, fallback — только для превью в редакторе. */

.post-body .info-box,
.ck-content .info-box {
    margin: 28px 0;
    padding: 16px 20px;
    border-left: 3px solid var(--info, #1F5075);
    background: var(--info-bg, #EDF1F5);
    color: var(--info-ink, #123249);
    border-radius: 0 var(--radius-sm, 3px) var(--radius-sm, 3px) 0;
}

.post-body .warn-box,
.ck-content .warn-box {
    margin: 28px 0;
    padding: 16px 20px;
    border-left: 3px solid var(--warn, #E0A400);
    background: var(--warn-bg, #F7EDD3);
    color: var(--warn-ink, #7A5600);
    border-radius: 0 var(--radius-sm, 3px) var(--radius-sm, 3px) 0;
}

.post-body .lead,
.ck-content .lead {
    font-size: 1.15em;
    line-height: 1.6;
    color: var(--text-muted, #5E665F);
    margin-bottom: 28px;
}

.post-body blockquote.side-quote,
.ck-content blockquote.side-quote {
    float: right;
    width: min(38%, 320px);
    margin: 8px 0 20px 28px;
    padding: 0 0 0 20px;
    border-left: 3px solid var(--accent, #FD7500);
    background: none;
    border-radius: 0;
    font-size: 1.1em;
    line-height: 1.5;
    color: var(--text, #171B18);
}

@media (max-width: 640px) {
    .post-body blockquote.side-quote,
    .ck-content blockquote.side-quote {
        float: none;
        width: auto;
        margin-left: 0;
    }
}

.post-body .marker,
.ck-content .marker {
    background: var(--warn-bg, #F7EDD3);
    padding: 0 2px;
    border-radius: 2px;
}

/* Ключевой вывод — единственный блок с заливкой в акцент: на статью его один. */
.post-body .takeaway,
.ck-content .takeaway {
    margin: 32px 0;
    padding: 18px 22px;
    border: 1px solid var(--accent, #FD7500);
    border-left-width: 4px;
    border-radius: 0 var(--radius-sm, 3px) var(--radius-sm, 3px) 0;
    background: var(--accent-light, #FFF3E8);
    font-weight: 600;
    color: var(--text, #171B18);
}

.post-body .case-box,
.ck-content .case-box {
    margin: 28px 0;
    padding: 16px 20px;
    border: 1px dashed var(--border-strong, #C4C9C5);
    border-radius: var(--radius-sm, 3px);
    background: var(--bg-sunken, #F5F6F5);
}

.post-body blockquote.expert-quote,
.ck-content blockquote.expert-quote {
    margin: 32px 0;
    padding: 0 0 0 28px;
    border: 0;
    border-left: 2px solid var(--border-strong, #C4C9C5);
    background: none;
    border-radius: 0;
    font-size: 1.15em;
    line-height: 1.55;
    font-style: italic;
    color: var(--text, #171B18);
}

/* Порядок действий: крупные номера — шаги должны читаться как шаги. */
.post-body ol.steps,
.ck-content ol.steps {
    margin: 28px 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.post-body ol.steps > li,
.ck-content ol.steps > li {
    position: relative;
    margin: 0 0 16px;
    padding-left: 48px;
    min-height: 32px;
    counter-increment: step;
}

.post-body ol.steps > li::before,
.ck-content ol.steps > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--info, #1F5075);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

/* Кнопка — обычная ссылка с классом (плагина кнопок в сборке нет). */
.post-body a.btn-article,
.ck-content a.btn-article {
    display: inline-block;
    margin: 8px 8px 8px 0;
    padding: 12px 24px;
    border: 1px solid var(--accent, #FD7500);
    border-radius: var(--radius-sm, 3px);
    background: var(--accent, #FD7500);
    color: var(--text, #171B18);
    font-weight: 600;
    text-decoration: none;
}

.post-body a.btn-article:hover,
.ck-content a.btn-article:hover {
    background: var(--accent-dark, #E06900);
    border-color: var(--accent-dark, #E06900);
    color: var(--text, #171B18);
}

.post-body a.btn-article--outline,
.ck-content a.btn-article--outline {
    background: none;
    border-color: var(--border-strong, #C4C9C5);
    color: var(--text, #171B18);
}

.post-body a.btn-article--outline:hover,
.ck-content a.btn-article--outline:hover {
    background: none;
    border-color: var(--accent, #FD7500);
}

/* Подписи к картинке и таблице (toggleImageCaption / toggleTableCaption). */
.post-body figcaption,
.ck-content figcaption {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-muted, #5E665F);
    text-align: left;
}

.post-body figure.image,
.ck-content figure.image {
    margin: 32px 0;
}

/* Подпись таблицы CKEditor кладёт в figcaption внутрь рамки figure.table. */
.post-body figure.table > figcaption,
.ck-content figure.table > figcaption {
    padding: 10px 15px;
    margin-top: 0;
}

/* Чек-лист (todoList) — на сайте чекбоксы неактивны, это перечень, не форма. */
.post-body ul.todo-list,
.ck-content ul.todo-list {
    margin: 24px 0;
    padding: 0;
    list-style: none;
}

.post-body ul.todo-list > li,
.ck-content ul.todo-list > li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.post-body ul.todo-list input[type="checkbox"] {
    margin-top: 5px;
    accent-color: var(--info, #1F5075);
}