/* ============================================================
   SIM-UI — shared responsive cockpit for the corner-panel sims
   (dyson_swarm, solar_system, earth_orbits)

   Loaded AFTER each sim's inline <style>, so equal-specificity
   rules here win. Three regimes:

     L  (desktop)  ≥1100px wide and >820px tall — inline styles rule
     M  (laptop)   769–1099px wide, OR any width but ≤820px tall
     S  (phone)    ≤768px wide — full cockpit reflow

   Selectors target the shared template classes. Per-sim classes
   (.object-browser, .cutaway-panel, .camera-presets) are inert
   in sims that don't have them.

   cosmological_horizons_sim.html does NOT load this file — its
   bespoke stacked mobile layout stays authoritative.
   ============================================================ */

/* ---------- base · all sizes ---------- */
/* collapse parity: dyson/solar declare this inline, earth doesn't */
.tab-container.collapsed .tab-content { display: none !important; }

/* ---------- M · laptop band: tighten, clamp, declutter ---------- */
@media (min-width: 769px) and (max-width: 1099px),
       (min-width: 769px) and (max-height: 820px) {

    .hud-top-left { top: 20px; left: 20px; }
    .hud-subtitle, .hud-disclaimer { max-width: 230px; }
    .fidelity-advisory { max-width: 250px; }
    .legend { margin-top: 16px; }

    .tab-container { top: 20px; right: 20px; width: 250px; }
    .tab-content {
        max-height: calc(100vh - 350px);
        max-height: calc(100dvh - 350px);
    }

    .controls { padding: 10px 16px 12px; gap: 8px; }
    .param-slider { width: 130px; }
    .slider-stack { width: 150px; }
    .slider-group { min-width: 0; gap: 18px; }
    .ctrl-btn { width: 36px; height: 36px; }
    .back-btn { bottom: 20px; left: 20px; padding: 8px 12px; }

    /* solar: object browser slims to match */
    .object-browser {
        top: 20px; left: 20px; width: 250px;
        max-height: calc(100vh - 160px);
        max-height: calc(100dvh - 160px);
    }

    /* earth: lift cutaway clear of the transport pill; presets become a
       horizontal row above it; guide panel clamps above both */
    .cutaway-panel { right: 16px; bottom: 108px; }
    .camera-presets {
        right: 16px; bottom: 336px;
        width: 340px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 5px;
    }
    .preset-btn { padding: 6px 10px; font-size: 10px; }
    body.sim-earth .tab-content {
        max-height: calc(100vh - 470px);
        max-height: calc(100dvh - 470px);
    }
}

/* ---------- S · phone band: cockpit reflow ---------- */
@media (max-width: 768px) {

    .corner-decorations { display: none; }

    /* Row 0: title strip (back button lives top-right) */
    .hud-top-left { top: 12px; left: 12px; right: 52px; }
    .hud-title {
        font-size: 0.95rem;
        letter-spacing: 2px;
        margin-bottom: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .hud-subtitle, .hud-disclaimer, .fidelity-advisory, .hud .legend {
        display: none !important;
    }

    .back-btn {
        top: 6px; right: 8px;
        bottom: auto; left: auto;
        padding: 9px;
        border-radius: 50%;
        font-size: 0;
        gap: 0;
        z-index: 400;
    }
    .back-btn svg { width: 15px; height: 15px; }

    /* Row 1: tab strip, full width (panel headers don't fit the cockpit) */
    .tab-container {
        top: 44px; left: 8px; right: 8px;
        bottom: auto;
        width: auto;
        z-index: 320;
    }
    .tab-container .browser-header { display: none; }
    .tab-btn { padding: 7px 6px; font-size: 0.6rem; letter-spacing: 0.5px; }
    .tab-content {
        max-height: calc(100vh - 250px);
        max-height: calc(100dvh - 250px);
    }
    /* Bottom: controls deck, full width, above the home indicator */
    .controls-container {
        left: 8px; right: 8px;
        bottom: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        transform: none;
        z-index: 340;
    }
    .controls {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        padding: 10px 12px;
        gap: 8px;
        border-radius: 14px;
        max-height: calc(100vh - 130px);
        max-height: calc(100dvh - 130px);
        overflow-y: auto;
    }
    .controls-transport { flex-wrap: wrap; gap: 8px; }
    .theater-toggle { font-size: 0.55rem; padding: 6px 8px; }
    .slider-group { min-width: 130px; flex: 1 1 40%; }
    .param-slider { width: 100%; min-width: 90px; }
    .ctrl-btn { width: 34px; height: 34px; }
    .divider { display: none; }

    /* stats readout shrinks; hides entirely while a panel is open */
    .stats-main { font-size: 1.2rem; }
    .stats-label { font-size: 0.55rem; letter-spacing: 2px; }
    body.simui-panel-open .stats-display { display: none; }

    /* solar: object browser becomes a slim bar under the tab strip */
    .object-browser {
        top: 84px; left: 8px; right: 8px;
        width: auto;
        max-height: calc(100vh - 250px);
        max-height: calc(100dvh - 250px);
        z-index: 310;
    }
    .object-browser.collapsed { width: auto; }
    .browser-content {
        max-height: calc(100vh - 330px);
        max-height: calc(100dvh - 330px);
    }

    /* earth: cutaway + presets don't fit a phone — v1 hides them */
    .cutaway-panel, .camera-presets { display: none; }
}

/* ---------- XS · very small phones ---------- */
@media (max-width: 400px) {
    .hud-title { font-size: 0.8rem; }
    .tab-btn { padding: 6px 4px; font-size: 0.55rem; letter-spacing: 0; }
    .tab-btn::after { display: none; }
    .ctrl-btn { width: 30px; height: 30px; }
}