.recipe-glossary { display: inline; position: relative; }
.recipe-glossary__term { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: .08em; text-underline-offset: .16em; }
.recipe-glossary__tooltip {
	background: #242821;
	border-radius: .35rem;
	bottom: calc(100% + .55rem);
	box-shadow: 0 .25rem .9rem rgb(0 0 0 / 18%);
	color: #fff;
	font-size: .9rem;
	font-weight: 400;
	left: 50%;
	line-height: 1.45;
	max-width: calc(100vw - 2rem);
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translate(-50%, .2rem);
	transition: opacity .12s ease, transform .12s ease;
	width: 19rem;
	z-index: -1;
}
.recipe-glossary:hover .recipe-glossary__tooltip,
.recipe-glossary:focus-within .recipe-glossary__tooltip {
	opacity: 1;
	padding: .6rem .7rem;
	transform: translate(-50%, 0);
	z-index: 20;
}
.recipe-glossary-box { padding-block: 1.1rem; }
.recipe-glossary-box h2 { margin-bottom: .7rem; }
.recipe-glossary-list {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .9rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.recipe-glossary-list li { margin: 0; }
.recipe-glossary-list .recipe-glossary__term { font-weight: 600; }
@media (max-width: 36rem) {
	.recipe-glossary__tooltip { left: 0; transform: translate(0, .2rem); width: min(19rem, calc(100vw - 2rem)); }
	.recipe-glossary:hover .recipe-glossary__tooltip,
	.recipe-glossary:focus-within .recipe-glossary__tooltip { transform: translate(0, 0); }
}