.eac-chart,
.eah-responsive-chart {
	margin: 0;
	max-width: 100%;
	min-width: 0;
	overflow: visible;
	padding: 0;
}

.eah-responsive-chart figure {
	margin: 0;
	padding: 0;
}

.eah-responsive-chart figcaption {
	font-size: clamp(1.2rem, 2vw, 1.75rem);
	font-weight: 700;
	margin: 0;
	padding: 0;
}

.eah-chart-periods {
	--eah-chart-period-accent: var(--eah-chart-base, #f18500);
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
}

.eah-chart-periods button {
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font: inherit;
	padding: .45rem 1rem;
}

.eah-chart-periods button[aria-selected="true"] {
	background: var(--eah-chart-period-accent);
	border-color: var(--eah-chart-period-accent);
	color: #fff;
}

.eah-chart-periods--underline {
	align-items: stretch;
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	position: relative;
	width: 100%;
}

.eah-chart-periods--underline::after {
	background: var(--eah-chart-period-track, #dcdcde);
	bottom: 0;
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	right: 0;
}

.eah-chart-periods--underline button {
	border: 0;
	border-radius: 0;
	color: var(--eah-chart-period-normal, inherit);
	flex: 1 1 0;
	opacity: 1;
	padding: .45rem .25rem .65rem;
	position: relative;
	text-align: center;
	z-index: 1;
}

.eah-chart-periods--underline button::after {
	background: var(--eah-chart-period-active-line, var(--eah-chart-period-accent));
	bottom: 0;
	content: "";
	height: 4px;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
}

.eah-chart-periods--underline button:hover {
	color: var(--eah-chart-period-hover, var(--eah-chart-period-accent));
}

.eah-chart-periods--underline button[aria-selected="true"] {
	background: transparent;
	border: 0;
	color: var(--eah-chart-period-active, var(--eah-chart-period-accent));
	font-weight: 700;
	opacity: 1;
}

.eah-chart-periods--underline button[aria-selected="true"]::after {
	opacity: 1;
}

.eah-chart-periods--segmented {
	border: 1px solid var(--eah-chart-period-accent);
	border-radius: 999px;
	gap: 0;
	max-width: 100%;
	overflow: hidden;
	width: fit-content;
}

.eah-chart-periods--segmented button {
	border: 0;
	border-radius: 0;
}

.eah-chart-periods--segmented button + button {
	border-left: 1px solid var(--eah-chart-period-accent);
}

.eah-chart-periods button:focus-visible {
	outline: 3px solid #ffdd00;
	outline-offset: 2px;
}

.eah-chart-canvas {
	position: relative;
	width: 100%;
	height: clamp(300px, 46vw, 540px);
	margin: 0;
	min-width: 0;
	min-height: 300px;
	overflow: visible;
	padding: 0;
}

.eah-chart-canvas canvas {
	display: block;
	margin: 0;
	max-width: 100%;
	padding: 0;
}

@media (max-width: 767px) {
	.eah-chart-canvas {
		height: clamp(260px, 88vw, 420px);
		min-height: 260px;
	}
	.eah-chart-periods {
		display: grid;
	}

	.eah-chart-periods button {
		border-radius: 4px;
		text-align: left;
		width: 100%;
	}

	.eah-chart-periods--underline {
		display: flex;
	}

	.eah-chart-periods--underline button {
		border-radius: 0;
		text-align: center;
	}

	/* The canvas moves between the buttons on small screens, so the segmented
	   group drops its shared frame to avoid clipping the diagram. */
	.eah-chart-periods--segmented {
		border: 0;
		border-radius: 0;
		gap: .5rem;
		overflow: visible;
		width: auto;
	}

	.eah-chart-periods--segmented button,
	.eah-chart-periods--segmented button + button {
		border: 1px solid var(--eah-chart-period-accent);
	}

	.eah-chart-periods .eah-chart-canvas {
		margin: 0;
	}
}