/* A screen, not a page: the grid IS the shell, at a definite height, so a track can
   only ever divide what the viewport gives it. Shrinkable too, so the layout gives way
   rather than overflowing if the shell ever holds anything beside it. */
.mf-layout {
	display: grid;
	flex: 1 1 auto;
	height: 100%;
	min-height: 0;
}

.mf-region {
	min-width: 0;
	min-height: 0;
}

/* The region is the window; the surface is what scrolls behind it. Docking hands a
   surface the same deal `.mf-overlay-body` gives a floating one, so a view neither
   knows nor cares which of the two it is in. The handles are chrome on the
   region, so they stay pinned while the surface moves under them. */
.mf-region-view {
	/* A containing block: the ping below and the handles are placed against the
	   region, never against what it holds. */
	position: relative;
	overflow: hidden;

	> :not(.mf-region-handles, .mf-pane-empty, .mf-scrollbar) {
		height: 100%;
	}
}

/* Which region was asked for, from `platform/ping`. An overlay is drawn
   rather than a border or a shadow: a border would move the content it surrounds, and
   a shadow would be cut off by the neighbour it points into. Opacity only, lit from
   the first frame — a cue that fades in is decoration, and one that moves costs layout. */
.mf-region-view[data-mf-ping]::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: var(--mf-z-raised);
	pointer-events: none;

	background: color-mix(in srgb, var(--mf-color-accent) 18%, transparent);
	box-shadow: inset 0 0 0 var(--mf-border-width) var(--mf-color-accent-strong);

	/* Matches PING_MS in platform/ping.js, which takes the mark away. */
	animation: mf-region-ping 480ms ease-out forwards;
}

@keyframes mf-region-ping {
	0%, 40% { opacity: 1; }
	100% { opacity: 0; }
}

/* Region name = grid-area name, so one mapping serves both layouts. */
[data-mf-region="header"] { grid-area: header; }
[data-mf-region="menu"] { grid-area: menu; }
[data-mf-region="footer"] { grid-area: footer; }
[data-mf-region="rail"] { grid-area: rail; }
[data-mf-region="boot"] { grid-area: boot; }

[data-mf-region="views"] {
	grid-area: views;

	border: var(--mf-border);
	border-left: 0;
}

/* The header, the menu row and the status bar span the shell; the rail runs beside
   the view area only. `views` is a tree of panes rather than a slot of its own. */
.mf-layout-shell {
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto minmax(0, 1fr) auto;
	grid-template-areas:
		"header header"
		"menu   menu"
		"views  rail"
		"footer footer";
}

.mf-layout-boot {
	grid-template-rows: minmax(0, 1fr);
	grid-template-areas: "boot";
}