/*
 * OSANIME Members Final Consolidated Fix v4
 * Built from the actual production debug bundle (2026-09-11).
 *
 * Root causes addressed:
 * 1) Desktop first card row was visually covered by the sticky directory controls.
 * 2) UI Stage 6 hides almost every major Members section with opacity:0 until
 *    IntersectionObserver adds .mcui6-visible. On some mobile/browser states
 *    that reveal path can fail or be delayed, leaving a large dark/black region.
 *
 * v4 favors stable layout over decorative reveal/sticky behavior.
 */

body.os-members-consolidated-v4 {
    overflow-x: hidden !important;
}

/* Shared main must remain a normal document-flow container. */
body.os-members-consolidated-v4 #mainContent {
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    content-visibility: visible !important;
}

/* Members shell: never collapse into a dark empty viewport. */
body.os-members-consolidated-v4 .members-stage1-shell {
    position: relative !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

/*
 * ROOT CAUSE #1 — sticky controls
 * members-ui-final-v234.css makes this block sticky at >=768px (top:78px),
 * so while scrolling it sits over the first visible member-card row.
 * Keep the controls in normal flow on every viewport.
 */
body.os-members-consolidated-v4.members-ui-stage4-page .members-ui-stage4-controls,
body.os-members-consolidated-v4.members-ui-stage7-page .members-ui-stage4-controls {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 2 !important;
    margin-bottom: 14px !important;
}

/* Remove sticky-only scroll compensation now that controls are not sticky. */
body.os-members-consolidated-v4 .members-ui-stage4-directory {
    scroll-margin-top: 18px !important;
    overflow: visible !important;
}

/*
 * ROOT CAUSE #2 — Stage 6 reveal system
 * Production v234 uses:
 *   .motion-ready .mcui6-reveal { opacity:0; transform:translateY(...) }
 * and JS/IntersectionObserver is responsible for restoring visibility.
 * Members is a directory page, so content must never depend on animation JS.
 */
body.os-members-consolidated-v4.members-ui-stage6-page.motion-ready .mcui6-reveal,
body.os-members-consolidated-v4.members-ui-stage6-page .mcui6-reveal,
body.os-members-consolidated-v4.members-ui-stage6-page.motion-ready .mcui6-reveal.mcui6-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    will-change: auto !important;
    transition: none !important;
}

/* Ensure the actual production sections remain measurable/paintable. */
body.os-members-consolidated-v4 :where(
    .members-ui-stage2-spotlight-grid,
    .members-stage10-featured,
    .members-stage3-welcome,
    .members-stage3-onboarding,
    .members-stage8-discovery,
    .members-stage1-panel,
    .members-stage7-leaderboards,
    .members-stage2-discovery,
    .members-ui-stage2-utility-grid,
    #member-directory
) {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    content-visibility: visible !important;
}

/* The directory itself must always stay in flow and below its controls. */
body.os-members-consolidated-v4 .members-stage2-directory-grid {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 0 !important;
    align-items: stretch !important;
    overflow: visible !important;
}

/*
 * Card geometry. The real cards already use members-ui-stage3-card; normalize
 * only the pieces that can escape their card when older stage rules win.
 */
body.os-members-consolidated-v4 .members-ui-stage3-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
    box-sizing: border-box !important;
}

body.os-members-consolidated-v4 .members-ui-stage3-card .members-stage2-card-body {
    position: relative !important;
    z-index: 1 !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

body.os-members-consolidated-v4 .members-ui-stage3-card .members-stage2-social,
body.os-members-consolidated-v4 .members-ui-stage3-card .members-stage5-card-actions {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body.os-members-consolidated-v4 .members-ui-stage3-card .members-stage5-card-actions {
    margin-top: auto !important;
    padding-top: 10px !important;
}

/* Prevent long names/badges from changing column geometry. */
body.os-members-consolidated-v4 .members-ui-stage3-card :where(
    .members-stage1-identity,
    .members-stage1-name-row,
    .members-stage5-identity-meta,
    .members-stage2-bio,
    .members-stage1-meta
) {
    min-width: 0 !important;
}

/* Closed sidebar overlay must never paint a dark layer over Members. */
body.os-members-consolidated-v4 #sidebarOverlay[aria-hidden="true"],
body.os-members-consolidated-v4 .sidebar-overlay[aria-hidden="true"],
body.os-members-consolidated-v4 .osanime-sidebar-overlay[aria-hidden="true"] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Mobile: stable, single-column directory with no animation-dependent paint. */
@media (max-width: 767px) {
    html,
    body.os-members-consolidated-v4 {
        height: auto !important;
        min-height: 100% !important;
    }

    body.os-members-consolidated-v4 #mainContent,
    body.os-members-consolidated-v4 .members-stage1-shell,
    body.os-members-consolidated-v4 #member-directory,
    body.os-members-consolidated-v4 .members-stage2-directory-grid {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        clip: auto !important;
        clip-path: none !important;
    }

    body.os-members-consolidated-v4 .members-stage1-shell {
        width: calc(100% - 16px) !important;
        padding-top: 10px !important;
        padding-bottom: 36px !important;
    }

    body.os-members-consolidated-v4 .members-ui-stage4-controls {
        position: relative !important;
        top: auto !important;
        z-index: 1 !important;
        margin: 0 0 12px !important;
    }

    body.os-members-consolidated-v4 .members-stage2-directory-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body.os-members-consolidated-v4 .members-ui-stage3-card {
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    body.os-members-consolidated-v4 .members-ui-stage3-card .members-stage2-card-body {
        min-height: 0 !important;
    }

    body.os-members-consolidated-v4 .members-ui-stage3-card .members-stage5-card-actions {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    /* The final UI turns several recommendation areas into horizontal rails.
       Keep them, but never let them determine page height incorrectly. */
    body.os-members-consolidated-v4 :where(
        .members-stage10-featured-grid,
        .members-stage3-welcome-list,
        .members-stage8-suggestion-grid
    ) {
        max-height: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (max-width: 390px) {
    body.os-members-consolidated-v4 .members-ui-stage3-card .members-stage5-card-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Reduced motion is effectively the baseline for the Members directory now. */
@media (prefers-reduced-motion: reduce) {
    body.os-members-consolidated-v4 .mcui6-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}