/* SFI Web Book 2 reader. Sizes come from --u, the number of screen pixels per inch of book. */

.wb-mount { position: relative; }
.wb-mount .wb-fallback { max-width: 640px; margin: 0 auto; padding: 24px 16px; }
.wb-mount.is-ready .wb-fallback { display: none; }

.wb {
	--u: 40;
	--wb-backdrop: #d9dde3;
	--wb-ui: #ffffff;
	--wb-ink: #1d1f26;
	--wb-line: rgba(29, 31, 38, .16);
	--wb-accent: #2f56d6;
	--r: calc(var(--u) * 0.16px);
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	isolation: isolate;
	background: var(--wb-backdrop);
	color: var(--wb-ink);
	font-family: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
	padding: 14px max(14px, env(safe-area-inset-right, 0px)) 16px max(14px, env(safe-area-inset-left, 0px));
	-webkit-font-smoothing: antialiased;
}
.wb *, .wb *::before, .wb *::after { box-sizing: border-box; }
.wb--square-corners { --r: 0px; }
.wb--embed { height: var(--wb-h, 85vh); min-height: 440px; }
.wb--preview, .wb--fill { height: 100%; }
.wb--full {
	position: fixed;
	inset: 0;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 9990;
	padding-top: max(14px, env(safe-area-inset-top, 0px));
	padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}
body.wb-single { margin: 0; overflow: hidden; background: #d9dde3; }
.wb:focus { outline: none; }
.wb:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: -2px; }

.wb-backdrop { position: absolute; inset: 0; z-index: -1; }
.wb-backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.wb-backdrop .wb-scrim { position: absolute; inset: 0; background: rgba(15, 20, 35, .22); }

.wb-stage { flex: 1; min-height: 0; display: grid; place-items: center; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.wb-view {
	position: relative;
	width: calc(var(--u) * var(--W) * 2px);
	height: calc(var(--u) * var(--H) * 1px);
	perspective: calc(var(--u) * var(--W) * 6px);
	perspective-origin: 50% 45%;
	cursor: pointer;
}
.wb--single .wb-view { width: calc(var(--u) * var(--W) * 1px); overflow: hidden; border-radius: var(--r); }
.wb-intro { position: absolute; inset: 0; transform-style: preserve-3d; }
/* The tilt and the book stay flat: the book is drawn as one surface, so nothing inside can sort above the turning leaf. */
.wb-tilt { position: absolute; inset: 0; }
.wb-book {
	--off: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: calc(var(--u) * var(--W) * 2px);
	height: 100%;
	perspective: calc(var(--u) * var(--W) * 7px);
	perspective-origin: 50% 40%;
	transform: translateX(calc(var(--u) * var(--off) * 1px));
}
.wb.is-loading .wb-intro { opacity: 0; }
.wb-loading { position: absolute; left: 0; right: 0; bottom: 45%; margin: 0; text-align: center; font-size: 14px; letter-spacing: .04em; opacity: 0; transition: opacity .4s; pointer-events: none; color: var(--wb-ink); }
.wb.is-loading .wb-loading { opacity: .7; }
.wb-stage { position: relative; }

/* Flat layers: the resting book, and the two pages under a turning leaf. */
.wb-rest, .wb-under { position: absolute; inset: 0; }
/* the resting book covers the pages being readied for the next turn */
.wb-rest { z-index: 2; }
.wb-under { z-index: 1; }
.wb-sheet, .wb-half {
	position: absolute;
	top: 0;
	height: 100%;
	overflow: hidden;
	background: #fbf6ea;
	--stack: 0 2px 0 #e4ddd0, 0 4px 0 #d6cebf, 0 6px 0 #e9e3d8, 0 28px 50px -18px rgba(10, 15, 30, .5);
	box-shadow: var(--stack);
}
.wb-sheet { left: 0; width: 100%; border-radius: var(--r); }
/* the left half runs 1px under the right half, so no hairline can open at the spine */
.wb-half.wb-L { left: 0; width: calc(50% + 1px); border-radius: var(--r) 0 0 var(--r); }
.wb-half.wb-R { left: 50%; width: 50%; border-radius: 0 var(--r) var(--r) 0; }
.wb-half.is-empty { background: transparent; box-shadow: none; overflow: visible; }
/* Under a turning leaf the page shadows sit beneath both pages, so one page's shadow never darkens the other. */
.wb-under .wb-half { box-shadow: none; }
.wb-ps { position: absolute; top: 0; width: 50%; height: 100%; box-shadow: var(--stack); }
.wb-psL { left: 0; border-radius: var(--r) 0 0 var(--r); }
.wb-psR { left: 50%; border-radius: 0 var(--r) var(--r) 0; }
.wb-ps { --stack: 0 2px 0 #e4ddd0, 0 4px 0 #d6cebf, 0 6px 0 #e9e3d8, 0 28px 50px -18px rgba(10, 15, 30, .5); }

/* The turning leaf: a chain of thin strips, each hinged to the one before it, so the page can bend. */
.wb-turner {
	position: absolute;
	top: 0;
	left: 50%;
	width: 50%;
	height: 100%;
	z-index: 3;
	transform-style: preserve-3d;
}
.wb-strip {
	position: absolute;
	top: 0;
	height: 100%;
	transform-origin: 0 50%;
	transform-style: preserve-3d;
}
.wb-piece {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	height: 100%;
}

.wb-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.wb-shift { position: absolute; top: 0; }
.wb-sheet .wb-shift { left: 0; }
.wb-shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit; }
.wb-turner .wb-front .wb-shade { background: linear-gradient(90deg, rgba(20, 16, 10, .55), rgba(20, 16, 10, .12) 35%, rgba(255, 255, 255, .06) 80%); }
.wb-turner .wb-back .wb-shade { background: linear-gradient(270deg, rgba(20, 16, 10, .55), rgba(20, 16, 10, .12) 35%, rgba(255, 255, 255, .06) 80%); }
.wb-under .wb-R .wb-shade { background: linear-gradient(90deg, rgba(20, 16, 10, .45), rgba(20, 16, 10, .1) 45%, transparent 85%); }
.wb-under .wb-L .wb-shade { background: linear-gradient(270deg, rgba(20, 16, 10, .45), rgba(20, 16, 10, .1) 45%, transparent 85%); }

/* ---------------------------------------------------------------- page composition (shared with the studio) */
.wb-comp { position: relative; }
.wb-layer { position: absolute; inset: 0; }
.wb-layer-in { position: absolute; inset: 0; }
.wb-bg { position: absolute; overflow: hidden; }
.wb-bg img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.wb-item {
	position: absolute;
	transform-origin: 50% 50%;
	translate: calc(var(--pmx, 0) * var(--px, 0) * var(--u) * 1px) calc(var(--pmy, 0) * var(--py, 0) * var(--u) * 1px);
}
.wb-item img { display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.wb-text { white-space: pre; overflow: visible; }
.wb-line { overflow: visible; }

/* ---------------------------------------------------------------- controls */
.wb-controls { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 12px; }
.wb .wb-btn {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--wb-ui);
	color: var(--wb-ink);
	border: 1px solid var(--wb-line);
	cursor: pointer;
	transition: transform .15s ease, border-color .15s ease;
}
.wb .wb-btn:hover { border-color: var(--wb-accent); }
.wb .wb-btn:active { transform: scale(.94); }
.wb .wb-btn:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: 2px; }
.wb .wb-btn[disabled] { opacity: .4; cursor: default; }
.wb-btn svg { width: 20px; height: 20px; }
.wb-count {
	min-width: 120px;
	text-align: center;
	font-weight: 700;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	background: var(--wb-ui);
	color: var(--wb-ink);
	border: 1px solid var(--wb-line);
	border-radius: 999px;
	padding: 9px 14px;
}

@media (prefers-reduced-motion: reduce) {
	.wb-item { translate: none; }
}