/* Flight navigation uses the existing radar rack and user-selected range. */
#flightUI .radar-wrap{border-radius:7px;border-color:#b7d8c15e;background:linear-gradient(145deg,#15332ee0,#0c252be0);backdrop-filter:none}
#flightUI .radar-wrap>span.flight-radar-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 4px;align-items:center;line-height:1.05;font-size:10px;bottom:5px;left:8px;right:8px;text-shadow:0 1px 2px #071b20}
#flightUI .flight-radar-footer small{min-width:0;font:inherit;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#flightUI .flight-radar-footer b{font:inherit;color:#deedc2;white-space:nowrap}
#flightUI #radarStatusLabel{color:#d5eebc}
#flightUI #radarDetailLabel{grid-column:1/-1;color:#b9d9d0;font-size:.88em}
.phone-ui #flightUI .bottom-flight{height:96px}
.phone-ui #flightUI .radar-wrap{width:80px;min-width:80px;height:96px;opacity:.95}
.phone-ui #flightUI .radar-wrap canvas{width:78px;height:76px}
.phone-ui #flightUI .radar-wrap>span.flight-radar-footer{left:3px;right:3px;bottom:3px;gap:2px 3px;font-size:7px;line-height:1}
.phone-ui #flightUI #radarDetailLabel{font-size:6px}
@media(orientation:portrait) and (max-width:360px){
 .phone-ui #flightUI .bottom-flight{height:82px}
 .phone-ui:has(#phoneControls[data-state=flight]) #flightUI .radar-wrap{width:64px;min-width:64px;height:82px}
 .phone-ui:has(#phoneControls[data-state=flight]) #flightUI .radar-wrap canvas{width:62px;height:62px}
 .phone-ui #flightUI .radar-wrap>span.flight-radar-footer{font-size:6px;left:2px;right:2px;bottom:3px}
}
@media(orientation:landscape){
 .phone-ui #flightUI .bottom-flight{height:84px}
 .phone-ui #flightUI .radar-wrap{width:68px;min-width:68px;height:84px}
 .phone-ui #flightUI .radar-wrap canvas{width:66px;height:64px}
}
@media(orientation:landscape) and (max-height:330px){
 .phone-ui #flightUI .bottom-flight{height:64px}
 .phone-ui #flightUI .radar-wrap{width:50px;min-width:50px;height:64px}
 .phone-ui #flightUI .radar-wrap canvas{width:48px;height:46px}
 .phone-ui #flightUI .radar-wrap>span.flight-radar-footer{font-size:5px;gap:1px 2px;left:2px;right:2px;bottom:2px}
 .phone-ui #flightUI #radarDetailLabel{font-size:5px}
}
@media(orientation:landscape) and (min-height:301px) and (max-height:330px){
 /* Keep the threat alert clear with a deep home indicator without moving
    the readout rack toward the movement stick. */
 .phone-ui #flightUI .bottom-flight{height:60px}
 .phone-ui #flightUI .radar-wrap{height:60px}
 .phone-ui #flightUI .radar-wrap canvas{height:42px}
}
@media(orientation:landscape) and (max-height:300px){
 /* The smallest browser viewport keeps its reviewed emergency/alert lane. */
 .phone-ui #flightUI .bottom-flight{height:35px}
 .phone-ui #flightUI .radar-wrap{height:35px;width:34px;min-width:34px}
 .phone-ui #flightUI .radar-wrap canvas{width:32px;height:32px}
 .phone-ui #flightUI .radar-wrap>span.flight-radar-footer{display:none}
}