/* Fixed environment colors intentionally remain recognizable in either theme. */
html[data-pm-environment] {
	--pm-environment-banner-height: 10px;
	--pm-environment-banner-background: #000000;
}

html[data-pm-environment="staging"] {
	--pm-environment-banner-background: #b91c1c;
}

@media screen {
	html[data-pm-environment] body {
		padding-top: var(--pm-environment-banner-height);
	}

	#pm-environment-banner {
		position: fixed;
		inset: 0 0 auto;
		z-index: 2147483647;
		height: var(--pm-environment-banner-height);
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 8px;
		background: var(--pm-environment-banner-background);
		color: #fff;
		font: 600 8px/1.2 system-ui, sans-serif;
		pointer-events: none;
	}

	/* Desk's navbar is 48px tall; its sticky offsets use this variable. */
	html[data-pm-environment] .main-section {
		--navbar-height: calc(48px + var(--pm-environment-banner-height));
	}

	html[data-pm-environment] .sticky-top,
	html[data-pm-environment] .navbar.fixed-top {
		top: var(--pm-environment-banner-height);
	}

	/* Preserve the available viewport height in the PMS application shells. */
	html[data-pm-environment] .pm-app-layout,
	html[data-pm-environment] #app>.h-screen,
	html[data-pm-environment] #app>.h-dvh {
		height: calc(100dvh - var(--pm-environment-banner-height));
	}
}

@media print {
	#pm-environment-banner {
		display: none !important;
	}
}