/* near-table.css - the Flights above you table under the tracker map (flights/js/flight-near.js tableHtml; owner,
   2026-10-29 round 2). Every header is a sort button; each row opens its flight. At 600 px and under each row is a card,
   as table.fn-cards in flights/css/number.css, and the Sort by menu sorts. Kept out of tracker.css, which is at the FTP
   host's size ceiling. Loaded by flights/default.aspx (bump its ?v= there). Tests: node flights/test/near-rows.test.js */
.near-sortbar { display: none; }
.near-wrap { overflow-x: auto; border: 1px solid #e0e0e0; border-radius: 8px; }
.near-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; color: #222; }
.near-table th { padding: 0 6px; border-bottom: 1px solid #ddd; text-align: left; white-space: nowrap; color: #555; font-size: 12px; background: none; }
.nt-sort { display: inline-flex; align-items: center; gap: 3px; min-height: 44px; padding: 0 2px; border: 0; background: none; font: inherit; font-weight: bold; color: inherit; cursor: pointer; }
.nt-ind { font-size: 9px; color: #1078b3; }
.near-table td { padding: 4px 6px; border-top: 1px solid #eee; vertical-align: middle; white-space: nowrap; }
.near-table tbody tr { cursor: pointer; }
.near-table tbody tr:hover { background: #f0f8ff; }
.near-table .near-row { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-weight: bold; color: #1078b3; cursor: pointer; vertical-align: middle; }
.nt-logo { display: inline-block; width: 22px; height: 22px; margin-right: 6px; vertical-align: middle; object-fit: contain; }
.near-table td.nt-flight { white-space: nowrap; }
.nt-code { font-weight: 600; }
.nt-city { display: block; font-size: 12px; color: #666; }
.near-table a { color: #1078b3; }
.near-table .nt-speed, .near-table .nt-alt, .near-table .nt-dist { text-align: right; }
.nt-vs { font-weight: bold; }
.near-dist.near-over { color: #fff; background: #1078b3; border-radius: 10px; padding: 1px 8px; font-weight: bold; font-size: 12px; }
body.dark-mode .near-wrap { border-color: #444; }
body.dark-mode .near-table { background: #1e1e1e; color: #ddd; }
body.dark-mode .near-table th { border-bottom-color: #444; color: #bbb; }
/* dark-mode.css paints every table td (and zebra rows) with !important: this table keeps its own look. */
body.dark-mode table.near-table tbody tr td { background-color: transparent !important; border-color: #333 !important; color: #ddd !important; }
body.dark-mode .near-table tbody tr:hover { background: #2a3440; }
body.dark-mode .near-table .near-row, body.dark-mode .nt-ind { color: #4da6ff; }
body.dark-mode .near-table a { color: #4da6ff; }
body.dark-mode .nt-city { color: #aaa; }
body.dark-mode .near-dist.near-over { color: #fff; background: #1078b3; }
/* Fit (2026-10-29): the table fits the list's own width from 601 px up (the tracker column can be about 560 to 820 px
   wide). Compacted by the list's width, not the window's: short headers, tighter cells, cities cut short with an
   ellipsis (full name in the title), then toward/away and smaller type. No column is hidden. The wrapper still scrolls
   as a last resort (and in a browser without container queries). */
.near-list { container-type: inline-size; container-name: near; }
.nt-hs { display: none; }
@media (min-width: 601px) {
    @container near (max-width: 860px) {
        .near-table { font-size: 13px; }
        .near-table td, .near-table th { padding-left: 4px; padding-right: 4px; }
        .nt-hl { display: none; }
        .nt-hs { display: inline; }
        .nt-city { max-width: 7.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .nt-logo { margin-right: 4px; }
    }
    @container near (max-width: 700px) {
        .nt-tw { display: none; }
        .near-table { font-size: 12px; }
        .near-table td, .near-table th { padding-left: 3px; padding-right: 3px; }
        .nt-logo { width: 18px; height: 18px; }
        .nt-city { max-width: 5.5em; font-size: 11px; }
        .near-dist.near-over { font-size: 11px; padding: 1px 5px; }
    }
}
/* Near table on phones (600 px and under): each row a card; no header row, no sideways scroll. */
@media (max-width: 600px) {
    .near-sortbar { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; color: #555; }
    .near-sort-sel { min-height: 44px; flex: 1 1 auto; min-width: 0; font: inherit; font-size: 15px; }
    .near-wrap { overflow: visible; }
    .near-table, .near-table tbody { display: block; }
    .near-table thead { display: none; }
    .near-table tbody tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; padding: 0 12px 8px; border-top: 1px solid #eee; }
    .near-table tbody tr:first-child { border-top: 0; }
    .near-table tbody tr::before, .near-table tbody tr::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
    .near-table tbody tr::after { order: 5; }
    .near-table td { display: block; order: 6; min-width: 0; max-width: 100%; padding: 1px 0; border: 0; font-size: 12px; color: #666; white-space: normal; }
    .near-table td:empty { display: none; }
    .near-table td.nt-flight { order: 0; font-size: 15px; color: inherit; }
    .near-table td.nt-dist { order: 2; margin-left: auto; font-size: 13px; color: inherit; }
    .near-table td.nt-dep, .near-table td.nt-arr { order: 4; font-size: 14px; color: inherit; }
    .near-table td.nt-arr::before { content: "\2192  "; content: "\2192  " / "to"; color: #666; }
    .near-table td.nt-hdg[data-label]::before { content: attr(data-label) " "; content: attr(data-label) " " / ""; font-weight: 600; }
    .near-table .nt-city { display: inline; margin-left: 4px; }
    .near-dist.near-over { font-size: 11px; padding: 1px 6px; }
    body.dark-mode .near-sortbar { color: #bbb; }
    body.dark-mode .near-table tbody tr { border-top-color: #333; }
    body.dark-mode table.near-table tbody tr td { color: #aaa !important; }
    body.dark-mode table.near-table tbody tr td.nt-flight, body.dark-mode table.near-table tbody tr td.nt-dist, body.dark-mode table.near-table tbody tr td.nt-dep, body.dark-mode table.near-table tbody tr td.nt-arr { color: #ddd !important; }
    body.dark-mode .near-table td.nt-arr::before { color: #aaa; }
}
/* Near me's Commercial / Private / All (Gold; flight-near.js trafficHtml): the radius bar's look (tracker.css .near-radius),
   its radio buttons' checked state here, since tracker.css is at its size cap. */
.near-radius button[aria-checked="true"] { background: #1078b3; color: #fff; }
body.dark-mode .near-radius button[aria-checked="true"] { background: #1078b3 !important; color: #fff; }
/* A private plane's "Private" label (Gold, private flights plan 1 Task 10: the near table, the flight list, the card and
   the panel; flight-near.js, flight-tracker.js privateChipHtml), in the aircraft hub's Private colours (aircraft.css
   .ac-k-biz). Here, not tracker.css, which is at its size cap; this file loads on the tracker page after it. */
.pf-private { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid currentColor; border-radius: 9px; font-size: 11px; font-weight: 600; line-height: 16px; color: #6d28d9; vertical-align: middle; white-space: nowrap; }
.fps-airline .pf-private, .fp-tile-val .pf-private, td > .pf-private:first-child { margin-left: 0; }
body.dark-mode .pf-private { color: #b79cff !important; }
/* A piston or helicopter type with no photo shows its map icon's top view in the Aircraft tile (flight-tracker.js
   showTypePhoto, images/planes/<family>.svg): small, on a light panel in both themes like the aircraft pages' drawings. */
/* The Charts and boundaries button while a press waits for the charts token answer (flight-map.js chartsBusy). */
#trackerMap a.charts-btn.charts-busy { cursor: progress; opacity: 0.55; }
.fp-ac-topview img { width: 96px !important; max-width: 96px; height: 96px; padding: 8px; box-sizing: content-box; background: #f4f6f8 !important; }
/* The favorite airport's view (Silver and Gold, 2026-10-30; flight-near.js drawAirport): the airport's code as a tag at the
   centre of the ring, in place of Near me's blue dot. The same in both themes (the map's own airport labels are). */
.near-fav-wrap { background: none; border: 0; }
.near-fav-pin { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); padding: 3px 6px; border: 2px solid #fff; border-radius: 5px; background: #1078b3; color: #fff; font: bold 12px/1.2 Arial, sans-serif; letter-spacing: 0.5px; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,0.4); pointer-events: none; }
#trackerMap.map-dark .near-fav-pin { border-color: #1e1e1e; }
/* The member's preferred airline, first in the search suggestions (flights/js/flight-search.js showDropdown, owner
   2026-10-30): a small "Your airline" tag on its row. Here because tracker.css is at its size cap. */
.ac-option .ac-fav { display: inline-block; margin-left: 8px; padding: 0 6px; border: 1px solid #0b4f7a; border-radius: 9px; font-size: 11px; line-height: 16px; font-weight: bold; color: #0b4f7a; vertical-align: 1px; white-space: nowrap; }
/* #0b4f7a / #7cc0ff: 4.5:1 and more on the suggestion panel and its active row (css/suggest.css), light and dark. */
body.dark-mode .ac-option .ac-fav { border-color: #7cc0ff; color: #7cc0ff; }