.dn-mobile-district-nav,
.dn-mobile-bottom-nav {
	display: none;
}

@media (max-width: 767px) {
	.dn-mobile-district-nav {
		display: block;
		width: 100%;
		background: #fff;
		border-top: 1px solid #ededed;
		border-bottom: 1px solid #e5e5e5;
		position: relative;
		z-index: 900;
		overflow: hidden;
	}
	.dn-mobile-district-track {
		display: flex;
		align-items: center;
		gap: 0;
		width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		white-space: nowrap;
		padding: 0 7px;
	}
	.dn-mobile-district-track::-webkit-scrollbar { display: none; }
	.dn-mobile-district-track a {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 43px;
		padding: 0 12px;
		color: #222 !important;
		font-size: 13px;
		font-weight: 700;
		line-height: 1.2;
		text-decoration: none !important;
		border-bottom: 2px solid transparent;
	}
	.dn-mobile-district-track a:active,
	.dn-mobile-district-track a:focus-visible {
		color: #b51f2b !important;
		border-bottom-color: #b51f2b;
	}
	.dn-mobile-bottom-nav {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		align-items: stretch;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
		min-height: 60px;
		padding: 6px 2px calc(6px + env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1px solid #e5e5e5;
		box-shadow: 0 -3px 14px rgba(0,0,0,.08);
		box-sizing: content-box;
	}
	body { padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
	.dn-mobile-bottom-item {
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		padding: 2px 1px;
		color: #555 !important;
		text-decoration: none !important;
		text-align: center;
		line-height: 1.15;
		-webkit-tap-highlight-color: transparent;
	}
	.dn-mobile-bottom-icon {
		width: 22px;
		height: 22px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.dn-mobile-bottom-icon svg {
		display: block;
		width: 21px;
		height: 21px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
	.dn-mobile-bottom-item:first-child .dn-mobile-bottom-icon svg path {
		fill: currentColor;
		stroke: none;
	}
	.dn-mobile-bottom-label {
		display: block;
		max-width: 100%;
		font-size: 10px;
		font-weight: 600;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.dn-mobile-bottom-item.dn-current {
		color: #b51f2b !important;
	}
}

/* Active district item: match the red active state used by the bottom navigation. */
@media (max-width: 767px) {
	.dn-mobile-district-track a.dn-district-current,
	.dn-mobile-district-track a[aria-current="page"] {
		color: #b51f2b !important;
		border-bottom-color: #b51f2b !important;
	}
}


/* Keep active district styling consistent with the bottom navigation. */
@media (max-width: 767px) {
	.dn-mobile-district-track a.dn-district-current,
	.dn-mobile-district-track a[aria-current="page"] {
		color: #b51f2b !important;
		border-bottom: 2px solid #b51f2b !important;
		background: rgba(181, 31, 43, .06);
	}
}

/* Smooth same-origin page transitions where supported by the browser. */
@view-transition {
	navigation: auto;
}
::view-transition-old(root) {
	animation: dn-page-out .18s ease both;
}
::view-transition-new(root) {
	animation: dn-page-in .24s ease both;
}
@keyframes dn-page-out {
	from { opacity: 1; }
	to { opacity: .72; }
}
@keyframes dn-page-in {
	from { opacity: .72; }
	to { opacity: 1; }
}

/* Graceful fade fallback for browsers without cross-document View Transitions. */
html.dn-page-leaving body {
	opacity: .72;
	transition: opacity .16s ease;
}
@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
	html.dn-page-leaving body {
		transition: none;
	}
}


/* v1.0.3: unmistakable active district state, matching bottom-nav red. */
@media (max-width: 767px) {
	.dn-mobile-district-track a.dn-district-current,
	.dn-mobile-district-track a[aria-current="page"] {
		color: #b51f2b !important;
		font-weight: 800 !important;
		border-bottom: 3px solid #b51f2b !important;
		background: rgba(181, 31, 43, .07) !important;
	}
}


/* v1.0.4: smoother cross-page transitions for district and bottom navigation. */
@view-transition {
	navigation: auto;
}
::view-transition-old(root) {
	animation: dn-crossfade-out .22s ease both;
}
::view-transition-new(root) {
	animation: dn-crossfade-in .32s ease both;
}
@keyframes dn-crossfade-out {
	from { opacity: 1; }
	to { opacity: .82; }
}
@keyframes dn-crossfade-in {
	from { opacity: .82; }
	to { opacity: 1; }
}
html.dn-page-entering body {
	opacity: .72;
}
html.dn-page-leaving body {
	opacity: .72;
	transition: opacity .18s ease;
}
html body {
	transition: opacity .28s ease;
}
@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none !important;
	}
	html body {
		transition: none !important;
	}
}