.mf-boot {
	height: 100%;
	overflow: auto;
	padding: var(--mf-space-6) var(--mf-space-5);
	outline: none;

	.mf-boot-log {
		color: var(--mf-color-text);
		font-family: var(--mf-font-mono);
		/* Every column must measure alike, and a run of dots must not fuse into an
		   ellipsis: the code display is positional. */
		font-variant-ligatures: none;
		font-feature-settings: "liga" 0, "clig" 0, "calt" 0;
		white-space: pre;
	}

	/* A blank line keeps its height once the cursor has moved on. */
	.mf-boot-line {
		min-height: 1lh;
	}

	.is-ok {
		color: var(--mf-color-success);
	}

	.is-err {
		color: var(--mf-color-danger);
	}

	.mf-boot-cursor {
		color: var(--mf-color-accent);
		animation: mf-boot-blink 1.1s steps(1, end) infinite;
	}

	.mf-boot-auth {
		.mf-boot-auth-dim {
			color: var(--mf-color-text-muted);
		}

		/* Amber while the code is incomplete, green once Enter would take it. */
		.mf-boot-auth-value {
			color: var(--mf-color-accent);

			&.is-complete {
				color: var(--mf-color-success);
			}
		}

		/* A block caret, as on the command line: it carries the column it covers. */
		.is-caret {
			color: var(--mf-color-background);
			background: var(--mf-color-accent);
			animation: mf-boot-blink 1s steps(1, end) infinite;
		}
	}

	/* Offscreen but focusable, dressed in `core/base.css`. Under 16px iOS zooms the page
	   in on the focused field, which is the one thing that is boot's own here. */
	.mf-boot-auth-host {
		font-size: 1rem;
	}

	/* Touch only: nothing on the screen looks pressable, and once the keyboard is up
	   it covers the Enter this screen asks for. */
	.mf-boot-touch {
		display: none;
		margin-top: var(--mf-space-5);
		padding: var(--mf-space-3) var(--mf-space-4);
		border: var(--mf-border-strong);
		color: var(--mf-color-accent);
		font-family: var(--mf-font-mono);
		letter-spacing: var(--mf-track-label);
		background: transparent;
	}

	&.is-complete .mf-boot-touch {
		color: var(--mf-color-success);
		border-color: var(--mf-color-success);
	}
}

@media (hover: none) {
	.mf-boot.is-prompting .mf-boot-touch {
		display: block;
	}

	/* The keyboard is already up: the bar has nothing to say until the code can go. */
	.mf-boot.is-typing:not(.is-complete) .mf-boot-touch {
		display: none;
	}
}

/* A phone has no columns to spare: the type shrinks to keep a leader line whole, and
   what is still too long wraps rather than scrolling the screen sideways. */
@media (width < 40rem) {
	.mf-boot {
		padding: var(--mf-space-5) var(--mf-space-3);

		.mf-boot-log {
			font-size: clamp(0.55rem, 2.7vw, 1rem);
			white-space: pre-wrap;
		}
	}
}

@keyframes mf-boot-blink {
	50% {
		opacity: 0;
	}
}