/* ─── Contents panel ─────────────────────────────────────────────────────────
   The dictionary's slide-over, mirrored to the inline start. Kept as its own
   rules rather than shared with css/dictionary.css: the two differ in the edge
   they're anchored to, which is the direction of every transform and border
   here, so "share it" would mean parameterising nearly every declaration.

   Same z-index reasoning as the dictionary — above .reader (80), because the
   reader is the only place it opens from. */
toc-panel {
	position: fixed;
	inset: 0;
	z-index: 90;
	visibility: hidden;
	transition: visibility 0s linear 0.25s;
}

toc-panel[open] {
	visibility: visible;
	transition-delay: 0s;
}

.toc-scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity 0.25s ease;

	toc-panel[open] & {
		opacity: 1;
	}
}

/* Rows: fixed header / scrolling list. */
.toc-panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: min(360px, 85%);
	display: grid;
	grid-template-rows: auto 1fr;
	background: var(--surface);
	border-inline-end: 1px solid var(--border);
	box-shadow: 8px 0 30px rgba(0, 0, 0, 0.35);
	transform: translateX(-100%);
	transition: transform 0.25s ease;
	padding-block-end: env(safe-area-inset-bottom, 0px);

	toc-panel[open] & {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.toc-scrim,
	.toc-panel {
		transition: none;
	}
}

.toc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	padding: calc(var(--space-m) + env(safe-area-inset-top, 0px)) var(--space-m) var(--space-s);
	border-block-end: 1px solid var(--border);

	& h2 {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		margin: 0;
		font: var(--font-h5);
	}

	& h2 .icon {
		color: var(--color-primary);
		font-size: 22px;
	}
}

.toc-body {
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--space-xs) 0 var(--space-xl);

	& nav {
		display: grid;
	}
}

/* Nested entries indent by their depth in the contents tree. */
.toc-item {
	justify-content: start;
	text-align: start;
	white-space: normal;
	background: none;
	border: none;
	color: var(--text);
	font: var(--font-body-large-regular);
	padding: var(--space-s) var(--space-m);
	padding-inline-start: calc(var(--space-m) + var(--toc-depth, 0) * var(--space-m));
	border-inline-start: 3px solid transparent;

	&:hover {
		background: var(--surface-2);
	}

	&.is-current {
		color: var(--color-primary-on-surface);
		border-inline-start-color: var(--color-primary);
		font: var(--font-body-large-bold);
		background: var(--surface-2);
	}
}