/**
 * Ebook Reader (js/reader/app.js). Colours of the reading themes are local tokens (--rd-*),
 * built from the site tokens where they match; the page colours of Sepia/Dark/Night and the five
 * highlighter colours are reading colours, not brand colours.
 */

/* ---------- the upload box before a book is open ---------- */

.pdfe-reader .pdfe-upload-progress {
	margin-top: 12px;
}

.pdfe-reader .pdfe-dropzone {
	position: relative;
}

/* While a book opens, the box keeps its size and shows the loader instead of its content. */
.pdfe-reader .pdfe-dropzone.is-loading > :not(.rd-loader) {
	visibility: hidden;
}

.rd-loader {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
}

.rd-loader[hidden] {
	display: none;
}

.rd-loader__spin {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 4px solid var(--pdfe-border);
	border-top-color: var(--pdfe-accent);
	animation: rd-spin 0.8s linear infinite;
}

.rd-loader__text {
	font-size: 16px;
	color: var(--pdfe-text);
}

.rd-loader__bar {
	width: min(280px, 70%);
	height: 6px;
	border-radius: 3px;
	background: var(--pdfe-border);
	overflow: hidden;
}

.rd-loader__bar[hidden] {
	display: none;
}

.rd-loader__bar span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--pdfe-accent);
	transition: width 0.2s ease;
}

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

/* An open book uses the whole window width (up to 1800px), not the 1080px text column. */
.pdfe-reader.is-reading {
	width: min(calc(100vw - 48px), 1800px);
	margin-left: calc(50% - min(calc(50vw - 24px), 900px));
}

/* ---------- reader frame and themes ---------- */

.rd {
	--rd-desk: #e6eaec;
	--rd-paper: #ffffff;
	--rd-ink: var(--pdfe-text);
	--rd-muted: var(--pdfe-text-muted);
	--rd-bar: var(--pdfe-surface);
	--rd-line: var(--pdfe-border);
	--rd-hover: var(--pdfe-bg-soft-blue);
	--rd-on: var(--pdfe-bg-soft-blue);
	--rd-accent: var(--pdfe-primary);
	--rd-canvas-filter: none;
	--rd-mark-blend: multiply;
	--rd-mark-alpha: 1;
	--rd-gutter: 0px;

	position: relative;
	display: flex;
	flex-direction: column;
	height: clamp(520px, calc(100dvh - 88px), 2400px);
	scroll-margin-top: 82px; /* below the sticky site header when the book opens */
	border: 1px solid var(--rd-line);
	border-radius: var(--pdfe-radius-lg);
	background: var(--rd-desk);
	color: var(--rd-ink);
	font-family: var(--pdfe-font);
	overflow: hidden;
	box-shadow: var(--pdfe-shadow);
	text-align: left;
}

.rd[data-theme="sepia"] {
	--rd-desk: #e4d8bf;
	--rd-paper: #f8f0dd;
	--rd-ink: #3b2f1e;
	--rd-muted: #74624a;
	--rd-bar: #f3e9d2;
	--rd-line: #dccfb2;
	--rd-hover: #eadcbd;
	--rd-on: #e5d3ad;
	--rd-accent: #5a4426;
	--rd-canvas-filter: sepia(0.35) brightness(0.98);
}

.rd[data-theme="dark"] {
	--rd-desk: #121619;
	--rd-paper: #1f2529;
	--rd-ink: #dbe2e6;
	--rd-muted: #98a6ae;
	--rd-bar: #1a1f23;
	--rd-line: #2e363c;
	--rd-hover: #283137;
	--rd-on: #2f3a41;
	--rd-accent: #9fd0e0;
	--rd-canvas-filter: invert(0.88) hue-rotate(180deg) contrast(0.95);
	--rd-mark-blend: normal;
	--rd-mark-alpha: 0.42;
}

.rd[data-theme="night"] {
	--rd-desk: #0f0c08;
	--rd-paper: #1b1610;
	--rd-ink: #e9cf9f;
	--rd-muted: #a88f69;
	--rd-bar: #17130d;
	--rd-line: #2c241a;
	--rd-hover: #2a2218;
	--rd-on: #33291c;
	--rd-accent: #f0c27a;
	--rd-canvas-filter: invert(0.9) sepia(0.85) hue-rotate(-12deg) saturate(1.4) brightness(0.9);
	--rd-mark-blend: normal;
	--rd-mark-alpha: 0.38;
}

/* ---------- toolbar ---------- */

.rd-bar {
	position: relative;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 6px 10px;
	padding: 6px 10px;
	background: var(--rd-bar);
	border-bottom: 1px solid var(--rd-line);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.rd-bar__group {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: none;
}

.rd-bar__group + .rd-bar__group {
	padding-left: 10px;
	border-left: 1px solid var(--rd-line);
}

.rd-bar__title {
	flex: 1 1 120px;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: 600;
	font-size: 14px;
	padding: 0 4px;
}

.rd-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 36px;
	height: 36px;
	padding: 0 6px;
	border: 0;
	border-radius: var(--pdfe-radius-sm);
	background: transparent;
	color: var(--rd-ink);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

.rd-btn:hover {
	background: var(--rd-hover);
}

.rd-btn:focus-visible,
.rd-swatch:focus-visible,
.rd-menu__item:focus-visible {
	outline: 2px solid var(--rd-accent);
	outline-offset: 1px;
}

.rd-btn.is-on {
	background: var(--rd-on);
	color: var(--rd-accent);
}

.rd-btn--sm {
	min-width: 30px;
	height: 30px;
}

.rd-ico {
	display: inline-flex;
}

.rd-count {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--pdfe-accent);
	color: var(--pdfe-on-accent);
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
}

/* The highlighter button shows the chosen colour as a stripe. */
.rd-bar__group--mark > .rd-btn:first-child::after {
	content: "";
	position: absolute;
	left: 9px;
	right: 9px;
	bottom: 5px;
	height: 3px;
	border-radius: 2px;
	background: var(--rd-pen, #ffd84d);
}

.rd-zoom,
.rd-page {
	height: 32px;
	border: 1px solid var(--rd-line);
	border-radius: var(--pdfe-radius-sm);
	background: var(--rd-paper);
	color: var(--rd-ink);
	font: inherit;
	font-size: 13px;
}

.rd-zoom {
	padding: 0 6px;
	max-width: 116px;
}

.rd-page {
	width: 48px;
	text-align: center;
	margin-left: 2px;
}

.rd-page-total {
	font-size: 13px;
	color: var(--rd-muted);
	margin: 0 4px;
	white-space: nowrap;
}

.rd-colors {
	display: flex;
	gap: 5px;
	padding: 0 4px;
}

.rd-timer.is-on {
	color: var(--rd-accent);
}

.rd-timer__left {
	font-variant-numeric: tabular-nums;
	font-size: 12px;
}

.rd-timer__left:empty {
	display: none;
}

/* ---------- colour swatches ---------- */

.rd-swatch {
	--sw: #ffd84d;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 2px solid rgba(0, 0, 0, 0.12);
	border-radius: 50%;
	background: var(--sw);
	cursor: pointer;
	flex: none;
}

.rd-swatch.is-on {
	box-shadow: 0 0 0 2px var(--rd-bar), 0 0 0 4px var(--rd-accent);
}

.rd-swatch--yellow { --sw: #ffd84d; }
.rd-swatch--green { --sw: #86de5e; }
.rd-swatch--blue { --sw: #74c4ff; }
.rd-swatch--pink { --sw: #ff92c8; }
.rd-swatch--orange { --sw: #ffaa5c; }

/* ---------- body: side panel + book ---------- */

.rd-body {
	position: relative;
	display: flex;
	flex: 1;
	min-height: 0;
}

.rd-scroll {
	position: relative;
	flex: 1;
	min-width: 0;
	overflow: auto;
	padding: 18px 12px 48px;
	outline: none;
	overscroll-behavior: contain;
}

.rd-pages {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	min-width: max-content;
}

.rd-sheet {
	position: relative;
	display: grid;
	grid-template-columns: var(--rd-gutter) auto var(--rd-gutter);
	align-items: start;
}

.rd-gutter {
	position: relative;
	align-self: stretch;
}

.rd-paper {
	position: relative;
	background: var(--rd-paper);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), 0 6px 18px rgba(0, 0, 0, 0.06);
	border-radius: 2px;
}

.rd[data-kind="pdf"] .rd-paper {
	overflow: hidden;
	background: #fff;
}

.rd[data-kind="pdf"]:is([data-theme="dark"], [data-theme="night"]) .rd-paper {
	background: var(--rd-paper);
}

.rd-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	filter: var(--rd-canvas-filter);
}

/* A PDF page not drawn yet: a small spinner in its middle. */
.rd[data-kind="pdf"] .rd-paper:not(:has(.rd-canvas))::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	border: 3px solid #e3e8eb;
	border-top-color: var(--pdfe-accent);
	border-radius: 50%;
	animation: rd-spin 0.8s linear infinite;
}

/* ---------- pdf.js text layer (from pdf.js's pdf_viewer.css, Apache-2.0) ---------- */

.rd .textLayer {
	position: absolute;
	inset: 0;
	overflow: clip;
	opacity: 1;
	line-height: 1;
	text-align: initial;
	letter-spacing: normal;
	word-spacing: normal;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	forced-color-adjust: none;
	transform-origin: 0 0;
	caret-color: CanvasText;
	z-index: 2;
	--min-font-size: 1;
	--text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
	--min-font-size-inv: calc(1 / var(--min-font-size));
	--scale-round-x: 1px;
	--scale-round-y: 1px;
}

.rd .textLayer :is(span, br) {
	color: transparent;
	position: absolute;
	white-space: pre;
	cursor: text;
	transform-origin: 0% 0%;
	-webkit-user-select: text;
	user-select: text;
}

.rd .textLayer > :not(.markedContent),
.rd .textLayer .markedContent span:not(.markedContent) {
	z-index: 1;
	--font-height: 0;
	font-size: calc(var(--text-scale-factor) * var(--font-height));
	--scale-x: 1;
	--rotate: 0deg;
	transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}

.rd .textLayer .markedContent {
	display: contents;
}

.rd .textLayer ::selection {
	background: rgba(30, 110, 230, 0.28);
	color: transparent;
}

.rd .textLayer br::selection {
	background: transparent;
}

.rd .textLayer .endOfContent {
	display: block;
	position: absolute;
	inset: 100% 0 0;
	z-index: 0;
	cursor: default;
	user-select: none;
}

.rd .textLayer.selecting .endOfContent {
	top: 0;
}

/* ---------- EPUB chapters ---------- */

.rd-epub {
	position: relative;
	z-index: 1;
	padding: 3em 3.2em 3.6em;
	font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
	line-height: 1.65;
	color: var(--rd-ink);
	overflow-wrap: break-word;
	hyphens: auto;
}

.rd-epub :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
	line-height: 1.25;
	margin: 1.4em 0 0.6em;
	font-family: inherit;
}

.rd-epub h1 { font-size: 1.8em; }
.rd-epub h2 { font-size: 1.45em; }
.rd-epub h3 { font-size: 1.2em; }

.rd-epub :is(p, li, blockquote, td, th, dd, dt, figcaption) {
	color: inherit;
	font-size: inherit;
}

.rd-epub p {
	margin: 0 0 0.9em;
}

.rd-epub :is(img, svg, video) {
	max-width: 100%;
	height: auto;
}

.rd-epub a {
	color: var(--rd-accent);
}

.rd-epub table {
	border-collapse: collapse;
	max-width: 100%;
}

/* Book colours would fight the dark themes: text takes the theme's colour there. */
.rd:is([data-theme="dark"], [data-theme="night"]) .rd-epub :not(svg, svg *, img) {
	color: inherit !important;
	background-color: transparent !important;
	border-color: var(--rd-line) !important;
}

.rd:is([data-theme="dark"], [data-theme="night"]) .rd-epub a {
	color: var(--rd-accent) !important;
}

/* ---------- highlights ---------- */

.rd-marks {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* The layer blends with the page picture under it (the marks inside cannot: the layer is
	   their stacking context), so dark text shows through the colour like a real highlighter. */
	mix-blend-mode: var(--rd-mark-blend);
}

.rd[data-kind="epub"] .rd-marks {
	z-index: 0;
}

.rd-mark {
	position: absolute;
	border-radius: 2px;
	background: var(--mk, #ffd84d);
	opacity: var(--rd-mark-alpha);
}

.rd[data-kind="epub"] .rd-marks {
	mix-blend-mode: normal;
}

.rd-mark--yellow { --mk: #ffd84d; --mk-ink: #b38f00; }
.rd-mark--green { --mk: #86de5e; --mk-ink: #3a8f22; }
.rd-mark--blue { --mk: #74c4ff; --mk-ink: #1d74b8; }
.rd-mark--pink { --mk: #ff92c8; --mk-ink: #c23a7c; }
.rd-mark--orange { --mk: #ffaa5c; --mk-ink: #c2620f; }

.rd-mark--area {
	background: color-mix(in srgb, var(--mk) 45%, transparent);
	outline: 2px solid var(--mk-ink);
	outline-offset: -1px;
}

.rd-mark.is-blink {
	animation: rd-blink 1.1s ease 2;
}

@keyframes rd-blink {
	50% {
		box-shadow: 0 0 0 4px var(--mk-ink);
	}
}

.rd-pin {
	position: absolute;
	top: -9px;
	right: -9px;
	width: 18px;
	height: 18px;
	border-radius: 50% 50% 50% 2px;
	background: var(--mk-ink);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	mix-blend-mode: normal;
}

.rd-flash {
	position: absolute;
	border-radius: 3px;
	background: rgba(255, 140, 0, 0.35);
	box-shadow: 0 0 0 2px #e67700;
	animation: rd-flash 2.6s ease forwards;
}

@keyframes rd-flash {
	70% { opacity: 1; }
	100% { opacity: 0; }
}

.rd--pen .rd-text span,
.rd--pen .rd-epub {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'%3E%3Cpath d='m15 4 5 5-9.5 9.5H6v-4.5z' fill='%23ffd84d' stroke='%23333' stroke-width='1.4'/%3E%3C/svg%3E") 4 20, text;
}

.rd--box .rd-paper {
	cursor: crosshair;
}

.rd--box .rd-text {
	pointer-events: none;
}

/* ---------- margin notes and arrows ---------- */

.rd-arrows {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 3;
}

.rd-arrow {
	fill: none;
	stroke-width: 1.6;
	opacity: 0.9;
}

.rd-defs {
	position: absolute;
	width: 0;
	height: 0;
}

.rd-card {
	--mk: #ffd84d;
	--mk-ink: #b38f00;
	position: absolute;
	left: 10px;
	right: 10px;
	z-index: 4;
	background: color-mix(in srgb, var(--mk) 20%, var(--rd-paper));
	border: 1px solid color-mix(in srgb, var(--mk-ink) 45%, transparent);
	border-left: 3px solid var(--mk-ink);
	border-radius: var(--pdfe-radius-sm);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.15s ease;
}

.rd-card.is-dragging {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
	z-index: 6;
}

.rd-card--yellow { --mk: #ffd84d; --mk-ink: #b38f00; }
.rd-card--green { --mk: #86de5e; --mk-ink: #3a8f22; }
.rd-card--blue { --mk: #74c4ff; --mk-ink: #1d74b8; }
.rd-card--pink { --mk: #ff92c8; --mk-ink: #c23a7c; }
.rd-card--orange { --mk: #ffaa5c; --mk-ink: #c2620f; }

.rd-card__head {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 4px 0 6px;
	cursor: grab;
	touch-action: none;
	user-select: none;
}

.rd-card.is-dragging .rd-card__head {
	cursor: grabbing;
}

.rd-card__grip {
	width: 8px;
	height: 12px;
	flex: none;
	background-image: radial-gradient(currentColor 1px, transparent 1.3px);
	background-size: 4px 4px;
	color: var(--rd-muted);
}

.rd-card__quote {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 11px;
	font-style: italic;
	color: var(--rd-muted);
}

.rd-card__x {
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--rd-muted);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.rd-card__x:hover {
	background: rgba(0, 0, 0, 0.08);
	color: var(--rd-ink);
}

.rd-card__text {
	display: block;
	width: 100%;
	min-height: 34px;
	padding: 2px 9px 8px;
	border: 0;
	background: transparent;
	color: var(--rd-ink);
	font: 13px/1.45 var(--pdfe-font);
	resize: none;
	overflow: hidden;
	outline: none;
}

.rd-card__text::placeholder {
	color: var(--rd-muted);
}

/* ---------- popups, menus, messages ---------- */

.rd-pop,
.rd-menu {
	position: absolute;
	z-index: 40;
	background: var(--rd-bar);
	color: var(--rd-ink);
	border: 1px solid var(--rd-line);
	border-radius: var(--pdfe-radius);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.rd-pop {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
}

.rd-pop[hidden] {
	display: none;
}

.rd-pop__row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.rd-pop__row--end {
	justify-content: flex-end;
}

.rd-pop__btn {
	flex: 1;
	padding: 6px 10px;
	border: 1px solid var(--rd-line);
	border-radius: var(--pdfe-radius-sm);
	background: var(--rd-paper);
	color: var(--rd-ink);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}

.rd-pop__btn:hover {
	background: var(--rd-hover);
}

.rd-pop__btn--danger {
	color: var(--pdfe-danger);
}

.rd-pop__note {
	width: min(300px, 78vw);
	padding: 8px;
	border: 1px solid var(--rd-line);
	border-radius: var(--pdfe-radius-sm);
	background: var(--rd-paper);
	color: var(--rd-ink);
	font: 14px/1.45 var(--pdfe-font);
	resize: vertical;
}

.rd-menu {
	min-width: 250px;
	padding: 6px;
}

.rd-menu hr {
	margin: 6px 4px;
	border: 0;
	border-top: 1px solid var(--rd-line);
}

.rd-menu__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--rd-ink);
	font: inherit;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
}

.rd-menu__item small {
	color: var(--rd-muted);
	font-size: 12px;
}

.rd-menu__item:hover:not(:disabled) {
	background: var(--rd-hover);
}

.rd-menu__item.is-on {
	font-weight: 700;
}

.rd-menu__item.is-on::after {
	content: " ✓";
}

.rd-menu__item:disabled {
	opacity: 0.45;
	cursor: default;
}

.rd-toast {
	position: absolute;
	left: 50%;
	bottom: 18px;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: calc(100% - 32px);
	padding: 9px 14px;
	border-radius: var(--pdfe-radius-sm);
	background: var(--pdfe-primary-dark);
	color: #fff;
	font-size: 14px;
	transform: translateX(-50%);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.rd-toast[hidden] {
	display: none;
}

.rd-toast__btn {
	padding: 4px 10px;
	border: 0;
	border-radius: 6px;
	background: var(--pdfe-accent);
	color: var(--pdfe-on-accent);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.rd-progress {
	height: 3px;
	background: var(--rd-line);
	flex: none;
}

.rd-progress span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--pdfe-accent);
}

.rd-tip {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: color-mix(in srgb, var(--pdfe-accent) 22%, var(--rd-bar));
	border-bottom: 1px solid var(--rd-line);
	font-size: 14px;
	position: relative;
	z-index: 19;
}

.rd-tip[hidden] {
	display: none;
}

.rd-tip p {
	margin: 0;
	flex: 1;
}

.rd-tip__ok {
	padding: 6px 12px;
	border: 0;
	border-radius: var(--pdfe-radius-sm);
	background: var(--pdfe-primary);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* ---------- side panel ---------- */

.rd-side {
	width: 320px;
	flex: none;
	display: flex;
	flex-direction: column;
	background: var(--rd-bar);
	border-right: 1px solid var(--rd-line);
	min-height: 0;
}

.rd-side[hidden] {
	display: none;
}

.rd-side__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 10px 6px 16px;
}

.rd-side__head h2 {
	margin: 0;
	font-size: 15px;
	color: inherit;
}

.rd-side__body {
	flex: 1;
	overflow: auto;
	padding: 4px 12px 20px;
}

.rd-side__empty {
	margin: 8px 4px;
	color: var(--rd-muted);
	font-size: 14px;
}

.rd-side__small {
	margin: 14px 4px 0;
	color: var(--rd-muted);
	font-size: 12px;
}

.rd-side__save {
	margin-top: 12px;
}

.rd-toc,
.rd-results,
.rd-notes {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rd-toc .rd-toc {
	padding-left: 14px;
}

.rd-toc__item,
.rd-results__item,
.rd-note__go {
	display: block;
	width: 100%;
	padding: 7px 8px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--rd-ink);
	font: inherit;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
}

.rd-toc__item:hover:not(:disabled),
.rd-results__item:hover,
.rd-note__go:hover {
	background: var(--rd-hover);
}

.rd-toc__item:disabled {
	color: var(--rd-muted);
	cursor: default;
}

.rd-toc--0 > li > .rd-toc__item {
	font-weight: 600;
}

.rd-pagegrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
	gap: 6px;
}

.rd-pagegrid button {
	height: 36px;
	border: 1px solid var(--rd-line);
	border-radius: 6px;
	background: var(--rd-paper);
	color: var(--rd-ink);
	cursor: pointer;
}

.rd-search {
	display: flex;
	gap: 6px;
	margin-bottom: 6px;
}

.rd-search__input {
	flex: 1;
	min-width: 0;
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--rd-line);
	border-radius: var(--pdfe-radius-sm);
	background: var(--rd-paper);
	color: var(--rd-ink);
	font: inherit;
}

.rd-search__info {
	margin: 6px 4px;
	color: var(--rd-muted);
	font-size: 13px;
}

.rd-results__where,
.rd-note__where {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--rd-muted);
}

.rd-results__text {
	display: block;
	font-size: 13px;
	line-height: 1.4;
}

.rd-results__text mark {
	background: #ffd84d;
	color: #14232b;
	border-radius: 2px;
}

.rd-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 2px 0 10px;
}

.rd-filter {
	height: 28px;
	padding: 0 10px;
	border: 1px solid var(--rd-line);
	border-radius: 14px;
	background: var(--rd-paper);
	color: var(--rd-ink);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

.rd-filter.is-on {
	background: var(--rd-on);
	border-color: var(--rd-accent);
	font-weight: 600;
}

.rd-filter--dot {
	width: 24px;
	height: 24px;
	padding: 0;
	border-radius: 50%;
	background: var(--sw);
	border: 2px solid rgba(0, 0, 0, 0.1);
}

.rd-filter--dot.is-on {
	background: var(--sw);
	box-shadow: 0 0 0 2px var(--rd-bar), 0 0 0 4px var(--rd-accent);
}

.rd-note {
	--mk: #ffd84d;
	border-left: 4px solid var(--mk);
	margin-bottom: 8px;
	border-radius: 2px 6px 6px 2px;
	background: color-mix(in srgb, var(--mk) 10%, transparent);
}

.rd-note--green { --mk: #86de5e; }
.rd-note--blue { --mk: #74c4ff; }
.rd-note--pink { --mk: #ff92c8; }
.rd-note--orange { --mk: #ffaa5c; }

.rd-note__quote {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.45;
	font-family: Georgia, serif;
}

.rd-note__text {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.45;
	white-space: pre-wrap;
}

.rd-note__text::before {
	content: "✎ ";
	color: var(--rd-muted);
}

/* ---------- focus mode ---------- */

html.rd-focus-open {
	overflow: hidden;
}

.rd--focus {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	height: 100dvh;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.rd--focus .rd-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.rd--focus .rd-tip {
	position: absolute;
	top: 49px;
	left: 0;
	right: 0;
}

.rd--focus .rd-scroll {
	padding-top: 64px;
}

.rd--focus.rd--bar-hidden .rd-bar {
	transform: translateY(-110%);
	opacity: 0;
}

.rd--focus .rd-side {
	padding-top: 49px;
}

/* Focus button over the book on phones; in focus mode, Toolbar and Exit buttons in the corner. */
.rd-fab,
.rd-focuskeys {
	display: none;
}

.rd--narrow:not(.rd--focus) .rd-fab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	position: absolute;
	right: 14px;
	bottom: 18px;
	z-index: 30;
	height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: 22px;
	background: var(--pdfe-primary);
	color: #fff;
	font: inherit;
	font-weight: 600;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.rd--focus .rd-focuskeys {
	display: flex;
	gap: 8px;
	position: absolute;
	right: 12px;
	bottom: 16px;
	z-index: 30;
}

.rd-focuskeys__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 42, 51, 0.78);
	color: #fff;
	opacity: 0.55;
	transition: opacity 0.2s ease;
	cursor: pointer;
}

.rd-focuskeys__btn:hover,
.rd-focuskeys__btn:focus-visible,
.rd-focuskeys__btn:active {
	opacity: 1;
}

.rd--narrow .rd-focuskeys__btn {
	width: 44px;
	height: 44px;
}

.rd--focus .rd-toast {
	bottom: 76px;
}

/* ---------- read aloud ---------- */

.rd-player {
	position: absolute;
	left: 50%;
	bottom: 16px;
	z-index: 32;
	display: flex;
	align-items: center;
	gap: 4px;
	max-width: calc(100% - 24px);
	padding: 6px 8px;
	border-radius: 30px;
	background: var(--pdfe-primary);
	color: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
	transform: translateX(-50%);
}

.rd-player[hidden] {
	display: none;
}

.rd-player button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 38px;
	height: 38px;
	padding: 0 8px;
	border: 0;
	border-radius: 19px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

.rd-player button:hover {
	background: rgba(255, 255, 255, 0.12);
}

.rd-player button:focus-visible {
	outline: 2px solid var(--pdfe-accent);
	outline-offset: 1px;
}

.rd-player .rd-player__play {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--pdfe-accent);
	color: var(--pdfe-on-accent);
}

.rd-player .rd-player__play:hover {
	background: var(--pdfe-accent-hover);
}

.rd-player__where {
	min-width: 0;
	max-width: 190px;
	padding: 0 8px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 13px;
	color: var(--pdfe-on-dark-muted);
}

.rd-player .rd-player__rate {
	min-width: 46px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.rd-player .rd-player__back {
	background: rgba(255, 255, 255, 0.14);
	white-space: nowrap;
}

.rd-player__back[hidden] {
	display: none !important;
}

.rd-player__menu {
	width: min(320px, calc(100% - 16px));
	padding: 10px 12px;
}

.rd-player__label {
	margin: 6px 0 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--rd-muted);
}

.rd-player__voice {
	width: 100%;
	height: 34px;
	border: 1px solid var(--rd-line);
	border-radius: var(--pdfe-radius-sm);
	background: var(--rd-paper);
	color: var(--rd-ink);
	font: inherit;
	font-size: 13px;
}

.rd-player__rates {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.rd-player__check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: 14px;
}

.rd-player__tip {
	margin: 12px 0 2px;
	font-size: 12px;
	color: var(--rd-muted);
}

/* The sentence being read, and the paragraph under the mouse while the player is open. */
.rd-speak {
	position: absolute;
	border-radius: 3px;
	background: rgba(64, 160, 255, 0.28);
	box-shadow: inset 0 -2px 0 rgba(30, 110, 230, 0.75);
}

.rd-speak-hover {
	position: absolute;
	margin: -4px -6px;
	padding: 4px 6px;
	box-sizing: content-box;
	border-radius: 6px;
	background: rgba(15, 42, 51, 0.06);
}

.rd-speak-hover[hidden] {
	display: none;
}

.rd-speakchip {
	position: absolute;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pdfe-accent);
	color: var(--pdfe-on-accent);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.rd-speakchip[hidden] {
	display: none;
}

.rd-speakchip .rd-ico svg {
	width: 16px;
	height: 16px;
}

.rd-pop__btn--listen {
	flex: none;
}

/* With the player open, the corner buttons and messages move up above it. */
.rd--listening .rd-focuskeys,
.rd--listening.rd--narrow:not(.rd--focus) .rd-fab {
	bottom: 78px;
}

.rd--listening .rd-toast {
	bottom: 80px;
}

.rd--listening.rd--focus .rd-toast {
	bottom: 136px;
}

.rd--listening .rd-scroll {
	padding-bottom: 96px;
}

/* ---------- narrow screens: no margins, panel over the book ---------- */

.rd--narrow .rd-bar {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}

.rd--narrow .rd-bar__title {
	display: none;
}

.rd--narrow .rd-side {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 25;
	width: min(340px, 88%);
	box-shadow: 8px 0 24px rgba(0, 0, 0, 0.2);
}

.rd--narrow .rd-scroll {
	padding: 10px 6px 40px;
}

.rd--narrow .rd-epub {
	padding: 1.6em 1.2em 2.4em;
}

@media (max-width: 760px) {
	.pdfe-reader.is-reading {
		width: calc(100vw - 16px);
		margin-left: calc(50% - 50vw + 8px);
	}

	.rd {
		height: calc(100dvh - 78px);
		scroll-margin-top: 74px;
		border-radius: var(--pdfe-radius);
	}

	.rd-bar__group--zoom .rd-btn,
	.rd-bar__group--mark .rd-btn:last-child:not(:first-child) {
		display: none;
	}

	.rd-tip {
		font-size: 13px;
	}

	.rd-player {
		left: 8px;
		right: 8px;
		bottom: 10px;
		max-width: none;
		justify-content: space-between;
		transform: none;
	}

	.rd-player__where {
		display: none;
	}

	.rd-player .rd-player__back span {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rd-bar,
	.rd-card {
		transition: none;
	}

	.rd-mark.is-blink,
	.rd-flash {
		animation: none;
	}
}