.mf-overlay-layer {
	position: fixed;
	inset: 0;
	z-index: var(--mf-z-overlay);
	pointer-events: none;
}

/* The veil is the scrim: what it covers is what it blocks, so the tint and the reach are
   one rectangle — stopping at the chrome the manager measures, or at the viewport's edges
   while blocking. An element of the layer's own, moved under the top modal and given that
   window's stacking number. Not the modal's `::before`: a pseudo hit-tests as the element
   that owns it, so the whole darkened screen would report the modal to every press. */
.mf-overlay-veil {
	position: fixed;
	left: var(--mf-scrim-left, 0);
	right: var(--mf-scrim-right, 0);
	top: var(--mf-scrim-top, 0);
	bottom: var(--mf-scrim-bottom, 0);
	z-index: var(--mf-overlay-z, 1);
	background: var(--mf-color-scrim);

	/* The layer is pointer-transparent; the veil is what answers a press outside. */
	pointer-events: auto;
}

.mf-overlay-layer[data-mf-blocking] .mf-overlay-veil {
	inset: 0;
}

/* Every geometry property comes from the overlay itself; this sheet is chrome.
   The border and the background are the outline path, in overlay-shape.css. */
.mf-overlay-frame {
	/* How far the panel holds its content off the frame; a bare window overrides it. */
	--mf-overlay-pad: var(--mf-overlay-clear);

	position: absolute;
	left: var(--mf-overlay-x);
	top: var(--mf-overlay-y);
	width: var(--mf-overlay-width);
	height: var(--mf-overlay-height);

	/* The stack, as the manager writes it. The veil takes the top modal's own number
	   and sits before it, so it covers everything that window outranks. */
	z-index: var(--mf-overlay-z, 1);

	display: flex;
	flex-direction: column;

	/* Only the shape takes input, so the gap between the tabs is not the window. */
	pointer-events: none;

	color: var(--mf-color-text-muted);
	font-family: var(--mf-font-mono);
	font-size: var(--mf-font-size-small);

	&[data-mf-active] {
		color: var(--mf-color-text);
	}

	/* Which window is live, said by pushing everything else back. It paints under the
	   outline (both positioned, so DOM order decides), and the opaque path masks it: the
	   bright shape is the window's own silhouette, chamfers and notches included, rather
	   than the rectangle a box-shadow would leave. A modal's veil already darkens. */
	&[data-mf-active]:not([data-mf-modal])::before {
		content: "";
		position: absolute;
		/* vmax, not vw: the viewport is taller than it is wide often enough. */
		inset: -100vmax;
		background: var(--mf-color-dim);
	}

	/* A modal takes the whole of its rectangle: it has no action tabs and nothing
	   behind it to reach, so a hole in its chrome only drops a press on its own title
	   through to the veil, which answers a press by dismissing it. */
	&[data-mf-modal] {
		pointer-events: auto;
	}

	/* The border says which window is focused; see overlay-shape.css. */
	&:focus-visible {
		outline: none;
	}

	/* Above the outline, which is positioned and would otherwise paint over them. */
	.mf-overlay-rail,
	.mf-overlay-panel {
		position: relative;
	}

	.mf-overlay-rail {
		display: flex;
		justify-content: space-between;
		flex: 0 0 var(--mf-overlay-rail);
	}

	/* Each tab and its ramp, so the slope is beside the measured tab, not inside it. */
	.mf-overlay-lead,
	.mf-overlay-trail {
		display: flex;
		min-width: 0;
	}

	/* The tab is as wide as its text, and the outline follows it. */
	.mf-overlay-lead {
		max-width: 55%;
	}

	/* No controls, no slope: the outline closes after the title ramp. */
	.mf-overlay-trail:not(:has(.mf-overlay-action)) {
		display: none;
	}

	.mf-overlay-title-tab,
	.mf-overlay-actions,
	.mf-overlay-ramp,
	.mf-overlay-panel {
		pointer-events: auto;
	}

	/* Inside the outline, so it is surface rather than a hole to fall through. */
	.mf-overlay-ramp {
		flex: none;

		/* Only shows where no crosshair is mounted, and only where it is true. */
		&[data-mf-pointer-grip] {
			cursor: move;
		}

		&[data-mf-side="title"] {
			width: var(--mf-overlay-rail);
			clip-path: polygon(0 0, 100% 100%, 0 100%);
		}

		&[data-mf-side="actions"] {
			width: calc(var(--mf-overlay-rail) - var(--mf-overlay-grip));
			clip-path: polygon(0 100%, 100% var(--mf-overlay-grip), 100% 100%);
		}
	}

	.mf-overlay-title-tab {
		padding: 0 var(--mf-space-2);
		line-height: var(--mf-overlay-rail);
		text-transform: uppercase;

		/* The tab is a grab handle: a drag must not select its label. */
		user-select: none;

		/* Only shows where no crosshair is mounted. */
		&[data-mf-pointer-grip] {
			cursor: move;
		}
	}

	/* The tab and its ramp are one handle, so either lights the caption — and
	   neither does on a window that does not move. */
	.mf-overlay-lead:hover .mf-overlay-title-tab[data-mf-pointer-grip] {
		color: var(--mf-color-accent);
	}

	/* Dropped by the content inset, which aligns the buttons with the body. */
	.mf-overlay-actions {
		display: flex;
		align-self: stretch;
		margin-top: var(--mf-overlay-grip);
	}

	/* Square, and unseparated: a border here would double the outline. */
	.mf-overlay-action {
		width: calc(var(--mf-overlay-rail) - var(--mf-overlay-grip));
		line-height: 1;

		/* Inherited, not muted: it tracks the frame's own active state. */
		color: inherit;

		&:hover,
		&:focus-visible {
			color: var(--mf-color-accent-strong);
		}

		/* Glyphs live here, so the components carry names and labels only. */
		&[data-mf-action="minimize"]::before {
			content: "\2013";
		}

		&[data-mf-action="maximize"]::before {
			content: "\25A1";
		}

		&[data-mf-action="close"]::before {
			content: "\2715";
		}
	}

	/* Maximized, the rail is a title bar: no tabs to cut around, so the outline's
	   own rule separates it from the body and everything centres on it. */
	&[data-mf-maximized] {
		.mf-action[data-mf-action="maximize"]::before {
			content: "\25A3";
		}

		.mf-overlay-rail {
			align-items: center;
			background: var(--mf-color-surface-raised);
		}

		.mf-overlay-ramp {
			display: none;
		}

		.mf-overlay-lead {
			max-width: none;
		}

		.mf-overlay-title-tab {
			line-height: 1;
		}

		.mf-overlay-actions {
			align-self: center;
			margin-top: 0;
		}
	}

	/* The content stands off the frame rather than reaching over it: the padding holds
	   it off the straight edges, and the clip — the outline offset by the same amount,
	   written by `Frame/Outline` — takes the chamfers and the grab notches out. */
	.mf-overlay-panel {
		flex: 1;
		min-height: 0;
		padding: var(--mf-overlay-pad);
		clip-path: var(--mf-overlay-clip, none);
	}

	/* The scroller, so the rail never scrolls away with the content. */
	.mf-overlay-body {
		height: 100%;
	}

	/* A surface's own head stays put while its body scrolls under it: on a bare window it
	   is the only thing naming what is being read. The ground is the surface's own, so
	   nothing shows through on its way past — and the head reaches back out over the
	   padding it is inset by, or the content would scroll through that strip. A surface
	   with padding of its own says so with `--mf-surface-pad`. */
	.mf-overlay-body > header:first-child,
	.mf-overlay-body > * > header:first-child {
		position: sticky;
		top: 0;
		z-index: 1;
		background: inherit;
		margin-top: calc(-1 * var(--mf-surface-pad, 0px));
		margin-inline: calc(-1 * var(--mf-surface-pad, 0px));
		padding-top: var(--mf-surface-pad, 0px);
		padding-inline: var(--mf-surface-pad, 0px);
	}

	/* The bar rides the panel's edge, handed to it in the body's terms — the clip stands
	   `clear` off the frame while the body starts at the panel's padding, which is what
	   every line below subtracts. The east notch, where there is one, is the bend. */
	.mf-overlay-panel > .mf-scrollbar {
		/* What the content runs out into here is the window's own fill, not the page. */
		--mf-scroll-fade-color: var(--mf-color-surface);

		--mf-scroll-inset: calc(var(--mf-overlay-clear) - var(--mf-overlay-pad));
		--mf-scroll-bend: var(--mf-overlay-cut, 0px);
		--mf-scroll-notch: calc(var(--mf-overlay-cut-y, 0px) - var(--mf-overlay-pad));
		--mf-scroll-flat: var(--mf-overlay-cut-half, 0px);
	}

	/* A readout is looked at: it has no rail, and it takes no input back. */
	&[data-mf-chromeless] .mf-overlay-panel {
		pointer-events: none;
	}

	/* A bare window IS its surface: the padding would be a border it never asked for,
	   and there is no rail to keep clear of. The clip stands, so the surface stops at
	   the frame instead of running under it. */
	&[data-mf-bare] {
		--mf-overlay-pad: 0px;
	}
}