/*
 * The app announcement card on the ESAT pass page (19 September 2026).
 * Not a modal: it floats at the bottom left on a wide screen and across the
 * bottom on a phone, above the book and WhatsApp chips (the script sets the
 * bottom offset), and slides in only when the script adds --in.
 */
.lr-pass-soon {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 60;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 14px;
	align-items: center;
	width: 360px;
	max-width: calc(100vw - 32px);
	padding: 16px 16px 16px 14px;
	border: 1px solid var(--lr-pass-border, #d8dee8);
	border-radius: var(--lr-radius-large, 12px);
	background: var(--lr-color-bg-card, #fff);
	color: var(--lr-color-text, #1c2733);
	box-shadow: 0 10px 30px rgba(0, 33, 71, 0.18), 0 2px 6px rgba(0, 33, 71, 0.08);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.24s ease, transform 0.24s ease;
	pointer-events: none;
}

.lr-pass-soon.lr-pass-soon--in {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.lr-pass-soon[hidden] {
	display: none;
}

.lr-pass-soon .lr-pass-soon__close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--lr-pass-muted, #5b6b7d);
	font: 400 22px/32px system-ui, sans-serif;
	text-align: center;
	cursor: pointer;
	box-shadow: none;
}

.lr-pass-soon .lr-pass-soon__close:hover,
.lr-pass-soon .lr-pass-soon__close:focus-visible {
	background: var(--lr-color-accent-wash, #eef3fb);
	color: var(--lr-color-text, #1c2733);
}

/* The picture: a real screen of the Android app in a phone outline, with
   the app's icon at its foot. */
.lr-pass-soon__art {
	position: relative;
	width: 84px;
	padding-bottom: 10px;
}

.lr-pass-soon__art--icon {
	width: 64px;
	padding-bottom: 0;
}

.lr-pass-soon__phone {
	width: 76px;
	aspect-ratio: 9 / 19.5;
	overflow: hidden;
	border: 3px solid #002147;
	border-radius: 14px;
	background: #fffdf6;
}

.lr-pass-soon__screen {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.lr-pass-soon__icon {
	display: block;
	width: 34px;
	height: 34px;
	position: absolute;
	right: 0;
	bottom: 0;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 33, 71, 0.3);
}

.lr-pass-soon__art--icon .lr-pass-soon__icon {
	position: static;
	width: 64px;
	height: 64px;
	border-radius: 14px;
}

.lr-pass-soon__body {
	min-width: 0;
	padding-right: 18px;
}

.lr-pass-soon .lr-pass-soon__eyebrow {
	margin: 0 0 4px;
	font-family: var(--lr-font-mono, ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lr-pass-muted, #5b6b7d);
}

.lr-pass-soon .lr-pass-soon__title {
	margin: 0 0 6px;
	font-family: var(--lr-font-heading, inherit);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: #002147;
}

.lr-pass-soon .lr-pass-soon__text {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--lr-color-text-subtle, #3f4d5c);
}

.lr-pass-soon .lr-pass-soon__ok {
	margin: 0;
	min-height: 36px;
	padding: 6px 16px;
	font-size: 14px;
}

@media (max-width: 560px) {
	.lr-pass-soon {
		left: 12px;
		right: 12px;
		width: auto;
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lr-pass-soon {
		transition: none;
		transform: none;
	}
}

@media print {
	.lr-pass-soon {
		display: none;
	}
}