/* Страничные стили wiki-article. Извлечено из макета v2/23-wiki-article.html. */
.article{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:44px; align-items:start; }
@media (max-width:1023px){ .article{ grid-template-columns:1fr; gap:28px; } }
.toc{ border-left:2px solid var(--line); padding-left:18px;
  display:flex; flex-direction:column; gap:12px; }
.toc h2{ font-family:var(--f-text); font-size:14px; font-weight:700; color:var(--ink-soft); }
.toc ul{ display:flex; flex-direction:column; gap:9px; }
.toc a{ color:var(--ink-soft); text-decoration:none; font-size:15px; }
.toc a:hover{ color:var(--accent); text-decoration:underline; }
.article .prose{ max-width:66ch; font-size:18px; }
.article .prose h2{ font-size:26px; margin:2em 0 .5em; }
.article .prose h2:first-child{ margin-top:0; }
.pull{ border-left:3px solid var(--clay); background:var(--clay-soft); padding:16px 20px; border-radius:0 var(--r-btn) var(--r-btn) 0; font-size:16.5px; margin:26px 0; }
.also{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
@media (max-width:760px){ .also{ grid-template-columns:1fr; } }

/* ---- Блоки документа статьи ---- */
/* Тело статьи собирается из блоков JSON: ниже стили тех, которых нет в
   дизайн-системе. Здесь ритм держат margin, а не gap: .prose — сплошной
   текст, где отступы соседей должны схлопываться (после абзаца перед
   заголовком нужен зазор заголовка, а не их сумма). Это единственное место
   на сайте, где так, и потому у блоков margin сверху и снизу одинаковый —
   порядок блоков в документе произвольный. */
.article .prose h2{ scroll-margin-top:24px; }
.pull{ margin:26px 0; display:flex; flex-direction:column; gap:10px; }
.pull .au{ font-size:14px; color:var(--ink-faint); }

.short{ padding:20px 22px; margin:26px 0; display:flex; flex-direction:column; gap:10px; }
.short h3{ font-family:var(--f-text); font-size:15px; font-weight:700; }
.short ul{ display:flex; flex-direction:column; gap:8px; }
.short li{ position:relative; padding-left:18px; font-size:16px; }
.short li::before{ content:"•"; position:absolute; left:2px; color:var(--clay); }

.prose .notice{ margin:26px 0; font-size:16px; }
/* Предупреждение и подтверждение отличаются только цветом полосы и иконки:
   форма врезки одна на все варианты. */
.notice-warn{ border-left-color:var(--clay); }
.notice-warn svg{ color:var(--clay); }
.notice-ok{ border-left-color:var(--accent); background:var(--accent-soft); }
.notice-ok svg{ color:var(--accent); }

.prose .table-wrap,
.prose .grid{ margin:26px 0; }
.prose table.data{ font-size:15.5px; }
.prose table.data th, .prose table.data td{ padding:12px 16px; }

.tl{ margin:26px 0; }
/* flex-wrap:wrap обязателен: на узком экране дизайн-система отдаёт .yr всю
   строку (flex-basis:100%), и без переноса год просто распирал бы строку. */
.tl li{ display:flex; flex-wrap:wrap; gap:6px 18px; padding:16px 0; border-top:1px solid var(--line); }
.tl li:first-child{ border-top:0; padding-top:0; }
.tl .yr{ flex:none; width:92px; font-weight:600; font-size:15px; color:var(--accent); font-variant-numeric:tabular-nums; }
.tl li > div{ display:flex; flex-direction:column; gap:4px; }
.tl h4{ font-family:var(--f-text); font-size:16.5px; font-weight:700; }
.tl p{ font-size:16px; color:var(--ink-soft); }

.cta{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin:26px 0; padding:20px 22px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); }
.cta > div{ display:flex; flex-direction:column; gap:6px; }
.cta h3{ font-family:var(--f-head); font-size:18px; font-weight:600; }
.cta p{ font-size:15.5px; color:var(--ink-soft); }

.code{ margin:26px 0; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-btn);
  background:var(--surface); font-size:14.5px; overflow-x:auto; }
.inl{ padding:2px 6px; border-radius:6px; background:var(--surface-2); font-size:.92em; }

@media (max-width:609px){
  .tl .yr{ width:auto; }
}