/* Phone flight card layout (First Class, phones in landscape). The map runs edge to edge; flight data
 * lives in one card bottom-left, tools in a slim bar bottom-right. */

body.airshow-phone-card-layout #topbar,
body.airshow-phone-card-layout #panel,
body.airshow-phone-card-layout #cockpit-view-mode-dock {
  display: none !important;
}
body.airshow-phone-card-layout #topbar-close-dock {
  top: calc(env(safe-area-inset-top, 0px) + 10px);
}
body.airshow-phone-card-layout #map-mini-topbar-dock,
body.airshow-phone-card-layout #bearing-indicator {
  top: calc(env(safe-area-inset-top, 0px) + 10px);
}
body.airshow-phone-card-layout #map-zoom-dock {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 76px) !important;
}
body.airshow-phone-card-layout #map-credit-anchor {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 88px) !important;
}
body.airshow-phone-card-layout.airshow-phone-sheet-open #map-credit-anchor {
  left: calc(env(safe-area-inset-left, 0px) + 402px) !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
}
body.airshow-phone-card-layout #topbar-settings-popup {
  top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
  height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 90px) !important;
  max-height: none !important;
}
/* Settings → Others → Flight Card only changes phones, so only phones show it. While the card is on there
   is no top or bottom bar to flip, so that row waits until the card is switched off. */
html:not(.airshow-mobile-runtime) #topbar-settings-popup .topbar-settings-item-phone-only,
body.airshow-phone-card-layout #topbar-settings-popup .topbar-settings-item-bars-only {
  display: none;
}
#phone-flight-card,
#phone-flight-bar,
#phone-flight-panel {
  display: none;
}
body.airshow-phone-card-layout #phone-flight-card,
body.airshow-phone-card-layout #phone-flight-bar {
  display: flex;
}
body.airshow-phone-card-layout #phone-flight-panel:not([hidden]) {
  display: block;
}
body.airshow-phone-card-layout.airshow-seat-view-active #phone-flight-card {
  display: none;
}
/* Full-screen pages (Flight Information, Compass, World clock) end above the card and the bar, the way they end
   above the bottom band in the classic layout, so nothing on them sits under the card. */
body.airshow-phone-card-layout #topbar-flightinfo-popup,
body.airshow-phone-card-layout #topbar-world-cities-popup,
body.airshow-phone-card-layout #topbar-compass-popup {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 84px) !important;
}
/* Under such a page the card and the bar float on the page's own colour rather than on the map. */
body.airshow-phone-card-layout:is(.airshow-flight-info-popup-open, .airshow-compass-popup-open, .airshow-world-cities-popup-open)::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(env(safe-area-inset-bottom, 0px) + 84px);
  z-index: 1309;
  pointer-events: none;
  background: color-mix(in oklab, var(--airshow-info-page-bg) 72%, #000);
  animation: pfc-page-floor-in 200ms ease;
}
@keyframes pfc-page-floor-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Card: an IFE flight-data plate ------------------------------------------------------------------ */
.pfc {
  --pfc-navy: #1d0d78;
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 10px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  z-index: 1320;
  box-sizing: border-box;
  flex-direction: column;
  width: 404px;
  height: 74px;
  padding: 14px 12px 8px;
  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%);
  color: #fff;
  box-shadow: 0 12px 30px rgba(4, 0, 30, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: pointer;
  transition: width 240ms cubic-bezier(0.2, 0.8, 0.2, 1), height 240ms cubic-bezier(0.2, 0.8, 0.2, 1), border-radius 240ms ease;
}
.pfc.is-expanded {
  background: linear-gradient(180deg, rgba(31, 16, 124, 0.985) 0%, rgba(17, 8, 74, 0.985) 100%);
  width: 384px;
  height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px);
  border-radius: 18px;
  cursor: default;
}
.pfc-grab {
  position: absolute;
  left: 50%;
  top: 0;
  width: 64px;
  height: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  cursor: pointer;
}
.pfc-grab span {
  display: block;
  width: 30px;
  height: 3px;
  margin: 4px auto 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.38);
}
.pfc-compact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: opacity 120ms ease;
}
.pfc.is-expanded .pfc-compact {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.pfc-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
}
.pfc-callsign {
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.pfc-code {
  letter-spacing: 0.06em;
}
/* Departure and destination codes open the airport card (on the compact card and in the sheet). */
.pfc-code,
.pfs-end {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease;
}
.pfc-code::before {
  /* A thumb-sized target without moving the row. */
  content: "";
  position: absolute;
  inset: -12px -8px;
}
.pfc-code:active,
.pfs-end:active {
  background-color: rgba(255, 255, 255, 0.14);
}
.pfc-code:focus-visible,
.pfs-end:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}
.pfc-track {
  position: relative;
  flex: 1 1 auto;
  height: 3px;
  min-width: 40px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
}
.pfc-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--pfc-progress, 0%);
  border-radius: 3px;
  background: #fff;
}
.pfc-plane {
  position: absolute;
  top: 50%;
  left: var(--pfc-progress, 0%);
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  color: #fff;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.55));
}
.pfc-plane svg {
  width: 100%;
  height: 100%;
  display: block;
}
.pfc-left {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}
.pfc-left small,
.pfc-v small,
.pfs-route-meta small {
  font-size: 0.72em;
  font-weight: 600;
  opacity: 0.74;
  margin-left: 1px;
}
.pfc-left > small {
  margin-left: 2px;
}
.pfc-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr 0.9fr 1.35fr;
}
.pfc-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 0 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.pfc-row2 .pfc-cell:first-child {
  padding-left: 0;
  border-left: 0;
}
.pfc-k {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}
.pfc-v {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.pfc-v i,
.pfs-fixes i {
  display: inline-flex;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  color: #8fe9ff;
  vertical-align: 0;
}
.pfc-v i svg,
.pfs-fixes i svg {
  width: 100%;
  height: 100%;
}
.pfc-v em {
  font-style: normal;
  font-weight: 600;
  opacity: 0.86;
}

/* --- Sheet ------------------------------------------------------------------------------------------- */
.pfc-sheet {
  display: none;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  opacity: 0;
  transition: opacity 180ms ease 60ms;
}
.pfc.is-expanded .pfc-sheet {
  display: flex;
  opacity: 1;
}
/* While the card shrinks back, the sheet fades out over the compact card instead of leaving an empty panel. */
.pfc.is-collapsing .pfc-sheet {
  display: flex;
  opacity: 0;
  transition: opacity 140ms ease;
}
.pfs-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  cursor: grab;
}
.pfs-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pfs-callsign {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.pfs-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.66);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pfs-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}
.pfs-close svg {
  width: 18px;
  height: 18px;
}
.pfs-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-bottom: 6px;
  scrollbar-width: none;
  scroll-snap-type: y mandatory;
}
/* At rest the list always stops at the start of a row, so nothing is left half-hidden under the header. The
   space added after the last row (measured by the script) lets the final rows reach the top as well. */
.pfs-body > *,
.pfs-grid > .pfc-cell:nth-child(4n + 1),
.pfs-fixes > li {
  scroll-snap-align: start;
}
.pfs-body > .pfs-section,
.pfs-body > .pfs-route-meta {
  scroll-margin-top: 8px;
}
.pfs-body::after {
  content: "";
  display: block;
  height: var(--pfs-end-space, 0px);
}
.pfs-body::-webkit-scrollbar {
  display: none;
}
.pfs-route {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 2px;
}
.pfs-route .pfc-track {
  height: 3px;
}
.pfs-end {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  margin: -6px -8px;
  padding: 6px 8px;
  border-radius: 9px;
}
.pfs-end.is-dest {
  align-items: flex-end;
}
.pfs-end b {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1;
}
.pfs-end span {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.62);
}
.pfs-route-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
}
.pfs-route-meta b {
  color: #fff;
  font-weight: 700;
}
.pfs-grid,
.pfs-times {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 10px;
  overflow: clip;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.10);
}
.pfs-times {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 6px;
}
.pfs-grid .pfc-cell,
.pfs-times .pfc-cell {
  padding: 7px 8px;
  border-left: 0;
  background: rgba(9, 4, 44, 0.72);
}
.pfs-grid .pfc-k,
.pfs-times .pfc-k {
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 9.5px;
}
.pfs-section {
  margin: 12px 0 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
}
.pfs-fixes {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.pfs-fixes li {
  display: grid;
  grid-template-columns: 16px 1fr auto 64px;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.pfs-fixes li:first-child b {
  color: #8fe9ff;
}
.pfs-fixes li span:last-child {
  text-align: right;
  color: rgba(255, 255, 255, 0.66);
}
.pfs-fixes small {
  font-size: 0.78em;
  opacity: 0.74;
}
.pfs-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
.pfs-actions button {
  flex: 1 1 0;
  min-height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

/* --- Bar and its panels ------------------------------------------------------------------------------ */
.pfb {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  z-index: 1320;
  gap: 2px;
  padding: 4px;
  border-radius: 14px;
  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);
}
.pfb button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 64px;
  height: 46px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  font: inherit;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.pfb button svg {
  width: 19px;
  height: 19px;
}
.pfb button[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.pfp {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
  z-index: 1321;
  box-sizing: border-box;
  width: 300px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(16, 7, 70, 0.96);
  color: #fff;
  box-shadow: 0 16px 40px rgba(4, 0, 30, 0.55);
  animation: pfp-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes pfp-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.pfp-title {
  margin: 0 2px 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
}
.pfp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.pfp-grid-views {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pfp-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  padding: 8px 4px 6px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.86);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.pfp-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
}
.pfp-icon svg {
  width: 100%;
  height: 100%;
}
/* Lit tile = that control is on (same annunciator idea as the cabin panel). */
.pfp-tile[aria-pressed="true"] {
  background: #f6f4ff;
  border-color: #fff;
  color: #1d0d78;
}
.pfp-tile::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.pfp-tile[aria-pressed="true"]::after {
  background: #2fdc98;
  box-shadow: 0 0 6px rgba(47, 220, 152, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .pfc,
  .pfc-compact,
  .pfc-sheet,
  .pfc.is-collapsing .pfc-sheet,
  .pfc-code,
  .pfs-end,
  .pfb button,
  .pfp-tile {
    transition: none;
  }
  .pfp,
  body.airshow-phone-card-layout::after {
    animation: none;
  }
}