/* Optional wind module. All selectors are scoped to the module. */
#windStep .wind-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

#windStep .wind-status-cell {
  border: 1px solid rgba(125, 235, 255, .18);
  border-radius: 9px;
  padding: 7px;
  background: rgba(8, 27, 39, .45);
  min-width: 0;
}

#windStep .wind-status-cell span {
  display: block;
  font-size: 10px;
  opacity: .72;
  margin-bottom: 4px;
}

#windStep .wind-status-cell strong {
  display: block;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#windStep .wind-inline-note {
  font-size: 10px;
  line-height: 1.65;
  opacity: .82;
  margin: 5px 0 8px;
}

#windStep .wind-mask-source {
  font-size: 10px;
  line-height: 1.5;
  border-inline-start: 3px solid #f2d070;
  padding-inline-start: 8px;
  margin: 5px 0 8px;
  overflow-wrap: anywhere;
}

#windStep .wind-hourly-warning {
  border-color: rgba(255, 180, 80, .35);
  color: #ffd28b;
}

#windStep .wind-export-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 7px;
  align-items: end;
}

.wind-arrow-marker {
  width: 1px !important;
  height: 1px !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
}

.leaflet-wind-vector-pane {
  z-index: 610 !important;
}

.leaflet-wind-tooltip-pane {
  z-index: 760 !important;
  pointer-events: none !important;
}

.wind-arrow-symbol {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .95)) drop-shadow(0 0 2px rgba(0, 0, 0, .55));
  pointer-events: auto;
}

.wind-arrow-symbol svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wind-arrow-symbol line,
.wind-arrow-symbol path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.wind-vector-tooltip {
  z-index: 1;
  max-width: 290px;
  padding: 8px 10px !important;
  border: 1px solid rgba(30, 55, 65, .28) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .96) !important;
  color: #13242c !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  white-space: nowrap;
  pointer-events: none !important;
}

.wind-vector-tooltip::before {
  border-top-color: rgba(255, 255, 255, .96) !important;
}

.wind-vector-layer-row {
  border-style: dashed !important;
}

.wind-vector-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 6px;
  padding-top: 7px;
}

.wind-vector-controls label {
  display: grid;
  gap: 3px;
  font-size: 10px;
  min-width: 0;
}

.wind-vector-controls select,
.wind-vector-controls input[type='color'] {
  width: 100%;
  min-width: 0;
}

.wind-vector-ranges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 6px;
}

.wind-vector-ranges label {
  display: grid;
  gap: 2px;
  font-size: 10px;
}

@media (max-width: 900px) {
  #windStep .wind-status-grid {
    grid-template-columns: 1fr;
  }
}