/* Event gallery: the photo section on the event page (.xy-eg) and the full-screen gallery
 * over it (.xy-eg-dialog). Theme variables keep light and dark modes in step with the site. */

/* ----- Tokens ----- */

.xy-eg,
.xy-eg-dialog {
	--xy-eg-ink: var(--c-headings, #161616);
	--xy-eg-ink-2: #4c4c56;
	--xy-eg-ink-3: #6a6a74;
	--xy-eg-line: rgb(0 0 0 / 10%);
	--xy-eg-surface: var(--c-contrast-0, #fff);
	--xy-eg-surface-2: #f5f5f8;
	--xy-eg-surface-3: #e9e9ee;
	--xy-eg-action: var(--c-main, #3c3fde);
	--xy-eg-brand: var(--xy-brand-gradient, linear-gradient(90deg, #e40666 0%, #3c3fde 100%));
	--xy-eg-on: #161616;
	--xy-eg-on-ink: #fff;
	--xy-eg-on-muted: rgb(255 255 255 / 70%);
	--xy-eg-pop: #161616;
	--xy-eg-pop-ink: #fff;
	--xy-eg-pop-muted: rgb(255 255 255 / 70%);
	--xy-eg-field: #fff;
	--xy-eg-field-line: var(--c-contrast-200, #ccc);
	--xy-eg-new-bg: rgb(228 6 102 / 10%);
	--xy-eg-new-ink: #b0034e;
	--xy-eg-glow: linear-gradient(100deg, rgb(228 6 102 / 8%), rgb(60 63 222 / 9%));
	--xy-eg-glow-line: rgb(0 0 0 / 6%);
	--xy-eg-mark: #3c3fde;
	--xy-eg-error: #c2184a;
	--xy-eg-ok: #1f8a5b;
	--xy-eg-wait: #b26a00;
	--xy-eg-shadow: 0 24px 48px -12px rgb(0 0 0 / 25%);
	--xy-eg-ui: var(--ui-font, "Outfit", system-ui, sans-serif);
	--xy-eg-body: var(--body-font, "Inter", system-ui, sans-serif);
	--xy-eg-mono: var(--mono-font, ui-monospace, "SFMono-Regular", menlo, monospace);
}


/* ----- Shared pieces ----- */

.xy-eg,
.xy-eg *,
.xy-eg-dialog,
.xy-eg-dialog * {
	box-sizing: border-box;
}

.xy-eg svg,
.xy-eg-dialog svg {
	flex: none;
	inline-size: 20px;
	block-size: 20px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.xy-eg .xy-eg-sr,
.xy-eg-dialog .xy-eg-sr {
	position: absolute;
	overflow: hidden;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

.xy-eg-dialog .xy-eg-rule,
.xy-eg .xy-eg-rule {
	block-size: 3px;
	background: var(--xy-eg-brand);
}

/* The theme gives every button a fixed height, uppercase text and a black hover. */
:is(.xy-eg, .xy-eg-dialog) :is(button, input) {
	block-size: auto;
	margin: 0;
	box-shadow: none;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

:is(.xy-eg, .xy-eg-dialog) .xy-eg-button,
:is(.xy-eg, .xy-eg-dialog) .xy-eg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 44px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: var(--xy-radius-button, 6px);
	background: var(--c-main, #3c3fde);
	color: #fff;
	font: 500 14px/1 var(--xy-eg-ui);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

:is(.xy-eg, .xy-eg-dialog) .xy-eg-button:hover,
:is(.xy-eg, .xy-eg-dialog) .xy-eg-btn:hover {
	background: #2f32c4;
	color: #fff;
}

.xy-eg-dialog .xy-eg-btn-ghost,
.xy-eg-dialog .xy-eg-btn-ghost:hover {
	border-color: var(--xy-eg-line);
	background: color-mix(in srgb, var(--xy-eg-ink) 4%, transparent);
	color: var(--xy-eg-ink);
}

.xy-eg-dialog .xy-eg-btn-ghost:hover {
	background: color-mix(in srgb, var(--xy-eg-ink) 9%, transparent);
}

.xy-eg-dialog .xy-eg-btn-ghost.is-on {
	border-color: var(--xy-eg-action);
}

.xy-eg-dialog .xy-eg-btn-small {
	min-block-size: 36px;
	padding: 0 14px;
	font-size: 13px;
}

.xy-eg-dialog .xy-eg-btn-small svg {
	inline-size: 16px;
	block-size: 16px;
}

.xy-eg-dialog .xy-eg-btn-whatsapp,
.xy-eg-dialog .xy-eg-btn-whatsapp:hover {
	/* WhatsApp green, darkened so white text keeps its contrast. */
	background: #128c4b;
	color: #fff;
}

.xy-eg-dialog .xy-eg-ibtn {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 1px solid var(--xy-eg-line);
	border-radius: 999px;
	background: color-mix(in srgb, var(--xy-eg-ink) 6%, transparent);
	color: var(--xy-eg-ink);
	cursor: pointer;
}

.xy-eg-dialog .xy-eg-ibtn:hover {
	background: color-mix(in srgb, var(--xy-eg-ink) 12%, transparent);
	color: var(--xy-eg-ink);
}

.xy-eg-dialog .xy-eg-ibtn-small {
	inline-size: 36px;
	block-size: 36px;
	border-color: transparent;
	background: transparent;
	color: var(--xy-eg-ink-3);
}

.xy-eg-dialog .xy-eg-ibtn-small svg {
	inline-size: 16px;
	block-size: 16px;
}

.xy-eg-dialog .xy-eg-ibtn-large {
	inline-size: 56px;
	block-size: 56px;
	background: rgb(16 16 22 / 60%);
	backdrop-filter: blur(12px);
}

.xy-eg-dialog .xy-eg-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--xy-eg-action);
	font: 500 14px/1.3 var(--xy-eg-ui);
	white-space: nowrap;
	cursor: pointer;
}

.xy-eg-dialog .xy-eg-link:hover {
	background: none;
	color: var(--xy-eg-action);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.xy-eg-dialog .xy-eg-link svg {
	inline-size: 18px;
	block-size: 18px;
}

.xy-eg-dialog :is(button, a):disabled,
.xy-eg-dialog [aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
}

.xy-eg-dialog [hidden],
.xy-eg [hidden] {
	display: none !important; /* Component display rules must not reveal hidden parts. */
}

.xy-eg :focus-visible,
.xy-eg-dialog :focus-visible {
	outline: 2px solid var(--xy-eg-action);
	outline-offset: 2px;
}

/* The one marker for photos added since your last visit. */
.xy-eg-dialog .xy-eg-dot {
	display: inline-block;
	flex: none;
	inline-size: 8px;
	block-size: 8px;
	border-radius: 999px;
	background: var(--xy-eg-brand);
}

.xy-eg-dialog .xy-eg-tag {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--xy-eg-new-bg);
	color: var(--xy-eg-new-ink);
	font: 600 11px/1.2 var(--xy-eg-ui);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.xy-eg-dialog .xy-eg-kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 18px;
	padding: 3px 6px;
	border: 1px solid var(--xy-eg-line);
	border-radius: 4px;
	color: var(--xy-eg-ink-3);
	font: 500 11px/1 var(--xy-eg-mono);
}

.xy-eg-dialog img {
	display: block;
	max-inline-size: none;
}

/* ----- Event page: the album card ----- */

.xy-eg {
	--xy-eg-ghost-line: rgb(0 0 0 / 14%);

	margin-block: 2em;
	color: var(--xy-eg-ink);
	font-family: var(--xy-eg-body);
}

.xy-eg > .xy-eg-rule {
	inline-size: 48px;
	margin-block-end: 14px;
}

.xy-eg .xy-eg-head {
	margin: 0 0 14px;
}

.xy-eg .xy-eg-heading {
	display: flex;
	align-items: center;
	margin: 0;
	color: var(--xy-eg-ink);
	font: 600 26px/1.15 var(--xy-eg-ui);
	letter-spacing: -0.02em;
}

.xy-eg .xy-eg-meta {
	margin: 6px 0 0;
	color: var(--xy-eg-ink-2);
	font: 400 13px/1.5 var(--xy-eg-body);
	font-variant-numeric: tabular-nums;
}

/* The only sign that this device unlocked the gallery. */
.xy-eg .xy-eg-unlocked {
	display: inline-flex;
	margin-inline-start: 10px;
	color: var(--xy-eg-ink-3);
}

.xy-eg .xy-eg-unlocked svg {
	inline-size: 17px;
	block-size: 17px;
}

/* One link opens the gallery: a tall photo with four beside it, and the count on a shade. */
.xy-eg .xy-eg-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.7fr) minmax(0, 0.7fr);
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 4px;
	block-size: 360px;
	overflow: hidden;
	border-radius: 14px;
	background: #07070a;
	color: #fff;
	text-decoration: none;
	isolation: isolate;
	cursor: pointer;
	transition: transform 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

/* The shade sits low, where the top-anchored crops keep clothes and floor rather than faces. */
.xy-eg .xy-eg-card::after {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	block-size: 170px;
	background: linear-gradient(0deg, rgb(8 8 12 / 92%) 0%, rgb(8 8 12 / 60%) 48%, rgb(8 8 12 / 0%) 100%);
	content: "";
	pointer-events: none;
}

.xy-eg .xy-eg-card-tile {
	position: relative;
	display: block;
	overflow: hidden;
	background: #20202a;
}

.xy-eg .xy-eg-card-tile:first-child {
	grid-row: span 2;
}

.xy-eg .xy-eg-card-img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 0;
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.xy-eg .xy-eg-card-img.is-failed {
	visibility: hidden;
}

.xy-eg .xy-eg-card[data-count="1"] {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
}

.xy-eg .xy-eg-card[data-count="1"] .xy-eg-card-tile:first-child {
	grid-row: auto;
}

.xy-eg .xy-eg-card[data-count="2"],
.xy-eg .xy-eg-card[data-count="3"] {
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}

.xy-eg .xy-eg-card[data-count="2"] .xy-eg-card-tile:nth-child(2) {
	grid-row: span 2;
}

.xy-eg .xy-eg-card[data-count="4"] .xy-eg-card-tile:nth-child(4) {
	grid-column: span 2;
}

.xy-eg .xy-eg-card-cap {
	position: absolute;
	inset: auto 0 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
}

.xy-eg .xy-eg-card-text {
	min-inline-size: 0;
}

.xy-eg .xy-eg-card-count {
	display: block;
	color: #fff;
	font: 600 34px/1 var(--xy-eg-ui);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.xy-eg .xy-eg-card-count small {
	color: rgb(255 255 255 / 82%);
	font: 500 17px/1 var(--xy-eg-ui);
	letter-spacing: 0;
}

.xy-eg .xy-eg-card-sub {
	display: block;
	margin-block-start: 8px;
	color: rgb(255 255 255 / 80%);
	font: 400 13px/1.45 var(--xy-eg-body);
}

.xy-eg .xy-eg-card-sep {
	margin: 0 7px;
	color: rgb(255 255 255 / 60%);
}

.xy-eg .xy-eg-card-new {
	color: #fff;
	font-weight: 500;
}

.xy-eg .xy-eg-card-new .xy-eg-dot {
	display: inline-block;
	inline-size: 8px;
	block-size: 8px;
	margin-inline-end: 7px;
	border-radius: 999px;
	background: var(--xy-eg-brand);
}

.xy-eg .xy-eg-card-go {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 8px;
	min-block-size: 44px;
	padding: 0 16px 0 20px;
	border-radius: 999px;
	background: #fff;
	color: #101016;
	font: 600 15px/1 var(--xy-eg-ui);
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.xy-eg .xy-eg-card-arrow {
	inline-size: 18px;
	block-size: 18px;
	transition: transform 0.2s ease;
}

/* Hover zooms the photos slightly and turns the pill indigo. */
.xy-eg .xy-eg-card:hover .xy-eg-card-img {
	transform: scale(1.04);
}

.xy-eg .xy-eg-card:is(:hover, :active) .xy-eg-card-go {
	background: var(--c-main, #3c3fde);
	color: #fff;
}

.xy-eg .xy-eg-card:hover .xy-eg-card-arrow {
	transform: translateX(3px);
}

.xy-eg .xy-eg-card:focus-visible {
	outline: 3px solid var(--xy-eg-action);
	outline-offset: 3px;
}

/* Pressing settles the card and darkens the shade; on phones this is the tap state. */
.xy-eg .xy-eg-card:active {
	transform: scale(0.985);
}

.xy-eg .xy-eg-card:active::after {
	background: linear-gradient(0deg, rgb(8 8 12 / 95%) 0%, rgb(8 8 12 / 70%) 55%, rgb(8 8 12 / 15%) 100%);
}

/* With a tray attached, the card's lower corners square off to meet it. */
.xy-eg .xy-eg-card:has(~ .xy-eg-tray:not([hidden])) {
	border-radius: 14px 14px 0 0;
}

/* The tray under the card: Continue, See what's new and the signup, each its own control. */
.xy-eg .xy-eg-tray {
	border: 1px solid var(--xy-eg-line);
	border-block-start: 0;
	border-radius: 0 0 14px 14px;
	background: var(--xy-eg-surface-2);
}

.xy-eg .xy-eg-tray-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px 12px 12px;
}

.xy-eg .xy-eg-tray-row + .xy-eg-tray-row {
	border-block-start: 1px solid var(--xy-eg-line);
}

.xy-eg .xy-eg-pickup:not([hidden]):has(+ .xy-photo-notification) {
	border-block-end: 1px solid var(--xy-eg-line);
}

.xy-eg .xy-eg-tray-thumbs {
	display: flex;
	flex: none;
}

.xy-eg .xy-eg-tray-thumb {
	flex: none;
	overflow: hidden;
	inline-size: 40px;
	block-size: 52px;
	border-radius: 6px;
	background: var(--xy-eg-surface-3);
}

.xy-eg .xy-eg-tray-thumbs .xy-eg-tray-thumb + .xy-eg-tray-thumb {
	margin-inline-start: -14px;
	box-shadow: 0 0 0 2px var(--xy-eg-surface-2);
}

.xy-eg .xy-eg-tray-thumb img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 0;
}

.xy-eg .xy-eg-tray-text {
	flex: 1;
	min-inline-size: 0;
}

.xy-eg .xy-eg-tray-text strong {
	display: block;
	color: var(--xy-eg-ink);
	font: 600 15px/1.3 var(--xy-eg-ui);
	font-variant-numeric: tabular-nums;
}

.xy-eg .xy-eg-tray-meta {
	display: block;
	margin-block-start: 2px;
	color: var(--xy-eg-ink-2);
	font: 400 12.5px/1.45 var(--xy-eg-body);
}

.xy-eg .xy-eg-tray-actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 14px;
}

.xy-eg .xy-eg-tray-link {
	color: var(--xy-eg-action);
	font: 500 13px/1.3 var(--xy-eg-ui);
	text-decoration: none;
	white-space: nowrap;
}

.xy-eg .xy-eg-tray-link:hover {
	color: var(--xy-eg-action);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.xy-eg .xy-eg-tray-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 36px;
	padding: 0 14px;
	border: 1px solid var(--xy-eg-line);
	border-radius: var(--xy-radius-button, 6px);
	background: var(--xy-eg-surface);
	color: var(--xy-eg-ink);
	font: 500 14px/1 var(--xy-eg-ui);
	text-decoration: none;
	white-space: nowrap;
}

.xy-eg .xy-eg-tray-button:hover {
	background: color-mix(in srgb, var(--xy-eg-ink) 8%, var(--xy-eg-surface));
	color: var(--xy-eg-ink);
}

.xy-eg :is(.xy-eg-tray-link, .xy-eg-tray-button):focus-visible {
	outline: 2px solid var(--xy-eg-action);
	outline-offset: 2px;
}

/* The signup in the tray: a bell, one line and the field and button in a capsule. */
.xy-eg .xy-eg-tray .xy-photo-notification {
	margin: 0;
	padding: 12px 14px 12px 12px;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.xy-eg :is(.xy-eg-tray, .xy-eg-panel) .xy-photo-notification::before {
	content: none;
}

.xy-eg .xy-eg-tray .xy-photo-notification-signup {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: start;
	gap: 0 14px;
}

.xy-eg :is(.xy-eg-tray, .xy-eg-panel) .xy-photo-notification-signup .xy-photo-notification-heading,
.xy-eg :is(.xy-eg-tray, .xy-eg-panel) .xy-photo-notification-signup .xy-photo-notification-heading > :not(.xy-photo-notification-mark) {
	display: contents;
}

.xy-eg .xy-eg-tray .xy-photo-notification-signup .xy-photo-notification-mark {
	grid-area: 1 / 1 / span 2;
	position: relative;
	inline-size: 40px;
	block-size: 40px;
	margin-block-start: 2px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--xy-eg-action) 14%, transparent);
	color: transparent;
}

/* A bell, drawn here because the signup's own markup carries a photo icon, which the
 * transparent color above hides. */
.xy-eg .xy-eg-tray .xy-photo-notification-mark::before {
	position: absolute;
	inset: 10px;
	background: var(--xy-eg-action);
	content: "";
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5a6 6 0 1 1 12 0c0 6 2.5 7.5 2.5 7.5h-17S6 15.5 6 9.5z'/%3E%3Cpath d='M10.3 20.5a1.9 1.9 0 0 0 3.4 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

.xy-eg :is(.xy-eg-tray, .xy-eg-panel) .xy-photo-notification-signup :is(.xy-photo-notification-title, .xy-photo-notification-label) {
	position: absolute;
	overflow: hidden;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

.xy-eg .xy-eg-tray .xy-photo-notification .xy-photo-notification-description {
	grid-area: 1 / 2;
	margin: 0;
	color: var(--xy-eg-ink);
	font: 600 15px/1.3 var(--xy-eg-ui);
}

.xy-eg .xy-eg-tray .xy-photo-notification .xy-photo-notification-terms {
	grid-area: 2 / 2;
	margin: 6px 0 0;
	padding: 0;
	font-size: 11.5px;
}

.xy-eg .xy-eg-tray .xy-photo-notification .xy-photo-notification-form {
	grid-area: 1 / 3 / span 2;
	align-self: center;
	margin: 0;
	padding: 0;
}

/* Email field and button in one capsule. */
.xy-eg :is(.xy-eg-tray, .xy-eg-panel) .xy-photo-notification-fields {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 4px;
	inline-size: 316px;
	max-inline-size: 100%;
	min-block-size: 46px;
	padding: 4px;
	border: 1px solid var(--xy-eg-field-line);
	border-radius: 999px;
	background: var(--xy-eg-field);
	text-align: start;
}

.xy-eg :is(.xy-eg-tray, .xy-eg-panel) .xy-photo-notification-fields:focus-within {
	border-color: var(--xy-eg-action);
}

.xy-eg :is(.xy-eg-tray, .xy-eg-panel) .xy-photo-notification .xy-photo-notification-input {
	flex: 1 1 auto;
	inline-size: auto;
	min-inline-size: 0;
	min-block-size: 36px;
	padding: 0 12px;
	border: 0;
	border-radius: 999px;
	outline: 0;
	background: transparent;
	box-shadow: none;
	color: var(--xy-eg-ink);
	font-size: 14px;
}

.xy-eg :is(.xy-eg-tray, .xy-eg-panel) .xy-photo-notification .xy-photo-notification-button {
	min-block-size: 36px;
	padding: 0 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
}

.xy-eg :is(.xy-eg-tray, .xy-eg-panel) .xy-photo-notification-done {
	grid-template-columns: 40px minmax(0, 1fr);
	align-items: center;
	text-align: start;
}

.xy-eg :is(.xy-eg-tray, .xy-eg-panel) .xy-photo-notification-done .xy-photo-notification-title {
	font-size: 16px;
}

.xy-eg :is(.xy-eg-tray, .xy-eg-panel) .xy-photo-notification-done .xy-photo-notification-description {
	font-size: 13px;
}

/* The locked and coming-soon panels: blank tiles stand in where the photos will be. */
.xy-eg .xy-eg-panel {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 320px;
	padding: 28px 24px;
	overflow: hidden;
	border: 1px solid var(--xy-eg-line);
	border-radius: 14px;
	background: linear-gradient(120deg, rgb(228 6 102 / 10%), rgb(60 63 222 / 14%)), var(--xy-eg-surface-2);
	text-align: center;
}

.xy-eg .xy-eg-panel:has(~ .xy-eg-tray:not([hidden])) {
	border-radius: 14px 14px 0 0;
}

.xy-eg .xy-eg-panel-tiles {
	position: absolute;
	inset: 8px;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.7fr) minmax(0, 0.7fr);
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 6px;
	opacity: 0.7;
}

.xy-eg .xy-eg-panel-tiles i {
	border: 1px dashed var(--xy-eg-ghost-line);
	border-radius: 8px;
	background: linear-gradient(160deg, rgb(228 6 102 / 7%), rgb(60 63 222 / 9%));
}

.xy-eg .xy-eg-panel-tiles i:first-child {
	grid-row: span 2;
}

.xy-eg .xy-eg-panel-tiles::after {
	position: absolute;
	inset: -8px;
	background: radial-gradient(closest-side, var(--xy-eg-surface-2) 62%, transparent);
	content: "";
}

.xy-eg .xy-eg-panel-body {
	position: relative;
	inline-size: min(400px, 100%);
}

.xy-eg .xy-eg-panel-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 48px;
	block-size: 48px;
	border: 2px solid transparent;
	border-radius: 999px;
	background: linear-gradient(var(--xy-eg-surface), var(--xy-eg-surface)) padding-box, var(--xy-eg-brand) border-box;
	box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
	color: var(--xy-eg-ink);
}

.xy-eg .xy-eg-panel-badge svg {
	inline-size: 20px;
	block-size: 20px;
}

.xy-eg .xy-eg-lock-shared {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	inline-size: fit-content;
	margin: 0 auto 14px;
	padding: 6px 12px 6px 10px;
	border: 1px solid var(--xy-eg-line);
	border-radius: 999px;
	background: var(--xy-eg-field);
	color: var(--xy-eg-ink-2);
	font: 500 12px/1.2 var(--xy-eg-ui);
}

.xy-eg .xy-eg-lock-shared svg {
	inline-size: 15px;
	block-size: 15px;
}

.xy-eg .xy-eg-lock-shared b {
	color: var(--xy-eg-ink);
	font: 500 12px/1.2 var(--xy-eg-mono);
}

.xy-eg .xy-eg-lock-title {
	margin: 12px 0 0;
	color: var(--xy-eg-ink);
	font: 600 20px/1.25 var(--xy-eg-ui);
	letter-spacing: -0.01em;
}

.xy-eg .xy-eg-lock-hint {
	margin: 4px 0 16px;
	color: var(--xy-eg-ink-2);
	font: 400 14px/1.5 var(--xy-eg-body);
}

.xy-eg .xy-eg-lock-form {
	margin: 0;
	text-align: start;
}

.xy-eg .xy-eg-lock-label {
	display: block;
	margin: 0 0 6px;
	color: var(--xy-eg-ink-2);
	font: 500 13px/1.3 var(--xy-eg-ui);
}

/* The message line keeps its space under the field, so an error never moves the page. */
.xy-eg .xy-eg-lock-row {
	display: grid;
	grid-template-areas:
		"field submit"
		"message message";
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0 8px;
}

.xy-eg .xy-eg-lock-field {
	display: flex;
	grid-area: field;
	align-items: center;
	min-block-size: 44px;
	padding: 0 4px 0 12px;
	border: 1px solid var(--xy-eg-field-line);
	border-radius: var(--xy-radius-button, 6px);
	background: var(--xy-eg-field);
}

.xy-eg .xy-eg-lock-field:focus-within {
	border-color: var(--xy-eg-action);
}

.xy-eg .xy-eg-lock-field.is-error {
	border-color: var(--xy-eg-error);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--xy-eg-error) 18%, transparent);
}

.xy-eg .xy-eg-lock-input {
	flex: 1;
	min-inline-size: 0;
	block-size: 42px;
	padding: 0;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: transparent;
	color: var(--xy-eg-ink);
	font: 400 15px/1 var(--xy-eg-ui);
}

.xy-eg .xy-eg-lock-input:disabled {
	opacity: 0.5;
}

.xy-eg .xy-eg-lock-toggle,
.xy-eg .xy-eg-lock-toggle:hover {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	color: var(--xy-eg-ink-3);
	cursor: pointer;
}

.xy-eg .xy-eg-lock-toggle[aria-pressed="true"] {
	color: var(--xy-eg-ink);
}

.xy-eg .xy-eg-lock-toggle svg {
	inline-size: 18px;
	block-size: 18px;
}

.xy-eg .xy-eg-lock-toggle[aria-pressed="true"] .xy-eg-lock-eye,
.xy-eg .xy-eg-lock-toggle[aria-pressed="false"] .xy-eg-lock-eye-off {
	display: none;
}

.xy-eg .xy-eg-lock-submit {
	grid-area: submit;
}

.xy-eg .xy-eg-lock-message {
	display: flex;
	grid-area: message;
	align-items: center;
	gap: 6px;
	min-block-size: 20px;
	margin: 8px 0 0;
	color: var(--xy-eg-error);
	font: 400 13px/1.5 var(--xy-eg-body);
}

.xy-eg .xy-eg-lock-message svg {
	inline-size: 16px;
	block-size: 16px;
}

.xy-eg .xy-eg-lock-message.is-wait {
	color: var(--xy-eg-ink-2);
}

.xy-eg .xy-eg-lock-message.is-wait .xy-eg-lock-icon {
	color: var(--xy-eg-wait);
}

.xy-eg .is-waiting .xy-eg-lock-field {
	opacity: 0.5;
}

.xy-eg .is-waiting .xy-eg-lock-submit {
	opacity: 0.35;
	pointer-events: none;
}

/* Before the first photos, the signup takes the place of the photos. */
.xy-eg .xy-eg-panel .xy-photo-notification {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: center;
}

.xy-eg .xy-eg-panel .xy-photo-notification-signup {
	display: block;
}

.xy-eg .xy-eg-panel .xy-photo-notification-signup .xy-photo-notification-mark {
	display: none;
}

.xy-eg .xy-eg-panel .xy-photo-notification .xy-photo-notification-description {
	margin: 12px 0 0;
	color: var(--xy-eg-ink);
	font: 600 18px/1.3 var(--xy-eg-ui);
}

.xy-eg .xy-eg-panel .xy-photo-notification .xy-photo-notification-form {
	margin: 16px 0 0;
	padding: 0;
}

.xy-eg .xy-eg-panel .xy-photo-notification-form .xy-photo-notification-fields {
	inline-size: 100%;
}

.xy-eg .xy-eg-panel .xy-photo-notification .xy-photo-notification-terms {
	margin: 6px 0 0;
	padding: 0;
	font-size: 11.5px;
}

/* After signup, the check replaces the camera badge and the confirmation stacks
 * under it, centered like the rest of the panel. */
.xy-eg .xy-eg-panel-body:has(.xy-photo-notification-done:not([hidden])) > .xy-eg-panel-badge {
	display: none;
}

.xy-eg .xy-eg-panel .xy-photo-notification-done {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: 0;
	text-align: center;
}

.xy-eg .xy-eg-panel .xy-photo-notification-done .xy-photo-notification-check {
	inline-size: 48px;
	block-size: 48px;
	border: 2px solid transparent;
	background: linear-gradient(var(--xy-eg-surface), var(--xy-eg-surface)) padding-box, var(--xy-eg-brand) border-box;
	box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
	color: var(--xy-eg-ok);
}

.xy-eg .xy-eg-panel .xy-photo-notification-done .xy-photo-notification-title {
	margin: 12px 0 0;
	color: var(--xy-eg-ink);
	font: 600 20px/1.25 var(--xy-eg-ui);
	letter-spacing: -0.01em;
}

.xy-eg .xy-eg-panel .xy-photo-notification-done .xy-photo-notification-description {
	margin: 6px 0 0;
	color: var(--xy-eg-ink-2);
	font: 400 14px/1.5 var(--xy-eg-body);
}

.xy-eg .xy-eg-panel .xy-photo-notification-done .xy-photo-notification-email {
	color: var(--xy-eg-ink);
	font-weight: 600;
}

.xy-eg .xy-eg-panel .xy-photo-notification-done .xy-photo-notification-reset {
	margin-block-start: 14px;
	font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
	.xy-eg .xy-eg-card,
	.xy-eg .xy-eg-card-img,
	.xy-eg .xy-eg-card-arrow {
		transition: none;
	}

	.xy-eg .xy-eg-card:hover .xy-eg-card-img,
	.xy-eg .xy-eg-card:hover .xy-eg-card-arrow,
	.xy-eg .xy-eg-card:active {
		transform: none;
	}
}

@media (width <= 719px) {
	.xy-eg .xy-eg-heading {
		font-size: 22px;
	}

	/* One tall photo and two stacked beside it; Open gallery runs the width of the card. */
	.xy-eg .xy-eg-card {
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		block-size: 300px;
		border-radius: 12px;
	}

	.xy-eg .xy-eg-tray {
		border-radius: 0 0 12px 12px;
	}

	.xy-eg .xy-eg-card-tile:nth-child(n + 4) {
		display: none;
	}

	.xy-eg .xy-eg-card::after {
		block-size: 150px;
	}

	.xy-eg .xy-eg-card-cap {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 16px;
	}

	.xy-eg .xy-eg-card-count {
		font-size: 26px;
	}

	.xy-eg .xy-eg-card-count small {
		font-size: 15px;
	}

	.xy-eg .xy-eg-card-sub {
		font-size: 12px;
	}

	.xy-eg .xy-eg-card-go {
		justify-content: center;
		min-block-size: 40px;
		padding: 0 12px 0 16px;
		font-size: 14px;
	}

	/* With two actions the text keeps its width and the actions move under it. */
	.xy-eg .xy-eg-tray-row {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	.xy-eg .xy-eg-tray-text {
		flex: 1 1 170px;
	}

	.xy-eg .xy-eg-tray-actions {
		margin-inline-start: auto;
	}

	.xy-eg .xy-eg-tray .xy-photo-notification-signup {
		grid-template-columns: 40px minmax(0, 1fr);
	}

	.xy-eg .xy-eg-tray .xy-photo-notification .xy-photo-notification-description {
		align-self: center;
	}

	.xy-eg .xy-eg-tray .xy-photo-notification .xy-photo-notification-form {
		grid-area: 2 / 1 / auto / -1;
		margin: 10px 0 0;
	}

	.xy-eg .xy-eg-tray .xy-photo-notification .xy-photo-notification-terms {
		grid-area: 3 / 1 / auto / -1;
	}

	.xy-eg .xy-eg-tray .xy-photo-notification-fields {
		inline-size: 100%;
	}

	.xy-eg .xy-eg-panel {
		min-block-size: 0;
		padding: 24px 16px;
		border-radius: 12px;
	}

	.xy-eg .xy-eg-panel-tiles {
		display: none;
	}

	.xy-eg .xy-eg-card:has(~ .xy-eg-tray:not([hidden])),
	.xy-eg .xy-eg-panel:has(~ .xy-eg-tray:not([hidden])) {
		border-radius: 12px 12px 0 0;
	}

	.xy-eg .xy-eg-lock-row {
		grid-template-areas:
			"field"
			"message"
			"submit";
		grid-template-columns: minmax(0, 1fr);
	}

	.xy-eg .xy-eg-lock-message {
		margin: 0;
		padding: 6px 0;
	}
}

/* ----- Gallery dialog ----- */

.xy-eg-dialog {
	position: fixed;
	inset: 0;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100dvh;
	max-block-size: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	background: var(--xy-eg-surface);
	color: var(--xy-eg-ink);
	font-family: var(--xy-eg-body);
	-webkit-font-smoothing: antialiased;
}

.xy-eg-dialog[open] {
	display: flex;
	flex-direction: column;
}

.xy-eg-dialog::backdrop {
	background: #101016;
}

.xy-eg-dialog :is(p, h2, h3, ol, ul, li) {
	margin: 0;
	padding: 0;
}

/* Theme heading colors are global; the viewer and share panel set their own ink. */
.xy-eg-dialog :is(h2, h3) {
	color: var(--xy-eg-ink);
}

.xy-eg-dialog .xy-eg-bar {
	display: flex;
	flex: none;
	align-items: center;
	gap: 16px;
	padding: 16px 24px;
	border-block-end: 1px solid var(--xy-eg-line);
}

.xy-eg-dialog .xy-eg-bar-title {
	flex: 1;
	min-inline-size: 0;
}

.xy-eg-dialog .xy-eg-title {
	overflow: hidden;
	color: var(--xy-eg-ink);
	font: 600 18px/1.2 var(--xy-eg-ui);
	letter-spacing: -0.02em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.xy-eg-dialog .xy-eg-title:focus {
	outline: 0;
}

.xy-eg-dialog .xy-eg-bar-meta {
	color: var(--xy-eg-ink-2);
	font: 400 13px/1.5 var(--xy-eg-body);
	font-variant-numeric: tabular-nums;
}

.xy-eg-dialog .xy-eg-search {
	display: flex;
	align-items: center;
	gap: 12px;
}

.xy-eg-dialog .xy-eg-search-box {
	display: flex;
	align-items: center;
	gap: 8px;
	inline-size: 300px;
	min-block-size: 40px;
	padding: 0 6px 0 12px;
	border: 1px solid var(--xy-eg-line);
	border-radius: 8px;
	background: var(--xy-eg-surface-2);
	color: var(--xy-eg-ink-3);
}

.xy-eg-dialog .xy-eg-search-box:focus-within {
	border-color: var(--xy-eg-action);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--xy-eg-action) 18%, transparent);
	color: var(--xy-eg-ink);
}

.xy-eg-dialog .xy-eg-search-box svg {
	inline-size: 18px;
	block-size: 18px;
}

.xy-eg-dialog .xy-eg-search-input {
	flex: 1;
	min-inline-size: 0;
	block-size: 38px;
	padding: 0;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: transparent;
	color: var(--xy-eg-ink);
	font: 500 15px/1 var(--xy-eg-mono);
}

.xy-eg-dialog .xy-eg-search-input::placeholder {
	color: var(--xy-eg-ink-3);
	font: 400 14px/1 var(--xy-eg-body);
	opacity: 1;
}

.xy-eg-dialog .xy-eg-search-cancel,
.xy-eg-dialog .xy-eg-search-open {
	display: none;
}

.xy-eg-dialog .xy-eg-toolbar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 24px;
}

.xy-eg-dialog .xy-eg-tabs,
.xy-eg-dialog .xy-eg-sort {
	display: inline-flex;
	flex: none;
	padding: 3px;
	border: 1px solid var(--xy-eg-line);
	border-radius: 999px;
	background: var(--xy-eg-surface-2);
}

.xy-eg-dialog .xy-eg-tab,
.xy-eg-dialog .xy-eg-sort-option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: 36px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--xy-eg-ink-2);
	font: 500 14px/1 var(--xy-eg-ui);
	white-space: nowrap;
	cursor: pointer;
}

.xy-eg-dialog .xy-eg-sort-option {
	min-block-size: 30px;
	padding: 0 12px;
	font-size: 13px;
}

.xy-eg-dialog .xy-eg-tab:hover,
.xy-eg-dialog .xy-eg-sort-option:hover {
	background: color-mix(in srgb, var(--xy-eg-ink) 6%, transparent);
	color: var(--xy-eg-ink);
}

.xy-eg-dialog .xy-eg-tab-count {
	color: var(--xy-eg-ink-3);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

.xy-eg-dialog .xy-eg-tab[aria-selected="true"],
.xy-eg-dialog .xy-eg-sort-option[aria-pressed="true"] {
	background: var(--xy-eg-on);
	color: var(--xy-eg-on-ink);
}

.xy-eg-dialog .xy-eg-tab[aria-selected="true"] .xy-eg-tab-count {
	color: var(--xy-eg-on-muted);
}

.xy-eg-dialog .xy-eg-tools {
	display: flex;
	align-items: center;
	gap: 16px;
}

.xy-eg-dialog .xy-eg-legend {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--xy-eg-ink-3);
	font: 400 13px/1.4 var(--xy-eg-body);
}

.xy-eg-dialog .xy-eg-density {
	display: inline-flex;
	padding: 3px;
	border: 1px solid var(--xy-eg-line);
	border-radius: 8px;
	background: var(--xy-eg-surface-2);
}

.xy-eg-dialog .xy-eg-density-option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 34px;
	block-size: 30px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--xy-eg-ink-3);
	cursor: pointer;
}

.xy-eg-dialog .xy-eg-density-option:hover {
	background: color-mix(in srgb, var(--xy-eg-ink) 6%, transparent);
	color: var(--xy-eg-ink);
}

.xy-eg-dialog .xy-eg-density-option[aria-pressed="true"] {
	background: color-mix(in srgb, var(--xy-eg-ink) 10%, transparent);
	color: var(--xy-eg-ink);
}

.xy-eg-dialog .xy-eg-density-option svg {
	inline-size: 16px;
	block-size: 16px;
	stroke-width: 1.6;
}

/* Continue from the furthest photo reached last time. */
.xy-eg-dialog .xy-eg-resume {
	display: flex;
	flex: none;
	align-items: center;
	gap: 12px;
	margin: 0 24px 6px;
	padding: 6px 6px 6px 14px;
	border: 1px solid color-mix(in srgb, var(--xy-eg-action) 30%, transparent);
	border-radius: 10px;
	background: color-mix(in srgb, var(--xy-eg-action) 8%, transparent);
}

.xy-eg-dialog .xy-eg-resume > svg {
	inline-size: 18px;
	block-size: 18px;
	color: var(--xy-eg-action);
	fill: currentcolor;
}

.xy-eg-dialog .xy-eg-resume-text {
	flex: 1;
	color: var(--xy-eg-ink-2);
	font: 400 13px/1.5 var(--xy-eg-body);
}

.xy-eg-dialog .xy-eg-resume-text strong {
	color: var(--xy-eg-ink);
	font-weight: 600;
}

.xy-eg-dialog .xy-eg-daybar {
	display: flex;
	flex: none;
	align-items: center;
	gap: 20px;
	padding: 0 24px 12px;
}

.xy-eg-dialog .xy-eg-daybar-title {
	flex: 1;
	min-inline-size: 0;
}

.xy-eg-dialog .xy-eg-daybar-title h3 {
	color: var(--xy-eg-ink);
	font: 600 18px/1.2 var(--xy-eg-ui);
	letter-spacing: -0.01em;
}

.xy-eg-dialog .xy-eg-daybar-meta {
	color: var(--xy-eg-ink-2);
	font: 400 13px/1.5 var(--xy-eg-body);
}

.xy-eg-dialog .xy-eg-daybar-nav {
	display: flex;
	align-items: center;
	gap: 8px;
}

.xy-eg-dialog .xy-eg-daybar-nav .xy-eg-ibtn-small {
	border-color: var(--xy-eg-line);
	background: color-mix(in srgb, var(--xy-eg-ink) 6%, transparent);
	color: var(--xy-eg-ink);
}

.xy-eg-dialog .xy-eg-daybar-close {
	display: none;
}

.xy-eg-dialog .xy-eg-main {
	position: relative;
	flex: 1;
	min-block-size: 0;
}

.xy-eg-dialog .xy-eg-scroll,
.xy-eg-dialog .xy-eg-timeline {
	position: absolute;
	inset: 0;
	overflow: hidden auto;
	overscroll-behavior: contain;
	outline: 0;
}

.xy-eg-dialog .xy-eg-canvas {
	position: relative;
	margin: 0 24px;
}

.xy-eg-dialog .has-rail .xy-eg-canvas {
	margin-inline-end: 116px;
}

/* Rows outside the screen are not in the page; each one sits at its reserved place. */
.xy-eg-dialog .xy-eg-row {
	position: absolute;
	inset-inline: 0;
	display: flex;
	gap: 6px;
}

.xy-eg-dialog .xy-eg-tile {
	position: relative;
	display: block;
	flex: none;
	overflow: hidden;
	block-size: 100%;
	border-radius: 4px;
	background: var(--xy-eg-surface-3);
}

.xy-eg-dialog .xy-eg-tile img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 0;
}

.xy-eg-dialog .xy-eg-tile img.is-failed,
.xy-eg-dialog .xy-eg-film-item img.is-failed {
	visibility: hidden;
}

.xy-eg-dialog .xy-eg-tile:focus-visible {
	outline-offset: -3px;
}

/* Tiles that are new to you carry a dot in the corner. */
.xy-eg-dialog :is(.xy-eg-tile, .xy-eg-film-item).is-new::after {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-end: 8px;
	inline-size: 10px;
	block-size: 10px;
	border-radius: 999px;
	background: var(--xy-eg-brand);
	box-shadow: 0 0 0 2px rgb(255 255 255 / 92%), 0 2px 8px rgb(0 0 0 / 50%);
	content: "";
}

/* Each album opens like a chapter: its name, then its photo-number range and count. */
.xy-eg-dialog .xy-eg-album {
	position: absolute;
	inset-inline: 0;
	display: flex;
	align-items: flex-end;
	padding-block-end: 6px;
}

.xy-eg-dialog .xy-eg-album-open {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	gap: 16px;
	block-size: 76px;
	border-block-start: 1px solid var(--xy-eg-line);
}

.xy-eg-dialog .xy-eg-album-open::before {
	position: absolute;
	inset-block-start: -1px;
	inset-inline-start: 0;
	inline-size: 64px;
	block-size: 2px;
	background: var(--xy-eg-brand);
	content: "";
}

.xy-eg-dialog .xy-eg-album-title {
	flex: none;
	background: var(--xy-eg-brand);
	background-clip: text;
	color: transparent;
	font: 600 32px/1.1 var(--xy-eg-ui);
	letter-spacing: -0.03em;
}

.xy-eg-dialog .xy-eg-album-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-inline-size: 0;
}

.xy-eg-dialog .xy-eg-album-range {
	overflow: hidden;
	color: var(--xy-eg-ink);
	font: 600 18px/1.15 var(--xy-eg-ui);
	letter-spacing: -0.01em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.xy-eg-dialog .xy-eg-prefix {
	font-family: var(--xy-eg-mono);
	font-weight: 500;
	letter-spacing: -0.02em;
}

.xy-eg-dialog .xy-eg-album-range .xy-eg-prefix {
	font-size: 16px;
}

.xy-eg-dialog .xy-eg-album-count {
	color: var(--xy-eg-ink-3);
	font: 400 13px/1.3 var(--xy-eg-body);
	font-variant-numeric: tabular-nums;
}

/* The current album, pinned above the grid, with steps and the Albums list. */
.xy-eg-dialog .xy-eg-albumbar {
	display: flex;
	flex: none;
	align-items: center;
	gap: 12px;
	block-size: 52px;
	margin: 0 132px 0 24px;
	border-block-end: 1px solid var(--xy-eg-line);
}

.xy-eg-dialog .xy-eg-album-no {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;
	border: 2px solid transparent;
	border-radius: 999px;
	background: linear-gradient(var(--xy-eg-surface), var(--xy-eg-surface)) padding-box, var(--xy-eg-brand) border-box;
	color: var(--xy-eg-ink);
	font: 700 13px/1 var(--xy-eg-ui);
	font-variant-numeric: tabular-nums;
}

.xy-eg-dialog .xy-eg-albumbar-text {
	display: flex;
	align-items: baseline;
	gap: 12px;
	min-inline-size: 0;
}

.xy-eg-dialog .xy-eg-albumbar-name {
	overflow: hidden;
	color: var(--xy-eg-ink);
	font: 600 16px/1.2 var(--xy-eg-ui);
	letter-spacing: -0.01em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.xy-eg-dialog .xy-eg-albumbar-name .xy-eg-prefix {
	font-size: 15px;
}

.xy-eg-dialog .xy-eg-albumbar-meta {
	color: var(--xy-eg-ink-3);
	font: 400 13px/1.2 var(--xy-eg-body);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.xy-eg-dialog .xy-eg-albumbar-of {
	margin-inline-start: auto;
	color: var(--xy-eg-ink-3);
	font: 500 13px/1 var(--xy-eg-ui);
	white-space: nowrap;
}

.xy-eg-dialog .xy-eg-albumbar-steps {
	display: flex;
	gap: 6px;
}

.xy-eg-dialog .xy-eg-albumbar-steps .xy-eg-ibtn-small {
	border-color: var(--xy-eg-line);
	background: color-mix(in srgb, var(--xy-eg-ink) 6%, transparent);
	color: var(--xy-eg-ink);
}

.xy-eg-dialog .xy-eg-albumbar-list svg {
	inline-size: 16px;
	block-size: 16px;
}

.xy-eg-dialog .xy-eg-albumbar-chip {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	block-size: 36px;
	padding: 0 10px 0 12px;
	border: 1px solid var(--xy-eg-line);
	border-radius: 999px;
	background: var(--xy-eg-surface-2);
	color: var(--xy-eg-ink);
	font: 600 13px/1 var(--xy-eg-ui);
	white-space: nowrap;
	cursor: pointer;
}

.xy-eg-dialog .xy-eg-albumbar-chip:hover {
	background: var(--xy-eg-surface-3);
	color: var(--xy-eg-ink);
}

.xy-eg-dialog .xy-eg-albumbar-chip svg {
	inline-size: 16px;
	block-size: 16px;
	stroke-width: 2;
}

/* The Albums list: each album's first photo, or a compact index when there are many. */
.xy-eg-dialog .xy-eg-albums {
	position: fixed;
	z-index: 6;
	display: flex;
	flex-direction: column;
	inline-size: 400px;

	/* The script sets the height left below the list's button; this is the fallback. */
	max-block-size: calc(100dvh - 32px);
	padding: 8px;
	border: 1px solid var(--xy-eg-line);
	border-radius: 12px;
	background: var(--xy-eg-surface-2);
	box-shadow: var(--xy-eg-shadow);
}

.xy-eg-dialog .xy-eg-albums-grab {
	display: none;
}

.xy-eg-dialog .xy-eg-albums-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 6px 10px 8px;
}

.xy-eg-dialog .xy-eg-albums-title {
	font: 600 14px/1.3 var(--xy-eg-ui);
}

.xy-eg-dialog .xy-eg-albums-total {
	color: var(--xy-eg-ink-3);
	font: 400 12px/1.3 var(--xy-eg-body);
	font-variant-numeric: tabular-nums;
}

.xy-eg-dialog .xy-eg-albums-list {
	min-block-size: 0;
	overflow: hidden auto;
	overscroll-behavior: contain;
	list-style: none;
}

.xy-eg-dialog .xy-eg-albums-row {
	position: relative;
	-webkit-touch-callout: none;
	touch-action: manipulation;
	user-select: none;
	display: flex;
	align-items: center;
	gap: 12px;
	inline-size: 100%;
	padding: 8px 10px 8px 8px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--xy-eg-ink);
	text-align: start;
	cursor: pointer;
}

.xy-eg-dialog .xy-eg-albums-row:hover,
.xy-eg-dialog .xy-eg-albums-row.is-current {
	background: color-mix(in srgb, var(--xy-eg-ink) 7%, transparent);
	color: var(--xy-eg-ink);
}

.xy-eg-dialog .xy-eg-albums-row.is-current::before {
	position: absolute;
	inset-block: 10px;
	inset-inline-start: 0;
	inline-size: 3px;
	border-radius: 2px;
	background: var(--xy-eg-brand);
	content: "";
}

.xy-eg-dialog .xy-eg-albums-row:focus-visible {
	outline-offset: -2px;
}

.xy-eg-dialog .xy-eg-albums-thumb {
	flex: none;
	overflow: hidden;
	inline-size: 72px;
	block-size: 48px;
	border-radius: 6px;
	background: var(--xy-eg-surface-3);
}

.xy-eg-dialog .xy-eg-albums-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 3px;
	min-inline-size: 0;
}

.xy-eg-dialog .xy-eg-albums-name {
	font: 600 14px/1.2 var(--xy-eg-ui);
}

.xy-eg-dialog .xy-eg-albums-range {
	overflow: hidden;
	color: var(--xy-eg-ink-2);
	font: 400 12px/1.2 var(--xy-eg-body);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.xy-eg-dialog .xy-eg-albums-range .xy-eg-prefix {
	font-size: 11.5px;
}

.xy-eg-dialog .xy-eg-albums-count {
	color: var(--xy-eg-ink-3);
	font: 400 12px/1.2 var(--xy-eg-body);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.xy-eg-dialog .xy-eg-albums-row .xy-eg-album-no {
	inline-size: 24px;
	block-size: 24px;
	font-size: 12px;
}

.xy-eg-dialog .is-compact .xy-eg-albums-row {
	padding-block: 5px;
}

.xy-eg-dialog .is-compact .xy-eg-albums-text {
	flex-direction: row;
	align-items: baseline;
	gap: 8px;
}

.xy-eg-dialog .xy-eg-albums-scrim {
	position: fixed;
	inset: 0;
	z-index: 5;
	background: rgb(7 7 10 / 62%);
}

.xy-eg-dialog .xy-eg-albums.is-sheet {
	position: fixed;
	inset: auto 0 0;
	inline-size: auto;
	max-block-size: 80dvh;
	padding: 10px 8px 24px;
	border-width: 1px 0 0;
	border-radius: 16px 16px 0 0;
}

.xy-eg-dialog .is-sheet .xy-eg-albums-grab {
	display: block;
	inline-size: 36px;
	block-size: 4px;
	margin: 0 auto 10px;
	border-radius: 2px;
	background: color-mix(in srgb, var(--xy-eg-ink) 24%, transparent);
}

.xy-eg-dialog .is-sheet .xy-eg-albums-title {
	font-size: 16px;
}

.xy-eg-dialog .xy-eg-stop {
	position: absolute;
	inset-inline: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--xy-eg-mark);
	font: 500 13px/1 var(--xy-eg-ui);
	white-space: nowrap;
}

.xy-eg-dialog .xy-eg-stop span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.xy-eg-dialog .xy-eg-stop::after {
	flex: 1;
	block-size: 1px;
	background: color-mix(in srgb, var(--xy-eg-mark) 50%, transparent);
	content: "";
}

.xy-eg-dialog .xy-eg-stop svg {
	inline-size: 14px;
	block-size: 14px;
	fill: currentcolor;
}

.xy-eg-dialog .xy-eg-end {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 0 24px;
	padding: 32px 0 48px;
	text-align: center;
}

.xy-eg-dialog .has-rail .xy-eg-end {
	margin-inline-end: 116px;
}

/* Album markers sit left of the map, so the grid gives them room. */
.xy-eg-dialog.has-albums .has-rail :is(.xy-eg-canvas, .xy-eg-end) {
	margin-inline-end: 140px;
}

.xy-eg-dialog .xy-eg-end .xy-eg-rule {
	inline-size: 48px;
}

.xy-eg-dialog .xy-eg-end strong {
	font: 600 17px/1.3 var(--xy-eg-ui);
}

.xy-eg-dialog .xy-eg-end .xy-photo-notification {
	inline-size: min(100%, 560px);
	margin: 0;
	padding: 12px 12px 12px 16px;
	border-radius: 12px;
	text-align: start;
}

/* At the end of the gallery the signup is one compact block; the line above names it. */
.xy-eg-dialog .xy-eg-end .xy-photo-notification::before,
.xy-eg-dialog .xy-eg-end .xy-photo-notification-signup .xy-photo-notification-mark {
	display: none;
}

.xy-eg-dialog .xy-eg-end .xy-photo-notification-signup {
	gap: 8px;
}

.xy-eg-dialog .xy-eg-end .xy-photo-notification-signup .xy-photo-notification-heading {
	display: block;
}

.xy-eg-dialog .xy-eg-end .xy-photo-notification-signup :is(.xy-photo-notification-title, .xy-photo-notification-label) {
	position: absolute;
	overflow: hidden;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

.xy-eg-dialog .xy-eg-end .xy-photo-notification .xy-photo-notification-description {
	margin: 0;
	font-size: 13px;
}

.xy-eg-dialog .xy-eg-end .xy-photo-notification :is(.xy-photo-notification-form, .xy-photo-notification-terms) {
	padding-inline-start: 0;
}

.xy-eg-dialog .xy-eg-end .xy-photo-notification .xy-photo-notification-terms {
	font-size: 11px;
}

.xy-eg-dialog .xy-eg-end .xy-photo-notification-form .xy-photo-notification-fields {
	flex-wrap: nowrap;
}

.xy-eg-dialog .xy-eg-end .xy-photo-notification :is(.xy-photo-notification-input, .xy-photo-notification-button) {
	min-block-size: 44px;
	font-size: 14px;
}

.xy-eg-dialog .xy-eg-status {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 24px;
	background: var(--xy-eg-surface);
}

.xy-eg-dialog .xy-eg-status-text {
	color: var(--xy-eg-ink-2);
	font: 400 15px/1.5 var(--xy-eg-body);
}

/* Placeholder tiles while the photo list loads. */
.xy-eg-dialog .xy-eg-skeleton {
	position: absolute;
	inset: 0 24px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	grid-auto-rows: 196px;
	gap: 6px;
	overflow: hidden;
}

.xy-eg-dialog .xy-eg-skeleton span {
	border-radius: 4px;
	background: linear-gradient(110deg, var(--xy-eg-surface-3) 30%, var(--xy-eg-surface-2) 50%, var(--xy-eg-surface-3) 70%) 0 0 / 300% 100%;
	animation: xy-eg-shimmer 1.6s linear infinite;
}

@keyframes xy-eg-shimmer {
	to {
		background-position: -300% 0;
	}
}

/* ----- The map: a column of previews, each an equal share of the photos ----- */

/* The map is the gallery's scroll control, so the browser's own scrollbar steps aside.
 * The wheel, trackpad and keys still scroll the grid. */
.xy-eg-dialog .has-rail .xy-eg-scroll {
	scrollbar-width: none;
}

.xy-eg-dialog .has-rail .xy-eg-scroll::-webkit-scrollbar {
	display: none;
}

.xy-eg-dialog .xy-eg-rail {
	position: absolute;
	inset-block: 8px 16px;
	inset-inline-end: 20px;
	z-index: 2;
	inline-size: 60px;
	outline: 0;
	cursor: grab;
	touch-action: none;
	user-select: none;
}

.xy-eg-dialog .xy-eg-rail.is-dragging {
	cursor: grabbing;
}

.xy-eg-dialog .xy-eg-rail-blocks {
	position: absolute;
	inset: 0;
}

/* One block per album, sized by its photo count. */
.xy-eg-dialog .xy-eg-rail-block {
	position: absolute;
	inset-inline: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Previews stay quiet so the column doesn't compete with the photos; the ones under the
 * frame light up, so the frame reads as a lens over the gallery. */
.xy-eg-dialog .xy-eg-rail-thumb {
	flex: 1 1 0;
	min-block-size: 0;
	overflow: hidden;
	border-radius: 3px;
	background: var(--xy-eg-surface-3);
	opacity: 0.3;
	transition: opacity 0.15s ease;
}

.xy-eg-dialog .has-albums .is-current .xy-eg-rail-thumb {
	opacity: 0.55;
}

.xy-eg-dialog .xy-eg-rail:hover .xy-eg-rail-thumb,
.xy-eg-dialog .xy-eg-rail.is-dragging .xy-eg-rail-thumb {
	opacity: 0.6;
}

.xy-eg-dialog .xy-eg-rail .xy-eg-rail-thumb.is-in {
	opacity: 1;
}

/* Numbered markers match the album openers; the current one fills with the brand gradient.
 * They sit clear of the frame's grip. */
.xy-eg-dialog .xy-eg-rail-marker {
	position: absolute;
	inset-block-start: -3px;
	inset-inline-end: calc(100% + 14px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 20px;
	block-size: 20px;
	border: 1.5px solid color-mix(in srgb, var(--xy-eg-ink) 28%, transparent);
	border-radius: 999px;
	background: var(--xy-eg-surface);
	color: var(--xy-eg-ink-2);
	font: 700 10px/1 var(--xy-eg-ui);
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.xy-eg-dialog .xy-eg-rail-marker:hover {
	border-color: var(--xy-eg-action);
	color: var(--xy-eg-ink);
}

.xy-eg-dialog .is-dense .xy-eg-rail-marker {
	inset-block-start: -1px;
	inline-size: 16px;
	block-size: 16px;
	border-width: 1px;
	font-size: 9px;
}

.xy-eg-dialog .is-current .xy-eg-rail-marker {
	z-index: 2;
	border: 0;
	background: var(--xy-eg-brand);
	box-shadow: 0 0 0 3px rgb(228 6 102 / 18%);
	color: #fff;
}

/* A crowded map keeps a dot at the start of every album; hovering a dot shows its number. */
.xy-eg-dialog .is-crowded .xy-eg-rail-block:not(.is-current) .xy-eg-rail-marker {
	inset-block-start: 0;
	inset-inline-end: calc(100% + 18px);
	inline-size: 8px;
	block-size: 8px;
	border-width: 1px;
	font-size: 0;
}

.xy-eg-dialog .is-crowded .xy-eg-rail-block:not(.is-current) .xy-eg-rail-marker:hover {
	z-index: 1;
	inset-block-start: -4px;
	inset-inline-end: calc(100% + 14px);
	inline-size: 16px;
	block-size: 16px;
	font-size: 9px;
}

.xy-eg-dialog .xy-eg-rail-thumb img,
.xy-eg-dialog .xy-eg-bubble-thumb img,
.xy-eg-dialog .xy-eg-result-thumb img,
.xy-eg-dialog .xy-eg-tl-thumb img,
.xy-eg-dialog .xy-eg-v-card-thumb img,
.xy-eg-dialog .xy-eg-share-thumb img,
.xy-eg-dialog .xy-eg-film-item img,
.xy-eg-dialog .xy-eg-albums-thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 0;
}

.xy-eg-dialog .xy-eg-rail-new {
	position: absolute;
	inset-inline-end: -8px;
	inline-size: 4px;
	border-radius: 2px;
	background: linear-gradient(#e40666, #3c3fde);
}

/* The frame over the photos on screen is the handle. */
.xy-eg-dialog .xy-eg-rail-view {
	position: absolute;
	inset-inline: -4px;
	z-index: 1;
	box-sizing: border-box;
	border: 2px solid var(--xy-eg-ink);
	border-radius: 6px;
	box-shadow: 0 0 0 1px var(--xy-eg-surface), 0 8px 20px rgb(0 0 0 / 35%);
	pointer-events: none;
}

.xy-eg-dialog .xy-eg-rail-grip {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: -8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	inline-size: 14px;
	block-size: 22px;
	border-radius: 7px;
	background: var(--xy-eg-ink);
	box-shadow: 0 0 0 1px var(--xy-eg-surface), 0 2px 6px rgb(0 0 0 / 35%);
	transform: translateY(-50%);

	/* The grip sits partly outside the map, so it takes presses itself; they reach the map's
	 * drag handling through the frame. */
	pointer-events: auto;
}

/* A larger target than the drawn grip. */
.xy-eg-dialog .xy-eg-rail-grip::before {
	position: absolute;
	inset: -6px -8px;
	content: "";
}

.xy-eg-dialog .xy-eg-rail-grip-line {
	inline-size: 6px;
	block-size: 1.5px;
	border-radius: 1px;
	background: var(--xy-eg-surface);
}

.xy-eg-dialog .xy-eg-rail.is-dragging .xy-eg-rail-view {
	border-color: var(--xy-eg-action);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--xy-eg-action) 22%, transparent), 0 8px 20px rgb(0 0 0 / 35%);
}

.xy-eg-dialog .xy-eg-rail.is-dragging .xy-eg-rail-grip {
	background: var(--xy-eg-action);
}

.xy-eg-dialog .xy-eg-rail:focus-visible .xy-eg-rail-view {
	outline: 2px solid color-mix(in srgb, var(--xy-eg-action) 75%, transparent);
	outline-offset: 3px;
}

/* Follows the pointer over the map, before any press. */
.xy-eg-dialog .xy-eg-rail-line {
	position: absolute;
	inset-inline: -12px -4px;
	z-index: 2;
	block-size: 2px;
	border-radius: 1px;
	background: var(--xy-eg-ink);
	box-shadow: 0 0 0 1px var(--xy-eg-surface);
	transform: translateY(-50%);
	pointer-events: none;
}

.xy-eg-dialog .xy-eg-rail-end {
	position: absolute;
	inset-inline-end: calc(100% + 16px);
	color: var(--xy-eg-ink-3);
	font: 500 10px/1 var(--xy-eg-mono);
	font-variant-numeric: tabular-nums;
}

.xy-eg-dialog .xy-eg-rail-end.is-start {
	inset-block-start: 0;
}

.xy-eg-dialog .xy-eg-rail-end.is-end {
	inset-block-end: 0;
}

.xy-eg-dialog .xy-eg-rail-mark {
	position: absolute;
	inset-inline-start: -28px;
	inline-size: 14px;
	block-size: 14px;
	color: var(--xy-eg-action);
	transform: translateY(-50%);
}

.xy-eg-dialog .has-albums .xy-eg-rail-mark {
	inset-inline-start: -52px;
}

.xy-eg-dialog .xy-eg-rail-mark svg {
	inline-size: 14px;
	block-size: 14px;
	fill: currentcolor;
}

/* The first time a long gallery opens on a device, the frame nudges down and back. */
@media (prefers-reduced-motion: no-preference) {
	.xy-eg-dialog .xy-eg-rail.is-nudging .xy-eg-rail-view {
		animation: xy-eg-nudge 1.6s ease-in-out 0.6s 2;
	}
}

@keyframes xy-eg-nudge {
	0%,
	60%,
	100% {
		transform: none;
	}

	30% {
		transform: translateY(32px);
	}
}

.xy-eg-dialog .xy-eg-rail-hint {
	--xy-eg-hint-arrow: 22px;

	position: absolute;
	inset-inline-end: 102px;
	z-index: 4;
	inline-size: 210px;
	padding: 12px 14px;
	box-sizing: border-box;
	border-radius: 12px;
	background: var(--xy-eg-pop);
	box-shadow: 0 12px 28px rgb(0 0 0 / 40%);
	color: var(--xy-eg-pop-ink);
}

.xy-eg-dialog.has-albums .xy-eg-rail-hint {
	inset-inline-end: 136px;
}

.xy-eg-dialog .xy-eg-rail-hint::after {
	position: absolute;
	inset-block-start: var(--xy-eg-hint-arrow);
	inset-inline-end: -5px;
	inline-size: 10px;
	block-size: 10px;
	background: var(--xy-eg-pop);
	transform: translateY(-50%) rotate(45deg);
	content: "";
}

.xy-eg-dialog .xy-eg-rail-hint-text {
	margin: 0;
	font: 600 14px/1.35 var(--xy-eg-ui);
}

.xy-eg-dialog .xy-eg-rail-hint-ok {
	display: inline-flex;
	align-items: center;
	min-block-size: 32px;
	margin-block-start: 10px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: var(--xy-eg-pop-ink);
	color: var(--xy-eg-pop);
	font: 600 13px/1 var(--xy-eg-ui);
	cursor: pointer;
}

.xy-eg-dialog .xy-eg-rail-hint-ok:focus-visible {
	outline: 2px solid var(--xy-eg-action);
	outline-offset: 2px;
}

.xy-eg-dialog .xy-eg-bubble {
	position: absolute;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 14px 8px 8px;
	border-radius: 12px;
	background: var(--xy-eg-pop);
	box-shadow: 0 8px 24px rgb(0 0 0 / 45%);
	color: var(--xy-eg-pop-ink);
	transform: translateY(-50%);
	white-space: nowrap;
	pointer-events: none;
}

.xy-eg-dialog .xy-eg-rail .xy-eg-bubble {
	inset-inline-end: calc(100% + 26px);
}

/* Album markers sit between the map and its preview. */
.xy-eg-dialog .has-albums > .xy-eg-bubble {
	inset-inline-end: calc(100% + 40px);
}

.xy-eg-dialog .xy-eg-bubble-thumb {
	flex: none;
	overflow: hidden;
	inline-size: 96px;
	block-size: 64px;
	border-radius: 6px;
	background: var(--xy-eg-surface-3);
}

.xy-eg-dialog .xy-eg-bubble-text strong {
	display: block;
	font: 600 15px/1.2 var(--xy-eg-mono);
}

.xy-eg-dialog .xy-eg-bubble-text small {
	display: block;
	margin-block-start: 4px;
	color: var(--xy-eg-pop-muted);
	font: 400 12px/1 var(--xy-eg-body);
}

/* The phone map: a slim handle on the right edge that grows while dragged. */
.xy-eg-dialog .xy-eg-handle {
	position: absolute;
	inset-inline-end: 0;
	z-index: 4;
	inline-size: 30px;
	block-size: 48px;
	transform: translateY(-50%);
	touch-action: none;
}

.xy-eg-dialog .xy-eg-handle::after {
	position: absolute;
	inset-block-start: 4px;
	inset-inline-end: 3px;
	inline-size: 5px;
	block-size: 40px;
	border-radius: 3px;
	background: color-mix(in srgb, var(--xy-eg-ink) 45%, transparent);
	content: "";
}

.xy-eg-dialog .xy-eg-handle.is-dragging::after {
	inset: 0;
	inline-size: auto;
	block-size: auto;
	border-radius: 24px 0 0 24px;
	background: var(--xy-eg-pop);
}

.xy-eg-dialog .xy-eg-scrub {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.xy-eg-dialog .xy-eg-scrub-shade {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: 160px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--xy-eg-surface) 92%, transparent));
}

.xy-eg-dialog .xy-eg-ticks em {
	position: absolute;
	inset-inline-end: 40px;
	color: var(--xy-eg-ink-2);
	font: 500 12px/1 var(--xy-eg-ui);
	font-style: normal;
	transform: translateY(-50%);
}

.xy-eg-dialog .xy-eg-scrub .xy-eg-bubble {
	inset-inline-end: 104px;
}

.xy-eg-dialog .xy-eg-scrub .xy-eg-bubble-thumb {
	inline-size: 72px;
	block-size: 48px;
}

.xy-eg-dialog .xy-eg-pill,
.xy-eg-dialog .xy-eg-daypill {
	position: absolute;
	inset-block-end: 28px;
	inset-inline-start: 50%;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-block-size: 44px;
	border-radius: 999px;
	font: 600 14px/1 var(--xy-eg-ui);
	transform: translateX(-50%);
	white-space: nowrap;
}

.xy-eg-dialog .xy-eg-pill {
	padding: 0 6px 0 0;
	background: var(--xy-eg-pop);
	box-shadow: 0 12px 28px rgb(0 0 0 / 35%);
	color: var(--xy-eg-pop-ink);
}

.xy-eg-dialog .xy-eg-pill-go,
.xy-eg-dialog .xy-eg-pill-close,
.xy-eg-dialog .xy-eg-daypill-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.xy-eg-dialog .xy-eg-pill-go {
	min-block-size: 44px;
	padding: 0 4px 0 16px;
}

.xy-eg-dialog .xy-eg-pill svg {
	inline-size: 18px;
	block-size: 18px;
	stroke-width: 2;
}

.xy-eg-dialog .xy-eg-pill-close {
	inline-size: 32px;
	block-size: 32px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--xy-eg-pop-ink) 8%, transparent);
}

.xy-eg-dialog .xy-eg-pill-close svg {
	inline-size: 14px;
	block-size: 14px;
}

.xy-eg-dialog .xy-eg-daypill {
	inset-block-end: 24px;
	gap: 6px;
	padding: 0 4px;
	border: 1px solid var(--xy-eg-line);
	background: color-mix(in srgb, var(--xy-eg-surface-2) 92%, transparent);
	backdrop-filter: blur(12px);
	color: var(--xy-eg-ink);
}

.xy-eg-dialog .xy-eg-daypill-step {
	inline-size: 36px;
	block-size: 36px;
	border-radius: 999px;
}

.xy-eg-dialog .xy-eg-pill-go:hover,
.xy-eg-dialog .xy-eg-pill-close:hover,
.xy-eg-dialog .xy-eg-daypill-step:hover {
	background: none;
	color: inherit;
}

/* ----- Search ----- */

.xy-eg-dialog .xy-eg-dim {
	position: absolute;
	inset: 77px 0 0;
	z-index: 4;
	background: rgb(7 7 10 / 60%);
}

.xy-eg-dialog .xy-eg-results {
	position: absolute;
	inset-block-start: 72px;
	inset-inline-end: 84px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	inline-size: 420px;
	max-block-size: calc(100% - 96px);
	padding: 8px;
	border: 1px solid var(--xy-eg-line);
	border-radius: 12px;
	background: var(--xy-eg-surface-2);
	box-shadow: var(--xy-eg-shadow);
}

.xy-eg-dialog .xy-eg-results-head {
	padding: 8px 10px 6px;
	color: var(--xy-eg-ink-3);
	font: 600 11px/1.3 var(--xy-eg-ui);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.xy-eg-dialog .xy-eg-results-head:empty {
	display: none;
}

.xy-eg-dialog .xy-eg-results-list {
	overflow: hidden auto;
	list-style: none;
}

.xy-eg-dialog .xy-eg-result {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 8px;
	cursor: pointer;
}

.xy-eg-dialog .xy-eg-result:hover,
.xy-eg-dialog .xy-eg-result.is-active {
	background: color-mix(in srgb, var(--xy-eg-ink) 6%, transparent);
}

.xy-eg-dialog .xy-eg-result .xy-eg-kbd {
	visibility: hidden;
}

.xy-eg-dialog .xy-eg-result.is-active .xy-eg-kbd {
	visibility: visible;
}

.xy-eg-dialog .xy-eg-result-thumb {
	flex: none;
	overflow: hidden;
	inline-size: 56px;
	block-size: 44px;
	border-radius: 6px;
	background: var(--xy-eg-surface-3);
}

.xy-eg-dialog .xy-eg-result-text {
	flex: 1;
	min-inline-size: 0;
}

.xy-eg-dialog .xy-eg-result-name {
	display: block;
	color: var(--xy-eg-ink-3);
	font: 400 15px/1.3 var(--xy-eg-mono);
}

.xy-eg-dialog .xy-eg-result-name b {
	color: var(--xy-eg-ink);
	font-weight: 600;
}

.xy-eg-dialog .xy-eg-result-meta {
	display: block;
	margin-block-start: 2px;
	color: var(--xy-eg-ink-3);
	font: 400 12px/1.4 var(--xy-eg-body);
}

.xy-eg-dialog .xy-eg-results-foot {
	margin: 6px 0 0;
	padding: 10px 10px 4px;
	border-block-start: 1px solid var(--xy-eg-line);
	color: var(--xy-eg-ink-3);
	font: 400 12px/1.5 var(--xy-eg-body);
}

/* ----- Timeline: one entry per upload day on a vertical line ----- */

.xy-eg-dialog .xy-eg-tl {
	padding: 8px 24px 32px;
	list-style: none;
}

.xy-eg-dialog .xy-eg-tl-day,
.xy-eg-dialog .xy-eg-tl-last {
	position: relative;
}

.xy-eg-dialog .xy-eg-tl-day {
	padding-block-end: 12px;
}

.xy-eg-dialog .xy-eg-tl-link,
.xy-eg-dialog .xy-eg-tl-last {
	display: grid;
	grid-template-columns: 140px 24px minmax(0, 1fr);
	column-gap: 16px;
}

/* Each day is one link. Its band reaches past the columns, so the date and line stay where they were. */
.xy-eg-dialog .xy-eg-tl-link {
	margin-inline: -12px;
	padding: 10px 12px;
	border-radius: 14px;
	color: var(--xy-eg-ink);
	text-decoration: none;
	transition: background-color 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.xy-eg-dialog .xy-eg-tl-link:is(:hover, :active) {
	background: var(--xy-eg-surface-2);
	color: var(--xy-eg-ink);
}

.xy-eg-dialog .xy-eg-tl-last {
	align-items: center;
	padding-block-end: 22px;
}

.xy-eg-dialog .xy-eg-tl-day::before,
.xy-eg-dialog .xy-eg-tl-last::before {
	position: absolute;
	inset-block: 8px -8px;
	inset-inline-start: 167px;
	inline-size: 2px;
	background: var(--xy-eg-line);
	content: "";
}

.xy-eg-dialog .xy-eg-tl-day.is-new::before {
	background: linear-gradient(#e40666, #3c3fde);
}

.xy-eg-dialog .xy-eg-tl > :last-child::before {
	display: none;
}

.xy-eg-dialog .xy-eg-tl-date {
	text-align: end;
}

.xy-eg-dialog .xy-eg-tl-date strong {
	display: block;
	font: 600 16px/1.3 var(--xy-eg-ui);
	transition: color 0.15s ease;
}

.xy-eg-dialog .xy-eg-tl-link:hover .xy-eg-tl-date strong {
	color: var(--xy-eg-mark);
}

.xy-eg-dialog .xy-eg-tl-date small {
	display: block;
	color: var(--xy-eg-ink-3);
	font: 400 13px/1.4 var(--xy-eg-body);
}

.xy-eg-dialog .xy-eg-tl-node {
	position: relative;
	z-index: 1;
	display: block;
	inline-size: 14px;
	block-size: 14px;
	margin: 4px auto 0;
	border: 2px solid color-mix(in srgb, var(--xy-eg-ink) 22%, transparent);
	border-radius: 999px;
	background: var(--xy-eg-surface-3);
}

.xy-eg-dialog .is-new .xy-eg-tl-node {
	border-color: transparent;
	background: var(--xy-eg-brand);
	box-shadow: 0 0 0 4px rgb(228 6 102 / 15%);
}

.xy-eg-dialog .xy-eg-tl-last .xy-eg-tl-node {
	inline-size: 10px;
	block-size: 10px;
	margin: 0 auto;
	border: 0;
	border-radius: 2px;
	background: var(--xy-eg-action);
	transform: rotate(45deg);
}

.xy-eg-dialog .xy-eg-tl-last p {
	color: var(--xy-eg-mark);
	font: 500 13px/1.3 var(--xy-eg-ui);
}

.xy-eg-dialog .xy-eg-tl-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block-end: 10px;
}

.xy-eg-dialog .xy-eg-tl-count {
	font: 600 16px/1.3 var(--xy-eg-ui);
	font-variant-numeric: tabular-nums;
}

.xy-eg-dialog .xy-eg-tl-count small {
	margin-inline-start: 4px;
	color: var(--xy-eg-ink-3);
	font: 400 13px/1.3 var(--xy-eg-body);
}

.xy-eg-dialog .xy-eg-tl-meta {
	color: var(--xy-eg-ink-2);
	font: 400 13px/1.5 var(--xy-eg-body);
	font-variant-numeric: tabular-nums;
}

.xy-eg-dialog .xy-eg-tl-body {
	max-inline-size: 960px;
}

/* The previews join into one strip that fades out where the day continues. */
.xy-eg-dialog .xy-eg-tl-strip {
	display: flex;
	gap: 2px;
	overflow: hidden;
	block-size: 128px;
	border-radius: 8px;
	mask-image: linear-gradient(90deg, #000 72%, transparent);
}

.xy-eg-dialog .xy-eg-tl-thumb {
	display: block;
	flex: 1 1 0;
	min-inline-size: 0;
	overflow: hidden;
	background: var(--xy-eg-surface-3);
}

.xy-eg-dialog .xy-eg-tl-thumb img {
	transition: transform 0.3s ease;
}

.xy-eg-dialog .xy-eg-tl-link:hover .xy-eg-tl-thumb img {
	transform: scale(1.04);
}

.xy-eg-dialog .xy-eg-tl-all {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 4px;
	margin-inline-start: auto;
	color: var(--xy-eg-action);
	font: 500 14px/1.3 var(--xy-eg-ui);
	white-space: nowrap;
}

.xy-eg-dialog .xy-eg-tl-all svg {
	inline-size: 16px;
	block-size: 16px;
	transition: transform 0.2s ease;
}

/* :where() keeps the hover below the phone size rule's specificity. */
.xy-eg-dialog :where(.xy-eg-tl-link:hover) .xy-eg-tl-all {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.xy-eg-dialog :where(.xy-eg-tl-link:hover) .xy-eg-tl-all svg {
	transform: translateX(3px);
}

/* ----- Single photo ----- */

.xy-eg-dialog .xy-eg-viewer {
	position: fixed;
	inset: 0;
	z-index: 10;
	background: #07070a;
	color: var(--xy-eg-ink);
}

.xy-eg-dialog .xy-eg-v-top {
	position: absolute;
	inset: 0 0 auto;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 24px;
}

.xy-eg-dialog .xy-eg-v-heading {
	flex: 1;
	min-inline-size: 0;
}

.xy-eg-dialog .xy-eg-v-title {
	overflow: hidden;
	color: var(--xy-eg-ink);
	font: 500 14px/1.3 var(--xy-eg-ui);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.xy-eg-dialog .xy-eg-v-position {
	color: var(--xy-eg-ink-3);
	font: 400 13px/1.4 var(--xy-eg-ui);
	font-variant-numeric: tabular-nums;
}

.xy-eg-dialog .xy-eg-v-stage {
	position: absolute;
	inset: 76px 96px 156px;
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: pan-y pinch-zoom;
}

.xy-eg-dialog .xy-eg-v-image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	user-select: none;
}

/* The photo number stays visible in every viewer state, so screenshots include it. */
.xy-eg-dialog .xy-eg-v-number {
	position: absolute;
	inset-block-end: 128px;
	inset-inline-start: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border: 0;
	border-radius: 4px;
	background: none;
	color: var(--xy-eg-ink-3);
	font: 400 12px/1 var(--xy-eg-mono);
	letter-spacing: 0.02em;
	transform: translateX(-50%);
	white-space: nowrap;
	cursor: copy;
}

.xy-eg-dialog .xy-eg-v-number:hover {
	background: rgb(255 255 255 / 6%);
	color: var(--xy-eg-ink-2);
}

.xy-eg-dialog .xy-eg-v-number svg {
	inline-size: 13px;
	block-size: 13px;
	opacity: 0.7;
}

.xy-eg-dialog .xy-eg-v-number.is-copied svg {
	color: var(--xy-eg-ok);
	opacity: 1;
}

.xy-eg-dialog .xy-eg-v-previous,
.xy-eg-dialog .xy-eg-v-next {
	position: absolute;
	inset-block-start: 50%;
	z-index: 2;
	transform: translateY(-50%);
}

.xy-eg-dialog .xy-eg-v-previous {
	inset-inline-start: 24px;
}

.xy-eg-dialog .xy-eg-v-next {
	inset-inline-end: 24px;
}

.xy-eg-dialog .xy-eg-film {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 20px 24px 24px;
}

.xy-eg-dialog .xy-eg-film-item {
	position: relative;
	flex: none;
	overflow: hidden;
	inline-size: 52px;
	block-size: 72px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: var(--xy-eg-surface-3);
	opacity: 0.45;
	cursor: pointer;
}

.xy-eg-dialog .xy-eg-film-item:hover {
	background: var(--xy-eg-surface-3);
	opacity: 0.8;
}

.xy-eg-dialog .xy-eg-film-item.is-wide {
	inline-size: 108px;
}

.xy-eg-dialog .xy-eg-film-item.is-current {
	outline: 2px solid #fff;
	outline-offset: 2px;
	opacity: 1;
}

.xy-eg-dialog .xy-eg-film-item.is-new::after {
	inset-block-start: 5px;
	inset-inline-end: 5px;
	inline-size: 7px;
	block-size: 7px;
	box-shadow: 0 0 0 1.5px rgb(255 255 255 / 92%);
}

.xy-eg-dialog .xy-eg-v-actions,
.xy-eg-dialog .xy-eg-v-bottom-only {
	display: none;
}

.xy-eg-dialog .xy-eg-v-hint {
	position: absolute;
	inset: auto 0 18px;
	color: var(--xy-eg-ink-3);
	font: 400 12px/1.4 var(--xy-eg-body);
	text-align: center;
}

.xy-eg-dialog .xy-eg-v-hint:empty {
	display: none;
}

/* The slide after a Timeline day's last photo introduces the next day. */
.xy-eg-dialog .xy-eg-v-card {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	inline-size: min(520px, calc(100% - 32px));
	text-align: center;
	transform: translate(-50%, -50%);
}

.xy-eg-dialog .xy-eg-v-card-eyebrow {
	color: var(--xy-eg-ink-3);
	font: 500 13px/1.4 var(--xy-eg-ui);
}

.xy-eg-dialog .xy-eg-v-card-strip {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	inline-size: 100%;
	block-size: 160px;
	margin: 4px 0;
}

.xy-eg-dialog .xy-eg-v-card-thumb {
	overflow: hidden;
	border-radius: 8px;
	background: var(--xy-eg-surface-3);
}

.xy-eg-dialog .xy-eg-v-card-title {
	font: 600 24px/1.2 var(--xy-eg-ui);
	letter-spacing: -0.02em;
}

.xy-eg-dialog .xy-eg-v-card-meta {
	color: var(--xy-eg-ink-2);
	font: 400 13px/1.5 var(--xy-eg-body);
}

.xy-eg-dialog .xy-eg-v-card-actions {
	display: flex;
	gap: 10px;
	margin-block-start: 6px;
}

/* ----- Sharing a day or a photo ----- */

.xy-eg-dialog .xy-eg-share {
	position: fixed;
	z-index: 21;
	inline-size: min(360px, calc(100% - 32px));
	padding: 16px;
	border: 1px solid var(--xy-eg-line);
	border-radius: 12px;
	background: var(--xy-eg-surface-2);
	box-shadow: var(--xy-eg-shadow);
	color: var(--xy-eg-ink);
}

.xy-eg-dialog .xy-eg-share-scrim {
	position: fixed;
	inset: 0;
	z-index: 20;
	background: rgb(7 7 10 / 60%);
}

.xy-eg-dialog .xy-eg-share-title {
	margin: 0 0 4px;
	font: 600 16px/1.3 var(--xy-eg-ui);
}

.xy-eg-dialog .xy-eg-share-note {
	color: var(--xy-eg-ink-2);
	font: 400 13px/1.5 var(--xy-eg-body);
}

.xy-eg-dialog .xy-eg-share-grab,
.xy-eg-dialog .xy-eg-share-card,
.xy-eg-dialog .xy-eg-share-copy-wide {
	display: none;
}

.xy-eg-dialog .xy-eg-share-link {
	display: flex;
	gap: 6px;
	margin: 12px 0 8px;
}

.xy-eg-dialog .xy-eg-share-field {
	flex: 1;
	min-inline-size: 0;
	block-size: 36px;
	padding: 0 12px;
	border: 1px solid var(--xy-eg-field-line);
	border-radius: var(--xy-radius-button, 6px);
	background: var(--xy-eg-field);
	color: var(--xy-eg-ink-3);
	font: 400 12px/1 var(--xy-eg-mono);
	text-overflow: ellipsis;
}

.xy-eg-dialog .xy-eg-share-actions {
	display: grid;
}

.xy-eg-dialog .is-copied {
	border-color: var(--xy-eg-ok);
}

.xy-eg-dialog .xy-eg-share-more {
	display: flex;
	justify-content: center;
	inline-size: 100%;
	margin-block-start: 14px;
	font-size: 13px;
}

.xy-eg-dialog .xy-eg-share.is-sheet {
	inset: auto 0 0;
	inline-size: auto;
	padding: 10px 16px 24px;
	border-width: 1px 0 0;
	border-radius: 16px 16px 0 0;
}

.xy-eg-dialog .is-sheet .xy-eg-share-grab {
	display: block;
	inline-size: 36px;
	block-size: 4px;
	margin: 0 auto 14px;
	border-radius: 2px;
	background: color-mix(in srgb, var(--xy-eg-ink) 24%, transparent);
}

.xy-eg-dialog .is-sheet .xy-eg-share-title {
	margin-block-end: 12px;
}

.xy-eg-dialog .is-sheet .xy-eg-share-note,
.xy-eg-dialog .is-sheet .xy-eg-share-link {
	display: none;
}

.xy-eg-dialog .is-sheet .xy-eg-share-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border: 1px solid var(--xy-eg-line);
	border-radius: 10px;
	background: color-mix(in srgb, var(--xy-eg-surface) 60%, transparent);
}

.xy-eg-dialog .xy-eg-share-card > div {
	min-inline-size: 0;
}

.xy-eg-dialog .xy-eg-share-thumb {
	flex: none;
	overflow: hidden;
	inline-size: 56px;
	block-size: 56px;
	border-radius: 6px;
	background: var(--xy-eg-surface-3);
}

.xy-eg-dialog .xy-eg-share-message {
	color: var(--xy-eg-ink);
	font: 500 13px/1.4 var(--xy-eg-ui);
}

.xy-eg-dialog .xy-eg-share-url {
	display: block;
	overflow: hidden;
	margin-block-start: 4px;
	color: var(--xy-eg-ink-3);
	font: 400 11px/1.3 var(--xy-eg-mono);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.xy-eg-dialog .is-sheet .xy-eg-share-actions {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-block-start: 12px;
}

.xy-eg-dialog .is-sheet .xy-eg-share-copy-wide {
	display: inline-flex;
}

/* ----- Phone ----- */

.xy-eg-dialog.is-phone .xy-eg-bar {
	gap: 12px;
	padding: 12px 16px;
}

.xy-eg-dialog.is-phone .xy-eg-title {
	font-size: 17px;
}

.xy-eg-dialog.is-phone .xy-eg-bar-meta {
	font-size: 12px;
}

.xy-eg-dialog.is-phone :is(.xy-eg-search-box, .xy-eg-result) .xy-eg-kbd,
.xy-eg-dialog.is-phone .xy-eg-search,
.xy-eg-dialog.is-phone .xy-eg-legend,
.xy-eg-dialog.is-phone .xy-eg-density,
.xy-eg-dialog.is-phone .xy-eg-sort,
.xy-eg-dialog.is-phone .xy-eg-resume {
	display: none;
}

.xy-eg-dialog.is-phone .xy-eg-search-open {
	display: inline-flex;
}

/* Search opens full screen and takes the place of the bar. */
.xy-eg-dialog.is-phone.is-searching .xy-eg-bar > :not(.xy-eg-search) {
	display: none;
}

.xy-eg-dialog.is-phone.is-searching .xy-eg-search {
	display: flex;
	flex: 1;
	padding-block: 2px;
}

.xy-eg-dialog.is-phone .xy-eg-search-box {
	flex: 1;
	inline-size: auto;
}

.xy-eg-dialog.is-phone .xy-eg-search-cancel {
	display: inline-flex;
}

.xy-eg-dialog.is-phone .xy-eg-results {
	inset: 69px 0 0;
	inline-size: auto;
	max-block-size: none;
	padding: 8px;
	border: 0;
	border-radius: 0;
	background: var(--xy-eg-surface);
	box-shadow: none;
}

.xy-eg-dialog.is-phone .xy-eg-results-list {
	flex: none;
}

.xy-eg-dialog.is-phone .xy-eg-toolbar {
	padding: 12px 16px;
}

.xy-eg-dialog.is-phone .xy-eg-tabs {
	display: flex;
	flex: 1;
}

.xy-eg-dialog.is-phone .xy-eg-tab {
	flex: 1;
	justify-content: center;
	padding: 0 8px;
}

.xy-eg-dialog.is-phone .xy-eg-tools {
	display: none;
}

.xy-eg-dialog.is-phone .xy-eg-canvas,
.xy-eg-dialog.is-phone .xy-eg-end {
	margin: 0;
}

.xy-eg-dialog.is-phone .xy-eg-row {
	gap: 2px;
}

.xy-eg-dialog.is-phone .xy-eg-tile {
	border-radius: 0;
}

.xy-eg-dialog.is-phone .xy-eg-tile.is-new::after {
	inset-block-start: 6px;
	inset-inline-end: 6px;
	inline-size: 9px;
	block-size: 9px;
}

.xy-eg-dialog.is-phone .xy-eg-stop {
	padding-inline-start: 16px;
}

.xy-eg-dialog.is-phone .xy-eg-end {
	padding: 32px 24px 48px;
}

.xy-eg-dialog.is-phone .xy-eg-skeleton {
	inset: 0;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 160px;
	gap: 2px;
}

/* A Timeline day on a phone: the day replaces the gallery bar, with a pill to step days. */
.xy-eg-dialog.is-phone.is-day .xy-eg-bar,
.xy-eg-dialog.is-phone.is-day .xy-eg-toolbar,
.xy-eg-dialog.is-phone .xy-eg-daybar-nav {
	display: none;
}

.xy-eg-dialog.is-phone .xy-eg-daybar {
	gap: 12px;
	padding: 12px 16px;
	border-block-end: 1px solid var(--xy-eg-line);
}

.xy-eg-dialog.is-phone .xy-eg-daybar-back,
.xy-eg-dialog.is-phone .xy-eg-daybar-back:hover {
	inline-size: 44px;
	block-size: 44px;
	justify-content: center;
	border: 1px solid var(--xy-eg-line);
	border-radius: 999px;
	background: color-mix(in srgb, var(--xy-eg-ink) 6%, transparent);
	color: var(--xy-eg-ink);
	text-decoration: none;
}

.xy-eg-dialog.is-phone .xy-eg-daybar-title h3 {
	font-size: 17px;
}

.xy-eg-dialog.is-phone .xy-eg-daybar-meta {
	font-size: 12px;
}

.xy-eg-dialog.is-phone .xy-eg-daybar-close {
	display: inline-flex;
}

.xy-eg-dialog.is-phone .xy-eg-tl {
	padding: 6px 16px 32px 44px;
}

.xy-eg-dialog.is-phone .xy-eg-tl-sort {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px 10px;
}

.xy-eg-dialog.is-phone .xy-eg-tl-days {
	color: var(--xy-eg-ink-2);
	font: 400 13px/1.5 var(--xy-eg-body);
}

.xy-eg-dialog.is-phone .xy-eg-tl-toggle {
	font-size: 13px;
}

.xy-eg-dialog.is-phone .xy-eg-tl-toggle svg {
	inline-size: 16px;
	block-size: 16px;
}

.xy-eg-dialog.is-phone .xy-eg-tl-day {
	padding-block-end: 8px;
}

.xy-eg-dialog.is-phone .xy-eg-tl-last {
	display: block;
	padding-block-end: 18px;
}

.xy-eg-dialog.is-phone .xy-eg-tl-link {
	display: block;
	margin-inline: -10px;
	padding: 8px 10px 10px;
}

.xy-eg-dialog.is-phone .xy-eg-tl-day::before,
.xy-eg-dialog.is-phone .xy-eg-tl-last::before {
	inset-inline-start: -23px;
}

.xy-eg-dialog.is-phone .xy-eg-tl-day .xy-eg-tl-node {
	position: absolute;
	inset-block-start: 11px;
	inset-inline-start: -29px;
	margin: 0;
}

.xy-eg-dialog.is-phone .xy-eg-tl-last .xy-eg-tl-node {
	position: absolute;
	inset-block-start: 4px;
	inset-inline-start: -27px;
}

.xy-eg-dialog.is-phone .xy-eg-tl-last p {
	font-size: 12px;
}

.xy-eg-dialog.is-phone .xy-eg-tl-spacer {
	display: none;
}

.xy-eg-dialog.is-phone .xy-eg-tl-head {
	margin-block-end: 2px;
}

.xy-eg-dialog.is-phone .xy-eg-tl-count {
	overflow: hidden;
	min-inline-size: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.xy-eg-dialog.is-phone .xy-eg-tl-all {
	font-size: 13px;
}

.xy-eg-dialog.is-phone .xy-eg-tl-strip {
	block-size: 92px;
	margin-block-start: 8px;
	border-radius: 6px;
}

/* Albums on a phone: a slimmer opener, and the bar's "2 of 3" chip opens the Albums sheet. */
.xy-eg-dialog.is-phone .xy-eg-album {
	padding-inline: 16px;
}

.xy-eg-dialog.is-phone .xy-eg-album-open {
	gap: 12px;
	block-size: 64px;
}

.xy-eg-dialog.is-phone .xy-eg-album-title {
	font-size: 24px;
}

.xy-eg-dialog.is-phone .xy-eg-album-range {
	font-size: 15px;
}

.xy-eg-dialog.is-phone .xy-eg-album-range .xy-eg-prefix {
	font-size: 14px;
}

.xy-eg-dialog.is-phone .xy-eg-album-count {
	font-size: 12px;
}

.xy-eg-dialog.is-phone .xy-eg-albumbar {
	gap: 10px;
	margin: 0;
	padding: 0 12px 0 16px;
}

.xy-eg-dialog.is-phone .xy-eg-albumbar-text {
	flex: 1;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
}

.xy-eg-dialog.is-phone .xy-eg-albumbar-name {
	font-size: 15px;
}

.xy-eg-dialog.is-phone .xy-eg-albumbar-meta {
	overflow: hidden;
	font-size: 12px;
	text-overflow: ellipsis;
}

.xy-eg-dialog.is-phone .xy-eg-albumbar-meta .xy-eg-prefix {
	font-size: 11.5px;
}

.xy-eg-dialog.is-phone :is(.xy-eg-albumbar-of, .xy-eg-albumbar-steps) {
	display: none;
}

.xy-eg-dialog.is-phone .xy-eg-albums-thumb {
	inline-size: 64px;
}

/* The single photo on a phone: actions under the photo, the number always on screen. */
.xy-eg-dialog.is-phone .xy-eg-v-top {
	padding: 12px 16px;
}

.xy-eg-dialog.is-phone .xy-eg-v-heading {
	text-align: center;
}

.xy-eg-dialog.is-phone .xy-eg-v-top-only,
.xy-eg-dialog.is-phone .xy-eg-v-previous,
.xy-eg-dialog.is-phone .xy-eg-v-next,
.xy-eg-dialog.is-phone .xy-eg-film {
	display: none;
}

.xy-eg-dialog.is-phone .xy-eg-v-stage {
	inset: 68px 0 168px;
}

.xy-eg-dialog.is-phone .xy-eg-v-number {
	inset-block-end: 116px;
}

.xy-eg-dialog.is-phone .xy-eg-v-actions {
	position: absolute;
	inset: auto 16px 52px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.xy-eg-dialog.is-phone .xy-eg-v-bottom-only {
	display: inline-flex;
}

.xy-eg-dialog.is-phone .xy-eg-viewer.is-immersive :is(.xy-eg-v-top, .xy-eg-v-actions, .xy-eg-v-hint) {
	display: none;
}

.xy-eg-dialog.is-phone .xy-eg-viewer.is-immersive .xy-eg-v-stage {
	inset: 0 0 56px;
}

.xy-eg-dialog.is-phone .xy-eg-viewer.is-immersive .xy-eg-v-number {
	inset-block-end: 20px;
}

.xy-eg-dialog.is-phone .xy-eg-v-card-strip {
	block-size: 120px;
}

.xy-eg-dialog.is-phone .xy-eg-v-card-title {
	font-size: 20px;
}

.xy-eg-dialog.is-phone .xy-eg-v-card-actions {
	flex-direction: column;
	align-self: stretch;
}

@media (prefers-reduced-motion: reduce) {
	.xy-eg-dialog .xy-eg-skeleton span {
		animation: none;
	}

	.xy-eg-dialog .xy-eg-scroll,
	.xy-eg-dialog .xy-eg-timeline {
		scroll-behavior: auto;
	}

	.xy-eg-dialog .xy-eg-tl-thumb img,
	.xy-eg-dialog .xy-eg-tl-all svg {
		transition: none;
	}

	.xy-eg-dialog .xy-eg-tl-link:hover .xy-eg-tl-thumb img,
	.xy-eg-dialog .xy-eg-tl-link:hover .xy-eg-tl-all svg {
		transform: none;
	}
}

/* Dark mode follows the theme; the photo viewer is always dark. */
.site-s-dark .xy-eg,
.s-dark .xy-eg,
.site-s-dark .xy-eg-dialog,
.xy-eg-dialog .xy-eg-viewer,
.xy-eg-dialog .xy-eg-share.is-dark {
	--xy-eg-ink: #f0f0f3;
	--xy-eg-ink-2: #b9b9c4;
	--xy-eg-ink-3: #8b8b98;
	--xy-eg-line: rgb(255 255 255 / 10%);
	--xy-eg-surface: #101016;
	--xy-eg-surface-2: #17171f;
	--xy-eg-surface-3: #20202a;
	--xy-eg-action: #a3a5ff;
	--xy-eg-on: #f0f0f3;
	--xy-eg-on-ink: #101016;
	--xy-eg-on-muted: #55555f;
	--xy-eg-pop: #f0f0f3;
	--xy-eg-pop-ink: #101016;
	--xy-eg-pop-muted: #55555f;
	--xy-eg-field: rgb(7 7 10 / 50%);
	--xy-eg-field-line: rgb(255 255 255 / 20%);
	--xy-eg-new-bg: rgb(228 6 102 / 16%);
	--xy-eg-new-ink: #ff8ab8;
	--xy-eg-glow: linear-gradient(100deg, rgb(228 6 102 / 14%), rgb(60 63 222 / 16%));
	--xy-eg-glow-line: rgb(255 255 255 / 8%);
	--xy-eg-mark: #c9caff;
	--xy-eg-error: #ff8aa6;
	--xy-eg-ok: #8fd6a8;
	--xy-eg-wait: #ffc56b;
	--xy-eg-shadow: 0 24px 48px -12px rgb(0 0 0 / 60%);
	--xy-eg-ghost-line: rgb(255 255 255 / 14%);
}