/* Airport weather lookup on /weather/ (weather/default.aspx, script weather/js/wx-lookup.js): the search box and the decoded
   results (METAR, runways and wind, TAF, radar). The runway diagram colours (.wx-svg) are in weather.css (one copy); the
   radar map's are in wx-radar-map.css. Bump ?v= on weather/default.aspx. */
.wx-lookup { margin: 0 0 6px; }
.search-bar { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 15px; background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px 15px; }
.search-field { position: relative; }
.search-field label { display: block; font-size: 11px; font-weight: bold; color: #666; margin-bottom: 2px; text-transform: uppercase; }
.search-field input { padding: 7px 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; width: 260px; box-sizing: border-box; background: #fff; }
.wx-lookup .search-field input { color: #333; -webkit-text-fill-color: #333; }
.search-field input:focus { border-color: #169fe6; outline: none; box-shadow: 0 0 0 2px rgba(22,159,230,0.2); }
/* The list's look (option C, light and dark) is css/suggest.css (.cw-sg, in site.css); only its place here. */
.ap-suggest { position: absolute; left: 0; top: 100%; min-width: 100%; width: 340px; max-width: calc(100vw - 40px); z-index: 50; }
.btn-search { background: #1078b3; color: #fff; border: none; padding: 7px 20px; border-radius: 5px; font-size: 14px; font-weight: bold; cursor: pointer; height: 35px; }
.btn-search:hover { background: #0d5f8f; }
.error-msg { background: #ffebee; border: 1px solid #ef5350; border-radius: 6px; padding: 12px; color: #c62828; margin-bottom: 10px; display: none; }
.wx-results.wx-reserve { min-height: 600px; }
.wx-empty { color: #666; font-size: 14px; }
.wx-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.wx-airport { font-size: 15px; color: #333; line-height: 1.5; }
.wx-airport a { color: #1078b3; font-weight: bold; white-space: nowrap; margin-left: 6px; }
.wx-btn { background: #fff; color: #1078b3; border: 1px solid #b3d9f2; border-radius: 5px; padding: 4px 10px; font-size: 12px; font-weight: bold; cursor: pointer; min-height: 28px; white-space: nowrap; }
.wx-btn:hover { border-color: #169fe6; }
.wx-card { border: 1px solid #e0e0e0; border-radius: 8px; padding: 14px 16px; margin-bottom: 15px; background: #fafafa; }
.wx-card h2 { font-size: 16px; color: #333; margin: 0; }
.wx-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.wx-age { font-size: 12px; color: #666; margin-left: auto; }
.wx-age.stale { color: #c62828; font-weight: bold; }
/* Standard aviation flight-category colours (as on Airport Information): pilots read these by colour. */
.wx-cat { display: inline-block; padding: 3px 12px; border-radius: 12px; font-size: 13px; font-weight: bold; color: #fff; letter-spacing: 0.5px; }
.wx-cat.vfr { background: #1b7f3b; }
.wx-cat.mvfr { background: #1565c0; }
.wx-cat.ifr { background: #c62828; }
.wx-cat.lifr { background: #8e24aa; }
.wx-cat.sm { font-size: 11px; padding: 1px 8px; }
.wx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 14px; }
.wx-label { font-size: 11px; text-transform: uppercase; font-weight: bold; color: #666; margin-bottom: 2px; }
.wx-value { font-size: 15px; color: #333; line-height: 1.35; }
.wx-raw { margin-top: 12px; }
.wx-raw summary { font-size: 13px; color: #1078b3; cursor: pointer; font-weight: bold; }
.wx-raw pre { background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 8px 10px; margin: 6px 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: #222; }
.wx-rwy { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.wx-lookup .wx-svg { flex: 0 0 360px; max-width: 100%; }
.wx-caption { font-size: 13px; color: #555; margin-top: 6px; line-height: 1.45; }
.wx-table { flex: 1 1 300px; min-width: 0; }
.wx-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wx-table th { text-align: left; font-size: 11px; text-transform: uppercase; color: #666; padding: 4px 6px; border-bottom: 1px solid #ddd; }
.wx-table td { padding: 6px; border-bottom: 1px solid #eee; color: #333; vertical-align: top; }
.wx-table td.nw { white-space: nowrap; }
.wx-table tr.best td { background: #e8f5e9; }
.wx-table .rname { font-weight: bold; color: #003a70; white-space: nowrap; }
.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; }
.wx-tag::before { content: "\2713"; margin-right: 4px; font-weight: bold; }
.wx-tail { color: #c62828; }
.wx-note { font-size: 12px; color: #666; margin-top: 8px; line-height: 1.45; }
.wx-period { border-top: 1px solid #e6e6e6; padding: 9px 0; }
.wx-period:first-of-type { border-top: 0; }
.wx-ptitle { font-size: 13px; font-weight: bold; color: #003a70; margin-bottom: 3px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wx-ptext { font-size: 14px; color: #333; line-height: 1.45; }
.wx-perm { margin: 0 0 10px; font-size: 14px; }
.wx-perm a { color: #1078b3; font-weight: bold; }
.wx-foot { font-size: 13px; color: #666; line-height: 1.5; }
.wx-rmk { margin-top: 12px; }
.wx-rmk ul { margin: 2px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.5; color: #333; }
/* The theme removes list bullets; remarks read as a list. */
.wx-rmk ul li { list-style: disc outside; display: list-item; margin: 0 0 2px; }
.wx-tolink { margin: 4px 0 10px; padding: 12px 15px; border: 1px solid #e0e0e0; border-radius: 8px; background: #f9f9f9; font-size: 14px; line-height: 1.5; color: #333; }
.wx-tolink a { color: #1078b3; font-weight: bold; }
.wx-tznote { font-size: 13px; color: #666; line-height: 1.45; margin: 0 0 10px; }
/* The directory below the search. */
.wx-browse { margin-top: 26px; padding-top: 6px; border-top: 1px solid #e0e0e0; }
.wx-browse h2 { font-size: 20px; color: var(--blue-text,#1078b3); margin: 14px 0 4px; line-height: 1.3; }
body.dark-mode .wx-browse { border-top-color: #444; }
body.dark-mode .wx-foot, body.dark-mode .wx-note, body.dark-mode .wx-tznote { color: #aaa; }
body.dark-mode .search-bar { background: #222; border-color: #444; }
body.dark-mode .wx-lookup .search-field input { background: #2a2a2a; color: #e0e0e0; -webkit-text-fill-color: #e0e0e0; border-color: #555; }
body.dark-mode .wx-airport, body.dark-mode .wx-card h2, body.dark-mode .wx-value, body.dark-mode .wx-ptext, body.dark-mode .wx-table td { color: #e0e0e0; }
body.dark-mode .wx-airport a, body.dark-mode .wx-raw summary { color: #4da6ff; }
body.dark-mode .wx-btn { background: transparent; color: #4da6ff; border-color: #555; }
body.dark-mode .wx-card { background: #2a2a2a; border-color: #444; }
body.dark-mode .wx-raw pre { background: #1e1e1e; border-color: #444; color: #e0e0e0; }
body.dark-mode .wx-caption { color: #bbb; }
body.dark-mode .wx-table th { border-bottom-color: #555; color: #aaa; }
body.dark-mode .wx-table td { border-bottom-color: #3a3a3a; }
body.dark-mode .wx-table tr.best td { background: #1f3322; }
body.dark-mode .wx-table .rname, body.dark-mode .wx-ptitle { color: #4da6ff; }
body.dark-mode .wx-period { border-top-color: #3a3a3a; }
body.dark-mode .wx-tail { color: #ef9a9a !important; }
body.dark-mode .wx-perm a { color: #4da6ff; }
body.dark-mode .wx-rmk ul { color: #e0e0e0; }
body.dark-mode .wx-tolink { background: #222; border-color: #444; color: #e0e0e0; }
body.dark-mode .wx-tolink a { color: #4da6ff; }
/* The site's dark-mode.css gives every table cell a light grey background with black text (!important, and
   striped by tr:nth-child), every span and div #ddd and every h2 #f0f0f0 (!important), so this page's own
   colours are restated here; tr:nth-child(n) only lifts the specificity above the striping rule. */
body.dark-mode .wx-table th { background: transparent !important; color: #aaa !important; border-color: #555 !important; }
body.dark-mode .wx-table tr:nth-child(n) td { background: #2a2a2a !important; color: #e0e0e0 !important; border-color: #3a3a3a !important; }
body.dark-mode .wx-table tr:hover td { filter: none !important; }
body.dark-mode .wx-table tr.best:nth-child(n) td { background: #1f3322 !important; }
body.dark-mode .wx-table tr:nth-child(n) td.rname { color: #4da6ff !important; }
body.dark-mode .wx-tag, body.dark-mode .wx-cat { color: #fff !important; }
body.dark-mode .wx-browse h2 { color: #4da6ff !important; }
body.dark-mode .wx-label, body.dark-mode .wx-age, body.dark-mode .wx-note, body.dark-mode .wx-foot,
body.dark-mode .wx-empty, body.dark-mode .wx-tznote { color: #aaa !important; }
body.dark-mode .wx-age.stale { color: #ef9a9a !important; }
body.dark-mode .wx-caption { color: #bbb !important; }
body.dark-mode .wx-value, body.dark-mode .wx-value span, body.dark-mode .wx-ptext { color: #e0e0e0 !important; }
@media (max-width: 767px) {
    .search-bar { flex-wrap: nowrap; padding: 10px 12px; }
    .search-field { flex: 1; min-width: 0; }
    .search-field input { width: 100%; font-size: 16px; height: 42px; }
    .btn-search { height: 42px; padding: 0 16px; white-space: nowrap; }
    .wx-grid { grid-template-columns: repeat(2, 1fr); }
    .wx-lookup .wx-svg { flex-basis: 100%; max-width: 340px; margin: 0 auto; }
    /* Tap targets: buttons 44px, the raw-report toggles and the airport line's links at least 40px. */
    .wx-btn { min-height: 44px; padding: 6px 14px; }
    .wx-raw summary { padding: 11px 0; }
    .wx-airport a { display: inline-block; padding: 10px 0; margin-left: 10px; }
    .wx-perm a { display: inline-block; padding: 10px 0; }
    /* Phones: heading and length are in the diagram; the table keeps the winds. */
    .wx-table .hd { display: none; }
    /* While the directory filter has text (js/filter-keys.js puts .wp-typing on .wp-page) the search and its notes make way for the list. */
    .wp-typing .wx-lookup, .wp-typing .wx-tolink, .wp-typing .wx-browse > h2 { display: none; }
}