.herbarium-bars {
	display: grid;
	gap: 1.25rem;
	padding: 1rem 0;
	margin: 0;
	list-style: none;
}
.herbarium-bars li {
	display: grid;
	grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr) 6rem;
	align-items: center;
	gap: .8rem;
}
.herbarium-bars li:first-child {
	padding-bottom: 1.1rem;
	border-bottom: 1px solid #d7e0e8;
	font-weight: 700;
}
.herbarium-bar-label { font-size: .9rem; line-height: 1.4; }
.herbarium-bars li:not(:first-child) .herbarium-bar-label {
	padding-left: .7rem;
	border-left: 2px solid #b7d5cb;
}
.herbarium-bar-value { font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.herbarium-meter,
.herbarium-meter-pending {
	display: block;
	width: 100%;
	height: .6rem;
	border: 0;
	border-radius: 999px;
	background: #dcefe9;
}
.herbarium-meter { appearance: none; -webkit-appearance: none; background: transparent; }
.herbarium-meter::-webkit-meter-inner-element { display: block; height: 100%; }
.herbarium-meter::-webkit-meter-bar { height: 100%; border: 0; background: #dcefe9; border-radius: 999px; box-shadow: none; }
.herbarium-meter::-webkit-meter-optimum-value { background: var(--herbarium-bar-color); border-radius: 999px; }
.herbarium-meter::-moz-meter-bar { background: var(--herbarium-bar-color); border-radius: 999px; }
.herbarium-meter-1 { --herbarium-bar-color: #007c6c; }
.herbarium-meter-2 { --herbarium-bar-color: #2768bf; }
.herbarium-meter-3 { --herbarium-bar-color: #b05a00; }
.herbarium-meter-4 { --herbarium-bar-color: #7b4bb2; }
.herbarium-meter-5 { --herbarium-bar-color: #c43d4d; }
.herbarium-meter:focus-visible { outline: 3px solid #005a50; outline-offset: 4px; }
html.reflora-high-contrast .herbarium-meter:focus-visible { outline-color: #ffffff; }
html.reflora-high-contrast .herbarium-bars li:first-child,
html.reflora-high-contrast .herbarium-bars li:not(:first-child) .herbarium-bar-label { border-color: #ffffff; }
@media (max-width: 575.98px) {
	.herbarium-bars li { grid-template-columns: minmax(0, 1fr) 6rem; gap: .65rem; }
	.herbarium-bar-label { grid-column: 1 / -1; }
	.herbarium-bars li:not(:first-child) .herbarium-bar-label { margin-top: .2rem; }
}