/* ============================================================
   work.css — язык рабочих экранов платформы, версия 2 («цех»).
   Эталон: design-concepts/catalog-reference-v3.html

   Подключать ПОСЛЕДНИМ и только на РАБОЧИХ экранах. Витрина
   (главная, кейсы, о производстве) остаётся тёмной с фото.

   Приём тот же: экраны написаны на CSS-переменных, поэтому язык
   раскатывается переопределением токенов — разметку не трогаем.
   Откат = снять одну строку <link>.

   Что изменилось против версии 1 (по разбору taste-skill):
     · §4.1 — засечный дисплей убран. Georgia была рефлексом
       «креативно = засечки», это самый проверяемый AI-признак.
       Ставим Unbounded — он уже загружен в проекте, геометрический,
       с кириллицей, и звучит промышленно, а не издательски.
     · §4.2 — кремовая бумага заменена холодным светло-серым.
       Бежевые подложки названы вторым по частоте AI-признаком.
     · §4.4 — жирные чёрные коробки ослаблены до тонких линеек:
       контейнер оправдан, только когда несёт иерархию.
     · Масштаб заголовка поднят: между титулом и телом нужна
       пропасть, иначе экран читается как ровное серое поле.
   ============================================================ */

:root{
  /* — холодная база — */
  --bg-base:#EDEFF1;            /* подложка страницы */
  --bg-raised:#FFFFFF;
  --surface:#FFFFFF;
  --hairline:#D3D8DC;           /* тонкая линейка */
  --hairline-strong:#0E1114;    /* жирная — только там, где нужен акцент */

  --text-primary:#0E1114;
  --text-secondary:#3C444C;
  --text-muted:#5A636B;         /* ниже нельзя: контраст 4.5:1 к подложке */
  --text-faint:#5A636B;

  /* — один акцент на весь экран, в двух ролях —
     Яркий cyan по светлому фону даёт 1.7:1 и для текста непригоден:
     он работает заливками и фокус-кольцом. Для текста и границ —
     затемнённый вариант. */
  --accent:#0B6E7F;
  --accent-on:#FFFFFF;
  --accent-soft:rgba(11,110,127,.10);
  --accent-grad:#0B6E7F;        /* градиент → плашка */
  --accent-bright:#22D3EE;

  --warning:#8A5A00;
  --danger:#A32020;
  --success:#0F6B3F;

  --r-sm:0;--r-md:0;--r-lg:0;--r-xl:0;--r-pill:0;
  --shadow-card:none;
  --glow:0 0 0 3px var(--accent-bright);

  /* ФОКУС. Одноцветное кольцо не может быть контрастным одновременно
     по светлой подложке и по тёмной панели сметы: cyan по #EDEFF1 даёт
     1.57:1 при норме 3:1 (WCAG 2.2 SC 1.4.11 / 2.4.11). Поэтому колец
     два — тёмное внутри, фирменный cyan снаружи; одно видно всегда.
     outline:transparent вместо outline:none — чтобы в режиме высокой
     контрастности Windows система дорисовала своё кольцо. */
  --focus-ink:#0E1114;
  --focus-ring:0 0 0 2px var(--focus-ink),0 0 0 5px var(--accent-bright);
  --focus-ring-inset:inset 0 0 0 2px var(--focus-ink),inset 0 0 0 4px var(--accent-bright);

  /* дисплей — геометрический гротеск, уже загружен проектом */
  --ff-d:'Unbounded',system-ui,sans-serif;
}

body{
  /* перекрывает фото-подложку из bg.css (шорткат гасит background-image) */
  background:var(--bg-base);
  color:var(--text-primary);
}

/* ---------- шапка ---------- */
.nav{
  background:var(--bg-raised);
  backdrop-filter:none;
  border-bottom:1px solid var(--hairline);
}
.nav .links a{color:var(--text-secondary);font-weight:600}
.nav .links a:hover{color:var(--text-primary)}
.phone{color:var(--text-secondary)}

/* Знак: иконка светлая, по бумаге ей нужна тёмная плашка */
.brand .mark{
  /* иконку кладём здесь, а не полагаемся на bg.css: часть экранов
     (тарифы, НМЦК) его не подключают и знак оставался пустым квадратом */
  background-color:var(--hairline-strong) !important;
  background-image:url('/logo-icon.png') !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:74% !important;
  border-radius:0 !important;
  color:transparent !important;   /* прячет букву-заглушку «A» под иконкой */
  width:36px !important;height:36px !important;
}
.brand .bname{color:var(--text-primary) !important}
.brand .bsub{color:var(--text-muted) !important}

.agent-pill{
  color:var(--accent);
  background:var(--accent-soft);
  border:1px solid var(--accent);
}

/* ---------- кнопки ---------- */
.btn{border-radius:0;transition:none}
.btn.primary{background:var(--accent);color:var(--accent-on);border:2px solid var(--accent)}
.btn.primary:hover{background:#075766;border-color:#075766;transform:none;box-shadow:none}
.btn.ghost{background:var(--bg-raised);border:1px solid var(--hairline-strong);color:var(--text-primary)}
.btn.ghost:hover{background:var(--hairline-strong);color:var(--bg-raised);border-color:var(--hairline-strong)}
.btn:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--focus-ring)}

/* ---------- титулы: масштабный контраст ----------
   Было clamp(28px,5vw,42px) — заголовок почти сливался с телом.
   Поднимаем и ужимаем трекинг: Unbounded 800 держит крупный кегль. */
.head h1{font-size:clamp(34px,6vw,64px);line-height:.98;letter-spacing:-.03em}
.head p{font-size:16px}
.eyebrow{color:var(--text-muted);letter-spacing:.14em}

/* ---------- поля ввода: белая бумага, жёсткая рамка ---------- */
.stepper button,.stepper input,.modal input,.f,select,textarea{
  color:var(--text-primary);
  background:var(--bg-raised);
  border-color:var(--hairline);
}
.stepper button:hover{background:var(--hairline-strong);color:var(--bg-raised)}
.modal input:focus,.f:focus,select:focus,textarea:focus,.stepper input:focus{
  outline:2px solid transparent;box-shadow:var(--focus-ring-inset);
}

/* ---------- плотные списки: линейки вместо карточек-коробок ---------- */
/* Контейнер оправдан, только когда несёт иерархию (§4.4). Жирная
   чёрная рамка на каждой панели уравнивала всё в правах — тонкая
   линейка отделяет, но не кричит. */
.lines,.summary,.card,.panel{border:1px solid var(--hairline);box-shadow:none}
.line{border-bottom:1px solid var(--hairline)}
.line:hover{background:#F7F7F5}
.line .thumb{background:#FFFFFF;border:1px solid var(--hairline)}
.line .nm{font-weight:700}
.line .meta{color:var(--text-muted)}
.line .sum{font-family:var(--ff-d)}

.srow.big .k{color:var(--text-primary)}
.summary h3{font-family:var(--ff-d)}

/* ---------- прочее ---------- */
.toast{border:1px solid var(--hairline-strong);color:var(--text-primary);box-shadow:none}
.empty .ic{color:var(--hairline)}

/* ============================================================
   ПРАВКИ ПО ИТОГАМ ОСМОТРА В БРАУЗЕРЕ (смета + конфигуратор)
   ============================================================ */

/* 1. Меню переносилось на вторую строку — «О производстве» ломало
      базовую линию. Пункты не переносим и ужимаем интервал: восемь
      штук встают в строку без правки разметки. */
.nav .links{gap:var(--s4);flex-wrap:nowrap}
.nav .links a{white-space:nowrap}
@media(max-width:1240px){ .nav .links{gap:var(--s3)} .nav .links a{font-size:13px} }

/* 2. Моношрифт — только там, где он несёт смысл: артикул, число,
      код. Подписи и лейблы уходят в текстовую гарнитуру: моно в
      подписях давал «терминальный» вид, из-за которого экран
      читается как инструмент разработчика, а не каталог поставщика.
      Остаются моно: .art, .num, code, .agent-note code. */
.eyebrow,.lbl,.metric .k,.legend,.viz .wvh,.op .tag,.price-box .sub,.addop,.phone{
  font-family:var(--ff-t);
}
.eyebrow,.lbl,.metric .k{font-weight:700;letter-spacing:.12em}
.lbl,.metric .k{color:var(--text-muted)}
.phone{font-weight:600;letter-spacing:.01em}

/* 3. Итоговая плашка — главное число экрана, ей нужна жирная рамка,
      а не бледная заливка. */
.price-box{border:1px solid var(--accent);background:var(--accent-soft)}

/* 4. Сегментные переключатели и поля — печатная рамка вместо мягкой */
.seg button{border:1px solid var(--hairline);border-radius:0}
.seg button[aria-pressed="true"],.seg button.on{
  background:var(--hairline-strong);color:var(--bg-raised);border-color:var(--hairline-strong);
}
.addwall{border:2px dashed var(--hairline);border-radius:0}

/* 5. Шапки таблиц — тоже подписи, не код: уводим из моно и уплотняем
      линейкой снизу, как в печатном прайсе. */
th{
  font-family:var(--ff-t);font-weight:700;letter-spacing:.1em;
  color:var(--text-muted);border-bottom:2px solid var(--hairline-strong);
}
/* цифры в таблицах — дисплейным, как в эталоне: цена должна читаться первой */
.num,.line .sum,.srow.big .v{font-family:var(--ff-d);font-weight:700;letter-spacing:-.02em}

/* 6. Активный сегмент залит чёрным (п.4 выше) — подпись внутри него
      осталась тёмной и пропадала. Наследуем цвет заливки. */
.seg button.on,.seg button[aria-pressed="true"]{color:var(--bg-raised)}
.seg button.on small,.seg button[aria-pressed="true"] small{color:rgba(255,255,255,.78)}

/* ============================================================
   РАСКАТКА НА ОСТАЛЬНЫЕ ЭКРАНЫ.
   Ниже — селекторы, где цвет зашит мимо токенов (белый текст,
   тёмный фон). Перечислены поимённо, а не блanket-правилом по
   input/select: у экранных правил специфичность «класс+элемент»,
   голый тег их не перебьёт.
   ============================================================ */

/* поля ввода на бумаге */
.auth input,.fld input,.form select,.gate input,.login input,.sup-in,
.play textarea,.wiz-card select,.pos input.qty,.search,.sort,.f,.cell,
.modal input,.modal select,.modal textarea{
  color:var(--text-primary);
  background:var(--bg-raised);
  border-color:var(--hairline);
}
.auth input:focus,.fld input:focus,.gate input:focus,.login input:focus,
.sup-in:focus,.play textarea:focus,.pos input.qty:focus,.search:focus,
.modal input:focus{outline:2px solid transparent;box-shadow:var(--focus-ring-inset)}

/* панели и полосы фильтров */
.filters{background:var(--bg-raised);border-color:var(--hairline)}

/* текст, который был белым */
.nav .links a.cur{color:var(--text-primary);font-weight:700}
.beta-note b,.hero .meta b,.litem .lp,.ptab tr.avg td{color:var(--text-primary)}
.modal .mx:hover{color:var(--text-primary)}

/* тосты и модалки — печатная рамка */
.modal,.modal .box,.toast{background:var(--bg-raised);border:1px solid var(--hairline-strong)}

/* ============================================================
   ВТОРОЙ СЛОВАРЬ ПЕРЕМЕННЫХ — только экран «Счёт на оплату».
   invoice.html писался отдельно и назвал токены иначе
   (--bg/--card/--line/--ink/--mut/--cyan). Без этого блока экран
   остаётся тёмным: имена не совпадают, переопределять нечего.
   ============================================================ */
:root{
  --bg:#EDEFF1;
  --card:#FFFFFF;
  --line:#D3D8DC;
  --ink:#0E1114;
  --mut:#5A636B;
  --cyan:#0B6E7F;
}

/* ============================================================
   ПОЛЯ ВВОДА — правило на голые теги.
   Часть экранов (счёт, сброс пароля, правка витрины) красит поля
   селектором вида `input{...}` без класса. Наше правило той же
   специфичности, но подключено позже — значит выигрывает. Классовые
   случаи перечислены выше отдельно: их голый тег не перебьёт.
   ============================================================ */
input,select,textarea{
  background:var(--bg-raised);
  color:var(--text-primary);
  border-color:var(--hairline);
  border-radius:0;
}
input::placeholder,textarea::placeholder{color:#807969}
input:focus,select:focus,textarea:focus{
  outline:2px solid transparent;border-color:var(--accent);
  box-shadow:var(--focus-ring-inset);
}

/* ============================================================
   ПОДПИСИ — ДОБОР ПО ОСТАЛЬНЫМ ЭКРАНАМ.
   Каждый экран назвал классы подписей по-своему (.nmck .k, .kv .it .k,
   .bigbox .k, .countbar …). Моно в них давал «терминальный» вид —
   экран читался как инструмент разработчика, а не каталог поставщика.
   Моно оставляем там, где он несёт смысл: артикул, число, код,
   .num/.art/.phone/code — их здесь сознательно нет.
   ============================================================ */
.bigbox .k,.bigbox .sub,.nmck .k,.nmck .sub,.nmck-row,.kv .it .k,.kv .it .v,
.countbar,.dealer-line,.chip,.chip-f,.badge,.addobj,.addzone,
.obj .row .mini,.drop .it .pr,.litem .lp,.empty{
  font-family:var(--ff-t);
}
.bigbox .k,.nmck .k,.kv .it .k,.countbar{
  font-weight:700;letter-spacing:.11em;color:var(--text-muted);
}

/* Ключевые цифры экрана — дисплейным: они должны читаться первыми */
.bigbox .v,.nmck .v,.metric .v,.price-box .v{
  font-family:var(--ff-d);font-weight:700;letter-spacing:-.02em;
}

/* ============================================================
   СЛОЙ ПРИОРИТЕТА — добор по силе селектора.

   Раскатка языка сделана переопределением токенов: work.css идёт
   последней строкой <head> и «перекрывает». Это верно ТОЛЬКО при
   равной силе селектора. Экраны писали свои правила как
   `input.search` (0,1,1), а work.css — как `.search` (0,1,0):
   экранное правило выигрывает независимо от порядка загрузки.

   Что это дало в живом проде (замерено в браузере, детектор такое
   не ловит принципиально):
     · objects, catalog, gov-nmck, supplier — цвет текста в полях
       остался #fff с тёмной эпохи, подложка стала белой.
       Контраст 1:1. Человек печатает и не видит, что печатает.
     · кольцо фокуса не появлялось НИ НА ОДНОМ экране: собственные
       `input.search:focus{box-shadow:none}` сильнее наших.

   `:root:root` поднимает силу до (0,2,1) и бьёт связку класс+тег,
   не трогая разметку. Откат прежний — снять один <link>.
   ============================================================ */
:root:root input:not([type=checkbox]):not([type=radio]):not([type=range]),
:root:root select,
:root:root textarea{
  color:var(--text-primary);
  -webkit-text-fill-color:var(--text-primary);
  background-color:var(--bg-raised);
}
:root:root input::placeholder,
:root:root textarea::placeholder{
  color:var(--text-muted);
  -webkit-text-fill-color:var(--text-muted);
}
:root:root input:focus,
:root:root select:focus,
:root:root textarea:focus{
  outline:2px solid transparent;
  box-shadow:var(--focus-ring-inset);
}
/* Клавиатурный фокус на всём, что можно нажать. Раньше кольцо было
   только у .btn, и то гасилось экранными правилами. */
:root:root a:focus-visible,
:root:root button:focus-visible,
:root:root [tabindex]:focus-visible,
:root:root summary:focus-visible{
  outline:2px solid transparent;
  outline-offset:2px;
  box-shadow:var(--focus-ring);
}

/* ============================================================
   МОБИЛЬНЫЙ ДОБОР — 375px.

   Замерено в браузере: reset, agents и supplier-edit давали
   горизонтальный скролл всей страницы. Детектор такого не видит
   принципиально — это вычисленная геометрия, а не паттерн в
   исходнике. Причины разные, лечение общее:
     · agents        — .grid2 остаётся в два столбца;
     · supplier-edit — шапка .nav стоит в одну строку без переноса;
     · reset         — карточка не ужимается под грид-ячейку.
   Тот же дефект был в эталоне каталога и лечится так же: свернуть,
   а не дать выехать за экран.
   ============================================================ */
@media(max-width:600px){
  :root:root .grid,:root:root .grid2,:root:root .cards,:root:root .stats,
  :root:root .zrow,:root:root .rowp,:root:root .row,:root:root .mrow,
  :root:root .estimate,:root:root .desk,:root:root .catpick{
    grid-template-columns:1fr;
  }
  /* Шапки переносятся, а не выезжают. Перенос срабатывает только
     когда содержимое действительно не влезло. */
  :root:root .nav,:root:root .nav>.wrap,:root:root .hdr,:root:root .hdr__in{
    flex-wrap:wrap;row-gap:10px;
  }
  /* Флекс- и грид-элементы по умолчанию не ужимаются ниже min-content —
     из-за этого длинная строка внутри распирает всю страницу. */
  :root:root .card,:root:root .panel,:root:root .summary,:root:root .lines{
    max-width:100%;min-width:0;
  }
  :root:root .wrap>*{min-width:0}
}

/* Очень узкие экраны (iPhone SE и уже). На 320px экран reset всё ещё
   выезжал: 24px отступа страницы плюс 32px внутри карточки съедают
   112px из 320. Ужимаем поля — содержимое важнее воздуха. */
@media(max-width:600px){
  /* Экран reset centrирует карточку через body{display:grid;place-items:center}.
     Колонка при этом получает ширину auto = max-content содержимого, а
     карточка со своим width:100% меряется уже от неё — ссылка на саму
     себя, из-за которой колонка распирала страницу. Явная колонка
     minmax(0,1fr) разрывает круг; центрирование сохраняется, потому что
     max-width:420px у карточки остаётся. На не-grid body правило инертно. */
  :root:root body{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:380px){
  /* Экран reset прокручивался вбок ровно на ширину горизонтальных полей
     body: там body это grid с min-height:100vh, и Chrome засчитывает его
     боковой паддинг в область прокрутки, хотя содержимое влезает.

     Перенос поля на карточку не годится — при width:100% поля съедаются
     и карточка встаёт встык к краям (проверено: лево 0, право 320).
     overflow-x:clip на html тоже не помогает: Chrome не пробрасывает
     clip с корневого элемента во вьюпорт (проверено, сдвиг остался 28px).

     ИТОГ: паддинг ужат с 24 до 14px — паразитный сдвиг уменьшен с 35
     до 28px, но не убран. Остаётся ТОЛЬКО на ширинах <=320px и только
     на экране reset. Настоящее лечение — убрать display:grid с body в
     самом экране и центрировать карточку обёрткой; это правка разметки
     экрана, а не слоя переопределения, поэтому здесь не делается. */
  :root:root body{padding-left:14px;padding-right:14px}
  :root:root .card{padding:20px}
}