/* Root & wrapper */
html, body {
	margin: 0;
	padding: 0;
}

body {
	overflow-x: hidden; /* avoid random horizontal scrolls */
	background: #fff;
}

.page {
	min-height: 100dvh; /* viewport-height with mobile-safe unit */
	display: grid;
	grid-template-rows: auto 1fr auto; /* header | main | footer */
}

/* Main should flex but not force extra height */
main {
	min-height: 0; /* important in grid to allow shrinking */
	overflow: visible; /* or auto if your content needs scrolling */
	/* optional: pad your content, but don't add big margins on first/last child */
}

main>:first-child {
	margin-top: 0;
}

main>:last-child {
	margin-bottom: 0;
}

/* Ensure custom elements don't collapse like inline elements */
app-header, app-footer {
	display: block;
	width: 100%;
	flex-shrink: 0; /* harmless in grid; safe if you switch to flex */
}