/* ==========================================================================
   Sheet viewer (viewer.js): the trigger over a preview and the full-screen dialog.
   Sits on the theme's tokens and components (.btn, .btn-download, .btn-tag); every token has a fallback so the
   file also works on its own. The sheet is the hero: thin paper bars top and bottom, the sheet's own tinted,
   dotted pad everywhere else (painted by the script to continue the picture's baked pad).
   ========================================================================== */

/* ---------- trigger: the whole picture, a plus-in-circle in its corner ---------- */
.rpv-host { position: relative; }
.rpv-trigger {
	position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; margin: 0; padding: 0;
	color: var(--ink, #1d1b16); background: transparent; border: 0; border-radius: 0; box-shadow: none;
	cursor: zoom-in; -webkit-tap-highlight-color: transparent;
}
.rpv-trigger:hover, .rpv-trigger:focus { background: transparent; color: var(--ink, #1d1b16); transform: none; box-shadow: none; }
.rpv-trigger:focus-visible { outline: 3px solid var(--accent, #f26b2b); outline-offset: -3px; border-radius: 2px; }
.rpv-trigger__badge {
	position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: .35rem;
	height: 36px; min-width: 36px; padding: 0 8px; justify-content: center;
	font-family: var(--font-body, system-ui, sans-serif); font-size: .85rem; font-weight: 800; line-height: 1; white-space: nowrap;
	color: var(--ink, #1d1b16); background: var(--card, #fdfcf8);
	border: 1.5px solid var(--ink, #1d1b16); border-radius: 999px; box-shadow: 2px 2px 0 var(--ink, #1d1b16);
	pointer-events: none;
}
.rpv-trigger__badge svg { flex: none; width: 18px; height: 18px; margin: 0 -1px; }
.rpv-trigger__text { display: none; }
@media (hover: hover) and (pointer: fine) {
	.rpv-trigger:hover .rpv-trigger__badge, .rpv-trigger:focus-visible .rpv-trigger__badge {
		padding: 0 12px 0 9px; background: var(--highlight, #ffe36e); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink, #1d1b16);
	}
	.rpv-trigger:hover .rpv-trigger__text, .rpv-trigger:focus-visible .rpv-trigger__text { display: inline; }
}

/* ---------- page under the open viewer: no scroll, no shift ---------- */
.rpv-locked, .rpv-locked body { overflow: hidden; }
.rpv-locked body { padding-right: var(--rpv-gap, 0px); }

/* ---------- the dialog: top bar, stage, bottom bar ---------- */
.rpv {
	--rpv-fade: 1; --rpv-ms: 220ms; --rpv-ease: cubic-bezier(.2, .7, .2, 1);
	position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
	color: var(--ink, #1d1b16); background: transparent; border: 0; overflow: hidden; overscroll-behavior: contain;
	font-family: var(--font-body, system-ui, sans-serif);
}
@supports (height: 100dvh) { .rpv { height: 100dvh; } }
.rpv[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
.rpv::backdrop { background: transparent; }
.rpv:focus { outline: none; }
.rpv [hidden] { display: none !important; }
.rpv-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rpv :focus-visible { outline: 3px solid var(--accent, #f26b2b); outline-offset: 2px; }

.rpv__bar { position: relative; z-index: 2; background: var(--paper, #f6f3ea); opacity: var(--rpv-fade); }
.rpv__top {
	display: flex; align-items: center; gap: .75rem; min-height: 54px;
	padding: max(5px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 5px max(14px, env(safe-area-inset-left));
	border-bottom: 1.5px solid var(--ink, #1d1b16);
}
.rpv__label { flex: 1; display: flex; align-items: baseline; gap: .65rem; min-width: 0; margin: 0; line-height: 1.25; }
.rpv__swatch {
	flex: none; align-self: center; width: 14px; height: 14px;
	background: var(--rpv-swatch, transparent); border: 1.5px solid var(--ink, #1d1b16); border-radius: 3px;
}
.rpv__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; font-weight: 800; }
.rpv__count { flex: none; font-family: var(--font-mono, ui-monospace, monospace); font-size: .75rem; font-weight: 600; color: var(--muted, #5f5b52); }
.rpv__close, .rpv__nav, .rpv__pstep {
	flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
	color: var(--ink, #1d1b16); background: var(--card, #fdfcf8);
	border: 1.5px solid var(--ink, #1d1b16); border-radius: var(--radius, 6px); box-shadow: 2px 2px 0 var(--ink, #1d1b16);
	cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.rpv .rpv__close:focus, .rpv .rpv__nav:focus, .rpv .rpv__pstep:focus, .rpv .rpv__pip:focus, .rpv .rpv__thumb:focus { color: var(--ink, #1d1b16); }
.rpv .rpv__close:focus, .rpv .rpv__nav:focus, .rpv .rpv__pstep:focus { background: var(--card, #fdfcf8); }
.rpv .rpv__pip:focus, .rpv .rpv__pip:hover { background: transparent; }
.rpv .rpv__thumb:focus, .rpv .rpv__thumb:hover { background: #fff; }
.rpv .rpv__close:hover, .rpv .rpv__nav:hover, .rpv .rpv__pstep:hover { background: var(--highlight, #ffe36e); }
.rpv__close:active, .rpv__nav:active, .rpv__pstep:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink, #1d1b16); }

/* stage: the sheet's pad, drawn by the script (tint + dots that line up with the picture's own) */
.rpv__stage { position: relative; z-index: 1; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.rpv__stage:active { cursor: grabbing; }
.rpv--flying .rpv__stage { overflow: visible; }
.rpv__ground { position: absolute; inset: -2px; background-color: var(--paper, #f6f3ea); background-repeat: repeat; opacity: var(--rpv-fade); }
.rpv__move { position: absolute; inset: 0; }
.rpv__layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.rpv__layer.is-vector { will-change: auto; } /* SVG: no cached bitmap; the sheet is redrawn at its real size */
.rpv__img { display: block; max-width: none; height: auto; pointer-events: none; -webkit-user-drag: none; user-select: none; }
/* an SVG page (tool previews): white sheet, ink border, stamp; drawn at the page's own size in points, so the
   border and stamp scale with it (about 1.5 px and 3 px at the fitted size) */
.rpv__sheet { --rpv-k: 1; position: relative; background: #fff; outline: calc(2.5px * var(--rpv-k)) solid var(--ink, #1d1b16); box-shadow: calc(5px * var(--rpv-k)) calc(5px * var(--rpv-k)) 0 var(--ink, #1d1b16); }
.rpv__svg { display: block; width: 100%; height: 100%; }

/* variant arrows (wide screens; phones swipe) and pips */
.rpv__nav { position: absolute; top: 50%; z-index: 1; width: 48px; height: 48px; margin-top: -41px; box-shadow: 3px 3px 0 var(--ink, #1d1b16); opacity: var(--rpv-fade); }
.rpv__nav--prev { left: max(16px, env(safe-area-inset-left)); }
.rpv__nav--next { right: max(16px, env(safe-area-inset-right)); }
.rpv__nav:disabled { visibility: hidden; }
@media (max-width: 699.98px), (hover: none) and (pointer: coarse) { .rpv__nav { display: none; } }

.rpv__pips { position: absolute; left: 50%; bottom: 4px; z-index: 1; display: flex; transform: translateX(-50%); opacity: var(--rpv-fade); }
.rpv__pip { display: grid; place-items: center; width: 26px; height: 26px; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.rpv__pip::before {
	content: ""; width: 10px; height: 10px; border-radius: 50%;
	background: var(--card, #fdfcf8); border: 1.5px solid var(--ink, #1d1b16); transition: transform .12s ease;
}
.rpv__pip.has-swatch::before { background: var(--rpv-pip); }
.rpv__pip[aria-current="true"]::before { transform: scale(1.35); box-shadow: 0 0 0 2px var(--card, #fdfcf8), 0 0 0 3.5px var(--ink, #1d1b16); }
.rpv__pip:not(.has-swatch)[aria-current="true"]::before { background: var(--ink, #1d1b16); }
.rpv__pip:hover::before { transform: scale(1.2); }

/* bottom bar: pages strip (multi-page files), Download (+ Print) */
.rpv__bottom {
	padding: 10px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
	border-top: 1.5px solid var(--ink, #1d1b16);
}
.rpv__bottom > * { max-width: 760px; margin-inline: auto; }
.rpv__pages { display: flex; align-items: center; gap: .4rem; margin-bottom: 10px; }
.rpv__pstep { width: 40px; height: 48px; box-shadow: none; }
.rpv__pstep:disabled { opacity: .35; cursor: default; background: var(--card, #fdfcf8); }
.rpv__pagelist {
	flex: 1; display: flex; gap: 6px; min-width: 0; margin: 0; padding: 3px 4px 6px; list-style: none;
	overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; touch-action: pan-x;
}
.rpv__pagelist > li { flex: none; margin: 0; }
.rpv__thumb {
	position: relative; display: block; width: 40px; margin: 0; padding: 0; overflow: hidden;
	background: #fff; border: 1.5px solid var(--rule, #cfc9ba); border-radius: 3px; cursor: pointer;
}
.rpv__thumb:hover { border-color: var(--ink, #1d1b16); }
.rpv__thumb[aria-current="page"] { border-color: var(--ink, #1d1b16); box-shadow: 2px 2px 0 var(--ink, #1d1b16); }
.rpv__thumb-pic { position: relative; display: block; width: 100%; aspect-ratio: 612 / 792; overflow: hidden; }
.rpv__thumb-pic img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.rpv__thumb-pic img.is-cropped { height: auto; object-fit: fill; }
.rpv__thumb-svg { display: block; width: 100%; height: 100%; }
.rpv__thumb-n {
	position: absolute; right: 2px; bottom: 2px; padding: 0 3px;
	font-family: var(--font-mono, ui-monospace, monospace); font-size: .6rem; font-weight: 600; line-height: 1.35;
	color: var(--ink, #1d1b16); background: var(--card, #fdfcf8); border-radius: 2px;
}
.rpv__thumb[aria-current="page"] .rpv__thumb-n { background: var(--highlight, #ffe36e); }

.rpv__actions { display: flex; gap: .6rem; }
.rpv .rpv__dl {
	flex: 1 1 auto; flex-wrap: wrap; row-gap: .35rem; min-width: 0; min-height: 52px; justify-content: center;
	font-size: 1.05rem;
}
.rpv .rpv__dl svg, .rpv .rpv__print svg { flex: none; width: 20px; height: 20px; }
.rpv__dl-text { white-space: nowrap; }
.rpv__tags { display: inline-flex; gap: .3rem; min-width: 0; max-width: 100%; }
.rpv__tags .btn-tag { flex: 0 1 auto; color: var(--ink, #1d1b16); }
.rpv .rpv__print { flex: none; min-height: 52px; color: var(--ink, #1d1b16); background: var(--card, #fdfcf8); }
.rpv .rpv__print:hover, .rpv .rpv__print:focus { background: var(--highlight, #ffe36e); }
@media (max-width: 420px) { .rpv .rpv__print span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* ---------- motion: answers to the visitor only (open, close, zoom, settle) ---------- */
.rpv--anim .rpv__layer { transition: transform var(--rpv-ms) var(--rpv-ease); }
.rpv--anim .rpv__ground { transition: background-size var(--rpv-ms) var(--rpv-ease), background-position var(--rpv-ms) var(--rpv-ease), opacity var(--rpv-ms) linear; }
.rpv--anim .rpv__bar, .rpv--anim .rpv__nav, .rpv--anim .rpv__pips { transition: opacity var(--rpv-ms) linear; }
.rpv--leaving .rpv__layer { opacity: var(--rpv-fade); transition: transform var(--rpv-ms) var(--rpv-ease), opacity var(--rpv-ms) linear; }
@media (prefers-reduced-motion: reduce) {
	.rpv *, .rpv-trigger__badge { transition: none !important; animation: none !important; }
	.rpv .btn:hover, .rpv .btn:focus, .rpv .btn:active { transform: none; }
}