/* MotionBanner: "Play animations" is a product feature (HANDOFF V3 finding). Markup: <x-ui.motion-banner />, behaviour: core.js */
.rmn {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 16px;
	z-index: 450;
	display: none;
	justify-content: center;
	pointer-events: none;
}

.rm .rmn.show {
	display: flex;
}

.rmn div {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--ink-800);
	border: 1px solid var(--gold-300);
	padding-block: 10px;
	padding-inline: 18px 12px;
	font-size: 14px;
	max-width: calc(100% - 32px);
}

.rmn button {
	height: 38px;
	padding-inline: 16px;
	background: var(--gold-300);
	color: var(--ink-900);
	font-weight: 700;
	border: 0;
	cursor: pointer;
	flex: none;
}

/* MotionToggle: pause or play all animation. Sits at the start edge, below the banners (z 450) and above the page. */
.mtog {
	position: fixed;
	inset-inline-start: 16px;
	inset-block-end: calc(16px + var(--ckb-h, 0px));
	z-index: 440;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding-inline: 14px;
	background: var(--ink-800);
	color: var(--white);
	border: 1px solid var(--gold-300);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.mtog[hidden] {
	display: none;
}

.mtog:hover {
	background: var(--gold-300);
	color: var(--ink-900);
}

.mtog:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

.mtog .mtog-g,
.mtog[aria-pressed="true"] .mtog-p {
	display: none;
}

.mtog[aria-pressed="true"] .mtog-g {
	display: block;
}

@media (max-width: 600px) {
	.mtog {
		padding-inline: 12px;
	}

	.mtog span {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
}