:root {
	/* Match the 150% browser zoom look while the browser stays at 100%. */
	--fsm-ui-scale: 1.5;
	--fsm-screen-gutter: 24px;
	--fsm-screen-gutter-total: calc(var(--fsm-screen-gutter) * 2);
	--fsm-server-box-width: 44%;
	--fsm-server-box-supercompact-width: 47.3%;
	--fsm-server-box-max-width: 29.7em;
	--fsm-server-box-min-height: 16em;
}

body,
body[class] {
	zoom: var(--fsm-ui-scale);
}

body .fsmheader,
body[class] .fsmheader,
body #monitorcontainer,
body[class] #monitorcontainer {
	width: calc(100% - var(--fsm-screen-gutter-total));
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

body #monitorcontainer,
body[class] #monitorcontainer {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px 16px;
	margin-top: 10px;
	align-items: start;
	text-align: left;
}

body #monitorcontainer > :not(.fsmserver),
body[class] #monitorcontainer > :not(.fsmserver) {
	grid-column: 1 / -1;
}

body #monitorcontainer .fsmserver,
body[class] #monitorcontainer .fsmserver {
	display: block;
	width: auto;
	max-width: none;
	min-height: var(--fsm-server-box-min-height);
	box-sizing: border-box;
	margin: 0;
}

body.supercompact #monitorcontainer .fsmserver,
body[class].supercompact #monitorcontainer .fsmserver {
	width: auto;
}

body .infopopup .infopopupclose,
body[class] .infopopup .infopopupclose,
body .infopopup .infopopupcontent,
body[class] .infopopup .infopopupcontent {
	right: max(8%, var(--fsm-screen-gutter));
	left: max(8%, var(--fsm-screen-gutter));
	box-sizing: border-box;
}

body .fsm-theme-menu,
body[class] .fsm-theme-menu {
	left: var(--fsm-screen-gutter);
}

body[class] .fsm-knight-rider {
	width: 100%;
	margin-right: 0;
	margin-left: 0;
}

/* CSS zoom does not change media query math, so these thresholds are scaled by 1.5×. */

@media all and (min-width: 1152px) and (max-width: 1469px) {
	body,
	body[class] {
		--fsm-server-box-min-height: 16.75em;
	}
}

/* Mobile: single column. At 1.5× zoom, 1151px stated = ~767px effective viewport width. */
@media all and (max-width: 1151px) {
	body #monitorcontainer,
	body[class] #monitorcontainer {
		display: block;
	}

	body #monitorcontainer .fsmserver,
	body[class] #monitorcontainer .fsmserver,
	body #loginform,
	body[class] #loginform {
		width: calc(100% - var(--fsm-screen-gutter-total));
		max-width: calc(100% - var(--fsm-screen-gutter-total));
		margin-right: auto;
		margin-left: auto;
		box-sizing: border-box;
	}
}