/**
 * Hover definition card for glossary terms marked inside running text.
 * Markup: <a class="csm-term" data-py data-en data-def href="...">
 */

.csm-term {
	color: var(--csm-stone, #2F5D62);
	border-bottom: 1px dashed rgba(47, 93, 98, .55);
	text-decoration: none;
	cursor: help;
	transition: .12s;
}
.csm-term:hover {
	color: var(--csm-cinnabar, #9E2B25);
	border-bottom-color: var(--csm-cinnabar, #9E2B25);
	background: rgba(158, 43, 37, .05);
}

.csm-tip {
	position: fixed;
	z-index: 110;
	max-width: 300px;
	background: var(--csm-ink, #1F1D19);
	color: var(--csm-paper, #FBF8F1);
	border-radius: 4px;
	padding: 13px 16px;
	font-size: 13px;
	line-height: 1.6;
	box-shadow: 0 10px 32px rgba(31, 29, 25, .28);
	opacity: 0;
	pointer-events: none;
	transition: opacity .14s;
}
.csm-tip.is-on { opacity: 1; }
.csm-tip .w { font-family: var(--csm-han, serif); font-size: 18px; font-weight: 600; margin-bottom: 2px; }
.csm-tip .p { font-size: 11.5px; color: rgba(251, 248, 241, .6); letter-spacing: .08em; margin-bottom: 7px; }
.csm-tip .e { font-weight: 500; margin-bottom: 5px; color: #F3EDDF; }
.csm-tip .d { color: rgba(251, 248, 241, .78); }

@media (hover: none) {
	.csm-term { border-bottom-style: solid; }
}