/* Mobile: profile account tabs — scroll on .tabs tablist (matches React ref target) */

@media (width <= 768px) {
    .account-page {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .account-page .account-tabs {
        position: relative;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow: visible;
    }

    .account-page .account-tabs .tabs {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scroll-padding-inline: var(--space-3);
        scrollbar-width: none;
        touch-action: pan-x pan-y;
    }

    .account-page .account-tabs .tabs::-webkit-scrollbar {
        display: none;
    }

    .account-page .account-tabs .tabs__tab {
        flex: 0 0 auto;
        scroll-snap-align: center;
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
        white-space: nowrap;
    }
}