/* Phase 1B: all rules require mobile viewport AND a validated controller.
   No active-section display override: renderers retain their hidden/empty state.
   The inverse query includes fractional CSS widths below 768px. */
@media not all and (min-width: 768px) {
    #data-wrapper[data-mobile-tabs-ready="true"] {
        --mobile-dashboard-tabs-enabled: 1;
    }

    /* The only display override applies to validated inactive section roots.
       It must win over renderer-owned inline display and utility classes. */
    #data-wrapper[data-mobile-tabs-ready="true"] .mobile-dashboard-tab-inactive {
        display: none !important;
    }

    #data-wrapper[data-mobile-tabs-ready="true"] #mobile-dashboard-tabs {
        /* Containing block for the edge scroll hints below. */
        position: relative;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-bottom: 16px;
        padding: 4px;
        border: 1px solid rgba(47, 244, 114, 0.25);
        border-radius: 12px;
        background: rgba(6, 14, 20, 0.9);
    }

    #data-wrapper[data-mobile-tabs-ready="true"] .mobile-dashboard-tab-strip {
        display: flex;
        gap: 6px;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px;
    }

    #data-wrapper[data-mobile-tabs-ready="true"] .mobile-dashboard-tab-button {
        flex: 0 0 auto;
        box-sizing: border-box;
        min-width: 48px;
        min-height: 48px;
        padding: 10px 12px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.04);
        color: #d9e3e8;
        font-family: inherit;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        white-space: nowrap;
        cursor: pointer;
    }

    #data-wrapper[data-mobile-tabs-ready="true"] .mobile-dashboard-tab-button[aria-pressed="true"] {
        color: #2ff472;
        border-color: #2ff472;
        background: rgba(47, 244, 114, 0.1);
        font-weight: 800;
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    /* :focus works in WebViews without :focus-visible support. */
    #data-wrapper[data-mobile-tabs-ready="true"] .mobile-dashboard-tab-button:focus {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
    }

    /* Edge scroll hints (mobileDashboardTabHints.js). A midnight fade plus a
       cyan chevron at whichever edge still hides tabs. They are decorative
       overlays only: pointer-events: none lets every tap and swipe reach the
       strip, so touch scrolling and tab selection are unchanged, and they sit
       in the navigation box, never inside the strip, so tab widths and the
       six-button row are untouched. The width matches the script's EDGE (28),
       which the controller also keeps between a revealed tab and the edge.
       Hidden hints fade out and then drop to visibility: hidden; the strip's
       single display: none rule stays reserved for inactive sections. */
    #data-wrapper[data-mobile-tabs-ready="true"] .mobile-dashboard-tab-hint {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 1;
        width: 28px;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.18s ease-out, visibility 0s linear 0.18s;
    }

    #data-wrapper[data-mobile-tabs-ready="true"] .mobile-dashboard-tab-hint[data-visible="true"] {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.18s ease-out, visibility 0s linear 0s;
    }

    /* 11px = the navigation's 12px radius inside its 1px border. */
    #data-wrapper[data-mobile-tabs-ready="true"] .mobile-dashboard-tab-hint--left {
        left: 0;
        border-radius: 11px 0 0 11px;
        background: linear-gradient(to right, rgba(6, 14, 20, 0.96) 35%, rgba(6, 14, 20, 0));
    }

    #data-wrapper[data-mobile-tabs-ready="true"] .mobile-dashboard-tab-hint--right {
        right: 0;
        border-radius: 0 11px 11px 0;
        background: linear-gradient(to left, rgba(6, 14, 20, 0.96) 35%, rgba(6, 14, 20, 0));
    }

    /* Chevron: two cyan sides of a 9px square, turned to point outwards. */
    #data-wrapper[data-mobile-tabs-ready="true"] .mobile-dashboard-tab-hint::before {
        content: '';
        position: absolute;
        top: 50%;
        width: 7px;
        height: 7px;
        margin-top: -4.5px;
        border-top: 2px solid #00f2ff;
        border-right: 2px solid #00f2ff;
        filter: drop-shadow(0 0 3px rgba(0, 242, 255, 0.7));
    }

    #data-wrapper[data-mobile-tabs-ready="true"] .mobile-dashboard-tab-hint--left::before {
        left: 8px;
        transform: rotate(-135deg);
    }

    #data-wrapper[data-mobile-tabs-ready="true"] .mobile-dashboard-tab-hint--right::before {
        right: 8px;
        transform: rotate(45deg);
    }

    /* Retain shared wrappers and their ordering. Disable only their mobile
       intrinsic placeholders, which otherwise reserve 450–600px for hidden
       descendants. In particular, #dw-eco still contains the dashboard search. */
    #data-wrapper[data-mobile-tabs-ready="true"] #dw-matrix,
    #data-wrapper[data-mobile-tabs-ready="true"] #dw-eco,
    #data-wrapper[data-mobile-tabs-ready="true"] #dw-udc,
    #data-wrapper[data-mobile-tabs-ready="true"] #dw-trades,
    #data-wrapper[data-mobile-tabs-ready="true"] #dw-comp {
        content-visibility: visible;
        contain-intrinsic-size: none;
    }

    /* An emptied wrapper collapses to zero height but keeps its own margins,
       and these wrappers nest inside column-flex parents (`#dw-clutch`,
       `#dw-eco`) where margins never collapse. Every wrapper that lost its
       content therefore still reserved its own 16–24px, so the selected tab
       began after roughly 200px of nothing on phones.
       Only a wrapper whose direct payload is an inactive section matches, so
       the instant its group is selected it stops matching and keeps its
       spacing. Nothing is hidden, resized, or re-parented, and no node in the
       controller is touched: this is layout participation only. */
    #data-wrapper[data-mobile-tabs-ready="true"] div:has(> .mobile-dashboard-tab-inactive) {
        margin-top: 0;
        margin-bottom: 0;
    }
}