/* Where the First Class surfaces meet: keeps the "Now over" tab, popups, players and map controls of different
 * features from landing on top of each other, in the classic bands (PC and phones) and in the phone flight card
 * layout. Loaded after the feature sheets, so equal-specificity rules here win; !important only where the app or
 * a feature sets inline styles or !important rules. */

/* --- Every layout ------------------------------------------------------------------------------------------- */

/* "Now over" waits while the replay player, the landing card or the phone airport sheet is up: they open where
   the tab rises. */
body.airshow-replay-open .airshow-now-over,
body.airshow-landing-card-open .airshow-now-over,
html.airshow-airport-sheet-open .airshow-now-over {
  visibility: hidden !important;
}

/* Settings opens over the right-hand column; the cabin pill and compass it would half cover step aside. */
body:has(#topbar-settings-popup.open) #map-mini-topbar-dock,
body:has(#topbar-settings-popup.open) #bearing-indicator {
  visibility: hidden;
}
/* On phones with the classic bands it also reaches down to the right end of the "Now over" tab, which steps aside
   the same way. */
html.airshow-mobile-runtime body:not(.airshow-phone-card-layout):has(#topbar-settings-popup.open) .airshow-now-over {
  visibility: hidden !important;
}

/* The "Tower view ready" placard points at the camera button from just under the top bar, where the cabin pill
   sits; it is short-lived, so it shows on top of the pill. */
#camera-remote-callout {
  z-index: 1252;
}
/* Above a button in the lower half of the screen (the phone card's Views button, a flipped top bar) the placard
   sits above it and points down. */
#camera-remote-callout.is-above::after {
  top: auto;
  bottom: -5px;
  background: #222428;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}

/* --- Classic bands (PC, and phones with the flight card off) ---------------------------------------------------- */

/* The camera remote docks above the "Now over" tab instead of over it (band 75 px + tab 40 px on PC; band 51 px
   + tab 24 px on phones). */
body.airshow-now-over-shown:not(.airshow-phone-card-layout):not(.ui-vertical-flip) #camera-remote {
  --airshow-camera-remote-bottom: 126px;
}
html.airshow-mobile-runtime body.airshow-now-over-shown:not(.airshow-phone-card-layout):not(.ui-vertical-flip) #camera-remote {
  --airshow-camera-remote-bottom: 82px;
}

/* Phones: the landing strip covers the bottom of the screen, so the zoom buttons wait above it and the layers
   button, which would flip under the strip on short screens, waits until it closes. */
html.airshow-mobile-runtime body.airshow-landing-card-open:not(.airshow-phone-card-layout) #map-zoom-dock {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 124px) !important;
  translate: none !important;
}
html.airshow-mobile-runtime body.airshow-landing-card-open #map-layers-dock {
  visibility: hidden;
}

/* --- Phone flight card layout: the card sits bottom left (74 px), the Explore / Views / Settings bar bottom right
   (56 px), and every other surface stays clear of both. --------------------------------------------------------- */

/* "Now over" rises from the card's top edge the way it rises from the bottom band in the classic layout. */
html.airshow-mobile-runtime body.airshow-phone-card-layout .airshow-now-over {
  top: auto !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 82px) !important;
  left: calc(env(safe-area-inset-left, 0px) + 38px);
  max-width: 344px;
  transform: none;
  margin: 0;
  border-radius: 8px 8px 0 0;
  background-color: rgb(36, 20, 140);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02));
  box-shadow: 0 -4px 10px rgba(4, 0, 30, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
html.airshow-mobile-runtime body.airshow-phone-card-layout .airshow-now-over::before {
  background: radial-gradient(circle at 0 0, transparent 11.5px, rgb(36, 20, 140) 12px);
}
html.airshow-mobile-runtime body.airshow-phone-card-layout .airshow-now-over::after {
  background: radial-gradient(circle at 100% 0, transparent 11.5px, rgb(36, 20, 140) 12px);
}
/* The tab belongs to the card, so it goes wherever the card goes. */
html.airshow-mobile-runtime body.airshow-phone-card-layout.airshow-phone-sheet-open .airshow-now-over,
html.airshow-mobile-runtime body.airshow-phone-card-layout.airshow-seat-view-active .airshow-now-over {
  display: none !important;
}

/* The open sheet fills the left column, so the Close and Invite buttons parked in its top corner step aside. */
html.airshow-mobile-runtime body.airshow-phone-card-layout.airshow-phone-sheet-open #topbar-close-dock,
html.airshow-mobile-runtime body.airshow-phone-card-layout.airshow-phone-sheet-open #share-flight-btn {
  visibility: hidden;
}

/* Map credit: just above the bar on the right; the zoom buttons step up to make room. */
html.airshow-mobile-runtime body.airshow-phone-card-layout #map-credit-anchor {
  left: auto !important;
  right: calc(env(safe-area-inset-right, 0px) + 10px) !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 72px) !important;
  top: auto !important;
  translate: none !important;
}
html.airshow-mobile-runtime body.airshow-phone-card-layout #map-zoom-dock {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 98px) !important;
  translate: none !important;
}

/* The credit floats above everything (the app gives it the top z-index). Like other phone popups, the open
   Explore / Views panel covers its corner, so the credit steps aside until the panel closes. */
html.airshow-mobile-runtime body.airshow-phone-card-layout.airshow-phone-panel-open #map-credit-anchor,
html.airshow-mobile-runtime body.airshow-phone-card-layout.airshow-phone-panel-open #map-credit-anchor .cesium-widget-credits,
html.airshow-mobile-runtime body.airshow-phone-card-layout.airshow-phone-panel-open #map-credit-anchor .cesium-credit-expand-link {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Narrow phones (under 734 px): the open Explore / Views panel does not fit beside the card, so the card and its
   "Now over" tab step back while the panel is open, as they do for the landing card. */
@media (max-width: 733px) {
  html.airshow-mobile-runtime body.airshow-phone-card-layout.airshow-phone-panel-open #phone-flight-card,
  html.airshow-mobile-runtime body.airshow-phone-card-layout.airshow-phone-panel-open .airshow-now-over {
    visibility: hidden !important;
  }
}

/* Settings opens above the bar on the right on every phone width and ends above the credit line. */
html.airshow-mobile-runtime body.airshow-phone-card-layout #topbar-settings-popup {
  left: auto !important;
  right: calc(env(safe-area-inset-right, 0px) + 10px) !important;
  height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 124px) !important;
}

/* Camera remote: above the card and its tab instead of underneath them. */
html.airshow-mobile-runtime body.airshow-phone-card-layout #camera-remote {
  --airshow-camera-remote-bottom: 118px;
}

/* Replay: the player takes the card's place as a plate of the same family; the bar stays. */
html.airshow-mobile-runtime body.airshow-phone-card-layout.airshow-replay-open #phone-flight-card {
  display: none !important;
}
html.airshow-mobile-runtime body.airshow-phone-card-layout:not(.airshow-seat-view-active) #replay-dock {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 10px);
  right: calc(env(safe-area-inset-right, 0px) + 226px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  top: auto;
  z-index: 1320;
  padding: 10px 12px 4px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(36, 20, 140, 0.95) 0%, rgba(22, 10, 92, 0.95) 100%);
  box-shadow: 0 12px 30px rgba(4, 0, 30, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* Landing card: it covers the card row while it is up, so the card, bar and panel step back and the zoom
   buttons wait above it (the landing strip already hides the credit on phones while it is open). */
html.airshow-mobile-runtime body.airshow-phone-card-layout.airshow-landing-card-open #phone-flight-card,
html.airshow-mobile-runtime body.airshow-phone-card-layout.airshow-landing-card-open #phone-flight-bar,
html.airshow-mobile-runtime body.airshow-phone-card-layout.airshow-landing-card-open #phone-flight-panel {
  visibility: hidden;
}
html.airshow-mobile-runtime body.airshow-phone-card-layout.airshow-landing-card-open #map-zoom-dock {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 124px) !important;
}