/*
 * WBA mobile Reading Progress Dock.
 *
 * Loaded from the active footer template and intentionally scoped to
 * single-post mobile views so desktop/tablet TOC behavior stays unchanged.
 */

.wba-mobile-toc-dock,
.wba-mobile-toc-sheet-head {
	display: none;
}

@media (max-width: 782px) {
	:root {
		--wba-mobile-toc-row-height: 70px;
		--wba-mobile-toc-safe-height: calc(
			var(--wba-mobile-toc-row-height) + env(safe-area-inset-bottom)
		);
	}

	html {
		scroll-padding-bottom: calc(
			var(--wba-mobile-toc-safe-height) + 18px
		);
	}

	body:is(.single-post, .wba-article-context) {
		padding-bottom: var(--wba-mobile-toc-safe-height) !important;
	}

	body:is(.single-post, .wba-article-context) .wp-site-blocks {
		/* The body already reserves the dock height including the safe area. */
		padding-bottom: 0 !important;
	}

	body:is(.single-post, .wba-article-context) .wba-single-content > h2,
	body:is(.single-post, .wba-article-context) .wba-single-content > h3,
	body:is(.single-post, .wba-article-context) .wba-single-content > h4 {
		scroll-margin-bottom: calc(
			var(--wba-mobile-toc-safe-height) + 18px
		);
	}

	/*
	 * Override the old inset floating card. The shell is now the bottom
	 * viewport strip itself, flush with the left/right/bottom edges.
	 */
	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced,
	body:is(.single-post, .wba-article-context).admin-bar .wba-toc-shell.wba-mobile-toc-enhanced {
		position: fixed !important;
		top: auto !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		z-index: 5000 !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		pointer-events: none;
	}

	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced > .wp-block-shortcode {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		pointer-events: none;
	}

	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-toc {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		backdrop-filter: none !important;
		pointer-events: auto;
	}

	/* The native summary remains the desktop/tablet trigger. On mobile the
	 * dedicated dock button controls the same <details> element. */
	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-toc > summary {
		display: none !important;
	}

	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-toc > nav {
		box-sizing: border-box;
		width: 100%;
		max-height: min(54dvh, 460px) !important;
		margin: 0 !important;
		padding: 0 0 12px !important;
		overflow-y: auto;
		overscroll-behavior: contain;
		border: 1px solid rgba(8, 28, 52, .12) !important;
		border-bottom: 0 !important;
		border-radius: 18px 18px 0 0;
		background: rgba(255, 255, 255, .99);
		box-shadow: 0 -18px 42px rgba(8, 28, 52, .16);
		-webkit-overflow-scrolling: touch;
	}

	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-mobile-toc-sheet-head {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		min-height: 54px;
		padding: 10px 14px 8px 17px;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		border-bottom: 1px solid #e2e8ef;
		background: rgba(255, 255, 255, .98);
		color: #081c34;
		font-size: .83rem;
		font-weight: 700;
		line-height: 1.2;
		backdrop-filter: blur(10px);
	}

	body:is(.single-post, .wba-article-context) .wba-mobile-toc-sheet-close {
		display: inline-grid;
		width: 34px;
		height: 34px;
		padding: 0;
		place-items: center;
		flex: 0 0 34px;
		border: 1px solid #d5dee8;
		border-radius: 999px;
		background: #f7f9fb;
		color: #081c34;
		font: inherit;
		font-size: 1.12rem;
		line-height: 1;
		cursor: pointer;
	}

	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-toc ol {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 3px !important;
		margin: 0 !important;
		padding: 9px 10px 0 !important;
		list-style: none !important;
		counter-reset: wba-mobile-toc;
	}

	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-toc li {
		position: relative;
		margin: 0 !important;
		padding: 0 !important;
		color: inherit !important;
		font-size: .84rem !important;
		line-height: 1.3 !important;
		counter-increment: wba-mobile-toc;
	}

	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-toc li a {
		display: grid;
		grid-template-columns: 29px minmax(0, 1fr);
		min-height: 44px;
		padding: 8px 9px;
		align-items: center;
		gap: 7px;
		border-radius: 10px;
		color: #1d3045 !important;
		text-decoration: none !important;
		outline-offset: 2px;
	}

	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-toc li a::before {
		content: counter(wba-mobile-toc);
		display: grid;
		width: 24px;
		height: 24px;
		place-items: center;
		border: 1px solid #dce4ec;
		border-radius: 999px;
		background: #f7f9fb;
		color: #6a7888;
		font-size: .66rem;
		font-weight: 700;
	}

	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-toc li.is-current a {
		background: #eef4f8;
		color: #081c34 !important;
		font-weight: 700;
	}

	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-toc li.is-current a::before {
		border-color: #081c34;
		background: #081c34;
		color: #fff;
	}

	/* Permanent Reading Progress Dock. */
	body:is(.single-post, .wba-article-context) .wba-mobile-toc-dock {
		box-sizing: border-box;
		display: block;
		width: 100%;
		margin: 0;
		padding: 0 0 env(safe-area-inset-bottom);
		border-top: 1px solid rgba(8, 28, 52, .14);
		background: rgba(255, 255, 255, .985);
		box-shadow: 0 -8px 24px rgba(8, 28, 52, .09);
		backdrop-filter: blur(14px);
		pointer-events: auto;
	}

	body:is(.single-post, .wba-article-context) .wba-mobile-toc-progress {
		height: 3px;
		overflow: hidden;
		background: #e4eaf0;
	}

	body:is(.single-post, .wba-article-context) .wba-mobile-toc-progress-bar {
		display: block;
		width: 0;
		height: 100%;
		background: #081c34;
		transform-origin: left center;
		transition: width .09s linear;
	}

	body:is(.single-post, .wba-article-context) .wba-mobile-toc-row {
		box-sizing: border-box;
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr) 44px;
		min-height: 67px;
		padding: 8px 13px 7px;
		align-items: center;
		gap: 11px;
	}

	body:is(.single-post, .wba-article-context) .wba-mobile-toc-count {
		display: grid;
		width: 42px;
		height: 42px;
		place-items: center;
		border-radius: 999px;
		background: #081c34;
		color: #fff;
		font-size: .70rem;
		font-weight: 700;
		letter-spacing: -.01em;
		line-height: 1;
	}

	body:is(.single-post, .wba-article-context) .wba-mobile-toc-copy {
		min-width: 0;
	}

	body:is(.single-post, .wba-article-context) .wba-mobile-toc-eyebrow {
		display: block;
		margin-bottom: 2px;
		color: #7b8998;
		font-size: .58rem;
		font-weight: 700;
		letter-spacing: .085em;
		line-height: 1.2;
		text-transform: uppercase;
	}

	body:is(.single-post, .wba-article-context) .wba-mobile-toc-current {
		display: block;
		overflow: hidden;
		color: #081c34;
		font-size: .79rem;
		font-weight: 700;
		line-height: 1.25;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body:is(.single-post, .wba-article-context) .wba-mobile-toc-toggle {
		display: inline-grid;
		width: 42px;
		height: 42px;
		padding: 0;
		place-items: center;
		border: 1px solid #ccd7e2;
		border-radius: 999px;
		background: #fff;
		color: #081c34;
		cursor: pointer;
		transition: background-color .15s ease, border-color .15s ease;
	}

	body:is(.single-post, .wba-article-context) .wba-mobile-toc-toggle[aria-expanded="true"] {
		border-color: #081c34;
		background: #081c34;
		color: #fff;
	}

	body:is(.single-post, .wba-article-context) .wba-mobile-toc-toggle svg {
		display: block;
		width: 18px;
		height: 18px;
		fill: none;
		stroke: currentColor;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: 1.8;
	}

	body:is(.single-post, .wba-article-context) .wba-mobile-toc-toggle:focus-visible,
	body:is(.single-post, .wba-article-context) .wba-mobile-toc-sheet-close:focus-visible {
		outline: 2px solid #38b6ff;
		outline-offset: 2px;
	}

	@media (prefers-reduced-motion: reduce) {
		body:is(.single-post, .wba-article-context) .wba-mobile-toc-progress-bar,
		body:is(.single-post, .wba-article-context) .wba-mobile-toc-toggle {
			transition: none;
		}
	}
}