/* Panel on the left, map filling the rest. On a phone they stack: map on top,
   list below, because you scan the list far more than you pan the map.

   Sized from the visual viewport rather than from `100dvh`, which on a phone
   keeps measuring down to the bottom of the display while the keyboard covers
   half of it — see viewport_controller.js, which publishes the height. */
.workspace {
  display: grid;
  grid-template-columns: var(--panel-width) 1fr;
  height: var(--viewport-height, 100dvh);
}

/* `min-width: 0` because the phone layout puts the panel in a `1fr` track, and
   an `fr` track floors itself at its content's min-content width. Without it a
   single unshrinkable row — the header was one — widens the track, and with it
   the map, the body, and the page: the whole app scrolls sideways to make room
   for one line. */
.workspace__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.workspace__map {
  position: relative;
  min-width: 0;
}

@media (max-width: 52rem) {
  /* The map keeps enough height to place a parcel in its street, and no more:
     what is read on a phone is the list, and every row is a card. Its share is
     taken from the screen the app actually has, not from `dvh`, or a keyboard
     would leave the panel a third of a half. */
  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: 35% 1fr;
  }

  .workspace__panel {
    order: 2;
    border-right: none;
    border-top: 1px solid var(--color-border);
  }

  .workspace__map {
    order: 1;
  }

  /* Folded away from the header — see .masthead__map. The panel takes the whole
     screen, and the map is dropped rather than merely covered so it stops
     drawing tiles nobody is looking at. */
  .map-hidden .workspace {
    grid-template-rows: 1fr;
  }

  .map-hidden .workspace__map {
    display: none;
  }

  /* Filling in the search form — see compose_controller.js. Nothing has been
     searched for yet, so the map has nothing to show that is worth a third of
     the screen, and the form is longer than the two thirds it leaves. Held
     until the search is sent rather than until the keyboard goes away: a DPE
     swatch, a radius and a scroll all close the keyboard, and the form is still
     being filled in through every one of them. */
  .composing .workspace {
    grid-template-rows: 1fr;
  }

  .composing .workspace__map {
    display: none;
  }

  /* Typing anywhere else in the panel — naming an address on the way to saving
     it, in a list where the map does have something to show. The keyboard has
     taken half the screen and there is nothing to see behind it, so the panel
     gets what is left rather than two thirds of it. Dropped the same way the
     fold does it, and the canvas's own ResizeObserver puts the map back in step
     on the way out. */
  .keyboard-open .workspace {
    grid-template-rows: 1fr;
  }

  .keyboard-open .workspace__map {
    display: none;
  }
}