/* ============================================================================
   Amnesty Freedom — Research reader
   ----------------------------------------------------------------------------
   Three reading themes, a book that turns its pages, and chrome that gets out
   of the way. Everything is scoped under .afr so nothing here can leak into
   the rest of the site, and nothing here loads a font or an image from anyone
   else's server.

   Typography note: the site's homepage loads Source Sans 3 from Google. This
   template does not, on purpose — see the comment above the enqueue in
   bootstrap.php. Source Sans 3 is still first in the stack, so it is used when
   the reader's browser already has it.
   ========================================================================= */

.afr-html, .afr-body {
	margin: 0;
	padding: 0;
	background: #0d1117;
}

.afr,
.afr *,
.afr *::before,
.afr *::after { box-sizing: border-box; }

.afr {
	/* Chrome */
	--afr-chrome:      #12181f;
	--afr-chrome-2:    #1a222c;
	--afr-chrome-line: #2a3540;
	--afr-on-chrome:   rgba(255,255,255,0.92);
	--afr-on-chrome-2: rgba(255,255,255,0.58);
	--afr-accent:      #4a7fa5;
	--afr-accent-lt:   #7fb8d8;

	/* Reading surface — overridden by the theme classes below */
	--afr-stage:   #232c36;
	--afr-paper:   #ffffff;
	--afr-ink:     #1a1f24;
	--afr-canvas-filter: none;
	--afr-paper-edge: rgba(0,0,0,0.16);

	/* Geometry, written by the script */
	--afr-pw: 420px;
	--afr-ph: 594px;
	--afr-radius: 2px;

	font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
	             'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	color: var(--afr-on-chrome);

	display: grid;
	grid-template-rows: auto 1fr auto;
	/* minmax(0,…) rather than 1fr: without it, a grid item is at least as wide
	   as its contents, the stage inherits the width of the open book, and the
	   script then measures the book to decide how big the book should be. That
	   loop is why the reader used to stay in two-page mode on a phone. */
	grid-template-columns: minmax(0, 1fr);
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	background: var(--afr-chrome);
}

.afr.is-theme-sepia {
	--afr-stage: #2b2822;
	--afr-paper: #f6ecd9;
	--afr-canvas-filter: sepia(0.32) saturate(0.9) brightness(0.99);
}

.afr.is-theme-dark {
	--afr-stage: #0c1015;
	--afr-paper: #171c22;
	--afr-canvas-filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(1.05);
	--afr-paper-edge: rgba(0,0,0,0.5);
}

/* Screen-reader-only text, in case the theme does not define it. */
.afr .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ── Top bar ─────────────────────────────────────────────────────────── */

.afr-bar {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 56px;
	padding: 0 14px;
	background: var(--afr-chrome);
	border-bottom: 1px solid var(--afr-chrome-line);
	position: relative;
	z-index: 40;
}

.afr-bar-left,
.afr-bar-right { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

.afr-bar-title {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
	padding: 0 8px;
}

.afr-doc-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--afr-on-chrome);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.afr-doc-sub {
	margin: 2px 0 0;
	font-size: 11.5px;
	font-weight: 400;
	color: var(--afr-on-chrome-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.afr-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 12px 0 8px;
	color: var(--afr-on-chrome-2);
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid transparent;
	transition: color .15s, border-color .15s;
}
.afr-back svg { width: 18px; height: 18px; flex: 0 0 auto; }
.afr-back:hover { color: #fff; border-color: var(--afr-chrome-line); }

.afr-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	color: var(--afr-on-chrome-2);
	cursor: pointer;
	transition: color .15s, background .15s, border-color .15s;
}
.afr-iconbtn svg { width: 20px; height: 20px; }
.afr-iconbtn:hover { color: #fff; background: var(--afr-chrome-2); }
.afr-iconbtn:focus-visible,
.afr .afr-tab:focus-visible,
.afr-turn:focus-visible,
.afr-btn:focus-visible { outline: 2px solid var(--afr-accent-lt); outline-offset: 2px; }
.afr-iconbtn.is-on,
.afr-iconbtn[aria-pressed="true"] { color: var(--afr-accent-lt); background: var(--afr-chrome-2); }

/* The … menu */
.afr-menu-wrap { position: relative; }
.afr-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 244px;
	background: var(--afr-chrome-2);
	border: 1px solid var(--afr-chrome-line);
	box-shadow: 0 18px 40px rgba(0,0,0,0.45);
	padding: 6px;
	z-index: 50;
}
.afr-menu[hidden] { display: none; }
.afr-menu-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 9px 10px;
	background: none;
	border: 0;
	color: var(--afr-on-chrome);
	font: inherit;
	font-size: 13.5px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.afr-menu-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.afr-menu-note { margin-left: auto; font-size: 11.5px; color: var(--afr-on-chrome-2); }

/* ── Main ────────────────────────────────────────────────────────────── */

.afr-main {
	position: relative;
	display: flex;
	min-height: 0;
	min-width: 0;
	background: var(--afr-stage);
	transition: background .25s;
}

/* ── Side panel ──────────────────────────────────────────────────────── */

.afr-panel {
	flex: 0 0 300px;
	width: 300px;
	display: flex;
	flex-direction: column;
	background: var(--afr-chrome);
	border-right: 1px solid var(--afr-chrome-line);
	min-height: 0;
	z-index: 30;
}
.afr-panel[hidden] { display: none; }

.afr-panel-tabs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-bottom: 1px solid var(--afr-chrome-line);
	flex: 0 0 auto;
}
.afr-tab {
	padding: 11px 4px;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--afr-on-chrome-2);
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}
.afr-tab:hover { color: #fff; }
.afr-tab.is-on { color: var(--afr-accent-lt); border-bottom-color: var(--afr-accent); }

.afr-pane { overflow-y: auto; padding: 12px; flex: 1 1 auto; min-height: 0; }
.afr-pane[hidden] { display: none; }
.afr-pane-note { color: var(--afr-on-chrome-2); font-size: 13px; margin: 6px 2px; line-height: 1.6; }

/* Outline */
.afr-outline ul { list-style: none; margin: 0; padding: 0 0 0 12px; }
.afr-outline > ul { padding-left: 0; }
.afr-outline li { margin: 0; }
.afr-outline button {
	display: block;
	width: 100%;
	padding: 7px 8px;
	background: none;
	border: 0;
	border-left: 2px solid transparent;
	color: var(--afr-on-chrome);
	font: inherit;
	font-size: 13px;
	line-height: 1.45;
	text-align: left;
	cursor: pointer;
}
.afr-outline button:hover { background: rgba(255,255,255,0.05); border-left-color: var(--afr-accent); }
.afr-outline .is-here { color: var(--afr-accent-lt); border-left-color: var(--afr-accent); }

/* Thumbnails */
.afr-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.afr-thumb {
	position: relative;
	padding: 0;
	background: none;
	border: 2px solid transparent;
	cursor: pointer;
	display: block;
	line-height: 0;
}
.afr-thumb canvas,
.afr-thumb .afr-thumb-ph {
	width: 100%;
	display: block;
	background: var(--afr-paper);
	aspect-ratio: 1 / 1.414;
	filter: var(--afr-canvas-filter);
}
.afr-thumb-cap {
	display: block;
	padding: 4px 0 0;
	font-size: 11px;
	line-height: 1.4;
	color: var(--afr-on-chrome-2);
	text-align: center;
}
.afr-thumb:hover { border-color: var(--afr-chrome-line); }
.afr-thumb.is-here { border-color: var(--afr-accent); }
.afr-thumb.is-here .afr-thumb-cap { color: var(--afr-accent-lt); }
.afr-thumb-flag {
	position: absolute; top: 4px; right: 4px;
	width: 10px; height: 14px;
	background: var(--afr-accent);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
}

/* Notes and bookmarks list */
.afr-marks-group { margin: 0 0 18px; }
.afr-marks-h {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--afr-on-chrome-2);
}
.afr-mark {
	position: relative;
	width: 100%;
	display: block;
	padding: 9px 26px 9px 12px;
	margin: 0 0 6px;
	background: var(--afr-chrome-2);
	border: 0;
	border-left: 3px solid var(--afr-accent);
	color: var(--afr-on-chrome);
	font: inherit;
	font-size: 13px;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
}
.afr-mark:hover { background: #222c37; }
.afr-mark--yellow { border-left-color: #e3b341; }
.afr-mark--blue   { border-left-color: #4a7fa5; }
.afr-mark--green  { border-left-color: #3fa06b; }
.afr-mark--pink   { border-left-color: #c96a9b; }
.afr-mark-pg { display: block; font-size: 11px; color: var(--afr-on-chrome-2); margin-bottom: 3px; }
.afr-mark-txt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.afr-mark-note {
	display: block;
	margin-top: 5px;
	padding-top: 5px;
	border-top: 1px dashed var(--afr-chrome-line);
	font-size: 12px;
	font-style: italic;
	color: var(--afr-on-chrome-2);
}
.afr-mark-del {
	position: absolute;
	top: 6px; right: 4px;
	width: 20px; height: 20px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--afr-on-chrome-2);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity .15s;
}
.afr-mark:hover .afr-mark-del,
.afr-mark-del:focus { opacity: 1; }
.afr-mark-del:hover { color: #e5837f; }

.afr-marks-empty {
	padding: 14px 12px;
	border: 1px dashed var(--afr-chrome-line);
	font-size: 13px;
	line-height: 1.65;
	color: var(--afr-on-chrome-2);
}

/* Search */
.afr-searchbox { margin-bottom: 10px; }
.afr-searchbox input,
.afr-pagebox input {
	width: 100%;
	padding: 9px 11px;
	background: var(--afr-chrome-2);
	border: 1px solid var(--afr-chrome-line);
	color: #fff;
	font: inherit;
	font-size: 13.5px;
}
.afr-searchbox input:focus { outline: none; border-color: var(--afr-accent); }
.afr-result {
	display: block;
	width: 100%;
	padding: 9px 10px;
	margin-bottom: 4px;
	background: none;
	border: 0;
	border-left: 2px solid transparent;
	color: var(--afr-on-chrome);
	font: inherit;
	font-size: 12.5px;
	line-height: 1.55;
	text-align: left;
	cursor: pointer;
}
.afr-result:hover { background: rgba(255,255,255,0.05); border-left-color: var(--afr-accent); }
.afr-result mark { background: rgba(227,179,65,0.32); color: #fff; padding: 0 1px; }
.afr-result-pg { display: block; font-size: 11px; color: var(--afr-on-chrome-2); }

/* ── Stage ───────────────────────────────────────────────────────────── */

.afr-stage {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
	padding: 26px;
	-webkit-overflow-scrolling: touch;
}

.afr-bookwrap { margin: auto; position: relative; flex: 0 0 auto; }
.afr[data-state="loading"] .afr-bookwrap,
.afr[data-state="error"]   .afr-bookwrap { visibility: hidden; }

.afr-book {
	position: relative;
	width: calc(var(--afr-pw) * 2);
	height: var(--afr-ph);
	perspective: 2600px;
	perspective-origin: 50% 42%;
	transform-style: preserve-3d;
}
.afr-book.is-single { width: var(--afr-pw); }

.afr-slot {
	position: absolute;
	top: 0;
	width: var(--afr-pw);
	height: var(--afr-ph);
	background: var(--afr-paper);
	box-shadow: 0 18px 44px rgba(0,0,0,0.34), 0 2px 8px rgba(0,0,0,0.22);
	transition: background .25s;
}
.afr-slot--left  { left: 0; border-radius: var(--afr-radius) 0 0 var(--afr-radius); }
.afr-slot--right { left: var(--afr-pw); border-radius: 0 var(--afr-radius) var(--afr-radius) 0; }
.afr-book.is-single .afr-slot--left  { display: none; }
.afr-book.is-single .afr-slot--right { left: 0; border-radius: var(--afr-radius); }
.afr-slot.is-blank { background: transparent; box-shadow: none; }

/* The dip where the pages meet. Only drawn in two-page mode. */
.afr-gutter {
	position: absolute;
	top: 0; bottom: 0;
	left: calc(var(--afr-pw) - 26px);
	width: 52px;
	pointer-events: none;
	z-index: 6;
	background: linear-gradient(to right,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,0.10) 38%,
		rgba(0,0,0,0.20) 50%,
		rgba(0,0,0,0.10) 62%,
		rgba(0,0,0,0) 100%);
}
.afr-book.is-single .afr-gutter { display: none; }

/* One rendered page.
   The outer box is the slot; the inner box is the page itself, fitted and
   centred inside it. They are usually the same size, but not always — a
   landscape chart in the middle of a portrait report has to sit in the middle
   of the slot rather than being stretched to fill it. */
.afr-pg {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--afr-paper);
	user-select: text;
	-webkit-user-select: text;
}
.afr-pg-inner {
	position: relative;
	flex: 0 0 auto;
	line-height: 0;
}
.afr-pg-canvas {
	display: block;
	width: 100%;
	height: 100%;
	filter: var(--afr-canvas-filter);
}
.afr-pg--blank { background: var(--afr-paper); }
.afr-pg.is-broken::after {
	content: 'This page could not be drawn.';
	position: absolute;
	inset: auto 0 46% 0;
	text-align: center;
	font-size: 13px;
	color: rgba(0,0,0,0.45);
}
/* Most PDFs print their own page number, and a second one sitting under it
   looks like a fault. This one is announced but not drawn; the bottom bar,
   the slider and the thumbnails are where a reader looks for the number. */
.afr-pg-num {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.afr-pg-ribbon {
	position: absolute;
	top: 0;
	right: 14px;
	width: 18px;
	height: 26px;
	padding: 0;
	border: 0;
	background: rgba(0,0,0,0.10);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
	cursor: pointer;
	z-index: 8;
	transition: background .15s, height .15s;
}
.afr-pg-ribbon:hover { background: rgba(74,127,165,0.55); height: 30px; }
.afr-pg-ribbon.is-on { background: var(--afr-accent); height: 32px; }
/* On a left-hand page the outer edge is the left one. */
.afr-slot--left .afr-pg-ribbon { left: 14px; right: auto; }

/* Text layer: invisible text sitting exactly over the drawing, so the page
   can be selected, copied, searched and read aloud. */
.afr-pg-text {
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: 1;
	line-height: 1;
	z-index: 4;
	forced-color-adjust: none;
	text-size-adjust: none;
	transform-origin: 0 0;
}
.afr-pg-text span,
.afr-pg-text br {
	position: absolute;
	white-space: pre;
	cursor: text;
	transform-origin: 0 0;
	color: transparent;
}
.afr-pg-text ::selection { background: rgba(74,127,165,0.35); }
.afr-pg-text .afr-hit { background: rgba(227,179,65,0.5); border-radius: 1px; }
.afr-pg-text .afr-hit.is-current { background: rgba(227,179,65,0.9); }

/* Highlights */
.afr-pg-marks { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.afr-hl {
	position: absolute;
	pointer-events: auto;
	cursor: pointer;
	mix-blend-mode: multiply;
	border-radius: 1px;
	transition: filter .12s;
}
.afr.is-theme-dark .afr-hl { mix-blend-mode: screen; opacity: 0.34; }
.afr-hl:hover { filter: brightness(0.94) saturate(1.3); }
.afr-hl--yellow { background: rgba(255, 214, 91, 0.52); }
.afr-hl--blue   { background: rgba(110, 175, 220, 0.5); }
.afr-hl--green  { background: rgba(122, 214, 160, 0.5); }
.afr-hl--pink   { background: rgba(244, 154, 194, 0.5); }
.afr-hl.has-note { box-shadow: inset 0 -2px 0 rgba(0,0,0,0.35); }

/* ── The turning leaf ────────────────────────────────────────────────── */

.afr-flip {
	position: absolute;
	top: 0;
	width: var(--afr-pw);
	height: var(--afr-ph);
	transform-style: preserve-3d;
	z-index: 20;
	will-change: transform;
}
.afr-flip[hidden] { display: none; }
.afr-flip.is-fwd  { left: var(--afr-pw); transform-origin: left center; }
.afr-flip.is-back { left: 0;             transform-origin: right center; }
.afr-book.is-single .afr-flip.is-fwd,
.afr-book.is-single .afr-flip.is-back { left: 0; transform-origin: left center; }

.afr-face {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--afr-paper);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-shadow: 0 14px 34px rgba(0,0,0,0.32);
}
.afr-face--back { transform: rotateY(180deg); }
.afr-face--blank {
	background:
		linear-gradient(to right, rgba(0,0,0,0.07), rgba(0,0,0,0) 22%),
		var(--afr-paper);
}

/* The shading that sells the fold. Opacity is animated from the script. */
.afr-face-shade {
	position: absolute;
	inset: 0;
	z-index: 9;
	opacity: 0;
	pointer-events: none;
	background: linear-gradient(to right, rgba(0,0,0,0.42), rgba(0,0,0,0.02) 42%, rgba(0,0,0,0) 70%);
}
.afr-face--back .afr-face-shade {
	background: linear-gradient(to left, rgba(0,0,0,0.42), rgba(0,0,0,0.02) 42%, rgba(0,0,0,0) 70%);
}

.afr.is-flipping .afr-pg-text { pointer-events: none; }

/* Turn buttons */
.afr-turn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 92px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.28);
	border: 1px solid rgba(255,255,255,0.10);
	color: rgba(255,255,255,0.8);
	cursor: pointer;
	z-index: 25;
	transition: background .15s, color .15s, opacity .15s;
}
.afr-turn svg { width: 24px; height: 24px; }
.afr-turn:hover { background: var(--afr-accent); color: #fff; }
.afr-turn--prev { left: 8px; }
.afr-turn--next { right: 8px; }
.afr-turn[disabled] { opacity: 0.2; cursor: default; }
.afr-turn[disabled]:hover { background: rgba(0,0,0,0.28); color: rgba(255,255,255,0.8); }

/* ── Loading and errors ──────────────────────────────────────────────── */

.afr-loading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	z-index: 15;
	background: var(--afr-stage);
	text-align: center;
	padding: 24px;
}
.afr:not([data-state="loading"]) .afr-loading { display: none; }

.afr-loading-book { display: flex; gap: 5px; align-items: flex-end; height: 46px; }
.afr-loading-book span {
	display: block;
	width: 11px;
	height: 34px;
	background: var(--afr-accent);
	opacity: 0.35;
	animation: afr-pulse 1.05s ease-in-out infinite;
}
.afr-loading-book span:nth-child(2) { animation-delay: .14s; }
.afr-loading-book span:nth-child(3) { animation-delay: .28s; }
@keyframes afr-pulse {
	0%, 100% { transform: scaleY(0.62); opacity: 0.3; }
	50%      { transform: scaleY(1);    opacity: 0.95; }
}
.afr-loading-text { margin: 0; font-size: 14px; color: var(--afr-on-chrome-2); }

.afr-progress { width: 220px; max-width: 60vw; height: 3px; background: rgba(255,255,255,0.1); }
.afr-progress-bar { height: 100%; width: 0; background: var(--afr-accent); transition: width .2s; }

.afr-error {
	position: relative;
	z-index: 16;
	max-width: 460px;
	margin: auto;
	padding: 30px 32px;
	background: var(--afr-chrome);
	border-top: 4px solid #c0392b;
	text-align: left;
}
.afr-error h2 { margin: 0 0 10px; font-size: 20px; font-weight: 700; }
.afr-error p  { margin: 0 0 12px; font-size: 14px; line-height: 1.7; color: var(--afr-on-chrome-2); }
.afr-error code {
	font-size: 12px;
	background: rgba(255,255,255,0.07);
	padding: 2px 5px;
	word-break: break-all;
}

.afr-btn {
	display: inline-block;
	padding: 11px 22px;
	background: var(--afr-accent);
	border: 0;
	color: #fff;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s;
}
.afr-btn:hover { background: #2c5f80; color: #fff; }
.afr-btn--ghost {
	background: transparent;
	border: 1px solid var(--afr-chrome-line);
	color: var(--afr-on-chrome-2);
}
.afr-btn--ghost:hover { background: rgba(255,255,255,0.06); color: #fff; }

/* ── Bottom bar ──────────────────────────────────────────────────────── */

.afr-foot {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 50px;
	padding: 0 14px;
	background: var(--afr-chrome);
	border-top: 1px solid var(--afr-chrome-line);
	z-index: 40;
}
.afr-foot-left, .afr-foot-right { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.afr-foot-right { justify-content: flex-end; min-width: 132px; }
.afr-foot-left  { min-width: 132px; }
.afr-foot-mid {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.afr-zoom-level {
	min-width: 44px;
	text-align: center;
	font-size: 11.5px;
	color: var(--afr-on-chrome-2);
	font-variant-numeric: tabular-nums;
}

#afr-slider {
	flex: 1 1 auto;
	min-width: 60px;
	height: 3px;
	-webkit-appearance: none;
	appearance: none;
	background: var(--afr-chrome-line);
	cursor: pointer;
}
#afr-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 13px; height: 13px;
	border-radius: 50%;
	background: var(--afr-accent-lt);
	border: 0;
	cursor: pointer;
}
#afr-slider::-moz-range-thumb {
	width: 13px; height: 13px;
	border-radius: 50%;
	background: var(--afr-accent-lt);
	border: 0;
	cursor: pointer;
}
#afr-slider:focus-visible { outline: 2px solid var(--afr-accent-lt); outline-offset: 4px; }

.afr-pagebox { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.afr-pagebox input { width: 54px; text-align: center; padding: 5px 4px; font-variant-numeric: tabular-nums; }
.afr-pagetotal { font-size: 12px; color: var(--afr-on-chrome-2); font-variant-numeric: tabular-nums; }

.afr-readout { font-size: 11.5px; color: var(--afr-on-chrome-2); font-variant-numeric: tabular-nums; }

/* ── Floating: selection popover, note editor, toast, help ───────────── */

.afr-selpop {
	position: fixed;
	z-index: 80;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px;
	background: var(--afr-chrome-2);
	border: 1px solid var(--afr-chrome-line);
	box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
.afr-selpop[hidden], .afr-notepop[hidden], .afr-modal[hidden], .afr-toast[hidden] { display: none; }
.afr-swatches { display: flex; gap: 4px; }
.afr-swatch {
	width: 26px; height: 26px;
	padding: 0;
	background: none;
	border: 1px solid transparent;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.afr-swatch span { display: block; width: 16px; height: 16px; border-radius: 50%; }
.afr-swatch:hover { border-color: var(--afr-chrome-line); }
.afr-swatch[data-color="yellow"] span { background: #ffd65b; }
.afr-swatch[data-color="blue"]   span { background: #6eafdc; }
.afr-swatch[data-color="green"]  span { background: #7ad6a0; }
.afr-swatch[data-color="pink"]   span { background: #f49ac2; }
.afr-selpop-div { width: 1px; height: 20px; background: var(--afr-chrome-line); }
.afr-selpop-btn {
	padding: 6px 10px;
	background: none;
	border: 0;
	color: var(--afr-on-chrome);
	font: inherit;
	font-size: 12.5px;
	cursor: pointer;
	white-space: nowrap;
}
.afr-selpop-btn:hover { background: rgba(255,255,255,0.07); }

.afr-notepop {
	position: fixed;
	z-index: 85;
	width: 300px;
	max-width: calc(100vw - 24px);
	padding: 12px;
	background: var(--afr-chrome-2);
	border: 1px solid var(--afr-chrome-line);
	box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.afr-notepop textarea {
	width: 100%;
	padding: 9px;
	background: var(--afr-chrome);
	border: 1px solid var(--afr-chrome-line);
	color: #fff;
	font: inherit;
	font-size: 13px;
	line-height: 1.6;
	resize: vertical;
}
.afr-notepop textarea:focus { outline: none; border-color: var(--afr-accent); }
.afr-notepop-row { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.afr-notepop-row .afr-btn { padding: 7px 14px; font-size: 11px; }
.afr-spacer { flex: 1 1 auto; }

.afr-toast {
	position: fixed;
	left: 50%;
	bottom: 74px;
	transform: translateX(-50%);
	z-index: 90;
	padding: 11px 20px;
	background: var(--afr-chrome-2);
	border: 1px solid var(--afr-chrome-line);
	border-left: 3px solid var(--afr-accent);
	color: #fff;
	font-size: 13px;
	box-shadow: 0 12px 30px rgba(0,0,0,0.45);
	max-width: min(440px, calc(100vw - 32px));
}

.afr-modal {
	position: fixed;
	inset: 0;
	z-index: 95;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(4,7,10,0.72);
}
.afr-modal-card {
	width: 100%;
	max-width: 460px;
	max-height: 86vh;
	overflow-y: auto;
	padding: 26px 28px;
	background: var(--afr-chrome);
	border-top: 4px solid var(--afr-accent);
}
.afr-modal-card h2 { margin: 0 0 16px; font-size: 20px; font-weight: 700; }
.afr-keys { display: grid; grid-template-columns: 92px 1fr; gap: 8px 14px; margin: 0 0 18px; }
.afr-keys dt {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--afr-accent-lt);
	padding-top: 1px;
}
.afr-keys dd { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--afr-on-chrome-2); }
.afr-modal-note {
	font-size: 13px;
	line-height: 1.7;
	color: var(--afr-on-chrome-2);
	padding: 12px 14px;
	background: var(--afr-chrome-2);
	border-left: 3px solid var(--afr-accent);
	margin: 0 0 18px;
}

/* ── The page below the reader ───────────────────────────────────────── */

.afr-about {
	background: #ffffff;
	color: #1a1f24;
	padding: 72px 40px;
	font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
	             'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.afr-about-inner {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 64px;
	align-items: start;
}
.afr-about-label {
	margin: 0 0 16px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #4a7fa5;
}
.afr-about h2 {
	margin: 0 0 18px;
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}
.afr-about-summary { font-size: 1.08rem; font-weight: 300; line-height: 1.8; color: #5a6472; margin: 0 0 20px; }
.afr-about-content { font-size: 1rem; font-weight: 300; line-height: 1.8; color: #5a6472; }
.afr-about-content p { margin: 0 0 16px; }
.afr-about-side { border-left: 3px solid #4a7fa5; padding-left: 26px; }
.afr-about-side dl { margin: 0; }
.afr-about-side dt {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #1a1f24;
	margin-bottom: 5px;
}
.afr-about-side dd { margin: 0 0 18px; font-size: 0.95rem; color: #5a6472; line-height: 1.6; }
.afr-about-side dd a { color: #2c5f80; }
.afr-about-back a {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #2c5f80;
	text-decoration: none;
}
.afr-about-back a:hover { text-decoration: underline; }

/* ── Narrow screens ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.afr-bar { height: 52px; padding: 0 8px; gap: 8px; }
	.afr-back-label { display: none; }
	.afr-back { padding: 0 6px; }
	.afr-doc-title { font-size: 13.5px; }
	.afr-doc-sub { display: none; }
	.afr-hide-sm { display: none; }

	/* The panel covers the stage instead of sitting beside it. */
	.afr-panel {
		position: absolute;
		inset: 0 auto 0 0;
		width: min(86vw, 340px);
		flex-basis: auto;
		box-shadow: 0 0 0 100vmax rgba(0,0,0,0.5);
	}

	.afr-stage { padding: 10px 6px; }
	.afr-turn { width: 34px; height: 68px; background: rgba(0,0,0,0.22); border-color: transparent; }
	.afr-turn--prev { left: 0; }
	.afr-turn--next { right: 0; }

	.afr-foot { height: 46px; padding: 0 8px; gap: 8px; }
	.afr-foot-left { min-width: 0; }
	.afr-foot-right { display: none; }
	.afr-zoom-level { display: none; }
	.afr-pagebox input { width: 44px; }

	.afr-about { padding: 48px 20px; }
	.afr-about-inner { grid-template-columns: 1fr; gap: 32px; }
	.afr-about-side { border-left: 0; border-top: 3px solid #4a7fa5; padding-left: 0; padding-top: 22px; }
}

@media (max-width: 520px) {
	.afr-bar-title { text-align: left; }
	.afr-toast { bottom: 60px; }
}

/* Anyone who has asked for less movement gets a cross-fade instead of a flip.
   The script checks the same query so it does not animate transforms at all. */
@media (prefers-reduced-motion: reduce) {
	.afr *, .afr *::before, .afr *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* Printing the reader itself is never what anyone wants — the Print button
   opens the PDF, which the browser prints properly. */
@media print {
	.afr { display: none !important; }
	.afr-about { padding: 0; }
}