/* Страница /raschety/shov/: калькулятор расхода на шов и текст методики.
   Отдельный файл: общий styles.css грузят все страницы сайта, а эта вёрстка
   нужна одной. Токены — только переменные :root из styles.css плюс палитра
   эскиза (--rs-sk-*, docs/brand/website.md, «Эскиз шва: цвета слоёв»). */

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

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

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

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

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

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

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

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

.rs-seam-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

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

.rs-seam-head h3 {
  margin: 0;
}

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

/* Размеры разделки — отдельной сеткой под основными полями: у них своя
   подпись источника и своя ссылка сброса, и в общем ряду с «толщиной» они
   читались бы как равноправный ввод, хотя по умолчанию их подставляет ГОСТ. */
.rs-grid-dims {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--steel);
}

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

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

.rs-field input,
.rs-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;
}

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

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

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

/* Пометка источника: откуда взялся размер, который сейчас в расчёте. Она
   приглушена — это справка о подставленном значении, а не ввод и не ошибка. */
.rs-field-source {
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

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

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

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

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

.rs-reset {
  margin-top: 12px;
  padding: 6px 14px;
  font-size: 13px;
}

/* «по ГОСТ» у одного поля — не кнопка по виду, а ссылка: она стоит внутри
   строки поля, и кнопочная форма ломала бы вертикальный ритм сетки. */
.rs-reset-one {
  align-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue-dark);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.rs-std-note {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--steel);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

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

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

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

.rs-seam-result + .rs-seam-result {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--steel);
}

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

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

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

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

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

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

/* Подсказка про X-разделку: это предложение сэкономить, а не предупреждение,
   поэтому синяя рамка раздела, а не амбер. */
.rs-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 10px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--blue);
  border-radius: 8px;
  background: var(--soft);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

.rs-hint-go {
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 700;
}

.rs-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;
}

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

.rs-errors p {
  margin: 0;
}

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

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

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

.rs-how-list dd {
  margin: 0;
  color: var(--ink);
  /* Формула с подставленными числами не имеет пробелов там, где браузер
     хотел бы перенести: на узкой колонке она уводила строку за край. */
  overflow-wrap: anywhere;
}

.rs-how-layer + .rs-how-layer {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--steel);
}

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

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

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

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

.rs-pick {
  margin: 16px 0 0;
  font-weight: 700;
}

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

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

/* Сводка шва — длинная строка, которой браузеру негде рваться. Пока
   .rs-print скрыт, это незаметно; стоит ему стать видимым — в печати, при
   не загрузившемся листе стилей — и страница уезжает вбок. */
.rs-print-table td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ------------------------------------------------------------------
   Эскиз шва
   ------------------------------------------------------------------ */

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

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

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

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

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

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

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

.rs-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;
}

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

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

.rs-sketch-view,
.rs-sketch-parts {
  margin-top: 10px;
}

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

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

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

/* Подсветка размера и слоя на эскизе. Классы ставит модуль (rs-sk-dim,
   rs-sk-zone, rs-sk-part), класс is-hi — страница при фокусе в связанном
   поле или наведении на сам размер. */
.rs-sk-dim,
.rs-sk-zone,
.rs-sk-part {
  cursor: pointer;
}

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

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

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

.rs-sk-zone.is-hi rect,
.rs-sk-zone.is-hi path,
.rs-sk-zone.is-hi polygon,
.rs-sk-part.is-hi rect {
  stroke: var(--rs-sk-accent);
  stroke-width: 2;
}

.rs-sketch-scroll-hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

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

.rs-sketch-total {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid var(--blue);
  border-radius: 8px;
  background: var(--soft);
  color: var(--blue-dark);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.rs-sketch-total:hover,
.rs-sketch-total:focus {
  background: var(--panel);
}

@media (max-width: 700px) {
  .rs-sketch-total {
    font-size: 13px;
  }
}

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

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

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

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

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

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

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

@media (max-width: 980px) {
  .rs-sketch {
    margin-bottom: 64px;
  }
}

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

  .rs-sketch-main .rs-sk-svg {
    min-width: 460px;
  }

  .rs-sketch-view .rs-sk-svg {
    min-width: 400px;
  }
}

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

.rs-text {
  padding: 30px clamp(18px, 4vw, 54px) 48px;
  max-width: 900px;
}

.rs-text h2 {
  margin: 28px 0 10px;
  font-size: 22px;
  color: var(--blue-dark);
}

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

.rs-text p,
.rs-text li {
  line-height: 1.6;
}

/* Формула внутри строки списка: её нельзя рвать по знакам операции, но и
   раздвигать строку она не должна. */
.rs-formula-inline {
  white-space: nowrap;
}

.rs-formula {
  padding: 10px 14px;
  border-left: 3px solid var(--blue);
  background: var(--soft);
  font-size: 16px;
  overflow-x: auto;
}

.rs-figure {
  margin: 18px 0;
}

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

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

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

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

.rs-table th,
.rs-table td {
  padding: 8px 12px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

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

.rs-faq-item h3 {
  margin-bottom: 4px;
}

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

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

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

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

  /* Итог держится на виду, пока посетитель крутит длинную форму: на телефоне
     результат уезжает за экран уже на втором шве. */
  .rs-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);
  }

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

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

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

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

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

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

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

  .site-header,
  .site-footer,
  .breadcrumbs,
  .rs-hero .eyebrow,
  .rs-lead,
  .rs-seams,
  .rs-material,
  .rs-add,
  .rs-actions,
  .rs-sticky,
  .rs-pick,
  .rs-text {
    display: none !important;
  }

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

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

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

  .rs-print,
  .rn-sheet-head {
    display: block;
  }

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

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

  /* Подсказка про X-разделку на бумаге остаётся текстом: сравнение полезно и
     в распечатке. Кнопка — нет: нажать её на листе нельзя, а выглядит она
     как действие, которого не будет. */
  .rs-hint-go {
    display: none !important;
  }

  .rs-hint {
    border-color: var(--line);
    background: transparent;
  }

  .rs-print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11pt;
  }

  .rs-print-table th,
  .rs-print-table td {
    padding: 4px 8px;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
  }

  .rs-print-table th {
    width: 22%;
    background: var(--soft);
    color: var(--blue-dark);
  }

  /* Эскиз шва не должен разрываться между страницами: половина сечения на
     одном листе и половина на другом не читается вовсе. */
  .rs-print-sketch {
    margin: 10mm 0 0;
    padding: 0;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .rs-print-sketch figcaption {
    margin-bottom: 4px;
    font-size: 10pt;
    color: var(--muted);
  }

  .rs-print-sketch-views {
    display: flex;
    flex-wrap: wrap;
    gap: 6mm;
    align-items: flex-start;
  }

  /* У стыкового шва на листе два вида рядом, у таврового — только сечение.
     Без верхнего предела одинокий вид растягивался во всю ширину листа и
     занимал треть страницы: высота у SVG идёт за шириной. */
  .rs-print-sketch-main,
  .rs-print-sketch-view {
    flex: 0 1 70mm;
    min-width: 0;
    max-width: 85mm;
  }

  .rs-row,
  .rs-how-layer,
  .rs-seam-result {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .rs-warning {
    background: transparent;
    color: var(--ink);
  }
}