.container {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	height: 300px;
	background-color: var(--color-bg-high);
	border-radius: var(--radius-box);
	padding: var(--s-2-5) var(--s-3);
}

.legend {
	display: flex;
	gap: var(--s-4);
	justify-content: center;
	font-size: var(--font-xs);
	font-weight: var(--weight-semi);
	color: var(--color-text-high);
}

.legendItem {
	display: flex;
	align-items: center;
	gap: var(--s-1);
}

.swatch {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background-color: currentColor;
}

.alpha {
	color: var(--color-chart-alpha);
}

.bravo {
	color: var(--color-chart-bravo);
}

/* the SVG is sized to this box so the plot spans its full width, aligned with sibling timelines */
.plot {
	position: relative;
	flex: 1;
	min-height: 0;
}

.chart {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;

	&.interactive {
		cursor: crosshair;
		touch-action: pan-y;
	}
}

.gridLine {
	stroke: color-mix(in oklch, var(--color-text) 8%, transparent);
	stroke-width: 1;

	&.gridLineDashed {
		stroke-dasharray: 3 4;
	}

	&.gridLineZero {
		stroke: color-mix(in oklch, var(--color-text) 25%, transparent);
	}
}

.label {
	font-size: 10px;
	font-weight: var(--weight-semi);
	fill: var(--color-text-high);
}

.scoreLine {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.penaltyBand {
	fill: currentColor;
	fill-opacity: 0.22;
}

.penaltyEdge {
	fill: none;
	stroke: currentColor;
	stroke-opacity: 0.55;
	stroke-width: 1;
}

.controlLane {
	stroke: currentColor;
	stroke-width: 6;
	stroke-linecap: round;
}

.hoverLine {
	stroke: color-mix(in oklch, var(--color-text) 30%, transparent);
	stroke-width: 1;
}

.dot {
	fill: currentColor;
	stroke: var(--color-bg-high);
	stroke-width: 2;
}

.tooltip {
	position: absolute;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--s-0-5);
	translate: 0 -50%;
	padding: var(--s-1) var(--s-2);
	background-color: var(--color-bg);
	border: var(--border-style);
	border-radius: var(--radius-box);
	font-size: var(--font-xs);
	white-space: nowrap;
	pointer-events: none;
}

.tooltipTitle {
	font-weight: var(--weight-semi);
	color: var(--color-text-high);
}

.tooltipRow {
	display: flex;
	align-items: center;
	gap: var(--s-1-5);
	font-variant-numeric: tabular-nums;

	& .swatch {
		width: 8px;
		height: 8px;
	}
}