/* The tool buttons on the map (js/ui/tools.js): roads, land, remove, layers. Just the painted icons, no frame, a column at the
   left edge under the Goals and Events row on a desktop (a phone keeps its right column for that row and the alerts, so
   the tools take the left edge from the top bar down). A small handle on top folds them away; the state is remembered. */
.toolRail {
  --ic: 54px;
  position: absolute;
  left: max(10px, env(safe-area-inset-left, 0px));
  top: calc(var(--hudB, 64px) + 4px + 54px + 14px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  pointer-events: auto;
  zoom: var(--ui, 1);
}
.rbtn {
  flex: none;
  width: var(--ic);
  height: var(--ic);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 3px 1px rgba(24, 16, 8, 0.45));
  transition: transform 0.12s;
}
.rbtn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.rbtn:active {
  transform: translateY(2px) scale(0.96);
}
.rbtn:focus-visible,
.railHandle:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 12px;
}
/* the one that is on: lit from behind (no frame to colour) */
.rbtn[aria-pressed='true'] {
  filter: drop-shadow(0 0 3px #ffd84a) drop-shadow(0 0 7px #ffb21e) drop-shadow(0 3px 1px rgba(24, 16, 8, 0.45));
  transform: scale(1.06);
}
/* the handle: a small painted tab on the column's top, an arrow that points where the column goes */
.railHandle {
  position: relative;
  width: 44px;
  height: 40px;
  margin: -6px 0 -6px calc((var(--ic) - 44px) / 2);
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
}
.railHandle::before {
  content: '';
  position: absolute;
  left: 7px;
  right: 7px;
  top: 9px;
  bottom: 9px;
  border: 2px solid var(--bark);
  border-radius: 11px;
  background: var(--cream);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}
.railHandle svg {
  position: relative;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--bark);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(90deg); /* open: points up (fold away) */
  transition: transform 0.15s;
}
.toolRail.folded .railHandle svg {
  transform: rotate(-90deg); /* folded: points down (bring back) */
}
.toolRail.folded .rbtn {
  display: none;
}
@media (max-width: 700px) {
  .toolRail {
    --ic: 50px;
    left: 8px;
    top: calc(var(--hudB, 64px) + 6px);
  }
  /* the picker takes the whole phone: the buttons wait behind it */
  body.bopen:not(.bmini) .toolRail {
    display: none;
  }
}
/* a short screen (a phone on its side): the buttons close together */
@media (max-height: 620px) {
  .toolRail {
    gap: 4px;
  }
}
/* gone when the screen is something else: a photo, a visit, the camp, a mini-game, the gate. (Not while placing on a phone: the
   Roads button is how a path type is changed then.) */
body.photo .toolRail,
body.visiting .toolRail,
body.incamp .toolRail,
body.mgon .toolRail,
body.gateOn .toolRail,
body.bchoose .toolRail {
  display: none !important;
}