/* Landing card: a printed arrival card with a passport-style rating stamp.
   PC: a boarding-pass card above the band. Phone: a low ticket strip so the landed aircraft stays in view. */
.landing-card-layer {
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 24px 100px;
  pointer-events: none;
  filter: drop-shadow(0 22px 34px rgba(3, 5, 18, 0.42)) drop-shadow(0 2px 4px rgba(3, 5, 18, 0.3));
}
.landing-card-layer[hidden] { display: none; }

.landing-card {
  --lc-paper: #fbfcfe;
  --lc-stub: #f1f3f8;
  --lc-ink: #17123f;
  --lc-sub: #5b6077;
  --lc-rule: #cfd3df;
  --lc-hair: #e1e4ec;
  --lc-band: var(--airshow-theme-color, #1D0D78);
  --lc-stamp: #1f52b5;
  --lc-stub-w: 238px;
  --lc-notch: 10px;
  position: relative;
  width: min(880px, 100%);
  border-radius: 14px;
  overflow: hidden;
  background: var(--lc-paper);
  color: var(--lc-ink);
  font-family: var(--airshow-ui-font-family, "Pretendard Variable", sans-serif);
  font-variant-numeric: tabular-nums;
  pointer-events: auto;
  -webkit-mask:
    radial-gradient(circle at calc(100% - var(--lc-stub-w)) 0, transparent var(--lc-notch), #000 calc(var(--lc-notch) + 0.5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at calc(100% - var(--lc-stub-w)) 100%, transparent var(--lc-notch), #000 calc(var(--lc-notch) + 0.5px)) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle at calc(100% - var(--lc-stub-w)) 0, transparent var(--lc-notch), #000 calc(var(--lc-notch) + 0.5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at calc(100% - var(--lc-stub-w)) 100%, transparent var(--lc-notch), #000 calc(var(--lc-notch) + 0.5px)) bottom / 100% 51% no-repeat;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 220ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.landing-card-layer.is-open .landing-card { opacity: 1; transform: none; }
.landing-card[data-rating="butter"] { --lc-stamp: #187447; }
.landing-card[data-rating="smooth"] { --lc-stamp: #1f4fb0; }
.landing-card[data-rating="firm"] { --lc-stamp: #a9571a; }
.landing-card[data-rating="hard"] { --lc-stamp: #bf2626; }

/* Navy band, like the airline strip across the top of a boarding pass. */
.landing-card-band {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 13px 26px 12px;
  background: var(--lc-band);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 60%);
  color: #fff;
}
.landing-card-band-main { display: grid; gap: 3px; min-width: 0; margin-right: auto; }
.landing-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.landing-card-eyebrow::before {
  content: "";
  width: 18px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'><path d='M2 16.5h20' stroke='black' stroke-width='1.8' stroke-linecap='round'/><path d='M3.6 4.2l1.9-.5 3.1 3 4.6-1.2L9.6.9l2.3-.6 6.2 4.4 3.3-.9c1-.3 2 .3 2.2 1.2.3 1-.3 1.9-1.2 2.2L6.7 11.3c-.9.2-1.8-.2-2.2-1L3 7.3z' fill='black' transform='rotate(16 12 8)'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'><path d='M2 16.5h20' stroke='black' stroke-width='1.8' stroke-linecap='round'/><path d='M3.6 4.2l1.9-.5 3.1 3 4.6-1.2L9.6.9l2.3-.6 6.2 4.4 3.3-.9c1-.3 2 .3 2.2 1.2.3 1-.3 1.9-1.2 2.2L6.7 11.3c-.9.2-1.8-.2-2.2-1L3 7.3z' fill='black' transform='rotate(16 12 8)'/></svg>") center / contain no-repeat;
}
.landing-card-title { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 24px; font-weight: 700; letter-spacing: -0.005em; }
.landing-card-band-side { display: grid; justify-items: end; gap: 3px; flex: none; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.84); }
.landing-card-x { display: none; }

.landing-card-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--lc-stub-w); }
.landing-card-main { display: grid; gap: 14px; padding: 16px 28px 14px; }
.landing-card-label,
.landing-card-metrics dt,
.landing-card-facts dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lc-sub);
}

/* The number and the stamp share one line: read the rate, see the grade. */
.landing-card-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 112px; }
.landing-card-rate { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; white-space: nowrap; }
.landing-card-rate b { font-size: 100px; font-weight: 760; line-height: 0.92; letter-spacing: -0.035em; }
.landing-card-rate span { font-size: 22px; font-weight: 650; color: var(--lc-sub); }
.landing-card.is-estimate .landing-card-rate b { font-size: 76px; color: #3a3f58; }

.landing-card-stamp {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-right: 10px;
  padding: 11px 24px 10px;
  border: 3.5px solid var(--lc-stamp);
  border-radius: 11px;
  box-shadow: inset 0 0 0 2.5px var(--lc-paper), inset 0 0 0 4px var(--lc-stamp);
  color: var(--lc-stamp);
  mix-blend-mode: multiply;
  opacity: 0;
  transform: rotate(-8deg) scale(1.55);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.4 1.5'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.4 1.5'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events: none;
}
.landing-card.is-stamped .landing-card-stamp {
  opacity: 0.94;
  transform: rotate(-8deg) scale(1);
  transition: opacity 120ms ease-out, transform 200ms cubic-bezier(0.3, 1.4, 0.5, 1);
}
.landing-card.is-estimate .landing-card-stamp { display: none; }
.landing-card-stamp-word { font-size: 44px; font-weight: 850; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; }
.landing-card-stamp-meta { font-size: 12px; font-weight: 750; letter-spacing: 0.16em; }

.landing-card-grade { display: grid; gap: 7px; }
.landing-card-scale-bar { position: relative; display: flex; gap: 2px; height: 9px; }
.landing-card-scale-bar i { display: block; height: 100%; }
.landing-card-scale-bar .seg-butter { flex: 12.5; border-radius: 5px 0 0 5px; background: #2f9a66; }
.landing-card-scale-bar .seg-smooth { flex: 25; background: #3b6fd0; }
.landing-card-scale-bar .seg-firm { flex: 37.5; background: #db8a3a; }
.landing-card-scale-bar .seg-hard { flex: 25; border-radius: 0 5px 5px 0; background: #d24343; }
.landing-card.is-estimate .landing-card-scale-bar i { filter: saturate(0.25) opacity(0.6); }
.landing-card-marker {
  position: absolute;
  top: -10px;
  width: 0;
  height: 0;
  margin-left: -7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid var(--lc-ink);
}
.landing-card-marker::after { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: 18px; background: var(--lc-ink); }
.landing-card-scale-labels { display: flex; gap: 2px; font-size: 11.5px; font-weight: 650; color: var(--lc-sub); }
.landing-card-scale-labels span:nth-child(1) { flex: 12.5; }
.landing-card-scale-labels span:nth-child(2) { flex: 25; }
.landing-card-scale-labels span:nth-child(3) { flex: 37.5; }
.landing-card-scale-labels span:nth-child(4) { flex: 25; }
.landing-card-note { font-size: 14px; font-weight: 650; color: var(--lc-ink); }

.landing-card-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding-top: 12px; border-top: 1px solid var(--lc-hair); }
.landing-card-metrics > div { display: grid; gap: 3px; padding: 0 14px; border-left: 1px solid var(--lc-hair); }
.landing-card-metrics > div:first-child { padding-left: 0; border-left: 0; }
.landing-card-metrics > div[hidden],
.landing-card.is-estimate .landing-card-metrics { display: none; }
.landing-card-metrics dt { font-size: 10px; }
.landing-card-metrics dd { margin: 0; font-size: 19px; font-weight: 700; }
.landing-card-source { margin: -4px 0 0; font-size: 11.5px; font-weight: 500; color: var(--lc-sub); }

.landing-card-stub {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 22px 18px;
  border-left: 2px dashed var(--lc-rule);
  background: var(--lc-stub);
}
.landing-card-facts { display: grid; margin: 0; }
.landing-card-facts > div { display: grid; gap: 3px; padding: 9px 0; border-bottom: 1px solid var(--lc-hair); }
.landing-card-facts > div:first-child { padding-top: 0; }
.landing-card-facts > div:last-child { border-bottom: 0; }
.landing-card-facts > div[hidden] { display: none; }
.landing-card-facts dt { font-size: 10px; }
.landing-card-facts dd { margin: 0; font-size: 19px; font-weight: 700; }
.landing-card-close {
  height: 42px;
  border: 0;
  border-radius: 8px;
  background: var(--lc-band);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: filter 150ms ease, transform 150ms ease;
}
.landing-card-close:hover { filter: brightness(1.18); }
.landing-card-close:active { transform: scale(0.98); }
.landing-card-close:focus-visible,
.landing-card-x:focus-visible { outline: 2px solid var(--lc-band); outline-offset: 3px; }

/* Phone: one low ticket strip over the band, under ~30% of the screen, so the aircraft on the runway stays visible. */
html.airshow-mobile-runtime .landing-card-layer { padding: 0 10px max(6px, env(safe-area-inset-bottom, 0px)); }
html.airshow-mobile-runtime .landing-card { --lc-stub-w: 148px; --lc-notch: 6px; width: min(860px, 100%); border-radius: 10px; }
html.airshow-mobile-runtime .landing-card-band { align-items: center; gap: 12px; padding: 4px 6px 4px 14px; }
html.airshow-mobile-runtime .landing-card-eyebrow { display: none; }
html.airshow-mobile-runtime .landing-card-title { font-size: 13.5px; }
html.airshow-mobile-runtime .landing-card-band-side { display: flex; gap: 0; font-size: 10.5px; }
html.airshow-mobile-runtime .landing-card-band-side span + span::before { content: "·"; margin: 0 6px; }
html.airshow-mobile-runtime .landing-card-x {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 5px 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
html.airshow-mobile-runtime .landing-card-x i { position: relative; width: 13px; height: 13px; border-radius: 3px; background: #d63b3b; }
html.airshow-mobile-runtime .landing-card-x i::before,
html.airshow-mobile-runtime .landing-card-x i::after { content: ""; position: absolute; left: 3px; top: 6px; width: 7px; height: 1.5px; background: #fff; transform: rotate(45deg); }
html.airshow-mobile-runtime .landing-card-x i::after { transform: rotate(-45deg); }
html.airshow-mobile-runtime .landing-card-main { display: flex; align-items: center; gap: 16px; padding: 7px 14px 8px; }
html.airshow-mobile-runtime .landing-card-hero { gap: 12px; min-height: 0; }
html.airshow-mobile-runtime .landing-card-label { font-size: 8.5px; letter-spacing: 0.1em; }
html.airshow-mobile-runtime .landing-card-rate { gap: 5px; }
html.airshow-mobile-runtime .landing-card-rate b { font-size: 40px; }
html.airshow-mobile-runtime .landing-card.is-estimate .landing-card-rate b { font-size: 32px; }
html.airshow-mobile-runtime .landing-card-rate span { font-size: 12px; }
html.airshow-mobile-runtime .landing-card-stamp { margin: 0; padding: 5px 10px 4px; gap: 2px; border-width: 2.5px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--lc-paper), inset 0 0 0 3px var(--lc-stamp); }
html.airshow-mobile-runtime .landing-card-stamp-word { font-size: 19px; }
html.airshow-mobile-runtime .landing-card-stamp-meta { font-size: 7.5px; letter-spacing: 0.12em; }
html.airshow-mobile-runtime .landing-card-grade { flex: 1 1 150px; gap: 4px; min-width: 0; }
html.airshow-mobile-runtime .landing-card-scale-bar { height: 6px; }
html.airshow-mobile-runtime .landing-card-marker { top: -8px; margin-left: -5px; border-left-width: 5px; border-right-width: 5px; border-top-width: 7px; }
html.airshow-mobile-runtime .landing-card-marker::after { height: 13px; }
html.airshow-mobile-runtime .landing-card-scale-labels { font-size: 9px; }
html.airshow-mobile-runtime .landing-card-note { font-size: 10.5px; }
html.airshow-mobile-runtime .landing-card-metrics { display: grid; grid-template-columns: none; gap: 5px; padding: 0 0 0 14px; border-top: 0; border-left: 1px solid var(--lc-hair); }
html.airshow-mobile-runtime .landing-card-metrics > div { gap: 1px; padding: 0; border-left: 0; }
html.airshow-mobile-runtime .landing-card-metrics > div[data-row="cl"],
html.airshow-mobile-runtime .landing-card-metrics > div[data-row="roll"],
html.airshow-mobile-runtime .landing-card-facts > div[data-row="dist"],
html.airshow-mobile-runtime .landing-card-facts > div[data-row="xp"],
html.airshow-mobile-runtime .landing-card-source,
html.airshow-mobile-runtime .landing-card-close { display: none; }
html.airshow-mobile-runtime .landing-card-metrics dt,
html.airshow-mobile-runtime .landing-card-facts dt { font-size: 8.5px; letter-spacing: 0.1em; }
html.airshow-mobile-runtime .landing-card-metrics dd,
html.airshow-mobile-runtime .landing-card-facts dd { font-size: 14px; }
/* The strip spans the full width on phone, so the map credit steps aside while it is open (as for other popups). */
html.airshow-mobile-runtime body.airshow-landing-card-open #map-credit-anchor,
html.airshow-mobile-runtime body.airshow-landing-card-open #map-credit-anchor .cesium-widget-credits,
html.airshow-mobile-runtime body.airshow-landing-card-open #map-credit-anchor .cesium-credit-expand-link {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html.airshow-mobile-runtime .landing-card-stub { justify-content: center; padding: 7px 14px 8px; }
html.airshow-mobile-runtime .landing-card-facts { gap: 5px; }
html.airshow-mobile-runtime .landing-card-facts > div { gap: 1px; padding: 0; border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .landing-card { transform: none; transition: opacity 150ms linear; }
  .landing-card-stamp,
  .landing-card.is-stamped .landing-card-stamp { transform: rotate(-8deg); transition: opacity 150ms linear; }
}