/* Tiger-cat range map inside the species archive */
.range-panel{margin-top:56px}
.range-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:55px;align-items:start}
.range-map{position:relative;aspect-ratio:1080/1020;border:1px solid var(--rule);background:#fff;overflow:hidden;cursor:crosshair;touch-action:manipulation}
.range-map.is-pointing{cursor:pointer}
.range-map>img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.range-layers,.range-samples{position:absolute;inset:0;pointer-events:none}
.range-layer{position:absolute;inset:0;background-color:var(--c);-webkit-mask:var(--mask) center/100% 100% no-repeat;mask:var(--mask) center/100% 100% no-repeat;opacity:.85;transition:background-color .6s ease,opacity .25s ease}
.range-layer[data-id=hatch]{background-image:repeating-linear-gradient(45deg,var(--c) 0 5px,var(--c2) 5px 10px)}
.range-layer[data-id=unassigned]{opacity:.5}
.range-layer.is-old{background-color:#9aa19c;background-image:none}
.range-map.has-focus .range-layer:not(.is-focus){opacity:.16}
.range-map.has-focus .range-layer.is-focus{opacity:.95}
.range-samples i{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#202020;box-shadow:0 0 0 2px #fff}
.range-samples b{position:absolute;left:8px;top:-7px;font:600 10px var(--mono);white-space:nowrap;text-shadow:0 0 3px #fff,0 0 3px #fff}
.range-north{position:absolute;right:12px;top:10px;font:11px var(--mono);color:var(--muted);pointer-events:none}
.range-tip{position:absolute;transform:translate(12px,-120%);white-space:nowrap;pointer-events:none;font:12px var(--sans);background:#202020;color:#fff;padding:4px 9px}

.range-years{display:inline-flex;border:1px solid var(--ink)}
.range-years button{font:13px var(--mono);padding:8px 18px;background:#fff;color:var(--ink);border:0;cursor:pointer}
.range-years button+button{border-left:1px solid var(--ink)}
.range-years button[aria-pressed=true]{background:var(--ink);color:#fff}
.range-lede{font:14px/1.8 var(--sans);margin:20px 0 0;min-height:76px}
.range-lede b{font-weight:600}
.range-legend{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--rule)}
.range-legend li{border-bottom:1px solid var(--rule)}
.range-legend button{display:grid;grid-template-columns:14px 1fr auto;gap:12px;align-items:center;width:100%;padding:10px 0;background:none;border:0;text-align:left;font:13px var(--sans);color:var(--ink);cursor:pointer}
.range-legend button:hover,.range-legend button[aria-current=true]{background:#f6f6f6}
.range-legend button[aria-current=true] span{font-weight:600}
.range-legend i{width:14px;height:14px;background:var(--c)}
.range-legend .is-stripe i{background:repeating-linear-gradient(45deg,var(--c) 0 3px,var(--c2) 3px 6px)}
.range-legend small{font:italic 12px var(--mono);color:var(--muted)}
.range-check{display:flex;align-items:center;gap:8px;margin-top:16px;font:12px var(--sans);color:var(--muted);cursor:pointer}
.range-check input{accent-color:var(--ink)}
.range-source{font:11px/1.8 var(--sans);color:var(--muted);margin:18px 0 0}
.range-source a{color:inherit;text-decoration:underline;text-underline-offset:2px}

@media (max-width:1000px){.range-grid{grid-template-columns:1fr;gap:28px}}
@media (prefers-reduced-motion:reduce){.range-layer{transition:none}}