/* =====================================================================================================================
 * VISION SCREEN · VOICE IN FLIGHT (2026-11-06). Mock-up: docs/sl-vision/Talk.dc.html (390 x 844).
 * Over everything while you talk over the radio. It never takes a touch (pointer-events: none): the key you hold
 * underneath keeps working. The bars move with your voice only while you talk; nothing flashes.
 * ===================================================================================================================== */

.slv-flight {
  position: fixed; inset: 0; z-index: 96; pointer-events: none; box-sizing: border-box; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 42%, #1a0b0e 0%, #040308 62%), #040308;
  color: #efe6d6; font-family: "Saira Semi Condensed", var(--font-display), sans-serif;
  display: flex; flex-direction: column;
  /* the bottom is left for the HOLD TO TALK key pinned there (vision-sheets.css), so the thumb never covers the drawing */
  padding: calc(22px + env(safe-area-inset-top, 0px)) 20px calc(130px + env(safe-area-inset-bottom, 0px));
}
.slv-flight[hidden] { display: none; }
.slv-flight__top { display: flex; justify-content: space-between; align-items: center; }
.slv-flight__top b { font-size: 13px; letter-spacing: 0.24em; color: #ff2d3a; font-weight: 800; white-space: nowrap; }
/* the talk clock: red digital numbers, big enough to notice while the phone is at arm's length (his ask 2026-11-07);
   the 30 s cap stays small beside them */
.slv-flight__top small { font-family: "JetBrains Mono", var(--font-mono), monospace; white-space: nowrap; display: flex; align-items: baseline; gap: 6px; }
.slv-flight__now { font-size: 30px; font-weight: 700; color: #ff2d3a; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.slv-flight__cap { font-size: 11px; color: #8a8174; }
.slv-flight__path { width: 100%; flex: 1 1 auto; min-height: 0; max-height: 480px; overflow: visible; }
.slv-flight__disp { font-family: "Saira Semi Condensed", var(--font-display), sans-serif; }
.slv-flight__mono { font-family: "JetBrains Mono", var(--font-mono), monospace; }
.slv-flight__bars { display: flex; align-items: flex-end; gap: 3px; height: 46px; margin-top: 10px; flex: none; }
.slv-flight__bars span { flex: 1; height: 6%; background: #ff2d3a; border-radius: 2px; opacity: 0.45; }
.slv-flight__note { margin-top: 10px; font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 11px; color: #8a8174; flex: none; }

@media (min-width: 641px) {
  .slv-flight { left: 50%; right: auto; width: min(430px, 100%); transform: translateX(-50%); }
}