/* The map page fits the browser window;
 only menus/cards may scroll internally. */
html.map-page,html.map-page body{
height:100%;
overflow:hidden}

.map-page .app,.map-page .app.flight-active{
min-height:0;
grid-template-rows:auto auto minmax(0,1fr) auto;
overflow:hidden}

.map-page .app>footer{
position:relative;
top:auto;
left:auto;
right:auto;
padding:0 0 max(.3rem,env(safe-area-inset-bottom));
min-width:0}

.map-page footer .map-instructions,.map-page footer .map-caption{
display:none}

.map-page footer .controls{
border:0;
padding:0;
margin:0;
gap:.4rem}

.map-page footer .speed-controls button{
min-height:2.2rem;
padding:.3rem .6rem}

.map-page footer .reset,.map-page footer summary{
min-height:2.2rem;
padding:.3rem .6rem}

.map-page footer .credits{
position:static;
padding:.2rem 0;
line-height:1.2}

.map-page .screensaver-active .app{
grid-template-rows:auto auto minmax(0,1fr)}

.city-popup>.city-share{
position:absolute;
right:2.9rem;
top:.2rem;
display:grid;
place-items:center;
width:44px;
min-width:44px;
height:44px;
min-height:44px;
margin:0;
padding:.55rem;
border:0;
border-radius:.35rem;
background:transparent;
color:#d9c18f}

.city-popup>.city-share:hover{
background:#ffffff0c}
.city-popup>.city-share svg{
width:22px;
height:22px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round}

.share-dialog{
position:absolute;
z-index:3;
inset:.45rem;
box-sizing:border-box;
background:#102b3a;
border:1px solid #bda16b;
border-radius:.4rem;
padding:.8rem;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:.55rem;
box-shadow:0 .6rem 2rem #0008}
.share-dialog strong{
grid-column:1/-1;
font-size:.85rem;
padding:0}
.share-dialog input{
box-sizing:border-box;
min-width:0;
width:100%;
background:#081a27;
color:var(--text);
border:1px solid #476371;
border-radius:.3rem;
padding:.55rem;
font-size:.72rem}
.share-dialog>button:not(.share-dialog-close){
background:#294b58;
border:1px solid #65858f;
color:#f5d49a;
white-space:nowrap;
font-size:.75rem}
.share-dialog>button.copied{
color:#85e5be}
.share-dialog-close{
position:absolute;
right:.1rem;
top:.05rem;
min-width:2rem;
min-height:2rem;
padding:.1rem;
font-size:1.2rem}
.share-dialog strong{
padding-right:2rem}

@media(max-width:700px){
.map-page footer .credits{
display:none}
}