.metrics-table th,
.metrics-table td {
	vertical-align: middle;
}

.metrics-value.optimal {
	background-color: rgba(108,188,43,0.20);
}

.metrics-value.standard {
	background-color: rgba(246,196,69,0.30);
}

.metrics-value.abnormal {
	background-color: rgba(219,96,36,0.20);
}

.metrics-table a {
	color: #333;
	display: block;
}

/* Directional arrows for non-optimal values */
.metrics-value.value {
	position: relative;
	padding-right: 28px;
}

/* Single arrow for standard, double for abnormal */
.metrics-value.value:before,
.metrics-value.value:after {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	font-weight: normal;
	font-family: monospace;
	line-height: 1;
	font-size: 1.3em;
	pointer-events: none;
}

	@media (prefers-color-scheme: dark) {

		.metrics-table a {
			color: #ddd;
		}

	}

/* Up/Down arrows using rotated right-arrow */
.metrics-value.value.standard.dir-low:before { content: '➔'; transform: translateY(-50%) rotate(90deg); }
.metrics-value.value.standard.dir-high:before { content: '➔'; transform: translateY(-50%) rotate(-90deg); }

.metrics-value.value.abnormal.dir-low:before { content: '➔'; transform: translateY(-50%) rotate(90deg); }
.metrics-value.value.abnormal.dir-low:after { content: '➔'; right: 16px; transform: translateY(-50%) rotate(90deg); }
.metrics-value.value.abnormal.dir-high:before { content: '➔'; transform: translateY(-50%) rotate(-90deg); }
.metrics-value.value.abnormal.dir-high:after { content: '➔'; right: 16px; transform: translateY(-50%) rotate(-90deg); }

/* Category index styling */
.category-index {
	margin-bottom: 15px;
	display: flex;
	flex-wrap: wrap;
	gap: 5px 5px;
}

.category-index .category-link {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 5px;
	background: rgba(0,0,0,0.05);
	color: #333;
	font-size: 0.9em;
	transition: filter 0.2s, box-shadow 0.2s, background 0.2s;
	box-shadow: inset 0 -1px rgba(0,0,0,0.1);
	white-space: nowrap;
}

.category-index .category-link:hover,
.category-index .category-link:focus {
	filter: brightness(1.05);
	background: rgba(0,0,0,0.07);
}

	@media (prefers-color-scheme: dark) {

		.category-index .category-link {
			background: rgba(255,255,255,0.1);
			color: #ddd;
		}

			.category-index .category-link:hover,
			.category-index .category-link:focus {
				filter: brightness(1.05);
				background: rgba(255,255,255,0.15);
			}

	}

@media (max-width: 767px) {

	.category-index {
		padding: 0 20px;
		flex-wrap: nowrap;
		overflow-x: auto;
		-ms-overflow-style: none;
		scrollbar-width: none;

		-webkit-mask-image: linear-gradient(
			to right,
			transparent 0px,
			black 20px,
			black calc(100% - 20px),
			transparent 100%
		);
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-size: 100% 100%;

		mask-image: linear-gradient(
			to right,
			transparent 0px,
			black 20px,
			black calc(100% - 20px),
			transparent 100%
		);
		mask-repeat: no-repeat;
		mask-size: 100% 100%;
	}

}