/* Разведка проката — каркас раздела и экран разведки.
 *
 * Отдельно от `screens.css` намеренно: раздел лежит своей папкой и снимается
 * целиком, а кусок в общем файле пришлось бы вычищать руками и однажды
 * не вычистили бы.
 *
 * Файлов у раздела три, и делятся они по тому, **когда их читают**:
 * здесь каркас и разведка — то, что видно всегда; `carsearch-panel.css` —
 * выезжающая панель точки и модели; `carsearch-marks.css` — словарь знаков
 * и плашек машины. Полутора тысячами строк одного файла каждая правка
 * стоила всего файла при чтении.
 *
 * Своего вида раздел не заводит. Каркас — `workspace is-split`, панель слева,
 * карта во всю правую сторону, панели поверх неё: ровно то, что уже работает
 * на экране города. Здесь только то, чего в общих стилях нет.
 *
 * Подключается в `index.html` **до** `narrow.css`: тот отменяет `display`
 * у корней и обязан остаться последним, а медиазапрос специфичности
 * не добавляет.
 */

/* Цена в строке точки не переносится: «79 ¥», разорванное на две строки,
   читается как две величины. */
.carsearch-row .mono {
  white-space: nowrap;
}

/* Строка точки в панели. Та же рамка и тот же наведённый цвет, что у карточки
   места, — раздел не должен выглядеть чужим. */
.carsearch-root .carsearch-row {
  gap: var(--s5);
  padding: var(--s5) var(--s5) var(--s5) var(--s4);
  border-radius: var(--r3);
}

.carsearch-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border: 1px solid transparent;
  border-radius: var(--r3);
  cursor: pointer;
  min-width: 0;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.carsearch-row:hover {
  background: var(--field);
}
/* Открытая строка отзывается: панель и список говорят об одной точке,
   и без отклика неясно, чья она. */
.carsearch-row.is-open {
  border-color: var(--accent-border);
  background: var(--accent-tint);
  box-shadow: inset 2px 0 0 var(--accent);
}
/* Подсвеченная, но не открытая — та же рамка без полосы слева: полоса
   значит «панель этой точки открыта», а панели ещё нет. */
.carsearch-row.is-lit {
  border-color: var(--accent-border);
  background: var(--accent-tint);
}

/* Строка ввода города. Отдельно от `.field`: тот — обёртка с подписью
   в столбец, а здесь под полем ещё висит подсказка. */
.carsearch-input {
  width: 100%;
  padding: var(--s3) var(--s5);
  border: 1px solid var(--edge);
  border-radius: var(--r2);
  background: var(--field);
  font: inherit;
  font-size: var(--t-15);
  min-width: 0;
  transition: border-color var(--dur-fast) var(--ease);
}
.carsearch-input:hover,
.carsearch-input:focus-visible {
  border-color: var(--accent-border);
}

/* Подсказка городов — поверх всего, что ниже: она перекрывает даты и марку,
   и это правильно, пока её не закрыли. */
.carsearch-hint {
  position: absolute;
  z-index: 5;
  top: calc(100% + var(--s2));
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: var(--s2);
  border: 1px solid var(--edge-card);
  border-radius: var(--r3);
  background: var(--card);
  box-shadow: var(--sh-panel);
}
.carsearch-hint-row {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s4);
  border: 0;
  border-radius: var(--r2);
  background: transparent;
  font: inherit;
  font-size: var(--t-15);
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.carsearch-hint-row:hover,
.carsearch-hint-row:focus-visible {
  background: var(--accent-tint);
}

/* Найденная машина в строке точки: ради неё поиск и затевался, поэтому
   выделена цветом, а не просто третьей серой строкой. */
/* Строка «точка + машина». Три голоса, а не один: имя модели — то, что искали,
   цена — то, ради чего смотрят, вариация — то, чем эта строка отличается
   от соседней. Пока вся строка была акцентной, четыре Model Y подряд читались
   синей стеной, в которой не найти ни цену, ни год. */
.carsearch-hit {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  font-size: var(--t-13);
  color: var(--ink-3);
  min-width: 0;
}
.carsearch-hit b {
  font-weight: 500;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carsearch-hit i {
  font-style: normal;
  color: var(--ink-4);
  white-space: nowrap;
}
.carsearch-hit.is-more {
  color: var(--ink-4);
}
.carsearch-hit em {
  font-family: var(--mono);
  font-style: normal;
  font-size: var(--t-12);
  color: var(--ink-2);
  margin-left: auto;
  white-space: nowrap;
}

/* Отказ опроса. Не тост: он исчезает, а причина нужна, пока её не устранили. */
.carsearch-bad {
  padding: var(--s3) var(--s4);
  border-radius: var(--r2);
  background: var(--accent-tint);
  color: var(--ink-2);
  font-size: var(--t-13);
}

/* Оговорка про три машины. Мелко и приглушённо, но на месте: неполный ответ,
   выданный за полный, хуже отсутствующего. */
.carsearch-note {
  font-size: var(--t-12);
  line-height: 1.45;
  color: var(--ink-4);
}

/* Цена — единственное акцентное число в разделе: по ней ведут глазами
   вдоль списка, и она обязана находиться без чтения строки. */
.mono.is-accent {
  color: var(--accent);
  font-weight: 500;
}
.chip.is-accent {
  border-color: var(--accent-border);
  color: var(--accent);
}
.chip.is-accent:disabled {
  border-color: var(--edge);
  color: var(--ink-4);
  cursor: default;
}

/* --- Балка вопроса --------------------------------------------------------
   Шапка панели — это вопрос, список под ней — ответ. Пять полей столбиком
   занимали половину высоты балки, и ответ начинался ниже сгиба; поэтому
   поля идут парами, а заголовок, источник и число городов — одной строкой.

   Действия обвязки уехали в подвал: обновление кук и обход всех точек
   стояли между вопросом и ответом, то есть в самом дорогом месте экрана,
   хотя первое делается раз в час, а второе раз в заход. */

/* Класс машины — свой, а не прокатчика: он выводится из полей модели (кузов,
   мест, двигатель) и потому одинаков во всех точках. Рейка прокатчика лежит
   рядом справочно — у неё свои названия и свои цены «от».

   Живёт в балке, а не в окне точки: «покажи внедорожники рядом» — вопрос ко
   всему экрану, а вкладка внутри точки на него не отвечает. */
.side-head .carsearch-tabs {
  gap: var(--s1) var(--s2);
}

/* Строка ответа: сколько точек в кадре — и рядом выход из фильтра.
   Прежде выходом была чёрная кнопка во всю ширину, самая громкая на экране;
   она отменяет, а не отвечает, и стоять первой по силе ей не за что. */
.carsearch-cover {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  min-width: 0;
}
.carsearch-clear {
  margin-left: auto;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: var(--t-12);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-4);
  cursor: pointer;
  white-space: nowrap;
}
.carsearch-clear:hover:not(:disabled) {
  color: var(--accent);
}
.carsearch-clear:disabled {
  color: var(--faint);
  cursor: default;
}


.carsearch-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  flex: none;
}
.carsearch-title {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  min-width: 0;
}
.carsearch-title .page-title {
  flex: none;
}
/* Имя прокатчика его же письмом: рядом с русским заголовком оно и отвечает
   на вопрос «чей это парк», и не притворяется частью названия экрана. */
.carsearch-source {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-13);
  color: var(--ink-4);
  padding: 1px var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
/* Выбор прокатчика — сегмент, а не вкладки и не пара кнопок.
   Смена прокатчика меняет **весь набор данных**: свою базу, свои филиалы,
   свой вход. Сегмент читается как «включён один из двух» и этим не врёт;
   вкладки читались бы как разделы одного целого. Имя видно у обоих, потому
   что их всего два и оба важны: кнопки кук и сбора действуют на выбранного. */
.carsearch-firms {
  display: flex;
  gap: var(--hair);
  padding: var(--hair);
  background: var(--fill);
  border-radius: var(--r-pill);
}
button.carsearch-source {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  /* Поля симметричные: в кнопке остался **один знак** без имени
     (`6f84fc4`, «в переключателе — только знак»), а поля были посчитаны
     под пару «знак + имя» — 3 px слева и 8 справа. Знак 20×20 в кнопке
     33×28 стоял прижатым влево. */
  padding: var(--hair);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  font: inherit;
  font-size: var(--t-13);
  color: var(--ink-3);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
button.carsearch-source:hover {
  color: var(--ink-2);
}
button.carsearch-source:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
button.carsearch-source.is-on {
  background: var(--card);
  border-color: var(--accent-border);
  color: var(--ink);
}
/* Знак блёкнет у невыбранного: цветное пятно рядом с серым именем читается
   как «включено», и два ярких знака спорят за то, какой из них включён. */
button.carsearch-source:not(.is-on) .carsearch-badge {
  filter: grayscale(1);
  opacity: 0.55;
}
.carsearch-badge {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  object-fit: contain;
}
.carsearch-badge.is-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--faint);
  /* Белый, а не `--card`: буква стоит на **фирменном цвете прокатчика**
     (`tint` приходит строкой стиля), а не на поверхности темы. По теме она
     стала бы тёмной на оранжевом. `--faint` — запасной фон для прокатчика,
     цвет которого ещё не назвали. */
  color: #fff;
  font-size: var(--t-12);
  line-height: 1;
}

/* --- Каркас раздела --------------------------------------------------------
 *
 * Колонка: полоса раздела сверху, экран под ней. Двухколоночную сетку заводит
 * сам экран — у разведки колонок две, у точки и модели три, и общего каркаса
 * у них нет. */
.carsearch-root {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
}
/* Панель разведки **уже общей**: 384 px против 452. Число из макета, и оно
   не косметика — в строке точки лежат имя, свежесть и цена, а не форма
   с полями, как на экране города. Своим правилом, а не правкой `is-split`:
   ширина принадлежит этому экрану, а не всем, кто делит экран надвое. */
.carsearch-root {
  /* Ширина панели разведки — одним числом на весь раздел: её знают и сетка,
     и окно выбора машины, и разойтись им нельзя. */
  --scout-side: 384px;
  /* Скругление мелкого знака: плашка машины, вывеска прокатчика. Шкала
     проекта начинается с `--r1` = 6 px, и на плашке высотой 16 px это уже
     заметная дуга — она читается как чип, а знак чипом не является. Свой
     токен, а не число врассыпную: их четыре штуки в трёх файлах раздела. */
  --mark-round: 4px;
}
.carsearch-root .workspace.is-split {
  grid-template-columns: var(--scout-side) minmax(0, 1fr);
  /* Окно выбора машины кладётся поверх карты и отмеряется от левого края
     рабочей области — значит эта область и обязана быть точкой отсчёта. */
  position: relative;
}
/* Шапка панели по макету: она плотнее общей — здесь не форма, а заголовок
   с двумя строками управления. */
.carsearch-root .side-head {
  gap: var(--s5);
  padding: var(--s7) var(--s7) var(--s5);
}
.carsearch-root .side-scroll {
  gap: 2px;
  padding: var(--s3);
}

/* Полоса раздела: кто мы, у кого смотрим и на какой срок. Своим тоном,
   а не бумагой: это лента условий, а не поверхность с содержимым. Она же
   объясняет, почему сегмент прокатчика не в общей шапке — шапка принадлежит
   Tripbox'у, а всё это принадлежит разведке. */
.carsearch-bar {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex: none;
  height: 48px;
  padding: 0 var(--s8);
  background: var(--band);
  border-bottom: 1px solid var(--edge);
}
.carsearch-here {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 var(--s4);
  border: 1px solid var(--accent-border);
  border-radius: var(--r2);
  background: var(--accent-soft);
  font-size: var(--t-13);
  font-weight: 600;
  color: var(--accent-hover);
  flex: none;
}
.carsearch-sep {
  width: 1px;
  height: 18px;
  background: var(--edge-dash);
  flex: none;
}

/* Сроки аренды — показ, но нажимаемый: править их надо в «Бронях», а вот
   выбрать, о какой аренде речь, приходится здесь. Аренд у поездки бывает
   несколько, и поездок тоже. */
.carsearch-rent {
  position: relative;
  min-width: 0;
}
.carsearch-rent-open {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
  height: 28px;
  padding: 0 var(--s3);
  border: 1px solid transparent;
  border-radius: var(--r2);
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.carsearch-rent-open:hover {
  background: var(--card);
  border-color: var(--edge);
}
.carsearch-rent-open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.carsearch-rent-open .mono {
  font-weight: 500;
  white-space: nowrap;
}
.carsearch-caret {
  font-size: var(--t-11);
  color: var(--ink-5);
}
.carsearch-hint-row.is-on {
  background: var(--accent-tint);
}

/* Ссылка «правится там-то». Не кнопка: она уводит, а не делает. */
.carsearch-elsewhere {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: var(--t-12);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}
.carsearch-elsewhere:hover {
  color: var(--accent-hover);
}

/* --- Разведка -------------------------------------------------------------- */

/* Вывеска прокатчика его же письмом: рядом с русским заголовком она отвечает
   «чью базу мы сейчас смотрим» без лишнего слова. */
.carsearch-vendor {
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--ink-3);
  /* Отступ остаётся числом: шкала начинается с 4 px, а вывеске нужны 2 —
     на 4 она перестаёт стоять на базовой линии заголовка рядом. Своего токена
     не завожу: одно число в одном месте дешевле лишнего имени. */
  padding: 2px 7px;
  border-radius: var(--mark-round);
  background: var(--fill);
  flex: none;
}
/* Число точек — рядом с именем экрана и его же базовой линией: это ответ
   на заголовок, а не подпись под ним. */
.carsearch-title .mono {
  font-size: var(--t-15);
  font-weight: 500;
  color: var(--ink-3);
  flex: none;
}
/* Строка ответа: сколько точек знает цену. Мелко и приглушённо — её читают
   краем глаза, а место у списка. */
.carsearch-root .carsearch-cover {
  min-height: 0;
}

.carsearch-tools {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

/* Галочки «со страховкой» и «+ точки локального сайта» — тот же вид, что
   у галочек показа в подборе отеля (`.hs-check`): один вопрос «показывать ли»
   в двух разделах выглядит одинаково. */
.carsearch-checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
}
.carsearch-check {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font: 400 var(--t-13) / 1.2 var(--sans);
  color: var(--ink-2);
  cursor: pointer;
}
.carsearch-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}
.carsearch-check input:focus-visible {
  outline: 2px solid var(--accent-border);
  outline-offset: 2px;
}
.carsearch-check-num {
  font-size: var(--t-12);
  color: var(--ink-4);
}

/* Переключатель счёта цены. Сегментом, а не двумя кнопками: это один вопрос
   с двумя ответами, и второй ответ обязан быть виден рядом с первым. */
.carsearch-toggle {
  display: flex;
  align-items: center;
  border: 1px solid var(--edge);
  border-radius: var(--r2);
  overflow: hidden;
  background: var(--card);
  flex: none;
}
.carsearch-toggle button {
  height: 28px;
  padding: 0 var(--s4);
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: var(--t-13);
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
}
.carsearch-toggle button + button {
  border-left: 1px solid var(--edge);
}
/* Выбранная сторона переключателя — тем же акцентом, что и выбранный чип:
   это один вопрос «что сейчас включено», и отвечать на него двумя цветами
   значит заставлять читать дважды. */
.carsearch-toggle button.is-on {
  background: var(--accent-tint);
  color: var(--accent-hover);
  font-weight: 500;
}
.carsearch-toggle button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Значок вида точки. Цветом **не различается**: цвет в этом проекте означает
   состояние, а вид несут значок и подпись. Здесь он и стоит значком. */
.carsearch-ic.is-air,
.carsearch-ic.is-rail,
.carsearch-ic.is-road {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r2);
  background: var(--fill);
  color: var(--ink-3);
  flex: none;
}

/* Свежесть цены — точкой, и это единственное место, где `--stale` уместен:
   на семи пикселях янтарь подписи не читается вовсе.

   Три состояния, а не два: «не спрашивали» и «спрашивали давно» — разные
   ответы, и путать их значит гонять человека спрашивать заново то, что
   спрошено час назад. */
.carsearch-fresh {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  flex: none;
  box-sizing: border-box;
}
.carsearch-fresh.is-fresh {
  background: var(--accent);
}
.carsearch-fresh.is-old {
  background: var(--stale);
}
.carsearch-fresh.is-none {
  border: 1.5px solid var(--faint);
}

/* «Спросить» прямо в строке: главное действие экрана не должно требовать
   захода внутрь точки. Янтарём, а не акцентом — это поход наружу. */
.carsearch-ask {
  height: 28px;
  padding: 0 var(--s4);
  border: 1px solid var(--warn-edge);
  border-radius: var(--r1);
  background: var(--warn-bg);
  font-family: var(--sans);
  font-size: var(--t-12);
  font-weight: 500;
  color: var(--warn-deep);
  cursor: pointer;
  white-space: nowrap;
  flex: none;
}
.carsearch-ask:hover:not(:disabled) {
  border-color: var(--warn-ink);
}
.carsearch-ask:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Ширина — по содержимому, но не уже 78: под юани «2 628 ¥ · 64 ¥/сут»
   хватало 78, а воны «455 350 ₩ · 20 698 ₩/сут» в них не влезали, и суточная
   рвалась на «20 698 ₩/» и «сут». Имя точки слева обрезается само. */
.carsearch-price-cell {
  align-items: flex-end;
  gap: 2px;
  min-width: 78px;
  flex: none;
  text-align: right;
}
.carsearch-price-cell > * {
  white-space: nowrap;
}

/* Состояние сбора в полосе: точка состояния и слово. Кнопкой, а не подписью —
   она открывает ящик, где это состояние и чинится. */
.carsearch-plug {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  flex: none;
  height: 26px;
  padding: 0 var(--s4);
  border: 1px solid var(--edge);
  border-radius: var(--r2);
  background: var(--card);
  font-family: var(--sans);
  font-size: var(--t-12);
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.carsearch-plug:hover {
  border-color: var(--accent-border);
}
.carsearch-plug.is-live {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-hover);
}

/* Легенда свежести. **Прижата к низу панели**, а не идёт следом за списком:
   читают её один раз, и на коротком списке она иначе висит посреди белого. */
.carsearch-legend {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  flex: none;
  padding: var(--s4) var(--s8);
  border-top: 1px solid var(--line);
}
.carsearch-legend .when {
  margin-right: var(--s3);
}

/* --- Окно выбора машины ----------------------------------------------------
 *
 * Поверх карты и слева, а не по центру: слева лежит список, ради которого
 * выбор и делается, и окно обязано встать рядом с ним, а не поверх. */
.carsearch-picker {
  position: absolute;
  /* Отступ считается **от ширины панели**, и она названа один раз: пока число
     стояло здесь копией, панель сузилась до 384, а окно осталось висеть
     на прежних 452 — то есть съехало и налезло на карту. */
  left: calc(var(--scout-side) + var(--s5));
  top: var(--s5);
  /* Уже, чем было: колонка моделей стала одна (05.09.2026), и прежние 880
     оставляли справа от строки полосу пустоты в треть окна. Ширины хватает
     на снимок, имя целиком и число точек. */
  width: 680px;
  max-width: calc(100% - var(--scout-side) - var(--s8));
  max-height: calc(100% - var(--s8));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: var(--r4);
  background: var(--card);
  box-shadow: var(--sh-panel);
  z-index: 20;
}
.carsearch-picker-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: none;
  padding: var(--s5);
  border-bottom: 1px solid var(--line);
  background: var(--field);
  color: var(--ink-4);
}
.carsearch-picker-head .carsearch-input {
  flex: 1;
  min-width: 0;
}
.carsearch-picker-body {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}
/* Третий шаг — исполнение. Столбец появляется не всегда, поэтому и ширина
   окна условная: с пустым третьим столбцом окно стояло бы шире на треть
   ради места, которое нечем занять. */
.carsearch-picker.is-wide {
  width: 1000px;
}
/* Исполнению — 320: имя, знак мотора с объёмом, привод и места должны
   стоять в одну строку. В 240 они не помещались, и подпись наезжала
   на число точек. Колонка моделей при этом не сужается — окно шире
   ровно на прибавку. */
.carsearch-picker.is-wide .carsearch-picker-body {
  grid-template-columns: 236px minmax(0, 1fr) 320px;
}
/* Модели — **в одну колонку**, решение владельца 05.09.2026. Две помещали
   больше строк разом, но снимок в них влезал только крошечный, а машину
   выбирают глазами по картинке: узнать её в поле 48×32 нельзя. Список
   при этом остаётся списком — сотня строк листается, а не охватывается
   одним взглядом, и это сознательный размен. */
.carsearch-picker-col.is-models {
  display: flex;
  flex-direction: column;
}
.carsearch-picker-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: var(--s3);
}
.carsearch-picker-col + .carsearch-picker-col {
  border-left: 1px solid var(--line);
}
.carsearch-picker-col > .caps {
  padding: var(--s4) var(--s6) var(--s2);
}
.carsearch-pick {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: var(--s3) var(--s6);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--t-14);
  color: var(--ink);
}
.carsearch-pick:hover {
  background: var(--sunken);
}
.carsearch-pick.is-on {
  background: var(--accent-tint);
  font-weight: 500;
}
.carsearch-pick .mono,
.carsearch-pick .when {
  color: var(--ink-4);
  flex: none;
}
/* Ячейка модели живёт в два этажа — имя и под ним кузов с числом мест, —
   поэтому подпись внутри неё уже не «в стороне», а под именем, и растягиваться
   ей нельзя. */
.carsearch-pick.is-car {
  gap: var(--s4);
  padding: var(--s3) var(--s6);
}
.carsearch-pick.is-car > .col {
  gap: var(--hair);
}
/* Имя крупнее подписи: в одну колонку места хватает, и строка читается
   по имени, а не по кузову. */
.carsearch-pick.is-car > .col > .clip:first-child {
  font-size: var(--t-16);
}
.carsearch-pick.is-car .when {
  flex: initial;
}
/* Исполнение — тоже два этажа. Число точек прижато к верхней строке
   и стоит своей колонкой: подпись слева больше не может на него наехать. */
.carsearch-pick.is-spec {
  align-items: flex-start;
  gap: var(--s4);
}
.carsearch-spec {
  gap: var(--s1);
  min-width: 0;
}
.carsearch-spec-line {
  gap: var(--s2);
  min-width: 0;
  min-height: 20px;
}
.carsearch-pick.is-spec .when,
.carsearch-spec-kit {
  flex: initial;
  min-width: 0;
}
.carsearch-spec-kit {
  color: var(--ink-2);
  font-size: var(--t-13);
}
.carsearch-pick.is-spec .when {
  font-size: var(--t-13);
}
.carsearch-spec-points {
  min-width: 3ch;
  line-height: 20px;
  text-align: right;
}

/* Знак марки. Поле шире, чем выше, но не плоское: у половины марок знаком
   служит слово («NISSAN», «ZEEKR»), у другой половины — круглая эмблема
   (BMW, Changan, звезда Mercedes). В поле 44×20 слово занимало всю ширину,
   а эмблеме доставалось 20 px — рядом они читались как разные по важности.
   52×28 даёт эмблеме заметный размер, не обрезая слова.

   **Ровно по центру.** С `object-position: left center` узкий знак прижимался
   к левому краю, широкий занимал всё поле, и колонка марок шла уступами. */
.carsearch-brand {
  width: 52px;
  height: 28px;
  flex: none;
  object-fit: contain;
  object-position: center;
}
/* Знака нет — буква. **Того же размера**, иначе имена марок в списке пляшут
   влево-вправо в зависимости от того, нашёлся ли логотип. */
.carsearch-brand.is-mark {
  display: flex;
  width: 52px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r1);
  background: var(--sunken);
  color: var(--ink-4);
  font-size: var(--t-12);
  font-weight: 500;
}

/* Снимок модели. Тот же приём, что у карточки машины (`.carsearch-car-shot`),
   только мельче: картинка чужая, и без жёсткой рамки её пропорция ломает
   строку. */
.carsearch-pick-shot {
  width: 84px;
  height: 56px;
  flex: none;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--card);
}
.carsearch-picker-foot {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex: none;
  padding: var(--s4) var(--s6);
  border-top: 1px solid var(--line);
  background: var(--field);
}

/* --- Ящик обвязки ----------------------------------------------------------
 *
 * Сессия и ход сбора — редкие действия, и место у ответа на вопрос они
 * занимать не должны. Прежде они стояли в подвале панели, то есть в самом
 * дорогом месте экрана. */
.carsearch-drawer-wrap {
  position: fixed;
  inset: 0;
  z-index: 60;
}
.carsearch-drawer {
  position: absolute;
  /* Выше ширмы, и число здесь не случайное: у `.scrim` `z-index: 55`, а обёртка
     ящика заводит свой слой — внутри него ширма оказывалась поверх ящика
     и гасила его вместе с фоном. */
  z-index: 56;
  right: 0;
  top: 0;
  bottom: 0;
  width: 492px;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  box-shadow: var(--sh-panel);
  animation: slide var(--dur) var(--ease);
}
.carsearch-drawer-head {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex: none;
  height: 56px;
  padding: 0 var(--s8);
  background: var(--card);
  border-bottom: 1px solid var(--edge);
}
.carsearch-drawer-body {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  min-height: 0;
  overflow-y: auto;
  padding: var(--s7) var(--s8);
}
.carsearch-card {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  flex: none;
  padding: var(--s6) var(--s7);
  border: 1px solid var(--edge-card);
  border-radius: var(--r4);
  background: var(--card);
}
.carsearch-card.is-warn {
  border-color: var(--warn-edge);
}
.carsearch-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  flex: none;
}
.carsearch-dot.is-live {
  background: var(--accent);
}
.carsearch-dot.is-dead {
  background: var(--alarm);
}

/* Куки перетаскивают файлом, поэтому и рамка пунктирная: она обещает, что
   сюда можно бросить, а не только нажать. */
.carsearch-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  height: 36px;
  border: 1px dashed var(--edge-dash);
  border-radius: var(--r2);
  background: var(--field);
  font-family: var(--sans);
  font-size: var(--t-13);
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
}
.carsearch-drop:hover {
  border-color: var(--accent);
}

.carsearch-progress {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--fill);
  overflow: hidden;
}
.carsearch-progress > i {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width var(--dur) var(--ease);
}

/* Остановка — не предупреждение, и цвет у неё свой. Пока тревога была одним
   тоном, «Стоп» приходилось красить янтарём, и он читался как «осторожно»,
   а не как «прекратить». */
.btn.is-alarm {
  border-color: var(--alarm-edge);
  background: var(--alarm-bg);
  color: var(--alarm-deep);
}
.btn.is-alarm:hover:not(:disabled) {
  border-color: var(--alarm);
}

/* Машины в строке точки — **под именем и в подбор**: панель узкая, и колонка
   рядом стирала имя точки в многоточие. По имени заводят бронь у прокатчика,
   и оно важнее списка машин, ради которых строку раскрывают. */
.carsearch-hits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  min-width: 0;
  margin-top: 2px;
}
/* Имя и номер строки — одной строкой и по одной базовой линии: номер
   отдельным столбцом стоял по центру всей строки и читался как чужой. */
.carsearch-line {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  min-width: 0;
}

/* Правая часть строки: свежесть и цена вместе. Свежесть — свойство цены,
   и врозь они не значат ничего. */
.carsearch-side {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: none;
}

/* Номер строки — подпись к цифровой клавише. Моноширинным и приглушённо:
   он адресует строку, а не описывает точку, и спорить с именем не должен. */
.carsearch-num {
  font-family: var(--mono);
  font-size: var(--t-11);
  color: var(--ink-5);
  width: 9px;
  flex: none;
  text-align: right;
}

/* --- Управление раздела: свет, а не вес ------------------------------------
 *
 * Выбранное здесь помечается **акцентом**, а не заливкой чернилами. Чёрная
 * плашка — общее правило чипа, и рядом с бумажными соседями раздела она
 * читается как чужая: экран светлый и плотный, а она весит как заголовок.
 * Правило сужено до раздела намеренно: у остальных экранов чип прежний. */
.carsearch-root .chip[aria-pressed="true"] {
  background: var(--accent-tint);
  border-color: var(--accent-border);
  color: var(--accent-hover);
  font-weight: 500;
}
.carsearch-root .chip[aria-pressed="true"]:hover {
  border-color: var(--accent);
}

/* Выбор способа сбора: две кнопки на месте одной.
   Раскрывается по нажатию у прокатчика, у которого источников два — шлюз
   и экран приложения. Ряд, а не выпадающее меню: способов ровно два, и меню
   стоило бы позиционирования, закрытия по промаху и ловушки с Escape ради
   выбора из двух. */
.carsearch-method {
  display: inline-flex;
  gap: var(--s2);
  align-items: center;
}

/* Цена в корзине. Верхняя строка не переносится: итог и «₩/сут» по отдельности
   не читаются. Нижняя — когда снята и какой была — переносится как текст. */
.carsearch-basket-price {
  gap: var(--hair);
  min-width: 0;
}
.carsearch-basket-price-line {
  gap: var(--s3);
  align-items: center;
  flex-wrap: wrap;
}
.carsearch-basket-price-line > * {
  white-space: nowrap;
}