/* ============================================================
   Инженерный калькулятор
   БЛОКИ ИСХОДНЫХ ДАННЫХ — стиль-преемник (слой поверх assets/style.css)
   Макет: design/макет_исходные_данные.md (27.08.2026, Дизайнер)

   ПОДКЛЮЧАТЬ ПОСЛЕ assets/style.css (файл ничего не отменяет из старого
   слоя, кроме намеренных переменных --green; см. раздел «Палитра»).

   Слои: 1) базовые классы (.card, .field, .grid, table.checks…) — style.css;
         2) новый слой (.data-block, .step-head, .hint-box…) — этот файл.
   Селекторы нового слоя изолированы: привязаны к новым классам, старые
   элементы не затрагиваются.
   ============================================================ */

:root {
  /* ---- Брендбук «Инженерная классика» + веб-палитра сайта ---- */
  --navy: #0B2A5B;        /* корп. синий брендбука — заголовки блоков */
  --slate: #5C6B7A;       /* стальной серый — вторичный текст, подсказки */
  --green: #3E8E41;       /* тех. зелёный брендбука — успех/OK, «*» обязательного
                             (переопределяет веб-зелёный #40AB35 из style.css;
                             прежний сохранён ниже как --accent2) */
  --accent: #324093;      /* корп. синий сайта — акценты (как в style.css) */
  --accent2: #40AB35;     /* веб-зелёный — вторичные акценты */
  --amber: #B8860B;       /* функциональный янтарь — предупреждения, «особые условия» */

  /* ---- Цвета групп данных (метки .block-tag, полоса блока) ---- */
  --g-izysk: #3E8E41;     /* изыскания (грунты, гидрология) */
  --g-constr: #324093;    /* конструкция / геометрия */
  --g-load: #0B2A5B;      /* нагрузки */
  --g-mat: #5C6B7A;       /* материалы / нормативка */
  --g-spec: #B8860B;      /* особые условия */
  --g-calc: #7B8DA6;      /* параметры расчёта (светлая сталь) */
}

/* ============================================================
   1. ШАПКА ШАГА (единая для шагов 2 и 3)
   ============================================================ */
.step-head {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 14px 0 18px;
}
.step-head-num {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-size: 15px; font-weight: 700; line-height: 30px; text-align: center;
}
.step-head-text { flex: 1 1 auto; min-width: 0; }
.step-head-title { font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.35; }
.step-head-sub { font-size: 12.5px; color: var(--slate); line-height: 1.55; margin-top: 3px; }
.step-head-meta {
  flex: 0 0 auto; font-size: 11.5px; color: var(--slate);
  white-space: nowrap; padding-top: 6px;
}
@media (max-width: 760px) {
  .step-head { flex-wrap: wrap; }
  .step-head-meta { white-space: normal; padding-top: 0; width: 100%; }
}

/* ============================================================
   2. ТИПОВОЙ БЛОК ИСХОДНЫХ ДАННЫХ .data-block
   ============================================================ */
.data-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0 0 16px;
  overflow: hidden;
}
/* Полоса группы слева (цвет задаёт data-group ниже) */
.data-block { border-left: 3px solid var(--g-calc); }
.data-block[data-group="izysk"]  { border-left-color: var(--g-izysk); }
.data-block[data-group="constr"] { border-left-color: var(--g-constr); }
.data-block[data-group="load"]   { border-left-color: var(--g-load); }
.data-block[data-group="mat"]    { border-left-color: var(--g-mat); }
.data-block[data-group="spec"]   { border-left-color: var(--g-spec); }

/* ---- Шапка блока ---- */
.block-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 16px 12px;
  background: rgba(123,141,166,.07);
}
.data-block[data-group="izysk"]  .block-head { background: rgba(62,142,65,.06); }
.data-block[data-group="constr"] .block-head { background: rgba(50,64,147,.06); }
.data-block[data-group="load"]   .block-head { background: rgba(11,42,91,.06); }
.data-block[data-group="mat"]    .block-head { background: rgba(92,107,122,.07); }
.data-block[data-group="spec"]   .block-head { background: rgba(184,134,11,.07); }

/* Кликабельная шапка (collapsible) */
.data-block.collapsible .block-head {
  cursor: pointer; user-select: none;
  transition: background .15s;
}
.data-block.collapsible .block-head:hover { background: rgba(50,64,147,.09); }
.data-block.collapsible .block-head:focus-visible {
  outline: none; box-shadow: inset 0 0 0 2px var(--accent);
}

/* ---- Метка группы (квадрат с иконкой) ---- */
.block-tag {
  flex: 0 0 auto;
  width: 24px; height: 24px; border-radius: var(--radius-sm);
  background: var(--g-calc); color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.data-block[data-group="izysk"]  .block-tag { background: var(--g-izysk); }
.data-block[data-group="constr"] .block-tag { background: var(--g-constr); }
.data-block[data-group="load"]   .block-tag { background: var(--g-load); }
.data-block[data-group="mat"]    .block-tag { background: var(--g-mat); }
.data-block[data-group="spec"]   .block-tag { background: var(--g-spec); }
.block-tag svg { width: 16px; height: 16px; display: block; }

/* ---- Заголовок + подзаголовок блока ---- */
.block-head-text { flex: 1 1 auto; min-width: 0; }
.block-title {
  font-size: 15px; font-weight: 600; color: var(--navy);
  line-height: 1.35; margin: 0; text-transform: none; letter-spacing: 0;
}
.block-num {
  display: inline-block;
  font-size: 12px; font-weight: 700; color: var(--g-calc);
  margin-right: 6px; vertical-align: 2px;
}
.data-block[data-group="izysk"]  .block-num { color: var(--g-izysk); }
.data-block[data-group="constr"] .block-num { color: var(--g-constr); }
.data-block[data-group="load"]   .block-num { color: var(--g-load); }
.data-block[data-group="mat"]    .block-num { color: var(--g-mat); }
.data-block[data-group="spec"]   .block-num { color: var(--g-spec); }
.block-sub {
  font-size: 12.5px; font-weight: 400; color: var(--slate);
  line-height: 1.55; margin: 3px 0 0;
}

/* ---- Легенда обязательности и стрелка сворачивания ---- */
.block-legend {
  flex: 0 0 auto; align-self: center;
  font-size: 11px; color: var(--slate); white-space: nowrap;
  padding: 3px 8px; border-radius: 3px;
  background: rgba(92,107,122,.10);
}
.block-legend .req-star { color: var(--green); font-weight: 700; }
.block-chev {
  flex: 0 0 auto; align-self: center;
  width: 18px; height: 18px; position: relative;
}
/* Шеврон рисуется рамкой (без картинок) */
.block-chev::before {
  content: ''; position: absolute; top: 4px; left: 3px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate);
  transform: rotate(45deg);                      /* ▾ развёрнут */
  transition: transform .18s ease;
}
.data-block.collapsible.closed .block-chev::before {
  transform: rotate(-45deg);                     /* ▸ свёрнут */
}

/* ---- Тело блока ---- */
.block-body {
  padding: 16px 16px 6px;
  border-top: 1px solid var(--border);
}
.data-block.collapsible.closed .block-body { display: none; }

/* Нативный <details>/<summary> — тот же вид */
details.data-block summary.block-head { list-style: none; }
details.data-block summary.block-head::-webkit-details-marker { display: none; }
details.data-block:not([open]) .block-chev::before { transform: rotate(-45deg); }
details.data-block:not([open]) .block-body { display: none; }

/* ============================================================
   3. ПОДПИСЬ ПОЛЯ (единый стандарт)
   ============================================================ */
.data-block .field { margin-bottom: 16px; }
.data-block .field-label {
  display: block;
  font-size: 13px; font-weight: 500; color: var(--label);
  line-height: 1.4; margin-bottom: 5px;
}
/* Звёздочка обязательного поля (зелёная, брендбук) —
   преемственность: в style.css уже есть .field.req label::after;
   здесь цвет обновлён на брендбучный --green */
.data-block .field.req .field-label::after {
  content: ' *'; color: var(--green); font-weight: 700;
}
/* Явный span-маркер, если поле без label */
.req-star { color: var(--green); font-weight: 700; }

/* ---- Бейдж «опц.» ---- */
.opt-tag {
  display: inline-block;
  font-size: 10.5px; font-weight: 600; color: var(--slate);
  background: rgba(92,107,122,.12);
  border-radius: 3px; padding: 1px 6px;
  margin-left: 6px; vertical-align: 1px; text-transform: none; letter-spacing: 0;
}

/* Единица в поле — как в style.css (.unit-wrap .u), ничего не меняем;
   подпись единиц не содержит. */

/* ============================================================
   4. ПОДСКАЗКИ .hint-box (стандарт: норматив / пояснение)

   Д-1 (аудит оформления 15.09.2026). Прежде подсказка была flex-контейнером:
   маркер «?» + span.norm (white-space:nowrap) + текст. Два текстовых элемента
   рядом в flex делят ширину колонки, а неразрывный span.norm забирал её почти
   целиком — остаток текста сжимался в узкий столбик (по 1–3 слова в строке),
   а сетка полей из-за этого разъезжалась (1fr с автоматическим минимумом
   растягивался под содержимое → блок шириной 1713 px при колонке 826 px).
   Правильно: подсказка — обычный АБЗАЦ на всю ширину своего контейнера,
   перенос по словам; маркер «?» выведен из потока (позиционирован абсолютно)
   и места в строке не занимает.
   ============================================================ */
.hint-box {
  position: relative;
  padding-left: 20px;              /* 14 px маркер + 6 px зазор (прежний gap) */
  font-size: 12px; font-weight: 400; color: var(--slate);
  line-height: 1.5; margin-top: 5px;
  min-width: 0;
  overflow-wrap: break-word;       /* длинное неразрывное слово не рвёт колонку */
}
/* Маркер «?» в кружке — вне потока: не участвует в делении ширины */
.hint-box::before {
  content: '?';
  position: absolute; left: 0; top: 1px;
  width: 14px; height: 14px;
  border: 1px solid var(--slate); border-radius: 50%;
  font-size: 9.5px; font-weight: 700; color: var(--slate);
  text-align: center; line-height: 13px;
}
/* Нормативная ссылка внутри подсказки — часть абзаца, переносится вместе с текстом
   (прежде white-space:nowrap — именно он вытеснял текст подсказки в столбик) */
.hint-box .norm {
  font-weight: 600; color: var(--accent); white-space: normal;
}
/* В таблицах и подписях старый класс .hint продолжает работать как есть */

/* ============================================================
   5. ВАЛИДАЦИЯ: состояния поля (ok / warn / err)
   ============================================================ */
/* Ошибка */
.input-err,
.data-block .input-err {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(198,40,40,.12) !important;
  background: #fffdfd;
}
.input-err:focus,
.data-block .input-err:focus { box-shadow: 0 0 0 3px rgba(198,40,40,.18) !important; }
/* Предупреждение (вне рекомендованного диапазона, но допустимо) */
.input-warn,
.data-block .input-warn {
  border-color: var(--amber) !important;
  box-shadow: 0 0 0 3px rgba(184,134,11,.12) !important;
  background: #fffdf7;
}
.input-warn:focus,
.data-block .input-warn:focus { box-shadow: 0 0 0 3px rgba(184,134,11,.18) !important; }
/* Проверено, OK */
.input-ok,
.data-block .input-ok {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(62,142,65,.10) !important;
  background: rgba(62,142,65,.03);
}
/* Сообщения под полем */
.msg-err {
  font-size: 12px; font-weight: 500; color: var(--danger);
  line-height: 1.45; margin-top: 5px;
}
.msg-warn {
  font-size: 12px; font-weight: 500; color: var(--amber);
  line-height: 1.45; margin-top: 5px;
}
/* Ошибка в ячейках таблиц (ИГЭ/fd): внутренняя рамка, как у фокуса */
#ige-table input.input-err,
#fd-table input.input-err {
  box-shadow: inset 0 0 0 1.5px var(--danger) !important;
  background: rgba(198,40,40,.05) !important;
}
#ige-table input.input-warn,
#fd-table input.input-warn {
  box-shadow: inset 0 0 0 1.5px var(--amber) !important;
  background: rgba(184,134,11,.05) !important;
}

/* ============================================================
   6. СЕТКИ ВНУТРИ БЛОКА (1 / 2 / 3 колонки)
   ============================================================ */
/* 3 колонки — короткие числовые поля (характеристики, нагрузки) */
.data-block .grid-3 { grid-template-columns: repeat(3, 1fr); }
/* 2 колонки — средние поля (размеры, отметки) */
.data-block .grid-2 { grid-template-columns: repeat(2, 1fr); }
/* Широкие элементы — на всю строку: таблицы, текстовые названия */
.data-block .tbl-scroll,
.data-block .field-wide,
.data-block .grid > .field-wide { grid-column: 1 / -1; }
.data-block .grid-3 .field-wide,
.data-block .grid-2 .field-wide { grid-column: 1 / -1; }

/* --- Д-1/Д-2/Д-3 аудита 15.09.2026: колонки сетки не разъезжаются под содержимым ---
   Дорожка `1fr` = minmax(auto, 1fr): автоматический минимум равен min-content
   содержимого, поэтому одна длинная неразрывная строка (span.norm подсказки,
   заголовок, длинное имя) растягивала всю дорожку и блок вылезал за контейнер
   (Д-3: названия расчётов, «Биогенный (органический) грунт под намывом — …»).
   min-width: 0 снимает автоматический минимум: ширина дорожки задаётся сеткой,
   а содержимое переносится по словам. */
.data-block .grid > *,
.data-block .grid-2 > *,
.data-block .grid-3 > *,
.data-block .pile-params > *,
.data-block .pile-size > * { min-width: 0; }

/* Подписи и тексты полей переносятся по словам целиком (без обрезки).
   overflow-wrap: break-word (не anywhere!) — страховка от неразрывного
   токена; anywhere понижает min-content текста до одного символа и в
   flex-элементе снова даёт «столбик». */
.data-block .field-label,
.data-block .hint-box,
.data-block .block-sub,
.data-block .field > .chk-lbl,
.data-block .field.chk { overflow-wrap: break-word; }

/* Флажки и радиокнопки не сжимаются вместе с подписью */
.data-block .field input[type="checkbox"],
.data-block .field input[type="radio"],
.data-block .field.chk > input { flex: 0 0 auto; }

/* Многострочная подпись флажка выравнивается по первой строке (было по центру) */
.data-block .field.chk { align-items: flex-start; }
.data-block .field.chk > input { margin-top: 1px; }

/* --- Д-1 (аудит 15.09.2026): строковая раскладка полей с подсказкой-абзацем ---
   Блок 3.8 «Осадка сооружения во времени» — единственный, где подсказки имеют
   длину абзаца (до 382 знаков: «температура лаборатории», «продолжительность
   строительного периода», «длительность отсыпки»). В узкой колонке сетки такая
   подсказка занимала 8–9 строк и распирала блок; здесь каждое поле занимает
   строку целиком: слева подпись и поле ввода (единая ширина 340 px), справа —
   подсказка абзацем на всю оставшуюся ширину строки. Пустых колонок не остаётся
   при любом наборе видимых полей (переключатели «вручную»/«лабораторные данные»
   и чекбоксы скрывают часть полей). */
.data-block .grid.grid-rows > .field {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
  margin-bottom: 12px;
}
/* Флажок с подписью — одной строкой (flex), а не двумя колонками */
.data-block .grid.grid-rows > .field.chk { display: flex; }
.data-block .grid.grid-rows > .field > .field-label { grid-column: 1; }
.data-block .grid.grid-rows > .field > .hint-box {
  grid-column: 2; grid-row: 1 / span 4; margin-top: 0;
}
.data-block .grid.grid-rows > .field > *:not(.field-label):not(.hint-box) { grid-column: 1; }
@media (max-width: 760px) {
  .data-block .grid.grid-rows > .field { grid-template-columns: 1fr; }
  .data-block .grid.grid-rows > .field > .hint-box { grid-column: 1; grid-row: auto; margin-top: 5px; }
}

/* --- Д-8 (аудит 15.09.2026): подзаголовок группы полей внутри блока ---
   Поля разных расчётов в одном блоке (канал / водопропускная труба в 3.4;
   нагрузки на фундамент / на сваю / усилия в сечении / расходы воды в 3.6)
   разделяются подзаголовком с тонкой линией — сплошной список полей читался
   как один расчёт. */
.data-block .block-title.sub {
  margin: 16px 0 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
  letter-spacing: .04em;
}
.data-block .block-title.sub:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.data-block .block-body > .block-title.sub + .grid { margin-top: 0; }

/* ============================================================
   7. СВОРАЧИВАНИЕ (аналог <details>)
   Состояния: .collapsible.open (развёрнут, по умолчанию),
              .collapsible.closed (свёрнут). Управляет app.js.
   ============================================================ */
.data-block.collapsible.closed .block-head { border-bottom: none; }
/* Авторазворот (правило: блок с обязательными полями не свёрнут по умолчанию) —
   состояние задаётся в разметке, здесь только вид. */

/* ============================================================
   8. АДАПТИВ (слой поверх существующих media-запросов)
   ============================================================ */
@media (max-width: 760px) {
  .data-block .grid-2,
  .data-block .grid-3 { grid-template-columns: 1fr; }
  .block-head { flex-wrap: wrap; }
  .block-legend { order: 10; white-space: normal; }
  .block-chev { order: 11; }
  .block-body { padding: 14px 14px 4px; }
}