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

   Живёт отдельно от `ceny.css` потому, что стоит НИЖЕ по каскаду и часть
   правил здесь перекрывает прежние. Свести их в один файл — правка
   внешнего вида, а не перекладывание строк. */


/* Окно просмотра кадра доказательства.

   Снимок страницы поставщика — узкий и очень высокий JPEG (склейка шапки и
   области цены). Поэтому окно занимает почти весь экран, а картинка внутри
   прокручивается: ужать её по высоте значило бы сделать нечитаемой ровно ту
   строку с ценой, ради которой кадр и снимали. */
.kadr-okno {
  width: min(94vw, 1100px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--fg-1);
  overflow: hidden;
}
.kadr-okno::backdrop { background: rgba(17, 24, 39, .62); }
.kadr-ramka {
  display: flex;
  flex-direction: column;
  margin: 0;
  max-height: 92vh;
}
.kadr-podpis {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bd);
  font-size: 14px;
  background: var(--paper);
}
.kadr-podpis > span:first-child { min-width: 0; }
.kadr-deystviya {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}
.kadr-zakryt {
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--fg-2);
  font: inherit;
  font-size: 13px;
  padding: 4px 10px;
  cursor: pointer;
}
.kadr-zakryt:hover { background: var(--hover); }
.kadr-skachat { font-size: 13px; }
.kadr-ramka img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--sunken);
}
/* Прокручивается рамка вокруг снимка, а не лист под окном: сам `img` растянут
   по ширине окна и по высоте не ограничен, поэтому полосу прокрутки обязан
   держать его контейнер. Подпись остаётся на месте — она вне потока прокрутки
   ровно потому, что колонка задаёт `flex-shrink: 0` шапке. */
.kadr-ramka { overflow-y: auto; }
.kadr-podpis { position: sticky; top: 0; flex-shrink: 0; z-index: 1; }
body.kadr-otkryt { overflow: hidden; }

/* Своё имя подбора: закрытая строка-ссылка и обычная форма под ней. */
.ceny-nazvanie { margin: 0 0 14px; }
.ceny-nazvanie input {
  display: block;
  width: 100%;
  max-width: 520px;
  margin-top: 5px;
  padding: 8px 10px;
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--fg-1);
  font: inherit;
  font-size: 15px;
}
.ceny-pereimenovat { margin: -4px 0 16px; }
.ceny-pereimenovat > summary {
  display: inline-block;
  color: var(--fg-3);
  font-size: 13px;
  cursor: pointer;
}
.ceny-pereimenovat > summary:hover { color: var(--fg-2); }

/* Переименование заголовком подбора. Само имя и есть кнопка: нажатие по нему
   открывает поле. Треугольник `details` снят намеренно — рядом с крупным
   именем он читался как «раскрыть подробности», а не «поменять название»;
   вместо него карандаш, который появляется у имени под курсором. */
.ceny-pereimenovat-zagolovok { margin: 0; min-width: 0; flex: 1 1 auto; }
/* Заголовок и карандаш идут ОДНОЙ строкой текста, а не гибкой строкой: во
   флексе карандаш прижимался к правому краю переносящегося заголовка и на
   узком экране читался как значок соседней ссылки «Новый поиск». Инлайном он
   стоит вплотную к последнему слову имени — там, где на него и смотрят. */
.ceny-pereimenovat-zagolovok > summary {
  display: block;
  color: inherit;
  font-size: inherit;
  list-style: none;
  border-radius: var(--r-sm);
}
.ceny-pereimenovat-zagolovok > summary h1 { display: inline; }
.ceny-pereimenovat-zagolovok > summary::-webkit-details-marker { display: none; }
.ceny-pereimenovat-zagolovok > summary:hover { color: inherit; }
/* Карандаш виден ВСЕГДА, а не только под курсором. Прежнее переименование
   пряталось за серой строкой ниже условий, и Эд его не находил вовсе: прятать
   подсказку ещё и до наведения мыши значило повторить ту же ошибку. Под
   курсором он просто становится чётче. */
.ceny-karandash {
  color: var(--fg-3);
  font-size: 17px;
  margin-left: 8px;
  opacity: .5;
  transition: opacity .12s ease;
}
.ceny-pereimenovat-zagolovok > summary:hover .ceny-karandash,
.ceny-pereimenovat-zagolovok > summary:focus-visible .ceny-karandash,
.ceny-pereimenovat-zagolovok[open] > summary .ceny-karandash { opacity: 1; }
/* Открытая форма стоит на месте заголовка, а не рядом с ним: строка «Новый
   поиск» справа остаётся на своём месте, и экран не прыгает. */
.ceny-pereimenovat-zagolovok[open] > summary h1 { color: var(--fg-3); }

/* Переименование внутри карточки списка. Форма перекрывает растянутую ссылку
   карточки (`z-index`), иначе нажатие по полю уносило бы на подбор. */
.ceny-pereimenovat-v-spiske {
  position: relative;
  z-index: 1;
  margin: 8px 0 0;
}
.ceny-pereimenovat-v-spiske > summary { font-size: 12.5px; }
.ceny-pereimenovat-v-spiske input[type="text"] { flex: 1 1 200px; font-size: 14px; }

.ceny-pereimenovat form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.ceny-pereimenovat input[type="text"] {
  flex: 1 1 320px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--fg-1);
  font: inherit;
  font-size: 15px;
}


/* Остаток на счету сервиса. Предупреждение спокойное: работа сейчас идёт, но
   длинный список может оборваться. Красное здесь означало бы поломку. */
.ceny-ostatok {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #e5c98a;
  background: #fdf6e6;
  color: #6b4a10;
  font-size: 15px;
  line-height: 1.5;
}

.ceny-ostatok-kritichno {
  border-color: #dda0a0;
  background: #fdefef;
  color: #7a2020;
}


/* Якорь строки: место, куда возвращается человек после подтверждения
   единицы. Ничего не показывает — только держит точку перехода. */
.ceny-yakor { position: absolute; }

/* Предложение, выпадающее из ряда в разы. Приглушается, а не прячется:
   решение о цене принимает человек, сервис лишь показывает, куда смотреть. */
.ceny-vybros > td { background: #fbfbfc; opacity: .82; }

/* Комплект — три сопоставимых предложения, из которых сметчик берёт своё.
   Метка спокойная и слева: это не тревога и не решение сервиса, а указание,
   между чем именно выбирать. Приглушение выброса при этом не отменяется —
   в комплект выброс не входит по построению. */
.ceny-v-komplekte > td:first-child { box-shadow: inset 3px 0 0 #c9c9d2; }
.ceny-metka-komplekt {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 9px;
  background: color-mix(in oklch, var(--deystvie) 12%, transparent);
  font-size: 11px;
  white-space: nowrap;
}

/* Подтверждение единицы — вопрос на одно нажатие, поэтому кнопка мелкая и
   стоит РЯДОМ с ценой, о которой спрашивают. */
.ceny-edinica { margin-top: 6px; }
.ceny-edinica .btn { font-size: 13px; padding: 3px 9px; }

/* Решение человека помечается тёплым — тем же цветом, что и принятая цена. */
.ceny-vashe { color: var(--deystvie); }

/* «Беру эту цену» и выбранное предложение.

   Выбор человека — третье состояние строки предложения, рядом с обычной и
   спорной, и выглядит он иначе нарочно: золотистая полоса слева и тёплая
   заливка отличают ЕГО решение от находки сервиса. Оба факта настоящие, но
   основание у цены разное, и на экране это должно быть видно, не читая
   подписи. */
.ceny-vybrano > td {
  background: color-mix(in oklch, var(--deystvie) 9%, transparent);
}
.ceny-vybrano > td:first-child { box-shadow: inset 3px 0 0 var(--deystvie); }

.ceny-vybor { display: inline; }
.ceny-vybor-snyat { margin-top: 4px; }
.ceny-vybor-knopka {
  font: inherit;
  font-size: 12px;
  color: var(--deystvie);
  background: none;
  border: 1px solid color-mix(in oklch, var(--deystvie) 38%, transparent);
  border-radius: var(--r-sm);
  padding: 2px 8px;
  margin-top: 4px;
  cursor: pointer;
}
.ceny-vybor-knopka:hover { background: color-mix(in oklch, var(--deystvie) 10%, transparent); }
.ceny-vybor-knopka:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.ceny-vybor-vzyata {
  background: color-mix(in oklch, var(--deystvie) 16%, transparent);
  font-weight: 600;
}

/* Письмо поставщику и повтор с уточнением: обе свёрнуты, потому что нужны
   не всегда, и обе работают без скрипта. */
.ceny-pismo, .ceny-utochnit { margin-top: 8px; }
.ceny-pismo summary, .ceny-utochnit summary { cursor: pointer; font-size: 14px; }
.ceny-pismo textarea {
  width: 100%;
  margin: 6px 0;
  font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 8px;
  border: 1px solid #d7d7de;
  border-radius: 6px;
  background: #fcfcfd;
}
.ceny-utochnit input[type="text"] { width: 100%; margin: 6px 0; }

/* Предложение, пришедшее из банка найденных цен. Приглушённое нарочно: это
   не предупреждение, а происхождение — сметчик читает его, только когда сам
   спросил себя «а откуда это». */
.ceny-iz-banka {
  color: #6b7280;
  font-style: italic;
}

/* Причина, по которой спецификация не стала якорем. Отдельной строкой под общей
   фразой: за «книга битая» и «файл больше предела чтения» стоят разные
   следующие действия человека. */
.docs-otkaz {
  display: block;
  margin-top: 6px;
  color: #92400e;
}

/* Значок магазина слева от названия. Размер задан жёстко: значки приезжают
   разной величины, а строка листа не должна от этого прыгать. */
.znachok {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  object-fit: contain;
  vertical-align: -3px;
  margin-right: 6px;
}

/* Поиск по реестру «Мои подборы». Поле и кнопки одной строкой, на узком
   экране кнопки уезжают под поле — своей сетки не заводим, хватает флекса. */
.podbory-poisk {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.podbory-poisk input[type="search"] {
  flex: 1 1 260px;
  min-width: 0;
}

/* Ответ переименования: «сохраняем…» и жалоба на устаревшую форму. Живёт
   внутри формы имени и пуст, пока сказать нечего. */
.ceny-pereimenovat-otvet {
  display: inline-block;
  margin-left: 8px;
  color: var(--fg-3);
  font-size: 13px;
}
.ceny-pereimenovat-otvet:empty { display: none; }
.ceny-pereimenovat-otvet.beda { color: #92400e; }

/* «Как выбрать цель» — подробности под настройками поиска. Раскрывашка, а не
   абзац: двенадцать строк объяснения задавали высоту всему блоку ввода, и
   слева под полем списка оставалась пустая половина экрана. */
.ceny-podrobnee > summary {
  color: var(--fg-3);
  font-size: 13px;
  cursor: pointer;
}
.ceny-podrobnee > summary:hover { color: var(--fg-2); }
.ceny-podrobnee p { margin-top: 8px; }

/* Похожие товары: их показывают только там, где точного соответствия не нашли.
   Список стоит в карточке позиции, а не во всплывающем окне: на планшете он
   читается лучше, ничего не перекрывает и работает без скрипта. */
.ceny-analogi { margin-top: 8px; }
.ceny-analogi ul { margin: 6px 0 4px; padding-left: 18px; }
.ceny-analogi li { margin-bottom: 8px; }
.ceny-analogi .sub { display: block; }
.ceny-analogi form { margin-top: 4px; }