/* Rendered document HTML: the runtime does not author these tags, it receives them,
   so everything here is an element selector under one scope. */
.mf-prose {
	color: var(--mf-color-text);
	line-height: var(--mf-font-line-height);
	overflow-wrap: anywhere;

	> * + * {
		margin-top: var(--mf-space-3);
	}

	h1,
	h2,
	h3,
	h4 {
		color: var(--mf-color-accent);
		font-size: var(--mf-font-size);
		font-weight: normal;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	a {
		color: var(--mf-color-accent);
		text-underline-offset: 0.2em;

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

	strong {
		color: var(--mf-color-accent-strong);
		font-weight: normal;
	}

	em {
		color: var(--mf-color-text);
		font-style: normal;
		text-decoration: underline dotted;
	}

	ul,
	ol {
		padding-inline-start: var(--mf-space-5);
		list-style: revert;
	}

	li + li {
		margin-top: var(--mf-space-1);
	}

	blockquote {
		border-inline-start: var(--mf-border-strong);
		padding-inline-start: var(--mf-space-3);
		color: var(--mf-color-text-muted);
	}

	code,
	pre {
		background: var(--mf-color-surface-raised);
		font-family: var(--mf-font-mono);
		font-size: var(--mf-font-size-small);
	}

	code {
		padding: 0 var(--mf-space-1);
	}

	/* Its own scroller: a wide block must not push the page sideways. */
	pre {
		padding: var(--mf-space-2);
		overflow-x: auto;
	}

	hr {
		border: none;
		border-top: var(--mf-border);
	}

	img {
		max-width: 100%;
		height: auto;
	}

	table {
		width: 100%;
		border-collapse: collapse;
		font-size: var(--mf-font-size-small);
	}

	th,
	td {
		border: var(--mf-border);
		padding: var(--mf-space-1) var(--mf-space-2);
		text-align: start;
	}

	th {
		color: var(--mf-color-text-muted);
		font-weight: normal;
	}
}