/*!
 * JDS Flipbook viewer v1.0.0
 * PDF.js + StPageFlip magazine viewer. Scoped under .jfb
 */

/* ---------- Theme tokens (override per site if needed) ---------- */
.jfb {
	--jfb-ink: var(--color-ink);          /* toolbar background */
	--jfb-on-ink: var(--color-paper);       /* toolbar text and icons (16.7:1) */
	--jfb-muted-on-ink: var(--color-text-on-dark-muted); /* secondary toolbar text (9.9:1) */
	--jfb-stage: var(--color-sand);        /* area around the pages */
	--jfb-text: var(--color-ink);         /* text on stage (13.6:1) */
	--jfb-accent: var(--color-accent);       /* download button background */
	--jfb-on-accent: var(--color-ink);    /* text on accent (4.9:1) */
	--jfb-focus-dark: color-mix(in srgb, var(--color-accent) 75%, var(--color-paper));   /* focus ring on dark (6.8:1) */
	--jfb-focus-light: var(--color-ink);  /* focus ring on light (13.6:1) */
	--jfb-radius: 10px;
	--jfb-btn: 40px;

	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	color: var(--jfb-text);
	background: var(--jfb-stage);
	border-radius: var(--jfb-radius);
	overflow: hidden;
	font-family: inherit;
	line-height: 1.4;
	box-sizing: border-box;
}
.jfb *, .jfb *::before, .jfb *::after { box-sizing: border-box; }

/* Screen-reader only */
.jfb-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;
}

/* ---------- Toolbar ---------- */
.jfb-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 8px 12px;
	background: var(--jfb-ink);
	color: var(--jfb-on-ink);
	position: relative;
	z-index: 5;
}
.jfb-group { display: flex; align-items: center; gap: 4px; }

.jfb-btn {
	-webkit-appearance: none; appearance: none;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-width: var(--jfb-btn); height: var(--jfb-btn);
	padding: 0 8px;
	margin: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--jfb-on-ink);
	font: inherit; font-size: var(--font-size-small); font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease;
}
.jfb-btn svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jfb-btn:hover { background: color-mix(in srgb, var(--color-paper) 12%, transparent); }
.jfb-btn[disabled] { opacity: .4; cursor: not-allowed; background: transparent; }
.jfb-btn[aria-pressed="true"], .jfb-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--color-paper) 18%, transparent); }

.jfb-btn:focus { outline: none; }
.jfb-btn:focus-visible,
.jfb-jump input:focus-visible {
	outline: 3px solid var(--jfb-focus-dark);
	outline-offset: 2px;
}

.jfb-dl {
	background: var(--jfb-accent);
	color: var(--jfb-on-accent);
	padding: 0 16px;
	border-radius: 999px; /* brand pill button */
}
.jfb-dl:hover { background: color-mix(in srgb, var(--color-accent) 85%, var(--color-paper)); color: var(--jfb-on-accent); }
.jfb-dl:visited { color: var(--jfb-on-accent); }

/* Page jump / counter */
.jfb-jump { display: flex; align-items: center; gap: 6px; margin: 0 4px; font-size: var(--font-size-small); color: var(--jfb-muted-on-ink); }
.jfb-jump input {
	width: 3.6em; height: 34px;
	padding: 0 6px;
	border: 1px solid color-mix(in srgb, var(--color-paper) 45%, transparent);
	border-radius: 6px;
	background: transparent;
	color: var(--jfb-on-ink);
	font: inherit; font-weight: 600; text-align: center;
	-moz-appearance: textfield;
}
.jfb-jump input::-webkit-outer-spin-button,
.jfb-jump input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.jfb-zoom-level { min-width: 3.4em; text-align: center; font-size: var(--font-size-meta); font-variant-numeric: tabular-nums; color: var(--jfb-muted-on-ink); }

/* ---------- Stage ---------- */
.jfb-stage {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	padding: 16px;
	overflow: hidden;
}
.jfb-book-wrap {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	border-radius: 4px;
}
.jfb-book-wrap:focus { outline: none; }
.jfb-book-wrap:focus-visible { outline: 3px solid var(--jfb-focus-light); outline-offset: 6px; }
.jfb-book { margin: 0 auto; }
.jfb.is-zoomed .jfb-book-wrap { display: none; }

/* StPageFlip base styles (from stPageFlip.css) */
.jfb .stf__parent { position: relative; display: block; box-sizing: border-box; transform: translateZ(0); touch-action: pan-y; }
.jfb .stf__wrapper, .jfb .sft__wrapper { position: relative; width: 100%; box-sizing: border-box; }
.jfb .stf__parent canvas { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.jfb .stf__block { position: absolute; width: 100%; height: 100%; box-sizing: border-box; perspective: 2000px; }
.jfb .stf__item { display: none; position: absolute; transform-style: preserve-3d; }
.jfb .stf__outerShadow, .jfb .stf__innerShadow, .jfb .stf__hardShadow, .jfb .stf__hardInnerShadow { position: absolute; left: 0; top: 0; }

/* Pages */
.jfb-page { background: var(--color-paper); overflow: hidden; box-shadow: 0 1px 3px color-mix(in srgb, var(--color-ink) 12%, transparent); }
.jfb-page-inner { position: absolute; inset: 0; }
.jfb-page canvas.jfb-canvas,
.jfb-zpage canvas.jfb-canvas {
	position: absolute; left: 0; top: 0;
	width: 100% !important; height: 100% !important;
	display: block;
}
.jfb-page:not(.is-rendered) .jfb-page-inner::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(100deg, var(--color-cream) 30%, var(--color-cream) 50%, var(--color-cream) 70%);
	background-size: 300% 100%;
	animation: jfb-shimmer 1.4s ease-in-out infinite;
}
@keyframes jfb-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Link layer */
.jfb-links { position: absolute; inset: 0; z-index: 3; }
.jfb-link {
	position: absolute;
	display: block;
	border-radius: 2px;
	cursor: pointer;
}
.jfb-link:hover { background: color-mix(in srgb, var(--color-accent) 14%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-accent) 60%, transparent); }
.jfb-link:focus { outline: none; }
.jfb-link:focus-visible { outline: 3px solid var(--jfb-focus-light); outline-offset: 1px; background: color-mix(in srgb, var(--color-accent) 14%, transparent); }

/* PDF.js text layer (adapted from pdf_viewer.css) */
.jfb .textLayer {
	position: absolute; inset: 0; z-index: 2;
	overflow: clip; opacity: 1; line-height: 1;
	text-align: initial; letter-spacing: normal; word-spacing: normal;
	-webkit-text-size-adjust: none; text-size-adjust: none;
	forced-color-adjust: none; transform-origin: 0 0;
	--scale-round-x: 1px; --scale-round-y: 1px;
	--min-font-size: 1;
	--text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
	--min-font-size-inv: calc(1 / var(--min-font-size));
}
.jfb .textLayer :is(span, br) {
	color: transparent; position: absolute; white-space: pre;
	cursor: text; transform-origin: 0% 0%;
}
.jfb .textLayer > :not(.markedContent),
.jfb .textLayer .markedContent span:not(.markedContent) {
	z-index: 1;
	--font-height: 0;
	font-size: calc(var(--text-scale-factor) * var(--font-height));
	--scale-x: 1; --rotate: 0deg;
	transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}
.jfb .textLayer .markedContent { display: contents; }
.jfb .textLayer span[role="img"] { user-select: none; cursor: default; }
.jfb .textLayer ::selection { background: var(--color-accent-tint); color: transparent; }
.jfb .textLayer br::selection { background: transparent; }
.jfb .textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none; }
/* In the flipbook, dragging turns pages, so text is for assistive tech only */
.jfb-book .textLayer { pointer-events: none; user-select: none; }

/* Side arrows (mouse convenience, duplicates of toolbar buttons) */
.jfb-side {
	position: absolute; top: 50%; z-index: 4;
	width: 44px; height: 44px; margin-top: -22px;
	display: flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%;
	background: color-mix(in srgb, var(--color-ink) 75%, transparent); color: var(--color-paper);
	cursor: pointer; opacity: .85;
	transition: opacity .15s ease, background-color .15s ease;
}
.jfb-side:hover { opacity: 1; background: var(--jfb-ink); }
.jfb-side[disabled] { opacity: 0; pointer-events: none; }
.jfb-side svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.jfb-side--prev { left: 10px; }
.jfb-side--next { right: 10px; }
.jfb.is-zoomed .jfb-side, .jfb.is-loading .jfb-side, .jfb.has-error .jfb-side { display: none; }

/* ---------- Zoom view ---------- */
.jfb-zoom {
	position: absolute; inset: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	padding: 16px;
	cursor: grab;
	overscroll-behavior: contain;
}
.jfb-zoom[hidden] { display: none; }
.jfb-zoom.is-panning { cursor: grabbing; user-select: none; }
.jfb-zoom:focus { outline: none; }
.jfb-zoom:focus-visible { outline: 3px solid var(--jfb-focus-light); outline-offset: -3px; }
.jfb-zoom-inner { display: flex; gap: 0; width: max-content; margin: 0 auto; }
.jfb-zpage { position: relative; flex: none; background: var(--color-paper); box-shadow: 0 1px 4px color-mix(in srgb, var(--color-ink) 18%, transparent); }
.jfb-zoom .textLayer { cursor: text; }

/* ---------- Thumbnails ---------- */
.jfb-thumbs {
	position: absolute; inset: 0; z-index: 6;
	overflow: auto;
	padding: 16px;
	background: color-mix(in srgb, var(--color-sand) 98%, transparent);
}
.jfb-thumbs[hidden] { display: none; }
.jfb-thumbs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.jfb-thumbs-title { margin: 0; font-size: var(--font-size-ui); font-weight: 700; color: var(--jfb-text); }
.jfb-thumbs-close { background: var(--jfb-ink); }
.jfb-thumbs-list {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 14px;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.jfb-thumb {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	width: 100%; padding: 6px;
	border: 2px solid transparent; border-radius: 8px;
	background: transparent; color: var(--jfb-text);
	font: inherit; font-size: var(--font-size-meta); font-weight: 600;
	cursor: pointer;
}
.jfb-thumb:hover { background: color-mix(in srgb, var(--color-ink) 6%, transparent); }
.jfb-thumb:focus { outline: none; }
.jfb-thumb:focus-visible { outline: 3px solid var(--jfb-focus-light); outline-offset: 2px; }
.jfb-thumb[aria-current="true"] { border-color: var(--jfb-ink); }
.jfb-thumb-img { position: relative; display: block; width: 100%; background: var(--color-paper); box-shadow: 0 1px 3px color-mix(in srgb, var(--color-ink) 15%, transparent); }
.jfb-thumb-img canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Loading / error ---------- */
.jfb-status {
	position: absolute; inset: 0; z-index: 7;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	padding: 24px;
	background: var(--jfb-stage);
	text-align: center;
}
.jfb-status[hidden] { display: none; }
.jfb-status-cover { max-height: 55%; max-width: 70%; width: auto; height: auto; box-shadow: 0 4px 16px color-mix(in srgb, var(--color-ink) 18%, transparent); opacity: .55; }
.jfb-status-text { margin: 0; font-size: var(--font-size-body); font-weight: 600; color: var(--jfb-text); }
.jfb-spinner {
	width: 36px; height: 36px;
	border: 4px solid color-mix(in srgb, var(--color-ink) 20%, transparent); border-top-color: var(--jfb-ink);
	border-radius: 50%;
	animation: jfb-spin .9s linear infinite;
}
@keyframes jfb-spin { to { transform: rotate(360deg); } }

.jfb-error {
	position: absolute; inset: 0; z-index: 8;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	padding: 24px; text-align: center;
	background: var(--jfb-stage); color: var(--jfb-text);
}
.jfb-error[hidden] { display: none; }
.jfb-error p { margin: 0; max-width: 34em; font-size: var(--font-size-body); }
.jfb-error .jfb-btn { height: 44px; }

.jfb-noscript { margin: 0; padding: 16px; text-align: center; }

/* ---------- Fullscreen ---------- */
.jfb:fullscreen { width: 100%; height: 100%; border-radius: 0; }
.jfb:-webkit-full-screen { width: 100%; height: 100%; border-radius: 0; }
.jfb.jfb--fs {
	position: fixed; inset: 0; z-index: 999999;
	width: 100vw; height: 100vh; height: 100dvh;
	border-radius: 0;
}
html.jfb-lock, html.jfb-lock body { overflow: hidden !important; }
.jfb:fullscreen .jfb-stage, .jfb.jfb--fs .jfb-stage { height: auto !important; }

/* ---------- Small screens ---------- */
@media (max-width: 767px) {
	.jfb { --jfb-btn: 44px; border-radius: 0; }
	.jfb-toolbar { padding: 6px 8px; gap: 6px; justify-content: center; }
	.jfb-stage { padding: 10px; }
	.jfb-side { display: none; }
	.jfb-dl-label { display: none; }
	.jfb-dl { padding: 0 10px; }
	.jfb-zoom-level { display: none; }
}

/* ---------- Motion and contrast preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	.jfb *, .jfb *::before, .jfb *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	.jfb-spinner { animation: none; border-top-color: color-mix(in srgb, var(--color-ink) 20%, transparent); }
	.jfb-page:not(.is-rendered) .jfb-page-inner::before { animation: none; }
}
@media (forced-colors: active) {
	.jfb-btn, .jfb-thumb, .jfb-side { border: 1px solid ButtonText; }
	.jfb-link:focus-visible, .jfb-btn:focus-visible { outline-color: Highlight; }
}