/* ---- The stage: 3D mountain and, beneath it, the map ----
   The order is the argument. You came to look at a mountain, so the mountain
   and its numbers get the screen; the map is navigation between mountains and
   sits under them. Nothing here is decorative — every pixel of the stage is
   terrain you can turn. */

.stage{position:relative;min-height:0;overflow:hidden;background:#060b14;
  border-top:1px solid var(--rule2)}
.m3d{position:absolute;inset:0}
.m3d-canvas{display:block;width:100%;height:100%;outline:0;touch-action:none;cursor:grab}
.m3d-canvas:focus-visible{outline:2px solid var(--info);outline-offset:-2px}

/* Busy and empty states share the centre of the stage. Both name the resort,
   because a status with no subject is useless when you switch mountains fast. */
.m3d-busy,.m3d-empty{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:9px;text-align:center;padding:22px;
  color:var(--dim)}
.m3d-busy strong{font-size:13px;color:var(--ink);font-weight:600}
.m3d-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;
  min-height:14px;max-width:90%}
.m3d-spin{width:26px;height:26px;border-radius:50%;
  border:2px solid var(--rule2);border-top-color:var(--info);
  animation:m3dspin .9s linear infinite}
@keyframes m3dspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.m3d-spin{animation-duration:2.4s}}

.m3d-empty h3{font-size:13.5px;color:var(--ink);font-weight:600;margin:2px 0 0}
.m3d-empty p{font-size:11.5px;line-height:1.55;max-width:42ch;color:var(--dim)}
/* The retry control is a WORD, not a box.
 *
 * This was a bordered rectangle in the middle of an otherwise boxless
 * interface — the single most conspicuous button on the page, and the one
 * shown at the exact moment something has already gone wrong. A rule stands
 * for its whole family: nothing in this app is framed to prove it is
 * tappable. The underline carries that, the full 44px target is kept for the
 * thumb, and the frame goes. */
.m3d-retry{margin-top:6px;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.09em;padding:0;min-height:44px;
  background:transparent;border:0;border-radius:0;
  color:var(--info);cursor:pointer;
  /* The rule hugs the word rather than floating beneath it: the underline is
     drawn as a text decoration, so it tracks the glyphs, while the 44px touch
     target is carried by the element around them. */
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.m3d-retry:hover{border-bottom-color:var(--ink);color:var(--ink)}
.m3d-retry:focus-visible{outline:1.5px solid var(--info);outline-offset:3px}

/* Control bar. Provenance sits in it on purpose: the claim that this is the
   real mountain has to travel with the picture, not live in a help page. */
.stagebar{position:static;z-index:auto;width:100%;
  display:flex;flex-direction:column;align-items:stretch;gap:0;pointer-events:auto}
.stagebar>*{pointer-events:auto}
.prov{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--mono);font-size:9.5px;color:var(--dim);
  /* No frame. This is a caption stating where the terrain came from, and a
     box around a caption is a box for its own sake. The tinted ground keeps
     it legible over bright snow, which is the only job the border was
     actually doing. */
  background:rgba(8,13,22,.72);border:0;border-radius:0;padding:4px 8px}
.prov[data-state="bad"]{color:var(--warn,#f7941e);border-color:currentColor}
body:not([data-terrain="ready"]) 
/* The view toggle only exists where both panes cannot be shown at once. On a
   wide screen you get the mountain and the map together, so a switch would be
   a control that does nothing. */
.views{display:none;background:rgba(8,13,22,.86)}

.sym{width:9px;height:9px;flex:0 0 auto;background:var(--c,#888)}
.sym.circle{border-radius:50%}
.sym.diamond{transform:rotate(45deg)}
.sym.double{transform:rotate(45deg);box-shadow:5px 0 0 var(--c,#111)}
.sym.lift{width:12px;height:0;background:0;border-top:1.5px solid #cfd6e0}
.sym.diamond,.sym.double{background:#111;outline:1px solid #6b727d}

/* ---- Regime A: wide screen with a mouse ----
   Conditions on the left at full height, mountain above map on the right.
   This is the layout that answers "desktop feels barren": three live regions
   instead of one panel and a lot of empty map. */
@media(min-width:1024px) and (pointer:fine){
  .app{
    grid-template-columns:minmax(420px,34%) 1fr;
    grid-template-rows:minmax(0,1fr) minmax(190px,34%);
    grid-template-areas:"panel stage" "panel map";
  }
  .panel{grid-area:panel}
  .stage{grid-area:stage;border-top:0;border-left:1px solid var(--rule2)}
  .mapwrap{grid-area:map;border-top:1px solid var(--rule2);border-left:1px solid var(--rule2)}
}

/* ---- Regime B: narrow, still a mouse (a small window) ----
   Not enough height for three bands, so the mountain and the map share the
   upper region and the toggle appears. */
@media(max-width:1023px) and (pointer:fine){
  .app{grid-template-rows:minmax(0,1fr) minmax(0,44%);grid-template-columns:1fr}
  .stage,.mapwrap{grid-row:1;grid-column:1}
  .panel{grid-row:2;grid-column:1;border-top:1px solid var(--rule2)}
  .views{display:flex}
}

/* ---- Regime C: touch ----
   Mountain and map occupy the whole screen behind the conditions sheet, one at
   a time. The toggle is the lowest control on the display because it is the
   one pressed most, and the thumb arc runs out fastest at the top. */
@media (pointer:coarse){
  .app{grid-template-rows:1fr;grid-template-columns:1fr}
  .stage,.mapwrap{grid-row:1;grid-column:1;border-top:0;border-left:0}

  /* One rail, not three floating clusters. The view toggle leads because it
     is pressed most; the mountain actions sit beside it in the same shape and
     the same row, so the whole strip reads as one control surface. */
  .views{display:flex;position:static;border-color:var(--rule2);flex:0 0 auto;
    background:rgba(6,11,20,.92);backdrop-filter:blur(10px)}
  .views button{min-width:58px;min-height:56px;font-size:12px}

  /* Layer buttons and mountain actions never appear together — they belong to
     different views — so they share the row above the toggle. */
  /* Two rows of controls have to fit between the sheet and the top of the
     thumb arc. At 56px each that leaves almost nothing for gaps, so they are
     6px — enough to read as separate rows, tight enough that the upper row
     stays reachable at the peek snap. */
  .layers{bottom:68px;left:12px;right:72px;top:auto}
  .stagebar{top:auto;bottom:12px;left:12px;right:72px;z-index:22;
    flex-direction:row;gap:8px;align-items:flex-end}
        .rctl{bottom:130px}

  /* Provenance is a desktop-hover affordance; on a phone it competes with the
     terrain for the only screen there is. It moves to the status chip row. */
  .prov{position:fixed;top:calc(var(--bar-safe) + 10px);left:10px;right:auto;
    max-width:62%;bottom:auto;flex:0 0 auto}
  body[data-view="map"] .prov{display:none}
  body[data-view="map"]   body[data-view="mountain"] .layers,
  body[data-view="mountain"] .rctl,
  body[data-view="mountain"] .mstat{display:none}
}

/* Only one of the two panes is live in the stacked regimes. visibility rather
   than display: a hidden map that has never been laid out reports zero size,
   and MapLibre that resizes to zero comes back blank. */
@media(max-width:1023px), (pointer:coarse){
  body[data-view="mountain"] .mapwrap{visibility:hidden;pointer-events:none}
  body[data-view="map"] .stage{visibility:hidden;pointer-events:none}
  body[data-view="map"] .stagebar,
  body[data-view="map"]   body[data-view="map"] .stagebar{pointer-events:auto}
}

/* Sheet-aware offsets for everything now living in the thumb arc. */
@media (pointer:coarse) and (orientation:portrait){
  .layers{bottom:calc(var(--sheet, 30svh) + 68px)}
  .stagebar{bottom:calc(var(--sheet, 30svh) + 12px)}
  .rctl{bottom:calc(var(--sheet, 30svh) + 140px)}

  /* The busy and empty states centre themselves in the canvas, and on a phone
     the bottom half of that canvas is behind the sheet — so the message that
     explains why there is no mountain was itself invisible. Only the tip of
     its icon showed above the sheet edge. Reserve the occluded strip. */
  .m3d-busy,.m3d-empty{padding-bottom:calc(var(--sheet, 30svh) + 84px)}
  /* The view toggle is how you reach the map at all, so it survives the
     middle snap; only a sheet pulled to full height takes it away, and at
     that point the map is entirely covered anyway. */
  body[data-sheet="full"] .layers{opacity:0;pointer-events:none;transition:opacity .18s ease}
}

/* ---- Regime C, landscape ----
   A phone on its side has no vertical room for a sheet, so conditions return
   to a column and the stage keeps the rest. Declared after the portrait rules
   because a media query carries no specificity of its own: without this the
   generic touch layout would drop all three regions into one cell. */
@media (pointer:coarse) and (orientation:landscape){
  .app{grid-template-columns:minmax(280px,42%) 1fr;grid-template-rows:minmax(0,1fr)}
  .panel{grid-row:1;grid-column:1;position:static;height:auto;
    border-radius:0;box-shadow:none;border-top:0;border-right:1px solid var(--rule2);padding:12px}
  .stage,.mapwrap{grid-row:1;grid-column:2}
  .grip{display:none}

  /* Every floating control moves out of the panel's column and into the
     stage's, where the thumb actually is when the phone is held sideways. */
  .stagebar{left:auto;right:12px;width:auto;bottom:12px}
  .layers{left:auto;right:12px;width:auto;bottom:76px}
  .rctl{left:44%;right:12px;bottom:140px}
  .prov{position:static;max-width:none}
}

/* ---- Place labels ----
   Broadcast weather graphics put the name beside a small tick, not inside a
   pill: the label has to sit on the terrain without covering it. */
.plc{display:flex;align-items:center;gap:6px;pointer-events:none;white-space:nowrap;
  transform:translateX(3px)}
.plc i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.9);
  box-shadow:0 0 0 1.5px rgba(3,8,16,.85);flex:0 0 auto}
.plc span{font-size:12.5px;font-weight:600;letter-spacing:.01em;color:#eaf1f9;
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.8)}
@media(min-width:1024px){.plc span{font-size:13.5px}}

/* ---- Resort preview ----
   The point of the map: sweep the range, see where the snow is. */
.rprev{position:absolute;top:0;left:0;z-index:12;width:210px;pointer-events:auto;
  background:rgba(6,11,20,.94);backdrop-filter:blur(12px);
  border:1px solid var(--rule2);border-radius:var(--r);padding:9px 10px;cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.6)}
.rprev header{display:flex;align-items:center;gap:8px;padding-bottom:7px;
  border-bottom:1px solid var(--rule)}
.rprev header svg{width:16px;height:16px;flex:0 0 auto;fill:#cfe2f5}
.rprev strong{display:block;font-size:12.5px;font-weight:650;color:var(--ink);line-height:1.25}
.rprev header span{display:block;font-family:var(--mono);font-size:9.5px;color:var(--dim)}
.rprev dl{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin-top:8px}
.rprev dt{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint)}
.rprev dd{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.15}
.rprev dd em{font-style:normal;font-size:9.5px;color:var(--dim);margin-left:1px}
.rprev dd .na{color:var(--faint);font-weight:400}
.rprev .pend{margin-top:7px;font-family:var(--mono);font-size:9px;color:var(--faint)}

/* ---- Controls without boxes ----
   Said three times and worth stating in the stylesheet: a control here is a
   word, not a container. The map is the object; chrome that draws its own
   outline competes with it. State is carried by weight and a lit underline —
   the same language broadcast graphics use for an active layer. */
.layers{background:transparent !important;border:0 !important;backdrop-filter:none !important;
  gap:2px}
.layers button{background:transparent !important;padding:8px 10px;color:#c3d1e0;
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.85)}
.layers button + button{box-shadow:none !important}
.layers button.on{background:transparent !important}
.layers button.on::after{left:10px;right:10px;height:1.5px}

#loc{background:transparent !important;border:0 !important;box-shadow:none !important;
  backdrop-filter:none !important;filter:drop-shadow(0 1px 3px rgba(0,0,0,.9))}

.views{border:0 !important;background:transparent !important;backdrop-filter:none !important}
.views button{background:transparent !important;color:#c3d1e0;
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.85)}
.views button.on{background:transparent !important}
.views button.on::after{left:8px;right:8px;height:1.5px}

.prov,.mstat{background:transparent !important;border:0 !important;padding:4px 0;
  color:#9db0c6;text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.85)}
.rctl{background:rgba(6,11,20,.7) !important;border:0 !important;border-radius:0;
  box-shadow:none}

/* An inactive control still has to be readable — dimming it to near-invisible
   over dark terrain is not restraint, it is a control nobody can find. */
.layers button:not(.on),.views button:not(.on){opacity:.72}
.layers button.on,.views button.on{color:#7fd4ff !important;opacity:1}
#loc{color:#c3d1e0 !important}

/* ---- Run labels ----
   The name sits beside its difficulty mark, the way it does on a paper trail
   map, so the symbol and the word are read as one thing. */
.runlabels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4}
.rlab{position:absolute;top:0;left:0;display:flex;align-items:center;gap:5px;
  transform-origin:0 0;white-space:nowrap;
  font-size:11.5px;font-weight:600;color:#f2f7fc;
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.9);
  margin:-7px 0 0 -4px}
.rlab i{width:8px;height:8px;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.7)}
.rlab.d-novice i,.rlab.d-easy i{background:#00a651;border-radius:50%}
.rlab.d-intermediate i{background:#0072bc}
.rlab.d-advanced i{background:#111;transform:rotate(45deg)}
.rlab.d-expert i,.rlab.d-freeride i,.rlab.d-extreme i{background:#111;transform:rotate(45deg);
  box-shadow:5px 0 0 #111, 0 0 0 1px rgba(255,255,255,.35)}
@media(min-width:1024px){.rlab{font-size:12.5px}}

/* ---- Control rail, without collisions ----
   The toggles were absolutely positioned into the same band and landed on top
   of each other. One flex rail owns the row instead, so nothing can overlap
   whatever else is added later. */
.plclayer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6}
.plc{position:absolute;top:0;left:0;transform-origin:0 50%;margin-top:-9px}

.ground{display:none}
body[data-view="map"] .ground{display:flex}

@media (pointer:coarse){
  .stagebar{flex-wrap:wrap;gap:6px 8px;align-items:flex-end}
  .layers{position:static !important;width:auto !important;max-width:none !important}
  /* Layers belong to the map, so they ride in the same rail rather than
     floating in their own absolutely-positioned band above it. */
  body[data-view="mountain"] .layers{display:none}
}
@media (pointer:coarse) and (orientation:portrait){
  .layers{bottom:auto}
}
/* A run that lost the space for its name keeps the symbol that identifies it. */
.rlab.markonly{font-size:0}
.rlab.markonly i{width:9px;height:9px}

/* The view toggle is never hidden, at any sheet position. Losing the only
   route between the mountain and the map is not a state worth having. */
.views{opacity:1 !important;pointer-events:auto !important}

/* ---- One control language, everywhere ----
   Said several times and not yet fully done: a control here is a word or a
   mark, never a container. Any residual panel, border or fill on the stage
   controls is removed at the end of the sheet so nothing can reintroduce one. */
.seg,.views,.ground,.layers{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.seg button,.views button,.ground button,.layers button{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.85);
}
.seg button + button{box-shadow:none !important}

/* The only "about" on the stage: a mark, not a paragraph. */
.about:hover,.about:active{color:var(--info);opacity:1}

/* Nothing floats in the middle of the picture. The rail owns the bottom-left,
   locate owns the bottom-right, and the stage between them stays clear. */
.stagebar{justify-content:flex-start}

/* ---- Heads-up layer ---- */
.hud{position:absolute;inset:0;pointer-events:none;z-index:7}
.hud > *{pointer-events:auto}

/* Compass. A rose and a letter — no dial housing, no bezel. */
.hud-compass svg{width:100%;height:100%;display:block}
.hud-compass .ring{fill:none;stroke:rgba(232,240,250,.28);stroke-width:1.2}
.hud-compass .north{fill:#ff6b6b}
.hud-compass .south{fill:rgba(232,240,250,.6)}

/* Scale bar, so relief has a size you can name. */
.hud-scale i{display:block;height:3px;background:rgba(232,240,250,.85);
  border-left:1px solid #e8f0fa;border-right:1px solid #e8f0fa;
  box-shadow:0 1px 2px rgba(0,0,0,.9);min-width:24px}
.hud-scale span{font-family:var(--mono);font-size:9.5px;font-weight:700;color:#dbe6f2;
  text-shadow:0 1px 2px rgba(0,0,0,.95)}

/* The legend folds away. Collapsed it is a single line; open it carries the
   conditions, the sun and the run key; full screen it gets the whole stage. */
/* Closed, only the mark shows. The words arrive with the panel. */
.legend2[data-open="true"] .l2-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;padding:4px 12px 10px}
.l2-grid dt{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint)}
.l2-grid dd{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.2}
.l2-sun{display:flex;flex-direction:column;gap:2px;padding:8px 12px;
  border-top:1px solid rgba(120,145,175,.14);
  font-family:var(--mono);font-size:9.5px;color:var(--dim)}
.l2-runs{list-style:none;display:flex;flex-wrap:wrap;gap:5px 12px;padding:9px 12px;
  border-top:1px solid rgba(120,145,175,.14);font-size:10px;color:var(--dim)}
.l2-runs li{display:flex;align-items:center;gap:5px}
.l2-full{width:100%;min-height:40px;background:transparent;border:0;
  border-top:1px solid rgba(120,145,175,.14);cursor:pointer;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--info)}

/* Full screen: the mountain takes the window, the sheet and map step aside. */
body[data-stage="full"] .app{grid-template-rows:1fr !important;grid-template-columns:1fr !important}
body[data-stage="full"] .stage{grid-row:1;grid-column:1;z-index:40}
body[data-stage="full"] .mapwrap,
body[data-stage="full"] .panel{display:none !important}
body[data-stage="full"] body[data-stage="full"] .l2-full::after{content:' — exit'}

@media (pointer:coarse){
        .l2-full{min-height:48px}
      body[data-stage="full"] .legend2,
  body[data-stage="full"]   body[data-stage="full"] }

/* ================= Heads-up: one stack, top right =================
   Everything that floats over the mountain lives in a single column in the
   top-right corner. Nothing sits over the terrain a reader is studying, and
   nothing has to be dodged to see the runs. */
.hud-stack{position:absolute;top:10px;right:10px;z-index:8;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px}

/* --- The instrument cluster ---
   Compass, legend mark and scale read as one small unit rather than three
   floating objects. Site colours throughout: the north needle is the same
   teal the brand mark uses, not a generic red. */
.hud-stack{gap:0;background:rgba(6,11,20,.55);backdrop-filter:blur(12px);
  border:1px solid rgba(120,145,175,.18);border-radius:var(--r);overflow:hidden;
  align-items:stretch}

.hud-compass{width:100%;height:44px;padding:4px 0;border:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.hud-compass svg{width:38px;height:38px}
.hud-compass svg{width:100%;height:100%;display:block}
.hud-compass .ring{fill:none;stroke:rgba(180,200,222,.22);stroke-width:1}
.hud-compass .ticks line{stroke:rgba(180,200,222,.4);stroke-width:1}
.hud-compass .ticks .major{stroke:rgba(226,236,247,.8);stroke-width:1.5}
.hud-compass .ticks .mid{stroke:rgba(226,236,247,.55);stroke-width:1.1}
.hud-compass .ticks,.hud-compass .letters,.hud-compass .rose{
  transform-origin:50% 50%;transition:transform .12s linear}
/* The brand's teal for north, the way the mark's weak-layer band reads. */
.hud-compass .north{fill:#2dd4bf}
.hud-compass .south{fill:rgba(200,214,230,.5)}
.hud-compass .hub{fill:rgba(226,236,247,.85)}
.hud-compass text{font-family:var(--mono);font-weight:700;text-anchor:middle;
  paint-order:stroke;stroke:rgba(3,8,16,.7);stroke-width:2}
.hud-compass .cn{font-size:9px;fill:#2dd4bf}
.hud-compass .cl{font-size:8px;fill:rgba(200,214,230,.7)}

/* --- Legend mark --- */
.legend2-mark{width:100%;height:30px;padding:0;border:0;background:transparent;
  border-top:1px solid rgba(120,145,175,.16);
  cursor:pointer;color:var(--dim);display:flex;align-items:center;justify-content:center}
.legend2-mark svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round}
.legend2-mark.on,.legend2-mark:hover{color:var(--info)}

/* --- Scale, inside the cluster --- */
.hud-scale{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:5px 4px 6px;border-top:1px solid rgba(120,145,175,.16)}
.hud-scale i{display:block;height:2px;background:rgba(200,214,230,.8);
  border-left:1px solid rgba(226,236,247,.9);border-right:1px solid rgba(226,236,247,.9);
  min-width:16px;max-width:34px}
.hud-scale span{font-family:var(--mono);font-size:8.5px;font-weight:700;
  letter-spacing:.04em;color:var(--dim);white-space:nowrap}

/* --- The panel ---
   Anchored under the stack, never taller than the stage, and it can always be
   closed: the mark toggles it, the cross closes it, Minimise closes it, and
   Escape closes it. A panel with no visible way out is the thing that traps
   people, so there are four. */
.legend2{position:absolute;top:10px;right:114px;z-index:9;
  width:0;max-width:0;overflow:hidden;opacity:0;pointer-events:none;
  border-radius:var(--r);
  background:linear-gradient(180deg, rgba(10,16,26,.94), rgba(6,11,20,.97));
  backdrop-filter:blur(16px);border:1px solid rgba(120,145,175,.2);
  box-shadow:0 12px 34px rgba(0,0,0,.55);
  transition:opacity .16s ease}
.legend2[data-open="true"]{
  width:min(300px, calc(100vw - 132px));max-width:none;opacity:1;pointer-events:auto;
  /* Stops short of the control rail along the bottom: covering the 3D/MAP
     tabs would hide the way out of this view entirely. */
  max-height:calc(100% - 92px);display:flex;flex-direction:column}
.l2-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 8px 9px 12px;border-bottom:1px solid rgba(120,145,175,.16);flex:0 0 auto}
.l2-title{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:#c3d1e0}
.l2-close{width:30px;height:30px;border:0;background:transparent;cursor:pointer;
  color:var(--dim);font-size:19px;line-height:1}
.l2-close:hover{color:var(--ink)}
.legend2-body{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.l2-terrain{padding:9px 12px;border-top:1px solid rgba(120,145,175,.14);
  font-family:var(--mono);font-size:9.5px;line-height:1.5;color:var(--dim)}
.l2-foot{display:flex;border-top:1px solid rgba(120,145,175,.16);flex:0 0 auto}
.l2-full,.l2-min{flex:1;min-height:42px;background:transparent;border:0;cursor:pointer;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase}
.l2-full{color:var(--info)}
.l2-min{color:var(--dim);border-left:1px solid rgba(120,145,175,.16)}

@media (pointer:coarse){
  .hud-stack{top:10px;right:10px;gap:0}
  .hud-stack{width:112px}
  .hud-compass{height:50px}
  .hud-compass svg{width:42px;height:42px}
  .legend2-mark{height:38px}
  .legend2{top:10px;right:122px;bottom:auto}
  .legend2[data-open="true"]{width:min(280px, calc(100vw - 140px));
    max-height:calc(100% - var(--sheet, 30svh) - 96px)}
  .l2-full,.l2-min{min-height:48px}
}

body[data-stage="full"] .legend2[data-open="true"]{max-height:min(80vh, calc(100% - 20px))}

/* ---- The rail, as part of the instrument cluster ----
   Stacked, full width of the housing, divided by hairlines. The view toggle
   reads as the top of one instrument rather than a separate bar in another
   corner of the picture. */
.hud-stack{width:104px}
.hud-stack .seg{display:flex;width:100%;border-radius:0}
.hud-stack .seg + .seg{border-top:1px solid rgba(120,145,175,.16)}
.hud-stack .seg button{flex:1 1 0;min-height:30px;min-width:0;padding:0 2px;
  font-size:9px;letter-spacing:.06em;white-space:nowrap}
/* The map's ground toggle is meaningless while looking at the mountain. */
.hud-stack .ground{display:none}
body[data-view="map"] .hud-stack .ground{display:flex}
.hud-stack .layers{display:flex;flex-direction:column;width:100%;
  border-top:1px solid rgba(120,145,175,.16)}
.hud-stack .layers button{min-height:30px;padding:0 8px;font-size:9px;text-align:center}
.hud-stack .layers button + button{border-top:1px solid rgba(120,145,175,.1)}
.hud-stack .stagebar + .hud-compass{border-top:1px solid rgba(120,145,175,.16)}
.hud-stack .prov{display:none}

/* The layer buttons belong to the map, the compass and scale to the mountain. */
body[data-view="map"] .hud-compass,
body[data-view="map"] .hud-scale{display:none}
body[data-view="mountain"] .hud-stack .layers{display:none}

@media (pointer:coarse){
  .hud-stack .seg button{min-height:40px;font-size:11px}
  .hud-stack .layers button{min-height:38px;font-size:10px}
}

/* ---- the live position block in the legend ---- */
/* First in the panel because it is the reason the panel gets opened on a
   chairlift. Everything below it is context; this is the answer. */
.l2-fix{padding:9px 11px 10px;border-bottom:1px solid var(--rule2)}
.fx-where{margin:0 0 7px;font-size:12.5px;line-height:1.3}
.fx-run{font-weight:700}
.fx-run.diff-novice,.fx-run.diff-easy{color:#3ddc97}
.fx-run.diff-intermediate{color:#38bdf8}
.fx-run.diff-advanced,.fx-run.diff-expert,.fx-run.diff-freeride,.fx-run.diff-extreme{color:#dbe6f2}
.fx-off{font-weight:700;color:var(--warn)}
.fx-near{color:var(--dim);font-size:11.5px}
.fx-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;margin:0}
.fx-grid div{display:flex;justify-content:space-between;gap:8px;min-width:0}
.fx-grid dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mut)}
.fx-grid dd{margin:0;font-family:var(--mono);font-size:11.5px;color:var(--ink)}