/* On-map UI: bottom-left cards, measuring tape, elevation profile, map buttons. */
/* Everything in the bottom left corner is one stack, so the scale sits
   directly above the readout however tall either of them gets. */
#bottomLeft{
  position:absolute;z-index:1000;left:12px;bottom:24px;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  max-width:calc(100% - 84px);
}
.card{
  padding:7px 11px;font-size:12.5px;
  background:rgba(18,35,44,.92);border:1px solid var(--line);border-radius:4px;
}
#readout b{font-weight:600;font-variant-numeric:tabular-nums}
#readout .sub{margin-top:2px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}

#scaleBox{font-size:11px;color:var(--muted);padding:6px 10px 7px}
#scaleRow{display:flex;align-items:center;gap:8px}
#scaleBar{
  height:7px;width:80px;
  border:1.5px solid var(--text);border-top:none;
  transition:width .12s linear;
}
#scaleLabel{color:var(--text);font-variant-numeric:tabular-nums;font-size:11.5px}
/* the measure box's profile and fold buttons ride on the scale card while measuring */
#measBtns{display:none;gap:4px;margin-left:auto;padding-left:6px}
body.measuring #measBtns{display:flex}
#contourInfo{margin-top:3px;display:none}
#contourInfo.on{display:block}

#measureBox{display:none}
#measureBox.on{display:block}
#measureHead{display:flex;align-items:center;gap:4px}
#measureTotal{flex:1;min-width:0}
.micon{
  flex:0 0 auto;width:22px;height:22px;padding:0;display:flex;align-items:center;justify-content:center;
  background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:3px;cursor:pointer;
}
.micon:hover{background:#264556}
.micon svg{width:14px;height:14px;display:block}
#measProfBtn[aria-pressed="false"]{color:var(--muted);opacity:.7}
#measFold svg{transition:transform .12s}
/* folded: the whole box goes, distance and all; the buttons on the scale card bring it back */
#measureBox.on.compact{display:none}
#measFold[aria-expanded="false"] svg{transform:rotate(180deg)}
#measureTotal b{font-weight:600;font-variant-numeric:tabular-nums;font-size:14px}
#measureSub{font-size:11px;color:var(--muted);margin-top:2px}
#measureGain{font-size:11.5px;margin-top:3px;display:none;font-variant-numeric:tabular-nums}
#measureGain.on{display:block}
#measureGain .up{color:#ffb020}
#measureGain .dn{color:#8fd0ff}
#measureGain .wait{color:var(--muted)}
.mrow{display:flex;gap:6px;margin-top:7px}
.mbtn{
  padding:3px 9px;font-size:11px;background:var(--panel-2);color:var(--text);
  border:1px solid var(--line);border-radius:3px;cursor:pointer;
}
.mbtn:hover{background:#264556}
.mbtn:disabled{opacity:.4;cursor:default;background:var(--panel-2)}
#measureSteep,#measureTime,#measureSun,#measureWind{font-size:11.5px;margin-top:3px;display:none;font-variant-numeric:tabular-nums}
#measureSteep.on,#measureTime.on,#measureSun.on,#measureWind.on{display:block}
#measureSteep b,#measureTime b,#measureSun b,#measureWind b{font-weight:600}
#measureSteep .warn,#measureWind .warn{color:#ff8a7a}
#measureSteep .ok{color:#9fd88a}
#measureSteep .sub,#measureTime .sub,#measureSun .sub,#measureWind .sub{font-size:11px;color:var(--muted);margin-top:1px}
#measureSun .wait,#measureWind .wait{color:var(--muted)}
#routeStart{padding:0 3px;font-size:11px;background:var(--panel-2);color:var(--text);
  border:1px solid var(--line);border-radius:3px;color-scheme:dark}
#paceBox{color:var(--muted)}
#munterPace{width:34px;padding:0 3px;font-size:11px;background:var(--panel-2);color:var(--text);
  border:1px solid var(--line);border-radius:3px;font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;appearance:textfield}
/* The browser's own spinner sat on top of the digits, so it is hidden and
   replaced by a small up/down pair after the % sign. */
#munterPace::-webkit-inner-spin-button,#munterPace::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#paceStep{display:inline-flex;flex-direction:column;vertical-align:middle;margin:0 6px 0 2px}
#paceStep button{padding:0 3px;font-size:7px;line-height:8px;background:var(--panel-2);color:var(--muted);
  border:1px solid var(--line);cursor:pointer}
#paceStep button:first-child{border-radius:3px 3px 0 0;border-bottom:none}
#paceStep button:last-child{border-radius:0 0 3px 3px}
#paceStep button:hover{color:var(--text)}
#munterMode{margin-left:4px;padding:1px 3px;font-size:11px;background:var(--panel-2);color:var(--text);
  border:1px solid var(--line);border-radius:3px}

/* Elevation profile along the measured line. It takes the bottom edge while
   measuring and pushes the corner stack up above it. */
#profileBox{
  position:absolute;z-index:1000;left:12px;right:70px;bottom:24px;height:136px;
  padding:6px 10px 4px;display:none;flex-direction:column;
}
body.has-profile #profileBox{display:flex}
body.has-profile #bottomLeft{bottom:168px}
/* taps add points while measuring, so the tap readout has nothing to say */
body.has-profile #readout{display:none}
/* profile hidden with its button: the corner stack drops back down */
body.has-profile.profile-off #profileBox{display:none}
body.has-profile.profile-off #bottomLeft{bottom:24px}
#profileHead{display:flex;align-items:center;gap:10px;min-height:16px;font-size:11px;color:var(--muted);
  font-variant-numeric:tabular-nums}
#profileRead{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#profileRead b{color:var(--text);font-weight:600}
#profileKey{display:flex;gap:2px;flex:0 0 auto;font-size:9.5px}
#profileKey span{padding:0 4px;border-radius:2px;color:#111;font-weight:600;white-space:nowrap}
#profileColor{flex:0 0 auto;padding:1px 3px;font-size:11px;background:var(--panel-2);color:var(--text);
  border:1px solid var(--line);border-radius:3px}
#profileSvg{flex:1;width:100%;min-height:0;display:block;touch-action:none;cursor:crosshair}
#profileSvg .grid{stroke:var(--line);stroke-width:1}
#profileSvg .lbl{fill:var(--muted);font-size:9.5px;font-variant-numeric:tabular-nums}
#profileSvg .vtx{stroke:var(--text);stroke-opacity:.22;stroke-dasharray:2 3}
#profileSvg .curve{fill:none;stroke:#ffb020;stroke-width:1.8;stroke-linejoin:round}
#profileSvg .flat{fill:var(--snow);fill-opacity:.08}
#profileSvg .peak{fill:var(--text);font-size:10px;font-weight:600;text-anchor:middle}
#profileSvg .scrub{stroke:var(--text);stroke-width:1;pointer-events:none}
#profileSvg .scrubDot{fill:#ffb020;stroke:var(--panel);stroke-width:1.5;pointer-events:none}
@media (max-width:640px){
  #profileKey{display:none}
  body.has-profile.profile-off #bottomLeft{bottom:20px}
  .micon{width:28px;height:28px}
}
.leaflet-tooltip.meas{
  background:rgba(18,35,44,.92);border:1px solid var(--line);color:var(--text);
  font-size:11px;padding:1px 5px;box-shadow:none;font-variant-numeric:tabular-nums;
}
.leaflet-tooltip.meas:before{display:none}
#map.measuring{cursor:crosshair}

/* Hut markers: filled for staffed huts, a filled door for self-service, an
   outline for no-service and open huts. Red is DNT, blue everyone else. */
.hut svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 1px rgba(0,0,0,.6))}
.hut path{stroke-width:1.4;stroke-linejoin:round;fill:#fff;stroke:var(--hut)}
.hut rect{fill:none}
.hut-s path{fill:var(--hut);stroke:#fff}
.hut-s rect,.hut-m rect{fill:#fff}
.hut-e rect{fill:var(--hut)}
.hut-m path{fill:var(--hut-2);stroke:#fff}
.hut-w path,.hut-b path{stroke:var(--hut-2)}
.hut-legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted);margin:2px 0 6px}
.hut-legend span{display:flex;align-items:center;gap:5px}
.hut-legend i{display:inline-block;width:14px;height:14px}

#measBtn{
  position:absolute;z-index:1000;right:12px;bottom:80px;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(18,35,44,.92);border:1px solid var(--line);border-radius:50%;
  color:var(--text);cursor:pointer;padding:0;
}
#measBtn.on{background:#ffb020;border-color:#ffb020;color:var(--ink)}
#measBtn svg{width:22px;height:22px;display:block}

#locBtn{
  position:absolute;z-index:1000;right:12px;bottom:24px;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(18,35,44,.92);border:1px solid var(--line);border-radius:50%;
  color:var(--text);cursor:pointer;padding:0;
}
#locBtn.on{background:var(--snow);border-color:var(--snow);color:var(--ink)}
#locBtn svg{width:22px;height:22px;display:block}
.me-arrow{width:34px;height:34px;transition:transform .12s linear}
.leaflet-control-attribution{font-size:10px}

/* 3D view: a MapLibre map over the Leaflet one, below the panel and buttons.
   The 2D-only tools (measure, locate, readout, profile) are hidden meanwhile. */
#map3d{position:absolute;inset:0;z-index:900;display:none;background:var(--paper)}
body.is3d #map3d{display:block}
body.is3d #bottomLeft,body.is3d #profileBox,body.is3d #measBtn,body.is3d #locBtn,
body.is3d #map .leaflet-control-container{display:none}
#note3d{position:absolute;z-index:1000;left:12px;bottom:24px;max-width:300px;font-size:11.5px;
  color:var(--muted);display:none}
body.is3d #note3d{display:block}
#btn3d{
  position:absolute;z-index:1000;right:12px;bottom:136px;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(18,35,44,.92);border:1px solid var(--line);border-radius:50%;
  color:var(--text);cursor:pointer;padding:0;font-family:inherit;font-size:14px;font-weight:600;line-height:1;
}
#btn3d.on{background:var(--snow);border-color:var(--snow);color:var(--ink)}
#btn3d:disabled{opacity:.5;cursor:wait}
/* alone at the bottom in 3D, so it drops to where the locate button was */
body.is3d #btn3d{bottom:24px}
@media (max-width:640px){
  #note3d{right:70px;bottom:44px;max-width:none}
}