:root {
	--navWidth: 40vw;
	@media (min-width: 768px) {
		--navWidth: 22vw;
	}
}
nav.glossary-index {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	width: var(--navWidth);
	right: 0;
	height: 60vh;
	z-index: var(--z-3);

	> ul {
		--dir: column;
		--align: flex-start;
		touch-action: pan-y;
		height: 100%;
		width: 100%;
		overflow: hidden auto;
		scroll-behavior: smooth;
	}
	li, a {
		width: 100%;
	}
	a {
		--justify: center;
		background-color: var(--overlay-heavy);
		word-wrap: anywhere;
		white-space: wrap;
		transition: background-color 0.2s ease;
	}
	a:hover,
	a:focus,
	a.active {
		background-color: rgba(var(--action-rgb), var(--rgb-heavy));
		color: var(--action-contrast);
	}
}
.glossary dd {
	margin-left: .5rem;
	width: calc(100% + .75rem);
}
.glossary dd,
.glossary dt {
	position: relative;
	left: 0;
	transition: margin var(--transition-base),
	left var(--transition-base),
	color var(--transition-base),
	width var(--transition-base);
}
.glossary dt:target,
.glossary dt.active {
	outline: none;
	left: -1.5rem;
	padding: 0;
	color: var(--action-0);
}
	.glossary dt:target + dd,
	.glossary dt.active + dd {
		left: -1.5rem;
	}

main header,
dl.glossary {
	margin-right:0;
	margin-left:0;
	padding: 0 var(--navWidth) 0 2rem;
	max-width: 100vw;
	@media (min-width:768px) {
		margin-left: auto;
		max-width: var(--maxWidth);
		margin-right: var(--navWidth);
		padding-right: var(--height);
	}
}

@media (max-width: 768px) {
	.glossary {
		h2 {
			font-size: var(--medium);
		}
		p {
			font-size: var(--small);
		}
	}
	.glossary-index {
		li,a {
			height: fit-content;
		}
		a {
			font-size: var(--small);
			padding: .25rem;
			min-height: 2em;
		}
	}

	body:has(.glossary) h1 {
		font-size: var(--xxlarge);
	}
}