/* FAA airport diagram section and zoom viewer. All rules are .apd*. The chart stays black on white in both themes. */
.apd { margin: 24px 0; }
.apd-img {
  display: block; max-width: 640px; margin: 0 auto;
  background: #fff; border: 1px solid #ccc; padding: 8px; box-sizing: border-box;
  cursor: zoom-in;
}
.apd-img img { display: block; width: 100%; height: auto; }
body.dark-mode .apd-img { background: #fff; border-color: #ccc; }
body.dark-mode .apd-img img { filter: none; opacity: 1; }
/* Our redrawn SVG (section .apd-vec): wider, its own light and dark colours (the inline copy follows the site theme). */
.apd-svg { display: block; max-width: 1100px; margin: 0 auto; border: 1px solid #c9d0d6; box-sizing: border-box; cursor: zoom-in; background: #eef1f4; }
.apd-svg img, .apd-svg svg { display: block; width: 100% !important; height: auto !important; max-width: none; }
body.dark-mode .apd-svg { border-color: #3a424a; background: #14181d; }
.apd-vec .apd-links, .apd-vec .apd-note { max-width: 1100px; }
.apd-links .apd-png, body.dark-mode .apd-links .apd-png { display: inline; max-width: none; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; }
.apd-view-dark, .apd-view-dark .apd-map, .apd-view-dark .apd-map.leaflet-container { background: #14181d; }
.apd-links { max-width: 640px; margin: 8px auto 0; text-align: center; }
.apd-note { max-width: 640px; margin: 4px auto 0; text-align: center; font-size: 12px; color: #666; }
body.dark-mode .apd-note { color: #aaa; }
body.apd-open { overflow: hidden; }
.apd-view { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000; background: #fff; display: flex; flex-direction: column; }
.apd-close {
  position: absolute; top: 8px; right: 8px; z-index: 10001;
  min-width: 44px; min-height: 44px; padding: 0 16px;
  background: #fff; color: #111; border: 1px solid #888; border-radius: 6px; font-size: 16px; cursor: pointer;
}
.apd-map { position: relative; flex: 1 1 auto; min-height: 0; background: #fff; outline: none; }
.apd-map.leaflet-container { background: #fff; }
/* The caption bar under the chart in the viewer: always dark text on a light bar, in light and dark mode alike (the viewer is white). */
.apd-cap {
  flex: 0 0 auto; position: relative; z-index: 10001; box-sizing: border-box;
  padding: 8px 12px; background: #f1f1f1; color: #222; border-top: 1px solid #888;
  font-size: 13px; line-height: 1.4; text-align: center;
}
.apd-cap-pdf { margin-left: 8px; color: #0b4a9e; text-decoration: underline; display: inline-block; padding: 6px 4px; }
.apd-cap-pdf:focus { outline: 3px solid #0b4a9e; outline-offset: 2px; }

/* Rotate buttons (client side only; a visitor turns a sideways diagram). The turned picture is laid out by the
   link: ::before holds the swapped aspect ratio, the image is turned about its centre inside it. */
.apd-rotated { position: relative; }
.apd-rotated::before { content: ""; display: block; padding-top: var(--apd-pad); }
.apd-rotated img {
  /* !important: the site rule on '#wrapper img' (css/site.css: height auto, max-width 100 percent) outranks a class rule and would
     clamp a turned picture to the box width and undo its height. */
  position: absolute; top: 50%; left: 50%; max-width: none !important; object-fit: contain;
  width: calc((100% - 16px) * var(--apd-iw)) !important; height: calc((100% - 16px) * var(--apd-ih)) !important;
  transform: translate(-50%, -50%) rotate(var(--apd-r));
}
.apd-rot { max-width: 640px; margin: 8px auto 0; display: flex; justify-content: center; gap: 8px; }
.apd-rot-btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: 40px; min-height: 40px; padding: 0 14px; gap: 6px; font: inherit; font-size: 15px; cursor: pointer;
  background: #fff; color: #111; border: 1px solid #888; border-radius: 20px;
}
.apd-rot-btn:hover { background: #eee; }
.apd-rot-btn:focus-visible { outline: 3px solid #0b4a9e; outline-offset: 2px; }
.apd-rot-btn svg { display: block; flex: 0 0 auto; }
body.dark-mode .apd-rot-btn { background: #2b2b2b; color: #eee; border-color: #777; }
body.dark-mode .apd-rot-btn:hover { background: #3a3a3a; }
body.dark-mode .apd-rot-btn:focus-visible { outline-color: #8ab4f8; }
@media (max-width: 700px) {
  .apd-rot-btn { min-width: 44px; min-height: 44px; }
}
/* In the viewer (white in both themes) the buttons keep the light look; left of the Close button, clear of Leaflet's zoom control. */
.apd-view-rot { position: absolute; top: 8px; left: 56px; z-index: 10001; display: flex; gap: 8px; }
body .apd-view .apd-rot-btn, body.dark-mode .apd-view .apd-rot-btn { background: #fff; color: #111; border-color: #888; }
body .apd-view .apd-rot-btn:hover, body.dark-mode .apd-view .apd-rot-btn:hover { background: #eee; }
body .apd-view .apd-rot-btn:focus-visible, body.dark-mode .apd-view .apd-rot-btn:focus-visible { outline-color: #0b4a9e; }
/* Dark mode paints every div and span #ddd (css/dark-mode.css, specificity 0,1,2), which made the viewer's labels pale grey on its white
   bar. The viewer is white in both themes, so its caption and button text keep dark colours; elsewhere the label follows its button. */
body.dark-mode .apd-rot-btn .apd-rot-t { color: inherit; }
body .apd-view .apd-rot-btn .apd-rot-t, body.dark-mode .apd-view .apd-rot-btn .apd-rot-t { color: #111; }
body .apd-view .apd-cap, body.dark-mode .apd-view .apd-cap, body.dark-mode .apd-view .apd-cap span { color: #222; }
body .apd-view .apd-cap .apd-cap-pdf, body.dark-mode .apd-view .apd-cap .apd-cap-pdf { color: #0b4a9e; }
/* Leaflet's zoom buttons in the viewer. Dark mode painted their glyph spans #ddd on Leaflet's white face (owner screenshot
   2026-11-05): on the white viewer they keep a black glyph; on our dark redrawn diagram (.apd-view-dark) they take the
   site's dark map buttons (#2b2b2b face, #ddd glyph, visible edge), as do Close and the caption bar. */
body .apd-view .leaflet-bar a, body .apd-view .leaflet-bar a span, body.dark-mode .apd-view .leaflet-bar a, body.dark-mode .apd-view .leaflet-bar a span { color: #111; }
body .apd-view .leaflet-bar a:focus-visible { outline: 3px solid #0b4a9e; outline-offset: 1px; }
body .apd-view.apd-view-dark .leaflet-bar { border: 1px solid #8a8a8a; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
body .apd-view.apd-view-dark .leaflet-bar a { background: #2b2b2b; color: #ddd; border-bottom-color: #555; }
body .apd-view.apd-view-dark .leaflet-bar a span, body.dark-mode .apd-view.apd-view-dark .leaflet-bar a span { color: #ddd; }
body .apd-view.apd-view-dark .leaflet-bar a:hover, body .apd-view.apd-view-dark .leaflet-bar a:focus { background: #3a3a3a; color: #fff; }
body .apd-view.apd-view-dark .leaflet-bar a:hover span, body .apd-view.apd-view-dark .leaflet-bar a:focus span { color: #fff; }
body .apd-view.apd-view-dark .leaflet-bar a:focus-visible { outline-color: #8ab4f8; }
body .apd-view.apd-view-dark .leaflet-bar a.leaflet-disabled { background: #222; color: #777; }
body .apd-view.apd-view-dark .leaflet-bar a.leaflet-disabled span, body.dark-mode .apd-view.apd-view-dark .leaflet-bar a.leaflet-disabled span { color: #777; }
.apd-close:hover { background: #eee; }
.apd-close:focus-visible { outline: 3px solid #0b4a9e; outline-offset: 2px; }
body .apd-view.apd-view-dark .apd-close { background: #2b2b2b; color: #eee; border-color: #8a8a8a; }
body .apd-view.apd-view-dark .apd-close:hover { background: #3a3a3a; color: #fff; }
body .apd-view.apd-view-dark .apd-close:focus-visible { outline-color: #8ab4f8; }
body .apd-view.apd-view-dark .apd-cap, body.dark-mode .apd-view.apd-view-dark .apd-cap, body.dark-mode .apd-view.apd-view-dark .apd-cap span { background: #1c2127; color: #ddd; border-top-color: #3a424a; }
body.dark-mode .apd-view.apd-view-dark .apd-cap span { background: transparent; }
body .apd-view.apd-view-dark .apd-cap .apd-cap-pdf, body.dark-mode .apd-view.apd-view-dark .apd-cap .apd-cap-pdf { color: #8ab4f8; }
body .apd-view.apd-view-dark .apd-cap-pdf:focus { outline-color: #8ab4f8; }