/* Просмотр публикации поверх страницы — стили ЕДИНСТВЕННОГО просмотрщика проекта.
 *
 * Раньше этот слой лежал в assets/pub-feed.css и был доступен только ленте. Теперь он
 * отдельный файл и подключается на обеих поверхностях (лента и профиль) вместе с
 * assets/pub-viewer.js. Классы и поведение не менялись — добавлены кадры видео и
 * текстового поста.
 *
 * Тёмный фон в обеих темах: содержимое читается лучше, чем на светлой подложке.
 */
/* ── Полноэкранный просмотр ────────────────────────────────────────────────
   Одна панель на страницу. Тёмный фон в обеих темах — фотография читается лучше. */
.pviewer{
  /* Выше панели комментариев (6100), нижней капсулы (5000) и шапки (5002): полноэкранный
     просмотр не должен подсвечивать сквозь себя чужие поверхности. */
  position:fixed;inset:0;left:var(--pub-work-left,0px);z-index:6200;display:flex;align-items:center;justify-content:center;
  padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));
  background:rgba(6,9,14,.94)}
.pviewer[hidden]{display:none}
/* ПОРЯДОК СЛОЁВ ЗАДАН ЯВНО. Прежде ни трек, ни кнопка закрытия z-index не имели: оба
   position:absolute с z-index:auto, и по правилам стека выигрывал тот, кто ПОЗЖЕ в
   разметке. Трек объявлен после крестика — значит фотография рисовалась поверх него,
   и закрыть просмотр на телефоне было нечем.
   Контракт: подложка < трек(1) < зоны(2) < счётчик и точки(3) < крестик(4). */
.pviewer__track{
  position:absolute;inset:0;z-index:1;display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none}
.pviewer__track::-webkit-scrollbar{display:none}
.pviewer__frame{
  flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:center;
  padding:max(12px,env(safe-area-inset-top)) 12px max(46px,env(safe-area-inset-bottom));
  box-sizing:border-box}
.pviewer__img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;border-radius:8px;
  /* Пока кадр не декодирован, элемента не видно вовсе: незагруженный <img> рисует
     строку alt-текста, и на чёрном фоне она читается как горизонтальная полоса. */
  opacity:0;transition:opacity .12s linear}
.pviewer__img.is-ready{opacity:1}
@media (prefers-reduced-motion:reduce){
  .pviewer__img{transition:none}
}
/* Кадр действительно не открылся — спокойная подпись вместо пустоты и полосы. */
.pviewer__frame.is-failed::after{
  content:'Не удалось открыть изображение';
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:8px 14px;border-radius:10px;
  background:rgba(255,255,255,.12);color:#fff;font-size:13px;white-space:nowrap}
.pviewer__frame{position:relative}
.pviewer__count{
  position:absolute;top:max(14px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  z-index:3;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.13);
  color:#fff;font-size:12px;font-variant-numeric:tabular-nums;pointer-events:none}
.pviewer__count[hidden]{display:none}
/* Те же прозрачные зоны, что и в карточке: видимых стрелок нет и здесь. */
.pviewer__zone{position:absolute;top:0;bottom:0;width:34%;z-index:2;
  border:0;padding:0;background:none;border-radius:0}
.pviewer__zone[hidden]{display:none}
.pviewer__zone--prev{left:0;cursor:w-resize}
.pviewer__zone--next{right:0;cursor:e-resize}
.pviewer__zone:focus{outline:0}
.pviewer__zone:focus-visible{outline:2px solid #fff;outline-offset:-4px}
@media (hover:none),(pointer:coarse){
  .pviewer__zone{display:none}
}
.pviewer__dots{
  position:absolute;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));z-index:3;
  display:flex;justify-content:center;gap:6px}
.pviewer__dots[hidden]{display:none}
.pviewer__dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.32)}
.pviewer__dots i.is-on{background:#fff;width:6px;height:6px}
/* Крестик — САМЫЙ ВЕРХНИЙ слой просмотра и без всякой видимой области: тонкая белая
   иконка при зоне нажатия 44×44. Отступы считают безопасные зоны сверху и справа. */
.pviewer__close{
  -webkit-appearance:none;appearance:none;position:absolute;z-index:4;
  top:max(10px,env(safe-area-inset-top));
  right:max(12px,env(safe-area-inset-right));
  width:44px;height:44px;padding:0;
  border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;
  -webkit-tap-highlight-color:transparent;
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pviewer__close svg{width:18px;height:18px;stroke-width:1.6;pointer-events:none;
  /* Тонкая иконка читается и на светлом кадре: мягкая тень вместо подложки. */
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.pviewer__close:hover,
.pviewer__close:active,
.pviewer__close:focus{background:transparent;border:0;box-shadow:none;outline:none}
.pviewer__close:active svg{transform:scale(.94)}
.pviewer__close:focus-visible::after{
  content:'';position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;
  border:1.5px solid #fff;border-radius:8px;pointer-events:none}
.pviewer__close:focus:not(:focus-visible)::after{content:none}
/* Пока просмотр открыт, страница под ним не прокручивается.
   Одного правила на body мало: в оболочке Layout 2.0 у body уже overflow:hidden, а реально
   прокручивается контейнер .dc-shell-main. Его overflow принадлежит контракту оболочки
   (assets/dc-responsive.css) — блокировка прокрутки живёт ТАМ, рядом с самим правилом,
   а не заплаткой отсюда. Здесь оставлен только общий случай для страниц без этой оболочки. */
body.pub-viewer-open{overflow:hidden}

@media (min-width:768px){
  /* Десктоп: модальный просмотр с полями, а не «во весь экран впритык». */
  .pviewer{padding:40px}
  .pviewer__img{max-width:min(1100px,92vw);max-height:88vh;box-shadow:0 24px 64px rgba(0,0,0,.5)}
}


/* ── кадр ВИДЕО ─────────────────────────────────────────────────────────────
   Плеер занимает кадр целиком по меньшей стороне, пропорции не искажаются.
   Автовоспроизведения и автозвука нет: controls отдаёт управление пользователю. */
.pviewer__video{
  max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:8px;background:#000;outline:none}
@media (min-width:768px){
  .pviewer__video{max-width:min(1100px,92vw);max-height:88vh;box-shadow:0 24px 64px rgba(0,0,0,.5)}
}

/* ── кадр ТЕКСТОВОГО ПОСТА ──────────────────────────────────────────────────
   Не картинка, а читаемая колонка: автор и дата сверху, полный текст, счётчики снизу.
   Кадр прокручивается сам, если текст длинный, — панель при этом не растёт. */
.pviewer__frame--text{align-items:flex-start;overflow-y:auto}
.pviewer__post{
  width:100%;max-width:640px;margin:auto;box-sizing:border-box;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:18px 18px 16px;color:#fff}
.pviewer__post-head{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.12)}
.pviewer__post-head b{font-size:14.5px;font-weight:600}
.pviewer__post-head time{font-size:12px;color:rgba(255,255,255,.6)}
.pviewer__post-text{
  font-size:14.5px;line-height:1.62;white-space:pre-wrap;word-break:break-word}
.pviewer__post-meta{
  margin-top:14px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12);
  font-size:12px;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
@media (max-width:420px){
  .pviewer__post{padding:14px 14px 12px;border-radius:14px}
  .pviewer__post-text{font-size:14px}
}

/* На телефоне полноэкранную карусель листают свайпом: боковые кнопки-зоны лежали
   поверх трека и перехватывали жест так же, как в карточке ленты. */
@media (hover:none),(pointer:coarse){
  .pviewer__zone{pointer-events:none}
}