/* "Runways and wind" on the airport information page (flights/airports.aspx, #acRwy): the block js/wx-runways.js builds, the one
   /weather/ shows. The same rules as weather/css/wx-lookup.css and weather.css (.wx-rwy, .wx-svg, .wx-table), scoped to #acRwy
   so nothing else on the page changes. Bump ?v= on the page when this changes. ASCII only. */
#acRwy .wx-rwy { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
#acRwy .wx-svg { flex: 0 0 300px; max-width: 100%; min-width: 0; }
#acRwy .wx-svg svg { width: 100%; height: auto; display: block; }
#acRwy .wx-caption { font-size: 13px; color: #555; margin-top: 6px; line-height: 1.45; }
#acRwy .wx-table { flex: 1 1 380px; min-width: 0; overflow-x: auto; }
#acRwy .wx-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
#acRwy .wx-table th { text-align: left; font-size: 11px; text-transform: uppercase; color: #666; padding: 4px 6px; border-bottom: 1px solid #ddd; }
#acRwy .wx-table td { padding: 6px; border-bottom: 1px solid #eee; color: #333; vertical-align: top; }
#acRwy .wx-table td.nw { white-space: nowrap; }
#acRwy .wx-table tr.best td { background: #e8f5e9; }
#acRwy .wx-table .rname { font-weight: bold; color: #003a70; white-space: nowrap; }
#acRwy .wx-tag { white-space: nowrap; display: block; width: max-content; margin: 5px 0 1px; background: #2e7d32; color: #fff; border-radius: 999px; padding: 2px 9px 2px 7px; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.2px; }
#acRwy .wx-tag::before { content: "\2713"; margin-right: 4px; font-weight: bold; }
#acRwy .wx-tail { color: #c62828; }
#acRwy .wx-note { font-size: 12px; color: #666; margin: 8px 0 0; line-height: 1.45; }
/* Diagram colours (weather.css, light) */
#acRwy .wx-svg .ring { fill: #fff; stroke: #c9d3dc; stroke-width: 2; }
#acRwy .wx-svg .tick { stroke: #c9cdd2; stroke-width: 1; }
#acRwy .wx-svg .tick-major { stroke: #9aa3ab; stroke-width: 1.5; }
#acRwy .wx-svg .tick-card { stroke: #1078b3; stroke-width: 2.5; }
#acRwy .wx-svg .compass { fill: #1078b3; font: bold 17px Arial, sans-serif; }
#acRwy .wx-svg .bearing { fill: #8a939b; font: 11px Arial, sans-serif; letter-spacing: 0.3px; }
#acRwy .wx-svg .rw { fill: #4a4f55; }
#acRwy .wx-svg .rw-best { fill: #2e3338; }
#acRwy .wx-svg .mark { fill: #fff; font: bold 13px Arial, sans-serif; }
#acRwy .wx-svg .cl { stroke: #fff; stroke-width: 1.2; stroke-dasharray: 6 5; }
#acRwy .wx-svg .wind { fill: #e65100; stroke: #e65100; }
#acRwy .wx-svg .best { fill: #2e7d32; }
#acRwy .wx-svg .gr { fill: #4a4f55; }
#acRwy .wx-svg .gr-best { fill: #1f2429; }
#acRwy .wx-svg .gr-dim { fill: #8d949b; }
#acRwy .wx-svg .gcl { stroke: #fff; stroke-width: 0.8; stroke-dasharray: 4 3; }
#acRwy .wx-svg .gthr { stroke: #fff; stroke-width: 1.4; }
#acRwy .wx-svg .gdsp { stroke: #f5c400; stroke-width: 1.2; stroke-dasharray: 2 1.5; }
#acRwy .wx-svg .glabel { fill: #2b3035; font: bold 10.5px Arial, sans-serif; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
#acRwy .wx-svg .glabel-best { fill: #1b5e20; font-size: 11.5px; }
#acRwy .wx-svg .gheli { fill: #fff; stroke: #4a4f55; stroke-width: 1; }
#acRwy .wx-svg .gheli-t { fill: #4a4f55; font: bold 7px Arial, sans-serif; }
#acRwy .wx-svg .gscale line { stroke: #6b737b; stroke-width: 1.2; }
#acRwy .wx-svg .gscale text { fill: #6b737b; font: 10px Arial, sans-serif; }
#acRwy .wx-svg .gd-ap { fill: #e3e7eb; }
#acRwy .wx-svg .gd-term { fill: #cfd5dc; stroke: #b9c1ca; stroke-width: 0.5; }
#acRwy .wx-svg .gd-tw { fill: none; stroke: #cdd3d9; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#acRwy .wx-svg .gd-tl { fill: none; stroke: #dde1e5; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
#acRwy .wx-caption a { color: inherit; }
/* Dark mode (the site's body.dark-mode) */
body.dark-mode #acRwy .wx-caption { color: #bbb !important; }
body.dark-mode #acRwy .wx-note { color: #aaa !important; }
body.dark-mode #acRwy .wx-table th { background: transparent !important; color: #aaa !important; border-color: #555 !important; }
body.dark-mode #acRwy .wx-table tr:nth-child(n) td { background: #1e1e1e !important; color: #e0e0e0 !important; border-color: #3a3a3a !important; }
body.dark-mode #acRwy .wx-table tr.best:nth-child(n) td { background: #1f3322 !important; }
body.dark-mode #acRwy .wx-table tr:nth-child(n) td.rname { color: #4da6ff !important; }
body.dark-mode #acRwy .wx-tag { color: #fff !important; }
body.dark-mode #acRwy .wx-tail { color: #ef9a9a !important; }
body.dark-mode #acRwy .wx-svg .ring { fill: #1e1e1e; stroke: #4a5560; }
body.dark-mode #acRwy .wx-svg .tick { stroke: #4a4f55; }
body.dark-mode #acRwy .wx-svg .tick-major { stroke: #7a828a; }
body.dark-mode #acRwy .wx-svg .tick-card { stroke: #4da6ff; }
body.dark-mode #acRwy .wx-svg .compass { fill: #4da6ff; }
body.dark-mode #acRwy .wx-svg .rw { fill: #6b7178; }
body.dark-mode #acRwy .wx-svg .rw-best { fill: #868d95; }
body.dark-mode #acRwy .wx-svg .gr { fill: #9aa1a8; }
body.dark-mode #acRwy .wx-svg .gr-best { fill: #e3e6e9; }
body.dark-mode #acRwy .wx-svg .gr-dim { fill: #5d646b; }
body.dark-mode #acRwy .wx-svg .gcl { stroke: #1e1e1e; }
body.dark-mode #acRwy .wx-svg .gthr { stroke: #1e1e1e; }
body.dark-mode #acRwy .wx-svg .glabel { fill: #e0e0e0; stroke: #1e1e1e; }
body.dark-mode #acRwy .wx-svg .glabel-best { fill: #81c784; }
body.dark-mode #acRwy .wx-svg .gheli { fill: #1e1e1e; stroke: #9aa1a8; }
body.dark-mode #acRwy .wx-svg .gheli-t { fill: #9aa1a8; }
body.dark-mode #acRwy .wx-svg .gscale line { stroke: #9aa1a8; }
body.dark-mode #acRwy .wx-svg .gscale text { fill: #9aa1a8; }
body.dark-mode #acRwy .wx-svg .gd-ap { fill: #2a2e33; }
body.dark-mode #acRwy .wx-svg .gd-term { fill: #3b4148; stroke: #4a5158; }
body.dark-mode #acRwy .wx-svg .gd-tw { stroke: #3d434a; }
body.dark-mode #acRwy .wx-svg .gd-tl { stroke: #33383e; }
body.dark-mode #acRwy .wx-svg .best { fill: #66bb6a; }
@media (max-width: 767px) {
    /* Phones: heading and length are in the diagram; the table keeps the winds. */
    #acRwy .wx-svg { flex-basis: 100%; max-width: 340px; margin: 0 auto; }
    #acRwy .wx-table .hd { display: none; }
    #acRwy .wx-table table { font-size: 12px; }
    #acRwy .wx-table th, #acRwy .wx-table td { padding: 5px 3px; }
    #acRwy .wx-table td.nw { white-space: normal; }
}