/* BPYC Mobile UX M1 — shared public/member mobile foundation.
   Page-specific redesigns remain for M2/M3; this file establishes safe,
   touch-friendly behavior across every non-admin screen first. */
/* BEGIN bpyc-mobile-foundation-m1 */
:root{
    --bpyc-mobile-edge:14px;
    --bpyc-mobile-tap:44px;
}

html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

body.public-site,
.public-site .figma-main,
.member-site .member-main{
    min-width:0;
}

.public-site :where(h1,h2,h3,h4,p,a,button,label,strong,span,small,code),
.member-site :where(h1,h2,h3,h4,p,a,button,label,strong,span,small,code){
    overflow-wrap:anywhere;
}

.public-site :where(input,select,textarea,button),
.member-site :where(input,select,textarea,button){
    max-width:100%;
}

.public-site :where(a,button,summary),
.member-site :where(a,button,summary){
    touch-action:manipulation;
}

html.mobile-menu-open,
body.mobile-menu-open,
html.member-notification-open,
body.member-notification-open{
    overflow:hidden;
    overscroll-behavior:none;
}

@media(max-width:1040px){
    [data-mobile-menu]{
        position:relative;
        z-index:130;
    }

    [data-mobile-menu].is-open::before{
        content:"";
        position:fixed;
        inset:0;
        z-index:130;
        background:rgba(0,25,49,.46);
        backdrop-filter:blur(3px);
        -webkit-backdrop-filter:blur(3px);
    }

    .public-nav-mobile-toggle{
        position:relative;
        z-index:133;
        display:grid;
        place-content:center;
        gap:4px;
        width:44px;
        height:44px;
        padding:0;
        border:1px solid #d8e1ee;
        border-radius:12px;
        background:#fff;
        color:#002a54;
        box-shadow:0 5px 14px rgba(0,42,84,.08);
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
    }

    .public-nav-mobile-toggle span{
        display:block;
        width:19px;
        height:2px;
        border-radius:999px;
        background:currentColor;
        transform-origin:center;
        transition:transform .18s ease,opacity .18s ease;
    }

    [data-mobile-menu].is-open .public-nav-mobile-toggle span:nth-child(1){
        transform:translateY(6px) rotate(45deg);
    }

    [data-mobile-menu].is-open .public-nav-mobile-toggle span:nth-child(2){
        opacity:0;
    }

    [data-mobile-menu].is-open .public-nav-mobile-toggle span:nth-child(3){
        transform:translateY(-6px) rotate(-45deg);
    }

    [data-mobile-menu-panel][hidden]{
        display:none!important;
    }

    [data-mobile-menu] [data-mobile-menu-panel]{
        position:fixed;
        z-index:132;
        top:78px;
        right:max(var(--bpyc-mobile-edge),env(safe-area-inset-right));
        display:grid;
        width:min(360px,calc(100vw - 28px));
        max-height:calc(100dvh - 94px - env(safe-area-inset-bottom));
        overflow-y:auto;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        padding-bottom:max(13px,env(safe-area-inset-bottom));
    }

    .public-nav-mobile-toggle:focus-visible{
        outline:3px solid rgba(6,182,212,.45);
        outline-offset:3px;
    }
}

@media(max-width:760px){
    /* Mobile viewport centering recovery:
       public-site.css intentionally reserves a desktop scrollbar gutter.
       On phone/emulated mobile viewports that reserved gutter becomes a visible
       strip on the right and makes fixed overlays look narrower than the screen. */
    html{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
        scrollbar-gutter:auto!important;
    }

    body.public-site{
        width:100%;
        max-width:100%;
        min-width:0;
        margin-inline:0;
        overflow-x:hidden;
    }

    html.public-share-modal-open,
    body.public-share-modal-open{
        width:100%;
        max-width:100%;
        scrollbar-gutter:auto!important;
    }

    .public-shell,
    .public-container{
        width:min(100% - 24px,1232px);
    }

    [data-mobile-menu] [data-mobile-menu-panel]{
        top:74px;
    }

    .public-site :where(
        input:not([type="checkbox"]):not([type="radio"]),
        select,
        textarea
    ),
    .member-site :where(
        input:not([type="checkbox"]):not([type="radio"]),
        select,
        textarea
    ){
        font-size:16px!important;
    }

    .public-site textarea,
    .member-site textarea{
        line-height:1.5;
    }

    .public-site :where(
        .public-btn,
        .public-btn-secondary,
        .public-btn-soft,
        .figma-primary-cta,
        .figma-secondary-cta,
        .section-page-filters a,
        .section-page-back,
        .section-text-button,
        .section-auth-submit,
        .section-google-auth-button,
        .public-share-trigger,
        .public-card-button,
        .fundraising-submit
    ){
        min-height:var(--bpyc-mobile-tap);
    }

    .public-card-button{
        padding:10px 12px;
        font-size:12px;
        line-height:1.2;
    }

    .section-page-filters{
        scroll-snap-type:x proximity;
        overscroll-behavior-inline:contain;
        -webkit-overflow-scrolling:touch;
    }

    .section-page-filters>a{
        scroll-snap-align:start;
    }

    .pagination{
        max-width:100%;
        overflow-x:auto;
        overscroll-behavior-inline:contain;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    .pagination::-webkit-scrollbar{
        display:none;
    }

    .pagination :where(a,span,.page-link){
        min-width:var(--bpyc-mobile-tap);
        min-height:var(--bpyc-mobile-tap);
    }

    .public-share-modal{
        padding:
            10px
            max(10px,env(safe-area-inset-right))
            max(10px,env(safe-area-inset-bottom))
            max(10px,env(safe-area-inset-left));
    }

    .public-share-dialog{
        max-height:calc(100dvh - 20px - env(safe-area-inset-bottom));
        overscroll-behavior:contain;
    }

    /* Member workspace stays available on every authenticated page while
       becoming touch-friendly instead of behaving like a squeezed desktop row. */
    .member-workspace-inner{
        gap:10px;
    }

    .member-workspace-identity{
        flex:1 1 auto;
        min-width:0;
    }

    .member-workspace-links{
        gap:7px;
        scroll-snap-type:x proximity;
        overscroll-behavior-inline:contain;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    .member-workspace-links::-webkit-scrollbar{
        display:none;
    }

    .member-workspace-links>a,
    .member-workspace-links>.member-notification-menu{
        flex:0 0 auto;
        scroll-snap-align:start;
    }

    .member-workspace-links>a,
    .member-notification-trigger,
    .member-workspace-logout button{
        min-height:var(--bpyc-mobile-tap);
        font-size:13px;
    }

    .member-workspace-logout button{
        padding-inline:13px;
    }

    .member-site .form-row input:not([type="checkbox"]):not([type="radio"]),
    .member-site .form-row select{
        min-height:var(--bpyc-mobile-tap);
    }

    .member-site .form-row textarea{
        min-height:120px;
    }

    .member-site :where(.btn,.member-id-primary,.member-id-secondary,.member-action-button){
        min-height:var(--bpyc-mobile-tap);
    }

    .member-site .table-wrap{
        max-width:100%;
        overscroll-behavior-inline:contain;
        -webkit-overflow-scrolling:touch;
    }

    .member-site .hero h1{
        font-size:clamp(31px,9vw,38px);
        line-height:1.1;
    }

    /* Recent notifications become a true mobile sheet. */
    .member-notification-menu.is-open::before{
        content:"";
        position:fixed;
        inset:0;
        z-index:218;
        background:rgba(0,25,49,.46);
        backdrop-filter:blur(2px);
        -webkit-backdrop-filter:blur(2px);
    }

    .member-notification-popover{
        position:fixed!important;
        z-index:220;
        top:auto!important;
        right:max(12px,env(safe-area-inset-right))!important;
        bottom:max(12px,env(safe-area-inset-bottom));
        left:max(12px,env(safe-area-inset-left))!important;
        display:flex;
        width:auto!important;
        max-height:min(78dvh,640px);
        flex-direction:column;
        border-radius:24px;
        overscroll-behavior:contain;
    }

    .member-notification-popover::before{
        display:none!important;
    }

    .member-notification-recent-list{
        min-height:0;
        max-height:none;
        flex:1 1 auto;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }

    .member-notification-popover-head{
        padding-top:17px;
    }

    .member-notification-popover-head button,
    .member-notification-popover-foot a{
        min-height:var(--bpyc-mobile-tap);
        display:inline-flex;
        align-items:center;
    }

    .member-notification-recent{
        min-height:64px;
    }

    .member-footer{
        padding-bottom:env(safe-area-inset-bottom);
    }
}

@media(max-width:600px){
    [data-mobile-menu] [data-mobile-menu-panel]{
        top:70px;
        right:max(12px,env(safe-area-inset-right));
        left:max(12px,env(safe-area-inset-left));
        width:auto;
        max-height:calc(100dvh - 84px - env(safe-area-inset-bottom));
        border-radius:20px;
    }

    .public-nav-mobile-panel a,
    .public-nav-mobile-actions a{
        min-height:48px;
    }
}

@media(max-width:520px){
    .public-shell,
    .public-container,
    .member-shell,
    .member-site .hero,
    .member-site>.member-main>.card,
    .member-site>.member-main>.grid,
    .member-site>.member-main>h1,
    .member-site>.member-main>h2,
    .member-site>.member-main>form,
    .member-site>.member-main>.pagination{
        width:min(100% - 20px,1232px);
    }

    .public-alert,
    .member-alert{
        border-radius:13px;
    }

    .public-actions{
        display:grid;
        grid-template-columns:1fr;
        width:100%;
    }

    .public-actions :where(.public-btn,.public-btn-secondary,.public-btn-soft){
        width:100%;
    }

    .section-auth-submit,
    .section-google-auth-button{
        width:100%;
    }

    .member-site .card{
        padding:16px;
        border-radius:16px;
    }

    .member-workspace-identity>span:last-child{
        max-width:min(46vw,180px);
    }

    .member-notification-popover{
        right:max(8px,env(safe-area-inset-right))!important;
        bottom:max(8px,env(safe-area-inset-bottom));
        left:max(8px,env(safe-area-inset-left))!important;
        max-height:82dvh;
        border-radius:22px;
    }
}

@media(prefers-reduced-motion:reduce){
    [data-mobile-menu].is-open::before,
    .member-notification-menu.is-open::before{
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
    }
}
/* END bpyc-mobile-foundation-m1 */