/* Живое ожидание на экране «Найти цену» (ОС Эда 16.10.2026, макеты P2 и P4).
   Эд: «почему нет микроанимации загрузки? ощущение, что ничего не происходит».
   Здесь — общие детали ожидания (кружок, мерцающая заготовка, бегущие точки,
   тонкая полоса хода) и их места в строке листа и в панели файлов. Плашка хода
   в шапке — в `shapka2.css`, живые числа — `ceny_ozhidanie.js`.
   Всё движение выключается, когда человек попросил систему двигаться меньше. */

/* Кружок «работаем»: тонкое кольцо цвета акцента с бегущим краем. */
.zh-krug {
  display: inline-block;
  flex: none;
  width: 13px;
  height: 13px;
  margin-right: 7px;
  vertical-align: -2px;
  border: 2px solid color-mix(in oklch, var(--accent) 28%, transparent);
  border-top-color: var(--accent-ink);
  border-radius: 50%;
  animation: zh-vrashchenie .8s linear infinite;
}
@keyframes zh-vrashchenie { to { transform: rotate(360deg); } }

/* Заготовка будущего текста: серая полоска с бликом, который проходит слева направо. */
.zh-skelet {
  display: block;
  width: 88%;
  height: 10px;
  margin: 6px 0;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--sunken) 0%, color-mix(in oklch, var(--accent) 16%, var(--sunken)) 45%, var(--sunken) 90%);
  background-size: 220% 100%;
  animation: zh-blik 1.4s ease-in-out infinite;
}
.zh-skelet-korotkiy { width: 60%; }
.zh-skelet-cena { width: 42%; height: 16px; margin-top: 10px; }
@keyframes zh-blik { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* «Ищем…»: многоточие — один знак, он открывается по точке шагами по ширине.
   Текст ячейки остаётся «Ищем…» и для читалки экрана, и для копирования. */
.zh-tochki {
  display: inline-block;
  width: 1em;
  overflow: hidden;
  vertical-align: bottom;
  animation: zh-tochki 1.2s steps(4, jump-none) infinite;
}
@keyframes zh-tochki { from { width: 0; } to { width: 1em; } }

/* Тонкая полоса хода с бегущим бликом. */
.zh-polosa {
  position: relative;
  display: inline-block;
  flex: 0 1 160px;
  width: 160px;
  min-width: 48px;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--sunken);
}
.zh-polosa-zalivka { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width .6s ease; }
.zh-polosa::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--paper) 70%, transparent), transparent);
  transform: translateX(-100%);
  animation: zh-beg 1.8s ease-in-out infinite;
}
@keyframes zh-beg { to { transform: translateX(100%); } }

/* P2: «Проверяем страницу магазина» на месте цены — акцентом, с кружком, под ним
   мерцает место будущей цены (ячейка `.bt-cena` — гибкая строка с переносом). */
.bt-cena .bt-proveryaem {
  display: inline-flex;
  flex: 1 0 100%;
  align-items: center;
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 550;
}
.bt-cena .zh-skelet-cena { flex: 0 0 42%; margin: 8px 0 4px; }
/* Пока цены не видно, пометки о ней («Цена прочитана … · Проверьте цену») не показываем:
   в ячейке только кружок, слова и заготовка (макет P2). У видимой цены они остаются. */
.bt-cena:has(> .bt-proveryaem) > .bt-pometki { display: none; }

/* P2: ход съёмки в панели файлов — кружок, слова и тонкая полоса одной группой. */
.bt-pdf-hod { display: inline-flex; flex: 1 1 320px; align-items: center; gap: 4px 10px; min-width: 0; }
.bt-pdf-hod .zh-krug { margin-right: 0; }
.bt-pdf-hod .bt-pdf-slova { flex: 0 1 auto; }

/* P4: позиция, которая ищется прямо сейчас, — полоса слева и тёплый фон. */
.bt-stroka.bt-seychas { background: color-mix(in oklch, var(--accent) 6%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.bt-ishchem-seychas { display: block; margin-bottom: 2px; color: var(--accent-ink); font-size: 13.5px; font-weight: 600; }
.bt-shag-stroki { margin-left: 4px; color: var(--fg-3); font-size: 12px; font-weight: 450; overflow-wrap: anywhere; }
/* Ждущая позиция — одна тихая надпись вместо трёх «Ищем…». */
.bt-ochered { color: var(--fg-3); font-size: 12.5px; }

/* На телефоне ячейки идут столбиком: одной заготовки ищущейся строки хватает,
   три подряд растягивали её на полтора экрана. */
@media (max-width: 900px) {
  .bt-stroka.bt-seychas .bt-pusto ~ .bt-pusto { display: none; }
}

/* На телефоне слова панели файлов спрятаны (`ceny_bibliya.css`): остаются кружок и полоса. */
@media (max-width: 480px) {
  .bt-pdf-hod { flex: 1 1 auto; }
  .bt-pdf-hod .zh-polosa { flex: 1 1 auto; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .zh-krug, .zh-skelet, .zh-tochki, .zh-polosa::after { animation: none; }
  .zh-tochki { width: auto; }
  .zh-polosa-zalivka { transition: none; }
}