/* Окно просмотра фотографии: открыть крупно, скопировать, скачать
   (app/photo-view.js).

   Отдельным файлом, а не куском styles.css: тот упёрся в 300 строк из AGENTS.md.
   Все цвета, кегли и отступы — токены из :root в styles.css, своих здесь нет.

   Окно — родной <dialog> в верхнем слое, поэтому ни одного z-index: он лежит
   поверх всего по определению, и выдумывать ему число незачем. */

/* Подложка. Экран за окном плотный: смета, карта, список допов — и он должен
   перестать соперничать с фотографией, иначе крупный показ не крупный.
   55% — середина рекомендованного диапазона 40–60% (ui-ux-pro-max, scrim). */
.pv::backdrop{background:rgba(15,23,42,.55)}

/* display у самого .pv не задаётся: у закрытого <dialog> он none от браузера,
   и любое display в обычном правиле открыло бы окно навсегда. Поэтому раскладка
   висит на [open]. Ширина фиксированная: окно не должно прыгать в размерах
   от того, портретная фотография в нём или альбомная. */
.pv{width:min(720px,92vw);max-height:90vh;padding:0;
  border:1px solid var(--border);border-radius:6px;
  background:var(--card);color:var(--fg);
  box-shadow:0 24px 48px -12px rgba(15,23,42,.45)}
.pv[open]{display:flex;flex-direction:column}

/* Шапка: название позиции и закрытие. */
.pv-head{display:flex;align-items:flex-start;gap:var(--s2);
  padding:var(--s3);border-bottom:1px solid var(--border)}
/* Название переносится, а не обрезается: менеджер зачитывает его клиенту,
   и «Автомат проветривания термо…» ему не годится. anywhere — на случай
   длинного слова без пробелов: оно не должна распирать окно.
   min-width:0 обязателен, иначе гибкая ячейка не сжимается меньше текста. */
.pv-t{flex:1;min-width:0;margin:0;font:600 var(--fs-lg)/1.3 var(--sans);
  color:var(--fg);overflow-wrap:anywhere}

/* Закрытие. Размер по --row (36px): значок без подписи должен быть удобной
   целью, а не 18-пиксельным крестиком. Подпись у него есть — aria-label. */
.pv-x{flex:0 0 auto;display:grid;place-items:center;
  width:var(--row);height:var(--row);padding:0;
  border:1px solid var(--border);border-radius:5px;
  background:var(--card);color:var(--muted-fg);
  transition:background-color var(--fast),color var(--fast),border-color var(--fast)}
.pv-x:hover{background:var(--muted);color:var(--fg);border-color:var(--muted-fg)}
.pv-x:active{transform:translateY(1px)}
.pv-x svg{width:18px;height:18px}

/* Фотография. Высота задана заранее, чтобы окно не дёргалось, пока файл
   грузится, и не менялось от следующей фотографии (CLS). contain — потому что
   в прайсе и портретные, и альбомные снимки, и обрезать товар нельзя.
   min-height:0 разрешает сжаться на низком окне, не выдавив кнопки за экран. */
.pv-img{flex:1 1 auto;min-height:0;display:block;width:100%;
  height:min(56vh,480px);object-fit:contain;background:var(--muted)}

/* Подвал: копирование, скачивание, откуда взято. */
.pv-foot{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  padding:var(--s3);border-top:1px solid var(--border);background:#FCFDFE}

.pv-btn{display:inline-flex;align-items:center;gap:var(--s2);
  height:var(--row);padding:0 var(--s4);
  border:1px solid var(--border);border-radius:5px;
  background:var(--card);color:var(--fg);font:600 var(--fs-md)/1 var(--sans);
  transition:background-color var(--fast),color var(--fast),border-color var(--fast)}
.pv-btn svg{width:17px;height:17px;flex:0 0 auto}
.pv-btn-t{white-space:nowrap}
.pv-btn:hover:not(:disabled){background:var(--muted);border-color:var(--muted-fg)}
.pv-btn:active:not(:disabled){transform:translateY(1px)}

/* Главное действие окна — отправить фотографию клиенту, поэтому «Скопировать
   фото» с заливкой, а «Скачать» контуром: одно главное действие на экран.
   Заливка --accent-text, а не --accent: белым по --accent выходит 3,77:1 —
   мало для подписи в 13 px. По --accent-text 5,48:1. */
.pv-btn-main{border-color:var(--accent-text);background:var(--accent-text);color:#fff}
.pv-btn-main:hover:not(:disabled,.done,.bad){background:var(--accent-text);
  border-color:var(--accent-text);color:#fff;box-shadow:0 0 0 3px var(--accent-soft)}

/* Состояния копирования. Смысл несёт подпись на самой кнопке, цвет только
   помогает: «Скопировано» и «Буфер недоступен — скачайте» читаются и без него. */
.pv-btn.busy{background:var(--muted);border-color:var(--border);
  color:var(--muted-fg);box-shadow:none;cursor:progress}
.pv-btn.done{background:var(--accent-soft);border-color:var(--accent);
  color:var(--accent-text);box-shadow:none}
.pv-btn.bad{background:#FEF2F2;border-color:var(--danger);
  color:var(--danger);box-shadow:none}

/* Появление: 150 мс, ease-out, входит снизу — то же, что у остальных
   микровзаимодействий (--fast). Анимируются только opacity и transform. */
@keyframes pv-in{from{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes pv-fade{from{opacity:0}}
.pv[open]{animation:pv-in var(--fast)}
.pv[open]::backdrop{animation:pv-fade var(--fast)}

/* Кому движение мешает — окно просто появляется. Заодно снимаем сдвиг кнопок
   при нажатии: он тоже движение, хоть и на один пиксель. */
@media (prefers-reduced-motion:reduce){
  .pv[open],.pv[open]::backdrop{animation:none}
  .pv-btn:active:not(:disabled),.pv-x:active{transform:none}
}

/* Низкое окно (ноутбук с открытой консолью): фотография отдаёт высоту первой,
   кнопки и название остаются на месте. */
@media (max-height:620px){
  .pv-img{height:44vh}
}