main{
	position:relative;
}

/* set the min width of the 4th col to the width of the toc container */
@media screen and (min-width:1300px){
	body.toc-grid{
		grid-template-columns:auto minmax(16rem, max-content) minmax(auto, 50rem) minmax(18rem, auto);
	}
}

#toc{
	position:relative;
	display:inline-block;
	border-top:0.2rem solid var(--chighlight);
	padding:1rem;

	@media screen and (min-width:1300px){
		position:absolute;
		top:-0.2rem;
		left:100%;
		width:16rem;
		height:100%;

		/* sticky container */
		&>div{
			position:sticky;
			top:6rem;
		}
	}

	h2{
		font-size:120%;
	}
}


.back-toc {
	background:var(--cbgmain);
	border-top:0.1rem solid var(--caccent);
	opacity:0.98;
	padding:0.5rem 0 1rem;
	position:sticky;
	bottom:0;
	a::before{
		content:'\25b2';
		display:inline-block;
		margin-right:0.2rem;
	}
	@media screen and (width >= 1300px) {
		border:none;
		background:none;
		a:not(:focus):not(:active) {
			position:absolute;
			clip-path:inset(50%);
		}
	}
	@media print{
		display:none;
	}
}