/* Theme tokens: the map was built on the Lodge site, which defines these
   globally; this site doesn't, so they're scoped to the map here. */
.hr-map{--bush:#26362B;--sage:#4F7358;--timber:#6B4A34;--mist-warm:#E7E3D6;
  --body:'Cabin',sans-serif;--display:'Cabin',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
/* Interactive Hump Ridge Track map, see hump-ridge-map.js */
.hr-map{margin-top:24px;}
.hr-map__bar{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px;}
.hr-map__btn{flex:1 1 0; min-width:84px; padding:10px 14px; border:1px solid var(--bush); border-radius:2px;
  background:transparent; color:var(--bush); font-family:var(--body); font-weight:600; font-size:15px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background .15s, color .15s;}
.hr-map__btn:hover{background:rgba(38,54,43,.08);}
.hr-map__btn.is-active{background:var(--bush); color:#FFFCF7;}
a.hr-map__btn{text-decoration:none; text-align:center;}  /* day-walk pages: the bar links to the other walks */
.hr-map__btn-short{display:none;}
@media (max-width:640px){.hr-map__btn-full{display:none;} .hr-map__btn-short{display:inline;}}
.hr-map__btn[data-3d]{flex:0 0 auto; border-style:dashed;}
.hr-map__btn[data-3d].is-active{border-style:solid;}
.hr-map__swatch{width:12px; height:4px; border-radius:2px; flex-shrink:0; box-shadow:0 0 0 1px rgba(0,0,0,.15);}
.hr-map__canvas{height:560px; width:100%; border-radius:2px; overflow:hidden; background:var(--mist-warm);}
.hr-map__main{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:stretch;}
.hr-map__wrap{position:relative; min-width:0;}
/* Route list beside the map, where the sidebar used to be */
.hr-map__list{background:#FFFCF7; border:1px solid var(--mist-warm); border-radius:2px; padding:14px 12px; overflow-y:auto;
  max-height:560px;}
.hr-map__layers{position:absolute; top:10px; left:10px; z-index:2; display:flex; background:#FFFCF7; border-radius:4px;
  box-shadow:0 0 0 2px rgba(0,0,0,.1); overflow:hidden;}
.hr-map__layer{padding:6px 12px; border:0; background:transparent; color:var(--bush); font-family:var(--body);
  font-weight:600; font-size:13px; cursor:pointer;}
.hr-map__layer:hover{background:rgba(38,54,43,.08);}
.hr-map__layer.is-active{background:var(--bush); color:#FFFCF7;}
/* Big moon that crosses the map during the full loop's overnight stops (positioned by JS) */
.hr-map__moon{position:absolute; left:50%; top:50%; z-index:2; width:140px; height:140px; pointer-events:none;
  filter:drop-shadow(0 0 18px rgba(243,227,162,.55));}
.hr-map__moon svg{width:100%; height:100%; display:block; fill:#F3E3A2; stroke:#F3E3A2; stroke-width:.5;}
.hr-map__pin{display:flex; align-items:center; gap:6px; pointer-events:none;}
.hr-map__pin.is-hidden{visibility:hidden;}
.hr-map__hut{display:flex; align-items:center; justify-content:center; width:26px; height:26px; flex-shrink:0; border-radius:50%;
  background:var(--bush); color:#FFFCF7; border:2px solid #FFFCF7; box-shadow:0 1px 4px rgba(0,0,0,.4);}
.hr-map__hut{position:relative;}
.hr-map__hut svg{width:15px; height:15px; display:block;}
/* Overnight: z's drift up and to the left from the hut, one after another */
.hr-map__zzz{position:absolute; left:2px; bottom:18px; width:44px; height:50px; pointer-events:none;
  opacity:0; transition:opacity .25s;}
.hr-map__zzz.is-on{opacity:1;}
.hr-map__zzz span{position:absolute; left:0; bottom:0; font:700 22px/1 var(--body); color:#FFF3C4;
  text-shadow:0 0 8px rgba(243,227,162,.9), 0 1px 3px rgba(0,0,0,.8); opacity:0;}
.hr-map__zzz.is-on span{animation:hr-zzz 1.1s ease-out infinite;}
.hr-map__zzz.is-on span:nth-child(2){animation-delay:.3s;}
.hr-map__zzz.is-on span:nth-child(3){animation-delay:.6s;}
@keyframes hr-zzz{
  0%{transform:translate(0,0) scale(.6) rotate(10deg); opacity:0;}
  20%{opacity:1;}
  100%{transform:translate(-26px,-38px) scale(1.4) rotate(-8deg); opacity:0;}
}
/* Hiker marker blinking at the start before the walk sets out, and at the lodge overnight (matches the map's head circle) */
.hr-map__hiker{width:18px; height:18px; border-radius:50%; background:var(--hiker, #DC2626); border:3px solid #FFFCF7;
  box-sizing:border-box; box-shadow:0 1px 4px rgba(0,0,0,.4); pointer-events:none; visibility:hidden; z-index:3;}
.hr-map__hiker.is-on{visibility:visible; animation:hr-hiker .5s ease-in-out infinite;}
@keyframes hr-hiker{ 0%,100%{opacity:1;} 50%{opacity:.1;} }
/* Green waypoint markers, after the official route map */
.hr-map__wp{display:none;}
.hr-map__wp.is-passed{display:block;}
.hr-map__wp .hr-map__badge{position:static; display:flex; min-width:24px; height:24px; font-size:12px;
  animation:hr-map-pop .35s ease-out;}
.hr-map__badge{position:absolute; top:-9px; right:-12px; display:none; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#8CC63F; color:#182018;
  border:2px solid #FFFCF7; box-shadow:0 1px 3px rgba(0,0,0,.35); font-family:var(--body); font-weight:700;
  font-size:10px; line-height:1; white-space:nowrap;}
.hr-map__pin.is-passed .hr-map__badge{display:flex; animation:hr-map-pop .35s ease-out;}
@keyframes hr-map-pop{0%{transform:scale(0);} 70%{transform:scale(1.2);} 100%{transform:scale(1);}}
/* Unnumbered places and toilets, from the official topo map */
.hr-map__poi, .hr-map__wc{display:none;}
/* animate the children: MapLibre positions the marker element itself with transform */
.hr-map__poi.is-passed{display:flex; align-items:center; gap:5px;}
.hr-map__poi.is-passed > span{animation:hr-map-pop .35s ease-out;}
.hr-map__poi--left{flex-direction:row-reverse;}
.hr-map__poi-dot{display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%;
  background:#26362B; color:#FFFCF7; border:2px solid #FFFCF7; box-shadow:0 1px 3px rgba(0,0,0,.35); flex-shrink:0;}
.hr-map__poi-dot svg{width:12px; height:12px; display:block;}
.hr-map__poi-label{font-family:var(--body); font-size:11px; font-weight:600; color:#FFFCF7; white-space:nowrap;
  text-shadow:0 0 3px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.6);}
.hr-map__wc.is-passed{display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:3px;
  background:#1f2a22; color:#FFFCF7; border:1.5px solid #FFFCF7; box-shadow:0 1px 3px rgba(0,0,0,.35);}
.hr-map__wc.is-passed svg{animation:hr-map-pop .35s ease-out;}
.hr-map__wc svg{width:15px; height:15px; display:block;}
.hr-map__wc--water.is-passed{background:#1D6FA5;}
.hr-map__wc--coffee.is-passed, .hr-map__wc--food.is-passed{background:var(--timber);}
.hr-map__wc--bridge.is-passed, .hr-map__wc--viaduct.is-passed{background:#B45309;}
.hr-map__wc--viaductx.is-passed{background:#6b756c;}
.hr-map__wp, .hr-map__wc{cursor:pointer;}
.hr-map__wp:focus-visible .hr-map__badge, .hr-map__wc:focus-visible{outline:2px solid #FFFCF7; outline-offset:2px;}
/* popups never catch the pointer, so one that opens over its own marker can't flicker */
.hr-map__popup, .hr-map__popup .maplibregl-popup-content{pointer-events:none;}  /* MapLibre sets content to auto */
.hr-map__popup .maplibregl-popup-content{padding:6px 10px; border-radius:2px; font-family:var(--body); font-size:13px;
  line-height:1.3; color:var(--bush); box-shadow:0 2px 8px rgba(0,0,0,.3);}
/* overlap the tip 1px into the box so sub-pixel positioning can't leave a hairline gap */
.hr-map__popup[class*="anchor-bottom"] .maplibregl-popup-tip{margin-top:-1px;}
.hr-map__popup[class*="anchor-top"] .maplibregl-popup-tip{margin-bottom:-1px;}
.hr-map__popup.maplibregl-popup-anchor-left .maplibregl-popup-tip{margin-right:-1px;}
.hr-map__popup.maplibregl-popup-anchor-right .maplibregl-popup-tip{margin-left:-1px;}
.hr-map__popup .maplibregl-popup-content{position:relative;}
.hr-map__popup strong{display:block; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; opacity:.7;}
.hr-map__popup-num{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 4px;
  margin-right:6px; border-radius:999px; background:#8CC63F; color:#182018; font-weight:700; font-size:10px;}
/* Route places on the elevation chart, popping in as the line passes them */
.hr-map__pmarks{position:absolute; inset:0; pointer-events:none;}
.hr-map__pmark{position:absolute; display:flex; align-items:center; justify-content:center; min-width:22px; height:22px;
  padding:0 4px; border-radius:999px; background:#8CC63F; color:#182018; border:2px solid #FFFCF7;
  box-shadow:0 1px 3px rgba(0,0,0,.25); font-family:var(--body); font-size:11px; font-weight:700; line-height:1;
  pointer-events:auto; cursor:pointer;
  opacity:0; transform:translate(-50%,-50%) scale(.3); transition:opacity .25s, transform .25s;}
.hr-map__pmark--landmark{min-width:13px; width:13px; height:13px; padding:0;}
/* Lodges on the chart match the map's hut badges (.hr-map__hut / .hr-map__badge) */
.hr-map__pmark--hut{min-width:26px; width:26px; height:26px; padding:0; background:var(--bush); color:#FFFCF7;
  box-shadow:0 1px 4px rgba(0,0,0,.4);}
/* beats .hr-map__profile svg, which stretches the chart graphic to 100% */
.hr-map__pmarks .hr-map__pmark--hut svg{width:15px; height:15px; display:block;}
.hr-map__pbadge{position:absolute; top:-9px; right:-12px; display:flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#8CC63F; color:#182018;
  border:2px solid #FFFCF7; box-shadow:0 1px 3px rgba(0,0,0,.35); font-size:10px; font-weight:700; line-height:1;
  white-space:nowrap;}
.hr-map__pmark:focus-visible{outline:2px solid var(--bush); outline-offset:1px;}
/* Speech bubble above a chart marker, same look as the map popups */
.hr-map__bubble{position:absolute; z-index:3; transform:translate(-50%, calc(-100% - 16px)); padding:6px 10px;
  background:#fff; border-radius:2px; box-shadow:0 2px 8px rgba(0,0,0,.3); font-family:var(--body); font-size:13px;
  line-height:1.3; color:var(--bush); white-space:nowrap; pointer-events:none;}
.hr-map__bubble::after{content:""; position:absolute; top:100%; left:50%; margin-left:-7px; margin-top:-1px;
  border:7px solid transparent; border-top-color:#fff;}
.hr-map__bubble--left{transform:translate(-14px, calc(-100% - 16px));}
.hr-map__bubble--left::after{left:14px;}
.hr-map__bubble--right{transform:translate(calc(-100% + 14px), calc(-100% - 16px));}
.hr-map__bubble--right::after{left:auto; right:7px;}
/* Rarakau's always-on bubble sits inside its marker, so it shows and hides with it */
.hr-map__bubble--home{left:50%; top:50%; font-weight:400; text-align:left;}
.hr-map__bubble strong{display:block; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; opacity:.7;}
/* facility icons in the chart bubbles and map popups, same as the route list */
.hr-map__tip-icons{display:inline-flex; gap:3px; margin-left:8px; vertical-align:-4px;}
.hr-map__tip-icons .hr-map__ico{width:17px; height:17px;}
.hr-map__tip-icons .hr-map__ico svg{width:17px; height:17px;}
.hr-map__pmark.is-passed{opacity:1; transform:translate(-50%,-50%) scale(1);}
.hr-map__profile .hr-map__cursor{position:absolute; top:0; bottom:0; left:0; width:2px; background:currentColor; opacity:.6;}
.hr-map__route{width:100%; border-collapse:collapse; font-size:14px; color:#454e46;}
.hr-map__route caption{text-align:left; font-family:var(--display); font-size:20px; font-weight:600; color:var(--bush);
  padding:0 8px 5px;}
.hr-map__route th{text-align:left; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; opacity:.7; padding:6px 8px; border-bottom:1px solid var(--mist-warm);}
.hr-map__route td{line-height:1.2; padding:2px 8px; border-bottom:1px solid var(--mist-warm);}
.hr-map__route th:nth-child(n+4), .hr-map__route td:nth-child(n+4){text-align:right; width:34px; white-space:nowrap;}
.hr-map__route td:nth-child(n+4){font-size:12px; font-variant-numeric:tabular-nums; opacity:.85;}
.hr-map__route th:first-child, .hr-map__route td:first-child{width:27px;}
.hr-map__route th, .hr-map__route td{padding-left:4px; padding-right:4px;}
.hr-map__row--landmark .hr-map__place{font-style:italic;}
/* small green dot in the # column for unnumbered landmarks, centred under the number circles */
.hr-map__dot{display:block; width:7px; height:7px; margin:0 6px; border-radius:50%; background:#8CC63F;}
/* Facility icons beside each place in the route list, matching the map markers */
.hr-map__route td:nth-child(2){white-space:nowrap;}
.hr-map__icons{display:inline-flex; gap:2px; vertical-align:middle;}
.hr-map__route td:nth-child(3), .hr-map__route th:nth-child(3){text-align:center; width:44px; padding-left:2px; padding-right:2px;}
.hr-map__place{display:inline-flex; align-items:center; gap:4px; vertical-align:middle;}
.hr-map__flag{width:13px; height:13px; display:block; flex-shrink:0;}
.hr-map__sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.hr-map__ico{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; color:#1f2a22;}
.hr-map__ico svg{width:18px; height:18px; display:block;}
.hr-map__ico--hut, .hr-map__ico--home{color:var(--sage, #4F7358);}
.hr-map__ico--water{color:#1D6FA5;}
.hr-map__ico--coffee, .hr-map__ico--food{color:var(--timber);}
.hr-map__ico--camera{color:#6b756c;}
.hr-map__ico--bridge, .hr-map__ico--viaduct{color:#B45309;}
.hr-map__ico--viaductx{color:#6b756c;}
.hr-map__route tbody tr{height:var(--row-h, auto); animation:hr-map-row .4s ease-out;}
@keyframes hr-map-row{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}
/* small screens: rows not reached yet wait greyed out, then light up as the line passes them */
.hr-map__route tbody tr.hr-map__row--queued{animation:none; transition:opacity .4s, filter .4s;}
.hr-map__route tbody tr.is-pending{opacity:.35; filter:grayscale(1);}
/* rows open the place's popup on the map: hover shows it, click pins it (highlighted); hovering or
   clicking the place on the map or chart lights the row up the same way */
.hr-map__route tbody tr{cursor:pointer;}
.hr-map__route tbody tr:hover, .hr-map__route tbody tr:focus-visible, .hr-map__route tbody tr.is-hot{background:rgba(38,54,43,.1); outline:none;}
.hr-map__route tbody tr.is-pinned{background:rgba(140,198,63,.22);}
.hr-map__route tbody tr.is-pending{cursor:default; background:none;}
.hr-map__num{display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; border-radius:50%;
  background:#8CC63F; color:#182018; font-weight:700; font-size:11px;}
@media (prefers-reduced-motion: reduce){
  .hr-map__badge, .hr-map__wp .hr-map__badge, .hr-map__route tbody tr, .hr-map__poi > span, .hr-map__wc svg{animation:none !important;}
  .hr-map__pmark, .hr-map__route tbody tr{transition:none;}
}
.hr-map__label{background:rgba(255,252,247,.94); padding:3px 8px; border-radius:2px; font-family:var(--body); font-size:12px;
  line-height:1.25; color:#454e46; box-shadow:0 1px 4px rgba(0,0,0,.2); white-space:nowrap;}
.hr-map__pin--left{flex-direction:row-reverse;}
.hr-map__pin--left .hr-map__label{text-align:right;}
.hr-map__pin--below{flex-direction:column; gap:4px;}
.hr-map__pin--below .hr-map__label{text-align:center;}
.hr-map__label strong{display:block; color:var(--bush); font-size:13px;}
.hr-map__info{margin-top:16px; padding:20px; background:#FFFCF7; border:1px solid var(--mist-warm); border-radius:2px;}
/* Title, stats and playback controls share one row to keep the panel short */
.hr-map__head{display:flex; align-items:flex-start; gap:20px; margin-top:14px;}
.hr-map__title{flex:0 0 auto; min-width:120px;}
.hr-map__controls{flex-shrink:0; display:flex; gap:5px;}
.hr-map__ctl{display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0;
  border:1.5px solid var(--bush); border-radius:3px; background:transparent; color:var(--bush); cursor:pointer;}
.hr-map__ctl svg{width:18px; height:18px; display:block; flex-shrink:0;}
.hr-map__ctl:hover:not(:disabled){background:var(--bush); color:#FFFCF7;}
.hr-map__ctl:focus-visible{outline:2px solid var(--bush); outline-offset:2px;}
.hr-map__ctl:disabled{opacity:.5; cursor:default;}
/* Play leads: filled green, a size up, and labelled while stopped ("Play route", "Replay") */
.hr-map__ctl[data-ctl="play"]{width:auto; min-width:44px; gap:7px; padding:0 13px; background:var(--sage); border-color:var(--sage);
  color:#FFFCF7; font:600 14px/1 var(--body); white-space:nowrap;}
.hr-map__ctl[data-ctl="play"] svg{width:16px; height:16px;}
.hr-map__ctl[data-ctl="play"]:hover{background:var(--bush); border-color:var(--bush);}
.hr-map__ctl-label:empty{display:none;}
/* copy in the route list, top right beside its caption: kept at 28px with an icon-only Play so the caption fits on one line */
.hr-map__list{position:relative;}
.hr-map__controls--list{position:absolute; top:12px; right:12px; gap:3px;}
.hr-map__controls--list .hr-map__ctl{width:28px; height:28px;}
.hr-map__controls--list .hr-map__ctl svg{width:15px; height:15px;}
.hr-map__controls--list .hr-map__ctl[data-ctl="play"]{min-width:28px; width:28px; padding:0;}
.hr-map__controls--list .hr-map__ctl[data-ctl="play"] svg{width:14px; height:14px;}
.hr-map__controls--list .hr-map__ctl-label{display:none;}
.hr-map__controls--list + .hr-map__route caption{padding-right:127px;}
/* copy on the map, bottom centre: a solid cream bar with a shadow so it reads over any basemap */
.hr-map__controls--map{position:absolute; bottom:12px; left:50%; transform:translateX(-50%); z-index:2; gap:4px; padding:4px;
  background:#FFFCF7; border-radius:6px; box-shadow:0 2px 10px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.08);}
.hr-map__controls--map .hr-map__ctl{width:40px; height:40px; border-color:transparent;}
.hr-map__controls--map .hr-map__ctl[data-ctl="play"]{width:auto; border-color:var(--sage);}
/* title line and the two-line stats are both 34px tall, so they line up */
.hr-map__head h3{font-family:var(--display); font-weight:700; font-size:30px; line-height:34px; color:var(--bush); margin:0;}
/* route line on its own row, under the title and stats (below the elevation chart) */
.hr-map__sub{margin:4px 0 0; color:#454e46; font-size:14px; line-height:1.3;}
.hr-map__stats{flex:1 1 auto; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:0;}
.hr-map__stats dt{line-height:12px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#454e46; opacity:.75;}
.hr-map__stats dd{font-variant-numeric:tabular-nums; margin:0; line-height:22px; white-space:nowrap; font-family:var(--display); font-size:19px; font-weight:600; color:var(--bush);}
.hr-map__profile{position:relative; height:110px;}
.hr-map__profile svg{width:100%; height:100%; display:block;}
/* Full loop night: dark sky and a moon behind the profile, clipped (inline clip-path) to above its line */
.hr-map__profile > svg{position:relative;}
.hr-map__night{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.hr-map__night-sky{position:absolute; inset:0; background:linear-gradient(#1E2A44, #3A4F78); opacity:var(--night, 0);}
.hr-map__night-moon{position:absolute; width:28px; height:28px; transform:translate(-50%, -50%);
  filter:drop-shadow(0 0 6px rgba(243,227,162,.6));}
.hr-map__night-moon svg{fill:#F3E3A2; stroke:#F3E3A2; stroke-width:.5;}
.hr-map__axis{position:absolute; inset:0 auto 0 0; display:flex; flex-direction:column; justify-content:space-between;
  font-family:var(--mono); font-size:10px; color:#454e46; opacity:.7; padding:2px 4px;}
/* Official walking-time scale under the elevation chart */
.hr-map__hours{position:relative; height:22px; margin-top:4px; border-top:1px solid var(--mist-warm);
  font-family:var(--mono); font-size:10px; color:#454e46;}
.hr-map__hour{position:absolute; top:0; transform:translateX(-50%); padding-top:6px; white-space:nowrap; opacity:.75;}
.hr-map__hour::before{content:""; position:absolute; top:0; left:50%; width:1px; height:4px; background:currentColor;}
.hr-map__hour:first-child{transform:none;}
.hr-map__hour:first-child::before{left:0;}
.hr-map__hour--end{transform:translateX(-100%); font-weight:600; opacity:1;}
.hr-map__hour--end::before{left:auto; right:0;}
.hr-map__note{margin:10px 0 0; font-size:13px; color:#454e46; opacity:.7;}
@media (max-width:1100px){
  /* stats drop to their own row under the title and controls */
  .hr-map__head{flex-wrap:wrap;}
  .hr-map__title{flex:1 1 auto;}
  .hr-map__stats{order:3; flex-basis:100%;}
}
@media (max-width:900px){
  .hr-map__main{grid-template-columns:1fr;}
  .hr-map__list{display:none;}
}
@media (max-width:640px){
  .hr-map__canvas{height:420px;}
  .hr-map__bar{flex-wrap:nowrap; gap:4px;}
  .hr-map__btn{min-width:0; padding:9px 4px; font-size:13px; gap:5px; white-space:nowrap;}
  .hr-map__btn[data-3d]{flex:0 0 auto; padding:9px 10px;}
  .hr-map__swatch{width:8px;}
  .hr-map__stats{grid-template-columns:repeat(3,1fr);}
  .hr-map__stats dd{font-size:18px;}
  .hr-map__label{font-size:11px;}
  .hr-map__controls--map .hr-map__ctl{width:44px; height:44px;}
  .hr-map__controls--map .hr-map__ctl[data-ctl="play"]{width:auto;}
}

/* Finale (day-walk maps): the wider place the walk arrives at, shown once the route has played */
/* MapLibre sets a marker element's own opacity inline, so the fades are on the children */
.hr-map__finale-arrow svg,.hr-map__finale-label{opacity:0; transition:opacity .4s ease; pointer-events:none;}
.hr-map__finale-arrow.is-on svg,.hr-map__finale-label.is-on{opacity:1;}
.hr-map__finale-arrow{width:26px; height:26px; pointer-events:none;}
.hr-map__finale-arrow svg{display:block; width:100%; height:100%; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));}
.hr-map__finale-label{font-family:var(--body); background:#FFFCF7; border:1px solid #C99A3D; border-radius:999px; padding:5px 14px; font-size:14px; font-weight:700;
  color:#2B3B2F; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.25);}
.hr-map__finale-label span{color:#C99A3D;}

/* Dolphins (Port Craig map): a window onto the water. The dolphin arcs up from under the bottom edge and
   dives back below it; -x carries it across, -y lifts and tips it, and the splash rings mark where it
   leaves and re-enters. It starts and ends far enough under the edge that nose and tail are both out of sight.
   Hidden until the route has played. */
.hr-map__dolphin{position:relative; width:92px; height:72px; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .5s ease;}
.hr-map__dolphin.is-on{opacity:1;}
.hr-map__dolphin--flip{transform:scaleX(-1);}
.hr-map__dolphin-x,.hr-map__dolphin-y{position:absolute; left:0; top:0; display:block;}
.hr-map__dolphin-x{width:50px; height:29px;}
.hr-map__dolphin-y{width:100%; height:100%; transform:translateY(100px) rotate(-60deg);}
.hr-map__dolphin-spin{display:block; width:100%; height:100%;}
.hr-map__dolphin svg{display:block; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));}
.hr-map__dolphin-body{fill:#6F8591; stroke:#FFFCF7; stroke-width:1.5; stroke-linejoin:round; paint-order:stroke;}
.hr-map__dolphin-belly{fill:#EEF3F5;}
.hr-map__dolphin-mouth{fill:none; stroke:#2b3940; stroke-width:.5; stroke-linecap:round;}
.hr-map__dolphin-eye{fill:#1c2428;}
.hr-map__dolphin-splash{position:absolute; left:0; right:0; bottom:0; height:6px;}
.hr-map__dolphin-splash::before,.hr-map__dolphin-splash::after{content:""; position:absolute; bottom:0; width:16px; height:6px;
  border:2px solid rgba(255,252,247,.9); border-bottom:0; border-radius:50% 50% 0 0 / 100% 100% 0 0; opacity:0;}
.hr-map__dolphin-splash::before,.hr-map__dolphin-splash::after{width:20px;}
.hr-map__dolphin-splash::before{left:4px;}
.hr-map__dolphin-splash::after{right:4px;}
.hr-map__dolphin.is-on .hr-map__dolphin-x{animation:hr-dolphin-x 3.6s linear var(--delay,0s) infinite;}
.hr-map__dolphin.is-on .hr-map__dolphin-y{animation:hr-dolphin-y 3.6s linear var(--delay,0s) infinite;}
.hr-map__dolphin.is-on .hr-map__dolphin-splash::before{animation:hr-dolphin-splash-out 3.6s ease-out var(--delay,0s) infinite;}
.hr-map__dolphin.is-on .hr-map__dolphin-splash::after{animation:hr-dolphin-splash-in 3.6s ease-out var(--delay,0s) infinite;}
@keyframes hr-dolphin-x{0%{transform:translateX(-8px);} 40%,100%{transform:translateX(50px);}}
@keyframes hr-dolphin-y{
  0%{transform:translateY(100px) rotate(-60deg); animation-timing-function:cubic-bezier(.15,.75,.45,1);}
  20%{transform:translateY(24px) rotate(0deg); animation-timing-function:cubic-bezier(.55,0,.85,.25);}
  40%,100%{transform:translateY(100px) rotate(60deg);}
}
@keyframes hr-dolphin-splash-out{0%,3%{opacity:0; transform:scale(.4);} 8%{opacity:1; transform:scale(1);} 22%,100%{opacity:0; transform:scale(1.5);}}
@keyframes hr-dolphin-splash-in{0%,30%{opacity:0; transform:scale(.4);} 36%{opacity:1; transform:scale(1);} 52%,100%{opacity:0; transform:scale(1.5);}}
/* Flipper's somersault (.hr-map__dolphin--flipper, while .is-flipping, or .is-backflipping for a backflip): one full forward turn while it's in the air, on top of the leap's own tilt.
   The window is tall enough above the leap's top for the turning dolphin to clear it. */
.hr-map__dolphin.is-flipping .hr-map__dolphin-spin{animation:hr-dolphin-spin 3.6s linear 1;}
@keyframes hr-dolphin-spin{0%,7%{transform:rotate(0deg);} 33%,100%{transform:rotate(360deg);}}
.hr-map__dolphin.is-backflipping .hr-map__dolphin-spin{animation:hr-dolphin-backspin 3.6s linear 1;}
@keyframes hr-dolphin-backspin{0%,7%{transform:rotate(0deg);} 33%,100%{transform:rotate(-360deg);}}
/* Reduced motion: the dolphins hold still, mid-leap */
@media (prefers-reduced-motion:reduce){
  .hr-map__dolphin.is-on .hr-map__dolphin-x,.hr-map__dolphin.is-on .hr-map__dolphin-y,
  .hr-map__dolphin.is-on .hr-map__dolphin-splash::before,.hr-map__dolphin.is-on .hr-map__dolphin-splash::after{animation:none;}
  .hr-map__dolphin-x{transform:translateX(21px);}
  .hr-map__dolphin-y{transform:translateY(26px) rotate(0deg);}
}