/* Flight-detail page (Phase 2 FlySto-style redesign). Loaded only on the
   flight page; complements base.css. Cards follow the flights.css look. */

/* ── Page frame: header + #body as a real flex column ──
   The header's height is whatever it wraps to (one 44px row on desktop,
   ~2-3 rows on phone portrait) and #body takes the rest (base.css gives it
   flex:1 1 auto; min-height:0). Same page-scoped body override pattern as
   flights.css. When the header is exactly 44px this renders identically to
   the old calc(100vh - 44px). */
body { display: flex; flex-direction: column; }

/* ── Sidebar becomes a card column ── */
#sidebar { background: #eef1f5; }
.fv-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
}
#sidebar .fv-card > summary {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #778;
    font-weight: 700;
    padding: 2px 0;
}
.fv-empty { color: #999; font-size: 11px; font-style: italic; }

/* ── Route header ── */
.fv-route {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
}
.fv-route:empty { display: none; }
.fv-route-line { font-size: 20px; font-weight: 700; color: #1a2540; letter-spacing: 0.5px; }
.fv-route-arrow { color: var(--color-accent); font-weight: 400; }
.fv-route-sub { font-size: 11px; color: #778; margin-top: 2px; }

/* ── Two-column label/value rows (Times, Fuel) ── */
.fv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); padding: 3px 0; border-bottom: 1px solid #f0f1f5; }
.fv-pair:last-child { border-bottom: none; }
.fv-cell { display: flex; flex-direction: column; min-width: 0; }
.fv-lbl { font-size: 10px; color: #889; }
.fv-val { font-size: 13px; color: #223; font-variant-numeric: tabular-nums; font-weight: 600; }
.fv-row { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; border-bottom: 1px solid #f0f1f5; }
.fv-row:last-child { border-bottom: none; }
.fv-row .fv-lbl { font-size: 11px; }
.fv-pct { color: #889; font-weight: 400; font-size: 11px; }
.fv-warn-amber .fv-val, .fv-warn-amber .fv-lbl { color: var(--color-severity-amber); font-weight: 700; }

/* ── Segment chips ── */
#segments-panel { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.fv-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 12px;
    background: #e7eefb; color: #1a4f9c;
    border: 1px solid transparent;
    font-size: 12px; font-weight: 600; cursor: pointer;
}
.fv-chip:hover { border-color: var(--color-accent); background: #dbe7fa; }
.fv-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.fv-dot-red { background: var(--color-severity-red); }
.fv-dot-amber { background: var(--color-severity-amber); }

/* ── Anomaly cards grouped by phase ── */
.anom-group-hdr {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px; color: #889; margin: 6px 0 3px;
}
.anom-group-hdr:first-child { margin-top: 0; }
.anom-card {
    border: 1px solid #eceef3; border-left-width: 3px;
    border-radius: var(--radius-md);
    padding: 4px 6px; margin-bottom: 4px;
    cursor: pointer; background: #fff;
}
.anom-card:hover { background: #f4f7ff; }
.anom-card.anom-selected { background: #fce4ec; }
.anom-card.sev-red { border-left-color: var(--color-severity-red); }
.anom-card.sev-amber { border-left-color: var(--color-severity-amber); }
.anom-card.sev-green { border-left-color: var(--color-severity-green); }
.anom-card-top { display: flex; align-items: baseline; gap: 4px; }
.anom-card-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.anom-card-reason { color: #888; font-size: 9px; margin-top: 1px; }

/* Evidence drill-down affordance on cards that carry structured evidence */
.anom-evidence-btn {
    display: inline-block; margin-top: 3px;
    padding: 1px 8px; font-size: 9px; font-weight: 600;
    border: 1px solid #ccd; border-radius: 9px;
    background: #fff; color: #1a4f9c; cursor: pointer;
}
.anom-evidence-btn:hover { border-color: var(--color-accent); background: #e7eefb; }

/* ── Anomaly evidence modal (Phase 4) ── */
.evidence-modal {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); z-index: 1000;
    justify-content: center; align-items: center;
}
.evidence-modal.open { display: flex; }
.evidence-modal-content {
    background: #fff; border-radius: var(--radius-lg);
    width: min(860px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 6px 30px rgba(0,0,0,0.35);
}
.evidence-hdr { display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px 6px; }
.evidence-hdr-text { min-width: 0; }
#evidence-title { font-size: 14px; font-weight: 700; color: #1a2540; }
#evidence-reason { font-size: 11px; color: #778; margin-top: 2px; }
#evidence-close {
    margin-left: auto; flex-shrink: 0;
    background: transparent; border: none; color: #99a;
    font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px;
}
#evidence-close:hover { color: #223; }
#evidence-tab-btns { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid #e8eaf0; }
.evidence-tab {
    padding: 4px 14px; font-size: 12px; font-weight: 600;
    border: none; border-bottom: 2px solid transparent;
    background: transparent; color: #667; cursor: pointer;
}
.evidence-tab:hover { color: var(--color-accent); background: #eef4ff; }
.evidence-tab.active { color: var(--color-accent); border-bottom-color: var(--color-accent); background: #eef4ff; }
#evidence-panes { overflow-y: auto; }
.evidence-pane { display: none; padding: 8px 16px; }
.evidence-pane.active { display: block; }
#evidence-graph-chart { width: 100%; height: 340px; }
#evidence-map-div { width: 100%; height: 340px; border-radius: var(--radius-md); }
#evidence-fleet-chart { width: 100%; height: 300px; }
#evidence-fleet-summary { font-size: 12px; font-weight: 600; color: #223; padding: 6px 2px 2px; }
.evidence-footer { padding: 6px 16px 12px; font-size: 11px; }
.evidence-footer a { color: #1565c0; text-decoration: none; cursor: pointer; }
.evidence-footer a:hover { text-decoration: underline; }
@media (max-width: 768px) {
    .evidence-modal-content { width: calc(100vw - 16px); max-height: calc(100vh - 24px); }
    #evidence-graph-chart, #evidence-map-div { height: 260px; }
}

/* ── Source download ── */
#source-download-btn {
    padding: 6px 14px; border: none; border-radius: var(--radius-md);
    background: var(--color-accent); color: #fff; font-size: 12px;
    font-weight: 600; cursor: pointer; margin-top: 4px;
}
#source-download-btn:hover { background: var(--color-accent-hover); }
#source-download-btn:disabled { background: #aab; cursor: default; }
#source-download-status { font-size: 11px; color: #c62828; margin-left: 8px; }

/* ── Chart tab strip ── */
#chart-tabs {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 4px 6px 2px; flex-shrink: 0;
    overflow-x: auto; white-space: nowrap;
}
#chart-tab-btns { display: flex; gap: 2px; }
.chart-tab {
    padding: 4px 12px; font-size: 12px; font-weight: 600;
    border: 1px solid transparent; border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: transparent; color: #667; cursor: pointer;
    border-bottom: 2px solid transparent;
}
.chart-tab:hover { color: var(--color-accent); background: #eef4ff; }
.chart-tab.active { color: var(--color-accent); border-bottom-color: var(--color-accent); background: #eef4ff; }
#event-level-lbl { margin-left: auto; font-size: 11px; color: #667; flex-shrink: 0; }
#event-level { font-size: 11px; padding: 2px 4px; border: 1px solid #ccc; border-radius: var(--radius-sm); }
#chart-tabs.mobile-hidden { display: none; }
#playback-bar.mobile-hidden { display: none; }

/* Δ L−R asymmetry toggle (dual-engine charts; chart.js controls visibility) */
#delta-toggle {
    padding: 3px 10px; font-size: 12px; font-weight: 600;
    border: 1px solid #ccd; border-radius: var(--radius-md);
    background: #fff; color: #667; cursor: pointer; flex-shrink: 0;
}
#delta-toggle:hover { color: var(--color-accent); border-color: var(--color-accent); }
#delta-toggle.active { color: #fff; background: var(--color-accent); border-color: var(--color-accent); }

/* "Show full flight" — reverses any Flight Phases tree zoom (phase,
   maneuver, or approach; phase_tree.js owns visibility) */
#phase-zoom-reset {
    padding: 3px 10px; font-size: 12px; font-weight: 600;
    border: 1px solid #ccd; border-radius: var(--radius-md);
    background: #fff; color: #667; cursor: pointer; flex-shrink: 0;
}
#phase-zoom-reset:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ── Chart gallery (Phase 3) ── */
#gallery {
    display: none;             /* chart.js swaps it in for #chart on the Gallery tab */
    flex: 3; min-height: 80px; overflow-y: auto;
    padding: var(--space-2);
    background: #eef1f5; border-radius: var(--radius-lg);
}
.gal-section-hdr {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
    color: #778; font-weight: 700;
    margin: var(--space-3) 2px var(--space-1);
}
.gal-section-hdr:first-child { margin-top: 0; }
.gal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: var(--space-2);
}
.gal-card {
    background: #fff; border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: var(--space-2); cursor: pointer;
    border: 1px solid transparent;
}
.gal-card:hover { border-color: var(--color-accent); }
.gal-card-title {
    font-size: 11px; font-weight: 600; color: #223; margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gal-spark { width: 220px; height: 60px; max-width: 100%; display: block; }
.gal-empty { color: #999; font-size: 12px; font-style: italic; padding: var(--space-3); }
@media (max-width: 768px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gal-grid { grid-template-columns: 1fr; } }

/* ── Playback bar (Phase 8) ── */
#playback-bar {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 2px 8px 4px; flex-shrink: 0;
}
#pb-play {
    width: 30px; padding: 2px 0; font-size: 12px;
    border: 1px solid #ccd; border-radius: var(--radius-md);
    background: #fff; color: var(--color-accent); cursor: pointer; flex-shrink: 0;
}
#pb-play:hover:not(:disabled) { border-color: var(--color-accent); background: #eef4ff; }
#pb-play:disabled { color: #aab; cursor: default; }
#pb-speed {
    font-size: 11px; padding: 2px 4px; flex-shrink: 0;
    border: 1px solid #ccd; border-radius: var(--radius-sm); background: #fff; color: #445;
}
#pb-slider { flex: 1; min-width: 60px; accent-color: var(--color-accent); }
#pb-time {
    font-size: 11px; color: #445; font-variant-numeric: tabular-nums;
    min-width: 66px; text-align: right; flex-shrink: 0;
}
/* PFD toggle: an overlay pinned to the MAP box's top-right. The positioning
   ancestor is #chart-wrap (position:relative) — NOT #map (display:none under
   .pfd-swap and mobile.js's .mobile-hidden would take the button down with
   it, stranding the user in the PFD) and NOT #map-row (display:contents
   below 1025px, so it cannot anchor). The map box is always the TOP element
   of the #chart-wrap column at every breakpoint, so the wrap's top-right IS
   the map box's top-right. z-index 850 clears the Leaflet panes/controls
   (~800) without covering #chat-fab (900). The map's own top-right is free
   (zoom topleft; attribution + legends bottomright). Mobile-landscape
   one-view suppresses it below (!important). */
#pb-pfd-toggle {
    position: absolute; top: 10px; right: 10px; z-index: 850;
    padding: 2px 10px; font-size: 11px; font-weight: 600;
    border: 1px solid #ccd; border-radius: var(--radius-md);
    background: #fff; color: #667; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
#pb-pfd-toggle:hover { color: var(--color-accent); border-color: var(--color-accent); }
#pb-pfd-toggle.active { color: #fff; background: var(--color-accent); border-color: var(--color-accent); }
/* With the PFD pane occupying the row's right side (docked or swapped in),
   the overlay button sits over the card's top-right corner — reserve room in
   the card header so it never covers the × close button. */
#map-row.pfd-open #pfd-hdr, #map-row.pfd-swap #pfd-hdr { padding-right: 76px; }

/* Chart home/reset: always-visible way out of a pinch/box zoom (mobile has
   no modebar and the double-tap reset is undiscoverable). Anchored to the
   zero-height #chart-home-anchor between the playback bar and #chart — its
   top edge tracks the chart's top edge through map drag-resizes, and it is
   NOT a child of #chart (Plotly.newPlot wipes those every render). Desktop
   offset (top:34px) drops it below the hover modebar row and the y:1.08
   legend / y:1.02 event-annotation strip; mobile blocks below move it to the
   free top-right corner (margin.t:36, no legend/modebar). z-index 20 clears
   the plot SVG and the #chart-cursor overlay (10). */
#chart-home-anchor { position: relative; height: 0; z-index: 20; }
#chart-home-btn {
    position: absolute; top: 34px; right: 10px;
    padding: 1px 8px; font-size: 14px; line-height: 18px; font-weight: 600;
    border: 1px solid #ccd; border-radius: var(--radius-md);
    background: #fff; color: #667; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
#chart-home-btn:hover { color: var(--color-accent); border-color: var(--color-accent); }
/* mobile.js one-view Map mode hides the chart slot — the overlay goes too. */
#chart-home-btn.mobile-hidden { display: none; }

/* Interpolated aircraft marker (kept visually distinct from the red
   hoverMarker dot and the orange event marker) */
.pb-plane-wrap { background: transparent; border: none; }
/* Inline twin-jet silhouette (playback.js PLANE_SVG). Its nose points north at
   rotation 0, so playback writes transform: rotate(<heading>deg) with no
   offset; the rotation must pivot on the aircraft's map position. */
.pb-plane {
    width: 26px; height: 26px; line-height: 0;
    transform-origin: center center;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
    pointer-events: none;
}
.pb-plane svg { display: block; }

/* ── Synthetic PFD card (Phase 8; docked beside the map since Phase 10) ──
   The PFD is a PANE, not an overlay: #map-row is a horizontal flex row whose
   only other child is the map. Collapsed (the default) the pane is
   display:none, so it consumes no width and no flex gap — the map is exactly
   as wide as it was before the row existed. Opened, the map flexes down and
   the PFD takes a fixed ~360px column beside it (and the row is floored at
   300px so the instrument stays legible). pfd.js owns the toggle, calls
   Leaflet's invalidateSize() after each width change, and re-fits the canvas
   whenever the card's box changes (ResizeObserver — the divider drag resizes
   the row without any window resize). */
#chart-wrap { position: relative; }
#pfd-card {
    display: none;              /* pfd.js shows it (flex); default collapsed */
    flex-direction: column;
    background: #0b0f14; border-radius: var(--radius-lg);
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
    padding: 4px 6px 6px; overflow: hidden;
}
/* The side-by-side row layout only exists where there is room for it; on
   narrow viewports the PFD REPLACES the map instead (the .pfd-swap rules in
   the narrow block below). Outside the wide block #map-row dissolves —
   display:contents makes #map a direct flex child of #chart-wrap again,
   exactly as it was before the row existed, so every mobile rule in base.css
   keeps applying to #map unchanged. */
#map-row { display: contents; }
@media (min-width: 1025px) {
    #map-row {
        display: flex; flex-direction: row; gap: var(--space-1);
        flex: 2; min-height: 80px; min-width: 0;
    }
    /* The map keeps base.css's border/radius and spreads across whatever the
       PFD leaves. min-width:0 lets it shrink inside the row instead of
       overflowing it. Height comes from the row (align-items: stretch). */
    #map-row > #map { flex: 1 1 auto; width: auto; min-width: 0; }
    #pfd-card { flex: 0 1 360px; min-width: 260px; }
    /* With the pane open, floor the row a little above the bare-map default
       (~268px at typical viewports): the PFD fits BOTH dimensions of the
       pane, and below ~300px of row the engine row becomes squint material.
       Closed, the class is absent and the map/chart split is untouched. The
       divider drag still works — it sets an inline height, which this only
       clamps from below. pfd.js nudges Leaflet + Plotly when it toggles. */
    #map-row.pfd-open { min-height: 300px; }
}
#pfd-hdr { display: flex; align-items: baseline; gap: 8px; padding: 2px 2px 4px; }
#pfd-title { font-size: 11px; font-weight: 700; color: #cfd8dc; }
#pfd-note { font-size: 9px; color: #78909c; font-style: italic; cursor: help; }
#pfd-close {
    margin-left: auto; background: transparent; border: none; color: #78909c;
    font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px;
}
#pfd-close:hover { color: #eceff1; }
/* Fills whatever the header leaves of the pane in BOTH dimensions — the
   card's height comes from the map row, so an aspect-ratio here would derive
   the height from the width and overflow the card (cropping the engine row).
   drawPfd sizes the backing store to this CSS box × devicePixelRatio and
   letterboxes the 300×250 model space inside it, so nothing is ever cut. */
#pfd-canvas {
    flex: 1 1 auto; min-height: 0; width: 100%;
    display: block; border-radius: var(--radius-md);
}

/* ── Map→chart hover cursor ── */
#chart { position: relative; }
#chart-cursor {
    position: absolute; top: 0; bottom: 0; width: 0;
    border-left: 1px dashed #d62728;
    pointer-events: none; z-index: 10; display: none;
}

/* ── Map decorations ── */
.map-arrow-wrap { background: transparent; border: none; }
.map-arrow {
    font-size: 12px; color: #263238; line-height: 16px; width: 16px;
    text-align: center; text-shadow: 0 0 2px #fff, 0 0 2px #fff;
    pointer-events: none;
}
.map-poi-label {
    background: rgba(255,255,255,0.92); 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);
}
.map-poi-label.map-poi-rwy { color: #b71c1c; border-color: #d50000; }
.map-poi-label::before { display: none; }

/* ── Narrow viewports: the PFD REPLACES the map ──
   Docked side by side the PFD needs ~360px of the row; at or below 1024px
   that would leave the map a sliver. Instead, exactly ONE of map/PFD occupies
   the map box at a time and #pb-pfd-toggle becomes a MAP/PFD switch (pfd.js
   toggles .pfd-swap on #map-row and relabels the button with its destination
   — the same one-view idiom as mobile.js's landscape Map/Chart toggle, kept
   on a separate class so the two mechanisms never fight over #map).
   Scoped to PORTRAIT because ≤1024px landscape is mobile.js's one-view mode
   (see below), which this must not overlap. */
@media (max-width: 1024px) and (orientation: portrait) {
    #map-row.pfd-swap > #map { display: none; }
    /* The card inherits the map's slot in the #chart-wrap column (the row is
       display:contents here, so the card is effectively a direct child):
       between 769 and 1024px that is the desktop split, flex:2 over the
       chart's flex:3 with the same 80px floor as #map in base.css. */
    #map-row.pfd-swap > #pfd-card { flex: 2; min-height: 80px; min-width: 0; }
}
@media (max-width: 768px) and (orientation: portrait) {
    /* Phone portrait is the split screen (base.css: map flex:2, chart
       flex:3): the swapped-in PFD takes the MAP's share — the same flex:2,
       or toggling the PFD would resize the whole split. The fit-scaled
       canvas actually renders LARGER here than the old fixed 300px card —
       the honesty concern that used to hide it on phones no longer applies,
       and the interpolation note stays in the card header. */
    #map-row.pfd-swap > #pfd-card { flex: 2; min-height: 0; }
}
@media (max-width: 1024px) and (orientation: landscape) {
    /* Mobile landscape one-view mode: mobile.js owns the viewport with its
       own Map/Chart switch, and neither its toggle nor pfd.js's swap logic
       knows the PFD belongs to the map slot here — a swapped-in PFD would be
       reachable but broken. The PFD (and its toggle, even though the button
       now overlays the map box rather than riding the playback bar) sits
       this mode out; pfd.js keeps the open state for when the orientation
       flips back. */
    #pfd-card, #pb-pfd-toggle { display: none !important; }
}
@media (max-width: 768px) {
    #playback-bar { padding: 2px 4px 4px; gap: var(--space-1); }
    #pb-time { min-width: 58px; font-size: 10px; }
}
@media (max-width: 768px) and (orientation: portrait) {
    .fv-card { padding: var(--space-2); }
    .fv-val { font-size: 14px; }
    .fv-chip { padding: 6px 12px; font-size: 13px; }
    #chart-tabs { padding: 2px 4px; }
    .chart-tab { padding: 6px 10px; font-size: 11px; }
    /* Proper touch targets for the two overlay buttons (~32px, the
       .fv-chip/.chart-tab precedent). The chart's mobile layout keeps its
       top-right free (margin.t:36, no legend, no modebar). */
    #pb-pfd-toggle { padding: 7px 12px; font-size: 12px; }
    #chart-home-btn { top: 6px; right: 8px; padding: 5px 12px; font-size: 16px; }
}
@media (max-width: 1024px) and (orientation: landscape) {
    #chart-tabs { padding: 2px 4px; }
    .chart-tab { padding: 3px 8px; font-size: 11px; }
    /* Landscape Chart view: the home button is the only zoom reset here too. */
    #chart-home-btn { top: 6px; right: 8px; padding: 4px 10px; font-size: 14px; }
    /* base.css gives map/chart height:100%; with the tab row in the column
       that clips the chart bottom — let flex distribute instead. #gallery
       shares the chart slot (chart.js swaps them), so it sizes the same. */
    #map, #chart, #gallery { height: auto; flex: 1; min-height: 0; }
}

/* ── Flight Phases tree (phase_tree.js) ──
   One row per phase segment (chronological, repeats kept); expandable
   children are the maneuvers assigned to the phase (majority overlap).
   APPROACH rows carry the airport/runway/GA badges + severity colors of the
   /approaches table (approaches.css is NOT loaded here — copies are scoped
   to the card). Ground rows (.pt-ground) are de-emphasized but clickable. */
#phases-note {
    font-size: 9px; color: #99a; font-style: italic;
    cursor: help; margin: 2px 0 6px;
}
.pt-row {
    display: flex; align-items: flex-start; gap: 6px;
    width: 100%; padding: 4px; margin: 0;
    border: none; border-radius: var(--radius-md);
    background: transparent; text-align: left; cursor: pointer;
}
.pt-row:hover { background: #f4f7ff; }
.pt-row.pt-selected { background: #e7eefb; }
.pt-row.pt-ground .pt-label { color: #99a; font-weight: 400; }
.pt-caret, .pt-caret-spacer {
    flex: none; width: 12px; font-size: 10px; color: #889;
    text-align: center; margin-top: 1px;
}
.pt-caret:hover { color: var(--color-accent); }
.pt-swatch {
    flex: none; width: 8px; height: 8px; border-radius: 2px; margin-top: 4px;
}
.pt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pt-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pt-label { font-size: 12px; font-weight: 600; color: #223; }
.pt-dur {
    margin-left: auto; font-size: 10px; color: #889;
    font-variant-numeric: tabular-nums;
}
.pt-row .fv-dot { flex: none; margin-top: 6px; }
.fv-dot-green { background: var(--color-severity-green); }

/* Child maneuvers under an expanded phase */
.pt-children { margin-left: 18px; }
.pt-child {
    display: flex; align-items: flex-start; gap: 8px;
    width: 100%; padding: 3px 4px; margin: 0;
    border: none; border-radius: var(--radius-md);
    background: transparent; text-align: left; cursor: pointer;
}
.pt-child:hover { background: #f4f7ff; }
.pt-child.pt-selected { background: #e7eefb; }
.pt-child .fv-dot { flex: none; margin-top: 6px; }
.mv-icon {
    flex: none; width: 20px; height: 20px; line-height: 20px;
    border-radius: 50%; background: #fff; border: 1px solid #cfd6e4;
    color: #1a4f9c; font-size: 11px; text-align: center;
}
.pt-child.pt-selected .mv-icon { border-color: var(--color-accent); }
.mv-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mv-top { display: flex; align-items: baseline; gap: 6px; }
.mv-label {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: 12px; font-weight: 600; color: #223;
}
.mv-dur { font-size: 10px; color: #889; font-variant-numeric: tabular-nums; }
.mv-metrics { font-size: 9px; color: #889; margin-top: 1px; }

/* Tolerances card under the selected maneuver */
.mv-card {
    margin: 2px 0 6px 28px; padding: 6px 8px;
    background: #fff; border: 1px solid #dde3ee; border-radius: var(--radius-md);
}
.mv-tol {
    display: grid; grid-template-columns: 1fr auto auto; gap: 6px;
    align-items: baseline; padding: 2px 0;
}
.mv-tol-lbl { font-size: 10px; color: #778; }
.mv-tol-val { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: #223; }
.mv-tol-val.mv-green { color: var(--color-severity-green); }
.mv-tol-val.mv-amber { color: var(--color-severity-amber); }
.mv-tol-val.mv-red { color: var(--color-severity-red); }
.mv-tol-lim { font-size: 9px; color: #99a; }

/* Approach badges + gate-metric severity colors on APPROACH rows */
.ap-metrics { font-size: 9px; color: #889; margin-top: 2px; }
#phases-panel .chip {
    display: inline-block; padding: 1px 8px; border-radius: 10px;
    background: #e7eefb; color: #1a4f9c; font-weight: 600; font-size: 11px;
}
#phases-panel .chip-unk { background: #ececec; color: #999; }
#phases-panel .rwy-badge {
    display: inline-block; min-width: 26px; text-align: center;
    padding: 1px 6px; border-radius: var(--radius-md);
    background: #223; color: #fff; font-weight: 700; font-size: 10px;
    letter-spacing: 0.4px;
}
#phases-panel .ga-badge {
    display: inline-block; padding: 1px 6px; border-radius: 9px;
    background: var(--color-severity-amber); color: #fff;
    font-size: 9px; font-weight: 700; letter-spacing: 0.4px;
}
#phases-panel .sev-amber { color: var(--color-severity-amber); font-weight: 700; }
#phases-panel .sev-red { color: var(--color-severity-red); font-weight: 700; }

/* ── Weather card (P10) ── */
.wx-metar {
    display: block; margin: 2px 0 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px; color: #667; word-break: break-word;
}