/* The explanatory hint follows the header orbit in both editions. */
.zavel-edition-hint {
	background: var(--zavel-paper-soft);
	border: 1px solid var(--zavel-line);
	border-radius: 4px;
	box-shadow: 0 6px 22px rgb(0 0 0 / 10%);
	color: var(--zavel-charcoal);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.5;
	padding: 12px 14px;
	position: fixed;
	text-align: center;
	width: min(17.5rem, var(--zavel-hint-width, calc(100vw - 2rem)));
	z-index: 101;
}

.zavel-edition-hint[hidden] { display: none; }

.zavel-edition-hint:not([hidden]) {
	animation: zavel-hint-arrive 180ms ease-out;
}

.zavel-edition-hint::before {
	background: inherit;
	border-left: 1px solid var(--zavel-line);
	border-top: 1px solid var(--zavel-line);
	content: "";
	height: 9px;
	left: calc(var(--zavel-hint-arrow) - 5px);
	position: absolute;
	top: -5px;
	transform: rotate(45deg);
	width: 9px;
}

@keyframes zavel-hint-arrive {
	from { opacity: 0; transform: translateY(-3px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.zavel-edition-hint:not([hidden]) { animation: none; }
}