/* Progressive controls for the two densest mobile globe modes. */
.mobile-progressive-toggle {
    display: none;
}

@media (max-width: 900px) {
    .mobile-progressive-toggle {
        position: fixed;
        left: calc(8px + env(safe-area-inset-left, 0px));
        right: calc(8px + env(safe-area-inset-right, 0px));
        z-index: 9100;
        box-sizing: border-box;
        align-items: center;
        gap: 9px;
        width: auto;
        min-height: 44px;
        height: 44px;
        padding: 4px 8px 4px 11px;
        border: 1px solid rgba(148, 163, 184, 0.32);
        border-radius: 12px;
        color: #f8fafc;
        background: rgba(7, 10, 22, 0.94);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
        text-align: left;
        cursor: pointer;
    }

    body.mode-space #mobile-space-controls-toggle,
    body[data-pw-mode="space"] #mobile-space-controls-toggle,
    body.mode-stats #mobile-stats-controls-toggle,
    body[data-pw-mode="stats"] #mobile-stats-controls-toggle {
        display: flex;
    }

    #mobile-space-controls-toggle {
        top: calc(52px + env(safe-area-inset-top, 0px));
    }

    body.mode-space .back-to-earth-btn.visible,
    body[data-pw-mode="space"] .back-to-earth-btn.visible {
        top: calc(104px + env(safe-area-inset-top, 0px));
        box-sizing: border-box;
        min-height: 44px;
        max-width: calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.mode-space .explore-rotate-toggle,
    body[data-pw-mode="space"] .explore-rotate-toggle {
        top: calc(152px + env(safe-area-inset-top, 0px));
        box-sizing: border-box;
        min-height: 44px;
        max-width: calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #mobile-stats-controls-toggle {
        top: calc(94px + env(safe-area-inset-top, 0px));
    }

    .mobile-progressive-toggle:focus-visible {
        outline: 3px solid rgba(56, 189, 248, 0.88);
        outline-offset: 2px;
    }

    .mobile-progressive-toggle-icon {
        flex: 0 0 auto;
        font-size: 17px;
        line-height: 1;
    }

    .mobile-progressive-toggle-copy {
        display: flex;
        min-width: 0;
        flex: 1 1 auto;
        align-items: baseline;
        gap: 7px;
        overflow: hidden;
    }

    .mobile-progressive-toggle-title {
        flex: 0 0 auto;
        color: rgba(226, 232, 240, 0.66);
        font-size: 10px;
        font-weight: 750;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .mobile-progressive-toggle-summary {
        min-width: 0;
        overflow: hidden;
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-progressive-data-state {
        flex: 0 0 auto;
        max-width: 72px;
        overflow: hidden;
        padding: 3px 6px;
        border-radius: 999px;
        color: #cbd5e1;
        background: rgba(148, 163, 184, 0.16);
        font-size: 9px;
        font-weight: 800;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .mobile-progressive-data-state.status-ok {
        color: #86efac;
        background: rgba(34, 197, 94, 0.18);
    }

    .mobile-progressive-data-state.status-empty,
    .mobile-progressive-data-state.status-stale {
        color: #fde68a;
        background: rgba(234, 179, 8, 0.18);
    }

    .mobile-progressive-data-state.status-degraded {
        color: #fca5a5;
        background: rgba(239, 68, 68, 0.18);
    }

    .mobile-progressive-toggle-chevron {
        display: grid;
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        place-items: center;
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.08);
        font-size: 17px;
        transition: transform 0.18s ease;
    }

    .mobile-progressive-toggle[aria-expanded="true"] .mobile-progressive-toggle-chevron {
        transform: rotate(180deg);
    }

    body.mode-space:not(.space-mobile-controls-open) .space-submodes,
    body.mode-space:not(.space-mobile-controls-open) .space-filters,
    body.mode-space .space-provider-status,
    body[data-pw-mode="space"]:not(.space-mobile-controls-open) .space-submodes,
    body[data-pw-mode="space"]:not(.space-mobile-controls-open) .space-filters,
    body[data-pw-mode="space"] .space-provider-status {
        display: none !important;
    }

    body.mode-stats:not(.stats-mobile-controls-open) .stats-categories,
    body.mode-stats:not(.stats-mobile-controls-open) .economy-filters,
    body.mode-stats:not(.stats-mobile-controls-open) .stations-filters,
    body.mode-stats:not(.stats-mobile-controls-open) .resources-filters,
    body.mode-stats:not(.stats-mobile-controls-open) .economy-sub-filters,
    body.mode-stats:not(.stats-mobile-controls-open) .infra-filters,
    body.mode-stats:not(.stats-mobile-controls-open) .culture-filters,
    body.mode-stats:not(.stats-mobile-controls-open) .population-filters,
    body.mode-stats .stats-data-status,
    body.mode-stats .stats-mode-status-slot,
    body[data-pw-mode="stats"]:not(.stats-mobile-controls-open) .stats-categories,
    body[data-pw-mode="stats"]:not(.stats-mobile-controls-open) .economy-filters,
    body[data-pw-mode="stats"]:not(.stats-mobile-controls-open) .stations-filters,
    body[data-pw-mode="stats"]:not(.stats-mobile-controls-open) .resources-filters,
    body[data-pw-mode="stats"]:not(.stats-mobile-controls-open) .economy-sub-filters,
    body[data-pw-mode="stats"]:not(.stats-mobile-controls-open) .infra-filters,
    body[data-pw-mode="stats"]:not(.stats-mobile-controls-open) .culture-filters,
    body[data-pw-mode="stats"]:not(.stats-mobile-controls-open) .population-filters,
    body[data-pw-mode="stats"] .stats-data-status,
    body[data-pw-mode="stats"] .stats-mode-status-slot {
        display: none !important;
    }

    body.space-mobile-controls-open .space-submodes,
    body[data-pw-mode="space"].space-mobile-controls-open .space-submodes,
    body.space-mobile-controls-open .space-filters.visible,
    body[data-pw-mode="space"].space-mobile-controls-open .space-filters.visible,
    body.stats-mobile-controls-open .stats-categories,
    body[data-pw-mode="stats"].stats-mobile-controls-open .stats-categories,
    body.stats-mobile-controls-open .economy-filters.visible,
    body.stats-mobile-controls-open .stations-filters.visible,
    body.stats-mobile-controls-open .resources-filters.visible,
    body.stats-mobile-controls-open .economy-sub-filters.visible,
    body.stats-mobile-controls-open .infra-filters.visible,
    body.stats-mobile-controls-open .culture-filters.visible,
    body.stats-mobile-controls-open .population-filters.visible,
    body[data-pw-mode="stats"].stats-mobile-controls-open .economy-filters.visible,
    body[data-pw-mode="stats"].stats-mobile-controls-open .stations-filters.visible,
    body[data-pw-mode="stats"].stats-mobile-controls-open .resources-filters.visible,
    body[data-pw-mode="stats"].stats-mobile-controls-open .economy-sub-filters.visible,
    body[data-pw-mode="stats"].stats-mobile-controls-open .infra-filters.visible,
    body[data-pw-mode="stats"].stats-mobile-controls-open .culture-filters.visible,
    body[data-pw-mode="stats"].stats-mobile-controls-open .population-filters.visible {
        position: fixed !important;
        left: calc(8px + env(safe-area-inset-left, 0px)) !important;
        right: calc(8px + env(safe-area-inset-right, 0px)) !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        min-height: 52px !important;
        max-height: min(42vh, 340px);
        max-height: min(42dvh, 340px);
        box-sizing: border-box !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 4px 6px !important;
        border: 1px solid rgba(148, 163, 184, 0.22) !important;
        border-radius: 12px !important;
        background: rgba(7, 10, 22, 0.96) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42) !important;
        scrollbar-width: none;
        z-index: 9100 !important;
        pointer-events: auto !important;
    }

    /* A selected Space entity uses a z-index 10000 bottom sheet. The drawer
       lives inside the z-index 9000 header stacking context, so lift that
       context while open before raising the two control rows within it. */
    body.space-mobile-controls-open .header,
    body[data-pw-mode="space"].space-mobile-controls-open .header {
        z-index: 10020 !important;
    }

    body.space-mobile-controls-open .space-submodes,
    body[data-pw-mode="space"].space-mobile-controls-open .space-submodes,
    body.space-mobile-controls-open .space-filters.visible,
    body[data-pw-mode="space"].space-mobile-controls-open .space-filters.visible {
        z-index: 10020 !important;
    }

    /* S02 exposes catalog filters only inside the Space drawer. */
    body.mode-space:not(.space-mobile-controls-open) #catalog-control-panel,
    body[data-pw-mode="space"]:not(.space-mobile-controls-open) #catalog-control-panel {
        display: none !important;
    }

    body.space-mobile-controls-open #catalog-control-panel,
    body[data-pw-mode="space"].space-mobile-controls-open #catalog-control-panel {
        display: block !important;
    }

    body.space-mobile-controls-open.has-catalog-panel #catalog-control-panel,
    body[data-pw-mode="space"].space-mobile-controls-open.has-catalog-panel #catalog-control-panel {
        display: none !important;
    }

    body.space-mobile-controls-open .space-submodes,
    body[data-pw-mode="space"].space-mobile-controls-open .space-submodes,
    body.stats-mobile-controls-open .stats-categories,
    body[data-pw-mode="stats"].stats-mobile-controls-open .stats-categories {
        bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Keep the two-row Space/Stats drawer reachable while a background
       Radio/TV session is represented by the compact cross-mode player. */
    body.space-mobile-controls-open #tv-player.tv-player-pro.mobile-mode-compact,
    body.space-mobile-controls-open #radio-player.radio-player-pro.mobile-mode-compact,
    body.space-mobile-controls-open #tv-player.tv-player-pro.cross-mode-compact,
    body.space-mobile-controls-open #radio-player.radio-player-pro.cross-mode-compact,
    body.stats-mobile-controls-open #tv-player.tv-player-pro.mobile-mode-compact,
    body.stats-mobile-controls-open #radio-player.radio-player-pro.mobile-mode-compact,
    body.stats-mobile-controls-open #tv-player.tv-player-pro.cross-mode-compact,
    body.stats-mobile-controls-open #radio-player.radio-player-pro.cross-mode-compact {
        bottom: calc(128px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.space-mobile-controls-open .zoom-controls,
    body.stats-mobile-controls-open .zoom-controls {
        bottom: calc(200px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Spaceport/observatory details are bottom sheets up to 40dvh tall.
       Keep map controls above the sheet so investigation can continue while
       the selected entity remains open. */
    body.mode-space:has(#spaceport-info-panel.visible) .zoom-controls,
    body.mode-space:has(#observatory-info-panel.visible) .zoom-controls,
    body[data-pw-mode="space"]:has(#spaceport-info-panel.visible) .zoom-controls,
    body[data-pw-mode="space"]:has(#observatory-info-panel.visible) .zoom-controls {
        bottom: calc(40vh + 12px + env(safe-area-inset-bottom, 0px)) !important;
        bottom: calc(40dvh + 12px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.mode-space:has(#spaceport-info-panel.visible) .daynight-toggle,
    body.mode-space:has(#observatory-info-panel.visible) .daynight-toggle,
    body[data-pw-mode="space"]:has(#spaceport-info-panel.visible) .daynight-toggle,
    body[data-pw-mode="space"]:has(#observatory-info-panel.visible) .daynight-toggle {
        bottom: calc(40vh + 56px + env(safe-area-inset-bottom, 0px)) !important;
        bottom: calc(40dvh + 56px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.mode-space:has(#spaceport-info-panel.visible) .mode-data-status,
    body.mode-space:has(#observatory-info-panel.visible) .mode-data-status,
    body[data-pw-mode="space"]:has(#spaceport-info-panel.visible) .mode-data-status,
    body[data-pw-mode="space"]:has(#observatory-info-panel.visible) .mode-data-status {
        display: none !important;
        pointer-events: none !important;
    }

    body.space-mobile-controls-open .mode-data-status:not(.mode-data-status--media-panel),
    body.stats-mobile-controls-open .mode-data-status:not(.mode-data-status--media-panel) {
        top: auto !important;
        bottom: calc(128px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.space-mobile-controls-open.has-catalog-legend:not(.has-catalog-panel)
    .mode-data-status:not(.mode-data-status--media-panel) {
        bottom: calc(min(42dvh, 310px) + 136px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.space-mobile-controls-open .space-filters.visible,
    body[data-pw-mode="space"].space-mobile-controls-open .space-filters.visible,
    body.stats-mobile-controls-open .economy-filters.visible,
    body.stats-mobile-controls-open .stations-filters.visible,
    body.stats-mobile-controls-open .resources-filters.visible,
    body.stats-mobile-controls-open .economy-sub-filters.visible,
    body.stats-mobile-controls-open .infra-filters.visible,
    body.stats-mobile-controls-open .culture-filters.visible,
    body.stats-mobile-controls-open .population-filters.visible,
    body[data-pw-mode="stats"].stats-mobile-controls-open .economy-filters.visible,
    body[data-pw-mode="stats"].stats-mobile-controls-open .stations-filters.visible,
    body[data-pw-mode="stats"].stats-mobile-controls-open .resources-filters.visible,
    body[data-pw-mode="stats"].stats-mobile-controls-open .economy-sub-filters.visible,
    body[data-pw-mode="stats"].stats-mobile-controls-open .infra-filters.visible,
    body[data-pw-mode="stats"].stats-mobile-controls-open .culture-filters.visible,
    body[data-pw-mode="stats"].stats-mobile-controls-open .population-filters.visible {
        bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.space-mobile-controls-open .space-submode,
    body.space-mobile-controls-open .space-filter,
    body.stats-mobile-controls-open .stats-category,
    body.stats-mobile-controls-open .economy-filter,
    body.stats-mobile-controls-open .station-filter,
    body.stats-mobile-controls-open .resource-filter,
    body.stats-mobile-controls-open .economy-sub-filter,
    body.stats-mobile-controls-open .infra-filter,
    body.stats-mobile-controls-open .culture-filter,
    body.stats-mobile-controls-open .population-filter {
        min-height: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    body.mode-stats .index-info-panel.visible,
    body[data-pw-mode="stats"] .index-info-panel.visible {
        top: auto !important;
        bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
        max-height: min(34vh, 240px) !important;
        overflow-y: auto !important;
    }

    body.mode-stats:has(#index-info-panel.visible) .zoom-controls,
    body[data-pw-mode="stats"]:has(#index-info-panel.visible) .zoom-controls {
        display: none !important;
    }
}

@media (max-width: 420px) {
    .mobile-progressive-toggle-title {
        display: none;
    }
}