/* Проценка — что творится с деталью на российском рынке.

   Отдельный материал: свой файл стилей, свой файл кода, свой файл данных.
   С каталогом не смешивается: там наша цена, здесь чужой рынок. */

/* ОТСТУПЫ ЗАГОЛОВКОВ ПРОЦЕНТКИ ЗАДАЮТСЯ ЗДЕСЬ И БОЛЬШЕ НИГДЕ.

   32 сверху, 12 снизу — оба заголовка раздела и оба заголовка на замере.
   Разными их держать нельзя, человек ходит по одному приложению.

   Было 18/6 у ленты и 20/8 на замере: заголовок сидел на карточке вплотную и
   выглядел теснее всех остальных экранов (замечание владельца 16.08.2026).

   Сверху воздуха больше, чем снизу: заголовок начинает новый кусок и должен
   стоять со своим списком, а не посередине между двумя. Считать снизу надо не
   12, а 26: у объявления есть свои 14 отступа, и текст заголовка отстоит от
   первой строки списка именно на столько. При 24 сверху заголовок оказывался
   ближе к чужому блоку выше, чем к своему списку ниже, и вдобавок теснее, чем
   объявления стоят между собой — у них по 14 сверху и снизу, то есть 28
   (замечание владельца 18.08.2026). */
.market__head,
.market-sect {
  margin: 32px 0 12px;
}

/* Тридцать два — это расстояние между разделами. От строки поиска отделять
   нечего: она сама себе полоса с подложкой, и первый заголовок стоит под ней
   вплотную — как «Наши цены» на поиске. Прежде проценка начиналась с провала в
   полэкрана (замечание владельца 21.08.2026).

   «Первый» считается по показанным: когда человек ещё ничего не мерил,
   «Вы смотрели» скрыт, и первым становится заголовок подборки. */
.market__default > .market__head {
  margin-top: 12px;
}

.market__default > .market__head:not([hidden]) ~ .market__head {
  margin-top: 32px;
}

/* Замер стоит под строкой поиска, и отбивку от неё держит здесь — своя у
   карточки общая с лентой, где карточки идут подряд и такой воздух не нужен.
   Без этого название детали сидело в восьми точках от поля и выглядело
   приклеенным (замечание владельца 18.08.2026). */
.market__result {
  padding-top: 8px;
}

.market__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

/* Заголовок раздела — чёрный, как «Наши цены» на поиске. Приглушённым он
   переставал быть заголовком: под ним идут карточки, где серым набрано всё
   второстепенное, и серый заголовок вставал с ними в один ряд вместо того,
   чтобы их возглавлять (замечание владельца 21.08.2026). */
.market__head h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--text);
}


/* Карточка замера. Главное в ней не число, а полоса: она показывает, что
   рынок сам себе противоречит — одна и та же деталь у разных продавцов
   отличается в разы. Число этого не передаёт, а полоса передаёт. */
.market-card {
  width: 100%;
  padding: 12px 0 14px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

/* Оба списка выходят из колодца страницы на её края: карточки в них одни и те
   же, и разъезжаться на 18 пикселей им нельзя — до 20.08.2026 «вы смотрели»
   стоял в колодце, а подборка от края, и одинаковые карточки читались как два
   разных списка. */
.market__feed {
  margin: 0 -18px;
}

.market-card--feed {
  padding: 14px 18px;
}

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

   Здесь она легче, чем там: в списке таких карточек тридцать, и полоса во всю
   ширину тридцать раз подряд давила бы. Ширина по содержимому, рост 34 против
   44 в карточке. */
.market-card .plashka {
  height: 34px;
  margin-top: 12px;
  padding: 0 12px;
  gap: 9px;
  border-radius: 0;
  /* Серый, а не тёмный: в списке из тридцати карточек тёмная плашка тянула
     внимание на себя, и остальное уходило на второй план (замечание владельца
     24.08.2026). В карточке товара полоса остаётся тёмной — там она одна на
     экран и тяжести не создаёт. */
  background: #626e7b;
}

.market-card .plashka__label {
  color: #dff23f;
  letter-spacing: 1.2px;
  opacity: 1;
}

.market-card .plashka__sum {
  color: #ffffff;
}

.market-card .plashka__go {
  stroke: #dff23f;
  opacity: 1;
}

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

/* Позиции разделяет полоса подложки, а не линия. Линия стояла до 20.08.2026, и
   вокруг каждой позиции выходило три полосы подряд: разделитель сверху, шкала
   посередине, разделитель снизу. Владелец прочёл это как «три полосы вокруг
   одного диска, и что это значит».

   Убрана именно линия, а не шкала: шкала — единственная здесь, которая что-то
   говорит. Полоса та же, что делит группы в меню и разделы на странице
   заказа, — приём в приложении уже есть, второго заводить незачем. */
/* Белого поровну с обеих сторон полосы: четырнадцать сверху, четырнадцать
   снизу. Было 30 под плашкой и 22 над следующим номером — карточка читалась
   провисшей вниз (замечание владельца 24.08.2026). Заодно ушла лишняя треть
   расстояния: между позициями было 60 точек, стало 36. */
.market-card--feed + .market-card--feed {
  margin-top: 0;
  border-top: 8px solid var(--fill);
  padding-top: 14px;
}


/* Заголовок карточки — номер детали. Имени в проценке нет: наши имена
   переведены с китайского и бывают корявыми, а ищут по номеру (решение
   владельца 21.08.2026). Число предложений стоит в той же строке справа. */
.market-card__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Счёт предложений — вход в объявления, поэтому синий: синим в приложении
   набрано всё, что нажимается, и больше ничего (docs/POCHERK.md). Рядом
   стрелка — она и говорит, что карточка ведёт дальше (решение владельца
   24.08.2026).

   Размер прежний, 13: ступень та же, что у номеров и подписей, — иерархию
   меняет цвет, а не кегль. */
.market-card__offers {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  color: rgba(var(--ink), 0.42);
  font-size: 13px;
  white-space: nowrap;
}

.market-card--feed .market-card__offers {
  color: var(--accent-deep);
}

/* Стрелка стоит только там, где карточка нажимается, — в подборке и в «вы
   смотрели». На самом замере она обещала бы ход, которого нет: человек уже
   пришёл (24.08.2026). */
.market-card:not(.market-card--feed) .market-card__go {
  display: none;
}

.market-card__go {
  width: 8px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Марка и номер — плотнее прежнего: 58% вместо 40% и начертание 500. Это
   единственное, что теперь стоит под именем, и совсем светлым оно читалось
   припиской (просьба владельца 21.08.2026). Тяжелее 500 в приложении не
   бывает — см. docs/POCHERK.md. */
.market-card__number {
  margin-top: 3px;
  color: rgba(var(--ink), 0.58);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.market-card__scale {
  position: relative;
  margin-top: 16px;
}

/* Линия тёмная, точки голубые: только на таком перепаде видно, где стоят цены.
   При 12% серого линия была светлее подписей под ней и читалась случайной
   (решение владельца 21.08.2026). */
.market-card__line {
  height: 3px;
  border-radius: 2px;
  background: rgba(var(--ink), 0.68);
}

/* Точки синие, а не бледно-голубые: на тёмной линии половинный тон терялся
   (замечание владельца 21.08.2026). */
.market-card__mark {
  position: absolute;
  /* Линия высотой 3 лежит от нуля, её середина на 1.5; точка диаметром 8
     садится серединой на середину линии, отсюда −2.5. */
  top: -2.5px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--accent);
}

/* Средняя цена. Кольцо белое, а вокруг него тонкий серый ободок: на белом
   фоне карточки одно только белое кольцо не читалось бы. Это единственное
   место, где точка отличается от других, — и по нему видно, откуда взялось
   число под шкалой. */
.market-card__mark--mid {
  top: -4.5px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(var(--ink), 0.25);
}

/* Под шкалой три числа: край, средняя, край. Средняя темнее и крупнее — она
   главная, и ей соответствует точка в кольце на самой шкале. */
.market-card__ends-mid {
  color: var(--text);
  font-size: 16px;
}

.market-card__ends {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  /* Края отходят от линии на столько же, на сколько точки выступают над ней:
     иначе шкала читается прижатой к подписям снизу. */
  margin-top: 10px;
  color: rgba(var(--ink), 0.38);
  font-size: 13px;
}


/* Одно предложение — один конец. Подпись встаёт под точкой посередине. */
.market-card__ends--one {
  justify-content: center;
}

/* Пока замер идёт. Ничего не мигает и не прыгает: место под карточку занято
   сразу, меняется только текст и длина полоски. */
.market-run {
  padding: 12px 14px 16px;
  border-radius: 5px;
  background: var(--panel);
}

.market-run__title {
  font-size: 16px;
  font-weight: 400;
}

.market-run__step {
  margin-top: 6px;
  color: rgba(var(--ink), 0.45);
  font-size: 13px;
}

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

   С данными шарик не связан ничем: он не значит «нашли предложение» и никуда
   не садится. Это только знак, что мы работаем. */
.market-run__scale {
  position: relative;
  margin-top: 14px;
}

.market-run__scale i {
  position: absolute;
  top: -2px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--tochka);
  animation: market-run 1.7s ease-in-out infinite;
}

@keyframes market-run {
  0%, 100% { left: 0; }
  50% { left: 100%; }
}

/* Кому движение мешает — шарик просто стоит посередине. */
@media (prefers-reduced-motion: reduce) {
  .market-run__scale i {
    left: 50%;
    animation: none;
  }
}


/* ============================================================================
   ЗАМЕР ПО НОМЕРУ
   ============================================================================
   Занимает место того, что стояло на экране, поэтому своей шапки у него нет:
   сверху остаётся та же строка поиска, и заголовком служит имя детали в
   карточке. Разделы ниже — подписи, а не панели: панель тут поделила бы один
   ответ на три чужих друг другу куска. */

/* «Где продают», «Площадки», «Объявления» — те же заголовки разделов, что и
   выше: 16, чёрные. Двадцать было слишком: на экране подряд шли три почти
   одинаковых размера и ничто не читалось главным. */
.market-sect {
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
}

/* Кнопки отбора — один вид на города и на площадки. Каждая нажимается и
   оставляет в списке ниже только свои предложения, потому это кнопки, а не
   надписи. Отборы складываются: Москва и Дром — это московские с Дрома. */
.market-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.market-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  /* Своих отступов у кнопки быть не должно: браузер добавляет собственные, и
     надпись уезжает с середины. */
  padding: 6px 10px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  -webkit-tap-highlight-color: transparent;
}

.market-chip b {
  font-weight: 400;
}

.market-chip span {
  color: rgba(var(--ink), 0.4);
  font-size: 13px;
}

.market-chip.is-on {
  background: var(--accent);
  color: var(--on-accent);
}

.market-chip.is-on span {
  color: rgba(255, 255, 255, 0.7);
}

/* Объявления — каждое своей карточкой, с тем же зазором, что и везде в
   разделе. Одной панелью со строками они читались сплошной простынёй, а это
   разные продавцы с разными ценами (решение владельца 16.08.2026). */
.market-offers {
  display: flex;
  flex-direction: column;
  /* Строки идут до краёв экрана: линия между ними должна доходить до бортов,
     иначе список читается обрезанным. */
  margin: 0 -18px;
}

.market-offer {
  padding: 14px 18px;
  border-bottom: 1px solid var(--hair);
}

.market-offer__price {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Названия приходят с площадок как есть, и там попадается машинный перевод в
   три строки. Две строки — предел: дальше строка перестаёт быть строкой. */
.market-offer__title {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  display: -webkit-box;
  overflow: hidden;
  margin-top: 5px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--accent);
  font-size: 16px;
  line-height: 1.3;
}

.market-offer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 8px;
  color: rgba(var(--ink), 0.42);
  font-size: 13px;
}

/* Из трёх подписей город — единственная, которую взвешивают: он решает, во
   что обойдётся привезти. Ему света больше. */
.market-offer__meta b {
  color: rgba(var(--ink), 0.62);
  font-weight: 400;
}

.market-offers__empty {
  padding: 14px 0;
  color: rgba(var(--ink), 0.45);
  font-size: 14px;
}

.market-more {
  display: block;
  width: 100%;
  /* Отступ по бокам тот же, что у объявления. Список идёт до краёв экрана, и
     кнопка без своего отступа упиралась надписью в борт телефона (замечание
     владельца 18.08.2026). */
  padding: 13px 18px;
  border: 0;
  border-top: 1px solid var(--hair);
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}


/* ============================================================================
   НАША ЦЕНА НА ФОНЕ РЫНКА
   ============================================================================
   Полоса под шкалой: слева наша цена, справа — насколько мы дешевле. Ради
   этого числа проценку и открывают, и оно должно стоять до списка объявлений,
   а не после (образец владельца 17.08.2026).

   Зелёный тут не украшение: он единственный цветной на экране и говорит, что
   это наша сторона. Когда мы дороже — тот же ряд, но без зелёного: врать
   цветом нельзя. */
/* Цена в Китае — полоса во всю ширину, серая, той же подложкой, что строка
   поиска. Зелёной она была, пока значила выгоду; теперь это просто второе из
   двух чисел на экране, и цвета ему не нужно. Единственный цветной предмет на
   проценке — то, что нажимается. */


/* ============================================================================
   ИСТОРИЯ ПОД СТРОКОЙ
   ============================================================================ */

/* История под строкой. Плитками, без контура: шесть номеров в контурах вставали
   в три ряда, а без него укладываются в два (выбор владельца 26.08.2026).

   Стоит всегда, а не выпадает по касанию строки. Выпадашку человек не находил:
   «я даже не догадался бы, что назад очищает поле — кто так узнает?». История,
   которая просто лежит на месте, объясняет себя сама.

   Цен здесь нет намеренно: история — про «померить снова», а не про то, сколько
   было вчера. */
.market-hist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* Восемь сверху, а не десять: полоса со строкой уже держит свои шестнадцать
     снизу, и вместе выходил провал (замечание владельца 26.08.2026). */
  margin-top: 8px;
  /* Два ряда, не больше. Высота считается от плитки: 13 на 1.2 плюс поля 12 —
     около 28, два ряда с промежутком 6 дают 62. Лишнее прячется, а не давит
     витрину вниз. */
  max-height: 62px;
  overflow: hidden;
}

.market-hist:empty {
  display: none;
}

.market-hist__chip {
  /* Поля по бокам девять, а не одиннадцать: колодец экрана 18, и при
     одиннадцати три плитки в ряд не помещались на два пикселя — шесть номеров
     разъезжались на три ряда, а видно оставалось четыре. */
  padding: 6px 9px;
  border: 0;
  border-radius: var(--radius);
  background: #f2f4f6;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}