.herbarium-ranking { margin: 1rem 0 0; }
.herbarium-ranking-scroll { overflow-x: auto; border-radius: .4rem; padding: .5rem 0; }
.herbarium-ranking-scroll:focus-visible,
.herbarium-ranking-bar:focus-visible,
.herbarium-ranking-link:focus-visible { outline: 3px solid #005a50; outline-offset: 3px; }
.herbarium-ranking-chart { display: block; width: 100%; min-width: 600px; margin: auto; }
.herbarium-ranking-grid { stroke: #d4e2de; stroke-width: 1; stroke-dasharray: 3 5; }
.herbarium-ranking-chart text { fill: #002b50; text-anchor: middle; font-family: inherit; }
.herbarium-ranking-chart .herbarium-ranking-axis { text-anchor: end; font-size: 12px; }
.herbarium-ranking [data-color="1"] { --herbarium-color: #007c6c; --herbarium-contrast-color: #ffdd00; }
.herbarium-ranking [data-color="2"] { --herbarium-color: #326a9a; --herbarium-contrast-color: #80cfff; }
.herbarium-ranking [data-color="3"] { --herbarium-color: #b15c00; --herbarium-contrast-color: #ffc080; }
.herbarium-ranking [data-color="4"] { --herbarium-color: #7a4eb2; --herbarium-contrast-color: #d5b4ff; }
.herbarium-ranking [data-color="5"] { --herbarium-color: #bb3a51; --herbarium-contrast-color: #ff9bac; }
.herbarium-ranking [data-color="6"] { --herbarium-color: #687600; --herbarium-contrast-color: #cddc80; }
.herbarium-ranking [data-color="7"] { --herbarium-color: #007a92; --herbarium-contrast-color: #87e3ed; }
.herbarium-ranking [data-color="8"] { --herbarium-color: #9a4f35; --herbarium-contrast-color: #edc1a8; }
.herbarium-ranking [data-color="9"] { --herbarium-color: #9a4384; --herbarium-contrast-color: #ecaee3; }
.herbarium-ranking [data-color="10"] { --herbarium-color: #52657b; --herbarium-contrast-color: #d5deef; }
.herbarium-ranking-column { fill: var(--herbarium-color, #64748b); }
.herbarium-ranking-column[data-origin="foreign"] { stroke: #294963; stroke-width: 1.5; stroke-dasharray: 4 2; }
.herbarium-ranking-bar:hover .herbarium-ranking-column,
.herbarium-ranking-bar:focus .herbarium-ranking-column { filter: brightness(.88); }
.herbarium-ranking-count { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.herbarium-ranking-chart .herbarium-ranking-percent { fill: #476274; font-size: 13px; font-variant-numeric: tabular-nums; }
.herbarium-ranking-code { font-size: 16px; font-weight: 700; }
.herbarium-ranking-link text { font-size: 12px; text-decoration: underline; }
.herbarium-ranking-legend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem .75rem; max-width: 28rem; list-style: none; padding: 0; margin: .5rem auto .75rem; color: #294963; font-size: .85rem; }
.herbarium-ranking-legend li { display: flex; align-items: center; justify-content: center; gap: .45rem; }
.herbarium-ranking-swatch { display: inline-block; flex-shrink: 0; width: .85rem; height: .85rem; border-radius: .2rem; background: var(--herbarium-color, #64748b); }
.herbarium-ranking-swatch[data-origin="foreign"] { border: 1.5px dashed #294963; }
.herbarium-ranking-note { margin: .6rem 0 0; font-size: .8rem; text-align: center; color: #294963; }
.herbarium-ranking-hint { display: none; margin: .5rem 0 0; font-size: .8rem; text-align: center; color: #294963; }
@media (max-width: 1399.98px) { .herbarium-ranking-hint { display: block; } }
@media (max-width: 575.98px) { .herbarium-ranking-legend { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html.reflora-high-contrast .herbarium-ranking-chart text,
html.reflora-high-contrast .herbarium-ranking-chart .herbarium-ranking-percent { fill: #ffffff; }
html.reflora-high-contrast .herbarium-ranking-grid { stroke: #ffffff; }
html.reflora-high-contrast .herbarium-ranking-column { fill: var(--herbarium-contrast-color, #ffffff); }
html.reflora-high-contrast .herbarium-ranking-column[data-origin="foreign"] { stroke: #ffffff; }
html.reflora-high-contrast .herbarium-ranking-swatch { background: var(--herbarium-contrast-color, #ffffff); }
html.reflora-high-contrast .herbarium-ranking-swatch[data-origin="foreign"] { border-color: #ffffff; }
html.reflora-high-contrast .herbarium-ranking-scroll:focus-visible,
html.reflora-high-contrast .herbarium-ranking-bar:focus-visible,
html.reflora-high-contrast .herbarium-ranking-link:focus-visible { outline-color: #ffffff; }
html.reflora-high-contrast .herbarium-ranking-note,
html.reflora-high-contrast .herbarium-ranking-hint,
html.reflora-high-contrast .herbarium-ranking-legend { color: #ffffff; }