/* Знаки и плашки карточки машины: номер региона, чем едет, возраст, оснащение.
 *
 * Отдельным файлом от каркаса раздела намеренно: это словарь вида, к которому
 * возвращаются, когда прокатчик заводит новую метку, а не раскладка экрана.
 * Фигуры знаков живут в `marks.js`, здесь только их оправа.
 */

/* Палитра знаков карточки — **производные от общих токенов, а не свои цвета**.
   Раздел держал семь собственных: синюю табличку номера, зелёное электричество
   и три степени новизны. Решение владельца 31.08.2026: знаки берут цвета
   из макета, то есть из общей палитры, и своих у раздела больше нет.

   Что осталось — псевдонимы: они называют **роль** («чем едет»), а не оттенок,
   и потому переживут смену палитры, не требуя правки двадцати мест в `svg`.

   Топливо — токены предупреждения: цвет тот же самый, и заводить рядом второй
   такой же значит однажды их развести. Электричество — токены «ОК»: у макета
   оно зелёное, и отдельная зелень рядом с общей была бы вторым таким же. */
:root {
  --fuel: var(--warn-ink);
  --fuel-bg: var(--warn-bg);
  --fuel-edge: var(--warn-edge);
  --volt: var(--ok-ink);
  --volt-bg: var(--ok-bg);
  --volt-edge: var(--ok-edge);

  /* Год появления у прокатчика — не год выпуска, и плашка обязана это
     показывать сама, не дожидаясь подсказки. Оттенок взят **у прокатчика**:
     он метит «недавно в парке» цветом `rgb(79, 64, 255)`, и он же лежит
     у нас в сыром виде при каждой такой цене.

     Взят оттенок, а не сам цвет: в полную силу он ярче любого нашего
     состояния и на карточке кричал бы громче цены. Приглушён до регистра
     остальной палитры — той же насыщенности и светлоты, что `--ok-*`
     и `--warn-*`, — поэтому читается как «другая природа», а не как
     «ещё одна тревога». Псевдонима здесь нет намеренно: фиолетового
     в общей палитре не существует, и заводить его там ради одного
     раздела значило бы обещать состояние, которого в системе нет. */
  --fleet: #4a428a;
  --fleet-bg: #f0eff8;
  --fleet-edge: #dcd9ee;
}
/* Знак набора. Высота задана строкой, в которой он стоит; ширина считается
   сама — у таблички номера пропорция настоящая, у таблетки двигателя она
   зависит от длины объёма. Ставить знаку ширину значит ломать одно из двух. */
.carsearch-ic {
  display: block;
  flex: none;
  height: 15px;
  width: auto;
}
.carsearch-ic.is-plate {
  height: 14px;
}
/* Сколько плашек оснащения не поместилось. Не кнопка: всё оснащение
   открывается вместе с машиной, и заводить рядом второе действие незачем. */
.mark.is-more {
  color: var(--ink-4);
  border-style: dashed;
}

/* --- Плашки машины --------------------------------------------------------
   Цветами прокатчика, а не своими: у него новизна оранжевая, местные номера
   синие, остальное серое. Человек держит рядом наш экран и их приложение,
   и одинаковый цвет тут — не украшение, а способ не перепроверять. */
.carsearch-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.carsearch-marks .mark {
  font-size: var(--t-12);
  line-height: 1.5;
  padding: 1px 6px;
  border: 1px solid var(--edge);
  border-radius: var(--mark-round);
  color: var(--ink-3);
  white-space: nowrap;
}
.carsearch-marks .mark.is-quiet {
  color: var(--ink-4);
  border-color: var(--line);
}

/* Плашка вариации плотнее плашки опции: первая отвечает «чем эта машина
   отличается от соседней», вторая — «что в ней есть». Одинаковый вес делал
   из карточки ряд равнозначных коробочек, и разницу приходилось вычитывать. */
.carsearch-car-name .mark {
  background: var(--field);
  border-color: var(--edge);
  color: var(--ink-2);
  font-weight: 500;
}
.carsearch-car-name .mark {
  font-size: var(--t-12);
  font-weight: 400;
  line-height: 1.6;
  padding: 0 6px;
  border: 1px solid var(--edge);
  border-radius: var(--mark-round);
  white-space: nowrap;
}
/* Модельный год — вариация, а не модель: в списке выбора «Model Y» одна,
   а 2024-я и 2025-я различаются здесь. Спокойный чип: год уточняет машину,
   но не кричит, в отличие от новизны. */
/* Год — тем же кеглем, что и соседние плашки строки имени, и **залитый**.
   На ступень мельче и без заливки он читался сноской к ним, хотя отвечает
   на равный вопрос: «какая именно машина приедет». Заливка нейтральная,
   а не цветная: цвет в этом проекте означает состояние, а год — факт.
   Отличается он от тихих плашек оснащения весом, а не оттенком. */
/* **Оправа своя, а не от родителя.** Форму плашки (поля, рамку, скругление)
   задавало правило `.carsearch-car-name .mark` — то есть она была только там,
   где год стоит рядом с именем машины. На карточке модели родитель другой
   (`.carsearch-years`), и там у года не было ни рамки, ни полей вовсе:
   `border: none 0px`, `padding: 0px`, `radius: 0px` — замер на боевом
   09.09.2026. Знак, который выглядит по-разному в двух местах, — это два
   разных знака. */
/* Имя исполнения (`New`, `Edge`) носит ту же оправу: оно отвечает на тот же
   вопрос «какая именно машина». Шрифт у него обычный — это имя, а не число. */
.mark.is-year,
.mark.is-edition {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 0 var(--s2);
  border: 1px solid var(--edge);
  border-radius: var(--mark-round);
  font-size: var(--t-12);
  line-height: 1.6;
  white-space: nowrap;
  background: var(--fill);
  color: var(--ink);
  font-weight: 500;
}
.mark.is-year {
  font-family: var(--mono);
  letter-spacing: 0;
  /* Цифры одной ширины: в ряду плашек года числа стоят друг под другом,
     и пропорциональные заставляли их плясать. */
  font-variant-numeric: tabular-nums;
}
.mark.is-edition {
  font-weight: 600;
}
/* Ступени плотности плашки года. Базовое правило выше — самая плотная,
   `is-exact`: год, который прокатчик назвал сам. Ниже оценки, и они слабее
   ровно настолько, насколько шире.

   Шкала одна и она нецветная: год — факт, а цвет в этом разделе означает
   состояние. Три оттенка на новизне уже пробовали и сняли; здесь степень
   уверенности читается весом, а краска остаётся за парком — у него другой
   источник, а не более слабый. */
.mark.is-year.is-near {
  color: var(--ink-2);
  font-weight: 400;
}
.mark.is-year.is-wide {
  background: none;
  border-color: var(--line);
  color: var(--ink-3);
  font-weight: 400;
}

/* Год появления в парке. Тот же чип, только оттенённый: он отвечает
   на другой вопрос, чем год выпуска, и стоять неотличимо рядом с ним
   не должен — по году выбирают машину. */
.mark.is-year.is-fleet {
  background: var(--fleet-bg);
  border-color: var(--fleet-edge);
  color: var(--fleet);
}
.carsearch-marks .mark.is-engine {
  color: var(--ink);
  border-color: var(--edge-dash);
  font-weight: 500;
}

/* Знак движка — плашка из макета: высота 18, глиф 11, объём моноширинным
   в 10. Прежде это был рисунок, у которого ширина считалась по длине текста,
   и всё длиннее четырёх знаков обрезалось с обеих сторон — а диапазоны вроде
   `1.2T-1.5L` у прокатчиков обычны. Плашка меряет себя сама. */
.carsearch-energy {
  display: inline-flex;
  align-items: center;
  gap: var(--hair);
  /* Крупнее прежних 18: на них глиф в 11 px читался пятном, а буква сорта
     топлива — точкой. Плашка по-прежнему меряет себя сама. */
  height: 20px;
  padding: 0 var(--s2) 0 var(--s2);
  border: 1px solid;
  border-radius: var(--r1);
  flex: none;
  font-family: var(--mono);
  font-size: var(--t-11);
  font-weight: 500;
  white-space: nowrap;
}
.carsearch-energy.is-fuel {
  background: var(--fuel-bg);
  border-color: var(--fuel-edge);
  /* Тушь глубже: `--warn-ink` на своём же фоне давал контраст, при котором
     глиф в 11 px сливался с плашкой. */
  color: var(--warn-deep);
}
.carsearch-energy.is-volt {
  background: var(--volt-bg);
  border-color: var(--volt-edge);
  color: var(--volt);
}
.carsearch-energy-ic {
  width: 13px;
  height: 13px;
  flex: none;
}
/* Волосяная черта между двумя энергиями гибрида: слева то, чем едет прежде
   всего, справа вторая. */
.carsearch-energy-sep {
  width: 1px;
  height: 11px;
  flex: none;
  background: currentColor;
  opacity: 0.35;
}
/* Буква сорта топлива у дизеля. Своей фигуры он не заслуживает: это уточнение
   к «жжёт», а не другая природа. */
.carsearch-energy b {
  font-weight: 700;
}