/* One shared information slot: switching modes never resizes the map. */
.app,.app.flight-active{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr);
grid-template-rows:auto auto minmax(180px,1fr);
height:100vh;
height:var(--viewport-height,100vh);
min-height:480px;
padding:1rem 1rem 0;
gap:.7rem}

.info-slot{
display:grid;
grid-template-columns:minmax(0,1fr);
min-width:0}

.info-slot>.readout,.info-slot>#flight-panel{
grid-area:1/1;
min-width:0;
align-self:start}

.info-slot>#flight-panel{
margin:0;
padding:.6rem .8rem}

.info-slot>#flight-panel[hidden]{
display:block!important;
visibility:hidden;
pointer-events:none}

.flight-active .info-slot>.readout{
visibility:hidden;
pointer-events:none}

.app>.map-area{
min-height:0;
min-width:0;
margin-inline:-1rem}

.app>.topbar{
min-width:0}

.app>footer{
position:absolute;
top:100%;
left:0;
right:0;
padding:1rem;
background:var(--bg)}

#flight-result{
min-height:1.4em}

@media(max-width:700px){
.app,.app.flight-active{
height:100vh;
height:var(--viewport-height,100vh);
min-height:640px}
#flight-form{
gap:.4rem}
#flight-result{
margin-top:.4rem;
min-height:2.6em}
}

#flight-form label{
position:relative}
#flight-form input{
width:100%;
min-width:0;
font:inherit;
font-size:.9rem;
background:#081a27;
color:var(--text);
border:1px solid #476371;
border-radius:.3rem;
padding:.6rem}
.city-options{
position:absolute;
top:100%;
left:0;
right:0;
z-index:30;
max-height:min(19rem,40dvh);
overflow-y:auto;
overscroll-behavior:contain;
touch-action:pan-y;
background:#102a38;
border:1px solid #65858f;
border-radius:0 0 .4rem .4rem;
box-shadow:0 .6rem 1.5rem #0007}
.city-options [role=option]{
padding:.65rem .75rem;
min-height:44px;
cursor:pointer;
color:var(--text);
font-size:.9rem;
display:grid;
gap:.2rem}
.city-options [role=option]:hover,.city-options [aria-selected=true]{
background:#315361}
.city-options small{
color:#a7bec6;
font-size:.7rem}
.city-options p{
padding:.7rem}
#flight-panel{
position:relative;
z-index:12}

/* Mobile map grows downward;
 uniform cover avoids distorted geography. */
@media(max-width:700px){

 .app,.app.flight-active{
height:100vh;
height:var(--viewport-height,100vh);
min-height:640px;
grid-template-rows:auto auto minmax(180px,1fr) auto;
align-content:stretch}

 .app>.map-area{
height:auto;
min-height:0;
max-height:none}

 .app>footer{
position:static;
padding:0 0 max(.3rem,env(safe-area-inset-bottom))}

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

 footer .controls{
border-top:0;
margin:0;
padding:0;
gap:.3rem}

 footer .speed-controls{
font-size:.75rem;
padding:.1rem}

 footer .speed-controls button{
min-height:2.4rem;
padding:.35rem .5rem}

 footer .reset,footer summary{
font-size:.72rem;
padding:.3rem .5rem;
min-height:2rem}

 .city-popup{
max-height:calc(100% - 12px);
overflow-y:auto}

}

.map-page .city-popup{
left:6px!important;
right:6px!important;
width:auto!important;
max-width:none!important}

.city-popup .share-dialog{
inset:.5rem .5rem auto auto;
width:min(19rem,calc(100% - 1rem));
min-height:0;
padding:.35rem;
grid-template-columns:minmax(0,1fr) auto;
gap:.3rem;
align-items:center}
.city-popup .share-dialog strong{
display:none}
.city-popup .share-dialog input{
height:2.2rem;
padding:.35rem;
font-size:.65rem}
.city-popup .share-dialog>button:not(.share-dialog-close){
height:2.2rem;
min-height:2.2rem;
padding:.3rem .5rem;
font-size:.68rem}
.city-popup .share-dialog-close{
display:none}

.timezone-picker{
position:absolute;
z-index:30;
left:1rem;
top:8.2rem;
width:min(22rem,calc(100vw - 2rem));
padding:.6rem;
background:#102b3a;
border:1px solid #65858f;
border-radius:.45rem;
box-shadow:0 .6rem 1.5rem #0008}
.timezone-picker input{
width:100%;
padding:.6rem;
background:#081a27;
border:1px solid #476371;
border-radius:.3rem;
color:var(--text)}
.timezone-city-list{
position:static;
max-height:16rem;
margin-top:.4rem;
overflow:auto;
border:0;
box-shadow:none}
.timezone-city{
display:grid;
gap:.15rem;
width:100%;
min-height:2.3rem;
padding:.55rem .7rem;
text-align:left;
border-radius:.25rem;
color:var(--text)}
.timezone-city small{color:#a7bec6;font-size:.72rem}
.timezone-city:hover{
background:#315361}

@media(max-width:700px){
.app>footer{
position:relative;
top:auto}
footer .credits{
display:flex;
position:absolute;
top:100%;
left:0;
right:0;
padding:.4rem 0}
}

/* User-activated presentation mode;
 preserve the map's geographic proportions. */
.saver-control{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:.3rem;
max-width:23rem}
#screensaver{
border:1px solid var(--line);
font-size:.85rem;
white-space:nowrap}
#screensaver-status{
font-size:.7rem;
color:var(--muted);
max-width:22rem;
text-align:right}

.screensaver-active{
overflow:hidden}
.screensaver-active .app,.screensaver-active .app.flight-active{
height:100vh;
height:var(--viewport-height,100vh);
min-height:0;
grid-template-rows:auto auto minmax(0,1fr)}

.screensaver-active .top-actions>:not(.saver-control),.screensaver-active .app>footer{
display:none!important}

@media(max-width:700px){
.top-actions{
flex-wrap:wrap;
justify-content:flex-end;
gap:.4rem}
.saver-control{
max-width:100%}
.screensaver-active .topbar{
flex-wrap:wrap}
.screensaver-active .saver-control{
max-width:65vw}
.screensaver-active #screensaver-status{
max-width:60vw}
}