/* Part of the mobile_premium cascade — see mobile_premium__focus-dive.css for the cascade header. */

/* ─── IDLE STATE ───────────────────────────────────── */

@media (max-width: 768px) {
    /* ----------------------------------------------------------------
       Idle overview: hide non-essential panel children that contribute
       to the chopped/truncated appearance on ~390x844 viewport.
       The collapsed idle sheet should show only:
       - info-header (tappable strip)
       - search-container (input)
       All other children are hidden to avoid stale content visible
       through the scroll mask.
       ---------------------------------------------------------------- */

    body.is-active[data-panel-surface='idle'] #mode-grid,
    body.is-active[data-panel-surface='idle'] #selected-card,
    body.is-active[data-panel-surface='idle'] #cluster-section,
    body.is-active[data-panel-surface='idle'] #filters-section:not([open]) {
        display: none;
    }

    /* Idle composition budget: the overview sheet and compact compass own
       mobile idle chrome; the desktop zoom/reset rail is redundant here. */
    body.is-active[data-panel-surface='idle'] .controls {
        display: none;
        visibility: hidden;
        pointer-events: none;
    }

    @media (max-width: 900px) and (max-height: 430px) and (orientation: landscape) {
        body.is-active[data-panel-surface='idle'] :is(.controls.controls-rail, .controls.controls-info) {
            display: contents;
            visibility: visible;
            pointer-events: auto;
        }

        body.is-active[data-panel-surface='idle'] :is(.controls.controls-view, .controls-divider) {
            display: none;
            visibility: hidden;
            pointer-events: none;
        }
    }

    body.is-active[data-panel-surface='idle'] .share-toggle {
        display: none;
        visibility: hidden;
        pointer-events: none;
    }

    body.is-active[data-panel-surface='idle'] .info-content {
        gap: 8px;
        padding: 14px 16px 18px;
        margin-bottom: calc(env(safe-area-inset-bottom, 0px));
        overflow: hidden;
    }

    body.is-active[data-panel-surface='idle'] .stats-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 0;
    }

    body.is-active[data-panel-surface='idle'] .stat-box {
        min-height: 48px;
        padding: 7px 8px;
        border-radius: 8px;
    }

    body.is-active[data-panel-surface='idle'] .stat-number {
        font-size: 20px;
        line-height: 1;
    }

    body.is-active[data-panel-surface='idle'] .stat-label {
        margin-top: 3px;
        font-size: 8.5px;
        line-height: 1;
    }

    body.is-active[data-panel-surface='idle'] .stat-caption,
    body.is-active[data-panel-surface='idle'] .demo-starters,
    body.is-active[data-panel-surface='idle'] #btn-launch {
        display: none;
        visibility: hidden;
        pointer-events: none;
    }
}