html {
	height: 100%;
	font-size: var(--mf-font-size);
}

/* A screen, not a page: the document itself never scrolls, so the chrome cannot be
   pushed out of the viewport. Scrolling belongs to whatever a region holds. */
body {
	height: 100dvh;
	overflow: hidden;
	background: var(--mf-color-background);
	color: var(--mf-color-text);
	font-family: var(--mf-font-mono);
	line-height: var(--mf-font-line-height);
}

a {
	color: inherit;
}

/* One link, wherever it stands: plain text at rest, bright under the pointer. A listing
   where every line is accented states no selection, so the accent is spent on what is
   held rather than on everything reachable. Size is the caller's — this says colour. */
.mf-link,
.mf-table-lead {
	color: var(--mf-color-text);
	text-decoration: none;
	transition: color var(--mf-transition-fast);

	&:hover,
	&:focus-visible {
		color: var(--mf-color-text-bright);
	}
}

/* Blocked is out of reach of the hit test too, not merely of the click: the
   crosshair asks the document what is under it, and must not be told. */
[inert] {
	pointer-events: none;
}

button {
	cursor: pointer;
}

:focus-visible {
	outline: var(--mf-border-width) solid var(--mf-color-focus);
	outline-offset: var(--mf-space-1);
}

/* A press with no frame of its own: the glyph, or the text, is the whole control.
   Written six times before, disagreeing on `none` versus `transparent` and on
   whether a keyboard got any feedback at all. Size, colour and hover stay with each
   — only what they had in common lives here. */
.mf-action,
.mf-picker-step,
.mf-subject-step,
.mf-table-lead {
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
	transition: color var(--mf-transition-fast);
}

/* Out of sight, not out of the accessibility tree: the glyph is the control, and
   the words are what a screen reader is given instead. The component selectors ride
   along because plain CSS cannot compose a class into a rule. */
.mf-hidden-label,
.mf-segmented[data-mf-variant="icons"] .mf-segmented-label,
.mf-button[data-mf-icon-only] .mf-button-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Offscreen but focusable: where the caret is drawn as a span there is nothing native to
   tap, and no phone raises a keyboard for one — so a real field holds the focus at its own
   static position without taking space or showing anything. Listed rather than composed,
   for the reason above. */
.mf-command-host,
.mf-boot-auth-host {
	position: absolute;
	width: 1px;
	height: 1em;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
	color: transparent;
	background: transparent;
	caret-color: transparent;
}

/* One line, cut short rather than pushing its frame open. `min-width: 0` because a
   flex item will not shrink below its content without it. Listed rather than composed
   for the reason above; `.mf-option-label` stays out, its `white-space: pre` being
   alignment rather than whitespace. */
.mf-truncate,
.mf-header-title,
.mf-header-sub,
.mf-overlay-title-tab,
.mf-panel-title,
.mf-picker-text,
.mf-segmented-label,
.mf-option-sub,
.mf-disclosure-label,
.mf-source-url,
.mf-table-info,
.mf-button-label {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}