/* №224 (05.11.2026, решение владельца — вариант Б «жёлтые акценты», макет серого окна _reports/claude-setup/2026-11-05_оформление-статей/).
   Подключается только на /company/articles/ и /company/news/ (local/php_interface/init.php); все правила — внутри колонки текста
   .lr-art (класс ставит шаблон news.detail/news.default.1 на тех же адресах). Меню, каталог, карточки и прочие страницы не задеты.
   — Таблицы ВСЕХ текстов статей и новостей (обёртка .lr-table-scroll из local/lr-html.php) — вид варианта Б по умолчанию.
   — «Главное», «Важно», «Совет», цифры, шаги, плашка, H2 с иконкой — только по классам (классы.md серого), старые тексты не меняются.
   — Узкий экран: таблица листается в своём блоке (страница вбок не едет), первый столбец закреплён, подсказка «листайте вбок» и
     тень у края — когда таблица действительно шире блока (класс is-scroll ставит local/assets/article/lr-article.js).
   Иконки — local/assets/article/icons/*.svg (24×24, currentColor), в текст вставляются инлайн внутри <span class="lr-art-ico">. */
/* №227: колонка текста — контейнер; раскладка плашки зависит от её ширины (новости с боковым меню на 768 — 438 px), а не экрана */
.lr-art { container-type:inline-size; container-name:lrart; }
.lr-art { --ink:#111; --line:#E4E4E4; --soft:#FAFAFA; --mute:#6B6B6B; --y:#F0DE13; --y15:rgba(240,222,19,.15); --y08:rgba(240,222,19,.08);
    --y-first:#FEFCEC; --y-first2:#FDFADE; }
.lr-art .lr-art-ico { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none; border-radius:50%; background:var(--y); color:var(--ink); }
.lr-art .lr-art-ico svg { width:20px; height:20px; display:block; }

.lr-art h2.lr-art-h2 { display:flex; align-items:center; gap:14px; }

/* Главное */
.lr-art .lr-art-key { background:var(--y15); border-left:4px solid var(--y); padding:18px 24px 14px; margin:0 0 28px; }
.lr-art .lr-art-key__title { display:flex; align-items:center; gap:12px; font-weight:700; font-size:17px; margin-bottom:10px; }
.lr-art .lr-art-key ul { margin:0; padding-left:20px; }
.lr-art .lr-art-key li { margin:0 0 6px; }
.lr-art .lr-art-key li::marker { color:#C9B800; }

/* Важно / Совет */
.lr-art .lr-art-note { display:flex; gap:16px; align-items:flex-start; padding:16px 20px; margin:0 0 28px; }
.lr-art .lr-art-note--warn { background:var(--y15); }
.lr-art .lr-art-note--tip { background:var(--soft); border-left:4px solid var(--y); }
.lr-art .lr-art-note__title { font-weight:700; margin:6px 0 4px; }
.lr-art .lr-art-note p { margin:0; }
.lr-art .lr-art-note > div { min-width:0; }

/* Ключевые цифры */
.lr-art .lr-art-figs { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:16px; margin:0 0 28px; }   /* 3 в ряд, где помещаются; уже — 2 и 1 (у новостей колонка уже: на 768–1024 «Стабилизация» не влезала в треть) */
.lr-art .lr-art-fig { background:var(--soft); border-top:4px solid var(--y); padding:16px 18px; min-width:0; }
.lr-art .lr-art-fig__num { font-size:26px; line-height:32px; font-weight:700; color:var(--ink); margin:10px 0 4px; overflow-wrap:break-word; }   /* перенос — только если число шире карточки */
.lr-art .lr-art-fig__txt { font-size:14px; line-height:20px; color:var(--mute); }

/* Таблицы: все таблицы текста (обёртка .lr-table-scroll) и размеченные классом lr-art-table */
.lr-art .lr-table-scroll { margin:0 0 28px; }
.lr-art .lr-table-scroll > table, .lr-art table.lr-art-table { width:100%; border-collapse:collapse; font-size:14px; line-height:20px; margin:0; }
.lr-art .lr-table-scroll > table th, .lr-art table.lr-art-table th { background:var(--y); color:var(--ink); font-weight:700; text-align:left; padding:12px 14px; border:1px solid #D9C80F; vertical-align:bottom; }
.lr-art .lr-table-scroll > table th .lr-art-ico, .lr-art table.lr-art-table th .lr-art-ico { width:22px; height:22px; background:transparent; vertical-align:-6px; margin-right:6px; display:inline-flex; }
.lr-art .lr-table-scroll > table th .lr-art-ico svg, .lr-art table.lr-art-table th .lr-art-ico svg { width:18px; height:18px; }
.lr-art .lr-table-scroll > table td, .lr-art table.lr-art-table td { padding:12px 14px; border:1px solid var(--line); vertical-align:top; background:#fff; }
.lr-art .lr-table-scroll > table tbody tr:nth-child(even) td, .lr-art table.lr-art-table tbody tr:nth-child(even) td { background:var(--soft); }
/* первый столбец — непрозрачные цвета (закреплённый столбец не просвечивает при прокрутке) */
.lr-art .lr-table-scroll > table td:first-child, .lr-art table.lr-art-table td:first-child { font-weight:700; background:var(--y-first); }
.lr-art .lr-table-scroll > table tbody tr:nth-child(even) td:first-child, .lr-art table.lr-art-table tbody tr:nth-child(even) td:first-child { background:var(--y-first2); }
.lr-art .lr-table-scroll > table.lr-art-table--narrow, .lr-art table.lr-art-table--narrow { width:auto; min-width:380px; }
.lr-art table.lr-art-table--narrow th, .lr-art table.lr-art-table--narrow td { padding:8px 16px; }   /* узкая: плотнее */
.lr-art .lr-table-scroll > table .num, .lr-art table.lr-art-table .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Подсказка «листайте вбок» — только у таблицы, которая шире своего блока (скрипт ставит is-on) */
.lr-art .lr-art-tablehint { display:none; font-size:13px; line-height:18px; color:var(--mute); margin:0 0 8px; }
.lr-art .lr-art-tablehint.is-on { display:block; }

/* №227: излишек до 40 px — ужать поля ячеек, чтобы таблица поместилась без прокрутки (класс lr-fit ставит скрипт) */
.lr-art .lr-table-scroll.lr-fit > table th, .lr-art .lr-table-scroll.lr-fit > table td { padding-left:8px; padding-right:8px; }

/* Таблица шире блока: тень у края, первый столбец закреплён внутри прокрутки самой таблицы (страницу не липнет) */
.lr-art .lr-table-scroll.is-scroll {
    background: linear-gradient(to left, #fff, rgba(255,255,255,0)) right / 24px 100% no-repeat local,
                linear-gradient(to left, rgba(0,0,0,.12), rgba(0,0,0,0)) right / 14px 100% no-repeat scroll; }
.lr-art .lr-table-scroll.is-scroll > table td:first-child, .lr-art .lr-table-scroll.is-scroll > table th:first-child {
    position:sticky; left:0; z-index:1; min-width:120px; box-shadow:1px 0 0 var(--line); }

/* Шаги — жёлтые номера на линии */
.lr-art ol.lr-art-steps { list-style:none; counter-reset:lrstep; padding:0; margin:0 0 28px; }
.lr-art ol.lr-art-steps > li { counter-increment:lrstep !important; position:relative; padding:4px 0 14px 50px; margin:0; }
.lr-art ol.lr-art-steps > li::before { content:counter(lrstep) !important; position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%; background:var(--y); color:var(--ink); font-weight:700; font-size:15px; line-height:32px; text-align:center; z-index:1; }
.lr-art ol.lr-art-steps > li:not(:last-child)::after { content:""; position:absolute; left:15px; top:32px; bottom:0; width:2px; background:var(--y15); }

/* Призыв */
.lr-art .lr-art-cta { display:flex; align-items:center; gap:20px; background:var(--y); color:var(--ink); padding:22px 26px; margin:0 0 28px; }
.lr-art .lr-art-cta .lr-art-ico { background:#fff; }
.lr-art .lr-art-cta__body { flex:1; min-width:0; }
.lr-art .lr-art-cta__body b { display:block; font-size:17px; margin-bottom:4px; }
.lr-art .lr-art-cta__body span { font-size:14px; line-height:20px; }
.lr-art .lr-art-cta__btns { display:flex; gap:10px; flex:none; }
/* №227: места мало — кнопки под текстом (в ряд им нужно ≈ 740 px: иконка, текст от 280 px, две кнопки по 150–170 px) */
@container lrart (max-width: 760px) {
    .lr-art .lr-art-cta { flex-direction:column; align-items:flex-start; }
    .lr-art .lr-art-cta__btns { flex-wrap:wrap; }
}
.lr-art a.lr-art-btn { display:inline-block; background:var(--ink); color:#fff; font-size:15px; padding:9px 20px; border-radius:3px; text-decoration:none; white-space:nowrap; }
.lr-art a.lr-art-btn--ghost { background:#fff; color:var(--ink); }

/* Телефон: карточки цифр и плашка — одна под другой; таблицы в 3+ столбца не сжимаются в столбики по слову — листаются */
@media (max-width:600px) {
    .lr-art .lr-art-figs { grid-template-columns:1fr; gap:10px; }
    .lr-art .lr-art-cta { flex-direction:column; align-items:flex-start; }
    .lr-art .lr-art-cta__btns { flex-wrap:wrap; }
    .lr-art .lr-table-scroll > table:not(.lr-art-table--narrow):has(tr > :nth-child(3)), .lr-art table.lr-art-table--wide { min-width:600px; }
    .lr-art .lr-table-scroll > table:not(.lr-art-table--narrow):has(tr > :nth-child(5)) { min-width:760px; }
    .lr-art .lr-table-scroll > table.lr-art-table--narrow, .lr-art table.lr-art-table--narrow { min-width:0; width:100%; }
}

/* Печать: таблица целиком, без прокрутки, закрепления и подсказки; цвета шапки — как на экране */
@media print {
    .lr-art .lr-table-scroll { overflow:visible !important; background:none !important; }
    .lr-art .lr-table-scroll > table { min-width:0 !important; }
    .lr-art .lr-table-scroll > table td:first-child, .lr-art .lr-table-scroll > table th:first-child { position:static !important; box-shadow:none !important; }
    .lr-art .lr-art-tablehint { display:none !important; }
    .lr-art { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}