/**
 * AIR Storybook Popup - extends the shared air_services_modal.css chrome
 * (loaded alongside this file, see catalog/controller/common/air_service_card.php
 * ::render()) with the wider, taller, iframe-holding layout a Storybook
 * Popup needs. Base `.air-services-modal { max-width: 480px; }` is left
 * fully untouched - this only ever applies via the more specific
 * `.air-services-modal.air-storybook-popup-modal` selector, exactly the
 * same "widen via a more specific rule, never edit the shared base rule"
 * approach used for the Connect New Machine modal.
 *
 * Colours (2026-07-30): re-pointed at the AIR Global UI Theme's `--air-*`
 * custom properties, same as air_services_modal.css.
 */

.air-services-modal.air-storybook-popup-modal {
	max-width: min(1100px, 95vw);
	width: 100%;
}

.air-services-modal.air-storybook-popup-modal .air-services-modal-body {
	padding: 0;
}

.air-storybook-popup-body {
	display: flex;
	flex-direction: column;
	height: 75vh;
}

.air-storybook-popup-toolbar {
	display: flex;
	justify-content: flex-end;
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--air-border);
}

.air-storybook-popup-frame-holder {
	flex: 1 1 auto;
	min-height: 0;
}

.air-storybook-popup-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	/* The Bento export paints its own background; this is only the brief
	   flash-of-unstyled-content colour before it loads - dark, to match the
	   theme, instead of a jarring white flash. */
	background-color: var(--air-bg-page);
}

.air-services-modal.air-storybook-popup-modal.air-storybook-popup-modal-maximised {
	max-width: 98vw;
	width: 98vw;
}

.air-storybook-popup-modal-maximised .air-storybook-popup-body {
	height: 90vh;
}

@media (max-width: 767.98px) {
	.air-services-modal.air-storybook-popup-modal {
		max-width: 95vw;
	}

	.air-storybook-popup-body {
		height: 80vh;
	}

	.air-storybook-popup-toolbar {
		justify-content: stretch;
	}

	.air-storybook-popup-toolbar .air-storybook-popup-fullscreen-btn {
		width: 100%;
	}
}