/* WindDirection (js/wind-direction.js) — the roll wind picker, chart, chips and setting slots.
   Classes, not inline styles (tests/design-system-one-door.test.js). Status colours stay loud. */
.wind-svg { vertical-align: middle; flex: none; }
.wind-chart { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.wind-chart-cell { display: inline-block; border: 1px solid var(--border, #ddd); border-radius: 4px; padding: 2px; }
.wind-chart-cell.is-selected { border-color: var(--danger, #c0392b); }
.wind-chart-cell.is-dim { opacity: .55; }
.wind-pick { display: inline-flex; align-items: center; gap: 8px; }
.wind-pick-select { max-width: 260px; }
.wind-defaults { margin-top: 12px; }
.wind-override { margin-top: 10px; }
.wind-head { margin-bottom: 6px; }
.wind-help { font-size: 11px; color: var(--text3); margin-bottom: 6px; }
.wind-note { font-size: 12px; color: var(--text2); }
.wind-muted { color: var(--text3); }
.wind-warn { color: var(--warn, #b7791f); }
.wind-bad { color: var(--danger, #c0392b); }
.wind-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.wind-field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.wind-col { display: flex; flex-direction: column; gap: 8px; }
.wind-label { font-size: 12px; display: block; }
.wind-now { font-size: 11px; color: var(--text2); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.wind-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text2); }
.wind-chip.wind-bad { color: var(--danger, #c0392b); }
.wind-src { color: var(--text3); }
.wind-lines { margin-top: 3px; display: flex; flex-direction: column; gap: 2px; }
.awp-wind-row { display: flex; align-items: center; gap: 6px; }
.awp-wind-hint { font-size: 10px; color: var(--text3); }
.fgs-wind-legacy { font-size: 11px; color: var(--text3); margin-top: 3px; }