/* ============================================================================
   আগে বাংলাদেশ, প্রকাশনা পাঠক (publications reader)
   ----------------------------------------------------------------------------
   Three reading themes, a book that turns its pages, and chrome that gets out
   of the way. Everything is scoped under .abr 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 type is the site's own Bangla face, which the theme
   serves from this domain as "psb" (the Use Any Font plugin). It is already
   on the page because wp_head() runs here, so the reader asks no font host
   for anything. The fallbacks are ordinary system faces, never a web font.

   Colour note: the site has no accent colour at all, only near-black blocks
   and an off-white that reads as white on them. So the reader's accent is
   that off-white, and anything sitting ON the accent takes --abr-on-accent
   rather than white, or it would vanish.
   ========================================================================= */

.abr-html, .abr-body {
	margin: 0;
	padding: 0;
	background: #1f1f20;
}

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

.abr {
	/* Chrome */
	--abr-chrome:      #1f1f20;
	--abr-chrome-2:    #2b2b2e;
	--abr-chrome-line: #3a3a3f;
	--abr-on-chrome:   rgba(238,241,245,0.92);
	--abr-on-chrome-2: rgba(238,241,245,0.58);
	--abr-accent:      #eef1f5;
	--abr-accent-lt:   #ffffff;
	--abr-on-accent:   #1f1f20;

	/* Reading surface - overridden by the theme classes below */
	--abr-stage:   #2b2b2e;
	--abr-paper:   #ffffff;
	--abr-ink:     #141420;
	--abr-canvas-filter: none;
	--abr-paper-edge: rgba(0,0,0,0.16);

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

	font-family: 'psb', 'Noto Sans Bengali', 'SolaimanLipi', system-ui, -apple-system,
	             'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	color: var(--abr-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(--abr-chrome);
}

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

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

/* Screen-reader-only text, in case the theme does not define it. */
.abr .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 ─────────────────────────────────────────────────────────── */

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

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

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

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

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

.abr-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 12px 0 8px;
	color: var(--abr-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;
}
.abr-back svg { width: 18px; height: 18px; flex: 0 0 auto; }
.abr-back:hover { color: #fff; border-color: var(--abr-chrome-line); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.abr-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;
}

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

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

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

/* The dip where the pages meet. Only drawn in two-page mode. */
.abr-gutter {
	position: absolute;
	top: 0; bottom: 0;
	left: calc(var(--abr-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%);
}
.abr-book.is-single .abr-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. */
.abr-pg {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--abr-paper);
	user-select: text;
	-webkit-user-select: text;
}
.abr-pg-inner {
	position: relative;
	flex: 0 0 auto;
	line-height: 0;
}
.abr-pg-canvas {
	display: block;
	width: 100%;
	height: 100%;
	filter: var(--abr-canvas-filter);
}
.abr-pg--blank { background: var(--abr-paper); }
.abr-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. */
.abr-pg-num {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.abr-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;
}
.abr-pg-ribbon:hover { background: rgba(238,241,245,0.55); height: 30px; }
.abr-pg-ribbon.is-on { background: var(--abr-accent); height: 32px; }
/* On a left-hand page the outer edge is the left one. */
.abr-slot--left .abr-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. */
.abr-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;
}
.abr-pg-text span,
.abr-pg-text br {
	position: absolute;
	white-space: pre;
	cursor: text;
	transform-origin: 0 0;
	color: transparent;
}
.abr-pg-text ::selection { background: rgba(74,127,165,0.35); }
.abr-pg-text .abr-hit { background: rgba(227,179,65,0.5); border-radius: 1px; }
.abr-pg-text .abr-hit.is-current { background: rgba(227,179,65,0.9); }

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

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

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

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

/* The shading that sells the fold. Opacity is animated from the script. */
.abr-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%);
}
.abr-face--back .abr-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%);
}

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

/* Turn buttons */
.abr-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;
}
.abr-turn svg { width: 24px; height: 24px; }
.abr-turn:hover { background: var(--abr-accent); color: var(--abr-on-accent); }
.abr-turn--prev { left: 8px; }
.abr-turn--next { right: 8px; }
.abr-turn[disabled] { opacity: 0.2; cursor: default; }
.abr-turn[disabled]:hover { background: rgba(0,0,0,0.28); color: rgba(255,255,255,0.8); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.abr-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);
}
.abr-modal-card {
	width: 100%;
	max-width: 460px;
	max-height: 86vh;
	overflow-y: auto;
	padding: 26px 28px;
	background: var(--abr-chrome);
	border-top: 4px solid var(--abr-accent);
}
.abr-modal-card h2 { margin: 0 0 16px; font-size: 20px; font-weight: 700; }
.abr-keys { display: grid; grid-template-columns: 92px 1fr; gap: 8px 14px; margin: 0 0 18px; }
.abr-keys dt {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--abr-accent-lt);
	padding-top: 1px;
}
.abr-keys dd { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--abr-on-chrome-2); }
.abr-modal-note {
	font-size: 13px;
	line-height: 1.7;
	color: var(--abr-on-chrome-2);
	padding: 12px 14px;
	background: var(--abr-chrome-2);
	border-left: 3px solid var(--abr-accent);
	margin: 0 0 18px;
}

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

.abr-about {
	background: #ffffff;
	color: #373739;
	padding: 72px 40px;
	font-family: 'psb', 'Noto Sans Bengali', 'SolaimanLipi', system-ui, -apple-system,
	             'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.abr-about-inner {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 64px;
	align-items: start;
}
.abr-about-label {
	margin: 0 0 16px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #717175;
}
.abr-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;
}
.abr-about-summary { font-size: 1.08rem; font-weight: 300; line-height: 1.8; color: #717175; margin: 0 0 20px; }
.abr-about-content { font-size: 1rem; font-weight: 300; line-height: 1.8; color: #717175; }
.abr-about-content p { margin: 0 0 16px; }
.abr-about-side { border-left: 3px solid #1f1f20; padding-left: 26px; }
.abr-about-side dl { margin: 0; }
.abr-about-side dt {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #141420;
	margin-bottom: 5px;
}
.abr-about-side dd { margin: 0 0 18px; font-size: 0.95rem; color: #717175; line-height: 1.6; }
.abr-about-side dd a { color: #141420; }
.abr-about-back a {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #141420;
	text-decoration: none;
}
.abr-about-back a:hover { text-decoration: underline; }

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

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

	/* The panel covers the stage instead of sitting beside it. */
	.abr-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);
	}

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

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

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

@media (max-width: 520px) {
	.abr-bar-title { text-align: left; }
	.abr-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) {
	.abr *, .abr *::before, .abr *::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 {
	.abr { display: none !important; }
	.abr-about { padding: 0; }
}