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

.metrics-value {
	text-align: right;
}

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

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

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

	}

/* Reference range bar */
.metrics-bar-wrap {
	position: relative;
	width: 100%;
	min-width: 50px;
}

.metrics-bar {
	display: flex;
	width: 100%;
	height: 7px;
	border-radius: 4px;
	overflow: hidden;
	background: rgba(0,0,0,0.05);
}

	.metrics-bar-seg {
		height: 100%;
		width: 15%;
		opacity: 0.3;
	}

		/* Fixed 5-section layout red|yellow|green|yellow|red: the green anchor is the
		   wide middle, the four flanking zones are thin. Widths live here (not inline)
		   so the active-zone widening below stays pure CSS. */
		.metrics-bar-seg:nth-child(3) { width: 40%; }

		.metrics-bar-seg.status-optimal  { background-color: rgba(108,188,43,0.7); }
		.metrics-bar-seg.status-standard { background-color: rgba(246,196,69,0.7); }
		.metrics-bar-seg.status-abnormal { background-color: rgba(219,96,36,0.7); }

		/* Only the section containing the current value is shown at full opacity */
		.metrics-bar-seg.active { opacity: 1; }

		/* Widen an active out-of-range/standard zone so these thin bands stand out */
		.metrics-bar-seg.active.status-standard,
		.metrics-bar-seg.active.status-abnormal { width: 30%; }

	.metrics-bar-marker {
		--size: 16px;
		position: absolute;
		top: 50%;
		/* Inset the dot's travel by its radius so it never overhangs the bar edges */
		left: calc(var(--size) / 2 + (100% - var(--size)) * (var(--pos, 50) / 100));
		width: var(--size);
		height: var(--size);
		transform: translate(-50%, -50%);
		border-radius: 50%;
		border: 1.5px solid #fff;
		box-shadow: 0 1px 3px rgba(0,0,0,0.4);
		box-sizing: border-box;
	}

		.metrics-bar-marker.status-optimal  { background-color: rgb(108,188,43); }
		.metrics-bar-marker.status-standard { background-color: rgb(246,196,69); }
		.metrics-bar-marker.status-abnormal { background-color: rgb(219,96,36); }

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

		.metrics-bar {
			background: rgba(255,255,255,0.08);
		}

		.metrics-bar-marker {
			border-color: #2d2d2d;
			box-shadow: 0 1px 3px rgba(0,0,0,0.6);
		}

	}

/* 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%;
	}

}