/* Блог Валеры — статьи, хабы, список. Вёрстка по веб-брендбуку (docs/brandbook/RULES.md):
   подключается ПОСЛЕ fonts.css, tokens.css и ui.css. Своих цветов и :root нет — только токены,
   тема (светлая/тёмная) идёт от устройства через tokens.css.
   Страницы собирает движок api/blog/_blog-render.php; классы — оттуда.
   Шапка .site-hdr, подвал .site-ftr, .container(.narrow), .empty, .byline, .chip-f, .grid-cards — из ui.css. */

/* Плашка предпросмотра черновика */
.preview{position:sticky;top:0;z-index:5;padding:var(--s2) var(--s4);background:var(--warn-bg);color:var(--fg);font-size:var(--fs-cap);font-weight:600;text-align:center}

/* Хлебные крошки — сразу под шапкой, над H1 */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s2);padding-top:var(--s1);font-size:var(--fs-cap);color:var(--fg-2)}
.crumbs a{color:var(--fg-2);display:inline-flex;align-items:center;min-height:44px}   /* цель нажатия 44 px */
.crumbs a:hover{color:var(--fg)}
.crumbs i{font-style:normal;color:var(--fg-3)}

/* Статья, хаб, список: колонка текста до 680 px (.container.narrow) */
.art{display:grid;gap:var(--s5);padding-block:var(--s4) var(--s6)}
.art article{display:grid;gap:var(--s4);min-width:0}
.art section{display:grid;gap:var(--s3);min-width:0}
.art h1{font-size:var(--fs-h1);line-height:1}
.art h2{font-size:var(--fs-h2);line-height:1.05}
.art section>h2{margin-top:var(--s4)}
.art.hub{gap:var(--s4)}
.art.hub>h2{margin-top:var(--s4)}
.art :where(p,li){line-height:1.5}   /* :where — чтобы .byline p из ui.css (1.3) перебивал */
.art section>ul,.art section>ol{margin:0;padding-left:var(--s5);display:grid;gap:var(--s1)}
.dates{font-size:var(--fs-cap);color:var(--fg-2)}
.lead{font-size:var(--fs-sub)}

/* Таблица: листается внутри своего блока, страница вбок не едет. Ячейки — .tbl из ui.css */
figure.tbl{margin:0;overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--surface);border-radius:var(--r-card);font-size:var(--fs-body)}
figure.tbl table{border-collapse:collapse;width:100%;min-width:480px;line-height:1.4}
figure.tbl caption{caption-side:top;text-align:left;padding:var(--s3) var(--s3) var(--s1);font-size:var(--fs-cap);color:var(--fg-2)}
figure.tbl th{color:var(--fg-2)}

/* Блок записи — карточка; мягкий вариант — контурный */
.cta{display:grid;gap:var(--s2);justify-items:start;padding:var(--s4);border-radius:var(--r-card);background:var(--surface)}
.cta-soft{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.cta-k{font-size:var(--fs-cap);color:var(--fg-2)}
.cta-p{font-size:var(--fs-sub);line-height:1.15}
.cta-m{color:var(--fg-2);line-height:1.5}
.cta p{color:var(--fg-2)}
.cta-b{display:inline-flex;align-items:center;justify-content:center;height:var(--h-btn);margin-top:var(--s2);padding:0 var(--s5);border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;white-space:nowrap}
.cta-b:hover{opacity:.85}
@media (max-width:639px){.cta{justify-items:stretch}.cta-b{white-space:normal;text-align:center}}

/* Частые вопросы */
.art .faq{gap:0}
.faq h2{margin-bottom:var(--s3)}
.faq details{border-top:1px solid var(--line);padding-block:var(--s3)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;position:relative;padding-right:var(--s6);min-height:var(--h-btn);display:flex;align-items:center;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:var(--s1);top:50%;transform:translateY(-50%);color:var(--fg-2);font-size:var(--fs-sub)}
.faq details[open] summary::after{content:'–'}
.faq details p{margin-top:var(--s2)}

.src ol{font-size:var(--fs-cap);color:var(--fg-2)}
.test{color:var(--fg-2)}

/* Подпись автора с фото Валеры — .byline из ui.css */

/* Читайте также */
.rel{display:grid;gap:var(--s2);padding:var(--s4);border-radius:var(--r-card);background:var(--surface)}
.rel h2{font-size:var(--fs-sub);line-height:1.15}
.rel ul{list-style:none;margin:0;padding:0;display:block}
.rel li{padding-block:var(--s2);border-top:1px solid var(--line);line-height:1.3}
.rel li:first-child{border-top:0}

/* Направления — чипы-ссылки a.chip-f из ui.css. Поле 16 вместо 14 и межстрочный от статьи —
   как было до переноса в ui.css (иначе текст в чипе сдвигается на долю пикселя) */
.hubs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.hubs .chip-f{padding:0 var(--s4);line-height:inherit}

/* Программы на хабе: .grid-cards.g2 из ui.css (1 колонка до 640, дальше 2) */

/* Список статей */
.list{list-style:none;margin:0;padding:0;display:block}
.list a{display:grid;gap:var(--s1);padding-block:var(--s4);border-top:1px solid var(--line);color:var(--fg);text-decoration:none}
.list a:hover b{text-decoration:underline}
.list b{font-size:var(--fs-sub);font-weight:400;line-height:1.15}
.list span{color:var(--fg-2);line-height:1.5}
.list time{margin-top:var(--s1);font-size:var(--fs-cap);color:var(--fg-3)}

/* Подвал — .site-ftr из ui.css; здесь только абзац о Валере */
.site-ftr p{max-width:680px;line-height:1.5}