/* ==========================================================================
   CiberLab guidebooks: reader chrome (screen only)
   --------------------------------------------------------------------------
   Loaded with data-pagedjs-ignore.

   Paged.js strips the original stylesheet links and re-inserts only the CSS it
   processed, evaluating media queries as if the target were print. Any
   @media screen rule placed in guidebook.css is discarded, and @media print
   rules start applying on screen: that is how the toolbar once ended up hidden
   behind a print-only display:none.

   So the split is:
     guidebook.css  the document, processed by Paged.js, defines the PDF
     reader.css     the reader chrome, ignored by Paged.js, screen only

   The browser still applies this file when printing, so the print block below
   is required to keep the chrome off the paper.
   ========================================================================== */

:root {
	--reader-dark: #0f172a;
	--reader-purple: #a855f7;
	--reader-blue: #3b82f6;
	--reader-font: Montserrat, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
	background: var(--reader-dark);
	padding: 0 0 80px;
}

.pagedjs_pages {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 88px 16px 24px;
	zoom: var(--page-scale, 1);
}

.pagedjs_page {
	background: #ffffff;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
	border-radius: 2px;
	overflow: hidden;
}

@media (max-width: 820px) {
	body {
		padding-top: 72px;
	}

	.pagedjs_pages {
		padding: 0 0 24px;
		gap: 16px;
	}

	.pagedjs_page {
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
		border-radius: 0;
	}
}

/* Keep the unpaginated content hidden until Paged.js is done */
body:not(.guidebook-ready) .pagedjs_pages {
	visibility: hidden;
}

/* --------------------------------------------------------------------------
   Loading state
   -------------------------------------------------------------------------- */
.guidebook-loading {
	position: fixed;
	inset: 0;
	z-index: 40;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background: var(--reader-dark);
	color: #cbd5e1;
	font-family: var(--reader-font);
	font-size: 14px;
}

.guidebook-loading__ring {
	width: 44px;
	height: 44px;
	border: 3px solid rgba(148, 163, 184, 0.25);
	border-top-color: var(--reader-purple);
	border-radius: 50%;
	animation: guidebook-spin 0.9s linear infinite;
}

@keyframes guidebook-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.guidebook-loading__ring {
		animation-duration: 3s;
	}
}

/* --------------------------------------------------------------------------
   Toolbar
   -------------------------------------------------------------------------- */
.guidebook-toolbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	background: rgba(17, 24, 39, 0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid #374151;
	color: #e5e7eb;
	font-family: var(--reader-font);
	font-size: 14px;
}

.guidebook-toolbar__back,
.guidebook-toolbar__action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid #4b5563;
	border-radius: 8px;
	background: transparent;
	color: #e5e7eb;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.guidebook-toolbar__back:hover,
.guidebook-toolbar__action:hover {
	background: #1f2937;
	border-color: #6b7280;
}

.guidebook-toolbar__action--primary {
	border-color: transparent;
	background: linear-gradient(90deg, var(--reader-purple), var(--reader-blue));
	color: #ffffff;
	font-weight: 600;
}

.guidebook-toolbar__action--primary:hover {
	background: linear-gradient(90deg, #9333ea, #2563eb);
	border-color: transparent;
}

.guidebook-toolbar__title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}

.guidebook-toolbar__pages {
	font-variant-numeric: tabular-nums;
	color: #9ca3af;
}

@media (max-width: 720px) {
	.guidebook-toolbar__title,
	.guidebook-toolbar__pages {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Contents Drawer
   -------------------------------------------------------------------------- */
.guidebook-drawer {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: flex;
	justify-content: flex-start;
	background: rgba(2, 6, 23, 0.7);
	backdrop-filter: blur(4px);
}

.guidebook-drawer[hidden] {
	display: none !important;
}

.guidebook-drawer__panel {
	display: flex;
	flex-direction: column;
	width: min(22rem, 86vw);
	height: 100%;
	background: #0f172a;
	border-right: 1px solid #334155;
	font-family: var(--reader-font);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	color: #e2e8f0;
}

.guidebook-drawer__header {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem 1rem 0.75rem;
	background: #020617;
	border-bottom: 1px solid #334155;
	color: #e5e7eb;
	font-size: 0.95rem;
	font-weight: 600;
}

.guidebook-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	border: 1px solid #475569;
	border-radius: 0.5rem;
	background: transparent;
	color: #e5e7eb;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	touch-action: manipulation;
}

.guidebook-drawer__close:hover,
.guidebook-drawer__close:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	border-color: #64748b;
}

.guidebook-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0 2rem;
}

.guidebook-drawer__link {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	min-height: 2.75rem;
	color: #cbd5e1;
	font-size: 0.92rem;
	line-height: 1.4;
	text-decoration: none;
	border-left: 3px solid transparent;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	transition: background 0.15s;
}

.guidebook-drawer__link:hover,
.guidebook-drawer__link:focus-visible {
	background: #1e293b;
	color: #ffffff;
}

.guidebook-drawer__num {
	font-family: monospace;
	font-weight: 700;
	color: var(--reader-purple);
	flex-shrink: 0;
	min-width: 1.6rem;
}

.guidebook-drawer__title {
	flex: 1;
	min-width: 0;
}

.guidebook-drawer__link[aria-current="true"] {
	border-left-color: var(--reader-purple);
	background: #1e293b;
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   Print
   --------------------------------------------------------------------------
   This file escapes Paged.js but not the printer: the browser applies it
   normally. Every piece of screen chrome has to be taken off the paper here,
   otherwise the fixed toolbar prints over the first page.
   -------------------------------------------------------------------------- */
@media print {
	.guidebook-toolbar,
	.guidebook-loading,
	.guidebook-drawer {
		display: none !important;
	}

	body {
		background: none;
		padding: 0;
	}

	.pagedjs_pages {
		zoom: 1 !important;
		display: block;
		gap: 0;
		padding: 0;
	}

	.pagedjs_page {
		box-shadow: none;
		border-radius: 0;
	}

	/* Pagination may still be running when the reader hits print */
	body:not(.guidebook-ready) .pagedjs_pages {
		visibility: visible;
	}
}

/* --------------------------------------------------------------------------
   Fallback: Paged.js failed to load and the document stays in normal flow
   -------------------------------------------------------------------------- */
body.guidebook-unpaginated {
	background: #ffffff;
}

body.guidebook-unpaginated > section {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 24px;
}

/* --------------------------------------------------------------------------
   Cover capture mode: for generating cover.jpg
   -------------------------------------------------------------------------- */
body.cover-mode {
	background: #ffffff !important;
	padding: 0 !important;
}

body.cover-mode .guidebook-toolbar,
body.cover-mode .guidebook-loading {
	display: none !important;
}

body.cover-mode .pagedjs_pages {
	zoom: 1 !important;
	padding: 0 !important;
	gap: 0 !important;
	display: block !important;
}

body.cover-mode .pagedjs_page {
	box-shadow: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
}

body.cover-mode .pagedjs_page:not(:first-child) {
	display: none !important;
}