/* Worn by whatever `speakable()` has wired, wherever it sits — a card's reading line or
   a sheet's; the surface keeps its own resting colour. */
.mf-speakable {
	cursor: pointer;

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

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

/* Under reduced motion the global rule stops the animation; the tint is the cue that
   survives, which is the whole of what it has to say. */
.mf-speakable.is-speaking {
	color: var(--mf-color-accent);
	animation: mf-speaking 900ms ease-in-out infinite;
}

@keyframes mf-speaking {
	50% {
		opacity: 0.45;
	}
}