/* ═══ Металлайн — СМЕЛАЯ РЕДАКЦИЯ (v3) ════════════════════════════════════════
   Слой поверх style.css: структура, тексты и вёрстка те же, меняется только цвет.
   Приём взят из презентации Металлайна — чередование жёлтых и графитовых полос
   во всю ширину, со светлыми паузами (без них жёлтый перестаёт бить).

   Красим ПО СМЫСЛУ блоков, а не по их порядку: серые секции (.sec--alt) уходят
   в графит, блок запроса (.cta) — в жёлтый, футер — в графит. Так ритм держится
   на любой странице, а не только на главной. Точечные исключения главной —
   в самом низу файла, под классом .p-home.                                      */

:root {
  --graphite: #17191c;
  --graphite-2: #24272b;
  --graphite-3: #3a3e43;
  --on-dark: #b7bbc0;
  --on-gold: #6b5410;
}

/* ——— HERO: графит + жёлтый клин, как диагональные срезы презентации ——— */
.hero { background: var(--graphite); }
.hero::after {
  content: ''; position: absolute; inset: 0 0 0 auto; width: 46%;
  background: linear-gradient(160deg, var(--gold) 0%, #f9b026 100%);
  clip-path: polygon(42% 0, 100% 0, 100% 100%, 0 100%);
  z-index: 0;
}
/* узкий экран: текст героя идёт во всю ширину и неизбежно ложился на клин — серое на жёлтом не читалось
   (ОС Елены 30.09). Клин обрывается над заголовком; --wedge-h считает initHeroFit в app.js */
@media (max-width: 900px) {
  .hero::after { bottom: auto; height: var(--wedge-h, 38%); width: 64%;
    clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%); }
}
.hero__art { z-index: 1; opacity: .38; }
.hero__inner { z-index: 2; }
.hero__slogan { color: var(--gold); }
.hero__scroll { color: #fff; }

/* ——— СЕРЫЕ СЕКЦИИ → ГРАФИТ (главный носитель ритма на всех страницах) ——— */
.sec--alt { background: var(--graphite); }
.sec--alt .tag { color: var(--gold); }
.sec--alt .lead, .sec--alt h2, .sec--alt h3 { color: #fff; }
.sec--alt .note, .sec--alt p { color: var(--on-dark); }
.sec--alt .lnk { color: #fff; }
.sec--alt .dirhead__name { color: #fff; }

/* плитки каталога на графите.
   NB: `.sec--alt .cat__tile` в базовом файле специфичнее одиночного класса —
   без парного селектора плитка осталась бы белой, а текст на ней белым */
.cat__grid { background: var(--graphite-3); }
.cat__tile, .sec--alt .cat__tile { background: var(--graphite-2); color: #fff; }
.cat__tile:hover, .sec--alt .cat__tile:hover { background: var(--gold); color: var(--ink); }
.cat__idx { color: var(--gold); }
.cat__tile:hover .cat__idx { color: var(--ink); }
.cat__meta { color: #9aa0a6; }
.cat__tile:hover .cat__meta { color: var(--on-gold); }

/* карточки-доказательства и списки на графитовых секциях */
.sec--alt .trust { background: var(--graphite-3); border-color: var(--graphite-3); }
.sec--alt .trust__cell { background: var(--graphite-2); }
.sec--alt .trust__cell h3 { color: #fff; }
.sec--alt .trust__cell p { color: var(--on-dark); }
.sec--alt .trust__std li { border-color: var(--graphite-3); color: var(--on-dark); }
.sec--alt .docs__item { background: var(--graphite-2); border-color: var(--graphite-3); }
.sec--alt .caps li { color: var(--on-dark); }

/* каталог: поиск и фильтры на графите */
.sec--alt .finder { background: var(--graphite-2); border-color: var(--graphite-3); }
.sec--alt .finder input { color: #fff; border-bottom-color: var(--graphite-3); }
.sec--alt .finder input::placeholder { color: #7c8288; }
.sec--alt .chip { background: transparent; border-color: var(--graphite-3); color: var(--on-dark); }
.sec--alt .chip:hover { border-color: var(--gold); color: #fff; }
.sec--alt .chip.on { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.sec--alt .finder__foot, .sec--alt .finder__hint { color: var(--on-dark); }
.sec--alt .finder__reset, .sec--alt .finder__ex, .sec--alt .finder__hint a { color: #fff; }
.sec--alt .pcard { background: var(--graphite-2); }
.sec--alt .pcard__name { color: #fff; }
.sec--alt .pcard__std { color: var(--gold); }
.sec--alt .pcard__sizes { color: #9aa0a6; }

/* площадки отгрузки (контакты) на графитовой секции */
.sec--alt .wcity { background: var(--graphite-3); border-color: var(--graphite-3); }
.sec--alt .wcity__cell { background: var(--graphite-2); }
.sec--alt .wcity__name { color: #fff; }
.sec--alt .wcity__num { color: var(--gold); }
.sec--alt .wcity__count { color: #9aa0a6; }
.sec--alt .geo__pt { border-top-color: var(--graphite-3); }
.sec--alt .geo__pt b { color: #fff; }

/* ——— БЛОК ЗАПРОСА → ЖЁЛТЫЙ ФИНАЛ (на всех страницах) ———
   в базовом файле кнопка задана как `.cta a.btn` — парируем той же специфичностью,
   иначе на жёлтом остаётся белая рамка с белым текстом */
.cta { background: var(--gold); color: var(--ink); }
/* в разметке блок запроса писался под тёмный фон, часть цветов задана инлайном
   (серый тег, светлый абзац) — на жёлтом они сливаются, перебиваем важностью */
.cta .tag { color: var(--on-gold) !important; }
.cta .lead, .cta p, .cta .note { color: var(--ink) !important; }
.cta .btn, .cta a.btn { border-color: var(--ink); color: var(--ink); }
.cta .btn:hover, .cta a.btn:hover { background: var(--ink); color: var(--gold); }
.cta :focus-visible { outline-color: var(--ink); }

/* ——— ФУТЕР ——— */
.foot { background: var(--graphite); border-top: 0; color: #9aa0a6; }
.foot .logo-light { display: none; }
.foot .logo-dark { display: block; }
.foot__copy { color: #7d838a; }
.foot b { color: #fff; }
.foot a:hover { color: var(--gold); }

/* ——— шапка: на смелом фоне прозрачное стекло слишком слабое ——— */
.hdr--dark { background: rgba(23,25,28,.55); }
.hdr:not(.hdr--dark) { background: rgba(255,255,255,.55); }

/* ——— светлые секции: палитра держится акцентами ——— */
.lead { border-left: 6px solid var(--gold); padding-left: 22px; }
.sec--alt .lead, .cta .lead, .hero .lead { border-left: 0; padding-left: 0; }
.counter::before { width: 100%; height: 4px; background: var(--gold); }
.counter { border-top-color: transparent; }

/* ═══ Исключения ГЛАВНОЙ: две жёлтые полосы и графитовая карта ═══════════════ */

/* отрасли — жёлтая полоса, графитовые корешки поверх неё */
.p-home #content > section:nth-of-type(5) { background: var(--gold); max-width: none; }
.p-home #content > section:nth-of-type(5) > * { max-width: var(--content); margin-left: auto; margin-right: auto; }
.p-home #content > section:nth-of-type(5) .tag { color: var(--on-gold); }
.p-home #content > section:nth-of-type(5) .lead { color: var(--ink); border-left: 0; padding-left: 0; }
/* «Подобрать под задачу» + «Сервис…» под аккордеоном: золотая рамка кнопки и золотое подчёркивание
   ссылки на золотом фоне не видны — кнопка читалась простым текстом (снимок Елены 30.09). Как у .cta */
.p-home #content > section:nth-of-type(5) .acts .btn { border-color: var(--ink); color: var(--ink); }
.p-home #content > section:nth-of-type(5) .acts .btn:hover { background: var(--ink); color: var(--gold); }
.p-home #content > section:nth-of-type(5) .acts .lnk { border-bottom-color: var(--ink); }
.p-home #content > section:nth-of-type(5) .acts .lnk:hover { border-bottom-color: #fff; }
.ind { background: rgba(0,0,0,.28); }
.ind__cell { background: #fffdf7; }
.ind__cell:hover, .ind__cell.on { background: #fff; }
.ind.is-open .ind__cell:not(.on) { background: var(--graphite); }
.ind.is-open .ind__cell:not(.on):hover { background: var(--graphite-2); }

/* география — графит, карта светится */
.p-home #content > section:nth-of-type(6) { background: var(--graphite); max-width: none; }
.p-home #content > section:nth-of-type(6) > * { max-width: var(--content); margin-left: auto; margin-right: auto; }
.p-home #content > section:nth-of-type(6) .tag { color: var(--gold); }
.p-home #content > section:nth-of-type(6) .lead { color: #fff; border-left: 0; padding-left: 0; }
.p-home #content > section:nth-of-type(6) .note { color: var(--on-dark); }
.geo__map svg > path[fill] { fill: var(--graphite-2); stroke: var(--graphite-3); }
/* ...но дуги поставок остаются золотыми: правило выше ловит и их — у дуг
   fill="none", то есть атрибут fill есть. На графите графитовая дуга не видна. */
.geo__map svg > path.draw[fill] { stroke: var(--gold); fill: none; }
.geo__map circle[fill="#17191c"] { fill: #9aa0a6; }
.geo__map text { fill: #cfd3d7; }
.geo__legend { color: var(--on-dark); }
.geo__dot--graph { background: #9aa0a6; }
.geo__dot--dest { background: transparent; border-color: #cfd3d7; }

/* качество и документы — жёлтая полоса вместо графитовой */
.p-home #content > section:nth-of-type(7) { background: var(--gold); }
.p-home #content > section:nth-of-type(7) .tag { color: var(--on-gold); }
.p-home #content > section:nth-of-type(7) .lead { color: var(--ink); }
.p-home #content > section:nth-of-type(7) .trust { background: rgba(0,0,0,.25); border-color: rgba(0,0,0,.25); }
.p-home #content > section:nth-of-type(7) .trust__cell { background: #fffdf7; }
.p-home #content > section:nth-of-type(7) .trust__cell h3 { color: var(--ink); }
.p-home #content > section:nth-of-type(7) .trust__cell p { color: var(--ink-soft); }
.p-home #content > section:nth-of-type(7) .trust__std li { border-color: rgba(0,0,0,.3); color: var(--ink); }
/* секция .sec--alt, поэтому глобальные «светлый текст на графите» её тоже цепляют —
   для жёлтого фона возвращаем тёмный */
.p-home #content > section:nth-of-type(7) .note,
.p-home #content > section:nth-of-type(7) p { color: var(--ink-soft); }
.p-home #content > section:nth-of-type(7) a { color: var(--ink); }

/* плашка редакции */
.proto-badge { border-left: 4px solid var(--gold); }


/* конверсионные блоки в смелой редакции */
.sec--alt .form__file-btn { border-color: #fff; color: #fff; }
.sec--alt .form__file-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.sec--alt .form__file-name { color: var(--on-dark); }
.sec--alt .form__file-name.on { color: #fff; }
.sec--alt .req__proof { color: var(--on-dark); }
.sec--alt .req__proof b { color: #fff; }
.sec--alt .dl__link { border-color: var(--graphite-3); }
.sec--alt .dl__link:hover { border-color: var(--gold); background: var(--graphite-2); }
.sec--alt .dl__ico svg, .sec--alt .dl__link b { color: #fff; }
.sec--alt .dl__link em { color: #9aa0a6; }


/* ═══════ v4: новые разделы в смелой палитре ═══════ */
.sec--alt .todo-note { background: rgba(252,192,42,.12); border-left-color: var(--gold); color: var(--on-dark); }
.sec--alt .todo-note b { color: var(--gold); }

.sec--alt .accr { background: var(--graphite-3); border-color: var(--graphite-3); }
.sec--alt .accr__cell { background: var(--graphite-2); }
.sec--alt .accr__cell h3 { color: #fff; }
.sec--alt .accr__cell p { color: #9aa0a6; }

.sec--alt .cmock__sheet { background: var(--graphite-2); border-color: var(--graphite-3); }
.sec--alt .cmock__stamp { background: var(--graphite-2); color: var(--on-dark); border-color: #6c7278; }
.sec--alt .cmock__lines i { background: var(--graphite-3); }
.sec--alt .cmock figcaption b { color: #fff; }
.sec--alt .cmock figcaption span { color: #9aa0a6; }

.sec--alt .ctrl li { border-top-color: var(--graphite-3); }
.sec--alt .ctrl b { color: #fff; }
.sec--alt .ctrl span { color: #9aa0a6; }

.sec--alt .ctabs, .sec--alt .cgrid { background: var(--graphite-3); border-color: var(--graphite-3); }
.sec--alt .ctab { background: var(--graphite-2); color: var(--on-dark); }
.sec--alt .ctab:hover { background: #2c3036; }
.sec--alt .ctab.on { background: var(--gold); color: var(--ink); }
.sec--alt .ctab.on span { color: var(--on-gold); }
.sec--alt .ccard { background: var(--graphite-2); }
.sec--alt .ccard__customer { color: #fff; }
.sec--alt .ccard__object { color: var(--on-dark); }
.sec--alt .ccard__std, .sec--alt .ccard__year { color: #9aa0a6; border-top-color: var(--graphite-3); }

.sec--alt .how { background: var(--graphite-3); border-color: var(--graphite-3); }
.sec--alt .how__cell { background: var(--graphite-2); }
.sec--alt .how__title { color: #fff; }
.sec--alt .how__text { color: var(--on-dark); }

/* таблицы на графите: базовый td наследует чернила — на тёмном фоне это нечитаемо */
.sec--alt table.spec td { color: var(--on-dark); }
.sec--alt table.spec th { color: #9aa0a6; }
.sec--alt table.spec th, .sec--alt table.spec td { border-bottom-color: var(--graphite-3); }
.sec--alt table.spec tr:hover td { background: var(--graphite-2); }
.sec--alt table.spec td a { color: #fff; border-bottom-color: #6c7278; }
.sec--alt table.spec td a:hover { border-bottom-color: var(--gold); color: var(--gold); }
.sec--alt .std__t tbody th { color: #fff; }
.sec--alt .std__steels { color: #9aa0a6; }
.sec--alt .spec__split td { background: var(--graphite-3); color: #fff; }
.sec--alt table.spec tr.spec__split:hover td { background: var(--graphite-3); }

/* ——— Шапка таблиц отбивается заливкой (решение 08.09) ———
   Раньше шапка отличалась от данных только цветом и размером букв, а нижняя граница
   у неё была такой же, как между строками: на длинных заголовках в шесть колонок
   граница «шапка / данные» пропадала. Даём светлую заливку и фирменную жёлтую линию
   снизу. Капс и разрядку в шапке оставляем как были — решение Сергея.
   Правило общее для всех таблиц сайта: разнобой между страницами хуже, чем правка
   в местах, где о ней не просили. */
table.spec thead th { background: var(--bg-alt); }
table.spec thead tr:last-child th { border-bottom: 2px solid var(--gold); }

/* В тёмных секциях светлая заливка нечитаема — тот же приём в графите.
   Селектор специфичнее общего (.sec--alt + класс), поэтому перебивает его. */
.sec--alt table.spec thead th { background: var(--graphite-2); }
.sec--alt table.spec thead tr:last-child th { border-bottom: 2px solid var(--gold); }

/* ——— Эскиз группы: графит с жёлтым штрихом ———
   Светло-серое поле со штрихом 1,2 px выцветало, и правая колонка карточки читалась
   пустой. Берём приём шапки сайта и плиток каталога: жёлтый штрих по графиту.
   Эскиз на карточке один, поэтому плотное пятно ей на пользу — в отличие от шапок
   таблиц, которых на странице до четырёх подряд. */
.card-art { background: var(--graphite); border-color: var(--graphite); }
.card-art svg { stroke-width: 1.9; color: var(--gold); }

/* Фотографии каталога v5: в тёмных секциях рамка и подпись перекрашиваются */
.sec--alt .card-photo img,
.sec--alt .photo-row img { border-color: var(--graphite-3); }
.sec--alt .card-photo figcaption,
.sec--alt .photo-row figcaption { color: #9aa0a6; }