/* Datawrapper-informed bars: one hue, zero baseline, restrained grid, direct values. */
.downhill-ranking { max-width: 64rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px dashed var(--site-line); }
.downhill-ranking h2 { font-size: 1.25rem; line-height: 1.4; margin: 0 0 .6rem; }
.ranking-subtitle { max-width: 90ch; font-size: .85rem; margin: 0 0 1.5rem; }
.ranking-plot { --ranking-label-width: clamp(14rem, 28vw, 23rem); --ranking-gap: 1rem; --ranking-value-gutter: 4.5rem; position: relative; }
.ranking-grid { position: absolute; left: calc(var(--ranking-label-width) + var(--ranking-gap)); right: var(--ranking-value-gutter); top: 1.75rem; bottom: 0; border-left: 1px solid var(--site-line); background-image: linear-gradient(to right, color-mix(in srgb, var(--site-line) 45%, transparent) 1px, transparent 1px); background-size: calc(100% / 6) 100%; pointer-events: none; }
.ranking-axis { position: relative; height: 1.75rem; margin-left: calc(var(--ranking-label-width) + var(--ranking-gap)); margin-right: var(--ranking-value-gutter); color: var(--site-muted); font-size: .7rem; font-variant-numeric: tabular-nums; }
.ranking-axis span { position: absolute; transform: translateX(-50%); }
.ranking-list { position: relative; display: grid; gap: .9rem; list-style: none; margin: 0; padding: 0; }
body .ranking-row, body .ranking-row:hover { width: 100%; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--color-global-text); font: inherit; text-align: left; cursor: pointer; }
body .ranking-row:disabled { cursor: default; opacity: 1; }
.ranking-row.is-map-active .ranking-bar { background: var(--color-accent); }
.ranking-row.is-map-active .ranking-name { color: var(--color-accent); }
.ranking-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.ranking-row { display: grid; grid-template-columns: var(--ranking-label-width) minmax(0, 1fr); column-gap: var(--ranking-gap); align-items: center; min-height: 2rem; }
.ranking-name { text-align: right; font-family: system-ui, sans-serif; font-size: .875rem; line-height: 1.45; overflow-wrap: anywhere; }
.ranking-bar-cell { display: block; min-width: 0; padding-right: var(--ranking-value-gutter); }
.ranking-bar-track { display: block; position: relative; height: 1.75rem; }
.ranking-bar { position: absolute; left: 0; top: .25rem; bottom: .25rem; width: var(--bar-width); background: var(--color-link); }
.ranking-value { position: absolute; left: calc(var(--bar-width) + .5rem); top: 50%; transform: translateY(-50%); color: var(--color-global-text); background: var(--color-global-bg); padding-inline: .15rem; font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ranking-note, .ranking-source { max-width: 100ch; font-size: .75rem; color: var(--site-muted); }
.ranking-note { margin: 1.25rem 0 .65rem; }
.ranking-source { margin: .65rem 0; }
.ranking-method { max-width: 100ch; font-size: .78rem; }
.ranking-method p { overflow-wrap: anywhere; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.map-ranking-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.map-ranking-layout > * { min-width: 0; }
.map-ranking-layout .map-card { border-color: color-mix(in srgb, var(--site-line) 70%, transparent); }
.map-ranking-layout .downhill-ranking { margin: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--site-line) 70%, transparent); border-radius: 2px; background: var(--site-surface); container-type: inline-size; }
.map-ranking-layout .downhill-ranking h2 { font-size: .9rem; line-height: 1.3; margin: 0; padding: .8rem 1rem; border-bottom: 1px solid var(--site-line); }
.map-ranking-layout .ranking-subtitle, .map-ranking-layout .ranking-interaction { margin: .8rem 1rem; font-size: .75rem; }
.map-ranking-layout .ranking-plot { margin: 1rem; }
.map-ranking-layout .ranking-note, .map-ranking-layout .ranking-source, .map-ranking-layout .ranking-method { margin-left: 1rem; margin-right: 1rem; }
.map-ranking-layout .ranking-method { margin-bottom: 1rem; }
.ranking-caveat { margin: .75rem 1rem 1rem; padding-top: .65rem; border-top: 1px solid var(--site-line); color: var(--site-muted); font: 12px/1.5 system-ui, sans-serif; }
.comparison-notes { grid-column: 1 / -1; border-top: 0; padding-top: 0; }
.comparison-caption { grid-column: 1 / -1; max-width: 100ch; margin: 0; color: var(--site-muted); font: 12px/1.6 system-ui, sans-serif; }
.map-ranking-layout .map-card, .map-ranking-layout .downhill-ranking { border: 0; border-radius: 0; background: transparent; }
.map-ranking-layout .map-card { overflow: visible; }
.map-ranking-layout .map-heading, .map-ranking-layout .downhill-ranking h2 { margin: 0 0 .6rem; padding: 0; border: 0; font-size: .8rem; font-weight: 500; color: var(--site-muted); }
.map-ranking-layout .ranking-plot { margin: .75rem 0 0; }
.map-ranking-layout .ranking-name { background: transparent; }
.map-ranking-layout .downhill-ranking { align-self: center; }
.method-notes { font-size: .78rem; margin-top: .75rem; }
.method-notes > h2 { margin-top: 1rem; }
@media (min-width: 1100px) {
 .map-ranking-layout { align-items: stretch; }
 .map-ranking-layout .map-card { display: flex; flex-direction: column; }
 .map-ranking-layout #map { flex: 1 0 clamp(320px, 22vw, 420px); height: auto; min-height: clamp(320px, 22vw, 420px); }
 .map-ranking-layout .downhill-ranking { border-top-style: dashed; }
 .map-ranking-layout .ranking-subtitle, .map-ranking-layout .ranking-interaction { margin-block: .6rem; }
}
@media (max-width: 1099px) { .map-ranking-layout { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 600px) {
 .ranking-plot { --ranking-label-width: 0px; --ranking-gap: 0px; }
 .ranking-row { grid-template-columns: minmax(0, 1fr); row-gap: .2rem; }
 .ranking-name { text-align: left; position: relative; z-index: 1; background: var(--site-surface); font-size: .8rem; }
 .ranking-list { gap: .65rem; }
 .ranking-value { font-size: .8rem; }
}
@media (max-width: 640px) {
  .ranking-plot { --ranking-label-width: 0px; --ranking-gap: 0px; }
  .ranking-row { grid-template-columns: minmax(0, 1fr); row-gap: .2rem; }
  .ranking-name { text-align: left; position: relative; z-index: 1; background: var(--color-global-bg); font-size: .8rem; }
  .ranking-list { gap: 1rem; }
  .ranking-value { font-size: .8rem; }
}
/* Desktop pair: dense comparison rows, not the narrow-screen stacked layout. */
@media (min-width: 1100px) {
 .map-ranking-layout .ranking-plot { --ranking-label-width: clamp(10rem, 14vw, 12rem); --ranking-gap: .75rem; --ranking-value-gutter: 3.5rem; margin-block: .75rem; }
 .map-ranking-layout .ranking-row { grid-template-columns: var(--ranking-label-width) minmax(0, 1fr); min-height: 30px; row-gap: 0; }
 .map-ranking-layout .ranking-name { text-align: right; font-size: 13px; line-height: 1.35; background: transparent; }
 .map-ranking-layout .ranking-value { font-size: .75rem; }
 .map-ranking-layout .ranking-list { gap: .25rem; }
 .map-ranking-layout .ranking-axis span:nth-child(even) { visibility: hidden; }
 .map-ranking-layout .ranking-bar-track { height: 1.4rem; }
 .map-ranking-layout .ranking-bar { top: .2rem; bottom: .2rem; }
}
.map-ranking-layout .downhill-ranking h2 { font-size: 1rem; font-weight: 700; color: var(--color-global-text); margin-bottom: .25rem; }
.map-ranking-layout .ranking-subtitle { margin: 0 0 1rem; color: var(--site-muted); font: 12px/1.5 system-ui, sans-serif; }