/* landing.fyi flight replay — the full-screen cockpit replay overlay (replay.js).
 * Shared by the two standalone dashboard docs (dashboard/index.html + flight.html),
 * which is why it is a file of its own rather than a block in each doc's <style>. */

/* The launch button (detail-card actions row + the flight page header). The
   dashboard's own .fb-btn gives it the row-button look; the flight page has no
   .fb-btn, so this carries the same look on its own. */
.replay-launch { background: #eef4fb; color: var(--accent); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 4px 10px; font: inherit; font-size: 12px;
  font-weight: 600; cursor: pointer; white-space: nowrap; }
.replay-launch:hover { background: #e0ebf7; }
.replay-launch:disabled { opacity: .55; cursor: not-allowed; }

body.replay-open { overflow: hidden; }

.replay-overlay { position: fixed; inset: 0; z-index: 2200; background: #0b1420; color: #fff;
  font: 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  display: flex; flex-direction: column; }
.replay-stage { position: absolute; inset: 0; }
/* The two sizing rules from @cesium/engine's CesiumWidget.css (the engine bundle
   ships no stylesheet of its own for the widget): the canvas fills its box. */
.replay-stage .cesium-widget { position: relative; overflow: hidden; display: block; width: 100%; height: 100%; }
.replay-stage .cesium-widget canvas { width: 100%; height: 100%; touch-action: none; }
.replay-stage .cesium-viewer { width: 100%; height: 100%; }
/* The PFD symbology sits over the scene and never takes the pointer. */
.replay-pfd { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  font-family: "SF Mono", Menlo, Consolas, monospace; }
.replay-pfd text { fill: #fff; font-size: 13px; font-weight: 600; paint-order: stroke;
  stroke: rgba(0,0,0,.55); stroke-width: 3px; stroke-linejoin: round; }
.replay-pfd .tape-bg { fill: rgba(8,14,24,.55); }
.replay-pfd .tape-tick { stroke: #fff; stroke-width: 1.5; }
.replay-pfd .tape-box { fill: #0b1420; stroke: #fff; stroke-width: 1.5; }
.replay-pfd .tape-box text, .replay-pfd text.readout { font-size: 18px; }
.replay-pfd .ladder line { stroke: #fff; stroke-width: 1.5; }
.replay-pfd .ladder .horizon { stroke: #fff; stroke-width: 2.5; }
.replay-pfd .ladder .neg { stroke-dasharray: 6 4; }
.replay-pfd .ref { stroke: #ffd400; stroke-width: 3.5; fill: none; }
.replay-pfd .fpm { stroke: #7dff7a; stroke-width: 2.5; fill: none; }
.replay-pfd .trk { fill: #ff3cff; }
.replay-pfd .roll-scale line { stroke: #fff; stroke-width: 1.5; }
.replay-pfd .roll-ptr { fill: #fff; }
.replay-pfd .vsi-ptr { fill: #fff; }
.replay-pfd .note { font-size: 11px; font-weight: 500; fill: #cfd8e3; }
.replay-pfd .vs-readout { font-size: 12px; }
/* Chase view: the tapes stay, the attitude symbology goes. */
.replay-pfd.chase .ladder, .replay-pfd.chase .roll-scale, .replay-pfd.chase .roll-ptr,
.replay-pfd.chase .ref, .replay-pfd.chase .fpm { display: none; }
.replay-pfd .label { font-size: 10px; font-weight: 500; fill: #cfd8e3; }

/* Header: title left, view toggle + close right. */
.replay-head { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: flex-start;
  justify-content: space-between; padding: 10px 12px; gap: 10px; pointer-events: none; }
.replay-head > * { pointer-events: auto; }
.replay-title { font-weight: 700; font-size: 14px; text-shadow: 0 1px 3px rgba(0,0,0,.7);
  max-width: 60%; }
.replay-title small { display: block; font-weight: 500; font-size: 11px; color: #cfd8e3; }
.replay-views { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.replay-maps { display: inline-flex; gap: 4px; margin-right: 8px; }
.replay-maps[hidden] { display: none; }
.replay-views button, .replay-close { background: rgba(8,14,24,.7); color: #fff; border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--r-sm, 6px); padding: 5px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.replay-views button[aria-pressed="true"] { background: #fff; color: #0b1420; }
.replay-close { font-size: 18px; line-height: 1; padding: 3px 9px; }

/* Transport bar. */
.replay-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center;
  gap: 10px; padding: 8px 12px; background: linear-gradient(180deg, rgba(11,20,32,0), rgba(11,20,32,.85) 40%);
  flex-wrap: wrap; }
.replay-bar button { background: rgba(8,14,24,.7); color: #fff; border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--r-sm, 6px); padding: 5px 10px; font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; min-width: 44px; }
.replay-bar button:hover { background: rgba(255,255,255,.15); }
.replay-scrub { flex: 1 1 200px; position: relative; display: flex; align-items: center; min-height: 28px; }
.replay-scrub input[type=range] { width: 100%; margin: 0; accent-color: #fff; }
.replay-marks { position: absolute; left: 0; right: 0; top: 2px; height: 0; pointer-events: none; }
.replay-mark { position: absolute; width: 0; height: 0; border-left: 5px solid transparent;
  border-right: 5px solid transparent; border-top: 7px solid #ffd400; transform: translateX(-5px); }
.replay-mark.ga { border-top-color: #ff8a3c; }
.replay-time { font-variant-numeric: tabular-nums; min-width: 72px; text-align: center; font-weight: 600; }
.replay-credit { flex: 1 1 100%; font-size: 10px; color: #aab4c0; min-height: 12px; }
.replay-credit .cesium-credit-logoContainer img { height: 14px; vertical-align: middle; }
.replay-credit .cesium-credit-textContainer, .replay-credit .cesium-credit-expand-link { font-size: 10px; color: #aab4c0; }
.replay-credit a { color: #aab4c0; }
.replay-credit .cesium-credit-lightbox-overlay { pointer-events: auto; }

/* Loading / failure state, centred over the stage. */
.replay-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(8,14,24,.8); border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-md, 10px);
  padding: 14px 18px; font-weight: 600; text-align: center; max-width: 80vw;
  display: flex; align-items: center; gap: 12px; }
.replay-status[hidden] { display: none; }
.replay-spin { width: 20px; height: 20px; flex: none; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff; animation: replay-spin .8s linear infinite; }
.replay-status.error .replay-spin { display: none; }
@keyframes replay-spin { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
  .replay-pfd text { font-size: 11px; }
  .replay-pfd .tape-box text, .replay-pfd text.readout { font-size: 15px; }
  .replay-title { font-size: 12px; max-width: 55%; }
  .replay-bar { gap: 6px; padding: 6px 8px; }
  .replay-bar button { padding: 4px 7px; min-width: 38px; }
  .replay-time { min-width: 60px; }
}