/* Ripple — mobile sub-nav and group-nav fixes.
   Extracted from inline <style> in index.html. The !important flags
   defeat conflicting rules in styles.css that the original theme
   applied at desktop widths. Safe to slim once that legacy CSS
   is rewritten to share the rooslabs design tokens directly. */

@media (max-width: 768px) {
    #stepCards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    .view-toggle.sub-nav {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
        height: auto !important;
    }
    .view-toggle.sub-nav::-webkit-scrollbar { display: none !important; }
    .view-toggle.sub-nav .view-btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
        font-family: 'Share Tech Mono', monospace !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        font-weight: 400 !important;
        height: auto !important;
        min-height: 0 !important;
        min-width: 0 !important;
    }
    .view-btn:focus, .group-btn:focus {
        outline: none !important;
    }
    .navigation { display: none !important; }
    .nav-groups {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        min-height: 0 !important;
        height: auto !important;
        background: transparent !important;
    }
    .nav-groups::-webkit-scrollbar { display: none !important; }
    .group-btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 10px 18px !important;
        font-size: 13px !important;
        font-family: 'Share Tech Mono', monospace !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        font-weight: 400 !important;
        height: auto !important;
        min-height: 0 !important;
        background: var(--bg-primary) !important;
        color: var(--text-muted) !important;
    }
    .group-btn.active {
        color: var(--color-primary) !important;
        border-bottom: 2px solid var(--color-primary) !important;
    }
}