/* 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. */
.workspace {
  display: grid;
  grid-template-columns: var(--panel-width) 1fr;
  height: 100dvh;
}

.workspace__panel {
  display: flex;
  flex-direction: column;
  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) {
  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: 45dvh 1fr;
  }

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

  .workspace__map {
    order: 1;
  }
}