/* ============================================================
   Tovian · «что продавать из китая» — стили состояний после действия
   ------------------------------------------------------------
   Подключается ПОСЛЕДНИМ: всё, что появляется на экране ПОСЛЕ клика
   (пустое значение, снятая категория, неполный итог), должно быть
   оформлено той же вёрсткой, что и исходная страница, а не выпадать
   из неё голым текстом.
   Собственных цветов файл не заводит: берёт переменные секции
   (--lbink/--lbm/--lbf/--lbli), поэтому не разъезжается с темой.
   ============================================================ */

/* Отсутствующее значение. Оно ОБЯЗАНО быть видно и обязано отличаться
   от измеренного: приглушённый курсив там, где у измеренного числа
   стоит плотный моноширинный набор. Ноль и прочерк запрещены — они
   читаются как результат замера. */
#cp-tool .cp-na,
.cp-radar .cp-na {
  font: 400 11.5px/1.35 'Space Grotesk', sans-serif;
  letter-spacing: .01em;
  text-transform: lowercase;
  color: var(--lbf, rgba(238, 241, 232, .55));
  font-style: italic;
  white-space: normal;
}
/* В строке метрик карточки места мало: значение не должно ломать сетку. */
#cp-tool .cp-stat__v .cp-na { display: block; font-size: 11px; line-height: 1.2; }
/* В заголовке карточки «не переведено» встаёт на место названия — набор
   заголовочный, чтобы карточка не потеряла ритм. */
#cp-tool .cp-card__t .cp-na,
.cp-radar .cp-card__t .cp-na { font-size: 14px; line-height: 1.25; }
/* Причина вместо кнопок действия — занимает ту же полосу, что и кнопки,
   поэтому карточка не «схлопывается» на одну строку ниже соседних. */
#cp-tool .cp-na--acts,
.cp-radar .cp-na--acts {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border: 1px dashed rgba(255, 255, 255, .14);
  border-radius: 999px;
  width: 100%;
  box-sizing: border-box;
}

/* Фото товара в карточке.
   Было: у <img> стоят width/height:100% и object-fit:contain, но процентная
   высота внутри grid-плитки не разрешалась — картинка вырастала до 554px в
   250-пиксельной плитке с overflow:hidden и обрезалась по центру. У снимков с
   маркетплейса (900×1200, товар в нижней половине, фон белый) в кадр попадала
   ровно пустая белая верхушка: карточка выглядела как незагруженное изображение.
   Абсолютное позиционирование внутри плитки с заданной высотой снимает
   неопределённость: contain снова видит реальную рамку и показывает товар. */
#cp-tool .cp-card__ph,
.cp-radar .cp-card__ph { position: relative; }
/* Плитка под фото — чисто белая. Так задумано в исходной вёрстке («фото
   сливается бесшовно»), но тинт по вердикту перебивал её по весу селектора, и
   вокруг белого снимка проступала зелёная/жёлтая рамка. Возвращаем замысел. */
#cp-tool .cp-card__ph:has(> img),
.cp-radar .cp-card__ph:has(> img) { background: #fff; }
#cp-tool .cp-card__ph > img,
.cp-radar .cp-card__ph > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  box-sizing: border-box;
}

/* Категория снята повторным кликом. Раньше на этом месте оставалась
   пустая чёрная область — её читают как поломку страницы. */
#cp-tool .cp-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: clamp(26px, 4vw, 44px) clamp(16px, 3vw, 28px);
  border: 1px dashed rgba(255, 255, 255, .14);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 70%), #0f1013;
  text-align: center;
}
#cp-tool .cp-pick__ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: var(--lbli, #b7ee31);
}
#cp-tool .cp-pick__ic svg { width: 20px; height: 20px; }
#cp-tool .cp-pick__t {
  margin: 0;
  font: 500 clamp(16px, 1.6vw, 21px)/1.15 'Space Grotesk', sans-serif;
  letter-spacing: -.02em;
  text-transform: lowercase;
  color: var(--lbink, #eef1e8);
}
#cp-tool .cp-pick__s {
  margin: 0;
  max-width: 52ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lbm, rgba(238, 241, 232, .62));
}

/* Плитка-заглушка в селекторе категорий, пока срез в пути. Форму и высоту
   берёт от настоящей плитки, поэтому при появлении данных ничего не прыгает. */
#cp-tool .cp-cat--skel {
  min-height: 78px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  background-size: 200% 100%;
  animation: cpSkelWave 1.4s ease-in-out infinite;
  cursor: default;
}
@keyframes cpSkelWave { 0% { background-position: 140% 0; } 100% { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) {
  #cp-tool .cp-cat--skel { animation: none; }
}

/* Пустой результат фильтра/поиска. Класс в странице есть, но на узком
   экране текст упирался в края — добавляем воздух и перенос по словам. */
#cp-tool .cp-empty { margin-top: 14px; overflow-wrap: anywhere; }

/* Неполный итог в тизере радара: «не менее N» и перечень несобранных
   категорий отбиваются в отдельную строку, иначе оговорка теряется
   внутри рекламного абзаца — а она важнее самого числа. */
.cp-radar__teaser p .cp-na { display: block; margin-top: 6px; font-size: 12px; }
/* Та же оговорка под открытым радаром: подвал у него однострочный, поэтому
   оговорка встаёт отдельной строкой по центру и не сдвигает основной текст. */
.cp-radar__foot { flex-wrap: wrap; }
.cp-radar__foot .cp-na { flex: 1 0 100%; text-align: center; margin-top: 4px; }

@media (max-width: 600px) {
  /* На узком экране сетка карточек превращается в горизонтальную ленту, где
     ширину задаёт правило для .cp-card. Скелетоны — другой класс, и без такой
     же ширины они сжимались в шесть узких полос: состояние загрузки выглядело
     сломанной вёрсткой ещё до того, как приехали данные. */
  #cp-tool .cp-grid > .cp-cards--skel { overflow: hidden; }
  #cp-tool .cp-grid > .cp-cards--skel > .cp-skel { flex: 0 0 100%; }
  #cp-tool .cp-pick { padding: 24px 16px; }
  #cp-tool .cp-na--acts { min-height: 36px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  #cp-tool .cp-pick { transition: none; }
}

/* Подпись под сеткой ограничена 52ch, и фраза «…шорт-лист доступны» роняла
   последнее слово в отдельную строку по центру — висячая строка читается как
   обрыв вёрстки. Балансировка делит текст на равные строки, не трогая ширину. */
#cp-tool .cp-foot__note { text-wrap: balance; }

/* ============================================================
   ПЕРЕКЛЮЧАТЕЛЬ ПЛОЩАДОК
   ------------------------------------------------------------
   Он ЗАМЕНЯЕТ срез, а не смешивает: на экране одновременно одна
   площадка. Поэтому оформлен как выбор из нескольких (радиогруппа
   по смыслу), а не как набор независимых переключателей — вид
   должен говорить то же, что делает код.

   Плитка несёт три строки, и все три обязательны:
     имя площадки · подпись её метрики · состояние среза.
   Метрика на плитке стоит не для красоты: «отзывов за 30 дней» и
   «куплено за месяц» — величины разной природы, и разницу человек
   обязан видеть ДО нажатия, а не после.
   ============================================================ */
#cp-tool .cp-mk {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(56px, 7vh, 96px);
}
#cp-tool .cp-mk__btn {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012) 70%);
  color: var(--lbink, #eef1e8);
  transition: border-color .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1), background .3s ease;
}
#cp-tool .cp-mk__name {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 500 14px/1.15 'Space Grotesk', sans-serif;
  letter-spacing: -.01em;
}
#cp-tool .cp-mk__flag {
  font-size: 10px;
  letter-spacing: .08em;
  padding: 2px 5px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--lbf, rgba(238, 241, 232, .55));
}
/* Подпись метрики. Переносится целиком и не обрезается многоточием: обрезанная
   оговорка («…период площадкой не») хуже отсутствующей — она выглядит как
   полная. */
#cp-tool .cp-mk__metric {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--lbm, rgba(238, 241, 232, .62));
  overflow-wrap: anywhere;
}
#cp-tool .cp-mk__state {
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: var(--lbf, rgba(238, 241, 232, .55));
  overflow-wrap: anywhere;
}
@media (hover: hover) {
  #cp-tool .cp-mk__btn:not(.is-off):hover { border-color: rgba(168, 232, 12, .4); transform: translateY(-2px); }
}
#cp-tool .cp-mk__btn.is-on {
  border-color: transparent;
  background: linear-gradient(180deg, var(--lime, #a8e80c), #98d608);
  color: #0c1303;
  box-shadow: 0 3px 12px rgba(168, 232, 12, .22);
}
#cp-tool .cp-mk__btn.is-on .cp-mk__metric,
#cp-tool .cp-mk__btn.is-on .cp-mk__state { color: #0c1303; opacity: .78; }
#cp-tool .cp-mk__btn.is-on .cp-mk__flag { border-color: rgba(12, 19, 3, .3); color: #0c1303; }
#cp-tool .cp-mk__btn:focus-visible { outline: 2px solid var(--lime, #a8e80c); outline-offset: 2px; }

/* Закрытая площадка. Серая и не нажимается, но ОСТАЁТСЯ НА ЭКРАНЕ: убрать
   Ozon значит оставить владельца с вопросом «а где Озон». Причина стоит прямо
   в плитке, а не только в подсказке по наведению: на телефоне наведения нет,
   и оговорка, доступная только мышью, для половины читателей не существует. */
#cp-tool .cp-mk__btn.is-off {
  cursor: not-allowed;
  border-style: dashed;
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .015);
  color: var(--lbf, rgba(238, 241, 232, .5));
}
#cp-tool .cp-mk__btn.is-off .cp-mk__name { color: var(--lbf, rgba(238, 241, 232, .5)); }
#cp-tool .cp-mk__btn.is-off .cp-mk__state { color: rgba(238, 241, 232, .42); }

/* Оговорка среза: чем измерен спрос и что по этой площадке НЕ считается.
   Стоит между переключателем и категориями — то есть до первой цифры, а не
   под ней сноской, которую читают последней или не читают вовсе. */
#cp-tool .cp-mknote {
  margin-top: 12px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-left: 2px solid var(--lbli, #b7ee31);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
}
#cp-tool .cp-mknote__row {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--lbm, rgba(238, 241, 232, .62));
  overflow-wrap: anywhere;
}
#cp-tool .cp-mknote__row + .cp-mknote__row { margin-top: 4px; }
#cp-tool .cp-mknote__k {
  font: 500 11px/1 'Space Grotesk', sans-serif;
  letter-spacing: .05em;
  text-transform: lowercase;
  color: var(--lbf, rgba(238, 241, 232, .5));
  margin-right: 6px;
}
/* Строка про то, чего НЕ считается, набрана заметнее прочих: она и есть
   главное, что человек должен унести с этой площадки. */
#cp-tool .cp-mknote__row--gap { color: var(--lbink, #eef1e8); }

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

   ЭТО ИСПРАВЛЕНИЕ НАЙДЕНО ГЛАЗАМИ, а не в разметке. У .cp-stat__v в вёрстке
   страницы стоит white-space:nowrap с многоточием — правило верное для
   короткого «≈3 677», но на подписи площадки оно обрезало её ровно посередине:
   на снимке 1440 карточка Amazon показывала «не менее 179 350 · куплено…», а
   охват — «величина была у 33 из 48 карточ…». Обрезанная оговорка ХУЖЕ
   отсутствующей: она выглядит целой, и «не менее» из неё исчезает первым.
   Поэтому здесь перенос разрешён, а многоточие снято. */
#cp-tool .cp-stat__v:has(.cp-demand) {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
#cp-tool .cp-demand {
  display: block;
  font: 500 13px/1.35 'Space Grotesk', sans-serif;
  letter-spacing: -.01em;
  color: var(--lbink, #eef1e8);
  overflow-wrap: anywhere;
}
#cp-tool .cp-demand__cov {
  display: block;
  margin-top: 2px;
  font: 400 10.5px/1.3 'Space Grotesk', sans-serif;
  letter-spacing: .01em;
  color: var(--lbf, rgba(238, 241, 232, .55));
}

@media (max-width: 600px) {
  #cp-tool .cp-mk { gap: 8px; }
  #cp-tool .cp-mk__btn { flex: 1 1 100%; }
  #cp-tool .cp-mknote { padding: 10px 12px; }
}

/* 11. ШОРТ-ЛИСТ: площадка и величина рядом с товаром.
   Список смешанный по построению — в него кладут карточки разных площадок, и
   он переживает срез. Без имени площадки чипы «окно сужается» и «замер без
   вердикта» стоят в одном столбце как две оценки одной шкалы, хотя за ними
   отзывы и купленные штуки. Подпись величины идёт второй строкой под
   названием: обрезать её нельзя — «не менее» исчезает из неё первым. */
#cp-tool .cp-sl__name { white-space: normal; }
#cp-tool .cp-sl__demand {
  display: block;
  margin-top: 3px;
  font: 400 11px/1.35 'Space Grotesk', sans-serif;
  font-style: normal;
  letter-spacing: .01em;
  color: var(--lbf, rgba(238, 241, 232, .55));
  overflow-wrap: anywhere;
}
#cp-tool .cp-sl__meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }