/* ── Mobile styles for library page ────────────────────────────────────────── */

/* Mobile top bar — hidden on desktop */
.mobile-top-bar {
    display: none;
}

.sidebar-backdrop {
    display: none;
}

/* Showcases: 1 column on medium-small screens */
@media (max-width: 1024px) {
    .showcases-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    /* ── Layout ──────────────────────────────────────────────────────────── */
    .main-layout {
        grid-template-columns: 1fr !important;
    }

    .content-area {
        padding: 0 !important;
    }

    /* ── Mobile top bar ──────────────────────────────────────────────────── */
    .mobile-top-bar {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.625rem 1rem;
        background: var(--bg-card);
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .mobile-menu-btn {
        background: none;
        border: none;
        font-size: 1.375rem;
        cursor: pointer;
        padding: 0.25rem 0.25rem 0.25rem 0;
        color: var(--text-primary);
        line-height: 1;
    }

    .mobile-top-title {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-muted);
    }

    /* ── Sidebar overlay ─────────────────────────────────────────────────── */
    aside.sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 280px !important;
        max-width: 80vw !important;
        height: 100vh !important;
        z-index: 1000 !important;
        transform: translateX(-100%);
        transition: transform 0.25s ease !important;
        border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
        box-shadow: 0.25rem 0 1.5rem rgba(0, 0, 0, 0.15);
        overflow-y: auto !important;
        display: block !important;
        padding: 1.125rem 0 1.25rem !important;
    }

    aside.sidebar.open {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 999;
    }

    .sidebar-backdrop.show {
        display: block;
    }

    /* ── Profile hero ────────────────────────────────────────────────────── */
    .weird-world {
        padding: 0 1rem !important;
        margin-top: 1rem !important;
    }

    .weird-left .polaroid , .weird-left .polaroid img {
        max-height: 300px;
    }

    .weird-right {
        max-height: none !important;
    }

    .hero-sticker h1 {
        font-size: 1.5rem !important;
    }

    .profile-level-wrap {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .profile-actions {
        flex-wrap: wrap;
    }

    .profile-actions .main-cta,
    .profile-actions .second-cta {
        flex: 1;
        min-width: 0;
        text-align: center;
        font-size: 0.8125rem;
        padding: 0.5rem 1rem;
    }

    /* ── Section tabs navigation ─────────────────────────────────────────── */
    .profile-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0 !important;
        padding: 0 1rem !important;
    }

    .profile-tabs::-webkit-scrollbar {
        display: none;
    }

    .profile-tab {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 0.75rem !important;
        padding: 0.625rem 0.875rem !important;
    }

    /* ── Section content padding ─────────────────────────────────────────── */
    .page-section {
        padding: 1rem !important;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .section-header .edit-controls {
        flex-wrap: wrap;
        gap: 0.375rem;
        width: 100%;
    }

    .section-header .edit-controls button {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.75rem !important;
        flex: 1;
        min-width: 0;
    }

    .section-title {
        font-size: 0.875rem !important;
    }

    /* ── What's New grid ─────────────────────────────────────────────────── */
    .whats-new-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
    }

    .showcases-grid {
        gap: 0.75rem !important;
    }

    /* ── Comments ────────────────────────────────────────────────────────── */
    .comment-form {
        flex-direction: column;
    }

    .comment-form-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .comment-input {
        font-size: 16px !important;
    }

    #reviewComment {
        font-size: 16px !important;
    }

    /* ── Library shelves ─────────────────────────────────────────────────── */
    #shelvesContainer .books-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    #shelvesContainer .books-grid .book-card {
        min-width: 0 !important;
    }

    .shelf-header {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.625rem 0 !important;
    }

    .shelf-title {
        font-size: 0.875rem !important;
    }

    .books-grid .book-card .book-title {
        font-size: 0.75rem !important;
    }

    /* ── Achievements ────────────────────────────────────────────────────── */
    .achv-filters {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
        gap: 0.375rem !important;
        padding-bottom: 0.375rem;
    }

    .achv-filters::-webkit-scrollbar {
        display: none;
    }

    .achv-filter-btn {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 0.75rem !important;
        padding: 0.375rem 0.75rem !important;
    }

    .achv-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.625rem !important;
    }

    .achv-card {
        padding: 0.75rem !important;
    }

    .achv-card .achv-icon {
        font-size: 1.75rem !important;
    }

    .achv-card .achv-name {
        font-size: 0.75rem !important;
    }

    /* ── Collections ─────────────────────────────────────────────────────── */
    .collections-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    .collection-card {
        padding: 0.875rem !important;
    }

    /* ── Friends ─────────────────────────────────────────────────────────── */
    .friends-subtabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
    }

    .friends-subtabs::-webkit-scrollbar {
        display: none;
    }

    .friends-subtab {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 0.75rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    .fri-card {
        flex-wrap: wrap;
        gap: 0.5rem !important;
        padding: 0.625rem 0.75rem !important;
    }

    .fri-actions {
        width: 100%;
        display: flex;
        gap: 0.25rem;
    }

    .fri-actions .fri-btn {
        flex: 1;
        text-align: center;
        font-size: 0.6875rem !important;
        padding: 0.3125rem 0.5rem !important;
    }

    /* ── Settings ─────────────────────────────────────────────────────────── */
    .settings-layout {
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 1rem !important;
        border-radius: 1rem !important;
        min-height: 0 !important;
    }

    .sett-tabstrip {
        flex-direction: row !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-right: none !important;
        border-bottom: 1px solid var(--border);
        padding-right: 0 !important;
        padding-bottom: 0.5rem;
        min-width: 0 !important;
        gap: 0.25rem;
    }

    .sett-tabstrip::-webkit-scrollbar {
        display: none;
    }

    .sett-tabstrip-item {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 0.75rem !important;
        padding: 0.375rem 0.625rem !important;
    }

    .sett-card {
        padding: 0.75rem 1rem !important;
    }

    .sett-card-title {
        font-size: 0.75rem !important;
    }

    /* ── Book detail ──────────────────────────────────────────────────────── */
    #bookDetail {
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow-x: hidden !important;
    }

    .book-detail-cover {
        height: 160px !important;
    }

    .book-detail-layout {
        flex-direction: column !important;
        align-items: center !important;
        padding: 1rem !important;
        gap: 1rem !important;
        margin-top: -1.5rem !important;
    }

    .detail-left-col {
        width: 100% !important;
        align-items: center !important;
    }

    .book-detail-info {
        width: 100% !important;
        padding: 1rem !important;
        margin-block: 5px 15px;
    }

    .book-detail-img {
        width: 9rem !important;
        height: auto !important;
    }

    .detail-cover-actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        margin-block: 10px 5px;
    }

    .detail-cover-actions .detail-btn {
        flex: 0 1 auto !important;
        text-align: center;
        font-size: 0.8125rem !important;
        padding: 0.5rem 1rem !important;
        white-space: nowrap;
    }

    .book-detail-info h1 {
        font-size: 1.5rem !important;
        text-align: center;
    }

    .book-detail-info h3 {
        font-size: 1rem !important;
    }

    .book-detail-info p {
        text-align: center;
    }

    .details-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
        padding: 0.75rem !important;
    }

    .stats-list {
        flex-direction: column !important;
        gap: 0.375rem !important;
    }

    /* ── Modals ───────────────────────────────────────────────────────────── */
    .modal {
        width: 92% !important;
        max-width: 92% !important;
        margin: 1rem !important;
        padding: 1.25rem !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    .modal .showcase-add-btn {
        font-size: 0.8125rem !important;
        padding: 0.625rem 0.875rem !important;
    }

    .modal-btns {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .modal-btns button {
        flex: 1;
        font-size: 0.8125rem !important;
    }

    /* ── Customize panel (slide‑in) ───────────────────────────────────────── */
    .customize-slider {
        width: 100% !important;
    }

    .customize-panel {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
    }

    .cust-tabstrip {
        padding: 0.75rem 0.375rem !important;
        gap: 0.375rem !important;
    }

    .cust-tabstrip-item {
        width: 2.25rem !important;
        height: 2.25rem !important;
        font-size: 1rem !important;
    }

    .cust-tabpage {
        padding: 0.5rem 1rem 1rem !important;
    }

    .cust-row {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .cust-label {
        min-width: 0 !important;
        font-size: 0.6875rem !important;
    }

    .cust-input {
        font-size: 0.8125rem !important;
        padding: 0.5rem 0.625rem !important;
    }

    /* ── Subscription panel ──────────────────────────────────────────────── */
    #subPanelOverlay .customize-panel {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ── Misc ─────────────────────────────────────────────────────────────── */
    #whatsNewSection {
        margin-bottom: 1rem !important;
    }

    .showcase-widget {
        margin-bottom: 1rem !important;
    }

    .showcase-widget .showcase-body {
        padding: 0.75rem !important;
    }

    .showcase-header {
        font-size: 0.8125rem !important;
        padding: 0.625rem 0.875rem !important;
    }

    .showcase-content {
        padding: 0.75rem !important;
    }

    /* ── Theme swatches & BG presets ──────────────────────────────────────── */
    .theme-swatches {
        flex-wrap: wrap;
        gap: 0.375rem !important;
    }

    .theme-swatch {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }

    .bg-presets {
        flex-wrap: wrap;
        gap: 0.375rem !important;
    }

    .bg-preset {
        width: 2.25rem !important;
        height: 2.25rem !important;
        font-size: 1rem !important;
    }

    .secret-keys-list .key-row {
        flex-wrap: wrap;
    }

    .secret-keys-list .key-row input {
        min-width: 0;
        flex: 1;
    }

    /* ── Editor panel (slide‑in) ──────────────────────────────────────────── */
    .edit-panel {
        width: 100% !important;
        right: -100% !important;
        max-width: 100% !important;
        padding: 1rem 1rem 2rem !important;
    }

    .edit-panel.open {
        right: 0 !important;
    }

    /* ── Sub tier buttons ─────────────────────────────────────────────────── */
    .sub-tier-btn {
        padding: 0.75rem 1rem !important;
    }

    .sub-tier-amount {
        font-size: 1.125rem !important;
    }
}

/* ── Extra small screens ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
    #shelvesContainer .books-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }

    .achv-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }

    .collections-grid {
        grid-template-columns: 1fr !important;
    }

    .weird-left .polaroid {
        max-height: 220px;
    }

    .hero-sticker {
        padding: 0.875rem 1rem !important;
    }

    .hero-sticker h1 {
        font-size: 1.25rem !important;
    }

    .profile-bio-block {
        padding: 0.75rem 1rem !important;
        min-height: 80px !important;
    }

    .profile-bio-block .bio-text {
        font-size: 0.8125rem !important;
    }
}