.page-thumbnails .page-nav-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	max-height: min(74vh, 980px);
	width: min(100%, 220px);
	overflow: auto;
	padding-right: 6px;
}

.page-thumbnails .page-nav-thumb,
.register-media-grid .register-page-thumb {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	padding: 14px;
	border: 1px solid var(--rule);
	background: var(--paper-light);
	color: var(--ink);
	cursor: pointer;
	text-align: left;
}

.page-thumbnails .page-nav-thumb canvas {
	display: block;
	width: 100% !important;
	height: auto !important;
}

.page-thumbnails .page-nav-list::-webkit-scrollbar {
	width: 8px;
}

.page-thumbnails .page-nav-list::-webkit-scrollbar-thumb {
	background: rgba(29, 28, 25, .2);
	border-radius: 999px;
}

.page-thumbnails .page-nav-thumb:hover,
.page-thumbnails .page-nav-thumb:focus-visible,
.register-media-grid .register-page-thumb:hover,
.register-media-grid .register-page-thumb:focus-visible {
	border-color: var(--rule-strong);
	box-shadow: inset 0 0 0 1px rgba(139, 30, 37, .1);
}

.page-thumbnails .page-nav-thumb.is-active {
	border-color: var(--oxblood);
	box-shadow: inset 0 0 0 2px rgba(139, 30, 37, .2);
}

.page-thumbnails .page-nav-thumb canvas,
.register-media-grid .register-page-thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.page-thumbnails .page-nav-thumb span,
.register-media-grid .register-page-thumb span {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.register-media-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 16px;
}

.document-workspace {
	--sidebar-width: min(240px, 22vw);
	display: grid;
	grid-template-columns: var(--sidebar-width) minmax(0, 1fr) minmax(270px, 320px);
	gap: 28px;
	align-items: start;
}

.document-workspace.is-sidebar-collapsed {
	grid-template-columns: 0 minmax(0, 1fr) minmax(270px, 320px);
}

.document-workspace .page-thumbnails {
	position: sticky;
	top: 118px;
	max-width: var(--sidebar-width);
	overflow: hidden;
	transition: max-width .25s ease, opacity .25s ease, transform .25s ease;
}

.document-workspace.is-sidebar-collapsed .page-thumbnails {
	max-width: 0;
	opacity: 0;
	transform: translateX(-18px);
	pointer-events: none;
}

.reader-sidebar-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}