/* No selectors affect the existing desktop/tablet/unfolded layout. */
@media (max-width:768px) {
  html.pe-mobile-clubs-modal-open, html.pe-mobile-clubs-modal-open body { overflow:hidden!important; }
  #mobileClubRoot.pe-mobile-clubs-modal-active .peClubModal[hidden] { display:none!important; }
  #mobileClubRoot.pe-mobile-clubs-modal-active .peClubModal[data-open="true"] {
    display:flex!important; position:fixed!important; inset:var(--club-modal-top,0px) 0 auto!important;
    z-index:1600; width:100%; height:var(--club-modal-height,100dvh); min-width:0;
    align-items:center; justify-content:center; box-sizing:border-box;
    padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));
    background:rgba(20,37,55,.38); overscroll-behavior:contain;
  }
  #mobileClubRoot.pe-mobile-clubs-modal-active .peClubModalPanel {
    display:flex; flex-direction:column; width:100%; max-width:560px; min-width:0;
    max-height:100%; min-height:0; padding:0; margin:0; box-sizing:border-box;
    background:#f4f7fb; border:1px solid #dbe5ef; border-radius:18px;
    overflow:hidden; box-shadow:0 14px 44px rgba(26,46,71,.2);
  }
  #mobileClubRoot.pe-mobile-clubs-modal-active .peClubModalHeader {
    flex:0 0 auto; display:grid; grid-template-columns:minmax(0,1fr) auto;
    align-items:center; gap:12px; padding:10px 12px; margin:0;
    border-bottom:1px solid #dbe5ef; background:#fff; min-width:0;
  }
  #mobileClubRoot.pe-mobile-clubs-modal-active .peClubModalHeader h2 {
    min-width:0; margin:0; font-size:clamp(14px,4vw,17px); line-height:1.35;
    word-break:keep-all; overflow-wrap:anywhere; text-align:left;
  }
  #mobileClubRoot.pe-mobile-clubs-modal-active .peClubModalHeader button {
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:auto; min-width:50px; min-height:44px!important; height:44px; margin:0;
    padding:0 12px!important; border:1px solid #cfddeb; border-radius:10px;
    background:#fff; color:#36506a; font-size:12px!important; line-height:1.2!important;
    white-space:nowrap; text-align:center; box-sizing:border-box; cursor:pointer;
  }
  #mobileClubRoot.pe-mobile-clubs-modal-active .peClubModalBody {
    flex:1 1 auto; min-width:0; min-height:0; width:100%; box-sizing:border-box;
    overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch; padding:12px;
  }
  /* The inline workspace used this node as its own scroll container. Once
     reparented into a dialog, only .peClubModalBody should own scrolling;
     keeping the old max-height/overflow rules traps swipes in a nested box. */
  #mobileClubSectionModal #mobileClubContent {
    width:100%; min-width:0; padding:0!important; margin:0!important;
    height:auto!important; max-height:none!important; flex:none!important;
    overflow:visible!important; overscroll-behavior:auto!important;
  }
  #mobileClubSectionModal .mobileClubStack { min-width:0; }
  #mobileClubSectionModal .mobileClubAttendanceList { padding-bottom:0!important; }
  #mobileClubSectionModal .mobileClubAttendanceDock {
    position:sticky!important; inset:auto!important; bottom:-12px!important;
    width:calc(100% + 24px)!important; max-width:none!important; margin:0 -12px -12px!important;
    padding:10px 12px!important; transform:none!important; box-sizing:border-box!important;
    z-index:20!important;
  }
  #mobileClubDayModal .mobileClubPanel { margin:0; min-width:0; }
  #mobileClubRoot.pe-mobile-clubs-modal-active .peClubModal input,
  #mobileClubRoot.pe-mobile-clubs-modal-active .peClubModal select,
  #mobileClubRoot.pe-mobile-clubs-modal-active .peClubModal textarea { max-width:100%; box-sizing:border-box; }
  @media (prefers-reduced-motion:no-preference) {
    #mobileClubRoot.pe-mobile-clubs-modal-active .peClubModal[data-open="true"] .peClubModalPanel {
      animation:peClubModalEnter .14s ease-out both;
    }
  }
  @keyframes peClubModalEnter { from {opacity:0;transform:translateY(5px)} to {opacity:1;transform:none} }
}