/* Окно просмотра картинок и роликов во весь экран — PictureViewer (static/js/v2/picture-tool.js). Отдельным файлом и на
   всех страницах (base.html), потому что окно открывают не только «Картинки»: варианты образа «Аватара» тоже
   (владелец 30.09.2026: «проблема с фото в модальном окне — оно где-то внизу и не оформлено»). Раньше правила лежали в
   pictures.css и на страницах без неё окно было без оформления. */
/* Просмотр во весь экран (PictureViewer): тёмный слой выше плеера и окон, картинка по центру «вписана» */
html.is-lb { overflow: hidden; }
.pview-lb { position: fixed; inset: 0; z-index: 90; background: rgb(6 7 12 / 0.94); color: #fff; }
.pview-lb__stage { position: absolute; inset: 56px 0 16px; display: grid; place-items: center; touch-action: pan-y; cursor: grab; user-select: none; }
.pview-lb__stage:active { cursor: grabbing; }
/* Вписать в экран (владелец 27.09.2026: «при просмотре картинок они не подгоняются под экран»): предел от окна,
   а не 100 % ячейки — у неявной строки сетки высоты нет, и крупная картинка вылезала за экран */
.pview-lb__stage img { width: auto; height: auto; max-width: calc(100vw - 32px); max-height: calc(100dvh - 72px); object-fit: contain; border-radius: 8px; transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1); -webkit-user-drag: none; }
.pview-lb__top { position: absolute; top: 8px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; }
.pview-lb__n { margin-right: auto; font: 700 14px/1 var(--f); opacity: 0.8; }
.pview-lb__btn, .pview-lb__nav { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.12); color: #fff; cursor: pointer; text-decoration: none; }
.pview-lb__btn b { font: 800 italic 18px/1 Georgia, serif; }
.pview-lb__btn[hidden] { display: none; }
.pview-lb__btn .ic, .pview-lb__nav .ic { width: 20px; height: 20px; }
.pview-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.pview-lb__nav--prev { left: 12px; }
.pview-lb__nav--next { right: 12px; }
.pview-lb__nav--next .ic { transform: scaleX(-1); }
.pview-lb__nav:disabled { opacity: 0.25; cursor: default; }
@media (hover: hover) and (pointer: fine) { .pview-lb__btn:hover, .pview-lb__nav:not(:disabled):hover { background: rgb(255 255 255 / 0.24); } }
@media (max-width: 700px) { .pview-lb__nav { display: none; } }   /* на телефоне листают пальцем */
/* Плеер занимает область просмотра независимо от исходного разрешения ролика;
   иначе низкое разрешение файла оставляет маленькое видео в большом окне. */
.pview-lb__stage video { width: calc(100vw - 32px); height: calc(100dvh - 72px); object-fit: contain; border-radius: 8px; background: #000; }
.pview-lb__stage video[hidden], .pview-lb__stage img[hidden] { display: none; }
/* «Как создано» в окне просмотра (PictureViewer.made, 30.09.2026): панель внизу слева поверх тёмного слоя; свёртывается */
.pview-lb__made { position: absolute; left: 12px; bottom: 12px; z-index: 2; width: min(360px, calc(100vw - 24px)); max-height: 45dvh;
  overflow: auto; overscroll-behavior: contain; padding: 12px 14px; border-radius: 14px; background: rgb(18 20 30 / 0.88);
  backdrop-filter: blur(8px); font-size: 13px; line-height: 1.35; }
.pview-lb__made[hidden] { display: none; }
.pview-lb__made summary { cursor: pointer; font-weight: 800; font-size: 14px; list-style-position: inside; }
.pview-lb__made dl { display: grid; gap: 6px; margin: 10px 0; }
.pview-lb__made dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; }
.pview-lb__made dt { opacity: 0.65; }
.pview-lb__made dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .pview-lb__made { max-height: 38dvh; } .pview-lb__made dl > div { grid-template-columns: 90px minmax(0, 1fr); } }