/* Weather layers: faint wind-line canvas, quiet speed labels and a small legend. */
.airshow-wind-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.is-on > .airshow-wind-canvas { opacity: 1; }
.is-hidden > .airshow-wind-canvas,
.is-hidden > .airshow-jet-label { visibility: hidden; }
.airshow-jet-label {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: -9px 0 0 -9px;
  padding: 2px 6px 2px 3px;
  border-radius: 9px;
  background: rgba(6, 10, 18, 0.5);
  color: rgba(255, 255, 255, 0.86);
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
  will-change: transform;
}
.is-on > .airshow-jet-label.is-shown { opacity: 1; }
.airshow-jet-label .ajl-arrow {
  position: relative;
  width: 12px;
  height: 12px;
}
.airshow-jet-label .ajl-arrow::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 5.5px;
  width: 8px;
  height: 1.5px;
  background: currentColor;
}
.airshow-jet-label .ajl-arrow::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  border-left: 5px solid currentColor;
  border-top: 3.25px solid transparent;
  border-bottom: 3.25px solid transparent;
}

/* Legend: one quiet line per layer that is on — key, name, value, data time. */
.weather-legend {
  position: fixed;
  left: 12px;
  bottom: 96px;
  z-index: 1303;
  display: grid;
  gap: 3px;
  padding: 6px 10px 6px 9px;
  border-radius: 7px;
  background: rgba(8, 12, 20, 0.6);
  color: rgba(238, 242, 248, 0.92);
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  animation: wxl-on 0.22s ease-out;
}
.weather-legend[hidden] { display: none; }
.wxl-row { display: none; align-items: center; gap: 7px; white-space: nowrap; }
.weather-legend.has-radar .wxl-radar,
.weather-legend.has-winds .wxl-winds { display: flex; }
.wxl-key { display: inline-flex; flex: 0 0 auto; width: 26px; height: 6px; border-radius: 3px; }
.wxl-key-rain { background: linear-gradient(90deg, #40b45c 0 40%, #ecd63e 40% 62%, #f39c2e 62% 78%, #e23a2e 78% 92%, #cc3cbe 92%); opacity: 0.85; }
.wxl-key-wind { height: 2px; border-radius: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.75)); }
.wxl-name b { font-weight: 700; }
.wxl-here { color: #fff; font-weight: 700; }
.wxl-here:empty { display: none; }
.wxl-time { margin-left: auto; padding-left: 6px; color: rgba(238, 242, 248, 0.55); font-weight: 500; font-size: 10.5px; }
@keyframes wxl-on {
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: none; }
}

html.airshow-mobile-runtime .weather-legend { left: 8px; padding: 4px 8px 4px 7px; gap: 2px; font-size: 10.5px; line-height: 14px; }
html.airshow-mobile-runtime .wxl-key { width: 20px; }
html.airshow-mobile-runtime .wxl-time { font-size: 9.5px; }
html.airshow-mobile-runtime .airshow-jet-label { font-size: 10px; line-height: 13px; }

@media (prefers-reduced-motion: reduce) {
  .weather-legend { animation: none; }
  .airshow-wind-canvas,
  .airshow-jet-label { transition: none; }
}