* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { overflow: hidden; }
.topbar { position: relative; z-index: 20; display: grid; align-items: center; }
.brand, nav, .account-actions { display: flex; align-items: center; }
nav { height: 100%; justify-content: center; }
nav button { position: relative; border: 0; background: transparent; cursor: pointer; white-space: nowrap; }
main { position: relative; height: calc(100% - var(--bar-height)); }
#map { position: absolute; inset: 0; }
.map-placeholder { height: 100%; display: grid; place-content: center; gap: 8px; text-align: center; }
.map-placeholder small { max-width: 280px; }
.places-panel { position: absolute; z-index: 10; display: flex; flex-direction: column; overflow: hidden; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; }
.places { display: grid; }
.place { position: relative; display: grid; align-items: center; cursor: pointer; }
.place-options { position: relative; }
.more-button { display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.place-menu { position: absolute; z-index: 30; }
.place-menu[hidden] { display: none; }
.place-menu button { display: block; width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; }
.empty { text-align: center; }
.empty-pin { display: grid; place-items: center; margin-inline: auto; border: 0; border-radius: 50%; cursor: pointer; }
.empty strong { display: block; }
@media (max-width: 760px) { .topbar nav { grid-column: 1 / -1; order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; } }