/* Full airport diagram popup (flights/js/airport-diagram-popup.js) and the map's "Full diagram" button
   (weather/js/wx-radar-map.js makes it; only flights/airports.aspx asks for it, so its look lives here). Bump ?v= on the page. */

/* The button: the map's button look, under the Radar button and, when it shows, the Airport diagram toggle. */
.wp-dg-btn { position: absolute; top: 82px; right: 10px; z-index: 1000; display: flex; align-items: center; gap: 5px; padding: 5px 10px; font: bold 12px/1.3 inherit; color: #333; background: #fff; border: 2px solid rgba(0,0,0,0.2); border-radius: 4px; cursor: pointer; box-shadow: 0 1px 5px rgba(0,0,0,0.15); }
.wp-apd-btn[hidden] + .wp-dg-btn { top: 46px; }
.wp-dg-btn[hidden] { display: none; }
.wp-dg-btn:hover { background: #f5f5f5; }
.wp-dg-btn svg { display: block; }
.wp-radar-fs .wp-dg-btn { top: calc(82px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); }
.wp-radar-fs .wp-apd-btn[hidden] + .wp-dg-btn { top: calc(46px + env(safe-area-inset-top, 0px)); }

/* The dialog: the whole screen, above the map's own full screen (9000), under the diagram's zoom viewer (10000). */
html.adp-open, html.adp-open body { overflow: hidden; }
.adp { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9500; display: flex; flex-direction: column; box-sizing: border-box;
    height: 100vh; height: 100dvh; background: #fff; color: #1f1f1f;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.adp[hidden] { display: none; }
.adp-top { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; border-bottom: 1px solid #dde3e8; }
.adp .adp-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 18px; line-height: 1.3; }
.adp-x { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid #c9d0d6; border-radius: 8px; background: #fff; color: #1f1f1f; cursor: pointer; }
.adp-x:hover { background: #f1f4f7; }
.adp-x:focus-visible, .adp a:focus-visible, .adp button:focus-visible { outline: 3px solid #1078b3; outline-offset: 2px; }
.adp-body { flex: 1 1 auto; min-height: 0; display: flex; }
.adp-main { flex: 1 1 auto; min-width: 0; overflow: auto; padding: 12px 16px; }
.adp-side { flex: 0 0 300px; overflow: auto; box-sizing: border-box; padding: 14px 16px; border-left: 1px solid #dde3e8; background: #f6f8fa; font-size: 14px; line-height: 1.45; }
.adp-wait { margin: 40px 0; text-align: center; color: #555; }

/* The mounted diagram section (diagrams/css/airport-diagram.css): the dialog's heading names it, so its own is for screen readers. */
.adp .apd { margin: 0; }
.adp .apd > h3 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }
.adp .apd-svg { position: relative; }
@media (min-width: 768px) {
    /* Wide screens: the drawing fits the height left under the heading and above the links and note. */
    .adp .apd-svg { max-width: min(100%, calc((100vh - 170px) * var(--adp-ar, 1.2))); max-width: min(100%, calc((100dvh - 170px) * var(--adp-ar, 1.2))); }
    .adp .apd-vec .apd-links, .adp .apd-vec .apd-note { max-width: none; text-align: center; }
}

/* Business pins on our redrawn SVG (placed by its data-bounds; percent of its box). */
.adp-pins { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.adp-pin { position: absolute; display: block; width: 0; height: 0; }
.adp-dot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; box-sizing: border-box; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.adp-pname { position: absolute; left: 10px; top: -10px; padding: 1px 5px; border-radius: 3px; white-space: nowrap; font: bold 12px/1.4 system-ui, Arial, sans-serif; color: #1f1f1f; background: rgba(255,255,255,0.92); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }

/* The side panel. */
.adp .adp-sh { margin: 0 0 10px; font-size: 16px; }
.adp-side p { margin: 0 0 10px; }
.adp-wind { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 17px; font-weight: bold; }
.adp-arr { flex: none; width: 28px; height: 28px; }
.adp-arr svg { display: block; }
.adp-best { font-weight: bold; color: #1b5e20; }
.adp-sub { color: #555; }
.adp-lbl { display: inline-block; margin-right: 4px; font-size: 11px; font-weight: bold; letter-spacing: 0.4px; text-transform: uppercase; color: #555; }
.adp-stale { color: #a14a00; }
.adp-note { font-size: 13px; color: #555; }
.adp-cat { display: inline-block; padding: 1px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; letter-spacing: 0.5px; color: #fff; }
.adp-cat-vfr { background: #1b7f3b; }
.adp-cat-mvfr { background: #1565c0; }
.adp-cat-ifr { background: #c62828; }
.adp-cat-lifr { background: #8e24aa; }

/* Phones: one column, the panel under the diagram, the whole body scrolls. */
@media (max-width: 767px) {
    .adp-body { flex-direction: column; overflow: auto; -webkit-overflow-scrolling: touch; }
    .adp-main, .adp-side { overflow: visible; }
    .adp-main { padding: 10px; }
    .adp-side { flex: none; border-left: 0; border-top: 1px solid #dde3e8; }
    .adp .adp-title { font-size: 16px; }
}

/* Dark mode (dark-mode.css paints every div, span and p, hence the !important on the parts that must keep their colour). */
body.dark-mode .adp { background: #1e1e1e; color: #ddd; }
body.dark-mode .adp-top, body.dark-mode .adp-side { border-color: #3a424a; }
body.dark-mode .adp-side { background: #23272c; }
body.dark-mode .adp-x { background: #2a2f35; border-color: #4a525a; color: #eee; }
body.dark-mode .adp-x:hover { background: #343a41; }
body.dark-mode .adp-best { color: #81c784 !important; }
body.dark-mode .adp-sub, body.dark-mode .adp-note, body.dark-mode .adp-lbl, body.dark-mode .adp-wait { color: #aaa !important; }
body.dark-mode .adp-stale { color: #ffb74d !important; }
body.dark-mode .adp-cat { color: #fff !important; }
body.dark-mode .adp-pname { color: #1f1f1f !important; background: rgba(255,255,255,0.92) !important; }
body.dark-mode .adp-x:focus-visible, body.dark-mode .adp a:focus-visible, body.dark-mode .adp button:focus-visible { outline-color: #4da6ff; }