/* Просмотр документа во весь экран.
 *
 * Отдельным файлом, а не в общих стилях: блок нужен единственной странице
 * сайта, и класть его в файл, который грузит каждая страница, значит
 * платить за него везде. Общий файл держится в бюджете 20 КБ именно так.
 *
 * Родное окно браузера: Esc, подложка и удержание фокуса достаются даром,
 * дописаны крестик и клик мимо картинки. Окно тёмное в обеих темах: это
 * подложка поверх страницы, а не её поверхность.
 */
/* Фон задан и самому окну, и подложке под ним, и он почти непрозрачный:
 * при 0.85 сквозь него читался текст страницы и налезал на подпись
 * документа. Окно занимает весь экран, поэтому подложка видна только в
 * тот миг, пока окно появляется, и цвет у них обязан совпадать. */
.prosmotr { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 16px; border: 0; background: rgba(0, 0, 0, 0.94); color: #fff; }
.prosmotr::backdrop { background: rgba(0, 0, 0, 0.94); }
.prosmotr__ramka { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; pointer-events: none; }
.prosmotr__ramka a { color: #fff; pointer-events: auto; }
/* Картинка сжимается ровно настолько, насколько нужно подписи под ней:
 * жёсткий вычет высоты подписи ошибался на узком экране, где она
 * занимает три строки, и ссылка на файл уезжала за край. */
.prosmotr__img { flex: 0 1 auto; min-height: 0; max-width: 100%; object-fit: contain; border-radius: var(--radius); background: #fff; }
.prosmotr__podpis { margin: 0; color: #d7dde3; text-align: center; }
.prosmotr__zakryt { position: fixed; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; }
.prosmotr__zakryt:hover { background: rgba(0, 0, 0, 0.8); }