/* Всплывающая подсказка в листе цен (волна «дизайн поиска, второй заход»).

   Пояснение свёрнуто в одну строку-триггер: видно начало текста и значок.
   Полный текст всплывает панелью ВЕРХНЕГО СЛОЯ (`popover`): она не входит
   в поток, поэтому открытие не двигает соседние строки, а верхний слой не
   режется прокручиваемым блоком предложений (`.ceny-podstroki details`
   с `overflow-x: auto` резал бы любую абсолютную панель внутри себя).

   Позиция — якорная (`position-anchor: auto` привязывает панель к кнопке,
   открывшей её через `popovertarget`), `position-try-fallbacks` держит её
   внутри окна: переворот вверх у нижнего края и вбок у боковых. Браузер без
   якорного позиционирования показывает ту же панель по центру окна —
   подсказка остаётся читаемой, только менее привязанной. */

/* `contain: inline-size` — единственное, что отличает подсказку от обычной
   строки: строчный текст в одну строку (`nowrap`) вносил бы в колонку свою
   ПОЛНУЮ ширину как min-content, и лист разъезжался бы за край шелла (замер
   22.09.2026: `ceny-list` дорос до 3170 px при шелле 1680). С изоляцией
   размера пояснение вносит 0 — колонка держится на остальном содержимом, а
   строка всё равно рисуется во всю её ширину. */
.podskazka { display: block; margin-top: 2px; contain: inline-size; }

/* Кнопка выглядит как прежняя строка пояснения: классы `.sub`,
   `.ceny-rashozhdenie` и соседи несёт она же, поэтому почерк и тревожный
   значок «⚠» (первая буква) сохраняются. Отличие одно: текст зажат в одну
   строку, а в конце стоит значок «ещё есть». */
.podskazka-knopka {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.podskazka-vid {
  display: inline-block;
  max-width: calc(100% - 1.8em);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.podskazka-i {
  margin-left: 5px;
  color: var(--fg-3);
  font-size: .82em;
}
.podskazka-knopka:hover .podskazka-i,
.podskazka-knopka:focus-visible .podskazka-i { color: var(--accent-ink); }
.podskazka-knopka:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}

/* Панель с полным текстом. `position-area` и якорь — единственное место:
   все подсказки листа позиционируются одним правилом. */
.podskazka-panel {
  position-anchor: auto;
  position-area: bottom;
  justify-self: anchor-center;
  position-try-fallbacks: flip-block, flip-inline;
  width: max-content;
  max-width: min(26rem, calc(100vw - 32px));
  max-height: min(24rem, 70vh);
  overflow: auto;
  margin: 6px 0 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--bd-2);
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: var(--sh-2);
  color: var(--fg-1);
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}