/*
 * KAYND Flipbook — viewer styles.
 * Everything is scoped under .kfb; no resets, nothing global except the
 * scroll lock helper used by pseudo fullscreen.
 */

.kfb {
	--kfb-bg: #111;
	--kfb-vh: 100vh;
	--kfb-h: 70svh;
	--kfb-min-h: 340px;
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: var(--kfb-h);
	min-height: var(--kfb-min-h);
	background: var(--kfb-bg);
	color: #ededed;
	overflow: hidden;
	isolation: isolate;
	-webkit-tap-highlight-color: transparent;
}

.kfb *,
.kfb *::before,
.kfb *::after {
	box-sizing: border-box;
}

.kfb--px {
	height: var(--kfb-fixed-h, 600px);
}

.kfb--fullbleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.kfb-noscript,
.kfb-admin-notice {
	margin: 0;
	padding: 1em;
	font: 400 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.kfb-boot {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 50% 40%, rgba(255, 255, 255, 0.06), transparent 70%);
	opacity: 1;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.kfb.is-ready .kfb-boot {
	opacity: 0;
}

/* ------------------------------------------------------------------ stage */

.kfb-stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

/*
 * Zoomed: we own the gesture on both axes.
 *
 * `none` used to trap the visitor — the stage is inset:0 inside a height:fill
 * wrapper, so it covered most of a phone viewport with no way to reach the
 * footer. The earlier answer was to stay on pan-y and only pan horizontally,
 * which cost vertical panning entirely and made the bottom of a zoomed page
 * unreachable — fatal for a lookbook.
 *
 * The real fix is boundary-aware gesture chaining in the pointer handler: the
 * drag pans the image on both axes, and once an axis hits its limit the
 * leftover delta is handed to the page via scrollBy(). That needs `none`,
 * because touch-action is latched at pointerdown and the browser can never be
 * given the gesture back mid-drag.
 */
.kfb.is-zoomed .kfb-stage {
	touch-action: none;
	cursor: move;
}

/*
 * Optional zoom lock for the page carrying the flipbook. Added by
 * zoom-lock.js, never by the stylesheet, so it can only ever apply where the
 * shortcode rendered and the setting is on. pan-x pan-y permits scrolling but
 * denies pinch-zoom and double-tap zoom; iOS Safari needs the gesture-event
 * handlers in that script as well.
 */
html.kfb-zoom-lock {
	touch-action: pan-x pan-y;
}

.kfb.is-dragging .kfb-stage {
	cursor: grabbing;
}

.kfb-zoom {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transform-origin: 50% 50%;
}

.kfb-shift {
	position: relative;
	flex: 0 0 auto;
}

/*
 * GPU hints only while something is actually moving.
 *
 * `will-change: transform` used to sit here permanently, and that was the main
 * cause of the blurry zoom on phones: it pins the layer's raster scale, so the
 * page is rasterised once at fit size and every scale() after that just
 * magnifies those pixels. Left off, the browser paints the transform instead
 * and rasterises the image at its real on-screen size.
 *
 * JS adds .is-zoom-live on pointerdown / at the start of any tween and removes
 * it once everything settles — see setGpu() in flipbook.js, which also swaps
 * translate3d() for the equivalent 2D translate() so nothing else forces a
 * layer either. Both are needed: either one alone still composites.
 */
.kfb.is-zoom-live .kfb-zoom,
.kfb.is-zoom-live .kfb-shift {
	will-change: transform;
}

.kfb-book {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	filter: drop-shadow(0 24px 46px rgba(0, 0, 0, 0.55));
}

/*
 * A filter renders its subtree into its own surface, which is one more thing
 * between the page image and the screen that can be rasterised at the wrong
 * scale. Dropped once the zoom has settled at 1.5x or more — by then the book
 * is half again wider than the stage, so its edges and the shadow they cast
 * are well outside the visible area and there is nothing to see disappear.
 * Below 1.5x the shadow is still on screen and the filter stays.
 */
.kfb.is-zoomed-far:not(.is-zoom-live) .kfb-book {
	filter: none;
}

.kfb-side {
	position: absolute;
	top: 0;
	height: 100%;
	width: 50%;
	overflow: hidden;
	background: #171717;
}

.kfb-side--l {
	left: 0;
}

.kfb-side--r {
	left: 50%;
}

.kfb-side.is-empty {
	background: transparent;
	box-shadow: none;
}

/*
 * Resting gutter shadow at the spine.
 *
 * Strength is never toggled with `display` (not animatable — it painted the
 * full gradient in a single frame at the end of a turn). Instead each side's
 * strength is a custom property that JS interpolates from flip progress, so it
 * ramps identically for animated flips, drag flips and drag cancels. The
 * duration is a property too: during a turn JS matches it to the flip, and it
 * falls back to 240ms for state changes that never touch setFlipProgress()
 * (thumbnail jumps, pans, resize, spread/single mode switches).
 */
.kfb-side--l::after,
.kfb-side--r::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 34px;
	pointer-events: none;
	z-index: 2;
	transition: opacity var(--kfb-gut-ms, 240ms) cubic-bezier(0.28, 0.72, 0.28, 1);
}

.kfb-side--l::after {
	right: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.28) 100%);
	opacity: calc(var(--kfb-gut-l, 1) * var(--kfb-shade-k, 1));
}

.kfb-side--r::after {
	left: 0;
	background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.28) 100%);
	opacity: calc(var(--kfb-gut-r, 1) * var(--kfb-shade-k, 1));
}

/* ------------------------------------------------------------------ pages */

.kfb-page {
	position: absolute;
	inset: 0;
	background-color: #171717;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.kfb-page picture,
.kfb-page img {
	display: block;
	width: 100%;
	height: 100%;
}

.kfb-page img {
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.32s ease;
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
}

.kfb-page.is-loaded img {
	opacity: 1;
}

/*
 * The blank facing page of the cover / back cover must paint nothing at all —
 * it is not a page that has yet to load, it is the absence of a page.
 *
 * Theme-agnostic on purpose. Two selectors, and the second one matters:
 * `.kfb-page--empty` alone is only (0,1,0) and is therefore outranked by any
 * theme rule of the form `.kfb--light .kfb-page` (0,2,0), which is exactly how
 * the placeholder leaked through on a light backdrop. `.kfb-side.is-empty
 * .kfb-page` is (0,3,0) and cannot be outranked by a single-class theme rule.
 *
 * A real page that has not decoded yet keeps its placeholder and its LQIP —
 * it never carries the --empty modifier and never sits in an .is-empty side.
 */
.kfb-page--empty,
.kfb-side.is-empty .kfb-page {
	background-color: transparent;
	background-image: none;
}

/* ------------------------------------------------------------------- leaf */

.kfb-leaf {
	position: absolute;
	top: 0;
	left: 50%;
	width: 50%;
	height: 100%;
	transform-style: preserve-3d;
	transform-origin: left center;
	will-change: transform;
	z-index: 6;
}

/*
 * The two faces are otherwise exactly coplanar — both inset:0 in the leaf,
 * the back one rotated 180deg about its own centre — so which of them wins a
 * pixel rests entirely on backface culling. Mobile GPUs have coarser depth
 * precision than desktop and lose that contest for a frame, showing the face
 * that should be hidden. Because .kfb-shade sits at full opacity precisely
 * when its face is meant to be invisible (shadeB is 1 at t=0, shadeF is 1 at
 * t=1), what leaked through was a full-strength black gradient.
 *
 * Nudging each face a hair towards its own viewer removes the coplanarity, so
 * there is nothing left to z-fight over. The offset is applied AFTER the
 * rotation on the back face, so it travels along that face's own local Z.
 * 0.06px is far below a device pixel and changes nothing visually.
 */
.kfb-face {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #171717;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform-style: flat;
	transform: translateZ(0.06px);
}

.kfb-face--back {
	transform: rotateY(180deg) translateZ(0.06px);
}

/*
 * The turning leaf carries the spine shadow with it.
 *
 * Without this the gutter looks like it vanishes for the whole turn and snaps
 * back at the end: .kfb-leaf (z-index 6) swings over the static side and
 * occludes that side's ::after, while the leaf itself had no resting spine
 * gradient of its own. .kfb-shade does not cover for it — that models the
 * lighting change of the lifting page and is 0 at t = 0 by design.
 *
 * Geometry. .kfb-leaf is left:50%;width:50% with transform-origin at its LEFT
 * edge, so its left edge is the spine. Writing L for the leaf width and
 * rotateY(θ) about x = 0:
 *
 *   front face — unrotated, lies over .kfb-side--r. A point at local u sits at
 *   spine + u·cos θ; at θ = 0 that is the spine for u = 0, so the spine is its
 *   LEFT edge.
 *
 *   back face — rotateY(180deg) about its own centre maps local u to leaf-local
 *   (L − u), so on screen it sits at spine + (L − u)·cos θ. At θ = −180°
 *   (cos = −1) that is spine − L + u: u = 0 lands at the book's far left and
 *   u = L lands exactly on the spine. So in its own local space the spine is
 *   its RIGHT edge — it lands over .kfb-side--l.
 *
 * Values are identical to the sides so the two handoff frames are
 * indistinguishable. Strength is deliberately constant, not progress-driven: a
 * leaf face always holds a real page (canFlip() guarantees front and back are
 * in range), so the side it hands off to always has gutter strength 1.
 */
.kfb-face::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 34px;
	pointer-events: none;
	z-index: 2;
	opacity: var(--kfb-shade-k, 1);
}

/* Mirrors .kfb-side--r::after */
.kfb-face--front::after {
	left: 0;
	background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.28) 100%);
}

/* Mirrors .kfb-side--l::after */
.kfb-face--back::after {
	right: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.28) 100%);
}

/*
 * Lighting shade on the lifting page. JS drives --kfb-shade-t (0..1) from flip
 * progress rather than writing opacity directly, so the user's intensity
 * factor can be multiplied in here instead of being duplicated in JS.
 * Transitions still apply: the computed opacity changes when the var does.
 */
.kfb-shade {
	position: absolute;
	inset: 0;
	opacity: calc(var(--kfb-shade-t, 0) * var(--kfb-shade-k, 1));
	pointer-events: none;
	z-index: 3;
}

.kfb-face--front .kfb-shade {
	background: linear-gradient(to left, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0) 72%);
}

.kfb-face--back .kfb-shade {
	background: linear-gradient(to right, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0) 72%);
}

.kfb-fade {
	position: absolute;
	inset: 0;
	z-index: 6;
	opacity: 0;
	background: var(--kfb-bg);
	pointer-events: none;
	transition: opacity 0.22s linear;
}

/* --------------------------------------------------------------- controls */

.kfb-bar {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 5px 8px;
	border-radius: 999px;
	background: rgba(22, 22, 22, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(16px) saturate(1.4);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	transition: opacity 0.28s ease, transform 0.28s ease;
	max-width: calc(100% - 24px);
}

.kfb.is-idle .kfb-bar {
	opacity: 0;
	transform: translateX(-50%) translateY(12px);
	pointer-events: none;
}

.kfb-btn {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	margin: 0;
	padding: 0;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: #f4f4f4;
	cursor: pointer;
	transition: background 0.16s ease, opacity 0.16s ease;
	flex: 0 0 auto;
}

.kfb-btn:hover {
	background: rgba(255, 255, 255, 0.13);
}

.kfb-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.kfb-btn[disabled] {
	opacity: 0.32;
	cursor: default;
}

.kfb-btn[aria-pressed="true"] {
	background: rgba(255, 255, 255, 0.2);
}

.kfb-btn svg {
	width: 19px;
	height: 19px;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*
 * Page readout / jump field.
 *
 * The container carries the box (and the same height as the buttons) and the
 * input is absolutely positioned over the readout, so switching between the
 * two states cannot change the bar's height — barReserve() measures that
 * height to size the book's fitting box.
 */
.kfb-ind {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	font: 500 13px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.02em;
	padding: 0 10px;
	white-space: nowrap;
	color: #e6e6e6;
	font-variant-numeric: tabular-nums;
	min-width: 74px;
	text-align: center;
	flex: 0 0 auto;
}

.kfb-ind-read {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	margin: 0;
	padding: 2px 6px;
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	font-variant-numeric: inherit;
	border-radius: 5px;
	cursor: pointer;
	transition: background 0.16s ease;
}

.kfb-ind-read:hover {
	background: rgba(255, 255, 255, 0.13);
}

.kfb-ind-read:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 1px;
}

.kfb-ind-input {
	position: absolute;
	top: 50%;
	left: 6px;
	right: 6px;
	transform: translateY(-50%);
	height: 26px;
	width: auto;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font: inherit;
	font-variant-numeric: inherit;
	text-align: center;
	padding: 0 4px;
	-moz-appearance: textfield;
}

.kfb-ind-input:focus {
	outline: 2px solid #fff;
	outline-offset: 1px;
}

.kfb-sep {
	width: 1px;
	height: 20px;
	background: rgba(255, 255, 255, 0.14);
	margin: 0 4px;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------ edge arrows */
/*
 * Shown only while zoomed AND panned hard against a horizontal edge, as an
 * explicit way to turn the page. Horizontal drag deliberately does NOT flip —
 * the page margin is content you need to linger on.
 *
 * Sits on the root rather than inside .kfb-stage, which takes
 * touch-action: none while zoomed; that keeps the tap on the button instead
 * of starting a pan. Modest and translucent so it never hides the page edge
 * it sits beside.
 */
.kfb-edge {
	position: absolute;
	top: 50%;
	z-index: 28;
	width: 42px;
	height: 58px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	background: rgba(22, 22, 22, 0.42);
	backdrop-filter: blur(10px) saturate(1.3);
	-webkit-backdrop-filter: blur(10px) saturate(1.3);
	color: #f4f4f4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-50%);
	transition: opacity 0.22s ease, visibility 0.22s ease;
}

.kfb-edge--prev {
	left: 10px;
}

.kfb-edge--next {
	right: 10px;
}

.kfb-edge.is-on {
	opacity: 1;
	visibility: visible;
}

.kfb-edge:hover {
	background: rgba(22, 22, 22, 0.62);
}

.kfb-edge:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.kfb-edge svg {
	width: 20px;
	height: 20px;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kfb--light .kfb-edge {
	background: rgba(252, 252, 252, 0.62);
	border-color: rgba(0, 0, 0, 0.12);
	color: #1c1c1c;
}

.kfb--light .kfb-edge:hover {
	background: rgba(252, 252, 252, 0.85);
}

.kfb--light .kfb-edge:focus-visible {
	outline-color: #111;
}

/* ------------------------------------------------------------- thumbnails */

.kfb-thumbs {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	padding: 10px 12px 12px;
	background: rgba(14, 14, 14, 0.78);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(18px) saturate(1.3);
	-webkit-backdrop-filter: blur(18px) saturate(1.3);
	transform: translateY(110%);
	transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
	visibility: hidden;
}

.kfb.is-thumbs-open .kfb-thumbs {
	transform: none;
	visibility: visible;
}

.kfb.is-thumbs-open .kfb-bar {
	bottom: calc(var(--kfb-thumbs-h, 118px) + 12px);
}

.kfb-thumbs-scroll {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 2px 0 6px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
	-webkit-overflow-scrolling: touch;
}

.kfb-thumbs-scroll::-webkit-scrollbar {
	height: 6px;
}

.kfb-thumbs-scroll::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.28);
	border-radius: 999px;
}

.kfb-thumb {
	position: relative;
	flex: 0 0 auto;
	width: 58px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	overflow: hidden;
	background: #202020;
	cursor: pointer;
	line-height: 0;
	opacity: 0.72;
	transition: opacity 0.16s ease, box-shadow 0.16s ease;
}

.kfb-thumb:hover {
	opacity: 1;
}

.kfb-thumb:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.kfb-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1.414;
	object-fit: cover;
	-webkit-user-drag: none;
	pointer-events: none;
}

.kfb-thumb.is-current {
	opacity: 1;
	box-shadow: inset 0 0 0 2px #fff;
}

.kfb-thumb-n {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	font: 500 10px/1 ui-sans-serif, system-ui, sans-serif;
	padding: 3px 0;
	text-align: center;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
}

/* ------------------------------------------------------------------- a11y */

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

/* ------------------------------------------------------- pseudo fullscreen */

.kfb.is-pseudofs {
	position: fixed;
	inset: 0;
	width: 100vw;
	max-width: 100vw;
	height: var(--kfb-vh);
	margin: 0;
	border-radius: 0;
	z-index: 2147483000;
}

html.kfb-scroll-lock,
html.kfb-scroll-lock body {
	overflow: hidden !important;
	overscroll-behavior: none;
}

.kfb:fullscreen {
	width: 100vw;
	height: 100vh;
	max-width: none;
	margin: 0;
}

/* --------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.kfb-page img,
	.kfb-bar,
	.kfb-edge,
	.kfb-thumbs {
		transition-duration: 0.01ms !important;
	}
}

@media (max-width: 640px) {
	.kfb-bar {
		bottom: 10px;
		gap: 0;
		padding: 4px 6px;
	}

	.kfb-btn {
		width: 34px;
		height: 34px;
	}

	.kfb-ind {
		padding: 0 6px;
		font-size: 12px;
		min-width: 64px;
		height: 34px;
	}
}

/* -------------------------------------------------------- light backdrop */
/*
 * Applied by PHP as .kfb--light when the resolved backdrop's WCAG relative
 * luminance exceeds the threshold — so a custom cream or pale grey gets it
 * too, not just the "Weiss" preset. Every rule below is scoped to that class,
 * so the dark appearance is bit-for-bit unchanged when it is absent.
 *
 * The spine gutter gradient is deliberately left alone: black at 0.28 between
 * two light pages is exactly what a printed gutter looks like.
 */

.kfb--light {
	color: #1c1c1c;
}

/* A heavy black drop shadow reads as dirt on a light stage. */
.kfb--light .kfb-book {
	filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.18));
}

/*
 * Placeholder behind a page that has not decoded yet.
 *
 * The :not() is load-bearing: without it this rule outranks
 * `.kfb-page--empty` and the blank facing page of the cover gets a visible
 * grey slab. Leaf faces always hold real pages, so they need no exclusion.
 */
/*
 * background-color, never the `background` shorthand.
 *
 * .kfb-page carries the LQIP as an inline background-image and relies on the
 * base rule's background-size:cover / background-repeat:no-repeat longhands.
 * The shorthand resets every sub-property it does not name, so `background:`
 * here silently reverted those to auto/repeat and tiled the ~20px LQIP into a
 * grid of miniature covers while a page loaded. Dark never showed it because
 * its base rule uses the background-color longhand.
 */
.kfb--light .kfb-side,
.kfb--light .kfb-page:not(.kfb-page--empty),
.kfb--light .kfb-face {
	background-color: #e8e8e8;
}

.kfb--light .kfb-side.is-empty {
	background-color: transparent;
}

.kfb--light .kfb-boot {
	background: radial-gradient(120% 90% at 50% 40%, rgba(0, 0, 0, 0.05), transparent 70%);
}

/* Control bar */
.kfb--light .kfb-bar {
	background: rgba(252, 252, 252, 0.72);
	border-color: rgba(0, 0, 0, 0.1);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}

.kfb--light .kfb-btn {
	color: #1c1c1c;
}

.kfb--light .kfb-btn:hover {
	background: rgba(0, 0, 0, 0.09);
}

.kfb--light .kfb-btn:focus-visible {
	outline-color: #111;
}

.kfb--light .kfb-btn[aria-pressed="true"] {
	background: rgba(0, 0, 0, 0.14);
}

.kfb--light .kfb-ind {
	color: #232323;
}

.kfb--light .kfb-ind-read:hover {
	background: rgba(0, 0, 0, 0.09);
}

.kfb--light .kfb-ind-read:focus-visible,
.kfb--light .kfb-ind-input:focus {
	outline-color: #111;
}

.kfb--light .kfb-ind-input {
	background: rgba(255, 255, 255, 0.92);
	border-color: rgba(0, 0, 0, 0.35);
	color: #1c1c1c;
}

.kfb--light .kfb-sep {
	background: rgba(0, 0, 0, 0.16);
}

/* Thumbnail drawer */
.kfb--light .kfb-thumbs {
	background: rgba(250, 250, 250, 0.9);
	border-top-color: rgba(0, 0, 0, 0.1);
}

.kfb--light .kfb-thumbs-scroll {
	scrollbar-color: rgba(0, 0, 0, 0.32) transparent;
}

.kfb--light .kfb-thumbs-scroll::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.28);
}

.kfb--light .kfb-thumb {
	background: #dcdcdc;
}

/* White-on-white would be an invisible focus ring / selection marker. */
.kfb--light .kfb-thumb:focus-visible {
	outline-color: #111;
}

.kfb--light .kfb-thumb.is-current {
	box-shadow: inset 0 0 0 2px #111;
}

.kfb--light .kfb-thumb-n {
	color: #111;
	background: rgba(255, 255, 255, 0.78);
}

.kfb--light .kfb-noscript,
.kfb--light .kfb-admin-notice {
	color: #1c1c1c;
}

/* ------------------------------------------------ control bar without shadow */
/*
 * Set by the "Schatten der Bedienleiste ausblenden" setting.
 *
 * The root class is doubled up on purpose. The shadow is declared twice —
 * `.kfb-bar` (0,1,0) and `.kfb--light .kfb-bar` (0,2,0) — so a plain
 * `.kfb--noshadow .kfb-bar` would also be (0,2,0) and would only beat the
 * light declaration by source order. `.kfb.kfb--noshadow .kfb-bar` is (0,3,0)
 * and therefore wins in both themes wherever these rules end up. Same trap
 * that hid the empty facing page behind the light placeholder.
 *
 * Scope is deliberately just the bar: .kfb-thumbs has no drop shadow (only a
 * 1px border-top), the remaining box-shadows are the inset selection rings on
 * thumbnails, and the book's shadow is a `filter: drop-shadow` on content
 * rather than chrome.
 */
.kfb.kfb--noshadow .kfb-bar {
	box-shadow: none;
}

/* ------------------------------------------------------------ gated state */
/*
 * Lead-capture gate. The first page must stay visible behind the popup's own
 * overlay, so this deliberately does NOT blur, fade or unmount anything — it
 * only takes away interaction and hides the chrome. The scrim is the popup's.
 *
 * Doubled root class again: chrome rules reach (0,2,0) in the light skin and
 * (0,3,0) for .kfb.is-thumbs-open .kfb-thumbs, so these are written to at
 * least match and are placed last so a tie resolves in their favour. JS also
 * sets `inert` on the wrapper, which covers keyboard and the a11y tree; the
 * pointer-events here are the fallback for browsers without it.
 */
.kfb.kfb--locked .kfb-stage {
	pointer-events: none;
}

.kfb.kfb--locked .kfb-bar,
.kfb.kfb--locked .kfb-edge,
.kfb.kfb--locked .kfb-thumbs {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}