/* MOBILE-01C: phone action bar (P4) and the "On this page" marker (P5). Below 992px only: nothing here applies on desktop.
   The bar is modelled on the COURSE-RAIL-01 course bar (site/institute.css), which stays as it is. */
.uh-action-bar {
	display: none;
}

@media (max-width: 991.98px) {
	html[data-uh-ab~="on"] {
		/* The bar's measured height (phone-layer.js) or 73px (1px border + 12 + 48 + 12) plus the safe area. */
		--uh-action-bar-h: var(--uh-action-bar-measured, calc(73px + env(safe-area-inset-bottom, 0px)));
	}

	/* While the bar shows, focus and anchor scrolling keep their target above it. No body padding: the bar hides whenever any part of the footer is in view, so it never covers the end of the page. */
	html[data-uh-ab~="on"]:not([data-uh-ab~="bar-hidden"]) {
		scroll-padding-bottom: var(--uh-action-bar-h);
	}

	html[data-uh-ab~="on"] .uh-action-bar {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: var(--tds-z-floating);
		display: flex;
		align-items: center;
		padding: calc(var(--tds-space-02) + var(--tds-space-01)) var(--tds-space-03) calc(var(--tds-space-02) + var(--tds-space-01) + env(safe-area-inset-bottom, 0px));
		background: var(--tds-color-surface-raised);
		border-top: 1px solid var(--tds-color-border-ui);
		transition: opacity var(--tds-motion-duration-snappy) var(--tds-motion-easing-expressive), visibility var(--tds-motion-duration-snappy) var(--tds-motion-easing-expressive);
	}

	/* Hidden with visibility (not focusable, not announced) and a short fade while a solid action or the footer is in view. */
	html[data-uh-ab~="bar-hidden"] .uh-action-bar {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}

	body.is-directory-open .uh-action-bar {
		display: none;
	}

	.uh-action-bar .btn {
		flex: 1 1 auto;
		justify-content: center;
		height: 48px;
		min-height: 48px;
	}

	@media (prefers-reduced-motion: reduce) {
		html[data-uh-ab~="on"] .uh-action-bar {
			transition: none;
		}
	}

	/* P5: the current section in "On this page". */
	.uh-nav-pages a[aria-current="location"] {
		border-inline-start-color: var(--tds-nav-current-color);
		font-weight: var(--tds-weight-medium);
	}

	.uh-onpage-here {
		margin-inline-start: auto;
		padding-inline-start: var(--tds-space-02);
		color: var(--tds-text-muted);
		font-weight: var(--tds-weight-regular);
		font-size: var(--tds-type-size-caption);
		line-height: var(--tds-type-line-caption);
		letter-spacing: var(--tds-type-track-caption);
	}
}