/* ============================================
   NO-FIELD MOBILE LAYOUT (viewport ≤ 768px)
   Footer: swipeable cards (S | Scan | P)
   ============================================ */

@media (max-width: 768px) {
    /* Footer 15% taller on mobile (320 → 368px), viewer shrinks accordingly */
    .lab-grid {
        --sidebar-width: 200px;
        grid-template-columns: 200px 1fr;
        grid-template-rows: 1fr 368px;
    }
    .lab-grid.sidebar-collapsed {
        grid-template-columns: 24px 1fr;
    }

    /* Hide scan preview when sidebar is expanded (give full width to main viewer) */
    .lab-grid:not(.sidebar-collapsed) #nv-scan-preview-container {
        display: none !important;
    }

    /* Footer: dots fixed at top, cards scroll below (dots outside scroll container) */
    .footer-wrapper .footer-card-dots {
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        gap: 8px;
        height: 28px;
        background: var(--bg-elevated);
    }
    .footer-wrapper .footer-card-dots .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--muted);
        opacity: 0.4;
        transition: opacity 0.2s, background 0.2s;
    }
    .footer-wrapper .footer-card-dots .dot.active {
        opacity: 1;
        background: var(--accent);
    }

    /* Footer: horizontal scroll-snap, one card per column */
    #slot-footer {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: row;
        grid-template-columns: unset;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1px;
        background: var(--bg-elevated);
    }

    /* Reorder footer cards on mobile: SEQUENCES | PROTOCOL | Run */
    #slot-footer #col-tree { order: 1; }
    #slot-footer #col-params { order: 2; }
    #slot-footer #col-scan { order: 3; }

    /* Each footer column is a full-width card */
    #slot-footer .footer-col,
    #slot-footer #col-tree,
    #slot-footer #col-scan,
    #slot-footer #col-params {
        flex: 0 0 100%;
        min-width: 100%;
        scroll-snap-align: start;
        box-sizing: border-box;
    }

    /* Override collapse on mobile: always three equal full-width cards */
    #slot-footer.tree-collapsed,
    #slot-footer.params-collapsed,
    #slot-footer.tree-collapsed.params-collapsed {
        display: flex;
        flex-direction: row;
        grid-template-columns: unset;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    #slot-footer.tree-collapsed .footer-col,
    #slot-footer.tree-collapsed #col-tree,
    #slot-footer.tree-collapsed #col-scan,
    #slot-footer.tree-collapsed #col-params,
    #slot-footer.params-collapsed .footer-col,
    #slot-footer.params-collapsed #col-tree,
    #slot-footer.params-collapsed #col-scan,
    #slot-footer.params-collapsed #col-params,
    #slot-footer.tree-collapsed.params-collapsed .footer-col,
    #slot-footer.tree-collapsed.params-collapsed #col-tree,
    #slot-footer.tree-collapsed.params-collapsed #col-scan,
    #slot-footer.tree-collapsed.params-collapsed #col-params {
        flex: 0 0 100%;
        min-width: 100%;
        scroll-snap-align: start;
    }
}