/*
 * Guest-flow components. Figma file 82czIdavj992v8AI7D1Qkg, Components sheet.
 * Used by the Jinja macros in templates/guest/components.html and by the Vue components in
 * frontend/src/components/guest/, so both render the same markup contract.
 * Needs guest-tokens.css and the .ef-guest root class. Logical properties only (no left/right).
 * A few Figma sizes sit between scale steps (2, 3, 6 and 14 px) and are written as px.
 */

.ef-guest *,
.ef-guest *::before,
.ef-guest *::after {
	box-sizing: border-box;
}

.ef-guest :focus-visible {
	outline: 2px solid var(--ef-accent-default);
	outline-offset: 2px;
}

/* Icon: 24 px line icons from the sprite. Direction icons mirror in RTL. */

.ef-icon {
	flex: none;
	width: 24px;
	height: 24px;
	color: inherit;
}

.ef-icon--sm { width: 14px; height: 14px; }
.ef-icon--md { width: 16px; height: 16px; }
.ef-icon--lg { width: 20px; height: 20px; }

[dir="rtl"] .ef-icon--directional {
	transform: scaleX(-1);
}

/* Button: M is 44 px, L is 52 px. */

.ef-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ef-space-8);
	min-height: 44px;
	padding-inline: var(--ef-space-20);
	border: 1px solid transparent;
	border-radius: var(--ef-radius-md);
	font: 600 15px/20px var(--ef-font-ui);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 120ms var(--ef-ease-out), border-color 120ms var(--ef-ease-out);
}

.ef-btn--l {
	min-height: 52px;
	padding-inline: var(--ef-space-24);
}

.ef-btn--block {
	display: flex;
	width: 100%;
}

.ef-btn--primary {
	background: var(--ef-accent-default);
	color: var(--ef-text-on-accent);
}

.ef-btn--primary:hover {
	background: var(--ef-accent-hover);
}

.ef-btn--secondary {
	background: var(--ef-bg-surface);
	border-color: var(--ef-border-strong);
	color: var(--ef-text-primary);
}

.ef-btn--secondary:hover {
	background: var(--ef-bg-subtle);
}

.ef-btn--ghost {
	background: transparent;
	color: var(--ef-text-accent);
}

.ef-btn--ghost:hover {
	background: var(--ef-accent-subtle);
}

/* A button that is a link keeps the button colour, not the link reset in guest-tokens.css. */
.ef-guest a.ef-btn--primary {
	color: var(--ef-text-on-accent);
}

.ef-guest a.ef-btn--secondary {
	color: var(--ef-text-primary);
}

.ef-guest a.ef-btn--ghost {
	color: var(--ef-text-accent);
}

.ef-btn:disabled,
.ef-btn[aria-disabled="true"] {
	background: var(--ef-bg-subtle);
	border-color: transparent;
	color: var(--ef-text-tertiary);
	cursor: not-allowed;
}

.ef-btn--ghost:disabled,
.ef-btn--ghost[aria-disabled="true"] {
	background: transparent;
}

/* Status Chip: icon, label and colour, always together. */

.ef-status {
	display: inline-flex;
	align-items: center;
	gap: var(--ef-space-4);
	padding: var(--ef-space-4) var(--ef-space-8) var(--ef-space-4) 6px;
	border-radius: var(--ef-radius-full);
	font: 500 12px/16px var(--ef-font-ui);
	white-space: nowrap;
}

.ef-status--success { background: var(--ef-success-bg); color: var(--ef-success-fg); }
.ef-status--warning { background: var(--ef-warning-bg); color: var(--ef-warning-fg); }
.ef-status--danger { background: var(--ef-danger-bg); color: var(--ef-danger-fg); }
.ef-status--info { background: var(--ef-info-bg); color: var(--ef-info-fg); }
.ef-status--neutral { background: var(--ef-bg-subtle); color: var(--ef-text-secondary); }
.ef-status--accent { background: var(--ef-accent-subtle); color: var(--ef-text-accent); }

/* Input Field: label, 48 px control, hint or error row. */

.ef-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.ef-field__label {
	font: 500 14px/20px var(--ef-font-ui);
	color: var(--ef-text-primary);
}

.ef-field__input {
	width: 100%;
	height: 48px;
	padding-inline: 14px;
	border: 1px solid var(--ef-border-strong);
	border-radius: var(--ef-radius-md);
	background: var(--ef-bg-surface);
	color: var(--ef-text-primary);
	font: 400 16px/24px var(--ef-font-ui);
}

.ef-field__input::placeholder {
	color: var(--ef-text-tertiary);
}

/* Focus and error draw a 2 px border without moving the layout. */
.ef-field__input:focus {
	border-color: var(--ef-accent-default);
	box-shadow: 0 0 0 1px var(--ef-accent-default);
	outline: none;
}

.ef-field--error .ef-field__input {
	border-color: var(--ef-danger-solid);
	box-shadow: 0 0 0 1px var(--ef-danger-solid);
}

.ef-field__hint {
	display: flex;
	align-items: center;
	gap: var(--ef-space-4);
	min-height: 18px;
	font: 400 13px/18px var(--ef-font-ui);
	color: var(--ef-text-tertiary);
}

/* A control with a trailing button inside it, such as the password reveal. */
.ef-field__control {
	position: relative;
}

.ef-field__control .ef-field__input {
	padding-inline-end: 48px;
}

.ef-field__reveal {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ef-text-secondary);
	cursor: pointer;
}

.ef-field__reveal:focus-visible {
	outline: 2px solid var(--ef-accent-default);
	outline-offset: -4px;
	border-radius: var(--ef-radius-md);
}

.ef-field--error .ef-field__hint {
	color: var(--ef-danger-fg);
}

/* Quantity Stepper: 44 px targets. The minus is muted at zero. */

.ef-stepper {
	display: inline-flex;
	align-items: center;
	gap: var(--ef-space-4);
}

.ef-stepper__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--ef-border-strong);
	border-radius: var(--ef-radius-md);
	background: var(--ef-bg-surface);
	color: var(--ef-text-primary);
	cursor: pointer;
}

.ef-stepper__btn--plus {
	border-color: transparent;
	background: var(--ef-accent-default);
	color: var(--ef-text-on-accent);
}

.ef-stepper__btn--plus:hover {
	background: var(--ef-accent-hover);
}

.ef-stepper__btn:disabled {
	border-color: var(--ef-border-default);
	color: var(--ef-text-tertiary);
	cursor: not-allowed;
}

.ef-stepper__btn--plus:disabled {
	background: var(--ef-bg-subtle);
	border-color: transparent;
}

.ef-stepper__value {
	width: 44px;
	text-align: center;
	font: 600 24px/28px var(--ef-font-ui);
	letter-spacing: -0.003em;
	font-variant-numeric: tabular-nums;
	color: var(--ef-text-primary);
}

/* Logo lockup. The symbol is an image, so RTL never mirrors it. */

.ef-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ef-text-primary);
	text-decoration: none;
	font: 600 24px/1 var(--ef-font-ui);
	letter-spacing: -0.01em;
}

.ef-logo__symbol {
	width: 32px;
	height: 32px;
}

.ef-logo__light {
	font-weight: 400;
}

/* Arabic lockup: the brand name in Arabic script, same size as the Latin wordmark. */
.ef-logo__ar {
	font-family: var(--ef-font-ar);
	font-weight: 600;
	letter-spacing: 0;
}

.ef-logo--sm {
	gap: var(--ef-space-8);
	font-size: 19.2px;
}

.ef-logo--sm .ef-logo__symbol {
	width: 25.6px;
	height: 25.6px;
}

/* Top Nav (desktop, 72 px) and Top Bar (mobile, 56 px). */

.ef-topnav {
	display: none;
	height: 72px;
	background: var(--ef-bg-surface);
	border-bottom: 1px solid var(--ef-border-default);
}

.ef-topnav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ef-space-24);
	height: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--ef-space-24);
}

.ef-topnav__search {
	display: flex;
	flex: 1 1 420px;
	align-items: center;
	gap: var(--ef-space-8);
	max-width: 420px;
	height: 44px;
	padding-inline: var(--ef-space-16);
	border-radius: var(--ef-radius-full);
	background: var(--ef-bg-subtle);
	color: var(--ef-text-tertiary);
}

.ef-topnav__search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--ef-text-primary);
	font: 400 14px/20px var(--ef-font-ui);
}

.ef-topnav__search input::placeholder {
	color: var(--ef-text-tertiary);
}

.ef-topnav__search input:focus-visible {
	outline: none;
}

.ef-topnav__search:focus-within {
	outline: 2px solid var(--ef-accent-default);
	outline-offset: 2px;
}

.ef-topnav__actions {
	display: flex;
	align-items: center;
	gap: var(--ef-space-24);
}

.ef-topnav__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font: 500 14px/20px var(--ef-font-ui);
	color: var(--ef-text-primary);
	text-decoration: none;
	white-space: nowrap;
}

.ef-topnav__link:hover {
	color: var(--ef-text-accent);
}

/* The language switch is a button that looks like the links next to it. */
button.ef-topnav__link {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* Light or dark switch: the moon in light mode, the sun in dark mode. */
.ef-theme-toggle {
	justify-content: center;
	min-width: 44px;
}

[data-theme="dark"] .ef-theme-toggle .ef-icon:first-child,
:root:not([data-theme="dark"]) .ef-theme-toggle .ef-icon:last-child {
	display: none;
}

.ef-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--ef-radius-full);
	background: var(--ef-accent-subtle);
	color: var(--ef-text-accent);
}

.ef-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
	padding-inline: var(--ef-space-16);
	background: var(--ef-bg-surface);
}

.ef-topbar__actions {
	display: flex;
	align-items: center;
}

.ef-topbar__btn,
.ef-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--ef-text-primary);
	text-decoration: none;
	cursor: pointer;
}

@media (min-width: 768px) {
	.ef-topnav { display: block; }
	.ef-topbar { display: none; }
}

@media (min-width: 1200px) {
	.ef-topnav__inner {
		padding-inline: calc(var(--ef-space-64) + var(--ef-space-16));
	}
}

/* Bottom Tab Bar: fixed on mobile, hidden from 768 px up. Pages add .ef-has-tabbar to reserve its height. */

.ef-tabbar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	height: calc(64px + var(--ef-space-20));
	padding-bottom: var(--ef-space-20);
	background: var(--ef-bg-surface);
	border-top: 1px solid var(--ef-border-default);
}

.ef-tabbar__tab {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: var(--ef-space-4);
	min-width: 0;
	height: 64px;
	color: var(--ef-text-secondary);
	text-decoration: none;
	font: 500 12px/16px var(--ef-font-ui);
}

.ef-tabbar__indicator {
	width: 32px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: transparent;
}

.ef-tabbar__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding-top: 6px;
}

.ef-tabbar__tab .ef-icon {
	color: var(--ef-text-primary);
}

.ef-tabbar__tab[aria-current="page"] {
	color: var(--ef-text-accent);
}

.ef-tabbar__tab[aria-current="page"] .ef-icon {
	color: var(--ef-text-accent);
}

.ef-tabbar__tab[aria-current="page"] .ef-tabbar__indicator {
	background: var(--ef-accent-default);
}

@media (max-width: 767.98px) {
	.ef-has-tabbar {
		padding-bottom: calc(64px + var(--ef-space-20));
	}
}

@media (min-width: 768px) {
	.ef-tabbar { display: none; }
}

/* Poster: 4:5. Real event image first, placeholder art when the event has none. */

.ef-poster {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--ef-radius-lg);
	background: var(--ef-bg-subtle);
}

.ef-poster img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Event Card: poster wall card. */

.ef-event-card {
	display: flex;
	flex-direction: column;
	gap: var(--ef-space-12);
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.ef-event-card__info {
	display: flex;
	flex-direction: column;
	gap: var(--ef-space-4);
	min-width: 0;
}

.ef-event-card__date {
	font: 600 11px/16px var(--ef-font-ui);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ef-text-accent);
}

.ef-event-card__title {
	margin: 0;
	font: 500 14px/20px var(--ef-font-ui);
	color: var(--ef-text-primary);
}

.ef-event-card__venue {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font: 400 13px/18px var(--ef-font-ui);
	color: var(--ef-text-secondary);
}

.ef-event-card__venue .ef-icon {
	margin-block-start: 2px;
}

.ef-event-card__price {
	font: 500 14px/20px var(--ef-font-ui);
	color: var(--ef-text-primary);
	font-variant-numeric: tabular-nums;
}

.ef-event-card:hover .ef-event-card__title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 768px) {
	.ef-event-card__title {
		font: 600 18px/24px var(--ef-font-ui);
	}
}

/* Filter Chip: 44 px. Selected inverts the fill and adds a check. */

.ef-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding-inline: var(--ef-space-16);
	border: 1px solid var(--ef-border-strong);
	border-radius: var(--ef-radius-full);
	background: var(--ef-bg-surface);
	color: var(--ef-text-primary);
	font: 500 14px/20px var(--ef-font-ui);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.ef-filter-chip:hover {
	background: var(--ef-bg-subtle);
}

.ef-filter-chip[aria-pressed="true"],
.ef-filter-chip[aria-current="true"] {
	border-color: var(--ef-bg-inverse);
	background: var(--ef-bg-inverse);
	color: var(--ef-text-inverse);
}

/* Ticket Type Row: one ticket type in the picker. */

.ef-ticket-row {
	display: flex;
	flex-direction: column;
	gap: var(--ef-space-12);
	padding-block: var(--ef-space-16);
	border-bottom: 1px solid var(--ef-border-default);
}

.ef-ticket-row__top {
	display: flex;
	align-items: flex-start;
	gap: var(--ef-space-12);
}

.ef-ticket-row__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ef-ticket-row__name,
.ef-ticket-row__price {
	margin: 0;
	font: 600 18px/24px var(--ef-font-ui);
	color: var(--ef-text-primary);
}

.ef-ticket-row__price {
	flex: none;
	font-variant-numeric: tabular-nums;
}

.ef-ticket-row__desc {
	margin: 0;
	font: 400 13px/18px var(--ef-font-ui);
	color: var(--ef-text-secondary);
}

.ef-ticket-row__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ef-space-12);
}

.ef-ticket-row--sold-out .ef-ticket-row__name,
.ef-ticket-row--sold-out .ef-ticket-row__price {
	color: var(--ef-text-tertiary);
}

/* Summary Row: price lines and the total. Amounts always carry the currency. */

.ef-summary-row {
	display: flex;
	align-items: center;
	gap: var(--ef-space-12);
	font: 400 14px/20px var(--ef-font-ui);
	color: var(--ef-text-secondary);
}

.ef-summary-row__label {
	flex: 1;
	min-width: 0;
}

.ef-summary-row__amount {
	flex: none;
	text-align: end;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--ef-text-primary);
	white-space: nowrap;
}

.ef-summary-row--total {
	padding-block-start: var(--ef-space-12);
	border-top: 1px solid var(--ef-border-default);
	font: 600 18px/24px var(--ef-font-ui);
	color: var(--ef-text-primary);
}

.ef-summary-row--total .ef-summary-row__amount {
	font: 600 24px/28px var(--ef-font-ui);
	letter-spacing: -0.003em;
	font-variant-numeric: tabular-nums;
}

/* QR Code: always dark on white, in light and dark mode. Never mirrored. */

.ef-qr {
	width: min(100%, 274px);
	aspect-ratio: 1;
	padding: var(--ef-space-16);
	border-radius: var(--ef-radius-lg);
	background: var(--ef-neutral-0);
	direction: ltr;
}

.ef-qr img {
	width: 100%;
	height: 100%;
	shape-rendering: crispEdges;
	image-rendering: pixelated;
}

/* Loading placeholder for any guest list. */

.ef-skel {
	border-radius: var(--ef-radius-sm);
	background: linear-gradient(90deg, var(--ef-bg-subtle) 25%, var(--ef-border-default) 50%, var(--ef-bg-subtle) 75%);
	background-size: 200% 100%;
	animation: ef-guest-shimmer 1.4s ease-in-out infinite;
}

@keyframes ef-guest-shimmer {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}

/* Light logo on dark surfaces. */

.ef-logo--light {
	color: var(--ef-text-on-accent);
}

/* Page container: the 1440 px content width with the same side padding as the Top Nav. */

.ef-page {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--ef-space-16);
}

@media (min-width: 768px) {
	.ef-page { padding-inline: var(--ef-space-24); }
}

@media (min-width: 1200px) {
	.ef-page { padding-inline: calc(var(--ef-space-64) + var(--ef-space-16)); }
}

/* Select: a native <select> with an icon at the start and a chevron at the end. */

.ef-select {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 44px;
}

.ef-select--block {
	display: flex;
	width: 100%;
}

.ef-select__control {
	width: 100%;
	height: 100%;
	padding-inline: 42px 36px;
	border: 1px solid var(--ef-border-strong);
	border-radius: var(--ef-radius-md);
	background: var(--ef-bg-surface);
	color: var(--ef-text-primary);
	font: 500 14px/20px var(--ef-font-ui);
	appearance: none;
	cursor: pointer;
}

.ef-select__icon,
.ef-select__chevron {
	position: absolute;
	display: flex;
	pointer-events: none;
	color: var(--ef-text-primary);
}

.ef-select__icon { inset-inline-start: 14px; }
.ef-select__chevron { inset-inline-end: 12px; }

/* Empty and error states. */

.ef-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ef-space-12);
	padding: var(--ef-space-64) var(--ef-space-24);
	border: 1px dashed var(--ef-border-strong);
	border-radius: var(--ef-radius-lg);
	background: var(--ef-bg-surface);
	text-align: center;
}

.ef-empty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--ef-radius-full);
	background: var(--ef-bg-subtle);
	color: var(--ef-text-secondary);
}

.ef-empty--error .ef-empty__icon {
	background: var(--ef-danger-bg);
	color: var(--ef-danger-fg);
}

.ef-empty__title {
	margin: 0;
	font: 600 18px/24px var(--ef-font-ui);
	color: var(--ef-text-primary);
}

.ef-empty__body {
	max-width: 40ch;
	margin: 0 0 var(--ef-space-4);
	font: 400 14px/20px var(--ef-font-ui);
	color: var(--ef-text-secondary);
}

/* Bottom sheet: a modal <dialog> pinned to the bottom edge. */

.ef-sheet {
	inset-block: auto 0;
	inset-inline: 0;
	width: 100%;
	max-width: none;
	max-height: 90dvh;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--ef-radius-xl) var(--ef-radius-xl) 0 0;
	background: var(--ef-bg-surface);
	color: var(--ef-text-primary);
	box-shadow: var(--ef-elevation-3);
}

.ef-sheet:focus {
	outline: none;
}

.ef-sheet::backdrop {
	background: color-mix(in srgb, var(--ef-neutral-950) 48%, transparent);
}

.ef-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--ef-space-8) var(--ef-space-8) 0 var(--ef-space-20);
}

.ef-sheet__title {
	margin: 0;
	font: 600 18px/24px var(--ef-font-ui);
}

.ef-sheet__body {
	display: flex;
	flex-direction: column;
	gap: var(--ef-space-16);
	padding: var(--ef-space-16) var(--ef-space-20) var(--ef-space-24);
}

.ef-sheet__foot {
	display: flex;
	flex-direction: column;
	gap: var(--ef-space-8);
	padding-block-start: var(--ef-space-8);
}

/* Footer: dark, with link columns. Not shown on mobile, where the tab bar is the navigation. */

.ef-footer {
	margin-block-start: auto;
	background: var(--ef-bg-inverse);
	color: var(--ef-text-inverse);
}

.ef-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--ef-space-40);
	max-width: 1440px;
	margin-inline: auto;
	padding: calc(var(--ef-space-48) + var(--ef-space-8)) var(--ef-space-24) var(--ef-space-40);
}

.ef-footer__top {
	display: flex;
	gap: var(--ef-space-64);
}

.ef-footer__brand {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--ef-space-16);
}

.ef-footer__tagline {
	margin: 0;
	font: 400 14px/20px var(--ef-font-ui);
}

.ef-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--ef-space-12);
	font: 400 14px/20px var(--ef-font-ui);
}

.ef-footer__col a {
	color: inherit;
	text-decoration: none;
}

.ef-footer__col a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ef-footer__heading {
	margin: 0;
	font: 600 11px/16px var(--ef-font-ui);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ef-footer__legal {
	margin: 0;
	font: 400 13px/18px var(--ef-font-ui);
}

@media (min-width: 1200px) {
	.ef-footer__inner { padding-inline: calc(var(--ef-space-64) + var(--ef-space-16)); }
}

@media (max-width: 767.98px) {
	.ef-footer { display: none; }
}

/* Avatar variants: initials or an image, and a larger size for cards. */

.ef-avatar--text {
	overflow: hidden;
	font: 600 13px/1 var(--ef-font-ui);
}

.ef-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ef-avatar--lg {
	width: 48px;
	height: 48px;
	font-size: 15px;
}

/* A white circle button for use over a poster. */

.ef-round-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--ef-radius-full);
	background: var(--ef-bg-surface);
	color: var(--ef-text-primary);
	box-shadow: var(--ef-elevation-2);
	text-decoration: none;
	cursor: pointer;
}

/* Show something on one side of the 768 px breakpoint only. */

.ef-only-wide { display: none; }
.ef-only-narrow { display: inline-flex; }

@media (min-width: 768px) {
	.ef-only-wide { display: inline-flex; }
	.ef-only-narrow { display: none; }
}

/* Bottom sheet details: the grab handle, a taller header and scrolling when the content is long. */

.ef-sheet {
	overflow-y: auto;
}

.ef-sheet__grab {
	width: 40px;
	height: 4px;
	margin: var(--ef-space-8) auto 0;
	border-radius: var(--ef-radius-full);
	background: var(--ef-border-strong);
}

.ef-sheet__head--tall {
	align-items: flex-start;
	padding-block-start: var(--ef-space-8);
}

.ef-sheet__title--lg {
	font: 600 22px/28px var(--ef-font-ui);
	letter-spacing: -0.003em;
}

.ef-sheet__sub {
	margin: 2px 0 0;
	font: 400 13px/18px var(--ef-font-ui);
	color: var(--ef-text-secondary);
}

/* A short message at the bottom of the screen. */

.ef-toast {
	position: fixed;
	inset-inline: var(--ef-space-16);
	bottom: calc(var(--ef-space-24) + env(safe-area-inset-bottom));
	z-index: 60;
	width: fit-content;
	max-width: 90vw;
	margin: 0 auto;
	padding: var(--ef-space-12) var(--ef-space-16);
	border-radius: var(--ef-radius-md);
	background: var(--ef-bg-inverse);
	color: var(--ef-text-inverse);
	box-shadow: var(--ef-elevation-3);
	font: 500 14px/20px var(--ef-font-ui);
}

/* Breadcrumb: shown from 768 px, where there is no back button. */

.ef-crumbs {
	display: none;
	align-items: center;
	gap: var(--ef-space-8);
	padding-block-start: var(--ef-space-24);
	font: 400 13px/18px var(--ef-font-ui);
	color: var(--ef-text-secondary);
}

.ef-crumbs a {
	color: inherit;
	text-decoration: none;
}

.ef-crumbs a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ef-crumbs [aria-current] {
	color: var(--ef-text-primary);
}

@media (min-width: 768px) {
	.ef-crumbs { display: flex; }
}