/* The map rail every map wears (O17): zoom +/-, full screen and the Map
   layers button (js/map.js mountMapRail, js/views/map_layers.js), in the
   planner's rail look, light and dark. The popup itself is .plan-layers
   (css/plan.css); only its placement inside a rail is here. */

/* :where() keeps the base at zero specificity: the planner's and the
   split's own rail rules (loaded earlier) place their rails. */
:where(.map-rail) {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  display: grid;
  justify-items: end;
  gap: 8px;
}
.map-rail [hidden] { display: none; }
.map-rail-btn {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  background: var(--map-chrome);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.map-rail-btn:hover { background: var(--surface-2); }
.map-rail-btn[aria-expanded='true'],
.map-rail-btn[aria-pressed='true'] { background: var(--text); border-color: var(--text); color: var(--bg); }
.map-rail-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Zoom in and out are one joined pair. */
.map-rail-zoom {
  display: grid;
  border-radius: var(--r-2);
  box-shadow: var(--shadow);
}
.map-rail-zoom .map-rail-btn { box-shadow: none; }
.map-rail-zoom .map-rail-btn:first-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.map-rail-zoom .map-rail-btn:last-child { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }

/* The Layers popup opens beside (or under) its button; js/views/plan/
   foldout.js sets top / right / max-width on open, these are the fallback. */
.map-rail .map-layers {
  position: absolute;
  top: 0;
  right: calc(100% + 8px);
  max-width: calc(100vw - 16px);
  max-height: min(78vh, calc(100dvh - var(--topbar-h) - 32px));
  overflow-y: auto;
  justify-items: stretch;
  text-align: start;
}

/* A map card in full screen: the map takes the room the legend leaves. */
.ride-map-card:fullscreen { display: flex; flex-direction: column; border-radius: 0; }
.ride-map-card:fullscreen .ride-map { flex: 1 1 auto; height: auto; }
.split-map:fullscreen { background: var(--surface-2); }