/*
 * Quick exit.
 *
 * Reachable from anywhere, obvious to someone who needs it, unobtrusive to
 * everyone else. This is a safety control, not a decoration: do not move it
 * behind a menu, and do not animate it.
 *
 * Fallback colours are there so the button stays legible under any theme.
 */
.jt-quick-exit {
	position: fixed;
	inset-block-start: calc(env(safe-area-inset-top, 0px) + 0.5rem);
	inset-inline-end: 0.5rem;
	z-index: 99999;
	padding: 0.4rem 0.8rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--jt-line, #d6cbbd);
	background: var(--wp--preset--color--jt-surface, #f2ece4);
	color: var(--wp--preset--color--jt-text, #2c363c);
}

.jt-quick-exit:hover,
.jt-quick-exit:focus-visible {
	color: var(--wp--preset--color--jt-text, #2c363c);
	border-color: var(--wp--preset--color--jt-accent, #3e5c68);
}

/* Below the admin bar, not under it. */
body.admin-bar .jt-quick-exit {
	inset-block-start: calc(32px + 0.5rem);
}

/*
 * On a phone the top corner belongs to the menu button, so the exit sits just
 * inside it. Not at the bottom: that is where the cookie banner is, and a
 * control that covers a consent button is its own problem.
 */
@media (max-width: 600px) {
	.jt-quick-exit {
		inset-inline-end: 3.25rem;
	}
}

/* At this width the admin bar is 46px tall. */
@media (max-width: 782px) {
	body.admin-bar .jt-quick-exit {
		inset-block-start: calc(46px + 0.5rem);
	}
}