/* OSANIME Profile UI — Mobile polish v284
 * Screenshot-driven cleanup for the public profile at phone widths.
 * Loaded after v283 so this file only reconciles mobile layout conflicts
 * left by the historical profile CSS stack. No backend behaviour changes.
 */

body.music-member-page.profile-php-page.profile-ui-stage8-v284 {
    overflow-x: clip !important;
}

/* Keep the tablet support rail predictable before it collapses on phones. */
@media (max-width: 1180px) {
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-member-side-sticky {
        width: 100% !important;
    }
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-member-side-sticky > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 780px) {
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-php-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding: 9px 8px max(96px, calc(env(safe-area-inset-bottom) + 82px)) !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .member-main,
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .member-layout,
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-main-column,
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-member-side,
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-member-side-sticky {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .member-layout {
        display: block !important;
    }

    /* Music library header: keep title and total in one compact row. */
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-library-intro {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 10px 0 8px !important;
        padding: 13px !important;
        border-radius: 14px !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-library-intro-copy {
        min-width: 0 !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-library-intro h2 {
        margin: 2px 0 3px !important;
        font-size: clamp(18px, 5vw, 21px) !important;
        line-height: 1.12 !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-library-intro p {
        margin: 0 !important;
        max-width: 100% !important;
        font-size: 10.5px !important;
        line-height: 1.45 !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-library-intro-stat {
        min-width: 68px !important;
        min-height: 56px !important;
        padding: 7px 9px !important;
        border-radius: 12px !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-library-intro-stat b {
        font-size: 18px !important;
    }

    /* Search stays full-width. Genre + sort remain side-by-side down to 391px
       instead of becoming two oversized full-width rows around 500px. */
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-toolbar {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 8px 0 !important;
        padding: 9px !important;
        border-radius: 13px !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-toolbar .member-toolbar-spacer {
        display: none !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-search {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 46px !important;
        min-height: 46px !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-filter-field {
        grid-column: auto !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-filter-field > span {
        min-height: 18px !important;
        margin-bottom: 4px !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-filter-field .member-select {
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        min-height: 44px !important;
        padding-inline: 10px 28px !important;
        font-size: 14px !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-summary {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 7px 10px !important;
        padding: 9px 10px !important;
        border-radius: 11px !important;
        font-size: 10.5px !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-active-filters {
        width: 100% !important;
        gap: 6px !important;
        margin: 7px 0 !important;
    }

    /* Mobile upload list: one full-width card, no hidden width inherited from
       the desktop table/sidebar grid. */
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-library,
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-library .member-mobile-list {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-library .member-mobile-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 5px 0 !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-mobile-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 78px !important;
        grid-template-columns: 58px minmax(0, 1fr) 34px !important;
        align-items: center !important;
        gap: 9px !important;
        padding: 9px !important;
        border-radius: 13px !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-mobile-card > img {
        width: 58px !important;
        height: 58px !important;
        border-radius: 10px !important;
        object-fit: cover !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-mobile-copy,
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-mobile-meta,
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-mobile-submeta {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-mobile-copy > b {
        display: -webkit-box !important;
        overflow: hidden !important;
        font-size: 12.5px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-mobile-meta,
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-mobile-submeta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px 8px !important;
        margin-top: 4px !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-mobile-open {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
    }

    /* Pagination is a compact centered control, not a left-aligned strip. */
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-pagination {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 13px 0 3px !important;
        padding: 4px 0 !important;
        overflow: visible !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-pagination a,
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-pagination .member-page-dots {
        flex: 0 0 auto !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        display: inline-grid !important;
        place-items: center !important;
        padding: 0 10px !important;
        border-radius: 10px !important;
        font-size: 11px !important;
        line-height: 1 !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-pagination .member-page-dots {
        min-width: 28px !important;
        padding-inline: 4px !important;
    }

    /* The mobile toolbar already has a Genre selector, so the duplicate Genre
       sidebar card only wastes vertical space. Keep Latest Uploads as the one
       useful supporting block and force it to span the phone width. */
    body.music-member-page.profile-php-page.profile-ui-stage8-v284.profile-tab-uploads .profile-genres-card {
        display: none !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-member-side {
        display: block !important;
        margin-top: 10px !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-member-side-sticky {
        position: static !important;
        top: auto !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-member-side-sticky > *,
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-latest-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-latest-card {
        display: block !important;
        margin: 0 !important;
        padding: 12px !important;
        border-radius: 14px !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-latest-card h3 {
        margin: 0 0 7px !important;
        padding: 0 0 9px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-latest-card .member-recent-row {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 66px !important;
        display: grid !important;
        grid-template-columns: 54px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 7px 4px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-latest-card .member-recent-row + .member-recent-row {
        border-top: 1px solid rgba(255,255,255,.055) !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-latest-card .member-recent-row img {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        border-radius: 10px !important;
        object-fit: cover !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-latest-card .member-recent-row > span {
        min-width: 0 !important;
        width: 100% !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-latest-card .member-recent-row b {
        display: -webkit-box !important;
        overflow: hidden !important;
        font-size: 11.5px !important;
        line-height: 1.32 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-latest-card .member-recent-row small {
        display: block !important;
        margin-top: 4px !important;
        font-size: 9px !important;
        line-height: 1.25 !important;
    }

    /* Hero duplicates are already represented above the tabs. */
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-statistics-card,
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .member-profile-share-card {
        display: none !important;
    }
}

/* Small phones: only here do filters become one-per-row. */
@media (max-width: 390px) {
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-php-wrap {
        padding-inline: 6px !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-library-intro {
        grid-template-columns: minmax(0, 1fr) auto !important;
        padding: 11px !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-library-intro p {
        display: none !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-toolbar {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;
        padding: 8px !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-search,
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-filter-field {
        grid-column: 1 !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-mobile-card {
        grid-template-columns: 54px minmax(0, 1fr) 32px !important;
        gap: 8px !important;
        padding: 8px !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-mobile-card > img {
        width: 54px !important;
        height: 54px !important;
    }

    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-pagination a,
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-pagination .member-page-dots {
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding-inline: 8px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-mobile-card,
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .member-recent-row,
    body.music-member-page.profile-php-page.profile-ui-stage8-v284 .profile-upload-pagination a {
        transition: none !important;
    }
}