@layer base {
	/* the modal overlay ui.js shows for config diffs, uploads and login */
	#modal_overlay {
		position: fixed;
		top: 0;
		bottom: 0;
		background: var(--fs-scrim);
		z-index: var(--fs-z-overlay);
		overflow: auto;
		transition: opacity var(--fs-dur);
		opacity: 0;
		visibility: hidden;
	}

	.modal {
		width: 90%;
		margin: var(--fs-space-6) auto; /* clear of the sticky bar, and centred */
		min-height: var(--fs-control-h);
		max-width: 600px;
		border-radius: var(--fs-radius-lg); /* a modal is a card — the large radius, like every panel */
		background: var(--fs-panel);
		border: var(--fs-hairline);
		padding: var(--fs-card-pad);
		min-width: 270px;
	}

	/* .modal > * / pre / textarea: theme/70-modal.css — absorbed with the heading ramp and the
	 * generic field box, both of which would out-layer a restatement here. */

	.modal > .button-row {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.modal > .button-row > button:not(:last-of-type) {
		margin-inline-end: var(--fs-space-2);
	}

	.modal > .button-row > button:first-of-type {
		margin-inline-end: auto;
	}

	body.modal-overlay-active {
		overflow: hidden;
		height: 100svh; /* not vh (crops under URL bar) or dvh (re-lays out each frame it slides) */
	}

	body.modal-overlay-active #modal_overlay {
		inset-inline: 0;
		opacity: 1;
		visibility: visible;
	}

	.btn .close, .alert-message .close {
		font-family: var(--fs-font-sans);
	}

	/* Colour-word block absorbed, do not re-add: .btn.<word> theme/55-buttons.css,
	 * .alert-message/.cbi-tooltip.<word> theme/35-alerts.css. */
}