/* 3 Panel Roll-fold PDF Viewer */
.rfb {
	--rfb-accent: #2271b1;
	--rfb-bg: radial-gradient(ellipse at 50% 42%, #3b3e46 0%, #24262b 55%, #18191c 100%);
	--rfb-fg: #e9eaee;
	--rfb-muted: rgba(233, 234, 238, .62);
	--rfb-btn: rgba(255, 255, 255, .08);
	--rfb-btn-hover: rgba(255, 255, 255, .16);
	--rfb-line: rgba(255, 255, 255, .12);
	--rfb-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 3px 8px rgba(0, 0, 0, .35);
	position: relative;
	display: block;
	margin: 1.5em 0;
	border-radius: 12px;
	overflow: hidden;
	background: var(--rfb-bg);
	color: var(--rfb-fg);
	font: 500 14px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	-webkit-tap-highlight-color: transparent;
}
.rfb--light {
	--rfb-bg: radial-gradient(ellipse at 50% 42%, #ffffff 0%, #eef0f3 60%, #e2e5ea 100%);
	--rfb-fg: #1d2127;
	--rfb-muted: rgba(29, 33, 39, .6);
	--rfb-btn: rgba(0, 0, 0, .05);
	--rfb-btn-hover: rgba(0, 0, 0, .1);
	--rfb-line: rgba(0, 0, 0, .1);
	--rfb-shadow: 0 16px 34px rgba(20, 25, 35, .22), 0 2px 6px rgba(20, 25, 35, .18);
}
.rfb *, .rfb *::before, .rfb *::after { box-sizing: border-box; }

/* no-JS fallback */
.rfb-fallback { padding: 2em; text-align: center; }
.rfb-fallback a { color: inherit; }
.rfb--js .rfb-fallback { display: none; }

/* stage */
.rfb-stage {
	position: relative;
	width: 100%;
	height: var(--rfb-h, auto);
	aspect-ratio: var(--rfb-ar, 2.1);
	min-height: 380px;
	max-height: 86vh;
	outline: none;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	cursor: pointer;
	overflow: hidden;
}
.rfb-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--rfb-accent); }
.rfb--failed .rfb-stage { cursor: default; }

.rfb-scene {
	position: absolute;
	inset: 0;
	perspective-origin: 50% 50%;
}
.rfb-world {
	position: absolute;
	left: 0;
	top: 0;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	opacity: 0;
	transition: opacity .4s ease;
}
.rfb--ready .rfb-world { opacity: 1; }

.rfb-panel {
	position: absolute;
	top: 0;
	height: 100%;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}
.rfb-l { transform-origin: 100% 50%; z-index: 2; }
.rfb-r { transform-origin: 0 50%; z-index: 1; }

.rfb-face {
	position: absolute;
	inset: 0;
	background: #fff;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-shadow: var(--rfb-shadow);
	overflow: hidden;
}
.rfb-back { transform: rotateY(180deg); }
.rfb-img {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.rfb-hi {
	position: absolute;
	display: block;
}
/* at rest the scene is flat and pixel-aligned: no perspective resampling */
.rfb--rest .rfb-scene { perspective: none !important; }
.rfb--zoomed .rfb-stage { cursor: grab; touch-action: none; }
.rfb--zoomed .rfb-stage:active { cursor: grabbing; }

/* soft crease shading at the folds */
.rfb-face::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.rfb-l .rfb-front::after { background: linear-gradient(to left, rgba(0,0,0,.16), rgba(0,0,0,0) 5%); }
.rfb-m .rfb-front::after { background: linear-gradient(to right, rgba(0,0,0,.10), rgba(0,0,0,0) 4%, rgba(0,0,0,0) 96%, rgba(0,0,0,.10)); }
.rfb-r .rfb-front::after { background: linear-gradient(to right, rgba(0,0,0,.16), rgba(0,0,0,0) 5%); }
.rfb-l .rfb-back::after  { background: linear-gradient(to right, rgba(0,0,0,.08), rgba(0,0,0,0) 3%); }
.rfb-m .rfb-back::after  { background: linear-gradient(to right, rgba(0,0,0,.06), rgba(0,0,0,0) 3%, rgba(0,0,0,0) 97%, rgba(0,0,0,.06)); }
.rfb-r .rfb-back::after  { background: linear-gradient(to left, rgba(0,0,0,.08), rgba(0,0,0,0) 3%); }

.rfb--still .rfb-world,
.rfb--still .rfb-panel { transition: none !important; }

/* status / hint */
.rfb-status {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 24px;
	text-align: center;
	color: var(--rfb-muted);
	pointer-events: none;
}
.rfb-status[hidden] { display: none; }
.rfb-spinner {
	width: 22px;
	height: 22px;
	flex: none;
	border-radius: 50%;
	border: 2px solid var(--rfb-line);
	border-top-color: var(--rfb-accent);
	animation: rfb-spin .8s linear infinite;
}
.rfb-status--error { color: var(--rfb-fg); }
.rfb-status--error .rfb-spinner { display: none; }
@keyframes rfb-spin { to { transform: rotate(360deg); } }

.rfb-hint {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translate(-50%, 8px);
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: 12.5px;
	letter-spacing: .01em;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease, transform .35s ease;
}
.rfb-hint--show { opacity: 1; transform: translate(-50%, 0); }

/* control bar */
.rfb-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 14px;
	padding: 10px 12px 12px;
	border-top: 1px solid var(--rfb-line);
}
.rfb-group {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.rfb .rfb-pct {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--rfb-muted);
	font: inherit;
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	min-width: 46px;
	height: 32px;
	padding: 0 4px;
	border-radius: 8px;
	cursor: pointer;
}
.rfb .rfb-pct:hover:not(:disabled) { color: var(--rfb-fg); background: var(--rfb-btn); }
.rfb .rfb-pct:focus-visible { outline: 2px solid var(--rfb-accent); outline-offset: 2px; }
.rfb-steps {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.rfb-steps::-webkit-scrollbar { display: none; }

.rfb .rfb-btn,
.rfb .rfb-step {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	border: 0;
	font: inherit;
	color: inherit;
	background: var(--rfb-btn);
	cursor: pointer;
	text-decoration: none;
	box-shadow: none;
	transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.rfb .rfb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	flex: none;
}
.rfb .rfb-btn svg { width: 19px; height: 19px; display: block; }
.rfb .rfb-step {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 32px;
	padding: 0 12px 0 6px;
	border-radius: 999px;
	white-space: nowrap;
	color: var(--rfb-muted);
	font-size: 13px;
}
.rfb .rfb-step-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--rfb-line);
	font-size: 11px;
	font-weight: 700;
}
.rfb .rfb-step[aria-current] { color: var(--rfb-fg); background: var(--rfb-btn-hover); }
.rfb .rfb-step[aria-current] .rfb-step-n { background: var(--rfb-accent); color: #fff; }
.rfb .rfb-btn:hover:not(:disabled),
.rfb .rfb-step:hover:not(:disabled) { background: var(--rfb-btn-hover); color: var(--rfb-fg); }
.rfb .rfb-btn:focus-visible,
.rfb .rfb-step:focus-visible { outline: 2px solid var(--rfb-accent); outline-offset: 2px; }
.rfb .rfb-btn:disabled,
.rfb .rfb-step:disabled { opacity: .35; cursor: default; }
.rfb-zoom,
.rfb-tools {
	padding-left: 14px;
	border-left: 1px solid var(--rfb-line);
}

.rfb-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* narrow screens: numbered dots only */
@media (max-width: 720px) {
	.rfb .rfb-step { padding: 0; width: 32px; justify-content: center; }
	.rfb .rfb-step-t { display: none; }
	.rfb .rfb-step-n { width: 22px; height: 22px; }
	.rfb-bar { gap: 8px 10px; }
	.rfb-nav { width: 100%; justify-content: center; }
	.rfb-zoom { padding-left: 0; border-left: 0; }
	.rfb-stage { min-height: 300px; }
}

/* full screen (native and iPhone fallback) */
.rfb:fullscreen,
.rfb--max {
	margin: 0;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}
.rfb:-webkit-full-screen { margin: 0; border-radius: 0; display: flex; flex-direction: column; width: 100%; height: 100%; }
.rfb--max {
	position: fixed;
	inset: 0;
	z-index: 999999;
	height: 100vh;
	height: 100dvh;
}
.rfb:fullscreen .rfb-stage,
.rfb--max .rfb-stage { flex: 1 1 auto; height: auto; aspect-ratio: auto; max-height: none; min-height: 0; }
.rfb:-webkit-full-screen .rfb-stage { flex: 1 1 auto; height: auto; aspect-ratio: auto; max-height: none; min-height: 0; }
html.rfb-lock, html.rfb-lock body { overflow: hidden !important; }

@media (prefers-reduced-motion: reduce) {
	.rfb-hint, .rfb-world { transition: none; }
	.rfb-spinner { animation-duration: 2s; }
}