/* Почерк сайта описан в docs/POCHERK.md. Правки — только туда и сюда
   одновременно: свод без кода врёт, код без свода забывается. */

/* ШРИФТ.

   Inter — тот же, что в приложении и в панели менеджера. Лежит у нас файлами,
   а не приезжает с чужого адреса: до 03.09.2026 сайт тянул его с серверов
   гугла, и при недоступном гугле страница показывалась системным шрифтом —
   почерк ехал у всех сразу.

   Файлы те же самые, что в `project91/webapp/fonts`. Кириллица и латиница
   врозь — браузер качает только нужное. Шрифт переменный, ось веса 100–900,
   поэтому 400 и 500 берутся из одного файла: значение в `font-weight` и есть
   вес, которым он нарисуется.

   Начертаний два, 400 и 500; жирного нет (docs/POCHERK.md). */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root { color-scheme: light;
  --bg:#fff; --soft:#f6f7f9; --line:#e4e7ec; --line2:#cfd4dc;
  --text:#16181d; --muted:#6b7280; --dim:#98a1b0;
  /* СИНИЙ ОДИН НА ВЕСЬ САЙТ. Их было два: #2563eb на кнопках и ссылках и
     #288bf0 на столбиках шкалы. Владелец 10.09.2026: «мне больше всего
     нравится синий, который у нас на шкале, он приятный, а остальные
     ядовитые какие-то». Оставлен тот, что на шкале; бледный — он же,
     разбавленный, для хвостов гистограммы. */
  --accent:#288bf0; --accent-soft:#eaf0ff; --accent-blednyy:#c9dcf4;
  --good:#157347;
  --dark:#1b1e24; --dark-line:#2c313a;
  /* КЕГЛИ — ЧЕТЫРЕ СТУПЕНИ, И БОЛЬШЕ НИКАКИХ.
     Было десять: 12, 13, 14, 15, 17, 18, 20, 24, 28, 30. Между 13 и 14, между
     14 и 15 глаз разницы не видит — это не иерархия, а разнобой, который
     накопился сам собой (замечание владельца 29.08.2026).
     Ступени разведены так, чтобы соседние различались сразу: 12 → 15 это
     четверть, 15 → 20 треть, 20 → 30 половина.
     СТАРШИНСТВО ЗАДАЁТСЯ ЦВЕТОМ И НАСЫЩЕННОСТЬЮ, А НЕ КЕГЛЕМ. Второстепенное
     не мельче, а приглушённее — то же правило, что в приложении. Поэтому
     подписи, крошки и метаданные остались на 15, только серые.
     Новый размер заводить нельзя: сначала ступень в этот список и строка в
     docs/POCHERK.md. */
  --kegl-zagolovok:30px;
  --kegl-krupno:20px;
  --kegl-tekst:15px;
  --kegl-metka:12px;

  /* СКРУГЛЕНИЕ — ОДНО НА ВЕСЬ САЙТ.
     До 29.08.2026 углов не скругляли вовсе. Владелец: «везде, где острые углы,
     нужно чуть-чуть скруглить, совсем немного». Четыре точки — это заметно
     глазу и не превращает страницу в мыло.
     Второго значения не заводим: разные скругления рядом читаются как разные
     руки. Круглое остаётся круглым — точки на шкале это не про углы. */
  --skruglenie:4px;

  /* ЛЕСЕНКА ОТСТУПОВ — ТРИ СТУПЕНИ, И БОЛЬШЕ НИКАКИХ.
     Было четырнадцать значений вперемешку: 34, 28, 24, 22, 16, 14, 12, 10, 8,
     4, 2, 1. Оттого страница и читалась кучей — над серой карточкой воздуха
     больше, чем между номером и шкалой, а «Где продают» стоял на отдельном
     отшибе (замечание владельца 10.09.2026).
     Ступени разведены вдвое, чтобы разница была видна глазом: 8 — строки
     внутри одного блока, 24 — блоки одного раздела, 48 — раздел от раздела.
     Четвёрка остаётся только там, где две строки читаются как одна подпись
     (номер и марка под ним) — это типографика, а не расстановка. */
  --shag-blizko:8px;
  --shag-blok:24px;
  --shag-razdel:48px;
}
* { box-sizing:border-box; }
/* «Скрыто» должно значить скрыто.
   Браузер прячет скрытое правилом display:none, но у него самая слабая сила:
   любой наш класс с display:grid или display:flex его перебивает. Из-за этого
   категории на главной не прятались при поиске, и находка выезжала под ними,
   в самый низ страницы (замечание владельца 29.08.2026). Та же беда ждала
   ряды отборов на проценке.
   Лечим один раз и для всего, а не по месту. */
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--text);
  font:400 15px/1.55 Inter,-apple-system,sans-serif; font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased; }
button, input, select { font:inherit; }
button { cursor:pointer; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.hold { max-width:1240px; margin:0 auto; padding:0 24px; }
/* ── первый этаж: тёмный, главные разделы ── */
.deck { background:var(--dark); }
.deck .hold { display:flex; align-items:center; gap:6px; height:60px; }
/* Знак — кнопка «домой», как на любом сайте. Выглядит надписью: рамки и
   заливки у него нет, но нажимается. */
.mark { margin-right:28px; padding:0; border:0; background:none; color:#fff;
  font-size:var(--kegl-krupno); font-weight:500; letter-spacing:-.01em; }
.mark:hover { color:#fff; }
/* Разделы стоят пошире: 18 по бокам жались друг к другу, и шапка выглядела
   полупустой при том, что места в ней вдоволь (замечание владельца
   29.08.2026). Отступ, а не зазор: у выбранного раздела подложка, и она должна
   расти вместе с ним. */
.burger { display:none; }
.deck button { height:36px; padding:0 26px; border-radius:var(--skruglenie); border:0; background:transparent;
  color:#c7cdd8; font-size:var(--kegl-tekst); }
/* Плашка выбранного раздела ниже шапки и со скруглением: во всю высоту она
   выглядела вырезом в тёмной полосе, а не пометкой (владелец 29.08.2026). */
.deck button.on { background:#2a2f38; color:#fff; font-weight:500; }
.deck button:hover { color:#fff; }
/* ── второй этаж: своё и действия ── */
.desk { border-bottom:1px solid var(--line); }
.desk .hold { display:flex; align-items:center; gap:24px; height:52px; }
.desk button { border:0; background:transparent; color:var(--accent); font-size:var(--kegl-tekst); }
.desk .right { margin-left:auto; display:flex; align-items:center; gap:22px; }
.desk .right button { color:var(--muted); }
/* Шаг дороги, на который можно нажать. Выглядит как остальная строка — серым,
   без подчёркивания: это не действие, а возврат назад. Подчёркивание при
   наведении говорит, что нажимается. */
/* Заголовок отделён от шапки разделом: стоял вплотную к полосе входа и
   упирался в неё (замечание владельца 10.09.2026). */
/* Заголовком страницы работает само описание: отдельное слово «Проценка»
   повторяло активный раздел в шапке и занимало строку зря (10.09.2026).
   Поэтому у h1 здесь вид обычного текста, а не крика. */
h1 { margin:var(--shag-razdel) 0 var(--shag-blizko); font-size:var(--kegl-zagolovok);
  font-weight:400; line-height:1.2; letter-spacing:-.015em; text-wrap:balance; }
/* Чёрным, а не серым: это единственная строка, которая объясняет, что тут
   вообще есть, — приглушать её незачем (владелец 29.08.2026). */
.lead { margin:0 0 var(--shag-blok); color:var(--text); font-size:var(--kegl-tekst); }
/* ── блок поиска с отборами ── */
/* Блок поиска один и тот же на главной и на проценке — значит и ширина одна.
   Во всю ширину страницы (решение владельца 29.08.2026). Раньше на главной он
   тянулся во всю, а на проценке был 700 — один блок читался двумя разными. */
/* Серый тон вернулся: без него карточка читалась пустой рамкой (владелец
   10.09.2026, после того как посмотрел прозрачную). */
.panel { border-radius:var(--skruglenie); border:1px solid var(--line); background:var(--soft); }
.panel__body { display:grid; gap:12px; padding:18px 24px 20px; }
/* Между полем, маркой и кнопкой воздуха вдвое больше прежнего: стояли
   вплотную и читались одним слипшимся блоком (владелец 10.09.2026). */
.line1 { display:flex; align-items:flex-start; gap:20px; }
.line1 input { border-radius:var(--skruglenie); flex:1; max-width:640px; height:40px; padding:0 14px;
  border:1px solid var(--line2); background:#fff; font-size:var(--kegl-tekst); outline:0; }
.line1 input:focus, .line2 input:focus, .line2 select:focus { border-color:#9db4f5; }
/* ТОЛЬКО ПРЯМАЯ КНОПКА СТРОКИ. 10.09.2026 марка переехала внутрь .line1,
   а пункты её списка — тоже кнопки: правило красило их все синим, и список
   марок стал синей стеной. Ограничено прямым потомком. */
.line1 > button { border-radius:var(--skruglenie); height:40px; padding:0 30px; border:1px solid var(--accent);
  background:var(--accent); color:#fff; font-size:var(--kegl-tekst); font-weight:500; }
.line2 { display:flex; flex-wrap:wrap; gap:12px; }
.line2 select, .line2 input { border-radius:var(--skruglenie); height:36px; padding:0 12px; border:1px solid var(--line2);
  background:#fff; font-size:var(--kegl-tekst); outline:0; }
/* ── СВОЁ ПОЛЕ ВЫБОРА ─────────────────────────────────────────────────────
   Вместо `select`. Системный список у браузера свой: он разворачивается на всю
   высоту экрана, выглядит чужим и на буквы не отзывается — 522 модели в нём
   листаются вслепую (замечание владельца 29.08.2026).

   Здесь обычное поле: пишешь первые буквы — список отбирается. Высота
   ограничена, а не во весь экран. */
.pick { position:relative; flex:0 0 auto; }
.pick__field { width:170px; height:40px; padding:0 12px;
  border:1px solid var(--line2); border-radius:var(--skruglenie); background:#fff;
  font-size:var(--kegl-tekst); outline:0; }
.pick__field:focus { border-color:#9db4f5; }
.pick__field:disabled { background:var(--soft); color:var(--dim); }
#model .pick__field, #zModel .pick__field { width:240px; }
/* ПОТОЛОК ВЫСОТЫ — ГЛАВНОЕ ЗДЕСЬ. Без него список из пятисот строк уезжает за
   край экрана, и человек не понимает, где он оказался. */
.pick__list { position:absolute; z-index:20; top:calc(100% + 4px); left:0; min-width:100%;
  max-height:280px; overflow-y:auto; border:1px solid var(--line2);
  border-radius:var(--skruglenie); background:#fff;
  box-shadow:0 10px 28px rgba(19,27,43,.14); }
.pick__group { padding:10px 12px 6px; color:var(--dim); font-size:var(--kegl-metka);
  font-weight:500; letter-spacing:.05em; text-transform:uppercase; }
.pick__item { display:block; width:100%; padding:7px 12px; border:0; background:none;
  color:var(--text); font-size:var(--kegl-tekst); text-align:left; white-space:nowrap; }
.pick__item:hover, .pick__item.on { background:var(--accent-soft); }
.pick__empty { padding:12px; color:var(--muted); font-size:var(--kegl-tekst); }
/* Ширины своим размером, а не растяжкой во всю строку. Я растянул их
   29.08.2026, «чтобы строки совпадали по краю», и вышло поле во всю страницу —
   владелец сразу сказал, что в начале было нормально. Было вот так. */
.line2 select { min-width:240px; }
.line2 input { width:190px; }
/* ── СПИСОК ДЕТАЛЕЙ ГРУППЫ ───────────────────────────────────────────────
   Строка на позицию: имя с номером слева, цена справа. Устройство выбрано
   владельцем 29.08.2026 вместе с карточкой — четвёртый из показанных видов.

   Занимает место разделов, а не появляется под ними: экран не должен расти
   вниз при каждом нажатии. */

/* Черта: выше подошло выбранной машине, ниже применимости в каталоге нет.
   Одна на список: отметка у каждой строки — это сорок серых приписок, шум. */

/* ── РАЗДЕЛЫ КАТАЛОГА ────────────────────────────────────────────────────
   Слева разделы, справа группы выбранного. Заранее не раскрыто ничего:
   пока раздел не нажат, справа пусто. Владелец 30.08.2026 — до этого я
   показывал группы первого раздела сразу, и выходило, будто разделы и группы
   стоят рядом всегда.

   До 30.08.2026 здесь лежали пять столбцов с моими выдуманными категориями —
   всё на виду и всё сразу. Владелец: «зачем клиенту это всё внизу видеть». */

/* Разделы — обычные ссылки синим, без подложки и без выделения при наведении.
   Владелец 30.08.2026: «пусть будут просто синими, и всё». */

/* ВЫСОТА ЗАКРЕПЛЕНА ПО САМОМУ БОЛЬШОМУ РАЗДЕЛУ. В «Кузове и салоне» 25 групп,
   в «Электрике» 10 — без этого страница при каждом нажатии то удлинялась, то
   укорачивалась, и экран прыгал (замечание владельца 30.08.2026). */
/* Высота держится, только когда раздел раскрыт: тогда переключение с 25 групп
   на 10 не дёргает экран. Пока ничего не выбрано, пустого места быть не должно
   — из-за него всё, что ниже, уезжало в никуда (замечание владельца
   03.09.2026). */

.wrap { padding-bottom:32px; }
/* Заголовок в одну строку: значок стоит перед словами, и когда строка
   переносилась, он оставался висеть посередине двух строк и выглядел криво. */
/* Значок телеграмный, значит и цвет его: подпись тёмная, знак синий — глаз
   узнаёт его раньше, чем читает строку. */

/* ── ТЕКСТОВЫЕ СТРАНИЦЫ ──────────────────────────────────────────────────
   Проза в колонку по ширине читаемой строки. Во всю ширину экрана строка
   уходит за 150 знаков, и глаз теряет начало следующей. */
.proza { max-width:70ch; }
.proza p { margin:0 0 16px; color:var(--text); font-size:var(--kegl-tekst);
  line-height:1.6; }
/* Вопросы раскрываются нажатием — так же, как в приложении: семь ответов
   подряд человек не читает, он ищет свой. */
.faq { max-width:70ch; margin-top:8px; }
/* ── проценка ──────────────────────────────────────────────────────────────
   Карточка замера повторяет приложение: шкала со всеми ценами, средняя в
   белом кольце, три числа под линией, наша цена плашкой. Владелец 29.08.2026:
   «проценка у нас так не выглядит» — значит выглядеть должна так же.

   Крупнее, чем в приложении: там номер 20 и подписи 13, здесь 24 и 14 —
   размеры сайта (см. выше). Устройство то же, кегль свой.

   Два места нарушают «скруглений нет» и палитру сайта намеренно: точки на
   шкале круглые и плашка серо-лимонная. Это не украшение, а опознавательный
   знак проценки — он один на приложение и сайт. */
.state { margin-top:var(--shag-blok); color:var(--muted); font-size:var(--kegl-tekst); }
/* ОДНА КОЛОНКА НА ВСЮ СТРАНИЦУ.
   Замер был обрезан на 1080 при странице в 1192, и низ выходил уже верха на
   112 точек — правый край не сходился (замечание владельца 10.09.2026).
   Своей ширины у блока нет: во всю ширину значит во всю ширину. Уже колонки
   бывает только текст, который читают строками, — см. .proza и .faq. */
.zamer { margin-top:var(--shag-razdel); }
.zamer__num { font-size:var(--kegl-krupno); letter-spacing:-.01em; }
/* Марка — производитель, название — имя детали. Разные строки. */
.zamer__marka { margin-top:4px; font-size:var(--kegl-tekst); font-weight:500; }
.zamer__brand { margin-top:4px; color:var(--muted); font-size:var(--kegl-tekst); }
/* ИТОГ ПОЛОСОЙ. Четыре числа в общей рамке, рыночная на сером: она ответ,
   остальные при ней. Порядок задал владелец 10.09.2026 — цены по возрастанию,
   счёт последним. Имени детали здесь нет: своего названия у нас нет, а чужое
   не берём. Выбор по макету, вариант 3. */
.itog { display:flex; margin-top:var(--shag-blok); border:1px solid var(--line);
  border-radius:var(--skruglenie); overflow:hidden; }
.itog > div { flex:1; padding:12px 16px; border-left:1px solid var(--line); }
.itog > div:first-child { border-left:0; }
.itog .gl { background:var(--soft); }
.itog span { display:block; color:var(--dim); font-size:var(--kegl-metka);
  letter-spacing:.06em; text-transform:uppercase; }
.itog b { display:block; margin-top:6px; font-weight:500;
  font-size:var(--kegl-krupno); font-variant-numeric:tabular-nums; }
/* ОДНО ПОЛЕ НА ОБА СЛУЧАЯ. Строка и список отличаются только числом строк,
   поэтому переключателя нет: поле начинается одной строкой, растёт по мере
   ввода и тянется за уголок (решение владельца 08.09.2026). */
.line1 textarea { border-radius:var(--skruglenie); flex:1; max-width:560px;
  padding:9px 14px; border:1px solid var(--line2); background:#fff;
  font:inherit; font-size:var(--kegl-tekst); line-height:1.55; outline:0;
  /* Уголком поле тянут вниз, а не вверх: подняв его, владелец схлопывал
     строку почти в ноль и закрывал сам ввод (10.09.2026). Ниже одной
     строки не пускаем. */
  resize:vertical; min-height:40px; font-variant-numeric:tabular-nums; }
.line1 textarea:focus { border-color:#9db4f5; }
/* Кнопка держится верха поля, а не растягивается на всю его высоту. */
.line1 > button { align-self:flex-start; }
/* Подсказка под полем номеров: чем его наполнить и сколько уже введено.
   Прижата к самому полю — она про него, а не про то, что идёт ниже. Отступ
   до следующей строки при этом остаётся прежним. */
.podskaz { display:flex; align-items:center; gap:14px; margin:-10px 0 8px;
  font-size:var(--kegl-metka); color:var(--muted); }
/* Подсказка идёт мелким: «Загрузить файл» стоял основным кеглем и спорил с
   самим полем, хотя это приписка к нему (замечание владельца 10.09.2026). */
.fayl { color:var(--accent); font-size:var(--kegl-metka); cursor:pointer; }
/* «Очистить» — тем же приёмом, что в приложении: слово, а не крестик,
   акцентом, без рамки и фона. Стоит у правого края строки подсказки. */
.ochistit { margin-left:auto; padding:0; border:0; background:none;
  color:var(--accent); font:inherit; font-size:var(--kegl-metka);
  cursor:pointer; -webkit-tap-highlight-color:transparent; }
/* ИСТОРИЯ СВОИХ ЗАМЕРОВ. Стоит под формой, пока замера на экране нет: до неё
   там было белое поле. Ничего не собирает — показывает уже посчитанное и
   открывает его из склада, без обхода площадок. */
.istor { margin-top:var(--shag-blizko); }
.istor__r { display:block; width:100%; padding:12px 0; border:0;
  border-top:1px solid var(--line); background:none; color:inherit; font:inherit;
  text-align:left; cursor:pointer; }
.istor__r:first-child { border-top:0; padding-top:4px; }
.istor__r:hover .istor__n { text-decoration:underline; }
.istor__verh { display:flex; align-items:baseline; gap:12px; }
.istor__n { color:var(--accent); font-variant-numeric:tabular-nums; }
.istor__c { margin-left:auto; font-weight:500; font-variant-numeric:tabular-nums;
  white-space:nowrap; }
.istor__d { display:block; margin-top:2px; color:var(--muted); font-size:var(--kegl-tekst); }
.istor__k { display:block; color:var(--dim); font-size:var(--kegl-metka); }
/* Очередь: номера считаются по одному, канал у нас один. */
.ochered { margin-top:var(--shag-razdel); }
.ochered__hod { color:var(--muted); font-size:var(--kegl-tekst);
  font-variant-numeric:tabular-nums; }
.kaknomer { padding:0; border:0; background:none; color:var(--accent);
  font:inherit; font-variant-numeric:tabular-nums; cursor:pointer; }
.kaknomer:hover { text-decoration:underline; }
/* ПАНЕЛЬ АНАЛИЗА. Прежняя линия с точками показывала только края, и по ней
   нельзя было сориентироваться (владелец 06.09.2026). На её месте свод,
   отбор списками, источники, график и таблица — устройство согласовано на
   макете 07.09.2026. */

/* ГОРОДА КАРТОЧКАМИ. Ряд из «Все» и городов: нажал — пересчиталось всё,
   и шкала, и счёт, и таблица. Отборы складываются с остальными.
   Числа те же, что были в прежней карточке. */
.sect { margin-top:0; color:var(--dim); font-size:var(--kegl-metka); font-weight:500;
  letter-spacing:.05em; text-transform:uppercase; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--shag-blizko); }
/* Плитка вдвое мельче прежней: была 36 в высоту при кегле 15 — пузырь вдвое
   выше своего текста (замечание владельца 10.09.2026, выбор по макету —
   вариант Б). Отбор не должен спорить по весу со шкалой. */
.chip { border-radius:var(--skruglenie); display:inline-flex; align-items:baseline;
  gap:6px; padding:3px 8px; border:1px solid var(--line2); background:#fff;
  color:var(--text); font:inherit; font-size:var(--kegl-tekst); cursor:pointer; }
.chip span { color:var(--dim); font-size:var(--kegl-metka); font-variant-numeric:tabular-nums; }
.chip.on { border-color:var(--accent); background:var(--accent); color:#fff; }
.chip.on span { color:rgba(255,255,255,.72); }
/* ШКАЛА — ГУСТОТА ПРЕДЛОЖЕНИЙ ПО ЦЕНЕ.
   Форма взята у Дрома: вкладка «Цена» на его же странице поиска — столбики
   густотой. Числа замерены там: полоса 1204 × 66 в колонке 1224, столбик
   rgb(40,139,240).

   У ШКАЛЫ СВОЁ ОКНО, И ОНО НЕ ДЫШИТ. Высота была по самому высокому столбику,
   и при каждом переключении отбора картинка прыгала — то сжималась, то росла.
   Владелец 10.09.2026: «она не должна прыгать при переключении, у неё должно
   быть своё окно». Окно постоянное, столбики растут внутри него.

   ВОЗДУХ ВОКРУГ — РАЗДЕЛЬНЫЙ, А НЕ БЛОЧНЫЙ. Стояло 24 сверху и снизу, столько
   же, сколько между строками текста, и картинка выглядела зажатой. Картинке
   нужно больше, чем тексту. */
.shkala { position:relative; height:80px; margin-top:var(--shag-razdel);
  display:flex; align-items:flex-end; gap:1px;
  border-bottom:1px solid var(--line2); }
.shkala__st { flex:1 1 0; background:var(--accent-blednyy); border-radius:1px 1px 0 0; }
.shkala__st--telo { background:var(--accent); }
.shkala__metka { position:absolute; top:-2px; bottom:0; width:1px;
  background:var(--text); }
.konchiki { display:flex; justify-content:space-between; align-items:baseline;
  margin-top:var(--shag-blizko); margin-bottom:var(--shag-razdel);
  color:var(--dim); font-size:var(--kegl-tekst); }
.konchiki--odin { justify-content:center; }
.konchiki__mid { color:var(--text); font-size:var(--kegl-krupno); }
/* Хвост городов за одной плиткой: 22 города из 30 — по одному предложению,
   и стеной они занимали четыре ряда (замечание владельца 10.09.2026). */
.chip--eshchyo { border-style:dashed; color:var(--muted); }
/* Отбор списками, как на Дроме: кнопками он занимал полэкрана. */
/* Отбор строкой: имя оси серым, значения — пунктиром, выбранное синим.
   Мера снята у Дрома: 14 пикселей, без рамки и полей. */
/* ОТБОР ЧИТАЕМЫЙ, А НЕ ПОЛУПРОЗРАЧНЫЙ.
   Вся строка стояла серым, значения — пунктиром, и на телефоне это
   разваливалось в кашу: «производитель, источник — хуй пойми где, такое нигде
   не видел» (владелец 11.09.2026).
   Подпись теперь мелкая прописная, как у «Где продают», значения — обычным
   текстом, выбранное синим. Пунктира нет. */
.par { display:flex; flex-direction:column; gap:16px;
  margin-top:var(--shag-blok); font-size:var(--kegl-tekst); color:var(--text); }
.par b { display:block; margin-bottom:6px; font-weight:500; color:var(--dim);
  font-size:var(--kegl-metka); letter-spacing:.06em; text-transform:uppercase; }
.par a { color:var(--text); text-decoration:none; }
.par a:hover { color:var(--accent); }
.par a.on { color:var(--accent); }
.par i { font-style:normal; color:var(--dim); font-size:var(--kegl-metka); }
.par .net { color:var(--dim); }
.ryn { margin-top:var(--shag-blok); color:var(--muted); font-size:var(--kegl-tekst); }
/* Источники: откуда цифры и какую часть рынка мы прочли. Строка ведёт на
   площадку — объявления смотрят там, их всегда больше, чем мы прочли. */
.zag2 { margin:var(--shag-razdel) 0 0; font-size:var(--kegl-krupno); font-weight:500; }
.isto { margin-top:var(--shag-blizko); border:1px solid var(--line); border-radius:var(--skruglenie);
  overflow:hidden; }
/* Числа здесь одного рода — сколько прочли, сколько взяли, сколько всего на
   площадке. Значит читаются столбцами, а не строкой сплошного текста (выбор
   владельца по макету 10.09.2026). Имена столбцов он ещё будет править. */
.isto__t { width:100%; border-collapse:collapse; }
.isto__t th { padding:10px 16px; text-align:left; font-weight:400;
  color:var(--muted); font-size:var(--kegl-metka); border-bottom:1px solid var(--line); }
.isto__t td { padding:12px 16px; border-top:1px solid var(--line); }
.isto__t th.ch, .isto__t td.ch { text-align:right; font-variant-numeric:tabular-nums; }
.isto__t td.im { font-weight:500; }
.isto__t td.ss { text-align:right; white-space:nowrap; }
.isto__t td.ss a { color:var(--accent); text-decoration:none; }
.isto__t td.ss a:hover { text-decoration:underline; }
.isto__r { display:block; padding:12px 16px; border-top:1px solid var(--line); }
.isto__staryy, .isto__snoska { display:block; color:var(--muted); font-size:var(--kegl-tekst); }
/* Жалоба замера — красным: это не примечание, а предупреждение, что выдача
   неполная и числам выше верить нельзя (решение владельца 10.09.2026). */
.isto__zhaloba { display:block; color:#c0392b; font-size:var(--kegl-tekst);
  font-weight:500; }
/* Цена по времени. Библиотека лежит в public/vendor, своими руками не чертим. */

/* Таблица — то, чем проверяется цифра сверху. Анализ читается столбцами. */
.tabl-verh { display:flex; align-items:center; gap:12px;
  margin:var(--shag-razdel) 0 var(--shag-blizko); }
.tabl-verh h2 { margin:0; font-size:var(--kegl-krupno); font-weight:500; }
.skachat { margin-left:auto; height:36px; padding:0 14px; border:1px solid var(--line2);
  border-radius:var(--skruglenie); background:#fff; font:inherit; font-size:var(--kegl-tekst); }
.obertka { overflow-x:auto; border:1px solid var(--line); border-radius:var(--skruglenie); }
.obertka table { width:100%; border-collapse:collapse; font-size:var(--kegl-tekst); }
.obertka th { padding:10px 12px; background:var(--soft); border-bottom:1px solid var(--line);
  color:var(--muted); font-weight:400; text-align:left; white-space:nowrap; cursor:pointer; }
.obertka th:hover { color:var(--text); }
.obertka td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.obertka tr:last-child td { border-bottom:0; }
.obertka .c { font-variant-numeric:tabular-nums; white-space:nowrap; }
.obertka .cena { font-weight:500; }
.metka { display:inline-block; padding:2px 8px; border-radius:var(--skruglenie);
  font-size:var(--kegl-metka); white-space:nowrap; }
.obertka .ss { color:var(--accent); }
.obertka .zag { display:block; max-width:320px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.obertka .pusto { padding:24px; color:var(--muted); }
/* `min-width:0` — без него поле не сжимается ниже своей природной ширины и
   выталкивает кнопку за край окна (замечание владельца 30.08.2026). */
.send input { border-radius:var(--skruglenie); flex:1 1 0; min-width:0; height:34px; padding:0 10px; border:1px solid var(--line2);
  font-size:var(--kegl-tekst); outline:0; }
/* ══ ТЕЛЕФОН ══════════════════════════════════════════════════════════════
   Числа замерены на Дроме, версия для Safari, экран 390 (08.09.2026), через
   getComputedStyle его же страницы запчастей — не на глаз:
     поле ввода 38, кегль 16, скругление 4, рамка 1;
     кнопка 38, во всю ширину;
     заголовок 18, вес обычный;
     текст 14; поля по краям 22.
   До этого сюда приезжала компьютерная вёрстка, сжатая до телефона: ширина
   страницы выходила 701 при экране 390, кнопка «Проверить» вылезала за край,
   а шапка разваливалась. */
/* ── ГЛАВНАЯ ──────────────────────────────────────────────────────────────
   Визитка. Своих кеглей, красок и скруглений здесь нет: четыре ступени
   кегля, три ступени отступа и один синий — те же, что на всём сайте.
   Карточки — та же `.panel`, что под строкой поиска: заводить второй вид
   мягкого короба нельзя, иначе страницы читаются разными руками. */
/* Заголовок главной насыщеннее обычного, но того же кегля: старшинство на
   сайте держит насыщенность, а не размер (docs/POCHERK.md). Строка описания
   обрезана по читаемой ширине — во всю страницу она уходит за 150 знаков. */
[data-screen="home"] h1 { max-width:26ch; font-weight:500; }
[data-screen="home"] .lead { max-width:70ch; }

.glav__zov { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:var(--shag-razdel); }
/* Действие стало ссылкой в телеграм, а не кнопкой экрана: высота у ссылки
   держится только на inline-flex. */
.glav__da { display:inline-flex; align-items:center; height:44px; padding:0 28px;
  border:1px solid var(--accent); border-radius:var(--skruglenie);
  background:var(--accent); color:#fff; font-size:var(--kegl-tekst);
  font-weight:500; }
.glav__da:hover { background:#1b7bdc; border-color:#1b7bdc; color:#fff;
  text-decoration:none; }
/* Подпись рядом с кнопкой, а не второй кнопкой: второе действие на первом
   экране спорит с первым (правило разметки — одно главное действие). */
.glav__pod { align-self:center; max-width:40ch; color:var(--muted); }

.glav__plitki { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--shag-blok); }
.glav__plitki .panel__body { gap:var(--shag-blizko); }
.glav__imya { font-weight:500; }
.glav__plitki p { margin:0; color:var(--muted); }

/* Числа: крупная ступень кегля и подпись под ней. Разделителей между ними
   нет — три колонки и так читаются тремя. */
.glav__chisla { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--shag-blok);
  margin-top:var(--shag-razdel); padding-top:var(--shag-blok);
  border-top:1px solid var(--line); }
.glav__chisla b { display:block; font-size:var(--kegl-zagolovok); font-weight:400;
  line-height:1.2; letter-spacing:-.015em; }
.glav__chisla span { color:var(--muted); }

/* Заголовок раздела внутри страницы. Второй по старшинству после h1, значит
   крупная ступень; старшинство держит насыщенность, а не размер. */
.glav__zag { margin:var(--shag-razdel) 0 var(--shag-blok);
  font-size:var(--kegl-krupno); font-weight:500; }

.glav__shagi { max-width:70ch; margin:0; padding-left:22px; color:var(--muted); }
.glav__shagi li { margin-bottom:var(--shag-blizko); }
.glav__shagi li b { color:var(--text); font-weight:500; }

.glav__nizok { max-width:70ch; margin-top:var(--shag-razdel);
  margin-bottom:var(--shag-razdel); }
.glav__nizok h2 { margin:0 0 var(--shag-blizko); font-size:var(--kegl-krupno);
  font-weight:500; }
.glav__nizok p { margin:0; color:var(--muted); }
.glav__nizok .glav__zov { margin:var(--shag-blizko) 0 0; }

/* ── ЧАТ ──────────────────────────────────────────────────────────────────
   Окошко в углу. Вернулось 11.09.2026 вместе с дверью: снесено было не за
   негодность, а заодно с каталогом.

   Кнопка чата чёрная, той же краской, что верхняя панель. Синим она спорила
   с «Найти»: синий на сайте значит действие с товаром, а чат — не действие,
   а всегда открытая дверь (владелец 03.09.2026). */
.bubble { border-radius:var(--skruglenie); position:fixed; right:24px; bottom:24px;
  display:flex; align-items:center; height:44px; padding:0 22px; border:0;
  background:var(--dark); color:#fff; font-size:var(--kegl-tekst); font-weight:500;
  box-shadow:0 10px 28px rgba(27,30,36,.28); }
/* Сколько ответов человек ещё не видел. Без этого закрытое окошко молчит:
   менеджер ответил, а на кнопке ничего (замечание владельца 30.08.2026). */
.bubble__n { margin-left:8px; min-width:20px; height:20px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--skruglenie); background:#fff; color:var(--dark);
  font-size:var(--kegl-metka); font-weight:500; }

.chat { border-radius:var(--skruglenie); position:fixed; right:24px; bottom:24px;
  display:none; flex-direction:column;
  width:min(360px, calc(100vw - 48px)); height:min(480px, calc(100vh - 48px));
  border:1px solid var(--line2); background:#fff;
  box-shadow:0 18px 48px rgba(19,27,43,.20); }
.chat.on { display:flex; }
.chat header { display:flex; align-items:center; height:46px; padding:0 14px;
  border-bottom:1px solid var(--line); font-size:var(--kegl-tekst); font-weight:500; }
.chat header button { margin-left:auto; border:0; background:transparent;
  color:var(--muted); font-size:var(--kegl-krupno); }
.roll { flex:1; overflow:auto; padding:14px; display:grid; gap:10px; align-content:start; }
/* `pre-wrap` — сообщения бывают списком в несколько строк. Без него переносы
   съедаются и список идёт сплошняком. */
.msg { border-radius:var(--skruglenie); max-width:82%; padding:8px 11px;
  font-size:var(--kegl-tekst); white-space:pre-wrap; }
.msg.me { background:var(--accent-soft); justify-self:end; }
/* Ответ менеджера — серым, слева: две стороны разговора должны различаться с
   одного взгляда. */
.msg:not(.me) { background:var(--soft); justify-self:start; }
.msg--beda { background:#fdecec; color:#8a1c1c; justify-self:start; }
.send { display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--line); }
/* `min-width:0` — без него поле не сжимается ниже своей природной ширины и
   выталкивает кнопку за край окна (замечание владельца 30.08.2026). */
.send input { border-radius:var(--skruglenie); flex:1 1 0; min-width:0; height:34px;
  padding:0 10px; border:1px solid var(--line2); font-size:var(--kegl-tekst); outline:0; }
.send button { border-radius:var(--skruglenie); flex:0 0 auto; height:34px; padding:0 14px;
  border:1px solid var(--accent); background:var(--accent); color:#fff;
  font-size:var(--kegl-tekst); font-weight:500; }

/* ── КАРТОЧКА ДЕТАЛИ ──────────────────────────────────────────────────────
   Страница одного номера. Слева схема крупно, справа имя, короб с ценой и
   характеристики.

   Устройство выбрано владельцем 29.08.2026 из четырёх, показанных рядом на
   одних данных. До этого я дважды собирал карточку сам — столбцом и строкой, —
   и оба раза мимо. Вывод: устройство экрана выбирает владелец, а не я.

   Уехала 10.09.2026 вместе с каталогом, вернулась 12.09.2026 под страницы
   номеров — теми же правилами, без переделок. Ушли из неё только «В корзину»
   и «Добавить в избранное»: ни корзины, ни избранного на сайте нет.

   Место под карточку занято сразу и не пляшет: у одной детали меток пять, у
   другой сорок. */
.tovar { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px;
  align-items:start; margin-top:16px; min-height:340px; }

/* БЕЗ СХЕМЫ — БЕЗ ПУСТОГО МЕСТА.
   Правило «место под схему занято всегда» было верным, пока схемы были хоть у
   кого-то: карточка не должна прыгать от номера к номеру. Сейчас схем нет ни у
   одной детали — файлы удалены 10.09.2026, а в базе остались ссылки на чужой
   сервер, которые брать нельзя. Пустой серый прямоугольник в пол-страницы —
   это не верность карточке, а дыра.
   Поэтому на страницах номеров схемы нет вовсе, а обе колонки заняты делом:
   сведения слева, короб с ценой справа. Так стоит в любом магазине запчастей.
   Появятся свои снимки — вернётся и левая колонка со схемой. */
.tovar--bez { min-height:0; }
.tovar--bez .tovar__box { margin-top:0; }

/* Схема есть не у каждого номера, но место у неё одно и то же: карточка не
   перестраивается от того, нашёлся чертёж или нет. */
.tovar__pic { display:flex; align-items:center; justify-content:center;
  height:300px; padding:14px; border:1px solid var(--line);
  border-radius:var(--skruglenie); background:#fff; }
.tovar__pic img { max-width:100%; max-height:100%; width:auto; height:auto; }
.tovar__pic span { color:var(--dim); font-size:var(--kegl-tekst); }

.tovar__name { margin:0; font-size:var(--kegl-krupno); font-weight:500;
  letter-spacing:0; line-height:1.25; }
.tovar__num { margin-top:3px; color:var(--muted); font-size:var(--kegl-tekst); }

.tovar__box { margin-top:16px; padding:18px 20px; border:1px solid var(--line);
  border-radius:var(--skruglenie); }
.tovar__price { font-size:var(--kegl-zagolovok); font-weight:500;
  letter-spacing:-.015em; line-height:1.1; }
.tovar__was { margin-top:5px; color:var(--muted); font-size:var(--kegl-tekst); }
.tovar__go { width:100%; height:40px; margin-top:16px;
  border:1px solid var(--accent); border-radius:var(--skruglenie);
  background:var(--accent); color:#fff; font-size:var(--kegl-tekst); font-weight:500; }

/* ХАРАКТЕРИСТИКИ. Строка «подпись — значение»: подпись слева в 42% ширины
   бледная, значение своей колонкой. Линий между строками нет — их разделяет
   воздух: линия делит перечень на куски, а это один список про одну деталь
   (решение владельца 19.08.2026). */
.tovar__rows { margin-top:26px; }
.tovar__rows-title { margin-bottom:14px; font-size:var(--kegl-tekst); }
.tovar__row { display:grid; grid-template-columns:42% 1fr; align-items:baseline;
  gap:16px; padding:4px 0; color:var(--muted); font-size:var(--kegl-tekst); }
.tovar__row em { color:var(--text); font-style:normal; }
.tovar__code { font-variant-numeric:tabular-nums; }

/* Применимость метками, а не строками таблицы: кузовов бывает по сорок, и
   таблица из них выходит длиннее самой карточки. */
.tovar__tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.tovar__tag { padding:5px 10px; border:1px solid var(--line2);
  border-radius:var(--skruglenie); font-size:var(--kegl-tekst); }
.tovar__tag b { font-weight:400; color:var(--muted); }
/* Оговорка про цену и наличие — самая мелкая строка карточки. */
.tovar__fine { margin-top:22px; color:var(--dim); font-size:var(--kegl-metka);
  line-height:1.4; }

/* Хлебная крошка: дорога домой со страницы, на которую пришли из поиска. */
.krosh { margin-top:var(--shag-blok); color:var(--muted); font-size:var(--kegl-tekst); }

@media (max-width: 720px) {
  .hold { padding:0 22px; }
  /* Разделы за кнопкой: пять входов в строку не встают. */
  /* «Проценка» слева работает подписью экрана, бургер ушёл вправо, «Войти»
     убран совсем (владелец 11.09.2026). */
  .deck .hold { height:48px; gap:0; }
  .deck [data-go] { display:none; }
  /* Подпись держится своего текста, а не растягивается во всю строку —
     иначе бургер уезжает к её краю, а не к краю колонки. */
  /* Подпись первой слева, бургер последним справа: в разметке бургер стоит
     раньше, поэтому порядок задаётся здесь. */
  .deck [data-go].on { display:block; order:0; flex:0 0 auto; padding:0;
    background:none; }
  .deck.raskryt [data-go] { display:block; }
  .deck.raskryt .hold { flex-wrap:wrap; height:auto; padding-bottom:8px; }
  .deck.raskryt [data-go] { flex:0 0 100%; height:44px; padding:0;
    text-align:left; border-top:1px solid rgba(255,255,255,.12); border-radius:0; }
  /* Бургер у левого края, вход у правого. Пока в шапке стоял знак, бургеру
     хватало `margin-left:auto`; знак убран 10.09.2026, и без этой правки
     бургер уезжал в середину. */
  /* Бургер стоит по правому краю колонки, а не за ним: отрицательное поле
     выносило его на восемь точек наружу, и шапка выглядела кривой. */
  .burger { display:grid; place-items:center; order:1; width:34px; height:34px;
    margin-left:auto; margin-right:0; border:0; background:none; }
    .burger span { display:block; width:18px; height:2px; background:#fff; position:relative; }
  .burger span::before, .burger span::after { content:""; position:absolute; left:0;
    width:18px; height:2px; background:#fff; }
  .burger span::before { top:-5px; }
  .burger span::after { top:5px; }
  .desk .hold { height:44px; }
  /* На телефоне раздел отделяется меньшим шагом: экран короче, и 48
     точек между разделами съедали бы его впустую. */
  :root { --shag-razdel:32px; }
  h1 { font-size:var(--kegl-krupno); font-weight:500; }
  .lead { font-size:var(--kegl-tekst); }
  /* Поле, марка и кнопка столбиком, во всю ширину. */
  .panel { border:0; background:none; }
  .panel__body { padding:16px 0 0; gap:10px; }
  /* Порядок на телефоне: номер → чем наполнить → марка → действие.
     `display:contents` растворяет .line1, иначе кнопка остаётся её ребёнком
     и порядком в панели не управляется. */
  .panel__body { display:flex; flex-direction:column; }
  .line1 { display:contents; }
  /* Марка переехала внутрь строки ввода, а порядка на телефоне ей не задали —
     и она вставала выше номера (10.09.2026). Её место третье: номер, чем
     наполнить, марка, действие. */
  #zMarka { order:3; }
  #zMarka .pick__field { width:100%; height:38px; font-size:16px; }
  .line1 textarea { order:1; max-width:none; min-height:38px; padding:8px 12px;
    font-size:16px; }
  .podskaz { order:2; margin:-8px 0 8px; }
  .line2 { order:3; }
  /* Шестнадцать здесь не от почерка, а от айфона: при меньшем кегле Safari
     сам увеличивает страницу, когда встаёшь в поле. */
  .line1 > button { order:4; width:100%; height:38px; padding:0; font-size:16px; }
  .line2 .pick, .line2 .pick__field { width:100%; }
  .line2 input { width:100%; height:38px; font-size:16px; }
  /* Свод: четыре плитки в ряд ломают цифру пополам вместе с рублём. */

  /* Отборы по своей ширине, а не растянутые: у Дрома такой список 150 при 390. */
  /* Плитки на телефоне мельче: их много и они занимали четыре ряда. */
  .chip { padding:2px 7px; font-size:13px; }
  .chips { gap:6px; }
  .zamer__num { font-size:var(--kegl-krupno); }
  /* Четыре ячейки в ряд на 375 не помещаются — два на два.
     Порядок владельца 11.09.2026: сверху цены по краям — дешёвое и дорогое,
     снизу рыночная и счёт. В разметке они идут иначе, поэтому переставляем
     здесь; рамки считаются по видимым рядам, а не по порядку в разметке. */
  .itog { flex-wrap:wrap; }
  .itog > div { flex:1 1 50%; border-left:0; border-top:1px solid var(--line); }
  .itog > div:nth-child(1) { order:1; }   /* Дешёвое */
  .itog > div:nth-child(3) { order:2; }   /* Дорогое */
  .itog > div:nth-child(2) { order:3; }   /* Рыночная */
  .itog > div:nth-child(4) { order:4; }   /* Предложений */
  .itog > div:nth-child(1), .itog > div:nth-child(3) { border-top:0; }
  .itog > div:nth-child(3), .itog > div:nth-child(4) {
    border-left:1px solid var(--line); }
  .zag2 { font-size:var(--kegl-krupno); }
  /* Источники в столбик: в строку они не помещаются. */
  .isto { border:0; }
  .isto__r { display:block; padding:11px 0; border-top:1px solid var(--line); }
  /* На телефоне таблица источников листается вбок внутри своей рамки. */
  .isto { overflow-x:auto; }
  .isto__t { min-width:560px; }
  .isto__t th, .isto__t td { padding-left:0; padding-right:14px; }
  /* Таблица листается вбок внутри своей рамки — страница при этом стоит. */
  .obertka { margin:10px -22px 0; padding:0 22px; border:0; border-radius:0; }
  .obertka table { font-size:var(--kegl-metka); }
  .obertka th { padding:8px 14px 8px 0; font-size:var(--kegl-metka); }
  .obertka td { padding:10px 14px 10px 0; white-space:nowrap; }
  .obertka .zag { max-width:200px; }
  /* Главная в один столбец: три плитки в ряд на 375 не помещаются, а кнопки
     по своей ширине на телефоне выглядят потерянными. */
  .glav__plitki, .glav__chisla { grid-template-columns:1fr; gap:var(--shag-blok); }
  .glav__da { flex:1 1 100%; justify-content:center; text-align:center; }
  /* Подпись под кнопку, а не рядом: в строку на 375 они не встают. */
  .glav__pod { align-self:flex-start; max-width:none; }
  .glav__chisla b { font-size:var(--kegl-krupno); font-weight:500; }
  /* Чат на телефоне во весь экран: окошко 360 в углу при ширине 375 — это и
     есть весь экран, только с кривой щелью по краям. */
  .chat { right:0; bottom:0; width:100vw; height:100dvh; border:0;
    border-radius:0; }
  .bubble { right:16px; bottom:16px; }
  /* Карточка на телефоне в один столбец: схема 340 сбоку туда не встаёт. */
  .tovar { grid-template-columns:1fr; gap:20px; min-height:0; }
  /* Цена первой: ради неё человек и пришёл, характеристики он долистает. */
  .tovar--bez > :last-child { order:-1; }
  .tovar__pic { height:220px; }
  .tovar__row { grid-template-columns:1fr; gap:0; padding:6px 0; }
}