/* ==========================================================================
   recon.css — the hurricane hunter 3D view.
   ==========================================================================

   Owns only `hw-recon` plus the two page-level shells (.recon-body,
   .recon-main). Every token, every panel/kv/table/badge class and both themes
   come from app.css unchanged — this file adds a component, it does not
   restate a design system.

   The layout problem this solves: a perspective canvas wants to be as large as
   possible, and the numbers beside it want to be readable. So the stage takes
   a viewport-relative height with a floor, the controls sit directly under it
   where a hand already is, and the text panels flow below in the normal
   document. Nothing here scroll-jacks; the page scrolls like a page.
   ========================================================================== */

.recon-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.recon-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4);
  max-width: 1600px;
  width: 100%;
  margin-inline: auto;
}

/* ---- stage ------------------------------------------------------------ */

.hw-recon__stage {
  position: relative;
  /* Tall enough that altitude is legible, capped so the mission list is not
     pushed entirely below the fold on a laptop. */
  height: clamp(360px, 62vh, 760px);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-sunken);
  /* The canvas is a drag surface; the browser's own pan gesture fights orbit. */
  touch-action: none;
}

.hw-recon__stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* `display: grid` here outranks the user-agent's `[hidden] { display: none }`
   — same specificity trap that has bitten this project before, and it renders
   as "the fallback is permanently on top of a scene that IS drawing". The
   element is hidden via .hidden = true in JS, so the class has to concede. */
.hw-recon__fallback[hidden] { display: none; }

.hw-recon__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--s-2);
  padding: var(--s-5);
  text-align: center;
  background: var(--surface-sunken);
}
.hw-recon__fallback-title { margin: 0; font-weight: 700; color: var(--text); }
.hw-recon__fallback-detail { margin: 0; max-width: 46ch; color: var(--text-dim); font-size: var(--fs-sm); }

/* ---- overlays ---------------------------------------------------------- *
   All three sit ON the canvas, so they carry their own opaque-ish ground
   rather than trusting whatever colour happens to be behind them. Each is
   pointer-events:none so none of them can steal an orbit drag.
   ----------------------------------------------------------------------- */

/* Third time in this project: a component `display` outranks the user agent's
   `[hidden] { display: none }`, and the element stays on screen while the code
   that hid it reports success. Any class in this file that sets `display` and
   is ever toggled via .hidden has to concede here, explicitly. */
.hw-recon__hud[hidden],
.hw-recon__legend[hidden],
.hw-recon__hint[hidden] { display: none; }

.hw-recon__hud,
.hw-recon__legend,
.hw-recon__hint {
  position: absolute;
  pointer-events: none;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-dim);
}

.hw-recon__hud {
  top: var(--s-3);
  left: var(--s-3);
  right: var(--s-3);
  padding: var(--s-2) var(--s-3);
  display: grid;
  gap: 2px;
  max-width: 46rem;
}
.hw-recon__hud-time {
  color: var(--text);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
}
.hw-recon__hud-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-3);
  align-items: baseline;
}
.hw-recon__hud-craft { font-weight: 700; min-width: 9rem; }
/* A landed aircraft recedes rather than disappearing: knowing a mission ended
   is information, and a row vanishing mid-scrub reads as a glitch. */
.hw-recon__hud-row--done { color: var(--text-faint); }
.hw-recon__hud--quiet { opacity: 0.82; }
.hw-recon__hud-cell { font-variant-numeric: tabular-nums; }
.hw-recon__hud-cell strong { color: var(--text); }

.hw-recon__legend {
  bottom: var(--s-3);
  left: var(--s-3);
  padding: var(--s-2) var(--s-3);
  display: grid;
  gap: 3px;
}
.hw-recon__legend-title {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-faint);
}
.hw-recon__legend-scale { display: flex; gap: 1px; align-items: flex-end; }
.hw-recon__legend-stop {
  display: grid;
  justify-items: center;
  gap: 2px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}
.hw-recon__legend-stop i { display: block; width: 2.1rem; height: 8px; }
.hw-recon__legend-note { display: flex; align-items: center; gap: var(--s-2); color: var(--text-faint); }
.hw-recon__legend-swatch { display: inline-block; width: 1.6rem; height: 8px; border-radius: 1px; }

.hw-recon__hint {
  bottom: var(--s-3);
  right: var(--s-3);
  padding: var(--s-1) var(--s-2);
  color: var(--text-faint);
}

/* ---- controls ---------------------------------------------------------- */

.hw-recon__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.hw-recon__ctl { display: flex; align-items: center; gap: var(--s-2); }
.hw-recon__ctl--wide { flex: 1 1 18rem; }
.hw-recon__ctl--wide input[type="range"] { flex: 1 1 auto; }
.hw-recon__ctl-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-faint);
  white-space: nowrap;
}
.hw-recon__ctl-out {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  min-width: 2.6rem;
}
/* 44px of reach on a coarse pointer without 44px of paint — the same
   two-box treatment the map markers use. */
.hw-recon__controls input[type="range"] {
  min-height: 24px;
  accent-color: var(--accent);
}
@media (pointer: coarse) {
  .hw-recon__controls input[type="range"] { min-height: 44px; }
  .hw-recon__controls .btn { min-height: 44px; }
}

/* ---- panels ------------------------------------------------------------ */

.hw-recon__panels {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) {
  .hw-recon__panels { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
}

.hw-recon__mission {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}
.hw-recon__mission:last-child { border-bottom: 0; }
.hw-recon__mission--off { opacity: 0.5; }

.hw-recon__mission-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
  min-height: 32px;
}
@media (pointer: coarse) { .hw-recon__mission-head { min-height: 44px; } }

.hw-recon__mission-name { font-weight: 700; color: var(--text); }
.hw-recon__mission-id {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-faint);
}
.hw-recon__mission-peak {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
}
.hw-recon__mission-kv { margin-top: var(--s-2); }
.hw-recon__mission-kv .hw-kv__row { grid-template-columns: minmax(7rem, 45%) 1fr; }

/* ---- header storm picker ---------------------------------------------- */

.hw-recon__storm-wrap { display: inline-flex; }
.hw-recon__storm {
  font-family: inherit;
  min-width: 8rem;
  /* .btn gives it the app's chrome; the native arrow is the affordance. */
  padding-inline-end: var(--s-2);
}

/* ---- footer ------------------------------------------------------------ */

.app-footer {
  padding: var(--s-4);
  max-width: 1600px;
  width: 100%;
  margin-inline: auto;
  border-top: 1px solid var(--border);
}
.app-footer p {
  margin: 0;
  max-width: 80ch;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* A perspective scene is motion by definition, but the AUTOPLAY scrub is not
   essential — it has a pause control and stopping it costs nothing. */
@media (prefers-reduced-motion: reduce) {
  .hw-recon__hud, .hw-recon__legend, .hw-recon__hint { backdrop-filter: none; }
}