/*
 * Mobile TOC hierarchy refinements for the Reading Progress Dock.
 * Loaded after mobile-reading-toc.css.
 */

@media (max-width: 782px) {
	body:is(.single-post, .wba-article-context) .wba-mobile-toc-count.is-intro {
		font-size: .54rem !important;
		letter-spacing: .045em;
	}

	body:is(.single-post, .wba-article-context) .wba-single-content h3[id] {
		scroll-margin-top: 132px;
		scroll-margin-bottom: calc(
			var(--wba-mobile-toc-safe-height) + 18px
		);
	}

	/*
	 * Geometry baseline for the sheet. Keep every level on one predictable
	 * horizontal grid so H2 numbers, text, H3 rail and H3 labels line up.
	 */
	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-toc > nav > ol {
		grid-template-columns: 1fr !important;
		gap: 2px !important;
		margin: 0 !important;
		padding: 8px 16px 12px !important;
		counter-reset: wba-mobile-toc;
	}

	/* Only H2 items participate in the main section counter. */
	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-toc > nav > ol > .wba-mobile-toc-h2 {
		counter-increment: wba-mobile-toc;
	}

	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-mobile-toc-h3 {
		counter-increment: none !important;
	}

	/* H2: primary navigation level. */
	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-mobile-toc-h2 > a {
		box-sizing: border-box;
		display: grid !important;
		grid-template-columns: 26px minmax(0, 1fr) !important;
		min-height: 46px !important;
		padding: 7px 12px !important;
		align-items: center;
		gap: 11px;
		border-radius: 10px;
		color: #1d3045 !important;
		font-size: .84rem;
		font-weight: 600;
		line-height: 1.3;
		text-decoration: none !important;
	}

	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-mobile-toc-h2 > a::before {
		content: counter(wba-mobile-toc) !important;
		box-sizing: border-box;
		display: grid !important;
		position: static !important;
		width: 24px !important;
		height: 24px !important;
		margin: 0 !important;
		place-items: center;
		justify-self: start;
		border: 1px solid #dce4ec !important;
		border-radius: 999px !important;
		background: #f7f9fb !important;
		color: #6a7888 !important;
		font-size: .66rem !important;
		font-weight: 700;
		line-height: 1 !important;
		transform: none !important;
	}

	/*
	 * When an H3 is active, its parent remains legible as context, but the
	 * child carries the stronger active treatment.
	 */
	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-mobile-toc-h2.is-active-group > a {
		background: transparent !important;
		color: #081c34 !important;
		font-weight: 700;
	}

	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-mobile-toc-h2.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-mobile-toc-h2.is-current > a::before,
	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-mobile-toc-h2.is-active-group > a::before {
		border-color: #081c34 !important;
		background: #081c34 !important;
		color: #fff !important;
	}

	/*
	 * H3: visually nested beneath its owning H2.
	 *
	 * The rail sits 8px left of the H2 text column. Child labels begin 12px
	 * to the right of the H2 text column. The rail terminates at the centre
	 * of the final child marker instead of hanging below the group.
	 */
	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-mobile-toc-sublist {
		position: relative;
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 0 !important;
		margin: 0 8px 10px 41px !important;
		padding: 0 !important;
		border-left: 0 !important;
		list-style: none !important;
	}

	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-mobile-toc-sublist::before {
		content: "";
		position: absolute;
		top: -4px;
		bottom: 22px;
		left: 0;
		width: 1px;
		background: #d7e1ea;
		pointer-events: none;
	}

	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-mobile-toc-h3 {
		position: relative;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
		font-size: .78rem !important;
		line-height: 1.3 !important;
	}

	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-mobile-toc-h3 > a {
		box-sizing: border-box;
		position: relative;
		display: flex !important;
		min-height: 44px !important;
		padding: 6px 10px 6px 20px !important;
		align-items: center;
		border-radius: 8px;
		background: transparent !important;
		color: #667588 !important;
		font-size: .78rem !important;
		font-weight: 500 !important;
		line-height: 1.35 !important;
		text-decoration: none !important;
	}

	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-mobile-toc-h3 > a::before {
		content: "" !important;
		box-sizing: border-box;
		position: absolute !important;
		left: -4px !important;
		top: 50% !important;
		display: block !important;
		width: 8px !important;
		height: 8px !important;
		margin: 0 !important;
		border: 1px solid #bdc9d5 !important;
		border-radius: 999px !important;
		background: #fff !important;
		transform: translateY(-50%) !important;
	}

	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-mobile-toc-h3.is-current > a {
		background: #eef4f8 !important;
		color: #081c34 !important;
		font-weight: 700 !important;
		box-shadow: inset 2px 0 0 #081c34;
	}

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

	/* Keep the first and last primary rows visually separated from the sheet edges. */
	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-toc > nav > ol > .wba-mobile-toc-h2:first-child > a {
		margin-top: 0;
	}

	body:is(.single-post, .wba-article-context) .wba-toc-shell.wba-mobile-toc-enhanced .wba-toc > nav > ol > .wba-mobile-toc-h2:last-child > a {
		margin-bottom: 0;
	}
}