/* V27.5.74.40 — shared recessed list surface.
   Generalizes the layered Events-list look across all main entity lists. */
:root {
    --rcm-list-rim: rgba(174, 183, 195, .82);
    --rcm-list-rim-highlight: rgba(226, 232, 240, .34);
    --rcm-list-tray: #0f172a;
    --rcm-list-rail: #334155;
}

.rcm-recessed-list-surface {
    box-sizing: border-box;
    background: var(--rcm-list-tray) !important;
    border: 5px solid var(--rcm-list-rim) !important;
    border-radius: 12px;
    box-shadow:
        inset 0 0 0 3px var(--rcm-list-rail),
        inset 0 9px 18px rgba(0, 0, 0, .28),
        inset 0 1px 0 var(--rcm-list-rim-highlight),
        0 2px 5px rgba(0, 0, 0, .28);
}

/* Entity lists already have their own useful content padding. */
.band-list-scroll-content.rcm-recessed-list-surface,
.venue-list-scroll-content.rcm-recessed-list-surface,
.profile-list-scroll-content.rcm-recessed-list-surface,
.musician-list-scroll-content.rcm-recessed-list-surface {
    padding: 9px !important;
}

/* Events keep the day-group geometry; the shared surface provides only the
   outer rim/tray while .calendar-day supplies its existing inner rails. */
.calendar-scroll-content.rcm-recessed-list-surface {
    width: 100%;
    padding-left: 6px !important;
    padding-right: 6px !important;
    padding-top: 6px !important;
    padding-bottom: max(6px, var(--events-ad-clearance, 0px)) !important;
}

@media (max-width: 600px) {
    .rcm-recessed-list-surface {
        border-width: 4px !important;
        border-radius: 11px;
        box-shadow:
            inset 0 0 0 2px var(--rcm-list-rail),
            inset 0 7px 14px rgba(0, 0, 0, .27),
            inset 0 1px 0 var(--rcm-list-rim-highlight),
            0 2px 4px rgba(0, 0, 0, .24);
    }

    .band-list-scroll-content.rcm-recessed-list-surface,
    .venue-list-scroll-content.rcm-recessed-list-surface,
    .profile-list-scroll-content.rcm-recessed-list-surface,
    .musician-list-scroll-content.rcm-recessed-list-surface {
        padding: 7px !important;
    }

    .calendar-scroll-content.rcm-recessed-list-surface {
        padding-left: 4px !important;
        padding-right: 4px !important;
        padding-top: 4px !important;
    }
}

/* V27.5.74.40: tab swipe is recognized in JS so local horizontal sliders can
   retain their native left/right behavior inside explicitly marked zones. */
[data-rcm-tab-swipe-zone="1"] {
    touch-action: auto;
}
[data-rcm-local-horizontal-swipe="1"] {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}