.mf-command-line {
	position: relative;
	display: flex;
	align-items: baseline;
	/* Only between the prompt and the input; inside the input the caret sits flush. */
	gap: var(--mf-space-2);
	padding: var(--mf-space-2) var(--mf-space-4);
	background: var(--mf-color-surface);
	border-top: var(--mf-border);
	color: var(--mf-color-text);
	font-family: var(--mf-font-mono);
	/* The size the widget rail already runs at, so the bar reads as one band. */
	font-size: var(--mf-font-size-small);
	line-height: var(--mf-font-line-height-tight);
	/* The caret is a character cell; collapsing whitespace would shift it. */
	white-space: pre;
	outline: none;
}

.mf-command-line > * {
	flex: 0 0 auto;
}

.mf-command-line.is-focused {
	border-top-color: var(--mf-color-border-strong);
}

/* The one green glyph on the screen: the line is always live, focused or not. */
.mf-command-prompt {
	color: var(--mf-color-green);
}

.mf-command-placeholder {
	color: var(--mf-color-text-muted);
}

/* Uncommitted IME text: in the line, but not in the buffer yet. */
.mf-command-compose {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* `.mf-command-host` is dressed in `core/base.css`, beside the boot screen's own field:
   one offscreen-field recipe, two names. */

/* Hidden rather than removed, so the text never shifts when focus is lost. */
.mf-command-caret {
	visibility: hidden;
	color: var(--mf-color-background);
	background: var(--mf-color-accent);
}

.mf-command-line.is-focused .mf-command-caret {
	visibility: visible;
	animation: mf-command-blink 1s steps(1, end) infinite;
}

/* The completion strip: out of flow above the bar, so the line never moves when it
   rises, and untouchable — the keyboard is what walks and accepts it. */
.mf-command-hints {
	position: absolute;
	bottom: 100%;
	left: 0;
	z-index: var(--mf-z-raised);
	min-width: 32ch;
	max-width: 100%;
	padding: var(--mf-space-1) 0;
	background: var(--mf-color-surface-raised);
	border: var(--mf-border);
	border-bottom: 0;
	pointer-events: none;
}

.mf-command-hint {
	display: flex;
	align-items: baseline;
	gap: var(--mf-space-2);
	padding: 0 var(--mf-space-3);
	color: var(--mf-color-text);
	white-space: nowrap;
	opacity: 0.8;

	&.is-active {
		background: var(--mf-color-accent);
		color: var(--mf-color-background);
		font-weight: bold;
		opacity: 1;
	}
}

.mf-command-hint-kind {
	flex: 0 0 auto;
	width: 1.5em;
	text-align: center;
}

.mf-command-hint-label {
	flex: 0 0 auto;
}

.mf-command-hint-sub {
	flex: 1 1 auto;
	overflow: hidden;
	text-align: right;
	text-overflow: ellipsis;
}

.mf-command-hint-kind,
.mf-command-hint-sub {
	color: var(--mf-color-text-muted);
}

.mf-command-hint.is-active :is(.mf-command-hint-kind, .mf-command-hint-sub) {
	color: inherit;
}

@keyframes mf-command-blink {
	50% {
		color: var(--mf-color-text);
		background: transparent;
	}
}