/**
 * The on-screen page.
 *
 * The preview is an SVG at true page proportions. It is sized by its container
 * and the aspect ratio comes from the document, so a US Letter sheet and an A4
 * sheet are visibly different shapes - which matters, because choosing the
 * wrong paper size is the most common reason a worksheet prints badly.
 *
 * Nothing here scales the text independently of the page: there is one layout,
 * and this is a view of it.
 *
 * @package ActivityMaker
 */

.am-page {
	width: 100%;
	max-width: 100%;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(16, 20, 26, 0.14), 0 8px 24px rgba(16, 20, 26, 0.10);
	border-radius: 2px;
	overflow: hidden;
	/* aspect-ratio comes from the inline style the renderer writes. */
}

.am-page svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* On a phone the sheet should still be legible rather than a thumbnail. */
@media (max-width: 999px) {
	.am-preview__stage {
		padding: var(--am-2);
	}
}

/* The hidden container printing writes into. Invisible on screen. */
#am-print-root {
	display: none;
}

.am-print-page {
	background: #ffffff;
}

.am-print-page svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* A small legend under the preview for what the current page is. */
.am-page-kind {
	display: inline-flex;
	align-items: center;
	gap: var(--am-1);
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--am-bg-sunken);
	border: 1px solid var(--am-border);
	font-size: var(--am-text-xs);
	color: var(--am-text-muted);
}