@media(max-width:700px){

 .city-popup{

  left:6px!important;

  width:calc(100% - 12px);

  max-width:none;

  max-height:calc(100% - 12px);

  padding:.6rem .65rem;

  font-size:.78rem;

 }

 .city-popup>button{
right:0;
top:0;
min-width:40px;
min-height:40px}

 .city-popup .city-comparison{
gap:.35rem;
padding-right:2rem}

 .city-popup .city-column+ .city-column{
padding-left:.35rem}

 .city-popup .city-column strong{
font-size:.85rem;
line-height:1.15}

 .city-popup .city-zone{
font-size:.56rem;
margin:.15rem 0 .25rem}

 .city-popup .city-date{
font-size:.62rem}

 .city-popup .city-clock{
font-size:1rem;
margin:.1rem 0}

 .city-popup .city-offset{
font-size:.6rem}

 .city-popup .city-difference{
position:relative;
display:flex;
align-items:center;
justify-content:center;
gap:.35rem;
margin:.45rem 0 .15rem;
padding:.3rem 0;
font-size:.68rem}

 .city-popup .city-difference::before{
content:'↔';
font-size:1rem;
color:var(--accent);
line-height:1}

 .city-popup .city-event{
gap:.15rem .45rem;
padding:.25rem 0}

 .city-popup .city-event-name{
font-size:.65rem}

 .city-popup .city-event-value b{
font-size:.8rem}

 .city-popup .city-event-value small{
font-size:.56rem}

 .city-popup .city-event-value:last-child{
padding-left:.35rem}

}

@media(max-height:650px) and (max-width:700px){

 .map-page .app{
padding-top:.5rem;
gap:.35rem}

 .map-page .readout{
gap:.4rem}

 .map-page .local-clock time{
font-size:2.5rem}

 .map-page .eyebrow,.map-page .date{
margin-top:.2rem;
margin-bottom:.2rem}

 .map-page #flight-panel p{
display:none}

}

@media(max-width:700px){
.timezone-picker input{
font-size:16px}
}