/* Теплотрасса.орг — компоненты
   Нумерация соответствует docs/brief-2-components.md */

/* ── 1.1 Бейдж статуса ─────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 2px 8px; border-radius: var(--radius-control);
  font: 500 13px/18px var(--font-text); white-space: nowrap;
}
.badge--l { font-size: 15px; line-height: 20px; padding: 4px 10px; }
.badge::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; }

.badge--ok    { background: var(--ok-bg); color: var(--ok-ink); }
.badge--ok::before { background: var(--ok); }

.badge--limited { background: var(--warn-bg); color: var(--warn-ink); }
.badge--limited::before { background: var(--warn); }

.badge--check { border: 1px solid var(--hairline-strong); color: var(--neutral); padding: 1px 7px; }
.badge--check::before { border: 1.5px solid var(--neutral); background: none; }

.badge--historic { background: var(--info-bg); color: var(--info-ink); }
.badge--historic::before { width: 7px; height: 7px; border-radius: 0; background: var(--return);
                           transform: rotate(45deg); }

.badge--dev { border: 1px dashed var(--hairline-strong); color: var(--ink-muted); padding: 1px 7px; }
.badge--dev::before { display: none; }

.badge--dead { background: var(--surface-sunk); color: var(--off-ink); }
.badge--dead::before { width: 9px; height: 1.5px; border-radius: 0; background: var(--off); }

/* 1.2 Метастрока источника — часть бейджа, не отдельный текст */
.status-line { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
               margin: 0 0 var(--s5); }
.status-line .meta { margin: 0; }

/* ── 2.1 Паспорт системы ───────────────────────────────── */
.passport {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-block); padding: var(--s4) var(--s5);
}
.passport > dl { margin: 0; }
/* minmax(0, 1fr), а не 1fr: у элемента грида min-width по умолчанию auto,
   и значение шире колонки не сжимается, а выталкивает строку за край.
   Ловится на длинных значениях в узкой колонке паспорта — например
   на бейдже «Разработка, не в серии», который ещё и nowrap. */
.passport .row {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s3);
  padding: 7px 0; border-top: 1px solid var(--hairline); align-items: baseline;
}
/* В паспорте бейджу разрешено переноситься: колонка узкая, и лучше две строки,
   чем горизонтальная прокрутка всей страницы */
.passport .badge { white-space: normal; }
.passport .row:first-child { border-top: 0; }
.passport dt {
  font: 500 13px/18px var(--font-text); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted); margin: 0;
}
.passport dd {
  margin: 0; font: 400 14px/20px var(--font-mono);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.passport dd.empty { color: var(--ink-muted); }   /* «нет данных» — читаемо, не ink-faint */

/* Кликабельна МЕТКА поля, а не значение */
.passport dt .term,
.term {
  border-bottom: 1px dotted var(--hairline-strong);
  color: inherit; cursor: help; text-decoration: none;
}
.term:hover { border-bottom-color: var(--ink-muted); color: inherit; text-decoration: none; }

@media (max-width: 560px) {
  .passport .row { grid-template-columns: 1fr; gap: 2px; }
}

/* ── 2.6 Раскрываемый технический блок ─────────────────── */
.tech > summary {
  font: 600 21px/28px var(--font-head); color: var(--ink);
  cursor: pointer; list-style: none; padding: var(--s3) 0;
  border-top: 1px solid var(--hairline);
  display: flex; align-items: baseline; gap: var(--s2);
}
.tech > summary::-webkit-details-marker { display: none; }
.tech > summary::before { content: "▸"; color: var(--ink-muted); font: 400 15px/28px var(--font-mono); }
.tech[open] > summary::before { content: "▾"; }
.tech > summary .hint { font: 400 15px/22px var(--font-text); color: var(--ink-muted); }
.tech[open] > summary .hint { display: none; }
.tech > .body { padding-bottom: var(--s4); }

/* ── 2.8 Чек-лист ──────────────────────────────────────── */
/* Маркер абсолютным позиционированием, а не колонкой грида.
   Грид здесь ломается на любом пункте с разметкой внутри: ::before занимает
   первую колонку, первый элемент (например <strong>) — вторую, а остальной
   текст уезжает в первую колонку шириной 22px и рвётся по слову в строке. */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  position: relative;
  padding: var(--s3) 0 var(--s3) 34px;
  border-top: 1px solid var(--hairline);
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--s3) + 7px);
  width: 14px; height: 14px; border: 1px solid var(--ink-muted);
}

/* ── 2.9 Таблица сравнения ─────────────────────────────── */
.compare-wrap { overflow-x: auto; }
.compare {
  width: 100%; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-block); overflow: hidden;
}
.compare th, .compare td { text-align: left; padding: 10px var(--s5); vertical-align: middle; }
.compare thead th { border-bottom: 1px solid var(--ink); font: 500 17px/22px var(--font-text); }
.compare thead th:first-child {
  font: 500 13px/18px var(--font-text); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted); width: 220px;
}
.compare tbody th {
  font: 500 13px/18px var(--font-text); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 500;
}
.compare tbody tr { border-bottom: 1px solid var(--hairline); }
.compare td { font: 400 15px/22px var(--font-mono); font-variant-numeric: tabular-nums; }
/* Различия обведены рамкой, а не цветом — цвет читался бы как «лучше» */
.compare td.diff > span {
  display: inline-block; border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-control); padding: 2px 8px;
}

@media (max-width: 780px) {
  .compare, .compare thead, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare thead { display: none; }
  .compare tbody tr { padding: var(--s3) var(--s4); }
  .compare tbody th { padding: 0; }
  .compare td { padding: 2px 0; }
  .compare td::before { content: attr(data-sys) ": "; font: 500 13px/18px var(--font-text);
                        color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; }
}

/* ── 2.10 Карточка системы ─────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s4); }
/* Колонка, а не block: внутренности карточки — это <span>, и при display:block
   они остаются строчными. Тогда margin-top у производителя, отбивка бейджа
   и линейка над характеристиками не работают, и всё слипается в один абзац.
   Заметно это стало на карточках с производителем — в реестре и на задачах. */
.card {
  display: flex; flex-direction: column; align-items: stretch;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-block); padding: var(--s4); text-decoration: none; color: inherit;
}
/* Бейдж не тянется на всю ширину: он метка, а не полоса */
.card__badge { align-self: flex-start; }
/* Характеристики и дата прижаты к низу — у карточек в ряду разной высоты
   заголовки и так вверху, а линейка над спецификацией должна идти одной линией */
.card__spec { margin-top: auto; }
.card:hover { border-color: var(--ink-faint); text-decoration: none; color: inherit; }
.card__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.card__name { font: 500 17px/24px var(--font-text); color: var(--ink); }
.card__arrow { color: var(--return); }
.card__maker { font: 400 14px/20px var(--font-text); color: var(--ink-muted); margin-top: 2px; }
.card__badge { margin: 10px 0; }
.card__spec {
  border-top: 1px solid var(--hairline); padding-top: 10px;
  font: 400 14px/20px var(--font-mono); color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.card__checked { font: 400 13px/18px var(--font-text); color: var(--ink-muted); margin-top: var(--s1); }

/* ── 3.3 Частые заблуждения ────────────────────────────── */
.myths { background: var(--surface-sunk); border-radius: var(--radius-block); padding: var(--s5); }
.myths > div + div { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--hairline); }
.myths .was { font: 400 15px/22px var(--font-text); color: var(--ink-muted); }
.myths .is  { font: 400 17px/28px var(--font-text); color: var(--ink); margin-top: var(--s1); }

/* ── 3.2 FAQ ───────────────────────────────────────────── */
.faq > details { border-top: 1px solid var(--hairline); }
.faq > details > summary {
  font: 500 17px/26px var(--font-text); color: var(--ink);
  padding: 14px 0; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: var(--s4);
}
.faq > details > summary::-webkit-details-marker { display: none; }
.faq > details > summary::after { content: "▸"; color: var(--ink-muted); font-family: var(--font-mono); }
.faq > details[open] > summary::after { content: "▾"; }
.faq > details > p { margin: 0 0 14px; color: var(--ink-muted); }

/* ── 1.4 Блок-мост ─────────────────────────────────────── */
.bridge {
  background: var(--surface-sunk); border-left: 3px solid var(--return);
  border-radius: var(--radius-block); padding: var(--s4) var(--s5); margin: 0 0 var(--s6);
}
.bridge .k {
  font: 500 13px/18px var(--font-text); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s1);
}
.bridge p { margin: 0 0 var(--s1); }

/* ── 5.1 Блок «Где взять» ──────────────────────────────── */
/* Строки, не карточки. Без рамки и заливки. flow здесь не используется никогда. */
.where-to-get { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
                padding: var(--s4) 0; margin: var(--s7) 0 0; }
.where-to-get h2 { margin-top: 0; }
.supplier { padding: var(--s3) 0; border-top: 1px solid var(--hairline); }
.supplier:first-of-type { border-top: 0; }
.supplier__top { display: flex; justify-content: space-between; gap: var(--s4); align-items: baseline; }
.supplier__name { font: 400 17px/26px var(--font-text); }
.supplier__role { font: 400 14px/20px var(--font-text); color: var(--ink-muted); }
.ext::after { content: " ↗"; font-size: .9em; }

/* ── 7.7 Панель фильтров ───────────────────────────────── */
.filters .group { border-top: 1px solid var(--hairline); padding: 14px 0; }
.filters .group__name { font: 500 15px/22px var(--font-text); color: var(--ink); margin-bottom: var(--s2); }
.filters .opts { display: flex; flex-direction: column; gap: 6px; }
.filters label { display: flex; align-items: center; gap: var(--s2);
                 font: 400 15px/22px var(--font-text); color: var(--ink-muted); cursor: pointer; }
.filters input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--return); flex: none; }
.filters .n { font: 400 13px/18px var(--font-mono); color: var(--ink-muted); margin-left: auto; }

.chips { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s5); align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  font: 500 14px/20px var(--font-text); color: var(--return);
  border: 1px solid var(--return); border-radius: var(--radius-control); padding: 3px 10px;
  background: none; cursor: pointer;
}

.result-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--ink); margin-bottom: var(--s5);
}
.result-head .count { font: 500 15px/22px var(--font-text); color: var(--ink); }
.result-head .order { font: 400 14px/20px var(--font-text); color: var(--ink-muted); }

/* ── 9.1 Пустое состояние ──────────────────────────────── */
.empty-state { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
               padding: var(--s5) 0; max-width: var(--w-text); }
.empty-state .links { display: flex; gap: var(--s4); flex-wrap: wrap; font: 500 15px/22px var(--font-text); }

/* ── Раскладка «контент + боковая колонка» ─────────────── */
/* min-width: 0 обязателен. По умолчанию у элемента грида min-width: auto,
   то есть колонка 1fr не может стать уже своего содержимого. Любая широкая
   таблица или длинное слово внутри распирают колонку, и боковую панель
   выдавливает за край экрана. Симптом — «вёрстка едет». */
.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) var(--w-aside);
              gap: var(--s7); align-items: start; }
.with-aside > * { min-width: 0; }
.with-aside > aside { position: sticky; top: var(--s5); }

/* То же самое для остальных гридов и флексов с текстом */
.with-filters > * { min-width: 0; }
.cards > * { min-width: 0; }
.passport .row > * { min-width: 0; }
.kv > div > * { min-width: 0; }

/* Длинные значения в паспорте переносятся, а не распирают колонку */
.passport dd, .kv dd, .spec-grid dd { overflow-wrap: anywhere; }

/* Длинные значения в ячейках переносятся вместо распирания таблицы.
   display: block с overflow тут не годится: он ломает табличную раскладку,
   строки перестают быть строками. */
.data-table td, .data-table th { overflow-wrap: anywhere; }
.data-table { table-layout: auto; }
@media (max-width: 1000px) {
  .with-aside { grid-template-columns: 1fr; gap: var(--s5); }
  .with-aside > aside { position: static; order: -1; }
}

.with-filters { display: grid; grid-template-columns: 280px minmax(0, 1fr);
                gap: var(--s7); align-items: start; }
@media (max-width: 900px) {
  .with-filters { grid-template-columns: 1fr; gap: var(--s5); }
}

/* ── Блок сценария сравнения ───────────────────────────── */
.scenario {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-block); padding: var(--s5); margin-bottom: var(--s6);
}
.scenario .k {
  font: 500 13px/18px var(--font-text); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s3);
}
.scenario dl {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--hairline); border: 1px solid var(--hairline);
  border-radius: var(--radius-control); overflow: hidden; margin: 0;
}
.scenario dl > div { background: var(--surface); padding: 10px var(--s3); }
.scenario dt { font: 500 13px/18px var(--font-text); letter-spacing: .06em;
               text-transform: uppercase; color: var(--ink-muted); }
.scenario dd { margin: 0; font: 400 15px/22px var(--font-mono); color: var(--ink); }
.scenario .verdict { border-top: 1px solid var(--hairline); margin-top: var(--s4);
                     padding-top: var(--s3); }
.scenario .verdict p { margin: 0; }

/* ── «В каком случае что» / «чем не взаимозаменяемы» ───── */
.cases { border-top: 1px solid var(--hairline); }
.cases > div { padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); }
.cases .h { font: 500 17px/26px var(--font-text); color: var(--ink); }
.cases p { margin: var(--s1) 0 0; color: var(--ink-muted); }

.not-swap { background: var(--surface-sunk); border-radius: var(--radius-block); padding: var(--s2) var(--s5) var(--s5); }
.not-swap > div { display: grid; grid-template-columns: 180px 1fr; gap: var(--s4);
                  padding: 10px 0; border-top: 1px solid var(--hairline); }
.not-swap dt, .not-swap .k { font: 500 13px/22px var(--font-text); letter-spacing: .06em;
                             text-transform: uppercase; color: var(--ink-muted); }
.not-swap .v { font: 400 17px/26px var(--font-text); color: var(--ink); }
@media (max-width: 640px) { .not-swap > div { grid-template-columns: 1fr; gap: var(--s1); } }

/* ── Источники ─────────────────────────────────────────── */
.sources { list-style: none; margin: 0; padding: 0; counter-reset: src; }
.sources li {
  display: grid; grid-template-columns: 24px 1fr; gap: var(--s2);
  padding: var(--s2) 0; border-top: 1px solid var(--hairline);
  font: 400 14px/20px var(--font-text); color: var(--ink-muted);
}
.sources li::before { counter-increment: src; content: counter(src) "."; font-family: var(--font-mono); }

/* ── Связанные материалы ───────────────────────────────── */
.related { border-top: 1px solid var(--hairline); margin-top: var(--s7); }
.related li { list-style: none; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.related ul { margin: 0; padding: 0; }

/* ══ Добавлено при реализации T0, T1, T2, T3, T7, T9, T10, T11 ══ */

/* ── 2.2 / 2.3 Конструкция: иконка и разрез ────────────── */
.constr-intro { display: flex; gap: var(--s5); align-items: flex-start; margin-bottom: var(--s5); }
.constr-intro svg { flex: none; }
.constr-intro p { margin: 0; max-width: 600px; }

.cross-section {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-block); padding: var(--s5);
}
.cross-section svg { display: block; width: 100%; height: auto; }
.cross-section .sep { height: 1px; background: var(--hairline); margin: var(--s5) 0; }
.cross-section p { font: 400 15px/24px var(--font-text); color: var(--ink-muted); }
.cross-section p:last-child { margin-bottom: 0; }
/* Подписи внутри SVG красятся токенами — разрез живёт в обеих темах */
.cs-label { font: 500 13px var(--font-text); fill: var(--ink); }
.cs-sub   { font: 400 12px var(--font-mono); fill: var(--ink-muted); }
.cs-line  { stroke: var(--ink-faint); stroke-width: 1; fill: none; }
.cs-dot   { fill: var(--ink-faint); }

/* ── Сетка значений (режимы, типоразмеры) ──────────────── */
.spec-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--hairline); border: 1px solid var(--hairline);
  border-radius: var(--radius-control); overflow: hidden; max-width: 600px; margin: 0;
}
.spec-grid > div { background: var(--surface); padding: 10px var(--s3); }
.spec-grid dt { font: 500 13px/18px var(--font-text); letter-spacing: .06em;
                text-transform: uppercase; color: var(--ink-muted); }
.spec-grid dd { margin: 0; font: 400 15px/22px var(--font-mono); color: var(--ink); }
.spec-grid dd.empty { color: var(--ink-muted); }

.kv { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
      padding: var(--s3) 0; margin: 0; }
.kv > div { display: grid; grid-template-columns: 200px 1fr; gap: var(--s4);
            padding: 6px 0; align-items: baseline; }
.kv dt { font: 500 13px/18px var(--font-text); letter-spacing: .06em;
         text-transform: uppercase; color: var(--ink-muted); }
.kv dd { margin: 0; font: 400 15px/22px var(--font-mono); color: var(--ink);
         font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .kv > div { grid-template-columns: 1fr; gap: 2px; } }

/* ── Простая таблица данных (бухты, типоразмеры) ───────── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { text-align: left; padding: 8px 0;
                                 border-bottom: 1px solid var(--hairline); }
.data-table th { font: 500 13px/18px var(--font-text); letter-spacing: .06em;
                 text-transform: uppercase; color: var(--ink-muted); }
.data-table td { font: 400 15px/22px var(--font-mono); color: var(--ink);
                 font-variant-numeric: tabular-nums; }

/* ── 4.1 Таблица цен ───────────────────────────────────── */
.prices-wrap { overflow-x: auto; border: 1px solid var(--hairline);
               border-radius: var(--radius-block); }
.prices { width: 100%; border-collapse: collapse; background: var(--surface); min-width: 640px; }
.prices th, .prices td { text-align: left; padding: var(--s3) var(--s4); vertical-align: top; }
.prices thead th { border-bottom: 1px solid var(--ink); font: 500 13px/18px var(--font-text);
                   letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.prices tbody tr { border-bottom: 1px solid var(--hairline); }
.prices tbody tr.stale td { color: var(--ink-muted); }
.prices .company { font: 400 15px/22px var(--font-text); }
.prices .price { font: 400 15px/22px var(--font-mono); font-variant-numeric: tabular-nums;
                 white-space: nowrap; }
.prices .cell-sub { font: 400 13px/18px var(--font-text); color: var(--ink-muted); }

/* 4.2 Комментарий редакции — наш голос, а не значение из прайса */
.price-note {
  display: block; margin-top: var(--s1);
  font: italic 400 13px/18px var(--font-text); color: var(--ink-muted);
}
.price-note::before { content: "ⓘ "; font-style: normal; }

/* 4.3 Панель сортировки. Активное состояние — return, не flow:
   раздел цен целиком относится к коммерческому слою. */
.sorts { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
         margin-bottom: var(--s3); }
.sorts .k { font: 400 14px/20px var(--font-text); color: var(--ink-muted); }
.sorts a, .sorts .cur {
  font: 500 14px/20px var(--font-text); padding: 3px 10px;
  border: 1px solid var(--hairline); border-radius: var(--radius-control);
}
.sorts .cur { border-color: var(--return); color: var(--return); }
.tolerance { font: 400 13px/18px var(--font-text); color: var(--ink-muted); margin: 0 0 var(--s4); }

.tabs { display: flex; gap: var(--s5); border-bottom: 1px solid var(--hairline);
        margin-bottom: var(--s5); }
.tabs a { font: 500 17px/24px var(--font-text); color: var(--ink-muted);
          padding: var(--s3) 0; border-bottom: 2px solid transparent; }
.tabs a[aria-current] { color: var(--ink); border-bottom-color: var(--return); }

.dia-nav { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s6);
           font: 400 14px/20px var(--font-mono); }
.dia-nav a { padding: 2px 8px; border: 1px solid var(--hairline);
             border-radius: var(--radius-control); }

/* ── 4.5 Врезка цен на странице системы ────────────────── */
.price-inset { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
               padding: var(--s4) 0; }
.price-inset .row { display: flex; justify-content: space-between; gap: var(--s4);
                    padding: 6px 0; font: 400 15px/22px var(--font-mono); }
.price-inset .row span:first-child { font-family: var(--font-text); }

/* ── 8.1 Двери главной ─────────────────────────────────── */
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
         gap: var(--s4); margin: var(--s6) 0; }
.door {
  display: flex; flex-direction: column; gap: var(--s2);
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-block); padding: var(--s5); color: inherit; text-decoration: none;
}
.door:hover { border-color: var(--ink-faint); text-decoration: none; color: inherit; }
.door h2 { font-size: 21px; line-height: 28px; margin: 0; }

/* Заголовки дверей разной длины, и без выравнивания абзацы стартуют с разной
   высоты — тройка выглядит небрежно. Субгрид равняет заголовок, текст и ссылку
   по общим строкам, не задавая фиксированной высоты: на странице с двумя
   короткими заголовками пустоты не появится, в отличие от min-height.
   Без поддержки субгрида остаётся флексовая раскладка выше. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 820px) {
    .doors { grid-template-rows: repeat(3, auto); }
    .door { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
  }
}
.door p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.door .cta { color: var(--return); font: 500 15px/22px var(--font-text); margin-top: auto; }

/* 8.2 Лента «Свежее» — единственное, что обновляется на главной постоянно */
.fresh { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
         padding: var(--s3) 0; margin-bottom: var(--s7); }
.fresh a { display: flex; justify-content: space-between; gap: var(--s4);
           padding: var(--s2) 0; font: 400 15px/22px var(--font-text); }
.fresh .when { color: var(--ink-muted); font-family: var(--font-mono); font-size: 14px; }

/* ── 6.x Обзор недели ──────────────────────────────────── */
.shortly { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
           padding: var(--s3) 0; margin-bottom: var(--s7); list-style: none; }
.shortly li { padding: 6px 0; }

.event { margin-bottom: var(--s8); }
.event .src { font: 400 14px/20px var(--font-text); color: var(--ink-muted); }

/* 6.2 «Что это значит» — единственное место субъективной оценки на сайте,
   поэтому граница между фактом и мнением видна */
.means {
  background: var(--surface-sunk); border-left: 3px solid var(--flow);
  border-radius: var(--radius-block); padding: var(--s4) var(--s5); margin: var(--s5) 0;
}
.means .k { font: 500 13px/18px var(--font-text); letter-spacing: .06em;
            text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s1); }
.means p { margin: 0; }

.affected { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center;
            font: 400 14px/20px var(--font-text); }
.affected .k { color: var(--ink-muted); }

.fixes { border-top: 1px solid var(--hairline); list-style: none; margin: 0; padding: 0; }
.fixes li { padding: var(--s2) 0; border-bottom: 1px solid var(--hairline);
            font: 400 15px/22px var(--font-text); }
.fixes .what { color: var(--ink-muted); }

.archive { width: 100%; border-collapse: collapse; }
.archive th, .archive td { text-align: left; padding: var(--s3) var(--s4) var(--s3) 0;
                           border-bottom: 1px solid var(--hairline); vertical-align: top; }
.archive th { font: 500 13px/18px var(--font-text); letter-spacing: .06em;
              text-transform: uppercase; color: var(--ink-muted); }

/* ── 8.3 / 8.4 / 8.5 Мастер и калькулятор ──────────────── */
.wizard-step { background: var(--surface); border: 1px solid var(--hairline);
               border-radius: var(--radius-block); padding: var(--s6); }
.progress { font: 400 14px/20px var(--font-mono); color: var(--ink-muted); margin-bottom: var(--s4); }
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
           gap: var(--s3); margin: var(--s5) 0; }
.option { display: block; border: 1px solid var(--hairline); border-radius: var(--radius-block);
          padding: var(--s4); text-decoration: none; color: inherit; background: var(--paper); }
.option.on { border-color: var(--return); }
.option .t { font: 500 17px/24px var(--font-text); display: block; }
.option .n { font: 400 14px/20px var(--font-text); color: var(--ink-muted); }

.tz { background: var(--surface); border: 1px solid var(--hairline);
      border-radius: var(--radius-block); padding: var(--s5); }
.tz dl { margin: 0; }
.tz .row { display: grid; grid-template-columns: 220px 1fr; gap: var(--s4);
           padding: 7px 0; border-top: 1px solid var(--hairline); }
.tz .row:first-child { border-top: 0; }
.tz dt { font: 500 13px/18px var(--font-text); letter-spacing: .06em;
         text-transform: uppercase; color: var(--ink-muted); }
.tz dd { margin: 0; font: 400 15px/22px var(--font-mono); color: var(--ink); }
@media (max-width: 560px) { .tz .row { grid-template-columns: 1fr; gap: 2px; } }

/* Пунктирная заглушка — второй системы этого класса у нас нет */
.slot-empty {
  border: 1px dashed var(--hairline-strong); border-radius: var(--radius-block);
  padding: var(--s5); color: var(--ink-muted); font: 400 15px/22px var(--font-text);
}

/* ── 7.6 Оглавление статьи ─────────────────────────────── */
.toc { font: 400 14px/20px var(--font-text); }
.toc .k { font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
          color: var(--ink-muted); margin-bottom: var(--s2); }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { padding: 3px 0 3px var(--s3); border-left: 2px solid transparent; }
.toc li.on { border-left-color: var(--flow); }
.toc a { color: var(--ink-muted); }
.toc li.on a { color: var(--ink); }

/* ── Служебные страницы ────────────────────────────────── */
.svc { border-top: 1px solid var(--hairline); }
.svc > div { padding: var(--s5) 0; border-bottom: 1px solid var(--hairline); }
.svc h2 { font-size: 21px; line-height: 28px; margin: 0 0 var(--s2); }
.svc p { margin: 0; color: var(--ink-muted); }

/* ── 8.5 Расчёт трассы: поля ввода и действия ──────────── */
/* Результат — блок .tz выше: он нарисован ещё в макетах и не меняется.
   Здесь только то, чего в макетах не было, — сама форма. */
.calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        gap: var(--s4) var(--s5); align-items: start; }
.calc .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.calc .field > label { font: 500 13px/18px var(--font-text); letter-spacing: .06em;
                       text-transform: uppercase; color: var(--ink-muted); }
.calc input[type="number"], .calc select {
  font: 400 17px/24px var(--font-mono); color: var(--ink); width: 100%;
  background: var(--surface); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-control); padding: 7px 10px;
}
.calc select { font-family: var(--font-text); }
.calc input[type="number"]:focus, .calc select:focus { border-color: var(--return); outline: none; }
.calc .hint { font: 400 13px/18px var(--font-text); color: var(--ink-muted); }
/* Флажки идут во всю ширину: у них подпись длиннее поля */
.calc .check { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; gap: var(--s2); }
.calc .check input { width: 14px; height: 14px; margin-top: 5px; flex: none; accent-color: var(--return); }
.calc .check label { font: 400 15px/22px var(--font-text); color: var(--ink);
                     letter-spacing: 0; text-transform: none; }

.calc-actions { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; margin-top: var(--s4); }
.calc-actions button {
  font: 500 15px/22px var(--font-text); color: var(--return); cursor: pointer;
  border: 1px solid var(--return); border-radius: var(--radius-control);
  padding: 7px 14px; background: none;
}
.calc-actions button:hover { background: var(--info-bg); }
.calc-actions .said { font: 400 14px/22px var(--font-text); color: var(--ink-muted); }

.tz dd.empty { color: var(--ink-muted); font-family: var(--font-text); }
/* display: grid у строки перебивает [hidden] браузера — правило нужно явно */
.tz .row[hidden] { display: none; }
.tz .sum dd { font-weight: 500; }

/* 9.4 Печать: на бумагу уходит ТЗ, а не форма — её уже заполнили на экране */
@media print {
  .calc, .calc-actions, .calc-ref { display: none !important; }
  /* Служебное убирается только на странице расчёта: .crumbs, .related и .lead
     есть везде, и глобальное правило испортило бы печать остальных страниц.
     В браузере без :has на бумагу уйдёт ещё и шапка страницы — это не поломка. */
  body:has(.calc) .crumbs, body:has(.calc) .related, body:has(.calc) .lead { display: none !important; }
  .tz { border: 0; padding: 0; }
  .tz .row { break-inside: avoid; }
}