/* Web flipbook reader (reader-issue.php + assets/js/reader.js).
   Always dark: the page art is the light source. Uses the site's tokens. */

html, body.taim-reader-body { height:100%; }
/* The admin bar is switched off for the reader (taim_issue_reader), but by then
   WordPress has already queued its 32px html bump. */
html:root { margin-top:0 !important; }
#wpadminbar { display:none !important; }
body.taim-reader-body {
	margin:0;
	overflow:hidden;
	background:#05070A;
	color:#fff;
	font-family:var(--font-sans);
	-webkit-font-smoothing:antialiased;
}

.taim-reader {
	position:relative;
	display:flex;
	flex-direction:column;
	height:100vh;
	height:100dvh;
	background:
		radial-gradient(900px 500px at 50% 110%, rgba(0,205,255,.10), transparent 70%),
		radial-gradient(700px 400px at 50% -20%, rgba(139,92,246,.10), transparent 70%),
		#05070A;
}

/* The panels below set display:flex/grid, which beats the UA's [hidden] rule;
   without this they all render at once over the book. */
.taim-reader [hidden] { display:none !important; }

/* ---- Top bar ---- */
.taim-reader__bar {
	flex:0 0 auto;
	display:flex;
	align-items:center;
	gap:14px;
	height:60px;
	padding:0 16px;
	padding-left:max(16px, env(safe-area-inset-left));
	padding-right:max(16px, env(safe-area-inset-right));
	border-bottom:1px solid rgba(255,255,255,.08);
	background:rgba(5,7,10,.85);
	backdrop-filter:blur(10px);
	position:relative;
	z-index:30;
}
.taim-reader__back {
	display:grid;
	place-items:center;
	width:38px; height:38px;
	border-radius:10px;
	color:#fff;
	text-decoration:none;
}
.taim-reader__back:hover { background:rgba(255,255,255,.08); color:#fff; }
.taim-reader__brand { display:block; flex:0 0 auto; }
.taim-reader__brand img { height:28px !important; }
.taim-reader__title {
	margin:0 0 0 6px;
	padding-left:16px;
	border-left:1px solid rgba(255,255,255,.14);
	font-family:var(--font-mono);
	font-size:12.5px;
	font-weight:500;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--ink-200);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	min-width:0;
}
.taim-reader__vol { margin-left:12px; padding-left:12px; border-left:1px solid rgba(255,255,255,.14); color:var(--ink-300); }
.taim-reader__tools { margin-left:auto; display:flex; align-items:center; gap:4px; }
.taim-reader__tool,
.taim-reader__count {
	display:inline-flex;
	align-items:center;
	gap:8px;
	height:38px;
	padding:0 12px;
	border:0;
	border-radius:10px;
	background:transparent;
	color:var(--ink-100);
	font:500 13px/1 var(--font-sans);
	cursor:pointer;
	transition:background var(--dur-fast, .15s) ease, color var(--dur-fast, .15s) ease;
}
.taim-reader__tool:hover,
.taim-reader__count:hover { background:rgba(255,255,255,.08); color:#fff; }
.taim-reader__tool[aria-pressed="true"] { background:rgba(0,205,255,.14); color:var(--cyan-400); }
.taim-reader__tool:focus-visible,
.taim-reader__count:focus-visible,
.taim-reader__nav:focus-visible,
.taim-reader__back:focus-visible { outline:2px solid var(--cyan-500); outline-offset:2px; }
.taim-reader__count {
	margin-right:6px;
	font-family:var(--font-mono);
	letter-spacing:.04em;
	border:1px solid rgba(255,255,255,.14);
}
.taim-reader__of { color:var(--ink-300); }
.taim-reader__goto {
	width:5.5em;
	height:38px;
	margin-right:6px;
	padding:0 6px;
	border:1px solid var(--cyan-500);
	border-radius:6px;
	background:#000;
	color:#fff;
	font:500 13px/1 var(--font-mono);
}

/* ---- Stage ---- */
.taim-reader__stage {
	position:relative;
	flex:1 1 auto;
	min-height:0;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px 84px 28px;
}
.taim-reader__book {
	width:100%;
	height:100%;
	opacity:0;
	transition:opacity .4s ease;
}
.taim-reader.is-ready .taim-reader__book { opacity:1; }
/* StPageFlip: with autoSize off it leaves sizing to us. Fill the stage so its
   bounds maths fits the pages to both width and height, and drop the inline
   min-width it sets (430px) so phones never scroll sideways. */
.taim-reader__book.stf__parent { min-width:0 !important; min-height:0 !important; }
.taim-reader__book .stf__wrapper { position:relative; width:100%; height:100%; }
.taim-reader__book .stf__block { transition:transform .5s ease; }
.taim-reader__loading {
	position:absolute;
	inset:auto 0 50%;
	margin:0;
	text-align:center;
	font-family:var(--font-mono);
	font-size:12px;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--ink-300);
	pointer-events:none;
}
.taim-reader.is-ready .taim-reader__loading { display:none; }

/* Pages */
.taim-leaf {
	background:#0E141C;
	overflow:hidden;
}
.taim-leaf::before {
	/* shimmer placeholder until the image arrives */
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(110deg, #0E141C 30%, #1B2430 50%, #0E141C 70%) 0 0 / 250% 100%;
	animation:taim-reader-shimmer 1.4s linear infinite;
}
.taim-leaf.is-loaded::before { display:none; }
.taim-leaf.is-failed::before {
	content:"Couldn\2019t load this page";
	display:grid;
	place-items:center;
	animation:none;
	background:#0E141C;
	color:var(--ink-300);
	font:500 12px/1.4 var(--font-mono);
	letter-spacing:.08em;
	text-transform:uppercase;
}
.taim-leaf img {
	position:relative;
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	user-select:none;
	-webkit-user-drag:none;
}
.stf__parent { box-shadow:0 30px 80px rgba(0,0,0,.55); }

@keyframes taim-reader-shimmer { to { background-position:-250% 0; } }

/* Prev / next */
.taim-reader__nav {
	position:absolute;
	top:50%;
	z-index:5;
	display:grid;
	place-items:center;
	width:56px; height:56px;
	margin-top:-28px;
	border:1px solid rgba(255,255,255,.14);
	border-radius:50%;
	background:rgba(14,20,28,.7);
	color:#fff;
	cursor:pointer;
	transition:background .15s ease, border-color .15s ease, opacity .2s ease, transform .15s ease;
}
.taim-reader__nav:hover { background:var(--cyan-500); border-color:var(--cyan-500); color:#000; }
.taim-reader__nav:active { transform:scale(.95); }
.taim-reader__nav--prev { left:16px; }
.taim-reader__nav--next { right:16px; }
.taim-reader.is-first .taim-reader__nav--prev,
.taim-reader.is-last .taim-reader__nav--next { opacity:0; pointer-events:none; }

/* ---- Contents panel (slides in from the right) ---- */
.taim-reader__panel {
	position:absolute;
	top:60px; right:0; bottom:0;
	z-index:20;
	width:min(400px, 100%);
	display:flex;
	flex-direction:column;
	background:#0A0E14;
	border-left:1px solid rgba(255,255,255,.08);
	box-shadow:-30px 0 60px rgba(0,0,0,.5);
}
.taim-reader__panel-head {
	flex:0 0 auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:18px 20px 14px;
	border-bottom:1px solid rgba(255,255,255,.08);
}
.taim-reader__panel-head h2 {
	margin:0;
	font-family:var(--font-mono);
	font-size:12px;
	font-weight:500;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--cyan-400);
}
.taim-reader__close {
	width:34px; height:34px;
	border:0;
	border-radius:8px;
	background:transparent;
	color:var(--ink-200);
	font-size:24px;
	line-height:1;
	cursor:pointer;
}
.taim-reader__close:hover { background:rgba(255,255,255,.08); color:#fff; }
.taim-reader__toc { list-style:none; margin:0; padding:8px 10px 24px; overflow-y:auto; }
.taim-reader__tocitem {
	display:grid;
	grid-template-columns:minmax(0,1fr) auto;
	gap:4px 14px;
	width:100%;
	padding:14px 12px;
	border:0;
	border-radius:10px;
	background:transparent;
	color:#fff;
	text-align:left;
	cursor:pointer;
}
.taim-reader__tocitem:hover { background:rgba(255,255,255,.06); }
.taim-reader__tocsec {
	grid-column:1 / -1;
	font-family:var(--font-mono);
	font-size:10.5px;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--cyan-400);
}
.taim-reader__toctitle { font-size:15px; font-weight:600; line-height:1.35; white-space:normal; overflow-wrap:anywhere; }
.taim-reader__tocpage { font-family:var(--font-mono); font-size:12px; color:var(--ink-300); align-self:start; padding-top:2px; }

/* ---- All pages sheet ---- */
.taim-reader__sheet {
	position:absolute;
	inset:60px 0 0;
	z-index:20;
	display:flex;
	flex-direction:column;
	background:#05070A;
}
.taim-reader__thumbs {
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(118px, 1fr));
	gap:22px 16px;
	padding:22px 24px 40px;
	overflow-y:auto;
}
.taim-reader__thumb {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:8px;
	padding:0;
	border:0;
	background:none;
	color:var(--ink-300);
	font:500 11.5px/1 var(--font-mono);
	cursor:pointer;
}
.taim-reader__thumb img {
	display:block;
	width:100%;
	height:auto;
	background:#0E141C;
	border-radius:4px;
	outline:2px solid transparent;
	outline-offset:3px;
	transition:outline-color .15s ease, transform .15s ease;
}
.taim-reader__thumb:hover img { transform:translateY(-3px); outline-color:rgba(255,255,255,.3); }
.taim-reader__thumb.is-current img { outline-color:var(--cyan-500); }
.taim-reader__thumb.is-current { color:var(--cyan-400); }

/* ---- Zoom ---- */
.taim-reader__zoom {
	position:absolute;
	inset:60px 0 0;
	z-index:25;
	background:#000;
}
.taim-reader__zoom-view {
	position:absolute;
	inset:0;
	overflow:auto;
	cursor:grab;
	overscroll-behavior:contain;
}
.taim-reader__zoom-view.is-dragging { cursor:grabbing; }
.taim-reader__zoom-pages {
	display:flex;
	justify-content:center;
	width:100%;
	margin:0 auto;
}
.taim-reader__zoom-pages img { display:block; width:100%; max-width:100%; height:auto; user-select:none; }
.taim-reader__zoom-pages.is-spread img { width:50%; }
.taim-reader__zoom-tools {
	position:absolute;
	right:18px; bottom:18px;
	z-index:2;
	display:flex;
	gap:6px;
	padding:6px;
	border-radius:14px;
	background:rgba(14,20,28,.85);
	border:1px solid rgba(255,255,255,.12);
	backdrop-filter:blur(8px);
}
.taim-reader__zoom-tools button {
	width:40px; height:40px;
	border:0;
	border-radius:10px;
	background:transparent;
	color:#fff;
	font-size:22px;
	line-height:1;
	cursor:pointer;
}
.taim-reader__zoom-tools button:hover { background:rgba(255,255,255,.1); }

/* ---- Error state ---- */
.taim-reader__stage--error { padding:24px; }
.taim-reader__error { max-width:440px; text-align:center; }
.taim-reader__error h2 { margin:0 0 10px; font-size:24px; }
.taim-reader__error p { margin:0 0 24px; color:var(--ink-200); line-height:1.5; }

/* ---- Responsive ---- */
@media (max-width:900px) {
	.taim-reader__stage { padding:14px 12px 18px; }
	.taim-reader__nav { width:44px; height:44px; margin-top:-22px; }
	.taim-reader__nav--prev { left:6px; }
	.taim-reader__nav--next { right:6px; }
	.taim-reader__tool span { display:none; }
	.taim-reader__title { display:none; }
}
@media (max-width:560px) {
	.taim-reader__brand { display:none; }
	.taim-reader__bar { gap:6px; padding:0 8px; }
	.taim-reader__tool { padding:0 9px; }
	.taim-reader__nav { opacity:.75; }
	.taim-reader__thumbs { grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); padding:16px; }
}

@media (prefers-reduced-motion:reduce) {
	.taim-leaf::before { animation:none; }
	.taim-reader__book, .taim-reader__nav, .taim-reader__thumb img { transition:none; }
}