/* Navigation for long-form editorial posts. The native <details> stays usable
 * even when JavaScript is blocked or the floating outline is unavailable. */
.entry-content > .mlz-toc {
	box-sizing: border-box;
	margin-top: 26px;
	margin-bottom: 30px;
	border-radius: 20px;
	background: #fafafa;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.04);
	font-family: "Inter", system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #333;
}

.mlz-toc__summary {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	gap: 10px;
	min-height: 45px;
	padding: 10px 18px;
	list-style: none;
	cursor: pointer;
	font-size: 18px;
	font-weight: 700;
	color: #333;
}

.mlz-toc__summary::-webkit-details-marker {
	display: none;
}

.mlz-toc__summary:focus-visible,
.mlz-toc-rail a:focus-visible,
.mlz-toc-rail__trigger:focus-visible {
	outline: 2px solid #03a9f4;
	outline-offset: 3px;
}

.mlz-toc__meta {
	margin-left: auto;
	font-weight: 400;
	font-size: 13px;
	color: #666;
}

.mlz-toc__chevron {
	width: 8px;
	height: 8px;
	flex: none;
	color: #666;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 220ms ease-in-out;
}

/* While closing, <details> must stay open until its contents finish animating.
 * Rotate the chevron immediately, not at the end of that animation. */
.mlz-toc__details[open]:not(.is-closing) .mlz-toc__chevron {
	transform: translateY(2px) rotate(225deg);
}

.mlz-toc__details[open] .mlz-toc__summary {
	margin-bottom: 1px;
}

.mlz-toc__body {
	/* Native <details> is still functional without JS; JS only animates the height. */
	overflow: hidden;
}

.mlz-toc__list,
.mlz-toc-rail__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mlz-toc__list {
	padding: 0 18px 15px;
}

.mlz-toc__item {
	margin: 0;
	padding: 0;
	font-size: 16px;
}

.mlz-toc__item + .mlz-toc__item {
	margin-top: 5px;
}

.mlz-toc__item--sub {
	padding-left: 20px;
	font-size: 15px;
}

.entry-content .mlz-toc__item a,
.entry-content .mlz-toc__item a:hover,
.entry-content .mlz-toc-rail__item a,
.entry-content .mlz-toc-rail__item a:hover {
	border-bottom: 0;
	text-decoration: none;
}

.entry-content .mlz-toc__item a {
	display: inline-block;
	color: #333;
	transition: color 150ms ease;
}

.entry-content .mlz-toc__item a:hover,
.entry-content .mlz-toc__item a:focus-visible {
	color: #03a9f4;
}

:is(.single-post, .single-dev) .entry-content :is(h2, h3)[id] {
	scroll-margin-top: 24px;
}

@media (max-width: 640px) {
	.entry-content > .mlz-toc {
		margin-top: 24px;
		margin-bottom: 30px;
	}

	.mlz-toc__summary {
		min-height: 44px;
		padding: 10px 16px;
	}

	.mlz-toc__list {
		padding: 0 16px 14px;
	}

	.mlz-toc__item--sub {
		padding-left: 14px;
	}

}

/* The outline uses only a narrow gutter. Its full list is a temporary
 * overlay, so moderate desktop widths do not need an entire 228px column.
 * JS reveals it only after the in-article contents have scrolled past. */
.mlz-toc-rail[hidden] {
	display: none !important;
}

.mlz-toc-rail {
	position: fixed;
	z-index: 90;
	top: 112px;
	left: var(--mlz-toc-rail-left, 22px);
	width: 46px;
	font-family: "Inter", system-ui, sans-serif;
	font-size: 13px;
	color: #424b52;
}

.mlz-toc-rail__shell {
	position: relative;
	width: 100%;
}

.mlz-toc-rail__trigger {
	display: block;
	width: 46px;
	min-height: 52px;
	padding: 10px 8px;
	border: none;
	border-radius: 6px;
	background: transparent;
	text-align: left;
	cursor: pointer;
	transition: background 150ms ease, opacity 150ms ease;
}

.mlz-toc-rail__trigger:hover,
.mlz-toc-rail__trigger:focus-visible {
	background: #f1f4f6;
}

.mlz-toc-rail__bars {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	max-height: min(52vh, 390px);
	overflow: hidden;
}

.mlz-toc-rail__bar {
	display: block;
	/* H2 is always 18px; length no longer depends on sibling position. */
	width: 18px;
	height: 3px;
	flex: 0 0 3px;
	border-radius: 3px;
	background: #ccc;
	transition: background 150ms ease;
}

.mlz-toc-rail__bar--sub {
	/* H3 is shorter and indented to communicate nesting. */
	width: 11px;
	margin-left: 8px;
}

.mlz-toc-rail__bar.is-current {
	background: #333;
}

.mlz-toc-rail__panel {
	position: absolute;
	top: 0;
	left: 0;
	width: 228px;
	max-height: min(74vh, 700px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-5px);
	transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mlz-toc-rail.is-open .mlz-toc-rail__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(0);
}

.mlz-toc-rail.is-open .mlz-toc-rail__trigger {
	opacity: 0;
}

.mlz-toc-rail__title {
	margin: 0 4px 9px;
}

.mlz-toc-rail__item + .mlz-toc-rail__item {
	margin-top: 3px;
}

.mlz-toc-rail__item a,
.entry-content .mlz-toc-rail__item a {
	display: block;
	padding: 6px 8px;
	border-radius: 4px;
	font-size: 13px;
	line-height: 1.35;
	color: #333;
	transition: background 150ms ease, color 150ms ease;
}

.mlz-toc-rail__item--sub a,
.entry-content .mlz-toc-rail__item--sub a {
	padding-left: 20px;
	font-size: 12px;
}

.mlz-toc-rail__item a:hover,
.entry-content .mlz-toc-rail__item a:hover {
	background: #fafafa;
	color: #03a9f4;
}

.mlz-toc-rail__item a[aria-current="location"],
.entry-content .mlz-toc-rail__item a[aria-current="location"] {
	background: #f1f1f1;
	color: #333;
	font-weight: 600;
}

@media (max-width: 1319px) {
	.mlz-toc-rail {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mlz-toc__chevron,
	.mlz-toc-rail__bar,
	.mlz-toc-rail__trigger,
	.mlz-toc-rail__panel,
	.mlz-toc-rail__item a,
	.entry-content .mlz-toc__item a {
		transition: none;
	}
}

@media print {
	.mlz-toc-rail {
		display: none !important;
	}
}