legend {
  position: relative;
  display: inline-block;
}

/* Tooltip styling */
.tooltip {
	visibility: hidden;
	width: 200px;
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 4px;
	padding: 8px;
	position: absolute;
	z-index: 10;
	bottom: 125%; /* Position above legend */
	left: -20%;
	opacity: 0;
	transition: opacity 0.3s, visibility 0.3s;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	font-size: small;
}

/* Arrow pointing down to the legend */
.tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 10px 10px 0 10px;
	border-style: solid;
	border-color: #333 transparent transparent transparent;
}

/* Show tooltip on legend hover only for the first fieldset */
fieldset:first-of-type legend:hover .tooltip {
	visibility: visible;
	opacity: 1;
}