/*
 * Flipbook.
 *
 * The simple view is the baseline and needs no JavaScript; the flip stage is
 * hidden until the script decides it can run.
 */

.jmns-flipbook {
	margin-block: var(--wp--preset--spacing--50, 2rem);
}

.jmns-flipbook__title {
	margin-block-end: var(--wp--preset--spacing--30, 1rem);
}

.jmns-flipbook__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30, 1rem);
	align-items: center;
	justify-content: space-between;
	margin-block-end: var(--wp--preset--spacing--30, 1rem);
}

.jmns-flipbook__modes {
	display: flex;
	gap: 0.25rem;
}

.jmns-flipbook__mode {
	min-block-size: 44px;
	padding-inline: 0.9rem;
	border: 1px solid var(--wp--preset--color--interactive, #245746);
	background: transparent;
	color: var(--wp--preset--color--interactive, #245746);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.jmns-flipbook__mode.is-active {
	background-color: var(--wp--preset--color--interactive, #245746);
	color: var(--jmns-on-primary, #FFFFFF);
}

.jmns-flipbook__download-link {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-weight: 600;
}

.jmns-flipbook__notice {
	padding: var(--wp--preset--spacing--30, 1rem);
	background-color: var(--wp--preset--color--background, #FAF8F2);
	border-inline-start: 3px solid var(--wp--preset--color--primary-light, #8DAFA4);
}

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

.jmns-flipbook__stage {
	background-color: var(--wp--preset--color--background, #FAF8F2);
	padding: var(--wp--preset--spacing--30, 1rem);
}

.jmns-flipbook__book {
	margin-inline: auto;
	max-inline-size: 62rem;
	/*
	 * The book is never wider than this box, but a page standing on its own is
	 * moved sideways inside it — see `.is-alone` below. A transform does not
	 * change layout, but it does extend the scrollable area, and a lone last
	 * page shifted rightwards put 162px of empty canvas past the right edge of
	 * a 1440 viewport and gave the whole document a horizontal scrollbar.
	 * Nothing visible is lost: what is clipped here was already clipped out of
	 * the canvas by the rule that moved it. `clip` where it is understood,
	 * because `hidden` makes this a scroll container for no reason.
	 */
	overflow: hidden;
	overflow: clip;
}

.jmns-flipbook__controls {
	display: flex;
	gap: var(--wp--preset--spacing--30, 1rem);
	align-items: center;
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--30, 1rem);
}

.jmns-flipbook__nav {
	min-inline-size: 44px;
	min-block-size: 44px;
	border: 1px solid var(--wp--preset--color--interactive, #245746);
	background: transparent;
	color: var(--wp--preset--color--interactive, #245746);
	font-size: 1.25rem;
	cursor: pointer;
}

/*
 * An arrow with nowhere to go looks like it.
 *
 * Set by the script at the first view of the document and at the last. Dimmed
 * in place rather than hidden: the counter sits between the two arrows, and
 * taking one away at either end would slide the sentence sideways under the
 * reader.
 *
 * The same treatment and the same 0.35 as `.jmns-ticker__step[disabled]`, which
 * is the other pair of nav arrows the plugin draws and settled this first.
 * Weight matters here: at 0-2-0 this clears the theme's shared
 * `button[disabled]` at 0-1-1 (ADR-052), which a bare `.jmns-flipbook__nav`
 * would not.
 */
.jmns-flipbook__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.jmns-flipbook__counter {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.jmns-flipbook :focus-visible {
	outline: 3px solid var(--wp--preset--color--interactive, #245746);
	outline-offset: 2px;
}

/* --------------------------------------------------------- simple view -- */

.jmns-flipbook__pages {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jmns-flipbook__page-image {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border: 1px solid rgb(var(--jmns-hairline-rgb, 38 51 42) / var(--jmns-a-rule, 0.15));
}

/*
 * Every surface that shows a gazetted page, dimmed together.
 *
 * A gazetted page is a photograph of white paper, and on a dark scheme a
 * full-width sheet of it is the glare that scheme exists to avoid. The token is
 * 1 everywhere but `malam`, where it is 0.85.
 *
 * There are three such surfaces and the rule used to name one. `.stf__canvas`
 * is the default view — `loadFromImages()` draws the scans into a canvas rather
 * than building `<img>` elements, so a rule written against an image never
 * reached the book at all — and `.jmns-flipbook__single` is the one-page path.
 * Measured before this rule: under `malam` the simple view read
 * `brightness(0.85)` while the canvas beside it read `none`. The dimmer worked
 * only in the view a reader has to switch to, which is the view least likely to
 * be the one glaring at them.
 *
 * They are listed in one place for that reason. Three selectors that must carry
 * the same token will not stay in step if they are written three paragraphs
 * apart, and the failure is silent: each surface looks right on its own.
 *
 * Brightness only. The scan is never inverted and its hue is never touched: it
 * is the record as gazetted, and a reader holding the printed warta beside the
 * screen has to be looking at the same document. The download link is untouched
 * for the same reason — the file a visitor receives is the file as gazetted —
 * and so is the print stylesheet below.
 *
 * `brightness(1)` is not quite free: putting an image through a filter at all
 * sends it down a different rasterisation path, and on a 390px viewport the
 * downscaled scan resamples a little differently — 9,451 pixels of a
 * 6,588,000-pixel pass, all of them inside the photograph and none of them a
 * colour this stylesheet chose. `opacity` would have avoided it, and was not
 * used: opacity blends the scan towards whatever is behind it, which tints a
 * gazetted document towards the page ground. Brightness leaves the hue alone,
 * and a record of what was gazetted has to keep its own colour.
 */
.jmns-flipbook__page-image,
.jmns-flipbook__single,
.jmns-flipbook .stf__canvas {
	filter: brightness(var(--jmns-page-dim, 1));
}

.jmns-flipbook__page-label {
	margin-block: 0.35rem 0;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	text-align: center;
	opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
	/* No flip animation; the mode switch still works if someone wants it. */
	.jmns-flipbook__stage {
		scroll-behavior: auto;
	}
}

@media print {
	.jmns-flipbook__toolbar,
	.jmns-flipbook__stage {
		display: none;
	}

	/* Printing gets the pages, not a picture of a book. */
	.jmns-flipbook__simple {
		display: block;
	}

	/* Ink on paper is not a dark scheme. A visitor who prints the warta gets
	   the scan at the strength it was gazetted at, whatever they were reading
	   it in. All three surfaces, so the reset cannot fall behind the rule it
	   undoes — the stage is hidden above, but a hidden element with a filter is
	   one stylesheet edit away from being a visible one. */
	.jmns-flipbook__page-image,
	.jmns-flipbook__single,
	.jmns-flipbook .stf__canvas {
		filter: none;
	}
}

/* ----------------------------------------------------- a book, not a page -- */

/* --------------------------------------------- which way it turns ------ */

/*
 * The book reads left to right, and so do its controls.
 *
 * This is where the two rules used to live that turned the controls round to
 * face an Arabic-script binding: `flex-direction: row-reverse` on the row, and
 * `transform: scaleX(-1)` on both chevrons, so the arrow that led the reader
 * forward sat on the right and pointed right. cc9cc66 took them out. Their
 * readers pressed the chevron pointing right and went back a page, and given
 * the choice between the book's direction and the arrow's own glyph the
 * department took the glyph: right is next and left is previous.
 *
 * The page order has since followed them. It used to hand the library every
 * spread swapped so that each one read right to left — see `bookOrder()` in
 * flipbook.js, and the note there for the whole history — which left the reader
 * travelling rightwards through spreads whose two pages ran leftwards. It now
 * reads the same way the arrows do: the cover alone, then page two on the right
 * of the cover's blank back, then three and four, five and six.
 */

/*
 * The tint the stage is painted in.
 *
 * It is not the colour of an empty half of a spread, whatever it looks like it
 * ought to be: the library's canvas renderer fills the entire canvas white
 * before it draws a single page, so nothing behind the canvas is ever visible
 * inside the book. Where a blank leaf has to read as "no page here" it is
 * drawn, in `blankPage()`. What this colour does show is the margin around the
 * book, and the space either side of a page that is standing on its own —
 * which is the only reason that page has to be clipped out of the canvas rather
 * than simply moved.
 */
.jmns-flipbook__stage {
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
}

/*
 * A page with nothing beside it sits in the middle of the stage.
 *
 * The library draws a book two pages wide whatever is in it, so the lone cover
 * is painted on the right half of the canvas and a lone last page on the left
 * half, each with a page-sized white slab beside it. `centreLone()` measures
 * which half holds the page and writes these three values; the clip drops the
 * rest of the canvas so the stage shows through, and the shift moves what is
 * left into the middle.
 *
 * `inset(0)` is the resting value rather than `none` so the two states can be
 * interpolated: a clip path only animates against another clip path of the same
 * shape. The transition is what lets the cover slide back to its hinge as it
 * begins to open, instead of jumping there — see `centreLone()` for why the
 * class comes off at that moment at all.
 */
.jmns-flipbook__book :where(canvas) {
	clip-path: inset(0);
}

.jmns-flipbook.is-alone .jmns-flipbook__book canvas {
	clip-path: inset(0 var(--jmns-alone-right, 0) 0 var(--jmns-alone-left, 0));
	transform: translateX(var(--jmns-alone-shift, 0));
}

@media (prefers-reduced-motion: no-preference) {
	.jmns-flipbook__book :where(canvas) {
		transition: clip-path 180ms ease, transform 180ms ease;
	}
}/*
 * A single-page document is not a book.
 *
 * No spread, no spine, nothing to turn: the page is shown on its own, centred,
 * at the width one page of a spread would have had. The nav buttons go with it
 * — there is nowhere to go.
 */
.jmns-flipbook.is-single .jmns-flipbook__book {
	display: flex;
	justify-content: center;
}

.jmns-flipbook.is-single .jmns-flipbook__nav {
	visibility: hidden;
}

.jmns-flipbook.is-single .jmns-flipbook__single {
	display: block;
	max-inline-size: min(100%, 34rem);
	block-size: auto;
}