/* Runway crosswind component (js/crosswind.js). */
.cw-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.cw-stage { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; gap: 4px; }
.cw-vs { display: grid; justify-items: center; gap: 4px; font: 600 .9rem var(--ui); color: var(--ink-2); text-align: center; }
.cw-vs output { font-weight: 800; color: var(--ink); }
.cw-track { position: relative; width: 40px; height: 250px; }
.cw-track input { position: absolute; left: 50%; top: 50%; width: 250px; margin: 0; transform: translate(-50%, -50%) rotate(-90deg); accent-color: var(--orange); }
.cw-svg { display: block; width: 100%; max-width: 400px; margin: 0 auto; touch-action: none; user-select: none; outline-offset: 4px; }
.cw-svg * { pointer-events: none; }
.cw-hit { fill: transparent; pointer-events: visiblePainted; cursor: grab; }
.cw-whit { fill: none; stroke: transparent; stroke-width: 26; pointer-events: stroke; cursor: grab; }
.cw-svg:active .cw-hit, .cw-svg:active .cw-whit { cursor: grabbing; }
.cw-ring { fill: none; stroke: var(--line); stroke-width: 1.5; }
.cw-inner { stroke-dasharray: 3 5; }
.cw-rwy { fill: var(--ink-2); }
.cw-mid { stroke: var(--surface); stroke-width: 2; stroke-dasharray: 8 8; }
.cw-plane { fill: var(--surface); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.cw-rn { fill: var(--ink); font: 800 16px var(--ui); }
.cw-wind { stroke: var(--amber-text); stroke-width: 4; stroke-linecap: round; }
.cw-hd { fill: var(--amber-text); }
.cw-handle { fill: var(--surface); stroke: var(--amber-text); stroke-width: 3; }
.cw-t { fill: var(--amber-text); font: 700 13px var(--ui); }
.cw-faint { fill: var(--ink-3); font: 600 12px var(--ui); }
.cw-pole { stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; }
.cw-band { stroke: var(--orange); stroke-width: 1; }
.cw-band.o { fill: url(#sunrise); }
.cw-band.w { fill: var(--surface); }
.cw-pink { color: var(--amber-text); }
.cw-blue { color: var(--orange-text); }
.cw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.cw-read { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; text-align: center; margin-top: 8px; }
.cw-k { margin: 0; color: var(--ink-2); font: 600 .9rem var(--ui); }
.cw-big { margin: 0; font: 800 1.9rem/1.1 var(--ui); font-variant-numeric: tabular-nums; }
.cw-eq { margin: 2px 0 0; color: var(--ink-2); font-size: .85rem; }
.cw-bar { position: relative; height: 18px; margin-top: 14px; border-radius: 99px; background: var(--canvas); border: 1px solid var(--line); }
.cw-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; }
.cw-bar b { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--ink); }
.cw-ok { background: var(--good); }
.cw-close { background: var(--amber); }
.cw-over { background: var(--bad); }
.cw-scale { display: flex; justify-content: space-between; margin-top: 4px; font-size: .82rem; color: var(--ink-2); }
.cw-cap { margin: 12px 0 0; padding: 10px 14px; border-radius: var(--r-s); text-align: center; }
.cw-ok-cap { background: var(--good-soft); color: var(--ink); }
.cw-close-cap { background: color-mix(in srgb, var(--amber) 28%, var(--surface)); color: var(--ink); }
.cw-over-cap { background: var(--bad-soft); color: var(--ink); }
.cw-other { margin: 10px 0 0; font-size: .95rem; }
.cw-why h3 { margin: 14px 0 4px; font-size: 1rem; }
.cw-why p { margin: 0 0 8px; font-size: .92rem; }
@media (max-width: 800px) { .cw-layout { grid-template-columns: minmax(0, 1fr); } }