/* ==========================================================================
   CiberLab technical reports: 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 report.css is discarded, and @media print
   rules start applying on screen: that is how a toolbar ends up hidden behind
   a print-only display:none.

   So the split is:
     report.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.

   The chrome is deliberately colder than the guidebook reader: no purple
   gradient button, no glass. A report reader is an evidence viewer, and the
   only colour it carries is the document's severity, published by report.js
   as --reader-accent on :root.
   ========================================================================== */

:root {
	--reader-backdrop: #0a1017;
	--reader-panel: #141d28;
	--reader-line: #2b3a4c;
	--reader-text: #d7e0ea;
	--reader-text-soft: #8b9aab;
	--reader-font: "Source Sans 3", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--reader-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;

	/* report.js overwrites this from the document's severity */
	--reader-accent: #c2551f;
}

body {
	background: var(--reader-backdrop);
	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.6);
	border-radius: 1px;
	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(.report-ready) .pagedjs_pages {
	visibility: hidden;
}

/* --------------------------------------------------------------------------
   Loading state
   -------------------------------------------------------------------------- */
.report-loading {
	position: fixed;
	inset: 0;
	z-index: 40;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background: var(--reader-backdrop);
	color: var(--reader-text-soft);
	font-family: var(--reader-mono);
	font-size: 13px;
	letter-spacing: 0.04em;
}

.report-loading__ring {
	width: 40px;
	height: 40px;
	border: 2px solid rgba(139, 154, 171, 0.25);
	border-top-color: var(--reader-accent);
	border-radius: 50%;
	animation: report-spin 0.9s linear infinite;
}

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

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

/* --------------------------------------------------------------------------
   Toolbar
   -------------------------------------------------------------------------- */
.report-toolbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 20px;
	background: var(--reader-panel);
	border-bottom: 1px solid var(--reader-line);
	color: var(--reader-text);
	font-family: var(--reader-font);
	font-size: 14px;
}

/* The severity reads as a hairline along the top of the chrome */
.report-toolbar::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: var(--reader-accent);
}

.report-toolbar__back,
.report-toolbar__action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 13px;
	border: 1px solid var(--reader-line);
	border-radius: 4px;
	background: transparent;
	color: var(--reader-text);
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.report-toolbar__back:hover,
.report-toolbar__action:hover {
	background: #1e2937;
	border-color: #3d4f63;
}

.report-toolbar__action--primary {
	border-color: var(--reader-accent);
	background: var(--reader-accent);
	color: #ffffff;
	font-weight: 600;
}

.report-toolbar__action--primary:hover {
	background: var(--reader-accent);
	border-color: #ffffff;
}

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

/* Severity and classification, stated in the chrome as well as the document */
.report-toolbar__tag {
	padding: 4px 8px;
	border-radius: 3px;
	background: #0a1017;
	border: 1px solid var(--reader-line);
	font-family: var(--reader-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--reader-accent);
}

.report-toolbar__pages {
	font-family: var(--reader-mono);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--reader-text-soft);
	white-space: nowrap;
}

@media (max-width: 860px) {
	.report-toolbar__tag {
		display: none;
	}
}

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

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

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

.report-drawer__panel {
	width: min(22rem, 86vw);
	height: 100%;
	overflow-y: auto;
	background: #141d28;
	border-right: 1px solid var(--reader-line);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	color: var(--reader-text);
}

.report-drawer__header {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.15rem;
	background: #0a1017;
	border-bottom: 1px solid var(--reader-line);
	color: #ffffff;
	font-family: var(--reader-font);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.report-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: transparent;
	color: #ffffff;
	font-size: 1.25rem;
	line-height: 1;
	padding: 0.35rem 0.5rem;
	cursor: pointer;
	border-radius: 6px;
	touch-action: manipulation;
}

.report-drawer__close:hover,
.report-drawer__close:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.4);
	outline: none;
}

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

.report-drawer__link {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.75rem 1.15rem;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	color: var(--reader-text);
	font-size: 0.92rem;
	line-height: 1.35;
	text-decoration: none;
	transition: background 0.15s;
}

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

.report-drawer__num {
	font-family: var(--reader-mono);
	font-weight: 700;
	color: var(--reader-accent);
	flex-shrink: 0;
	min-width: 1.6rem;
}

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

.report-drawer__link[aria-current="true"] {
	background: #1e2937;
	box-shadow: inset 3px 0 0 var(--reader-accent);
	font-weight: 600;
	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 {
	.report-toolbar,
	.report-loading,
	.report-progress,
	.report-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(.report-ready) .pagedjs_pages {
		visibility: visible;
	}
}

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

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

/* --------------------------------------------------------------------------
   Cover capture mode: for generating cover.jpg
   --------------------------------------------------------------------------
   scripts/capture-cover.mjs loads the reader with ?cover=1, waits for the
   report-ready class and screenshots the first sheet, so everything else has
   to be out of the frame.
   -------------------------------------------------------------------------- */
body.cover-mode {
	background: #ffffff !important;
	padding: 0 !important;
}

body.cover-mode .report-toolbar,
body.cover-mode .report-loading,
body.cover-mode .report-progress,
body.cover-mode .report-drawer {
	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;
}