/* 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;
    }
}

/* Avatar picker: 4 tiles per row on phones (flex 72px tiles wrap to 3 otherwise). */
@media (max-width: 640px) {
    .account-avatars {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    .account-avatars__opt {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        padding: 2px;
    }

    .account-avatars__opt img {
        aspect-ratio: 1 / 1;
    }
}

@media (max-width: 360px) {
    .account-avatars {
        gap: 8px;
    }
}