/*!
 * turn_page.css — turn.js reader for NanoReash
 * Version 1.8.7 (2026-08-09)
 *
 * Copyright (c) Christopher Sarich — SKIZCorp / TechArtery, Sydney, Australia.
 * All rights reserved.
 *
 * Licensed to mydigitalbook.com and infused into the NanoReash web operating
 * system for that domain only. If you wish to apply it on your own domain,
 * make contact first so the author of the script can be credited accordingly.
 *
 * turn.js is the separate work of Emmanuel Garcia, licensed to the copyright
 * holder above. This module is an integration layer and neither extends nor
 * sublicenses that work.
 */

/* ===================================================================
   Required only. Every rule below is load-bearing: delete any of it and
   the book miscounts pages, leaks through leaves, or fails to clip.

   No appearance rules, no colours, no fonts, no gradients, no image
   assets. Boards, plates and page faces inherit from nreash.css, so
   nothing here can conflict with the site stylesheet.
   =================================================================== */


/* The book is a nested element inside .detainer. The frame keeps its own
   background, radius, shadow and width - none of that is touched here.

   Two things it must do. Stay open, because a lifted leaf travels outside
   its box while .interscroll and toggle_width('twp') both want
   overflow:auto. And centre its child, because turn.js writes marginLeft
   inline on the book to shift a lone cover over the spine position - that
   inline value defeats `margin: 0 auto`, leaving the book flush left. With
   the frame centring, the same marginLeft becomes a nudge either side of
   centre, which is what it was written to be.

   display is stated rather than assumed: justify-content does nothing on a
   block container, so relying on whatever nreash.css sets would make the
   centring depend on a rule this file cannot see. The frame has one child
   now, so flex here is equivalent to whatever it was. */
#twp.detainer {
	overflow: visible;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

/* turn.js owns this element outright - it sets position and a pixel box on
   it and absolutely positions every leaf inside. No margin here: turn.js
   writes marginLeft itself and the frame does the centring. */
#twp .turn-book {
	position: relative;
	overflow: visible;
	flex: 0 0 auto;
}

/* The parked original. Already off-screen by inline style; this is the
   guard for the case where that style is overridden. */
#turn-page-source { visibility: hidden; }

/* Leaf faces must be opaque or you read the next page through this one.
   The colour is not set here: every leaf is given the CMS page_bckcolor
   class by the module, so it comes from nreash.css and this stylesheet
   states no colour at all. */

/* Clipping is what makes a face a face; backface-visibility is what stops
   the reverse of a leaf showing through mid-flip. */
#twp .turn-book .page {
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* The window onto the fitted flow. Without overflow:hidden the column that
   did not fit spills across the gutter onto the facing page. */
#twp .turn-book .flow-viewport {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

/* --------------------------------------------------------------- boards

   The front and back covers. Both are hard leaves - turn.js folds them
   rigidly rather than as paper - and both carry an image with the title
   over it. The back one takes the last CMS page's image, so the book
   closes on something belonging to it rather than a blank slab.

   These rules were lost when the leaf selectors were rescoped under
   .turn-book, which is why the boards have been rendering bare. */

#twp .turn-book .hard {
	background-color: inherit;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

/* Without an image the board still has to read as a board, not as a blank
   page. No palette: a gradient of the page's own colour, darkened. */
#twp .turn-book .hard:not(.has-cover) {
	background-image: linear-gradient(135deg,
		rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.34) 60%, rgba(0,0,0,0.52) 100%);
}

#twp .turn-book .hard .cover-plate {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 12% 10% 10%;
	background-image: linear-gradient(to top,
		rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0) 100%);
}
#twp .turn-book .hard .cover-plate h1,
#twp .turn-book .hard .cover-plate h2 {
	margin: 0;
	color: #fff;
	font-weight: 300;
	line-height: 1.15;
}
#twp .turn-book .hard .cover-plate h2 { font-size: 1.1rem; }

/* The inside faces of the boards - front-side and back-side - carry no
   image. They are the pastedown, and take the page colour. */
#twp .turn-book .hard.front-side,
#twp .turn-book .hard.back-side {
	background-image: none;
}

/* ------------------------------------------------- the two faces of a page

   One CMS page is one spread: its images on the left face, DATA_desc on the
   right. On a phone there is one face, so the image becomes a band across
   the top with the words beneath. */

#twp .turn-book .book-page-image,
#twp .turn-book .book-page-text,
#twp .turn-book .book-page-single {
	display: flex;
	flex-direction: column;
}

#twp .turn-book .book-image-face {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 0;
}
#twp .turn-book .book-image-face.is-band { height: 42%; flex: 0 0 42%; }

/* The main image takes the same 90% measure as the strip below it, so the
   two align and the face has a consistent margin. */
#twp .turn-book .book-image-main {
	flex: 1 1 auto;
	min-height: 0;
	width: 90%;
	margin: 0 auto;
	background-size: cover;
	background-position: center;
	position: relative;
}

#twp .turn-book .book-image-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 12% 8% 6%;
	color: #fff;
	background-image: linear-gradient(to top,
		rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.28) 55%, rgba(0,0,0,0) 100%);
}

/* image_path2 through image_path7. Only rendered when there is more than
   one, so a page with a single image gets the whole face for it.

   The strip is 90% of the column and centred, leaving a 5% margin either
   side. --thumb-count is set by the module, so the thumbs divide that width
   between them however many there are - two images give two wide thumbs,
   seven give seven narrow ones, and neither overflows the column. */
#twp .turn-book .book-image-strip {
	flex: 0 0 auto;
	display: flex;
	gap: 2%;
	width: 90%;
	margin: 0 auto;
	padding: 4% 0;
	box-sizing: border-box;
}
#twp .turn-book .book-thumb {
	/* equal shares of the strip, less the gaps between them */
	flex: 0 0 calc((100% - (var(--thumb-count, 3) - 1) * 2%) / var(--thumb-count, 3));
	aspect-ratio: 4 / 3;
	min-height: 44px;             /* a thumb has to be a touch target too */
	border: 0;
	padding: 0;
	cursor: pointer;
	background-size: cover;
	background-position: center;
	opacity: 0.55;
	transition: opacity 0.2s ease;
}

/* aspect-ratio is recent enough to want a floor under it. */
@supports not (aspect-ratio: 4 / 3) {
	#twp .turn-book .book-thumb { height: 56px; }
}
#twp .turn-book .book-thumb.is-current,
#twp .turn-book .book-thumb:hover { opacity: 1; }

/* A thumb is invisible until its image has loaded, so one pointing at a file
   that is no longer there never flashes up as an empty frame before the
   module removes it. */
#twp .turn-book .book-thumb {
	visibility: hidden;
}
#twp .turn-book .book-thumb.is-loaded {
	visibility: visible;
}

/* A page with no image at all keeps the face blank rather than showing a
   broken frame - the words face still carries the whole page. */
#twp .turn-book .book-image-none { background-color: inherit; }

/* ------------------------------------------------------------- words face */

#twp .turn-book .book-text-face {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	padding: 9% 11% 9% 16.5%;
}
#twp .turn-book .book-text-face.is-single { padding: 6% 8%; }

#twp .turn-book .book-heading { margin: 0 0 0.25em; }
#twp .turn-book .book-meta,
#twp .turn-book .book-keywords {
	margin: 0;
	flex: 0 0 auto;
	opacity: 0.5;
}
#twp .turn-book .book-meta { margin-bottom: 0.9em; }
#twp .turn-book .book-keywords { margin-top: 0.9em; }

/* The block the template renders for the reader to read. It is data, not
   layout, and must never show on the page itself. */
.turnpage-media { display: none !important; }

/* The flow is positioned by transform against a measurement taken with
   these exact metrics. A margin here shifts every page by a constant and
   the columns stop lining up with the viewport. */
/* font-size is set inline by the module, computed from the measured text
   block so the line stays near 62 characters at every book size. Do not set
   one here - the measuring pass and the live leaf must agree exactly, or the
   column count is taken against type the reader never sees. */
#twp .turn-book .book-flow {
	margin: 0;
	will-change: transform;
}

/* Fallback: multi-column layout did not apply, so the leaf scrolls rather
   than silently clipping the book to its first page. */
#twp .turn-book .flow-viewport.flow-scroll {
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Pagination correctness, not typography. An image taller than the column
   puts the flow out of step with the measurement it was counted from, and
   a table split across a column boundary is a broken page. */
#twp .turn-book .book-flow img {
	max-width: 100%;
	max-height: 88%;
	height: auto;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}
#twp .turn-book .book-flow table,
#twp .turn-book .book-flow blockquote,
#twp .turn-book .book-flow pre,
#twp .turn-book .book-flow li {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}
#twp .turn-book .book-flow h1,
#twp .turn-book .book-flow h2,
#twp .turn-book .book-flow h3 {
	break-after: avoid;
	-webkit-column-break-after: avoid;
}
#twp .turn-book .book-flow p { orphans: 2; widows: 2; }

/* The page number is a sibling of the absolutely positioned viewport. Left
   in flow it lands on top of the first line of text. */
#twp .turn-book .page-number {
	position: absolute;
	bottom: 14px;
	pointer-events: none;
}
#twp .turn-book .page.even .page-number { left: 26px; }
#twp .turn-book .page.odd  .page-number { right: 26px; }

/* Chapters are fetched in parallel before the book can be measured, so the
   frame reserves its height and dims until they land. Without this the page
   collapses to nothing for the duration of the fetches. */
#twp.detainer.book-loading {
	min-height: 60vh;
	opacity: 0.5;
}

/* A chapter whose page could not be fetched keeps its place in the book so
   the sequence and the URLs stay intact. It needs no colour of its own. */
#twp .turn-book .book-chapter-missing {
	opacity: 0.55;
	font-style: italic;
}

/* ------------------------------------------------------------------ touch */

/* turn.js binds touchstart/touchmove itself, but the browser decides first
   whether a gesture is a scroll. Without touch-action it starts scrolling on
   the initial movement and the fold never gets the gesture at all - the page
   just refuses to turn under a finger.

   pan-y rather than none: a page turn is a horizontal drag, so handing
   horizontal gestures to turn.js while leaving vertical scrolling to the
   browser keeps a long leaf readable on a phone. */
#twp .turn-book,
#twp .turn-book .page {
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}

/* A long press on a leaf raises the selection handles mid-drag, which reads
   as the turn having failed. Text stays selectable in the flow itself - only
   the leaf chrome around it is inert. */
#twp .turn-book .page {
	-webkit-touch-callout: none;
}
#twp .turn-book .book-flow {
	-webkit-touch-callout: default;
	-webkit-user-select: text;
	user-select: text;
}

/* Momentum scrolling for the fallback leaf, and for a chapter longer than
   its column on a device where multi-column did not apply. */
#twp .turn-book .flow-viewport.flow-scroll {
	-webkit-overflow-scrolling: touch;
}

/* The arrows are the primary control on a phone, where there is no hover to
   discover the corner. They must clear the thumb and stay above the book. */
.pagearrows { z-index: 20; }

@media (max-width: 759px) {
	.pagearrows a {
		min-width: 44px;
		min-height: 44px;
		line-height: 44px;
		display: inline-block;
		text-align: center;
	}

	/* No hover on touch, so the corner hint would sit at full strength
	   forever. It is noise on a small leaf. */
	#twp .turn-book .page.odd:not(.hard)::after { display: none; }
}