/* Skytrack - Flight Deck v3 (flight + airport cards with hero pictures), cockpit HUD overlay, Zen mode, help overlay. */

#panelRight.fd { width: 392px; max-height: calc(100vh - 84px); overflow: hidden; display: flex; flex-direction: column; padding: 0; border-radius: 20px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .07) inset; }
.fd-body { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2b3a52 transparent; flex: 1 1 auto; min-height: 0; }

/* ---- hero picture ------------------------------------------------------------------------------------------------- */
.fd-hero { position: relative; flex: none; height: clamp(124px, 27vh, 222px); overflow: hidden; transition: height .5s cubic-bezier(.2, .8, .2, 1);
  background: radial-gradient(130% 150% at 28% 18%, #21456f 0%, #0f1b2f 55%, #080d17 100%); }
.fd-hero > img, .fd-hero > canvas.art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; opacity: 0; transform: scale(1.06);
  transition: opacity .7s ease, transform 7s cubic-bezier(.2, .7, .2, 1); }
.fd-hero > img.in, .fd-hero > canvas.art.in { opacity: 1; transform: scale(1); }
.fd-hero[data-kind="photo"] > canvas.art { opacity: 0 !important; }
.fd-hero[data-kind="render"] { background: linear-gradient(180deg, #0a2147 0%, #1f5a9b 36%, #9fc4e4 60%, #6d7782 60.4%, #3a424c 72%, #12161c 100%); }
.fd-hero > canvas.art { object-fit: contain; object-position: 50% 30%; padding: 14px 10px 46px; box-sizing: border-box; }
.fd-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 8, 15, .6) 0%, rgba(4, 8, 15, 0) 28%, rgba(4, 8, 15, 0) 40%, rgba(4, 8, 15, .55) 72%, rgba(5, 9, 16, .94) 100%); }
.fd-title { position: absolute; left: 16px; right: 16px; bottom: 12px; display: flex; align-items: flex-end; gap: 13px; min-width: 0; }
.fd-logo { flex: none; display: block; }
.fd-id { min-width: 0; }
.fd-cs { font-size: 30px; font-weight: 800; letter-spacing: .005em; line-height: 1.02; text-shadow: 0 2px 18px rgba(0, 0, 0, .65); transition: font-size .4s; }
.fd-sub { color: #d1dcec; font-size: 12.5px; margin-top: 4px; line-height: 1.3; text-shadow: 0 1px 10px rgba(0, 0, 0, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-sub.wrap { white-space: normal; max-width: 320px; }
.fd-iata { font-size: 40px; font-weight: 800; letter-spacing: .02em; line-height: 1; text-shadow: 0 2px 20px rgba(0, 0, 0, .7); }
.fd-hb { position: absolute; top: 12px; right: 12px; z-index: 6; display: flex; gap: 7px; }
.fd-hb .iconbtn { width: 34px; height: 34px; border-radius: 12px; color: #eaf2ff; background: rgba(8, 13, 22, .5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .16); transition: background .15s, transform .15s; }
.fd-hb .iconbtn:hover { background: rgba(30, 44, 70, .75); transform: translateY(-1px); }
.fd-hb .iconbtn svg { width: 17px; height: 17px; }
.fd-credit { position: absolute; left: 12px; top: 12px; z-index: 5; max-width: calc(100% - 110px); display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; font-size: 11px; color: #e3ecf9;
  background: rgba(8, 13, 22, .52); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .13); white-space: nowrap; overflow: hidden; }
.fd-credit span { overflow: hidden; text-overflow: ellipsis; }
.fd-credit .cr-ico { display: grid; place-items: center; flex: none; }
.fd-credit .cr-ico svg { width: 13px; height: 13px; }
.fd-credit a { color: #8fd3ff; text-decoration: none; flex: none; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.fd-credit a::before { content: "\00b7\00a0"; color: #7e90aa; }
.fd-credit a:hover { text-decoration: underline; }
.fd-credit.low { top: auto; bottom: auto; }
.fd-hero.airport .fd-credit { top: 12px; }
.airport .fd-credit { left: 12px; top: 54px; bottom: auto; font-size: 10.5px; max-width: calc(100% - 24px); }
.fd-seg { position: absolute; left: 12px; top: 12px; z-index: 6; display: flex; padding: 3px; border-radius: 12px; gap: 2px; background: rgba(8, 13, 22, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .15); }
.fd-seg button { display: flex; align-items: center; gap: 6px; padding: 5px 11px; border: 0; border-radius: 9px; background: transparent; color: #b8c6dc; font-size: 12px; font-weight: 600; }
.fd-seg button svg { width: 14px; height: 14px; }
.fd-seg button.on { background: rgba(76, 194, 255, .22); color: #fff; box-shadow: inset 0 0 0 1px rgba(76, 194, 255, .5); }
.fd-seg button:disabled { opacity: .35; cursor: default; }

/* ---- logos ---------------------------------------------------------------------------------------------------------- */
.alogo { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; border-radius: 13px; background: #fff; color: #fff; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .4); }
.alogo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.alogo.fb { box-shadow: 0 6px 20px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .25); }

/* ---- header chips / route / camera buttons ------------------------------------------------------------------------- */
.badge.dim { background: rgba(255, 255, 255, .06); color: var(--muted); font-weight: 600; }
.fd-badges { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 2px; }
.fd-badges .badge { margin: 0; }
.fd.compact .fd-badges { display: none; }
.fd-route { padding: 10px 16px 4px; }
.fd-route .ends { display: flex; justify-content: space-between; align-items: flex-start; }
.fd-route .ap { font-size: 28px; font-weight: 800; line-height: 1.05; letter-spacing: .01em; }
.fd-route .ap.r { text-align: right; }
.fd-route .ap small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0; margin-top: 2px; }
.fd-route .ap.r small { margin-left: auto; }
.fd-bar { position: relative; height: 5px; border-radius: 6px; background: rgba(255, 255, 255, .1); margin: 16px 11px 11px; }
.fd-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: linear-gradient(90deg, #1f6fa5, var(--accent)); transition: width .4s; box-shadow: 0 0 12px rgba(76, 194, 255, .45); }
.fd-bar b { position: absolute; top: 50%; left: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; color: #fff; filter: drop-shadow(0 0 7px rgba(76, 194, 255, .9)); transition: left .4s; }
.fd-bar b svg { width: 24px; height: 24px; display: block; }
.fd-eta { color: var(--muted); font-size: 12px; padding: 0 0 2px; }
.fd-noroute { color: var(--faint); font-size: 12px; padding: 4px 0; }
.fd.compact .fd-route .ap small { display: none; }
.fd.compact .fd-route .ap { font-size: 22px; }
.fd.compact .fd-route { padding-top: 8px; }

.fd-cams { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; padding: 8px 16px 14px; }
.cam-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 6px; border-radius: 11px; background: rgba(255, 255, 255, .055); border: 1px solid var(--line); color: var(--muted); font-size: 10px; min-width: 0; transition: background .15s, color .15s, transform .15s; }
.cam-btn svg { width: 18px; height: 18px; }
.cam-btn:hover { background: var(--bg-hover); color: var(--text); transform: translateY(-1px); }
.cam-btn.on { background: var(--accent-soft); border-color: rgba(76, 194, 255, .65); color: #fff; box-shadow: 0 0 18px rgba(76, 194, 255, .22), inset 0 0 0 1px rgba(76, 194, 255, .25); }

/* ---- instruments ------------------------------------------------------------------------------------------------------ */
.fd-instr { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; padding: 4px 16px 14px; }
.fd-pfd { width: 120px; height: 120px; border-radius: 50%; background: #0a0f18; box-shadow: 0 0 0 2px rgba(255, 255, 255, .1), 0 8px 24px rgba(0, 0, 0, .5); }
.fd-reads { display: grid; gap: 10px; }
.fd-m { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 6px; }
.fd-m small { grid-column: 1 / 3; color: var(--muted); font-size: 9.5px; letter-spacing: .12em; }
.fd-m b { font: 600 25px/1.05 var(--mono); letter-spacing: -.01em; }
.fd-m i { font-style: normal; color: var(--muted); font-size: 11px; }
.fd-m b.up { color: var(--good); }
.fd-m b.down { color: var(--warn); }
.fd-m b.flash { animation: flash .7s ease-out; }
@keyframes flash { 0% { color: #fff; text-shadow: 0 0 14px rgba(76, 194, 255, .95); } 100% { text-shadow: 0 0 0 transparent; } }

/* ---- tiles ----------------------------------------------------------------------------------------------------------- */
.fd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 16px 6px; }
.fd-grid > div { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .028)); border: 1px solid var(--line); border-radius: 13px; padding: 9px 11px; min-width: 0; }
.fd-grid > div:last-child:nth-child(3n + 1) { grid-column: span 3; }
.fd-grid > div:last-child:nth-child(3n + 2) { grid-column: span 2; }
.fd-grid small { display: block; color: var(--muted); font-size: 9.5px; letter-spacing: .1em; margin-bottom: 4px; }
.fd-grid b { font: 600 12.5px var(--mono); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.airport .fd-grid { grid-template-columns: repeat(2, 1fr); }
.airport .fd-grid > div:last-child:nth-child(3n + 1), .airport .fd-grid > div:last-child:nth-child(3n + 2) { grid-column: auto; }
.airport .fd-grid > div:last-child:nth-child(2n + 1) { grid-column: span 2; }
.airport .fd-grid b { white-space: normal; }

.fd-spark { padding: 12px 16px 4px; }
.fd-sparkhead { display: flex; justify-content: space-between; align-items: baseline; }
.fd-sparkhead small, .fd-wx small, .fd-spec small, .fd-raw small { color: var(--muted); font-size: 9.5px; letter-spacing: .12em; }
.fd-sparkhead span { color: var(--muted); font-size: 11px; font-family: var(--mono); }
.fd-spark canvas { width: 100%; height: 60px; display: block; margin-top: 6px; }

.fd-wx { padding: 8px 16px 0; }
.wx-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; }
.wx-chip { display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 11px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); font-size: 12px; cursor: pointer; transition: background .15s; }
.wx-chip:hover { background: var(--bg-hover); }
.wx-chip i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.wx-chip em { font-style: normal; font-weight: 700; font-size: 11px; }
.wx-chip span { color: var(--muted); }

.fd-spec, .fd-raw { padding: 12px 16px 2px; }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 3px 0; }
.kv span { color: var(--muted); }
.kv b { font-weight: 500; text-align: right; }
.fd-raw code { display: block; margin-top: 7px; padding: 10px 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: 11px; font: 11.5px/1.5 var(--mono); color: #cfe6ff; word-break: break-word; }
.tr-row { display: grid; grid-template-columns: 28px 1fr auto auto; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 9px; cursor: pointer; font-size: 12px; }
.tr-row:hover { background: var(--bg-hover); }
.tr-row em { font-style: normal; color: var(--muted); font-family: var(--mono); font-size: 11px; }
.tr-type { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.tr-logo { position: relative; width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.tr-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }

.fd-actions { display: flex; gap: 8px; padding: 14px 16px 4px; }
.fd-actions .btn { flex: 1; font-size: 12px; padding: 9px 6px; border-radius: 11px; }
.fd-foot { color: var(--faint); font-size: 10.5px; padding: 8px 16px 16px; }
.fd.compact .fd-more { display: none; }
.fd.compact .fd-hero { height: 98px; }
.fd.compact .fd-cs { font-size: 23px; }
.fd.compact .fd-sub { margin-top: 2px; }
.fd.compact .fd-iata { font-size: 30px; }
.fd.compact [data-act="collapse"] svg { transform: rotate(180deg); }
.fd.compact .alogo { width: 40px !important; height: 40px !important; }

/* ---- airport card extras ----------------------------------------------------------------------------------------------- */
.ap-wind { display: grid; grid-template-columns: 124px 1fr; gap: 16px; align-items: center; padding: 14px 16px 8px; }
.ap-wind canvas { width: 124px; height: 124px; }
.ap-windtxt small { color: var(--muted); font-size: 9.5px; letter-spacing: .12em; }
.ap-windtxt b { display: block; font: 700 19px/1.2 var(--mono); margin: 3px 0 8px; }
.ap-comp { display: grid; gap: 2px; font-size: 12px; color: var(--muted); }
.ap-comp b { font: 700 13px var(--mono); margin: 0 0 2px; color: var(--text); }
.ap-count { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.ap-count div { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .028)); border: 1px solid var(--line); border-radius: 12px; padding: 8px 4px; text-align: center; }
.ap-count b { display: block; font: 700 19px var(--mono); }
.ap-count span { color: var(--muted); font-size: 10px; }
.badge.cat { font-size: 12px; padding: 3px 10px; border-radius: 8px; letter-spacing: .06em; }

@media (max-width: 860px) {
  .fd.compact .fd-route { display: none; }
  .fd.compact .fd-hero { height: 84px; }
  #panelRight.fd { left: 8px; right: 8px; width: auto; top: auto; bottom: 60px; max-height: 62vh; border-radius: 20px 20px 16px 16px; }
  .fd-hero { height: clamp(104px, 24vh, 168px); }
  .fd-cs { font-size: 25px; }
  .fd-instr { grid-template-columns: 100px 1fr; }
  .fd-pfd { width: 100px; height: 100px; }
  .fd-m b { font-size: 21px; }
}

/* ---- cockpit HUD overlay, Zen mode, help overlay, weather stamp ---------------------------------------------------- */
#hudCanvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 11; }
body.in-cockpit #camHint { top: auto; bottom: 150px; }
#topbar, #searchWrap, #panelLeft, #panelToggle, #panelRight, #hud, #camHint { transition: opacity .35s ease, transform .35s ease; }
body.zen #topbar, body.zen #searchWrap, body.zen #panelLeft, body.zen #panelToggle, body.zen #panelRight, body.zen #hud, body.zen #camHint { opacity: 0 !important; pointer-events: none !important; transform: translateY(6px); }
#helpOverlay { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 60; width: min(460px, 92vw); padding: 20px 22px; }
#helpOverlay h3 { margin: 0; font-size: 16px; }
.help-grid { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; margin: 14px 0 18px; align-items: center; }
.help-grid kbd { font-family: var(--mono); background: rgba(255, 255, 255, .1); padding: 2px 7px; border-radius: 6px; font-size: 12px; justify-self: start; }
.help-grid span { color: var(--muted); }
#wxbox { gap: 8px; }
.fd-aff { padding: 2px 16px 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fd-aff .mon-aff { color: var(--accent); font-size: 12px; font-weight: 600; text-decoration: none; }
.fd-aff .mon-aff:hover { text-decoration: underline; }
.fd-aff small { color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }