/* Digital RFQ ГМС Ливгидромаш — визуальный слой «инженерный формуляр»
   Бренд-токены сняты с живого сайта hms-livgidromash.ru (template_styles.css + логотип):
     • индустриальный красный #bf022b / #d81830 — CTA, ссылки, заголовки-слоганы, штамп
     • угольный графит #282828 / серый #555 / белая основа #fff
     • начертание Verdana (близко: IBM Plex Sans) + моноширинная для размерностей (IBM Plex Mono)
     • радиусы 0 — технический характер, без скруглений (в отличие от flat-5px ЭНА и 8px ONIS)

   Концепция: машиностроительный ФОРМУЛЯР (документ-таблица), а не карточный мастер.
   Отличия от ЭНА и ONIS по композиции и UI-языку:
     • левая колонка-«штамп» с оглавлением-нумерацией (не горизонтальный степпер-чипы)
     • поле = СТРОКА технической таблицы: № | Наименование параметра | Размерность | Требования заказчика
     • Размерность — отдельная ячейка на моноширинном шрифте
     • прогресс — номер раздела в «штампе» (не чипы-степпер)
     • красные квадратные CTA (0 радиус), миллиметровка-фон, IBM Plex
   ПРАВИЛО: ни один цвет не задаётся напрямую в правилах — только через переменные ниже. */

@font-face{font-family:'IBM Plex Sans';font-weight:400;font-style:normal;font-display:swap;src:url(brand/fonts/PlexSans-Variable-cyr.woff2) format("woff2")}
@font-face{font-family:'IBM Plex Sans';font-weight:500;font-style:normal;font-display:swap;src:url(brand/fonts/PlexSans-Variable-cyr.woff2) format("woff2")}
@font-face{font-family:'IBM Plex Sans';font-weight:600;font-style:normal;font-display:swap;src:url(brand/fonts/PlexSans-Variable-cyr.woff2) format("woff2")}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;src:url(brand/fonts/PlexMono-400-cyr.woff2) format("woff2")}
@font-face{font-family:'IBM Plex Mono';font-weight:600;font-style:normal;font-display:swap;src:url(brand/fonts/PlexMono-600-cyr.woff2) format("woff2")}

/* ============================ СВЕТЛАЯ ТЕМА (по умолчанию) ============================ */
:root{
  color-scheme:light;

  /* бренд ГМС: индустриальный красный */
  --red:#bf022b;          /* primary-акция из фирменного красного ГМС */
  --red-hover:#94021f;    /* наведение */
  --red-brand:#d81830;    /* фирменный красный — акцент-декор */
  --red-light:#fdecf0;    /* светлая подложка красного */
  --red-border:#f0c4cc;   /* границы красного */

  /* текст и поверхности (угольный графит) */
  --ink:#22252b;
  --grey:#565b63;
  --grey-light:#dfe2e6;
  --bg:#fbfaf8;           /* тёплый бумажный фон (технический лист) */
  --bg-soft:#f0f1f3;
  --card:#ffffff;
  --sheet:#ffffff;
  --sheet-line:#e4e6e6;   /* линии миллиметровки */
  --field-bg:#ffffff;
  --field-border:#c9ccd1;
  --on-accent:#ffffff;
  --focus-ring:rgba(191,2,43,.14);
  --flag-ink:#4d0d1c;
  --empty:#6a6f77;

  /* состояния */
  --danger:#b42328;
  --danger-bg:#fdefee;
  --danger-border:#f0c3c5;
  --danger-ink:#611417;
  --warn-bg:#fdf6ec;
  --warn-border:#ead1a8;
  --ok:#1f7a3d;

  --radius:0px;
  --shell-max:1500px;
  --side-w:264px;
  --logo-plate:#ffffff;   /* цветной знак ГМС на белой плашке в тёмной теме (знак не перекрашиваем) */
}

/* ============================ ТЁМНАЯ ТЕМА («цех-формуляр») ============================ */
html[data-theme="dark"]{
  color-scheme:dark;

  /* плашка под цветным логотипом в тёмном режиме */
  --logo-plate:#ffffff;
  /* красный на тёмном — читаемы светлые тона фирменной семьи */
  --red:#ff7a93;
  --red-hover:#ff9aae;
  --red-brand:#e8445f;    /* яркий фирменный красный на тёмном фоне */
  --red-light:#3a1620;
  --red-border:#6b2533;

  --ink:#e7e9ed;
  --grey:#9aa0a8;
  --grey-light:#2d3136;
  --bg:#121316;           /* угольный цех */
  --bg-soft:#1a1c20;
  --card:#17191d;
  --sheet:#15171a;
  --sheet-line:#272a2f;
  --field-bg:#121316;
  --field-border:#3a3e44;
  --on-accent:#1a040b;
  --focus-ring:rgba(255,122,147,.22);
  --flag-ink:#ffd2db;
  --empty:#7d838b;

  --danger:#ff9a9e;
  --danger-bg:#2a1517;
  --danger-border:#632a2e;
  --danger-ink:#ffc4c6;
  --warn-bg:#2a2011;
  --warn-border:#5a4218;
  --ok:#5fd08a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:'IBM Plex Sans',Verdana,Geneva,Arial,sans-serif;
  font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;
  transition:background-color .18s ease,color .18s ease;
}
img{max-width:100%}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-hover);text-decoration:underline}
button{font-family:inherit}

/* ============ демо-маркировка ============ */
.demo-flag{
  background:var(--red-light);border-bottom:1px solid var(--red-border);
  color:var(--flag-ink);font-size:12.5px;line-height:1.5;padding:9px 22px;text-align:center
}
.demo-flag b{color:var(--red)}

/* ============ каркас: левая колонка-штамп + формуляр ============ */
.shell{display:grid;grid-template-columns:var(--side-w) 1fr;max-width:var(--shell-max);margin:0 auto;min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--bg-soft);border-right:1px solid var(--grey-light)}
.stamp{padding:22px 18px 16px;display:flex;flex-direction:column;flex:1}
.stamp__brand{padding:8px;text-align:center;background:var(--logo-plate);border:1px solid var(--grey-light);margin-bottom:12px}
html[data-theme="light"] .stamp__brand{padding:8px;background:transparent;border-color:var(--grey-light);border-bottom:1px solid var(--grey-light)}
.stamp__logo{max-width:150px;max-height:60px;object-fit:contain;display:block;margin:0 auto}
.stamp__doc{font-size:12px;letter-spacing:.05em;color:var(--grey);margin:14px 0 8px;text-transform:uppercase;line-height:1.4}
.stamp__prog{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--red);margin:2px 0 10px}
.stamp__prog:before{content:"раздел ";color:var(--grey)}

/* оглавление-штамп */
.toc{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
.toc__cap{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin:4px 0 8px}
.toc__item{
  display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;text-align:left;
  padding:8px 6px;background:none;border:0;border-left:3px solid transparent;color:var(--grey);
  font-size:13px;cursor:pointer;transition:.12s;width:100%;font-weight:500
}
.toc__item .toc__no{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--grey)}
.toc__item.is-cur{background:var(--red-light);border-left-color:var(--red);color:var(--ink)}
.toc__item.is-cur .toc__no{color:var(--red)}
.toc__item.is-done{color:var(--ink)}
.toc__item.is-done .toc__ok{color:var(--ok)}
.toc__item:hover{background:var(--bg-soft)}
.side__foot{padding:12px 18px;border-top:1px solid var(--grey-light);display:flex;justify-content:flex-end}

/* ============ переключатель темы ============ */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid var(--grey-light);background:var(--card);color:var(--grey);cursor:pointer;padding:0;
  transition:background .15s,color .15s,border-color .15s
}
.theme-toggle:hover{color:var(--red);border-color:var(--red)}
.theme-toggle:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.theme-toggle__icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle__icon--moon{display:none}
html[data-theme="dark"] .theme-toggle__icon--sun{display:none}
html[data-theme="dark"] .theme-toggle__icon--moon{display:block}

/* ============ основная колонка ============ */
.main{display:flex;flex-direction:column;min-width:0}
.main__body{padding:30px 34px 40px;flex:1}
.formhead{margin-bottom:26px}
.formhead__kicker{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:6px}
.formhead__title{font-size:34px;font-weight:600;margin:0 0 8px;letter-spacing:-.02em;line-height:1.15}
.formhead__lead{color:var(--grey);max-width:78ch;margin:0;font-size:15px}

/* ============ раздел формуляра ============ */
.fsection{background:var(--sheet);border:1px solid var(--grey-light);margin-bottom:24px}
.sechead{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--grey-light)}
.sechead__no{
  font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:15px;color:var(--red);
  background:var(--red-light);display:flex;align-items:center;justify-content:center;
  width:60px;height:100%;padding:14px 10px;border-right:1px solid var(--grey-light);align-self:stretch
}
.sechead__t{padding:12px 18px}
.sechead__title{font-size:18px;font-weight:600;margin:0;letter-spacing:-.01em}
.sechead__doc{display:block;font-size:11.5px;color:var(--grey);margin-top:3px;font-family:'IBM Plex Mono',monospace;letter-spacing:.02em}

/* ============ таблица-формуляр: № | Наименование | Размерность | Требования ============ */
.fsheet{overflow-x:auto}
.fsheet__grid{display:grid;grid-template-columns:52px minmax(220px,1.4fr) 150px minmax(240px,1.6fr);width:100%}
.fsheet__h{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--grey);padding:8px 12px;border-bottom:1px solid var(--red);background:var(--bg-soft);border-right:1px solid var(--grey-light)
}
.fsheet__h-num{color:var(--red);font-weight:600}
.fsheet__h:last-child{border-right:0}

/* строка-поле */
.frow{display:contents}
.frow[hidden]{display:none}
.frow > *{border-bottom:1px solid var(--sheet-line);padding:12px 14px;align-items:center}
.frow__num{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--grey);border-right:1px solid var(--sheet-line);vertical-align:middle}
.frow__name{font-size:14.5px;color:var(--ink);border-right:1px solid var(--sheet-line);line-height:1.5}
.freq{color:var(--danger);margin-left:3px;font-weight:600}
.frow-hint{display:block;font-size:12px;color:var(--grey);margin-top:4px;line-height:1.4}
.frow__unit{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--red);border-right:1px solid var(--sheet-line)}
.frow__req{border-right:0;min-width:0}
.frow__err{display:block;font-size:12px;color:var(--danger);margin-top:4px;min-height:0}
.frow__err:empty{display:none}
.frow[data-invalid="1"] .frow__req .finput,.frow[data-invalid="1"] .frow__req .fselect,.frow[data-invalid="1"] .frow__req .ftextarea{border-color:var(--danger)}

/* условно-скрытые строки */
[data-f][hidden]{display:none}

/* ============ контролы (инженерный, 0 радиус, чёткие границы) ============ */
.finput,.fselect,.ftextarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  background:var(--field-bg);border:1px solid var(--field-border);border-radius:var(--radius);
  padding:10px 11px;min-width:0
}
.finput::placeholder,.ftextarea::placeholder{color:var(--empty);opacity:1}
.finput:focus,.fselect:focus,.ftextarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--focus-ring)}
.finput[aria-invalid="true"],.fselect[aria-invalid="true"],.ftextarea[aria-invalid="true"]{border-color:var(--danger)}
.fselect option{background:var(--field-bg);color:var(--ink)}
.ftextarea{resize:vertical;min-height:84px}

/* чипы — чёткие прямоугольники, красный актив */
.fchips{display:flex;flex-wrap:wrap;gap:7px}
.fchip{position:relative;display:inline-flex}
.fchip input{position:absolute;opacity:0;pointer-events:none}
.fchip span{
  display:inline-block;padding:9px 14px;border:1px solid var(--field-border);border-radius:var(--radius);
  font-size:13.5px;color:var(--grey);cursor:pointer;transition:.13s;background:var(--card);line-height:1.2
}
.fchip span:hover{border-color:var(--red);color:var(--red)}
.fchip input:checked+span{background:var(--red);border-color:var(--red);color:var(--on-accent)}
.fchip input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}

/* ============ кнопки (красные квадратные, 0 радиус) ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:48px;padding:0 26px;border-radius:var(--radius);border:1px solid transparent;
  background:var(--red);color:var(--on-accent);font-family:inherit;font-size:15px;font-weight:600;
  cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,color .15s
}
.btn:hover{background:var(--red-hover);text-decoration:none}
.btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.btn--ghost{background:var(--card);color:var(--red);border-color:var(--red-border)}
.btn--ghost:hover{background:var(--red-light);border-color:var(--red)}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ============ навигация ============ */
.stepnav{display:flex;align-items:center;gap:14px;margin-top:28px;flex-wrap:wrap}
.stepnav__next,.stepnav__send{margin-left:auto}
.stepnav__errors{color:var(--danger);font-size:13.5px;flex:1 1 260px}

/* ============ сводка / проверка ============ */
.review{border:1px solid var(--grey-light);background:var(--sheet);margin-bottom:20px}
.review__head{display:flex;align-items:center;gap:12px;background:var(--bg-soft);padding:12px 20px;border-bottom:1px solid var(--grey-light)}
.review__head b{font-size:15px}
.review__head .u-mla{margin-left:auto;font-size:13px}
.review__body{padding:8px 20px 16px}
.review__block{padding:12px 0;border-bottom:1px solid var(--sheet-line)}
.review__block:last-child{border-bottom:0}
.review__block dt{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--red);margin:0 0 8px}
.review__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:8px 20px;font-size:14px;padding:4px 0}
.review__row span:first-child{color:var(--grey)}
.review__row b{font-weight:500}

/* ============ доставка / уведомления ============ */
.dnote{display:flex;gap:14px;padding:14px 18px;border-bottom:1px solid var(--sheet-line);font-size:13.5px;line-height:1.6}
.dnote__n{
  font-family:'IBM Plex Mono',monospace;flex:0 0 auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  background:var(--red);color:var(--on-accent);font-weight:600;font-size:13px
}
.dnote b{color:var(--red)}
.dnote--warn{background:var(--warn-bg)}
.dnote--warn .dnote__n{background:var(--grey);color:var(--on-accent)}
.notice{border:1px solid var(--red-border);background:var(--red-light);padding:16px 18px;font-size:13.5px;line-height:1.6}
.notice b{color:var(--red)}
.notice--err{border-color:var(--danger-border);background:var(--danger-bg);color:var(--danger-ink)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.6;color:var(--grey)}
.consent input{width:19px;height:19px;margin:1px 0 0;accent-color:var(--red);flex:0 0 auto}
.consent b{color:var(--ink);font-weight:600}
.consent-note{font-size:12.5px;color:var(--grey);margin:8px 0 0 31px;padding-left:12px;border-left:2px solid var(--red-border)}
.files{display:flex;flex-direction:column;gap:10px;padding:16px 18px}
.files>input{align-self:flex-start}
.files__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.files__list li{display:flex;gap:10px;align-items:center;font-size:13px;background:var(--bg-soft);border:1px solid var(--grey-light);padding:7px 12px}
.files__list button{margin-left:auto;border:0;background:none;color:var(--grey);cursor:pointer;font-size:15px}

.hintline{font-size:12.5px;color:var(--danger);min-height:0}
.hintline:empty{display:none}
.group__src--plain{font-size:12px;color:var(--grey);margin:14px 0 0;font-family:'IBM Plex Mono',monospace}

/* ============ готово ============ */
.done{text-align:center;padding:40px 10px 70px}
.done__mark{width:72px;height:72px;margin:0 auto 22px;background:var(--red-light);border:2px solid var(--red);display:flex;align-items:center;justify-content:center}
.done__mark svg{width:34px;height:34px;stroke:var(--red);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.done h1{font-size:30px;font-weight:600;margin:0 0 12px}
.done p{color:var(--grey);max-width:65ch;margin:0 auto 14px}
.done__id{display:inline-block;font-size:13px;background:var(--bg-soft);border:1px solid var(--grey-light);padding:8px 14px;margin:6px 0 20px;font-family:'IBM Plex Mono',monospace}

/* ============ подвал ============ */
.footer{border-top:1px solid var(--grey-light);background:var(--bg-soft);margin-top:10px;font-size:13px;color:var(--grey)}
.footer__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;padding:28px 34px}
.footer b{color:var(--ink)}
.footer__note{font-size:12px}
@media(max-width:900px){.footer__cols{grid-template-columns:1fr;gap:14px;padding:24px 20px}}

.u-m0{margin:0}
.u-mt12{margin-top:12px}
.u-mt14{margin-top:14px}
.u-mt18{margin-top:18px}
.u-mb14{margin-bottom:14px}
.u-grey{color:var(--grey)}

/* ============ адаптивность ============ */
@media(max-width:1080px){
  .shell{grid-template-columns:210px 1fr}
  .fsheet__grid{grid-template-columns:44px minmax(190px,1.2fr) 120px minmax(220px,1.6fr)}
}
@media(max-width:860px){
  .shell{display:block;min-height:auto}
  .side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--grey-light)}
  .stamp{padding:14px 16px}
  .stamp__brand{display:none}
  .stamp__doc{display:none}
  .stamp__prog{margin:0}
  .toc{flex-direction:row;flex-wrap:wrap;gap:6px;overflow:visible}
  .toc__cap{display:none}
  .toc__item{grid-template-columns:22px 1fr auto;padding:6px 8px;border-left:0;border-bottom:2px solid transparent;font-size:12.5px;width:auto;flex:1 1 130px}
  .toc__item.is-cur{border-bottom-color:var(--red)}
  .side__foot{padding:8px 16px;justify-content:flex-start}
  .main__body{padding:22px 16px 34px}
  .footer__cols{padding:22px 16px}
}
@media(max-width:600px){
  .fsheet__grid{grid-template-columns:34px minmax(150px,1fr) 90px minmax(180px,1.4fr)}
  .frow > *{padding:10px 8px}
  .fsheet__h{padding:6px 8px;font-size:10px}
  .formhead__title{font-size:26px}
  .stepnav__next,.stepnav__send{margin-left:0}
  .stepnav{gap:10px}
}

/* скрытые поля honeypot / sr */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.honeypot{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}