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

   Язык блоков — DESIGN_SYSTEM §5/§8: засечка 2px, прямой угол 4px, mono-метка
   (шкала прибора), без теней. Охра — одно пятно на статью: «Ключевой вывод»
   и кнопка; остальные засечки сталь/нейтраль/сигнал. */

.post-body .info-box,
.post-body .warn-box,
.post-body .case-box,
.ck-content .info-box,
.ck-content .warn-box,
.ck-content .case-box {
    margin: var(--s-6, 32px) 0;
    padding: var(--s-4, 16px) var(--s-5, 24px);
    border-left: 2px solid;
    border-radius: 0 var(--r-md, 4px) var(--r-md, 4px) 0;
}

/* Mono-метка над текстом: блок называет себя, как шильдик. */
.post-body :is(.info-box, .warn-box, .case-box, .takeaway)::before,
.ck-content :is(.info-box, .warn-box, .case-box, .takeaway)::before {
    display: block;
    margin-bottom: var(--s-2, 8px);
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: var(--t-label, 11px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: var(--tr-label, 0.12em);
    text-transform: uppercase;
}

.post-body .info-box,
.ck-content .info-box {
    border-color: var(--info, #1F5075);
    background: var(--info-bg, #EDF1F5);
    color: var(--info-ink, #123249);
}

.post-body .info-box::before,
.ck-content .info-box::before { content: "Справка"; }

.post-body .warn-box,
.ck-content .warn-box {
    border-color: var(--warn, #E0A400);
    background: var(--warn-bg, #F7EDD3);
    color: var(--warn-ink, #7A5600);
}

.post-body .warn-box::before,
.ck-content .warn-box::before { content: "Внимание"; }

.post-body .case-box,
.ck-content .case-box {
    border-color: var(--border-strong, #B2BAB4);
    background: var(--bg-sunken, #F3F5F3);
    color: var(--text, #171B18);
}

.post-body .case-box::before,
.ck-content .case-box::before {
    content: "Из практики";
    color: var(--text-muted, #5E665F);
}

/* Ключевой вывод — единственное «событие» статьи: инверсная плита с охряной
   засечкой (§8.3 — заливка охрой только на инверсной полосе, на светлом — 2px). */
.post-body .takeaway,
.ck-content .takeaway {
    margin: var(--s-7, 48px) 0;
    padding: var(--s-5, 24px);
    border-top: 2px solid var(--a-500, #FD7500);
    border-radius: 0 0 var(--r-md, 4px) var(--r-md, 4px);
    background: var(--n-900, #171B18);
    color: var(--n-25, #FAFBFA);
    font-size: var(--t-lead, 19px);
    font-weight: 600;
    line-height: var(--lh-snug, 1.22);
}

.post-body .takeaway::before,
.ck-content .takeaway::before {
    content: "Ключевой вывод";
    margin-bottom: var(--s-3, 12px);
    color: var(--a-400, #FE8A2A);
}

.post-body .lead,
.ck-content .lead {
    font-size: var(--t-lead, 19px);
    line-height: var(--lh-body, 1.6);
    color: var(--text-muted, #5E665F);
    margin-bottom: var(--s-6, 32px);
}

.post-body blockquote.side-quote,
.ck-content blockquote.side-quote {
    float: right;
    width: min(38%, 320px);
    margin: var(--s-2, 8px) 0 var(--s-5, 24px) var(--s-6, 32px);
    padding: 0 0 0 var(--s-4, 16px);
    border-left: 2px solid var(--p-500, #1F5075);
    background: none;
    border-radius: 0;
    font-size: var(--t-lead, 19px);
    font-weight: 600;
    line-height: var(--lh-snug, 1.22);
    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);
    color: var(--warn-ink, #7A5600);
    padding: 0 2px;
    border-radius: var(--r-xs, 2px);
}

/* Курсива у Golos Text нет (самохост — только прямое начертание): italic
   рисовался синтетическим наклоном. Цитату держит кегль и засечка. */
.post-body blockquote.expert-quote,
.ck-content blockquote.expert-quote {
    margin: var(--s-7, 48px) 0;
    padding: 0 0 0 var(--s-5, 24px);
    border: 0;
    border-left: 2px solid var(--text, #171B18);
    background: none;
    border-radius: 0;
    font-size: var(--t-h3, 1.3rem);
    font-weight: 600;
    line-height: var(--lh-snug, 1.22);
    letter-spacing: var(--tr-head, -0.02em);
    color: var(--text, #171B18);
}

/* Порядок действий: номер — показание, а не бейдж. Прямой угол, mono, 01. */
.post-body ol.steps,
.ck-content ol.steps {
    margin: var(--s-6, 32px) 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.post-body ol.steps > li,
.ck-content ol.steps > li {
    position: relative;
    margin: 0 0 var(--s-4, 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, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md, 4px);
    background: var(--p-500, #1F5075);
    color: var(--ink-on-brand, #fff);
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: var(--t-xs, 13px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Кнопка — обычная ссылка с классом (плагина кнопок в сборке нет).
   Охра — плашка с тёмными чернилами (tokens: белый на a-500 = 2.7:1). */
.post-body a.btn-article,
.ck-content a.btn-article {
    display: inline-block;
    margin: var(--s-2, 8px) var(--s-2, 8px) var(--s-2, 8px) 0;
    padding: 12px var(--s-5, 24px);
    border: 1px solid var(--a-500, #FD7500);
    border-radius: var(--r-md, 4px);
    background: var(--a-500, #FD7500);
    color: var(--ink-on-accent, #0D100E);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--d-fast, 90ms) var(--e-out, ease-out);
}

.post-body a.btn-article:hover,
.ck-content a.btn-article:hover {
    background: var(--a-600, #E56600);
    border-color: var(--a-600, #E56600);
    color: var(--ink-on-accent, #0D100E);
}

.post-body a.btn-article:active {
    transform: translateY(1px);
}

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

.post-body a.btn-article--outline:hover,
.ck-content a.btn-article--outline:hover {
    background: var(--bg-sunken, #F3F5F3);
    border-color: var(--text, #171B18);
}

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

.post-body figure.image,
.ck-content figure.image {
    margin: var(--s-6, 32px) 0;
}

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

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

.post-body ul.todo-list > li,
.ck-content ul.todo-list > li {
    margin-bottom: 10px;
}

.post-body ul.todo-list .todo-list__label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.post-body ul.todo-list input[type="checkbox"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 0.3em;
    accent-color: var(--info, #1F5075);
}