/* ─── Full-screen image viewer ───────────────────────────────────────────────
   Above the reader (z-index 80) and its panels (90), because it's opened from
   inside the page you're reading and nothing should sit over it. */
image-viewer {
	position: fixed;
	inset: 0;
	z-index: 100;
	visibility: hidden;
	background: rgba(0, 0, 0, 0.92);
	opacity: 0;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

image-viewer[open] {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

/* touch-action: none hands every gesture to the pointer handlers — without it
   the browser claims the drag for scrolling and the pan never fires. */
.viewer-stage {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
	touch-action: none;

	& .viewer-img {
		cursor: zoom-in;
	}

	&.is-zoomed,
	&.is-zoomed .viewer-img {
		cursor: zoom-out;
	}
}

.viewer-img {
	max-width: 100%;
	max-height: 100%;
	/* The transform is written directly by the component during a gesture, so
	   there's no transition here — one would fight every frame of a pinch. */
	transform-origin: center center;
	user-select: none;
	-webkit-user-drag: none;
}

.viewer-close {
	position: absolute;
	top: calc(var(--space-s) + env(safe-area-inset-top, 0px));
	inset-inline-end: var(--space-s);
	width: 40px;
	height: 40px;
	padding: 0;
}

/* Sits above the buttons, out of the picture's way. Says the same thing on
   every enhanced image rather than trying to guess which ones contain text —
   an upscaler renders invented lettering as crisply as real lettering, and a
   picture that no longer looks uncertain has stopped telling the truth. */
.viewer-caveat {
	position: absolute;
	bottom: calc(var(--space-l) + 44px + env(safe-area-inset-bottom, 0px));
	left: 50%;
	transform: translateX(-50%);
	width: min(420px, calc(100% - 2 * var(--space-m)));
	margin: 0;
	text-align: center;
	font: var(--font-body-small-regular);
	color: rgba(255, 255, 255, 0.72);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.viewer-actions {
	position: absolute;
	bottom: calc(var(--space-l) + env(safe-area-inset-bottom, 0px));
	left: 50%;
	transform: translateX(-50%);
	display: grid;
	grid-auto-flow: column;
	gap: var(--space-xs);
}

/* Wide enough that the label swapping between Enhance / Enhanced / Original
   doesn't make the row jump, and that the loading spinner has somewhere to sit
   once the text is hidden. */
.viewer-enhance {
	min-width: 120px;
}

/* The tap target in the book: a picture you can open reads as one. */
.reader-stage .epub-image-hint {
	cursor: zoom-in;
}