/**
 * Просмотрщик PDF.
 *
 * Цвета и отступы — из токенов темы, с запасным значением: модуль обязан
 * выглядеть прилично и при теме без токенов проекта.
 *
 * Высота сцены задаётся пропорцией листа (--nn-pdf-ratio выставляет
 * скрипт по первому листу), до загрузки — 16:9, как у большинства
 * путеводителей: текст под документом не прыгает, когда лист появится.
 */

.nn-pdf {
	--nn-pdf-ratio: 16 / 9;
	margin: var(--nn-space-5, 1.5rem) 0;
	border: 1px solid var(--nn-color-border, #3a3d4d);
	border-radius: var(--nn-radius-card, 6px);
	background-color: var(--nn-color-surface, #242633);
	overflow: hidden;
}

.nn-pdf__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: var(--nn-pdf-ratio);
	/* Вертикальную прокрутку и щипок отдаём браузеру, смахивание вбок — нам. */
	touch-action: pan-y pinch-zoom;
	user-select: none;
	-webkit-user-select: none;
}

.nn-pdf__stage:focus-visible {
	outline: 2px solid var(--nn-color-focus, #ffd54f);
	outline-offset: -2px;
}

.nn-pdf__page {
	display: block;
	width: 100%;
	height: auto;
	-webkit-user-drag: none;
}

.nn-pdf__status {
	margin: 0;
	padding: var(--nn-space-4, 1rem);
	color: var(--nn-color-text-muted, #85a1bb);
	font-size: var(--nn-fs-sm, 0.85rem);
	text-align: center;
}

.nn-pdf__status[hidden] {
	display: none;
}

/* Ошибка после того, как лист уже нарисован, — плашкой поверх листа. */
.nn-pdf.is-ready .nn-pdf__status {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--nn-color-surface-2, #22242f);
}

.nn-pdf__status a {
	color: var(--nn-color-action, #2e89ff);
}

/* Панель: листание по центру, полноэкранный режим справа. */
.nn-pdf__bar {
	display: grid;
	grid-template-columns: 1fr auto auto auto 1fr;
	align-items: center;
	gap: var(--nn-space-2, 0.5rem);
	padding: var(--nn-space-2, 0.5rem) var(--nn-space-3, 0.75rem);
	border-top: 1px solid var(--nn-color-border, #3a3d4d);
	background-color: var(--nn-color-surface-2, #22242f);
}

.nn-pdf__bar [data-nn-pdf-prev] {
	grid-column: 2;
}

.nn-pdf__count {
	grid-column: 3;
	min-width: 5.5em;
	color: var(--nn-color-text, #cfd8dd);
	font-size: var(--nn-fs-sm, 0.85rem);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.nn-pdf__bar [data-nn-pdf-next] {
	grid-column: 4;
}

.nn-pdf__btn--full {
	grid-column: 5;
	justify-self: end;
}

.nn-pdf__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--nn-color-border-strong, #4f5366);
	border-radius: var(--nn-radius-sm, 4px);
	background: transparent;
	color: var(--nn-color-text, #cfd8dd);
	cursor: pointer;
	transition: color var(--nn-transition, 0.15s ease), border-color var(--nn-transition, 0.15s ease);
}

.nn-pdf__btn svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.nn-pdf__icon-close,
.nn-pdf.is-full .nn-pdf__icon-open {
	display: none;
}

.nn-pdf.is-full .nn-pdf__icon-close {
	display: block;
}

.nn-pdf__btn:hover:not(:disabled) {
	border-color: var(--nn-color-gold, #c39a51);
	color: var(--nn-color-gold, #c39a51);
}

.nn-pdf__btn:focus-visible {
	outline: 2px solid var(--nn-color-focus, #ffd54f);
	outline-offset: 2px;
}

.nn-pdf__btn:disabled {
	opacity: 0.4;
	cursor: default;
}

/* Во весь экран: настоящий полноэкранный режим и его замена на iPhone. */
.nn-pdf.is-full {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	background-color: var(--nn-color-bg, #1d1f27);
}

.nn-pdf--fake {
	position: fixed;
	inset: 0;
	z-index: 100000;
	height: 100vh;
	height: 100dvh;
}

.nn-pdf.is-full .nn-pdf__stage {
	flex: 1 1 auto;
	min-height: 0;
	aspect-ratio: auto;
}

.nn-pdf.is-full .nn-pdf__page {
	width: auto;
	max-width: 100%;
}

.nn-pdf.is-full .nn-pdf__bar {
	padding-bottom: max(var(--nn-space-2, 0.5rem), env(safe-area-inset-bottom));
}

html.nn-pdf-lock,
html.nn-pdf-lock body {
	overflow: hidden;
}