/* ==========================================================================
   Skylark — the day replay in three dimensions

   This page owns only its own chrome. The scene, its HUD and its labels come
   from the product stylesheets, because it is the same scene the live view
   builds. Only the layout of the two zones on this page lives here.
   ========================================================================== */

.skyreplay {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--bg);
}

/* The stage fills the first row; the controls sit under it. Both override the
   absolutely positioned forms those classes take on the 2D replay page. */
.skyreplay .stage { position: relative; inset: auto; min-height: 0; }
.skyreplay .sky3d { position: absolute; inset: 0; }
.skyreplay #stageEmpty { z-index: 6; }
.skyreplay #stageEmpty[hidden] { display: none; }

.skyreplay .panel {
  position: static;
  inset: auto;
  display: grid;
  gap: 10px;
  padding: 12px 22px 14px;
  border-width: 1px 0 0;
}

.skyreplay .row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
}

.skyreplay .row--speed { flex-wrap: wrap; gap: 10px; }
.skyreplay .row--speed .eyebrow { flex: none; }
.skyreplay .ghost { width: auto; }
.skyreplay .primary { min-width: 84px; }

/* The scene keeps a reserved strip clear for the HUD, legend and orientation
   marks. It has no sidebar and no tool column on this page. */
.skyreplay .sky-attribution { z-index: 5; }

/* One mark per five minutes of the archived day, drawn into a canvas so the
   marks keep whatever width the panel has. A bucket with no observation is
   drawn as a gap rather than as quiet traffic. */
.skyreplay .row--coverage { align-items: center; }
.skyreplay .coverage {
  display: block;
  flex: 0 1 220px;
  min-width: 90px;
  height: 10px;
  background: var(--line);
  border-radius: 1px;
}
/* The note has to shrink and wrap. styles.css gives every span inside a row
   `flex: none`, which sizes this sentence to its own length and scrolls it out
   of the panel, so the scope here is deliberate. */
.skyreplay .row .coverage-note {
  flex: 1 1 55%;
  min-width: 0;
  color: var(--muted);
  font-size: var(--fs-micro);
  line-height: 1.45;
  white-space: normal;
}
.skyreplay .row .coverage-note.is-gap { color: var(--alert); }

@media (max-width: 620px) {
  .skyreplay .panel { padding: 10px 14px 12px; }
  .skyreplay .row { gap: 10px; flex-wrap: wrap; }
  .skyreplay .scrub-label { flex: 1 1 100%; }
  .skyreplay .row--speed .eyebrow { flex: 1 1 100%; }
  .skyreplay .row--coverage .eyebrow { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .skyreplay .panel { backdrop-filter: none; }
}