/* Shared social-photo viewer. Native dialog keeps page controls inert. */
.media-viewer {
	position: fixed;
	inset: 0;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100vh;
	block-size: 100dvh;
	max-block-size: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fcf8ff;
	font-family: var(--ft-font);
	overflow: hidden;
	overscroll-behavior: contain;
}

.media-viewer [hidden] { display: none !important; }

.media-viewer::backdrop {
	background: rgb(35 25 45 / .87);
}

@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
	.media-viewer::backdrop {
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}
}

.media-viewer__frame {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	gap: .75rem;
	inline-size: 100%;
	max-inline-size: 100rem;
	block-size: 100%;
	min-inline-size: 0;
	margin-inline: auto;
	padding: max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
}

.media-viewer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-inline-size: 0;
}

.media-viewer__header h2 {
	margin: 0;
	color: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
}

.media-viewer button {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	min-inline-size: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 247 255 / .12);
	color: #fcf8ff;
	font: inherit;
	cursor: pointer;
	touch-action: manipulation;
}

.media-viewer button .ft-icon {
	inline-size: 1.375rem;
	block-size: 1.375rem;
}

.media-viewer button:focus-visible {
	outline: 3px solid #ffc0da;
	outline-offset: 3px;
}

/* Only suppress initial programmatic close focus after a pointer open.
 * The controller removes this state on keyboard interaction. */
.media-viewer.is-pointer-open .media-viewer__close:focus-visible {
	outline: none;
}

.media-viewer__stage {
	position: relative;
	display: grid;
	place-items: center;
	min-inline-size: 0;
	min-block-size: 0;
	touch-action: pan-y pinch-zoom;
}

.media-viewer__canvas {
	position: relative;
	min-inline-size: 0;
	min-block-size: 0;
	max-inline-size: 100%;
	max-block-size: 100%;
	border-radius: .5rem;
	background: rgb(255 247 255 / .045);
	box-shadow: 0 .5rem 1.5rem rgb(15 8 22 / .16);
	/* JS fits the safe intrinsic ratio before loading the full image. */
}

.media-viewer__preview,
.media-viewer__full {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: 100%;
	max-block-size: 100%;
	margin: 0;
	border-radius: inherit;
	object-fit: contain;
}

.media-viewer__full {
	opacity: 0;
	transition: opacity 150ms ease-out;
}

.media-viewer__canvas.is-ready .media-viewer__full,
.media-viewer__full.is-ready {
	opacity: 1;
}

.media-viewer .media-viewer__previous,
.media-viewer .media-viewer__next {
	position: absolute;
	z-index: 1;
	inset-block-start: calc(50% - 1.375rem);
	background: rgb(35 25 45 / .68);
}

.media-viewer__previous { inset-inline-start: .25rem; }
.media-viewer__next { inset-inline-end: .25rem; }

.media-viewer__loader {
	position: absolute;
	inset-inline-end: .5rem;
	inset-block-end: .5rem;
	padding: .25rem .5rem;
	border-radius: .375rem;
	background: rgb(35 25 45 / .78);
	color: #fcf8ff;
	font-size: .75rem;
	line-height: 1.5;
	pointer-events: none;
}

.media-viewer__footer {
	display: grid;
	justify-items: center;
	gap: .5rem;
	inline-size: 100%;
	max-inline-size: 50rem;
	min-inline-size: 0;
	margin-inline: auto;
	text-align: center;
}

.media-viewer__caption,
.media-viewer__status {
	max-inline-size: 100%;
	max-block-size: 4.35em;
	margin: 0;
	padding-inline: .25rem;
	font-size: .9375rem;
	font-weight: 400;
	line-height: 1.45;
	overflow: auto;
	overflow-wrap: anywhere;
	overscroll-behavior: contain;
}

.media-viewer__status {
	color: #f2dfef;
	font-size: .8125rem;
}

.media-viewer__navigation {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	min-inline-size: 0;
}

.media-viewer__position {
	color: #e4d8ec;
	font-size: .8125rem;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

.media-viewer__thumbnails {
	display: flex;
	justify-content: center;
	gap: .5rem;
	max-inline-size: 100%;
}

.media-viewer__thumbnails button {
	padding: 3px;
	border-radius: .625rem;
	background: rgb(255 247 255 / .13);
}

.media-viewer__thumbnails button[aria-current="true"] {
	background: #df3980;
}

.media-viewer__thumbnails img,
.media-viewer__thumbnails canvas {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border-radius: .4375rem;
	object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
	.media-viewer button:hover { background: rgb(255 247 255 / .22); }
	.media-viewer .media-viewer__previous:hover,
	.media-viewer .media-viewer__next:hover { background: rgb(70 50 82 / .94); }
	.media-viewer__thumbnails button[aria-current="true"]:hover { background: #ed5496; }
}

@media (min-width: 48rem) {
	.media-viewer__frame {
		gap: 1rem;
		padding: max(1.25rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
	}
	.media-viewer__stage { padding-inline: 4rem; }
	.media-viewer.is-single .media-viewer__stage { padding-inline: 0; }
	.media-viewer__previous { inset-inline-start: max(.5rem, calc((100% - var(--media-width, 100%)) / 2 - 3.5rem)); }
	.media-viewer__next { inset-inline-end: max(.5rem, calc((100% - var(--media-width, 100%)) / 2 - 3.5rem)); }
	.media-viewer__navigation { flex-direction: row; gap: 1rem; }
	.media-viewer__thumbnails button { inline-size: 3rem; block-size: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
	.media-viewer__full { transition: none; }
}

@media (forced-colors: active) {
	.media-viewer { color: CanvasText; }
	.media-viewer::backdrop { background: Canvas; }
	.media-viewer button { color: ButtonText; border: 1px solid ButtonText; }
	.media-viewer button:focus-visible { outline-color: Highlight; }
	.media-viewer__thumbnails button[aria-current="true"] { border: 3px solid Highlight; }
	.media-viewer__position,
	.media-viewer__status { color: CanvasText; }
}

/* Existing compact cards retain their dimensions and link presentation. */
.question-card__thumbnail-link { position: relative; z-index: 2; }
.question-card__thumbnail-link > img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	border-radius: inherit;
}
.poll-preview .poll-preview__title-link,
.poll-preview .poll-preview__title-link:hover {
	color: inherit;
	text-decoration: none;
}
.poll-preview .poll-preview__cta { text-decoration: none; }
.poll-preview .poll-preview__cta:hover { text-decoration: underline; }