:root {
	--fido-fit-scale: 1;
	--fido-fit-width: 100vw;
	--fido-fit-height: 100vh;
	--fido-fit-offset-x: 0px;
	--fido-fit-offset-y: 0px;
}

/* The runtime selects the scale from the usable viewport. Responsive phone and
   tablet layouts stay at 100% so controls retain comfortable touch targets. */
html[data-fido-fit-ready="true"] {
	zoom: var(--fido-fit-scale);
}

html[data-fido-fit-ready="true"] body {
	width: var(--fido-fit-width);
	min-height: var(--fido-fit-height);
}

/* The Control Centre keeps a full-height sticky navigation rail while the
   workspace itself participates in normal document scrolling. */
html[data-fido-page="control"][data-fido-fit-ready="true"],
html[data-fido-page="control"][data-fido-fit-ready="true"] body,
html[data-fido-page="control"][data-fido-fit-ready="true"] .app-shell,
html[data-fido-page="control"][data-fido-fit-ready="true"] .workspace {
	height: auto;
	min-height: var(--fido-fit-height);
}

html[data-fido-page="control"][data-fido-fit-ready="true"] .sidebar {
	height: calc(var(--fido-fit-height) - var(--release-footer-height));
}

html[data-fido-page="control"][data-fido-fit-ready="true"] .fido-intro,
html[data-fido-page="control"][data-fido-fit-ready="true"] .modal-backdrop,
html[data-fido-page="control"][data-fido-fit-ready="true"] .owner-input-backdrop {
	width: var(--fido-fit-width);
	height: var(--fido-fit-height);
}

html[data-fido-page="control"][data-fido-fit-ready="true"] .automation-progress,
html[data-fido-page="control"][data-fido-fit-ready="true"] .toast {
	bottom: calc(var(--release-footer-height) + 22px - var(--fido-fit-offset-y));
}

/* Promotional sections continue to occupy one complete physical viewport after
   fitting, rather than ending early and exposing the page background. */
@media screen and (min-width: 901px) {
	html[data-fido-page="promo"][data-fido-fit-ready="true"] {
		--promo-viewport: calc(var(--fido-fit-height) - 82px - var(--release-footer-height));
	}

	html[data-fido-page="promo"][data-fido-fit-ready="true"] .hero {
		min-height: var(--promo-viewport);
	}

	html[data-fido-page="sitter"][data-fido-fit-ready="true"] .public-hero {
		min-height: calc(var(--fido-fit-height) - 100px);
	}
}

html[data-fido-page="promo"][data-fido-fit-ready="true"] .fixed-credit {
	right: 0;
	bottom: 0;
	left: 0;
}

html[data-fido-page="sitter"][data-fido-fit-ready="true"] .public-footer {
	right: 0;
	bottom: 0;
}

@media print {
	html[data-fido-fit-ready="true"] {
		zoom: 1 !important;
	}
	html[data-fido-fit-ready="true"] body {
		width: auto !important;
		min-height: 0 !important;
	}
}