.app {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
}

.layout {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr;
  transition: grid-template-columns .42s cubic-bezier(.2,.9,.2,1);
}

.layout.layout-split {
  grid-template-columns: minmax(360px, 440px) 1fr;
}

.layout.layout-split.is-split-collapsed {
  grid-template-columns: 26px 1fr;
}

.map-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#map {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.map-fade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,.04) 22%, rgba(0,0,0,0) 36%),
    radial-gradient(circle at bottom center, rgba(0,0,0,.12), transparent 42%);
}

.floating-stack {
  position: absolute;
  right: 16px;
  bottom: calc(var(--sheet-peek) + 28px + var(--safe-bottom));
  z-index: 710;
  display: grid;
  gap: 12px;
  width: min(320px, calc(100% - 32px));
  pointer-events: none;
}

.floating-card {
  padding: 14px;
  pointer-events: auto;
}

.floating-card strong {
  display: block;
  margin-bottom: 4px;
}

.floating-card p,
.floating-card .mini-row {
  margin: 0;
  color: var(--color-text-muted);
}

.floating-card .mini-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  font-size: .82rem;
}