/**
 * Sticky table of contents in the right column of single posts.
 */

.bz-toc {
	position: sticky;
	top: calc(var(--bz-header-height) + 24px);
	max-height: calc(100vh - var(--bz-header-height) - 48px);
	overflow-y: auto;
}

.bz-toc__inner {
	padding: 20px;
	background-color: var(--bz-surface);
	border: 1px solid var(--bz-border);
	border-radius: var(--bz-radius);
}

.bz-toc__title,
.bz-toc__subtitle {
	margin-bottom: 14px;
	font-family: var(--bz-font-mono);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--bz-ink-soft);
}

/* Categories: the other route out of the article, below the section list. */
.bz-toc__group {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--bz-border);
}

.bz-toc__subtitle {
	margin-bottom: 10px;
}

.bz-toc__categories {
	display: grid;
	gap: 6px;
}

.bz-toc__category {
	font-family: var(--bz-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bz-accent-strong);
	text-decoration: none;
}

.bz-toc__category:hover,
.bz-toc__category:focus-visible {
	color: var(--bz-accent);
	text-decoration: underline;
}

.bz-toc__list {
	display: grid;
	gap: 2px;
}

.bz-toc__link {
	display: block;
	padding: 6px 0 6px 10px;
	border-left: 2px solid transparent;
	color: var(--bz-ink-soft);
	font-size: 13px;
	line-height: 1.45;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.bz-toc__link:hover,
.bz-toc__link:focus-visible {
	color: var(--bz-ink);
	border-left-color: var(--bz-border);
	text-decoration: none;
}

.bz-toc__link.is-active {
	color: var(--bz-accent-strong);
	border-left-color: var(--bz-accent);
	font-weight: 600;
}

.bz-toc__item--h3 .bz-toc__link {
	padding-left: 24px;
	font-size: 12.5px;
}

/*
 * Single posts put the table of contents in the right column. When a post has no
 * headings to list, drop the empty column instead of leaving a gap beside the text.
 */
.bz-content__grid--post:not(:has(.bz-toc)) {
	grid-template-columns: minmax(0, 1fr);
}

/* A right-hand column needs room; below this the article reads full width. */
@media (max-width: 900px) {
	.bz-toc {
		display: none;
	}
}