/* Scrolled by whatever holds it — the window's body, or the region when docked — so the
   bar sits on that frame rather than inside the gallery. */
.mf-self-test {
	display: flex;
	flex-direction: column;
	padding: var(--mf-space-4);
}

/* Sticky: the callbacks it reports are fired further down the gallery. */
.mf-self-test-readout {
	position: sticky;
	top: 0;
	z-index: var(--mf-z-raised);

	padding: var(--mf-space-2) var(--mf-space-3);
	background: var(--mf-color-surface-raised);
	border: var(--mf-border-strong);
	color: var(--mf-color-accent);
}

.mf-self-test-sections {
	display: flex;
	flex-direction: column;
	gap: var(--mf-space-5);
	padding-top: var(--mf-space-5);
}

.mf-self-test-section {
	display: flex;
	flex-direction: column;
	gap: var(--mf-space-3);
}

.mf-self-test-heading {
	color: var(--mf-color-text-muted);
	font-size: var(--mf-font-size-small);
	font-weight: normal;
	letter-spacing: var(--mf-track-label);
	text-transform: uppercase;
	border-bottom: var(--mf-border);
}

.mf-self-test-specimen {
	display: flex;
	flex-direction: column;
	gap: var(--mf-space-2);
}

.mf-self-test-caption {
	color: var(--mf-color-text-muted);
}

.mf-self-test-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--mf-space-3);
}

.mf-self-test-target {
	padding: var(--mf-space-1) var(--mf-space-3);
	border: var(--mf-border);
}

.mf-self-test-anchored {
	padding: var(--mf-space-3);
	border: var(--mf-border-strong);
}

/* One glyph in a 48px square, over its name. */
.mf-self-test-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mf-space-1);
	width: 10em;

	&:hover,
	&:focus {
		.mf-self-test-icon-box {
			transform: scale(1.5);
		}
	}
}

.mf-self-test-icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: var(--mf-border);
	color: var(--mf-color-accent);
	transition: transform 0.2s;

	.mf-icon {
		width: 40px;
		height: 40px;
	}
}

/* The same glyph at the size it is actually used — where a bulky one gives itself up. */
.mf-self-test-icon-actual {
	color: var(--mf-color-accent);

	.mf-icon {
		width: 18px;
		height: 18px;
	}
}

.mf-self-test-icon-label {
	font-size: var(--mf-font-size-tiny);
	color: var(--mf-color-text-muted);
	text-align: center;
	overflow-wrap: anywhere;
}

/* A drawing surface has no size of its own, so the gallery lends it one. */
.mf-self-test-viewport {
	display: flex;
	flex-direction: column;
	gap: var(--mf-space-2);
	inline-size: 340px;

	.mf-viewport {
		block-size: 200px;
		border: var(--mf-border-strong);
	}
}

.mf-self-test-demo {
	padding: var(--mf-space-4);
	color: var(--mf-color-text-muted);
}

/* The glyph of the action `overlays.js` adds. One class, so it draws in a window's
   rail and against a pane alike; the frame's own glyphs stay in overlay.css. */
.mf-action[data-mf-action="self-test"]::before {
	content: "◆";
}

/* The HUD specimen is fluid where the viewport one is fixed: narrowing the window is
   what makes the label de-collision visible. */
.mf-self-test-hud {
	inline-size: 100%;
	max-inline-size: 640px;

	.mf-viewport {
		block-size: 320px;
		border: var(--mf-border-strong);
	}
}