/* Выезжающая панель раздела: точка и карточка модели.
 *
 * Панель, а не экран. Экранами они побыли один день: полноэкранный переход
 * пересобирал карту на каждом шаге, и это читалось как рывок. Решение
 * владельца 01.09.2026 — отход от макета, где точка занимает целый экран.
 *
 * Здесь всё, что видно только при открытой панели: сама сцена, справка точки,
 * колонка машин с карточками и карточка модели. Каркас раздела и разведка —
 * в `carsearch.css`, плашки машины — в `carsearch-marks.css`.
 */

/* Копируемое — **текст, а не поле ввода**: ни рамки, ни подписи «копировать».
   Пунктирный ящик во всю ширину с подписью у дальнего края читался пустым
   полем, а само значение в нём терялось. Имя точки при этом копируется прямо
   заголовком — оно уже стоит на экране, и второй раз писать его незачем.
   Отклик показывается на секунду и уходит: постоянная подпись занимала бы
   место у каждой строки. */
.carsearch-copy {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s3);
  max-width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: copy;
}
.carsearch-copy:hover {
  color: var(--accent-hover);
}
.carsearch-copy .caps {
  color: var(--accent-hover);
  flex: none;
}
/* Адрес по-китайски — мельче имени: его не читают глазами, его берут
   и показывают водителю. */
.carsearch-copy.is-address {
  font-family: var(--mono);
  font-size: var(--t-13);
  color: var(--ink-3);
}


/* Список машин — единственное, что прокручивается. `min-height: 0` здесь
   обязателен: без него флекс-ребёнок не сжимается ниже своего содержимого,
   и вместо прокрутки список просто вылезал за окно. */
.carsearch-grid {
  display: grid;
  /* **Один столбец** — решение владельца 01.09.2026. Две колонки макета
     держались на том, что точка занимала целый экран; в панели они делили
     ту же ширину пополам, и карточка ломалась. Столбец во всю ширину читается
     строкой: фотография, имя со знаками, оснащение и цена идут слева направо,
     а не сворачиваются в блок. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  align-content: start;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
  padding: var(--s6) var(--s8) var(--s7);
}
.carsearch-car-card {
  display: flex;
  gap: var(--s5);
  align-items: flex-start;
  min-width: 0;
  padding: var(--s4);
  border: 1px solid var(--edge-card);
  border-radius: var(--r4);
  background: var(--field);
}
/* Карточка раскрывается нажатием: показывает, чем она была в выдаче
   прокатчика — номером по порядку и его же словами. Без этого «2 шт» —
   обещание, которое нечем проверить, а бронь заводят у него, найдя
   ровно эту строку. */
.carsearch-car-card {
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.carsearch-car-card:hover {
  border-color: var(--edge-dash);
}
/* Итог, посчитанный нами, а не сказанный прокатчиком. Пунктир — та же
   подпись, что у плашки «не поместилось»: наше отличается от его.

   Подпись держится **на классе, а не на месте**: переключатель «за срок /
   в сутки» меняет, какое из двух чисел крупное, и наш подсчёт переезжает
   из мелкого в крупное. Привяжи мы пунктир к `.when` — переключившись,
   человек читал бы наше число как сказанное прокатчиком. */
.is-ours {
  border-bottom: 1px dashed var(--edge-dash);
  cursor: help;
}

.carsearch-detail-shot {
  width: 158px;
  height: 98px;
  flex: none;
  object-fit: contain;
  border: 1px solid var(--edge-card);
  border-radius: var(--r3);
  background: var(--card);
}
/* Прокручивается только тело: шапка с именем и ценой обязана оставаться
   на виду — по ней и понимают, чью машину смотрят. */
/* Что за машина — парами «поле → значение». Сетка, а не строка через точку:
   значения разной длины, и в строку они читаются как один длинный хвост. */

.carsearch-car-shot {
  width: 104px;
  height: 66px;
  flex: none;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--card);
}
/* Подписи карточки — моноширинными: марка с местами и коробкой, второе число
   цены и «о модели» стоят в столбик под именем, и разнобой гарнитур делал
   из них абзац. */
.carsearch-car-card .when {
  font-family: var(--mono);
  font-size: var(--t-12);
}
.carsearch-car-name {
  font-size: var(--t-15);
  font-weight: 600;
}
.carsearch-price {
  font-family: var(--mono);
  font-size: var(--t-16);
  font-weight: 500;
  color: var(--accent-hover);
  white-space: nowrap;
}
/* Плашки в строке имени: имя может занять две строки, и плашка обязана
   идти с ним потоком, а не висеть по базовой линии первого слова. */
.carsearch-car-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Сводка окна: сколько машин и какая дешевле всех. Это и есть ответ, за
   которым сюда пришли, — остальное детали, и они ниже. */
/* Телефон точки — подпись, а не действие: звонят с телефона, а здесь его
   переписывают. Рядом с акцентной кнопкой он выглядел вторым действием. */
.carsearch-phone {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--s3);
  flex: none;
  border-radius: var(--r1);
  background: var(--accent-soft);
  font-family: var(--mono);
  font-size: var(--t-12);
  font-weight: 500;
  color: var(--accent-hover);
  text-decoration: none;
  white-space: nowrap;
}
.carsearch-phone:hover {
  background: var(--accent-tint);
}

/* Строка справки: значок слева, текст следом. Пять признаков места подряд
   одинаковым серым текстом читались абзацем, хотя это перечень. */
.carsearch-place-line {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
  font-size: var(--t-13);
  color: var(--ink-2);
}
.carsearch-place-line.is-mono {
  font-family: var(--mono);
}
/* Свежесть цен — акцентом: это единственная строка справки, отвечающая
   «насколько верно то, что ниже», и от неё зависит доверие к ценам. */
.carsearch-place-line.is-accent {
  color: var(--accent-hover);
}
.carsearch-place-ic {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--ink-4);
}
.carsearch-place-line.is-accent .carsearch-place-ic {
  color: currentColor;
}

/* Одна полоса, а не две: счётчик с ответом слева, отбор справа. Разнесённые
   по строкам, они читались как два разных вопроса, хотя это один — «что здесь
   есть и сколько». */
.carsearch-sum {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
  flex: none;
  padding: var(--s5) var(--s8);
  background: var(--field);
  border-bottom: 1px solid var(--line);
}
.carsearch-sum-count {
  font-size: var(--t-15);
  font-weight: 600;
}
.carsearch-sum-cheap {
  font-size: var(--t-13);
  color: var(--ink-3);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carsearch-sum-cheap b {
  color: var(--accent);
  font-weight: 600;
}

.carsearch-cars {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--card);
  border-right: 1px solid var(--edge-card);
}
/* Условия места — строкой, а не столбцом: часы, чем точка отличается, телефон
   и свежесть цен. Колонкой они забирали 316 px из ширины машин. */
.carsearch-facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s4) var(--s6);
  flex: none;
  padding: var(--s4) var(--s8);
  background: var(--field);
  border-bottom: 1px solid var(--line);
}

.carsearch-cars-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s3);
  flex: none;
  padding: var(--s7) var(--s8) var(--s5);
  border-bottom: 1px solid var(--line);
}
/* Управление — на строке заголовка. Центрированное по всей шапке, оно висело
   между именем и адресом, не совпадая ни с одной строкой. */
.carsearch-head-row {
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-width: 0;
}
.carsearch-head-row .page-title {
  min-width: 0;
}

/* Карточка модели листается целиком: справка длинная, а карта рядом
   не прокручивается. */
.carsearch-card-page {
  display: flex;
  flex-direction: column;
  gap: var(--s7);
  min-height: 0;
  overflow-y: auto;
  padding: var(--s8) var(--s9);
  background: var(--card);
  border-right: 1px solid var(--edge-card);
  grid-column: span 2;
}
.carsearch-passport {
  display: flex;
  align-items: flex-start;
  gap: var(--s7);
}

/* Строка исполнения и строка точки в карточке модели — один вид: обе
   отвечают «а вот такое встречалось», и различать их видом незачем. */
.carsearch-variant {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--edge-card);
  border-radius: var(--r3);
  background: var(--field);
  min-width: 0;
  color: var(--ink);
}
/* Исполнение с оснащением — колонкой: плашек бывает под сорок, и в одну
   строку с именем они не встают. */
.carsearch-variant.is-column {
  flex-direction: column;
  align-items: stretch;
  gap: var(--s3);
}
/* Ряд чипов над списком моделей — мотор и год. Переносится, потому что
   моторов у корейского прокатчика пять, а годов бывает девять.

   **Имя своё, а не `carsearch-energy`.** Так зовётся плашка мотора на карточке
   машины (`carsearch-marks.css`), и ряд чипов молча забирал у неё всё, чего
   не переопределял здесь: рамку, высоту 18 px, `flex: none` и `nowrap`.
   Видно это было сразу — вокруг ряда стояла капсула, а девять годов не
   переносились и уезжали за окно поверх карты. */
.carsearch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s3);
}
/* Годы — моноширинным: рядом стоят числа одной длины, и в пропорциональном
   они пляшут по ширине, а ряд читается как список слов, а не чисел. */
.carsearch-chips .chip.is-year {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Счётчик точек у исполнения — **кнопка без кнопки**, тем же приёмом, что
   `.carsearch-back` и `.carsearch-copy` ниже. Класс на ней стоял `link`,
   а правила с таким именем в проекте нет ни одного: элемент падал на стили
   браузера и выходил серой капсулой с `border: outset 2px`, `cursor: default`
   и чужим кеглем. Та же ловушка уже была у `.carsearch-back`.

   Нажатие ставит фильтр по исполнению — тот же, что третий столбец окна
   выбора, — и нажатое состояние обязано быть видно: иначе не понять, какое
   из шести исполнений сейчас отбирает список точек. */
.carsearch-count {
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--t-13);
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
}
.carsearch-count:hover {
  color: var(--accent-hover);
}
.carsearch-count[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
}

.carsearch-variant.is-column .row {
  align-items: baseline;
}

a.carsearch-variant:hover {
  border-color: var(--accent-border);
  background: var(--accent-tint);
}


/* --- Выезжающая панель раздела ---------------------------------------------
 *
 * Точка и карточка модели живут **поверх карты**, а не вместо экрана. Экраном
 * они побыли один день: полноэкранный переход пересобирал карту на каждом
 * шаге, и это читалось как рывок. Отход от макета, решение владельца
 * 01.09.2026 — там точка занимает целый экран.
 *
 * Ширина взята под сетку машин в две колонки: у прежней панели её не было,
 * и ровно из-за этого точку когда-то и вынесли на экран. */
.carsearch-stage {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
}
.carsearch-stage > .workspace {
  flex: 1;
  min-width: 0;
}
.carsearch-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  /* Ширина под сетку машин в две колонки **макетного размера**: карточке
     нужно около 470, значит панели — тысяча с лишним. Прежние 940 делились
     со справкой в 316, и на текст карточки оставалось 149 px: цена ломалась
     на три строки, оснащение шло в три ряда. Справки колонкой больше нет,
     а ширина взята под саму карточку, а не под «сколько поместится». */
  width: min(1180px, calc(100% - var(--scout-side) - var(--s7)));
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-left: 1px solid var(--edge-card);
  box-shadow: var(--sh-panel);
  z-index: 15;
  animation: carsearch-slide var(--dur) var(--ease);
}
/* Выезд — сдвигом и проявлением сразу: один сдвиг читается как рывок, одно
   проявление — как подмена. Кривая та же, что у всего движения проекта. */
@keyframes carsearch-slide {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.carsearch-panel-inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.carsearch-panel-head {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex: none;
  height: 52px;
  padding: 0 var(--s7);
  border-bottom: 1px solid var(--line);
  background: var(--field);
}
.carsearch-panel-body {
  display: flex;
  min-height: 0;
  flex: 1;
}
/* Внутри точки колонки те же, что были на экране: справка и машины. Карта
   ушла из них — она под панелью и никуда не девалась. */
.carsearch-panel-body > .carsearch-cars,
.carsearch-panel-body > .carsearch-card-page {
  flex: 1;
  min-width: 0;
  border-right: 0;
}

/* Действие точки — обведённое, а не залитое: заливка принадлежит акценту,
   а «Обновить» это не главное действие экрана, а повторение прежнего. */
.carsearch-cars-head .btn .carsearch-place-ic {
  width: 13px;
  height: 13px;
  color: var(--ink-4);
}
.carsearch-cars-head .btn {
  background: var(--card);
  border-color: var(--edge);
  color: var(--ink-2);
  font-weight: 500;
}
.carsearch-cars-head .btn:hover:not(:disabled) {
  border-color: var(--accent-border);
  background: var(--field);
}

.carsearch-panel-head .when {
  font-family: var(--mono);
  color: var(--ink-5);
}

/* Три числа под именем: сколько точек, городов и исполнений. Это и есть охват
   машины — то, ради чего карточку открывают, когда цены ещё не собраны. */
.carsearch-counts {
  display: flex;
  gap: var(--s6);
  flex-wrap: wrap;
  font-size: var(--t-13);
  color: var(--ink-4);
}
.carsearch-counts b {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--ink);
}

/* Годы исполнения. Их несколько у одной комплектации — это разные машины
   на стоянке, а не разные версии, — и в ключ исполнения они не входят. */
.carsearch-years {
  display: inline-flex;
  gap: var(--s1);
  flex: none;
}

/* Чипы отбора в полосе точки: переносятся и жмутся к правому краю. Базовое
   правило держит `flex: none` ради балки разведки, где чипы идут собственной
   строкой; здесь они делят строку со счётчиком, и без права на перенос
   вылезали за полосу — замерено на боевом, 786 px чипов в полосе 623. */
.carsearch-sum .carsearch-tabs {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

/* Возврат к точке с карточки модели — ссылка, а не кнопка: это шаг назад,
   а не действие наравне с закрытием. Появляется только когда есть куда
   вернуться: пришли из разведки — возвращаться некуда. */
.carsearch-back {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--t-14);
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
}
.carsearch-back:hover {
  color: var(--accent-hover);
}

/* Паспорт машины — строка со значками, а не плашки. Плашками с рамками он был
   неотличим от оснащения, лежащего ниже такими же: «седан» и «парктроник»
   читались одним списком, хотя первое отвечает «что это за машина», а второе —
   «что в ней есть». */
.carsearch-passport-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  color: var(--ink-3);
}
.carsearch-passport-row .carsearch-place-line {
  font-size: var(--t-12);
  color: var(--ink-3);
}
.carsearch-passport-row .carsearch-place-ic {
  width: 13px;
  height: 13px;
}

/* Корзина на карточке машины: значок у цены, залитый — «уже лежит». Отдельная
   кнопка поверх карточки-ссылки, поэтому своя рамка наведения: без неё
   нажатие на значок и на карточку выглядели одинаково. */
.carsearch-keep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: 1px solid var(--edge);
  border-radius: var(--r2);
  background: var(--card);
  color: var(--ink-3);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.carsearch-keep:hover {
  border-color: var(--accent-border);
  color: var(--accent);
}
.carsearch-keep:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.carsearch-keep.is-in {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent);
}
.carsearch-keep:disabled {
  cursor: not-allowed;
  color: var(--ink-5);
  border-color: var(--line);
}

/* Ящик корзины: группа — точка, внутри машины строками. */
.carsearch-basket-group {
  gap: var(--s3);
}
.carsearch-basket-point {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.carsearch-basket-point:hover .place-name {
  color: var(--accent-hover);
}
.carsearch-basket-car {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-width: 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.carsearch-basket-shot {
  width: 64px;
  height: 40px;
  flex: none;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--field);
}
.carsearch-plug:disabled {
  cursor: not-allowed;
  color: var(--ink-4);
}