.mf-subject-card {
	display: flex;
	align-items: stretch;
	position: relative;
	border: var(--mf-border);
	border-color: var(--mf-color-border-strong);
	background: var(--mf-color-accent-soft);
	font-family: var(--mf-font-mono);
}

/* Above the frame, centred: what the host pins there speaks for the whole card. */
.mf-subject-badge {
	position: absolute;
	top: calc(-1 * var(--mf-space-3));
	left: 50%;
	transform: translate(-50%, -100%);

	&:empty {
		display: none;
	}
}

/* The badge stands above the frame, so the card reserves its height plus the gap —
   only where there is one; a host drawing its own line above leaves the slot empty. */
.mf-subject-card:has(.mf-subject-badge:not(:empty)) {
	margin-top: calc(var(--mf-space-3) + var(--mf-subject-badge-height));
}

.mf-subject-step {
	flex: 0 0 auto;
	padding: 0;
	width: var(--mf-space-7);
	text-align: center;
	color: var(--mf-color-text-muted);
	font-size: 1.4em;

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

.mf-subject-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	gap: var(--mf-space-2);
	min-width: 0;
	padding: var(--mf-space-5) var(--mf-space-3);
	text-align: center;
}

.mf-subject-glyph {
	color: var(--mf-color-accent);
	font-size: 1.3em;
}

.mf-subject-headline {
	margin: 0;
	color: var(--mf-color-accent);
	font-size: 1.8em;
	letter-spacing: var(--mf-track-heading);
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.mf-subject-phonetic {
	margin: 0;
	color: var(--mf-color-text-muted);
	font-size: 1.25em;
}

.mf-subject-phonetic[hidden] {
	display: none;
}

.mf-subject-subline {
	margin: 0;
	color: var(--mf-color-text-muted);
}

.mf-subject-facts {
	display: flex;
	gap: var(--mf-space-8);
	justify-content: center;
	margin-top: var(--mf-space-3);
	padding-top: var(--mf-space-3);
	border-top: var(--mf-border);
	flex-wrap: wrap;
}

.mf-subject-fact {
	display: flex;
	flex-direction: column;
	gap: var(--mf-space-1);
}

.mf-subject-fact-label {
	color: var(--mf-color-text-muted);
	font-size: var(--mf-font-size-tiny);
	letter-spacing: var(--mf-track-caption);
	text-transform: uppercase;
}

.mf-subject-fact-value {
	color: var(--mf-color-text);
	font-size: var(--mf-font-size);
}

.mf-subject-actions {
	display: flex;
	align-items: center;
	gap: var(--mf-space-3);
	margin-top: var(--mf-space-3);
	flex-wrap: wrap;
	justify-content: center;

	&:empty {
		display: none;
	}
}

/* Parts one group of actions from the next. The host decides where it falls, and
   whether it is there at all. */
.mf-subject-actions-rule {
	align-self: stretch;
	border-inline-start: var(--mf-border);

	&[hidden] {
		display: none;
	}
}