/**
 * Full-screen teletext layout inside a theme shell (header + footer stay visible).
 */

body.retrotext-page {
	--retrotext-shell-header: 0px;
	--retrotext-shell-footer: 0px;
}

/* Standalone document (no theme header/footer): fill the whole viewport. */
html:has(body.retrotext-standalone),
body.retrotext-standalone {
	margin: 0;
	padding: 0;
	min-height: 100dvh;
	background: #000;
}

body.retrotext-standalone .retrotext-standalone__main {
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: none;
	min-height: 100dvh;
}

/* Standalone teletext page: the grid sizes itself with container-query units
 * (100cqh) against .retro-tv__screen, so that element MUST always have a real
 * height. The normal sizing chain (aspect-ratio + nested flex from tv-stage.css)
 * is not even loaded in lean/digital-only mode and collapses to zero height on
 * narrow viewports, which renders the whole page blank. We therefore pin the
 * active digital screen to a concrete dvh height with !important so it can never
 * collapse — independent of theme, device, the fullscreen-layout setting, or
 * whether tv-stage.css is loaded. */
body.retrotext-standalone .retrotext-embed,
body.retrotext-standalone .retrotext-stage,
body.retrotext-standalone .retrotext-stage__center,
body.retrotext-standalone .retrotext-stage__main {
	width: 100%;
	max-width: none;
}

body.retrotext-standalone .retrotext-mode-shell--digital.is-active {
	display: block !important;
}

body.retrotext-standalone .retrotext-mode-shell--digital.is-active .retrotext-viewer-screen,
body.retrotext-standalone .retrotext-mode-shell--digital.is-active .retro-tv__screen-slot,
body.retrotext-standalone .retrotext-mode-shell--digital.is-active .retro-tv__screen {
	width: 100% !important;
	height: 100dvh !important;
	min-height: 100dvh !important;
	max-height: 100dvh !important;
	aspect-ratio: auto !important;
	flex: none !important;
	border: 0 !important;
}

body.retrotext-standalone .retrotext-mode-shell--digital.is-active .retro-tv__screen {
	position: relative !important;
	overflow: hidden !important;
}

body.retrotext-standalone .retrotext-mode-shell--digital.is-active .retrotext-viewport {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	/* Fallback row height if container-query sizing yields 0 on some browser;
	 * the iPhone JS path overrides this with a measured value when present. */
	--retrotext-row-height: calc(100dvh / var(--retrotext-page-rows, 24)) !important;
}

body.retrotext-page.retrotext-fullscreen-layout .entry-content,
body.retrotext-page.retrotext-fullscreen-layout .wp-block-post-content,
body.retrotext-page.retrotext-fullscreen-layout .site-main,
body.retrotext-page.retrotext-fullscreen-layout main,
body.retrotext-page.retrotext-fullscreen-layout #content,
body.retrotext-page.retrotext-fullscreen-layout .content-area {
	padding-left: 0;
	padding-right: 0;
	max-width: none;
	width: 100%;
}

body.retrotext-page.retrotext-fullscreen-layout .retrotext-embed {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	width: 100%;
	max-width: none;
	background: #000;
	min-height: calc(
		100dvh - var(--retrotext-shell-header, 0px) - var(--retrotext-shell-footer, 0px)
	);
}

body.retrotext-page.retrotext-fullscreen-layout .retrotext-embed .retrotext-stage {
	padding: 0;
	gap: 0;
}

body.retrotext-page.retrotext-fullscreen-layout .retrotext-embed .retrotext-stage--digital .retrotext-mode-shell--digital.is-active,
body.retrotext-page.retrotext-fullscreen-layout .retrotext-embed .retrotext-stage--digital-only .retrotext-mode-shell--digital {
	min-height: calc(
		100dvh - var(--retrotext-shell-header, 0px) - var(--retrotext-shell-footer, 0px) - 3.5rem
	);
}

body.retrotext-page.retrotext-fullscreen-layout .retrotext-embed .retrotext-stage--digital .retrotext-viewer-screen,
body.retrotext-page.retrotext-fullscreen-layout .retrotext-embed .retrotext-stage--digital-only .retrotext-viewer-screen {
	min-height: calc(
		100dvh - var(--retrotext-shell-header, 0px) - var(--retrotext-shell-footer, 0px) - 3.5rem
	);
	border: 0;
}

body.retrotext-page.retrotext-fullscreen-layout .retrotext-embed .retrotext-stage--digital .retrotext-viewer-screen .retro-tv__screen,
body.retrotext-page.retrotext-fullscreen-layout .retrotext-embed .retrotext-stage--digital-only .retrotext-viewer-screen .retro-tv__screen {
	min-height: 100%;
}