/* Страница /raschety/naplavka/: калькулятор и текст методики.
   Отдельный файл: общий styles.css грузят все страницы сайта, а эта вёрстка
   нужна одной. Токены — только переменные :root из styles.css. */

.rn-hero {
  padding: 20px clamp(18px, 4vw, 54px) 6px;
}

/* Заголовок раздела мельче общего H1 сайта (58 px / 60 px) — решение владельца
   2026-09-22. На калькуляторе название длинное, и общим кеглем оно занимало три
   строки, уводя верх формы вниз. clamp держит его в двух строках на десктопе и
   не даёт разваливаться на телефоне; правило локальное, общий styles.css и
   заголовки прочих разделов не трогаются. Отступы вокруг уменьшены в ту же
   меру, иначе на месте снятых строк остаётся пустая шапка. */
.rn-hero h1 {
  margin: 4px 0 8px;
  font-size: clamp(28px, 2.6vw + 10px, 40px);
  line-height: 1.15;
  color: var(--blue-dark);
}

.rn-lead {
  margin: 0;
  max-width: 820px;
  color: var(--muted);
}

.rn-calc-host {
  padding: 10px clamp(18px, 4vw, 54px) 0;
}

.rn-nojs {
  margin: 0;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
  color: var(--muted);
}

.rn-calc {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
}

/* Авторское display: grid перебивает [hidden] из UA-стилей. Скрытая кнопка
   «добавить участок» на шестом участке обязана исчезать. */
.rn-calc [hidden] {
  display: none !important;
}

.rn-patch,
.rn-layer {
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.rn-patch-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.rn-patch h3,
.rn-layer h3 {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--ink);
}

.rn-patch-head h3 {
  margin: 0;
}

.rn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 16px;
}

.rn-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.rn-field label {
  font-size: 13px;
  color: var(--muted);
}

.rn-field input,
.rn-field select {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

.rn-field input:focus,
.rn-field select:focus {
  outline: 2px solid var(--blue);
  outline-offset: -1px;
}

/* Ошибка стоит у своего поля, а не общим списком внизу: список из четырёх
   строк не говорит, в какую из шести клеток смотреть. */
.rn-field.is-invalid input,
.rn-field.is-invalid select {
  border-color: var(--amber-dark);
  background: var(--amber-soft);
}

.rn-field-error {
  min-height: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--amber-dark);
}

/* Поле, чей размер сейчас подсвечен на эскизе (фокус в нём или наведение на
   его размер). Подсветка мягкая: она подсказывает связь, а не сообщает
   ошибку — сильный фон здесь читался бы как предупреждение. */
.rn-field.is-linked {
  border-radius: 6px;
  outline: 2px solid var(--rn-sk-accent);
  outline-offset: 4px;
}

.rn-add,
.rn-remove,
.rn-action {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--blue-dark);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.rn-add {
  margin-bottom: 16px;
  padding: 8px 18px;
  font-weight: 700;
}

.rn-remove {
  padding: 4px 12px;
  font-size: 13px;
  color: var(--muted);
}

.rn-check {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
}

/* Глобальное `input { width: 100% }` растягивало сам чекбокс на всю строку —
   та же ловушка, что в .consent-line и .calc-check. */
.rn-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
}

.rn-buffer-toggle {
  margin-bottom: 14px;
}

.rn-result,
.rn-how,
.rn-errors {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.rn-result h3,
.rn-how h3 {
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--ink);
}

.rn-patch-result h4,
.rn-how-layer h4 {
  margin: 10px 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

.rn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--steel);
}

.rn-row:last-child {
  border-bottom: 0;
}

.rn-row-label {
  color: var(--muted);
  font-size: 14px;
}

.rn-row-value {
  color: var(--ink);
  font-size: 16px;
  white-space: nowrap;
}

.rn-row-total .rn-row-value {
  font-size: 18px;
  color: var(--blue-dark);
}

.rn-note,
.rn-disclaimer-inline,
.rn-how-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.rn-warning {
  margin: 12px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--amber);
  border-radius: 8px;
  background: var(--amber-soft);
  color: var(--amber-dark);
  font-size: 14px;
  line-height: 1.5;
}

.rn-errors {
  border-color: var(--amber);
  background: var(--amber-soft);
  font-size: 14px;
}

.rn-errors p {
  margin: 0;
}

.rn-errors ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.rn-how-list {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: 4px 16px;
  margin: 0;
  font-size: 14px;
}

.rn-how-list dt {
  color: var(--muted);
}

.rn-how-list dd {
  margin: 0;
  color: var(--ink);
}

.rn-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.rn-action {
  padding: 9px 18px;
  font-weight: 700;
}

.rn-action-link {
  display: inline-block;
  text-decoration: none;
}

.rn-action-status {
  font-size: 13px;
  color: var(--muted);
}

.rn-pick {
  margin: 20px 0 0;
  padding: 0 clamp(18px, 4vw, 54px);
  font-weight: 700;
}

.rn-pick a {
  color: var(--blue-dark);
}

/* Печатная версия и липкая плашка на экране не нужны. Шапка листа лежит
   первым узлом .rn-page, выше H1 — на экране она скрыта здесь, и её вставка
   ничего не сдвигает; подвал листа скрыт вместе с .rn-print, внутри которого
   он и живёт. */
.rn-print,
.rn-sheet-head,
.rn-sticky {
  display: none;
}

/* Сводка участка — длинная строка, которой браузеру негде рваться: блок
   получается шире экрана. Пока .rn-print скрыт, это незаметно; стоит ему
   стать видимым — в печати, при не загрузившемся листе стилей, при любой
   будущей правке — и страница уезжает вбок (на голом адресе расчёта, который
   печатался здесь до 2026-09-23, замерено 366 px при clientWidth 1425).
   Перенос по любому символу снимает саму возможность: ширину диктует
   контейнер, а не длина строки. */
.rn-print-table td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* --- текст методики --- */

/* ------------------------------------------------------------------
   Эскиз участка
   ------------------------------------------------------------------ */

/* Палитра эскиза. В src/styles.css не выносится: цвета нужны одной странице
   (docs/brand/website.md, «Эскиз наплавки: цвета слоёв»). Те же значения
   жёсткими hex лежат в модуле для палитры 'static' — файл-пресета, который
   открывается картинкой без :root страницы. */
.rn-page {
  --rn-sk-base: #dce2e1;
  --rn-sk-base-hatch: #7f8c90;
  --rn-sk-buf: #2e8c80;
  --rn-sk-work1: #c8742a;
  --rn-sk-work2: #e3a061;
  --rn-sk-allow: #f7e4e1;
  --rn-sk-allow-hatch: #b8483e;
  --rn-sk-accent: #2f62d6;
  --rn-sk-ink: var(--ink);
  --rn-sk-muted: var(--muted);
  --rn-sk-line: var(--line);
  --rn-sk-panel: var(--panel);
}

.rn-sketch {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.rn-sketch[hidden] {
  display: none !important;
}

.rn-sketch-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.rn-sketch-head h3 {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
}

.rn-sketch-badge {
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.rn-sketch-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.rn-sketch-tab {
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.rn-sketch-tab.is-active {
  border-color: var(--blue);
  background: var(--soft);
  color: var(--blue-dark);
  font-weight: 700;
}

.rn-sketch-main,
.rn-sketch-view {
  min-width: 0;
}

.rn-sk-svg {
  display: block;
  width: 100%;
  height: auto;
}

.rn-sketch-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.rn-sketch-empty {
  margin: 0;
  padding: 26px 16px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
  text-align: center;
}

.rn-sketch-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 13px;
}

.rn-sketch-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rn-sketch-swatch {
  display: inline-block;
  flex: 0 0 auto;
  width: 20px;
  height: 12px;
  border: 1px solid var(--rn-sk-base-hatch);
}

/* Те же обозначения, что и на рисунке: у основы и припуска штриховка, а не
   заливка — они обязаны различаться и в ч/б печати. */
.rn-sketch-swatch-base {
  background: repeating-linear-gradient(45deg, var(--rn-sk-base) 0 3px,
    var(--rn-sk-base-hatch) 3px 4px);
}

.rn-sketch-swatch-buf {
  border-color: var(--rn-sk-buf);
  background: var(--rn-sk-buf);
}

.rn-sketch-swatch-work {
  border-color: var(--rn-sk-work1);
  background: linear-gradient(var(--rn-sk-work2) 0 50%, var(--rn-sk-work1) 50% 100%);
}

.rn-sketch-swatch-allow {
  border-color: var(--rn-sk-allow-hatch);
  background: repeating-linear-gradient(-45deg, var(--rn-sk-allow) 0 3px,
    var(--rn-sk-allow-hatch) 3px 4px);
}

/* Два вида — сечение (или вид сверху / с торца) и выносной элемент А. auto-fit
   вместо @media: колонка эскиза уже вьюпорта, и порог должен считаться по её
   ширине, а не по ширине окна. */
.rn-sketch-views {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 14px;
  margin-top: 12px;
}

/* Второй вид и выносной элемент не растягиваются шире своего холста: иначе
   в одну колонку круг сечения (340 px) раздувается до ширины главного вида
   и выглядит крупнее вала, с которого снят. */
.rn-sketch-view .rn-sk-svg {
  max-width: 380px;
  margin: 0 auto;
}

/* --- связь поле ↔ эскиз --- */

.rn-sk-dim,
.rn-sk-band,
.rn-sk-body {
  cursor: pointer;
}

.rn-sk-dim.is-hi line,
.rn-sk-dim.is-hi path[fill="none"] {
  stroke: var(--rn-sk-accent);
  stroke-width: 2;
}

.rn-sk-dim.is-hi path:not([fill="none"]) {
  fill: var(--rn-sk-accent);
}

.rn-sk-dim.is-hi text {
  fill: var(--rn-sk-accent);
  font-weight: 700;
}

.rn-sk-band.is-hi rect,
.rn-sk-band.is-hi path,
.rn-sk-body.is-hi rect,
.rn-sk-body.is-hi path,
.rn-sk-body.is-hi circle {
  stroke: var(--rn-sk-accent);
  stroke-width: 2.5;
}

/* Подсказка появляется только когда главный вид шире контейнера, и снимается
   после первой прокрутки — её ставит и убирает JS. */
.rn-sketch-scroll-hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

@media (min-width: 701px) {
  .rn-sketch-scroll-hint {
    display: none;
  }
}

/* Компактный итог под эскизом: на десктопе форма длинная, и полный результат
   под колонками уходит из виду во время ввода. Числа — те же, что в нём. */
.rn-sketch-total {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--amber);
  border-radius: 8px;
  background: var(--amber-soft);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.rn-sketch-total:hover,
.rn-sketch-total:focus {
  border-color: var(--amber-dark);
}

/* На телефоне итог уже несёт липкая плашка внизу экрана — второй такой же
   строки там не нужно. */
@media (max-width: 700px) {
  .rn-sketch-total {
    display: none !important;
  }
}

/* Строка трёх диаметров в результате. */
.rn-dia {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--soft);
  color: var(--ink);
  font-size: 14px;
}

.rn-how-dia dd {
  font-variant-numeric: tabular-nums;
}

/* --- две колонки: форма и эскиз --- */

/* 981 px — тот же порог, на котором сайт складывает двухколоночные раскладки
   (styles.css, @media (max-width: 980px)). Эскиз липкий: он обязан оставаться
   на виду, пока заполняют форму. Отступ сверху — правило сайта для липких
   боковых колонок: 92 px под однострочную шапку, 151 px под двухстрочную
   (см. .material-side в styles.css). */
@media (min-width: 981px) {
  .rn-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 18px;
    align-items: start;
  }

  .rn-col-form,
  .rn-col-sketch {
    min-width: 0;
  }

  /* Липкий эскиз выше окна не даёт добраться до своего низа — поэтому у него
     своя прокрутка, а не обрезанный хвост. Прокручивается САМ эскиз, а строка
     итога стоит под ним и из виду не уходит. */
  .rn-col-sketch {
    position: sticky;
    top: 92px;
    align-self: start;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 104px);
  }

  .rn-col-sketch .rn-sketch {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .rn-col-sketch .rn-sketch-total {
    flex: 0 0 auto;
  }
}

@media (min-width: 981px) and (max-width: 1244px) {
  .rn-col-sketch {
    top: 151px;
    max-height: calc(100vh - 163px);
  }
}

/* На телефоне эскиз идёт между формой и результатом и не должен упираться
   в липкую плашку итога — у неё свой отступ снизу страницы. */
/* Липкая плашка итога стоит у нижнего края окна и накрывает то, что под
   ней. Отступ снизу больше её высоты — низ эскиза (выносной элемент со
   слоями) до неё не достаёт. */
@media (max-width: 980px) {
  .rn-sketch {
    margin-bottom: 64px;
  }
}

/* Главный вид — холст 700 px при трёх размерных линиях справа. На экране
   390 px он сжимается вдвое, и размерные числа (13 px холста) превращаются
   в 6,5 px — нечитаемо. Поэтому на узких экранах он прокручивается внутри
   себя, как широкие таблицы техлистов (docs/brand/website.md, «Мобильная
   вёрстка»): страница вбок не уезжает, а числа остаются читаемыми.
   Сечение и выносной элемент этого не требуют — их холсты 340 и 380 px
   и так помещаются почти один к одному. */
@media (max-width: 700px) {
  .rn-sketch-main {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .rn-sketch-main .rn-sk-svg {
    min-width: 520px;
  }
}

.rn-text {
  max-width: 860px;
  padding: 24px clamp(18px, 4vw, 54px) 56px;
}

.rn-text h2 {
  margin: 32px 0 12px;
  color: var(--blue-dark);
}

.rn-text h3 {
  margin: 22px 0 8px;
  font-size: 17px;
  color: var(--ink);
}

.rn-text p,
.rn-text li {
  line-height: 1.65;
}

.rn-formula {
  padding: 10px 14px;
  border-left: 3px solid var(--blue);
  background: var(--soft);
  font-family: "Courier New", Courier, monospace;
}

/* Рисунок-пресет в методике. Он виден и с JS: живой эскиз выше показывает
   введённое, а этот — разобранный пример к формулам, и уводить его из текста
   под условие «если JS выключен» значило бы отдать его одним поисковикам. */
.rn-figure {
  margin: 14px 0 18px;
  padding: 0;
  max-width: 100%;
}

.rn-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.rn-figure figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.rn-table-wrap {
  overflow-x: auto;
}

.rn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.rn-table th,
.rn-table td {
  padding: 9px 12px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}

.rn-table thead th {
  background: var(--soft);
  color: var(--blue-dark);
}

.rn-faq-item h3 {
  margin: 20px 0 6px;
}

.rn-disclaimer {
  margin-top: 32px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 720px) {
  .rn-calc {
    padding: 14px;
  }

  .rn-how-list {
    grid-template-columns: 1fr;
    gap: 0 0;
  }

  .rn-how-list dd {
    margin-bottom: 8px;
  }

  /* Итог держится на виду, пока посетитель крутит длинную форму: на телефоне
     результат уезжает за экран уже на втором участке. */
  .rn-sticky {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 14px -14px -14px;
    padding: 10px 14px;
    border-top: 1px solid var(--amber);
    background: var(--amber-soft);
  }

  .rn-sticky-label {
    font-size: 13px;
    color: var(--amber-dark);
  }

  .rn-sticky strong {
    font-size: 17px;
    color: var(--ink);
  }

  .rn-table {
    display: block;
    overflow-x: auto;
  }
}

@media print {
  /* ------------------------------------------------------------------
     Печатный лист расчёта

     Печатается лист, а не страница: ни шапки сайта, ни формы, ни кнопок, ни
     текста методики. Порядок на листе — шапка листа, заголовок, результат,
     «как считали», исходные данные, эскизы участков, подвал с QR-кодом.

     Цвета — только токены :root из styles.css. Чистого чёрного и серых на
     листе нет: #000 / #999 / #555 стояли здесь до 2026-09-23 и брендом не
     предусмотрены. Амбер на лист не идёт вовсе — он точечный акцент
     интерфейса, а предупреждение в печати обходится рамкой и текстом.

     Главное ограничение раскладки: лист обязан читаться при ВЫКЛЮЧЕННОЙ
     печати фонов — она выключена по умолчанию у большинства драйверов.
     Поэтому ни один фон не несёт смысла в одиночку: под каждой заливкой
     стоит своя рамка, а текст на подложке везде тёмный, а не выворотка.
     Отсюда же табличная шапка --blue-dark на --soft, а не белым по синему,
     как в бренд-книге для экранных и PDF-таблиц.
     ------------------------------------------------------------------ */

  @page {
    size: A4;
    margin: 14mm 14mm 18mm;
  }

  .site-header,
  .site-footer,
  .breadcrumbs,
  .rn-hero .eyebrow,
  .rn-lead,
  .rn-patches,
  .rn-layers,
  .rn-add,
  .rn-actions,
  .rn-sticky,
  .rn-pick,
  .rn-text {
    display: none !important;
  }

  /* Живой эскиз на лист не идёт: он показывает один участок и несёт вкладки.
     Вместо него в печатном блоке лежат эскизы ВСЕХ участков. */
  .rn-sketch,
  .rn-cols {
    display: none !important;
  }

  .rn-calc,
  .rn-how {
    border: 0;
    padding: 0;
    background: transparent;
  }

  .rn-calc-host,
  .rn-hero {
    padding: 0;
  }

  /* --- шапка листа --------------------------------------------------- */

  .rn-sheet-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8mm;
    margin: 0 0 5mm;
    padding-bottom: 2.5mm;
    border-bottom: 0.5pt solid var(--line);
  }

  /* 8 мм — решение владельца 2026-09-23. Бренд-книга требует от печатных
     материалов минимум 12 мм; здесь лист расчёта, а не рекламный материал, и
     крупный знак делал бы из него листовку. Отклонение согласовано и записано
     в docs/PROJECT_LOG.md и docs/brand/README.md. Высота задана явно, ширина
     идёт за пропорциями 697 × 175 из атрибутов тега: лист не зависит от
     того, успел ли браузер прочитать сам SVG. */
  .rn-sheet-logo {
    height: 8mm;
    width: auto;
  }

  .rn-sheet-head-meta {
    text-align: right;
    font-size: 8.5pt;
    line-height: 1.35;
    color: var(--muted);
  }

  .rn-sheet-head-meta span {
    display: block;
  }

  /* --- заголовок ------------------------------------------------------ */

  /* На экране заголовок до 40 px и вместе с лидом занимал треть первой
     страницы PDF. На листе он подпись к расчёту, а не обложка. */
  .rn-hero h1 {
    margin: 0 0 4mm;
    font-size: 16pt;
    font-weight: 700;
    line-height: 1.2;
    color: var(--blue-dark);
  }

  .rn-print h3,
  .rn-how h3 {
    margin: 5mm 0 2mm;
    font-size: 11pt;
    font-weight: 700;
    color: var(--blue-dark);
  }

  /* --- результат ------------------------------------------------------ */

  .rn-result {
    margin: 0;
    padding: 4mm;
    border: 0.5pt solid var(--steel);
    border-radius: 0;
    background: var(--soft);
    /* Итог не режется границей страницы: половина результата — не результат. */
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .rn-result h3 {
    margin: 0 0 2mm;
    font-size: 11pt;
    font-weight: 700;
    color: var(--blue-dark);
  }

  .rn-result .rn-row {
    padding: 1.4mm 0;
    border-bottom: 0.5pt solid var(--steel);
  }

  .rn-row-label {
    font-size: 10pt;
    color: var(--ink);
  }

  .rn-row-value {
    font-size: 10pt;
    color: var(--ink);
  }

  .rn-row-total .rn-row-value {
    font-size: 14pt;
    font-weight: 700;
    color: var(--blue-dark);
  }

  .rn-patch-result h4,
  .rn-how-layer h4 {
    margin: 3mm 0 1mm;
    font-size: 10pt;
    color: var(--ink);
  }

  /* --- таблицы и списки ----------------------------------------------- */

  .rn-print {
    display: block;
    margin: 0;
  }

  .rn-print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9.5pt;
    color: var(--ink);
  }

  .rn-print-table th,
  .rn-print-table td {
    padding: 1.5mm 2mm;
    border: 0.5pt solid var(--line);
    text-align: left;
    vertical-align: top;
    line-height: 1.35;
  }

  /* Первый столбец — подпись строки, и он же шапка таблицы. */
  .rn-print-table th {
    width: 32mm;
    font-weight: 700;
    color: var(--blue-dark);
    background: var(--soft);
  }

  /* «Как считали» — не таблица, а список определений: рамок ему не рисуем,
     но типографика та же, что у таблицы, чтобы блоки читались одинаково. */
  .rn-how-list {
    font-size: 9.5pt;
    gap: 1mm 6mm;
  }

  .rn-how-list dt {
    font-weight: 700;
    color: var(--blue-dark);
  }

  .rn-how-list dd {
    color: var(--ink);
  }

  .rn-note,
  .rn-disclaimer-inline,
  .rn-how-note {
    margin-top: 3mm;
    font-size: 8.5pt;
    line-height: 1.4;
    color: var(--muted);
  }

  /* Амбер на лист не идёт: предупреждение выделяется рамкой и отступом. */
  .rn-warning,
  .rn-errors {
    margin-top: 3mm;
    padding: 2.5mm 3mm;
    border: 0.5pt solid var(--line);
    border-radius: 0;
    background: transparent;
    font-size: 9.5pt;
    line-height: 1.4;
    color: var(--ink);
  }

  /* --- эскизы участков ------------------------------------------------- */

  .rn-print-sketch {
    margin: 4mm 0 0;
    padding: 0;
    /* Эскиз не режется границей страницы: половина разреза без размеров —
       не чертёж. */
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .rn-print-sketch figcaption {
    margin-bottom: 1.5mm;
    font-size: 8.5pt;
    color: var(--muted);
  }

  .rn-print-sketch-views {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .rn-print-sketch-main {
    flex: 1 1 66%;
    min-width: 0;
  }

  .rn-print-sketch-detail {
    flex: 0 1 30%;
    min-width: 0;
  }

  /* Штриховки — заливки узором, а печать по умолчанию фоны снимает. Без
     этой пары обозначения основы и припуска ушли бы с листа; контуры у всех
     полос свои, поэтому даже при игнорировании правила рисунок читается. */
  .rn-print-sketch svg {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .rn-print-sketch .rn-sk-svg {
    display: block;
    width: 100%;
    height: auto;
  }

  /* --- подвал листа с QR-кодом ----------------------------------------- */

  /* Обычный блок в конце листа, а не position: fixed: фиксированный подвал
     печать либо повторяет на каждой странице, либо теряет вовсе. */
  .rn-sheet-foot {
    display: flex;
    /* nowrap явно: текст обязан остаться СПРАВА от кода и не переноситься под
       него, как бы ни вырос код на длинном расчёте. */
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 5mm;
    margin-top: 6mm;
    padding-top: 3mm;
    border-top: 0.5pt solid var(--line);
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Размер поля кода считает модуль печатного листа и кладёт в --rn-qr-size:
     он зависит от длины адреса расчёта (плотность модуля не ниже 0,33 мм,
     поле от 22 до 35 мм — см. raschety-sheet.js). 22 мм здесь — запасное
     значение на те доли секунды, пока код ещё не посчитан. */
  .rn-sheet-qr {
    flex: 0 0 var(--rn-qr-size, 22mm);
    width: var(--rn-qr-size, 22mm);
    height: var(--rn-qr-size, 22mm);
  }

  .rn-sheet-qr-svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Тёмные модули — цветом текста, светлое поле — белым. Это заливки SVG, а
     не фон CSS: выключенная «печать фонов» их не снимает, и код остаётся
     читаемым сканером при любых настройках драйвера. */
  .rn-sheet-qr-dark {
    fill: var(--ink);
  }

  .rn-sheet-qr-field {
    fill: #ffffff;
  }

  /* min-width: 0 — иначе flex-элемент не сжимается меньше своего содержимого
     и длинная строка выдавливает код за поле листа. */
  .rn-sheet-foot-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 8.5pt;
    line-height: 1.45;
    color: var(--muted);
  }

  .rn-sheet-foot-text p {
    margin: 0 0 1mm;
  }

  .rn-sheet-foot-text p:last-child {
    margin-bottom: 0;
  }
}