:root {
	--navWidth: 40vw;
	@media (min-width: 768px) {
		--navWidth: 22vw;
	}
}

nav.glossary-index {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	width: var(--navWidth);
	right: -8px;
	height: 60vh;
	z-index: var(--z-3);

	> ul {
		--dir: column;
		--align: flex-start;
		--justify: flex-start;
		--gap: 1px;
		touch-action: pan-y;
		max-height: 100%;
		height: 100%;
		width: 100%;
		overflow: hidden auto;
		scroll-behavior: smooth;
	}
	li, a {
		flex: 1;
		width: 100%;
		height: max-content;
		min-height: max(var(--chipchip), max-content);
	}
	a {
		--justify: center;
		padding: .25rem .5rem;
		hyphens: auto;
		background-color: rgba(var(--base-rgb),var(--op-45));
		word-wrap: anywhere;
		white-space: wrap;
	}
	a:hover,
	a:focus,
	a.active {
		background-color: rgba(var(--action-rgb), var(--op-6));
		color: var(--action-contrast);
	}
}
.glossary dd {
	margin-left: .5rem;
	width: calc(100% + .75rem);
}
.glossary dd,
.glossary dt {
	position: relative;
	left: 0;
	transition: margin var(--trans-base),
	left var(--trans-base),
	width var(--trans-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 {
	grid-column: full;
	padding: 0 var(--navWidth) 0 2rem;
	@media (min-width:768px) {
		margin-left: auto;
		max-width: var(--content);
		margin-right: var(--navWidth);
		padding-right: var(--btn);
	}
}

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

	body:has(.glossary) h1 {
		font-size: var(--txt-xx-large);
	}
}