/* Карточка позиции: значок «i» рядом с названием, в карточке — фотография
   и описание из данных (app/addon-info.js).

   Отдельным файлом, а не куском styles.css: тот упёрся в 300 строк из AGENTS.md.
   Токены палитры, шрифтов и отступов те же, из :root в styles.css. */

.info{flex:0 0 auto;display:flex;align-items:center}
.info-b{width:18px;height:18px;padding:0;border:1px solid var(--border);border-radius:50%;
  background:var(--card);color:var(--muted-fg);font:600 11px/1 var(--mono);
  transition:border-color var(--fast),background-color var(--fast),color var(--fast)}
.info-b:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text)}

/* Карточка живёт в верхнем слое (popover), место ей считает app/anchor.js.
   Раньше она была absolute внутри списка допов, и overflow:clip у .app срезал
   ей низ: у фотографии пропадало 155 пикселей на всех ширинах 1280–1920.
   Отсюда position:fixed и обнулённые inset/margin — иначе браузер центрует
   popover по окну своими правилами и координаты из JS не действуют.
   z-index не нужен: верхний слой и так поверх всего. */
.info-card{position:fixed;inset:auto;margin:0;width:300px;padding:var(--s3);
  background:var(--card);color:var(--fg);border:1px solid var(--border);border-radius:6px;
  box-shadow:0 12px 32px -8px rgba(15,23,42,.28);text-align:left;white-space:normal}

.info-t{margin:0 0 var(--s2);font:600 var(--fs-md)/1.3 var(--sans);color:var(--fg)}
.info-p{margin:var(--s2) 0 0;font:400 var(--fs-sm)/1.5 var(--sans);color:var(--fg)}

/* Фотография — кнопка: открывает снимок крупно, с копированием и скачиванием
   (app/photo-view.js). Выглядит нажимаемой в покое, а не только под курсором:
   рамка, подпись с действием и курсор-палец.

   contain, а не cover: в прайсе и портретные снимки, и альбомные, и обрезать
   товар нельзя — менеджер показывает клиенту именно его. */
.info-photo{display:block;width:100%;padding:0;margin:0;text-align:left;
  border:1px solid var(--border);border-radius:4px;background:var(--card);overflow:hidden;
  transition:border-color var(--fast),background-color var(--fast)}
.info-photo:hover{border-color:var(--accent);background:var(--accent-soft)}
.info-photo img{display:block;width:100%;height:200px;object-fit:contain;background:var(--muted)}
/* Что будет по нажатию. Переносится, если не влезло: обрезать подсказку
   о действии нельзя — тогда о действии никто не узнает. */
.info-photo-t{display:block;padding:var(--s1) var(--s2);
  font:500 var(--fs-xs)/1.35 var(--mono);color:var(--accent-text)}

/* Появление: те же 150 мс, что у остальных микровзаимодействий. Анимируются
   только opacity и transform, и только на входе — карточка исчезает сразу. */
@keyframes info-in{from{opacity:0;transform:translateY(4px)}}
.info-card:popover-open{animation:info-in var(--fast)}
@media (prefers-reduced-motion:reduce){
  .info-card:popover-open{animation:none}
}