/* ABOUTME: Styles for the three-column tabbed data section. */
/* ABOUTME: CSS-only tab switching with radio inputs, responsive column layout. */
.data_tabs_three_col {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.5rem;
	row-gap: 0;
	align-items: flex-end;
	position: relative;
	width: 100%;
}
.data_tabs_three_col-item {
	display: contents;
}
.data_tabs_three_col-input {
	position: absolute;
	top: 0;
	opacity: 0;
	pointer-events: none;
	order: 0;
}
.data_tabs_three_col-tab {
	cursor: pointer;
	display: inline-flex;
	gap: 0.25rem;
	padding: 0.5rem 1rem;
	margin-block: 4px;
	order: 1;
	flex: 0 0 auto;
	white-space: nowrap;
	background-color: var(--color-regular-grey);
	color: var(--color-dark-blue);
	border-radius: 5px;
}
.data_tabs_three_col-input:checked + .data_tabs_three_col-tab {
	font-weight: 600;
	background-color: var(--color-regular-turquoise);
}
.data_tabs_three_col-input:focus-visible + .data_tabs_three_col-tab {
	outline: 2px solid var(--color-dark-blue);
	outline-offset: 2px;
}
.data_tabs_three_col-panel {
	display: none;
	padding-top: 1.5rem;
	order: 2;
	flex-basis: 100%;
}
.data_tabs_three_col-input:checked
	+ .data_tabs_three_col-tab
	+ .data_tabs_three_col-panel {
	display: block;
}
.data_tabs_three_col-columns {
	display: flex;
	gap: 2rem;
}
.data_tabs_three_col-columns,
.data_tabs_three_col-panel {
	width: 100%;
}
.data_tabs_three_col-columns .column {
	flex: 1;
	min-width: 0;
}

.data_tabs_three_col-heading {
	border-bottom: 1px solid currentColor;
	margin-bottom: 2rem;
	padding-bottom: 1rem;
}

.data_tabs_three_col-heading > * {
	font-weight: bold;
}

@media screen and (max-width: 768px) {
	.data_tabs_three_col-columns {
		flex-direction: column;
		gap: 1rem;
	}
}