/*
 * Pre-enhancement affordance: only shown when JS is available (body.js),
 * so a plain-text word never looks clickable if frontend.js hasn't run.
 */
.js .stealth-tooltip {
	text-decoration: underline dotted;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* Icon-only trigger button, inserted right after the word. */
.stealth-tooltip-trigger {
	display: inline-flex;
	align-items: center;
	background: none;
	border: none;
	padding: 0;
	margin-inline-start: 0.2em;
	cursor: pointer;
	color: inherit;
	vertical-align: middle;
}

.stealth-tooltip-trigger:hover {
	border: none;
}

.stealth-tooltip-trigger:is(:focus, :focus-visible) {
	background: none;
	color: inherit;
	border: none;
}

.stealth-tooltip-trigger svg {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	fill: currentColor;
}

/*
 * Popover panel. position-anchor ties it to its trigger button via a
 * matching anchor-name set at runtime in frontend.js (progressive
 * enhancement: browsers without CSS anchor positioning still open the
 * popover, just without the tether to the icon).
 */
[popover].stealth-tooltip-panel {
	position-area: bottom span-right;
	margin-top: 0.35em;
	max-width: 20rem;
	padding: 0.75em 1em;
	border: 1px solid CanvasText;
	border-radius: 4px;
	background: Canvas;
	color: CanvasText;
	font-size: 0.9em;
	line-height: 1.4;
}