/* Worldwide Eclipse fleet ADS-B map (/fleetmap, ADR 0014 Phase 1). base.css
   keeps body { height:100vh; overflow:hidden } — the map fills the leftover
   viewport below the toolbar; nothing scrolls at body level. */

body { display: flex; flex-direction: column; background: #eef1f5; }

#fleetmap-page { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: var(--space-3); gap: var(--space-3); }

.fm-card { background: #fff; border-radius: var(--radius-lg); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* ── Header: honest counter + search (the legend lives ON the map — see
   the legend overlay block below) ── */
#fm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); font-size: 13px; color: #223; }
#fm-counter { font-weight: 600; }
#fm-asof { color: #889; font-size: 12px; }
/* Poller staleness/failure callout (ADR 0014 Phase 2) — id-qualified so it
   outranks the #fm-asof base colour. */
#fm-asof.fm-warn { color: #c62828; font-weight: 600; }

/* ── Fleet search (toolbar box + dropdown; fleet_map.js Fleet search
   section). The dropdown hangs off the relative wrapper, ABOVE the map
   (Leaflet's own panes/controls stack up to z-index 1000 — 1100 clears
   them), and exists only while a query is live, so the map is never
   permanently covered. ── */
#fm-search-wrap { position: relative; display: inline-flex; }
#fm-search {
    width: 200px; font-size: 13px; color: #223;
    padding: 3px 8px; border: 1px solid #c3c9d4; border-radius: var(--radius-md);
    background: #fff;
}
#fm-search:focus { outline: none; border-color: var(--color-accent); }
#fm-search-results {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 1100;
    min-width: 100%; width: max-content; max-width: 320px;
    max-height: 40vh; overflow-y: auto;
    background: #fff; border: 1px solid #c3c9d4; border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
#fm-search-results[hidden] { display: none; }
.fm-sr { padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.fm-sr-active, .fm-sr:hover { background: #eef1f5; }
.fm-sr-name { font-weight: 600; }
.fm-sr-serial { color: #667; font-size: 12px; }
/* Listed but not selectable: no marker exists, so no pointer affordance —
   the "no ADS-B position" note carries the why in text. */
.fm-sr-nopos { cursor: default; }
.fm-sr-nopos .fm-sr-name { color: #667; }
.fm-sr-nopos-note { color: #889; font-size: 11px; font-style: italic; }
/* Registered-owner NAME in a result row (ADR 0017): secondary to the
   registration/hex that identifies the row; a long LLC name must not
   stretch the dropdown. Addresses never render here. */
.fm-sr-owner { color: #667; font-size: 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; }
.fm-sr-none, .fm-sr-more { color: #889; font-style: italic; cursor: default; }
.fm-sr-none:hover, .fm-sr-more:hover { background: none; }
/* ── Legend overlay (Leaflet bottom-left control; fleet_map.js
   addLegendControl builds the <details> shell, legendHtml fills the body
   with one live count per key each 60 s refresh). A collapsible panel so
   it stays dismissible to a one-line "Legend" chip; bottom-left keeps it
   clear of the search dropdown (top) and Leaflet's attribution
   (bottom-right). Two grouped axes — shape and staleness — each summing to
   the drawn-marker count, plus the off-map (no-position) group. The two
   axes' rows carry filter CHECKBOXES (fleet_map.js Legend filtering
   section); counts stay the true totals with active filtering disclosed
   on its own line. */
.fm-legend-ctl {
    background: rgba(255,255,255,0.92); border: 1px solid #c3c9d4;
    border-radius: var(--radius-md); box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    font-size: 12px; color: #445; max-width: 240px;
}
.fm-legend-ctl summary { cursor: pointer; font-weight: 600; padding: 4px 10px; color: #223; }
/* The body's max-height is set INLINE by fleet_map.js sizeLegendBody from
   the live MAP box height (legendBodyMaxPx, re-applied on every Leaflet
   resize) — never a viewport unit here: the control is bottom-anchored
   inside #fm-map (overflow:hidden), so a vh-based cap taller than a short
   mobile map box clipped the <summary> out of reach (the mobile
   legend bug). The body scrolls within whatever the map box allows. */
#fm-legend-body { padding: 0 10px 8px; overflow-y: auto; }
.fm-lg-group { margin-top: 8px; }
.fm-lg-hdr { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #889; }
/* The "(same N aircraft)" disclosure reads as a note, not a heading. */
.fm-lg-note { text-transform: none; letter-spacing: 0; font-weight: 400; }
.fm-lg-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
/* Filterable rows are <label>s wrapping their checkbox (fleet_map.js
   legendHtml): the whole row toggles, which is what makes the checkbox
   usable on a phone. The no-position row stays a plain div with no
   checkbox — nothing is drawn for it, so there is nothing to filter, and
   the missing box (beside the checkboxed rows) is the visual cue. */
label.fm-lg-row { cursor: pointer; }
.fm-lg-check { flex: none; margin: 0; width: 14px; height: 14px; accent-color: var(--color-accent); }
.fm-lg-swatch { flex: none; width: 14px; display: inline-flex; justify-content: center; }
.fm-lg-label { flex: 1; }
.fm-lg-count { font-weight: 600; color: #223; font-variant-numeric: tabular-nums; }
.fm-lg-sum { margin-top: 3px; color: #889; font-size: 11px; }
/* "filters hide N of M" — the disclosure that keeps a user-emptied map
   from ever being unexplained. Amber: a caution, not an error. */
.fm-lg-hidden { color: #b26a00; }

/* Marker swatches (shared by the legend rows). Shape keys: icon = reported
   in flight, dot = on ground OR unknown ground state (the dot must cover
   both; an unknown state has not earned the flying claim). Neutral slate
   so neither shape key reads as a fourth staleness colour; the plane
   swatch is the shared silhouette (components/plane_icon.js
   legendPlaneSwatchHtml). */
.fm-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,0.25); }
.fm-dot-shape { background: #667; }
.fm-dot-fresh { background: #2ca02c; }
.fm-dot-hours { background: #ff9800; }
.fm-dot-days  { background: #9e9e9e; }

#fm-empty { text-align: center; color: #889; padding: 40px 0; font-size: 14px; }
#fm-empty code { background: #e3e7ee; padding: 1px 5px; border-radius: var(--radius-md); }

/* ── Map + sidebar row: the panel sits BESIDE the map, never over the
   markers it describes (fleet_map.js calls invalidateSize on open/close so
   Leaflet re-measures the map box). ── */
#fm-main { flex: 1; min-height: 0; display: flex; gap: var(--space-3); }
#fm-map { flex: 1; min-width: 0; min-height: 0; border-radius: var(--radius-lg); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

#fm-sidebar { position: relative; flex: none; width: 300px; overflow-y: auto; padding: var(--space-3) var(--space-4); font-size: 13px; line-height: 1.45; }
#fm-sidebar[hidden] { display: none; }
#fm-sidebar-close { position: absolute; top: 4px; right: 6px; border: none; background: none; color: #889; font-size: 18px; line-height: 1; padding: 4px 6px; cursor: pointer; border-radius: var(--radius-md); }
#fm-sidebar-close:hover { color: #223; background: #eef1f5; }

/* ── Sidebar content ── */
#fm-sidebar .fm-reg { font-weight: 700; font-size: 15px; padding-right: 20px; }
#fm-sidebar .fm-meta { color: #556; }
#fm-sidebar .fm-field { margin-top: 8px; display: flex; flex-direction: column; }
#fm-sidebar .fm-field-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #889; }
#fm-sidebar .fm-history { margin-top: 10px; }
/* Display-only nudge disclosure (fleet_map.js spreadPositions): a caveat
   in the evidence voice, distinct from the field values it qualifies. */
#fm-sidebar .fm-spread-note { color: #889; font-size: 12px; margin-top: 2px; }
/* Registered owner (ADR 0017): the "not in the FAA registry snapshot"
   state reads as a note, not a value. */
#fm-sidebar .fm-owner-none { color: #889; font-style: italic; }
#fm-sidebar .fm-registry { margin-top: 8px; }
#fm-sidebar .fm-registry summary { cursor: pointer; font-size: 12px; color: #556; }
#fm-sidebar .fm-registry-body { margin: 4px 0 0 10px; }

/* ── Derived flight block (ADR 0015) ── */
#fm-sidebar .fm-flight { margin-top: 10px; padding-top: 8px; border-top: 1px solid #e3e7ee; }
#fm-sidebar .fm-flight-hdr { font-weight: 600; font-size: 12px; color: #556; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Provenance badge: visually distinct from decoded-log surfaces, but the
   distinction is ALSO in its text — never colour-only. */
#fm-sidebar .fm-badge { font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: #6a1b9a; background: #f3e8f9; border: 1px solid #d6b8e8; border-radius: var(--radius-md); padding: 1px 5px; white-space: nowrap; }
#fm-sidebar .fm-route { margin-top: 2px; }
#fm-sidebar .fm-evidence { color: #889; font-size: 12px; }
#fm-sidebar .fm-gap { color: #b26a00; font-size: 12px; }
#fm-sidebar .fm-noflights { color: #889; font-size: 12px; font-style: italic; }

/* ── Airborne aircraft icon (L.divIcon wrapper; fleet_map.js
   aircraftIconHtml builds the inline SVG inside it — silhouette filled with
   the staleness colour, #333 outline, rotated to true_track). The custom
   className keeps Leaflet's .leaflet-div-icon white box off; explicit
   transparent background/no border in case any global div styling reaches
   it. The rotation transform is on the inner <svg>, never this wrapper, so
   the 60 s marker rebuild (which recreates the element) preserves it. The
   selection highlight needs no rule here: it is carried entirely by the
   marker's TOOLTIP element (.fm-label-selected below works for both marker
   forms). ── */
.fm-plane { background: none; border: none; }

/* ── Marker registration labels (permanent Leaflet tooltips; fleet_map.js
   binds one per dot, content pre-escaped). Zoom gating is the .fm-labels-on
   class the zoomend handler toggles on the map container — so a zoom costs
   one classList op, and the per-tooltip work stays here in CSS. The
   selected aircraft's tooltip carries .fm-label-selected and stays visible
   at any zoom. pointer-events:none so a label never swallows the marker
   click underneath. Opaque-ish white chip + dark text + border + shadow
   reads over both light land and dark water OSM tiles (same treatment as
   flightview's .map-poi-label). */
.fm-marker-label {
    background: rgba(255,255,255,0.88); border: 1px solid #99a;
    border-radius: 3px; padding: 0 4px;
    font-size: 10px; font-weight: 700; color: #223;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    pointer-events: none;
}
.fm-marker-label::before { display: none; } /* no tooltip arrow */
#fm-map:not(.fm-labels-on) .fm-marker-label:not(.fm-label-selected) { display: none; }

/* ── Mobile (≤768px — the repo-wide boundary, base.css nav collapse; the JS
   twin is fleet_map.js MOBILE_SHEET_MQ, test-pinned to this block): the
   details panel becomes a BOTTOM SHEET — full width, anchored under the
   map (#fm-main goes column; the aside follows the map in DOM order), still
   dismissed by its × or a map click. It is a flex SIBLING, not an overlay,
   so the map box genuinely shrinks above it: the invalidateSize-then-fit
   ordering in fleet_map.js therefore lands a search zoom inside the
   visible map, never underneath the sheet. Height capped so the map stays
   visible; the sheet body scrolls (overflow-y from the base #fm-sidebar
   rule). Desktop (>768px) keeps the side column exactly as is. */
@media (max-width: 768px) {
    #fm-main { flex-direction: column; }
    #fm-sidebar { width: auto; max-height: 40vh; }
    /* The search box takes its own full-width toolbar row (the toolbar
       already flex-wraps) instead of squeezing beside the counter; the
       dropdown still overlays the map only while a query is live, so the
       map is never permanently covered on a phone. */
    #fm-search-wrap { flex: 1 1 100%; }
    #fm-search { width: 100%; }
    #fm-search-results { max-width: none; width: 100%; }
    /* The legend overlay starts COLLAPSED on narrow viewports (fleet_map.js
       addLegendControl checks MOBILE_SHEET_MQ) — the map box is small and
       the bottom sheet sits directly below it. An expanded panel is kept
       inside the map box by the JS-owned body cap (sizeLegendBody — the
       old 45vh cap here was viewport-relative and clipped the summary out
       of a sheet-shortened map box); this rule only narrows the panel so
       it never spans a phone map. It stays inside the map box, never over
       the sheet (a flex SIBLING below the map, not an overlay). */
    .fm-legend-ctl { max-width: 200px; font-size: 11px; }
}

/* ⌂ whole-fleet view control (under the zoom buttons) — the explicit way
   back after a search zoom or manual pan. leaflet-bar supplies the button
   chrome. */
.fm-fleet-view { font-size: 17px; line-height: 26px; }

/* Required source attribution (active provider) — always visible below the map. */
#fm-attribution { font-size: 12px; color: #667; text-align: right; }
#fm-attribution a { color: var(--color-accent); }