/* ApexLab V125 phone presentation.
   Everything outside the media conditions remains the locked V122 desktop. */
.mobile-workspace-navigation { display:none; }

@media (max-width:767px), (max-width:932px) and (max-height:500px) and (orientation:landscape) {
    :root {
        --mobile-safe-top: env(safe-area-inset-top, 0px);
        --mobile-safe-right: env(safe-area-inset-right, 0px);
        --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
        --mobile-safe-left: env(safe-area-inset-left, 0px);
        --mobile-control: 44px;
    }

    html { scroll-padding-top:calc(var(--mobile-safe-top) + 76px); }
    body { min-height:100vh; min-height:100svh; overflow-wrap:anywhere; }
    #appWrapper {
        min-height:100vh;
        min-height:100svh;
        padding-top:max(10px,var(--mobile-safe-top)) !important;
        padding-right:max(10px,var(--mobile-safe-right)) !important;
        padding-bottom:max(30px,calc(var(--mobile-safe-bottom) + 18px)) !important;
        padding-left:max(10px,var(--mobile-safe-left)) !important;
    }

    /* Native phone navigation replaces the precision horizontal tab rail. */
    .mobile-workspace-navigation {
        position:sticky;
        z-index:72;
        top:max(6px,var(--mobile-safe-top));
        display:grid;
        grid-template-columns:minmax(0,.72fr) minmax(155px,1.28fr);
        gap:10px;
        align-items:center;
        margin:0 0 12px;
        padding:8px 9px;
        border:1px solid var(--border-strong);
        border-radius:13px;
        background:color-mix(in srgb,var(--surface) 94%,transparent);
        box-shadow:0 12px 32px rgba(0,0,0,.3);
        backdrop-filter:blur(14px);
        -webkit-backdrop-filter:blur(14px);
    }
    .mobile-workspace-navigation span { min-width:0; }
    .mobile-workspace-navigation small,
    .mobile-workspace-navigation strong { display:block; }
    .mobile-workspace-navigation small { color:var(--muted); font-size:.68rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
    .mobile-workspace-navigation strong { color:var(--text); font-size:.88rem; }
    .mobile-workspace-navigation select { min-width:0; min-height:48px; padding:8px 34px 8px 11px; font-size:1rem !important; font-weight:750; }
    .tab-rail { display:none !important; }

    /* Compact, touch-first header without changing the desktop DOM. */
    .app-header { display:grid; grid-template-columns:1fr; gap:12px; padding:12px; }
    .brand-lockup { min-width:0; }
    .brand-subtitle { overflow-wrap:normal; }
    .header-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:9px; width:100%; }
    .header-field,
    .header-field.engine-field { min-width:0; width:auto; flex:none; }
    .header-field.engine-field,
    .header-field:has(#driverProfile),
    #nextSessionPlanIndicator { grid-column:1 / -1; }
    .header-field.appearance-field { min-width:0; width:auto; }
    .header-actions .master-setup-button { width:100%; min-width:0; }
    .field-kicker { min-height:18px; }

    /* Touch targets and iOS focus-zoom protection. */
    button,
    select,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    textarea,
    [role="button"] { min-height:var(--mobile-control); }
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    select,
    textarea { font-size:16px !important; }
    input[type="checkbox"], input[type="radio"] { width:22px; height:22px; min-width:22px; accent-color:var(--accent); }
    input[type="range"] { min-height:44px; touch-action:pan-x; }
    .icon-button,
    .history-edit-close,
    .quick-guide-viewer-close,
    .feedback-reminder-close,
    .map-close-button { width:44px; min-width:44px; height:44px; min-height:44px; }
    .quick-guide-link { min-height:44px; }

    /* First-screen density and safe wrapping. */
    .station-card { margin-bottom:12px !important; padding:13px !important; }
    .station-card > .flex:first-child { margin-bottom:12px !important; }
    .station-card > .flex:first-child > .flex {
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px !important;
    }
    .station-card > .flex:first-child > .flex > * { width:100%; min-width:0; margin:0 !important; }
    .station-card > .grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; }
    .station-card > .grid > div { grid-column:auto !important; min-width:0; }
    .station-card > .grid > div:first-child { grid-column:1 / -1 !important; }
    .station-card label { font-size:.75rem !important; line-height:1.25; }
    #weatherConditionBox { height:44px !important; }
    #weatherStatus { height:auto !important; min-height:18px; text-align:left !important; }
    .section-title { line-height:1.15; }

    .session-context-header { align-items:stretch; flex-direction:column; gap:10px; margin-bottom:12px; padding:12px 13px; }
    .session-context-copy,
    .session-context-copy > * { min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
    .session-context-actions { align-items:stretch; width:100%; }
    .session-context-actions button { width:100%; }
    .tab-pane,
    .card,
    .summary-card,
    .setup-section { min-width:0; }
    .tab-pane > :first-child { margin-top:0; }

    /* Dense information remains complete and touch-scrollable. */
    .overflow-x-auto,
    .compare-table-wrap,
    .manual-table-wrap,
    .tyre-reading-table,
    .next-session-plan-table-wrap,
    .history-laps {
        max-width:100%;
        overflow-x:auto;
        overscroll-behavior-inline:contain;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:thin;
    }
    .overflow-x-auto:focus-visible,
    .compare-table-wrap:focus-visible,
    .manual-table-wrap:focus-visible,
    .tyre-reading-table:focus-visible { outline:3px solid rgba(84,166,255,.34); outline-offset:2px; }
    .summary-table th,
    .summary-table td { padding:.62rem .55rem; }
    .history-row-actions { gap:7px; }
    .history-row-actions button { min-height:44px; padding:7px 10px; }

    /* Telemetry and maps receive the useful area, not repeated framing. */
    #csvDropzone { padding:16px 12px !important; overflow-wrap:anywhere; }
    #csvDropzone > .flex { align-items:stretch; flex-direction:column; }
    #csvDropzone button { width:100%; min-height:48px; }
    #telemetryImportStatus,
    #telemetryImportSummary { max-width:100%; overflow-wrap:anywhere; }
    .telemetry-trace-heading,
    .telemetry-delta-heading,
    .track-studio-heading { align-items:stretch; }
    .telemetry-trace-heading > *,
    .telemetry-delta-heading > *,
    .track-studio-heading > * { min-width:0; }
    .telemetry-chart-shell { height:clamp(280px,42svh,460px); }
    .telemetry-delta-chart-shell { height:clamp(240px,34svh,380px); }
    #telemetryGraphCanvas,
    #telemetryDeltaCanvas,
    .comparison-workspace canvas { touch-action:none; }
    .lap-control-strip { min-height:48px; padding:7px; scroll-padding-inline:7px; }
    .lap-control-strip label { min-height:38px; padding:6px 8px; }
    .gps-map-panel { min-height:clamp(420px,58svh,620px); }
    .map-control-grid > label,
    .map-control-grid > button { min-width:0; }
    .map-inspector { max-height:42%; overflow:auto; overscroll-behavior:contain; }
    /* role=button's global 44px minimum previously stretched the 32px pin.
       Keep the touch target square and the visible dot independently centred.
       MapLibre retains sole control of the outer marker's positioning transform. */
    .telemetry-map-marker[role="button"] { width:44px; height:44px; min-width:44px; min-height:44px; max-width:44px; max-height:44px; padding:0; box-sizing:border-box; aspect-ratio:1; }
    .telemetry-map-marker[role="button"]::before { inset:auto; left:50%; top:50%; width:16px; height:16px; box-sizing:border-box; transform:translate(-50%,-50%); }

    /* Analysis focus mode stays usable in portrait and short landscape. */
    body.analysis-workspace-active #appWrapper {
        padding-top:max(6px,var(--mobile-safe-top)) !important;
        padding-right:max(6px,var(--mobile-safe-right)) !important;
        padding-bottom:max(6px,var(--mobile-safe-bottom)) !important;
        padding-left:max(6px,var(--mobile-safe-left)) !important;
    }
    body.analysis-workspace-active .app-header { display:none; }
    body.analysis-workspace-active .mobile-workspace-navigation { margin-bottom:6px; }
    .analysis-toolbar { gap:7px; padding:7px; }
    .analysis-toolbar button,
    .analysis-toolbar select,
    .analysis-focus button { min-height:44px; }
    .analysis-workspace .analysis-grid { height:max(470px,calc(100svh - 150px)); min-height:0; }
    .analysis-workspace .analysis-pane { min-height:0; }
    .analysis-workspace .analysis-pane-body { overscroll-behavior:contain; }
    .analysis-settings-menu { max-width:calc(100vw - 24px); max-height:min(70svh,520px); overflow:auto; }

    /* Cross-profile controls and charts keep driver/lap ownership legible. */
    .comparison-workspace select,
    .comparison-workspace button,
    .overlay-workspace select,
    .overlay-workspace button { min-height:44px; }
    .comparison-workspace canvas { height:clamp(250px,38svh,390px); }
    .compare-participant,
    #comparisonResults > section,
    .overlay-workspace { padding:12px; }
    .overlay-lap-list label { min-height:44px; padding:7px 4px; }

    /* Every fixed overlay fits the visible phone viewport and respects notches. */
    #profileModal,
    #compareModal,
    #masterSetupModal,
    #profileImportModal,
    #historyEditModal,
    #historySummaryModal,
    #historyReferenceModal,
    #newSessionModal,
    #nextSessionPlanModal,
    #feedbackReminderModal,
    .quick-guide-viewer {
        align-items:stretch !important;
        padding-top:max(8px,var(--mobile-safe-top)) !important;
        padding-right:max(8px,var(--mobile-safe-right)) !important;
        padding-bottom:max(8px,var(--mobile-safe-bottom)) !important;
        padding-left:max(8px,var(--mobile-safe-left)) !important;
        overflow:hidden;
    }
    #profileModal > div,
    #compareModal > div,
    #masterSetupModal > div,
    .profile-import-panel,
    .history-edit-panel,
    .history-summary-panel,
    .history-reference-dialog,
    .new-session-panel,
    .next-session-plan-panel,
    .feedback-reminder-panel,
    .quick-guide-viewer-panel {
        width:100% !important;
        max-width:none !important;
        max-height:calc(100dvh - max(16px,var(--mobile-safe-top)) - max(16px,var(--mobile-safe-bottom))) !important;
        margin:auto;
        overflow:auto;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }
    .history-edit-actions,
    .next-session-plan-edit-actions,
    .feedback-reminder-actions { position:sticky; z-index:2; bottom:0; padding-bottom:max(8px,var(--mobile-safe-bottom)); background:var(--surface); }
    .history-edit-actions button,
    .next-session-plan-edit-actions button,
    .feedback-reminder-actions button { min-height:48px; }
    body:has(#profileModal:not(.hidden)),
    body:has(#compareModal:not(.hidden)),
    body:has(#masterSetupModal:not(.hidden)),
    body:has(#profileImportModal:not(.hidden)),
    body:has(#historyEditModal:not(.hidden)),
    body:has(#historySummaryModal:not(.hidden)),
    body:has(#historyReferenceModal:not(.hidden)),
    body:has(#newSessionModal:not(.hidden)),
    body:has(#nextSessionPlanModal:not(.hidden)),
    body:has(#feedbackReminderModal:not(.hidden)),
    body:has(#quickGuideViewer:not(.hidden)),
    body:has(.tip-infographic-dialog[open]) { overflow:hidden; }
    .session-save-notice { bottom:max(10px,var(--mobile-safe-bottom)); }
    .tip-infographic-dialog { max-width:100vw; max-height:100dvh; }
    .tip-infographic-dialog[open] { padding-bottom:var(--mobile-safe-bottom); }
}

@media (max-width:430px) {
    .mobile-workspace-navigation { grid-template-columns:1fr; gap:6px; }
    .mobile-workspace-navigation span { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
    .mobile-workspace-navigation small { font-size:.64rem; }
    .header-actions { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    .station-card > .flex:first-child > .flex { grid-template-columns:1fr 1fr; }
    .post-session-review-context,
    .post-tyre-meta,
    .tyre-status-grid,
    .summary-header-grid,
    .summary-metric-grid { grid-template-columns:1fr; }
    .post-session-temperature-grid > div { grid-template-columns:34px repeat(3,minmax(62px,1fr)); overflow-x:auto; }
    .quick-guide-card { border-radius:12px; }
}

@media (max-width:932px) and (max-height:500px) and (orientation:landscape) {
    #appWrapper { padding-top:max(6px,var(--mobile-safe-top)) !important; }
    .app-header { grid-template-columns:auto minmax(0,1fr); align-items:start; }
    .brand-subtitle { display:none; }
    .header-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .header-field.engine-field,
    #nextSessionPlanIndicator { grid-column:auto; }
    .header-field:has(#driverProfile),
    .header-actions .master-setup-button { grid-column:span 2; }
    .profile-control,
    #driverProfile { min-width:0; }
    .station-card > .flex:first-child { flex-direction:row !important; }
    .station-card > .flex:first-child > .flex { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .mobile-workspace-navigation { grid-template-columns:minmax(150px,.5fr) minmax(220px,1fr); }
    .telemetry-chart-shell { height:max(250px,calc(100svh - 120px)); }
    .telemetry-delta-chart-shell { height:max(220px,calc(100svh - 150px)); }
    .gps-map-panel { min-height:max(300px,calc(100svh - 86px)); }
    .analysis-workspace .analysis-grid { height:max(320px,calc(100svh - 88px)); }
    .quick-guide-viewer-panel { min-height:0; }
}

@media (hover:none) and (pointer:coarse) {
    button:hover,
    .star-options label:hover,
    .group:hover { transform:none !important; }
    [title] { -webkit-tap-highlight-color:rgba(84,166,255,.18); }
}

/* Expanded inspection only: one toolbar, a bounded control drawer, and the
   remaining dynamic viewport for the map. Regular desktop/tablet is unchanged. */
@media (max-width:767px), (max-width:1024px) and (max-height:500px) and (orientation:landscape) {
    .gps-map-card.is-expanded {
        --mobile-safe-top:env(safe-area-inset-top,0px);
        --mobile-safe-right:env(safe-area-inset-right,0px);
        --mobile-safe-bottom:env(safe-area-inset-bottom,0px);
        --mobile-safe-left:env(safe-area-inset-left,0px);
        position:fixed; inset:0; width:100%; max-width:100%; height:100vh; height:100dvh; max-height:none; min-height:0;
        display:flex; flex-direction:column; box-sizing:border-box;
        padding:var(--mobile-safe-top) 0 var(--mobile-safe-bottom); margin:0; border:0; border-radius:0 !important;
    }
    .gps-map-card.is-expanded { transform:none; }
    /* .card > * gives heading and map body equal stacking contexts. The later
       map body otherwise covers the heading's opened fixed control drawer. */
    .gps-map-card.is-expanded .track-studio-heading { z-index:20; flex:0 0 auto; flex-direction:row; align-items:center; gap:6px; min-width:0; min-height:44px; margin:0; padding:0 max(48px,calc(var(--mobile-safe-right) + 44px)) 0 max(6px,var(--mobile-safe-left)); }
    .gps-map-card.is-expanded .track-studio-heading > div { flex:1; min-width:0; overflow:hidden; }
    .gps-map-card.is-expanded #trackStudioTitle { margin:0; font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .gps-map-card.is-expanded #expandedMapSessionIdentity { max-width:100%; font-size:.62rem; }
    .gps-map-card.is-expanded .gps-quality-badge { display:none; }
    .gps-map-card.is-expanded .map-close-button { z-index:21; top:var(--mobile-safe-top); right:max(0px,var(--mobile-safe-right)); width:44px; height:44px; min-height:44px; border-radius:0; box-shadow:none; }
    .gps-map-card.is-expanded .expanded-map-body { display:flex; flex-direction:column; flex:1 1 0; min-width:0; min-height:0; overflow:hidden; }
    .gps-map-card.is-expanded .map-control-grid { display:none; }
    .gps-map-card.is-expanded .gps-map-panel { flex:1 1 0; min-width:0; min-height:0; border:0; border-radius:0; }
    .gps-map-card.is-expanded .expanded-map-body > .lap-control-strip { flex:0 0 auto; min-height:0; max-width:100%; margin:0; padding:0 max(6px,var(--mobile-safe-right)) 0 max(6px,var(--mobile-safe-left)); border:0; border-radius:0; gap:4px; }
    .gps-map-card.is-expanded .lap-control-strip label { min-height:44px; padding:3px 6px; }
    .gps-map-card.is-expanded .expanded-map-tools { flex:0 0 auto; min-width:0; }
    .gps-map-card.is-expanded .expanded-map-tools > summary { display:flex; align-items:center; justify-content:center; min-height:44px; padding:0 8px; font-size:.75rem; font-weight:750; cursor:pointer; border:1px solid var(--border-strong); border-radius:6px; }
    .gps-map-card.is-expanded .expanded-map-tools > summary:focus-visible { outline:2px solid var(--focus-ring); outline-offset:-2px; }
    .gps-map-card.is-expanded .expanded-map-tools-content { position:fixed; z-index:22; top:calc(var(--mobile-safe-top) + 52px); left:max(6px,var(--mobile-safe-left)); right:max(6px,var(--mobile-safe-right)); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; box-sizing:border-box; min-width:0; max-height:calc(100vh - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 64px); max-height:calc(100dvh - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 64px); overflow-y:auto; overscroll-behavior:contain; padding:10px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface); box-shadow:var(--shadow); }
    .gps-map-card.is-expanded .expanded-map-tools:not([open]) > .expanded-map-tools-content { display:none; }
    .gps-map-card.is-expanded .expanded-map-tools-content > label { display:grid; gap:4px; min-width:0; margin:0; }
    .gps-map-card.is-expanded .expanded-map-tools-content > label:has(#mapTypeSelect),
    .gps-map-card.is-expanded .expanded-map-tools-content > label:has(#mapChannelSelect),
    .gps-map-card.is-expanded .expanded-map-tools-content > #mapAlignmentInline,
    .gps-map-card.is-expanded .expanded-map-tools-content > .expanded-map-context,
    .gps-map-card.is-expanded .expanded-map-tools-content > #mapLapControls { grid-column:1 / -1; min-width:0; max-width:100%; }
    .gps-map-card.is-expanded .expanded-map-tools-content > #expandedMapSessionIdentity { grid-column:1 / -1; min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; font-size:.75rem; }
    .gps-map-card.is-expanded .expanded-map-tools-content label > span { font-size:.72rem; }
    .gps-map-card.is-expanded .expanded-map-tools-content .trace-thickness-control > span { flex-wrap:wrap; gap:2px 6px; }
    .gps-map-card.is-expanded .expanded-map-tools-content select { width:100%; min-width:0; max-width:100%; min-height:44px; box-sizing:border-box; font-size:16px !important; padding:4px 24px 4px 6px; }
    .gps-map-card.is-expanded .expanded-map-tools-content input[type="range"] { width:100%; min-width:0; max-width:100%; min-height:44px; box-sizing:border-box; }
    .gps-map-card.is-expanded .expanded-map-tools-content .lap-control-strip { flex-wrap:wrap; overflow:visible; margin:0; padding:0; border:0; }
    .gps-map-card.is-expanded .expanded-map-tools-content .circuit-jump-bar { display:grid; grid-template-columns:minmax(0,1fr); min-width:0; }
    .gps-map-card.is-expanded .expanded-map-tools-content .circuit-jump-bar label { min-width:0; }
    .gps-map-card.is-expanded .expanded-map-context { margin:0; }
    .gps-map-card.is-expanded .expanded-map-context > summary { min-height:44px; }
    .gps-map-card.is-expanded .expanded-map-tools-content .expanded-map-context-content { position:static; width:100%; max-width:100%; max-height:none; min-width:0; padding:8px 0; border:0; box-shadow:none; box-sizing:border-box; overflow:visible; }
    .gps-map-card.is-expanded .expanded-map-context:not([open]) > .expanded-map-context-content { display:none; }
    .gps-map-card.is-expanded .gps-map-panel > #btnFitGps { position:absolute; z-index:8; top:6px; left:max(6px,var(--mobile-safe-left)); min-height:44px; padding:0 10px; box-shadow:var(--shadow); }
    .gps-map-card.is-expanded #mapInspector.map-inspector { width:248px; max-width:calc(100% - 12px); max-height:45%; left:max(6px,var(--mobile-safe-left)); bottom:32px; margin:0; padding:7px 9px 3px; border-radius:9px; }
    .gps-map-card.is-expanded .maplibregl-ctrl-group button { width:44px; height:44px; min-width:44px; min-height:44px; }
    .gps-map-card.is-expanded .maplibregl-ctrl-top-right .maplibregl-ctrl { margin:6px max(6px,var(--mobile-safe-right)) 0 0; }
    .gps-map-card.is-expanded .telemetry-map-marker[role="button"] { width:44px; height:44px; min-width:44px; min-height:44px; max-width:44px; max-height:44px; padding:0; box-sizing:border-box; aspect-ratio:1; }
    .gps-map-card.is-expanded .telemetry-map-marker[role="button"]::before { inset:auto; left:50%; top:50%; width:16px; height:16px; box-sizing:border-box; transform:translate(-50%,-50%); }
}

/* ADA-inspired inspection: the landscape map fills the available viewport;
   the controls and the authoritative cursor readout float above it. */
@media (max-width:1024px) and (max-height:500px) and (orientation:landscape) {
    .gps-map-card.is-expanded .track-studio-heading { position:absolute; z-index:20; top:calc(var(--mobile-safe-top) + 6px); right:max(6px,var(--mobile-safe-right)); left:auto; padding:0 48px 0 6px; border-radius:8px; background:var(--surface); box-shadow:var(--shadow); }
    .gps-map-card.is-expanded .track-studio-heading > div { display:none; }
    .gps-map-card.is-expanded .map-close-button { z-index:21; top:calc(var(--mobile-safe-top) + 6px); right:max(6px,var(--mobile-safe-right)); border-radius:8px; }
    .gps-map-card.is-expanded .gps-map-panel > #btnFitGps { top:auto; bottom:32px; }
    .gps-map-card.is-expanded .maplibregl-ctrl-top-right .maplibregl-ctrl { margin-top:60px; }
    .gps-map-card.is-expanded #mapInspector.map-inspector { top:6px; bottom:auto; width:calc(100% - var(--mobile-safe-left) - var(--mobile-safe-right) - 190px); max-width:calc(100% - var(--mobile-safe-left) - var(--mobile-safe-right) - 190px); max-height:50%; flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:6px 8px; }
    .gps-map-card.is-expanded #mapInspector .map-inspector-summary { flex:1 1 200px; gap:3px 12px; }
    .gps-map-card.is-expanded #mapInspector .map-inspector-summary > span:first-child { flex-basis:auto; }
    .gps-map-card.is-expanded #mapInspector [data-map-inspector-toggle] { flex:0 0 auto; width:auto; padding:6px 2px; min-height:44px; }
    .gps-map-card.is-expanded #mapInspector .map-inspector-details { flex:1 0 100%; min-width:0; }
}

/* V171: native comparison slider retains its gesture instead of handing it to page pan. */
#overlayCursor, #comparisonDistance { touch-action:none; }

/* V171 compact mobile map HUD: near-clear backing keeps the map sharp and visible. */
@media (max-width:640px), (max-width:1024px) and (max-height:500px) and (orientation:landscape) {
    .gps-map-card.is-expanded #mapInspector.map-inspector.has-hud {
        display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:center; gap:4px 6px;
        width:min(340px,calc(100% - 12px)); max-width:calc(100% - 12px); max-height:35%;
        padding:7px 8px; box-sizing:border-box; border-radius:10px; border:1px solid #ffffff1f;
        background:rgba(10,14,20,.10); box-shadow:none;
        -webkit-backdrop-filter:none; backdrop-filter:none;
    }
    .gps-map-card.is-expanded #mapInspector.has-hud .map-inspector-summary { display:none; }
    .gps-map-card.is-expanded #mapInspector.has-hud .map-inspector-hud {
        display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px 7px; min-width:0; margin:0;
    }
    .gps-map-card.is-expanded #mapInspector .map-inspector-hud > div { min-width:0; }
    .gps-map-card.is-expanded #mapInspector .map-inspector-hud dt { margin:0; color:#fff; opacity:1; font-size:.65rem; line-height:1.2; overflow-wrap:anywhere; }
    .gps-map-card.is-expanded #mapInspector .map-inspector-hud dd { margin:2px 0 0; color:#fff; font-size:.78rem; font-weight:750; line-height:1.2; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
    .gps-map-card.is-expanded #mapInspector .map-inspector-hud,
    .gps-map-card.is-expanded #mapInspector.has-hud [data-map-inspector-toggle] { text-shadow:0 1px 2px #000,0 0 4px #000; }
    .gps-map-card.is-expanded #mapInspector .map-inspector-hud strong { color:inherit; }
    .gps-map-card.is-expanded #mapInspector.has-hud [data-map-inspector-toggle] {
        width:44px; min-width:44px; height:44px; min-height:44px; padding:0; text-align:center; font-size:0; color:#fff;
    }
    .gps-map-card.is-expanded #mapInspector.has-hud [data-map-inspector-toggle]::after { content:'⋯'; font-size:1.4rem; }
    .gps-map-card.is-expanded #mapInspector.has-hud[data-expanded="true"] [data-map-inspector-toggle]::after { content:'×'; }
    .gps-map-card.is-expanded #mapInspector.has-hud .map-inspector-details {
        grid-column:1 / -1; min-width:0; padding:8px; border:1px solid var(--border-strong); border-radius:7px;
        background:color-mix(in srgb,var(--surface) 94%,transparent);
    }
    /* More telemetry may grow only after an explicit tap. */
    .gps-map-card.is-expanded #mapInspector.has-hud[data-expanded="true"] { max-height:55%; }
    .gps-map-card.is-expanded #mapLayerLegend:not(.hidden) {
        display:grid; grid-template-columns:32px minmax(0,1fr); gap:3px 5px;
        left:112px; top:12px; max-width:calc(100% - 172px); min-width:0; box-sizing:border-box;
        padding:5px 6px; background:color-mix(in srgb,var(--surface) 76%,transparent);
        -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    }
    .gps-map-card.is-expanded #mapLayerLegend > span { grid-column:1 / -1; min-width:0; overflow-wrap:anywhere; }
    .gps-map-card.is-expanded #mapLayerLegend i { width:32px; }
    .gps-map-card.is-expanded #mapLayerLegend strong { min-width:0; overflow-wrap:anywhere; }
}
@media (max-width:1024px) and (max-height:500px) and (orientation:landscape) {
    .gps-map-card.is-expanded #mapInspector.map-inspector.has-hud {
        top:auto; bottom:32px; left:max(6px,var(--mobile-safe-left));
        width:min(500px,calc(100% - 12px)); max-width:calc(100% - 12px); max-height:35%;
    }
    .gps-map-card.is-expanded #mapInspector.has-hud .map-inspector-hud { grid-template-columns:repeat(6,minmax(0,1fr)); }
    /* Fit stays clear even when the lower HUD's details are explicitly opened. */
    .gps-map-card.is-expanded .gps-map-panel > #btnFitGps { top:6px; bottom:auto; }
    .gps-map-card.is-expanded #mapLayerLegend:not(.hidden) {
        display:flex; top:60px; left:max(6px,var(--mobile-safe-left)); max-width:calc(100% - 200px);
    }
}